/* ════════════════════════════════════════════════════════════════════════════
   A PÁGINA DE VENDAS DO MEU PUBLICITÁRIO

   As cores, as fontes e as medidas das telas são as do aplicativo
   (`web/src/app/globals.css` e `docs/cores.md`). Duas regras de lá valem aqui
   sem exceção, porque saíram de medição e não de gosto:

     O verde #50E6B2 é superfície e destaque, nunca texto sobre claro
     (1,58:1). Verde escrito sobre branco é o profundo #0C7054 (6,07:1).

     Em cima do verde, o texto é grafite (11,29:1), nunca branco.

   A página é clara, como o aplicativo, e por isso não tem tema escuro: o
   `color-scheme` fica preso no claro para campo e rolagem do navegador não
   saírem escuros numa página branca.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── As fontes ──────────────────────────────────────────────────────────────
   A Fraunces e a Schibsted Grotesk, do Google, declaradas aqui e não pelo CSS
   do Google (27/09/2026): aquele CSS era um pedido a mais, em outro domínio,
   antes de a página poder aparecer, e o PageSpeed mediu 750 ms dele travando
   o primeiro desenho no celular. Os arquivos das letras continuam vindo do
   Google, com `font-display: swap` (o texto aparece na letra do sistema e
   troca quando ela chega), e só o pedaço de cada alfabeto que a página usa.
   Para mudar de fonte ou de peso: pedir o CSS novo ao Google com o endereço
   de sempre (fonts.googleapis.com/css2?family=...) num navegador atual e
   trocar este bloco pelo que ele devolver. */
/* vietnamita */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUV8FyLNQOQZAnv9ZwHlOk8yA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latino estendido */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUV8FyLNQOQZAnv9ZwGlOk8yA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latino */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUV8FyLNQOQZAnv9ZwIlOk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latino estendido */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/schibstedgrotesk/v7/Jqz55SSPQuCQF3t8uOwiUL-taUTtap9Iayoxdg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latino */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/schibstedgrotesk/v7/Jqz55SSPQuCQF3t8uOwiUL-taUTtap9Gayo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papel: #ffffff;
  --tinta: #121918;
  --tinta-fraca: #60716a;
  --tinta-apagada: #9aa3a0;
  --marca: #50e6b2;
  --marca-clara: #84eec9;
  --marca-escura: #40b88e;
  --marca-escrita: #0c7054;
  --menta: #e7faf2;
  --marfim: #f5f1ea;
  --linha: #e6e9e8;
  --chao: #f2f4f3;
  --linha-fraca: #f0f2f1;
  --desligado: #f1f3f2;
  --falhou: #c0322b;
  --pausado: #9a5b00;
  --pausado-fundo: #fef6ea;
  --falhou-fundo: #fdf0ef;

  --voz: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ui: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --largura: 1200px;
  --margem: clamp(16px, 4vw, 40px);
  /* Os dois espaços da página, e só eles. `--secao` é o respiro de cima e de
     baixo de toda seção, igual em todas: é ele que dá o ritmo da rolagem.
     `--bloco` separa o que mora dentro de uma seção, do título ao conteúdo.
     Pedido do Lucas em 26/09/2026: o vão entre as seções era de até 160 px
     de cada lado, e cada uma tinha o seu. */
  --secao: clamp(56px, 5.5vw, 88px);
  --bloco: clamp(28px, 3.2vw, 44px);
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
  interpolate-size: allow-keywords;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, e não `hidden`: `hidden` vira um contêiner de rolagem e mata o
     `position: sticky` da demonstração. */
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--voz);
  font-weight: 500;
  /* Os eixos da Fraunces com os valores do aplicativo: `SOFT` arredonda as
     pontas e `WONK` entorta de leve algumas letras. É o que tira dela o ar
     de relatório de banco. */
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

p {
  text-wrap: pretty;
}

/* O marca-texto dos títulos: o mesmo verde do "Sem pagar uma." do
   cabeçalho, desenhado quando o título aparece, e só nos títulos em que a
   frase marcada é a saída, e não o problema. É fundo, e não pseudo-elemento,
   para seguir a frase quando ela quebra de linha. */
.risco {
  background: linear-gradient(var(--marca), var(--marca)) no-repeat 0 88% / 0% 0.3em;
  transition: background-size 1s 0.35s cubic-bezier(0.7, 0, 0.2, 1);
}

.visto .risco,
html:not(.js) .risco {
  background-size: 100% 0.3em;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i-st {
  width: 18px;
  height: 12px;
  fill: currentColor;
  stroke: none;
}

.i-st.i-bat {
  width: 27px;
  height: 13px;
}

:focus-visible {
  outline: 3px solid var(--marca-escrita);
  outline-offset: 3px;
  border-radius: 6px;
}

.largura {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* Só para leitor de tela: some da vista, mas continua sendo lido. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.largura-estreita {
  max-width: 920px;
}

/* ── Texto que se repete ───────────────────────────────────────────────── */

.lead {
  margin: 22px 0 0;
  max-width: 40em;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.55;
  color: var(--tinta-fraca);
}

/* Dois parágrafos de apoio seguidos são um texto só: o respiro entre eles é
   de parágrafo, e não o de título para texto. */
.lead + .lead {
  margin-top: 12px;
}

/* A REGRA DO ALINHAMENTO, pedido do Lucas em 26/09/2026: tudo o que está
   fora de cartão é centralizado, e só dentro dos cartões o texto fica à
   esquerda. O cabeçalho de seção é o primeiro caso, e vale para todos. */
.cabeca {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.cabeca .lead {
  margin-left: auto;
  margin-right: auto;
}

/* A marca no alto do cabeçalho: o mascote em cima e o nome embaixo, no
   desenho do logo do aplicativo (a serifada com o ponto verde). O tamanho é
   o do logo da referência que o Lucas mandou, uns 165 x 55 px acima de um
   título de 48. */
.marca-topo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 30px;
}

.marca-topo-mascote {
  display: block;
  width: 58px;
}

.marca-topo-nome {
  font-family: var(--voz);
  font-size: 24px;
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tinta);
}

/* ── Botões ────────────────────────────────────────────────────────────── */

/* Os botões da página são verdes, pedido do Lucas em 26/09/2026. O aplicativo
   usa botão preto e guarda o verde para destaque; aqui o botão é o destaque.

   O texto é grafite, e não branco: branco sobre este verde dá 1,58:1, e
   grafite dá 11,29:1 (`docs/cores.md`). E como o verde sobre o branco da
   página também quase não tem borda (os mesmos 1,58:1), quem desenha o
   contorno do botão é a sombra de baixo, num verde mais fundo.

   Os botões desenhados dentro das telas do aplicativo continuam pretos: são
   o aplicativo como ele é. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--marca);
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(12, 112, 84, 0.28), 0 14px 28px -14px rgba(12, 112, 84, 0.55);
  transition: transform 0.22s var(--curva), box-shadow 0.22s, background-color 0.22s;
}

.botao:hover {
  transform: translateY(-2px);
  background: #43dba6;
  box-shadow: inset 0 -3px 0 rgba(12, 112, 84, 0.32), 0 18px 34px -14px rgba(12, 112, 84, 0.6);
}

.botao:active {
  transform: translateY(0) scale(0.985);
}

.botao .seta {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
  transition: transform 0.22s var(--curva);
}

.botao:hover .seta {
  transform: translateX(3px);
}

.botao-g {
  height: 54px;
  padding: 0 28px;
  font-size: 17px;
}

.botao-largo {
  width: 100%;
}

/* Sobre o grafite, o mesmo botão ganha um brilho verde em volta no lugar da
   sombra, que ali não apareceria. */
.botao-verde {
  box-shadow: inset 0 -3px 0 rgba(12, 112, 84, 0.28), 0 18px 40px -18px rgba(80, 230, 178, 0.6);
}

.botao-verde:hover {
  background: #6cf0c2;
  box-shadow: inset 0 -3px 0 rgba(12, 112, 84, 0.28), 0 22px 44px -18px rgba(80, 230, 178, 0.7);
}

/* ── Seções ────────────────────────────────────────────────────────────── */

.secao {
  position: relative;
  padding: var(--secao) 0;
}

/* As seções de baixo só são montadas quando chegam perto da tela (pedido do
   Lucas, 27/09/2026, para a primeira tela abrir mais rápido): antes, o
   navegador calculava os 2.100 elementos da página inteira para desenhar só
   o topo, e no celular do PageSpeed isso era a maior parte do tempo até o
   primeiro conteúdo. Medido aqui: o trabalho até o primeiro desenho caiu
   quase pela metade. O que é pulado continua na página (busca, leitor de
   tela, âncoras), e a medida da seção fica guardada depois de montada.

   Isto corta o que passa da borda de cada seção. Ficam de fora o topo (é a
   primeira tela) e a história do Lucas: a sombra verde do cartão da conta,
   no fim dela, passa da borda com 6% de força, e o corte apareceria. Nas
   outras, o que passa é sombra abaixo de 2,3%, onde o fundo já muda de cor.
   Um cartão novo com sombra encostado no fim de uma seção precisa desta
   mesma conta. */
main > section:not(.hero):not(#lucas) {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}

/* Com a medida provisória das seções ainda não montadas, ir a uma seção pelo
   endereço (#oferta, #perguntas) calcula o destino errado. A página não tem
   mais links com # (saíram em 28/09/2026), mas um endereço com # de fora
   ainda pode chegar: aí o script do <head> põe `montada` no <html>, e tudo é
   montado antes. Um link com # que volte à página precisa disso no clique. */
.montada main > section:not(.hero):not(#lucas) {
  content-visibility: visible;
}

/* A história do Lucas termina mais perto das perguntas (pedido dele,
   27/09/2026): a única seção com o respiro de baixo menor que o `--secao`. */
#lucas {
  padding-bottom: var(--bloco);
}

.secao-chao {
  background: var(--chao);
}

.secao-marfim {
  background: var(--marfim);
}

.secao-escura {
  overflow: hidden;
  background: var(--tinta);
  color: var(--papel);
}

.secao-escura .lead {
  color: rgba(255, 255, 255, 0.74);
}

.verde {
  color: var(--marca);
  white-space: nowrap;
}

.escura-brilho {
  position: absolute;
  left: 50%;
  top: -30%;
  width: min(1200px, 120vw);
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(80, 230, 178, 0.2), rgba(80, 230, 178, 0) 72%);
  pointer-events: none;
}

.escura-brilho-final {
  top: auto;
  bottom: -40%;
}

/* ── Aparecer ao rolar ──────────────────────────────────────────────────── */

.js [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
}

.js [data-revelar].visto {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   O NOME
   ════════════════════════════════════════════════════════════════════════════
   O nome com o ponto verde, no rodapé. A barra de cima, que também o usava,
   saiu em 28/09/2026, a pedido do Lucas, com o menu de âncoras. */
.logo {
  font-family: var(--voz);
  font-size: 20px;
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

/* O ponto verde do nome é o único verde da barra lateral do aplicativo, e é
   o único daqui também. */
.logo-ponto {
  color: var(--marca);
}

/* ════════════════════════════════════════════════════════════════════════════
   OS APARELHOS
   Tudo em porcentagem da largura, para o mesmo desenho servir do tamanho de
   um polegar ao de uma tela inteira. As telas desenhadas em código têm o
   tamanho do aparelho de verdade (390 x 844 e 1280 x 800) e são escaladas
   pelo `pagina.js`, que é quem sabe quanto espaço sobrou.
   ════════════════════════════════════════════════════════════════════════════ */

.iphone {
  position: relative;
  aspect-ratio: 0.4791;
  border-radius: 15.5% / 7.4%;
  background: linear-gradient(155deg, #414847 0%, #151a19 30%, #0b0f0e 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(18, 25, 24, 0.22),
    0 50px 90px -40px rgba(18, 25, 24, 0.55),
    0 22px 40px -24px rgba(18, 25, 24, 0.35);
}

.iphone-tela {
  position: relative;
  margin: 3.3%;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 12.4% / 5.75%;
  background: var(--papel);
  container-type: inline-size;
}

.tela-escala {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
}

.tela-escala[data-base='390'] {
  width: 390px;
  height: 844px;
}

.tela-escala[data-base='1280'] {
  width: 1280px;
  height: 800px;
}

.laptop {
  position: relative;
}

.laptop-tampa {
  position: relative;
  padding: 1.7% 1.7% 2.3%;
  border-radius: 3% 3% 0 0 / 4.4% 4.4% 0 0;
  background: #0d1211;
  box-shadow: inset 0 0 0 1px #2d3332, 0 0 0 1px rgba(18, 25, 24, 0.12);
}

.laptop-camera {
  position: absolute;
  top: 0.75%;
  left: 50%;
  width: 0.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2a3230;
  transform: translateX(-50%);
}

.laptop-tela {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 3px;
  background: var(--chao);
}

.laptop-base {
  position: relative;
  height: 0;
  margin: 0 -6.5%;
  padding-bottom: 3%;
  border-radius: 0 0 48% 48% / 0 0 100% 100%;
  background: linear-gradient(180deg, #edf0ef 0%, #d3d8d6 40%, #a9b0ae 100%);
  box-shadow: 0 34px 60px -30px rgba(18, 25, 24, 0.55);
}

.laptop-base span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 42%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #b3bab8, #d9dddc);
  transform: translateX(-50%);
}

.janela {
  overflow: hidden;
  border-radius: 14px;
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(18, 25, 24, 0.08), 0 40px 80px -34px rgba(18, 25, 24, 0.42);
}

.janela-barra,
.navegador-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  background: #f7f8f8;
  border-bottom: 1px solid var(--linha);
}

.janela-bolinhas {
  display: flex;
  gap: 6px;
}

.janela-bolinhas i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #dde1df;
}

.janela-endereco {
  flex: 1;
  max-width: 380px;
  height: 24px;
  margin: 0 auto;
  padding: 0 12px;
  overflow: hidden;
  border-radius: 7px;
  background: #eceeed;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tinta-fraca);
}

/* ════════════════════════════════════════════════════════════════════════════
   A TELA DO NAVEGADOR (1280 x 800), COM AS MEDIDAS DO INÍCIO
   ════════════════════════════════════════════════════════════════════════════ */

.web {
  display: flex;
  width: 1280px;
  height: 800px;
  background: var(--chao);
  font-family: var(--ui);
  color: var(--tinta);
  line-height: 1.4;
}

.web-lado {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 236px;
  padding: 30px 14px 18px;
  background: var(--papel);
  border-right: 1px solid var(--linha);
}

.web-logo {
  margin: 4px 0 34px 12px;
  font-family: var(--voz);
  font-size: 19px;
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
}

.web-logo span {
  color: var(--marca);
}

.web-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.web-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 15px;
}

.web-item .i {
  width: 18px;
  height: 18px;
}

.web-item.ativo {
  background: var(--desligado);
  font-weight: 600;
}

.web-grupo {
  margin: 22px 12px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.web-lado-pe {
  margin-top: auto;
}

.web-lado-pe .web-sair {
  margin-top: 8px;
  border-top: 1px solid var(--linha);
  border-radius: 0;
  padding-top: 12px;
  height: auto;
  color: var(--tinta-fraca);
}

.web-principal {
  flex: 1;
  overflow: hidden;
}

.web-coluna {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 44px;
}

.web-cabeca,
.vg-cabeca-solta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}

.web-ola {
  margin: 0;
  font-family: var(--voz);
  font-size: 30px;
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.web-data {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--tinta-fraca);
}

.web-periodo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--papel);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

.web-periodo .i {
  width: 16px;
  height: 16px;
}

.web-cartao {
  border-radius: 18px;
  background: var(--papel);
  padding: 20px 22px 22px;
}

.vg-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.vg-topo b {
  font-size: 16px;
  font-weight: 600;
}

.vg-topo span {
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.vg-frase {
  max-width: 17em;
  margin: 14px 0 8px;
  font-family: var(--voz);
  font-size: 32px;
  font-weight: 450;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.vg-saiu {
  margin: 0 0 20px;
  font-size: 15.5px;
  color: var(--tinta-fraca);
}

.vg-saiu strong {
  color: var(--tinta);
}

.vg-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.vg-n {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 17px 18px 15px;
  border-radius: 14px;
  background: var(--chao);
}

.vg-n span,
.vg-n small {
  font-size: 13px;
  color: var(--tinta-fraca);
}

.vg-n b {
  font-family: var(--voz);
  font-size: 28px;
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

/* O resultado é o número que importa, e é o único com fundo menta: é o que o
   Início do aplicativo faz. */
.vg-n-destaque {
  background: var(--menta);
}

.web-dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.web-cartao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.web-cartao-topo b {
  font-size: 16px;
  font-weight: 600;
}

.web-cartao-topo span {
  font-size: 13.5px;
  color: var(--marca-escrita);
}

.web-campanha {
  padding: 16px;
  border: 1px solid var(--linha);
  border-radius: 14px;
}

.web-campanha-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.web-campanha-topo b {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

.chave {
  position: relative;
  flex: none;
  width: 42px;
  height: 25px;
  border-radius: 999px;
  background: var(--desligado);
}

.chave i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.chave.ligada {
  background: var(--tinta);
}

.chave.ligada i {
  left: 20px;
}

.web-campanha > p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 14px;
}

.selo-ativo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--menta);
  color: var(--marca-escrita);
  font-size: 13px;
  font-weight: 600;
}

.selo-ativo i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--marca-escrita);
}

.web-campanha-obj {
  font-size: 13.5px;
  color: var(--tinta-fraca);
}

.web-campanha-numeros {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}

.web-campanha-numeros span {
  display: block;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--tinta-fraca);
}

.web-campanha-numeros b {
  font-size: 17px;
  font-weight: 600;
}

.web-geracoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.web-geracoes img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}

.web-criar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  border: 1.5px dashed var(--linha);
  border-radius: 10px;
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* ════════════════════════════════════════════════════════════════════════════
   A TELA DO CELULAR (390 x 844), COM AS MEDIDAS DO APLICATIVO
   ════════════════════════════════════════════════════════════════════════════ */

.cel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 390px;
  height: 844px;
  overflow: hidden;
  background: var(--papel);
  font-family: var(--ui);
  color: var(--tinta);
  line-height: 1.4;
}

.cel-status {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 8px 32px 0 46px;
  font-size: 17px;
  color: var(--tinta);
}

.cel-status b {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cel-status span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* A ilha do iPhone. Na hora em que a campanha sobe, ela se abre numa
   atividade ao vivo, que é onde o iPhone mostra o que está acontecendo agora.
   A largura anima de verdade (e não por escala) porque o texto de dentro não
   pode esticar junto. É uma peça só, pequena e solta: não mexe no resto. */
.cel-ilha {
  position: absolute;
  top: 11px;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 124px;
  height: 36px;
  padding: 0 16px;
  overflow: hidden;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
  transition: width 0.6s cubic-bezier(0.2, 1.3, 0.3, 1), height 0.6s cubic-bezier(0.2, 1.3, 0.3, 1);
}

.cel-ilha > span {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.ao-vivo .cel-ilha {
  width: 318px;
  height: 44px;
}

.ao-vivo .cel-ilha > span {
  opacity: 1;
  transition-delay: 0.28s;
}

.ilha-esq {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--papel);
}

.ilha-esq i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marca);
  animation: pulsa-verde 1.6s ease-out infinite;
}

.ilha-dir {
  font-size: 15px;
  font-weight: 600;
  color: var(--marca);
}

@keyframes pulsa-verde {
  0% {
    box-shadow: 0 0 0 0 rgba(80, 230, 178, 0.7);
  }
  100% {
    box-shadow: 0 0 0 9px rgba(80, 230, 178, 0);
  }
}

.cel-topo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px 8px;
}

.cel-topo p {
  margin: 0;
  font-size: 31px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cel-limpar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 17px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--tinta-fraca);
}

.cel-fio {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.cel-lista {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 20px 16px;
  transition: transform 0.55s var(--curva);
}

/* Na tela parada (o cabeçalho da página), a conversa encosta embaixo, como
   fica no aplicativo depois de algumas mensagens. */
.cel-fio-estatico .cel-lista {
  top: auto;
  bottom: 186px;
}

.msg {
  max-width: 84%;
  font-size: 16.5px;
  line-height: 1.42;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.97);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15), visibility 0.35s;
}

.msg.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.msg p {
  margin: 0;
}

.msg-dela {
  align-self: flex-end;
  padding: 13px 18px;
  border-radius: 23px;
  background: var(--tinta);
  color: var(--papel);
  transform-origin: 100% 100%;
}

/* A fala dele é menta: é a maior superfície verde do aplicativo, e a única
   em que o verde está por direito, dizendo quem falou. */
.msg-dele {
  align-self: flex-start;
  max-width: 88%;
  padding: 15px 18px;
  border-radius: 23px;
  background: var(--menta);
  transform-origin: 0 100%;
}

.msg-plano p + p {
  margin-top: 9px;
}

.msg-foto {
  max-width: 62%;
  padding: 5px;
}

.msg-foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 19px;
}

.msg-foto p {
  margin: 9px 13px 7px;
}

.no-ar-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--papel);
  color: var(--marca-escrita);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.no-ar-selo i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marca-escrita);
}

.msg-no-ar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* O anúncio pronto não é uma fala, é a entrega: papel com borda, e não
   bolha de conversa. É o texto que vai ao ar no nome do negócio dela. */
.cartao-anuncio {
  align-self: stretch;
  max-width: none;
  padding: 13px 18px 18px;
  border: 1.5px solid var(--linha);
  border-radius: 18px;
  background: var(--papel);
  font-size: 15.5px;
  line-height: 1.55;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15), visibility 0.35s, border-color 0.25s, box-shadow 0.25s;
}

.cartao-anuncio p + p {
  margin-top: 1em;
}

.cartao-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin-bottom: 8px;
}

.cartao-etiqueta {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.cartao-editar {
  position: relative;
  padding: 5px 12px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.editar-b {
  display: none;
}

.cartao-anuncio.editando {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgba(18, 25, 24, 0.06);
}

.editando .cartao-editar {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--papel);
}

.editando .editar-a {
  display: none;
}

.editando .editar-b {
  display: inline;
}

.palavra {
  opacity: 0;
  transition: opacity 0.14s ease;
}

.palavra.dita {
  opacity: 1;
}

.troca-depois {
  display: none;
}

.troca.sel .troca-antes {
  border-radius: 3px;
  background: rgba(80, 230, 178, 0.5);
  box-shadow: 0 0 0 2px rgba(80, 230, 178, 0.5);
}

.troca.feita .troca-antes {
  display: none;
}

.troca.feita .troca-depois {
  display: inline;
}

.editando .troca.feita .troca-depois::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--tinta);
  animation: cursor 1s steps(1) infinite;
}

@keyframes cursor {
  50% {
    opacity: 0;
  }
}

.cel-pensando {
  position: absolute;
  left: 20px;
  top: 0;
  display: flex;
  gap: 5px;
  padding: 17px 18px;
  border-radius: 23px;
  background: var(--menta);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.3s var(--curva);
}

.cel-pensando.on {
  opacity: 1;
  transform: none;
}

.cel-pensando span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marca-escrita);
  opacity: 0.45;
  animation: mp-pulsa 1.25s ease-in-out infinite;
}

.cel-pensando span:nth-child(2) {
  animation-delay: 0.16s;
}

.cel-pensando span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes mp-pulsa {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* A conversa vazia, com o texto de abertura do aplicativo. */
.cel-abertura {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 34px 40px;
  text-align: center;
  transition: opacity 0.35s, transform 0.4s var(--curva);
}

.cel-abertura.fora {
  opacity: 0;
  transform: translateY(-14px);
}

.cel-abertura-fala {
  margin: 18px 0 10px;
  font-family: var(--voz);
  font-size: 27px;
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
}

.cel-abertura-apoio {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}

.cel-baixo {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 8px 16px 10px;
  background: var(--papel);
}

.cel-opcoes,
.cel-anexo {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(100% + 2px);
  border: 1.5px solid var(--linha);
  background: var(--papel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.45s var(--curva), visibility 0.3s;
}

.cel-opcoes.on,
.cel-anexo.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.cel-opcoes {
  overflow: hidden;
  border-radius: 20px;
}

.cel-opcoes-titulo {
  margin: 0;
  padding: 14px 18px 12px;
  border-bottom: 1.5px solid var(--linha);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.cel-opcao {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  overflow: hidden;
  border-bottom: 1.5px solid var(--linha);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.25s;
}

.cel-opcao:last-child {
  border-bottom: 0;
}

.cel-opcao i {
  display: grid;
  flex: none;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--menta);
  color: var(--marca-escrita);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.cel-opcao.escolhida {
  background: var(--menta);
}

.cel-opcao.escolhida i {
  background: var(--tinta);
  color: var(--papel);
}

.cel-anexo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px 9px 9px;
  border-radius: 18px;
}

.cel-anexo-mini {
  position: relative;
  flex: none;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 12px;
}

.cel-anexo-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 11px;
  background: rgba(18, 25, 24, 0.38);
  transform: rotate(-90deg);
  transition: opacity 0.3s;
}

.anel circle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 3.5;
}

.anel .anel-cheio {
  stroke: var(--papel);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.cel-anexo.pronto .anel {
  opacity: 0;
}

.cel-anexo-diz {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--tinta-fraca);
}

.anexo-b {
  display: none;
}

.cel-anexo.pronto .anexo-a {
  display: none;
}

.cel-anexo.pronto .anexo-b {
  display: inline;
}

.cel-anexo-x {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--tinta-fraca);
}

.cel-compositor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cel-anexar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1.5px solid var(--linha);
  border-radius: 50%;
}

.cel-anexar .i {
  width: 24px;
  height: 24px;
}

.cel-campo {
  display: flex;
  flex: 1;
  align-items: center;
  height: 56px;
  padding: 0 62px 0 20px;
  overflow: hidden;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  font-size: 17px;
  white-space: nowrap;
}

.cel-dica {
  color: var(--tinta-apagada);
}

.cel-digitado:empty {
  display: none;
}

.cel-digitado::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.22em;
  background: var(--tinta);
  animation: cursor 1s steps(1) infinite;
}

.com-texto .cel-dica {
  display: none;
}

.cel-mic {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--desligado);
  transition: background-color 0.2s, color 0.2s;
}

.cel-mic .enviar {
  display: none;
}

.com-texto .cel-mic {
  background: var(--tinta);
  color: var(--papel);
}

.com-texto .cel-mic .mic {
  display: none;
}

.com-texto .cel-mic .enviar {
  display: block;
}

.cel-abas {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 100px;
  padding: 4px 16px 26px;
}

.cel-abas-pilula {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-around;
  height: 66px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--papel);
  box-shadow: 0 8px 26px -6px rgba(18, 25, 24, 0.14), 0 0 0 1px rgba(18, 25, 24, 0.05);
}

.cel-abas-pilula > span {
  display: grid;
  place-items: center;
  width: 70px;
  height: 52px;
  border-radius: 999px;
  color: var(--tinta-fraca);
}

.cel-abas-pilula > span.ativa {
  background: var(--desligado);
  color: var(--tinta);
}

.cel-abas-pilula .i {
  width: 27px;
  height: 27px;
}

.cel-abas-mais {
  display: grid;
  flex: none;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: 0 8px 26px -6px rgba(18, 25, 24, 0.14), 0 0 0 1px rgba(18, 25, 24, 0.05);
}

.cel-abas-mais .i {
  width: 28px;
  height: 28px;
}

/* O toque: um círculo que se abre de onde o dedo encostou. */
.toque {
  position: relative;
  overflow: hidden;
}

.toque::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(18, 25, 24, 0.24);
  opacity: 0;
  pointer-events: none;
}

.cel-opcao.toque::after {
  left: 32px;
}

.toque.tocado::after {
  animation: toque 0.7s ease-out;
}

@keyframes toque {
  0% {
    opacity: 0.6;
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
    transform: scale(4.5);
  }
}

/* Telas que são print, e não desenho: a barra de status é desenhada por
   cima, e o print começa logo abaixo dela. Os prints foram tirados com a
   bateria em 16%, vermelha, e ela sai no recorte (`ferramentas/assets.py`). */
.iphone-tela-print {
  display: flex;
  flex-direction: column;
}

.cel-status-print {
  flex: none;
  height: auto;
  aspect-ratio: 390 / 50;
  padding: 2.4cqw 8.2cqw 0 11.8cqw;
  font-size: 4.3cqw;
  background: var(--papel);
}

.cel-status-print .i-st {
  width: 4.6cqw;
  height: 3.1cqw;
}

.cel-status-print .i-st.i-bat {
  width: 6.9cqw;
  height: 3.3cqw;
}

.cel-status-print span {
  gap: 1.5cqw;
}

.cel-status-claro {
  background: #f4ebe1;
}

.iphone-tela-print > img {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   O MASCOTE
   ════════════════════════════════════════════════════════════════════════════ */

.mascote {
  display: inline-block;
  line-height: 0;
}

.mascote svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mascote .m-corpo-inteiro {
  animation: flutua 3.8s ease-in-out infinite;
}

.m-olho {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
}

.m-palpebra {
  transform-box: fill-box;
  transform-origin: center;
  transition-property: transform;
  transition-timing-function: ease;
}

@keyframes flutua {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   1. CABEÇALHO
   ════════════════════════════════════════════════════════════════════════════ */

/* Sem a barra de cima (28/09/2026), o topo da página é o próprio cabeçalho:
   o respiro de cima cresceu para o mascote não encostar na borda. */
.hero {
  position: relative;
  padding: clamp(44px, 6vw, 80px) 0 var(--secao);
  overflow: hidden;
}

.hero-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-titulo {
  max-width: 17em;
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.marca-texto {
  position: relative;
  z-index: 0;
  white-space: nowrap;
}

.marca-texto::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -0.06em;
  right: -0.08em;
  bottom: 0.04em;
  height: 0.34em;
  border-radius: 0.06em;
  background: var(--marca);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: risca 1s 0.7s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes risca {
  to {
    transform: scaleX(1);
  }
}

.hero-lead {
  max-width: 34em;
  margin-top: 22px;
  text-wrap: balance;
}

.hero-lead strong {
  font-weight: 600;
  color: var(--tinta);
}

/* Três frases, cada uma na sua linha (pedido do Lucas, 27/09/2026), num
   parágrafo só: a entrada do topo anima cada bloco pela ordem, e três
   parágrafos mudariam essa conta. */
.hero-lead > span {
  display: block;
}

.hero-lead > span + span {
  margin-top: 10px;
}

/* O que vem além do anúncio: um cartão só, porque é um pacote, e não três
   avulsos. A etiqueta mora na borda de cima, e cada item leva o ícone da
   tela dele no aplicativo (Imagens, Roteiros, Site) com o selo de feito no
   canto. O selo é verde cheio com o traço grafite, a regra da paleta para o
   que vai escrito em cima do verde (11,29:1).

   Cada coluna tem a largura do próprio texto (`auto`), e o cartão a soma
   delas: com colunas iguais, "Cria imagens profissionais para seus produtos"
   quebrava em três linhas do lado de um "Cria seu site" de uma. */
.hero-alem {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: 40px;
  padding: 24px 8px 18px;
  border: 1px solid var(--linha);
  border-radius: 22px;
  background: var(--papel);
  box-shadow: 0 22px 44px -32px rgba(18, 25, 24, 0.3);
}

.hero-alem-titulo {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 5px 14px;
  border: 1px solid rgba(12, 112, 84, 0.16);
  border-radius: 999px;
  background: var(--menta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--marca-escrita);
  transform: translate(-50%, -50%);
}

.hero-alem-lista {
  display: grid;
  grid-template-columns: repeat(3, auto);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-alem-lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 22px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--tinta);
}

.hero-alem-lista li + li {
  border-left: 1px solid var(--linha);
}

.hero-alem-icone {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--menta);
  color: var(--marca-escrita);
}

.hero-alem-icone > .i {
  width: 22px;
  height: 22px;
}

/* O selo aparece com um estalo e o traço se desenha, um item depois do
   outro, logo depois que o título entra. `stroke-dasharray` passa pelo
   `<use>` porque é herdado. */
.hero-alem-feito {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid var(--papel);
  border-radius: 50%;
  background: var(--marca);
  animation: estala 0.4s cubic-bezier(0.2, 1.5, 0.35, 1) both;
}

.hero-alem-feito .i {
  width: 11px;
  height: 11px;
  stroke-width: 3.4;
  color: var(--tinta);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: marcar 0.45s var(--curva) forwards;
}

.hero-alem-lista li:nth-child(1) .hero-alem-feito {
  animation-delay: 0.75s;
}

.hero-alem-lista li:nth-child(1) .hero-alem-feito .i {
  animation-delay: 0.9s;
}

.hero-alem-lista li:nth-child(2) .hero-alem-feito {
  animation-delay: 0.9s;
}

.hero-alem-lista li:nth-child(2) .hero-alem-feito .i {
  animation-delay: 1.05s;
}

.hero-alem-lista li:nth-child(3) .hero-alem-feito {
  animation-delay: 1.05s;
}

.hero-alem-lista li:nth-child(3) .hero-alem-feito .i {
  animation-delay: 1.2s;
}

@keyframes estala {
  from {
    transform: scale(0);
  }
}

@keyframes marcar {
  to {
    stroke-dashoffset: 0;
  }
}

/* O botão do cabeçalho mora embaixo dos aparelhos, pedido do Lucas em
   26/09/2026: primeiro ela vê o aplicativo, depois é convidada. Fora da
   coluna do texto, então ele se centraliza sozinho. */
.hero-acoes {
  display: flex;
  justify-content: center;
  margin-top: var(--bloco);
  animation: entra 0.9s 0.6s var(--curva) both;
}

.hero-texto > * {
  animation: entra 0.9s var(--curva) both;
}

.hero-texto > :nth-child(2) {
  animation-delay: 0.06s;
}

.hero-texto > :nth-child(3) {
  animation-delay: 0.14s;
}

.hero-texto > :nth-child(4) {
  animation-delay: 0.22s;
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   O VÍDEO DO CABEÇALHO

   Uma moldura limpa, e não um aparelho: o vídeo é do Lucas falando, e a
   borda de um notebook em volta de um rosto só roubaria tamanho. O brilho
   verde atrás é o mesmo que ficava atrás dos aparelhos.

   A proporção mora numa variável: se o vídeo vier em pé, é mudar um número.
   ════════════════════════════════════════════════════════════════════════════ */
.hero-midia {
  position: relative;
  margin-top: var(--bloco);
}

.hero-video {
  position: relative;
  width: min(100%, 980px);
  margin: 0 auto;
  aspect-ratio: var(--proporcao-do-video, 16 / 9);
  overflow: hidden;
  border-radius: 22px;
  background: var(--tinta);
  box-shadow:
    0 0 0 1px rgba(18, 25, 24, 0.1),
    0 44px 90px -40px rgba(18, 25, 24, 0.5),
    0 20px 40px -26px rgba(18, 25, 24, 0.3);
  animation: sobe 1.2s 0.25s var(--curva) both;
}

.hero-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--tinta);
}

/* A capa: o que aparece enquanto o vídeo não roda. É um botão, porque o
   clique nela começa o vídeo com som. */
.video-capa {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  border: 0;
  background: radial-gradient(70% 90% at 50% 36%, #1f3a33 0%, var(--tinta) 72%);
  color: var(--papel);
  font: inherit;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.video-capa-mascote {
  display: block;
}

.video-capa-titulo {
  font-family: var(--voz);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.video-play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--tinta);
  box-shadow: 0 0 0 10px rgba(80, 230, 178, 0.18);
  transition: transform 0.25s var(--curva), box-shadow 0.25s;
}

.video-play .i {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.video-capa:hover .video-play {
  transform: scale(1.06);
  box-shadow: 0 0 0 14px rgba(80, 230, 178, 0.2);
}

.tocando .video-capa {
  opacity: 0;
  pointer-events: none;
}

/* O convite para ouvir, por cima do vídeo que já roda sem som. Centralizado
   por `inset` e margem, e não por `transform`, para a entrada poder animar o
   `transform` à vontade. */
.video-ouvir {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  gap: 14px;
  width: max-content;
  height: max-content;
  margin: auto;
  padding: 18px 30px 18px 18px;
  border: 0;
  border-radius: 24px;
  background: rgba(18, 25, 24, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--papel);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}

.tocando:not(.com-som) .video-ouvir {
  display: flex;
  animation: entra 0.5s var(--curva) both;
}

.video-ouvir-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--tinta);
  animation: pulsa-verde 1.6s ease-out infinite;
}

.video-ouvir-icone .i {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}

.video-ouvir-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.video-ouvir-texto b {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.video-ouvir-texto span {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.8);
}

/* "Toque" no celular, "clique" no computador: o verbo é o do dedo dela. */
.so-toque {
  display: none;
}

@media (hover: none) {
  .so-clique {
    display: none;
  }

  .so-toque {
    display: inline;
  }
}

.hero-brilho {
  position: absolute;
  inset: 8% 6% -6%;
  z-index: -1;
  background: radial-gradient(55% 50% at 50% 55%, rgba(80, 230, 178, 0.32), rgba(80, 230, 178, 0) 72%);
  filter: blur(24px);
  pointer-events: none;
}

.hero-laptop {
  width: 82%;
  margin-left: 5%;
  animation: sobe 1.2s 0.25s var(--curva) both;
}

.hero-iphone {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 22.5%;
  animation: sobe 1.2s 0.45s var(--curva) both;
}

@keyframes sobe {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   2. AS SAÍDAS DE HOJE
   ════════════════════════════════════════════════════════════════════════════ */

.saidas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: var(--bloco);
}

.saida {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 30px;
  border-radius: 28px;
  background: var(--papel);
}

.js .saida:nth-child(2) {
  transition-delay: 0.1s;
}

.js .saida:nth-child(3) {
  transition-delay: 0.2s;
}

.saida-visual {
  position: relative;
  height: 252px;
  margin-bottom: 26px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--chao);
}

.saida h3 {
  margin: 0 10px 10px;
  font-size: 21px;
  line-height: 1.15;
}

/* `>`: só os parágrafos do cartão. Sem ele, a regra alcançava os parágrafos
   de dentro das cenas (a pergunta do Gerenciador, o total das cobranças) e
   ganhava deles na especificidade. */
.saida > p {
  margin: 0 10px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}

/* Duas frases em cada cartão, a falha e o que ela custa, com respiro entre
   elas. */
.saida > p + p {
  margin-top: 10px;
}

/* ════════════════════════════════════════════════════════════════════════════
   AS TRÊS CENAS DAS SAÍDAS

   Cada cartão é uma cena pequena de uma coisa que existe (o Gerenciador, as
   cobranças do mês, a conversa com uma IA), e não um enfeite abstrato.

   Cada uma roda UMA VEZ quando aparece e fica parada no último quadro, sem
   loop (pedido do Lucas em 26/09/2026). Só recomeça depois de sair da tela
   inteira e voltar: é o `pagina.js` que põe e tira a classe `rodando`.

   A cor segue a regra da página: âmbar é o que o jeito antigo custa (a cor
   de "vai gastar" do aplicativo, `docs/cores.md`), vermelho é o que falhou,
   verde é o que deu certo. O azul do "Publicar" existe só aqui: é o
   Gerenciador, e não nós.
   ════════════════════════════════════════════════════════════════════════════ */

/* Sem a classe, nenhuma animação: tudo volta ao quadro de partida, que é o
   estilo de base de cada peça. É isso que faz a cena recomeçar do zero
   quando a classe volta, em vez de continuar de onde parou. Por isso o
   estilo de base de cada peça é igual ao 0% da animação dela: senão, a peça
   pisca no instante em que a cena começa. */
[data-cena]:not(.rodando) *,
[data-cena]:not(.rodando) *::before,
[data-cena]:not(.rodando) *::after {
  animation: none !important;
}

/* ── 1. O Gerenciador: o cursor perdido, e o erro no fim ───────────────── */

/* A confusão em três camadas, que se somam até o fim do ciclo: o cursor se
   enrola pelo formulário e deixa o rabisco para trás; cada hesitação deixa um
   "?"; e o clique em Publicar derruba um aviso por cima do outro, até o
   vermelho, e fica assim: a cena roda uma vez e para no último quadro. O
   caminho e o relógio saem de uma conta só (os números abaixo
   são gerados): o cursor anda pelo mesmo desenho que o
   rabisco, e os dois ficam juntos porque os quadros são os mesmos. O
   gerador é `ferramentas/cena-gerenciador.py`: mude lá, e não aqui. */

.ger2 {
  position: relative;
  width: 300px;
  height: 214px;
  margin: 16px auto 0;
  border-radius: 12px;
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(18, 25, 24, 0.06), 0 18px 34px -22px rgba(18, 25, 24, 0.4);
  animation: ger2-treme 10s both;
}

.ger-barra {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 26px;
  padding: 0 10px;
  border-bottom: 1px solid var(--linha-fraca);
}

.ger-barra .janela-bolinhas {
  gap: 4px;
}

.ger-barra .janela-bolinhas i {
  width: 7px;
  height: 7px;
}

.ger-barra b {
  font-size: 10px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

/* As três camadas da campanha, que é a primeira coisa que ninguém entende. */
.ger2-abas {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 20px;
  padding: 0 10px;
  border-bottom: 1px solid var(--linha-fraca);
}

.ger2-abas span {
  padding-bottom: 4px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tinta-fraca);
}

.ger2-abas .ativa {
  box-shadow: inset 0 -2px 0 #3b6fd8;
  color: var(--tinta);
}

.ger2-form {
  position: absolute;
  top: 52px;
  left: 0;
  right: 0;
}

.ger2-linha {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  height: 22px;
  padding: 0 12px;
}

.ger2-linha span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.ger2-linha em {
  position: relative;
  display: flex;
  align-items: center;
  height: 17px;
  padding: 0 18px 0 7px;
  overflow: hidden;
  border: 1px solid #dfe3e1;
  border-radius: 4px;
  font-size: 9.5px;
  font-style: normal;
  white-space: nowrap;
  color: var(--tinta);
}

/* A setinha de lista, desenhada com duas bordas. */
.ger2-linha em::after {
  content: '';
  position: absolute;
  right: 7px;
  top: 5px;
  width: 4px;
  height: 4px;
  border-right: 1.3px solid var(--tinta-fraca);
  border-bottom: 1.3px solid var(--tinta-fraca);
  transform: rotate(45deg);
}

.ger2-linha em.vazio {
  color: var(--tinta-apagada);
}

.ger2-linha em.erro {
  animation: ger2-erro 10s both;
}

.ger2-pe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  border-top: 1px solid var(--linha-fraca);
}

.ger2-publicar {
  position: absolute;
  right: 12px;
  top: 6px;
  display: grid;
  place-items: center;
  height: 19px;
  padding: 0 12px;
  border-radius: 5px;
  background: #3b6fd8;
  color: var(--papel);
  font-size: 9.5px;
  font-weight: 700;
  animation: ger2-aperta 10s both;
}

/* O rabisco que o cursor deixa: grafite fino, como traço de lápis. */
.ger2-rabisco {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  pointer-events: none;
}

.ger2-rabisco path {
  fill: none;
  stroke: rgba(18, 25, 24, 0.42);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ger2-rabisco 10s both;
}

.ger2-duvida {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--voz);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  box-shadow: 0 6px 12px -6px rgba(18, 25, 24, 0.5);
}

.ger2-alerta {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 196px;
  padding: 7px 10px 7px 8px;
  border: 1px solid rgba(154, 91, 0, 0.18);
  border-radius: 9px;
  background: var(--papel);
  box-shadow: 0 14px 26px -14px rgba(18, 25, 24, 0.5);
  opacity: 0;
}

.ger2-alerta i {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pausado);
  color: var(--papel);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.ger2-alerta span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ger2-alerta b {
  font-size: 9.8px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--tinta);
}

.ger2-alerta small {
  font-size: 8.8px;
  white-space: nowrap;
  color: var(--tinta-fraca);
}

.ger2-alerta.falhou {
  border-color: rgba(192, 50, 43, 0.3);
  background: var(--falhou-fundo);
}

.ger2-alerta.falhou i {
  background: var(--falhou);
  font-size: 13px;
}

.ger2-alerta.falhou b {
  color: var(--falhou);
}

/* Em cascata, cada um um degrau abaixo e à direita do anterior. */
.ga1 {
  left: 14px;
  top: 50px;
  animation: ga1 10s both;
}

.ga2 {
  left: 28px;
  top: 71px;
  animation: ga2 10s both;
}

.ga3 {
  left: 42px;
  top: 92px;
  animation: ga3 10s both;
}

.ga4 {
  left: 56px;
  top: 113px;
  animation: ga4 10s both;
}

/* O cursor anda sobre o mesmo desenho do rabisco (`offset-path`), em pé
   (`offset-rotate: 0deg`), com a ponta da seta presa no caminho. */
.ger2-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 18px;
  height: 18px;
  offset-path: path('M 38.0 206.0 C 47.0 203.3, 73.3 196.0, 92.0 190.0 C 110.7 184.0, 135.7 182.0, 150.0 170.0 C 164.3 158.0, 170.2 134.6, 178.0 118.0 C 185.8 101.4, 194.7 79.3, 196.7 70.4 C 198.7 61.4, 190.5 66.6, 190.0 64.2 C 189.5 61.8, 191.9 57.6, 193.8 56.0 C 195.7 54.3, 198.9 53.9, 201.4 54.3 C 203.9 54.7, 207.6 56.0, 208.8 58.2 C 210.0 60.3, 209.9 65.4, 208.4 67.4 C 207.0 69.4, 202.7 70.2, 200.1 70.1 C 197.6 70.0, 194.8 68.7, 193.2 66.7 C 191.7 64.7, 181.2 57.8, 190.6 58.3 C 200.1 58.9, 243.4 64.7, 250.0 70.0 C 256.6 75.3, 245.0 87.7, 230.0 90.0 C 215.0 92.3, 178.7 89.3, 160.0 84.0 C 141.3 78.7, 127.7 65.1, 118.0 58.0 C 108.3 50.9, 103.8 45.6, 101.7 41.7 C 99.5 37.8, 105.4 36.7, 105.0 34.6 C 104.6 32.5, 101.5 29.9, 99.5 29.1 C 97.5 28.3, 94.8 28.9, 92.8 29.8 C 90.8 30.7, 88.1 32.6, 87.6 34.7 C 87.0 36.7, 88.1 40.9, 89.7 42.3 C 91.3 43.7, 95.0 43.6, 97.1 43.1 C 99.3 42.6, 101.4 41.2, 102.5 39.3 C 103.7 37.5, 96.1 30.5, 104.0 31.9 C 111.9 33.4, 126.0 36.0, 150.0 48.0 C 174.0 60.0, 236.6 91.6, 248.0 104.0 C 259.4 116.4, 223.1 117.8, 218.5 122.7 C 213.8 127.5, 221.5 130.5, 220.2 133.0 C 219.0 135.5, 213.8 137.6, 210.9 137.6 C 208.0 137.6, 204.8 135.5, 203.0 133.2 C 201.2 131.0, 199.2 126.7, 200.1 124.0 C 200.9 121.3, 205.3 117.4, 208.1 117.0 C 210.9 116.7, 215.0 119.8, 216.8 122.0 C 218.5 124.3, 219.4 127.9, 218.7 130.7 C 218.1 133.5, 220.5 137.3, 212.8 138.9 C 205.0 140.4, 184.2 138.5, 172.0 140.0 C 159.8 141.5, 145.9 147.8, 139.8 148.1 C 133.7 148.3, 137.4 142.3, 135.4 141.6 C 133.4 140.8, 129.6 142.1, 127.9 143.5 C 126.2 144.8, 125.3 147.3, 125.1 149.5 C 124.8 151.7, 125.0 155.0, 126.5 156.6 C 128.0 158.1, 132.1 159.3, 134.2 158.6 C 136.2 158.0, 138.0 154.8, 138.7 152.7 C 139.4 150.6, 139.2 148.1, 138.2 146.1 C 137.2 144.2, 122.7 136.7, 132.6 141.1 C 142.6 145.4, 194.1 165.2, 198.0 172.0 C 201.9 178.8, 151.0 178.0, 156.0 182.0 C 161.0 186.0, 210.3 193.0, 228.0 196.0 C 245.7 199.0, 256.3 199.3, 262.0 200.0');
  offset-rotate: 0deg;
  offset-anchor: 3.75px 2.25px;
  opacity: 0;
  animation: ger2-cursor 10s both, ger2-cursor-some 10s both;
}

.ger2-cursor i {
  display: block;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8.5-6.2 1.3L9.6 19z' fill='%23121918' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 20% 12%;
  animation: ger2-clique 10s both;
}

@supports not (offset-path: path('M 0 0')) {
  .ger2-cursor {
    display: none;
  }
}

@keyframes ger2-cursor {
  0.00% { offset-distance: 0.00%; }
  3.00% { offset-distance: 0.00%; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  13.56% { offset-distance: 24.29%; }
  18.06% { offset-distance: 24.29%; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  28.45% { offset-distance: 48.17%; }
  32.95% { offset-distance: 48.17%; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  47.73% { offset-distance: 82.14%; }
  52.23% { offset-distance: 82.14%; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  60.00% { offset-distance: 100.00%; }
  100.00% { offset-distance: 100.00%; }
}

@keyframes ger2-rabisco {
  0.00% { stroke-dashoffset: 1.0000; }
  3.00% { stroke-dashoffset: 1.0000; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  13.56% { stroke-dashoffset: 0.7571; }
  18.06% { stroke-dashoffset: 0.7571; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  28.45% { stroke-dashoffset: 0.5183; }
  32.95% { stroke-dashoffset: 0.5183; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  47.73% { stroke-dashoffset: 0.1786; }
  52.23% { stroke-dashoffset: 0.1786; animation-timing-function: cubic-bezier(0.45, 0.05, 0.4, 1); }
  60.00% { stroke-dashoffset: 0.0000; }
  100.00% { stroke-dashoffset: 0.0000; }
}

@keyframes ger2-cursor-some {
  0% { opacity: 0; }
  3.00%, 100% { opacity: 1; }
}

@keyframes ger2-clique {
  0%, 60.3%, 62.1%, 100% { transform: scale(1); }
  61.1% { transform: scale(0.78); }
}

@keyframes ger2-aperta {
  0%, 60.5%, 62.3%, 100% { transform: none; filter: none; }
  61.3% { transform: scale(0.92); filter: brightness(0.88); }
}

@keyframes ga1 {
  0%, 62.5% { opacity: 0; transform: translate(-6px, 10px) scale(0.94); }
  64.1%, 100% { opacity: 1; transform: none; }
}

@keyframes ga2 {
  0%, 66.5% { opacity: 0; transform: translate(-6px, 10px) scale(0.94); }
  68.1%, 100% { opacity: 1; transform: none; }
}

@keyframes ga3 {
  0%, 70.5% { opacity: 0; transform: translate(-6px, 10px) scale(0.94); }
  72.1%, 100% { opacity: 1; transform: none; }
}

@keyframes ga4 {
  0%, 74.5% { opacity: 0; transform: translate(-6px, 10px) scale(0.94); }
  76.1%, 100% { opacity: 1; transform: none; }
}

@keyframes ger2-erro {
  0%, 74.5% { border-color: #dfe3e1; background: var(--papel); }
  76%, 100% { border-color: var(--falhou); background: var(--falhou-fundo); }
}

/* O "não" da interface: a janela sacode quando o erro chega. */
@keyframes ger2-treme {
  0%, 74.6%, 78.6%, 100% { transform: none; }
  75.4% { transform: translateX(-5px); }
  76.2% { transform: translateX(5px); }
  77% { transform: translateX(-3px); }
  77.8% { transform: translateX(2px); }
}

.g2d1 {
  animation: g2d1 10s both;
}

@keyframes g2d1 {
  0%, 13.96% { opacity: 0; transform: translateY(5px) scale(0.4); }
  15.16% { opacity: 1; transform: scale(1.12); }
  15.96%, 100% { opacity: 1; transform: none; }
}

.g2d2 {
  animation: g2d2 10s both;
}

@keyframes g2d2 {
  0%, 28.85% { opacity: 0; transform: translateY(5px) scale(0.4); }
  30.05% { opacity: 1; transform: scale(1.12); }
  30.85%, 100% { opacity: 1; transform: none; }
}

.g2d3 {
  animation: g2d3 10s both;
}

@keyframes g2d3 {
  0%, 48.13% { opacity: 0; transform: translateY(5px) scale(0.4); }
  49.33% { opacity: 1; transform: scale(1.12); }
  50.13%, 100% { opacity: 1; transform: none; }
}

/* ── 2. As cobranças do mês ─────────────────────────────────────────────── */

.cob-painel {
  position: relative;
  width: 290px;
  margin: 16px auto 0;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(18, 25, 24, 0.06), 0 18px 34px -22px rgba(18, 25, 24, 0.4);
}

.cob-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-fraca);
}

.cob-mes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pausado-fundo);
  color: var(--pausado);
  font-size: 10px;
  font-weight: 700;
}

.cob-mes .i {
  width: 11px;
  height: 11px;
  stroke-width: 2.4;
  animation: cob-gira 9s both;
}

@keyframes cob-gira {
  0%, 38% { transform: rotate(0); }
  46%, 100% { transform: rotate(-360deg); }
}

/* O total, que sobe a cada cobrança que chega. São quatro números no mesmo
   lugar, e o relógio acende um de cada vez: contar em CSS não existe. */
.cob-soma {
  position: relative;
  height: 30px;
  margin: 4px 0 8px;
}

.cob-soma b {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--voz);
  font-size: 25px;
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 30px;
  color: var(--pausado);
  opacity: 0;
}

.cob-soma .cob-s0 {
  color: var(--tinta-apagada);
  opacity: 1;
  animation: cob-s0 9s both;
}

.cob-s1 {
  animation: cob-s1 9s both;
}

.cob-s2 {
  animation: cob-s2 9s both;
}

.cob-s3 {
  transform-origin: 0 60%;
  animation: cob-s3 9s both;
}

@keyframes cob-s0 {
  0%, 7% { opacity: 1; }
  9%, 100% { opacity: 0; }
}

@keyframes cob-s1 {
  0%, 8% { opacity: 0; }
  10%, 21% { opacity: 1; }
  23%, 100% { opacity: 0; }
}

@keyframes cob-s2 {
  0%, 22% { opacity: 0; }
  24%, 35% { opacity: 1; }
  37%, 100% { opacity: 0; }
}

@keyframes cob-s3 {
  0%, 36% { opacity: 0; transform: none; }
  38% { opacity: 1; transform: scale(1.12); }
  42%, 100% { opacity: 1; transform: none; }
}

.cob-lista {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cob-lista li {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 10px 0 5px;
  border-radius: 9px;
  background: var(--chao);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--tinta);
  opacity: 0;
  transform: translateX(18px);
}

.cob-lista li b {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pausado);
}

.cob-av {
  display: grid;
  flex: none;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 7px;
  background: var(--papel);
  color: var(--tinta);
}

.cob-av .i {
  width: 13px;
  height: 13px;
}

.cob-1 {
  animation: cob-1 9s both;
}

.cob-2 {
  animation: cob-2 9s both;
}

.cob-3 {
  animation: cob-3 9s both;
}

/* Cada cobrança chega acesa em âmbar, como notificação nova, e assenta. */
@keyframes cob-1 {
  0%, 5% { opacity: 0; transform: translateX(18px); background: var(--pausado-fundo); }
  9% { opacity: 1; transform: none; background: var(--pausado-fundo); }
  16%, 100% { opacity: 1; transform: none; background: var(--chao); }
}

@keyframes cob-2 {
  0%, 19% { opacity: 0; transform: translateX(18px); background: var(--pausado-fundo); }
  23% { opacity: 1; transform: none; background: var(--pausado-fundo); }
  30%, 100% { opacity: 1; transform: none; background: var(--chao); }
}

@keyframes cob-3 {
  0%, 33% { opacity: 0; transform: translateX(18px); background: var(--pausado-fundo); }
  37% { opacity: 1; transform: none; background: var(--pausado-fundo); }
  44%, 100% { opacity: 1; transform: none; background: var(--chao); }
}

/* E no fim do mês, o relatório cheio de sigla, e a pergunta de sempre. */
.cob-relatorio {
  position: absolute;
  right: 22px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 172px;
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--papel);
  box-shadow: 0 0 0 1px rgba(18, 25, 24, 0.07), 0 18px 30px -16px rgba(18, 25, 24, 0.45);
  opacity: 0;
  transform: translateY(26px);
  animation: cob-relatorio 9s both;
}

.cob-relatorio > b {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tinta);
}

.cob-grafico {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
}

.cob-grafico i {
  flex: 1;
  border-radius: 2px;
  background: var(--linha);
}

.cob-grafico i:nth-child(1) { height: 45%; }
.cob-grafico i:nth-child(2) { height: 70%; }
.cob-grafico i:nth-child(3) { height: 35%; }
.cob-grafico i:nth-child(4) { height: 82%; }
.cob-grafico i:nth-child(5) { height: 55%; }
.cob-grafico i:nth-child(6) { height: 30%; }
.cob-grafico i:nth-child(7) { height: 62%; }

.cob-relatorio small {
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tinta-fraca);
}

.cob-duvida {
  position: absolute;
  left: -14px;
  top: -14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 14px 50%;
  animation: cob-duvida 9s both;
}

.cob-duvida i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--voz);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

@keyframes cob-relatorio {
  0%, 50% { opacity: 0; transform: translateY(26px); }
  56%, 100% { opacity: 1; transform: none; }
}

@keyframes cob-duvida {
  0%, 59% { opacity: 0; transform: scale(0.6); }
  63% { opacity: 1; transform: scale(1.08); }
  66%, 70% { opacity: 1; transform: none; }
  72% { opacity: 1; transform: rotate(-6deg); }
  74% { opacity: 1; transform: rotate(6deg); }
  76%, 100% { opacity: 1; transform: none; }
}

/* ── 3. A IA que escreve e para ─────────────────────────────────────────── */

.v-ia {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}

.v-ia-pedido {
  align-self: flex-end;
  padding: 8px 13px;
  border-radius: 14px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 13px;
  opacity: 0;
  transform-origin: 100% 100%;
  animation: ia-pedido 8s both;
}

.v-ia-resposta {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 62%;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--papel);
  opacity: 0;
  animation: ia-resposta 8s both;
}

.v-ia-resposta i {
  height: 6px;
  border-radius: 3px;
  background: var(--linha);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.v-ia-resposta i:nth-child(1) {
  animation: ia-l1 8s both;
}

.v-ia-resposta i:nth-child(2) {
  width: 84%;
  animation: ia-l2 8s both;
}

.v-ia-resposta i:nth-child(3) {
  width: 58%;
  animation: ia-l3 8s both;
}

.v-ia-lista {
  display: grid;
  gap: 3px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.v-ia-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-fraca);
  opacity: 0;
  transform: translateY(6px);
}

.v-ia-lista li:nth-child(1) {
  animation: ia-i1 8s both;
}

.v-ia-lista li:nth-child(2) {
  animation: ia-i2 8s both;
}

.v-ia-lista li:nth-child(3) {
  animation: ia-i3 8s both;
}

.v-ia-lista li:nth-child(4) {
  animation: ia-i4 8s both;
}

.v-ia-lista li:nth-child(5) {
  animation: ia-i5 8s both;
}

.v-ia-lista .i {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
  color: var(--falhou);
}

.v-ia-lista li.feito {
  font-weight: 600;
  color: var(--tinta);
}

.v-ia-lista li.feito .i {
  color: var(--marca-escrita);
}

@keyframes ia-pedido {
  0% { opacity: 0; transform: scale(0.85); }
  5%, 100% { opacity: 1; transform: none; }
}

@keyframes ia-resposta {
  0%, 7% { opacity: 0; transform: translateY(6px); }
  10%, 100% { opacity: 1; transform: none; }
}

@keyframes ia-l1 {
  0%, 11% { transform: scaleX(0); }
  17%, 100% { transform: scaleX(1); }
}

@keyframes ia-l2 {
  0%, 16% { transform: scaleX(0); }
  22%, 100% { transform: scaleX(1); }
}

@keyframes ia-l3 {
  0%, 21% { transform: scaleX(0); }
  27%, 100% { transform: scaleX(1); }
}

@keyframes ia-i1 {
  0%, 30% { opacity: 0; transform: translateY(6px); }
  33%, 100% { opacity: 1; transform: none; }
}

@keyframes ia-i2 {
  0%, 38% { opacity: 0; transform: translateY(6px); }
  41%, 100% { opacity: 1; transform: none; }
}

@keyframes ia-i3 {
  0%, 44% { opacity: 0; transform: translateY(6px); }
  47%, 100% { opacity: 1; transform: none; }
}

@keyframes ia-i4 {
  0%, 50% { opacity: 0; transform: translateY(6px); }
  53%, 100% { opacity: 1; transform: none; }
}

@keyframes ia-i5 {
  0%, 56% { opacity: 0; transform: translateY(6px); }
  59%, 100% { opacity: 1; transform: none; }
}

/* Com menos movimento, cada cena fica parada num quadro que conta a história
   inteira: a dúvida no meio do caminho, a cobrança somada, a lista de falta. */
@media (prefers-reduced-motion: reduce) {
  .v-ger *,
  .v-ger *::before,
  .v-cob *,
  .v-ia * {
    animation: none !important;
  }

  .v-ger .ger2-rabisco path {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .v-ger .ger2-cursor {
    offset-distance: 100%;
    opacity: 1;
  }

  .v-ger .ger2-duvida,
  .v-ger .ger2-alerta {
    opacity: 1;
    transform: none;
  }

  .v-ger .ger2-linha em.erro {
    border-color: var(--falhou);
    background: var(--falhou-fundo);
  }

  .v-cob .cob-lista li,
  .v-cob .cob-relatorio,
  .v-cob .cob-duvida,
  .v-ia .v-ia-pedido,
  .v-ia .v-ia-resposta,
  .v-ia .v-ia-lista li,
  .v-ia .v-ia-resposta i {
    opacity: 1;
    transform: none;
  }

  .v-cob .cob-soma .cob-s0 {
    opacity: 0;
  }

  .v-cob .cob-s3 {
    opacity: 1;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   A VIRADA: o fecho das saídas e o da demonstração
   Um cartão, logo depois do que ele fecha. Nas saídas, escuro: é a quarta
   saída, com o texto à esquerda e, à direita, a lista do cartão da IA com
   tudo feito, que é o "trabalho inteiro". Na demonstração, claro, com o
   ícone do aplicativo como ele fica na tela do celular (o porquê está em
   `.virada-app`). Sem marca-texto: a linha verde embaixo da resposta saiu a
   pedido do Lucas.

   Antes era texto solto e grande no meio da seção, e caía logo acima do
   título da seção seguinte: dois títulos, um em cima do outro (Lucas,
   26/09/2026). Dentro do cartão, a resposta tem tamanho de cartão, e não de
   título.

   Quem acende é o `pagina.js`, com a classe `acesa`, uma vez só: os tiques da
   lista, um de cada vez, e o ícone. Nada se desfaz quando a rolagem volta.
   ════════════════════════════════════════════════════════════════════════════ */
.virada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px 64px;
  margin-top: 18px;
  padding: clamp(30px, 3.6vw, 52px) clamp(30px, 4.2vw, 60px);
  border-radius: 28px;
  background: var(--tinta);
  color: var(--papel);
}

.virada-texto {
  max-width: 34em;
}

.virada-pergunta {
  margin: 0;
  font-family: var(--voz);
  font-size: clamp(18px, 1.55vw, 21px);
  font-weight: 450;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.01em;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.62);
  text-wrap: pretty;
}

.virada-resposta {
  margin: 14px 0 0;
  font-family: var(--voz);
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-wrap: balance;
}

/* Sozinha no cartão (o fecho da demonstração), a frase não tem pergunta em
   cima. */
.virada-resposta:first-child {
  margin-top: 0;
}

/* A lista do cartão da IA, com tudo feito. */
.virada-lista {
  display: grid;
  gap: 12px;
  min-width: 300px;
  margin: 0;
  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  list-style: none;
}

/* O tique fica na altura da primeira linha: no celular, a última tarefa
   quebra em duas. */
.virada-lista li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.virada-lista li > span:last-child {
  padding-top: 3px;
}

.virada-marca {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--marca);
  color: var(--tinta);
}

.virada-marca .i {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}

/* Antes de acender, cada linha é uma tarefa por fazer: o círculo vazio e o
   texto apagado. Acesa, cada uma ganha o tique, uma depois da outra. */
.js .virada-lista li {
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.4s ease var(--atraso, 0s);
}

.js .virada-marca {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.26);
  transition:
    background-color 0.3s ease var(--atraso, 0s),
    box-shadow 0.3s ease var(--atraso, 0s);
}

.js .virada-marca .i {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.25s ease var(--atraso, 0s),
    transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) var(--atraso, 0s);
}

.js .virada.acesa .virada-lista li {
  color: var(--papel);
}

.js .virada.acesa .virada-marca {
  background: var(--marca);
  box-shadow: inset 0 0 0 1.5px var(--marca);
}

.js .virada.acesa .virada-marca .i {
  opacity: 1;
  transform: none;
}

.virada-lista li:nth-child(1) {
  --atraso: 0.35s;
}

.virada-lista li:nth-child(2) {
  --atraso: 0.6s;
}

.virada-lista li:nth-child(3) {
  --atraso: 0.85s;
}

.virada-lista li:nth-child(4) {
  --atraso: 1.1s;
}

.virada-lista li:nth-child(5) {
  --atraso: 1.35s;
}

/* O ícone do aplicativo, com o nome embaixo, como na tela do celular. */
.virada-icone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(0px, 3vw, 40px);
}

.virada-icone img {
  display: block;
  width: clamp(96px, 9vw, 132px);
  height: auto;
  border-radius: 22.5%;
  box-shadow: 0 26px 50px -22px rgba(80, 230, 178, 0.55);
}

.virada-icone span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

/* O fecho da demonstração é claro, no cinza dos cartões da página: logo
   embaixo vem a seção escura da experiência, com o brilho verde, e dois
   blocos escuros seguidos brigavam (Lucas, 26/09/2026). */
.virada-app {
  background: var(--chao);
  color: var(--tinta);
}

.virada-app .virada-icone img {
  box-shadow: 0 22px 44px -22px rgba(12, 112, 84, 0.5);
}

.virada-app .virada-icone span {
  color: var(--tinta-fraca);
}

.js .virada-icone img {
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity 0.5s ease 0.25s,
    transform 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) 0.25s;
}

.js .virada.acesa .virada-icone img {
  opacity: 1;
  transform: none;
}

/* Na demonstração ele vem depois da conversa, e não de cartões. */
.demo .virada {
  margin-top: var(--bloco);
}

/* ════════════════════════════════════════════════════════════════════════════
   3. DEMONSTRAÇÃO
   A trilha é alta e o palco gruda no topo: rolar a trilha é avançar a
   conversa. A altura é o tempo de leitura de cada passo, medido rolando.
   ════════════════════════════════════════════════════════════════════════════ */

.demo {
  padding: var(--secao) 0;
}

.demo-trilho {
  position: relative;
  height: 780vh;
  margin-top: var(--bloco);
}

.demo-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.demo-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  height: 100%;
  padding-top: 60px;
}

/* A lista dos sete passos é um painel: é cartão, então o texto fica à
   esquerda, como em todo cartão da página. */
.demo-lado {
  position: relative;
  padding: 26px 26px 16px;
  border-radius: 28px;
  background: var(--chao);
}

.demo-contador {
  margin: 0 0 16px 56px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--marca-escrita);
}

.demo-passos {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 20px;
  padding: 9px 0;
  opacity: 0.36;
  transition: opacity 0.4s ease;
}

.passo.feito {
  opacity: 0.55;
}

.passo.ativo {
  opacity: 1;
}

/* O trilho entre os números: cinza, e verde profundo no que já foi. O passo
   de agora enche o dele aos poucos, pelo `--pp` que o script escreve. */
.passo:not(:last-child)::before,
.passo:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 47px;
  bottom: -9px;
  width: 2px;
  border-radius: 2px;
  background: var(--linha);
}

.passo:not(:last-child)::after {
  background: var(--marca-escrita);
  transform: scaleY(var(--pp, 0));
  transform-origin: 50% 0;
}

.passo-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--linha);
  border-radius: 50%;
  background: var(--papel);
  font-family: var(--voz);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, box-shadow 0.35s;
}

.passo-n em {
  font-style: normal;
}

.passo-n .i {
  display: none;
  width: 17px;
  height: 17px;
  stroke-width: 2.6;
}

.passo.feito .passo-n {
  border-color: var(--menta);
  background: var(--menta);
  color: var(--marca-escrita);
}

.passo.feito .passo-n em {
  display: none;
}

.passo.feito .passo-n .i {
  display: block;
}

.passo.ativo .passo-n {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--papel);
  box-shadow: 0 0 0 6px rgba(80, 230, 178, 0.3);
}

.passo h3 {
  margin: 6px 0 0;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.passo-corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--curva);
}

.passo-corpo > p {
  margin: 0;
  overflow: hidden;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--tinta-fraca);
}

.passo.ativo .passo-corpo {
  grid-template-rows: 1fr;
}

.passo.ativo .passo-corpo > p {
  padding-top: 10px;
}

.demo-linha {
  display: none;
}

.demo-barra {
  display: none;
}

.demo-cena {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(80vh, 780px);
  height: min(80svh, 780px);
}

/* O mesmo brilho verde que fica atrás do vídeo do cabeçalho: o aparelho
   deixa de flutuar no branco. */
.demo-cena::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 78%;
  background: radial-gradient(closest-side, rgba(80, 230, 178, 0.26), rgba(80, 230, 178, 0));
  filter: blur(18px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.demo-iphone {
  position: relative;
  z-index: 1;
  flex: none;
  height: 100%;
  width: auto;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Centralizada na cena, no lugar do celular que apaga. */
.demo-janela {
  --jx: -50%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(560px, 92%);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--jx, 0), -50%) translateY(var(--jy, 30px)) scale(var(--js, 0.94));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.janela-conteudo {
  padding: 20px;
  background: var(--chao);
}

.demo-janela .web-ola {
  font-size: 24px;
}

.demo-janela .web-data {
  font-size: 13.5px;
}

.demo-janela .web-periodo {
  height: 36px;
  font-size: 13px;
}

.demo-janela .vg-cabeca-solta {
  margin-bottom: 16px;
}

.demo-janela .vg-frase {
  font-size: 25px;
}

.demo-janela .vg-numeros {
  gap: 8px;
}

.demo-janela .vg-n {
  padding: 13px 12px 12px;
}

.demo-janela .vg-n b {
  font-size: 22px;
}

.demo-janela .vg-n span,
.demo-janela .vg-n small {
  font-size: 11.5px;
}

.sugestao {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding: 15px 16px;
  border: 1.5px solid var(--marca);
  border-radius: 16px;
  background: var(--papel);
  box-shadow: 0 16px 34px -20px rgba(12, 112, 84, 0.5);
  opacity: 0;
  transform: translateY(16px);
}

.sugestao-avatar {
  flex: none;
  width: 40px;
  padding-top: 2px;
}

.sugestao-miolo {
  flex: 1;
}

.sugestao-rotulo {
  margin: 0 0 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--marca-escrita);
}

.sugestao-fala {
  margin: 0 0 12px;
  font-family: var(--voz);
  font-size: 17px;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  line-height: 1.35;
}

.sugestao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sugestao-sim,
.sugestao-nao {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
}

.sugestao-sim {
  background: var(--tinta);
  color: var(--papel);
}

.sugestao-nao {
  border: 1px solid var(--linha);
}

.demo-dica {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.3s;
}

.demo-dica {
  background: var(--tinta);
  color: var(--papel);
  pointer-events: none;
  animation: dica 1.8s ease-in-out infinite;
}

.demo-dica .i {
  width: 15px;
  height: 15px;
  stroke-width: 2.2;
}

@keyframes dica {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 5px;
  }
}

.confete {
  position: absolute;
  z-index: 10;
  width: 0;
  height: 0;
  pointer-events: none;
}

.confete i {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: confete var(--t, 1.4s) cubic-bezier(0.16, 0.7, 0.3, 1) forwards;
}

.confete i.redondo {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

@keyframes confete {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  8% {
    opacity: 1;
  }
  45% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(calc(var(--r) * 0.5)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--dx) * 1.2), calc(var(--dy) + 260px)) rotate(var(--r)) scale(1);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   5. A EXPERIÊNCIA POR TRÁS
   ════════════════════════════════════════════════════════════════════════════ */

.numeros-intro {
  margin: var(--bloco) 0 18px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

/* Os números: quatro cartões, cada um com a sua imagem (o gráfico do
   faturamento, as conversas chegando no WhatsApp, as barras das visitas, os
   seguidores novos). Nascem juntos, quando aparecem, e cada um faz a sua
   imagem com a conta andando junto, em um segundo e meio. Pelo tempo, e não
   pela rolagem (pedido do Lucas, 26/09/2026: primeiro presa à rolagem, depois
   um de cada vez, e por fim os quatro juntos e rápido). Roda uma vez, e fica.
   Sem JavaScript, ou com "menos movimento", os quatro já aparecem prontos. */
.numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.numeros > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 22px 22px;
  border-radius: 24px;
  background: #151d1c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* O cartão nasce: antes, fica apagado no lugar dele, sem mexer na grade. */
.js .numeros > li {
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.4s var(--curva), transform 0.5s var(--curva);
}

.js .numeros > li.nasceu {
  opacity: 1;
  transform: none;
}

/* Com os quatro lado a lado, o texto de cada um tem a mesma altura, para as
   imagens começarem na mesma linha: "800 mil visitantes" quebra em duas, "R$
   12 milhões" não. */
.n-texto {
  display: flex;
  flex-direction: column;
  min-height: 136px;
}

.n-mais {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.66);
}

.n-grande {
  display: block;
  margin-top: 8px;
  font-family: var(--voz);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--marca);
}

/* A conta sem sacudir a tela. O número final fica no lugar, invisível, e é
   ele que dá o tamanho do cartão; a conta corre por cima dele. Sem isso, o
   número mudava de largura a cada quadro ("R$ 9,9 milhões" é mais largo que
   "R$ 12 milhões", "640 visitantes" cabe numa linha e "12 mil visitantes"
   não), o cartão crescia e encolhia, e a página inteira embaixo tremia. E os
   algarismos da Fraunces não têm largura igual: durante a conta, cada um vai
   numa caixa da largura do mais largo (`--algarismo`, medido pelo
   `pagina.js`), para as palavras depois do número não andarem para os lados. */
.n-grande {
  position: relative;
}

.n-conta {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: none;
}

.contando .n-final {
  visibility: hidden;
}

.contando .n-conta {
  display: block;
}

.n-conta i {
  display: inline-block;
  width: var(--algarismo, 0.62em);
  font-style: normal;
  text-align: center;
}

.n-diz {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.84);
}

/* A imagem de cada cartão, embaixo do número. */
.exp-visual {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 160px;
  padding: 12px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.exp-visual-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.exp-visual-topo b {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.exp-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.exp-online i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--marca);
}

/* 1. O faturamento: a curva sobe, e o ponto vai na frente. O desenho cabe na
   altura que sobrar, sem distorcer. */
.exp-grafico {
  position: relative;
  flex: 1;
  min-height: 90px;
}

.exp-grafico svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.exp-grafico-grade {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}

.exp-grafico-linha {
  fill: none;
  stroke: var(--marca);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exp-grafico-ponto {
  fill: var(--marca);
}

.exp-grafico-halo {
  fill: rgba(80, 230, 178, 0.2);
}

/* 2 e 4. As conversas e os seguidores: cada um chega por cima e empurra os de
   antes para baixo. Sem JavaScript, ficam só um embaixo do outro. */
.exp-pilha {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.exp-pilha li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.js .exp-pilha li {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.exp-av {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--cor, #3a4a47);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}

.exp-pilha div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.exp-pilha b {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #fff;
}

.exp-pilha small {
  overflow: hidden;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.6);
}

.exp-pilha em {
  flex: none;
  font-size: 10.5px;
  font-style: normal;
  color: var(--marca);
}

.exp-seguir {
  flex: none;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--marca);
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
}

/* 3. As visitas: as barras crescem, uma depois da outra. */
.exp-barras {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: 5px;
  min-height: 90px;
}

.exp-barras i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--marca), rgba(80, 230, 178, 0.3));
  transform: scaleY(var(--g, 1));
  transform-origin: 50% 100%;
}

/* Os seguidores novos subindo, um de cada vez: o bonequinho com o "+", no
   verde da página (pedido do Lucas, 26/09/2026; antes eram "+1"). Repete
   sem parar de propósito, como a fileira dos ramos: é o "todo dia". */
/* Fora do fluxo do cartão: como item da coluna, ele somava um vão e a imagem
   do quarto cartão ficava mais baixa que a dos outros. */
.n-sobem {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.n-sobem i {
  position: absolute;
  top: 66px;
  right: 22px;
  line-height: 0;
  color: var(--marca);
  opacity: 0;
  animation: mais-um 3.6s ease-out infinite;
}

.n-sobem i:nth-child(2) {
  right: 56px;
  animation-delay: 1.2s;
}

.n-sobem i:nth-child(3) {
  right: 40px;
  animation-delay: 2.4s;
}

.n-sobem .i {
  width: 20px;
  height: 20px;
}

.js .numeros > li:not(.nasceu) .n-sobem i {
  animation: none;
}

@keyframes mais-um {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8);
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-58px) scale(1.05);
  }
}

.aviso {
  max-width: 46em;
  margin: 34px auto 0;
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
  color: rgba(255, 255, 255, 0.66);
}

/* ════════════════════════════════════════════════════════════════════════════
   6. CHAMADA PARA AÇÃO
   ════════════════════════════════════════════════════════════════════════════ */

.cta-dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-dentro h2 {
  max-width: 14em;
}

.cta-dentro .lead {
  max-width: 36em;
  margin-bottom: 34px;
}

.cta-mascote {
  width: 104px;
  margin-bottom: 22px;
}

/* ════════════════════════════════════════════════════════════════════════════
   7. ALÉM DO ANÚNCIO
   No jeito da página do ManyChat, que o Lucas mostrou (26/09/2026): um
   recurso por vez, o texto de um lado e, do outro, os "vídeos" dele tocando
   sozinhos, cada um com a legenda e o fio embaixo. A versão de antes, com
   tudo junto em três cartões, "ficou pouco confusa".

   Sem JavaScript, com "menos movimento" ou numa tela estreita, os cinco vêm
   um embaixo do outro, e o botão fica grudado no pé da tela até a seção
   acabar. No computador (com a classe `rec-anima`, do `pagina.js`), o palco
   gruda no topo, a rolagem troca o recurso, e os tracinhos em cima contam em
   qual você está. Os vídeos tocam pelo tempo, uma vez, e param no último
   quadro; recomeçam quando o recurso volta.
   ════════════════════════════════════════════════════════════════════════════ */

.rec {
  margin-top: var(--bloco);
}

.rec-caixa {
  position: relative;
}

.rec-tracos {
  display: none;
}

.rec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  max-width: 560px;
  margin: 0 auto 72px;
  text-align: center;
}

.rec-quem {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--marca-escrita);
}

.rec-texto h3 {
  margin: 0;
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.rec-diz {
  max-width: 28em;
  margin: 16px auto 0;
  font-size: clamp(16.5px, 1.3vw, 18.5px);
  line-height: 1.55;
  color: var(--tinta-fraca);
  text-wrap: pretty;
}

/* O cartão do vídeo, e embaixo dele a legenda, com o fio que anda. */
.rec-midia {
  display: flex;
  flex-direction: column;
  width: min(330px, 100%);
  margin: 0;
}

.rec-tela {
  position: relative;
  aspect-ratio: 10 / 16;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background: var(--tinta);
  isolation: isolate;
}

.rec-legenda {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  background: var(--tinta);
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  color: #fff;
  box-shadow: 0 30px 60px -30px rgba(18, 25, 24, 0.45);
}

.rec-legenda-fio {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--marca);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.rec-legenda-fio.correndo {
  animation: rec-fio var(--dur, 4s) linear forwards;
}

.rec-legenda-fio.cheio {
  transform: scaleX(1);
}

@keyframes rec-fio {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Cada recurso tem um vídeo só: uma cena desenhada numa tela de 390 x 624 (a
   proporção do cartão), escalada para o tamanho do cartão (`--s`, do
   `pagina.js`). O quadro parado de cada cena, sem `tocando`, é o final, pronto;
   `tocando` roda a animação do começo, uma vez. */
.rec-cena {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 624px;
  overflow: hidden;
  transform: scale(var(--s, 0.846));
  transform-origin: 0 0;
  text-align: left;
}

@keyframes rec-entra {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rec-cursor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ── 1. Imagens: o mural das fotos geradas ─────────────────────────────────
   Cada foto começa como um lugar vazio, brilhando, e se revela; as duas
   colunas sobem devagar, uma mais que a outra. */
.cena-mural {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px;
  background: #121918;
}

.mural-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mural-a {
  transform: translateY(-150px);
}

.mural-b {
  transform: translateY(-300px);
}

.mt {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 14px;
  background: #1c2624;
}

.mt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt i {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #1b2523 30%, #2c3b37 50%, #1b2523 70%) 0 0 / 250% 100%;
  opacity: 0;
}

.mural-a .mt:nth-child(1) { --atraso: 0.3s; }
.mural-b .mt:nth-child(1) { --atraso: 0.6s; }
.mural-a .mt:nth-child(2) { --atraso: 0.9s; }
.mural-b .mt:nth-child(2) { --atraso: 1.2s; }
.mural-a .mt:nth-child(3) { --atraso: 1.5s; }
.mural-b .mt:nth-child(3) { --atraso: 1.8s; }
.mural-a .mt:nth-child(4) { --atraso: 2.1s; }
.mural-b .mt:nth-child(4) { --atraso: 2.4s; }

.cena-mural.tocando .mural-a {
  animation: mural-a var(--dur, 6s) cubic-bezier(0.35, 0, 0.25, 1) both;
}

.cena-mural.tocando .mural-b {
  animation: mural-b var(--dur, 6s) cubic-bezier(0.35, 0, 0.25, 1) both;
}

@keyframes mural-a {
  from {
    transform: translateY(24px);
  }
  to {
    transform: translateY(-150px);
  }
}

@keyframes mural-b {
  from {
    transform: translateY(-70px);
  }
  to {
    transform: translateY(-300px);
  }
}

.cena-mural.tocando .mt i {
  animation:
    mural-vazio 0.9s ease var(--atraso) both,
    mural-brilho 1.1s linear 3;
}

.cena-mural.tocando .mt img {
  animation: mural-foco 1s var(--curva) var(--atraso) both;
}

@keyframes mural-vazio {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mural-brilho {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -150% 0;
  }
}

@keyframes mural-foco {
  from {
    opacity: 0.2;
    transform: scale(1.12);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mural-chip {
  position: absolute;
  bottom: 22px;
  left: 50%;
  display: grid;
  margin: 0;
  transform: translateX(-50%);
}

.mural-chip > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(18, 25, 24, 0.92);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
}

.mural-chip .i {
  width: 16px;
  height: 16px;
  color: var(--marca);
}

.mc-gerando {
  opacity: 0;
}

.cena-mural.tocando .mc-gerando {
  animation: mc-gerando 3.4s linear both;
}

.cena-mural.tocando .mc-pronto {
  animation: rec-entra 0.5s var(--curva) 3.3s both;
}

@keyframes mc-gerando {
  0%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ── 2. Site: o do Studio Pele, escrevendo-se sozinho ──────────────────────
   O cabeçalho no jeito do "Museum" (título grande em serifa, a foto num
   arco e um cartão solto por cima), em tons de verde: o fundo sálvia claro,
   o verde fechado no texto e um verde médio no destaque e no botão (pedido
   do Lucas em 27/09/2026; antes era o caramelo da página da Haven & Hound).
   As duas são referências dele. Começa em blocos cinza, e cada parte entra no
   lugar do seu, rápido: em menos de dois segundos, está pronto. O cartão
   da avaliação é branco e fica fora do rosto e do pote. */
.cena-site {
  background:
    radial-gradient(circle at 50% 92%, #d6eadd 0, rgba(214, 234, 221, 0) 60%),
    #f2f7f3;
  color: #1e3a2b;
}

.cena-site > * {
  position: absolute;
  margin: 0;
}

.cs-esqueleto {
  inset: 0;
}

.cs-esqueleto i {
  position: absolute;
  border-radius: 10px;
  background: rgba(30, 58, 43, 0.07);
  opacity: 0;
}

.ce-5 { top: 22px; left: 22px; width: 130px; height: 26px; --ate: 0.1s; }
.ce-1 { top: 108px; left: 22px; width: 300px; height: 136px; --ate: 0.26s; }
.ce-2 { top: 260px; left: 22px; width: 280px; height: 38px; --ate: 0.62s; }
.ce-3 { top: 314px; left: 22px; width: 250px; height: 42px; --ate: 0.72s; }
.ce-4 { top: 374px; left: 64px; width: 262px; height: 260px; border-radius: 131px 131px 0 0; --ate: 0.8s; }

.cena-site.tocando .cs-esqueleto i {
  animation: cs-some 0.25s ease var(--ate) both;
}

@keyframes cs-some {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.cs-barra {
  top: 20px;
  right: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-barra b {
  font-family: var(--voz);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cs-barra b span {
  color: #3b8f66;
}

.cs-barra i {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(30, 58, 43, 0.22);
  border-radius: 50%;
  background:
    linear-gradient(#1e3a2b, #1e3a2b) 50% 42% / 13px 1.5px no-repeat,
    linear-gradient(#1e3a2b, #1e3a2b) 50% 58% / 13px 1.5px no-repeat;
}

.cs-pill {
  top: 76px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3b8f66;
}

.cs-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5c9a6e;
  box-shadow: 0 0 0 3px rgba(92, 154, 110, 0.18);
}

.cs-titulo {
  top: 104px;
  left: 22px;
  width: 346px;
  font-family: var(--voz);
  font-size: 47px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.cs-titulo span {
  display: block;
}

.cs-titulo em {
  font-style: italic;
  color: #3b8f66;
}

.cs-texto {
  top: 260px;
  left: 22px;
  width: 290px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5e6e64;
}

.cs-botoes {
  top: 314px;
  left: 22px;
  display: flex;
  gap: 8px;
}

.cs-b1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: 999px;
  background: #2f7a56;
  box-shadow: 0 10px 22px -12px rgba(47, 122, 86, 0.9);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.cs-b1 .i {
  width: 14px;
  height: 14px;
}

.cs-b2 {
  padding: 10px 16px;
  border: 1px solid rgba(30, 58, 43, 0.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* A foto sobe um pouco no arco: o rosto e o pote ficam no alto, e o
   ingresso cobre só a mão e o braço. */
.cs-arco {
  top: 374px;
  left: 64px;
  width: 262px;
  height: 300px;
  overflow: hidden;
  border-radius: 131px 131px 0 0;
  background: #d9e8de;
}

.cs-arco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

.cs-ticket {
  top: 522px;
  left: 14px;
  width: 150px;
  padding: 11px 12px 13px;
  border-radius: 10px 10px 4px 4px;
  background: #fff;
  box-shadow: 0 18px 34px -14px rgba(30, 58, 43, 0.4), 0 2px 6px rgba(30, 58, 43, 0.06);
  transform: rotate(-5deg);
}

.cs-ticket::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 8px;
  background: radial-gradient(circle at 5px 8px, transparent 4px, #fff 4.5px) 0 0 / 10px 8px repeat-x;
}

.cs-ticket small {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3b8f66;
}

.cs-ticket b {
  display: block;
  margin-top: 4px;
  font-family: var(--voz);
  font-size: 17px;
  font-weight: 500;
}

.cs-ticket span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: #5e6e64;
}

.cena-site.tocando .cs-barra {
  animation: rec-entra 0.35s var(--curva) 0.1s both;
}

.cena-site.tocando .cs-pill {
  animation: rec-entra 0.35s var(--curva) 0.18s both;
}

.cena-site.tocando .cs-titulo span {
  animation: cs-linha 0.45s var(--curva) both;
}

.cena-site.tocando .cs-titulo span:nth-child(1) {
  animation-delay: 0.26s;
}

.cena-site.tocando .cs-titulo span:nth-child(2) {
  animation-delay: 0.36s;
}

.cena-site.tocando .cs-titulo span:nth-child(3) {
  animation-delay: 0.46s;
}

@keyframes cs-linha {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cena-site.tocando .cs-texto {
  animation: rec-entra 0.35s var(--curva) 0.62s both;
}

.cena-site.tocando .cs-botoes {
  animation: rec-entra 0.35s var(--curva) 0.72s both;
}

.cena-site.tocando .cs-arco {
  animation: cs-arco 0.6s var(--curva) 0.8s both;
}

.cena-site.tocando .cs-arco img {
  animation: cs-zoom 1.1s var(--curva) 0.8s both;
}

@keyframes cs-arco {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes cs-zoom {
  from {
    transform: scale(1.15);
  }
  to {
    transform: none;
  }
}

.cena-site.tocando .cs-ticket {
  animation: cs-ticket 0.45s var(--curva) 1.15s both;
}

@keyframes cs-ticket {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: rotate(-5deg);
  }
}

/* ── 3. Página de links: o Studio Pele nos três estilos ─────────────────────
   Os três dos modelos que o Lucas mandou (Pop, Órbita e Oliva, com as cores
   de lá), um abrindo por cima do outro, num círculo que nasce do seletor
   embaixo. Termina no Oliva. O seletor também troca no clique. */
.cena-bio {
  background: #f8ede6;
}

.bio {
  position: absolute;
  inset: 0;
  padding: 20px 22px;
}

.bio > * {
  margin: 0;
}

.bio-pop {
  z-index: 1;
}

.bio-orbita {
  z-index: 2;
}

.bio-oliva {
  z-index: 3;
}

.b-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.b-topo > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.b-topo .i {
  width: 15px;
  height: 15px;
}

.b-av {
  display: block;
  overflow: hidden;
}

.b-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.b-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 14px;
}

.b-link > .i:first-child {
  width: 18px;
  height: 18px;
  flex: none;
}

.b-link b {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 13.5px;
  font-weight: 600;
}

.b-link small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.72;
}

.b-link > .i:last-child {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Pop */
.bio-pop {
  display: flex;
  flex-direction: column;
  background: #f8ede6;
  color: #292425;
}

.bio-pop .b-topo > i {
  border: 2px solid #292425;
  background: #fff;
  box-shadow: 2px 2px 0 #292425;
}

.bio-pop .b-selo {
  position: absolute;
  top: 74px;
  right: 24px;
  padding: 8px 12px;
  border: 2px solid #292425;
  background: #f2e897;
  box-shadow: 3px 3px 0 #292425;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(8deg);
}

.bio-pop .b-av {
  width: 64px;
  height: 64px;
  margin-top: 16px;
  border: 2px solid #292425;
  border-radius: 50%;
  box-shadow: 3px 3px 0 #292425;
}

.bio-pop .b-oi {
  margin-top: 14px;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.bio-pop .b-diz {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #5a5052;
}

.bio-pop .b-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 3px;
  align-items: center;
  margin-top: 16px;
  padding: 13px 16px;
  border: 2px solid #292425;
  border-radius: 14px;
  background: #ff875f;
  box-shadow: 4px 4px 0 #292425;
}

.bio-pop .b-cta small {
  grid-column: 1;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bio-pop .b-cta b {
  grid-column: 1;
  font-size: 19px;
  font-weight: 800;
}

.bio-pop .b-cta > .i {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 50%;
  background: #292425;
  color: #fff;
}

.bio-pop .b-links {
  gap: 10px;
  margin-top: 14px;
}

.bio-pop .b-link {
  border: 2px solid #292425;
  box-shadow: 3px 3px 0 #292425;
}

.bio-pop .b-l1 {
  background: #d8c5f4;
}

.bio-pop .b-l2 {
  background: #f2e897;
}

.bio-pop .b-l3 {
  background: #fff;
}

/* Órbita */
.bio-orbita {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #111315;
  color: #f3f4f5;
}

.bio-orbita .b-topo {
  color: #a0a4a5;
}

.bio-orbita .b-topo span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.bio-orbita .b-topo span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d0f98b;
}

.bio-orbita .b-topo > i {
  border: 1px solid rgba(243, 244, 245, 0.2);
}

.bio-orbita .b-perfil {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bio-orbita .b-av {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.bio-orbita .b-perfil b {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 700;
}

.bio-orbita .b-perfil small {
  font-size: 11.5px;
  font-weight: 400;
  color: #a0a4a5;
}

.bio-orbita .b-grande {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.bio-orbita .b-grande em {
  font-style: normal;
  color: #d0f98b;
}

.bio-orbita .b-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-radius: 14px;
  background: #d0f98b;
  font-size: 14px;
  font-weight: 700;
  color: #111315;
}

.bio-orbita .b-cta b {
  flex: 1;
}

.bio-orbita .b-cta .i {
  width: 17px;
  height: 17px;
}

.bio-orbita .b-duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bio-orbita .b-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 150px;
  padding: 12px;
  overflow: hidden;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
}

.bio-orbita .b-tile-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bio-orbita .b-tile-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72));
}

.bio-orbita .b-tile-foto b {
  position: relative;
  z-index: 1;
}

.bio-orbita .b-tile-cor {
  background: #2b2745;
}

.bio-orbita .b-tile-cor small {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 3px 7px;
  border: 1px solid rgba(208, 249, 139, 0.35);
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d0f98b;
}

.bio-orbita .b-link {
  border: 1px solid rgba(243, 244, 245, 0.08);
  background: #1a1d20;
}

.bio-orbita .b-link > .i:first-child {
  color: #d0f98b;
}

/* Oliva */
.bio-oliva {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f2e9;
  text-align: center;
  color: #303d2d;
}

.bio-oliva .b-topo {
  width: 100%;
  color: #6c7162;
}

.bio-oliva .b-topo > i {
  border: 1px solid rgba(48, 61, 45, 0.18);
}

.bio-oliva .b-av {
  width: 76px;
  height: 76px;
  margin-top: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #e3e3d3;
}

.bio-oliva .b-nome {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--voz);
  font-size: 26px;
}

.bio-oliva .b-nome i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #455239;
  color: #fff;
}

.bio-oliva .b-nome .i {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.bio-oliva .b-sub {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6c7162;
}

.bio-oliva .b-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: #455239;
  text-align: left;
  color: #f5f2e9;
}

.bio-oliva .b-cta small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}

.bio-oliva .b-cta b {
  font-family: var(--voz);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.1;
}

.bio-oliva .b-cta em {
  font-style: italic;
}

.bio-oliva .b-cta > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 242, 233, 0.2);
  font-size: 12.5px;
  font-weight: 600;
}

.bio-oliva .b-cta > span i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f5f2e9;
  color: #455239;
}

.bio-oliva .b-cta > span .i {
  width: 13px;
  height: 13px;
}

.bio-oliva .b-links {
  width: 100%;
  margin-top: 10px;
  text-align: left;
}

.bio-oliva .b-link {
  border: 1px solid rgba(48, 61, 45, 0.1);
  background: #fbfaf5;
}

.bio-oliva .b-link > .i:first-child {
  color: #455239;
}

/* O seletor de estilo, embaixo. */
.b-estilos {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 76px);
  margin: 0;
  padding: 4px;
  border-radius: 999px;
  background: rgba(18, 25, 24, 0.9);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.5);
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  transform: translateX(-50%);
}

.b-estilos button {
  position: relative;
  z-index: 1;
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  cursor: pointer;
  transition: color 0.3s ease;
}

.b-estilos button:hover {
  color: #fff;
}

.b-estilos .be-marca {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  width: 76px;
  padding: 0;
  border-radius: 999px;
  background: var(--marca);
  transform: translateX(152px);
  transition: transform 0.4s var(--curva);
}

/* Qual estilo aparece é o `data-estilo` da cena, que o pagina.js troca
   sozinho (Pop, Órbita e Oliva, um de cada vez) e no clique do seletor. O
   círculo abre (ou fecha) a partir do botão da vez, que o pagina.js põe no
   `--bx`. Sem o `data-estilo`, fica o Oliva, o quadro final. */
.bio-orbita,
.bio-oliva {
  clip-path: circle(150% at var(--bx, 50%) 96%);
  transition: clip-path 0.75s cubic-bezier(0.6, 0, 0.2, 1);
}

.cena-bio[data-estilo='pop'] .bio-orbita,
.cena-bio[data-estilo='pop'] .bio-oliva,
.cena-bio[data-estilo='orbita'] .bio-oliva {
  clip-path: circle(0% at var(--bx, 50%) 96%);
}

.cena-bio[data-estilo='pop'] .be-marca {
  transform: translateX(0);
}

.cena-bio[data-estilo='orbita'] .be-marca {
  transform: translateX(76px);
}

.cena-bio:not([data-estilo]) .b-estilos button[value='oliva'],
.cena-bio[data-estilo='pop'] .b-estilos button[value='pop'],
.cena-bio[data-estilo='orbita'] .b-estilos button[value='orbita'],
.cena-bio[data-estilo='oliva'] .b-estilos button[value='oliva'] {
  color: #121918;
}

.cena-bio.sem-transicao .bio-orbita,
.cena-bio.sem-transicao .bio-oliva,
.cena-bio.sem-transicao .be-marca,
.cena-bio.sem-transicao .b-estilos button {
  transition: none;
}

/* ── 4. Roteiros: o roteiro virando gravação ───────────────────────────────
   A câmera gravando, o teleprompter com o roteiro, a linha da vez acesa, e o
   "Gravado" no fim. O tempo do REC é o `pagina.js` que conta. */
.cena-roteiro {
  background: #1b1b1b;
  color: #fff;
}

.rt-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.cena-roteiro::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.cena-roteiro > p,
.rt-prompter,
.rt-botao {
  position: absolute;
  z-index: 1;
  margin: 0;
}

.rt-topo {
  top: 18px;
  right: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
}

.rt-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
}

.rt-rec i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4d;
}

.rt-tempo {
  font-variant-numeric: tabular-nums;
}

.rt-hd {
  margin-left: auto;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  font-size: 11px;
}

/* O teleprompter fica embaixo, junto do botão de gravar: em cima, cobria o
   rosto de quem grava. */
.rt-prompter {
  right: 16px;
  bottom: 100px;
  left: 16px;
  padding: 14px 16px 4px;
  border-radius: 18px;
  background: rgba(12, 16, 15, 0.74);
}

.rt-cab {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--marca);
}

.rt-cab .i {
  width: 14px;
  height: 14px;
}

.rt-l {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.rt-l small {
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.rt-gravado {
  top: 58px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: #121918;
  transform: translateX(-50%);
}

.rt-gravado .i {
  width: 15px;
  height: 15px;
  color: var(--marca-escrita);
}

.rt-botao {
  bottom: 22px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  border: 4px solid #fff;
  border-radius: 50%;
}

.rt-botao i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ff4d4d;
}

.cena-roteiro.tocando .rt-foto {
  animation: rt-zoom var(--dur, 6.6s) linear both;
}

@keyframes rt-zoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: none;
  }
}

.cena-roteiro.tocando .rt-rec i {
  animation: rec-cursor 1s steps(1) 6;
}

.cena-roteiro.tocando .rt-botao i {
  animation: rt-grava var(--dur, 6.6s) var(--curva) both;
}

@keyframes rt-grava {
  0% {
    border-radius: 50%;
    transform: none;
  }
  6%,
  84% {
    border-radius: 8px;
    transform: scale(0.55);
  }
  92%,
  100% {
    border-radius: 50%;
    transform: none;
  }
}

.cena-roteiro.tocando .rt-l1 {
  animation: rt-l1 var(--dur, 6.6s) linear both;
}

.cena-roteiro.tocando .rt-l2 {
  animation: rt-l2 var(--dur, 6.6s) linear both;
}

.cena-roteiro.tocando .rt-l3 {
  animation: rt-l3 var(--dur, 6.6s) linear both;
}

@keyframes rt-l1 {
  0% {
    opacity: 0.35;
  }
  6%,
  34% {
    opacity: 1;
  }
  38%,
  90% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rt-l2 {
  0%,
  34% {
    opacity: 0.35;
  }
  38%,
  62% {
    opacity: 1;
  }
  66%,
  90% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rt-l3 {
  0%,
  62% {
    opacity: 0.35;
  }
  66%,
  100% {
    opacity: 1;
  }
}

.cena-roteiro.tocando .rt-gravado {
  animation: rt-gravado 0.5s var(--curva) 5.6s both;
}

@keyframes rt-gravado {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ── 5. Inspiração: a busca e os anúncios que estão no ar ──────────────────
   A busca digitada (pelo `pagina.js`), os anúncios chegando, e a tela rolando
   para mostrar mais. Os anúncios são de exemplo, com as fotos geradas no
   aplicativo; nenhum é de um negócio de verdade. */
.cena-busca {
  background: #f7f8f8;
  color: var(--tinta);
}

.ib-rola {
  padding: 22px 16px;
}

.ib-rola > p {
  margin: 0;
}

.ib-titulo {
  font-family: var(--voz);
  font-size: 27px;
  font-weight: 500;
}

.ib-sub {
  margin-top: 4px !important;
  font-size: 12.5px;
  color: var(--tinta-fraca);
}

.ib-campo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-top: 14px !important;
  padding: 0 12px;
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--linha);
  font-size: 14px;
}

.ib-campo .i {
  width: 16px;
  height: 16px;
  color: var(--tinta-fraca);
}

.ib-campo > i {
  width: 1.5px;
  height: 17px;
  margin-left: -6px;
  background: var(--tinta);
  opacity: 0;
}

.ib-achados {
  margin-top: 14px !important;
  font-size: 12px;
  color: var(--tinta-fraca);
}

.ib-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.ib-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(18, 25, 24, 0.04), 0 10px 24px -18px rgba(18, 25, 24, 0.4);
}

.ib-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.ib-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px 0;
}

.ib-meta i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--cor);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
}

.ib-meta b {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
}

.ib-meta small {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--tinta-fraca);
}

.ib-texto {
  padding: 6px 10px 0;
  font-size: 11px;
  line-height: 1.35;
  color: #3b4744;
}

.ib-botao {
  margin: 8px 10px 10px;
  padding: 6px 0;
  border-radius: 8px;
  background: var(--chao);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
}

.cena-busca.tocando .ib-campo > i {
  animation: rec-cursor 0.9s steps(1) 3;
}

.cena-busca.tocando .ib-achados {
  animation: rec-entra 0.45s var(--curva) 1.9s both;
}

.cena-busca.tocando .ib-card {
  animation: rec-entra 0.55s var(--curva) both;
}

.cena-busca.tocando .ib-card:nth-child(1) { animation-delay: 2.2s; }
.cena-busca.tocando .ib-card:nth-child(2) { animation-delay: 2.45s; }
.cena-busca.tocando .ib-card:nth-child(3) { animation-delay: 2.7s; }
.cena-busca.tocando .ib-card:nth-child(4) { animation-delay: 2.95s; }

.cena-busca.tocando .ib-rola {
  animation: ib-rola 2s cubic-bezier(0.45, 0, 0.25, 1) 4.1s both;
}

@keyframes ib-rola {
  from {
    transform: none;
  }
  to {
    transform: translateY(-190px);
  }
}

/* O botão acompanha a seção: gruda no pé da tela e, no fim dela, fica. */
.rec-botao {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  display: flex;
  justify-content: center;
  width: min(100%, 560px);
  margin: 0 auto;
}

.rec-fecho {
  max-width: 22em;
  margin: var(--bloco) auto 0;
  font-family: var(--voz);
  font-size: clamp(20px, 1.9vw, 26px);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

/* No computador: o palco gruda no topo, com o texto de um lado e o vídeo do
   outro, e a rolagem troca o recurso. */
@media (min-width: 961px) {
  .rec-anima {
    height: 560vh;
  }

  .rec-anima .rec-palco {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }

  .rec-anima .rec-dentro,
  .rec-anima .rec-caixa {
    height: 100%;
  }

  /* A largura do cartão do vídeo, e a metade da altura dele com a legenda:
     os tracinhos e o botão da coluna do texto se alinham pelo topo e pela
     base do cartão (pedido do Lucas: o botão ficava abaixo do fim dele). O
     cartão fica no meio do palco, abaixo dos 60 px da barra de cima. */
  .rec-anima .rec-caixa {
    --rec-w: min(380px, 30vw, calc((100svh - 200px) / 1.6));
    --rec-meio: calc(var(--rec-w) * 0.8 + 26px);
  }

  .rec-anima .rec-item {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
    max-width: none;
    margin: 0;
    padding-top: 60px;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.45s ease,
      visibility 0s linear 0.45s;
  }

  .rec-anima .rec-item.ativo {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 0.45s ease,
      visibility 0s;
  }

  .rec-anima .rec-texto {
    padding: 0 clamp(8px, 2vw, 32px) 40px;
    transform: translateY(16px);
    transition: transform 0.6s var(--curva);
  }

  .rec-anima .rec-item.ativo .rec-texto {
    transform: none;
  }

  .rec-anima .rec-midia {
    justify-self: center;
    width: var(--rec-w);
  }

  .rec-anima .rec-tracos {
    position: absolute;
    top: calc(50% + 30px - var(--rec-meio));
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 50%;
  }

  .rec-traco {
    width: 22px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(18, 25, 24, 0.16);
    cursor: pointer;
    transition:
      width 0.3s ease,
      background-color 0.3s ease;
  }

  .rec-traco.ativo {
    width: 46px;
    background: var(--tinta);
  }

  .rec-anima .rec-botao {
    position: absolute;
    bottom: calc(50% - 30px - var(--rec-meio));
    left: 0;
    width: calc(50% - clamp(16px, 2.5vw, 40px));
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   8. PARA QUEM É
   ════════════════════════════════════════════════════════════════════════════ */

/* Os ramos: seis fileiras de chips, a lista da página do VTSD, que o Lucas
   escolheu. Cada fileira é um trilho solto, com o MESMO vão entre todos os
   chips. Antes elas eram esticadas até uma largura fixa, e o vão mudava de
   uma fileira para a outra.

   O vão é margem à direita de cada chip, e não `gap`: assim a largura de uma
   volta é a soma exata dos chips, e o trilho anda metade da própria largura
   sem soluço na emenda. Quantas vezes a fileira se repete, quanto tempo cada
   uma leva e onde cada uma começa, quem decide é o `pagina.js`, medindo: é o
   que faz todas andarem na mesma velocidade, com o desenho de tijolo. */
.ramos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--bloco);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ramos-fila {
  display: flex;
  width: max-content;
  animation: corre var(--duracao, 80s) linear infinite;
  animation-delay: var(--atraso, 0s);
}

.ramos-fila span {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  padding: 10px 20px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: var(--papel);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--tinta);
}

.ramos-fila i {
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}

@keyframes corre {
  to {
    transform: translateX(-50%);
  }
}

/* A frase embaixo dos chips: a primeira metade conversa com eles (cada
   negócio, um anúncio), a segunda é a promessa. A primeira em cinza, a
   segunda em grafite. */
.ramos-frase {
  max-width: 34em;
  margin: 30px auto 0;
  font-family: var(--voz);
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 450;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.015em;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  color: var(--tinta-fraca);
}

/* Cada frase na sua linha: juntas, a quebra caía no meio da primeira. */
.ramos-frase span {
  display: block;
  color: var(--tinta);
}

/* O "é para você" e o "não é para você" num cartão só, de duas partes: em
   cima o sim, embaixo, numa faixa cinza, o não. Dois cartões de cores e
   alturas diferentes, embaixo dos chips, disputavam com eles. */
.publico {
  max-width: 940px;
  margin: var(--bloco) auto 0;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 28px;
  background: var(--papel);
  box-shadow: 0 30px 60px -46px rgba(18, 25, 24, 0.4);
}

.publico-sim {
  padding: 34px 38px 32px;
}

.publico-nao {
  padding: 24px 38px 28px;
  border-top: 1px solid var(--linha);
  background: var(--chao);
}

.publico h3 {
  margin: 0 0 18px;
  font-size: clamp(19px, 1.6vw, 22px);
}

.publico-nao h3 {
  font-size: clamp(17px, 1.4vw, 19px);
}

.publico ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publico li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  font-size: 16.5px;
  line-height: 1.5;
}

.publico li .i {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  stroke-width: 2.6;
}

.publico-sim li .i {
  background: var(--menta);
  color: var(--marca-escrita);
}

.publico-nao li {
  color: var(--tinta-fraca);
}

.publico-nao li .i {
  background: var(--papel);
  color: var(--tinta-fraca);
}

/* Os sinais de "sim" se desenham um depois do outro quando o cartão
   aparece, como os do "Além disso" do cabeçalho. */
.js .publico-sim li .i {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.js .publico.visto .publico-sim li .i {
  animation: marcar 0.45s var(--curva) forwards;
}

.publico.visto .publico-sim li:nth-child(1) .i { animation-delay: 0.35s; }
.publico.visto .publico-sim li:nth-child(2) .i { animation-delay: 0.5s; }
.publico.visto .publico-sim li:nth-child(3) .i { animation-delay: 0.65s; }
.publico.visto .publico-sim li:nth-child(4) .i { animation-delay: 0.8s; }
.publico.visto .publico-sim li:nth-child(5) .i { animation-delay: 0.95s; }

/* ════════════════════════════════════════════════════════════════════════════
   9. QUANTO CUSTA UMA EQUIPE
   ════════════════════════════════════════════════════════════════════════════ */

.custo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  margin-top: var(--bloco);
}

.tabela {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 22px;
  background: var(--papel);
  font-size: 16.5px;
}

.tabela th,
.tabela td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  font-weight: 400;
}

.tabela thead th {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.tabela td:last-child,
.tabela th:last-child {
  text-align: right;
  white-space: nowrap;
}

.tabela thead th:last-child {
  white-space: normal;
}

/* Os serviços da agência ocupam a linha toda, sem valor ao lado: o valor é
   um só, o custo total, embaixo. */
.tabela th[colspan],
.tabela td[colspan] {
  text-align: left;
}

.tabela tfoot th,
.tabela tfoot td {
  border-bottom: 0;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 700;
}

.barras {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: var(--papel);
}

.barra-rotulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--tinta-fraca);
}

.barra-rotulo b {
  font-weight: 600;
  color: var(--tinta);
}

.barra-rotulo-mp {
  margin-top: 26px;
}

.barra {
  display: flex;
  height: 58px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--chao);
}

.seg {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 calc(var(--peso) / 2500 * 100%);
  overflow: hidden;
  transform: scaleX(var(--f, 1));
  transform-origin: 0 50%;
}

.seg em {
  padding-left: 12px;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  color: var(--papel);
}

/* A agência em âmbar, que é o que ela custa, e o Meu Publicitário em verde,
   a mesma regra das saídas. A agência é um valor fixo, numa barra só (até
   27/09/2026, eram os profissionais somados, um pedaço cada); o Meu
   Publicitário ocupa 249 de 2.500, 9,96%. */
.seg-1 {
  background: var(--pausado);
}

.seg-mp {
  flex-basis: 9.96%;
  background: var(--marca);
}

.barra-porcento {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 0;
  font-family: var(--voz);
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  line-height: 1;
}

.barra-porcento span {
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.barra-porcento small {
  font-family: var(--ui);
  font-size: 16px;
  color: var(--tinta-fraca);
}

.custo-texto {
  max-width: 780px;
  margin: var(--bloco) auto 0;
  text-align: center;
}

.custo-texto p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  color: #3a4843;
}

.custo-grande {
  margin-top: 32px !important;
  font-family: var(--voz);
  font-size: clamp(19px, 1.7vw, 24px) !important;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.015em;
  line-height: 1.35 !important;
  color: var(--tinta) !important;
}

.custo-grande strong {
  font-weight: 600;
  background: linear-gradient(transparent 62%, var(--marca) 62%, var(--marca) 92%, transparent 92%);
}

/* No celular, as três frases viram três parágrafos (pedido do Lucas,
   27/09/2026); no computador, seguem num parágrafo só. */
@media (max-width: 640px) {
  .custo-grande > span {
    display: block;
  }

  .custo-grande > span + span {
    margin-top: 14px;
  }
}

/* O site, que se paga à parte, em destaque (pedido do Lucas, 27/09/2026):
   um cartão como os de cima, com o valor no âmbar do que o jeito antigo
   custa. */
.custo-texto .custo-site {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 24px;
  border-radius: 18px;
  background: var(--papel);
  box-shadow: 0 24px 50px -34px rgba(18, 25, 24, 0.35), 0 0 0 1px rgba(154, 91, 0, 0.16);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
  text-align: left;
}

.custo-site .i {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--pausado);
}

.custo-site strong {
  font-weight: 700;
  color: var(--pausado);
}

/* ════════════════════════════════════════════════════════════════════════════
   10. A OFERTA
   ════════════════════════════════════════════════════════════════════════════ */

.oferta {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: var(--bloco);
}

/* Presa a 60 px do topo: com a barra de cima (até 28/09/2026), eram 120,
   60 abaixo dela. */
.oferta-visual {
  position: sticky;
  top: 60px;
}

.oferta-caixa {
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: 32px;
  background: var(--papel);
  box-shadow: 0 40px 80px -40px rgba(18, 25, 24, 0.28), 0 0 0 1px rgba(18, 25, 24, 0.05);
}

.oferta-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.oferta-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.oferta-lista li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha-fraca);
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.oferta-lista li .i {
  margin-top: 1px;
  color: var(--marca-escrita);
}

.oferta-lista b {
  font-weight: 600;
  color: var(--tinta);
}

.oferta-onde {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 15.5px;
  font-weight: 600;
}

.oferta-onde .i {
  color: var(--marca-escrita);
}

.oferta-preco {
  margin: 26px 0 22px;
  padding: 22px 0 0;
  border-top: 1px solid var(--linha);
}

.oferta-preco p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.oferta-preco strong {
  font-family: var(--voz);
  font-size: clamp(44px, 4vw, 58px);
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.04em;
  line-height: 1;
}

.oferta-preco span {
  font-size: 18px;
  font-weight: 600;
}

.oferta-preco small {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: var(--tinta-fraca);
}

.oferta-garantias {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.oferta-garantias li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.oferta-garantias .i {
  width: 18px;
  height: 18px;
  color: var(--marca-escrita);
}

/* A equipe da assinatura: cada profissão do marketing como um agente, no
   jeito do cartão do VTSD que o Lucas mostrou (27/09/2026). Os ícones são
   de aplicativo, um de cada cor, sem vermelho nem âmbar (que na página são
   o que falhou e o que custa). O ponto verde é o agente pronto para
   trabalhar. Quando o cartão aparece, os agentes chegam um depois do outro,
   uma vez só; com "menos movimento", já estão todos lá. */
.agentes {
  overflow: hidden;
  border-radius: 28px;
  background: var(--papel);
  box-shadow: 0 40px 80px -40px rgba(18, 25, 24, 0.28), 0 0 0 1px rgba(18, 25, 24, 0.05);
}

.agentes-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 24px clamp(20px, 2.6vw, 30px);
  background: linear-gradient(110deg, #2e9c77 0%, #0c7054 42%, #0b3328 100%);
  color: #fff;
}

.agentes-titulo {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-transform: uppercase;
}

.agentes-titulo span {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.agentes-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 13px 4px 4px;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--marca-escrita);
}

.agentes-pilha {
  display: flex;
}

.agentes-pilha i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
}

.agentes-pilha i:first-child {
  margin-left: 0;
}

.agentes-pilha .i {
  width: 12px;
  height: 12px;
}

.agentes-corpo {
  padding: clamp(22px, 3vw, 34px);
}

.agentes-lead {
  margin: 0 0 24px;
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.agentes-lead em {
  font-style: normal;
  color: var(--marca-escrita);
}

.agentes-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agentes-lista li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.agentes-icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 16px -10px var(--c2);
  color: #fff;
}

.agentes-icone .i {
  width: 20px;
  height: 20px;
}

.agentes-icone::after {
  content: '';
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--papel);
  border-radius: 50%;
  background: var(--marca);
}

.agentes-lista b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
}

.agentes-lista small {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta-fraca);
}

.js .agentes-lista li {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.45s ease calc(0.25s + var(--n) * 0.07s),
    transform 0.6s var(--curva) calc(0.25s + var(--n) * 0.07s);
}

.js .agentes-icone::after {
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) calc(0.55s + var(--n) * 0.07s);
}

.js .visto .agentes-lista li {
  opacity: 1;
  transform: none;
}

.js .visto .agentes-icone::after {
  transform: none;
}

@media (max-width: 560px) {
  .agentes-lista {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   11. QUEM ESTÁ POR TRÁS
   ════════════════════════════════════════════════════════════════════════════ */

.lucas {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lucas-foto {
  position: relative;
  width: min(100%, 380px);
  margin: var(--bloco) 0 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 30px;
  background: var(--tinta);
}

.lucas-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lucas-iniciais {
  display: none;
}

.lucas-foto.sem-foto {
  background: radial-gradient(90% 70% at 30% 20%, #203330, var(--tinta));
}

.lucas-foto.sem-foto .lucas-iniciais {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--voz);
  font-size: clamp(90px, 12vw, 160px);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  letter-spacing: -0.04em;
  color: var(--marca);
}

/* Mais larga que o texto, para as montagens de cada ano (16:9, com
   legendas dentro) ficarem legíveis; o texto continua em 34em. */
.historia {
  width: 100%;
  max-width: 860px;
  margin-top: var(--bloco);
  text-align: center;
}

.historia p {
  margin: 0 0 20px;
  font-size: 17.5px;
  line-height: 1.72;
  color: #34423e;
}

/* Embaixo do comercial de 2026 (pedido do Lucas, 27/09/2026): a conta de
   quem contratava um profissional de tráfego e a mesma conta com o Meu
   Publicitário, em dois cartões iguais, sobre o mesmo dinheiro (R$ 2.500 por
   mês, o que fecha 2.000 + 500 e 249 + 2.251). O texto fora dos cartões fica
   no centro, como o resto da história; dentro deles, nos lados. */
.tempo + .conta-texto {
  margin-top: 64px;
}

.divisao + .conta-texto {
  margin-top: 40px;
}

.historia .conta-texto p {
  max-width: 34em;
  margin: 0 auto 12px;
}

.historia .conta-texto p:last-child {
  margin-bottom: 0;
}

.conta-texto strong {
  font-weight: 600;
  color: var(--tinta);
}

/* Cada cartão: um valor de cada lado, com a cor dele no quadradinho, e a
   barra do mesmo dinheiro dividida embaixo. O profissional no vermelho suave
   do cartão antigo (o âmbar escuro parecia marrom, pedido do Lucas), o que
   sobra para anunciar no verde da marca e o Meu Publicitário no verde
   escuro; o cartão dele tem o contorno verde da saída. A barra enche uma vez,
   quando o cartão chega na área de leitura, e fica. */
.divisao {
  --lado-1: #e5605a;
  --lado-2: var(--marca);
  max-width: 540px;
  margin: 28px auto 0;
  padding: 22px 24px 24px;
  border-radius: 22px;
  background: var(--papel);
  box-shadow: 0 30px 60px -44px rgba(18, 25, 24, 0.4);
  text-align: left;
}

.divisao-mp {
  --lado-1: var(--marca-escrita);
  box-shadow: 0 0 0 2px var(--marca), 0 30px 60px -40px rgba(64, 184, 142, 0.6);
}

.divisao-titulo {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta-fraca);
}

.divisao-lados {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.divisao-lado + .divisao-lado {
  text-align: right;
}

/* O quadradinho vai na linha do texto: no celular, o rótulo quebra em duas
   linhas e ele fica junto da primeira palavra. */
.divisao-rotulo {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta-fraca);
}

.divisao-rotulo i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 3px;
  background: var(--lado-1);
}

.divisao-lado + .divisao-lado .divisao-rotulo i {
  background: var(--lado-2);
}

.divisao-valor {
  display: block;
  margin-top: 8px;
  font-family: var(--voz);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  color: var(--tinta);
}

/* O R$ e os centavos menores, como num extrato. */
.divisao-valor small {
  font-size: 0.5em;
  letter-spacing: 0;
}

.divisao-barra {
  display: flex;
  height: 48px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--chao);
}

.divisao-barra span {
  flex: 0 0 var(--parte);
  background: var(--lado-1);
  transform-origin: 0 50%;
  transition: transform 1s var(--curva);
}

.divisao-barra span + span {
  background: var(--lado-2);
  transition-delay: 0.9s;
}

/* No cartão do Meu Publicitário, o pedaço dele é curto: enche rápido, e o
   do anúncio vem logo atrás, mais demorado. */
.divisao-mp .divisao-barra span:first-child {
  transition-duration: 0.5s;
}

.divisao-mp .divisao-barra span + span {
  transition-duration: 1.3s;
  transition-delay: 0.4s;
}

.js .divisao:not(.acesa) .divisao-barra span {
  transform: scaleX(0);
}

@media (max-width: 480px) {
  .divisao {
    padding: 18px 18px 20px;
    border-radius: 20px;
  }

  .divisao-lados {
    gap: 12px;
  }

  .divisao-rotulo {
    font-size: 13px;
  }

  .divisao-barra {
    height: 40px;
    border-radius: 12px;
  }
}

/* A história em linha do tempo (27/09/2026): o ano numa pílula, o texto do
   Lucas e a imagem da época embaixo, um ano depois do outro, ligados por um
   fio. 2026, o do Meu Publicitário, vem em verde, a cor da saída. Cada ano
   aparece uma vez, quando entra na tela. */
.tempo {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tempo-ano {
  position: relative;
  padding-bottom: 64px;
}

.tempo-ano:last-child {
  padding-bottom: 0;
}

.tempo-ano + .tempo-ano::before {
  content: '';
  position: absolute;
  top: -52px;
  left: 50%;
  width: 2px;
  height: 40px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(rgba(18, 25, 24, 0.14), var(--marca));
}

.tempo-numero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 18px 7px 14px;
  border-radius: 999px;
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--linha), 0 10px 24px -18px rgba(18, 25, 24, 0.4);
  font-family: var(--voz);
  font-size: 24px;
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tinta);
}

.tempo-numero::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--marca);
}

.tempo-agora .tempo-numero {
  background: var(--marca);
  box-shadow: 0 12px 26px -14px rgba(64, 184, 142, 0.9);
}

.tempo-agora .tempo-numero::before {
  background: var(--tinta);
}

.historia .tempo-texto {
  max-width: 34em;
  margin: 16px auto 22px;
}

/* Um ano com dois parágrafos (o 2026) lê como um texto só: entre eles, o
   respiro fica em 12 px. */
.historia .tempo-texto + .tempo-texto {
  margin-top: -10px;
}

.tempo-texto strong {
  font-weight: 600;
  color: var(--tinta);
}

.tempo-foto {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 24px;
  background: var(--chao);
  box-shadow: 0 30px 60px -40px rgba(18, 25, 24, 0.35);
}

.tempo-foto > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tempo-foto > span {
  display: none;
}

/* Sem a imagem, o quadro mostra o ano. */
.tempo-foto.sem-foto > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--voz);
  font-size: clamp(64px, 12vw, 120px);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  letter-spacing: -0.04em;
  color: rgba(18, 25, 24, 0.12);
}

/* 2026: o comercial do Meu Publicitário (27/09/2026). Os planos são do
   Magic Hour, com o mascote do app como protagonista; a montagem (a conversa
   digitada, as legendas, as notificações, as passagens) é do Remotion, nas
   fontes e cores da página (`ferramentas/comercial-2026`), com o som também
   montado lá.

   Não começa sozinho (pedido do Lucas): a capa é o mascote no estúdio, com o
   play verde no meio (o mesmo do vídeo do topo) e o balão "Dá o play!" (ver
   `.tempo-chamada`), e o clique no play ou em qualquer lugar da capa começa o
   filme do começo, com som. Tocando, os controles (pausar e tirar o som) ficam embaixo,
   no centro, e só aparecem com o mouse em cima ou com o foco do teclado; no
   celular, aparecem num toque e somem sozinhos. Pausado, o play verde volta
   ao meio. No fim, fica a cartela com "Ver de novo" embaixo. Nada da barra de
   controles do navegador, que ele não quis. */
.tempo-video {
  container-type: inline-size;
  background: #dcefe6;
}

.tempo-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Na capa, clicar em qualquer lugar do filme também começa. */
.tempo-video:not(.acabou) video {
  cursor: pointer;
}

.tempo-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--marca);
  color: var(--tinta);
  box-shadow: 0 0 0 10px rgba(80, 230, 178, 0.22), 0 18px 40px -14px rgba(12, 112, 84, 0.55);
  cursor: pointer;
  transition: transform 0.25s var(--curva), box-shadow 0.25s, opacity 0.2s;
}

.tempo-play .i {
  width: 26px;
  height: 26px;
  margin-left: 3px;
}

.tempo-play:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 14px rgba(80, 230, 178, 0.24), 0 18px 40px -14px rgba(12, 112, 84, 0.55);
}

.tempo-video.tocando .tempo-play,
.tempo-video.acabou .tempo-play {
  opacity: 0;
  pointer-events: none;
}

/* A chamada para o play (pedido do Lucas, 27/09/2026): o mascote da capa
   fala, num balão branco como o do começo do filme, com a ponta virada para
   ele, e o play verde fica logo embaixo. O balão nasce uma vez, quando o
   filme chega na área de leitura, e some de vez quando o filme começa. O
   clique passa por ele e cai no filme, que também começa. As letras
   acompanham a largura do quadro (`cqw`), com um mínimo para o celular; a
   altura é contada a partir do play (34 px de meio botão, 10 de halo e 14 de
   folga), que tem tamanho fixo. */
.tempo-chamada {
  position: absolute;
  right: 47.5%;
  bottom: calc(50% + 58px);
  max-width: 36%;
  padding: 1.5cqw 2.2cqw 1.6cqw;
  border-radius: 2.8cqw 2.8cqw 0.7cqw 2.8cqw;
  background: var(--papel);
  box-shadow: 0 24px 50px -24px rgba(18, 25, 24, 0.5), 0 0 0 1px rgba(18, 25, 24, 0.04);
  text-align: left;
  font-size: clamp(12px, 1.95cqw, 17px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta-fraca);
  pointer-events: none;
  transform-origin: 100% 100%;
  transition: opacity 0.2s, transform 0.2s;
}

.tempo-chamada strong {
  display: block;
  margin-bottom: 0.15em;
  font-size: clamp(15px, 2.9cqw, 25px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--tinta);
}

.tempo-chamada-curta {
  display: none;
}

.js .tempo-video:not(.chamou) .tempo-chamada {
  opacity: 0;
  transform: scale(0.4);
}

/* Nasce com um leve balanço, como os balões do filme. */
.tempo-video.chamou .tempo-chamada {
  transition: opacity 0.3s 0.3s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

.tempo-video.comecou .tempo-chamada {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s, transform 0.2s;
}

/* No celular, o quadro é baixo demais para o balão caber em cima do play:
   ele vai para o lado esquerdo do play, na altura dele, fala menos, e o play
   fica um pouco menor (28 px de meio botão, 10 de halo e 8 de folga). */
@container (max-width: 520px) {
  .tempo-chamada {
    top: 0;
    right: calc(50% + 46px);
    bottom: 0;
    height: fit-content;
    max-width: calc(46% - 46px);
    margin: auto 0;
    padding: 8px 12px 9px;
    border-radius: 16px 16px 5px 16px;
    transform-origin: 100% 50%;
  }

  .tempo-chamada-longa {
    display: none;
  }

  .tempo-chamada-curta {
    display: block;
  }

  .tempo-play {
    width: 56px;
    height: 56px;
  }

  .tempo-play .i {
    width: 22px;
    height: 22px;
  }
}

/* Os controles: centralizados embaixo, escondidos até o mouse passar por
   cima (ou o foco do teclado chegar neles). O `left` com `translate` deixa a
   caixa do tamanho dos dois botões, para o resto do filme continuar
   clicável. */
.tempo-controles {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* Só enquanto toca: pausado, quem aparece é o play verde, sozinho. */
@media (hover: hover) {
  .tempo-video.tocando:hover .tempo-controles {
    opacity: 1;
    pointer-events: auto;
  }
}

.tempo-video.tocando:has(:focus-visible) .tempo-controles,
.tempo-video.tocando.mostra .tempo-controles {
  opacity: 1;
  pointer-events: auto;
}

.tempo-controles button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 25, 24, 0.82);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55);
  color: var(--papel);
  cursor: pointer;
}

.tempo-controles .i {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}

/* O desenho do pausar é em traço; aqui ele fica cheio, como o do play. */
.tempo-pausar .i {
  fill: currentColor;
  stroke: none;
}

/* "Ver de novo": só no fim, embaixo, no centro, sem cobrir a cartela. */
.tempo-denovo {
  position: absolute;
  left: 50%;
  bottom: 14px;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 25, 24, 0.82);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--papel);
  cursor: pointer;
}

.tempo-video.acabou .tempo-denovo {
  display: flex;
}

.tempo-denovo-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--tinta);
}

.tempo-denovo-icone .i {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ════════════════════════════════════════════════════════════════════════════
   12. PERGUNTAS
   ════════════════════════════════════════════════════════════════════════════ */

.perguntas {
  display: grid;
  gap: 10px;
  margin-top: var(--bloco);
}

.pergunta {
  padding: 0 24px;
  border-radius: 18px;
  background: var(--papel);
  transition: box-shadow 0.3s;
}

.pergunta[open] {
  box-shadow: 0 18px 36px -26px rgba(18, 25, 24, 0.35);
}

.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--voz);
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.pergunta summary::-webkit-details-marker {
  display: none;
}

.pergunta summary:hover .pergunta-sinal {
  background: var(--menta);
}

.pergunta-sinal {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--chao);
  transition: transform 0.35s var(--curva), background-color 0.25s;
}

.pergunta-sinal::before,
.pergunta-sinal::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--tinta);
  transform: translate(-50%, -50%);
}

.pergunta-sinal::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.pergunta[open] .pergunta-sinal {
  background: var(--menta);
  transform: rotate(45deg);
}

.pergunta::details-content {
  height: 0;
  overflow: clip;
  transition: height 0.4s var(--curva), content-visibility 0.4s allow-discrete;
}

.pergunta[open]::details-content {
  height: auto;
}

.resposta p {
  max-width: 46em;
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta-fraca);
}

/* Uma resposta pode ter mais de um parágrafo: entre eles, um respiro curto;
   depois do último, o espaço até a borda do cartão. */
.resposta p:last-child {
  margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════════════════════
   13. FINAL
   ════════════════════════════════════════════════════════════════════════════ */

.final-dentro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.final-dentro h2 {
  max-width: 15em;
}

.final-mascote {
  width: 112px;
  margin-bottom: 24px;
}

.final-dentro .lead {
  max-width: 36em;
  margin-bottom: 36px;
}

.final-citacao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: center;
  max-width: 640px;
  margin: var(--bloco) 0 0;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}

.final-foto {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 50%;
  background: #22302d;
}

.final-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-foto em {
  display: none;
}

.final-foto.sem-foto em {
  display: block;
  font-family: var(--voz);
  font-size: 22px;
  font-style: normal;
  color: var(--marca);
}

.final-citacao blockquote {
  margin: 0;
}

.final-citacao blockquote p {
  margin: 0;
  font-family: var(--voz);
  font-size: 18px;
  font-style: italic;
  font-variation-settings: 'SOFT' 50, 'WONK' 1;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.final-citacao figcaption {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* ════════════════════════════════════════════════════════════════════════════
   O RODAPÉ
   ════════════════════════════════════════════════════════════════════════════ */

.rodape {
  padding: 36px 0 44px;
  background: var(--tinta);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
}

.rodape-dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.rodape .logo {
  color: var(--papel);
  font-size: 18px;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
}

.rodape-links a {
  font-size: 14.5px;
  text-decoration: none;
  transition: color 0.2s;
}

.rodape-links a:hover {
  color: var(--papel);
}

.rodape-empresa {
  margin: 0;
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════════════
   JANELAS MENORES
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .saidas {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  .numeros {
    grid-template-columns: repeat(2, 1fr);
  }

  .custo,
  .oferta {
    grid-template-columns: 1fr;
  }

  .oferta-visual {
    position: static;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    padding-top: 0;
  }

  .oferta-caixa {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }

  .n-texto {
    min-height: 0;
  }

  .exp-visual {
    min-height: 200px;
  }
}

/* A demonstração troca de desenho abaixo de 860: a lista dos sete passos vira
   uma legenda só, a do passo de agora, com a barra de progresso em cima, e o
   aparelho ocupa o resto do palco. */
@media (max-width: 860px) {
  .demo-trilho {
    height: 700vh;
  }

  .demo-grade {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 84px;
    padding-bottom: 58px;
  }

  .demo-barra {
    position: absolute;
    top: 70px;
    left: var(--margem);
    right: var(--margem);
    z-index: 2;
    display: flex;
    gap: 4px;
  }

  .demo-barra i {
    position: relative;
    flex: 1;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--linha);
  }

  .demo-barra i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tinta);
    transform: scaleX(var(--f, 0));
    transform-origin: 0 50%;
  }

  .demo-lado {
    flex: none;
    width: 100%;
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: center;
  }

  .demo-contador {
    margin: 0 0 6px;
    font-size: 11.5px;
  }

  /* A altura é a da legenda mais longa, medida pelo `pagina.js`: fixa, para o
     aparelho embaixo não mudar de tamanho a cada passo. */
  .demo-passos {
    position: relative;
    height: var(--altura-das-legendas, 150px);
  }

  .passo {
    position: absolute;
    inset: 0 0 auto 0;
    display: block;
    padding: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s, transform 0.35s var(--curva);
    pointer-events: none;
  }

  .passo.feito {
    opacity: 0;
  }

  .passo.ativo {
    opacity: 1;
    transform: none;
  }

  .passo::before,
  .passo::after,
  .passo-n {
    display: none !important;
  }

  .passo h3 {
    margin: 0;
    font-size: 18px;
  }

  .passo-corpo {
    grid-template-rows: 1fr;
  }

  .passo-corpo > p {
    padding-top: 6px;
    font-size: 14px;
    line-height: 1.42;
  }

  .passo.ativo .passo-corpo > p {
    padding-top: 6px;
  }

  .demo-cena {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .demo-janela {
    width: min(420px, 100%);
  }

  .demo-janela .vg-cabeca-solta {
    display: none;
  }

  .demo-janela .janela-conteudo {
    padding: 14px;
  }

  .demo-janela .vg-frase {
    font-size: 21px;
  }

  .demo-janela .vg-numeros {
    grid-template-columns: repeat(2, 1fr);
  }

  .demo-janela .sugestao-fala {
    font-size: 15.5px;
  }

  .demo-dica {
    bottom: 12px;
  }

  /* Abaixo de 860 as três colunas viram linhas, com o fio entre elas: numa
     largura de tablet, lado a lado, cada texto quebraria em três linhas. */
  .hero-alem {
    width: min(100%, 440px);
    margin-top: 34px;
    padding: 20px 4px 6px;
  }

  .hero-alem-lista {
    grid-template-columns: 1fr;
  }

  .hero-alem-lista li {
    padding: 12px 18px;
  }

  .hero-alem-lista li + li {
    border-left: 0;
    border-top: 1px solid var(--linha);
  }

  .publico ul {
    grid-template-columns: 1fr;
  }

  .lucas-foto {
    width: min(100%, 320px);
  }

}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }

  .hero-titulo {
    letter-spacing: -0.02em;
  }

  .marca-topo {
    gap: 7px;
    margin-bottom: 24px;
  }

  /* `!important` porque o `pagina.js` grava a largura no próprio elemento,
     a partir do `data-tamanho`, e largura escrita no elemento vence a folha. */
  .marca-topo-mascote {
    width: 48px !important;
  }

  .marca-topo-nome {
    font-size: 21px;
  }

  .hero-video {
    border-radius: 16px;
  }

  .video-capa {
    gap: 10px;
    padding: 16px;
  }

  .video-capa-mascote {
    width: 52px !important;
  }

  .video-capa-titulo {
    font-size: 18px;
  }

  .video-play {
    width: 50px;
    height: 50px;
    box-shadow: 0 0 0 7px rgba(80, 230, 178, 0.18);
  }

  .video-play .i {
    width: 20px;
    height: 20px;
  }

  .video-ouvir {
    gap: 10px;
    padding: 10px 18px 10px 10px;
    border-radius: 16px;
  }

  .video-ouvir-icone {
    width: 40px;
    height: 40px;
  }

  .video-ouvir-icone .i {
    width: 20px;
    height: 20px;
  }

  .video-ouvir-texto b {
    font-size: 15px;
  }

  .video-ouvir-texto span {
    font-size: 13.5px;
  }

  .ramos {
    gap: 8px;
  }

  .ramos-fila span {
    gap: 7px;
    margin-right: 9px;
    padding: 8px 15px;
    font-size: 14px;
  }

  .publico-sim {
    padding: 26px 22px 24px;
  }

  .publico-nao {
    padding: 20px 22px 24px;
  }

  .publico li {
    font-size: 16px;
  }

  .ramos-fila i {
    font-size: 15px;
  }

  .botao-g {
    height: 52px;
    padding: 0 24px;
    font-size: 16.5px;
  }

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

  /* `>`: só os cartões. Sem ele, a regra pegava também as linhas das
     conversas e dos seguidores, e cada uma ficava altíssima. */
  .numeros > li {
    padding: 22px 18px 18px;
  }

  .tabela th,
  .tabela td {
    padding: 14px 16px;
    font-size: 15px;
  }

  .seg em {
    display: none;
  }

  .final-citacao {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .final-foto {
    grid-row: auto;
  }


  .virada {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 28px 24px;
    border-radius: 24px;
  }

  .virada-lista {
    min-width: 0;
    padding: 18px 18px;
  }

  .virada-icone {
    order: -1;
    align-items: flex-start;
    padding: 0;
  }

  /* O fecho da demonstração, no celular, fica centralizado, mesmo sendo
     cartão (pedido do Lucas em 26/09/2026): o ícone, o nome e a frase, um
     embaixo do outro, no meio. */
  .virada-app {
    justify-items: center;
    text-align: center;
  }

  .virada-app .virada-icone {
    align-items: center;
  }

  .virada-icone img {
    width: 76px;
  }

  .virada-icone span {
    font-size: 13px;
  }

  /* Um cartão por linha: a imagem cresce com a largura, para o gráfico não
     ficar pequeno no meio de uma caixa larga e baixa. */
  .exp-visual {
    min-height: clamp(170px, 42vw, 240px);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   MENOS MOVIMENTO
   Quem pediu menos movimento ao sistema vê cada coisa já no lugar final. A
   demonstração continua andando com a rolagem, porque quem anda é o dedo
   dela, mas sem transição entre um estado e outro.
   ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Sem isto, o que tem atraso ficaria invisível pelo tempo do atraso e
       apareceria de uma vez depois, que é o contrário do pedido. */
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js [data-revelar] {
    opacity: 1;
    transform: none;
  }

  .ramos-fila {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   O ÚLTIMO PASSO (o popup dos botões de compra)
   ════════════════════════════════════════════════════════════════════════════
   No desenho da referência que o Lucas mandou (27/09/2026): o selo "O último
   passo" e a barra que anda de 0 a 70% quando abre, o título com a frase-chave
   num bloco verde, os campos grandes e o botão verde com a seta num círculo.
   A lista de países nasce em cima do seletor e desce por cima do botão, dentro
   do cartão, sem fazer o popup crescer (pedido dele): a busca e três países,
   o resto rola. */
.ultimo {
  width: min(452px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ultimo::backdrop {
  background: rgba(18, 25, 24, 0.58);
}

html.ultimo-aberto {
  overflow: hidden;
}

.ultimo-caixa {
  --ultimo-lado: 28px;
  position: relative;
  padding: 26px var(--ultimo-lado) 26px;
  border-radius: 28px;
  background: var(--papel);
  box-shadow: 0 40px 90px -30px rgba(18, 25, 24, 0.55);
}

.ultimo[open] .ultimo-caixa {
  animation: ultimo-entra 0.32s var(--curva);
}

@keyframes ultimo-entra {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

.ultimo-fechar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-apagada, #9aa3a0);
  cursor: pointer;
}

.ultimo-fechar:hover {
  background: var(--chao);
  color: var(--tinta);
}

.ultimo-fechar .i {
  width: 18px;
  height: 18px;
}

.ultimo-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 34px;
}

.ultimo-selo {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--menta);
  box-shadow: inset 0 0 0 1.5px rgba(12, 112, 84, 0.28);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--marca-escrita);
}

.ultimo-barra {
  position: relative;
  flex: 1;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ebe9;
}

/* A largura vem do script, no mesmo passo do número que conta até 70. */
.ultimo-barra-cheia {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--marca-escrita), var(--marca));
}

.ultimo-pct {
  flex: none;
  min-width: 36px;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--marca-escrita);
}

.ultimo-titulo {
  margin: 22px 0 0;
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

.ultimo-destaque {
  padding: 0 7px;
  border-radius: 7px;
  background: var(--marca);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ultimo-apoio {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.ultimo-apoio b {
  font-weight: 700;
  color: var(--tinta);
}

.ultimo-apoio-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.6px var(--marca-escrita);
  color: var(--marca-escrita);
}

.ultimo-apoio-icone .i {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}

.ultimo-rapido {
  margin: 14px 0 18px;
  font-size: 14px;
  text-align: center;
  color: var(--tinta-fraca);
}

.ultimo-campo {
  display: block;
  flex: 1;
  min-width: 0;
  margin-bottom: 12px;
}

.ultimo-campo input,
.ultimo-busca {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border: 1px solid #dde3e0;
  border-radius: 14px;
  background: #f7f9f8;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.ultimo-campo input::placeholder,
.ultimo-busca::placeholder {
  color: #97a19d;
}

.ultimo-campo input:focus,
.ultimo-busca:focus {
  border-color: var(--marca-escrita);
  outline: none;
  background: var(--papel);
  box-shadow: 0 0 0 4px rgba(80, 230, 178, 0.28);
}

.ultimo-campo input[aria-invalid='true'] {
  border-color: #d64545;
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.14);
}

.ultimo-fone {
  display: flex;
  gap: 10px;
}

.ultimo-pais {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 12px 0 14px;
  border: 1px solid #dde3e0;
  border-radius: 14px;
  background: #f7f9f8;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  cursor: pointer;
}

.ultimo-pais img,
.ultimo-lista img {
  display: block;
  flex: none;
  width: 24px;
  height: 18px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(18, 25, 24, 0.08);
  object-fit: cover;
}

.ultimo-pais .i {
  width: 16px;
  height: 16px;
  color: var(--tinta-fraca);
  transition: transform 0.2s;
}

/* A lista de países nasce em cima do seletor (o `top` vem do script, na
   altura do telefone) e desce por cima do botão até perto do fim do cartão:
   o popup não cresce, e cabem a busca e três países; o resto rola. */
.ultimo-paises {
  position: absolute;
  left: var(--ultimo-lado);
  right: var(--ultimo-lado);
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid #e3e8e6;
  border-radius: 16px;
  background: var(--papel);
  box-shadow: 0 24px 50px -20px rgba(18, 25, 24, 0.45);
}

.ultimo-paises[hidden] {
  display: none;
}

.ultimo-busca {
  height: 44px;
  border-radius: 11px;
}

.ultimo-lista {
  flex: 1;
  min-height: 0;
  margin: 6px 0 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.ultimo-lista button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--tinta);
  cursor: pointer;
}

.ultimo-lista button:hover,
.ultimo-lista button:focus-visible {
  background: var(--chao);
}

.ultimo-lista button[aria-current='true'] {
  background: var(--menta);
}

.ultimo-lista .ultimo-lista-ddi {
  margin-left: auto;
  font-size: 14px;
  color: var(--tinta-fraca);
}

.ultimo-lista-vazia {
  padding: 12px 10px;
  font-size: 14px;
  color: var(--tinta-fraca);
}

.ultimo-erro {
  margin: -2px 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #c43d3d;
}

.ultimo-enviar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 62px;
  margin-top: 6px;
  padding: 0 64px 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--marca);
  box-shadow: inset 0 -3px 0 rgba(12, 112, 84, 0.28), 0 22px 44px -18px rgba(80, 230, 178, 0.7);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tinta);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--curva);
}

.ultimo-enviar:hover {
  background: #6cf0c2;
}

.ultimo-enviar:active {
  transform: scale(0.99);
}

.ultimo-enviar[disabled] {
  opacity: 0.7;
  cursor: progress;
}

.ultimo-enviar-seta {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  transform: translateY(-50%);
}

.ultimo-enviar-seta .i {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.ultimo-seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--tinta-fraca);
}

.ultimo-seguro .i {
  width: 15px;
  height: 15px;
  color: var(--marca-escrita);
}

.ultimo-pronto {
  padding-top: 40px;
  padding-bottom: 36px;
  text-align: center;
}

.ultimo-pronto-icone {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--marca);
  color: var(--tinta);
}

.ultimo-pronto-icone .i {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}

.ultimo-pronto .ultimo-titulo {
  margin-top: 18px;
}

.ultimo-pronto .ultimo-rapido {
  margin-bottom: 0;
  font-size: 16px;
}

/* O `display` do ícone e do botão passa por cima do `hidden` do navegador:
   sem esta linha, "Confirmando o seu pagamento" aparecia com o certo e com o
   "Tentar de novo" (visto na volta do primeiro pagamento de teste). */
.ultimo-pronto-icone[hidden],
.ultimo-pronto-botao[hidden] {
  display: none;
}

/* Sem o ícone (enquanto confirma, ou quando não concluiu), o título sobe. */
.ultimo-pronto-icone[hidden] + .ultimo-titulo {
  margin-top: 8px;
}

.ultimo-pronto-botao {
  margin-top: 24px;
}

/* ── A forma de pagamento, o passo 2 ───────────────────────────────────────
   Duas opções lado a lado, no desenho dos campos: a escolhida ganha o fundo
   menta e a borda verde. O rádio fica escondido, mas é ele que recebe o foco
   e as setas do teclado. A pergunta é o título do passo, e o fieldset leva o
   nome dele pelo `aria-labelledby`. */
/* `minmax(0, 1fr)`, e não `1fr`: com `1fr` a coluna cresce até caber o
   texto, e "Cartão de crédito" passava da borda dos campos (medido em 375 px). */
.ultimo-forma {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 20px 0 12px;
  padding: 0;
  border: 0;
}

/* Voltar ao passo 1, para corrigir o e-mail ou o WhatsApp: discreto, porque
   o caminho é seguir. */
.ultimo-voltar {
  display: block;
  margin: 14px auto 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-fraca);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ultimo-voltar:hover {
  color: var(--tinta);
}

.ultimo-voltar[hidden] {
  display: none;
}

.ultimo-opcao {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 10px;
  border: 1px solid #dde3e0;
  border-radius: 14px;
  background: #f7f9f8;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--tinta-fraca);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}

.ultimo-opcao input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ultimo-opcao .i {
  width: 18px;
  height: 18px;
}

.ultimo-opcao:has(input:checked) {
  border-color: var(--marca-escrita);
  background: var(--menta);
  box-shadow: inset 0 0 0 1px var(--marca-escrita);
  font-weight: 800;
  color: var(--tinta);
}

.ultimo-opcao:has(input:focus-visible) {
  outline: 3px solid var(--marca-escrita);
  outline-offset: 2px;
}

/* O `display` dos campos passa por cima do `hidden` do navegador. */
.ultimo-documento[hidden] {
  display: none;
}

/* No cartão, o lugar do CPF vira o aviso da página do Asaas, com a altura do
   campo e a mesma margem: trocar entre Pix e cartão não muda o tamanho do
   popup. Sem ele, o popup centralizado pulava 33 px a cada troca (medido).
   O texto alinha à esquerda: no celular ele quebra em duas linhas, e
   centralizado ficava longe do ícone. */
.ultimo-cartao-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  margin: 0 0 12px;
  padding: 0 14px;
  border-radius: 14px;
  background: #f7f9f8;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  color: var(--tinta-fraca);
}

.ultimo-cartao-aviso .i {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--marca-escrita);
}

.ultimo-cartao-aviso[hidden] {
  display: none;
}

/* ── O QR Code do Pix ──────────────────────────────────────────────────────
   No computador, ela lê o QR Code com o celular. No celular, o QR Code está
   na mesma tela que ela teria de fotografar: ali o código para copiar vem
   primeiro, e o QR Code desce e encolhe. */
/* O título começa abaixo do botão de fechar (16 + 34 px), e não ao lado. */
.ultimo-pix {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  text-align: center;
}

.ultimo-pix[hidden] {
  display: none;
}

.ultimo-pix .ultimo-titulo {
  margin-top: 0;
}

.ultimo-pix-apoio {
  margin: 12px 0 18px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--tinta-fraca);
}

.ultimo-pix-apoio b {
  font-weight: 700;
  color: var(--tinta);
}

.ultimo-pix-qr {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
  padding: 8px;
  border: 1px solid #e3e8e6;
  border-radius: 16px;
  background: #fff;
  image-rendering: pixelated;
}

.ultimo-pix-copiar {
  margin-top: 0;
}

.ultimo-pix-codigo {
  margin: 10px 0 0;
}

.ultimo-pix-codigo input {
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13.5px;
  text-overflow: ellipsis;
  color: var(--tinta-fraca);
}

.ultimo-pix-passos {
  margin: 16px 0 0;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: left;
  color: var(--tinta-fraca);
}

.ultimo-pix-passos li + li {
  margin-top: 4px;
}

.ultimo-pix-passos b {
  font-weight: 700;
  color: var(--tinta);
}

.ultimo-pix-espera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--tinta-fraca);
}

/* O ponto que pulsa enquanto o pagamento não entra: a tela está viva, e
   não travada. */
.ultimo-pix-ponto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--marca);
  animation: ultimo-pulsa 1.4s ease-in-out infinite;
}

@keyframes ultimo-pulsa {
  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

@media (hover: none) and (pointer: coarse) {
  .ultimo-pix-copiar {
    order: 1;
  }

  .ultimo-pix-codigo {
    order: 2;
  }

  .ultimo-pix-passos {
    order: 3;
  }

  .ultimo-pix-qr {
    order: 4;
    width: 168px;
    height: 168px;
    margin: 18px auto 0;
  }

  .ultimo-pix-espera {
    order: 5;
  }
}

@media (max-width: 480px) {
  .ultimo-caixa {
    --ultimo-lado: 20px;
    padding: 22px var(--ultimo-lado) 22px;
    border-radius: 24px;
  }

  .ultimo-opcao {
    padding: 0 8px;
    font-size: 14px;
  }

  /* No celular, o ícone sai para o texto inteiro caber numa linha. */
  .ultimo-opcao .i {
    display: none;
  }

  .ultimo-pix {
    padding-top: 50px;
  }

  .ultimo-titulo {
    font-size: 23px;
  }

  .ultimo-topo {
    gap: 10px;
  }

  .ultimo-enviar {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ultimo-barra-cheia {
    transition: none;
  }

  .ultimo[open] .ultimo-caixa {
    animation: none;
  }

  .ultimo-pix-ponto {
    animation: none;
  }
}

/* Duas opções de pagamento não cabem lado a lado num celular estreito
   ("Cartão de crédito" quebraria): uma embaixo da outra. */
@media (max-width: 359px) {
  .ultimo-forma {
    grid-template-columns: 1fr;
  }
}