/* Rato de Garagem · portal (blog, guias, rankings e páginas): cara de jornal. Fundo cor de papel,
   título com serifa (Source Serif 4), texto de interface em Inter, filetes finos e uma cor sóbria por editoria.
   A logo (rato no escapamento) é imagem: assets/marca/logo.webp no topo e no rodapé, avatar.webp no autor. */

:root {
  --fundo: #f4f1ea;
  --parede: #fbf9f5;
  --placa: #efebe3;
  --placa-2: #e6e1d6;
  --linha: #e0dbd0;
  --linha-forte: #c9c2b4;
  --tinta: #1b1a18;
  --texto: #1f1e1b;
  --apagado: #514e47;
  --fraco: #6b665d;
  --destaque: #a8231a;
  --amarelo: #f5b800;
  --bom: #1f7a4d;
  --ruim: #b42318;
  --f-titulo: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-artigo: var(--f-titulo);
  --f-num: var(--f-texto);
  --raio: 6px;
  --cab-h: 64px;
  --cat: var(--destaque);
  color-scheme: light;
}

/* cor de cada editoria (só no rótulo, no ícone e em detalhes) */
[data-cat='guias'] { --cat: #23578c; }
[data-cat='bolso'] { --cat: #2b6e46; }
[data-cat='rankings'] { --cat: #8a5a00; }
[data-cat='comparativos'] { --cat: #a8231a; }
[data-cat='manutencao'] { --cat: #5d3f8c; }
[data-cat='usados'] { --cat: #94305f; }
[data-cat='eletricos'] { --cat: #17666f; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-h) + 16px); }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--f-texto); font-size: 16px; line-height: 1.55; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pular { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--tinta); color: #fff; padding: 8px 14px; border-radius: var(--raio); font-weight: 600; }
.pular:focus { top: 12px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }

/* ---------- barra de cima ---------- */

.topbar { font-size: 12.5px; color: var(--fraco); }
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 34px; gap: 16px; }
.topbar nav { display: flex; gap: 18px; }
.topbar a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- cabeçalho ---------- */

.cab { position: sticky; top: 0; z-index: 40; background: rgba(251, 249, 245, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.cab .container { display: flex; align-items: center; gap: 24px; height: var(--cab-h); }
.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca-logo { display: block; height: 46px; width: auto; }
.menu { display: flex; gap: 2px; }
.menu a { padding: 8px 9px; font-size: 14.5px; font-weight: 500; color: var(--apagado); border-radius: 4px; white-space: nowrap; }
.menu a:hover { color: var(--texto); background: var(--placa); }
.menu a[aria-current='page'] { color: var(--texto); box-shadow: inset 0 -2px 0 var(--destaque); border-radius: 0; }
.cab-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icone-botao { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--raio); border: 1px solid var(--linha); color: var(--apagado); background: transparent; cursor: pointer; }
.icone-botao svg { width: 18px; height: 18px; }
.icone-botao:hover { color: var(--texto); border-color: var(--linha-forte); }
.botao {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--tinta); border-radius: var(--raio); cursor: pointer;
  background: var(--tinta); color: #fff; font-weight: 600; font-size: 14px; padding: 9px 15px; white-space: nowrap;
}
.botao:hover { background: #000; }
.botao-linha { background: transparent; color: var(--texto); border-color: var(--linha-forte); }
.botao-linha:hover { background: var(--placa); }
.menu-botao { display: none; }
.zebra { display: none; }

/* ---------- seções ---------- */

.secao { padding: 48px 0 0; }
.secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; border-top: 2px solid var(--tinta); padding-top: 10px; }
.secao-cab h2 { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.01em; }
.secao-cab h2 span { color: inherit; }
.secao-cab p { color: var(--fraco); font-size: 14px; }
.ver-todos { font-size: 14px; font-weight: 600; color: var(--destaque); white-space: nowrap; }
.ver-todos:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- capa de post (montada em CSS, com o carro recortado quando tem) ---------- */

.capa {
  container-type: inline-size;
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--raio);
  background: radial-gradient(ellipse 75% 45% at 50% 100%, rgba(0, 0, 0, .07), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--cat) 5%, #f3efe7), color-mix(in srgb, var(--cat) 10%, #e5e0d5));
  border: 1px solid var(--linha);
}
.capa-palavra {
  position: absolute; left: 6%; top: 9%; right: 6%;
  font-family: var(--f-titulo); font-weight: 600; line-height: 1.05; letter-spacing: -.015em;
  font-size: min(7.5cqi, 54px); color: var(--tinta);
}
.capa-palavra small { display: block; font-family: var(--f-texto); font-weight: 500; font-size: max(.36em, 11.5px); letter-spacing: 0; color: var(--fraco); margin-top: 8px; }
.capa-fotos { position: absolute; left: 4%; right: 4%; bottom: 5%; display: flex; justify-content: center; align-items: end; gap: 2%; }
.capa-fotos img { width: 46%; max-height: 60%; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .22)); }
.capa-fotos.uma img { width: 62%; }
.capa-fotos.tres img { width: 31%; }
.capa-icone { position: absolute; right: 7%; bottom: 10%; width: 20%; color: var(--cat); opacity: .5; }
.capa-pequena .capa-palavra { font-size: 10.5cqi; top: 8%; }
.capa-pequena .capa-fotos img { max-height: 50%; }

.etiqueta {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  color: var(--cat);
}
.meta { font-size: 13px; color: var(--fraco); }
.meta b { color: var(--apagado); font-weight: 600; }

/* ---------- cartões de post ---------- */

.cartao { display: grid; gap: 12px; align-content: start; }
.cartao h3 { font-family: var(--f-titulo); font-size: 20px; line-height: 1.22; font-weight: 700; letter-spacing: -.01em; color: var(--tinta); }
.cartao:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cartao p { color: var(--apagado); font-size: 15px; }
.cartao .cartao-texto { display: grid; gap: 7px; }
.cartao-grande h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.12; letter-spacing: -.02em; }
.cartao-grande p { font-size: 17px; }
.cartao-lista { grid-template-columns: 136px 1fr; align-items: start; gap: 14px; }
.cartao-lista h3 { font-size: 17px; line-height: 1.25; }
.cartao-lista .capa { aspect-ratio: 4 / 3; }

.destaques { display: grid; grid-template-columns: 1.65fr 1fr; gap: 32px; padding-top: 28px; }
.destaques-lado { display: grid; gap: 20px; align-content: start; border-left: 1px solid var(--linha); padding-left: 32px; }
.destaques-lado .cartao + .cartao { border-top: 1px solid var(--linha); padding-top: 20px; }
.grade-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 28px; }

/* ---------- ferramentas ---------- */

.ferramentas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ferramenta {
  position: relative; display: grid; gap: 8px; padding: 18px; border-radius: var(--raio); overflow: hidden;
  background: var(--parede); border: 1px solid var(--linha);
}
.ferramenta:hover { border-color: var(--linha-forte); }
.ferramenta svg { width: 28px; height: 28px; color: var(--cat); }
.ferramenta h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 19px; line-height: 1.2; }
.ferramenta p { font-size: 14px; color: var(--apagado); }
.ferramenta .seta { font-size: 13px; font-weight: 600; color: var(--destaque); }

/* ---------- duas colunas com barra lateral ---------- */

.duas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.lateral { display: grid; gap: 20px; position: sticky; top: calc(var(--cab-h) + 16px); }
.widget { background: var(--parede); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.widget h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto);
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--linha);
}
.widget p { color: var(--apagado); font-size: 14px; }
.mais-lidos { counter-reset: n; display: grid; gap: 14px; }
.mais-lidos li { counter-increment: n; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-family: var(--f-titulo); font-weight: 600; font-size: 16px; line-height: 1.3; }
.mais-lidos li::before { content: counter(n); font-family: var(--f-titulo); font-weight: 700; font-size: 24px; line-height: 1; color: var(--destaque); }
.mais-lidos a:hover { text-decoration: underline; text-underline-offset: 3px; }
.form-linha { display: flex; gap: 8px; margin-top: 12px; }
.campo-texto {
  width: 100%; min-width: 0; padding: 10px 12px; border-radius: var(--raio); border: 1px solid var(--linha-forte);
  background: #fff; color: var(--texto);
}
.campo-texto:focus { border-color: var(--destaque); outline: none; box-shadow: 0 0 0 3px rgba(168, 35, 26, .12); }
.aviso-demo { font-size: 12px; color: var(--fraco); margin-top: 8px; }
.canal { border-top: 3px solid #c4302b; }
.canal .botao { background: #c4302b; border-color: #c4302b; color: #fff; margin-top: 12px; }
.canal .botao:hover { background: #a82822; }

/* ---------- rankings (prévia e página) ---------- */

.rankings-previa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ranking-mini { background: var(--parede); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; display: grid; gap: 12px; align-content: start; }
.ranking-mini h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 19px; line-height: 1.2; }
.ranking-mini h3 small { display: block; font-family: var(--f-texto); font-weight: 400; font-size: 12.5px; color: var(--fraco); margin-top: 4px; }
.ranking-linhas { display: grid; gap: 2px; counter-reset: p; }
.ranking-linhas li { counter-increment: p; display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--linha); }
.ranking-linhas li:last-child { border-bottom: 0; }
.ranking-linhas li::before { content: counter(p); font-weight: 600; color: var(--fraco); }
.ranking-linhas li:first-child::before { color: var(--destaque); }
.ranking-linhas b { font-weight: 600; font-size: 14px; }
.ranking-linhas small { display: block; color: var(--fraco); font-size: 12px; }
.ranking-linhas .valor { font-weight: 600; font-size: 14px; white-space: nowrap; }

.ranking-bloco { padding: 40px 0 0; }
.ranking-tabela { width: 100%; border-collapse: collapse; background: var(--parede); border: 1px solid var(--linha); }
.ranking-tabela th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--fraco); font-weight: 600; padding: 10px; border-bottom: 1px solid var(--linha-forte); background: var(--placa); }
.ranking-tabela td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.ranking-tabela tr:hover td { background: #fff; }
.ranking-tabela .pos { font-weight: 700; color: var(--fraco); width: 42px; }
.ranking-tabela tr:first-child .pos { color: var(--destaque); }
.ranking-tabela .carro { display: flex; align-items: center; gap: 12px; }
.ranking-tabela .carro img, .ranking-tabela .carro .silhueta { width: 86px; aspect-ratio: 240 / 125; object-fit: contain; flex-shrink: 0; }
.ranking-tabela .carro .silhueta { --cat: var(--linha-forte); padding: 6px 2px; }
.ranking-tabela .carro b { display: block; font-weight: 600; }
.ranking-tabela .carro small { color: var(--fraco); font-size: 12px; }
.ranking-tabela .v { font-weight: 700; font-size: 15px; white-space: nowrap; }
.ranking-tabela .acao a { font-size: 13px; font-weight: 600; color: var(--destaque); white-space: nowrap; }
.ranking-tabela .acao a:hover { text-decoration: underline; }
.indice-rankings { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---------- comparativos prontos ---------- */

.comparativos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.comparativo { display: grid; gap: 10px; padding: 16px; border-radius: var(--raio); background: var(--parede); border: 1px solid var(--linha); }
.comparativo:hover { border-color: var(--linha-forte); }
.comparativo:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.comparativo-fotos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; align-items: end; min-height: 92px; }
.comparativo-fotos img { width: 100%; aspect-ratio: 240 / 125; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .18)); }
.comparativo-carro { display: grid; gap: 2px; justify-items: center; }
.comparativo-carro .silhueta { width: 100%; aspect-ratio: 240 / 125; padding: 8px 4px; opacity: .45; }
.comparativo-carro small { font-size: 11px; font-weight: 600; color: var(--fraco); text-transform: uppercase; letter-spacing: .05em; }
.comparativo h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 18px; line-height: 1.2; }
.comparativo h3 i { font-weight: 400; color: var(--fraco); }
.comparativo p { font-size: 13px; color: var(--apagado); }

/* ---------- chips e termo do dia ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linha-forte); border-radius: 999px; background: var(--parede);
  padding: 6px 13px; font-size: 14px; font-weight: 500; color: var(--apagado);
}
.chip:hover { color: var(--texto); border-color: var(--texto); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); }
.faixa-termo { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: center; padding: 22px 24px; border-radius: var(--raio); background: var(--parede); border: 1px solid var(--linha); }
.faixa-termo .rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--destaque); }
.faixa-termo h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 26px; line-height: 1.1; }
.faixa-termo p { color: var(--apagado); }

/* ---------- artigo ---------- */

.artigo-cab { padding: 36px 0 24px; max-width: 820px; }
.artigo-cab h1 { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.1; letter-spacing: -.02em; margin: 12px 0 16px; color: var(--tinta); }
.artigo-cab .linha-fina { font-size: 20px; line-height: 1.5; color: var(--apagado); max-width: 66ch; }
.artigo-cab .meta { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha); }
.artigo-capa { margin-bottom: 32px; }
/* no post, capa sem foto nenhuma (só palavra e ícone) não aparece: o título já diz tudo */
.artigo-capa:not(:has(img)) { display: none; }
.artigo-capa .capa { aspect-ratio: 21 / 8; }
.artigo-capa .capa-fotos { left: 40%; }
.artigo-capa .capa-fotos img { max-height: 80%; }
.migalhas { font-size: 13px; color: var(--fraco); padding-top: 22px; }
.migalhas a:hover { color: var(--texto); text-decoration: underline; }
.texto { font-family: var(--f-artigo); font-size: 19px; line-height: 1.7; color: #26241f; max-width: 700px; min-width: 0; }
.texto > * + * { margin-top: 1.05em; }
.texto h2 { font-family: var(--f-titulo); font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; margin-top: 1.7em; color: var(--tinta); }
.texto h3 { font-family: var(--f-titulo); font-size: 21px; line-height: 1.3; font-weight: 700; margin-top: 1.4em; color: var(--tinta); }
.texto a { color: var(--destaque); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.texto ul, .texto ol { padding-left: 1.2em; }
.texto ul { list-style: disc; }
.texto ol { list-style: decimal; }
.texto li + li { margin-top: .4em; }
.texto strong { color: var(--tinta); font-weight: 700; }
.texto .nota { font-family: var(--f-texto); border-left: 3px solid var(--cat); background: var(--parede); padding: 14px 18px; border-radius: 0 var(--raio) var(--raio) 0; font-size: 16px; line-height: 1.6; color: var(--apagado); }
.texto .nota b { color: var(--texto); }
.tabela-dados { width: 100%; border-collapse: collapse; font-family: var(--f-texto); font-size: 15px; line-height: 1.45; background: var(--parede); }
.tabela-dados th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--fraco); padding: 9px 10px; border-bottom: 1px solid var(--linha-forte); background: var(--placa); }
.tabela-dados td { padding: 9px 10px; border-bottom: 1px solid var(--linha); }
.tabela-dados td.n { font-weight: 600; white-space: nowrap; }
.tabela-rola { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.tabela-rola .tabela-dados tr:last-child td { border-bottom: 0; }
.fonte-dado { font-family: var(--f-texto); font-size: 13px; line-height: 1.5; color: var(--fraco); }
.texto .fonte-dado { margin-top: .6em; }
.fotos-carros > div {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 260px)); justify-content: center; gap: 12px; align-items: end; padding: 18px 12px 10px;
  background: linear-gradient(180deg, var(--parede), var(--placa)); border: 1px solid var(--linha); border-radius: var(--raio);
}
.fotos-carros > div > div { text-align: center; font-family: var(--f-texto); font-size: 12px; line-height: 1.3; color: var(--apagado); }
.fotos-carros img { width: 100%; aspect-ratio: 240 / 125; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .2)); }
.cta-comparar {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 2em; font-family: var(--f-texto);
  padding: 18px 20px; border-radius: var(--raio); background: var(--parede); border: 1px solid var(--linha); border-left: 3px solid var(--destaque);
}
.cta-comparar h3 { margin: 0; font-family: var(--f-titulo); font-weight: 700; font-size: 20px; line-height: 1.25; }
.cta-comparar p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--apagado); }
.texto .cta-comparar .botao { text-decoration: none; color: #fff; }
.autor { display: flex; gap: 14px; align-items: center; margin-top: 2.2em; padding-top: 20px; border-top: 1px solid var(--linha); font-family: var(--f-texto); font-size: 15px; line-height: 1.5; color: var(--apagado); }
.autor-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.autor b { color: var(--texto); display: block; }
.compartilhar { display: flex; gap: 8px; margin-top: 18px; }

/* ---------- formulários e ferramentas grandes ---------- */

.painel { background: var(--parede); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; }
.painel h2 { font-family: var(--f-titulo); font-weight: 700; font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.painel > p { color: var(--apagado); margin-bottom: 16px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--apagado); }
.campo select, .campo input {
  width: 100%; padding: 10px 12px; border-radius: var(--raio); border: 1px solid var(--linha-forte); background: #fff; color: var(--texto); font-size: 15px; font-weight: 500;
}
.campo select:focus, .campo input:focus { border-color: var(--destaque); outline: none; box-shadow: 0 0 0 3px rgba(168, 35, 26, .12); }
.campo select:disabled { opacity: .5; }
.resultado { margin-top: 18px; padding: 18px; border-radius: var(--raio); background: var(--fundo); border: 1px solid var(--linha); }
.resultado .grande { font-weight: 700; font-size: clamp(28px, 3.6vw, 40px); color: var(--tinta); line-height: 1.1; letter-spacing: -.01em; }
.resultado p { color: var(--apagado); margin-top: 6px; }
.resultado .veredito-calc { font-family: var(--f-titulo); font-weight: 700; font-size: 28px; }
.calcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

/* ---------- glossário ---------- */

.letras { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 8px; }
.letras a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--linha); background: var(--parede); font-weight: 600; color: var(--apagado); }
.letras a:hover { color: #fff; background: var(--tinta); border-color: var(--tinta); }
.termos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.termo { background: var(--parede); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }
.termo dt { font-family: var(--f-titulo); font-weight: 700; font-size: 18px; }
.termo dd { margin: 6px 0 0; color: var(--apagado); font-size: 15px; }

/* ---------- páginas institucionais ---------- */

.pagina-cab { padding: 40px 0 10px; }
.pagina-cab h1 { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; color: var(--tinta); }
.pagina-cab p { font-size: 19px; line-height: 1.5; color: var(--apagado); max-width: 62ch; margin-top: 14px; }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.numero { background: var(--parede); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; }
.numero b { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 42px; line-height: 1; color: var(--tinta); margin-bottom: 6px; }
.numero span { color: var(--apagado); font-size: 14px; }
.blocos-texto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bloco-texto { background: var(--parede); border: 1px solid var(--linha); border-radius: var(--raio); padding: 20px; }
.bloco-texto h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
.bloco-texto p { color: var(--apagado); font-size: 15px; }
.bloco-texto a, .widget p a, .meta a { color: var(--destaque); text-decoration: underline; text-underline-offset: 3px; }
.formulario { display: grid; gap: 12px; max-width: 640px; }
.formulario textarea { min-height: 150px; resize: vertical; }
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plano { background: var(--parede); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; display: grid; gap: 10px; align-content: start; }
.plano.destaque { border-color: var(--linha-forte); box-shadow: inset 0 3px 0 var(--destaque); }
.plano h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 22px; line-height: 1.2; }
.plano ul { display: grid; gap: 6px; color: var(--apagado); font-size: 15px; }
.plano li::before { content: '— '; color: var(--fraco); }

/* ---------- busca ---------- */

.busca-grande { display: flex; gap: 10px; margin-top: 18px; max-width: 720px; }
.busca-grande .campo-texto { font-size: 17px; padding: 13px 16px; }
.resultados-busca { display: grid; gap: 18px; margin-top: 28px; max-width: 860px; }

/* ---------- rodapé ---------- */

.rodape { margin-top: 80px; border-top: 2px solid var(--tinta); background: var(--placa); }
.rodape-grade { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding: 40px 0 28px; }
.rodape-grade h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--texto); margin-bottom: 12px; }
.rodape-grade ul { display: grid; gap: 8px; font-size: 14px; color: var(--apagado); }
.rodape-grade a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.rodape-sobre .marca-logo { height: 58px; }
.rodape-sobre p { color: var(--apagado); font-size: 14px; margin-top: 12px; max-width: 34ch; }
.rodape-legal { border-top: 1px solid var(--linha-forte); padding: 18px 0 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--fraco); }
.rodape-legal nav { display: flex; gap: 16px; flex-wrap: wrap; }
.rodape-legal a:hover { color: var(--texto); }

/* ---------- telas menores ---------- */

@media (max-width: 1100px) {
  .menu { display: none; }
  .menu-botao { display: grid; }
  .menu.aberto {
    display: grid; position: absolute; top: var(--cab-h); left: 0; right: 0; padding: 12px 24px 18px; gap: 2px;
    background: var(--parede); border-bottom: 1px solid var(--linha-forte); box-shadow: 0 16px 32px rgba(0, 0, 0, .08);
  }
  .menu.aberto a { font-size: 17px; padding: 10px 8px; }
  .menu.aberto a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--destaque); }
  .ferramentas, .comparativos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-grade { grid-template-columns: repeat(3, 1fr); }
  .rodape-sobre { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --cab-h: 58px; }
  .container { padding: 0 16px; }
  .topbar .container > span { display: none; }
  .marca-logo { height: 40px; }
  .cab-acoes .botao { display: none; }
  .destaques { grid-template-columns: 1fr; padding-top: 20px; }
  .destaques-lado { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 20px; }
  .grade-posts, .rankings-previa, .ferramentas, .comparativos, .calcs, .termos, .blocos-texto, .planos { grid-template-columns: 1fr; }
  .lateral { grid-template-columns: 1fr; }
  .faixa-termo { grid-template-columns: 1fr; gap: 10px; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-grade { grid-template-columns: repeat(2, 1fr); }
  .cartao-lista { grid-template-columns: 110px 1fr; }
  .cta-comparar { grid-template-columns: 1fr; }
  .texto { font-size: 18px; }
  .ranking-tabela .carro img, .ranking-tabela .carro .silhueta { width: 64px; }
  .ranking-tabela .acao { display: none; }
  .secao { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- WordPress ---------- */

/* imagem destacada no lugar da capa em CSS */
.capa > img.wp-post-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa:has(> img.wp-post-image) { border-color: transparent; }
.artigo-capa .capa:has(> img.wp-post-image) { aspect-ratio: 2 / 1; }
.artigo-capa figcaption { font-size: 12.5px; color: var(--fraco); margin-top: 8px; }
.artigo-capa figcaption a { text-decoration: underline; text-underline-offset: 2px; }
/* paginação das listas */
.pagination { margin-top: 28px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { border: 1px solid var(--linha-forte); border-radius: var(--raio); padding: 7px 13px; font-weight: 600; color: var(--apagado); background: var(--parede); }
.pagination .page-numbers.current, .pagination a.page-numbers:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
/* imagens e legendas que o editor de blocos coloca no texto */
.texto img { border-radius: var(--raio); height: auto; }
.texto figure { margin: 1.6em 0; }
.texto figcaption, .texto .wp-element-caption { font-family: var(--f-texto); font-size: 13px; line-height: 1.45; color: var(--fraco); margin-top: 8px; }
.texto figcaption a { color: inherit; }
.texto .wp-block-table table { width: 100%; border-collapse: collapse; font-family: var(--f-texto); font-size: 15px; }
.texto .wp-block-table td, .texto .wp-block-table th { padding: 9px 10px; border-bottom: 1px solid var(--linha); }