/* =========================================================
   TECH POWER PC — folha de estilo
   Base preta, contraste alto, tipografia condensada industrial.
   Regra do projeto: hover só em elemento que tem ação.
   ========================================================= */

:root{
  --bg:        #07080a;
  --bg2:       #0b0d10;
  --sup:       #101317;
  --sup2:      #151a20;
  --sup3:      #1b222a;
  --linha:     #1e252d;
  --linha2:    #2b343e;

  --txt:       #e9edf1;
  --txt2:      #a4afb9;
  --txt3:      #6c7883;

  --acc:       #ff6a1f;
  --acc-cl:    #ff8f4d;
  --acc-fr:    rgba(255,106,31,.10);
  --acc-fr2:   rgba(255,106,31,.28);

  --ok:        #3fd88b;
  --warn:      #ffc23d;
  --err:       #ff5470;
  --info:      #48c8ff;

  --disp: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --corpo:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;

  --r: 4px;
  --max: 1320px;
  --topo-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topo-h) + 14px); }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--corpo);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* textura fina sobre o preto, tira o "chapado" */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  opacity:.5;
}

img,svg{ max-width:100%; }
[hidden]{ display:none !important; }

h1,h2,h3,h4,h5{
  font-family:var(--disp);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.005em;
  margin:0;
  text-transform:uppercase;
}
p{ margin:0 0 1em; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }

:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:2px; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.pular{
  position:absolute; left:-999px; top:8px; z-index:99;
  background:var(--acc); color:#0a0500; padding:10px 16px; font-weight:700;
}
.pular:focus{ left:8px; }

.wrap{ width:min(100% - 40px, var(--max)); margin-inline:auto; position:relative; z-index:1; }
.wrap-estreito{ width:min(100% - 40px, 860px); }
.ta-d{ text-align:right; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--disp); font-size:15px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; text-decoration:none;
  padding:12px 22px; border:1px solid transparent; border-radius:var(--r);
  transition:background .16s, border-color .16s, color .16s, transform .12s;
}
.btn-acc{ background:var(--acc); color:#140600; border-color:var(--acc); }
.btn-acc:hover{ background:var(--acc-cl); border-color:var(--acc-cl); }
.btn-acc:active{ transform:translateY(1px); }
.btn-fantasma{ border-color:var(--linha2); color:var(--txt); background:rgba(255,255,255,.02); }
.btn-fantasma:hover{ border-color:var(--acc); color:var(--acc-cl); }
.btn-vazio{ color:var(--txt2); border-color:transparent; padding:6px 10px; }
.btn-vazio:hover{ color:var(--acc-cl); }
.btn-sm{ padding:9px 16px; font-size:13.5px; }
.btn-xs{ padding:5px 10px; font-size:12.5px; letter-spacing:.08em; }
.btn-bloco{ display:flex; width:100%; }

/* =========================================================
   TOPO
   ========================================================= */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(7,8,10,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
  padding-top:env(safe-area-inset-top,0px);
}
.topo-in{ display:flex; align-items:center; gap:24px; height:var(--topo-h); }
.topo-fio{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:linear-gradient(90deg,var(--acc),#ffb066); transition:width .12s linear;
}

.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.logo-mark svg{ display:block; overflow:visible; }
.lm-case{ fill:none; stroke:var(--linha2); stroke-width:2; }
.lm-bolt{ fill:var(--acc); }
.logo:hover .lm-case{ stroke:var(--acc-fr2); }
.logo-txt{ display:flex; flex-direction:column; line-height:1; }
.logo-l1{
  font-family:var(--disp); font-weight:700; font-size:23px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--txt);
}
.logo-l1 b{ color:var(--acc); font-weight:700; }
.logo-l2{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:var(--txt3);
  text-transform:uppercase; margin-top:4px;
}
.logo-l2 span{ color:var(--acc); }

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  font-family:var(--disp); text-transform:uppercase; font-size:15px; letter-spacing:.05em;
  text-decoration:none; color:var(--txt2); padding:8px 13px; border-radius:var(--r);
  border:1px solid transparent; transition:color .15s, border-color .15s;
}
.nav a:hover{ color:var(--txt); border-color:var(--linha); }
.nav a.is-aqui{ color:var(--acc); border-color:var(--acc-fr2); background:var(--acc-fr); }

.topo-dir{ display:flex; align-items:center; gap:10px; }
.hamb{ display:none; width:38px; height:34px; border:1px solid var(--linha2); border-radius:var(--r); padding:8px 8px; }
.hamb span{ display:block; height:2px; background:var(--txt); margin:3px 0; transition:transform .2s, opacity .2s; }
.hamb[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.hamb[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamb[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding:74px 0 0; overflow:hidden; border-bottom:1px solid var(--linha); }
.hero-grade{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(255,106,31,.10), transparent 62%),
    radial-gradient(700px 500px at 5% 92%, rgba(72,200,255,.055), transparent 60%),
    linear-gradient(transparent 95%, rgba(255,255,255,.028) 95%) 0 0/100% 34px,
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.028) 95%) 0 0/34px 100%;
  mask-image:linear-gradient(#000 45%, transparent 96%);
}
.hero-in{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:48px; align-items:center; padding-bottom:64px; }

.olho{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt2); border:1px solid var(--linha); background:var(--sup);
  padding:6px 12px; border-radius:100px; margin-bottom:22px;
}
.pisca{ width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 var(--acc-fr2); animation:pisca 2.4s infinite; }
@keyframes pisca{ 0%,100%{box-shadow:0 0 0 0 rgba(255,106,31,.45)} 50%{box-shadow:0 0 0 7px rgba(255,106,31,0)} }

.hero h1{
  font-size:clamp(36px, 5.6vw, 68px);
  letter-spacing:-.005em;
  margin-bottom:22px;
}
.hero h1 em{ font-style:normal; color:var(--acc); position:relative; }
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:4px; height:8px;
  background:var(--acc-fr2); z-index:-1;
}
.lead{ font-size:17.5px; color:var(--txt2); max-width:56ch; }
.lead b{ color:var(--txt); font-weight:600; }

.hero-btns{ display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 34px; }

.hero-nums{ display:flex; gap:34px; list-style:none; padding:22px 0 0; margin:0; border-top:1px solid var(--linha); flex-wrap:wrap; }
.hero-nums li{ display:flex; flex-direction:column; }
.hero-nums b{ font-family:var(--disp); font-size:30px; color:var(--txt); line-height:1; }
.hero-nums span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt3); margin-top:7px; }

/* blueprint */
.hero-art{ position:relative; }
.bp{ width:100%; height:auto; display:block; }
.bp-l{ fill:none; stroke:rgba(180,205,225,.34); stroke-width:1.4; }
.bp-dim{ stroke:rgba(180,205,225,.17); stroke-dasharray:4 4; }
.bp-acc{ stroke:var(--acc); }
.bp-glass{ stroke:rgba(120,180,255,.2); stroke-width:1; }
.bp-fan circle{ fill:none; stroke:rgba(180,205,225,.22); stroke-width:1.2; }
.bp-t{ font-family:var(--mono); font-size:8.5px; fill:var(--txt3); letter-spacing:.1em; text-transform:uppercase; }
.bp-t-acc{ fill:var(--acc); }
.bp-cota path{ fill:none; stroke:rgba(180,205,225,.22); stroke-width:1; }
.bp-cota text{ font-family:var(--mono); font-size:9px; fill:var(--txt3); }
.bp-scan{ stroke:var(--acc); stroke-width:1.4; opacity:.65; animation:scan 5.5s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes scan{ 0%,100%{transform:translateY(0);opacity:0} 8%{opacity:.7} 50%{transform:translateY(400px);opacity:.7} 92%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .bp-scan{animation:none;opacity:0} .pisca{animation:none} }

.bp-tag{
  position:absolute; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt3); border:1px solid var(--linha); background:var(--bg2); padding:5px 9px;
}
.bp-tag-1{ top:6%; right:-6px; }
.bp-tag-2{ bottom:16%; left:-10px; color:var(--acc); border-color:var(--acc-fr2); }

/* faixa rolante */
.marquise{ border-top:1px solid var(--linha); background:var(--bg2); overflow:hidden; padding:11px 0; }
.marq-in{ display:flex; gap:44px; width:max-content; animation:marq 46s linear infinite; }
.marq-in span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--txt3); white-space:nowrap; }
.marq-in span b{ color:var(--acc); font-weight:500; }
@keyframes marq{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .marq-in{animation:none} }

/* =========================================================
   SEÇÕES
   ========================================================= */
.secao{ padding:82px 0; border-bottom:1px solid var(--linha); }
.secao-montador{ background:
  radial-gradient(1000px 600px at 82% 0%, rgba(255,106,31,.045), transparent 60%), var(--bg); }

.sec-cab{ display:flex; gap:20px; align-items:flex-start; margin-bottom:38px; flex-wrap:wrap; }
.sec-num{
  font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.1em;
  border:1px solid var(--acc-fr2); background:var(--acc-fr); padding:5px 9px; margin-top:5px;
}
.sec-cab h2{ font-size:clamp(26px,3.4vw,40px); }
.sec-sub{ color:var(--txt2); margin:9px 0 0; max-width:66ch; font-size:16px; }
.sec-cab-btns{ margin-left:auto; display:flex; gap:9px; align-items:center; flex-wrap:wrap; }

/* =========================================================
   NÍVEIS / PRESETS
   ========================================================= */
.niveis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); gap:18px; }
.nivel{
  position:relative; background:var(--sup); border:1px solid var(--linha);
  border-radius:var(--r); padding:26px 24px 24px; display:flex; flex-direction:column;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.nivel-fita{
  position:absolute; top:0; left:0; height:3px; width:100%; background:var(--l-cor,var(--acc));
}
.nivel-topo{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.nivel h3{ font-size:24px; }
.nivel-eti{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--l-cor,var(--acc)); border:1px solid currentColor; padding:3px 7px; opacity:.85;
}
.nivel-desc{ color:var(--txt2); font-size:14.5px; margin:12px 0 16px; min-height:63px; }
.nivel-itens{ list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--linha); }
.nivel-itens li{
  display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--linha); font-size:14px;
}
.nivel-itens li span{ color:var(--txt3); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding-top:3px; }
.nivel-itens li b{ font-weight:500; text-align:right; color:var(--txt); }
.nivel-preco{ display:flex; align-items:baseline; gap:8px; margin:auto 0 16px; }
.nivel-preco em{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--txt3); letter-spacing:.1em; text-transform:uppercase; }
.nivel-preco b{ font-family:var(--disp); font-size:29px; color:var(--txt); }

/* =========================================================
   MONTADOR
   ========================================================= */
.mont{ display:grid; grid-template-columns:minmax(0,1fr) 418px; gap:26px; align-items:start; }

/* trilha de categorias */
.trilha-caixa{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r); padding:16px 18px 18px; margin-bottom:18px; }
.trilha-cab{ display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.trilha-cab h3{ font-size:17px; letter-spacing:.04em; color:var(--txt2); }
.trilha{ display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px; }

.cat-btn{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  background:var(--sup2); border:1px solid var(--linha); border-radius:var(--r);
  padding:11px 11px 10px; text-align:left; transition:border-color .15s, background .15s;
}
.cat-btn:hover{ border-color:var(--linha2); background:var(--sup3); }
.cat-btn .ci{ width:22px; height:22px; stroke:var(--txt2); fill:none; stroke-width:1.5; }
.cat-btn .cn{ font-family:var(--disp); font-size:14.5px; text-transform:uppercase; letter-spacing:.03em; line-height:1.1; color:var(--txt); }
.cat-btn .cv{ font-family:var(--mono); font-size:10px; color:var(--txt3); letter-spacing:.04em; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:26px; }
.cat-btn.tem .cv{ color:var(--ok); }
.cat-btn.tem .ci{ stroke:var(--ok); }
.cat-btn.is-on{ border-color:var(--acc); background:var(--acc-fr); }
.cat-btn.is-on .ci{ stroke:var(--acc); }
.cat-btn.is-on .cn{ color:var(--acc-cl); }
.cat-btn .op{ position:absolute; top:8px; right:9px; font-family:var(--mono); font-size:9px; color:var(--txt3); letter-spacing:.08em; }
.cat-btn.alerta::after{
  content:"!"; position:absolute; top:7px; right:8px; width:15px; height:15px; border-radius:50%;
  background:var(--err); color:#160006; font-family:var(--disp); font-size:12px; font-weight:700;
  display:grid; place-items:center;
}
.cat-btn.alerta .op{ display:none; }

/* painel da categoria */
.painel{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r); }
.painel-cab{ padding:20px 20px 16px; border-bottom:1px solid var(--linha); }
.painel-cab h3{ font-size:23px; }
.painel-desc{ color:var(--txt2); font-size:14.5px; margin:7px 0 0; max-width:70ch; }
.painel-filtros{ display:flex; gap:9px; flex-wrap:wrap; margin-top:15px; align-items:center; }

.busca{ display:flex; align-items:center; gap:9px; background:var(--bg2); border:1px solid var(--linha2); border-radius:var(--r); padding:0 12px; flex:1 1 220px; min-width:180px; }
.busca svg{ stroke:var(--txt3); fill:none; stroke-width:1.7; flex:0 0 auto; }
.busca input{ background:none; border:0; outline:0; padding:10px 0; width:100%; font-size:14.5px; }
.busca input::placeholder{ color:var(--txt3); }
.busca:focus-within{ border-color:var(--acc); }
.busca-g{ flex:1 1 320px; padding:2px 14px; }
.busca-g input{ padding:13px 0; font-size:15.5px; }

#ordem-peca{ background:var(--bg2); border:1px solid var(--linha2); border-radius:var(--r); padding:10px 11px; font-size:14px; outline:0; }
#ordem-peca:focus{ border-color:var(--acc); }

.check{ display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--txt2); background:var(--bg2); border:1px solid var(--linha2); border-radius:var(--r); padding:9px 13px; cursor:pointer; }
.check:hover{ border-color:var(--linha2); color:var(--txt); }
.check input{ accent-color:var(--acc); width:15px; height:15px; margin:0; cursor:pointer; }

.pecas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px; padding:18px; max-height:1000px; overflow-y:auto; }
.pecas::-webkit-scrollbar{ width:9px; }
.pecas::-webkit-scrollbar-track{ background:var(--bg2); }
.pecas::-webkit-scrollbar-thumb{ background:var(--linha2); border-radius:9px; }

/* card de peça — TEM ação (selecionar), então hover é permitido */
.peca{
  position:relative; display:flex; flex-direction:column;
  background:var(--sup2); border:1px solid var(--linha); border-radius:var(--r);
  overflow:hidden; text-align:left; transition:border-color .15s, background .15s;
}
.peca:hover{ border-color:var(--linha2); background:var(--sup3); }
.peca-btn{
  display:flex; flex-direction:column; flex:1; align-items:stretch;
  font:inherit; color:inherit; text-align:left; background:none; border:0;
  padding:0; margin:0; cursor:pointer;
}
.peca.is-sel{ border-color:var(--acc); background:var(--acc-fr); }
.peca.incompat{ opacity:.52; }
.peca-img{ position:relative; background:linear-gradient(160deg,#0d1014,#14191f); border-bottom:1px solid var(--linha); aspect-ratio:16/10; display:grid; place-items:center; padding:12px; }
.peca-img svg,.peca-img img{ width:100%; height:100%; object-fit:contain; display:block; }

/* fotos reais dos produtos (ver TPPC.FOTOS_AUTO em js/data.js) */
.thumb-wrap{ position:relative; display:block; width:100%; height:100%; }
.thumb-wrap svg{ width:100%; height:100%; }
.foto-auto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  opacity:0; transition:opacity .25s;
}
.foto-auto.vis{ opacity:1; }
.peca-marca{
  position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--txt2); background:rgba(7,8,10,.8); border:1px solid var(--linha2);
  padding:3px 7px;
}
.peca-nivel{
  position:absolute; top:8px; right:8px; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 6px; border:1px solid currentColor;
  background:rgba(7,8,10,.82);
}
.nv-basico{ color:var(--info); } .nv-intermediario{ color:var(--warn); } .nv-avancado{ color:var(--acc); }

.peca-corpo{ padding:12px 13px 13px; display:flex; flex-direction:column; flex:1; }
.peca-nome{ font-family:var(--disp); font-size:17px; text-transform:uppercase; line-height:1.12; margin-bottom:7px; }
.peca-resumo{ font-size:13px; color:var(--txt2); line-height:1.45; margin-bottom:10px; }
.peca-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px; }
.tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt2); border:1px solid var(--linha2); padding:2px 6px; }
.peca-nota{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--txt2); margin-bottom:11px; }
.estrelas{ color:var(--warn); letter-spacing:1px; font-size:12px; }
.peca-fim{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }
.peca-preco{ display:flex; flex-direction:column; }
.peca-preco em{ font-style:normal; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--txt3); }
.peca-preco b{ font-family:var(--disp); font-size:21px; color:var(--txt); line-height:1.1; }
.peca-preco.zero b{ color:var(--ok); }
.peca-acao{
  font-family:var(--disp); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--linha2); padding:7px 12px; border-radius:var(--r); color:var(--txt);
  background:var(--bg2); transition:background .15s,border-color .15s,color .15s;
}
.peca:hover .peca-acao{ border-color:var(--acc); color:var(--acc-cl); }
.peca.is-sel .peca-acao{ background:var(--acc); border-color:var(--acc); color:#150600; }
.peca-loja{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border-top:1px solid var(--linha); padding:8px 13px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--txt3); text-decoration:none;
  transition:color .15s, background .15s;
}
.peca-loja:hover{ color:var(--acc-cl); background:rgba(255,106,31,.06); }
.peca-loja svg{ stroke:currentColor; fill:none; stroke-width:1.8; }

/* ---- lojas em linha, com preço: o visitante compara antes de sair ---- */
.peca-lojas{ border-top:1px solid var(--linha); }
.peca-lojas-rot{
  display:block; padding:7px 13px 2px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt3); opacity:.75;
}
.peca-lojas-rot i{ font-style:normal; opacity:.8; }
/* aviso enquanto TPPC.PRECOS_DEMO estiver ligado */
.peca-lojas-rot .pl-demo{ color:var(--warn); opacity:1; }
.peca-lojas .peca-loja{ border-top:none; gap:10px; }
.peca-lojas .peca-loja + .peca-loja{ border-top:1px solid var(--linha); }
.pl-loja{ flex:1 1 auto; display:flex; align-items:center; gap:6px; min-width:0; }
.pl-valor{
  font-family:var(--mono); font-size:12px; letter-spacing:0; color:var(--txt);
  white-space:nowrap;
}
.pl-conferir{ font-size:9.5px; opacity:.6; white-space:nowrap; }
.pl-selo{
  font-style:normal; font-size:8.5px; letter-spacing:.08em; padding:1px 5px;
  border:1px solid var(--ok); color:var(--ok); border-radius:2px;
}
.peca-loja.e-melhor .pl-valor{ color:var(--ok); }
/* loja em demonstração, sem ID de afiliado — não gera comissão */
.pl-semid{
  font-style:normal; font-size:8.5px; letter-spacing:.08em; padding:1px 5px;
  border:1px solid var(--warn); color:var(--warn); border-radius:2px;
}

/* cores por loja — dá para bater o olho e saber para onde vai */
.peca-loja.e-shopee{ color:#f08a6b; }
.peca-loja.e-shopee:hover{ color:#ff9b7d; background:rgba(238,77,45,.09); }
.peca-loja.e-ml{ color:#e8c76a; }
.peca-loja.e-ml:hover{ color:#ffdf85; background:rgba(255,224,90,.09); }
.peca-loja.e-amz{ color:#7fc7e8; }
.peca-loja.e-amz:hover{ color:#9fdcff; background:rgba(0,168,225,.10); }

/* botões de loja na tabela de resumo */
.mini-btn.mb-shopee:hover{ color:#ff9b7d; border-color:rgba(238,77,45,.5); }
.mini-btn.mb-ml:hover{ color:#ffdf85; border-color:rgba(255,224,90,.5); }
.mini-btn.mb-amz:hover{ color:#9fdcff; border-color:rgba(0,168,225,.5); }

/* botões secundários no comparador (variantes contornadas) */
.btn-fantasma.btn-ml{ border-color:rgba(255,224,90,.35); color:#e8c76a; }
.btn-fantasma.btn-ml:hover{ border-color:#e8c76a; color:#ffdf85; }
.btn-fantasma.btn-amz{ border-color:rgba(0,168,225,.35); color:#7fc7e8; }
.btn-fantasma.btn-amz:hover{ border-color:#7fc7e8; color:#9fdcff; }
.peca-alerta{
  display:flex; gap:7px; align-items:flex-start; font-size:11.5px; line-height:1.35; color:var(--err);
  background:rgba(255,84,112,.08); border-top:1px solid rgba(255,84,112,.2); padding:8px 13px;
}
.vazio-msg{ padding:0 20px 24px; color:var(--txt3); font-size:14.5px; }

/* =========================================================
   VISOR 3D
   ========================================================= */
.mont-dir{ position:sticky; top:calc(var(--topo-h) + 16px); }
.visor-caixa{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; }
.visor-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; border-bottom:1px solid var(--linha); }
.visor-cab h3{ font-size:17px; display:flex; align-items:center; gap:9px; }
.visor-cont{ font-family:var(--mono); font-size:11px; color:var(--acc); border:1px solid var(--acc-fr2); background:var(--acc-fr); padding:2px 7px; letter-spacing:.05em; }
.visor-dica{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); }

.visor{
  position:relative; height:432px; cursor:grab; touch-action:none; overflow:hidden;
  background:
    radial-gradient(520px 320px at 50% 38%, rgba(255,106,31,.07), transparent 66%),
    radial-gradient(400px 300px at 20% 90%, rgba(72,200,255,.05), transparent 70%),
    linear-gradient(#090b0e,#050608);
}
.visor::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(transparent 96%, rgba(255,255,255,.035) 96%) 0 0/100% 28px,
    linear-gradient(90deg,transparent 96%, rgba(255,255,255,.035) 96%) 0 0/28px 100%;
  mask-image:radial-gradient(70% 60% at 50% 50%, #000, transparent);
  opacity:.8;
}
.visor.arrastando{ cursor:grabbing; }
.cena{ position:absolute; inset:0; perspective:1500px; perspective-origin:50% 45%; }
.palco{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d;
  transform:translateZ(-60px) rotateX(var(--rx,-14deg)) rotateY(var(--ry,34deg)) scale(var(--zm,.88));
  transition:transform .5s cubic-bezier(.22,.7,.3,1);
}
/* só durante o arraste vale reservar camada de GPU; deixar fixo gasta memória à toa */
.palco.sem-transicao{ transition:none; will-change:transform; }

.visor-vazio{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:30px;
  color:var(--txt3); font-size:14.5px; pointer-events:none;
}
.visor-vazio b{ color:var(--acc); }
.visor-eixo{
  position:absolute; right:10px; bottom:10px; font-family:var(--mono); font-size:10px;
  color:var(--txt3); border:1px solid var(--linha); background:rgba(7,8,10,.7); padding:3px 7px;
  letter-spacing:.08em; pointer-events:none;
}

/* =========================================================
   PEÇAS 3D — geometria + materiais
   ========================================================= */
.p3{ position:absolute; left:0; top:0; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.22,.7,.3,1), opacity .3s; }
.pp{ position:absolute; left:0; top:0; transform-style:preserve-3d; }
.cx{ position:absolute; transform-style:preserve-3d; }

/* face base: cor sólida + sombreado de luz vindo de cima/esquerda */
.fc{
  position:absolute; box-sizing:border-box;
  background-color:var(--f,#20262e);
  background-image:linear-gradient(162deg, rgba(255,255,255,.10), rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.10);
  transition:opacity .35s ease, background-color .3s;
}
.fc-t{ background-color:var(--ft,var(--f,#262d36));
  background-image:linear-gradient(162deg, rgba(255,255,255,.15), rgba(255,255,255,.02)); }
.fc-u{ background-color:var(--fb,#0b0e12);
  background-image:linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.48)); }
.fc-e{ background-color:var(--fs,#1a2028);
  background-image:linear-gradient(118deg, rgba(255,255,255,.10), rgba(0,0,0,.24)); }
.fc-d{ background-color:var(--fs,#1a2028);
  background-image:linear-gradient(118deg, rgba(0,0,0,.26), rgba(0,0,0,.40)); }
.fc-b{ background-image:linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.44)); }

/* ---- materiais ---- */

/* chapa de aço pintada, com escovado fino */
.m-aco{
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.09), rgba(0,0,0,.26)),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px) !important;
}
/* painel frontal liso */
.m-painel{
  background-image:
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.22)),
    linear-gradient(to right, rgba(0,0,0,.18) 0 6%, transparent 6% 94%, rgba(0,0,0,.18) 94%) !important;
}
/* malha de ventilação — deixa entrever o que está atrás */
.m-malha{
  background-color:rgba(16,20,26,.80) !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.16) 0 1px, transparent 1.4px),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.24)) !important;
  background-size:6px 6px, 100% 100% !important;
}
/* frente fechada com faixa de LED vertical */
.m-listra{
  background-image:
    linear-gradient(90deg, transparent 0 40%, var(--ac,rgba(120,180,255,.5)) 40% 44%, transparent 44% 56%,
                    var(--ac,rgba(120,180,255,.5)) 56% 60%, transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.24)) !important;
}
/* traseira: recortes de I/O e favo de saída de ar */
.m-tras{
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.55) 0 1.6px, transparent 2px),
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.46)) !important;
  background-size:7px 7px, 100% 100% !important;
}
/* vidro temperado fumê — escurece o interior sem esconder */
.m-vidro{
  background-color:rgba(9,13,19,.42) !important;
  background-image:linear-gradient(118deg,
    rgba(170,205,255,.16) 0%, rgba(120,160,215,.05) 26%,
    rgba(8,11,16,.10) 55%, rgba(255,140,60,.09) 100%) !important;
  border-color:rgba(160,200,255,.26) !important;
  box-shadow:inset 0 0 26px rgba(120,170,255,.06);
}
.m-vidro.vidro-claro{ background-color:rgba(12,17,24,.24) !important; }
/* raio-X: as chapas ficam translúcidas para inspecionar a montagem */
.fc.raiox{ opacity:.14; }
.modo-raiox .m-vidro{ opacity:.35; }

/* placa de circuito */
.m-pcb{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(118deg, rgba(255,255,255,.08), rgba(0,0,0,.26)) !important;
  background-size:13px 13px, 13px 13px, 100% 100% !important;
}
/* aletas de dissipador */
.m-aletas{
  background-image:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.17) 0 1px, rgba(0,0,0,.16) 1px 4.5px),
    linear-gradient(118deg, rgba(255,255,255,.10), rgba(0,0,0,.18)) !important;
}
.m-aletasV{
  background-image:
    repeating-linear-gradient(to right, rgba(0,0,0,.38) 0 1px, transparent 1px 6px),
    linear-gradient(118deg, rgba(255,255,255,.08), rgba(0,0,0,.22)) !important;
}
.m-aletasH{
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.38) 0 1px, transparent 1px 5px),
    linear-gradient(118deg, rgba(255,255,255,.08), rgba(0,0,0,.22)) !important;
}
/* topo do cooler com as pontas dos heatpipes */
.m-tubos{
  background-image:
    radial-gradient(circle at 20% 50%, #c2ccd8 0 2.6px, transparent 3px),
    radial-gradient(circle at 40% 50%, #c2ccd8 0 2.6px, transparent 3px),
    radial-gradient(circle at 60% 50%, #c2ccd8 0 2.6px, transparent 3px),
    radial-gradient(circle at 80% 50%, #c2ccd8 0 2.6px, transparent 3px),
    linear-gradient(160deg, #39424d, #262d36) !important;
}
/* tampa metálica do processador */
.m-ihs{
  background-image:
    linear-gradient(135deg, #cfd6de 0%, #9aa3ad 38%, #b7c0c9 60%, #8d96a0 100%),
    linear-gradient(var(--ac,#888), var(--ac,#888)) !important;
  border-color:rgba(255,255,255,.2) !important;
}
/* espalhador de memória */
.m-ram{
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.22), rgba(0,0,0,.30)),
    repeating-linear-gradient(115deg, rgba(0,0,0,.16) 0 3px, transparent 3px 9px) !important;
}
/* carcaça da placa de vídeo */
.m-shroud{
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.12), rgba(0,0,0,.34)),
    linear-gradient(to bottom, var(--ac,#4a7fb5) 0 2px, transparent 2px) !important;
}
.m-backplate{
  background-image:
    linear-gradient(118deg, rgba(0,0,0,.30), rgba(0,0,0,.44)),
    repeating-linear-gradient(to right, rgba(255,255,255,.07) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 11px) !important;
}
.m-gputopo{
  background-image:
    linear-gradient(to right, transparent 0 18%, var(--ac,#4a7fb5) 18% 82%, transparent 82%),
    linear-gradient(160deg, rgba(255,255,255,.14), rgba(0,0,0,.20)) !important;
}
.m-saidas{
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.75) 0 5px, transparent 5px 12px),
    linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.3)) !important;
}
/* etiqueta de fonte / disco */
.m-etiqueta{
  background-image:
    linear-gradient(to bottom, transparent 0 22%, rgba(240,244,248,.86) 22% 74%, transparent 74%),
    linear-gradient(118deg, rgba(255,255,255,.10), rgba(0,0,0,.26)) !important;
}
/* grade favo de mel da fonte */
.m-favo{
  background-color:#161b21 !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0 2px, transparent 2.4px),
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.42)) !important;
  background-size:9px 9px, 100% 100% !important;
}
/* SSD M.2 com chips */
.m-m2{
  background-image:
    linear-gradient(to right, transparent 0 14%, rgba(22,28,34,.92) 14% 44%, transparent 44% 50%,
                    rgba(22,28,34,.92) 50% 80%, transparent 80%),
    linear-gradient(118deg, rgba(255,255,255,.10), rgba(0,0,0,.22)) !important;
}
/* topo da bomba do water cooler */
.m-bomba{
  background-image:
    radial-gradient(circle at 50% 50%, var(--ac,#48c8ff) 0 32%, rgba(20,25,32,.9) 34%),
    linear-gradient(118deg, rgba(255,255,255,.12), rgba(0,0,0,.3)) !important;
}
.botao-power{ border-radius:50%; box-shadow:0 0 8px currentColor; border:1px solid rgba(255,255,255,.25); }
.brilho{ box-shadow:0 0 12px var(--f,#fff); }

.p3.entrou{ animation:entra .55s cubic-bezier(.2,.8,.3,1) both; }
@keyframes entra{ from{ opacity:0; transform:translate3d(var(--x,0),calc(var(--y,0px) - 90px),var(--z,0)) } }
@media (prefers-reduced-motion:reduce){ .p3.entrou{animation:none} .palco{transition:none} }

/* ---- ventoinhas ---- */
.ventoinha{
  border-radius:50%; overflow:hidden;
  background-color:var(--aro,#161b21) !important;
  background-image:radial-gradient(circle, rgba(0,0,0,.55) 0 30%, transparent 32%) !important;
  border:1px solid rgba(255,255,255,.13) !important;
}
.pas{
  position:absolute; inset:3px; border-radius:50%;
  background:
    conic-gradient(from 0deg,
      rgba(200,215,235,.13) 0 6%, rgba(0,0,0,.30) 6% 14%,
      rgba(200,215,235,.13) 14% 20%, rgba(0,0,0,.30) 20% 28%,
      rgba(200,215,235,.13) 28% 34%, rgba(0,0,0,.30) 34% 42%,
      rgba(200,215,235,.13) 42% 48%, rgba(0,0,0,.30) 48% 56%,
      rgba(200,215,235,.13) 56% 62%, rgba(0,0,0,.30) 62% 70%,
      rgba(200,215,235,.13) 70% 76%, rgba(0,0,0,.30) 76% 84%,
      rgba(200,215,235,.13) 84% 90%, rgba(0,0,0,.30) 90%);
  animation:gira 2.8s linear infinite;
}
.hub{
  position:absolute; left:50%; top:50%; width:32%; height:32%;
  margin:-16% 0 0 -16%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4a545f, #1b2027);
  border:1px solid rgba(255,255,255,.14);
}
@keyframes gira{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .pas{animation:none} }

/* bloco fora da tela: congela tudo que anima, sem tirar do lugar */
.fora-da-tela,
.fora-da-tela *{ animation-play-state:paused !important; }

.rgb{ animation:rgbpulso 5s ease-in-out infinite; }
@keyframes rgbpulso{ 0%,100%{ filter:hue-rotate(0deg) } 50%{ filter:hue-rotate(50deg) brightness(1.15) } }

.p3.fantasma .fc{ background:transparent !important; border:1px dashed rgba(150,175,200,.22); box-shadow:none; }
.p3.destaque .fc{ box-shadow:inset 0 0 0 1px var(--acc), 0 0 22px rgba(255,106,31,.32); }

.chao{ position:absolute; transform-style:preserve-3d; opacity:.45;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/26px 26px,
    radial-gradient(closest-side, rgba(255,106,31,.11), transparent 70%);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);
  mask-image:radial-gradient(closest-side,#000,transparent);
}

/* controles */
.visor-ctrl{ display:flex; flex-wrap:wrap; gap:7px; padding:12px 14px; border-bottom:1px solid var(--linha); align-items:center; }
.btn-ctrl{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--disp); font-size:12.5px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--txt2);
  background:var(--sup2); border:1px solid var(--linha); border-radius:var(--r); padding:7px 11px;
  transition:border-color .15s,color .15s,background .15s;
}
.btn-ctrl svg{ stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; }
.btn-ctrl:hover{ border-color:var(--linha2); color:var(--txt); }
.btn-ctrl[aria-pressed="true"],.btn-ctrl.is-on{ border-color:var(--acc); color:var(--acc-cl); background:var(--acc-fr); }
.visor-vistas{ display:flex; gap:5px; flex-wrap:wrap; }
.btn-vista{ padding:6px 9px; font-size:11.5px; }
.zoom{ display:flex; align-items:center; gap:9px; margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); }
.zoom input{ width:92px; accent-color:var(--acc); cursor:pointer; }

/* legenda */
.legenda{ list-style:none; margin:0; padding:12px 14px; display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--linha); }
.legenda li{ display:contents; }
.leg-item{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--txt3);
  border:1px solid var(--linha); background:var(--sup2); padding:4px 8px; border-radius:var(--r);
  transition:color .15s, border-color .15s;
}
.leg-item:hover{ color:var(--txt); border-color:var(--linha2); }
.leg-item i{ width:8px; height:8px; border-radius:1px; background:var(--lc,#333); flex:0 0 auto; }
.leg-item.off{ opacity:.42; }

.visor-rodape{ padding:14px 16px 16px; }
.total-linha{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.total-linha span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); }
.total-linha b{ font-family:var(--disp); font-size:27px; }
.total-linha-2{ margin-top:2px; }
.total-linha-2 b{ font-size:15px; color:var(--txt2); font-family:var(--mono); font-weight:500; }

.selo-compat{ display:flex; align-items:center; gap:9px; margin:13px 0; padding:10px 12px; border:1px solid var(--linha); border-radius:var(--r); font-size:13.5px; background:var(--bg2); }
.selo-ponto{ width:9px; height:9px; border-radius:50%; background:var(--txt3); flex:0 0 auto; }
.selo-compat[data-st="ok"]{ border-color:rgba(63,216,139,.35); color:var(--ok); background:rgba(63,216,139,.07); }
.selo-compat[data-st="ok"] .selo-ponto{ background:var(--ok); }
.selo-compat[data-st="warn"]{ border-color:rgba(255,194,61,.35); color:var(--warn); background:rgba(255,194,61,.07); }
.selo-compat[data-st="warn"] .selo-ponto{ background:var(--warn); }
.selo-compat[data-st="err"]{ border-color:rgba(255,84,112,.38); color:var(--err); background:rgba(255,84,112,.07); }
.selo-compat[data-st="err"] .selo-ponto{ background:var(--err); }

/* =========================================================
   RESUMO + LAUDO
   ========================================================= */
.resumo-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:22px; align-items:start; }
.resumo-tab-caixa{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r); overflow-x:auto; }
.resumo-tab{ width:100%; border-collapse:collapse; min-width:600px; }
.resumo-tab th,.resumo-tab td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--linha); vertical-align:middle; }
.resumo-tab thead th{ font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--txt3); font-weight:400; background:var(--bg2); }
.resumo-tab tbody td{ font-size:14.5px; }
.rt-cat{ font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--txt3); white-space:nowrap; }
.rt-peca{ display:flex; align-items:center; gap:11px; }
.rt-mini{ width:44px; height:34px; flex:0 0 auto; background:var(--bg2); border:1px solid var(--linha); display:grid; place-items:center; padding:3px; }
.rt-mini svg,.rt-mini img{ width:100%; height:100%; object-fit:contain; }
.rt-nome b{ display:block; font-family:var(--disp); font-size:16px; text-transform:uppercase; line-height:1.15; font-weight:600; }
.rt-nome span{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--txt3); }
.rt-det{ font-size:13px; color:var(--txt2); max-width:250px; }
.rt-preco{ font-family:var(--disp); font-size:18px; white-space:nowrap; }
.rt-acoes{ display:flex; gap:6px; justify-content:flex-end; }
.mini-btn{ border:1px solid var(--linha2); border-radius:var(--r); padding:5px 9px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt2); text-decoration:none; transition:border-color .15s,color .15s; white-space:nowrap; }
.mini-btn:hover{ border-color:var(--acc); color:var(--acc-cl); }
.mini-btn.mb-x:hover{ border-color:var(--err); color:var(--err); }
.resumo-tab tfoot th{ font-family:var(--disp); font-size:17px; text-transform:uppercase; color:var(--txt2); border-bottom:0; }
.resumo-tab tfoot td{ font-family:var(--disp); font-size:25px; border-bottom:0; }
.rt-falta td{ color:var(--txt3); }
.rt-falta .rt-nome b{ color:var(--txt3); font-weight:500; }

.laudo{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r); }
.laudo-cab{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--linha); }
.laudo-cab h3{ font-size:19px; }
.laudo-selo{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border:1px solid var(--linha2); color:var(--txt3); }
.laudo-selo[data-st="ok"]{ color:var(--ok); border-color:rgba(63,216,139,.4); background:rgba(63,216,139,.08); }
.laudo-selo[data-st="warn"]{ color:var(--warn); border-color:rgba(255,194,61,.4); background:rgba(255,194,61,.08); }
.laudo-selo[data-st="err"]{ color:var(--err); border-color:rgba(255,84,112,.4); background:rgba(255,84,112,.08); }
.laudo-lista{ list-style:none; margin:0; padding:6px 0; max-height:560px; overflow-y:auto; }
.laudo-lista li{ display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid var(--linha); }
.laudo-lista li:last-child{ border-bottom:0; }
.lp{ width:9px; height:9px; border-radius:50%; margin-top:6px; flex:0 0 auto; background:var(--txt3); }
.st-ok .lp{ background:var(--ok); } .st-warn .lp{ background:var(--warn); }
.st-err .lp{ background:var(--err); } .st-na .lp{ background:var(--linha2); }
.laudo-lista h4{ font-size:15px; margin-bottom:3px; letter-spacing:.03em; }
.st-ok h4{ color:var(--txt); } .st-warn h4{ color:var(--warn); } .st-err h4{ color:var(--err); } .st-na h4{ color:var(--txt3); }
.laudo-lista p{ margin:0; font-size:13.5px; color:var(--txt2); line-height:1.45; }
.laudo-lista .cod{ font-family:var(--mono); font-size:11px; color:var(--txt3); }
.laudo-nota{ padding:13px 18px; border-top:1px solid var(--linha); background:var(--bg2); }
.laudo-nota p{ margin:0; font-size:12.5px; color:var(--txt3); }
.pt{ display:inline-block; width:8px; height:8px; border-radius:50%; margin:0 2px; }
.pt-ok{ background:var(--ok); } .pt-warn{ background:var(--warn); } .pt-err{ background:var(--err); }

/* =========================================================
   COMPARADOR
   ========================================================= */
.comp-topo{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; }
.comp-cats{ display:flex; gap:6px; flex-wrap:wrap; flex:1 1 380px; }
.chip-c{
  font-family:var(--disp); font-size:13.5px; text-transform:uppercase; letter-spacing:.05em;
  border:1px solid var(--linha); background:var(--sup); color:var(--txt2);
  padding:7px 12px; border-radius:var(--r); transition:border-color .15s,color .15s,background .15s;
}
.chip-c:hover{ border-color:var(--linha2); color:var(--txt); }
.chip-c.is-on{ border-color:var(--acc); color:var(--acc-cl); background:var(--acc-fr); }
.comp-busca-caixa{ position:relative; flex:1 1 340px; }
.sugestoes{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; margin:0; padding:5px;
  list-style:none; background:var(--sup2); border:1px solid var(--linha2); border-radius:var(--r);
  max-height:330px; overflow-y:auto; box-shadow:0 22px 50px rgba(0,0,0,.6);
}
.sug{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--r); width:100%; text-align:left; transition:background .12s; }
.sug:hover,.sug.foco{ background:var(--acc-fr); }
.sug-img{ width:40px; height:30px; flex:0 0 auto; background:var(--bg2); border:1px solid var(--linha); display:grid; place-items:center; padding:2px; }
.sug-img svg,.sug-img img{ width:100%; height:100%; object-fit:contain; }
.sug b{ display:block; font-size:14.5px; font-weight:600; }
.sug span{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt3); }
.sug em{ margin-left:auto; font-style:normal; font-family:var(--disp); font-size:15px; color:var(--acc-cl); white-space:nowrap; }
.sug-vazio{ padding:12px; color:var(--txt3); font-size:14px; }

.duelos{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.duelos > span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); }
#duelos-lista{ display:flex; gap:7px; flex-wrap:wrap; }
.duelo{
  font-size:13px; border:1px dashed var(--linha2); border-radius:100px; padding:5px 13px; color:var(--txt2);
  transition:border-color .15s,color .15s,background .15s;
}
.duelo:hover{ border-color:var(--acc); color:var(--acc-cl); background:var(--acc-fr); border-style:solid; }
.duelo b{ font-weight:600; color:var(--txt); }
.duelo:hover b{ color:var(--acc-cl); }

.comp-chips{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:18px; }
.chip-sel{ display:inline-flex; align-items:center; gap:10px; background:var(--sup); border:1px solid var(--linha2); border-radius:var(--r); padding:7px 8px 7px 12px; }
.chip-sel b{ font-size:14px; font-weight:600; }
.chip-sel .x{ width:22px; height:22px; border-radius:3px; display:grid; place-items:center; color:var(--txt3); border:1px solid var(--linha); font-size:14px; line-height:1; transition:color .15s,border-color .15s; }
.chip-sel .x:hover{ color:var(--err); border-color:var(--err); }
.chip-vazio{ font-size:13.5px; color:var(--txt3); border:1px dashed var(--linha2); border-radius:var(--r); padding:9px 14px; }

.comp-area{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r); overflow-x:auto; }
.comp-nada{ padding:46px 24px; text-align:center; color:var(--txt3); }
.comp-nada b{ color:var(--txt2); display:block; font-family:var(--disp); font-size:19px; text-transform:uppercase; margin-bottom:7px; }
.comp-tab{ width:100%; border-collapse:collapse; min-width:620px; }
.comp-tab th,.comp-tab td{ padding:13px 16px; border-bottom:1px solid var(--linha); text-align:left; vertical-align:top; }
.comp-tab tr td:first-child,.comp-tab tr th:first-child{ width:190px; }
.ct-rot{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt3); font-weight:400; white-space:nowrap; }
.ct-cab{ background:var(--bg2); }
.ct-prod{ display:flex; flex-direction:column; gap:9px; }
.ct-img{ height:112px; background:linear-gradient(160deg,#0d1014,#14191f); border:1px solid var(--linha); display:grid; place-items:center; padding:10px; }
.ct-img svg,.ct-img img{ max-height:100%; width:100%; object-fit:contain; }
.ct-marca{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); }
.ct-nome{ font-family:var(--disp); font-size:19px; text-transform:uppercase; line-height:1.1; }
.comp-tab td.ct-preco{ font-family:var(--disp); font-size:24px; color:var(--txt); }
.ct-preco small{ display:block; font-family:var(--mono); font-size:10px; color:var(--txt3); letter-spacing:.08em; text-transform:uppercase; margin-top:3px; }
.ct-melhor{ position:relative; }
.ct-melhor::after{ content:"melhor"; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ok); border:1px solid rgba(63,216,139,.4); background:rgba(63,216,139,.1); padding:1px 5px; margin-left:8px; vertical-align:middle; }
.barra{ height:7px; background:var(--sup3); border-radius:100px; overflow:hidden; margin:6px 0 3px; }
.barra i{ display:block; height:100%; background:linear-gradient(90deg,var(--acc),#ffab6b); border-radius:100px; transition:width .5s cubic-bezier(.2,.8,.3,1); }
.barra-l{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--txt3); letter-spacing:.06em; }
.perf-bloco + .perf-bloco{ margin-top:11px; }
.ct-nota{ display:flex; align-items:center; gap:8px; }
.ct-nota b{ font-family:var(--disp); font-size:22px; }
.ct-nota span{ font-size:12px; color:var(--txt3); }
.ct-vered{ font-size:13.5px; color:var(--txt2); line-height:1.5; }
.comp-tab .ct-acao a{ display:inline-flex; }

/* =========================================================
   GUIA
   ========================================================= */
.guia-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; }
.chip-f{
  font-family:var(--disp); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  border:1px solid var(--linha); background:var(--sup); color:var(--txt2); padding:6px 13px; border-radius:100px;
  transition:border-color .15s,color .15s,background .15s;
}
.chip-f:hover{ border-color:var(--linha2); color:var(--txt); }
.chip-f.is-on{ border-color:var(--acc); color:var(--acc-cl); background:var(--acc-fr); }
.guia-filtro{ display:flex; gap:6px; }

.passos{ list-style:none; margin:0; padding:0; counter-reset:p; }
.passo{ border:1px solid var(--linha); border-radius:var(--r); background:var(--sup); margin-bottom:9px; overflow:hidden; }
.passo-cab{ display:flex; align-items:center; gap:15px; width:100%; padding:16px 18px; text-align:left; transition:background .15s; }
.passo-cab:hover{ background:var(--sup2); }
.passo-n{ font-family:var(--mono); font-size:12px; color:var(--acc); border:1px solid var(--acc-fr2); background:var(--acc-fr); width:31px; height:31px; display:grid; place-items:center; flex:0 0 auto; }
.passo-tit{ flex:1; }
.passo-tit h3{ font-size:19px; letter-spacing:.02em; }
.passo-tit p{ margin:3px 0 0; font-size:13px; color:var(--txt3); }
.passo-nv{ font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; padding:3px 7px; border:1px solid currentColor; flex:0 0 auto; }
.passo-seta{ stroke:var(--txt3); fill:none; stroke-width:2; transition:transform .25s; flex:0 0 auto; }
.passo.aberto .passo-seta{ transform:rotate(180deg); }
.passo-corpo{ display:none; padding:2px 18px 20px 64px; }
.passo.aberto .passo-corpo{ display:block; }
.passo-corpo p{ font-size:15px; color:var(--txt2); }
.passo-corpo ol,.passo-corpo ul{ margin:0 0 14px; padding-left:20px; color:var(--txt2); font-size:15px; }
.passo-corpo li{ margin-bottom:7px; }
.passo-corpo b{ color:var(--txt); }
.dica{ display:flex; gap:11px; border-left:2px solid var(--acc); background:var(--acc-fr); padding:11px 14px; margin-top:13px; }
.dica.perigo{ border-color:var(--err); background:rgba(255,84,112,.07); }
.dica-et{ font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--acc); flex:0 0 auto; padding-top:3px; }
.dica.perigo .dica-et{ color:var(--err); }
.dica p{ margin:0; font-size:14px; color:var(--txt2); }

.guia-lado > div{ background:var(--sup); border:1px solid var(--linha); border-radius:var(--r); padding:19px 20px; margin-bottom:14px; }
.guia-lado h4{ font-size:16px; margin-bottom:12px; color:var(--txt); }
.bloco-aviso ul{ margin:0; padding-left:17px; color:var(--txt2); font-size:14px; }
.bloco-aviso li{ margin-bottom:8px; }
.bloco-aviso{ border-left:2px solid var(--err) !important; }
.ferramentas{ list-style:none; margin:0; padding:0; }
.ferramentas li{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--linha); font-size:14px; color:var(--txt2); }
.ferramentas li:last-child{ border-bottom:0; }
.ferramentas b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); padding-top:3px; }
.ferramentas li:nth-child(n+4) b{ color:var(--txt3); }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ border-top:1px solid var(--linha); }
.faq-item{ border-bottom:1px solid var(--linha); }
.faq-cab{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:19px 4px; text-align:left; transition:color .15s; }
.faq-cab:hover{ color:var(--acc-cl); }
.faq-cab h3{ font-size:19px; letter-spacing:.02em; }
.faq-mais{ position:relative; width:17px; height:17px; flex:0 0 auto; }
.faq-mais::before,.faq-mais::after{ content:""; position:absolute; background:var(--acc); }
.faq-mais::before{ left:0; right:0; top:8px; height:1.5px; }
.faq-mais::after{ top:0; bottom:0; left:8px; width:1.5px; transition:transform .25s; }
.faq-item.aberto .faq-mais::after{ transform:scaleY(0); }
.faq-corpo{ display:none; padding:0 4px 22px; max-width:78ch; }
.faq-item.aberto .faq-corpo{ display:block; }
.faq-corpo p{ color:var(--txt2); font-size:15.5px; margin-bottom:.7em; }
.faq-corpo p:last-child{ margin-bottom:0; }
.faq-corpo b{ color:var(--txt); }

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape{ background:var(--bg2); padding:60px 0 0; }
.rodape-in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr); gap:40px; padding-bottom:44px; }
.rodape-marca{ display:flex; gap:14px; align-items:flex-start; }
.rodape-txt{ font-size:14.5px; color:var(--txt2); margin:0; }
.rodape-txt b{ font-family:var(--disp); font-size:19px; color:var(--txt); text-transform:uppercase; letter-spacing:.02em; }
.rodape-nav{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.rodape-nav h5,.rodape-aviso h5{ font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--txt3); font-weight:400; margin-bottom:13px; }
.rodape-nav a{ display:block; font-size:14.5px; color:var(--txt2); text-decoration:none; padding:4px 0; transition:color .15s; }
.rodape-nav a:hover{ color:var(--acc-cl); }
.lj{ display:block; font-size:14.5px; color:var(--txt2); padding:4px 0; }
.rodape-aviso p{ font-size:13.5px; color:var(--txt2); }
.rodape-aviso b{ color:var(--txt); }
.rodape-preco{ color:var(--txt3) !important; font-size:12.5px !important; }
.rodape-fim{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--linha); padding:18px 0 calc(18px + env(safe-area-inset-bottom,0px)); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt3); }
.rodape-fim-d{ color:var(--linha2); }

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,120%);
  background:var(--sup2); border:1px solid var(--acc); color:var(--txt);
  padding:12px 20px; border-radius:var(--r); font-size:14.5px; z-index:80;
  box-shadow:0 18px 44px rgba(0,0,0,.6); transition:transform .3s cubic-bezier(.2,.9,.3,1);
  max-width:calc(100% - 32px); text-align:center;
}
.toast.vis{ transform:translate(-50%,0); }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1180px){
  .mont{ grid-template-columns:1fr; }
  .mont-dir{ position:static; order:-1; }
  .visor{ height:400px; }
  .resumo-grid{ grid-template-columns:1fr; }
  .laudo-lista{ max-height:none; }
  .guia-grid{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr; gap:34px; }
  .hero-art{ max-width:430px; margin-inline:auto; width:100%; }
  .bp-tag-1{ right:6px; } .bp-tag-2{ left:6px; }
  .rodape-in{ grid-template-columns:1fr 1fr; }
  .rodape-aviso{ grid-column:1/-1; }
}
@media (max-width:860px){
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--bg2); border-bottom:1px solid var(--linha); padding:8px 20px 16px; display:none;
  }
  .nav.aberto{ display:flex; }
  .nav a{ padding:13px 6px; border-bottom:1px solid var(--linha); border-radius:0; font-size:17px; }
  .hamb{ display:block; }
  .topo-in{ gap:12px; }
  .secao{ padding:58px 0; }
  .sec-cab-btns{ margin-left:0; width:100%; }
}
@media (max-width:640px){
  .wrap,.wrap-estreito{ width:calc(100% - 28px); }
  .hero{ padding-top:46px; }
  .hero-nums{ gap:22px; }
  .hero-nums b{ font-size:25px; }
  .btn{ padding:11px 17px; font-size:14px; }
  .pecas{ grid-template-columns:1fr; padding:14px; max-height:none; }
  .trilha{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); }
  .visor{ height:330px; }
  .zoom{ margin-left:0; width:100%; }
  .zoom input{ flex:1; width:auto; }
  .passo-corpo{ padding-left:20px; }
  .rodape-in{ grid-template-columns:1fr; }
  .comp-tab tr td:first-child,.comp-tab tr th:first-child{ width:120px; }

  /* resumo vira lista de cards no celular */
  .resumo-tab-caixa{ overflow-x:visible; }
  .resumo-tab{ min-width:0; display:block; }
  .resumo-tab thead{ display:none; }
  .resumo-tab tbody,.resumo-tab tr,.resumo-tab td{ display:block; width:auto; }
  .resumo-tab tbody tr{ border-bottom:1px solid var(--linha); padding:14px 16px; }
  .resumo-tab tbody td{ border:0; padding:2px 0; }
  .resumo-tab .rt-cat{ margin-bottom:6px; }
  .resumo-tab .rt-det{ max-width:none; }
  .resumo-tab .rt-preco{ text-align:left; margin-top:6px; }
  .resumo-tab .rt-acoes{ justify-content:flex-start; margin-top:10px; }
  .resumo-tab tfoot{ display:block; }
  .resumo-tab tfoot tr{ display:flex; align-items:baseline; justify-content:space-between; padding:14px 16px; }
  .resumo-tab tfoot th,.resumo-tab tfoot td{ display:block; padding:0; }
  .sec-cab{ gap:14px; }
  .painel-filtros{ flex-direction:column; align-items:stretch; }
  .painel-filtros .busca{ flex:0 0 auto; }
  .painel-filtros .check{ justify-content:center; }
}