/* ============================================================
   CAPA BASE RESPONSIVE — CIIVO child theme
   ============================================================ */

/* Guardia global: ningún media desborda su contenedor */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* A diferencia de img/video, un <iframe> NO calcula solo su relación de
   aspecto a partir de los atributos width/height del HTML: con height:auto
   (arriba) el navegador lo colapsa a su alto por defecto (150px), sin
   importar el ancho. Gráfico embebido de Google Sheets en las 31 páginas de
   país (mismo iframe, 828x513 en las 31): se fija su proporción real para
   que escale completo en cualquier ancho de pantalla. */
iframe[src*="docs.google.com/spreadsheets"] {
    aspect-ratio: 828 / 513;
}

/* Previene scroll horizontal accidental */
html, body {
    overflow-x: hidden;
}

/* Tipografía fluida base */
:root {
    --fs-h1: clamp(1.75rem, 5vw, 3rem);
    --fs-h2: clamp(1.4rem, 3.5vw, 2.25rem);
    --fs-h3: clamp(1.1rem, 2.5vw, 1.5rem);
    --fs-body: clamp(0.9375rem, 1.5vw, 1.0625rem);
}

/* Aplica escala fluida a titulares del contenido (sin sobreescribir el tema padre donde no aplica) */
.entry-content h1,
.wp-block-heading.is-style-default h1 { font-size: var(--fs-h1); }

.entry-content h2,
.wp-block-heading h2 { font-size: var(--fs-h2); }

.entry-content h3,
.wp-block-heading h3 { font-size: var(--fs-h3); }

/* ============================================================ */

/* === Tokens de header === */
:root {
    --header-h:      76px;
    --header-red:    #3d1010;
    --header-red-dk: #2a0a0a;
    --nav-red:       #5c1a1c;
    --nav-red-dk:    #3d1010;
    --nav-red-hover: rgba(0,0,0,.22);
}
/* Astra trae un "Header Bottom Border" de 5px en negro sólido (#000000, ajuste
   del Customizer, no viene de este archivo) — se ve como una franja negra
   pegada bajo el header en todas las páginas. Se recolorea al rojo de marca
   en vez de quitarlo, para no alterar la altura real del header (80px). */
.ast-primary-header-bar {
    border-bottom-color: var(--header-red) !important;
}
/* El header móvil (#ast-mobile-header) mide 80px reales de alto en pantalla
   (75px de barra roja + 5px de borde inferior, ver override de
   .ast-primary-header-bar más abajo). Los 72px/64px de antes se quedaban
   cortos y dejaban parte del contenido de body.home tapado/asomando detrás
   del header fijo. */
@media (max-width: 1024px) { :root { --header-h: 72px; } }
@media (max-width: 768px)  { :root { --header-h: 72px; } }

/* === Logo — hueso directo sobre la barra, sin caja === */
.main-header-bar .site-branding,
.main-header-bar .ast-site-identity {
    background: transparent !important;
    padding: 4px 0 !important;
    border-radius: 0 !important;
}

.main-header-bar .custom-logo-link img,
.main-header-bar .custom-logo {
    height: 56px !important;
    width: auto !important;
    max-height: 56px !important;
}

/* === Header fijo — desktop y mobile === */
.main-header-bar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background-color: var(--header-red) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
}

/* === Barra de breadcrumb ===
   Astra reutiliza la clase .main-header-bar para el contenedor del breadcrumb
   (posición "After Header"), por lo que heredaba el position:fixed del header y
   lo tapaba. La sacamos del fixed para que quede en flujo, debajo del header. */
.main-header-bar.ast-header-breadcrumb {
    position: static !important;
    z-index: auto !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
    /* El header del builder tiene margin-top:-79px, que arrastra hacia arriba al
       breadcrumb (sibling siguiente) y lo metía DETRÁS del header fijo (top:21px).
       Cancelamos ese arrastre con +79px → queda en top = padding-top del body, es
       decir justo debajo del header fijo (constante en todos los breakpoints). */
    margin-top: 79px;
}
.ast-header-breadcrumb #ast-breadcrumbs-yoast {
    font-size: .9rem;
    color: #666;
}
.ast-header-breadcrumb #ast-breadcrumbs-yoast a {
    color: var(--nav-red);
    text-decoration: none;
}
.ast-header-breadcrumb #ast-breadcrumbs-yoast a:hover { text-decoration: underline; }

/* ─── HAMBURGUESA ───────────────────────────────────────────────────────────
   Astra oculta .ast-primary-header-bar en @media(max-width:544px).
   Forzamos visibilidad en ambos rangos con selectores de mayor especificidad.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 544px) {
    body.ast-header-break-point #ast-mobile-header .ast-primary-header-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

/* Astra activa #ast-mobile-header en < 922px — forzamos los mismos estilos */
@media (max-width: 921px) {
    #ast-mobile-header {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 9999 !important;
        background-color: var(--header-red) !important;
        box-shadow: 0 2px 12px rgba(0,0,0,.35);
        width: 100% !important;
    }
    /* El body en mobile debe compensar la altura del header móvil */
    body {
        padding-top: calc(var(--header-h) + 16px) !important;
    }
    /* Hamburger y toggle — visibles en blanco */
    #ast-mobile-header .menu-toggle,
    #ast-mobile-header .ast-mobile-menu-buttons-wrap,
    #ast-mobile-header .ast-button-wrap {
        color: #ffffff !important;
    }
    #ast-mobile-header .menu-toggle .ast-icon svg,
    #ast-mobile-header .menu-toggle .mobile-menu-bar {
        fill: #ffffff !important;
        stroke: #ffffff !important;
        color: #ffffff !important;
    }
    /* Botón hamburguesa: Astra lo pinta con global-color-0 (negro, #060606),
       fuera de la paleta de marca. Mismo rojo del header, caja más ajustada
       (era 42x42 con padding 11.2px). */
    #ast-mobile-header .menu-toggle {
        background-color: var(--header-red) !important;
        width: 34px !important;
        height: 34px !important;
        padding: 7px !important;
    }
    /* Menú expandido (dropdown) — mismo rojo oscuro */
    #ast-mobile-header .ast-mobile-header-content {
        background-color: var(--header-red-dk) !important;
    }
    #ast-mobile-header .ast-mobile-header-content a {
        color: rgba(255,255,255,.9) !important;
    }
    /* Logo en mobile — sin caja, directo sobre la barra */
    #ast-mobile-header .site-branding,
    #ast-mobile-header .ast-site-identity {
        background: transparent !important;
        /* respiración a la izquierda para que el logo no quede pegado al borde */
        padding: 4px 0 4px clamp(12px, 4vw, 20px) !important;
        border-radius: 0 !important;
    }
    #ast-mobile-header .custom-logo-link img,
    #ast-mobile-header .custom-logo {
        height: 44px !important;
        width: auto !important;
        max-height: 44px !important;
    }
}

/* === MetaSlider — fluid en tablet/desktop, oculto en móvil === */

/* Siempre 100% de ancho — anula el width fijo inyectado por FlexSlider */
.metaslider-flex,
.metaslider-flex .slides img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

@media (max-width: 768px) {
    .metaslider-flex {
        display: none !important;
    }
}

/* Home: slider a 100% del ancho (full-bleed) y PEGADO al header, sin márgenes. */
.home .metaslider,
.home .metaslider-flex {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
/* Quitar el cap interno (~1440px de Astra) para que el slider llene todo el ancho.
   Las anchuras de cada slide las fija FlexSlider por JS → se recalculan disparando
   un evento `resize` (ver functions.php, ciivo_home_slider_fullwidth_js). */
.home .metaslider-flex [id^="metaslider_container_"],
.home .metaslider-flex .flexslider,
.home .metaslider-flex .flex-viewport {
    width: 100% !important;
    max-width: 100% !important;
}
/* El bloque <p> que envuelve el slider (primer elemento del contenido), sin margen. */
.home .entry-content > p:first-child { margin: 0 !important; }
/* Slider pegado bajo el header fijo: en el home quitamos el +16px de respiración. */
body.home { padding-top: var(--header-h) !important; }

/* Flechas del slider en HOVER: icono y recuadro (borde) en negro, fondo transparente. */
.flex-direction-nav a:hover {
    background: transparent !important;
    border-color: #000 !important;
}
.flex-direction-nav a:hover::before {
    color: #000 !important;
}

/* === Compensar header fijo + respiración === */
body { padding-top: calc(var(--header-h) + 16px) !important; }

/* Neutralizar fuga de `body { padding: 40px }` que viene de un <style> embebido en
   el contenido del home (un documento HTML pegado dentro de un bloque). Empujaba el
   #page y el footer 40px hacia dentro, dejando el footer sin ancho completo. */
body { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; }

/* === Nav principal — ítems de primer nivel === */
.main-header-menu > li > a,
.main-header-menu > li > .ast-menu-toggle {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    padding: 10px 13px !important;
    border-bottom: 2px solid transparent;
    transition: border-color .2s ease, background-color .2s ease;
}

.main-header-menu > li > a:hover,
.main-header-menu > li:hover > a,
.main-header-menu > li:focus-within > a {
    background-color: var(--nav-red-hover) !important;
    border-bottom-color: rgba(255,255,255,.65) !important;
    color: #ffffff !important;
}

/* === Ítem activo === */
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a {
    background: none !important;
    border-bottom: 2px solid #ffffff !important;
    color: #ffffff !important;
}

/* === Submenús === */
.main-header-menu .sub-menu {
    background-color: var(--header-red-dk) !important;
    border-radius: 6px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
    border: none !important;
    padding: 4px 0 !important;
    min-width: 200px;
}

.main-header-menu .sub-menu a {
    color: rgba(255,255,255,.9) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    padding: 8px 16px !important;
    background-color: transparent !important;
    border-bottom: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.main-header-menu .sub-menu a:hover,
.main-header-menu .sub-menu li:hover > a {
    background-color: rgba(255,255,255,.1) !important;
    color: #ffffff !important;
}

/* === Flecha de submenú === */
.main-header-menu .dropdown-menu-toggle {
    color: rgba(255,255,255,.7) !important;
}

/* === Deshabilitar ítems-ancla (#) === */
.main-header-menu a[href="#"] {
    pointer-events: none;
    cursor: default;
}

/* === Aviso "solo en español" (visitantes EN en páginas sin traducción) === */
.ciivo-es-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--nav-red-dk);
    color: #f2ede6;
    padding: 12px 20px;
    margin: 0 0 24px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.4;
}
.ciivo-es-notice a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
.ciivo-es-notice[hidden] { display: none; }

/* === Switcher de idioma en el nav === */
.main-header-menu li.lang-sw {
    display: flex !important;
    flex-direction: column;       /* texto EN|ES arriba, banderas debajo */
    align-items: center;
    gap: 5px;
    margin-left: 6px !important;
    list-style: none !important;
}

/* Banderas de idioma (Polylang: ES→Colombia, EN→EE.UU.) bajo el EN|ES. */
.lang-sw__flags {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 0;
}
.lang-sw__flag {
    display: inline-flex;
    line-height: 0;
    opacity: .55;
    transition: opacity .15s ease, transform .15s ease;
    border-bottom: none !important;
    background: none !important;
}
.lang-sw__flag.is-current { opacity: 1; }
.lang-sw__flag:hover { opacity: 1; transform: translateY(-1px); }
.lang-sw__flag img {
    width: 20px;
    height: auto;
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}

/* === Nav de escritorio compacto en la franja 922–1100px ===================
   Astra pasa a hamburguesa en <922px, pero el menú horizontal en español
   ("VOCES Y ENCUENTROS", "ARMAS MENOS LETALES"…) solo cabe en una fila a
   partir de ~1100px. Entre 922 y 1100px se partía en 2–3 filas y "Apóyanos"
   + el switcher se solapaban con el logo/contenido. Aquí reducimos fuente,
   padding y espaciados para que TODO entre en una sola fila hasta 922px. */
@media (min-width: 922px) and (max-width: 1100px) {
    .main-header-menu > li > a,
    .main-header-menu > li > .ast-menu-toggle {
        font-size: 12px !important;
        letter-spacing: .015em !important;
        padding: 9px 8px !important;
    }
    /* Flechas de submenú más pegadas para no sumar ancho */
    .main-header-menu .dropdown-menu-toggle { padding: 0 4px !important; }
    /* Switcher de idioma compacto (mantiene EN|ES + banderas, ocupa menos) */
    .main-header-menu li.lang-sw {
        margin-left: 4px !important;
        gap: 3px;
    }
    .main-header-menu li.lang-sw .lang-sw__flag img { width: 16px; }
}

/* Ajuste fino: en la parte baja de la franja (922–1000px) apretar un punto más
   (cubre también el menú EN, con rótulos como "VOICES AND ENCOUNTERS"). */
@media (min-width: 922px) and (max-width: 1000px) {
    .main-header-menu > li > a,
    .main-header-menu > li > .ast-menu-toggle {
        font-size: 11.5px !important;
        padding: 9px 6px !important;
    }
    /* Switcher aún más compacto para ganar los últimos px */
    .main-header-menu li.lang-sw { margin-left: 3px !important; gap: 2px; }
    .main-header-menu li.lang-sw .lang-sw__flag img { width: 14px; }
    .main-header-menu li.lang-sw .lang-sw__flags { gap: 6px; }
}

/* === Switcher de idioma fijo en el header MÓVIL (fuera de la hamburguesa) === */
.lang-sw--mobile { display: none; }   /* oculto en escritorio */
@media (max-width: 921px) {
    .lang-sw--mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        align-self: center;
        margin-right: 8px;
    }
    .lang-sw--mobile .lang-sw__wrap {
        padding: 3px 9px !important;
        font-size: 10px !important;
        gap: 3px;
    }
    .lang-sw--mobile .lang-sw__flags { gap: 6px; }
    .lang-sw--mobile .lang-sw__flag img { width: 16px; }
    /* el switcher DENTRO de la hamburguesa se oculta en móvil (ya está en el header) */
    .main-header-bar-navigation .lang-sw { display: none !important; }
    /* El grid del header móvil quedaba a 235px anclado a la izquierda → lo hacemos
       full-width (logo | resto) para empujar switcher+hamburguesa al borde derecho. */
    .ast-primary-header-bar > .ast-builder-grid-row {
        width: 100% !important;
        grid-template-columns: auto 1fr !important;
    }
}

.lang-sw__wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
    padding: 4px 10px;
    background-color: rgba(255,255,255,.08);
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    line-height: 1;
}

.lang-sw__link {
    color: rgba(255,255,255,.7) !important;
    text-decoration: none !important;
    transition: color .2s ease;
    padding: 0 !important;
    border-bottom: none !important;
    background: none !important;
}

.lang-sw__link:hover {
    color: #ffffff !important;
    background: none !important;
    border-bottom: none !important;
}

.lang-sw__current {
    color: #ffffff;
    font-weight: 800;
}

.lang-sw__sep {
    color: rgba(255,255,255,.35);
    font-size: 10px;
    line-height: 1;
    margin: 0 1px;
}

/* Mobile: el switcher aparece dentro del menú móvil desplegado */
@media (max-width: 921px) {
    .main-header-menu li.lang-sw {
        padding: 8px 20px;
        margin-left: 0 !important;
    }
    .lang-sw__wrap {
        border: 1px solid rgba(255,255,255,.25);
        background-color: rgba(255,255,255,.06);
    }

    /* === FIX menú móvil ===
       El menú abierto (.toggle-on) heredaba el position:fixed/altura-0 del header y
       quedaba en top negativo, detrás del header → invisible. Lo forzamos a panel fijo
       bajo el header, fondo de marca, scrollable y con ítems legibles. */
    .main-header-bar-navigation.toggle-on {
        position: fixed !important;
        top: var(--header-h) !important;
        left: 0 !important;
        right: 0 !important;
        max-height: calc(100vh - var(--header-h)) !important;
        overflow-y: auto !important;
        background: var(--header-red) !important;
        z-index: 9998 !important;            /* bajo el header fijo (9999) */
        box-shadow: 0 14px 30px rgba(0,0,0,.35) !important;
        padding: 6px 0 18px !important;
        -webkit-overflow-scrolling: touch;
    }
    .main-header-bar-navigation.toggle-on .menu-item {
        display: block !important;
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid rgba(255,255,255,.10);
    }
    /* El <ul> trae fondo negro sólido de Astra (no viene de este archivo) y cada
       <a> de nivel superior trae su propio fondo rojo brillante semitransparente
       (ajuste del Customizer de Astra para "Mobile Menu", rgba(201,6,6,.57) —
       distinto al rojo del header). Se neutralizan ambos para que el panel entero
       quede en un solo color, el mismo del header (lo pinta .toggle-on arriba). */
    .main-header-bar-navigation.toggle-on .main-header-menu {
        background: transparent !important;
    }
    .main-header-bar-navigation.toggle-on .menu-link,
    .main-header-bar-navigation.toggle-on .menu-item > a {
        display: block !important;
        height: auto !important;
        color: #fff !important;
        background: transparent !important;
        padding: 11px 20px !important;
        font-size: 14px !important;
        /* Astra hereda line-height:42px del nav de escritorio (pensado para
           centrar el texto en la barra horizontal) — en el panel apilado eso
           por sí solo ya suma 42px por ítem antes de contar el padding. */
        line-height: 1.3 !important;
    }
    .main-header-bar-navigation.toggle-on .menu-link:hover,
    .main-header-bar-navigation.toggle-on .menu-item > a:hover,
    .main-header-bar-navigation.toggle-on .menu-item > a:focus {
        background: rgba(255,255,255,.08) !important;
    }
    /* submenús: un poco indentados y con fondo levemente distinto */
    .main-header-bar-navigation.toggle-on .sub-menu {
        background: rgba(0,0,0,.12) !important;
    }
    .main-header-bar-navigation.toggle-on .sub-menu .menu-link,
    .main-header-bar-navigation.toggle-on .sub-menu .menu-item > a {
        padding-left: 40px !important;
        font-size: 14px !important;
        color: rgba(255,255,255,.92) !important;
    }
    /* El switcher de idioma se movió al header móvil (.lang-sw--mobile), así que el del
       panel de la hamburguesa se oculta para no duplicarlo. */
    .main-header-bar-navigation.toggle-on li.lang-sw,
    .main-header-bar-navigation li.lang-sw {
        display: none !important;
    }
}
.videos-red-experta #ver-videos-btn {
  background-color: #8a1c1c;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  font-weight: bold;
}

.videos-red-experta #ver-videos-btn:hover {
  background-color: #a22c2c;
}

.videos-red-experta .card-experto {
  background: #f9f9f9;
  padding: 20px;
  margin: 20px auto;
  border-radius: 10px;
  max-width: 800px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.videos-red-experta .card-experto h3 {
  color: #8a1c1c;
  margin-top: 15px;
}
/* Ocultar título y descripción del sitio */
.site-title,
.site-description {
    display: none !important;
}
/* Quitar fondo y borde viejo */
.ast-builder-social-element {
    background: none !important;
    border: none !important;
    padding: 8px;
}

/* Tamaño moderno */
.ast-builder-social-element svg {
    width: 22px;
    height: 22px;
    transition: 0.3s ease;
}
/* Botón Contactanos con color */
.footer-widget-area .wp-block-button__link,
.footer-widget-area .button,
footer .button,
footer a.wp-block-button__link {
    background-color: #cc0000 !important;
    color: #ffffff !important;
    border: 2px solid #cc0000 !important;
    padding: 12px 25px !important;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 6px;
}

/* Hover elegante */
.footer-widget-area .wp-block-button__link:hover,
footer a.wp-block-button__link:hover {
    background-color: #990000 !important;
    border-color: #990000 !important;
}
/* Texto general del footer en negro */
.site-footer,
.site-footer p,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer span,
.site-footer a {
    color: #000000 !important;
}

/* Mantener el botón intacto */
.site-footer .wp-block-button__link,
.site-footer .button,
.site-footer .ast-button {
    color: #ffffff !important;
}
.site-footer {
    background-size: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-blend-mode: multiply;
}
.sphere-root {
  position: relative;
  width: 100%;
  height: 100%;
  --radius: 520px;
  --viewer-pad: 72px;
  --circ: calc(var(--radius) * 3.14);
  --rot-y: calc((360deg / var(--segments-x)) / 2);
  --rot-x: calc((360deg / var(--segments-y)) / 2);
  --item-width: calc(var(--circ) / var(--segments-x));
  --item-height: calc(var(--circ) / var(--segments-y));
}

.sphere-root * {
  box-sizing: border-box;
}

.sphere,
.item,
.item__image {
  transform-style: preserve-3d;
}

main.sphere-main {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
}

.stage {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: calc(var(--radius) * 2);
  perspective-origin: 50% 50%;
  contain: layout paint size;
}

.sphere {
  transform: translateZ(calc(var(--radius) * -1));
  will-change: transform;
}

.overlay,
.overlay--blur {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 3;
  pointer-events: none;
}

.overlay {
  background-image: radial-gradient(rgba(235, 235, 235, 0) 65%, var(--overlay-blur-color, #060010) 100%);
}

.overlay--blur {
  -webkit-mask-image: radial-gradient(rgba(235, 235, 235, 0) 70%, var(--overlay-blur-color, #060010) 90%);
  mask-image: radial-gradient(rgba(235, 235, 235, 0) 70%, var(--overlay-blur-color, #060010) 90%);
  backdrop-filter: blur(3px);
}

.item {
  width: calc(var(--item-width) * var(--item-size-x));
  height: calc(var(--item-height) * var(--item-size-y));
  position: absolute;
  top: -999px;
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform 300ms;
  transform: rotateY(calc(var(--rot-y) * (var(--offset-x) + ((var(--item-size-x) - 1) / 2)) + var(--rot-y-delta, 0deg)))
    rotateX(calc(var(--rot-x) * (var(--offset-y) - ((var(--item-size-y) - 1) / 2)) + var(--rot-x-delta, 0deg)))
    translateZ(var(--radius));
}

.item__image {
  position: absolute;
  display: block;
  inset: 10px;
  border-radius: var(--tile-radius, 12px);
  background: transparent;
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform 300ms;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.item__image:focus {
  outline: none;
}

.item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  backface-visibility: hidden;
  filter: var(--image-filter, none);
}

.viewer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--viewer-pad);
}

.viewer .frame {
  height: 100%;
  aspect-ratio: 1;
  border-radius: var(--enlarge-radius, 32px);
  display: flex;
}

@media (max-aspect-ratio: 1/1) {
  .viewer .frame {
    height: auto;
    width: 100%;
  }
}

.viewer .scrim {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  backdrop-filter: blur(3px);
}

.sphere-root[data-enlarging='true'] .viewer .scrim {
  opacity: 1;
  pointer-events: all;
}

.viewer .enlarge {
  position: absolute;
  z-index: 30;
  border-radius: var(--enlarge-radius, 32px);
  overflow: hidden;
  transition:
    transform 500ms ease,
    opacity 500ms ease;
  transform-origin: top left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.viewer .enlarge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--image-filter, none);
}

.sphere-root .enlarge-closing img {
  filter: var(--image-filter, none);
}

.edge-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--overlay-blur-color, #060010));
}

.edge-fade--top {
  top: 0;
  transform: rotate(180deg);
}

.edge-fade--bottom {
  bottom: 0;
}
.sphere-root {
  position: relative;
  width: 100%;
  min-height: min(900px, 90vw);
  overflow: hidden;
  background: #05010d;
  border: 1px solid rgba(120, 100, 255, 0.12);
  border-radius: 28px;

  --cols: 7;
  --rows: 8;
  --card-w: clamp(100px, 14vw, 170px);
  --card-h: clamp(135px, 18vw, 220px);
  --gap-x: 26px;
  --gap-y: 26px;
  --curve: 220px;
  --tilt-x: 8deg;
}

.sphere-root * {
  box-sizing: border-box;
}

.sphere-stage {
  position: relative;
  width: 100%;
  min-height: min(900px, 90vw);
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sphere-grid {
  position: relative;
  width: calc(var(--cols) * var(--card-w) + (var(--cols) - 1) * var(--gap-x));
  height: calc(var(--rows) * var(--card-h) + (var(--rows) - 1) * var(--gap-y));
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x));
}

.sphere-item {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 30px;
  overflow: hidden;
  background: #111;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.sphere-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05) brightness(0.95);
  pointer-events: none;
}

.sphere-item:hover {
  transform: scale(1.04) translateZ(20px) !important;
  z-index: 5;
}

.sphere-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

.sphere-vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(5, 1, 13, 0) 48%, rgba(5, 1, 13, 0.45) 78%, rgba(5, 1, 13, 0.85) 100%);
}

.sphere-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(5, 1, 13, 0.95) 0%,
      rgba(5, 1, 13, 0.35) 10%,
      rgba(5, 1, 13, 0) 22%,
      rgba(5, 1, 13, 0) 78%,
      rgba(5, 1, 13, 0.35) 90%,
      rgba(5, 1, 13, 0.95) 100%);
}

.sphere-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  border-radius: 28px;
  box-shadow:
    inset 0 0 80px rgba(85, 35, 255, 0.08),
    inset 0 -40px 80px rgba(0, 0, 0, 0.45),
    inset 0 40px 80px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1200px) {
  .sphere-root {
    --gap-x: 20px;
    --gap-y: 20px;
    min-height: min(760px, 85vw);
  }

  .sphere-stage {
    min-height: min(760px, 85vw);
  }
}

@media (max-width: 768px) {
  .sphere-root {
    --cols: 4;
    --rows: 10;
    --gap-x: 16px;
    --gap-y: 16px;
    --curve: 120px;
    min-height: min(620px, 90vw);
  }
}
.dg-scroll-lock {
  overflow: hidden;
}

.item__image--reference {
  position: absolute;
  inset: 10px;
  border-radius: var(--tile-radius, 12px);
  overflow: hidden;
  pointer-events: none;
}

.viewer .enlarge,
.sphere-root .enlarge-closing {
  background: #000;
}
.encuentro-videos{
max-width:1200px;
margin:auto;
padding: clamp(30px, 6vw, 60px) clamp(16px, 4vw, 20px);
}

.encuentro-videos h2{
text-align:center;
margin-bottom:30px;
font-size: clamp(22px, 4vw, 32px);
}

.video-principal{
width:100%;
aspect-ratio:16/9;
margin-bottom:25px;
}

.video-principal iframe{
width:100%;
height:100%;
border:none;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.carrusel-videos{
display:flex;
gap:16px;
overflow-x:auto;
padding-bottom:10px;
}

.carrusel-videos img{
width: clamp(200px, 40vw, 260px);
max-width: 100%;
border-radius:12px;
cursor:pointer;
transition:.3s;
flex-shrink:0;
}

.carrusel-videos img:hover{
transform:scale(1.05);
}

/* ============================================================
   TAREA 2 — Justificación de texto
   ============================================================ */

.entry-content p,
.entry-content li,
.textwidget p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    orphans: 3;
    widows: 3;
}

/* Excepción: centrado intencional permanece */
.entry-content p.has-text-align-center,
.entry-content .wp-block-cover p,
.entry-content figcaption {
    text-align: center;
    hyphens: none;
}

/* ============================================================
   TAREA 3 — Títulos de sección
   ============================================================ */

/* Estilo base para h1/h2/h3 dentro del contenido de página */
.entry-content h1:not(.wp-block-site-title),
.entry-content h2 {
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #1a0a0a;
    text-wrap: balance;
    margin-bottom: 0.6em;
    position: relative;
    padding-bottom: 0.45em;
}

/* Línea decorativa debajo del título */
.entry-content h1:not(.wp-block-site-title)::after,
.entry-content h2::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(40px, 8vw, 64px);
    height: 3px;
    background: var(--nav-red);
    border-radius: 2px;
}

/* Títulos centrados mantienen el acento centrado */
.entry-content h1[style*="text-align:center"]::after,
.entry-content h1.has-text-align-center::after,
.entry-content h2.has-text-align-center::after,
/* Centrados vía contenedor (secciones del home, p.ej. .seccion-informes) */
.entry-content .seccion-informes h1::after,
.entry-content .seccion-informes h2::after,
.entry-content [style*="text-align: center"] > h1::after,
.entry-content [style*="text-align:center"] > h1::after,
/* Acentos de títulos centrados de la página de donación. OJO ESPECIFICIDAD:
   - base h2: `.entry-content h2::after` = (0,1,2) → para ganar usar `.entry-content .clase::after` (0,2,1).
   - base h1: `.entry-content h1:not(.wp-block-site-title)::after` = (0,2,2) porque el
     `:not(.clase)` suma especificidad de clase → para ganar usar `.entry-content h1.clase::after` (0,2,2) y que vaya DESPUÉS.
   Si no se respeta, el acento se queda a la izquierda (left:0). */
.entry-content .ciivo-don-formtitle::after,
.entry-content h1.ciivo-don-hero__title::after {
    left: 50%;
    transform: translateX(-50%);
}

.entry-content h3 {
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    font-weight: 700;
    color: var(--nav-red);
    letter-spacing: .01em;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

/* ============================================================
   TAREA 4 — Componente mapa mundi
   ============================================================ */

.contenedor-mapa {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: clamp(24px, 4vw, 48px) 20px;
    text-align: center;
}

/* SVG globe icon */
.contenedor-mapa .icono-mapa {
    width: clamp(56px, 12vw, 88px);
    height: clamp(56px, 12vw, 88px);
    stroke: var(--nav-red);
    transition: transform .3s ease;
}

.contenedor-mapa:hover .icono-mapa {
    transform: rotate(15deg) scale(1.08);
}

/* Ocultar img rota si quedara algún rastro */
.contenedor-mapa img:not(.icono-mapa) {
    display: none !important;
}

.contenedor-mapa p {
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: #444;
    text-align: center !important;
    hyphens: none;
    max-width: 480px;
}

.boton-mapa {
    display: inline-block;
    background-color: var(--nav-red) !important;
    color: #fff !important;
    text-transform: uppercase;
    font-weight: 700;
    font-family: inherit;
    padding: 11px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-size: clamp(0.8rem, 1.5vw, 0.875rem);
    letter-spacing: .06em;
    transition: background-color .2s ease;
    border: none;
}

.boton-mapa:hover {
    background-color: var(--nav-red-dk) !important;
    color: #fff !important;
}

/* ============================================================
   PÁGINA MAPA DE CASOS — layout y hero
   ============================================================ */

/* Hero del mapa: fondo rojo borgoña oscuro, texto blanco */
.page-id-4116 .wp-block-group.has-black-background-color {
    background-color: var(--nav-red-dk) !important;
}

.page-id-4116 .entry-content h1 {
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    color: #ffffff !important;
    border: none;
    padding-bottom: 0;
}

.page-id-4116 .entry-content h1::after {
    display: none;
}

/* Contenido principal: legible, buen espaciado */
.page-id-4116 .wp-block-group:not(.has-black-background-color) {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.page-id-4116 .entry-content p {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    line-height: 1.75;
    color: #2a1a1a;
}

/* Botón en la página del mapa */
.page-id-4116 .wp-block-button__link {
    background-color: var(--nav-red) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    font-size: 0.85rem !important;
    border: none !important;
}

.page-id-4116 .wp-block-button__link:hover {
    background-color: var(--nav-red-dk) !important;
}

/* ============================================================
   ICONOS SOCIALES EN HEADER — ocultos (solo aparecen en footer)
   ============================================================ */

.main-header-bar [data-section="section-hb-social-icons-1"],
#ast-mobile-header [data-section="section-hb-social-icons-1"],
.ast-header-social-1-wrap,
.main-header-bar .ast-builder-social-wrap {
    display: none !important;
}

/* ============================================================
   ICONOS SOCIALES — BLANCOS EN HEADER (desktop + mobile)
   Astra inyecta inline style="--color: #7acdee" (Twitter) y
   style="--color: #8a3ab9" (Instagram). Con !important en la
   custom property el stylesheet gana sobre el inline style.
   ============================================================ */

.main-header-bar .ast-builder-social-element,
#ast-mobile-header .ast-builder-social-element {
    --color: #ffffff !important;
    --background-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
}

.main-header-bar .ast-builder-social-element svg,
#ast-mobile-header .ast-builder-social-element svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Twitter / X y demás íconos fill-based: blanco directo */
.main-header-bar .ast-builder-social-element svg path,
#ast-mobile-header .ast-builder-social-element svg path {
    fill: #ffffff !important;
}

/* ── Instagram: el SVG de Astra es un path compuesto (rectángulo sólido +
   agujeros) — "fill: white" haría la caja blanca con los cortes en rojo.
   Ocultamos el SVG de Astra e inyectamos un outline vectorial blanco. ── */
.main-header-bar .ast-instagram .ahfb-svg-iconset svg,
#ast-mobile-header .ast-instagram .ahfb-svg-iconset svg {
    display: none !important;
}

.main-header-bar .ast-instagram .ahfb-svg-iconset,
#ast-mobile-header .ast-instagram .ahfb-svg-iconset {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.5' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Footer Instagram: mismo outline pero sobre fondo oscuro (ya funciona igual) */
.site-footer .ast-instagram .ahfb-svg-iconset svg {
    display: none !important;
}

.site-footer .ast-instagram .ahfb-svg-iconset {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.5' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================================
   HEADER — UNIFORMIDAD DE FONDO
   Neutraliza fondos con colores distintos al nav-red que Astra
   puede generar en elementos secundarios de la barra.
   ============================================================ */

.main-header-bar .ast-search-menu-icon,
.main-header-bar .ast-search-menu-icon form,
.main-header-bar .ast-search-icon,
.main-header-bar .ast-header-woo-cart,
.main-header-bar .ast-site-header-cart {
    background-color: transparent !important;
}

/* Wrappers internos del header builder */
.main-header-bar .ast-builder-grid-row,
.main-header-bar .ast-builder-grid-row-container-inner,
.main-header-bar .ast-flex:not(.main-header-bar) {
    background-color: transparent !important;
}

/* ============================================================
   MAPA DE CASOS (page-id-1887) — contenido bajo header fijo
   Astra activa "transparent header" en esta página (clase
   ast-replace-site-logo-transparent) lo que puede anular el
   padding-top del body. Lo forzamos aquí.
   El primer bloque es alignfull (video hero): le damos padding
   extra para que el texto/video no quede oculto bajo la barra.
   ============================================================ */

body.page-id-1887 {
    padding-top: calc(var(--header-h) + 16px) !important;
}

/* Primer bloque full-width (el video hero) */
.page-id-1887 .entry-content > .wp-block-uagb-container:first-child,
.page-id-1887 .entry-content > .alignfull:first-child {
    padding-top: calc(var(--header-h) + 32px) !important;
}

/* Si hay texto/video anidado dentro del bloque root */
.page-id-1887 .uagb-is-root-container:first-child {
    padding-top: calc(var(--header-h) + 32px) !important;
}

/* ============================================================
   TAREA 5 — Footer rediseño
   ============================================================ */

/* Fondo y color base */
#colophon,
.site-footer {
    background-color: var(--nav-red-dk) !important;
    color: rgba(255,255,255,.85) !important;
    border-top: 3px solid var(--nav-red) !important;
}

/* Tipografía */
.site-footer,
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer a {
    color: rgba(255,255,255,.82) !important;
    font-size: 0.9rem;
    line-height: 1.7;
}

.site-footer a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Títulos de widget */
.site-footer .widget-title,
.site-footer h2,
.site-footer h3 {
    color: #ffffff !important;
    font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(255,255,255,.2);
    padding-bottom: 0.5rem;
}

/* Padding interno del footer */
.ast-builder-grid-row-container.site-primary-footer-wrap {
    padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 40px) !important;
}

.site-below-footer-wrap {
    padding: 16px clamp(16px, 4vw, 40px) !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
}

/* Iconos sociales — blancos, mayor separación entre ellos */
.site-footer .ast-builder-social-element {
    background: rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    color: #ffffff !important;
    --color: #ffffff !important;
    --background-color: rgba(255,255,255,.1) !important;
    margin: 0 10px !important;
}

.ast-footer-social-wrap .ast-builder-social-element:first-child { margin-left: 0 !important; }
.ast-footer-social-wrap .ast-builder-social-element:last-child  { margin-right: 0 !important; }

.site-footer .ast-builder-social-element:hover {
    background: rgba(255,255,255,.22) !important;
}

.site-footer .ast-builder-social-element svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Botón "Contáctanos" — fondo hueso sobre borgoña, máximo contraste y 44px de área táctil */
.footer-widget-area .uagb-buttons-repeater,
footer .uagb-buttons-repeater,
.footer-widget-area .wp-block-button__link {
    background-color: #f2ede6 !important;
    color: var(--nav-red-dk) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 36px !important;
    font-weight: 800 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    transition: background-color .2s ease, box-shadow .2s ease !important;
    display: inline-block !important;
    min-height: 44px !important;
    box-shadow: 0 3px 18px rgba(0,0,0,.35) !important;
    line-height: 1 !important;
}

.footer-widget-area .uagb-buttons-repeater:hover,
footer .uagb-buttons-repeater:hover,
.footer-widget-area .wp-block-button__link:hover {
    background-color: #ffffff !important;
    color: var(--nav-red-dk) !important;
    box-shadow: 0 5px 24px rgba(0,0,0,.45) !important;
}

/* Copyright bar */
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p {
    color: #fff !important;
    font-size: 0.78rem !important;
    text-align: center;
}

/* ============================================================
   FOOTER — CIFRAS DE IMPACTO (columna derecha)
   ============================================================ */

.footer-impacto {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding: clamp(8px, 2vw, 16px) 0;
    align-items: center;
}

.impacto-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    text-align: center;
}

.impacto-num {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: #f2ede6;
    font-family: 'Playfair Display', serif;
    line-height: 1;
    display: block;
}

.impacto-lbl {
    font-size: 0.72rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    display: block;
}

@media (max-width: 768px) {
    .footer-impacto {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.2rem 2rem;
        justify-content: center;
    }
    .impacto-item {
        flex: 0 1 auto;
    }
}

/* ============================================================
   SIDEBAR FLOTANTE DE REDES SOCIALES
   Aparece al hacer scroll (JS añade .is-visible).
   Hover abre el panel automáticamente (solo pointer fino).
   Posición: borde derecho, centrado verticalmente.
   ============================================================ */

.social-flotante {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(calc(100% + 4px));
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease;
    z-index: 998;
}

.social-flotante.is-visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.social-flotante__wrap {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}

/* Manija/tab — siempre visible en el borde derecho */
.social-flotante__tab {
    background-color: var(--nav-red);
    padding: 14px 8px;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #f2ede6;
    box-shadow: -3px 2px 14px rgba(0,0,0,.35);
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .2s ease;
}

.social-flotante__tab:hover {
    background-color: var(--nav-red-dk);
}

/* Quitar marcador nativo del <summary> */
.social-flotante__tab::marker,
.social-flotante__tab::-webkit-details-marker { display: none; }

/* Chevron rota al abrir */
.social-flotante__chevron {
    transition: transform .25s ease;
}

.social-flotante__wrap[open] .social-flotante__chevron {
    transform: rotate(180deg);
}

/* Panel de íconos: aparece a la izquierda del tab */
.social-flotante__panel {
    background-color: var(--nav-red);
    border-radius: 8px 0 0 8px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    box-shadow: -4px 2px 16px rgba(0,0,0,.35);
    animation: social-slide-in .22s ease;
}

@keyframes social-slide-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Cada enlace social */
.social-flotante__link {
    color: #f2ede6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.social-flotante__link:hover {
    background-color: rgba(255,255,255,.18);
    color: #ffffff;
}

.social-flotante__link svg { display: block; }

/* Móvil: baja al fondo derecho para no tapar el contenido */
@media (max-width: 768px) {
    .social-flotante {
        top: auto;
        bottom: 80px;
        transform: translateX(calc(100% + 4px));
    }
    .social-flotante.is-visible {
        transform: translateX(0);
    }
    .social-flotante__tab {
        padding: 10px 6px;
        gap: 4px;
    }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .social-flotante__panel   { animation: none; }
    .social-flotante__chevron { transition: none; }
}

/* CLS: la imagen de .noticia (IMG_3789, 500x500) usa height:auto sin reservar
   espacio → salto de layout al cargar. La imagen es fija (solo aparece en el
   home ES/EN), así que fijamos su proporción real. */
.noticia img { aspect-ratio: 1 / 1 !important; }

/* === Sección promoción (video + noticia) — bloque embebido en el home ===
   El bloque trae su propio CSS inline: .seccion-promocion es flex en fila y
   .video-promocion tiene min-width:320px, lo que provoca overflow horizontal en
   móvil (320px no cabe en 360px junto a la noticia). Apilamos en pantallas
   pequeñas y quitamos el min-width fijo. (El markup vive en el contenido/BD; este
   override responsive vive en el child theme, que sí se despliega.) */
@media (max-width: 768px) {
    /* !important para vencer el <style> inline del bloque (va después en el DOM). */
    .seccion-promocion { flex-direction: column !important; gap: 20px !important; }
    .video-promocion   { min-width: 0 !important; width: 100% !important; }
    .noticia           { flex-direction: column !important; }
    .noticia img       { width: 100% !important; margin-right: 0 !important; margin-bottom: 16px !important; }
}

/* === Producto "Donación" (id 4241) embebido en las páginas de donación ===
   [product_page] arrastra el "chrome" de tienda (imagen placeholder, categoría,
   SKU, pestañas) que no corresponde a una donación. Lo ocultamos y damos ancho
   completo al formulario (selector de monto + botón Donar). Scopeado al producto. */
.post-4241.product .woocommerce-product-gallery,
.post-4241.product .product_meta,
.post-4241.product .woocommerce-tabs,
.post-4241.product .posted_in,
.post-4241.product .single-product-category {
    display: none !important;
}
.post-4241.product .summary.entry-summary {
    width: 100% !important;
    float: none !important;
    max-width: 640px;
}
.post-4241 .single_add_to_cart_button { margin-left: 0 !important; }

/* Las páginas de donación (3990 ES / 4170 EN): contenedor centrado y amplio para
   el rediseño tipo crowdfunding. */
.page-id-3990 .entry-content,
.page-id-4170 .entry-content {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ===== Rediseño página de donación (estilo crowdfunding / vaki) ===== */
/* Hero: tarjeta blanca con sombra, texto centrado y oscuro. */
.ciivo-don-hero {
    background: #fff;
    color: #2a1414;
    text-align: center;
    padding: clamp(40px, 7vw, 72px) clamp(20px, 5vw, 56px);
    border-radius: 20px;
    margin: 8px 0 36px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .10);
    border: 1px solid #f0e9e4;
}
.ciivo-don-hero__inner { max-width: 720px; margin: 0 auto; }
/* Forzar centrado de los párrafos del hero/forma: el tema aplica `text-align:justify`
   a `.entry-content p` (especificidad 0,1,1), que ganaba a la herencia del contenedor;
   prefijamos con `.entry-content` (0,2,0) + !important para vencerlo. */
.entry-content .ciivo-don-hero__eyebrow,
.entry-content .ciivo-don-hero__title,
.entry-content .ciivo-don-hero__sub,
.entry-content .ciivo-don-formnote { text-align: center !important; }
.ciivo-don-hero__eyebrow {
    text-transform: uppercase; letter-spacing: .14em; text-align: center;
    font-size: .78rem; color: var(--nav-red); font-weight: 600; margin: 0 0 14px;
}
.ciivo-don-hero__title {
    font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.1;
    margin: 0 auto 16px; color: #1a0a0a;
    position: relative; padding-bottom: .5em;
}
.ciivo-don-hero__sub {
    font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; text-align: center;
    color: #555; margin: 0 auto 30px;
}
.ciivo-don-hero__cta {
    display: inline-block; background: var(--nav-red); color: #fff;
    font-weight: 700; padding: 15px 40px; border-radius: 999px;
    text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ciivo-don-hero__cta:hover {
    transform: translateY(-2px); box-shadow: 0 10px 28px rgba(125, 25, 25, .3);
    background: var(--nav-red-dk); color: #fff;
}

.ciivo-don-trust {
    display: flex; justify-content: center; gap: clamp(24px, 6vw, 72px);
    flex-wrap: wrap; text-align: center; margin: 0 0 40px;
}
.ciivo-don-trust__num {
    display: block; font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800; color: var(--nav-red); line-height: 1;
}
.ciivo-don-trust__lbl {
    display: block; text-transform: uppercase; letter-spacing: .08em;
    font-size: .78rem; color: #666; margin-top: 8px;
}

.ciivo-don-why {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; margin: 0 0 12px;
}
.ciivo-don-why__item {
    background: #faf7f3; border-radius: 16px; padding: 28px 24px; text-align: center;
}
.ciivo-don-why__item svg {
    width: 38px; height: 38px; color: var(--nav-red); margin-bottom: 12px;
}
.ciivo-don-why__item h3 { margin: 0 0 8px; font-size: 1.1rem; }
.ciivo-don-why__item p { margin: 0; color: #555; font-size: .95rem; line-height: 1.5; }

/* Bloque del producto/donar */
/* Recuadro del formulario de donación: tarjeta sobria y profesional que encierra
   el título, la nota y el formulario. El margen inferior da aire antes del footer. */
.ciivo-don-form {
    scroll-margin-top: calc(var(--header-h) + 24px);
    max-width: 680px;
    margin: 0 auto 72px;
    background: #fff;
    border: 1px solid #e6ddd4;
    border-radius: 16px;
    padding: clamp(28px, 4vw, 48px);
    box-shadow: 0 6px 28px rgba(0, 0, 0, .06);
}
/* El reset `.entry-content > *:last-child { margin-bottom:0 }` anula el margen del
   recuadro (es el último hijo) y lo pega al footer; lo restauramos con más
   especificidad para dejar aire entre el botón Donar y el footer. */
.entry-content .ciivo-don-form { margin-bottom: 80px !important; }
.ciivo-don-form .ciivo-don-formtitle {
    text-align: center; margin: 0 0 6px; font-size: clamp(1.4rem, 3vw, 2rem);
}
.ciivo-don-form .ciivo-don-formnote {
    text-align: center; color: #666; margin: 0 0 18px;
}
/* Dentro del recuadro el producto ocupa el ancho disponible (sin doble caja). */
.ciivo-don-form .post-4241 .summary.entry-summary { max-width: 100%; }

/* Campo de monto: montos sugeridos (botones) + monto libre (input). */
.ciivo-amount-field { margin: 8px auto 8px; max-width: 560px; }
.ciivo-amount-label { display: block; font-weight: 700; margin-bottom: 12px; }
.ciivo-amount-buttons {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
    margin: 0 0 18px;
}
.ciivo-amount-btn {
    border: 2px solid var(--nav-red); color: var(--nav-red); background: #fff;
    border-radius: 12px; padding: 14px 24px; font-size: 1.15rem; font-weight: 700;
    cursor: pointer; min-width: 120px; transition: background .15s ease, color .15s ease, transform .1s ease;
    font-family: inherit;
}
.ciivo-amount-btn:hover { background: #faf0f0; transform: translateY(-1px); }
.ciivo-amount-btn.is-active { background: var(--nav-red); color: #fff; }
.ciivo-amount-other { display: block; margin: 0 auto 8px; }
.ciivo-amount-other span { display: block; font-size: .9rem; color: #666; margin-bottom: 6px; }
.ciivo-amount-other input {
    width: 100%; max-width: 320px; padding: 12px 16px; font-size: 1.15rem;
    border: 2px solid #ddd; border-radius: 12px; text-align: center; font-family: inherit;
}
.ciivo-amount-other input:focus { border-color: var(--nav-red); outline: none; }
/* Botón Donar grande y centrado (producto simple) */
.post-4241 form.cart { text-align: center; }
.post-4241 .woocommerce-variation-add-to-cart { text-align: center; }
.post-4241 .single_add_to_cart_button {
    font-size: 1.3rem !important; padding: 14px 48px !important;
    background: var(--nav-red) !important; color: #fff !important;
    border-color: var(--nav-red) !important; border-radius: 999px !important;
    display: block !important; float: none !important; margin: 8px auto 0 !important;
}
.post-4241 .single_add_to_cart_button:hover { background: var(--nav-red-dk) !important; }
.post-4241 .summary.entry-summary { text-align: center; max-width: 760px; margin: 0 auto !important; }
/* Declutter: el hero y "Elige tu aporte" ya dan el contexto; ocultamos el título,
   el rango de precio y la descripción corta del producto para una tarjeta limpia. */
.post-4241 .product_title,
.post-4241 .summary > .price,
.post-4241 .woocommerce-product-details__short-description { display: none !important; }

/* === Checkout / botones WooCommerce — UX ===
   El botón base del tema es outline (texto rojo, fondo transparente) y al hover el
   fondo se rellena de rojo PERO el texto seguía rojo → ilegible. Forzamos texto
   blanco en hover. Y el botón principal "Donar" va relleno (primario) y legible. */
#place_order,
.woocommerce #payment #place_order {
    background: var(--nav-red) !important;
    color: #fff !important;
    border: 2px solid var(--nav-red) !important;
    border-radius: 999px !important;
    padding: 14px 44px !important;
    font-size: 1.2rem !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#place_order:hover,
.woocommerce #payment #place_order:hover {
    background: var(--nav-red-dk) !important;
    border-color: var(--nav-red-dk) !important;
    color: #fff !important;
}
/* Resto de botones WooCommerce: texto blanco al rellenarse en hover. */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover { color: #fff !important; }

/* === Footer: flecha "subir" en blanco (el copyright se fija blanco en su regla
   original "Copyright bar" más arriba). === */
.ast-scroll-top-icon,
.ast-scroll-top-icon svg,
.ast-scroll-top-icon path,
#ast-scroll-top { color: #fff !important; fill: #fff !important; }

/* === Footer geométrico: 50/50 (estadísticas izq · contacto der) ===
   El footer principal trae 3 columnas [social][contacto][estadísticas]. Un JS
   (functions.php) mueve las redes a la barra de copyright; aquí dejamos las dos
   columnas restantes al 50%. Como en el DOM quedan [contacto, estadísticas],
   usamos row-reverse para mostrar [estadísticas, contacto]. */
.site-footer-primary-section-1 { flex-direction: row-reverse !important; flex-wrap: wrap; }
.site-footer-primary-section-1 > .footer-widget-area {
    flex: 1 1 50% !important;
    max-width: 50% !important;
}
@media (max-width: 768px) {
    .site-footer-primary-section-1 { flex-direction: column !important; }
    .site-footer-primary-section-1 > .footer-widget-area { max-width: 100% !important; }
}

/* Barra inferior: redes (izq) + copyright (der). El JS prepende el nodo de redes
   dentro de la sección del copyright; aquí la convertimos en fila. */
.site-below-footer-wrap .ast-builder-grid-row-container-inner { width: 100%; }
/* El below-footer es un grid de 2 columnas (575px 575px) de Astra; lo colapsamos a
   una sola columna full-width para que redes (izq) y copyright (der) abarquen todo. */
.site-below-footer-wrap .ast-builder-footer-grid-columns { grid-template-columns: 1fr !important; }
.site-footer-below-section-1.ciivo-below-has-social {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}
.ciivo-below-has-social .ast-footer-copyright {
    width: auto !important;
    flex: 0 1 auto;
    margin: 0 !important;
}
/* Los wrappers de elementos del builder traen width:100% → forzamos ancho de
   contenido para que redes (izq) y copyright (der) queden lado a lado. */
.ciivo-below-has-social > .ast-builder-layout-element {
    flex: 0 1 auto;
    width: auto !important;
    max-width: none !important;
}

/* === Header móvil ===
   1) Hamburguesa (y la X de cerrar) en BLANCO — sus paths venían en rojo (202,7,7),
      poco contraste sobre el botón oscuro.
   2) El logo quedaba pegado al borde izquierdo (left:0); le damos respiración. */
.menu-toggle svg,
.menu-toggle svg path,
.mobile-menu-toggle-icon svg,
.mobile-menu-toggle-icon svg path {
    fill: #fff !important;
    color: #fff !important;
}
/* (el padding izquierdo del logo móvil se aplica en la regla #ast-mobile-header
   .site-branding de arriba, que tiene mayor especificidad por el ID) */

/* === Banda "Donar" del footer === */
.ciivo-footer-donate {
    background: rgba(255, 255, 255, .045);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.ciivo-footer-donate__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px clamp(20px, 5vw, 56px);
    flex-wrap: wrap;
}
.ciivo-footer-donate__text { flex: 1 1 420px; }
.ciivo-footer-donate__text h3 {
    color: #fff;
    font-size: clamp(1.2rem, 2.4vw, 1.45rem);
    margin: 0 0 6px;
    line-height: 1.2;
}
.ciivo-footer-donate__text p {
    color: rgba(255, 255, 255, .82);
    font-size: .94rem;
    line-height: 1.5;
    margin: 0;
    max-width: 640px;
}
/* Prefijado con .site-footer para vencer a `.site-footer a { color … !important }`. */
.site-footer .ciivo-footer-donate__btn {
    flex-shrink: 0;
    background: #fff !important;
    color: var(--nav-red) !important;
    font-weight: 700;
    padding: 14px 40px;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 1.05rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}
.site-footer .ciivo-footer-donate__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    background: #fff !important;
    color: var(--nav-red-dk) !important;
}
@media (max-width: 640px) {
    .ciivo-footer-donate__inner { flex-direction: column; text-align: center; }
    .ciivo-footer-donate__text { flex-basis: auto; }
}

/* === Footer: fondo del mapa rasterizado (SVG 1.1 MB → WebP ~54 KB) ===
   Astra fija `.site-footer { background-image: gradient, url(BlankMap-World.svg) }`.
   Apuntamos al WebP (URL root-relative para que funcione en cualquier entorno). El resto
   de propiedades de fondo (repeat/position/size) se heredan de la regla original. */
#colophon {
    background-image:
        linear-gradient(to right, rgba(0,0,0,.33), rgba(0,0,0,.33)),
        url(/wp-content/uploads/2025/06/BlankMap-World.webp) !important;
}


/* === Header 2026-09-29: ~10% más bajo (85→76px escritorio, 80→72px móvil), rojo más vivo.
   El logo NO cambia de tamaño (56px escritorio / 44px móvil). El color va en tokens
   propios del header (--header-red*) para no teñir footer/botones, que siguen con --nav-red. === */
.main-header-bar:not(.ast-header-breadcrumb) { min-height: 76px !important; height: 76px !important; }
#ast-mobile-header .ast-primary-header-bar {
    min-height: 72px !important; height: 72px !important; box-sizing: border-box !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
}
.main-header-menu > .menu-item > a { max-height: 76px !important; }

/* === Legibilidad 2026-09-29 (auditoría) ===
   - Medida de lectura ~75 caracteres: los párrafos que ocupaban todo el ancho (hasta ~170 car./línea)
     se limitan y centran. No afecta a párrafos dentro de columnas (ya son estrechos).
   - Sin justificado ni guiones automáticos ("funcio-narios"): alineado a la izquierda.
   - Margen lateral mínimo en bloques de columnas anchas (páginas de países pegadas al borde). */
.entry-content > p,
.entry-content .uagb-container-inner-blocks-wrap > p,
.entry-content .wp-block-group__inner-container > p,
.entry-content .uagb-container-inner-blocks-wrap > ul,
.entry-content .uagb-container-inner-blocks-wrap > ol {
    max-width: 75ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.entry-content p,
.entry-content li {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    line-height: 1.7;
}
.entry-content p:not(.has-text-align-center):not(.has-text-align-right) {
    text-align: left !important;
}
.entry-content .wp-block-columns.alignwide {
    padding-left: clamp(16px, 4vw, 56px);
    padding-right: clamp(16px, 4vw, 56px);
    box-sizing: border-box;
}


/* === Header centrado (2026-09-29): logo al centro, menú repartido 3 | logo | 3, idioma a la derecha.
   Color del header = footer (#3d1010). "Apóyanos" ya no tiene estilo propio (igual que los demás ítems).
   Los ítems conservan su ancho natural; un script mínimo (ciivo-header-center.js) compensa la diferencia
   de ancho entre el grupo izquierdo y el derecho para que el hueco quede exactamente bajo el logo. === */
@media (min-width: 922px) {
    #ast-desktop-header .ast-primary-header-bar .site-primary-header-wrap,
    #ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row {
        position: relative; height: 76px; min-height: 76px; margin: 0; padding-top: 0; padding-bottom: 0;
        grid-template-columns: 1fr !important; align-items: center;
    }
    /* logo: centro exacto de la barra (horizontal y vertical); tamaño intacto (56px) */
    #ast-desktop-header .site-header-primary-section-left {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; z-index: 2;
    }
    #ast-desktop-header .site-branding,
    #ast-desktop-header .ast-site-identity { padding: 0 !important; margin: 0 !important; }
    #ast-desktop-header .site-branding .site-logo-img,
    #ast-desktop-header .site-branding .custom-logo-link { display: flex !important; align-items: center; justify-content: center; }
    #ast-desktop-header .site-header-primary-section-right { width: 100%; height: 100%; justify-content: center; align-items: center; }
    #ast-desktop-header .ast-builder-menu-1,
    #ast-desktop-header .ast-builder-menu-1 .ast-main-header-bar-alignment,
    #ast-desktop-header .ast-builder-menu-1 .main-header-bar-navigation { width: 100%; flex: 1 1 100%; height: 100%; display: flex; align-items: center; }
    #ast-desktop-header .main-header-menu {
        --logo-gap: clamp(140px, 11vw, 190px);
        display: flex !important; justify-content: center; align-items: center; flex-wrap: nowrap;
        width: 100%; padding: 0 clamp(78px, 6vw, 112px) 0 clamp(4px, 1vw, 24px);
    }
    #ast-desktop-header .main-header-menu > li.menu-item { white-space: nowrap; flex: 0 0 auto; }
    /* el desplazamiento se aplica a cada ítem (no al <ul>) para no arrastrar el selector de idioma */
    #ast-desktop-header .main-header-menu > li.menu-item:not(.lang-sw) { transform: translateX(var(--menu-shift, 0px)); }
    #ast-desktop-header .main-header-menu > li.menu-item:nth-child(3) { margin-right: calc(var(--logo-gap) / 2); }
    #ast-desktop-header .main-header-menu > li.menu-item:nth-child(4) { margin-left: calc(var(--logo-gap) / 2); }
    /* el selector de idioma debe anclarse a la fila del header (no a un contenedor intermedio) */
    #ast-desktop-header .site-header-primary-section-right,
    #ast-desktop-header .ast-builder-menu-1,
    #ast-desktop-header .ast-builder-menu-1 .ast-main-header-bar-alignment,
    #ast-desktop-header .ast-builder-menu-1 .main-header-bar-navigation,
    #ast-desktop-header .main-header-menu { position: static !important; }
    /* selector de idioma: esquina derecha, fuera del reparto */
    #ast-desktop-header .main-header-menu > li.lang-sw {
        position: absolute; right: clamp(8px, 1.6vw, 28px); top: 50%; transform: translateY(-50%); margin: 0 !important;
    }
}
/* Móvil/tablet: logo al centro, idioma + hamburguesa a la derecha */
@media (max-width: 921px) {
    #ast-mobile-header .ast-primary-header-bar .site-primary-header-wrap,
    #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row {
        position: static; height: 72px; min-height: 72px; margin: 0; padding-top: 0; padding-bottom: 0; align-items: center;
    }
    #ast-mobile-header .site-header-primary-section-left {
        position: absolute; left: 50%; top: calc(50% + 2px); transform: translate(-50%, -50%); width: auto;
    }
    #ast-mobile-header .site-branding,
    #ast-mobile-header .ast-site-identity { padding: 0 !important; margin: 0 !important; }
    #ast-mobile-header .ast-primary-header-bar .ast-builder-grid-row { grid-template-columns: 1fr !important; }
    #ast-mobile-header .site-header-primary-section-right { justify-self: end; margin-left: auto; align-items: center; }
}

/* === Submenús: texto largo (2026-09-30) ===
   `white-space: nowrap` de los ítems de primer nivel se heredaba dentro de los submenús y los títulos largos
   ("Encuentro internacional de sobrevivientes de violencia ocular") se salían de la caja (216px fijos).
   Ahora el submenú tiene ancho razonable, el texto salta de línea y nunca supera el ancho de pantalla. */
#ast-desktop-header .main-header-menu .sub-menu {
    white-space: normal !important;
    width: max-content !important;
    min-width: 200px;
    max-width: min(300px, calc(100vw - 32px)) !important;
    box-sizing: border-box;
}
#ast-desktop-header .main-header-menu .sub-menu > li { width: 100%; }
#ast-desktop-header .main-header-menu .sub-menu a {
    white-space: normal !important;
    overflow-wrap: break-word;
    line-height: 1.35 !important;
    width: 100%; box-sizing: border-box;
}
/* submenús de los dos últimos ítems (Nosotros, Apóyanos): alineados al borde derecho del ítem */
#ast-desktop-header .main-header-menu > li:nth-last-child(-n+3):not(.lang-sw) > .sub-menu { left: auto !important; right: 0 !important; }
/* submenús de 3.er nivel de los ítems del extremo derecho: se abren hacia la izquierda para no salirse */
#ast-desktop-header .main-header-menu > li:nth-last-child(-n+3):not(.lang-sw) .sub-menu .sub-menu {
    left: auto !important; right: 100% !important;
}

/* === Tipografía unificada (2026-09-30) ===
   Sistema: títulos = Playfair Display · texto = Open Sans · menú del header = Parkinsans (tipografía de navegación).
   Había páginas con Arial (tablas), Bebas Neue (botones, también en el footer), Impact/Georgia (títulos),
   Times/Spectral (tarjetas de contacto), Courier New y sans-serif (párrafos/footer por un <style> pegado en el
   contenido de la home), y la plantilla de WooCommerce "próximamente" con Cardo/Inter.
   `html body` sube la especificidad para ganar a <style> embebidos y a los estilos inline de WooCommerce.
   Se excluyen span/i/div (los iconos dependen de su propio font-family) y el menú principal del header. */
:root {
    --ciivo-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ciivo-font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
html body { font-family: var(--ciivo-font-body) !important; }
html body :where(main, .wp-site-blocks, .site-footer) :where(h1, h2, h3, h4, h5, h6),
html body .uagb-ifb-title, html body .titulo-ciivo, html body .has-cardo-font-family {
    font-family: var(--ciivo-font-head) !important;
}
html body :where(main, .wp-site-blocks, .site-footer) :where(p, li, a, td, th, caption, blockquote, figcaption, label, input, textarea, select, button),
html body :where(.skip-link, .ast-breadcrumbs-wrapper a, #ast-breadcrumbs-yoast),
html body .uagb-ifb-desc, html body .boton-objetivo, html body [class^="noticia-"], html body [class*=" noticia-"], html body .norma-caption, html body .metaslider :where(li, .caption, .caption-wrap, a),
html body .has-inter-font-family, html body .has-parkinsans-font-family {
    font-family: var(--ciivo-font-body) !important;
}
/* Menú móvil desplegado: misma tipografía de navegación que el escritorio (antes caía en Verdana) */
html body .main-header-bar-navigation .menu-link,
html body #ast-mobile-header .main-header-menu a,
html body .ast-mobile-header-content .menu-link { font-family: Parkinsans, sans-serif !important; }