/* estilo.css — CSS de página do Radar de Carros. Só o que NÃO se repete entre produtos: o
   que se repete já está em app.css (vendorado). Veste o tema "garagem" (tema.css). Regra de
   sempre: nenhuma cor literal — só var(--token). */

:root{
  --serif-num:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0}
.app{min-height:100vh;display:flex;flex-direction:column}

/* ── topo ─────────────────────────────────────────────────────────────────── */
.topo{border-bottom:1px solid var(--line);background:var(--surface)}
.topo-linha{max-width:var(--maxw);margin:0 auto;padding:14px 18px;display:flex;
  align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);
  font-weight:800;font-size:17px;letter-spacing:-.01em}
.marca:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.marca svg{flex:none;width:26px;height:26px}
.marca b{color:var(--accent)}
.topo-nav{display:flex;gap:16px;align-items:center}
.topo-nav a{color:var(--text2);text-decoration:none;font-size:13.5px;font-weight:600}
.topo-nav a:hover{color:var(--accent)}

main{flex:1}

/* ── botão primário de página (a biblioteca não traz CTA; nasce aqui) ──────── */
.btn{appearance:none;border:1.5px solid transparent;border-radius:var(--radius-sm);
  font:inherit;font-weight:800;font-size:14px;padding:11px 18px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--accent-ink);transition:filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
.btn.fantasma{background:transparent;color:var(--accent);border-color:var(--line2)}
.btn.fantasma:hover{border-color:var(--accent);background:var(--accent-soft)}
.btn.pequeno{padding:8px 13px;font-size:13px}
.btn.largo{width:100%}

/* ── hero de busca ────────────────────────────────────────────────────────── */
.hero{background:var(--surface);border-bottom:1px solid var(--line)}
.hero-miolo{max-width:720px;margin:0 auto;padding:48px 18px 40px;text-align:left}
.hero h1{font-size:clamp(26px,4.4vw,38px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;margin:0 0 10px;color:var(--text)}
.hero p.sub{font-size:15.5px;color:var(--text2);margin:0 0 24px;max-width:56ch;line-height:1.5}

.busca-caixa{position:relative}
.busca-linha{display:flex;align-items:flex-end;gap:8px;background:var(--surface);
  border:2px solid var(--line2);border-radius:16px;padding:10px 10px 10px 16px;
  box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.busca-linha:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.busca-campo{flex:1;border:0;background:transparent;resize:none;outline:none;
  font:inherit;font-size:16.5px;line-height:1.4;color:var(--text);padding:8px 0;
  max-height:140px;min-height:28px;font-family:inherit}
.busca-campo::placeholder{color:var(--muted)}
.btn-mic{flex:none;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line2);
  background:var(--surface2);color:var(--text2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn-mic:hover{border-color:var(--accent);color:var(--accent)}
.btn-mic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-mic svg{width:19px;height:19px}
.btn-mic.ouvindo{background:var(--bad);border-color:var(--bad);color:var(--accent-ink);
  animation:pulso-mic 1.4s ease-in-out infinite}
.btn-mic[hidden]{display:none}
.btn-buscar{flex:none}
@keyframes pulso-mic{0%,100%{box-shadow:0 0 0 0 var(--bad-soft)}50%{box-shadow:0 0 0 8px transparent}}

.ouvindo-aviso{margin-top:9px;font-size:12.5px;color:var(--bad);font-weight:700;
  display:flex;align-items:center;gap:6px}
.ouvindo-aviso i{width:7px;height:7px;border-radius:50%;background:var(--bad);
  animation:pisca 1s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.25}}

.autocomplete{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  z-index:20;max-height:320px;overflow-y:auto;padding:6px}
.autocomplete[hidden]{display:none}
.autocomplete-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--text)}
.autocomplete-item .n{color:var(--muted);font-size:12px;font-family:var(--serif-num)}
.autocomplete-item:hover,.autocomplete-item[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}

.exemplos{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.exemplo{appearance:none;border:1.5px solid var(--line2);background:var(--surface);
  color:var(--text2);border-radius:99px;padding:7px 13px 7px 11px;font-size:12.5px;font-weight:600;
  cursor:pointer;font:inherit;transition:border-color .15s,color .15s;
  display:inline-flex;align-items:center;gap:6px}
.exemplo svg{width:13px;height:13px;flex:none;opacity:.65}
.exemplo:hover{border-color:var(--accent);color:var(--accent)}
.exemplo:hover svg{opacity:1}
.exemplo:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── sugestões ────────────────────────────────────────────────────────────── */
.bloco{max-width:var(--maxw);margin:0 auto;padding:26px 18px}
.bloco h2{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin:0 0 3px}
.bloco .resposta-ia{font-size:14px;color:var(--text2);margin:0 0 16px;max-width:66ch;line-height:1.55}
/* Home inteira usa a mesma coluna estreita do hero (720px): sem isto, "Como funciona"
   e "Modelos no radar" abriam na largura cheia de --maxw (1180px) e pareciam
   desalinhados à esquerda embaixo de um hero centralizado e estreito. */
#viewHome .bloco{max-width:720px}
.sugestoes-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.sugestao{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px 15px;display:flex;flex-direction:column;gap:8px}
.sugestao h3{margin:0;font-size:15.5px;font-weight:800;color:var(--text)}
.sugestao .motivo{font-size:13px;color:var(--text2);line-height:1.4;flex:1}
.sugestao .meta{font-size:12px;color:var(--muted);font-family:var(--serif-num)}
.sugestao .btn{margin-top:2px}
.carregando{font-size:13.5px;color:var(--muted);padding:6px 0}

/* ── modelos no radar (link de descoberta na home: sem isto não tinha NENHUM
   caminho de <a> para /carros/<marca>/<modelo>, nem para crawler nem para quem
   chega sem saber o que digitar) ─────────────────────────────────────────── */
.modelos-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.modelo-card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:14px 15px;display:flex;flex-direction:column;gap:5px;
  text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.modelo-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.modelo-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modelo-card h3{margin:0;font-size:15px;font-weight:800;color:var(--text)}
.modelo-card .meta{font-size:12.5px;color:var(--text2);font-variant-numeric:tabular-nums}
.modelo-card .ver-radar{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;
  color:var(--accent);margin-top:6px}
.modelo-card .ver-radar svg{width:13px;height:13px;transition:transform .15s}
.modelo-card:hover .ver-radar svg{transform:translateX(3px)}
.em-breve{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.em-breve-rot{font-size:12.5px;font-weight:800;color:var(--text);margin:0 0 6px}
.em-breve-lista{font-size:13px;color:var(--muted);line-height:1.7;margin:0}

/* ── modelo: cabeçalho ────────────────────────────────────────────────────── */
.modelo-topo{max-width:var(--maxw);margin:0 auto;padding:22px 18px 0}
.voltar{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--text2);
  text-decoration:none;font-weight:600;margin-bottom:10px}
.voltar:hover{color:var(--accent)}
.modelo-nome{font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 4px}
.modelo-sub{font-size:13.5px;color:var(--muted);margin:0 0 18px}

/* ── ação principal + frase de orientação (o Bruno: "não sei onde clicar") ── */
.btn-alerta-principal{margin-top:14px}
.btn-alerta-principal svg{width:17px;height:17px;flex:none}
.secao-titulo{font-size:13.5px;color:var(--text2);font-weight:600;margin:18px 0 8px}

/* ── painel de filtro único (Versão · Ano · Estado · Ordenar), visível acima do
   gráfico: antes eram duas linhas soltas na cor do fundo, sem parecer controle. ── */
.painel-filtros{background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-direction:column;gap:11px}
.filtro-grupo{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.filtro-grupo-rot{font-size:13px;font-weight:800;color:var(--text);min-width:58px;flex:none}
.filtro-chips{display:flex;gap:7px;flex-wrap:wrap}

/* ── gráfico (a assinatura da tela: onde cada anúncio cai), agora largura cheia
   (o cartão da FIPE virou a linha de pílulas abaixo dos KPIs) ─────────────── */
.painel-grafico-full{margin-top:16px}
.painel-grafico h2{color:var(--accent)}
.painel-grafico .dica{font-size:13px;color:var(--muted);margin:0 0 10px}
.grafico-caixa{position:relative}
.grafico-svg{width:100%;height:auto;display:block;overflow:visible}
.malha{stroke:var(--line);stroke-width:1}
/* fonte do sistema, não a monoespaçada de dado de código (regra do Design System:
   mono é só pra código) — tabular-nums já alinha o dígito sem precisar de fonte de grade. */
.eixo-rot{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.eixo-titulo{font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums}
.garimpo-zona{fill:var(--good-soft)}
/* fundo por trás do rótulo da zona: sem isto, bolinha por cima do texto o deixava
   ilegível (o rótulo mora onde a nuvem de pontos costuma ser mais densa). */
.garimpo-rot-fundo{fill:var(--surface);opacity:.82}
.garimpo-rot{font-size:10.5px;fill:var(--good);font-weight:700;font-family:var(--serif-num)}
/* cor por fonte via CLASSE, nunca via atributo fill="var(...)" (SVG não resolve
   custom property dentro de atributo de apresentação em todo motor — Firefox e
   alguns Chromium não interpolam; classe + regra CSS é o caminho que funciona sempre). */
.ponto.fonte-webmotors{fill:var(--f-wm)}
.ponto.fonte-olx{fill:var(--f-olx)}
.ponto.fonte-icarros{fill:var(--f-ic)}
/* opacidade .8 no ponto comum: com centenas de pontos a nuvem virava mancha sólida;
   "novo" continua 100% opaco (é o que precisa saltar) — hover sempre volta a 1 pra achar
   o ponto embaixo de outros. */
.ponto{stroke:var(--surface);stroke-width:2;cursor:pointer;transition:stroke-width .1s,opacity .1s;
  fill:var(--muted);opacity:.8}
.ponto:hover,.ponto:focus-visible{stroke:var(--text);stroke-width:2.5;outline:none;opacity:1}
.ponto.e-novo{stroke:var(--text);stroke-width:2.5;opacity:1}
@media (prefers-reduced-motion:no-preference){
  /* escala por transform, não pelo atributo r: o raio-base do ponto "novo" muda com a
     quantidade de pontos no gráfico (rNovo em app.js), e animar r com um valor fixo
     desalinhava do raio de repouso assim que o gráfico ficava denso. */
  .ponto.e-novo{animation:pulso-ponto 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
}
@keyframes pulso-ponto{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.35)}
}
.legenda-fontes{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--text2)}
.legenda-fontes span{display:inline-flex;align-items:center;gap:5px}
.legenda-fontes i{width:10px;height:10px;border-radius:50%;display:inline-block}
.legenda-fontes i.anel{background:var(--surface);border:2px solid var(--text)}

.dica-flutuante{position:fixed;z-index:40;pointer-events:none;background:var(--text);
  color:var(--bg);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.5;
  box-shadow:var(--shadow);opacity:0;transition:opacity .12s;max-width:220px}
.dica-flutuante b{display:block;font-size:14px;font-family:var(--serif-num)}
.dica-flutuante.mostra{opacity:1}

/* ── kpis do cabeçalho de modelo (reaproveita .kpis/.kpi do app.css) ───────── */
.modelo-kpis{margin:14px 0 18px}
/* "N de {total}" (filtro ativo em "À venda agora") é mais comprido que um número solto;
   no tamanho padrão de .kpi .valor (34px) estourava a largura do cartão. */
.modelo-kpis .valor.valor-composto{font-size:21px;font-variant-numeric:tabular-nums}

.pilula .qtd{font-family:var(--serif-num);font-size:11px;opacity:.72;margin-left:6px}

/* ── ordenação (segmento), agora dentro do painel de filtros ─────────────── */
.ordenacao{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line2);
  border-radius:99px;padding:3px;overflow-x:auto;scrollbar-width:none;width:fit-content;max-width:100%}
.ordenacao::-webkit-scrollbar{display:none}
.segmento{appearance:none;border:0;background:transparent;color:var(--text2);
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:99px;
  cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.segmento[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.segmento:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── FIPE: virou linha de pílulas logo abaixo dos KPIs (o cartão alto e vazio
   ao lado do gráfico sumiu — "muito sem elementos" do Bruno também era espaço
   morto disfarçado de cartão) ─────────────────────────────────────────────── */
.fipe-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 0}
.fipe-linha-rot{font-size:12.5px;font-weight:800;color:var(--text2);flex:none}
.fipe-linha-rot span{font-weight:600;color:var(--muted);margin-left:4px}
.fipe-pilulas{display:flex;gap:6px;flex-wrap:wrap}
.fipe-pilula{background:var(--surface);border:1px solid var(--line2);border-radius:99px;
  padding:5px 11px;font-size:12.5px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fipe-pilula .asterisco{color:var(--warn);font-weight:800}
.fipe-nota{font-size:11.5px;color:var(--muted)}

/* ── lista de anúncios ────────────────────────────────────────────────────── */
.grade-anuncios{max-width:var(--maxw);margin:0 auto;padding:6px 18px 10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
/* lista pagina no cliente (60 por vez): modelo com milhares de ativos (ex.: 600 vindos
   do teto da API) travava 30s+ pra montar o DOM inteiro de uma vez (portão responsivo
   deu timeout no Jeep Commander). O gráfico continua com TODOS os pontos. */
.lista-mais-wrap{max-width:var(--maxw);margin:0 auto;padding:4px 18px 18px;text-align:center}
.anuncio{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:box-shadow .15s,border-color .15s,outline-color .15s;scroll-margin-top:90px}
.anuncio:hover{box-shadow:var(--shadow);border-color:var(--accent)}
.anuncio.em-destaque{outline:3px solid var(--accent);outline-offset:1px}
.anuncio-foto{aspect-ratio:16/10;background:var(--surface2);object-fit:cover;width:100%;display:block}
.anuncio-sem-foto{aspect-ratio:16/10;background:var(--surface2);display:grid;place-items:center;
  color:var(--muted);font-size:12px;text-align:center;padding:0 12px}
.anuncio-corpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.anuncio-linha1{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.anuncio-preco{font-size:22px;font-weight:800;letter-spacing:-.02em;font-family:var(--serif-num);color:var(--text)}
.anuncio-preco s{font-size:13px;color:var(--muted);font-weight:500;margin-left:8px}
.anuncio-titulo{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.anuncio-versao{font-size:12.5px;color:var(--text2);line-height:1.3;margin-top:-4px}
.anuncio-ficha{display:flex;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--text2);
  font-family:var(--serif-num)}
.anuncio-onde{font-size:13px;color:var(--text2)}
.anuncio-onde b{font-weight:700;color:var(--text)}
.anuncio-quando{font-size:12px;color:var(--muted);font-family:var(--serif-num)}
.anuncio-selos{display:flex;gap:6px;flex-wrap:wrap}
.anuncio-rodape{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.anuncio-fonte{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.anuncio-fonte b{font-weight:800;letter-spacing:.02em}
.ver-portal{font-size:12.5px;font-weight:800;color:var(--accent-ink);background:var(--accent);
  text-decoration:none;white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:99px;transition:filter .15s}
.ver-portal svg{width:12px;height:12px}
.ver-portal:hover{filter:brightness(1.08)}
.ver-portal:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.aviso-afiliado{max-width:var(--maxw);margin:0 auto;padding:0 18px 10px}
.aviso-afiliado p{font-size:12.5px;color:var(--muted);background:var(--surface2);
  border-radius:var(--radius-sm);padding:10px 13px;margin:0;line-height:1.5}

.rodape-secao{max-width:var(--maxw);margin:0 auto;padding:6px 18px 34px;text-align:center}

.vazio-fora{margin:0 auto;max-width:560px}
.vazio-fora .btn{margin-top:14px}

/* ── modal de alerta ──────────────────────────────────────────────────────── */
.modal-fundo{position:fixed;inset:0;background:rgba(10,14,18,.5);display:flex;
  align-items:center;justify-content:center;z-index:60;padding:16px}
.modal-fundo[hidden]{display:none}
.modal-caixa{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  max-width:420px;width:100%;padding:22px 22px 20px;position:relative}
.modal-fechar{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  border:0;background:var(--surface2);color:var(--text2);cursor:pointer;font-size:16px;
  display:flex;align-items:center;justify-content:center}
.modal-fechar:hover{background:var(--line2)}
.modal-fechar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modal-passo-rot{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);margin:0 0 6px}
.modal-titulo{font-size:18px;font-weight:800;color:var(--text);margin:0 0 14px;line-height:1.3}
.modal-passo[hidden]{display:none}
.campo-rot{display:block;font-size:12.5px;font-weight:700;color:var(--text2);margin:0 0 6px}
.campo{width:100%;border:1.5px solid var(--line2);border-radius:var(--radius-sm);
  padding:11px 13px;font:inherit;font-size:15px;background:var(--surface);color:var(--text);
  outline:none;transition:border-color .15s}
.campo:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.campo.invalido{border-color:var(--bad)}
.erro-campo{color:var(--bad);font-size:12.5px;margin:6px 0 0;min-height:16px}
.canal-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:4px}
.canal-btn{border:1.5px solid var(--line2);background:var(--surface);border-radius:var(--radius-sm);
  padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;font:inherit;color:var(--text2);font-size:13px;font-weight:700}
.canal-btn:hover{border-color:var(--accent);color:var(--accent)}
.canal-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.canal-btn svg{width:22px;height:22px}
.consentimento{display:flex;gap:9px;align-items:flex-start;margin:14px 0 16px;font-size:12.5px;
  color:var(--text2);line-height:1.45}
.consentimento input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--accent)}
.consentimento a{color:var(--info);font-weight:600}
.modal-acoes{display:flex;gap:9px}
.modal-voltar{background:transparent;border:0;color:var(--text2);font:inherit;font-size:13px;
  font-weight:700;cursor:pointer;padding:11px 6px}
.sucesso-caixa{text-align:center;padding:8px 0}
.sucesso-caixa .icone-ok{width:46px;height:46px;border-radius:50%;background:var(--good-soft);
  color:var(--good);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.sucesso-caixa p{font-size:14.5px;color:var(--text);line-height:1.5}
.ja-tem-alerta{text-align:center;padding:6px 0}
.ja-tem-alerta p{font-size:14px;color:var(--text2);margin:0 0 16px;line-height:1.5}

/* ── páginas de prosa (termos, privacidade) ─────────────────────────────────── */
.prosa-pagina{max-width:720px;margin:0 auto;padding:32px 18px 60px}
.prosa-pagina h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;color:var(--text)}
.prosa-pagina .versao{font-size:12.5px;color:var(--muted);font-family:var(--serif-num);margin:0 0 26px}
.prosa-pagina h2{font-size:16px;font-weight:800;color:var(--accent);margin:30px 0 10px}
.prosa-pagina p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 14px;max-width:74ch}
.prosa-pagina ul{margin:0 0 14px;padding-left:20px}
.prosa-pagina li{font-size:14.5px;line-height:1.6;color:var(--text2);margin-bottom:6px}
.prosa-pagina strong{color:var(--text)}
.prosa-pagina a{color:var(--info);font-weight:600}

[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

@media (max-width:640px){
  .hero-miolo{padding:32px 16px 30px}
  .canal-opcoes{grid-template-columns:1fr}
  .grade-anuncios{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  /* campo de busca ganha a linha inteira; mic + Buscar descem para não espremer o
     placeholder (link 27 caracteres não cabia ao lado dos dois botões em 360px). */
  .busca-linha{flex-wrap:wrap}
  .busca-campo{flex-basis:100%;order:1}
  .btn-mic{order:2;margin-left:auto}
  .btn-buscar{order:3}
}
@media (max-width:420px){
  .grade-anuncios{grid-template-columns:1fr}
}