@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#06080d;--bg2:#0b1018;--surface:#101722;--surface2:#151e2b;--line:#202c3c;--line2:#2b3a4f;--text:#f7f9fc;--muted:#9aa7ba;--faint:#68758a;--cyan:#22d3ee;--cyan2:#67e8f9;--cyanSoft:rgba(34,211,238,.12);--green:#34d399;--container:1200px;--r:18px;--shadow:0 28px 80px -34px rgba(0,0,0,.75);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body.lp-body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:Poppins,sans-serif;line-height:1.12;letter-spacing:-.025em}a{text-decoration:none;color:inherit}ul{list-style:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}img{display:block;max-width:100%}.lp-container{width:min(var(--container),calc(100% - 40px));margin:auto}
.reveal,.reveal-stagger>*{opacity:0;transform:translateY(24px);transition:.7s var(--ease)}.reveal.is-visible,.reveal-stagger.is-visible>*{opacity:1;transform:none}.reveal-stagger>*:nth-child(2){transition-delay:.08s}.reveal-stagger>*:nth-child(3){transition-delay:.16s}.reveal-stagger>*:nth-child(4){transition-delay:.24s}.reveal-stagger>*:nth-child(5){transition-delay:.32s}.reveal-stagger>*:nth-child(6){transition-delay:.4s}
/* Blocos grandes/mockups: reentram e "assentam" ao sair — não somem, só reduzem presença */
.reveal-toggle{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-toggle.is-visible{opacity:1;transform:none}
.reveal-toggle.is-visible.is-settled{opacity:.5;transform:translateY(10px) scale(.98)}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 20px;font-weight:700;font-size:14px;border:1px solid transparent;transition:.2s var(--ease);white-space:nowrap}.lp-btn:hover{transform:translateY(-2px)}.lp-btn-primary{background:linear-gradient(135deg,var(--cyan2),var(--cyan));color:#041316;box-shadow:0 14px 34px -18px rgba(34,211,238,.8)}.lp-btn-outline{border-color:var(--line2);background:rgba(255,255,255,.02);color:var(--text)}.lp-btn-outline:hover{border-color:var(--cyan);color:var(--cyan2)}.lp-btn-ghost{color:var(--muted)}.lp-btn-lg{padding:15px 24px;font-size:15px}.lp-btn-block{width:100%}
.lp-header{position:fixed;inset:0 0 auto;z-index:100;padding:16px 0;border-bottom:1px solid transparent;transition:.25s}.lp-header.is-scrolled{padding:11px 0;background:rgba(6,8,13,.88);border-color:var(--line);backdrop-filter:blur(16px)}.lp-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.lp-logo{display:flex;align-items:baseline;gap:9px}.lp-logo span{font-family:Poppins,sans-serif;font-size:22px;font-weight:800}.lp-logo b{color:var(--cyan)}.lp-logo small{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}.lp-nav-desktop{display:flex;gap:28px}.lp-nav-desktop a{position:relative;padding-bottom:5px;font-size:13.5px;color:var(--muted);font-weight:600;transition:color .25s ease}.lp-nav-desktop a:hover{color:#fff}.lp-nav-desktop a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan2),var(--cyan));transition:width .35s var(--ease)}.lp-nav-desktop a.is-active{color:#fff}.lp-nav-desktop a.is-active::after{width:100%}.lp-header-actions{display:flex;align-items:center;gap:8px}.lp-hamburger{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px}.lp-hamburger span{width:20px;height:2px;background:#fff;transition:.2s}.lp-hamburger.is-active span:first-child{transform:translateY(7px) rotate(45deg)}.lp-hamburger.is-active span:nth-child(2){opacity:0}.lp-hamburger.is-active span:last-child{transform:translateY(-7px) rotate(-45deg)}.lp-mobile-menu{display:none;background:var(--bg2);padding:12px 20px 20px;border-top:1px solid var(--line);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}.lp-mobile-menu.is-open{display:flex;flex-direction:column}.lp-mobile-menu a{padding:12px 4px;color:var(--muted);border-bottom:1px solid var(--line)}.lp-mobile-menu .lp-btn{margin-top:10px;color:#041316}
.lp-hero{position:relative;padding:150px 0 100px;overflow:hidden}.lp-hero-glow{position:absolute;width:720px;height:720px;border-radius:50%;right:-240px;top:-320px;background:radial-gradient(circle,rgba(34,211,238,.18),transparent 66%);pointer-events:none}.lp-hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:60px;align-items:center}.lp-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid rgba(34,211,238,.22);border-radius:999px;background:var(--cyanSoft);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan2);margin-bottom:22px}.lp-kicker span{width:6px;height:6px;background:var(--cyan);border-radius:50%}.lp-hero h1{font-size:clamp(42px,5vw,66px);margin-bottom:22px;max-width:690px}.lp-hero h1 em{font-style:normal;color:var(--cyan2)}.lp-hero-sub{font-size:18px;color:var(--muted);max-width:630px;margin-bottom:28px}.lp-hero-actions{display:flex;gap:12px;flex-wrap:wrap}.lp-hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;color:var(--faint);font-size:12.5px}.lp-hero-trust span{display:flex;align-items:center;gap:5px}.lp-hero-product{position:relative;min-height:490px}.lp-product-frame{position:absolute;right:0;top:20px;width:94%;border:1px solid var(--line2);border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}.lp-frame-top{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#0a0f17;border-bottom:1px solid var(--line)}.lp-frame-top>span{width:7px;height:7px;border-radius:50%;background:#334155}.lp-frame-top div{margin-left:8px;font-size:10px;color:var(--faint);background:#111827;padding:4px 10px;border-radius:6px}.lp-product-frame img{width:100%;height:auto}.lp-floating-card{position:absolute;z-index:3;background:rgba(13,20,30,.96);border:1px solid var(--line2);box-shadow:var(--shadow);border-radius:14px;padding:14px 16px}.lp-floating-card b,.lp-floating-card strong{display:block;font-family:Poppins,sans-serif}.lp-floating-card span{display:block;color:var(--muted);font-size:11px;margin-top:3px}.lp-floating-one{left:-8px;bottom:40px;max-width:220px}.lp-floating-two{right:-20px;bottom:80px;text-align:center}.lp-floating-two strong{font-size:28px;color:var(--cyan2)}
.lp-proof-strip{border-block:1px solid var(--line);background:#080c13}.lp-proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}.lp-proof-grid>div{padding:24px 22px;border-right:1px solid var(--line)}.lp-proof-grid>div:last-child{border-right:0}.lp-proof-grid b{display:block;font:700 14px Poppins}.lp-proof-grid span{font-size:11.5px;color:var(--faint)}
section[id]{scroll-margin-top:88px}
.lp-section{padding:96px 0}.lp-section-dark{background:linear-gradient(180deg,#090d14,#070a10);border-block:1px solid var(--line)}.lp-section-soft{background:#0a0e15;border-block:1px solid var(--line)}.lp-section-head{text-align:center;max-width:770px;margin:0 auto 52px}.lp-eyebrow{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}.lp-section-head h2,.lp-showcase-copy h2,.lp-personalize-grid h2,.lp-faq-layout h2{font-size:clamp(30px,3.5vw,44px)}.lp-section-sub,.lp-copy-muted{color:var(--muted);margin-top:14px;font-size:15px}.lp-three-value{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lp-three-value article{background:linear-gradient(180deg,var(--surface),#0b111a);border:1px solid var(--line);border-radius:18px;padding:30px}.lp-three-value article>span{color:var(--cyan);font:700 12px Poppins}.lp-three-value h3{font-size:20px;margin:34px 0 8px}.lp-three-value p{font-size:13.5px;color:var(--muted)}
.lp-showcase-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:58px;align-items:center}.lp-showcase-copy .lp-copy-muted{margin-bottom:24px}.lp-check-list{display:flex;flex-direction:column;gap:13px}.lp-check-list li{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:14px}.lp-check-list svg{width:18px;height:18px;flex:0 0 auto;color:var(--cyan);margin-top:2px}.lp-real-shot{border:1px solid var(--line2);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--surface);position:relative}.lp-real-shot:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);pointer-events:none}.lp-real-shot img{width:100%}
.lp-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.lp-feature-card{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:25px;transition:.22s}.lp-feature-card:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.45)}.lp-icon-wrap{width:42px;height:42px;border-radius:12px;background:var(--cyanSoft);color:var(--cyan2);display:grid;place-items:center}.lp-icon-wrap svg{width:20px;height:20px}.lp-feature-card b{display:block;font:700 15px Poppins;margin:16px 0 7px}.lp-feature-card span{color:var(--muted);font-size:13px}
.lp-personalize-grid{display:grid;grid-template-columns:1fr .9fr;gap:72px;align-items:center}.lp-text-link{display:inline-flex;gap:8px;color:var(--cyan2);font-weight:700;margin-top:24px}.lp-personalize-stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lp-personalize-stack div{padding:22px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}.lp-personalize-stack b{display:block;font:700 14px Poppins}.lp-personalize-stack span{font-size:12px;color:var(--muted)}
.lp-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative}.lp-step{border-top:1px solid var(--line2);padding-top:22px}.lp-step-n{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--cyanSoft);color:var(--cyan2);font-weight:800;margin-bottom:16px}.lp-step b{font:700 14px Poppins}.lp-step p{font-size:12.5px;color:var(--muted);margin-top:5px}
.lp-trial-spot{padding:0 0 96px}.lp-trial-inner{background:linear-gradient(135deg,#0e2630,#0b1119 62%);border:1px solid rgba(34,211,238,.28);border-radius:24px;padding:42px 46px;display:flex;align-items:center;justify-content:space-between;gap:36px;box-shadow:var(--shadow)}.lp-trial-inner h2{font-size:clamp(26px,3vw,38px);margin:8px 0}.lp-trial-inner p{color:var(--muted);max-width:650px}.lp-trial-badge{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--cyan2)}
.lp-plans-grid{display:grid;grid-template-columns:repeat(2,minmax(0,390px));justify-content:center;gap:22px}.lp-plan-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:30px}.lp-plan-card.is-highlight{border-color:rgba(34,211,238,.65);box-shadow:0 24px 60px -35px rgba(34,211,238,.7)}.lp-plan-highlight{position:absolute;right:18px;top:18px;padding:5px 10px;border-radius:999px;background:var(--cyanSoft);color:var(--cyan2);font-size:9.5px;font-weight:800;text-transform:uppercase}.lp-plan-head{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:20px}.lp-plan-head b{display:block;font:700 19px Poppins}.lp-plan-price{display:block;color:var(--cyan2);font:800 30px Poppins;margin-top:7px}.lp-plan-card .lp-check-list{margin-bottom:24px}.lp-plan-note{text-align:center;color:var(--muted);font-size:13px;margin-top:22px}.lp-plan-note a{color:var(--cyan2);font-weight:700}
.lp-faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:start}.lp-faq-list{display:flex;flex-direction:column;gap:10px}.lp-faq-item{border:1px solid var(--line);background:var(--surface);border-radius:14px;overflow:hidden}.lp-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;padding:18px 20px;font-weight:700;font-size:13.5px}.lp-faq-q span{color:var(--cyan);font-size:20px;transition:.2s}.lp-faq-item.is-open .lp-faq-q span{transform:rotate(45deg)}.lp-faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}.lp-faq-a p{padding:0 20px 18px;color:var(--muted);font-size:13px}
.lp-final-cta{padding:96px 0}.lp-final-box{border:1px solid var(--line2);border-radius:28px;background:radial-gradient(600px 250px at 15% 0,rgba(34,211,238,.12),transparent 70%),var(--surface);padding:48px;display:flex;justify-content:space-between;gap:40px;align-items:center}.lp-final-box h2{font-size:clamp(28px,3.4vw,44px);max-width:760px}.lp-final-box p{color:var(--muted);margin-top:12px}.lp-final-actions{display:flex;flex-direction:column;gap:10px;min-width:230px}
.lp-footer{border-top:1px solid var(--line);background:#05070b;padding-top:54px}.lp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:40px}.lp-footer-grid p{font-size:13px;color:var(--faint);margin-top:12px}.lp-footer h5{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px}.lp-footer-links{display:flex;flex-direction:column;gap:9px}.lp-footer-links a{font-size:13px;color:var(--faint)}.lp-footer-links a:hover{color:var(--cyan2)}.lp-footer-bottom{border-top:1px solid var(--line);padding:20px 0 88px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11.5px;color:var(--faint)}.lp-dev-credit a{color:var(--cyan2);font-weight:700}
@media(max-width:640px){.lp-footer-bottom{padding-bottom:74px}}
@media(max-width:1050px){.lp-nav-desktop{display:none}.lp-hamburger{display:flex}.lp-header-actions .lp-btn-ghost{display:none}.lp-hero-grid,.lp-showcase-grid,.lp-personalize-grid,.lp-faq-layout{grid-template-columns:1fr}.lp-hero-product{min-height:430px}.lp-features-grid{grid-template-columns:repeat(2,1fr)}.lp-steps{grid-template-columns:repeat(3,1fr)}.lp-proof-grid{grid-template-columns:repeat(2,1fr)}.lp-proof-grid>div:nth-child(2){border-right:0}.lp-proof-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:700px){.lp-container{width:min(100% - 28px,var(--container))}.lp-header{padding:10px 0}.lp-logo small{display:none}.lp-header-actions>.lp-btn-primary{display:none}.lp-hero{padding:112px 0 68px}.lp-hero-grid{gap:32px}.lp-hero h1{font-size:38px}.lp-hero-sub{font-size:15px}.lp-hero-actions{flex-direction:column}.lp-hero-actions .lp-btn{width:100%}.lp-hero-trust{gap:8px 14px}.lp-hero-product{min-height:300px}.lp-product-frame{width:100%;top:0;transform:none}.lp-floating-one{display:none}.lp-floating-two{right:6px;bottom:0}.lp-proof-grid{grid-template-columns:1fr}.lp-proof-grid>div{border-right:0!important;border-bottom:1px solid var(--line)}.lp-proof-grid>div:last-child{border-bottom:0}.lp-section{padding:70px 0}.lp-section-head{margin-bottom:34px}.lp-section-head h2,.lp-showcase-copy h2,.lp-personalize-grid h2,.lp-faq-layout h2{font-size:30px}.lp-three-value,.lp-features-grid,.lp-personalize-stack,.lp-plans-grid{grid-template-columns:1fr}.lp-steps{grid-template-columns:1fr 1fr}.lp-showcase-grid,.lp-personalize-grid,.lp-faq-layout{gap:34px}.lp-trial-spot{padding-bottom:70px}.lp-trial-inner{padding:30px 22px;flex-direction:column;align-items:flex-start}.lp-trial-inner .lp-btn{width:100%}.lp-final-cta{padding:70px 0}.lp-final-box{padding:30px 22px;flex-direction:column;align-items:flex-start}.lp-final-actions{width:100%;min-width:0}.lp-final-actions .lp-btn{width:100%}.lp-footer-grid{grid-template-columns:1fr;gap:30px}}
@media(max-width:430px){.lp-hero h1{font-size:34px}.lp-steps{grid-template-columns:1fr}.lp-floating-two{display:none}.lp-hero-product{min-height:235px}}

/* ---- Polimento de animações (discreto, sem lib nova) ---- */
.lp-btn span{display:inline-block;transition:transform .25s var(--ease)}
.lp-btn:hover span{transform:translateX(3px)}

@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lp-hero-product.is-visible .lp-floating-card{animation:lpFloat 5s ease-in-out infinite}
.lp-hero-product.is-visible .lp-floating-two{animation-delay:.6s}

.lp-plan-card{transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.lp-plan-card:hover{transform:translateY(-4px)}
.lp-plan-card.is-highlight{transform:scale(1.02);box-shadow:0 26px 64px -34px rgba(34,211,238,.55)}
.lp-plan-card.is-highlight:hover{transform:scale(1.02) translateY(-4px);border-color:rgba(34,211,238,.85);box-shadow:0 30px 70px -32px rgba(34,211,238,.65)}

.lp-real-shot,.lp-product-frame{transition:opacity .7s var(--ease),transform .5s var(--ease),box-shadow .3s var(--ease)}
.lp-real-shot:hover,.lp-hero-product:hover .lp-product-frame{box-shadow:0 32px 90px -30px rgba(34,211,238,.28),var(--shadow)}

/* Entrada com leve giro 3D que assenta na inclinação final do mockup —
   mais específico que o .reveal-stagger genérico, então vence a cascata
   sem apagar a perspectiva permanente de .lp-product-frame. */
.lp-hero-product.reveal-stagger>.lp-product-frame{transform:perspective(1200px) rotateY(-11deg) rotateX(5deg) translateY(18px)}
.lp-hero-product.reveal-stagger.is-visible>.lp-product-frame{transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}
/* Mockup entra por último, depois da cópia do hero */
.lp-hero-product.reveal-stagger>*:nth-child(1){transition-delay:.4s}
.lp-hero-product.reveal-stagger>*:nth-child(2){transition-delay:.5s}
.lp-hero-product.reveal-stagger>*:nth-child(3){transition-delay:.58s}
@media(max-width:700px){
  .lp-hero-product.reveal-stagger>.lp-product-frame,
  .lp-hero-product.reveal-stagger.is-visible>.lp-product-frame{transform:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-stagger>*,.reveal-toggle{opacity:1!important;transform:none!important}
  .lp-hero-product.reveal-stagger>.lp-product-frame,.lp-hero-product.reveal-stagger.is-visible>.lp-product-frame{transform:none!important}
}


/* WhatsApp flutuante — Landing Page VSVitrine */
.lp-whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1200;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:8px 16px 8px 9px;
  border-radius:999px;
  background:#25d366;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  letter-spacing:.01em;
  box-shadow:0 16px 38px rgba(0,0,0,.26),0 5px 14px rgba(37,211,102,.28);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,opacity .2s ease;
}
.lp-whatsapp-float.is-hidden-by-menu{opacity:0;pointer-events:none;transition:opacity .15s ease}
.lp-whatsapp-float:hover{
  transform:translateY(-3px) scale(1.015);
  background:#20bd5a;
  box-shadow:0 20px 44px rgba(0,0,0,.3),0 8px 20px rgba(37,211,102,.34);
}
.lp-whatsapp-float:focus-visible{outline:3px solid rgba(37,211,102,.35);outline-offset:4px}
.lp-whatsapp-float-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
}
.lp-whatsapp-float-icon svg{width:25px;height:25px;display:block}
.lp-whatsapp-float-label{white-space:nowrap}
@media (max-width:640px){
  .lp-whatsapp-float{right:14px;bottom:14px;width:54px;height:54px;min-height:54px;padding:7px;border-radius:50%;justify-content:center}
  .lp-whatsapp-float-icon{width:40px;height:40px;background:transparent}
  .lp-whatsapp-float-label{display:none}
}
@media (prefers-reduced-motion:reduce){.lp-whatsapp-float{transition:none}.lp-whatsapp-float:hover{transform:none}}


/* ============================================================
   MOTION SYSTEM — Landing Page VSVitrine
   Entradas laterais/verticais + saída suave ao ultrapassar a viewport.
   ============================================================ */
:root{--motion-distance-x:58px;--motion-distance-y:34px;--motion-duration:.82s}

/* blur bem leve dá profundidade sem deixar a interface "embaçada" */
.reveal,.reveal-stagger>*,.reveal-toggle{
  will-change:transform,opacity,filter;
  filter:blur(5px);
  transition-property:opacity,transform,filter;
  transition-duration:var(--motion-duration);
  transition-timing-function:var(--ease);
}

.reveal.reveal-left{transform:translate3d(calc(var(--motion-distance-x) * -1),10px,0) scale(.985)}
.reveal.reveal-right{transform:translate3d(var(--motion-distance-x),10px,0) scale(.985)}
.reveal.reveal-up{transform:translate3d(0,var(--motion-distance-y),0) scale(.985)}
.reveal.reveal-scale{transform:translate3d(0,18px,0) scale(.94)}
.reveal.is-visible{filter:blur(0);transform:translate3d(0,0,0) scale(1)}

/* grids: cada card aparece de um lado diferente.
   :not(.is-visible):not(.is-exiting) garante que estas regras nunca disputem
   especificidade com o reset de ".reveal-stagger.is-visible>*" abaixo — sem o
   guard, o seletor com :nth-child tem especificidade maior e vence mesmo
   depois do card já ter "chegado", deixando-o deslocado para sempre (era o
   caso de .lp-personalize-stack e .lp-plans-grid, que não tinham patch). */
.reveal-stagger.reveal-mix:not(.is-visible):not(.is-exiting)>*:nth-child(3n+1){transform:translate3d(calc(var(--motion-distance-x) * -.72),18px,0) scale(.98)}
.reveal-stagger.reveal-mix:not(.is-visible):not(.is-exiting)>*:nth-child(3n+2){transform:translate3d(0,var(--motion-distance-y),0) scale(.98)}
.reveal-stagger.reveal-mix:not(.is-visible):not(.is-exiting)>*:nth-child(3n){transform:translate3d(calc(var(--motion-distance-x) * .72),18px,0) scale(.98)}
.reveal-stagger.reveal-split:not(.is-visible):not(.is-exiting)>*:nth-child(odd){transform:translate3d(calc(var(--motion-distance-x) * -.8),18px,0) scale(.985)}
.reveal-stagger.reveal-split:not(.is-visible):not(.is-exiting)>*:nth-child(even){transform:translate3d(calc(var(--motion-distance-x) * .8),18px,0) scale(.985)}
.reveal-stagger.reveal-left>*{transform:translate3d(calc(var(--motion-distance-x) * -1),10px,0) scale(.985)}
.reveal-stagger.reveal-right>*{transform:translate3d(var(--motion-distance-x),10px,0) scale(.985)}
.reveal-stagger.is-visible>*{filter:blur(0);transform:translate3d(0,0,0) scale(1)}

/* ao a seção passar do topo ela some para a direita; voltar a ela reanima */
.reveal.is-exiting{
  opacity:0;
  filter:blur(5px);
  transform:translate3d(76px,-8px,0) scale(.98);
  transition-duration:.56s;
}
.reveal-stagger.is-exiting>*{
  opacity:0;
  filter:blur(5px);
  transform:translate3d(70px,-6px,0) scale(.98);
  transition-duration:.5s;
  transition-delay:0s!important;
}

.reveal-toggle.reveal-left{transform:translate3d(calc(var(--motion-distance-x) * -1.12),12px,0) scale(.975)}
.reveal-toggle.reveal-right{transform:translate3d(calc(var(--motion-distance-x) * 1.12),12px,0) scale(.975)}
.reveal-toggle.reveal-scale{transform:translate3d(0,22px,0) scale(.93)}
.reveal-toggle.is-visible{filter:blur(0);transform:translate3d(0,0,0) scale(1)}
.reveal-toggle.is-visible.is-settled{
  opacity:.08;
  filter:blur(6px);
  transform:translate3d(86px,-6px,0) scale(.975);
  transition-duration:.52s;
}

/* Hero: cópia entra da esquerda e produto da direita com delays perceptíveis */
.lp-hero-copy.reveal-stagger>*{transition-duration:.9s}
.lp-hero-copy.reveal-stagger>*:nth-child(1){transition-delay:.04s}
.lp-hero-copy.reveal-stagger>*:nth-child(2){transition-delay:.13s}
.lp-hero-copy.reveal-stagger>*:nth-child(3){transition-delay:.22s}
.lp-hero-copy.reveal-stagger>*:nth-child(4){transition-delay:.31s}
.lp-hero-copy.reveal-stagger>*:nth-child(5){transition-delay:.4s}
.lp-hero-product.reveal-stagger{transition-delay:.18s}

/* Mantém a perspectiva final do mockup, mas agora ele realmente vem da direita */
.lp-hero-product.reveal-stagger>.lp-product-frame{
  filter:blur(5px);
  transform:perspective(1200px) rotateY(-12deg) rotateX(5deg) translate3d(72px,20px,0) scale(.97);
}
.lp-hero-product.reveal-stagger.is-visible>.lp-product-frame{
  filter:blur(0);
  transform:perspective(1200px) rotateY(-4deg) rotateX(2deg) translate3d(0,0,0) scale(1);
}

/* glow acompanha o hero sem chamar mais atenção do que o produto */
@keyframes lpGlowBreath{0%,100%{opacity:.65;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.lp-hero-glow{animation:lpGlowBreath 7s ease-in-out infinite}

/* cards ganham uma pequena resposta após terminar a entrada */
.lp-feature-card,.lp-three-value article,.lp-step,.lp-personalize-stack>div{
  backface-visibility:hidden;
}

@media(max-width:700px){
  :root{--motion-distance-x:28px;--motion-distance-y:24px;--motion-duration:.68s}
  .reveal.is-exiting{transform:translate3d(34px,-4px,0) scale(.99)}
  .reveal-stagger.is-exiting>*{transform:translate3d(30px,-4px,0) scale(.99)}
  .reveal-toggle.is-visible.is-settled{transform:translate3d(36px,-4px,0) scale(.985)}
  /* no mobile o mockup não inclina, mas ainda entra lateralmente */
  .lp-hero-product.reveal-stagger>.lp-product-frame{transform:translate3d(30px,12px,0) scale(.98)}
  .lp-hero-product.reveal-stagger.is-visible>.lp-product-frame{transform:translate3d(0,0,0) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .lp-hero-glow{animation:none!important}
  .reveal,.reveal-stagger>*,.reveal-toggle,
  .reveal.is-exiting,.reveal-stagger.is-exiting>*{
    opacity:1!important;filter:none!important;transform:none!important;transition:none!important
  }
}

/* ============================================================
   Como funciona — alinhamento dos 5 passos
   Escopo intencionalmente limitado a #como-funciona.
   ============================================================ */
#como-funciona .lp-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(24px,3vw,56px);
  align-items:start;
}
#como-funciona .lp-step{
  width:100%;
  min-width:0;
  margin:0;
  padding-top:22px;
  align-self:start;
  border-top:1px solid var(--line2);
}
#como-funciona .lp-step-n{
  margin:0 0 16px 0;
}
#como-funciona .lp-step b{
  display:block;
  min-height:42px;
  margin:0;
  line-height:1.45;
}
#como-funciona .lp-step p{
  margin:5px 0 0;
  line-height:1.65;
}
/* A animação pode deslocar durante a entrada, mas todos terminam na mesma base. */
#como-funciona .lp-steps.is-visible>.lp-step{
  transform:translate3d(0,0,0) scale(1);
}
@media(max-width:1050px){
  #como-funciona .lp-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
}
@media(max-width:700px){
  #como-funciona .lp-steps{grid-template-columns:1fr;gap:26px}
  #como-funciona .lp-step b{min-height:0}
}

/* ============================================================
   LP — NORMALIZAÇÃO GLOBAL DE ALINHAMENTO
   Mantém conteúdo/animações; corrige alturas, eixos e ritmo visual.
   ============================================================ */
.lp-section > .lp-container,
.lp-proof-strip > .lp-container,
.lp-trial-spot > .lp-container,
.lp-final-cta > .lp-container{
  position:relative;
}

/* Cabeçalhos de seção sempre no mesmo eixo e com ritmo consistente */
.lp-section-head{
  width:min(100%,780px);
  margin-left:auto;
  margin-right:auto;
}
.lp-section-head h2{margin-inline:auto}
.lp-section-head .lp-section-sub{max-width:680px;margin-left:auto;margin-right:auto}

/* Hero: impede que um lado pareça "caído" em relação ao outro */
.lp-hero-grid{align-items:center}
.lp-hero-copy{align-self:center}
.lp-hero-product{align-self:center;width:100%}

/* Faixa de prova: todas as células com mesma altura e conteúdo alinhado */
.lp-proof-grid{align-items:stretch}
.lp-proof-grid>div{display:flex;flex-direction:column;justify-content:center;min-height:92px}

/* Bloco de 3 valores */
.lp-three-value{align-items:stretch;grid-auto-rows:1fr}
.lp-three-value article{height:100%;display:flex;flex-direction:column}
.lp-three-value article h3{margin-top:28px}
.lp-three-value article p{margin-top:auto;padding-top:2px}

/* Showcase painel */
.lp-showcase-grid{align-items:center}
.lp-showcase-copy,.lp-real-shot{min-width:0}
.lp-real-shot{width:100%}

/* Recursos: cards iguais, títulos e descrições alinhados */
.lp-features-grid{align-items:stretch;grid-auto-rows:1fr}
.lp-feature-card{height:100%;display:flex;flex-direction:column}
.lp-feature-card b{min-height:44px;display:flex;align-items:flex-end}
.lp-feature-card span{display:block}

/* Personalização: evita cards de alturas aleatórias */
.lp-personalize-grid{align-items:center}
.lp-personalize-stack{align-items:stretch;grid-auto-rows:1fr}
.lp-personalize-stack>div{height:100%;display:flex;flex-direction:column;justify-content:center;min-height:104px}

/* Como funciona */
#como-funciona .lp-steps{align-items:stretch}
#como-funciona .lp-step{height:100%;display:flex;flex-direction:column}
#como-funciona .lp-step p{margin-top:auto;padding-top:6px}

/* Trial: CTA não flutua verticalmente conforme o texto muda */
.lp-trial-inner>div:first-child{max-width:760px}
.lp-trial-inner>.lp-btn{flex:0 0 auto}

/* Planos: remove o scale permanente que fazia um card parecer desalinhado */
.lp-plans-grid{align-items:stretch;grid-auto-rows:1fr}
.lp-plan-card{height:100%;display:flex;flex-direction:column}
.lp-plan-card .lp-check-list{flex:1}
.lp-plan-card.is-highlight{transform:none}
.lp-plan-card.is-highlight:hover{transform:translateY(-4px)}
.lp-plan-head{min-height:116px}

/* FAQ: mantém os dois lados começando exatamente no topo */
.lp-faq-layout{align-items:start}
.lp-faq-layout>div{min-width:0}

/* CTA final */
.lp-final-box>div:first-child{max-width:780px}
.lp-final-actions{flex:0 0 230px}

/* Footer */
.lp-footer-grid{align-items:start}

@media(max-width:1050px){
  .lp-showcase-grid,.lp-personalize-grid,.lp-faq-layout{align-items:start}
  .lp-features-grid{grid-auto-rows:1fr}
  .lp-plan-head{min-height:0}
  .lp-final-actions{flex-basis:auto}
}

@media(max-width:700px){
  /* No mobile, alturas artificiais deixam de fazer sentido */
  .lp-feature-card b,#como-funciona .lp-step b{min-height:0}
  .lp-personalize-stack>div,.lp-proof-grid>div{min-height:0}
  .lp-three-value article p,#como-funciona .lp-step p{margin-top:0}
  .lp-final-actions{width:100%}
}

/* === VSVITRINE: alinhamento da seção "É a vitrine digital..." === */
section[data-aligned-three="true"] .process-grid,
section[data-aligned-three="true"] .steps-grid,
section[data-aligned-three="true"] .benefit-grid,
section[data-aligned-three="true"] .feature-grid,
section[data-aligned-three="true"] .cards-grid {
  align-items: stretch !important;
}

section[data-aligned-three="true"] .process-grid > *,
section[data-aligned-three="true"] .steps-grid > *,
section[data-aligned-three="true"] .benefit-grid > *,
section[data-aligned-three="true"] .feature-grid > *,
section[data-aligned-three="true"] .cards-grid > * {
  align-self: stretch !important;
  margin-top: 0 !important;
  top: auto !important;
}

/* A animação continua existindo, mas não deixa o card central parado mais baixo. */
section[data-aligned-three="true"] .reveal,
section[data-aligned-three="true"] .reveal-left,
section[data-aligned-three="true"] .reveal-right,
section[data-aligned-three="true"] .reveal-up,
section[data-aligned-three="true"] .reveal-mix {
  --section-final-y: 0px;
}

section[data-aligned-three="true"] .reveal.is-visible,
section[data-aligned-three="true"] .reveal-left.is-visible,
section[data-aligned-three="true"] .reveal-right.is-visible,
section[data-aligned-three="true"] .reveal-up.is-visible,
section[data-aligned-three="true"] .reveal-mix.is-visible,
section[data-aligned-three="true"] .reveal.visible,
section[data-aligned-three="true"] .reveal-left.visible,
section[data-aligned-three="true"] .reveal-right.visible,
section[data-aligned-three="true"] .reveal-up.visible,
section[data-aligned-three="true"] .reveal-mix.visible {
  transform: translate3d(0,0,0) !important;
}

/* Desktop: três cards perfeitamente alinhados */
@media (min-width: 901px) {
  section[data-aligned-three="true"] .process-grid,
  section[data-aligned-three="true"] .steps-grid,
  section[data-aligned-three="true"] .benefit-grid,
  section[data-aligned-three="true"] .feature-grid,
  section[data-aligned-three="true"] .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }

  section[data-aligned-three="true"] .process-grid > *,
  section[data-aligned-three="true"] .steps-grid > *,
  section[data-aligned-three="true"] .benefit-grid > *,
  section[data-aligned-three="true"] .feature-grid > *,
  section[data-aligned-three="true"] .cards-grid > * {
    min-height: 180px;
    height: 100%;
  }
}


/* === VSVITRINE: alinhamento definitivo dos 3 cards da seção Produto === */
section[data-aligned-three="true"] .lp-three-value {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 2rem !important;
}

section[data-aligned-three="true"] .lp-three-value > article {
  height: 100% !important;
  min-height: 180px;
  margin-top: 0 !important;
  top: auto !important;
  align-self: stretch !important;
  transform: none;
}

/* Durante o estado final da animação, nenhum card permanece mais baixo. */
section[data-aligned-three="true"] .lp-three-value.is-visible > article,
section[data-aligned-three="true"] .lp-three-value.visible > article,
section[data-aligned-three="true"] .lp-three-value.revealed > article {
  transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 900px) {
  section[data-aligned-three="true"] .lp-three-value {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  section[data-aligned-three="true"] .lp-three-value > article {
    min-height: 0;
  }
}


/* === FIX DEFINITIVO: grade de Recursos === */
.lp-features-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

.lp-features-grid > .lp-feature-card {
  margin: 0 !important;
  top: auto !important;
  bottom: auto !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 200px !important;
  transform: translate3d(0, 0, 0);
}

/* Mantém a entrada animada, mas todos terminam exatamente na mesma posição */
.lp-features-grid.reveal-stagger.is-visible > .lp-feature-card {
  transform: translate3d(0, 0, 0) !important;
}

/* Remove qualquer deslocamento individual herdado */
.lp-features-grid > .lp-feature-card:nth-child(1),
.lp-features-grid > .lp-feature-card:nth-child(2),
.lp-features-grid > .lp-feature-card:nth-child(3),
.lp-features-grid > .lp-feature-card:nth-child(4),
.lp-features-grid > .lp-feature-card:nth-child(5),
.lp-features-grid > .lp-feature-card:nth-child(6) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  top: 0 !important;
}

/* Conteúdo interno alinhado igualmente */
.lp-feature-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.lp-feature-card .lp-icon-wrap {
  margin-bottom: 36px !important;
}

.lp-feature-card b {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .lp-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .lp-features-grid {
    grid-template-columns: 1fr !important;
  }

  .lp-features-grid > .lp-feature-card {
    min-height: 0 !important;
  }
}


/* === VSVITRINE: scroll reveal mais natural === */
.reveal,
.reveal-stagger > *,
.reveal-toggle {
  will-change: transform, opacity;
}

@media (min-width: 701px) {
  .reveal:not(.is-visible) {
    opacity: 0;
    transform: translate3d(-24px, 14px, 0);
  }

  .reveal-stagger:not(.is-visible) > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }

  .reveal-toggle:not(.is-visible) {
    opacity: 0;
    transform: translate3d(30px, 16px, 0) scale(.985);
  }
}

/* No mobile, distâncias menores para evitar sensação brusca. */
@media (max-width: 700px) {
  .reveal:not(.is-visible),
  .reveal-stagger:not(.is-visible) > *,
  .reveal-toggle:not(.is-visible) {
    transform: translate3d(0, 14px, 0);
  }
}

/* === VSVITRINE RESPONSIVE AUDIT 2026-08-18 ===
   Camada final de responsividade após revisão de toda a LP.
   Objetivos: zero overflow, grids fluidos, tablet com layout próprio e
   animações sem deslocar conteúdo para fora da viewport. */

/* Proteções globais para grids/flex e textos longos. */
.lp-hero-grid > *,
.lp-showcase-grid > *,
.lp-personalize-grid > *,
.lp-faq-layout > *,
.lp-trial-inner > *,
.lp-final-box > *,
.lp-plans-grid > *,
.lp-personalize-stack > *,
.lp-features-grid > *,
.lp-three-value > *,
.lp-steps > * { min-width: 0; }

.lp-plan-card,
.lp-check-list li,
.lp-feature-card,
.lp-personalize-stack > div,
.lp-faq-q,
.lp-footer { overflow-wrap: anywhere; }

/* O mockup passa a participar do fluxo quando a LP vira uma coluna.
   Evita sobreposição com a faixa seguinte em tablets, onde a imagem pode
   ficar mais alta do que o antigo min-height fixo de 430px. */
@media (max-width: 1050px) {
  .lp-container { width: min(var(--container), calc(100% - 32px)); }

  .lp-hero-grid { gap: 42px; }
  .lp-hero-product { min-height: 0; height: auto; }
  .lp-product-frame {
    position: relative;
    inset: auto;
    width: min(100%, 900px);
    margin: 0 auto;
  }

  .lp-floating-one { left: 12px; bottom: 28px; }
  .lp-floating-two { right: 12px; bottom: 28px; }

  .lp-showcase-grid,
  .lp-personalize-grid,
  .lp-faq-layout { gap: 42px; }
}

/* Planos: duas colunas realmente fluidas no desktop, sem largura mínima
   combinada maior do que o container. */
.lp-plans-grid {
  width: min(100%, 820px);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-plan-card { min-width: 0; }
.lp-plan-card .lp-btn { max-width: 100%; }

/* A seção de personalização nunca pode expandir além da coluna reservada. */
.lp-personalize-stack {
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lp-personalize-stack > div { width: 100%; }

/* FAQ: evita o símbolo + disputar largura com perguntas maiores. */
.lp-faq-q { gap: 14px; }
.lp-faq-q > span { flex: 0 0 auto; }


/* Em qualquer layout que já usa menu hambúrguer, o WhatsApp fica circular.
   Isso evita sobrepor CTAs de planos, trial e CTA final em tablets. */
@media (max-width: 1050px) {
  .lp-whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 8px;
    border-radius: 50%;
    justify-content: center;
  }
  .lp-whatsapp-float-icon {
    width: 40px;
    height: 40px;
    background: transparent;
  }
  .lp-whatsapp-float-label { display: none; }
}

/* Tablets e notebooks estreitos: não espremer conteúdos largos em duas
   colunas. Esta faixa cobre justamente 768/820/834/868/900px. */
@media (max-width: 900px) {
  .lp-section { padding-block: 82px; }

  .lp-plans-grid {
    grid-template-columns: 1fr;
    width: min(100%, 560px);
    gap: 18px;
  }

  .lp-trial-inner,
  .lp-final-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .lp-trial-inner > .lp-btn,
  .lp-final-actions {
    width: 100%;
  }
  .lp-trial-inner > .lp-btn,
  .lp-final-actions .lp-btn { width: 100%; }

  /* Cards do Produto: uma coluna no tablet para preservar leitura. */
  section[data-aligned-three="true"] .lp-three-value {
    grid-template-columns: 1fr !important;
    width: min(100%, 620px);
    margin-inline: auto;
  }

  /* Personalização mantém 2x2 no tablet, mas sem qualquer translate lateral. */
  .lp-personalize-stack { gap: 14px; }
}

/* Transições de cards são verticais. Assim a animação não cria conteúdo
   visualmente cortado na esquerda/direita antes do IntersectionObserver. */
/* Somente os grids de cards usam o stagger vertical forçado; o hero mantém
   sua perspectiva/entrada 3D própria. */
:is(.lp-three-value, .lp-features-grid, .lp-steps, .lp-personalize-stack, .lp-plans-grid).reveal-stagger:not(.is-visible):not(.is-exiting) > * {
  transform: translate3d(0, 22px, 0) scale(.99) !important;
}
:is(.lp-three-value, .lp-features-grid, .lp-steps, .lp-personalize-stack, .lp-plans-grid).reveal-stagger.is-visible > * {
  transform: translate3d(0, 0, 0) scale(1) !important;
}
:is(.lp-three-value, .lp-features-grid, .lp-steps, .lp-personalize-stack, .lp-plans-grid).reveal-stagger.is-exiting > * {
  transform: translate3d(0, -10px, 0) scale(.99) !important;
}

/* Saída de blocos inteiros também fica vertical; mantém o efeito sem gerar
   cortes laterais em telas estreitas. */
.reveal.is-exiting {
  transform: translate3d(0, -10px, 0) scale(.99);
}
.reveal-toggle.is-visible.is-settled {
  transform: translate3d(0, -8px, 0) scale(.985);
}

@media (max-width: 700px) {
  .lp-container { width: min(var(--container), calc(100% - 28px)); }
  .lp-section { padding-block: 68px; }
  .lp-hero { padding: 106px 0 64px; }
  .lp-hero-grid { gap: 30px; }
  .lp-hero h1 { font-size: clamp(34px, 10vw, 38px); }
  .lp-hero-sub { font-size: 15px; }

  .lp-product-frame { width: 100%; margin: 0; }
  .lp-hero-product { min-height: 0; }

  .lp-personalize-stack { grid-template-columns: 1fr; }
  .lp-showcase-grid,
  .lp-personalize-grid,
  .lp-faq-layout { gap: 32px; }

  .lp-plan-card { padding: 26px 24px; }
  .lp-feature-card { padding: 23px; }
  .lp-feature-card .lp-icon-wrap { margin-bottom: 18px !important; }

  .lp-trial-inner,
  .lp-final-box { padding: 28px 22px; }
  .lp-trial-inner h2 { font-size: clamp(25px, 7vw, 32px); }

  .lp-faq-q { padding: 17px 18px; }
  .lp-faq-a p { padding: 0 18px 17px; }

  .lp-footer-grid { gap: 28px; }
}

@media (max-width: 500px) {
  .lp-header-inner { gap: 12px; }
  .lp-logo span { font-size: 20px; }
  .lp-hamburger { width: 44px; height: 44px; }
  .lp-hamburger span { width: 22px; }

  .lp-section-head h2,
  .lp-showcase-copy h2,
  .lp-personalize-grid h2,
  .lp-faq-layout h2 { font-size: clamp(28px, 8.4vw, 32px); }

  .lp-section-sub,
  .lp-copy-muted { font-size: 14px; }
  .lp-three-value article { padding: 25px 22px; }

  .lp-plan-highlight {
    position: static;
    align-self: flex-start;
    margin-bottom: 12px;
  }
  .lp-plan-price { font-size: 28px; }

  .lp-final-cta { padding-block: 68px; }
  .lp-footer-bottom {
    flex-direction: column;
    gap: 8px;
    padding-bottom: 82px;
  }
}

@media (max-width: 360px) {
  .lp-container { width: calc(100% - 24px); }
  .lp-kicker { font-size: 10px; letter-spacing: .055em; }
  .lp-hero h1 { font-size: 32px; }
  .lp-btn-lg { padding: 14px 17px; font-size: 14px; }
  .lp-plan-card { padding: 23px 20px; }
  .lp-trial-inner,
  .lp-final-box { padding: 25px 19px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px) {
  .lp-mobile-menu {
    max-height: calc(100dvh - 58px);
    padding-bottom: 14px;
  }
  .lp-mobile-menu a { padding-block: 10px; }
  .lp-hero { padding-top: 94px; }
}


/* === Motion safe-area: anima sem criar largura extra na página === */
.reveal {
  transform: translate3d(0, 18px, 0) scale(.99) !important;
}
.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
}
.reveal.is-exiting {
  transform: translate3d(0, -10px, 0) scale(.99) !important;
}
.reveal-toggle {
  transform: translate3d(0, 20px, 0) scale(.985) !important;
}
.reveal-toggle.is-visible {
  transform: translate3d(0, 0, 0) scale(1) !important;
}
.reveal-toggle.is-visible.is-settled {
  transform: translate3d(0, -8px, 0) scale(.985) !important;
}

/* Hero: mantém profundidade no desktop, mas dentro da área útil. */
@media (min-width: 1051px) {
  .lp-product-frame {
    width: 90%;
    right: 2%;
  }
  .lp-hero-product.reveal-stagger > .lp-product-frame {
    transform: perspective(1400px) rotateY(-7deg) rotateX(3deg) translate3d(24px, 14px, 0) scale(.985);
  }
  .lp-hero-product.reveal-stagger.is-visible > .lp-product-frame {
    transform: perspective(1400px) rotateY(-2deg) rotateX(1deg) translate3d(0, 0, 0) scale(1);
  }
  .lp-floating-two { right: 0; }
}

/* Em tablet/celular o mockup não usa perspectiva, porque ela amplia o
   bounding-box e era a principal fonte de corte lateral. */
@media (max-width: 1050px) {
  .lp-hero-product.reveal-stagger > .lp-product-frame {
    transform: translate3d(0, 16px, 0) scale(.99);
  }
  .lp-hero-product.reveal-stagger.is-visible > .lp-product-frame {
    transform: translate3d(0, 0, 0) scale(1);
  }
}