/* Design 03/11/2026 (skill frontend-design): tema CLARO é o padrão; escuro com as cores oficiais da Loja MWO. */
:root { --fundo:#f5f4f8; --cartao:#ffffff; --borda:#e4e0ec; --texto:#17131f; --suave:#625b70; --cor:#7a2cf0; --cor-forte:#5f1fc4; --verde:#0a8f5a; --amarelo:#a16207;
  --realce:#efe8fd; --botao:#7a2cf0; --topo-fundo:rgba(255,255,255,.94); --flutuante:rgba(255,255,255,.92); --texto-bloco:#2e2838; --forte:#17131f; --sombra:0 1px 2px rgba(23,19,31,.06), 0 8px 24px rgba(23,19,31,.06);
  color-scheme:light; }
[data-tema="escuro"] { --fundo:#0f0b14; --cartao:#17121f; --borda:#2a2236; --texto:#f0ecf8; --suave:#9c95ab; --cor:#9b6bff; --cor-forte:#b892ff; --verde:#2bd69a; --amarelo:#facc15;
  --realce:#241a36; --botao:#7a2cf0; --topo-fundo:rgba(15,11,20,.92); --flutuante:rgba(15,11,20,.85); --texto-bloco:#d6d0e2; --forte:#ffffff; --sombra:0 10px 30px rgba(0,0,0,.45); color-scheme:dark; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--fundo); color:var(--texto); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
h1 { font-size:28px; line-height:1.2; letter-spacing:-.02em; font-weight:800; margin:10px 0 12px; } h2 { font-size:20px; letter-spacing:-.01em; font-weight:700; margin:0 0 12px; }
.preco, .antigo, .pc-total b, .pc-preco { font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--cor); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* Cabeçalho: linha 1 = marca, busca e ações (Telegram, tema, conta); linha 2 = trilho de seções */
.topo { position:sticky; top:0; z-index:10; background:var(--topo-fundo); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--borda); }
.topo-linha { max-width:1280px; margin:0 auto; padding:14px 20px 10px; display:flex; gap:20px; align-items:center; }
.marca { display:flex; align-items:center; gap:8px; text-decoration:none; flex:none; }
.marca-img { height:40px; width:auto; display:block; }
.marca-selo { background:var(--botao); color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em; padding:5px 9px; border-radius:9px; }
.marca-nome { font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--forte); }
.busca { flex:1; max-width:640px; min-width:0; position:relative; display:flex; align-items:center; background:var(--fundo); border:1px solid var(--borda); border-radius:12px;
  transition:border-color .15s, box-shadow .15s, background .15s; }
.busca:hover { border-color:color-mix(in srgb, var(--cor) 40%, var(--borda)); }
.busca:focus-within { background:var(--cartao); border-color:var(--cor); box-shadow:0 0 0 4px color-mix(in srgb, var(--cor) 16%, transparent); }
.busca svg { width:18px; height:18px; margin-left:14px; flex:none; fill:none; stroke:var(--suave); stroke-width:2; stroke-linecap:round; }
.busca input { flex:1; min-width:0; background:none; border:0; outline:none; color:var(--texto); padding:11px 12px; font:inherit; font-size:15px; }
.busca input::placeholder { color:var(--suave); }
.busca button { margin:4px; background:var(--botao); color:#fff; border:0; border-radius:9px; padding:8px 16px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; transition:background .15s; }
.busca button:hover { background:#5f1fc4; }
.topo-acoes { margin-left:auto; display:flex; align-items:center; gap:6px; flex:none; }
.acao { height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 12px; border-radius:10px; border:1px solid transparent; background:none; color:var(--texto);
  text-decoration:none; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.acao svg { width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.acao:hover { background:var(--realce); color:var(--cor-forte); }
.acao.tema { width:40px; padding:0; justify-content:center; }
.tema .sol { display:none; } .tema .lua { display:block; } [data-tema="escuro"] .tema .sol { display:block; } [data-tema="escuro"] .tema .lua { display:none; }
.acao.telegram { color:#1688c9; } .acao.telegram:hover { background:color-mix(in srgb, #229ed9 12%, transparent); color:#0b6fa6; }
.acao.entrar { border-color:var(--borda); } .acao.entrar:hover { border-color:var(--cor); }
.dropdown.conta summary { height:40px; display:inline-flex; align-items:center; gap:8px; padding:0 12px 0 5px; border-radius:999px; border:1px solid var(--borda); font-weight:600; font-size:14px; }
.dropdown.conta summary:hover { border-color:var(--cor); background:var(--realce); }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--botao); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; }
.conta-nome { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown.conta .dropdown-lista { left:auto; right:0; min-width:230px; }
.dropdown.conta summary::after { display:none; }

/* Trilho de seções: hover com fundo suave, ativo com traço violeta embaixo */
.menu { max-width:1280px; margin:0 auto; padding:0 8px; display:flex; gap:2px; align-items:stretch; }
.menu > a, .dropdown > summary { position:relative; display:flex; align-items:center; gap:6px; color:var(--suave); text-decoration:none; padding:10px 12px 12px; font-size:14px; font-weight:600;
  border-radius:8px 8px 0 0; cursor:pointer; list-style:none; white-space:nowrap; transition:color .15s, background .15s; }
.menu > a::after, .menu .dropdown > summary::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px; background:var(--cor); transform:scaleX(0); transition:transform .18s; }
.menu > a:hover, .menu .dropdown > summary:hover, .menu .dropdown[open] > summary { color:var(--forte); background:var(--realce); }
.menu > a.ativo, .menu .dropdown > summary.ativo { color:var(--cor-forte); }
.menu > a.ativo::after, .menu .dropdown > summary.ativo::after, .menu > a:hover::after { transform:scaleX(1); }
.menu > a:hover:not(.ativo)::after { opacity:.35; }
.dropdown summary::-webkit-details-marker { display:none; }
.menu .dropdown > summary::before { content:""; order:2; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .18s; }
.menu .dropdown[open] > summary::before { transform:translateY(1px) rotate(225deg); }
.dropdown { position:relative; display:flex; }
.dropdown-lista { position:absolute; top:calc(100% + 8px); left:0; z-index:30; background:var(--cartao); border:1px solid var(--borda); border-radius:14px; padding:8px; min-width:250px; box-shadow:var(--sombra); }
.dropdown-lista.colunas { display:grid; grid-template-columns:repeat(2, minmax(200px, 1fr)); gap:2px; min-width:460px; }
.dropdown-lista a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; border-radius:8px; text-decoration:none; font-size:14px; transition:background .12s, color .12s; }
.dropdown-lista a:hover { background:var(--realce); color:var(--cor-forte); } .dropdown-lista small { color:var(--suave); font-variant-numeric:tabular-nums; }

main { max-width:1280px; margin:0 auto; padding:16px 20px; }
section { margin:28px 0; }
.hero { margin:12px 0 18px; } .hero h1 { font-size:28px; margin:0 0 6px; } .hero p { color:var(--suave); margin:0; }
.categorias-grade-antiga { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; margin:18px 0; }
.categorias-grade a { background:var(--cartao); border:1px solid var(--borda); border-radius:10px; padding:14px; text-decoration:none; display:flex; flex-direction:column; gap:2px; }
.categorias-grade a:hover { border-color:var(--cor); } .categorias-grade small { color:var(--suave); }
.secao-topo { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.secao-topo a { color:var(--cor); text-decoration:none; font-size:14px; white-space:nowrap; }
.trilha { font-size:13px; color:var(--suave); margin:4px 0; } .trilha a { color:var(--suave); }
.info { color:var(--suave); font-size:14px; }
.filtros { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.filtros label { font-size:13px; color:var(--suave); display:flex; gap:6px; align-items:center; }
.filtros select { background:var(--cartao); color:var(--texto); border:1px solid var(--borda); border-radius:8px; padding:8px 10px; font-size:14px; }
.vazio { color:var(--suave); padding:30px 0; }

/* Cartões */
.grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.grade.jogos { grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); }
.cartao { background:var(--cartao); border:1px solid var(--borda); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:transform .15s, border-color .15s; text-decoration:none; }
.cartao:hover { border-color:color-mix(in srgb, var(--cor) 55%, var(--borda)); }
/* Foto sempre num quadro branco de tamanho fixo, centralizada e inteira (sem cortar nem deformar o layout) */
.foto { position:relative; aspect-ratio:1; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.foto img { position:absolute; inset:8%; width:84%; height:84%; object-fit:contain; }
.jogo .foto { aspect-ratio:460/215; background:#000; } .jogo .foto img { inset:0; width:100%; height:100%; object-fit:cover; }
.sem-foto { color:#8a93a3; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.selo { position:absolute; top:8px; left:8px; background:var(--verde); color:#fff; font-weight:700; font-size:13px; padding:3px 8px; border-radius:6px; }
.selo.inline { position:static; margin-left:10px; vertical-align:middle; }
.corpo { padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; text-decoration:none; }
.loja { font-size:12px; font-weight:600; color:var(--suave); }
.titulo { font-size:14px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
.precos { margin-top:auto; } .antigo { color:var(--suave); text-decoration:line-through; font-size:13px; margin-right:6px; }
.preco { font-size:20px; font-weight:700; color:var(--verde); }
.precos.grande .preco { font-size:32px; } .precos.grande .antigo { font-size:16px; }
.tag-menor { font-size:12px; color:var(--amarelo); font-weight:600; }
.prazo { font-size:12px; color:var(--suave); }
.botoes { display:flex; gap:6px; flex-wrap:wrap; padding:0 12px 12px; }
.botao { display:inline-block; background:var(--botao); color:#fff; text-decoration:none; padding:8px 12px; border-radius:9px; font-size:13px; font-weight:600; text-align:center; transition:background .15s, border-color .15s; }
.botao:hover { background:#5f1fc4; } .botao.sec:hover { background:var(--realce); border-color:var(--cor); }
.botao.sec { background:none; border:1px solid var(--borda); color:var(--texto); }
.botao.grande { display:block; margin-top:12px; padding:14px 22px; font-size:16px; }
.paginacao { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:26px 0; }
.pag { padding:8px 13px; border-radius:8px; border:1px solid var(--borda); text-decoration:none; font-size:14px; }
.pag.atual { background:var(--botao); border-color:var(--botao); color:#fff; } a.pag:hover { border-color:var(--cor); }
.reticencias { padding:8px 4px; color:var(--suave); }

/* Página de produto/jogo */
.produto { display:grid; grid-template-columns:minmax(0, 460px) 1fr; gap:28px; margin:14px 0; }
.produto-foto { background:#fff; border-radius:14px; aspect-ratio:1; position:relative; overflow:hidden; }
.produto-foto img { position:absolute; inset:6%; width:88%; height:88%; object-fit:contain; }
.produto-foto.larga { aspect-ratio:460/215; background:#000; } .produto-foto.larga img { inset:0; width:100%; height:100%; object-fit:cover; }
.produto-foto .sem-foto { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.produto-info h1 { font-size:24px; margin:4px 0 12px; }
.metrica { font-size:14px; color:var(--texto); margin:8px 0; } .metrica.destaque { color:var(--amarelo); font-weight:700; }
.nota { font-size:12px; color:var(--suave); }
.destaques { margin:18px 0 0; padding-left:20px; color:var(--texto); font-size:14px; } .destaques li { margin:4px 0; }
.aviso { background:#3b2a0a; border:1px solid #a16207; color:#fde68a; padding:12px 14px; border-radius:10px; margin:10px 0; }
.bloco { background:var(--cartao); border:1px solid var(--borda); border-radius:12px; padding:18px 20px; }
.bloco p { margin:0 0 10px; color:#cfd5df; }
.ficha { width:100%; border-collapse:collapse; font-size:14px; }
.ficha th, .ficha td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borda); vertical-align:top; }
.ficha th { color:var(--suave); font-weight:500; width:38%; }
.grafico { margin:0; } .grafico svg { width:100%; max-width:760px; height:auto; }
.grafico .eixo { stroke:var(--borda); } .grafico .rot { fill:var(--suave); font-size:12px; }
.grafico .linha { fill:none; stroke:var(--cor); stroke-width:2.5; } .grafico .ponto { fill:var(--cor); } .grafico .ponto.menor { fill:var(--verde); }
.ig-banner { min-height:120px; margin:16px 0; }
footer { border-top:1px solid var(--borda); color:var(--suave); font-size:12px; padding:20px; max-width:1280px; margin:30px auto 0; }
footer a { color:var(--suave); }

@media (max-width: 760px) {
  .produto { grid-template-columns:1fr; }
  .grade { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .grade.jogos { grid-template-columns:1fr; }
  h1, .hero h1 { font-size:22px; }
  .grade .preco { font-size:16px; } .grade .antigo { font-size:12px; display:block; }
  .filtros { gap:8px; }
}

/* Telegram, cupom */
.faixa-telegram { max-width:1240px; margin:30px auto 0; padding:18px 20px; background:linear-gradient(90deg,#123047,#16222f); border:1px solid #1d5d84;
  border-radius:14px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.faixa-telegram div { display:flex; flex-direction:column; gap:2px; } .faixa-telegram span { color:var(--suave); font-size:14px; }
.faixa-telegram .botao { background:#229ed9; padding:12px 18px; font-size:15px; }
.telegram-mini { display:block; margin-top:10px; color:#5fc3f5; font-size:14px; text-decoration:none; }
.tag-cupom { font-size:12px; color:#5fc3f5; font-weight:600; }
.cupom { margin:12px 0; padding:12px 14px; border:1px dashed var(--verde); border-radius:10px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; font-size:14px; }
.cupom .codigo { font-family:ui-monospace,monospace; font-size:16px; color:var(--verde); }
.cupom button { background:var(--verde); color:#04210f; border:0; border-radius:8px; padding:8px 12px; font-weight:700; cursor:pointer; }
@media (max-width: 760px) { .faixa-telegram { margin:24px 12px 0; } }

/* Ilustração nossa por categoria (sem texto) quando não há foto limpa */
.ilustracao { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff;
  background:radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 75%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000) 100%); }
.ilustracao[hidden] { display:none; }
.ilustracao svg { width:42%; height:42%; opacity:.92; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
/* Conta e favoritos */
.cartao { position:relative; }
.fav { position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--borda); background:rgba(13,15,20,.8); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0; }
.fav svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.fav:hover { border-color:#f43f5e; } .fav.ativo svg { fill:#f43f5e; stroke:#f43f5e; } .fav:disabled { opacity:.6; }
.fav.grande { position:static; width:auto; height:auto; border-radius:8px; padding:10px 14px; display:inline-flex; gap:8px; align-items:center; font-size:14px; font-weight:600; margin:10px 0 0; background:none; color:var(--texto); }
.conta-caixa { max-width:420px; margin:30px auto; background:var(--cartao); border:1px solid var(--borda); border-radius:14px; padding:24px; }
.conta-caixa h1 { margin:0 0 6px; font-size:24px; }
.conta-abas { display:flex; gap:6px; margin:16px 0; } .conta-abas button { flex:1; background:none; border:1px solid var(--borda); color:var(--suave); border-radius:8px; padding:9px; cursor:pointer; font-size:14px; }
.conta-abas button.ativo { color:#fff; border-color:var(--cor); background:color-mix(in srgb, var(--cor) 18%, transparent); }
.conta-caixa form { display:flex; flex-direction:column; gap:12px; }
.conta-caixa label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--suave); }
.conta-caixa input { background:var(--fundo); color:var(--texto); border:1px solid var(--borda); border-radius:8px; padding:10px 12px; font-size:15px; }
.conta-caixa input:focus { outline:none; border-color:var(--cor); }
.conta-caixa button.botao { border:0; cursor:pointer; } .conta-caixa button:disabled { opacity:.6; }
.conta-link { font-size:13px; color:var(--suave); }
.conta-msg { min-height:1em; font-size:14px; margin:12px 0 0; } .conta-msg.erro { color:#f87171; } .conta-msg.ok { color:var(--verde); }
.tag-encerrada { font-size:12px; color:#f87171; font-weight:600; }
.busca input { min-width:0; }
.conta-caixa form[hidden] { display:none; }
/* Ajustes por tema */
.topo { background:var(--topo-fundo); }
.bloco p { color:var(--texto-bloco); }
.fav { background:var(--flutuante); color:var(--forte); }
.cartao { box-shadow:0 1px 2px rgba(23,19,31,.05); } [data-tema="escuro"] .cartao { box-shadow:none; }
.aviso { background:#fff7e0; border-color:#e8b339; color:#6b4500; } [data-tema="escuro"] .aviso { background:#3b2a0a; border-color:#a16207; color:#fde68a; }
.faixa-telegram { background:linear-gradient(90deg,#e3f3fc,#eef6fb); border-color:#bfe0f2; } [data-tema="escuro"] .faixa-telegram { background:linear-gradient(90deg,#123047,#16222f); border-color:#1d5d84; }
.telegram-mini, .tag-cupom { color:#0b7bb5; } [data-tema="escuro"] .telegram-mini, [data-tema="escuro"] .tag-cupom { color:#5fc3f5; }
.conta-caixa input { background:var(--cartao); }

/* Voltar ao topo */
.voltar-topo { position:fixed; right:18px; bottom:18px; z-index:20; width:46px; height:46px; border-radius:50%; border:0; background:var(--cor); color:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.35); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .2s, transform .2s; }
.voltar-topo.visivel { opacity:1; transform:none; pointer-events:auto; }
.voltar-topo svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Celular */
@media (max-width: 760px) {
  main { padding-left:14px; padding-right:14px; }
  .grade.jogos { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grade .corpo { padding:10px; gap:4px; } .grade .titulo { font-size:13px; } .grade .loja { font-size:11px; }
  .botoes { padding:0 10px 10px; } .botoes .botao { flex:1; padding:8px 6px; font-size:12px; }
  .produto-info h1 { font-size:20px; } .botao.grande { width:100%; box-sizing:border-box; }
  .fav.grande { width:100%; justify-content:center; box-sizing:border-box; }
  .faixa-telegram { margin:24px 14px 0; flex-direction:column; align-items:stretch; text-align:center; }
  .conta-caixa { margin:16px auto; padding:18px; }
  .voltar-topo { right:12px; bottom:12px; width:42px; height:42px; }
  .filtros { flex-wrap:wrap; } .filtros .info { width:100%; }
  .ficha th { width:42%; }
}
@media (max-width: 380px) { .grade.jogos { grid-template-columns:1fr; } }
/* Avisos de preço */
.avisos { margin:14px 0 22px; } .avisos h2 { margin:0 0 4px; font-size:18px; }
.avisos-linha { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid var(--borda); font-size:14px; }
.avisos-linha label { display:flex; gap:8px; align-items:center; }
.avisos-linha select { background:var(--fundo); color:var(--texto); border:1px solid var(--borda); border-radius:8px; padding:6px 8px; }
.avisos-linha button { cursor:pointer; } .avisos-linha button:disabled { opacity:.6; }
/* Montador de PC Gamer */
.pc-quiz { background:var(--cartao); border:1px solid var(--borda); border-radius:12px; padding:18px 20px; display:grid; grid-template-columns:repeat(3, 1fr) auto; gap:12px; align-items:end; margin:14px 0 20px; }
.pc-quiz h2 { grid-column:1/-1; margin:0; font-size:18px; }
.pc-quiz label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--suave); }
.pc-quiz select, .pc-passo select { background:var(--fundo); color:var(--texto); border:1px solid var(--borda); border-radius:8px; padding:9px 10px; font-size:14px; width:100%; }
.pc-quiz .botao { border:0; cursor:pointer; padding:10px 16px; font-size:14px; }
.pc-quiz-res { grid-column:1/-1; margin:0; color:var(--verde); font-weight:600; min-height:1em; }
.pc-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin-bottom:22px; }
.pc-montagem { background:var(--cartao); border:1px solid var(--borda); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; scroll-margin-top:120px; }
.pc-montagem.destaque { border-color:var(--cor); box-shadow:0 0 0 2px color-mix(in srgb, var(--cor) 40%, transparent); }
.pc-topo { display:flex; justify-content:space-between; align-items:baseline; gap:8px; } .pc-topo h2 { margin:0; font-size:20px; }
.pc-faixa { font-size:12px; color:var(--suave); } .pc-uso { margin:0; font-size:14px; color:var(--texto-bloco); }
.pc-total { display:flex; flex-direction:column; margin:4px 0; } .pc-total small { color:var(--suave); font-size:12px; } .pc-total b { font-size:24px; color:var(--verde); }
.pc-pecas { list-style:none; margin:0 0 6px; padding:0; font-size:13px; }
.pc-pecas li { display:grid; grid-template-columns:96px 1fr auto; gap:8px; padding:6px 0; border-top:1px solid var(--borda); align-items:baseline; }
.pc-tipo { color:var(--suave); font-size:12px; } .pc-nome a { color:var(--texto); } .pc-preco { white-space:nowrap; font-weight:600; }
.pc-montador { display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start; }
.pc-passo { background:var(--cartao); border:1px solid var(--borda); border-left:4px solid var(--borda); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.pc-passo.ok { border-left-color:var(--verde); } .pc-passo.erro { border-left-color:#f87171; }
.pc-passo label { display:block; font-weight:600; margin-bottom:6px; } .pc-escolhida { margin-top:6px; font-size:13px; } .pc-escolhida a { color:var(--cor); }
.pc-resumo { position:sticky; top:130px; } .pc-resumo h2 { margin:0 0 6px; }
.pc-avisos { margin:8px 0; padding-left:18px; color:#f87171; font-size:13px; } .pc-tudo-ok { color:var(--verde); font-weight:700; }
.pc-lista { list-style:none; padding:0; margin:10px 0; font-size:13px; } .pc-lista li { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--borda); }
.pc-lista a { color:var(--texto); } .pc-resumo .botao { border:1px solid var(--borda); cursor:pointer; width:100%; }
@media (max-width: 760px) {
  .pc-quiz { grid-template-columns:1fr; } .pc-montador { grid-template-columns:1fr; } .pc-resumo { position:static; }
  .pc-pecas li { grid-template-columns:1fr auto; } .pc-tipo { grid-column:1/-1; }
}
/* Montador v2: cartões com foto */
.pc-montador { grid-template-columns:1fr 360px; }
.pc-passo h2 { margin:0 0 10px; font-size:17px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .pc-passo h2 small { font-weight:400; color:var(--suave); font-size:13px; }
.pc-num { width:26px; height:26px; border-radius:50%; background:var(--borda); display:inline-grid; place-items:center; font-size:13px; }
.pc-passo.ok .pc-num { background:var(--verde); color:#fff; } .pc-passo.bloqueada { opacity:.6; }
.pc-opcoes { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.pc-opcao { background:var(--fundo); border:1px solid var(--borda); border-radius:10px; padding:8px; display:flex; flex-direction:column; gap:6px; text-align:left; color:var(--texto); cursor:pointer; font:inherit; }
.pc-opcao:hover { border-color:var(--cor); } .pc-opcao.marcada { border-color:var(--cor); box-shadow:0 0 0 2px color-mix(in srgb, var(--cor) 45%, transparent); }
.pc-opcao img, .pc-sem-foto { width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; border-radius:6px; display:block; }
.pc-opcao.sem { justify-content:center; min-height:80px; }
.pc-op-nome { font-size:13px; line-height:1.3; } .pc-op-preco { font-weight:700; color:var(--verde); font-size:14px; margin-top:auto; }
.pc-falta { color:var(--amarelo); font-size:14px; }
.pc-lista li { align-items:center; } .pc-lista img { width:34px; height:34px; object-fit:contain; background:#fff; border-radius:4px; flex:none; } .pc-lista a { flex:1; }
.pc-pecas li { grid-template-columns:40px 90px 1fr auto; align-items:center; }
.pc-pecas img, .pc-pecas .pc-sem-foto { width:40px; height:40px; object-fit:contain; background:#fff; border-radius:6px; aspect-ratio:auto; }
@media (max-width: 760px) {
  .pc-montador { grid-template-columns:1fr; } .pc-opcoes { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pc-pecas li { grid-template-columns:40px 1fr auto; } .pc-pecas .pc-tipo { grid-column:2/-1; grid-row:1; } .pc-pecas img, .pc-pecas .pc-sem-foto { grid-row:1/3; }
}
.pc-selo { display:block; font-size:11px; color:var(--verde); font-weight:600; }
.mais-barato { margin:12px 0 4px; padding:12px 14px; border:1px solid var(--verde); border-radius:10px; display:flex; flex-direction:column; gap:6px; }
.mais-barato b { color:var(--verde); } .mais-barato small { color:var(--suave); font-size:13px; } .mais-barato .botao { margin-top:4px; }
.rodape-links { display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 0 14px; } .rodape-links a { color:var(--suave); font-size:13px; }
.bloco h3 { font-size:15px; margin:14px 0 4px; }
.prazo.urgente, .metrica.urgente { color:#ef4444; font-weight:700; } .selo.ultimo { background:#ef4444; }
/* Montador v3: plataforma, espaços que abrem/fecham, status e consumo */
.pc-plataformas { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.pc-plataformas .pc-opcao small { color:var(--suave); font-size:12px; }
.pc-escolha-atual { display:flex; align-items:center; gap:12px; } .pc-escolha-atual img { width:56px; height:56px; object-fit:contain; background:#fff; border-radius:8px; flex:none; }
.pc-escolha-atual > span { flex:1; display:flex; flex-direction:column; gap:2px; font-size:14px; } .pc-escolha-atual .botao { border:1px solid var(--borda); cursor:pointer; }
.pc-adicionar { width:100%; padding:14px; border:1px dashed var(--borda); border-radius:10px; background:none; color:var(--cor); font-weight:600; cursor:pointer; font:inherit; }
.pc-adicionar:hover { border-color:var(--cor); }
.pc-passo h2 small { font-weight:400; color:var(--suave); font-size:12px; }
.pc-status { margin:12px 0; font-size:13px; } .pc-status-topo { display:flex; justify-content:space-between; margin-bottom:6px; } .pc-status small { color:var(--suave); }
.pc-barra { height:8px; background:var(--borda); border-radius:99px; overflow:hidden; margin-bottom:4px; } .pc-barra span { display:block; height:100%; background:var(--verde); border-radius:99px; transition:width .3s; }
.pc-barra.medio span { background:var(--amarelo); } .pc-barra.alto span { background:#ef4444; }
/* Filtros em botões */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.chip { padding:6px 12px; border-radius:999px; border:1px solid var(--borda); text-decoration:none; font-size:13px; color:var(--suave); background:var(--cartao); }
.chip small { color:var(--suave); opacity:.8; } .chip:hover { border-color:var(--cor); color:var(--texto); }
.chip.ativo { background:var(--botao); border-color:var(--botao); color:#fff; } .chip.ativo small { color:#fff; }
@media (max-width: 760px) { .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-14px; margin-right:-14px; padding:0 14px; } .chip { flex:none; } }
.pc-alt { display:block; font-size:11px; color:var(--suave); } .pc-alt a { color:var(--suave); }
/* Guias e textos editoriais */
.intro { max-width:900px; margin:6px 0 12px; line-height:1.6; }
.guias { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; } .guia { text-decoration:none; color:var(--texto); }
.guia h2 { font-size:18px; margin:0 0 6px; } .guia p { color:var(--suave); margin:0; } .guia:hover { border-color:var(--cor); }
.artigo { max-width:780px; line-height:1.7; font-size:16px; } .artigo h2 { margin:26px 0 8px; font-size:21px; } .artigo a { color:var(--cor); }
.artigo ul { padding-left:20px; } .artigo li { margin:6px 0; }

/* Cabeçalho no celular: marca + ações em cima, busca inteira, seções roláveis */
@media (max-width: 760px) {
  .topo-linha { flex-wrap:wrap; padding:10px 14px 8px; gap:10px; }
  .marca-nome { font-size:18px; }
  .topo-acoes { order:2; gap:2px; } .acao { padding:0 9px; } .acao span, .conta-nome { display:none; }
  .dropdown.conta summary { padding:0 4px; border-color:transparent; }
  .busca { order:3; flex-basis:100%; max-width:none; } .busca button { display:none; } .busca input { padding:10px 12px; }
  .menu { padding:0 6px; overflow-x:auto; scrollbar-width:none; } .menu::-webkit-scrollbar { display:none; }
  .menu > a, .dropdown > summary { padding:9px 10px 11px; font-size:13px; }
  .dropdown { position:static; }
  .dropdown-lista, .dropdown-lista.colunas { position:fixed; left:10px; right:10px; min-width:0; max-height:70vh; overflow:auto; grid-template-columns:1fr; }
  .dropdown.conta .dropdown-lista { left:10px; right:10px; }
}
@media (max-width: 760px) {  /* pista de que o trilho de seções rola para o lado */
  .topo { --borda-fade:var(--topo-fundo); }
  .topo::after { content:""; position:absolute; right:0; bottom:1px; width:36px; height:42px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--cartao)); }
}

/* Páginas (03/11, skill frontend-design): hierarquia de raio — cartão 14, botão 9, selo 6; ousadia fica só no cabeçalho */
.hero { margin:18px 0 20px; } .hero h1 { font-size:34px; line-height:1.15; letter-spacing:-.025em; max-width:22ch; margin:0 0 10px; }
.hero p { color:var(--suave); font-size:16px; max-width:62ch; }
.categorias-faixa { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin:0 0 8px; }
.categorias-faixa a { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--cartao); border:1px solid var(--borda); border-radius:14px;
  text-decoration:none; transition:border-color .15s, background .15s; }
.categorias-faixa a:hover { border-color:color-mix(in srgb, var(--c, var(--cor)) 50%, var(--borda)); background:color-mix(in srgb, var(--cartao) 92%, var(--cor)); }
.categorias-faixa .cat-texto { display:flex; flex-direction:column; min-width:0; } .categorias-faixa b { font-size:14px; font-weight:700; line-height:1.25; }
.categorias-faixa small { color:var(--suave); font-size:12px; font-variant-numeric:tabular-nums; }
.categorias-faixa .cat-icone { flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); }
.cat-icone svg { width:22px; height:22px; display:block; }
section > .secao-topo { margin-bottom:4px; } .secao-topo h2 { font-size:22px; }
.secao-topo a { font-weight:600; } .secao-topo a:hover { text-decoration:underline; text-underline-offset:3px; }
.cartao { border-radius:14px; }
.selo { border-radius:6px; font-size:12px; font-weight:800; padding:3px 7px; }
.titulo { font-weight:500; }
.botao.largo { flex:1; }
.bloco { border-radius:14px; padding:20px 22px; } .bloco h2 { font-size:18px; }
.produto-foto { border:1px solid var(--borda); }
.produto-info h1 { font-size:28px; letter-spacing:-.02em; line-height:1.2; }
.trilha a { text-decoration:none; } .trilha a:hover { color:var(--cor-forte); text-decoration:underline; }
.ficha tr:last-child th, .ficha tr:last-child td { border-bottom:0; }
footer { max-width:1280px; margin:40px auto 0; padding:32px 20px 24px; border-top:1px solid var(--borda); color:var(--suave); font-size:13px; }
.rodape-topo { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .rodape-topo p { margin:0; }
.rodape-topo .marca-nome { font-size:17px; }
footer .rodape-links { display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; margin:0 0 24px; }
footer .rodape-links > div:first-child { columns:2; column-gap:24px; } footer .rodape-links h3 { column-span:all; }
footer .rodape-links h3 { font-size:13px; font-weight:700; color:var(--texto); margin:0 0 8px; }
footer .rodape-links a { display:block; padding:3px 0; color:var(--suave); text-decoration:none; font-size:13px; } footer .rodape-links a:hover { color:var(--cor-forte); text-decoration:underline; }
.rodape-legal { max-width:90ch; font-size:12px; line-height:1.6; } .rodape-legal p { margin:0 0 8px; }
.rodape-fim { display:flex; gap:16px; margin:14px 0 0; font-size:12px; } .rodape-fim a { color:var(--suave); }
@media (max-width: 1100px) { .categorias-faixa { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hero h1 { font-size:26px; } .hero p { font-size:15px; }
  .categorias-faixa { display:flex; overflow-x:auto; scrollbar-width:none; margin:0 -14px 4px; padding:0 14px 4px; } .categorias-faixa::-webkit-scrollbar { display:none; }
  .categorias-faixa a { flex:none; padding:10px 12px; } .categorias-faixa .cat-icone { width:34px; height:34px; } .categorias-faixa b { white-space:nowrap; }
  .secao-topo h2 { font-size:19px; }
  footer .rodape-links { grid-template-columns:1fr 1fr; } footer .rodape-links > div:first-child { grid-column:1/-1; }
  .produto-info h1 { font-size:22px; }
}
/* Montador: peça escolhida com botão direto para a loja (Michel 03/11) */
.pc-acoes { display:flex; flex-direction:column; gap:6px; flex:none; } .pc-acoes .botao { white-space:nowrap; }
a.pc-alt { text-decoration:underline; text-underline-offset:2px; } a.pc-alt:hover { color:var(--cor-forte); }
@media (max-width: 760px) { .pc-escolha-atual { flex-wrap:wrap; } .pc-acoes { flex-direction:row; width:100%; } .pc-acoes .botao { flex:1; text-align:center; } }
/* Montagem automática no quiz (03/11) */
.pc-quiz-res { grid-column:1/-1; color:var(--texto); font-weight:400; }
.pc-auto { border-top:1px solid var(--borda); padding-top:14px; margin-top:4px; }
.pc-auto-titulo { font-weight:700; margin:0 0 6px; }
.pc-auto .pc-lista li { display:grid; grid-template-columns:34px 110px 1fr auto; gap:10px; align-items:center; }
.pc-auto .pc-lista li > span:last-child { white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums; }
.pc-auto .pc-lista li:not(:has(img)) { grid-template-columns:110px 1fr auto; padding-left:44px; }
.pc-auto-fim { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:8px 0; }
.pc-auto-fim .pc-total { margin:0; }
@media (max-width: 760px) { .pc-auto .pc-lista li { grid-template-columns:34px 1fr auto; } .pc-auto .pc-tipo { grid-column:2/-1; grid-row:1; }
  .pc-auto .pc-lista li img { grid-row:1/3; } .pc-auto .pc-lista li:not(:has(img)) { grid-template-columns:1fr auto; padding-left:0; } .pc-auto-fim .botao { width:100%; } }
.pc-minima { margin:12px 0 4px; border:2px solid #f59e0b; background:color-mix(in srgb, #f59e0b 8%, var(--cartao)); border-radius:12px; padding:12px 16px; }
.pc-minima summary { cursor:pointer; font-weight:700; color:#9a5b00; } [data-tema="escuro"] .pc-minima summary { color:#fbbf24; }
.pc-minima summary:hover { text-decoration:underline; text-underline-offset:3px; } .pc-minima[open] summary { margin-bottom:6px; }
/* Avisos do resultado do PC: alerta (âmbar) e dica (verde), com ícone — Michel 03/11: "cor chamativa para o usuário saber" */
.pc-alerta, .pc-dica { display:flex; gap:12px; align-items:flex-start; margin:0 0 10px; padding:12px 14px; border-radius:12px; font-size:15px; line-height:1.45; }
.pc-alerta p, .pc-dica p { margin:0; }
.pc-alerta svg, .pc-dica svg { flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }
.pc-alerta { background:#fff4d6; border:1px solid #f5b70a; border-left:6px solid #f59e0b; color:#5c3a00; } .pc-alerta svg { color:#d97706; }
.pc-dica { background:#e6f7ee; border:1px solid #8fd8b0; border-left:6px solid #0a8f5a; color:#0b4a2f; } .pc-dica svg { color:#0a8f5a; }
[data-tema="escuro"] .pc-alerta { background:#3a2a06; border-color:#a16207; color:#fde68a; } [data-tema="escuro"] .pc-alerta svg { color:#fbbf24; }
[data-tema="escuro"] .pc-dica { background:#0b2e1f; border-color:#166c46; color:#bbf7d0; } [data-tema="escuro"] .pc-dica svg { color:#2bd69a; }
/* Termos e Privacidade (08/11/2026) */
.texto-legal { max-width: 760px; margin: 32px auto 64px; padding: 0 16px; }
.texto-legal h1 { font-size: 30px; margin: 0 0 12px; color: var(--forte); }
.texto-legal h2 { font-size: 19px; margin: 28px 0 8px; color: var(--forte); }
.texto-legal p, .texto-legal li { color: var(--texto-bloco); }