/* ==========================================================================
   TOKENS DE MARCA — Azor Data
   Fuente: Azor_Data_Guia_Identidad_Marca v1.0 (2026)
   Azul Profundo #083B5E (principal, ~60%) · Naranja Vivo #FF9B5D (acento, máx 20%)
   Tipografías: Anton (títulos, mayúsculas) · DM Sans (cuerpo) · Roboto (soporte)
   ========================================================================== */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('../fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('../fonts/dm-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url('../fonts/roboto.woff2') format('woff2');
}

:root {
  /* ---- Paleta oficial Azor Data ---- */
  --c-azul-profundo: #083B5E;  /* principal · fondos · headers (≈60% del diseño) */
  --c-azul-medio:    #3B637F;  /* fondos secundarios · secciones interiores */
  --c-azul-gris:     #819BAD;  /* neutros · texto secundario */
  --c-azul-claro:    #CED8DF;  /* fondos neutros · bordes suaves */
  --c-naranja-vivo:  #FF9B5D;  /* ACENTO / CTA únicamente · máx 20% del área */
  --c-naranja-suave: #F7C4A1;  /* ilustraciones · iconos decorativos */
  --c-blanco:        #FFFFFF;

  /* Derivados de apoyo (dentro de la familia de marca) */
  --c-azul-profundo-90: #0a4269;
  --c-azul-profundo-05: #f2f6f9;
  --c-naranja-hover:    #f5854a;
  --c-naranja-fondo:    #FFF4EC;
  /* Naranja oscurecido SOLO para texto pequeño sobre fondo claro: el naranja vivo
     sobre blanco da 2.2:1 y no cumple WCAG AA. Este da 4.8:1. */
  --c-naranja-texto:    #A8521A;
  --c-exito:            #1f8f6b;
  --c-exito-fondo:      #dff3ec;
  --c-texto:            #12222e;
  --c-texto-suave:      #4a5b66;
  --c-linea:            #e2e8ed;

  /* ---- Roles semánticos (usar estos en los componentes) ---- */
  --bg:              var(--c-blanco);
  --bg-alt:          var(--c-azul-profundo-05);
  --bg-oscuro:       var(--c-azul-profundo);
  --bg-oscuro-2:     var(--c-azul-medio);
  --texto:           var(--c-texto);
  --texto-suave:     var(--c-texto-suave);
  --texto-inverso:   var(--c-blanco);
  --acento:          var(--c-naranja-vivo);
  --acento-hover:    var(--c-naranja-hover);
  --linea:           var(--c-linea);

  /* ---- Tipografía ---- */
  --font-titulo:  'Anton', 'Arial Narrow', sans-serif;
  --font-cuerpo:  'DM Sans', system-ui, -apple-system, sans-serif;
  --font-soporte: 'Roboto', system-ui, sans-serif;

  --fs-display: clamp(2.5rem, 5.8vw, 4.3rem);
  --fs-h1:      clamp(2rem, 4.5vw, 3rem);
  --fs-h2:      clamp(1.6rem, 3.2vw, 2.3rem);
  --fs-h3:      clamp(1.15rem, 2vw, 1.4rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.25rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.78rem;

  --lh-titulo: 1.05;
  --lh-cuerpo: 1.6;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --ancho-max: 1200px;
  --ancho-texto: 68ch;
  --radio-s: 8px;
  --radio-m: 14px;
  --radio-l: 22px;
  --radio-full: 999px;

  --sombra-s: 0 1px 3px rgba(8, 59, 94, 0.08);
  --sombra-m: 0 6px 22px rgba(8, 59, 94, 0.12);
  --sombra-l: 0 18px 48px rgba(8, 59, 94, 0.18);

  --trans: 180ms ease;
}