/* =========================================================
   opina.css — extensão isolada do sistema global para /opina
   Carrega depois de styles.css. Reaproveita tokens e componentes
   já existentes (cor, tipografia, raio, régua, botões, foco,
   reduced motion, breakpoints) — nada aqui redefine ou compete
   com eles. Só forma nova, para conteúdo que não existe em
   nenhuma outra página do site hoje.

   Lote de refinamento visual (Sprint 2): antes de acrescentar azul
   em qualquer lugar novo, este arquivo segue duas leis já escritas
   em styles.css e não repetidas aqui —
   · A Regra do Sinal: azul é exclusivo de botão, link, fio de seção
     e grifo. Os acréscimos deste lote usam preto a baixa opacidade
     (a mesma "Regra do Preto Único" das assinaturas de #entregas)
     para peso estrutural, reservando o azul só para o que já era
     azul (CTA, grifo) e para o monograma do símbolo do hero — que
     funciona como marca, não como rótulo de interface.
   · A cadência de revelação das assinaturas de #entregas (traço se
     desenha primeiro, acento chega depois, já com o traço fechado)
     é reaproveitada como TÉCNICA no símbolo do hero, sem reusar as
     classes .pilar-cena/.cena-registro — essas continuam exclusivas
     de #entregas, como o DESIGN.md determina.
   ========================================================= */

/* ---------- eyebrow (rótulo acima do H1 do hero) ---------- */
.opina-eyebrow{
  display:block;
  margin-bottom:1rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cinza);
}

/* ---------- assinatura de confiança (hero + fechamento de metodologia) ---------- */
.opina-trust{
  margin-top:1.5rem;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.05em; color:var(--cinza);
}

/* Nota de acesso (Macro 2 · Compactação) — só existe no Hero, então
   herda espaçamento do vizinho de cima (.opina-trust) em vez do
   +.opina-prosa padrão (que pressupõe outro .opina-prosa antes).
   Tamanho e largura reduzidos: é informação de apoio (o que acontece
   ao clicar), não a promessa central da página — essa continua sendo
   .hero-sub, sem concorrência de peso visual. */
.opina-trust + .opina-prosa{
  margin-top:1.25rem;
  max-width:56ch;
  font-size:.9375rem;
  line-height:1.55;
}

/* Selo oficial "Developed with YouTube" — asset intocado (só a marca
   Google/YouTube, sem recolorir/redesenhar); dimensão nativa 700x250
   preservada via atributos width/height, exibida pequena e discreta. */
.opina-selo-youtube{
  display:inline-block;
  margin-top:1rem;
}
.opina-selo-youtube img{
  display:block;
  width:130px;
  height:auto;
}
.opina-selo-youtube:hover img{ opacity:.75; }
.opina-selo-youtube:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:4px;
}

/* ---------- prosa livre fora de componente com medida própria ---------- */
.opina-prosa{ max-width:62ch; }
.opina-prosa + .opina-prosa{ margin-top:1rem; }
.opina-prosa + .ficha,
.opina-prosa + .dif-lista,
.opina-prosa + .opina-fluxo,
.opina-prosa + .opina-promessas-fios{ margin-top:clamp(2.25rem,5vw,3.25rem); }

/* =========================================================
   HERO — símbolo do produto
   Duas colunas só a partir de 861px: texto continua sozinho e
   inteiro no mobile (a leitura do H1 não muda em nenhuma largura),
   o símbolo é puramente decorativo (aria-hidden) e só entra onde
   sobra espaço real ao lado do texto.
   ========================================================= */
.hero-grade{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,34vw,460px);
  align-items:start;
  gap:clamp(2rem,5vw,4rem);
}
.hero-conteudo{ min-width:0; }

/* Símbolo do Opina — logo oficial 3D (raster, não recriada em SVG).
   A coluna (.hero-grade, acima) é DELIBERADAMENTE mais larga que o
   símbolo — mesma fórmula, sem a margem — para sobrar espaço real
   dos dois lados e margin-inline:auto centralizar de fato dentro da
   coluna, não só encostar o símbolo nela. Nested % dentro de
   minmax()/clamp() em grid-template-columns não resolveu de forma
   previsível nos testes (Chromium ignorava o valor percentual); vw
   puro resolve normalmente.
   margin-top compensa o centro óptico: .hero-grade usa align-items
   start (não center) de propósito — centralizar contra a coluna
   inteira (que inclui CTA + assinatura) empurrava o símbolo para
   baixo do centro real de H1+texto de apoio. O valor foi calibrado
   medindo (h1.top + sub.bottom)/2 contra o centro do símbolo em
   1280×720 e 1440×900 — replicar checando essas duas larguras se o
   texto do Hero mudar de novo. */
.opina-simbolo{
  position:relative;
  width:clamp(272px,31vw,420px);
  margin-inline:auto;
  margin-top:clamp(2.8rem,4.72vw,4.25rem);
  /* entrada acompanha a mesma coreografia de .hero-acao (opacidade +
     leve subida), só que mais tarde — o símbolo fecha a sequência
     que o texto abre. */
  transition:opacity .9s var(--ease) .4s, transform .9s var(--ease) .4s;
}
.js .opina-simbolo{ opacity:0; transform:translateY(14px) scale(.97); }
.js .acendeu .opina-simbolo{ opacity:1; transform:none; }

.opina-simbolo-flutua{ position:relative; }
@media (prefers-reduced-motion:no-preference){
  .opina-simbolo-flutua{
    /* Duração própria (não --motion-ambient): mais lenta que o token
       sitewide de propósito — um símbolo 3D pede um ciclo mais longo
       pra ler como "vivo", não como elemento piscando; o token
       compartilhado continua 6s em todo o resto do site. */
    animation:opina-flutuar 9s var(--motion-ease-inout) infinite;
  }
}
/* Translação + rotação sutil + respiração de escala, as três no
   mesmo ciclo — um símbolo 3D "vivo" gira e cresce/encolhe muito
   discretamente enquanto flutua, nunca só sobe e desce em linha
   reta. Amplitudes pequenas de propósito (±7px, ±1.4deg, ±1.2%):
   suficiente pra ler como presença, não como gimmick. */
@keyframes opina-flutuar{
  0%,100%{ transform:translateY(0) rotate(0deg) scale(1); }
  50%{ transform:translateY(-7px) rotate(1.4deg) scale(1.012); }
}

.opina-simbolo-img{
  display:block;
  width:100%; height:auto;
}

/* rede de segurança: em movimento reduzido, o símbolo nasce pronto —
   nada de opacidade zerada esperando uma transição que nunca vai
   rodar. Mesmo princípio das camadas de segurança do .pilar em
   #entregas (styles.css). */
@media (prefers-reduced-motion:reduce){
  .js .opina-simbolo{ opacity:1 !important; transform:none !important; }
}

/* Mesma fronteira de viewport baixo que .hero-acao já usa em
   styles.css (min-width:861px e max-height:820px — telas largas mas
   curtas, como 1280×720): lá o espaço vertical do Hero encolhe todo
   em vh, então o centro óptico de H1+texto de apoio sobe. O símbolo
   precisa subir junto, com um valor menor de margin-top, para
   continuar alinhado ao mesmo centro.

   .crumb e .hero são componentes sitewide de styles.css — o piso do
   clamp original (padding-top:2.25rem no crumb, 1.75rem no hero)
   ainda deixava pouca folga até o CTA em 1280×720 (CTA terminando a
   ~2px da dobra). A sobrescrita abaixo vale só para /opina (arquivo
   isolado) e só nessa faixa exata de altura — 1440×900 e acima usam
   os valores originais de styles.css, intocados. Empurrar .hero para
   cima desse jeito não muda o alinhamento do símbolo calculado acima:
   os dois são deslocados juntos pelo mesmo padding-top do .hero. */
@media (min-width:861px) and (max-height:820px){
  .crumb{ padding-top:clamp(1.25rem,2.6vh,1.75rem); }
  .hero{ padding-top:clamp(1.25rem,2.6vh,1.75rem); }
  .opina-simbolo{ margin-top:clamp(2.25rem,6.47vh,3.25rem); }
}

/* Recalibração pós-copy do Hero (texto de apoio ficou mais longo):
   a partir de 1320px o texto de apoio passa de 4 para 5 linhas —
   ponto medido, não estimado (1280px ainda fica em 4; 1320px já
   fecha em 5) — e empurra o centro de H1+texto de apoio pra baixo.
   .hero-conteudo é limitado pelo max-width do .wrap bem antes disso,
   então acima de ~1360px o layout já está todo estabilizado (mesmo
   centro em qualquer largura maior, só a altura da viewport muda o
   valor) — por isso os dois blocos abaixo usam coeficiente único,
   sem faixa min/max fazendo trabalho real dentro do intervalo
   coberto. Fica só nesta largura pra cima: 1280×720 (calibrado
   acima, ainda em 4 linhas) continua intocado. */
@media (min-width:1320px) and (min-height:821px){
  .opina-simbolo{ margin-top:clamp(2.8rem,5.8vw,5.22rem); }
}
@media (min-width:1320px) and (max-height:820px){
  .opina-simbolo{ margin-top:clamp(3rem,8.76vh,4.5rem); }
}

@media (max-width:860px){
  .hero-grade{ grid-template-columns:1fr; gap:0; }
  .opina-simbolo{ display:none; }
}

/* ---------- CTA com realce discreto (hero + fechamento) ----------
   Um único brilho diagonal, uma vez, no hover/foco — nunca em loop,
   nunca sozinho na tela. Fora do prefers-reduced-motion:no-preference
   o brilho simplesmente não acontece: o botão continua .btn puro. */
.opina-btn-realce{ position:relative; overflow:hidden; }
.opina-btn-realce::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.32) 48%, transparent 66%);
  transform:translateX(-120%);
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .opina-btn-realce::after{ transition:transform .6s var(--ease); }
  .opina-btn-realce:hover::after,
  .opina-btn-realce:focus-visible::after{ transform:translateX(120%); }
}

/* =========================================================
   RITMO ENTRE SEÇÕES — reduções cirúrgicas e pontuais, no mesmo
   multiplicador que .sec--emenda já usa (styles.css), nunca em
   valor solto. Cada uma resolve um vão específico apontado no
   lote; nenhuma mexe na .sec global.
   ========================================================= */
/* Transições apontadas na validação manual como vão excessivo —
   cada uma soma padding-bottom da seção anterior + padding-top da
   seguinte (seções são elementos <section>, sem colapso de margem).
   Decisões→Conversa→Produto Real→YouTube Studio formam uma única
   linha narrativa contínua (processo → prova no produto → contexto
   de uso); os cortes abaixo puxam as transições juntas, sem "colar" —
   todas continuam maiores que uma emenda comum (.65×--sec-y),
   preservando respiro premium.
   Macro 2 · Compactação: #resultados foi fundida em #diferenciais
   (ver seção ONDE O OPINA SE DIFERENCIA no HTML) — a régua que aqui
   cortava o fundo de #resultados foi removida junto; #conversa-decisao
   agora emenda direto em #como-funciona, com o mesmo corte de .5×
   que já usava, sem precisar de ajuste novo. */
/* Bloco D1 — auditoria global de ritmo: Problema→Decisões e
   Metodologia→Para-quem tinham o MESMO padrão já corrigido em todo
   lugar (seção sem corte no fundo + seguinte de emenda = 1.65×--sec-y,
   contra ~1.25× em toda transição já revisada) e nunca tinham sido
   tocadas — mesmo multiplicador .6 já usado abaixo, por consistência. */
#problema.sec{ padding-bottom:calc(var(--sec-y) * .6); }
#decisoes.sec{ padding-bottom:calc(var(--sec-y) * .6); }
#conversa-decisao.sec{ padding-bottom:calc(var(--sec-y) * .5); }
/* #como-funciona é .sec--emenda (topo já reduzido pela classe
   compartilhada) mas não tinha corte no fundo; #youtube-studio nunca
   foi emenda (fronteira tratada como virada até esta rodada) — o
   padding-top dele nunca tinha sido tocado. Reduzir os dois localiza
   o ajuste só nesta transição, sem herdar a classe .sec--emenda nem
   mexer no HTML. */
#como-funciona.sec{ padding-bottom:calc(var(--sec-y) * .75); }
/* YouTube Studio→Confiança (Bloco D1): vão observado como excessivo em
   desktop (.82+.65=1.47×). Corte moderado, não no mesmo patamar das
   emendas em cascata acima — Studio não é .sec--emenda, é um bloco
   informativo à parte, não uma continuação estrita — mas o suficiente
   pra tirar o excesso sem colar. */
#youtube-studio.sec{ padding-top:calc(var(--sec-y) * .75); padding-bottom:calc(var(--sec-y) * .7); }

/* Bloco B insere #diferenciais e #sinais-contexto entre Produto Real e
   YouTube Studio — os pares acima continuam intocados (agora ligam a
   Produto Real→Diferenciais e a Sinais-contexto→YouTube Studio por
   consequência da inserção, não por edição). Os dois cortes abaixo
   fecham as duas transições NOVAS que ficaram só com o lado emenda
   (.65×) do vizinho seguinte, sem corte do próprio lado — mesmo
   critério do restante do bloco. */
#diferenciais.sec{ padding-bottom:calc(var(--sec-y) * .55); }
#sinais-contexto.sec{ padding-bottom:calc(var(--sec-y) * .55); }

/* Bloco C insere #ask-studio entre Bloco B e YouTube Studio — mesmo
   critério dos dois cortes acima, agora fechando a transição nova
   Ask Studio→YouTube Studio (que herdou o .75× de padding-top já
   calibrado para #youtube-studio, sem editá-lo). */
#ask-studio.sec{ padding-bottom:calc(var(--sec-y) * .55); }
#metodologia.sec{ padding-bottom:calc(var(--sec-y) * .6); }

/* Folga segura abaixo do cabeçalho sticky (Bloco D1) — o mobile já
   tinha essa correção (.sec--emenda a .82× abaixo de 767px, ver bloco
   RESPONSIVO). Faltava o tablet: entre 768–1024px o cabeçalho continua
   de uma linha só (~80px, nav de seção escondida mas sem quebrar —
   isso só acontece abaixo de ~434px, ver styles.css) enquanto
   .sec--emenda ainda usava só .65×--sec-y (46–60px nessa faixa,
   sempre menor que os ~80px do cabeçalho) — o rótulo nascia
   parcialmente atrás dele. Mesmo multiplicador do bloco mobile,
   mesma razão, escopo novo. */
@media (min-width:768px) and (max-width:1024px){
  .sec--emenda{ padding-top:calc(var(--sec-y) * .82); }
}

/* ---------- Decisões — fechamento com mais peso ----------
   Ainda é o .sec-fecho de sempre (mesma revelação .rev/.vis do
   main.js) — só ganha uma régua de abertura e hierarquia entre as
   duas frases. Régua, não fio azul: o fechamento é pausa, não nova
   seção, e a Regra do Sinal reserva o azul ao fio de abertura. */
.opina-fecho-decisao{
  margin-top:clamp(2rem,4vw,2.75rem);
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--regua);
}
.opina-fecho-tit{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.375rem,2.3vw,1.75rem);
  line-height:1.3;
  color:var(--tinta);
  max-width:34ch;
}
.opina-fecho-sub{
  margin-top:.6rem;
  font-size:1rem; line-height:1.55;
  color:var(--cinza);
  max-width:52ch;
}

/* =========================================================
   DECISÕES — prova grande em 3 dos 5 cards (.metodo-etapa é
   sitewide/styles.css, ver comentário original ali: "cada <li> só
   pode ter 2 filhos diretos no grid". Os 3 cards com captura
   reaproveitam exatamente esse contrato — <div class="metodo-texto">
   (título + texto, 1º filho) e <button class="opina-prova-grande">
   (2ª coluna) — então toda a régua/gap/reveal/stagger sitewide
   continua funcionando sem duplicar nada aqui.

   .metodo-texto ganhando um <h3> como filho também já é padrão
   previsto: é o mesmo arranjo que a Biblioteca usa (comentário de
   styles.css junto de ".metodo-texto h3 + p"), só que lá o h3 vira
   link — aqui seguiu <h3> puro, sem duplicar CSS de título.

   Só a largura da coluna muda, e só a partir de 1025px (a régua
   sitewide já empilha .metodo-etapa em 1024px — abaixo disso a
   coluna nem existe, então nada aqui precisa repetir aquele
   breakpoint). Acima dele, a coluna do título ganha um pouco mais de
   espaço (cabe o texto descritivo agora) e a da imagem passa a ser
   a maior parte do card — antes era só 11rem de thumbnail. */
@media (min-width:1025px){
  .metodo-etapa--prova{
    grid-template-columns:minmax(15rem,19rem) 1fr;
    align-items:start;
  }
}

/* Botão que também é moldura da captura — sem biblioteca externa,
   o próprio elemento clicável. Bordas levemente arredondadas e
   sombra bem sutil são exceção deliberada à Regra do Canto Vivo
   (pedido explícito, só para estas 3 capturas grandes — nenhuma
   outra imagem da página ganha raio). */
.opina-prova-grande{
  display:block;
  width:100%; min-width:0;
  padding:0;
  border:1px solid var(--regua);
  border-radius:12px;
  box-shadow:0 1px 3px rgba(15,15,15,.06);
  overflow:hidden;
  background:var(--papel);
  font:inherit;
  text-align:left;
  cursor:zoom-in;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.opina-prova-grande:hover,
.opina-prova-grande:focus-visible{
  border-color:var(--azul);
  box-shadow:0 2px 10px rgba(37,99,235,.14);
}
.opina-prova-grande img{
  display:block;
  width:100%; height:auto;
}
@media (min-width:1025px){
  /* margem só entra quando a coluna troca de largura pra sinalizar
     "captura", não "texto" — abaixo de 1025px o gap do grid (que já
     empilhou em 1fr) já resolve o respiro sozinho. */
  .metodo-etapa--prova .metodo-texto{ padding-top:.25rem; }
}

/* ---------- zoom das 3 capturas — <dialog> nativo ---------- */
.opina-zoom{
  border:none;
  padding:clamp(1.25rem,4vw,2.5rem);
  margin:auto;
  max-width:96vw;
  max-height:92vh;
  background:transparent;
  overflow:auto;
  overscroll-behavior:contain;
}
.opina-zoom::backdrop{
  background:rgba(15,15,15,.72);
}
.opina-zoom-img{
  display:block;
  max-width:calc(96vw - clamp(2.5rem,8vw,5rem));
  max-height:calc(92vh - clamp(2.5rem,8vw,5rem));
  width:auto; height:auto;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(15,15,15,.28);
}
.opina-zoom-fechar{
  position:absolute;
  top:.75rem; right:.75rem;
  display:flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem;
  border:1px solid var(--regua);
  border-radius:50%;
  background:var(--branco);
  color:var(--tinta);
  font-size:1rem; line-height:1;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.opina-zoom-fechar:hover,
.opina-zoom-fechar:focus-visible{
  border-color:var(--azul);
  color:var(--azul);
}

/* =========================================================
   PRODUTO REAL — provas visuais reais (Bloco D2)
   Placeholder virou captura real: mesma estrutura .opina-telas/
   .opina-tela/.opina-tela-caixa já prevista pro momento da troca
   (o comentário original já dizia "trocar o placeholder interno,
   proporção e legenda permanecem") — só cresceu de 2 pra 3
   secundárias, e ganhou uma segunda linha, "destaque", abaixo.

   Captura em dark mode (Mesa de Decisões, a única desta seção):
   moldura clara com padding visível (passe-partout) e
   object-fit:contain — nunca cover — pra manter a imagem inteira
   (inclusive os botões "Em acompanhamento"/"Reabrir" no rodapé)
   sem cortar, e pra a escuridão nunca tocar direto a régua clara
   ao redor. Zero pixel manipulado — a moldura contém, não inverte
   nem filtra. Mesmo raciocínio se repete em toda captura dark
   usada no arquivo (buscar ".opina-tela--mat" e ".opina-prova-mini
   .opina-prova-mini-caixa"). */
.opina-telas{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.25rem);
  margin-top:clamp(2.25rem,5vw,3.25rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--regua);
}
.opina-tela{ min-width:0; }
.opina-tela--principal{ grid-column:1 / -1; }
.opina-tela-caixa{
  overflow:hidden;
  border:1px solid var(--regua);
  background:var(--papel);
}
.opina-tela--principal .opina-tela-caixa{
  aspect-ratio:21/10;
  border-color:rgba(15,15,15,.18);
}
.opina-tela--secundaria .opina-tela-caixa{ aspect-ratio:8/5; }
.opina-tela-caixa img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:top;
}
.opina-tela-legenda{
  margin-top:1rem;
  max-width:58ch;
  font-size:1rem; color:var(--tinta);
}
.opina-tela--principal .opina-tela-legenda{ font-size:1.0625rem; }

/* ---------- destaque: persistência (maior) + continuidade (menor) ----------
   Fecha o bloco com "o Opina não termina na recomendação": a Mesa
   com "Em acompanhamento"/"Reabrir" ganha mais peso visual que
   qualquer outra captura da seção, sem virar banner — só proporção
   maior na grade. */
.opina-provas-destaque{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:clamp(1.5rem,3vw,2.25rem);
  margin-top:clamp(1.5rem,3vw,2.25rem);
}
.opina-provas-destaque .opina-tela-caixa{ aspect-ratio:21/10; }
.opina-tela--mat .opina-tela-caixa{ padding:1.25rem; }
.opina-tela--mat .opina-tela-caixa img{
  object-fit:contain; object-position:center;
}

/* =========================================================
   PROVA MINI — crops pequenos e discretos, reaproveitados em
   várias seções (Decisões, Da conversa à decisão, Diferenciais,
   Confiança/Metodologia, Estrutura do debate). Nunca telas
   inteiras nesse tamanho — só um recorte reconhecível (cabeçalho
   + primeira linha de conteúdo real), suficiente pra provar que é
   captura real sem tentar ser legível no detalhe. Mesma lei do
   resto do arquivo: zero animação — screenshot não é elemento
   decorativo, e a lição dos Blocos A/B/C foi clara sobre não
   animar nada com conteúdo real dentro.
   ========================================================= */
.opina-prova-mini{ min-width:0; }
.opina-prova-mini-caixa{
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--regua);
  background:var(--papel);
}
.opina-prova-mini-caixa img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:top;
}
.opina-prova-mini-legenda{
  display:block;
  margin-top:.5rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.05em; color:var(--cinza);
}

/* Bloco D2: .opina-tela-caixa parou de animar — desde a Task
   anterior já não carregava mais texto (só a caixa decorativa), mas
   agora carrega uma <img> de captura real, e a lei do brief é clara:
   sem carrossel, sem inclinação, sem competir por atenção — a prova
   visual entra estática, como o resto do conteúdo essencial da
   página. @keyframes opina-entra segue viva, reaproveitada por
   fio/marcador/SVG decorativos em outras seções. */
@keyframes opina-entra{ to{ opacity:1; transform:none; } }

/* CTA intermediário, logo após as capturas — mesmo valor de respiro
   que .opina-prosa já usa antes de .ficha/.dif-lista/.opina-fluxo,
   só que como fechamento da demonstração, não abertura de bloco. O
   .hero-acao que segue já traz seu próprio margin-top (styles.css),
   sem precisar de regra nova. */
.opina-telas + .opina-prosa{ margin-top:clamp(2.25rem,5vw,3.25rem); }

/* =========================================================
   DA CONVERSA À DECISÃO — processo de 6 etapas
   Um percurso, não seis cards: duas fileiras de três, cada uma com
   um fio horizontal próprio atravessando o centro dos marcadores
   numéricos — o "trilho" é o fio (::before) da fileira; o número é
   um círculo por cima dele (fundo opaco, por isso "corta" o fio
   visualmente em vez de sobrepor). Réguas/fios, nunca cards — mesma
   gramática de .dif-lista/.opina-publicos, só com o marcador
   numerado para reforçar a progressão pedida (01→06). */
.opina-fluxo{ margin-top:clamp(2.5rem,5vw,3.5rem); }
.opina-fluxo-linha{
  position:relative;
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  padding-top:2.5rem;
}
.opina-fluxo-linha::before{
  content:"";
  position:absolute; top:.875rem; left:0; right:0;
  height:1px;
  background:var(--regua);
}
.opina-fluxo-linha + .opina-fluxo-linha{ margin-top:clamp(2rem,4vw,2.75rem); }
.opina-fluxo-item{
  position:relative;
  display:flex; flex-direction:column; gap:.5rem;
}
.opina-fluxo-num{
  position:absolute; top:-2.5rem; left:0;
  display:flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem;
  border-radius:50%;
  background:var(--branco);
  border:1.5px solid rgba(15,15,15,.4);
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  color:var(--tinta);
  transition:background-color .5s var(--motion-ease-inout),
             border-color     .5s var(--motion-ease-inout),
             color            .5s var(--motion-ease-inout);
}
/* Preenchimento sequencial no scroll (01→06), JS abaixo no HTML —
   IntersectionObserver simples, só desktop/tablet (min-width:768px,
   mesma fronteira do fade-in abaixo) e só com movimento permitido; a
   classe nunca é adicionada fora disso, então esta regra fica inerte
   e as bolinhas seguem no estado neutro de sempre. Azul aqui estende
   "A Regra do Sinal" a um novo uso de sinal — marcar progresso de
   leitura — não decoração solta. */
.opina-fluxo-num--preenchido{
  background:var(--azul);
  border-color:var(--azul);
  color:#fff;
}
.opina-fluxo-tit{
  font-family:var(--display); font-weight:700;
  font-size:1.0625rem; color:var(--tinta);
}
.opina-fluxo-txt{
  font-size:.9375rem; line-height:1.5; color:var(--cinza);
  max-width:26ch;
}

/* "Outras leituras disponíveis" (Confiança/Metodologia) — única
   usuária restante de .opina-prova-narrativa; o trio Sinal/Evidência/
   Decisão acompanhada migrou pro padrão .metodo-lista em rodada
   posterior. */
.opina-prova-narrativa{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.25rem,3vw,2rem);
  margin-top:clamp(2rem,4vw,2.75rem);
}
.opina-prova-mini-caixa--fundo img{ object-position:bottom; }
/* Os 3 screenshots têm proporções bem diferentes (quase quadrado x
   panorâmico) — moldura de altura travada + object-fit:contain evita
   cortar informação (a régua antiga de .opina-prova-mini-caixa usava
   aspect-ratio:4/3 + cover, que recortava o conteúdo pra caber).
   Reaproveita .opina-prova-grande (borda, raio, hover azul, zoom) só
   com altura fixa nesta seção — mesma largura de coluna garante que
   as 3 molduras terminem na mesma linha e as legendas comecem juntas. */
.opina-prova-narrativa .opina-prova-grande{
  height:14rem;
  padding:1rem;
}
.opina-prova-narrativa .opina-prova-grande img{
  width:100%; height:100%;
  object-fit:contain;
}

/* Reaproveitada em Confiança/Metodologia (Bloco D2) — mesma estrutura
   de 3, mas fora do fluxo de 6 etapas, então precisa do próprio
   espaçamento em vez do margin-top pensado pra seguir .opina-fluxo. */
.opina-provas-rotulo{
  display:block;
  margin-top:2rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
}
.opina-prova-narrativa--metodologia{ margin-top:1rem; }

/* Fechamento visual do processo — régua + Playfair maior, sem virar
   banner: mesma superfície do resto da página, só com mais peso
   tipográfico. Ver Regra do Sinal — nada de fundo azul aqui. */
.opina-fluxo-fecho{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(1.75rem,3.5vw,2.5rem);
  border-top:1px solid var(--regua);
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem,3vw,2.25rem);
  line-height:1.35;
  color:var(--tinta);
  max-width:38ch;
}

/* Revisão pós-validação manual: título/pergunta de cada etapa NUNCA
   ficam em opacidade baixa — texto essencial lido em qualquer ponto
   do scroll tinha que aparecer "desabilitado" antes de acender.
   .opina-fluxo-item (que envolve título+pergunta) parou de animar;
   só o marcador numérico (aria-hidden, decorativo) e o fio da fileira
   ganham entrada discreta — mesma keyframe opina-entra, reaproveitada
   também para o scaleX do fio (transform:none equivale a scaleX(1),
   sem precisar de keyframe nova). Só a partir de 768px, mesma lição
   de sempre: abaixo disso nasce tudo inteiro, sem depender de scroll. */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  @supports (animation-timeline:view()){
    .opina-fluxo-num{
      opacity:0; transform:scale(.6);
      animation:opina-entra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
    .opina-fluxo-linha::before{
      transform:scaleX(0); transform-origin:left;
      animation:opina-entra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 35%;
    }
  }
}

/* =========================================================
   FIOS DE ABERTURA — ONDE O OPINA SE DIFERENCIA
   Dois SVGs decorativos que abrem a seção fundida (Macro 2 ·
   Compactação — ver comentário no HTML): vieram de #resultados, cuja
   grade de 8 cards (2+6) foi removida com a fusão em #diferenciais.
   Par de gráficos lado a lado, mesma grade e gap, pra cada svg ficar
   alinhado à metade da seção que ele antecede — nunca os dois
   empilhados à esquerda, o que leria como pertencendo só à primeira
   metade. */
.opina-promessas-fios{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.75rem,3.5vw,3rem);
  margin-top:clamp(2rem,4vw,2.5rem);
}
.opina-promessas-fio{
  display:block;
  width:clamp(13.5rem,23vw,20rem); height:auto;
}
.opina-promessas-fio line{ stroke:rgba(15,15,15,.22); stroke-width:1; }
.opina-promessas-fio-pt{ fill:rgba(15,15,15,.35); }
.opina-promessas-fio-pt--mid{ fill:rgba(15,15,15,.55); }
.opina-promessas-fio-pt--final{ fill:var(--azul); }

/* .opina-promessas-destaque/.opina-promessa(-grande)/.opina-promessas-
   -lista — a grade 2+6 que sustentava os oito cards de #resultados —
   foram removidas nesta rodada (Macro 2 · Compactação): a seção foi
   fundida em #diferenciais, cujos oito itens já têm o próprio layout
   (.opina-dif-lista) — ver comentário no HTML. Só os dois gráficos de
   fio abaixo continuam em uso, migrados para o topo da seção fundida. */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  @supports (animation-timeline:view()){
    .opina-promessas-fio{
      opacity:0; transform:translateY(8px);
      animation:opina-entra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}

/* =========================================================
   ONDE O OPINA SE DIFERENCIA — lista editorial de 8 itens, três
   zonas no desktop (nome | o que entrega | ganho), nunca cards
   nem aparência de planilha. Mesma gramática de réguas finas já
   usada em .dif-lista (styles.css) e .opina-promessa, só com uma
   terceira coluna dedicada ao ganho.
   ========================================================= */
.opina-dif-lista{
  list-style:none; margin:0; padding:0;
  margin-top:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--regua);
}
.opina-dif{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,1fr) 4.5rem;
  gap:.35rem clamp(1.5rem,3vw,2.5rem);
  align-items:start;
  padding-block:clamp(1.5rem,3vw,2rem);
  border-bottom:1px solid var(--regua);
}
/* Quarta coluna: prova visual discreta em 6 dos 8 itens (ver HTML) —
   desktop/tablet só, escondida no bloco RESPONSIVO junto com o resto
   do stack mobile já validado no D1 (não reabrir aquele ritmo). */
.opina-dif-prova{
  aspect-ratio:4/3;
  overflow:hidden;
  border:1px solid var(--regua);
  background:var(--papel);
}
.opina-dif-prova img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:top;
}
.opina-dif-prova--fundo img{ object-position:bottom; }
.opina-dif-prova--canto img{ object-position:left bottom; }
.opina-dif-id{ display:flex; align-items:baseline; gap:.625rem; }
.opina-dif-num{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.05em; color:var(--cinza);
}
.opina-dif-nome{
  font-family:var(--display); font-weight:700;
  font-size:1.125rem; line-height:1.3;
  color:var(--tinta);
}
.opina-dif-desc{
  font-size:.9375rem; line-height:1.55; color:var(--cinza);
  max-width:38ch;
}
.opina-dif-ganho{ max-width:30ch; }
.opina-dif-ganho-lbl{
  display:block;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
  margin-bottom:.35rem;
}
.opina-dif-ganho-txt{
  font-size:.9375rem; line-height:1.5; color:var(--tinta);
}

/* Itens 01-03: captura grande no lugar da .opina-dif-prova (crop
   pequeno) — mesmo botão/zoom de .opina-prova-grande, reaproveitado.
   Coluna de texto vira .metodo-texto (já suporta 3+ filhos, ver
   comentário original em styles.css) com id/desc/ganho empilhados.
   Breakpoint próprio (860px, não 1025px): .opina-dif já usa esse
   valor pro resto da lista, então a régua responsiva daqui não pode
   divergir do resto de .opina-dif-lista. */
.opina-dif--prova{
  grid-template-columns:minmax(15rem,19rem) 1fr;
  align-items:start;
}
.opina-dif--prova .metodo-texto{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.opina-dif--prova .opina-dif-ganho-lbl{ color:var(--azul); }
.opina-dif--prova .opina-dif-ganho-txt{ font-size:1rem; }

/* Marcador numérico é o único elemento decorativo do item (o resto é
   texto essencial e por isso nunca anima — ver bloco de reveal mais
   abaixo, junto com o das outras duas seções deste lote). */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  @supports (animation-timeline:view()){
    .opina-dif-num{
      opacity:0; transform:scale(.7);
      animation:opina-entra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}

/* =========================================================
   DOIS SINAIS QUE MUDAM A LEITURA — Benchmark e Estrutura do
   Debate lado a lado no desktop. Cada metade é só réguas, pontos
   e linhas (SVG inline, aria-hidden) com o significado sempre
   duplicado em texto visível ao lado — o gráfico nunca é a única
   fonte da informação.
   ========================================================= */
.opina-sinais{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,4rem);
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--regua);
}
.opina-sinal-tit{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.32;
  color:var(--tinta);
}
.opina-sinal-txt{
  margin-top:.75rem;
  font-size:.9375rem; line-height:1.55; color:var(--cinza);
  max-width:42ch;
}
.opina-sinal-ganho{
  margin-top:1.25rem;
  padding-top:1rem;
  border-top:1px solid var(--regua-f);
  max-width:34ch;
}
.opina-sinal-ganho-lbl{
  display:block;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
  margin-bottom:.35rem;
}
.opina-sinal-ganho-txt{
  font-family:var(--display); font-weight:700;
  font-size:1rem; line-height:1.4; color:var(--tinta);
}

/* ---------- benchmark ---------- */
.opina-benchmark{ margin-top:clamp(2rem,4vw,2.5rem); }
.opina-benchmark-svg{ display:block; width:100%; max-width:22rem; height:auto; }
.opina-benchmark-svg line{ stroke:rgba(15,15,15,.22); stroke-width:1; }
.opina-benchmark-liga{ stroke-dasharray:3 3; stroke:rgba(15,15,15,.3); }
.opina-benchmark-pt{ fill:rgba(15,15,15,.4); }
.opina-benchmark-pt--atual{ fill:var(--azul); }
.opina-benchmark-eixo{
  display:flex; justify-content:space-between;
  max-width:22rem;
  margin-top:.5rem;
}
.opina-benchmark-lbl{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.05em; color:var(--cinza);
}
.opina-benchmark-lbl--atual{ color:var(--azul); }
.opina-benchmark-nota{
  margin-top:.75rem;
  font-size:.875rem; line-height:1.5; color:var(--cinza);
  max-width:40ch;
}
.opina-benchmark-nota--metodo{
  margin-top:1.25rem;
  padding-top:.85rem;
  border-top:1px solid var(--regua-f);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.02em;
}

/* Slot reservado do Benchmark (Bloco D2) — ainda não há resultado
   real adequado. Mesmo padrão visual do antigo placeholder de
   Produto Real (papel + régua + rótulo mono central): já lia como
   "em preparo", não como erro, então não foi reinventado.
   Oculto ao usuário final (display:none) até a captura real ser
   inserida — estrutura preservada no HTML/CSS para a troca futura. */
.opina-prova-reservada{
  display:none;
  margin-top:1.5rem;
  aspect-ratio:21/10;
  border:1px solid var(--regua);
  background:var(--papel);
  align-items:center; justify-content:center;
}
.opina-prova-reservada-marca{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
}

.opina-prova-mini--debate{ max-width:20rem; margin-top:2rem; }

/* ---------- estrutura do debate ---------- */
.opina-debate-marca{
  display:block;
  margin-top:1.25rem;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cinza);
}
.opina-debate-comp{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,3vw,2rem);
  margin-top:1rem;
}
.opina-debate-lado{ min-width:0; }
.opina-debate-conta{
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.05em; color:var(--cinza);
}
.opina-debate-svg{
  display:block;
  width:100%; max-width:9rem; height:auto;
  margin-top:.75rem;
}
.opina-debate-svg line, .opina-debate-svg polyline{
  stroke:rgba(15,15,15,.3); stroke-width:1; fill:none;
}
.opina-debate-svg circle{ fill:rgba(15,15,15,.55); }
.opina-debate-legenda{
  margin-top:.75rem;
  font-family:var(--display); font-weight:700;
  font-size:1rem; color:var(--tinta);
}
.opina-debate-apoio{
  margin-top:.35rem;
  font-size:.875rem; line-height:1.5; color:var(--cinza);
}
/* Wrapper texto/captura grande — vive fora de .opina-sinais (ver
   HTML) pra ocupar a largura cheia de .wrap, não a metade da coluna
   Debate: mesma régua de coluna de .metodo-etapa--prova/.opina-dif--
   prova (15-19rem | 1fr, 1025px), pra a captura sair do mesmo
   tamanho das demais provas grandes da página, não uma versão
   espremida. Divisória (margem/fio) que antes vivia em
   .opina-debate-fecho passou pra cá, já que o fecho virou só a
   coluna de texto. */
.opina-debate-prova{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  align-items:start;
  margin-top:clamp(2.25rem,5vw,3.25rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--regua);
}
@media (min-width:1025px){
  .opina-debate-prova{ grid-template-columns:minmax(15rem,19rem) 1fr; }
}

/* Só os gráficos (aria-hidden) se movem — texto de Benchmark e Debate
   nasce sempre em opacity:1, mesma lição do Bloco A. */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  @supports (animation-timeline:view()){
    .opina-benchmark-svg,
    .opina-debate-svg{
      opacity:0; transform:translateY(8px);
      animation:opina-entra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}

/* =========================================================
   OPINA E ASK STUDIO — comparação editorial compacta, nunca tabela
   nem checklist ✓/✗. A diferença de formato aparece só na geometria
   dos dois SVGs conceituais: balões arredondados + laço para o Ask
   Studio (conversa em loop), linha reta + nós quadrados para o Opina
   (estrutura). Reaproveita .opina-fluxo-fecho (claim principal) e
   .opina-debate-marca (micro-label) já existentes — zero regra nova
   pra elas.
   ========================================================= */
.opina-abordagens{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,5vw,4rem);
  margin-top:clamp(2.5rem,5vw,3.25rem);
}
.opina-abordagem-tit{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.25rem,2vw,1.5rem);
  color:var(--tinta);
}
.opina-abordagem-desc{
  margin-top:.5rem;
  font-size:.9375rem; line-height:1.5; color:var(--cinza);
  max-width:36ch;
}
.opina-abordagem-visual{ margin-top:1.5rem; }
.opina-abordagem-svg{ display:block; height:auto; }
.opina-ask-svg{ width:100%; max-width:11rem; }
.opina-ask-balao{ fill:none; stroke:rgba(15,15,15,.35); stroke-width:1.25; }
.opina-ask-linha{ fill:none; stroke:rgba(15,15,15,.22); stroke-width:1; }
.opina-ask-linha--loop{ stroke-dasharray:2 3; }
.opina-opina-svg{ width:100%; max-width:14rem; }
.opina-opina-svg line{ stroke:rgba(15,15,15,.22); stroke-width:1; }
.opina-opina-svg rect{ fill:rgba(15,15,15,.4); }
.opina-opina-no--final{ fill:var(--azul); }

.opina-abordagem-lista{
  list-style:none; margin:0; padding:0;
  margin-top:1.25rem;
  border-top:1px solid var(--regua);
}
.opina-abordagem-item{
  padding-block:.85rem;
  border-bottom:1px solid var(--regua);
  font-size:.9375rem; color:var(--tinta);
  max-width:34ch;
}

/* Só os dois SVGs conceituais se movem — título, microdescrição,
   claim principal e itens da lista nascem sempre em opacity:1. */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  @supports (animation-timeline:view()){
    .opina-abordagem-svg{
      opacity:0; transform:translateY(8px);
      animation:opina-entra linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }
  }
}

/* ---------- para quem (3 colunas) ----------
   Mesmo DNA de .publicos (fio vertical entre colunas via
   .publico + .publico, já definido em styles.css), só com um
   terceiro item — 3 colunas em vez de 2. Os filhos usam class
   "publico" para herdar h3/p do sistema global sem CSS duplicado. */
.opina-publicos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.25rem,5vw,3.5rem);
  padding-top:clamp(2rem,4vw,2.75rem);
  border-top:1px solid var(--regua);
}

/* =========================================================
   RESPONSIVO — mesmos breakpoints estruturais já usados em
   styles.css para os componentes equivalentes (.publicos em
   860px, .metodo-etapa em 767px).
   ========================================================= */
@media (max-width:860px){
  .opina-publicos{ grid-template-columns:1fr; }
  .opina-publicos .publico + .publico{
    border-left:0; padding-left:0;
    padding-top:clamp(2rem,6vw,3rem);
    border-top:1px solid var(--regua);
  }
  .opina-promessas-fios{ grid-template-columns:1fr; gap:clamp(1.25rem,4vw,1.75rem); }

  .opina-dif{ grid-template-columns:1fr; gap:.75rem; }
  .opina-dif-prova{ display:none; }
  .opina-dif-desc{ max-width:none; }
  .opina-dif-ganho{
    max-width:none;
    padding-top:.75rem;
    border-top:1px solid var(--regua-f);
  }

  .opina-sinais{ grid-template-columns:1fr; gap:clamp(2.5rem,6vw,3.5rem); }

  .opina-abordagens{ grid-template-columns:1fr; gap:clamp(2.5rem,6vw,3.25rem); }
  /* Bloco D1: .opina-fluxo-fecho é reaproveitada aqui (claim principal
     do Ask Studio) com um texto quase 2× mais longo que o fechamento
     original do Bloco A que calibrou o tamanho da classe — no piso do
     clamp (1.5rem) isso vira um bloco alto demais em 375px. Reduzido
     só nesta instância (seletor com #ask-studio na frente) — a classe
     compartilhada e seu uso no Bloco A continuam intocados. */
  #ask-studio .opina-fluxo-fecho{ font-size:1.25rem; }
}

@media (max-width:767px){
  .opina-telas{ grid-template-columns:1fr; }
  .opina-tela--principal{ grid-column:auto; }
  .opina-provas-destaque{ grid-template-columns:1fr; }
  .opina-prova-narrativa{ grid-template-columns:1fr; gap:1.5rem; }
  .opina-prova-mini--debate{ max-width:none; }
  /* <figure> tem margin-inline UA de 40px que nunca foi resetado
     (o reset curto do site não cobre figure/figcaption) — cada
     captura perdia 80px de largura sem nenhuma regra pedindo isso.
     Só no mobile: em duas colunas a perda já era menos perceptível
     e mexer lá sairia do escopo desta Task (só mobile). */
  .opina-tela{ margin-inline:0; }

  /* Processo de 6 etapas — vira trilho vertical único. As duas
     fileiras (duas <ol>, ver HTML) continuam duas listas por baixo,
     mas com o mesmo espaçamento de item usado dentro de uma lista
     (gap:0 entre .opina-fluxo-linha) e o mesmo offset de fio/círculo
     nas duas, o traço fica visualmente contínuo de 01 a 06. */
  .opina-fluxo-linha{
    grid-template-columns:1fr;
    gap:0;
    padding-top:0;
  }
  /* fio contínuo entre as duas fileiras (duas <ol>, uma por vez): a
     primeira começa no centro do círculo 01 e desce até tocar a
     fileira seguinte; a última sobe do topo e para no centro do
     círculo 06 — juntas formam um traço sem quebra na emenda 03/04. */
  .opina-fluxo-linha::before{
    top:0; bottom:0; left:.875rem;
    right:auto; width:1px; height:auto;
  }
  .opina-fluxo-linha:first-child::before{ top:.875rem; }
  .opina-fluxo-linha:last-child::before{ bottom:.875rem; }
  .opina-fluxo-linha + .opina-fluxo-linha{ margin-top:0; }
  .opina-fluxo-item{
    padding-left:2.75rem;
    padding-bottom:clamp(1.75rem,7vw,2.25rem);
  }
  .opina-fluxo-item:last-child{ padding-bottom:0; }
  .opina-fluxo-num{ top:0; left:0; }
  .opina-fluxo-txt{ max-width:none; }

  /* Bloco D1: o piso de 13.5rem (calibrado pra presença em desktop)
     ocupava ~65% da largura útil em 375px — grande demais pra um
     acento decorativo. Piso e teto próprios só no mobile; o SVG só
     tem linhas/pontos, então reduzir a largura não corta nada, só
     reescala tudo proporcionalmente (viewBox intocado). */
  .opina-promessas-fio{ width:clamp(9rem,45vw,13.5rem); }

  .opina-sinal-txt{ max-width:none; }
  .opina-sinal-ganho{ max-width:none; }
  .opina-benchmark-svg,
  .opina-benchmark-eixo{ max-width:none; }
  /* Comparação de estrutura do debate (Bloco D1 — ponto crítico do
     brief): mantida em 2 colunas — o texto (contagem, legenda de 2
     linhas, apoio de 3-4 linhas) cabe sem cortar em ~160px de largura
     de coluna (375px), então empilhar perderia o efeito de comparação
     instantânea sem necessidade (opção A/B do brief, não C). O SVG a
     9rem/144px é que ocupava quase a coluna inteira — reduzido só
     aqui pra sobrar respiro pro texto abaixo dele, sem mudar nenhum
     tamanho de fonte. */
  .opina-debate-comp{ gap:1rem; }
  .opina-debate-svg{ max-width:6.5rem; }

  /* Rótulo mono de abertura de seção (.sec-cab) x cabeçalho sticky:
     nas seções de emenda (styles.css, padding-top:.65×--sec-y) o
     rótulo chegava a ~46px do cabeçalho no mobile, bem mais perto
     que as demais (~72px) — folga pequena e inconsistente, não um
     vão quebrado. .82 traz as quatro emendas (Decisões, Como
     funciona, Metodologia, Para quem) para perto do resto, sem
     apagar a assimetria da Regra da Emenda nem tocar desktop (a
     regra base continua intocada em styles.css). */
  .sec--emenda{ padding-top:calc(var(--sec-y) * .82); }

  /* Ritmo vertical — vão com folga clara de sobra no mobile, mesmo
     multiplicador já usado acima para #decisoes/#youtube-studio
     (nunca valor solto). FAQ→CTA final tinha ~160px de vão combinado
     (padding-bottom de uma + padding-top da seguinte) — perceptível
     demais numa tela de 667px. A régua Modelo mental→YouTube Studio
     que existia aqui foi removida junto com a seção: #como-funciona
     agora antecede #youtube-studio, uma adjacência nova que esta
     Task não mede — ver relatório. */
  #faq.sec{ padding-bottom:calc(var(--sec-y) * .82); }
  #contato.sec-fim{ padding-top:calc(var(--sec-y) * .82); }
}