/* MANO A MÁQUINA — brand tokens v3 (piel v4, destilada de mockups/v4).
   THE single source of branding. Change the whole brand here: palette, type,
   scale, spacing, faction/hold colors, cartel colors, shadows, hairlines.
   base.css, util.css and every generated page only reference var(--...).
   No hex, no rgba(), no font-family may live outside this file.

   Fuentes self-hosted (woff2 latinos copiados de mockups/v4/assets):
     anton-latin · archivo-latin (var 100-900) · inter-latin (var 100-900)
     · jbmono-latin (var 400-800). Bungee se omite: residual (declarada en el
     mockup pero sin un solo uso en el body). Sin Google Fonts en producción. */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/anton-latin.woff2") format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/archivo-latin.woff2") format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin.woff2") format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/jbmono-latin.woff2") format('woff2')}

:root{
  /* ---- superficie ---- */
  --fondo:#efe9dc;        /* fondo de página (el mockup lo usa, no #faf6ee) */
  --papel:#faf6ee;        /* superficie "papel": columna, tarjetas, tooltip */
  --tinta:#1a140d;        /* tinta principal */
  --crema:#f6ecd8;        /* texto claro sobre bloques de color */
  --sombra:#8a8377;       /* gris neutro: discos listón, barra efectivo, secundario */

  /* ---- acentos ---- */
  --rojo:#c2321c;         /* negativo + descenso + marca + botón primario + estrella */
  --rojo-vivo:#ff2015;    /* estrellas ★ y numeración 01-04 del arranque */
  --azul:#2f62c9;         /* La Razón · identidad DeepSeek */
  --azul-vivo:#0047ff;    /* fondo full-bleed de LA QUINIELA */
  --verde:#1f7a45;        /* positivo (retornos y resultados "+") */
  --verde-claro:#2e9e5b;  /* acento verde: MiniMax, rombo, barra de factura */
  --amarillo:#ffe01b;     /* acento ritual: subrayado cita, cartel DeepSeek */
  --naranja:#f0952b;      /* La Regla / hover de enlace */

  /* ---- hairlines (tinta translúcida, sin bandas) ---- */
  --hair:rgba(26,20,13,.12);        /* rejilla */
  --linea-suave:rgba(26,20,13,.22);
  --linea-media:rgba(26,20,13,.3);
  --linea-punteada:rgba(26,20,13,.4);
  --linea-fuerte:rgba(26,20,13,.5);
  --hair-blanco:rgba(246,236,216,.3);   /* hair claro sobre color (crema) */
  --hair-blanco-35:rgba(246,236,216,.35);  /* separador de stats del cartel móvil */
  --hair-blanco-40:rgba(246,236,216,.4);   /* pie de la quiniela móvil */
  --hair-blanco-suave:rgba(246,236,216,.5);
  --hover-azul:rgba(47,98,201,.07);     /* hover de tarjeta de crónica */

  /* ---- tipografías (una fuente por oficio) ---- */
  --font-display:'Anton',sans-serif;            /* SOLO carteles + wordmark + cifras grandes */
  --font-heading:'Archivo',sans-serif;          /* titulares de sección */
  --font-body:'Inter',sans-serif;               /* prosa */
  --font-data:'JetBrains Mono',monospace;       /* cifras, tickers, microcopy */

  /* ---- escala tipográfica (medida) ---- */
  --fs-8:8px; --fs-9:9px;
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-19:19px;
  --fs-20:20px;
  --fs-21:21px; --fs-22:22px; --fs-24:24px; --fs-26:26px; --fs-28:28px;
  --fs-30:30px; --fs-32:32px; --fs-34:34px; --fs-38:38px; --fs-42:42px;
  --fs-44:44px; --fs-58:58px; --fs-62:62px; --fs-64:64px; --fs-66:66px;
  --fs-70:70px; --fs-76:76px; --fs-92:92px; --fs-104:104px; --fs-124:124px; --fs-158:158px;

  /* ---- espaciado ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-11:44px; --sp-12:48px; --sp-16:64px;

  /* ---- bordes / radios / sombras ---- */
  /* Escala engordada 29-ago (decisión de Marina, sección a sección y luego
     global): los grosores del mockup se quedaban finos en pantalla real.
     El NOMBRE del token conserva su rol (b-1 hilo suave, b-2 filete estándar,
     b-3 filete fuerte, b-4 máximo), no su px original. */
  --b-1:2px; --b-2:3px; --b-3:3px; --b-4:4px;
  --r-pill:999px;         /* único radio: discos redondos */
  --shadow-hard:6px 6px 0 rgba(26,20,13,.18);      /* hover de cartel */
  --shadow-wordmark:7px 7px 0 #faf6ee;             /* wordmark día 0 */

  /* ---- máscaras (filtro editorial + sombra dura por tamaño) ---- */
  --mask-grade:contrast(1.28) saturate(1.08);      /* poster, quiniela, filas */
  --mask-hero:contrast(1.3) saturate(1.1);         /* hero (arranque) */
  --ds-hero:6px 6px 0 rgba(26,20,13,.3);           /* máscaras del hero */
  --ds-lg:4px 4px 0 rgba(26,20,13,.3);             /* quiniela / identidad */
  --ds-md:3px 3px 0 rgba(26,20,13,.28);            /* cartel */
  --ds-sm:2px 2px 0 rgba(26,20,13,.24);            /* filas, chart, hover */

  /* ---- layout ---- */
  --maxw:1320px;          /* (referencia del artboard; el contenido ocupa el ancho) */
  --pad-seccion:clamp(20px,4vw,44px);     /* padding horizontal de secciones */

  /* ---- colores por luchador (identidad + línea de gráfico) ---- */
  --c-deepseek:#2f62c9;
  --c-claude:#2aa5cf;
  --c-minimax:#2e9e5b;
  --c-kimi:#7a3fb5;
  --c-baseline:#8a8377;
  --c-baseline-linea:#c3bdb1;   /* línea del chart principal de Baseline (más clara) */
  --c-solo-dip:#4a6a72;
  --c-tighten:#c65f16;          /* recortado (transición) */
  --c-solo-momo:#f2c231;        /* recortado (transición) */

  /* ---- colores por listón (los 4 usan el gris del disco) ---- */
  --c-hold-btc:#8a8377;
  --c-hold-eth:#8a8377;
  --c-hold-sp500:#8a8377;
  --c-hold-ndx:#8a8377;

  /* ---- cartel v4 por luchador (fondo plano saturado + eco geométrico) ----
     forma propia por slug: rayo azul/amarillo · estrella cian/rojo ·
     rombo verde/magenta · cruz gris/naranja · luna violeta/lima ·
     flecha pizarra/turquesa. */
  --cartel-deepseek:#ffe01b;  --cartel-eco-deepseek:#9dbef0;
  --cartel-claude:#ff5a3c;    --cartel-eco-claude:#a6dcee;
  --hero-fondo:#ff3a16;       /* fondo del hero en directo: el naranja del cartel
                                 un paso más profundo (entre --cartel-claude y
                                 --rojo-vivo) para que el cartel de Claude no se
                                 funda con el fondo sin necesitar recuadro (29-ago) */
  --cartel-minimax:#ff2e93;   --cartel-eco-minimax:#96d4b0;
  --cartel-kimi:#c9f24a;      --cartel-eco-kimi:#c2a0e4;
  --cartel-baseline:#ff8a1e;  --cartel-eco-baseline:#c3bdb1;
  --cartel-solo-dip:#00c2c7;  --cartel-eco-solo-dip:#9dbcc1;
  /* recortados (transición): fondo plano, sin forma */
  --cartel-tighten:var(--naranja);   --cartel-eco-tighten:var(--papel);
  --cartel-solo-momo:var(--amarillo);--cartel-eco-solo-momo:var(--papel);
}