/* Evitar FOUC cuando usa v-cloak */
[v-cloak] {
    display: none;
}

/* =========================
   Variables
   ========================= */
:root {
    --banner-ar: 16/9; /* relación por defecto en "boxed" */
    --banner-boxed-min-h: 340px; /* por si la usas más adelante */
    --banner-max-h: 480px;
    --navbar-h: 50px; /* valor por defecto / fallback */
    /* límite de ancho para el modo boxed + padding lateral */
    --boxed-max-w: clamp(960px, 98vw, 1854px);
    --boxed-pad-x: 1.5rem; /* equivalente a ~pl-4/pr-4 */
}

/* Contenedor común */
.banner-host {
    position: relative;
}

/* =========================
   FULLSCREEN (PC)
   ========================= */
.banner-fullscreen {
    position: relative;
    /* full-bleed sin “banda” por la scrollbar */
    width: 101vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* ocupa exactamente el viewport, sin scroll vertical */
    height: calc(100svh - var(--navbar-h));
    min-height: calc(100svh - var(--navbar-h));
    max-height: calc(100svh - var(--navbar-h));
    overflow: hidden;
}

    /* pipeline Owl ocupa todo el alto del wrapper */
    .banner-fullscreen .owl-carousel,
    .banner-fullscreen .owl-stage-outer,
    .banner-fullscreen .owl-stage,
    .banner-fullscreen .owl-item,
    .banner-fullscreen .item {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        height: 100%;
    }

    .banner-fullscreen .owl-stage-outer {
        overflow: clip;
    }

    .banner-fullscreen .owl-stage {
        padding: 0 !important;
    }

    .banner-fullscreen .owl-item {
        margin: 0 !important;
    }

    /* Contenidos llenan y recortan */
    .banner-fullscreen .cmp-hero,
    .banner-fullscreen .cmp-hero__bg,
    .banner-fullscreen img,
    .banner-fullscreen video,
    .banner-fullscreen iframe,
    .banner-fullscreen .embed-responsive,
    .banner-fullscreen .embed-responsive .embed-responsive-item {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        display: block;
    }

    /* Dots dentro del banner */
    .banner-fullscreen .owl-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 14px;
        margin: 0;
        z-index: 3;
    }

/* Móvil: neutraliza el hack a 100vw si no quieres full-bleed */
@media (max-width: 991.98px) {
    .banner-fullscreen {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* =========================
   BOXED (no PC)
   ========================= */
.banner-boxed {
    position: relative;
    width: 100%; /* ocupa el ancho disponible... */
    max-width: var(--boxed-max-w);
    margin-left: auto;
    margin-right: auto;
    /* padding-left: var(--boxed-pad-x);
       padding-right: var(--boxed-pad-x); */
    box-sizing: border-box; /* evita desbordes por padding */
}

    /* No fijes altura aquí: solo corta desbordes de Owl */
    .banner-boxed .owl-stage-outer {
        overflow: hidden;
    }

    /* El pipeline NO debe forzar altura */
    .banner-boxed .owl-carousel,
    .banner-boxed .owl-stage,
    .banner-boxed .owl-item {
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* El marco visible lo define cada slide (item) */
    .banner-boxed .item,
    .banner-boxed .cmp-hero {
        position: relative;
        width: 100%;
        aspect-ratio: var(--banner-ar, 16/9); /* relación estable */
        /* max-height: var(--banner-max-h); */ /* tope (no mínimo) */
        overflow: hidden; /* sin “peek” */
    }

    /* El medio rellena el marco y se recorta (comportamiento general) */
    .banner-boxed .cmp-hero__bg,
    .banner-boxed img,
    .banner-boxed video,
    .banner-boxed iframe,
    .banner-boxed .embed-responsive,
    .banner-boxed .embed-responsive .embed-responsive-item {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Contenido del overlay adaptado */
    .banner-boxed .cmp-hero__overlay__inner * {
        position: static;
        inset: auto;
        width: auto;
        height: auto;
    }

    /* Dots dentro del banner */
    .banner-boxed .owl-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12px;
        margin: 0;
        z-index: 3;
    }

/* =========================
   BANNERS EN COLUMNAS
   ========================= */

/* Banners dentro de columnas (col-3, col-4, etc.) */
.banner-boxed--col {
    width: 100%; /* respeta el ancho del col-* */
    max-width: var(--boxed-max-w);
    min-width: 0; /* anula el min-width del .banner-boxed normal */
    box-sizing: border-box;
}

    /* El marco NO fuerza aspect-ratio, se adapta al contenido */
    .banner-boxed--col .item,
    .banner-boxed--col .cmp-hero {
        aspect-ratio: auto;
        height: auto;
        overflow: visible; /* por si acaso */
    }

    /* La imagen usa su altura natural, sin recortes ni upscale forzado */
    .banner-boxed--col .cmp-hero__bg,
    .banner-boxed--col img {
        position: static;
        inset: auto;
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

    /* Puntos DELANTE, no superpuestos al banner */
    .banner-boxed--col .owl-dots {
        text-align: center;
    }

/* =========================
   FULL-WIDTH AUTO (AI)
   ========================= */
.banner-ai {
    position: relative;
    /* mismo ancho "full-bleed" que banner-fullscreen */
    width: 101vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: visible; /* el alto crece con el contenido */
}

/* que en móvil no haga el hack de 101vw */
@media (max-width: 991.98px) {
    .banner-ai {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* pipeline Owl con altura automática */
.banner-ai .owl-carousel,
/*.banner-ai .owl-stage-outer,*/
.banner-ai .owl-stage,
.banner-ai .owl-item,
.banner-ai .item {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
}

/* stage-outer: que recorte lateral, pero sin height !important */
.banner-ai .owl-stage-outer {
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.banner-ai .owl-stage-outer {
    overflow: hidden; /* que no se vea el slide siguiente lateralmente */
}

/* El contenido manda: img / video definen la altura */
.banner-ai .cmp-hero,
.banner-ai .cmp-hero__bg,
.banner-ai img,
.banner-ai video,
.banner-ai iframe,
.banner-ai .embed-responsive,
.banner-ai .embed-responsive .embed-responsive-item {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* no recortar, que se vea entero */
}

/* dots debajo del banner (como en boxed--col) */
.banner-ai .owl-dots {
    position: static;
    margin-top: .5rem;
    text-align: center;
}

/* =========================
   OVERLAY COMÚN
   ========================= */
.banner-fullscreen .cmp-hero__overlay,
.banner-boxed .cmp-hero__overlay,
.banner-ai .cmp-hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.banner-fullscreen .cmp-hero__overlay__inner,
.banner-boxed .cmp-hero__overlay__inner,
.banner-ai .cmp-hero__overlay__inner {
    pointer-events: auto;
    max-width: 1200px;
    margin: 0 auto;
    text-align:center!important;
}

/* =========================
   ESPECÍFICO CONTACT-THEME
   (AI + BOXED sin recorte ni zoom)
   ========================= */

/* El contenedor no debe forzar altura tipo fullscreen / boxed */
.banner-ai .contact-theme,
.banner-ai .contact-theme .cmp-hero,
.banner-boxed .contact-theme,
.banner-boxed .contact-theme .cmp-hero {
    position: relative;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto; /* que la imagen marque la relación */
}

    /* La imagen manda: se escala y define la altura */
    .banner-ai .contact-theme .cmp-hero__bg,
    .banner-boxed .contact-theme .cmp-hero__bg {
        position: relative;
        inset: auto;
        float: none; /* quitamos el float-left global */
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain; /* sin recorte ni zoom */
    }

        /* Si la imagen lleva la clase .cover global, la anulamos aquí */
        .banner-boxed .contact-theme .cmp-hero__bg.cover,
        .banner-ai .contact-theme .cmp-hero__bg.cover {
            object-fit: contain !important;
        }

    /* Overlay realmente encima de la imagen, centrado */
    .banner-ai .contact-theme .cmp-hero__overlay,
    .banner-boxed .contact-theme .cmp-hero__overlay {
        position: absolute !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        pointer-events: none;
        z-index: 2;
    }

    .banner-ai .contact-theme .cmp-hero__overlay__inner,
    .banner-boxed .contact-theme .cmp-hero__overlay__inner {
        pointer-events: auto;
        max-width: 1200px;
        margin: 0 auto;
    }

/* Ajuste de padding lateral solo para AI + contacto */
.banner-ai .contact-theme {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* =========================
   OTROS AJUSTES
   ========================= */

/* El root del componente y el siguiente wrapper ocupan todo el alto del item en fullscreen */
.banner-fullscreen .owl-item > .item > div,
.banner-fullscreen .owl-item > .item > div > div {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}

/* Si quieres ser más explícito con contact-theme en fullscreen */
.banner-fullscreen .contact-theme {
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
}

/* no-upscale: imágenes que no deben recortarse en otros contextos */
.cmp-hero > img.cmp-hero__bg.no-upscale {
    position: static; /* o relative, pero no absoluta */
    width: 100%;
    height: auto; /* clave: no forzar altura */
    display: block;
    object-fit: contain;
}

.banner-fullscreen .cmp-hero__bg.no-upscale {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover !important;
}

.banner-fullscreen video.cmp-hero__bg {
    width: 100%;
    height: 100%;
    /* object-fit: contain !important; */
    display: block;
}