html{scroll-behavior:smooth}
body{background:#050508;color:#fff;font-family:Inter,sans-serif;overflow-x:hidden}
.bg-grid{background-image:radial-gradient(rgba(139,92,246,.12) 1px,transparent 1px);background-size:32px 32px}
.neon{background:linear-gradient(90deg,#8B5CF6,#C084FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.glow,.glow-box{box-shadow:0 0 40px -10px rgba(139,92,246,.45);border:1px solid rgba(139,92,246,.3)}
.btn{background:linear-gradient(90deg,#8B5CF6,#C084FC);transition:.3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px -8px rgba(192,132,252,.8)}
.card{background:#14141E;border:1px solid rgba(255,255,255,.08);transition:.4s}
.card:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5);box-shadow:0 20px 40px -20px rgba(139,92,246,.4)}
.reveal{opacity:0;transform:translateY(30px);transition:1s cubic-bezier(.2,.7,.2,1)}
.reveal.on{opacity:1;transform:none}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.45;animation:fl 12s ease-in-out infinite alternate}
@keyframes fl{to{transform:translate(50px,-40px) scale(1.2)}}
.chip{border:1px solid rgba(255,255,255,.15);transition:.2s}
.chip.act,.chip:hover{background:#8B5CF6;color:#050508;border-color:#8B5CF6;font-weight:600}
.nav a{position:relative}
.nav a:after{content:'';position:absolute;left:0;bottom:-4px;height:2px;width:0;background:#8B5CF6;transition:.3s}
.nav a:hover:after{width:100%}
#drawer{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.phone-frame{position:relative;overflow:hidden;aspect-ratio:9/18.5;border:0;border-radius:1.5rem;background:transparent;
 box-shadow:0 30px 80px -25px var(--glow,rgba(139,92,246,.55)),0 0 70px -20px rgba(192,132,252,.35);transition:background .5s,box-shadow .5s}
.phone-frame.flat-edges{border-radius:1.2rem}
.shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);z-index:10;pointer-events:none;background-size:250% 100%;animation:sh 4.5s linear infinite}
@keyframes sh{from{background-position:150% 0}to{background-position:-100% 0}}

.hero-bg{background:radial-gradient(ellipse at 20% 10%,rgba(139,92,246,.28),transparent 55%),radial-gradient(ellipse at 85% 80%,rgba(192,132,252,.35),transparent 55%),radial-gradient(circle at 50% 50%,#0b1226,#050508 70%)}
.hero-title{font-size:clamp(2.6rem,7.2vw,5.4rem);line-height:1.02;letter-spacing:.01em;font-weight:700;text-shadow:0 0 18px rgba(255,255,255,.25),0 0 40px rgba(139,92,246,.55),0 0 80px rgba(192,132,252,.45)}
.hero-title .neon{filter:drop-shadow(0 0 16px rgba(139,92,246,.8));text-shadow:none}
.pt{position:absolute;bottom:-10px;border-radius:50%;opacity:0;animation:rise linear infinite;pointer-events:none}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-105vh) translateX(30px);opacity:0}}
.fan{position:relative;height:clamp(340px,52vw,540px);--u:1;perspective:1200px}
@media(max-width:640px){.fan{--u:.62}}
.fan:hover{--s:1.22}
.fan-card{position:absolute;left:50%;top:50%;width:clamp(120px,15vw,200px);aspect-ratio:3/5;border-radius:1.7rem;border:2px solid #8B5CF6;
 transform:translate(-50%,-50%) translateX(calc(var(--x)*var(--u)*1px*var(--s,1))) translateY(calc(var(--y)*var(--u)*1px)) rotate(var(--r)) translateZ(0);
 transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s;z-index:var(--z);
 box-shadow:0 0 28px rgba(139,92,246,.6),0 35px 45px -15px rgba(0,0,0,.9),inset 0 0 18px rgba(255,255,255,.12)}
.fan-card:nth-child(even){border-color:#C084FC;box-shadow:0 0 28px rgba(192,132,252,.65),0 35px 45px -15px rgba(0,0,0,.9),inset 0 0 18px rgba(255,255,255,.12)}
.fan-card:hover{transform:translate(-50%,-50%) translateX(calc(var(--x)*var(--u)*1px*var(--s,1))) translateY(calc((var(--y) - 30)*var(--u)*1px)) rotate(0deg) scale(1.14);z-index:30;border-color:#fff;box-shadow:0 0 45px #8B5CF6,0 0 90px rgba(192,132,252,.7)}
.fan-card .fi{width:100%;height:100%;border-radius:1.5rem;overflow:hidden;animation:flt 6s ease-in-out infinite;animation-delay:var(--d)}
.fan-card img{width:100%;height:100%;object-fit:cover}
.fan-card:after{content:'';position:absolute;inset:0;border-radius:1.5rem;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:250% 100%;animation:sh 5s linear infinite;pointer-events:none}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.ring{position:absolute;left:50%;top:50%;width:min(86%,460px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:conic-gradient(from 0deg,#8B5CF6,#C084FC,#8B5CF6);filter:blur(70px);opacity:.5;animation:spin 14s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.noscroll{scrollbar-width:none}.noscroll::-webkit-scrollbar{display:none}
.pcard .pimg img.base{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pimg img.base{transform:scale(1.1)}
.detail{opacity:0;transition:opacity .55s;background-repeat:no-repeat;filter:contrast(1.18) saturate(1.25);overflow:hidden}
.pcard:hover .detail,.pimg.on .detail{opacity:1}
.detail:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 2px,transparent 2px 7px),radial-gradient(circle at 30% 20%,rgba(255,255,255,.3),transparent 45%);mix-blend-mode:overlay}
.detail:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:250% 100%;animation:sh 3.2s linear infinite}
.detail span{position:absolute;left:8px;bottom:8px;z-index:2;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(5,7,12,.85);border:1px solid rgba(139,92,246,.7);color:#67e8f9}
.btn-add{transition:.35s}
.pcard:hover .btn-add{box-shadow:0 0 22px rgba(139,92,246,.95),0 0 48px rgba(192,132,252,.7);filter:brightness(1.12);transform:translateY(-2px)}
.stars{color:#FBBF24;text-shadow:0 0 12px rgba(251,191,36,.55);letter-spacing:.12em}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ===== Páginas internas / componentes nuevos ===== */
.page-hero{position:relative;padding:9.5rem 1rem 3rem;overflow:hidden}
@media(min-width:1024px){#mmenu{display:none!important}}
.zmain{touch-action:manipulation}
.zmain #pmImg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){.zmain:hover #pmImg{transform:scale(2.2)}}
.zmain.zoom #pmImg{transform:scale(2.2)}
.relief{background:repeating-linear-gradient(135deg,rgba(255,255,255,.12) 0 2px,transparent 2px 7px),radial-gradient(circle at 30% 20%,rgba(255,255,255,.3),transparent 45%);mix-blend-mode:overlay}
.relief:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:250% 100%;animation:sh 3.2s linear infinite}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(180deg)}
.chev{transition:transform .3s}
.field{width:100%;background:rgba(5,7,12,.9);border:1px solid rgba(255,255,255,.18);border-radius:.85rem;padding:.7rem 1rem;font-size:.9rem;outline:none;transition:.2s}
.field:focus{border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.18)}
body.modal-open{overflow:hidden}


/* ===== Respaldo mientras carga Tailwind (evita parpadeos de overlays y paneles) ===== */
.hidden{display:none}
#drawer.translate-x-full{transform:translateX(100%)}
#toast{opacity:0;pointer-events:none}

/* Impresión del pedido */
@media print{header,footer,#wsFloat,#drawer,#ov,#toast,#pdWa,#pdPrint,.orb,#pedido a.rounded-full{display:none!important}body{background:#fff!important;color:#000!important}.card,.page-hero{background:#fff!important;border-color:#ccc!important}.neon,h1,h3,b{color:#000!important;-webkit-text-fill-color:#000!important;filter:none!important;text-shadow:none!important}}