/* Tema Pistão — oficina: grafite, vermelho, condensada itálica e faixas de sinalização */
@font-face { font-family: "Barlow C"; src: url("/assets/fontes/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --cor: #e10600; --cor-2: #b80500; --fundo: #ffffff; --fundo-2: #f1f2f4; --tinta: #16181c; --texto: #5b616b; --linha: #dfe2e6;
  --raio: 4px; --raio-botao: 2px; --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --titulo: "Barlow C", "Arial Narrow", sans-serif;
  --topo-fundo: rgba(22, 24, 28, .95); --topo-texto: #fff; --rodape-fundo: #0f1013;
}
h1, h2, h3 { text-transform: uppercase; font-style: italic; font-weight: 700; letter-spacing: .005em; line-height: .98; }
h1 { font-size: clamp(3rem, 7.6vw, 6.4rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
h3 { font-size: 1.5rem; }
.botao { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; transform: skewX(-8deg); }
.botao > span, .botao { font-style: normal; }
.botao:hover { transform: skewX(-8deg) translateY(-2px); }
.botao-vazado { color: #fff; border-color: #fff; }
.botao-vazado:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.sobretitulo { display: inline-flex; align-items: center; gap: 10px; }
.sobretitulo::before { content: ""; width: 26px; height: 4px; background: var(--cor); transform: skewX(-20deg); }

.hero { min-height: clamp(600px, 88svh, 880px); display: flex; align-items: center; background-color: #111; background-size: cover; background-position: center calc(50% + var(--desloc, 0px)); position: relative; padding: 120px 0 90px; color: #ddd; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 11, 13, .95) 30%, rgba(10, 11, 13, .55) 65%, rgba(225, 6, 0, .25)); }
.hero::after { content: ""; position: absolute; right: 8%; top: 0; bottom: 0; width: 90px; background: var(--cor); transform: skewX(-14deg); opacity: .85; mix-blend-mode: multiply; }
.hero-texto { position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: var(--cor); }
.hero-sub { font-size: 1.15rem; max-width: 34em; }
.tarja { display: inline-block; background: var(--cor); color: #fff; font-weight: 800; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; padding: 7px 14px; transform: skewX(-12deg); margin-bottom: 20px; }
.botoes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.zebra { height: 18px; background: repeating-linear-gradient(-45deg, var(--cor) 0 22px, var(--tinta) 22px 44px); animation: andar 1.6s linear infinite; background-size: 62px 18px; }
@keyframes andar { to { background-position: 62px 0; } }

.numeros-secao { background: var(--tinta); color: #9aa0a8; padding: 60px 0; }
.numeros strong { color: #fff; font-style: italic; }
.numeros > div { border-left: 4px solid var(--cor); text-align: left; padding-left: 18px; }

.servico { background: #fff; border-radius: var(--raio); overflow: hidden; border-bottom: 4px solid transparent; transition: border-color .3s, transform .3s; box-shadow: 0 16px 30px -24px rgba(0, 0, 0, .35); }
.servico img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s; }
.servico:hover { border-color: var(--cor); transform: translateY(-6px); }
.servico:hover img { transform: scale(1.06); }
.servico > div { padding: 20px 22px 24px; }
.servico p { margin: 0; }

.linha-tempo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 4px; background: repeating-linear-gradient(90deg, var(--cor) 0 18px, transparent 18px 28px); }
.linha-tempo li { position: relative; }
.linha-tempo b { display: grid; place-items: center; width: 60px; height: 60px; background: var(--tinta); color: #fff; font-family: var(--titulo); font-size: 1.5rem; font-style: italic; transform: skewX(-10deg); margin-bottom: 18px; border-bottom: 4px solid var(--cor); }

.moldura-vermelha { aspect-ratio: 4/3; box-shadow: 18px 18px 0 var(--cor); }
.depoimento { border-top: 4px solid var(--cor); border-radius: 0; }
.mapa { border-radius: 0; border: 0; border-left: 6px solid var(--cor); }
.abrir-menu { background: var(--cor) !important; }
.abrir-menu span, .abrir-menu span::before, .abrir-menu span::after { background: #fff !important; }
.abrir-menu[aria-expanded="true"] span { background: transparent !important; }
@media (max-width: 1000px) { .linha-tempo { grid-template-columns: 1fr 1fr; } .linha-tempo::before { display: none; } }
@media (max-width: 840px) { .menu { background: var(--tinta); } .menu a { color: #fff; } .hero::after { display: none; } }
@media (max-width: 580px) { .linha-tempo { grid-template-columns: 1fr; } .botao { transform: none; } }
