/* ============================================================
   BDS · BINTEL DESIGN SYSTEM v1.2 — TOKENS
   ------------------------------------------------------------
   Esta es la fuente de verdad del diseño. Todo el sitio hereda
   de aquí: cambia un token y cambia el sitio entero.
   styles.css NUNCA debe escribir un color o medida en crudo.

   COLOR: paleta oficial del BDS (aprobada 2026-09-16).
   Los contrastes anotados son ratios WCAG 2.1 ya verificados;
   si cambias un hex, vuelve a verificarlos antes de publicar.
   ============================================================ */
:root{

  /* ── COLOR · paleta oficial BDS ────────────────────────────
     La escala tal cual viene del manual de marca. Estos seis son
     la referencia; los tokens de abajo son los que usa el sitio. */
  --bds-navy-900: #0A1E3A;
  --bds-navy-700: #173A6B;
  --bds-blue-500: #2D7EF7;   /* azul de marca */
  --bds-blue-400: #4A9EFF;
  --bds-blue-300: #7FB8FF;
  --bds-paper:    #F4F7FB;

  /* ── COLOR · marca aplicada ────────────────────────────────
     Regla del azul: --accent es el azul de marca y se usa en todo
     lo VISUAL (destacados, bordes, iconos, azul sobre navy).
     Cuando el azul CARGA TEXTO encima o ES texto sobre fondo
     claro, se usa --accent-strong: mismo matiz (216°) y misma
     saturación (93%), 5% menos de luminosidad, para cruzar el
     mínimo AA de 4.5:1. Visualmente es el mismo azul. */
  --ink:           var(--bds-navy-900); /* texto principal · 15.5:1 sobre paper */
  --navy:          var(--bds-navy-700); /* bloque Enfoque · blanco encima 11.3:1 */
  --navy-deep:     var(--bds-navy-900); /* bloque Contacto · blanco encima 16.7:1 */
  --accent:        var(--bds-blue-500); /* azul de marca · solo elementos visuales */
  --accent-strong: #136EF6;             /* azul con texto encima · 4.58:1 con blanco */
  --accent-ink:    #0B5FD9;             /* hover de botón: un paso más profundo */
  --accent-soft:   var(--bds-blue-300); /* azul sobre fondo oscuro · 8.1:1 sobre navy-900 */

  /* ── COLOR · superficies y texto ───────────────────────── */
  --paper:      var(--bds-paper);        /* fondo general */
  --paper-blur: rgba(244,247,251,.82);   /* nav sticky translúcido — debe igualar a --paper */
  --surface:    #FFFFFF;                 /* tarjetas / superficies claras */
  --muted:      #637083;                 /* texto secundario · 4.68:1 sobre paper (AA) */
  --line:       #DCE3ED;                 /* líneas finas / bordes (navy diluido) */

  /* Sobre fondo oscuro (navy / navy-deep) */
  --on-dark:        #FFFFFF;               /* texto principal invertido */
  --on-dark-muted:  #AEBACB;               /* texto secundario invertido · 8.5:1 sobre navy-900 */
  --on-dark-line:   rgba(255,255,255,.18); /* líneas sobre oscuro */

  /* Estado y feedback (formularios, validación) */
  --focus:      var(--accent-strong); /* anillo de foco · 4.26:1 sobre paper */
  --error:      #C0392B;              /* error de validación */
  /* Sin uso hoy: al enviar bien, el formulario redirige a gracias.html en vez
     de mostrar un estado de éxito en la misma página. Se conserva porque el
     par error/éxito es el que se necesitaría si algún día no redirige. */
  --success:    #1E7A4C;              /* confirmación */

  /* ── TIPOGRAFÍA ────────────────────────────────────────── */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Escala tipográfica (fluida donde importa) */
  --text-xs:   .85rem;
  --text-sm:   .95rem;
  --text-base: 1.0625rem;
  --text-lg:   clamp(1.1rem, 1.6vw, 1.3rem);
  --text-h3:   1.5rem;
  --text-h2:   clamp(1.9rem, 3.4vw, 2.7rem);
  --text-h1:   clamp(2.5rem, 6.2vw, 4.6rem);

  --leading-tight: 1.08;   /* títulos */
  --leading-body:  1.65;   /* cuerpo */
  --tracking-tight: -.02em;

  /* ── ESPACIADO ─────────────────────────────────────────── */
  --space-1: .5rem;   --space-2: 1rem;   --space-3: 1.5rem;
  --space-4: 2rem;    --space-6: 3rem;   --space-8: 4.5rem;
  --space-10: 7rem;

  /* Ritmo vertical de sección y gutter horizontal */
  --section-y: clamp(3.5rem, 9vw, var(--space-10));
  --gutter:    clamp(1.25rem, 5vw, 2.5rem);

  /* ── FORMA ─────────────────────────────────────────────── */
  --radius-sm: 10px;   /* botones, inputs */
  --radius:    14px;   /* tarjetas, bloques */
  --radius-pill: 999px;

  /* ── SOMBRAS ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(10,17,36,.06);
  --shadow-md: 0 18px 40px -20px rgba(13,27,58,.35);

  /* ── LAYOUT ────────────────────────────────────────────── */
  /* Ancho del contenido: crece con la pantalla en vez de quedarse fijo.
     92vw hasta el tope de 1600px, así en laptop ocupa casi todo el ancho y en
     un monitor grande no deja bandas laterales enormes.
     OJO: esto NO afecta la longitud de línea del texto corrido, que tiene su
     propio límite en --maxw-text. Sin ese límite, a 1600px un párrafo daría
     ~174 caracteres por renglón y sería incómodo de leer. */
  --maxw:       min(92vw, 1600px);
  --maxw-text:  62ch;     /* ancho cómodo de lectura (50-75 es lo legible) */
  --nav-h:      72px;     /* alto del nav (sticky) */

  /* ── MOVIMIENTO ────────────────────────────────────────── */
  --ease:       cubic-bezier(.2,.7,.2,1);
  --dur-fast:   .18s;
  --dur-slow:   .7s;
}