/* ============================================================
   Marca v2 "Tiza y hierro" — tokens (2026-09-30)
   Dos materiales del gimnasio dan los dos temas: TIZA/PAPEL (claro, por defecto)
   y CAUCHO del piso (oscuro). HIERRO = texto. NARANJA = único acento = "la
   empuñadura": lo que se toca (botón, enlace, mango de la mancuerna 3D, detalle
   de cada icono). El semáforo de membresía es CONTRATO (design-system/tokens.css).
   Tema: html[data-theme="light|dark"] (clave localStorage 'arcg-theme', como hoy)
   y prefers-color-scheme si no hay atributo.
   ============================================================ */
/* Las fuentes (Archivo + Chivo Mono) se cargan desde el <head> de cada página con <link>
   (preconnect + preload), NO con @import: un @import dentro de la hoja solo se descubre
   cuando esta hoja ya llegó, y encadena ~1 s más en móvil (medido en el rediseño anterior).
   URL: https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..800&family=Chivo+Mono:wght@400..600&display=swap */

/* Fallback con métricas ajustadas a Archivo (wdth 100 / 400): mientras llega la fuente web el
   texto se pinta con Arial a un tamaño que ocupa casi el mismo ancho, así el párrafo envuelve
   igual y no hay salto (CLS) al cambiar de fuente. Valores medidos con Playwright (Chromium 1243)
   sobre el lead de mitic.html (17 px, 1 línea): Arial ocupa el 102,1 % del ancho de Archivo →
   size-adjust 98 % deja el fallback en el 100,0 % (medido: 1150,8 px Archivo / 1150,4 px fallback). */
@font-face{font-family:'Archivo fallback';src:local('Arial'),local('Helvetica');size-adjust:98%;ascent-override:92%;descent-override:22%;line-gap-override:0%}

:root{
  color-scheme:light;
  /* ── Naranja de marca ── */
  --marca:#EA580C;         /* display grande, chips, acentos NO textuales, 3D */
  --marca-fuerte:#C2410C;  /* botón primario (5,2:1 con blanco) y naranja COMO TEXTO en claro (5,7:1 sobre tiza) */
  --marca-hover:#9A3412;
  --marca-claro:#FB923C;   /* naranja como texto en oscuro (8,4:1 sobre caucho) */
  --marca-txt:var(--marca-fuerte);
  --marca-suave:rgba(234,88,12,.10);
  --marca-borde:rgba(234,88,12,.35);

  /* ── Materiales ── */
  --fondo:#F3F0EA;          /* tiza */
  --superficie:#FBFAF7;     /* papel */
  --superficie-2:#ECE8E0;   /* papel usado (hover, chips) */
  --superficie-inv:#1A1816; /* isla oscura dentro del claro (tarjeta "hierro") */
  --tinta:#1A1816;          /* hierro */
  --tinta-2:rgba(26,24,22,.72);
  --tinta-3:rgba(26,24,22,0.62);  /* AA 4,6:1 sobre tiza (al 52 % daba 3,5) */
  --tinta-inv:#F2EFE9;
  --borde:rgba(26,24,22,.10);
  --borde-fuerte:rgba(26,24,22,.20);
  --foco:rgba(234,88,12,.55);

  /* ── Semáforo (contrato: no cambia por tema; texto sí) ── */
  --al-dia:#22C55E;--por-vencer:#D97706;--vencido:#EF4444;
  --al-dia-txt:#166534;  /* AA sobre el chip verde (con #15803D daba 4,4) */--por-vencer-txt:#92400E;--vencido-txt:#B91C1C;
  --chip-al-dia:rgba(34,197,94,.12);--chip-por-vencer:rgba(217,119,6,.12);--chip-vencido:rgba(239,68,68,.12);

  /* ── Sombras en capas (no glow) ── */
  --sombra-1:0 1px 2px rgba(26,24,22,.06),0 2px 6px rgba(26,24,22,.05);
  --sombra-2:0 2px 4px rgba(26,24,22,.05),0 14px 36px -10px rgba(26,24,22,.20);
  --sombra-3:0 4px 8px rgba(26,24,22,.06),0 30px 70px -20px rgba(26,24,22,.30);
  --sombra-btn:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(26,24,22,.18),0 6px 16px -6px rgba(194,65,12,.45);

  /* ── Tipografía: Archivo (variable, eje de ancho) + Chivo Mono (Omnibus-Type, Buenos Aires) ── */
  --f-sans:'Archivo','Archivo fallback',Arial,Helvetica,sans-serif;
  --f-mono:'Chivo Mono','Courier New',monospace;
  --w-display:112;   /* ancho del eje wdth para titulares (deportivo sin condensar) */
  --w-h2:110;--w-h3:105;--w-text:100;
  /* escala fluida */
  --t-display:clamp(42px,3.1vw + 26px,78px);
  --t-h2:clamp(30px,1.7vw + 20px,48px);
  --t-h3:clamp(19px,.5vw + 16px,22px);
  --t-lead:clamp(17px,.4vw + 15px,19px);
  --t-body:16px;--t-small:14px;--t-meta:13px;
  --lh-tight:1.0;--lh-head:1.08;--lh-body:1.6;

  /* ── Radios (paridad con la app: tarjeta 14, botón 10, chip 999) ── */
  --r-btn:10px;--r-card:14px;--r-lg:22px;--r-chip:999px;--r-input:10px;

  /* ── Espacio (4/8) ── */
  --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-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
  --wrap:1200px;--gutter:clamp(16px,4vw,48px);

  /* ── Movimiento ── */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --d-1:120ms;--d-2:220ms;--d-3:420ms;--d-4:700ms;

  /* ── Iconos (iconos/iconos.css) ── */
  --ic-acc:var(--marca);
}

/* ── Oscuro: caucho ── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --marca-txt:var(--marca-claro);
    --fondo:#0F0E0D;--superficie:#1B1917;--superficie-2:#242120;--superficie-inv:#F2EFE9;
    --tinta:#F2EFE9;--tinta-2:rgba(242,239,233,.72);--tinta-3:rgba(242,239,233,.52);--tinta-inv:#1A1816;
    --borde:rgba(255,255,255,.10);--borde-fuerte:rgba(255,255,255,.20);
    --al-dia-txt:#4ADE80;--por-vencer-txt:#FBBF24;--vencido-txt:#F87171;
    --chip-al-dia:rgba(34,197,94,.16);--chip-por-vencer:rgba(217,119,6,.16);--chip-vencido:rgba(239,68,68,.16);
    --sombra-1:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
    --sombra-2:0 0 0 1px rgba(255,255,255,.04),0 14px 36px -10px rgba(0,0,0,.7);
    --sombra-3:0 0 0 1px rgba(255,255,255,.05),0 30px 70px -20px rgba(0,0,0,.8);
    --sombra-btn:0 1px 0 rgba(255,255,255,.12) inset,0 1px 2px rgba(0,0,0,.5),0 6px 16px -6px rgba(0,0,0,.6);
    --ic-acc:var(--marca-claro);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --marca-txt:var(--marca-claro);
  --fondo:#0F0E0D;--superficie:#1B1917;--superficie-2:#242120;--superficie-inv:#F2EFE9;
  --tinta:#F2EFE9;--tinta-2:rgba(242,239,233,.72);--tinta-3:rgba(242,239,233,.52);--tinta-inv:#1A1816;
  --borde:rgba(255,255,255,.10);--borde-fuerte:rgba(255,255,255,.20);
  --al-dia-txt:#4ADE80;--por-vencer-txt:#FBBF24;--vencido-txt:#F87171;
  --chip-al-dia:rgba(34,197,94,.16);--chip-por-vencer:rgba(217,119,6,.16);--chip-vencido:rgba(239,68,68,.16);
  --sombra-1:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3);
  --sombra-2:0 0 0 1px rgba(255,255,255,.04),0 14px 36px -10px rgba(0,0,0,.7);
  --sombra-3:0 0 0 1px rgba(255,255,255,.05),0 30px 70px -20px rgba(0,0,0,.8);
  --sombra-btn:0 1px 0 rgba(255,255,255,.12) inset,0 1px 2px rgba(0,0,0,.5),0 6px 16px -6px rgba(0,0,0,.6);
  --ic-acc:var(--marca-claro);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);font-size:var(--t-body);line-height:var(--lh-body);color:var(--tinta);background:var(--fondo);
  font-variation-settings:'wdth' var(--w-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;text-wrap:balance;color:var(--tinta)}
h1{font-size:var(--t-display);line-height:var(--lh-tight);font-variation-settings:'wdth' var(--w-display);letter-spacing:-.025em}
h2{font-size:var(--t-h2);line-height:var(--lh-head);font-variation-settings:'wdth' var(--w-h2)}
h3{font-size:var(--t-h3);line-height:1.25;font-weight:700;font-variation-settings:'wdth' var(--w-h3);letter-spacing:-.01em}
p{text-wrap:pretty}
.lead{font-size:var(--t-lead);color:var(--tinta-2);line-height:1.55;max-width:56ch}
.small{font-size:var(--t-small)}.meta{font-size:var(--t-meta);color:var(--tinta-3)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:500}
.marca{color:var(--marca-txt)}
a{color:inherit}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px;border-radius:6px}
::selection{background:var(--marca);color:#fff}
/* Variante "tipo Arial" por si el dueño insiste: solo cambia el eje de ancho y el peso */
html[data-tipo="sobrio"]{--w-display:100;--w-h2:100;--w-h3:100}
html[data-tipo="sobrio"] h1,html[data-tipo="sobrio"] h2{font-weight:700;letter-spacing:-.02em}