/**
 * Banner "Servicio técnico Profesional": foto de fondo (opcional — sin ella
 * queda el gris plano de --color-bg-muted) con un degradado hacia blanco para
 * que el logo + copy, apoyados abajo, queden legibles encima.
 *
 * Compartido entre la página Automatización (template-parts/automatizacion/
 * tecser.php, contenido fijo de esa página), la ficha de producto
 * (single-product.php, banner cruzado por categoría/industria — ver
 * andexport-core/inc/banner.php) y el espacio publicitario del home
 * (template-parts/home/publicidad.php — ver andexport-core/inc/
 * home-publicidad.php): antes vivía solo en automatizacion.css, que las
 * otras plantillas no encolan (arrastraría el resto de esa hoja, todo lo
 * demás específico de esa página). Se separó acá para que las tres
 * plantillas usen exactamente las mismas clases sin duplicar CSS — así no se
 * pueden desalinear de nuevo.
 *
 * .eyebrow va completo acá (no como el ".automatizacion-tecser-copy .eyebrow
 * { color }" que sobreescribía la base de nosotros.css) porque la ficha de
 * producto y el home tampoco encolan nosotros.css.
 */

.automatizacion-tecser-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 380px;
    padding: var(--space-24);
    border-radius: var(--radius-large);
    background-color: var(--color-bg-muted);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.automatizacion-tecser-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.92) 72%, #fff 88%);
}

/* Espacio publicitario del home (template-parts/home/publicidad.php): puede
   ser solo una imagen, sin logo ni copy encima — ahí el degradado blanco
   solo lavaría la foto sin motivo, así que se omite. */
.automatizacion-tecser-card--sin-copy::before {
    display: none;
}

@media (min-width: 768px) {
    .automatizacion-tecser-card {
        min-height: 460px;
        padding: var(--space-48);
    }
}

.automatizacion-tecser-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
}

@media (min-width: 768px) {
    .automatizacion-tecser-body {
        display: grid;
        grid-template-columns: 40% 60%;
        align-items: end;
        gap: var(--space-32);
    }
}

.automatizacion-tecser-logo {
    height: 56px;
    width: auto;
    flex-shrink: 0;
    justify-self: end;
}

@media (min-width: 768px) {
    .automatizacion-tecser-logo {
        height: 154px !important;
    }
}

.automatizacion-tecser-copy .eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--text-label-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-body);
}

.automatizacion-tecser-copy :where(h2, h1.ax-h1p) {
    color: var(--color-tecser);
}

.automatizacion-tecser-copy p {
    margin-top: var(--space-8);
    color: var(--color-gray-01);
}

.automatizacion-tecser-enlace {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-16);
    font-weight: 700;
    color: var(--color-tecser);
}

.automatizacion-tecser-enlace svg {
    width: 16px;
    height: 16px;
}


/* Espacio publicitario con video de fondo, sombra elegida y ancho completo (template-parts/home/publicidad.php). */
.automatizacion-tecser-card {
    isolation: isolate;
}

.automatizacion-tecser-card::before {
    z-index: 1;
}

.automatizacion-tecser-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quien tiene desactivadas las animaciones ve la imagen de fondo en vez del video. */
@media (prefers-reduced-motion: reduce) {
    .automatizacion-tecser-video {
        display: none;
    }
}

.automatizacion-tecser-card--sin-sombra::before {
    display: none;
}

/* Sombra oscura: degradado oscuro. El color del texto va aparte (Color del texto → Claro / Automático). */
.automatizacion-tecser-card--oscura::before {
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.15) 0%, rgba(18, 18, 18, 0.55) 55%, rgba(18, 18, 18, 0.85) 100%);
}

/* Texto claro (blanco). Sin esta clase el texto es el oscuro de siempre. */
.automatizacion-tecser-card--texto-claro .automatizacion-tecser-copy :where(h2, h1.ax-h1p),
.automatizacion-tecser-card--texto-claro .automatizacion-tecser-copy p,
.automatizacion-tecser-card--texto-claro .automatizacion-tecser-copy .eyebrow,
.automatizacion-tecser-card--texto-claro .automatizacion-tecser-enlace {
    color: var(--color-white);
}

/* Enlace como botón (Estilo del enlace): se separa del texto de arriba. */
.automatizacion-tecser-boton {
    margin-top: var(--space-16);
}

/* Ancho completo: de borde a borde, sin esquinas redondeadas; el contenido sigue alineado con el resto de la página. */
.home-publicidad--completo {
    padding-inline: 0;
}

.automatizacion-tecser-card--completo {
    border-radius: 0;
    padding-inline: 0;
}

.automatizacion-tecser-contenedor {
    position: relative;
    z-index: 2;
    width: 100%;
}