/* Paleta Zero Celulite: preto e brasa. Os nomes --lime e --purple vêm do Monte Sua Dieta,
     de onde este CSS foi herdado; aqui eles carregam os dois tons de fogo da marca. */
  :root{
    --bg:#0a0a0a; --bg2:#141414; --panel:#111; --card:rgba(30,30,30,.65);
    --border:#3a3a3a; --text:#fff; --muted:#c9c9c9;
    --orange:#FF5700;   /* fogo, cor principal   */
    --lime:#FFB25C;     /* brasa clara, topo dos gradientes */
    --purple:#FF8A3D;   /* brasa média, destaque de texto   */
    --green:#1BE52F; --green-d:#139620; --red:#ff4141;
    --sem1:#3FBFD0; --sem2:#F49AC1; --sem3:#A8D84B;  /* semanas 1, 2 e 3, as mesmas do PDF */
    --maxw:1140px; --radius:14px;
  }
  *,*::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(--orange); text-decoration:none}
  a:hover{color:var(--lime)}
  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(--purple)}
  .center{text-align:center}
  .eyebrow{color:var(--orange); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem}
  .lead{color:var(--muted); font-size:clamp(1rem,1.6vw,1.2rem); max-width:60ch; margin-inline:auto}
  .icon{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
  /* Buttons */
  .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,.6); transition:transform .2s, box-shadow .2s, filter .2s;
    color:#111; background:linear-gradient(180deg,var(--lime) 0%,var(--orange) 100%);
    box-shadow:0 10px 34px -10px rgba(247,109,0,.7)}
  .btn:hover{transform:translateY(-2px); filter:brightness(1.05); color:#111}
  .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)}
  .btn--green:hover{color:#fff}
  /* Marquee */
  .marquee{background:linear-gradient(90deg,var(--orange),var(--purple)); padding:16px 0; overflow:hidden; white-space:nowrap}
  .marquee__track{display:inline-flex; gap:0; animation:scroll 28s linear infinite; will-change:transform}
  .marquee span{font-family:"Sora",sans-serif; font-weight:700; font-size:1.05rem; padding:0 26px; text-transform:uppercase; letter-spacing:.05em}
  @keyframes scroll{to{transform:translateX(-50%)}}
  /* Section titles */
  .stitle{font-size:clamp(1.7rem,4vw,2.9rem); font-weight:700; max-width:24ch}
  .center .stitle{margin-inline:auto}
  .divider{width:90px; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--orange),var(--purple)); margin:34px auto}
  /* (blocos .grid/.cols/.card/.checks/.carousel/.note/.split herdados da MSD removidos:
     nenhum aparecia no HTML desta página e o .foot/.guarantee órfãos já tinham quebrado
     duas seções em produção) */
  /* Offer */
  .offer{background:radial-gradient(circle at 50% 0%, rgba(90,28,4,.55) 0%, rgba(10,10,10,.92) 60%), url("bg-oferta.webp") center/cover no-repeat}
  .offer__card{max-width:620px; margin:0 auto; text-align:center; background:linear-gradient(180deg,rgba(40,20,60,.6),rgba(20,20,20,.7));
    border:1px solid var(--purple); border-radius:22px; padding:clamp(30px,5vw,50px)}
  .offer__logo{width:180px; margin:0 auto 22px}
  .offer h2{font-size:clamp(1.4rem,3.5vw,2rem); font-weight:700}
  .offer__old{color:var(--muted); font-size:1.2rem; margin-top:22px}
  .offer__old del{color:var(--red)}
  .offer__label{margin-top:14px; color:#eee}
  .offer__price{font-size:clamp(3rem,10vw,5rem); font-weight:800; font-family:"Sora",sans-serif; line-height:1;
    background:linear-gradient(180deg,var(--lime),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; margin:6px 0}
  .offer__note{color:#eee; font-weight:600; font-size:.95rem; margin-top:4px}
  .offer__btn{margin-top:20px; width:100%; justify-content:center}
  .offer__safe{display:flex; gap:8px; align-items:center; justify-content:center;
    margin-top:14px; font-size:.82rem; color:var(--muted)}
  .arrow-down{width:56px; height:56px; margin:0 auto 24px; border-radius:50%; display:grid; place-items:center;
    background:var(--card); border:1px solid var(--purple); color:var(--purple); animation:bob 1.6s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(8px)}}
  /* Guarantee: selo + texto lado a lado, centrado na página */
  .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:210px}
    .guarantee .stitle{margin-inline:auto}
  }
  /* Team */
  .team{display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:760px; margin:0 auto}
  .tcard{background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; text-align:center; transition:border-color .25s}
  .tcard:hover{border-color:var(--orange)}
  .tcard img{width:100%; max-width:300px; border-radius:12px; margin:0 auto 16px; object-fit:cover}
  .tcard h3{font-size:1.25rem; font-weight:700; color:var(--orange)}
  .tcard span{display:block; font-size:.9rem; color:#eaeaea; font-weight:600; margin:2px 0 10px}
  .tcard p{color:var(--muted); font-size:.93rem; line-height:1.55}
  @media (max-width:640px){ .team{grid-template-columns:1fr; max-width:380px} }
  /* 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:var(--orange)}
  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(--orange); transition:transform .3s}
  details[open] summary .icon{transform:rotate(180deg)}
  details .answer{padding:0 22px 22px; color:var(--muted); font-size:1rem; font-family:"Poppins",sans-serif; font-weight:400}
  /* Footer: rodapé simples e centrado */
  .foot{background:#000; padding:56px 0 40px; border-top:1px solid var(--border)}
  .foot p{font-size:.85rem; color:#8a8a8a; line-height:1.7; max-width:62ch; margin-inline:auto}
  /* 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,.carousel__track,.arrow-down{animation:none}}
  /* ===== Hero split (texto + mockup do produto) ===== */
  .hero{position:relative; text-align:left; background:
      radial-gradient(120% 95% at 78% 15%, rgba(255,87,0,.34) 0%, rgba(10,10,10,0) 62%),
      radial-gradient(90% 70% at 8% 90%, rgba(255,140,40,.18) 0%, rgba(10,10,10,0) 60%),
      linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.9)),
      url("bg-hero.webp") center/cover no-repeat, var(--bg);
    padding-top:clamp(26px,4vw,48px); padding-bottom:clamp(48px,7vw,88px)}
  .hero__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,52px); align-items:center}
  .hero__logo{width:150px; margin:0 0 clamp(20px,3vw,30px)}
  .hero h1{font-size:clamp(2rem,4.4vw,3.35rem); font-weight:800; max-width:19ch; margin:0}
  .hero__sub{margin:20px 0 0; color:#e8e8e8; font-size:clamp(1rem,1.5vw,1.14rem); max-width:54ch}
  .hero__sub b{color:#fff; font-weight:600}
  .hero__cta{margin-top:30px}
  .hero__proof{display:flex; gap:12px; align-items:flex-start; margin-top:24px; max-width:46ch}
  .hero__proof .icon{color:var(--lime); width:22px; height:22px; margin-top:2px}
  .hero__proof p{color:var(--muted); font-size:.92rem}
  .hero__proof b{color:#fff}
  .hero__media img{border-radius:16px}
  /* ===== Previews reais das páginas do guia ===== */
  .previews{margin-top:40px}
  .pvtrack{display:grid; grid-template-columns:repeat(5,1fr); gap:16px}
  .preview{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; margin:0;
    text-align:center; transition:transform .25s, border-color .25s, box-shadow .25s}
  .preview:hover{transform:translateY(-5px); border-color:var(--purple); box-shadow:0 18px 40px -18px rgba(0,0,0,.85)}
  .preview img{border-radius:8px; border:1px solid rgba(255,255,255,.09); margin-bottom:12px}
  .preview figcaption{font-family:"Sora",sans-serif; font-size:.88rem; font-weight:600; color:#f2f2f2; line-height:1.3}
  .preview figcaption small{display:block; font-family:"Poppins",sans-serif; font-weight:400;
    font-size:.78rem; color:var(--muted); margin-top:6px; line-height:1.45}
  /* ===== Timeline do método ===== */
  .tl{display:grid; gap:16px; max-width:900px; margin:42px auto 0; text-align:left}
  .tl__item{display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start;
    background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 22px;
    transition:border-color .25s}
  .tl__item:hover{border-color:var(--orange)}
  .tl__num{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#111;
    font-family:"Sora",sans-serif; font-weight:800; font-size:1.35rem;
    background:linear-gradient(150deg,var(--lime),var(--orange))}
  .tl__item h3{font-size:1.12rem; font-weight:700; margin-bottom:8px}
  .tl__item p{color:var(--muted); font-size:.97rem}
  .tl__item b{color:#fff; font-weight:600}
  /* ===== Oferta: entregáveis + preço ===== */
  .offer__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:24px; max-width:1000px; margin:0 auto; align-items:start}
  .offer__grid .offer__card{max-width:none; margin:0}
  .deliver{background:linear-gradient(180deg,rgba(40,20,60,.55),rgba(20,20,20,.7));
    border:1px solid var(--border); border-radius:22px; padding:clamp(26px,3.4vw,36px); text-align:left}
  .deliver h3{font-family:"Sora",sans-serif; font-size:1.14rem; font-weight:700; margin-bottom:20px}
  .deliver ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
  .deliver li{display:flex; gap:12px; align-items:flex-start; font-size:.96rem; color:#e4e4e4; line-height:1.5}
  .deliver li .icon{color:var(--green); width:21px; height:21px; margin-top:3px}
  .deliver li b{color:#fff; font-weight:600}
  .deliver__foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
    font-size:.88rem; color:var(--muted)}
  /* ===== Disclaimer honesto ===== */
  .caution{max-width:820px; margin:34px auto 0; background:rgba(255,255,255,.04);
    border:1px solid var(--border); border-left:3px solid var(--orange); border-radius:12px; padding:18px 22px}
  .caution p{font-size:.93rem; color:var(--muted); text-align:left}
  /* ===== Responsivo dos componentes novos ===== */
  @media (max-width:900px){
    .hero{text-align:center; background:
      radial-gradient(120% 95% at 78% 15%, rgba(255,87,0,.34) 0%, rgba(10,10,10,0) 62%),
      radial-gradient(90% 70% at 8% 90%, rgba(255,140,40,.18) 0%, rgba(10,10,10,0) 60%),
      linear-gradient(180deg, rgba(10,10,10,.72), rgba(10,10,10,.9)),
      url("bg-hero-m.webp") center/cover no-repeat, var(--bg)}
    .hero__grid{display:flex; flex-direction:column; gap:0}
    .hero__copy{display:contents}
    .hero__logo{order:1; margin:0 auto 18px}
    .hero__media{order:2; width:min(400px,100%); margin:0 auto 22px}
    .hero h1{order:3; max-width:none; margin-inline:auto}
    .hero__sub{order:4; max-width:none; margin:18px auto 0}
    .hero__proof{order:5; margin:22px auto 0; justify-content:center; text-align:center}
    .hero__cta{order:6; margin-top:26px}
    .pvtrack{grid-template-columns:repeat(3,1fr)}
    .offer__grid{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .pvtrack{grid-template-columns:1fr 1fr; gap:12px}
    .tl__item{grid-template-columns:44px 1fr; gap:14px; padding:20px 16px}
    .tl__num{width:44px; height:44px; font-size:1.1rem}
  }
  /* ===== VS: comparacao lado a lado ===== */
  .vs{display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:960px; margin:42px auto 0; position:relative; text-align:left}
  .vs__col{background:var(--card); border:1px solid rgba(255,65,65,.4); border-radius:18px; padding:28px 26px}
  .vs__col--win{border-color:rgba(27,229,47,.45)}
  .vs__col h3{font-size:1.08rem; text-align:center; margin-bottom:4px}
  .vs__sub{display:block; text-align:center; color:var(--muted); font-size:.85rem; margin-bottom:18px}
  .vs__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
  .vs__col li{display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:#e2e2e2; line-height:1.5}
  .vs__col li .icon{width:20px; height:20px; margin-top:3px; color:var(--red)}
  .vs__col--win li .icon{color:var(--green)}
  .vs__badge{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%;
    display:grid; place-items:center; background:linear-gradient(150deg,var(--orange),var(--purple)); color:#fff; z-index:2;
    border:4px solid var(--bg); font-family:"Sora",sans-serif; font-weight:800; font-size:.88rem}
  /* ===== Grade de benefícios (2×2) ===== */
  .ocgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:880px; margin-inline:auto}
  @media (max-width:700px){ .ocgrid{grid-template-columns:1fr; max-width:480px} }
  .ocard{display:flex; gap:14px; align-items:flex-start; text-align:left; background:var(--card); border:1px solid var(--border);
    border-radius:14px; padding:18px 20px; transition:transform .25s, border-color .25s}
  .ocard:hover{transform:translateY(-3px); border-color:var(--orange)}
  .ocard__ic{width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff;
    background:linear-gradient(150deg,var(--orange),var(--purple))}
  .ocard__ic .icon{width:19px; height:19px; stroke-width:2.6}
  .ocard h3{font-size:.98rem; font-weight:700; margin-bottom:5px}
  .ocard p{color:var(--muted); font-size:.88rem; line-height:1.5}
  /* ===== Chat: direct ===== */
  .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}
  .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)}
  .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}
  .chat__scroll{padding:14px 12px 18px; display:flex; flex-direction:column; gap:9px; flex:1; min-height:0; overflow:hidden; justify-content:flex-end}
  .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,#8a2f04,#d14a05); border-bottom-left-radius:13px; border-bottom-right-radius:4px}
  .msg .who{display:block; font-size:.62rem; font-weight:600; color:var(--orange); margin-bottom:2px}
  .msg--r .who{color:var(--lime)}
  .msg time{display:block; font-size:.56rem; color:rgba(255,255,255,.45); text-align:right; margin-top:3px}
  .chat__typing{display:flex; gap:4px; padding:9px 12px; background:#1e1e24; border-radius:13px; width:max-content}
  .chat__typing span{width:6px; height:6px; border-radius:50%; background:#8b8b93; animation:blink 1.2s infinite}
  .chat__typing span:nth-child(2){animation-delay:.2s}
  .chat__typing span:nth-child(3){animation-delay:.4s}
  @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
  .chat__note{margin-top:16px; font-size:.8rem; color:#8a8a8a}
  @media (prefers-reduced-motion:reduce){.chat__typing span{animation:none}}
  @media (max-width:900px){
    .vs{grid-template-columns:1fr}
    .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}
  }
  /* ===== Quebra-cabeça dos 4 passos (scrollytelling) ===== */
  .pzwrap{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4vw,60px); max-width:1040px;
    margin:42px auto 0; align-items:start; text-align:left}
  .pzsticky{position:sticky; top:90px; min-width:0}
  .pz-svg{width:100%; max-width:430px; margin-inline:auto; display:block; transition:filter .8s}
  .pz{transform-box:fill-box; transform-origin:center; opacity:.25;
    transition:transform .65s cubic-bezier(.16,1,.3,1), opacity .5s;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
  .pz1{transform:translate(-72px,-60px) rotate(-13deg)}
  .pz2{transform:translate(72px,-56px) rotate(11deg)}
  .pz3{transform:translate(-66px,62px) rotate(9deg)}
  .pz4{transform:translate(74px,66px) rotate(-12deg)}
  .pzsec[data-stage="1"] .pz1,
  .pzsec[data-stage="2"] :is(.pz1,.pz2),
  .pzsec[data-stage="3"] :is(.pz1,.pz2,.pz3),
  .pzsec[data-stage="4"] :is(.pz1,.pz2,.pz3,.pz4){transform:none; opacity:1}
  .pzsec[data-stage="4"] .pz-svg{filter:drop-shadow(0 0 36px rgba(247,109,0,.35))}
  .pz-done{display:inline-flex; align-items:center; gap:9px; margin:18px auto 0; padding:9px 20px; border-radius:40px;
    background:var(--card); border:1px solid var(--green); color:#eaffea; font-family:"Sora",sans-serif;
    font-weight:600; font-size:.9rem; opacity:0; transform:translateY(8px);
    transition:opacity .5s .7s, transform .5s .7s}
  .pz-done .icon{color:var(--green); width:19px; height:19px}
  .pzsec[data-stage="4"] .pz-done{opacity:1; transform:none}
  .pzsteps{display:flex; flex-direction:column; gap:clamp(70px,16vh,140px); padding:10vh 0 16vh}
  .pzsteps .tl__item{margin:0}
  @media (prefers-reduced-motion:reduce){
    .pz{transform:none; opacity:1; transition:none}
    .pz-done{transition:none}
  }
  @media (max-width:900px){
    .pzwrap{grid-template-columns:1fr; gap:0}
    .pzsticky{top:0; z-index:5; padding:14px 0 10px;
      background:linear-gradient(180deg, var(--bg2) 86%, rgba(20,20,20,0))}
    .pz-svg{max-width:min(370px,94vw)}
    .pz-done{display:flex; width:max-content; max-width:100%}
    .pzsteps{gap:52px; padding:5vh 0 9vh}
  }
  /* ===== 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,.035) 63px 64px),
      repeating-linear-gradient(90deg, transparent 0 63px, rgba(255,255,255,.035) 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%)}
  .gridbg--alt{background-color:var(--bg2)}
  .gridbg > *{position:relative; z-index:1}


  /* Fundos ainda não gerados: até o Codex entregar os bg-*.webp, cada seção com [data-bg]
     cai num degradê de brasa. Assim ninguém vê buraco nem 404 no console, e no dia em que
     o arquivo aparecer a regra de imagem acima simplesmente ganha por vir depois. */
  [data-bg]{background-image:
    linear-gradient(180deg, rgba(20,20,20,.72), rgba(20,20,20,.9)),
    radial-gradient(120% 80% at 50% 0%, rgba(255,87,0,.30), transparent 62%);
    background-size:cover; background-position:center}
  [data-bg="estetica"]{background-image:
    linear-gradient(180deg,rgba(20,20,20,.66),rgba(20,20,20,.86)),
    url("bg-estetica.webp"); background-size:cover; background-position:center}
  [data-bg="estetica"]::before{opacity:.35}
  [data-bg="pilares"]{background-image:
    linear-gradient(180deg,rgba(20,20,20,.66),rgba(20,20,20,.86)),
    url("bg-pilares.webp"); background-size:cover; background-position:center}
  [data-bg="pilares"]::before{opacity:.35}
  [data-bg="resultados"]{background-image:
    linear-gradient(180deg,rgba(20,20,20,.66),rgba(20,20,20,.86)),
    url("bg-resultados.webp"); background-size:cover; background-position:center}
  [data-bg="resultados"]::before{opacity:.35}
  [data-bg="final"]{background-image:
    linear-gradient(180deg,rgba(20,20,20,.66),rgba(20,20,20,.86)),
    url("bg-final.webp"); background-size:cover; background-position:center}
  [data-bg="final"]::before{opacity:.35}
  /* Seções com imagem de fundo (Codex entrega em assets/bg-*.webp) */
  .imgbg{position:relative; background-color:var(--bg); isolation:isolate}
  .imgbg > *{position:relative; z-index:1}
  /* ===== Carrossel dos previews (mobile) ===== */
  .pvdots{display:none}
  /* os clones de loop só ficam ocultos nos previews (que viram grid no desktop);
     no carrossel de resultados eles existem em qualquer largura */
  .previews .pv-clone{display:none}
  @media (max-width:900px){
    .previews{display:block; position:relative; overflow:hidden; margin-top:34px;
      -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
              mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
    .pvtrack{display:flex; grid-template-columns:none; gap:0; align-items:center;
      will-change:transform; transition:transform .55s cubic-bezier(.16,1,.3,1)}
    .previews .preview{flex:0 0 58%; margin:0 1.2%; transform:scale(.82); filter:blur(2.5px);
      opacity:.5; transition:transform .55s cubic-bezier(.16,1,.3,1), filter .45s, opacity .45s}
    .previews .pvtrack.no-anim{transition:none}
    .previews .preview.is-on{transform:scale(1); filter:none; opacity:1; border-color:var(--purple)}
    .previews .preview:hover{transform:scale(.8)}
    .previews .preview.is-on:hover{transform:scale(1)}
    .previews .pv-clone{display:block}
    .pvdots{display:flex; justify-content:center; gap:9px; margin-top:20px}
    .pvdots button{width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
      border:none; background:#4a4a4a; transition:background .3s, width .3s}
    .pvdots button[aria-current="true"]{width:22px; border-radius:5px; background:var(--orange)}
  }
  @media (prefers-reduced-motion:reduce){
    .pvtrack,.previews .preview{transition:none}
  }
  /* Responsive */
  @media (max-width:560px){
    body{font-size:16px}
    .btn{width:100%; justify-content:center; padding:1em 1.4em}
  }


  /* ─────────────────────────────────────────────────────────────
     Específico do Zero Celulite
     ───────────────────────────────────────────────────────────── */

  /* Chat que se desenrola sozinho quando entra na tela.
     Sem JS ou com movimento reduzido, tudo já nasce visível: a conversa é conteúdo,
     não enfeite, e não pode depender da animação para ser lida. */
  .chat__scroll .msg{opacity:1; transform:none}
  .js .chat--anima .msg{opacity:0; transform:translateY(10px) scale(.97);
    transition:opacity .38s ease, transform .38s cubic-bezier(.2,.9,.3,1.2)}
  .js .chat--anima .msg.on{opacity:1; transform:none}
  .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{opacity:1; transform:none}
    .chat__typing span{animation:none}
  }

  /* ===== Capa do produto flutuando no hero ===== */
  .capa3d{position:relative; perspective:1000px; width:min(500px,100%); margin-inline:auto}
  .capa3d img{border-radius:16px; border:1px solid rgba(255,140,60,.35);
    transform:rotateY(-9deg) rotateX(4deg);
    box-shadow:0 44px 80px -30px rgba(0,0,0,.85), 0 0 80px -6px rgba(255,87,0,.42);
    animation:flutua 5.4s ease-in-out infinite}
  @keyframes flutua{50%{transform:rotateY(-9deg) rotateX(4deg) translateY(-14px)}}
  .fx{position:absolute; border-radius:50%; background:var(--lime); filter:blur(1px);
    opacity:0; pointer-events:none; animation:fagulha 4.2s ease-in infinite}
  .f1{left:8%;  bottom:10%; width:6px; height:6px}
  .f2{right:9%; bottom:4%;  width:4px; height:4px; animation-delay:1.1s}
  .f3{left:32%; bottom:0;   width:5px; height:5px; animation-delay:2.2s}
  .f4{right:28%; bottom:14%; width:3px; height:3px; animation-delay:3.1s}
  @keyframes fagulha{0%{transform:translateY(0); opacity:0} 12%{opacity:.85}
    100%{transform:translateY(-130px) translateX(8px); opacity:0}}
  @media (prefers-reduced-motion:reduce){ .capa3d img,.fx{animation:none} }

  /* ===== Chips do "o que muda" ===== */
  .chips{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:980px; margin:38px auto 0}
  .chip{display:flex; gap:12px; align-items:flex-start; text-align:left; background:var(--card);
    border:1px solid var(--border); border-radius:12px; padding:15px 16px; transition:border-color .25s}
  .chip:hover{border-color:var(--orange)}
  .chip .icon{color:var(--green); width:20px; height:20px; margin-top:2px}
  .chip h3{font-size:.92rem; font-weight:700; margin-bottom:3px}
  .chip p{color:var(--muted); font-size:.84rem; line-height:1.45}
  @media (max-width:860px){ .chips{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){ .chips{grid-template-columns:1fr; max-width:420px} }

  /* ===== Calendário dos 21 dias (scrollytelling) ===== */
  .calwrap{display:grid; grid-template-columns:.72fr 1.28fr; gap:clamp(26px,4vw,56px);
    max-width:1080px; margin:44px auto 0; align-items:start; text-align:left}
  .calbox{position:sticky; top:80px; min-width:0}
  .calsteps{display:flex; flex-direction:column; gap:clamp(80px,20vh,160px); padding:12vh 0 18vh}
  .calstep{display:flex; gap:14px; align-items:flex-start; background:var(--card);
    border:1px solid var(--border); border-radius:14px; padding:20px 18px}
  .calstep__dot{width:14px; height:14px; border-radius:50%; background:var(--cor); flex:none;
    margin-top:5px; box-shadow:0 0 14px var(--cor)}
  .calstep h3{font-size:1rem; font-weight:700; margin-bottom:6px}
  .calstep p{color:var(--muted); font-size:.9rem; line-height:1.5}
  .cal{background:#101012; border:1px solid #2c2c30; border-radius:16px; overflow:hidden;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
  .cal__top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    padding:14px 18px; background:#17171b; border-bottom:1px solid #26262b}
  .cal__top strong{font-family:"Sora",sans-serif; font-size:.92rem}
  .cal__top span{font-size:.76rem; color:#9a9aa2}
  .cal__head{display:grid; grid-template-columns:repeat(7,1fr); padding:8px 8px 0;
    text-align:center; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:#8b8b93}
  /* minmax(0,1fr): sem isso o chip de evento trava o min-content da coluna e a
     grade estoura pra fora da tela no mobile (mesmo blowout do selo do quebra-cabeça) */
  .cal__grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; padding:8px}
  .cd{min-width:0; min-height:74px; border:1px solid #232327; border-radius:8px; padding:5px 5px 6px;
    display:flex; flex-direction:column; gap:3px; background:#141416;
    opacity:.28; transform:scale(.94);
    transition:opacity .45s ease, transform .45s ease, border-color .45s;
    transition-delay:calc(var(--d)*70ms)}
  .cd b{font-family:"Sora",sans-serif; font-size:.72rem; color:#c9c9c9; font-weight:700}
  .ev{font-size:.6rem; line-height:1.25; padding:2px 5px; border-radius:4px; color:#0c0c0c;
    font-weight:600; background:var(--cor,#333); width:fit-content; max-width:100%; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap}
  .cd.s1{--cor:var(--sem1)} .cd.s2{--cor:var(--sem2)} .cd.s3{--cor:var(--sem3)}
  .calsec[data-fase="1"] .cd.s1,
  .calsec[data-fase="2"] :is(.cd.s1,.cd.s2),
  .calsec[data-fase="3"] :is(.cd.s1,.cd.s2,.cd.s3){opacity:1; transform:none; border-color:color-mix(in srgb, var(--cor) 45%, #232327)}
  .cd--fim .ev{background:linear-gradient(90deg,var(--lime),var(--orange)); color:#111}
  .calsec[data-fase="3"] .cd--fim{box-shadow:0 0 22px rgba(255,87,0,.35)}
  @media (prefers-reduced-motion:reduce){ .cd{transition:none} }
  @media (max-width:900px){
    .calwrap{grid-template-columns:1fr; gap:0}
    .calbox{top:0; z-index:5; padding:12px 0 8px;
      background:linear-gradient(180deg, var(--bg) 86%, rgba(10,10,10,0))}
    .calsteps{order:1; gap:56px; padding:5vh 0 9vh}
    .cd{min-height:58px}
    .ev{font-size:.52rem; padding:2px 3px}
  }

  /* ===== Carrossel dos resultados (todas as larguras) ===== */
  .resgal{display:block; position:relative; overflow:hidden; max-width:960px; margin-inline:auto;
    -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .restrack{display:flex; align-items:center; will-change:transform;
    transition:transform .55s cubic-bezier(.16,1,.3,1)}
  .restrack.no-anim{transition:none}
  .resgal .shot{flex:0 0 44%; 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}
  .resgal .shot.is-on{transform:scale(1); filter:none; opacity:1}
  .resgal .shot img{border-radius:14px; border:1px solid var(--border)}
  .resgal .shot.is-on img{border-color:var(--purple)}
  .shot{margin:0}
  .resdots{display:flex; justify-content:center; gap:9px; margin-top:20px}
  .resdots button{width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
    border:none; background:#4a4a4a; transition:background .3s, width .3s}
  .resdots button[aria-current="true"]{width:22px; border-radius:5px; background:var(--orange)}
  @media (max-width:700px){ .resgal .shot{flex-basis:62%} }
  @media (prefers-reduced-motion:reduce){ .restrack,.resgal .shot{transition:none} }

  /* Aviso dos antes e depois: precisa ser lido, não escondido em corpo 9 */
  .disclaimer{margin-top:22px; padding:15px 18px; border-radius:12px;
    background:rgba(255,87,0,.10); border:1px solid rgba(255,87,0,.32);
    color:#f3d6c2; font-size:.88rem; line-height:1.55}
  .disclaimer b{color:#fff}