/* ═══════════════════════════════════════════════════════════════
   VECAMAX CARGO — TOKENS
   Este es el archivo para jugar: colores, tipografías, medidas y
   los ajustes de las fotos. Lo usan index.html y privacidad.html,
   así que un cambio acá se ve en todo el sitio.

   Los colores salen del logo. No agregues colores fuera de esta
   paleta sin revisar el logo primero.
   ═══════════════════════════════════════════════════════════════ */
:root{
  /* ── Paleta ── */
  --navy:#0C3160;        /* azul del logo — títulos y botones sólidos */
  --navy-deep:#071F41;   /* fondo del hero, del footer y de las secciones oscuras */
  --navy-soft:#144077;   /* hover del botón navy */
  --orange:#E8951F;      /* acento del logo — CTA, filetes, viñetas */
  --bone:#F3F4EE;        /* fondo claro del sitio */
  --bone-2:#E7E9E1;      /* fondo claro alternado */
  --ink:#101820;         /* texto principal */
  --muted:#5F6B78;       /* texto secundario sobre fondo claro */
  --muted-light:#A9B7C6; /* texto secundario sobre fondo oscuro */
  --line:rgba(12,49,96,.16);      /* bordes sobre fondo claro */
  --line-dark:rgba(255,255,255,.15); /* bordes sobre fondo oscuro */

  /* ── Tipografías ── */
  --display:'Archivo',system-ui,sans-serif;          /* títulos (usa font-stretch) */
  --body:'IBM Plex Sans',system-ui,sans-serif;       /* texto corrido */
  --mono:'IBM Plex Mono',ui-monospace,monospace;     /* etiquetas, códigos y datos */

  /* ── Medidas ── */
  --wrap:1180px;                 /* ancho máximo del contenido */
  --pad:clamp(20px,5vw,54px);    /* margen lateral, se achica en móvil */
  --r:3px;                       /* radio de esquinas: casi recto, a propósito */

  /* ── Fotos ─────────────────────────────────────────────────────
     Las rutas de las imágenes van en el HTML (en los <img>), para
     que el navegador las cargue temprano. Acá se controla cómo se
     ven: el velo que las oscurece y el filete de color.
     Archivos actuales en public/: hero-camion.jpg, og.jpg,
     logo-horizontal.png, logo-emblema.png
     ─────────────────────────────────────────────────────────────── */
  --foto-velo:linear-gradient(200deg,rgba(7,31,65,.04),rgba(7,31,65,.42));
  --foto-filete:var(--orange);   /* color de la línea inferior de la foto del hero */
  --foto-ratio:16/9;             /* proporción del recuadro de la foto del hero */
  --foto-fondo:var(--navy-soft); /* se ve mientras la foto carga */
}