/* =====================================================================
   FAST MOTOS — sistema do site institucional
   Vermelho manda, preto segura, creme respira, amarelo grita.
   Este arquivo é compartilhado por todas as páginas.
   ===================================================================== */
:root{
  --creme:#fff7ee;
  --creme-2:#ffeede;
  --preto:#0f0e0d;
  --preto-70:rgba(15,14,13,.70);
  --preto-45:rgba(15,14,13,.45);
  --vermelho:#e4231a;
  --amarelo:#ffc83d;
  --zap:#25d366;
  --r:14px; --r-lg:26px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--creme);color:var(--preto);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-weight:800;line-height:.98;letter-spacing:-.035em;
  font-variation-settings:'opsz' 72;
}
.wrap{width:min(1200px,92vw);margin-inline:auto}
.wrap-sm{width:min(880px,92vw);margin-inline:auto}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:16px;padding:16px 28px;border-radius:999px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background .18s,color .18s,border-color .18s;
}
.btn-v{background:var(--vermelho);color:#fff}
.btn-v:hover{background:var(--preto);transform:translateY(-2px)}
.btn-p{background:var(--preto);color:var(--creme)}
.btn-p:hover{background:var(--vermelho);transform:translateY(-2px)}
.btn-o{border-color:var(--preto);color:var(--preto)}
.btn-o:hover{background:var(--preto);color:var(--creme);transform:translateY(-2px)}
.btn-c{background:var(--creme);color:var(--preto)}
.btn-c:hover{background:var(--amarelo);transform:translateY(-2px)}
.btn svg{flex:none}

/* ---------- cabeçalho ---------- */
header{position:sticky;top:0;z-index:60;background:var(--creme);border-bottom:2px solid var(--preto)}
.head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0}
.logo img{height:31px;width:auto}
nav{display:flex;gap:26px;font-size:15px;font-weight:600}
nav a{position:relative;padding:3px 0;white-space:nowrap}
nav a::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--vermelho);transition:width .25s}
nav a:hover::after,nav a[aria-current="page"]::after{width:100%}
nav a[aria-current="page"]{color:var(--vermelho)}
.head .btn{padding:11px 20px;font-size:14.5px}
.menu-btn{display:none;background:none;border:2px solid var(--preto);border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px;cursor:pointer}

/* ---------- topo de página interna ---------- */
.topo{padding:clamp(44px,5.5vw,80px) 0 clamp(30px,3.5vw,48px);border-bottom:2px solid var(--preto);background:var(--creme-2)}
.topo .kick{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--vermelho);margin-bottom:14px}
.topo h1{font-size:clamp(38px,6vw,76px);margin-bottom:16px;max-width:16ch}
.topo p{font-size:clamp(16px,1.5vw,20px);color:var(--preto-70);max-width:60ch}

/* ---------- seções ---------- */
section{padding:clamp(54px,6.5vw,96px) 0}
.cab{max-width:820px;margin-bottom:clamp(30px,4vw,50px)}
.cab .kick{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--vermelho);margin-bottom:13px}
.cab h2{font-size:clamp(30px,4.6vw,60px);margin-bottom:15px}
.cab p{font-size:clamp(16px,1.45vw,19px);color:var(--preto-70)}

/* ---------- cards ---------- */
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{border:3px solid var(--preto);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;background:var(--creme);transition:transform .2s}
.card:hover{transform:translateY(-5px)}
.card.c-v{background:var(--vermelho);color:#fff}
.card.c-p{background:var(--preto);color:var(--creme)}
.card.c-a{background:var(--amarelo);color:var(--preto)}
.card .num{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:800;opacity:.72;margin-bottom:18px;letter-spacing:.04em;text-transform:uppercase}
.card h3{font-size:clamp(22px,2.3vw,30px);margin-bottom:10px}
.card p{font-size:16px;opacity:.9;margin-bottom:18px;flex:1}
.card a.mais{font-weight:700;font-size:15.5px;border-bottom:2px solid currentColor;padding-bottom:2px;align-self:flex-start}

/* ---------- ticker ---------- */
.ticker{background:var(--vermelho);color:#fff;border-block:3px solid var(--preto);overflow:hidden;padding:14px 0}
.ticker-in{display:flex;width:max-content;animation:corre 34s linear infinite}
.ticker b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(16px,1.9vw,23px);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:32px;padding-right:32px}
.ticker b::after{content:"●";color:var(--amarelo);font-size:.55em}
@keyframes corre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-in{animation:none}}

/* ---------- listas ---------- */
.lista{list-style:none}
.lista li{display:flex;gap:12px;padding:13px 0;border-bottom:2px solid rgba(15,14,13,.14);font-size:16.5px}
.lista li:last-child{border-bottom:0}
.lista li b.mk{flex:none;width:23px;height:23px;border-radius:50%;background:var(--preto);color:var(--amarelo);display:grid;place-items:center;font-size:12px;margin-top:2px}

/* ---------- faq ---------- */
.faq details{border:3px solid var(--preto);border-radius:var(--r);margin-bottom:11px;background:var(--creme);overflow:hidden}
.faq details[open]{background:var(--creme-2)}
.faq summary{cursor:pointer;list-style:none;padding:19px 54px 19px 20px;position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(17px,1.6vw,21px);letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;translate:0 -50%;font-size:28px;line-height:1;color:var(--vermelho);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .r{padding:0 20px 20px;color:var(--preto-70);font-size:16.5px}

/* ---------- faixa de foto ---------- */
.faixa{position:relative;min-height:clamp(300px,38vw,460px);display:grid;place-items:center;text-align:center;overflow:hidden;color:#fff;border-block:3px solid var(--preto)}
.faixa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.faixa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(228,35,26,.42),rgba(15,14,13,.80))}
.faixa .in{position:relative;z-index:2;width:min(820px,88vw);padding:52px 0}
.faixa h2{font-size:clamp(28px,4.2vw,54px);margin-bottom:14px}
.faixa p{font-size:clamp(16px,1.5vw,19px);color:rgba(255,255,255,.88)}

/* ---------- cta ---------- */
.cta{background:var(--vermelho);color:#fff;text-align:center;border-top:3px solid var(--preto)}
.cta h2{font-size:clamp(32px,5.2vw,72px);margin-bottom:16px}
.cta h2 mark{background:var(--amarelo);color:var(--preto);padding:0 .1em;border-radius:6px}
.cta p{font-size:clamp(16px,1.5vw,19px);color:rgba(255,255,255,.9);margin-bottom:30px;max-width:56ch;margin-inline:auto}

/* ---------- rodapé ---------- */
footer{background:var(--preto);color:rgba(255,247,238,.6);padding:52px 0 40px;font-size:14.5px}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.f-top img{height:27px;margin-bottom:13px;filter:brightness(0) invert(1);opacity:.9}
.f-top h4{font-family:'Archivo',sans-serif;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--creme);margin-bottom:13px;font-weight:700}
.f-top a{display:block;padding:4px 0}
.f-top a:hover{color:var(--amarelo)}
.f-end{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,247,238,.16);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,247,238,.42)}

/* ---------- zap fixo ---------- */
.zap-fixo{position:fixed;right:18px;bottom:18px;z-index:70;width:58px;height:58px;border-radius:50%;background:var(--zap);color:#fff;display:grid;place-items:center;border:3px solid var(--preto);transition:transform .2s}
.zap-fixo:hover{transform:scale(1.09)}

/* ---------- utilidades ---------- */
.legenda{margin-top:12px;font-size:13px;color:var(--preto-45)}
.up{opacity:0;transform:translateY(20px)}
.up.on{opacity:1;transform:none;transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.foto-q{border:3px solid var(--preto);border-radius:var(--r-lg);overflow:hidden;background:var(--creme-2)}
.foto-q img{width:100%;object-fit:cover}

@media (max-width:1040px){
  .grade-3,.grade-2{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  nav{
    position:absolute;top:100%;left:0;right:0;background:var(--creme);
    border-bottom:2px solid var(--preto);flex-direction:column;gap:0;padding:8px 4vw 16px;display:none;
  }
  nav.aberto{display:flex}
  nav a{padding:12px 0;border-bottom:1px solid rgba(15,14,13,.12);font-size:17px}
  .menu-btn{display:block}
  header{position:sticky}
}
@media (max-width:640px){
  body{font-size:16px}
  .head .btn span{display:none}
  .head .btn{padding:11px 13px}
  .f-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.up{opacity:1;transform:none}}

/* ---------- pastilhas de cidade no cabeçalho (nunca escondidas no menu) ---------- */
.cidades-topo{display:flex;gap:8px;margin-right:auto;margin-left:6px}
.cidades-topo a{
  font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:999px;
  border:2px solid var(--preto);white-space:nowrap;transition:background .18s,color .18s;
}
.cidades-topo a:hover{background:var(--preto);color:var(--creme)}
.cidades-topo a[aria-current="page"]{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
@media (max-width:900px){
  .cidades-topo a{font-size:12.5px;padding:6px 11px}
  .cidades-topo{margin-left:4px;gap:6px}
}
@media (max-width:560px){
  .cidades-topo a:last-child{display:none}
  .logo img{height:26px}
}