:root {
  /* =========================================
     [SISTEMA DE DISEÑO - CONFIGURACIÓN BÁSICA]
     ========================================= */
  
  /* 1. Colores de Marca */
  --color-primary: #0056b3; /* Color principal (Botones, Hero) */
  --color-secondary: #f8f9fa; /* Color de fondo alternativo */
  --color-accent: #ff6b6b; /* Color para llamadas a la acción (CTA) */
  
  /* 2. Tipografía */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  
  /* 3. Espaciado y Layout (Grid Variables) */
  --header-height: 5rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 3rem;
  --grid-max-width: 1200px;
  
  /* 4. Estilos de UI */
  --border-radius: 8px;
  --box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}