/* Marcha Forte Autopeças: estilos da página */
@font-face{font-family:Barlow;src:url(fonts/barlow-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --asfalto:#14181d;--asfalto-2:#20262e;--asfalto-3:#303842;
  --areia:#f6f2e9;--areia-2:#ece6d8;--linha:#d9d2c2;--branco:#fff;
  --tinta:#191d22;--tinta-2:#50565e;
  --sol:#f5b021;--sol-claro:#fff4d8;
  --barro:#b23c14;--barro-esc:#8f2e0d;
  --zap:#0e7a43;--zap-esc:#0a5f34;
  --sombra:0 1px 2px rgba(20,24,29,.06),0 8px 24px rgba(20,24,29,.08);
  --raio:14px;--gutter:20px;--header:64px;
  --titulo:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--areia);color:var(--tinta);font:400 17px/1.55 Barlow,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;overflow-wrap:break-word}
img,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--barro);outline-offset:2px;border-radius:4px}
.sobre-escuro :focus-visible,.topo :focus-visible,.heroi :focus-visible,.passos :focus-visible,.rodape :focus-visible{outline-color:var(--sol)}
.pular{position:absolute;left:12px;top:-60px;z-index:60;background:var(--sol);color:var(--asfalto);padding:10px 14px;border-radius:8px;font-weight:700}
.pular:focus{top:8px}
.limite{width:min(1180px,100%);margin-inline:auto;padding-inline:var(--gutter)}

h1,h2,h3{font-family:var(--titulo);font-weight:800;line-height:1.05;letter-spacing:.005em}
h2{font-size:clamp(32px,4.4vw,46px);text-transform:uppercase}
.sub{color:var(--tinta-2);max-width:62ch;margin-top:8px}
.secao{padding-block:clamp(48px,7vw,84px)}
.cab-secao{margin-bottom:clamp(24px,3.4vw,36px)}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 20px;border-radius:10px;border:2px solid transparent;font-family:var(--titulo);font-weight:700;font-size:20px;line-height:1.1;letter-spacing:.02em;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn svg{flex:none;width:21px;height:21px;fill:currentColor}
.btn:active{transform:translateY(1px)}
.btn-comprar{background:var(--barro);color:#fff}
.btn-comprar:hover{background:var(--barro-esc)}
.btn-zap{background:#fff;color:var(--zap-esc);border-color:var(--zap)}
.btn-zap:hover{background:var(--zap);color:#fff}
.btn-zap-cheio{background:var(--zap);color:#fff}
.btn-zap-cheio:hover{background:var(--zap-esc)}
.btn-sol{background:var(--sol);color:var(--asfalto)}
.btn-sol:hover{background:#ffc445}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:40;background:var(--asfalto);color:#fff;border-bottom:1px solid var(--asfalto-3)}
.topo .limite{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header)}
.marca{display:block;flex:none}
.marca img{height:44px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:#e9e6df;text-decoration:none;font-weight:500;font-size:16px;padding:6px 0;border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:#fff;border-color:var(--sol)}
.topo .btn{min-height:42px;padding:6px 14px;font-size:18px;white-space:nowrap}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;border:1px solid var(--asfalto-3)}
.menu summary::-webkit-details-marker{display:none}
.menu svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none}
.menu ul{position:absolute;right:0;top:52px;min-width:210px;background:var(--asfalto-2);border:1px solid var(--asfalto-3);border-radius:10px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.menu a{display:block;padding:12px;color:#fff;text-decoration:none;border-radius:6px}
.menu a:hover{background:var(--asfalto-3)}

/* Primeira tela */
.heroi{background:var(--asfalto);color:#fff;padding-block:22px 28px;position:relative}
.heroi-cab{display:flex;align-items:baseline;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;margin-bottom:18px}
.heroi h1{font-size:clamp(29px,3.6vw,44px);text-transform:uppercase}
.heroi h1 em{font-style:normal;color:var(--sol)}
.heroi-cab p{color:#cfccc4;font-size:16px;flex-basis:100%}
.vitrine-topo{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:14px}
.destaque{background:#fff;color:var(--tinta);border-radius:var(--raio);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow:hidden}
.destaque-foto{display:flex;align-items:center;justify-content:center;padding:14px;background:#fff}
.destaque-foto img{width:100%;max-height:390px;object-fit:contain}
.destaque-info{padding:22px 24px;display:flex;flex-direction:column;gap:10px;justify-content:center;border-left:1px solid var(--areia-2)}
.etiqueta{font-weight:700;font-size:14px;color:var(--barro);letter-spacing:.02em}
.destaque h2{font-size:clamp(25px,2.6vw,33px);text-transform:none;line-height:1.08}
.aplica-curta{font-size:15.5px;color:var(--tinta-2)}
.preco{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.preco strong{font-family:var(--titulo);font-weight:800;font-size:40px;line-height:1.05;color:var(--tinta)}
.acoes{display:flex;flex-direction:column;gap:8px}
.destaque-foto{grid-row:1/3}
.destaque-info{justify-content:flex-end;padding-bottom:12px}
.destaque-acoes{grid-column:2;padding:0 24px 22px;border-left:1px solid var(--areia-2)}
.outros{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.mini{display:grid;grid-template-columns:112px minmax(0,1fr);background:#fff;color:var(--tinta);border-radius:var(--raio);overflow:hidden;text-decoration:none;transition:transform .2s,box-shadow .2s}
.mini:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.mini img{width:112px;height:100%;min-height:124px;object-fit:contain;padding:8px;background:#fff}
.mini div{padding:12px 14px 12px 6px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.mini h2{font-size:21px;text-transform:none;line-height:1.08}
.mini .valor{font-family:var(--titulo);font-weight:800;font-size:26px;line-height:1.15}
.mini .ver{color:var(--barro);font-weight:700;font-size:15px}
.faixa-estrada{height:6px;background:repeating-linear-gradient(90deg,var(--sol) 0 44px,transparent 44px 76px),var(--asfalto)}

/* Vitrine */
.produtos{display:grid;gap:clamp(24px,3vw,36px)}
.produto{background:#fff;border:1px solid var(--areia-2);border-radius:18px;box-shadow:var(--sombra);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.produto-midia{padding:clamp(14px,2vw,24px);border-right:1px solid var(--areia-2);display:flex;flex-direction:column;gap:14px;min-width:0}
.produto-info{padding:clamp(18px,2.6vw,32px);display:flex;flex-direction:column;gap:14px;min-width:0}
.produto h3{font-size:clamp(29px,3vw,38px)}
.beneficios li{position:relative;padding:5px 0 5px 28px}
.beneficios li::before{content:"";position:absolute;left:2px;top:12px;width:15px;height:9px;border-left:3px solid var(--barro);border-bottom:3px solid var(--barro);transform:rotate(-45deg) scale(.82)}
.atencao{background:var(--sol-claro);border-left:4px solid var(--sol);padding:11px 14px;border-radius:0 8px 8px 0;font-size:15.5px}
.atencao b{display:block}
.atencao li{padding-block:1px}
.produto .acoes{gap:10px}

/* Galeria */
.galeria{position:relative}
.trilho{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:10px;background:#fff;border:1px solid var(--areia-2)}
.trilho::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:#fff}
.slide img{width:100%;height:100%;object-fit:contain}
.seta{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(20,24,29,.82);cursor:pointer;transition:background-color .18s,opacity .18s}
.seta:hover{background:var(--asfalto)}
.seta[disabled]{opacity:.25;cursor:default}
.seta svg{width:20px;height:20px;stroke:#fff;stroke-width:2.6;fill:none}
.seta.ant{left:10px}.seta.prox{right:10px}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.miniaturas button{padding:0;width:64px;height:64px;border:2px solid var(--areia-2);border-radius:8px;background:#fff;overflow:hidden;cursor:pointer;transition:border-color .18s}
.miniaturas button:hover{border-color:var(--tinta-2)}
.miniaturas button[aria-current="true"]{border-color:var(--barro)}
.miniaturas img{width:100%;height:100%;object-fit:contain}

/* Vídeo */
.demo h4{font-family:var(--titulo);font-size:22px;font-weight:800;margin-bottom:8px}
.demo-quadro{position:relative;aspect-ratio:16/9;background:var(--asfalto);border-radius:10px;overflow:hidden}
.demo-quadro video,.demo-quadro iframe{width:100%;height:100%;border:0;object-fit:contain;background:#000}
.demo-capa{position:absolute;inset:0;padding:0;border:0;width:100%;height:100%;background:#000;cursor:pointer}
.demo-capa img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .2s}
.demo-capa:hover img{opacity:1}
.demo-capa span{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--barro);display:grid;place-items:center}
.demo-capa svg{width:30px;height:30px;fill:#fff;margin-left:4px}

/* Acordeões */
.abre{border-top:1px solid var(--areia-2)}
.abre:last-of-type{border-bottom:1px solid var(--areia-2)}
.abre summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:10px 0;font-weight:700}
.abre summary::-webkit-details-marker{display:none}
.abre summary::after{content:"";flex:none;width:10px;height:10px;margin-right:5px;border-right:2.5px solid var(--barro);border-bottom:2.5px solid var(--barro);transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.abre[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.abre-corpo{padding-bottom:14px;font-size:16px}
.detalhes-grupo{display:grid;gap:0}
.aplic{margin-bottom:12px}
.aplic h4{font-family:var(--titulo);font-weight:800;font-size:19px;margin-bottom:2px;color:var(--barro-esc)}
.aplic li{display:flex;justify-content:space-between;gap:16px;padding:5px 0;border-bottom:1px dotted var(--linha)}
.aplic li span{flex:none;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.nota{font-size:14.5px;color:var(--tinta-2);margin-top:8px}
.itens li{padding:3px 0}
.fatos{display:grid;grid-template-columns:auto 1fr;gap:3px 14px}
.fatos dt{font-weight:700}.fatos dd{margin:0}

/* Como comprar */
.passos{background:var(--asfalto);color:#fff}
.passos .sub{color:#cfccc4}
.passos ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:p}
.passos li{counter-increment:p;background:var(--asfalto-2);border:1px solid var(--asfalto-3);border-radius:var(--raio);padding:24px}
.passos li::before{content:counter(p);display:grid;place-items:center;width:46px;height:52px;margin-bottom:14px;background:var(--sol);color:var(--asfalto);font:800 26px/1 var(--titulo);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.passos h3{font-size:27px;margin-bottom:6px}
.passos li p{color:#dad7cf;font-size:16px}
.passos .faixa-estrada{margin-bottom:0}

/* Diferenciais */
.difs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.difs li{background:#fff;border:1px solid var(--areia-2);border-top:4px solid var(--sol);border-radius:10px;padding:20px}
.difs h3{font-size:24px;margin-bottom:6px}
.difs p{font-size:16px;color:var(--tinta-2)}

/* Sobre */
.sobre{background:var(--areia-2)}
.sobre .limite{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.sobre p+p{margin-top:12px}
.cartao{background:#fff;border-radius:var(--raio);padding:22px;display:flex;flex-direction:column;gap:12px}
.cartao h3{font-size:26px}
.cartao a:not(.btn){color:var(--barro-esc);font-weight:500}

/* FAQ */
.faq{max-width:820px}
.faq .abre summary{font-size:18px;padding-block:14px}
.faq .abre-corpo{color:#33383e}
.faq .abre-corpo p+p{margin-top:8px}

/* Rodapé */
.rodape{background:var(--asfalto);color:#d9d6ce;font-size:16px}
.rodape-grade{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px;padding-block:44px 28px}
.rodape img{height:48px;width:auto;margin-bottom:12px}
.rodape h2{font-size:20px;color:#fff;margin-bottom:10px;text-transform:none}
.rodape li{padding:4px 0}
.rodape a{color:#d9d6ce;text-underline-offset:3px}
.rodape a:hover{color:#fff}
.rodape-fim{border-top:1px solid var(--asfalto-3);padding-block:16px;font-size:14px;color:#b9b6ae}

/* Revelação discreta */
.js .surge{opacity:0;transform:translateY(14px)}
.js .surge.visto{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
@media (prefers-reduced-motion:reduce){
  .js .surge{opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
}

/* Responsivo */
@media (max-width:1000px){
  .rodape-grade{grid-template-columns:1fr 1fr}
  .nav{gap:18px}
}
@media (max-width:900px){
  .vitrine-topo{grid-template-columns:1fr}
  .outros{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .produto{grid-template-columns:1fr}
  .produto-midia{border-right:0;border-bottom:1px solid var(--areia-2)}
  .sobre .limite{grid-template-columns:1fr}
  .passos ol{grid-template-columns:1fr}
  .passos li{display:grid;grid-template-columns:46px 1fr;column-gap:16px;padding:18px}
  .passos li::before{grid-row:span 2;margin:0}
}
@media (max-width:760px){
  :root{--header:56px;--gutter:16px}
  body{font-size:16.5px}
  .nav{display:none}
  .menu{display:block}
  .marca img{height:38px}
  .topo .limite{gap:8px}
  .topo .btn{margin-left:auto}
  .heroi{padding-block:12px 16px}
  .heroi-cab{margin-bottom:10px}
  .heroi-cab p{display:none}
  .heroi h1{font-size:26px}
  .vitrine-topo{gap:10px}
  .destaque{grid-template-columns:38% minmax(0,1fr)}
  .destaque-foto{grid-row:auto;padding:8px;border-bottom:0}
  .destaque-acoes{border-left:0}
  .destaque-foto img{max-height:none}
  .destaque-info{padding:12px;gap:6px;justify-content:flex-start}
  .etiqueta{font-size:13px}
  .destaque h2{font-size:22px}
  .aplica-curta{font-size:14px;line-height:1.35}
  .destaque .preco strong{font-size:32px;order:3;flex-basis:100%}
  .destaque .acoes{grid-column:1/-1;padding:0 12px 12px}
  .destaque .btn{min-height:48px;font-size:19px}
  .outros{gap:10px}
  .mini{grid-template-columns:1fr}
  .mini img{width:100%;height:96px;min-height:0;padding:6px}
  .mini div{padding:0 10px 10px}
  .mini h2{font-size:18px}
  .mini .valor{font-size:23px}
  .mini .ver{font-size:14px}
  .difs{grid-template-columns:1fr}
  .rodape-grade{grid-template-columns:1fr}
  .seta{width:40px;height:40px;margin-top:-20px}
  .miniaturas button{width:56px;height:56px}
}
@media (max-width:400px){
  .topo .btn span{display:none}
  .topo .btn{padding:6px 12px}
}