/* ==========================================================================
   NEXUS 2026 — main.css (todos los estilos del sitio)
   Secciones: 1) base, tokens y home · 2) plantilla (nav/footer) · 3) programa
   ========================================================================== */

/* ##########  1. BASE, TOKENS Y PÁGINA DE INICIO  ########## */

/* ================================================================
   Yerk — display de marca (design.md §4)

   La familia sólo existe en peso 400. Se declara cubriendo el rango
   400–900 para que el navegador la use tal cual en los pesos altos
   en lugar de fabricar una negrita sintética, y para que Orbitron 900
   siga siendo un fallback con cuerpo real si el archivo no carga.
   ================================================================ */
@font-face {
    font-family: "Yerk";
    src: url("fonts/Yerk/Yerk-Regular.woff2") format("woff2"),
         url("fonts/Yerk/Yerk-Regular.otf") format("opentype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* ================================================================
   NEXUS 2026 — tokens (design.md §11)
   ================================================================ */
:root {
    /* Principal */
    --nx-void: #000319;
    --nx-indigo: #2D069A;
    --nx-blue: #0041EC;
    --nx-cyan: #6BD1F8;
    --nx-purple: #9B5EFC;
    --nx-blue-mid: #3E5FE6;

    /* Áreas */
    --nx-area-salud: #5BBDF4;
    --nx-area-innovacion: #BBD861;
    --nx-area-sociales: #F25FBE;
    --nx-area-economico: #FCC24C;

    /* Superficies y texto */
    --nx-surface: #070B26;
    --nx-surface-2: #0D1440;
    --nx-border: rgba(107, 209, 248, 0.18);
    --nx-text: #FFFFFF;
    --nx-text-muted: rgba(255, 255, 255, 0.72);
    --nx-text-dim: rgba(255, 255, 255, 0.48);

    /* Tipografía */
    --nx-font-display: "Yerk", "Orbitron", system-ui, sans-serif;
    --nx-font-tech: "Orbitron", system-ui, sans-serif;
    --nx-font-body: "Montserrat", system-ui, -apple-system, sans-serif;

    /* Degradados y efectos */
    --nx-gradient-brand: linear-gradient(90deg, #0041EC 0%, #3E5FE6 45%, #9B5EFC 100%);
    --nx-gradient-blob: radial-gradient(circle at 30% 30%, #6BD1F8 0%, #0041EC 45%, #2D069A 75%, transparent 100%);
    --nx-gradient-page: radial-gradient(120% 90% at 10% 100%, #0041EC 0%, #001049 40%, #000319 75%);
    --nx-glow-blue: 0 0 24px rgba(0, 65, 236, 0.55), 0 0 64px rgba(0, 65, 236, 0.28);
    --nx-glow-cyan: 0 0 20px rgba(107, 209, 248, 0.50), 0 0 56px rgba(107, 209, 248, 0.22);

    /* Forma y movimiento */
    --nx-radius-sm: 8px;
    --nx-radius-md: 16px;
    --nx-radius-lg: 24px;
    --nx-radius-pill: 999px;
    --nx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nx-dur-fast: 160ms;
    --nx-dur-base: 240ms;
    --nx-dur-slow: 600ms;

    /* Layout (design.md §8) */
    --nx-max: 1280px;
    --nx-gutter: clamp(24px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* La pieza está pensada para una sola pantalla: la escala tipográfica
   depende del alto además del ancho, así que el contenido se comprime
   en lugar de crecer. Pero el alto es mínimo, no fijo: donde de verdad
   no quepa (móviles muy pequeños) la página se desplaza en vez de
   recortar contenido. */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    overflow-y: auto;
    background-color: var(--nx-void);
    background-image: var(--nx-gradient-page);
    background-attachment: fixed;
    color: var(--nx-text);
    font-family: var(--nx-font-body);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--nx-cyan); }

/* Foco visible en cian — design.md §12 regla 9 */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--nx-cyan);
    outline-offset: 2px;
    border-radius: var(--nx-radius-sm);
}

.nx-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   Atmósfera: red de nodos, blob de luz, ruido (design.md §7)
   ================================================================ */
.nx-network {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Un solo blob dominante por pantalla, nunca al centro tras el texto */
.nx-blob {
    position: fixed;
    inset-block-start: -18%;
    inset-inline-end: -20%;
    inline-size: 52vw;
    block-size: 52vw;
    min-inline-size: 320px;
    min-block-size: 320px;
    background: var(--nx-gradient-blob);
    filter: blur(80px);
    opacity: 0.5;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: nx-drift 28s var(--nx-ease) infinite alternate;
}

@keyframes nx-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-6%, 5%, 0) scale(1.08); }
}

/* Velo de contraste. El degradado de página pone #0041EC puro en la
   esquina inferior izquierda — justo bajo el pie —, donde los colores
   de área caían a 3.07:1. Este velo es la inversa exacta de esa luz:
   oscurece donde el fondo se aclara y se desvanece a cero donde ya es
   void, así que recupera legibilidad sin apagar la atmósfera.
   Mismo recurso que design.md §5.2 prescribe antes de poner el logo
   sobre una zona brillante. */
.nx-scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 10% 100%,
                rgba(0, 3, 25, 0.62) 0%,
                rgba(0, 3, 25, 0.34) 40%,
                rgba(0, 3, 25, 0) 72%);
}

/* Ruido al 4% para evitar bandeado en los degradados (design.md §7) */
.nx-noise {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================================
   Shell: dos filas dentro de una pantalla — el núcleo, que absorbe
   el espacio sobrante, y el pie, que ocupa sólo lo suyo.
   (design.md §8: ancho máximo 1280 y canal lateral fluido)

   Toda medida de tipo usa min(vw, vh): en pantallas bajas manda el
   alto, así el bloque se comprime en vez de desbordar el viewport.
   ================================================================ */
.nx-shell {
    position: relative;
    z-index: 3;
    /* el halo del lockup (::before) se sale del contenedor en pantallas angostas: se recorta en horizontal */
    overflow-x: clip;
    min-block-size: calc(100svh - var(--nx-nav-h, 0px));
    max-inline-size: var(--nx-max);
    margin-inline: auto;
    padding: clamp(18px, 4vh, 56px) var(--nx-gutter);
    display: grid;
    /* minmax(0, 1fr) es la corrección clave: sin el 0 explícito, la
       columna implícita es `auto` y el min-content de cualquier hijo
       (la tira de áreas mide 894px sin envolver) la estira por encima
       del viewport, arrastrando consigo al botón y a las fechas. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(14px, 3vh, 40px);
}

/* El núcleo reparte identidad y datos. En pantallas anchas van lado a
   lado: se gasta el espacio horizontal en vez de crecer hacia abajo. */
.nx-core {
    min-block-size: 0;
    min-inline-size: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(20px, 4vh, 52px) clamp(32px, 5vw, 88px);
}

.nx-eyebrow {
    margin: 0;
    font-family: var(--nx-font-body);
    font-weight: 700;
    font-size: clamp(13px, min(1.7vw, 2.2vh), 20px);
    letter-spacing: 0.30em;
    text-transform: uppercase;
    /* Cian, no gris: §12 regla 3 lo designa como el color de acento
       sobre fondo oscuro. El gris al 48% daba 4.93:1; esto da 11.78:1.
       Es además el color de reserva si el navegador no recorta el
       degradado sobre el texto (ver .nx-grad más abajo). */
    color: var(--nx-cyan);
    inline-size: fit-content;
}

/* --- Lockup vertical (design.md §5.1): NEXUS + bajada + regla +
       edición + descriptor. §5.3 prohíbe reordenar o reescribir sus
       elementos, así que este bloque se mantiene íntegro en todos los
       tamaños: cuando falta alto se comprime, nunca se desarma.
       Se encoge al ancho de su contenido para que la regla mida
       exactamente lo que el lockup, no la columna. */
.nx-lede {
    inline-size: fit-content;
    max-inline-size: min(68ch, 100%);
}

.nx-wordmark {
    margin: 0;
    font-family: var(--nx-font-display);
    font-weight: 900;
    font-size: clamp(2.25rem, min(10.5vw, 12vh), 7rem);
    line-height: 1.02;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--nx-text);
    /* La luz viene del contenido, pero el texto es legible sin ella */
    text-shadow: 0 0 28px rgba(0, 65, 236, 0.55), 0 0 72px rgba(155, 94, 252, 0.30);
}

.nx-tagline {
    margin: clamp(8px, 1.8vh, 18px) 0 0;
    font-family: var(--nx-font-tech);
    font-weight: 500;
    font-size: clamp(0.8125rem, min(1.9vw, 2.3vh), 1.375rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nx-purple);
}

/* Regla del lockup: hereda el color de la bajada que tiene encima */
.nx-lockup-rule {
    block-size: 1px;
    margin-block: clamp(10px, 2.2vh, 22px);
    background: rgba(155, 94, 252, 0.55);
}

.nx-edition {
    margin: 0;
    font-family: var(--nx-font-body);
    font-weight: 700;
    font-size: clamp(15px, min(2vw, 2.5vh), 26px);
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nx-text);
}

.nx-descriptor {
    margin: clamp(4px, 0.9vh, 9px) 0 0;
    font-family: var(--nx-font-body);
    font-weight: 500;
    font-size: clamp(12px, min(1.55vw, 1.95vh), 19px);
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nx-text);
}

/* --- Columna de datos: reloj, fechas y llamada a la acción --- */
.nx-data {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-inline-size: 0;
    gap: clamp(16px, 3.2vh, 40px);
    align-content: center;
}

.nx-countdown > .nx-eyebrow { margin-bottom: clamp(10px, 2.2vh, 24px); }

/* El reloj tiene un solo foco visual (design.md §2.3): la unidad mayor
   domina y las demás quedan subordinadas en una fila de apoyo.
   El envoltorio se encoge al ancho real del reloj para que el medidor
   mida exactamente lo mismo que el contador, no el ancho del shell. */
.nx-clock-wrap {
    inline-size: fit-content;
    max-inline-size: 100%;
}

.nx-num {
    display: block;
    font-family: var(--nx-font-display);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--nx-text);
    transition: text-shadow var(--nx-dur-slow) var(--nx-ease);
}

/* Pulso de luz al cambiar, no un rebote (design.md §2.6) */
.nx-num.is-ticking {
    transition-duration: var(--nx-dur-fast);
}

.nx-lbl {
    font-family: var(--nx-font-tech);
    font-weight: 500;
    text-transform: uppercase;
    display: block;
}

/* --- Unidad dominante --- */
.nx-lead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: clamp(14px, 2.6vw, 28px);
}

.nx-lead .nx-num {
    font-size: clamp(3rem, min(15vw, 18vh), 9.375rem);
    line-height: 0.82;
    text-shadow: 0 0 32px rgba(107, 209, 248, 0.28), 0 0 90px rgba(0, 65, 236, 0.22);
}

.nx-lead .nx-num.is-ticking {
    text-shadow: 0 0 38px rgba(107, 209, 248, 0.62), 0 0 110px rgba(0, 65, 236, 0.40);
}

.nx-lead .nx-lbl {
    font-size: clamp(16px, min(2.1vw, 2.6vh), 24px);
    letter-spacing: 0.28em;
    color: var(--nx-cyan);
    padding-block-end: clamp(6px, 1.2vw, 14px);
}

/* Degradado blanco -> cian recortado sobre el texto, con halo.
   El glow va en `filter: drop-shadow` y no en `text-shadow` a
   propósito: con el relleno transparente, una sombra de texto se
   vería A TRAVÉS de las letras como un borrón; drop-shadow actúa
   sobre el alfa ya compuesto y sólo rodea la silueta. Es el mismo
   criterio que design.md §3.4 fija para el isotipo.

   Los dos extremos del degradado son colores del sistema y ambos
   pasan AAA sobre el fondo: blanco 20.45:1 y cian 11.78:1. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .nx-eyebrow,
    .nx-lead .nx-lbl {
        background-image: linear-gradient(100deg, #FFFFFF 0%, #C7E7FB 45%, var(--nx-cyan) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .nx-eyebrow {
        filter: drop-shadow(0 0 9px rgba(107, 209, 248, 0.40))
                drop-shadow(0 0 22px rgba(0, 65, 236, 0.30));
    }

    .nx-lead .nx-lbl {
        filter: drop-shadow(0 0 12px rgba(107, 209, 248, 0.55))
                drop-shadow(0 0 30px rgba(0, 65, 236, 0.38));
    }
}

/* --- Unidades de apoyo --- */
.nx-sub {
    display: flex;
    max-inline-size: 100%;
    margin-block-start: clamp(14px, 3vh, 36px);
}

/* En el último minuto no queda ninguna unidad de apoyo */
.nx-sub:empty { display: none; }

.nx-sub-unit {
    position: relative;
    padding-inline: clamp(14px, 2.6vw, 32px);
}

.nx-sub-unit:first-child { padding-inline-start: 0; }

.nx-sub-unit + .nx-sub-unit {
    border-inline-start: 1px solid var(--nx-border);
}

/* Nodo luminoso en el vértice del hairline: eco del isotipo (§1) */
.nx-sub-unit + .nx-sub-unit::before {
    content: "";
    position: absolute;
    inset-block-start: -2px;
    inset-inline-start: -3px;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--nx-cyan);
    box-shadow: 0 0 8px var(--nx-cyan);
    opacity: 0.75;
}

.nx-sub .nx-num {
    font-size: clamp(1.5rem, min(4.2vw, 5.2vh), 2.75rem);
    line-height: 1;
    text-shadow: 0 0 18px rgba(107, 209, 248, 0.18);
}

.nx-sub .nx-num.is-ticking {
    text-shadow: 0 0 24px rgba(107, 209, 248, 0.55);
}

.nx-sub .nx-lbl {
    margin-block-start: clamp(6px, 1.2vh, 10px);
    font-size: clamp(12px, min(1.3vw, 1.6vh), 15px);
    letter-spacing: 0.2em;
    color: var(--nx-cyan);
    text-shadow: 0 0 12px rgba(107, 209, 248, 0.32);
}

/* --- Medidor: la luz avanza con los segundos --- */
.nx-meter {
    position: relative;
    margin-block-start: clamp(16px, 3.2vh, 44px);
    block-size: 2px;
    border-radius: 2px;
    background: var(--nx-border);
    transform-origin: left center;
    animation: nx-meter-in 900ms var(--nx-ease) both;
}

@keyframes nx-meter-in {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

.nx-meter-fill {
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: var(--nx-gradient-brand);
    /* Se recorta en vez de escalar, para que el degradado no se deforme */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 950ms linear;
}

.nx-meter-head {
    position: absolute;
    top: 50%;
    left: 0;
    inline-size: 7px;
    block-size: 7px;
    margin-left: -3.5px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--nx-cyan);
    box-shadow: var(--nx-glow-cyan);
    opacity: 0;
    transition: left 950ms linear, opacity var(--nx-dur-base) var(--nx-ease);
}

/* Al reiniciar el ciclo la luz vuelve al origen sin barrer hacia atrás */
.nx-meter.is-rewinding .nx-meter-fill,
.nx-meter.is-rewinding .nx-meter-head {
    transition: none;
}

/* Estado final: el congreso comenzó */
.nx-live {
    display: none;
    font-family: var(--nx-font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, min(5vw, 6vh), 3.5rem);
    line-height: 1.1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin: 0;
    color: var(--nx-text);
    text-shadow: var(--nx-glow-cyan);
}

.is-live .nx-clock { display: none; }
.is-live .nx-meter { display: none; }
.is-live .nx-live  { display: block; }

/* --- Fechas, modalidad, acciones --- */
/* Van juntas en un bloque: el gap del shell separa secciones, no estas dos. */
.nx-dates {
    margin: 0;
    font-family: var(--nx-font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, min(3.4vw, 4.2vh), 2.5rem);
    line-height: 1.15;
    text-wrap: balance;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nx-text);
}

.nx-dates em {
    font-style: normal;
    color: var(--nx-cyan);
}

/* Cada grupo es indivisible: la línea entra entera donde hay sitio y
   se parte por su junta natural donde no, en vez de cortar por
   cualquier espacio ni depender de un margen de 0.2px. */
.nx-dates > span { display: inline-block; white-space: nowrap; }

.nx-mode {
    margin: clamp(6px, 1.2vh, 12px) 0 0;
    font-size: clamp(13px, min(1.4vw, 1.8vh), 16px);
    letter-spacing: 0.02em;
    color: var(--nx-cyan);
}

.nx-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-block-start: 0;
}

.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Medidas fijas: design.md §9 define el botón en 15px con
       padding 14×32. No escala con el viewport — escalarlo lo dejaba
       en 12px justo en móvil, que es donde más cuerpo necesita. */
    padding: 14px 32px;
    border-radius: var(--nx-radius-pill);
    font-family: var(--nx-font-tech);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--nx-dur-base) var(--nx-ease),
                border-color var(--nx-dur-base) var(--nx-ease),
                box-shadow var(--nx-dur-base) var(--nx-ease),
                color var(--nx-dur-base) var(--nx-ease);
}

/* En pantalla táctil el objetivo mínimo son 44px (WCAG 2.5.8). Se
   fijan 48 para dejar holgura sobre ese piso, no justo encima. */
@media (pointer: coarse) {
    .nx-btn { min-block-size: 48px; }
}

.nx-btn--primary {
    background: var(--nx-blue);
    border: 1px solid var(--nx-blue);
    color: #FFFFFF; /* 7.08:1 sobre el azul eléctrico */
}

.nx-btn--primary:hover {
    background: var(--nx-blue-mid);
    border-color: var(--nx-blue-mid);
    box-shadow: var(--nx-glow-blue);
}

/* --- Pie: áreas + firma --- */
.nx-foot {
    min-inline-size: 0;
    padding-block-start: clamp(10px, 2vh, 28px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 2vh, 24px);
}

.nx-areas {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6px, 1.2vh, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nx-chip {
    display: inline-block;
    padding: 7px 16px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid currentColor;
    background: rgba(0, 3, 25, 0.55);
    font-family: var(--nx-font-tech);
    font-weight: 500;
    /* 12px fijos: design.md §9 (badge/chip) */
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* El borde va al 40%, el texto al 100% (design.md §9 badge) */
.nx-chip--salud      { color: var(--nx-area-salud);      border-color: color-mix(in srgb, var(--nx-area-salud) 40%, transparent); }
.nx-chip--innovacion { color: var(--nx-area-innovacion); border-color: color-mix(in srgb, var(--nx-area-innovacion) 40%, transparent); }
.nx-chip--sociales   { color: var(--nx-area-sociales);   border-color: color-mix(in srgb, var(--nx-area-sociales) 40%, transparent); }
.nx-chip--economico  { color: var(--nx-area-economico);  border-color: color-mix(in srgb, var(--nx-area-economico) 40%, transparent); }

.nx-brand {
    margin: 0;
    font-family: var(--nx-font-tech);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nx-cyan);
    text-shadow: 0 0 12px rgba(107, 209, 248, 0.3);
}

.nx-brand a { color: inherit; text-decoration: none; }
.nx-brand a:hover { color: var(--nx-text); }

/* ================================================================
   Hero — mejoras de presentación
   Panel de cristal para el bloque de datos, halo tras el lockup,
   insignias de estado y botón secundario.
   ================================================================ */

/* Halo de luz tras el lockup: la luz viene del contenido (design.md §2.2) */
.nx-lede { position: relative; }

.nx-lede::before {
    content: "";
    position: absolute;
    inset: -18% -22% -18% -12%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(0, 65, 236, 0.30), rgba(45, 6, 154, 0.14) 55%, transparent 100%);
    filter: blur(24px);
    pointer-events: none;
}

/* Bloque de datos como panel de cristal con filo de luz arriba */
.nx-data {
    position: relative;
    padding: clamp(20px, 3.4vh, 36px) clamp(20px, 2.6vw, 40px);
    border-radius: var(--nx-radius-lg);
    border: 1px solid var(--nx-border);
    background: linear-gradient(160deg, rgba(13, 20, 64, 0.55), rgba(7, 11, 38, 0.35));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 64px rgba(0, 3, 25, 0.5);
}

.nx-data::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: clamp(20px, 2.6vw, 40px);
    block-size: 2px;
    border-radius: 2px;
    background: var(--nx-gradient-brand);
    box-shadow: 0 0 14px rgba(62, 95, 230, 0.8);
}

/* Fechas y estado, separados del reloj por un filete */
.nx-meta { padding: 0; }

.nx-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: clamp(10px, 1.8vh, 16px) 0 0;
    padding: 0;
    list-style: none;
}

.nx-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid var(--nx-border);
    background: rgba(0, 3, 25, 0.55);
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nx-text-muted);
}

.nx-badge--live {
    color: var(--nx-cyan);
    border-color: color-mix(in srgb, var(--nx-cyan) 40%, transparent);
}

.nx-pulse {
    position: relative;
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--nx-cyan);
    box-shadow: 0 0 10px var(--nx-cyan);
}

.nx-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--nx-cyan);
    animation: nx-pulse 2.4s var(--nx-ease) infinite;
}

@keyframes nx-pulse {
    from { transform: scale(1); opacity: 0.8; }
    to   { transform: scale(3); opacity: 0; }
}

/* Botón secundario: contorno cian, sin competir con el primario */
.nx-btn--ghost {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--nx-cyan) 45%, transparent);
    color: var(--nx-cyan);
}

.nx-btn--ghost:hover {
    background: rgba(107, 209, 248, 0.10);
    border-color: var(--nx-cyan);
    box-shadow: var(--nx-glow-cyan);
}

@media (max-height: 700px) {
    .nx-data { padding-block: 14px; }
    .nx-badges { margin-block-start: 8px; }
}

@media (max-height: 560px) {
    .nx-lede::before { display: none; }
}

/* ================================================================
   Hero — elementos del key visual (assets/2026/img)
   ================================================================ */

/* Lóbulos de luz de los costados: arte del key visual, con fundido
   hacia el centro para que nunca compita con el texto. */
.nx-hero-art {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 100svh;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.nx-hero-art img {
    position: absolute;
    inset-block-start: 0;
    block-size: 100%;
    inline-size: auto;
    max-inline-size: 34vw;
    object-fit: cover;
    opacity: 0.95;
    will-change: transform, opacity;
}

.nx-hero-art-l {
    inset-inline-start: 0;
    object-position: left center;
    -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
    mask-image: linear-gradient(to right, #000 62%, transparent 100%);
    transform-origin: left center;
    animation: nx-lobe-l 16s ease-in-out infinite alternate;
}

.nx-hero-art-r {
    inset-inline-end: 0;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%);
    mask-image: linear-gradient(to left, #000 62%, transparent 100%);
    transform-origin: right center;
    animation: nx-lobe-r 19s ease-in-out -6s infinite alternate;
}

/* Movimiento de los lóbulos: deriva lenta y respiración de luz, como luz líquida
   (design.md §2.6: transiciones lentas, nada rebota). Desfasados entre sí para que
   no se muevan al unísono. Se apagan con prefers-reduced-motion (regla global). */
@keyframes nx-lobe-l {
    0%   { transform: translate3d(0, 0, 0) scale(1.04); opacity: 0.85; }
    50%  { transform: translate3d(14px, -16px, 0) scale(1.09) rotate(0.6deg); opacity: 1; }
    100% { transform: translate3d(-6px, 14px, 0) scale(1.05) rotate(-0.5deg); opacity: 0.9; }
}

@keyframes nx-lobe-r {
    0%   { transform: translate3d(0, 0, 0) scale(1.04); opacity: 0.9; }
    50%  { transform: translate3d(-14px, 18px, 0) scale(1.09) rotate(-0.6deg); opacity: 1; }
    100% { transform: translate3d(6px, -12px, 0) scale(1.05) rotate(0.5deg); opacity: 0.85; }
}

@media (max-width: 767px) {
    .nx-hero-art img { max-inline-size: 30vw; opacity: 0.55; }

    @keyframes nx-lobe-l {
        0%   { transform: translate3d(0, 0, 0) scale(1.04); }
        100% { transform: translate3d(8px, -10px, 0) scale(1.08); }
    }

    @keyframes nx-lobe-r {
        0%   { transform: translate3d(0, 0, 0) scale(1.04); }
        100% { transform: translate3d(-8px, 10px, 0) scale(1.08); }
    }
}

/* Isotipo oficial sobre el wordmark */
.nx-isotipo {
    display: block;
    inline-size: auto;
    block-size: clamp(64px, 13vh, 132px);
    margin: 0 0 clamp(6px, 1.4vh, 14px) -4px;
    filter: drop-shadow(0 0 22px rgba(0, 65, 236, 0.55));
}

@media (max-height: 700px) {
    .nx-isotipo { block-size: 52px; }
}

@media (max-height: 560px) {
    .nx-isotipo { display: none; }
}

/* Isotipo pequeño en el nav */
.nx-nav-iso {
    align-self: center;
    inline-size: 30px;
    block-size: 30px;
    margin-inline-end: -2px;
}

/* Hero con la cuenta regresiva integrada: el reloj va dentro del panel.
   En pantallas anchas, reloj a la izquierda y fechas + botones a la derecha. */
body:not(.nx-solo) .nx-data {
    inline-size: min(100%, 1040px);
    padding-block: clamp(16px, 2.6vh, 28px);
}

/* El rótulo "Cuenta regresiva" se conserva para lectores de pantalla, pero el reloj se explica solo */
body:not(.nx-solo) .nx-countdown > .nx-eyebrow {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Hero más compacto para que lockup + reloj + datos + áreas entren en una vista */
body:not(.nx-solo) .nx-wordmark { font-size: clamp(2.25rem, min(9vw, 10.5vh), 6rem); }
body:not(.nx-solo) .nx-isotipo { block-size: clamp(52px, 10vh, 110px); }
body:not(.nx-solo) .nx-dates { font-size: clamp(1.15rem, min(2.4vw, 3.4vh), 2rem); }
body:not(.nx-solo) .nx-sub { margin-block-start: clamp(8px, 1.8vh, 20px); }
body:not(.nx-solo) .nx-meter { margin-block-start: clamp(10px, 2vh, 22px); }
body:not(.nx-solo) .nx-badges { margin-block-start: clamp(8px, 1.4vh, 14px); }
body:not(.nx-solo) .nx-actions { gap: 10px; }
body:not(.nx-solo) .nx-actions .nx-btn { padding: 12px 20px; font-size: 13px; letter-spacing: 0.08em; }

@media (min-width: 768px) and (max-height: 680px) {
    body:not(.nx-solo) .nx-isotipo { display: none; }
    body:not(.nx-solo) .nx-data { padding-block: 12px; }
    body:not(.nx-solo) .nx-lead .nx-num { font-size: clamp(2.5rem, min(8vw, 9vh), 4.5rem); }
}

@media (min-width: 768px) and (max-height: 820px) {
    body:not(.nx-solo) .nx-wordmark { font-size: clamp(2.25rem, min(8vw, 9vh), 5rem); }
    body:not(.nx-solo) .nx-isotipo { block-size: clamp(44px, 8vh, 80px); }
    body:not(.nx-solo) .nx-tagline { margin-block-start: 6px; }
    body:not(.nx-solo) .nx-lockup-rule { margin-block: 8px; }
}

body:not(.nx-solo) .nx-countdown { padding-block-end: clamp(14px, 2.4vh, 22px); border-block-end: 1px solid var(--nx-border); }
body:not(.nx-solo) .nx-meta { padding-block-start: 0; }
body:not(.nx-solo) .nx-lead .nx-num { font-size: clamp(2.75rem, min(8vw, 10vh), 5.5rem); }

@media (min-width: 900px) {
    body:not(.nx-solo) .nx-data {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: clamp(24px, 4vw, 64px);
        align-items: center;
    }

    body:not(.nx-solo) .nx-countdown {
        grid-row: 1 / span 2;
        padding: 0 clamp(24px, 4vw, 64px) 0 0;
        border-block-end: 0;
        border-inline-end: 1px solid var(--nx-border);
    }
}

/* ================================================================
   Portada de la raíz (body.nx-solo): sólo la cuenta regresiva.
   Deshace la composición centrada del hero y devuelve la original:
   lockup a la izquierda, reloj y datos a la derecha, sin nav ni panel.
   ================================================================ */
.nx-solo { --nx-nav-h: 0px; padding-block-start: 0; }

.nx-solo .nx-core { justify-items: stretch; text-align: start; }
.nx-solo .nx-lede { margin-inline: 0; text-align: start; }
.nx-solo .nx-lede::before { display: none; }

.nx-solo .nx-data {
    inline-size: auto;
    padding: 0;
    text-align: start;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.nx-solo .nx-data::before { display: none; }
.nx-solo .nx-countdown > .nx-eyebrow,
.nx-solo .nx-clock-wrap { margin-inline: 0; }
.nx-solo .nx-lead,
.nx-solo .nx-sub,
.nx-solo .nx-badges,
.nx-solo .nx-actions { justify-content: flex-start; }
.nx-solo .nx-areas { justify-content: flex-start; }
.nx-solo .nx-foot { justify-content: space-between; }

@media (min-width: 1024px), (min-width: 620px) and (max-height: 620px) {
    .nx-solo .nx-core { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
    .nx-solo .nx-lede { align-self: center; }
}

@media (max-height: 700px) {
    .nx-solo .nx-countdown > .nx-eyebrow { display: none; }
}

@media (max-width: 767px) {
    .nx-solo .nx-foot { justify-content: center; }
    .nx-solo .nx-areas { justify-content: normal; }
}

@media (max-height: 560px) {
    .nx-solo .nx-foot { justify-content: flex-end; }
}

/* Entradas escalonadas (fade + 16px, design.md §10)
   ================================================================ */
.nx-reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: nx-in var(--nx-dur-slow) var(--nx-ease) forwards;
}

/* Retardos explícitos: el orden de entrada no depende de la posición
   en el DOM, que ahora cambia entre una y dos columnas. */
.nx-d1 { animation-delay:  80ms; }
.nx-d2 { animation-delay: 200ms; }
.nx-d3 { animation-delay: 320ms; }
.nx-d4 { animation-delay: 420ms; }
.nx-d5 { animation-delay: 520ms; }

@keyframes nx-in {
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   Responsive
   ================================================================ */
/* Composición centrada, como el key visual (assets/2026/ejemplos/completo.webp):
   lockup al centro entre los lóbulos de luz, y debajo el panel con el
   reloj, las fechas y la llamada a la acción. En pantallas anchas el panel
   reparte el reloj a la izquierda y los datos a la derecha, para que todo
   quepa en una sola vista. */
.nx-core { justify-items: center; text-align: center; }
.nx-lede { margin-inline: auto; text-align: center; }
.nx-isotipo { margin-inline: auto; }

.nx-data { inline-size: min(100%, 720px); text-align: center; }

.nx-countdown > .nx-eyebrow { margin-inline: auto; }
.nx-clock-wrap { margin-inline: auto; }
.nx-lead { justify-content: center; }
.nx-sub { justify-content: center; }
.nx-badges, .nx-actions { justify-content: center; }
.nx-areas, .nx-foot { justify-content: center; }

@media (max-width: 767px) {
    .nx-lead { gap: 12px; }
    .nx-lead .nx-lbl { letter-spacing: 0.22em; }
    .nx-actions .nx-btn { flex: 1 1 100%; }
    .nx-foot { flex-direction: column; align-items: flex-start; }

    /* Las cuatro áreas, con su nombre íntegro y centradas. Dos
       columnas y el texto envolviendo DENTRO de la pastilla es la
       única forma de que quepan sin que cada una ocupe su propia
       fila (serían 4 filas, +127px, imposible en una pantalla).
       'ADMINISTRATIVAS' mide 147px indivisibles, así que la celda
       necesita ese ancho: se cumple desde 390px.
       La tira deslizante que hubo antes sólo dejaba ver la primera,
       y nadie descubría que se arrastraba. */
    .nx-areas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        inline-size: 100%;
        max-inline-size: 380px;
        margin-inline: auto;
    }

    .nx-foot { align-items: center; text-align: center; }

    /* Las celdas se igualan en alto, así que una pastilla de una sola
       línea ("Salud") queda tan alta como su vecina de dos. Como
       bloque, su texto se quedaba pegado arriba: en flex se centra
       en los dos ejes y la pastilla se ve equilibrada. */
    .nx-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        white-space: normal;
        text-align: center;
        overflow-wrap: break-word;
    }
}

/* Reducción progresiva: cuando falta alto se retira lo accesorio, en
   este orden y nunca más allá. El reloj, las fechas y la llamada a la
   acción se quedan siempre.

   Primero el rótulo del reloj, que es prescindible porque la cifra se
   explica sola. Cae también en pantallas muy angostas, donde su
   interletrado de 0.30em lo parte en dos líneas. */
/* En pantallas angostas el blob del fondo se pega al borde en vez de salirse (sale en el ancho del documento) */
@media (max-width: 480px) {
    .nx-blob {
        inset-inline-end: 0;
        min-inline-size: 240px;
        min-block-size: 240px;
    }
}

@media (max-width: 360px) {
    .nx-btn { padding-inline: 16px; font-size: 13px; letter-spacing: 0.06em; text-align: center; }
    .nx-sub-unit { padding-inline: 10px; }
    .nx-sub .nx-lbl { font-size: 11px; letter-spacing: 0.12em; }
    .nx-lead .nx-lbl { letter-spacing: 0.14em; }
    .nx-countdown > .nx-eyebrow { display: none; }
}

/* Después, el ritmo vertical: los mismos bloques, más juntos. Es lo
   que paga las dos filas de pastillas del pie. */
@media (max-height: 700px) {
    .nx-core { gap: clamp(16px, 3.2vh, 52px) clamp(32px, 5vw, 88px); }
    .nx-data { gap: clamp(13px, 2.6vh, 40px); }
    .nx-meter { margin-block-start: clamp(14px, 2.6vh, 44px); }
}

/* Último recurso, por debajo de 560px de alto: se retiran las áreas
   —son contexto, no información que nadie venga a buscar aquí— y el
   botón cede algo de aire interno. Su tipografía no baja de 15px:
   encoger el texto de la única acción de la página sería justo lo
   contrario de lo que pide una pantalla apretada. */
@media (max-height: 560px) {
    .nx-areas { display: none; }
    .nx-foot { justify-content: flex-end; }
    .nx-btn { padding: 11px 26px; }
}

/* ================================================================
   design.md §12 regla 10: nada se mueve fuera de reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition-duration: 1ms !important;
    }
    .nx-reveal { opacity: 1; transform: none; }
}

/* ##########  2. PLANTILLA: HEADER/NAV Y FOOTER  ########## */

/* ==========================================================================
   NEXUS 2026 — plantilla: header/nav fijo y footer del sitio.
   Los tokens (--nx-*) vienen de cuenta-regresiva.css.
   ========================================================================== */

:root {
    --nx-nav-h: 64px;
}

html { scroll-padding-top: var(--nx-nav-h); }

/* El contenido arranca debajo del nav fijo */
body { padding-block-start: var(--nx-nav-h); }

/* --- Nav --- */
.nx-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 20;
    block-size: var(--nx-nav-h);
    background: rgba(0, 3, 25, 0.62);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--nx-border);
}

.nx-nav-inner {
    block-size: 100%;
    max-inline-size: var(--nx-max);
    margin-inline: auto;
    padding-inline: var(--nx-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.nx-nav-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--nx-text);
    text-decoration: none;
}

.nx-nav-wordmark {
    font-family: var(--nx-font-display);
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nx-nav-year {
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--nx-cyan);
}

.nx-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 3vw, 32px);
}

.nx-nav-links a {
    color: var(--nx-text-muted);
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--nx-dur-base) var(--nx-ease);
}

.nx-nav-links a:hover { color: var(--nx-cyan); }

.nx-nav-links .nx-nav-cta {
    padding: 9px 18px;
    border-radius: var(--nx-radius-pill);
    background: var(--nx-blue);
    color: var(--nx-text);
    transition: background var(--nx-dur-base) var(--nx-ease), box-shadow var(--nx-dur-base) var(--nx-ease);
}

.nx-nav-links .nx-nav-cta:hover {
    background: var(--nx-blue-mid);
    color: var(--nx-text);
    box-shadow: var(--nx-glow-blue);
}

/* Nav en pantallas angostas: sólo el isotipo como marca, para que quepan los enlaces y el botón */
@media (max-width: 840px) {
    .nx-nav-wordmark, .nx-nav-year { display: none; }
}

/* Pantallas muy angostas: el nav conserva lo esencial (isotipo, Programa y Registro) */
@media (max-width: 620px) {
    .nx-nav-links a:first-child { display: none; }
}

@media (max-width: 440px) {
    .nx-nav-links a:nth-child(4) { display: none; }
}

@media (max-width: 340px) {
    .nx-nav-links a:nth-child(2) { display: none; }
}

@media (max-width: 480px) {
    .nx-nav-year { display: none; }
    .nx-nav-links { gap: 12px; }
    .nx-nav-links a { font-size: 11px; letter-spacing: 0.08em; }
    .nx-nav-links .nx-nav-cta { padding: 8px 12px; }
}

/* --- Footer del sitio --- */
.nx-sitefoot {
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, rgba(0, 3, 25, 0) 0%, rgba(0, 3, 25, 0.82) 22%, rgba(0, 3, 25, 0.92) 100%);
    overflow: hidden;
}

/* Filo de luz con el degradado de marca en el borde superior */
.nx-sitefoot::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--nx-blue) 25%, var(--nx-purple) 60%, transparent 100%);
    box-shadow: 0 0 18px rgba(62, 95, 230, 0.7);
}

/* Resplandor azul que sube desde el fondo, como el degradado de página */
.nx-sitefoot::after {
    content: "";
    position: absolute;
    inset-inline: -10%;
    inset-block-end: -40%;
    block-size: 80%;
    background: radial-gradient(closest-side, rgba(0, 65, 236, 0.28), transparent 100%);
    pointer-events: none;
}

.nx-sitefoot-inner {
    position: relative;
    z-index: 1;
    max-inline-size: var(--nx-max);
    margin-inline: auto;
    padding: clamp(28px, 5vh, 56px) var(--nx-gutter) clamp(20px, 3vh, 28px);
}

.nx-sitefoot p,
.nx-sitefoot h2 { margin: 0; }

/* --- Rejilla principal --- */
.nx-sitefoot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-block: clamp(32px, 6vh, 60px);
}

@media (min-width: 900px) {
    .nx-sitefoot-grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(32px, 5vw, 80px);
    }
}

.nx-sitefoot-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--nx-text);
    text-decoration: none;
}

.nx-sitefoot-logo img {
    block-size: clamp(44px, 6vw, 60px);
    inline-size: auto;
    filter: drop-shadow(0 0 16px rgba(0, 65, 236, 0.6));
}

.nx-sitefoot-wordmark {
    font-family: var(--nx-font-display);
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nx-sitefoot-year {
    align-self: flex-end;
    padding-block-end: 4px;
    font-family: var(--nx-font-tech);
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--nx-cyan);
}

.nx-sitefoot-tag {
    margin-block-start: 14px !important;
    font-family: var(--nx-font-tech);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nx-purple);
}

.nx-sitefoot-edition {
    margin-block-start: 10px !important;
    font-size: 14px;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nx-text-muted);
}

.nx-sitefoot-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.nx-sitefoot-title {
    margin-block-end: 14px !important;
    font-family: var(--nx-font-tech);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nx-cyan);
}

.nx-sitefoot-title--next { margin-block-start: 28px !important; }

.nx-sitefoot-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.nx-sitefoot-list a {
    color: var(--nx-text-muted);
    font-size: 15px;
    text-decoration: none;
    transition: color var(--nx-dur-base) var(--nx-ease);
}

.nx-sitefoot-list a:hover { color: var(--nx-cyan); }

/* Redes como pastillas */
.nx-sitefoot-social { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }

.nx-sitefoot-social a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid var(--nx-border);
    background: rgba(0, 3, 25, 0.55);
    color: var(--nx-text);
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color var(--nx-dur-base) var(--nx-ease), color var(--nx-dur-base) var(--nx-ease), box-shadow var(--nx-dur-base) var(--nx-ease);
}

.nx-sitefoot-social a:hover {
    border-color: var(--nx-cyan);
    color: var(--nx-cyan);
    box-shadow: var(--nx-glow-cyan);
}

.nx-sitefoot-copy {
    padding-block-start: clamp(16px, 3vh, 24px);
    border-block-start: 1px solid var(--nx-border);
    text-align: center;
    font-size: 13px;
    color: var(--nx-text-dim);
}

/* ##########  3. SECCIÓN PROGRAMA  ########## */

.nx-program {
    position: relative;
    z-index: 3;
    max-inline-size: var(--nx-max);
    margin-inline: auto;
    /* Una sola vista: título, tabs y la fila de actividades caben en el alto de pantalla */
    min-block-size: calc(100svh - var(--nx-nav-h, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 7vh, 88px) var(--nx-gutter) clamp(32px, 6vh, 72px);
}

/* Título y tabs comparten fila: ahorra alto para que todo quepa en una vista */
.nx-program-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px clamp(16px, 3vw, 40px);
    margin-block-end: clamp(14px, 3vh, 28px);
}

.nx-program-title {
    margin: 8px 0 0;
    font-family: var(--nx-font-display);
    font-weight: 400;
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Tabs de días: control segmentado con indicador de luz deslizante --- */
.nx-tablist {
    --i: 0;
    --pad: 6px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: min(100%, 460px);
    margin: 0;
    padding: var(--pad);
    border-radius: var(--nx-radius-lg);
    border: 1px solid var(--nx-border);
    background: rgba(7, 11, 38, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 12px 40px rgba(0, 3, 25, 0.45);
}

/* Móvil: las tabs de día se quedan fijas bajo el nav mientras se recorre el programa.
   El contenedor de cabecera se "disuelve" para que el sticky se mida contra toda la sección. */
@media (max-width: 767px) {
    .nx-program-head { display: contents; }
    .nx-program-title { margin-block-end: clamp(14px, 3vh, 24px) !important; }

    .nx-tablist {
        position: sticky;
        inset-block-start: calc(var(--nx-nav-h, 0px) + 10px);
        z-index: 15;
        align-self: center;
        margin-block-end: clamp(14px, 3vh, 24px);
        background: rgba(7, 11, 38, 0.9);
    }
}

.nx-tablist[hidden] {
    display: none;
}

.nx-tab-glow {
    position: absolute;
    inset-block: var(--pad);
    inset-inline-start: var(--pad);
    inline-size: calc((100% - 2 * var(--pad)) / 3);
    border-radius: calc(var(--nx-radius-lg) - 6px);
    background: var(--nx-gradient-brand);
    box-shadow: var(--nx-glow-blue);
    transform: translateX(calc(var(--i) * 100%));
    transition: transform var(--nx-dur-slow) var(--nx-ease);
    pointer-events: none;
}

.nx-tab {
    appearance: none;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px 13px;
    border: 0;
    border-radius: calc(var(--nx-radius-lg) - 6px);
    background: transparent;
    color: var(--nx-text-muted);
    font: inherit;
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease), background var(--nx-dur-base) var(--nx-ease);
}

.nx-tab:hover:not([aria-selected="true"]) {
    color: var(--nx-text);
    background: rgba(107, 209, 248, 0.08);
}

.nx-tab[aria-selected="true"] {
    color: var(--nx-text);
}

.nx-tab:focus-visible {
    outline-offset: -2px;
}

.nx-tab-num {
    font-family: var(--nx-font-display);
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1;
}

.nx-tab-month {
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
}

.nx-tab-meta {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-align: center;
    color: var(--nx-text-dim);
    transition: color var(--nx-dur-base) var(--nx-ease);
}

.nx-tab[aria-selected="true"] .nx-tab-meta {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 420px) {
    .nx-tab {
        padding-inline: 4px;
    }

    .nx-tab-meta {
        font-size: 10px;
    }
}

@keyframes nx-panel-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nx-program.is-tabs .nx-panel:not([hidden]) {
    animation: nx-panel-in var(--nx-dur-slow) var(--nx-ease);
}

.nx-panel+.nx-panel {
    margin-block-start: clamp(32px, 5vw, 48px);
}

/* Sin JS: todos los días se apilan y las tabs no aparecen. Con JS, un solo panel. */
.nx-program.is-tabs .nx-panel[hidden] {
    display: none;
}

/* Tablet y escritorio: todos los días comparten la misma celda de la rejilla, así el
   contenedor mide siempre lo que el día más alto y la página no cambia de alto (ni
   mueve el scroll) al elegir otro día. Los días ocultos siguen ocupando su sitio pero
   sin verse, sin recibir clics ni foco. */
@media (min-width: 768px) {
    .nx-panels {
        display: grid;
    }

    .nx-panels > .nx-panel {
        grid-area: 1 / 1;
        margin: 0;
    }

    .nx-program.is-tabs .nx-panel[hidden] {
        display: block;
        visibility: hidden;
        pointer-events: none;
    }
}

.nx-panel-title {
    margin: 0 0 8px;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--nx-border);
    font-family: var(--nx-font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
}

.nx-program.is-tabs .nx-panel-title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    margin: 0;
    padding: 0;
    border: 0;
}

/* Actividades en fila: una card por actividad, con espacio para imagen */
.nx-events {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.nx-event {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: hidden;
    border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-border);
    background: linear-gradient(180deg, rgba(13, 20, 64, 0.62), rgba(7, 11, 38, 0.78));
    transition: transform var(--nx-dur-base) var(--nx-ease),
        border-color var(--nx-dur-base) var(--nx-ease),
        box-shadow var(--nx-dur-base) var(--nx-ease);
}

.nx-event:hover {
    transform: translateY(-4px);
    border-color: var(--nx-cyan);
    box-shadow: var(--nx-glow-cyan);
}

/* Imagen de la actividad (assets/2026/imagenes/programa/<archivo>) */
.nx-event-media {
    position: relative;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--nx-surface-2);
}

/* Sin imagen: resplandor de marca en lugar de un hueco vacío */
.nx-event-media--empty {
    background:
        radial-gradient(circle at 25% 20%, rgba(107, 209, 248, 0.45), transparent 55%),
        radial-gradient(circle at 80% 90%, rgba(155, 94, 252, 0.55), transparent 60%),
        var(--nx-surface-2);
}

.nx-event-media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--nx-dur-slow) var(--nx-ease);
}

.nx-event:hover .nx-event-media img {
    transform: scale(1.05);
}

.nx-event-time {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-start: 10px;
    margin: 0;
    padding: 5px 12px;
    border-radius: var(--nx-radius-pill);
    background: rgba(0, 3, 25, 0.78);
    border: 1px solid var(--nx-border);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--nx-font-tech);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--nx-cyan);
}

.nx-event-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
}

@media (min-width: 768px) {
    .nx-events {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: clamp(12px, 1.4vw, 20px);
    }

    .nx-event-title {
        font-size: 15px;
    }
}

/* Pantallas bajas: imagen más panorámica para que la fila siga cabiendo en una vista */
@media (min-width: 768px) {
    .nx-event-media {
        aspect-ratio: auto;
        block-size: clamp(84px, 19vh, 200px);
    }

    .nx-event-body {
        padding: clamp(10px, 1.8vh, 16px) 16px clamp(12px, 2vh, 18px);
    }
}

/* Intermedio (portátiles de ~768 px de alto): título y tabs más compactos para que la fila entre en una vista */
@media (min-width: 768px) and (max-height: 840px) {
    .nx-program-title { font-size: clamp(32px, min(6vw, 8vh), 64px); }
    .nx-tab { padding-block: 10px 9px; gap: 4px; }
    .nx-tab-num { font-size: 32px; }
    .nx-event-media { block-size: clamp(76px, 15vh, 130px); }
}

@media (min-width: 768px) and (max-height: 720px) {
    .nx-program {
        padding-block: 20px;
    }

    .nx-program-title {
        font-size: 32px;
    }

    .nx-tab {
        padding-block: 8px 7px;
        gap: 3px;
    }

    .nx-tab-num {
        font-size: 24px;
    }

    .nx-event-media {
        block-size: clamp(70px, 15vh, 120px);
    }

    .nx-event-title {
        font-size: 14px;
    }

    .nx-event-modes,
    .nx-avatars {
        margin-block-start: 8px;
    }
}

/* Costos en tablet: tarjetas con ancho de lectura, centradas */
@media (min-width: 600px) and (max-width: 899px) {
    .nx-costs-grid { max-inline-size: 560px; margin-inline: auto; }
}

@media (min-width: 900px) {
    .nx-events {
        grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
    }
}

.nx-event-type {
    margin: 6px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nx-purple);
}

.nx-event-title {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nx-text);
}

.nx-event-speaker {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--nx-text-muted);
}

/* Círculos de ponentes (sólo cuando una actividad tiene varios) */
.nx-avatars {
    display: flex;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.nx-avatar {
    position: relative;
    inline-size: 38px;
    block-size: 38px;
    margin-inline-start: -10px;
    border-radius: 50%;
    border: 2px solid var(--nx-void);
    overflow: hidden;
    background: var(--nx-gradient-brand);
    box-shadow: 0 0 0 1px var(--nx-border);
    transition: transform var(--nx-dur-base) var(--nx-ease);
}

.nx-avatar:first-child {
    margin-inline-start: 0;
}

.nx-avatar:hover {
    transform: translateY(-3px);
    z-index: 1;
}

.nx-avatar img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.nx-avatar>span:not(.nx-sr) {
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    font-family: var(--nx-font-tech);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--nx-text);
}

/* Botón y diálogo de descripción (sólo si la actividad la tiene) */
.nx-desc-btn {
    appearance: none;
    align-self: flex-start;
    margin-block-start: auto;
    padding: 8px 16px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid var(--nx-cyan);
    background: transparent;
    color: var(--nx-cyan);
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--nx-dur-base) var(--nx-ease), color var(--nx-dur-base) var(--nx-ease), box-shadow var(--nx-dur-base) var(--nx-ease);
}

.nx-desc-btn[hidden] {
    display: none;
}

.nx-desc-btn:hover {
    background: var(--nx-cyan);
    color: var(--nx-void);
    box-shadow: var(--nx-glow-cyan);
}

.nx-event-modes+.nx-desc-btn,
.nx-event-speaker+.nx-desc-btn,
.nx-avatars+.nx-desc-btn {
    margin-block-start: 16px;
}

.nx-event-body> :last-child:not(.nx-desc-btn) {
    margin-block-end: 0;
}

/* Centrado explícito en la ventana (horizontal y vertical) */
.nx-dialog {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inset-block-end: auto;
    inset-inline-end: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    block-size: auto;
    inline-size: min(560px, calc(100vw - 32px));
    max-block-size: calc(100svh - 48px);
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-glow-blue), 0 24px 80px rgba(0, 3, 25, 0.7);
    overflow-y: auto;
}

.nx-dialog::backdrop {
    background: rgba(0, 3, 25, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Sólo opacidad: el transform del diálogo es el que lo centra */
.nx-dialog[open] {
    animation: nx-dialog-in var(--nx-dur-base) var(--nx-ease);
}

@keyframes nx-dialog-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nx-dialog-time {
    position: static;
    display: inline-block;
}

.nx-dialog-title {
    margin: 6px 0 0;
    font-size: clamp(19px, 3vw, 24px);
    font-weight: 700;
    line-height: 1.3;
}

.nx-dialog-text {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--nx-text-muted);
}

.nx-dialog-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    border: 1px solid var(--nx-border);
    background: transparent;
    color: var(--nx-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.nx-dialog-close:hover {
    border-color: var(--nx-cyan);
    color: var(--nx-cyan);
}

.nx-event-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.nx-mode-chip {
    padding: 4px 12px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid currentColor;
    background: rgba(0, 3, 25, 0.55);
    font-family: var(--nx-font-tech);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nx-text-muted);
}

.nx-mode-chip--hibrida {
    color: var(--nx-cyan);
    border-color: color-mix(in srgb, var(--nx-cyan) 40%, transparent);
}

.nx-mode-chip--presencial {
    color: var(--nx-purple);
    border-color: color-mix(in srgb, var(--nx-purple) 40%, transparent);
}

.nx-mode-chip--virtual {
    color: var(--nx-text);
    border-color: rgba(255, 255, 255, 0.3);
}


/* ##########  4. SECCIÓN COSTOS  ########## */

.nx-costs {
    position: relative;
    z-index: 3;
    max-inline-size: var(--nx-max);
    margin-inline: auto;
    min-block-size: calc(100svh - var(--nx-nav-h, 0px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 7vh, 88px) var(--nx-gutter);
}

.nx-costs-head { margin-block-end: clamp(18px, 4vh, 40px); }

.nx-costs-title {
    margin: 0;
    font-family: var(--nx-font-display);
    font-weight: 400;
    font-size: clamp(32px, 6vw, 72px);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nx-costs-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 900px) {
    .nx-costs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
}

.nx-cost {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: clamp(20px, 3vh, 30px) clamp(20px, 2vw, 28px);
    border-radius: var(--nx-radius-lg);
    border: 1px solid var(--nx-border);
    background: linear-gradient(180deg, rgba(13, 20, 64, 0.62), rgba(7, 11, 38, 0.78));
    transition: transform var(--nx-dur-base) var(--nx-ease), border-color var(--nx-dur-base) var(--nx-ease), box-shadow var(--nx-dur-base) var(--nx-ease);
}

.nx-cost:hover { transform: translateY(-4px); border-color: var(--nx-cyan); box-shadow: var(--nx-glow-cyan); }

.nx-cost--featured { border-color: var(--nx-blue); box-shadow: var(--nx-glow-blue); }

.nx-cost p { margin: 0; }

.nx-cost-cat {
    overflow-wrap: anywhere; /* "DOCENTES/ADMINISTRATIVOS" no cabe en una línea con el interletrado en pantallas angostas */
    margin: 0;
    font-family: var(--nx-font-tech);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--nx-cyan);
}

.nx-cost-price {
    margin-block-start: 10px !important;
    font-family: var(--nx-font-display);
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1;
    background: var(--nx-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--nx-cyan);
}

.nx-cost-cur { font-size: 0.55em; margin-inline-end: 4px; vertical-align: 0.35em; }

.nx-cost-desc { margin-block-start: 10px !important; color: var(--nx-text-muted); font-size: 15px; }

.nx-cost-note {
    align-self: flex-start;
    margin-block-start: 10px !important;
    padding: 5px 12px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid color-mix(in srgb, var(--nx-purple) 40%, transparent);
    background: rgba(0, 3, 25, 0.55);
    color: var(--nx-purple);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.nx-cost-btn { margin-block-start: 18px; align-self: stretch; text-align: center; }

.nx-cost-btn--soon {
    border: 1px dashed var(--nx-border);
    color: var(--nx-text-dim);
    cursor: default;
}

.nx-cost-sub {
    margin-block-start: 20px !important;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--nx-border);
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nx-text-dim);
}

.nx-cost-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.nx-cost-list li {
    position: relative;
    padding-inline-start: 26px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--nx-text);
}

/* Palomita dibujada en CSS (sin icon-fonts) */
.nx-cost-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 2px;
    inset-block-start: 0.35em;
    inline-size: 6px;
    block-size: 11px;
    border: solid var(--nx-cyan);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


/* ##########  5. SECCIÓN CONECTA SABERES (llamada final)  ########## */

.nx-connect {
    position: relative;
    z-index: 3;
    max-inline-size: var(--nx-max);
    margin-inline: auto;
    padding: clamp(40px, 8vh, 96px) var(--nx-gutter) clamp(24px, 5vh, 56px);
}

.nx-connect p,
.nx-connect h2 { margin: 0; }

.nx-connect-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    padding: clamp(24px, 4vh, 40px) clamp(22px, 3.4vw, 48px);
    border-radius: var(--nx-radius-lg);
    border: 1px solid var(--nx-border);
    background: linear-gradient(135deg, rgba(0, 65, 236, 0.28), rgba(45, 6, 154, 0.32) 60%, rgba(13, 20, 64, 0.5));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), var(--nx-glow-blue);
}

.nx-connect-card > div { flex: 1 1 360px; min-inline-size: 0; }
.nx-connect-card .nx-btn { flex: 0 0 auto; }

.nx-connect-eyebrow {
    font-family: var(--nx-font-tech);
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nx-cyan);
}

.nx-connect-title {
    margin-block-start: 10px !important;
    font-family: var(--nx-font-display);
    font-weight: 400;
    font-size: clamp(24px, 3.6vw, 46px);
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(100deg, #FFFFFF 0%, #C7E7FB 50%, var(--nx-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--nx-text);
}

/* Costos en portátiles de poca altura: contenido más compacto para que las tres tarjetas entren en una vista */
@media (min-width: 900px) and (max-height: 860px) {
    .nx-costs { padding-block: clamp(20px, 3.5vh, 40px); }
    .nx-costs-head { margin-block-end: clamp(10px, 2vh, 20px); }
    .nx-costs-title { font-size: clamp(30px, min(5vw, 7vh), 56px); }
    .nx-cost { padding: 16px 20px; }
    .nx-cost-price { font-size: clamp(34px, 4.4vw, 48px); margin-block-start: 6px !important; }
    .nx-cost-desc { margin-block-start: 6px !important; font-size: 14px; }
    .nx-cost-note { margin-block-start: 6px !important; padding: 4px 10px; font-size: 11px; }
    .nx-cost-btn { margin-block-start: 12px; }
    .nx-cost-sub { margin-block-start: 14px !important; padding-block-start: 10px; }
    .nx-cost-list { margin-block-start: 8px; gap: 6px; }
    .nx-cost-list li { font-size: 14px; line-height: 1.35; }
}

@media (min-width: 900px) and (max-height: 700px) {
    .nx-cost-btn { padding-block: 9px; }
}


/* ##########  6. SECCIÓN PONENTES  ########## */

.nx-speakers {
    position: relative;
    z-index: 3;
    max-inline-size: var(--nx-max);
    margin-inline: auto;
    padding: clamp(48px, 9vh, 112px) var(--nx-gutter);
    scroll-margin-top: var(--nx-nav-h, 0px);
}

.nx-speakers-head { margin-block-end: clamp(24px, 5vh, 52px); }

.nx-speakers-title {
    margin: 0;
    font-family: var(--nx-font-display);
    font-weight: 400;
    font-size: clamp(32px, 6vw, 72px);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nx-speakers-lead {
    margin: 12px 0 0;
    font-family: var(--nx-font-tech);
    font-size: clamp(12px, 1.4vw, 15px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--nx-purple);
}

/* Las definiciones SVG compartidas no ocupan lugar */
.nx-spk-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.nx-spk-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(16px, 2.4vw, 32px);
}

/* Card: cristal con filo de luz arriba y borde que se enciende al pasar el cursor */
.nx-spk {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-inline-size: 0;
    padding: clamp(22px, 3vh, 32px) clamp(18px, 2vw, 26px) clamp(22px, 3vh, 30px);
    text-align: center;
    border-radius: var(--nx-radius-lg);
    border: 1px solid var(--nx-border);
    background: linear-gradient(170deg, rgba(13, 20, 64, 0.62), rgba(7, 11, 38, 0.8));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform var(--nx-dur-base) var(--nx-ease), border-color var(--nx-dur-base) var(--nx-ease), box-shadow var(--nx-dur-base) var(--nx-ease);
}

.nx-spk::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 22%;
    block-size: 2px;
    border-radius: 2px;
    background: var(--nx-gradient-brand);
    box-shadow: 0 0 14px rgba(62, 95, 230, 0.8);
}

.nx-spk:hover {
    transform: translateY(-4px);
    border-color: var(--nx-cyan);
    box-shadow: var(--nx-glow-cyan);
}

/* Marco lóbulo: silueta orgánica con borde de neón */
.nx-spk-photo {
    inline-size: min(100%, 210px);
    margin-block-end: 18px;
    filter: drop-shadow(0 10px 26px rgba(0, 65, 236, 0.35));
}

.nx-spk-frame {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
}

.nx-spk-frame image { transition: transform var(--nx-dur-slow) var(--nx-ease); transform-origin: 50% 50%; }
.nx-spk:hover .nx-spk-frame image { transform: scale(1.04); }

.nx-spk-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    inline-size: 100%;
}

.nx-spk-name {
    margin: 0;
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--nx-text);
}

.nx-spk-role {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--nx-text-muted);
}

.nx-spk-country {
    margin: 10px 0 0;
    padding: 4px 12px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid color-mix(in srgb, var(--nx-purple) 40%, transparent);
    background: rgba(0, 3, 25, 0.55);
    font-family: var(--nx-font-tech);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nx-purple);
}

.nx-spk-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.nx-spk-social a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--nx-radius-pill);
    border: 1px solid var(--nx-border);
    color: var(--nx-cyan);
    font-family: var(--nx-font-tech);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--nx-dur-base) var(--nx-ease), border-color var(--nx-dur-base) var(--nx-ease);
}

.nx-spk-social a:hover { background: rgba(107, 209, 248, 0.12); border-color: var(--nx-cyan); }

.nx-spk-more { align-self: center; margin-block-start: 16px; }