:root {
  /* ============ PALETA ============ */
  /* Fondo blanco puro en toda la landing */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F9FAFB;        /* gris muy suave para separadores opcionales */
  --color-bg-dark: #111827;       /* solo announcement bar */
  --color-surface: #FFFFFF;

  /* CTA principal: verde primavera */
  --color-accent: #2E8B57;
  --color-accent-hover: #246B43;
  --color-accent-light: #D1F2E0;

  /* Énfasis tipográfico en títulos (terracota V1) */
  --color-title-accent: #C4725A;
  --color-title-accent-soft: #F2D9CE;

  /* Acento crema/beige pastel — fondos de bloque suaves que armonizan con verde */
  --color-pink: #FAF5EC;          /* alias mantenido para compatibilidad */
  --color-pink-strong: #F3EBDA;
  --color-cream: #FAF5EC;
  --color-cream-strong: #F3EBDA;
  --color-mint: #EDF6EF;           /* verde menta muy lavado para acentos */

  /* Urgencia: rojo */
  --color-urgency: #DC2626;
  --color-urgency-bg: #FEE2E2;

  /* Texto */
  --color-text: #1A1A1A;            /* títulos */
  --color-text-secondary: #374151;  /* body */
  --color-text-light: #F9FAFB;
  --color-text-muted: #6B7280;
  --color-border: rgba(17, 24, 39, 0.08);
  --color-border-strong: rgba(17, 24, 39, 0.15);
  --color-success: #2E8B57;
  --color-error: #DC2626;
  --color-gold: #D4A853;

  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-blur: blur(20px);
  --glass-border: rgba(17, 24, 39, 0.06);

  /* ============ TIPOGRAFÍA ============ */
  /* Manrope para títulos, Inter para body. Ambas con tildes/eñes perfectas y muy legibles en móvil. */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   clamp(0.7rem,   0.65rem + 0.25vw, 0.75rem);
  --text-sm:   clamp(0.8rem,   0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.95rem,  0.9rem  + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.1rem,   1rem    + 0.5vw,  1.25rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   1.2rem  + 1.5vw,  2rem);
  --text-3xl:  clamp(1.8rem,   1.4rem  + 2vw,    2.75rem);
  --text-4xl:  clamp(2.2rem,   1.6rem  + 3vw,    3.5rem);
  --text-5xl:  clamp(2.6rem,   2rem    + 4vw,    4.5rem);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* ============ ESPACIADO ============ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5rem;
  --s-10: 8rem;

  /* ============ LAYOUT ============ */
  --container-max: 1200px;
  --container-narrow: 900px;
  --container-text: 680px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);
  --section-padding: clamp(3rem, 6vw, 5.5rem);

  /* ============ RADIOS ============ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ============ SOMBRAS ============ */
  --shadow-sm:   0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md:   0 4px 16px rgba(17, 24, 39, 0.06);
  --shadow-lg:   0 12px 32px rgba(17, 24, 39, 0.08);
  --shadow-xl:   0 24px 60px rgba(17, 24, 39, 0.12);
  --shadow-glow: 0 0 28px rgba(46, 139, 87, 0.25);

  /* ============ TRANSICIONES ============ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --t-base:   0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow:   0.6s cubic-bezier(0.16, 1, 0.3, 1);

  --tap-min: 48px;

  /* ============ ALIASES para gracias.html (compatibilidad) ============ */
  --c-bg:           var(--color-bg);
  --c-bg-soft:      var(--color-bg-alt);
  --c-bg-deep:      #E5E7EB;
  --c-surface:      var(--color-surface);
  --c-accent:       var(--color-accent);
  --c-accent-deep:  var(--color-accent-hover);
  --c-accent-soft:  var(--color-accent-light);
  --c-ink:          var(--color-text);
  --c-ink-soft:     var(--color-text-secondary);
  --c-ink-mute:     var(--color-text-muted);
  --c-line:         var(--color-border);
  --c-text-on-dark: var(--color-text-light);
  --c-success:      var(--color-success);
  --c-success-bg:   #D1F2E0;
  --f-display:      var(--font-display);
  --f-body:         var(--font-body);
  --fs-xs:          var(--text-sm);
  --fs-sm:          var(--text-base);
  --fs-base:        var(--text-lg);
  --fs-md:          var(--text-xl);
  --fs-lg:          var(--text-2xl);
  --fs-xl:          var(--text-3xl);
  --fs-2xl:         var(--text-5xl);
  --container-px:   var(--container-padding);
  --section-py:     var(--section-padding);
}