/* v3.4: vitrine de serviços (lista à esquerda, palco com cenas à direita) */
.show{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;margin-top:56px;align-items:stretch}
.show-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.show-list li{border-radius:20px;transition:background .5s var(--ease)}
.show-list li.on{background:rgba(255,255,255,.035)}
.show-list button{width:100%;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;text-align:left;padding:22px 24px 12px}
.sn{font-size:.8rem;color:var(--mut);font-variant-numeric:tabular-nums}
.show-list b{font-size:1.45rem;font-weight:500;letter-spacing:-.025em;color:var(--mut);transition:color .4s}
.show-list li.on b{color:#fff}.show-list li.on .sn{color:var(--acc2)}
.sp{grid-column:1/-1;height:2px;border-radius:2px;background:rgba(255,255,255,.07);margin-top:12px;overflow:hidden;font-style:normal;display:block}
.sp i{display:block;height:100%;width:100%;background:var(--acc2);transform-origin:left;transform:scaleX(0)}
.show-list li.on .sp i{animation:sp var(--dur,7s) linear forwards}
@keyframes sp{to{transform:scaleX(1)}}
.show.paused .show-list li.on .sp i{animation-play-state:paused}
.show-list p{max-height:0;overflow:hidden;opacity:0;padding:0 24px;color:var(--mut);transition:max-height .6s var(--ease),opacity .5s,padding .5s}
.show-list li.on p{max-height:140px;opacity:1;padding:0 24px 22px}
.stage2{position:relative;min-height:480px;border-radius:28px;border:1px solid var(--line);background:radial-gradient(70% 70% at 60% 40%,rgba(20,84,245,.22),transparent 70%),linear-gradient(160deg,#0f1322,#080a12);overflow:hidden}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s .6s}
.scene.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),transform .8s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* cena 1: tráfego */
.gsearch{position:absolute;left:7%;top:10%;width:56%;background:#fff;border-radius:18px;padding:16px;color:#202124;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.gbar{display:flex;align-items:center;gap:10px;border:1px solid #dfe1e5;border-radius:999px;padding:10px 14px;font-size:.85rem}
.gbar>i{width:14px;height:14px;border-radius:50%;border:2px solid #9aa0a6;flex:none}
.typed{overflow:hidden;white-space:nowrap;border-right:2px solid #1454f5;width:0}
.scene.on .typed{animation:type 1.4s steps(20) .3s forwards,caret .8s step-end 1.7s 3}
@keyframes type{to{width:19ch}}@keyframes caret{50%{border-color:transparent}}
.gres{margin-top:12px;padding:10px 4px;border-top:1px solid #f1f3f4}.gres i{display:block;height:8px;border-radius:4px;background:#e8eaed;width:80%}.gres i.s{width:55%;margin-top:6px}
.gres.ad small{font-size:.66rem;font-weight:700;color:#202124}.gres.ad b{display:block;color:#1a0dab;font-weight:500;font-size:.95rem;margin:2px 0}.gres.ad em{font-style:normal;font-size:.75rem;color:#188038}
.scene.on .gres.ad{animation:pop .6s var(--ease) 1.8s both}
.feed{position:absolute;right:7%;top:16%;width:34%;background:#fff;border-radius:18px;padding:12px;color:#111;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.scene.on .feed{animation:pop .7s var(--ease) 2.4s both}
.fh{display:flex;align-items:center;gap:8px;font-size:.75rem}.fh i{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#1454f5,#5b8cff)}.fh small{display:block;color:#65676b;font-size:.62rem}
.fimg{height:110px;border-radius:10px;margin:10px 0;background:linear-gradient(135deg,#0d1a3d,#1454f5 60%,#7fa6ff)}
.fcta{font-size:.72rem;font-weight:600;text-align:center;padding:8px;border-radius:8px;background:#e7f0ff;color:#1454f5}
.curve{position:absolute;left:7%;bottom:8%;width:86%;height:30%}
.curve path{fill:none;stroke:#5b8cff;stroke-width:3;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;filter:drop-shadow(0 0 8px rgba(91,140,255,.6))}
.scene.on .curve path{animation:draw 2.2s var(--ease) 2.8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chip{position:absolute;font-size:.75rem;padding:7px 12px;border-radius:999px;background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.3);opacity:0}
.c1{right:8%;bottom:36%}.scene.on .c1{animation:pop .5s var(--ease) 4.6s both}

/* cena 2: presença */
.phone2{position:absolute;left:10%;top:8%;width:36%;height:84%;border-radius:34px;background:#fff;border:8px solid #1a1f2e;padding:16px 12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.ig-top{display:flex;gap:10px;align-items:center}.ig-top .av{width:48px;height:48px;border-radius:50%;background:conic-gradient(#f58529,#dd2a7b,#8134af,#515bd4,#f58529);flex:none}
.ig-top b{display:block;height:8px;width:90px;border-radius:4px;background:#dbdbdb}.ig-top b.s{width:60px;margin-top:6px}
.ig-hl{display:flex;gap:8px;margin:14px 0}.ig-hl i{width:32px;height:32px;border-radius:50%;border:2px solid #dbdbdb}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.ig-grid i{aspect-ratio:1;background:#eef0f4}
.scene.on .ig-grid i{animation:tile .5s var(--ease) var(--d) both}
.ig-grid i:nth-child(1){--d:.3s}.ig-grid i:nth-child(2){--d:.45s}.ig-grid i:nth-child(3){--d:.6s}.ig-grid i:nth-child(4){--d:.75s}.ig-grid i:nth-child(5){--d:.9s}.ig-grid i:nth-child(6){--d:1.05s}.ig-grid i:nth-child(7){--d:1.2s}.ig-grid i:nth-child(8){--d:1.35s}.ig-grid i:nth-child(9){--d:1.5s}
@keyframes tile{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none;background:linear-gradient(135deg,#0d1a3d,#1454f5 70%,#9ab8ff)}}
.gbiz{position:absolute;right:8%;top:22%;width:40%;background:#fff;border-radius:18px;padding:14px;color:#202124;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.scene.on .gbiz{animation:pop .7s var(--ease) 1.6s both}
.gbiz b{font-size:.95rem}
.map{height:100px;border-radius:10px;background:linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 46%,#fff 46% 54%,transparent 54%),#e3ecdf;position:relative;margin-bottom:10px}
.pinx{position:absolute;left:50%;top:40%;width:18px;height:18px;border-radius:50% 50% 50% 0;background:#ea4335;transform:translate(-50%,-50%) rotate(-45deg)}
.scene.on .pinx{animation:drop .6s cubic-bezier(.3,1.6,.5,1) 2.2s both}
@keyframes drop{from{opacity:0;transform:translate(-50%,-180%) rotate(-45deg)}}
.stars{color:#fbbc04;letter-spacing:2px;margin:4px 0 10px}
.gbtn{display:flex;gap:6px}.gbtn span{flex:1;text-align:center;font-size:.66rem;padding:6px;border-radius:999px;border:1px solid #dadce0;color:#1a73e8}

/* cena 3: site real de cliente (v3.5) */
.br{position:absolute;left:7%;right:7%;top:8%;bottom:13%;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.brb{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#eef0f4}.brb i{width:9px;height:9px;border-radius:50%;background:#d4d8e0}.brb span{margin-left:12px;font-size:.68rem;color:#6b7280;background:#fff;padding:4px 14px;border-radius:999px}
.bview{position:absolute;left:0;right:0;top:34px;bottom:0;overflow:hidden}
.bpage{will-change:transform}
.scene.on .bpage{animation:bscroll 1.6s cubic-bezier(.65,0,.35,1) 1.6s both}
@keyframes bscroll{to{transform:translateY(-46%)}}
.bnav{display:flex;align-items:center;gap:14px;padding:10px 16px;font-size:.6rem;color:#0b2347;background:#fff}.bnav img{height:14px;width:auto;margin-right:auto;filter:brightness(0) saturate(100%) invert(12%) sepia(40%) saturate(2500%) hue-rotate(200deg)}
.bhero{position:relative;height:210px;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff}
.bhero:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,20,45,.85),rgba(6,20,45,.1) 70%)}
.bhero>*{position:relative}.bhero h4{font-size:1.15rem;font-weight:500;line-height:1.15;letter-spacing:-.02em}.bhero em{font-style:normal;color:#e6c27a}
.bbtn{align-self:flex-start;margin-top:10px;font-size:.62rem;padding:7px 12px;border-radius:999px;background:#e6c27a;color:#0b2347;font-weight:600}
.scene.on .bhero h4{animation:pop .6s var(--ease) .3s both}.scene.on .bbtn{animation:pop .6s var(--ease) .6s both}
.bprod{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px;background:#f7f8fb}
.bprod figure{margin:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 16px -10px rgba(0,0,0,.25)}.bprod img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.bprod b{display:block;font-size:.64rem;font-weight:600;color:#0b2347;padding:8px}
.bwa{position:absolute;right:14px;bottom:14px;font-size:.68rem;font-weight:600;color:#fff;background:#25d366;padding:9px 14px;border-radius:999px;box-shadow:0 10px 20px -8px rgba(37,211,102,.7)}
.scene.on .bwa{animation:pop .5s var(--ease) 2.9s both,press2 .3s ease 4.3s}
@keyframes press2{50%{transform:scale(.9)}}
.cur{position:absolute;width:18px;height:18px;background:#0a0c12;clip-path:polygon(0 0,0 100%,30% 72%,52% 100%,66% 92%,46% 66%,82% 66%);left:40%;top:40%;opacity:0}
.scene.on .cur{animation:aim2 1.2s var(--ease) 3.1s both}
@keyframes aim2{from{opacity:1}to{opacity:1;left:calc(100% - 50px);top:calc(100% - 30px)}}
.toast2{position:absolute;right:6%;bottom:4%;font-size:.82rem;padding:12px 16px;border-radius:14px;background:#0f1a2e;border:1px solid rgba(34,197,94,.35);color:#d9fbe5;box-shadow:0 20px 40px -10px rgba(0,0,0,.6);opacity:0}
.toast2 span{color:#22c55e}.scene.on .toast2{animation:pop .5s var(--ease) 4.5s both}
.case-tag{position:absolute;left:7%;bottom:4.5%;font-size:.72rem;color:var(--mut)}

/* cena 4: assessoria (v3.5) */
.plan{position:absolute;left:7%;top:9%;bottom:9%;width:50%;background:#fff;border-radius:18px;padding:20px;color:#0a0c12;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.plan>small{color:#6b7280;font-size:.75rem}
.ph{margin-top:14px}.ph span{font-size:.7rem;font-weight:600;color:#1454f5}
.tk{position:relative;font-size:.8rem;padding:7px 0 7px 26px;border-bottom:1px solid #f0f2f6;color:#374151}
.tk:before{content:"";position:absolute;left:0;top:50%;width:15px;height:15px;margin-top:-8px;border-radius:5px;border:1.5px solid #c9ced8}
.tk:after{content:"";position:absolute;left:5px;top:50%;width:4px;height:8px;margin-top:-6px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0)}
.scene.on .tk:before{animation:chk .35s var(--ease) var(--d) forwards}.scene.on .tk:after{animation:chk2 .35s var(--ease) var(--d) forwards}
@keyframes chk{to{background:#1454f5;border-color:#1454f5}}@keyframes chk2{to{transform:rotate(45deg) scale(1)}}
.t1{--d:.6s}.t2{--d:1.2s}.t3{--d:1.8s}.t4{--d:2.4s}.t5{--d:3s}
.meet{position:absolute;right:7%;top:20%;width:36%;background:#0f1424;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.scene.on .meet{animation:pop .6s var(--ease) 3.6s both}
.mh{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#fff}.mh i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.mtiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.mtiles div{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(150deg,#1a2442,#0b1020);display:flex;flex-direction:column;align-items:center;justify-content:center}
.mtiles b{font-size:1.05rem;color:#fff}.mtiles small{font-size:.62rem;color:var(--mut)}
.agenda{display:flex;flex-wrap:wrap;gap:6px}.agenda span{font-size:.66rem;padding:5px 10px;border-radius:999px;background:rgba(91,140,255,.14);color:#b8ccff;opacity:0}
.scene.on .a1{animation:pop .4s var(--ease) 4.3s both}.scene.on .a2{animation:pop .4s var(--ease) 4.6s both}.scene.on .a3{animation:pop .4s var(--ease) 4.9s both}

@media (max-width:960px){
  .show{grid-template-columns:1fr;gap:28px}.stage2{order:-1}
  .show-list b{font-size:1.15rem}.show-list button{padding:16px 18px 10px}
}