:root {
  /* ── Paleta Velcra ── */
  --charcoal: #2A383D;
  --charcoal-light: #35464C;   /* superficies elevadas (cards) */
  --mist: #859EA0;
  --frost: #C8D8DA;
  --electric: #485d61;         /* mismo tono, oscurecido — contraste 7:1 con blanco */
  --electric-hover: #52707A;   /* hover: un paso más claro del mismo tono */
  --white: #FFFFFF;

  /* ── Semánticos ── */
  --bg: var(--charcoal);
  --bg-surface: var(--charcoal-light);
  --text-primary: #E2ECED;
  --text-secondary: #AEC4C6;
  --text-heading: var(--white);
  --accent: var(--electric);
  --glow: #49c5f7;              /* color de resplandores y efectos de luz */
  --glow-soft: rgba(77, 163, 255, 0.14);  /* versión tenue para spotlights */
  --border: rgba(133, 158, 160, 0.18);

  /* ── Tipografía ── */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Escala fluida: se adapta sola entre móvil y desktop */
  --fs-hero: clamp(2.2rem, 5.5vw, 4rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 2vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* ── Espaciado ── */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-section: clamp(4rem, 10vw, 7rem);

  /* ── Otros ── */
  --radius: 12px;
  --radius-lg: 20px;
  --container: 1140px;
  --transition: 0.25s ease;
  --shadow-glow: 0 0 40px rgba(0, 102, 255, 0.25);
}