/* =========================================================================
   Reviews (/reviews/<id>/): identidade de FICHA TÉCNICA DE PRODUTO.
   Modelo: src/review.html · montagem: tools/colecoes/reviews.mjs · dados: data/reviews.json · JS: assets/js/review.js
   Topo dividido (o produto à esquerda, a foto de detalhe emoldurada à direita), índice preso sob o cabeçalho,
   blocos de ficha (rótulo à esquerda, conteúdo à direita, fios finos), régua de preço, tabela de ficha técnica.
   Só tokens do base.css; tudo prefixado com rv-. Página sem pacote: nada de .revela aqui.
   ========================================================================= */

.rv { --rv-largura: 880px; }
.rv [id] { scroll-margin-top: calc(var(--topo-h) + 72px); }

/* ---------- topo dividido ---------- */
.rv-topo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(32px, 5vw, 88px); padding-bottom: clamp(48px, 5vw, 80px);
}
.rv-topo__texto { max-width: 580px; }

.rv-trilha ol { display: flex; flex-wrap: wrap; align-items: center; font-size: var(--tt-mini); line-height: 1.4; color: var(--t3); }
.rv-trilha li + li::before { content: "/"; margin-inline: 10px; color: var(--t4); }
.rv-trilha a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; color: var(--t2); transition: color var(--d-1) ease; }
.rv-trilha a:hover { color: var(--t1); }

.rv-topo__t { margin-top: 18px; font-size: var(--tt-destaque); font-weight: 500; letter-spacing: -.03em; line-height: 1.02; }
.rv-topo__specs { margin-top: 14px; font-size: var(--tt-peq); line-height: 1.5; color: var(--t2); }

.rv-veredito { margin-top: 32px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--fio-2); }
.rv-veredito__r { font-size: var(--tt-mini); font-weight: 500; line-height: 1.3; color: var(--t3); }
.rv-veredito__t { margin-top: 8px; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.4; letter-spacing: -.015em; color: var(--t1); }

.rv-precos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; box-shadow: inset 0 1px 0 var(--fio-2); }
.rv-precos__item { padding: 18px 20px 0 0; }
.rv-precos__item + .rv-precos__item { padding: 18px 0 0 24px; box-shadow: inset 1px 0 0 var(--fio-2); }
.rv-precos dt { font-size: var(--tt-mini); font-weight: 500; line-height: 1.3; color: var(--t3); }
.rv-precos dd { display: grid; gap: 4px; margin-top: 8px; }
.rv-precos__v { font-size: clamp(26px, 2.2vw, 34px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.rv-precos__r { font-size: var(--tt-mini); line-height: 1.35; color: var(--t2); }
/* sem número (usada sem referência, nova fora de linha): o montar e o review.js deixam o valor vazio; fica só o texto
   curto, com inicial maiúscula ("Sem referência"), em vez de um travessão solto que parece dado quebrado */
.rv-precos__v:empty { display: none; }
.rv-precos__v:empty + .rv-precos__r::first-letter { text-transform: uppercase; }

.rv-topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: 28px; }
.rv-topo__acoes .link { min-height: 44px; }

/* a foto de detalhe, emoldurada (não sangra: é a "foto do produto" da ficha) */
.rv-topo__foto {
  position: relative; height: min(640px, calc(100svh - var(--topo-h) - 128px)); min-height: 420px;
  border-radius: var(--r-1); overflow: hidden; background: var(--sup-1);
}
.rv-topo__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--fio); pointer-events: none; }
.rv-topo__foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto); }
.rv-topo__legenda {
  position: absolute; z-index: 1; right: 12px; bottom: 12px; padding: 3px 8px; border-radius: var(--r-1);
  font-size: var(--tt-micro); line-height: 1.4; color: var(--t2); background: var(--veu);
}
.rv-topo__legenda:empty { display: none; }

/* ---------- índice da ficha (preso sob o cabeçalho no desktop) ---------- */
.rv-nav { position: sticky; top: var(--topo-h); z-index: 20; background: var(--preto); box-shadow: inset 0 -1px 0 var(--fio), 0 -1px 0 var(--fio); }
.rv-nav__lista { display: flex; gap: clamp(20px, 2.4vw, 36px); overflow-x: auto; scrollbar-width: none; }
.rv-nav__lista::-webkit-scrollbar { display: none; }
.rv-nav a {
  display: flex; align-items: center; min-height: 52px; font-size: var(--tt-peq); color: var(--t2); white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--d-1) ease, box-shadow var(--d-1) ease;
}
.rv-nav a:hover { color: var(--t1); }
.rv-nav a[aria-current] { color: var(--t1); box-shadow: inset 0 -2px 0 var(--t1); }
.rv-nav a:focus-visible { outline-offset: -2px; }

/* ---------- blocos da ficha: rótulo à esquerda, conteúdo à direita ---------- */
.rv-bloco {
  display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); gap: 20px 48px;
  margin-inline: var(--m); padding-block: clamp(48px, 5vw, 80px); box-shadow: inset 0 1px 0 var(--fio);
}
.rv-nav + .rv-bloco { box-shadow: none; }
.rv-bloco__t { font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; letter-spacing: -.018em; line-height: 1.2; }
.rv-bloco__corpo { min-width: 0; max-width: var(--rv-largura); }
.rv-fonte { margin-top: 20px; font-size: var(--tt-mini); line-height: 1.5; color: var(--t3); }
.rv-fonte:empty { display: none; }

/* ---------- visão geral: o desenho técnico do modelo (só nos reviews com assets/js/desenhos/<id>.js) ----------
   Como na prévia que o dono aprovou (_desenhos/index.html): à esquerda o título e as leituras da ficha no estilo dos
   apps (rótulo pequeno em caixa alta, o número em mono fino); à direita o desenho grande (assets/js/desenhos/desenho.js,
   que traz o CSS dele) e, embaixo, de onde vêm as medidas. No celular: título, desenho, leituras em grade e as fontes. */
.rv-vg { grid-template-rows: auto 1fr; }
.rv-vg__lado { min-width: 0; grid-row: span 2; }
.rv-vg > .rv-vg__fontes { grid-column: 2; align-self: start; margin-top: -11px; }
.rv-vg .rv-bloco__corpo { container-type: inline-size; }

.rv-leit { display: grid; gap: 18px; margin: 26px 0 0; }
.rv-leit__i { min-width: 0; }
.rv-leit dt { font-size: 10.5px; line-height: 1.2; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.rv-leit dd { margin: 7px 0 0; }
.rv-leit__v { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 300; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.15; letter-spacing: -.02em; color: var(--t1); }
.rv-leit__u { margin-left: .2em; font-size: .55em; letter-spacing: 0; color: var(--t3); }
.rv-leit__d { display: block; margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--t3); }

.rv-vg__fontes { max-width: var(--rv-largura); font-size: 12.5px; line-height: 1.5; color: var(--t3); }
/* a folga de 8 px dos lados é para o anel de foco do teclado não colar no ▶ (o texto fica no mesmo lugar), como os
   botões das vistas do desenho logo acima */
.rv-vg__fontes summary { cursor: pointer; width: max-content; max-width: calc(100% + 8px); margin-left: -8px; padding: 13px 8px; border-radius: 4px; color: var(--t2); transition: color var(--d-1) ease; }
.rv-vg__fontes summary:hover { color: var(--t1); }
.rv-vg__fontes ul { display: grid; gap: 4px; margin: -1px 0 0; padding: 0; list-style: none; }
.rv-vg__fontes b { font-weight: 500; color: var(--t2); }
.rv-vg__fontes a { color: var(--t2); text-decoration: underline; text-decoration-color: var(--fio-3); text-underline-offset: 3px; }
.rv-vg__fontes a:hover { color: var(--t1); text-decoration-color: var(--t1); }

/* o lugar do desenho, reservado antes de ele chegar (o review.js carrega o motor quando a seção se aproxima da tela):
   a mesma conta do medir() do motor, com as medidas do modelo que o montar põe no HTML (tools/lib/desenhos.mjs):
   --dz-alt (mm de altura das 2 vistas), --dz-larg (mm do quadro), --dz-pe (px do pé: os botões das vistas e a nota),
   --dz-pe-e (o pé no estreito, com a nota embaixo dos botões e a margem da lista), --dz-lista (px da lista de chamadas
   do estreito, a maior das 2 vistas) e --dz-lista-1 (a da 1ª vista).
   Palco = alt × k + 2 × 24 px, com k = (largura − 2 colunas de chamadas) / quadro, no máximo 3,6 px por mm; embaixo,
   o pé. Abaixo de 560 px: colunas de 30 px, k até 3,2, 2 × 14 px, o pé e a lista numerada.
   Até chegar, o lugar tem a cara do palco (fundo e fio); quando o palco do desenho já tem a altura dele, o review.js
   tira a reserva (is-pronto) e, no estreito com o ciclo das vistas, põe no lugar a altura medida da vista mais alta. */
.rv-vg__desenho {
  --dz-k: min((100cqi - 2 * clamp(150px, 25cqi, 250px)) / var(--dz-larg, 160), 3.6px);
  --dz-palco: calc(var(--dz-alt, 100) * var(--dz-k) + 48px);
  position: relative; isolation: isolate; min-height: calc(var(--dz-palco) + var(--dz-pe, 40px));
}
.rv-vg__desenho::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: var(--dz-palco); border-radius: 8px; pointer-events: none;
  background: radial-gradient(75% 60% at 50% 48%, rgba(255,255,255,.06), transparent 72%), #060606; box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.rv-vg__desenho.is-pronto { min-height: 0; }
.rv-vg__desenho.is-pronto::before { content: none; }
/* no palco estreito, a lista numerada das chamadas fica embaixo do desenho, uma por vista. A nota ("Em escala, com as
   medidas da Canon.") desce sempre para a linha de baixo dos botões: assim a altura do pé não depende do tamanho da
   tela nem do texto (no celular de 360 px ela já não cabia ao lado). A reserva conta a lista maior das duas vistas
   (o desenho vira para a outra sozinho e o resto da página não pode pular); com "reduzir movimento" o desenho fica
   parado na 1ª vista, e a reserva conta só a lista dela. */
@container (max-width: 559.98px) {
  .rv-vg .dz__nota { flex-basis: 100%; }
  .rv-vg__desenho {
    --dz-k: min((100cqi - 60px) / var(--dz-larg, 160), 3.2px);
    --dz-palco: calc(var(--dz-alt, 100) * var(--dz-k) + 28px);
    min-height: calc(var(--dz-palco) + var(--dz-pe-e, 74.8px) + var(--dz-lista, 0px));
  }
  @media (prefers-reduced-motion: reduce) {
    .rv-vg__desenho { min-height: calc(var(--dz-palco) + var(--dz-pe-e, 74.8px) + var(--dz-lista-1, var(--dz-lista, 0px))); }
  }
}
/* sem JavaScript, nada de quadro vazio: a seção fica com o título, as leituras e, embaixo delas, as fontes (no
   computador, sozinhas na coluna da direita, pareciam um link perdido). O mesmo quando o desenho não chega (rede). */
@media (scripting: none) {
  .rv-vg .rv-bloco__corpo { display: none; }
  .rv-vg > .rv-vg__fontes { grid-column: 1; margin-top: -4px; }
}
.rv-vg--sem-desenho .rv-bloco__corpo { display: none; }
.rv-vg--sem-desenho > .rv-vg__fontes { grid-column: 1; margin-top: -4px; }

/* ---------- régua de preço: a faixa da usada, a referência e a nova numa escala só ---------- */
.rv-regua { max-width: 720px; margin-bottom: 40px; }
.rv-regua__marcas { position: relative; height: 54px; }
.rv-regua__marca { position: absolute; bottom: 14px; display: grid; gap: 2px; white-space: nowrap; }
/* âncora proporcional: no começo da escala o rótulo sai para a direita, no fim para a esquerda (nunca vaza) */
.rv-regua__marca--usada { left: var(--ref, 0%); transform: translateX(calc(var(--ref, 0%) * -1)); }
.rv-regua__marca--nova { left: var(--novo, 100%); transform: translateX(calc(var(--novo, 100%) * -1)); text-align: right; }
.rv-regua__r { font-size: var(--tt-micro); font-weight: 500; line-height: 1.3; color: var(--t3); }
.rv-regua__v { font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; line-height: 1.1; letter-spacing: -.022em; }
.rv-regua__trilho { position: relative; height: 2px; border-radius: 1px; background: var(--fio-2); }
.rv-regua__faixa {
  position: absolute; top: 50%; left: var(--ini, 0%); width: calc(var(--fim, 100%) - var(--ini, 0%)); min-width: 6px; height: 6px;
  border-radius: 1px; background: var(--t3); transform: translateY(-50%);
}
.rv-regua__ponto, .rv-regua__nova {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%);
}
.rv-regua__ponto { left: var(--ref, 0%); background: var(--t1); box-shadow: 0 0 0 3px var(--preto); }
.rv-regua__nova { left: var(--novo, 100%); background: var(--preto); box-shadow: inset 0 0 0 2px var(--t1); }

/* com a régua na tela, os valores grandes já estão nela */
.rv-preco:has(.rv-regua:not([hidden])) .rv-valor__v { display: none; }
.rv-valores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.rv-valor { display: flex; flex-direction: column; align-items: flex-start; padding-top: 16px; box-shadow: inset 0 1px 0 var(--fio); }
.rv-valor__r { font-size: var(--tt-mini); font-weight: 500; color: var(--t1); }
.rv-valor__v { margin-top: 8px; font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; line-height: 1.05; letter-spacing: -.028em; }
.rv-valor__v:empty { display: none; }   /* sem número: o detalhe embaixo já diz "Ainda sem referência" */
.rv-valor__d { margin-top: 8px; max-width: 34em; font-size: var(--tt-peq); line-height: 1.55; color: var(--t2); }
.rv-valor__d + .rv-valor__d { margin-top: 6px; }
.rv-valor__d:empty { display: none; }
.rv-valor__fonte { margin-top: 10px; font-size: var(--tt-peq); }
.rv-valor__fonte:not([href]), .rv-valor__fonte[href=""] { display: none; }

.rv-economia { margin-top: 32px; font-size: var(--tt-texto); line-height: 1.5; color: var(--t1); }
.rv-economia:empty { display: none; }
.rv-atencao { max-width: 44em; margin-top: 24px; padding: 18px 20px; border-radius: var(--r-2); background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--fio); }
.rv-atencao:has(p:empty) { display: none; }
.rv-atencao__t { font-size: var(--tt-mini); font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--t2); }
.rv-atencao p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--t1); }
.rv-preco__tabela { margin-top: 28px; font-size: 15px; }
/* links soltos (fora de frase): área de toque de 44 px ou mais (o ::after do .link cresce um pouco) */
.rv-valor__fonte::after, .rv-preco__tabela .link::after, .rv-outros__cab .link::after { inset: -12px -6px; }

/* ---------- prós e contras ---------- */
.rv-lead { max-width: 36em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; letter-spacing: -.012em; color: var(--t1); }
.rv-pc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 40px; }
.rv-pc__t { padding-bottom: 12px; font-size: var(--tt-mini); font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--t3); }
.rv-pc__lista li { position: relative; padding: 14px 0 14px 30px; box-shadow: inset 0 1px 0 var(--fio); font-size: 15px; line-height: 1.55; color: var(--t1); }
.rv-pc__lista li::before { content: ""; position: absolute; left: 2px; }
.rv-pc__lista--pro li::before { top: 20px; width: 11px; height: 6px; border: solid var(--t1); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); }
.rv-pc__lista--contra li::before { top: 25px; width: 11px; height: 1.5px; background: var(--t3); }
.rv-pc__lista--contra li { color: var(--t2); }

/* ---------- para quem é ---------- */
.rv-quem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.rv-quem > div { padding-top: 16px; box-shadow: inset 0 1px 0 var(--fio); }
.rv-quem dt { font-size: var(--tt-mini); font-weight: 500; color: var(--t1); }
.rv-quem dd { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--t2); }
.rv-boa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 32px; }
.rv-boa:not(:has(li)) { display: none; }
.rv-boa__r { font-size: var(--tt-mini); color: var(--t3); }
.rv-boa__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-boa__lista li {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-2);
  font-size: var(--tt-mini); color: var(--t2); background: var(--vidro); box-shadow: inset 0 0 0 1px var(--fio);
}
.rv-opiniao { margin-top: 32px; padding: 18px 20px; border-radius: var(--r-2); background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--fio); }
.rv-opiniao__r { font-size: var(--tt-mini); font-weight: 500; color: var(--t3); }
.rv-opiniao__t { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--t1); }

/* ---------- a chamada do curso (a principal da página) ---------- */
.rv-curso { margin: clamp(8px, 1vw, 16px) var(--m) clamp(48px, 5vw, 80px); }
.rv-curso__caixa {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 48px;
  padding: clamp(28px, 3.6vw, 52px); border-radius: var(--r-2); background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--fio);
}
.rv-curso__t { margin-top: 14px; font-size: var(--tt-titulo); font-weight: 400; letter-spacing: -.022em; line-height: 1.15; }
.rv-curso__d { margin-top: 10px; max-width: 34em; font-size: var(--tt-desc); line-height: 1.5; color: var(--t2); }
.rv-curso__btn { flex: none; }
.rv-curso + .rv-bloco { padding-top: clamp(40px, 4vw, 64px); }

/* ---------- ficha técnica: tabela de duas colunas, fios finos ---------- */
.rv-ficha { width: 100%; border-collapse: collapse; }
.rv-ficha th, .rv-ficha td { padding: 13px 0; border-top: 1px solid var(--fio); text-align: left; vertical-align: top; line-height: 1.45; }
.rv-ficha tr:last-child > * { border-bottom: 1px solid var(--fio); }
.rv-ficha th { width: 36%; padding-right: 20px; font-size: var(--tt-peq); font-weight: 400; color: var(--t3); }
.rv-ficha td { font-size: 15px; color: var(--t1); }

/* ---------- perguntas sobre o equipamento: respostas rápidas, sempre visíveis ----------
   No ritmo da ficha: uma linha por pergunta, entre fios finos, a pergunta na coluna da esquerda (a mesma largura do
   rótulo da ficha) e a resposta à direita. No celular, a pergunta fica em cima da resposta. */
.rv-pq__item {
  display: grid; grid-template-columns: minmax(0, calc(36% - 20px)) minmax(0, 1fr); gap: 6px 20px;
  padding-block: 15px 17px; box-shadow: inset 0 1px 0 var(--fio);
}
.rv-pq__item:last-child { box-shadow: inset 0 1px 0 var(--fio), inset 0 -1px 0 var(--fio); }
.rv-pq__p { font-size: 15px; font-weight: 500; letter-spacing: -.008em; line-height: 1.45; color: var(--t1); text-wrap: pretty; }
.rv-pq__r { max-width: 36em; font-size: 15px; line-height: 1.6; color: var(--t2); text-wrap: pretty; }
/* link dentro da resposta (aqui e nas dúvidas): sublinhado fino, como nos artigos */
.rv-pq__r a, .rv-faq__r a {
  color: var(--t1); text-decoration: underline; text-decoration-color: var(--fio-3); text-decoration-thickness: 1px;
  text-underline-offset: 4px; transition: text-decoration-color var(--d-1) ease;
}
.rv-pq__r a:hover, .rv-faq__r a:hover { text-decoration-color: var(--t1); }

/* ---------- alternativas ---------- */
.rv-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vao); }
.rv-alts > li { display: flex; }
.rv-alt {
  display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 20px 20px 18px; border-radius: var(--r-2);
  background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--fio); transition: box-shadow var(--d-1) ease, background var(--d-1) ease;
}
.rv-alt:hover, .rv-alt:focus-visible { background: var(--sup-2); box-shadow: 0 0 0 2px var(--t1); outline: none; }
.rv-alt__nome { font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }
.rv-alt__meta { font-size: var(--tt-mini); color: var(--t3); }
.rv-alt__meta:empty { display: none; }
.rv-alt__porque { margin-top: 10px; font-size: var(--tt-peq); line-height: 1.5; color: var(--t2); }
.rv-alt__precos { display: grid; gap: 2px; margin-top: auto; padding-top: 16px; font-size: var(--tt-mini); line-height: 1.4; color: var(--t1); }
.rv-alt__precos > span:last-child { color: var(--t2); }
.rv-alt__precos > span:empty { display: none; }

/* ---------- dúvidas de quem vai comprar (campo faq, em <details>) ---------- */
.rv-faq__item { box-shadow: inset 0 1px 0 var(--fio); }
.rv-faq__item:last-child { box-shadow: inset 0 1px 0 var(--fio), inset 0 -1px 0 var(--fio); }
.rv-faq__p { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none; }
.rv-faq__p::-webkit-details-marker { display: none; }
.rv-faq__p h3 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; transition: color var(--d-1) ease; }
.rv-faq__p:hover h3 { color: var(--t2); }
.rv-faq__p:focus-visible { outline-offset: 4px; }
.rv-faq__icone { position: relative; flex: none; width: 14px; height: 14px; }
.rv-faq__icone::before, .rv-faq__icone::after { content: ""; position: absolute; top: 50%; left: 0; width: 14px; height: 1.5px; background: var(--t2); transform: translateY(-50%); transition: transform var(--d-2) var(--ease); }
.rv-faq__icone::after { transform: translateY(-50%) rotate(90deg); }
.rv-faq__item[open] .rv-faq__icone::after { transform: translateY(-50%) rotate(0deg); }
.rv-faq__r p { max-width: 40em; padding: 0 38px 24px 0; font-size: 15px; line-height: 1.65; color: var(--t2); }

/* ---------- nota de honestidade e outros reviews ---------- */
.rv-nota { margin-inline: var(--m); padding-top: 28px; box-shadow: inset 0 1px 0 var(--fio); font-size: var(--tt-mini); line-height: 1.6; color: var(--t3); }
.rv-outros { margin: clamp(56px, 6vw, 88px) var(--m) 0; }
.rv-outros__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rv-outros__t { font-size: var(--tt-fileira); font-weight: 500; letter-spacing: -.012em; line-height: 1.25; }
.rv-outros__cab .link { font-size: var(--tt-peq); }
.rv-outros__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vao); }
.rv-outro {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 10px 16px 10px 10px; border-radius: var(--r-2);
  background: var(--sup-1); box-shadow: inset 0 0 0 1px var(--fio); transition: box-shadow var(--d-1) ease, background var(--d-1) ease;
}
.rv-outro:hover, .rv-outro:focus-visible { background: var(--sup-2); box-shadow: 0 0 0 2px var(--t1); outline: none; }
.rv-outro__foto { flex: none; width: 60px; height: 60px; border-radius: var(--r-1); overflow: hidden; background: var(--sup-2); }
.rv-outro__foto img { width: 100%; height: 100%; object-fit: cover; filter: var(--foto); }
.rv-outro__texto { display: grid; gap: 2px; min-width: 0; }
.rv-outro__nome { font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.rv-outro__cat { font-size: var(--tt-mini); line-height: 1.35; color: var(--t3); }

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
  .rv-outros__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* o índice com "Visão geral" (e os nomes longos do "X ou Y") cabendo inteiro por volta de 1024 px, sem rolar */
@media (min-width: 901px) and (max-width: 1100px) {
  .rv-nav__lista { gap: 16px; }
}
@media (max-width: 900px) {
  .rv-bloco { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* visão geral: o título, o desenho, as leituras em grade e as fontes, um embaixo do outro */
  .rv-vg__lado { display: contents; }
  .rv-vg .rv-bloco__t { order: 0; }
  .rv-vg .rv-bloco__corpo { order: 1; }
  .rv-leit { order: 2; margin: 0; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 16px; }
  .rv-vg > .rv-vg__fontes { order: 3; grid-column: auto; margin-top: -9px; }
  .rv-alts { grid-template-columns: minmax(0, 1fr); }
  .rv-curso__caixa { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .rv [id] { scroll-margin-top: calc(var(--topo-h) + 16px); }
  .rv-topo { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: calc(var(--topo-h) + 16px); }
  .rv-topo__foto { order: -1; height: auto; min-height: 0; aspect-ratio: 16 / 11; }
  .rv-topo__t { margin-top: 12px; }
  .rv-veredito { margin-top: 24px; }
  .rv-precos__item { padding-right: 12px; }
  .rv-precos__item + .rv-precos__item { padding-left: 16px; }
  .rv-topo__acoes { gap: 0 24px; margin-top: 18px; }
  .rv-nav { position: static; box-shadow: inset 0 -1px 0 var(--fio), inset 0 1px 0 var(--fio); }
  .rv-nav a { min-height: 48px; }
  .rv-pc, .rv-quem, .rv-valores { grid-template-columns: minmax(0, 1fr); }
  .rv-pc { gap: 28px; margin-top: 32px; }
  .rv-ficha th { width: 42%; }
  .rv-pq__item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 16px 18px; }
  .rv-curso__btn { width: 100%; }
  .rv-faq__p h3 { font-size: 16px; }
  .rv-faq__r p { padding-right: 0; }
  .rv-outros__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-faq__icone::before, .rv-faq__icone::after { transition: none; }
  .rv-pq__r a, .rv-faq__r a { transition: none; }
  .rv-vg__fontes summary { transition: none; }
}