/* ==========================================================================
   tokens.css — la fuente de verdad de la identidad visual de byluisito.
   Colores, tipografías, escalas y movimiento. Cualquier página o app futura
   (portal, tienda, cursos) puede importar este archivo para verse igual.
   ========================================================================== */

:root {
  /* ---- Marca ---- */
  --verde: #2B7651;
  --verde-claro: #43A373;
  --verde-basico: #205C3E;
  --verde-proceso-1: #035131;
  --verde-proceso-2: #133826;
  --verde-proceso-3: #2E7048;
  --verde-proceso-4: #54916D;
  --morado: #7B35BD;
  --naranja-cupos: rgb(237, 150, 0);
  --rojo-cupos: rgb(237, 0, 0);

  /* ---- Neutros ---- */
  --gris-texto: #615F60;
  --gris-2: #656565;        /* antes #7F7F7F: oscurecido para cumplir contraste AA (aprobado en Fase 2) */
  --gris-3: #999999;
  --gris-4: #A6A6A6;
  --fondo: #E3E3E3;
  --negro: #000000;
  --negro-2: #0F0F0F;
  --negro-3: #1A1A1A;
  --blanco: #FFFFFF;

  /* ---- Transparencias ---- */
  --cinta: rgba(97, 95, 96, .25);
  --nav-fondo: rgba(0, 0, 0, .24);
  --sombra: rgba(0, 0, 0, .2);

  /* ---- Tipografías ---- */
  --font-sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;

  /* ---- Escala tipográfica fluida (móvil y tableta: 320 → 1199 px) ---- */
  --fs-hero: clamp(3.25rem, 1.93rem + 6.59vw, 6.875rem);
  --fs-hola: clamp(4rem, 2.9rem + 5.51vw, 7.03rem);
  --fs-casos: clamp(2.5rem, 1.4rem + 5.49vw, 5.52rem);
  --fs-sobre: clamp(3.5rem, 2.37rem + 5.66vw, 6.61rem);
  --fs-planes: clamp(4.5rem, 3.29rem + 6.02vw, 7.81rem);
  --fs-planes-sub: clamp(1.75rem, 1.25rem + 2.5vw, 3.125rem);
  --fs-cinta: clamp(6rem, 3.98rem + 10.11vw, 11.56rem);
  --fs-h2: clamp(2rem, 1.82rem + .91vw, 2.5rem);
  --fs-numero: clamp(3rem, 2.73rem + 1.36vw, 3.75rem);
  --fs-h3: clamp(1.625rem, 1.53rem + .45vw, 1.875rem);
  --fs-lead: clamp(1.25rem, 1.14rem + .57vw, 1.5625rem);
  --fs-faq: clamp(1.125rem, 1.08rem + .23vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sobre-p: 1rem;
  --fs-testimonio: 1rem;
  --fs-nav: .875rem;
  --fs-caption: .75rem;

  /* ---- Espaciado (escala 4/8) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter: clamp(1rem, 5vw, 3rem);
  --section-y: clamp(4rem, 2.55rem + 7.27vw, 7.5rem);
  --stack: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);

  /* ---- Contenedores ---- */
  --ancho-max: 1200px;
  --ancho-casos: 1216px;
  --ancho-lectura: 38rem;

  /* ---- Radios y sombras ---- */
  --r-tarjeta: 15px;
  --r-grande: 30px;
  --r-nav: 47px;
  --r-pastilla: 999px;
  --sombra-tarjeta: 0 0 20px rgba(0, 0, 0, .2);
  --sombra-nav: 0 0 25px rgba(0, 0, 0, .25);
  --sombra-chip: 12px 16px 16px rgba(0, 0, 0, .1);
  --sombra-boton: 0.57px 0.57px 1.76px -0.42px rgba(0, 0, 0, .18), 1.57px 1.57px 4.87px -.83px rgba(0, 0, 0, .17), 3.62px 3.62px 11.25px -1.25px rgba(0, 0, 0, .16), 10px 10px 31px -1.67px rgba(0, 0, 0, .1);

  /* ---- Táctil ---- */
  --tap: 44px;
  --tap-comodo: 48px;

  /* ---- Capas ---- */
  --z-rastro: 10;
  --z-nav: 900;
  --z-hoja: 950;
  --z-cursor: 1000;

  /* ---- Movimiento (los resortes viven en js/spring.js) ---- */
  --ease-relevo: cubic-bezier(1, 0, .56, 1);
  --ease-nav: cubic-bezier(.44, 0, .56, 1);

  /* ---- Unidad de escritorio: 1px a ≥1440, proporcional entre 1200 y 1439 ---- */
  --u: 1px;
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  :root { --u: calc(var(--vw, 100vw) / 1440); }
}