/* Paleta 100% Gordura: preto profundo e neon vermelho, a identidade das artes originais
     do produto (hero do Will com neon, logo com chama). Um acento só, em rampa:
     --red-hi (topo dos gradientes) -> --red (principal) -> --red-deep (sombra).
     Verde entra apenas no botão de checkout, código de "pagar" herdado das outras páginas. */
  @property --queima { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
  :root{
    --bg:#070707; --bg2:#0e0e0f; --card:rgba(24,24,26,.62);
    --glass:rgba(255,255,255,.045); --glass-b:rgba(255,255,255,.12);
    --border:#333336; --text:#fff; --muted:#c6c6cb;
    --red:#ff2a33; --red-hi:#ff6b71; --red-deep:#8f0f16;
    --green:#1BE52F; --green-d:#139620;
    --maxw:1140px; --radius:16px;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  h1,h2,h3{font-family:"Sora",sans-serif; line-height:1.15; margin:0; text-wrap:balance}
  p{margin:0}
  a{color:var(--red); text-decoration:none}
  a:hover{color:var(--red-hi)}
  img{max-width:100%; height:auto; display:block}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  section{padding:clamp(48px,7vw,96px) 0}
  .accent{color:var(--red)}
  .center{text-align:center}
  .lead{color:var(--muted); font-size:clamp(1rem,1.6vw,1.2rem); max-width:60ch; margin-inline:auto}
  .lead b{color:#fff; font-weight:600}
  .icon{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
  .stitle{font-size:clamp(1.7rem,4vw,2.9rem); font-weight:700; max-width:26ch}
  .center .stitle{margin-inline:auto}

  /* Botões: pílula com rampa de vermelho e texto branco (contraste AA), brilho contido */
  .btn{display:inline-flex; align-items:center; gap:12px; font-family:"Sora",sans-serif; font-weight:700;
    text-transform:uppercase; font-size:1rem; letter-spacing:.03em; padding:1em 2.4em; border-radius:50px;
    cursor:pointer; border:1px solid rgba(255,255,255,.35); transition:transform .2s, box-shadow .2s, filter .2s;
    color:#fff; background:linear-gradient(180deg,var(--red) 0%,var(--red-deep) 100%);
    box-shadow:0 12px 34px -12px rgba(255,42,51,.65), inset 0 1px 0 rgba(255,255,255,.22)}
  .btn:hover{transform:translateY(-2px); filter:brightness(1.08); color:#fff}
  .btn:active{transform:translateY(0) scale(.98)}
  .btn .icon{width:22px;height:22px;stroke-width:2.4}
  .btn--green{color:#fff; background:linear-gradient(90deg,var(--green-d) 0%,var(--green) 100%);
    box-shadow:0 10px 34px -10px rgba(20,206,38,.7), inset 0 1px 0 rgba(255,255,255,.25)}
  .btn--green:hover{color:#fff}

  /* Cartão de vidro: blur real com borda 1px clara e aresta interna. Sem suporte a
     backdrop-filter (ou com transparência reduzida), vira superfície sólida. */
  .glass{background:var(--glass); border:1px solid var(--glass-b); border-radius:var(--radius);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 60px -30px rgba(0,0,0,.8)}
  @supports (backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px)){
    .glass{backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%)}
  }
  @supports not (backdrop-filter:blur(4px)){ .glass{background:rgba(22,22,24,.92)} }
  @media (prefers-reduced-transparency:reduce){
    .glass{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(22,22,24,.95)}
  }

  /* Marquee */
  .marquee{background:linear-gradient(90deg,var(--red-deep),var(--red) 50%,var(--red-deep)); padding:15px 0; overflow:hidden; white-space:nowrap}
  .marquee__track{display:inline-flex; animation:scroll 30s linear infinite; will-change:transform}
  .marquee__track{align-items:center}
  .marquee span{font-family:"Sora",sans-serif; font-weight:700; font-size:1rem; padding:0 26px; text-transform:uppercase; letter-spacing:.05em; color:#fff}
  .mq-ic{width:17px; height:17px; flex:none; stroke:#fff; fill:none; stroke-width:2.2;
    stroke-linecap:round; stroke-linejoin:round; opacity:.9}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* Grade de linhas (fundo padrão das seções sem imagem) */
  .gridbg{position:relative; background-color:var(--bg); isolation:isolate}
  .gridbg::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      repeating-linear-gradient(0deg,  transparent 0 63px, rgba(255,255,255,.03) 63px 64px),
      repeating-linear-gradient(90deg, transparent 0 63px, rgba(255,255,255,.03) 63px 64px);
    -webkit-mask:radial-gradient(120% 90% at 50% 50%, #000 32%, transparent 86%);
            mask:radial-gradient(120% 90% at 50% 50%, #000 32%, transparent 86%)}
  /* o tom alternado saiu: com os fundos contínuos (mask fade no preto base), qualquer
     variação de cor entre seções vira uma faixa visível. Página inteira no mesmo preto. */
  .gridbg--alt{background-color:var(--bg)}
  .gridbg > *{position:relative; z-index:1}
  .imgbg{position:relative; background-color:var(--bg); isolation:isolate}
  .imgbg > *{position:relative; z-index:1}

  /* Fundos contínuos (técnica da V1 do Turbina): a imagem de cada seção vive num ::after
     com opacidade baixa e MASK que desvanece topo e base no preto da página. Assim os
     fundos nascem e morrem no mesmo preto e a página lê como um cenário só, sem quebras. */
  [data-bg]{position:relative; isolation:isolate; background-color:var(--bg)}
  [data-bg]::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-size:cover; background-position:center; opacity:.5;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    mask-image:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent)}
  [data-bg] > *{position:relative; z-index:1}
  [data-bg="denilson"]::after{background-image:url("bg-denilson.webp")}
  [data-bg="protocolos"]::after{background-image:url("bg-hero.webp"); opacity:.4}
  [data-bg="dentro"]::after{background-image:url("bg-hero-m.webp"); opacity:.38}
  [data-bg="queima"]::after{background-image:url("bg-queima.webp")}
  [data-bg="resultados"]::after{background-image:url("bg-final.webp"); opacity:.4}
  [data-bg="chat"]::after{background-image:url("bg-denilson.webp"); opacity:.35}
  [data-bg="oferta"]::after{background-image:url("bg-oferta.webp"); opacity:.42}
  [data-bg="final"]::after{background-image:url("bg-final.webp")}

  /* Reveal */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    .marquee__track,.arrow-down{animation:none}
  }

  /* ===== Hero: split, copy à esquerda, retrato do Will em cartão 3D à direita ===== */
  .hero{position:relative; text-align:left; isolation:isolate; background:var(--bg);
    padding-top:clamp(26px,4vw,48px); padding-bottom:clamp(48px,7vw,88px);
    display:grid; align-content:center; min-height:min(92svh,820px)}
  .hero > .wrap{min-width:0; width:100%; position:relative; z-index:1}
  /* arte do Danilo como fundo (padrão Turbina): img cover + overlay para legibilidade */
  .hero__bg{position:absolute; inset:0; overflow:hidden; z-index:-2}
  .hero__bg img{width:100%; height:100%; object-fit:cover; object-position:72% center}
  .hero__overlay{position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      linear-gradient(90deg, rgba(7,7,7,.86) 8%, rgba(7,7,7,.55) 34%, rgba(7,7,7,.06) 58%, transparent 75%),
      linear-gradient(180deg, rgba(7,7,7,.35), transparent 30%, transparent 62%, var(--bg) 97%)}
  .hero__logo{width:150px; margin:0 0 clamp(20px,3vw,32px)}
  .hero h1{font-size:clamp(1.6rem,3.1vw,2.9rem); font-weight:800; margin:0;
    text-transform:uppercase; line-height:1.1; white-space:nowrap}
  .hero h1 .accent{display:block; color:var(--red); font-size:1.24em; line-height:1.08;
    text-shadow:0 0 34px rgba(255,42,51,.45)}
  .hero__copy{max-width:600px}
  .hero__sub{margin:20px 0 0; color:#e8e8e8; font-size:clamp(1rem,1.5vw,1.16rem); max-width:44ch}
  .hero__bullet{display:flex; gap:11px; align-items:flex-start; margin:18px 0 0;
    color:var(--muted); font-size:.95rem; max-width:44ch; line-height:1.55;
    padding:14px 18px; border-radius:14px;
    background:linear-gradient(180deg, rgba(255,42,51,.12), rgba(255,42,51,.05));
    border:1px solid rgba(255,42,51,.32); box-shadow:0 10px 30px -16px rgba(255,42,51,.4)}
  .hero__bullet .icon{color:var(--red-hi); width:21px; height:21px; margin-top:2px; flex:none}
  .hero__bullet b{color:#fff}
  .hero__bullet-strong{color:#fff; font-weight:700}
  .hero__bullet-strong b{color:var(--red-hi)}
  .br-m{display:none}
  .hero__cta{margin-top:22px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}
  .hero__proof{display:flex; align-items:center; gap:12px}
  .hero__avatars{display:flex}
  .avwrap{position:relative; display:inline-flex}
  .avwrap + .avwrap{margin-left:-12px}
  .hero__avatars img{width:40px; height:40px; border-radius:50%; object-fit:cover;
    border:2px solid rgba(255,255,255,.9); box-shadow:0 4px 12px rgba(0,0,0,.45)}
  .hero__verified{position:absolute; right:-3px; bottom:-3px; width:15px; height:15px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
  .hero__proof p{font-size:.85rem; color:rgba(255,255,255,.75); max-width:16ch; line-height:1.35}
  .hero__proof b{color:#fff}
  /* fagulhas (usadas na animação da queima) */
  .fx{position:absolute; border-radius:50%; background:var(--red-hi); filter:blur(1px);
    opacity:0; pointer-events:none; animation:fagulha 4.4s ease-in infinite; z-index:2}
  .f1{left:6%;  bottom:12%; width:6px; height:6px}
  .f2{right:8%; bottom:6%;  width:4px; height:4px; animation-delay:1.2s}
  .f3{left:30%; bottom:0;   width:5px; height:5px; animation-delay:2.3s}
  .f4{right:26%; bottom:16%; width:3px; height:3px; animation-delay:3.2s}
  @keyframes fagulha{0%{transform:translateY(0); opacity:0} 12%{opacity:.9}
    100%{transform:translateY(-140px) translateX(10px); opacity:0}}
  @media (prefers-reduced-motion:reduce){ .fx{animation:none} }

  /* ===== Denilson: prova social com a arte original ===== */
  .denil{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(26px,4vw,56px); align-items:center; text-align:left}
  .denil__media img{border-radius:18px; border:1px solid rgba(255,255,255,.1);
    box-shadow:0 34px 70px -30px rgba(0,0,0,.85)}
  .denil__media--m{display:none}
  .denil h2{font-size:clamp(1.7rem,3.6vw,2.6rem); font-weight:700}
  .denil .lead{margin:18px 0 0; max-width:none}
  .denil .lead + .lead{margin-top:12px}
  .denil__cta{margin-top:28px}
  @media (max-width:900px){
    .denil{grid-template-columns:1fr; text-align:center}
    .denil__media{display:none}
    .denil__media--m{display:block; width:min(420px,100%); margin-inline:auto; border-radius:18px}
    .denil .lead{margin-inline:auto}
  }

  /* ===== Protocolos prontos: 4 cartões de vidro em bento 2x2 ===== */
  .pronto{display:grid; grid-template-columns:1.12fr .88fr; grid-auto-rows:1fr; gap:18px;
    max-width:960px; margin:40px auto 0; text-align:left}
  .pcard{padding:26px 26px 24px; display:flex; flex-direction:column; gap:10px;
    transition:transform .25s, border-color .25s}
  .pcard:hover{transform:translateY(-4px); border-color:rgba(255,107,113,.45)}
  .pcard__ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff;
    background:linear-gradient(150deg,var(--red),var(--red-deep));
    box-shadow:0 10px 24px -10px rgba(255,42,51,.6)}
  .pcard__ic .icon{width:22px; height:22px; stroke-width:2.4}
  .pcard h3{font-size:1.14rem; font-weight:700}
  .pcard p{color:var(--muted); font-size:.95rem; line-height:1.55}
  @media (max-width:760px){
    .pronto{grid-template-columns:1fr; max-width:480px; grid-auto-rows:auto}
  }

  /* ===== Carrossel coverflow (depoimentos e resultados) ===== */
  .cgal{display:block; position:relative; overflow:hidden; max-width:960px; margin:38px auto 0;
    -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .ctrack{display:flex; align-items:center; will-change:transform;
    transition:transform .55s cubic-bezier(.16,1,.3,1)}
  .ctrack.no-anim{transition:none}
  .cgal .shot{flex:0 0 40%; margin:0 1%; transform:scale(.84); filter:blur(2.5px); opacity:.45;
    transition:transform .55s cubic-bezier(.16,1,.3,1), filter .45s, opacity .45s}
  .cgal .shot.is-on{transform:scale(1); filter:none; opacity:1}
  .cgal .shot img{border-radius:14px; border:1px solid var(--border)}
  .cgal .shot.is-on img{border-color:rgba(255,107,113,.5)}
  .shot{margin:0}
  .cgal--dep .shot{flex-basis:34%}
  .cdots{display:flex; justify-content:center; gap:9px; margin-top:20px}
  .cdots button{width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
    border:none; background:#4a4a4a; transition:background .3s, width .3s}
  .cdots button[aria-current="true"]{width:22px; border-radius:5px; background:var(--red)}
  @media (max-width:700px){ .cgal .shot,.cgal--dep .shot{flex-basis:62%} }
  @media (prefers-reduced-motion:reduce){ .ctrack,.cgal .shot{transition:none} }

  /* ===== Conteúdo do protocolo: capas em prateleira 3D ===== */
  .prateleira{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1000px;
    margin:40px auto 0; perspective:1400px}
  .prateleira figure{margin:0; transition:transform .3s cubic-bezier(.16,1,.3,1)}
  .prateleira img{border-radius:12px; border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 50px -22px rgba(0,0,0,.85)}
  .prateleira figure:nth-child(odd){transform:rotateY(7deg)}
  .prateleira figure:nth-child(even){transform:rotateY(-7deg)}
  .prateleira figure:hover{transform:rotateY(0) translateY(-8px)}
  @media (max-width:860px){ .prateleira{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px} }
  @media (prefers-reduced-motion:reduce){ .prateleira figure{transform:none; transition:none} }

  /* ===== Queima (scrollytelling): gordura queimando e virando músculo ===== */
  .burnwrap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); max-width:1040px;
    margin:42px auto 0; align-items:start; text-align:left}
  .burnsticky{position:sticky; top:80px; min-width:0; text-align:center}
  .burn{position:relative; width:min(360px,100%); margin-inline:auto; aspect-ratio:800/1100}
  .burn svg{width:100%; display:block; overflow:visible}
  /* a peça de gordura (camada de cima) queima de baixo para cima; atrás dela a logo acende */
  /* a frente de queima dissolve numa banda de ~10% (mask com pena), nada de corte duro */
  .burn__over{position:absolute; inset:0; transition:--queima .7s cubic-bezier(.4,0,.2,1);
    -webkit-mask-image:linear-gradient(to top, transparent calc(var(--queima,0%) - 1%),
      rgba(0,0,0,.4) calc(var(--queima,0%) + 3%), #000 calc(var(--queima,0%) + 10%));
    mask-image:linear-gradient(to top, transparent calc(var(--queima,0%) - 1%),
      rgba(0,0,0,.4) calc(var(--queima,0%) + 3%), #000 calc(var(--queima,0%) + 10%))}
  .burn img{width:100%; height:auto; display:block}
  /* "antes" mais largo, apagado e frio; "depois" nasce apagado e acende estágio a estágio.
     A diferença entre os corpos é sutil no arquivo, então o contraste vem daqui. */
  .burn__base{filter:brightness(.5) saturate(.75);
    transition:filter .8s ease, transform .8s ease}
  .burn__over img{transform:scaleX(1.1); transform-origin:50% 100%;
    filter:brightness(.82) saturate(.55)}
  /* linha de fogo: faixa de brilho na frente de queima, sobe com a mesma variável */
  /* linha de brasa: núcleo quente fino + halo curto, contida na largura do corpo */
  .burn__linha{position:absolute; left:16%; right:16%; height:22px; pointer-events:none;
    bottom:calc(var(--queima,0%) - 11px); opacity:0;
    transition:--queima .7s cubic-bezier(.4,0,.2,1), opacity .4s;
    background:
      linear-gradient(180deg, transparent 38%, rgba(255,236,220,.95) 48%, rgba(255,157,120,.85) 55%, transparent 72%),
      radial-gradient(70% 130% at 50% 50%, rgba(255,42,51,.5), transparent 70%);
    filter:blur(1.5px); mix-blend-mode:screen;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent)}
  /* caminho moderno: a frente de queima vira scrub 1:1 com o scroll, nos dois sentidos.
     A animação vence as regras de estágio pela cascata; estágios seguem cuidando de
     luz do corpo, selo e tracker (e são o fallback completo sem scroll-driven). */
  @supports (animation-timeline: view()) and (timeline-scope: --q) {
    .js .burnwrap{view-timeline:--queimatl block}
    .js .burnsec{timeline-scope:--queimatl; animation:queimar linear both;
      animation-timeline:--queimatl; animation-range:cover 8% cover 82%}
    .js .burnsec .burn__over,
    .js .burnsec .burn__linha{transition-property:opacity}
  }
  @keyframes queimar{from{--queima:0%} to{--queima:101%}}
  @media (prefers-reduced-motion:reduce){
    .js .burnsec{animation:none; --queima:101%}
  }
  .burnsec[data-stage="1"]{--queima:26%}
  .burnsec[data-stage="2"]{--queima:52%}
  .burnsec[data-stage="3"]{--queima:78%}
  .burnsec[data-stage="4"]{--queima:101%}
  .burnsec[data-stage="1"] .burn__linha,
  .burnsec[data-stage="2"] .burn__linha,
  .burnsec[data-stage="3"] .burn__linha{opacity:1}
  .burnsec[data-stage="4"] .burn__linha{opacity:0}
  .burnsec[data-stage="1"] .burn__base{filter:brightness(.68) saturate(.85)}
  .burnsec[data-stage="2"] .burn__base{filter:brightness(.84) saturate(.95) drop-shadow(0 0 16px rgba(255,42,51,.25))}
  .burnsec[data-stage="3"] .burn__base{filter:brightness(1) drop-shadow(0 0 26px rgba(255,42,51,.4))}
  .burnsec[data-stage="4"] .burn__base{filter:brightness(1.12) drop-shadow(0 0 42px rgba(255,42,51,.6));
    transform:scale(1.03); animation:brasa 2.8s ease-in-out infinite}
  @keyframes brasa{50%{filter:brightness(1.18) drop-shadow(0 0 56px rgba(255,42,51,.85))}}
  /* fagulhas que sobem enquanto queima */
  .burn .fx{background:var(--red-hi)}
  .burn__fx{opacity:0; transition:opacity .4s}
  .burnsec[data-stage="1"] .burn__fx,
  .burnsec[data-stage="2"] .burn__fx,
  .burnsec[data-stage="3"] .burn__fx{opacity:1}
  .burn-done{display:inline-flex; align-items:center; gap:9px; margin:20px auto 0; padding:10px 22px; border-radius:40px;
    max-width:100%; background:var(--card); border:1px solid rgba(255,107,113,.5); color:#ffe9ea;
    font-family:"Sora",sans-serif; font-weight:600; font-size:.9rem; opacity:0; transform:translateY(8px);
    transition:opacity .5s .5s, transform .5s .5s}
  .burn-done .icon{color:var(--red-hi); width:19px; height:19px}
  .burnsec[data-stage="4"] .burn-done{opacity:1; transform:none}
  .burnsteps{display:flex; flex-direction:column; gap:clamp(70px,16vh,140px); padding:10vh 0 14vh}
  .bstep{display:flex; gap:16px; align-items:center; padding:22px 22px}
  .bstep__ic{width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff;
    background:linear-gradient(150deg,var(--red),var(--red-deep));
    box-shadow:0 12px 26px -10px rgba(255,42,51,.55)}
  .bstep__ic .icon{width:23px; height:23px; stroke-width:2.3}
  .bstep h3{font-size:1.18rem; font-weight:700}
  @media (prefers-reduced-motion:reduce){
    .burn__over,.burn__base,.burn__linha,.burn-done{transition:none}
    .burnsec[data-stage="4"] .burn__base{animation:none}
    .burnsec .burn__linha{opacity:0}
  }
  @media (max-width:900px){
    .burnwrap{grid-template-columns:1fr; gap:0}
    .burnsticky{top:0; z-index:5; padding:14px 0 10px;
      background:linear-gradient(180deg, var(--bg) 86%, rgba(7,7,7,0))}
    .burn{width:min(250px,72vw)}
    .burn-done{margin-top:10px; font-size:.8rem}
    .burnsteps{gap:48px; padding:4vh 0 8vh}
    .bstep{padding:16px 18px}
  }

  /* ===== Oferta: stack de valor + cartão de preço ===== */
  .offer__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:24px; max-width:1000px; margin:0 auto; align-items:start}
  .stack{padding:clamp(26px,3.4vw,36px); text-align:left}
  .stack h3{font-family:"Sora",sans-serif; font-size:1.14rem; font-weight:700; margin-bottom:8px}
  .stack__linha{display:flex; justify-content:space-between; align-items:center; gap:14px;
    padding:16px 2px; border-bottom:1px solid rgba(255,255,255,.08)}
  .stack__linha span{color:#e6e6e6; font-size:1rem}
  .stack__valor{font-family:"Sora",sans-serif; font-weight:700; color:var(--muted); position:relative; white-space:nowrap}
  /* riscado que se desenha quando a seção revela */
  .stack__valor::after{content:""; position:absolute; left:-4%; right:auto; top:52%; height:2.5px; width:0;
    background:var(--red); border-radius:2px; transform:rotate(-4deg);
    transition:width .5s cubic-bezier(.4,0,.2,1)}
  .in .stack__valor::after{width:108%}
  .stack__linha:nth-child(2) .stack__valor::after{transition-delay:.3s}
  .stack__linha:nth-child(3) .stack__valor::after{transition-delay:.6s}
  .stack__linha:nth-child(4) .stack__valor::after{transition-delay:.9s}
  .stack__soma{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:18px 2px 4px}
  .stack__soma span{color:var(--muted); font-size:.95rem}
  .stack__soma b{font-family:"Sora",sans-serif; font-size:1.25rem; color:#fff}
  @media (prefers-reduced-motion:reduce){ .stack__valor::after{transition:none; width:108%} }

  .offer__card{text-align:center; border-radius:22px; padding:clamp(30px,5vw,50px);
    border:1px solid rgba(255,107,113,.4)}
  .offer__logo{width:150px; margin:0 auto 20px}
  .offer__label{margin-top:8px; color:#eee}
  .offer__price{font-size:clamp(3rem,9vw,4.6rem); font-weight:800; font-family:"Sora",sans-serif; line-height:1;
    background:linear-gradient(180deg,var(--red-hi),var(--red)); -webkit-background-clip:text;
    background-clip:text; color:transparent; margin:6px 0}
  .offer__note{color:#eee; font-weight:600; font-size:1rem; margin-top:4px}
  .offer__cards{width:300px; max-width:80%; margin:22px auto 0}
  .offer__selos{width:300px; max-width:86%; margin:16px auto 0; opacity:.85}
  .offer__btn{margin-top:22px; width:100%; justify-content:center}
  .arrow-down{width:56px; height:56px; margin:0 auto 24px; border-radius:50%; display:grid; place-items:center;
    background:var(--card); border:1px solid rgba(255,107,113,.5); color:var(--red-hi); animation:bob 1.6s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(8px)}}
  @media (max-width:900px){ .offer__grid{grid-template-columns:1fr} }

  /* ===== Garantia: selo + texto ===== */
  .guarantee{display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:clamp(26px,4vw,52px);
    align-items:center; max-width:880px}
  .guarantee__seal{width:100%; max-width:280px; margin-inline:auto;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
  .guarantee .lead{margin-inline:0; max-width:none}
  @media (max-width:760px){
    .guarantee{grid-template-columns:1fr; text-align:center}
    .guarantee__seal{max-width:200px}
    .guarantee .stitle{margin-inline:auto}
  }

  /* ===== FAQ ===== */
  .faq{max-width:820px; margin:34px auto 0; display:flex; flex-direction:column; gap:12px}
  details{background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden}
  details[open]{border-color:rgba(255,107,113,.55)}
  summary{list-style:none; cursor:pointer; position:relative; display:flex; justify-content:center; align-items:center; text-align:center; gap:16px;
    padding:20px 52px; font-family:"Sora",sans-serif; font-weight:600; font-size:1.05rem}
  summary::-webkit-details-marker{display:none}
  summary .icon{position:absolute; right:22px; color:var(--red); transition:transform .3s}
  details[open] summary .icon{transform:rotate(180deg)}
  details .answer{padding:0 22px 22px; color:var(--muted); font-size:1rem; font-weight:400; text-align:left}
  details .answer b{color:#fff}

  /* ===== Footer ===== */
  footer{background:#000; padding:56px 0 40px; border-top:1px solid var(--border)}
  .foot{display:flex; flex-direction:column; gap:22px; align-items:center; text-align:center}
  .foot img{width:120px}
  .foot .disc{font-size:.85rem; color:#8a8a8a; line-height:1.7; max-width:64ch}

  /* Responsivo geral */
  @media (max-width:900px){
    /* padrão Turbina: a foto vira banner no topo que desvanece no preto; a copy fica
       ABAIXO dela, no fundo sólido, então a logo nunca cai em cima do rosto do Will. */
    .hero{text-align:center; min-height:auto; display:block;
      padding:0 0 clamp(28px,6vw,44px)}
    .hero__bg{position:relative; height:44svh; z-index:0}
    .hero__bg img{height:100%; object-fit:cover; object-position:center 20%;
      -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
      mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
    .hero__overlay{display:none}
    .hero__copy{position:relative; z-index:1; display:flex; flex-direction:column;
      max-width:none; margin-top:-8svh; padding:0 4px}
    .hero__logo{order:1; width:96px; margin:0 auto 12px; filter:drop-shadow(0 2px 12px rgba(0,0,0,.9))}
    .hero h1{order:2; margin-inline:auto; white-space:normal; font-size:clamp(1.15rem,5.6vw,1.9rem)}
    .hero h1 .accent{font-size:clamp(1.32rem,6.4vw,2.2rem)}
    .hero__sub{order:3; max-width:none; margin:14px auto 0}
    /* box na largura do botão: alarga o texto e baixa a altura do card */
    .hero__bullet{order:4; margin:14px 0 0; width:100%; max-width:none; text-align:center;
      display:block; font-size:.9rem; padding:14px 16px}
    .hero__bullet .icon{display:inline-block; vertical-align:-4px; margin:0 6px 0 0}
    .hero__cta{order:5; margin-top:16px; flex-direction:column; gap:12px; justify-content:center}
    .hero__proof{justify-content:center}
  }
  @media (max-width:560px){
    body{font-size:16px}
    .btn{width:100%; justify-content:center; padding:1em 1.4em}
  }

  /* ===== Chat de objeções: celular com a conversa se desenrolando (padrão MSD/ZC) ===== */
  .chatgrid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center}
  .chatgrid .stitle{margin:0}
  .chatgrid .lead{max-width:44ch; margin:18px 0 0}
  .chat__cta{margin-top:26px}
  .chat__note{margin-top:16px; font-size:.8rem; color:#8a8a8a}
  .phone{width:min(300px,80vw); margin-inline:auto; background:#000; border:1px solid #2c2c2c; border-radius:44px; padding:11px;
    box-shadow:0 30px 60px -25px rgba(0,0,0,.9), 0 0 70px -18px rgba(255,42,51,.4)}
  .phone__screen{background:#0d0d10; border-radius:34px; overflow:hidden; aspect-ratio:393/852; display:flex; flex-direction:column}
  .chat__bar{display:flex; gap:10px; align-items:center; padding:13px 14px; background:#17171b; border-bottom:1px solid #26262b; text-align:left; flex:none}
  .chat__bar img{width:30px; height:30px; border-radius:50%}
  .chat__bar strong{display:block; font-size:.82rem; line-height:1.2}
  .chat__bar span{font-size:.68rem; color:#9a9aa2}
  /* Ancorado no topo e rolável: com flex-end + overflow hidden, a conversa cresceria para
     cima e a primeira pergunta sumiria da tela sem ter como voltar */
  .chat__scroll{padding:14px 12px 18px; display:flex; flex-direction:column; gap:9px; flex:1;
    min-height:0; overflow-y:auto; scrollbar-width:none}
  .chat__scroll::-webkit-scrollbar{display:none}
  .chat__day{align-self:center; font-size:.62rem; color:#8b8b93; background:#1b1b20; padding:3px 10px; border-radius:20px; margin-bottom:2px}
  .msg{max-width:84%; padding:8px 11px; border-radius:13px; border-bottom-left-radius:4px; font-size:.76rem; line-height:1.45;
    color:#ececf1; background:#1e1e24; align-self:flex-start; text-align:left}
  .msg--r{align-self:flex-end; background:linear-gradient(135deg,#7e0d12,#d3202a); border-bottom-left-radius:13px; border-bottom-right-radius:4px}
  .msg .who{display:block; font-size:.62rem; font-weight:600; color:var(--red); margin-bottom:2px}
  .msg--r .who{color:#ffb3b6}
  .msg time{display:block; font-size:.56rem; color:rgba(255,255,255,.45); text-align:right; margin-top:3px}
  /* Mensagem não revelada NÃO ocupa espaço (display:none): o scrollHeight cresce junto
     com a conversa e o scroll pro fundo acompanha como num chat real. Com opacity-only,
     a lista inteira já existia invisível e o auto-scroll pulava pro vazio. */
  .js .chat--anima .msg{display:none}
  .js .chat--anima .msg.on{display:block; animation:msgIn .38s cubic-bezier(.2,.9,.3,1.2)}
  @keyframes msgIn{from{opacity:0; transform:translateY(10px) scale(.97)}}
  .chat__typing{display:none; gap:5px; align-items:center; padding:10px 14px; width:fit-content;
    background:#1f1f1f; border-radius:16px 16px 16px 5px; margin:2px 0 6px}
  .chat__typing.on{display:flex}
  .chat__typing span{width:7px; height:7px; border-radius:50%; background:#9a9a9a;
    animation:pip 1.1s infinite ease-in-out}
  .chat__typing span:nth-child(2){animation-delay:.16s}
  .chat__typing span:nth-child(3){animation-delay:.32s}
  @keyframes pip{0%,60%,100%{opacity:.32; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}
  @media (prefers-reduced-motion:reduce){
    .js .chat--anima .msg{display:block; animation:none}
    .chat__typing span{animation:none}
  }
  @media (max-width:900px){
    .chatgrid{display:flex; flex-direction:column; text-align:center; gap:0}
    .chatgrid__copy{display:contents}
    .chatgrid .stitle{order:1}
    .chatgrid .lead{order:2; margin:18px auto 0}
    .chat__note{order:3; margin-top:14px}
    .chatgrid__media{order:4; margin-top:26px}
    .chat__cta{order:5; margin-top:26px}
  }