/* ==========================================================================
   Mythos — Sistema de diseño
   Paleta heredada de la marca (#F9BF00 / #1C1C21) profundizada hacia el negro
   violáceo, con el ámbar de Mythos (#E09900) como acento premium.
   ========================================================================== */

:root {
  /* --- Superficies (de más profunda a más elevada) --- */
  --my-void:        #07070A;
  --my-bg:          #0B0B10;
  --my-surface:     #12121A;
  --my-surface-2:   #1C1C21;
  --my-line:        #26242F;
  --my-line-soft:   rgba(249, 191, 0, .14);

  /* --- Acentos --- */
  --my-gold:        #F9BF00;
  --my-amber:       #E09900;
  --my-gold-dim:    rgba(249, 191, 0, .12);
  --my-violet:      #292844;
  --my-red:         #E24343;
  /* Colores oficiales de WhatsApp. No son nuestros y no se retocan: que se
     reconozca la marca es justo lo que hace que se pulse. */
  --my-whatsapp:      #25D366;
  --my-whatsapp-dark: #1DA851;

  /* --- Texto --- */
  --my-white:       #FFFFFF;
  --my-text:        #C7C5D0;
  --my-text-dim:    #8A8799;

  /* --- Tipografía ---
   * Display: Big Shoulders. Condensada y afilada, de cartel; aguanta titulares
   *          enormes en mayúsculas sin volverse un bloque macizo.
   * Texto:   IBM Plex Sans. Cara institucional y técnica — la voz del expediente
   *          del CNI que abre la partida — y con acentos españoles bien resueltos.
   * Mono:    IBM Plex Mono. Solo para el cronómetro y las cifras: son datos,
   *          y se leen como una lectura de instrumento. */
  --my-font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --my-font-body:    "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --my-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Escala fluida: se adapta al viewport sin media queries */
  --my-h1:    clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
  --my-h2:    clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --my-h3:    clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  --my-body:  clamp(1rem, .96rem + .18vw, 1.125rem);
  --my-small: .875rem;

  /* --- Ritmo --- */
  --my-section:  clamp(4rem, 2.5rem + 6vw, 8rem);
  --my-gap:      clamp(1.25rem, .9rem + 1.4vw, 2.5rem);
  --my-max:      1200px;
  --my-max-text: 68ch;

  /* --- Detalle --- */
  --my-radius:    4px;
  --my-radius-lg: 8px;
  --my-shadow:    0 24px 60px -20px rgba(0, 0, 0, .85);
  --my-glow:      0 0 0 1px rgba(249, 191, 0, .28), 0 12px 40px -12px rgba(249, 191, 0, .22);
  --my-ease:      cubic-bezier(.22, .61, .36, 1);

  /* Grano de película para el hero (SVG inline, cero peticiones) */
  --my-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}