/* ==========================================================================
   PETROCERT — tokens.css
   Sistema de diseño: color, tipografía, espaciado, elevación, movimiento.
   Paleta derivada del logotipo institucional (#0B4D26 / #14181A).
   ========================================================================== */

:root {
  /* ---- Color: verdes institucionales ---------------------------------- */
  --verde-900: #04200F;   /* fondo profundo, footer */
  --verde-800: #072E18;   /* secciones oscuras */
  --verde-700: #0B4D26;   /* verde de marca */
  --verde-600: #12662F;   /* hover / estados */
  --verde-400: #2E9A55;
  --verde-300: #4AB06A;   /* texto verde sobre oscuro */

  /* ---- Color: ámbar de seguridad (acento) ----------------------------- */
  --ambar: #F2A900;
  --ambar-600: #D08F00;
  --ambar-100: #FFF3D6;

  /* ---- Color: neutros -------------------------------------------------- */
  --tinta: #14181A;       /* titulares sobre claro */
  --grafito: #39423D;     /* texto cuerpo */
  --humo: #616D66;        /* texto secundario */
  --niebla: #E9EDE9;      /* fondo sage claro */
  --hueso: #F7F9F6;       /* fondo base */
  --blanco: #FFFFFF;

  /* ---- Color: funcionales --------------------------------------------- */
  --linea: rgba(11, 77, 38, .14);
  --linea-fuerte: rgba(11, 77, 38, .28);
  --linea-oscura: rgba(255, 255, 255, .13);
  --foco: var(--ambar);

  /* ---- Tipografía ------------------------------------------------------ */
  --f-display: 'Archivo', 'Archivo Expanded', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-dato: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --fs-display: clamp(2.75rem, 7.2vw, 5.5rem);
  --fs-h1: clamp(2.1rem, 5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 1.8vw, 1.45rem);
  --fs-h4: 1.0625rem;
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-dato: .75rem;

  --lh-apretado: 0.98;
  --lh-titulo: 1.12;
  --lh-texto: 1.68;

  /* ---- Espaciado ------------------------------------------------------- */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --seccion-y: clamp(4rem, 9vw, 7.5rem);
  --contenedor: 1220px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  /* ---- Radios y elevación ---------------------------------------------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --sombra-1: 0 1px 2px rgba(4, 32, 15, .06), 0 6px 18px rgba(4, 32, 15, .06);
  --sombra-2: 0 2px 6px rgba(4, 32, 15, .08), 0 18px 44px rgba(4, 32, 15, .12);
  --sombra-3: 0 30px 70px rgba(4, 32, 15, .28);

  /* ---- Movimiento ------------------------------------------------------ */
  --t-rapido: 160ms cubic-bezier(.4, 0, .2, 1);
  --t-medio: 320ms cubic-bezier(.4, 0, .2, 1);
  --t-lento: 620ms cubic-bezier(.22, 1, .36, 1);

  /* ---- Alturas --------------------------------------------------------- */
  --header-h: 96px;
  --header-h-sm: 80px;
}

/* En pantallas pequeñas la cabecera no debe comerse el alto disponible. El
   logotipo la sigue automáticamente, y aun así queda mayor que antes. */
@media (max-width: 620px) {
  :root {
    --header-h: 84px;
    --header-h-sm: 72px;
  }
}