/* ==========================================================================
   CSS DE PÁGINA — o que não é componente

   Quatro coisas moram aqui: o botão vestindo o verde do CTA, o cabeçalho de
   marca mais data sobreposto ao hero, a barra de conversão colada no pé e a
   escala de títulos da página. Tudo o mais vem da biblioteca.
   ========================================================================== */

/* ==========================================================================
   O BOTÃO É O ÚNICO LUGAR DO VERDE SATURADO

   O .btn-primary do core lê --accent, que nesta página passou a ser o verde
   claro de destaque. Uma regra, aqui, devolve o saturado ao botão: é a
   tradução literal do pedido do Gabriel em 22/09, "esse verde vai ficar
   apenas para o CTA e nada mais".

   Não mexi no core nem no componente, como manda o §10 do contrato. E não
   virou token global: --cta é do tema deste projeto, e quem o consome é esta
   regra e mais nenhuma.
   ========================================================================== */

/* O DESENHO DO BOTÃO, refeito em 22/09 a pedido do Gabriel ("o nosso cta está
   medonho"). Quatro decisões, e nenhuma delas é sombra ou brilho, que é regra
   dele desde 20/09:

   1. GRADIENTE, e não chapado. Vai do verde claro no canto superior esquerdo
      ao verde fundo no inferior direito, num ângulo só (118deg). Chapado, uma
      pílula grande de cor saturada lê como adesivo; com o gradiente ela ganha
      volume sem precisar de sombra por baixo.

   2. A BORDA É UM FILETE DE LUZ, não um contorno. Ela é um anel de 1px
      pintado com outro gradiente, branco a 62% em cima indo a nada embaixo,
      recortado com máscara para o miolo ficar vago. É o que simula luz vindo
      de cima e o que separa o botão do fundo sem desenhar uma linha.

   3. O HOVER TROCA A LUZ, não a forma. Uma segunda camada, mais clara, entra
      por opacidade atrás do texto. O botão não salta, não ganha halo e não
      esvazia em vidro como fazia antes: responde só com tinta.

   4. TIPOGRAFIA UM GRAU ACIMA: 12px com .08em de entreletra, no lugar de
      11.5px com .12em. Caixa alta muito espaçada em corpo pequeno é vocabulário
      de botão de 2015, e era metade do problema. */
.btn-primary{
  position:relative;isolation:isolate;
  border:0;color:var(--dark);
  padding:17px 34px;font-size:12px;letter-spacing:.08em;
  background:linear-gradient(118deg,#3ee061 0%,#0cd338 46%,#07b92e 100%);
  transition:color .35s;
}

/* A camada clara do hover. z-index negativo com isolation no pai: fica atrás
   do texto e à frente do fundo do próprio botão. */
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(118deg,var(--accent) 0%,#19e04a 52%,var(--cta) 100%);
  opacity:0;transition:opacity .45s var(--ease);
}
.btn-primary:hover::before{opacity:1}

/* O filete. padding:1px define a espessura do anel; a máscara subtrai o miolo,
   então o texto continua visível através dele. */
.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.05) 58%,rgba(0,0,0,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* O core troca o fundo por vidro fosco no hover. Aqui o fundo é o gradiente,
   então ele precisa ser redeclarado, e o desfoque desligado. */
.btn-primary:hover{
  background:linear-gradient(118deg,#3ee061 0%,#0cd338 46%,#07b92e 100%);
  color:var(--dark);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* ==========================================================================
   FALAR COM ATENDIMENTO — o segundo caminho, sem caixa

   Sem borda e sem fundo, por pedido do Gabriel em 22/09: dois botões
   desenhados lado a lado disputam, e o que importa clicar é um só. O hover é
   um filete embaixo da palavra, como link, e por isso o rótulo vai dentro de
   um <span>: a régua tem de parar no fim do texto, sem passar por baixo do
   ícone.

   A altura de caixa é a mesma do primário (17px de padding vertical), para os
   dois assentarem na mesma linha, apesar de um ter caixa e o outro não.
   ========================================================================== */
/* CAIXA DESDE 24/09: "apenas o border para deixar mais claro que é um botão",
   pedido do time por meio do Gabriel. Sem fundo, que continua sendo o que
   separa o secundário do primário; o que ele ganhou foi contorno, o mesmo
   raio e a mesma altura de caixa do primário, para os dois assentarem na
   linha. O ícone do WhatsApp passou para a direita do texto no mesmo pedido,
   e por isso a régua embaixo do <span> saiu: sublinhado no meio de uma caixa
   com borda vira dois traços concorrendo. */
.btn-conversa{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);text-decoration:none;
  padding:15px 26px;cursor:pointer;
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);
  transition:color .3s,border-color .3s;
}
.btn-conversa:hover{color:var(--fg);border-color:var(--fg-2)}
.btn-conversa .ico-wpp{order:2;flex:0 0 auto}

/* ==========================================================================
   MENU — a barra fixa com a marca e a data
   Prefixo: topo-

   FIXA DESDE 24/09, pedido do time. Até aqui ela era um cabeçalho que morava
   dentro do hero, rolava junto e sumia; agora é menu, e por isso ganhou fundo
   cheio em vez de flutuar sobre o vídeo. Texto pequeno em caixa alta sobre
   imagem em movimento pisca a cada quadro, e o véu que segurava isso era
   justamente o que escondia o vídeo.

   O fundo é o da página, que é verde. O fio embaixo é o que diz que a barra
   acaba ali: 7% de branco, o bastante para existir sobre a foto e pouco o
   bastante para não virar régua.

   A ALTURA SAI DO LOGO, e não o contrário. O resto da página se espaça por
   --nav-h, então mexer no logo reposiciona tudo sozinho.
   ========================================================================== */

:root{
  /* 56px era fixo, e num monitor de 27 polegadas o lockup virava etiqueta
     (reclamação do Gabriel em 24/09). O piso continua 56, que vale até por
     volta de 1650px de largura — a tela da maioria —, e daí para cima ele
     cresce junto com a janela até 84. */
  --logo-h:clamp(56px,3.4vw,84px);
  --nav-h:calc(var(--logo-h) + 30px);
}

.topo{
  position:fixed;top:0;left:0;right:0;z-index:40;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:rgb(var(--dark-rgb));
  border-bottom:1px solid rgba(255,255,255,.07);
}

.topo-inner{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}

.topo-logo{line-height:0;display:block;flex:0 0 auto}
/* SVG oficial desde 22/09, no lugar do PNG de 750x306 que vinha da página
   antiga e ainda por cima chegava com a assinatura cortada no pé. Sendo
   vetor, a altura não tem mais teto de resolução: quem manda nela é a menor
   linha do lockup, o "com Alexandre Wolwacz - Stormer", que vale só 16% da
   altura total. A 56px ela fica com 9px e ainda se lê; abaixo disso, vira
   borrão. O logo é o bloco de marca da página inteira, já que o rodapé
   assina com a Liberta Play e não com a Imersão. */
.topo-logo img{height:var(--logo-h);width:auto;display:block}

.topo-quando{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  text-align:right;
}

/* --fg-2 e não --fg-muted: em caixa alta, 11.5px e com .18em de entreletra, o
   muted some. O Gabriel pediu mais branco em 22/09. Este é o degrau
   imediatamente acima, e não branco puro, que competiria com a data logo
   abaixo. */
.topo-local{
  font-family:var(--sans);
  font-size:11.5px;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-2);
}

.topo-data{
  font-family:var(--display);
  font-size:clamp(17px,1.5vw,21px);line-height:1.1;
  letter-spacing:-.02em;font-weight:700;
  color:var(--accent);
}

/* Barra fixa cobre âncora: sem isto, ir para #dias pelo teclado ou por link
   deixa o título da dobra debaixo do menu. */
section[id]{scroll-margin-top:var(--nav-h)}

@media(max-width:760px){
  :root{--logo-h:42px}
  .topo-inner{gap:14px}
  .topo-data{font-size:14px}
  /* nowrap: "Presencial em Porto Alegre" passou a quebrar em duas linhas com
     o logo ao lado, e a segunda, alinhada à direita, ficava com uma palavra
     solta. Cabe em uma linha com o corpo e a entreletra menores. */
  .topo-local{font-size:9px;letter-spacing:.09em;white-space:nowrap}
}

/* ==========================================================================
   BARRA — a ilha de conversão flutuando no pé
   Prefixo: barra-

   É a barra de vidro que estava no topo, movida para baixo a pedido do
   Gabriel em 22/09. Resolve de quebra o defeito mais caro da LP atual, que a
   auditoria mediu: quase dez mil pixels de rolagem com apenas dois pontos de
   conversão, nenhum deles fixo. Quem se convence no meio da página agora tem
   onde clicar sem procurar.

   ILHA, NÃO FAIXA. Na primeira versão ela atravessava a tela inteira e lia
   como rodapé fixo. Agora tem a largura do próprio conteúdo, centrada e
   descolada da borda: "a barra não precisa ocupar toda a largura da página".
   Por isso o miolo dela NÃO usa o .wrap do core, que é a coluna da página, e
   uma ilha não é coluna (contrato §4).

   VIDRO, NÃO CHAPADO. Branco a 5% mais desfoque, a receita do .glass do core.
   A ilha precisa deixar ver que existe página passando por baixo, senão lê
   como rodapé e some da atenção. Sem sombra: a separação é o fio e o
   desfoque, e sombra em peça de ação é coisa que ele já recusou antes.

   ELA SÓ ENTRA NA SEGUNDA DOBRA. Na primeira tela a pessoa ainda está
   entendendo onde caiu, e uma ilha sobre o hero suja a única imagem que a
   página tem inteira. Enquanto o hero estiver em cena, ela fica fora.

   E SOME NA DOBRA DO FORMULÁRIO, porque uma peça fixa por cima do formulário
   tapa o próprio botão de enviar, que é o pior desfecho possível: quem
   decidiu converter encontra a ilha no caminho do campo.

   Quem decide as duas coisas é barra.js. Sem JavaScript ela nasce fora e
   fica fora: numa página que já tem botão no hero e formulário no fim, a
   ausência dela não custa conversão nenhuma, e é melhor que aparecer por
   cima da primeira tela sem nunca sair.
   ========================================================================== */

.barra{
  position:fixed;z-index:90;
  left:50%;bottom:clamp(16px,3vh,28px);
  transform:translateX(-50%);
  width:max-content;max-width:min(92vw,880px);

  border:1px solid rgba(255,255,255,.14);
  border-radius:calc(var(--radius-media) * 1.6);
  background:
    radial-gradient(120% 180% at 12% -40%,rgba(255,255,255,.10),transparent 58%),
    rgba(255,255,255,.05);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);

  transition:transform .5s var(--ease),opacity .5s var(--ease);
}

/* Fora de cena ela desce inteira e sai do caminho do toque. O translateX
   tem de vir junto, senão a ilha salta para a esquerda ao esconder. */
.barra.is-fora{
  transform:translate(-50%,calc(100% + clamp(16px,3vh,28px)));
  opacity:0;pointer-events:none;
}

.barra-inner{
  display:flex;align-items:center;
  gap:clamp(18px,3vw,38px);
  padding:clamp(11px,1.5vh,15px) clamp(14px,1.6vw,20px);
}

.barra-titulo{
  margin:0;min-width:0;
  font-family:var(--display);
  font-size:clamp(14px,1.35vw,18px);line-height:1.3;
  letter-spacing:-.02em;font-weight:700;
  color:var(--fg);
}
.barra-titulo em{font-style:italic;color:var(--accent)}

.barra .btn{flex:0 0 auto}

/* A ilha flutua sobre o fim da página, então o rodapé reserva o espaço dela.
   Menos que a faixa antiga pedia, porque a ilha é mais baixa e não encosta
   nas bordas. */
.foot-body{padding-bottom:clamp(96px,14vh,132px)}

/* ==========================================================================
   NO CELULAR A ILHA VIRA FAIXA

   Ela deixa de flutuar: encosta nas duas laterais e no pé da tela, sem margem
   e sem canto arredondado. Ilha é peça de tela larga, onde sobra espaço em
   volta; em 390px de largura ela tirava 28px de cada lado e mais 16 embaixo,
   e o que ficava era uma caixa flutuando dentro de uma caixa.

   O translateX de centralização sai junto: com left e right em zero não há o
   que centralizar, e ele quebraria a animação de esconder. Por isso a regra
   do .is-fora também é reescrita aqui, sem o eixo horizontal.

   safe-area-inset-bottom: no iPhone com barra de gestos, o pé da tela tem uma
   faixa que não é clicável. Sem esse respiro, o botão nasce debaixo dela.
   ========================================================================== */
@media(max-width:760px){
  .barra{
    left:0;right:0;bottom:0;
    width:auto;max-width:none;
    transform:none;
    border-radius:0;
    border-left:0;border-right:0;border-bottom:0;
  }
  .barra.is-fora{transform:translateY(100%)}

  .barra-inner{
    flex-direction:column;align-items:stretch;gap:10px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  }
  .barra-titulo{font-size:14px;text-align:center}
  /* A coluna do botão ocupa a largura inteira, senão o botão encolhe para o
     tamanho do texto quando a data entra embaixo dele. */
  .barra-acao{align-self:stretch}
  .barra .btn{justify-content:center}
  .foot-body{padding-bottom:190px}
}

/* Movimento reduzido: ela aparece e some sem deslizar. */
@media(prefers-reduced-motion:reduce){
  .barra{transition:opacity .2s linear}
  .barra.is-fora{transform:translateX(-50%)}
}

/* ==========================================================================
   ESCALA DE TÍTULOS — os degraus da página

   Aberto em 22/09 porque o Gabriel perguntou se havia padrão. Havia meio:
   as tags estavam certas (um h1 só, um h2 por dobra, h3 nos itens), mas o
   CORPO de cada título vinha do componente que o trouxe, e ninguém tinha
   comparado os valores lado a lado. Medidos em 1440px, davam 17, 20, 28,
   30, 40, 46, 62 e 86: uma coleção, não uma escala.

   Neste sistema quem define tamanho é o PAPEL, não a tag: h2.sec-title é o
   rótulo da dobra, .display-xl é a peça gráfica. É o certo, e é também o que
   explica um h2 legítimo sair a 86px. A tag organiza o documento para leitor
   de tela e para busca; a classe organiza o olho. As duas escalas precisam
   existir, e precisam concordar.

   Os degraus, de cima para baixo:
     62  h1 do hero, o pico da página, um só
     56  display de dobra, hoje só o "Quem é o Stormer?"
     40  h2.sec-title, o rótulo de cada dobra
     28  h3 de card grande
     20  h3 de card pequeno e de formulário
     17  corpo

   Três regras saem daí, e são as três de baixo. O que NÃO muda aqui:
   o h1 e o sec-title já estavam no lugar, e o h3 de 46px da dobra do dia
   fica como está até o Gabriel decidir, porque aquela composição foi
   aprovada por ele em 21/09 com esse corpo.

   POR QUE AS TRÊS REGRAS CARREGAM O ID DA DOBRA. O montador põe o link
   deste arquivo ANTES dos estilos dos componentes (linha 15 do index.html,
   contra a 17 em diante). Escritas com a mesma força da regra original,
   elas perderiam a cascata por chegarem antes. O id da seção dá o degrau de
   especificidade que falta sem tocar no componente, que é o que o §10 do
   contrato manda. Se uma dobra destas for duplicada na página, a cópia nasce
   com o valor do componente e precisa entrar aqui também.
   ========================================================================== */

/* 1. O DISPLAY NÃO PODE PASSAR O H1.
   O componente trazia clamp(46px,6vw,104px), corpo calibrado para display
   CONDENSADA, e o próprio comentário dele avisa que em fonte de largura
   normal o teto tem de ser mais baixo. Com a Sora, "Stormer?" saía a 86px,
   enchia 96% da coluna e ficava maior que o título da página inteira: o
   degrau existia, só que invertido. A 56px ele continua sendo a peça
   gráfica da dobra, com 1,4x o rótulo das outras, sem disputar com o hero. */
#stormer.apres{--apres-title:clamp(34px,3.9vw,56px)}

/* 2. TÍTULO QUE TEM O CORPO DO TEXTO NÃO É TÍTULO.
   O .duo-title saía a 17px, o mesmo corpo do parágrafo ao lado. Sobrava só
   o peso para separar os dois papéis, e peso sozinho não se vê de relance
   em tela escura. Sobe para o degrau de card pequeno. */
#incluso .duo-title{font-size:20px}

/* 3. O TÍTULO DO CARD ALTO fica no degrau de 28. Havia um segundo título de
   30px na dobra, do card lateral, que saiu na remontagem de 23/09: dois
   pixels de diferença não comunicavam hierarquia nenhuma. */
#aprender .bento-lab-title{font-size:clamp(20px,1.95vw,28px)}

/* ==========================================================================
   PAR DE BOTÕES — dois caminhos, um formulário

   O segundo botão não é um segundo destino: os dois vão para o formulário e,
   depois dele, para a mesma página de obrigado, onde aparecem o preço e o
   WhatsApp. Ele existe para dar permissão a quem ainda não decidiu comprar,
   sem abrir uma bifurcação de verdade no funil. Desenho copiado do Missão
   Global, onde a decisão está registrada em 17/09/2026.

   O verde saturado continua sendo só do primário. O secundário é o
   .btn-ghost do core, que nasce em contorno neutro e só acende no hover, e
   por isso o ícone do WhatsApp também vai em currentColor: aceso, ele
   colocaria uma terceira cor saturada na mesma linha do CTA.

   As propriedades abaixo não existem nas regras dos componentes, então não
   precisam do id da dobra para vencer a cascata: não há o que sobrescrever.
   ========================================================================== */

.hero-cta,
.acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* No card do bento o par empilha: a coluna tem menos da metade da largura do
   hero e os dois botões não cabem lado a lado. Quem empurra o bloco para o
   rodapé do card passa a ser a .acoes, que é o filho direto da coluna. */
#aprender .acoes{margin-top:auto;flex-direction:column;align-items:flex-start;gap:10px}
#aprender .bento-cta{margin-top:0}

.ico-wpp{flex:0 0 auto;width:15px;height:15px}

@media(max-width:760px){
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%}
}

/* ==========================================================================
   DESTAQUE EM GRADIENTE — a palavra que carrega a cor da campanha

   Duas mudanças pedidas pelo Gabriel em 22/09, e a segunda explica a primeira.

   SEM ITÁLICO. A Sora não tem itálico verdadeiro: o navegador inclina a
   romana, e em corpo de display isso aparece como letra torta, não como outra
   voz. Com o gradiente entrando, a inclinação virava o terceiro sinal na mesma
   palavra (cor, peso e ângulo) para dizer uma coisa só.

   GRADIENTE NO LUGAR DA COR CHAPADA. O texto vira a máscara de um gradiente,
   via background-clip. Em palavra grande ele dá profundidade; em rótulo
   pequeno viraria borrão, e por isso os destaques miúdos (o número da etapa,
   a data do topo, o fio do olho) seguem em cor sólida.

   O #topo na frente do seletor é a especificidade que falta: o estilo do
   .hero-title vem do componente, que o montador carrega DEPOIS deste arquivo.

   color:var(--accent) fica declarado antes como piso. Se o background-clip
   falhar, o destaque perde o gradiente e continua verde, em vez de sumir.
   ========================================================================== */

#topo .hero-title em,
h2.sec-title em,
.barra-titulo em{
  font-style:normal;
  color:var(--accent);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #topo .hero-title em,
  h2.sec-title em,
  .barra-titulo em{
    background-image:linear-gradient(96deg,#8af5ac 0%,var(--accent) 46%,#0ec238 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

/* ==========================================================================
   RUÍDO — grão de filme sobre a página inteira

   O core já tem o .grain, mas ele é uma camada DENTRO de uma mídia: existe
   para sujar a foto, e vai embora junto com ela. Este é da página: cobre a
   janela inteira, inclusive as dobras que são só tipografia sobre fundo liso,
   que é onde o preto digital fica chapado demais.

   É `fixed`, e isso é o ponto: o grão não rola com o conteúdo. Fixo, ele lê
   como a textura do vidro pelo qual se olha a página; rolando junto, leria
   como sujeira colada no papel.

   Opacidade baixa e sem blend: sobre um fundo quase preto, os modos overlay e
   soft-light devolvem quase nada, porque preservam as extremidades da escala.
   O que aparece aqui é a própria textura, a 9%. É um número só, e é o botão
   de volume: a 4% some em tela de alta densidade, a partir de 16% começa a
   levantar o preto e o fundo perde profundidade.
   ========================================================================== */

body::after{
  content:"";
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   CABEÇALHO DA DOBRA 2, centralizado

   O componente do bento nasceu com o cabeçalho à esquerda e o próprio
   comentário dele explica por quê. O Gabriel pediu centralizado em 22/09.

   Não troquei pela classe .sec-head do core: aquela centraliza, mas também
   impõe 760px de medida, e o título desta dobra tem duas orações e pede mais
   largura. Aqui a medida é a da dobra, e quem centraliza são as margens
   automáticas — no título e no apoio também, porque os dois carregam
   max-width próprio e sem isso ficariam centralizados no texto e encostados
   à esquerda na caixa.
   ========================================================================== */

#aprender .bento-head{max-width:860px;margin-inline:auto;text-align:center}
#aprender .bento-head .sec-title{max-width:26ch;margin-inline:auto}
#aprender .bento-head .sec-lead{margin-inline:auto}

/* ==========================================================================
   OS CARDS DO BENTO — texto aberto, canto menor, fio de contorno

   Três pedidos do Gabriel em 22/09, todos escopados no #aprender: o
   componente continua servindo outras páginas do jeito que nasceu.

   1. TEXTO SEMPRE VISÍVEL. O parágrafo nascia com altura de três linhas e
      abria no clique. Os <button> saíram do markup e aqui o teto de altura
      some junto, com o esmaecido do pé: aquele degradê existia para avisar
      que havia mais texto embaixo, e sem corte ele viraria só uma mancha
      clara no fim de cada card.

   2. CANTO DE 8px. O componente calcula o raio dos cards como uma vez e meia
      o --radius-media do tema, o que dava 27px. O gancho público é o
      --bento-radius, então basta redefini-lo na raiz da dobra.

   3. FIO DE CONTORNO. 1px de branco a 11%, que é o mesmo --rule dos filetes
      da página: um valor só para tudo que separa superfícies aqui. Ele
      resolve o card escuro sobre fundo escuro, que sem contorno só existe
      quando tem foto dentro.
   ========================================================================== */

#aprender{--bento-radius:8px}

#aprender .bento-wide,
#aprender .bento-card{border:1px solid var(--rule)}

#aprender .bento-text{max-height:none;overflow:visible}
#aprender .bento-text::after{content:none}

/* Os cartões que flutuam sobre a foto vinham do --radius-media do tema, 18px,
   e ficaram mais redondos que o card que os carrega. Eles encenam uma
   interface, então continuam mais macios que a caixa, só que por pouco. */
#aprender .bento-mini{border-radius:10px}
#aprender .bento-mini-thumb{border-radius:6px}

/* O conteúdo dos cards ficou centralizado por um dia, em 22/09. Voltou para a
   esquerda em 23/09 junto com a remontagem: com olho e ícone abrindo o bloco,
   é a borda esquerda alinhada que faz os quatro cards lerem como um conjunto,
   e é assim na referência que o Gabriel mandou. */
#aprender .bento-card .bento-text{max-width:34ch}

/* Altura pelo conteúdo. O componente trava um piso de altura para o card, que
   existia por causa do texto longo com corte. Regra da casa: altura sai do
   conteúdo, e a igualdade entre os cards vem da grade, que estica a fileira. */
#aprender .bento-card{min-height:0}

/* ==========================================================================
   POPUP DO FORMULÁRIO

   A casca e o véu vêm do .dialog-casca do core. O que é desta página: onde a
   caixa fica, como ela entra e o botão de fechar. O core não impõe isso de
   propósito, porque os diálogos da casa entram de jeitos diferentes.
   ========================================================================== */

/* position:fixed, e não só a centralização que o navegador dá ao modal: com
   ela a caixa também fica centrada no fallback sem showModal, em que o
   <dialog> aberto cairia no fluxo, lá no fim do documento. */
.dlg{
  position:fixed;inset:0;margin:auto;
  width:min(520px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  --dialog-blur:10px;
}

.dlg[open]{animation:dlg-entra .3s var(--ease)}
@keyframes dlg-entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.dlg[open]{animation:none}}

/* O <form> recebe foco ao abrir (ver form-popup.js) e não deve desenhar anel
   por isso: o anel de foco existe para quem navega por teclado saber onde
   está, e ninguém navegou até aqui. Os campos mantêm o deles. */
.dlg .lead-form{border-radius:8px}
.dlg .lead-form:focus{outline:none}

/* Trava o scroll do fundo. O <dialog> modal deixa a página rolar atrás em
   alguns navegadores, e a sensação é a de que o popup escorrega. */
html.tem-popup{overflow:hidden}

/* O seletor carrega o .lead-form porque o componente empata todos os filhos
   do card em position:relative, e a folha dele carrega depois desta. */
.dlg .lead-form > .dlg-fechar{
  position:absolute;top:12px;right:12px;z-index:3;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  border:1px solid var(--rule);
  background:none;-webkit-appearance:none;appearance:none;
  color:var(--fg-2);cursor:pointer;
  transition:color .25s,border-color .25s;
}
.dlg .lead-form > .dlg-fechar:hover{color:var(--fg);border-color:var(--rule-2)}
.dlg .lead-form > .dlg-fechar svg{width:14px;height:14px}

/* ---- o card que ficou no lugar do formulário, na última dobra ---- */
/* 8px, o mesmo canto dos cards do bento: os dois são card, e agora existe uma
   regra só para eles na página. Quem segue em 18px é foto, que é outra
   família. */
.lead-acao{
  position:relative;
  border-radius:8px;
  padding:clamp(24px,3.6vw,40px);
  --glass-blur:26px;
}
.lead-acao > .grain{border-radius:inherit}
.lead-acao > *{position:relative;z-index:1}
.lead-acao-txt{
  font-size:15px;line-height:1.6;color:var(--fg-2);
  margin-top:16px;max-width:36ch;
}
/* Empilhados: a coluna tem metade da dobra, e lado a lado o segundo botão
   encostaria na borda do card. */
/* LADO A LADO desde 24/09, pedido do Gabriel. Empilhados eles ocupavam quatro
   linhas do card com duas ações que são a mesma decisão. Cabem: o card tem uns
   610px e o par fecha em 560. */
.lead-acao .acoes{margin-top:26px}

/* O secundário é <button> desde que passou a abrir o popup: sem isto ele herda
   o cromo de botão do sistema (fundo cinza claro, borda). O `border` NÃO entra
   aqui: esta folha carrega depois da declaração do .btn-conversa e zerá-lo
   apagava justamente o contorno que o time pediu em 24/09. */
.btn-conversa{background:none;-webkit-appearance:none;appearance:none}

/* ==========================================================================
   DOBRA 2, terceira rodada (22/09)

   APOIO EM DUAS LINHAS. A frase sobre o roteiro saiu, e o que ficou usa a
   largura inteira do cabeçalho em vez dos 60ch do core: com a medida de
   leitura ele quebrava em quatro linhas centradas, que é bloco de texto, não
   linha de apoio.

   (A parte desta nota sobre o card do CTA na última célula caiu em 23/09:
   aquele card não existe mais, ver a remontagem no fim do arquivo.)
   ========================================================================== */

#aprender .bento-head .sec-lead{max-width:none}

/* ---- o palco dos avisos ----
   (Os três avisos escalonados sobre a foto do card alto saíram em 23/09: eles
   viraram rodízio dentro do card "A leitura", logo abaixo.) */

/* A FOTO TEM ALTURA FIXA, e isso é o que alinha os quatro cards.

   Por um dia ela foi elástica, para absorver a sobra de altura do card. O
   efeito colateral apareceu na tela: card com título de duas linhas ficava
   com a foto mais curta, e o bloco de texto dele começava mais alto que o do
   vizinho. Com quatro cards lado a lado, quatro alturas diferentes de olho.

   O Gabriel pediu o contrário em 23/09, e é a regra certa: "todos os títulos
   começam na mesma altura". Com a foto fixa, o texto de cada card começa
   sempre no mesmo lugar, e a sobra de altura vai para o pé do card, onde não
   desalinha nada. */
#aprender .bento-card .bento-media{
  flex:0 0 auto;
  height:var(--bento-media-h);
}

/* ==========================================================================
   DOBRA 2, REMONTADA (23/09)

   A FORMA, do layout que o Gabriel desenhou: quatro cards de assunto num
   bloco 2x2 à esquerda e um card alto ocupando a coluna da direita inteira.
   O card alto é a única foto grande e o único CTA da dobra.

   A grade continua sendo a do componente, de três colunas. O que muda é a
   colocação do card alto, e o resto se resolve sozinho: com a coluna 3
   ocupada nas duas fileiras, os quatro cards caem nas quatro células que
   sobram, na ordem do markup.

   O OLHO COM ÍCONE abre cada card. Não é enfeite: quatro cards com título
   diferente e nada em comum leem como quatro coisas soltas. O olho dá a
   categoria ("A abertura", "A leitura", "O método", "A cabeça") e o ícone dá
   o ritmo visual que faz o bloco ler como conjunto. É a organização de texto
   da referência, com olho pequeno em caixa alta, título grande e apoio.

   O ícone herda a cor do olho, que é a cor de apoio, e não a de destaque:
   quatro ícones em verde vibrante roubariam a atenção do único botão da
   dobra.
   ========================================================================== */

#aprender .bento-alto{grid-column:3;grid-row:1 / span 2}

/* Em duas colunas o card alto vai para a coluna da direita e continua
   ocupando duas fileiras: os quatro cards se distribuem em volta sem deixar
   buraco. Em uma coluna ele vira mais um da pilha. */
@media(max-width:1040px){
  #aprender .bento-alto{grid-column:2;grid-row:1 / span 2}
}
@media(max-width:680px){
  #aprender .bento-alto{grid-column:auto;grid-row:auto}
}

/* ---- olho e ícone ---- */
.bento-olho{
  display:flex;align-items:center;gap:9px;
  font-family:var(--sans);font-weight:400;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
  margin-bottom:12px;
}
.bento-ico{flex:0 0 auto;width:18px;height:18px;color:var(--accent);opacity:.9}

/* No card alto o olho fica sobre a foto, onde o apoio é mais claro que no
   card comum: mesmo desenho, um degrau a mais de tinta. */
#aprender .bento-lab .bento-olho{color:var(--fg-2)}
#aprender .bento-lab .bento-lab-text{margin-top:10px}
#aprender .bento-lab .acoes{margin-top:22px}

/* O card alto é estreito e comprido: o texto dentro dele para bem antes da
   borda, senão a linha atravessa a foto de ponta a ponta. */
#aprender .bento-alto .bento-lab-title,
#aprender .bento-alto .bento-lab-text{max-width:26ch}

/* Entrelinha de 1.3 e peso 500 nos títulos dos cards, pedidos do Gabriel em
   23/09. O componente traz entrelinha 1.15 e 1.1, que são valores de título de
   uma linha; aqui quase todos quebram em duas, e nessa altura a segunda linha
   encosta na primeira. O peso vinha em 700: a Sora é variável de 400 a 800, e
   em 500 o título perde o ar de manchete sem perder a hierarquia, que continua
   vindo do corpo e da entrelinha. */
#aprender .bento-title,
#aprender .bento-lab-title{line-height:1.3;font-weight:500}

/* ==========================================================================
   A DOBRA ENCOLHE (23/09)

   "Ele não cabe na tela inteira, o card alto ficou enorme." A altura do card
   alto não é escolha dele: ele ocupa as duas fileiras, então mede o que as
   duas fileiras medirem. Quem manda são os cards pequenos, e neles a conta é
   sempre a mesma: foto + texto + respiro.

   Mexi nos três, e nessa ordem de impacto:
     foto     236px de teto viraram 168
     respiro  28px de padding viraram 22
     texto    quatro parágrafos de três linhas viraram dois

   O que eu NÃO mexi: o vão entre dobras. Ele é token único da página e existe
   para o ritmo entre seções; encolher só aqui resolveria a régua de uma dobra
   e quebraria a do resto.
   ========================================================================== */

#aprender{
  --bento-media-h:clamp(130px,11.5vw,168px);
  --bento-pad:clamp(16px,1.5vw,22px);
}


/* ==========================================================================
   O PALCO DOS AVISOS — no lugar da foto do card "A leitura"

   Os três avisos vinham empilhados sobre a foto do card alto. Empilhados, eles
   se acumulam; aqui eles se sucedem, um por vez, e é isso que o card diz em
   texto. A troca é do avisos.js.

   Os três ocupam a MESMA célula de grade, e é o que os centraliza sem
   position:absolute e sem gastar o transform com centralização — o transform
   fica livre para a entrada, que é o único jeito de o aviso subir dois pixels
   ao aparecer sem brigar com o alinhamento.

   O fundo não é foto nem buraco: é um brilho baixo, na cor de destaque, vindo
   do mesmo canto de onde vem o brilho do vidro da casa.
   ========================================================================== */

#aprender .palco{
  display:grid;place-items:center;
  padding:0 clamp(14px,1.4vw,20px);
  background:
    radial-gradient(130% 130% at 12% 0%,rgba(64,217,117,.13),transparent 62%),
    var(--bg);
  overflow:hidden;
}

/* ---- a pilha ----
   As três ocupam a mesma célula, então o transform é livre para empilhar. A
   da frente fica no lugar; as de trás sobem, encolhem e apagam, que é o que
   dá profundidade sem sombra nenhuma. z-index funciona em item de grade sem
   position, e é ele que garante que a nova passe por cima das velhas. */
#aprender .palco .aviso{
  grid-area:1 / 1;
  pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
#aprender .palco .aviso[data-pos="0"]{opacity:1;transform:none;z-index:3}
#aprender .palco .aviso[data-pos="1"]{opacity:.5;transform:translateY(-15px) scale(.93);z-index:2}
#aprender .palco .aviso[data-pos="2"]{opacity:.2;transform:translateY(-26px) scale(.87);z-index:1}

/* O quadro em que a nova nasce: embaixo, invisível, e SEM transição, senão ela
   desceria na frente de todo mundo em vez de aparecer vindo de baixo. O
   avisos.js tira esta classe no quadro seguinte, e aí ela sobe. */
#aprender .palco .aviso.entrando{
  opacity:0;transform:translateY(20px) scale(.96);
  transition:none;
}

/* No ponteiro, a pilha se encosta: as de trás caminham para o lugar da da
   frente e somem nela, até ficar uma só. O rodízio para junto (ver o
   avisos.js), senão a pilha voltaria a se abrir embaixo do ponteiro. */
#aprender .bento-card:hover .palco .aviso[data-pos="1"],
#aprender .bento-card:hover .palco .aviso[data-pos="2"]{opacity:0;transform:none}

/* ---- a forma do aviso ----
   UMA FORMA SÓ para os três. Antes eram uma pílula verde e dois cartões
   brancos de larguras diferentes, e a pilha virava um amontoado: peça atrás
   aparecendo pelos cantos da da frente, sem alinhamento nenhum. Iguais, elas
   se cobrem e o efeito lê como notificação de celular.

   E o CONTEÚDO é o assunto do card: o padrão que apareceu e a regra que vem
   junto. Um aviso genérico de "ordem executada" ilustra qualquer coisa;
   "trap de máxima, venda com stop em 130.120" ilustra este parágrafo. */
#aprender .palco .aviso{
  display:flex;align-items:center;gap:11px;
  width:min(100%,318px);
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb,var(--light) 93%,transparent);
  color:var(--dark);
  text-align:left;
}

#aprender .palco .aviso-ico{
  flex:0 0 auto;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--cta) 16%,transparent);
  color:#046b1c;
}
#aprender .palco .aviso-ico svg{width:19px;height:19px}

#aprender .palco .aviso-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
#aprender .palco .aviso-titulo{
  font-family:var(--display);font-weight:700;
  font-size:13px;line-height:1.25;letter-spacing:-.01em;
}
#aprender .palco .aviso-regra{
  font-size:12px;line-height:1.3;
  color:color-mix(in srgb,var(--dark) 62%,transparent);
}

@media(prefers-reduced-motion:reduce){
  #aprender .palco .aviso{transition-duration:.01s}
}

/* ==========================================================================
   O CARD ALTO, depois que os avisos saíram dele

   O componente distribui os filhos do card com space-between, porque lá eram
   dois: os avisos em cima e o texto embaixo. Com um filho só, space-between o
   joga para o topo — e o texto foi parar em cima da cara do Stormer.

   O conteúdo desce para o pé do card, que é onde a foto que o Gabriel entregou
   já traz o escurecido embutido, feito para o texto.
   ========================================================================== */

#aprender .bento-alto{justify-content:flex-end}

/* ==========================================================================
   O RECORTE DAS FOTOS: CENTRO E TOPO

   Pedido do Gabriel em 23/09, e ele apontou o sintoma exato: careca cortada.
   A caixa é mais deitada que a foto, então algo tem de sair; ancorar no meio
   tira metade de cima e metade de baixo, e é sempre a cabeça que paga, porque
   é ela que está no alto do quadro.

   Com o topo ancorado, o que sai é o pé da imagem, que nestas fotos é chão,
   mesa e o escurecido que já vem embutido. No card alto sobra escurecido de
   sobra mesmo depois do corte: ele ocupa quase um terço da foto.
   ========================================================================== */

#aprender .bento-card .bento-media-img,
#aprender .bento-alto .bento-img{object-position:50% 0}

/* O véu e o scrim do componente existiam para domar foto crua. Esta já chega
   tratada, e os dois somados fechavam a imagem inteira. */
#aprender .bento-alto .bento-scrim{opacity:.35}
#aprender .bento-alto .bento-veil{opacity:.5}

/* A regra cabe em uma linha, e é isso que mantém os três avisos da MESMA
   altura. Com um deles quebrando em duas linhas, a peça da frente cresce e a
   pilha perde o alinhamento que é a graça dela. */
#aprender .palco .aviso-regra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ==========================================================================
   SOBRE O STORMER — banner de dobra inteira
   Prefixo: sobre-

   Substituiu o conteudo/apresentacao-foto-alternada em 23/09. Aquele
   componente é um retrato em coluna ao lado do texto; a arte que o Gabriel
   fez é um banner de ponta a ponta, com o Stormer à direita e o lado esquerdo
   já escurecido para receber a copy. Duas composições diferentes, e a dela é
   mais forte: a dobra passa a ter a mesma respiração do hero.

   A ALTURA SAI DA PROPORÇÃO DA ARTE, não de um número em vh. O banner é
   1920x790, e a dobra acompanha isso até um teto, para não virar uma faixa
   fina em monitor largo nem uma parede em tela pequena. O texto nunca é
   espremido, porque o min-height é piso e não prisão: se a copy crescer, a
   dobra cresce com ela.
   ========================================================================== */

/* Fio em cima e embaixo (23/09): a dobra é a única da página com foto de
   ponta a ponta, e sem os fios ela encostava nas vizinhas sem fronteira
   nenhuma. É o mesmo --rule do resto. */
.sobre{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(460px,41vw,660px);
  overflow:hidden;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

.sobre-media{position:absolute;inset:0;overflow:hidden}
.sobre-media img{
  width:100%;height:100%;object-fit:cover;
  object-position:70% 50%;
  display:block;
}

/* O véu repete no CSS o que a arte já faz no arquivo. Não é redundância: o
   recorte muda com a largura da tela, e em telas estreitas o escurecido da
   arte sai de quadro justamente onde o texto está. */
.sobre-veu{
  position:absolute;inset:0;
  background:linear-gradient(95deg,
    rgba(var(--dark-rgb),.94) 0%,
    rgba(var(--dark-rgb),.86) 28%,
    rgba(var(--dark-rgb),.35) 58%,
    rgba(var(--dark-rgb),0) 82%);
}

.sobre-corpo{position:relative;z-index:2;width:100%}

/* 56% da coluna, e não 46% (23/09). Sobre foto o limite não é a medida de
   leitura, é o assunto da imagem: o texto para antes do ombro dele, e com o
   véu reforçado ele pode avançar mais do que eu tinha deixado. Cada linha
   ganhou umas dez palavras, e cada parágrafo perdeu uma linha.

   O título cabe em uma linha só agora que a coluna é mais larga, e o <br>
   saiu do markup. */
.sobre-texto{max-width:min(47%,545px)}
.sobre-texto .display-xl{--display-xl:clamp(32px,3.7vw,52px)}

/* Tinta de texto principal, e não a de apoio: sobre foto, mesmo com véu, o
   --fg-2 perde meio tom e o parágrafo começa a custar esforço para ler. */
/* Corpo de 17px, que é o --fs-body da página: depois de a entreletra voltar
   ao neutro, o texto menor não era mais necessário para caber. Volta ao mesmo
   tamanho do resto do site, e a dobra deixa de ter tipografia própria. */
.sobre-p{
  font-size:var(--fs-body);line-height:1.6;color:var(--fg);
  margin-top:14px;max-width:52ch;
}

/* O vão do título até o primeiro parágrafo é maior que o vão entre parágrafos.
   Não é capricho: o primeiro separa dois NÍVEIS (título e texto) e os outros
   separam iguais. Espaço igual nos dois faria o título parecer o primeiro
   parágrafo de um bloco só. */
.sobre-p:first-of-type{margin-top:22px}

@media(max-width:900px){
  .sobre{min-height:0;padding:clamp(64px,12vw,110px) 0}
  /* Em tela estreita o banner vira fundo de verdade: o recorte perde o
     enquadramento dele, então a foto recua e quem manda é o texto. */
  .sobre-media img{object-position:78% 50%}
  .sobre-veu{
    background:linear-gradient(to bottom,
      rgba(var(--dark-rgb),.92) 0%,
      rgba(var(--dark-rgb),.86) 55%,
      rgba(var(--dark-rgb),.9) 100%);
  }
  .sobre-texto{max-width:none}
  .sobre-p{max-width:52ch}
}

/* Mesmo tratamento do apoio da dobra dos passos: bloco curto e centrado com
   linhas de larguras muito diferentes lê como sobra. O balance distribui as
   palavras entre as duas linhas. */
#aprender .bento-head .sec-lead{text-wrap:balance}

/* ==========================================================================
   O PARÁGRAFO DE DESTAQUE E AS CAIXAS DE NÚMERO (23/09)
   ========================================================================== */

/* Filete de 4px na cor de destaque. O recuo do texto é maior que o filete de
   propósito: colado, ele lê como erro de alinhamento; com ar, lê como citação.
   A tinta sobe para o branco cheio, porque o parágrafo marcado que fica na
   mesma cor dos outros só parece marcado para quem procura. */
.sobre-destaque{
  border-left:4px solid var(--accent);
  padding-left:18px;
  color:var(--fg);
}

/* ---- as caixas de número ----
   Vidro fosco da casa (.glass do core, 5% de branco com desfoque). Sobre a
   arte elas flutuam nos vãos entre o texto e o Stormer; as posições são em
   porcentagem, e não em pixel, para acompanharem o recorte da foto quando a
   tela muda de largura. */
.sobre-numeros{position:absolute;inset:0;z-index:2;pointer-events:none}

.sobre-num{
  position:absolute;
  display:flex;flex-direction:column;gap:2px;
  padding:14px 18px;
  border-radius:12px;
  min-width:150px;
}
.sobre-num strong{
  font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.1vw,30px);line-height:1.1;letter-spacing:-.02em;
  color:var(--fg);
}
.sobre-num span{
  font-family:var(--sans);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-2);
}

.sobre-num:nth-child(1){left:52%;top:26%}
.sobre-num:nth-child(2){left:74%;top:52%}
.sobre-num:nth-child(3){left:49%;top:74%}

@media(max-width:1180px){
  .sobre-num:nth-child(1){left:56%;top:20%}
  .sobre-num:nth-child(2){left:70%;top:48%}
  .sobre-num:nth-child(3){left:54%;top:76%}
}

/* ---- o celular ----
   A DOBRA SE DESMONTA, e vira três blocos empilhados: faixa de imagem, texto,
   números. Como fundo ela não funciona em tela estreita: o recorte come o
   Stormer pelas laterais, e o véu que faz o texto ser legível apaga o resto.
   Mesmo diagnóstico do hero, e mesma saída.

   A faixa é 5:4 com o enquadramento em 64% da largura, que é onde ele está na
   arte. Nessa proporção entra metade do quadro, e ele cabe inteiro. */
@media(max-width:900px){
  /* 60px em cima e embaixo, como todas as outras: a faixa de imagem começa
     depois do mesmo vão, senão a dobra encosta na anterior. */
  /* Sem os fios de cima e de baixo. Eles existem no desktop porque lá a dobra
     é uma foto sangrada de ponta a ponta e precisa de fronteira; aqui ela já
     começa e termina com a própria faixa de imagem, e o fio vira um risco
     solto acima dela. */
  .sobre{display:block;min-height:0;padding:60px 0;border:0}

  .sobre-media{
    position:relative;inset:auto;
    aspect-ratio:5 / 4;width:100%;
  }
  /* 78%: a faixa mostra pouco mais da metade da largura da arte, e a conta do
     enquadramento não é direta. Com 64% a janela visível ficava centrada em
     57% da imagem, e ele está em 65%: por isso aparecia encostado na direita.
     A 78% a janela centra nele. */
  .sobre-media img{object-position:78% 45%}

  /* Sem véu lateral: a faixa é para ser vista, e o texto saiu de cima dela.
     Fica um escurecido no pé, que emenda a imagem com o fundo da página. */
  .sobre-veu{
    background:linear-gradient(to bottom,
      rgba(var(--dark-rgb),.28) 0%,
      rgba(var(--dark-rgb),.05) 42%,
      rgba(var(--dark-rgb),.86) 100%);
  }

  /* position:static para a fileira de números poder se prender à SEÇÃO, e não
     a esta caixa: posicionada, ela vira a referência de qualquer filho
     absoluto, e os números iam parar 312px abaixo do texto em vez de sobre a
     imagem. */
  .sobre-corpo{padding-top:clamp(26px,7vw,38px);position:static}

  /* OS NÚMEROS VOLTAM PARA CIMA DA FOTO, como no desktop. Empilhados embaixo
     do texto eles viravam três caixas soltas no fim da dobra, sem ligação com
     nada. Aqui são uma fileira de três, deitada sobre o pé da imagem, que é
     justamente onde a arte é mais escura. */
  /* A âncora é o PÉ DA FAIXA, e a conta é direta: a dobra abre com 60px de
     respiro e a faixa é 5:4, ou seja, 80vw de altura. O topo da fileira sai
     de 60 + 80vw, menos a altura dela e menos o respiro de 14px que ela
     guarda da borda de baixo da imagem. Preso ao pé da SEÇÃO, como estava,
     ele caía lá no fim da dobra, depois do texto. */
  /* EMPILHADOS À ESQUERDA, sobre a imagem, como o Gabriel desenhou. A coluna
     da esquerda da arte é o gráfico, que é a parte sem informação: é ali que
     as caixas cabem sem tapar nada. Deitados no pé, como estavam, os três
     brigavam com a cintura dele e com a largura toda da foto.

     A conta do topo centraliza a pilha na faixa: a dobra abre com 60px, a
     faixa tem 80vw de altura, a pilha mede 160px, então sobra (80vw - 160)/2
     de cada lado. */
  .sobre-numeros{
    position:absolute;right:auto;bottom:auto;
    left:16px;
    top:calc(60px + 40vw - 80px);
    width:min(48%,182px);
    display:grid;grid-template-columns:minmax(0,1fr);gap:10px;
    margin:0;pointer-events:none;
  }
  .sobre-num{
    position:static;min-width:0;
    padding:10px 12px;border-radius:10px;
    text-align:left;gap:1px;
  }
  .sobre-num strong{font-size:17px}
  .sobre-num span{font-size:8px;letter-spacing:.08em;line-height:1.3}
}

/* ==========================================================================
   O CORPO DE TEXTO: PESO E ENTRELETRA (23/09)

   O Gabriel estranhou o espaçamento do texto e perguntou se era Inter 400.
   Não era. O core da biblioteca define, no body, `font-weight:300` e
   `letter-spacing:var(--ls-body)`, que vale .05em. Então a página inteira
   estava em Inter Light com 0,85px de entreletra em corpo de 17px.

   Não é defeito, é decisão de quem desenhou o core: peso leve com entreletra
   aberta é a receita de página escura com muito respiro, e funciona em texto
   curto. Em parágrafo de quatro linhas, porém, o mesmo par cansa: o olho
   perde o desenho da palavra e passa a ler letra por letra.

   Aqui volta ao regular com entreletra neutra. São dois números, e o lugar
   certo deles é este arquivo: o core continua servindo as outras páginas do
   jeito que nasceu.
   ========================================================================== */

:root{--ls-body:0}
body{font-weight:400}

/* ==========================================================================
   A PASSAGEM DO CELULAR (23/09)

   Varredura pedida pelo Gabriel, com quatro regras dele:
     1. texto centralizado;
     2. foto que faça sentido, com o Stormer inteiro, sem cabeça cortada;
     3. cerca de 120px entre uma dobra e outra;
     4. nenhuma linha órfã: parágrafo de três linhas com duas palavras na
        última é para reequilibrar.

   Tudo mora neste bloco, num @media só. Espalhar meia dúzia de ajustes de
   celular por seis arquivos é como se perde o controle do que vale onde.
   ========================================================================== */

@media(max-width:680px){

  /* ---- 1. o vão entre dobras ----
     O token da casa pede no mínimo 110px de cada lado, o que dá 220 entre
     duas dobras. No celular isso é um terço de tela em branco: o vão vira 60
     de cada lado, exatamente os 120 pedidos. */
  :root{--sec-gap:60px}

  /* ---- 2. texto centralizado ----
     Nas dobras de argumento. Lista numerada, acordeão e linha do tempo ficam
     de fora: centralizar item de lista com número ou seta desalinha a âncora
     que o olho usa para descer. */
  .hero-copy,
  #aprender .bento-card .bento-body,
  #aprender .bento-lab,
  .passos-topo,
  .sobre-texto,
  .lead-intro,
  #depoimentos .passos-topo,
  #dias .eyebrow,
  #dias .sec-title,
  #dias .dia-apoio{text-align:center}

  /* A linha do tempo NÃO centraliza: o fio e os pontos vivem na borda
     esquerda, e são eles a âncora que o olho segue descendo. Só o cabeçalho
     dela acompanha o resto da página. */
  #dias .eyebrow{display:flex;justify-content:center}
  #dias .sec-title,
  #dias .dia-apoio{margin-inline:auto}

  .hero-cta,
  #aprender .bento-olho,
  #aprender .acoes,
  .lead-acao .acoes{justify-content:center;align-items:center}

  #aprender .acoes,
  .lead-acao .acoes{flex-direction:column;align-items:stretch}

  .passos-apoio,
  .sobre-p,
  .lead-acao-txt,
  #aprender .bento-card .bento-text,
  #aprender .bento-lab .bento-lab-text{margin-inline:auto;text-align:center}

  .lead-list{display:inline-block;text-align:left}

  /* O card de ação inteiro, e não só o parágrafo: título à esquerda com
     apoio centralizado embaixo é meia decisão. */
  .lead-acao{text-align:center}

  /* O PARÁGRAFO DE OURO VIRA CARTÃO. O filete, em pé ou deitado, é um
     destaque que depende de alinhamento: à esquerda de um texto centralizado
     ele não tem o que marcar, e em cima vira divisória de seção, que foi como
     o Gabriel leu. Em tela estreita quem destaca é a SUPERFÍCIE: o parágrafo
     ganha caixa própria, um fio em volta e um fundo meio grau acima do da
     página, e passa a ser um objeto em vez de mais um parágrafo. */
  .sobre-destaque{
    border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
    border-left:0;border-right:0;
    border-radius:0;
    background:color-mix(in srgb,var(--accent) 7%,transparent);
    padding:20px 18px;
    margin-top:24px;
  }

  /* ---- 3. o balanceamento das linhas ----
     Em coluna estreita quase todo parágrafo quebra, e a última linha vive
     sobrando com duas palavras. O balance distribui as palavras entre as
     linhas disponíveis. Vale para texto curto: em parágrafo longo o navegador
     desiste sozinho, e tudo bem. */
  .sec-lead,.hero-desc,.sobre-p,.bento-text,.bento-lab-text,
  .dia-texto,.passo-desc,.lead-acao-txt,.barra-titulo,
  .faq-answer p,.lead-note,
  .faq-question,.passo-titulo,.vdepo-item{text-wrap:balance}

  /* ---- 4. as imagens ----

     O HERO DEIXA DE SER FUNDO E VIRA FAIXA. Tentei antes acertar o recorte do
     vídeo por object-position, e não tem valor que preste: numa tela de
     390x844, um quadro 16:9 em cover mostra 26% da largura e nada mais. Ou
     cai na plateia, ou vira um close da orelha do Stormer. O problema não era
     o valor, era insistir em fundo de tela cheia com mídia deitada.

     Aqui o vídeo passa a ocupar uma faixa 16:9 no topo, inteira, sem recorte
     nenhum: aparece a sala toda, com ele na mesa. O texto desce para baixo
     dela, em fundo liso, onde se lê sem véu nenhum ajudando.

     O #topo é a especificidade que falta nas três regras: o hero é componente
     da biblioteca, e a folha dele carrega depois desta. */
  #topo{min-height:0;display:block}

  #topo .hero-media{
    position:relative;inset:auto;
    aspect-ratio:16 / 9;
    width:100%;
  }
  #topo .hero-video,
  #topo .hero-img{object-position:50% 50%;opacity:.86}

  /* O degradê do pé existia para dissolver a foto no fundo da página quando
     ela ia até embaixo. Com a faixa, ele fecharia a própria faixa. */
  #topo .hero-fade{display:none}
  #topo .hero-scrim{
    background:linear-gradient(to bottom,
      rgba(var(--dark-rgb),.72) 0%,
      rgba(var(--dark-rgb),.12) 38%,
      rgba(var(--dark-rgb),.1) 70%,
      rgba(var(--dark-rgb),.5) 100%);
  }

  /* O CONTEÚDO SOBE PARA DENTRO DA FAIXA. A margem negativa faz o bloco de
     texto começar 17px acima do fim do vídeo, dentro da zona onde o degradê
     já dissolveu a imagem na cor da página: ali a leitura é a mesma de fundo
     liso, e a dobra deixa de ter um degrau vazio entre a imagem e a marca.
     O z-index é o que garante que o texto passe por cima da faixa. */
  #topo .hero-body{
    position:relative;z-index:2;
    margin-top:-17px;
    min-height:0;
    padding-top:0;
    /* 60px, e não um clamp: somado aos 60 da dobra seguinte, fecha os 120
       que valem para a página inteira. */
    padding-bottom:60px;
  }

  /* ---- 5. o card alto vira card comum ----
     Ele é o único do bento com o texto SOBRE a foto. Em tela estreita o card
     encolhe, o texto ocupa quase tudo e acaba pousando na cara do Stormer.
     Aqui a foto sobe para uma faixa própria e o texto desce para o corpo do
     card, que é como os outros quatro já funcionam: quatro cards iguais e um
     diferente vira um errado. */
  #aprender .bento-alto{display:flex;flex-direction:column;overflow:hidden}

  #aprender .bento-alto .bento-img{
    position:relative;inset:auto;
    width:100%;height:auto;aspect-ratio:4 / 3;
    /* 2% e não o topo cravado: a arte é retrato e a faixa mostra 38% da
       altura dela. A cabeça dele está entre 5% e 15%, então qualquer valor
       acima de uns 8% corta o alto do crânio. */
    object-position:50% 2%;
  }
  #aprender .bento-alto .bento-scrim,
  #aprender .bento-alto .bento-veil{display:none}

  #aprender .bento-alto .bento-lab{padding:var(--bento-pad)}
  #aprender .bento-alto .bento-lab-title,
  #aprender .bento-alto .bento-lab-text{max-width:none}

  /* O palco dos avisos fica no lugar da foto do card "A leitura", e naquele
     card a altura vem do --bento-media-h, que no celular é baixo. Um pouco
     mais de ar para a pilha não encostar nas bordas. */
  #aprender .palco{min-height:148px}
}

/* ==========================================================================
   O HERO NO CELULAR, segunda rodada (23/09)
   ========================================================================== */

/* A MARCA ACIMA DO TÍTULO SAIU em 24/09, quando o cabeçalho virou barra fixa:
   o logo está na barra em toda largura de tela, e repeti-lo grande logo abaixo
   era mostrar a mesma marca duas vezes num palmo de distância. */
.hero-marca{display:none}

@media(max-width:680px){
  /* A faixa de vídeo começa embaixo da barra. Sem isto o menu come o primeiro
     quinto do vídeo, que no celular é a única imagem da dobra. */
  #topo{padding-top:var(--nav-h)}

  .topo-local{color:var(--fg)}
  .topo-data{font-size:13px}

  /* ---- o véu no pé do vídeo ----
     A faixa terminava em corte seco contra o fundo. O degradê do componente
     volta a existir, agora dimensionado para a faixa: ele dissolve o último
     terço do vídeo na cor da página. */
  #topo .hero-fade{
    display:block;
    height:42%;
    background:linear-gradient(to bottom,
      rgba(var(--dark-rgb),0) 0%,
      rgba(var(--dark-rgb),.55) 52%,
      rgba(var(--dark-rgb),.92) 82%,
      rgb(var(--dark-rgb)) 100%);
  }

  /* ---- os vãos, 6px mais curtos ---- */
  #topo .hero-title{margin-top:0}
  #topo .hero-desc{margin-top:20px}
  #topo .hero-cta{margin-top:28px;gap:6px}
}

/* Aparelho estreito (iPhone SE, Galaxy pequeno): a linha da data pedia 318px
   e a coluna oferece 320 em 360px de tela. Faltava um fio de cabelo, e ela
   quebrava em duas. Um degrau a menos de corpo e de entreletra resolve sem
   mexer no texto. */
@media(max-width:375px){
  :root{--logo-h:38px}
  .topo-local{font-size:8.5px;letter-spacing:.06em}
  .topo-data{font-size:12px}
}

/* 320px (iPhone SE de primeira geração e afins). Vale o mesmo raciocínio, um
   degrau abaixo. Daqui para baixo não há mais o que espremer sem o texto
   virar rodapé de contrato, e aí a quebra em duas linhas é o certo. */
@media(max-width:340px){
  :root{--logo-h:34px}
  .topo-local{font-size:7.5px}
  .topo-data{font-size:11px}
}

/* ==========================================================================
   O BENTO NO CELULAR, segunda rodada (23/09)
   ========================================================================== */

@media(max-width:680px){

  /* ---- 1. a foto inteira ----
     A altura da faixa era um número fixo (130px), herdado do desktop, e numa
     coluna de 350px isso recortava a imagem numa fita de 2,7:1. Agora quem
     manda é a proporção do arquivo: 16:9, que é como o Gabriel exportou. Não
     há recorte nenhum, a foto aparece inteira. */
  #aprender .bento-card .bento-media{
    height:auto;
    aspect-ratio:16 / 9;
  }

  /* ---- 2. o véu, só nos 10% de baixo ----
     Era um degradê de 37% da altura, que comia mais de um terço da foto. Aqui
     a dissolvida é feita por máscara na própria imagem: os últimos 10% somem
     na cor do card, e o resto fica intacto. Máscara e não degradê por cima
     porque assim a foto some DE VERDADE, sem uma camada escura pousada nela.

     O elemento antigo sai de cena: dois véus na mesma foto é véu dobrado. */
  #aprender .bento-card .bento-media-img,
  #aprender .bento-alto .bento-img{
    -webkit-mask-image:linear-gradient(to top,transparent 0,#000 10%);
    mask-image:linear-gradient(to top,transparent 0,#000 10%);
  }
  #aprender .bento-fade{display:none}

  /* ---- 3. o vão entre cards ----
     12px era o piso do clamp do componente, pensado para a grade de três
     colunas do desktop, onde os cards também se separam lateralmente.
     Empilhados, eles só têm o vão de cima e de baixo para se distinguir, e 12
     não bastam: viram 24. */
  #aprender{--bento-gap:24px}

  /* ---- 4. o botão de conversa, centralizado ----
     Ele ocupa a largura toda do card desde que os botões passaram a empilhar;
     o conteúdo dele continuava encostado à esquerda, o que dava a impressão
     de um terceiro alinhamento na mesma coluna. */
  #aprender .acoes .btn-conversa,
  .lead-acao .acoes .btn-conversa{justify-content:center}
}

/* ==========================================================================
   PISO DE 16px NO CELULAR (23/09)

   Regra do Gabriel: nenhum texto abaixo de 16px. Ela vale para TEXTO DE
   LEITURA, que é o que se lê em linha corrida. Cinco famílias ficam de fora,
   e não por esquecimento:

     rótulo em caixa alta (olho, eyebrow, rótulo de campo, coluna do rodapé),
     onde 16px em maiúsculas com entreletra larga vira faixa e não rótulo;

     texto de botão, pela mesma razão, e porque a área de toque vem do padding
     e não do corpo da letra;

     a pilha de notificações do card "A leitura", que imita a interface de um
     celular e deixa de parecer uma notificação se o texto crescer;

     a linha da data no topo, que o Gabriel pediu em uma linha só e não cabe
     em 16px numa tela de 360px;

     o rodapé legal e o aviso de consentimento, que sobem para 13px, o degrau
     que a norma de acessibilidade trata como aceitável para texto de apoio
     jurídico e que continua bem acima do que estava.
   ========================================================================== */

/* Cada seletor carrega o id da dobra, ou o elemento pai, e isso NÃO é
   preciosismo: as folhas das dobras (dia.css, passos.css) e as dos componentes
   carregam depois desta, então regra de mesma força perde a cascata. Foi o que
   aconteceu na primeira tentativa: subi os dez tamanhos e só dois obedeceram,
   justamente os dois que já tinham id no seletor. */
@media(max-width:680px){
  #aprender .bento-text,
  #aprender .bento-lab-text,
  #incluso .passo-desc,
  #dias .dia-texto,
  #contato .lead-list li,
  #contato .lead-ok,
  .dlg .lead-ok,
  .lead-acao-txt,
  .barra-titulo,
  footer .foot-brand p{font-size:16px;line-height:1.55}

  #duvidas .faq-question{font-size:16.5px}
  #dias .dia-titulo{font-size:17px}

  /* Nota curta e texto legal: sobem, mas continuam menores que o corpo. São
     apoio, e apoio do tamanho do texto principal compete com ele. */
  #contato .lead-req,
  #contato .lead-note,
  .dlg .lead-req,
  .dlg .lead-note,
  footer .foot-legal{font-size:13px;line-height:1.5}

  /* O texto legal tem cinco linhas, e o balance desiste acima de quatro. O
     pretty resolve o caso que sobra: ele não equilibra o bloco todo, só
     impede que a última linha fique com duas palavras. */
  footer .foot-legal{text-wrap:balance}

  /* O número da parada acompanha o título dela, senão vira poeira ao lado de
     um título de 17px. */
  #incluso .passo-n{font-size:13px}
}


/* ==========================================================================
   O VÉU DO HERO, terceira versão (24/09)

   As duas primeiras escureciam o vídeo por uma faixa vertical inteira, da
   esquerda para a direita: o texto lia bem e a sala aparecia pela metade. O
   pedido do Gabriel foi separar as duas coisas — "que ele dê leitura para o
   texto mas deixe a parte da direita do vídeo mais visível, como se fosse do
   canto inferior esquerdo para o centro".

   É isso, ao pé da letra: um radial ancorado no canto de baixo à esquerda,
   que é onde o texto mora, dissolvendo até morrer antes de chegar à direita.
   Fora da elipse não há véu nenhum, e por isso o vídeo também subiu de
   opacidade: o que segurava a leitura agora é o degradê, não a transparência
   da imagem inteira.

   O degradê vertical que existia para proteger o topo saiu junto: quem
   protege a barra hoje é o fundo cheio dela.
   ========================================================================== */
#topo .hero-video,
#topo .hero-img{opacity:.82}

#topo .hero-scrim{
  background:
    radial-gradient(124% 132% at 0% 108%,
      rgba(var(--dark-rgb),.98) 0%,
      rgba(var(--dark-rgb),.95) 22%,
      rgba(var(--dark-rgb),.87) 38%,
      rgba(var(--dark-rgb),.62) 52%,
      rgba(var(--dark-rgb),.28) 68%,
      rgba(var(--dark-rgb),.06) 82%,
      rgba(var(--dark-rgb),0) 92%),
    linear-gradient(to top,
      rgba(var(--dark-rgb),.55) 0%,
      rgba(var(--dark-rgb),.12) 22%,
      rgba(var(--dark-rgb),0) 40%);
}

/* ==========================================================================
   A DATA EMBAIXO DE CADA CTA (24/09)

   Pedido do time: onde houver botão, tem de estar quando é. São quatro
   lugares na página e o texto é o mesmo nos quatro, de propósito — quem
   chega por anúncio pode entrar em qualquer altura da página.

   Em caixa alta e no tom de apoio: é etiqueta do botão, não frase. Se
   ganhasse peso, disputaria com o próprio CTA.
   ========================================================================== */
.cta-quando{
  margin-top:14px;
  font-family:var(--display);font-weight:700;
  font-size:11px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* Na ilha do pé ela divide a coluna com o botão, não a linha: ali o espaço é
   horizontal e a barra inteira tem 60px de altura. */
.barra-acao{display:flex;flex-direction:column;align-items:center;gap:7px;flex:0 0 auto}
.barra .cta-quando{margin-top:0;font-size:9.5px;letter-spacing:.14em}

@media(max-width:680px){
  /* Centrada junto com o resto da dobra, que no celular é todo centralizado. */
  .cta-quando{text-align:center;margin-top:12px}
  .lead-acao .cta-quando{text-align:center}
  /* A ilha do pé no celular já empilha título e botão; a data fecha a pilha. */
  .barra .cta-quando{font-size:9px}
}

/* ==========================================================================
   O FORMULÁRIO DO POPUP, remontado (24/09)

   "O formulário realmente ficou muito ruim", e estava mesmo: ele vestia a
   primitiva .field do core, que é campo de linha — rótulo pequeno e um fio
   embaixo. Isso funciona num formulário inteiro de página, com ar em volta;
   dentro de um popup de 520px, em fundo escuro, os três fios sumiam e o que
   sobrava era texto solto no vidro. Ninguém enxergava onde clicar.

   O que mudou:
   - um campo por linha, em vez de e-mail e WhatsApp dividindo a fileira;
   - caixa com fundo e contorno, que é o que faz o campo PARECER campo;
   - botão de envio na largura inteira, alto como um alvo de dedo;
   - o aviso de contato desceu para debaixo do botão, centrado.

   16px nos campos não é escolha de gosto: abaixo disso o Safari do iPhone dá
   zoom ao focar e joga a pessoa para fora do popup.
   ========================================================================== */
.dlg .lead-title{font-size:22px}
.dlg .lead-req{margin-top:7px;font-size:13px}

.dlg .lead-fields{grid-template-columns:1fr;gap:14px;margin-top:24px}

/* A primitiva do core desenha o fio embaixo e o ar em volta; aqui quem
   desenha é o input. */
.dlg .lead-field{border-bottom:0;padding:0}
.dlg .lead-field label{
  font-size:10.5px;letter-spacing:.13em;color:var(--fg-2);margin-bottom:8px;
}
.dlg .lead-field input{
  background:rgba(255,255,255,.055);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:16px;
  font-size:16px;font-weight:400;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.dlg .lead-field input::placeholder{color:var(--fg-muted);opacity:.6}
.dlg .lead-field input:hover{border-color:var(--rule-2)}
/* No :focus-within e não no :focus do input: o rótulo e a caixa acendem
   juntos, e é o conjunto que diz onde a pessoa está. Sem `outline:none`, que
   mataria o anel de foco de quem navega por teclado. */
.dlg .lead-field:focus-within input{
  border-color:var(--cta);
  background:rgba(255,255,255,.085);
}

.dlg .lead-submit{display:block;margin-top:24px}
.dlg .lead-submit .btn{
  width:100%;
  padding:20px 28px;font-size:12.5px;letter-spacing:.14em;
}
.dlg .lead-note{
  margin-top:14px;max-width:none;text-align:center;
  font-size:11.5px;line-height:1.6;
}

@media(max-width:680px){
  .dlg .lead-title{font-size:20px}
  .dlg .lead-fields{gap:12px}
  .dlg .lead-field input{padding:15px 14px}
}

/* ==========================================================================
   A ÚLTIMA DOBRA COM O FAQ OFICIAL (24/09)

   O componente gruda a COLUNA DA ESQUERDA, que nasceu para ser um texto curto
   de apoio. Aqui ela é o FAQ, e com as oito perguntas oficiais ela passou a
   ser mais alta que a tela: grudar não faz nada, e quem sai de vista ao rolar
   é justamente o card de conversão do lado direito, que fica uma coluna
   inteira em branco embaixo.

   Invertido: gruda o card, que é curto, e o FAQ rola por baixo dele. O botão
   continua na tela enquanto a pessoa lê a última objeção, que é o momento em
   que ela decide.
   ========================================================================== */
/* `clip` e não `hidden`. O componente corta a foto de fundo da dobra com
   overflow:hidden, e hidden faz do elemento um contêiner de rolagem: dentro
   dele, position:sticky não gruda em nada. O clip corta igual sem criar o
   contêiner, que é exatamente a diferença entre os dois. */
#contato.lead-sec{overflow:clip}
#contato .lead-intro{position:static}
#contato .lead-acao{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}

@media(max-width:980px){
  #contato .lead-acao{position:static}
}

/* ==========================================================================
   OS DOIS BOTÕES, EMPARELHADOS (24/09)

   Dois pedidos do Gabriel no mesmo lugar: o primário mais perto da largura do
   secundário, e a data centrada com ele.

   Os dois se resolvem com a mesma coisa, e nenhuma delas é número mágico. A
   data entrou na MESMA coluna do primário, então centrar nela é centrar no
   botão, aconteça o que acontecer com o texto. E o grupo virou grade de duas
   colunas iguais: o primário para de ter a largura do texto "Quero minha
   vaga" e passa a ter a da coluna, que é a mesma do vizinho.

   O teto de 560px existe porque o hero tem 820 de medida: sem ele, os dois
   botões esticariam até a borda do parágrafo e virariam faixa.
   ========================================================================== */
.cta-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.cta-col .btn{width:100%}
.cta-col .cta-quando{margin-top:0;text-align:center}

.hero-cta,
.lead-acao .acoes{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:start;gap:14px;
  max-width:560px;
}
.hero-cta .btn-conversa,
.lead-acao .acoes .btn-conversa{width:100%}

/* Quem manda na largura agora é a coluna, então o respiro lateral só decide
   quanto sobra para o texto. No card, que é mais estreito que o hero, os 26px
   do secundário faziam "Falar com atendimento" quebrar em duas linhas e o
   botão ficar mais alto que o vizinho. O nowrap é o cinto: se um dia o rótulo
   crescer, ele vaza para fora em vez de desmontar a linha em silêncio. */
.hero-cta .btn,
.hero-cta .btn-conversa,
.lead-acao .acoes .btn,
.lead-acao .acoes .btn-conversa{padding-inline:16px;white-space:nowrap}

/* No card do bento a coluna é estreita e o par continua empilhado. O que muda
   é que os dois passam a ocupar a largura da coluna, em vez de cada um ter a
   largura do próprio texto. */
#aprender .acoes{align-items:stretch}
#aprender .acoes .cta-col{width:100%}

@media(max-width:680px){
  /* Uma coluna: lado a lado, com 16px de corpo e a caixa inteira, os dois não
     cabem sem quebrar o texto do secundário em duas linhas. */
  .hero-cta,
  .lead-acao .acoes{grid-template-columns:1fr;max-width:none}
}

/* ==========================================================================
   A DOBRA DO VÍDEO
   Prefixo: vhero-

   Cabeçalho centrado e o vídeo embaixo, na medida do texto. Ele é a segunda
   dobra, e a primeira coisa que a pessoa vê depois de rolar o hero.
   ========================================================================== */
.vhero-cab{max-width:920px;margin:0 auto 44px;text-align:center}

/* O `margin-inline:auto` NÃO é enfeite. O h2 do core tem `max-width:22ch`, e
   sem margem automática a CAIXA dele encosta na esquerda do bloco enquanto o
   texto se centraliza dentro dela: o título fica 39px fora do eixo do vídeo e
   do parágrafo, medido. É a mesma linha que o cabeçalho do bento já precisou
   ter, e aqui eu esqueci. */
.vhero-cab .sec-title{margin-top:14px;margin-inline:auto}

/* 900px e `balance` para o texto fechar em TRÊS linhas. Em 62ch ele dava
   quatro, e a última ficava com duas palavras soltas, que é o defeito que o
   Gabriel apontou. O balance divide as três por igual em vez de encher as
   duas primeiras e largar o resto embaixo. */
.vhero-texto{
  margin:22px auto 0;max-width:900px;
  font-size:17px;line-height:1.65;color:var(--fg-2);
  text-wrap:balance;
}

/* O palco é quem guarda a proporção, e não o botão nem o iframe: os dois
   trocam de lugar no clique, e a proporção no filho faria o bloco saltar de
   altura no meio da troca. */
.vhero-palco{
  position:relative;
  aspect-ratio:16 / 9;
  max-width:1000px;margin:0 auto;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--rule);
  background:rgba(255,255,255,.03);
}
.vhero-palco > *{position:absolute;inset:0;width:100%;height:100%}
.vhero-player{border:0}

.vhero-capa{
  display:block;padding:0;border:0;background:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.vhero-capa img{width:100%;height:100%;object-fit:cover;display:block}

/* O play é o único elemento saturado da dobra, e é o que diz que a imagem não
   é decoração. Cresce no hover, sem mexer na imagem: capa que escala no hover
   faz o bloco inteiro parecer instável. */
.vhero-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(64px,7vw,88px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--cta);color:var(--dark);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
  transition:transform .3s var(--ease);
}
.vhero-play svg{width:42%;height:42%;margin-left:6%}
.vhero-capa:hover .vhero-play{transform:translate(-50%,-50%) scale(1.07)}
@media(prefers-reduced-motion:reduce){.vhero-play{transition:none}}

@media(max-width:680px){
  .vhero-cab{margin-bottom:28px}
  .vhero-texto{font-size:16px;margin-top:18px}
  .vhero-palco{border-radius:12px}
}

/* O destaque que abriu o card de conversão quando o título saiu. Ele é a
   frase que faz decidir, então tem corpo de título pequeno, não de apoio. */
.lead-acao-forte{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,1.6vw,21px);line-height:1.35;letter-spacing:-.02em;
  color:var(--fg);margin:0;text-wrap:balance;
}
.lead-acao .lead-acao-txt{margin-top:14px}

/* ==========================================================================
   A MARCA DO RODAPÉ (24/09)

   Passou a ser a da TraderUp, no lugar da Liberta Play: a página mora no
   domínio da TraderUp, e era a única peça da tela assinando outra marca. A
   frase ao lado continua dizendo de quem é a produção, que é o que a troca de
   logo não diz sozinha.

   38px, e o número sai da menor linha do lockup, como no logo do topo. Este
   traz um "powered by L&S" que vale 14% da altura total: nos 20px do componente
   ele daria 2,8px, que não é texto, é sujeira. A 38 ele fica com 5, que é o
   mínimo para uma assinatura em caixa baixa, e o conjunto ainda é menor que o
   parágrafo ao lado.
   ========================================================================== */
/* O seletor carrega o .foot porque a folha do componente vem DEPOIS desta e
   declara `.foot-logo img{height:20px}`: no empate de especificidade ganha a
   última, e os 38 daqui morriam em silêncio. É a mesma armadilha que já pegou
   o CTA e o select nesta página. */
.foot .foot-logo img{height:38px}

/* A resposta do FAQ em 16px, e não nos 17 do componente (pedido do Gabriel em
   24/09). São oito respostas numa coluna só, e no corpo do componente o bloco
   pesava mais que o próprio conteúdo da dobra. 16 é o piso da página, então
   daqui não desce. */
#contato .faq-answer p{font-size:16px}

/* O texto legal ocupa a largura inteira do rodapé (24/09). O componente trava
   100ch, que é medida de leitura e faz sentido para parágrafo que alguém lê;
   este ninguém lê de ponta a ponta, e travado ele deixava metade do rodapé
   vazia à direita com quatro linhas empilhadas à esquerda. Solto, fecha em
   duas e o bloco para de parecer uma coluna órfã. */
.foot .foot-legal{max-width:none}

/* ==========================================================================
   A ROLAGEM (25/09)

   "A página parece travada descendo com o scroll", e estava mesmo: 92ms por
   quadro, ou seja 11 por segundo, com 93% dos quadros acima dos 32ms em que o
   olho já percebe o engasgo. Duas causas, as duas medidas uma a uma no
   navegador, na página no ar:

     como estava                                   92ms   93% ruins
     só o grão sem mix-blend-mode                  41ms   89%
     só o vidro fora das três peças grandes        30ms   40%
     as duas coisas                                18ms   26%
     as duas + o grão apagado de vez               19ms   44%  (não compensa)

   Para comparar: a LP das Carteiras, na mesma máquina, dá 23ms.

   1. O GRÃO. `mix-blend-mode:overlay` em três camadas de 1,3 milhão de pixels
      obriga o compositor a refazer a mistura a cada quadro, e blend não sobe
      para a GPU como uma pintura comum. Trocando por mistura normal o custo
      some e a textura continua: o que ela faz num fundo quase preto é
      praticamente o mesmo, com a opacidade ajustada.

   2. O VIDRO nas peças GRANDES. `backdrop-filter` é caro em proporção à área,
      e pior quando a peça é fixa: a barra do pé estava reprocessando o
      desfoque de 22px a cada quadro da rolagem, a vida inteira da página. Sai
      das três maiores (barra, card de conversão e véu do bento) e fica onde
      ele é pequeno e foi pedido: os cartões de número sobre a foto do Stormer,
      o play dos depoimentos e o popup.

   Quem perde o desfoque ganha fundo mais fechado no lugar, senão o conteúdo
   de trás aparece através da peça.
   ========================================================================== */

.grain{mix-blend-mode:normal;opacity:.03}

.barra{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:
    radial-gradient(120% 180% at 12% -40%,rgba(255,255,255,.10),transparent 58%),
    rgba(var(--dark-rgb),.94);
}

.lead-acao{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:
    radial-gradient(130% 110% at 16% -10%,rgba(255,255,255,.07),transparent 58%),
    rgba(var(--dark-rgb),.84);
}

/* O véu do bento só existia para desfocar: quem escurece a foto para o texto
   ler é o .bento-scrim, que continua. Sem o desfoque ele vira elemento sem
   efeito nenhum, e é isso mesmo. */
#aprender .bento-veil{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ==========================================================================
   MAIS AR NO PÉ DO CRONOGRAMA (25/09)

   O vão da dobra é o mesmo de todas (--sec-gap, 140px em tela cheia), mas ali
   ele LÊ menor, e o Gabriel marcou justamente esse espaço. Duas razões: a
   fileira de baixo termina em texto corrido, sem foto nem caixa fechando o
   bloco, e logo abaixo entra a foto de tela cheia do Stormer. O olho mede o
   vão contra o peso do que vem depois, e contra aquela foto os 140px parecem
   noventa.

   Os 56px a mais valem só para esta dobra, e é por isso que a regra vem com o
   id em vez de mexer no --sec-gap, que espaça a página inteira.
   ========================================================================== */
#dias{padding-bottom:calc(var(--sec-gap) + 56px)}

@media(max-width:680px){
  /* No celular a foto seguinte não ocupa a tela toda e os 120px da página já
     dão conta: o acréscimo só criaria um buraco no meio da rolagem. */
  #dias{padding-bottom:var(--sec-gap)}
}