:root {
  /* ── Paleta cromática ── */
  --navy:         #1F2C4C;
  --orange:       #F18B3B;
  --orange-deep:  #E8553A;  /* X de tachado y "92%" en Sin Blindafon */
  --cream:        #F5F1EA;
  --blue-glow:    #4FC3FF;
  --black-deep:   #0A0E18;
  --off-white:    #FAF8F4;

  /* ── Espaciado (sistema 8px) ── */
  --space-xs:  0.5rem;   /*   8px */
  --space-sm:  1rem;     /*  16px */
  --space-md:  1.5rem;   /*  24px */
  --space-lg:  2.5rem;   /*  40px */
  --space-xl:  4rem;     /*  64px */
  --space-2xl: 6rem;     /*  96px */
  --space-3xl: 10rem;    /* 160px */

  /* ── Padding lateral ── */
  --pad-mobile:  1.25rem;
  --pad-desktop: clamp(2rem, 5vw, 5rem);

  /* ── Easings premium ── */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  /* ── Sombras multi-capa (sistema Igloo) ── */
  --shadow-card:
    0 1px 2px rgba(31, 44, 76, 0.04),
    0 8px 24px rgba(31, 44, 76, 0.08),
    0 24px 64px rgba(31, 44, 76, 0.06);

  /* ── Color de texto según contexto de fondo ── */
  --text-on-cream: var(--navy);
  --text-on-dark: var(--off-white);
}