/* Wet Venus - folha unica da pagina de venda.
   A pagina segue a curva do desejo: o topo respira devagar, o pulso acelera a cada secao,
   o preco e o climax (ondas e tremor) e as duvidas vem no relaxamento.
   O pulso e UM so para a pagina inteira: cena.js escreve --p (0 a 1) nos elementos [data-pulsa]. */

:root{
  --noite:#120709; --noite-2:#1B0B10; --noite-3:#27111A; --linha-esc:rgba(255,214,222,.13);
  --vinho:#5E0B20; --carmim:#C8184E; --carmim-forte:#A3123E; --rosa:#FF6B93; --rosa-claro:#FFB8CA;
  --ouro:#E8B777; --ouro-claro:#F8DDB4;
  --pele:#FBF1EC; --pele-2:#F6E4DC; --pele-3:#EED3C7; --linha:#EACFC4;
  --tinta:#24090F; --tinta-2:#62424A; --tinta-3:#7E5F66;
  --tx:#FFF3F0; --tx-2:#E6CACD; --tx-3:#B9979D;
  --btn-a:#FF3D72; --btn-b:#C8184E;
  --r:14px; --r-g:26px; --barra:62px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --corpo:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --p:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--noite)}
body{background:var(--noite);color:var(--tx);font:17px/1.55 var(--corpo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
li{list-style:none}
::selection{background:var(--carmim);color:#FFF}
.defs{position:absolute;width:0;height:0;overflow:hidden}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.03;letter-spacing:-.02em;text-wrap:balance;
  font-variation-settings:"SOFT" 60,"WONK" 0}
h1{font-size:clamp(2.3rem,6.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.6vw,3rem)}
h3{font-size:1.28rem;line-height:1.12}
.wrap{width:min(100% - 36px,1140px);margin-inline:auto}
.olho{display:inline-block;font:800 .68rem/1.55 var(--corpo);letter-spacing:.24em;text-transform:uppercase;color:var(--carmim)}
.noite .olho,.oferta-lado .olho{color:var(--rosa)}
.lead{font-size:clamp(1.03rem,2.1vw,1.16rem);line-height:1.58;color:var(--tinta-2);max-width:37em}
.noite .lead{color:var(--tx-2)}
.centro{text-align:center;justify-content:center;justify-items:center;margin-inline:auto}

/* ---------------- a palavra quente: brilho que corre, letra que amolece no pulso ---------------- */
.quente{font-style:italic;font-weight:500;padding-right:.08em;
  background:linear-gradient(100deg,var(--carmim) 0%,var(--rosa) 28%,var(--ouro-claro) 50%,var(--rosa) 72%,var(--carmim) 100%);
  background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:brilho 5.5s linear infinite;
  font-variation-settings:"SOFT" calc(35 + var(--p) * 65),"WONK" 1}
@keyframes brilho{to{background-position:-230% 0}}
.pele .quente,.pele-2 .quente,.depois .quente{background-image:linear-gradient(100deg,var(--vinho) 0%,var(--carmim) 30%,#F0558A 50%,var(--carmim) 70%,var(--vinho) 100%)}
@media(hover:hover) and (min-width:960px){.heroi .quente,.climax .quente{filter:url(#molhado)}}

/* ---------------- botao: bate junto com a pagina ---------------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border:0;cursor:pointer;border-radius:999px;padding:18px 30px;color:#FFF;white-space:nowrap;
  background:linear-gradient(165deg,var(--btn-a) 0%,var(--btn-b) 100%);font:800 1.05rem/1 var(--corpo);letter-spacing:.005em;
  box-shadow:0 16px 38px -14px rgba(200,24,78,.95),0 0 0 calc(var(--p) * 11px) rgba(255,61,114,calc(.24 - var(--p) * .12)),inset 0 1px 0 rgba(255,255,255,.35);
  scale:calc(1 + var(--p) * .035);transition:translate .25s cubic-bezier(.2,.7,.2,1),filter .25s}
.btn small{font:700 .84rem/1 var(--corpo);opacity:.9;padding-left:12px;border-left:1px solid rgba(255,255,255,.4)}
.btn::before{content:"";position:absolute;z-index:-1;left:-15%;right:-15%;top:100%;height:140%;border-radius:45%;
  background:radial-gradient(60% 50% at 50% 30%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.btn:hover::before{transform:translateY(-78%)}
.btn:hover{translate:0 -2px;filter:saturate(1.1) brightness(1.04)}
.btn:active{translate:0 0}
.btn:focus-visible{outline:3px solid var(--ouro-claro);outline-offset:3px}
.btn-peq{padding:12px 20px;font-size:.93rem}
.btn.grande{width:100%;padding:21px 30px;font-size:1.12rem}
.acoes{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center;margin-top:4px}
.acoes .nota{font:600 .78rem/1.5 var(--corpo);color:var(--tx-3)}
.pele .acoes .nota,.pele-2 .acoes .nota{color:var(--tinta-3)}

/* ---------------- barra do topo: marca, preco, botao. Nada mais. ---------------- */
.barra{position:fixed;inset:0 0 auto 0;height:var(--barra);z-index:90;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 clamp(14px,3.5vw,34px);background:rgba(18,7,9,.5);color:var(--tx);
  backdrop-filter:saturate(170%) blur(16px);-webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid transparent;transition:background .45s,border-color .45s}
.barra.solida{background:rgba(18,7,9,.93);border-bottom-color:var(--linha-esc)}
.marca{display:flex;align-items:center;gap:10px;min-width:0}
.gota{position:relative;width:19px;height:25px;flex:none}
.gota::before{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;clip-path:polygon(50% 0,100% 62%,100% 100%,0 100%,0 62%);
  background:radial-gradient(70% 60% at 38% 64%,var(--rosa),var(--carmim) 55%,var(--vinho));
  box-shadow:0 0 calc(6px + var(--p) * 12px) rgba(255,61,114,calc(.35 + var(--p) * .45))}
.gota::after{content:"";position:absolute;left:24%;top:48%;width:22%;height:30%;border-radius:50%;background:rgba(255,228,235,.75);transform:rotate(-18deg)}
/* a gotinha que se forma embaixo da marca e cai */
.gota i{position:absolute;left:50%;top:100%;width:5px;height:6px;margin-left:-2.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:var(--rosa);opacity:0;animation:pinga 7.5s cubic-bezier(.5,0,.8,.4) infinite}
@keyframes pinga{0%,62%{opacity:0;transform:translateY(-4px) scale(.2)}72%{opacity:1;transform:translateY(0) scale(1)}
  86%{opacity:1;transform:translateY(1px) scale(1,1.15)}100%{opacity:0;transform:translateY(24px) scale(.8,1.3)}}
.wm{font:560 1.36rem/1 var(--display);letter-spacing:-.012em;white-space:nowrap;font-variation-settings:"SOFT" 100,"WONK" 0}
.wm i{font-style:italic;font-weight:460;color:var(--rosa-claro);font-variation-settings:"SOFT" 100,"WONK" 1}
/* a logo aprovada: selo e nome recortados da imagem original; o selo brilha junto com o pulso */
.marca-selo{height:40px;width:auto;filter:drop-shadow(0 0 calc(var(--p) * 9px) rgba(255,61,114,calc(.2 + var(--p) * .4)))}
.marca-nome{height:13px;width:auto}
@media(max-width:820px){.marca-selo{height:34px}.marca-nome{height:11px}}
.barra .dir{display:flex;align-items:center;gap:16px}
.barra .preco{font:600 .84rem/1 var(--corpo);color:var(--tx-3);white-space:nowrap}
.barra .preco b{color:#FFF;font-weight:800}
.btn .curto{display:none}
@media(max-width:820px){.barra .preco{display:none}.barra .btn .longo{display:none}.barra .btn .curto{display:inline}}
@media(max-width:360px){.wm{font-size:1.18rem}.barra .btn-peq{padding:11px 14px;font-size:.86rem}}

/* ---------------- a luz quente que segue o ponteiro, e o toque que esquenta no celular ---------------- */
.luz{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;z-index:80;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,110,150,.2),rgba(255,110,150,.07) 45%,transparent 72%);
  mix-blend-mode:screen;opacity:0;transition:opacity .6s;will-change:transform}
.luz.on{opacity:1}
.toque{position:fixed;z-index:85;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,92,138,.34),rgba(255,92,138,.1) 50%,transparent 75%);mix-blend-mode:screen}

/* ---------------- secoes ---------------- */
.noite{background:var(--noite);color:var(--tx)}
.pele{background:var(--pele);color:var(--tinta)}
.pele-2{background:var(--pele-2);color:var(--tinta)}
.secao{position:relative;overflow:hidden;padding:clamp(58px,8vw,96px) 0;scroll-margin-top:calc(var(--barra) + 12px)}
.secao>.wrap{position:relative;z-index:2}
.cabeca{display:grid;gap:14px;max-width:42em;margin-bottom:clamp(26px,4vw,42px)}
.dupla{display:grid;gap:clamp(30px,4.5vw,66px);align-items:center;min-width:0}
.dupla>*{min-width:0}
@media(min-width:900px){.dupla{grid-template-columns:1fr 1fr}.dupla.dir-maior{grid-template-columns:.9fr 1.1fr}}

/* a aura: brilho que respira e depois bate. Gradiente puro, sem blur, para nao pesar no celular */
.aura{position:absolute;pointer-events:none;border-radius:50%;z-index:1;
  background:radial-gradient(closest-side,rgba(255,61,114,.5),rgba(200,24,78,.2) 52%,transparent 100%);
  opacity:calc(.3 + var(--p) * .5);scale:calc(.93 + var(--p) * .11);will-change:opacity,scale}
.aura-heroi{width:min(120vw,980px);aspect-ratio:1;right:-26%;top:-12%}
.aura-partes{width:min(140vw,1100px);aspect-ratio:1.4;left:50%;top:44%;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(200,24,78,.34),rgba(94,11,32,.2) 55%,transparent)}
.aura-climax{width:min(150vw,1250px);aspect-ratio:1;left:50%;top:56%;translate:-50% -50%;
  background:radial-gradient(closest-side,rgba(255,61,114,.55),rgba(200,24,78,.3) 45%,transparent)}
.aura-depois{width:min(130vw,900px);aspect-ratio:1;left:-24%;top:-10%;
  background:radial-gradient(closest-side,rgba(255,150,178,.42),rgba(255,190,205,.18) 55%,transparent)}

/* as brasas: particulas quentes subindo (canvas) */
.brasa{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------------- 1. heroi ---------------- */
.heroi{position:relative;overflow:hidden;padding-top:var(--barra);isolation:isolate}
.heroi::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(18,7,9,.95))}
.heroi-corpo{position:relative;z-index:2;display:grid;gap:clamp(26px,4vw,64px);align-items:center;
  padding:clamp(22px,4vw,56px) 0 clamp(44px,6vw,70px)}
.heroi-texto{display:grid;gap:16px;align-content:start;min-width:0}
.sente{font:italic 460 clamp(1.14rem,2.4vw,1.4rem)/1.38 var(--display);color:var(--rosa-claro);max-width:30em;
  font-variation-settings:"SOFT" 100,"WONK" 1}
.selos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:6px}
.selos li{background:rgba(255,236,240,.045);border:1px solid var(--linha-esc);border-radius:var(--r);padding:13px 12px;
  font-size:.8rem;line-height:1.36;color:var(--tx-2)}
.selos b{display:block;font:600 1.02rem/1.15 var(--display);color:var(--tx);margin-bottom:3px}

.cena{position:relative;perspective:1300px;perspective-origin:50% 40%;display:grid;place-items:center;min-width:0}
.palco{position:relative;width:min(100%,450px);aspect-ratio:4/5;transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.retrato{position:absolute;inset:0;border-radius:var(--r-g);overflow:hidden;background:
  radial-gradient(60% 50% at 50% 30%,rgba(200,24,78,.35),transparent 70%),linear-gradient(170deg,var(--noite-3),var(--noite));
  box-shadow:0 50px 100px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,214,222,.14);scale:calc(1 + var(--p) * .012)}
.retrato img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* o brilho de fora, que acende e apaga com o pulso (opacidade: nao repinta a sombra) */
.retrato::before{content:"";position:absolute;inset:-2px;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 90px -10px rgba(255,61,114,.55);opacity:calc(.25 + var(--p) * .6)}
.retrato::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(185deg,rgba(255,196,160,.1),transparent 40%,rgba(18,7,9,.55))}
/* luz de vela: tremula sem ritmo, como chama de verdade */
.vela{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(70% 55% at 22% 78%,rgba(255,170,90,.55),transparent 70%);animation:chama 3.1s steps(1,end) infinite}
@keyframes chama{0%{opacity:.85}9%{opacity:.62}17%{opacity:.9}28%{opacity:.7}36%{opacity:.95}49%{opacity:.66}
  58%{opacity:.88}66%{opacity:.74}79%{opacity:.93}88%{opacity:.68}100%{opacity:.85}}
.etiqueta{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:rgba(27,11,16,.62);border:1px solid rgba(255,214,222,.2);color:var(--tx);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:700 .78rem/1 var(--corpo);white-space:nowrap;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.8);transform:translateZ(120px)}
.etiqueta i{width:8px;height:8px;border-radius:50%;background:var(--rosa);box-shadow:0 0 0 3px rgba(255,107,147,.25),0 0 12px var(--rosa)}
.e1{left:-6%;top:12%}
.e2{right:-7%;top:40%}
/* flutuam pelo `translate`, que nao briga com o translateZ do palco */
.etiqueta{animation:flutua 3.6s ease-in-out infinite alternate}
.e2{animation-duration:4.3s;animation-delay:-1.4s}
@keyframes flutua{from{translate:0 -6px}to{translate:0 7px}}
.selo100{position:absolute;z-index:5;right:-5%;bottom:9%;width:28%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;color:#FFF;transform:translateZ(170px);scale:calc(1 + var(--p) * .05);
  background:radial-gradient(70% 70% at 35% 30%,var(--rosa),var(--carmim) 55%,var(--vinho));
  box-shadow:0 22px 44px -14px rgba(0,0,0,.85),0 0 0 3px rgba(248,221,180,.55),0 0 calc(16px + var(--p) * 26px) rgba(255,61,114,.6)}
.selo100 b{display:block;font:600 clamp(1.5rem,4.4vw,2.2rem)/.9 var(--display);letter-spacing:-.03em}
.selo100 span{display:block;font:800 .54rem/1 var(--corpo);letter-spacing:.2em;text-transform:uppercase;margin-top:5px;color:var(--ouro-claro)}

@media(min-width:960px){
  .heroi-corpo{grid-template-columns:1fr 1fr;min-height:calc(100svh - var(--barra));min-height:min(calc(100svh - var(--barra)),880px)}
  .heroi-texto{grid-column:1;grid-row:1}
  .cena{grid-column:2;grid-row:1}
  .palco{width:min(100%,540px)}
  .selo100{right:-5%;top:5%;bottom:auto}   /* embaixo a direita fica o copo e embaixo a esquerda os selos: o 100 vai para cima, na coifa */
  h1{font-size:clamp(2.6rem,4.9vw,4.1rem)}
}
/* celular: a foto dela ocupa a tela de ponta a ponta e o titulo entra por cima da parte escura */
@media(max-width:959px){
  .heroi-corpo{padding-top:0;gap:0}
  .cena{margin-inline:-18px;perspective:none}
  .palco{width:100%;aspect-ratio:4/4.5;transform:none!important}
  .retrato{border-radius:0;box-shadow:none;scale:1}
  .retrato::before{display:none}
  .retrato::after{background:linear-gradient(180deg,rgba(18,7,9,.25),transparent 22%,transparent 50%,rgba(18,7,9,.86) 82%,var(--noite) 100%)}
  .heroi-texto{margin-top:-128px;position:relative;z-index:6}
  .etiqueta{transform:none;font-size:.7rem;padding:7px 11px}
  .e1{left:14px;top:16px}.e2{display:none}   /* no celular a 2a etiqueta cobria o rosto dela */
  .selo100{transform:none;right:14px;top:14px;bottom:auto;width:84px}
  .selos{grid-template-columns:1fr;gap:7px}
  .selos li{display:flex;gap:9px;align-items:baseline;padding:10px 12px}
  .selos b{margin:0;font-size:.95rem;white-space:nowrap}
}

/* ---------------- 2. esquenta: o plano de 21 dias ---------------- */
/* cor de pele corando: o fundo esquenta de cima para baixo e um brilho rosado pulsa atras do plano */
.esquenta{background:linear-gradient(180deg,#FBEEE9 0%,#F8DFDA 55%,#F4D0CF 100%);isolation:isolate}
.aura-esquenta{width:min(150vw,900px);aspect-ratio:1;right:-30%;bottom:-18%;
  background:radial-gradient(closest-side,rgba(255,92,138,.34),rgba(255,140,170,.16) 50%,transparent)}
.esquenta .texto{display:grid;gap:15px}
.virada{display:grid;gap:18px;margin-top:6px;padding:20px 20px 22px;border-radius:var(--r-g);background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(234,207,196,.9);box-shadow:0 26px 60px -36px rgba(94,11,32,.5)}
.virada p{color:var(--tinta-2);font-size:1.02rem;line-height:1.55}
.virada b{color:var(--tinta)}
.lado{display:grid;gap:16px;min-width:0}
/* o filme do toque: 4 cenas trocando devagar, cada uma com aproximacao lenta. Roda sozinho. */
.filme{position:relative;aspect-ratio:16/10;border-radius:var(--r-g);overflow:hidden;background:var(--noite);
  box-shadow:0 34px 80px -40px rgba(94,11,32,.65),0 0 0 1px rgba(255,214,222,.35)}
.filme .quadro{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity,transform}
.filme .quadro:first-child{opacity:1}
.filme::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 50%,transparent 55%,rgba(18,7,9,.5)),linear-gradient(180deg,rgba(255,150,120,.06),transparent 40%)}
.calor{position:relative;background:#FFF;border:1px solid var(--linha);border-radius:var(--r-g);padding:clamp(18px,3vw,28px);
  box-shadow:0 34px 80px -40px rgba(94,11,32,.55)}
.calor-topo{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px}
.calor-topo b{font:600 1.2rem/1 var(--display)}
.calor-topo span{font:800 .64rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3)}
.semana{display:grid;gap:8px;margin-bottom:13px}
.semana small{font:800 .62rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(5px,1.2vw,9px)}
.dia{--c:#F0B9C6;aspect-ratio:1;border-radius:11px;display:grid;place-items:center;font:700 .8rem/1 var(--corpo);color:var(--tinta-3);
  background:var(--pele-2);transition:background .5s ease,color .5s ease,box-shadow .5s ease,transform .5s cubic-bezier(.2,1.5,.4,1)}
.dia.aceso{background:var(--c);color:var(--tc,#FFF);box-shadow:0 10px 20px -10px var(--c),inset 0 1px 0 rgba(255,255,255,.35);transform:scale(1.05)}
.dia.aceso.fim{transform:scale(1)}
.dia.auge{box-shadow:0 0 0 calc(var(--p) * 6px) rgba(255,61,114,.25),0 0 calc(14px + var(--p) * 22px) rgba(255,61,114,.75);
  scale:calc(1 + var(--p) * .08)}
.calor figcaption{margin-top:4px;font-size:.9rem;color:var(--tinta-2)}
/* compacto: os 21 dias em 3 fileiras de bolinhas, sem as legendas de semana */
.calor.compacto{padding:clamp(16px,2.4vw,22px)}
.calor.compacto .calor-topo{margin-bottom:12px;flex-wrap:wrap;row-gap:6px}
.calor.compacto .calor-topo b{white-space:nowrap}
@media(max-width:899px){.esquenta{padding-bottom:40px}}
.calor.compacto .dias{gap:clamp(5px,1vw,8px);max-width:420px}
.calor.compacto .dia{border-radius:50%;font-size:.7rem;max-width:44px}
.calor.compacto figcaption{margin-top:12px;font-size:.86rem}

/* ---------------- 3. o que e: as 3 partes ---------------- */
.partes{isolation:isolate}
.tres{display:grid;gap:12px;margin-bottom:30px}
.parte{position:relative;display:grid;grid-template-columns:36% 1fr;min-height:150px;border-radius:var(--r-g);overflow:hidden;
  background:var(--noite-2);border:1px solid var(--linha-esc);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.parte img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.parte-txt{display:grid;gap:7px;align-content:center;padding:16px 16px 16px 18px}
.parte-txt p{font-size:.93rem;line-height:1.45;color:var(--tx-2)}
.qtd{font:800 .64rem/1 var(--corpo);letter-spacing:.18em;text-transform:uppercase;color:var(--ouro)}
/* o rubor: um veu rosado que sobe e desce com o pulso */
.parte::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(90% 70% at 20% 100%,rgba(255,61,114,.22),transparent 70%);opacity:.6}
.parte:hover img{transform:scale(1.06)}
@media(min-width:760px){
  .tres{grid-template-columns:repeat(3,1fr);gap:18px}
  .tres.quatro{grid-template-columns:repeat(2,1fr)}
  .parte{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
  .parte img{aspect-ratio:4/4.4;height:auto}
  .parte-txt{padding:20px 22px 24px;align-content:start}
}
@media(min-width:1040px){.tres.quatro{grid-template-columns:repeat(4,1fr);gap:16px}.tres.quatro .parte-txt{padding:18px 18px 22px}}

/* ---------------- 4. por dentro: o aplicativo e a receita ---------------- */
.moldura{position:relative;perspective:1100px;display:grid;place-items:center}
/* no computador a ficha e alta: o celular acompanha a leitura em vez de boiar no meio do vazio */
@media(min-width:900px){.dentro .dupla{align-items:start}.dentro .moldura{position:sticky;top:calc(var(--barra) + 36px)}}
.celular{--cw:clamp(236px,29vw,292px);position:relative;width:var(--cw);aspect-ratio:390/844;border-radius:calc(var(--cw) * .15);
  padding:calc(var(--cw) * .032);background:linear-gradient(150deg,#4A2A33 0%,#1B0B10 28%,#0E0507 64%,#3A1C25 100%);
  box-shadow:0 0 0 1px rgba(255,214,222,.2),0 60px 100px -46px rgba(36,9,15,.9),0 0 120px -30px rgba(255,61,114,.4);
  transform:rotateY(-13deg) rotateX(5deg);transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.moldura:hover .celular{transform:rotateY(-4deg) rotateX(2deg)}
@media(max-width:899px){.celular{--cw:min(68vw,272px);transform:rotateY(-6deg) rotateX(2deg)}}
.celular::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.16)}
.tela{position:absolute;inset:calc(var(--cw) * .032);border-radius:calc(var(--cw) * .12);overflow:hidden;background:var(--pele);color:var(--tinta)}
.app-topo{padding:26px 11px 8px;display:grid;gap:7px;background:linear-gradient(180deg,var(--noite),var(--noite-2));color:var(--tx)}
.app-topo b{font:560 .98rem/1 var(--display);white-space:nowrap;font-variation-settings:"SOFT" 100}
.app-topo b i{font-style:italic;color:var(--rosa-claro)}
.app-busca{height:25px;border-radius:8px;background:rgba(255,236,240,.1);display:flex;align-items:center;padding:0 8px;
  font:500 .56rem/1 var(--corpo);color:var(--tx-3)}
.app-chips{display:flex;gap:4px;overflow:hidden}
.app-chips span{flex:none;font:700 .5rem/1 var(--corpo);padding:4px 7px;border-radius:999px;background:rgba(255,236,240,.1);color:var(--tx-2)}
.app-chips span.on{background:var(--carmim);color:#FFF}
.feed{position:absolute;left:0;right:0;top:112px;bottom:0;overflow:hidden;padding:9px 9px 0}
.feed-trilho{display:grid;gap:7px;will-change:transform}
.cartao{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center;background:#FFF;border:1px solid var(--linha);
  border-radius:10px;padding:5px;min-width:0}
.cartao img{width:42px;height:42px;border-radius:7px;object-fit:cover}
.cartao div{min-width:0}
.cartao b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em;
  font:700 .62rem/1.15 var(--corpo);overflow-wrap:break-word}
.cartao span{display:block;font:600 .52rem/1.3 var(--corpo);color:var(--tinta-3);margin-top:2px;white-space:nowrap}
.cartao em{font-style:normal;color:var(--carmim)}

.ficha{background:#FFF;border:1px solid var(--linha);border-radius:var(--r-g);overflow:hidden;box-shadow:0 34px 80px -40px rgba(94,11,32,.5)}
.ficha>img{aspect-ratio:4/3;width:100%;object-fit:cover}
.ficha-corpo{padding:clamp(20px,2.6vw,28px);display:grid;gap:17px}
.ficha h3{font-size:1.46rem;margin-top:9px}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.numero{position:relative;overflow:hidden;background:var(--noite);color:var(--tx);border-radius:var(--r);padding:13px 13px 12px}
.numero::after{content:"";position:absolute;right:-28px;top:-28px;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,61,114,.45),transparent 70%)}
.numero small{display:block;font:800 .6rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);margin-bottom:7px}
.numero b{font:600 1.7rem/1 var(--display);letter-spacing:-.02em;color:var(--rosa-claro)}
.numero b i{font:700 .72rem/1 var(--corpo);font-style:normal;color:var(--tx-2);margin-left:4px}
.colunas{display:grid;gap:18px}
@media(min-width:640px){.colunas{grid-template-columns:.9fr 1.1fr}}
.ficha h4{font:800 .64rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:10px}
.colunas ul li{position:relative;padding-left:16px;margin-bottom:6px;color:var(--tinta-2);font-size:.95rem}
.colunas ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--carmim)}
.colunas ol{counter-reset:p;display:grid;gap:8px}
.colunas ol li{counter-increment:p;position:relative;padding-left:27px;color:var(--tinta-2);font-size:.95rem;line-height:1.45}
.colunas ol li::before{content:counter(p);position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--pele-2);color:var(--carmim);font:800 .66rem/19px var(--corpo);text-align:center}
.faz{background:var(--pele);border-left:3px solid var(--carmim);border-radius:0 12px 12px 0;padding:14px 16px;display:grid;gap:6px}
.faz h4{margin-bottom:4px}
.faz p{font-size:.93rem;line-height:1.48;color:var(--tinta-2)}
.faz b{color:var(--tinta)}

/* ---------------- 5. preco: o climax ---------------- */
.climax{isolation:isolate;background:radial-gradient(120% 80% at 50% 62%,#3B0A19,var(--noite) 72%)}
.fundo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fundo img{width:100%;height:100%;object-fit:cover;opacity:.3;animation:seda 26s ease-in-out infinite alternate}
@keyframes seda{from{transform:scale(1) translate(0,0)}to{transform:scale(1.1) translate(-2%,1.5%)}}
.fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--noite),rgba(18,7,9,.55) 26%,rgba(18,7,9,.62) 74%,var(--noite))}
.ondas{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.onda{position:absolute;width:44vmax;height:44vmax;margin:-22vmax 0 0 -22vmax;border-radius:50%;opacity:0;
  border:2px solid rgba(255,140,170,.55);
  box-shadow:0 0 70px rgba(255,61,114,.45),inset 0 0 70px rgba(255,61,114,.3)}
/* o cartao acende em cada contracao: o brilho em volta dele segue o pulso (no celular ele ocupa a
   largura toda e as ondas de tras quase nao aparecem, entao e ele que carrega o climax) */
.oferta{position:relative;display:grid;background:#FFF;border-radius:var(--r-g);overflow:hidden;color:var(--tinta);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,214,222,.25),
    0 0 calc(70px + var(--p) * 130px) calc(-34px + var(--p) * 18px) rgba(255,61,114,calc(.38 + var(--p) * .5))}
@media(min-width:820px){.oferta{grid-template-columns:.94fr 1.06fr}}
@media(max-width:819px){
  .oferta-lado{min-height:0;aspect-ratio:4/4.3}
  .oferta-lado img{object-position:50% 16%}
  .oferta-lado p{display:none}
}
.oferta-lado{position:relative;min-height:300px;overflow:hidden;background:var(--noite-2);color:var(--tx);
  padding:clamp(22px,3vw,34px);display:grid;align-content:end;gap:8px}
.oferta-lado img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.oferta-lado::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,7,9,0) 30%,rgba(18,7,9,.92))}
.oferta-lado>*:not(img){position:relative;z-index:2}
.oferta-lado h3{font-size:clamp(1.45rem,2.8vw,1.9rem)}
.oferta-lado p{font-size:.92rem;color:var(--tx-2)}
.oferta-corpo{padding:clamp(24px,3vw,38px);display:grid;gap:18px;align-content:start}
.valor{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.valor .hoje{font:600 clamp(3rem,8vw,4rem)/1 var(--display);letter-spacing:-.03em;color:var(--tinta)}
.valor .unico{font:800 .66rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--carmim);
  background:#FFE7EE;padding:8px 11px;border-radius:999px}
.pagamento{font:600 .8rem/1.5 var(--corpo);color:var(--tinta-3)}
.inclui{display:grid;gap:10px}
.inclui li{position:relative;padding-left:28px;color:var(--tinta-2);font-size:.98rem;line-height:1.45}
.inclui li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:radial-gradient(70% 70% at 35% 30%,var(--rosa),var(--carmim))}
.inclui li::after{content:"";position:absolute;left:7px;top:7px;width:5px;height:9px;border:2px solid #FFF;border-top:0;border-left:0;transform:rotate(42deg)}
.inclui b{color:var(--tinta)}
.garantia{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--pele);border-radius:var(--r);
  padding:15px 17px;font-size:.92rem;color:var(--tinta-2);line-height:1.45}
.garantia i{width:56px;height:56px;border-radius:50%;background:#FFF;border:2px solid var(--carmim);display:grid;place-items:center;
  text-align:center;font:700 .74rem/1.05 var(--corpo);font-style:normal;color:var(--carmim)}

/* ---------------- depoimentos reais (aparecem so quando houver algum aprovado) ---------------- */
.provas{position:relative;margin:0 0 22px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.provas-trilho{display:flex;gap:12px;width:max-content;will-change:transform}
.prova{flex:none;width:min(78vw,320px);margin:0;padding:18px 18px 16px;border-radius:var(--r);
  background:rgba(255,236,240,.07);border:1px solid var(--linha-esc);color:var(--tx);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.prova blockquote{font:italic 460 1.02rem/1.45 var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--tx)}
.prova figcaption{margin-top:12px;font:700 .78rem/1.3 var(--corpo);color:var(--rosa-claro)}
.prova figcaption span{font-weight:500;color:var(--tx-3)}

/* ---------------- 6. depois: duvidas no relaxamento ---------------- */
.depois{background:linear-gradient(180deg,#FCEFF2,#F8E6EA);color:var(--tinta);isolation:isolate}
.dupla-faq{display:grid;gap:clamp(26px,4vw,60px);align-items:start}
@media(min-width:900px){.dupla-faq{grid-template-columns:.8fr 1.2fr}.depois-foto{position:sticky;top:calc(var(--barra) + 24px)}}
.depois-foto{border-radius:var(--r-g);overflow:hidden;box-shadow:0 40px 80px -40px rgba(94,11,32,.5)}
.depois-foto img{width:100%;aspect-ratio:4/4.4;object-fit:cover;object-position:50% 30%}
@media(max-width:899px){.depois-foto img{aspect-ratio:16/10}}
.faq{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{padding:18px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font:600 1.1rem/1.3 var(--display);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--carmim)}
.faq summary::after{content:"";width:10px;height:10px;flex:none;border-right:2px solid var(--carmim);border-bottom:2px solid var(--carmim);
  transform:rotate(45deg);transition:transform .3s;margin-bottom:4px}
.faq details[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
.faq p{padding:0 0 19px;color:var(--tinta-2);font-size:.97rem}

footer{background:var(--noite);color:var(--tx-3);padding:42px 0 54px;font-size:.86rem;line-height:1.7}
footer .links{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:14px}
footer a{color:var(--tx-2);text-decoration:underline;text-underline-offset:3px}
footer a:hover{color:var(--rosa-claro)}
footer .empresa{margin-top:10px;font-size:.8rem;color:var(--tx-3)}
footer .empresa b{color:var(--tx-2);font-weight:700;letter-spacing:.02em}

/* ---------------- revelacao e menos movimento ---------------- */
.anima [data-rev]{opacity:0}
@media (prefers-reduced-motion:reduce){
  .anima [data-rev]{opacity:1!important;transform:none!important;filter:none!important}
  .quente,.vela,.gota i,.fundo img,.etiqueta{animation:none}
  .feed-trilho{transform:none!important}
  html{scroll-behavior:auto}
}
[hidden]{display:none!important}