/* ══════════════════════════════════════════════════════════════════════
   Alcance Oftalmologia — folha única.

   Duas coisas que não se re-derivam e explicam metade do arquivo:

   1. O corpo de texto é 19px/1,65 porque o público desta página tem 55 a 80
      anos e visão degradada. Tamanho, contraste e alvo de toque aqui são
      argumento de venda, não acessibilidade de rodapé. Não encolha.

   2. Hover ENTRA em 0s e SAI em 150ms. A transição mora no estado normal
      (que é o estado de saída) e o :hover zera a duração. O que demora a
      aparecer parece lento; o que demora a sair parece suave.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --papel: #F2F1EC;
  --papel-2: #E6E4DC;
  --tinta: #14181A;
  --tinta-media: #4C555A;
  --verde-fundo: #16302A;
  --verde-acao: #12604B;
  --verde-claro: #A8C9BC;
  /* 1,99 sobre papel: só anel de foco, marcador de passo e sublinhado.
     Nunca em texto. */
  --sinal: #E0A21A;

  --serif: 'Literata', Georgia, 'Times New Roman', serif;
  --sans: 'Wix Madefor Text', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* medida de linha: 66ch em Wix Madefor a 19px dá ~63 caracteres de fato,
     dentro do teto de 68 pedido */
  --medida: 66ch;
  --saida: cubic-bezier(.22, .61, .36, 1);
  --borda: max(20px, (100% - 1560px) / 2);
  /* companheiro escuro do anel de foco: o amarelo sozinho faz 1,99 sobre
     papel e não alcançaria 3:1 contra o fundo adjacente */
  --anel-fundo: var(--tinta);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* svh, não vh: no celular a barra do navegador entra na conta de vh */
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* clip, nunca hidden: hidden transforma o body em container de rolagem e
     mata o position:sticky do momento preso */
  overflow-x: clip;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.06;
  font-weight: 550;
  letter-spacing: -0.022em;
}

h2 {
  font-size: clamp(1.75rem, 3.1vw, 2.6rem);
  line-height: 1.12;
}

h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  line-height: 1.24;
}

p { margin: 0 0 1.1rem; max-width: var(--medida); }
p:last-child { margin-bottom: 0; }

a { color: var(--verde-acao); }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

figure { margin: 0; }
figcaption {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: 46ch;
}

address { font-style: normal; }

strong, b { font-weight: 700; }

.oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* números sempre tabulares: coluna de odômetro com dígito de largura
   variável dança na horizontal enquanto sobe */
.cela-num, .numero-valor, .nota-valor, .dist-num, .passo-tempo,
.consulta-valor, .cela-denom { font-variant-numeric: tabular-nums; }

.envelope {
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: max(20px, 4vw);
}

/* ─────────────────────── foco ───────────────────────
   Anel de 3px em --sinal com folga de 3px, e um fio da cor de fundo do
   texto por fora dele: o amarelo faz 1,99 sobre papel e sozinho não
   chegaria a 3:1 contra o que está em volta. O par resolve. */
:focus-visible {
  outline: 3px solid var(--sinal);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--anel-fundo);
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.pular {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 90;
  transform: translateY(-160%);
  background: var(--verde-acao);
  color: #fff;
  padding: 14px 20px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
  transition: transform 150ms var(--saida);
}
.pular:focus-visible { transform: translateY(0); }

/* ═══════════════ 1. cabeçalho ═══════════════ */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: var(--papel);
  box-shadow: inset 0 -1px 0 rgba(20, 24, 26, .1);
  /* recolhe ao descer, volta ao subir: 72px opacos sobre um texto de 19px
     custam caro, e quem lê devagar merece a tela inteira */
  transform: translateY(0);
  transition: transform 260ms var(--saida);
}
.topo.fora { transform: translateY(-100%); }

.topo-linha {
  max-width: 1560px;
  margin-inline: auto;
  padding: 10px max(20px, 4vw);
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding-right: 8px;
  color: var(--tinta);
  text-decoration: none;
  flex: 0 0 auto;
}
.marca-olho { width: 30px; height: 30px; color: var(--verde-acao); flex: 0 0 auto; }
.marca-nome {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.marca-sub {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--tinta-media);
  margin-top: 3px;
}

.menu { margin-left: auto; }
.menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0; padding: 0;
}
.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: var(--tinta-media);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms var(--saida);
}
/* traço que cresce da esquerda: é o realce do item de menu e também o
   sinal da seção em que a rolagem está. Nada muda de tamanho no menu,
   senão ele dança enquanto se rola. */
.menu a::after {
  content: ''; position: absolute;
  left: 12px; right: 12px; bottom: 9px; height: 2px;
  background: var(--verde-acao);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 150ms var(--saida);
}
.menu a:focus-visible::after { transform: scaleX(1); }
.menu a.aqui { color: var(--tinta); }
.menu a.aqui::after { transform: scaleX(1); }

.topo-acao {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.ligar {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  color: var(--tinta);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 150ms var(--saida);
}

/* ─────────────────────── botões ─────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  background: var(--verde-acao);
  color: #fff;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 6px 14px -8px rgba(18, 38, 32, .55);
  /* estado normal = estado de saída: 150ms */
  transition: transform 150ms var(--saida);
}
/* a sombra maior do hover é pintada UMA vez num pseudo e só a opacidade
   dela anima. Animar box-shadow repinta a sombra inteira a cada quadro;
   opacidade de uma camada pronta é trabalho de composição. */
.botao::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 10px 20px -8px rgba(18, 38, 32, .6);
  opacity: 0; pointer-events: none;
  transition: opacity 150ms var(--saida);
}
.botao-grande {
  min-height: 56px;
  padding: 15px 30px;
  font-size: 19px;
}

.botao-fantasma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  color: var(--verde-acao);
  background: transparent;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 3px;
  /* peso da borda por inset, não por border-width: mudar border-width
     reflui a caixa e empurra o vizinho. O anel cheio mora num pseudo,
     pelo mesmo motivo da sombra acima. */
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(18, 96, 75, .45);
  transition: transform 150ms var(--saida);
}
.botao-fantasma::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--verde-acao);
  opacity: 0; pointer-events: none;
  transition: opacity 150ms var(--saida);
}

@media (hover: hover) {
  .botao:hover { transform: translateY(-1px); transition-duration: 0s; }
  .botao:hover::after { opacity: 1; transition-duration: 0s; }
  .botao-fantasma:hover { transform: translateY(-1px); transition-duration: 0s; }
  .botao-fantasma:hover::after { opacity: 1; transition-duration: 0s; }
  .menu a:hover, .ligar:hover { color: var(--verde-acao); transition-duration: 0s; }
  .menu a:hover::after { transform: scaleX(1); transition-duration: 0s; }
  .rodape-link:hover { color: #fff; transition-duration: 0s; }

  /* realce de item: linha da distribuição de notas, item de fonte e
     célula de número. Deslocamento pequeno, entrada em 0s. */
  .dist li:hover { transform: translateX(3px); transition-duration: 0s; }
  .dist li:hover .dist-fita { background: var(--verde-acao); transition-duration: 0s; }
  .fontes li:hover { transform: translateX(3px); transition-duration: 0s; }
  .fontes li:hover::before { background: var(--verde-acao); color: #fff; transition-duration: 0s; }
  /* .cela, .depo e .preco-bloco NÃO moram aqui: os três recebem
     `.js .dentro { transform: translateY(0) }` na entrada por rolagem,
     que tem a MESMA especificidade e vem depois na folha. Regra de
     hover declarada aqui em cima é sobrescrita e o cartão não sobe —
     medido, não deduzido. Elas ficam junto do `.caso:hover`, depois do
     `.dentro`, que é onde a peça já resolvia isso. */

  /* a foto do caso acompanha o cartão, dentro da máscara */
  .caso:hover .caso-foto img { transform: scale(1.02); transition-duration: 0s; }
}

.botao:active { transform: scale(.985); transition-duration: 90ms; }
.botao-fantasma:active { transform: scale(.985); transition-duration: 90ms; }

/* ═══════════════ 2. herói ═══════════════ */
.heroi { padding-top: 96px; }

.heroi-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.heroi-texto {
  min-width: 0;
  padding: clamp(28px, 4vw, 56px) max(20px, 4vw) clamp(32px, 4vw, 60px);
  max-width: 760px;
  margin-inline: auto;
}
.heroi-texto h1 { max-width: 20ch; }

/* sublinhado em --sinal: decoração sob texto escuro, nunca a cor do texto */
.marca-texto {
  background: linear-gradient(var(--sinal), var(--sinal)) bottom left / 100% 3px no-repeat;
  padding-bottom: 2px;
}

.apoio {
  margin-top: 22px;
  font-size: 21px;
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: 46ch;
}

.heroi-numero {
  margin: 30px 0 8px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--serif);
}
.numero-valor {
  font-size: clamp(3rem, 5vw, 4.1rem);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.numero-unid { font-size: 1.5rem; font-weight: 500; }
.numero-denom {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta-media);
}
.heroi-rotulo {
  color: var(--tinta-media);
  font-size: 17px;
  line-height: 1.55;
  max-width: 48ch;
}

.heroi-botoes {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  /* 48px de alvo com 8px de folga: aqui a folga é 12 */
  gap: 12px;
}
.heroi-tel { margin-top: 16px; font-size: 17px; color: var(--tinta-media); }
/* padding vertical num link em linha aumenta a área de toque sem mexer na
   altura da linha: 21px de caixa não alcançam o piso de 24 do AA */
.heroi-tel a, .fechamento-tel a, .rodape-fim a {
  font-weight: 600;
  padding-block: 5px;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.assinatura {
  margin-top: 30px;
  padding-top: 18px;
  box-shadow: inset 0 1px 0 rgba(20, 24, 26, .14);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.assinatura-nome { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.assinatura-reg { font-size: 15.5px; color: var(--tinta-media); font-variant-numeric: tabular-nums; }

.heroi-foto {
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.heroi-foto img { width: 100%; height: 100%; object-fit: cover; }

/* de 720 a 899 o herói continua empilhado, e a foto passa a 3:2 em toda a
   largura. A duas colunas só entra em 900: a 768 a coluna de texto ficava com
   340px, a manchete quebrava no meio da frase sublinhada e a foto ficava
   pequena no meio de um vão de papel. */
@media (min-width: 720px) {
  .heroi-foto { aspect-ratio: 3 / 2; }
}
@media (min-width: 900px) {
  .heroi-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: center;
    padding-left: var(--borda);
    gap: clamp(28px, 3.4vw, 60px);
  }
  .heroi-texto { padding: clamp(40px, 5vw, 80px) 0; margin-inline: 0; max-width: none; }
}

/* ═══════════════ 3. faixa de números ═══════════════ */
.numeros {
  background: var(--verde-fundo);
  color: var(--papel);
  --anel-fundo: var(--papel);
  padding: clamp(38px, 4.6vw, 64px) 0;
}
.numeros-lista {
  list-style: none;
  margin: 0 auto;
  padding-inline: max(20px, 4vw);
  max-width: 1560px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 48px);
}
@media (min-width: 860px) {
  .numeros-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cela { min-width: 0; }
.cela-num {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.cela-denom {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--verde-claro);
  letter-spacing: .01em;
}
.cela-rotulo {
  margin: 0;
  color: var(--verde-claro);
  font-size: 16.5px;
  line-height: 1.45;
  max-width: 24ch;
}

/* odômetro: coluna de 0..9 rolando por translateY, uma vez.

   Em repouso o número é TEXTO, escrito no HTML — é o que se lê sem
   JavaScript e é para ele que o andaime volta quando a última coluna
   termina. O andaime permanente deixava "0 1 2 3 4 5 6 7 8 9" pendurado
   no Cmd+F e na seleção, ao lado de uma cópia escondida do número, e a
   altura em pixel das colunas sobreviveria a uma troca de tamanho de
   fonte por media query.

   Tabular porque a coluna e o texto que ela substitui têm de medir
   igual: com largura proporcional a grade sacode ao montar e desmontar. */
.odometro { font-variant-numeric: tabular-nums; }
.odometro.rodando { display: inline-flex; align-items: baseline; }
.digito {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}
.fita {
  display: block;
  transform: translateY(0);
  transition: transform 1150ms var(--saida);
}
.fita span { display: block; height: 1em; line-height: 1; }
.fixo { display: inline-block; }

/* ═══════════════ seções em geral ═══════════════ */
.casos, .passos, .cirurgiao, .prova, .naoopera, .preco, .duvidas, .unidade,
.fechamento, .fontes-secao, .escolhas {
  padding-block: clamp(56px, 7vw, 108px);
}
/* A faixa de sintomas é curta de propósito: ~300px de altura entre a
   faixa escura dos números e a seção de casos, que é densa. Nenhuma
   seção de mais de 400 palavras pode encostar em outra igual, e a
   forma mais barata de quebrar isso é uma seção que cabe numa
   respiração. */
.sintomas { padding-block: clamp(38px, 4.4vw, 62px); background: var(--papel-2); }
/* o fundo troca na BORDA da seção, nunca interpolado pela rolagem */
.passos, .prova, .preco, .unidade, .fontes-secao { background: var(--papel-2); }

.secao-apoio {
  margin-top: 16px;
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: 60ch;
}

/* entrada por rolagem: só translateY, nunca opacidade. O bloco já está
   visível; a rolagem só o assenta. */
.js .caso, .js .passo, .js .depo, .js .preco-bloco, .js .duvida,
.js .cela, .js .unidade-foto, .js .unidade-mapa {
  transform: translateY(12px);
  transition: transform 620ms var(--saida);
}
.js .dentro { transform: translateY(0); }

/* ═══════════════ 4. casos ═══════════════ */
.casos-grade {
  margin-top: clamp(32px, 3.6vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 2.6vw, 34px);
}
@media (min-width: 640px) { .casos-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .casos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* separado por fundo e por espaço, sem contorno de 1px */
.caso {
  min-width: 0;
  background: var(--papel-2);
  padding: 0 clamp(20px, 1.8vw, 28px) clamp(22px, 2vw, 28px);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
}
.caso-foto {
  margin: 0 calc(-1 * clamp(20px, 1.8vw, 28px)) clamp(20px, 1.8vw, 26px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px 3px 0 0;
}
.caso-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform 240ms var(--saida);
}
.caso h3 { margin-bottom: 12px; }
.caso-sintoma {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19.5px;
  line-height: 1.45;
  color: var(--tinta);
  margin-bottom: 16px;
}
.caso-dados { margin: 0 0 6px; }
.caso-dados dt {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.caso-dados dd {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--tinta-media);
}
.caso-mais { margin-top: auto; padding-top: 14px; }

details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }

.caso-mais summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  color: var(--verde-acao);
  font-weight: 600;
  font-size: 17.5px;
}
.seta {
  display: inline-block;
  transform: translateX(0);
  transition: transform 150ms var(--saida) 40ms;
}
.caso-corpo { padding-top: 4px; }
.caso-corpo p { font-size: 17.5px; line-height: 1.6; color: var(--tinta-media); }

@media (hover: hover) {
  /* o segundo movimento é o que dá vida: card sobe, seta anda, 40ms atrás */
  .caso:hover { transform: translateY(-3px); transition-duration: 0s; }
  .caso:hover .seta { transform: translateX(3px); transition-duration: 0s; }
}
.js .caso { transition: transform 620ms var(--saida); }
@media (hover: hover) { .js .caso:hover { transition-duration: 0s; } }

/* Os outros cartões, no mesmo lugar e pelo mesmo motivo de cascata.
   O segundo movimento guarda a duração: `transition-duration: 0s` faz o
   Chromium descartar o `transition-delay` junto, os 40ms viram 4ms, os
   dois movimentos saem no mesmo quadro e o efeito não existe. */
.depo-quem, .preco-bloco h3 {
  transform: translateX(0);
  transition: transform 150ms var(--saida) 40ms;
}
.cela { transform: translateY(0); transition: transform 150ms var(--saida); }
@media (hover: hover) {
  .depo:hover { transform: translateY(-3px); transition-duration: 0s; }
  .depo:hover .depo-quem { transform: translateX(3px); }
  .preco-bloco:hover { transform: translateY(-3px); transition-duration: 0s; }
  .preco-bloco:hover h3 { transform: translateX(3px); }
  .cela:hover { transform: translateY(-2px); transition-duration: 0s; }
  .js .depo:hover, .js .preco-bloco:hover, .js .cela:hover { transition-duration: 0s; }
}

/* ═══════════════ 5. passos ═══════════════ */
.passos-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 4vw, 60px);
  align-items: start;
}
@media (min-width: 980px) {
  .passos-grade { grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); }
}
.passos-col { min-width: 0; }

.passos-lista {
  list-style: none;
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding: 0;
}
.passo {
  position: relative;
  min-width: 0;
  padding: 0 0 clamp(26px, 2.6vw, 36px) 34px;
}
.passo:last-child { padding-bottom: 0; }

/* linha vertical: cresce por scaleY com origem no topo */
.passo::before {
  content: '';
  position: absolute;
  left: 5px; top: 16px; bottom: 0;
  width: 2px;
  background: rgba(20, 24, 26, .18);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--saida);
}
.js .passo.dentro::before { transform: scaleY(1); }
.passo:last-child::before { display: none; }

/* marcador: 8px, cresce para 12px e ganha --sinal no passo visível */
.passo::after {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--tinta-media);
  transform: scale(.666);
  transition: transform 220ms var(--saida), background-color 220ms var(--saida);
}
.passo.aqui::after { transform: scale(1); background: var(--sinal); }

.passo-tempo {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-acao);
}
.passo h3 { margin-bottom: 8px; }
.passo p { font-size: 18px; line-height: 1.6; color: var(--tinta-media); max-width: 58ch; }

.passos-foto { min-width: 0; }
.passos-foto picture { overflow: hidden; border-radius: 3px; }
.passos-foto img { width: 100%; }

/* ═══════════════ 6. cirurgião ═══════════════ */
.cirurgiao-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 3.6vw, 56px);
  align-items: start;
}
@media (min-width: 860px) {
  .cirurgiao-grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.cirurgiao-foto { min-width: 0; }
/* máscara com overflow: a foto cresce 1,02 dentro dela */
.cirurgiao-foto picture {
  overflow: hidden;
  border-radius: 3px;
  display: block;
}
.cirurgiao-foto img {
  width: 100%;
  transform: scale(1);
  transition: transform 240ms var(--saida);
}
@media (hover: hover) {
  .cirurgiao-foto:hover img { transform: scale(1.02); transition-duration: 0s; }
}

.cirurgiao-texto { min-width: 0; }
.cirurgiao-nome {
  margin: 18px 0 2px;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
}
.cirurgiao-reg {
  margin-bottom: 24px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

.ficha { margin: 0; }
.ficha dt {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-top: 20px;
}
.ficha dt:first-child { margin-top: 0; }
.ficha dd {
  margin: 5px 0 0;
  font-size: 18px;
  line-height: 1.6;
  max-width: var(--medida);
}
.cirurgiao-nota {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--papel-2);
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.5;
  max-width: 52ch;
}

/* ═══════════════ 7. momento preso ═══════════════ */
.nitidez {
  background: var(--verde-fundo);
  color: var(--papel);
  --anel-fundo: var(--papel);
}
.nitidez-trilho { height: 200svh; }
.nitidez-preso {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2vh, 26px);
  padding: 84px max(20px, 4vw) 28px;
  max-width: 1560px;
  margin-inline: auto;
}
.nitidez-cabeca { max-width: 62ch; }
.nitidez-sub {
  margin: 10px 0 0;
  color: var(--verde-claro);
  font-size: 17px;
}

.nitidez-palco {
  position: relative;
  width: min(100%, 980px);
  aspect-ratio: 3 / 2;
  max-height: 46svh;
  overflow: hidden;
  border-radius: 3px;
  background: #0E211D;
}
.nitidez-img { position: absolute; inset: 0; }
.nitidez-img img { width: 100%; height: 100%; object-fit: cover; }
/* a cópia de cima já veio desfocada do arquivo; a rolagem move só isto */
.nitidez-turva { opacity: 1; }

.nitidez-legendas {
  position: relative;
  min-height: 3.6em;
  max-width: 56ch;
}
.legenda {
  position: absolute;
  inset: 0 auto auto 0;
  margin: 0;
  color: var(--verde-claro);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(10px);
  /* as três legendas ocupam o MESMO canto e só uma acende. As apagadas
     continuam captando o apontador: medido, a pilha no ponto da legenda
     acesa era legenda[op=0] > legenda[op=0] > legenda[op=1], com as duas
     de cima invisíveis e não inertes. Elemento invisível que não é inerte
     é a família das cicatrizes 4 e 5 — aqui não há link dentro para
     morrer, mas a seleção de texto pegava a legenda errada. */
  pointer-events: none;
  transition: opacity 320ms var(--saida), transform 320ms var(--saida);
}
.legenda.acesa { opacity: 1; transform: translateY(0); pointer-events: auto; }

.nitidez-aviso {
  margin: 0;
  font-size: 15px;
  color: var(--verde-claro);
  max-width: 60ch;
}

@media (min-width: 1080px) {
  /* duas colunas: o palco ocupa a direita inteira, e o vão verde que sobrava
     à direita do palco de 980px deixa de existir */
  .nitidez-preso {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(32px, 4vw, 76px);
    row-gap: clamp(14px, 2vh, 26px);
    align-content: center;
  }
  .nitidez-cabeca { grid-area: 1 / 1; }
  .nitidez-legendas { grid-area: 2 / 1; align-self: center; }
  .nitidez-aviso { grid-area: 3 / 1; }
  .nitidez-palco {
    grid-area: 1 / 2 / span 3 / 2;
    align-self: center;
    width: 100%;
    max-height: 72svh;
  }
}
@media (max-width: 719px) {
  /* no celular a mesma foto entra em pé: 3:2 deixava a imagem pequena no meio
     de uma banda verde alta */
  .nitidez-palco { aspect-ratio: 4 / 5; max-height: 54svh; }
}

/* ═══════════════ 8. prova social ═══════════════ */
.prova-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 3.6vw, 56px);
  align-items: start;
}
@media (min-width: 860px) {
  .prova-grade { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.prova-nota { min-width: 0; }
.nota-grande {
  margin: 20px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
}
.nota-valor {
  font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: .88;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.nota-denom { font-size: 1.5rem; color: var(--tinta-media); }
.nota-conta { color: var(--tinta-media); font-size: 17.5px; margin-bottom: 22px; }

.prova-dist { min-width: 0; }
.prova-dist h3 { margin-bottom: 16px; }
.dist { list-style: none; margin: 0 0 20px; padding: 0; }
.dist li {
  transform: translateX(0);
  transition: transform 150ms var(--saida);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 16.5px;
  color: var(--tinta-media);
}
.dist-rot { min-width: 0; }
.dist-barra {
  height: 12px;
  background: rgba(20, 24, 26, .1);
  border-radius: 2px;
  overflow: hidden;
  min-width: 0;
}
.dist-fita { display: block; height: 100%; background: var(--verde-acao); transition: background-color 300ms var(--saida); }
.dist-num { text-align: right; font-weight: 600; color: var(--tinta); }
.prova-nota-legal { font-size: 16.5px; line-height: 1.55; color: var(--tinta-media); }

/* ═══════════════ depoimentos ═══════════════
   Liberados pela Res. CFM 2.336/2023 com trava de tom. No celular a trilha
   rola na horizontal com scroll-snap, sem biblioteca. */
.depoimentos { margin-top: clamp(40px, 4.4vw, 68px); }
.depoimentos-titulo { margin-bottom: clamp(18px, 2vw, 26px); }

.depo-trilha {
  list-style: none;
  margin: 0 0 22px;
  padding: 0 0 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80%, 420px);
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.depo {
  min-width: 0;
  scroll-snap-align: start;
  background: var(--papel);
  border-radius: 3px;
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.depo blockquote { margin: 0; }
.depo blockquote p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  margin: 0;
}
.depo-quem {
  margin: auto 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta-media);
}
.depo-nota { font-size: 16px; line-height: 1.55; color: var(--tinta-media); }

/* três colunas só a partir de 980: a 768 cada depoimento ficava com 232px e
   doze caracteres por linha */
@media (min-width: 980px) {
  .depo-trilha {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

/* ═══════════════ 9. quando a gente não opera ═══════════════ */
.naoopera-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 54px);
  align-items: start;
}
@media (min-width: 980px) {
  .naoopera-grade { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
.naoopera-cabeca, .naoopera-col { min-width: 0; }
.naoopera-nota {
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--papel-2);
  border-radius: 3px;
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.5;
}
.lista-larga li { padding-bottom: 16px; }
.lista-larga b { color: var(--tinta); }
.naoopera-avisos {
  margin-top: clamp(26px, 2.6vw, 36px);
  padding: clamp(20px, 2vw, 28px);
  background: var(--papel-2);
  border-radius: 3px;
}
.naoopera-avisos h3 { margin-bottom: 14px; }
.naoopera-avisos .lista li:last-child { padding-bottom: 0; }

/* ═══════════════ 10. preço ═══════════════ */
.preco-grade {
  margin-top: clamp(30px, 3.4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 44px);
}
@media (min-width: 860px) {
  .preco-grade { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .preco-lados { grid-column: 1 / -1; }
}
.preco-consulta {
  min-width: 0;
  align-self: start;
  background: var(--papel);
  border-radius: 3px;
  padding: clamp(22px, 2.2vw, 32px);
}
.consulta-rotulo {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.consulta-valor {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.consulta-texto { font-size: 17.5px; line-height: 1.6; color: var(--tinta-media); }
.consulta-lista { margin-top: 18px; }
.consulta-lista li:last-child { padding-bottom: 0; }

.preco-explica { min-width: 0; }
.preco-explica h3 { margin-bottom: 14px; }
.preco-explica p { font-size: 18px; line-height: 1.62; color: var(--tinta-media); }
.preco-explica .lista { margin-top: 4px; }

.preco-lados {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 44px);
}
@media (min-width: 860px) { .preco-lados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.preco-bloco { min-width: 0; }
.preco-bloco h3 { margin-bottom: 14px; }
.preco-bloco p { font-size: 17.5px; line-height: 1.6; color: var(--tinta-media); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  position: relative;
  padding: 0 0 12px 20px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: var(--medida);
}
.lista li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 2px;
  background: var(--verde-acao);
}

/* ═══════════════ 11. dúvidas ═══════════════ */
.duvidas-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 52px);
  align-items: start;
}
@media (min-width: 980px) {
  .duvidas-grade { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .duvidas-cabeca { position: sticky; top: 118px; }
}
.duvidas-cabeca { min-width: 0; }
.duvidas-ajuda {
  margin-top: clamp(24px, 2.6vw, 36px);
  padding: clamp(20px, 2vw, 28px);
  background: var(--papel-2);
  border-radius: 3px;
}
.duvidas-ajuda h3 { margin-bottom: 10px; }
.duvidas-ajuda p { font-size: 17.5px; line-height: 1.55; color: var(--tinta-media); }
.duvidas-ajuda .botao-fantasma { margin-top: 18px; }
.duvidas-col { min-width: 0; }

.duvida { background: var(--papel-2); border-radius: 3px; margin-bottom: 10px; }
.duvida summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 12px clamp(16px, 1.6vw, 22px);
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1.4vw, 1.24rem);
  font-weight: 550;
  line-height: 1.3;
}
.cruz {
  position: relative;
  flex: 0 0 auto;
  width: 18px; height: 18px;
}
.cruz::before, .cruz::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: var(--verde-acao);
  transform: translateY(-1px);
}
.cruz::after {
  inset: 0 auto auto 50%;
  width: 2px; height: 100%;
  transform: translateX(-1px) scaleY(1);
  transform-origin: center;
  transition: transform 200ms var(--saida);
}
.duvida[open] .cruz::after { transform: translateX(-1px) scaleY(0); }

.duvida-corpo { padding: 0 clamp(16px, 1.6vw, 22px) 20px; }
.duvida-corpo p { font-size: 18px; line-height: 1.62; color: var(--tinta-media); }

/* ═══════════════ 12. unidade ═══════════════ */
.unidade-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}
@media (min-width: 860px) {
  .unidade-grade { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
}
@media (min-width: 1180px) {
  .unidade-grade { grid-template-columns: minmax(0, .68fr) minmax(0, 1fr) minmax(0, 1.1fr); }
}
.unidade-foto, .unidade-texto, .unidade-lado { min-width: 0; }
/* o mapa sozinho deixava 600px de vão na terceira coluna: embaixo dele entra
   como chegar, que é o que a pessoa procura depois de ver o mapa */
.chegar { margin: clamp(24px, 2.6vw, 34px) 0 0; }
.chegar dt {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-media);
  margin-top: 18px;
}
.chegar dt:first-child { margin-top: 0; }
.chegar dd { margin: 5px 0 0; font-size: 17.5px; line-height: 1.55; }
.unidade-foto picture { overflow: hidden; border-radius: 3px; }
.unidade-foto img { width: 100%; }

.endereco {
  margin: 18px 0 24px;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
}
.unidade-texto .botao-fantasma { margin-top: 26px; }

.unidade-mapa svg { width: 100%; height: auto; border-radius: 3px; }
.mapa-rot { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.mapa-rot-forte { font-family: var(--sans); font-size: 15.5px; font-weight: 700; }
.mapa-metro text { font-family: var(--sans); font-size: 15px; font-weight: 700; }

/* ═══════════════ 13. fechamento ═══════════════ */
.fechamento-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: start;
}
@media (min-width: 860px) {
  .fechamento-grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}
.fechamento-texto { min-width: 0; }
.fechamento-tel { margin-top: 20px; font-size: 18px; color: var(--tinta-media); }

.forma {
  min-width: 0;
  background: var(--papel-2);
  border-radius: 3px;
  padding: clamp(22px, 2.4vw, 34px);
}
.campo { position: relative; }
.campo-entrada {
  width: 100%;
  min-height: 62px;
  padding: 26px 16px 10px;
  font-family: var(--sans);
  font-size: 19px;
  color: var(--tinta);
  background: var(--papel);
  border: 0;
  border-radius: 3px;
  box-shadow: inset 0 -2px 0 rgba(76, 85, 90, .5);
}
/* rótulo flutuante por translateY + scale, origem à esquerda */
.campo-rotulo {
  position: absolute;
  left: 16px; top: 19px;
  color: var(--tinta-media);
  font-size: 19px;
  pointer-events: none;
  transform-origin: left center;
  transform: translateY(0) scale(1);
  transition: transform 190ms var(--saida);
}
.campo-entrada:focus + .campo-rotulo,
.campo-entrada:not(:placeholder-shown) + .campo-rotulo {
  transform: translateY(-14px) scale(.82);
}
.campo-entrada:focus-visible { box-shadow: inset 0 -2px 0 var(--verde-acao), 0 0 0 7px var(--anel-fundo); }

.campo-erro {
  margin: 10px 0 0;
  min-height: 1.4em;
  font-size: 16.5px;
  font-weight: 600;
  color: #8A2B22;
  transform: translateX(4px);
  opacity: 0;
  transition: transform 200ms var(--saida), opacity 200ms var(--saida);
}
.campo-erro.acesa { transform: translateX(0); opacity: 1; }

.caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 14px 0 22px;
  cursor: pointer;
  font-size: 17.5px;
  color: var(--tinta-media);
}
.caixa-entrada { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.caixa-marca {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 3px;
  background: var(--papel);
  box-shadow: inset 0 0 0 2px rgba(76, 85, 90, .55);
  position: relative;
}
.caixa-marca::after {
  content: '';
  position: absolute;
  left: 7px; top: 5px;
  width: 10px; height: 15px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(38deg) scale(.4);
  opacity: 0;
  transition: transform 180ms var(--saida), opacity 180ms var(--saida);
}
.caixa-entrada:checked + .caixa-marca {
  background: var(--verde-acao);
  box-shadow: inset 0 0 0 2px var(--verde-acao);
}
.caixa-entrada:checked + .caixa-marca::after { transform: rotate(38deg) scale(1); opacity: 1; }
.caixa-entrada:focus-visible + .caixa-marca {
  outline: 3px solid var(--sinal);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--anel-fundo);
}
.caixa-texto { min-width: 0; }

.forma .botao { width: 100%; }
.forma-nota { margin: 16px 0 0; font-size: 16px; color: var(--tinta-media); }

/* ═══════════════ 15. rodapé ═══════════════ */
.rodape {
  background: var(--verde-fundo);
  color: var(--papel);
  --anel-fundo: var(--papel);
  padding: clamp(48px, 5vw, 80px) 0 40px;
}
.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 3.4vw, 54px);
}
@media (min-width: 760px) {
  .rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .rodape-grade { grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr); }
}
.rodape-bloco { min-width: 0; }
.rodape-marca {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 4px;
}
.rodape-bloco .endereco { margin: 0 0 12px; font-size: 17.5px; color: var(--verde-claro); }
.rodape-titulo {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde-claro);
  margin-bottom: 12px;
}
.rodape-rt { font-size: 18px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.rodape-cnpj { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: var(--verde-claro); }
.rodape-aviso { font-size: 17px; line-height: 1.6; color: var(--verde-claro); }

.rodape-links { list-style: none; margin: 18px 0 0; padding: 0; }
.rodape-links li { margin-bottom: 2px; }
/* etiqueta ao lado do endereço, no mesmo tom da nota de fonte: quem
   lê o endereço tem de saber ali que ele é de exemplo, e não só no
   fim da página */
.endereco-nota {
  margin: 10px 0 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: 46ch;
}

.rodape-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--verde-claro);
  font-size: 17px;
  font-weight: 500;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 150ms var(--saida);
}
.rodape-fim {
  max-width: 1560px;
  margin: clamp(34px, 4vw, 56px) auto 0;
  padding: 22px max(20px, 4vw) 0;
  box-shadow: inset 0 1px 0 rgba(242, 241, 236, .16);
  font-size: 15.5px;
  color: var(--verde-claro);
}

/* ═══════════════ 14. fontes ═══════════════ */
.fontes { list-style: none; counter-reset: fonte; margin: clamp(28px, 3vw, 42px) 0 0; padding: 0; }
.fontes li {
  transform: translateX(0);
  transition: transform 150ms var(--saida);
  counter-increment: fonte;
  position: relative;
  padding: 0 0 clamp(22px, 2.2vw, 30px) 46px;
  max-width: 84ch;
}
.fontes li::before {
  transition: background-color 300ms var(--saida), color 300ms var(--saida);
  content: counter(fonte);
  position: absolute;
  left: 0; top: 2px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papel);
  border-radius: 50%;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--verde-acao);
}
.fonte-fato { margin: 0 0 6px; font-size: 18px; line-height: 1.6; max-width: none; }
.fonte-de { margin: 0; font-size: 16px; line-height: 1.55; color: var(--tinta-media); max-width: none; }
@media (min-width: 980px) {
  /* uma coluna de 84ch deixava metade da tela vazia à direita */
  .fontes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 3.4vw, 68px); }
  .fontes li { max-width: none; }
}

/* ═══════════════ barra fixa do celular ═══════════════ */
.barra-fixa {
  position: fixed;
  inset: auto 0 0;
  z-index: 55;
  display: none;
  gap: 10px;
  padding: 10px max(14px, 3vw) calc(10px + env(safe-area-inset-bottom));
  background: var(--papel);
  box-shadow: 0 -8px 24px -14px rgba(20, 24, 26, .5), inset 0 1px 0 rgba(20, 24, 26, .12);
  transform: translateY(100%);
  /* pointer-events no contêiner, não só no filho */
  pointer-events: none;
  transition: transform 260ms var(--saida);
}
.barra-fixa.visivel { transform: translateY(0); pointer-events: auto; }
.barra-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  flex: 0 0 auto;
  color: var(--tinta);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  background: var(--papel-2);
  border-radius: 3px;
}
.barra-botao { flex: 1 1 auto; }

@media (max-width: 899px) {
  .menu { display: none; }
  .topo-acao { margin-left: auto; }
  .barra-fixa { display: flex; }
  /* a barra não pode cobrir o fim da página */
  .rodape { padding-bottom: 108px; }
}
@media (max-width: 599px) {
  .topo-acao .ligar { display: none; }
  .marca-sub { display: none; }
  .topo-linha { min-height: 64px; gap: 12px; }
  .heroi { padding-top: 74px; }
  html { scroll-padding-top: 76px; }
}
@media (max-width: 420px) {
  .botao { padding: 12px 16px; font-size: 16.5px; }
  /* Em 320px o botão do topo media 178px e era CORTADO pelo
     `overflow-x: clip` do body: continuava no DOM, invisível e fora de
     alcance. Botão principal que existe e não se clica é a cicatriz 4 em
     outra forma. Aqui ele encolhe o rótulo em vez de sumir — a barra fixa
     do rodapé só entra depois do primeiro terço da página, então tirar o
     CTA do topo deixaria a primeira tela sem nenhum. */
  .so-largo { display: none; }
  .dist li { grid-template-columns: 78px minmax(0, 1fr) 40px; gap: 8px; font-size: 15.5px; }
}

/* ═══════════════ movimento reduzido ═══════════════
   Duração .01ms, nunca `none`: JS que espera transitionend travaria para
   sempre. Mesma árvore de DOM, desarmada aqui. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .js .caso, .js .passo, .js .depo, .js .preco-bloco, .js .duvida,
  .js .cela, .js .unidade-foto, .js .unidade-mapa { transform: none; }
  .js .passo::before { transform: scaleY(1); }
  /* o momento preso vira as duas imagens empilhadas, com a nítida por cima */
  .nitidez-trilho { height: auto; }
  .nitidez-preso { position: static; height: auto; min-height: 0; padding-block: clamp(48px, 6vw, 88px); }
  .nitidez-turva { opacity: 0; }
  .nitidez-legendas { min-height: 0; }
  .legenda { position: static; opacity: 1; transform: none; margin-bottom: 10px; }
  .legenda:last-child { margin-bottom: 0; }
  .campo-erro { transform: none; }
  .barra-fixa, .topo { transition-duration: .01ms !important; }
}


/* ═══════════════ sumário do herói ═══════════════
   Quinze seções e um menu de quatro itens: quem chega não sabe o que a
   página responde, e rolar deixa de ser escolha. As sete perguntas são
   as que a recepção ouve, escritas como a pessoa fala — "Quanto custa?",
   não "Investimento". */
.sumario {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 20px;
  box-shadow: inset 0 1px 0 rgba(20, 24, 26, .14);
}
.sumario-rotulo {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.sumario-lista {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 2px 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.sumario-lista li { min-width: 0; counter-increment: sumario; }
.sumario-lista a {
  position: relative;
  display: flex; align-items: center;
  min-height: 44px;
  padding: 4px 0;
  color: var(--tinta);
  font-size: 17px;
  text-decoration: none;
}
/* o sublinhado cresce da esquerda: é link de texto, não item de menu,
   e o efeito é ele crescendo — entrada instantânea mataria o efeito */
.sumario-lista a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 8px;
  height: 1.5px;
  background: var(--verde-acao);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 180ms var(--saida);
}
.sumario-lista a:focus-visible::after { transform: scaleX(1); }

/* ═══════════════ faixa de sintomas ═══════════════
   As três falas eram o melhor texto da página e viviam em corpo de
   17,5px dentro de um cartão. Aqui elas são o assunto: uma pessoa
   reconhece a própria queixa antes de ler qualquer explicação. */
.sintomas-titulo {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: clamp(23px, 1rem + 1.2vw, 28px);
}
.sintomas-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.sintomas-lista li { min-width: 0; }
.sintoma-fala {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, .9rem + .7vw, 23px);
  line-height: 1.4;
  color: var(--tinta);
  text-wrap: pretty;
}
.sintoma-caso { margin: 10px 0 0; }
.sintoma-caso a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde-acao);
  text-decoration: none;
}
.sintoma-caso a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 11px;
  height: 1.5px; background: var(--verde-acao);
  transform: scaleX(1); transform-origin: 0 50%;
  opacity: .38;
  transition: opacity 150ms var(--saida);
}
.sintoma-caso a:focus-visible::after { opacity: 1; }

/* ═══════════════ os desenhos do olho ═══════════════
   Substituíram uma macro de íris azul, que é o clichê número um do
   setor. Traço com ponta redonda e espessura variando entre as
   camadas: linha de contorno, linha do que importa, linha-guia. Vetor
   de espessura única lê como ícone de banco; o que faz o desenho
   parecer desenhado é a hierarquia de traço.

   `height: auto` com `max-width: 100%` porque o SVG tem largura em
   atributo, e sem isso ele estoura a coluna em tela estreita. */
.caso-desenho {
  /* SEM fundo próprio e SEM borda: o cartão já é uma superfície, e um
     painel mais claro dentro dele desenhava duas barras verticais do
     fundo do cartão dos lados do desenho — cartão dentro de cartão, que
     está na lista do que não se faz. O desenho mora na superfície do
     cartão, e o traço preto tem contraste de sobra sobre ela. */
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  padding: clamp(18px, 2vw, 26px) 0 clamp(4px, 0.6vw, 8px);
}
.desenho {
  display: block;
  width: 100%; max-width: 100%; height: auto;
}
.des-traco path {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* a frente do olho é o que a pessoa reconhece: ela puxa o traço mais
   grosso, e é por ela que o olho lê como olho */
.des-traco .des-forte { stroke-width: 3.4; }
.des-traco .des-lente { stroke-width: 2.6; }
.des-traco .des-retina { stroke-width: 3.4; }
.des-traco .des-eixo { stroke-dasharray: 2 6; stroke-width: 1.4; }
.des-traco .des-raio { stroke-width: 1.6; }
.des-guia path {
  fill: none;
  stroke: var(--tinta-media);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
}
.des-rot text {
  font-family: var(--sans);
  font-size: 17px;
  fill: var(--tinta-media);
}

/* ═══════════════ tabelas ═══════════════
   A página descrevia escolhas o tempo todo e não tinha nenhuma tabela:
   o tipo de lente vivia num <li> de 160 caracteres na seção de preço, e
   a diferença entre LASIK e PRK num <dd>. Três parágrafos viram uma
   grade que se lê em oito segundos.

   Em tela estreita quem rola é o contêiner, NUNCA o body — daí o
   `min-width` na tabela e o `overflow-x` no envoltório. O contêiner tem
   `tabindex="0"` no HTML para quem rola por teclado, e por isso precisa
   de anel de foco visível. */
.escolhas .envelope > h2 { margin-bottom: 10px; }
.tabela-bloco { margin-top: clamp(32px, 3.4vw, 48px); }
.tabela-bloco h3 {
  margin: 0 0 14px;
  font-size: clamp(19px, .9rem + .5vw, 23px);
}
.tabela-rolo {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: 3px;
}
.tabela-rolo:focus-visible {
  outline: 3px solid var(--sinal);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--anel-fundo);
}
.tabela {
  min-width: 520px;
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
}
.tabela th, .tabela td {
  padding: 14px 16px;
  vertical-align: top;
  box-shadow: inset 0 1px 0 rgba(20, 24, 26, .12);
}
.tabela thead th {
  box-shadow: none;
  padding-top: 0;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-media);
}
.tabela tbody th[scope="row"] {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}
.tabela td { color: var(--tinta); }
.tabela-nota {
  margin: 14px 0 0;
  max-width: 66ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta-media);
}
/* A WCAG isenta link dentro de parágrafo do piso de 44px, mas mantém um
   piso de 24px, e a caixa de um <a> em linha é a do texto — 18px aqui,
   não a altura da linha. O respiro vertical resolve sem refluir nada:
   padding em linha não empurra a linha de cima nem a de baixo. */
.tabela-nota a { padding-block: 4px; }

/* ═══════════════ imagem sangrada ═══════════════
   Um bloco de imagem que corta as duas bordas da janela, entre duas
   seções de leitura. As oito figuras da página moravam todas dentro do
   envelope, e a rolagem virava um túnel de coluna única. */
.sangrada { margin: 0; }
.sangrada img {
  display: block;
  width: 100%; max-width: 100%;
  /* faixa mais alta e ancorada EMBAIXO: o refrator reconhecível — os
     discos de lente e as oculares — mora no terço de baixo do arquivo, e
     o meio da foto é parede branca. Um corte centrado entregava um
     cilindro claro sobre fundo claro, que não é objeto nenhum. */
  height: clamp(250px, 30vw, 470px);
  object-fit: cover;
  object-position: 50% 100%;
}
.sangrada figcaption {
  padding-top: 14px;
  padding-bottom: clamp(30px, 3.4vw, 46px);
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta-media);
  max-width: 1560px;
}

/* ═══════════════ realce dos itens novos ═══════════════ */
@media (hover: hover) {
  .sumario-lista a:hover::after { transform: scaleX(1); transition-duration: 0s; }
  .sintoma-caso a:hover::after { opacity: 1; transition-duration: 0s; }
  /* a linha da tabela é item de dado: realce por deslocamento pequeno */
  .tabela tbody tr { transform: translateX(0); transition: transform 150ms var(--saida); }
  .tabela tbody tr:hover { transform: translateX(3px); transition-duration: 0s; }
}


/* ═══════════════ tabela em tela estreita ═══════════════
   Rolar de lado numa tabela de quatro colunas com texto corrido dá
   coluna de 115px e palavra quebrada uma por linha — medido em 390px,
   e ilegível. Aqui cada linha vira um bloco e cada célula ganha o nome
   da própria coluna, que já está no `data-rot` carimbado a partir do
   <thead>. O cabeçalho some do olho e continua no DOM para o leitor de
   tela, que segue lendo a tabela como tabela. */
@media (max-width: 720px) {
  .tabela-rolo { overflow-x: visible; }
  .tabela { min-width: 0; }
  .tabela thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tabela tbody tr {
    display: block;
    padding: 18px 0;
    box-shadow: inset 0 1px 0 rgba(20, 24, 26, .12);
  }
  .tabela tbody th[scope="row"] {
    display: block;
    padding: 0 0 10px;
    box-shadow: none;
    white-space: normal;
    font-size: 20px;
  }
  .tabela td {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: 4px 14px;
    padding: 5px 0;
    box-shadow: none;
  }
  .tabela td::before {
    content: attr(data-rot);
    font-family: var(--sans);
    font-size: 13px; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    line-height: 1.7;
    color: var(--tinta-media);
  }
  /* o deslocamento de realce não cabe em bloco de largura cheia */
  .tabela tbody tr:hover { transform: none; }
}
@media (max-width: 460px) {
  /* abaixo disso o rótulo e o valor não cabem lado a lado */
  .tabela td { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tabela td::before { line-height: 1.5; }
}