/*
 * Autos Esquivel — Commercial media integration
 * Uses every asset from /public/images/comercial across the public website.
 * The treatment stays intentionally editorial: full-bleed photography for heroes,
 * quiet photo accents behind content, and responsive crops that never compete
 * with forms, selectors or primary calls to action.
 */

:root {
    --ae-commercial-line: color-mix(in srgb, currentColor 12%, transparent);
    --ae-commercial-shadow: 0 26px 70px rgba(0, 0, 0, .20);
}

[data-public-home-hero],
[data-public-home-smart-search],
.ae-featured,
[data-public-sell-car],
.ae-about-hero,
.ae-about-manifesto,
.ae-about-business,
.ae-about-pillars,
.ae-about-process,
.ae-about-services,
.ae-financing-hero,
.ae-financing-overview,
.ae-financing-simulator,
.ae-financing-institutions,
.ae-financing-products,
.ae-financing-promo,
.ae-sell-page__hero,
.ae-sell-page__showcase,
.ae-sell-page__rail,
.ae-sell-page__information,
.ae-sell-page__faq,
.ae-contact,
.ae-contact__branch-section,
.ae-contact__workspace,
.ae-contact__info-grid {
    position: relative;
    isolation: isolate;
}

[data-public-home-hero]::before,
[data-public-home-hero]::after,
[data-public-home-smart-search]::before,
.ae-featured::before,
.ae-featured::after,
[data-public-sell-car]::before,
.ae-about-hero::before,
.ae-about-manifesto::after,
.ae-about-business::before,
.ae-about-pillars::before,
.ae-about-process::before,
.ae-about-services::after,
.ae-financing-overview::before,
.ae-financing-simulator::before,
.ae-financing-institutions::before,
.ae-financing-products::before,
.ae-sell-page__rail::before,
.ae-sell-page__faq::before,
.ae-contact__branch-section::before,
.ae-contact__workspace::before,
.ae-contact__info-grid::before {
    content: "";
    pointer-events: none;
    position: absolute;
}

/* -------------------------------------------------------------------------- */
/* HOME — comercial 1–6                                                      */
/* -------------------------------------------------------------------------- */

[data-public-home-hero] {
    min-height: clamp(520px, 74vh, 820px);
    background: #08090a;
    overflow: hidden;
}

[data-public-home-hero]::before {
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(4, 5, 6, .94) 0%, rgba(4, 5, 6, .74) 42%, rgba(4, 5, 6, .26) 72%, rgba(4, 5, 6, .58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .72)),
        url('/images/comercial/1.webp') center 46% / cover no-repeat;
}

[data-public-home-hero]::after {
    z-index: 1;
    right: clamp(20px, 5vw, 84px);
    bottom: clamp(24px, 6vh, 72px);
    width: clamp(180px, 24vw, 360px);
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .42)),
        url('/images/comercial/2.webp') center / cover no-repeat;
    box-shadow: var(--ae-commercial-shadow);
    opacity: .78;
}

[data-public-home-hero] > * {
    position: relative;
    z-index: 2;
}

[data-public-home-smart-search] {
    background:
        linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.92) 58%, rgba(255,255,255,.76)),
        url('/images/comercial/3.webp') right center / min(48vw, 720px) auto no-repeat;
}

[data-theme="dark"] [data-public-home-smart-search] {
    background:
        linear-gradient(90deg, rgba(12,13,15,.98), rgba(12,13,15,.93) 58%, rgba(12,13,15,.78)),
        url('/images/comercial/3.webp') right center / min(48vw, 720px) auto no-repeat;
}

.ae-featured {
    overflow: hidden;
}

.ae-featured::before {
    inset: 8% auto auto -6%;
    width: min(34vw, 520px);
    aspect-ratio: 4 / 5;
    z-index: -1;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28)),
        url('/images/comercial/4.webp') center / cover no-repeat;
    opacity: .10;
    transform: rotate(-3deg);
}

.ae-featured::after {
    inset: auto -5% 5% auto;
    width: min(30vw, 460px);
    aspect-ratio: 4 / 5;
    z-index: -1;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28)),
        url('/images/comercial/5.webp') center / cover no-repeat;
    opacity: .09;
    transform: rotate(3deg);
}

[data-public-sell-car] {
    background:
        linear-gradient(90deg, rgba(7,8,9,.98), rgba(7,8,9,.92) 48%, rgba(7,8,9,.55)),
        url('/images/comercial/6.webp') right center / cover no-repeat;
}

/* -------------------------------------------------------------------------- */
/* ABOUT — comercial 7–14                                                     */
/* -------------------------------------------------------------------------- */

.ae-about-hero {
    overflow: hidden;
}

.ae-about-hero::before {
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8,9,10,.97) 0%, rgba(8,9,10,.84) 46%, rgba(8,9,10,.56) 72%, rgba(8,9,10,.78) 100%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.66)),
        url('/images/comercial/7.webp') center / cover no-repeat;
}

[data-theme="light"] .ae-about-hero::before {
    background:
        linear-gradient(90deg, rgba(247,248,249,.96) 0%, rgba(247,248,249,.87) 46%, rgba(247,248,249,.64) 72%, rgba(247,248,249,.78) 100%),
        url('/images/comercial/7.webp') center / cover no-repeat;
}

.ae-about-manifesto {
    overflow: hidden;
}

.ae-about-manifesto::after {
    right: clamp(-90px, -5vw, -24px);
    top: 50%;
    width: min(46vw, 700px);
    height: min(76%, 520px);
    transform: translateY(-50%);
    z-index: -1;
    border-radius: 34px 0 0 34px;
    background-image:
        linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.14)),
        url('/images/comercial/8.webp'),
        url('/images/comercial/9.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%, 58% 86%, 44% 68%;
    background-position: center, left center, right 18% bottom 8%;
    opacity: .14;
}

.ae-about-business {
    overflow: hidden;
}

.ae-about-business::before {
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(6,7,8,.96), rgba(6,7,8,.88) 58%, rgba(6,7,8,.66)),
        url('/images/comercial/10.webp') center / cover no-repeat;
    opacity: .24;
}

.ae-about-pillars::before {
    top: 8%;
    left: 50%;
    width: min(92vw, 1420px);
    height: 84%;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 36px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.92)),
        url('/images/comercial/11.webp') center / cover no-repeat;
    opacity: .92;
}

[data-theme="dark"] .ae-about-pillars::before {
    background:
        linear-gradient(90deg, rgba(14,15,17,.96), rgba(14,15,17,.91)),
        url('/images/comercial/11.webp') center / cover no-repeat;
}

.ae-about-process {
    overflow: hidden;
}

.ae-about-process::before {
    inset: 6% 0 6% auto;
    width: min(42vw, 650px);
    z-index: -1;
    border-radius: 34px 0 0 34px;
    background-image:
        linear-gradient(90deg, rgba(8,9,10,.96), rgba(8,9,10,.46)),
        url('/images/comercial/12.webp'),
        url('/images/comercial/13.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%, 66% 88%, 46% 58%;
    background-position: center, left center, right 8% bottom 8%;
    opacity: .20;
}

.ae-about-services {
    overflow: hidden;
}

.ae-about-services::after {
    left: 50%;
    bottom: -28%;
    width: min(92vw, 1380px);
    height: 72%;
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 50% 50% 0 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.50)),
        url('/images/comercial/14.webp') center 62% / cover no-repeat;
    opacity: .10;
}

/* -------------------------------------------------------------------------- */
/* FINANCING — comercial 15–19                                                */
/* -------------------------------------------------------------------------- */

.ae-financing-hero {
    --ae-financing-hero-image: url('/images/comercial/15.webp') !important;
}

.ae-financing-overview {
    overflow: hidden;
}

.ae-financing-overview::before {
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.84)),
        url('/images/comercial/16.webp') center / cover no-repeat;
    opacity: .34;
}

[data-theme="dark"] .ae-financing-overview::before {
    background:
        linear-gradient(90deg, rgba(12,13,15,.96), rgba(12,13,15,.84)),
        url('/images/comercial/16.webp') center / cover no-repeat;
}

.ae-financing-simulator::before {
    right: clamp(16px, 4vw, 72px);
    top: clamp(28px, 5vw, 72px);
    width: min(28vw, 400px);
    aspect-ratio: 4 / 3;
    z-index: -1;
    border: 1px solid var(--ae-commercial-line);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.30)),
        url('/images/comercial/17.webp') center / cover no-repeat;
    opacity: .14;
}

.ae-financing-institutions::before,
.ae-financing-products::before {
    inset: 10% auto 10% 54%;
    z-index: -1;
    border-radius: 30px 0 0 30px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.78)),
        url('/images/comercial/18.webp') center / cover no-repeat;
    opacity: .20;
}

[data-theme="dark"] .ae-financing-institutions::before,
[data-theme="dark"] .ae-financing-products::before {
    background:
        linear-gradient(90deg, rgba(11,12,14,.96), rgba(11,12,14,.78)),
        url('/images/comercial/18.webp') center / cover no-repeat;
}

.ae-financing-promo {
    --ae-financing-promo-image: url('/images/comercial/19.webp') !important;
}

/* -------------------------------------------------------------------------- */
/* SELL YOUR CAR — comercial 20–24                                            */
/* -------------------------------------------------------------------------- */

.ae-sell-page__hero-media {
    background-image:
        linear-gradient(90deg, rgba(5,6,7,.94), rgba(5,6,7,.32)),
        url('/images/comercial/20.webp') !important;
    background-position: center !important;
    background-size: cover !important;
}

.ae-sell-page__showcase-media,
.ae-sell-page__inspection-media {
    background-color: #08090a;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

.ae-sell-page__showcase-media {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22)),
        url('/images/comercial/21.webp');
}

.ae-sell-page__inspection-media {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.28)),
        url('/images/comercial/22.webp');
}

.ae-sell-page__showcase-media > img,
.ae-sell-page__inspection-media > img {
    opacity: 0;
}

.ae-sell-page__rail {
    overflow: hidden;
}

.ae-sell-page__rail::before {
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(90deg, rgba(8,9,10,.96), rgba(8,9,10,.88)),
        url('/images/comercial/23.webp');
    background-position: center;
    background-size: cover;
    opacity: .26;
}

.ae-sell-page__faq {
    overflow: hidden;
}

.ae-sell-page__faq::before {
    right: -6%;
    bottom: -24%;
    width: min(44vw, 680px);
    aspect-ratio: 4 / 3;
    z-index: -1;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.46)),
        url('/images/comercial/24.webp') center / cover no-repeat;
    opacity: .12;
    transform: rotate(3deg);
}

/* -------------------------------------------------------------------------- */
/* CONTACT — comercial 25–28                                                  */
/* -------------------------------------------------------------------------- */

.ae-contact {
    --ae-contact-hero-image: url('/images/comercial/25.webp') !important;
}

.ae-contact__branch-section {
    overflow: hidden;
}

.ae-contact__branch-section::before {
    right: -7%;
    top: 0;
    width: min(42vw, 660px);
    height: 100%;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.72)),
        url('/images/comercial/26.webp') center / cover no-repeat;
    opacity: .18;
}

[data-theme="dark"] .ae-contact__branch-section::before {
    background:
        linear-gradient(90deg, rgba(10,11,13,.98), rgba(10,11,13,.72)),
        url('/images/comercial/26.webp') center / cover no-repeat;
}

.ae-contact__workspace::before {
    left: -6%;
    top: 42%;
    width: min(32vw, 500px);
    aspect-ratio: 4 / 5;
    z-index: -1;
    border-radius: 0 30px 30px 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.30)),
        url('/images/comercial/27.webp') center / cover no-repeat;
    opacity: .08;
}

.ae-contact__info-grid {
    overflow: hidden;
}

.ae-contact__info-grid::before {
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8,9,10,.97), rgba(8,9,10,.84)),
        url('/images/comercial/28.webp') center 55% / cover no-repeat;
    opacity: .28;
}

/* Keep functional UI above decorative photography. */
.ae-about-hero > .site-shell,
.ae-about-manifesto > .site-shell,
.ae-about-business > .site-shell,
.ae-about-pillars > .site-shell,
.ae-about-process > .site-shell,
.ae-about-services > .site-shell,
.ae-financing-overview > .site-shell,
.ae-financing-simulator > .site-shell,
.ae-financing-institutions > .site-shell,
.ae-financing-products > .site-shell,
.ae-sell-page__rail > .site-shell,
.ae-sell-page__faq > .site-shell,
.ae-contact__branch-section > *,
.ae-contact__workspace > *,
.ae-contact__info-grid > * {
    position: relative;
    z-index: 1;
}

/* Light theme: photographic accents stay quieter to preserve contrast. */
[data-theme="light"] .ae-featured::before,
[data-theme="light"] .ae-featured::after,
[data-theme="light"] .ae-about-manifesto::after,
[data-theme="light"] .ae-about-process::before,
[data-theme="light"] .ae-about-services::after,
[data-theme="light"] .ae-financing-simulator::before,
[data-theme="light"] .ae-sell-page__faq::before,
[data-theme="light"] .ae-contact__workspace::before {
    opacity: .065;
}

@media (max-width: 1024px) {
    [data-public-home-hero]::after {
        width: clamp(160px, 27vw, 260px);
        right: 24px;
        bottom: 26px;
        opacity: .58;
    }

    .ae-about-manifesto::after,
    .ae-about-process::before,
    .ae-contact__branch-section::before {
        width: 52vw;
        opacity: .10;
    }

    .ae-financing-simulator::before {
        width: 34vw;
        opacity: .08;
    }
}

@media (max-width: 760px) {
    [data-public-home-hero] {
        min-height: 620px;
    }

    [data-public-home-hero]::before {
        background:
            linear-gradient(180deg, rgba(4,5,6,.68) 0%, rgba(4,5,6,.76) 36%, rgba(4,5,6,.96) 88%),
            url('/images/comercial/1.webp') 58% center / cover no-repeat;
    }

    [data-public-home-hero]::after {
        display: none;
    }

    [data-public-home-smart-search] {
        background-image: none;
    }

    .ae-featured::before,
    .ae-featured::after,
    .ae-about-manifesto::after,
    .ae-about-process::before,
    .ae-about-services::after,
    .ae-financing-simulator::before,
    .ae-financing-institutions::before,
    .ae-financing-products::before,
    .ae-sell-page__faq::before,
    .ae-contact__branch-section::before,
    .ae-contact__workspace::before {
        opacity: .045;
    }

    .ae-about-hero::before {
        background:
            linear-gradient(180deg, rgba(8,9,10,.58), rgba(8,9,10,.95) 72%),
            url('/images/comercial/7.webp') 58% center / cover no-repeat;
    }

    [data-theme="light"] .ae-about-hero::before {
        background:
            linear-gradient(180deg, rgba(247,248,249,.62), rgba(247,248,249,.97) 72%),
            url('/images/comercial/7.webp') 58% center / cover no-repeat;
    }

    [data-public-sell-car] {
        background:
            linear-gradient(180deg, rgba(7,8,9,.78), rgba(7,8,9,.97)),
            url('/images/comercial/6.webp') center / cover no-repeat;
    }

    .ae-sell-page__hero-media {
        background-position: 58% center !important;
    }
}

@media (prefers-reduced-data: reduce) {
    /* Keep only the most useful hero images when the browser explicitly asks for less data. */
    [data-public-home-hero]::after,
    .ae-featured::before,
    .ae-featured::after,
    .ae-about-manifesto::after,
    .ae-about-business::before,
    .ae-about-pillars::before,
    .ae-about-process::before,
    .ae-about-services::after,
    .ae-financing-overview::before,
    .ae-financing-simulator::before,
    .ae-financing-institutions::before,
    .ae-financing-products::before,
    .ae-sell-page__rail::before,
    .ae-sell-page__faq::before,
    .ae-contact__branch-section::before,
    .ae-contact__workspace::before,
    .ae-contact__info-grid::before {
        background-image: none !important;
    }
}