@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-500_800-latin-ext.woff2') format('woff2');
  font-weight: 500 800;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-500_800-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist-400_600-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/geist-400_600-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Diferraço · sistema visual
   Conceito: a barra que vira peça. O vergalhão reto do banner é dobrado ao longo da página;
   a linha de aço no trilho lateral faz as dobras de um estribo entre as seções.
   Cores: grafite de fábrica, concreto, aço. O laranja da marca vive no logo; a ação é um laranja
   mais fechado (#CC3F18, 4,89:1 com branco), usado só nos botões de orçamento. */
:root{
  --grafite:#17191B;
  --grafite-2:#212427;
  --grafite-3:#2B2F33;
  --aco:#8A9096;
  --aco-claro:#C9CDD1;
  --concreto:#EDEBE7;
  --branco:#FFFFFF;
  --texto:#17191B;
  --apoio:#575D63;
  --apoio-escuro:#B4BAC0;
  --marca:#E94E24;
  --acao:#CC3F18;
  --acao-hover:#B33712;

  --titulo:'Archivo', 'Arial Narrow', sans-serif;
  --corpo:'Geist', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --estreita:78%;

  --raio-s:12px;
  --raio:20px;
  --raio-l:28px;
  --pilula:999px;

  --largura:1200px;
  --respiro:clamp(56px, 7vh, 96px);
  --margem:24px;

  --sombra:0 24px 48px -28px rgba(10,12,14,.55);
  --foco:0 0 0 3px var(--branco), 0 0 0 6px var(--acao);
  --nervura:repeating-linear-gradient(118deg, rgba(255,255,255,.028) 0 2px, transparent 2px 15px);
  --nervura-clara:repeating-linear-gradient(118deg, rgba(23,25,27,.035) 0 2px, transparent 2px 15px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--corpo);font-size:16px;line-height:1.55;color:var(--texto);background:var(--concreto);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--foco);border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icone{width:20px;height:20px;flex:none}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
