/* =========================
   0) Safety: evitar scroll horizontal accidental
   ========================= */
html, body {
    overflow-x: hidden;
}

/* =========================
   MÓVIL (≤ 767.98px)
   ========================= */
@media (max-width: 767.98px) {

    /* Full-bleed: en móvil NO uses 101vw */
    .banner-fullscreen,
    .banner-ai {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fullscreen banner: en móvil deja altura natural */
    .banner-fullscreen {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

        .banner-fullscreen .owl-carousel,
        .banner-fullscreen .owl-stage-outer,
        .banner-fullscreen .owl-stage,
        .banner-fullscreen .owl-item,
        .banner-fullscreen .item {
            height: auto !important;
        }

    /* Overlay general (mobile): compacto */
    .cmp-hero__overlay {
        padding: 1rem !important;
    }

    .cmp-hero__overlay__inner {
        max-width: 92vw !important;
    }

        .cmp-hero__overlay__inner h1 {
            font-size: 1.6rem !important;
        }

        .cmp-hero__overlay__inner h2 {
            font-size: 1.3rem !important;
        }

        .cmp-hero__overlay__inner h3 {
            font-size: 1.1rem !important;
        }

        .cmp-hero__overlay__inner p {
            font-size: 1rem !important;
        }

    /* Disposición HOR: gap */
    .d-flex.flex-column.flex-md-row.align-items-start {
        gap: .75rem;
    }

    /* banner-boxed con pr-4: en móvil quita padding lateral extra */
    .banner-boxed.mt-1.pr-4 {
        padding-right: 0 !important;
    }

    /* =========================================================
     BANNER-AI: APILADO REAL EN MÓVIL (imagen + bloque texto)
     ========================================================= */

    /* 1) CLAVE: dejar que el viewport de Owl NO recorte en vertical
        (si recorta, aunque la slide crezca, no verás el texto) */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .owl-stage-outer {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    /* 2) CLAVE: el item/hero debe crecer con su contenido */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .owl-item,
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .item,
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .contact-theme,
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .contact-theme .cmp-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
    }

        /* 3) El hero en flujo normal */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .contact-theme .cmp-hero {
            display: block !important;
        }

        /* 4) Imagen en flujo (si viene como .cover absoluta) */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .contact-theme .cmp-hero__bg.cover,
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .contact-theme img.cmp-hero__bg {
            position: relative !important;
            inset: auto !important;
            float: none !important;
            width: 100% !important;
            height: auto !important;
            display: block !important;
            object-fit: contain !important; /* cambia a cover si quieres recorte */
        }

        /* 5) El overlay deja de ser overlay: pasa a bloque debajo
        (esto hace que el alto medido incluya el texto) */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .contact-theme .cmp-hero__overlay {
            position: static !important;
            inset: auto !important;
            display: block !important;
            width: 100% !important;
            margin: 0 !important;
            padding: .75rem .75rem 1rem !important;
            pointer-events: none !important; /* contenedor no clicable */
            background: transparent !important; /* NO tiñe la imagen */
            text-shadow: none !important;
        }

        /* 6) Fondo SOLO detrás del texto/CTA */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .contact-theme .cmp-hero__overlay__inner {
            pointer-events: auto !important; /* botones sí */
            width: 100% !important;
            max-width: none !important;
            text-align: center !important;
            background: rgba(0,0,0,.55);
            color: #fff !important;
            padding: .75rem 1rem;
            border-radius: .5rem;
            box-sizing: border-box;
        }

    /* 7) Dots: fuera (no superpuestos) */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .owl-dots {
        position: static !important;
        margin-top: .5rem !important;
        text-align: center !important;
    }
}

/* =========================
   TABLET (768px–991.98px)
   ========================= */
@media (min-width: 768px) and (max-width: 991.98px) {
    .banner-fullscreen,
    .banner-ai {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .cmp-hero__overlay__inner {
        max-width: 88vw !important;
    }

    /* Un pelín menos de padding para ganar “aire” */
    .banner-host .cmp-hero__overlay {
        padding: 1rem !important;
    }

    /* Tamaño base del overlay (esto “gobierna” todo si heredamos) */
    .banner-host .cmp-hero__overlay__inner {
        max-width: 88vw !important; /* ya lo tenías */
        font-size: clamp(13px, 1.6vw, 15px); /* 👈 ajusta si quieres más/menos */
    }

        /* Pisar inline del editor (pt/px) y hacer que todo herede */
        .banner-host .cmp-hero__overlay__inner * {
            font-size: inherit !important;
            line-height: 1.25;
        }

        /* Títulos algo más pequeños (sin pasarte) */
        .banner-host .cmp-hero__overlay__inner :is(h1,h2,h3) {
            font-size: clamp(1.25rem, 3.2vw, 1.9rem) !important;
            line-height: 1.1;
            margin: 0 0 .35rem !important;
        }

        /* Botones más compactos */
        .banner-host .cmp-hero__overlay__inner a.btn-editor-cta,
        .banner-host .cmp-hero__overlay__inner a.btn,
        .banner-host .cmp-hero__overlay__inner button.btn {
            font-size: clamp(.9rem, 1.9vw, 1rem) !important;
            padding: .45rem .85rem !important;
        }
}

/* =========================
   FIX HERO (≤ 575.98px)
   ========================= */
@media (max-width: 575.98px) {
    .banner-boxed {
        --banner-ar: 4/3;
    }

        .banner-boxed .cmp-hero__overlay,
        .banner-ai .cmp-hero__overlay {
            align-items: flex-start;
            padding: 1rem .75rem;
        }

        .banner-boxed .cmp-hero__overlay__inner,
        .banner-ai .cmp-hero__overlay__inner {
            max-width: 100% !important;
            font-size: clamp(14px, 3.6vw, 16px);
        }

            .banner-boxed .cmp-hero__overlay__inner *,
            .banner-ai .cmp-hero__overlay__inner * {
                font-size: inherit !important;
                line-height: 1.25;
            }

            .banner-boxed .cmp-hero__overlay__inner :is(h1,h2,h3),
            .banner-ai .cmp-hero__overlay__inner :is(h1,h2,h3) {
                font-size: clamp(1.6rem, 8.5vw, 2.4rem) !important;
                line-height: 1.1;
                margin: 0 0 .35rem !important;
            }

                .banner-boxed .cmp-hero__overlay__inner :is(h1,h2,h3) br,
                .banner-ai .cmp-hero__overlay__inner :is(h1,h2,h3) br {
                    display: none;
                }

            .banner-boxed .cmp-hero__overlay__inner a.btn-editor-cta,
            .banner-ai .cmp-hero__overlay__inner a.btn-editor-cta,
            .banner-boxed .cmp-hero__overlay__inner a.btn,
            .banner-ai .cmp-hero__overlay__inner a.btn,
            .banner-boxed .cmp-hero__overlay__inner button.btn,
            .banner-ai .cmp-hero__overlay__inner button.btn {
                font-size: clamp(.9rem, 4vw, 1rem) !important;
                padding: .45rem .8rem !important;
                white-space: normal !important;
                overflow-wrap: anywhere;
                max-width: 100%;
            }
}


/* =========================================================
   NAVBAR (MÓVIL + TABLET): overlay + drill-down VC
   ========================================================= */
@media (max-width: 991.98px) {

    /* Bloquea scroll del body cuando el menú está abierto (lo activa el JS) */
    body.nav-open {
        overflow: hidden !important;
    }

    /* Mantén el header por encima del overlay */
    header.nav-holder.make-sticky {
        position: sticky;
        top: 0;
        z-index: 2600;
    }

    /* El botón toggler (hamburguesa / X) por encima */
    #navbar .navbar-toggler {
        position: relative;
        z-index: 2700;
    }

    /* Panel overlay del menú (debajo del navbar) */
    #navigation.navbar-collapse,
    #navigation.navbar-collapse.show,
    #navigation.navbar-collapse.collapsing {
        position: fixed !important;
        top: var(--navbar-h, 64px) !important;
        left: 0 !important;
        right: 0 !important;
        /* 🔑 IMPORTANTE: altura explícita para que 100% y el subpanel funcionen */
        height: calc(100dvh - var(--navbar-h, 64px)) !important;
        width: 100% !important;
        background: #fff;
        z-index: 2500;
        padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
    }

    /* Wrapper: forzamos bloque y ancho completo (evita layout "a la derecha") */
    #navigation .cmp-menu-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important; /* pisa flex/rows del VC */
    }

        /* Root UL (nivel 1): columna, centrado */
        #navigation .cmp-menu-wrapper > ul {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            #navigation .cmp-menu-wrapper > ul > li {
                width: 100% !important;
                text-align: center !important;
            }

                /* Opcional: un poco de ritmo vertical */
                #navigation .cmp-menu-wrapper > ul > li > a {
                    display: inline-block;
                    padding: .75rem 0;
                }

        /* ====== DRILL-DOWN ======
     Cuando existe subpanel, ocultamos el nivel 1 (sin tocar Vue)
     (JS añade/quita .is-subopen en .cmp-menu-wrapper)
  */
        #navigation .cmp-menu-wrapper.is-subopen > ul {
            display: none !important;
        }

    /* Subpanel (nivel 2+): ocupa TODO el panel */
    #navigation .vc-subpanel {
        position: absolute !important;
        inset: 0 !important; /* top/right/bottom/left: 0 */
        width: 100% !important;
        background: #fff;
        z-index: 5;
        padding: 0 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Botón “Volver”: sticky arriba */
    #navigation .vc-subpanel-back {
        position: sticky;
        top: 0;
        z-index: 6;
        background: #fff;
        border: 0;
        width: 100%;
        text-align: left;
        padding: 1rem 0 .75rem;
    }

    #navigation .vc-subpanel-title {
        text-align: center;
        margin: .25rem 0 1rem;
    }

    #navigation .vc-subpanel .nav-link {
        display: block;
        text-align: center;
        padding: .65rem 0;
    }

    /* =========================================================
     Tablet: baja un poco la tipografía para que no “reviente”
     ========================================================= */
    @media (min-width: 768px) and (max-width: 991.98px) {
        #navigation .cmp-menu-wrapper > ul > li > a,
        #navigation .vc-subpanel .nav-link {
            font-size: clamp(14px, 1.9vw, 16px);
        }
    }
}



/* Tablas scrolleables en móvil */
@media (max-width: 768px) {
    .editor-html .table-scroll {
        overflow-x: auto;
        overflow-y: hidden; /* <- clave: sin scroll vertical */
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

        .editor-html .table-scroll > table {
            width: max-content; /* la tabla mide lo que necesite */
            min-width: 100%; /* pero no más pequeña que el contenedor */
        }

/*OPCIÓN 1*/
    .editor-html a.btn-editor-cta,
    .editor-html a.btn.btn-editor-cta {
        /* pisa el nowrap de Bootstrap */
        white-space: normal !important;
        /* permite partir y evita desbordes */
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        /* centra y se comporta bien si hay salto de línea */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
        /* opcional: baja el tamaño heredado (18pt) en móvil */
        font-size: clamp(14px, 4.2vw, 18px) !important;
        line-height: 1.2;
    }


    /*OPCIÓN 2*/
    /*.editor-html a.btn-editor-cta,
    .editor-html a.btn.btn-editor-cta {
        white-space: normal !important;
        width: 100%;
        max-width: 100%;
        display: block;
        text-align: center;
        overflow-wrap: anywhere;
        word-break: break-word;
        box-sizing: border-box;
    }*/

    /*OPCIÓN 3*/
    /* 🚫 EXCEPCIÓN: si el botón está dentro de .table-scroll, no tocarlo */
    /* 🚫 EXCEPCIÓN: SOLO para TABLAS DE DATOS (no layout) */
    .editor-html .table-scroll:not(.table-scroll--layout) a.btn-editor-cta,
    .editor-html .table-scroll:not(.table-scroll--layout) a.btn.btn-editor-cta {
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        display: inline-block !important;
        max-width: none !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }
}

/* Imágenes del HTML del editor: responsive en tablet+móvil,
   PERO sin afectar a las que están dentro de .table-scroll */
@media (max-width: 991.98px) {

    /* 1) Regla general: imágenes del editor se adaptan al contenedor */
    .editor-html img {
        max-width: 100% !important;
        height: auto !important;
    }

        /* 2) Si TinyMCE mete floats inline (como tu style="float:left;"), los anulamos */
        .editor-html img[style*="float"] {
            float: none !important;
            display: block !important;
            margin: .75rem auto !important; /* centrada y con aire */
        }

    /* 3) EXCEPCIÓN: dentro de .table-scroll NO tocar imágenes */
    .editor-html .table-scroll img {
        max-width: none !important; /* deja que la tabla mida lo suyo y haga scroll */
        height: auto !important;
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
    }
}

/* HOME - Hero vídeo (Portada): evitar recorte en móvil */
@media (max-width: 767.98px) {

    /* que el contenedor pueda crecer */
    [data-origen="Portada"] .contact-theme,
    [data-origen="Portada"] .cmp-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

        /* el vídeo NO debe flotar ni ir absoluto en móvil */
        [data-origen="Portada"] .cmp-hero > video.cmp-hero__bg,
        [data-origen="Portada"] video.cmp-hero__bg {
            float: none !important;
            position: relative !important;
            inset: auto !important;
            display: block !important;
            width: 100% !important;
            height: auto !important;
            max-height: none !important;
            object-fit: contain !important; /* 👈 para que NO recorte */
        }
}

@media (max-width: 767.98px) {
    /* Botones: ancho según contenido + wrap SOLO en espacios */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner a.btn-editor-cta,
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner a.btn.btn-editor-cta {
        display: inline-flex !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: normal !important; /* no partir palabras */
        word-break: normal !important; /* no partir palabras */
        hyphens: none !important;
        justify-content: center;
        align-items: center;
    }

        /* Pisa el <span style="font-size:16pt"> del TinyMCE */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner a.btn-editor-cta span {
            font-size: inherit !important;
        }

    /* Centrar botones dentro de las celdas */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner table td {
        text-align: center !important;
    }

       

    /* Opcional: que CONTACTAR no se haga enorme nunca */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner td[colspan] a.btn-editor-cta {
        max-width: 18rem;
    }

    #heading-breadcrumbs {
        padding: 0.5rem 0;
    }
}


@media (max-width: 768px) {

    /* Layout tables (TinyMCE maquetación): NO scroll horizontal, apilar columnas */
    .editor-html .table-scroll.table-scroll--layout {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    .editor-html table.mce-layout-table {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        table-layout: fixed;
        border-collapse: separate !important;
    }

        /* Colgroup suele forzar anchos %: lo neutralizamos */
        .editor-html table.mce-layout-table colgroup {
            display: none !important;
        }

        /* “Romper” la tabla: cada fila/celda como bloque */
        .editor-html table.mce-layout-table tbody,
        .editor-html table.mce-layout-table tr,
        .editor-html table.mce-layout-table td {
            display: block !important;
            width: 100% !important;
            height: auto !important;
        }

        /* Quitar padding raro y separar bloques */
        .editor-html table.mce-layout-table td {
            padding: 0 !important;
        }

            .editor-html table.mce-layout-table td + td {
                margin-top: .75rem;
            }

            /* Oculta celdas “vacías” (las de &nbsp; usadas como márgenes) */
            .editor-html table.mce-layout-table td.td-empty {
                display: none !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Si una celda tenía background (ej. el bloque gris), dale forma de “card” */
            .editor-html table.mce-layout-table td[style*="background-color"] {
                padding: .75rem 1rem !important;
                border-radius: .5rem;
                box-sizing: border-box;
            }

    /* (Opcional) Si el contenido viene con font-sizes enormes (pt), caparlos */
    /* Actívalo solo si lo necesitas */
    
  .editor-html table.mce-layout-table {
    font-size: clamp(14px, 4vw, 16px);
  }
  .editor-html table.mce-layout-table * {
    font-size: inherit !important;
    line-height: 1.35;
  }
  
}

@media (max-width: 991.98px) {

    /* ✅ la excepción de "no tocar imágenes" solo para TABLAS DE DATOS */
    .editor-html .table-scroll:not(.table-scroll--layout) img {
        max-width: none !important;
        height: auto !important;
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
    }

    /* ✅ en TABLAS DE MAQUETACIÓN (apiladas), las imágenes SÍ deben ser responsive */
    .editor-html .table-scroll.table-scroll--layout img {
        width: auto !important; /* 🔑 evita que el 50x50 se haga gigante */
        max-width: 100% !important; /* 🔑 si es grande, se reduce y cabe */
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* (Opcional) idem para iframes/vídeos si aparecen en tablas de maquetación */
    .editor-html .table-scroll.table-scroll--layout :is(iframe, video) {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* =========================================================
   BANNERS (MÓVIL): capar font-sizes inline del editor (pt enormes)
   sin tocar layout de tablas/botones
   ========================================================= */
@media (max-width: 767.98px) {

    /* Tamaño base para TODO el contenido del overlay */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner {
        font-size: clamp(14px, 3.6vw, 16px) !important;
        line-height: 1.25 !important;
    }

        /* Pisa SOLO lo que venga “forzado” inline desde el editor */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner [style*="font-size"] {
            font-size: inherit !important;
        }

        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner [style*="line-height"] {
            line-height: inherit !important;
        }
}

/* BANNERS (móvil): centrar CTAs aunque el editor meta colgroups/columnas vacías */
@media (max-width: 767.98px) {

    :is(.banner-ai, .banner-fullscreen, .banner-boxed)
    .cmp-hero__overlay__inner table[border="0"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        table-layout: fixed !important;
    }

        /* colgroup suele “forzar” columnas (85% + 8% + 6%) */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed)
        .cmp-hero__overlay__inner table[border="0"] colgroup {
            display: none !important;
        }

        /* cada fila/celda a 100% → el centrado ya es respecto al contenedor */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed)
        .cmp-hero__overlay__inner table[border="0"] tbody,
        :is(.banner-ai, .banner-fullscreen, .banner-boxed)
        .cmp-hero__overlay__inner table[border="0"] tr,
        :is(.banner-ai, .banner-fullscreen, .banner-boxed)
        .cmp-hero__overlay__inner table[border="0"] td {
            display: block !important;
            width: 100% !important;
            padding: 0 !important;
            text-align: center !important;
        }

            /* separación entre “celdas” apiladas (si hay varias) */
            :is(.banner-ai, .banner-fullscreen, .banner-boxed)
            .cmp-hero__overlay__inner table[border="0"] td + td {
                margin-top: .5rem;
            }
}


@media (max-width: 767.98px) {
    :is(.banner-ai, .banner-fullscreen, .banner-boxed)
    .cmp-hero__overlay__inner table[border="0"] {
        height: auto !important;
    }

        :is(.banner-ai, .banner-fullscreen, .banner-boxed)
        .cmp-hero__overlay__inner table[border="0"] tr,
        :is(.banner-ai, .banner-fullscreen, .banner-boxed)
        .cmp-hero__overlay__inner table[border="0"] td {
            height: auto !important; /* 🔑 pisa el height inline del editor */
            min-height: 0 !important;
        }

    /* separación visual entre botones */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed)
    .cmp-hero__overlay__inner a.btn-editor-cta {
        margin: .35rem auto !important;
    }

    /* por si el <p> del editor mete márgenes raros */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed)
    .cmp-hero__overlay__inner td p {
        margin: 0 !important;
    }
}

@media (max-width: 767.98px) {

    /* Tablas del overlay (CTAs) → que no “empujen” botones a derecha/izquierda */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner table {
        width: auto !important; /* pisa width:100% inline del editor */
        display: inline-table !important; /* para que pueda centrarse como grupo */
        margin: 0 auto !important;
        height: auto !important; /* pisa height inline */
    }

        /* Ignora anchos fijos del editor */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner table colgroup {
            display: none !important;
        }

        /* Pisa text-align inline (right/left) dentro de la tabla */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner table td,
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner table td p {
            text-align: center !important;
            margin: 0 !important;
        }

        /* Por si el editor mete alturas fijas en filas/celdas */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner table tr,
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner table td {
            height: auto !important;
        }
}


@media (max-width: 767.98px) {

    /* Base tipográfica del overlay en móvil */
    :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner {
        font-size: clamp(14px, 3.6vw, 16px);
        line-height: 1.25;
    }

        /* 🔑 Clave: pisa SOLO los font-size inline que mete el editor (pt/px) */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed)
        .cmp-hero__overlay__inner [style*="font-size"] {
            font-size: inherit !important;
        }

        /* Mantén el h2 como “titular” (si lo quieres más pequeño, baja el clamp) */
        :is(.banner-ai, .banner-fullscreen, .banner-boxed) .cmp-hero__overlay__inner h2 {
            font-size: clamp(18px, 5.8vw, 28px) !important;
            line-height: 1.12 !important;
            margin: .25rem 0 0 !important;
        }

            :is(.banner-ai, .banner-fullscreen, .banner-boxed)
            .cmp-hero__overlay__inner h2 br {
                display: block !important;
            }
}