/* ── BASE — variables CSS, reset, body, scrollbar ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Paleta base ── */
  --dark:  #070b14;
  --dark2: #0d1422;
  --dark3: #14203a;
  --red:   #C0152A;
  --red2:  #8A0E1F;
  --blue:  #1A56DB;
  --blue2: #1E40AF;
  --gold:  #D4AF37;
  --white: #ffffff;
  --gray:  #94a3b8;
  --light: #e2e8f0;
  --green: #25d366;
  --pink:  #ff5577;

  /* ── Colores semánticos frecuentes ── */
  --nav-bg:          rgba(7,11,20,.92);
  --nav-bg-full:     rgba(7,11,20,.97);
  --border-red:      rgba(192,21,42,.18);
  --border-red-md:   rgba(192,21,42,.2);
  --border-white:    rgba(255,255,255,.05);
  --white-subtle:    rgba(255,255,255,.06);
  --red-subtle:      rgba(192,21,42,.15);
  --gold-glow-sm:    rgba(212,175,55,.25);
  --gold-glow-lg:    rgba(212,175,55,.6);
  --gold-glow-mid:   rgba(212,175,55,.5);
  --red-glow:        rgba(192,21,42,.18);
  --black-overlay:   rgba(0,0,0,.45);

  /* ── Escala tipográfica ── */
  --fs-xs:   .65rem;   /* badges, etiquetas micro */
  --fs-sm:   .75rem;   /* textos secundarios, labels */
  --fs-base: .85rem;   /* body y nav links */
  --fs-md:   1rem;     /* texto normal */
  --fs-lg:   1.2rem;   /* subtítulos de sección */
  --fs-xl:   1.5rem;   /* headings medianos */
  --fs-2xl:  2.2rem;   /* headings grandes */
  --fs-hero: clamp(3rem,8vw,7rem); /* display hero */
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--dark); color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }