/**
 * tokens.css — el sistema del archivo. Un solo lugar, una sola verdad.
 *
 * Antes de este archivo el sitio tenía TRES copias byte-idénticas del mismo
 * bloque <style> (538 líneas × 3 = 71.670 bytes redundantes, el 36,7 % de todo
 * el HTML) y ningún token de espacio, escala ni forma.
 *
 * Regla dura: ningún valor de color, tamaño, espacio, radio, sombra o duración
 * se escribe suelto en un componente. Si no existe aquí, o se agrega con
 * criterio, o no se necesita.
 *
 * ═══ CÓMO LEER LOS RATIOS ═══
 * Cada color de texto lleva su contraste real (WCAG 2.1, calculado, no estimado)
 * contra los CINCO fondos que existen en el sitio:
 *
 *   PAPEL  #EBDFC3   el fondo general
 *   PIE    #E9DEC4   el pie de página
 *   PANEL  #FAF6EA   .g — el panel pergamino, el más claro
 *   NOTA   #F4ECD8   .cartela — el papel de los recortes de prensa
 *   NOCHE  #2E2317   .banda-noche — la banda del podcast, EL ÚNICO FONDO OSCURO
 *
 * El umbral es 4.5:1 para texto normal y 3:1 para bordes y focos (SC 1.4.11).
 * Si un token baja de ahí, no se "ve más elegante": se vuelve ilegible.
 *
 * (El antiguo fondo BANDA #D8CBB0 —`.banda-osc`— desapareció con el rediseño:
 *  era el fondo que dejaba a --marron-sua a 4.52:1, a dos centésimas del filo.
 *  Ahora el único contraste alterno es NOCHE, que es holgadísimo.)
 */

:root {

  /* ═══════════════════════════════════════════════════════════════
     1 · COLOR
     Paleta monocromática cálida sepia: todo vive en el rango de tono
     25-40°. Los acentos fuera de eje son tres y están medidos: el
     lacre, la franja «par avion» del formulario y el verde de Spotify
     —el único que es color de marca ajena, y por eso vive encerrado
     en la banda oscura.
     ═══════════════════════════════════════════════════════════════ */

  /* — Superficies claras — */
  --papel: #EBDFC3;
  --papel-fondo: #EADEC0;                 /* base del pergamino procedural */
  --panel: rgba(252, 248, 238, .90);
  --panel-solido: #FBF6EA;                /* respaldo sin backdrop-filter */
  --pie: rgba(233, 222, 196, .9);
  --cartela-alto: #F8F3E2;                /* papel de recorte, arriba */
  --cartela-bajo: #F1E8CE;                /* papel de recorte, abajo */

  /* — Superficie oscura: la banda del podcast —
       Es la pieza que el cliente pidió hacer protagonista. Se gana el
       protagonismo por CONTRASTE de superficie, no por tamaño de fuente:
       es la única sección del sitio que invierte el papel. */
  --noche: #2E2317;                       /* referencia de cálculo */
  --noche-alta: #33271A;                  /* tope del degradado */
  --noche-baja: #241B11;                  /* fondo del degradado */

  /* — Texto sobre claro —              PAPEL   PIE   PANEL   NOTA  */
  --tinta:      #3A2D1D;               /* 10.09  9.99  12.36  11.44  AAA */
  --marron:     #5A4530;               /*  6.82  6.75   8.35   7.73  AAA */
  --marron-sua: #68533D;               /*  5.49  5.43   6.72   6.22  AA  */
  --oro-tinta:  #6E5128;               /*  5.53  5.47   6.77   6.27  AA
                                          el oro LEGIBLE. Todo texto dorado usa
                                          éste; nunca --oro ni --oro-claro. */

  /* — Oro ornamental — NUNCA para texto pequeño. Sirve de borde y de trazo,
       donde el umbral es 3:1, no 4.5:1. */
  --oro:       #8A6532;                /*  3.98  3.94   4.87   4.51  borde ✓ (>3) */
  --oro-claro: #A9813E;                /*  2.69  2.66   3.30   3.05  SOLO degradados
                                          y filetes decorativos: no delimita nada
                                          ni indica ningún estado. */

  /* — Acento único sobre claro — el lacre. Sellos, capitular, numerales del
       legajo, envío del formulario y TODOS los anillos de foco sobre papel. */
  --lacre: #7A2E1D;                    /*  7.10  7.03   8.69   8.04  AAA */
  --foco:  var(--lacre);               /* se REDEFINE dentro de .banda-noche */

  /* — Texto sobre fondo oscuro — */
  --sobre-oscuro: #F7F1E3;             /* sobre --marron  → 8.01:1  AAA
                                          sobre --tinta   → 11.95:1 AAA
                                          sobre NOCHE     → 13.31:1 AAA */
  --sobre-lacre:  #F3E3CE;             /* sobre --lacre   → 7.46:1  AAA */

  /* — Los dos tonos que viven SOLO dentro de .banda-noche —
       Un fondo oscuro invierte todos los cálculos: el sepia legible sobre
       papel (--marron-sua, 5.49) da 1.9:1 sobre NOCHE, y el lacre del foco
       cae a 1.58:1. Por eso la banda trae su propio par. */
  --sobre-noche-sua: #D9CBAF;          /* sobre NOCHE → 9.04:1  AAA — texto secundario */
  --oro-luz:         #E8C68E;          /* sobre NOCHE → 9.05:1  AAA — acento, foco y
                                          rótulos dentro de la banda */

  /* — Verde del podcast —
       #1DB954 es el verde real de Spotify y sólo se usa DENTRO de la banda
       oscura, donde funciona: como fondo de botón con --sobre-verde encima da
       6.28:1. Sobre pergamino daría 1.95:1, así que ahí no aparece jamás. */
  --verde-spotify: #1DB954;
  --verde-spotify-alto: #1ED760;       /* hover — sube el contraste, no lo baja */
  --sobre-verde: #0B2413;              /* sobre --verde-spotify → 6.28:1  AA */
  --verde-audio: #166534;              /* 5.39 sobre PAPEL — el verde LEGIBLE en
                                          claro: mensaje de éxito del formulario */

  /* — Líneas — */
  --linea: #CDB98D;                    /* filete decorativo: no delimita controles */
  --linea-sutil: rgba(138, 101, 50, .28);
  --linea-campo: var(--oro);           /* borde de input: 3.98:1, cumple SC 1.4.11 */
  --linea-noche: rgba(232, 198, 142, .26);   /* el filete dentro de la banda */


  /* ═══════════════════════════════════════════════════════════════
     2 · TIPOGRAFÍA
     Once pasos fluidos. Los dos nuevos son de contenido, no de adorno:
     --t-lectura (la prosa de la biografía, que no puede compartir paso
     con la interfaz) y --t-cifra (el guarismo del podcast, el gancho
     de la sección protagonista). --t-3xl sustituye a --t-2xl en los
     h2 porque las seis secciones ahora se anuncian de verdad.
     ═══════════════════════════════════════════════════════════════ */

  --serif: Constantia, "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Inter, system-ui, Arial, sans-serif;

  --t-2xs:  clamp(10.5px, 10.0px + 0.15vw, 11.5px);  /* versalitas y rótulos */
  --t-xs:   clamp(12.0px, 11.4px + 0.18vw, 13.0px);  /* metadatos, notas, nav, pie */
  --t-sm:   clamp(13.5px, 12.8px + 0.22vw, 15.0px);  /* interfaz, botones, enlaces */
  --t-base: clamp(15.5px, 14.6px + 0.28vw, 17.0px);  /* texto general */
  --t-lectura: clamp(16.5px, 14.7px + 0.43vw, 18.0px); /* PROSA larga: biografía */
  --t-md:   clamp(17.0px, 15.8px + 0.38vw, 20.0px);  /* títulos de ficha, titulares */
  --t-lg:   clamp(19.0px, 16.9px + 0.66vw, 24.0px);  /* cargos, cabeceras */
  --t-xl:   clamp(26.0px, 20.5px + 1.70vw, 38.0px);  /* guarismos, cita destacada */
  --t-2xl:  clamp(30.0px, 22.7px + 2.30vw, 46.0px);  /* h1 de página interior */
  --t-3xl:  clamp(30.0px, 19.5px + 4.20vw, 56.0px);  /* h2 de sección */
  --t-cifra: clamp(52px, 34px + 4.2vw, 88px);        /* el 106 del podcast */
  --t-display: clamp(46px, 8.6vw, 104px);            /* el apellido y el folio fantasma */

  --lh-apretado: 1.08;    /* display grande: a 6rem, 1.5 abre un abismo */
  --lh-corto: 1.36;
  --lh-normal: 1.68;      /* prosa */

  --track-display: .005em;
  --track-amplio: .13em;
  --track-marca: .22em;
  --track-rotulo: .34em;
  --track-nombre: .55em;

  /* La medida es el token de legibilidad más importante y el más ignorado.
     El canon es 45-75 caracteres. */
  --medida: 66ch;
  --medida-corta: 54ch;
  --medida-ancha: 74ch;


  /* ═══════════════════════════════════════════════════════════════
     3 · ESPACIO
     Base 4px en escala casi geométrica (razón ~1.45).
     ═══════════════════════════════════════════════════════════════ */

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 18px;
  --e-5: 26px;
  --e-6: 38px;
  --e-7: 56px;
  --e-8: 84px;
  --e-seccion: clamp(56px, 42px + 3.5vw, 84px);   /* ritmo vertical entre secciones */


  /* ═══════════════════════════════════════════════════════════════
     4 · FORMA
     ═══════════════════════════════════════════════════════════════ */

  --r-xs: 2px;      /* placas metálicas, badges: casi recto, como el metal */
  --r-sm: 6px;      /* campos de formulario */
  --r-md: 14px;     /* paneles pergamino */
  --r-pill: 999px;  /* botones */


  /* ═══════════════════════════════════════════════════════════════
     5 · SOMBRA
     Se tiñen con el color de la escena, JAMÁS con negro: una sombra
     negra sobre papel sepia ensucia el sitio entero. La única
     excepción es la consola de Spotify, que vive sobre NOCHE y ahí
     una sombra sepia sería una mancha.
     ═══════════════════════════════════════════════════════════════ */

  --s-2: 0 10px 34px rgba(74, 55, 30, .16), 0 2px 8px rgba(74, 55, 30, .10);
  --s-3: 0 14px 34px rgba(74, 55, 30, .20);
  --s-4: 0 22px 50px rgba(74, 55, 30, .28);

  /* Objeto físico: tres capas — difusa, media y de contacto. */
  --s-objeto: 0 16px 34px rgba(74, 55, 30, .30),
              0 4px 10px rgba(74, 55, 30, .20),
              0 3px 2px rgba(74, 55, 30, .32);
  --s-objeto-alto: 0 26px 52px rgba(74, 55, 30, .34),
                   0 6px 14px rgba(74, 55, 30, .22),
                   0 2px 1px rgba(74, 55, 30, .36);
  --s-noche: 0 26px 60px rgba(12, 8, 4, .48), 0 4px 12px rgba(12, 8, 4, .34);

  --brillo-interior: inset 0 1px 0 rgba(255, 255, 255, .8);
  --brillo-noche: inset 0 1px 0 rgba(255, 255, 255, .07);


  /* ═══════════════════════════════════════════════════════════════
     6 · TEXTURA
     El ruido procedural estaba escrito DOS veces, íntegro, en el CSS
     (~700 bytes repetidos entre .fondo y el papel de los recortes).
     Ahora es un token con dos consumidores y un solo feTurbulence.
     ═══════════════════════════════════════════════════════════════ */

  --ruido: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.30%200%200%200%200%200.22%200%200%200%200%200.12%200%200%200%200.085%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22260%22%20height%3D%22260%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");


  /* ═══════════════════════════════════════════════════════════════
     7 · MOVIMIENTO
     ═══════════════════════════════════════════════════════════════ */

  --d-1: .16s;   /* micro: el icono del botón de play */
  --d-2: .25s;   /* estados de control */
  --d-3: .4s;    /* tarjetas, objetos que se levantan */
  --d-4: .9s;    /* entradas al hacer scroll */
  --d-5: 2.6s;   /* la firma que se dibuja */

  --ease-salida: cubic-bezier(.2, .7, .3, 1);   /* la curva de la casa */
  --ease-entrada: cubic-bezier(.4, 0, .2, 1);
  --ease-suave: ease-out;
  --ease-lineal: linear;


  /* ═══════════════════════════════════════════════════════════════
     8 · MEDIDAS DE INTERFAZ
     ═══════════════════════════════════════════════════════════════ */

  --nav-h: 72px;         /* alto de la nav pegajosa, para el scroll-margin */
  --tactil: 44px;        /* área táctil mínima — WCAG 2.5.5 */
  --ancho-max: 1120px;

  /* Tope de alto de la portada de la OBRA INSIGNE, la única ficha cuya tapa no
     saca su alto de la columna (va en fila, con 320px fijos de ancho al lado
     del texto). En las fichas normales el alto lo pone `aspect-ratio` sobre
     .tapa: así crece con el ancho de la celda —no con el de la ventana— y
     todas las portadas de una fila se apoyan en la misma línea, como en un
     estante de verdad. */
  --alto-tomo: clamp(168px, 84px + 11vw, 248px);
}

/* La nav se reajusta sola: --nav-h alimenta el scroll-margin-top de cada
   sección, así que el ancla nunca queda debajo de la barra.
   En móvil la nav pasa a una sola fila desplazable (antes se envolvía en tres
   líneas y consumía 136px fijos de alto), y por eso aquí BAJA en vez de subir.
   El corte es 900px —no 880— para que coincida con el único breakpoint de
   navegación del sistema: cuatro cortes en todo el sitio (1024/900/700/560). */
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
}