:root{--cyan:#00d8ff;--pink:#ff2378;--muted:#9aa7b0;--panel:#071016;font-family:'Rajdhani',sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#020507;color:#f4f7f8}
button,input,select,textarea{font:inherit;color:inherit}.hidden{display:none!important}
b{font-weight:700}
/* ── carga ── */
#loader{position:fixed;inset:0;z-index:999;background:#010304;transition:opacity 1.3s ease}
#loader.out{opacity:0;pointer-events:none}
#smoke{position:absolute;inset:0;width:100%;height:100%}
.ld-center{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;width:min(900px,92vw);text-shadow:0 0 18px #000}
.brand,.brand-s{font-family:Oswald;font-style:italic;font-weight:700;letter-spacing:-3px;line-height:1;white-space:nowrap}
.brand .w,.brand-s .w{color:#fff}.brand .b,.brand-s .b{color:var(--cyan);text-shadow:0 0 28px rgba(0,216,255,.45)}
.brand{font-size:clamp(54px,10vw,140px);transform:skewX(-6deg)}
#press{font-family:Oswald;font-size:clamp(18px,2vw,26px);letter-spacing:5px;animation:blink 1.1s infinite}
#press small{display:block;font:500 12px Rajdhani;letter-spacing:2px;color:var(--muted);margin-top:6px}
@keyframes blink{50%{opacity:.35}}
/* ── fondo con luz dinámica ── */
#app{position:fixed;inset:0;overflow:hidden}
.bg{position:absolute;inset:-6%;background:url(/img/bg.jpg) center 42%/cover;filter:blur(14px) brightness(.55) saturate(1.1);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.12) translate(-1.5%,0)}to{transform:scale(1.2) translate(1.5%,-1%)}}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 46%,transparent 18%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.85));}
#light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle 280px at var(--mx,50%) var(--my,40%),rgba(0,216,255,.20),rgba(255,35,120,.06) 55%,transparent 72%)}
.flare{position:absolute;top:-30%;bottom:-30%;width:14%;left:-30%;pointer-events:none;mix-blend-mode:screen;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),rgba(0,216,255,.16),transparent);animation:sweep 9s linear infinite}
@keyframes sweep{to{left:130%}}
/* ── menú tipo pausa ── */
.stage{position:absolute;left:50%;top:50%;width:min(100vw,177.78vh);height:min(56.25vw,100vh);transform:translate(-50%,-50%)}
.brand-s{position:absolute;left:2.5%;top:5.6%;font-size:clamp(26px,3.2vw,60px);letter-spacing:-2px;transform-origin:left center}
.brand-s .b{text-shadow:0 0 16px rgba(0,216,255,.3)}
.card{position:absolute;border:1.5px solid rgba(235,242,246,.9);background:var(--panel);overflow:hidden;cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.5);transform:rotate(var(--r,0deg)) perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;animation:rise .7s both;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(40px) rotate(var(--r,0deg))}}
.card .ph{position:absolute;inset:0;background:var(--img) center/cover;filter:saturate(1.1) contrast(1.05) brightness(.85);animation:kb 14s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2.5%,-2%)}}
.card::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,5,8,.05) 30%,rgba(0,0,0,.82)),linear-gradient(115deg,rgba(0,216,255,.16),transparent 35%,transparent 70%,rgba(255,35,120,.12))}
.card::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;z-index:3;pointer-events:none;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:shine 6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.card:hover{border-color:#fff;z-index:30;box-shadow:0 0 0 2px rgba(0,216,255,.85),0 12px 36px rgba(0,0,0,.7),0 0 28px rgba(0,216,255,.25)}
.card:hover .ph{filter:saturate(1.2) brightness(1.05)}
.card .tx{position:absolute;left:6%;right:5%;bottom:7%;z-index:4;text-shadow:0 2px 8px #000}
.card .tx small{display:block;color:var(--cyan);font-size:clamp(10px,.95vw,17px);letter-spacing:1px}
.card .tx strong{font-family:Oswald;font-weight:500;font-size:clamp(16px,1.7vw,32px);letter-spacing:1.5px}
.card.main .tx strong{font-size:clamp(30px,4vw,76px);line-height:.9}
.card.main .tx strong em{color:var(--cyan);font-style:italic;font-weight:700}
.card .tx span{display:block;font-size:clamp(10px,.85vw,16px);letter-spacing:1px;color:#e6ecef;text-transform:uppercase}
.card .big{font-family:Oswald;color:var(--cyan);font-size:clamp(22px,2.2vw,42px)}
.quote{position:absolute;right:5%;top:7.5%;width:22%;color:#aab4ba;font-size:clamp(10px,.85vw,16px);line-height:1.25;letter-spacing:.3px}
.quote b{color:var(--cyan);font-size:24px;margin-right:6px}
.foot{position:absolute;left:4%;right:4%;bottom:3.6%;display:flex;gap:26px;align-items:center;font-size:clamp(10px,.78vw,15px);color:#d7dfe3}
.foot kbd,#back kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:2px solid #83e33d;border-radius:11px;color:#83e33d;font-weight:700;margin-right:5px;font-size:.85em}
.foot .live{margin-left:auto;font-size:clamp(13px,1vw,19px)}.foot .live b{color:var(--cyan)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#555;margin-right:6px}.dot.on{background:#3dff7a;box-shadow:0 0 10px #3dff7a}
/* ── paneles ── */
#panel{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,5,8,.93),rgba(3,9,12,.96));z-index:50;display:flex;flex-direction:column;padding:4vh 5vw;animation:in .35s both}
@keyframes in{from{opacity:0;transform:translateX(40px)}}
#panel header{display:flex;align-items:baseline;gap:22px;margin-bottom:18px;flex-wrap:wrap}
#panel h1{font-family:Oswald;font-weight:500;font-size:clamp(30px,4vw,54px);letter-spacing:4px}#psub{color:var(--cyan);letter-spacing:2px}
#back{background:transparent;border:1px solid #52616a;padding:6px 14px;cursor:pointer;font-family:Oswald;letter-spacing:2px}#back:hover{border-color:var(--cyan)}
#pbody{flex:1;overflow:auto;padding-right:8px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:20px}
.box{background:#0a1217;border:1px solid #2c3940;padding:16px}.box h3{font-family:Oswald;color:var(--cyan);letter-spacing:2px;margin-bottom:8px;font-weight:500}
.num{font-family:Oswald;font-size:42px;color:var(--cyan);line-height:1}.lbl{color:var(--muted);letter-spacing:2px;font-size:13px;text-transform:uppercase}
table{width:100%;border-collapse:collapse;margin-bottom:22px}th{text-align:left;color:var(--cyan);font-family:Oswald;font-weight:500;letter-spacing:2px;padding:8px;border-bottom:1px solid #3a4a52;font-size:14px}
td{padding:8px;border-bottom:1px solid #16232a;font-size:15px}tr:hover td{background:rgba(0,216,255,.05)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.tabs button,.btn{background:#0b151b;border:1px solid #27373f;padding:8px 16px;cursor:pointer;font-family:Oswald;letter-spacing:2px;font-size:14px}
.tabs button.on,.btn:hover,.tabs button:hover{border-color:var(--cyan);color:var(--cyan)}.btn.pri{background:var(--cyan);color:#041016;border:0;font-weight:700}.btn.red:hover{border-color:#ff394d;color:#ff394d}
input,select,textarea{background:#0b151b;border:1px solid #27373f;padding:8px 10px;margin:3px 6px 3px 0;min-width:140px}input:focus,select:focus{outline:0;border-color:var(--cyan)}
.row{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:10px}.note{color:var(--muted);font-size:14px;margin:8px 0}
.pill{padding:2px 9px;border:1px solid #52616a;font-size:12px;letter-spacing:1px}.pill.done{border-color:#3dff7a;color:#3dff7a}.pill.failed{border-color:#ff394d;color:#ff394d}.pill.pending,.pill.processing{border-color:#ffc43d;color:#ffc43d}
.toast{position:fixed;right:20px;bottom:20px;z-index:2000;background:#071016;border:1px solid var(--cyan);padding:12px 18px;animation:in .3s both}
.pager{display:flex;gap:6px;margin-bottom:10px}
@media(max-width:900px){
  #app{overflow:auto}.stage{position:relative;left:0;top:0;transform:none;width:100%;height:auto;padding:90px 14px 70px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .card{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;aspect-ratio:16/10;transform:none}
  .quote,.foot .hide-m{display:none}.brand-s{position:fixed;z-index:5;top:14px}.foot{position:fixed;bottom:10px}}

/* ── pantalla de carga: adrenalina ── */
#loader{overflow:hidden}#loader.shake{animation:shake .5s}
@keyframes shake{10%{transform:translate(-8px,4px)}30%{transform:translate(9px,-5px)}50%{transform:translate(-6px,-3px)}70%{transform:translate(5px,5px)}}
.ld-grid{position:absolute;left:-20%;right:-20%;bottom:0;height:46%;pointer-events:none;opacity:.5;transform:perspective(380px) rotateX(62deg);transform-origin:bottom;
  background:linear-gradient(rgba(0,216,255,.45) 1px,transparent 1px) 0 0/100% 46px,linear-gradient(90deg,rgba(0,216,255,.35) 1px,transparent 1px) 0 0/70px 100%;
  -webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%);animation:grid 1.1s linear infinite}
@keyframes grid{to{background-position:0 46px,0 0}}
.ld-scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.ld-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 46%,transparent 30%,rgba(0,0,0,.78))}
.ld-top{position:absolute;left:4%;right:4%;top:4vh;display:flex;justify-content:space-between;font-family:Oswald;letter-spacing:4px;font-size:clamp(10px,.9vw,14px);color:#7f8e97}
.ld-top span:last-child{color:var(--cyan);font-variant-numeric:tabular-nums}
.ld-kicker{display:flex;align-items:center;justify-content:center;gap:16px;font-family:Oswald;letter-spacing:8px;font-size:clamp(11px,1.1vw,16px);color:var(--pink);margin-bottom:14px}
.ld-kicker i{width:clamp(30px,6vw,90px);height:2px;background:linear-gradient(90deg,transparent,var(--pink))}.ld-kicker i:last-child{transform:scaleX(-1)}
.brand.glitch{position:relative;display:inline-block;animation:pulse 2.4s ease-in-out infinite}
.brand.glitch::before,.brand.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none;mix-blend-mode:screen;opacity:.0;animation:glitch 4.5s steps(1) infinite}
.brand.glitch::before{color:var(--pink);clip-path:inset(0 0 55% 0)}.brand.glitch::after{color:var(--cyan);clip-path:inset(55% 0 0 0);animation-delay:.08s}
@keyframes glitch{0%,90%,100%{opacity:0;transform:none}92%{opacity:.9;transform:translate(-7px,1px)}94%{opacity:.9;transform:translate(6px,-2px)}96%{opacity:.8;transform:translate(-3px,0)}}
@keyframes pulse{50%{filter:drop-shadow(0 0 22px rgba(0,216,255,.35))}}
.ld-slogan{font-family:Oswald;letter-spacing:clamp(4px,.8vw,12px);font-size:clamp(11px,1.15vw,18px);color:#c7d2d8;margin:6px 0 clamp(18px,3.4vh,40px)}
.rpm{display:flex;gap:4px;height:clamp(14px,2.2vh,22px);margin:0 auto;width:min(720px,90%);transform:skewX(-18deg)}
.rpm i{flex:1;background:rgba(255,255,255,.09);transition:background .08s,box-shadow .08s}
.rpm i.on{background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.rpm i.on.m{background:#ffd23d;box-shadow:0 0 12px #ffd23d}.rpm i.on.r{background:#ff2b4a;box-shadow:0 0 14px #ff2b4a}
.ld-meta{display:flex;justify-content:space-between;width:min(720px,90%);margin:10px auto 0;font-family:Oswald;letter-spacing:4px;color:#aab4ba;font-size:14px}
.ld-meta .spd{color:#fff}.ld-meta .spd b{font-size:20px;color:var(--cyan);font-variant-numeric:tabular-nums}
.lights{display:flex;justify-content:center;gap:clamp(8px,1.4vw,18px);margin:clamp(18px,3vh,34px) 0 16px}
.lights i{width:clamp(18px,2.6vw,34px);aspect-ratio:1;border-radius:50%;background:#1a0b0e;border:2px solid #3a1a20;transition:background .1s,box-shadow .1s}
.lights i.on{background:#ff2b2b;border-color:#ff7a7a;box-shadow:0 0 22px #ff2b2b,0 0 60px rgba(255,43,43,.6)}
.lights.go i{background:#3dff7a;border-color:#b7ffd0;box-shadow:0 0 22px #3dff7a,0 0 70px rgba(61,255,122,.7)}
#press{font-size:clamp(16px,1.8vw,24px)}
/* ── snapshots ── */
.snaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.snap{position:relative;aspect-ratio:16/10;border:1.5px solid rgba(235,242,246,.85);background:#071016 center/cover;overflow:hidden;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.5);transition:transform .2s,border-color .2s,box-shadow .2s}
.snap:hover{transform:translateY(-4px) scale(1.015);border-color:#fff;box-shadow:0 0 0 2px rgba(0,216,255,.85),0 14px 34px rgba(0,0,0,.7)}
.snap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.snap-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85));padding:10px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.snap .rank{position:absolute;top:8px;left:8px;font-family:Oswald;font-style:italic;font-weight:700;font-size:22px;color:#041016;background:var(--cyan);padding:0 10px;transform:skewX(-12deg)}
.snap-tx strong{display:block;font-family:Oswald;font-weight:500;letter-spacing:1.5px;font-size:18px;text-shadow:0 2px 8px #000}.snap-tx span{color:#c9d3d8;font-size:13px;letter-spacing:1px}
.snap-st{display:flex;gap:14px;align-items:center;color:#e6ecef;font-size:14px}
.vote{background:rgba(0,0,0,.55);border:1px solid #52616a;padding:3px 12px;cursor:pointer;font-family:Oswald;letter-spacing:1px}.vote:hover{border-color:var(--cyan)}
.vote.on{background:var(--cyan);border-color:var(--cyan);color:#041016}.vote.on b{color:#041016}
.modal{position:fixed;inset:0;z-index:1500;background:rgba(0,3,5,.92);display:grid;place-items:center;padding:3vh 3vw;animation:in .25s both}
.m-box{position:relative;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);width:min(1280px,100%);max-height:94vh;border:1.5px solid rgba(235,242,246,.85);background:#071016;box-shadow:0 0 60px rgba(0,216,255,.15)}
.m-img{background:#000;display:grid;place-items:center;min-height:0}.m-img img{max-width:100%;max-height:94vh;object-fit:contain}
.m-side{display:flex;flex-direction:column;padding:18px;gap:10px;min-height:0;max-height:94vh}
.m-side h3{font-family:Oswald;color:var(--cyan);letter-spacing:2px;font-weight:500;font-size:24px}
.m-x{position:absolute;right:8px;top:8px;z-index:3;background:rgba(0,0,0,.6);border:1px solid #52616a;width:34px;height:34px;cursor:pointer}.m-x:hover{border-color:var(--cyan)}
.m-coms{flex:1;overflow:auto;border-top:1px solid #1d2a31;padding-top:8px;min-height:90px}
.com{padding:7px 0;border-bottom:1px solid #16232a;font-size:15px;overflow-wrap:anywhere}.com b{color:var(--cyan);margin-right:8px}.com small{color:var(--muted);margin-left:8px}
.m-form{display:flex;gap:6px}.m-form input{flex:1;min-width:0;margin:0}
@media(max-width:900px){.m-box{grid-template-columns:1fr;overflow:auto}.m-img img{max-height:44vh}.m-side{max-height:none}.ld-top span:first-child{display:none}}
.card.wide .tx strong{font-size:clamp(13px,1.3vw,26px);line-height:1.05}

/* presentación de las mejores fotos dentro de la tarjeta Snapshots (la imagen genérica queda detrás por si falla alguna) */
.ph.snapshow .ss{position:absolute;inset:0;background:center/cover;opacity:0;transition:opacity 1.2s ease}
.ph.snapshow .ss.on{opacity:1}

/* ───────── TIENDA ───────── */
.shopgrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.prod{display:flex;flex-direction:column;padding:0;overflow:hidden}
.prod .pimg{position:relative;aspect-ratio:16/9;background:#05090c;display:grid;place-items:center;border-bottom:1px solid #2c3940;overflow:hidden}
.prod .pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}.prod:hover .pimg img{transform:scale(1.05)}
.prod .pimg .pill{position:absolute;left:8px;top:8px;background:rgba(2,5,7,.88)}.prod .pimg .pill.hot{left:auto;right:8px;border-color:var(--pink);color:var(--pink)}
.prod .pb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}.prod .pb h3{margin:0}.prod .pb p{color:var(--muted);font-size:15px;flex:1}
.prod.sold{opacity:.5}.prod .btn[disabled]{opacity:.45;cursor:not-allowed}
.pprice{font-family:Oswald;font-size:24px;letter-spacing:1px}.pprice small{color:var(--muted);font-size:15px;margin-left:10px}
.payopt{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;margin-bottom:8px}
.payopt small{display:block;color:var(--muted);font-family:Rajdhani;letter-spacing:0;font-size:13px}.payopt b{font-family:Oswald;white-space:nowrap}
.m-side input{width:100%;margin:3px 0}.m-side .lbl{margin-top:8px}
/* formularios del admin */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:14px}
.fgrid label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--muted);letter-spacing:1px}
.fgrid input:not([type=checkbox]),.fgrid select,.fgrid textarea{margin:0;min-width:0;width:100%}.fgrid .w2{grid-column:1/-1}.fgrid small.note{margin:2px 0 0;letter-spacing:0}
.thumb{width:56px;height:36px;object-fit:cover;border:1px solid #2c3940;display:block}
.tgl{display:flex;align-items:center;gap:8px;cursor:pointer}code.copy{cursor:pointer;word-break:break-all;color:var(--cyan)}