/* ===========================================================
   NEX Marketing — Presença Digital para Saúde
   Light, clean, medical-grade design system
   =========================================================== */
:root{
  --bg:        #F4F2FB;
  --bg-2:      #ECE8FA;
  --surface:   #FFFFFF;
  --ink:       #14111F;
  --ink-soft:  #2A2640;
  --muted:     #6B6782;
  --muted-2:   #908CA6;
  --line:      rgba(20,17,31,.10);
  --line-2:    rgba(20,17,31,.06);

  --roxo:      #5400FF;
  --violeta:   #7A11FF;
  --lilas:     #A855F7;
  --roxo-soft: #EEE8FF;
  --roxo-tint: #F3EEFF;

  --wpp:       #25D366;
  --wpp-deep:  #128C7E;

  --grad: linear-gradient(120deg, var(--roxo) 0%, var(--violeta) 52%, var(--lilas) 100%);
  --shadow-sm: 0 2px 10px rgba(20,17,31,.05);
  --shadow:    0 16px 44px rgba(64,30,140,.12);
  --shadow-lg: 0 32px 80px rgba(64,30,140,.18);
  --radius:    20px;
  --radius-sm: 14px;
  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 60px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; max-width:100%; }
body{
  font-family:'Montserrat', system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px,9vw,120px); position:relative; }
.center{ text-align:center; }

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--roxo); background:var(--roxo-tint);
  padding:8px 15px; border-radius:999px; border:1px solid var(--line-2);
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--grad); }
h1,h2,h3{ line-height:1.1; letter-spacing:-.02em; font-weight:800; color:var(--ink); text-wrap:balance; }
.h-display{ font-size:clamp(2.1rem,5.4vw,4rem); }
.h-1{ font-size:clamp(1.7rem,3.8vw,2.8rem); }
.h-2{ font-size:clamp(1.25rem,2vw,1.6rem); }
.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--muted); text-wrap:pretty; }
.grad-txt{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.sec-head{ max-width:720px; margin:0 auto clamp(40px,5vw,64px); }
.sec-head.left{ margin-inline:0; }
.sec-head p{ margin-top:16px; }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:700; font-size:.98rem; padding:15px 26px; border-radius:999px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; white-space:nowrap; }
.btn svg{ width:19px; height:19px; }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:0 12px 30px rgba(84,0,255,.30); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(84,0,255,.42); }
.btn-wpp{ background:var(--wpp); color:#06351f; box-shadow:0 12px 30px rgba(37,211,102,.32); }
.btn-wpp:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(37,211,102,.45); }
.btn-ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ transform:translateY(-3px); border-color:var(--roxo); color:var(--roxo); }
.btn-lg{ padding:18px 32px; font-size:1.05rem; }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:200;
  background:rgba(244,242,251,.82); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line-2); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }
.nav>*{ flex:0 0 auto; }
.brand{ display:inline-flex; align-items:center; gap:11px; font-family:'Manrope',sans-serif; }
.brand .mark{ height:32px; width:auto; }
.brand .word{ font-weight:800; letter-spacing:.2em; font-size:1.24rem; color:var(--ink); padding-left:.05em; }
.brand .div{ width:1.5px; height:24px; background:var(--grad); border-radius:2px; opacity:.85; }
.brand .tag{ font-weight:600; font-size:.56rem; line-height:1.12; letter-spacing:.02em; color:var(--muted); }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:.92rem; font-weight:600; color:var(--ink-soft); white-space:nowrap; transition:color .2s; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--grad); border-radius:2px; transition:width .3s var(--ease); }
.nav-links a:hover{ color:var(--roxo); } .nav-links a:hover::after{ width:100%; }
.menu-btn{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); position:relative; background:var(--surface); }
.menu-btn span{ position:absolute; left:12px; right:12px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.menu-btn span:nth-child(1){ top:16px; } .menu-btn span:nth-child(2){ top:21px; } .menu-btn span:nth-child(3){ top:26px; }
body.nav-open .menu-btn span:nth-child(1){ top:21px; transform:rotate(45deg); }
body.nav-open .menu-btn span:nth-child(2){ opacity:0; }
body.nav-open .menu-btn span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,96px); }
.hero::before{ content:""; position:absolute; width:680px; height:680px; right:-160px; top:-220px;
  background:radial-gradient(circle, rgba(122,17,255,.16), transparent 65%); pointer-events:none; }
.hero::after{ content:""; position:absolute; width:520px; height:520px; left:-200px; bottom:-220px;
  background:radial-gradient(circle, rgba(168,85,247,.12), transparent 65%); pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; position:relative; z-index:1; }
.hero h1{ margin-top:22px; }
.hero .lead{ margin-top:22px; max-width:34ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:30px; color:var(--muted); font-size:.9rem; font-weight:600; }
.hero-trust .dot{ width:5px; height:5px; border-radius:50%; background:var(--lilas); }
.hero-trust b{ color:var(--ink); }

/* hero mockup */
.hero-photo{ width:100%; height:auto; border-radius:22px; box-shadow:var(--shadow-lg); }
.mockup{ position:relative; }
.browser{ background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; }
.browser-bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line-2); }
.browser-bar i{ width:11px; height:11px; border-radius:50%; background:#E3DEF2; display:block; }
.browser-bar .addr{ flex:1; margin-left:10px; height:24px; border-radius:7px; background:var(--bg-2); display:flex; align-items:center; padding:0 12px; font-size:.72rem; color:var(--muted-2); font-weight:600; }
.browser .shot{ aspect-ratio:16/11; }
.browser .shot image-slot{ width:100%; height:100%; display:block; }
.float-card{ position:absolute; display:flex; align-items:center; gap:11px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:12px 15px; box-shadow:var(--shadow); }
.float-card .ic{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--roxo-tint); color:var(--roxo); flex:0 0 38px; }
.float-card .ic svg{ width:20px; height:20px; }
.float-card small{ display:block; color:var(--muted-2); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.float-card b{ font-size:.92rem; color:var(--ink); }
.fc-1{ top:7%; left:-5%; } .fc-2{ bottom:8%; right:-4%; }
.stars{ color:#FFB020; letter-spacing:1px; font-size:.82rem; }

/* ---------- Generic cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.ico-badge{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:var(--roxo-tint); color:var(--roxo); }
.ico-badge svg{ width:26px; height:26px; }

/* ---------- Dor (problem) ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pain{ padding:30px 26px; transition:transform .3s var(--ease), box-shadow .3s; }
.pain:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.pain .ico-badge{ background:#FCEFEF; color:#E0556B; margin-bottom:20px; }
.pain h3{ font-size:1.08rem; margin-bottom:8px; }
.pain p{ color:var(--muted); font-size:.94rem; }

/* ---------- Virada (antes x depois) ---------- */
.virada{ background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
.virada-quote{ max-width:880px; margin:0 auto clamp(40px,5vw,60px); text-align:center; }
.virada-quote p{ font-size:clamp(1.4rem,2.6vw,2rem); font-weight:700; line-height:1.3; color:var(--ink); text-wrap:balance; }
.ba-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; }
.ba{ padding:34px 30px; border-radius:var(--radius); }
.ba h3{ display:flex; align-items:center; gap:10px; font-size:1.1rem; margin-bottom:20px; }
.ba ul{ list-style:none; display:grid; gap:14px; }
.ba li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; font-weight:500; }
.ba li svg{ width:20px; height:20px; flex:0 0 20px; margin-top:2px; }
.ba-before{ background:var(--surface); border:1px solid var(--line); color:var(--muted); }
.ba-before h3{ color:var(--ink-soft); }
.ba-before li svg{ color:#C0566B; }
.ba-after{ background:var(--ink); color:#D9D5EA; position:relative; overflow:hidden; }
.ba-after::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 80% 0%, rgba(122,17,255,.35), transparent 60%); }
.ba-after h3{ color:#fff; position:relative; }
.ba-after ul{ position:relative; } .ba-after li{ color:#E7E3F5; }
.ba-after li svg{ color:#9D6BFF; }
.ba-arrow{ display:grid; place-items:center; color:var(--roxo); }
.ba-arrow svg{ width:42px; height:42px; }

/* ---------- Produtos ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.prod{ padding:34px 32px; display:flex; gap:22px; align-items:flex-start; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; position:relative; }
.prod:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(84,0,255,.25); }
.prod .ico-badge{ flex:0 0 54px; }
.prod h3{ font-size:1.18rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.prod p{ color:var(--muted); margin-top:8px; font-size:.96rem; }
.tag-new{ font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--grad); padding:4px 9px; border-radius:999px; }

/* ---------- Árvore da entrega ---------- */
.tree{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(30px,4vw,52px); }
.tree-top{ display:flex; justify-content:center; }
.tree-node{ border-radius:14px; padding:16px 24px; font-weight:700; text-align:center; }
.tree-root{ background:var(--grad); color:#fff; font-size:1.1rem; box-shadow:0 14px 30px rgba(84,0,255,.3); display:inline-flex; align-items:center; gap:12px; }
.tree-root svg{ width:24px; height:24px; }
.tree-connector{ height:34px; width:2px; background:var(--line); margin:0 auto; }
.tree-branches{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
.tree-branches::before{ content:""; position:absolute; top:-18px; left:12.5%; right:12.5%; height:2px; background:var(--line); }
.tree-branch{ position:relative; }
.tree-branch::before{ content:""; position:absolute; top:-18px; left:50%; width:2px; height:18px; background:var(--line); }
.tree-prod{ background:var(--roxo-tint); border:1px solid rgba(84,0,255,.14); color:var(--ink); font-size:.92rem; min-height:84px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px 12px; }
.tree-prod svg{ width:24px; height:24px; color:var(--roxo); }
.tree-result{ margin-top:0; }
.tree-result-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tree-out{ display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line-2); border-radius:14px; padding:16px 18px; font-weight:600; font-size:.95rem; }
.tree-out .ico-badge{ width:42px; height:42px; flex:0 0 42px; border-radius:11px; background:#E9FBF1; color:#169b5f; }
.tree-out .ico-badge svg{ width:20px; height:20px; }

/* ---------- Portfólio ao vivo ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px; }
.tab{ padding:11px 22px; border-radius:999px; font-weight:700; font-size:.92rem; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); transition:all .25s var(--ease); }
.tab:hover{ border-color:var(--roxo); color:var(--roxo); }
.tab.active{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(84,0,255,.28); }
.tab.placeholder{ font-style:italic; opacity:.7; }
.laptop{ max-width:980px; margin:0 auto; }
.laptop-screen{ background:#0c0a16; border:14px solid #1a1726; border-radius:22px 22px 6px 6px; box-shadow:var(--shadow-lg); overflow:hidden; position:relative; }
.laptop-bar{ display:flex; align-items:center; gap:8px; padding:11px 16px; background:#15121f; }
.laptop-bar i{ width:11px; height:11px; border-radius:50%; background:#3a3550; }
.laptop-bar .addr{ flex:1; margin-left:8px; height:24px; border-radius:6px; background:#241f33; color:#9b95b5; font-size:.74rem; font-weight:600; display:flex; align-items:center; padding:0 12px; gap:8px; }
.frame-wrap{ position:relative; aspect-ratio:16/10; background:#fff; }
.frame-wrap iframe{ width:100%; height:100%; border:0; display:block; }
.frame-fallback{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:30px;
  background:linear-gradient(160deg,#15121f,#221b35); color:#E7E3F5; }
.frame-wrap.blocked .frame-fallback{ display:flex; }
/* poster (click-to-load) */
.frame-poster{ position:absolute; inset:0; overflow:hidden; }
.poster-shot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.poster-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:linear-gradient(160deg, rgba(15,13,28,.78), rgba(34,27,53,.82)); backdrop-filter:blur(1px); text-align:center; padding:24px; }
.poster-play{ display:inline-flex; align-items:center; gap:14px; background:rgba(255,255,255,.96); border-radius:16px; padding:14px 22px 14px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,.4); transition:transform .25s var(--ease), box-shadow .25s; }
.poster-play:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 26px 60px rgba(84,0,255,.4); }
.poster-play-ic{ width:48px; height:48px; border-radius:12px; background:var(--grad); color:#fff; display:grid; place-items:center; flex:0 0 48px; }
.poster-play-ic svg{ width:24px; height:24px; }
.poster-play-txt{ text-align:left; line-height:1.2; }
.poster-play-txt b{ display:block; color:var(--ink); font-size:1.02rem; }
.poster-play-txt small{ color:var(--muted); font-size:.82rem; }
.poster-hint{ color:rgba(255,255,255,.82); font-size:.86rem; font-weight:600; max-width:34ch; }
.frame-wrap.loaded .frame-poster{ display:none; }
.frame-wrap.blocked .frame-poster{ display:none; }
.frame-fallback .ic{ width:62px; height:62px; border-radius:16px; background:rgba(168,85,247,.18); color:#b98bff; display:grid; place-items:center; }
.frame-fallback .ic svg{ width:30px; height:30px; }
.laptop-base{ height:16px; background:linear-gradient(180deg,#1a1726,#0f0d18); border-radius:0 0 16px 16px; max-width:1040px; margin:0 auto;
  position:relative; width:106%; left:-3%; }
.laptop-note{ text-align:center; color:var(--muted); font-size:.86rem; margin-top:26px; }

/* ---------- Oferta ---------- */
.oferta{ background:var(--ink); color:#E7E3F5; position:relative; overflow:hidden; }
.oferta::before{ content:""; position:absolute; width:600px; height:600px; right:-180px; top:-200px; background:radial-gradient(circle, rgba(122,17,255,.4), transparent 64%); }
.oferta .eyebrow{ background:rgba(168,85,247,.16); color:#c8a6ff; border-color:rgba(168,85,247,.2); }
.oferta h2{ color:#fff; }
.oferta-card{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; border-radius:24px; overflow:hidden;
  border:1px solid rgba(168,85,247,.2); position:relative; z-index:1; box-shadow:var(--shadow-lg); }
.oferta-left{ background:linear-gradient(170deg,#19142a,#120e20); padding:clamp(34px,4vw,52px); }
.oferta-incl{ list-style:none; display:grid; gap:16px; margin-top:26px; }
.oferta-incl li{ display:flex; gap:13px; align-items:flex-start; font-weight:600; font-size:1rem; color:#EDEAF7; }
.oferta-incl li svg{ width:23px; height:23px; flex:0 0 23px; color:#9D6BFF; margin-top:1px; }
.oferta-incl small{ display:block; font-weight:500; color:var(--muted-2); font-size:.84rem; margin-top:2px; }
.oferta-right{ background:var(--surface); color:var(--ink); padding:clamp(34px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.price-label{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.price-main{ font-size:clamp(2.6rem,5vw,3.6rem); font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1; margin-top:8px; }
.price-main small{ font-size:1.3rem; font-weight:700; color:var(--muted); }
.price-or{ display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--muted); font-weight:600; font-size:.86rem; }
.price-or::before,.price-or::after{ content:""; height:1px; flex:1; background:var(--line); }
.price-split{ font-size:1.5rem; font-weight:800; color:var(--roxo); }
.price-split small{ font-size:.95rem; color:var(--muted); font-weight:600; }
.oferta-right .btn{ margin-top:30px; width:100%; }
.oferta-right .note{ text-align:center; margin-top:14px; font-size:.82rem; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:7px; }
.oferta-right .note svg{ width:15px; height:15px; }

/* ---------- CTA final ---------- */
.cta-final{ text-align:center; }
.cta-final .inner{ background:var(--grad); border-radius:28px; padding:clamp(44px,6vw,80px) var(--pad); color:#fff; position:relative; overflow:hidden; }
.cta-final h2{ color:#fff; max-width:18ch; margin:0 auto; }
.cta-final p{ color:rgba(255,255,255,.9); max-width:46ch; margin:18px auto 0; }
.cta-final .btn-wpp{ margin-top:32px; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#B7B2CC; padding-block:clamp(48px,6vw,72px) 30px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; }
.footer .brand .word{ color:#fff; } .footer .brand .tag{ color:var(--muted-2); }
.footer .brand .mark{ filter:none; }
.footer-blurb{ margin-top:18px; max-width:34ch; line-height:1.6; font-size:.94rem; color:var(--muted-2); }
.footer h4{ color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; }
.footer ul{ list-style:none; display:grid; gap:11px; }
.footer a:hover{ color:#fff; }
.footer-info{ display:grid; gap:12px; font-size:.94rem; }
.footer-info .row{ display:flex; gap:11px; align-items:center; }
.footer-info .row svg{ width:18px; height:18px; color:var(--lilas); flex:0 0 18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); margin-top:46px; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.84rem; color:var(--muted-2); }

/* ---------- WhatsApp float ---------- */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:300; width:62px; height:62px; border-radius:50%;
  background:var(--wpp); display:grid; place-items:center; box-shadow:0 14px 36px rgba(37,211,102,.5); }
.wa-float svg{ width:34px; height:34px; color:#fff; }
.wa-float::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wpp); animation:waPulse 2.4s ease-out infinite; }
@keyframes waPulse{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(1.7); opacity:0;} }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .wa-float::after{ animation:none; } }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .pain-grid{ grid-template-columns:repeat(2,1fr); }
  .tree-branches,.tree-result-inner{ grid-template-columns:repeat(2,1fr); }
  .tree-branches::before{ display:none; } .tree-branch::before{ display:none; }
}
@media (max-width:880px){
  .nav-links{ position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(244,242,251,.98); backdrop-filter:blur(16px); padding:16px var(--pad) 26px; border-bottom:1px solid var(--line);
    transform:translateY(-14px); opacity:0; pointer-events:none; transition:.32s var(--ease); }
  .nav-links a{ padding:14px 4px; font-size:1.02rem; border-bottom:1px solid var(--line-2); }
  .nav-links a::after{ display:none; }
  body.nav-open .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  .nav .btn-wpp{ display:none; }
  .menu-btn{ display:block; }
  .hero-grid{ grid-template-columns:1fr; }
  .mockup{ max-width:480px; margin:0 auto; order:-1; }
  .prod-grid{ grid-template-columns:1fr; }
  .ba-grid{ grid-template-columns:1fr; }
  .ba-arrow{ transform:rotate(90deg); }
  .oferta-card{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .pain-grid,.tree-branches,.tree-result-inner{ grid-template-columns:1fr; }
  .fc-1,.fc-2{ display:none; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand-col{ grid-column:1 / -1; }
}

/* ---- Exemplo ao vivo: vira janela/box vertical em tablet e mobile ---- */
@media (max-width:1024px){
  .laptop{ max-width:560px; }
  /* remove a moldura de notebook -> janela simples */
  .laptop-screen{ border:0; border-radius:18px; }
  .laptop-bar{ border-radius:18px 18px 0 0; padding:12px 14px; }
  /* formato vertical: facilita ver e rolar o site no celular/tablet */
  .frame-wrap{ aspect-ratio:10/14; }
  .laptop-base{ display:none; }
  .laptop-note{ margin-top:18px; }
}
@media (max-width:560px){
  .laptop-screen{ border-radius:15px; }
  .laptop-bar{ border-radius:15px 15px 0 0; }
  .frame-wrap{ aspect-ratio:9/15; }
}