:root{
  --canvas:#F1EDE7;      /* talco */
  --panel:#FBFAF8;       /* algodão */
  --ink:#141312;
  --ink-2:#5E5850;
  --thread:#CFC6B8;      /* fio de costura */
  --thread-strong:#8C837A;
  --night:#171512;       /* seções escuras */
  --night-2:#24211D;
  --on-night:#F1EDE7;
  --on-night-2:#B9B0A4;
  --accent:#25D366;      /* verde do WhatsApp: só nos botões do grupo */
  --accent-hover:#3BE07A;
  --accent-ink:#0A2414;
  --accent-muted:rgba(37,211,102,.18);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --tshadow:0 1px 2px rgba(5,5,4,.95),0 3px 12px rgba(5,5,4,.78),0 10px 44px rgba(5,5,4,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;opacity:0;animation:pagein .9s var(--ease-out) .05s forwards}
@keyframes pagein{to{opacity:1}}
img{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--canvas);padding:10px 16px;border-radius:8px;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
main:focus{outline:none}

/* ===== ambiente fixo: grão + luz lenta ===== */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.amb::before{content:"";position:absolute;inset:-30%;background:radial-gradient(40% 35% at 30% 30%,rgba(255,255,255,.55),transparent 70%),radial-gradient(35% 30% at 75% 70%,rgba(207,198,184,.35),transparent 70%);animation:drift 80s var(--ease-io) -20s infinite alternate}
.amb::after{content:"";position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translate3d(6%,4%,0) rotate(4deg)}}

/* ===== a costura (elemento assinatura) ===== */
.seam{position:fixed;left:28px;top:0;bottom:0;width:2px;z-index:5;pointer-events:none}
.seam i{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--thread) 0 7px,transparent 7px 13px)}
.seam b{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,var(--ink) 0 7px,transparent 7px 13px);transform-origin:top;transform:scaleY(var(--sp,0))}
.seam em{position:absolute;left:-5px;top:0;width:12px;height:22px;transform:translateY(calc(var(--sp,0) * (100vh - 22px)))}
@media (max-width:1180px){.seam{display:none}}

/* ===== letreiro ===== */
.ticker{position:relative;z-index:6;background:var(--ink);color:var(--canvas);overflow:hidden;white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ticker-track{display:inline-flex;padding:10px 0;animation:tick 48s linear -9s infinite}
.ticker span{padding:0 22px;display:inline-flex;align-items:center;gap:22px}
.ticker span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ===== nav ===== */
nav{position:sticky;top:0;z-index:40;background:rgba(241,237,231,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(207,198,184,.6)}
.nav-in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-in img{height:22px;width:auto}
.logo-ink{filter:brightness(0) opacity(.92)}

/* ===== botões ===== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:800 17px/1.1 var(--sans);text-decoration:none;padding:20px 30px;cursor:pointer;transition:transform .35s var(--ease-out),background-color .25s var(--ease-out);isolation:isolate;text-shadow:none}
.btn::before{content:"";position:absolute;inset:-6px;border-radius:inherit;box-shadow:0 0 0 0 var(--accent-muted),0 14px 40px rgba(37,211,102,.45);opacity:.55;z-index:-1;animation:glow 4.5s var(--ease-io) -1.4s infinite}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:24px;height:24px;flex:none}
.btn .arr{width:18px;height:18px;transition:transform .35s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn.sm{font-size:14px;padding:11px 18px;gap:8px}
.btn.sm svg{width:18px;height:18px}
.btn.sm::before{display:none}
@keyframes glow{0%,100%{opacity:.25}50%{opacity:.7}}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
.trust{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor}

/* ===== tipografia ===== */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02}
h1 em,h2 em{font-style:italic}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ===== hero ===== */
.hero{position:relative;padding:64px 0 88px;isolation:isolate}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--thread);border-radius:999px;padding:8px 16px 8px 10px;font-weight:700;font-size:14px}
.chip svg{width:22px;height:22px;color:#159947}
.hero h1{font-size:clamp(48px,7.2vw,98px);margin:22px 0 22px;max-width:11ch}
.hero h1 .wa{display:inline-block;background:var(--ink);color:var(--canvas);padding:0 .18em .04em;border-radius:.14em;font-style:italic}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);max-width:34ch;margin-bottom:32px}
.lede strong{color:var(--ink);font-weight:700}

/* etiqueta VIP */
.tag-scene{position:relative;display:flex;justify-content:center;padding-top:40px}
.tag-hole{position:relative}
.tag-hole::after{content:"";position:absolute;left:50%;bottom:50%;width:2px;height:140px;background:var(--thread-strong);transform:translateX(-50%);z-index:-1}
.tag{position:relative;width:min(340px,100%);aspect-ratio:3/4.4;background:var(--panel);border-radius:22px;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -20px rgba(20,19,18,.25),0 8px 20px -8px rgba(20,19,18,.15);transform-origin:50% -60px;animation:sway 7s var(--ease-io) -2s infinite alternate;padding:30px 28px;display:flex;flex-direction:column}
@keyframes sway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
.tag::before{content:"";position:absolute;inset:10px;border:1.5px dashed var(--thread-strong);border-radius:14px;pointer-events:none}
.tag-hole{z-index:1;width:22px;height:22px;border-radius:50%;background:var(--canvas);margin:0 auto 22px;box-shadow:inset 0 2px 4px rgba(0,0,0,.18);border:1.5px solid var(--thread)}
.tag img{width:72%;height:auto;margin:0 auto 18px}
.tag-line{height:1px;background:var(--thread);margin:14px 0}
.tag-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.tag-big{font-family:var(--serif);font-size:62px;line-height:1;text-align:center;margin:6px 0}
.tag-big em{font-style:italic}
.tag-meta{margin-top:auto;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase}
.tag-wa{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;margin-top:6px}
.tag-wa svg{width:18px;height:18px;color:#159947}

/* foto do hero */
.tag-scene{justify-content:flex-end;padding-top:0}
.hero-photo{position:relative;width:min(440px,100%);aspect-ratio:4/5;border-radius:30px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(20,19,18,.45),0 10px 24px -10px rgba(20,19,18,.2);opacity:0;transform:translateY(30px) scale(.97);animation:photoin 1.3s var(--ease-out) .2s forwards}
@keyframes photoin{to{opacity:1;transform:none}}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;animation:kb 22s var(--ease-io) -4s infinite alternate}
@keyframes kb{from{transform:scale(1.08) translate3d(-1%,1%,0)}to{transform:scale(1) translate3d(0,0,0)}}
.hero-photo::after{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(251,250,248,.55);border-radius:20px;pointer-events:none}
.photo-chip{position:absolute;right:18px;top:22px;display:inline-flex;align-items:center;gap:8px;background:rgba(251,250,248,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);font-weight:700;font-size:13px;padding:9px 14px 9px 10px;border-radius:999px;box-shadow:0 8px 20px -8px rgba(20,19,18,.35);animation:bobchip 5s var(--ease-io) -1s infinite alternate;max-width:calc(100% - 36px)}
.photo-chip svg{width:18px;height:18px;color:#159947;flex:none}
@keyframes bobchip{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.tag-on-photo{position:absolute;left:-10px;bottom:-46px;width:210px;z-index:2}
.tag-on-photo .tag{width:100%;padding:20px 18px;border-radius:18px}
.tag-on-photo .tag::before{inset:8px;border-radius:12px}
.tag-on-photo .tag-hole{width:18px;height:18px;margin-bottom:14px}
.tag-on-photo .tag-hole::after{height:110px}
.tag-on-photo .tag img{margin-bottom:10px}
.tag-on-photo .tag-big{font-size:42px}
.tag-on-photo .tag-k{font-size:9.5px}
.tag-on-photo .tag-wa{font-size:12px}
.tag-on-photo .tag-meta{font-size:9px}

/* ===== como entrar ===== */
.steps{background:var(--panel);border-block:1px solid var(--thread)}
.steps-in{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:0;align-items:stretch}
.steps h2{font-size:clamp(28px,3vw,38px);padding:36px 40px 36px 0;align-self:center;max-width:9ch}
.step{padding:34px 28px;border-left:1.5px dashed var(--thread)}
.step-n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-2)}
.step p{font-weight:700;font-size:17px;line-height:1.35;margin-top:10px}
.step p span{display:block;font-weight:400;color:var(--ink-2);font-size:15px;margin-top:4px}
.step svg{width:30px;height:30px;margin-top:14px;color:var(--ink)}

/* ===== fábrica (scrub) ===== */
.fab{position:relative;background:var(--night);color:var(--on-night)}
.fab-stage{position:relative;overflow:hidden;min-height:86vh;display:flex;align-items:center}
.fab-media{position:absolute;inset:-4%;background:var(--night) url("https://cppwcqqewbraqjoauzyc.supabase.co/storage/v1/object/public/lp-grupo-vip/img/fabrica.jpg") center/cover no-repeat;animation:kb 30s var(--ease-io) infinite alternate}
.fab-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease-out);will-change:transform;transform:translateZ(0)}
.video-ready .fab-media video{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,9,8,.86) 0%,rgba(10,9,8,.62) 50%,rgba(10,9,8,.3) 100%),radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,9,8,0) 35%,rgba(10,9,8,.6) 100%)}
.ring{position:absolute;right:28px;bottom:28px;width:44px;height:44px;color:var(--on-night-2);z-index:3;transition:opacity .5s var(--ease-out)}
.ring{opacity:0}
.loading .ring{opacity:1}
.video-ready .ring,.video-failed .ring{opacity:0}
.bands{position:relative;z-index:2;width:100%;padding:96px 0}
.band{position:relative;max-width:640px;text-shadow:var(--tshadow);margin-left:max(24px,calc((100vw - 1180px)/2 + 24px));margin-right:24px}
.band + .band{margin-top:64px}
.band h2{font-size:clamp(40px,5.4vw,76px);color:#FBFAF8}
.band p{font-size:19px;color:#E4DED6;margin-top:16px;max-width:34ch}
.band .kicker{color:#D5CDC2}
.band .btn{margin-top:28px}
/* modo scrub (desktop, vídeo carregado) */
.scrub-on .fab{height:380vh}
.scrub-on .fab-stage{position:sticky;top:0;height:100vh;min-height:0}
.scrub-on .bands{position:absolute;inset:0;padding:0}
.scrub-on .band{position:absolute;left:max(24px,calc((100vw - 1180px)/2 + 24px));top:50%;transform:translateY(-50%);margin:0;opacity:0}
.scrub-on .band::before{content:"";position:absolute;inset:-30% -24%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 70% 60% at 40% 50%,rgba(5,5,4,.62) 0%,rgba(5,5,4,.42) 46%,rgba(5,5,4,0) 76%)}
.scrub-on .band .w{display:inline-block;--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*var(--dy,26px)))}
.scrub-on .band .sub{--ks:clamp(0,(var(--k,0) - .62)*3.4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.scrub-on .band .cta-row{--kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}
/* os cinco portões do hero estático: idênticos ao JS */
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .scrub-on .fab{height:auto}
  .scrub-on .fab-stage{position:relative;height:auto;min-height:86vh}
  .scrub-on .bands{position:relative;padding:96px 0}
  .scrub-on .band{position:relative;left:auto;top:auto;transform:none;opacity:1;margin:0 24px}
  .scrub-on .band + .band{margin-top:64px}
  .scrub-on .band .w,.scrub-on .band .sub,.scrub-on .band .cta-row{opacity:1;transform:none}
}

/* ===== benefícios ===== */
.sec{padding:120px 0}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.sec-head h2{font-size:clamp(40px,5vw,68px)}
.sec-head p{color:var(--ink-2);max-width:40ch;justify-self:end}
.benefits{list-style:none;border-top:1.5px dashed var(--thread-strong)}
.benefit{display:grid;grid-template-columns:90px 1.1fr 1fr 48px;gap:24px;align-items:baseline;padding:30px 0;border-bottom:1.5px dashed var(--thread);position:relative}
.benefit .n{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--ink-2)}
.benefit h3{font-size:clamp(28px,2.8vw,38px)}
.benefit p{color:var(--ink-2);font-size:16px}
.benefit .pin{justify-self:end;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--thread-strong);position:relative;transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out)}
.benefit .pin::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--thread-strong);transition:background-color .4s var(--ease-out)}
.benefit:hover .pin{border-color:var(--ink)}
.benefit:hover .pin::after{background:var(--accent)}

/* ===== prova ===== */
.proof{background:var(--ink);color:var(--on-night);padding:110px 0;position:relative;overflow:hidden}
.proof::before{content:"VIP";position:absolute;right:-2%;bottom:-18%;font-family:var(--serif);font-style:italic;font-size:44vw;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(241,237,231,.07);pointer-events:none;animation:breathe 9s var(--ease-io) -3s infinite alternate}
@keyframes breathe{from{opacity:.55}to{opacity:1}}
.proof h2{font-size:clamp(40px,5vw,68px);max-width:13ch}
.proof .kicker{color:var(--on-night-2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-top:1.5px dashed rgba(241,237,231,.22)}
.stat{padding:30px 24px 0 0}
.stat + .stat{padding-left:24px;border-left:1.5px dashed rgba(241,237,231,.22)}
.stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(52px,6vw,84px);line-height:1}
.stat > span{display:block;color:var(--on-night-2);margin-top:10px;font-size:15px;max-width:20ch}
.proof-note{margin-top:48px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-2)}

/* ===== vitrine ===== */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--panel);margin:0}
.prod img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.prod:hover img{transform:scale(1.04)}
.prod figcaption{position:absolute;left:12px;bottom:12px;background:rgba(251,250,248,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:999px;transform:translateY(4px);opacity:.92;transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
.prod:hover figcaption{transform:none;opacity:1}
.prod::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(251,250,248,.6);border-radius:12px;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out)}
.prod:hover::before{opacity:1}
.prod.ph{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--thread-strong)}
.prod:nth-child(3n+2){transform:translateY(36px)}
.shelf-cta{display:flex;justify-content:center;margin-top:80px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:4px;transition:gap .35s var(--ease-out)}
.link-arrow:hover{gap:16px}

/* ===== passe VIP (interação) ===== */
.pass{background:var(--night);color:var(--on-night);padding:120px 0;position:relative;overflow:hidden}
.pass-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.pass-tag{position:relative;width:min(360px,100%);aspect-ratio:7/4;margin:0 auto;background:var(--night-2);border-radius:20px;padding:26px 30px;display:flex;flex-direction:column;justify-content:space-between}
.pass-tag svg.stitch{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pass-tag .pt-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-night-2)}
.pass-tag .pt-name{font-family:var(--serif);font-size:42px;line-height:1}
.pass-tag .pt-name em{font-style:italic}
.pass-tag .pt-done{position:absolute;right:22px;top:22px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.pass-tag.done .pt-done{opacity:1;transform:scale(1)}
.hold{margin:28px auto 0;display:flex;align-items:center;gap:14px;background:transparent;color:var(--on-night);border:1.5px dashed rgba(241,237,231,.4);border-radius:999px;padding:14px 22px;font:700 15px var(--sans);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;transition:border-color .3s var(--ease-out)}
.hold:hover{border-color:var(--on-night)}
.hold svg{width:22px;height:22px}
.hold-wrap{text-align:center}
.pass h2{font-size:clamp(40px,5vw,68px)}
.pass p{color:var(--on-night-2);margin:18px 0 32px;max-width:38ch;font-size:18px}
.pass .trust{color:var(--on-night-2)}
.pass .btn.lit::before{animation-duration:1.6s;opacity:.9}

/* ===== FAQ ===== */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1.5px dashed var(--thread)}
.faq details:first-of-type{border-top:1.5px dashed var(--thread-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-weight:700;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--thread-strong);position:relative;transition:transform .45s var(--ease-out),background-color .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease-out)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq .ans{color:var(--ink-2);padding:0 48px 26px 0;max-width:62ch}

/* ===== CTA final ===== */
.final{padding:140px 0 120px;text-align:center;position:relative}
.final h2{font-size:clamp(48px,7vw,104px);max-width:12ch;margin:18px auto 22px}
.final p{color:var(--ink-2);font-size:19px;max-width:40ch;margin:0 auto 36px}
.final .trust{justify-content:center}
.final-stitch{display:block;width:min(560px,80%);height:2px;margin:0 auto 46px;background:repeating-linear-gradient(90deg,var(--ink) 0 9px,transparent 9px 16px);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out)}
.final.in .final-stitch{transform:scaleX(1)}

.final{overflow:hidden}
.pol{position:absolute;top:50%;width:210px;margin:0;background:var(--panel);padding:10px 10px 0;border-radius:6px;box-shadow:0 26px 50px -20px rgba(20,19,18,.4);animation:polbob 7s var(--ease-io) infinite alternate}
.pol img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:3px}
.pol figcaption{font-family:var(--serif);font-style:italic;font-size:20px;text-align:center;padding:8px 0 12px;color:var(--ink-2)}
.pol-l{left:max(16px,calc(50% - 640px));--rot:-7deg;animation-delay:-2s}
.pol-r{right:max(16px,calc(50% - 640px));--rot:6deg;animation-delay:-5s}
@keyframes polbob{from{transform:translateY(-50%) rotate(var(--rot))}to{transform:translateY(calc(-50% - 16px)) rotate(calc(var(--rot) * .6))}}
@media (max-width:1100px){.pol{display:none}}

/* ===== rodapé ===== */
footer{background:var(--ink);color:var(--on-night-2);padding:56px 0 110px;font-size:14px}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.foot img{height:22px;width:auto;margin-bottom:16px}
.foot b{color:var(--on-night);font-weight:700;display:block;margin-bottom:6px}
.foot a{color:var(--on-night);text-decoration:none;border-bottom:1px solid rgba(241,237,231,.3)}
.foot small{display:block;margin-top:36px;padding-top:20px;border-top:1px dashed rgba(241,237,231,.2);font-size:12px;grid-column:1/-1}

/* ===== barra fixa no celular ===== */
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;transform:translateY(140%);transition:transform .5s var(--ease-out)}
.dock.show{transform:none}
.dock .btn{width:100%;padding:17px 20px;font-size:16px;box-shadow:0 12px 30px rgba(20,19,18,.35)}
.dock .btn::before{display:none}
@media (min-width:861px){.dock{display:none}}

/* ===== entradas ===== */
.rv > *{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.rv.in > *{opacity:1;transform:none}
.rv.done > *{transition-delay:0s !important}
.hero .rv > *{transition-duration:1.1s}
.benefits.rv > .benefit{transform:translateX(-18px)}
.benefits.rv.in > .benefit{transform:none}
.shelf.rv.in > .prod:nth-child(3n+2){transform:translateY(36px)}
.shelf.rv > .prod:nth-child(3n+2){transform:translateY(62px)}

/* ===== animação extra ===== */
/* brilho que passa no botão */
.btn{overflow:visible}
.btn .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.btn .shine::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%) skewX(-18deg);animation:shine 4.2s var(--ease-io) -1s infinite}
@keyframes shine{0%,55%{transform:translateX(-120%) skewX(-18deg)}85%,100%{transform:translateX(480%) skewX(-18deg)}}
/* ponto verde "ativo" no chip */
.live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:2px}
.live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ping 2.4s var(--ease-out) -.6s infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
/* título do hero palavra por palavra */
.hw{display:inline-block;opacity:0;transform:translateY(.45em) rotate(2deg);animation:wordin 1s var(--ease-out) forwards;animation-delay:calc(.25s + var(--wi) * 85ms)}
@keyframes wordin{to{opacity:1;transform:none}}
.hero .rv > h1{opacity:1;transform:none}
/* etiqueta cai e balança */
.tag-drop{animation:tagdrop 1.6s var(--ease-out) .5s both;transform-origin:50% -60px}
@keyframes tagdrop{0%{opacity:0;transform:translateY(-90px) rotate(-14deg)}55%{opacity:1;transform:translateY(6px) rotate(5deg)}78%{transform:translateY(0) rotate(-2.5deg)}100%{transform:none}}
/* aviamentos flutuando no hero */
.float{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.float i{position:absolute;left:var(--x);top:var(--y);opacity:.55;animation:bob var(--d) var(--ease-io) var(--dl) infinite alternate}
.float .bt{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--thread-strong);background:radial-gradient(circle at 35% 35%,transparent 2px,transparent 2px),var(--panel)}
.float .bt::before,.float .bt::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:var(--thread-strong);top:50%;transform:translateY(-50%)}
.float .bt::before{left:4px}.float .bt::after{right:4px}
.float .st{width:46px;height:2px;background:repeating-linear-gradient(90deg,var(--thread-strong) 0 6px,transparent 6px 11px);transform-origin:center}
.float .wa{width:22px;height:22px;color:var(--accent);opacity:.7}
@keyframes bob{from{transform:translate3d(0,0,0) rotate(var(--r0,0deg))}to{transform:translate3d(var(--mx,10px),var(--my,-26px),0) rotate(var(--r1,20deg))}}
/* linhas da lista se costuram ao entrar */
.benefit::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:1.5px;background:repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 13px);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-out);transition-delay:calc(.2s + var(--i,0) * 120ms)}
.benefits.in .benefit::after{transform:scaleX(1)}
.benefit h3{transition:transform .5s var(--ease-out)}
.benefit:hover h3{transform:translateX(8px)}
/* vitrine: brilho de carregamento nos espaços de foto */
.prod.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-100%);animation:sweep 3.6s var(--ease-io) infinite;animation-delay:calc(var(--i,0) * -0.5s)}
@keyframes sweep{0%,30%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}
.prod{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.shelf.done > .prod:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 24px 40px -18px rgba(20,19,18,.3)}
.shelf.done > .prod:nth-child(3n+2):hover{transform:translateY(28px) rotate(.6deg)}
/* letreiro grande antes do CTA final */
.bigtick{overflow:hidden;white-space:nowrap;border-block:1.5px dashed var(--thread);padding:22px 0;background:var(--panel)}
.bigtick-track{display:inline-flex;animation:tick 36s linear -4s infinite}
.bigtick span{font-family:var(--serif);font-size:clamp(44px,6vw,86px);line-height:1;padding:0 28px;display:inline-flex;align-items:center;gap:56px}
.bigtick span em{font-style:italic}
.bigtick span.o{color:transparent;-webkit-text-stroke:1px var(--ink)}
.bigtick span::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--accent);flex:none}
.bigtick.rev .bigtick-track{animation-direction:reverse}
/* barra do celular: respira */
.dock.show .btn{animation:nudge 3.2s var(--ease-io) 1s infinite}
@keyframes nudge{0%,80%,100%{transform:none}86%{transform:translateY(-4px)}92%{transform:translateY(0)}}

/* pausas: aba escondida e fora da tela */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}
.off,.off *,.off::before,.off *::before,.off *::after{animation-play-state:paused !important}

/* ===== responsivo ===== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .tag-scene{padding:8px 0 40px;justify-content:center}
  .hero-photo{width:100%;max-width:480px}
  .tag-on-photo{width:150px;left:-4px;bottom:-20px}
  .tag-on-photo .tag{padding:14px 12px}
  .tag-on-photo .tag-big{font-size:30px}
  .tag-on-photo .tag-meta{display:none}
  .tag-on-photo .tag-hole::after{height:70px}
  .steps-in{grid-template-columns:1fr}
  .steps h2{padding:36px 0 8px;max-width:none}
  .step{border-left:0;border-top:1.5px dashed var(--thread);padding:22px 0;display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start}
  .step svg{grid-row:1/3;grid-column:1;margin-top:2px}
  .step-n{grid-column:2}
  .step p{grid-column:2;margin-top:2px}
  .sec-head{grid-template-columns:1fr;gap:16px}
  .sec-head p{justify-self:start}
  .benefit{grid-template-columns:52px 1fr;gap:6px 14px}
  .benefit p{grid-column:2}
  .benefit .pin{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat{padding-bottom:28px}
  .pass-grid{grid-template-columns:1fr;gap:40px}
  .foot{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero{padding:28px 0 64px}
  .hero h1{margin:16px 0 16px}
  .btn{width:100%;padding:19px 20px;font-size:16px}
  .btn.sm{width:auto}
  .nav-in .btn.sm span{display:none}
  .sec{padding:84px 0}
  .shelf{grid-template-columns:1fr 1fr;gap:12px}
  .prod:nth-child(3n+2){transform:none}
  .shelf.rv > .prod:nth-child(3n+2),.shelf.rv.in > .prod:nth-child(3n+2){transform:none}
  .shelf.rv > .prod{transform:translateY(26px)}
  .shelf.rv.in > .prod{transform:none}
  .proof,.pass{padding:84px 0}
  .final{padding:96px 0 90px}
  .faq .ans{padding-right:0}
}
@media (max-height:560px){.ring{display:none}}

/* ===== movimento reduzido ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important;scroll-behavior:auto !important}
  body{opacity:1}
  .rv > *{opacity:1 !important;transform:none !important}
  .shelf.rv > .prod:nth-child(3n+2){transform:translateY(36px) !important}
  .final-stitch{transform:none}
  .hw{opacity:1 !important;transform:none !important}
  .benefit::after{transform:scaleX(1)}
  .float{display:none}
  .hero-photo{opacity:1;transform:none}
  .dock.show{transform:none}
}
@media (prefers-reduced-motion: reduce) and (max-width:720px){
  .shelf.rv > .prod:nth-child(3n+2){transform:none !important}
}