/* =====================================================================
   andrehernandes.com.br — direção "Ofício", ambiente "universo limpo".

   Regras que valem pra página inteira e não devem ser desfeitas sem motivo:
   - Nenhuma linha divisória. O que separa as partes é espaço.
   - Nada de partícula flutuando: partícula lê como poeira (velho, parado,
     deixado de lado). O que se move é luz.
   - O monograma fica PARADO. É selo de fundo, não animação.
   - Tipografia em caixa alta nunca abaixo de line-height .98: abaixo disso a
     linha de baixo come o til e a cedilha.
   ===================================================================== */

:root{
  /* PALETA — duas cores com funções separadas, e essa divisão É a decisão.
     Cor que faz dois trabalhos faz os dois pela metade: aqui o branco só manda
     apertar e o frio só conta que isto é digital.

       --acento   o que precisa ser óbvio: botão e a segunda linha do título
       --frio     o traço fino: monograma, pontos, rótulos e a luz do fundo

     Não deixar o frio vazar para texto corrido nem o branco descer para
     detalhe — é essa disciplina que segura o desenho. O par em RGB existe
     porque as luzes do fundo precisam da cor com transparência; sem ele,
     trocar a paleta obrigava a caçar rgba() no arquivo inteiro. */
  --preto:#07090C;
  --tinta:#F4F2ED;
  --acento:#FFFFFF;
  --frio:#38D6E0;
  --frio-rgb:56,214,224;

  /* neutros levemente azulados: cinza morno sobre preto frio fica sujo */
  --apagado:#93A0A6;
  --apagado-2:#7D8A90;
  /* o mais escuro que ainda passa em AA sobre o preto — conferir sempre com
     scripts/contraste.py depois de mexer em cor */
  --apagado-3:#717E84;
  /* borda de controle (a caixinha de marcar): mínimo 3:1, não 4,5 — é forma,
     não texto */
  --borda-controle:#55666E;

  --display:'Archivo', system-ui, sans-serif;
  --corpo:'Karla', system-ui, sans-serif;
  --rotulo:'JetBrains Mono', ui-monospace, monospace;

  /* Intensidade do fundo. Um número só governa as duas luzes e o monograma —
     mexer aqui é a única coisa necessária pra deixar tudo mais forte ou mais
     apagado. */
  --forca:1;

  /* Opacidade do monograma de fundo, separada da luz. Estava em .032 e o
     André pediu mais apagado: o que fazia ele parecer forte não era o número,
     era a luz passar bem atrás dele. */
  --logo:.016;

  /* Corpo do título. 2.9vw reproduz a proporção do modelo aprovado: ~32px numa
     tela de 1130 e ~42px em 1440 — quase o mesmo tamanho dos números da prova.
     É contido de propósito: título pequeno em campo grande é o que faz a página
     parecer espaçosa. Um meio-termo mais gritado seria 5vw / máximo 74px. */
  --titulo:clamp(26px, 2.9vw, 44px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--preto);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:4px}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- ambiente */
/* Duas luzes frias e uma vinheta, em elemento fixo atrás de tudo.
   A luz de cima respira em 14s — é o único movimento da página. */
/* --------------------------------------------- trava da rolagem lateral */
/* Rolagem HORIZONTAL nunca é legítima neste site: não existe nada à direita
   para alcançar. Então ela fica travada — qualquer coisa que passe da borda é
   aparada em vez de virar barra embaixo da tela.

   `clip` e não `hidden`: `hidden` cria caixa de rolagem (e mata o
   `position:sticky` de quem vier depois); `clip` só apara. E `clip` num eixo
   convive com `visible` no outro — é o único valor que faz isso, e é por isso
   que a rolagem VERTICAL continua inteira.

   ⚠️ E a vertical continua inteira DE PROPÓSITO. Medido em 25/08: num
   notebook de 1366x768 a home já rola 81px, e numa janela de 560px de altura
   o BOTÃO DO WHATSAPP não cabe. Travar a vertical esconderia os links de
   serviço no primeiro caso e o botão no segundo — numa página que existe
   justamente para o cara apertar aquele botão. */
html{overflow-x:clip}

.ceu{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% 30%,
      rgba(var(--frio-rgb), calc(.10 * var(--forca))), transparent 70%),
    radial-gradient(90% 60% at 50% 108%,
      rgba(var(--frio-rgb), calc(.05 * var(--forca))), transparent 70%);
}
.ceu::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55));
}
@media (prefers-reduced-motion:no-preference){
  .ceu{animation:respira 14s ease-in-out infinite}
}
@keyframes respira{ 0%,100%{opacity:1} 50%{opacity:.72} }

body > *:not(.ceu){position:relative;z-index:1}

/* O monograma, parado, atrás do título. */
.astro,
.marca{
  display:inline-block;
  line-height:0;
  background:currentColor;
  -webkit-mask:url(img/logo.svg) center/contain no-repeat;
  mask:url(img/logo.svg) center/contain no-repeat;
}
.astro{
  position:absolute;
  left:50%;
  top:46%;
  width:min(58vw, 620px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  color:var(--frio);
  opacity:calc(var(--logo) * var(--forca));
  pointer-events:none;
}

/* ------------------------------------------------------------------- topo */
.topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px clamp(20px, 4vw, 52px);
}
.lock{
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
}
.lock .marca{width:42px;height:42px;color:var(--frio);flex:none}
.lock-nome{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(15px, 2vw, 21px);
  letter-spacing:-.03em;
  text-transform:uppercase;
  line-height:1;
}
/* ------------------------------------------------------------------ palco */
/* Duas âncoras: o hero fica centrado no espaço que sobra e os trabalhos ficam
   presos embaixo. Quem cresce é o .palco — assim a distância entre o botão e os
   trabalhos varia com a altura da tela, mas os trabalhos nunca boiam no meio
   com um vazio embaixo. Em tela baixa não sobra espaço e a página rola normal. */
main{flex:1;display:flex;flex-direction:column}

.palco{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  padding:clamp(40px, 7vw, 88px) clamp(20px, 4vw, 52px) clamp(48px, 8vw, 96px);
  text-align:center;
}
.palco > *:not(.astro){position:relative;z-index:1}

.titulo{
  font-family:var(--display);
  font-weight:900;
  font-size:var(--titulo);
  /* 1.08 é o que o modelo aprovado usava, e é também o mínimo seguro: a
     cedilha de "Soluções" desce para dentro da linha de baixo. */
  line-height:1.08;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
.titulo span{display:block}
.titulo .amb{color:var(--acento)}

.palavras{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(10px, 1.6vw, 22px);
  margin:clamp(30px, 4.4vw, 58px) 0 0;
  padding:0;
  list-style:none;
}
.palavras li{
  font-family:var(--rotulo);
  font-size:clamp(11px, 1.3vw, 17px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--apagado);
  /* "Social Media" são duas palavras: sem isto ela quebra no meio quando a
     linha aperta, e vira dois serviços que não existem. */
  white-space:nowrap;
}
.palavras li + li::before{
  content:"·";
  color:var(--frio);
  margin-right:clamp(10px, 1.6vw, 22px);
}
/* No celular as cinco palavras não cabem numa linha e a última descia sozinha
   puxando um ponto órfão na frente. Sem os pontos, o espaço já separa. */
@media (max-width:560px){
  .palavras{gap:6px 16px}
  .palavras li + li::before{content:none;margin:0}
}

/* ------------------------------------------------------------- a escolha */
/* A régua de serviços é também o formulário: o visitante marca o que precisa e
   a escolha entra no texto da mensagem do WhatsApp. Um passo a mais antes do
   clique, em troca de uma conversa que já começa sabendo do que se trata.

   Controle precisa parecer clicável, e a página não tem uma borda sequer — daí
   o quadradinho na frente da palavra: dá o "marque aqui" sem introduzir caixa,
   pílula ou sombra que não existem em nenhum outro lugar. */
.escolha{
  margin:clamp(30px, 4.4vw, 58px) 0 0;
  border:0;
  padding:0;
}
.pergunta{
  margin:0 0 clamp(14px, 1.8vw, 22px);
  font-size:clamp(15px, 1.4vw, 19px);
  color:var(--apagado-2);
}
.opcoes{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:2px clamp(4px, 1vw, 14px);
  margin:0;
  padding:0;
  list-style:none;
}
/* a caixa de verdade fica escondida, mas continua sendo ela que recebe o
   teclado e o leitor de tela — nada de div fingindo ser checkbox */
.opcoes input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.opcoes label{
  display:inline-flex;
  align-items:center;
  gap:.75em;
  min-height:44px;                 /* alvo de toque */
  padding:10px clamp(8px, 1vw, 14px);
  font-family:var(--rotulo);
  font-size:clamp(11px, 1.3vw, 17px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--apagado);
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.opcoes label:hover{color:var(--tinta)}
/* A borda da caixa vazia é o que diz "isto é um controle". Estava em #3B4A50,
   que dá 2,1:1 contra o fundo — abaixo do mínimo de 3:1 que a WCAG pede para
   componente de interface, e o visitante simplesmente não via que dava para
   clicar. Este tom dá 3,3:1. */
.caixa{
  width:.8em;
  height:.8em;
  flex:none;
  border:1px solid var(--borda-controle);
  transition:background-color .18s ease, border-color .18s ease;
}
.opcoes label:hover .caixa{border-color:var(--tinta)}
.opcoes input:checked + label{color:var(--tinta)}
.opcoes input:checked + label .caixa{
  background:var(--frio);
  border-color:var(--frio);
}

/* Demonstração: ao abrir, as caixas acendem uma a uma da esquerda para a
   direita e apagam, só para o visitante perceber que ali se clica.
   É PURAMENTE VISUAL — o checkbox de verdade não muda de estado, então o
   link do WhatsApp e a prévia da mensagem não são afetados. Se marcasse de
   verdade, quem tocasse no botão no meio da demonstração pediria um serviço
   que não escolheu. */
.opcoes label.demo{color:var(--tinta)}
.opcoes label.demo .caixa{
  background:var(--frio);
  border-color:var(--frio);
}
.opcoes input:focus-visible + label{
  outline:2px solid var(--acento);
  outline-offset:2px;
}
@media (max-width:560px){
  .opcoes{gap:0 6px}
  .opcoes label{letter-spacing:.16em}
}

/* NÃO existe descrição por serviço, e a ausência é decisão de 2026-08-02.
   Ela chegou a existir — aparecia por hover, por foco e ao marcar, alinhada
   sob cada palavra — e saiu porque o bloco reservava ~47px que ficavam vazios
   a maior parte do tempo: o buraco pesava mais do que a explicação ajudava.
   A dúvida que motivou tudo ("o que seria identidade?") foi resolvida na
   própria palavra, que virou "Identidade visual".
   O texto das cinco está guardado no LEIA-ME, caso um dia volte. */

/* Prévia do que vai ser enviado: quem lê a mensagem antes de mandar confia
   mais em apertar. Mesma lógica do pré-orçamento da MULTI. */
.recado{
  margin:clamp(16px, 2.2vw, 28px) 0 0;
  min-height:1.6em;
  font-family:var(--rotulo);
  font-size:clamp(12px, 1vw, 14px);
  line-height:1.6;
  color:var(--apagado-3);
}
.recado em{font-style:normal;color:var(--apagado-2)}

/* Ao marcar ou desmarcar um serviço a mensagem se reescreve — e sem aviso
   nenhum a pessoa não percebe que aquilo respondeu ao que ela acabou de fazer.
   A linha acende e assenta em 900ms: é luz, não movimento, que é a gramática
   do resto da página. Um fade só por toque, longe do piscar que incomoda. */
@keyframes acende{
  0%   { color:var(--acento); text-shadow:0 0 20px rgba(var(--frio-rgb), .7) }
  35%  { color:var(--acento); text-shadow:0 0 16px rgba(var(--frio-rgb), .5) }
  100% { color:var(--apagado-3); text-shadow:0 0 0 rgba(var(--frio-rgb), 0) }
}
.recado.acendeu{ animation:acende .9s ease-out }

@media (prefers-reduced-motion:reduce){
  /* sem a transição, mas o realce continua: quem pediu menos movimento não
     pediu menos informação */
  .recado.acendeu{ animation:none; color:var(--apagado-2) }
}

/* ------------------------------------------------- o caminho do serviço */
/* Aparece quando a pessoa marca, e fala do que ela marcou. Mesma gramática do
   .recado logo acima: corpo pequeno, tom apagado — é apoio, não um segundo
   botão disputando com o de baixo.

   Os cinco links existem no HTML desde o primeiro byte, todos com [hidden];
   o JS só liga e desliga. É o que permite o Google ver as cinco páginas sem
   precisar clicar em nada. */
.leva{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:fit-content;
  gap:4px;
  margin:16px auto 0;
}
.leva a{
  display:inline-flex;
  align-items:baseline;
  gap:.55em;
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.6;
  color:var(--apagado-2);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgba(var(--frio-rgb), .45);
  transition:color .18s ease;
}
.leva a:hover{color:var(--tinta)}
.leva .seta{color:var(--frio);flex:none}

/* A seta cutuca o texto: avança uns milímetros na direção dele e volta. O
   gesto ocupa 35% do ciclo e o resto é parada — vaivém contínuo viraria o
   elemento mais agitado de uma página cujo único outro movimento é uma luz
   respirando em 14 segundos.

   ⚠️ Ao mexer na duração, refazer as porcentagens junto: o gesto precisa
   continuar durando ~0,35s. Encurtar o ciclo sem isso transforma o movimento
   em tique.

   O transform funciona porque a seta é filha de um flex container — em
   display:inline ele seria ignorado. */
@keyframes cutuca{
  0%, 55%, 100% { transform:translateX(0) }
  75%           { transform:translateX(4px) }
  90%           { transform:translateX(0) }
}
.leva .seta{animation:cutuca 1s ease-in-out infinite}

/* No hover ela fica adiantada e para de cutucar: a pessoa já achou o link. */
.leva a:hover .seta{
  animation:none;
  transform:translateX(4px);
  transition:transform .18s ease;
}

@media (prefers-reduced-motion:reduce){
  .leva .seta{animation:none}
  .leva a:hover .seta{transform:none}
}

/* A distância entre as opções e o botão é a soma de três coisas: a margem do
   bloco de explicação, a altura reservada dele e esta margem. Quando a
   explicação entrou, o total saltou de 92px para 159px e o vão ficou enorme —
   esta margem encolheu para devolver o espaçamento anterior. Mexer numa sem
   olhar as outras duas quebra de novo. */
/* Piso baixo de propósito: o bloco de explicação já reserva ~47px logo acima,
   e ele fica vazio a maior parte do tempo. Somando margem generosa aqui, o
   estado parado vira um buraco. */
/* Celular e desktop precisam de valores diferentes aqui, e o clamp não serve
   mais: 40px no desktop é MENOR que os 42px do celular, então o mínimo do
   clamp venceria nas duas pontas. Com media query cada um fica com o seu. */
.acao{margin:42px 0 0}
@media (min-width:761px){
  .acao{margin:40px 0 0}
}
.botao{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  background:var(--acento);
  color:var(--preto);
  font-weight:700;
  font-size:clamp(16px, 1.6vw, 21px);
  padding:clamp(14px, 1.5vw, 20px) clamp(22px, 2.8vw, 37px);
  text-decoration:none;
  min-height:48px;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.botao svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}
/* Botão branco não tem como clarear no hover — o retorno vem do deslocamento
   e de um halo frio, que amarra com a luz do fundo. */
.botao:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 40px -10px rgba(var(--frio-rgb), .55);
}

/* ------------------------------------------------------------------ prova */
/* Os trabalhos entram como rodapé de argumento, não como seção: número em
   destaque competindo com o título tirava o silêncio da página. O realce é o
   dado em âmbar, na mesma altura do texto — quem lê, lê; quem só passa, não
   tropeça. */
.prova{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.6vw, 40px);
  /* Este respiro de baixo é o que decide a ALTURA dos trabalhos na página:
     como eles estão presos no rodapé, encolher aqui os empurra para baixo.
     Encolheu de novo em 2026-08-02 para aproximá-los do crédito. */
  padding:0 clamp(20px, 6vw, 88px) clamp(22px, 2.2vw, 32px);
  text-align:center;
}
@media (max-width:760px){ .prova{grid-template-columns:1fr;gap:22px} }

/* No celular os três empilhados viravam um bloco de oito linhas e comiam a
   página. Aqui eles se revezam no mesmo lugar, um de cada vez.

   A classe .gira entra pelo JS: sem script, ou com movimento reduzido, os três
   continuam empilhados e legíveis. E os três seguem no HTML o tempo todo —
   quem usa leitor de tela recebe os três, não só o da vez. */
@media (max-width:760px){
  .prova.gira{
    grid-template-columns:1fr;
    gap:0;
  }
  /* todos na MESMA célula do grid: a altura vira a do maior, sem número
     mágico e sem a página pular a cada troca */
  .prova.gira > div{ grid-area:1 / 1 }

  /* O `.js` no começo não é enfeite: a regra da entrada dos blocos
     (`.js .entrou .sobe`) tem três classes e vencia um seletor mais curto —
     o rodízio empilhava certo mas todos ficavam visíveis ao mesmo tempo. */
  .js .prova.gira > div{
    opacity:0;
    transition:opacity .6s ease;
  }
  .js .prova.gira > div.ativo{opacity:1}
}

.prova > div{
  max-width:32ch;
  margin-inline:auto;
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.65;
  color:var(--apagado-3);
}
/* Largura reservada para os três dígitos: sem isto o número contando de 0 a 270
   empurra a frase inteira a cada casa que ganha, e a linha treme.
   O `+ .3em` não é chute: o rótulo tem letter-spacing de .1em, então três
   dígitos ocupam 3ch MAIS o espaçamento entre eles. Só com 3ch a reserva fica
   3,6px curta — medido com scripts/testa-contagem.js. */
.prova b[data-contar]{
  display:inline-block;
  min-width:calc(3ch + .3em);
}
.prova b{
  font-family:var(--rotulo);
  font-weight:500;
  font-size:.92em;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--frio);
  font-variant-numeric:tabular-nums;
  margin-right:.5em;
  white-space:nowrap;
}

/* ----------------------------------------------------------------- rodapé */
/* Só o crédito. O nome, o domínio e o segundo botão de WhatsApp saíram antes
   por repetirem o topo — isto aqui é assinatura, não navegação. */
/* Mesma tipografia dos trabalhos logo acima: Karla, mesmo corpo, mesmo tom,
   sem caixa alta e sem espaçamento de letra. O rodapé deixa de parecer um
   rótulo de sistema e passa a ler como uma frase. */
.rodape{
  padding:0 clamp(20px, 4vw, 52px) clamp(22px, 3vw, 34px);
  text-align:center;
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.65;
  color:var(--apagado-3);
}
.rodape p{margin:0}

/* --------------------------------------------------------------- entrada */
/* O estado escondido só existe com JS vivo: sem a classe na raiz a página
   nasce montada, e um erro de script não apaga o conteúdo. */
.js .sobe{opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:no-preference){
  .js .sobe{transition:opacity .5s cubic-bezier(.16,1,.3,1),
                       transform .5s cubic-bezier(.16,1,.3,1)}
}
.js .entrou .sobe{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .sobe{opacity:1;transform:none}
}

/* ===== MAQUETE 2026-08-24 — inicio ===== */
/* ===================================================
   MAQUETE — 2026-08-24. Home (.palco); o resto e global.
   =================================================== */

/* =====================================================================
   d/ — a maquete de 24/08. Aqui a página muda de LÍNGUA, não de texto.
   O estilo.css original abre dizendo "nenhuma linha divisória", "nada de
   caixa, pílula ou sombra" e "o frio não vaza para texto". As três caem
   nesta versão, por ordem dele. Fica registrado para a escolha ser
   consciente, não por descuido.
   ===================================================================== */

/* As luzes do fundo sobem; o MONOGRAMA não. Ele voltou a .016, o valor do
   site, por ordem dele em 24/08 ("menos visível como era antes").

   ⚠️ A opacidade fica presa aqui, fora do multiplicador: `.astro` no site usa
   `calc(var(--logo) * var(--forca))`, e com --forca em 1.3 pedir .016 daria
   .021 calado. Aqui .016 é .016.

   Ficou registrado o que a tentativa anterior ensinou: a 5% ele vira uma FORMA
   DE BORDA DURA atrás do texto e o traço fino corta a palavra ao meio — o
   estilo.css já avisava. Se um dia quiser forte de novo, o caminho não é
   opacidade, é crescer e desfocar (1080px + blur 2.5px). */
:root{
  --forca:1.3;
  --logo:.016;
  --raio:12px;
}
.astro{ opacity:var(--logo) }

/* ---------------------------------------------------------------- título */
/* Era clamp(26,2.9vw,44) no site antigo; a maquete subiu para
   clamp(44,7vw,104). Em 25/08 ele pediu um pouco menor: -12%, para
   clamp(38,6.1vw,92). ⚠️ Esta linha vive TAMBÉM em `provisorio/d/` e
   `provisorio/e/` — mexer aqui e esquecer lá faz o provisório mentir.
   A maquete pede o título como massa da página.
   O halo é a luz do fundo passando por trás da letra, não brilho de neon:
   dois raios largos e fracos, nada de contorno. */
.palco .titulo{
  font-size:clamp(38px, 6.1vw, 92px);
  line-height:.98;
  letter-spacing:-.045em;
  text-shadow:0 0 60px rgba(var(--frio-rgb), .20),
              0 0 140px rgba(var(--frio-rgb), .12);
}

/* ------------------------------------------------------------ apoio topo */
.palco .apoio-topo{
  margin:clamp(16px, 1.8vw, 24px) auto 0;
  /* ⚠️ O `text-wrap:balance` SAIU em 26/08. Ele repartia as duas linhas
     sozinho, e a quebra caía depois de "identidade" — ele pediu depois de
     "visual". Quem decide agora são os dois `<span>` do HTML: cada metade da
     frase é um `inline-block`, então o navegador prefere quebrar ENTRE elas.
     Não é `<br>` de propósito: `<br>` obriga a quebra e, numa tela estreita,
     a primeira metade estouraria a caixa. Assim, em tela larga dá as duas
     linhas que ele quer, e em tela estreita cada metade ainda pode quebrar
     por dentro em vez de vazar. */
  max-width:46ch;
  font-size:clamp(15px, 1.25vw, 18px);
  line-height:1.5;
  /* 13% mais claro que o --apagado (#93A0A6): 7,4:1 vira 9,5:1. Fica com cor
     própria, fora da variável, porque quem usa --apagado no site é a régua de
     serviços e não é para ela subir junto. */
  color:#A6B5BC;
}
.palco .apoio-topo span{display:inline-block}

/* -------------------------------------------------------------- pergunta */
/* As duas réguas que ladeiam a frase. Nascem transparentes e morrem no frio,
   então não fecham caixa nem cortam a página em duas — que é o que a regra
   de "nenhuma linha divisória" queria evitar. */
.palco .pergunta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(12px, 1.6vw, 22px);
  color:var(--frio);
  font-size:clamp(15px, 1.4vw, 19px);
}
.palco .pergunta::before,
.palco .pergunta::after{
  content:"";
  height:1px;
  flex:1 1 0;
  /* 210px encurtado em 18%: as réguas estavam com mais largura que a
     própria pergunta e o separador pesava mais que o que ele separa. */
  max-width:172px;
  background:linear-gradient(90deg, transparent, rgba(var(--frio-rgb), .38));
}
.palco .pergunta::after{
  background:linear-gradient(90deg, rgba(var(--frio-rgb), .38), transparent);
}
@media (max-width:560px){
  /* ⚠️ `.palco` nos DOIS seletores. Estava `.palco .pergunta::before,
     .pergunta::after` — e o segundo, com uma classe só, perdia para o
     `.palco .pergunta::after` de cima (duas classes). Só a régua da ESQUERDA
     encolhia para 43px; a da direita ficava em 172px, e a frase saía do
     centro no celular. Ele viu na tela estreita antes de eu ver. */
  .palco .pergunta::before,
  .palco .pergunta::after{max-width:43px}
}

/* --------------------------------------------------------------- pílulas */
.palco .opcoes{gap:clamp(8px, 1vw, 14px)}
.palco .opcoes label{
  gap:.7em;
  padding:12px clamp(12px, 1.2vw, 20px);
  border:1px solid #23303A;
  border-radius:var(--raio);
  background:rgba(255,255,255,.018);
  font-family:var(--corpo);          /* mono em caixa dentro de pílula fica
                                        apertado; a maquete usa texto normal */
  font-size:clamp(13px, 1.05vw, 16px);
  letter-spacing:.02em;
  color:#C0CBD1;                     /* 12,6:1 — um degrau abaixo do marcado */
  transition:color .18s ease, border-color .18s ease,
             background-color .18s ease, box-shadow .18s ease;
}
.palco .opcoes label:hover{
  border-color:rgba(var(--frio-rgb), .55);
  background:rgba(var(--frio-rgb), .06);
}
/* ------------------------------------------------------ celular: a grade */
/* Deixadas soltas, as cinco pílulas quebram como couberem — duas numa linha,
   três na outra, cada uma com largura diferente. Funciona e parece
   improvisado. Aqui elas viram grade de duas colunas: largura igual, altura
   igual, e a quinta sozinha no meio, com a MESMA largura das outras (esticá-la
   até a borda faria "Vídeo" parecer mais importante que os outros quatro).

   O corpo e a caixa encolhem junto por medida, não por gosto: em meia tela de
   390px sobram ~117px de texto por pílula, e "IDENTIDADE VISUAL" não cabia —
   quebrava em duas linhas e puxava a altura da linha inteira. */
@media (max-width:560px){
  .palco .opcoes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .palco .opcoes li{display:flex}
  .palco .opcoes label{
    flex:1;
    letter-spacing:.02em;
    font-size:12px;
    padding:11px 12px;
    gap:.55em;
    white-space:normal;      /* rede de segurança: quebra antes de estourar */
  }
  .palco .opcoes .caixa{width:18px;height:18px}
  .palco .opcoes li:last-child{
    grid-column:1 / -1;
    justify-self:center;
    width:calc(50% - 5px);   /* metade da grade menos meia calha */
  }
}

/* a caixinha vira quadrado arredondado, e marcada acende com o visto */
.palco .caixa{
  width:20px;
  height:20px;
  border:1.5px solid #3D4C57;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.palco .opcoes label:hover .caixa{border-color:var(--frio)}
/* O marcado precisa ser um evento, não uma mudança de tom. Quatro coisas
   acontecem juntas: a borda vira frio cheio, o fundo acende, o halo abre e o
   texto sobe para branco puro. O não-marcado desce um degrau de propósito —
   metade do destaque vem do contraste ENTRE os dois estados, não do marcado
   sozinho. */
.palco .opcoes input:checked + label{
  color:#FFFFFF;
  border-color:var(--frio);
  background:rgba(var(--frio-rgb), .14);
  box-shadow:0 0 0 1px var(--frio),
             0 0 30px rgba(var(--frio-rgb), .32);
}
.palco .opcoes input:checked + label .caixa{
  background:var(--frio);
  border-color:var(--frio);
}
/* o visto é desenhado com borda, não com fonte: glifo de check muda de
   desenho a cada sistema e um deles vem emoji colorido */
.palco .opcoes input:checked + label .caixa::after{
  content:"";
  width:5px;
  height:10px;
  margin-top:-2px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
/* a onda de demonstração acompanha o novo estado marcado */
.palco .opcoes label.demo{
  color:#FFFFFF;
  border-color:var(--frio);
  background:rgba(var(--frio-rgb), .14);
  box-shadow:0 0 0 1px var(--frio), 0 0 30px rgba(var(--frio-rgb), .32);
}
.palco .opcoes label.demo .caixa{background:var(--frio);border-color:var(--frio)}

/* ------------------------------------------------------------ altura */
/* Sobe o conjunto ~46px. ⚠️ NÃO por padding: o palco é centrado no espaço que
   sobra, então engordar o respiro de baixo levanta o conteúdo MAS estica o
   documento — e a página, que fechou em 900px exatos, voltaria a rolar. O
   deslocamento move só o desenho, e a altura fica onde está.
   Só no desktop: no celular não há espaço sobrando para subir. */
@media (min-width:761px){
  .palco{transform:translateY(-46px)}
}

/* ----------------------------------------------------------------- botão */
.botao{
  border-radius:var(--raio);
  padding:18px clamp(24px, 2.4vw, 40px);
  font-size:clamp(16px, 1.3vw, 19px);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------------- recado */
/* A prévia só aparece depois da escolha — mas o lugar dela fica GUARDADO.
   ⚠️ Com `hidden` (display:none) ela funcionava e ficava feia: o palco é
   centrado, então a linha nascendo do nada empurrava título, frase, opções e
   botão uns 30px para cima a cada clique. Some sem sair do fluxo e nada se
   move; o que se paga é uma linha de ar a mais no estado inicial, que num
   bloco centrado lê como respiro e não como buraco. */
.palco .recado.vazio{
  opacity:0;
  visibility:hidden;
}
.palco .recado{transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){
  .palco .recado{transition:none}
}

/* O balãozinho antes da etiqueta. Máscara em data URI: o artifact e o
   file:// bloqueiam SVG externo, e este arquivo precisa abrir dos dois. */
.palco .recado{color:var(--apagado)}
.palco .recado em{
  color:var(--frio);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  /* inline-flex engole o espaço que vinha depois dos dois pontos, e a
     etiqueta colava na aspa: "sugerida:“Oi André!" */
  margin-right:.45em;
}
.palco .recado em::before{
  content:"";
  width:1.05em;
  height:1.05em;
  flex:none;
  background:currentColor;
  -webkit-mask:var(--balao) center/contain no-repeat;
  mask:var(--balao) center/contain no-repeat;
}
:root{
  --balao:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>');
}

/* ===== MAQUETE 2026-08-24 — fim ===== */

/* ===== MENU SUAVE 2026-08-24 — inicio ===== */
/* =====================================================================
   A régua de serviços com o acabamento do vídeo que ele mandou em 24/08
   (interface da ElevenLabs, no Instagram). O que se copiou de lá são
   QUATRO coisas, e nenhuma delas é cor nova — o ciano do site já é o
   ciano de lá:

     1. a curva. Tudo naquela interface anda em ease-out largo e chega
        devagar. O site estava em .18s ease, que é rápido demais para ler
        como suavidade: acende antes do olho acompanhar.
     2. a borda que ACENDE em vez de trocar de cor, com um brilho que
        segue o ponteiro dentro da pílula.
     3. a entrada em cascata — os itens sobem um atrás do outro, não os
        cinco de uma vez.
     4. a revelação por luz: ao marcar, uma linha de brilho atravessa a
        pílula uma vez e apaga. É o "reveal" do vídeo aos 00:05.

   O que NÃO veio de lá, de propósito: o card que cresce e engole a tela,
   e o desfoque de fundo. O primeiro exigiria transição de página (aqui o
   clique é um checkbox, não uma navegação) e o segundo brigaria com a
   regra de "o que se move é luz" — desfoque em cima do monograma parado
   dá borrão, não profundidade.

   Nada aqui inventa linha divisória, partícula ou movimento no
   monograma: as três regras da casa continuam de pé.
   ===================================================================== */

:root{
  /* a curva do vídeo: sai rápido, chega devagar. Uma só para tudo, senão
     cada elemento anda num tempo e o conjunto perde a unidade */
  --suave:cubic-bezier(.4, 0, .2, 1);
  /* a que o site já usava na entrada dos blocos — fica para o que SOBE,
     porque ela freia mais longe e o item parece pousar */
  --pousa:cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------- 1. a pílula, por baixo */
/* `isolation:isolate` é o que permite o brilho viver em z-index:-1 e ainda
   assim ficar ACIMA do fundo da pílula e ABAIXO do texto. Sem isso ele cai
   atrás da página inteira e some. */
.palco .opcoes label{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* .32s no lugar de .18s. Medido contra o vídeo: os estados de lá levam
     entre 250 e 400ms. Abaixo de ~250 o olho lê troca; acima de ~450 lê
     lentidão. */
  transition:color .32s var(--suave),
             border-color .32s var(--suave),
             background-color .32s var(--suave),
             box-shadow .32s var(--suave),
             transform .32s var(--pousa);
}

/* ------------------------------------- 2. o brilho que segue o ponteiro */
/* O --mx/--my vem do site.js. Sem JS o gradiente fica no centro (50% 50%) e
   o efeito continua funcionando, só não segue o mouse — degradação limpa. */
.palco .opcoes label::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  transition:opacity .32s var(--suave);
  background:radial-gradient(
    170px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--frio-rgb), .22),
    rgba(var(--frio-rgb), .05) 45%,
    transparent 72%);
}

/* Só onde existe ponteiro de verdade. No celular o :hover gruda depois do
   toque e a pílula fica acesa sem ninguém em cima dela. */
@media (hover:hover) and (pointer:fine){
  .palco .opcoes label:hover::before{opacity:1}
  .palco .opcoes label:hover{
    border-color:rgba(var(--frio-rgb), .75);
    background:rgba(var(--frio-rgb), .05);
    box-shadow:0 0 22px rgba(var(--frio-rgb), .13);
    /* 2px. Três já lê como botão pulando; um não se vê */
    transform:translateY(-2px);
  }
  .palco .opcoes label:hover .caixa{
    border-color:var(--frio);
    box-shadow:0 0 10px rgba(var(--frio-rgb), .45);
  }
}

/* o dedo também merece resposta: aperto afunda em vez de levantar */
.palco .opcoes label:active{
  transform:translateY(0) scale(.985);
  transition-duration:.09s;
}

/* --------------------------------------------- 3. a caixinha, com tempo */
.palco .caixa{
  position:relative;
  transition:background-color .28s var(--suave),
             border-color .28s var(--suave),
             box-shadow .28s var(--suave);
}

/* A bolha que abre e apaga quando marca. É um anel que cresce e some — o
   mesmo gesto do reveal do vídeo, em miniatura, ancorado onde o clique
   aconteceu. Vive no ::before da caixa para não brigar com o visto, que já
   ocupa o ::after. */
.palco .caixa::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid var(--frio);
  opacity:0;
  pointer-events:none;
}

/* ------------------------------------ 4. marcar: três coisas em sequência */
/* A ordem importa e é o que faz parecer caro: a caixa acende (0ms), o visto
   é desenhado (60ms), a linha de luz atravessa (0 a 620ms) e o halo cresce
   junto pela transição. Nada disso espera o outro terminar — elas se
   sobrepõem, como no vídeo. */
.palco .opcoes input:checked + label .caixa::before{
  animation:bolha .58s var(--suave);
}
@keyframes bolha{
  from{opacity:.85; transform:scale(1)}
  to  {opacity:0;   transform:scale(2.7)}
}

.palco .opcoes input:checked + label .caixa::after{
  animation:visto .3s var(--pousa) .06s both;
}
@keyframes visto{
  from{opacity:0; transform:rotate(45deg) scale(.35)}
  to  {opacity:1; transform:rotate(45deg) scale(1)}
}

/* A linha de luz que varre a pílula. scaleX a partir do centro, com o brilho
   no meio do gradiente: ela nasce como um ponto e se abre para os dois
   lados. O overflow:hidden na pílula é o que a corta na borda. */
.palco .opcoes label::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  z-index:-1;
  opacity:0;
  transform:scaleX(0);
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    rgba(var(--frio-rgb), .9) 50%,
    transparent);
}
.palco .opcoes input:checked + label::after{
  animation:varre .62s var(--suave);
}
@keyframes varre{
  0%  {transform:scaleX(0); opacity:0}
  25% {opacity:1}
  100%{transform:scaleX(1); opacity:0}
}

/* O halo do marcado abre mais largo e mais suave que antes (30px para 38px,
   e o segundo anel entra para dar profundidade em vez de contorno). */
.palco .opcoes input:checked + label{
  box-shadow:0 0 0 1px var(--frio),
             0 0 38px rgba(var(--frio-rgb), .30),
             0 0 90px rgba(var(--frio-rgb), .10);
}

/* --------------------------------------------- 5. a entrada em cascata */
/* Os cinco itens sobem um atrás do outro depois que o bloco do formulário
   entra. O atraso inicial não é gosto: o .escolha é o TERCEIRO bloco .sobe
   do palco e o site.js dá 70ms de atraso por bloco — então ele próprio só
   começa a aparecer aos 140ms. Começar antes disso faria os itens subirem
   dentro de um formulário ainda invisível. */
@media (prefers-reduced-motion:no-preference){
  .js .palco .opcoes li{
    opacity:0;
    transform:translateY(10px);
    transition:opacity .5s var(--pousa), transform .5s var(--pousa);
  }
  .js .palco.entrou .opcoes li{opacity:1; transform:none}
  .js .palco.entrou .opcoes li:nth-child(1){transition-delay:.20s}
  .js .palco.entrou .opcoes li:nth-child(2){transition-delay:.26s}
  .js .palco.entrou .opcoes li:nth-child(3){transition-delay:.32s}
  .js .palco.entrou .opcoes li:nth-child(4){transition-delay:.38s}
  .js .palco.entrou .opcoes li:nth-child(5){transition-delay:.44s}
}

/* --------------------------------------- 6. a onda de demonstração, calma */
/* A onda que acende as cinco caixas de 5 em 5 segundos continua existindo —
   é ela que diz "aqui se clica". O que ela NÃO ganha é a linha de luz nem a
   bolha: um brilho varrendo a tela a cada 5 segundos sozinho, sem ninguém
   ter tocado em nada, é a diferença entre um site vivo e um site piscando.
   Ela herda só o halo, que agora entra em .32s em vez de .18s. */
.palco .opcoes label.demo{
  box-shadow:0 0 0 1px var(--frio),
             0 0 38px rgba(var(--frio-rgb), .30),
             0 0 90px rgba(var(--frio-rgb), .10);
}

/* ------------------------------------------------------ 7. quem não quer */
/* Movimento reduzido não é "menos animação": é NENHUMA. Sobra a troca de
   cor, que é informação, não enfeite. */
@media (prefers-reduced-motion:reduce){
  .palco .opcoes label,
  .palco .caixa{transition:none}
  .palco .opcoes label:hover{transform:none}
  .palco .opcoes label::before,
  .palco .opcoes label::after,
  .palco .caixa::before{display:none}
  .palco .opcoes input:checked + label .caixa::after{animation:none}
  .js .palco .opcoes li{opacity:1; transform:none; transition:none}
}
/* ===== MENU SUAVE 2026-08-24 — fim ===== */

/* ===== PARALAXE INCLINA 2026-08-24 — inicio ===== */
/* A paralaxe que ele escolheu em 24/08: o bloco vira uma placa com
   perspectiva e se vira para o cursor. O `paralaxe.py` do provisorio
   guarda a versão "Camada" também, que ele não quis.

   ⚠️ O botão do WhatsApp fica FORA da placa e quase não anda (medido:
   0,7px com o cursor no canto). Alvo que se mexe é alvo mais difícil de
   acertar — lei de Fitts. A página existe para o cara apertar aquele
   botão; ele não foge do dedo dele. */
@media (hover:hover) and (pointer:fine){

  /* A perspectiva mora no pai; quem gira é o palco.

     ⚠️ E é aqui que a placa girada precisa ser APARADA. Girando, ela passa da
     borda: medido, 13px à direita e 15px abaixo com o cursor no canto inferior
     esquerdo. Numa página que fecha na altura exata da tela, esses 15px viram
     BARRA DE ROLAGEM — as duas, porque a barra vertical estreita a janela e
     estoura a horizontal atrás. Foi o que ele viu no site no ar.

     `clip` e não `hidden`: `hidden` cria caixa de rolagem (e some com o
     `position:sticky` de quem vier depois); `clip` só apara, e **nunca gera
     rolagem**, que é exatamente o que se quer.

     ⚠️ E `overflow-clip-margin` não é enfeite: o `.palco` tem
     `transform:translateY(-46px)` no desktop, então ele começa 46px ACIMA do
     `main` — medido, `main` em [0,94] e `.palco` em [0,48]. Um `clip` seco
     cortaria o topo do título. Os 64px cobrem os 46 com folga; para o lado e
     para baixo o excedente pinta fora da tela e ninguém vê, sem rolagem
     nenhuma. */
  main{
    perspective:1400px;
    overflow:clip;
    overflow-clip-margin:64px;
  }
  /* ⚠️ `rotate:` separado do `transform:`. O `.palco` já usa
     `transform:translateY(-46px)` no desktop e sobrescrever aquilo aqui
     levantaria o bloco 46px de volta — um erro que só apareceria em tela
     grande. */
  .palco{
    rotate:y calc(var(--px, 0) * 2.2deg);
  }
  .palco .escolha{
    rotate:x calc(var(--py, 0) * -1.6deg);
  }

  /* ⚠️⚠️ NADA de `transform-style:preserve-3d`, e NADA de `translateZ` nas
     pílulas. Isto aqui já esteve no ar e QUEBROU O CLIQUE.

     A versão anterior punha as cinco pílulas em alturas diferentes dentro da
     placa, para a régua abrir em leque. Ficava bonito e **duas delas paravam
     de marcar** — a primeira e a última, justamente as que ficavam em
     `--z:0px`. O Chrome devolve `translateZ(0)` como matriz 2D e as outras
     como `matrix3d`; num contexto `preserve-3d`, misturar plano achatado com
     plano 3D bagunça o teste de clique, e o ponto do rótulo passava a
     responder pela `section.palco`. Medido: `elementFromPoint` no centro do
     rótulo devolvia o palco, não o rótulo.

     Pôr Z em todas as cinco também resolvia, e foi testado. Não entrou: a
     régua é a ÚNICA coisa que esta página existe para fazer funcionar, e
     apostá-la numa peculiaridade de ordenação 3D do navegador, por 3px de
     leque, é troca ruim.

     Sem `preserve-3d` a placa vira UM plano só, girado. O teste de clique
     passa a ser uma matriz inversa e pronto — que é o caminho que todo
     navegador acerta. O giro, que é o que ele aprovou, continua igual.

     O `confere-aplicado.js` clica nas cinco e exige que as cinco marquem. */

  /* o fundo faz o contrário do bloco, e é isso que abre o espaço entre eles:
     a placa se vira para ti enquanto a luz corre para trás */
  /* ⚠️ A regra `.ceu > .luz` da Inclina saiu aqui. Aqueles elementos
     só existem no artifact de comparação, onde os criei para os quatro
     fundos. Com o fundo em "Hoje" — o escolhido — eles não existem, e a
     regra seria CSS morto. Medido: a luz do fundo anda 0px nesta
     combinação, e é assim de propósito. */

  .palco .astro{
    translate:calc(var(--px, 0) * -9px) calc(var(--py, 0) * -6px);
  }
  /* ⚠️ O botão do WhatsApp. Sem `preserve-3d` ele gira junto com a placa como
     todo o resto — e o quanto ele anda passa a ser medido, não presumido. A
     conferência reprova acima de 4px. Ver a lei de Fitts no topo do arquivo. */

}

  @media (prefers-reduced-motion:reduce){
    .ceu > .luz,
    .palco .astro,
    .palco .titulo,
    .palco .apoio-topo,
    .palco .escolha,
    .palco .acao{translate:none; rotate:none}
    .palco{rotate:none}
  }
/* ===== PARALAXE INCLINA 2026-08-24 — fim ===== */

/* ===== INTRO 2026-08-25 (css) — inicio ===== */
/* A intro que ele pediu em 25/08: a pergunta primeiro, o título
   decodificando letra a letra, e então o resto. O porquê de cada
   decisão está no `provisorio/intro.py`.

   ⚠️ Ponto de retorno pedido por ele: `_antes-intro-2026-08-25-2213/`,
   com um COMO-VOLTAR.txt dentro. Desligar aqui é
   `python provisorio/aplicar-suave.py --sem-intro`. */

  /* --------------------------------------------- o reveal, fora da intro */
  /* ⚠️ Estas transições ficam SEMPRE ligadas, fora do escopo `.intro`. Se
     morassem dentro dele, tirar a classe no fim tiraria a transição junto e o
     resto da página apareceria de estalo.

     Os atrasos são o que faz o "e então o restante aparece" ser uma cascata e
     não um piscar: a frase de apoio, a régua, o botão. Nesta ordem, porque é a
     ordem em que se lê. */
  .palco .apoio-topo{transition:opacity .5s var(--pousa) 0s}
  .palco .opcoes    {transition:opacity .5s var(--pousa) .09s}
  .palco .acao      {transition:opacity .5s var(--pousa) .18s}

  /* ---------------------------------------------- a abertura (duas frases) */
  /* Pedido dele em 25/08: antes do site se formar, duas frases grandes,
     brancas, sozinhas — "Me conte o problema." (1s) e "Eu encontro a
     solução." (1,5s) — e a segunda VIRA o "Como posso ajudar?" que já existe
     na página, enquanto o resto se forma.

     ⚠️ A terceira frase não é um texto novo: é a MESMA caixa viajando até o
     lugar exato da `.pergunta` real e encolhendo até o tamanho dela. Escrever
     um terceiro texto e trocar por corte faria a frase piscar de lugar. */
  /* ⚠️ `body > .abertura`, e não `.abertura` solto. O estilo.css tem
     `body > *:not(.ceu){position:relative; z-index:1}` — (0,0,1,1), mais
     pesado que uma classe sozinha — e ele ganhava do meu `position:fixed`.
     A capa virava um bloco no fluxo, empurrava a página para 948px de altura
     e ABRIA A BARRA DE ROLAGEM: a página encolhia 15px durante a abertura e
     o título dava um salto de largura ao voltar. Foi assim que o defeito
     apareceu no medidor. Mesma pegadinha que derrubou o `.painel`. */
  body > .abertura{
    position:fixed; inset:0; z-index:40;
    display:flex; align-items:center; justify-content:center;
    padding:0 6vw; text-align:center;
    pointer-events:none;                 /* nunca rouba o clique */
  }
  .abertura .frase{
    display:inline-block;
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(28px, 4.6vw, 64px);
    line-height:1.14;
    letter-spacing:-.01em;
    color:#fff;
    /* sem halo: ele pediu a tela TOTALMENTE preta durante as frases, e um
       brilho ciano atras da letra ja acendia o fundo (medido: 0,9 de 255). */
    text-shadow:none;
    opacity:0;
    transform:translateY(10px);
    transform-origin:50% 50%;
    will-change:transform, opacity, filter;
  }
  .abertura .frase.entra{
    opacity:1; transform:none;
    transition:opacity .45s var(--pousa), transform .45s var(--pousa);
  }
  .abertura .frase.sai{
    opacity:0; transform:translateY(-8px);
    transition:opacity .32s ease, transform .32s ease;
  }

  /* --------------------------------------------- o fundo apagado, e a luz */
  /* Pedido dele: durante as frases o fundo é PRETO DE VERDADE, e só "acende"
     depois — e, na segunda rodada, só DEPOIS que o reflexo já passou pelo
     logotipo. Por isso o escuro tem classe própria (`escuro`) e não vive mais
     preso ao `abrindo`: as duas coisas terminam em momentos diferentes.

     ⚠️ `animation:none` junto com a opacidade. O `.ceu` roda a `respira`, que
     anima a própria opacidade — e animação ganha de declaração normal, então
     um `opacity:0` sozinho não faria nada.

     ⚠️ E é CSS, não JS: tem que valer no PRIMEIRO quadro. Uma cortina criada
     pelo site.js chegaria tarde e o brilho piscaria antes de apagar.

     ⚠️ O `.astro` — o monograma grande atrás do título — NÃO é o `.ceu`. Ele
     mora dentro do palco, com opacidade própria (`--logo`, 1,6%), e por isso
     sobrevivia ao apagão: ele viu a marca no vídeo e reclamou, com razão.
     1,6% num fundo preto ainda desenha a forma.

     A luz sobe pela classe `acendendo`, um só passo de 1,2s. Quando ela sai, a
     `respira` volta — e volta sem salto porque o quadro 0% dela é `opacity:1`,
     exatamente onde a transição terminou. */
  .ceu{transition:opacity 1.2s var(--pousa)}
  .astro{transition:opacity 1.2s var(--pousa)}
  body{transition:background-color 1.2s var(--pousa)}
  .js.escuro .ceu{animation:none; opacity:0}
  .js.escuro .palco .astro{opacity:0}
  .js.escuro body{background-color:#000}
  .js.acendendo .ceu{animation:none; opacity:1}

  /* enquanto as duas frases estão na tela, NADA mais existe — nem o topo */
  .js.intro.abrindo .topo{opacity:0}
  .topo{transition:opacity .5s var(--pousa)}
  .js.intro.abrindo .palco .titulo{opacity:0}
  .js.intro.abrindo .palco .pergunta{opacity:0; animation:none}
  .js.intro.abrindo .palco .pergunta::before,
  .js.intro.abrindo .palco .pergunta::after{animation:none}

  /* ⚠️ Enquanto a frase viaja, a pergunta de verdade continua ESCONDIDA.
     Sem isto ela nascia no instante em que a abertura soltava a página (a
     animação `intro-pergunta` dispara sozinha), e o quadro mostrava os dois
     textos ao mesmo tempo: o grande borrado por cima, o pequeno já aceso
     embaixo. Vira troca de texto, não transformação. Pego no vídeo. */
  .js.intro.morfando .palco .pergunta{opacity:0; animation:none}

  /* a pergunta de verdade assume no fim da viagem, sem reanimar */
  .js.intro .palco .pergunta.pousou{opacity:1; animation:none}

  /* --------------------------------------------------- o reflexo no simbolo */
  /* Pedido dele, com a referencia do icone do After Effects: *"na escuridao o
     logo nao e visto, apenas o reflexo passando na sua silhueta"*.

     ⚠️ E o SIMBOLO DO FUNDO — o `.astro`, o monograma grande atras do titulo —
     e nao a marca do canto superior esquerdo. Fiz no canto primeiro; ele
     corrigiu. O do canto continua entrando como sempre, junto com a barra.

     O simbolo NAO esta aceso quando a luz corre: durante o reflexo ele e
     pintado SO pela faixa, e fora dela nao existe nada. O que se ve e a
     silhueta sendo revelada pela luz que passa. Depois ele volta ao que e no
     site: 1,6% de opacidade, quase um vinco no fundo.

     ⚠️ Ja tentei tres vezes errado, e o video pegou todas:
       1. faixa POR CIMA num `::after` com `mix-blend-mode:screen` — sobre
          fundo quase preto o `screen` devolve o proprio cinza da faixa: um
          RETANGULO cinza, e o brilho nao encostava no desenho;
       2. faixa correndo DENTRO do desenho, mas com ele ja aceso — branco
          sobre branco nao le, e a luz existia sem se ver;
       3. no logotipo errado.
     O que resolve nao e a faixa: e apagar o que esta embaixo dela.

     ⚠️ NADA de `background-attachment:fixed` aqui. Ele parecia a solucao — e
     era, enquanto a luz atravessava DOIS desenhos (o monograma e o nome do
     canto), porque so ele faz os dois lerem a mesma luz. Mas `fixed` dentro de
     um elemento TRANSFORMADO deixa de ser medido na janela e passa a ser
     medido no proprio elemento — e o `.astro` tem `translate` da paralaxe. A
     faixa caia quase toda fora do desenho e o efeito sumia. Com um desenho so,
     `fixed` nao serve para nada.

     ⚠️ A conta do `background-position` em porcentagem NAO e "quantos por
     cento da caixa": com a imagem maior que a caixa, P% desloca P% de
     (imagem - caixa). Foi assim que uma travessia virou seis larguras de tela
     e a faixa cruzou rapido demais para se ver (medido: brilho 1,9 num quadro
     e 0,009 nos vizinhos). Com 300% de largura, a travessia inteira e P de
     100% (faixa fora, a esquerda) a 0% (fora, a direita) — dai o sentido: do
     MAIOR para o MENOR e esquerda -> direita. */
  /* ⚠️ A opacidade faz parte da animacao, e termina em ZERO. Sem isso havia
     um FLASH: quando a classe `reflexo` saia, o simbolo perdia a pintura de
     faixa e voltava a ser mascara CHEIA de cor — mas ainda em `opacity:1`,
     descendo para 1,6% ao longo de 1,2s de transicao. Ou seja, um monograma
     claro piscava depois do reflexo, antes do site se formar. Ele viu.
     Terminando a animacao em 0, o que sobra depois da luz e escuridao, e a
     volta para os 1,6% acontece de um valor invisivel para outro. */
  @keyframes reflexo-logo{
    from{background-position:112% 0; opacity:1}
    96% {opacity:1}
    to  {background-position:-12% 0; opacity:0}
  }
  .js.escuro.reflexo .palco .astro{
    opacity:1;
    transition:none;                   /* <- acende no quadro, nao em 1,2s */
    background-color:transparent;      /* <- fora da faixa nao existe nada */
    background-size:300% 100%;
    background-repeat:no-repeat;
    background-image:linear-gradient(100deg,
      transparent 37%, rgba(180,244,255,.50) 45%, #ffffff 50%,
      rgba(180,244,255,.50) 55%, transparent 63%);
    animation:reflexo-logo 1.15s cubic-bezier(.42,0,.3,1) .12s 1 both;
  }

  /* ------------------------------------------------------ a espera da intro */
  /* Enquanto a intro roda, o palco fica retido e só a pergunta aparece.
     ⚠️ O `.escolha` é um bloco `.sobe` (nasce em opacity 0), e filho de pai
     transparente não aparece sozinho — por isso o pai é liberado aqui e quem
     segura passa a ser a régua.
     ⚠️ `.js.intro` COLADO, sem espaço. As duas classes moram no mesmo
     `<html>`, e `.js .intro` (com espaço) pede um `.intro` DESCENDENTE de
     um `.js` — nunca casa. O próprio site.js já avisa disso no comentário
     da entrada ("as duas classes no mesmo elemento não casariam") e eu caí
     no mesmo buraco: a intro não reteve nada, e a régua apareceu aos 39ms.

     ⚠️ Especificidade de 4 classes de propósito: precisa ganhar do
     `.js .entrou .sobe` (3 classes), que a entrada normal aplica assim que a
     página carrega. Sem isso a intro perderia a corrida e não reteria nada. */
  .js.intro .palco .apoio-topo,
  .js.intro .palco .acao,
  .js.intro .palco .recado{opacity:0}
  .js.intro .palco .escolha{opacity:1; transform:none}
  .js.intro .palco .opcoes{opacity:0}

  /* ⚠️ O TÍTULO FICA VISÍVEL durante a intro — ele NÃO entra na lista acima.
     A primeira versão o retinha em opacity 0 junto com o resto, e o efeito
     inteiro acontecia ATRÁS DA CORTINA: as letras decifravam invisíveis e o
     título só aparecia pronto, num fade. Quem olhasse via um fade comum, não
     uma decodificação. Foi o vídeo que pegou — nenhuma métrica acusava, porque
     todas diziam "título pronto aos 1,28s", e estava mesmo.

     Quem esconde o título no começo são as LETRAS (`visibility:hidden` até
     chegar a vez de cada uma), não a opacidade do bloco. Assim a tela abre só
     com a pergunta do mesmo jeito, e a decodificação acontece à vista. */
  .js.intro .palco .titulo{opacity:1; transform:none}

  /* a pergunta entra sozinha, e é a única coisa na tela */
  .js.intro .palco .pergunta{
    opacity:0;
    animation:intro-pergunta .62s cubic-bezier(.16,1,.3,1) forwards;
  }
  @keyframes intro-pergunta{
    from{opacity:0; transform:translateY(6px)}
    to  {opacity:1; transform:none}
  }

  /* as réguas que ladeiam a frase abrem junto: elas são a moldura dela, e
     entrar depois faria a frase pular de largura */
  .js.intro .palco .pergunta::before,
  .js.intro .palco .pergunta::after{
    transform:scaleX(0);
    transform-origin:right;
    animation:intro-regua .7s cubic-bezier(.16,1,.3,1) .18s forwards;
  }
  .js.intro .palco .pergunta::after{transform-origin:left}
  @keyframes intro-regua{ to{transform:scaleX(1)} }

  /* ------------------------------------------- o título decodificando */
  /* Cada letra é uma caixa de largura FIXA, medida no carregamento. O glifo
     troca dentro dela; a caixa não se mexe. É isto que impede o terremoto num
     título de 92px. */
  /* ⚠️ `.titulo .letra`, nunca `.letra` solto. O estilo.css tem
     `.titulo span{display:block}` — é ele que põe "SOLUÇÕES" e "DIGITAIS" em
     duas linhas — e essa regra pesa (0,0,1,1), mais que uma classe sozinha
     (0,0,1,0). Com `.letra` solto, CADA LETRA virava um bloco: uma por linha,
     a página esticou para 1825px de altura e o botão do WhatsApp foi parar
     fora da tela. Medido, não deduzido. */
  .titulo .letra{
    display:inline-block;
    text-align:center;
    white-space:pre;
  }
  /* a que ainda não chegou some SEM sair do lugar */
  .titulo .letra[data-estado="espera"]{visibility:hidden}
  /* a que está girando é a única colorida: ciano decifrando, branco decifrado */
  .titulo .letra[data-estado="gira"]{
    color:var(--frio);
    text-shadow:0 0 18px rgba(var(--frio-rgb), .55);
  }

  /* o traço que corre à frente da decodificação */
  .cursor-intro{
    display:inline-block;
    width:.055em;
    height:.78em;
    margin-left:.03em;
    background:var(--frio);
    box-shadow:0 0 14px rgba(var(--frio-rgb), .8);
    animation:intro-pisca .5s steps(1, end) infinite;
  }
  @keyframes intro-pisca{ 0%,49%{opacity:1} 50%,100%{opacity:.15} }

  /* o texto de verdade, para leitor de tela: fora da vista, dentro do DOM */
  .so-leitor{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    clip-path:inset(50%);
    overflow:hidden;
    white-space:nowrap;
  }

  /* --------------------------------------------------- quem não quer intro */
  @media (prefers-reduced-motion:reduce){
    .js.intro .palco .apoio-topo,
    .js.intro .palco .acao,
    .js.intro .palco .recado,
    .js.intro .palco .opcoes{opacity:1 !important}
    .js.intro .palco .pergunta{opacity:1; animation:none}
    .js.intro .palco .pergunta::before,
    .js.intro .palco .pergunta::after{transform:none; animation:none}
    .titulo .letra[data-estado="espera"]{visibility:visible}
    .cursor-intro{display:none}
    .abertura{display:none}
    .js.escuro .ceu{opacity:1}
    .js.escuro .palco .astro{opacity:var(--logo)}
    .js.escuro body{background-color:var(--preto)}
    /* sem reflexo: o monograma volta a ser a mascara chapada e o nome volta
       a ser texto pintado, nao texto recortado num degrade */
    /* sem reflexo: o simbolo volta a ser a mascara chapada de sempre */
    .js.escuro.reflexo .palco .astro{animation:none; background-image:none;
      background-color:currentColor; opacity:var(--logo)}
  }
/* ===== INTRO 2026-08-25 (css) — fim ===== */

/* ===== BALANCO WIGGLE 2026-08-26 (css) — inicio ===== */
/* O balanco continuo que ele escolheu em 26/08, entre tres versoes:
   ruido, no sentido do After Effects. O porque de cada numero esta
   no `provisorio/wiggle.py`. Desligar aqui e
   `python provisorio/aplicar-suave.py --sem-wiggle`. */

  .palco .astro{
    transform:translate(calc(-50% + var(--wax, 0px)), calc(-50% + var(--way, 0px)))
              rotate(var(--war, 0deg));
  }
  /* ⚠️ O TEXTO NAO ENTRA no wiggle, e isso e uma decisao — mas descoberta por
     engano. A regra que eu tinha escrito aqui (`.palco .titulo`, duas classes)
     perdia calada para `.js .entrou .sobe{transform:none}` do estilo.css, que
     tem tres. O medidor mostrou 0px no titulo enquanto o monograma andava.
     Podia consertar a especificidade; escolhi manter parado. Ruido tem
     frequencia mais alta que seno — no monograma isso e vida, na letra vira
     tremor. Quem quiser o titulo boiando tem a versao Boia, que anda em curva
     lenta. */
  .ceu{
    transform:translate(var(--wcx, 0px), var(--wcy, 0px));
  }
  /* e aqui o que realmente se ve: a luz mudando de intensidade em ritmo
     irregular */
  .ceu::before{
    content:"";
    position:absolute;
    inset:-10%;
    background:radial-gradient(50% 38% at 50% 33%,
      rgba(var(--frio-rgb), .16), transparent 72%);
    opacity:var(--wop, .6);
  }

  @media (prefers-reduced-motion:reduce){
    .palco .astro,
    .palco .titulo,
    .palco .apoio-topo,
    .ceu,
    .ceu::before{ animation:none !important; transform:none !important }
    .palco .astro{ transform:translate(-50%, -50%) !important }
  }
/* ===== BALANCO WIGGLE 2026-08-26 (css) — fim ===== */


/* ===== IDIOMA 2026-09-01 — inicio =========================================
   O par PT · EN no canto superior direito, do lado oposto ao monograma. O
   `.topo` ja e `space-between`: basta existir um segundo filho para ele ir
   para a direita — nao precisou de posicionamento nenhum.

   ⚠️ A cor segue a divisao da paleta, nao o gosto: link e `--frio`, como o
   resto dos links do site, e o branco continua reservado para o botao do
   WhatsApp e a segunda linha do titulo. Idioma nao pode competir com o CTA.

   ⚠️ O idioma que ESTA valendo fica apagado e sem sublinhado. Marcar o atual
   em destaque seria pedir clique no que ja esta aberto; o que precisa chamar
   e a saida, nao o lugar onde a pessoa esta.

   ⚠️ O padding de 14px nao e enfeite: 11px de letra dao um alvo de 12px de
   altura, que nenhum polegar acerta. Ele leva o alvo a ~40px e a margem
   negativa devolve a altura, para o topo nao crescer por causa disso.

   Durante a abertura da home o `.topo` inteiro esta em opacity 0 — o par
   entra junto com o resto, sem regra propria.
   ========================================================================= */
.idioma{
  display:flex;
  align-items:center;
  flex:none;
  font-family:var(--rotulo);
  font-size:11px;
  letter-spacing:.16em;
  line-height:1;
}
.idioma a{
  color:var(--frio);
  text-decoration:none;
  padding:14px 7px;
  margin:-14px 0;
  transition:color .32s var(--suave);
}
.idioma a:hover,
.idioma a:focus-visible{
  text-decoration:underline;
  text-underline-offset:4px;
}
.idioma .entre{
  color:var(--apagado-3);
  opacity:.6;
}
.idioma a.agora,
.idioma a.agora:hover{
  color:var(--apagado-2);
  cursor:default;
  text-decoration:none;
}
@media (max-width:420px){
  .idioma{font-size:10px; letter-spacing:.12em}
  .idioma a{padding:14px 5px}
}
/* ===== IDIOMA 2026-09-01 — fim ===== */