/* ==========================================================================
   VERSAO A — O RASTRO
   Movimento-assinatura desta pagina: o rastro cresce com a rolagem,
   nunca se apaga, e no pico se recompõe em cinco campos — vira contrato.
   ========================================================================== */

/* ---------- o rastro ---------- */

.rastro-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* vetor: os 5 segmentos do rastro, desenhados no pico */
.rastro-vetorial {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.rastro-vetorial[data-visivel="1"] { opacity: 1; }

/* a haste do rastro é grossa e tem brilho: no pico é a única coisa que
   se move, então precisa ser visível de longe, não um fio de 1px */
.rastro-vetorial path {
  fill: none;
  stroke: var(--rastro-forte);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(78, 70, 245, 0.5));
}

.rastro-vetorial circle {
  fill: var(--navy);
  stroke: var(--rastro-forte);
  stroke-width: 3;
  filter: drop-shadow(0 0 7px rgba(78, 70, 245, 0.55));
}

.rastro-vetorial .is-ativo circle {
  fill: var(--acento);
  stroke: var(--acento);
  r: 7;
}

.rastro-vetorial .is-ativo path { stroke: var(--acento); }

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--branco);
  color: var(--tinta);
  padding: 12px 20px;
  font: 500 15px/1 var(--fonte-texto);
}

.pular:focus {
  left: var(--e3);
  top: var(--e3);
}

/* todo conteúdo senta acima do rastro */
/* o topo é fixo (base.css) e acompanha a cor do fundo; só main e o
   rodapé precisam subir na pilha */
main, .rodape { position: relative; z-index: 3; }

main > .cena { isolation: isolate; }

/* ---------- CENA 0 · abertura ---------- */

.abertura {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--e7) var(--e6);
}

.abertura__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
  gap: var(--e6);
  align-items: end;
}

.abertura__titulo {
  margin-top: var(--e3);
  max-width: 15ch;
  text-wrap: balance;
}

.abertura__sub {
  margin-top: var(--e4);
  max-width: 46ch;
}

.abertura__atores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--rastro);
}

.ator-chip {
  font-family: var(--fonte-rotulo);
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--tinta-no-fundo);
  padding: 7px 14px;
  border: 1px solid var(--rastro-forte);
  border-radius: 999px;
}

.principio {
  padding: var(--e4) 0 0 var(--e4);
  border-left: 1px solid var(--acento);
}

.principio__texto {
  margin: var(--e3) 0 0;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--tinta-no-fundo);
  text-wrap: pretty;
}

.principio__texto em {
  font-style: normal;
  color: var(--acento-no-escuro);
}

.abertura__marca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--e4);
  display: flex;
  justify-content: center;
  opacity: 0.55;
}

/* ---------- CENA 1 · caos ---------- */

.caos {
  padding-block: var(--e7);
}

.caos__cabecalho {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
  margin-bottom: var(--e6);
}

.caos__nuvem {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e3);
  min-height: 44vh;
}

.fragmento {
  padding: var(--e3);
  background: rgba(244, 247, 254, 0.035);
  border: 1px solid var(--rastro);
  border-radius: 3px;
  will-change: transform;
}

.fragmento__id {
  font-family: var(--fonte-rotulo);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--acento-suave);
}

.fragmento__titulo {
  font-size: var(--t-md);
  margin-top: var(--e3);
  line-height: 1.12;
}

.fragmento__texto {
  margin-top: var(--e2);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta-no-fundo-suave);
}

.caos__fecho {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--rastro);
  max-width: 68ch;
}

.caos__fecho-texto {
  display: block;
  font-size: var(--t-leitura);
  color: var(--tinta-no-fundo);
}

/* ---------- CENA 2 · a virada (fundo claro) ---------- */

.rotulo--escuro { color: var(--tinta-suave); }
.rotulo--fraco { color: #6f7b90; }
.corpo--escuro { color: var(--tinta-suave); }
.corpo-tinta { color: var(--tinta); }

.virada__cabecalho {
  max-width: 72ch;
  margin-bottom: var(--e6);
}

.virada__titulo {
  margin-top: var(--e3);
  font-size: var(--t-pico);
  max-width: 20ch;
  color: var(--tinta);
}

.virada__titulo .destaque {
  display: block;
  color: var(--acento);
}

.virada__cabecalho .corpo { margin-top: var(--e3); }

/* comparativo */
.comparativo {
  border-top: 2px solid var(--tinta);
}

.comparativo__cabecalho,
.comparativo__linha {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e3);
  padding-block: var(--e3);
  align-items: start;
}

.comparativo__cabecalho { padding-top: var(--e2); }

.comparativo__linha {
  border-top: 1px solid #d5dded;
}

.comparativo__linha:last-child { border-bottom: 1px solid #d5dded; }

.comparativo__area {
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--tinta);
}

.comparativo__antes,
.comparativo__depois {
  font-size: var(--t-base);
  line-height: 1.5;
  max-width: 42ch;
}

.comparativo__antes {
  color: #8b97ac;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: #b9c3d4;
  transition: opacity 0.5s var(--transicao);
}

.comparativo__depois {
  color: var(--tinta);
  position: relative;
  padding-left: var(--e3);
}

.comparativo__depois::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 9px;
  height: 9px;
  background: var(--acento);
  border-radius: 50%;
}

.comparativo__linha[data-organizada="1"] .comparativo__antes { opacity: 0.34; }

/* ---------- CENA 3 · atores ---------- */

.atores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e3);
}

.ator {
  position: relative;
  padding: var(--e4) var(--e3) var(--e3);
  background: var(--branco);
  border: 1px solid #dde4f2;
  border-radius: 3px;
  padding-top: var(--e5);
}

.ator__marca {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  width: 28px;
  height: 3px;
  background: var(--acento);
  border-radius: 2px;
}

.ator:nth-child(2) .ator__marca { background: #6f68f8; }
.ator:nth-child(3) .ator__marca { background: var(--dado); }
.ator:nth-child(4) .ator__marca { background: var(--tinta); }

.ator__nome {
  font-size: var(--t-md);
  /* o cartão é branco o tempo todo — a cor não pode herdar do corpo,
     que muda com a cena dominante (no fim da cena dos atores ele fica
     claro e o nome sumia no cartão) */
  color: var(--tinta);
}

.ator__papel {
  margin-top: var(--e2);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* ---------- CENA 3b · passos (cena fixa, reagindo a --progresso) ---------- */

.passos { margin-top: var(--e6); }

.passos__palco {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e5);
  padding-block: var(--e6);
}

.passos__titulo {
  margin-top: var(--e3);
  font-size: var(--t-lg);
  max-width: 24ch;
}

/* régua: o traço que anda enquanto a pessoa rola */
.passos__régua {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(244, 247, 254, 0.1);
}

.passos__régua-progresso {
  position: absolute;
  inset: 0;
  background: var(--acento);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left center;
}

.passos__trilho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e3);
  width: 100%;
}

/* cada passo acende quando o progresso cruza sua fatia de 1/6.
   E, além de acender, o passo em foco GANHA CORPO: sobe, cresce e ganha
   um painel. É esse destaque grande que faz a rolagem pagar, em vez de
   só clarear seis blocos de texto de leve. Tudo em CSS puro. */
.passo {
  position: relative;
  padding: var(--e3) var(--e3) var(--e3) calc(var(--e3) + 3px);
  --ativado: clamp(0, calc((var(--progresso, 0) - var(--i) * 0.1667) * 7), 1);
  /* 0 antes da sua janela, 1 dentro dela, 0 depois — o passo "em foco" */
  --foco: clamp(0, calc(1 - (var(--progresso, 0) - 0.1 - var(--i) * 0.168) * 7), 1) *
          clamp(0, calc((var(--progresso, 0) - 0.04 - var(--i) * 0.168 - 0.1) * 7), 1);
  opacity: calc(0.3 + 0.7 * var(--ativado));
  transform: translateY(calc(-10px * var(--foco))) scale(calc(1 + 0.035 * var(--foco)));
  background: color-mix(in srgb, transparent, rgba(244, 247, 254, calc(0.07 * var(--foco))));
  border-left: 3px solid color-mix(in srgb, transparent, var(--acento) calc(var(--foco) * 100%));
}

.passo__ponto {
  position: absolute;
  top: var(--e3);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rastro-forte);
  transform: scale(calc(0.7 + 0.4 * var(--ativado)));
}

.passo[style*="--i"] .passo__ponto { background: color-mix(in srgb, var(--rastro-forte), var(--acento) calc(var(--ativado) * 100%)); }

.passo__id {
  font-family: var(--fonte-rotulo);
  font-size: var(--t-sm);
  color: color-mix(in srgb, var(--tinta-no-fundo-suave), var(--acento-no-escuro) calc(var(--ativado) * 100%));
}

.passo__nome {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: var(--e2);
  color: color-mix(in srgb, var(--tinta-no-fundo-suave), var(--tinta-no-fundo) calc(var(--ativado) * 100%));
}

.passo__texto {
  display: block;
  margin-top: var(--e2);
  font-size: var(--t-base);
  line-height: 1.45;
  color: color-mix(in srgb, #5d6d88, var(--tinta-no-fundo-suave) calc(var(--ativado) * 100%));
  max-width: 26ch;
}

/* o capítulo é o número gigante que troca a cada passo: é a mudança mais
   visível da cena, e é o que impede a rolagem de parecer parada */
.passos__capitulo {
  position: absolute;
  top: var(--e5);
  right: var(--e5);
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  margin: 0;
  pointer-events: none;
}

.passos__numero {
  font-family: var(--fonte-display);
  font-size: clamp(5rem, 16vw, 13rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acento);
}

.passos__de {
  font-size: var(--t-sm);
  color: var(--tinta-no-fundo-suave);
  letter-spacing: 0.08em;
}

/* a nota é o texto que "paga" a última fatia da rolagem da cena */
.passos__nota {
  font-size: var(--t-base);
  color: var(--tinta-no-fundo-suave);
  max-width: 62ch;
  padding-top: var(--e3);
  border-top: 1px solid var(--rastro);
  --nota: clamp(0, calc((var(--progresso, 0) - 0.6) * 3.4), 1);
  opacity: var(--nota);
  transform: translateY(calc(14px * (1 - var(--nota))));
}

.passos__nota strong {
  font-weight: 500;
  color: var(--tinta-no-fundo);
}

/* ---------- CENA 3c · vitrine (trilho horizontal) ---------- */

.vitrine__palco {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--e5);
  padding-block: var(--e6);
}

.vitrine__topo { max-width: 60ch; }

/* a contagem diz o que a rolagem está fazendo: ela é a "nota" da cena */
.vitrine__contagem {
  position: absolute;
  top: var(--e6);
  right: var(--e5);
  margin: 0;
  font-family: var(--fonte-rotulo);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  color: var(--tinta-no-fundo-suave);
  z-index: 2;
}

.vitrine__contagem-total { color: var(--rastro-forte); }

.vitrine__titulo {
  margin-top: var(--e3);
  font-size: var(--t-lg);
  line-height: 1.08;
}

.vitrine__faixa {
  gap: var(--e3);
  padding-inline: max(var(--e5), calc(50vw - 660px));
  will-change: transform;
}

.vitrine__tela {
  flex: 0 0 auto;
  width: min(560px, 78vw);
}

.vitrine__tela figcaption {
  font-size: 10px;
  padding: var(--e3) var(--e2) 10px;
}

/* ---------- CENA 4 · PICO — a confiança ---------- */

.pico__palco {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--e4);
  padding-block: var(--e5);
}

.pico__topo { max-width: 52ch; }

.pico__titulo {
  margin-top: var(--e3);
  font-size: var(--t-pico);
  color: var(--tinta-no-fundo);
}

.pico__corpo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--e5);
  align-items: center;
}

/* pilares: os três se revezam por --progresso, não por contagem de etapa.
   Cada um ocupa ~1/4 do progresso, e o número gigante é o que se vê
   mudando a cada rolagem — é ele que faz a cena pagar. */
.pilar {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 340px;
}

.pilar__item {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: var(--e2);
  margin: 0;
  /* a troca acontece na virada da fatia: o que sai some por inteiro
     antes do próximo nascer — dois textos no mesmo lugar, mesmo meio
     transparentes, viram letra sobre letra. O último não sai: ele fica
     até o fim da cena. */
  --p: calc((var(--progresso, 0) - var(--i) * 0.24) * 4.17);
  opacity: calc(
    clamp(0, calc(var(--p) * 9), 1) * clamp(0, calc((1 - var(--p)) * 9), 1)
  );
  transform: translateY(calc(26px * (1 - clamp(0, var(--p) * 8, 1))));
}

.pilar__item:last-child { opacity: clamp(0, calc(var(--p) * 9), 1); }

/* o número do pilar é o que a pessoa vê de longe mudando a cada rolagem:
   grande, à esquerda, e é ele que faz a cena pagar */
.pilar__id {
  font-family: var(--fonte-display);
  font-size: clamp(4rem, 9vw, 7.5rem);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--acento);
  margin-bottom: var(--e3);
}

.pilar__nome {
  font-size: var(--t-lg);
  color: var(--tinta-no-fundo);
}

.pilar__texto {
  font-size: var(--t-leitura);
  line-height: 1.5;
  color: var(--tinta-no-fundo-suave);
  max-width: 40ch;
}

/* o contrato — onde o rastro vira registro.
   Os campos acendem por --progresso (o JS cuida só do vetor que os liga). */
.contrato {
  position: relative;
  padding: var(--e4);
  border: 1px solid var(--rastro);
  border-radius: 4px;
  background: rgba(244, 247, 254, 0.03);
}

.contrato__rotulo { margin-bottom: var(--e3); }

.contrato__campos {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e3) var(--e4);
}

.campo {
  position: relative;
  padding-left: var(--e3);
  /* cada campo acende quando a haste do rastro passa por ele: a haste
     desce de 0.06 até 0.72 do progresso, e o campo j acende em 0.06+j*0.135 */
  --lido: clamp(0, calc((var(--progresso, 0) - 0.06 - var(--j) * 0.135) * 14), 1);
  opacity: calc(0.2 + 0.8 * var(--lido));
  /* o campo que a haste acabou de tocar desliza para o lugar: é esse
     movimento que a pessoa percebe ao rolar, não só a mudança de cor */
  transform: translateX(calc(-16px * (1 - var(--lido))));
}

.campo__valor {
  text-shadow: 0 0 calc(26px * var(--lido)) rgba(78, 70, 245, 0.55);
}

.campo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rastro-forte), var(--acento) calc(var(--lido) * 100%));
  box-shadow: 0 0 0 calc(4px * var(--lido)) var(--acento-veu);
}

.campo__rotulo {
  font-family: var(--fonte-rotulo);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-no-fundo-suave);
}

.campo__valor {
  margin: 6px 0 0;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--tinta-no-fundo);
}

.campo__legenda {
  display: block;
  margin-top: 4px;
  font-family: var(--fonte-texto);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta-no-fundo-suave);
}

.campo--nota {
  grid-column: 1 / -1;
  padding-top: var(--e2);
  border-top: 1px solid var(--rastro);
}

.campo--nota .campo__valor {
  font-size: var(--t-lg);
  color: var(--acento-no-escuro);
  font-variant-numeric: tabular-nums;
}

.contrato__assinatura {
  margin: var(--e4) 0 0;
  padding-top: var(--e3);
  border-top: 1px solid var(--rastro);
  opacity: clamp(0, calc((var(--progresso, 0) - 0.72) * 6), 1);
}

.contrato__assinatura .rotulo { color: var(--acento-no-escuro); }

.pico__lema {
  margin: 0;
  text-align: center;
  opacity: clamp(0, calc((var(--progresso, 0) - 0.86) * 7), 1);
}

.pico__lema-texto {
  display: inline-block;
  font-family: var(--fonte-display);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--tinta-no-fundo);
  max-width: 44ch;
}

/* ---------- CENA 5 · fechamento ---------- */

.fechamento__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--e6);
  align-items: start;
}

.fechamento__titulo {
  margin-top: var(--e3);
  font-size: var(--t-pico);
  color: var(--tinta);
  max-width: 14ch;
}

.fechamento__esq .corpo { margin-top: var(--e3); }

.botao--escuro {
  background: var(--tinta);
  color: var(--branco);
  margin-top: var(--e4);
}

.botao--escuro:hover,
.botao--escuro:focus-visible {
  background: var(--acento);
}

.fechamento__alternativa {
  margin-top: var(--e3);
  font-size: var(--t-base);
  color: var(--tinta-suave);
}

.fechamento__alternativa a { color: var(--tinta); }

.fechamento__sub {
  font-size: var(--t-md);
  color: var(--tinta);
  padding-bottom: var(--e3);
  border-bottom: 2px solid var(--tinta);
}

.resumo {
  list-style: none;
  counter-reset: resumo;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e3);
}

.resumo li {
  counter-increment: resumo;
  position: relative;
  padding-left: var(--e4);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta-suave);
}

.resumo li::before {
  content: counter(resumo, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.08em;
  font-family: var(--fonte-rotulo);
  font-size: var(--t-xs);
  color: var(--acento);
}

.resumo strong {
  font-weight: 500;
  color: var(--tinta);
}

/* rodapé no claro */
.rodape__missao {
  font-size: var(--t-base);
  color: var(--tinta-no-fundo-suave);
  max-width: 34ch;
}

.rodape__link {
  color: var(--tinta-no-fundo-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--rastro-forte);
  padding-bottom: 2px;
  transition: color 0.3s var(--transicao), border-color 0.3s var(--transicao);
}

.rodape__link:hover {
  color: var(--tinta-no-fundo);
  border-color: var(--acento);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* Telas baixas (celular deitado, notebook pequeno): o palco travado não
   tem altura para o pico. Aqui o pico vira uma peça compacta, e o que
   não couber sai do que é essencial em vez de ser cortado. */
@media (max-width: 1080px) {
  /* o pico NÃO vira uma coluna aqui: a cena é travada na altura da tela,
     e empilhar o pilar sobre o contrato dobra a altura dela. Duas colunas
     cabem em qualquer largura acima de 700px. */
  .pico__corpo { gap: var(--e4); }

  .pilar { min-height: 220px; }
  .passos__trilho { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--e4); }
}

@media (max-width: 900px) {
  .abertura__grade,
  .fechamento__grade {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
  }

  /* o pico é uma cena travada: o conteúdo precisa caber na altura da
     tela. O contrato volta a ter duas colunas e os números dos pilares
     encolhem, para o conjunto não passar da tela. */
  .contrato__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilar { min-height: 190px; }
  .pilar__id { font-size: clamp(2.6rem, 13vw, 4rem); margin-bottom: var(--e2); }
  .pico__titulo { font-size: var(--t-md); }

  .abertura__marca { display: none; }

  .caos__cabecalho { grid-template-columns: 1fr; }

  .comparativo__cabecalho { display: none; }

  .comparativo__linha {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
    padding-block: var(--e3);
  }

  .comparativo__antes,
  .comparativo__depois { max-width: none; }

  .abertura__titulo { max-width: 12ch; }
  .virada__titulo { max-width: none; }
  .fechamento__titulo { max-width: none; }

  .pico__lema { text-align: left; }
}

@media (max-width: 700px) {
  /* o palco é travado na altura da tela, então aqui cada bloco é
     medido: a soma tem que caber, senão o topo some por cima */
  .pico__palco { gap: var(--e2); padding-block: var(--e3); }
  /* em retrato o pilar e o contrato empilham: lado a lado o contrato
     ficava com colunas de 50px e os valores dos campos se atropelavam.
     (em paisagem, a consulta de altura de volta a pôr os dois de lado) */
  .pico__corpo { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  .pico__topo { gap: var(--e1); }
  .pico__titulo { margin-top: var(--e1); font-size: var(--t-md); }
  .pilar { min-height: 132px; }
  .pilar__texto { font-size: var(--t-sm); line-height: 1.25; }
  .contrato__campos { gap: var(--e1) var(--e3); }
  .campo__valor { font-size: var(--t-sm); }
  .campo--nota { padding-top: var(--e1); }
  .campo--nota .campo__valor { font-size: var(--t-md); }
  .contrato__assinatura { margin-top: var(--e2); padding-top: var(--e2); }
  .contrato__assinatura .rotulo { font-size: var(--t-xs); line-height: 1.25; }
  .pico__lema { font-size: var(--t-sm); line-height: 1.25; }
  .pico__lema-texto { display: inline; }
}

/* Retrato estreito: a tela é alta, mas estreita. O que não cabe não é
   decorativo — é o topo e o lema, que dizem o mesmo que o título. Eles
   saem para o pilar e o contrato terem espaço de verdade. */
@media (max-width: 480px) {
  .pico__palco { gap: var(--e1); padding-block: var(--e2); }
  .pico__topo .rotulo { display: none; }
  .pico__titulo { font-size: var(--t-base); }
  .pico__corpo { gap: var(--e1); }
  .pilar { min-height: 116px; }
  .pilar__id { font-size: 2.2rem; }
  .pilar__nome { font-size: var(--t-md); }
  .pilar__texto { font-size: var(--t-xs); line-height: 1.2; }
  .contrato__rotulo { font-size: 9px; }
  .campo__rotulo { font-size: 9px; }
  .campo__valor { font-size: var(--t-xs); }
  .campo--nota .campo__valor { font-size: var(--t-base); }
  .pico__lema { font-size: var(--t-xs); }
}

@media (max-width: 700px) {
  /* a cena travada não tem altura para o palco inteiro da versão larga:
     cada bloco é medido para a soma caber na tela. O palco vira coluna
     de cima a baixo, começa abaixo do cabeçalho fixo, e o número do
     capítulo deixa o canto direito — lá ele batia nos passos — e entra
     no fluxo, entre o título e a régua. */
  .passos__palco {
    justify-content: flex-start;
    gap: var(--e2);
    padding-block: var(--e5) var(--e3);
  }

  .passos__titulo {
    margin-top: var(--e1);
    font-size: var(--t-md);
    max-width: 24ch;
  }

  .passos__capitulo {
    position: static;
    gap: var(--e1);
  }

  .passos__numero { font-size: 3rem; }
  .passos__de { font-size: var(--t-xs); }

  .passos__trilho {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e1);
    row-gap: var(--e1);
  }

  .passo { padding: var(--e2) var(--e2) var(--e2) calc(var(--e2) + 3px); }
  .passo__id { font-size: var(--t-xs); }
  .passo__nome { margin-top: 2px; font-size: var(--t-base); }
  .passo__texto { margin-top: var(--e1); font-size: var(--t-xs); line-height: 1.3; max-width: none; }

  .passos__nota {
    margin-top: var(--e1);
    padding-top: var(--e2);
    font-size: var(--t-xs);
    line-height: 1.4;
  }

  .vitrine__tela { width: 84vw; }
  .caos__nuvem { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}

/* sem suporte a color-mix (navegador antigo): o estado final é o padrão,
   então a cena fica legível mesmo que a animação não rode */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .passo { opacity: 1; }
  .passo__nome { color: var(--tinta-no-fundo); }
  .passo__texto { color: var(--tinta-no-fundo-suave); }
  .passo__id { color: var(--tinta-no-fundo-suave); }
  .passos__nota { opacity: 1; transform: none; }
}

/* ==========================================================================
   MOVIMENTO REDUZIDO — a página inteira continua legível e parada.
   O motor já desliga as cenas fixas e as etapas; aqui o que é sob medida.
   ========================================================================== */


@media (max-height: 860px) and (min-width: 701px) {
  .pico__palco { gap: var(--e3); padding-block: var(--e4); }
  .pico__corpo { gap: var(--e4); }
  .pico__titulo { font-size: var(--t-md); }
  .pilar { min-height: 180px; }
  .pilar__id { font-size: clamp(2.6rem, 5vw, 4rem); margin-bottom: var(--e2); }
  .pico__lema { font-size: var(--t-sm); }
}

@media (max-height: 800px) and (min-width: 701px) {
  .pico__titulo { font-size: var(--t-base); }
  .pico__topo { gap: var(--e1); }
  .pilar { min-height: 150px; }
  .pilar__id { font-size: 2.4rem; }
  .pilar__texto { font-size: var(--t-sm); line-height: 1.3; }
  .campo__valor { font-size: var(--t-sm); }
  .contrato__campos { gap: var(--e1) var(--e3); }
  .contrato__assinatura { margin-top: var(--e2); padding-top: var(--e2); }
}

/* Tela baixa com largura de sobra (celular deitado, janela achatada):
   o problema não é o tamanho da fonte, é a coluna. Empilhado, o pico
   tem o dobro da altura da tela. Deitado, ele cabe lado a lado. */
@media (max-height: 700px) and (min-width: 480px) {
  .pico__corpo {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--e4);
  }

  /* com as duas colunas de lado, a largura sobra: os cinco campos do
     rastro cabem em três colunas e o contrato encurta */
  .contrato__campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .campo--nota { grid-column: auto; }
}

/* Tela muito baixa (celular deitado, janela achatada): o palco não tem
   altura para três blocos. O que fica é a comparação inteira — o pilar e
   o contrato lado a lado — que é o que o pico precisa mostrar. O topo e o
   lema saem; o texto deles continua no código e no leitor de tela. */
@media (max-height: 620px) {
  .pico__topo { display: none; }
  .pico__lema { display: none; }
  .pico__corpo { align-items: stretch; }
  .pico__palco { justify-content: center; gap: var(--e2); padding-block: var(--e2); }
  .pilar { min-height: 118px; }
  .pilar__id { font-size: 1.9rem; margin-bottom: 2px; }
  .pilar__nome { font-size: var(--t-base); }
  .pilar__texto { font-size: var(--t-xs); line-height: 1.22; }
  .contrato__rotulo { font-size: 9px; }
  .campo__rotulo { font-size: 9px; }
  .campo__valor { font-size: var(--t-xs); line-height: 1.15; }
  .campo--nota { padding-top: var(--e1); }
  .campo--nota .campo__valor { font-size: var(--t-base); }
  .contrato__assinatura { margin-top: var(--e1); padding-top: var(--e1); }
  .contrato__assinatura .rotulo { font-size: 9px; line-height: 1.2; }
  .pico__corpo { gap: var(--e2); }

  /* os passos travados têm o mesmo problema do pico em tela baixa:
     o palco inteiro não cabe. O título encolhe, o número fica pequeno
     no canto e os seis passos apertam o texto. */
  .passos__palco { gap: var(--e2); padding-block: var(--e2); }
  .passos__titulo { margin-top: 0; font-size: var(--t-base); }
  .passos__capitulo { top: var(--e2); right: var(--e2); }
  .passos__numero { font-size: 2.6rem; }
  .passo { padding: var(--e1) var(--e2); }
  .passo__nome { margin-top: 2px; font-size: var(--t-base); }
  .passo__texto { margin-top: 2px; font-size: var(--t-xs); line-height: 1.25; }
  .passos__nota { padding-top: var(--e1); font-size: var(--t-xs); line-height: 1.3; }
}

/* Celular deitado e estreito ao mesmo tempo (500x320, 568x320): sobra
   altura, falta largura. Os cinco campos do rastro encolhem para uma
   linha cada, e o rótulo de cada um sobe para dentro do valor. */
@media (max-height: 620px) and (max-width: 620px) {
  .contrato__campos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .campo { display: flex; align-items: baseline; gap: var(--e2); padding-left: var(--e2); }
  .campo__rotulo { flex: 0 0 auto; width: 6.5ch; }
  .campo__valor { margin-top: 0; }
  .campo--nota { display: block; }
  .campo--nota .campo__valor { display: inline; }
  .campo__legenda { display: inline; margin-left: 6px; }
  .pico__lema { display: none; }
}

/* Abaixo de 560px de largura E de altura não sobra canto: o pico vira só
   a comparação, com o texto do pilar reduzido ao essencial. */
@media (max-width: 540px) and (max-height: 400px) {
  .pico__palco { padding-block: 0; gap: 0; }
  .pico__corpo { gap: 0; }
  .pilar { min-height: 88px; }
  .pilar__id { font-size: 1.3rem; margin-bottom: 0; }
  .pilar__nome { font-size: var(--t-xs); }
  .pilar__texto { font-size: 9px; line-height: 1.1; }
  .contrato__rotulo { display: none; }
  .contrato__campos { gap: 1px; }
  .campo__rotulo { font-size: 8px; }
  .campo__valor { font-size: 9px; }
  .campo--nota .campo__valor { font-size: var(--t-xs); }
  .contrato__assinatura { margin-top: 1px; padding-top: 2px; }
  .contrato__assinatura .rotulo { font-size: 8px; }
  .pico__corpo { gap: 0; }
  .pilar { min-height: 80px; }
  .contrato__campos { gap: 0; }
  .campo { padding-left: 6px; }
}

/* o menor viewport que ainda é uso real: 320x568 deitado e 360x640 */
@media (max-height: 560px) and (min-width: 480px) {
  .pico__palco { padding-block: 0; }
  .pico__corpo { gap: 0; }
  .pilar { min-height: 96px; }
  .pilar__id { font-size: 1.6rem; }
  .pilar__nome { font-size: var(--t-sm); }
  .pilar__texto { font-size: 10px; line-height: 1.15; }
  .contrato__rotulo { font-size: 8px; }
  .campo__rotulo { font-size: 8px; }
  .campo__valor { font-size: 10px; }
  .campo--nota .campo__valor { font-size: var(--t-sm); }
  .contrato__campos { gap: 2px var(--e2); }
  .contrato__assinatura .rotulo { font-size: 8px; }
}

/* celular deitado ou muito baixo: o pico inteiro precisa caber em ~600px */
@media (max-width: 700px) and (max-height: 700px) {
  .pico__palco { gap: 0; padding-block: var(--e2); }
  .pico__corpo { gap: var(--e1); }
  .pico__topo { gap: 0; }
  .pico__titulo { font-size: var(--t-sm); }
  .pilar { min-height: 104px; }
  .pilar__id { font-size: 2rem; margin-bottom: var(--e1); }
  .pilar__nome { font-size: var(--t-base); }
  .pilar__texto { font-size: var(--t-xs); line-height: 1.25; }
  .campo__rotulo { font-size: 9px; }
  .campo__valor { font-size: var(--t-xs); }
  .campo--nota .campo__valor { font-size: var(--t-base); }
  .contrato__rotulo { font-size: 9px; }
  .contrato__assinatura { margin-top: var(--e1); padding-top: var(--e1); }
  .contrato__assinatura .rotulo { font-size: 9px; }
  .pico__lema { font-size: var(--t-xs); line-height: 1.25; }
}


.fx-reduzido .rastro-canvas,
.fx-reduzido .rastro-vetorial { display: none; }

.fx-reduzido .caos__nuvem { min-height: 0; }

/* as cenas reagem a --progresso, que não existe no modo reduzido:
   aqui o estado final de cada uma é escrito à mão */
.fx-reduzido .passo { opacity: 1; }
.fx-reduzido .passo__ponto { background: var(--acento); }
.fx-reduzido .passo__id,
.fx-reduzido .passo__nome { color: var(--tinta-no-fundo); }
.fx-reduzido .passo__texto { color: var(--tinta-no-fundo-suave); }
.fx-reduzido .passos__nota { display: block; opacity: 1; transform: none; }
.fx-reduzido .passos__régua-progresso { transform: scaleX(1); }

.fx-reduzido .pilar__item {
  position: static;
  opacity: 1;
  transform: none;
  margin-bottom: var(--e4);
}

.fx-reduzido .pilar { min-height: 0; }

.fx-reduzido .campo { opacity: 1; }
.fx-reduzido .campo::before { background: var(--acento); box-shadow: 0 0 0 4px var(--acento-veu); }
.fx-reduzido .contrato__assinatura { opacity: 1; }
.fx-reduzido .pico__lema { opacity: 1; }

.fx-reduzido .campo__valor { color: var(--tinta-no-fundo); }
.fx-reduzido .abertura__marca { display: none; }

/* sem trilho rolável, a faixa vira grade: as margens laterais que existiam
   só para o trilho passar passariam a estourar a tela */
.fx-reduzido .vitrine__faixa {
  padding-inline: 0;
  gap: var(--e3);
  justify-content: center;
}

.fx-reduzido .vitrine__tela { width: min(420px, 44vw); }
.fx-reduzido .vitrine__contagem { display: none; }