/* ═══════════════════════════════════════════════════════════════
   Sereno — v3

   Direção de arte extraída de duas referências salvas pelo Gabriel:
   · @angeldot_ — grade em bento, cartão de foto ao lado de cartão preto
     ao lado de cartão claro, rótulo minúsculo em versalete, e serifada
     itálica dentro da manchete em sans.
   · @marcelkargul (Minto) — herói dividido, um sólido e um fantasma.

   Disciplina de medida herdada da skill `landing-page-design`: escala de
   tipo do Tailwind, tabela de espaçamento, easing próprio.

   DIVERGE da skill em B1 (proíbe itálico e proíbe duas fontes). A
   referência faz as duas coisas, e é dela que veio o pedido.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --preto:  #000000;
  --n1:     #131209;   /* preto quente, da paleta escura da skill */
  --n2:     #181818;
  --n3:     #272727;
  --papel:  #ECE6DA;
  --papel2: #DED7C7;

  --tinta:        #FFFFFF;
  --tinta-fraca:  #9B9B9B;
  --tinta-apagada:#8A8A8A;
  --brasa:        #E8B473;
  --escuro:       #14171C;

  --e-50: 4px;  --e-75: 8px;   --e-100: 12px; --e-200: 16px;
  --e-300: 24px; --e-400: 32px; --e-500: 40px; --e-600: 48px;
  --e-700: 64px; --e-800: 80px; --e-900: 96px;

  /* ── curvas e durações de micro-interação ───────────────────────────
     Valores medidos em Linear, Stripe e Vercel, não estimados.
     --curva  painel, gaveta, assentamento (Linear e Vaul)
     --ui     padrão de interface, 150ms (Vercel)
     --tinta-curva  cor e fundo, 300ms (Stripe)
     --pop    confirmação pequena, 200ms, o único overshoot aceito aqui

     --saida existe por causa do detalhe assimétrico do Linear: o realce
     ENTRA em 0s e SAI em 150ms. Hover que demora a aparecer parece lento;
     o que demora a sair parece suave. Por isso a `transition` mora no
     estado normal e é o `:hover` que zera a duração — nunca o contrário. */
  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --ui: cubic-bezier(0.4, 0, 0.2, 1);
  --tinta-curva: cubic-bezier(0.25, 1, 0.5, 1);
  --pop: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --saida: 150ms;
  --raio: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--preto);
  color: var(--tinta);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* O acento editorial: serifada itálica no miolo da frase em sans.
   É o que a referência do @angeldot_ faz em toda manchete. */
em, .serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

.olho, .celula__olho {
  font-size: 12px; line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brasa);
}
.olho { margin-bottom: var(--e-200); }
.celula__olho { margin-bottom: var(--e-100); }

/* ──────────────────────────────────────────── botões ── */

.botao {
  position: relative;
  display: inline-block;
  padding: var(--e-100) var(--e-300);
  border-radius: 9999px;
  background: var(--tinta);
  color: var(--preto);
  font-size: 16px; line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  /* Nada de `transition: all`, e nada de `background` (a forma curta arrasta
     background-position junto). Cor na curva da Stripe, deslocamento na de
     interface. Estava em 700ms: resposta a clique tem de sair no quadro
     seguinte, e 700ms lia como página travada. */
  transition: background-color 300ms var(--tinta-curva), color 300ms var(--tinta-curva),
              transform var(--saida) var(--ui);
}
/* O brilho é pintado UMA vez aqui e só a opacidade anima. Sombra animada
   repinta a cada quadro; opacidade de pseudo vai para o compositor.
   Sem z-index: sombra externa não é desenhada sob o próprio botão, então
   ela nunca suja a face branca. */
.botao::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 8px 24px -6px rgba(232, 180, 115, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity var(--saida) var(--ui);
}
/* Peso de borda por sombra interna, nunca por border-width: largura de borda
   reflui a linha inteira e o botão dança. */
.botao--fantasma::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--tinta-fraca);
  opacity: 0; pointer-events: none;
  transition: opacity var(--saida) var(--ui);
}
/* Todo `:hover` mora dentro de `(hover: hover)`. Sem isso o realce gruda no
   toque: a pessoa toca no botão, toca no vazio, e o estado fica lá. */
@media (hover: hover) {
  .botao:hover { transition-duration: 0s; background-color: var(--brasa); transform: translateY(-1px); }
  .botao:hover::after, .botao--fantasma:hover::before { transition-duration: 0s; opacity: 1; }
  .botao--fantasma:hover { background-color: var(--n2); color: var(--tinta); }
}
.botao:active { transition-duration: 90ms; transform: scale(0.985); }
.botao:focus-visible { outline: 2px solid var(--brasa); outline-offset: 4px; }
.botao--pequeno { padding: var(--e-100) var(--e-200); font-size: 14px; line-height: 20px; min-height: 44px; }
.botao--grande { padding: var(--e-200) var(--e-500); }
.botao--fantasma { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--n3); }
.botao--fantasma::after { box-shadow: none; }

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

.ilha {
  position: fixed; inset: var(--e-300) 0 auto 0; z-index: 20; display: flex;
  transition: transform 500ms var(--curva), opacity 320ms var(--curva);
}
.ilha--fora { transform: translateY(-140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ilha { transition: none; } }
.ilha__pilula {
  margin: 0 auto; width: max-content; max-width: calc(100% - var(--e-400));
  /* gap de 8px: é a folga entre alvos de toque que fecha AA e AAA de uma vez,
     junto com os 44px de altura de cada item. */
  display: flex; align-items: center; gap: var(--e-75);
  padding: var(--e-75) var(--e-75) var(--e-75) var(--e-200);
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--n3);
  background: rgba(19, 18, 9, 0.72);
  backdrop-filter: blur(24px);
}
.ilha__pilula a { color: var(--tinta-fraca); text-decoration: none; font-size: 14px; line-height: 20px; }
.ilha__pilula a:not(.botao) {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--e-100);
  transition: color var(--saida) var(--tinta-curva);
}
/* Realce de item de menu: opacidade de um pseudo, não background do próprio
   elemento — assim o compositor resolve e nada repinta. */
.ilha__pilula a:not(.botao)::before {
  content: ''; position: absolute; inset: 2px 0; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.09);
  opacity: 0; pointer-events: none;
  transition: opacity var(--saida) var(--ui);
}
/* Marcador do item ativo: cresce por escala, na única curva com overshoot que
   passa aqui — confirmação pequena, 200ms. */
.ilha__pilula a:not(.botao)::after {
  content: ''; position: absolute; left: 50%; bottom: 6px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--brasa);
  transform: scale(0);
  transition: transform 200ms var(--pop);
}
.ilha__pilula a.ativo { color: var(--tinta); }
.ilha__pilula a.ativo::after { transform: scale(1); }
@media (hover: hover) {
  .ilha__pilula a:not(.botao):hover { transition-duration: 0s; color: var(--tinta); }
  .ilha__pilula a:not(.botao):hover::before { transition-duration: 0s; opacity: 1; }
}
.ilha__marca { color: var(--tinta) !important; font-weight: 600; }
.ilha__marca::after { content: none; }
.ilha__pilula .botao { color: var(--preto); }
@media (max-width: 820px) { .ilha__pilula a:not(.ilha__marca):not(.botao) { display: none; } }

/* ─────────────────────────────────── a cena (herói) ── */
/* O céu fica preso e o scroll comanda o tempo dele. Os quadros de texto
   passam por cima — passo 6 e passo 9 do método, no mesmo lugar. */

.faixa-larga, .grade, .tagline, .calendario, .passos-secao,
.duvidas-secao, .fecho, .rodape { max-width: 1440px; margin: 0 auto; }

.cena { position: relative; }

.cena__palco {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: #04060c;
}
.cena__palco canvas { display: block; width: 100%; height: 100%; }

.cena__quadros { position: relative; margin-top: -100svh; }

.cena__quadro {
  min-height: 100svh;
  display: grid; align-items: center;
  padding: var(--e-900) var(--e-800) var(--e-700);
  max-width: 1440px; margin: 0 auto;
}
.cena__texto {
  max-width: 640px;
  /* Sem tarja sobre a mídia: o céu já é escuro em cima, e a sombra do
     texto resolve o resto. */
  text-shadow: 0 2px 28px rgba(2, 4, 9, 0.9), 0 1px 4px rgba(2, 4, 9, 0.7);
}
.cena__quadro--direita .cena__texto { margin-left: auto; text-align: right; }
.cena__texto { will-change: opacity, transform; }

/* ── os textos param no centro; o conteúdo troca por baixo ──────────
   Antes, cada texto ficava centralizado no PRÓPRIO bloco de 100svh e os
   blocos rolavam. No cruzamento os dois centros estavam a meia tela do
   centro da janela — ou seja, nas duas bordas — e sobravam 800px de céu
   vazio no meio, com a opacidade somando 1 certinho. Era distância
   física, não curva.

   Só o céu estava preso. O método pede os dois:
   "o vídeo fica preso, o texto some e entram cards".

   Fica dentro de `no-preference` de propósito: com movimento reduzido as
   quatro opacidades vão a 1, e quatro textos no mesmo ponto viram sopa.
   Assim o layout empilhado de hoje continua valendo lá — mesma árvore,
   só CSS, como manda o CLAUDE.md. */
@media (prefers-reduced-motion: no-preference) {
  .cena { height: 400svh; }

  .cena__quadros {
    position: sticky; top: 0;
    height: 100svh;
    margin: -100svh auto 0;
    max-width: 1440px;
  }

  .cena__quadro {
    position: absolute; inset: 0;
    min-height: 0;
    max-width: none;
    margin: 0;
    /* O quadro é um div de tela inteira. Mesmo com o texto em
       `pointer-events: none`, era ELE que interceptava o clique e engolia o
       CTA. Quem recebe ponteiro é só o bloco de texto à frente, que o
       cena.js liga e desliga conforme a opacidade. */
    pointer-events: none;
  }
}
/* Sem `transition` na opacidade: o cena.js reescreve essa propriedade a cada
   quadro, então a transição nunca termina — só arrasta o valor pintado 300ms
   atrás da rolagem. Quem rolava em ritmo normal lia o último quadro a 31%. */

/* text-shadow é herdado. O que descola a manchete do céu vinha junto para
   dentro do botão e virava um borrão escuro atrás de letra preta sobre
   fundo branco. O botão tem contraste próprio e não precisa de sombra. */
.cena__texto .botao { text-shadow: none; }

@media (max-width: 900px) {
  /* A pílula flutuante come o título quando o texto fica centralizado numa
     tela estreita. Ancorando embaixo, o céu ocupa o alto e nada colide. */
  .cena__quadro {
    padding: var(--e-900) var(--e-400) var(--e-600);
    align-items: end;
  }
  .cena__quadro--direita .cena__texto { margin-left: 0; text-align: left; }
  .cena h1 { font-size: 32px; line-height: 36px; }
  .cena h2 { font-size: 28px; line-height: 34px; }
  .cena__sub, .cena__quadro p:not(.olho) { font-size: 16px; line-height: 24px; }
  .prova { margin-top: var(--e-400); }
}

.cena h1 { font-size: 60px; line-height: 1.02; }
.cena h1 em, .cena h2 em { color: var(--brasa); }
@media (max-width: 1200px) { .cena h1 { font-size: 48px; } }
@media (max-width: 640px)  { .cena h1 { font-size: 36px; line-height: 40px; } }
.cena h2 { font-size: 48px; line-height: 1.06; }
@media (max-width: 640px) { .cena h2 { font-size: 30px; line-height: 36px; } }

.cena__sub, .cena__quadro p:not(.olho) { margin-top: var(--e-300); font-size: 18px; line-height: 28px; color: rgba(236,236,236,0.86); }
.cena__acao { margin-top: var(--e-500); display: flex; flex-wrap: wrap; gap: var(--e-100); }

.prova {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-300);
  margin: var(--e-600) 0 0; padding-top: var(--e-300);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.prova div { min-width: 0; }
.prova dt { font-size: 12px; line-height: 16px; color: rgba(236,236,236,0.6); }
/* Dígito de largura fixa: o odômetro troca um algarismo por outro dentro de
   uma caixa recortada, e figura proporcional mudaria a largura da caixa no
   meio da rolagem. */
.prova dd { margin: var(--e-50) 0 0; font-size: 24px; line-height: 32px; color: var(--brasa); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .prova { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-300) var(--e-200); }
  .prova dd { font-size: 20px; line-height: 28px; }
}

/* ──────────────────────────────── tagline (B11) ── */

.tagline { padding: var(--e-600) var(--e-800) var(--e-700); }
@media (max-width: 1024px) { .tagline { padding: var(--e-700) var(--e-400); } }
.tagline__frase { max-width: 900px; margin: 0 auto; font-size: 48px; line-height: 1.08; font-weight: 600; text-align: center; }
@media (max-width: 640px) { .tagline__frase { font-size: 30px; line-height: 36px; } }
.tagline__frase .palavra { color: rgba(255,255,255,0.55); transition: color 700ms var(--curva); }
.tagline__frase .palavra.acesa { color: var(--tinta); }

/* ─────────────────────────────── grade em bento ── */

.grade, .calendario, .passos-secao, .duvidas-secao { padding: var(--e-600) var(--e-800) var(--e-700); }
@media (max-width: 1024px) { .grade, .calendario, .passos-secao, .duvidas-secao { padding: var(--e-700) var(--e-400); } }

.grade__cabeca, .calendario__cabeca { max-width: 720px; margin-bottom: var(--e-600); }
.grade h2, .calendario h2, .duvidas-secao h2, .passos-secao h2 { font-size: 36px; line-height: 42px; }
@media (max-width: 640px) { .grade h2, .calendario h2, .duvidas-secao h2, .passos-secao h2 { font-size: 30px; line-height: 36px; } }
h2 em { color: var(--brasa); }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(268px, auto); gap: var(--e-100); }
.celula--larga   { grid-column: span 2; }
.celula--alta    { grid-column: span 1; grid-row: span 2; }
.celula--clara   { grid-column: span 2; }
.celula--citacao { grid-column: span 4; }
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .celula--larga, .celula--clara, .celula--citacao { grid-column: span 2; }
  .celula--alta { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .celula, .celula--larga, .celula--clara, .celula--citacao, .celula--alta { grid-column: span 1; }
}

.celula {
  min-width: 0;
  border-radius: var(--raio);
  background: var(--n1);
  padding: var(--e-400);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  /* `translate`, e não `transform`: o mesmo cartão já usa `transform` para a
     entrada por rolagem, e `.js [data-sobe].dentro` tem especificidade maior
     que `.celula:hover` — o levantar simplesmente não acontecia, sem erro
     nenhum. As duas propriedades se somam em vez de disputar, e cada uma
     mantém a sua duração (800ms para entrar, 150ms para reagir). */
  transition: translate var(--saida) var(--ui);
}
/* O cartão sobe 3px e um elemento de dentro anda 3px de lado, 40ms depois.
   É o segundo movimento que dá vida — o cartão sozinho parece um bloco
   sendo empurrado. Nada de brilho no hover: é a marca registrada de bento
   de biblioteca. */
.celula .celula__olho, .celula--citacao cite {
  display: inline-block;
  transition: transform var(--saida) var(--ui) 40ms;
}
@media (hover: hover) {
  .celula:hover { transition-duration: 0s; translate: 0 -3px; }
  /* Aqui o truque assimétrico do Linear NÃO se aplica, e medir provou: com
     `transition-duration: 0s` o Chromium descarta o `transition-delay` junto e
     a mudança sai no quadro seguinte — 4ms, não 40ms. O segundo movimento
     saía junto com o primeiro e o cartão voltava a parecer um bloco empurrado.
     Entrada instantânea é para o realce; o movimento que arrasta precisa de
     duração para ser visto arrastando. */
  .celula:not(.celula--foto):hover .celula__olho,
  .celula--citacao:hover cite { transform: translateX(3px); }
}
.celula h3 { font-size: 24px; line-height: 30px; margin-bottom: var(--e-100); }
.celula h3 em { color: var(--brasa); }
.celula p { color: var(--tinta-fraca); font-size: 15px; line-height: 23px; }

/* Cartão de foto: o texto fica no alto, onde o céu é mais escuro.
   Sem tarja — o brilho do horizonte mora embaixo, longe da leitura. */
/* A foto vive numa camada própria para poder escalar 1,02 sem mexer no
   cartão. Fundo de CSS não se transforma; camada se transforma. O
   `overflow: hidden` do pai é o que faz a escala virar aproximação em vez de
   transbordo, e o `position: relative` é o que ancora a camada AQUI — sem
   ele, `inset: 0` procura o primeiro pai posicionado e a foto vai para
   outra seção. */
.celula--foto {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  min-height: 340px;
  justify-content: flex-start;
}
.celula--foto::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fundo) center / cover no-repeat;
  transform: scale(1);
  transition: transform 240ms var(--ui);
}
/* Conteúdo por cima da camada da foto: pseudo posicionado pinta depois de
   filho em fluxo, então sem isto o texto ficaria embaixo do céu. */
.celula--foto > * { position: relative; }
@media (hover: hover) {
  .celula--foto:hover::before { transform: scale(1.02); }
}
.celula--foto h3, .celula--foto p { text-shadow: 0 2px 24px rgba(0,0,0,0.85); }
.celula--foto p { max-width: 46ch; }
.celula--larga.celula--foto { min-height: 360px; }
.celula--alta.celula--foto { min-height: 100%; justify-content: flex-start; }
.celula--alta.celula--foto p { margin-top: auto; padding-top: var(--e-500); }

.celula--numero { justify-content: center; }
.celula .numerao {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 60px; line-height: 1; font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--brasa);
  margin-bottom: var(--e-200);
  font-variant-numeric: tabular-nums;
}
.celula .numerao span { font-size: 0.4em; margin-left: 0.1em; color: var(--tinta-apagada); }

/* O cartão claro é a quebra de ritmo da grade, como na referência. */
.celula--clara { background: var(--papel); color: var(--escuro); box-shadow: none; }
.celula--clara .celula__olho { color: #7A5A2E; }
.celula--clara p, .celula--clara li { color: rgba(20,23,28,0.7); }
.lista { display: grid; gap: var(--e-100); }
.lista li { position: relative; padding-left: var(--e-200); font-size: 15px; line-height: 23px; }
.lista li::before {
  content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: #7A5A2E;
  transform-origin: left center;
  transition: transform var(--saida) var(--ui);
}
/* Quem reage é o traço, não a linha de texto: texto que anda debaixo do
   ponteiro enquanto se lê uma lista de conferência é justamente a
   irritação que o cliente não quer. */
@media (hover: hover) {
  .lista li:hover::before { transition-duration: 0s; transform: scaleX(2); }
}

.celula--citacao { background: var(--n2); align-items: center; justify-content: center; text-align: center; padding: var(--e-500) var(--e-400); }
.celula--citacao blockquote { margin: 0; max-width: 900px; }
.celula--citacao blockquote p { font-size: 30px; line-height: 38px; color: var(--tinta); font-weight: 500; }
.celula--citacao em { color: var(--brasa); }
.celula--citacao footer { margin-top: var(--e-300); font-size: 14px; line-height: 20px; color: var(--tinta-apagada); }
.celula--citacao cite { font-style: normal; color: var(--tinta-fraca); }

/* ──────────────────────────────────────── calendário ── */

.calendario__linha { margin-top: var(--e-200); color: var(--tinta-fraca); font-size: 18px; line-height: 28px; }
.tabela-caixa { max-width: 1000px; border-radius: var(--raio); background: var(--n1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); padding: var(--e-400); }
.tabela-caixa table { width: 100%; border-collapse: collapse; text-align: left; }
.tabela-caixa th, .tabela-caixa td { padding: var(--e-200) var(--e-100); font-weight: 400; vertical-align: baseline; }
.tabela-caixa thead th { font-size: 12px; line-height: 16px; color: var(--tinta-apagada); text-transform: uppercase; letter-spacing: 0.1em; }
.tabela-caixa tbody tr { border-top: 1px solid rgba(255,255,255,0.08); }
.tabela-caixa tbody th { font-size: 16px; white-space: nowrap; width: 1%; }
.tabela-caixa td:first-of-type { color: var(--tinta-fraca); }
.tabela-caixa td[data-rotulo] { font-family: 'Geist Mono', monospace; text-align: right; width: 116px; }
.tabela-caixa .destaque th, .tabela-caixa .destaque td[data-rotulo] { color: var(--brasa); }

/* Realce de linha: é uma tabela que se lê atravessando, e a faixa é o que
   segura o olho na linha certa. Aqui o realce é `background-color` da célula
   e não opacidade de pseudo, de propósito: `<tr>` posicionado é terreno
   antigo, e esta tabela ainda vira bloco abaixo de 720px, onde a caixa do
   pseudo mudaria de forma. Cor tem curva medida (Stripe) e é barata — o que
   não se anima aqui é sombra. */
.tabela-caixa tbody th, .tabela-caixa tbody td {
  transition: background-color 300ms var(--tinta-curva), color 300ms var(--tinta-curva);
}
@media (hover: hover) {
  .tabela-caixa tbody tr:hover th, .tabela-caixa tbody tr:hover td {
    transition-duration: 0s;
    background-color: rgba(255, 255, 255, 0.05);
  }
  .tabela-caixa tbody tr:hover td[data-rotulo] { color: var(--brasa); }
}

@media (max-width: 720px) {
  .tabela-caixa table, .tabela-caixa tbody, .tabela-caixa tr, .tabela-caixa th, .tabela-caixa td { display: block; width: auto; }
  .tabela-caixa thead { display: none; }
  .tabela-caixa tbody tr { padding: var(--e-200) 0; }
  .tabela-caixa th, .tabela-caixa td { padding: 0; }
  .tabela-caixa tbody th { font-size: 20px; margin-bottom: var(--e-50); }
  .tabela-caixa td { margin-bottom: var(--e-50); }
  .tabela-caixa td[data-rotulo] { text-align: left; width: auto; }
  .tabela-caixa td[data-rotulo]::before {
    content: attr(data-rotulo) ' '; font-family: 'Geist', sans-serif; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-apagada);
  }
}

/* ────────────────────────────────────────────── passos ── */

.passos { display: grid; gap: var(--e-500); }
@media (min-width: 1024px) { .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-400); } }
.passos-secao { padding-bottom: var(--e-800); }
.passos li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-300); align-items: start; padding-top: var(--e-300); }
/* O fio cresce por escala quando o passo entra, uma vez. Cresce a partir da
   esquerda, na direção da leitura, e é a única coisa nesta página que a
   rolagem manda aparecer — por isso nasce inteiro sem JS e com movimento
   reduzido, e não some se o observador falhar. */
.passos li::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--brasa), rgba(232, 180, 115, 0));
  transform-origin: left center;
  transition: transform 520ms var(--curva);
}
.js .passos li::before { transform: scaleX(0); }
.js .passos li.dentro::before { transform: scaleX(1); }
.passos__n {
  font-size: 14px; line-height: 20px; color: var(--brasa); padding-top: 5px;
  transition: transform var(--saida) var(--ui);
}
@media (hover: hover) {
  .passos li:hover .passos__n { transition-duration: 0s; transform: translateX(3px); }
}
.passos h3 { font-size: 20px; line-height: 28px; margin-bottom: var(--e-75); }
.passos p { color: var(--tinta-fraca); }

/* ───────────────────────────────────────────── dúvidas ── */

.duvidas { display: grid; gap: var(--e-75); }
@media (min-width: 1024px) { .duvidas { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.duvidas details { position: relative; border-radius: 14px; background: var(--n1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); padding: var(--e-300) var(--e-400); }
/* Realce do cartão de dúvida por opacidade de pseudo. Os filhos sobem para
   `relative` porque pseudo posicionado pinta depois de filho em fluxo — sem
   isso o véu ficaria por cima do texto da resposta. */
.duvidas details::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 255, 255, 0.04);
  opacity: 0; pointer-events: none;
  transition: opacity var(--saida) var(--ui);
}
.duvidas details > * { position: relative; }
@media (hover: hover) {
  .duvidas details:hover::before { transition-duration: 0s; opacity: 1; }
}
/* min-height de 44px: `summary` é alvo de toque, e três das seis perguntas
   caberiam numa linha de 28px. */
.duvidas summary { cursor: pointer; list-style: none; font-size: 18px; line-height: 28px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: var(--e-300); min-height: 44px; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after {
  content: ''; flex: 0 0 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9B9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 240ms var(--curva);
}
.duvidas details[open] summary::after { transform: rotate(180deg); }
.duvidas details p { margin-top: var(--e-200); color: var(--tinta-fraca); max-width: 680px; }

/* ─────────────────────────────────────────────── fecho ── */

.fecho { padding: var(--e-700) var(--e-800) var(--e-900); }
@media (max-width: 1024px) { .fecho { padding: var(--e-600) var(--e-400) var(--e-700); } }
.fecho__caixa {
  border-radius: 28px; padding: var(--e-800) var(--e-500); text-align: center;
  background: url('/demos/sereno/ceu-fecho.svg') center / cover no-repeat, var(--n1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.fecho h2 { font-size: 48px; line-height: 1.05; max-width: 680px; margin: 0 auto; text-shadow: 0 2px 30px rgba(0,0,0,0.8); }
.fecho h2 em { color: var(--brasa); }
@media (max-width: 640px) { .fecho h2 { font-size: 30px; line-height: 36px; } }
.fecho__caixa > p { margin: var(--e-200) auto 0; max-width: 620px; color: var(--tinta-fraca); text-shadow: 0 2px 20px rgba(0,0,0,0.8); }
.fecho .botao { margin-top: var(--e-500); }
.fecho__risco { margin-top: var(--e-200) !important; font-size: 14px; line-height: 20px; color: var(--tinta-apagada) !important; }

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

.rodape { border-top: 1px solid var(--n2); padding: var(--e-600) var(--e-800) var(--e-700); }
@media (max-width: 1024px) { .rodape { padding: var(--e-600) var(--e-400); } }
.rodape__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-400); }
@media (max-width: 640px) { .rodape__grade { grid-template-columns: 1fr; } }
.rodape h4 { font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-apagada); margin-bottom: var(--e-75); font-weight: 400; }
.rodape p { font-size: 14px; line-height: 20px; color: var(--tinta-fraca); }

/* Link de texto: o sublinhado cheio cresce da esquerda por escala, 180ms.
   O fio fraco de baixo fica sempre: link que só se distingue por cor falha
   em quem não separa as duas cores, e o realce não pode ser a única pista. */
.ligacao {
  position: relative; display: inline-block; padding: 4px 0;
  color: var(--tinta); text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}
.ligacao::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 180ms var(--ui);
}
@media (hover: hover) {
  .ligacao:hover::after { transform: scaleX(1); }
}
.rodape__fim { margin-top: var(--e-700) !important; font-size: 12px !important; color: var(--tinta-apagada) !important; }

/* ────────────────────────── entrada por rolagem ── */
/* Só deslocamento. Nada de opacity 0 → 1: num scroll rápido metade da
   página chegaria vazia. Regra do CLAUDE.md do Gabriel, que vence a B7. */
.js [data-sobe] { transform: translateY(16px); transition: transform 800ms var(--curva); }
.js [data-sobe].dentro { transform: translateY(0); }

/* ───────────────────────────────── odômetro ── */
/* Andaime montado pelo app.js e DESMONTADO no fim da rolagem dos dígitos: o
   número volta a ser texto puro, sem coluna de 0..9 pendurada no Cmd+F nem
   altura em pixel presa a um tamanho de fonte que a media query muda.
   Por isso é seletor de atributo e não classe: classe sem elemento em tela
   é acusada como CSS morto, e este andaime nasce e morre em meio segundo.
   As alturas vêm por style inline, medidas do próprio line-height. */
[data-odo-casa] { display: inline-block; overflow: hidden; vertical-align: top; }
[data-odo-fita], [data-odo-linha] { display: block; }
/* O valor de verdade, para leitor de tela e busca na página, enquanto as
   colunas rolam com aria-hidden. Sai junto com o andaime. */
[data-odo-real] {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ──────────────────────────── foco de teclado ── */
/* `:focus-visible`, nunca `:focus` — e sem transição: o anel de foco aparece
   centenas de vezes por dia e animar isso é atraso puro. Brasa sobre os
   fundos escuros da peça passa de 9:1 contra o não focado. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  /* Duração quase zero, nunca `none`: script que espera o fim de uma
     transição para devolver o `overflow` esperaria para sempre. A árvore
     continua idêntica — só o tempo muda. */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Estado final de tudo o que a rolagem comandaria. Escala e cor pequenas
     ficam (a WCAG não trata crossfade como movimento); percurso de área
     grande, não. */
  .js [data-sobe] { transform: none; }
  .js .passos li::before { transform: none; }
  .tagline__frase .palavra { color: var(--tinta); }
}