/* ==========================================================================
   VARIABLES.CSS
   Paleta de marca, tipografía, espaciados y demás valores reutilizables
   de NAR SYSTEMS. Este archivo es la única fuente de verdad del diseño:
   cualquier cambio de color o tipografía global se hace AQUÍ, nunca
   directamente en los selectores de otros archivos CSS.
   ========================================================================== */

:root {

  /* ---------- COLORES DE MARCA ---------- */
  --color-primario: #0070DC;       /* Azul botones principales, enlaces, acentos */
  --color-primario-hover: #005BB5; /* Azul un poco más oscuro para estado hover */
  --color-oscuro: #08182C;         /* Fondo header, hero, banda CTA final, footer */
  --color-blanco: #FFFFFF;         /* Fondos claros, texto sobre fondo oscuro */
  --color-gris-claro: #F6F7FA;     /* Fondo de tarjetas de servicio */
  --color-borde: #E2E5EA;          /* Bordes sutiles sobre fondo claro */

  /* ---------- COLORES DE TEXTO ---------- */
  --color-texto: #1A1A1A;          /* Texto general sobre fondo claro */
  --color-texto-secundario: #5C6470; /* Texto secundario/descripciones sobre fondo claro */
  --color-texto-claro: #FFFFFF;    /* Texto sobre fondo oscuro */

  /* ---------- TIPOGRAFÍA ---------- */
  --fuente-principal: 'Poppins', sans-serif;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* ---------- ESPACIADO (sistema consistente) ---------- */
  --espaciado-xs: 8px;
  --espaciado-sm: 16px;
  --espaciado-md: 24px;
  --espaciado-lg: 32px;
  --espaciado-xl: 48px;
  --espaciado-xxl: 64px;

  /* ---------- BORDES Y SOMBRAS ---------- */
  --radio-borde: 8px;
  --radio-borde-sm: 4px;
  --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.08);
  --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ---------- CONTENEDOR GENERAL ---------- */
  --ancho-maximo: 1200px;
}