/* TruckEngine — DNA visual
   Vernáculo: plaqueta de identificação rebitada + faixa refletiva vermelho/branco
   (obrigatória na traseira dos caminhões no Brasil) + catálogo de peças com balões de referência. */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/assets/fonts/archivo-var.woff2) format("woff2-variations"),url(/assets/fonts/archivo-var.woff2) format("woff2")}

:root{
  --zinco:#E8EBED;      /* fundo: chapa galvanizada */
  --chapa:#F7F8F9;      /* superfícies */
  --chassi:#16212B;     /* texto e cabeçalho: tinta de chassi */
  --grafite:#53606C;    /* texto secundário */
  --linha:#C7CED5;      /* bordas */
  --refletivo:#C41E2A;  /* faixa refletiva — ação principal */
  --refletivo-escuro:#9E1520;
  --branco-faixa:#FFFFFF;
  --ambar:#E39B00;      /* luz delimitadora — destaques pontuais */
  --wa:#0F7A3D;
  --sombra:0 1px 0 rgba(22,33,43,.06),0 8px 24px -16px rgba(22,33,43,.35);
  --r:4px;
  --cond:"Archivo",system-ui,sans-serif;
  --max:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --zinco:#10171D;--chapa:#18222B;--chassi:#E4E9ED;--grafite:#9AA7B2;--linha:#2C3A46;
  --refletivo:#E2404B;--refletivo-escuro:#C52F3A;--branco-faixa:#DDE3E8;--ambar:#F2B233;--wa:#0F7A3D;color-scheme:dark}}
:root[data-theme="dark"]{--zinco:#10171D;--chapa:#18222B;--chassi:#E4E9ED;--grafite:#9AA7B2;--linha:#2C3A46;
  --refletivo:#E2404B;--refletivo-escuro:#C52F3A;--branco-faixa:#DDE3E8;--ambar:#F2B233;--wa:#0F7A3D;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zinco);color:var(--chassi);font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.55;font-stretch:100%;font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--refletivo)}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--chassi);color:var(--zinco);padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* tipografia: uma família, duas larguras */
h1,h2,h3,.cond{font-family:var(--cond);font-stretch:68%;font-weight:760;line-height:1.02;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.3rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em;max-width:68ch}
.muted{color:var(--grafite)}
.code{font-family:var(--cond);font-stretch:80%;font-weight:650;letter-spacing:.02em}

/* faixa refletiva */
.faixa{height:7px;background:repeating-linear-gradient(90deg,var(--refletivo) 0 34px,var(--branco-faixa) 34px 68px)}
.faixa.fina{height:4px}

/* cabeçalho */
.top{background:var(--chassi);color:var(--zinco)}
:root[data-theme="dark"] .top{background:#0A0F14}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top{background:#0A0F14;color:var(--chassi)}}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.logo b{font-family:var(--cond);font-stretch:62%;font-weight:850;font-size:1.65rem;letter-spacing:.02em;line-height:1}
.logo b span{color:#F05A64}
.logo svg{width:40px;height:30px;flex:none}
.logo svg:not(.marca){display:none}
.logo:not(:has(.marca))::before{content:"";width:40px;height:30px;flex:none;background:url(/assets/marca.svg) center/contain no-repeat}
.nav{display:flex;gap:18px;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-weight:560;font-size:.95rem;opacity:.9}
.nav a:hover{color:inherit;opacity:1;text-decoration:underline}
.hs{display:flex;flex:1;max-width:380px;margin-left:12px}
.hs input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:inherit;
  border-radius:var(--r) 0 0 var(--r);padding:9px 12px;font:inherit;font-size:.95rem}
.hs input::placeholder{color:rgba(232,235,237,.6)}
.hs button{border:0;background:var(--refletivo);color:#fff;border-radius:0 var(--r) var(--r) 0;padding:0 14px;cursor:pointer}
.btn-wa{display:inline-flex;align-items:center;gap:8px;background:var(--wa);color:#fff;text-decoration:none;font-weight:650;
  border-radius:var(--r);padding:10px 14px;line-height:1.1;border:0;cursor:pointer;font-size:.98rem}
.btn-wa:hover{color:#fff;filter:brightness(1.08)}
.btn-wa svg{width:18px;height:18px;flex:none}
.menu-t{display:none;background:none;border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:var(--r);padding:7px 10px;font:inherit}
@media (max-width:900px){
  .hs{display:none}
  .nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--chassi);flex-direction:column;align-items:flex-start;padding:12px 16px 18px;z-index:20}
  .nav.open{display:flex}
  .menu-t{display:block;margin-left:auto}
  .top .wrap{position:relative}
  .top .btn-wa .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* plaqueta (busca principal / código) */
.plaqueta{position:relative;background:linear-gradient(180deg,var(--chapa),color-mix(in srgb,var(--chapa) 86%,var(--linha)));
  border:1px solid var(--linha);border-radius:6px;padding:22px 26px;box-shadow:var(--sombra)}
.plaqueta::before,.plaqueta::after,.plaqueta>.rb::before,.plaqueta>.rb::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0 18%,#9aa4ad 40%,#5d6873 100%);box-shadow:0 1px 1px rgba(0,0,0,.3)}
.plaqueta::before{left:9px;top:9px}.plaqueta::after{right:9px;top:9px}
.plaqueta>.rb::before{left:9px;bottom:9px}.plaqueta>.rb::after{right:9px;bottom:9px}
.plaqueta label{display:block;font-weight:600;color:var(--grafite);margin-bottom:8px;font-size:.95rem}
.busca{display:flex;gap:10px;flex-wrap:wrap}
.busca input{flex:1 1 260px;min-width:0;font-family:var(--cond);font-stretch:78%;font-weight:620;font-size:clamp(1.35rem,3vw,1.9rem);
  letter-spacing:.02em;border:2px solid var(--chassi);background:var(--zinco);color:var(--chassi);border-radius:var(--r);padding:12px 16px}
.busca button{background:var(--refletivo);color:#fff;border:0;border-radius:var(--r);font:inherit;font-weight:700;padding:0 26px;cursor:pointer;min-height:56px}
.busca button:hover{background:var(--refletivo-escuro)}
.ex{margin-top:12px;font-size:.92rem;color:var(--grafite)}
.ex a{display:inline-block;margin:4px 6px 0 0;padding:3px 8px;border:1px dashed var(--linha);border-radius:3px;text-decoration:none;color:var(--chassi)}
.ex a:hover{border-color:var(--refletivo)}

/* hero */
.hero{padding:56px 0 46px}
.hero h1{max-width:13ch;margin-bottom:18px}
.hero .lead{font-size:1.15rem;color:var(--grafite);max-width:56ch;margin-bottom:28px}
.hero-g{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end}
.fatos{border-left:3px solid var(--refletivo);padding-left:18px;color:var(--grafite);font-size:.98rem}
.fatos strong{display:block;color:var(--chassi);font-family:var(--cond);font-stretch:70%;font-size:1.6rem;line-height:1.1;margin-top:10px}
.fatos strong:first-child{margin-top:0}
@media (max-width:900px){.hero-g{grid-template-columns:1fr}.hero{padding:36px 0 30px}}

section.blk{padding:44px 0;border-top:1px solid var(--linha)}
.blk-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.blk-h p{margin:0;color:var(--grafite)}

/* montadoras */
.makes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.make{display:block;text-decoration:none;background:var(--chapa);border:1px solid var(--linha);border-radius:var(--r);padding:16px 16px 14px;position:relative}
.make:hover{border-color:var(--chassi);color:inherit}
.make b{font-family:var(--cond);font-stretch:66%;font-size:1.7rem;font-weight:780;display:block;line-height:1;padding-right:58px}
.make small{color:var(--grafite);display:block;margin-top:6px;font-size:.88rem}
.make i{position:absolute;right:14px;top:16px;font-style:normal;font-weight:650;font-size:.9rem;color:var(--grafite)}

/* diagrama do caminhão */
.diag{display:grid;grid-template-columns:1.35fr 1fr;gap:30px;align-items:start}
.diag svg{width:100%;height:auto}
.diag .tr-l{stroke:var(--chassi);fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.diag .tr-f{fill:var(--chapa);stroke:var(--chassi);stroke-width:2.2;stroke-linejoin:round}
.diag .tr-d{fill:var(--chassi)}
.diag .tr-g{stroke:var(--linha);stroke-width:1.4}
.diag .tr-r{fill:var(--refletivo)}.diag .tr-w{fill:var(--branco-faixa)}
.diag .ba circle{fill:var(--zinco);stroke:var(--refletivo);stroke-width:2}
.diag .ba text{font:700 15px "Archivo",sans-serif;fill:var(--chassi);text-anchor:middle;dominant-baseline:central}
.diag .ba line{stroke:var(--refletivo);stroke-width:1.4}
.diag a.ba:hover circle,.diag a.ba:focus circle,.diag a.ba.on circle{fill:var(--refletivo)}
.diag a.ba:hover text,.diag a.ba:focus text,.diag a.ba.on text{fill:#fff}
.leg{list-style:none;margin:0;padding:0;columns:1}
.leg li{border-bottom:1px solid var(--linha)}
.leg a{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:8px 2px;text-decoration:none}
.leg a .n{width:26px;height:26px;border-radius:50%;border:2px solid var(--refletivo);display:grid;place-items:center;font-weight:700;font-size:.82rem}
.leg a:hover .n,.leg a.on .n{background:var(--refletivo);color:#fff}
.leg a i{font-style:normal;color:var(--grafite);font-size:.9rem}
.outros{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.outros a{border:1px solid var(--linha);background:var(--chapa);border-radius:3px;padding:5px 10px;text-decoration:none;font-size:.93rem}
@media (max-width:900px){.diag{grid-template-columns:1fr}}

/* passos */
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:p}
.passo{border-top:3px solid var(--chassi);padding-top:14px}
.passo h3{margin-bottom:8px}
.passo h3::before{counter-increment:p;content:counter(p);color:var(--refletivo);margin-right:10px}
@media (max-width:760px){.passos{grid-template-columns:1fr}}

/* listagens */
.crumb{font-size:.9rem;color:var(--grafite);padding:18px 0 0}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.crumb li+li::before{content:"/";margin-right:4px;opacity:.6}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.ph{padding:18px 0 26px}
.ph h1{font-size:clamp(2rem,4.4vw,3.3rem);margin-bottom:12px}
.ph p{color:var(--grafite);margin:0}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.filtros a{border:1px solid var(--linha);border-radius:3px;padding:5px 10px;text-decoration:none;font-size:.92rem;background:var(--chapa)}
.filtros a[aria-current]{background:var(--chassi);color:var(--zinco);border-color:var(--chassi)}
.filtros a i{font-style:normal;color:var(--grafite);margin-left:4px}
.filtros a[aria-current] i{color:inherit;opacity:.7}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;list-style:none;margin:0;padding:0}
.card{background:var(--chapa);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;height:100%}
.card:hover{border-color:var(--chassi)}
.card a{text-decoration:none;display:flex;flex-direction:column;height:100%}
.card a:hover{color:inherit}
.card .im{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;border-bottom:1px solid var(--linha)}
.card .im img{width:100%;height:100%;object-fit:contain}
.card .im.sem{background:var(--zinco)}
.card .tx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .nm{font-weight:600;font-size:.96rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .cd{font-family:var(--cond);font-stretch:80%;font-weight:650;color:var(--refletivo);font-size:.98rem}
.card .mk{color:var(--grafite);font-size:.85rem;margin-top:auto}
.pag{display:flex;gap:6px;flex-wrap:wrap;margin:28px auto 8px;align-items:center}
.pag a,.pag span{min-width:40px;text-align:center;padding:7px 10px;border:1px solid var(--linha);border-radius:3px;text-decoration:none;background:var(--chapa)}
.pag [aria-current]{background:var(--chassi);color:var(--zinco);border-color:var(--chassi)}
.pag .gap{border:0;background:none}

/* ficha */
.ficha{display:grid;grid-template-columns:1fr 380px;gap:34px;padding:12px 0 40px;align-items:start}
.ficha h1{font-size:clamp(1.9rem,3.8vw,3rem);margin:6px 0 18px;max-width:22ch}
.foto{background:#fff;border:1px solid var(--linha);border-radius:var(--r);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:contain}
.foto.sem{background:var(--chapa);color:var(--grafite);text-align:center;padding:20px}
.lado{position:sticky;top:16px;display:flex;flex-direction:column;gap:16px}
.plaq-cod .k{font-size:.9rem;color:var(--grafite);font-weight:600}
.plaq-cod .v{font-family:var(--cond);font-stretch:72%;font-weight:780;font-size:clamp(2rem,4vw,2.7rem);line-height:1.05;word-break:break-all;margin:4px 0 10px}
.copiar{background:none;border:1px solid var(--linha);color:var(--chassi);border-radius:3px;padding:5px 10px;font:inherit;font-size:.88rem;cursor:pointer}
.copiar:hover{border-color:var(--chassi)}
.cotar{background:var(--chassi);color:var(--zinco);border-radius:6px;padding:20px}
.cotar h2{font-size:1.6rem;margin-bottom:8px}
.cotar p{font-size:.95rem;opacity:.85;margin-bottom:14px}
.cotar .btn-wa{width:100%;justify-content:center;padding:14px;font-size:1.05rem}
:root[data-theme="dark"] .cotar{background:#0A0F14;color:var(--chassi)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cotar{background:#0A0F14;color:var(--chassi)}}
.tec{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:.98rem}
.tec th,.tec td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--linha)}
.tec th{width:34%;color:var(--grafite);font-weight:600}
.equiv{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 26px}
.equiv li{font-family:var(--cond);font-stretch:80%;font-weight:640;border:1px solid var(--linha);background:var(--chapa);border-radius:3px;padding:4px 9px}
.corpo h2{font-size:1.75rem;margin:28px 0 10px}
.corpo ul{padding-left:1.2em;max-width:68ch}.corpo li{margin-bottom:6px}
.galeria{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.galeria button{width:72px;height:56px;padding:0;border:1px solid var(--linha);background:#fff;border-radius:3px;cursor:pointer;overflow:hidden}
.galeria button[aria-pressed="true"]{border:2px solid var(--refletivo)}
.galeria img{width:100%;height:100%;object-fit:contain}
.barra-wa{display:none}
@media (max-width:900px){
  .ficha{grid-template-columns:1fr}
  .lado{position:static}
  .barra-wa{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--chassi);gap:10px;align-items:center;box-shadow:0 -6px 20px rgba(0,0,0,.25)}
  .barra-wa .c{color:var(--zinco);font-family:var(--cond);font-stretch:76%;font-weight:700;font-size:1.1rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.tem-barra{padding-bottom:76px}
}
:root[data-theme="dark"] .barra-wa{background:#0A0F14}

/* busca */
#res{margin-bottom:40px}
#res .vazio{padding:28px;border:1px dashed var(--linha);border-radius:var(--r);background:var(--chapa)}
.res-n{color:var(--grafite);margin:0 0 14px}

/* texto institucional */
.texto{max-width:72ch;padding:10px 0 50px}
.texto h2{font-size:1.8rem;margin:30px 0 10px}

/* rodapé */
.rod{background:var(--chassi);color:var(--zinco);margin-top:40px}
:root[data-theme="dark"] .rod{background:#0A0F14;color:var(--chassi)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rod{background:#0A0F14;color:var(--chassi)}}
.rod .wrap{padding-top:36px;padding-bottom:36px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.rod h2{font-size:1.15rem;margin-bottom:10px}
.rod ul{list-style:none;margin:0;padding:0}.rod li{margin:5px 0}
.rod a{text-decoration:none;opacity:.85}.rod a:hover{opacity:1;color:inherit;text-decoration:underline}
.rod p{opacity:.8;font-size:.95rem}
.rod .fim{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:.88rem;opacity:.7;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tema{background:none;border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:3px;padding:3px 9px;font:inherit;font-size:.85rem;cursor:pointer}
@media (max-width:760px){.rod .wrap{grid-template-columns:1fr 1fr}}

@media print{.top,.rod,.cotar,.barra-wa,.faixa{display:none}}