/* Autos Esquivel — hero comercial con fundido cinematográfico.
 * La portada usa una fotografía real de /public/images/comercial como fondo,
 * manteniendo el lado del copy oscuro y dejando visible el vehículo al centro/derecha.
 */

.public-site-rebuild .ae-hero,
html[data-theme="light"] .public-site-rebuild .ae-hero,
html[data-theme="dark"] .public-site-rebuild .ae-hero {
    --hero-fg: #f7f7f7;
    --hero-muted: rgba(247, 247, 247, .72);
    --hero-faint: rgba(247, 247, 247, .10);
    --hero-line: rgba(247, 247, 247, .17);
    --hero-surface: rgba(8, 9, 11, .58);
    --hero-button: #f7f7f7;
    --hero-button-fg: #0a0b0d;
    background: #07080a !important;
    color: var(--hero-fg) !important;
}

/* La foto comercial permanece reconocible, sin competir con el titular. */
.public-site-rebuild .ae-hero__poster,
html[data-theme="light"] .public-site-rebuild .ae-hero__poster,
html[data-theme="dark"] .public-site-rebuild .ae-hero__poster {
    filter: saturate(1.02) contrast(1.03) brightness(.98) !important;
    object-position: 58% 52% !important;
}

.public-site-rebuild .ae-hero.is-ready .ae-hero__poster,
html[data-theme="light"] .public-site-rebuild .ae-hero.is-ready .ae-hero__poster,
html[data-theme="dark"] .public-site-rebuild .ae-hero.is-ready .ae-hero__poster {
    opacity: .96 !important;
}

/* El video gana un poco de presencia sin perder legibilidad del copy. */
.public-site-rebuild .ae-hero__video iframe,
html[data-theme="light"] .public-site-rebuild .ae-hero__video iframe,
html[data-theme="dark"] .public-site-rebuild .ae-hero__video iframe {
    filter: saturate(1.06) contrast(1.02) brightness(1.02) !important;
}

/* Fundido negro progresivo: sólido detrás del copy y mucho más ligero sobre
 * el vehículo para que la fotografía sí se perciba en el banner. */
.public-site-rebuild .ae-hero__media-shade,
html[data-theme="light"] .public-site-rebuild .ae-hero__media-shade,
html[data-theme="dark"] .public-site-rebuild .ae-hero__media-shade {
    z-index: 1 !important;
    background:
        linear-gradient(
            90deg,
            rgba(3, 4, 5, .74) 0%,
            rgba(3, 4, 5, .62) 16%,
            rgba(3, 4, 5, .44) 34%,
            rgba(3, 4, 5, .25) 52%,
            rgba(3, 4, 5, .10) 70%,
            rgba(3, 4, 5, .06) 86%,
            rgba(3, 4, 5, .14) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3, 4, 5, .08) 0%,
            rgba(3, 4, 5, .02) 40%,
            rgba(3, 4, 5, .07) 72%,
            rgba(3, 4, 5, .30) 100%
        ) !important;
}

/* Vignette local muy suave para garantizar contraste justo detrás del texto. */
.public-site-rebuild .ae-hero__media-shade::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 31% 48%,
        rgba(0, 0, 0, .22) 0%,
        rgba(0, 0, 0, .08) 32%,
        rgba(0, 0, 0, 0) 56%
    );
}

/* El hero conserva la misma paleta cinematográfica incluso con el sitio en light. */
.public-site-rebuild .ae-hero__eyebrow,
.public-site-rebuild .ae-hero__kinetic,
.public-site-rebuild .ae-hero__copy,
.public-site-rebuild .ae-hero__finance-link,
.public-site-rebuild .ae-hero__signals,
.public-site-rebuild .ae-hero__bottom-inner,
html[data-theme="light"] .public-site-rebuild .ae-hero__eyebrow,
html[data-theme="light"] .public-site-rebuild .ae-hero__kinetic,
html[data-theme="light"] .public-site-rebuild .ae-hero__copy,
html[data-theme="light"] .public-site-rebuild .ae-hero__finance-link,
html[data-theme="light"] .public-site-rebuild .ae-hero__signals,
html[data-theme="light"] .public-site-rebuild .ae-hero__bottom-inner {
    color: var(--hero-muted) !important;
}

.public-site-rebuild .ae-hero__title,
.public-site-rebuild .ae-hero__title-main,
.public-site-rebuild .ae-hero__kinetic-window,
html[data-theme="light"] .public-site-rebuild .ae-hero__title,
html[data-theme="light"] .public-site-rebuild .ae-hero__title-main,
html[data-theme="light"] .public-site-rebuild .ae-hero__kinetic-window {
    color: #f7f7f7 !important;
}

.public-site-rebuild .ae-hero__title-accent,
html[data-theme="light"] .public-site-rebuild .ae-hero__title-accent {
    color: transparent !important;
    -webkit-text-stroke: 1.35px rgba(255, 255, 255, .96) !important;
    text-stroke: 1.35px rgba(255, 255, 255, .96) !important;
}

/* CTAs legibles sobre la fotografía. */
.public-site-rebuild .ae-hero__cta--primary,
html[data-theme="light"] .public-site-rebuild .ae-hero__cta--primary {
    border-color: #f7f7f7 !important;
    background: #f7f7f7 !important;
    color: #0a0b0d !important;
    -webkit-text-fill-color: #0a0b0d !important;
    box-shadow: 0 13px 30px rgba(0, 0, 0, .24) !important;
}

.public-site-rebuild .ae-hero__cta--secondary,
html[data-theme="light"] .public-site-rebuild .ae-hero__cta--secondary {
    border-color: rgba(255, 255, 255, .32) !important;
    background: rgba(7, 8, 10, .54) !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    backdrop-filter: blur(16px) !important;
}

.public-site-rebuild .ae-hero__grid,
html[data-theme="light"] .public-site-rebuild .ae-hero__grid {
    color: #f7f7f7 !important;
    opacity: .20 !important;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) !important;
}

.public-site-rebuild .ae-hero__bottom,
html[data-theme="light"] .public-site-rebuild .ae-hero__bottom {
    border-top-color: rgba(255,255,255,.13) !important;
    background: linear-gradient(90deg, rgba(4,5,6,.52), rgba(4,5,6,.08) 72%, transparent) !important;
}

@media (max-width: 720px) {
    /* En móvil el media ahora ocupa el hero completo y se recorta de forma simétrica.
     * Antes terminaba en right:-34%, lo que desplazaba visualmente el video a la derecha. */
    .public-site-rebuild .ae-hero__media,
    html[data-theme="light"] .public-site-rebuild .ae-hero__media,
    html[data-theme="dark"] .public-site-rebuild .ae-hero__media {
        left: -6% !important;
        right: -6% !important;
    }

    .public-site-rebuild .ae-hero__poster,
    html[data-theme="light"] .public-site-rebuild .ae-hero__poster,
    html[data-theme="dark"] .public-site-rebuild .ae-hero__poster {
        filter: saturate(.98) contrast(1.03) brightness(.90) !important;
        object-position: 50% 50% !important;
    }

    .public-site-rebuild .ae-hero__video iframe,
    html[data-theme="light"] .public-site-rebuild .ae-hero__video iframe,
    html[data-theme="dark"] .public-site-rebuild .ae-hero__video iframe {
        left: 50% !important;
        transform: translate(-50%, -50%) scale(1.20) !important;
        transform-origin: center center !important;
        filter: saturate(1.04) contrast(1.02) brightness(.94) !important;
    }

    .public-site-rebuild .ae-hero.is-ready .ae-hero__poster,
    html[data-theme="light"] .public-site-rebuild .ae-hero.is-ready .ae-hero__poster {
        opacity: .82 !important;
    }

    .public-site-rebuild .ae-hero__media-shade,
    html[data-theme="light"] .public-site-rebuild .ae-hero__media-shade {
        background:
            linear-gradient(180deg, rgba(3,4,5,.22) 0%, rgba(3,4,5,.28) 38%, rgba(3,4,5,.62) 77%, rgba(3,4,5,.84) 100%),
            linear-gradient(90deg, rgba(3,4,5,.46), rgba(3,4,5,.10)) !important;
    }

    .public-site-rebuild .ae-hero__media-shade::before {
        background: radial-gradient(ellipse at 42% 60%, rgba(0,0,0,.18), transparent 60%);
    }

    /* Quitamos únicamente las divisiones verticales del grid en móvil.
     * Eran la línea que atravesaba el hero en la captura; se conserva una textura horizontal sutil. */
    .public-site-rebuild .ae-hero__grid,
    html[data-theme="light"] .public-site-rebuild .ae-hero__grid,
    html[data-theme="dark"] .public-site-rebuild .ae-hero__grid {
        opacity: .12 !important;
        background-image: linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px) !important;
        background-size: 72px 72px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .public-site-rebuild .ae-hero__poster,
    html[data-theme="light"] .public-site-rebuild .ae-hero__poster {
        filter: saturate(.98) contrast(1.04) brightness(.90) !important;
        opacity: .92 !important;
    }
}