/* ===============================================================
   NAVBAR — menú principal ARTHUM (header.php: nav#main-nav)
   ===============================================================
   CSS del navbar/menú principal (logo, píldora al hacer scroll,
   botón "Menú", dropdown expandido con mega-menú, footer del menú,
   y el aside#side-menu legacy que sigue existiendo oculto en el
   markup). Extraído de style.css para tener el navbar en su propio
   archivo. Se encola con dependencia de arqdis-style (ver
   functions.php), así que siempre carga junto al CSS principal.

   Lo que se QUEDÓ en style.css a propósito (no se movió aquí):
   - Las variables --top-margin/--logo-h/--main-nav-h (declaradas en
     nav#main-nav, footer, .nota-banner-container, main, body):
     tienen redeclaraciones en varios @media queries de style.css
     que dependen del ORDEN de cascada; moverlas aquí invertiría cuál
     gana en cada breakpoint.
   - #marca-registrada (todas sus reglas, incl. body.logos-collapsed):
     tiene una redeclaración posterior en style.css (sección FOOTER)
     que compite por las mismas propiedades; requiere el mismo orden
     relativo para no invertir cuál gana.
   - #menu-footer-social / #social-menu-footer (todas sus reglas) y
     .footer-full-width-logo: el ID "social-menu-footer" se reutiliza
     tal cual en footer.php para el menú de redes del pie de página
     del SITIO (no del navbar) — es una colisión de ID existente, no
     introducida por esta extracción. Se deja junto a sus otras
     apariciones en style.css para no fragmentar ese componente
     compartido.
   - form.search-form / input.search-field / input.search-submit /
     .nav-search-icon (genéricos, sin scope de #main-nav): estas
     mismas clases las reutiliza el buscador de las grillas de
     archivo (parts/grid-header*.php) y la página de resultados de
     búsqueda de WordPress (body.search) — no son exclusivas del
     navbar aunque el nombre ".nav-search-icon" sugiera lo contrario.
   - ul.menu (grid base) y su regla de :focus: es la clase por
     defecto que WordPress asigna a cualquier wp_nav_menu() sin
     menu_class explícito — footer.php también la usa para su menú
     de redes sociales.
   - Fragmentos del navbar dentro de los @media de mobile más
     adelante en style.css (~líneas 13000-14060): están entreverados
     con reglas de otros componentes (footer, home) dentro del mismo
     bloque @media, así que extraerlos requeriría cirugía línea por
     línea de alto riesgo sin poder probar visualmente cada breakpoint.
     Quedan pendientes para una limpieza CSS aparte (ver deuda técnica
     documentada en CLAUDE.md). */

/* -------------------03. MENU DE NAVEGACIÓN------------------- */

/* Estilar la topbar que contiene el logo fijo del sitio */
/* ========== MAIN NAVIGATION ========== */

/* Bloquear scroll cuando el menú está abierto (mantiene posición) */
html.menu-is-open {
    padding-right: var(--scrollbar-w);
    overflow: hidden;
}

html.has-hidden-scrollbar.menu-is-open {
    padding-right: 0;
}

html.menu-is-open:not(.has-hidden-scrollbar) #wpadminbar {
    padding-right: var(--scrollbar-w);
}

nav#main-nav {
    background-color: var(--arthum-black);
    color: var(--arthum-white);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    /* Explícito (no "none"): así puede interpolar numéricamente hacia el
       max-width: 1350px de .menu-open en vez de aplicarse de golpe. */
    max-width: 100vw;
    height: auto;
    min-height: calc(var(--top-margin)*2 + var(--logo-h));
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-self: center;
    padding: 0;
    margin: 0 auto;
    border-radius: 0;
    overflow: hidden;
    /* Curva y duración compartidas por todas las transiciones del nav */
    --nav-ease: cubic-bezier(.22, 1, .36, 1);
    --nav-dur: .7s;
    /* Timing propio de la entrada del logo Uniandes (independiente de --nav-dur).
       --logo-enter-delay: cuánto espera antes de entrar (el JS lo lee).
       --logo-enter-dur: cuánto dura su animación de entrada. */
    --logo-enter-delay: 0.25s;
    --logo-enter-dur: .9s;
    /* Ancho de reserva de la píldora para navegadores sin interpolate-size */
    --nav-pill-w: 22rem;
    /* Timing del border-radius. Por defecto (estado FULL) se retrasa casi hasta
       el final: el nav mantiene las esquinas redondeadas durante todo el
       movimiento y solo se cuadra al final. En píldora/menú el delay es 0
       (ver abajo), así se redondea enseguida. */
    --radius-dur: calc(var(--nav-dur) * 0.25);
    --radius-delay: calc(var(--nav-dur) * 0.75);
    /* Permite animar width/height hacia/desde fit-content y auto (abrazo
       perfecto de la píldora y crecimiento del menú) donde esté soportado.
       Se limita al nav para no afectar al resto de la página. */
    interpolate-size: allow-keywords;
    /* Anima ancho, forma y posición en TODOS los estados: colapso por
       scroll y también la apertura del menú */
    transition:
        width var(--nav-dur) var(--nav-ease),
        max-width var(--nav-dur) var(--nav-ease),
        border-radius var(--radius-dur) var(--nav-ease) var(--radius-delay),
        margin var(--nav-dur) var(--nav-ease),
        min-height var(--nav-dur) var(--nav-ease);
}

nav#main-nav.transparent-header {
    background-color: unset;
}

/* Nav header (logo + controles) - Estado por defecto */
/* Mismo modo de layout (flex) en full y en píldora para que la transición
   sea interpolable: solo cambian ancho, padding, gap y radio.
   (menu-open lo vuelve grid explícitamente, ver más abajo.) */
#nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* Inset amplio en estado full (vw, para que interpole con el rem de la píldora) */
    padding: 0 12vw;
    gap: 2rem;
    min-height: calc(var(--top-margin)*2 + var(--logo-h));
    align-self: center;
    transition:
        padding var(--nav-dur) var(--nav-ease),
        gap var(--nav-dur) var(--nav-ease),
        min-height var(--nav-dur) var(--nav-ease);
}

/* Estado: Menú expandido */
nav#main-nav.menu-open {
    z-index: 12;
    width: 97vw;
    max-width: 1350px;
    height: auto;
    max-height: 90vh;
    margin-top: 5vh;
    border-radius: 30px;
    overflow-y: auto;
    background-color: var(--arthum-black);
    /* Al abrir el menú, redondear con el resto de la animación (sin retraso) */
    --radius-delay: 0s;
    --radius-dur: var(--nav-dur);
}

nav#main-nav.menu-open #nav-header {
    /* Sigue en FLEX (como full y píldora) para que abrir el menú desde la
       píldora no dé el salto flex→grid. El buscador se expande con flex-grow
       en vez de ocupar columnas de grilla. */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--top-margin) 48px;
    padding-bottom: var(--fz-52pt);
    gap: var(--fz-24pt);
    box-sizing: border-box;
}

nav#main-nav.menu-open nav#branding-top {
    flex: 0 0 auto;
}

nav#main-nav.menu-open #menu-controls-container {
    /* Ocupa el espacio restante (equivale a las columnas 7-12 del grid) */
    flex: .62 1 auto;
}

/* Estilar el logo fijo del sitio */
a#home-link {
    padding: var(--top-margin) 0;
    display: grid;
    grid-auto-flow: column;
    width: max-content;
    position: relative;
}

a#home-link div#branding-arthum {
    display: grid;
}

a#home-link img#marca-registrada {
    width: calc(var(--logo-h) * 0.18);
    height: calc(var(--logo-h) * 0.18);
    transform: translateY(1.2em) translateX(-8px);
}

a#home-link img {
    height: calc(var(--logo-h)/1.01);
}

a#home-link div#branding-arthum-container {
    display: flex;
    align-items: center;
}

a#home-link #branding-arthum {
    height: calc(var(--logo-h)/1.31);
    object-fit: cover;
    object-position: center;
}

a#home-link #titulo-arthum {
    height: calc(var(--logo-h)/8);
}


nav#branding-top {
    grid-column: 3 / span 2;
    z-index: 11;
}

/* -- INTERSECTION OBSERVER -- */
/* Estilos detector del top */
#top-marker {
    position: absolute;
    height: 1px;
    top: 5px;
    z-index: -100;
}

/* Estado: Mid-scroll (píldora compacta) */
body.mid-scroll #main-nav:not(.menu-open) {
    /* Duración propia para esta transición (independiente de --nav-dur, que
       usa .menu-open). Súbele el valor si la píldora se siente muy rápida. */
    --nav-dur: 1.2s;
    /* Ancho fijo y determinista en todos los navegadores (antes Chrome usaba
       fit-content vía interpolate-size para abrazar el contenido, pero eso
       obliga a recalcular el tamaño intrínseco en vivo mientras el logo
       Uniandes/® se colapsa dentro con su propia transición, y el contenedor
       "corrige" el ancho a medio camino → bounce. Ajusta --nav-pill-w arriba
       si no abraza bien el contenido. */
    width: min(90vw, var(--nav-pill-w));
    /* Repetir el mismo valor en max-width: si no, al cerrar el menú estando
       en mid-scroll, max-width vuelve a los 100vw de la regla base (que
       aumenta) mientras width baja desde los 97vw de .menu-open, y el clamp
       se afloja más rápido de lo que width baja → el nav se ensancha un
       instante antes de asentarse en la píldora (rebote visible sobre todo
       en pantallas grandes, donde 100vw es mucho mayor que la píldora). */
    max-width: min(90vw, var(--nav-pill-w));
    min-height: calc(var(--top-margin) * 0.1 + var(--logo-h));
    margin: 1em auto;
    border-radius: var(--fz-64pt);
    /* Al colapsar, redondear enseguida (sin esperar al final) */
    --radius-delay: 0s;
    --radius-dur: var(--nav-dur);
}

body.mid-scroll #main-nav:not(.menu-open) #nav-header {
    /* Sigue siendo flex; compactamos padding y gap. El gap define
       qué tan pegados quedan el logo y el menú dentro de la píldora. */
    padding: 0.1rem 1.5rem;
    gap: 1.75rem;
    min-height: calc(var(--top-margin) * 0.1 + var(--logo-h));
}

/* El menú expandido sigue en el flujo (max-height:0) para poder animar. Con
   `width: fit-content` (Chrome, vía interpolate-size) su ancho MAX-CONTENT
   —el menú entero— estiraba la píldora a todo lo ancho. `contain: size` hace
   que, colapsado, no aporte tamaño intrínseco. Al abrir el menú la regla deja
   de aplicar (:not(.menu-open)) y vuelve a medir normal. */
body.mid-scroll #main-nav:not(.menu-open) #menu-expanded-content {
    contain: size;
}

body.mid-scroll #main-nav:not(.menu-open) a#home-link {
    padding: 0.5rem 0;

}

body.mid-scroll a#home-link #branding-arthum {
    height: calc(var(--logo-h) / 1.3);
}

/* Uniandes y ® — visibilidad controlada por JS (navmenu.js), sin allow-discrete.
   Al volver a full, el logo entra EMPUJANDO el contenido de forma natural: se
   anima su WIDTH (0 → ancho natural, que el JS mide) junto con opacidad y un
   leve deslizamiento. El retraso hasta que el nav se asienta lo maneja el JS.
   `overflow: hidden` hace que el logo se revele de izquierda a derecha. */
#branding-uniandes {
    overflow: hidden;
    /* Al animar el width, revela el logo de izq→der sin deformarlo
       (en vez de estirar la imagen) */
    object-fit: cover;
    object-position: left center;
    transition:
        width var(--logo-enter-dur) var(--nav-ease),
        transform var(--logo-enter-dur) var(--nav-ease);
}

/* Colapsado: ancho 0 (la píldora abraza y la arthum queda pegada). Sigue en
   el flujo, así al reaparecer su width anima y empuja la arthum sin saltos. */
body.logos-collapsed #branding-uniandes {
    /* Al COLAPSAR el ancho baja a 0 sin animar. Es a propósito: la opacidad ya
       cae de golpe, así que animar el width solo dejaría un hueco negro; y
       además Chrome resuelve el `fit-content` de la píldora en el primer frame
       de la transición, así que el logo tiene que medir 0 YA o el nav aterriza
       demasiado ancho y corrige con un salto. La entrada sí anima: la maneja
       reveal() en navmenu.js con la transición base. */
    transition: none;
    width: 0;
    opacity: 0;
    transform: translateX(-16px);
}

/* Elementos heredados que no existen en el header actual: se ocultan sin animar */
body.mid-scroll #titulo-arthum,
body.mid-scroll #anos-uniandes,
nav#main-nav.menu-open #titulo-arthum,
nav#main-nav.menu-open #anos-uniandes {
    display: none;
}

/* ========== MENU BUTTON ========== */
nav#menu-button {
    color: var(--arthum-white);
    /* Fila con el texto "Menú" y el botón de lupa (acciones independientes) */
    display: flex;
    align-items: center;
    gap: 0.3rem;
    z-index: 11;
}

nav#menu-button a {
    display: flex;
    align-items: center;
    height: min-content;
    gap: 0.3rem;
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    color: inherit;
    text-decoration: none;
    user-select: none;
    font-weight: 700;
    font-size: var(--fz-24pt);
}

/* Botón de lupa: abre el menú directo en el buscador */
#menu-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    line-height: 0;
}

#menu-search-btn:hover,
#menu-search-btn:focus-visible {
    color: var(--arthum-fuchsia);
}

/* Hover independiente: "Menú" y la lupa se pintan por separado */
#menu-open-text:hover,
#menu-open-text:focus-visible {
    color: var(--arthum-fuchsia);
    cursor: pointer;
}

nav#menu-button .material-symbols-outlined {
    font-size: 1.8em;
    line-height: 1;
    font-weight: 700;
}

/* Menu button en mid-scroll */
body.mid-scroll nav#menu-button {
    top: 0;
    right: 18.95vw;
}

/* (Hover diferenciado: lo manejan #menu-open-text:hover y #menu-search-btn:hover,
   que ya aplican en todos los estados, también en mid-scroll.) */

body.admin-bar nav#menu-button {
    top: var(--logged-in-h);
}

/* Contenedor de controles (buscador + botón cerrar) */
#menu-controls-container {
    display: flex;
    align-items: center;
    grid-column: 10 / span 2;
    gap: 20px;
    flex-shrink: 0;
}

/* Buscador expandido (oculto por defecto) */
.expanded-search,
form.search-form.expanded-search {
    display: none !important;
    align-items: center;
    justify-content: space-between;
    background-color: #353534;
    border-radius: 30px;
    /* Borde transparente por defecto (con box-sizing no genera salto al enfocar) */
    border: 1px solid transparent;
    padding: 0 20px;
    height: var(--fz-60pt);
    width: 100%;
    flex-shrink: 1;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

nav#main-nav.menu-open .expanded-search,
nav#main-nav.menu-open form.search-form.expanded-search {
    display: flex !important;
}

.expanded-search label {
    display: flex;
    align-items: center;
    width: 100%;
}

.expanded-search {
    position: relative;
}

/* Estado seleccionado: borde fucsia + fondo un poco más claro.
   Se repite el selector completo (form.search-form...) para ganarle en
   especificidad a la regla base que fija el borde transparente. */
.expanded-search:focus-within,
form.search-form.expanded-search:focus-within {
    border-color: var(--arthum-white);
    opacity: .8;
    background-color: #3f3f3e;
}

.expanded-search input.search-field {
    background-color: transparent;
    border: none;
    color: var(--arthum-white);
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-24pt);
    font-weight: 600;
    opacity: 0.5;
    width: 100%;
    padding: 0;
}

.expanded-search input.search-field::placeholder {
    color: var(--arthum-white);
    opacity: 0.5;
}

.expanded-search input.search-field:focus {
    outline: none;
    opacity: 1;
}

.expanded-search input.search-submit {
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 26px;
    height: 26px;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    /* invisible but clickable */
}

.expanded-search .nav-search-icon {
    font-size: var(--fz-35pt);
    color: var(--arthum-fuchsia);
    line-height: 1;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    /* clicks go to the submit */
}

.expanded-search input.search-submit:hover {
    opacity: 0.8;
}

/* Ocultar el botón "Menú" cuando el menú está expandido */
nav#main-nav.menu-open #menu-button {
    display: none;
}

/* Botón de cerrar (oculto por defecto) */
#close-menu-expanded {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}

nav#main-nav.menu-open #close-menu-expanded {
    display: flex;
}

#close-menu-expanded .material-symbols-outlined {
    font-size: var(--fz-45pt);
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
    color: var(--arthum-fuchsia);
}

#close-menu-expanded:hover {
    opacity: 0.8;
}

/* Contenido expandido del menú (colapsado por defecto).
   En vez de display:none (instantáneo) lo dejamos siempre en flujo y lo
   revelamos animando max-height + opacidad, así el nav crece suave. */
#menu-expanded-content {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    padding: 0 48px;
    overflow: hidden;
    pointer-events: none;
    transition:
        max-height var(--nav-dur) var(--nav-ease),
        opacity var(--nav-dur) var(--nav-ease),
        padding var(--nav-dur) var(--nav-ease);
}

/* Scrollbar sutil para el menú */
#menu-expanded-content::-webkit-scrollbar {
    width: 6px;
}

#menu-expanded-content::-webkit-scrollbar-track {
    background: rgb(255, 255, 255, 0.1);
    border-radius: 3px;
}

#menu-expanded-content::-webkit-scrollbar-thumb {
    background: rgb(255, 255, 255, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
}

#menu-expanded-content::-webkit-scrollbar-thumb:hover {
    background: rgb(255, 255, 255, 0.5);
}

/* Firefox scrollbar */
#menu-expanded-content {
    scrollbar-width: thin;
    scrollbar-color: rgb(255, 255, 255, 0.3) rgb(255, 255, 255, 0.1);
}

nav#main-nav.menu-open #menu-expanded-content {
    max-height: 80vh;
    opacity: 1;
    padding: 0 48px 24px 48px;
    overflow: hidden auto;
    pointer-events: auto;
}

/* Filas de secciones del menú */
.menu-sections-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--fz-24pt);
    margin-bottom: var(--fz-71pt);
}

.menu-sections-row.menu-main-row {
    gap: 0;
    margin-bottom: 0;

}

/* Bloques individuales de menú */
.menu-block {
    display: flex;
    flex-direction: column;
    row-gap: var(--fz-22pt);
}

.menu-block h3 {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-27pt);
    font-weight: 700;
    color: var(--arthum-fuchsia);
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ========== MEGA MENU - EDUCATION SECTION ========== */
.menu-block-education {
    grid-column: 1 / span 2;
    flex: 1 1 auto;
}

.education-columns {
    display: flex;
    flex-direction: row;
    column-gap: 48px;
}

.education-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    row-gap: var(--fz-22pt);
}

a.education-subtitle {
    position: relative;
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-22pt);
    font-weight: 600;
    color: var(--arthum-fuchsia);
    margin: 0;
    padding-bottom: 2px;
    line-height: 1.5;
    text-decoration: none;
    display: block;
    width: fit-content;
    overflow: hidden;
    transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

a.education-subtitle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--arthum-fuchsia);
    border-radius: 3px;
    opacity: 0;
    transform: translateX(-100%);
}

/* will-change solo mientras anima (clases .in/.out); en reposo no se promueve
   una capa de composición extra para cada link del menú. */
a.education-subtitle.subtitle-highlight-in::after {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out;
    will-change: transform, opacity;
    opacity: 1;
    background-color: var(--arthum-white);
    transform: translateX(0);
}

a.education-subtitle.subtitle-highlight-out::after {
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.84, 0);
    will-change: transform;
    opacity: 1;
    transform: translateX(100%);
}

.education-subtitle:hover {
    color: var(--arthum-white);
}

a.education-subtitle[target="_blank"]::after,
.menu-section li a[target="_blank"]::after {
    content: "open_in_new";
    font-family: "Material Symbols Outlined";
    font-size: 1em;
    margin-left: 0.3em;
    vertical-align: middle;
    display: inline-block;
    width: 1em;
    text-align: center;
    line-height: 1;
    font-weight: 600;
}



.education-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fz-10pt);
}

.education-submenu li {
    margin: 0;
}

.education-submenu a,
.simple-menu a {
    max-width: 80%;
    width: fit-content;
    font-family: var(--arthum-ff-palast);
    font-size: var(--fz-20pt);
    font-weight: 400;
    color: var(--arthum-white);
    text-decoration: none;
    display: block;
    line-height: 1.2;
    transition: color 0.2s ease, transform 0.2s ease;
    margin-bottom: 0.5em;
}


.education-submenu a:hover,
.simple-menu a:hover {
    color: var(--arthum-fuchsia);
    transform: translateX(4px);
}

/* ========== MEGA MENU - RIGHT COLUMN (Personas & Espacios) ========== */
.menu-block-right {
    grid-column: 4;
    margin-left: 48px;

}
.menu-block-mid,
.menu-block-right {
 display: grid;
  gap: 0;
  grid-auto-rows: 1fr;
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: var(--fz-30pt);
}

.menu-section h3 {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.menu-section-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--arthum-fuchsia);
    transition: opacity 0.2s;
    display: none;
}

.menu-section-icon-btn:hover {
    opacity: 0.7;
}

.menu-section-icon-btn .material-symbols-outlined {
    font-size: var(--fz-32pt);
}

.simple-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fz-10pt);
}

footer.invisible-footer {
    padding: 0;
}

footer.invisible-footer * {
    display: none !important;
}



/* Footer del menú expandido */
.menu-footer,
#menu-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 45px;
}

#menu-footer-contact {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    grid-template-rows: 1fr;
}

.menu-footer-separator {
    display: flex;
    justify-content: space-between;
    place-self: flex-end self-start;
    grid-row: 1;
    grid-column: 5 / span 8;
    padding-left: var(--fz-24pt);
    width: 100%;
}

.menu-footer-item:nth-child(1) {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    grid-column: 1 / span 2;
    grid-row: 1;
}

.menu-footer-item:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 0 0 auto;
    grid-column: 3 / span 2;
    grid-row: 1;
}


.menu-footer-label {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-14pt);
    font-weight: 700;
    color: var(--arthum-white);
    line-height: normal;
    margin: 0;
}

.menu-footer-value {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-14pt);
    font-weight: 400;
    color: var(--arthum-white);
    line-height: normal;
    margin: 0;
    max-width: 90%;
}

.menu-footer-value a {
    color: var(--arthum-white);
    text-decoration: none;
}

.menu-footer-value a:hover {
    color: var(--arthum-fuchsia);
}

#menu-footer-bottom {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--fz-24pt);
}

#menu-footer-legal {
    display: inherit;
    grid-template-columns: repeat(9, 1fr);
    gap: var(--fz-24pt);
    align-items: center;
    font-family: var(--arthum-ff-palast);
    font-size: 11px;
    color: rgb(255, 255, 255, 0.5);
    line-height: normal;
    grid-column: 1 / span 9;
}

#menu-footer-legal a {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-12pt);
    font-weight: 700;
    color: var(--arthum-white);
    text-decoration: underline;
    flex-shrink: 0;
}

#menu-footer-legal p {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-11pt);
    font-weight: 400;
    color: rgb(255, 255, 255, 0.5);
    grid-column: 3 /span 7;
    grid-row: 1;
    text-wrap: wrap;
}

#menu-footer-legal #menu-cookies-config {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-16pt);
    font-weight: 700;
    color: var(--arthum-white);
    text-decoration: underline;
    width: 70%;
    flex-shrink: 0;
    grid-column: 1 / span 2;
    grid-row: 1;
}

#menu-footer-legal a:hover {
    color: var(--arthum-fuchsia);
}

#menu-footer-legal p {
    margin: 0;
    line-height: 1.3;
}

/* #menu-footer-social / #social-menu-footer: se quedó en style.css
   (colisión de ID con footer.php) — ver nota al inicio de este archivo. */

.menu-footer-separator .menu-footer-item {
    width: auto;
}

.contact-info {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
}

.contact-info p {
    font-family: var(--arthum-ff-palast);
    font-size: var(--fz-16pt);
    color: var(--arthum-white);
    margin: 0;
    line-height: 1.5;
}

.contact-info strong {
    font-weight: 700;
}

.contact-info a {
    color: var(--arthum-white);
    text-decoration: none;
}

.contact-info a:hover {
    color: var(--arthum-fuchsia);
}

.social-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.social-links li {
    margin: 0;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgb(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

.social-links a:hover {
    background-color: var(--arthum-fuchsia);
}

.social-links img {
    width: 20px;
    height: 20px;
}

/* Estilos del overlay invisible que aparece al abrir el menú.
 * este llena todo el espacio no ocupado por el menú y así nos
 * permite detectar cuando alguien hace click por fuera, para
 * cerrar el menú.
 */

span#out-of-menu {
    display: none;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0, 0.6);
    z-index: 10;
    transition: opacity 0.3s ease;
}

span#out-of-menu.open-menu {
    z-index: 11;
    display: block;
    pointer-events: all;
    opacity: 1;
    width: 100%;
    height: 100%;
}

/* Estilar la barra lateral */
aside#side-menu {
    --aside-pad-top: 3.5rem;
    --aside-pad: max(2rem, min(5vw, var(--aside-pad-top)));
    /* --aside-pad: clamp(2rem, 5vw, var(--aside-pad-top)); */
    --aside-width: 30rem;
    margin-top: 5em;
    box-sizing: content-box;
    position: fixed;
    top: 0;
    height: fit-content;
    overflow-y: hidden;
    transition: 0.5s;
    z-index: 12;
    display: none !important;
    /* Ocultamos el aside porque ahora usamos el menú expandido dentro del nav */
    grid-template-columns: min-content min-content;
    overscroll-behavior: none;
}


div#side-wrapper {
    position: relative;
    width: var(--aside-width);
    padding: var(--aside-pad);
    padding-top: var(--aside-pad-top);
    min-height: calc(50% - var(--aside-pad) - var(--aside-pad-top));
}

:root {
    --scrollbar-w: 15px;
}

.open-menu div#side-wrapper,
.open-menu a#close-menu {
    margin-right: var(--scrollbar-w);
}

.side-menu-is-open:not(.has-hidden-scrollbar) #wpadminbar {
    padding-right: var(--scrollbar-w);
}

html.side-menu-is-open {
    padding-right: var(--scrollbar-w);
    overflow: hidden;
}

html.has-hidden-scrollbar.side-menu-is-open {
    padding-right: 0;
}

aside#side-menu.open-menu {
    overflow-y: scroll;
}



@media screen and (max-width: 991px) {
    :root {
        --scrollbar-w: 0px;
    }

    aside#side-menu {
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    aside#side-menu::-webkit-scrollbar {
        display: none;
    }

    .open-menu div#side-wrapper,
    .open-menu a#close-menu {
        margin-right: 0;
    }

    .side-menu-is-open #wpadminbar {
        padding-right: 0;
    }

    html.side-menu-is-open {
        padding-right: 0;
        overflow: auto;
    }
}

aside#side-menu {
    top: calc((5em + 60vh)*(-1));
    height: min-content;
}

aside#side-menu.open-menu {
    top: 0;
    height: min-content;
}

span#out-of-menu {
    grid-row: 1;
    grid-column: 1;
}

.menu-content-wrapper {
    grid-row: 1;
    grid-column: 2;
    height: min-content;
    border-radius: 1.875rem;
    /* 30px / 16px = 1.875rem */
    background-color: var(--arthum-white);
}

aside#side-menu.open-menu .menu-content-wrapper {
    box-shadow: 5px 0 25px rgb(0, 0, 0, 0.2);
}

/* Estilar el botón de cerrar menú */
a#close-menu {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    align-self: flex-start;
    align-items: center;
    justify-content: flex-end;
    color: var(--arthum-black);
    text-decoration: none;
    z-index: 2;
}

a#close-menu img {
    filter: saturate(0) brightness(3);
    transition: 0.2s;
}

a#close-menu:hover,
a#close-menu:focus {
    color: var(--arthum-fuchsia);
}

a#close-menu:hover img,
a#close-menu:focus img {
    filter: saturate(1) brightness(1);
}

a#close-menu img {
    --x-pad: 1rem;
    width: min-content;
    max-width: calc(var(--aside-pad)*1 - var(--x-pad)*2);
    padding: var(--x-pad);
    align-self: center;
}

/* Estilar la barra de búsqueda del menú lateral legacy (#side-wrapper).
   form.search-form / input.search-field genéricos se quedaron en
   style.css — ver nota al inicio de este archivo. */
#side-wrapper form.search-form {
    border-radius: 1.875rem;
    /* 30px / 16px = 1.875rem */
    ;
}

#side-wrapper input.search-field {
    background-color: #353534;
}

a.menu-title {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-14pt);
    font-weight: 700;
    display: block;
    margin-bottom: var(--menu-y-gap);
    text-decoration: none;
    text-transform: uppercase;
    color: var(--arthum-black);
    pointer-events: none;
}

a.menu-title::before {
    content: '_';
}

/* Estilos para aside#side-menu (legacy - ahora oculto) */
aside#side-menu li.menu-item>a,
aside#side-menu li.menu-item>button {
    font-family: var(--arthum-ff-palast);
    font-size: var(--fz-18pt);
    color: var(--arthum-white);
    font-weight: 400;
    text-decoration: none;
    transition: 0.3s;
}


aside#side-menu ul.sub-menu>li>a {
    padding-top: calc(var(--menu-y-gap)/4);
}

aside#side-menu li.menu-item>button {
    font-size: var(--fz-12pt);
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    cursor: pointer;
}

/* Este menú se agrega desde javascript si tenemos banner de cookies */
#menu-cookies {
    margin-top: calc(var(--menu-y-gap)*-1);
}

#menu-cookies ul>li>button::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-image: url("../assets/configurar.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: top;
    margin-right: 0.3em;
}

/* Sobreescribir los estilos del menu para la sección de educación, que funciona distinto */
ul#sch-menu {
    margin-bottom: 1.2rem;
}

ul#prg-menu {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 45%);
    grid-template-rows: repeat(3, auto);
    column-gap: 3rem;
}

ul#prg-menu li:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

ul#prg-menu ul.sub-menu li {
    grid-column: span 2;
    grid-row: span 2;
}

nav #prg-menu-container:not(last-child) {
    margin-bottom: 20px;
}

ul#prg-menu>li a {
    display: block;
    position: relative;
    left: 0;
    transition: 0.3s;
}

ul#prg-menu>li:hover a,
ul#prg-menu>li:focus-within a {
    left: 5px;
}

/* Estilos del menú de redes sociales */
nav#social-menu-container {
    display: flex;
    justify-content: flex-end;
}

#menu-block-redes:last-child nav#social-menu-container {
    /* Posicionar al final del menú si no hay nada más abajo */
    position: absolute;
    bottom: var(--aside-pad);
    right: var(--aside-pad);
}

ul#social-menu {
    display: inline-grid;
    grid-auto-flow: column;
    column-gap: 1rem;
}

ul#social-menu img {
    height: 1.5rem;
    filter: brightness(0);
    transition: 0.2s;
}

ul#social-menu a:hover img,
ul#social-menu a:focus img {
    filter: brightness(1);
}

div#menu-block-redes {
    /* Define el espacio que ocupa el menú absoluto de redes */
    height: 2rem;
    margin-bottom: 1.5rem;
}

#menu-contact-info address {
    display: flex;
    flex-direction: column;

    cursor: text;
}

#menu-contact-info address a,
#menu-contact-info address div {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-14pt);
}

#menu-contact-info address div,
#menu-contact-info address>a {
    margin-bottom: 1em;
}

#menu-contact-info address>a:last-child {
    margin-bottom: 1.3em;
}

#menu-contact-info address a {
    color: var(--arthum-black);
    font-weight: 500;
    text-decoration: none;

    pointer-events: none;
}

#menu-contact-info .tel-contact {
    display: flex;
    justify-content: space-between;
}

#menu-contact-info .menu-contactpoint {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#menu-contact-info .menu-contactpoint::before {
    content: attr(data-contactpoint-label);
    font-size: var(--fz-11pt);
    color: #808080;
    /* text-transform: lowercase; */
    font-weight: 500;
    margin-bottom: 0.3em;
    line-height: 1.2em;
}

@media screen and (max-width: 450px) {
    .menu-optional-label {
        display: none;
    }

    #menu-arq-ext::before,
    #menu-dis-ext::before {
        width: 3ch;
        overflow: hidden;
    }
}

#menu-contact-info p {
    font-family: var(--arthum-ff-area);
    font-variation-settings: 'inkt' 100;
    font-size: var(--fz-10pt);
    color: #CBCBCB;
    font-weight: 500;
    line-height: 1.3em;
}

/* ===============================================================
   RESPONSIVE — fragmentos que vivían entreverados con otros
   componentes dentro de @media queries más adelante en style.css.
   Se movieron aquí (después de las reglas base de arriba) para que
   el orden de cascada se preserve: como navbar.css carga DESPUÉS de
   todo style.css, un override responsive que se hubiera quedado en
   style.css perdería contra la regla base de aquí en cualquier
   ancho de pantalla — por eso deben viajar juntos. */

@media (min-width: 768px) and (max-width: 849px) {
    .education-submenu a,
    .simple-menu a {
        font-size: var(--fz-20pt);
        max-width: none;
    }

    .menu-footer-separator .menu-footer-item {
        width: 13%;
    }
}

@media (min-width: 767px) and (max-width: 1128px) {
    #menu-footer-legal p {
        grid-column: 3 / span 6;
    }
}

@media (max-width: 768px) {
    /* -------------------- MAIN NAV -------------------- */

    nav#main-nav {
        --logo-h: 50px;
    }

    #nav-header {
        display: flex;
        align-items: center;
        gap: 10vw;
        justify-content: center;
        /* Reset del inset asimétrico de escritorio: en móvil va centrado */
        padding: 0 1em;
    }

    /* -------------------- MENU ICONS -------------------- */

    .menu-section-icon-btn {
        display: flex;
    }

    /* Hacer todo el h3 clickeable en mobile */
    .menu-section>h3,
    .menu-block-education>h3 {
        cursor: pointer;
        user-select: none;
    }

    /* -------------------- MENU ACCORDION -------------------- */

    /* Ocultar contenidos de menú por defecto en mobile */
    .menu-block-education .education-columns,
    .menu-section .simple-menu {
        display: none !important;
    }

    /* Mostrar contenidos cuando la sección está abierta */
    .menu-block-education.menu-section-open .education-columns {
        display: flex !important;
        flex-direction: column;
        row-gap: var(--fz-22pt);
    }

    .menu-section.menu-section-open .simple-menu {
        display: flex !important;
    }

    /* -------------------- MENU LAYOUT -------------------- */

    .menu-sections-row.menu-main-row {
        display: flex;
        flex-direction: column;
        gap: 0;

    }

    .menu-block-education {
        width: 100%;
    }

    .menu-block-right {
        width: 100%;
        gap: 0;
        margin: 0;
    }

    .menu-open a#home-link div#branding-arthum-container {
        display: none;
    }

    nav#main-nav.menu-open #menu-controls-container {
        display: flex;
        width: 100%;
        padding: 0 var(--min-side-margin);
        padding-bottom: 0;
    }

    nav#main-nav.menu-open {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin-top: 0;
    }

    /* Selector completo para ganarle en especificidad a la regla de menu-open
       (que ahora fija el padding/altura de escritorio). En móvil el menú es
       fullscreen (100vh): sin padding lateral y llenando todo el alto, para que
       el space-between empuje el logo del footer a ras del bottom. */
    nav#main-nav.menu-open #menu-expanded-content {
        width: 100%;
        padding: 0;
        max-height: 100vh;
        flex: 1 1 auto;
    }

    nav#main-nav.menu-open #nav-header {
        padding: var(--fz-48pt) 0 var(--fz-52pt) 0;
        gap: 0;
    }

    nav#main-nav.menu-open .expanded-search,
    nav#main-nav.menu-open form.search-form.expanded-search {
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        height: var(--fz-48pt);
    }

    .expanded-search input.search-field {
        font-size: var(--fz-24pt);
    }

    .expanded-search .nav-search-icon {
        font-size: var(--fz-32pt);
    }

    nav#main-nav.menu-open #close-menu-expanded {
        justify-self: end;
    }


    .menu-block-education,
    .menu-section {
        padding: var(--fz-24pt) var(--min-side-margin);
        border-bottom: 1px solid var(--arthum-gray);
    }

    .education-submenu {
        gap: .5em
    }


    /* -------------------- MENU FOOTER -------------------- */

    .menu-footer,
    #menu-footer {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
        padding: 45px var(--min-side-margin);
    }

    #menu-footer-contact {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        gap: 5%;
        row-gap: var(--fz-14pt);
        align-items: flex-start;
        width: 100%;
        overflow: hidden;
    }


    #menu-footer-bottom {
        grid-template-columns: repeat(2, 1fr);
        border-top: 1px solid var(--arthum-black);
        padding-top: var(--fz-16pt);
        margin-top: var(--fz-16pt);
    }

    .menu-footer-separator {
        width: 100%;
        grid-column: 1 / span 2;
        grid-row: 2 / span 2;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        justify-self: start;
        gap: inherit;
        row-gap: var(--fz-14pt);
        padding-left: 0;
    }

    .menu-footer-separator .menu-footer-item {
        width: 100%;
    }

    #menu-footer-contact .menu-footer-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    #menu-footer-contact .menu-footer-item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    #menu-footer-contact .menu-footer-separator .menu-footer-item:nth-child(1) {
        grid-column: 3;
        grid-row: 1;
    }

    #menu-footer-contact .menu-footer-separator .menu-footer-item:nth-child(2) {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    #menu-footer-contact .menu-footer-separator .menu-footer-item:nth-child(3) {
        grid-column: 4;
        grid-row: 1;
        width: fit-content;

    }

    #menu-footer-contact .menu-footer-separator .menu-footer-item:nth-child(4) {
        grid-column: 1 / span 2;
        grid-row: 2;
    }

    #menu-footer-contact .menu-footer-separator .menu-footer-item:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
    }


    #menu-footer-bottom {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        text-align: left;
    }

    #menu-footer-legal {
        display: flex;
        flex-direction: column;

    }

    #menu-footer-legal #menu-cookies-config {
        align-self: flex-start;
        width: 100%;
        font-size: var(--fz-12pt);
    }

    nav#social-menu-footer-container {
        margin: 0;
    }

    #menu-footer-social {
        grid-row: 1;
        justify-self: start;
        grid-column: 1;
        align-content: center;
    }

    /* ----- Menú mobile ----- */

    .education-submenu a,
    .simple-menu a {
        font-size: var(--fz-22pt);
        margin-bottom: 0.5em;
    }

    .menu-footer-label {
        font-size: var(--fz-18pt);
    }

    .menu-footer-value {
        font-size: var(--fz-18pt);
    }

    .menu-footer,
    #menu-footer {
        padding-bottom: 0;
    }

    #menu-footer-legal #menu-cookies-config {
        font-size: var(--fz-16pt);
    }

    #menu-footer-legal p {
        font-size: var(--fz-16pt);
    }
}

@media (max-width: 600px) {
    nav#main-nav {
        --logo-h: 35px;
    }

    .education-submenu {
        gap: 1rem;
    }

    .education-submenu a,
    .simple-menu a {
        font-size: var(--fz-22pt);
        margin-bottom: 0.5em;
    }

    .menu-footer-label {
        font-size: var(--fz-18pt);
    }

    .menu-footer-value {
        font-size: var(--fz-18pt);
    }

    .menu-footer,
    #menu-footer {
        padding-bottom: 0;
    }

    #menu-footer-legal #menu-cookies-config {
        font-size: var(--fz-16pt);
    }

    #menu-footer-legal p {
        font-size: var(--fz-16pt);
    }
}