:root {
  --azul: #3267ff;
  --azul-dark: #244ec9;
  --ink: #0e0f13;
  --ink-soft: #54555f;
  --muted: #9a9ba4;
  --line: #ececf1;
  --bg: #ffffff;
  --bg-soft: #fbfbfd;
  --font: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x: clip não existe no Safari antigo. O hidden vem antes como
   reserva: pior no scroll, mas melhor que a página arrastar para o lado. */
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.container { width: 100%; max-width: 75rem; margin: 0 auto; padding: 0 1.5rem; }

/* ===================== Botões (raio 12px, texto centralizado) ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.22s ease, box-shadow 0.25s ease,
    color 0.2s ease, border-color 0.2s ease;
}
.btn-azul {
  background: var(--azul);
  color: #fff;
  padding: 0.6rem 1.35rem;
  font-size: 0.85rem;
  box-shadow: 0 1px 2px rgba(50, 103, 255, 0.2), 0 6px 18px rgba(50, 103, 255, 0.2);
}
.btn-azul:hover { background: var(--azul-dark); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(50, 103, 255, 0.26), 0 10px 26px rgba(50, 103, 255, 0.28); }
.btn-lg { font-size: 1rem; padding: 0.95rem 1.9rem; }

/* ===================== Tarja superior ===================== */
.tarja {
  position: relative; z-index: 2;
  background: var(--azul); color: #fff;
  padding: 0.7rem 1.5rem;
  text-align: center; text-transform: uppercase;
  font-size: 0.7rem; font-weight: 600; line-height: 1.45; letter-spacing: 0.07em;
}

/* No computador, a tarja e o hero preenchem a tela inteira, para o bloco escuro
   seguinte não espiar por baixo em telas baixas (um MacBook Air de 13, por
   exemplo). O hero cresce sozinho no espaço que sobra, então não existe número
   mágico descontando a altura da tarja.

   O svh é a altura da tela com as barras do navegador visíveis. No celular isso
   não vale: lá a regra é o botão caber na primeira tela, e o padding curto do
   breakpoint já cuida disso. */
@media (min-width: 961px) {
  .primeira-tela { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .primeira-tela .hero { flex: 1; display: flex; align-items: center; }
  .primeira-tela .hero-grid { width: 100%; }
}

/* ===================== Hero =====================
   O respiro de baixo era 16px contra 88px do topo, e a dobra ficava achatada.
   O clamp cresce com a tela e o celular continua com o padding do seu
   breakpoint, mais curto, para o botão não sair da primeira tela. */
.hero {
  position: relative;
  padding: clamp(5.5rem, 6.5vw, 7rem) 2.5rem clamp(1rem, 5.6vw, 5.5rem);
  overflow-x: clip;
}
.hero::before {
  content: ""; position: absolute; top: -8%; right: -6%;
  width: 70vw; height: 70vw; max-width: 880px; max-height: 880px;
  background: radial-gradient(circle at center, rgba(50, 103, 255, 0.1) 0%, rgba(50, 103, 255, 0.035) 38%, rgba(50, 103, 255, 0) 70%);
  pointer-events: none; z-index: 0;
}
.hero-grid {
  position: relative; z-index: 1;
  max-width: 80rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem; align-items: center;
}
.hero-copy { max-width: 35rem; }

/* Prova compacta, acima da headline. O tráfego é de celular, então ela é a
   primeira coisa depois da tarja. */
.prova-mini { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.prova-fotos { display: flex; flex: none; }
.prova-fotos img {
  position: relative; z-index: 1;
  width: 2.35rem; height: 2.35rem; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
  opacity: 0.78;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, box-shadow 0.45s ease;
}
.prova-fotos img + img { margin-left: -0.65rem; }
/* Holofote: uma foto de cada vez sobe, ganha nitidez e passa na frente das
   vizinhas. O z-index só funciona porque as imagens são position: relative. */
.prova-fotos img.on {
  z-index: 2;
  opacity: 1;
  transform: translateY(-2px) scale(1.18);
  box-shadow: 0 6px 14px rgba(16, 24, 40, 0.22);
}
/* A frase nunca quebra: no celular ela é a linha de prova, e duas linhas ali
   empurram o botão para fora da dobra. */
.prova-frase { font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); letter-spacing: -0.01em; white-space: nowrap; }
.prova-frase strong { color: var(--ink); font-weight: 600; }
/* O número conta de +0 a +100. Sem largura reservada, a frase inteira tremeria
   a cada dígito novo. Alinhado à direita: o espaço até "profissionais" fica
   fixo, e o bloco "+100" cresce para a esquerda conforme os dígitos entram. */
.prova-frase [data-count100] {
  display: inline-block; min-width: 3.7ch; text-align: right;
  font-variant-numeric: tabular-nums;
}

.hero h1 { font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.032em; color: var(--ink); margin-bottom: 1.5rem; }
.hero h1 .azul { color: var(--azul); }
.hero .sub { font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; font-weight: 400; color: var(--ink-soft); letter-spacing: -0.01em; margin-bottom: 2.4rem; max-width: 34rem; }
.hero .sub strong { font-weight: 600; color: var(--ink); }
.hero-cta { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.nota-cta { font-size: 0.88rem; font-weight: 400; line-height: 1.5; color: var(--ink-soft); letter-spacing: -0.01em; }
/* No desktop as duas frases cabem em uma linha. Se a coluna apertar, o
   inline-block joga a segunda frase inteira para baixo, em vez de quebrar no
   meio dela. */
.nota-cta span { display: inline-block; }
.nota-ico { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--ink-soft); }
.nota-ico svg { width: 1.25rem; height: 1.25rem; }

/* ===================== Legenda das telas =====================
   Os três textos ocupam a mesma célula do grid: só um aparece por vez e a
   altura nunca muda, senão o hero pularia a cada troca de tela. */
.legenda { position: relative; z-index: 2; margin-top: clamp(1.5rem, 2.2vw, 2.4rem); }
.legenda-itens { display: grid; list-style: none; text-align: center; }
.legenda-itens li {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* Entra depois da tela começar a trocar: o olho vai à imagem, o texto confirma. */
.legenda-itens li.on {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease 0.18s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}
.legenda-itens strong {
  display: block; margin-bottom: 0.2rem;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}
.legenda-itens span {
  display: block; max-width: 26rem; margin: 0 auto;
  font-size: 0.86rem; line-height: 1.45; color: var(--ink-soft); letter-spacing: -0.01em;
}
/* Desktop: cada legenda em uma linha só, sem quebrar. No mobile mantém o padrão. */
@media (min-width: 961px) {
  .legenda-itens span { white-space: nowrap; max-width: none; }
}
.legenda-pontos { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.9rem; }
.legenda-pontos i {
  width: 6px; height: 6px; border-radius: 980px;
  background: rgba(50, 103, 255, 0.22);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.45s ease;
}
.legenda-pontos i.on { width: 18px; background: var(--azul); }

/* ===================== Mockup: MacBook + iPhone reais ===================== */
.hero-stage { position: relative; perspective: 1700px; }
/* Banho azul atrás do mockup, para o palco não ficar branco no branco. */
.hero-stage::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 116%; height: 130%;
  /* Raios explícitos: com raio automático o segundo brilho não chegava a zero
     antes da borda esquerda e desenhava um corte reto no lugar do esfumaçado. */
  background:
    radial-gradient(ellipse 46% 42% at 50% 42%, rgba(50, 103, 255, 0.14) 0%, rgba(50, 103, 255, 0.06) 45%, rgba(50, 103, 255, 0) 100%),
    radial-gradient(ellipse 30% 25% at 34% 74%, rgba(50, 103, 255, 0.08) 0%, rgba(50, 103, 255, 0) 100%);
  pointer-events: none;
}
.mockup-area {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 41rem;
  margin: 0 auto;
  transform-style: preserve-3d;
}

.mac { position: relative; width: 100%; perspective: 1500px; }
.mac-lid {
  background: linear-gradient(180deg, #38383a, #2c2c2e 2%, #1d1d1f);
  border-radius: 14px 14px 2px 2px;
  padding: 10px 10px 0;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mac-lid::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 54px; height: 6px; border-radius: 0 0 4px 4px; background: #0d0d0d; }
.mac-lid::after { content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle, #1a3a1a 30%, #0a0a0a 70%); }
.mac-screen { background: #f0f2f7; border-radius: 4px 4px 0 0; width: 100%; padding-bottom: 62.5%; position: relative; overflow: hidden; }
.mac-screen::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(130deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 8%, rgba(255, 255, 255, 0.02) 18%, transparent 35%, transparent 100%); }
.mac-screen-inner { position: absolute; inset: 0; overflow: hidden; }
/* dobradiça: linha escura fina logo abaixo da tela (mesma largura da tela) */
.mac-hinge { height: 3px; margin: 0; background: linear-gradient(180deg, #141418, #34343a 50%, #1b1b1f); }
/* base vista DE FRENTE: borda frontal de alumínio (sem teclado), com entalhe e fim bem delimitado */
.mac-deck {
  position: relative;
  height: 12px;
  margin: 0 -9px;
  background: linear-gradient(180deg, #dadbde 0%, #c8c9cd 38%, #aeb0b5 74%, #9a9ca1 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.mac-deck::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 62px; height: 6px;
  background: linear-gradient(180deg, #a7a9ae, #c6c7cb);
  border-radius: 0 0 8px 8px;
}
.mac-deck::after {
  content: ""; position: absolute; bottom: 0; left: 1.5%; right: 1.5%; height: 1.5px;
  background: rgba(0, 0, 0, 0.16); border-radius: 2px;
}
.mac-lip { display: none; }
/* sombra no chão, para ver onde o Mac termina */
.mac-shadow { height: 26px; margin-top: 0; position: relative; }
.mac-shadow::before {
  content: ""; position: absolute; top: 1px; left: 5%; right: 5%; height: 10px;
  background: radial-gradient(ellipse 78% 100% at 50% 0%, rgba(0, 0, 0, 0.2) 0%, transparent 72%);
  filter: blur(4px);
}
.mac-shadow::after {
  content: ""; position: absolute; top: 5px; left: 11%; right: 11%; height: 18px;
  background: radial-gradient(ellipse 92% 100% at 50% 0%, rgba(0, 0, 0, 0.09) 0%, transparent 70%);
  filter: blur(10px);
}

.phone {
  position: absolute; bottom: 4%; right: -7%; width: 23%; z-index: 10;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.2)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12));
}
.phone-body { background: linear-gradient(135deg, #3a3a3c, #2c2c2e 30%, #1d1d1f 70%, #2a2a2c); border-radius: 17%/8%; padding: 3.5% 2.8%; position: relative; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.phone-body::before { display: none; }
.phone-body::after { content: ""; position: absolute; top: 16%; right: -1.8%; width: 1.5%; height: 7%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #2c2c2e, #3a3a3c); }
.phone-vol-up, .phone-vol-down { position: absolute; left: -1.8%; width: 1.5%; height: 5%; border-radius: 2px 0 0 2px; background: linear-gradient(270deg, #2c2c2e, #3a3a3c); }
.phone-vol-up { top: 17%; }
.phone-vol-down { top: 24%; }
.phone-screen { border-radius: 13%/6%; overflow: hidden; background: #f0f2f7; padding-bottom: 217%; position: relative; }
.phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 10%, rgba(255, 255, 255, 0.02) 20%, transparent 40%, transparent 100%); }
.phone-screen-inner { position: absolute; inset: 0; overflow: hidden; }

/* telas que se trocam sozinhas: a que entra demora um pouco mais que a que
   sai, então nunca existe um instante de tela vazia no meio da troca */
.sl { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 1, 1); }
.sl.on { opacity: 1; transition: opacity 0.75s cubic-bezier(0, 0, 0.2, 1); }
/* O LCP é a primeira tela do celular. Quando a segunda entra, o navegador a
   mede meio ponto percentual maior (arredondamento do recorte) e a elege como
   novo maior elemento, jogando o LCP de 0,1s para 4,3s. Meio por cento a menos
   mantém a primeira como a maior. Invisível: 0,7px numa tela de 134px. */
.phone .sl:not(:first-child) img { transform: scale(0.995); }
.sl img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ===================== Entrada do mockup =====================
   O texto aparece na hora: nada de opacity aqui, porque a tela do computador
   costuma ser o maior elemento pintado da dobra e escondê-la atrasaria o LCP.
   Só o movimento é animado, e ele é composto na GPU.

   O celular entra um pouco depois e vindo de mais longe. Esse atraso é o que
   dá profundidade: os dois aparelhos param de se mover como um bloco só. */
/* Sem scale: com a tela nascendo menor, o navegador registra o LCP com a área
   reduzida, e a primeira troca do carrossel vira um candidato maior, jogando
   o LCP para 4 segundos. Só deslocamento. */
.mockup-area { animation: entraMac 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes entraMac {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}
.phone { animation: entraPhone 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
@keyframes entraPhone {
  from { transform: translate3d(12px, 22px, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* A prova social inteira vive no hero, em .prova-mini. */

/* ===================== A dor (bloco escuro) ===================== */
.pain { background: #0a0a0e; color: #fff; padding: clamp(5rem, 10vw, 9rem) 1.5rem; }
.pain-wrap { max-width: 64rem; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pain-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; color: #7e8cff; margin-bottom: 1.1rem; }
.pain-title { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; color: #fff; }
.pain-title .soft { color: #5e5f6b; }

/* As cenas entram uma a uma, de cima para baixo, quando a lista aparece. */
.mess { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.cena {
  display: flex; align-items: center; gap: 0.9rem;
  background: #16161e; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px;
  padding: 1rem 1.15rem;
  color: #d7d8e0; font-size: 1rem; line-height: 1.4; letter-spacing: -0.01em;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}
.js .cena {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.18, 0.9, 0.32, 1.15);
}
.cena-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 10px;
  background: rgba(126, 140, 255, 0.12); color: #7e8cff;
}
.cena-ico svg { width: 1.15rem; height: 1.15rem; }
.mess-in .cena { opacity: 1; transform: none; }
.mess-in .cena:nth-child(1) { transition-delay: 0.04s; }
.mess-in .cena:nth-child(2) { transition-delay: 0.12s; }
.mess-in .cena:nth-child(3) { transition-delay: 0.2s; }
.mess-in .cena:nth-child(4) { transition-delay: 0.28s; }
.mess-in .cena:nth-child(5) { transition-delay: 0.36s; }
.mess-in .cena:nth-child(6) { transition-delay: 0.44s; }

/* O fecho é a virada de tom: uma frase só, depois de cinco, e por isso ela
   pode ser grande. Prepara a resposta que abre a dobra seguinte. */
.pain-fecho {
  max-width: 40rem; margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  text-align: center;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 500;
  line-height: 1.35; letter-spacing: -0.025em;
  color: #e4e5ec;
}

/* ===================== A verdade (a luz depois do escuro) =====================
   Degradê azulado saindo do bloco preto: separa esta dobra da seguinte, que
   também é clara, sem precisar de linha divisória. */
.verdade {
  background: linear-gradient(180deg, #f2f6ff 0%, var(--bg) 72%);
  padding: clamp(5rem, 9vw, 8rem) 1.5rem; text-align: center;
}
.verdade .container { max-width: 46rem; }
.verdade-titulo {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.032em; color: var(--ink); margin-bottom: 1.8rem;
}
.verdade-titulo .azul { color: var(--azul); }
/* O alívio ganha a própria linha, senão o "O" da frase seguinte fica
   pendurado no fim dela. */
.verdade-titulo .calma { display: block; }
.verdade-texto {
  max-width: 40rem; margin-left: auto; margin-right: auto;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.6;
  color: var(--ink-soft); letter-spacing: -0.01em;
}
.verdade-texto + .verdade-texto { margin-top: 1.1rem; }
.verdade-forte {
  margin: 2rem auto; max-width: 32rem;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.25;
  letter-spacing: -0.025em; color: var(--ink);
}

/* A frase que nomeia a categoria fecha a dobra. É a ideia que a página inteira
   sustenta, então ela ganha peso próprio e um respiro antes. */
.verdade-fecho {
  margin: 2.4rem auto 0; max-width: 34rem; padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 500; line-height: 1.4;
  letter-spacing: -0.02em; color: var(--ink);
}
.verdade-fecho .azul { color: var(--azul); font-weight: 600; }
@media (max-width: 820px) {
  .pain-wrap { grid-template-columns: 1fr; gap: 2.4rem; }
  .cena { font-size: 0.95rem; padding: 0.85rem 0.95rem; gap: 0.75rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); }
  .cena-ico { width: 2rem; height: 2rem; border-radius: 9px; }
  .verdade-forte { font-size: 1.25rem; margin: 1.8rem auto; }
}

/* reveal sutil ao rolar para dentro da seção */
/* Só esconde quem o script pode revelar depois. Sem JavaScript, tudo nasce
   visível em vez de a página ficar em branco. O --d escalona a entrada dentro
   de um mesmo bloco: rótulo, título, texto e mídia, um por vez. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js [data-reveal].in { opacity: 1; transform: none; transition-delay: var(--d, 0s); }

/* ===================== A virada: o Simplu resolve tudo ===================== */
/* Superfície própria: a dobra 3 acaba em branco e esta começa em branco, então
   sem uma troca de fundo as duas viram a mesma mancha. O leve azul também dá
   contraste aos cartões brancos da animação. */
.turn {
  padding: clamp(5rem, 9vw, 7.5rem) 1.5rem; text-align: center;
  /* os cacos flutuam além das bordas em telas estreitas */
  overflow-x: clip;
  background: #f5f8ff;
  border-top: 1px solid rgba(50, 103, 255, 0.07);
  border-bottom: 1px solid rgba(50, 103, 255, 0.07);
}
.turn .container { max-width: 60rem; }
.turn-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; color: var(--azul); margin-bottom: 1.2rem; }
.turn-title { margin: 0 auto; max-width: 16ch; font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.turn-title .azul { color: var(--azul); }
.turn-sub { margin: 1.6rem auto 0; max-width: 38rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; font-weight: 400; color: var(--ink-soft); }

/* A cena: os cacos da dobra escura pousam e viram a lista organizada.
   Estado padrão (sem JavaScript) já é o quadro final: lista montada e cacos
   fora do caminho. O .js inverte para poder animar. */
.cena-virada {
  /* Fator de espalhamento dos cacos. No celular eles precisam encolher para
     dentro da tela, e as posições vêm em pixels do HTML. */
  --f: 1;
  position: relative; display: flex; justify-content: center;
  margin: 2.4rem auto 0; padding: 1.25rem 0;
  /* Só o bastante para os cacos caberem em volta da lista. Antes sobrava um
     vazio grande em cima e embaixo depois que ela se montava. */
  min-height: 21rem;
}
.caco {
  /* Acima da lista: eles pousam por cima dela e somem ali. */
  position: absolute; top: 50%; left: 50%; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.1rem; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); color: var(--azul);
  box-shadow: 0 12px 28px rgba(16, 18, 40, 0.12);
  opacity: 0; transform: translate(-50%, -50%) scale(0.5);
}
.caco svg { width: 1.35rem; height: 1.35rem; }
.js .cena-virada .caco {
  opacity: 1;
  transform:
    translate(calc(-50% + var(--x) * var(--f)), calc(-50% + var(--y) * var(--f)))
    rotate(var(--rot));
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.5, 0, 0.2, 1);
}
/* Cada caco tem um destino: a coluna e a fileira do seu item na lista. Os
   cinco primeiros pousam à esquerda, os cinco últimos à direita, em vez de
   todos convergirem para o mesmo ponto. */
.caco:nth-of-type(-n + 5) { --ax: -132px; --axm: -68px; }
.caco:nth-of-type(n + 6) { --ax: 132px; --axm: 68px; }
.caco:nth-of-type(1), .caco:nth-of-type(6) { --ay: -110px; --aym: -100px; }
.caco:nth-of-type(2), .caco:nth-of-type(7) { --ay: -55px; --aym: -50px; }
.caco:nth-of-type(3), .caco:nth-of-type(8) { --ay: 0px; --aym: 0px; }
.caco:nth-of-type(4), .caco:nth-of-type(9) { --ay: 55px; --aym: 50px; }
.caco:nth-of-type(5), .caco:nth-of-type(10) { --ay: 110px; --aym: 100px; }

/* Ao entrar na tela, cada caco desliza até o seu lugar e some ali. */
.js .cena-virada.in .caco {
  opacity: 0;
  transform: translate(calc(-50% + var(--ax)), calc(-50% + var(--ay))) scale(0.45) rotate(0deg);
}
.js .cena-virada.in .caco:nth-of-type(1) { transition-delay: 0.04s; }
.js .cena-virada.in .caco:nth-of-type(2) { transition-delay: 0.1s; }
.js .cena-virada.in .caco:nth-of-type(3) { transition-delay: 0.16s; }
.js .cena-virada.in .caco:nth-of-type(4) { transition-delay: 0.22s; }
.js .cena-virada.in .caco:nth-of-type(5) { transition-delay: 0.28s; }
.js .cena-virada.in .caco:nth-of-type(6) { transition-delay: 0.34s; }
.js .cena-virada.in .caco:nth-of-type(7) { transition-delay: 0.4s; }
.js .cena-virada.in .caco:nth-of-type(8) { transition-delay: 0.46s; }
.js .cena-virada.in .caco:nth-of-type(9) { transition-delay: 0.52s; }
.js .cena-virada.in .caco:nth-of-type(10) { transition-delay: 0.58s; }

/* Sem moldura de celular: o que importa é o gesto da bagunça virando ordem.
   Duas colunas de cinco, e os cacos flutuam fora dessa caixa. */
.lista {
  position: relative; z-index: 2;
  width: 100%; max-width: 33rem; list-style: none;
  /* Preenche coluna a coluna: os cinco primeiros à esquerda, os cinco últimos
     à direita, em vez de zigue-zaguear entre as colunas. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 0.6rem;
  text-align: left;
  /* A cena é flex e estica os filhos: sem isto o grid distribui a altura toda
     entre as cinco fileiras e cada cartão fica com o dobro do tamanho. */
  align-self: center; align-content: center;
}
.linha {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 0.85rem; border-radius: 13px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(16, 18, 40, 0.07);
  font-size: 0.88rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink);
}
.linha-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 8px;
  background: rgba(50, 103, 255, 0.1); color: var(--azul);
}
.linha-ico svg { width: 0.95rem; height: 0.95rem; }
.js .cena-virada .linha {
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* As linhas acendem depois dos cacos pousarem, em cascata pelas duas colunas. */
.js .cena-virada.in .linha { opacity: 1; transform: none; }
.js .cena-virada.in .linha:nth-child(1) { transition-delay: 0.55s; }
.js .cena-virada.in .linha:nth-child(2) { transition-delay: 0.62s; }
.js .cena-virada.in .linha:nth-child(3) { transition-delay: 0.69s; }
.js .cena-virada.in .linha:nth-child(4) { transition-delay: 0.76s; }
.js .cena-virada.in .linha:nth-child(5) { transition-delay: 0.83s; }
.js .cena-virada.in .linha:nth-child(6) { transition-delay: 0.9s; }
.js .cena-virada.in .linha:nth-child(7) { transition-delay: 0.97s; }
.js .cena-virada.in .linha:nth-child(8) { transition-delay: 1.04s; }
.js .cena-virada.in .linha:nth-child(9) { transition-delay: 1.11s; }
.js .cena-virada.in .linha:nth-child(10) { transition-delay: 1.18s; }

/* Mecanismo e consequência */
.pares-bloco { max-width: 58rem; margin: clamp(2.5rem, 4.5vw, 3.5rem) auto 0; }
.pares-titulo {
  margin-bottom: 1.6rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; color: var(--azul);
}
.pares {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  text-align: left;
}
.par { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.par-faz { font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); letter-spacing: -0.01em; }
.par-ganha { margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }

.turn-cta { margin-top: clamp(2.75rem, 5vw, 3.75rem); }
.turn-cta .nota-cta { margin-top: 0.85rem; }

/* Abaixo de 1024px a lista de duas colunas ocupa a largura toda e não sobra
   lateral para os cacos. Eles passam a flutuar acima e abaixo dela, nas
   coordenadas --xm e --ym. */
@media (max-width: 1023px) {
  /* O --fy encolhe só o voo vertical dos cacos. A altura da cena precisa
     comportar o caco mais distante (170px do centro) mais meio caco, senão ele
     nasce por cima do texto vizinho: mexer em um sem o outro quebra a cena. */
  .cena-virada { --f: 1; --fy: 1; min-height: 23.5rem; }
  .js .cena-virada .caco {
    transform: translate(calc(-50% + var(--xm) * var(--f)), calc(-50% + var(--ym) * var(--fy))) rotate(var(--rot));
  }
  /* O destino também muda: a lista é mais estreita aqui. */
  .js .cena-virada.in .caco {
    transform: translate(calc(-50% + var(--axm)), calc(-50% + var(--aym))) scale(0.45) rotate(0deg);
  }
}

@media (max-width: 768px) {
  /* Voo mais curto (--fy) permite uma cena mais baixa, e o vazio em volta da
     lista cai pela metade sem cortar nenhum caco. */
  .cena-virada { padding: 0.5rem 0; margin-top: 1.5rem; --fy: 0.74; min-height: 20rem; }
  .caco { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
  .caco svg { width: 1.1rem; height: 1.1rem; }
  /* Colunas largas o suficiente para "Pós procedimento" caber em uma linha:
     se ele quebra, a lista cresce e encosta nos cacos de cima. */
  .lista { max-width: 21.5rem; gap: 0.4rem; }
  .linha { padding: 0.45rem 0.5rem; font-size: 0.75rem; gap: 0.45rem; border-radius: 10px; }
  .linha-ico { width: 1.45rem; height: 1.45rem; border-radius: 7px; }
  .linha-ico svg { width: 0.78rem; height: 0.78rem; }
  .pares { grid-template-columns: 1fr; gap: 1.5rem; max-width: 26rem; }
}

/* ===================== Funcionalidades: telas reais, peça por peça ===================== */
section[id], header[id] { scroll-margin-top: 5rem; }
.feats { padding: clamp(5rem, 9vw, 8rem) 1.5rem; background: var(--bg); }
.feats .container { max-width: 70rem; }
.feats-head { text-align: center; max-width: 42rem; margin: 0 auto; }
.feats-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; color: var(--azul); margin-bottom: 1.2rem; }
.feats-title { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.feats-title .azul { color: var(--azul); }
.feats-sub { margin: 1.4rem auto 0; max-width: 36rem; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.55; color: var(--ink-soft); }

.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: clamp(3.5rem, 7vw, 6rem); }
.feat-row--rev .feat-text { order: 2; }
.feat-label { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--azul); margin-bottom: 0.9rem; }
.feat-text h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.14; color: var(--ink); margin-bottom: 0.9rem; }
.feat-text p { font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); max-width: 30rem; }
.feat-shot { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(16, 18, 40, 0.13), 0 6px 16px rgba(16, 18, 40, 0.05); }
/* A caixa de mídia guarda a imagem hoje e o vídeo amanhã, no mesmo lugar.
   O vídeo entra por cima da imagem só depois de ter quadro para mostrar, então
   nunca existe um retângulo preto piscando. */
.midia { position: relative; aspect-ratio: 16 / 10; background: #eef1f6; }
.midia img, .midia video { display: block; width: 100%; height: auto; }
.midia video {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.4s ease;
}
.midia.rodando video { opacity: 1; }

.feats-more { margin-top: clamp(4rem, 8vw, 7rem); }
.feats-more-title { text-align: center; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2.2rem; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem 2rem; max-width: 60rem; margin: 0 auto; }
.more-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.more-item .mi-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; background: #eef3ff; color: var(--azul); display: flex; align-items: center; justify-content: center; }
.more-item .mi-ico svg { width: 18px; height: 18px; }
.more-item h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.15rem; }
.more-item p { font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }

/* A promessa da marca fecha a dobra: a pessoa acabou de ver o sistema por dentro. */
.feats-promise {
  text-align: center; margin: clamp(4rem, 8vw, 7rem) auto 0;
  font-size: clamp(1.4rem, 2.6vw, 2.05rem); font-weight: 500;
  letter-spacing: -0.025em; color: var(--ink);
}
.feats-promise .azul { color: var(--azul); }

@media (max-width: 820px) {
  /* No celular a sequência chama mais: rótulo, título, vídeo e só então a
     descrição. O feat-text vira "contents" para os filhos caírem na mesma
     pilha do vídeo e poderem ser reordenados por order. */
  .feat-row { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 3.5rem; }
  .feat-text { display: contents; }
  .feat-label { order: 1; margin-bottom: 0.5rem; align-self: flex-start; }
  .feat-text h3 { order: 2; margin-bottom: 0; }
  .feat-shot { order: 3; margin: 1.4rem 0; }
  .feat-text p { order: 4; max-width: none; }
  .more-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .feats-promise { margin-top: 3.6rem; }
}
@media (max-width: 540px) {
  .more-grid { grid-template-columns: 1fr; }
}

/* ===================== Fundador ===================== */
.founder { padding: clamp(5rem, 9vw, 8rem) 1.5rem; background: #0a0a0e; }
.founder .container {
  max-width: 64rem; display: grid;
  grid-template-columns: 0.85fr 1fr;
  grid-template-areas: "foto cabeca" "foto corpo";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.founder-head { grid-area: cabeca; }
.founder-photo { grid-area: foto; align-self: center; margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
.founder-text { grid-area: corpo; }
/* A foto é 500x750. O quadrado corta a altura, e o object-position segura o
   rosto no enquadramento em vez de centralizar o tronco. */
.founder-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%; }
.founder-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; color: #7e8cff; margin-bottom: 1rem; }
.founder-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; color: #fff; margin-bottom: 1.3rem; }
.founder-text p { font-size: 1.08rem; line-height: 1.6; color: #b0b1bb; margin-bottom: 1rem; }
/* Fecho do bloco: é a frase que resume o argumento, não uma assinatura. O
   espaço em branco separa melhor que um fio, e deixa a frase respirar.
   Precisa da mesma especificidade de .founder-text p, senão o tamanho do
   parágrafo comum vence e a frase encolhe. */
.founder-text .founder-sign {
  margin-top: 2.6rem; margin-bottom: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600;
  letter-spacing: -0.028em; line-height: 1.2; color: #fff;
}
.founder-text .founder-sign span { color: #7e8cff; }
@media (max-width: 820px) {
  /* No celular a ordem vira sobrancelha, nome, foto e texto. Aqui o nome cola
     mais na foto (o gap de baixo do nome sai) e o texto ganha ar depois dela. */
  .founder .container { grid-template-columns: 1fr; grid-template-areas: "cabeca" "foto" "corpo"; }
  .founder-title { margin-bottom: 0; }
  .founder-head { margin-bottom: 1.5rem; }
  .founder-text { margin-top: 2rem; }
  .founder-photo { max-width: 20rem; }
}

/* ===================== Casos de uso =====================
   Prova social depois do fundador. Cada caso é uma linha, foto de um lado e
   história do outro, alternando o lado a cada caso. No celular empilha, foto em
   cima. Cada linha sobe sozinha ao entrar na tela (data-reveal), então aparecem
   uma de cada vez. */
.casos { padding: clamp(4rem, 8vw, 7rem) 1.5rem; background: var(--bg); }
.casos .container { max-width: 58rem; }
.casos-head { text-align: center; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.casos-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; color: var(--azul); margin-bottom: 1rem; }
.casos-title { font-size: clamp(1.9rem, 3.8vw, 2.7rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.casos-title .azul { color: var(--azul); }

.casos-lista { display: flex; flex-direction: column; gap: clamp(2.4rem, 5vw, 4rem); }
.caso { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.caso:nth-child(even) { flex-direction: row-reverse; }

.caso-foto { flex: none; width: clamp(7rem, 15vw, 10.5rem); margin: 0; }
.caso-foto img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 22px; display: block; box-shadow: 0 14px 34px rgba(16, 18, 40, 0.1);
}

.caso-nome { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.caso-clinica { margin-top: 0.15rem; font-size: 0.92rem; font-weight: 500; color: var(--azul); }
.caso-problema { margin-top: 0.9rem; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.caso-solucao { margin-top: 0.7rem; font-size: 1rem; line-height: 1.6; color: var(--ink); font-weight: 500; }

@media (max-width: 680px) {
  .caso, .caso:nth-child(even) { flex-direction: column; text-align: center; align-items: center; gap: 1.2rem; }
  .caso-foto { width: 6.4rem; }
  .caso-problema, .caso-solucao { max-width: 30rem; }
}

/* ===================== O custo de continuar =====================
   Seção escura inteira, sem card. Emenda no CTA final, que tem o mesmo fundo:
   o padding de baixo é curto de propósito, para os dois lerem como um bloco só.
   O azul de marca não tem contraste suficiente sobre preto, então aqui vale o
   mesmo #7e8cff do bloco do fundador. */
.custo { padding: clamp(4.5rem, 8vw, 7rem) 1.5rem clamp(2.5rem, 5vw, 4rem); background: #0a0a0e; }
.custo .container { max-width: 52rem; }
.custo-corpo { max-width: 42rem; margin: 0 auto; }
.custo-head { text-align: center; margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem); }
.custo-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; color: #7e8cff; margin-bottom: 1.1rem; }
.custo-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1; color: #fff;
}
.custo-title .azul { color: #7e8cff; }
.custo-linha { font-size: 1.05rem; line-height: 1.6; color: #b0b1bb; margin-bottom: 1rem; }
/* As duas contas: dois palavrões grandes, destacados bem acima do resto. */
.custo-intro { font-size: 1.05rem; line-height: 1.6; color: #b0b1bb; margin-bottom: 0.3rem; }
.custo-duas { display: flex; align-items: baseline; gap: 0.8rem; margin: 0.2rem 0 1.9rem; }
.custo-duas span { font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: #fff; }
.custo-duas .custo-mais { color: #7e8cff; font-weight: 600; }
.custo-tempo-forte { color: #fff; font-weight: 600; font-size: 1.15rem; }
.custo-linha strong { color: #fff; font-weight: 600; }

/* A conta em degraus: cada passo é uma linha curta, e o número herói fecha. */
.custo-passo { font-size: 1.05rem; line-height: 1.6; color: #b0b1bb; margin-bottom: 0.6rem; }
.custo-passo strong { color: #fff; font-weight: 600; }
.custo-hero {
  margin: 1.6rem 0 2rem; padding: 1.6rem 1.5rem;
  border-radius: 16px; border: 1px solid rgba(126, 140, 255, 0.28);
  background: rgba(126, 140, 255, 0.08); text-align: center;
}
.custo-hero strong {
  display: block; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: #fff;
}
.custo-hero span { display: block; margin-top: 0.55rem; font-size: 1rem; color: #b0b1bb; }

.custo-lista { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.custo-lista li {
  position: relative; padding-left: 1.6rem; margin-bottom: 0.85rem;
  font-size: 1rem; line-height: 1.55; color: #b0b1bb;
}
.custo-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.45rem; height: 0.45rem; border-radius: 2px; background: #7e8cff;
}

.custo-fecho {
  margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; color: #d7d8df;
}
.custo-fecho strong { color: #fff; font-weight: 600; }

/* ===================== Suporte ===================== */
.support { padding: clamp(5rem, 9vw, 8rem) 1.5rem; background: var(--bg-soft); text-align: center; }
.support .container { max-width: 64rem; }
.support-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul); margin-bottom: 1.1rem; }
.support-title { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.support-title .azul { color: var(--azul); }
.support-sub { margin: 1.3rem auto 0; max-width: 38rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); }
/* Cinco passos agora, não quatro: com repeat(4) o último caía sozinho numa
   segunda linha. */
.timeline { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.tl-node { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl-node:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: 50%; width: calc(100% + 1.2rem); height: 2px; background: linear-gradient(90deg, var(--azul), rgba(50, 103, 255, 0.28)); z-index: 0; }
.tl-dot { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 2px solid var(--azul); color: var(--azul); display: flex; align-items: center; justify-content: center; }
.tl-dot svg { width: 22px; height: 22px; }
.tl-body { margin-top: 1.2rem; }
.tl-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 0.4rem; }
.tl-text { font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); max-width: 13rem; margin: 0 auto; }
.tl-node[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
.tl-node[data-reveal]:nth-child(3) { transition-delay: 0.2s; }
.tl-node[data-reveal]:nth-child(4) { transition-delay: 0.3s; }
.tl-node[data-reveal]:nth-child(5) { transition-delay: 0.4s; }
@media (max-width: 720px) {
  .timeline { grid-template-columns: 1fr; gap: 0; }
  .tl-node { flex-direction: row; align-items: flex-start; text-align: left; gap: 1.1rem; padding-bottom: 2.2rem; }
  .tl-node:not(:last-child)::after { top: 22px; left: 21px; width: 2px; height: 100%; background: linear-gradient(180deg, var(--azul), rgba(50, 103, 255, 0.28)); }
  .tl-dot { margin: 0; }
  .tl-body { margin-top: 0; padding-top: 0.35rem; }
  .tl-text { max-width: none; margin: 0; }
}

/* ===================== Bônus (ancoragem antes do preço) ===================== */
.bonus { padding: clamp(5rem, 9vw, 7.5rem) 1.5rem; background: #f5f8ff; border-top: 1px solid rgba(50, 103, 255, 0.07); }
.bonus .container { max-width: 68rem; }
.bonus-head { text-align: center; max-width: 44rem; margin: 0 auto; }
.bonus-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul); margin-bottom: 1.1rem; }
.bonus-title { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
.bonus-title .azul { color: var(--azul); }
.bonus-sub { margin: 1.3rem auto 0; max-width: 38rem; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; color: var(--ink-soft); }

.bonus-lista {
  list-style: none; margin: clamp(2.6rem, 4.5vw, 3.6rem) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
}
.bonus-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 1.9rem 1.6rem 1.6rem;
  box-shadow: 0 12px 30px rgba(16, 18, 40, 0.06);
}
.bonus-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; border-radius: 14px;
  background: rgba(50, 103, 255, 0.1); color: var(--azul);
  margin-bottom: 1.2rem;
}
.bonus-ico svg { width: 1.35rem; height: 1.35rem; }
.bonus-num {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--azul);
  margin-bottom: 0.55rem;
}
.bonus-nome {
  font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
  color: var(--ink); margin-bottom: 0.9rem;
}
.bonus-card p { font-size: 0.94rem; line-height: 1.55; color: var(--ink-soft); }
.bonus-card p + p { margin-top: 0.7rem; }

/* O preço encosta no rodapé do card: com textos de tamanhos diferentes, as três
   linhas de valor ficam alinhadas entre si. */
.bonus-card .bonus-preco {
  margin-top: auto; padding-top: 1.3rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
}
.bonus-card .bonus-de {
  font-size: 0.88rem; font-weight: 500; color: var(--muted);
  text-decoration: line-through; text-decoration-color: rgba(154, 155, 164, 0.75);
}
.bonus-card .bonus-por { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--azul); }

.bonus-fecho {
  margin: clamp(2.4rem, 4vw, 3.2rem) auto 0; max-width: 42rem; text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.55; color: var(--ink-soft);
}
.bonus-fecho strong { display: block; margin-bottom: 0.4rem; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.bonus-cta { margin-top: clamp(2.2rem, 4vw, 3rem); text-align: center; }
.bonus-cta .nota-cta { margin-top: 0.85rem; }

@media (max-width: 900px) {
  .bonus-lista { grid-template-columns: 1fr; max-width: 32rem; }
  .bonus-card { padding: 1.6rem 1.3rem 1.4rem; }
  .bonus-card .bonus-preco { padding-top: 1.1rem; }

  /* Empilhados, os cards são lidos um de cada vez: o que está no meio da tela
     acende. Só apaga se o script estiver vivo para acender de volta, e o
     :not(.active) protege o card aceso de qualquer regra que venha depois. */
  .js .bonus-card { transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease; }
  .js .bonus-card:not(.active) {
    opacity: 0.38; transform: scale(0.985);
    box-shadow: 0 6px 16px rgba(16, 18, 40, 0.04);
  }
  .js .bonus-card.active { box-shadow: 0 16px 36px rgba(16, 18, 40, 0.09); }
}

/* ===================== Preço ===================== */
.price { padding: clamp(5rem, 9vw, 8rem) 1.5rem; background: var(--bg); text-align: center; }
.price .container { max-width: 56rem; }
.price-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul); margin-bottom: 1.1rem; }
.price-title { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.price-title .azul { color: var(--azul); }
.price-sub { margin: 1.3rem auto 0; max-width: 36rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); }
.price-bloco { max-width: 30rem; margin: 2.6rem auto 0; }

/* Chave mensal/anual: dois botões dentro de um trilho, com uma pastilha que
   desliza por baixo do escolhido. Sem JavaScript ela não trocaria nada, então
   nem aparece: o card já nasce no anual. */
.plano-chave { display: none; }
.js .plano-chave {
  position: relative; display: inline-flex; gap: 0.25rem;
  padding: 0.3rem; margin-bottom: 1.6rem;
  background: #f2f4f9; border-radius: 980px;
}
.plano-op {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; /* alvo de toque confortável no celular */
  padding: 0.6rem 1.15rem; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-soft); border-radius: 980px;
  transition: color 0.3s ease;
}
/* O plano ativo é a pílula azul, para o toggle ficar evidente à primeira vista. */
.plano-op.on { color: #fff; }
.plano-op.on::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--azul); border-radius: 980px;
  box-shadow: 0 1px 3px rgba(50, 103, 255, 0.35), 0 6px 16px rgba(50, 103, 255, 0.22);
}
.plano-eco {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--azul); background: rgba(50, 103, 255, 0.1);
  padding: 0.2rem 0.45rem; border-radius: 980px;
}
/* No botão azul, a etiqueta de desconto vira branca sobre um véu claro. */
.plano-op.on .plano-eco { background: rgba(255, 255, 255, 0.24); color: #fff; }

.price-card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 24px; padding: 2.5rem 2rem 2.2rem;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 24px 50px rgba(16, 18, 40, 0.1);
}
.price-value { font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.price-value { font-size: clamp(2.9rem, 5.4vw, 3.6rem); }
.price-cur { font-size: 0.42em; font-weight: 600; vertical-align: 0.62em; margin-right: 0.08em; }
.price-per { font-size: 0.3em; font-weight: 500; color: var(--muted); letter-spacing: -0.01em; }
/* O número troca com um leve fade: sem isso ele pisca de um valor para o outro. */
.price-value [data-preco] { display: inline-block; transition: opacity 0.18s ease, transform 0.24s ease; }
.price-card.trocando .price-value [data-preco] { opacity: 0; transform: translateY(-6px); }

/* Largura cheia nos dois: como o card centraliza os filhos, eles encolhiam
   para o tamanho do texto e a nota do mensal quebrava em duas linhas,
   fazendo o card crescer 18px na troca. */
.price-note { width: 100%; font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.7rem; min-height: 1.45rem; }
.price-eco {
  width: 100%; margin-top: 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--azul);
  min-height: 1.35rem; /* o espaço fica reservado: no mensal ela some e o card não pula */
}

.price-list { list-style: none; width: 100%; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.price-list li { position: relative; padding-left: 1.9rem; font-size: 0.94rem; line-height: 1.45; color: var(--ink); }
.price-list li::before { content: ""; position: absolute; left: 0.4rem; top: 0.22em; width: 0.42rem; height: 0.78rem; border: solid var(--azul); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Recap dos bônus: separado da lista do plano por uma linha, para ler como
   "e ainda vem isso", não como mais um item do plano. */
.price-inclui { width: 100%; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); text-align: left; }

/* A urgência honesta do preço travado, embaixo do card. */
.price-trava { max-width: 34rem; margin: 1.5rem auto 0; font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }
.price-trava strong { color: var(--ink); font-weight: 600; }

.price-cta { margin-top: 1.6rem; width: 100%; }

/* Saída para outra prontidão. Link, não botão: não disputa o clique principal.
   O teste grátis de 15 dias é a própria reversão de risco, então não há linha de
   garantia separada. */
.price-secundario { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); width: 100%; font-size: 0.9rem; color: var(--ink-soft); }
/* O nome da oferta não pode partir no meio ("Teste grátis por 15" e "dias"). */
.price-secundario a { color: var(--azul-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.price-secundario a:hover { color: var(--azul); }

/* Borda azul: o card é a única mancha de cor da dobra, sem pesar como
   um bloco cheio. */
.price-card--borda {
  border: 2px solid var(--azul);
  box-shadow: 0 26px 56px rgba(50, 103, 255, 0.2);
}

.price-guarantee { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 2.6rem; padding: 0.95rem 1.5rem; background: #f4f7ff; border: 1px solid rgba(50, 103, 255, 0.14); border-radius: 16px; font-size: 1rem; line-height: 1.45; color: var(--ink); text-align: left; }
.price-guarantee strong { font-weight: 600; }
.price-guarantee .nota-ico { color: var(--azul); flex: none; }
.price-guarantee .nota-ico svg { width: 1.45rem; height: 1.45rem; }
@media (max-width: 560px) {
  .price-card { padding: 2rem 1.4rem 1.8rem; }
  /* Agora nota e economia cabem em uma linha nos dois planos, então a reserva é
     de uma linha só e o espaçamento fica idêntico ao trocar mensal e anual. */
  .price-note { min-height: 1.45rem; }
  .price-eco { min-height: 1.35rem; }
  .plano-op { padding: 0.55rem 0.9rem; font-size: 0.88rem; }
  .price-guarantee { align-items: flex-start; }
}

/* ===================== Demonstração =====================
   O último pedido, com o respiro de uma abertura de keynote: um título grande,
   uma linha de apoio, o botão. Nada mais, para o clique ser o único destino do
   olho. Fundo azulado só para separar do preço branco acima. */
.demo { padding: clamp(5rem, 12vw, 9rem) 1.5rem; background: #f5f8ff; text-align: center; }
.demo .container { max-width: 40rem; }
.demo-title {
  font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1.08; color: var(--ink);
}
.demo-title .azul { color: var(--azul); }
.demo-sub {
  margin: clamp(1.3rem, 2.5vw, 1.8rem) auto 0; max-width: 34rem;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55; color: var(--ink-soft);
}
.demo-btn { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }
.demo-micro { margin-top: 1.1rem; font-size: 0.92rem; color: var(--ink-soft); }

/* ===================== FAQ ===================== */
.faq { padding: clamp(5rem, 9vw, 8rem) 1.5rem; background: var(--bg); }
.faq .container { max-width: 46rem; }
.faq-head { text-align: center; margin-bottom: 2.6rem; }
.faq-eyebrow { display: block; font-size: 0.85rem; font-weight: 600; color: var(--azul); margin-bottom: 1.1rem; }
.faq-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.35rem 0; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; flex: none; width: 18px; height: 18px; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--azul); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.faq-mark::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-mark::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); opacity: 0; }
.faq-answer { padding: 0 0 1.45rem; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 42rem; }

/* ===================== Responsivo ===================== */
@media (max-width: 1100px) { .hero-grid { gap: 2.25rem; } }

@media (max-width: 960px) {
  .hero { padding: 3.5rem 1.5rem 1.5rem; text-align: center; }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-copy { max-width: 38rem; margin: 0 auto; }
  .hero .sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  /* No celular cada frase fica na sua linha, quebrando no ponto final. */
  .nota-cta span { display: block; }
  .prova-mini { justify-content: center; }
  .mockup-area { max-width: 32rem; }
  .mac-lid { padding: 7px 7px 0; }
}

@media (max-width: 560px) {
  /* O tráfego é de celular e a barra do navegador come a dobra: o botão precisa
     fechar acima de 640px. Dentro desse teto, cada respiro abaixo é o máximo
     que cabe sem empurrar o botão para fora. */
  .hero { padding: 2.4rem 1.5rem 1.5rem; }
  .hero h1 { font-size: 1.82rem; line-height: 1.16; letter-spacing: -0.028em; margin-bottom: 1.5rem; }
  .hero .sub { font-size: 0.98rem; line-height: 1.62; margin-bottom: 2.1rem; }
  .tarja { font-size: 0.64rem; letter-spacing: 0.06em; padding: 0.6rem 1.25rem; }
  .prova-mini { gap: 0.5rem; margin-bottom: 1.6rem; }
  .prova-fotos img { width: 2.05rem; height: 2.05rem; }
  .prova-frase { font-size: 0.8rem; }
  .nota-cta { font-size: 0.82rem; }
  .hero-cta { flex-direction: column; gap: 0.7rem; margin-bottom: 0.95rem; }
  .hero-cta .btn-lg { width: 100%; max-width: 21rem; }
  .mockup-area { max-width: 23rem; }
  .phone { right: -4%; width: 25%; }
  .mac-lid { padding: 5px 5px 0; border-radius: 11px 11px 2px 2px; }
}

/* ===================== Falar com a equipe =====================
   Última saída da página, para a dúvida que não vale uma reunião. */
.zap { padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(4.5rem, 8vw, 6.5rem); background: var(--bg); text-align: center; border-top: 1px solid var(--line); }
.zap .container { max-width: 40rem; }
.zap-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.zap-sub { margin: 1rem auto 2rem; max-width: 32rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }

/* Verde oficial do WhatsApp: o botão precisa ser reconhecido antes de ser lido. */
.btn-zap { background: #25d366; color: #fff; max-width: 100%; }
.btn-zap:hover { background: #1fbb58; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(37, 211, 102, 0.26), 0 10px 26px rgba(37, 211, 102, 0.28); }
.zap-ico { display: inline-flex; flex: none; }
.zap-ico svg { width: 1.35rem; height: 1.35rem; }

/* No celular o texto é longo e o botão tem white-space: nowrap, então ele cresce
   além da coluna e encosta na direita. Aqui ele passa a caber na largura e o
   texto pode quebrar, centralizado como os outros CTAs. */
@media (max-width: 560px) {
  .btn-zap { width: 100%; max-width: 22rem; white-space: normal; line-height: 1.25; padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ===================== Rodapé =====================
   Claro, não preto: a marca não tem bloco escuro chapado. Um cinza sutil separa
   do branco da seção de WhatsApp logo acima. */
.rodape { padding: clamp(3rem, 5vw, 4rem) 1.5rem clamp(2.5rem, 4vw, 3rem); background: #f4f5f8; }
.rodape .container { max-width: 60rem; }
.rodape-topo {
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 1.5rem;
  padding-bottom: 1.8rem; border-bottom: 1px solid var(--line);
}
/* A wordmark encosta na borda esquerda do container, igual ao texto abaixo.
   Como o PNG é recortado rente, o início do nome fica alinhado de verdade. */
.rodape-logo { width: 7.4rem; height: auto; display: block; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.rodape-links a {
  font-size: 0.92rem; color: var(--ink-soft); text-decoration: none;
  transition: color 0.2s ease;
}
.rodape-links a:hover { color: var(--azul); }
.rodape-insta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-left: auto; /* empurra para a direita, ao lado dos links legais */
  font-size: 0.92rem; color: var(--ink-soft); transition: color 0.2s ease;
}
.rodape-insta:hover { color: var(--azul); }
.rodape-insta svg { width: 1.05rem; height: 1.05rem; }

.rodape-empresa { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.rodape-empresa p { font-size: 0.85rem; line-height: 1.5; color: #6d6e77; }

/* Texto legal: menor que o resto, mas ainda acima do mínimo de contraste. */
.rodape-disclaimer {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: 0.78rem; line-height: 1.6; color: var(--ink-soft); max-width: 52rem;
}

@media (max-width: 560px) {
  /* Linha 1: logo à esquerda e Instagram à direita. Linha 2: os links legais
     juntos. O flex-basis de 100% força o nav a descer inteiro. */
  .rodape-topo { row-gap: 1rem; }
  .rodape-links { flex-basis: 100%; gap: 0.6rem 1.4rem; justify-content: space-between; }
  .rodape-empresa { flex-direction: column; gap: 0.3rem; }
}

/* ===================== Respiro por altura de tela =====================
   Os paddings cresciam com a LARGURA (vw), então um notebook largo e baixo, como
   o MacBook Air de 13, ganhava o mesmo respiro de um monitor grande e as seções
   estouravam a tela. Aqui o respiro cresce com a ALTURA disponível.

   O piso de 4.5rem é a regra que manda: primeiro o ar em volta do texto, depois
   a vontade de caber na tela. Uma seção que rola um pouco é melhor do que uma
   seção espremida.

   Vale só no computador: no celular o padding do breakpoint continua mandando. */
@media (min-width: 961px) {
  .pain, .verdade, .turn, .feats, .founder, .support, .bonus, .price, .faq {
    padding-top: clamp(5.25rem, 10vh, 9rem);
    padding-bottom: clamp(5.25rem, 10vh, 9rem);
  }
  /* A conta emenda no CTA escuro: respiro cheio em cima, curto embaixo. */
  .custo { padding-top: clamp(5rem, 9.5vh, 8rem); padding-bottom: clamp(2.75rem, 5vh, 4.5rem); }
  .demo { padding-top: clamp(5rem, 9vh, 7.5rem); padding-bottom: clamp(5rem, 9vh, 7.5rem); }
  .zap { padding-top: clamp(4rem, 7vh, 6rem); padding-bottom: clamp(4.5rem, 8vh, 7rem); }
}

/* Telas de 360px ou menos. Aqui nada pode contar com o recorte do overflow:
   o Safari antigo não conhece "clip" e a página começaria a arrastar para o
   lado. Os elementos precisam caber de verdade. */
@media (max-width: 360px) {
  .mockup-area { max-width: 17rem; }
  .phone { right: -2%; width: 25%; }
  .cena-virada { --f: 0.8; }
  .lista { max-width: 17rem; }
  .prova-fotos img { width: 1.9rem; height: 1.9rem; }
  .prova-frase { font-size: 0.74rem; }
  /* "Agendar a minha demonstração" não cabe em uma linha aqui, e o botão tem
     white-space: nowrap. Sem soltar a quebra, ele estoura a tela. */
  .btn-lg { font-size: 0.92rem; padding: 0.9rem 1.1rem; white-space: normal; line-height: 1.25; }
  .demo .btn-lg, .turn-cta .btn-lg, .bonus-cta .btn-lg { width: 100%; max-width: 20rem; }
}

/* ===================== Pop-up de captação da demonstração =====================
   O único pedido da página vira um formulário rápido de nome e WhatsApp. Dois
   passos no mesmo card: o formulário e a confirmação. */
body.sem-scroll { overflow: hidden; }

.lead-modal {
  position: fixed; left: 0; top: 0; z-index: 100;
  width: 100%; height: 100vh; height: 100dvh;
  display: flex; justify-content: center;
  /* safe center: centraliza o card, mas se ele for mais alto que o espaço
     visível, encosta no topo em vez de cortar a parte de cima (aí a rolagem
     interna do card assume). O lp.js encolhe a altura deste container para o
     tamanho visível quando o teclado abre, então o card recentraliza acima
     dele. */
  align-items: safe center;
  padding: 1rem;
  background: rgba(14, 15, 19, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lead-modal.aberto { opacity: 1; visibility: visible; }

.lead-card {
  position: relative;
  width: 100%; max-width: 27rem;
  background: var(--bg);
  border-radius: 22px;
  padding: 2.1rem 1.9rem 1.7rem;
  box-shadow: 0 30px 80px rgba(14, 15, 19, 0.35);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  /* Nunca mais alto que o espaço visível: o card rola dentro de si mesmo e o
     botão de enviar nunca fica escondido atrás do teclado. */
  max-height: calc(100% - 1rem);
  overflow-y: auto;
}
.lead-modal.aberto .lead-card { transform: none; }

.lead-x {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.lead-x:hover { background: var(--line); color: var(--ink); }
.lead-x svg { width: 1.1rem; height: 1.1rem; }
/* Colchão invisível: o alvo do dedo chega a 44px sem o círculo crescer. */
.lead-x::after { content: ""; position: absolute; inset: -6px; }

.lead-eyebrow { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--azul); margin-bottom: 0.7rem; }
.lead-titulo { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); }
.lead-sub { margin-top: 0.6rem; font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); }

.lead-form { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.9rem; }
.lead-campo { display: flex; flex-direction: column; gap: 0.4rem; }
.lead-campo > span { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.lead-campo input {
  width: 100%;
  font-family: inherit; font-size: 16px; /* 16px trava o zoom do iOS no foco */
  color: var(--ink);
  padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--bg-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lead-campo input::placeholder { color: var(--muted); }
.lead-campo input:focus {
  outline: none; border-color: var(--azul); background: var(--bg);
  box-shadow: 0 0 0 3px rgba(50, 103, 255, 0.14);
}
.lead-erro { font-size: 0.8rem; font-weight: 500; color: #d64541; }

/* Estado de erro bem visível: borda vermelha no campo e nos botões de escolha. */
.lead-campo input.invalido { border-color: #d64541; background: #fff; }
.lead-campo input.invalido:focus { box-shadow: 0 0 0 3px rgba(214, 69, 65, 0.16); }
.lead-ops.invalido .lead-op { border-color: #d64541; }

/* Escolha rápida: dois botões de um toque, sem digitar. */
.lead-ops { display: flex; gap: 0.6rem; }
.lead-op {
  flex: 1; padding: 0.8rem 0.5rem;
  font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft);
  background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.lead-op:hover { border-color: var(--azul); }
.lead-op.on { border-color: var(--azul); background: rgba(50, 103, 255, 0.08); color: var(--azul); }

.lead-enviar { width: 100%; margin-top: 0.35rem; }
.lead-enviar:disabled { opacity: 0.65; cursor: default; transform: none; box-shadow: none; }

.lead-micro {
  margin-top: 0.35rem; text-align: center;
  font-size: 0.85rem; color: var(--muted);
}

/* Passo 2: confirmação */
.lead-passo[data-passo="ok"] { text-align: center; }
.lead-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; margin-bottom: 1rem;
  border-radius: 50%; background: rgba(50, 103, 255, 0.12); color: var(--azul);
}
.lead-check svg { width: 1.7rem; height: 1.7rem; }
/* Cartão do vendedor no estilo do WhatsApp: avatar redondo, nome em negrito,
   subtítulo cinza do WA e o logo verde. Paleta do design system do WhatsApp. */
.wa-cartao {
  display: flex; align-items: center; gap: 0.8rem; text-align: left;
  margin: 1.3rem 0 0.2rem; padding: 0.7rem 0.85rem;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 6px 18px rgba(16, 18, 40, 0.06);
}
.wa-foto {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  object-fit: contain; box-sizing: border-box; padding: 8px;
  background: #3267ff;
}
.wa-info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0.1rem; }
.wa-nome { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: #111b21; }
.wa-status { font-size: 0.85rem; color: #667781; }
.wa-logo { flex: none; color: #25d366; display: flex; }
.wa-logo svg { width: 1.7rem; height: 1.7rem; }

.lead-passo[data-passo="ok"] .btn-zap { width: 100%; margin-top: 1.3rem; }
.lead-fechar-txt {
  display: block; margin: 0.6rem auto 0; min-height: 44px; padding: 0.4rem 1rem;
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--muted);
}
.lead-fechar-txt:hover { color: var(--ink); }

/* No celular o card fica central também, com um pouco menos de folga interna.
   A headline usa fonte menor para não comer a tela quando o teclado sobe. */
@media (max-width: 560px) {
  .lead-card { padding: 1.9rem 1.4rem 1.6rem; }
  .lead-titulo { font-size: 1.2rem; line-height: 1.22; }
}

/* Quem pediu menos movimento no aparelho recebe o card sem o deslize. */
@media (prefers-reduced-motion: reduce) {
  .lead-modal, .lead-card { transition: opacity 0.2s ease, visibility 0.2s ease; }
  .lead-card { transform: none; }
}

/* ===================== Botão flutuante de WhatsApp =====================
   Aparece depois que a pessoa desceu metade da página (o lp.js liga o .on):
   quem chegou até ali e não agendou pode estar com uma dúvida travando. */
.zap-flutuante {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(16, 24, 40, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.9);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.zap-flutuante svg { width: 1.9rem; height: 1.9rem; }
.zap-flutuante.on { opacity: 1; visibility: visible; transform: none; }
.zap-flutuante.on:hover { transform: translateY(-2px); }
/* Com o pop-up aberto, o flutuante sai da frente. */
body.sem-scroll .zap-flutuante { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .zap-flutuante { transition: opacity 0.2s ease, visibility 0.2s ease; transform: none; }
}

/* subtexto dos casos */
.casos-sub { margin: 1rem auto 0; max-width: 40rem; font-size: clamp(1rem,1.5vw,1.15rem); line-height:1.5; color: var(--ink-soft, #5b6472); text-align: center; text-wrap: balance; }