/* ====================================================================
   GESTOR DE TRÁFEGO NA ERA DA IA — página de vendas
   Tokens e componentes herdados de site.css (gtgmarketing.com.br)
   Estratégia de compatibilidade:
     base  = flexbox coluna única  -> funciona em IE11
     grade = dentro de @supports   -> IE11 ignora e mantém o empilhado
   ==================================================================== */

:root{
  --color-primary:#1E88E5;
  --color-primary-dark:#1565C0;
  --color-primary-deep:#0D4E9E;
  --color-bg:#F0F3F5;
  --color-surface:#FFFFFF;
  --color-dark:#181F2A;
  --color-dark-surface:#1F2837;
  --color-text:#242424;
  --color-text-light:#FFFFFF;
  --color-muted:#6B7280;
  --color-border:#E2E8F0;
  --color-jornada:#E5F0FB;

  --font-heading:'Sora',"Segoe UI",Helvetica,sans-serif;
  --font-body:'DM Sans',"Segoe UI",Helvetica,sans-serif;

  --px:24px;
  --py:64px;
  --container:560px;

  --radius-btn:14px;
  --radius-card:16px;
  --radius-img:20px;

  --shadow-sm:0 2px 8px rgba(30,136,229,.06);
  --shadow-md:0 8px 24px rgba(30,136,229,.10);
  --shadow-lg:0 16px 48px rgba(30,136,229,.14);
  --shadow-cta:0 12px 28px rgba(30,136,229,.35);

  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:560px){ :root{--px:40px;} }
@media (min-width:900px){ :root{--px:64px;--py:104px;--container:1180px;} }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body{
  margin:0;
  background:#F0F3F5;
  background:var(--color-bg);
  color:#242424;
  color:var(--color-text);
  font-family:"Segoe UI",Helvetica,sans-serif;
  font-family:var(--font-body);
  font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block;}
img,video{height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}
h1,h2,h3,p,blockquote,figure,ul,ol{margin:0;}
ul,ol{padding:0;list-style:none;}

/* ---------- layout base ---------- */
.section{padding:64px 0;padding:var(--py) 0;position:relative;overflow:hidden;}
.wrap{
  width:100%;max-width:560px;max-width:var(--container);
  margin:0 auto;padding:0 24px;padding:0 var(--px);
  position:relative;z-index:1;
}
.wrap-narrow{max-width:520px;}
@media (min-width:900px){ .wrap-narrow{max-width:760px;} }
.br-d{display:none;}
@media (min-width:900px){ .br-d{display:inline;} }

.section-soft{background:#F0F3F5;background:var(--color-bg);}
.section-surface{background:#FFFFFF;background:var(--color-surface);}
.section-jornada{background:#E5F0FB;background:var(--color-jornada);}
.section-dark{
  background:#181F2A;
  background:radial-gradient(120% 80% at 50% 0%, #1F2837 0%, #181F2A 60%);
  color:#fff;
}
.section-blue{
  background:#1565C0;
  background:linear-gradient(135deg,#1E88E5 0%,#1565C0 70%,#0D3D6B 100%);
  color:#fff;
}

/* ---------- tipografia ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--font-heading);font-weight:700;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#1E88E5;color:var(--color-primary);margin-bottom:14px;
}
.section-dark .eyebrow,.section-blue .eyebrow{color:#BFE0FF;}

.sec-head{margin-bottom:34px;}
@media (min-width:900px){ .sec-head{margin-bottom:48px;} }

.sec-title{
  font-family:var(--font-heading);font-weight:700;
  font-size:26px;line-height:1.18;letter-spacing:-.01em;
  text-wrap:balance;
}
@media (min-width:900px){ .sec-title{font-size:38px;line-height:1.12;} }

.sec-intro{margin-top:14px;font-size:15px;color:#6B7280;color:var(--color-muted);max-width:42ch;}
@media (min-width:900px){ .sec-intro{font-size:17px;max-width:52ch;} }
.section-dark .sec-intro,.section-blue .sec-intro{color:rgba(255,255,255,.72);}

.anchor{
  font-family:var(--font-heading);font-weight:700;font-style:normal;
  font-size:19px;line-height:1.35;letter-spacing:-.01em;text-wrap:balance;
  color:#242424;color:var(--color-text);
  margin-top:34px;max-width:560px;
}
@media (min-width:900px){
  .anchor{font-size:24px;margin-top:42px;max-width:620px;}
}
.section-dark .anchor,.section-blue .anchor{color:#fff;}
/* Sobre o azul claro da seção "Como funciona" o azul de destaque é o
   tom escuro da paleta: o #1E88E5 dá só 3,19:1 de contraste ali, e o
   #1565C0 dá 4,98:1, passando no AA também para texto normal. */
/* Frase de fechamento da seção "Como funciona".
   Aqui o fundo já é azul claro (#E5F0FB), então o azul principal da
   marca ficava lavado: só 3,19:1 de contraste. Esta é a mesma rampa
   de azul, um passo mais funda, e sobe para 6,99:1 — o texto ganha
   presença sem virar marinho e sem sair da paleta. */
.section-jornada .anchor{color:#0D4E9E;color:var(--color-primary-deep);}
.center{text-align:center;}
.center .sec-intro,.center .anchor{margin-left:auto;margin-right:auto;}
/* o mesmo elemento pode carregar as duas classes; sem isto ele fica preso à esquerda */
.sec-intro.center,.anchor.center{margin-left:auto;margin-right:auto;}
.hl{color:#1E88E5;color:var(--color-primary);font-weight:700;}
.section-dark .hl,.section-blue .hl{color:#7FC0FF;}

/* ---------- botões ---------- */
.btn{
  display:-webkit-box;display:-ms-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  height:50px;padding:0 26px;
  border-radius:14px;border-radius:var(--radius-btn);
  border:1px solid transparent;cursor:pointer;width:100%;
  text-align:center;-webkit-tap-highlight-color:transparent;
  -webkit-transition:background .24s,box-shadow .24s,-webkit-transform .24s;
  transition:transform .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease);
}
.btn svg{-ms-flex:none;flex:none;}
.btn-primary{
  background:#1E88E5;background:var(--color-primary);color:#fff;
  box-shadow:var(--shadow-md);
}
.btn-primary:hover,.btn-primary:focus-visible{
  background:#1565C0;background:var(--color-primary-dark);
  box-shadow:var(--shadow-cta);
  -webkit-transform:translateY(-2px);transform:translateY(-2px);
}
:focus-visible{outline:3px solid #7FC0FF;outline-offset:3px;}
@media (min-width:900px){
  .btn{width:auto;min-width:260px;}
  .btn-block-d{width:100%;}
}

/* ---------- cards ---------- */
.card{
  background:#FFFFFF;background:var(--color-surface);
  border:1px solid #E2E8F0;border:1px solid var(--color-border);
  border-radius:16px;border-radius:var(--radius-card);
  padding:24px;box-shadow:var(--shadow-sm);
  -webkit-transition:box-shadow .28s,-webkit-transform .28s;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
  margin-bottom:20px;
}
.card:last-child{margin-bottom:0;}
.card:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.card-icon{color:#1E88E5;color:var(--color-primary);margin-bottom:14px;}
.card-title{font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.3;margin-bottom:8px;}
.card-text{font-size:15px;color:#6B7280;color:var(--color-muted);}
@media (min-width:900px){
  .card{padding:30px 26px;}
  .card-title{font-size:20px;}
}

/* grades: só com suporte a grid. IE11 fica no empilhado acima. */
@supports (display:grid){
  .grid{display:grid;gap:20px;}
  .card{margin-bottom:0;}
  @media (min-width:560px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;} }
  @media (min-width:900px){
    .grid{gap:24px;}
    .grid-3{grid-template-columns:repeat(3,1fr);}
    .grid-4{grid-template-columns:repeat(4,1fr);}
  }
}

/* ---------- moldura padrão de captura de tela ---------- */
.shot{
  width:100%;
  border:1px solid #E2E8F0;border:1px solid var(--color-border);
  border-radius:20px;border-radius:var(--radius-img);
  box-shadow:var(--shadow-md);background:#fff;overflow:hidden;
}
.shot img,.shot video{width:100%;display:block;}
/* ---------- fachada do vídeo ------------------------------------
   A página carrega só a imagem de capa. O iframe do Vimeo nasce no
   clique, então o script do player não entra no carregamento e quem
   não assiste não paga por ele.
   A capa é um quadro real do vídeo e entra desfocada e escurecida:
   dá contexto sem competir com o botão. O player de fundo, quando
   carrega, recebe exatamente o mesmo tratamento. O scale evita que
   as bordas do desfoque apareçam.                                  */
.video-facade{
  position:relative;width:100%;overflow:hidden;cursor:pointer;
  padding-top:56.25%;
  border-radius:20px;border-radius:var(--radius-img);
  background:#0B1119;
  background:-webkit-radial-gradient(50% 42%,120% 120%,#16202C 0%,#0B1119 68%);
  background:radial-gradient(120% 120% at 50% 42%,#16202C 0%,#0B1119 68%);
  box-shadow:0 18px 44px rgba(4,8,16,.44);
  -webkit-transition:box-shadow .3s;transition:box-shadow .3s var(--ease);
}
.video-facade img,
.video-facade iframe{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;border:0;
}
.video-facade img,
.video-facade .video-bg{
  -o-object-fit:cover;object-fit:cover;
  -webkit-transform:scale(1.14);transform:scale(1.14);
  -webkit-filter:blur(11px) brightness(.70);filter:blur(11px) brightness(.70);
  -webkit-transition:-webkit-filter .35s;transition:filter .35s var(--ease);
}
/* o vídeo de fundo é decorativo: não recebe clique nem foco */
.video-facade .video-bg{pointer-events:none;}
.video-facade:hover img,
.video-facade:hover .video-bg{
  -webkit-filter:blur(8px) brightness(.80);filter:blur(8px) brightness(.80);
}
/* quando o player de verdade entra, nada de desfoque */
.video-facade.is-playing iframe{
  -webkit-transform:none;transform:none;
  -webkit-filter:none;filter:none;
  pointer-events:auto;
}
.video-facade:hover{box-shadow:0 24px 56px rgba(4,8,16,.56);}
.video-play{
  position:absolute;left:50%;top:50%;z-index:1;
  -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  width:74px;height:74px;padding:0;
  border:0;border-radius:50%;cursor:pointer;line-height:0;
  background:#1E88E5;
  background:-webkit-linear-gradient(315deg,#2E97F0,#1565C0);
  background:linear-gradient(135deg,#2E97F0,#1565C0);
  color:#fff;
  box-shadow:0 12px 30px rgba(21,101,192,.5);
  -webkit-transition:box-shadow .26s,-webkit-transform .26s;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.video-play svg{display:block;}
.video-facade:hover .video-play{
  -webkit-transform:translate(-50%,-50%) scale(1.07);transform:translate(-50%,-50%) scale(1.07);
  box-shadow:0 16px 38px rgba(21,101,192,.62);
}
.video-facade.is-playing{cursor:default;}
.video-facade.is-playing .video-play{display:none;}
@media (min-width:900px){
  .video-play{width:88px;height:88px;}
  .video-play svg{width:34px;height:34px;}
}

/* placeholder visível enquanto a captura real não existe */
.shot-ph{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  min-height:190px;padding:20px;text-align:center;
  background:#EAF1F8;color:#5B7086;
  font-family:var(--font-heading);font-size:12px;font-weight:700;
  letter-spacing:.06em;word-break:break-all;
}

/* ====================================================================
   TRANSIÇÃO DA DOBRA 1 PARA A DOBRA 2
   A segunda seção começa exatamente na cor em que o hero termina
   (#04060A, medido na borda inferior) e continua o degradê para baixo
   até chegar ao branco, antes do título. Sem emenda entre as duas.
   As paradas são em pixels, e a rampa é longa e suavizada (16 paradas
   com curva de aceleração) para não existir trecho que mude rápido
   nem faixa cinza com borda visível. O miolo leva um leve viés azul,
   para a matiz continuar a do hero em vez de virar cinza neutro.
   ==================================================================== */
#metodo{
  padding-top:320px;
  background:#FFFFFF;
  background:-webkit-linear-gradient(top,
    #04060A 0px,
    #02050B 25px,
    #020710 50px,
    #070D19 75px,
    #111927 100px,
    #212B3B 125px,
    #374253 150px,
    #515C6E 175px,
    #6E788A 200px,
    #8B96A7 225px,
    #A8B1C1 250px,
    #C2CAD8 275px,
    #D8DFE9 300px,
    #E9EEF6 325px,
    #F5F8FD 350px,
    #FCFDFF 375px,
    #FFFFFF 400px);
  background:linear-gradient(to bottom,
    #04060A 0px,
    #02050B 25px,
    #020710 50px,
    #070D19 75px,
    #111927 100px,
    #212B3B 125px,
    #374253 150px,
    #515C6E 175px,
    #6E788A 200px,
    #8B96A7 225px,
    #A8B1C1 250px,
    #C2CAD8 275px,
    #D8DFE9 300px,
    #E9EEF6 325px,
    #F5F8FD 350px,
    #FCFDFF 375px,
    #FFFFFF 400px);
}
@media (min-width:900px){
  #metodo{
    padding-top:440px;
    background:-webkit-linear-gradient(top,
      #04060A 0px,
      #02050B 35px,
      #020710 70px,
      #070D19 105px,
      #111927 140px,
      #212B3B 175px,
      #374253 210px,
      #515C6E 245px,
      #6E788A 280px,
      #8B96A7 315px,
      #A8B1C1 350px,
      #C2CAD8 385px,
      #D8DFE9 420px,
      #E9EEF6 455px,
      #F5F8FD 490px,
      #FCFDFF 525px,
      #FFFFFF 560px);
    background:linear-gradient(to bottom,
      #04060A 0px,
      #02050B 35px,
      #020710 70px,
      #070D19 105px,
      #111927 140px,
      #212B3B 175px,
      #374253 210px,
      #515C6E 245px,
      #6E788A 280px,
      #8B96A7 315px,
      #A8B1C1 350px,
      #C2CAD8 385px,
      #D8DFE9 420px,
      #E9EEF6 455px,
      #F5F8FD 490px,
      #FCFDFF 525px,
      #FFFFFF 560px);
  }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;isolation:isolate;color:#fff;overflow:hidden;
  padding:0;
  background:#080C12;
  background:radial-gradient(130% 100% at 50% -8%, #16202E 0%, #0E1520 38%, #080C12 68%, #04060A 100%);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  min-height:96vh;
}
@supports (min-height:96svh){ .hero{min-height:96svh;} }
@media (min-width:900px){ @supports (min-height:103svh){ .hero{min-height:103svh;} } }
.hero-nav{width:100%;max-width:var(--container);margin:0 auto;padding:24px var(--px) 0;}
.hero-brand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:700;font-size:14px;letter-spacing:.02em;}
.hero-inner{
  width:100%;max-width:var(--container);margin:0 auto;
  padding:24px var(--px) 40px;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding-bottom:26vh;
}
/* véu radial atrás do texto: garante contraste quando a imagem sobe */
.hero-inner::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;
  width:130%;height:78%;pointer-events:none;
  -webkit-transform:translate(-50%,-56%);transform:translate(-50%,-56%);
  background:-webkit-radial-gradient(50% 50%, 60% 50%, rgba(4,6,10,.72) 0%, rgba(4,6,10,.42) 46%, rgba(4,6,10,0) 74%);
  background:radial-gradient(60% 50% at 50% 50%, rgba(4,6,10,.72) 0%, rgba(4,6,10,.42) 46%, rgba(4,6,10,0) 74%);
}
.hero-title{
  position:relative;
  margin-left:auto;margin-right:auto;
  font-family:var(--font-heading);font-weight:800;
  font-size:27px;font-size:clamp(21px,6.6vw,27px);
  line-height:1.16;letter-spacing:-.02em;text-wrap:balance;margin-top:6px;
}
.hero-sub{margin-top:30px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.88);max-width:46ch;margin-left:auto;margin-right:auto;}
.hero-cta{margin-top:42px;width:100%;max-width:340px;}
.hero-byline{margin-top:30px;font-size:13px;color:rgba(255,255,255,.72);}
.blob{position:absolute;border-radius:50%;-webkit-filter:blur(2.5px);filter:blur(2.5px);z-index:-1;pointer-events:none;}
.blob-a{width:340px;height:340px;left:-110px;bottom:-90px;background:radial-gradient(circle,rgba(30,136,229,.34),transparent 68%);}
.blob-b{width:300px;height:300px;right:-90px;top:40px;background:radial-gradient(circle,rgba(46,151,240,.26),transparent 68%);}

@media (min-width:700px){
  .hero-title{font-size:40px;font-size:clamp(30px,8.4vw,40px);}
}
@media (min-width:900px){
  .hero-inner{padding:0 var(--px) 24vh;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
  .hero-title{font-size:42px;font-size:clamp(30px,3.15vw,42px);line-height:1.16;max-width:30ch;}
  .hero-sub{font-size:19px;margin-top:38px;max-width:56ch;}
  .hero-cta{margin-top:50px;}
  .hero-byline{margin-top:34px;}
}

/* ---------- citação / vozes ---------- */
.quote{max-width:920px;margin:0 auto;position:relative;text-align:center;}
.quote-marks{
  font-family:var(--font-heading);font-weight:800;
  font-size:120px;line-height:1;color:rgba(255,255,255,.18);
  display:block;margin-bottom:-30px;
}
.voice{
  font-family:var(--font-heading);font-weight:700;
  font-size:22px;line-height:1.32;margin:0 0 24px;text-wrap:balance;
}
@media (min-width:900px){
  .quote-marks{font-size:200px;margin-bottom:-70px;}
  .voice{font-size:34px;line-height:1.28;margin-bottom:32px;}
}

/* ---------- split texto/imagem ---------- */
.split{display:block;}
.split-media{margin-bottom:28px;}
@supports (display:grid){
  @media (min-width:900px){
    .split{display:grid;gap:0 60px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;grid-template-columns:1.1fr .9fr;}
    .split-media{margin-bottom:0;}
    .split-rev .split-media{order:-1;}
  }
}

/* ---------- lista de consequências ---------- */
.conseq li{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:16px;
}
.conseq li:last-child{border-bottom:0;}
.conseq svg{-ms-flex:none;flex:none;color:#7FC0FF;margin-top:3px;}

/* ---------- timeline dos 4 passos ---------- */
.timeline{position:relative;padding-left:0;}
.tl-item{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:18px;padding-bottom:28px;position:relative;
}
.tl-item:last-child{padding-bottom:0;}
.tl-node{
  -ms-flex:none;flex:none;
  width:48px;height:48px;border-radius:50%;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  background:#1E88E5;background:var(--color-primary);color:#fff;
  font-family:var(--font-heading);font-weight:800;font-size:16px;
  box-shadow:0 0 0 6px #fff,var(--shadow-sm);
}
.tl-title{font-family:var(--font-heading);font-weight:700;font-size:19px;margin-bottom:0;}
.tl-text{font-size:15px;color:#6B7280;color:var(--color-muted);}
@supports (display:grid){
  @media (min-width:900px){
    .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:20px;}
    .tl-title{font-size:21px;}
    .timeline::before{
      content:"";position:absolute;left:24px;right:24px;top:23px;height:2px;
      background:linear-gradient(to right,#1E88E5,rgba(30,136,229,.18));
    }
    .tl-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0;padding-bottom:0;}
    .tl-node{margin-bottom:20px;}
  }
}

/* ---------- lista com check ---------- */
.checks li{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:12px;padding:12px 0;font-size:15px;
}
.checks svg{-ms-flex:none;flex:none;color:#1E88E5;color:var(--color-primary);margin-top:2px;}
@supports (display:grid){
  @media (min-width:900px){ .checks{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;} }
}

/* ---------- ancoragem e oferta ---------- */
.anchor-banner{
  position:relative;overflow:hidden;
  border-radius:16px;border-radius:var(--radius-card);
  background:#1565C0;
  background:linear-gradient(135deg,#1E88E5,#1565C0);
  color:#fff;padding:24px;box-shadow:var(--shadow-md);
}
.anchor-banner .glow{
  position:absolute;width:250px;height:250px;right:-80px;top:-90px;border-radius:50%;
  background:radial-gradient(circle,rgba(127,192,255,.4),transparent 65%);pointer-events:none;
}
.anchor-label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.anchor-val{display:block;margin-top:6px;font-family:var(--font-heading);font-weight:800;font-size:23px;letter-spacing:-.01em;}
.anchor-desc{margin-top:10px;font-size:14px;color:rgba(255,255,255,.9);}
@media (min-width:900px){ .anchor-banner{padding:28px 36px;} .anchor-val{font-size:26px;} }

.offer{
  max-width:640px;margin:32px auto 0;
  background:#FFFFFF;background:var(--color-surface);color:#242424;color:var(--color-text);
  border:1.5px solid #1E88E5;border:1.5px solid var(--color-primary);
  border-radius:16px;border-radius:var(--radius-card);
  padding:28px 24px;text-align:center;box-shadow:var(--shadow-lg);
}
.offer-tag{
  display:inline-block;background:#1E88E5;background:var(--color-primary);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:16px;
}
.offer-old{font-size:14px;color:#6B7280;color:var(--color-muted);}
/* âncora de preço: o valor cheio riscado, logo acima do preço real */
.offer-from{
  margin-top:12px;font-size:16px;font-weight:700;
  color:#6B7280;color:var(--color-muted);
}
.offer-from s{
  text-decoration:line-through;
  -webkit-text-decoration-color:rgba(217,58,58,.85);text-decoration-color:rgba(217,58,58,.85);
  text-decoration-thickness:2px;
}
@media (min-width:900px){ .offer-from{font-size:18px;} }
.offer-price{
  font-family:var(--font-heading);font-weight:800;
  font-size:32px;font-size:clamp(28px,9vw,38px);line-height:1.1;letter-spacing:-.02em;
  color:#1E88E5;color:var(--color-primary);margin:4px 0 4px;
}
.offer-cash{font-size:16px;font-weight:700;}
.offer-cta{margin-top:22px;}
.seals{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:10px 20px;margin-top:20px;font-size:13px;color:#6B7280;color:var(--color-muted);
}
.seals span{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:7px;}
.seals svg{color:#1E88E5;color:var(--color-primary);}

/* ---------- garantia ---------- */
.guarantee{
  max-width:680px;margin:0 auto;text-align:center;
  border:1px solid #E2E8F0;border:1px solid var(--color-border);
  border-radius:16px;border-radius:var(--radius-card);
  padding:32px 24px;background:#fff;box-shadow:var(--shadow-sm);
}
.seal{
  width:88px;height:88px;margin:0 auto 18px;border-radius:50%;
  border:2px solid #1E88E5;border:2px solid var(--color-primary);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  color:#1E88E5;color:var(--color-primary);
  font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.04em;
}
@media (min-width:900px){ .seal{width:120px;height:120px;font-size:15px;} }

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;}
.faq-item{
  border-bottom:1px solid #E2E8F0;border-bottom:1px solid var(--color-border);
}
.faq-q{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  gap:16px;width:100%;background:none;border:0;cursor:pointer;
  padding:20px 0;text-align:left;
  font-family:var(--font-heading);font-weight:700;font-size:16px;color:inherit;
}
.faq-q svg{-ms-flex:none;flex:none;color:#1E88E5;color:var(--color-primary);-webkit-transition:-webkit-transform .3s;transition:transform .3s;}
.faq-item.open .faq-q svg{-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.faq-a{overflow:hidden;max-height:0;opacity:0;-webkit-transition:max-height .45s ease,opacity .3s ease;transition:max-height .45s ease,opacity .3s ease;}
.faq-item.open .faq-a{max-height:520px;opacity:1;}
.faq-a p{padding:0 0 20px;font-size:15px;color:#6B7280;color:var(--color-muted);max-width:64ch;}

/* ---------- rodapé ---------- */
.footer{
  background:#1565C0;
  background:linear-gradient(135deg,#1E88E5 0%,#1565C0 70%,#0D3D6B 100%);
  color:#fff;padding:48px 0 40px;
}
.foot-name{font-family:var(--font-heading);font-weight:800;font-size:18px;}
.foot-desc{margin-top:6px;font-size:14px;color:rgba(255,255,255,.86);}
.foot-line{margin-top:4px;font-size:14px;color:rgba(255,255,255,.86);}
.foot-wa{margin-top:14px;}
/* Sem flexbox aqui de propósito: ícone e número precisam ficar sempre
   na mesma linha, inclusive em navegador que ignore flex ou gap.
   inline-block + nowrap resolve em qualquer motor, IE incluído. */
.foot-wa a{
  display:inline-block;
  white-space:nowrap;
  color:#fff;font-weight:700;font-size:15px;line-height:1.2;
}
.foot-wa svg{
  display:inline-block;vertical-align:middle;
  margin-right:9px;position:relative;top:-1px;
}
.foot-wa a span{
  display:inline-block;vertical-align:middle;
  border-bottom:1px solid rgba(255,255,255,.5);
}
.foot-wa a:hover span,.foot-wa a:focus-visible span{border-bottom-color:#fff;}
.foot-cnpj{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:14px;}
/* bloco legal: razão social e CNPJ, uma informação por linha */
.foot-legal{margin-top:18px;}
.foot-legal p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.78);}
.foot-copy{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:12.5px;color:rgba(255,255,255,.6);}

/* ---------- animação de entrada ----------
   Regra da página: todo elemento com conteúdo entra oculto e sobe de
   baixo para cima com um deslize leve, no momento em que já subiu 20%
   da tela visível (o corte de 20% vive no rootMargin do observer, em
   pagina.js). Sem suporte a IntersectionObserver ou com movimento
   reduzido, .motion nunca entra no body e tudo fica visível.        */
.reveal{opacity:1;-webkit-transform:none;transform:none;}
@media (prefers-reduced-motion:no-preference){
  body.motion .reveal{
    -webkit-transition:opacity .68s,-webkit-transform .68s;
    transition:opacity .68s var(--ease),transform .68s var(--ease);
    will-change:opacity,transform;
  }
  body.motion .reveal:not(.in){
    opacity:0;
    -webkit-transform:translateY(28px);
    transform:translateY(28px);
  }
  /* blocos fechados (caixas com conteúdo) sobem um pouco mais */
  body.motion .card.reveal:not(.in),
  body.motion .agent.reveal:not(.in),
  body.motion .bonus.reveal:not(.in),
  body.motion .shot.reveal:not(.in),
  body.motion .offer.reveal:not(.in),
  body.motion .step.reveal:not(.in),
  body.motion .note.reveal:not(.in),
  body.motion .eq-row.reveal:not(.in){
    -webkit-transform:translateY(38px);
    transform:translateY(38px);
  }
  body.motion .reveal[data-d="1"]{-webkit-transition-delay:.06s;transition-delay:.06s;}
  body.motion .reveal[data-d="2"]{-webkit-transition-delay:.14s;transition-delay:.14s;}
  body.motion .reveal[data-d="3"]{-webkit-transition-delay:.22s;transition-delay:.22s;}
  body.motion .reveal[data-d="4"]{-webkit-transition-delay:.30s;transition-delay:.30s;}
  body.motion .reveal[data-d="5"]{-webkit-transition-delay:.38s;transition-delay:.38s;}
  body.motion .reveal[data-d="6"]{-webkit-transition-delay:.46s;transition-delay:.46s;}
  body.motion .reveal[data-d="7"]{-webkit-transition-delay:.54s;transition-delay:.54s;}
}
/* ---------- regra global: preço nunca quebra em duas linhas ----------
   Todo "R$ 197" da página fica dentro de <span class="nb">.        */
.nb{white-space:nowrap;}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- faixa de números ---------- */
.stats{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:8px 0;text-align:center;
}
.stat{-webkit-box-flex:1;-ms-flex:1 1 50%;flex:1 1 50%;padding:14px 8px;}
.stat b{
  display:block;font-family:var(--font-heading);font-weight:800;
  font-size:30px;line-height:1;letter-spacing:-.02em;
  color:#1E88E5;color:var(--color-primary);
}
.stat span{display:block;margin-top:6px;font-size:13px;color:#6B7280;color:var(--color-muted);}
.section-blue .stat b,.section-dark .stat b{color:#fff;}
.section-blue .stat span,.section-dark .stat span{color:rgba(255,255,255,.76);}
@media (min-width:700px){
  .stat{-ms-flex:1 1 0%;flex:1 1 0%;padding:0 16px;}
  .stat b{font-size:38px;}
}

/* ---------- bloco curto sobre o autor ---------- */
.about{text-align:center;}
.about-photo{
  width:132px;height:132px;margin:0 auto 20px;border-radius:50%;overflow:hidden;
  border:3px solid rgba(255,255,255,.85);box-shadow:var(--shadow-md);background:#0D3D6B;
}
.about-photo img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}
@media (min-width:900px){ .about-photo{width:160px;height:160px;} }

/* ---------- blocos de agentes ---------- */
.agent{
  background:#FFFFFF;background:var(--color-surface);
  border:1px solid #E2E8F0;border:1px solid var(--color-border);
  border-radius:16px;border-radius:var(--radius-card);
  padding:22px 20px;box-shadow:var(--shadow-sm);margin-bottom:16px;
  -webkit-transition:box-shadow .28s,-webkit-transform .28s;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.agent:last-child{margin-bottom:0;}
.agent:hover{-webkit-transform:translateY(-4px);transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.agent-icon{color:#1E88E5;color:var(--color-primary);margin-bottom:12px;}
/* ---------- logos das plataformas dentro do card ---------- */
.agent-logos{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:16px;margin-bottom:14px;min-height:20px;
}
/* Marcas em SVG. A altura é ajustada marca a marca para que todas
   pesem o mesmo aos olhos: as largas ficam menores que as quadradas. */
.lg{width:auto;-ms-flex:none;flex:none;}
.agent-logos .lg{height:27px;}
.agent-logos .lg-meta{height:20px;}
.agent-logos .lg-ads{height:25px;}
.agent-logos .lg-ga4{height:26px;}
@media (min-width:900px){
  .agent-logos{gap:20px;margin-bottom:18px;}
  .agent-logos .lg{height:30px;}
  .agent-logos .lg-meta{height:22px;}
  .agent-logos .lg-ads{height:28px;}
  .agent-logos .lg-ga4{height:29px;}
}
.agent-name{font-family:var(--font-heading);font-weight:700;font-size:17px;line-height:1.3;margin-bottom:6px;}
.agent-text{font-size:14px;color:#6B7280;color:var(--color-muted);}
/* bloco dourado, mesma receita do gold-banner do site */
.agent-gold{
  position:relative;overflow:hidden;border:0;
  background:#C9981E;
  background:-webkit-linear-gradient(315deg,#C9981E 0%,#E8C25C 46%,#B5821A 100%);
  background:linear-gradient(135deg,#C9981E 0%,#E8C25C 46%,#B5821A 100%);
  box-shadow:0 16px 38px rgba(176,128,20,.32);
}
.agent-gold:hover{box-shadow:0 20px 46px rgba(176,128,20,.42);}
.agent-gold .agent-name{color:#2A1E04;position:relative;z-index:1;}
.agent-gold .agent-text{color:#5A4410;position:relative;z-index:1;}
.gold-glow{
  position:absolute;width:200px;height:200px;right:-60px;top:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 65%);pointer-events:none;
}
.agent-badge{
  position:relative;z-index:1;
  display:inline-block;background:#2A1E04;color:#F4D98A;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
@supports (display:grid){
  .agent{margin-bottom:0;}
  /* no máximo dois blocos por linha, do tablet ao desktop.
     O dourado fecha o bloco ocupando a largura inteira. */
  @media (min-width:560px){
    .grid-5{grid-template-columns:1fr 1fr;}
    .grid-5 .agent-lead,
    .grid-5 .agent-gold,
    .grid-5 .agent-bonus{grid-column:1 / -1;}
  }
  @media (min-width:900px){
    .grid-5{max-width:940px;margin-left:auto;margin-right:auto;}
  }
}

/* ---------- card de abertura da grade ----------------------------
   Escuro, com o símbolo do Claude: é a frase que apresenta o pacote
   antes de listar os agentes. Fica no topo e ocupa a linha inteira,
   no mesmo formato do card dourado que fecha a grade.             */
.agent-lead{
  position:relative;overflow:hidden;border:0;
  background:#0E1520;
  background:-webkit-radial-gradient(50% 0%, 120% 140%, #1B2534 0%, #0B1119 68%);
  background:radial-gradient(120% 140% at 50% 0%, #1B2534 0%, #0B1119 68%);
  box-shadow:0 16px 38px rgba(11,17,25,.34);
  padding:26px 24px;
}
.agent-lead:hover{box-shadow:0 20px 46px rgba(11,17,25,.46);}
.agent-lead{text-align:center;}
.agent-lead .agent-name{
  position:relative;z-index:1;color:#fff;
  font-size:20px;line-height:1.32;letter-spacing:-.01em;text-wrap:balance;
  max-width:22ch;margin-left:auto;margin-right:auto;
}

/* ---------- diagrama de conexão do card de abertura ---------------
   O Claude fica no topo, as quatro plataformas embaixo, e as curvas
   saem do mesmo ponto central até o centro de cada plataforma.
   Tudo vive numa caixa de 420px de largura fixa que escala junto:
   o SVG usa o mesmo viewBox de 420, e a régua de plataformas divide
   essa largura em quatro células iguais. Assim os fins das curvas
   caem exatamente no centro de cada logo, em qualquer tela.
   Os pontinhos percorrem a mesma curva com animateMotion, cada um
   com um atraso diferente, sugerindo tráfego de ida.               */
.hub{
  position:relative;z-index:1;
  width:100%;max-width:420px;margin:0 auto 22px;
}
.hub-claude{
  display:block;margin:0 auto;
  height:56px;width:auto;
}
.hub-wires{
  display:block;width:100%;height:auto;margin:6px auto 0;
  overflow:visible;
}
.hub-plats{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  margin-top:-4px;
}
.hub-plats span{
  -webkit-box-flex:1;-ms-flex:1 1 25%;flex:1 1 25%;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  min-width:0;
}
.hub-plats .lg{height:26px;width:auto;}
@media (prefers-reduced-motion:reduce){ .hub-dot{display:none;} }
@media (min-width:900px){
  .agent-lead{padding:40px 34px 36px;}
  .hub{max-width:520px;margin-bottom:28px;}
  .hub-claude{height:74px;}
  .hub-plats .lg{height:34px;}
  .agent-lead .agent-name{font-size:27px;max-width:26ch;}
}

/* ---------- card do bônus do ClickUp dentro da grade de agentes ----
   Azul da marca, para não brigar com o dourado do card de agentes
   secretos logo acima. A hierarquia da grade fica: agentes em branco,
   agentes secretos em dourado, bônus em azul.                       */
.agent-bonus{
  position:relative;overflow:hidden;border:0;
  background:#1565C0;
  background:-webkit-linear-gradient(315deg,#1E88E5 0%,#1565C0 68%,#0D3D6B 100%);
  background:linear-gradient(135deg,#1E88E5 0%,#1565C0 68%,#0D3D6B 100%);
  box-shadow:0 16px 38px rgba(21,101,192,.30);
}
.agent-bonus:hover{box-shadow:0 20px 46px rgba(21,101,192,.42);}
.agent-bonus .agent-badge{background:#08284A;color:#BFE0FF;}
.agent-bonus .agent-name{color:#fff;position:relative;z-index:1;}
.agent-bonus .agent-text{color:rgba(255,255,255,.88);position:relative;z-index:1;}
/* Alinhado à esquerda como os demais cards da grade. Só o card de
   abertura, que é um diagrama, fica centralizado. */
.agent-bonus .agent-logos{position:relative;z-index:1;gap:12px;}
.agent-bonus .agent-text{max-width:52ch;}
.agent-bonus .lg-clickup{height:30px;}
.agent-bonus .lg-claude{height:32px;}
.agent-bonus .combo-plus{color:rgba(255,255,255,.72);font-size:20px;}
@media (min-width:900px){
  .agent-bonus .lg-clickup{height:36px;}
  .agent-bonus .lg-claude{height:38px;}
}

/* ---------- bloco de fechamento da seção "Como funciona" ----------
   Card azul cheio, ao contrário dos três passos brancos acima: é a
   recompensa da sequência, não mais um passo. O degradê começa no
   #1565C0, o ponto mais claro do card, onde o texto branco ainda dá
   5,75:1 de contraste. Se começasse no #1E88E5 cairia para 3,68:1. */
.payoff{
  position:relative;overflow:hidden;
  max-width:560px;margin:34px auto 0;
  padding:30px 26px;text-align:center;
  background:#1565C0;
  background:-webkit-linear-gradient(315deg,#1E88E5 0%,#1565C0 68%,#0D3D6B 100%);
  background:linear-gradient(135deg,#1E88E5 0%,#1565C0 68%,#0D3D6B 100%);
  border:0;
  border-radius:16px;border-radius:var(--radius-card);
  box-shadow:0 18px 44px rgba(21,101,192,.34);
  -webkit-transition:box-shadow .28s,-webkit-transform .28s;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.payoff::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:-webkit-linear-gradient(bottom,#BFE0FF,#7FC0FF);
  background:linear-gradient(to top,#BFE0FF,#7FC0FF);
}
.payoff:hover{
  -webkit-transform:translateY(-4px);transform:translateY(-4px);
  box-shadow:0 24px 54px rgba(21,101,192,.44);
}
.payoff-icon{position:relative;z-index:1;display:block;color:#BFE0FF;margin:0 auto 14px;}
/* o reset deixa svg como block; sem esta margem o ícone encostaria
   à esquerda mesmo com o card centralizado */
.payoff-icon svg{margin:0 auto;}
/* Dourado vivo em degradê, usado no fecho da frase aqui e no
   "Mais faturamento" da equação. A cor cheia fica como base: em
   navegador sem recorte de fundo no texto, é ela que aparece. O
   degradê só entra dentro do @supports. Nenhuma parada desce abaixo
   de #F3C14A, que ainda dá 3,4:1 sobre o azul — suficiente para o
   corpo grande em que essas duas frases são usadas. */
.gold{color:#FFD97A;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gold{
    background:-webkit-linear-gradient(350deg,#FFEFC0 0%,#FFD97A 46%,#F3C14A 74%,#FFE9A8 100%);
    background:linear-gradient(100deg,#FFEFC0 0%,#FFD97A 46%,#F3C14A 74%,#FFE9A8 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}
.payoff-text{
  position:relative;z-index:1;
  font-family:var(--font-heading);font-weight:700;
  font-size:19px;line-height:1.42;letter-spacing:-.01em;text-wrap:balance;
  color:#FFFFFF;max-width:32ch;margin-left:auto;margin-right:auto;
}
@media (min-width:900px){
  .payoff{max-width:660px;padding:42px 40px;margin-top:42px;}
  .payoff-text{max-width:34ch;}
  .payoff-icon svg{width:30px;height:30px;}
  .payoff-icon{margin-bottom:18px;}
  .payoff-text{font-size:24px;}
}

/* ---------- hero: duas frases com respiro entre elas ---------- */
.hero-title span{display:block;}
.hero-title span + span{margin-top:.92em;}

/* A pergunta é a dúvida: menor, mais leve, em azul.
   A resposta é o soco: tamanho cheio, peso 800, branco.
   O contraste vem de tamanho e peso, não só de cor.        */
.hero-q{
  font-size:1em;font-weight:800;line-height:inherit;
  letter-spacing:inherit;color:#FF5A5A;
}
.hero-a{font-weight:800;}
.hero-nao{
  font-weight:800;color:#1E88E5;color:var(--color-primary);
  display:inline-block;
}
.hero-mark{display:inline !important;position:relative;white-space:nowrap;}
.hero-mark::after{
  content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.085em;border-radius:99px;
  background:-webkit-linear-gradient(left,#1E88E5,#2E97F0);
  background:linear-gradient(90deg,#1E88E5,#2E97F0);
  -webkit-transform:scaleX(0);transform:scaleX(0);
  -webkit-transform-origin:left center;transform-origin:left center;
}

/* entrada em sequência no carregamento */
@media (prefers-reduced-motion:no-preference){
  .hero-in{opacity:0;-webkit-animation:heroIn .75s var(--ease) both;animation:heroIn .75s var(--ease) both;}
  .hero-in[data-in="1"]{-webkit-animation-delay:.10s;animation-delay:.10s;}
  .hero-in[data-in="2"]{-webkit-animation-delay:.30s;animation-delay:.30s;}
  .hero-in[data-in="3"]{-webkit-animation-delay:.46s;animation-delay:.46s;}
  .hero-in[data-in="4"]{-webkit-animation-delay:.60s;animation-delay:.60s;}
  /* A resposta entra 1 segundo depois da pergunta.
     A pergunta começa em .10s, então a resposta começa em 1.10s.
     O espaço das duas linhas já está reservado no layout desde o
     carregamento, então nada pula quando a segunda aparece.        */
  .hero-a.hero-in{-webkit-animation-delay:1.10s;animation-delay:1.10s;}
  /* o traço sob "IA de verdade" só risca depois que a resposta terminou
     de entrar (1.10s + .75s = 1.85s) */
  .hero-mark::after{-webkit-animation:heroLine .7s var(--ease) 1.95s forwards;animation:heroLine .7s var(--ease) 1.95s forwards;}
}
@media (prefers-reduced-motion:reduce){
  .hero-mark::after{-webkit-transform:scaleX(1);transform:scaleX(1);}
}
@-webkit-keyframes heroIn{from{opacity:0;-webkit-transform:translateY(18px);}to{opacity:1;-webkit-transform:none;}}
@keyframes heroIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@-webkit-keyframes heroLine{to{-webkit-transform:scaleX(1);}}
@keyframes heroLine{to{transform:scaleX(1);}}
/* a pergunta entra em azul claro, a resposta em branco cheio.
   Contraste medido sobre o fundo efetivo do topo do hero (#1C66A7):
   #BFE0FF = 4.37:1 e #FFFFFF = 5.99:1, ambos acima do mínimo de texto grande. */


/* ---------- imagem de fundo do hero ----------
   Fica ancorada na base da dobra, inteira (contain) e sem esticar.
   O véu escurece de cima para baixo até onde o texto vive, e alivia
   sobre a imagem para ela continuar legível.                        */
.hero-bg{
  position:absolute;left:0;right:0;bottom:0;top:auto;
  height:56%;z-index:-2;
  overflow:hidden;pointer-events:none;
}
.hero-bg img{
  width:100%;height:100%;
  /* a imagem aparece inteira, sem corte e sem esticar */
  -o-object-fit:contain;object-fit:contain;
  -o-object-position:center bottom;object-position:center bottom;
  /* nitidez total: sem desfoque e sem opacidade reduzida */
  opacity:1;
  -webkit-filter:none;filter:none;
}
.hero-scrim{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;
  background:-webkit-linear-gradient(top,
    rgba(4,6,10,.72) 0%,
    rgba(4,6,10,.34) 34%,
    rgba(4,6,10,.06) 58%,
    rgba(4,6,10,0) 100%);
  background:linear-gradient(to bottom,
    rgba(4,6,10,.72) 0%,
    rgba(4,6,10,.34) 34%,
    rgba(4,6,10,.06) 58%,
    rgba(4,6,10,0) 100%);
}
@media (min-width:900px){
  /* no desktop a dobra cresce um pouco para o texto respirar acima da
     imagem, e a imagem ganha altura para não ficar pequena no centro */
  .hero{min-height:103vh;}
  .hero-inner{padding-bottom:46vh;}
  .hero-bg{height:66%;}
  .hero-bg img{opacity:1;-webkit-filter:none;filter:none;}
}

/* ====================================================================
   BÔNUS — seção dourada
   Dourado herdado do .gold-banner do site: #C9981E / #E8C25C / #B5821A
   ==================================================================== */
/* O degradê escuro vive aqui, cobrindo bônus e oferta de uma vez.
   Assim ele atravessa a divisa sem reiniciar, e não aparece o risco
   que surgia quando cada seção pintava o seu próprio. */
.bloco-escuro{
  position:relative;overflow:hidden;
  background:#14181F;
  background:-webkit-radial-gradient(50% 0%, 120% 80%, #23201A 0%, #14181F 62%);
  background:radial-gradient(120% 80% at 50% 0%, #23201A 0%, #14181F 62%);
  color:#fff;
}
.section-bonus{
  position:relative;overflow:hidden;
  background:none;
  color:#fff;
}
/* A seção da oferta usa exatamente o mesmo fundo da seção do bônus,
   para as duas lerem como um bloco escuro contínuo no fim da página. */
#oferta{
  position:relative;overflow:hidden;
  background:none;
  color:#fff;
}
.section-bonus .sec-title{color:#F4D98A;}
.section-bonus .sec-intro{color:rgba(244,217,138,.72);}
.bonus-glow{
  position:absolute;width:420px;height:420px;right:-140px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,194,92,.22),transparent 65%);
  pointer-events:none;z-index:0;
}
.bonus-glow-2{
  position:absolute;width:320px;height:320px;left:-120px;bottom:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,152,30,.16),transparent 68%);
  pointer-events:none;z-index:0;
}
.bonus-badge{
  display:inline-block;margin-bottom:16px;
  font-family:var(--font-heading);font-weight:800;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:#2A1E04;
  padding:7px 16px;border-radius:999px;
  background:#C9981E;
  background:-webkit-linear-gradient(315deg,#C9981E 0%,#E8C25C 46%,#B5821A 100%);
  background:linear-gradient(135deg,#C9981E 0%,#E8C25C 46%,#B5821A 100%);
  box-shadow:0 8px 22px rgba(176,128,20,.38);
}
.bonus{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(232,194,92,.34);
  border-radius:16px;border-radius:var(--radius-card);
  padding:24px 22px 24px 26px;margin-bottom:16px;overflow:hidden;
  -webkit-transition:border-color .28s,box-shadow .28s,-webkit-transform .28s;
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.bonus::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:-webkit-linear-gradient(bottom,#B5821A,#E8C25C);
  background:linear-gradient(to top,#B5821A,#E8C25C);
}
.bonus:hover{
  -webkit-transform:translateY(-4px);transform:translateY(-4px);
  border-color:rgba(232,194,92,.7);
  box-shadow:0 18px 40px rgba(176,128,20,.28);
}
.bonus:last-child{margin-bottom:0;}
.bonus-num{
  display:block;font-family:var(--font-heading);font-weight:800;font-size:13px;
  letter-spacing:.12em;color:#E8C25C;margin-bottom:10px;
}
.bonus-title{font-family:var(--font-heading);font-weight:700;font-size:18px;line-height:1.3;color:#fff;margin-bottom:8px;}
.bonus-text{font-size:14.5px;color:rgba(255,255,255,.74);}
/* Tópicos do bloco do bônus: losango dourado no lugar da bolinha.
   O marcador é um item de flex, não um absolute com "chute" de topo:
   a margem superior é calculada como (altura da linha - 8px) / 2, então
   ele fica exatamente no meio da primeira linha em qualquer corpo de
   texto ou tamanho de tela. */
.bonus-list{margin-top:18px;}
.bonus-list li{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
  margin-top:10px;
  font-size:15px;line-height:1.5;color:rgba(255,255,255,.86);
}
.bonus-list li::before{
  content:"";-ms-flex:none;flex:none;
  width:8px;height:8px;margin-right:14px;
  margin-top:calc((1.5em - 8px) / 2);
  background:#E8C25C;border-radius:2px;
  -webkit-transform:rotate(45deg);transform:rotate(45deg);
}
@media (min-width:900px){
  .bonus-list{margin-top:22px;}
  .bonus-list li{font-size:17px;margin-top:12px;}
  .bonus-list li::before{margin-right:16px;}
}
.bonus-foot{
  margin-top:26px;text-align:center;font-size:13.5px;color:rgba(244,217,138,.8);
}
@supports (display:grid){ .bonus{margin-bottom:0;} }
@media (min-width:900px){
  .bonus{padding:30px 26px 30px 32px;}
  .bonus-title{font-size:20px;}
}

/* Bloco único do bônus: tudo na mesma margem esquerda — logos, texto
   e tópicos. Assim os losangos formam uma coluna e o bloco lê
   alinhado de ponta a ponta. */
.bonus-solo{padding:30px 26px;margin-bottom:0;text-align:left;}
/* Logos e parágrafo centrados; só os tópicos ficam na margem
   esquerda, para os losangos formarem uma coluna. */
.bonus-solo .combo{
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
}
.bonus-solo .bonus-text{
  max-width:52ch;margin-left:auto;margin-right:auto;text-align:center;
}
@media (min-width:900px){ .bonus-solo{padding:40px 38px;} }
.combo{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:16px;margin-bottom:18px;
}
.combo .lg-clickup{height:42px;}
.combo .lg-claude{height:46px;}
.combo-plus{
  font-family:var(--font-heading);font-weight:800;font-size:24px;line-height:1;
  color:rgba(244,217,138,.72);
}
@media (min-width:900px){
  .combo{gap:20px;margin-bottom:24px;}
  .combo .lg-clickup{height:54px;}
  .combo .lg-claude{height:58px;}
  .combo-plus{font-size:30px;}
}
.bonus-solo .bonus-text{font-size:16px;line-height:1.55;color:rgba(255,255,255,.86);}
@media (min-width:900px){ .bonus-solo .bonus-text{font-size:19px;} }

/* ====================================================================
   EQUAÇÃO DE VALOR
   ==================================================================== */
.section-eq{
  background:#1565C0;
  background:-webkit-linear-gradient(315deg,#1E88E5 0%,#1565C0 68%,#0D3D6B 100%);
  background:linear-gradient(135deg,#1E88E5 0%,#1565C0 68%,#0D3D6B 100%);
  color:#fff;
  padding:56px 0;
}
@media (min-width:900px){ .section-eq{padding:88px 0;} }
.eq{max-width:520px;margin:0 auto;text-align:center;}
@media (min-width:900px){ .eq{max-width:760px;} }
.eq-row{
  font-family:var(--font-heading);font-weight:800;
  font-size:21px;line-height:1.22;letter-spacing:-.02em;
  text-wrap:balance;color:#fff;
}
.eq-sign{
  display:block;
  font-family:var(--font-heading);font-weight:800;
  font-size:24px;line-height:1;
  color:rgba(255,255,255,.62);
  margin:15px 0;
}
/* Fecho da equação em dourado, o mesmo #F4D98A do bônus. Sobre a faixa
   azul dá de 4,14:1 no ponto mais claro a 7,98:1 no mais escuro, e o
   texto é grande o bastante para o critério de 3:1. */
.eq-last{font-size:27px;color:#FFD97A;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .eq-last{
    background:-webkit-linear-gradient(350deg,#FFEFC0 0%,#FFD97A 46%,#F3C14A 74%,#FFE9A8 100%);
    background:linear-gradient(100deg,#FFEFC0 0%,#FFD97A 46%,#F3C14A 74%,#FFE9A8 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
@media (min-width:900px){
  .eq-row{font-size:30px;}
  .eq-sign{font-size:30px;margin:20px 0;}
  .eq-last{font-size:42px;}
}

@supports (display:grid){ .grid-1{grid-template-columns:1fr;} }

/* ---------- fundo do hero entrando de baixo para cima ----------
   A imagem sobe e revela junto com o carregamento, e depois fica
   respirando devagar. Tudo dentro de prefers-reduced-motion.      */
@media (prefers-reduced-motion:no-preference){
  .hero-bg{
    opacity:0;
    -webkit-animation:heroBgRise 1.5s var(--ease) .12s both;
    animation:heroBgRise 1.5s var(--ease) .12s both;
  }
  .hero-bg img{
    -webkit-animation:heroBgDrift 11s ease-in-out 1.7s infinite;
    animation:heroBgDrift 11s ease-in-out 1.7s infinite;
  }
}
@-webkit-keyframes heroBgRise{
  from{opacity:0;-webkit-transform:translateY(90px);}
  to{opacity:1;-webkit-transform:none;}
}
@keyframes heroBgRise{
  from{opacity:0;transform:translateY(90px);}
  to{opacity:1;transform:none;}
}
@-webkit-keyframes heroBgDrift{
  0%,100%{-webkit-transform:translateY(0);}
  50%{-webkit-transform:translateY(-14px);}
}
@keyframes heroBgDrift{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

/* Linha de resposta no mesmo corpo do título, em cor de texto normal,
   com os três ganhos destacados em azul. */
.lead-blue{
  margin-top:18px;
  font-family:var(--font-heading);font-weight:700;
  font-size:26px;line-height:1.18;letter-spacing:-.01em;
  text-wrap:balance;text-align:center;
  color:#242424;color:var(--color-text);
  max-width:22ch;margin-left:auto;margin-right:auto;
}
/* só os três ganhos ficam em azul. 38px em peso 800 é texto grande,
   então o #1E88E5 (3.68:1) passa no critério de contraste aqui. */
.lead-blue strong{color:#1E88E5;color:var(--color-primary);font-weight:800;}
@media (min-width:900px){
  .lead-blue{font-size:38px;line-height:1.12;max-width:24ch;margin-top:22px;}
}

/* ---------- Como funciona: blocos empilhados ---------- */
/* ---------- Como funciona: trilha numerada ------------------------
   Sai das três caixas brancas empilhadas e vira uma trilha: círculos
   numerados sobre uma linha que liga um passo ao outro. No celular a
   linha desce na vertical; a partir de 900px os três passos ficam
   lado a lado sobre uma linha horizontal.
   A linha é desenhada com ::before no <ol>, atrás dos círculos, e os
   círculos têm fundo próprio para cobrir o traço.                  */
.steps{
  position:relative;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  /* no celular a trilha encolhe até a largura do conteúdo e é
     centrada como bloco: os itens continuam alinhados à esquerda
     entre si, mas o conjunto fica no eixo do título da seção */
  width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;
  max-width:100%;margin-left:auto;margin-right:auto;
}
.steps::before{
  content:"";position:absolute;z-index:0;
  /* 9px de padding do item + 23px de metade do círculo = 32px */
  left:22px;top:32px;bottom:32px;width:2px;
  background:-webkit-linear-gradient(top, rgba(30,136,229,.55), rgba(30,136,229,.14));
  background:linear-gradient(to bottom, rgba(30,136,229,.55), rgba(30,136,229,.14));
}
.step{
  position:relative;z-index:1;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  gap:18px;padding:9px 0;margin-bottom:16px;
}
.step:last-child{margin-bottom:0;}
.step-badge{
  -ms-flex:none;flex:none;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:#1565C0;
  background:-webkit-linear-gradient(315deg,#2E97F0,#1565C0);
  background:linear-gradient(135deg,#2E97F0,#1565C0);
  color:#fff;font-family:var(--font-heading);font-weight:800;
  font-size:17px;line-height:1;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 20px rgba(21,101,192,.34);
  -webkit-transition:box-shadow .28s,-webkit-transform .28s;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.step:hover .step-badge{
  -webkit-transform:translateY(-3px);transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(21,101,192,.46);
}
.step-name{
  font-family:var(--font-heading);font-weight:700;
  font-size:19px;line-height:1.3;letter-spacing:-.01em;
  color:#242424;color:var(--color-text);
}
@supports (display:grid){
  @media (min-width:900px){
    .steps{
      display:grid;grid-template-columns:repeat(3,1fr);
      width:auto;max-width:820px;
    }
    /* a linha passa a ser horizontal, atrás dos três círculos */
    .steps::before{
      left:16.6%;right:16.6%;top:31px;bottom:auto;width:auto;height:2px;
      background:-webkit-linear-gradient(left, rgba(30,136,229,.14), rgba(30,136,229,.55), rgba(30,136,229,.14));
      background:linear-gradient(to right, rgba(30,136,229,.14), rgba(30,136,229,.55), rgba(30,136,229,.14));
    }
    .step{
      -webkit-box-orient:vertical;-webkit-box-direction:normal;
      -ms-flex-direction:column;flex-direction:column;
      text-align:center;gap:18px;margin:0;padding:0;
    }
    .step-badge{width:62px;height:62px;font-size:22px;}
    /* limite de largura para o rótulo longo quebrar em duas linhas
       centradas, em vez de invadir a coluna vizinha */
    .step-name{font-size:21px;max-width:15ch;margin-left:auto;margin-right:auto;text-wrap:balance;}
  }
}

/* ---------- bloco de destaque ---------- */
/* Mesmo desenho do bloco do bônus (.bonus-solo): filete vertical à
   esquerda, fundo levemente tingido, borda fina, texto alinhado à
   esquerda e o mesmo levantar no hover. Muda só a cor, que aqui
   continua azul. */
/* Frase de reforço, sem caixa: texto centralizado com o ícone acima,
   no azul claro da marca em degradê. A cor cheia fica como base, para
   navegador sem recorte de fundo no texto. O corpo é 19px em negrito
   justamente para a frase contar como texto grande: aí o critério de
   contraste cai para 3:1 e o #1E88E5, que dá 3,3:1 sobre o cinza da
   seção, passa. Com 17px não passaria. */
.note{
  display:block;text-align:center;
  max-width:44ch;margin:38px auto 0;padding:0;
  border:0;box-shadow:none;
  font-family:var(--font-heading);font-weight:700;
  font-size:19px;line-height:1.5;letter-spacing:-.01em;text-wrap:balance;
  color:#1878CE;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .note{
    background:-webkit-linear-gradient(350deg,#1E88E5 0%,#1878CE 46%,#1565C0 76%,#1E88E5 100%);
    background:linear-gradient(100deg,#1E88E5 0%,#1878CE 46%,#1565C0 76%,#1E88E5 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}
.note svg{
  display:block;margin:0 auto 12px;
  color:#1E88E5;color:var(--color-primary);
}
@media (min-width:900px){
  .note{font-size:22px;margin-top:48px;max-width:46ch;}
  .note svg{width:28px;height:28px;margin-bottom:14px;}
}



/* ====================================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   Nasce oculto e sem clique. O pagina.js põe .is-in cinco segundos
   depois do carregamento, e ele sobe da direita para o lugar.
   O balão pode ser fechado sem levar o botão embora.
   ==================================================================== */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;
  gap:12px;
  opacity:0;visibility:hidden;pointer-events:none;
  -webkit-transform:translateY(20px);transform:translateY(20px);
  -webkit-transition:opacity .5s,-webkit-transform .5s;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.wa-float.is-in{
  opacity:1;visibility:visible;pointer-events:auto;
  -webkit-transform:none;transform:none;
}
/* Balão: cartão claro, canto vivo do lado do botão e um bico que
   aponta para baixo, no eixo do círculo do WhatsApp. O bico é um
   quadrado girado, herdando fundo e borda do cartão — assim a linha
   fina continua contínua em volta de tudo. */
.wa-bubble{
  position:relative;
  max-width:236px;margin-right:6px;
  background:#FFFFFF;background:var(--color-surface);
  color:#242424;color:var(--color-text);
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  padding:15px 17px 16px;
  box-shadow:0 10px 30px rgba(4,8,16,.16),0 2px 6px rgba(4,8,16,.06);
}
.wa-bubble::after{
  content:"";position:absolute;z-index:0;
  right:17px;bottom:-6px;width:13px;height:13px;
  background:#FFFFFF;background:var(--color-surface);
  border-right:1px solid rgba(226,232,240,.9);
  border-bottom:1px solid rgba(226,232,240,.9);
  border-bottom-right-radius:3px;
  -webkit-transform:rotate(45deg);transform:rotate(45deg);
}
.wa-bubble-text{
  position:relative;z-index:1;
  font-family:var(--font-body);font-size:14.5px;line-height:1.5;
  letter-spacing:-.005em;color:#3A424E;
  padding-right:12px;text-wrap:pretty;
}
.wa-close{
  position:absolute;right:8px;top:8px;
  width:20px;height:20px;padding:0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;
  background:none;color:#9AA6B4;
  -webkit-transition:color .2s,background .2s;transition:color .2s,background .2s;
}
.wa-close:hover,.wa-close:focus-visible{background:#F0F3F5;color:#242424;}
.wa-float.bubble-off .wa-bubble{display:none;}
.wa-btn{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 12px 28px rgba(37,211,102,.42);
  -webkit-transition:box-shadow .26s,-webkit-transform .26s;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);
}
.wa-btn:hover,.wa-btn:focus-visible{
  background:#1FBE5A;
  -webkit-transform:translateY(-3px);transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(37,211,102,.54);
}
@media (min-width:900px){
  .wa-float{right:28px;bottom:28px;gap:14px;}
  .wa-bubble{max-width:268px;}
  .wa-bubble::after{right:20px;}
  .wa-bubble-text{font-size:15px;}
  .wa-btn{width:64px;height:64px;}
}

/* ---------- emenda entre a dobra 1 e a dobra 2 --------------------
   Duas coisas desenhavam risco aqui.
   1) A altura do hero é em vh, então cai em fração de pixel e o fundo
      claro do body aparecia na divisa. A segunda dobra sobe 1px e
      cobre a fração.
   2) A borda da imagem do hero não é transparente de verdade: é preto
      a 4%. Começando reta, esse degrau virava uma linha na largura
      inteira. A máquina de máscara dissolve os quatro lados, então a
      imagem entra e sai sem borda. */
#metodo{margin-top:-1px;}
.hero{background-color:#04060A;}
.hero-bg{
  -webkit-mask-image:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, #000 16%, #000 88%, rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 16%, #000 88%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 16%, #000 88%, rgba(0,0,0,0) 100%);
}