html{scroll-behavior:smooth;} #lp3, .lp3-x{ --cream:#F5F5ED; --blush:#EACFC8; --taupe:#D9C7BB; --rose:#A35E65; --plum:#3A2330; --greige:#BEB0A7; } #lp3 *, .lp3-x *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} #lp3, .lp3-x{ font-family:'Montserrat',sans-serif; color:var(--plum); background:var(--cream); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* clip, NOT hidden: the export had overflow-x:hidden on , but on this wrapper div `hidden` makes #lp3 a scroll container, which KILLS position:sticky for the #pinEasy/#pinReceive scroll-pinned sections (the runway scrolls past as visible dead space instead of the section holding still). `clip` clips the decorative overflow the same way without creating a scroll container, so the pinning works. */ overflow-x:clip; } #lp3 .l3-eyebrow{ display:inline-flex;align-items:center;gap:12px; font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--rose); } #lp3 .l3-eyebrow::before{content:"";width:40px;height:1px;background:var(--rose);} #lp3 .l3-eyebrow.center::after{content:"";width:40px;height:1px;background:var(--rose);} /* ============================= HERO ============================= */ #lp3 .l3-hero{ position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden; background:linear-gradient(168deg,#F7F3EE 0%,#F3E4DE 42%,#EACFC8 100%); } #lp3 .waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55;} #lp3 .waves path{fill:none;stroke:#fff;stroke-width:1.1;opacity:.5;} #lp3 .hero-inner{ position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto; /* The logo is in the flow now, so this is just breathing room above it — not a reserved band for a fixed bar. */ padding:clamp(40px,5vh,64px) 24px 48px;display:flex;flex-direction:column;flex:1; } /* Hero logo — replaced the fixed header bar. In the flow, centred, scrolls away with the hero like any other element. */ #lp3 .hero-logo{display:block;height:56px;width:auto;margin:0 auto 34px;} @media (max-width:900px){ #lp3 .hero-logo{height:44px;margin-bottom:26px;} } #lp3 .hero-content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;flex:1;padding:8px 0 16px;} #lp3 .l3-hero-copy{max-width:1000px;width:100%;} #lp3 h1{ font-family:'Cormorant Garamond',serif;font-weight:500; font-size:clamp(46px,5.8vw,80px);line-height:1.06;letter-spacing:-.015em;margin-bottom:0; } #lp3 .flip{display:inline-block;position:relative;white-space:nowrap;} #lp3 .flip .pain{position:relative;font-style:italic;font-weight:600;color:rgba(58,35,48,.55);} #lp3 .flip .pain::after{ content:"";position:absolute;left:-2%;top:54%;height:2.5px;width:0%;background:var(--rose); transform:rotate(-2deg);transition:width .5s cubic-bezier(.65,0,.35,1); } #lp3 .flip.struck .pain::after{width:104%;} /* chips de prova — uma resposta ordenada pra cada dor riscada */ #lp3 .proof-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:30px 0 4px;} #lp3 .l3-chip{ display:inline-flex;align-items:center;gap:10px; background:rgba(255,255,255,.6);border:1px solid rgba(163,94,101,.3);border-radius:999px; padding:13px 28px;font-size:15.5px;font-weight:600;color:var(--plum);letter-spacing:.01em; box-shadow:0 8px 22px -8px rgba(58,35,48,.28); opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } body.loaded #lp3 .l3-chip{opacity:1;transform:translateY(0);transition-delay:.9s;} #lp3 .l3-chip svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--rose);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;} #lp3 .sub{font-size:clamp(17.5px,1.6vw,21px);line-height:1.68;color:rgba(58,35,48,.85);max-width:680px;margin:28px auto 30px;} #lp3 .sub strong{font-weight:600;color:var(--plum);} #lp3 .sub .segredo{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:1.13em;color:var(--rose);} /* DESTAQUE FORTE — verificação humana */ #lp3 .human-check{ position:relative;display:flex;gap:16px;align-items:center; background:linear-gradient(135deg,var(--plum) 0%,#4d2f3d 100%); color:#fff;border-radius:18px;padding:20px 22px;max-width:560px;margin:0 auto 30px;text-align:left; box-shadow:0 18px 40px -18px rgba(58,35,48,.6);overflow:hidden; } #lp3 .human-check::before{ content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%; background:radial-gradient(circle,rgba(163,94,101,.5),transparent 70%); } #lp3 .human-check .seal{ flex:none;width:46px;height:46px;border-radius:50%; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35); display:flex;align-items:center;justify-content:center;position:relative;z-index:1; } #lp3 .human-check .seal svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} #lp3 .human-check .hc-txt{position:relative;z-index:1;} #lp3 .human-check .hc-txt b{ display:block;font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;line-height:1.2;margin-bottom:3px; } #lp3 .human-check .hc-txt b em{font-style:italic;color:var(--blush);} #lp3 .human-check .hc-txt p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.8);} #lp3 .cta-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:18px;} #lp3 .l3-btn-primary{ display:inline-block;background:var(--rose);color:#fff;text-decoration:none;font-weight:600;font-size:14.5px; letter-spacing:.04em;padding:17px 36px;border-radius:999px;box-shadow:0 12px 28px rgba(163,94,101,.35); transition:transform .25s ease, box-shadow .25s ease; } #lp3 .l3-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(163,94,101,.42);} /* CTA do hero: expandido, pulsante e brilhante */ #lp3 .btn-hero-pulse{ position:relative;overflow:hidden;font-size:16px;padding:20px 46px; background:linear-gradient(100deg,#A35E65,#B87179 55%,#A35E65); animation:heroPulse 2.2s ease-in-out infinite; } #lp3 .btn-hero-pulse::after{ content:"";position:absolute;top:0;left:-140%;width:70%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);animation:heroShine 3.2s ease-in-out infinite; } @keyframes heroPulse{ 0%,100%{box-shadow:0 12px 30px rgba(163,94,101,.4), 0 0 0 0 rgba(163,94,101,.45);} 50%{box-shadow:0 16px 40px rgba(163,94,101,.55), 0 0 0 14px rgba(163,94,101,0);} } @keyframes heroShine{ 0%{left:-140%;}55%,100%{left:140%;} } @media (prefers-reduced-motion:reduce){ #lp3 .btn-hero-pulse{animation:none;} #lp3 .btn-hero-pulse::after{animation:none;} } /* Secondary hero CTA — a pill, not an underlined link, so it reads as a peer of the primary button rather than a footnote. Deliberately quieter: pale fill, no shadow, no pulse, so the paid path stays dominant. */ #lp3 .l3-btn-ghost{ display:inline-block;font-size:15px;font-weight:600;color:var(--plum); text-decoration:none;letter-spacing:.02em;padding:19px 34px;border-radius:999px; background:rgba(255,255,255,.72);border:1px solid rgba(58,35,48,.14); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:background .25s ease, border-color .25s ease, transform .25s ease; } #lp3 .l3-btn-ghost:hover{ background:#fff;border-color:rgba(163,94,101,.45);transform:translateY(-2px); } #lp3 .assurance{font-size:15px;color:rgba(58,35,48,.6);letter-spacing:.02em;} #lp3 .assurance b{color:var(--plum);font-weight:600;} /* ===================== SEÇÃO: VÍDEO / PRIVILÉGIO ===================== */ #lp3 .privilege{position:relative;background:var(--cream);padding:clamp(64px,9vw,116px) 24px;overflow:hidden;text-align:center;} #lp3 .wave-top{position:absolute;top:0;left:0;width:100%;height:120px;pointer-events:none;opacity:.5;} #lp3 .wave-top path{fill:none;stroke:var(--taupe);stroke-width:1.1;} #lp3 .privilege-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;} #lp3 .privilege .l3-eyebrow, #lp3 .privilege h2, #lp3 .privilege .p-lead{max-width:760px;margin-left:auto;margin-right:auto;} #lp3 .privilege .l3-eyebrow{margin-bottom:20px;} #lp3 .privilege h2{ font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,3.8vw,52px); line-height:1.1;letter-spacing:-.012em;margin-bottom:18px; } #lp3 .privilege h2 em{font-style:italic;font-weight:600;color:var(--rose);} #lp3 .privilege .p-lead{font-size:clamp(16.5px,1.4vw,18px);line-height:1.75;color:rgba(58,35,48,.75);max-width:540px;margin:0 auto 44px;} #lp3 .privilege .p-lead strong{font-weight:600;color:var(--plum);} #lp3 .phone-video video{width:100%;height:100%;object-fit:cover;display:block;} #lp3 .live-badge{ position:absolute;top:15px;left:15px;z-index:5;display:inline-flex;align-items:center;gap:7px; background:rgba(58,35,48,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:6px 12px;border-radius:999px; } #lp3 .live-badge .pulse{width:7px;height:7px;border-radius:50%;background:#7ED9A6;animation:pulse 2s infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(126,217,166,.6);}70%{box-shadow:0 0 0 8px rgba(126,217,166,0);}100%{box-shadow:0 0 0 0 rgba(126,217,166,0);}} #lp3 .video-cap{text-align:center;font-size:14.5px;color:rgba(58,35,48,.6);margin-top:22px;} #lp3 .video-cap b{color:var(--plum);font-weight:600;} /* galeria de resultado: mockups de iPhone + vídeo central */ #lp3 .result-gallery{ display:flex;align-items:center;justify-content:center;gap:15px; margin-top:6px; } /* mockup de iPhone */ #lp3 .phone-mock{ position:relative;flex:none;width:184px;aspect-ratio:9/19.3; background:#241820;border-radius:34px;padding:7px; box-shadow:0 26px 56px -24px rgba(58,35,48,.55), 0 0 0 1px rgba(255,255,255,.06) inset; } #lp3 .phone-mock .island{ position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:4; width:30%;height:15px;background:#0c0709;border-radius:10px; } #lp3 .mock-screen{ position:relative;width:100%;height:100%;border-radius:27px;overflow:hidden; background:linear-gradient(165deg,var(--m1,#EAD9D2),var(--m2,#C9A9A0)); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; } #lp3 .mock-screen::before{ content:"";position:absolute;inset:0; background:radial-gradient(120% 60% at 50% 12%, rgba(255,255,255,.35), transparent 60%); } /* Real screenshots. z-index:1 puts them ABOVE ::before — that pseudo is a 35%-white gloss meant to give the empty placeholder gradient some depth, and being positioned it would otherwise paint over the photo and wash it out (the same trap the testimonial iframes hit). */ #lp3 .mock-screen img{ position:relative;z-index:1; width:100%;height:100%;object-fit:cover;display:block; } #lp3 .mock-wm{ position:absolute;top:20px;left:0;right:0;text-align:center;z-index:2; font-family:'Cormorant Garamond',serif;font-weight:700;letter-spacing:.28em; font-size:13px;color:rgba(58,35,48,.65); } #lp3 .mock-style{ position:relative;z-index:2;font-family:'Cormorant Garamond',serif;font-style:italic; font-weight:600;font-size:30px;color:var(--plum);line-height:1; } #lp3 .mock-tag{ position:relative;z-index:2;font-size:10.5px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:rgba(58,35,48,.6); background:rgba(255,255,255,.5);border-radius:999px;padding:5px 12px; } /* vídeo central: maior e com a proporção do vídeo (9/16) pra caber sem cortar */ #lp3 .phone-mock.phone-mock--video{ width:322px;aspect-ratio:auto;height:auto;z-index:2;align-self:center; box-shadow:0 42px 88px -28px rgba(58,35,48,.64), 0 0 0 1px rgba(255,255,255,.06) inset; } #lp3 .mock-screen.mock-screen--video{height:auto;aspect-ratio:9/16;background:var(--plum);} #lp3 .mock-screen.mock-screen--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;} /* ===================== SEÇÃO: O QUE VOCÊ RECEBE ===================== */ #lp3 .receive{position:relative;background:linear-gradient(180deg,#F7F1EC 0%,#F3E7E1 100%);padding:clamp(64px,9vw,116px) 24px;overflow:hidden;} #lp3 .receive-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;} #lp3 .receive-head{text-align:center;max-width:720px;margin:0 auto 48px;} #lp3 .receive-head .l3-eyebrow{margin-bottom:20px;} #lp3 .receive h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(27px,3.2vw,44px);line-height:1.14;letter-spacing:-.012em;margin-bottom:0;} #lp3 .receive h2 em{font-style:italic;font-weight:600;color:var(--rose);} #lp3 .receive .r-lead{font-size:clamp(15px,1.2vw,16px);line-height:1.7;color:rgba(58,35,48,.75);} #lp3 .receive-list{display:flex;flex-direction:column;gap:6px;} #lp3 .receive-body{ position:relative; display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center; max-width:1000px;margin:0 auto; } #lp3 .connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;overflow:visible;} #lp3 .connector path{fill:none;stroke:var(--rose);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 6;opacity:0;transition:opacity .45s ease;animation:dashFlow 1s linear infinite;} #lp3 .connector circle{fill:var(--rose);opacity:0;transition:opacity .45s ease;} #lp3 .connector.show path{opacity:.75;} #lp3 .connector.show circle{opacity:.95;} @keyframes dashFlow{to{stroke-dashoffset:-22;}} /* reveal ... (mantém abaixo) */ /* ===== carrossel de bullets (mobile) ===== */ #lp3 .bullet-carousel{display:none;} @media (max-width:899px){ #lp3 .bullet-carousel{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px; padding:6px 20px 8px;scrollbar-width:none;-ms-overflow-style:none; } #lp3 .bullet-carousel::-webkit-scrollbar{display:none;} #lp3 .bcard{flex:none;width:82vw;max-width:330px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;} #lp3 .bcard-frame{ position:relative;width:200px;max-width:60vw;aspect-ratio:9/16; background:#241820;border-radius:30px;padding:6px; box-shadow:0 26px 56px -24px rgba(58,35,48,.5), 0 0 0 1px rgba(255,255,255,.06) inset; } #lp3 .bcard-frame .island{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;width:30%;height:12px;background:#0c0709;border-radius:8px;} #lp3 .bcard-video{width:100%;height:100%;border-radius:25px;object-fit:cover;display:block;} #lp3 .bcard-text{margin-top:18px;text-align:center;max-width:300px;} #lp3 .bcard-text p{font-size:15.5px;line-height:1.5;color:rgba(58,35,48,.82);} #lp3 .bcard-text p b{color:var(--rose);font-weight:600;} #lp3 .bcard-cap{margin-top:8px;font-size:12.5px;color:rgba(58,35,48,.6);} #lp3 .bdots{display:flex;justify-content:center;gap:7px;margin-top:18px;flex-wrap:wrap;padding:0 20px;} #lp3 .bdot{width:7px;height:7px;border-radius:50%;background:rgba(58,35,48,.22);transition:all .3s ease;} #lp3 .bdot.on{background:var(--rose);width:22px;border-radius:4px;} #lp3 .receive-swipehint{text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(58,35,48,.4);margin-top:6px;} #lp3 .bnav{ position:absolute;z-index:8;transform:translateY(-50%); width:40px;height:40px;border-radius:50%;border:none;cursor:pointer; background:rgba(163,94,101,.92);display:flex;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(163,94,101,.5);animation:navPulse 1.6s ease-in-out infinite;transition:opacity .3s ease; } #lp3 .bnav svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;} #lp3 .bnav-l{left:6px;} #lp3 .bnav-r{right:6px;} @keyframes navPulse{ 0%,100%{box-shadow:0 6px 18px rgba(163,94,101,.5),0 0 0 0 rgba(163,94,101,.5);transform:translateY(-50%) scale(1);} 50%{box-shadow:0 6px 22px rgba(163,94,101,.6),0 0 0 9px rgba(163,94,101,0);transform:translateY(-50%) scale(1.09);} } } /* mockup de celular com o loop */ #lp3 .receive-phone{flex:none;width:284px;justify-self:center;} #lp3 .rp-frame{ position:relative;width:100%;aspect-ratio:9/16; background:#241820;border-radius:34px;padding:7px; box-shadow:0 34px 74px -26px rgba(58,35,48,.5), 0 0 0 1px rgba(255,255,255,.06) inset; } #lp3 .rp-island{ position:absolute;top:15px;left:50%;transform:translateX(-50%);z-index:3; width:30%;height:14px;background:#0c0709;border-radius:9px; } #lp3 .rp-frame video, #lp3 .rp-video{position:absolute;top:7px;left:7px;right:7px;bottom:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:27px;object-fit:cover;display:block;} #lp3 .rp-video{opacity:0;transition:opacity .45s ease;pointer-events:none;} #lp3 .rp-video.active{opacity:1;} #lp3 .rp-cap{ text-align:center;font-size:13.5px;color:rgba(58,35,48,.6);margin-top:16px;letter-spacing:.01em; } #lp3 .rp-cap .on{color:var(--rose);font-weight:600;} #lp3 .rp-cap .off{color:rgba(58,35,48,.55);font-weight:600;} #lp3 .b-item{display:flex;gap:14px;align-items:flex-start;padding:9px 0;transition:background .25s ease;} #lp3 .b-item.clickable{cursor:pointer;border-radius:14px;padding:12px 14px;margin:1px 0;} #lp3 .b-item.clickable:hover{background:rgba(234,207,200,.22);} #lp3 .b-item.active{ background:linear-gradient(120deg,rgba(234,207,200,.55),rgba(234,207,200,.14)); } #lp3 .b-item.active .tick{background:var(--rose);border-color:var(--rose);} #lp3 .b-item.active .tick svg{stroke:#fff;} #lp3 .b-item.active p b{color:var(--rose);} #lp3 .b-item .tick{ flex:none;width:26px;height:26px;border-radius:50%;margin-top:2px; background:linear-gradient(145deg,var(--blush),#fff);border:1px solid rgba(163,94,101,.3); display:flex;align-items:center;justify-content:center; } #lp3 .b-item .tick svg{width:14px;height:14px;fill:none;stroke:var(--rose);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;} #lp3 .b-item p{font-size:17.5px;line-height:1.5;color:rgba(58,35,48,.82);} #lp3 .b-item p b{color:var(--plum);font-weight:600;} /* ===================== SEÇÃO: VEJA COMO É FÁCIL ===================== */ #lp3 .easy{position:relative;background:var(--cream);padding:clamp(64px,9vw,116px) 24px;overflow:hidden;} #lp3 .easy-inner{position:relative;z-index:2;max-width:1080px;margin:0 auto;} #lp3 .easy-head{text-align:center;max-width:560px;margin:0 auto 60px;} #lp3 .easy-head .l3-eyebrow{margin-bottom:20px;} #lp3 .easy h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,3.8vw,52px);line-height:1.1;letter-spacing:-.012em;margin-bottom:16px;} #lp3 .easy h2 em{font-style:italic;font-weight:600;color:var(--rose);} #lp3 .easy .e-lead{font-size:clamp(16.5px,1.35vw,17.5px);line-height:1.7;color:rgba(58,35,48,.75);} #lp3 .trail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} /* linha ondulada conectora atrás dos passos (desktop) */ #lp3 .trail .trail-line{position:absolute;top:46px;left:8%;width:84%;height:60px;z-index:0;pointer-events:none;} #lp3 .trail .trail-line path{fill:none;stroke:var(--taupe);stroke-width:2;stroke-dasharray:6 8;stroke-linecap:round;} #lp3 .l3-step{position:relative;z-index:1;text-align:center;padding:0 6px;} #lp3 .l3-step .node{ width:92px;height:92px;margin:0 auto 22px;border-radius:50%;position:relative; background:linear-gradient(145deg,#fff,var(--blush));border:1px solid rgba(163,94,101,.25); display:flex;align-items:center;justify-content:center; box-shadow:0 16px 36px -16px rgba(58,35,48,.4); } #lp3 .l3-step .node svg{width:38px;height:38px;fill:none;stroke:var(--rose);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;} #lp3 .l3-step .num{ position:absolute;top:-6px;right:-6px;width:30px;height:30px;border-radius:50%;background:var(--rose);color:#fff; font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center; box-shadow:0 6px 14px rgba(163,94,101,.5); } #lp3 .l3-step .time{ display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rose); background:rgba(163,94,101,.1);border-radius:999px;padding:5px 14px;margin-bottom:12px; } #lp3 .l3-step h3{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--plum);margin-bottom:8px;line-height:1.2;} #lp3 .l3-step p{font-size:16px;line-height:1.6;color:rgba(58,35,48,.72);max-width:270px;margin:0 auto;} #lp3 .l3-step p em{font-style:italic;color:var(--rose);font-weight:600;} /* visuais dos passos */ #lp3 .l3-step-visual{margin-top:24px;display:flex;justify-content:center;align-items:flex-end;} #lp3 .step-visual--duo{gap:12px;} #lp3 .mini-phone{ position:relative;flex:none;width:132px;aspect-ratio:9/19.3; background:#241820;border-radius:24px;padding:5px; box-shadow:0 20px 44px -20px rgba(58,35,48,.5), 0 0 0 1px rgba(255,255,255,.06) inset; } #lp3 .mini-island{ position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:3; width:28%;height:10px;background:#0c0709;border-radius:8px; } #lp3 .mini-screen{ position:relative;width:100%;height:100%;border-radius:19px;overflow:hidden;background:#fff; } #lp3 .mini-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;} #lp3 .mini-screen--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} #lp3 .soft-frame{ width:300px;max-width:100%;border-radius:18px;overflow:hidden; box-shadow:0 22px 50px -22px rgba(58,35,48,.42);border:3px solid #fff; } #lp3 .soft-frame img{width:100%;display:block;} #lp3 .easy-cta{text-align:center;margin-top:56px;} #lp3 .easy-cta .l3-btn-primary{ display:inline-block;background:var(--rose);color:#fff;text-decoration:none;font-weight:600;font-size:15px; letter-spacing:.04em;padding:18px 44px;border-radius:999px;box-shadow:0 14px 32px rgba(163,94,101,.38); transition:transform .25s ease, box-shadow .25s ease; } #lp3 .easy-cta .l3-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(163,94,101,.46);} #lp3 .easy-cta .sub-note{font-size:12.5px;color:rgba(58,35,48,.6);margin-top:14px;} #lp3 .easy-cta .sub-note b{color:var(--plum);font-weight:600;} /* ===================== DEPOIMENTOS ===================== */ #lp3 .testi{position:relative;background:linear-gradient(180deg,#F7F1EC 0%,#F3E7E1 100%);padding:clamp(64px,9vw,110px) 0;overflow:hidden;} #lp3 .testi-head{text-align:center;max-width:720px;margin:0 auto 44px;padding:0 24px;} #lp3 .testi-head .l3-eyebrow{margin-bottom:20px;} #lp3 .testi h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,3.8vw,52px);line-height:1.1;letter-spacing:-.012em;margin-bottom:16px;} #lp3 .testi h2 em{font-style:italic;font-weight:600;color:var(--rose);} #lp3 .testi .t-lead{font-size:clamp(16.5px,1.35vw,18px);line-height:1.7;color:rgba(58,35,48,.75);max-width:560px;margin:0 auto;} #lp3 .testi-track{ display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; padding:6px max(24px,calc((100% - 1180px)/2)) 24px; scrollbar-width:none;-ms-overflow-style:none; } #lp3 .testi-track::-webkit-scrollbar{display:none;} #lp3 .l3-tcard{ flex:none;width:270px;scroll-snap-align:center; background:#fff;border-radius:22px;overflow:hidden; box-shadow:0 18px 44px -20px rgba(58,35,48,.4); } #lp3 .l3-tcard-head{padding:18px 18px 14px;} #lp3 .l3-tcard-head .name{font-size:15.5px;font-weight:700;color:var(--plum);} #lp3 .l3-tcard-head .name .age{font-weight:400;color:rgba(58,35,48,.55);} #lp3 .l3-tcard-head .role{font-size:12.5px;color:rgba(58,35,48,.6);margin-top:2px;} #lp3 .l3-tcard-head .handle{display:inline-block;font-size:12.5px;color:var(--rose);text-decoration:none;margin-top:3px;font-weight:500;} #lp3 .l3-tcard-head .handle:hover{text-decoration:underline;} #lp3 .tvideo{ position:relative;aspect-ratio:9/16; background:linear-gradient(160deg,var(--g1,#E7CFC8),var(--g2,#B79C93)); display:flex;align-items:center;justify-content:center;overflow:hidden; } #lp3 .tv-top{ position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:9px;z-index:2; } #lp3 .tv-logo{ flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92); display:flex;align-items:center;justify-content:center; font-family:'Cormorant Garamond',serif;font-weight:700;font-size:16px;color:var(--plum); } #lp3 .tv-name{font-size:10.5px;font-weight:700;color:#fff;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.35);} #lp3 .tv-name b{font-weight:500;font-size:9px;opacity:.9;} #lp3 .play{ position:relative;z-index:2;width:60px;height:60px;border-radius:50%;border:none;cursor:pointer; background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px rgba(58,35,48,.4);transition:transform .25s ease, background .25s ease; } #lp3 .play:hover{transform:scale(1.08);background:#fff;} #lp3 .play svg{width:26px;height:26px;fill:var(--rose);margin-left:3px;} #lp3 .tv-cap{ position:absolute;bottom:14px;left:12px;right:12px;z-index:2;text-align:center; font-size:12px;font-weight:600;color:#fff;line-height:1.35; text-shadow:0 1px 6px rgba(0,0,0,.5); } #lp3 .tvideo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,transparent 62%,rgba(0,0,0,.28));z-index:1;} #lp3 .testi-nav{display:flex;justify-content:center;gap:14px;margin-top:26px;} #lp3 .tnav{ width:46px;height:46px;border-radius:50%;border:1px solid rgba(58,35,48,.2);cursor:pointer; background:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center; transition:background .25s ease, transform .2s ease; } #lp3 .tnav:hover{background:#fff;transform:translateY(-1px);} #lp3 .tnav svg{width:20px;height:20px;fill:none;stroke:var(--plum);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} /* reveal */ #lp3 .rv, .lp3-x .rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1);} #lp3 .rv.on, .lp3-x .rv.on{opacity:1;transform:translateY(0);} #lp3 .rv.d1, .lp3-x .rv.d1{transition-delay:.08s}#lp3 .rv.d2, .lp3-x .rv.d2{transition-delay:.2s}#lp3 .rv.d3{transition-delay:.32s}#lp3 .rv.d4{transition-delay:.44s} @media (prefers-reduced-motion: reduce){ #lp3 .flip .pain::after{transition:none;} #lp3 .rv{opacity:1 !important;transform:none !important;transition:none !important;} #lp3 .l3-chip{opacity:1 !important;transform:none !important;transition:none !important;} #lp3 .live-badge .pulse{animation:none;} } /* ============================= MOBILE ============================= */ @media (max-width:900px){ #lp3 .hero-inner{padding:48px 20px 40px;} #lp3 .hero-content{gap:0;padding:0 0 10px;} #lp3 h1{font-size:clamp(36px,9.4vw,48px);line-height:1.08;} #lp3 .flip{white-space:nowrap;} #lp3 .proof-chips{gap:9px;margin:22px 0 2px;} #lp3 .l3-chip{padding:9px 16px;font-size:13px;} #lp3 .l3-chip svg{width:14px;height:14px;} #lp3 .sub{font-size:17.5px;line-height:1.62;margin:22px auto 24px;} #lp3 .human-check{max-width:100%;padding:17px 19px;gap:13px;border-radius:16px;} #lp3 .human-check .seal{width:42px;height:42px;} #lp3 .human-check .seal svg{width:22px;height:22px;} #lp3 .human-check .hc-txt b{font-size:18.5px;} #lp3 .human-check .hc-txt p{font-size:15.5px;} #lp3 .cta-row{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:16px;} #lp3 .l3-btn-primary{width:100%;text-align:center;padding:16px 0;} #lp3 .l3-btn-ghost{align-self:center;} #lp3 .assurance{text-align:center;font-size:14px;line-height:1.5;} /* seções */ #lp3 .privilege, #lp3 .receive, #lp3 .easy{padding:56px 22px;} #lp3 .privilege{padding-left:0;padding-right:0;} #lp3 .privilege .l3-eyebrow, #lp3 .privilege h2, #lp3 .privilege .p-lead{padding-left:22px;padding-right:22px;} #lp3 .privilege h2, #lp3 .receive h2, #lp3 .easy h2{font-size:clamp(28px,7.6vw,38px);} #lp3 .privilege .p-lead, #lp3 .receive .r-lead, #lp3 .easy .e-lead{font-size:16px;} /* galeria vira carrossel horizontal no mobile */ #lp3 .result-gallery{ justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; padding:6px 22px 8px;scrollbar-width:none;-ms-overflow-style:none; } #lp3 .result-gallery::-webkit-scrollbar{display:none;} #lp3 .phone-mock{width:58vw;max-width:230px;scroll-snap-align:center;} #lp3 .phone-mock.phone-mock--video{width:74vw;max-width:300px;order:-1;} #lp3 .video-cap{padding:0 22px;} #lp3 .receive-head{margin-bottom:34px;} #lp3 .receive-body{grid-template-columns:1fr;gap:30px;} #lp3 .receive-phone{display:none;} #lp3 .receive-list{display:none;} #lp3 .planos-grid{grid-template-columns:1fr;gap:34px;} #lp3 .plano-card{padding:30px 24px;} #lp3 .b-item{padding:9px 0;} #lp3 .b-item p{font-size:17px;} /* trilha vertical */ #lp3 .easy-head{margin-bottom:38px;} #lp3 .trail{grid-template-columns:1fr;gap:0;} #lp3 .trail .trail-line{display:none;} #lp3 .l3-step{display:grid;grid-template-columns:76px 1fr;gap:20px;text-align:left;align-items:start;padding:16px 0;position:relative;} #lp3 .l3-step::after{content:"";position:absolute;left:37px;top:88px;bottom:-16px;width:2px; background:repeating-linear-gradient(var(--taupe) 0 5px,transparent 5px 12px);} #lp3 .l3-step:last-child::after{display:none;} #lp3 .l3-step .node{width:76px;height:76px;margin:0;} #lp3 .l3-step .node svg{width:32px;height:32px;} #lp3 .l3-step .num{width:26px;height:26px;font-size:15px;} #lp3 .l3-step .st-body{padding-top:4px;} #lp3 .l3-step .time{margin-bottom:8px;font-size:10.5px;} #lp3 .l3-step h3{font-size:19px;} #lp3 .l3-step p{margin:0;max-width:100%;font-size:13px;} #lp3 .l3-step-visual{grid-column:2;justify-content:flex-start;margin-top:14px;} #lp3 .mini-phone{width:112px;} #lp3 .step-visual--duo{gap:10px;} #lp3 .soft-frame{width:100%;max-width:270px;} #lp3 .easy-cta{margin-top:44px;} #lp3 .easy-cta .l3-btn-primary{width:100%;padding:17px 0;font-size:14.5px;} /* depoimentos */ #lp3 .testi{padding:56px 0;} #lp3 .testi-head{margin-bottom:34px;padding:0 22px;} #lp3 .testi h2{font-size:clamp(28px,7.6vw,38px);} #lp3 .testi .t-lead{font-size:16px;} #lp3 .testi-track{gap:16px;padding:6px 22px 20px;} #lp3 .l3-tcard{width:78vw;max-width:300px;} } @media (max-width:380px){ #lp3 h1{font-size:31px;} } /* ===== equipe / a-bestie (restored from the Figma export — these two sections use the reference design, not the v2 ones they replaced. Colorimetria stays on its original v2 design: only its eyebrow pill was added.) ===== */ /* ===== equipe ===== */ .lp3-x .team{background:linear-gradient(180deg,#F5E7E2 0%,#EBD2CC 100%);padding:clamp(64px,9vw,110px) 24px;} .lp3-x .team-inner{max-width:1080px;margin:0 auto;} .lp3-x .team-head{text-align:center;max-width:820px;margin:0 auto 84px;} .lp3-x .team-badge{ display:inline-block;background:var(--rose);color:#fff;font-size:11.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:8px 20px;border-radius:999px;margin-bottom:24px; } .lp3-x .team h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(30px,4vw,52px);line-height:1.12;color:var(--plum);letter-spacing:-.01em;} .lp3-x .team h2 em{font-style:italic;font-weight:600;color:var(--rose);} .lp3-x .team-sub{margin-top:20px;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:rgba(58,35,48,.7);max-width:600px;margin-left:auto;margin-right:auto;} .lp3-x .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .lp3-x .team-card{ background:#fff;border-radius:24px;padding:78px 28px 34px;text-align:center;position:relative; box-shadow:0 24px 54px -28px rgba(58,35,48,.32); } .lp3-x .team-photo{ position:absolute;top:-64px;left:50%;transform:translateX(-50%); width:128px;height:128px;border-radius:50%;border:5px solid #fff;overflow:hidden; background:linear-gradient(160deg,var(--taupe),#BEB0A7); box-shadow:0 14px 30px -12px rgba(58,35,48,.4);display:flex;align-items:center;justify-content:center; } .lp3-x .team-photo img{width:100%;height:100%;object-fit:cover;display:block;} .lp3-x .team-photo::after{content:attr(data-ini);font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:600;color:rgba(255,255,255,.9);} .lp3-x .team-photo:has(img)::after{display:none;} .lp3-x .team-card h3{font-size:21px;font-weight:700;color:var(--plum);margin-bottom:12px;} .lp3-x .team-role{ display:inline-block;background:var(--rose);color:#fff;font-size:12.5px;font-weight:600; padding:6px 16px;border-radius:999px;margin-bottom:16px; } .lp3-x .team-card p{font-size:14px;line-height:1.65;color:rgba(58,35,48,.65);} /* Stack the cards on phones. The override that used to do this was written as `#lp3 .team-grid`, but this section lives in .lp3-x — it never matched, so three columns stayed wedged side by side and the third card got cut off by the wrapper's overflow-x:clip. The big gap is load-bearing: each photo is absolutely positioned at top:-64px, so anything smaller and it overlaps the card above it. */ @media (max-width:900px){ .lp3-x .team-grid{grid-template-columns:1fr;gap:84px;} .lp3-x .team-card{width:100%;max-width:420px;margin:0 auto;} } /* ===== A Bestie (virada, design moderno) ===== */ .lp3-x .reveal-bestie{ position:relative;overflow:hidden;text-align:center; background:radial-gradient(125% 90% at 50% 28%, #533040 0%, #331d27 52%, #22131a 100%); padding:clamp(96px,15vw,180px) 24px; } .lp3-x .rb-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;} .lp3-x .rb-orb-1{width:360px;height:360px;background:rgba(163,94,101,.55);top:-70px;left:-50px;animation:orbFloat 9s ease-in-out infinite;} .lp3-x .rb-orb-2{width:320px;height:320px;background:rgba(234,207,200,.32);bottom:-90px;right:-40px;animation:orbFloat 11s ease-in-out infinite reverse;} .lp3-x .rb-orb-3{width:240px;height:240px;background:rgba(184,113,121,.4);top:40%;left:52%;animation:orbFloat 13s ease-in-out infinite;} @keyframes orbFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(34px,-26px);}} .lp3-x .rb-inner{position:relative;z-index:2;max-width:840px;margin:0 auto;} .lp3-x .rb-eyebrow{ display:inline-block;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--blush);opacity:.85;margin-bottom:22px; } .lp3-x .rb-title{ font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(38px,6.4vw,78px); line-height:1.06;color:#fff;letter-spacing:-.012em; } .lp3-x .rb-title em{ font-style:italic;font-weight:600; background:linear-gradient(100deg,var(--blush) 0%,#d98d95 45%,var(--rose) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; text-shadow:0 0 46px rgba(163,94,101,.45); } .lp3-x .rb-sub{ margin:32px auto 0;font-size:clamp(16px,1.5vw,19.5px);line-height:1.72; color:rgba(243,233,234,.78);max-width:660px; } .lp3-x .rb-sub b{color:#fff;font-weight:600;} @media (prefers-reduced-motion:reduce){.lp3-x .rb-orb{animation:none;}} /* ===== scroll-driven (pin) — só desktop ===== */ #lp3 .pin-wrap{position:relative;} @media (min-width:900px){ /* Runway = the animation's timeline: (height - 100vh) of scroll drives it, so these numbers ARE the pacing. The export's 250/470vh gave ~50vh per item, which read as the page hanging — especially on the way back up, where nothing animates and it's just dead distance. ~28vh per item is still deliberate enough to read each one: pinEasy 3 steps → (180-100)/3 ≈ 27vh each pinReceive 7 bullets→ (300-100)/7 ≈ 28vh each Tune HERE rather than trying to reclaim the distance at runtime — changing these heights mid-scroll fights the browser's momentum and shows up as a jump. */ #lp3 #pinEasy{height:180vh;} #lp3 #pinReceive{height:300vh;} #lp3 #pinEasy > .easy, #lp3 #pinReceive > .receive{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:60px; padding-bottom:84px; box-sizing:border-box; } /* modo travado: encolhe visuais pra caber com respiro */ body.pinning #lp3 #pinEasy .easy-head{margin-bottom:20px;} body.pinning #lp3 #pinEasy .easy-head h2{font-size:clamp(30px,3.4vw,44px);} body.pinning #lp3 #pinEasy .l3-step-visual{margin-top:14px;} body.pinning #lp3 #pinEasy .mini-phone{width:96px;} body.pinning #lp3 #pinEasy .soft-frame{width:186px;} body.pinning #lp3 #pinEasy .l3-step h3{font-size:19px;margin-bottom:5px;} body.pinning #lp3 #pinEasy .l3-step p{font-size:14px;} body.pinning #lp3 #pinEasy .easy-cta{margin-top:22px;} body.pinning #lp3 #pinReceive .rp-frame{max-height:none;} body.pinning #lp3 #pinEasy .l3-step{ opacity:0; transform:translateY(36px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); } body.pinning #lp3 #pinEasy .l3-step.pin-on{opacity:1; transform:none;} /* dica de scroll */ body.pinning #lp3 #pinEasy .easy::after, body.pinning #lp3 #pinReceive .receive::after{ content:"↓ role para revelar"; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(58,35,48,.4); animation:hintBob 1.8s ease-in-out infinite; pointer-events:none; } @keyframes hintBob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.7;}50%{transform:translateX(-50%) translateY(5px);opacity:.35;}} } /* z-index:2 is load-bearing, not decoration: .tvideo::after is a gradient scrim at z-index:1, and an iframe with z-index:auto paints BELOW it — so the scrim covered the video and swallowed every click, making the embed look like a static image. The scrim existed to keep the Figma mockup's overlay text legible; those elements are gone now (a real YouTube embed replaced them), so putting the iframe on top both reveals the video and restores playback. */ #lp3 .tvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;}