/* =========================================================================
   HOME — hero com parede de pôsteres, esteiras infinitas e seções
   ========================================================================= */

/* ------------------------------------------------------------------ HERO  */
.hero{
  position:relative;
  min-height:clamp(620px,92svh,880px);
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}

/* parede animada de capas */
.hero-wall{
  position:absolute; inset:-16% -8%;
  z-index:-3;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  transform:rotate(-7deg) scale(1.12);
  opacity:.62;
  filter:saturate(.9) blur(.4px);
}
/* o número de colunas é decidido só aqui: o JS gera sempre 6 e as extras somem */
@media(max-width:900px){
  .hero-wall{ grid-template-columns:repeat(4,1fr); transform:rotate(-9deg) scale(1.25); opacity:.5; }
  .wall-col:nth-child(n+5){ display:none; }
}
@media(max-width:560px){
  .hero-wall{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .wall-col:nth-child(n+4){ display:none; }
}

.wall-col{ display:grid; gap:14px; will-change:transform; }
.wall-col img{
  width:100%; aspect-ratio:2/3; object-fit:cover;
  border-radius:12px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.8);
}
.wall-col.up  { animation:wallUp   var(--dur,52s) linear infinite; }
.wall-col.down{ animation:wallDown var(--dur,58s) linear infinite; }
@keyframes wallUp  { from{ transform:translateY(0) }    to{ transform:translateY(-50%) } }
@keyframes wallDown{ from{ transform:translateY(-50%) } to{ transform:translateY(0) } }

.hero-scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 66% 58% at 50% 46%, rgba(10,4,16,.93) 0%, rgba(10,4,16,.6) 58%, rgba(10,4,16,.12) 100%),
    linear-gradient(180deg, rgba(10,4,16,.72) 0%, rgba(10,4,16,.1) 22%, rgba(10,4,16,.1) 58%, rgba(10,4,16,.86) 90%, var(--bg) 100%);
}
.hero-glow{
  position:absolute; z-index:-1; left:50%; top:38%; transform:translate(-50%,-50%);
  width:min(760px,92vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,45,143,.24) 0%, transparent 62%);
  filter:blur(18px); pointer-events:none;
}

/* Layout do hero: texto + destaques à esquerda, VSL à direita.
   O vídeo precisa aparecer na PRIMEIRA DOBRA, por isso ele vive aqui dentro
   e não em uma seção separada mais abaixo. */
.hero-in{
  position:relative; padding:34px 0 46px;
  display:grid;
  grid-template-columns:1fr 400px;
  grid-template-areas:
    "txt   vsl"
    "extra vsl";
  gap:22px clamp(20px,4vw,48px);
  align-items:start;
}
.hero-txt  { grid-area:txt; }
.hero-extra{ grid-area:extra; align-self:start; }
.hero-in > .vsl-box{ grid-area:vsl; align-self:center; }

@media(max-width:1000px){
  .hero-in{
    grid-template-columns:1fr;
    grid-template-areas:"txt" "vsl" "extra";
    text-align:center; justify-items:center;
    padding-top:26px;
  }
}

/* No celular a tela é toda do vídeo: some com o que é decorativo acima dele
   para o player subir e caber na primeira dobra sem virar um selo minúsculo. */
@media(max-width:620px){
  .hero-in{ padding-top:12px; gap:16px; }
  .hero .eyebrow{ display:none; }
  .hero-sub{ display:none; }
  .hero h1{ font-size:clamp(34px,9.5vw,46px); margin-top:0; }
  .vsl-cta{ margin-top:12px; }
  .vsl-cta .btn-tg{ padding:12px 16px; }
  .vsl-cta .tg-tx small{ display:none; }

  /* svh já desconta a barra do navegador; o fallback em vh não desconta,
     por isso ele é mais conservador para não empurrar o botão da dobra. */
  .vsl-player.vertical video{ max-height:56vh; max-height:62svh; }
}

.hero h1{
  font-size:clamp(40px,7.5vw,86px);
  margin:14px 0 0;
  text-shadow:0 10px 40px rgba(0,0,0,.7);
}
.hero h1 .l1{ display:block; color:#fff; }
.hero h1 .l2{
  display:block; transform:skewX(-9deg); transform-origin:left center;
  color:transparent;
  background:linear-gradient(100deg,#ff8cc6 5%,var(--rose) 45%,#ff5ba8 100%);
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 6px 26px rgba(255,45,143,.55));
}
@media(max-width:1000px){ .hero h1 .l2{ transform-origin:center; } }
.hero h1 .heart{ -webkit-text-fill-color:var(--rose); color:var(--rose); filter:none; font-size:.62em; }

.hero-sub{
  margin:14px 0 0; max-width:560px;
  font-size:clamp(14.5px,2vw,18px); color:var(--txt-2);
  text-transform:uppercase; font-weight:700; letter-spacing:.02em;
}
@media(max-width:1000px){ .hero-sub{ margin-inline:auto; } }
.hero-sub b{ color:var(--rose-3); }
.hero-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
@media(max-width:1000px){ .hero-btns{ justify-content:center; } }

/* ---- 4 cards de destaque, iguais aos do banner ---- */
.feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:0; max-width:620px; }
@media(max-width:1000px){ .feats{ margin-inline:auto; } }
@media(max-width:640px){ .feats{ grid-template-columns:repeat(2,1fr); } }
.feat{
  padding:15px 11px; border-radius:16px; text-align:center;
  background:linear-gradient(180deg,rgba(255,45,143,.1),rgba(10,4,16,.6));
  border:1px solid rgba(255,45,143,.34);
  box-shadow:0 0 26px -12px rgba(255,45,143,.85), inset 0 1px 0 rgba(255,255,255,.06);
}
.feat .em{ font-size:24px; line-height:1; }
.feat .t{ margin-top:8px; font-family:'Big Shoulders Display',sans-serif; font-size:19px; font-weight:800; line-height:.95; text-transform:uppercase; color:var(--rose-3); }
.feat .d{ margin-top:5px; font-size:11.5px; line-height:1.3; color:var(--txt-2); }

/* ---- selos da faixa inferior do banner ---- */
.seals{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; }
@media(max-width:760px){ .seals{ grid-template-columns:repeat(2,1fr); gap:16px 0; } }
.seal-i{ display:flex; align-items:center; gap:11px; justify-content:center; padding:0 14px; }
.seals .seal-i + .seal-i{ border-left:1px solid var(--line); }
@media(max-width:760px){ .seals .seal-i:nth-child(odd){ border-left:0; } }
.seal-i svg{ width:26px; height:26px; fill:none; stroke:var(--rose); stroke-width:1.7; flex:none; }
.seal-i .t{ font-size:13px; font-weight:800; text-transform:uppercase; line-height:1.2; }
.seal-i .d{ font-size:12px; color:var(--txt-2); text-transform:uppercase; }

/* ---------------------------------------------------------- mascote ---- */
.mascot{ width:100%; max-width:380px; margin-inline:auto; position:relative; }
.mascot-sm{ max-width:150px; margin-bottom:6px; }
@media(max-width:620px){ .mascot-sm{ max-width:118px; } }
.mascot svg{ width:100%; height:auto; animation:float 4.5s ease-in-out infinite; filter:drop-shadow(0 26px 50px rgba(255,45,143,.45)); }
@keyframes float{ 50%{ transform:translateY(-14px) } }
.mascot::after{
  content:''; position:absolute; inset:14% 8% -4%;
  background:radial-gradient(circle, rgba(255,45,143,.32) 0%, transparent 66%);
  filter:blur(24px); z-index:-1;
}
.hero-price{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:20px;
  font-size:14.5px; color:var(--txt-2);
}
.hero-price s{ color:var(--mut); }
.hero-price b{ font-size:22px; color:#fff; }
.hero-price-obs{ margin:6px 0 0; font-size:13px; color:var(--mut); }
.hero-price-obs b{ color:var(--rose-3); font-weight:700; }
.hero-foot{ margin-top:26px; display:grid; gap:14px; justify-items:center; }

/* ============================================================== VSL =====
   Vídeo de vendas logo abaixo do hero, com gatilhos de audiência ao vivo.
   ======================================================================== */
.vsl{ position:relative; overflow:hidden; padding:clamp(34px,6vw,64px) 0 clamp(30px,5vw,56px); }
.vsl-box{ max-width:820px; margin-inline:auto; }

/* faixa "ao vivo" acima do player */
.vsl-live{
  display:flex; align-items:center; justify-content:center; gap:8px 16px; flex-wrap:wrap;
  padding:10px 16px; border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,var(--rose-2),var(--rose) 55%,#ff7bbd);
  font-size:13px; font-weight:800; color:#fff;
}
.vsl-live .rec{ display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.08em; }
.vsl-live .rec i{ width:9px; height:9px; border-radius:50%; background:#fff; animation:blink 1s steps(2,end) infinite; }
.vsl-live .sep{ opacity:.5; }
@media(max-width:520px){ .vsl-live{ font-size:11.5px; padding:9px 12px; } }

/* player */
.vsl-player{
  position:relative;
  border:2px solid rgba(255,45,143,.5); border-top:0;
  border-radius:0 0 20px 20px; overflow:hidden;
  background:#000;
  box-shadow:0 30px 70px -22px rgba(255,45,143,.55), 0 0 0 1px rgba(255,255,255,.05);
}
.vsl-player video{ display:block; width:100%; height:auto; background:#000; }

/* Vídeo em pé (formato Reels). A classe é aplicada pelo JS depois de ler as
   dimensões reais do arquivo — se um dia o vídeo virar horizontal, some.
   O teto de altura existe para o conjunto título + vídeo + botão caber na
   primeira dobra: sem ele, um 9:16 em 400px de largura passa de 860px. */
.vsl-box.vertical{ max-width:min(420px,100%); }
.vsl-player.vertical{ display:flex; justify-content:center; }
.vsl-player.vertical video{
  width:auto; max-width:100%;
  max-height:62vh;          /* fallback: navegadores sem svh ignoram a linha abaixo */
  max-height:62svh;
}
@media(min-width:1000px){
  .vsl-player.vertical video{ max-height:58vh; max-height:58svh; }
}

/* capa clicável com o play gigante */
.vsl-cover{
  position:absolute; inset:0; z-index:3; cursor:pointer; border:0; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:radial-gradient(circle at 50% 45%, rgba(255,45,143,.22), rgba(10,4,16,.82) 65%);
  backdrop-filter:blur(2px);
  transition:opacity .35s var(--ease);
}
.vsl-cover.hide{ opacity:0; pointer-events:none; }
.vsl-cover .play{
  width:88px; height:88px; border-radius:50%;
  background:linear-gradient(135deg,#ff5ba8,var(--rose) 55%,var(--rose-2));
  display:grid; place-items:center;
  box-shadow:0 18px 44px -10px rgba(255,45,143,.9);
  animation:pulse 2.2s var(--ease) infinite;
}
.vsl-cover .play::before{
  content:''; border-left:26px solid #fff;
  border-top:16px solid transparent; border-bottom:16px solid transparent; margin-left:7px;
}
.vsl-cover .lb{ font-family:'Big Shoulders Display',sans-serif; font-size:clamp(20px,3.5vw,28px); font-weight:800; text-transform:uppercase; color:#fff; text-shadow:0 4px 20px rgba(0,0,0,.8); }
.vsl-cover .sb{ font-size:12.5px; color:var(--rose-3); font-weight:700; }
@media(max-width:520px){ .vsl-cover .play{ width:70px; height:70px; } .vsl-cover .play::before{ border-left-width:21px; border-top-width:13px; border-bottom-width:13px; } }

/* aviso de som */
.vsl-som{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:4;
  display:none; align-items:center; gap:9px;
  padding:10px 20px; border-radius:999px; cursor:pointer; border:0;
  background:rgba(255,45,143,.95); color:#fff; font-size:13.5px; font-weight:800;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.8);
  animation:pulse 2.2s var(--ease) infinite;
}
.vsl-som.on{ display:flex; }

/* barra de gatilhos abaixo do player */
.vsl-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 22px;
  margin-top:16px; font-size:13px; font-weight:700; color:var(--txt-2);
}
.vsl-bar span{ display:inline-flex; align-items:center; gap:7px; }
.vsl-bar b{ color:#fff; }

.vsl-cta{ margin-top:14px; text-align:center; }
.vsl-cta .sub{ margin-top:9px; font-size:12px; color:var(--mut); }
.vsl-cta .btn-tg{ justify-content:center; }

/* ======================================================= PRINTS REAIS === */
.prints{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,3vw,26px); max-width:760px; margin:0 auto; }
@media(max-width:620px){ .prints{ grid-template-columns:1fr; max-width:360px; } }
.print{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--card);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.9);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.print:hover{ transform:translateY(-6px); box-shadow:0 28px 60px -18px rgba(255,45,143,.45); }
.print img{ width:100%; height:auto; display:block; }
.print .zap{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:rgba(10,4,16,.82); border:1px solid rgba(34,211,135,.45); backdrop-filter:blur(6px);
  font-size:10.5px; font-weight:800; color:#8df3c4; letter-spacing:.04em;
}

/* faixa de dispositivos */
.devices{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }
.devices-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 34px; padding:20px 0; }
.dev{ display:flex; align-items:center; gap:9px; color:var(--txt-2); font-size:14px; font-weight:600; }
.dev svg{ width:20px; height:20px; fill:var(--mut); }

/* ------------------------------------------------- esteiras "EM ALTA HOJE" */
.marquee{ position:relative; overflow:hidden; padding:2px 0; }
.marquee::before,.marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:12%; z-index:3; pointer-events:none;
}
.marquee::before{ left:0;  background:linear-gradient(90deg,var(--bg),transparent); }
.marquee::after { right:0; background:linear-gradient(270deg,var(--bg),transparent); }

.mq-track{ display:flex; gap:16px; width:max-content; will-change:transform; }
.mq-track.a{ animation:mqLeft  var(--dur,70s) linear infinite; }
.mq-track.b{ animation:mqRight var(--dur,84s) linear infinite; }
.marquee:hover .mq-track{ animation-play-state:paused; }
@keyframes mqLeft { from{ transform:translateX(0) }      to{ transform:translateX(-50%) } }
@keyframes mqRight{ from{ transform:translateX(-50%) }   to{ transform:translateX(0) } }

.poster{
  position:relative; flex:none;
  width:clamp(126px,16vw,178px);
  aspect-ratio:2/3;
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:var(--card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.poster img{ width:100%; height:100%; object-fit:cover; }
.poster::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,4,16,.92) 100%);
  opacity:0; transition:opacity .3s;
}
.poster .pmeta{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  opacity:0; transform:translateY(8px); transition:.3s var(--ease);
}
.poster .pmeta .pt{ font-size:12.5px; font-weight:800; line-height:1.2; }
.poster .pmeta .ps{ font-size:10.5px; color:var(--txt-2); margin-top:2px; display:flex; gap:6px; align-items:center; }
.poster .pflag{
  position:absolute; top:8px; left:8px; z-index:2;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 7px; border-radius:6px;
  background:rgba(10,4,16,.75); border:1px solid var(--line-2); backdrop-filter:blur(4px);
}
.poster:hover{ transform:translateY(-8px) scale(1.045); box-shadow:0 22px 44px -16px rgba(0,0,0,.9); border-color:rgba(255,45,143,.5); z-index:4; }
.poster:hover::after{ opacity:1; }
.poster:hover .pmeta{ opacity:1; transform:none; }

/* --------------------------------------------------- continue assistindo  */
.watch-row{
  display:flex; gap:16px; overflow-x:auto; padding:4px 20px 18px;
  scroll-snap-type:x mandatory;
}
.watch-card{
  position:relative; flex:none; scroll-snap-align:start;
  width:clamp(240px,34vw,310px); aspect-ratio:16/10;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:var(--card);
}
.watch-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.watch-card:hover img{ transform:scale(1.07); }
.watch-card .shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,4,16,.15) 0%,rgba(10,4,16,.55) 50%,rgba(10,4,16,.96) 100%); }
.watch-card .rank{
  position:absolute; top:11px; left:11px;
  font-size:10.5px; font-weight:800; letter-spacing:.08em;
  padding:4px 9px; border-radius:6px; color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--rose-2));
  box-shadow:0 6px 16px -4px rgba(255,45,143,.7);
}
.watch-card .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px); display:grid; place-items:center;
  transition:.3s var(--ease);
}
.watch-card .play::before{ content:''; border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.watch-card:hover .play{ background:var(--rose); border-color:var(--rose); transform:translate(-50%,-50%) scale(1.12); }
.watch-card .meta{ position:absolute; left:15px; right:15px; bottom:13px; }
.watch-card .meta .t{ font-weight:800; font-size:16px; }
.watch-card .meta .s{ font-size:12px; color:var(--txt-2); margin-top:2px; }
.watch-card .bar{ margin-top:9px; height:4px; border-radius:99px; background:rgba(255,255,255,.18); overflow:hidden; }
.watch-card .bar i{ display:block; height:100%; width:var(--w,50%); border-radius:99px; background:linear-gradient(90deg,var(--rose),#ff7aa0); }

/* ------------------------------------------------------------- categorias */
.cat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:13px; margin-top:36px; }
.cat{
  position:relative; overflow:hidden;
  padding:22px 18px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--card);
  transition:.28s var(--ease);
}
.cat::before{ content:''; position:absolute; inset:0; opacity:.16; background:var(--g); transition:opacity .3s; }
.cat:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.cat:hover::before{ opacity:.32; }
.cat .em{ font-size:26px; position:relative; }
.cat .n{ position:relative; margin-top:9px; font-weight:800; font-size:15.5px; }
.cat .q{ position:relative; font-size:12px; color:var(--mut); }

/* ---------------------------------------------------------------- números */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.stat{ text-align:center; padding:26px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--card); }
.stat .v{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(38px,6vw,54px); line-height:.9; color:transparent; background:linear-gradient(120deg,#fff,var(--rose)); -webkit-background-clip:text; background-clip:text; }
.stat .l{ margin-top:7px; font-size:13px; color:var(--txt-2); font-weight:600; }

/* -------------------------------------------------------------- comparar  */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; }
.cmp-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); }
.cmp th,.cmp td{ padding:15px 16px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap; }
.cmp th:first-child,.cmp td:first-child{ text-align:left; white-space:normal; min-width:190px; color:var(--txt-2); }
.cmp thead th{ font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-weight:800; }
.cmp thead th.us{ color:#fff; }
.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp .us-col{ background:linear-gradient(180deg,rgba(255,45,143,.13),rgba(255,45,143,.04)); }
.cmp .yes{ color:var(--green); font-weight:800; }
.cmp .no{ color:#ff6b81; font-weight:700; opacity:.75; }

/* ----------------------------------------------------------------- planos */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; align-items:stretch; margin-top:42px; }
.plan{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:26px 22px 24px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:linear-gradient(180deg,var(--card),var(--bg-2));
  transition:.3s var(--ease);
}
.plan:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.plan.hot{
  border-color:rgba(255,45,143,.55);
  background:linear-gradient(180deg,rgba(255,45,143,.11),var(--bg-2) 55%);
  box-shadow:0 26px 60px -22px rgba(255,45,143,.5);
}
.plan .tag{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:800; letter-spacing:.08em; white-space:nowrap;
  padding:6px 14px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--rose-2));
  box-shadow:0 8px 20px -6px rgba(255,45,143,.8);
}
.plan.vip .tag{ background:linear-gradient(135deg,var(--lilac),var(--lilac-2)); color:#fff; box-shadow:0 8px 20px -6px rgba(199,125,255,.75); }
.plan .pn{ font-family:'Big Shoulders Display',sans-serif; font-size:30px; font-weight:800; text-transform:uppercase; }
.plan .old{ font-size:13.5px; color:var(--mut); text-decoration:line-through; }
.plan .price{ display:flex; align-items:baseline; gap:4px; }
.plan .price .c{ font-size:19px; font-weight:700; color:var(--txt-2); }
.plan .price .v{ font-family:'Big Shoulders Display',sans-serif; font-size:56px; font-weight:800; line-height:.85; }
.plan .per{ font-size:13px; color:var(--mut); }
.plan .obs{ font-size:12.5px; color:var(--gold); font-weight:600; }
.plan ul{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; font-size:14px; color:var(--txt-2); }
.plan li{ display:flex; gap:9px; align-items:flex-start; }
.plan li svg{ width:16px; height:16px; fill:var(--green); flex:none; margin-top:3px; }
.plan .btn{ margin-top:auto; }
.plan .guar{ font-size:11.5px; color:var(--mut); text-align:center; }

/* ========================================================== COMO FUNCIONA
   Explica a compra pelo bot ANTES do clique — é o que segura a conversão
   quando o usuário precisa sair do site para o Telegram.
   ======================================================================== */
.how{ display:grid; grid-template-columns:1fr 380px; gap:clamp(26px,5vw,56px); align-items:center; }
@media(max-width:940px){ .how{ grid-template-columns:1fr; } }

.how-steps{ display:grid; gap:14px; }
.how-step{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:flex-start;
  padding:19px 20px; border-radius:var(--r); border:1px solid var(--line); background:var(--card);
  transition:.25s var(--ease);
}
.how-step:hover{ border-color:var(--line-2); transform:translateX(4px); }
.how-step .n{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:'Big Shoulders Display',sans-serif; font-size:20px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--rose-2));
  box-shadow:0 8px 20px -6px rgba(255,45,143,.7);
}
.how-step .t{ font-weight:800; font-size:16.5px; }
.how-step .d{ font-size:14.2px; color:var(--txt-2); margin-top:4px; }
.how-time{
  display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  padding:9px 16px; border-radius:999px;
  background:rgba(34,211,135,.1); border:1px solid rgba(34,211,135,.3);
  color:#8df3c4; font-size:13px; font-weight:700;
}

/* ------- mockup da conversa no bot ------- */
.phone{
  width:100%; max-width:340px; margin-inline:auto;
  border-radius:30px; padding:11px;
  background:linear-gradient(160deg,#241c33,#120d1d);
  border:1px solid var(--line-2);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-in{ border-radius:22px; overflow:hidden; background:#17212b; }
.phone-bar{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  background:#1f2c3a; border-bottom:1px solid rgba(255,255,255,.06);
}
.phone-bar .av{
  width:32px; height:32px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-size:15px; background:linear-gradient(135deg,var(--rose),var(--rose-2));
}
.phone-bar .nm{ font-size:13.5px; font-weight:700; line-height:1.2; }
.phone-bar .st{ font-size:10.5px; color:#7d93a8; display:flex; align-items:center; gap:5px; }
.phone-bar .st i{ width:6px; height:6px; border-radius:50%; background:var(--green); }

.chat{ padding:14px 12px 16px; display:grid; gap:9px; background:#0e1621; }
.bub{
  max-width:84%; padding:9px 12px; border-radius:14px; font-size:12.8px; line-height:1.45;
  animation:bubIn .5s var(--ease) backwards;
}
.bub.bot{ background:#1f2c3a; border-bottom-left-radius:5px; justify-self:start; }
.bub.me { background:#2b5278; border-bottom-right-radius:5px; justify-self:end; }
.bub b{ color:#fff; }
.bub .tm{ display:block; margin-top:4px; font-size:9.5px; color:#7d93a8; text-align:right; }
.bub:nth-child(1){ animation-delay:.1s } .bub:nth-child(2){ animation-delay:.5s }
.bub:nth-child(3){ animation-delay:.9s } .bub:nth-child(4){ animation-delay:1.3s }
.bub:nth-child(5){ animation-delay:1.7s }
@keyframes bubIn{ from{ opacity:0; transform:translateY(9px) scale(.96) } }
.bub-btn{
  display:block; margin-top:8px; padding:8px; border-radius:9px; text-align:center;
  background:rgba(46,166,223,.18); border:1px solid rgba(46,166,223,.4);
  color:#6fc4ef; font-size:12px; font-weight:700;
}

/* --------------------------------------------------- objeção "não tenho" */
.tg-help{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  padding:clamp(20px,3.5vw,30px); border-radius:var(--r-lg);
  border:1px solid rgba(255,45,143,.32);
  background:linear-gradient(135deg,rgba(255,45,143,.11),transparent 62%);
}
@media(max-width:620px){ .tg-help{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.tg-help .ic{
  width:66px; height:66px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#ff7bbd,var(--rose) 55%,var(--rose-2));
  box-shadow:0 16px 34px -12px rgba(255,45,143,.85);
}
.tg-help .ic svg{ width:32px; height:32px; fill:#fff; margin-right:3px; }
.tg-help .t{ font-weight:800; font-size:17px; }
.tg-help .d{ font-size:14.2px; color:var(--txt-2); margin-top:5px; }
.tg-help .d a{ color:var(--rose-3); text-decoration:underline; font-weight:700; }

/* ----------------------------------------------------------------- outros */
.bonus-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:36px; }
.bonus{ padding:22px; border-radius:var(--r); border:1px dashed rgba(199,125,255,.4); background:rgba(199,125,255,.07); }
.bonus .em{ font-size:26px; }
.bonus .t{ margin-top:9px; font-weight:800; font-size:16px; }
.bonus .d{ font-size:13.5px; color:var(--txt-2); margin-top:5px; }
.bonus .v{ margin-top:9px; font-size:12.5px; font-weight:800; color:var(--gold); }

.guarantee{
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  padding:clamp(24px,4vw,40px); border-radius:var(--r-xl);
  border:1px solid rgba(34,211,135,.28); background:linear-gradient(135deg,rgba(34,211,135,.09),transparent 65%);
}
@media(max-width:660px){ .guarantee{ grid-template-columns:1fr; text-align:center; justify-items:center; } }
.seal{
  width:118px; height:118px; border-radius:50%; flex:none; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 30% 25%,#2ee89a,#0f9c63);
  color:#04361f; font-family:'Big Shoulders Display',sans-serif; font-weight:800; line-height:.9;
  box-shadow:0 18px 40px -14px rgba(34,211,135,.75), inset 0 0 0 5px rgba(255,255,255,.28);
}
.seal .n{ font-size:44px; }
.seal .u{ font-size:14px; letter-spacing:.08em; }