:root {
    --bg-navy: #141414;
    --surface-border: rgba(255, 255, 255, 0.09);
    --text-color: #ffffff;
    --font-geist: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-space: 'Space Grotesk', sans-serif;
    --header-h: 118px;
    --footer-h: 72px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: var(--bg-navy);
}

body {
    color: var(--text-color);
    font-family: var(--font-geist);
    font-weight: 300;
    min-height: 100vh;
    background-color: var(--bg-navy);
    position: relative;
}

/* CAPA DE FONDO — antes tenía fondo.jpg (16MB, de más para lo que aportaba
   sobre el ruido visual que ya tienen los módulos). Gris oscuro liso. */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--bg-navy);
}

/* CONTENEDOR FIJO (CINTA + BARRA SUPERIOR) */
.header-stack {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    transition: transform 0.3s ease;
}

.header-stack.header-hidden {
    transform: translateY(-100%);
}

/* BARRA SUPERIOR */
/* position:relative como referencia para el ícono centrado (position:
   absolute, independiente del flujo flex de hamburguesa/texto/idioma). */
.topbar {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 14px 32px 10px;
    /* El ícono (56px, centrado con position:absolute) necesita más alto
       del que le da el contenido de la fila (hamburguesa/texto/idioma,
       ~23px) — min-height asegura que entre completo sin sobresalir. */
    min-height: 84px;
}

.hamburger-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hamburger-icon .bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text-color);
}

.topbar-logo {
    margin-left: 10px;
    font-family: var(--font-geist);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    color: var(--text-color);
}

.logo-raum { font-weight: 400; }
.logo-lab { font-weight: 100; }

/* Ícono centrado horizontalmente en la barra (independiente de
   hamburguesa/texto/idioma, por eso position:absolute), alineado por abajo
   con esos tres — mismo bottom que el padding-bottom de .topbar, para que
   su borde inferior coincida con el de ellos en vez de quedar centrado. */
.topbar-logo-icon {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    height: 56px;
    width: auto;
    display: block;
}

/* Empuja el selector de idioma al extremo derecho — hamburguesa y texto
   quedan juntos a la izquierda, sin depender de justify-content:
   space-between (que los separaría según el ancho de cada uno). */
.lang-pill {
    margin-left: auto;
}

.header-rule {
    height: 0.5px;
    margin: 0 32px;
    background: rgba(255, 255, 255, 0.35);
}

.lang-pill {
    font-family: var(--font-geist);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--text-color);
    background: transparent;
    border: none;
    padding: 5px 10px;
    cursor: default;
}

/* PANEL DE NAVEGACIÓN (toggle) */
.nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    z-index: 250;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(10px);
    /* padding-bottom deja lugar al footer fijo (--footer-h), para que los
       íconos de contacto —empujados al fondo del panel, ver
       .nav-contacts-rule— no queden tapados detrás. */
    padding: calc(var(--header-h) + 30px) 32px calc(var(--footer-h) + 24px);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.nav-panel.open {
    transform: translateX(0);
}

.nav-list {
    list-style: none;
    font-family: var(--font-space);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.nav-link {
    display: inline-block;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.nav-link:hover,
.nav-link:focus-visible { font-weight: 700; }

.nav-sublist {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* El espacio antes del primer ítem va en el hijo, no en el propio <ul>:
   con box-sizing:border-box, un padding/margin puesto directo en el
   elemento que se colapsa (max-height:0) no se recorta — el padding
   empuja el alto mínimo del propio elemento por encima de max-height, y
   el margin (probado antes) queda afuera de lo que overflow:hidden
   recorta. Puesto en el <li>, en cambio, sí queda contenido dentro del
   área que el <ul> recorta al colapsar. */
.nav-sublist li:first-child {
    margin-top: 12px;
}

.nav-item.has-sub.open .nav-sublist {
    max-height: 220px;
}

.nav-sublist a,
.nav-sublist span[aria-disabled="true"] {
    display: inline-block;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.03em;
}

.nav-sublist a:hover,
.nav-sublist a:focus-visible { font-weight: 700; }

.nav-sublist span[aria-disabled="true"] {
    opacity: 0.45;
    cursor: default;
}

/* CONTACTO — dentro del panel de navegación (no en el footer: ver nota de
   .site-footer más abajo, mismo criterio que en el resto de los módulos).
   margin-top:auto empuja la línea (y los íconos que siguen) al fondo real
   del panel en vez de quedar pegados debajo del último ítem del menú. */
.nav-contacts-rule {
    height: 0.5px;
    margin: auto 0 20px;
    background: rgba(255, 255, 255, 0.35);
}

.nav-contacts {
    display: flex;
    gap: 18px;
}

.contact-item {
    display: flex;
    align-items: center;
    color: var(--text-color);
    text-decoration: none;
}
.contact-item svg { transition: transform 0.15s ease; }
.contact-item:hover svg,
.contact-item:focus-visible svg { transform: scale(1.15); }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.nav-scrim.open {
    opacity: 1;
    pointer-events: auto;
}

/* CONTENIDO PRINCIPAL */
.main {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(var(--header-h) + 56px) 32px calc(var(--footer-h) + 40px);
}

/* INICIO — texto curatorial, visible hasta que se elige "Recursos". Sin
   CSS propio en #view-home: mismo padding-top que las cards, heredado
   directo de .main (ver nota ahí) — decisión del usuario, revirtiendo el
   empuje hacia el footer que tenía antes (justify-content:flex-end). */

/* margin:0 auto: el bloque se centra dentro de .main (que ya centra TODO
   .main en la ventana, pero sus hijos por defecto quedan pegados a la
   izquierda de esos 1180px si no tienen su propio auto-margin). */
.home-curatorial {
    max-width: 560px;
    margin: 0 auto;
}

.home-curatorial h1 {
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--text-color);
    margin-bottom: 28px;
}

.home-curatorial p {
    font-family: var(--font-geist);
    font-weight: 100;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 20px;
}

.home-curatorial p:last-child {
    margin-bottom: 0;
}

/* LISTA DE MÓDULOS — filas divididas por línea fina, en vez de cards con
   fondo (el proyecto no tiene esa impronta; es más de listas simples).
   margin:0 auto: mismo motivo que .home-curatorial, se centra dentro de
   .main en vez de quedar pegada a la izquierda. Fila compacta a propósito
   (padding/tamaños chicos, estado junto al título en vez de en su propia
   línea) para que las 4 entren sin scroll vertical. */
.modules-list {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
    border-top: 1px solid var(--surface-border);
}

.module-row {
    display: flex;
    flex-direction: column;
    padding: 16px 4px;
    border-bottom: 1px solid var(--surface-border);
}

.module-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.card-status {
    flex-shrink: 0;
    font-family: var(--font-geist);
    color: var(--text-color);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.module-row h2 {
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0;
}

.module-row h2 .card-h2-fine {
    font-size: 0.8rem;
    font-weight: 100;
}

.module-row .card-lede {
    max-width: 720px;
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 100;
    margin-bottom: 4px;
}

.module-row .card-detail {
    max-width: 720px;
    font-size: 0.84rem;
    color: var(--text-color);
    font-weight: 100;
    line-height: 1.4;
}

.card-more {
    max-width: 720px;
}

/* Sin la flechita/triángulo nativo de <summary> — "Ver más" hace de
   afordancia de click por sí solo (negrita), no hace falta un ícono aparte. */
.card-more summary {
    list-style: none;
    cursor: pointer;
}

.card-more summary::-webkit-details-marker {
    display: none;
}

.card-more[open] summary {
    margin-bottom: 8px;
}

.card-more-label {
    font-size: 0.72rem;
    font-weight: 700;
}

/* Link en línea dentro de un párrafo de card-detail (ej. "conocer más" de
   una muestra externa) — mismo peso/tamaño que .card-more-label para que
   se lea como la misma afordancia, pero es un <a> real en vez de un
   disclosure triangle. */
.card-inline-link {
    color: var(--text-color);
    font-weight: 700;
    font-size: 0.72rem;
    text-decoration: none;
}

.card-more .card-detail + .card-detail {
    margin-top: 8px;
}

/* Vínculos de contacto dentro de una tarjeta (ficha de Investigación,
   vista Contacto) — ícono + texto en negrita, sin el celeste/subrayado
   típico de link: la afordancia de click la da el ícono + el peso del
   texto, no el color. */
.contact-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.84rem;
}

.contact-link svg {
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.contact-link:hover svg,
.contact-link:focus-visible svg {
    transform: scale(1.15);
}

.card-cta {
    align-self: flex-end;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    transition: transform 0.15s ease;
    /* Reset de botón nativo: .card-cta también se usa en <button> (ej.
       "Solicitar" en Educación), no solo en <a>. */
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-color);
    cursor: pointer;
}

/* El nudge de hover vive en .card-cta (sin rotación propia), no en el
   ícono: combinar un transform:translateX() de hover con el
   transform:rotate(90deg) fijo del ícono es frágil — el translate quedaría
   compuesto DENTRO del sistema de coordenadas ya rotado del ícono y se
   movería en diagonal/vertical en vez de a la derecha en pantalla. Acá,
   sin rotación de por medio, translateX se mueve limpio hacia la derecha. */
.card-cta:hover,
.card-cta:focus-visible {
    transform: translateX(4px);
}

.card-cta[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.card-cta[aria-disabled="true"]:hover {
    transform: none;
}

/* Único uso de Space Grotesk en esta lista, a propósito: acento puntual en
   un llamado a la acción, no cuerpo de texto (ver
   feedback_raumlab-geist-default-font en memoria). */
.card-cta-label {
    font-family: var(--font-space);
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-color);
}

/* flecha_derecha_ui.png apunta hacia ARRIBA en su orientación sin rotar
   (confirmado mirando cómo se usa en .rc-back-link, que la rota -90° para
   que apunte a la izquierda/"volver" — arriba -90° = izquierda). Para que
   apunte a la derecha acá hace falta +90°, no dejarla sin rotar. */
.cta-arrow-img {
    display: block;
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
}

/* FOOTER — mismo criterio que .rc-footer del resto de los módulos: fijo al
   borde inferior real de la ventana, solo copyright centrado y la línea. Los
   íconos de contacto (mail/IG) viven en el panel de navegación, no acá. */
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    padding: 0 0 20px;
    text-align: center;
}

.footer-rule {
    height: 0.5px;
    margin: 0 32px 16px;
    background: rgba(255, 255, 255, 0.35);
}

.footer-copyright {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-color);
    font-family: var(--font-geist);
    line-height: 1.4;
}

/* EDUCACIÓN — mismo criterio que .home-curatorial: bloque de texto
   centrado sobre .main, antes de la lista de tarjetas (Soporte /
   Materiales didácticos). */
.view-lede {
    max-width: 760px;
    margin: 0 auto 8px;
    font-family: var(--font-geist);
    font-weight: 300;
    font-size: 1rem;
    color: var(--text-color);
}

.view-detail {
    max-width: 760px;
    margin: 0 auto 32px;
    font-family: var(--font-geist);
    font-weight: 100;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-color);
}

.hidden {
    display: none !important;
}

/* MODAL — "Solicitar soporte" (Educación). Mismo criterio visual que el
   resto del sitio: vidrio esmerilado sobre --bg-navy, sin cards con fondo
   propio salvo acá, donde hace falta separarlo del contenido de atrás. */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(20, 20, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-box {
    width: 100%;
    /* 720px era para forzar 4 columnas de igual ancho en los checkboxes;
       con flex + space-between (ver .form-fieldset) cada casilla ya usa
       su ancho natural, así que el modal puede volver a un ancho acorde
       al resto de sus campos (inputs/textarea) en vez de quedar de más. */
    max-width: 500px;
    max-height: 92vh;
    overflow-y: auto;
    background: rgba(20, 20, 20, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--surface-border);
    border-radius: 6px;
    padding: 28px 32px;
}

.modal-box h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-color);
    font-weight: 400;
    margin-bottom: 20px;
    font-family: var(--font-geist);
}

.input-row {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-row label {
    font-size: 0.7rem;
    color: var(--text-color);
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.modal-box input[type="text"],
.modal-box input[type="email"],
.modal-box select,
.modal-box textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--text-color);
    background-color: transparent;
    font-family: var(--font-geist);
}

.modal-box input:focus,
.modal-box select:focus,
.modal-box textarea:focus {
    border-color: var(--text-color);
    outline: none;
}

.modal-box input::placeholder,
.modal-box textarea::placeholder {
    color: var(--text-color);
    opacity: 0.5;
    font-weight: 300;
}

.modal-box select option {
    background: var(--bg-navy);
}

/* Siempre 4 columnas fijas (no auto-fit: con auto-fit, si la 4ta no
   entraba justa bajaba sola a la fila siguiente). Fuente/gap ajustados
   para que "Artístico-cultural" —el texto más largo— entre en una sola
   línea dentro de ese ancho fijo, incluso en el modal angosto.

   display:flex + justify-content:space-between (no grid de 4 columnas
   iguales): con columnas iguales, una palabra corta como "Otro" queda
   pegada al borde IZQUIERDO de su columna y deja todo el sobrante de esa
   columna como aire a la derecha, después de la última casilla — el
   margen derecho visual termina siendo mucho más grande que el
   izquierdo. space-between en cambio ubica la primera casilla pegada al
   margen izquierdo y la última pegada al margen derecho (mismo margen
   que el resto del formulario), reactivo aunque el texto de cada una
   tenga distinto largo. flex-basis:100% en legend/grupo condicional
   fuerza que ocupen su propia línea entera (ver .form-fieldset legend /
   .input-conditional-group). */
.form-fieldset {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
    border: none;
    padding: 0;
    margin: 0 0 18px;
}

.form-fieldset legend {
    flex: 1 0 100%;
    font-size: 0.72rem;
    color: var(--text-color);
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    padding: 0;
}

.input-conditional-group {
    flex: 1 0 100%;
    margin-top: 2px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 300;
    color: var(--text-color);
    margin-bottom: 0;
    cursor: pointer;
    white-space: nowrap;
}

.checkbox-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--text-color);
    cursor: pointer;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.form-btn,
.form-btn-main {
    flex: 1;
    text-align: center;
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
    font-family: var(--font-geist);
    transition: all 0.2s ease;
}

.form-btn {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--surface-border);
}

.form-btn:hover {
    border-color: var(--text-color);
    background-color: rgba(255, 255, 255, 0.07);
}

.form-btn-main {
    background: rgba(255, 255, 255, 0.5);
    color: var(--bg-navy);
    border: none;
}

.form-btn-main:hover {
    background: var(--text-color);
    font-weight: 600;
}

@media (max-width: 600px) {
    .nav-panel { width: 100%; }
    .main { padding: calc(var(--header-h) + 24px) 20px calc(var(--footer-h) + 24px); }

    /* Sin fondo.jpg, el header/footer fijos son transparentes de verdad
       (antes dejaban ver la imagen detrás; ahora dejan ver el contenido
       que scrollea por abajo, superpuesto). Vidrio esmerilado en vez de
       opaco liso: mismo tinte que --bg-navy, con transparencia + blur —
       separa el contenido sin perder la sensación de capa flotante que
       tiene en escritorio (ahí no hace falta: el contenido nunca llega a
       superponerse). rgba(20,20,20,...) son los componentes de #141414. */
    .header-stack {
        background-color: rgba(20, 20, 20, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .site-footer {
        background-color: rgba(20, 20, 20, 0.82);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}