/* ==========================================================================
   VARIABLES Y ESTILOS BASE (La Fundación)
   ========================================================================== */

:root {
  /* Tipografía */
  --font-main: 'Inter', system-ui, sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
  
  /* Colores Core (Light Theme Premium) */
  --c-bg: #F8FAFC;
  --c-bg-pure: #FFFFFF;
  --c-text-dark: #0F172A;
  --c-text-muted: #475569;
  
  /* Acentos y Conversión */
  --c-accent-blue: #0284c7;
  --c-accent-glow: rgba(2, 132, 199, 0.25);
  
  --c-wa: #25D366;
  --c-wa-glow: rgba(37, 211, 102, 0.4);
  
  /* Glassmorphism System */
  --glass-bg: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-highlight: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 40px 80px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255,255,255,0.4);
  
  /* Animaciones */
  --t-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Accesibilidad global: Focus visible para navegación por teclado */
:focus-visible {
  outline: 3px solid var(--c-accent-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  font-family: var(--font-main);
  background-color: var(--c-bg);
  color: var(--c-text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .logo, .hero__badge, .btn-large, .nav-link, .stat-box h3 {
  font-family: var(--font-display);
}

/* Accesibilidad: Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}