/* =========================================================================
   base — Tokens, reinicio, foco visible y utilidades.

   Tramo 1 de 8 de la hoja que antes era una sola (1 468 líneas). Los
   tramos son CONTIGUOS y se cargan en este orden: el orden de carga es la
   cascada. Mover una hoja de sitio puede cambiar qué regla gana sin que
   nada falle — se comprueba con `npm run huella`, no razonando.
   ========================================================================= */

/* ===========================================================================
   Regeneración Radio — hoja única.

   Sin framework y sin build: el sitio se publica como archivos y quien lo
   mantenga tiene que poder abrir este archivo y entenderlo entero.

   La idea del diseño es de periódico, no de blog: una nota manda y el resto
   la acompaña. Un muro donde todas pesan igual obliga al lector a decidir por
   dónde empezar, y casi siempre decide irse.

   Orden: variables → base → estructura → menú → cinta → portada → tarjetas →
   artículo → episodio → reproductor → pie → responsivo.
   =========================================================================== */

:root {
  /* No es negro puro. Un #000 plano se lee como un agujero en la pantalla y
     aplasta el arte del logo, que tiene grises fríos; este carbón deja que el
     micrófono y sus ondas respiren. El grano de abajo hace el resto. */
  --negro: #322b2c;
  --negro-suave: #4b4041;
  --linea-oscura: #655456;

  /* Grano. Ruido fractal en un SVG embebido: pesa unos 300 bytes, escala a
     cualquier tamaño y no es una imagen que haya que servir. Sin él, una
     superficie oscura grande se ve como un rectángulo de pintura. */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --papel: #edebeb;          /* el fondo detrás del panel blanco */
  --blanco: #ffffff;
  --linea: #e6e3e4;

  --tinta: #0f0e0e;
  --tinta-tenue: #675e5e;

  /* La paleta NO se eligió: se muestreó del logo (colores dominantes del
     archivo, agrupados). Así el sitio y la marca no divergen con el tiempo,
     que es lo que pasa cuando alguien «afina» un hex a ojo.

     Hay DOS rojos y no es indecisión: el de la marca es muy oscuro y sobre
     negro da 1.8:1 de contraste, o sea ilegible. El claro es el mismo tono
     aclarado, y es el que se usa en el dial y en cualquier superficie oscura.
     Los números de al lado son el contraste real, medido. */
  /* Los contrastes de al lado están medidos contra el `--negro` DE ARRIBA.
     Decían 4.1:1 y 11.3:1 porque se midieron cuando el negro era #0b090a, y
     al aclararlo a #322b2c nadie los volvió a medir: el comentario siguió
     afirmando una cifra que ya no era cierta. Si se vuelve a tocar el negro,
     estas tres líneas se vuelven a medir o se borran. */
  --rojo: #7e0612;         /* el rojo del micrófono — 10.9:1 sobre blanco */
  --rojo-claro: #c9414d;   /* el mismo, aclarado — 3.0:1 sobre el negro de hoy */
  --rojo-medio: #8a2a36;   /* el rojo suave de las sombras del arte */
  --gris-claro: #c9c3c3;   /* el gris del pie del micrófono — 8.3:1 sobre negro */
  --gris: #908486;         /* el gris medio de las ondas — sólo el «›» de las migas */

  /*
   * BRASA — «aquí estás» en el menú.
   *
   * Era un ámbar (#f0ad4e, matiz 35°) y desentonaba por una razón medible: la
   * marca vive en 354° y el ámbar estaba a **41° de distancia**, con 84 % de
   * saturación sobre un cajón de 3.5 %. El menú entero tenía dos familias y
   * nada en medio — grises muertos y un grito naranja—, y un naranja al lado
   * de un rojo no se lee como otra señal: se lee como un rojo mal hecho.
   *
   * ¿Por qué no el rojo de la marca, entonces? Porque **no se ve**: #7e0612
   * sobre el cajón da 1.33:1, incluso como relleno. Sobre un fondo casi negro
   * el rojo de marca no puede llevar señal, y por eso hacía falta otro tono.
   * Lo que estaba mal no era tener un acento aparte: era su matiz.
   *
   * La brasa está a 18° del rojo —misma familia, se lee como el mismo fuego
   * aclarado— y da 5.19:1 sobre el cajón.
   *
   * Va en la BARRA y en el cuadro de la inicial, no en el texto de la fila:
   * sobre el fondo de la fila activa daría 3.73:1, por debajo del umbral de
   * lectura. El texto activo se queda en blanco, que da 9.96:1.
   */
  --brasa: #de8873;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Se ensanchó de 15rem para el logo ornamentado: su filigrana muere por
     debajo de cierto tamaño y cada píxel cuenta para que «RADIO» se lea. */
  --lateral: 16rem;
  --radio: 0.8rem;
}

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

a { color: inherit; }
img { max-width: 100%; }

/* Foco visible siempre: el sitio se navega con teclado y lector de pantalla.
   Quitarlo por estética es dejar fuera a quien no usa ratón. */
:focus-visible {
  outline: 3px solid var(--gris-claro);
  outline-offset: 2px;
  border-radius: 4px;
}

.a-contenido {
  position: absolute;
  left: -9999px;
  background: var(--negro);
  color: #fff;
  padding: .75rem 1rem;
  z-index: 100;
}
.a-contenido:focus { left: 1rem; top: 1rem; }

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