/* ==========================================================================
   AREA UNITED · Tokens de diseño
   Único sitio donde se definen colores, tipografías, espaciados y tiempos.
   ========================================================================== */

:root {
  /* --- Color (apartado 11.1) --- */
  --yellow: #FFCB00;
  --yellow-dark: #B38F00;   /* solo para la sombra dura del botón primario */

  /* Grano: opacidad del ruido en la cortina de entrada y en el hero */
  --grain-loader: 0.14;
  --grain-hero: 0.04;
  --black: #0A0A0A;
  --black-pure: #000000;
  --surface-1: #141414;
  --surface-2: #202020;
  --gray-text: #A5A5A5;
  --gray-text-light: #595959;
  --gray-line-light: #DFDFDF;
  --off-white: #F5F5F3;
  --white: #FFFFFF;
  --error: #E63B3B;

  /* Colores por disciplina: solo puntos de 8 px, nunca rellenos */
  --dot-wod: #FFCB00;
  --dot-endurance: #0099B3;
  --dot-hyrox: #3A6BD6;
  --dot-openbox: #ABE000;
  --dot-megawod: #FFFFFF;
  --dot-spicy: #FF5E6C;
  --dot-booty: #BF6FBF;
  --dot-mobility: #FF6A1A;
  --dot-halterofilia: #8A5A2B;
  --dot-running: #5FA32A;
  --dot-strongman: #A5A5A5;

  /* --- Tipografía (apartado 11.2) ---
     Knockout no trae «í», «€», «–» ni «—»: la @font-face limita su unicode-range
     y esos glifos caen a Barlow Condensed 600 (segunda de la pila). */
  --font-display: "Knockout", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  /* Knockout Bold (ancha/extendida): solo H1 del hero y contador de la entrada.
     Le faltan «→» y «·»: caen a la condensada / Barlow por el font-stack. */
  --font-display-wide: "Knockout Bold", "Knockout", "Barlow Condensed", Impact, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --lh-display: 0.88;
  --ls-display: -0.005em;
  --ls-button: 0.04em;
  --ls-label: 0.08em;

  /* Escala de titulares (mobile-first, clamp hasta escritorio) */
  /* H1 en Knockout Bold: «ENTRENA FUERTE.» mide 12,5 em, por eso el tope es 70 px
     (8 de 12 columnas a 1440) y 36 px en móvil, donde cada línea puede partirse en dos */
  --fs-h1: clamp(36px, 4.6vw, 70px);
  --fs-h2: clamp(44px, 7.2vw, 104px);
  --fs-row: clamp(40px, 5vw, 72px);
  --fs-stat: clamp(52px, 6.5vw, 88px);
  --fs-nav-mobile: clamp(44px, 11vw, 64px);
  --fs-label: 14px;
  --fs-body: 16px;
  --fs-body-lg: 17px;

  /* --- Retícula (apartado 11.5) --- */
  --container: 1280px;
  --gutter: 16px;
  --section-y: 64px;
  --header-h: 64px;

  /* --- Formas --- */
  --radius-card: 4px;
  --radius-pill: 999px;
  --line: 1px solid var(--surface-2);

  /* --- Botones --- */
  --btn-h: 48px;
  --btn-px: 24px;
  --btn-shadow: 4px;

  /* --- Movimiento (apartado 6) --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* expo out: sale rápido, frena suave */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-hard: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 500ms;
  --focus-ring: 0 0 0 2px var(--black), 0 0 0 4px var(--yellow);
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-y: 96px;
    --header-h: 72px;
    --btn-h: 52px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 48px;
    --section-y: 120px;
    --header-h: 80px;
  }
}