/* ==========================================================================
   tokens.css — única fuente de verdad de colores, tipografía y medidas.
   Ninguna otra hoja define colores sueltos: todo sale de acá.
   ========================================================================== */

:root {
  /* ---- marca (logo V12) ---- */
  --brand:        #C12CE5;   /* magenta de la X */
  --brand-hi:     #E36AF0;   /* magenta claro para brillos */
  --brand-deep:   #7B3CF2;   /* violeta de transición */
  --blue:         #4F7CFF;   /* versión luminosa del #033383 del logo */
  --navy:         #033383;   /* azul del logo — solo decorativo, sin contraste sobre negro */
  --gold:         #CA9424;   /* acento fino, como el filete del logo */
  --gold-hi:      #F3D27A;

  --grad-brand: linear-gradient(90deg, var(--blue) 0%, #9B4DFF 38%, var(--brand) 70%, var(--brand-hi) 100%);
  --grad-btn:   linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
  --grad-soft:  linear-gradient(180deg, #FFFFFF 0%, #B9B4C9 100%);

  /* logos de plataformas (Spotify, Apple Music…). Demo: violeta. Producción: #FFFFFF,
     porque las guías de marca de las plataformas no permiten teñir sus logos. */
  --platform-ic: var(--brand-hi);

  /* ---- superficies (solo modo oscuro) ---- */
  --bg:           #050409;
  --surface:      #0C0A13;
  --surface-2:    #13101C;
  --surface-3:    #1B1727;
  --glass:        rgba(19, 16, 28, .72);
  --line:         rgba(255, 255, 255, .08);
  --line-strong:  rgba(255, 255, 255, .14);

  /* ---- texto ---- */
  --text:         #F4F2F8;
  --text-2:       #B6B1C6;   /* 9.8:1 sobre --bg */
  --text-3:       #7F7992;   /* 4.9:1 sobre --bg — solo texto secundario */

  /* ---- estados ---- */
  --danger:       #FF6B8B;   /* errores de formulario: 7.5:1 sobre --bg, 6.9:1 sobre la tarjeta */

  /* ---- tipografía ---- */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:   .75rem;     /* 12 */
  --fs-sm:   .875rem;    /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-h3:   clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  --fs-h2:   clamp(2rem, 1.2rem + 2.4vw, 3.25rem);   /* títulos de sección */
  /* Titular del banner. Dos topes:
     - ancho: la frase rotativa más larga mide ~7 em y tiene que caber en su columna (6vw sigue a la columna)
     - alto:  9vh, para que el banner entre en una pantalla también en monitores anchos pero bajos */
  --fs-hero: clamp(2.75rem, min(6vw - .25rem, 9vh), 6rem);

  /* ---- espacios y layout ---- */
  --container: 100%;                 /* en desktop pasa a ser fluido, ver abajo */
  --gutter:    clamp(1rem, .5rem + 2vw, 2rem);
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --hdr-h:     4.25rem;              /* 68px */
  --hdr-top:   1rem;

  /* ---- radios ---- */
  --r-sm:   .625rem;
  --r-md:   1rem;
  --r-lg:   1.5rem;
  --r-xl:   2rem;
  --r-pill: 999px;

  /* ---- sombras y brillos ---- */
  --glow-brand: 0 0 0 1px rgba(193, 44, 229, .35), 0 12px 40px -8px rgba(193, 44, 229, .55);
  --shadow-lg:  0 30px 80px -20px rgba(0, 0, 0, .8);

  /* ---- movimiento ---- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast:   .18s;
  --t-med:    .4s;
  --t-slow:   .9s;
}

/* Desktop: el contenido ocupa el 94% del ancho de la pantalla en vez de quedar
   en una columna fija centrada. Así el sitio llena monitores de 1920 px y más. */
@media (min-width: 1024px) {
  :root { --container: min(94vw, 112rem); }
}