/* ═══════════════════════════════════════════════════════════════════════════
   fulcro ai — home v8, calibrada nas 3 referências do dono (Behance 18/08):
   grotesk gigante e apertada · base cinza-clara neutra · preto como MOLDURA
   (cards, dobras cinematográficas), nunca como tema · verde-neon em UMA
   palavra/acento · tags-pílula · números enormes · muito ar.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --fundo: #FAFAF8;         /* quase branco: o mesmo chão do app */
  --cartao: #F2F4ED;        /* painel suave, como os cards do app */
  --branco: #FFFFFF;
  --tinta: #141613;         /* Preto Carvão: texto e molduras */
  --noite: #171C0A;         /* verde-noite: a dobra cinematográfica da marca */
  --texto-2: #5C6055;
  --texto-claro: #EDEEE9;
  --texto-claro-2: #9A9E93;
  --neon: #C8D900;          /* Verde Energia: a palavra, o botão, a seta */
  --verde: #86C900;
  --linha: #E6E8E0;
  --fonte: 'Inter', sans-serif;
  --fonte-micro: 'Roboto Condensed', sans-serif;
  --raio: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* tipografia: grotesk grande, apertada, caixa normal */
h1, h2 { font-family: var(--fonte); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; }
h1 { font-size: clamp(34px, 4vw, 56px); }
h2 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.03em; line-height: 1.08; }
h3 { font-family: var(--fonte); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.sub { color: var(--texto-2); font-size: 17px; max-width: 500px; line-height: 1.6; }
.centro { text-align: center; }
.centro .sub { margin-inline: auto; }
.neon-palavra { color: var(--verde); }
.escuro .neon-palavra { color: var(--neon); }

/* micro-rótulo em caixa alta (a "tag" das referências) */
.micro {
  font-family: var(--fonte-micro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2);
}
.pilula {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--texto-2);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 999px;
  padding: 5px 12px;
}
.escuro .pilula { background: transparent; border-color: #2A2C27; color: var(--texto-claro-2); }

/* botões: pílula preta (claro) / neon (escuro) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fonte); font-weight: 700; font-size: 15px;
  letter-spacing: 0; text-decoration: none;
  border: 0; border-radius: 14px; padding: 14px 24px;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn--preto { background: var(--neon); color: var(--tinta); } /* primário = Verde Energia, como o app */
.btn--preto:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn--claro { border: 1.5px solid var(--linha); color: var(--tinta); background: var(--branco); }
.btn--claro:hover { border-color: var(--tinta); transform: translateY(-1px); }
.btn--neon { background: var(--neon); color: var(--tinta); }
.btn--neon:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn--mini { padding: 10px 18px; font-size: 13.5px; }
.seta { font-family: var(--fonte); }

/* ── Topo ───────────────────────────────────────────────────────────────── */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  /* Opaco: a 97% o texto da página passava por trás do cabeçalho e parecia
     título sobreposto. */
  background: var(--fundo);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.topo.rolou { border-bottom-color: var(--linha); }
.topo__linha { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.topo__logo img, .topo__logo .logo-marca { height: 34px; width: auto; display: block; }
.topo__nav { display: flex; align-items: center; gap: 26px; }
.topo__nav a { text-decoration: none; color: var(--tinta); font-size: 14.5px; font-weight: 600; }
.topo__nav a:hover { color: var(--verde); }
.topo__nav a.btn--preto { color: var(--tinta); }
.topo__nav a.btn--preto:hover { color: var(--tinta); }

/* ── Hero: claro, com o produto numa moldura preta ─────────────────────── */
.hero { padding: 122px 0 24px; }
.hero__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.hero .micro { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; }
.hero .micro::before { content: ''; width: 8px; height: 8px; background: var(--verde); transform: skewX(-12deg); }
.hero__sub { margin-top: 24px; font-size: 18px; color: var(--texto-2); max-width: 480px; line-height: 1.6; }
.hero__acoes { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* Para onde leva o botão da Demo. O marcador é o mesmo paralelogramo das
   .promessas: o único enfeite da marca. */
.hero__leva { margin-top: 16px; max-width: 480px; }
.hero__leva-titulo {
  font-family: var(--fonte-micro); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2);
  margin-bottom: 12px;
}
.hero__leva ul { list-style: none; }
.hero__leva li {
  position: relative; padding-left: 24px; margin-bottom: 6px;
  font-size: 15px; line-height: 1.5; color: var(--texto-2);
}
.hero__leva li b { color: var(--tinta); font-weight: 600; }
.hero__leva li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 12px; height: 6px; background: var(--neon); transform: skewX(-12deg);
}
@media (max-width: 720px) { .hero__leva { margin-top: 16px; } .hero__leva li { font-size: 14.5px; } }

/* números espalhados como elemento gráfico (Framer ref) */
.hero__numeros { display: flex; gap: clamp(18px, 3vw, 44px); margin-top: 24px; flex-wrap: wrap; }
.hero__numeros div b {
  display: block; font-family: var(--fonte-micro); font-size: clamp(26px, 3vw, 38px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1;
}
.hero__numeros div > span {
  display: block; max-width: 150px; margin-top: 6px;
  font-family: var(--fonte-micro); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2);
  line-height: 1.5;
}
.hero__numeros div b span { font: inherit; }

/* a moldura preta com a conversa viva */
.moldura {
  background: #FFFFFF; border: 1px solid var(--linha); border-radius: 24px;
  padding: 22px 18px;
  box-shadow: 0 40px 80px -40px rgba(23, 28, 10, .35);
}
.moldura__topo { display: flex; align-items: center; gap: 10px; padding: 0 4px 14px; border-bottom: 1px solid var(--linha); margin-bottom: 14px; }
.moldura__topo img { width: 30px; height: 30px; }
.moldura__topo b { color: var(--tinta); font-size: 14px; display: block; line-height: 1.2; }
.moldura__topo .estado { color: var(--verde); font-size: 12px; font-weight: 600; }
.bolha {
  max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 13.8px;
  line-height: 1.5; margin-bottom: 10px; position: relative;
  /* Escondida, mas ocupando o lugar: a conversa do herói tem a altura final
     desde o começo e a caixa não pula a cada volta do laço. */
  visibility: hidden;
}
.bolha.chegou { visibility: visible; animation: bolha-in .35s ease; }
@keyframes bolha-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Sem JS ninguém vai animar a conversa: ela aparece inteira. */
html:not(.tem-js) #zap-hero .bolha { visibility: visible; }
.bolha--lead { background: var(--cartao); color: var(--tinta); margin-right: auto; border-bottom-left-radius: 4px; }
.bolha--ia { background: var(--neon); color: var(--tinta); margin-left: auto; border-bottom-right-radius: 4px; }
/* Na demo interativa a perspectiva é a de QUEM DIGITA (como no WhatsApp da
   própria pessoa): o que você escreve fica verde à direita; a Fulana responde
   em branco à esquerda. No herói (vitrine, visão da clínica) segue o padrão. */
.demo__fluxo .bolha--lead { background: var(--neon); margin-left: auto; margin-right: 0; border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
.demo__fluxo .bolha--ia { background: #fff; border: 1px solid var(--linha); margin-right: auto; margin-left: 0; border-bottom-right-radius: 16px; border-bottom-left-radius: 4px; }
.bolha__hora { display: block; text-align: right; font-family: var(--fonte-micro); font-size: 10px; opacity: .55; margin-top: 3px; }
.zap--estatico .bolha { visibility: visible; }
.digitando {
  display: inline-flex; gap: 4px; background: var(--neon); border-radius: 14px;
  padding: 12px 14px; margin: 0 0 10px auto; float: right; clear: both;
  opacity: 0; transition: opacity .3s ease;
}
.digitando.chegou { opacity: 1; }
/* No herói o "digitando" flutua sobre o lugar já reservado da bolha que vem
   (o mundo.js põe o top), em vez de entrar no fluxo e empurrar a página. No
   chat de teste ele continua no fluxo, que ali é o comportamento certo. */
#zap-hero { position: relative; }
#zap-hero .digitando { position: absolute; right: 0; margin: 0; float: none; }
.digitando i { width: 5px; height: 5px; border-radius: 50%; background: var(--tinta); animation: pulsa 1.2s infinite ease-in-out; }
.digitando i:nth-child(2) { animation-delay: .15s; }
.digitando i:nth-child(3) { animation-delay: .3s; }
@keyframes pulsa { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.sistema {
  display: block; clear: both; width: fit-content; margin: 12px auto 6px;
  font-size: 11.5px; font-weight: 600; color: var(--texto-2);
  border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px;
  opacity: 0; transition: opacity .4s ease;
}
.sistema.chegou { opacity: 1; }

/* ── Marquee ────────────────────────────────────────────────────────────── */
.marquee { overflow: hidden; border-block: 1px solid var(--linha); padding: 16px 0; margin-top: 48px; }
.marquee__trilho { display: flex; gap: 56px; width: max-content; animation: anda 40s linear infinite; }
/* Fora da vista, a animação para: ver ligarAnimacaoSoAVista no mundo.js. */
.fora-de-vista { animation-play-state: paused !important; }
@keyframes anda { to { transform: translateX(-50%); } }
.marquee__item {
  font-family: var(--fonte-micro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
}
.marquee__item::before { content: ''; width: 7px; height: 7px; background: var(--verde); transform: skewX(-12deg); }
a.marquee__item { color: inherit; text-decoration: none; }
a.marquee__item:hover { color: var(--verde); }
.b__saiba { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--verde); text-decoration: none; }
.b__saiba:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .marquee__trilho { animation: none; flex-wrap: wrap; } }

/* ── Seções ─────────────────────────────────────────────────────────────── */
.secao { padding-block: 76px; }
.secao__cabeca { max-width: 720px; margin-bottom: 40px; }
.secao__cabeca .pilula { margin-bottom: 18px; }
.secao__cabeca.centro { margin-inline: auto; text-align: center; }

/* a cena: 4 cards com tag de hora (Eleviq article-cards) */
.cena__fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cena__carta {
  background: var(--branco); border-radius: var(--raio); padding: 26px 24px;
  display: flex; flex-direction: column; gap: 40px; min-height: 210px;
}
.cena__carta:last-child { background: var(--tinta); color: var(--texto-claro); }
.cena__carta:last-child .pilula { background: transparent; border-color: #33362e; color: var(--neon); }
.cena__carta p { font-size: 15.5px; line-height: 1.55; margin-top: auto; }
.cena__carta b { font-weight: 600; }
.cena__virada { margin-top: 48px; text-align: center; }
.cena__virada h2 { max-width: 840px; margin-inline: auto; }
.cena__virada .sub { margin: 18px auto 0; }

/* ── Dobra escura: Atende. Agenda. Cobra. + demo ───────────────────────── */
.escuro { background: var(--noite); color: var(--texto-claro); border-radius: 32px; margin: 0 12px; overflow: hidden; }
.escuro .sub { color: var(--texto-claro-2); }
.tres-palavras {
  display: flex; justify-content: center; gap: clamp(18px, 4vw, 56px);
  flex-wrap: wrap; font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(34px, 5.4vw, 72px); line-height: 1;
}
.aovivo {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  font-family: var(--fonte-micro); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--texto-claro-2);
  border: 1px solid #2A2C27; border-radius: 999px; padding: 8px 16px;
}
.aovivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); animation: pulso 1.6s infinite; }
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 217, 0, .5); }
  55% { box-shadow: 0 0 0 8px rgba(200, 217, 0, 0); }
}
.demo__palco { max-width: 460px; margin: 56px auto 0; }
.demo__fluxo { height: 340px; overflow-y: auto; padding: 2px; display: flex; flex-direction: column; }
.demo__fluxo::before { content: ''; flex: 1 0 auto; }
.demo__entrada {
  display: flex; gap: 8px; background: var(--fundo); border: 1px solid var(--linha);
  border-radius: 999px; padding: 6px 6px 6px 18px; margin-top: 12px;
  animation: chama 2.4s infinite;
}
.demo__entrada:focus-within { animation: none; box-shadow: 0 0 0 3px rgba(200, 217, 0, .35); }
@keyframes chama {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 217, 0, 0); }
  55% { box-shadow: 0 0 0 5px rgba(200, 217, 0, .22); }
}
.demo__entrada input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; background: transparent; color: var(--tinta); }
.demo__entrada input::placeholder { color: #9BA192; }
.demo__entrada button {
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--neon); color: var(--tinta); font-size: 15px;
  display: grid; place-items: center; transition: transform .15s ease;
}
.demo__entrada button:hover { transform: scale(1.06); }
.demo__fim { display: none; text-align: center; padding: 18px 6px 4px; }
.demo__fim.chegou { display: block; }
.demo__fim p { font-size: 14px; margin-bottom: 12px; color: var(--tinta); }
.demo__sugestoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.demo__sugestoes button {
  border: 1px solid #2A2C27; background: transparent; color: var(--texto-claro-2);
  border-radius: 999px; padding: 9px 16px; font: inherit; font-size: 13px;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.demo__sugestoes button:hover { border-color: var(--neon); color: var(--texto-claro); }
.demo__aviso { font-size: 12.5px; color: var(--texto-claro-2); margin-top: 20px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .aovivo i, .demo__entrada { animation: none; } }

/* ── Bento: mais que uma atendente ──────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.b { border-radius: var(--raio); background: var(--branco); padding: 30px 28px; }
.b--print { padding: 0; overflow: hidden; background: var(--cartao); }
.b--print img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.b--stat { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; background: var(--cartao); }
.b--stat b { font-family: var(--fonte-micro); font-size: clamp(38px, 4vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.b--stat span { font-size: 14px; color: var(--texto-2); max-width: 240px; }
.b--escuro { background: var(--tinta); color: var(--texto-claro); }
.b--escuro span { color: var(--texto-claro-2); }
.b h3 { margin-bottom: 8px; }
.b p { font-size: 14.5px; color: var(--texto-2); }
.b--escuro p { color: var(--texto-claro-2); }
.b6 { grid-column: span 6; }
.b4 { grid-column: span 4; }
.b8 { grid-column: span 8; }
.b3 { grid-column: span 3; }

/* lista com traço (dentro de cards) */
.b ul { list-style: none; margin-top: 14px; }
.b ul li { font-size: 14.5px; color: var(--texto-2); padding: 8px 0; border-top: 1px solid var(--linha); }
.b--escuro ul li { color: var(--texto-claro-2); border-top-color: #23251f; }

/* ── Objeções: acordeão limpo ───────────────────────────────────────────── */
.objecoes { max-width: 760px; margin-inline: auto; }
.objecao { border-top: 1px solid var(--linha); }
.objecao:last-child { border-bottom: 1px solid var(--linha); }
.objecao summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; padding: 22px 4px; font-size: 17px; font-weight: 600;
  letter-spacing: -.01em;
}
.objecao summary::-webkit-details-marker { display: none; }
.objecao summary::after { content: '+'; font-size: 22px; font-weight: 400; color: var(--texto-2); transition: transform .2s ease; }
.objecao[open] summary::after { transform: rotate(45deg); }
.objecao p { padding: 0 4px 24px; color: var(--texto-2); font-size: 15.5px; max-width: 640px; }
.objecao p b { color: var(--tinta); font-weight: 600; }

/* ── Fecho escuro: bolha do fundador + CTA ──────────────────────────────── */
.fecho { text-align: center; }
.fecho h2 { max-width: 720px; margin-inline: auto; }
.fundador-bolha {
  display: flex; align-items: flex-end; gap: 12px; max-width: 480px;
  margin: 56px auto 0; text-align: left;
}
.fundador-bolha img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.fundador-bolha div {
  background: var(--branco); color: var(--tinta); border-radius: 18px;
  border-bottom-left-radius: 4px; padding: 18px 20px; font-size: 14.5px; line-height: 1.6;
}
.fundador-bolha div b { display: block; margin-top: 10px; font-size: 13px; }
.fundador-bolha div a { color: var(--texto-2); text-decoration: none; font-size: 13px; }
.fundador-bolha div a:hover { color: var(--verde); }
.fecho__acoes { margin-top: 48px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fecho .micro-nota { margin-top: 22px; font-size: 13px; color: var(--texto-claro-2); }

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.rodape { padding: 40px 0 46px; }
.rodape__linha { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--texto-2); }
.rodape img, .rodape .logo-marca { height: 28px; width: auto; }
.rodape a { color: var(--texto-2); text-decoration: none; }
.rodape__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.rodape a:hover { color: var(--tinta); }

/* barra CTA no celular */
.barra-cta {
  position: fixed; inset: auto 0 0; z-index: 60;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--fundo) 92%, transparent);
  border-top: 1px solid var(--linha);
  transform: translateY(110%); transition: transform .35s ease; display: none;
}
.barra-cta .btn { display: flex; justify-content: center; }
.barra-cta.visivel { transform: none; }
body.digitando-demo .barra-cta { transform: translateY(110%); }

/* revelação. Só esconde quando há JS para revelar (classe tem-js, posta no
   <head> antes da primeira pintura). Com GSAP, ele anima cada bloco uma vez; a
   transição CSS só entra no caminho de reserva sem GSAP (classe sem-gsap), senão
   eram duas engrenagens animando as mesmas propriedades nos 49 blocos. */
html.tem-js [data-reveal] { opacity: 0; transform: translateY(28px); }
html.tem-js [data-reveal].visivel { opacity: 1; transform: none; }
html.sem-gsap [data-reveal] { transition: opacity .7s ease, transform .7s ease; }
/* Entrada do herói (ligarIntro). O estado inicial precisa nascer AQUI, antes
   da primeira pintura: aplicado pelo JS, o bloco aparece, some quando o JS
   acorda e volta animando, bem no segundo em que a pessoa está lendo. A classe
   hero-pronto devolve tudo: o mundo.js a põe assim que arma (ou dispensa) as
   animações, e o <head> a põe no evento load, para o caso de o mundo.js nem
   chegar. */
html.tem-js .hero .micro,
html.tem-js .hero h1,
html.tem-js .hero__sub,
html.tem-js .hero__acoes,
html.tem-js .hero__numeros,
html.tem-js .palco-brilho { opacity: 0; }
html.tem-js.hero-pronto .hero .micro,
html.tem-js.hero-pronto .hero h1,
html.tem-js.hero-pronto .hero__sub,
html.tem-js.hero-pronto .hero__acoes,
html.tem-js.hero-pronto .hero__numeros,
html.tem-js.hero-pronto .palco-brilho { opacity: 1; }
/* O hover precisa de mais peso que a regra acima, senão o cartão revelado para
   de levantar com o mouse. */
html.tem-js .b[data-reveal].visivel:hover,
html.tem-js .cena__carta[data-reveal].visivel:hover { transform: translateY(-4px); }

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .hero__grade { grid-template-columns: 1fr; gap: 48px; }
  .cena__fila { grid-template-columns: 1fr 1fr; }
  .b6, .b4, .b8, .b3 { grid-column: span 12; }
  .b--print img { max-height: 380px; }
}
@media (max-width: 960px) {
  .some-mobile { display: none; }
}
@media (max-width: 720px) {
  .secao { padding-block: 80px; }
  .hero { padding: 120px 0 30px; }
  .cena__fila { grid-template-columns: 1fr; }
  .barra-cta { display: block; }
  .escuro { margin: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.tem-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── v8.1: ícones, foto, hover e animações ──────────────────────────────── */
.b__icone {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--fundo); color: var(--tinta);
  font-size: 22px; margin-bottom: 18px;
}
.b--stat .b__icone { margin-bottom: 0; }
.b__icone--neon { background: #1A1C17; color: var(--neon); }

.b--foto { padding: 0; overflow: hidden; position: relative; background: var(--cartao); }
.b--foto img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.b--foto figcaption {
  position: absolute; inset: auto 14px 14px; background: color-mix(in srgb, var(--tinta) 93%, transparent);
  color: var(--texto-claro); font-size: 13px; line-height: 1.5;
  border-radius: 12px; padding: 12px 14px;
}

/* hover: cards levantam de leve */
.b, .cena__carta { transition: transform .25s ease, box-shadow .25s ease; }
.b:hover, .cena__carta:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(20, 22, 19, .22); }
.b--print img, .b--foto img { transition: transform .5s ease; }
.b--print:hover img, .b--foto:hover img { transform: scale(1.02); }

/* ícones de traço, em linha no HTML (antes vinham de um script de terceiro
   que custava uma ida à internet para desenhar três ícones) */
.icone { width: 1.1em; height: 1.1em; vertical-align: -.15em; flex-shrink: 0; }
.icone--verde { color: var(--verde); }

/* três palavras: entram uma a uma (JS controla) */
.palavra { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .b, .cena__carta, .b--print img, .b--foto img { transition: none; }
  .b:hover, .cena__carta:hover { transform: none; }
}

/* ═══ v9: canais, comparação, planos, camadas e mobile ═══════════════════ */

/* brilho verde atrás da moldura do herói (layer de profundidade) */
.palco-brilho { position: relative; }
.palco-brilho::before {
  content: ''; position: absolute; inset: -8%;
  background: radial-gradient(50% 50% at 60% 40%, rgba(200, 217, 0, .28), transparent 70%);
  filter: blur(30px); z-index: 0; pointer-events: none;
}
.palco-brilho .moldura { position: relative; z-index: 1; }

/* ruído fino nas dobras escuras (textura, sem imagem externa) */
.escuro { position: relative; }
.escuro::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* canais: três linhas curtas no topo do sistema (antes, seção própria) */
.canais-curtos .micro { margin-bottom: 16px; }
.canais-curtos ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.canais-curtos li { display: flex; gap: 14px; align-items: flex-start; }
.canais-curtos .b__icone { width: 44px; height: 44px; margin: 0; flex-shrink: 0; }
.canais-curtos p { font-size: 14.5px; line-height: 1.55; color: var(--texto-2); }
.canais-curtos p b { color: var(--tinta); font-weight: 600; }
@media (max-width: 900px) { .canais-curtos ul { grid-template-columns: 1fr; gap: 16px; } }
.faz { list-style: none; margin-top: 26px; }
.faz li {
  padding: 11px 0 11px 34px; border-top: 1px solid var(--linha);
  font-size: 15.5px; color: var(--texto-2); position: relative;
}
.faz li::before {
  content: '✓'; position: absolute; left: 4px; top: 10px;
  color: var(--verde); font-weight: 700;
}

/* comparação */
.versus-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio); }
.versus { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: var(--branco); border-radius: var(--raio); overflow: hidden; }
.versus th, .versus td { padding: 15px 18px; text-align: center; font-size: 14.5px; border-bottom: 1px solid var(--linha); }
.versus th { font-family: var(--fonte); font-weight: 700; font-size: 13.5px; }
.versus td:first-child, .versus th:first-child { text-align: left; color: var(--texto-2); font-weight: 600; min-width: 220px; }
.versus tr:last-child td { border-bottom: 0; }
.versus td:not(:first-child) { color: var(--texto-2); }
.versus .versus__fulcro { background: #F4F8E2; color: var(--tinta); font-weight: 700; }
th.versus__fulcro { color: var(--tinta); }

/* comparação, para quem é e a conta: uma seção só, blocos separados por ar */
.porque .serve { margin-top: clamp(40px, 5vw, 56px); }
.porque__conta { margin: clamp(48px, 6vw, 72px) 0 18px; }
.porque__conta h3 { margin-top: 14px; font-size: clamp(20px, 2.4vw, 26px); max-width: 620px; }

/* para quem é / não é */
.serve { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.serve .b h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.serve__sim { border-top: 4px solid var(--neon); }
.serve__nao { border-top: 4px solid var(--linha); }
.serve__nao h3 .icone { color: var(--texto-2); }

/* demonstração ao vivo */

/* ── MOBILE de verdade ──────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .serve { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .container { padding: 0 18px; }
  .topo__linha { height: 62px; }
  .topo__logo img, .topo__logo .logo-marca { height: 28px; }
  .topo__nav { gap: 14px; }
  .topo__nav .btn--mini { padding: 9px 12px; font-size: 12px; white-space: nowrap; }
  h1 { font-size: clamp(32px, 9vw, 40px); }
  h2 { font-size: clamp(24px, 6.6vw, 32px); }
  .hero { padding: 104px 0 16px; }
  .hero__sub { font-size: 16px; margin-top: 16px; }
  .hero__acoes { margin-top: 24px; }
  .hero__acoes .btn { width: 100%; justify-content: center; }
  .hero__numeros { margin-top: 32px; gap: 22px; }
  .hero__numeros div b { font-size: 24px; }
  .moldura { padding: 18px 14px; border-radius: 20px; }
  .secao { padding-block: 56px; }
  .secao__cabeca { margin-bottom: 28px; }
  .cena__carta { min-height: 0; gap: 18px; padding: 20px 18px; }
  .cena__virada { margin-top: 36px; }
  .tres-palavras { font-size: clamp(30px, 9.6vw, 40px); gap: 12px; }
  .demo__palco { margin-top: 36px; }
  .demo__fluxo { height: 300px; }
  .b { padding: 22px 20px; }
  .b--stat b { font-size: 34px; }
  .versus th, .versus td { padding: 12px 12px; font-size: 13px; }
  .objecao summary { font-size: 15.5px; padding: 18px 2px; }
  .fundador-bolha { margin-top: 36px; }
  .fecho__acoes .btn { width: 100%; justify-content: center; }
  .rodape__linha { justify-content: center; text-align: center; }
  /* a barra fixa tem 76px: sem isso ela cobre o fim do rodapé */
  .rodape { padding-bottom: 90px; }
}

/* ═══ v10: reembolso didático, murais, telas de celular e títulos animados ═ */
.passos-reemb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passo-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--neon); color: var(--tinta); font-family: var(--fonte);
  font-weight: 700; font-size: 18px; margin-bottom: 14px;
}
.passos-reemb h3 { margin-bottom: 6px; }
.passos-reemb p { color: var(--texto-2); font-size: 14.5px; }

.convenios { margin-top: 34px; }
.convenios__mural { display: flex; flex-wrap: wrap; gap: 10px; }
.convenios__mural span {
  font-family: var(--fonte); font-weight: 700; font-size: 14px;
  color: var(--texto-2); background: var(--branco); border: 1px solid var(--linha);
  border-radius: 12px; padding: 12px 18px;
  transition: color .2s, border-color .2s, transform .2s;
}
.convenios__mural span:hover { color: var(--tinta); border-color: var(--verde); transform: translateY(-2px); }

.extras-bloco { margin-top: clamp(52px, 6vw, 80px); }
.extras__abre { margin-bottom: 16px; }
.extras { display: flex; flex-wrap: wrap; gap: 10px; }
.extras span {
  font-size: 13.5px; font-weight: 600; color: var(--texto-2);
  background: var(--cartao); border-radius: 999px; padding: 9px 16px;
  display: inline-flex; align-items: center; gap: 7px;
}
.extras span::before { content: '✓'; color: var(--verde); font-weight: 700; }

/* títulos que entram palavra por palavra (JS envelopa) */
.palavra-t { display: inline-block; }

@media (max-width: 720px) {
  .passos-reemb { grid-template-columns: 1fr; }
}

/* logos dos convênios */
.convenios__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-bottom: 18px; }
.convenios__logos img {
  height: 34px; width: auto; filter: grayscale(1) opacity(.62);
  transition: filter .25s ease;
}
.convenios__logos img:hover { filter: none; }
@media (max-width: 720px) { .convenios__logos { gap: 12px 22px; } .convenios__logos img { height: 26px; } }

/* ── Hero com foto real + chat sobreposto ───────────────────────────────── */
.palco-foto { position: relative; max-width: 430px; margin-left: auto; margin-bottom: 34px; }
.hero__foto {
  display: block; width: 100%;
  border-radius: 26px; object-fit: cover; aspect-ratio: 4/4.6;
  position: relative; z-index: 1;
}
.moldura--sobre {
  position: absolute; z-index: 2; left: -26px; bottom: -34px; width: 86%;
  padding: 16px 14px;
}
.moldura--sobre .bolha { font-size: 12.4px; padding: 8px 12px; margin-bottom: 8px; }
.moldura--sobre .moldura__topo { padding-bottom: 10px; margin-bottom: 10px; }
@media (max-width: 1020px) {
  .palco-foto { margin-inline: auto; }
}
@media (max-width: 720px) {
  .palco-foto { max-width: 100%; margin-bottom: 20px; }
  .hero__foto { aspect-ratio: 4/3.6; }
  .moldura--sobre { position: static; width: 100%; margin-top: -30px; margin-inline: auto; }
}

/* fotos geradas */
.cena__foto { margin-top: 18px; position: relative; overflow: hidden; border-radius: var(--raio); }
.cena__foto video { display: block; width: 100%; border-radius: var(--raio); }
.cena__foto img { display: block; width: 100%; border-radius: var(--raio); }
.cena__foto figcaption { font-family: var(--fonte-micro); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin-top: 10px; text-align: right; }

/* ícones 3D gerados (conjunto próprio) */
.b__icone--img { background: #fff; padding: 0; overflow: hidden; border: 1px solid var(--linha); width: 54px; height: 54px; }
.b__icone--img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); }
.cena__foto video { display: block; width: 100%; border-radius: var(--raio); }
@media (prefers-reduced-motion: reduce) { .cena__foto video { display: none; } }

/* ═══ v11: Fulana, telas brancas no verde-noite, vídeo com legenda, custo ═ */
.avatar-fulana { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.fulana-retrato {
  display: block; margin-inline: auto;
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--neon); margin-bottom: 18px;
  box-shadow: 0 14px 34px -14px rgba(200, 217, 0, .5);
}

/* símbolo gigante da marca flutuando na dobra escura */
.marca-fantasma {
  position: absolute; right: -6%; top: 8%; width: min(46vw, 560px); height: auto;
  opacity: .07; pointer-events: none;
  animation: deriva 14s ease-in-out infinite alternate;
}
@keyframes deriva {
  from { transform: translateY(-14px) rotate(-2deg); }
  to { transform: translateY(18px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) { .marca-fantasma { animation: none; } }

/* legenda DENTRO do vídeo */
.cena__foto { position: relative; }
.cena__foto::after {
  content: ''; position: absolute; inset: 55% 0 0; border-radius: 0 0 var(--raio) var(--raio);
  background: linear-gradient(180deg, transparent, rgba(10, 12, 5, .78)); pointer-events: none;
}
.cena__foto figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2;
  color: #F2F4ED; text-align: left; margin: 0;
  font-family: var(--fonte-micro); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}

/* custo: recepcionista × fulcro */
.custo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.custo__carta { background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 34px 30px; }
.custo__carta--fulcro { background: var(--noite); border-color: transparent; color: #F2F4ED; }
.custo__rotulo { font-family: var(--fonte); font-weight: 700; font-size: 17px; margin-bottom: 14px; }
.custo__carta--fulcro .custo__rotulo { color: var(--neon); }
.custo__valor { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.custo__valor b { font-family: var(--fonte); font-weight: 700; font-size: clamp(30px, 4vw, 52px); letter-spacing: -.02em; white-space: nowrap; }
.custo__valor span { font-size: 13px; color: var(--texto-2); }
/* O lado da fulcro não mostra número (o preço saiu do site): a frase entra
   menor e quebra linha, senão o nowrap da tipografia de número estoura o
   cartão no celular. */
.custo__valor--frase b { font-size: clamp(21px, 2.6vw, 30px); white-space: normal; line-height: 1.18; }
.custo__carta--fulcro .custo__valor span { color: #B9BFA9; }
.custo__carta ul { list-style: none; }
.custo__carta ul li { padding: 9px 0 9px 26px; border-top: 1px solid var(--linha); font-size: 14.5px; color: var(--texto-2); position: relative; }
.custo__carta ul li::before { content: ''; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 2px; background: var(--texto-2); }
.custo__carta--fulcro ul li { border-top-color: #2A3315; color: #D6DBC8; }
.custo__carta--fulcro ul li::before { content: '✓'; top: auto; width: auto; height: auto; background: none; color: var(--neon); }
.custo__nota { margin-top: 18px; font-size: 13.5px; color: var(--texto-2); max-width: 720px; }
@media (max-width: 720px) { .custo { grid-template-columns: 1fr; } .custo__valor { flex-wrap: wrap; row-gap: 2px; } .custo__valor b { font-size: 34px; }
  /* A frase precisa ser dita depois da regra acima: mesma especificidade,
     ganha a última. */
  .custo__valor--frase b { font-size: 23px; } }

html { overflow-x: clip; }

/* ═══ Legenda VIVA sobre o vídeo (ciclo de 16s): os leads empilham,
   ninguém responde, o prejuízo aparece, e a pergunta fecha a cena ═══ */
.v-legenda { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* 1) as notificações chegam, uma atrás da outra, e FICAM na tela */
.v-toast {
  position: absolute; left: 18px; display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255, 255, 255, .96); border-radius: 14px; padding: 12px 16px;
  max-width: min(78%, 380px); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .55);
  opacity: 0;
}
.v-toast img { width: 26px; height: 26px; margin-top: 2px; }
.v-toast b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 3px; }
.v-toast p { font-size: 13.5px; line-height: 1.4; color: var(--tinta); }
.v-t1 { top: 18px; animation: v-chega 16s ease-in-out infinite; }
.v-t2 { top: 100px; animation: v-chega 16s ease-in-out infinite; animation-delay: 1.6s; }
.v-t3 { top: 168px; animation: v-chega 16s ease-in-out infinite; animation-delay: 3.2s; }
@keyframes v-chega {
  0%, 2% { opacity: 0; transform: translateY(-18px) scale(.97); }
  6%, 72% { opacity: 1; transform: translateY(0) scale(1); }
  80%, 100% { opacity: 0; transform: translateY(-8px); }
}

/* 2) entregues, ninguém viu */
.v-visto {
  position: absolute; top: 252px; left: 22px;
  font-family: var(--fonte-micro); font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #E5484D;
  opacity: 0; animation: v-aparece 16s ease-in-out infinite; animation-delay: 5s;
}

/* 3) o prejuízo, em duas batidas */
.v-perda { position: absolute; right: 18px; bottom: 84px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.v-perda__linha {
  background: rgba(20, 22, 19, .82); color: #fff; border-right: 3px solid var(--neon);
  padding: 9px 14px; border-radius: 10px; font-size: 13.5px; max-width: 340px; text-align: right;
  opacity: 0;
}
.v-p1 { animation: v-aparece 16s ease-in-out infinite; animation-delay: 6.6s; }
.v-p2 { animation: v-aparece 16s ease-in-out infinite; animation-delay: 8.2s; }
@keyframes v-aparece {
  0% { opacity: 0; transform: translateY(8px); }
  3%, 66% { opacity: 1; transform: translateY(0); }
  74%, 100% { opacity: 0; }
}

/* 4) a pergunta se digita sozinha */
.v-quem {
  position: absolute; left: 20px; bottom: 18px;
  font-family: var(--fonte); font-weight: 700;
  font-size: clamp(24px, 4vw, 44px); letter-spacing: -.02em; color: #FFFFFF;
  white-space: nowrap; overflow: hidden; max-width: 0;
  border-right: 3px solid var(--neon);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
  animation: v-quem 16s steps(14, end) infinite, v-caret .7s step-end infinite;
}
@keyframes v-quem {
  0%, 60% { max-width: 0; opacity: 1; }
  70%, 88% { max-width: 100%; opacity: 1; }
  94%, 100% { max-width: 100%; opacity: 0; }
}
@keyframes v-caret { 50% { border-color: transparent; } }

/* legenda estática só para quem pede menos movimento */
.v-estatica { display: none; }
@media (prefers-reduced-motion: reduce) {
  .v-legenda { display: none; }
  .v-estatica { display: block; }
}
@media (max-width: 720px) {
  .v-toast { left: 12px; padding: 9px 11px; max-width: 86%; }
  .v-toast p { font-size: 12.5px; }
  .v-t1 { top: 10px; } .v-t2 { top: 76px; } .v-t3 { top: 142px; }
  .v-visto { top: 212px; left: 13px; font-size: 10.5px; }
  .v-perda { right: 10px; bottom: 58px; }
  .v-perda__linha { font-size: 12px; max-width: 240px; }
  .v-p2 { display: none; }
  .v-quem { left: 13px; bottom: 10px; }
  .cena__foto { height: min(74vh, 540px); }
  .cena__foto video { height: 100%; object-fit: cover; }
}

/* faixa: seção com fundo próprio para dar ritmo à página */
.secao--faixa { background: var(--cartao); }
.secao--faixa .versus { border-color: #DDE0D4; }
.convenios__mais { margin-top: 18px; font-size: 15px; color: var(--texto-2); max-width: 560px; }

/* demo em par: teste à esquerda, rotina da Fulana à direita */
.demo__duplo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: start; max-width: 1020px; margin: 48px auto 0; text-align: left;
}
.demo__duplo .demo__palco { margin: 0; max-width: 460px; }
.demo__rotina h3 { color: var(--texto-claro); font-size: 20px; max-width: 380px; margin-bottom: 8px; }
.demo__rotina .faz li { color: var(--texto-claro-2); border-top-color: #2A3315; font-size: 15px; }
.demo__rotina .faz li::before { color: var(--neon); }
@media (max-width: 1020px) {
  .demo__duplo { grid-template-columns: 1fr; gap: 36px; }
  .demo__duplo .demo__palco { margin-inline: auto; }
}


/* ── Módulos do sistema: tela grande e legível + dor/solução ── */
.modulo { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 4.5vw, 70px); align-items: center; margin-top: clamp(44px, 6vw, 80px); }
.modulo--inv .modulo__print { order: 2; }
.modulo__print { margin: 0; background: #fff; border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 22, 19, .10); overflow: hidden; }
.navegador { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--linha); background: var(--cartao); }
.navegador span { width: 9px; height: 9px; border-radius: 50%; background: #DDE0D4; }
.navegador span:first-child { background: var(--neon); }
/* A proporção reserva a altura antes do lazy chegar (sem ela a página crescia
   2.765px enquanto o lead lia). A do celular é outra porque o <picture> troca
   para o print vertical abaixo de 720px. O height:auto anula o height="1760"
   do HTML, que viraria altura fixa. */
.modulo__print img { display: block; width: 100%; height: auto; aspect-ratio: 2880 / 1760; }
@media (max-width: 720px) { .modulo__print img { aspect-ratio: 780 / 1600; } }
.modulo__texto h3 { font-size: clamp(22px, 2.3vw, 29px); line-height: 1.16; margin: 16px 0 12px; }
.modulo__texto > p { line-height: 1.65; }
.modulo__lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.modulo__lista li { position: relative; padding-left: 22px; line-height: 1.5; }
.modulo__lista li::before { content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; background: var(--neon); transform: skewX(-12deg); }
@media (max-width: 900px) {
  .modulo { grid-template-columns: 1fr; gap: 20px; margin-top: 52px; }
  .modulo--inv .modulo__print { order: 0; }
}


/* Microfone da demo: grava como no WhatsApp */
#demo-mic { background: #fff; border: 1px solid var(--linha); border-radius: 50%; width: 44px; height: 44px; font-size: 17px; cursor: pointer; flex-shrink: 0; }
#demo-mic.gravando { background: #E5484D; border-color: #E5484D; animation: mic-pulsa 1.1s infinite ease-in-out; }
@keyframes mic-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { #demo-mic.gravando { animation: none; } }




.palco-planos { position: relative; }

/* O que a pessoa leva da sessão. Quatro linhas, cada uma com a promessa em
   negrito e a prova logo atrás — quem varre lê só os negritos e entende. */
.promessas {
  max-width: 760px; margin: 26px auto 0; padding: 0; list-style: none;
}
.promessas li {
  position: relative; padding-left: 26px; margin-bottom: 14px;
  color: var(--texto-2); line-height: 1.6;
}
.promessas li b { color: var(--tinta); }
/* O paralelogramo da marca como marcador. É o único enfeite da seção. */
.promessas li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 13px; height: 6px; background: var(--neon); transform: skewX(-12deg);
}
.promessas__nota {
  max-width: 760px; margin: 22px auto 30px; text-align: center;
  font-size: 14.5px; color: var(--texto-2);
}
#planos { scroll-margin-top: 84px; }

/* O preço saiu do site (decisão do dono, 20/08): o valor é dito no webinário.
   Sem número na página não há o que esconder, então o desfoque e o cadeado
   foram embora e a inscrição virou bloco normal, antes dos planos. */
.destrava {
  width: min(560px, 100%); margin: 0 auto 34px; padding: 26px 26px 24px;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(20, 22, 19, .45), 0 2px 10px -4px rgba(20, 22, 19, .18);
}

/* A marca do bloco. Verde Energia é preenchimento com traço preto por cima,
   nunca texto verde: contraste insuficiente (regra do brandbook). */
.destrava__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 12px; color: var(--tinta);
  background: var(--neon); border-radius: 12px;
  transform: skewX(-12deg);
}
.destrava__marca svg { transform: skewX(12deg); }
.destrava[hidden] { display: none; }
.destrava__texto { text-align: left; }
.destrava__texto h3 {
  font-family: var(--fonte); font-weight: 700; font-size: 21px;
  letter-spacing: -.01em; line-height: 1.25;
}
.destrava__texto p { margin-top: 8px; font-size: 14.5px; color: var(--texto-2); }
.destrava__campos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px;
}
/* Três campos em 560px cortavam o exemplo do e-mail: nome e WhatsApp lado a
   lado, e-mail e a pergunta com a linha inteira. */
.destrava__campos .campo:nth-child(3), .destrava__campos .campo--perfil { grid-column: 1 / -1; }
.destrava .campo { display: flex; flex-direction: column; gap: 6px; }
.destrava .campo label, .destrava .campo legend {
  font-size: 12.5px; font-weight: 600; color: var(--texto-2);
}
.destrava .campo input[type="text"],
.destrava .campo input[type="tel"],
.destrava .campo input[type="email"] {
  font-family: var(--fonte); font-size: 15px; color: var(--tinta);
  padding: 11px 13px; background: var(--fundo);
  border: 1px solid var(--linha); border-radius: 12px; width: 100%;
}
.destrava .campo input:focus-visible,
.destrava .campo input[type="radio"]:focus-visible,
.destrava button:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.campo--perfil { border: 0; padding: 0; }
/* "Você é:" com seis opções: duas colunas no computador, uma no celular. */
.destrava .campo--perfil { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.destrava .campo--perfil legend { grid-column: 1 / -1; }
.campo--perfil legend { padding: 0; margin-bottom: 10px; }
.campo--perfil label {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 16px;
  font-size: 15px; font-weight: 500; color: var(--tinta); cursor: pointer;
}
.campo--perfil input[type="radio"] { accent-color: var(--verde); width: 17px; height: 17px; }
/* Honeypot: fora da vista e fora do fluxo do teclado, mas não display:none —
   parte dos robôs ignora campo que o navegador nem desenha. */
.destrava__isca {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.destrava__erro {
  margin-top: 14px; font-size: 14px; font-weight: 600; color: #B4232A;
}
.destrava__erro[hidden] { display: none; }
.destrava__acao {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px;
}
.destrava__acao .btn { flex-shrink: 0; }
.destrava__lgpd { font-size: 12.5px; line-height: 1.5; color: var(--texto-2); max-width: 460px; }
.destrava__lgpd a { color: var(--verde); text-decoration: underline; }
.destrava__ok {
  max-width: 900px; margin: 0 auto 26px; padding: 14px 18px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--tinta);
  background: var(--cartao); border-radius: 14px;
}
.destrava__ok[hidden] { display: none; }
.destrava__ok [hidden] { display: none; }
.destrava__ok-titulo { font-size: 16px; font-weight: 700; color: var(--tinta); }
.destrava__ok .btn { margin-top: 12px; }
.destrava__ok-nota { margin-top: 10px; font-size: 13.5px; font-weight: 500; color: var(--texto-2); }

@media (max-width: 860px) {
  .destrava__campos { grid-template-columns: 1fr; }
  .destrava .campo--perfil { grid-template-columns: 1fr; }
  .destrava__acao { gap: 12px; }
  .destrava__acao .btn { width: 100%; justify-content: center; }
}

/* No celular o cartão ocupa a largura toda: com respiro dos dois lados ele
   fica estreito demais para os campos. */
@media (max-width: 720px) {
  .destrava { width: auto; margin: 0 0 22px; padding: 22px 18px; }
}

/* Símbolo do Google Meet junto do nome, onde a página diz onde a Demo acontece. */
.meet { white-space: nowrap; }
.meet img { display: inline-block; width: 1.2em; height: auto; vertical-align: -0.18em; margin-right: .3em; }