/* ═══════════════════════════════════════════════════════════════
   Cadira — carta-convite v7
   Mobile-first: as regras base são o telefone (390px).
   Media queries só ampliam.

   Sobre tipografia: a v6/conceito tinha 6 tamanhos autorais na carta
   (l1…l6) mais tratamentos avulsos para data, papel, chips e colofão —
   heterogêneo demais, especialmente logo depois da data. Aqui existe
   UMA escala de 7 degraus e UM tratamento de "meta" (versalete
   espaçado) reutilizado em todo texto de serviço.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* papel */
  --desk:#e5dcc8;
  --paper:#f9f4e9;
  --ink:#241e15;
  --faint:#6f6350;
  --rule:#d8cbb0;
  --ox:#7c2b23;
  --ox-deep:#63201a;
  --cream:#f3e0cd;

  /* escala tipográfica — 7 degraus, sem exceções fora daqui */
  --t-meta:0.78rem;
  --t-sm:1.02rem;
  --t-body:1.07rem;
  --t-lead:1.24rem;
  --t-h2:1.62rem;
  --t-h1:2.15rem;
  /* corpo da frase de impacto da dobra: precisa ser o maior da página e
     ainda assim deixar o cue de rolagem visível a 390×844. Medido, não chutado. */
  --t-impacto:2.15rem;
  --t-display:2.45rem;

  /* ritmo */
  --gut:22px;
  --sheet-pad:26px;
}

/* ═══════════════════ ABERTURA ═══════════════════
   Envelope fecha → aba gira → carta sobe → frase encolhe pro canto.
   Só transform/opacity (compostos na GPU, zero reflow). Nada de
   biblioteca, nada de imagem: ~3KB de CSS. Total: 2,3s.
   A animação termina em visibility:hidden com fill-mode:forwards, então
   ela se remove sozinha mesmo se o JS não rodar. */
.abertura{
  position:fixed;
  inset:0;
  z-index:60;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    var(--desk);
  animation:palcoSai .3s ease 2.56s forwards;
  /* A escala lacrada (--seal0) era um número fixo (.506), calibrado só
     para os 346px de largura da folha em 390px de tela. Em desktop a
     folha (main, max-width:700px) fica bem mais larga enquanto o
     envelope continua pequeno (min(250px,64vw) satura em 250px acima de
     ~390px) — .506 desse valor maior estourava pra fora do envelope.
     Agora --seal0 é uma razão: largura do envelope / largura da folha,
     escalada por .681 (a mesma folga visual do ajuste original: era isso
     que 175px dentro de um envelope de 257px representava). Assim o selo
     encaixa do mesmo jeito em qualquer largura de tela. */
  --sheet-w:min(700px, calc(100vw - 2 * var(--gut)));
  --env-w:min(250px, 64vw);
  --seal0:calc(0.681 * var(--env-w) / var(--sheet-w));
}
.abertura[hidden]{display:none}

/* A CARTA — nasce dentro do envelope e cresce até a geometria exata da
   folha da página (mesmas margens, mesmo topo). Só transform: a caixa
   final já está no lugar certo desde o início, o que se anima é a escala. */
.abertura-carta{
  position:fixed;
  top:22px;
  left:var(--gut);
  right:var(--gut);
  /* Sem isto a caixa cresce sem limite com a janela (left/right:var(--gut)
     sozinho estica até a borda da tela). Em desktop largo isso deixava a
     carta muito mais larga que a folha real (que tem max-width:700px em
     main), esticando-a horizontalmente para muito além do envelope. */
  max-width:var(--sheet-w);
  margin-left:auto;
  margin-right:auto;
  /* 110svh: a base fica FORA da tela. Com 92vh a borda inferior da carta
     caía 22px acima da borda da folha real e a diferença piscava no
     cruzamento. Sem borda de baixo visível, só topo e laterais precisam
     casar — e esses casam exatos.
     svh, não vh: no Chrome Android a barra de endereço recolhe sozinha
     pouco depois do carregamento, e vh é recalculado ao vivo quando isso
     acontece — a caixa da carta (que usa vh na própria altura) cresce de
     repente no meio da animação, enquanto o envelope (vw/px, não vh) não
     se move. É esse descompasso que fazia o papel escapar por baixo do
     envelope pouco depois do t0, só em celular. svh trava no menor
     viewport possível (barra sempre contada como visível) e nunca muda
     de valor durante a sessão, então a caixa não se mexe sozinha. */
  height:110svh;
  background:var(--paper);
  border:1px solid rgba(80,60,30,.16);
  box-shadow:0 1px 2px rgba(50,38,18,.12), 0 14px 40px -18px rgba(50,38,18,.38);
  z-index:3;
  /* Espera parada dentro do envelope até 1,5s (1s de envelope fechado +
     0,5s de aba abrindo) e só então é puxada. cartaFrente a traz para a
     frente no instante em que ela passa a ser maior que o envelope. */
  /* A carta NÃO se apaga sozinha. Antes ela dava fade-out aos 2,42s e o
     palco (que tem o fundo bege por cima da página) só saía aos 2,56s —
     nesse intervalo aparecia a mesa vazia, que era a piscada. Agora ela
     fica opaca até o fim e quem cruza é o palco inteiro: como a carta
     tem a geometria e a cor exatas da folha, a troca é invisível. */
  /* cartaEntra: o envelope (envCena) leva até 18% (~0,44s) para terminar
     de aparecer — opacidade 0→1. Até lá a carta ficava opaca desde o
     quadro zero, na mesma posição do envelope ainda translúcido: dava
     para ver o papel por baixo do envelope se formando. Agora ela só
     aparece depois que o envelope já está opaco. */
  animation:cartaEntra .16s linear .44s both,
            cartaSai 1.18s linear 1.32s both,
            cartaFrente 0s linear 2.24s forwards;
}

/* O ENVELOPE — some enquanto a carta cresce, então nunca se vê a carta
   maior que ele. Fica por cima só enquanto ainda é o objeto principal. */
.env{
  position:fixed;
  top:50%;left:50%;
  width:min(250px,64vw);
  aspect-ratio:3/2;
  margin:-1px 0 0 calc(min(250px,64vw) / -2);
  transform:translateY(-50%);
  perspective:900px;
  /* UMA animação só, do primeiro ao último quadro. Antes eram duas
     (entrar / expandir-sumir) com um vazio de 1,2s entre elas — e é esse
     vazio que fazia a cena parecer travar e depois arrancar. Agora o
     envelope nunca fica imóvel: entra, segue derivando devagar (a câmera
     empurrando) e essa mesma deriva acelera na hora da puxada. */
  animation:envCena 2.46s linear both;
}
/* Os planos, do fundo para a frente:
   aba-aberta (1) → verso (2) → CARTA (3) → frente (4) → aba-lacrada (5).
   A aba troca de 5 para 1 no meio do giro; a carta passa a 6 quando fica
   maior que o envelope. */
.env-tras{
  z-index:2;
  background:#e9dcc4;
  border:1px solid rgba(80,60,30,.22);
}
.env-frente-grupo{ z-index:4 }
.env-aba-grupo{
  z-index:5;
  /* precisa repetir as animações de .env: o atalho `animation` substitui
     a lista inteira, então acrescentar abaAtras sozinho apagaria as outras. */
  animation:envCena 2.46s linear both,
            abaAtras 0s linear 1.24s forwards;
}
.env-frente{                        /* a frente, com o entalhe em V */
  position:absolute;inset:0;z-index:3;
  background:#f0e5d1;
  border:1px solid rgba(80,60,30,.22);
  clip-path:polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
}
.env-aba{                           /* a aba que gira para trás */
  position:absolute;top:0;left:0;width:100%;height:52%;
  background:#e2d4b8;
  border:1px solid rgba(80,60,30,.22);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform-style:preserve-3d;
  z-index:4;
  /* ease-out em vez de ease-in-out: a aba não freia até zero no fim, e a
     puxada do papel já começou (1,32s) antes de ela terminar (1,55s). */
  animation:abaAbre .58s cubic-bezier(.5,0,.26,1) .98s both;
}
.env-selo{
  position:absolute;top:44%;left:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;
  background:var(--ox);
  box-shadow:0 1px 2px rgba(50,38,18,.35);
  z-index:5;
  animation:seloSai .3s ease .78s both;
}

/* A CENA DO ENVELOPE — do primeiro ao último quadro, sem pausa.
   As paradas estão calibradas para a VELOCIDADE crescer suavemente, e não
   só a posição: 0,03 → 0,12 → 0,25 → 0,33 unidades de escala por segundo.
   Com `linear` na animação e a curva embutida nas paradas, não há
   desacelerar-até-zero entre fases — que era a origem do movimento picado.
   A opacidade segura em 1 até 62%: é o que mantém a base do papel
   escondida dentro do envelope durante a puxada. */
@keyframes envCena{
  /* Truque que faz a diferença: opacidade e transform têm paradas em
     percentuais DIFERENTES. Assim a escala percorre 0→45% num segmento
     único — a entrada não desacelera até zero para a deriva recomeçar do
     zero, que era o degrau que sobrava. A curva termina com inclinação
     não-nula (y2 = .92, não 1), então entrega velocidade para o trecho
     seguinte em vez de morrer. */
  0%   { opacity:0;   transform:translateY(-50%) scale(.86);
         animation-timing-function:cubic-bezier(.14,.55,.35,.88) }
  18%  { opacity:1 }                                    /* só opacidade */
  45%  { transform:translateY(-50%) scale(1.05) }       /* só transform */
  62%  { opacity:1;   transform:translateY(-50%) scale(1.10) }
  80%  { opacity:.55; transform:translateY(-50%) scale(1.20) }
  100% { opacity:0;   transform:translateY(-50%) scale(1.34) }
}
@keyframes abaAbre{  from{transform:rotateX(0)} to{transform:rotateX(-168deg)} }
@keyframes seloSai{  to{opacity:0;transform:scale(.5)} }
@keyframes cartaEntra{  from{opacity:0} to{opacity:1} }

/* A CARTA SENDO PUXADA.
   Três estágios em vez de dois — é o do meio que faz o movimento ler como
   "alguém puxando" e não como um zoom: aos 52% o papel já subiu para fora
   da boca do envelope, e só depois termina de crescer até a folha.
   Os deslocamentos são derivados, não estimados: com altura 110svh o centro
   final da carta fica em 22px + 55svh e o do envelope em 50svh, então
   −5svh − 22px alinha os dois; −112px é o quanto o centro precisa subir
   para o papel sair. Se a altura da carta mudar, este valor muda junto.
   svh, não vh, pelo mesmo motivo da altura da carta: precisa ficar parado
   se a barra de endereço do celular recolher no meio da animação.
   Escala X usa --seal0 (ver `.abertura`) em vez de um número fixo, pelo
   mesmo motivo do max-width acima: em desktop a folha é bem mais larga
   que em celular, então a escala "lacrada" tem que encolher mais para
   caber no mesmo envelope pequeno. Os estágios 28%/55% somam um delta
   fixo (+.064 / +.159) ao ponto de partida — o mesmo delta absoluto do
   ajuste original, só reancorado no novo --seal0. */
@keyframes cartaSai{
  0%  { transform:translateY(calc(-5svh - 22px)) scale(var(--seal0),.13);
        animation-timing-function:cubic-bezier(.34,0,.62,.44) }   /* pega e puxa */
  28% { transform:translateY(calc(-5svh - 62px)) scale(calc(var(--seal0) + .064),.19);
        animation-timing-function:linear }                        /* puxada em curso */
  /* inclinação inicial .14/.3 = 0,47, que é a razão entre a velocidade do
     trecho linear e a média deste — assim a expansão HERDA o embalo da
     puxada em vez de reiniciar do zero */
  55% { transform:translateY(calc(-5svh - 112px)) scale(calc(var(--seal0) + .159),.28);
        animation-timing-function:cubic-bezier(.3,.14,.3,1) }
  100%{ transform:translateY(0) scale(1) }
}
@keyframes cartaFrente{ to{z-index:6} }
@keyframes palcoSai{ to{opacity:0;visibility:hidden} }
/* A troca acontece aos 1,25s — exatamente o meio do giro, quando a aba
   está de perfil e tem largura visual zero. Assim o salto de plano é
   literalmente invisível. */
@keyframes abaAtras{ to{z-index:1} }

/* O TEXTO REVELA como foto: quando a carta chega ao tamanho final, o
   conteúdo da dobra aparece em cascata. Só opacity — nada de filter,
   que é o que trava celular fraco. */
/* começa enquanto o papel ainda assenta (2,42s), para o texto pegar o
   movimento em vez de esperar ele parar */
.letter > *{ animation:revela .6s ease-out both }
.letter > *:nth-child(1){ animation-delay:2.42s }
.letter > *:nth-child(2){ animation-delay:2.50s }
.letter > *:nth-child(3){ animation-delay:2.58s }
.letter > *:nth-child(4){ animation-delay:2.68s }
.letter > *:nth-child(5){ animation-delay:2.79s }
.letter > *:nth-child(6){ animation-delay:2.89s }
@keyframes revela{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* trava a rolagem só enquanto a abertura roda (classe posta pelo JS) */
body.abrindo{overflow:hidden}

/* Quem pediu menos movimento não vê nada disso — a página abre direto. */
@media (prefers-reduced-motion:reduce){
  .abertura{display:none}
  .letter > *{animation:none}
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    var(--desk);
  color:var(--ink);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:var(--t-body);
  line-height:1.5;
  color-scheme:light;
  overflow-x:hidden;
  padding:0 var(--gut) 120px;   /* 120px = respiro pro dock */
}

main{max-width:700px;margin:0 auto}

/* ───────── folha ───────── */
.sheet{
  background:
    repeating-linear-gradient(0deg, rgba(60,44,20,.022) 0 1px, rgba(0,0,0,0) 1px 5px),
    var(--paper);
  border:1px solid rgba(80,60,30,.14);
  box-shadow:0 1px 2px rgba(50,38,18,.12), 0 14px 40px -18px rgba(50,38,18,.38);
  padding:var(--sheet-pad);
  margin-top:26px;
}
.sheet:first-child{margin-top:22px}

/* ───────── "meta": UM tratamento pra todo texto de serviço ───────── */
.meta{
  font-size:var(--t-meta);
  font-weight:500;
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:uppercase;
  color:var(--faint);
  line-height:1.5;
}
.meta.light{color:rgba(243,224,205,.72)}

.rule{height:1px;background:var(--rule);margin:20px 0}
.rule.short{width:56px;margin:16px auto 24px}

/* ═════════ A DOBRA ═════════ */
.letterhead{text-align:center}
.mark{display:block;margin:0 auto 12px}
.wordmark{
  font-size:1.45rem;
  font-weight:600;
  letter-spacing:.42em;
  text-indent:.42em;
  line-height:1;
}
.letterhead .meta{margin-top:9px}

/* Só a data no aparato do papel — o destinatário é implícito para quem
   recebe a carta e saiu da dobra. */
.dateline{text-align:right;margin-bottom:20px}

/* A frase de impacto é o único pico da dobra. Os três tempos vivem num
   tamanho só — o fecho se destaca por COR, não por corpo, para não
   reintroduzir a heterogeneidade de tamanhos que já foi corrigida. */
.impacto{
  font-size:var(--t-impacto);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.015em;
  margin-top:22px;
}
/* Cada tempo é um bloco: o respiro entre eles marca a passagem de uma
   geração para a outra sem precisar de pontuação extra. */
.impacto span{display:block}
.impacto span + span{margin-top:.36em}
.impacto em{color:var(--ox);font-style:italic}

.fold-what{
  font-size:var(--t-sm);
  color:var(--faint);
  line-height:1.5;
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid var(--rule);
  max-width:38ch;
}

/* o "quero ver mais" — puxa pra baixo */
.pull{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7em;
  margin-top:20px;
  padding:13px 10px;
  text-decoration:none;
  color:var(--ox);
  border:1px dashed var(--rule);
}
.pull-label{
  font-size:var(--t-meta);
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
}
.pull-arrow{
  font-size:1rem;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}
@media (prefers-reduced-motion:reduce){
  .pull-arrow{animation:none}
}

/* ═════════ CAPÍTULOS (por quê) ═════════ */
.chapter .kicker{margin-bottom:12px}
.ch-title{
  font-size:var(--t-h2);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.01em;
  margin-bottom:18px;
}
.chapter p{margin-bottom:1em;max-width:40ch}
.chapter p:last-child{margin-bottom:0}

/* O negrito é o mapa de leitura: quem passa o olho lê só os trechos
   marcados e ainda assim recebe o argumento inteiro. */
.chapter p strong{font-weight:700}

.turn{
  font-size:var(--t-lead);
  font-weight:600;
  line-height:1.25;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--rule);
}
.turn em{color:var(--ox);font-style:italic}

/* ═════════ MANIFESTO (a razão de existir) ═════════ */
.manifesto{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--cream);
}
.mf-title{
  font-size:var(--t-h1);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:12px 0 20px;
}
/* "CRIAR" em caixa alta — a palavra que separa a Cadira de um curso sobre IA */
.caps{
  text-transform:uppercase;
  letter-spacing:.04em;
}
.mf-body{
  color:rgba(243,224,205,.86);
  margin-bottom:1em;
  max-width:40ch;
}
.mf-body strong{color:var(--cream);font-weight:700}
.mf-quote{
  font-size:var(--t-lead);
  font-style:italic;
  font-weight:600;
  line-height:1.3;
  color:#e8a99a;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(243,224,205,.22);
}

/* ═════════ ASSINATURAS ═════════ */
.signatures{
  display:grid;
  gap:18px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--rule);
}
.sig-name{font-size:var(--t-lead);font-weight:600;line-height:1.2}
.sig-cred{font-size:var(--t-sm);color:var(--faint);line-height:1.4;margin-top:3px}

/* a rede em volta dos três — "não é só nós dois" */
.rede{
  margin-top:22px;
  padding:18px 16px;
  border:1px solid var(--rule);
  background:rgba(124,43,35,.035);
}
.rede-num{
  font-size:var(--t-lead);
  font-weight:600;
  line-height:1.2;
  color:var(--ox);
}
.rede-txt{
  font-size:var(--t-sm);
  color:var(--faint);
  line-height:1.5;
  margin-top:8px;
}

.honesty{
  margin-top:22px;
  padding-top:18px;
  border-top:1px dotted var(--rule);
  font-style:italic;
  font-size:var(--t-sm);
  color:var(--faint);
  line-height:1.5;
  text-align:center;
}
.honesty b{color:var(--ink);font-weight:600;font-style:normal}

/* ═════════ ANEXOS ═════════ */
.annex.a1{transform:rotate(-.45deg)}
.annex.a2{transform:rotate(.4deg)}
.annex-tag{text-align:center}
.annex-title{
  font-size:var(--t-h2);
  font-style:italic;
  font-weight:600;
  text-align:center;
  line-height:1.2;
  margin-top:7px;
}

.chip{
  display:inline-block;
  font-size:var(--t-meta);
  letter-spacing:.22em;
  text-indent:.22em;
  text-transform:uppercase;
  color:var(--faint);
  border:1px solid var(--rule);
  padding:5px 10px 4px;
  margin-bottom:16px;
}
.chip.end{margin:18px 0 0 30px;border-color:var(--ox);color:var(--ox)}

.route{list-style:none;position:relative;margin-left:5px}
.route::before{
  content:"";position:absolute;left:5px;top:10px;bottom:10px;
  width:1.5px;background:var(--rule);
}
.route li{position:relative;padding:0 0 20px 26px}
.route li:last-child{padding-bottom:0}
.route li::before{
  content:"";position:absolute;left:0;top:7px;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--ink);
}
.route li:last-child::before{background:var(--ox);border-color:var(--ox-deep)}
.route .w{font-size:var(--t-lead);font-weight:600;line-height:1.15}
.route .n{font-size:var(--t-sm);color:var(--faint);font-style:italic;margin-top:1px}
.route li:last-child .w{color:var(--ox)}

.annex-note{
  margin-top:22px;padding-top:16px;
  border-top:1px dotted var(--rule);
  font-size:var(--t-sm);color:var(--faint);
  text-align:center;font-style:italic;line-height:1.5;
}
.annex-note.plain{text-align:left;font-style:normal}

/* condições */
.terms{list-style:none}
.terms li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;
  padding:9px 0;
  border-bottom:1px dotted rgba(185,166,126,.5);
}
.terms li:last-child{border-bottom:none}
.terms .t{font-weight:600;white-space:nowrap}
.terms .fill{display:none}
.terms .v{color:var(--faint);font-size:var(--t-sm);flex-basis:100%}
.terms li.key .v{color:var(--ox);font-weight:600}

/* ═════════ FLUXOS ═════════ */
.flows{text-align:center}
.seal-wrap{margin-bottom:6px}
.flows-title{
  font-size:var(--t-h2);
  font-weight:600;
  letter-spacing:.16em;
  text-indent:.16em;
}
.flows-sub{
  font-size:var(--t-sm);
  color:var(--faint);
  line-height:1.55;
  margin-top:8px;
  padding-bottom:22px;
  border-bottom:1px solid var(--rule);
}
.flows-sub strong{color:var(--ink);font-weight:600}

.escolhas{display:grid;gap:10px;margin:22px 0 4px}
.btn-secundario{
  font-family:inherit;
  font-size:var(--t-sm);
  color:var(--faint);
  background:transparent;
  border:1px solid var(--rule);
  padding:13px 12px;
  cursor:pointer;
  min-height:44px;
}
.btn-secundario[aria-expanded="true"],
.escolhas .btn[aria-expanded="true"]{
  color:var(--ox);
  border-color:var(--ox);
}
/* o primário some depois de abrir: já cumpriu o papel e o formulário
   tem o seu próprio botão de enviar */
.escolhas .btn[aria-expanded="true"]{
  background:transparent;
  box-shadow:none;
  font-weight:600;
}

.panel{text-align:left;padding-top:18px}
.panel[hidden]{display:none}
.trocar-contato{
  display:block;
  font-family:inherit;
  font-size:var(--t-sm);
  font-style:italic;
  color:var(--ox);
  background:transparent;
  border:none;
  padding:11px 0;
  min-height:44px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.lgpd{
  font-size:var(--t-meta);
  line-height:1.6;
  color:var(--faint);
  letter-spacing:.02em;
  border-left:2px solid var(--rule);
  padding-left:10px;
  margin-top:4px;
}
.panel-intro{
  font-size:var(--t-sm);
  color:var(--faint);
  line-height:1.55;
  margin-bottom:20px;
}

.field{margin-bottom:16px}
.field label{
  display:block;
  font-size:var(--t-meta);
  letter-spacing:.2em;
  text-indent:.2em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:6px;
}
.opcional{text-transform:none;letter-spacing:0;text-indent:0;font-style:italic}
.field input{
  width:100%;
  font-family:inherit;
  font-size:var(--t-body);
  color:var(--ink);
  background:rgba(255,255,255,.55);
  border:1px solid var(--rule);
  padding:12px 13px;
  min-height:46px;
}
.field input:focus-visible,
.trocar-contato:focus-visible,
.btn-secundario:focus-visible,
.btn:focus-visible,
.pull:focus-visible,
.opt input:focus-visible{
  outline:2px solid var(--ox);
  outline-offset:2px;
}
.field input[aria-invalid="true"]{border-color:var(--ox)}

.opcoes{border:none;display:grid;gap:8px;margin-bottom:8px}
.opt{
  display:flex;align-items:flex-start;gap:.65em;
  border:1px solid var(--rule);
  padding:12px 13px;
  cursor:pointer;
  font-size:var(--t-sm);
  line-height:1.4;
  min-height:44px;
}
.opt:has(input:checked){border-color:var(--ox);background:rgba(124,43,35,.05)}
.opt input{accent-color:var(--ox);margin-top:.2em;flex:none}

.erro{
  font-size:var(--t-sm);
  font-style:italic;
  color:var(--ox);
  line-height:1.4;
  margin-top:5px;
}
.erro:empty{display:none}

/* Os dois campos de contato reservam a linha de erro mesmo vazia, para
   terem SEMPRE a mesma altura. Sem isso, trocar de WhatsApp para e-mail
   com um erro na tela encolhia o bloco e empurrava o resto da página. */
#campo-whats .erro,
#campo-email .erro{ display:block; min-height:1.45em }

.acoes{margin-top:22px}
.btn{
  display:block;width:100%;
  text-align:center;
  font-family:inherit;
  font-weight:600;
  font-size:var(--t-body);
  letter-spacing:.05em;
  color:#f9efe2;
  background:var(--ox);
  border:1px solid var(--ox-deep);
  box-shadow:0 2px 0 var(--ox-deep);
  padding:15px 20px;
  min-height:50px;
  cursor:pointer;
  text-decoration:none;
}
.btn[disabled]{opacity:.6;cursor:progress}
.micro{
  font-size:var(--t-sm);
  font-style:italic;
  color:var(--faint);
  text-align:center;
  line-height:1.45;
  margin-top:11px;
}

.obrigado{text-align:center;padding:24px 0 8px}
.ob-title{font-size:var(--t-h2);font-weight:600;color:var(--ox)}
.ob-body{font-size:var(--t-sm);color:var(--faint);line-height:1.55;margin-top:10px}

.colophon{
  text-align:center;
  font-size:var(--t-meta);
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:uppercase;
  color:#8a7c63;
  margin-top:30px;
}

/* ═════════ DOCK — o CTA que nunca some ═════════ */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom,0px));
  background:rgba(233,224,204,.94);
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(80,60,30,.18);
  transform:translateY(100%);
  transition:transform .22s ease;
}
.dock.is-up{transform:translateY(0)}
.dock[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .dock{transition:none}
}
.dock-btn{
  flex:1;
  text-align:center;
  text-decoration:none;
  font-weight:600;
  font-size:var(--t-sm);
  letter-spacing:.05em;
  color:#f9efe2;
  background:var(--ox);
  border:1px solid var(--ox-deep);
  padding:12px 16px;
  min-height:46px;
  display:flex;align-items:center;justify-content:center;
}
.dock-note{
  font-size:var(--t-meta);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
  flex:none;
}

/* ═════════ WHATSAPP ═════════
   Discreto de propósito: papel e tinta, não o verde da marca — a página
   é uma carta, não um site com widget de atendimento. */
.zap{
  position:fixed;
  right:var(--gut);
  bottom:80px;              /* logo acima da barra de CTA */
  z-index:25;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  color:var(--ink);
  background:var(--paper);
  border:1px solid rgba(80,60,30,.24);
  box-shadow:0 2px 10px -3px rgba(50,38,18,.35);
  text-decoration:none;
  /* Só existe junto com a barra de CTA. Enquanto a pessoa ainda está lendo
     a dobra, a página é uma carta — não um site com widget de atendimento.
     visibility (e não só opacity) tira o botão do foco e do toque enquanto
     invisível; o atraso de 0,22s deixa a saída terminar antes de sumir. */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.dock.is-up ~ .zap{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .22s ease, transform .22s ease, visibility 0s;
}
.zap:hover{opacity:.85}
.zap:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .zap{transition:opacity 0s, visibility 0s}
}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ═════════ AMPLIAÇÕES ═════════ */
@media (min-width:600px){
  :root{
    --t-meta:0.72rem;
    --t-sm:1rem;
    --t-body:1.13rem;
    --t-lead:1.38rem;
    --t-h2:1.95rem;
    --t-h1:2.6rem;
    --t-impacto:2.5rem;
    --t-display:3.1rem;
    --gut:32px;
    --sheet-pad:46px;
  }
  .sheet{margin-top:34px}
  .signatures{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}
  .escolhas{grid-template-columns:1fr 1fr;align-items:stretch}
  .escolhas .btn{width:auto;min-width:0;margin:0}
  .terms li{flex-wrap:nowrap}
  .terms .fill{display:block;flex:1;border-bottom:1px dotted #b9a67e;transform:translateY(-4px);min-width:24px}
  .terms .v{flex-basis:auto;text-align:right}
  .btn{width:auto;min-width:280px;margin:0 auto}
  .dock{justify-content:center}
  .dock-btn{flex:none;min-width:300px}
}

@media (min-width:900px){
  :root{--sheet-pad:62px}
  .annex{max-width:620px;margin-left:auto;margin-right:auto}
}