/* 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}

/* FAQ, faixa de decisão e nota de fonte de /oportunidades e /melhores moram em
   public/conteudo.css (conteudo/blocos.mjs) desde 11/09/2026. */

/* ══════════════════════════════════════════════════════════════════════════════════════
   B. /melhores (hub) e /melhores/<carroceria>-ate-<valor>
   ══════════════════════════════════════════════════════════════════════════════════════ */
/* Namespace comum (cor/tipografia dos textos soltos); o LAYOUT de cada página (hub em 1
   coluna vs. filha com índice) mora em `.avmelhores-hub` abaixo e em public/conteudo.css —
   evita a página filha herdar `display:flex` de um layout que ela não usa. */
.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 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 0 4px}
/* Hub: layout de 1 coluna, como antes do redesenho (só as filhas ganharam 3 colunas). */
.avmelhores.avmelhores-hub{max-width:var(--maxw);margin:0 auto;padding:22px 18px 40px;
  display:flex;flex-direction:column;gap:18px}

/* ── 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}
/* ações do cartão (11/09/2026, Bruno: "nuh que CTA horrível"): eram dois botões do mesmo
   peso, com o texto quebrando em três linhas. Agora um botão só, curto, com a largura do
   cartão, e "Comparar com X" como link embaixo. */
.avmelhores-card-acoes{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto}
.avmelhores-card-ver{width:100%;padding:12px 16px;font-size:14.5px}
.avmelhores-card-ver span,.avmelhores-card-comparar span{display:inline-block;transition:transform .15s}
.avmelhores-card-ver:hover span,.avmelhores-card-comparar:hover span{transform:translateX(3px)}
.avmelhores-card-comparar{align-self:center;padding:4px 2px;font-size:13.5px;font-weight:700;
  color:var(--accent);text-decoration:none}
.avmelhores-card-comparar:hover{text-decoration:underline;text-underline-offset:3px}
.avmelhores-card-comparar:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.avmelhores-texto{max-width:70ch}
.avmelhores-texto p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 12px}
/* ── 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)}

/* casca e índice das filhas de /melhores: public/conteudo.css desde 11/09/2026 */
.conteudo-central{min-width:0;max-width:760px}
.conteudo-secao{margin-top:26px}
.conteudo-secao h2{font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.01em;
  margin:0 0 8px}
.conteudo-secao > p{font-size:14px;color:var(--text2);line-height:1.6;margin:0 0 14px;max-width:70ch}
.resposta-direta{font-size:15.5px;color:var(--text);line-height:1.6;margin:2px 0 10px;max-width:68ch}
/* ── cartão novo do ranking (redesenho 09/09 — o antigo era 4 caixinhas cinza com "DESTAQUE,
   KM NA MEDIANA OU ABAIXO"): mesma família visual da home (.modelo-rico/.faixa-preco de
   estilo.css, importado como MARCAÇÃO em public/lib.js::construirFaixaPreco — nunca duplicado
   aqui, só o texto que ele gera). ─────────────────────────────────────────────────────────── */
.avmelhores-card{gap:10px}
.avmelhores-card-topo{display:flex;gap:12px;align-items:flex-start}
.avmelhores-card-foto{flex:none;width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface2)}
.avmelhores-card-foto-img{width:100%;height:100%;object-fit:cover;display:block}
.avmelhores-card-foto-vazia{background:
    linear-gradient(135deg,var(--surface2) 25%,transparent 25%) -6px 0/12px 12px,
    linear-gradient(135deg,transparent 75%,var(--surface2) 75%) -6px 0/12px 12px,var(--surface)}
.avmelhores-card-titulo{min-width:0;flex:1}
.avmelhores-card-titulo h3{margin:0 0 2px;font-size:16px;font-weight:800;line-height:1.3}
.avmelhores-card-titulo h3 a{color:var(--text);text-decoration:none}
.avmelhores-card-titulo h3 a:hover{color:var(--accent)}
.avmelhores-card-oferta{margin:0;font-size:12px;color:var(--muted);font-family:var(--serif-num)}
.avmelhores-card .faixa-preco{margin:2px 0 0}
.avmelhores-card-chips{display:flex;gap:6px;flex-wrap:wrap}
.avmelhores-card-chips .tag{font-size:11px}
.avmelhores-fipe-pendente{color:var(--muted);background:var(--surface2)}
.avmelhores-card-achado{margin:0;background:var(--good-soft);border-radius:var(--radius-sm);
  padding:9px 11px;font-size:13px;color:var(--text);line-height:1.5}
.avmelhores-card-achado-rot{display:block;font-size:10.5px;font-weight:800;color:var(--good);
  text-transform:uppercase;letter-spacing:.04em;margin:0 0 3px}
.avmelhores-card-achado-link{color:var(--good);font-weight:700;text-decoration:none}
.avmelhores-card-achado-link:hover{text-decoration:underline}

/* ── tabela-resumo (AEO: <caption> + linhas alinhadas à direita) ─────────────────────────── */
.avmelhores-tabela caption{text-align:left;font-size:12.5px;color:var(--muted);padding:0 0 8px;
  caption-side:top}
.avmelhores-tabela td:first-child a{color:var(--text);font-weight:700;text-decoration:none}
.avmelhores-tabela td:first-child a:hover{color:var(--accent)}

/* ── hub "em coleta" (decisão do Bruno 09/09: nunca link quebrado pro crawler) ───────────── */
.avmelhores-hub-card-vazio{background:var(--surface2);border:1px dashed var(--line2);
  border-radius:var(--radius);padding:15px 16px;display:flex;flex-direction:column;gap:8px;opacity:.75}
.avmelhores-hub-card-vazio h3{margin:0;font-size:15.5px;font-weight:800;color:var(--text2);line-height:1.35}
.avmelhores-hub-ver-vazio{margin:auto 0 0;padding-top:8px;border-top:1px dashed var(--line2);
  font-size:12.5px;color:var(--muted)}

@media (max-width:640px){
  .avoportunidades,.avmelhores-hub{padding:18px 16px 32px}
  .avmelhores-hub-grade{grid-template-columns:1fr 1fr}
  .avmelhores-card-topo{gap:10px}
  .avmelhores-card-foto{width:52px;height:52px}
}
@media (max-width:420px){
  .avmelhores-hub-grade{grid-template-columns:1fr}
  .avmelhores-kpis{grid-template-columns:1fr 1fr}
}