:root {
  /* Color — paleta navy nacida del video de containers */
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --ink: #10151E;
  --muted: #48515F;
  --brand: #1C2C49;
  --brand-soft: #2A3D61;
  --brand-deep: #0E1726;
  --tint: #E3E8F0;
  --line: rgba(16, 21, 30, 0.10);
  --on-dark: #F2F4F8;
  --on-dark-muted: rgba(242, 244, 248, 0.72);
  --line-dark: rgba(242, 244, 248, 0.14);

  /* Type */
  --font-sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-hero: clamp(2.5rem, 4.8vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3.1rem);
  --fs-h3: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-statement: clamp(1.6rem, 3.2vw, 2.6rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;

  /* Shape: interactivo = pill, contenedor = 16px */
  --r-pill: 100px;
  --r-card: 16px;

  /* Space */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 140px;
  --container-max: 1240px;
  --container-pad: 24px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Z-scale: contenido < marquee-fade < header < drawer */
  --z-header: 100;
  --z-drawer: 99;
}