/* DataGoal · hoja de estilos única del sitio público (docs/frontend.md §4).
 *
 * Mundo: la pizarra táctica del vestuario. La página es una sola pizarra
 * verde con las líneas de la cancha impresas, un riel de aluminio arriba
 * (encabezado) y la bandeja abajo (pie). Lo escrito a mano va en tiza; lo
 * impreso (títulos, números) en letra condensada; los resultados son fichas
 * imantadas. Lo que se dibuja con tiza se borra; lo que publicamos, no.
 *
 * Orden: 0 fuentes · 1 tokens · 2 base · 3 estructura · 4 componentes ·
 * 5 utilidades · 6 responsive · 6b movimiento · 7 accesibilidad · 8 impresión.
 *
 * Un bloque BEM (.bloque__elemento--variante) por macro de
 * templates/components/. Colores, espacios y tiempos salen de los tokens:
 * un valor suelto dentro de un componente es un token que falta.
 */

/* ── 0. Fuentes ─────────────────────────────────────────────────────────
 * Barlow (texto), Barlow Condensed (lo impreso: títulos y números) y Kalam
 * (la tiza), servidas desde static/fonts/ con su licencia OFL al lado.
 * latin-ext solo se baja si la página tiene esos caracteres (Śląsk,
 * Çaykur); la tiza escribe solo textos propios, en castellano. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/barlow-400-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: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/barlow-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-600-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: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/barlow-condensed-800-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: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/barlow-condensed-800-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/kalam-400-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;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* La pizarra, en la paleta del logo: verde de pizarra en el tono del
     verde del logo, tizas de color pastel (verde y celeste) y la tinta azul
     del logo en el marco. --board es el tono del medio, para lo que tapa
     contenido (columna fija de las tablas). */
  --board-top: #1f3e37;
  --board-bottom: #182f2b;
  --board: #1c3a34;
  --board-edge: #12251f;
  --dust: rgba(238, 243, 241, 0.04);
  --dust-strong: rgba(238, 243, 241, 0.08);

  /* La franja de la marca: la flecha del logo (verde → verde agua) y el celeste. */
  --brand-stripe: linear-gradient(90deg, #2ea84c 0%, #2a9f99 50%, #7cc3ee 100%);

  /* Líneas de la cancha, impresas en la pizarra (no se borran). */
  --line: rgba(238, 243, 241, 0.15);
  --line-strong: rgba(238, 243, 241, 0.27);

  /* Tiza: el texto. Los secundarios salen del verde de la pizarra, no de un gris. */
  --chalk: #eef3f1;
  --chalk-strong: #ffffff;
  --chalk-soft: #c7d6d0;
  --chalk-faint: #9fb5ad;          /* 5.7:1 sobre --board */
  --chalk-box: rgba(238, 243, 241, 0.34);
  --chalk-mark: #9fe0b2;           /* tiza verde pastel: lo que marca el DT (8:1) */
  --chalk-mark-soft: rgba(159, 224, 178, 0.75);
  --chalk-model: #a9d4f2;          /* tiza celeste pastel: el modelo (7.9:1) */

  /* Fichas imantadas, en los colores del logo. El color acompaña, nunca va
     solo: cada ficha lleva su trazo (tilde, cruz, punteado) y su texto. */
  --magnet-green: #2ea84c;         /* acertado: el verde de la flecha del logo */
  --magnet-green-ink: #04180a;
  --magnet-red: #e06666;           /* fallado */
  --magnet-red-ink: #fff;
  --magnet-celeste: #7cc3ee;       /* lista Valor */
  --magnet-celeste-ink: #0b2a40;
  --magnet-teal: #5cc6b6;          /* lista Seguros: el verde agua del logo, más claro */
  --magnet-teal-ink: #062521;
  --magnet-white: #f2f6f8;
  --magnet-white-ink: #102b46;
  --magnet-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.3);
  --magnet-lift: 0 2px 2px rgba(0, 0, 0, 0.3), 0 8px 14px rgba(0, 0, 0, 0.32);

  /* Estado en texto (tiza de color), legible sobre la pizarra. */
  --win: #8fdca2;
  --lose: #f4a3a3;
  --void: #b9c7c1;
  --warning: var(--chalk-model);
  --info: var(--chalk-model);

  /* El marco de la pizarra (riel y bandeja): casi blanco, como el fondo del
     logo, con su tinta azul. */
  --frame-hi: #ffffff;
  --frame: #eef3f5;
  --frame-lo: #c9d6dd;
  --frame-edge: #8ea3b1;
  --frame-ink: #102b46;
  --frame-ink-soft: #3b5470;       /* 7:1 sobre --frame */

  /* El imán del canal: verde pastel con la tinta azul del logo (9.6:1). */
  --cta: #9fe0b2;
  --cta-hi: #b5e9c3;
  --cta-ink: #102b46;

  --focus: var(--chalk-mark);

  /* Espaciado: escala de 4 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 5rem;
  --gutter: var(--space-5);

  /* Tipografía */
  --font-print: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-chalk: 'Kalam', 'Segoe Print', cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-lg: 1.15rem;
  --text-xl: 1.4rem;

  /* Forma: cajas dibujadas a mano (las esquinas no son todas iguales). */
  --radius-chalk: 7px 11px 8px 10px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --chalk-stroke: 2px solid var(--chalk-box);

  /* Movimiento */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.2s;
  --duration-reveal: 0.6s;

  --z-header: 100;
  --z-skip: 200;
  --max-w: 1100px;
  --tap: 44px;                       /* objetivo táctil mínimo */
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* `hidden` gana siempre, aunque el componente tenga display propio. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--frame-lo) var(--board-edge);
  background: var(--board-top);
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--chalk);
  background-color: var(--board);
  caret-color: var(--chalk-mark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

/* La pizarra: polvo de tiza y las zonas que quedaron más gastadas de tanto
   borrar. Capa fija: se compone una vez y el scroll no la repinta. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url('pizarra.svg') 0 0 / 320px 320px,
    radial-gradient(ellipse 42% 18% at 22% 30%, var(--dust-strong), transparent 70%),
    radial-gradient(ellipse 38% 14% at 72% 58%, var(--dust), transparent 70%),
    radial-gradient(ellipse 55% 22% at 40% 88%, var(--dust), transparent 70%),
    linear-gradient(180deg, var(--board-top) 0%, var(--board) 50%, var(--board-bottom) 100%);
}

a {
  color: var(--chalk-strong);
  text-decoration: none;
  transition: color var(--duration) var(--ease), text-decoration-color var(--duration) var(--ease);
}

/* En texto corrido el enlace va subrayado en tiza amarilla: el color solo
   no alcanza para distinguirlo del texto (WCAG 1.4.1). Botones y navegación
   llevan clase o su propio estilo. */
main a:not([class]),
.site-footer a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(159, 224, 178, 0.7);
}

main a:not([class]):hover,
.site-footer a:not([class]):hover {
  color: var(--chalk-mark);
  text-decoration-color: currentColor;
}

/* Foco visible en todo lo interactivo, solo con teclado: tiza amarilla. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: rgba(159, 224, 178, 0.38);
  color: var(--chalk-strong);
}

h1, h2, h3, h4 {
  font-family: var(--font-print);
  font-weight: 800;
  line-height: 1.02;
  color: var(--chalk-strong);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.3rem, 1.5rem + 3.6vw, 3.6rem);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

/* Títulos de sección: los h2 directos de la página arrancan una zona nueva
   de la cancha, con su línea impresa arriba. Los títulos de componentes
   (tarjetas, llamados) tienen su propio estilo, sea cual sea su nivel. */
main > h2 {
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.15rem);
  text-transform: uppercase;
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 2px solid var(--line);
}

main > h3 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: var(--space-6) 0 var(--space-3);
}

p {
  margin-bottom: var(--space-4);
  max-width: 70ch;
}

strong {
  font-weight: 600;
  color: var(--chalk-strong);
}

/* Listas de texto (las de componentes llevan role="list" y no se tocan). */
:where(main) :where(ul, ol):not([role="list"]) {
  padding-left: 1.25rem;
  margin-bottom: var(--space-4);
  max-width: 70ch;
}

:where(main) :where(ul, ol):not([role="list"]) li + li {
  margin-top: var(--space-1);
}

:where(main) :where(ul, ol):not([role="list"]) li::marker {
  color: var(--chalk-mark);
}

[role="list"] {
  list-style: none;
}

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--dust-strong);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}

/* Tiza: lo escrito a mano. Grano de tiza con una máscara (static/tiza.svg). */
.chalk {
  font-family: var(--font-chalk);
  font-weight: 400;
  line-height: 1.35;
  color: var(--chalk);
  -webkit-mask-image: url('tiza.svg');
  mask-image: url('tiza.svg');
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
}

/* ── 3. Estructura ─────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--chalk-mark);
  color: var(--magnet-teal-ink);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--magnet-teal-ink);
}

/* El riel de aluminio de la pizarra: la marca y el menú van grabados ahí. */
.site-header {
  position: relative;
  z-index: var(--z-header);
  padding: calc(var(--space-2) + 4px) var(--gutter) var(--space-2);
  background: var(--frame);
  border-top: 1px solid var(--frame-hi);
  border-bottom: 2px solid var(--frame-edge);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  color: var(--frame-ink);
}

/* La franja de la marca arriba del riel, como en las piezas de redes. */
.site-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand-stripe);
}

/* Sobre el marco claro, el foco va en la tinta azul del logo. */
.site-header :focus-visible {
  outline-color: var(--frame-ink);
}

.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  font-family: var(--font-print);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--frame-ink);
}

.brand:hover {
  color: var(--frame-ink);
}

/* El escudo es un imán pegado al riel. */
.brand__escudo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: var(--magnet-shadow);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--frame-ink-soft);
  font-family: var(--font-print);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.site-nav a:hover {
  color: var(--frame-ink);
  background: rgba(255, 255, 255, 0.28);
}

/* La sección actual lleva un imán verde al lado; la sección (sin ser la
   página exacta), el imán sin relleno. El texto también cambia de peso. */
.site-nav a[aria-current] {
  color: var(--frame-ink);
  font-weight: 800;
}

.site-nav a[aria-current]::before {
  content: '';
  width: 0.62rem;
  height: 0.62rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--magnet-green);
  box-shadow: var(--magnet-shadow);
}

.site-nav a[aria-current="true"]::before {
  background: transparent;
  border: 2px solid var(--magnet-green);
  box-shadow: none;
}

main {
  position: relative;
  isolation: isolate;
  flex: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-8);
}

.page-header {
  position: relative;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--line);
}

.page-header__subtitle {
  color: var(--chalk-soft);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.page-header__meta {
  color: var(--chalk-faint);
}

.page-header > :last-child {
  margin-bottom: 0;
}

/* La bandeja de la pizarra: el estante de aluminio con la tiza y el
   borrador; abajo, los enlaces y la letra chica. */
.site-footer {
  position: relative;
  margin-top: var(--space-8);
  color: var(--chalk-soft);
  font-size: var(--text-sm);
}

.tray {
  position: relative;
  height: 22px;
  background: var(--frame);
  border-top: 1px solid var(--frame-hi);
  border-bottom: 2px solid var(--frame-edge);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.35);
}

.tray__props {
  position: absolute;
  bottom: 18px;
  right: max(var(--gutter), calc((100% - var(--max-w)) / 2 + var(--gutter)));
  width: 168px;
  height: 34px;
}

.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-7);
  background: transparent;
}

.site-footer__inner > p {
  margin: var(--space-2) 0;
}

.site-footer a:not([class]) {
  color: var(--chalk);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: var(--space-3) 0 var(--space-4);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-print);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk);
}

.site-footer__links a:hover {
  color: var(--chalk-mark);
}

/* La letra chica también es diseño: el +18 y la ayuda, con el mismo cuidado. */
.site-footer__fine {
  max-width: 62ch;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--chalk-faint);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.site-footer__fine strong {
  color: var(--chalk);
}

/* ── 4. Componentes ────────────────────────────────────────────────────── */

/* ui.icon */
.icon {
  flex-shrink: 0;
  vertical-align: -0.125em;
}

/* ui.button: el de Telegram es un imán azul grande; el secundario, una caja
   dibujada con tiza. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0.7rem 1.35rem;
  border: 2px solid transparent;
  font-family: var(--font-print);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease),
    background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.btn--telegram {
  border-radius: 9px;
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: var(--magnet-shadow);
}

.btn--telegram:hover {
  background: var(--cta-hi);
  color: var(--cta-ink);
}

.btn--secondary {
  border-color: rgba(236, 233, 225, 0.6);
  border-radius: var(--radius-chalk);
  background: transparent;
  color: var(--chalk-strong);
}

.btn--secondary:hover {
  background: var(--dust-strong);
  border-color: var(--chalk);
  color: var(--chalk-strong);
}

/* Ícono después del texto (icon_end): avanza un poco. */
.btn > span + .icon {
  transition: transform var(--duration) var(--ease);
}

.btn:hover > span + .icon {
  transform: translateX(3px);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ui.badge: texto impreso chico. Si lleva ícono (el resultado de un
   pronóstico), el ícono es una ficha imantada: color, trazo y texto. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-print);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--chalk);
}

.badge > .icon {
  width: 1.55em;
  height: 1.55em;
  padding: 0.28em;
  border-radius: 50%;
  stroke-width: 3;
  background: var(--magnet-white);
  color: var(--magnet-white-ink);
  box-shadow: var(--magnet-shadow);
}

.badge--success { color: var(--win); }
.badge--success > .icon { background: var(--magnet-green); color: var(--magnet-green-ink); }
.badge--danger { color: var(--lose); }
.badge--danger > .icon { background: var(--magnet-red); color: var(--magnet-red-ink); }
.badge--warning > .icon { background: var(--magnet-white); color: var(--magnet-white-ink); }
.badge--accent > .icon { background: var(--magnet-celeste); color: var(--magnet-celeste-ink); }
.badge--muted { color: var(--void); }
.badge--muted > .icon { background: transparent; color: var(--void); border: 2px dashed var(--void); box-shadow: none; }
.badge--neutral { color: var(--chalk-soft); }

/* picks.list_badge: la lista es un imán de color con su nombre. */
.list-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-print);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--chalk-strong);
  vertical-align: middle;
}

.list-tag__magnet {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--magnet-white);
  box-shadow: var(--magnet-shadow);
}

.list-tag--gratis .list-tag__magnet { background: var(--magnet-celeste); }
.list-tag--seguros .list-tag__magnet { background: var(--magnet-teal); }

/* picks.confidence_badge: una nota en tiza, no un sello. */
.confidence {
  font-family: var(--font-chalk);
  font-size: 0.98rem;
  color: var(--chalk-soft);
  white-space: nowrap;
}

/* ui.card: una caja dibujada con tiza. */
.card {
  position: relative;
  margin-bottom: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--dust);
  border: var(--chalk-stroke);
  border-radius: var(--radius-chalk);
}

.card > :last-child {
  margin-bottom: 0;
}

.card__title {
  font-size: 1.45rem;
  margin-bottom: var(--space-3);
}

/* Tarjeta-enlace: el enlace del título cubre toda la tarjeta. */
.card--link .card__title a {
  color: var(--chalk-strong);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(159, 224, 178, 0.55);
}

.card--link .card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card--link:hover {
  border-color: var(--chalk);
  background: var(--dust-strong);
}

.card--link:hover .card__title a {
  text-decoration-color: var(--chalk-mark);
}

/* ui.empty_state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: var(--space-7) var(--space-6);
  text-align: center;
  color: var(--chalk-soft);
  border: 2px dashed var(--chalk-box);
  border-radius: var(--radius-chalk);
}

.empty-state .icon {
  color: var(--chalk-mark);
  margin-bottom: var(--space-1);
}

.empty-state__title {
  margin: 0;
  color: var(--chalk-strong);
  font-size: 1.1rem;
  font-weight: 600;
}

.empty-state__text {
  margin: 0;
  max-width: 46ch;
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ui.callout: nota encerrada en tiza de color. */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: var(--space-4) var(--space-5);
  border: 2px dashed;
  border-radius: var(--radius-chalk);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--chalk-soft);
}

.callout .icon {
  margin-top: 0.15em;
}

.callout__body > :last-child {
  margin-bottom: 0;
}

.callout--warning {
  border-color: rgba(169, 212, 242, 0.6);
}

.callout--warning .icon { color: var(--warning); }

.callout--info {
  margin: var(--space-4) 0;
  border-color: rgba(169, 212, 242, 0.6);
  color: var(--chalk);
}

.callout--info .icon { color: var(--info); }

/* ui.kpi_grid / ui.kpi: la cuenta del DT. Cada indicador es un renglón
   (nombre, número, aclaración), separado del siguiente por una línea
   impresa; en pantalla ancha, dos columnas. Nada de números gigantes. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 0 var(--space-7);
  margin: var(--space-4) 0 var(--space-5);
}

.kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.kpi__label {
  font-family: var(--font-print);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--chalk);
}

.kpi__value {
  font-family: var(--font-print);
  font-size: clamp(1.7rem, 1.5rem + 0.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--chalk-strong);
  text-align: right;
}

.kpi__viz,
.kpi__hint {
  grid-column: 1 / -1;
}

.kpi__viz {
  margin-top: var(--space-1);
}

.kpi__hint {
  color: var(--chalk-soft);
  font-size: var(--text-sm);
}

/* picks.pick_list / picks.pick_card: la indicación del DT, con el imán de
   la lista (Valor, azul) clavado en la esquina. */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-6) var(--space-5);
  margin: var(--space-6) 0 var(--space-5);
}

.pick-grid > li {
  display: flex;
}

.pick-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--dust);
  border: var(--chalk-stroke);
  border-radius: var(--radius-chalk);
}

.pick-card::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--magnet-celeste);
  box-shadow: var(--magnet-shadow);
}

.pick-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-5) var(--space-5) 0;
}

.pick-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
  color: var(--chalk-soft);
  font-size: var(--text-sm);
}

.pick-card__body {
  flex: 1;
  padding: var(--space-2) var(--space-5) var(--space-5);
}

.pick-card__match {
  margin: 0 0 var(--space-2);
  font-size: 1.65rem;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* El pronóstico, escrito con tiza como una indicación en la pizarra. */
.pick-card__selection {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-chalk);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--chalk-mark);
  overflow-wrap: anywhere;
}

.pick-card__selection .icon {
  color: var(--chalk-mark);
}

.pick-card__stats {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.pick-card__stats > div {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.pick-card__stats dt {
  font-family: var(--font-print);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk-soft);
}

.pick-card__stats dd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--chalk-strong);
  font-family: var(--font-print);
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pick-card__stats dd > span {
  min-width: 3.4rem;
  text-align: right;
}

.pick-card__prob .bar {
  flex: 1;
}

.pick-card__edge {
  margin: var(--space-4) 0 0;
  color: var(--chalk-soft);
  font-size: var(--text-sm);
}

.pick-card__edge strong {
  color: var(--chalk-model);
}

/* ui.bar: un trazo de tiza sobre la línea impresa. Lleva grano de tiza. */
.bar {
  display: block;
  width: 100%;
  height: 10px;
  overflow: visible;
  -webkit-mask-image: url('tiza.svg');
  mask-image: url('tiza.svg');
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
}

.bar__track { fill: rgba(236, 233, 225, 0.12); }
.bar__fill { transform-box: fill-box; transform-origin: left center; }
.bar--brand .bar__fill { fill: var(--chalk); }
.bar--violet .bar__fill { fill: var(--chalk-model); }
.bar--muted .bar__fill { fill: var(--chalk-faint); }
.bar__mark { fill: var(--chalk-mark); }

/* ui.tally: palotes de tiza, de a cinco. El número va siempre en texto. */
.tally {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--chalk);
  -webkit-mask-image: url('tiza.svg');
  mask-image: url('tiza.svg');
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
}

.tally__group {
  height: 30px;
  width: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.tally--lose {
  color: var(--lose);
}

/* picks.form_guide: las fichas de los últimos resultados, como la racha
   de un equipo. La más reciente, a la izquierda. */
.form-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.form-guide .badge {
  gap: 0;
}

.form-guide .badge > .icon {
  width: 1.9rem;
  height: 1.9rem;
}

/* picks.month_nav */
.month-nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-5);
}

.month-nav__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: var(--chalk-stroke);
  border-radius: var(--radius-chalk);
  color: var(--chalk-strong);
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.month-nav__item:hover {
  border-color: var(--chalk);
  background: var(--dust-strong);
  color: var(--chalk-strong);
}

.month-nav__item[aria-current] {
  border-color: var(--chalk-mark);
  background: var(--dust-strong);
}

.month-nav__label {
  font-family: var(--font-print);
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
}

.month-nav__meta {
  color: var(--chalk-soft);
  font-size: var(--text-xs);
}

/* ui.table: la planilla dibujada en la pizarra. */
.table-wrap {
  margin: var(--space-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--chalk-stroke);
  border-radius: var(--radius-chalk);
  scrollbar-width: thin;
  scrollbar-color: var(--chalk-box) transparent;
}

.table {
  width: 100%;
  min-width: 36rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

.table :is(th, td) {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.table thead th {
  vertical-align: bottom;
  color: var(--chalk-soft);
  font-family: var(--font-print);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 2px solid var(--line-strong);
}

/* Encabezado de fila: semántica de <th>, peso de texto normal. */
.table tbody th {
  font-weight: 400;
  color: var(--chalk);
}

.table tbody tr:last-child > * {
  border-bottom: none;
}

.table tbody tr:hover > * {
  background-color: var(--dust);
}

.table :is(th, td).num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Primera columna fija al hacer scroll horizontal (tablas de métricas). */
.table--sticky :is(thead th, tbody th):first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--board);
}

/* Tabla en tarjetas (ui.table con stack=true), solo en pantallas angostas.
   La grilla de cada fila la define la tabla que la usa (abajo, historial). */
@media (max-width: 640px) {
  .table--stack {
    min-width: 0;
  }

  .table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .table--stack,
  .table--stack tbody {
    display: block;
  }

  /* Por defecto: lo principal a la izquierda, el estado a la derecha. */
  .table--stack tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--line);
  }

  .table--stack tbody tr:last-child {
    border-bottom: none;
  }

  .table--stack :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
  }

  .table--stack tbody tr:hover > * {
    background-color: transparent;
  }

  /* picks.history_table: partido | lista / pronóstico / precio | resultado */
  .table--stack .history__pick {
    grid-column: 1 / -1;
  }

  .table--stack td.history__odds {
    align-self: center;
    text-align: left;
  }

  .table--stack .history__odds::before {
    content: attr(data-label) " ";
    color: var(--chalk-soft);
    font-family: var(--font-print);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .table--stack td.history__result {
    justify-self: end;
    text-align: right;
  }
}

.cell-main {
  display: block;
  color: var(--chalk-strong);
  font-weight: 600;
  overflow-wrap: break-word;
}

.cell-sub {
  display: block;
  margin-top: 2px;
  color: var(--chalk-soft);
  font-size: var(--text-xs);
}

/* ui.disclosure */
.disclosure {
  margin-top: var(--space-5);
  border: var(--chalk-stroke);
  border-radius: var(--radius-chalk);
}

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  list-style: none;
  color: var(--chalk-strong);
  font-family: var(--font-print);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: inherit;
}

.disclosure__summary::-webkit-details-marker {
  display: none;
}

/* Flecha dibujada con bordes: gira al abrir. */
.disclosure__summary::before {
  content: '';
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--chalk-mark);
  border-bottom: 2px solid var(--chalk-mark);
  transform: rotate(-45deg);
  transition: transform var(--duration) var(--ease);
}

.disclosure[open] > .disclosure__summary::before {
  transform: rotate(45deg);
}

.disclosure__body {
  padding: 0 var(--space-5) var(--space-5);
}

/* ui.hash */
.hash {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--chalk);
  word-break: break-all;
}

/* ui.spinner: un círculo de tiza que gira. */
.spinner {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  border: 2px solid var(--chalk-box);
  border-top-color: var(--chalk-mark);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Portada (index): la mitad de cancha impresa en la pizarra, el título,
   la cuenta en tiza y las fichas. */
.hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-9);
  margin-bottom: var(--space-6);
}

/* Las líneas de la cancha, impresas: el área arriba (pegada al riel) y la
   mitad de cancha con el círculo central abajo. Decorativas. */
.pitch {
  position: absolute;
  inset: calc(-1 * var(--space-6)) 0 0;
  z-index: -1;
  pointer-events: none;
}

.pitch > span {
  position: absolute;
  display: block;
  border: 2px solid var(--line);
}

.pitch__box {
  top: 0;
  left: 50%;
  width: min(66%, 520px);
  height: clamp(110px, 18vw, 170px);
  border-top: 0 !important;
  transform: translateX(-50%);
}

.pitch__arc {
  top: calc(clamp(110px, 18vw, 170px) - 2px);
  left: 50%;
  width: clamp(120px, 20vw, 190px);
  height: clamp(44px, 7vw, 70px);
  border-top: 0 !important;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translateX(-50%);
}

.pitch__half {
  left: calc(-1 * var(--gutter));
  right: calc(-1 * var(--gutter));
  bottom: 0;
  height: 0;
  border-width: 2px 0 0 !important;
}

.pitch__circle {
  bottom: calc(-1 * clamp(80px, 13vw, 120px));
  left: 50%;
  width: clamp(160px, 26vw, 240px);
  height: clamp(160px, 26vw, 240px);
  border-radius: 50%;
  transform: translateX(-50%);
}

.pitch__spot {
  bottom: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 0 !important;
  border-radius: 50%;
  background: var(--line-strong);
  transform: translateX(-50%);
}

.hero__title {
  max-width: 19ch;
  font-size: clamp(2.45rem, 1.2rem + 5.4vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
}

/* Debajo del título: la prueba (la cuenta) a la izquierda; la acción, la
   racha y el borrador a la derecha. En el teléfono, todo en una columna. */
.hero__body {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .hero__body {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: var(--space-8);
    align-items: start;
  }

  /* "En la nuestra, no." no se corta: es una sola frase. */
  .hero__title em {
    white-space: nowrap;
  }
}

/* Después de la mitad de cancha impresa, la primera sección no repite línea. */
.hero + h2 {
  border-top: 0;
  padding-top: var(--space-4);
}

/* "En la nuestra, no.": subrayado a mano en tiza amarilla. */
.hero__title em {
  display: inline;
  font-style: normal;
  color: var(--chalk-strong);
  padding-bottom: 0.06em;
  background: url('subrayado.svg') left bottom / 100% 0.28em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero__lede {
  max-width: 54ch;
  margin-bottom: var(--space-6);
  color: var(--chalk-soft);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
}

/* La cuenta en tiza: palotes de aciertos y fallos, y lo que esperaba el modelo. */
.cuenta {
  margin: 0 0 var(--space-3);
}

.cuenta__title {
  margin-bottom: var(--space-3);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  color: var(--chalk);
}

.cuenta__rows {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.cuenta__row {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
}

.cuenta__row dt {
  font-family: var(--font-print);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chalk-strong);
}

.cuenta__row dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.cuenta__n {
  font-family: var(--font-print);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--chalk-strong);
  font-variant-numeric: tabular-nums;
}

.cuenta__note {
  max-width: 46ch;
  margin-bottom: var(--space-3);
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
  color: var(--chalk);
}

.cuenta__note mark {
  padding: 0.15em 0.45em;
  margin: 0 -0.2em;
  background: url('circulo.svg') center / 100% 100% no-repeat;
  color: var(--chalk-mark);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.cuenta__extra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0 0 var(--space-6);
  color: var(--chalk-soft);
  font-size: var(--text-sm);
}

.cuenta__extra strong {
  font-family: var(--font-print);
  font-size: 1.2rem;
  font-weight: 800;
}

.racha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-6);
}

.racha__label {
  margin: 0;
  font-size: 1.15rem;
  color: var(--chalk-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

.hero__actions .btn--telegram {
  font-size: 1.25rem;
  padding: 0.85rem 1.6rem;
}

/* El borrador que no borra (static/site.js): el último resultado, impreso,
   con una nota en tiza al lado. El borrador frota, la tiza se corre y deja
   su mancha, cae el polvo, la ficha se sacude sin despegarse y el
   pronóstico impreso queda. Sin JS, el botón no aparece y el texto lo
   explica. */
.borrador {
  position: relative;
  max-width: 44rem;
}

.borrador__record {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.borrador__nota {
  display: inline-block;
  font-size: 1.2rem;
  color: var(--chalk-mark);
  transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

/* Después de borrar: la tiza quedó corrida; el pronóstico impreso, intacto. */
.borrador.is-erased .borrador__nota {
  opacity: 0.18;
  filter: blur(2.5px);
  transform: translateX(6px) skewX(-6deg);
}

.borrador__partido {
  font-family: var(--font-print);
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--chalk-strong);
}

.borrador__seq {
  margin-left: auto;
  font-family: var(--font-print);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--chalk-soft);
  font-variant-numeric: tabular-nums;
}

/* La mancha que deja el borrador sobre la pizarra. */
.borrador__mancha {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 70% at 18% 50%, rgba(238, 243, 241, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 60% at 62% 46%, rgba(238, 243, 241, 0.07), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-out);
}

.borrador.is-erasing .borrador__mancha,
.borrador.is-erased .borrador__mancha {
  opacity: 1;
}

/* El polvo de tiza que cae mientras frota. */
.borrador__polvo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.borrador__polvo i {
  position: absolute;
  top: 58%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--chalk);
  opacity: 0;
}

.borrador__polvo i:nth-child(1) { left: 10%; --dx: 5px; }
.borrador__polvo i:nth-child(2) { left: 22%; --dx: -6px; width: 3px; height: 3px; }
.borrador__polvo i:nth-child(3) { left: 33%; --dx: 8px; }
.borrador__polvo i:nth-child(4) { left: 46%; --dx: -4px; width: 5px; height: 5px; }
.borrador__polvo i:nth-child(5) { left: 57%; --dx: 6px; width: 3px; height: 3px; }
.borrador__polvo i:nth-child(6) { left: 68%; --dx: -8px; }
.borrador__polvo i:nth-child(7) { left: 79%; --dx: 4px; width: 3px; height: 3px; }

/* El borrador: lomo azul con la franja de la marca y fieltro gris (SVG en
   index.html). Su recorrido lo da site.js en --recorrido (el ancho de la ficha). */
.borrador__goma {
  position: absolute;
  top: 50%;
  left: 0;
  width: 96px;
  height: 44px;
  margin-top: -22px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
  opacity: 0;
  pointer-events: none;
}

.borrador__msg {
  min-height: 1.6em;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--chalk-soft);
}

.borrador__msg strong {
  display: inline-block;
  margin-right: 0.3em;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--chalk-mark);
}

.borrador .btn {
  font-size: 1rem;
}

/* layout.aviso_gratis: una nota clavada con el imán celeste de Valor. */
.aviso-gratis {
  position: relative;
  max-width: 46rem;
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 2px dashed rgba(169, 212, 242, 0.6);
  border-radius: var(--radius-chalk);
}

.aviso-gratis::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 18px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--magnet-celeste);
  box-shadow: var(--magnet-shadow);
}

.aviso-gratis__title {
  margin: 0 0 var(--space-1);
  font-size: 1.5rem;
  color: var(--chalk-model);
}

.aviso-gratis__text {
  margin: 0;
  color: var(--chalk-soft);
}

/* layout.telegram_cta: lo que va al canal, encerrado en tiza. */
.cta {
  position: relative;
  margin: var(--space-8) 0 var(--space-6);
  padding: var(--space-7) var(--space-6);
  border: var(--chalk-stroke);
  border-radius: var(--radius-chalk);
  background: var(--dust);
}

.cta__title {
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  margin-bottom: var(--space-3);
}

.cta__text {
  max-width: 60ch;
  margin: 0 0 var(--space-5);
  color: var(--chalk-soft);
}

/* integrity.verify_panel: data-state = idle | loading | ok | error | unsupported */
.verify__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-weight: 600;
}

.verify__status p {
  margin: 0;
}

.verify__icon {
  display: inline-flex;
  justify-content: center;
  width: 1.25rem;
  flex-shrink: 0;
}

.verify[data-state="idle"] .verify__icon,
.verify[data-state="unsupported"] .verify__icon {
  display: none;
}

.verify__icon > * {
  display: none;
}

.verify[data-state="loading"] .verify__icon .spinner,
.verify[data-state="ok"] .verify__icon .verify__ok,
.verify[data-state="error"] .verify__icon .verify__bad {
  display: inline-flex;
}

.verify[data-state="ok"] .verify__status { color: var(--win); }
.verify[data-state="error"] .verify__status { color: var(--lose); }

.verify__progress {
  display: block;
  width: 100%;
  height: 8px;
  margin-bottom: var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(236, 233, 225, 0.12);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

.verify__progress::-webkit-progress-bar { background: rgba(236, 233, 225, 0.12); }
.verify__progress::-webkit-progress-value { background: var(--chalk); }
.verify__progress::-moz-progress-bar { background: var(--chalk); }

.verify .btn {
  margin-bottom: var(--space-4);
}

/* Catálogo de componentes (_catalogo.html, no se publica). */
.catalog-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-3);
}

.catalog-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--chalk-soft);
}

.catalog-swatch__chip {
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.catalog-bars {
  display: grid;
  gap: var(--space-3);
  max-width: 24rem;
  margin: var(--space-3) 0 var(--space-5);
}

.catalog-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-5);
}

/* ── 5. Utilidades ─────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--chalk-soft); }
.small { font-size: var(--text-sm); }
.num { font-variant-numeric: tabular-nums; }

.pos {
  color: var(--win);
}

.neg {
  color: var(--lose);
}

/* Calibración: qué tan lejos salió el acierto de lo que esperaba el modelo.
   No es bueno ni malo por color: lejos se subraya en tiza amarilla. */
.calib--far {
  color: var(--chalk-strong);
  text-decoration: underline wavy var(--chalk-mark) 1px;
  text-underline-offset: 0.25em;
}

.mt-2 { margin-top: var(--space-4); }

/* ── 6. Responsive ─────────────────────────────────────────────────────── */

/* Solo con puntero real: en pantallas táctiles el hover queda "pegado".
   Al pasar, el imán se despega un poco de la pizarra. */
@media (hover: hover) {
  .btn--telegram:hover {
    transform: translateY(-2px);
    box-shadow: var(--magnet-lift);
  }

  .btn--telegram:active {
    transform: translateY(0);
    box-shadow: var(--magnet-shadow);
  }
}

/* En pantalla ancha el riel queda fijo arriba. */
@media (min-width: 821px) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 820px) {
  :root {
    --gutter: var(--space-4);
  }

  body {
    font-size: 1rem;
  }

  .site-header {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  /* En el teléfono el riel es angosto: el escudo (que ya dice DataGoal) y
     el menú al lado, en dos renglones de tres en vez de esconderse. */
  .site-header__inner {
    justify-content: flex-start;
    gap: var(--space-3);
  }

  .brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0 var(--space-1);
  }

  /* La primera pantalla del teléfono: título, la cuenta y enseguida el
     botón al canal; la racha y el borrador, después. */
  .hero__main,
  .hero__side {
    display: contents;
  }

  .hero__lede { order: 1; }
  .cuenta { order: 2; }
  .hero__actions { order: 3; }
  .cuenta__extra { order: 4; margin-bottom: var(--space-5); }
  .racha { order: 5; }
  .borrador { order: 6; }

  .hero__lede {
    margin-bottom: var(--space-4);
    font-size: 1.02rem;
  }

  .cuenta {
    margin-bottom: var(--space-4);
  }

  .form-guide {
    gap: 0.35rem;
  }

  .form-guide .badge > .icon {
    width: 1.6rem;
    height: 1.6rem;
  }

  .site-nav a {
    padding: 0 0.55rem;
    min-height: 40px;
    font-size: 1rem;
  }

  .brand {
    min-height: 48px;
    font-size: 1.4rem;
  }

  .brand__escudo {
    width: 34px;
    height: 34px;
  }

  main {
    padding-top: var(--space-5);
  }

  .hero {
    padding-top: var(--space-4);
    padding-bottom: var(--space-8);
  }

  .hero__title {
    margin-bottom: var(--space-4);
  }

  .card,
  .cta {
    padding: var(--space-5);
  }

  .pick-card__header,
  .pick-card__body {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero__actions .btn {
    width: 100%;
  }

  .cta .btn {
    width: 100%;
  }

  .tray__props {
    width: 130px;
    height: 27px;
  }
}

/* ── 6b. Movimiento ───────────────────────────────────────────────────────
 * Un momento propio, el borrador que frota y no borra (site.js), y una
 * gramática chica alrededor, la de la pizarra: lo que se escribe se escribe
 * con tiza (los palotes, el subrayado del título, el círculo de lo
 * esperado, el "No se borra") y lo que se pega se pega con imán (las fichas
 * de la racha, el imán de cada tarjeta, el del menú). Cada cosa se mueve
 * una vez. Con "reducir movimiento" no se mueve nada. La aparición al hacer
 * scroll la arma static/site.js: marca los bloques con data-reveal y agrega
 * .motion a <html>. Sin JS no queda nada oculto. */

.motion [data-reveal]:not(.is-in) {
  opacity: 0;
}

.motion [data-reveal].is-in {
  animation: reveal var(--duration-reveal) var(--ease-out) var(--reveal-delay, 0ms) backwards;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(12px); }
}

/* Las barras de tiza se trazan después de que aparece su bloque. */
.motion [data-reveal]:not(.is-in) .bar__fill {
  transform: scaleX(0);
}

.motion .is-in .bar__fill {
  animation: grow-x 0.9s var(--ease-out) calc(var(--reveal-delay, 0ms) + 120ms) backwards;
}

@keyframes grow-x {
  from { transform: scaleX(0); }
}

/* Los imanes se pegan: bajan un poco, más grandes, y quedan apoyados. */
.motion .form-guide.is-in li {
  animation: pegar 0.45s var(--ease-out) backwards;
}

.motion .form-guide.is-in li:nth-child(2) { animation-delay: 60ms; }
.motion .form-guide.is-in li:nth-child(3) { animation-delay: 120ms; }
.motion .form-guide.is-in li:nth-child(4) { animation-delay: 180ms; }
.motion .form-guide.is-in li:nth-child(5) { animation-delay: 240ms; }
.motion .form-guide.is-in li:nth-child(6) { animation-delay: 300ms; }
.motion .form-guide.is-in li:nth-child(7) { animation-delay: 360ms; }
.motion .form-guide.is-in li:nth-child(8) { animation-delay: 420ms; }
.motion .form-guide.is-in li:nth-child(9) { animation-delay: 480ms; }
.motion .form-guide.is-in li:nth-child(10) { animation-delay: 540ms; }

.motion .pick-card.is-in::before,
.motion .aviso-gratis.is-in::before {
  animation: pegar 0.5s var(--ease-out) calc(var(--reveal-delay, 0ms) + 200ms) backwards;
}

@keyframes pegar {
  from { opacity: 0; transform: translateY(-10px) scale(1.18); }
}

/* El borrador frota: entra, va y viene tres veces sobre la ficha y se va. */
.borrador.is-erasing .borrador__goma {
  animation: frotar 1.6s var(--ease) forwards;
}

@keyframes frotar {
  0% { opacity: 0; transform: translate(-70px, -8px) rotate(-8deg); }
  10% { opacity: 1; transform: translate(0, 0) rotate(-3deg); }
  24% { transform: translate(calc(var(--recorrido, 300px) * 0.42), 2px) rotate(4deg); }
  38% { transform: translate(calc(var(--recorrido, 300px) * 0.12), -2px) rotate(-4deg); }
  52% { transform: translate(calc(var(--recorrido, 300px) * 0.62), 2px) rotate(3deg); }
  66% { transform: translate(calc(var(--recorrido, 300px) * 0.3), -1px) rotate(-3deg); }
  84% { opacity: 1; transform: translate(calc(var(--recorrido, 300px) * 0.85), 0) rotate(2deg); }
  100% { opacity: 0; transform: translate(calc(var(--recorrido, 300px) + 60px), -12px) rotate(9deg); }
}

/* La tiza se corre de a poco mientras pasa el borrador. */
.borrador.is-erasing .borrador__nota {
  animation: correrse 1.4s var(--ease) forwards;
}

@keyframes correrse {
  40% { opacity: 0.6; filter: blur(1px); transform: translateX(3px); }
  100% { opacity: 0.18; filter: blur(2.5px); transform: translateX(6px) skewX(-6deg); }
}

/* Cae el polvo, una vez por pasada. */
.borrador.is-erasing .borrador__polvo i {
  animation: polvo 0.9s ease-out forwards;
}

.borrador.is-erasing .borrador__polvo i:nth-child(2) { animation-delay: 0.25s; }
.borrador.is-erasing .borrador__polvo i:nth-child(3) { animation-delay: 0.45s; }
.borrador.is-erasing .borrador__polvo i:nth-child(4) { animation-delay: 0.6s; }
.borrador.is-erasing .borrador__polvo i:nth-child(5) { animation-delay: 0.8s; }
.borrador.is-erasing .borrador__polvo i:nth-child(6) { animation-delay: 0.95s; }
.borrador.is-erasing .borrador__polvo i:nth-child(7) { animation-delay: 1.15s; }

@keyframes polvo {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx, 6px), 28px); }
}

/* La ficha del resultado se sacude cuando la golpea el borrador, pero no se despega. */
.borrador.is-erasing .badge > .icon {
  animation: sacudir 0.42s ease-in-out 0.42s 2;
}

@keyframes sacudir {
  30% { transform: rotate(-12deg); }
  70% { transform: rotate(9deg); }
}

/* "No se borra." se escribe con tiza, de izquierda a derecha. */
.borrador.is-done .borrador__msg {
  animation: escribir 0.9s var(--ease-out) backwards;
}

@keyframes escribir {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Al cargar la portada, el DT escribe: los palotes, uno por grupo; el
     subrayado del título; y el círculo alrededor de lo que esperaba el modelo. */
  .hero .tally__group path {
    stroke-dasharray: 40;
    animation: trazo 0.5s var(--ease-out) backwards;
  }

  .hero .tally__group:nth-child(2) path { animation-delay: 0.12s; }
  .hero .tally__group:nth-child(3) path { animation-delay: 0.24s; }
  .hero .tally__group:nth-child(4) path { animation-delay: 0.36s; }
  .hero .tally__group:nth-child(n+5) path { animation-delay: 0.48s; }

  .hero__title em {
    animation: subrayar 0.9s var(--ease-out) 0.35s backwards;
  }

  .cuenta__note mark {
    background-position: left center;
    animation: marcar 0.8s var(--ease-out) 1.1s backwards;
  }

  /* El imán del menú se pega al cargar la página. */
  .site-nav a[aria-current="page"]::before {
    animation: pegar 0.4s var(--ease-out) 0.15s backwards;
  }

  /* Transición entre páginas (navegadores con View Transitions; el resto
     navega como siempre). */
  @view-transition {
    navigation: auto;
  }
}

@keyframes trazo {
  from { stroke-dashoffset: 40; }
}

@keyframes subrayar {
  from { background-size: 0% 0.28em; }
}

@keyframes marcar {
  from { background-size: 0% 100%; }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

/* En pantalla ancha el riel queda quieto entre páginas. */
@media (min-width: 821px) {
  .site-header { view-transition-name: site-header; }
}

/* ── 7. Accesibilidad ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn--telegram:hover {
    transform: none;
  }

  /* Sin giro, el spinner queda como un aro de tiza. */
  .spinner {
    animation: none !important;
    border-color: var(--chalk-mark);
    opacity: 0.7;
  }
}

/* Modo de alto contraste de Windows: sin texturas ni máscaras, cajas con borde. */
@media (forced-colors: active) {
  body::before,
  .pitch,
  .tray__props,
  .borrador__goma,
  .borrador__mancha,
  .borrador__polvo {
    display: none;
  }

  .chalk,
  .bar,
  .tally {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .badge > .icon,
  .list-tag__magnet,
  .btn,
  .card,
  .pick-card,
  .callout,
  .empty-state,
  .table-wrap,
  .disclosure {
    border: 1px solid CanvasText;
  }

  .site-nav a[aria-current] {
    text-decoration: underline;
  }
}

/* ── 8. Impresión ──────────────────────────────────────────────────────── */
@media print {
  :root {
    --chalk: #000;
    --chalk-strong: #000;
    --chalk-soft: #333;
    --chalk-faint: #555;
    --line: #bbb;
    --line-strong: #888;
    --chalk-box: #999;
    --dust: transparent;
    --dust-strong: transparent;
    --board: #fff;
  }

  body {
    background: #fff;
    color: #000;
  }

  body::before,
  .pitch,
  .tray,
  .site-header,
  .skip-link,
  .cta,
  .hero__actions,
  .borrador .btn,
  .btn {
    display: none !important;
  }

  .chalk,
  .bar,
  .tally {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .card,
  .pick-card,
  .table-wrap {
    break-inside: avoid;
  }

  .table-wrap {
    overflow: visible;
  }

  .motion [data-reveal],
  .bar__fill {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  a {
    color: #000;
  }
}