/**
 * Header global — mejoras de responsive, redes sociales e idioma.
 *
 * Se carga en todo el sitio DESPUÉS de main.min.css y solo corrige/añade:
 * no se ha tocado el CSS compilado del tema. Unidades: 1rem = 10px.
 *
 *  ≥ 1200px  menú en UNA sola fila (logos | menú | Enroll · Login · idioma);
 *            1200–1699 compacto y Login/idioma solo icono, 1200–1399 aún más.
 *  < 1200px  panel: pantalla completa en móvil, cajón lateral en tableta,
 *            menú arriba (Living Atlas plegado) y al pie Enroll · Login,
 *            idioma y redes.
 *
 * El selector de idioma es un componente Vue (vue-select) con lógica de SSO:
 * aquí solo se le da estilo, su marcado y su JS no cambian.
 */

:root {
    --hdr-deep: #184a4e;
    --hdr-deeper: #0f3538;
    --hdr-mint: #6be49b;
    --hdr-mint-soft: #e1faeb;
    --hdr-green: #24a888;
    --hdr-line: #dfe7e4;
    --hdr-muted: #4f6b6d;
    --hdr-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ======================================================================
   Redes sociales (header y footer)
   ====================================================================== */

.social-icons { display: flex; align-items: center; gap: .8rem; }

.c-global-header .social-icons__link {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    align-items: center;
    justify-content: center;
    border: .15rem solid var(--hdr-line);
    border-radius: 50%;
    color: var(--hdr-deep);
    font-size: 1.6rem;
    line-height: 1;
    transition: background-color .2s var(--hdr-ease), border-color .2s var(--hdr-ease), color .2s var(--hdr-ease), transform .2s var(--hdr-ease);
}
.c-global-header .social-icons__link:hover {
    border-color: var(--hdr-deep);
    background: var(--hdr-deep);
    color: var(--hdr-mint);
    transform: translateY(-.2rem);
}
.c-global-header .social-icons__link:focus-visible,
.c-global-footer .social-icons__link:focus-visible {
    outline: .3rem solid var(--hdr-green);
    outline-offset: .2rem;
}
.social-icons__svg { display: block; width: 1.5rem; height: 1.5rem; fill: currentColor; }
.social-icons__link svg.svg-inline--fa { width: 1.6rem; height: 1.6rem; }

/* ======================================================================
   Selector de idioma (vue-select .c-select--languages)
   ====================================================================== */

.c-global-header .c-select--languages { min-width: 15rem; }
.c-global-header .c-select--languages .vs__dropdown-toggle {
    position: relative;
    min-height: 4rem;
    padding: 0 0 0 3.6rem;
    border: .15rem solid var(--hdr-line);
    border-radius: 2rem;
    background: #fff;
    transition: border-color .2s var(--hdr-ease), box-shadow .2s var(--hdr-ease);
}
/* Globo: el icono universal de «idioma». Archivo del tema, no data: URI:
   la CSP img-src de ES/PT/IT/FR no permite data: (solo la de EN). */
.c-global-header .c-select--languages .vs__dropdown-toggle::before {
    content: "";
    position: absolute;
    left: 1.3rem;
    top: 50%;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: -.8rem;
    background: url("../svg/globe.svg") center / contain no-repeat;
    pointer-events: none;
}
.c-global-header .c-select--languages .vs__dropdown-toggle::after { display: none; } /* línea decorativa del tema */
.c-global-header .c-select--languages:hover .vs__dropdown-toggle { border-color: var(--hdr-deep); }
.c-global-header .c-select--languages.vs--open .vs__dropdown-toggle {
    border-color: var(--hdr-deep);
    box-shadow: 0 0 0 .3rem rgb(107 228 155 / .45);
}
.c-global-header .c-select--languages .vs__selected-options { margin: 0; padding: 0; align-items: center; }
.c-global-header .c-select--languages .vs__selected {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--hdr-deep);
}
.c-global-header .c-select--languages .vs__search { margin: 0; padding: 0; }
.c-global-header .c-select--languages .vs__actions { padding: 0 1.2rem 0 .6rem; }
.c-global-header .c-select--languages .vs__open-indicator { transition: transform .25s var(--hdr-ease); }
.c-global-header .c-select--languages .vs__open-indicator .icon { width: 1.2rem; height: 1.2rem; }

.c-global-header .c-select--languages .vs__dropdown-menu {
    top: calc(100% + .8rem);
    min-width: 100%;
    padding: .6rem;
    border: 0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.8rem 3.6rem -1.2rem rgb(24 74 78 / .4), 0 0 0 .1rem var(--hdr-line);
}
.c-global-header .c-select--languages .vs__dropdown-option {
    position: relative;
    padding: 1rem 3.2rem 1rem 1.2rem;
    border-radius: .6rem;
    font-size: 1.5rem;
    color: var(--hdr-deep);
    white-space: nowrap;
}
.c-global-header .c-select--languages .vs__dropdown-option--highlight { background: var(--hdr-mint-soft); color: var(--hdr-deep); }
.c-global-header .c-select--languages .vs__dropdown-option--selected { font-weight: 700; }
.c-global-header .c-select--languages .vs__dropdown-option--selected::after {
    /* marca del idioma activo */
    content: "";
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: .6rem;
    height: 1.1rem;
    margin-top: -.7rem;
    border-right: .2rem solid var(--hdr-green);
    border-bottom: .2rem solid var(--hdr-green);
    transform: rotate(45deg);
}

/* ======================================================================
   Botones Enroll / Login del header
   ====================================================================== */

.c-global-header .o-btn--global-header {
    min-height: 4rem;
    border-radius: .4rem;
    transition: background-color .2s var(--hdr-ease), color .2s var(--hdr-ease), box-shadow .2s var(--hdr-ease), transform .2s var(--hdr-ease);
}
.c-global-header .o-btn--global-header:focus-visible { outline: .3rem solid var(--hdr-green); outline-offset: .2rem; }

/* ======================================================================
   Botón de menú (hamburguesa): área táctil de 44px y foco visible
   ====================================================================== */

.o-hamburger--global-header {
    min-width: 4.4rem;
    min-height: 4.4rem;
    border-radius: .6rem;
}
.o-hamburger--global-header:focus-visible { outline: .3rem solid var(--hdr-green); outline-offset: .2rem; }

/* ======================================================================
   ≥ 1200px: base de la rejilla (la fila única de más abajo la redefine)
   Fila 1:  redes (izq.)  |  logos (centro exacto)  |  Enroll · Login · idioma (der.)
   Fila 2:  menú centrado, sobre una línea divisoria
   Las columnas laterales son 1fr: los logos quedan centrados aunque redes y
   acciones no midan lo mismo. Al fijarse (is-sticky) pasa a una sola fila.
   ====================================================================== */


@media screen and (min-width: 1200px) {
    .c-global-header__container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "social logos actions"
            "nav    nav   nav";
        align-items: center;
        column-gap: 3.2rem;
        max-width: 136rem;
        margin: 0 auto;
        padding: 1.6rem 4rem 0;
    }
    .c-global-header__lower { display: contents; }

    /* Logos: centrados, con una línea fina entre Laudato Si' y el Dicasterio. */
    .c-global-header__upper { grid-area: logos; justify-self: center; margin: 0; padding: 0; }
    .c-global-header__logos { gap: 2.4rem; }
    .c-global-header .c-global-header__logo { margin: 0; }
    .c-global-header__logo .o-logo { max-height: 5.6rem; }
    .c-global-header__logo--dicastery {
        display: flex;
        align-items: center;
        min-height: 4.8rem;
        padding-left: 2.4rem;
        border-left: .1rem solid var(--hdr-line);
    }
    .c-global-header__logo--dicastery .o-logo { max-height: 4.4rem; }

    .c-global-header__social { grid-area: social; justify-self: start; }

    .c-global-header__actions {
        grid-area: actions;
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 1.2rem;
        margin: 0;
        order: 0;
    }
    .c-global-header__actions .c-global-header__actions__col { display: flex; align-items: center; margin: 0; }

    /* Menú: centrado, mismo espacio entre todos los ítems. */
    .c-global-header__navigation {
        grid-area: nav;
        margin-top: 1.4rem;
        padding: 0;
        border-top: .1rem solid var(--hdr-line);
    }
    .c-primary-navigation__list { justify-content: center; gap: 3.6rem; padding-top: 1.2rem; }
    .c-primary-navigation .c-primary-navigation__item:not(:last-child) { margin: 0; }
    .c-primary-navigation .c-primary-navigation__item { font-size: 1.6rem; }

}

/* ======================================================================
   < 1200px: panel del menú
   ====================================================================== */

@media screen and (max-width: 1199px) {
    /* El tema cambia de layout en 1312px; desde aquí se recompone el panel. */
    .c-global-header__lower {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 500;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: 9.2rem 2rem 2.4rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transform: translateX(4%);
        transition: opacity .3s var(--hdr-ease), transform .35s var(--hdr-ease), visibility 0s .35s;
    }
    .menu-is-active .c-global-header__lower {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity .3s var(--hdr-ease), transform .35s var(--hdr-ease), visibility 0s 0s;
    }
    .c-global-header.is-sticky .c-global-header__lower { padding-top: 7.6rem; }

    /* La barra superior (logos + botón) queda siempre por encima del panel. */
    .c-global-header__upper { position: relative; z-index: 600; align-items: center; justify-content: space-between; }

    /* Orden del DOM = orden visual: menú → acciones → idioma (al pie). */
    .c-global-header__navigation { padding: 0 0 2.4rem; }
    .c-global-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding-top: 2.4rem; border-top: .1rem solid var(--hdr-line); }
    .hide-language-selector-desktop { margin-top: 2rem; }
    .c-global-header__actions__col + .c-global-header__actions__col { margin: 0; }

    /* Ítems del menú: filas táctiles con separador y flecha. */
    .c-primary-navigation { font-size: 2.2rem; line-height: 1.2; }
    .c-primary-navigation__item:not(:last-child) { margin: 0; }
    .c-primary-navigation__item { border-bottom: .1rem solid var(--hdr-line); }
    .c-primary-navigation__item__link {
        position: relative;
        min-height: 5.6rem;
        padding: 1.4rem 3.2rem 1.4rem 0;
        color: var(--hdr-deep);
        transition: color .2s, padding-left .25s var(--hdr-ease);
    }
    .c-primary-navigation__item > .c-primary-navigation__item__link::before {
        content: "";
        position: absolute;
        right: .6rem;
        top: 50%;
        width: .8rem;
        height: .8rem;
        margin-top: -.5rem;
        border-right: .2rem solid var(--hdr-green);
        border-top: .2rem solid var(--hdr-green);
        transform: rotate(45deg);
        transition: right .25s var(--hdr-ease);
    }
    .c-primary-navigation__item__link:hover,
    .c-primary-navigation__item__link:focus-visible { color: var(--hdr-green); padding-left: .6rem; }
    .c-primary-navigation__item__link:hover::before { right: .2rem; }
    .c-primary-navigation__item__link:after { display: none; } /* subrayado de escritorio */
    .c-primary-navigation__item.is-current > .c-primary-navigation__item__link,
    .c-primary-navigation__item.current-menu-item > .c-primary-navigation__item__link { color: var(--hdr-green); }
    .c-primary-navigation .target { display: none; }

    /* Submenú (The Living Atlas) dentro del panel */
    .c-primary-navigation .menu-item-atlas > .c-primary-navigation__item__link::before { transform: rotate(135deg); margin-top: -.7rem; }
    .c-primary-navigation .menu-item-atlas .sub-menu { margin: 0 0 1.6rem; }

    /* Enroll / Login: botones grandes, lado a lado. */
    .c-global-header__actions__col--register,
    .c-user-menu__trigger-ico--nologin { flex: 1 1 14rem; }
    .c-global-header__actions .o-btn--global-header { display: flex; width: 100%; min-height: 4.8rem; justify-content: center; font-size: 1.6rem; }
    .c-global-header__social { padding-top: 2rem; }
    .c-global-header__social .social-icons { justify-content: flex-start; }
    .c-global-header__social .social-icons::before {
        content: "Follow us";
        margin-right: .4rem;
        font-family: "Roboto Condensed", Roboto, Helvetica, Arial, sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--hdr-muted);
    }

    /* Idioma: ancho completo con su etiqueta. */
    .hide-language-selector-desktop .c-select--languages { width: 100%; }
    .hide-language-selector-desktop .c-select--languages .vs__dropdown-toggle { min-height: 4.8rem; border-radius: .8rem; }
    .hide-language-selector-desktop .c-select--languages .vs__dropdown-menu { left: 0; right: 0; top: auto; bottom: calc(100% + .8rem); } /* abre hacia arriba: está al pie */

    /* Fondo bloqueado mientras el panel está abierto. */
    body.menu-is-active { overflow: hidden; }
}

/* Tableta: cajón lateral con velo sobre la página. */
@media screen and (min-width: 700px) and (max-width: 1199px) {
    .c-global-header__lower {
        width: min(46rem, 100%);
        box-shadow: 0 0 0 100vmax rgb(15 53 56 / 0), -2rem 0 4rem -2rem rgb(15 53 56 / .35);
        transform: translateX(100%);
        transition: transform .4s var(--hdr-ease), box-shadow .4s var(--hdr-ease), visibility 0s .4s;
        opacity: 1;
    }
    .menu-is-active .c-global-header__lower {
        box-shadow: 0 0 0 100vmax rgb(15 53 56 / .45), -2rem 0 4rem -2rem rgb(15 53 56 / .35);
        transform: none;
        transition: transform .4s var(--hdr-ease), box-shadow .4s var(--hdr-ease), visibility 0s 0s;
    }
    .c-global-header__lower { padding-top: 2.4rem; }
    .c-global-header.is-sticky .c-global-header__lower { padding-top: 2.4rem; }
    /* En el cajón la barra de logos no lo tapa: el botón de cierre va dentro. */
    /* Sin contexto de apilamiento propio: así la X (fixed, z 700) puede quedar
       por encima del cajón (z 500) aunque viva dentro de la barra de logos. */
    .menu-is-active .c-global-header__upper { z-index: auto; }
    .menu-is-active .o-hamburger--global-header {
        position: fixed;
        top: 1.6rem;
        right: 1.6rem;
        z-index: 700;
        margin: 0;
        transform: none; /* el tema lo centra con translateY(-50%) en la barra */
        background: #fff;
    }
    .c-global-header__lower::before {
        content: "Menu";
        display: block;
        min-height: 4.4rem;
        margin-bottom: 1.2rem;
        font-family: "Roboto Condensed", Roboto, Helvetica, Arial, sans-serif;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: .12em;
        line-height: 4.4rem;
        text-transform: uppercase;
        color: var(--hdr-muted);
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-global-header__lower,
    .menu-is-active .c-global-header__lower,
    .social-icons__link { transition: none !important; }
}

/* Etiquetas del panel en el idioma de cada blog (lang del <html>). */
@media screen and (max-width: 1199px) {
    :lang(es) .c-global-header__social .social-icons::before { content: "Síguenos"; }
    :lang(pt) .c-global-header__social .social-icons::before { content: "Siga-nos"; }
    :lang(it) .c-global-header__social .social-icons::before { content: "Seguici"; }
    :lang(fr) .c-global-header__social .social-icons::before { content: "Suivez-nous"; }
}
@media screen and (min-width: 700px) and (max-width: 1199px) {
    :lang(es) .c-global-header__lower::before { content: "Menú"; }
}

/* style.css del tema añade, hasta 1312px, un margen a Enroll y relleno a las
   redes pensados para el panel antiguo; con el nuevo layout desalinean. */
@media screen and (max-width: 1311px) {
    .c-global-header__actions__col--register { margin-top: 0; }
    .c-global-header .social-icons { padding: 0; margin-right: 0; }
}

/* Subrayado del menú en escritorio. El del tema (.target) es un solo trazo
   que su JS mueve calculando posiciones para el menú alineado a la derecha;
   con el menú centrado quedaba descolocado. Cada enlace lleva el suyo. */
@media screen and (min-width: 1200px) {
    .c-primary-navigation .target { display: none; }
    .c-primary-navigation .c-primary-navigation__item__link { position: relative; }
    .c-primary-navigation .c-primary-navigation__item__link::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: .3rem;
        border-radius: .3rem;
        background: #ff9977;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .3s var(--hdr-ease);
    }
    .c-primary-navigation .c-primary-navigation__item__link:hover::after,
    .c-primary-navigation .c-primary-navigation__item__link:focus-visible::after,
    .c-primary-navigation .is-current > .c-primary-navigation__item__link::after,
    .c-primary-navigation .current-menu-item > .c-primary-navigation__item__link::after,
    .c-primary-navigation .current-menu-ancestor > .c-primary-navigation__item__link::after { transform: scaleX(1); }
    /* La flecha del ítem del atlas queda fuera del subrayado. */
    .c-primary-navigation .menu-item-atlas > .c-primary-navigation__item__link::after { right: 1.8rem; }

    /* Botones en una línea (en ES/PT/FR los textos son más largos). */
    .c-global-header__actions .o-btn--global-header,
    .c-global-header__actions a { white-space: nowrap; }
}

/* ======================================================================
   Navbar moderno (oct 2026)
   - Translúcido con desenfoque al fijarse; compacto en una fila que mantiene
     Enroll, Login e idioma a mano (ver «Header fijado» más abajo).
   - Ítems en «píldora»; página actual marcada.
   - Enroll: CTA principal en píldora, flecha en círculo menta, brillo al
     pasar y «hundido» al pulsar. Login: secundario con icono de usuario.
   - Todos los controles de la fila a 44px de alto (objetivo táctil mínimo).
   ====================================================================== */

.c-global-header {
    transition: transform .35s var(--hdr-ease), background-color .3s ease, box-shadow .3s ease, min-height .5s ease;
}
.c-global-header.is-sticky {
    background-color: rgb(255 255 255 / .86);
    -webkit-backdrop-filter: blur(1.6rem) saturate(160%);
    backdrop-filter: blur(1.6rem) saturate(160%);
    box-shadow: 0 .1rem 0 rgb(24 74 78 / .08), 0 1rem 3rem -2rem rgb(24 74 78 / .35);
}
.c-global-header.is-sticky .c-global-header__upper { background: transparent; }

/* ---------- Botones de acción (Enroll / Login / cuenta) ---------- */

.c-global-header .o-btn--global-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 4.4rem;
    margin: 0;
    border-radius: 99rem;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.c-global-header .o-btn--global-header .o-btn__label { position: relative; z-index: 1; }

/* Enroll — principal */
.c-global-header .o-btn--cta {
    position: relative;
    overflow: hidden;
    padding: .5rem .5rem .5rem 2.2rem;
    border: 0;
    background: var(--hdr-deep);
    color: #fff;
    box-shadow: inset 0 .1rem 0 rgb(255 255 255 / .14), 0 .8rem 2rem -1rem rgb(24 74 78 / .7);
    transition: background-color .25s var(--hdr-ease), box-shadow .25s var(--hdr-ease), transform .15s var(--hdr-ease);
}
.c-global-header .o-btn--cta::after {
    /* brillo que cruza el botón al pasar el ratón */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .22) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .7s var(--hdr-ease);
    pointer-events: none;
}
.c-global-header .o-btn--cta:hover { background: var(--hdr-deeper); color: #fff; box-shadow: inset 0 .1rem 0 rgb(255 255 255 / .14), 0 1.2rem 2.6rem -1rem rgb(24 74 78 / .8); }
.c-global-header .o-btn--cta:hover::after { transform: translateX(120%); }
.c-global-header .o-btn--cta:active { transform: scale(.97); }
.o-btn__chip {
    position: relative;
    z-index: 1;
    display: inline-grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    border-radius: 50%;
    background: var(--hdr-mint);
    color: var(--hdr-deep);
    transition: transform .3s var(--hdr-ease);
}
.o-btn__chip svg { transition: transform .3s var(--hdr-ease); }
.c-global-header .o-btn--cta:hover .o-btn__chip svg { transform: translateX(.2rem); }
.c-global-header .o-btn--cta:hover .o-btn__chip { transform: rotate(-8deg) scale(1.05); }

/* Login — secundario */
.c-global-header .o-btn--login {
    padding: 0 2rem 0 1.4rem;
    border: .15rem solid var(--hdr-line);
    background: #fff;
    color: var(--hdr-deep);
    transition: border-color .2s var(--hdr-ease), background-color .2s var(--hdr-ease), color .2s, transform .15s var(--hdr-ease);
}
.c-global-header .o-btn--login:hover { border-color: var(--hdr-deep); background: var(--hdr-mint-soft); color: var(--hdr-deep); }
.c-global-header .o-btn--login:active { transform: scale(.97); }
.o-btn__lead { flex-shrink: 0; color: var(--hdr-green); }

/* Cuenta (con sesión iniciada): misma píldora que Login */
.c-global-header .c-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    min-height: 4.4rem;
    padding: 0 1.6rem 0 .6rem;
    border: .15rem solid var(--hdr-line);
    border-radius: 99rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.c-global-header .c-user-menu__trigger:hover { border-color: var(--hdr-deep); background: var(--hdr-mint-soft); }
.c-global-header .c-user-menu__trigger-icon { display: inline-flex; align-items: center; gap: .2rem; padding: .6rem .8rem; border-radius: 99rem; background: var(--hdr-deep); }

.c-global-header .o-btn--global-header:focus-visible,
.c-global-header .c-user-menu__trigger:focus-visible {
    outline: .3rem solid var(--hdr-mint);
    outline-offset: .3rem;
}

/* Fila de acciones: misma altura para redes, botones e idioma. */
.c-global-header .c-select--languages .vs__dropdown-toggle { min-height: 4.4rem; }
.c-global-header .social-icons__link { width: 4.4rem; height: 4.4rem; border-color: transparent; background: #f2f6f4; }
.c-global-header .social-icons__link:hover { border-color: var(--hdr-deep); }

/* ---------- Ítems del menú en píldora (escritorio) ---------- */
@media screen and (min-width: 1200px) {
    .c-primary-navigation__list { gap: .4rem; }
    .c-primary-navigation .c-primary-navigation__item__link {
        padding: 1rem 1.6rem;
        border-radius: 99rem;
        transition: background-color .2s var(--hdr-ease), color .2s var(--hdr-ease);
    }
    .c-primary-navigation .c-primary-navigation__item__link::after { display: none; }
    .c-primary-navigation .c-primary-navigation__item__link:hover,
    .c-primary-navigation .c-primary-navigation__item__link:focus-visible { background: var(--hdr-mint-soft); color: var(--hdr-deep); outline: none; }
    .c-primary-navigation .c-primary-navigation__item__link:focus-visible { box-shadow: 0 0 0 .3rem var(--hdr-mint); }
    .c-primary-navigation .is-current > .c-primary-navigation__item__link,
    .c-primary-navigation .current-menu-item > .c-primary-navigation__item__link,
    .c-primary-navigation .current-menu-ancestor > .c-primary-navigation__item__link {
        background: var(--hdr-deep);
        color: #fff;
    }
    /* Flecha del ítem del atlas dentro de la píldora */
    .c-primary-navigation .menu-item-atlas > .c-primary-navigation__item__link { padding-right: 3.8rem; }

    .c-global-header__navigation { margin-top: 1.2rem; }
    .c-primary-navigation__list { padding-top: .8rem; padding-bottom: .8rem; }
    .c-global-header.is-sticky .c-primary-navigation__list { padding-block: 0; }
}

/* ---------- Panel móvil: botones grandes ---------- */
@media screen and (max-width: 1199px) {
    .c-global-header__actions .o-btn--global-header { min-height: 5.2rem; font-size: 1.6rem; }
    .c-global-header__actions .o-btn--cta { justify-content: space-between; padding-left: 2.4rem; }
    .c-global-header__actions .o-btn--cta .o-btn__chip { width: 4.2rem; height: 4.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .c-global-header,
    .c-global-header .o-btn--cta::after,
    .o-btn__chip,
    .o-btn__chip svg { transition: none !important; }
}

/* Ajustes finos */
.c-global-header .o-btn--global-header,
.c-global-header .o-btn--global-header .o-btn__label { text-shadow: none; }
/* Roboto solo está cargada en 300/400/500: un peso mayor se sintetiza (borroso). */
.c-global-header .o-btn--global-header { font-weight: 500; font-synthesis: none; }
.c-global-header .o-btn--cta .o-btn__label { letter-spacing: .02em; }
@media screen and (min-width: 1200px) {
    .c-global-header.is-sticky .c-primary-navigation__list { gap: .4rem; }
}

/* ======================================================================
   Header en UNA sola fila (todas las páginas, ≥ 1200px)
   logos | menú | Enroll · Login · idioma. Al fijarse solo se compacta.
   El tema oculta las acciones al fijarse (main.min.css y style.css); aquí
   se recuperan. Las redes salen del header de escritorio: están en el
   footer y en el panel móvil.
   Para que quepa: Enroll conserva el texto (acción principal); Login e
   idioma pasan a botón redondo de icono hasta 1600px, con nombre accesible.
   ====================================================================== */
@media screen and (min-width: 1200px) {
    .c-global-header .c-global-header__container {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "logos nav actions";
        column-gap: 2.4rem;
        padding: 1.4rem 4rem;
    }
    .c-global-header.is-sticky .c-global-header__container { padding-block: .8rem; }
    .c-global-header .c-global-header__upper { justify-self: start; }
    .c-global-header .c-global-header__social { display: none; }
    .c-global-header .c-global-header__container .c-global-header__actions,
    .c-global-header.is-sticky .c-global-header__container .c-global-header__actions { display: flex; }
    .c-global-header .c-global-header__navigation { margin: 0; border: 0; }
    .c-global-header .c-primary-navigation__list { justify-content: center; padding-block: 0; gap: .2rem; }
    .c-global-header .c-primary-navigation .c-primary-navigation__item__link { padding: .9rem 1.2rem; }
    .c-global-header .c-primary-navigation .menu-item-atlas > .c-primary-navigation__item__link { padding-right: 3.4rem; }
    .c-global-header .c-primary-navigation .menu-item-atlas::before { right: 1.4rem; }
    .c-global-header .c-primary-navigation .c-primary-navigation__item { font-size: 1.5rem; }

    .c-global-header .c-global-header__logo .o-logo { max-height: 5rem; }
    .c-global-header.is-sticky .c-global-header__logo .o-logo { max-height: 4rem; }
    .c-global-header .c-global-header__logos { gap: 1.6rem; }
    .c-global-header .c-global-header__logo--dicastery { min-height: 3.6rem; padding-left: 1.6rem; }
    .c-global-header .c-global-header__logo--dicastery .o-logo { max-height: 3.8rem; }
    .c-global-header.is-sticky .c-global-header__logo--dicastery .o-logo { max-height: 3.2rem; }

    .c-global-header .c-global-header__actions { gap: .8rem; }
}

@media screen and (min-width: 1200px) and (max-width: 1699px) {
    /* Login: solo el icono (el texto sigue ahí para lectores de pantalla). */
    .c-global-header .o-btn--login { width: 4.4rem; padding: 0; gap: 0; }
    .c-global-header .o-btn--login .o-btn__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .c-global-header .o-btn--login .o-btn__lead { color: var(--hdr-deep); }

    /* Idioma: globo + flecha; el nombre del idioma queda en la lista. */
    .c-global-header .hide-language-selector-mobile .c-select--languages { min-width: 0; }
    .c-global-header .hide-language-selector-mobile .vs__dropdown-toggle { width: 7.2rem; padding-left: 3.4rem; }
    .c-global-header .hide-language-selector-mobile .vs__selected-options {
        width: 0;
        overflow: hidden;
        flex: 0 0 0;
    }
    .c-global-header .hide-language-selector-mobile .vs__actions { padding-left: 0; }
    .c-global-header .hide-language-selector-mobile .vs__dropdown-menu { right: 0; left: auto; min-width: 16rem; }

    /* Enroll algo más compacto */
    .c-global-header .o-btn--cta { padding-left: 1.8rem; }
}

/* ---------- Ajustes de la fila única y del panel ---------- */

/* Los textos de los ítems nunca se parten (QUIENES / SOMOS). */
.c-primary-navigation__item__link { white-space: nowrap; }

@media screen and (min-width: 1200px) {
    .c-global-header__container { max-width: 168rem; padding-inline: 3.2rem; }
}
/* 1200–1699: menú compacto para que ES/PT/FR quepan sin cortar. */
@media screen and (min-width: 1200px) and (max-width: 1699px) {
    .c-global-header .c-primary-navigation .c-primary-navigation__item { font-size: 1.4rem; }
    .c-global-header .c-primary-navigation .c-primary-navigation__item__link { padding: .8rem 1rem; }
    .c-global-header .c-primary-navigation .menu-item-atlas > .c-primary-navigation__item__link { padding-right: 3rem; }
    .c-global-header .c-primary-navigation .menu-item-atlas::before { right: 1.2rem; }
    .c-global-header .c-global-header__container { column-gap: 1.6rem; }
}

/* 1200–1399 (portátiles): aún más compacto. Medido para que quepan los textos
   completos de ES/PT/FR sin cortar ni solaparse. */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .c-global-header .c-primary-navigation .c-primary-navigation__item { font-size: 1.3rem; }
    .c-global-header .c-primary-navigation .c-primary-navigation__item__link { padding: .8rem .8rem; }
    .c-global-header .c-primary-navigation .menu-item-atlas > .c-primary-navigation__item__link { padding-right: 2.6rem; }
    .c-global-header .c-primary-navigation .menu-item-atlas::before { right: 1rem; }
    .c-global-header .c-global-header__container { column-gap: 1.2rem; padding-inline: 2rem; }
    .c-global-header .c-global-header__logo .o-logo { max-height: 4.2rem; }
    .c-global-header .c-global-header__logos { gap: 1.2rem; }
    .c-global-header .c-global-header__logo--dicastery { padding-left: 1.2rem; }
    .c-global-header .c-global-header__logo--dicastery .o-logo { max-height: 3.2rem; }
    .c-global-header .o-btn--cta { padding-left: 1.4rem; font-size: 1.4rem; }
    .c-global-header .o-btn__chip { width: 3rem; height: 3rem; }
}

/* 1200–1311: el tema aún aplica su panel móvil (hasta 1312px); se deshace. */
@media screen and (min-width: 1200px) and (max-width: 1311px) {
    .o-hamburger--global-header,
    .hide-language-selector-desktop { display: none; }
    .hide-language-selector-mobile { display: block; }
    .c-global-header__lower {
        position: static;
        height: auto;
        padding: 0;
        overflow: visible;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        background: transparent;
    }
    .c-primary-navigation { line-height: 1.3; }
    .c-primary-navigation__list { display: flex; }
    .c-primary-navigation__item__link .icon { display: none; }
    .c-user-menu__trigger-icon,
    .c-user-menu__trigger-ico--nologin { display: block; margin-right: 0; }
}
/* ======================================================================
   Panel móvil compacto (< 1200px)
   ====================================================================== */

/* Enroll en la barra superior: solo en tablet; en escritorio está en la fila. */
.c-global-header__quick-enroll { display: none; }
@media screen and (min-width: 600px) and (max-width: 1199px) {
    .c-global-header__upper { align-items: center; gap: 1.2rem; }
    .c-global-header .c-global-header__quick-enroll { display: inline-flex; margin-left: auto; font-size: 1.4rem; padding-left: 1.6rem; }
    .c-global-header .c-global-header__quick-enroll .o-btn__chip { width: 3rem; height: 3rem; }
    .menu-is-active .c-global-header__quick-enroll { visibility: hidden; }
}

@media screen and (max-width: 1199px) {
    /* Filas más bajas */
    .c-global-header .c-primary-navigation { font-size: 1.8rem; }
    .c-global-header .c-primary-navigation__item__link { min-height: 4.8rem; padding: 1.1rem 3.2rem 1.1rem 0; }

    /* «The Living Atlas»: enlace + botón de flecha en la misma fila */
    .c-global-header .c-primary-navigation .menu-item-atlas.has-subtoggle {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .c-global-header .c-primary-navigation .menu-item-atlas.has-subtoggle > .c-primary-navigation__item__link { padding-right: 0; }
    .c-global-header .c-primary-navigation .menu-item-atlas.has-subtoggle > .c-primary-navigation__item__link::before { display: none; }
    .c-atlas-subtoggle {
        display: inline-grid;
        width: 4.4rem;
        height: 4.4rem;
        place-items: center;
        margin-right: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--hdr-green);
        cursor: pointer;
        transition: background-color .2s, transform .25s var(--hdr-ease);
    }
    .c-atlas-subtoggle:hover { background: var(--hdr-mint-soft); }
    .c-atlas-subtoggle:focus-visible { outline: .3rem solid var(--hdr-mint); outline-offset: .1rem; }
    .c-atlas-subtoggle svg { transition: transform .25s var(--hdr-ease); }
    .is-sub-open > .c-atlas-subtoggle svg { transform: rotate(180deg); }
    .c-global-header .c-primary-navigation .menu-item-atlas.has-subtoggle > .sub-menu {
        display: none;
        grid-column: 1 / -1;
        margin: 0 0 1.2rem;
        padding: .4rem 0 0 1.2rem;
    }
    .c-global-header .c-primary-navigation .menu-item-atlas.is-sub-open > .sub-menu { display: grid; gap: .2rem; }
    .c-global-header .c-atlas-submenu__link { padding: .9rem 1.2rem; border-radius: .8rem; font-size: 1.6rem; }
    .c-global-header .c-atlas-submenu__link:hover { background: var(--hdr-mint-soft); color: var(--hdr-deep); }

    /* Pie del panel: Enroll + Login, y debajo idioma + redes en una fila */
    .c-global-header__lower {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: start;
        column-gap: 1.2rem;
    }
    .c-global-header__navigation { grid-column: 1 / -1; padding-bottom: 1.6rem; }
    .c-global-header__actions { grid-column: 1 / -1; padding-top: 1.6rem; }
    .hide-language-selector-desktop { grid-column: 1; grid-row: 3; align-self: center; margin-top: 1.6rem; }
    .c-global-header__social { grid-column: 2; grid-row: 3; align-self: center; padding-top: 1.6rem; }
    .c-global-header__social .social-icons::before { display: none; }
    .c-global-header__social .social-icons { gap: .6rem; }
    .c-global-header .c-global-header__social .social-icons__link { width: 4.4rem; height: 4.4rem; }
    .hide-language-selector-desktop .c-select--languages .vs__dropdown-toggle { min-height: 4.4rem; border-radius: 99rem; }
    .c-global-header__actions .o-btn--global-header { min-height: 4.8rem; }
}
@media screen and (max-width: 359px) {
    /* Pantallas muy estrechas: redes debajo del idioma */
    .c-global-header__lower { grid-template-columns: minmax(0, 1fr); }
    .c-global-header__social { grid-column: 1; grid-row: 4; }
}

/* Enroll rápido: oculto fuera de tableta (el tema le da display:flex y flex-grow
   con .o-btn--global-header; aquí se gana con más especificidad). */
.c-global-header .c-global-header__upper .c-global-header__quick-enroll { display: none; }
@media screen and (min-width: 600px) and (max-width: 1199px) {
    .c-global-header .c-global-header__upper .c-global-header__quick-enroll {
        display: inline-flex;
        flex: 0 0 auto;
        width: auto;
        margin: 0 0 0 auto;
    }
    .c-global-header .c-global-header__upper .o-hamburger { flex: 0 0 auto; margin-left: 0; }
}

/* El botón del acordeón solo existe en el panel. */
@media screen and (min-width: 1200px) {
    .c-global-header .c-atlas-subtoggle { display: none; }
}

/* Pie del panel: siempre Enroll · Login y debajo idioma + redes. */
@media screen and (max-width: 1199px) {
    .c-global-header .c-global-header__lower .c-global-header__navigation { grid-row: 1; }
    .c-global-header .c-global-header__lower .c-global-header__actions { grid-row: 2; }
    .c-global-header .c-global-header__lower .hide-language-selector-desktop { grid-row: 3; }
    .c-global-header .c-global-header__lower .c-global-header__social { grid-row: 3; }
}
@media screen and (max-width: 359px) {
    .c-global-header .c-global-header__lower .c-global-header__social { grid-row: 4; }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
    /* La hamburguesa del tema va en posición absoluta a la derecha: se le deja sitio. */
    .c-global-header .c-global-header__upper .c-global-header__quick-enroll { margin-right: 5.6rem; }
}
@media screen and (min-width: 700px) and (max-width: 1199px) {
    /* Cajón lateral: la etiqueta «Menu» (::before del panel) arriba, no al final de la rejilla. */
    .c-global-header .c-global-header__lower::before { grid-column: 1 / -1; grid-row: 1; }
    .c-global-header .c-global-header__lower .c-global-header__navigation { grid-row: 2; }
    .c-global-header .c-global-header__lower .c-global-header__actions { grid-row: 3; }
    .c-global-header .c-global-header__lower .hide-language-selector-desktop,
    .c-global-header .c-global-header__lower .c-global-header__social { grid-row: 4; }
}

/* Panel: Enroll · Login SIEMPRE en una fila (dos columnas iguales, sin saltar
   de línea aunque el texto sea largo: «Inscribirse» · «Iniciar sesión»). */
@media screen and (max-width: 1199px) {
    .c-global-header .c-global-header__lower .c-global-header__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        align-items: stretch;
    }
    .c-global-header .c-global-header__actions .c-global-header__actions__col { min-width: 0; margin: 0; padding: 0; width: auto; }
    .c-global-header .c-global-header__actions .hide-language-selector-mobile { display: none; }
    .c-global-header .c-global-header__actions .o-btn--global-header {
        width: 100%;
        min-width: 0;
        min-height: 4.8rem;
        margin: 0;
        justify-content: center;
        gap: .8rem;
        white-space: nowrap;
    }
    .c-global-header .c-global-header__actions .o-btn--cta { justify-content: space-between; padding: 0 .6rem 0 1.8rem; }
    .c-global-header .c-global-header__actions .o-btn--login { padding: 0 1.2rem; }
    .c-global-header .c-global-header__actions .o-btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .c-global-header .c-global-header__actions .o-btn__chip { flex: 0 0 auto; width: 3.6rem; height: 3.6rem; }
}
@media screen and (max-width: 374px) {
    .c-global-header .c-global-header__actions .o-btn--global-header { font-size: 1.4rem; }
    .c-global-header .c-global-header__actions .o-btn--cta { padding-left: 1.4rem; }
    .c-global-header .c-global-header__actions .o-btn__chip { width: 3.2rem; height: 3.2rem; }
}
@media screen and (max-width: 374px) {
    /* Móvil muy estrecho: la flecha del Enroll y el icono de Login ceden su sitio al texto. */
    .c-global-header .c-global-header__actions .o-btn__chip,
    .c-global-header .c-global-header__actions .o-btn--login .o-btn__lead { display: none; }
    .c-global-header .c-global-header__actions .o-btn--cta,
    .c-global-header .c-global-header__actions .o-btn--login { justify-content: center; padding: 0 .8rem; }
    .c-global-header .c-global-header__actions .o-btn--global-header { font-size: 1.4rem; }
}
@media screen and (max-width: 359px) {
    /* Idioma y redes también en una fila: redes algo más pequeñas. */
    .c-global-header .c-global-header__lower { grid-template-columns: minmax(0, 1fr) auto; }
    .c-global-header .c-global-header__lower .c-global-header__social { grid-column: 2; grid-row: 3; }
    .c-global-header .c-global-header__social .social-icons { gap: .4rem; }
    .c-global-header .c-global-header__social .social-icons__link { width: 4rem; height: 4rem; }
}
@media screen and (max-width: 1199px) {
    /* Idioma y redes centrados en la misma línea. */
    .c-global-header .c-global-header__lower .c-global-header__actions { margin-bottom: 2rem; }
    .c-global-header .c-global-header__lower .hide-language-selector-desktop,
    .c-global-header .c-global-header__lower .c-global-header__social { align-self: center; margin: 0; padding: 0; }
    .c-global-header .c-global-header__lower .c-global-header__social .social-icons { margin: 0; padding: 0; align-items: center; }
    .c-global-header .c-global-header__lower .hide-language-selector-desktop .c-global-header__actions__col,
    .c-global-header .c-global-header__lower .hide-language-selector-desktop .c-select--languages { margin: 0; }
}

/* Barra superior < 1200px: logos juntos a la izquierda, tamaño contenido,
   centrados en el mismo eje y separados por un filete fino; nunca bajo la hamburguesa. */
@media screen and (max-width: 1199px) {
    .c-global-header .c-global-header__upper { min-height: 7.2rem; padding-block: 1.2rem; align-items: center; }
    .c-global-header .c-global-header__upper .c-global-header__logos {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        max-width: calc(100% - 6rem);
        margin: 0;
    }
    .c-global-header .c-global-header__logos .c-global-header__logo { display: flex; align-items: center; flex: 0 0 auto; margin: 0; }
    .c-global-header .c-global-header__logos .c-global-header__logo:not(.c-global-header__logo--dicastery) .o-logo {
        width: auto;
        height: 4.4rem;
        max-height: none;
    }
    .c-global-header .c-global-header__logos .c-global-header__logo--dicastery {
        min-height: 3.6rem;
        padding-left: 1.4rem;
        border-left: .1rem solid var(--hdr-line);
    }
    .c-global-header .c-global-header__logos .c-global-header__logo--dicastery .o-logo {
        width: auto;
        height: 3.6rem;
        max-height: none;
    }
}
@media screen and (max-width: 374px) {
    .c-global-header .c-global-header__upper .c-global-header__logos { gap: 1rem; }
    .c-global-header .c-global-header__logos .c-global-header__logo:not(.c-global-header__logo--dicastery) .o-logo { height: 3.8rem; }
    .c-global-header .c-global-header__logos .c-global-header__logo--dicastery { padding-left: 1rem; min-height: 3rem; }
    .c-global-header .c-global-header__logos .c-global-header__logo--dicastery .o-logo { height: 3rem; }
}

/* ======================================================================
   Menú de cuenta (sesión iniciada) entre 1200 y 1311px.
   main.min.css trata ese tramo como panel móvil: fuerza el contenido del
   desplegable abierto con `display: block !important` y lo pinta como un
   bloque gris a todo el ancho. Con el header en una fila (≥1200) el menú
   quedaba abierto dentro de la barra y la inflaba a ~300px en todo el
   sitio. Aquí se recupera el desplegable de escritorio.
   v-show de Vue cierra el menú con style="display: none".
   ====================================================================== */
@media screen and (min-width: 1200px) and (max-width: 1311px) {
    .c-global-header .c-user-menu {
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .c-global-header .c-user-menu .c-toggle__content[style*="display: none"] { display: none !important; }
    .c-global-header .c-user-menu__trigger { margin-bottom: 0; }
    .c-global-header .c-user-menu__trigger-text { display: none; }
    .c-global-header .c-user-menu__trigger-icon { display: inline-flex; }
    .c-global-header .c-user-menu__nav {
        position: absolute;
        top: 100%;
        right: -21px;
        z-index: 700;
        width: 320px;
        margin-top: 16px;
        padding: 24px;
        border: 1px solid #24a888;
        background: #fff;
    }
    .c-global-header .c-user-menu__nav::before {
        content: "";
        position: absolute;
        bottom: 100%;
        right: 24px;
        border-left: 16px solid transparent;
        border-right: 16px solid transparent;
        border-bottom: 12px solid #24a888;
    }
}

/* ======================================================================
   Panel móvil (< 1200px) con sesión iniciada: la cuenta como tarjeta a
   todo el ancho del panel. El tema la pintaba como una caja gris con
   márgenes negativos que, en la fila de acciones, quedaba estrecha.
   En el panel el desplegable va siempre abierto (main.min.css): el botón
   hace de título de la tarjeta.
   ====================================================================== */
@media screen and (max-width: 1199px) {
    .c-global-header .c-global-header__actions__col:has(> .c-user-menu) {
        grid-column: 1 / -1;
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
    .c-global-header .c-user-menu {
        margin: 0;
        padding: 1.6rem 1.6rem .8rem;
        border: .15rem solid var(--hdr-line);
        border-radius: 1.6rem;
        background: #f7faf9;
    }
    .c-global-header .c-user-menu .c-toggle__trigger {
        width: 100%;
        padding: 0;
        border: 0;
        background: none;
        cursor: default;
    }
    .c-global-header .c-user-menu__trigger {
        width: 100%;
        min-height: 0;
        margin-bottom: .8rem;
        padding: 0;
        border: 0;
        background: none;
    }
    .c-global-header .c-user-menu__trigger:hover { background: none; }
    .c-global-header .c-user-menu__trigger-icon svg + svg { display: none; } /* sin chevron: no se pliega */
    .c-global-header .c-user-menu__trigger-text {
        margin-left: 1.2rem;
        font-size: 1.3rem;
        font-weight: 500;
        letter-spacing: .1em;
        color: var(--hdr-deep);
    }
    .c-global-header .c-user-menu__nav { position: static; width: auto; margin: 0; padding: 0; border: 0; background: none; }
    .c-global-header .c-user-menu__nav::before { display: none; }
    .c-global-header .c-user-menu__item { margin: 0; font-size: 1.5rem; }
    .c-global-header .c-user-menu__item:not(:last-child) { margin-bottom: 0; }
    .c-global-header .c-user-menu__item a,
    .c-global-header .c-user-menu__logout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 4.8rem;
        padding: 0;
        border-top: .1rem solid var(--hdr-line);
    }
}

/* ======================================================================
   Menú de cuenta — rediseño (oct 2026)
   Tarjeta con cabecera (iniciales, nombre, correo), opciones con icono,
   página actual marcada y «Logout» separado. Sustituye la caja con borde
   verde, flecha triangular y chevrons naranjas del tema.
   ====================================================================== */
.c-global-header .c-user-menu__head {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .4rem .4rem 1.4rem;
    margin-bottom: .6rem;
    border-bottom: .1rem solid var(--hdr-line);
}
.c-global-header .c-user-menu__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hdr-green), var(--hdr-deep));
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: .04em;
}
.c-global-header .c-user-menu__who { display: grid; min-width: 0; line-height: 1.3; }
.c-global-header .c-user-menu__name {
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--hdr-deep);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.c-global-header .c-user-menu__email {
    overflow: hidden;
    font-size: 1.3rem;
    color: #5d7476;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Opciones */
.c-global-header .c-user-menu__list { margin: 0; padding: 0; }
.c-global-header .c-user-menu__item,
.c-global-header .c-user-menu__item:not(:last-child) { margin: 0; font-size: 1.5rem; }
.c-global-header .c-user-menu__item a,
.c-global-header .c-user-menu__logout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.2rem;
    width: 100%;
    min-height: 4.4rem;
    margin: 0;
    padding: .8rem 1.2rem;
    border: 0;
    border-radius: 1rem;
    background: none;
    color: #23393b;
    font: inherit;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.c-global-header .c-user-menu__ico { flex: none; color: #7b9192; transition: color .15s, transform .2s var(--hdr-ease); }
.c-global-header .c-user-menu__item a:hover,
.c-global-header .c-user-menu__item a:focus-visible { background: var(--hdr-mint-soft); color: var(--hdr-deep); outline: none; }
.c-global-header .c-user-menu__item a:hover .c-user-menu__ico,
.c-global-header .c-user-menu__item a:focus-visible .c-user-menu__ico { color: var(--hdr-green); transform: translateX(.2rem); }
.c-global-header .c-user-menu__item a:focus-visible,
.c-global-header .c-user-menu__logout:focus-visible { box-shadow: inset 0 0 0 .2rem var(--hdr-green); }

/* Página actual */
.c-global-header .c-user-menu__item.current-menu-item > a {
    background: var(--hdr-mint-soft);
    color: var(--hdr-deep);
    font-weight: 500;
}
.c-global-header .c-user-menu__item.current-menu-item > a .c-user-menu__ico { color: var(--hdr-green); }

/* Logout: separado y en tono de aviso, sin gritar */
.c-global-header .c-user-menu__list + .c-user-menu__list {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: .1rem solid var(--hdr-line);
}
.c-global-header .c-user-menu__logout { color: #b8463c; }
.c-global-header .c-user-menu__logout .c-user-menu__ico { color: currentColor; }
.c-global-header .c-user-menu__logout:hover { background: #fdeeec; }

/* ---------- Escritorio: desplegable flotante ---------- */
@media screen and (min-width: 1200px) {
    .c-global-header .c-user-menu__nav {
        position: absolute;
        top: calc(100% + 1rem);
        right: 0;
        z-index: 700;
        width: 30rem;
        margin: 0;
        padding: 1.2rem;
        border: .1rem solid rgb(24 74 78 / .08);
        border-radius: 1.6rem;
        background: #fff;
        box-shadow: 0 .2rem .6rem rgb(16 35 35 / .06), 0 2.4rem 4.8rem -1.2rem rgb(16 35 35 / .28);
        transform-origin: top right;
        transition: opacity .18s ease, transform .22s var(--hdr-ease);
    }
    .c-global-header .c-user-menu__nav::before { display: none; }
    /* Al abrirse (v-show quita display:none) entra con un leve escalado */
    @starting-style {
        .c-global-header .c-user-menu__nav { opacity: 0; transform: translateY(-.6rem) scale(.97); }
    }
    /* Botón con el menú abierto */
    .c-global-header .c-user-menu .c-toggle:has(.c-toggle__content:not([style*="display: none"])) .c-user-menu__trigger {
        border-color: var(--hdr-deep);
        background: var(--hdr-mint-soft);
    }
    .c-global-header .c-user-menu__trigger-icon svg + svg { transition: transform .2s var(--hdr-ease); }
    .c-global-header .c-user-menu .c-toggle:has(.c-toggle__content:not([style*="display: none"])) .c-user-menu__trigger-icon svg + svg { transform: rotate(180deg); }
}

/* ---------- Panel móvil: tarjeta con la misma cabecera ---------- */
@media screen and (max-width: 1199px) {
    .c-global-header .c-user-menu .c-toggle__trigger { display: none; } /* la cabecera ya dice quién es */
    .c-global-header .c-user-menu { padding: 1.2rem; }
    .c-global-header .c-user-menu__item a,
    .c-global-header .c-user-menu__logout { min-height: 4.8rem; border-top: 0; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .c-global-header .c-user-menu__nav,
    .c-global-header .c-user-menu__ico { transition: none; }
}
/* La traducción de «logout» viene en minúscula en algunos idiomas */
.c-global-header .c-user-menu__logout span { display: inline-block; }
.c-global-header .c-user-menu__logout span::first-letter { text-transform: uppercase; }