/* tokens.css — única fuente de valores del sistema visual.
   ► Ningún color, radio, fuente ni espaciado literal debe existir fuera de este archivo.
   Para recolorear o reescalar el sitio entero, solo se toca aquí. */

:root{
  /* ---------- color ---------- */
  --black:#0d0e0c;
  --black-90:rgba(13,14,12,.9);
  --panel:#15180f;
  --panel-2:#1d2216;
  --panel-3:#28301d;
  --black-pure:#000;             /* hover de .btn-dark */
  --white:#f4f6f1;
  --white-pure:#fff;             /* hover de .btn-light */
  --off-white:rgba(244,246,241,.88);
  --muted:#9ba097;
  --muted-2:#767b71;
  /* Verde de marca actual: #6da928 (antes lima #9fff45). */
  --green:#6da928;
  --green-bright:#7fc231;        /* hover de botones primarios */
  --green-dark:#4f7d1d;
  --green-deep:#2f4c12;
  --green-glow:rgba(109,169,40,.35);
  /* Naranjo secundario: el de los balones medicinales de la sala. Solo para
     acentos chicos (etiquetas, marcas), nunca para superficies grandes. */
  --orange:#e8752c;
  --orange-dark:#b9551a;
  --on-orange:#1a0d05;
  --line-orange:rgba(232,117,44,.45);
  --on-green:#0d1206;            /* texto sobre fondo lima */
  --ink-panel:#2a2e27;           /* .lead sobre panel claro */
  --ink-panel-muted:#4c5147;     /* .small sobre panel claro */
  --danger:#ff7a6b;              /* estados de error del formulario */
  --line:rgba(244,246,241,.14);
  --line-green:rgba(109,169,40,.4);
  --line-dark:rgba(13,14,12,.14);
  --field-bg:rgba(244,246,241,.04);
  --btn-ghost-bg:rgba(244,246,241,.03);
  --danger-bg:rgba(255,122,107,.1);
  --danger-line:rgba(255,122,107,.35);
  --ok-bg:rgba(109,169,40,.14);
  --shadow-float:0 12px 32px rgba(0,0,0,.5);

  /* ---------- superficies compuestas ---------- */
  --surface-card:linear-gradient(180deg,rgba(244,246,241,.045),rgba(244,246,241,.012));
  --surface-card-hover:linear-gradient(180deg,rgba(109,169,40,.08),rgba(244,246,241,.012));
  --surface-panel:linear-gradient(160deg,var(--panel-2),var(--panel));
  --surface-featured:linear-gradient(180deg,rgba(109,169,40,.1),rgba(244,246,241,.01));
  --surface-slide:linear-gradient(160deg,rgba(244,246,241,.05),rgba(244,246,241,.01));
  --surface-plan:linear-gradient(180deg,rgba(244,246,241,.045),rgba(244,246,241,.01));
  --surface-coach:linear-gradient(180deg,rgba(244,246,241,.04),transparent);
  --surface-alt:linear-gradient(120deg,rgba(244,246,241,.035),transparent);
  --surface-cta:
    radial-gradient(120% 140% at 50% 0%,rgba(109,169,40,.14) 0%,rgba(109,169,40,0) 55%),
    linear-gradient(180deg,var(--panel-3),var(--panel));
  /* Velo del hero: más oscuro en la franja del texto y un velo parejo en el
     resto, para que el titular blanco contraste con la fachada (2026-09-06). */
  --scrim-hero:
    linear-gradient(180deg,rgba(13,14,12,.72) 0%,rgba(13,14,12,.42) 22%,rgba(13,14,12,.5) 40%,rgba(13,14,12,.88) 78%,rgba(13,14,12,.96) 100%);
  --scrim-cta:linear-gradient(180deg,rgba(13,14,12,.6),rgba(13,14,12,.78));
  --shadow-text:0 1px 2px rgba(13,14,12,.9),0 0 14px rgba(13,14,12,.8);
  --scrim-caption:linear-gradient(180deg,rgba(13,14,12,0),rgba(13,14,12,.85));
  /* Desgaste del titular del hero: máscara de ruido que abre poros chicos en
     la tinta. Es una imagen SVG en línea, sin archivo aparte. */
  --grunge:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -7 6.1'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");

  /* ---------- tipografía ---------- */
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  /* Titulares grandes: condensada y pesada, como las piezas de Instagram del
     gimnasio (2026-09-06). Un solo peso. */
  --display-heavy:"Anton","Arial Narrow",Impact,sans-serif;
  --sans:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"Azeret Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wdth-wide:118;
  --wdth-narrow:112;
  --wdth-condensed:78;          /* botones y cinta: Archivo apretada */

  /* ---------- escala tipográfica ---------- */
  /* Jerarquía más marcada (2026-09-04): el peso lo llevan los titulares y el
     texto, no los componentes. */
  /* Con la condensada caben cuerpos más grandes (2026-09-06). */
  --fs-h1:clamp(3.2rem,8.5vw,6.6rem);
  --fs-h2:clamp(2.7rem,6.2vw,4.8rem);
  --fs-h3:clamp(1.6rem,3vw,2.4rem);
  --fs-h4:clamp(1.3rem,2.2vw,1.7rem);
  --fs-h5:1.1rem;
  /* Escala subida un ~8 % (2026-09-04): los textos de apoyo se leían chicos. */
  --fs-lead:clamp(1.1rem,1.6vw,1.35rem);
  --fs-body:1rem;
  --fs-small:.95rem;
  --fs-tiny:.74rem;
  --fs-micro:.66rem;            /* etiquetas dentro de barras */
  --fs-nano:.6rem;              /* precio por sesión bajo cada cifra */
  --fs-label:.78rem;
  --fs-eyebrow:.74rem;
  --fs-btn:.8rem;

  /* ---------- radios ----------
     Deliberadamente chicos. El gimnasio es un lugar tosco, de fierro y
     madera; las esquinas casi rectas y los botones compactos lo dicen antes
     que cualquier texto. Nada es una píldora. */
  --r-sm:3px;
  --r:8px;
  --r-lg:12px;
  --r-btn:2px;

  /* ---------- espaciado y ritmo ---------- */
  --gutter:clamp(1rem,3vw,2rem);
  --section-y:clamp(4rem,9vw,7.5rem);
  --section-y-tight:clamp(3rem,6vw,5rem);
  --grid-gap:clamp(1rem,2vw,1.5rem);
  --pad-card:clamp(1.5rem,2.4vw,2rem);
  --pad-panel:clamp(1.75rem,4vw,3.5rem);
  --pad-panel-dark:clamp(1.75rem,3.5vw,3rem);
  --pad-plan:clamp(1.6rem,2.6vw,2.4rem);
  --pad-slide:clamp(1.75rem,3vw,2.75rem);
  --pad-coach:clamp(1.35rem,2.4vw,2rem);
  --pad-cta:clamp(2.5rem,6vw,5rem) clamp(1.5rem,4vw,3rem);
  --pad-btn:.62rem 1rem;
  --nav-h:4.75rem;
  --ticker-dur:60s;
  --float-offset:clamp(1rem,3vw,2rem);

  /* ---------- movimiento ---------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.28s;
  --t-mid:.35s;
  --t-slow:.5s;

  /* ---------- layout ---------- */
  --max-width:1320px;

  /* ---------- capas ---------- */
  --z-float:60;
  --z-menu:70;
  --z-nav:80;
  --z-skip:100;
}