/* Roncati Engenharia — Design System · arquétipo institucional-corporativo
   Origem: cores medidas na logo (marinho #001030, laranja #F04E0C) + criativos de anúncio do cliente. */
:root{
  /* Cor — papéis */
  --c-bg:#F5F6F8;            /* fundo de página (off-white frio) */
  --c-surface:#FFFFFF;       /* cards, header, superfícies elevadas */
  --c-text:#001030;          /* texto principal = marinho da logo */
  --c-muted:#4A5468;         /* texto secundário (AA 7.0 sobre bg) */
  --c-white:#FFFFFF;
  --c-dark:#001030;          /* marinho: seções escuras, rodapé, overlay do hero */
  --c-dark-2:#0A1F4D;        /* marinho elevado (cards sobre escuro) */
  --c-primary:#F04E0C;       /* laranja da logo: CTA (texto marinho, 5.19:1) */
  --c-primary-dark:#B83200;  /* laranja escuro: hover do CTA e texto laranja sobre claro (6.0:1) */
  --c-accent:#F04E0C;        /* acento de assinatura: filete, número, ícone (dose pequena) */
  --c-on-dark:#FFFFFF;       /* texto sobre marinho */
  --c-on-dark-muted:#C8CEDA; /* texto secundário sobre marinho (11.9:1) */
  --c-n200:#E8EBF0;          /* linhas, divisórias, bordas */
  --c-n400:#A9B2C3;          /* bordas de input, ícone inativo */
  --c-n500:#6B7487;          /* placeholder, legenda (4.7:1 sobre branco) */
  --c-focus:#0A5BFF;         /* anel de foco */
  --c-ok:#1E7A4C;
  --c-error:#B42318;

  /* Tipografia */
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,sans-serif;
  --fs-eyebrow:clamp(.75rem,.72rem + .15vw,.8125rem);
  --fs-small:clamp(.875rem,.85rem + .1vw,.9375rem);
  --fs-body:clamp(1rem,.97rem + .15vw,1.125rem);
  --fs-lead:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --fs-h3:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --fs-h2:clamp(1.75rem,1.4rem + 1.6vw,2.75rem);
  --fs-h1:clamp(2.125rem,1.5rem + 3vw,3.75rem);
  --lh-tight:1.06; --lh-head:1.14; --lh-body:1.6;
  --track-eyebrow:.2em; --track-head:-.025em;

  /* Espaço (base 8) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem; --sp-9:6rem; --sp-10:8rem;
  --section-y:clamp(4.5rem,3rem + 6vw,8rem);   /* respiro vertical entre seções */
  --container:1200px;
  --px:clamp(1.25rem,4vw,2.5rem);
  --header-h:80px;

  /* Raios */
  --r-sm:6px; --r-md:14px; --r-lg:24px; --r-pill:999px;
  --r-btn:10px;               /* botão: canto firme, nada de pílula */

  /* Sombras (frias, baixas) */
  --shadow-sm:0 1px 2px rgba(0,16,48,.06),0 2px 8px rgba(0,16,48,.05);
  --shadow-md:0 8px 24px rgba(0,16,48,.10);
  --shadow-lg:0 20px 48px rgba(0,16,48,.16);

  /* Movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);  /* saída longa e macia (entradas e hover) */
  --dur:.28s;

  /* Botão: uma altura só em todo o site */
  --btn-h:54px; --btn-fs:.9375rem;

  /* Hero */
  --hero-overlay:linear-gradient(180deg,rgba(0,16,48,.55) 0%,rgba(0,16,48,.62) 55%,rgba(0,16,48,.82) 100%);
}
@media (max-width:560px){:root{--btn-h:50px;--btn-fs:.9063rem;--header-h:72px}}