/* =============================================================
   ASFALTO FLUMAT S.R.L. — Sistema de diseño
   Paleta: azul corporativo + blanco + grises. Sobria y elegante.
   El azul del membrete es la tinta de la marca; los grises son el
   cemento; el blanco es el aire. No hay un cuarto color.
   ============================================================= */
:root{
  /* --- Azul de marca: escala derivada del membrete --- */
  --ink-950:#050A14;
  --ink-900:#08111F;
  --ink-850:#0B1727;
  --ink-800:#0E1E33;
  --ink-700:#132845;
  --ink-600:#17335A;
  --ink-500:#1B3A6B;   /* azul del logo */
  --ink-400:#27508F;
  --ink-300:#3A6AB5;
  --ink-200:#6E97D6;
  --ink-100:#AAC5EA;
  --ink-050:#DCE7F7;

  /* --- Acento: azul acero luminoso. Único realce del sistema --- */
  --acc-600:#1F5BC4;
  --acc-500:#2E6FDF;
  --acc-400:#4A88EE;
  --acc-300:#7FADF5;
  --acc-100:#D3E3FC;

  /* --- Grises cemento --- */
  --white:#FFFFFF;
  --paper:#F6F7F9;
  --paper-2:#EDEFF3;
  --paper-3:#DFE3E9;
  --grey-400:#A8AFBA;
  --grey-500:#8A929F;
  --grey-600:#69717E;
  --grey-700:#4A525E;
  --grey-800:#2E3641;

  /* --- Roles semánticos. El sitio es claro por defecto --- */
  --bg:var(--white);
  --bg-raise:var(--paper);
  --bg-card:var(--white);
  --fg:var(--ink-900);
  --fg-soft:var(--grey-700);
  --fg-mute:var(--grey-600);
  --line:rgba(20,44,85,.13);
  --line-strong:rgba(20,44,85,.26);
  --accent:var(--acc-500);
  --accent-fg:var(--white);
  --shadow:0 1px 2px rgba(11,23,39,.05),0 12px 32px -12px rgba(11,23,39,.14);

  /* --- Tipografía --- */
  --font-display:'Poppins',system-ui,'Segoe UI',sans-serif;
  --font-text:'Inter',system-ui,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;

  /* Escala fluida 320 → 1600 px */
  --t-mono:clamp(.6875rem,.64rem + .2vw,.75rem);
  --t-xs:clamp(.75rem,.72rem + .16vw,.8125rem);
  --t-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --t-base:clamp(1rem,.96rem + .2vw,1.0625rem);
  --t-lg:clamp(1.125rem,1.05rem + .36vw,1.375rem);
  --t-xl:clamp(1.375rem,1.2rem + .78vw,2rem);
  --t-2xl:clamp(1.75rem,1.4rem + 1.6vw,3rem);
  --t-3xl:clamp(2.25rem,1.6rem + 3.1vw,4.5rem);
  --t-4xl:clamp(2.75rem,1.5rem + 6vw,7.5rem);
  --t-hero:clamp(2.6rem,1.1rem + 7.4vw,9.5rem);

  /* --- Espaciado y ritmo --- */
  --gutter:clamp(1.25rem,4vw,4rem);
  --sec-y:clamp(3.6rem,6vh + 4vw,9.5rem);
  --maxw:88rem;
  --measure:64ch;
  --radius:3px;        /* la marca es geométrica: radio mínimo */
  --radius-lg:6px;

  /* --- Movimiento --- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:.22s;
  --dur:.5s;
  --dur-slow:.9s;

  --header-h:clamp(58px,7vh,76px);

  /* --- Dirección de arte fotográfica ---------------------------------
     Las fotos vienen de bancos distintos y cada una trae su dominante
     (ámbar, ocre, violeta). Se las lleva a todas a un mismo duotono azul
     acero: filtro que las desatura y capa `mix-blend-mode:color` que les
     impone el matiz de la marca conservando la luminancia original. */
  --ph-filter:saturate(.28) contrast(1.14) brightness(.94);
  --ph-tint:linear-gradient(158deg,#20406F 0%,#0C1B31 55%,#050C18 100%);
  --ph-tint-o:.82;
  --ph-shade:linear-gradient(to top,rgba(5,10,20,.55),rgba(5,10,20,0) 62%);
}

/* Superficie oscura: hero, relato térmico, logística, contacto y pie */
.is-dark{
  --bg:var(--ink-950);
  --bg-raise:var(--ink-900);
  --bg-card:var(--ink-850);
  --fg:#EDF2F9;
  --fg-soft:#A9B6C7;
  --fg-mute:#75839a;
  --line:rgba(160,190,235,.15);
  --line-strong:rgba(160,190,235,.30);
  --accent:var(--acc-400);
  --accent-fg:var(--ink-950);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.6);
}

/* Superficie intermedia: gris cemento muy claro */
.is-mist{
  --bg:var(--paper);
  --bg-raise:var(--white);
  --bg-card:var(--white);
}