:root{
  --fundo:#05090d; --cromo:#03070a; --sup:#0a1017; --sup-alta:#101822; --poco:#02060a;
  --traco:#18222c; --traco-forte:#25323f;
  --tinta:#e9ecef; --tinta-2:#8892a0; --tinta-3:#59646f;
  --sinal:#00d99a; --sinal-fraco:#04291f;
  --esc-0:#00d99a; --esc-1:#38c98a; --esc-2:#93bf55; --esc-3:#d9a441; --esc-4:#e07a45; --esc-5:#e35060; --esc-na:#59646f;
  --serif:"Fraunces",Georgia,serif; --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --raio:12px; --raio-2:8px; --miolo:1240px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--tinta);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.miolo{max-width:var(--miolo);margin:0 auto;padding:0 24px}
a{color:inherit}
.cromo{position:sticky;top:0;z-index:20;background:#03070aee;backdrop-filter:blur(10px);border-bottom:1px solid var(--traco)}
.cromo .miolo{height:60px;display:flex;align-items:center;gap:18px}
.marca{font:500 14px var(--mono);display:flex;align-items:center;gap:8px}
.marca b{color:var(--sinal)}
.cursor{display:inline-block;width:8px;height:16px;background:var(--sinal);animation:pisca 1.1s steps(2) infinite}
@keyframes pisca{50%{opacity:0}}
.cromo nav{margin-left:auto;display:flex;gap:20px;font-size:13px;color:var(--tinta-2)}
.cromo nav a:hover{color:var(--tinta)}
.sec{padding:72px 0;border-top:1px solid var(--traco);scroll-margin-top:70px}
.sec-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.sec-n{font:500 12px var(--mono);color:var(--sinal)}
.sec-p{color:var(--tinta-3)}
.sec-k{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-3)}
.sec-cab h2{font:400 34px/1.1 var(--serif);margin:0}
.sec-c{margin-left:auto;font:400 12px var(--mono);color:var(--tinta-3)}
.abre{padding:84px 0 64px}
.abre h1{font:400 clamp(38px,6vw,62px)/1.06 var(--serif);margin:0 0 20px;max-width:16ch;letter-spacing:-.01em}
.abre h1 em{font-style:normal;color:var(--tinta-3)}
.abre p{max-width:62ch;color:var(--tinta-2);font-size:17px;margin:0 0 28px}
.botoes{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--raio-2);font:600 14px var(--sans);text-decoration:none;border:1px solid var(--traco-forte)}
.btn-1{background:var(--sinal);color:#012019;border-color:var(--sinal)}
.btn-2{color:var(--tinta-2)} .btn-2:hover{color:var(--tinta);background:var(--sup)}
.janela{background:var(--poco);border:1px solid var(--traco);border-radius:var(--raio);overflow:hidden}
.janela-cab{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--traco);font:400 12px var(--mono);color:var(--tinta-3)}
.bolha{width:9px;height:9px;border-radius:999px;background:var(--traco-forte)}
.janela-corpo{padding:16px 18px;font:400 13px/1.9 var(--mono)}
.janela-corpo .pr{color:var(--sinal)} .janela-corpo .cm{color:var(--tinta-3)}
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--traco)}
.placar div{padding:18px;border-right:1px solid var(--traco)}
.placar div:last-child{border-right:0}
.placar b{display:block;font:400 30px/1 var(--serif);margin-bottom:6px}
.placar span{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-3)}
.placar em{display:block;margin-top:6px;font:500 11px var(--mono);font-style:normal;color:var(--sinal)}
.piso{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--traco);border:1px solid var(--traco);border-radius:var(--raio);overflow:hidden}
.piso li{background:var(--sup);padding:16px 18px;display:grid;grid-template-columns:1fr 200px;gap:6px 24px;align-items:center}
.pl-cab{grid-column:1;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pl-cab a{text-decoration:none;font-weight:500} .pl-cab a:hover{color:var(--sinal)}
.pl-cat{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-3)}
.pl-barra{grid-column:1;height:6px;background:var(--poco);border-radius:999px;overflow:hidden}
.pl-barra i{display:block;height:100%;background:var(--esc-0);border-radius:999px}
.pl-num{grid-column:1;font:400 12px var(--mono);color:var(--tinta-2)}
.pl-num b{color:var(--tinta)}
.pl-preco{grid-column:2;grid-row:1/4;text-align:right;font:400 22px var(--serif)}
.pl-preco span{display:block;font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--sinal);margin-top:4px}
.degraus{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--traco);border:1px solid var(--traco);border-radius:var(--raio);overflow:hidden;margin-bottom:18px}
.deg{background:var(--sup);padding:16px;text-align:center;border-top:3px solid}
.deg b{display:block;font:400 26px var(--serif)}
.deg span{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-3)}
.deg.esc-1{border-color:var(--esc-1)} .deg.esc-2{border-color:var(--esc-2)}
.deg.esc-3{border-color:var(--esc-3)} .deg.esc-4{border-color:var(--esc-4)} .deg.esc-5{border-color:var(--esc-5)}
.nota{color:var(--tinta-2);font-size:14px;max-width:74ch}
.nota b{color:var(--tinta);font-weight:500}
.marcas{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.marca-bloco{background:var(--sup);border:1px solid var(--traco);border-radius:var(--raio);padding:20px}
.marca-bloco h3{margin:0 0 14px;font:400 22px var(--serif);display:flex;align-items:baseline;gap:10px}
.m-cont{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-3)}
.m-lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--traco)}
.m-lista li{background:var(--sup);padding:11px 0;display:grid;grid-template-columns:1fr 130px;gap:2px 14px}
.m-lista a{grid-column:1;text-decoration:none;font-size:14px;font-weight:500;line-height:1.35}
.m-lista a:hover{color:var(--sinal)}
.m-preco{grid-column:2;grid-row:1/3;text-align:right;font:400 18px var(--serif);align-self:center}
.m-loja{grid-column:1;font:400 11px var(--mono);color:var(--tinta-2)}
.m-faixa{grid-column:1;font:400 11px var(--mono);color:var(--tinta-3)}
.selo-marca{font:500 10px var(--mono);padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;border:1px solid}
.selo-marca.m-apple{color:#8ab4ff;border-color:#8ab4ff55;background:#8ab4ff14}
.selo-marca.m-huawei{color:#ff8a8a;border-color:#ff8a8a55;background:#ff8a8a14}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--traco-forte);border-radius:999px;text-decoration:none;font-size:14px;color:var(--tinta-2)}
.chip:hover{color:var(--tinta);border-color:var(--sinal);background:var(--sinal-fraco)}
.chip i{font:500 11px var(--mono);font-style:normal;color:var(--tinta-3)}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.ficha{background:var(--sup);border:1px solid var(--traco);border-radius:var(--raio);padding:18px;display:flex;flex-direction:column;gap:10px}
.ficha:hover{border-color:var(--traco-forte);background:var(--sup-alta)}
.ficha-topo{display:flex;align-items:center;gap:8px;min-height:20px}
.tier{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-3)}
.selo-piso{margin-left:auto;font:500 10px var(--mono);color:#012019;background:var(--sinal);padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.ficha h3{margin:0;font:500 15px/1.35 var(--sans);min-height:60px}
.ficha h3 a{text-decoration:none} .ficha h3 a:hover{color:var(--sinal)}
.rot{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-3)}
.preco{font:400 30px/1 var(--serif);margin:-4px 0 0}
.loja{font:400 12px var(--mono);color:var(--tinta-2);margin-top:-4px}
.escala{height:4px;background:linear-gradient(90deg,var(--esc-0),var(--esc-2),var(--esc-3),var(--esc-5));border-radius:999px;position:relative;opacity:.55;margin-top:2px}
.escala i{position:absolute;top:-3px;width:2px;height:10px;background:var(--tinta);border-radius:1px;transform:translateX(-1px)}
.ficha.esc-na .escala{opacity:.15} .ficha.esc-na .escala i{display:none}
.linha{display:flex;flex-direction:column;gap:3px}
.tag{font:500 12px var(--mono)}
.esc-0 .tag{color:var(--esc-0)} .esc-1 .tag{color:var(--esc-1)} .esc-2 .tag{color:var(--esc-2)}
.esc-3 .tag{color:var(--esc-3)} .esc-4 .tag{color:var(--esc-4)} .esc-5 .tag{color:var(--esc-5)}
.esc-na .tag{color:var(--esc-na)}
.faixa{font:400 12px var(--mono);color:var(--tinta-3)}
.org{display:block;font:400 11px var(--sans);color:var(--tinta-3);margin-top:2px}
.ate{color:var(--tinta-3)}
.acao{margin-top:auto;display:block;text-align:center;padding:10px;border:1px solid var(--traco-forte);border-radius:var(--raio-2);text-decoration:none;font:600 13px var(--sans);color:var(--tinta-2)}
.acao:hover{color:#012019;background:var(--sinal);border-color:var(--sinal)}
.rodape{border-top:1px solid var(--traco);padding:48px 0;color:var(--tinta-3);font-size:13px}
.rodape p{max-width:80ch;margin:0 0 10px}
@media(max-width:640px){
  .piso li{grid-template-columns:1fr}
  .pl-preco{grid-column:1;grid-row:auto;text-align:left}
  .degraus{grid-template-columns:repeat(2,1fr)}
}

/* páginas de categoria */
.abre-cat{padding:64px 0 40px}
.abre-cat h1{font:400 clamp(34px,5vw,52px)/1.06 var(--serif);margin:0 0 26px;letter-spacing:-.01em}
.placar-cat{border:1px solid var(--traco);border-radius:var(--raio);border-top:1px solid var(--traco)}
.lista{display:grid;gap:1px;background:var(--traco);border:1px solid var(--traco);border-radius:var(--raio);overflow:hidden}
.item{background:var(--sup);padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.item:hover{background:var(--sup-alta)}
.i-cab{display:flex;align-items:center;gap:10px}
.i-cat{font:400 11px var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-3)}
.item h3{margin:0;font:500 16px/1.4 var(--sans);max-width:80ch}
.item h3 a{text-decoration:none}
.item h3 a:hover{color:var(--sinal)}
.i-baixo{display:grid;grid-template-columns:220px 1fr 140px;gap:20px;align-items:center}
.i-preco b{display:block;font:400 24px/1.1 var(--serif);margin:2px 0}
.i-loja{font:400 11px var(--mono);color:var(--tinta-2)}
.i-faixa{display:flex;flex-direction:column;gap:3px}
.i-baixo .acao{margin:0;padding:9px 14px;align-self:center}
@media(max-width:760px){.i-baixo{grid-template-columns:1fr}.i-baixo .acao{width:100%}}