/****************************************************
 * HEADER
 ****************************************************/
 /** Breakpoint 1024px */

 .header-general {
    display: grid;
    grid-template-columns: 1fr min(var(--wp--custom--layout--content-size), 90%) 1fr;
    padding-bottom: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 12px;
    background-color: transparent;
    border: none;
    z-index: 10;
}

.inner-header-general {
    display: flex;
    align-items: center;
    border-radius: 24px;
    border: 1px solid var(--wp--preset--color--neutral-50);
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(10px);
    justify-content: center;
    margin: 0 auto;
    padding: 0 24px;
    height: 80px;
    grid-column: 2;
}
.header-general .logo-header {
    margin-right: 48px;
    z-index: 100;
    width: clamp(7.938rem, 6.277rem + 4.911vw, 10.438rem);
}
.header-general .logo-header img {
    display: block;
    width: auto;
    height: 32px;
    max-width: 100%;
    aspect-ratio: auto;   /* override base.css 16:9 rule for imgs without width/height attrs */
    object-fit: contain;
}

.menu ul.nav {
    display: flex;
    list-style: none;
    padding-inline-start: 0;
    align-items: center;
    gap: 28px;
}

.header-general .menu-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.header-general .menu-second,
.header-general .menu-ctas {
    margin-left: 5px;
    margin-right: 5px;
}

.header-general .menu a {
    text-decoration: none;
}

.header-general .menu-item a {
    font-size: var(--wp--preset--font-size--body);
    line-height: 1.2;
    font-weight: var(--wp--preset--font-weight-500);
    color: var(--wp--preset--color--neutral-800);
    display: block;
}


.header-general .cabecera-cta{
    height: 40px;
}
.header-general .menu .menu-item a:hover, .header-general .menu .current-menu-item a{
    color: var(--wp--preset--color--primary-100) !important;
}

/*Menú*/


.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    width: 27px;
    height: 14px;
    position: relative;
    padding: 0;
    margin: 0;
    align-self: self-start;
}
.menu-toggle .hamburger,
.menu-toggle.open .hamburger::before,
.menu-toggle.open .hamburger::after {
    position: absolute;
    width: 100%;
    height: 20px;
    background: var(--wp--preset--color--neutral-900);
    transition: all 0.3s ease;
    align-self: self-start;
}
.menu-toggle .hamburger {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--wp--preset--color--neutral-900);
    transition: all 0.3s ease;
    border-radius: 10px;
}
.menu-toggle .hamburger:nth-child(1) {
    top: 0;
}
.menu-toggle .hamburger:nth-child(2) {
    top: 6px;
}
.menu-toggle .hamburger:nth-child(3) {
    top: 12px;
}

.menu-toggle.open .hamburger:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}
.menu-toggle.open .hamburger:nth-child(2) {
    opacity: 0;
}
.menu-toggle.open .hamburger:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
}

.main-menu {
    display: none;
}
.main-menu.open {
    display: block;
}
.arrow-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
    display: inline-block;
}

@media only screen and (max-width: 1200px) {
    .header-general {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding: 0 !important;
        scrollbar-width: none;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    .header-general > div:first-child,
    .header-general > div:last-child {
        display: none;
    }
    .header-general .logo-header {
        margin-right: 0 !important;
    }
    .header-general .menu-main nav{
        display: none;
    }

    .menu-main.open nav {
        display: block;
    }

    .menu-toggle {
        display: inline-block;
        margin-left: 12px !important;
    }

    .inner-header-general {
        width: 100% !important;
        max-width: 100% !important;
        height: 78px;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid var(--color-border, #E2DED4);
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        grid-column: auto;
        box-sizing: border-box;
        margin: 0;
    }

    .header-general .menu-main.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--wp--preset--color--secondary-30);
        z-index: 99;
        min-height: unset;
        max-height: unset;
        padding-left: 16px;
        padding-right: 16px;
        overflow-y: auto;
        box-sizing: border-box !important;
    }

    .inner-header-general:has(.menu-main.open) {
        backdrop-filter: none;
    }
    .menu-main.open nav{
        width: 100%;
    }
    .arrow-icon {
        filter: brightness(0) invert(1);
    }
    .menu-main.open  ul.nav {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 68px;
        gap: 32px;
    }
    .menu-toggle {
        align-self: auto;
    }

    .header-general .menu-main {
        display: none;
        justify-content: flex-end;
    }



    .menu-main nav {
        flex-grow: 1;
    }

    .menu-main ul.nav {
        list-style: none;
        padding: 0;
        margin-top: 48px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .menu-main nav > ul > li {
        padding-bottom: 8px;
        border-bottom: 1px solid var(--wp--preset--color--neutral-400);
        text-align: center;
        width: 100%;
    }

    .menu-main nav > ul > li > a {
        font-size: 22px !important;
        line-height: var(--wp--preset--line-height-h5) !important;
        text-decoration: none;
    }

    .menu-main nav > ul > li > a.active,
    .menu-main nav > ul > li.current-menu-item > a {
        font-weight: 600;
    }

    .menu-main .contenedor-cta {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: auto;
        padding-top: 24px;
        padding-bottom: 120px !important;
        left: 0;
        right: 0;
    }

    .menu-main .cabecera-cta {
        width: 100%;
        display: flex;
        justify-content: right;
        padding-right: 71px;
    }
    .menu-main.open .cabecera-cta {
        padding-right: 0;
    }

    .menu-toggle {
        z-index: 100;
        margin-left: 24px;
    }

    header .open .contenedor-cta a {
        width: 100%;
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 12px 24px !important;
    }

    header .open .contenedor-cta a.header-btn-desktop-only {
        display: none !important;
    }

    /* Target specific mobile button overrides to override buttons.css loaded later */
    .header-general .contenedor-cta a.header-btn-hamburger-mobile-only,
    .header-general:not(.scrolled) .contenedor-cta a.header-btn-hamburger-mobile-only {
        background-color: var(--wp--preset--color--primary-100) !important;
        color: #ffffff !important;
        border: 1px solid var(--wp--preset--color--primary-100) !important;
    }
    .header-general .contenedor-cta a.header-btn-hamburger-mobile-only:hover,
    .header-general:not(.scrolled) .contenedor-cta a.header-btn-hamburger-mobile-only:hover {
        background-color: var(--wp--preset--color--primary-150) !important;
        border-color: var(--wp--preset--color--primary-150) !important;
        color: #ffffff !important;
    }

    .header-general .contenedor-cta a.header-btn-whatsapp-mobile-only,
    .header-general:not(.scrolled) .contenedor-cta a.header-btn-whatsapp-mobile-only {
        background-color: #ffffff !important;
        border: 1px solid #25D366 !important;
        color: var(--wp--preset--color--neutral-800) !important;
    }
    .header-general .contenedor-cta a.header-btn-whatsapp-mobile-only svg,
    .header-general:not(.scrolled) .contenedor-cta a.header-btn-whatsapp-mobile-only svg {
        color: #25D366 !important;
        fill: #25D366 !important;
    }
    .header-general .contenedor-cta a.header-btn-whatsapp-mobile-only:hover,
    .header-general:not(.scrolled) .contenedor-cta a.header-btn-whatsapp-mobile-only:hover {
        background-color: #f4fcf6 !important;
        border-color: #128C7E !important;
        color: var(--wp--preset--color--neutral-900) !important;
    }
    .header-general .contenedor-cta a.header-btn-whatsapp-mobile-only:hover svg,
    .header-general:not(.scrolled) .contenedor-cta a.header-btn-whatsapp-mobile-only:hover svg {
        color: #128C7E !important;
        fill: #128C7E !important;
    }

    .header-general .contenedor-cta a.header-btn-hamburger-mobile-only::after,
    .header-general .contenedor-cta a.header-btn-whatsapp-mobile-only::after {
        content: none !important;
    }
}

@media only screen and (max-width: 1350px) and (min-width: 1201px) {
    .menu ul.nav {
        gap: 16px;
    }
    .header-general .menu-main {
        gap: 12px;
    }
    .header-general .logo-header {
        margin-right: 24px;
    }
    .header-general .btn-phone {
        display: none !important;
    }
}

@media only screen and (max-width: 480px) {
    .inner-header-general {
        padding: 0 12px !important;
        height: 64px !important;
    }
    .header-general .logo-header {
        width: 100px !important;
        max-width: 100px !important;
        margin-right: 0 !important;
    }
    .header-btn-mobile-only {
        padding: 8px 14px !important;
        font-size: 13px !important;
        margin-left: auto !important;
    }
    .menu-toggle {
        margin-left: 8px !important;
    }
}
/* =============================================================
   PÁGINAS INTERIORES — header sticky global
   La clase .page-interior la añade functions.php a todas las
   páginas que NO son portada-2 ni landing pages limpias.
   ============================================================= */

/* Desktop (≥1201px): ocultar el header flotante transparente,
   usar el portada2-sticky-menu como nav permanente sticky */
@media (min-width: 1201px) {
    .page-interior #site-header {
        display: none !important;
    }
    /* fixed en lugar de sticky: html,body tienen overflow-x:hidden
       (base.css, prevención de scroll horizontal) lo que rompe
       position:sticky de forma silenciosa — mismo motivo por el que
       el #site-header móvil de abajo ya usa fixed en vez de sticky.
       Sólo se aplica en :not(.is-sticky) — una vez el JS añade
       .is-sticky, el "Floating Pill Mode" (style.css) ya define su
       propio position/left/transform; si este bloque siguiera
       aplicando también ahí, sus "left:0;width:100%" (misma
       especificidad + !important) competirían propiedad a propiedad
       con "left:50%;transform:translateX(-50%)" del pill, dejando el
       menú descolocado (mitad fuera de la pantalla). */
    .page-interior .portada2-sticky-menu:not(.is-sticky) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }
    /* El menu ya no reserva espacio en el flujo normal al ser fixed */
    .page-interior.single-post main,
    .page-interior.page main,
    .page-interior .site-main,
    .page-interior .author-page {
        padding-top: 76px !important;
    }
    /* Cuando el WP admin bar está activo (usuario logueado) */
    .admin-bar.page-interior .portada2-sticky-menu:not(.is-sticky) {
        top: 32px !important;
    }
    .admin-bar.page-interior.single-post main,
    .admin-bar.page-interior.page main,
    .admin-bar.page-interior .site-main,
    .admin-bar.page-interior .author-page {
        padding-top: calc(76px + 32px) !important;
    }
}

/* Mobile (≤1200px): el sticky-menu no tiene hamburger — mostrar
   el site-header nativo con fondo sólido y hamburger funcional */
@media (max-width: 1200px) {
    .page-interior .portada2-sticky-menu {
        display: none !important;
    }
    /* fixed en lugar de sticky para evitar que un padre con overflow rompa el comportamiento */
    .page-interior #site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: var(--color-bg, #ffffff) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: 1px solid var(--color-border, #E2DED4) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        margin-top: 0 !important;
    }
    .admin-bar.page-interior #site-header {
        top: 46px !important;
    }
    /* Compensar el espacio que ocupa el header fijo */
    .page-interior.single-post main,
    .page-interior.page main,
    .page-interior .site-main,
    .page-interior .author-page {
        padding-top: 78px !important;
    }
    .admin-bar.page-interior.single-post main,
    .admin-bar.page-interior.page main,
    .admin-bar.page-interior .site-main,
    .admin-bar.page-interior .author-page {
        padding-top: calc(78px + 46px) !important;
    }
    .page-interior #site-header .inner-header-general {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }
}

/****************************************************
 * TOPBAR CTA EN TABLET
 * Botones globales "Te llamamos" + "Comenzar" a la izquierda de la hamburguesa.
 * En desktop los CTAs ya salen en el header; en móvil (≤600) no hay sitio, se
 * quedan dentro del drawer. Solo se muestran en el rango tablet (601–1200px),
 * donde antes el topbar tenía únicamente la hamburguesa.
 ****************************************************/
.header-topbar-cta { display: none; }

@media only screen and (min-width: 601px) and (max-width: 1200px) {
    .header-topbar-cta {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto;   /* empuja el grupo a la derecha, pegado a la hamburguesa */
    }
    /* Portada y landings: sobre el hero la cabecera va limpia (solo logo +
       hamburguesa); el topbar-CTA (.header-topbar-cta--scroll) aparece al hacer
       scroll, cuando el JS añade .is-scrolled-cta al #site-header. En páginas
       normales el topbar-CTA no lleva --scroll y se muestra siempre. */
    #site-header:not(.is-scrolled-cta) .header-topbar-cta--scroll {
        display: none !important;
    }
    .header-topbar-cta .btn {
        white-space: nowrap;
        font-size: 15px;
        padding: 10px 18px;
        line-height: 1;
    }
    /* separa un poco la hamburguesa de los botones */
    .header-topbar-cta + .menu-toggle { margin-left: 18px !important; }
}

/* ==========================================================================
   Drawer del menú: scroll y su indicador
   El menú es un acordeón (ver header.php): al desplegar un bloque la lista
   crece y hay que poder recorrerla. Antes crecía por debajo del borde sin
   forma de llegar al final.
   ========================================================================== */

@media only screen and (max-width: 1200px) {

    .header-general .menu-main.open {
        /* El menú cerrado hereda justify-content:flex-end (alineación del
           topbar). Abierto NO puede: en una columna flex con flex-end el
           contenido que desborda se sale por ARRIBA, y ese tramo no es
           alcanzable con scroll (scrollTop se queda clavado en 0). Con
           flex-start desborda por abajo, que sí scrollea. */
        justify-content: flex-start !important;
        /* Altura real del viewport en móvil: 100vh incluye la barra de
           direcciones de Safari, así que el último ítem quedaba debajo de
           ella. dvh se ajusta cuando la barra aparece o desaparece. */
        /* 100vh primero como respaldo: dvh existe desde iOS 15.4, y sin el
           respaldo un iPhone más antiguo se quedaría sin límite de altura y
           el drawer volvería a crecer fuera de pantalla. */
        height: 100vh;
        max-height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: auto;
        /* El rebote del drawer no debe arrastrar la página de detrás. */
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        /* Sitio para la barra propia y para no quedar pegado al borde inferior. */
        padding-bottom: 40px;
        scrollbar-width: thin;
        scrollbar-color: rgba(51, 77, 207, 0.45) transparent;
    }

    /* Barra nativa donde el navegador sí deja estilarla (Chrome, Edge,
       Safari de escritorio). iOS la ignora: para eso está la de abajo. */
    .header-general .menu-main.open::-webkit-scrollbar {
        width: 6px;
    }
    .header-general .menu-main.open::-webkit-scrollbar-track {
        background: transparent;
    }
    .header-general .menu-main.open::-webkit-scrollbar-thumb {
        background: rgba(51, 77, 207, 0.45);
        border-radius: 999px;
    }
    .header-general .menu-main.open::-webkit-scrollbar-thumb:hover {
        background: rgba(51, 77, 207, 0.7);
    }

    /* Indicador propio, el que se ve en iOS. Lo dibuja y posiciona el JS de
       header.php a partir de scrollTop/scrollHeight. */
    .menu-scroll-pista {
        position: fixed;
        top: 84px;
        right: 6px;
        bottom: 16px;
        width: 4px;
        border-radius: 999px;
        background: rgba(42, 40, 34, 0.08);
        opacity: 0;
        transition: opacity .2s ease;
        pointer-events: none;   /* nunca debe robar un toque a un enlace */
        z-index: 100;
    }
    .menu-scroll-pista.is-visible {
        opacity: 1;
    }
    .menu-scroll-pulgar {
        width: 100%;
        border-radius: 999px;
        background: #334DCF;
        transition: transform .08s linear;
    }

    /* Con el drawer abierto, la página de detrás no se mueve. */
    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }
    /* …pero el drawer sí, y sus enlaces siguen siendo pulsables. */
    body.menu-open .header-general .menu-main.open {
        touch-action: pan-y;
    }

    /* Área de toque cómoda en los enlaces del menú (iOS descarta los toques
       en objetivos pequeños con más facilidad que Android). */
    .portada2-mobile-menu-list .mobile-menu-item > a,
    .portada2-mobile-menu-list .mobile-menu-item .mobile-menu-trigger,
    .portada2-mobile-menu-list .mobile-submenu li a {
        min-height: 44px;
        display: flex !important;
        align-items: center !important;
        position: relative;
        z-index: 1;
    }
}

/* ==========================================================================
   Menú abierto por encima del banner de cookies
   CookieYes se pinta en z-index 9999999 y en móvil ocupa media pantalla, así
   que se comía los enlaces de la mitad inferior del menú: se veían, pero el
   toque se lo quedaba el banner. El drawer vive dentro de #site-header, que
   al ser fixed crea su propio contexto de apilado, así que hay que subir el
   header — subir solo el drawer no serviría.
   Solo mientras el menú está abierto: al cerrarlo el banner vuelve a estar
   accesible y por delante, como debe.
   ========================================================================== */
/* Se baja el banner en vez de subir el header: la regla del header lleva
   siete :not() encadenados (style.css) y gana en especificidad a cualquier
   cosa razonable, y además cambia según la plantilla. El banner, en cambio,
   tiene siempre las mismas clases. Su z-index viene de una hoja de CookieYes,
   no de un style en línea, así que un !important lo sobrescribe.
   No se oculta: se baja de capa. Al cerrar el menú vuelve a estar delante. */
body.menu-open .cky-consent-container,
body.menu-open .cky-modal,
body.menu-open .cky-overlay,
body.menu-open .cky-btn-revisit-wrapper {
    z-index: 1 !important;
}

/* ==========================================================================
   Barra superior del menú abierto + proporción del logo
   ========================================================================== */

@media only screen and (max-width: 1200px) {

    /* ── Logo: proporción correcta ────────────────────────────────────────
       El SVG es 167x20 (ratio 8.35). El contenedor le imponía un ancho fijo
       (100 px en móvil) mientras la imagen mantenía height:32px, así que la
       caja quedaba en 100x32 → ratio 3.13. Se deja que mande la ALTURA y que
       el ancho salga solo; así nunca se deforma, mida lo que mida la barra. */
    /* Con #site-header: style.css fija el ancho y el z-index del logo con un
       selector de ID (#site-header .logo-header), y un id gana a cualquier
       número de clases por muchos !important que se pongan. */
    #site-header .logo-header {
        width: auto !important;
        max-width: none !important;
    }
    #site-header .logo-header img {
        height: 24px !important;
        width: auto !important;
        max-width: none !important;
        aspect-ratio: 167 / 20;
    }

    /* ── Banda blanca de la barra superior ────────────────────────────────
       El drawer es HIJO de .inner-header-general y va en z-index 999, así que
       sus enlaces pasaban por encima del logo al hacer scroll. El fondo de un
       padre siempre se pinta por debajo de sus hijos, de modo que no basta con
       darle background a la barra: hace falta una capa propia por encima del
       drawer. Es lo que hace este ::after.
       Solo con el menú abierto: con el menú cerrado la cabecera ya tiene su
       propio tratamiento por plantilla. */
    body.menu-open .inner-header-general::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* La altura la mide el JS y la publica en --senda-topbar-alto: la
           barra cambia de alto por plantilla y por breakpoint (78 aquí, 64 en
           otras) y varias reglas la fijan con selectores de ID, así que
           cualquier valor escrito a mano acaba desajustado y deja una franja
           por la que se ve el menú pasar. El 78 es solo el respaldo. */
        height: var(--senda-topbar-alto, 78px);
        /* Colores del sistema, no hexadecimales sueltos: así la cabecera del
           menú abierto cambia con la paleta y no se queda desparejada. */
        background: var(--color-bg, #FFFFFF);
        /* SIN línea inferior: quedaba pegada a los descendientes del logo y se
           leía como un subrayado torcido. La banda ya se separa del menú por
           el propio fondo. */
        z-index: 1000;                      /* por encima del drawer (999) */
        pointer-events: none;               /* no debe robar el toque a nada */
    }

    /* El logo, por encima de la banda. La hamburguesa ya va en 10002. */
    body.menu-open #site-header .logo-header {
        position: relative !important;
        z-index: 1001 !important;   /* por encima de la banda (1000) */
    }

    /* Que el primer ítem del menú no arranque pegado bajo la banda. */
    body.menu-open .header-general .menu-main.open {
        padding-top: 94px;
    }
}

@media only screen and (max-width: 480px) {
    #site-header .logo-header img {
        height: 22px !important;
    }
    body.menu-open .header-general .menu-main.open {
        padding-top: 80px;
    }
}


/* ── Accesos a las landings de género, en el menú móvil ────────────────────
   Filas con foto, etiqueta y flecha, en vez de dos enlaces de texto azul
   perdidos al final de un submenú. Es el atajo más usado del menú y ahora se
   ve como lo que es: una elección, no una nota al pie. */
.mobile-genero-wrap { list-style: none; }

.mobile-genero {
    list-style: none;
    /* Va ARRIBA del menú, así que la línea separadora es la de abajo. */
    margin: 0 0 6px;
    padding: 0;
    border-bottom: 1px solid var(--color-border, #E2DED4);
}

.mobile-genero li + li { border-top: 1px solid var(--color-border, #E2DED4); }

.mobile-genero a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    min-height: 64px;              /* objetivo táctil holgado */
    text-decoration: none;
    color: var(--color-text, #2A2822);
    font-weight: 600;
    font-size: 16px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-genero img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--color-bg-warm, #F4F3F0);
}

.mobile-genero .mobile-genero-texto { flex: 1 1 auto; }

.mobile-genero .mobile-genero-flecha {
    flex: 0 0 auto;
    color: var(--color-text-muted, #635E54);
}

.mobile-genero a:active { background: var(--color-bg-warm, #F4F3F0); }