:root {
  /* ── Colores (Estilo The Park Church) ── */
  --color-primary:       #1f2d3d;
  --color-primary-dark:  #141d28;
  --color-primary-light: #2c4159;
  --color-accent:        #1877F2;
  --color-accent-dark:   #145ebf;
  --color-purple:        #1f2d3d; /* Cambiado para mantener coherencia */

  --color-bg:            #ffffff;
  --color-bg-alt:        #f0f0f0;
  --color-white:         #FFFFFF;

  --color-text:          #222222;
  --color-text-secondary:#555555;
  --color-text-light:    rgba(255, 255, 255, 0.9);
  --color-text-muted:    rgba(255, 255, 255, 0.6);

  --color-border:        #dddddd;
  --color-success:       #1877F2;
  --color-error:         #dc3545;

  --color-ig:            #1f2d3d; /* Adaptado al branding oscuro */
  --color-fb:            #1f2d3d;
  --color-wa:            #28a745;

  /* ── Tipografía (Bold Sans-Serif) ── */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Nueva escala modular (16px, 20px, 25px, 31px, 39px, 49px, 61px) */
  --text-xs:   0.8rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5625rem;
  --text-2xl:  1.9375rem;
  --text-3xl:  2.4375rem;
  --text-4xl:  3.5rem; /* Ampliado para Hero impactante */
  --text-5xl:  4.5rem;

  --leading-tight:  1.05; /* Más apretado para mayúsculas */
  --leading-normal: 1.6;

  /* ── Espaciado (Escala rítmica) ── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  12px;
  --sp-lg:  20px;
  --sp-xl:  32px;
  --sp-2xl: 52px;
  --sp-3xl: 84px;

  --section-gap:    96px;
  --section-gap-sm: 64px;

  /* ── Layout ── */
  --container-max: 1200px;
  --container-px:  40px;
  --container-px-sm: 20px;

  /* ── Bordes (Afilados) ── */
  --radius-sm:   0px;
  --radius-md:   4px;
  --radius-pill: 4px;

  /* ── Sombras (Multicapa oscuras) ── */
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.1);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.15);
  --shadow-lg:       0 12px 24px -8px rgba(0,0,0,0.25);
  --shadow-btn:      0 4px 12px rgba(24,119,242,0.30);
  --shadow-header:   0 4px 16px rgba(0,0,0,0.15);

  /* ── Transiciones y Easings ── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --transition-fast:   0.15s var(--ease-out-expo);
  --transition-normal: 0.35s var(--ease-out-expo);
  --transition-slow:   0.7s var(--ease-in-out-quint);

  /* ── Header ── */
  --header-height: 100px;
}