:root{--bg:#020611;--cyan:#21d8ff;--pink:#ff32bd;--violet:#8e40ff;--orange:#ff7b22;--text:#f4fbff;--muted:#9db2cc}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020611;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}.topbar{height:70px;display:flex;align-items:center;padding:7px clamp(15px,3vw,55px);gap:25px;background:#020713;border-bottom:1px solid #15385c;position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:9px;color:white;text-decoration:none}.brand img{width:49px;height:49px;object-fit:cover;border-radius:10px}.brand strong{font-size:18px}.brand small{display:block;color:#a8bbd2}.topbar nav{margin-left:auto;display:flex;gap:24px}.topbar nav a{color:#dce9f8;text-decoration:none;font-size:12px;font-weight:800}.topbar nav a.active,.topbar nav a:hover{color:var(--cyan)}
.mall{display:grid;grid-template-columns:285px 1fr;min-height:calc(100vh - 70px);background:radial-gradient(circle at 65% 35%,#112e59 0,#071225 30%,#020611 68%)}.rail{padding:22px 14px;background:linear-gradient(180deg,#061126,#020712);border-right:1px solid #17416c;z-index:5}.rail-title{text-align:center;padding:5px 8px 18px}.rail-title strong{font-size:21px}.rail-title span{display:block;color:var(--cyan);font-size:24px;font-weight:900}.rail-title small{color:#7f9ab8;letter-spacing:2px}.rail-btn{width:100%;height:61px;margin:5px 0;display:grid;grid-template-columns:34px 35px 1fr;align-items:center;text-align:left;gap:5px;border:1px solid #264c76;border-radius:13px;background:linear-gradient(110deg,#071225,#0a1830);color:#dceaff;cursor:pointer;transition:.22s;box-shadow:inset 0 0 15px rgba(33,216,255,.02)}.rail-btn b{height:30px;width:30px;display:grid;place-items:center;border-radius:50%;border:1px solid #4c78a7;color:#8fb3d6}.rail-btn .ri{font-size:22px}.rail-btn span:last-child{font-size:12px;font-weight:900}.rail-btn:hover,.rail-btn.active{border-color:var(--cyan);transform:translateX(5px);box-shadow:0 0 20px rgba(33,216,255,.25),inset 0 0 18px rgba(33,216,255,.08)}.rail-btn.active b{color:#00101a;background:var(--cyan);border-color:var(--cyan)}
.viewport{position:relative;overflow:hidden;min-width:0}.ambient{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,6,17,.35),rgba(2,6,17,.08)),url('shopping-3d-hero.webp') center/cover no-repeat;opacity:.3;filter:saturate(1.2)}.showcase-wrap{height:100%;min-height:680px;position:relative}.showcase{position:absolute;inset:0;display:grid;grid-template-columns:minmax(320px,.8fr) minmax(400px,1.2fr);align-items:center;gap:20px;padding:clamp(35px,6vw,90px);opacity:0;pointer-events:none;transform:translateX(90px) scale(.96);transition:opacity .45s,transform .55s cubic-bezier(.2,.75,.2,1)}.showcase.active{opacity:1;pointer-events:auto;transform:none}.showcase-bg{position:absolute;inset:8% 4%;border-radius:38px;border:1px solid rgba(57,202,255,.22);background:linear-gradient(135deg,rgba(6,22,45,.93),rgba(9,12,34,.84));box-shadow:0 40px 100px rgba(0,0,0,.5),inset 0 0 80px rgba(37,148,255,.07);backdrop-filter:blur(7px)}.showcase-copy,.stage{position:relative;z-index:2}.kicker{color:var(--cyan);font-weight:900;letter-spacing:3px}.showcase h2{font-size:clamp(42px,5vw,78px);line-height:.95;margin:12px 0;text-transform:uppercase;text-shadow:0 0 30px rgba(33,216,255,.2)}.showcase p{font-size:18px;color:#bdd0e6;line-height:1.6;max-width:560px}.partner-zone{display:inline-block;margin:20px 0;padding:11px 14px;border:1px dashed #3d648d;border-radius:10px;color:#7e9ab8;font-size:11px;letter-spacing:1.5px}.product-link{display:flex;width:max-content;padding:13px 18px;border-radius:12px;border:1px solid var(--cyan);color:var(--cyan);text-decoration:none;font-weight:900;box-shadow:0 0 20px rgba(33,216,255,.12)}.product-link:hover{background:var(--cyan);color:#00121d}.stage{height:460px;display:grid;place-items:center;perspective:1000px}.orb{width:210px;height:210px;border-radius:50%;display:grid;place-items:center;font-size:95px;background:radial-gradient(circle at 35% 30%,#224f83,#08172f 55%,#02050c);border:2px solid var(--cyan);box-shadow:0 0 35px rgba(33,216,255,.5),inset 0 0 50px rgba(142,64,255,.25);animation:float 3.5s ease-in-out infinite;z-index:3}.ring{position:absolute;border:2px solid rgba(33,216,255,.6);border-radius:50%;transform:rotateX(72deg);box-shadow:0 0 20px rgba(33,216,255,.3)}.r1{width:350px;height:350px;animation:spin 10s linear infinite}.r2{width:430px;height:430px;border-color:rgba(255,50,189,.38);animation:spin2 13s linear infinite}.pedestal{position:absolute;bottom:30px;width:360px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(ellipse,#143a68,#061021 68%);border:2px solid #28c9ff;box-shadow:0 0 45px rgba(33,216,255,.42);transform:rotateX(58deg)}.pedestal span,.pedestal small{transform:rotateX(-58deg);position:absolute}.pedestal span{font-weight:1000;letter-spacing:3px}.pedestal small{margin-top:40px;color:#8eb1d1}.controls{position:absolute;right:30px;bottom:24px;z-index:10;display:flex;align-items:center;gap:14px}.controls button{width:46px;height:46px;border-radius:50%;border:1px solid var(--cyan);background:#061225;color:#fff;font-size:30px;cursor:pointer}.controls button:hover{background:#0e3154}.controls div{font-weight:900;color:#9eb9d5}.controls #counter{color:var(--cyan)}
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #15375d;background:#06101f}.trust div{padding:20px;display:grid;grid-template-columns:35px 1fr;column-gap:8px;align-items:center}.trust b{font-size:12px}.trust small{grid-column:2;color:#839ab5}footer{display:flex;align-items:center;gap:10px;padding:25px 40px;background:#020611;color:#8ca4c0}footer img{width:42px;height:42px;object-fit:cover;border-radius:8px}footer small{display:block}footer p{margin-left:auto;font-size:12px}@keyframes float{50%{transform:translateY(-18px) rotateY(8deg)}}@keyframes spin{to{transform:rotateX(72deg) rotateZ(360deg)}}@keyframes spin2{to{transform:rotateX(72deg) rotateZ(-360deg)}}
@media(max-width:900px){.topbar nav{display:none}.mall{grid-template-columns:92px 1fr}.rail{padding:15px 7px}.rail-title strong,.rail-title span,.rail-title small,.rail-btn span:last-child{display:none}.rail-btn{grid-template-columns:30px 1fr;height:58px}.showcase{grid-template-columns:1fr;padding:30px 24px 80px}.stage{height:320px}.orb{width:150px;height:150px;font-size:65px}.r1{width:240px;height:240px}.r2{width:300px;height:300px}.pedestal{width:260px}.showcase-wrap{min-height:780px}.trust{grid-template-columns:1fr 1fr}}@media(max-width:520px){.mall{display:block}.rail{position:sticky;top:70px;z-index:30;display:flex;overflow-x:auto;padding:7px;background:#041020}.rail-title{display:none}.rail-btn{min-width:62px;width:62px;display:flex;justify-content:center;padding:0}.rail-btn b,.rail-btn span:last-child{display:none}.rail-btn .ri{font-size:24px}.rail-btn:hover,.rail-btn.active{transform:none}.showcase{padding:35px 18px 90px}.showcase h2{font-size:39px}.showcase p{font-size:15px}.showcase-wrap{min-height:820px}.trust{grid-template-columns:1fr}footer{padding:20px;flex-wrap:wrap}footer p{width:100%;margin-left:0}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.clik-welcome{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;background:#020611;transition:opacity .75s ease,visibility .75s ease}
.clik-welcome.leave{opacity:0;visibility:hidden;pointer-events:none}.clik-bg{position:absolute;inset:0;background:url('stylo-shopping-premium.webp') center/cover no-repeat;animation:welcomeZoom 8s ease-in-out infinite alternate}.clik-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,5,14,.88),rgba(1,5,14,.22) 50%,rgba(1,5,14,.5)),linear-gradient(0deg,rgba(1,5,14,.75),transparent 55%)}.clik-content{position:relative;z-index:2;width:min(560px,86vw);margin-right:42%;padding:34px;text-align:left}.welcome-logo{width:82px;height:82px;object-fit:cover;border-radius:18px;box-shadow:0 0 35px rgba(36,216,255,.35)}.clik-content>span{display:block;margin-top:18px;color:#28d8ff;font-weight:1000;letter-spacing:3px}.clik-content h1{font-size:clamp(42px,5.5vw,78px);line-height:.95;margin:10px 0 24px;text-shadow:0 0 30px rgba(36,216,255,.3)}#enterShopping{padding:16px 24px;border:1px solid #24d8ff;border-radius:14px;background:linear-gradient(135deg,#137cff,#27dcff);color:#00111c;font-weight:1000;letter-spacing:1px;cursor:pointer;box-shadow:0 0 35px rgba(36,216,255,.35)}.clik-content small{display:block;margin-top:12px;color:#afc4da}.sound-toggle{position:fixed;right:20px;bottom:22px;z-index:1000;width:52px;height:52px;border-radius:50%;border:1px solid #25d9ff;background:rgba(3,13,29,.92);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 0 25px rgba(36,216,255,.25)}@keyframes welcomeZoom{from{transform:scale(1.01)}to{transform:scale(1.055)}}@media(max-width:800px){.clik-content{margin:0;text-align:center}.clik-overlay{background:rgba(1,5,14,.62)}}@media(prefers-reduced-motion:reduce){.clik-bg{animation:none}}

/* V3.1 — entrada refinada aprovada */
.clik-content{
  width:min(430px,82vw);
  margin-right:50%;
  padding:24px;
}
.clik-content .welcome-logo{display:none!important}
.clik-content>span{
  font-size:11px;
  letter-spacing:2.4px;
  opacity:.88;
}
.clik-content h1{
  font-size:clamp(27px,3.2vw,46px);
  line-height:1.05;
  max-width:390px;
  margin:8px 0 18px;
  font-weight:850;
  opacity:.94;
}
#enterShopping{
  padding:13px 20px;
  font-size:13px;
}
.clik-content small{
  font-size:11px;
  opacity:.8;
}
@media(max-width:800px){
  .clik-content{width:min(390px,88vw);margin:0 auto;padding-top:44vh}
  .clik-content h1{font-size:clamp(25px,8vw,38px);margin-inline:auto}
}

/* V3.2 PREMIUM — cenário realista aprovado */
.clik-overlay{
  background:linear-gradient(90deg,rgba(1,5,12,.54) 0%,rgba(1,5,12,.18) 36%,rgba(1,5,12,.08) 68%,rgba(1,5,12,.22) 100%),
             linear-gradient(0deg,rgba(1,5,12,.45),transparent 48%);
}
.clik-content{
  width:min(360px,78vw);
  margin-right:57%;
  padding:20px;
}
.clik-content>span{font-size:10px;letter-spacing:2px}
.clik-content h1{
  font-size:clamp(24px,2.6vw,38px);
  line-height:1.03;
  max-width:340px;
  margin:7px 0 15px;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
#enterShopping{padding:12px 18px;font-size:12px}
@media(max-width:800px){
 .clik-content{margin:0 auto;width:min(350px,88vw);padding-top:48vh;text-align:center}
}