/* =====================================================================
   Technik PACS — landing
   Base: handoff do Claude Design ("Technik PACS - Landing.dc.html").
   O desenho é o dele; aqui os estilos saem de dentro das tags, viram
   tokens, e a página ganha o que o mockup não tinha: comportamento em
   tela pequena, foco visível e respeito a prefers-reduced-motion.
   ===================================================================== */

:root {
  /* tinta e fundos */
  --tinta:            #0b3d42;
  --tinta-suave:      #4e6c6e;
  --tinta-fraca:      #5b7a7c;
  --fundo:            #f1f5f5;
  --fundo-secao:      #edf3f1;
  --branco:           #ffffff;

  /* verdes da marca */
  --teal:             #12727a;
  --acao:             #b9e6c9;   /* botão principal */
  --acao-sombra:      rgba(133,198,160,.45);
  --menta:            #8fd3b0;

  /* escuros */
  --escuro:           #0b3234;
  --escuro-janela:    #0a2a2c;
  --escuro-barra:     #123c3e;
  --escuro-rodape:    #082628;
  --claro-no-escuro:  #b6cdc7;

  /* traços */
  --borda:            rgba(11,61,66,.07);
  --borda-forte:      rgba(11,61,66,.16);
  --sombra-cartao:    0 14px 30px rgba(11,61,66,.09), 0 1px 2px rgba(11,61,66,.06);

  --fonte:            "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --mono:             "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --largura:          1240px;
  --respiro:          22px;

  /* fundo do "Como funciona": a tira de baixo do quadro preso repete isto */
  --fluxo-base:       #f5f9f8;
  --fluxo-padrao:     repeating-linear-gradient(135deg, rgba(11,61,66,.045) 0 1px, transparent 1px 17px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: linear-gradient(165deg, #f4f8f7 0%, #e8f1ec 60%, #eef4f3 100%);
  color: var(--tinta);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 { text-wrap: pretty; }

/* A barra é sticky: sem esta folga, clicar no menu deixa o título da seção
   escondido atrás dela. Vale para o passo 06, que é o alvo de
   "Portal do paciente".

   `--barra-fundo` é medido pelo script (a barra muda de altura conforme a
   largura da tela). O indicador de seção ativa lê ESTA MESMA conta para
   posicionar a linha de leitura — se as duas divergirem, a seção clicada
   para num lugar que a linha não alcança e a luz fica na seção anterior. */
#problemas, #produto, #fluxo, #infra, #contato, #paciente {
  scroll-margin-top: calc(var(--barra-fundo, 86px) + 18px);
}
#inicio { scroll-margin-top: 0; }   /* o topo é o topo */

/* Escondido sem sair da página: `left:-9999px` empurraria a caixa do
   documento e faria qualquer medição de largura acusar vazamento. */
.pula-para-conteudo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pula-para-conteudo:focus {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 100;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  clip-path: none;
  background: var(--branco);
  color: var(--tinta);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--sombra-cartao);
}

/* ── peças reutilizadas ─────────────────────────────────────────────── */

.secao__interno {
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--respiro);
}
.secao__interno--estreito { max-width: 1100px; }
.secao__interno--centro   { max-width: 1000px; text-align: center; }

.titulo-secao {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 700;
  margin: 0 0 16px;
  max-width: 22em;
}
.titulo-secao--claro { color: var(--branco); }
.secao__interno--centro .titulo-secao { margin-inline: auto; }

.olho {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--menta);
  margin: 0 0 16px;
}
.olho--escuro { color: var(--teal); }

.botao {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.botao--grande { padding: 16px 32px; font-size: 16px; }
.botao--acao {
  background: var(--acao);
  box-shadow: 0 6px 18px var(--acao-sombra);
}
.botao--acao:hover {
  color: var(--tinta);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px var(--acao-sombra);
}
.botao--acao.botao--grande { box-shadow: 0 10px 28px var(--acao-sombra); }
.botao--contorno { border-color: rgba(11,61,66,.18); }
.botao--contorno:hover {
  background: rgba(255,255,255,.55);
  color: var(--tinta);
  transform: translateY(-1px);
  box-shadow: var(--sombra-cartao);
}
.botao--contorno-claro { border-color: rgba(255,255,255,.24); color: #eaf3ef; }
.botao--contorno-claro:hover {
  background: rgba(255,255,255,.08);
  color: var(--branco);
  transform: translateY(-1px);
}

/* O botão do WhatsApp flutuante só existe no celular (ver o @media de
   900px); no desktop a barra grudada já leva o "Agendar demonstração". */
.flutuante { display: none; }

/* ── barra de navegação ─────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  width: calc(100% - 44px);
  max-width: var(--largura);
  margin: 20px auto 0;
  padding: 14px 22px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(11,61,66,.06);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(11,61,66,.06);
}

.marca { display: flex; align-items: center; gap: 10px; }
.marca img { height: 26px; width: auto; }
.marca__produto {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  padding-left: 10px;
  border-left: 1px solid rgba(11,61,66,.14);
}

.barra__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
}
.barra__acoes { display: flex; align-items: center; gap: 10px; }

/* Seção ativa. O traço muda, o PESO não: virar 600 alargaria o texto e o
   menu inteiro daria um pulinho a cada seção que passa. */
.barra__links a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  transition: color .2s ease;
}
.barra__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.barra__links a[aria-current]::after { transform: scaleX(1); }
.barra__links a[aria-current] { color: var(--tinta); }

/* ── hero ───────────────────────────────────────────────────────────── */

.hero {
  background-color: #f3f7f6;
  background-image:
    radial-gradient(rgba(11,61,66,.13) 1.1px, transparent 1.1px),
    radial-gradient(900px 560px at 82% 4%, rgba(185,230,201,.5) 0%, rgba(185,230,201,0) 64%);
  background-size: 26px 26px, auto;
  margin-top: -96px;
  padding-top: 96px;
}
.hero__interno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: center;
  gap: 40px;
  max-width: var(--largura);
  margin-inline: auto;
  padding: 88px var(--respiro) 120px;
}
.hero__texto { min-width: 0; }

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(18,114,122,.08);
  padding: 7px 14px;
  border-radius: 999px;
  margin: 0 0 26px;
}
.etiqueta__ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

.hero h1 {
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
  margin: 0 0 22px;
}
.subtitulo {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--tinta-suave);
  margin: 0 0 36px;
  max-width: 34em;
}
.hero__botoes { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__selos {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin: 48px 0 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
}

.hero__imagem { min-width: 0; perspective: 1600px; }
.hero__imagem img {
  width: 132%;
  max-width: 1100px;
  border-radius: 14px;
  border: 1px solid rgba(11,61,66,.1);
  box-shadow: -24px 34px 70px rgba(11,61,66,.22), 0 0 0 1px rgba(255,255,255,.5);
  transform: rotateX(14deg) rotateY(-17deg) rotateZ(5deg);
  transform-origin: center left;
}

/* Entrada do hero ao carregar a página — só existe sob `.js` (ver o
   toggle síncrono no <head>); sem JS, tudo aparece pronto direto.
   Cascata pela ORDEM dos filhos diretos de .hero__texto (etiqueta, h1,
   subtítulo, botões, selos) — mesmo par opacity/translateY usado nos
   cards de "O problema" e nas falas da cena. A imagem entra por último
   e mais devagar (fade + leve escala), sem tocar no transform 3D do
   <img> — quem anima é o CONTÊINER, o tilt do <img> fica intacto. */
.js .hero__texto > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .hero__texto > *:nth-child(2) { transition-delay: .08s; }
.js .hero__texto > *:nth-child(3) { transition-delay: .16s; }
.js .hero__texto > *:nth-child(4) { transition-delay: .24s; }
.js .hero__texto > *:nth-child(5) { transition-delay: .32s; }

.js .hero__imagem {
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: .2s;
}

.js .hero--pronto .hero__texto > *,
.js .hero--pronto .hero__imagem {
  opacity: 1;
  transform: none;
}

/* ── o problema ─────────────────────────────────────────────────────── */

.problemas {
  background: var(--fundo-secao);
  /* embaixo só 48px: quem dá o respiro até a faixa escura é a tira do
     quadro. Não menos que isso: a sombra dos cards alcança ~44px e, cortada
     pela tira, virava uma linha na emenda (medido 6/255 com 28px). */
  padding: 56px 0 48px;
  border-top: 1px solid var(--borda);
}
.problemas .titulo-secao { margin-bottom: 40px; }

.trocas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.troca {
  background: var(--branco);
  border-radius: 16px;
  padding: 22px 20px 24px;
  /* flex (e não grid) para o bloco de ganhos poder colar no rodapé com
     `margin-top: auto` — assim os selos dos 4 cards ficam alinhados
     mesmo quando um título ocupa duas linhas e outro só uma. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-cartao);
  color: var(--teal);
}
.troca__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.troca__antes {
  font-size: 14.5px;
  font-weight: 500;
  color: #a3352c;
  text-decoration: line-through;
  text-decoration-color: #c9564a;
  padding-top: 3px;
}
.troca__seta,
.troca__ganhos li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}
.troca__seta { font-size: 10.5px; }

/* Três ganhos por card (09/09, decisão dele): um selo só "dava um
   verdinho" para uma troca que agrega mais de uma coisa. O bloco fica
   colado no rodapé do card — `margin-top: auto` — para que os cards
   terminem alinhados mesmo com títulos de alturas diferentes. */
.troca__ganhos {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: auto 0 0;   /* auto no topo: cola no rodapé do card (flex) */
  padding: 0;
}
.troca__ganhos li { font-size: 11.5px; letter-spacing: .08em; }
.troca__check {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: var(--acao);
  color: var(--tinta);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.troca__depois {
  font-size: clamp(18px, 1.85vw, 26px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--tinta);
}

/* Entrada ao rolar até a seção. É `animation`, não `transition`, porque
   as duas coisas disputavam a MESMA propriedade: a entrada quer um
   percurso longo (pra dar tempo de ver) e o hover quer resposta curta —
   e `transition` só aceita uma duração por propriedade. Com keyframes a
   entrada tem a duração dela (.75s) e o hover fica com a sua (.18s, na
   `transition` abaixo). `backwards` segura o cartão no primeiro quadro
   durante o atraso da cascata; sem `forwards` de propósito, pra que ao
   terminar o cartão volte ao CSS normal e o hover volte a mandar. */
@keyframes entraCartao {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.troca {
  opacity: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.troca--visivel {
  opacity: 1;
  animation: entraCartao .75s cubic-bezier(.22,.61,.36,1) backwards;
}
.troca--visivel:nth-child(2) { animation-delay: .1s; }
.troca--visivel:nth-child(3) { animation-delay: .2s; }
.troca--visivel:nth-child(4) { animation-delay: .3s; }

/* Sem JS o observador (script.js) nunca roda e os cartões ficariam em
   opacity:0 PRA SEMPRE (era bug — o hero tinha a proteção, estes não).
   O override vem pelo `.no-js` em vez de esconder sob `.js` como no
   hero porque aqui a classe de revelação é uma só (`.troca--visivel`):
   sob `.js` ela empataria em especificidade e a ordem no arquivo
   decidiria. Com `.no-js` não há empate — sob `.js` a regra nem casa. */
.no-js .troca { opacity: 1; transform: none; }

/* Hover igual ao dos botões (translateY + sombra que cresce) — só depois
   de revelado, pra não brigar com o transform da entrada em quem rolar
   devagar com o mouse parado em cima do cartão. */
.troca--visivel:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(11,61,66,.14), 0 2px 6px rgba(11,61,66,.08);
}

/* ── por dentro do sistema (scrollytelling) ─────────────────────────── */

/* A seção é só o PERCURSO, com o fundo claro da página. Quem é escura é a
   faixa presa (.cena__palco): altura fixa menor que a tela, borda a borda,
   com o claro aparecendo parado em cima e embaixo enquanto o miolo troca
   (decisão dele, 08/09 — "não quero que a seção preencha a tela"). */
.produto { padding: 0; }
.produto__cabecalho { max-width: 40em; margin-bottom: 36px; }
/* A cena: um palco preso na tela + trilhos invisíveis que dão o percurso.
   `--altura-palco` é fonte ÚNICA — o palco tem essa altura e os trilhos
   sobem a mesma medida por baixo dele. Se os dois valores divergirem,
   sobra um buraco no fim da seção. */
.cena {
  /* 45vh dava ~5 giros de roda sem NADA mudar na tela (ele mostrou duas
     capturas idênticas): seção presa sem sinal de vida lê como travada. */
  --trilho: 36vh;
  /* Deslocamento que centra a faixa na tela útil (abaixo da barra). */
  --m: max(24px, (100vh - var(--barra-fundo, 86px) - var(--altura-palco, 70vh)) / 2);
  position: relative;
  /* O que aparece SOB a barra enquanto o quadro está preso: a cor de
     "O problema", a mesma da tira de cima. */
  background: var(--fundo-secao);
  /* O quadro preso tem a altura da tela útil; o resto é o percurso dos 6
     trilhos, mais o que falta para segurar o quadro até a METADE do passo
     06 (a promessa comercial mais importante, lida parada): o quadro solta
     quando o fim da cena alcança o fim da tela, e nessa hora o trilho 5
     precisa ter passado meio trilho da linha. */
  height: calc(100vh - var(--barra-fundo, 86px) + 5.5 * var(--trilho) + 24px);
}

/* O QUADRO: a tela útil (abaixo da barra), preso. Duas tiras (pseudo-
   elementos) com o fundo dos vizinhos e a faixa escura absoluta no meio —
   a emenda entre as tiras fica atrás da faixa. Enquanto os passos trocam,
   vê-se o fim de "O problema" em cima e o começo de "Como funciona"
   embaixo, parados (decisão dele, 08/09).

   Trava ABAIXO da barra, não em 0: os 86px sob a barra não entram na tira,
   senão durante a ENTRADA (quadro ainda solto) esses 86px ficam à vista e a
   distância entre os cards e a faixa vira 88+181px — foi o "muito mais
   espaçoso" que ele sentiu. */
.cena__quadro {
  position: sticky;
  top: var(--barra-fundo, 86px);
  height: calc(100vh - var(--barra-fundo, 86px));
  height: calc(100dvh - var(--barra-fundo, 86px));
}
.cena__quadro::before,
.cena__quadro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}
.cena__quadro::before {
  top: 0;
  height: calc(var(--m) + var(--altura-palco, 70vh) / 2);
  background: var(--fundo-secao);            /* = #problemas */
}
.cena__quadro::after {
  top: calc(var(--m) + var(--altura-palco, 70vh) / 2);
  bottom: 0;
  background-color: var(--fluxo-base);        /* = #fluxo, pixel a pixel: */
  background-image: var(--fluxo-padrao);      /* o padrão é FIXO à tela nos */
  background-attachment: fixed;               /* dois, então a emenda some */
}

.cena__palco {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--m);
  /* 76px embaixo porque os pontinhos ficam pendurados 27px abaixo da janela:
     com 40px eles encostavam na borda (17px de folga — "muito pequeno") */
  padding: 56px 0 96px;
  background:
    radial-gradient(1000px 520px at 78% -5%, rgba(143,211,176,.18) 0%, rgba(143,211,176,0) 60%),
    radial-gradient(760px 480px at 0% 100%, rgba(18,114,122,.3) 0%, rgba(18,114,122,0) 62%),
    var(--escuro);
  color: #eaf3ef;
}
/* O bloco de conteúdo da faixa é MAIS LARGO que o resto da página (1240px):
   a faixa vai de borda a borda, e prender o conteúdo na largura padrão
   deixava 333px de escuro vazio de cada lado numa tela de 1920 — com a
   captura do sistema do mesmo tamanho de uma tela de 1440. */
.cena__palco > .secao__interno {
  width: 100%;
  max-width: min(1720px, 94vw);
}

/* Entrada da faixa: quando ela chega, o conteúdo entra em cascata —
   cabeçalho, texto, janela. A TROCA dos passos não é tocada aqui (ela é
   o `.fala--ativa`/`.quadro--ativo`, mais abaixo): esta animação roda uma
   vez, na chegada, e sai do caminho.

   São 3 contêineres, nunca as falas nem os quadros: as falas dividem a
   mesma célula do grid com opacidade PRÓPRIA, e mexer nelas aqui brigaria
   com a troca. Como é só opacity/transform, o layout não muda — e não
   muda mesmo o `palco.offsetHeight`, que o script publica em
   `--altura-palco` e de onde saem o centro da faixa e a sobra de saída. */
@keyframes entraNaFaixa {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.produto__cabecalho,
.cena__grade,
.palco-coluna { opacity: 0; }

.cena__palco--visivel .produto__cabecalho,
.cena__palco--visivel .cena__grade,
.cena__palco--visivel .palco-coluna {
  opacity: 1;
  animation: entraNaFaixa .75s cubic-bezier(.22,.61,.36,1) backwards;
}
.cena__palco--visivel .cena__grade   { animation-delay: .1s; }
.cena__palco--visivel .palco-coluna  { animation-delay: .2s; }

/* Sem JS ninguém adiciona a classe — e a faixa ficaria vazia. */
.no-js .produto__cabecalho,
.no-js .cena__grade,
.no-js .palco-coluna { opacity: 1; }

.cena__grade {
  display: grid;
  /* 38/62 e não 50/50: o texto do passo ocupa 169px de altura contra 365px
     da captura — ele não precisa de metade da largura, e cada ponto que
     cede vira tela do sistema, que é o que a seção está mostrando.
     O colapso em 1 coluna no celular vem do @media lá embaixo (a versão
     `auto-fit` fazia isso sozinha, mas dividia sempre em partes iguais). */
  grid-template-columns: minmax(330px, 38fr) minmax(0, 62fr);
  gap: 44px;
  /* CENTRADO ao lado da janela (pedido dele, 08/09). O alinhamento pelo
     topo era da época em que o título ficava FORA da faixa e o texto
     centrado parecia afundado; com o título dentro, o centro é o certo. */
  align-items: center;
}

/* As 6 falas dividem a MESMA célula do grid e trocam por cross-fade.
   Ficam todas no HTML (Ctrl+F e leitor de tela alcançam); o que muda é a
   transparência — some do olho, não do documento. */
.falas { display: grid; list-style: none; margin: 0; padding: 0; min-width: 0; }
.fala {
  grid-area: 1 / 1;
  align-self: center;
  /* número NA FRENTE do título (pedido dele, 08/09): duas colunas, o número
     na primeira alinhado pela linha de base da 1ª linha do título; o
     parágrafo cai sob o título, recuado — o número marca o bloco inteiro */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.fala--ativa { opacity: 1; transform: none; pointer-events: auto; }
.fala__numero {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--menta);
}
.fala h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(23px, 2.2vw, 32px);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--branco);
}
.fala p {
  grid-column: 2;
  grid-row: 2;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--claro-no-escuro);
  margin: 0;
  max-width: 34em;
}
/* Observação de rodapé do passo (a que responde o asterisco do texto).
   Precisa da própria linha no grid: `.fala p` põe todo parágrafo na linha
   2, e sem isto a nota caía EM CIMA do texto principal. */
.fala .fala__nota {
  grid-row: 3;
  margin-top: 1.6em;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: .78;
}

/* Ficam por trás do palco, do topo da cena até o fim, e passam enquanto a
   pessoa rola. Absolutos para não depender da altura do palco (que agora é
   a do conteúdo). `pointer-events: none` porque estão por cima na ordem de
   pintura: sem isso roubariam o clique e a seleção do texto. */
.cena__trilhos {
  position: absolute;
  top: var(--m);        /* começam onde a faixa trava, não na borda da cena */
  left: 0;
  right: 0;
  pointer-events: none;
}
.cena__trilho { height: var(--trilho); }

/* `relative` porque os pontinhos ficam pendurados FORA do fluxo: se
   entrassem na altura da coluna, o texto ao lado se centraria contra
   janela+pontinhos e ficava 13px abaixo do centro da imagem (medido). */
.palco-coluna { min-width: 0; position: relative; }

/* A janela cresce até onde a ALTURA da tela deixar.

   A faixa não tem altura própria: ela tem a altura do conteúdo, e o
   conteúdo é quase todo esta janela (a captura é panorâmica, 2320×1268,
   então largura vira altura na razão 1:0,55). Se a janela crescesse à
   vontade, a faixa passaria da tela e comeria as tiras das seções
   vizinhas — o "quadro preso entre O problema e Como funciona" que ele
   aprovou em 08/09 depois de 6 rodadas.

   A conta reserva 70px (35 de cada lado) para essas tiras:
     faixa alvo   = 100vh − barra(86) − tiras(70)
     janela       = faixa − paddings(152) − cabeçalho(158)
     largura      = (janela − barra da janela(51)) × 2320/1268
   O piso de 420px protege telas muito baixas, onde a conta ficaria
   pequena demais (lá quem manda é o @media de max-height). */
.janela {
  margin: 0;
  max-width: max(420px, calc((100vh - 517px) * 1.83));
  margin-inline: auto;
  background: var(--escuro-janela);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Passo 06: o portal do paciente é no CELULAR, e mostrá-lo dentro de uma
   janela de navegador de desktop é incoerente — o JS liga esta classe
   quando aquele quadro acende e a moldura some, deixando os três
   aparelhos soltos sobre a faixa. */
.janela--nua {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.janela--nua .janela__barra {
  opacity: 0;
  pointer-events: none;
}
/* o fundo da "tela" também sai — senão fica um retângulo escuro atrás
   dos aparelhos, que é justamente o que se queria tirar */
.janela--nua .janela__tela { background: transparent; }
.janela__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--escuro-barra);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: opacity .35s ease;
}
.janela__bolinhas { display: flex; gap: 6px; }
.janela__bolinhas i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.janela__bolinhas i:nth-child(1) { background: #e06a5c; }
.janela__bolinhas i:nth-child(2) { background: #e0b45c; }
.janela__bolinhas i:nth-child(3) { background: #7cc79a; }
.janela__url {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: #9dbdb8;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 5px 10px;
  max-width: 340px;
  margin-inline: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.janela__espaco { width: 52px; }

.janela__tela {
  position: relative;
  aspect-ratio: 2320 / 1268;
  background: #082224;
}
.quadro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity .45s ease;
}
.quadro--conter { object-fit: contain; }
.quadro--ativo { opacity: 1; }

/* ── os três celulares do passo 06 ──────────────────────────────────── */

/* A moldura do aparelho é CSS, não imagem: fica nítida em qualquer
   densidade de tela, não soma bytes numa página que se orgulha de pesar
   pouco, e encolhe sozinha. As capturas entram CRUAS (sem moldura
   queimada) — trocar as 3 imagens basta pra atualizar o portal. */
.quadro--celulares {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: 4px clamp(12px, 2vw, 26px);
}

/* Os aparelhos sobem sobre a barra do navegador escondida.

   A barra some por opacidade e não por `display`, pra altura da janela
   não mudar (ela entra em `--altura-palco`, de onde sai a geometria da
   cena) — só que isso deixava ~50px de espaço morto no topo, visível a
   olho nu. Como este quadro é `position: absolute`, esticá-lo pra cima
   não mexe em layout nenhum: só ocupa o vazio. A altura da barra vem
   medida pelo JS, não chutada. */
.janela--nua .quadro--celulares {
  top: calc(-1 * var(--altura-barra-janela, 50px));
  /* o `.quadro` base tem `height: 100%`, que sozinho anularia o
     esticamento: subir o topo só deslocaria o bloco. */
  height: calc(100% + var(--altura-barra-janela, 50px));
}
/* Sem moldura CSS aqui: a captura JÁ é o aparelho — mede-se nela uma
   borda preta de 23px perto do topo e 15px na base, formando os cantos
   arredondados (nas laterais retas ela é zero). Uma moldura por fora
   virava borda DUPLA, que foi o "espaçamento nas bordas" relatado.
   O que fica é só a sombra, pra descolar do fundo escuro. */
.celular {
  /* a proporção é a REAL do arquivo (612×1436). Com a proporção errada,
     o `cover` aparava um pedaço da tela do portal. */
  height: 100%;
  aspect-ratio: 612 / 1436;
  margin: 0;
  border-radius: clamp(12px, 1.7vw, 22px);
  box-shadow: 0 18px 40px rgba(0,0,0,.38);
  position: relative;
}
.celular img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* contain, não cover: nada de tela aparada */
  border-radius: inherit;
  display: block;
}
/* Sem ilha desenhada aqui: as capturas do portal JÁ trazem a barra de
   status e a pílula da câmera (conferido no PNG de origem). Desenhar
   outra duplicaria o detalhe. */

/* O pontinho ativo vira uma barrinha que ENCHE conforme a pessoa rola
   dentro do passo (o script publica --progresso): é o sinal de vida da
   seção presa, para os giros de roda não parecerem sem efeito. */
.pontinhos {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.pontinhos i {
  width: 7px; height: 7px;
  border-radius: 4px;
  background: rgba(185,230,201,.3);
  display: block;
  transition: width .3s ease, background-color .3s ease;
}
.pontinhos i.ponto--ativo {
  width: 30px;
  background: linear-gradient(90deg, var(--acao) var(--progresso, 0%), rgba(185,230,201,.3) 0);
}

/* ── como funciona (trilho) ─────────────────────────────────────────── */

/* A borda de CIMA desta seção é a tira de baixo do quadro preso: mesma cor,
   mesmo padrão (fixo à tela nos dois, para as diagonais casarem), sem
   border-top e com o brilho verde afastado da borda — na borda ele tem de
   estar em zero, senão a emenda aparece. */
.fluxo {
  background-color: var(--fluxo-base);
  background-image:
    radial-gradient(760px 360px at 12% 34%, rgba(185,230,201,.5) 0%, rgba(185,230,201,0) 64%),
    radial-gradient(700px 420px at 92% 100%, rgba(18,114,122,.12) 0%, rgba(18,114,122,0) 66%),
    var(--fluxo-padrao);
  background-attachment: scroll, scroll, fixed;
  padding: 32px 0 96px;   /* em cima só 32px: a tira de baixo do quadro já respira */
  border-bottom: 1px solid var(--borda);
}
.fluxo__cabecalho { max-width: 34em; margin-bottom: 56px; }

.trilho {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  min-height: 340px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: no;
}
.trilho::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--acao), #2f8f86, var(--acao));
  background-size: 200% 200%;
  animation: correTrilho 6s ease infinite;
  border-radius: 10px;
}
@keyframes correTrilho {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.trilho__no {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.trilho__marca {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--escuro);
  border: 4px solid var(--acao);
  position: relative;
  z-index: 2;
  transition: transform .18s ease;
}
.trilho__numero {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--teal);
  transition: transform .18s ease;
}
.trilho__cartao {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 246px);
  padding: 22px 20px;
  border: 1px solid rgba(18,114,122,.24);
  border-radius: 18px;
  background: var(--branco);
  box-shadow: 0 12px 28px rgba(11,61,66,.07);
}
.trilho__cartao h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }
.trilho__cartao p  { font-size: 14.5px; line-height: 1.5; color: var(--tinta-fraca); margin: 0; }

/* ímpares: cartão em cima  ·  pares: cartão embaixo */
.trilho__no:nth-child(odd)  .trilho__cartao { bottom: calc(50% + 46px); }
.trilho__no:nth-child(odd)  .trilho__numero { top:    calc(50% + 22px); }
.trilho__no:nth-child(even) .trilho__cartao { top:    calc(50% + 46px); }
.trilho__no:nth-child(even) .trilho__numero { bottom: calc(50% + 22px); }

/* Entrada ao rolar até a seção — todos os cartões sobem, com a mesma
   duração e a mesma cascata dos de "O problema" (era .3s e passava
   despercebida). Também por `animation`, pelo mesmo motivo de lá: a
   entrada quer percurso longo e o hover quer resposta curta, e
   `transition` não dá duas durações para a mesma propriedade.

   O `translateX(-50%)` que centraliza o cartão é permanente (regra base
   acima), então ele aparece nos DOIS quadros do keyframe — a entrada só
   soma um translateY por cima dele. É também por isso que a animação é
   desligada no empilhado do celular (lá o cartão é estático e não tem
   esse -50%) e sob `prefers-reduced-motion`. */
@keyframes entraPasso {
  from { opacity: 0; transform: translateX(-50%) translateY(28px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.trilho__cartao {
  opacity: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.trilho__cartao--visivel {
  opacity: 1;
  animation: entraPasso .75s cubic-bezier(.22,.61,.36,1) backwards;
}
.trilho__no:nth-child(2) .trilho__cartao--visivel { animation-delay: .1s; }
.trilho__no:nth-child(3) .trilho__cartao--visivel { animation-delay: .2s; }
.trilho__no:nth-child(4) .trilho__cartao--visivel { animation-delay: .3s; }

/* Mesmo motivo do `.no-js .troca` acima — sem isto, sem JS os 4 cartões
   ficam em opacity:0 pra sempre. */
.no-js .trilho__cartao { opacity: 1; transform: translateX(-50%); }

/* Hover do passo INTEIRO: passar o mouse no cartão, na bolinha ou no
   número acende os três, porque o gatilho é o `.trilho__no` que contém
   os três. O cartão SOBE (como os de "O problema"); bolinha e número
   CRESCEM — subir a bolinha 4px a tiraria do eixo da linha do trilho,
   que passa exatamente pelo meio dela.

   Só onde existe mouse de verdade E fora do layout empilhado: no
   celular o `.trilho__cartao` vira `position: static` e perde o
   `translateX(-50%)`, então um hover que o devolvesse jogaria o cartão
   meia largura para a esquerda (em touch o estado de hover gruda depois
   do toque). `hover: hover` sozinho não bastaria — uma janela estreita
   no notebook casa os dois. */
@media (hover: hover) and (min-width: 901px) {
  .trilho__no:hover .trilho__cartao--visivel {
    transform: translateX(-50%) translateY(-4px);
    box-shadow: 0 20px 38px rgba(11,61,66,.14), 0 2px 6px rgba(11,61,66,.08);
  }
  .trilho__no:hover .trilho__marca  { transform: scale(1.18); }
  .trilho__no:hover .trilho__numero { transform: translateX(-50%) scale(1.15); }
}

/* ── infraestrutura ─────────────────────────────────────────────────── */

.infra {
  background: var(--fundo-secao);
  padding: 92px 0;
  border-top: 1px solid var(--borda);
}
.infra__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: center;
}
.infra__linha { font-size: 16.5px; line-height: 1.6; color: var(--tinta-suave); margin: 0; max-width: 28em; }
.pilulas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 34px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--teal);
}
.pilulas span { padding: 7px 14px; border: 1px solid rgba(18,114,122,.28); border-radius: 999px; }

.cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* Alinhado aos cards das outras seções (09/09): vinham do mockup um
   degrau abaixo em CINCO medidas ao mesmo tempo — raio 14px, zero
   sombra, padding 20/18, título 16.5px, texto 13.5px — e a seção lia
   como se fosse de outro site. Agora seguem o mesmo par borda+sombra
   de `.troca`. */
.cartoes li {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 22px 20px;
  display: grid;
  gap: 8px;
  align-content: start;
  box-shadow: var(--sombra-cartao);
}
/* O seletor é `.cartoes .cartao__olho` (2 classes) e não `.cartao__olho`
   (1) porque o rótulo é um <p> DENTRO de `.cartoes`, e a regra
   `.cartoes p` abaixo (0,1,1) vencia a de classe só (0,1,0): o
   `font-size: 10.5px` daqui nunca valeu nada — o rótulo saía do
   tamanho do parágrafo. Foi o que apareceu ao medir o computado
   depois de mexer no `.cartoes p`. */
.cartoes .cartao__olho {
  font-family: var(--mono);
  font-size: 11.5px;   /* como o `.troca__tag` de "O problema" */
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}
.cartoes h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.cartoes p  { font-size: 14.5px; line-height: 1.5; color: var(--tinta-fraca); margin: 0; }

/* Entrada e hover — mesmo vocabulário dos cards de "O problema", e
   reaproveitando o `@keyframes entraCartao` de lá. */
.cartoes li {
  opacity: 0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cartoes li.cartao--visivel {
  opacity: 1;
  animation: entraCartao .75s cubic-bezier(.22,.61,.36,1) backwards;
}
.cartoes li.cartao--visivel:nth-child(2) { animation-delay: .1s; }
.cartoes li.cartao--visivel:nth-child(3) { animation-delay: .2s; }
.cartoes li.cartao--visivel:nth-child(4) { animation-delay: .3s; }

/* Sem JS ninguém revela — ver o mesmo caso em `.no-js .troca`. */
.no-js .cartoes li { opacity: 1; }

.cartoes li.cartao--visivel:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(11,61,66,.14), 0 2px 6px rgba(11,61,66,.08);
}

/* ── contato ────────────────────────────────────────────────────────── */

.contato {
  background: radial-gradient(760px 420px at 50% 0%, rgba(143,211,176,.2) 0%, rgba(143,211,176,0) 62%), var(--escuro);
  padding: 96px 0;
}
.contato__linha {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--claro-no-escuro);
  margin: 0 auto 36px;
  max-width: 34em;
}
/* Os 3 passos da demonstração. Vivem sobre o fundo ESCURO da seção, então
   o cartão não é branco como os das outras: é um véu claro por cima do
   escuro (mesma ideia do `.botao--contorno-claro`), senão viraria um bloco
   branco gritando no meio da faixa escura. */
.demo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  text-align: left;
}
.demo__passo {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 22px 20px;
  /* número numa coluna própria, na frente do texto (pedido dele, 11/09) —
     mesmo desenho da `.fala` de "O sistema": o número alinha pela linha de
     base do título e o parágrafo cai sob o título, recuado */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 8px;
  align-items: baseline;
  align-content: start;
}
.demo__numero {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  color: var(--menta);
}
.demo__passo h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  color: #eaf3ef;
}
.demo__passo p {
  grid-column: 2;
  grid-row: 2;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  color: var(--claro-no-escuro);
}

/* Entrada e hover no mesmo vocabulário do resto (reaproveita o
   `@keyframes entraCartao`). No escuro a sombra não aparece: quem responde
   ao hover é o véu, que clareia. */
.demo__passo { opacity: 0; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
.demo__passo.demo--visivel {
  opacity: 1;
  animation: entraCartao .75s cubic-bezier(.22,.61,.36,1) backwards;
}
.demo__passo.demo--visivel:nth-child(2) { animation-delay: .1s; }
.demo__passo.demo--visivel:nth-child(3) { animation-delay: .2s; }
.no-js .demo__passo { opacity: 1; }

.demo__passo.demo--visivel:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
}

.contato__botoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── rodapé ─────────────────────────────────────────────────────────── */

.rodape { background: var(--escuro-rodape); padding: 34px 0; }
.rodape__interno {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: #7d9a95;
}

/* ── telas baixas (notebook 1366×650, projetor): a faixa tem de caber ── */

@media (max-height: 760px) {
  .cena__palco { padding: 22px 0 18px; }
  .produto__cabecalho { margin-bottom: 14px; }
  .produto .titulo-secao { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 8px; }
  .cena__grade { gap: 28px; }
}

/* ── telas médias ───────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .trocas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra__links { order: 3; width: 100%; justify-content: center; }
}

/* ── telas pequenas ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Empilhados, os 5 links de âncora faziam a pílula ocupar quase metade
     da tela e cobrir o palco. Numa página de rolagem eles não se pagam no
     celular: fica logo + as duas ações, em uma linha só. */
  .barra__links { display: none; }
  .marca { flex: 0 0 auto; }
  .barra__acoes { flex: 0 1 auto; margin-left: auto; }

  /* A barra NÃO gruda no celular (decisão dele, 11/09): rola com a página
     e devolve os ~73px do topo à leitura. O contato passa a morar no botão
     flutuante embaixo. `MEDIDAS.fundoDaBarra()` lê esta posição e vale 0 —
     a grade da cena gruda a 8px do topo e as âncoras param a 18px. */
  .barra { position: relative; top: 0; }

  .flutuante {
    display: inline-flex;
    align-items: center;
    position: fixed;
    z-index: 30;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));   /* a faixa de baixo do iPhone */
    min-height: 48px;                                        /* toque: mínimo de 44 */
    padding: 0 20px;
    font-size: 15px;
    box-shadow: 0 10px 28px rgba(11,61,66,.28);
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
  /* Escondido de verdade: `visibility` tira o botão do Tab e do leitor de
     tela, e só apaga DEPOIS do esmaecer (o atraso de .25s). */
  .flutuante--escondido {
    opacity: 0;
    transform: translateY(12px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  /* Ele NASCE escondido (sem piscar antes do script decidir); sem
     JavaScript ninguém decide, e aí fica sempre à vista — é só um link. */
  .no-js .flutuante--escondido {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }

  /* Rótulos em mono: nada abaixo de 12px no celular (11/09 — eram 57 textos
     entre 10,5 e 12,5px). Mesmo estilo, só maiores, com as letras um pouco
     menos espaçadas para caber. */
  .troca__ganhos li { font-size: 13px; letter-spacing: .05em; }
  .troca__seta { font-size: 12px; letter-spacing: .1em; }
  .cartoes .cartao__olho { font-size: 12.5px; letter-spacing: .12em; }
  .olho { font-size: 13px; letter-spacing: .12em; }
  .etiqueta { font-size: 12.5px; letter-spacing: .1em; }
  .trilho__numero,
  .demo__numero { font-size: 13px; }
  .pilulas,
  .hero__selos,
  .rodape__interno { font-size: 13px; }

  .hero__interno { padding: 56px var(--respiro) 72px; gap: 48px; }

  /* o exagero da perspectiva é para tela grande; aqui a imagem
     precisa caber e continuar legível */
  .hero__imagem img {
    width: 100%;
    transform: rotateX(8deg) rotateY(-8deg) rotateZ(2deg);
    transform-origin: center;
  }

  .produto { padding: 64px 0 72px; }

  /* A CENA NO CELULAR — "preso, mas enxuto" (decisão dele, 11/09).
     O quadro inteiro, com o título dentro, não cabia: 788px numa tela de
     844, e com a barra do Safari à vista o texto saía cortado em 3 dos 6
     passos. Aqui gruda só a GRADE — imagem, pontinhos e texto — e o título
     da seção rola e sai. A faixa escura vira um bloco comum que cobre a
     seção inteira; as tiras das vizinhas somem (e com elas as diagonais em
     `background-attachment: fixed`, que o iOS ignora). A régua da troca
     passa a ser o topo da grade: `MEDIDAS.linhaDaCena()` no script.
     Alturas em `svh` (com `vh` de reserva): a tela com a barra do
     navegador VISÍVEL, a menor das duas — o que cabe nela cabe sempre. */
  .cena { --trilho: 32vh; --trilho: 32svh; height: auto; }
  .cena__quadro { position: static; height: auto; }
  .cena__quadro::before,
  .cena__quadro::after { display: none; }
  .cena__palco { position: relative; top: 0; padding: 48px 0 40px; }
  /* O percurso dos passos mora DENTRO da faixa: é este vão depois da
     grade que a mantém grudada enquanto os trilhos passam (um elemento
     sticky só gruda dentro do bloco que o contém). 5,5 trilhos seguram o
     passo 06 até a metade — a mesma regra do desktop. */
  .cena__palco > .secao__interno::after {
    content: "";
    display: block;
    height: calc(5.5 * var(--trilho));
  }
  /* Os trilhos começam onde a grade gruda (o script publica). */
  .cena__trilhos { top: var(--topo-grade, 0px); }
  .cena__grade {
    grid-template-columns: 1fr;
    gap: 20px;
    position: sticky;
    top: calc(var(--barra-fundo, 86px) + 8px);
  }
  .palco-coluna { order: -1; }
  .pontinhos { margin-top: 12px; }
  .fala h3 { font-size: clamp(21px, 5.4vw, 26px); }
  .fala p { font-size: 15.5px; }

  .fluxo { padding: 72px 0; }
  .fluxo__cabecalho { margin-bottom: 32px; }

  /* trilho deitado vira trilho em pé */
  .trilho { grid-template-columns: 1fr; min-height: 0; }
  .trilho::before {
    left: 8px; right: auto;
    top: 12px; bottom: 12px;
    width: 5px; height: auto;
    transform: none;
    background: linear-gradient(180deg, var(--acao), #2f8f86, var(--acao));
    background-size: 200% 200%;
  }
  .trilho__no {
    min-height: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0 20px;
    padding: 14px 0;
  }
  .trilho__marca { grid-row: 1 / span 2; margin-top: 6px; }
  .trilho__numero,
  .trilho__cartao {
    position: static;
    transform: none;
    left: auto; right: auto; top: auto; bottom: auto;
  }
  .trilho__numero { margin-bottom: 8px; }
  .trilho__cartao { width: auto; }
  .trilho__no:nth-child(odd)  .trilho__cartao,
  .trilho__no:nth-child(even) .trilho__cartao { inset: auto; position: static; }
  /* Aqui o cartão é estático e não tem o translateX(-50%) que o keyframe
     carrega — animar devolveria o -50% e o jogaria meia largura à
     esquerda. Some o deslize; o cartão só aparece. */
  .trilho__cartao--visivel { animation: none; }

  .infra { padding: 64px 0; }
  .contato { padding: 72px 0; }
}

@media (max-width: 640px) {
  .barra { width: calc(100% - 24px); padding: 10px 12px; gap: 8px; }
  .barra__links { font-size: 14px; gap: 8px 16px; }
  .marca img { height: 22px; }
  /* sem espaço para os dois nomes: a logo já diz Technik, o "PACS" sai */
  .marca__produto { display: none; }
  .barra__acoes .botao { padding: 9px 14px; font-size: 13px; }
  .trocas { grid-template-columns: 1fr; }
  .cartoes { grid-template-columns: 1fr; }
  .demo { grid-template-columns: 1fr; }
  .hero__selos { gap: 12px 22px; }
  .hero__botoes .botao { width: 100%; text-align: center; }
  .contato__botoes .botao { width: 100%; }
}

/* Rede para celular BAIXO (iPhone SE, Android pequeno com a barra à vista):
   a grade presa mede ~470px e, sob a barra da página, sobram ~465 numa tela
   de 550 — faltava coisa de 10px. A nota do asterisco do passo 01 (a fala
   mais alta) sobe para perto do texto, e título e parágrafo encolhem um
   degrau. Os pontinhos NÃO mexem: ficam pendurados no vão de 20px entre a
   janela e o texto, e diminuir o vão os jogaria em cima do título. */
@media (max-width: 900px) and (max-height: 620px) {
  .cena__grade { top: calc(var(--barra-fundo, 86px) + 4px); }
  .fala h3 { font-size: 19px; }
  .fala p { font-size: 14.5px; }
  .fala .fala__nota { margin-top: .6em; }
}

/* ── quem pediu menos movimento ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trilho::before { animation: none; }
  .quadro, .fala, .pontinhos i, .botao { transition: none; }
  .barra__links a, .barra__links a::after { transition: none; }
  .hero__imagem img { transform: none; }

  /* A cena continua funcionando, mas sem MOVIMENTO: a troca é instantânea
     e a fala não desliza. Desmontar a cena aqui deixaria seis textos
     empilhados ao lado de uma única imagem — incoerente. O que incomoda
     quem tem distúrbio vestibular é o movimento contínuo, não a troca. */
  .fala { transform: none; }

  /* Os cards de "O problema" aparecem prontos — sem espera por scroll. */
  .troca {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .troca--visivel { animation: none; }

  /* O hero também aparece pronto — sem esperar document.fonts.ready. */
  .js .hero__texto > *,
  .js .hero__imagem {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Os cartões de "Como funciona" idem — só que aqui `transform: none`
     apagaria também o translateX(-50%) de centralização (permanente,
     não é da animação), então ele fica. */
  .trilho__cartao {
    opacity: 1;
    transform: translateX(-50%);
    transition: none;
  }
  .trilho__cartao--visivel { animation: none; }
  /* O hover do passo continua acontecendo, mas sem percurso — igual aos
     botões, que já se comportavam assim aqui. */
  .trilho__marca,
  .trilho__numero { transition: none; }

  /* Os cards de "Segurança" aparecem prontos. */
  .cartoes li { opacity: 1; transition: none; }
  .cartoes li.cartao--visivel { animation: none; }

  /* O botão flutuante aparece e some sem deslizar. */
  .flutuante,
  .flutuante--escondido { transition: none; transform: none; }

  /* Os 3 passos da demonstração idem. */
  .demo__passo { opacity: 1; transition: none; }
  .demo__passo.demo--visivel { animation: none; }

  /* A faixa escura aparece com o conteúdo pronto. A TROCA dos passos
     segue funcionando sem deslize, como o bloco do `.fala` acima. */
  .produto__cabecalho,
  .cena__grade,
  .palco-coluna { opacity: 1; }
  .cena__palco--visivel .produto__cabecalho,
  .cena__palco--visivel .cena__grade,
  .cena__palco--visivel .palco-coluna { animation: none; }
}