/* ═════════════════════════════════════════════════════════════════════════════
   NEX · Páginas legales

   Una sola hoja para los cuatro documentos (privacidad, aviso legal, cookies y
   términos) y su índice. Antes cada página llevaba su propio
   bloque de ochocientas líneas copiado; cambiar un color obligaba a acordarse
   de las cinco, y no te acuerdas.

   LA GRAMÁTICA ES LA DE LA CASA, no una hoja aparte que se le parece. Sale de
   `app/src/styles/features/auth.css` vía `landing/css/waitlist.css`, que es la
   vara de medir de «limpio» en este proyecto:

     · Sin contornos. La jerarquía la hacen el relleno, el aire y la sombra. Un
       contorno alrededor de algo que ya tiene fondo dice dos veces lo mismo, y
       la segunda vez ensucia.
     · Píldora de 999px para todo lo que se pulsa.
     · Acuse de recibo al pulsar: scale(0.985).
     · El movimiento de la casa: 150ms con cubic-bezier(0, 0, 0.2, 1).
     · NO HAY GRISES. El fondo es azul, el acento es azul y las superficies son
       ese mismo azul rebajado contra negro. Un slate neutro sobre este fondo se
       lee gris y delata que la página viene de otro sitio.

   Los tokens de aquí son la fuente de verdad de estas páginas. Viven fuera de
   `app/src/styles`, que no alcanza a ficheros servidos sueltos por Express, así
   que se declaran una vez arriba y abajo solo se usa `var()`. Cada uno lleva de
   dónde sale, para que el día que se mueva el azul de NEX se pueda sincronizar
   sin adivinar.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Las fuentes de NEX, servidas desde NEX ─────────────────────────
   Inter y Manrope, las mismas dos de la app y de la landing. Aquí están en
   local a propósito: enlazarlas al CDN de Google manda la IP de quien lee a un
   tercero antes de que haya leído la primera línea. En una política de
   privacidad eso no es un detalle técnico, es la sentencia del LG München I de
   20/01/2022 aplicada a la página que promete justo lo contrario.

   La hoja anterior resolvía ese conflicto por el lado equivocado: renunciaba a
   la tipografía y caía en la pila del sistema, con lo que estas páginas salían
   en Segoe UI mientras el resto del producto sale en Inter. No hacía falta
   elegir. Son dos ficheros variables, cubren de 400 a 800 y pesan 73 KB para el
   español —el `unicode-range` de latin-ext solo se descarga si aparece un
   carácter que lo necesite—.

   Viven en `landing/assets/fuentes/` y no en `legal/` porque los sirven las dos
   zonas, y porque `/landing/assets` va con `maxAge: 7d` mientras que `/legal`
   va con `no-cache`. Una fuente no caduca; un documento legal sí.
   ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/landing/assets/fuentes/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/landing/assets/fuentes/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("/landing/assets/fuentes/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url("/landing/assets/fuentes/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Oscuro por defecto, como la app. Los valores son los que resuelve
     `tokens.css` en tema oscuro, escritos a mano porque esta hoja vive fuera
     del build de Vite. */
  --bg:        #06070A;   /* --bg-page        → nex-slate-950 */
  --txt:       #F9FAFB;   /* --text-primary   → nex-off-white */
  --txt-2:     #94A3B8;   /* --text-secondary → nex-slate-400 */
  --txt-3:     #64748B;   /* --text-tertiary  → nex-slate-500 */
  --line:      #1F2937;   /* --border         → nex-slate-800 */
  --line-2:    #2C3A4F;   /* --border-strong  → nex-slate-750 */

  /* EL azul de NEX. En oscuro `--accent-display` es blue-200: un azul PÁLIDO
     con tinta oscura encima. No es el azul saturado con letra blanca que hace
     cualquiera, y es la razón por la que algo de NEX se reconoce de lejos.

     Aquí ponía blue-500, o sea justo el azul saturado contra el que avisa el
     párrafo de arriba: el comentario y el valor decían cosas contrarias. Ese es
     el azul VIEJO, el que el resto del producto ya migró. Por eso estas páginas
     en oscuro no se parecían al NEX de verdad. */
  --acc: #BFDBFE;         /* --accent-display → nex-blue-200 */
  /* El azul de las ETIQUETAS pequenas —el numero de clausula—, mas claro que el
     de los titulos para que no compitan con ellos. Aqui hay sitio de sobra:
     blue-300 sobre este fondo da 11:1, y en oscuro «mas claro» es justo lo que
     manda la regla del acento display. */
  --acc-label: #93C5FD;   /* nex-blue-300 — un escalón por debajo del titular */
  /* Lo que va ENCIMA de un relleno de acento. En oscuro el azul es blue-500 y
     con letra blanca da 2,9:1 —no llega—, así que encima va tinta: 6,4:1. Es la
     misma inversión que hace `--text-on-accent` en la app, y va al revés en cada
     tema a propósito. */
  --on-acc: #06070A;

  /* Superficies. Salen del acento rebajado CONTRA NEGRO, no de un slate
     neutro. Está apuntado en `waitlist.css` y aquí vale igual: rebajar hacia el
     fondo acerca el color a un neutro y dessatura —se pierde luz y azul a la
     vez, y acaba en gris—; contra negro solo se pierde luz y el tono aguanta.
     La superficie apenas se separa del fondo: quien la define es el filo, no el
     contraste del relleno. */
  /* Las superficies son las MISMAS que las de la aplicación, no una receta
     paralela. Antes salían de mezclar el acento contra negro puro, y eso daba
     una tarjeta de #070E16 sobre un fondo de #06070A: prácticamente invisible,
     mientras que en la app una tarjeta en oscuro SÍ se despega del lienzo. */
  --surface:  #111827;    /* --bg-surface  → nex-slate-900 */
  --sunk:     #0F1219;    /* nex-slate-960 */
  --hover:    #1F2937;    /* --bg-hover    → nex-slate-800 */
  /* Y el tinte azul se mezcla contra la SUPERFICIE, nunca contra negro ni
     contra transparente. Está apuntado en las notas del proyecto y es la trampa
     que más veces ha caído: un azul con alfa sobre negro no da un azul flojo,
     da GRIS —se pierde luz y saturación a la vez—. Contra la superficie solo se
     pierde luz, y el tono aguanta. */
  --acc-soft: color-mix(in srgb, var(--acc) 18%, var(--surface));

  /* El relleno de lo que se PULSA, separado del de las tarjetas a propósito.
     Lo que distingue un botón de un panel no es la familia —los dos son azul
     rebajado— sino la DOSIS y contra qué se mezcla: un botón se apoya en lo que
     haya detrás (transparente) y un panel se planta sobre el fondo (negro). */
  --pulsable:       color-mix(in srgb, var(--acc) 10%, var(--surface));
  --pulsable-hover: color-mix(in srgb, var(--acc) 18%, var(--surface));

  --warn:      #F5B544;
  --warn-soft: color-mix(in srgb, #F5B544 12%, #000);
  --chip-warn: color-mix(in srgb, #F5B544 22%, #000);
  --on-warn:   #14100A;

  /* Sombra de tarjeta, no de escaparate. En oscuro casi no hace falta —quien
     separa la superficie del fondo es el relleno—; en claro sí, porque sobre
     papel una tarjeta blanca sobre casi blanco solo existe si proyecta. */
  --sombra: 0 1px 2px rgb(0 0 0 / 40%);

  /* Escala de radios de NEX (regla 7 del CLAUDE.md): 4 · 8 · 10 · 12 · 16 · 999.
     La hoja anterior usaba 6 / 10 / 14, que no están en ninguna parte. */
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* El movimiento de la casa, copiado de `tokens.css`. */
  --fast: 150ms;
  --ease: cubic-bezier(0, 0, 0.2, 1);

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
  /* Manrope SOLO para títulos de sección, con ≥ 18px y ≥ 700 (regla 6 del
     CLAUDE.md). Por debajo de eso se empasta y deja de leerse como un título. */
  --display: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* ── Tema claro ───────────────────────────────────────────────────
   EL AZUL SE DA LA VUELTA, y es lo más importante de este bloque. En oscuro el
   acento es blue-200 —pálido—; en claro es blue-700 —hondo, con letra blanca
   encima—. No son dos caprichos: es la misma regla (el azul tiene que separarse
   del fondo) resuelta por el lado que toca, porque sobre papel eso significa
   oscurecer y sobre negro, aclarar.

   Y las superficies dejan de ser «azul contra negro» para ser blancas: sobre
   papel lo que separa una tarjeta del fondo es la LUZ, no el tinte.

   ── CÓMO SE ELIGE EL TEMA, que es lo que estaba mal ──────────────────────
   Esta hoja solo miraba `prefers-color-scheme`, o sea la preferencia del
   SISTEMA OPERATIVO. Pero NEX no usa eso: la app tiene su propio conmutador de
   tres posiciones —claro, oscuro, sistema— guardado en `nex-theme` y aplicado
   como `data-theme` en el `<html>`.

   El resultado era que quien tuviera NEX en claro con el sistema en oscuro
   entraba al aviso legal y la pantalla se le daba la vuelta. Un salto de tema
   al pulsar un enlace del pie, sin haber cambiado nada.

   Ahora manda `data-theme`, que lo escribe `/theme-bootstrap.js` —el MISMO
   fichero que usa la app, no una copia— antes del primer pintado.

   Y `prefers-color-scheme` se queda como red de seguridad para cuando no hay
   JavaScript, acotado con `:not([data-theme])` para que no pise la elección de
   quien sí lo tiene.
   ───────────────────────────────────────────────────────────────── */

/* Los VALORES del tema claro se declaran UNA vez. Los dos selectores de abajo
   solo los mapean, así que pueden repetir la lista sin que ningún color llegue
   nunca a divergir entre un camino y el otro. */
:root {
  --l-bg: #F6F8FC;   /* --bg-page      → nex-slate-50 */
  --l-txt: #1F2937;  /* --text-primary → nex-slate-800 */
  --l-txt-2: #4A5261;
  --l-txt-3: #6B7280;
  --l-line: #DCE6F5;
  --l-line-2: #C3D3EA;
  --l-acc: #1D4ED8;         /* --accent-display en claro → nex-blue-700 */
  /* Sobre papel apenas hay margen: blue-600 da 4,75:1 contra el fondo y es el
     ULTIMO escalón que aguanta el mínimo de 4,5 para texto de 13,5px. El
     siguiente, blue-500, cae a 2,66:1 y ya no se puede leer. */
  --l-acc-label: #2563EB;   /* nex-blue-600 */
  --l-on-acc: #FFFFFF;      /* el azul es hondo, así que encima va blanca: 9,1:1 */
  --l-surface: #FFFFFF;
  --l-sunk: #F1F5F9;
  --l-hover: #EDF2FB;
  --l-warn: #A85B00;
  --l-on-warn: #FFFFFF;
  --l-sombra: 0 1px 2px rgb(15 23 42 / 6%), 0 8px 24px rgb(15 23 42 / 6%);
}

/* Sin JavaScript: se sigue la preferencia del sistema, pero solo si nadie ha
   escrito `data-theme`. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: var(--l-bg);           --txt: var(--l-txt);
    --txt-2: var(--l-txt-2);     --txt-3: var(--l-txt-3);
    --line: var(--l-line);       --line-2: var(--l-line-2);
    --acc: var(--l-acc);         --acc-label: var(--l-acc-label);
    --on-acc: var(--l-on-acc);
    --surface: var(--l-surface); --sunk: var(--l-sunk);
    --hover: var(--l-hover);
    --acc-soft: color-mix(in srgb, var(--acc) 8%, transparent);
    --pulsable: color-mix(in srgb, var(--acc) 7%, transparent);
    --pulsable-hover: color-mix(in srgb, var(--acc) 12%, transparent);
    --warn: var(--l-warn);       --on-warn: var(--l-on-warn);
    --warn-soft: color-mix(in srgb, var(--l-warn) 8%, #FFF);
    --chip-warn: color-mix(in srgb, var(--l-warn) 16%, #FFF);
    --sombra: var(--l-sombra);
  }
}

/* Con JavaScript: manda lo que la persona haya elegido en NEX. */
:root[data-theme="light"] {
  --bg: var(--l-bg);           --txt: var(--l-txt);
  --txt-2: var(--l-txt-2);     --txt-3: var(--l-txt-3);
  --line: var(--l-line);       --line-2: var(--l-line-2);
  --acc: var(--l-acc);         --acc-label: var(--l-acc-label);
  --on-acc: var(--l-on-acc);
  --surface: var(--l-surface); --sunk: var(--l-sunk);
  --hover: var(--l-hover);
  --acc-soft: color-mix(in srgb, var(--acc) 8%, transparent);
  --pulsable: color-mix(in srgb, var(--acc) 7%, transparent);
  --pulsable-hover: color-mix(in srgb, var(--acc) 12%, transparent);
  --warn: var(--l-warn);       --on-warn: var(--l-on-warn);
  --warn-soft: color-mix(in srgb, var(--l-warn) 8%, #FFF);
  --chip-warn: color-mix(in srgb, var(--l-warn) 16%, #FFF);
  --sombra: var(--l-sombra);
}

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

/* `color-scheme` TIENE que seguir al tema elegido, no al del sistema.
   Es lo que pinta el navegador por su cuenta: la barra de scroll y los cromados
   nativos. El <meta name="color-scheme" content="dark light"> de la cabecera
   solo dice que la pagina admite los dos, y a partir de ahi el navegador elige
   por `prefers-color-scheme`. O sea que con NEX en oscuro y el sistema en
   claro, el documento salia oscuro con la BARRA DE SCROLL clara.

   Declarandolo aqui, la propiedad CSS gana al meta y el cromado va con el resto.

   Ojo con generalizar esto: en la app hay una nota que prohibe `color-scheme`
   en `:root` porque empeora el bubble nativo de los <input> en Chrome/Windows.
   Aqui no aplica —estas paginas no tienen ni un <input>, <select> o <textarea>—
   y esta hoja no se carga nunca dentro de la aplicacion. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { color-scheme: light; }
}

html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* EL FONDO DE NEX: la misma luz azul que se mueve despacio detrás de la portada y
   de las guías (`landing/css/fondo-waitlist.css`, la aurora), con sus mismos
   tonos y tiempos por tema. Sin ella estas páginas parecían de otro sitio
   (Javier, 15-oct-2026).

   Va FIJA a la ventana y no pegada a la página, y no es un capricho: aquí hubo
   antes una mancha anclada arriba que se acababa a los 700px, y la página tenía
   dos colores —tintada arriba, plana abajo— que se notaban al bajar, sobre todo
   en las tablas. Fija, el fondo es el mismo a cualquier altura del documento. */
:root {
  --aurora-a: radial-gradient(circle, color-mix(in srgb, #3B82F6 46%, transparent), transparent 64%);
  --aurora-b: radial-gradient(circle, color-mix(in srgb, var(--acc) 24%, transparent), transparent 66%);
  --aurora-c: radial-gradient(circle, color-mix(in srgb, #3B82F6 30%, transparent), transparent 68%);
  --aurora-op: 1;
}
:root[data-theme="light"] {
  --aurora-a: radial-gradient(circle, color-mix(in srgb, var(--acc) 22%, transparent), transparent 64%);
  --aurora-b: radial-gradient(circle, color-mix(in srgb, #2563EB 16%, transparent), transparent 66%);
  --aurora-c: radial-gradient(circle, color-mix(in srgb, var(--acc) 14%, transparent), transparent 68%);
  --aurora-op: 1;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --aurora-a: radial-gradient(circle, color-mix(in srgb, var(--acc) 22%, transparent), transparent 64%);
    --aurora-b: radial-gradient(circle, color-mix(in srgb, #2563EB 16%, transparent), transparent 66%);
    --aurora-c: radial-gradient(circle, color-mix(in srgb, var(--acc) 14%, transparent), transparent 68%);
    --aurora-op: 1;
  }
}

.fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fondo-luz {
  position: absolute;
  inset: -20%;
  opacity: var(--aurora-op);
}
.fondo-luz i { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.fondo-luz i:nth-child(1) {
  top: -16%; left: 2%; width: 48vw; height: 48vw;
  background: var(--aurora-a);
  animation: deriva-a 19s ease-in-out infinite alternate;
}
.fondo-luz i:nth-child(2) {
  top: 2%; right: -4%; width: 54vw; height: 54vw;
  background: var(--aurora-b);
  animation: deriva-b 23s ease-in-out infinite alternate;
}
.fondo-luz i:nth-child(3) {
  bottom: -22%; left: 26%; width: 60vw; height: 60vw;
  background: var(--aurora-c);
  animation: deriva-c 29s ease-in-out infinite alternate;
}
/* En el teléfono las manchas, medidas en ancho de pantalla, se quedaban en un
   rincón: se miden por el alto, como en la portada a ese tamaño. */
@media (max-width: 700px) {
  .fondo-luz i:nth-child(1) { width: 90vh; height: 90vh; }
  .fondo-luz i:nth-child(2) { width: 80vh; height: 80vh; }
  .fondo-luz i:nth-child(3) { width: 90vh; height: 90vh; }
}
@keyframes deriva-a {
  from { transform: translate3d(-3vw, -2vh, 0) scale(0.96); }
  to   { transform: translate3d(11vw, 8vh, 0) scale(1.16); }
}
@keyframes deriva-b {
  from { transform: translate3d(3vw, -3vh, 0) scale(1.12); }
  to   { transform: translate3d(-12vw, 10vh, 0) scale(0.94); }
}
@keyframes deriva-c {
  from { transform: translate3d(-4vw, 3vh, 0) scale(0.94); }
  to   { transform: translate3d(10vw, -9vh, 0) scale(1.18); }
}

body {
  /* Sin fondo propio: lo pone `html`, y así la luz de `.fondo` queda entre los dos. */
  background: transparent;
  color: var(--txt-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────────────────────────────────
   Barra de borrador

   Cuenta los `.falta` de la página. Mientras quede uno, sale una franja fija
   que impide publicar por descuido; cuando se rellenan todos, desaparece sola
   sin que nadie tenga que acordarse de quitar nada. Es la diferencia entre un
   recordatorio y una salvaguarda.
   ───────────────────────────────────────────────────────────────────────── */
.borrador {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: var(--warn);
  color: var(--on-warn);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.borrador.visible { display: flex; }
.borrador svg { width: 15px; height: 15px; flex-shrink: 0; }
body.con-borrador { padding-top: 37px; }

/* El `white-space: nowrap` que había aquí sacaba una barra de scroll
   HORIZONTAL en toda la política de privacidad: uno de los huecos es una nota
   de 340 caracteres y, sin poder partir, medía 2.552px. La página entera se
   ensanchaba a 3.008px por un marcador de borrador.

   Se quita, y para que al partirse no se rompa el resaltado —la segunda línea
   saldría sin relleno a la izquierda ni esquinas— entra `box-decoration-break`,
   que reparte el fondo, el relleno y el radio en cada trozo.

   Y llevaba relleno Y subrayado, que es decir dos veces lo mismo: el relleno ya
   recorta el hueco del párrafo. Se va la línea y sube la dosis del relleno, que
   al 8% sobre papel casi no se veía y era la línea la que hacía el trabajo. */
.falta {
  background: var(--chip-warn);
  color: var(--warn);
  font-size: 0.88em;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ─────────────────────────────────────────────────────────────────────────
   Cabecera
   ───────────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 28px;
  /* Transparente arriba, para que se vea la luz del fondo; al bajar se rellena
     (`legal.js` le pone `.es-pegada`) y el texto no pasa por debajo a la vista. */
  background: transparent;
  transition: background var(--fast) var(--ease);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav.es-pegada { background: color-mix(in srgb, var(--bg) 88%, transparent); }
body.con-borrador .nav { top: 37px; }

/* La marca en AZUL. La sidebar de la app la lleva en el color del texto, pero
   aqui la barra hace otro trabajo: no es el chrome de una aplicacion en la que
   ya estas, es la unica marca de una zona a la que llegas desde fuera —desde el
   pie de la landing o desde un enlace de un correo—. En azul, lo primero que
   ves arriba a la izquierda dice de quien es esta pagina. */
.nav-logo { color: var(--acc); display: block; flex-shrink: 0; }
.nav-logo svg { display: block; width: 58px; height: auto; }

/* ── Los cuatro documentos, en la barra ──────────────────────────────────
   Antes vivian en el lateral, bajo un titulo «Documentos». Estaban en el sitio
   equivocado por dos razones.

   La de estructura: esa lista es IDENTICA en las cuatro paginas —es navegacion
   del sitio— y colgaba de una cabecera que cambia en cada una. Lo invariable
   por debajo de lo variable se lee al reves. Arriba, junto a la marca, es donde
   va lo que no cambia; y entonces el lateral se queda solo con «En esta
   pagina», que si es de esta pagina.

   Y la practica, que era un fallo de verdad: `.side` se oculta por debajo de
   1000px, asi que en un movil no habia forma de saltar de un documento a otro
   salvo bajando hasta el pie. Aqui aguanta hasta los 700.

   El documento en el que estas se marca con RELLENO, igual que la seccion
   activa del indice: la misma gramatica en las dos escalas. */
.nav-docs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.nav-docs a {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-2);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-docs a:hover { color: var(--txt); background: var(--pulsable); }
.nav-docs a[aria-current="page"] {
  color: var(--acc);
  background: var(--acc-soft);
  font-weight: 600;
}
/* Estrecho: no caben cuatro pildoras, la marca y el boton de volver. Se van, y
   el pie —que lista los otros tres documentos— hace de conmutador. */
@media (max-width: 700px) { .nav-docs { display: none; } }

/* Píldora rellena y sin contorno. Un botón con borde y sin fondo es la
   convención de fuera; en NEX lo que distingue lo pulsable es el RELLENO, y el
   999px es el radio de todo lo que se pulsa. Con acuse de recibo al pulsar,
   como el resto de la casa. */
.nav-back {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-2);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--pulsable);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
  white-space: nowrap;
}
.nav-back:hover { color: var(--txt); background: var(--pulsable-hover); }
.nav-back:active { transform: scale(0.985); }

/* ─────────────────────────────────────────────────────────────────────────
   Rejilla: barra lateral pegajosa + columna de lectura
   ───────────────────────────────────────────────────────────────────────── */
.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px 140px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 64px;
}
/* La columna de contenido ocupa lo que hay, y quien decide el ancho de cada
   cosa es la propia cosa: la PROSA se para en 74ch —el ancho de linea, que es
   lo que decide si un texto largo se lee— y las TABLAS se estiran hasta el
   borde. Ver `.sec` mas abajo.

   Antes la rejilla declaraba los 74ch para todo, y eso estrujaba las tablas:
   la de «que datos tratamos» tiene tres columnas y una de ellas es un parrafo
   entero, que a 74ch partido en tres se leia en renglones de cinco palabras.
   Una tabla no tiene ancho de linea que respetar; tiene columnas que caben o
   no caben. */
@media (min-width: 1000px) {
  .shell { grid-template-columns: 234px minmax(0, 1fr); }
}

/* ── Cabecera del documento ─────────────────────────────────────────────── */
/* Sin filete, lo que separa la cabecera del cuerpo es el hueco — y hay que
   darle MENOS, no más, que es lo contrario de lo que parece.

   Una línea es un punto de referencia: con ella, cien píxeles se leen como
   «separado». Sin ella, los mismos cien se leen como «aquí falta algo». El aire
   sin landmark no separa mejor cuanto más hay; pasado un punto solo es vacío, y
   el documento arranca con media pantalla en blanco. Así que los 44+56 que
   había CON línea bajan a 40+40 sin ella. */
.doc-head {
  grid-column: 1 / -1;
  padding: 64px 0 40px;
  margin-bottom: 40px;
}
/* EN EL COLOR DEL TEXTO, como los títulos de la portada y de las guías: con el
   fondo de NEX detrás, un título azul sobre luz azul se apagaba, y la web entera
   titula en blanco (o en tinta, en claro). El azul se queda en los números y en
   los enlaces, que marcan dónde empieza algo y adónde se va. */
.doc-head h1 {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.12;
  color: var(--txt);
  margin-bottom: 18px;
  text-wrap: balance;
}
.doc-sub {
  font-size: clamp(16px, 1.8vw, 18.5px);
  line-height: 1.6;
  color: var(--txt-2);
  max-width: 56ch;
}
/* La norma que responde el documento y la fecha en que se escribio, en una
   linea y pequena. Antes esto eran tres columnas —version, fecha, norma— con un
   kicker en azul encima diciendo «INFORMACION LEGAL», que era decir dos veces
   lo que el titulo de debajo ya dice y lo que el indice de /legal ya ha dicho al
   entrar. El numero de version tambien se va: es contabilidad interna, y quien
   lee quiere saber en que se basa el documento y de cuando es. */
.doc-meta {
  margin-top: 26px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--txt-3);
}

/* ── Barra lateral ──────────────────────────────────────────────────────── */
.side { display: none; }
@media (min-width: 1000px) {
  .side {
    display: block;
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding-bottom: 40px;
    scrollbar-width: thin;
  }
  body.con-borrador .side { top: 133px; }
}

/* La cabecerilla de cada lista es la del rail de la síntesis
   (`SynthesisResult.tsx`, «En este tema»): icono e etiqueta en el acento, 15px
   y 600. No es un `label` de formulario en versalitas grises: es el título de
   una zona, y en NEX ese título va en azul. */
.side-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--acc);
  margin-bottom: 14px;
  padding-left: 10px;
}
.side-label svg { width: 17px; height: 17px; flex-shrink: 0; }

.docs a:hover { color: var(--txt); background: var(--hover); }
.docs a[aria-current="page"] {
  color: var(--acc);
  background: var(--acc-soft);
  font-weight: 600;
}

/* ── Índice del documento ───────────────────────────────────────────────────
   Es el mismo componente que el rail de la síntesis, y por eso se comporta
   igual: número en el acento a la izquierda, etiqueta al lado, y la sección en
   la que estás marcada con RELLENO —`--acc-soft` y 12px de radio—, no con una
   línea.

   Antes llevaba dos: un raíl gris de un píxel en el `<ul>` y otro filo, azul,
   en el enlace activo. Dos líneas verticales pegadas la una a la otra para
   decir una sola cosa. Ese es el doble borde: se va entero, y lo que marca
   dónde estás pasa a ser el mismo relleno que usa la app. */
.toc { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: var(--r);
  color: var(--txt-2);
  text-decoration: none;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.toc a:hover { background: var(--hover); color: var(--txt); }
.toc a.activo { background: var(--acc-soft); color: var(--acc); font-weight: 500; }

/* Burbuja, y aquí resuelve un conflicto además de poner color: la fila marcada
   ya lleva relleno `--acc-soft`, así que una burbuja del mismo `--acc-soft`
   encima sería invisible justo en la fila que más importa. Por eso la burbuja
   de la fila activa se RELLENA de acento con tinta encima. Inactiva es hueca,
   activa es maciza: el mismo salto que hace la casilla de un conmutador. */
.toc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.toc a.activo .toc-num { background: var(--acc); color: var(--on-acc); }
.toc-txt { font-size: 13px; line-height: 1.35; }

/* Índice plegable en móvil */
.toc-movil {
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 48px;
}
@media (min-width: 1000px) { .toc-movil { display: none; } }
.toc-movil summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 9px;
}
.toc-movil summary::-webkit-details-marker { display: none; }
.toc-movil summary::before {
  content: "›";
  font-size: 17px;
  color: var(--txt-3);
  transition: transform 0.16s ease;
}
.toc-movil[open] summary::before { transform: rotate(90deg); }
.toc-movil ol { list-style: none; padding: 0 18px 16px; }
.toc-movil li { padding: 0; border: none; }
.toc-movil a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--txt-2);
  text-decoration: none;
}
.toc-movil a:hover { color: var(--acc); }

/* ─────────────────────────────────────────────────────────────────────────
   Cuerpo del documento
   ───────────────────────────────────────────────────────────────────────── */
.doc { min-width: 0; }

/* CADA SECCION ES UNA REJILLA DE DOS COLUMNAS: la de lectura, que mide 74ch, y
   el sobrante. Todo cae en la primera por defecto; lo que se sale a las dos es
   lo que no es prosa y agradece el ancho. Asi el parrafo conserva su medida sin
   que las tablas la paguen, y no hace falta ningun margen negativo. */
.sec {
  display: grid;
  grid-template-columns: minmax(0, 74ch) minmax(0, 1fr);
}
.sec > * { grid-column: 1; }
.sec > .tabla { grid-column: 1 / -1; }

/* El corte entre secciones lo hace el hueco, y 72px bastan: el titular que
   viene detrás es de 25px en Manrope con su burbuja al lado, o sea que ya pesa
   por sí solo. El hueco no tiene que gritar el corte, solo no dejar dudas de
   que hay uno —y con 20 de salto de párrafo, 72 es más del triple—. Los 132 que
   probé antes eran un tercio de pantalla en blanco entre dos párrafos. */
.sec { padding-top: 72px; margin-top: 0; }
.sec:first-of-type { padding-top: 0; }

.sec > h2 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--display);
  font-size: clamp(21px, 2.6vw, 25px);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.25;
  color: var(--txt);
  margin-bottom: 22px;
  scroll-margin-top: 96px;
  text-wrap: balance;
}
/* Como cualquier cifra destacada de NEX —la cuenta atrás de la portada, el
   número grande de estadísticas—: Inter, `tabular-nums` para que no baile al
   pasar de 9 a 10, peso 700 y el tracking apretado que llevan los números de
   la casa. La monoespaciada que había aquí no es de este producto: `--type-mono`
   está declarada en `tokens.css` y no la usa ni una pantalla de la app. */
.sec > h2 .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transform: translateY(2px);
}

/* ── Clausulas numeradas ──────────────────────────────────────────────────
   Las 2.1, 6.3 y compania eran una entradilla en negrita DENTRO del parrafo:
   con la frase pegada al numero, un documento de diecisiete secciones se leia
   como un muro y no habia forma de barrerlo buscando una clausula concreta.

   Ahora el rotulo va en su propia linea y la frase empieza debajo. Es un
   titulillo, pero UN ESCALON POR DEBAJO del h3: 13,5px contra 15,5, y sin el
   aire que el h3 se reserva encima. Asi la jerarquia sigue teniendo cuatro
   peldanos claros y ninguno pisa al de arriba.

   El numero va en el acento y el rotulo en tinta, y eso no es decoracion: el
   numero es un LOCALIZADOR —lo que citas cuando reclamas «segun la clausula
   6.3»—, igual que los numeros de seccion, que tambien van en azul. El rotulo
   es titulo, y los titulos de este nivel son de tinta. */
.cl-h {
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--txt);
}
.cl-n {
  color: var(--acc-label);
  font-variant-numeric: tabular-nums;
}
/* Entre una clausula y la siguiente hace falta mas hueco que entre dos parrafos
   sueltos: si no, el titulillo de la de abajo se pega al final de la de arriba
   y parece que la continua. */
.doc > .sec p.cl { margin-top: 22px; }
.doc > .sec p.cl:first-of-type { margin-top: 0; }

/* El h3 se queda en TINTA a proposito. Es un titulillo de 15,5px que vive
   dentro del texto corrido, a un paso del `strong` que lleva al lado; en azul
   competiria con el h2 que lo contiene y la seccion dejaria de tener una sola
   cabeza. El azul marca DONDE EMPIEZA algo, no cada escalon. */
h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--txt);
  letter-spacing: -0.008em;
  margin: 34px 0 12px;
}

p { margin-bottom: 17px; }
p:last-child { margin-bottom: 0; }

.doc > .sec ul,
.doc > .sec ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
/* Las filas de una lista se separaban con un filete arriba y otro debajo de
   cada una. Ahora las separa el hueco: el `padding` vertical sube de 8 a 13 y
   el bullet baja con él. */
.doc > .sec li {
  position: relative;
  padding: 9px 0 9px 24px;
  line-height: 1.65;
}
.doc > .sec ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 19px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--txt-3);
}
.doc > .sec ol { counter-reset: it; }
.doc > .sec ol li { padding-left: 36px; }
.doc > .sec ol li::before {
  counter-increment: it;
  content: counter(it);
  position: absolute;
  left: 0;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

a { color: var(--acc); text-decoration: none; }

/* NADA SE SUBRAYA EN REPOSO. El subrayado aparece al pasar por encima, que es
   cuando de verdad hace falta: confirma que eso responde al cursor.

   Pero quitarlo del cuerpo del documento deja un agujero que hay que tapar. Un
   enlace dentro de un parrafo tiene que distinguirse del texto que lo rodea por
   algo mas que el color —criterio 1.4.1 de las WCAG—, y aqui el azul del enlace
   y el gris del parrafo estan a 1,2:1 en los dos temas: muy por debajo del 3:1
   que haria falta para fiarse solo del tono.

   Y no se arregla eligiendo otro azul. Para separarse 3:1 del parrafo, el
   enlace tendria que ser MUCHO mas claro; y tan claro ya no se separa del
   fondo, que es la otra condicion. Con el texto del cuerpo a 7,2:1 del papel no
   queda hueco para las dos cosas a la vez.

   Asi que la senal no cromatica pasa a ser el PESO: 600 contra el 400 del
   parrafo. Se nota sin ensuciar la linea, y funciona igual para quien no
   distingue el azul del gris. */
.doc a { font-weight: 600; }
.doc a:hover {
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* SIN NEGRITA. Habia 54 fragmentos en negrita repartidos por los cuatro
   documentos, 31 solo en privacidad: una cada ochenta y cinco palabras. A esa
   densidad la negrita deja de destacar y pasa a ser textura, y el parrafo se
   lee a saltos.

   Lo que se queda es el escalon de TINTA: el texto corrido va en `--txt-2` y lo
   enfatizado sube a `--txt`. Es el mismo recurso que usa la primera columna de
   las tablas, y basta para que una frase pese mas sin gritar. Si tampoco se
   quiere eso, se cambia `--txt` por `inherit` en esta linea y la negrita
   desaparece del todo. */
strong { font-weight: inherit; color: var(--txt); }

/* El ÚNICO monoespaciado que sobrevive, y no por estilo: aquí dentro va una
   clave literal de `localStorage` —`nex-srs-*`, `nex-exam-store`—, una cadena
   que alguien puede ir a buscar tal cual. La familia distingue el literal de la
   prosa que lo rodea, que es información, no decoración. En todo lo demás de
   esta hoja la mono era un disfraz y se ha ido. */
code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--sunk);
  border-radius: 4px;
  padding: 1.5px 5px;
  color: var(--txt-2);
}

/* ── Aviso ────────────────────────────────────────────────────────────────
   El relleno ámbar ya marca la familia y el `strong` en `--warn` marca de qué
   avisa. El filo de 2px que llevaba a la izquierda era decirlo una tercera
   vez. */
.aviso {
  background: var(--warn-soft);
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 24px;
  font-size: 15px;
}
.aviso p { margin-bottom: 10px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso strong { color: var(--warn); }

/* ── Tablas ─────────────────────────────────────────────────────────────────
   Aquí no queda ni una línea. Lo que delimita la tabla es su superficie; lo que
   separa las filas es el hueco —11px arriba y abajo, o sea 22 entre el texto de
   una fila y el de la siguiente— y lo que distingue la cabecera es que va en
   versalitas con 8px de aire por debajo, no una banda de color.

   Que se lea sin filetes no es solo cuestión de hueco: la primera columna va en
   `--txt` y con más peso que el resto, así que cada fila arranca con un ancla
   oscura a la izquierda. Sin eso, tres columnas de gris del mismo tono y sin
   líneas sí se mezclarían. */
.tabla {
  overflow-x: auto;
  margin: 0 0 24px;
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--sombra);
}
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 14px; }
th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--txt-3);
  padding: 16px 20px 8px;
  vertical-align: bottom;
  white-space: nowrap;
}
td {
  padding: 11px 20px;
  vertical-align: top;
  line-height: 1.55;
  color: var(--txt-2);
}
tr:first-child td { padding-top: 4px; }
tr:last-child td { padding-bottom: 16px; }
td:first-child { color: var(--txt); font-weight: 550; }
td code { font-size: 12px; }

/* EN EL TELÉFONO LA TABLA SE APILA. Con su ancho mínimo de 540px se salía de la
   pantalla y había que desplazarla de lado: la de «Responsable» enseñaba
   «Javier C» y «privacio», cortados. Apilada, cada fila es un bloque —el dato
   que la nombra arriba, en tinta, y lo demás debajo— y todo se lee entero. */
@media (max-width: 640px) {
  table { min-width: 0; }
  thead { display: none; }
  tr { display: block; padding: 12px 18px; }
  tr + tr { padding-top: 4px; }
  td { display: block; padding: 2px 0; overflow-wrap: anywhere; }
  tr:first-child td, tr:last-child td { padding-top: 2px; padding-bottom: 2px; }
}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie {
  grid-column: 1 / -1;
  margin-top: 88px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--txt-3);
}
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie nav a { color: var(--txt-2); text-decoration: none; }
.pie nav a:hover { color: var(--acc); }

/* ─────────────────────────────────────────────────────────────────────────
   Índice de documentos — la portada de `/legal`

   Existe porque el pie de la landing pasó de cuatro enlaces a dos:
   «Privacidad», que se consulta de verdad y tiene que estar directa, y
   «Legal», que agrupa lo que solo se busca cuando se busca.

   Dentro de un documento esta lista ya la da la barra lateral; esto es la
   puerta para quien llega de fuera. Por eso NO lleva `.side`: sería el mismo
   listado dos veces en la misma pantalla.

   La doble clase `.shell.shell--indice` no es por gusto. La rejilla de dos
   columnas se declara dentro de `@media (min-width: 1000px)`, y una media
   query no añade especificidad: con una sola clase esto dependería del orden
   del fichero. Con dos, gana siempre.
   ───────────────────────────────────────────────────────────────────────── */
.shell.shell--indice { max-width: 820px; grid-template-columns: minmax(0, 1fr); }

/* Sin barra lateral no hay dos columnas que alinear, así que la cabecera, la
   lista y el pie comparten un mismo ancho de lectura y el bloque entero se
   centra. Antes el `shell` medía 1.180px y la lista 760: la página quedaba
   pegada a la izquierda con un tercio de vacío a la derecha que no significaba
   nada. */
.doc--indice { max-width: none; }

/* La cabecerilla se alinea con el texto de las filas, no con su relleno: los
   14px de `.indice a` menos los 10 que ya trae `.side-label`. */
.doc--indice .side-label { padding-left: 14px; margin-bottom: 10px; }

/* Cinco tarjetas con fondo y sombra apiladas una encima de otra no eran un
   índice: eran cinco paneles, y la página parecía un escaparate de productos.
   Un índice es una LISTA. Esta es la misma que el rail de la síntesis —número
   en el acento, etiqueta al lado, relleno solo al pasar por encima— crecida al
   tamaño de una portada: cada fila puede permitirse la descripción y la norma
   porque aquí no compite con un documento al lado.

   En reposo no hay ni caja ni línea. Lo que separa una fila de la siguiente es
   el aire, y lo que dice cuál estás señalando es el relleno. */
.indice { list-style: none; display: flex; flex-direction: column; gap: 2px; }

/* `.doc a` subraya todos los enlaces del cuerpo, que es lo correcto en un
   párrafo y un estorbo aquí: el destino ya lo dice la fila entera. */
.indice a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  padding: 14px;
  border-radius: var(--r);
  text-decoration: none;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.indice a:hover { background: var(--hover); }
.indice a:active { transform: scale(0.995); }

/* La misma burbuja del rail, a tamaño de portada. Al pasar por encima se
   rellena, igual que la fila marcada del índice lateral: es el mismo gesto
   —hueca en reposo, maciza cuando la señalas— en las dos escalas. */
.indice-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.indice a:hover .indice-num { background: var(--acc); color: var(--on-acc); }

.indice-cuerpo { display: grid; gap: 5px; min-width: 0; }

/* La norma va PEGADA a su título, no alineada al borde derecho de la página:
   ahí se separaban setecientos píxeles del documento que califican y dejaban de
   leerse como una sola cosa. Envuelve en estrecho y baja sola. */
.indice-linea {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.indice-titulo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--txt);
  transition: color var(--fast) var(--ease);
}
.indice a:hover .indice-titulo { color: var(--acc); }

.indice-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--txt-2);
}

/* Píldora de acento suave, que es como NEX marca una etiqueta corta
   (`exam.css:644`: 10px, 700, 0.08em, `--accent-soft`, radio 999px). La norma
   no es un pie de foto gris: es la respuesta a «por qué existe este documento»,
   y se lee de un vistazo. */
.indice-norma {
  justify-self: start;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}