/* OficinaTruck: site comercial. Mesma base do sistema: Archivo, azul da placa Mercosul, superfícies planas.
   Tela cheia: faixas de ponta a ponta; o conteúdo usa até 1360 px. */
:root{
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --azul:#003DA5;--azul-esc:#002B75;--azul-cl:#8FB3E8;--ink:#14202C;--mut:#536170;--linha:#D3D9E0;--fundo:#F1F3F5;--card:#fff;
  --asfalto:#0F151C;--asfalto2:#1A232D;--asfalto3:#26313D;--claro-txt:#E8EDF2;--claro-mut:#A9B6C3;
  --amarelo:#F2C94C;--laranja:#F2994A;--vermelho:#E5484D;--ok:#1E8A55;--larg:1360px;
  color-scheme:light
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fundo);color:var(--ink);font:400 17px/1.55 var(--f)}
h1,h2,h3{font-family:var(--f);font-stretch:78%;font-weight:750;line-height:1.06;margin:0}
h2{font-size:clamp(30px,3.6vw,48px)}
h3{font-size:21px;font-stretch:85%}
p{margin:0}
a{color:var(--azul)}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}
.pular{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:30}
.pular:focus{left:8px}
.dentro{max-width:var(--larg);margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.faixa{padding:clamp(56px,7vw,104px) 0}
.faixa.clara{background:#fff}
.faixa.escura{background:var(--asfalto);color:var(--claro-txt)}
.sub{color:var(--mut);margin-top:12px;font-size:18px;max-width:46em}

/* Placa Mercosul: o elemento de marca */
.placa{display:inline-flex;flex-direction:column;background:#fff;border:2px solid #000;border-radius:5px;overflow:hidden;line-height:1;color:#000}
.placa i{display:block;background:var(--azul);color:#fff;font:700 7px/1 var(--f);letter-spacing:.18em;text-align:center;padding:2px 6px;font-style:normal}
.placa b{display:block;font:800 17px/1 var(--f);font-stretch:62%;letter-spacing:.09em;padding:3px 7px 2px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:8px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:650 16px var(--f);text-decoration:none;cursor:pointer}
.btn.pri{background:var(--azul);border-color:var(--azul);color:#fff}
.btn.pri:hover{background:var(--azul-esc);border-color:var(--azul-esc)}
.btn.claro{border-color:rgba(255,255,255,.55);color:#fff}
.btn.claro:hover{background:rgba(255,255,255,.08)}
.btn.fantasma{border-color:transparent;color:inherit}
.btn.grande{min-height:56px;font-size:18px;padding:12px 28px}
.btn:disabled{opacity:.6;cursor:wait}

/* Topo: escuro, emenda com o hero */
.topo{position:sticky;top:0;z-index:20;background:rgba(15,21,28,.92);backdrop-filter:blur(8px);color:var(--claro-txt);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{max-width:var(--larg);margin:0 auto;padding:10px clamp(16px,3vw,40px);display:flex;align-items:center;gap:28px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca-nome{font:700 23px var(--f);font-stretch:80%;letter-spacing:-.01em}
.marca-nome strong{color:var(--azul-cl);font-weight:800}
.menu{display:flex;gap:26px;list-style:none;margin:0 auto 0 12px;padding:0}
.menu a{color:var(--claro-txt);text-decoration:none;font-weight:550;opacity:.85}
.menu a:hover{opacity:1}
.nav-acoes{display:flex;gap:8px;margin-left:auto}

/* Hero: o Scania real em tela cheia */
.hero{background:radial-gradient(120% 90% at 70% 40%,var(--asfalto3) 0%,var(--asfalto2) 45%,var(--asfalto) 100%);color:var(--claro-txt);overflow:hidden}
.hero-in{max-width:1600px;margin:0 auto;min-height:calc(100svh - 64px);display:grid;grid-template-columns:minmax(360px,5fr) minmax(0,8fr);align-items:center;gap:0 8px;padding:24px clamp(16px,3vw,40px) 32px}
.hero h1{font-size:clamp(40px,5.2vw,82px);letter-spacing:-.01em}
.hero h1 span{display:block}
.hero h1 .hero-fim{color:var(--azul-cl)}
.lead{font-size:clamp(17px,1.4vw,20px);color:var(--claro-mut);margin-top:22px;max-width:30em}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mini{font-size:14px;color:var(--claro-mut);margin-top:12px}
.palco{margin:0;position:relative;height:min(78svh,780px);min-height:420px}
.v3d{position:absolute;inset:0;cursor:grab;touch-action:none}
.v3d:active{cursor:grabbing}
.poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;color:#7F91A3;transition:opacity .5s}
.poster svg{width:48%;opacity:.45}
.poster.some{opacity:0}
.credito{position:absolute;right:8px;bottom:6px;font-size:11.5px;color:#7F91A3}
.ficha-peca{position:absolute;left:clamp(0px,2vw,24px);bottom:34px;width:min(360px,92%);background:rgba(15,21,28,.88);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 18px;backdrop-filter:blur(6px)}
.fp-dica{color:var(--claro-mut);font-size:15px}
.fp-dica b{color:#fff}
.fp-corpo h2{font-size:26px;color:#fff}
.fp-sis{color:var(--amarelo);font-weight:650;font-size:14px;margin:4px 0 8px}
.fp-corpo p:not(.fp-sis){color:var(--claro-mut);font-size:15px}
.fp-sev{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fp-sev button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:600 13.5px var(--f);cursor:pointer}
.fp-sev button[aria-pressed=true]{background:#fff;color:var(--ink);border-color:#fff}
.fp-sev i{width:10px;height:10px;border-radius:50%;display:inline-block}
.fp-cont{font-size:13px;color:var(--claro-mut);margin-top:10px}
.fp-cont:empty{display:none}
.s-leve{background:var(--amarelo)}.s-mod{background:var(--laranja)}.s-grave{background:var(--vermelho)}

/* Dores */
.dores-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 48px;margin-top:36px}
.dor{border-top:3px solid var(--ink);padding-top:18px}
.dor h3{font-size:24px}
.dor p{color:var(--mut);margin-top:10px}

/* Galeria em carrossel (arrastar para o lado) */
.galeria{background:var(--asfalto2);color:var(--claro-txt);padding:clamp(56px,7vw,104px) 0}
.galeria .sub{color:var(--claro-mut)}
.gal-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.gal-bts{display:flex;gap:8px}
.gal-bt{width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:400 30px/1 var(--f);cursor:pointer}
.gal-bt:hover{background:rgba(255,255,255,.1)}
.trilho{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:36px max(clamp(16px,3vw,40px),calc((100vw - var(--larg)) / 2 + clamp(16px,3vw,40px))) 20px;scrollbar-width:none;overscroll-behavior-x:contain}
.trilho::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(1000px,86vw);margin:0;scroll-snap-align:center}
.slide.cel{flex-basis:min(330px,72vw)}
.moldura-pc{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#fff}
.moldura-pc::before{content:"";display:block;height:26px;background:#2B3644 radial-gradient(circle at 16px 13px,#E5484D 4px,transparent 5px),radial-gradient(circle at 32px 13px,#F2C94C 4px,transparent 5px),radial-gradient(circle at 48px 13px,#1E8A55 4px,transparent 5px)}
.moldura-cel{border:10px solid #0B0F14;border-radius:34px;overflow:hidden;background:#fff;max-height:620px}
.moldura-cel img{width:100%;height:auto}
.slide figcaption{margin-top:14px;color:var(--claro-mut);font-size:16px}
.slide figcaption b{display:block;color:#fff;font-size:19px;font-stretch:85%}
.pontos{display:flex;justify-content:center;gap:8px;margin-top:10px}
.pontos button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.3);padding:0;cursor:pointer}
.pontos button[aria-current=true]{background:#fff;width:26px;border-radius:99px}

/* Como funciona */
.como-grade{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px 64px;align-items:start}
.passos{list-style:none;margin:0;padding:0;counter-reset:p}
.passos li{counter-increment:p;display:grid;grid-template-columns:64px 1fr;gap:2px 16px;padding:22px 0;border-bottom:1px solid var(--linha)}
.passos li:first-child{padding-top:4px}
.passos li::before{content:counter(p);grid-row:span 2;font:800 48px/1 var(--f);font-stretch:62%;color:var(--azul)}
.passos b{font-size:22px;font-stretch:85%}
.passos span{color:var(--mut)}

/* Recursos */
.lista-rec{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 40px}
.lista-rec li{color:var(--mut);font-size:16px;border-left:3px solid var(--azul);padding-left:16px}
.lista-rec b{display:block;color:var(--ink);font-size:19px;font-stretch:85%;margin-bottom:6px}

/* Preços */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0 12px;align-items:stretch}
.plano{background:var(--fundo);border:1px solid var(--linha);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:8px;position:relative}
.plano.rec{border:2px solid var(--azul);background:#fff}
.selo{position:absolute;top:-13px;left:24px;background:var(--azul);color:#fff;font-size:13px;font-weight:650;padding:3px 10px;border-radius:99px}
.preco{font:800 46px/1 var(--f);font-stretch:70%}
.preco small{font-size:17px;font-weight:500;color:var(--mut);font-stretch:100%}
.para{color:var(--mut)}
.plano ul{margin:10px 0 20px;padding-left:20px;flex:1}
.plano li{margin:6px 0}

/* Teste grátis */
.teste-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:start;justify-content:space-between}
.teste h2{color:#fff}
.teste-txt p{color:var(--claro-mut);margin-top:16px;font-size:19px;max-width:30em}
.garantias{margin:26px 0 0;padding:0;list-style:none}
.garantias li{padding:9px 0 9px 32px;position:relative}
.garantias li::before{content:"";position:absolute;left:2px;top:14px;width:16px;height:9px;border-left:3px solid #4BC489;border-bottom:3px solid #4BC489;transform:rotate(-45deg)}
.form-conta{background:#fff;color:var(--ink);border-radius:14px;padding:28px;display:grid;gap:6px}
.form-conta label{font-weight:600;font-size:15px;margin-top:6px}
.form-conta input:not([type=checkbox]){font:inherit;font-size:17px;padding:12px 13px;border:1px solid #B9C2CC;border-radius:8px;background:#fff;width:100%}
.form-conta input:focus{border-color:var(--azul)}
.aceite{display:flex;gap:10px;align-items:flex-start;font-weight:450!important;margin-top:12px!important}
.aceite input{width:20px;height:20px;margin-top:2px;accent-color:var(--azul);flex:none}
.erro{color:#B42318;font-weight:600;min-height:1.2em}
.form-conta .mini{color:var(--mut)}

/* Perguntas */
.estreito{max-width:900px}
.faq h2{margin-bottom:22px}
.faq details{border-top:1px solid var(--linha);padding:4px 0}
.faq details:last-of-type{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;font-weight:650;font-size:19px;padding:16px 0}
.faq details p{color:var(--mut);padding:0 0 18px}

.rodape{background:var(--asfalto);color:var(--claro-mut);padding:40px 0}
.rod-grade{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center}
.rodape .marca-nome{color:#fff}
.rodape nav{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
.rodape a{color:var(--claro-txt)}
.rodape small{flex-basis:100%;font-size:13.5px}

/* Telas médias e celular */
@media (max-width:1100px){
  .hero-in{grid-template-columns:1fr;min-height:0;padding-top:36px}
  .palco{height:min(72vw,560px);min-height:360px}
  .lista-rec{grid-template-columns:repeat(2,1fr)}
  .como-grade,.teste-grade{grid-template-columns:1fr}
}
@media (max-width:900px){
  .menu{display:none}
  .nav{gap:12px}
  .nav-acoes .btn{min-height:42px;padding:8px 14px}
  .dores-grade,.planos{grid-template-columns:1fr}
  .gal-bts{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .marca .placa{display:none}
  .nav-acoes .fantasma{display:none}
  .lista-rec{grid-template-columns:1fr}
  .acoes .btn{flex:1 1 100%}
  .palco{height:118vw;min-height:420px}
  .ficha-peca{left:0;right:0;width:auto;bottom:26px;padding:12px 14px}
  .fp-corpo h2{font-size:21px}
  .slide{flex-basis:88vw}
  .slide.cel{flex-basis:76vw}
}

/* Ajustes: a ficha da peça vira uma faixa embaixo do caminhão (não cobre o modelo) e as marcas ficam dentro do 3D */
.v3d{overflow:hidden}
.hero h1{font-size:clamp(40px,4.4vw,74px)}
@media (min-width:1101px){
  .v3d{bottom:132px}
  .credito{bottom:auto;top:6px}
  .ficha-peca{left:0;right:0;width:auto;bottom:12px;min-height:108px;display:flex;flex-direction:column;justify-content:center}
  .fp-corpo{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,2fr) auto;grid-template-areas:"nome info sev" "sis info sev";align-items:center;gap:2px 22px}
  .fp-corpo h2{grid-area:nome;font-size:24px}
  .fp-sis{grid-area:sis;margin:0!important}
  #fpInfo{grid-area:info}
  .fp-sev{grid-area:sev;margin:0;flex-wrap:nowrap}
}
@media (max-width:1100px){
  .palco{display:block}
  .v3d{position:relative;inset:auto;min-height:300px}
  .poster{bottom:auto;height:60%}
  .ficha-peca{position:relative;left:auto;bottom:auto;width:auto;margin-top:10px}
  .credito{position:static;margin-top:6px;text-align:right}
  .palco{height:auto;min-height:0}
  .v3d{height:min(70vw,520px)}
}
@media (max-width:560px){.v3d{height:88vw;min-height:300px}}@media (max-width:560px){.slide.cel{order:-1}}
.gal-carregando{color:var(--claro-mut);padding:40px 0}


/* Galeria com tamanho fixo: as fotos não encolhem nem esticam conforme a tela.
   Computador: tela do escritório em 960 x 600 e tela do celular em 300 x 650.
   Celular: só as fotos feitas no celular, no tamanho delas (as do computador ficariam ilegíveis). */
.trilho{align-items:flex-start}
.slide{flex:0 0 960px;width:960px}
.slide.cel{flex:0 0 300px;width:300px}
.moldura-pc{width:960px;height:626px}
.moldura-pc img{width:960px;height:600px;max-width:none;object-fit:cover;object-position:left top}
.moldura-cel{width:300px;height:650px;max-height:none}
.moldura-cel img{width:280px;height:630px;max-width:none;object-fit:cover;object-position:center top}
@media (max-width:1100px){
  .slide{flex-basis:720px;width:720px}
  .moldura-pc{width:720px;height:476px}
  .moldura-pc img{width:720px;height:450px}
}
@media (max-width:760px){
  .slide:not(.cel){display:none}
  .slide.cel{flex:0 0 280px;width:280px}
  .moldura-cel{width:280px;height:606px}
  .moldura-cel img{width:260px;height:586px}
  .gal-pc-aviso{display:block!important}
}
.gal-pc-aviso{display:none;color:var(--claro-mut);font-size:14.5px;margin-top:10px}
/* Logo OficinaTruck: o O de Oficina é um pneu (aro, cubo e furos). Sem placa. */
.logo{display:inline-flex;align-items:center;font:800 27px/1 var(--f);font-stretch:78%;letter-spacing:-.012em;color:var(--logo-txt,#fff);white-space:nowrap;
  --logo-aro:currentColor;--logo-cubo:#8FB3E8;--logo-furo:#0F151C;--logo-truck:#8FB3E8}
.logo-o{width:.8em;height:.8em;flex:none;margin:0 .015em 0 0;transform:translateY(.02em)}
.lo-aro{stroke:var(--logo-aro)}.lo-cubo{fill:var(--logo-cubo)}.lo-furo{fill:var(--logo-furo)}
.logo-txt b{font-weight:800;color:var(--logo-truck)}
.marca{display:flex;align-items:center;text-decoration:none}
.marca-rod .logo{font-size:24px}
.logo.claro{--logo-txt:#14202C;--logo-cubo:#003DA5;--logo-furo:#fff;--logo-truck:#003DA5}
/* ajustes do logo e da ficha da peça */
.logo-o{width:.9em;height:.9em;margin-right:.02em}
.marca .logo{font-size:30px}
.fp-corpo[hidden]{display:none!important}