/* ===== Prowik · móvil de demostración (feed vertical en bucle) ===== */
.phone{--pw:300px; position:relative; width:var(--pw); max-width:100%; aspect-ratio:9/19; border-radius:46px; background:#000; border:10px solid #121a15; box-shadow:0 0 0 1.5px #2A4434, 0 40px 120px rgba(0,0,0,.7), 0 0 90px rgba(0,255,65,.18); overflow:hidden; margin-inline:auto; cursor:pointer; user-select:none; -webkit-user-select:none; isolation:isolate}
.phone:focus-visible{outline:3px solid var(--neon); outline-offset:6px}
.phone .notch{position:absolute; top:8px; left:50%; translate:-50% 0; width:86px; height:24px; border-radius:20px; background:#000; z-index:6}
.phone .feed{position:absolute; inset:0; transition:transform .65s cubic-bezier(.7,0,.2,1)}
.phone .scr{position:absolute; left:0; width:100%; height:100%; overflow:hidden; background:#0B120E; color:#F2F7F3; font-family:var(--body); font-size:12.5px; line-height:1.35}
.phone .scr:nth-child(1){top:0}.phone .scr:nth-child(2){top:100%}.phone .scr:nth-child(3){top:200%}.phone .scr:nth-child(4){top:300%}.phone .scr:nth-child(5){top:400%}.phone .scr:nth-child(6){top:500%}
.phone .sb{display:flex; justify-content:space-between; padding:12px 22px 0; font-weight:600; font-size:11px; opacity:.85}
.phone .sc-body{padding:26px 50px 130px 16px; height:100%; display:flex; flex-direction:column; gap:10px}
.phone h4{font-family:var(--display); font-size:21px; line-height:1.02; letter-spacing:-.03em; margin:0}
.phone h5{font-family:var(--display); font-size:15px; margin:0; letter-spacing:-.01em}
.phone p{margin:0}
/* pantallas claras = webs de cliente */
.phone .t-site,.phone .t-product,.phone .t-checkout,.phone .t-ad,.phone .t-serp,.phone .t-cards,.phone .t-chat{background:#F5F6F2; color:#111}
.m-btn{display:inline-block; align-self:flex-start; background:hsl(var(--h,140) 70% 38%); color:#fff; font-weight:700; font-size:12px; padding:9px 14px; border-radius:99px}
.t-checkout .m-btn,.t-chat .m-btn{--h:140}
.m-img{position:relative; height:120px; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,hsl(var(--h,140) 55% 55%),hsl(calc(var(--h,140) + 40) 60% 30%))}
.m-img.big{height:150px}
.m-img i{position:absolute; border-radius:50%; background:rgba(255,255,255,.22)}
.m-img i:nth-child(1){width:90px; height:90px; right:-20px; top:-20px}
.m-img i:nth-child(2){width:140px; height:60px; left:-30px; bottom:10px; border-radius:30px; background:rgba(0,0,0,.18)}
.m-img i:nth-child(3){width:40px; height:40px; left:40%; top:35%; background:rgba(255,255,255,.35)}
.m-site .m-nav{display:flex; justify-content:space-between; align-items:center; font-size:10.5px; padding-bottom:10px; border-bottom:1px solid #0001}
.m-site .m-nav b{font-family:var(--display); letter-spacing:.08em; font-size:12px}
.m-site .m-nav span{opacity:.6}
.m-hero{display:grid; gap:10px; margin-top:12px}
.m-hero p{color:#555}
.m-cards{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.m-cards div{background:#fff; border-radius:14px; padding:12px; box-shadow:0 4px 14px #0000000f; display:grid; gap:2px}
.m-cards em{font-style:normal; font-size:22px}
.m-cards small{color:#666; font-size:10.5px}
.m-chat-h{font-weight:700; padding:8px 10px; background:#0B6E4F; color:#fff; border-radius:12px; font-size:12px}
.m-chat{display:flex; flex-direction:column; gap:7px; padding-top:4px}
.m-chat p{max-width:86%; padding:8px 11px; border-radius:14px; font-size:12px}
.m-chat .me{align-self:flex-end; background:#D7F8C8; border-bottom-right-radius:4px}
.m-chat .bot{align-self:flex-start; background:#fff; border-bottom-left-radius:4px; box-shadow:0 2px 8px #0000000d}
.m-chat .typing{background:#fff; display:flex; gap:4px; padding:10px 12px}
.m-chat .typing i{width:6px; height:6px; border-radius:50%; background:#999; animation:dt 1s infinite}
.m-chat .typing i:nth-child(2){animation-delay:.15s}.m-chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes dt{0%,100%{opacity:.3; transform:translateY(0)}50%{opacity:1; transform:translateY(-3px)}}
.m-kpi strong{display:block; font-family:var(--display); font-size:40px; letter-spacing:-.05em; line-height:1; color:var(--neon); text-shadow:0 0 20px rgba(0,255,65,.4)}
.m-kpi span{color:#8FA597; font-size:11.5px}
.m-bars{display:grid; gap:9px; margin-top:6px}
.m-bars>div{display:grid; grid-template-columns:44px 1fr; gap:8px; align-items:center; font-size:11px}
.m-bars .tr{display:grid; gap:3px}
.m-bars .tr i,.m-bars .tr u{display:block; height:12px; border-radius:6px; background:var(--neon); width:var(--w); transform-origin:left}
.m-bars .tr u{background:#FF4D3A; height:7px; opacity:.8}
.m-legend{display:flex; gap:12px; font-size:10.5px; color:#8FA597}
.m-legend i,.m-legend u{display:inline-block; width:10px; height:6px; border-radius:3px; background:var(--neon); margin-right:4px}
.m-legend u{background:#FF4D3A}
.m-line{width:100%; height:130px; margin-top:6px}
.m-line .ar{fill:rgba(0,255,65,.12)}
.m-line .ln{fill:none; stroke:var(--neon); stroke-width:3; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:0; filter:drop-shadow(0 0 6px rgba(0,255,65,.6))}
.m-line.down .ln{stroke:#FFB020}.m-line.down .ar{fill:rgba(255,176,32,.12)}
.m-axis{display:flex; justify-content:space-between; color:#8FA597; font-size:10px}
.m-kpis{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.m-kpis div{background:#122019; border:1px solid #1C2E23; border-radius:14px; padding:12px 10px}
.m-kpis strong{display:block; font-family:var(--display); font-size:24px; letter-spacing:-.04em; color:var(--neon)}
.m-kpis span{color:#8FA597; font-size:10.5px; line-height:1.25; display:block}
.m-list{display:grid; gap:8px}
.m-list>div{display:grid; grid-template-columns:18px 1fr auto; gap:8px; align-items:center; background:#122019; border:1px solid #1C2E23; padding:10px; border-radius:12px; font-size:11.5px}
.m-list i{width:16px; height:16px; border-radius:50%; border:2px solid #2A4434}
.m-list .hecho i{background:var(--neon); border-color:var(--neon); box-shadow:0 0 10px rgba(0,255,65,.6)}
.m-list .curso i{border-color:#FFB020; border-top-color:transparent; animation:spin 1s linear infinite}
.m-list small{color:#8FA597; font-size:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.m-list.chk>div{grid-template-columns:1fr auto; background:#fff; border-color:#0000000d; color:#111}
.m-list.chk small{color:#111; font-weight:700}
.m-total{display:flex; justify-content:space-between; align-items:baseline; padding:6px 2px; border-top:1px dashed #0002}
.m-total strong{font-family:var(--display); font-size:24px}
.m-pay{display:flex; gap:6px}.m-pay span{flex:1; text-align:center; background:#fff; border-radius:10px; padding:8px 0; font-size:10.5px; font-weight:600; box-shadow:0 2px 8px #0000000d}
.m-btn.ok{align-self:stretch; text-align:center; padding:12px}
.m-flow{position:relative; display:grid; gap:12px; padding-left:6px}
.m-flow::before{content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:#1C2E23}
.m-flow div{position:relative; display:flex; align-items:center; gap:10px; background:#122019; border:1px solid #1C2E23; border-radius:12px; padding:8px 10px}
.m-flow b{width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--neon); color:#021407; font-size:11px}
.m-flow .dot{position:absolute; left:15px; top:12px; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 14px var(--neon), 0 0 4px #fff}
.m-search{display:flex; gap:8px; align-items:center; background:#fff; border-radius:99px; padding:10px 14px; box-shadow:0 3px 12px #0000001a; font-size:11.5px}
.m-serp{position:relative; display:grid; gap:8px; margin-top:6px}
.m-serp div{background:#fff; border-radius:12px; padding:9px 11px; display:grid; gap:1px; box-shadow:0 2px 8px #0000000a}
.m-serp b{color:#1a0dab; font-size:12px}
.m-serp span{color:#555; font-size:10.5px}
.m-serp small{font-weight:700; font-size:9.5px}
.m-serp .you{outline:2px solid var(--neon); box-shadow:0 0 24px rgba(0,255,65,.5)}
.m-kan{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; position:relative}
.m-kan>div{background:#122019; border-radius:10px; padding:6px; display:grid; gap:6px; align-content:start; min-height:170px}
.m-kan small{color:#8FA597; font-size:9.5px; font-weight:600}
.m-kan p{background:#1C2E23; border-radius:8px; padding:7px 6px; font-size:10px; border-left:3px solid var(--neon)}
.m-prod{display:grid; gap:7px; position:relative}
.m-prod small{color:#666}
.m-prod strong{font-family:var(--display); font-size:26px}
.m-prod .badge{position:absolute; left:10px; top:10px; background:#FF4D3A; color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:99px}
.m-prod .cart{position:absolute; right:-36px; top:-18px; font-style:normal; font-size:20px}
.m-prod .cart sup{background:#FF4D3A; color:#fff; font-size:9px; border-radius:99px; padding:1px 5px; margin-left:-6px}
.m-lock{display:grid; gap:12px; text-align:center; padding-top:20px}
.m-lock>strong{font-family:var(--display); font-size:30px; letter-spacing:-.03em}
.m-lock>div{display:grid; gap:8px; text-align:left}
.m-lock p{display:grid; grid-template-columns:28px 1fr; column-gap:8px; background:rgba(255,255,255,.08); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:10px}
.m-lock em{grid-row:span 2; font-style:normal; font-size:20px; align-self:center}
.m-lock small{color:#B8C7BD; font-size:10.5px}
.m-donut{width:150px; aspect-ratio:1; border-radius:50%; margin:6px auto; display:grid; place-items:center; position:relative}
.m-donut::after{content:""; position:absolute; inset:24px; border-radius:50%; background:#0B120E}
.m-donut span{position:relative; z-index:1; font-family:var(--display); font-size:20px; text-align:center; line-height:1}
.m-donut small{display:block; font-family:var(--body); font-size:10px; color:#8FA597}
.m-leg{display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; font-size:10.5px}
.m-leg i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px}
.m-ad-h{display:flex; gap:8px; align-items:center}
.m-ad-h i{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af)}
.m-ad-h small{display:block; color:#777; font-size:10px}
.m-ad{display:grid; gap:9px}
.m-ad p{color:#555}

/* overlays tipo TikTok */
.tk-bars{position:absolute; top:40px; left:14px; right:14px; display:flex; gap:4px; z-index:5}
.tk-bars i{flex:1; height:3px; border-radius:2px; background:rgba(127,127,127,.35); overflow:hidden}
.tk-bars b{display:block; height:100%; background:var(--neon); transform-origin:left; transform:scaleX(0); box-shadow:0 0 6px var(--neon)}
.tk-side{position:absolute; right:8px; bottom:120px; display:grid; gap:14px; z-index:5; text-align:center}
.tk-side span{display:grid; justify-items:center; gap:1px}
.tk-side em{font-style:normal; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.45); color:#fff; font-size:16px; backdrop-filter:blur(6px)}
.tk-side small{font-size:9.5px; font-weight:700; color:#fff; text-shadow:0 1px 4px #000}
.tk-side .tk-av{width:36px; height:36px; border-radius:50%; background:var(--neon); color:#021407; font-family:var(--display); font-weight:800; display:grid; place-items:center; border:2px solid #fff; animation:avp 2.4s infinite}
@keyframes avp{50%{box-shadow:0 0 0 6px rgba(0,255,65,.25)}}
.tk-cap{position:absolute; left:0; right:0; bottom:0; padding:60px 16px 18px; z-index:4; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.85) 45%); pointer-events:none}
.tk-cap b{font-size:13px}
.tk-cap .tk-txt{font-size:12.5px; line-height:1.35; margin:3px 52px 4px 0}
.tk-cap .tk-txt.in{animation:capin .5s both}
.tk-cap small{font-size:10px; opacity:.75; display:block}
@keyframes capin{from{opacity:0; transform:translateY(8px)}}
.tk-hint{position:absolute; left:50%; bottom:118px; translate:-50% 0; z-index:5; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:5px 10px; border-radius:99px; animation:hint 1.6s ease-in-out infinite; pointer-events:none}
.phone.touched .tk-hint{display:none}
@keyframes hint{50%{transform:translateY(-6px)}}

/* animaciones al entrar cada pantalla */
.scr.on .m-cards div,.scr.on .m-kpis div,.scr.on .m-list>div,.scr.on .m-flow div,.scr.on .m-lock p,.scr.on .m-leg span,.scr.on .m-serp div{animation:pin .55s cubic-bezier(.2,.9,.3,1.3) both; animation-delay:calc(var(--i)*.14s + .15s)}
@keyframes pin{from{opacity:0; transform:translateY(16px) scale(.94)}}
.scr.on .m-chat p{animation:pin .45s both; animation-delay:calc(var(--i)*.55s + .2s)}
.scr.on .m-chat .typing{animation:pin .3s both, gone .1s forwards; animation-delay:calc(var(--i)*.55s + .2s), calc(var(--i)*.55s + 2.6s)}
@keyframes gone{to{opacity:0; height:0; padding:0; margin:0}}
.scr.on .m-bars .tr i,.scr.on .m-bars .tr u{animation:grow 1s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i)*.12s + .2s)}
@keyframes grow{from{transform:scaleX(0)}}
.scr.on .m-line .ln{animation:draw 1.6s ease-out both .2s}
@keyframes draw{from{stroke-dashoffset:320}}
.scr.on .m-line .ar{animation:fadein 1.2s both .8s}
@keyframes fadein{from{opacity:0}}
.scr.on .m-kpi strong{animation:pop .6s cubic-bezier(.2,.9,.3,1.5) both .2s}
@keyframes pop{from{opacity:0; transform:scale(.5)}}
.scr.on .m-hero,.scr.on .m-ad,.scr.on .m-prod{animation:pin .7s both .1s}
.scr.on .m-btn{animation:pulse-b 1.6s ease-in-out infinite 1s}
@keyframes pulse-b{50%{box-shadow:0 0 0 8px hsl(var(--h,140) 70% 38% / .2)}}
.scr.on .m-img i:nth-child(1){animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translate(-10px,10px)}}
.scr.on .m-serp .you{animation:climb 1.6s cubic-bezier(.6,0,.2,1) both .6s; position:relative; z-index:2}
@keyframes climb{from{transform:translateY(0)} to{transform:translateY(calc(-300% - 24px))}}
.scr.on .m-serp div:not(.you){animation:pin .4s both, down .9s cubic-bezier(.6,0,.2,1) both 1.2s}
@keyframes down{to{transform:translateY(calc(100% + 8px))}}
.scr.on .m-flow .dot{animation:flowdot 2.6s ease-in-out infinite .4s}
@keyframes flowdot{0%{top:12px; opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 24px); opacity:0}}
.scr.on .m-kan .mv{animation:mv 1.2s cubic-bezier(.6,0,.2,1) both 1s; position:relative; z-index:2; box-shadow:0 8px 20px rgba(0,0,0,.5)}
@keyframes mv{to{transform:translateX(calc(100% + 12px))}}
.scr.on .m-donut{animation:spinin 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes spinin{from{transform:rotate(-120deg) scale(.6); opacity:0}}
.scr.on .m-prod .cart{animation:cart .6s both 1.6s}
.scr.on .m-prod .m-btn{animation:tap .3s both 1.3s}
@keyframes tap{50%{transform:scale(.92)}}
@keyframes cart{from{opacity:0; transform:scale(0)}60%{transform:scale(1.4)}}
.scr.on .m-pay span:nth-child(1){animation:sel .4s both 1.4s}
@keyframes sel{to{outline:2px solid #0B6E4F; background:#E6F7EE}}
.scr.on .m-btn.ok{animation:pin .5s both 1.8s}
@media (prefers-reduced-motion:reduce){.phone .feed{transition:none}.scr.on *{animation:none !important}}

/* ===== sección demo en páginas de servicio ===== */
.demo-sec{padding-top:40px}
.demo-grid{display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center}
.demo-list{display:grid; gap:8px; margin-top:28px}
.demo-list button{display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; color:var(--muted); transition:border-color .25s, color .25s, transform .25s}
.demo-list button b{font-family:var(--display); color:var(--line-2); font-size:1.3rem; transition:color .25s}
.demo-list button.on{border-color:var(--neon); color:var(--text); transform:translateX(8px); box-shadow:0 0 30px rgba(0,255,65,.12)}
.demo-list button.on b{color:var(--neon)}
@media (max-width:900px){.demo-grid{grid-template-columns:1fr; gap:34px}.demo-grid .phone-host{order:-1}.demo-list button.on{transform:none}}

/* ===== explorador de servicios (portada) ===== */
.svc.explorable{cursor:pointer}
.svc.explorable:hover h3{color:var(--neon)}
html.sx-open{overflow:hidden}
dialog.sx{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--text)}
dialog.sx::backdrop{background:rgba(2,6,4,.82); backdrop-filter:blur(10px)}
dialog.sx[open]{animation:sxin .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes sxin{from{opacity:0; transform:scale(.96) translateY(20px)}}
.sx-in{position:relative; height:100%; display:grid; grid-template-columns:250px 1fr auto; grid-template-rows:auto 1fr; gap:0 34px; padding:22px 30px 26px; background:radial-gradient(ellipse at 80% 40%, rgba(0,255,65,.10), transparent 60%), var(--bg); border:1px solid var(--line-2)}
.sx-top{grid-column:1/-1; display:flex; align-items:center; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:22px}
.sx-brand{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:1.2rem}
.sx-brand i{width:10px; height:10px; border-radius:50%; background:var(--neon); box-shadow:var(--glow)}
.sx-count{color:var(--muted); font-size:.9rem; font-weight:600; margin-left:auto}
.sx-close{background:transparent; border:1.5px solid var(--line-2); border-radius:99px; padding:8px 16px; font-weight:600}
.sx-close:hover{border-color:var(--neon); color:var(--neon)}
.sx-tabs{display:flex; flex-direction:column; gap:6px; overflow:auto; min-height:0}
.sx-tabs button{text-align:left; background:transparent; border:1px solid transparent; border-radius:14px; padding:10px 14px; font-weight:600; color:var(--muted); display:grid; gap:2px; transition:all .25s}
.sx-tabs button small{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--line-2); transition:color .25s}
.sx-tabs button:hover{color:var(--text)}
.sx-tabs button.on{color:var(--text); background:var(--card); border-color:var(--neon); box-shadow:0 0 24px rgba(0,255,65,.12)}
.sx-tabs button.on small{color:var(--neon)}
.sx-main{overflow:auto; min-height:0; padding-right:6px}
.sx-main.in .sx-body{animation:sxbody .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes sxbody{from{opacity:0; transform:translateX(calc(var(--dir,1)*40px))}}
.sx-body{display:grid; gap:14px; align-content:start; padding-bottom:20px}
.sx-tag{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--neon)}
.sx-body h2{font-size:clamp(2rem,3.6vw,3.4rem); line-height:.95}
.sx-l2{font-family:var(--display); font-size:1.4rem; font-weight:700; color:var(--neon); text-shadow:0 0 30px rgba(0,255,65,.35)}
.sx-lede{color:var(--muted); max-width:60ch}
.sx-chips{display:flex; flex-wrap:wrap; gap:8px}
.sx-chips span{border:1.5px solid rgba(0,255,65,.4); color:var(--neon); border-radius:99px; padding:5px 12px; font-size:.85rem; font-weight:600; animation:pin .5s both; animation-delay:calc(var(--j)*.06s + .2s)}
.sx-body h3{margin-top:8px; font-size:1.15rem}
.sx-body h3 small{color:var(--muted); font-family:var(--body); font-weight:500; font-size:.85rem}
.sx-pil{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sx-pil button{text-align:left; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; display:grid; gap:0; transition:border-color .25s, gap .25s; animation:pin .5s both; animation-delay:calc(var(--j)*.07s + .25s)}
.sx-pil button b{display:flex; justify-content:space-between; gap:10px}
.sx-pil button b::after{content:"+"; color:var(--neon); font-size:1.2rem; line-height:1; transition:transform .25s}
.sx-pil button span{display:grid; grid-template-rows:0fr; color:var(--muted); font-size:.92rem; overflow:hidden; max-height:0; transition:max-height .35s}
.sx-pil button[aria-expanded="true"]{border-color:var(--neon); gap:6px}
.sx-pil button[aria-expanded="true"] b::after{transform:rotate(45deg)}
.sx-pil button[aria-expanded="true"] span{max-height:120px}
.sx-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.sx-demo{display:grid; justify-items:center; align-content:center; gap:12px; min-height:0}
.sx-demo .phone{--pw:300px; width:300px; max-width:none; aspect-ratio:9/16.5}
.sx-hint{color:var(--muted); font-size:.85rem; text-align:center}
.sx-nav{position:absolute; right:30px; bottom:26px; display:none; gap:8px}
.sx-nav button{width:46px; height:46px; border-radius:50%; background:var(--card); border:1.5px solid var(--line-2); font-size:1.1rem}
@media (max-width:1180px){.sx-in{grid-template-columns:200px 1fr auto; gap:0 24px; padding:18px 20px}}
@media (max-width:900px){
  .sx-in{display:flex; flex-direction:column; overflow:auto; padding:14px 16px 90px; gap:0}
  .sx-in>*{flex:none}
  .sx-top{margin-bottom:12px; padding-bottom:12px}
  .sx-tabs{flex-direction:row; overflow-x:auto; flex:none; padding-bottom:6px; scrollbar-width:none}
  .sx-tabs::-webkit-scrollbar{display:none}
  .sx-tabs button{flex:none; white-space:nowrap; padding:8px 12px; font-size:.9rem}
  .sx-main{overflow:visible; order:3; padding:0}
  .sx-demo{order:2; margin:14px 0 18px}
  .sx-demo .phone{width:300px}
  .sx-pil{grid-template-columns:1fr}
  .sx-nav{display:flex; position:fixed; right:16px; bottom:16px; z-index:3}
}

/* ===== explorador v3: colorear al deslizar, pasos, Pik ===== */
.sx-main{position:relative; scroll-behavior:smooth}
.sx-body{padding-bottom:40px}
.sx-pil button.sx-paint{position:relative; overflow:hidden; color:var(--muted); background:var(--card); border-color:var(--line); transition:border-color .5s, color .5s, box-shadow .5s, gap .25s}
.sx-pil button.sx-paint b{transition:color .5s}
.sx-pil button.sx-paint::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(0,255,65,.22), rgba(0,255,65,.06) 60%, transparent); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.7,0,.2,1); transition-delay:calc(var(--j)%2 * .12s); pointer-events:none}
.sx-pil button.sx-paint.lit{color:var(--text); border-color:rgba(0,255,65,.55); box-shadow:0 0 26px rgba(0,255,65,.12)}
.sx-pil button.sx-paint.lit::before{transform:scaleX(1)}
.sx-pil button.sx-paint.lit b::after{animation:plus .6s both .5s}
@keyframes plus{40%{transform:scale(1.8) rotate(90deg)}}
.sx-pil button>*{position:relative}
.sx-steps{--p:0; position:relative; display:grid; gap:12px; padding-left:46px}
.sx-steps::before,.sx-steps::after{content:""; position:absolute; left:17px; top:18px; bottom:18px; width:3px; border-radius:3px; background:var(--line)}
.sx-steps::after{background:var(--neon); box-shadow:0 0 14px var(--neon); transform-origin:top; transform:scaleY(var(--p)); transition:transform .15s linear}
.sx-step{position:relative; display:block; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; color:var(--muted); transition:border-color .5s, color .5s, transform .5s; transform:translateX(14px); opacity:.45}
.sx-step b{position:absolute; left:-46px; top:12px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:2px solid var(--line-2); font-family:var(--display); color:var(--muted); transition:all .5s; z-index:1}
.sx-step strong{display:block; color:inherit; font-family:var(--display); font-size:1.1rem}
.sx-step span{font-size:.92rem}
.sx-step.lit{opacity:1; transform:none; color:var(--text); border-color:rgba(0,255,65,.45)}
.sx-step.lit b{background:var(--neon); border-color:var(--neon); color:var(--on-neon); box-shadow:0 0 20px rgba(0,255,65,.6); animation:stepPop .6s cubic-bezier(.2,.9,.3,1.6)}
@keyframes stepPop{from{transform:scale(.3)}}
.sx-ctas.sx-paint{display:grid; gap:12px; margin-top:14px; padding:22px; border-radius:22px; border:1.5px dashed var(--line-2); transition:all .6s}
.sx-ctas p{font-family:var(--display); font-size:1.4rem; font-weight:700}
.sx-ctas>div{display:flex; flex-wrap:wrap; gap:10px}
.sx-ctas.sx-paint.lit{border-style:solid; border-color:var(--neon); background:rgba(0,255,65,.06); box-shadow:0 0 50px rgba(0,255,65,.15)}
.sx-more{position:sticky; bottom:0; display:flex; justify-content:center; align-items:center; gap:10px; padding:40px 0 10px; margin-top:-60px; background:linear-gradient(transparent, var(--bg) 65%); color:var(--neon); font-weight:700; cursor:pointer; transition:opacity .4s; z-index:2}
.sx-more span{background:var(--card); border:1.5px solid var(--neon); border-radius:99px; padding:8px 16px; box-shadow:0 0 24px rgba(0,255,65,.25)}
.sx-more i{font-style:normal; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--neon); color:var(--on-neon); animation:moreb 1.1s ease-in-out infinite}
@keyframes moreb{50%{transform:translateY(7px)}}
dialog.sx.sx-bottom .sx-more{opacity:0; pointer-events:none}
dialog.sx.sx-scrolled .sx-more span{display:none}
.sx-fx{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:5}
.sx-pik{position:fixed; left:0; top:0; width:96px; z-index:6; pointer-events:none; transition:width .3s}
.sx-pik-bot{width:100%; aspect-ratio:320/480; cursor:pointer; pointer-events:auto; filter:drop-shadow(0 0 18px rgba(0,255,65,.35))}
.sx-pik-bot svg{width:100%; height:100%; overflow:visible}
.sx-pik-bot .p-laser{display:none}
.sx-say{position:absolute; right:85%; top:4px; white-space:nowrap; background:var(--neon); color:var(--on-neon); font-weight:700; font-size:.85rem; padding:7px 12px; border-radius:14px 14px 4px 14px; box-shadow:0 0 24px rgba(0,255,65,.45); opacity:0; transform:scale(.6) translateY(6px); transform-origin:right bottom; transition:opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.6)}
.sx-say.on{opacity:1; transform:none}
.sx-say.r{right:auto; left:85%; border-radius:14px 14px 14px 4px; transform-origin:left bottom}