/* ─────────────────────────────────────────────────────────────
   MASTER GROOVERS — DESIGN TOKENS
   Única fuente de verdad para color, tipografía, ritmo y motion.
   Ningún otro archivo debe declarar un hex, un px de espaciado
   ni una duración a mano.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   RESERVA CON MÉTRICAS DE POPPINS

   Poppins es geométrica y ancha: el mismo texto mide un 17% más que
   en la sans del sistema (medido: "Estudio de música electrónica en"
   son 1069px en Poppins y 907px en -apple-system, a 64px).

   Mientras Poppins se descarga, el navegador compone con la fuente
   del sistema. Con esa diferencia de ancho, un titular que en Poppins
   ocupa dos líneas se reparte en cuatro con la reserva — y cuando la
   fuente llega, el texto se recoloca a la vista del visitante.

   Esta @font-face no descarga nada: toma la fuente local del sistema
   y le aplica size-adjust para igualar el ancho de Poppins, de modo
   que el número de líneas ya es el correcto en el primer fotograma.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Poppins Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Segoe UI'), local('Roboto');
  size-adjust: 117%;
  ascent-override: 88%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* ── Superficies ──
     Negro con una pizca de violeta: sobre un #000 puro el fucsia
     vibra y cansa la vista. */
  --negro:      #08070A;
  --negro-2:    #121016;
  --negro-3:    #1B1720;
  --negro-glass: rgba(18, 16, 22, 0.72);

  /* Nombre semántico del fondo de tarjeta. Los componentes piden
     «superficie» y no «negro-2» para que cambiar el tono de las tarjetas
     no obligue a tocar catorce reglas. */
  --superficie: var(--negro-2);

  /* ── Marca ──
     Contraste verificado sobre --negro:
       fucsia   8.0:1  ✓ AA en texto normal
       hueso   17.5:1  ✓ AAA
       hueso-dim 6.7:1 ✓ AA */
  --fucsia:     #e879f9;
  --fucsia-br:  #f0abfc;
  --fucsia-dk:  #d946ef;
  --fucsia-dim: #4A1D52;
  --fucsia-glow: rgba(232, 121, 249, 0.35);

  /* ── Texto ── */
  --hueso:      #F4F0F5;
  --hueso-dim:  #9C93A3;
  --hueso-mute: rgba(244, 240, 245, 0.55);

  /* ── Líneas ── */
  --linea:      rgba(244, 240, 245, 0.08);
  --linea-vis:  rgba(244, 240, 245, 0.16);

  /* ── Semántico ── */
  --whatsapp:   #25D366;
  --exito:      #4ade80;
  --info:       #60a5fa;

  /* ── Color por nivel del curso ──
     Los tres niveles llevan color propio para distinguirse de un
     vistazo. Importa sobre todo en móvil: ahí van uno debajo de otro,
     nunca se ven dos a la vez, y sin color las tres tarjetas parecen la
     misma repetida. Son tonos propios y no --exito/--info: aquellos
     significan «correcto» y «aviso», y reutilizarlos aquí ataría el
     aspecto de un nivel a un cambio en la paleta de estados. */
  --nivel-1:    #e879f9;
  --nivel-2:    #4ade80;
  --nivel-3:    #60a5fa;

  /* ── Tipografía fluida ──
     clamp() en lugar de media queries: escala continua, sin saltos. */
  --font-sans: 'Poppins', 'Poppins Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:    0.68rem;
  --text-sm:    0.78rem;
  --text-base:  clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --text-lg:    clamp(1rem, 0.95rem + 0.28vw, 1.15rem);
  --text-xl:    clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --text-h3:    clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --text-h2:    clamp(1.75rem, 1.3rem + 2.2vw, 3rem);
  --text-hero:  clamp(2.2rem, 1.2rem + 4.6vw, 4.5rem);

  --lh-tight:   1.1;
  --lh-snug:    1.35;
  --lh-normal:  1.65;
  --lh-loose:   1.8;

  --track-wide: 0.2em;

  /* ── Ritmo ──
     Espaciado no uniforme a propósito: las secciones respiran
     mucho más que los componentes. */
  --space-2xs:  0.35rem;
  --space-xs:   0.6rem;
  --space-sm:   1rem;
  --space-md:   1.6rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6.4rem;
  --space-section: clamp(3.5rem, 2.5rem + 4.5vw, 7rem);
  --space-gutter:  clamp(1.2rem, 0.8rem + 1.6vw, 2.5rem);

  --max-w:      1240px;
  --max-w-prose: 68ch;

  /* ── Formas ── */
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-sm:   8px;

  /* ── Motion ── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── Elevación ── */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px var(--fucsia-glow);

  /* ── Capas ── */
  --z-nav:    300;
  --z-float:  400;
  --z-mobile-cta: 350;
}