/* Agência de Negócios — landing em teste (22/09/2026, noite, segunda versão).
   Exige brand/tokens.css, brand/movimento.css e brand/componentes.css, nessa
   ordem. Cor, fonte e raio vêm só de tokens. O que é novo aqui é composição de
   página e a régua própria da primeira tela, liberada pelo Mike em 22/09/2026:
   a cena pode passar do teto de 500 ms e abrir em azul inteiro. O resto segue
   a régua do design system. Valores próprios desta página ficam em :root,
   com o motivo ao lado. */

:root {
  --lateral: 16px;                        /* respiro da tela no celular */
  --largura: 1180px;
  --raio-balao: 28px 28px 28px 6px;       /* o balão da marca em escala de cena: canto de baixo à esquerda quase reto */
  --raio-balao-g: 44px 44px 44px 10px;
  --raio-eu: 16px 16px 4px 16px;          /* a fala da pessoa: o mesmo balão, espelhado */
  --mov-cena: cubic-bezier(.2, .8, .2, 1);  /* chega rápido e assenta devagar, sem passar do ponto */
  --mov-troca: cubic-bezier(.4, 0, .2, 1);  /* o que atravessa a tela e volta */
  --dur-cena: 640ms;                      /* régua própria da primeira tela */
  --dur-abrir: 540ms;                     /* a conversa crescendo a partir do toque */
  --dur-fechar: 400ms;
}
@media (min-width: 768px) { :root { --lateral: 32px; } }
@media (min-width: 1024px) { :root { --lateral: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { touch-action: manipulation; }
/* Segurar o dedo num botão não pode selecionar o texto dele. */
button, .an-botao, .barra { -webkit-user-select: none; user-select: none; }

.dentro { width: 100%; max-width: var(--largura); margin: 0 auto; padding-inline: var(--lateral); }

.rotulo {
  font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase; color: var(--cor-tinta-media);
}
.rotulo--sobre-cobalto { color: var(--cor-sobre-cobalto-apoio); }
.rotulo--resultado { color: var(--cor-resultado-rotulo); }

/* O grifo coral: sublinhado desenhado à mão, que se escreve depois da frase. */
.grifo { font-style: normal; position: relative; white-space: nowrap; }
.grifo::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .2em;
  background: var(--cor-coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-5 60-6 98-4s70 3 98-2' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c30-5 60-6 98-4s70 3 98-2' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 0 50%;
}

/* ---- topo ---------------------------------------------------------------- */
.topo { position: relative; z-index: 5; }
.topo__dentro { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.topo__marca { display: block; padding: 7px 0; border-radius: var(--raio-xs); }
.topo__marca .an-marca { height: 30px; width: auto; }

.pular {
  position: fixed; top: 0; left: 50%; z-index: 90; transform: translate(-50%, -110%);
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  font: 700 1rem/1 var(--fonte-display); text-decoration: none;
  padding: 14px 22px; border-radius: 0 0 var(--raio-md) var(--raio-md);
  transition: transform var(--dur-curta-saida) var(--mov-saida);
}
.pular:focus-visible { transform: translate(-50%, 0); transition: transform var(--dur-curta) var(--mov-entrada);
  outline: 2px solid var(--cor-sobre-cobalto); outline-offset: -6px; }

/* =========================================================================
   A PRIMEIRA TELA · O RETRATO
   ========================================================================= */
.cena--retrato { padding-bottom: 8px; }
.palco { --sobra: 52px; position: relative; padding-top: var(--sobra); }
.palco__balao {
  position: relative; isolation: isolate;
  min-height: 296px; padding: 22px 18px 20px;
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  border-radius: var(--raio-balao);
}
.palco__texto { position: relative; z-index: 2; width: 53%; display: flex; flex-direction: column; gap: 12px; }
.palco__titulo {
  margin: 0; font: 700 1.875rem/1.05 var(--fonte-display); letter-spacing: -0.035em;
  text-wrap: balance; hyphens: none;
}
.palco__apoio { margin: 0; font: 400 .9375rem/1.45 var(--fonte-texto); color: var(--cor-sobre-cobalto-apoio); max-width: 24ch; }
/* A pessoa sai de dentro do balão: a figura é mais alta que ele e só o que
   está acima da borda escapa. Embaixo, o canto acompanha o balão; à esquerda,
   o braço some num degradê em vez de ser cortado por uma linha. */
.palco__pessoa {
  position: absolute; z-index: 1; right: 0; bottom: 0; margin: 0;
  width: 56%; height: calc(100% + var(--sobra));
  clip-path: inset(0 0 0 0 round 0 0 28px 0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20%);
  pointer-events: none;
}
.palco__pessoa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 44% 0; }
.palco__etiqueta {
  position: absolute; z-index: 3; right: 10px; bottom: 10px; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px 9px; max-width: 44%;
  background: var(--cor-superficie-elevada); color: var(--cor-tinta-forte);
  border-radius: 12px 12px 12px 4px; box-shadow: var(--sombra-2);
}
/* Letra de 15 px no mínimo (o CRECI em 14, na letra de máquina, que lê como 15).
   Com a letra do celular aumentada, o CRECI quebra entre "CRECI-MG" e o número em
   vez de ser cortado na borda (25/09/2026). */
.palco__etiqueta strong { font: 600 1rem/1.25 var(--fonte-texto); }
.palco__etiqueta span { font: 400 .9375rem/1.35 var(--fonte-texto); color: var(--cor-tinta-media); }
.palco__etiqueta .palco__creci { font: 400 .875rem/1.35 var(--fonte-mono); color: var(--cor-tinta-media); }
.palco__etiqueta .palco__creci span { font: inherit; color: inherit; }
/* A foto é de outra pessoa até a do Ricardo chegar, e a página diz isso, na
   própria etiqueta: embaixo do texto, com a letra grande, ela encavalava. */

/* ---- as respostas da primeira tela ---------------------------------------- */
.comecar { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.comecar__grupo { display: none; flex-direction: column; gap: 12px; }
.comecar__grupo--quero { display: flex; }
[data-porta-quero] .comecar__grupo--quero { display: none; }
[data-porta-quero] .comecar__grupo--situacao { display: flex; }
[data-porta-quero][data-porta-situacao] .comecar__grupo--situacao { display: none; }
[data-porta-quero][data-porta-situacao] .comecar__grupo--onde { display: flex; }
.comecar__pergunta { margin: 0; font: 700 1.25rem/1.2 var(--fonte-display); letter-spacing: var(--tracking-subtitulo); }
.respostas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.respostas--longas { grid-template-columns: 1fr; }
/* Número ímpar em duas colunas: a última ocupa a linha inteira, em vez de deixar um buraco ao
   lado (o "Onde fica?" ficou com três quando o Norte de Minas saiu, 03/10/2026). A partir de
   640 px são três colunas, e ela volta ao lugar dela. */
.respostas > .resposta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.resposta {
  position: relative; isolation: isolate; display: flex; align-items: center; min-height: 58px; margin: 0;
  padding: 10px 14px; text-align: left; cursor: pointer;
  font: 600 .9375rem/1.25 var(--fonte-texto); color: var(--cor-cobalto);
  background: var(--cor-superficie-elevada); border: 1.5px solid var(--cor-cobalto);
  border-radius: var(--raio-eu);
  transform-origin: 100% 100%;
  transition: transform var(--dur-toque) var(--mov-entrada), outline-color var(--dur-toque) var(--mov-toque);
}
.respostas--longas .resposta { min-height: 52px; }
.resposta:active { transform: scale(.97); transition-duration: var(--dur-toque-saida); transition-timing-function: var(--mov-saida); }

/* A demão (25/09/2026): o véu do mouse em cima, o azul de marcado e o texto
   claro são camadas que acendem por cima do botão, em vez de a cor mudar.
   Cor que muda obriga o navegador a redesenhar, e no Mac isso derruba para 30
   quadros tudo o que se mexe junto (a conversa abrindo logo depois do toque;
   ver docs/decisoes.md). O texto claro é uma cópia do rótulo, no mesmo lugar
   (conversa.js, demao). */
.resposta::before, .opcao::before, .resposta::after, .opcao::after {
  content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-toque) var(--mov-toque);
}
.resposta::before, .opcao::before { background: var(--cor-cobalto-veu); }
.resposta::after, .opcao::after { background: var(--cor-cobalto-superficie); }
.demao__claro {
  position: absolute; inset: 0; padding: inherit; display: flex; align-items: center;
  color: var(--cor-sobre-cobalto); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-toque) var(--mov-toque);
}
@media (hover: hover) { .resposta:hover::before, .opcao:hover::before { opacity: 1; } }
.opcao[aria-pressed="true"]::before { opacity: 1; }
.resposta[aria-pressed="true"]::after, .resposta[aria-pressed="true"] .demao__claro,
.opcao--escolhida::after, .opcao--escolhida .demao__claro { opacity: 1; }
.direto {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px;
  font: 400 .9375rem/1.3 var(--fonte-texto); color: var(--cor-tinta-media);
  text-decoration: underline; text-decoration-color: var(--cor-borda-vazia); text-underline-offset: 4px;
  border-radius: var(--raio-xs);
  transition: color var(--dur-toque) var(--mov-toque), text-decoration-color var(--dur-toque) var(--mov-toque);
}
.direto .an-icone { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .direto:hover { color: var(--cor-cobalto); text-decoration-color: currentColor; } }

/* Tela baixa (a janela do Instagram tem uns 620 px; o Android comum, 640): o
   balão e o respiro encolhem para a pergunta e as seis respostas caberem na
   primeira tela, sem rolar (25/09/2026: antes, duas ficavam embaixo da dobra). */
@media (max-height: 700px) and (max-width: 639px) {
  .palco { --sobra: 44px; }
  .palco__balao { min-height: 252px; padding-bottom: 16px; }
  .comecar { margin-top: 14px; }
  .resposta { min-height: 54px; padding-block: 8px; }
}

/* ---- entrada da primeira tela (régua própria) ------------------------------
   O balão cresce do canto reto, a pessoa sobe de dentro dele, o título entra
   palavra por palavra, o grifo se escreve, e as respostas chegam por último.
   Só acontece quando o JS assumiu: sem ele, a cena está simplesmente lá. */
.js-movimento .cena--retrato:not(.cena--pronta) .palco__balao,
.js-movimento .cena--retrato:not(.cena--pronta) .palco__pessoa img,
.js-movimento .cena--retrato:not(.cena--pronta) .palco__apoio,
.js-movimento .cena--retrato:not(.cena--pronta) .palco__etiqueta,
.js-movimento .cena--retrato:not(.cena--pronta) .comecar__pergunta,
.js-movimento .cena--retrato:not(.cena--pronta) .resposta,
.js-movimento .cena--retrato:not(.cena--pronta) .direto { opacity: 0; }
.js-movimento .cena--retrato:not(.cena--pronta) .palco__balao { transform: scale(.92); }
.js-movimento .cena--retrato:not(.cena--pronta) .palco__pessoa img { transform: translateY(40px); }
.js-movimento .cena--retrato:not(.cena--pronta) .palco__etiqueta { transform: translateY(8px) scale(.96); }
.js-movimento .cena--retrato:not(.cena--pronta) .resposta { transform: translateY(12px); }
.js-movimento .cena--retrato:not(.cena--pronta) .palco__titulo .palavra > span { transform: translateY(105%); }
.js-movimento .cena--retrato:not(.cena--pronta) .grifo::after { transform: scaleX(0); }
.js-movimento .cena--retrato:not(.cena--pronta) .comecar__pergunta { transform: translateY(8px); }

.js-movimento .cena--retrato:not(.cena--pronta) .palco__titulo:not([data-dividido]) { opacity: 0; }
.palco__titulo .palavra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.palco__titulo .palavra > span { display: inline-block; }
.cena--retrato .palco__balao { transform-origin: 0 100%; transition: transform var(--dur-cena) var(--mov-cena), opacity 320ms var(--mov-entrada); }
.cena--retrato .palco__pessoa img { transition: transform 760ms var(--mov-cena) 140ms, opacity 420ms var(--mov-entrada) 140ms; }
.cena--retrato .palco__titulo .palavra > span { transition: transform 620ms var(--mov-cena); transition-delay: calc(120ms + var(--p, 0) * 45ms); }
.cena--retrato .grifo::after { transition: transform 520ms var(--mov-cena) 620ms; }
.cena--retrato .palco__apoio { transition: opacity 420ms var(--mov-entrada) 360ms; }
.cena--retrato .palco__etiqueta { transition: opacity 320ms var(--mov-entrada) 520ms, transform 420ms var(--mov-cena) 520ms; }
.cena--retrato .comecar__pergunta { transition: opacity 320ms var(--mov-entrada) 560ms, transform 420ms var(--mov-cena) 560ms; }
.cena--retrato .resposta { transition: opacity 320ms var(--mov-entrada) calc(600ms + var(--i, 0) * 45ms),
                                      transform 460ms var(--mov-cena) calc(600ms + var(--i, 0) * 45ms),
                                      outline-color var(--dur-toque) var(--mov-toque); }
.cena--retrato .direto { transition: opacity 320ms var(--mov-entrada) 880ms, color var(--dur-toque) var(--mov-toque); }
/* Depois da entrada, as esperas saem: o toque tem de responder na hora. */
.cena--assentada .resposta { transition: transform var(--dur-toque) var(--mov-entrada), outline-color var(--dur-toque) var(--mov-toque); }
.cena--assentada .resposta:active { transform: scale(.97); transition-duration: var(--dur-toque-saida); }

/* ---- o letreiro ------------------------------------------------------------
   Duas cópias do trilho em fila: andar metade da largura volta ao começo sem
   emenda. Parar sob o dedo, o mouse ou o foco. Em movimento reduzido, parado
   e quebrando linha. */
.letreiro { position: relative; }
.letreiro__linha {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.letreiro__trilho {
  display: flex; width: max-content;
  animation: letreiro-esq var(--duracao, 48s) linear infinite;
}
.letreiro__linha[data-sentido="dir"] .letreiro__trilho { animation-name: letreiro-dir; }
.letreiro--parado .letreiro__trilho, .letreiro:hover .letreiro__trilho, .letreiro:focus-within .letreiro__trilho { animation-play-state: paused; }
@keyframes letreiro-esq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes letreiro-dir { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.letreiro__frase {
  flex: none; display: inline-flex; align-items: center; gap: 18px; margin: 0; padding: 6px 18px 6px 0; min-height: 44px;
  background: none; border: 0; cursor: pointer; white-space: nowrap; text-align: left;
  font: 700 1.75rem/1.1 var(--fonte-display); letter-spacing: -0.03em; color: inherit;
  border-radius: var(--raio-sm);
  transition: color var(--dur-toque) var(--mov-toque), opacity var(--dur-toque) var(--mov-toque), transform var(--dur-toque) var(--mov-entrada);
}
/* separador: um balãozinho da marca entre as frases */
.letreiro__frase::after {
  content: ""; flex: none; width: 12px; height: 10px; border-radius: 5px 5px 5px 1px;
  background: var(--cor-coral); opacity: .9;
}
.letreiro__frase:active { transform: scale(.98); }
.letreiro__frase:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (hover: hover) { .letreiro--secao .letreiro__frase:hover { color: var(--cor-cobalto); } }
.letreiro--secao { display: flex; flex-direction: column; gap: 4px; margin-inline: calc(var(--lateral) * -1); }
.letreiro--secao .letreiro__frase { color: var(--cor-tinta-forte); }
.letreiro--secao .letreiro__linha + .letreiro__linha .letreiro__frase { color: var(--cor-tinta-suave); }
.letreiro__frase.tocada { color: var(--cor-coral) !important; }

/* =========================================================================
   O CORPO DA PÁGINA
   ========================================================================= */
.corpo { display: flex; flex-direction: column; gap: 80px; padding-top: 64px; padding-bottom: 96px; }
.secao { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 24px; }
.secao__cabeca { display: flex; flex-direction: column; gap: 12px; }
.secao__titulo {
  margin: 0; font: 700 1.875rem/1.08 var(--fonte-display); letter-spacing: -0.032em;
  max-width: 20ch; text-wrap: balance;
}
.secao__texto { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: 58ch; }

/* revelação de seção: sobe 16 px e assenta, uma vez */
.js-movimento [data-revelar] { opacity: 0; transform: translateY(16px);
  transition: opacity 520ms var(--mov-entrada), transform 700ms var(--mov-cena); }
.js-movimento [data-revelar].visivel { opacity: 1; transform: none; }

/* ---- os três papéis ------------------------------------------------------ */
.papeis { display: flex; flex-direction: column; gap: 16px; }
.abas {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-self: flex-start;
  padding: 4px; width: 100%; max-width: 420px;
  background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline); border-radius: var(--raio-pilula);
}
.abas__marca {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--w, 0px);
  transform: translateX(var(--x, 4px)); background: var(--cor-cobalto-superficie); border-radius: var(--raio-pilula);
  transition: transform 380ms var(--mov-cena);
}
.abas__aba {
  position: relative; z-index: 1; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 600 .9375rem/1 var(--fonte-texto); color: var(--cor-tinta-media); border-radius: var(--raio-pilula);
  outline: var(--anel-foco); outline-color: transparent; outline-offset: 2px;
  transition: outline-color var(--dur-toque) var(--mov-toque);
}
/* o rótulo claro da aba escolhida é a demão (ver "a demão"), que acende enquanto a marca desliza */
.abas__aba .demao__claro { justify-content: center; transition-duration: 220ms; }
.abas__aba[aria-selected="true"] .demao__claro { opacity: 1; }
.abas__aba:focus-visible { outline-color: var(--cor-cobalto); }
.papeis__corpo {
  display: grid; gap: 16px; padding: 20px;
  background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline);
  border-radius: 24px 24px 24px 6px; box-shadow: var(--sombra-1);
}
.papeis__desenho { position: relative; width: 100%; max-width: 260px; aspect-ratio: 240 / 200; justify-self: center; }
.doc { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(.95); transform-origin: 50% 80%;
  transition: opacity 240ms var(--mov-saida), transform 300ms var(--mov-saida); }
.doc.ativo { opacity: 1; transform: none; transition: opacity 320ms var(--mov-entrada) 80ms, transform 520ms var(--mov-cena) 80ms; }
.doc > svg { display: block; width: 100%; height: 100%; }
.doc__folha { fill: var(--cor-superficie-papel); stroke: var(--cor-borda-vazia); stroke-width: 1.5; }
.doc__linha { fill: var(--cor-tinta-forte); }
.doc__linha--fraca { fill: var(--cor-borda-vazia); }
.doc__linha--clara { fill: var(--cor-sobre-cobalto); }
.doc__faixa { fill: var(--cor-cobalto-superficie); }
.doc__assinatura { fill: none; stroke: var(--cor-cobalto); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.doc__cartao { fill: var(--cor-superficie-papel); stroke: var(--cor-borda-vazia); stroke-width: 1.5; }
.doc__cartao-topo { fill: var(--cor-cobalto-superficie); }
/* O que se mexe mora fora do desenho, em peças que só se movem (dentro de um
   SVG, qualquer movimento obriga a redesenhar; 25/09/2026): a assinatura se
   revela por uma cortina da cor do papel que encolhe para a direita, como a
   caneta andando; o selo e o "ok" crescem, e o traço de dentro chega depois.
   Quando o papel sai, cortina e selo voltam ao começo sem ninguém ver. */
.doc__cortina, .doc__selo { position: absolute; }
.doc__cortina { background: var(--cor-superficie-papel); transform-origin: 100% 50%; transition: transform 0s 320ms; }
.doc.ativo .doc__cortina { transform: scaleX(0); transition: transform 700ms var(--mov-cena) 260ms; }
.doc.ativo .doc__cortina--2 { transition-delay: 520ms; }
.doc__selo { display: grid; border-radius: 50%; background: var(--cor-coral-veu); border: 3px solid var(--cor-coral);
  opacity: 0; transform: scale(.6); transition: opacity 0s 320ms, transform 0s 320ms; }
.doc__selo svg { width: 100%; height: 100%; fill: none; stroke: var(--cor-coral); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.5); transition: opacity 0s 320ms, transform 0s 320ms; }
.doc__selo--ok { background: var(--cor-resolvido); border: 0; }
.doc__selo--ok svg { stroke: var(--cor-sobre-semantico); }
.doc.ativo .doc__selo { opacity: 1; transform: none; transition: transform 420ms var(--mov-cena) 300ms, opacity 200ms var(--mov-entrada) 300ms; }
.doc.ativo .doc__selo svg { opacity: 1; transform: none; transition: transform 360ms var(--mov-cena) 560ms, opacity 160ms var(--mov-entrada) 560ms; }

.papeis__textos { display: grid; }
.papeis__painel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(8px); visibility: hidden;
  transition: opacity 200ms var(--mov-saida), transform 240ms var(--mov-saida), visibility 0s 240ms; }
.papeis__painel.ativo { opacity: 1; transform: none; visibility: visible;
  transition: opacity 320ms var(--mov-entrada) 80ms, transform 460ms var(--mov-cena) 80ms, visibility 0s; }
.papeis__nome { margin: 0; font: 700 1.25rem/1.2 var(--fonte-display); letter-spacing: var(--tracking-subtitulo); }
.papeis__painel p { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); max-width: 52ch; }
.papeis__marcas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.papeis__marcas li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border-radius: var(--raio-pilula); font: 600 .875rem/1 var(--fonte-texto); }
.papeis__marcas .sim { background: var(--cor-resultado-fundo); color: var(--cor-resultado-rotulo); }
.papeis__marcas .nao { background: var(--cor-problema-fundo); color: var(--cor-problema-rotulo); }
.papeis__marcas .sim::before { content: "✓"; }
.papeis__marcas .nao::before { content: "✕"; font-size: .8em; }
.papeis__fecho { margin: 0; font: var(--texto-corpo); color: var(--cor-tinta-media); }
/* Link no meio da frase: o respiro vertical aumenta o alvo do dedo para 45 px
   sem mexer na linha (a margem negativa devolve o espaço). */
.link-conversa {
  display: inline-block; padding: 9px 0; margin: -9px 0; border: 0; background: none; cursor: pointer;
  font: 600 1.0625rem/1.6 var(--fonte-texto); color: var(--cor-cobalto);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  border-radius: var(--raio-xs); outline: var(--anel-foco); outline-color: transparent; outline-offset: 2px;
  transition: color var(--dur-toque) var(--mov-toque), outline-color var(--dur-toque) var(--mov-toque);
}
.link-conversa:focus-visible { outline-color: var(--cor-cobalto); }
@media (hover: hover) { .link-conversa:hover { color: var(--cor-cobalto-tinta-hover); } }

/* ---- a nota: sai da impressora quando aparece ------------------------------ */
.nota { position: relative; max-width: 520px; width: 100%; padding: 6px 12px 32px; overflow: hidden; }
.nota::before { /* a boca da impressora */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 12px;
  background: var(--cor-tinta-forte); border-radius: var(--raio-pilula);
}
.nota__papel {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px;
  padding: 28px 20px 34px; background: var(--cor-superficie-elevada); color: var(--cor-tinta-forte);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  filter: drop-shadow(0 10px 18px rgba(20, 24, 36, .12));
}
.nota__topo { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px dashed var(--cor-borda-vazia);
  font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-tinta-media); }
.nota__grupo { display: flex; flex-direction: column; gap: 10px; }
.nota__rotulo { font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; }
.nota__rotulo--meu { color: var(--cor-caminho-rotulo); }
.nota__rotulo--outros { color: var(--cor-problema-rotulo); }
.nota ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nota li { display: flex; align-items: baseline; gap: 8px; font: 400 .9375rem/1.35 var(--fonte-texto); }
.nota li span { flex: 0 1 auto; }
.nota li i { flex: 1 1 24px; min-width: 16px; border-bottom: 2px dotted var(--cor-borda-vazia); transform: translateY(-4px); }
.nota li b { flex: none; font: 600 .8125rem/1.2 var(--fonte-mono); color: var(--cor-tinta-media); }
.nota__rodape { margin: 0; padding-top: 12px; border-top: 1.5px dashed var(--cor-borda-vazia); font: 600 .9375rem/1.4 var(--fonte-texto); }
/* A nota desce da boca da impressora. As linhas chegam depois do papel. */
.js-movimento .secao--custo:not(.visivel) .nota__papel { transform: translateY(-101%); }
.secao--custo .nota__papel { transition: transform 1400ms cubic-bezier(.3, .6, .2, 1) 200ms; }
.js-movimento .secao--custo:not(.visivel) .nota li,
.js-movimento .secao--custo:not(.visivel) .nota__rotulo,
.js-movimento .secao--custo:not(.visivel) .nota__rodape { opacity: 0; }
.secao--custo .nota li, .secao--custo .nota__rotulo, .secao--custo .nota__rodape { transition: opacity 360ms var(--mov-entrada) calc(500ms + var(--i, 0) * 70ms); }

/* ---- andamento: o exemplo de conversa --------------------------------------- */
.exemplo {
  margin: 0; width: 100%; max-width: 420px; display: flex; flex-direction: column;
  background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline);
  border-radius: 28px; overflow: hidden; box-shadow: var(--sombra-2);
}
.exemplo__topo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cor-borda-hairline); }
.exemplo__quem { display: flex; flex-direction: column; gap: 2px; }
.exemplo__quem strong { font: 600 .9375rem/1.2 var(--fonte-texto); }
.exemplo__quem span { font: 400 .8125rem/1.3 var(--fonte-texto); color: var(--cor-tinta-suave); }
.exemplo__fio { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 420px; background: var(--cor-superficie-papel); }
.exemplo__msg {
  position: relative; align-self: flex-start; max-width: 86%; margin: 0; padding: 10px 14px 24px;
  background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline);
  border-radius: 16px 16px 16px 4px; font: 400 .9375rem/1.45 var(--fonte-texto); color: var(--cor-tinta-forte);
  transform-origin: 0 100%;
}
.exemplo__msg b { font-weight: 600; }
.exemplo__msg time { position: absolute; right: 12px; bottom: 5px; font: 400 .8125rem/1 var(--fonte-mono); color: var(--cor-tinta-suave); }
.exemplo__msg--eu { align-self: flex-end; background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); border-color: transparent; border-radius: var(--raio-eu); transform-origin: 100% 100%; }
.exemplo__msg--eu time { color: var(--cor-sobre-cobalto-tenue); }
.exemplo__msg--foto { display: flex; flex-direction: column; gap: 8px; }
.exemplo__foto { position: relative; display: block; width: 176px; height: 112px; border-radius: 10px; background: var(--cor-cobalto-veu); overflow: hidden; }
.exemplo__foto i { position: absolute; left: 22px; right: 40px; height: 6px; border-radius: 3px; background: var(--cor-borda-vazia); }
.exemplo__foto i:nth-child(1) { top: 22px; right: 70px; background: var(--cor-cobalto); }
.exemplo__foto i:nth-child(2) { top: 40px; }
.exemplo__foto i:nth-child(3) { top: 54px; right: 56px; }
.exemplo__foto i:nth-child(4) { top: 80px; left: 110px; right: 22px; height: 18px; border-radius: 9px; background: var(--cor-coral); opacity: .75; }
.js-movimento .exemplo__msg:not(.chegou) { opacity: 0; transform: scale(.94) translateY(6px); }
.exemplo__msg { transition: opacity 280ms var(--mov-entrada), transform 420ms var(--mov-cena); }
.exemplo__repetir {
  align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 4px 0 8px; padding: 0 14px;
  background: none; border: 0; border-radius: var(--raio-pilula); cursor: pointer;
  font: 600 .875rem/1 var(--fonte-texto); color: var(--cor-tinta-media);
  transition: color var(--dur-toque) var(--mov-toque), opacity 260ms var(--mov-entrada), transform 360ms var(--mov-cena), outline-color var(--dur-toque) var(--mov-toque);
}
@media (hover: hover) { .exemplo__repetir:hover { color: var(--cor-cobalto); } }
.exemplo:not(.terminou) .exemplo__repetir { opacity: 0; transform: translateY(4px); pointer-events: none; }

/* ---- prefeitura ---------------------------------------------------------- */
.aviso-gratis {
  display: flex; flex-direction: column; gap: 12px; padding: 28px 22px;
  background: var(--cor-resultado-fundo); color: var(--cor-resultado-texto); border-radius: var(--raio-balao);
}
.aviso-gratis .secao__titulo { color: var(--cor-resultado-texto); }
.aviso-gratis p { margin: 0; font: var(--texto-corpo); max-width: 58ch; }
.aviso-gratis strong { font-weight: 600; }

/* ---- o dado ------------------------------------------------------------- */
.dado-grande {
  display: flex; flex-direction: column; gap: 14px; padding: 28px 22px;
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); border-radius: var(--raio-balao);
}
.dado-grande__topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.dado-grande__numero { margin: 0; font: 700 3.75rem/.92 var(--fonte-display); letter-spacing: -0.045em; }
.pontos { display: grid; grid-template-columns: repeat(10, 14px); gap: 7px; padding-bottom: 6px; }
/* Cada ponto cheio é um disco coral que cresce por cima do contorno (disco
   que cresce, em vez de a cor mudar: 25/09/2026). */
.pontos i { position: relative; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--cor-sobre-cobalto-tenue); }
.pontos i.cheio::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--cor-coral);
  transition: opacity 240ms var(--mov-entrada) var(--atraso, 0ms), transform 320ms var(--mov-cena) var(--atraso, 0ms); }
.js-movimento [data-revelar]:not(.visivel) .pontos i.cheio::after { opacity: 0; transform: scale(.4); }
.dado-grande__texto { margin: 0; font: 400 1.25rem/1.4 var(--fonte-texto); color: var(--cor-sobre-cobalto-apoio); max-width: 34ch; }
.dado-grande__fonte { margin: 0; font: var(--texto-tecnico); color: var(--cor-sobre-cobalto-tenue); }

/* Link no meio da resposta: o respiro de cima e de baixo leva o alvo do dedo a
   44 px sem mexer na linha (em elemento de linha, ele não empurra nada). */
.link-faq { padding-block: 11px; color: var(--cor-cobalto); text-underline-offset: 3px; text-decoration-thickness: 1.5px; border-radius: var(--raio-xs); }
@media (hover: hover) { .link-faq:hover { color: var(--cor-cobalto-tinta-hover); } }

/* ---- chamada final --------------------------------------------------------- */
.final {
  display: flex; flex-direction: column; gap: 24px; padding: 36px 22px;
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); border-radius: var(--raio-balao);
}
.final__cabeca { display: flex; flex-direction: column; gap: 12px; }
.final__titulo { margin: 0; font: 700 2.5rem/1.02 var(--fonte-display); letter-spacing: -0.04em; max-width: 12ch; }
.final__titulo span { display: block; color: var(--cor-sobre-cobalto-tenue); }
.final__acoes { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.final__botao { background: var(--cor-coral); color: var(--cor-sobre-coral); }
@media (hover: hover) { .final__botao:hover { background: var(--cor-coral); filter: brightness(1.06); } }
.final__botao:focus-visible { outline-color: var(--cor-sobre-cobalto); }
.final__direto { align-self: center; min-height: 44px; display: inline-flex; align-items: center;
  font: 400 .9375rem/1.3 var(--fonte-texto); color: var(--cor-sobre-cobalto-apoio); text-underline-offset: 4px; border-radius: var(--raio-xs); }
.final__direto:focus-visible { outline-color: var(--cor-sobre-cobalto); }

.rodape { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.rodape__apoio { color: var(--cor-rodape-apoio); }
.rodape__privacidade { color: var(--cor-rodape-link); text-underline-offset: 3px; }

/* ---- avatar -------------------------------------------------------------- */
.avatar { display: block; flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--cor-cobalto-superficie); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar--pequeno { width: 40px; height: 40px; }
.avatar--barra { width: 44px; height: 44px; }

/* =========================================================================
   A BARRA DO RICARDO
   ========================================================================= */
.barra {
  position: fixed; z-index: 40;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 8px;
  background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline);
  border-radius: var(--raio-pilula); box-shadow: var(--sombra-3);
  transform-origin: 50% 100%;
  opacity: 0; translate: 0 12px; scale: .96; pointer-events: none;
  transition: opacity var(--dur-media-saida) var(--mov-saida), translate var(--dur-media-saida) var(--mov-saida), scale var(--dur-media-saida) var(--mov-saida);
}
.barra--visivel { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto;
  transition: opacity var(--dur-media) var(--mov-entrada), translate 420ms var(--mov-cena), scale 420ms var(--mov-cena); }
.barra__quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.barra__quem strong { font: 600 .9375rem/1.2 var(--fonte-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__quem span { font: 400 .8125rem/1.2 var(--fonte-mono); color: var(--cor-tinta-media); white-space: nowrap; }
.barra__acao { flex: none; max-width: 10.5rem; }
@media (max-width: 374px) {
  .barra { gap: 8px; }
  .barra .avatar--barra { width: 40px; height: 40px; }
  .barra__acao { padding: 0 var(--e-3); max-width: 9.25rem; }
  .barra__quem strong { font-size: .875rem; }
}

/* =========================================================================
   A CONVERSA
   ========================================================================= */
.painel { position: fixed; inset: 0; z-index: 60; }
/* A caixa é a moldura que cresce do toque: o script a leva do retângulo
   tocado até o lugar dela só com transform (translate e escala), e o miolo
   desfaz a escala por dentro, parado no lugar final: a janela cresce em volta
   da conversa. A tinta, por cima do papel, é a cor do que foi tocado, e
   esmaece. Nada disso obriga o navegador a redesenhar (o recorte animado de
   antes derrubava o Mac para 30 quadros; ver docs/decisoes.md, 25/09/2026). */
.painel__fundo { position: absolute; inset: 0; background: rgba(14, 17, 25, .42); opacity: 0; transition: opacity 320ms var(--mov-entrada); }
.painel--aberto .painel__fundo { opacity: 1; }
.painel--fechando .painel__fundo { opacity: 0; transition: opacity 300ms var(--mov-saida); }
.painel__caixa {
  position: absolute; inset: 0; overflow: hidden; transform-origin: 0 0;
  background: var(--cor-superficie-papel); color: var(--cor-tinta-forte);
  outline: none; pointer-events: auto;
}
.painel__tinta { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
.painel__miolo { position: absolute; inset: 0; display: flex; flex-direction: column; transform-origin: 0 0; }
.painel__topo {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 14px 16px;
  background: var(--cor-superficie-papel);
}
.painel__topo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--cor-borda-hairline);
  opacity: 0; transition: opacity 200ms var(--mov-toque); }
.painel__caixa.rolou .painel__topo::after { opacity: 1; }
.painel__quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.painel__quem strong { font: 600 1rem/1.2 var(--fonte-texto); }
.painel__quem span { font: 400 .8125rem/1.25 var(--fonte-mono); color: var(--cor-tinta-media); }
.sem-quebra { white-space: nowrap; }
.painel__fechar {
  margin-left: auto; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border-radius: 50%; background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline); color: var(--cor-tinta-forte);
  transition: background-color var(--dur-toque) var(--mov-toque), transform var(--dur-toque) var(--mov-entrada), outline-color var(--dur-toque) var(--mov-toque);
}
.painel__fechar:active { transform: scale(.94); }
@media (hover: hover) { .painel__fechar:hover { background: var(--cor-cobalto-veu); } }
.painel__progresso { position: absolute; left: 16px; right: 16px; bottom: -1px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.painel__progresso i { position: relative; height: 3px; border-radius: 2px; background: var(--cor-borda-hairline); overflow: hidden; }
.painel__progresso i::after { content: ""; position: absolute; inset: 0; background: var(--cor-cobalto-superficie);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--mov-cena); }
.painel__progresso i.feito::after { transform: scaleX(1); }
.painel__rolagem { position: relative; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.fio { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }


/* ---- falas ---------------------------------------------------------------- */
.fala {
  max-width: min(86%, 30rem); margin: 0; padding: 12px 16px;
  font: 400 1.0625rem/1.45 var(--fonte-texto); border-radius: 18px 18px 18px 4px;
  transform-origin: 0 100%;
  transition: opacity 260ms var(--mov-entrada), transform 420ms var(--mov-cena);
}
.fala p { margin: 0; }
.fala p + p { margin-top: 8px; }
.fala--ricardo { align-self: flex-start; background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline); color: var(--cor-tinta-forte); box-shadow: var(--sombra-1); }
.fala--ricardo + .fala--ricardo { margin-top: -2px; }
.fala--pergunta { font-weight: 600; }
/* A fala da pessoa tem o desenho exato da opção que ela tocou (mesmo
   respiro, mesma entrelinha): a troca de uma pela outra não mexe um pixel. */
.fala--eu {
  align-self: flex-end; background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto);
  border: 1.5px solid var(--cor-cobalto-superficie); border-radius: 18px 18px 4px 18px; transform-origin: 100% 100%;
  padding: 10px 14px; font-weight: 600; line-height: 1.3;
}
.fala a { color: inherit; text-underline-offset: 3px; }
.entra { opacity: 0 !important; transform: scale(.94) !important; }
.entra--sobe { opacity: 0 !important; transform: translateY(10px) !important; }

.turno-eu { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; max-width: 86%; margin-top: 2px; }
.turno-eu .fala--eu { max-width: 100%; }
.trocar {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 4px; margin: 0; border: 0; background: none; cursor: pointer;
  font: 400 .875rem/1 var(--fonte-texto); color: var(--cor-tinta-suave); text-decoration: underline; text-underline-offset: 3px;
  border-radius: var(--raio-xs); position: relative; outline: var(--anel-foco); outline-color: transparent;
  transition: color var(--dur-toque) var(--mov-toque), opacity 260ms var(--mov-entrada), outline-color var(--dur-toque) var(--mov-toque);
}
.trocar::before { content: ""; position: absolute; inset: -4px -8px; } /* alvo de 44 */
.trocar:focus-visible { outline-color: var(--cor-cobalto); }
@media (hover: hover) { .trocar:hover { color: var(--cor-cobalto); } }

/* Opções compactas (44 px, a medida "compacto" do design system): as sete
   da situação cabem na tela junto com a resposta do Ricardo e a pergunta. */
.opcoes { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; margin-top: 2px; }
.opcao {
  position: relative; isolation: isolate;
  max-width: 86%; min-height: 44px; margin: 6px 0 0; padding: 10px 14px; cursor: pointer; text-align: left;
  font: 600 1.0625rem/1.3 var(--fonte-texto); color: var(--cor-cobalto);
  background: var(--cor-superficie-elevada); border: 1.5px solid var(--cor-cobalto); border-radius: 18px 18px 4px 18px;
  transform-origin: 100% 100%;
  outline: var(--anel-foco); outline-color: transparent; outline-offset: 2px;
  transition: transform 420ms var(--mov-cena), opacity 260ms var(--mov-entrada), outline-color var(--dur-toque) var(--mov-toque);
}
.opcao:first-child { margin-top: 0; }
.opcao:focus-visible { outline-color: var(--cor-cobalto); }
.opcao:active { transform: scale(.97); transition-duration: var(--dur-toque-saida), 260ms, 120ms; }

/* ---- a ficha do caso ------------------------------------------------------ */
.ficha {
  align-self: stretch; margin: 4px 0; overflow: hidden;
  background: var(--cor-superficie-elevada); border: 1px solid var(--cor-borda-hairline);
  border-radius: 22px 22px 22px 4px; box-shadow: var(--sombra-2); transform-origin: 0 100%;
  transition: opacity 320ms var(--mov-entrada), transform 520ms var(--mov-cena);
}
.ficha__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px;
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); }
.ficha__rotulo { font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }
.ficha__topo small { font: 400 .8125rem/1.2 var(--fonte-texto); color: var(--cor-sobre-cobalto-apoio); text-align: right; }
.ficha__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 0; padding: 16px; border-bottom: 1.5px dashed var(--cor-borda-hairline); }
.ficha__campos div { min-width: 0; }
.ficha__campos dt { font: 600 .8125rem/1.2 var(--fonte-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cor-tinta-suave); }
.ficha__campos dd { margin: 4px 0 0; font: 600 1rem/1.3 var(--fonte-texto); color: var(--cor-tinta-forte); }
.ficha__caminho { padding: 16px 16px 8px; }
.ficha__caminho .ficha__rotulo { color: var(--cor-tinta-media); }
.trilha { position: relative; list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.trilha::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--cor-cobalto-veu);
  transform-origin: 50% 0; transition: transform 700ms var(--mov-cena) 200ms; }
.trilha li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start;
  transition: opacity 280ms var(--mov-entrada) var(--atraso, 0ms), transform 460ms var(--mov-cena) var(--atraso, 0ms); }
.trilha__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cor-cobalto-superficie); color: var(--cor-sobre-cobalto); font: 700 .875rem/1 var(--fonte-display); }
.trilha__t { display: block; font: 600 .9375rem/1.3 var(--fonte-texto); padding-top: 4px; }
.trilha__q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; font: 400 .875rem/1.35 var(--fonte-texto); color: var(--cor-tinta-media); }
.trilha__q .an-badge { min-height: 24px; font-size: .8125rem; }
.ficha__nota { margin: 0; padding: 8px 16px 16px; font: 400 .875rem/1.45 var(--fonte-texto); color: var(--cor-tinta-media); }
.ficha.entra .trilha::before { transform: scaleY(0); }
.ficha.entra .trilha li { opacity: 0; transform: translateX(-6px); }
.ficha.entra .ficha__campos dd { opacity: 0; }
.ficha__campos dd { transition: opacity 280ms var(--mov-entrada) var(--atraso, 0ms); }

/* ---- a mensagem montada --------------------------------------------------- */
/* O balão cresce uma linha de cada vez, como quem escreve, e o texto de cada
   linha chega deslizando 6 px da esquerda. O fundo do balão são três peças
   (o topo com os cantos de cima, o meio que estica, o pé com os cantos de
   baixo, que desce): o balão cresce só com transform (conversa.js,
   crescerBalao). Antes cada linha crescia de altura, e isso obrigava o
   navegador a refazer a página a cada quadro (25/09/2026). */
.fala--mensagem { position: relative; isolation: isolate; font-weight: 400; line-height: 1.45; padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; max-width: min(92%, 30rem);
  background: transparent; border-color: transparent; }
.msg__fundo { position: absolute; inset: -1.5px; z-index: -1; pointer-events: none; }
.msg__fundo i { position: absolute; left: 0; right: 0; background: var(--cor-cobalto-superficie); }
.msg__cima { top: 0; height: 18px; border-radius: 18px 18px 0 0; }
.msg__meio { top: 17px; bottom: 17px; transform-origin: 50% 0; }
.msg__pe { bottom: 0; height: 18px; border-radius: 0 0 4px 18px; }
.fala--mensagem .linha { display: block; transition: opacity 220ms var(--mov-entrada) 40ms, translate 320ms var(--mov-entrada) 40ms; }
.fala--mensagem .linha--vazia { height: 8px; }
.fala--mensagem .linha.espera { opacity: 0; translate: -6px 0; }
.cta { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
  transition: opacity 320ms var(--mov-entrada), transform 520ms var(--mov-cena); }
.cta .an-botao { width: 100%; }
.cta__nota { margin: 0; text-align: center; font: 400 .875rem/1.45 var(--fonte-texto); color: var(--cor-tinta-media); }
.cta__recomecar { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 400 .875rem/1 var(--fonte-texto); color: var(--cor-tinta-suave); text-decoration: underline; text-underline-offset: 3px;
  border-radius: var(--raio-xs); outline: var(--anel-foco); outline-color: transparent; transition: color var(--dur-toque) var(--mov-toque), outline-color var(--dur-toque) var(--mov-toque); }
.cta__recomecar:focus-visible { outline-color: var(--cor-cobalto); }
@media (hover: hover) { .cta__recomecar:hover { color: var(--cor-cobalto); } }

/* =========================================================================
   TABLET E MESA
   ========================================================================= */
@media (min-width: 640px) {
  .palco { --sobra: 64px; }
  .palco__balao { min-height: 360px; padding: 32px 32px 28px; }
  .palco__titulo { font-size: 2.75rem; }
  .palco__apoio { font-size: 1.0625rem; max-width: 28ch; }
  .palco__pessoa { width: 52%; }
  .respostas { grid-template-columns: repeat(3, 1fr); }
  .respostas > .resposta:last-child:nth-child(odd) { grid-column: auto; }
  .respostas--longas { grid-template-columns: 1fr 1fr; }
  .letreiro__frase { font-size: 2.25rem; }
  .secao__titulo { font-size: 2.5rem; }
  .final { padding: 48px 40px; }
  .final__titulo { font-size: 3.5rem; }
  .final__acoes { flex-direction: row; align-items: center; gap: 20px; }
  .final__direto { align-self: auto; }
  .dado-grande { padding: 40px; }
  .dado-grande__numero { font-size: 5.5rem; }
  .aviso-gratis { padding: 40px; }
}
@media (min-width: 900px) {
  /* A conversa vira um painel do lado direito, crescendo a partir do toque. */
  .painel__caixa { inset: 16px 16px 16px auto; width: 460px; border-radius: 24px; box-shadow: var(--sombra-3); }
  .painel__topo { padding-top: 14px; }
  .fio { padding-bottom: 28px; }
  /* A barra vira um convite pequeno, no canto. */
  .barra { left: auto; right: 24px; bottom: 24px; padding: 8px 8px 8px 8px; }
  .barra__acao { max-width: none; }
}
@media (min-width: 1024px) {
  .topo__dentro { min-height: 76px; }
  .topo__marca .an-marca { height: 34px; }
  .palco { --sobra: 72px; }
  .palco__balao { min-height: 440px; padding: 56px 56px 48px; border-radius: var(--raio-balao-g); }
  .palco__texto { width: 56%; gap: 22px; }
  .palco__titulo { font-size: clamp(3.75rem, 6vw, 5.25rem); line-height: 1; letter-spacing: -0.045em; }
  .palco__apoio { font-size: 1.25rem; max-width: 30ch; }
  .palco__pessoa { right: 4%; width: 44%;
    clip-path: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
  .palco__etiqueta { right: 40px; bottom: 36px; max-width: none; padding: 12px 16px 13px; }
  .palco__etiqueta strong { font-size: 1.0625rem; }
  .comecar { margin-top: 28px; }
  .comecar__pergunta { font-size: 1.5rem; }
  .respostas { grid-template-columns: repeat(6, 1fr); }
  .respostas--longas { grid-template-columns: repeat(4, 1fr); }
  .resposta { min-height: 68px; padding: 12px 16px; font-size: 1rem; }

  .corpo { gap: 120px; padding-top: 96px; }
  .secao__titulo { font-size: 3rem; }
  .letreiro--secao .letreiro__frase { font-size: 3rem; }
  .secao--papeis .papeis__corpo { grid-template-columns: 300px 1fr; align-items: center; gap: 40px; padding: 40px; }
  .secao--papeis .papeis__desenho { max-width: 300px; }
  .secao--custo, .secao--andamento { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; }
  .secao--custo .secao__cabeca, .secao--andamento .secao__cabeca { position: sticky; top: 96px; }
  .secao--andamento .exemplo, .secao--custo .nota { justify-self: end; }
  .final { padding: 72px 64px; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .final__titulo { font-size: 5rem; }
  .final__acoes { flex-direction: column; align-items: stretch; }
  .rodape { padding-bottom: 32px; }
}

/* =========================================================================
   MOVIMENTO REDUZIDO
   Nada de viagem, de letreiro andando nem de impressora: tudo aparece por
   opacidade curta. O letreiro fica parado, quebrando linha.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .letreiro__trilho { animation: none !important; flex-wrap: wrap; width: auto; row-gap: 4px; }
  .letreiro__linha { -webkit-mask-image: none; mask-image: none; }
  .letreiro__frase[aria-hidden="true"] { display: none; }
  .letreiro--secao { margin-inline: 0; }
  /* a frase encolhe até a linha e quebra (sem isso cada uma ficava do tamanho
     dela inteira, e a linha cortava o fim) */
  .letreiro__frase { white-space: normal; flex: 0 1 auto; max-width: 100%; gap: 14px; }
  /* parada, uma frase por linha: o balãozinho vira o marcador na frente dela
     (no fim, quando a frase quebrava, ele ia parar longe, na borda) */
  .letreiro__frase::after { order: -1; align-self: flex-start; margin-top: .4em; }
  .js-movimento .secao--custo:not(.visivel) .nota__papel { transform: none; }
  .cena--retrato .palco__titulo .palavra > span, .cena--retrato .resposta { transition-delay: 0ms !important; }
  /* os papéis: a assinatura já está lá, e o selo só acende */
  .doc__cortina { display: none; }
  .doc__selo, .doc__selo svg { transform: none !important; }
  .pontos i.cheio::after { transform: none !important; }
}