/* public/oportunidades.css — CSS só de página das telas de /oportunidades e /melhores.
   O que se repete com o resto do app já está em app.css (vendorado) e estilo.css (dono:
   agente FRONTEND). Regra de sempre: nenhuma cor literal, só var(--token) do tema "garagem"
   (public/tema.css). Dono: agente OPORTUNIDADES (oportunidades/**). */

/* ── o desempate com public/app.js ───────────────────────────────────────────────────────
   app.js não conhece /oportunidades nem /melhores: no boot ele sempre esconde #ssr e decide
   entre #viewHome e #viewModelo pela URL, caindo em mostrarHome() pra qualquer caminho que não
   comece com /carros. Sem isto, a home apareceria por cima destas páginas assim que o JS
   carregasse. Um seletor por #id tem mais especificidade que o `[hidden]{display:none!important}`
   de estilo.css (também !important). oportunidades/casca.mjs marca `body.pagina-oportunidades`
   nas páginas desta trilha (mesmo truque de public/comparacoes.css e public/analises.css). */
body.pagina-oportunidades #ssr{display:block!important}
body.pagina-oportunidades #viewHome{display:none!important}
body.pagina-oportunidades #viewModelo{display:none!important}

/* ══════════════════════════════════════════════════════════════════════════════════════
   A. /oportunidades
   ══════════════════════════════════════════════════════════════════════════════════════ */
.avoportunidades{max-width:var(--maxw);margin:0 auto;padding:22px 18px 40px;display:flex;
  flex-direction:column;gap:18px}

.avoportunidades-cabecalho h1{font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 6px}
.avoportunidades-fonte{font-size:13.5px;color:var(--text2);margin:0}

/* aviso fixo (docs/OPORTUNIDADES.md §A) — mesmo tratamento visual do aviso de amostra pequena
   de public/analises.css: fundo --warn-soft, texto --warn, nunca vermelho literal. */
.avoportunidades-aviso{background:var(--warn-soft);border-radius:var(--radius-sm);padding:12px 15px}
.avoportunidades-aviso p{margin:0;font-size:13.5px;color:var(--warn);line-height:1.55}

/* chips de carroceria: MESMO componente .pilula de app.css (usado nos chips de versão/ano/uf
   do app), só que filtrando no cliente sobre os cartões já renderizados nesta página. */
.avoportunidades-chips{display:flex;gap:8px;flex-wrap:wrap}

/* .grade-anuncios (estilo.css) já traz max-width/margin/padding próprios — zera aqui pra não
   somar com o padding de .avoportunidades e criar um respiro duplo nas bordas. */
.avoportunidades .grade-anuncios,.avoportunidades .lista-mais-wrap{max-width:none;margin:0;padding:0}
.anuncio-modelo{display:block;font-size:12.5px;font-weight:800;color:var(--accent);
  text-decoration:none;margin-top:-2px}
.anuncio-modelo:hover{text-decoration:underline}

.avoportunidades-faq h2{font-size:16px;font-weight:800;color:var(--accent);margin:0 0 12px}
.avoportunidades-faq-item{margin:0 0 16px}
.avoportunidades-faq-p{font-size:14.5px;font-weight:700;color:var(--text);margin:0 0 4px}
.avoportunidades-faq-r{font-size:14px;color:var(--text2);line-height:1.55;margin:0;max-width:70ch}

.avoportunidades-metodologia{background:var(--surface2);border-radius:var(--radius);padding:16px 18px}
.avoportunidades-metodologia h2{font-size:13px;font-weight:800;color:var(--text2);margin:0 0 8px;
  text-transform:uppercase;letter-spacing:.04em}
.avoportunidades-metodologia p{font-size:13px;line-height:1.6;color:var(--text2);margin:0;max-width:76ch}

.avoportunidades-cta{display:flex;justify-content:center;padding:8px 0 4px}
.avoportunidades-cta .btn{max-width:420px}

/* ══════════════════════════════════════════════════════════════════════════════════════
   B. /melhores (hub) e /melhores/<carroceria>-ate-<valor>
   ══════════════════════════════════════════════════════════════════════════════════════ */
.avmelhores{max-width:var(--maxw);margin:0 auto;padding:22px 18px 40px;display:flex;
  flex-direction:column;gap:18px}
.avmelhores-trilha{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.avmelhores-trilha a{color:var(--muted);text-decoration:none}
.avmelhores-trilha a:hover{color:var(--accent)}
.avmelhores-cabecalho h1{font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 6px}
.avmelhores-fonte{font-size:13.5px;color:var(--text2);margin:0}

/* ── ranking: um cartão por modelo ────────────────────────────────────────────────────── */
.avmelhores-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.avmelhores-card{display:flex;flex-direction:column;gap:12px}
.avmelhores-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.avmelhores-card-head h3{margin:0;font-size:16.5px;font-weight:800;line-height:1.3}
.avmelhores-card-head h3 a{color:var(--text);text-decoration:none}
.avmelhores-card-head h3 a:hover{color:var(--accent)}
/* 4 kpis pequenos por cartão (docs/OPORTUNIDADES.md §B: "4 números"): reaproveita .kpi de
   app.css, só reduz o tile pra caber 4 num cartão de ranking, não um dashboard inteiro. */
.avmelhores-kpis{grid-template-columns:repeat(2,1fr);gap:8px}
.avmelhores-kpis .kpi{padding:10px 12px}
.avmelhores-kpis .kpi .rotulo{font-size:11px}
.avmelhores-kpis .kpi .valor{font-size:19px}
.avmelhores-destaque{background:var(--surface2);border-radius:var(--radius-sm);padding:10px 12px}
.avmelhores-destaque-rot{display:block;font-size:10.5px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
.avmelhores-destaque p{margin:0;font-size:13px;color:var(--text2);line-height:1.5}
.avmelhores-destaque .ver-portal{margin-left:6px;padding:4px 10px;font-size:11.5px}
.avmelhores-card-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.avmelhores-card-acoes .btn{flex:1 1 140px;text-align:center;text-decoration:none}

.avmelhores-texto{max-width:70ch}
.avmelhores-texto p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 12px}
.avmelhores-faq h2{font-size:16px;font-weight:800;color:var(--accent);margin:0 0 12px}
.avmelhores-faq-item{margin:0 0 16px}
.avmelhores-faq-p{font-size:14.5px;font-weight:700;color:var(--text);margin:0 0 4px}
.avmelhores-faq-r{font-size:14px;color:var(--text2);line-height:1.55;margin:0;max-width:70ch}
.avmelhores-metodologia{background:var(--surface2);border-radius:var(--radius);padding:16px 18px}
.avmelhores-metodologia h2{font-size:13px;font-weight:800;color:var(--text2);margin:0 0 8px;
  text-transform:uppercase;letter-spacing:.04em}
.avmelhores-metodologia p{font-size:13px;line-height:1.6;color:var(--text2);margin:0;max-width:76ch}
.avmelhores-cta{display:flex;justify-content:center;padding:8px 0 4px}
.avmelhores-cta .btn{max-width:420px}

/* ── hub /melhores, agrupado por carroceria (mesmo padrão de .avcomparar-hub-*) ──────────── */
.avmelhores-hub-grupo{display:flex;flex-direction:column;gap:12px}
.avmelhores-hub-grupo h2{font-size:13px;font-weight:800;color:var(--muted);margin:0;
  text-transform:uppercase;letter-spacing:.05em}
.avmelhores-hub-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.avmelhores-hub-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:15px 16px;display:flex;flex-direction:column;gap:8px;
  text-decoration:none;transition:border-color .15s,box-shadow .15s}
.avmelhores-hub-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.avmelhores-hub-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avmelhores-hub-card h3{margin:0;font-size:15.5px;font-weight:800;color:var(--text);line-height:1.35}
.avmelhores-hub-meta{font-size:12.5px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
.avmelhores-hub-ver{margin:auto 0 0;padding-top:8px;border-top:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:5px}
.avmelhores-hub-ver span{transition:transform .15s}
.avmelhores-hub-card:hover .avmelhores-hub-ver span{transform:translateX(3px)}

@media (max-width:640px){
  .avoportunidades,.avmelhores{padding:18px 16px 32px}
  .avmelhores-hub-grade{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .avmelhores-hub-grade{grid-template-columns:1fr}
  .avmelhores-kpis{grid-template-columns:1fr 1fr}
}