/* ==========================================================================
   LP do curso — réplica da página atual
   Fundo preto, verde neon como cor de ação, vermelho na oferta e na urgência.
   Nunito local, sem chamada externa.
   ========================================================================== */

@font-face{font-family:Nunito;src:url(../fonts/nunito-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(../fonts/nunito-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url(../fonts/nunito-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(../fonts/nunito-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url(../fonts/nunito-900.woff2) format('woff2');font-weight:900;font-display:swap}

:root{
  --preto:#000000;
  --verde:#00E24A;
  --verde-esc:#00C440;
  --vermelho:#FF2418;
  --branco:#FFFFFF;
  --cinza:#C9CDD2;
  --linha:#2A2A2A;
  --fonte:Nunito,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --container:min(920px, calc(100vw - 32px));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--preto);color:var(--branco);font-family:var(--fonte);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 1em}
h1,h2,h3{margin:0 0 .4em;line-height:1.14;font-weight:900;letter-spacing:-.02em}
em{font-style:normal;color:var(--verde)}
.container{width:var(--container);margin-inline:auto;text-align:center}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px}

/* ---------- Topo com a marca ----------
   Larguras iguais às do original: 23% no desktop, 66% no celular. */
.topo{padding:22px 16px;text-align:center}
.topo img{width:23%;max-width:280px;height:auto;margin:0 auto}

/* ---------- Herói ---------- */
.heroi{position:relative;padding:14px 0 54px;overflow:hidden;isolation:isolate}
/* Brilho verde decorativo atrás do vídeo, como no original. */
.brilho{position:absolute;left:-14%;top:8%;width:60%;height:74%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(0,226,74,.42) 0%,rgba(0,226,74,0) 68%);
  filter:blur(12px);pointer-events:none}

.heroi h1{font-size:clamp(28px,5vw,46px);margin-bottom:.25em}
.subtitulo{font-size:clamp(18px,2.6vw,26px);font-weight:400;color:var(--branco);
  max-width:26ch;margin:0 auto 30px;line-height:1.3}
.indicacao{color:var(--cinza);font-size:15px;margin-bottom:22px}
.indicacao strong{color:var(--verde)}

/* Vídeo vertical, enquadrado e centralizado. */
.video-quadro{max-width:420px;margin:0 auto 30px}
.video-quadro video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;
  background:#0b0b0b}

/* ---------- Botão ---------- */
.btn{display:block;width:100%;max-width:520px;margin:0 auto;
  background:var(--verde);color:#04210E;font-weight:900;font-size:clamp(15px,2.2vw,18px);
  letter-spacing:.01em;padding:20px 24px;border-radius:6px;
  transition:background .2s ease,transform .1s ease}
.btn:hover{background:var(--verde-esc)}
.btn:active{transform:translateY(1px)}

/* ---------- Diferenciais ---------- */
.secao{padding:56px 0 62px}
.secao h2{font-size:clamp(26px,4.2vw,40px);font-weight:700}
.secao-sub{color:var(--branco);font-size:clamp(15px,2vw,18px);font-weight:400;
  margin-bottom:42px}

.beneficios{display:grid;gap:30px;text-align:left;max-width:820px;margin:0 auto}
.beneficios li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.tick{color:var(--verde);margin-top:4px}
.beneficios h3{color:var(--verde);font-size:clamp(18px,2.4vw,23px);font-weight:900;
  margin-bottom:.35em}
.beneficios p{color:var(--branco);font-size:14.5px;line-height:1.6;margin:0;
  max-width:74ch;opacity:.95}

/* ---------- Oferta ---------- */
.oferta{padding:34px 0 62px}
.oferta-chamada{font-size:15px;color:var(--branco);margin-bottom:14px}
.oferta-de{color:var(--vermelho);font-size:clamp(28px,4.6vw,40px);font-weight:900;
  text-decoration:line-through;text-decoration-thickness:3px;margin-bottom:10px}
.oferta-selo{color:var(--verde);font-size:clamp(20px,3vw,28px);font-weight:400;
  margin-bottom:6px}
.oferta-por{color:var(--verde);font-size:clamp(34px,7vw,58px);font-weight:900;
  line-height:1.05;margin-bottom:10px;letter-spacing:-.03em}
.oferta-parcela{color:var(--verde);font-size:clamp(17px,2.6vw,24px);font-weight:400;
  margin-bottom:30px}

/* ---------- Prova ---------- */
.prova{padding:0 0 70px}
.divisor{border:0;border-top:1px solid var(--linha);margin:0 0 34px}
.prova-1{font-size:clamp(22px,3.6vw,34px);font-weight:400;margin-bottom:.35em}
.prova-2{color:var(--vermelho);font-size:clamp(24px,4vw,36px);font-weight:900;
  margin-bottom:34px}

.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:38px}
.galeria figure{margin:0;border-radius:4px;overflow:hidden;background:#111}
/* Retrato e paisagem convivem, como no original: a altura acompanha a imagem
   em vez de recortar tudo no mesmo formato. */
.galeria img{width:100%;height:auto;object-fit:contain}

/* ---------- Rodapé ---------- */
.rodape{padding:34px 0 40px;border-top:1px solid var(--linha);
  color:#7C838A;font-size:13px;text-align:center}
.rodape img{width:210px;height:auto;margin:0 auto 18px}
.rodape p{margin:0 0 6px}
.legal{font-size:12px;color:#5E656B}

/* ---------- WhatsApp ----------
   Com tooltip e contador, como o widget que está no ar hoje. */
.zap{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#25D366;color:#0a2b16;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.zap:hover{background:#1FBE5B}
.zap-tooltip{position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%);white-space:nowrap;background:#fff;color:#1B1F23;
  font-size:13.5px;font-weight:700;padding:9px 14px;border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.35)}
.zap-tooltip::after{content:"";position:absolute;left:100%;top:50%;
  transform:translateY(-50%);border:6px solid transparent;border-left-color:#fff}
.zap-badge{position:absolute;top:-3px;right:-3px;width:20px;height:20px;
  border-radius:50%;background:#FF2418;color:#fff;font-size:11.5px;font-weight:900;
  display:flex;align-items:center;justify-content:center}

/* ---------- Mobile ---------- */
@media (max-width:680px){
  .topo{padding:18px 16px}
  .topo img{width:158px}
  .heroi{padding:8px 0 44px}
  .brilho{left:-30%;width:100%;height:56%}
  .subtitulo{font-size:17.5px;max-width:24ch;margin-bottom:24px}
  .video-quadro{max-width:100%;margin-bottom:24px}
  .btn{padding:18px 18px;font-size:15px;max-width:100%}
  .secao{padding:44px 0 48px}
  .beneficios{gap:24px}
  .beneficios li{grid-template-columns:28px 1fr;gap:11px}
  .galeria{grid-template-columns:repeat(2,1fr);gap:10px}
  .zap{width:52px;height:52px;right:14px;bottom:14px}
  /* No celular o tooltip ocuparia meia tela: fica só o botão. */
  .zap-tooltip{display:none}
  .topo img{width:66%;max-width:none}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}