/* ==========================================================================
   variables.css — Tokens de diseño (colores, tipografía, espaciados corp)
   Único lugar donde se define la identidad visual de ISA.
   ========================================================================== */
:root{
  --color-bg:        #f4f4f4;
  --color-primary:   #002060;
  --color-secondary: #7A001E;
  --color-support:   #3373c4;
  --color-accent:    #ffb800;

  --color-white:  #ffffff;
  --color-black:  #000000;

  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151;
  --gray-800:#1f2937; --gray-900:#111827;

  /* Pila de fuentes 100% del sistema (sin descargas externas).
     Prioriza las variables tipográficas nativas de cada SO para un
     resultado visualmente muy cercano a Montserrat/Inter, sin CDN. */
  --font-heading: ui-sans-serif, "Segoe UI Semibold", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-corp: 12px;
  --shadow-color: 0 0% 0%;

  /* Alto del hero de todas las páginas (index.html, servicios-integrales.html,
     venta.html, casos-de-exito.html, capacitacion.html, contacto-isadc.html,
     cronologiaISA.html). Para cambiarlo, MODIFICA SOLO ESTE VALOR — se aplica
     a las 7 páginas a la vez porque todas comparten este archivo. Rango
     recomendado: 500px a 600px. */
  --hero-height: 500px;
}
.h-18 {
}