/* public/comparacoes.css — CSS só de página das telas de /comparar (hub + página de dupla).
   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 COMPARAÇÕES (comparacoes/**). */

/* ── o desempate com public/app.js ───────────────────────────────────────────────────────
   app.js não conhece /comparar: 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 da comparação assim que o JS carregasse. Um
   seletor por #id tem mais especificidade que o `[hidden]{display:none!important}` de
   estilo.css (também !important). comparacoes/casca.mjs marca `body.pagina-comparacoes`
   nas páginas desta trilha (mesmo truque de public/analises.css). */
body.pagina-comparacoes #ssr{display:block!important}
body.pagina-comparacoes #viewHome{display:none!important}
body.pagina-comparacoes #viewModelo{display:none!important}

/* ── casca e índice das filhas /comparar/<a>-vs-<b> moram em public/conteudo.css
   (conteudo/blocos.mjs) desde 11/09/2026. Aqui fica só o conteúdo da comparação. ─────────── */
.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}
.resposta-direta{font-size:15.5px;color:var(--text);line-height:1.6;margin:2px 0 10px;max-width:68ch}
.avcomparar-hub{max-width:var(--maxw);margin:0 auto;padding:22px 18px 40px;display:flex;
  flex-direction:column;gap:18px}

/* ── cabeçalho ────────────────────────────────────────────────────────────────────────── */
.avcomparar-trilha{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.avcomparar-trilha a{color:var(--muted);text-decoration:none}
.avcomparar-trilha a:hover{color:var(--accent)}
.avcomparar-cabecalho h1{font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 6px}
.avcomparar h1{font-size:clamp(22px,3.6vw,30px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin:0 0 6px}
.avcomparar-fonte{font-size:13.5px;color:var(--text2);margin:0 0 4px}

/* ── cartões de seção (reaproveita .cartao/.cartao-head de app.css) ─────────────────────── */
.avcomparar-cartao .dica{font-size:13px;color:var(--muted);margin:8px 0 0}

/* ── placar em duelo (11/09/2026, Bruno: "essa tabela precisa ser mais visual") ─────────────
   Cada quesito é uma linha: rótulo à esquerda, e as duas barras espelhadas a partir do eixo
   central, cada uma na cor do seu modelo (mesma dupla do gráfico de dispersão: --accent pro
   primeiro, --warn pro segundo). Barra = magnitude real; vencedor com check, número em negrito e
   barra cheia; perdedor esmaecido; empate neutro. Texto sempre em token de texto, nunca na cor
   da série (a cor fica na barra, no check e no fio do cabeçalho). ─────────────────────────── */
.avcomparar-lado-a{--cor-lado:var(--accent);--cor-lado-suave:var(--accent-soft)}
/* C7 (15/09/2026): o 2º carro é --info (azul), como no v8. O âmbar (--warn) fica só para
   oportunidade; em barra e em ponto ele lia como "alerta", não como "o outro carro". */
.avcomparar-lado-b{--cor-lado:var(--info);--cor-lado-suave:var(--info-soft)}
.avcomparar-placar-veredito{margin:2px 0 12px;font-size:15.5px;font-weight:700;line-height:1.5;
  color:var(--text);max-width:68ch}
.avcomparar-duelo{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.avcomparar-duelo-linha{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);
  align-items:center;border-top:1px solid var(--line)}
.avcomparar-duelo-topo{border-top:0;background:var(--surface2);align-items:end}
.avcomparar-duelo-rotulo{padding:12px 16px;font-size:13.5px;font-weight:700;line-height:1.35;color:var(--text)}
.avcomparar-duelo-rotulo small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--muted)}
.avcomparar-duelo-rotulo .tag{margin-top:5px}
.avcomparar-duelo-cel{padding:11px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
/* eixo central: o lado A encosta nele pela direita, o B pela esquerda */
.avcomparar-duelo-cel.avcomparar-lado-a{align-items:flex-end;text-align:right;border-right:1px solid var(--line2)}
.avcomparar-duelo-cel.avcomparar-lado-b{align-items:flex-start;text-align:left}
.avcomparar-duelo-num{display:inline-flex;align-items:center;gap:5px;font-size:14.5px;font-weight:600;
  color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}
.avcomparar-duelo-check{width:15px;height:15px;flex:none;color:var(--cor-lado)}
.avcomparar-duelo-trilho{display:flex;width:100%;height:8px}
.avcomparar-lado-a .avcomparar-duelo-trilho{justify-content:flex-end}
.avcomparar-duelo-barra{display:block;height:8px;background:var(--cor-lado)}
.avcomparar-lado-a .avcomparar-duelo-barra{border-radius:4px 0 0 4px}
.avcomparar-lado-b .avcomparar-duelo-barra{border-radius:0 4px 4px 0}
.avcomparar-duelo-cel.vence .avcomparar-duelo-num{font-weight:800;color:var(--text)}
.avcomparar-duelo-cel.perde .avcomparar-duelo-barra{opacity:.32}
.avcomparar-duelo-linha.empate .avcomparar-duelo-barra{opacity:.6}
/* cabeçalho: foto, nome, fio na cor do modelo e quantos quesitos ele leva */
.avcomparar-duelo-cab{padding:14px 14px 12px;border-bottom:3px solid var(--cor-lado)}
.avcomparar-duelo-cab.avcomparar-lado-a{align-items:flex-end}
.avcomparar-placar-cab{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.avcomparar-lado-a .avcomparar-placar-cab{align-items:flex-end;text-align:right}
.avcomparar-lado-b .avcomparar-placar-cab{align-items:flex-start;text-align:left}
.avcomparar-placar-foto{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--surface2);
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--cor-lado,var(--line2))}
.avcomparar-placar-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)}
.avcomparar-placar-cab span{font-size:14px;font-weight:800;color:var(--text);line-height:1.25}
.avcomparar-duelo-vitorias{margin:4px 0 0;font-size:12px;color:var(--text2)}
.avcomparar-duelo-vitorias b{font-size:15px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}

/* ── veredito por tema (11/09/2026, Bruno: "esse texto abaixo precisa ser melhor explorado"):
   era uma lista de 7 frases repetindo a tabela. Agora um cartão por decisão do comprador, com
   o número que importa em destaque e o fio de cima na cor de quem leva. ────────────────────── */
.avcomparar-veredito{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.avcomparar-tema{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--cor-lado,var(--line2));
  border-radius:var(--radius-sm);padding:14px 16px 15px;display:flex;flex-direction:column;gap:4px}
.avcomparar-tema h3{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.avcomparar-tema-destaque{margin:2px 0 0;font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.2;
  color:var(--text);font-variant-numeric:tabular-nums}
.avcomparar-tema-lider{margin:0;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text2)}
.avcomparar-tema-ponto{width:9px;height:9px;border-radius:50%;background:var(--cor-lado);flex:none}
.avcomparar-tema-frase{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--text2)}

/* ── D11 do portão visual de 14/09: a faixa de seções do celular cortava a última palavra na
   borda direita sem nada avisando que havia mais, e lia como texto truncado em vez de rolagem.
   A faixa em si é de conteudo/blocos.mjs + public/conteudo.css (de outro agente esta noite), e
   as duas linhas abaixo ficam dentro do escopo de /comparar: um degradê fixo na borda direita
   diz que continua, e a folga no fim da lista garante que, rolada até o fim, a última pílula
   apareça inteira em vez de viver embaixo do degradê. */
@media (max-width:1024px){
  body.pagina-comparacoes .cv-lado::after{content:'';position:absolute;top:0;right:0;bottom:1px;
    width:38px;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface))}
  body.pagina-comparacoes .cv-indice ul{padding-right:46px}
}

/* QA de celular de 15/09/2026: das seis pílulas do índice do duelo, DUAS levavam o leitor para
   debaixo do cabeçalho fixo — "Preço por km" (#precoxkm) e "Quesito a quesito" (#quesitos)
   paravam com o topo da seção em 0px, com o teto do cabeçalho em 141px, ou seja, o título da
   seção ficava invisível. Motivo: o `scroll-margin-top` de conteudo.css mira `.cv-pagina [id]`
   e essas duas seções nascem FORA da coluna de texto de propósito (comparacoes/pagina.mjs:288,
   "o instrumento é o herói, fora da coluna"), então a regra não as alcançava. As outras quatro
   âncoras já paravam nos 156px certos. Mesma conta das duas larguras de conteudo.css. */
#precoxkm,#quesitos{scroll-margin-top:calc(var(--altura-topo) + 20px)}
@media (max-width:1024px){
  #precoxkm,#quesitos{scroll-margin-top:calc(var(--altura-topo) + 64px)}
}

@media (max-width:640px){
  /* celular: o rótulo do quesito sobe pra uma linha própria e os dois lados dividem a largura */
  .avcomparar-duelo-linha{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .avcomparar-duelo-linha > .avcomparar-duelo-rotulo{grid-column:1/-1;padding:11px 14px 0}
  .avcomparar-duelo-topo > .avcomparar-duelo-rotulo{display:none}
  .avcomparar-duelo-cel{padding:8px 12px 11px}
  .avcomparar-duelo-num{font-size:14px}
  .avcomparar-placar-cab span{font-size:13px}
  .avcomparar-veredito{grid-template-columns:minmax(0,1fr)}
  .avcomparar-tema-destaque{font-size:19px}
  .avcomparar-detalhe>summary{padding:13px 15px;font-size:14px}
  .avcomparar-quesitos caption{padding:11px 14px 9px}
  .avcomparar-quesitos th,.avcomparar-quesitos td{padding-left:8px;padding-right:8px}
  .avcomparar-quesitos thead th:first-child{width:42%}
  .avcomparar-quesitos thead th:not(:first-child){width:29%}
  .avcomparar-quesitos tbody th{font-size:12.5px}
  .avcomparar-quesitos tbody td{font-size:12.5px}
  .avcomparar-quesitos tbody th small{font-size:11px}
}

/* ── título com os dois nomes como controle de troca (v8, 14/09/2026) ──────────────────────
   O H1 continua sendo a pergunta inteira; o que muda é que cada nome virou um alvo de clique.
   A cor NÃO vai no texto do nome (contraste do H1 é o que segura a página): ela fica no fio
   embaixo e no lápis, que são justamente as duas marcas que dizem "isto aqui você troca". Cada
   nome herda a cor do seu lado, a MESMA do placar e do gráfico logo abaixo, então o leitor
   aprende a dupla de cores uma vez e ela vale a página inteira.
   Sem JS o link leva ao hub filtrado por aquele carro (`/comparar?q=`), destino que existe. */
/* A marca do controle é um REALCE, não um fio embaixo. Medido a 360px em 14/09: com fio, um
   nome que quebra em duas linhas ("Jeep" numa, "Commander" na outra) vira dois traços soltos e
   lê como dois controles diferentes. O realce com `box-decoration-break:clone` acompanha a
   quebra como um grifo de marca-texto, que é justamente a leitura certa: um nome só, marcado.
   E, ao contrário de `white-space:nowrap`, ele não arrisca estourar a linha num nome comprido
   ("Land Rover Range Rover Evoque" não cabe inteiro em 360px). */
/* 15/09/2026 (v8, C5/E4): desenho do protótipo. Os dois nomes grandes, cada um na cor do seu
   carro, com a seta num círculo que diz "troca"; o "ou" pequeno entre eles; a pergunta de AEO
   numa linha menor embaixo. O realce de 14/09 saiu: o nome colorido já marca o controle, e ao
   quebrar em duas linhas a seta acompanha o nome (inline), sem virar dois traços soltos. */
.avcomparar .avcomparar-titulo,.avcomparar-palco .avcomparar-titulo{margin:0 0 6px;font-size:clamp(28px,3.6vw,40px);
  line-height:1.12;letter-spacing:-.02em;font-weight:800;color:var(--text)}
.avcomparar-trocar{color:var(--cor-lado,var(--text));text-decoration:none;border-radius:8px;
  transition:color .15s}
.avcomparar-trocar:hover{color:var(--text)}
.avcomparar-trocar:focus-visible{outline:2px solid var(--cor-lado,var(--accent));outline-offset:3px}
.avcomparar-lapis{display:inline-block;width:.62em;height:.62em;margin-left:.2em;vertical-align:.02em;
  color:var(--muted);transition:color .15s}
.avcomparar-trocar:hover .avcomparar-lapis{color:var(--text)}
.avcomparar-titulo-meio{font-size:15px;font-weight:500;letter-spacing:0;color:var(--muted);margin:0 .5em;vertical-align:.35em}
.avcomparar-titulo-fim{display:block;margin-top:6px;font-size:15px;font-weight:500;letter-spacing:0;line-height:1.45;color:var(--text2)}

/* ── instrumento: duas camadas no mesmo lugar ───────────────────────────────────────────────
   Embaixo o SVG do servidor (`#graficoComparar`), que é o que o crawler e quem não tem JS
   veem e que NUNCA é apagado. Em cima o canvas do painel (`#mapaComparar`), que public/
   comparar.js revela no boot escondendo o de baixo. O console e o mapa usam as classes `rp-`
   de public/painel.css, que é de outro agente: aqui só se encaixa, nunca se redefine. */
.avcomparar-instrumento{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.avcomparar-console{display:block}
.avcomparar-console[hidden],.avcomparar-mapa[hidden],
.avcomparar-grafico-caixa[hidden],.avcomparar-legenda[hidden]{display:none}
.avcomparar-grafico-caixa{min-width:0}
.avcomparar-mapa{min-width:0}

/* C17a (15/09/2026): deitado, o duelo segue a mesma regra do radar individual — console à
   esquerda, gráfico à direita. Aqui o invólucro é `.avcomparar-instrumento` (coluna flex), não
   `.rp-instrumento`, então a virada em duas colunas precisa ser repetida neste arquivo; as
   regras do que está DENTRO do console (estações 2×2, rodapé fora, canvas preenchendo) são as
   de public/painel.css, que casam pelas mesmas classes `rp-` e valem aqui sem cópia. As duas
   camadas do mapa (o SVG do servidor e o canvas do painel) dividem a mesma célula da direita
   porque só uma delas está visível por vez. A faixa de largura é idêntica à de painel.css. */
@media (orientation:landscape) and (max-height:540px) and (min-width:620px),
       (orientation:landscape) and (min-width:1000px) and (max-width:1200px){
  .avcomparar-instrumento{display:grid;grid-template-columns:minmax(290px,44%) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);gap:0;align-items:stretch;
    /* altura definida, copiada do --rp-altura-mapa por public/comparar.js: é ela que faz o
       console rolar por dentro em vez de esticar a linha e empurrar a legenda para fora. */
    height:var(--rp-altura-instrumento,auto);
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  /* quem ROLA tem de ser o próprio `.rp-console`, não este invólucro: o "outros filtros" é
     `position:sticky` (public/painel.css) e gruda no fim do seu bloco recipiente. Com o
     invólucro rolando e o `.rp-console` mais alto que ele, a fila grudava no fim do
     `.rp-console` — fora da área visível — e o controle ficava inalcançável sem rolar. */
  .avcomparar-console{grid-column:1;grid-row:1;min-width:0;min-height:0;display:flex}
  .avcomparar-grafico-caixa,.avcomparar-mapa{grid-column:2;grid-row:1;min-height:0}
  /* C17b: sem `overflow-y` aqui também — os quatro filtros cabem, não rolam. */
  .avcomparar-console .rp-console{flex:1 1 auto;min-width:0;
    border-bottom:0;border-right:1px solid var(--line)}
  .avcomparar-mapa canvas{height:100%}
  /* A4 deitado: no duelo, o que vem ANTES do instrumento é quase o dobro do radar individual
     (trilha + título de duas linhas + linha de fonte + duas placas). Medido a 640×360: 251px
     dos 360, sem nada sobrar para o mapa e a legenda. A trilha e a linha de fonte saem (as
     duas se repetem no corpo da página), o título encolhe e as placas ficam lado a lado —
     é a mesma poda que o celular em pé já faz, só que por altura. */
  .avcomparar-palco{padding-top:4px}
  .avcomparar-palco .avcomparar-trilha,
  .avcomparar-palco .avcomparar-fonte{display:none}
  /* C17b: o duelo tem 58px de título onde o radar individual tem a própria placa do carro como
     título, e deitado esses 58px saem do gráfico. O h1 encolhe para o tamanho de uma linha de
     apoio e a pergunta de AEO sai da TELA (segue no HTML, que é o que o buscador lê): os dois
     nomes já estão, em tamanho grande e na cor de cada carro, nas duas placas logo abaixo. */
  .avcomparar-palco .avcomparar-titulo{font-size:13.5px;line-height:1.2;margin-bottom:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .avcomparar-titulo-meio{font-size:11px;margin:0 .3em;vertical-align:.15em}
  .avcomparar-titulo-fim{display:none}
  /* o aperto das DUAS placas está no fim desta folha: as regras de `.avcomparar-placa` que
     valem aqui nascem depois desta linha, e um bloco posto neste ponto perderia para elas. */
  /* especificidade de propósito: a regra de `max-width:640px` empilha as duas placas e vem
     depois neste arquivo — a 640×360 (celular deitado estreito) as duas casam, e sem o peso
     extra as placas ficavam em pé, custando 89px dos 360 de altura. */
  .avcomparar-palco .avcomparar-placas{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;margin-bottom:4px}
}
/* legenda do canvas: uma linha, o nome de cada carro na sua cor e o corte à direita. O texto
   nunca fica NA cor da série (contraste); a cor mora só na bolinha. */
.avcomparar-legenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:10px 0 0;
  font-size:12.5px;color:var(--text2)}
.avcomparar-legenda>span{display:inline-flex;align-items:center;gap:6px}
.avcomparar-ponta{width:9px;height:9px;border-radius:50%;background:var(--cor-lado);flex:none}
.avcomparar-legenda-corte{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.avcomparar-tracejado{width:18px;height:0;border-top:2px dashed var(--muted);flex:none}

/* ── palco do duelo (v8, 15/09/2026, E3): largura cheia, o instrumento é o herói ────────────── */
.avcomparar-palco{max-width:var(--maxw,1180px);margin:0 auto;padding:22px 18px 8px}
.avcomparar-palco .avcomparar-fonte{margin:0 0 14px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.avcomparar-secao-grafico{margin:0}
.avcomparar-dica[hidden]{display:none}
.avcomparar-palco .avcomparar-instrumento{margin-top:0}

/* ── placa carro+versão, uma por carro (E4a) ────────────────────────────────────────────────
   A placa é `rp-cab` de public/painel.css (montarCabecalhoCarro, dono F1a): aqui só se encaixa
   e se dá a cor do lado, nunca se redefine o que é dela. Lado a lado no desktop, empilhadas no
   celular, cada uma com o fio da cor do seu carro. */
.avcomparar-placas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}
.avcomparar-placa[hidden]{display:none}
.avcomparar-placa{min-width:0;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--cor-lado);border-radius:var(--radius);overflow:hidden}
/* No radar individual a placa é o H1 da página e o nome vem em clamp(22px,2.9vw,34px). Aqui ela
   é um CONTROLE secundário: o H1 logo acima já diz os dois nomes em tamanho de título, e repetir
   esse corpo empurrava o gráfico para fora da primeira tela (A4). Então, só dentro desta página,
   a placa vira uma faixa compacta. Nada do componente é redefinido além do tamanho e do encaixe. */
.avcomparar-placa .rp-cab{margin:0}
/* `flex-direction:row` declarado aqui para TODA largura de propósito: no celular o painel.css
   empilha a placa em coluna, e aí o `flex-basis` da casa da versão (pensado para a horizontal)
   virava ALTURA — 210px por placa, 510px nas duas, que sozinhas jogavam o gráfico inteiro para
   fora da primeira tela (A4). No duelo a placa é sempre uma faixa: nome à esquerda, versão à
   direita, uma placa por linha. */
.avcomparar-placa .rp-cab-placa{display:flex;flex-direction:row;align-items:stretch;width:100%;max-width:none;
  border:0;border-radius:0;background:transparent}
.avcomparar-placa .rp-cab-titulo{flex:1 1 auto;min-width:0}
.avcomparar-placa .rp-cab-titulo{display:flex}
.avcomparar-placa .rp-cab-carro{width:auto;flex:1 1 auto;gap:8px;padding:9px 10px 9px 13px;border-radius:0;
  justify-content:space-between}
.avcomparar-placa .rp-cab-nome{font-size:15.5px;font-weight:800;line-height:1.25;color:var(--cor-lado);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avcomparar-placa .rp-cab-troca{font-size:11px;padding:3px 7px 3px 5px}
.avcomparar-placa .rp-cab-troca svg{width:13px;height:13px}
.avcomparar-placa .rp-cab-versao-caixa{flex:0 1 210px;min-width:0;border-top:0;border-left:1px solid var(--line2)}
.avcomparar-placa .rp-cab-versao{min-width:0;max-width:none;width:100%;padding:7px 12px;border-radius:0;column-gap:8px}
.avcomparar-placa .rp-cab-ligada .rp-cab-versao{box-shadow:inset 3px 0 0 var(--accent)}
.avcomparar-placa .rp-cab-rot{font-size:10.5px}
.avcomparar-placa .rp-cab-valor{font-size:13.5px;font-weight:700}
/* a data já está na linha de fonte logo acima; na placa ela seria a mesma frase duas vezes */
.avcomparar-placa .rp-cab-data{display:none}

/* leitura: o número grande, a frase e o botão de alerta numa linha (v8 .leitura) */
.avcomparar-leitura{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 22px;align-items:center;
  margin:22px 0 14px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.avcomparar-leitura[hidden],.avcomparar-lados[hidden],.avcomparar-colunas-caixa[hidden],.avcomparar-socorro[hidden]{display:none}
.avcomparar-leitura-n{font-size:clamp(34px,5vw,48px);line-height:1;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.avcomparar-leitura-dizeres{min-width:0}
.avcomparar-leitura-frase{margin:0;font-size:clamp(15px,1.5vw,17px);line-height:1.35;color:var(--text2)}
.avcomparar-leitura-frase b{color:var(--text);font-weight:700}
.avcomparar-leitura-apoio{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.avcomparar-socorro{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px;padding:12px 16px;
  border:1px dashed var(--line2);border-radius:var(--radius)}
.avcomparar-socorro p{margin:0;font-size:14px;color:var(--text2)}

/* os dois lados (v8 .lados): fio de cima na cor do carro, número grande, três medidas */
.avcomparar-lados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 12px}
.avcomparar-lado{padding:16px 18px;background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--cor-lado);border-radius:var(--radius)}
.avcomparar-lado-nome{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--cor-lado)}
.avcomparar-lado-n{font-size:clamp(28px,3.8vw,40px);line-height:1;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.avcomparar-lado-rot{margin:2px 0 10px;font-size:12.5px;color:var(--muted)}
.avcomparar-lado-det{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.avcomparar-lado-det b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* os mais em conta de cada lado (v8 .colunas) */
.avcomparar-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:22px}
/* E4b: o nome do carro é o título, na cor dele, com a bolinha da legenda do gráfico. O que as
   duas colunas têm de igual desceu para a linha de apoio. */
.avcomparar-coluna-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.avcomparar-coluna-titulo{display:flex;align-items:center;gap:7px;margin:0;font-size:15.5px;font-weight:800;
  color:var(--cor-lado);line-height:1.3;min-width:0}
.avcomparar-coluna-titulo .avcomparar-ponta{width:9px;height:9px}
.avcomparar-coluna-sub{margin:2px 0 10px;font-size:12.5px;color:var(--muted)}

/* "ordenar" (C11e): botão que abre as opções, nunca pílulas abertas ocupando a largura */
.avcomparar-ordenar{position:relative;flex:none}
.avcomparar-ordenar-btn{font-size:12.5px}
.avcomparar-ordenar-btn b{font-weight:700;color:var(--text)}
.avcomparar-ordenar-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;
  display:flex;flex-direction:column;padding:6px;background:var(--surface);border:1px solid var(--line2);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.avcomparar-ordenar-menu[hidden]{display:none}
.avcomparar-ordenar-menu button{appearance:none;border:0;background:transparent;text-align:left;cursor:pointer;
  padding:9px 10px;border-radius:var(--radius-sm);font:inherit;font-size:13.5px;color:var(--text2)}
.avcomparar-ordenar-menu button:hover{background:var(--surface2);color:var(--text)}
.avcomparar-ordenar-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.avcomparar-ordenar-menu button[aria-selected="true"]{color:var(--text);font-weight:700;background:var(--surface2)}
.avcomparar-anuncios{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.avcomparar-anuncio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:baseline;
  padding:11px 14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cor-lado);
  border-radius:var(--radius-sm);text-decoration:none;color:var(--text2);font-size:13px;transition:border-color .15s}
.avcomparar-anuncio:hover{border-color:var(--text)}
.avcomparar-anuncio:focus-visible{outline:2px solid var(--cor-lado);outline-offset:2px}
.avcomparar-anuncio b{grid-row:span 2;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums}
.avcomparar-anuncio span{font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
.avcomparar-anuncio-versao{color:var(--muted);font-size:12px}
.avcomparar-anuncio-vazio{margin:0;font-size:13px;color:var(--muted)}
/* o botão de cada coluna também fala pelo carro dela: em --accent nos dois lados, a coluna do
   segundo carro terminava numa cor que não é a dele */
.avcomparar-ver-todos{width:100%;justify-content:center;color:var(--cor-lado);border-color:var(--cor-lado)}
.avcomparar-ver-todos:hover{background:var(--cor-lado-suave)}
.avcomparar-aviso{margin:14px 0 0;font-size:12px;color:var(--muted)}

/* botão de detalhes (v8 "Ver detalhes da comparação"): a sanfona fica com cara de botão fantasma */
.avcomparar-quesitos-secao{margin:0}
.avcomparar-palco .avcomparar-detalhe{background:transparent;box-shadow:none;border-color:var(--line2)}
.avcomparar-palco .avcomparar-detalhe>summary{justify-content:center}
.avcomparar-palco .avcomparar-detalhe>summary::after{margin-left:6px}
.avcomparar-palco .avcomparar-detalhe[open]{background:var(--surface)}
.avcomparar-detalhe-corpo{padding:4px 16px 0;border-top:1px solid var(--line)}
.avcomparar-detalhe-corpo h2{margin:12px 0 6px;font-size:16px;font-weight:800;color:var(--text)}
.avcomparar-quesitos thead th.avcomparar-lado-a,.avcomparar-quesitos thead th.avcomparar-lado-b{color:var(--cor-lado);font-weight:700}

@media (max-width:640px){
  /* A4, medido em 390×844 e 360×640: a primeira tela tem que terminar na legenda. Tudo que vem
     antes do gráfico encolhe — o H1 continua com os DOIS nomes (é o que o Google lê), só que no
     corpo do celular; a pergunta vira uma linha pequena; as placas viram faixas de uma linha. */
  .avcomparar-palco{padding:12px 16px 4px}
  .avcomparar-palco .avcomparar-trilha{margin-bottom:4px}
  .avcomparar-palco .avcomparar-titulo{font-size:21px;line-height:1.15}
  .avcomparar-titulo-meio{font-size:13px;margin:0 .35em;vertical-align:.2em}
  .avcomparar-titulo-fim{margin-top:3px;font-size:12.5px;line-height:1.35}
  .avcomparar-palco .avcomparar-fonte{margin-bottom:10px;font-size:11.5px}
  .avcomparar-placa .rp-cab-carro{padding:7px 8px 7px 11px;gap:6px}
  .avcomparar-placa .rp-cab-nome{font-size:14px}
  .avcomparar-placa .rp-cab-versao-caixa{flex:0 1 150px}
  .avcomparar-placa .rp-cab-versao{padding:6px 10px}
  .avcomparar-placa .rp-cab-rot{font-size:10px}
  .avcomparar-placa .rp-cab-valor{font-size:12.5px}
  .avcomparar-placas{grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:10px}
  .avcomparar-coluna-topo{align-items:flex-start}
  .avcomparar-ordenar-menu{right:auto;left:0}
  .avcomparar-titulo-meio{font-size:14px}
  .avcomparar-titulo-fim{font-size:14px}
  .avcomparar-leitura{grid-template-columns:auto minmax(0,1fr)}
  .avcomparar-leitura .cv-btn-alerta{grid-column:1/-1;justify-content:center}
  .avcomparar-lados{gap:10px}
  .avcomparar-lado{padding:13px 14px}
  .avcomparar-colunas{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* A lista do modal de troca de carro é `rp-bc-*` de public/painel.css (abrirBuscaCarro, dono
   F1a): esta tela só chama o componente, não veste nada dele. */
.avcomparar-radar{margin:0}
.avcomparar-radar[hidden]{display:none}

/* ── os 17 quesitos ─────────────────────────────────────────────────────────────────────────
   Tabela de consulta, não o herói da página: o herói é o placar em duelo lá em cima, e duas
   coisas gritando na mesma tela não deixam nenhuma ser lida. Por isso ela usa a mesma sanfona
   discreta que a nota de fonte e a FAQ já usam (.cv-nota / .cv-faq-item), sem inventar um
   componente novo, e os números ficam em peso normal, alinhados à direita e tabulares.
   As 5 linhas sem origem recuam em vez de sumirem: o nome do quesito continua legível (é ele
   que informa o que o radar ainda não sabe), e só o valor fica em tom de ausência, com o fio
   pontilhado que diz "aqui não tem número, e não é esquecimento". Um fio mais forte separa o
   bloco medido do bloco declarado, uma vez só. */
.avcomparar-quesitos-nota{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--text2);max-width:68ch}
.avcomparar-detalhe{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.avcomparar-detalhe>summary{list-style:none;cursor:pointer;padding:14px 16px;font-size:14.5px;
  font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.avcomparar-detalhe>summary::-webkit-details-marker{display:none}
.avcomparar-detalhe>summary::after{content:'';margin-left:auto;flex:none;width:8px;height:8px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.avcomparar-detalhe[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.avcomparar-detalhe>summary:hover{background:var(--surface2)}
.avcomparar-detalhe>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.avcomparar-detalhe .tabela-rolo{border-top:1px solid var(--line)}
/* `table-layout:fixed` + largura declarada por coluna, e o cabeçalho pode quebrar: sem as duas
   coisas, o `white-space:nowrap` que .tabela do app.css põe no <thead> esticava a tabela pelo
   nome dos dois modelos e, a 360px, a coluna do SEGUNDO carro ficava inteiramente fora da tela.
   Numa tabela de comparação, ver um lado só é o mesmo que não ver nada. */
.avcomparar-quesitos{width:100%;table-layout:fixed}
.avcomparar-quesitos caption{caption-side:top;text-align:left;padding:12px 16px 10px;
  font-size:12.5px;line-height:1.5;color:var(--muted)}
.avcomparar-quesitos th,.avcomparar-quesitos td{vertical-align:top}
/* nome de modelo no cabeçalho sai do caixa-alta que .tabela impõe: em caixa-alta e com
   letter-spacing, "JEEP COMMANDER" não cabia na coluna a 360px e quebrava como "COMMANDE / R".
   Em caixa mista ele quebra no espaço, que é onde um nome próprio deve quebrar. */
.avcomparar-quesitos thead th{font-size:11.5px;color:var(--muted);white-space:normal;
  text-transform:none;letter-spacing:0;overflow-wrap:break-word;vertical-align:bottom}
.avcomparar-quesitos thead th:first-child{width:40%}
.avcomparar-quesitos thead th:not(:first-child){width:30%;text-align:right}
.avcomparar-quesitos tbody th{text-align:left;font-size:13.5px;font-weight:700;color:var(--text);
  line-height:1.35}
.avcomparar-quesitos tbody th small{display:block;margin-top:3px;font-size:11.5px;font-weight:500;
  color:var(--muted);line-height:1.4}
.avcomparar-quesitos tbody td{text-align:right;font-size:13.5px;color:var(--text2);
  font-variant-numeric:tabular-nums;line-height:1.45;overflow-wrap:anywhere}
.avcomparar-quesitos tbody tr:nth-child(even){background:var(--surface2)}
/* o fio grosso nasce uma vez só, na fronteira entre o que é medido e o que é declarado */
.avcomparar-quesitos tbody tr:not(.falta)+tr.falta{border-top:2px solid var(--line2)}
.avcomparar-quesitos tr.falta th{color:var(--text2)}
/* a ausência já é dita por escrito e pelo tom apagado; um pontilhado por cima quebrava em duas
   linhas na coluna estreita e virava dois traços soltos, que é ruído, não informação */
.avcomparar-sem-medida{color:var(--muted)}

/* ── preço por ano (feedback: cabeçalho explícito "A vs B", zebra, alinhamento à direita) ── */
.avcomparar-preco-ano{table-layout:fixed;width:100%}
/* O cabeçalho da última coluna ("Fastback vs Commander") é o texto mais longo da tabela e, com
   `table-layout:fixed`, saía cortado na borda do cartão em 10/09/2026. Quebrar em duas linhas
   custa 18px de altura e devolve o rótulo inteiro, que é o que explica o sinal dos números. */
.avcomparar-preco-ano th{white-space:normal;overflow-wrap:anywhere;vertical-align:bottom}
.avcomparar-preco-ano th.num,.avcomparar-preco-ano td.num{text-align:right;font-variant-numeric:tabular-nums}
.avcomparar-preco-ano tbody tr:nth-child(even){background:var(--surface2)}
.avcomparar-nota-diferenca{font-size:12px;color:var(--muted);margin:8px 0 0}

/* ── gráfico de dispersão sobreposto (docs/COMPARACOES.md §3, redesenho 09/09) ────────────
   Pontos pequenos (r 2,6) e opacidade baixa (feedback: "muito ponto, parece uma pintura") pra
   nuvem grande não virar mancha sólida; cor por token: A em --accent, B em --warn. Legenda
   GRANDE no topo do SVG com nome + contagem real + mediana. Linha de mediana rotulada dentro
   do próprio gráfico (fundo sólido atrás do texto pra nunca ficar ilegível sobre a nuvem). */
.grafico-comparacoes-svg{width:100%;height:auto;display:block;overflow:visible}
.grafico-comparacoes-svg .malha{stroke:var(--line);stroke-width:1}
.grafico-comparacoes-svg .eixo-rot{font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.grafico-comparacoes-svg .eixo-titulo{font-size:10.5px;fill:var(--muted);font-weight:600}
/* A cor e o comportamento do ponto vêm da SÉRIE, não de uma classe repetida em cada um dos
   1.602 círculos (era ~53 KB de HTML repetido). `.ponto-a`/`.ponto-b` continuam existindo para
   os dois círculos da legenda, que são únicos e ficam fora das séries. */
.grafico-comparacoes-svg .ponto-a,.grafico-comparacoes-svg .serie-a circle{fill:var(--accent)}
.grafico-comparacoes-svg .ponto-b,.grafico-comparacoes-svg .serie-b circle{fill:var(--info)}
.grafico-comparacoes-svg .serie circle{opacity:.5;cursor:pointer;transition:opacity .1s}
.grafico-comparacoes-svg .serie circle:hover,
.grafico-comparacoes-svg .serie circle:focus-visible{opacity:1;outline:none}
.grafico-comparacoes-svg .linha-mediana-a{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4}
.grafico-comparacoes-svg .linha-mediana-b{stroke:var(--info);stroke-width:1.5;stroke-dasharray:5 4}
.grafico-comparacoes-svg .rotulo-mediana-fundo{fill:var(--surface);opacity:.9}
.grafico-comparacoes-svg .rotulo-mediana{font-size:10.5px;font-weight:700;font-family:var(--serif-num)}
.grafico-comparacoes-svg .legenda-grafico-comparacoes .legenda-nome{font-size:12.5px;
  font-weight:700;fill:var(--text)}
/* tooltip HTML no hover/tap dos pontos (feedback: "não abriu tooltip"); `<title>` já dá o
   tooltip nativo sem JS, isto é o reforço visual no estilo do resto do site. */
.dica-flutuante-comparacoes{position:fixed;z-index:40;pointer-events:none;background:var(--text);
  color:var(--bg);border-radius:8px;padding:7px 10px;font-size:12px;line-height:1.5;
  box-shadow:var(--shadow);opacity:0;transition:opacity .12s;max-width:260px}
.dica-flutuante-comparacoes.mostra{opacity:1}

/* ── texto gerado do dado ────────────────────────────────────────────────────────────────── */
.avcomparar-texto{max-width:70ch}
.avcomparar-texto p{font-size:14.5px;line-height:1.65;color:var(--text2);margin:0 0 12px}

/* ── hub v8 (15/09/2026, E2): radar polar à esquerda, busca e duelos à direita ─────────────── */
.avcomparar-hub .avcomparar-cabecalho h1{font-size:clamp(28px,3.4vw,40px);line-height:1.08}
.avcomparar-subtitulo{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:var(--text2);max-width:68ch}
.avcomparar-hub .avcomparar-fonte{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.avcomparar-hub-corpo{display:grid;grid-template-columns:minmax(0,720px);gap:28px;align-items:start}
.avcomparar-hub-corpo.avcomparar-hub-com-radar{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:36px}
.avcomparar-radar{--rp-radar-max:560px;width:100%}
.avcomparar-hub-painel{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (min-width:1025px){
  .avcomparar-hub-com-radar .avcomparar-radar{position:sticky;top:calc(var(--altura-topo,64px) + 16px)}
}
.avcomparar-busca{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:var(--radius);
  padding:0 10px 0 16px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.avcomparar-busca:focus-within{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}
.avcomparar-busca[hidden]{display:none}
.avcomparar-busca svg{width:18px;height:18px;flex:none;color:var(--muted)}
.avcomparar-busca input{flex:1;min-width:0;border:0;outline:none;background:transparent;
  font:inherit;font-size:16px;color:var(--text);padding:15px 0}
.avcomparar-busca input::placeholder{color:var(--muted)}
.avcomparar-busca input::-webkit-search-cancel-button{display:none}
.avcomparar-hub-contagem{margin:0;font-size:12.5px;color:var(--muted)}
.avcomparar-hub-selecionado{padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);background:var(--surface)}
.avcomparar-hub-selecionado[hidden]{display:none}
.avcomparar-hub-sel-nome{margin:0;font-size:15px;font-weight:700;color:var(--text)}
.avcomparar-hub-sel-dado{margin:2px 0 4px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.avcomparar-hub-sel-link{font-size:13px;font-weight:700;color:var(--accent)}
.avcomparar-duelos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.avcomparar-duelos li[hidden]{display:none}
.avcomparar-duelo{display:block;padding:12px 14px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;transition:border-color .15s,transform .15s}
.avcomparar-duelo:hover,.avcomparar-duelo:focus-visible{border-color:var(--text);transform:translateX(2px);outline:none}
.avcomparar-duelo-l1{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap;font-size:15.5px}
.avcomparar-duelo-l1 b{font-weight:700;color:var(--cor-lado)}
.avcomparar-duelo-vs{font-size:11.5px;color:var(--muted)}
.avcomparar-duelo-l2{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.avcomparar-hub-mais[hidden]{display:none}
@media (max-width:1024px){
  .avcomparar-hub-corpo.avcomparar-hub-com-radar{grid-template-columns:minmax(0,1fr);gap:22px}
  .avcomparar-radar{--rp-radar-max:480px}
}
.avcomparar-busca-limpar{flex:none;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  background:var(--surface2);color:var(--text2);font-size:18px;line-height:1}
.avcomparar-busca-limpar:hover{background:var(--line2)}
.avcomparar-busca-limpar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.avcomparar-busca-resultado{margin:8px 0 0;min-height:1.2em;font-size:13px;color:var(--muted)}
.vazio a{color:var(--accent);font-weight:700}

@media (max-width:640px){
  .avcomparar-hub{padding:18px 16px 32px}
}

/* A4 em tela estreita e curta (360×640): o que ainda sobrava do cabeçalho sai de cena para a
   legenda caber na primeira tela. O H1 continua inteiro, com os dois nomes. */
@media (max-width:400px){
  .avcomparar-palco .avcomparar-titulo{font-size:19px}
  .avcomparar-titulo-fim{font-size:12px;line-height:1.3}
  .avcomparar-placas{gap:5px;margin-bottom:8px}
  .avcomparar-placa .rp-cab-carro{padding:5px 8px 5px 10px}
  .avcomparar-placa .rp-cab-versao{padding:4px 10px}
  .avcomparar-placa .rp-cab-nome{font-size:13.5px}
  /* a contagem de anúncios já está escrita nos dois lados, logo abaixo do gráfico */
  .avcomparar-fonte-extra{display:none}
  /* a legenda fica nos dois nomes e no corte, numa linha só: o tracejado se explica no próprio
     desenho, e o `margin-left:auto` do corte empurrava a contagem para uma terceira linha */
  /* precisa da mesma especificidade de `.avcomparar-legenda>span`, senão o inline-flex de lá vence */
  .avcomparar-legenda .avcomparar-legenda-dica{display:none}
  .avcomparar-legenda{gap:2px 10px;margin-top:7px;font-size:11.5px}
  .avcomparar-legenda-corte{margin-left:0}
}

/* ═══ C17b (15/09/2026) — aperto das duas placas do duelo no DEITADO ════════════════════════
   Mora no fim da folha de propósito: as regras de `.avcomparar-placa` (a casa da versão com
   `flex:0 1 210px`, o `min-width:0;max-width:none` do botão) e as de `max-width:640px` nascem
   depois do bloco de layout lá em cima, e com a mesma especificidade. Posto lá, este aperto
   perdia calado — medido: a casa da versão ficava com 176px dos 309 da placa e o NOME do carro
   com 73px, virando "Fiat Fas…" a 667×375. Aqui ele vence e o nome fica inteiro. ═══════════ */
@media (orientation:landscape) and (max-height:540px) and (min-width:620px),
       (orientation:landscape) and (min-width:1000px) and (max-width:1200px){
  .avcomparar-placa .rp-cab-carro{padding:4px 10px}
  .avcomparar-placa .rp-cab-nome{font-size:15px}
  /* a palavra "trocar" sai do botão; o ícone e o aria-label continuam */
  .avcomparar-placa .rp-cab-troca-txt{display:none}
  /* o nome é a identidade da coluna inteira e ganha a largura; a versão cede e abrevia */
  .avcomparar-placa .rp-cab-versao-caixa{flex:0 1 132px}
  .avcomparar-placa .rp-cab-versao{padding:3px 10px}
  .avcomparar-placa .rp-cab-rot{font-size:9.5px}
  .avcomparar-placa .rp-cab-valor{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .avcomparar-trocar,.avcomparar-detalhe>summary::after,.avcomparar-duelo,.avcomparar-anuncio{transition:none}
}