:root {
  /* Color */
  --color-primary: #064fc4;
  --color-primary-dark: #003b9a;
  --color-primary-soft: #eaf2ff;
  --color-primary-lighter: #f4f8ff;

  --color-accent: #0b63f6;
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #128c7e;

  --color-white: #ffffff;
  --color-black: #071124;
  --color-text: #111827;
  --color-text-muted: #4b5563;
  --color-text-soft: #6b7280;

  --color-border: #dbe4f0;
  --color-border-soft: #edf1f7;

  --color-bg: #ffffff;
  --color-bg-soft: #f8fbff;
  --color-bg-blue: #f1f6ff;

  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.10);
  --shadow-button: 0 10px 24px rgba(6, 79, 196, 0.25);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Tipografía */
  --font-heading: "Poppins", "Montserrat", Arial, sans-serif;
  --font-body: "Poppins", "Inter", Arial, sans-serif;

  /* Breakpoints de referencia (documentales, usados en media queries) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}