/* =============================================
   PÁGINA DE CAPTURA — GRUPO GRATUITO
   ---------------------------------------------
   Mesma identidade do site (navy, azul, ciano, Fraunces + Jakarta),
   estrutura deliberadamente DIFERENTE: o site empilha seções escuras;
   aqui é uma tela só, dividida em duas metades — promessa escura à
   esquerda, formulário claro à direita. O contraste entre as metades
   é o que faz o olho cair no formulário.
   ============================================= */

:root {
  --fundo:      #04091A;
  --navy:       #0A1530;
  --claro:      #F4F8FF;
  --branco:     #FFFFFF;

  --azul-700:   #1551B8;
  --azul-600:   #1E6BEE;
  --azul-500:   #2E84FF;
  --ceu-2:      #7FD0FF;
  --ciano:      #34E2E4;

  --tx:         #EAF1FF;
  --tx-2:       #A9BEE3;
  --tx-3:       #6F86B3;
  --tx-esc:     #0A1B3D;
  --tx-esc-2:   #46587D;

  /* Verde de ação.
     O #25D366 da marca do WhatsApp dá só 1.98:1 com texto branco (o mínimo é
     4.5) e 1.86:1 contra o painel claro — o botão sumia duas vezes. Este par
     mais fechado dá 4.73:1 no texto e 4.44:1 de separação contra o painel.
     O verde vivo continua vivo onde é só enfeite (selo, ícones). */
  --zap:        #0A8540;
  --zap-2:      #0A6E33;
  --zap-vivo:   #25D366;
  --erro:       #C7343A;

  --grad:       linear-gradient(120deg, var(--azul-700) 0%, var(--azul-500) 45%, var(--ciano) 110%);
  --grad-tx:    linear-gradient(100deg, #FFF 0%, var(--ceu-2) 55%, var(--ciano) 100%);

  --t:          all .25s cubic-bezier(.4,0,.2,1);
  --f-tit:      'Fraunces', Georgia, serif;
  --f-txt:      'Plus Jakarta Sans', system-ui, sans-serif;
  --f-mono:     'JetBrains Mono', monospace;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-txt); background: var(--fundo); color: var(--tx);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--azul-500); color: #fff; }

/* =============================================
   ESTRUTURA — duas metades
   ============================================= */
.tela {
  display: grid; grid-template-columns: 1.05fr .95fr;
  min-height: 100vh; min-height: 100svh;
}

/* ---------- lado escuro: a promessa ---------- */
.lado-promessa {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 20% 10%, rgba(30,107,238,.30), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--fundo) 100%);
  display: flex; align-items: center;
  padding: 56px 5vw;
}
.lado-promessa::after {          /* malha técnica discreta */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(127,208,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,208,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 20%, #000, transparent 72%);
}
.brilho {
  position: absolute; top: -20%; left: -12%; width: 560px; height: 560px; z-index: 0;
  background: radial-gradient(circle, rgba(52,226,228,.16), transparent 64%);
  filter: blur(60px); pointer-events: none;
}
.brilho.b {
  top: auto; left: auto; bottom: -22%; right: -14%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(37,211,102,.12), transparent 64%);
}
.promessa { position: relative; z-index: 2; max-width: 540px; }

.marca { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 40px; }
.marca-mz {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--grad); color: #fff;
  font-family: var(--f-tit); font-weight: 700; font-size: .95rem;
  box-shadow: 0 8px 20px rgba(30,107,238,.4);
}
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-txt b { font-family: var(--f-tit); font-weight: 600; font-size: 1rem; color: #fff; }
.marca-txt small {
  font-family: var(--f-mono); font-size: .56rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx-3);
}

/* no painel escuro o verde precisa ser o vivo — o de ação é escuro demais aqui */
.tag {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  padding: 8px 16px; border-radius: 30px;
  background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.34);
  font-family: var(--f-mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--zap-vivo);
}
.tag i { font-size: 1.05em; }

h1 {
  font-family: var(--f-tit); font-weight: 600;
  font-size: clamp(2.05rem, 3.2vw, 3.1rem); line-height: 1.1;
  letter-spacing: -.022em; color: #fff; margin-bottom: 18px;
  text-wrap: balance;
}
.destaque { background: var(--grad-tx); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* "De graça" é o argumento mais forte do anúncio: em vez de mais uma cor de
   texto, vira um bloco marcado — fundo claro e letra escura, o inverso de todo
   o resto da página. É o único elemento assim, por isso o olho vai nele. */
.gratis {
  display: inline-block; position: relative;
  padding: .02em .28em .1em; border-radius: 9px;
  background: linear-gradient(100deg, var(--ciano) 0%, #5DF0A4 100%);
  color: #04091A;
  transform: rotate(-1.4deg);
  box-shadow: 0 10px 30px rgba(52,226,228,.26);
}

.sub { font-size: 1.02rem; line-height: 1.6; color: var(--tx-2); max-width: 440px; margin-bottom: 30px; }

.itens { display: flex; flex-direction: column; gap: 13px; margin-bottom: 38px; }
.itens li { display: flex; align-items: flex-start; gap: 12px; font-size: .97rem; color: var(--tx-2); }
.itens li > span { flex: 1; min-width: 0; }   /* a frase inteira num item só */
.itens b { color: #fff; font-weight: 700; }
.itens i {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; margin-top: 2px;
  display: grid; place-items: center; font-size: .62rem;
  background: rgba(52,226,228,.14); color: var(--ciano);
}

.assinatura {
  display: flex; align-items: center; gap: 14px;
  padding-top: 26px; border-top: 1px solid rgba(127,208,255,.13);
}
.assinatura img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top center;
  border: 2px solid rgba(52,226,228,.35); flex-shrink: 0;
}
.assinatura b { display: block; font-size: .93rem; color: #fff; }
.assinatura span { display: block; font-size: .8rem; color: var(--tx-3); line-height: 1.45; }

/* ---------- lado claro: o formulário ---------- */
.lado-form {
  background: var(--claro);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 5vw;
}
.cartao { width: 100%; max-width: 420px; }

.cartao-conteudo h2 {
  font-family: var(--f-tit); font-weight: 600; font-size: 1.85rem;
  line-height: 1.15; color: var(--tx-esc); margin-bottom: 8px;
}
.cartao-sub { font-size: .95rem; color: var(--tx-esc-2); margin-bottom: 28px; }

.campo { margin-bottom: 16px; }
.campo label {
  display: block; margin-bottom: 7px;
  font-family: var(--f-mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tx-esc-2);
}
.campo input {
  width: 100%; padding: 15px 17px; border-radius: 12px;
  font-family: var(--f-txt); font-size: 1rem; color: var(--tx-esc);
  background: var(--branco); border: 1.5px solid rgba(20,60,130,.16);
  transition: var(--t); outline: none;
}
.campo input::placeholder { color: #9BAAC6; }
.campo input:focus { border-color: var(--azul-500); box-shadow: 0 0 0 4px rgba(46,132,255,.14); }
.campo input.invalido { border-color: var(--erro); }
.campo input.invalido:focus { box-shadow: 0 0 0 4px rgba(229,72,77,.13); }

.erro { display: none; margin-top: 6px; font-size: .8rem; color: var(--erro); }
.erro.aparece { display: block; }

/* armadilha anti-robô */
.ninho { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  width: 100%; margin-top: 8px; padding: 17px 22px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-txt); font-size: 1.01rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--zap), var(--zap-2));
  border: none; cursor: pointer; transition: var(--t);
  box-shadow: 0 14px 32px rgba(37,211,102,.32);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(37,211,102,.42); }
.btn:disabled { opacity: .65; cursor: wait; transform: none; }
.btn i.fa-whatsapp { font-size: 1.25em; }
.btn-load i { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.falha {
  margin-top: 14px; padding: 12px 15px; border-radius: 10px;
  background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.28);
  font-size: .86rem; color: #B3252A; line-height: 1.5;
}

.micro {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; font-family: var(--f-mono); font-size: .69rem; color: var(--tx-esc-2);
}
.micro i { color: var(--zap); }
.legal { margin-top: 14px; font-size: .74rem; line-height: 1.55; color: #7B8AA6; text-align: center; }

/* estado de sucesso */
.sucesso { text-align: center; }
.ok-ico {
  width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center; font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--zap), var(--zap-2));
  box-shadow: 0 14px 34px rgba(37,211,102,.34);
  animation: surge .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes surge { from { transform: scale(.4); opacity: 0; } }
.sucesso .btn { margin-top: 24px; }


/* =============================================
   O QUE CHEGA + AUTORIDADE
   Fundo claro, continuando o painel do formulário: a página segue lendo
   como tela de cadastro, e não como site institucional com seções.
   ============================================= */
.entrega {
  position: relative;
  background: var(--claro);
  padding: 64px 24px 72px;
}

/* Linha de separação.
   Acima ficam duas metades de cores opostas: a escura simplesmente parava e a
   clara escorria para dentro desta seção, porque as duas usam o mesmo #F4F8FF.
   Uma linha lisa some no lado escuro, então esta é uma faixa com o gradiente
   da marca: tem cor própria e por isso aparece sobre os dois lados. */
.entrega::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
}
.e-wrap { max-width: 1060px; margin: 0 auto; }

.e-topo { text-align: center; margin-bottom: 36px; }
.e-tag {
  display: inline-block; margin-bottom: 13px; padding: 6px 14px; border-radius: 30px;
  background: rgba(30,107,238,.08); border: 1px solid rgba(30,107,238,.24);
  font-family: var(--f-mono); font-size: .63rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--azul-700);
}
.e-topo h2 {
  font-family: var(--f-tit); font-weight: 600; font-size: clamp(1.55rem, 3vw, 2.05rem);
  line-height: 1.2; color: var(--tx-esc); max-width: 22ch; margin: 0 auto; text-wrap: balance;
}

/* ---------- os três cards ---------- */
.e-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.e-card {
  display: flex; flex-direction: column;
  padding: 24px 24px 24px; border-radius: 18px;
  background: var(--branco); border: 1px solid rgba(20,60,130,.10);
  box-shadow: 0 12px 30px rgba(10,27,61,.06);
}
.e-card-topo { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.e-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: .98rem; color: #fff;
  background: var(--grad); box-shadow: 0 8px 20px rgba(30,107,238,.28);
}
.e-card h3 {
  font-family: var(--f-txt); font-weight: 700; font-size: 1rem;
  color: var(--tx-esc); line-height: 1.25;
}
.e-quando {
  font-family: var(--f-mono); font-size: .61rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--zap); margin-top: 3px;
}
.e-desc { font-size: .91rem; line-height: 1.6; color: var(--tx-esc-2); margin-bottom: 18px; }

/* o exemplo real — bolha de mensagem, como chega no celular */
.e-exemplo {
  margin-top: auto; padding: 14px 15px;
  border-radius: 13px 13px 13px 4px;
  background: rgba(10,133,64,.055); border: 1px solid rgba(10,133,64,.18);
}
.e-exemplo-et {
  display: block; margin-bottom: 7px;
  font-family: var(--f-mono); font-size: .55rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--zap);
}
.e-exemplo p { font-size: .84rem; line-height: 1.55; color: var(--tx-esc-2); }
.e-exemplo b { color: var(--tx-esc); font-weight: 700; }

/* ---------- quem seleciona ---------- */
.e-autor {
  display: flex; align-items: center; gap: 28px; margin-top: 22px;
  padding: 28px 30px; border-radius: 20px;
  background: linear-gradient(120deg, var(--navy) 0%, var(--fundo) 100%);
  box-shadow: 0 20px 48px rgba(10,27,61,.18);
}
.e-autor img {
  width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
  object-position: top center; flex-shrink: 0;
  border: 3px solid rgba(52,226,228,.4);
}
.e-autor-et {
  display: block; margin-bottom: 6px;
  font-family: var(--f-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ciano);
}
.e-autor h3 {
  font-family: var(--f-tit); font-weight: 600; font-size: 1.35rem; color: #fff; margin-bottom: 8px;
}
.e-autor p { font-size: .92rem; line-height: 1.62; color: var(--tx-2); max-width: 620px; }
.e-autor b { color: #fff; }

.e-numeros { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.e-numeros li { display: flex; align-items: baseline; gap: 8px; }
.e-numeros b {
  font-family: var(--f-tit); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--ciano);
}
.e-numeros span { font-size: .76rem; line-height: 1.35; color: var(--tx-3); max-width: 130px; }

/* ---------- fecho ---------- */
.e-fecho { margin-top: 32px; text-align: center; }
.e-btn { width: auto; padding: 17px 34px; }
.e-obs {
  margin-top: 12px; font-family: var(--f-mono); font-size: .68rem; color: var(--tx-esc-2);
}

@media (max-width: 900px) {
  .e-cards { grid-template-columns: 1fr; }
  .e-autor { flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 22px; }
  .e-autor img { width: 84px; height: 84px; }
}
@media (max-width: 560px) {
  .entrega { padding: 46px 20px 54px; }
  .e-btn { width: 100%; }
  .e-numeros { gap: 16px; }
  .e-numeros span { max-width: 100px; font-size: .72rem; }
}

/* =============================================
   RODAPÉ — uma linha, sem link nenhum
   ============================================= */
.rodape { padding: 18px 24px; background: #030713; text-align: center; }
.rodape p { font-family: var(--f-mono); font-size: .63rem; color: var(--tx-3); line-height: 1.7; }

/* =============================================
   RESPONSIVO — no celular vira uma coluna,
   com a promessa curta em cima e o formulário logo abaixo
   ============================================= */
@media (max-width: 940px) {
  .tela { grid-template-columns: 1fr; min-height: 0; }
  /* No celular a metade escura é só a abertura: quanto antes o formulário
     aparecer, melhor. Por isso tudo aqui encolhe. */
  .lado-promessa { padding: 26px 22px 30px; }
  .promessa { max-width: 100%; }
  .marca { margin-bottom: 20px; }
  .tag { margin-bottom: 16px; padding: 7px 13px; font-size: .63rem; }
  h1 { font-size: clamp(1.75rem, 6.4vw, 2.2rem); margin-bottom: 14px; }
  .sub { font-size: .96rem; margin-bottom: 20px; }
  .itens { margin-bottom: 22px; gap: 10px; }
  .itens li { font-size: .92rem; }
  .assinatura { padding-top: 18px; gap: 12px; }
  .assinatura img { width: 44px; height: 44px; }
  .assinatura span { font-size: .75rem; }
  .lado-form { padding: 30px 22px 40px; }
  .cartao { max-width: 480px; }
}

@media (max-width: 420px) {
  .cartao-conteudo h2 { font-size: 1.62rem; }
  .campo input { padding: 14px 15px; }
  .itens li { font-size: .93rem; }
}

/* =============================================
   ACESSIBILIDADE
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .ok-ico { animation: none; }
  .btn-load i { animation-duration: 2s; }
  * { transition-duration: .1s !important; }
}