:root {
  /* ─── Colores de marca ──────────────────────────────── */
  --co:   #E8591A;   /* naranja principal */
  --col:  #FDF0EA;   /* naranja claro */
  --com:  #F5845A;   /* naranja medio */
  --cod:  #B8400F;   /* naranja oscuro */
  --cn:   #1A2E4A;   /* azul noche — solo footer y tipografía impacto */
  --cnl:  #E8EFF7;   /* azul noche claro */
  --cg:   #F5A623;   /* oro — sorteo y celebración */
  --cgl:  #FEF6E4;   /* oro claro */
  --cgd:  #B87A0F;   /* oro oscuro */
  --cve:  #1D9E75;   /* verde — activo y confirmación */
  --cvel: #E1F5EE;   /* verde claro */

  /* ─── Grises ────────────────────────────────────────── */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* ─── Tipografía ────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* ─── Espaciado ─────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ─── Bordes ────────────────────────────────────────── */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;

  /* ─── Sombras ───────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ─── Transiciones ──────────────────────────────────── */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-slow: 300ms ease;

  /* ─── Layout ────────────────────────────────────────── */
  --max-w: 1200px;
  --pad-x: var(--sp-6);   /* 24px — tablet y desktop */
}

/* Padding horizontal más ajustado en móvil pequeño */
@media (max-width: 480px) {
  :root { --pad-x: var(--sp-4); }  /* 16px */
}