/* CreativeCube web UI, estilo de las referencias de Angelo (tienda tipo simulador):
   ventanas morado oscuro con borde negro "a mano", títulos Lilita One blancos con contorno,
   pestañas turquesa con icono que sobresale, tarjetas de color con rayos de luz, botones lima y dorados. */
:root{
  color-scheme:dark;
  --win:#2a2140;--win2:#211a33;--winLine:#4a3a6e;--ink:#120c1c;
  --teal:#1ea893;--tealD:#0f6f60;--lime1:#c3f71a;--lime2:#5fd400;--lime3:#2c9e00;--limeB:#0d4a00;
  --gold1:#fff07a;--gold2:#ffc21a;--gold3:#ff9900;--goldB:#7a4300;
  --red1:#ff4d7d;--red2:#c4134a;--redB:#5c0620;--blue1:#4fc0ff;--blue2:#1f7fe0;--blueB:#0b3a73;
  --purple:#8c4bdc;--orange:#ff8a1f;--pink:#e8448a;--green:#36c25a;--sky:#2fa8ff;--yellow:#ffc21a;--crimson:#e0324f;
  --fH:'Lilita One','Nunito',system-ui,sans-serif;--fB:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#46d6ff;color:#fff;font:800 16px/1.45 var(--fB);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--fH);line-height:1.02;letter-spacing:.3px}
p{margin:0}
:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* texto con contorno negro y sombra dura (como los títulos del juego) */
.tx,.btn,.tab b,.nb b,h1,h2,h3,h4,.win-t,.lbl{font-family:var(--fH);color:#fff;-webkit-text-stroke:var(--sw,6px) var(--ink);paint-order:stroke fill;text-shadow:0 var(--sh,3px) 0 var(--ink)}
.gold,.lime{color:#ffd23a;-webkit-text-stroke:var(--sw,6px) var(--ink);paint-order:stroke fill;text-shadow:0 var(--sh,3px) 0 var(--ink)}
.lime{color:#a4f022}
.lbl{font-family:var(--fH);color:#fff;-webkit-text-stroke:var(--sw,6px) var(--ink);paint-order:stroke fill;text-shadow:0 var(--sh,3px) 0 var(--ink)}
.lbl{--sw:5px;display:block;text-align:center;font-size:26px;text-transform:uppercase}

/* borde negro irregular, dibujado "a mano": capa aparte con filtro SVG */
.rough{position:relative;isolation:isolate}
.rough::after{content:"";position:absolute;inset:-3px;border:var(--bw,5px) solid var(--ink);border-radius:var(--br,4px);filter:url(#rough);pointer-events:none;z-index:5}

/* ---------- 3D ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#skyFallback{position:fixed;inset:0;z-index:-1;background:linear-gradient(rgb(0,150,232),rgb(18,188,245) 35%,rgb(70,214,255) 65%,rgb(150,232,255))}
#loader{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--win);border:4px solid var(--ink);font:400 18px var(--fH);transition:opacity .4s}
#loader.done{opacity:0;pointer-events:none}
#loader i{width:150px;height:18px;border:3px solid var(--ink);background:var(--win2);border-radius:4px;overflow:hidden}
#loader b{display:block;height:100%;width:0;background:linear-gradient(180deg,var(--lime1),var(--lime2) 60%,var(--lime3))}

/* ---------- botones ---------- */
.btn{--a:var(--lime1);--b:var(--lime2);--c:var(--lime3);--d:var(--limeB);--sw:6px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 24px 13px;font-size:24px;text-transform:uppercase;line-height:1;cursor:pointer;
  background:linear-gradient(180deg,var(--a),var(--b) 55%,var(--c));border:3px solid var(--d);border-radius:5px;
  box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.55),inset 0 -5px 0 rgba(0,0,0,.18);transition:transform .12s ease-out,filter .12s}
.btn img{width:38px;height:38px;margin:-10px 0;filter:drop-shadow(0 3px 0 var(--ink))}
.btn svg{filter:drop-shadow(0 2px 0 var(--ink))}
.btn:hover{transform:scale(1.06);filter:brightness(1.07)}
.btn:active{transform:scale(.93)}
.btn.gold-b{--a:var(--gold1);--b:var(--gold2);--c:var(--gold3);--d:var(--goldB)}
.btn.blue{--a:var(--blue1);--b:#2b98f0;--c:var(--blue2);--d:var(--blueB)}
.btn.red{--a:var(--red1);--b:#e0285f;--c:var(--red2);--d:var(--redB)}
.btn.teal,.btn.cyan{--a:#47d6bf;--b:var(--teal);--c:var(--tealD);--d:#063d35}
.btn.purple{--a:#b07cff;--b:#8a4fe6;--c:#6a2fc4;--d:#2c0f5c}
.btn.orange{--a:#ffc35a;--b:#ff9a1f;--c:#e86f00;--d:#6b2e00}
.btn.sm{--sw:5px;padding:7px 14px 9px;font-size:18px}
.rbx{display:inline-block;width:.9em;height:.9em;margin-right:2px;vertical-align:-.08em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1l8 4.6v8.8L10 19l-8-4.6V5.6z' fill='%23fff' stroke='%23120c1c' stroke-width='2.4'/%3E%3Cpath d='M10 6l4.3 2.5v5L10 16l-4.3-2.5v-5z' fill='%2387d63a' stroke='%23120c1c' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- barra superior: botones turquesa con icono que sobresale ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:flex-end;gap:12px;padding:34px max(16px,3vw) 10px;pointer-events:none}
.nav>*{pointer-events:auto}
.brand{--sw:6px;display:flex;align-items:center;gap:8px;margin-right:auto;padding:4px 4px 6px 0;background:none;border:0;font:400 23px var(--fH)}
.brand img{width:40px;height:40px;filter:drop-shadow(0 2px 0 var(--ink))}
.navlinks{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.nb,.tab{--t1:#33c9b1;--t2:var(--teal);--t3:var(--tealD);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100px;height:58px;padding:0 4px 4px;border-radius:6px;cursor:pointer;
  background:linear-gradient(180deg,var(--t1),var(--t2) 60%,var(--t3));border:3px solid #0a3b33;box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.2);transition:transform .12s ease-out}
.nb img,.tab img{position:absolute;left:50%;top:-34px;width:68px;height:68px;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(0 3px 0 rgba(18,12,28,.6));transition:transform .22s cubic-bezier(.3,1.8,.5,1)}
.nb b,.tab b{--sw:5px;--sh:2px;position:relative;font-size:17px;line-height:1;text-transform:uppercase;white-space:nowrap}
.nb:hover,.tab:hover{transform:scale(1.06)}
.nb:hover img,.tab:hover img{transform:translateX(-50%) rotate(6deg) scale(1.12) translateY(-3px)}
.nb:active,.tab:active{transform:scale(.93)}
.nb[aria-current=page],.tab[aria-selected=true]{--t1:#ffe46a;--t2:#ffbf1a;--t3:#f09300;border-color:var(--goldB)}
.lang{min-width:58px}
.burger{display:none}

/* ---------- ventana ---------- */
main{position:relative;z-index:2}
.sec{min-height:115vh;display:flex;align-items:center;padding-block:140px 80px;padding-left:max(16px,4vw);padding-right:max(16px,4vw)}
.sec.r{justify-content:flex-end}
.win{--bw:6px;position:relative;width:min(640px,100%);margin-top:34px;background:var(--win);border-radius:6px;box-shadow:inset 0 0 0 3px var(--winLine),0 14px 0 rgba(18,12,28,.35)}
.win.wide{width:min(1120px,100%)}
.win-h{position:relative;display:flex;align-items:center;min-height:76px;padding:10px 70px 10px 128px;background:var(--win2);border-bottom:4px solid var(--ink);border-radius:6px 6px 0 0}
.win-ic{position:absolute;left:-14px;top:-40px;width:122px;height:122px;transform:rotate(-6deg);filter:drop-shadow(0 4px 0 rgba(18,12,28,.6));pointer-events:none;z-index:6}
.win-t{--sw:9px;--sh:5px;font-size:clamp(30px,4vw,54px);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:4px 6px 8px}
.win-b{padding:22px 22px 24px}
.win-b>*+*{margin-top:18px}
.lead{font:800 17px/1.45 var(--fB);color:#e9e2ff;text-shadow:0 2px 0 var(--ink);max-width:640px}
.close{--sw:6px;position:absolute;right:16px;top:12px;width:54px;height:54px;z-index:7;display:grid;place-items:center;cursor:pointer;font:400 34px/1 var(--fH);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);
  background:linear-gradient(180deg,var(--red1),#e0285f 55%,var(--red2));border:3px solid var(--redB);border-radius:5px;box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.45);transition:transform .12s}
.close:hover{transform:scale(1.08) rotate(4deg)}.close:active{transform:scale(.92)}
.inset{background:rgba(18,12,28,.45);border:3px solid var(--ink);border-radius:5px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);padding:10px 14px}

/* pop al aparecer */
[data-rv]{transform:scale(.94);transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
[data-rv].in{transform:none}

/* ---------- tarjetas de color con rayos (como las de la tienda) ---------- */
.card{--c:var(--purple);--c2:color-mix(in srgb,var(--c) 55%,#ff9a3c);position:relative;display:block;overflow:hidden;border-radius:5px;isolation:isolate;
  background:radial-gradient(120% 120% at 22% 40%,rgba(255,255,255,.55),transparent 45%),linear-gradient(120deg,var(--c),var(--c2));
  border:4px solid var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);transition:transform .14s ease-out}
.card::before{content:"";position:absolute;inset:-60%;z-index:-1;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.22) 0 7deg,transparent 7deg 20deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0,transparent 55%);mask:radial-gradient(circle at 50% 50%,#000 0,transparent 55%);left:-78%;top:-70%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
a.card:hover{transform:scale(1.035) rotate(-.4deg)}a.card:active{transform:scale(.96)}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:16px;padding-block:130px 8vh;padding-left:max(16px,4vw);padding-right:max(16px,4vw)}
.hero h1{--sw:12px;--sh:7px;font-size:clamp(44px,7vw,104px);text-transform:uppercase;max-width:900px;line-height:.98}
.hero h1 .gold{display:block}
.hero .inset{max-width:560px;font-size:17px;color:#fff;text-shadow:0 2px 0 var(--ink);background:rgba(42,33,64,.82)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:flex;align-items:baseline;gap:8px;background:rgba(42,33,64,.82)}
.chip b{--sw:6px;--sh:3px;font:400 30px var(--fH)}
.chip span{font:400 16px var(--fH);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink);text-transform:uppercase}

/* juegos */
.total{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.total .big{--sw:10px;--sh:6px;font:400 clamp(48px,6vw,78px)/1 var(--fH);font-variant-numeric:tabular-nums}
.total span:last-child{font:400 20px var(--fH);text-transform:uppercase;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.game .shot{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:4px solid var(--ink);background:#000}
.game .shot{isolation:isolate;transform:translateZ(0)}
.game .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease;will-change:opacity;transform:translateZ(0);backface-visibility:hidden}
.game .ic{z-index:3}
.game .shot img.on{opacity:1}
.game .ic{position:absolute;left:8px;top:calc(100% - 46px);width:62px;height:62px;border:4px solid var(--ink);border-radius:8px;z-index:2;transform:rotate(-6deg)}
.game .live{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:6px;padding:3px 9px 4px;background:rgba(18,12,28,.75);border:3px solid var(--ink);border-radius:5px;font:400 14px var(--fH);text-transform:uppercase;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.game .live i{width:11px;height:11px;border-radius:50%;background:var(--lime1);border:2px solid var(--ink);animation:blink 1.2s steps(2) infinite}
.game .live.off i{background:#9a93ad;animation:none}
@keyframes blink{50%{opacity:.35}}
.game .body{padding:30px 10px 12px}
.game h3{--sw:6px;font-size:21px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px;padding:2px 2px 4px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat{background:rgba(18,12,28,.5);border:3px solid var(--ink);border-radius:5px;padding:4px 8px 5px}
.stat b{display:block;--sw:6px;font:400 26px var(--fH);font-variant-numeric:tabular-nums}
.stat span{font:400 13px var(--fH);text-transform:uppercase;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.bar{height:18px;margin-top:10px;border:3px solid var(--ink);border-radius:9px;background:rgba(18,12,28,.55);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(180deg,var(--lime1),var(--lime2) 60%,var(--lime3));border-radius:6px;transition:width 1.4s cubic-bezier(.2,1,.3,1)}

/* experiencia */
.xp{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.xp div{text-align:center;padding:8px 6px}
.xp b{display:block;--sw:9px;--sh:5px;font:400 48px var(--fH)}
.xp span{font:400 15px var(--fH);text-transform:uppercase;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink)}
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.skill{display:flex;gap:10px;align-items:center;padding:10px 12px 10px 6px}
.skill .ico{flex:none}
.skill .ico img{width:64px;height:64px;filter:drop-shadow(0 3px 0 rgba(18,12,28,.6));transform:rotate(-6deg);transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.skill:hover .ico img{transform:rotate(6deg) scale(1.12)}
.skill h3{--sw:6px;font-size:21px;text-transform:uppercase}
.skill p{font-size:14px;text-shadow:0 2px 0 var(--ink);margin-top:2px}

/* clientes */
.marq{overflow:hidden;margin:0 -22px;padding:8px 0}
.track{display:flex;gap:14px;width:max-content;animation:mq 40s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq.rev .track{animation-direction:reverse;animation-duration:46s}
@keyframes mq{to{transform:translateX(-33.3333%)}}
.cl{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;white-space:nowrap}
.cl img{width:54px;height:54px;border-radius:50%;border:4px solid var(--ink);object-fit:cover;background:#fff}
.cl b{display:block;--sw:5px;font:400 19px var(--fH);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink)}
.cl span span{font:400 15px var(--fH);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}

/* videos */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px}
.vid{flex:none;width:280px;scroll-snap-align:start}
.vid .th{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:4px solid var(--ink)}
.vid .th img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vid:hover .th img{transform:scale(1.08)}
.play{position:absolute;left:50%;top:50%;width:58px;height:42px;margin:-21px 0 0 -29px;border:3px solid var(--redB);border-radius:6px;background:linear-gradient(180deg,var(--red1),var(--red2));box-shadow:0 0 0 3px var(--ink);display:grid;place-items:center;transition:transform .2s cubic-bezier(.3,1.8,.5,1)}
.vid:hover .play{transform:scale(1.18)}
.play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px;filter:drop-shadow(0 2px 0 var(--ink))}
.vid .meta{padding:8px 10px 10px}
.vid h3{--sw:5px;font-size:16px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px;padding-top:2px}
.vid small{display:block;margin-top:5px;font:400 14px var(--fH);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.vid.short{width:170px}.vid.short .th{aspect-ratio:9/16}
.sub{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sub h3{--sw:7px;font-size:30px;text-transform:uppercase}

/* tienda */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.prod{display:flex;flex-direction:column}
.prod>img{height:auto;aspect-ratio:16/9;width:100%;object-fit:cover;border-bottom:4px solid var(--ink)}
.prod .pi{display:flex;flex-direction:column;gap:10px;padding:8px 10px 12px;flex:1}
.prod h3{--sw:5px;font-size:17px;line-height:1.1;flex:1;padding-top:2px}
.prod .btn{align-self:stretch}

/* portafolio */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:42px 16px;padding-top:30px}
.cat{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:132px;padding:0 6px 10px;text-align:center;overflow:visible}
.cat img{pointer-events:none;width:108px;height:108px;margin-top:-30px;transform:rotate(-6deg);filter:drop-shadow(0 4px 0 rgba(18,12,28,.6));transition:transform .22s cubic-bezier(.3,1.8,.5,1)}
.cat:hover img{transform:rotate(6deg) scale(1.12)}
.cat b{--sw:5px;font:400 18px/1.05 var(--fH);text-transform:uppercase;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink)}
.cat span{font:400 14px var(--fH);margin-top:3px;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.tabs{display:flex;gap:14px;flex-wrap:wrap;padding-top:30px}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.item{padding:6px}
.item img{aspect-ratio:1;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(18,12,28,.4))}
.item b{display:block;font:400 13px/1.15 var(--fH);height:30px;overflow:hidden;margin-top:4px;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}

/* contacto + pie */
.cta .ctas{display:flex;flex-wrap:wrap;gap:16px}
footer{position:relative;z-index:2;padding-block:20px 30px;padding-left:max(16px,4vw);padding-right:max(16px,4vw)}
footer .win{width:min(1180px,100%);margin:0 auto}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:22px}
.foot h4{--sw:6px;font-size:21px;text-transform:uppercase;margin-bottom:8px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a,.foot button.link{font:800 15px var(--fB);color:#e9e2ff;text-shadow:0 2px 0 var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.foot a:hover,.foot button.link:hover{color:var(--gold1)}
.foot p{color:#e9e2ff;text-shadow:0 2px 0 var(--ink)}
.legal{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;font-size:13px;color:#d6cdf0;text-shadow:0 2px 0 var(--ink);margin-top:18px;padding-top:14px;border-top:3px solid var(--ink)}
.lrbadge{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;background:#fff;color:#111;border:3px solid var(--ink);border-radius:5px;font-weight:900;line-height:1.15;text-shadow:none;transition:transform .12s}
.lrbadge:hover{transform:scale(1.06)}
.lrbadge svg{width:30px;height:30px}
.lrbadge small{display:block;font-weight:700;font-size:11px;color:#444}
.socials{display:flex;gap:12px;margin-top:12px}
.socials a{width:46px;height:46px;display:grid;place-items:center;border-radius:6px;border:3px solid var(--blueB);background:linear-gradient(180deg,var(--blue1),var(--blue2));box-shadow:0 0 0 3px var(--ink),inset 0 3px 0 rgba(255,255,255,.4);transition:transform .12s}
.socials a.stud{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c))}
.socials a:hover{transform:scale(1.08) rotate(-4deg)}
.socials svg{width:22px;height:22px;fill:#fff;filter:drop-shadow(0 2px 0 var(--ink))}

/* ---------- páginas: solo skybox + ventana ---------- */
body.page main,body.page footer{display:none}
.view{position:fixed;inset:0;z-index:40;overflow-y:auto;padding:140px max(16px,4vw) 60px;display:none}
body.page .view.on{display:block}
.view .win{margin:0 auto;animation:winIn .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes winIn{from{transform:scale(.8)}}

@media (max-width:980px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .nav{padding:26px 12px 8px;gap:10px}
  .brand span{display:none}
  .navlinks{display:none;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;gap:16px;padding:36px 14px 14px;background:var(--win);border:5px solid var(--ink);border-radius:6px}
  .nav.open .navlinks{display:flex}
  .nb{width:100%;height:58px;flex-direction:row;justify-content:flex-start;padding-left:84px}
  .nb img{left:12px;top:-16px;transform:rotate(-6deg)}
  .nb:hover img{transform:rotate(6deg) scale(1.1)}
  .nb b{font-size:20px}
  .burger{display:inline-flex;width:56px;height:52px;padding:0}
  .sec{min-height:100vh;align-items:flex-end;padding-block:120px 50px}
  .sec.r{justify-content:center}
  .hero{padding-block:120px 5vh}
  .hero h1{--sw:9px;--sh:5px}
  .hero .inset{font-size:15px}
  .hero .btn{font-size:19px;padding:9px 16px 11px}
  .skills{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .win-b{padding:18px 12px 18px}
  .win-h{min-height:64px;padding-left:100px;padding-right:66px}.win-ic{width:100px;height:100px;top:-34px}
  .win-t{--sw:7px}
  .close{width:46px;height:46px;font-size:28px;top:9px;right:10px}
  .vid{width:240px}.vid.short{width:150px}
  .xp b{font-size:34px}
  .games,.prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .game h3,.prod h3{font-size:15px}
  .game .body{padding:26px 6px 8px}.game .ic{width:48px;height:48px;top:calc(100% - 36px)}
  .stats{gap:5px}.stat{padding:3px 5px}.stat b{font-size:18px}.stat span{font-size:10px}
  .cats{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
  .cat img{width:84px;height:84px}.cat b{font-size:14px}
  .btn.sm{font-size:15px}
  .sub{flex-wrap:wrap}.sub h3{font-size:22px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* barra superior: aparece poco a poco al bajar */
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,26,51,.96),rgba(42,33,64,.92));border-bottom:5px solid var(--ink);box-shadow:0 6px 0 rgba(18,12,28,.25);opacity:var(--navbg,0);transition:opacity .15s;pointer-events:none;z-index:-1}
.nav{isolation:isolate}
button.item{font:inherit;cursor:pointer;border:4px solid var(--ink);width:100%}
.item.shot{padding:4px}.item.shot img{aspect-ratio:1;object-fit:cover;border-radius:3px}
#pfSub .sub{justify-content:flex-start;gap:16px}
#zoom{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(18,12,28,.82);cursor:zoom-out;padding:24px}
#zoom[hidden]{display:none}
#zoom img{max-width:min(92vw,900px);max-height:86vh;border:5px solid var(--ink);border-radius:6px;background:var(--win)}
[hidden]{display:none!important}

.cat:hover{z-index:3}
.nb img,.tab img,.win-ic,.btn img{pointer-events:none}
.card::before{pointer-events:none}
.cat::before{inset:0;left:0;top:0;animation:none;background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.22) 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle at 50% 45%,#000 0,transparent 75%);mask:radial-gradient(circle at 50% 45%,#000 0,transparent 75%)}

.rgrp+.rgrp{margin-top:22px}
.rgrp-t{--sw:6px;font-size:26px;text-transform:uppercase;margin:0 0 12px;padding-left:4px}
.rgrp-t span{color:#ffd23a}

/* ===== v3: estilo de las referencias (esquinas rectas, borde entero, textura en el color, colores vivos, sin brillo arriba) ===== */
:root{
  --lime1:#b6ff1f;--lime2:#4fe000;--lime3:#1fae00;--limeB:#0b5200;
  --gold1:#ffe94a;--gold2:#ffbf00;--gold3:#ff9500;--goldB:#7a3c00;
  --teal:#11c9a8;--tealD:#078a73;
  --red1:#ff3d6e;--red2:#d0103f;--redB:#5c0620;--blue1:#38b6ff;--blue2:#0a6fe8;--blueB:#06306b;
  --purple:#9b3dff;--orange:#ff8a00;--pink:#ff2e8a;--green:#22d34c;--sky:#16a6ff;--yellow:#ffc400;--crimson:#ff2443;
  --dots:radial-gradient(rgba(255,255,255,.22) 1.1px,transparent 1.7px) 0 0/7px 7px;
  --dotsDark:radial-gradient(rgba(0,0,0,.16) 1.1px,transparent 1.7px) 0 0/7px 7px;
}
.btn,.nb,.tab,.close,.card,.inset,.stat,.socials a,.brand,#loader,#loader i,.lrbadge,.game .live,.bar,.bar i,.play{border-radius:0!important}
.win,.win-h{border-radius:0}
/* botones: borde entero oscuro del color + contorno negro, sin línea de luz arriba, textura de puntos */
.btn{background:var(--dotsDark),linear-gradient(180deg,var(--a),var(--b) 50%,var(--c));border:3px solid var(--d);box-shadow:0 0 0 3px var(--ink)}
.btn.sm{box-shadow:0 0 0 3px var(--ink)}
.nb,.tab{background:var(--dotsDark),linear-gradient(180deg,var(--t1),var(--t2) 55%,var(--t3));border:3px solid #064d40;box-shadow:0 0 0 3px var(--ink)}
.nb,.tab{--t1:#2ee6c6;--t2:#11c9a8;--t3:#079c83}
.nb[aria-current=page],.tab[aria-selected=true]{--t1:#ffe94a;--t2:#ffbf00;--t3:#ff9500;border-color:var(--goldB)}
.close{background:var(--dotsDark),linear-gradient(180deg,var(--red1),var(--red2));box-shadow:0 0 0 3px var(--ink)}
.socials a{background:var(--dotsDark),linear-gradient(180deg,var(--blue1),var(--blue2));box-shadow:0 0 0 3px var(--ink)}
.socials a.stud{background:var(--dotsDark),linear-gradient(180deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c))}
.play{background:var(--dotsDark),linear-gradient(180deg,var(--red1),var(--red2))}
/* tarjetas: color vivo plano, explosión de luz a la izquierda y trama de puntos */
.card{background:var(--dots),radial-gradient(90% 110% at 18% 50%,rgba(255,255,255,.75),rgba(255,255,255,.18) 38%,transparent 62%),linear-gradient(115deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 45%,color-mix(in srgb,var(--c) 80%,#000));border:4px solid var(--ink);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--c) 55%,#fff)}
.bar i{background:var(--dotsDark),linear-gradient(180deg,var(--lime1),var(--lime2) 60%,var(--lime3))}
.inset,.stat{box-shadow:none}

/* ===== studs reales de CreativeCube (normal map de Angelo) como trama en botones, pestañas y cabeceras ===== */
:root{--studOv:url(img/ui/stud_ov.png) 0 0/30px 30px}
.btn{background:var(--studOv),linear-gradient(180deg,var(--a),var(--b) 50%,var(--c));background-blend-mode:overlay,normal}
.nb,.tab{background:var(--studOv),linear-gradient(180deg,var(--t1),var(--t2) 55%,var(--t3));background-blend-mode:overlay,normal}
.close{background:url(img/ui/stud_ov.png) 0 0/20px 20px,linear-gradient(180deg,var(--red1),var(--red2));background-blend-mode:overlay,normal}
.socials a{background:url(img/ui/stud_ov.png) 0 0/22px 22px,linear-gradient(180deg,var(--blue1),var(--blue2));background-blend-mode:overlay,normal}
.socials a.stud{background:url(img/ui/stud_ov.png) 0 0/22px 22px,linear-gradient(180deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c));background-blend-mode:overlay,normal}
.play{background:url(img/ui/stud_ov.png) 0 0/20px 20px,linear-gradient(180deg,var(--red1),var(--red2));background-blend-mode:overlay,normal}
.bar i{background:url(img/ui/stud_ov.png) 0 0/16px 16px,linear-gradient(180deg,var(--lime1),var(--lime2) 60%,var(--lime3));background-blend-mode:overlay,normal}
.win-h{background:url(img/ui/stud_ov.png) 0 0/32px 32px,var(--win2);background-blend-mode:overlay,normal}

/* color por subcategoría */
.rgrp .item.card{--c:var(--gc)!important}
/* destello de atrás: gira siempre, contenido dentro de la tarjeta */
.card{overflow:hidden;isolation:isolate}
.card::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:300%;aspect-ratio:1;left:-100%;top:50%;margin-top:-150%;inset:auto;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.26) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 42%);mask:radial-gradient(circle,#000 0,transparent 42%);
  animation:spin 26s linear infinite!important;will-change:transform}
.card::before{left:-120%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.card::before{animation:none!important}}

/* ---------- páginas legales ---------- */
.docnav{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.docnav .tab{width:auto;height:46px;padding:0 14px}
.docnav .tab b{font-size:16px}
.doc{font:700 16px/1.6 var(--fB);color:#e9e2ff;max-width:860px}
.doc .lead{margin-bottom:6px}
.doc .upd{font-size:13px;color:#b9addb;margin:0 0 18px}
.docsec{margin-top:22px}
.docsec h3{--sw:6px;font-size:24px;text-transform:uppercase;margin-bottom:8px}
.doc p+p{margin-top:10px}
.doc ul{margin:8px 0 0;padding-left:22px}.doc li+li{margin-top:6px}
.doc a{color:#ffd23a;text-decoration:underline}
.doc b{color:#fff}
.doc code{background:rgba(0,0,0,.35);padding:1px 5px}
.faq{display:block;margin-top:10px;padding:0}
.faq summary{cursor:pointer;list-style:none;padding:12px 44px 12px 14px;font:400 19px/1.2 var(--fH);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 2px 0 var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:14px;top:8px;font-size:28px}
.faq[open] summary::after{content:"–"}
.faq p{padding:0 14px 14px;color:#fff;text-shadow:0 2px 0 var(--ink)}
/* libro de reclamaciones */
.lr fieldset{border:4px solid var(--ink);background:rgba(18,12,28,.4);margin:16px 0 0;padding:12px 14px 16px}
.lr legend{font:400 19px var(--fH);padding:2px 10px 4px;background:var(--teal);border:3px solid var(--ink);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-transform:uppercase}
.lr-sheet{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;padding:12px 16px}
.lr-sheet span{display:block;font-size:13px;color:#fff}.lr-sheet b{font:400 20px var(--fH);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.lr-prov{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:0}
.lr-prov dt{font-size:12px;color:#b9addb;text-transform:uppercase}.lr-prov dd{margin:0;color:#fff}
.lr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.wide{grid-column:1/-1}
.lr-f span{display:block;font-size:14px;color:#fff;margin-bottom:4px}
.lr-f input,.lr-f select,.lr-f textarea{width:100%;font:700 16px var(--fB);color:#fff;background:#140e22;border:3px solid var(--ink);padding:10px 12px;outline:0}
.lr-f input:focus,.lr-f select:focus,.lr-f textarea:focus{border-color:#ffd23a}
.lr-f.bad input,.lr-f.bad textarea{border-color:#ff3d6e}
.lr-seg{display:flex;flex-wrap:wrap;gap:10px}
.lr-seg label,.lr-check{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:#140e22;border:3px solid var(--ink);cursor:pointer;color:#fff}
.lr-types{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.lr-types label{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:12px;cursor:pointer;color:#fff}
.lr-types b{font:400 19px var(--fH);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.lr-types small{grid-column:2;text-shadow:0 2px 0 var(--ink)}
.lr-hp{position:absolute;left:-9999px}
.lr-priv{margin-top:14px;font-size:14px}
.lr-msg{color:#ff9db5;min-height:1.2em;margin:8px 0}
.lr-notes{margin-top:18px;font-size:14px;color:#cfc6ec}
.lr-done{padding:20px}.lr-done .big{font:400 32px var(--fH);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
@media (max-width:700px){.lr-grid,.lr-types,.lr-prov{grid-template-columns:1fr}}

#gl{opacity:0;transition:opacity .6s ease}
#gl.ready{opacity:1}

/* ===== v4: Luckiest Guy (títulos y botones) + Montserrat (texto); nav con un color por sección ===== */
:root{--fH:'Luckiest Guy','Lilita One',system-ui,sans-serif;--fB:'Montserrat',system-ui,sans-serif}
body{font-weight:600}
.lead,.doc,.foot a,.foot p,.skill p,.hero .inset{font-weight:600}
.win-t,.h2,h1,h2,h3,.btn,.nb b,.tab b,.lbl{letter-spacing:.5px}
.hero h1{line-height:1.05}
.win-t{padding-top:8px;padding-bottom:4px}
/* Luckiest Guy es más ancha: un poco más chica en tarjetas */
.game h3,.prod h3{font-size:16px}.vid h3{font-size:14px;line-height:1.25}.cat b{font-size:16px}.item b{font-size:12px}
.nb b{font-size:15px}
.nb.home{--t1:#7dff4a;--t2:#36d300;--t3:#1d9a00;border-color:#0b5200}
.nb.shop{--t1:#ffc04a;--t2:#ff8a00;--t3:#e05e00;border-color:#6b2e00}
.nb.pf{--t1:#c18bff;--t2:#9b3dff;--t3:#7020d6;border-color:#2c0f5c}
.nb.lay{--t1:#ff7ab8;--t2:#ff2e8a;--t3:#d0106a;border-color:#5c0630}
.nb.tools{--t1:#6fd0ff;--t2:#16a6ff;--t3:#0a6fe8;border-color:#06306b}
.nb[aria-current=page]{--t1:inherit;transform:scale(1.1);box-shadow:0 0 0 3px var(--ink),0 0 0 7px #ffd23a,0 0 0 10px var(--ink)}
.nb[aria-current=page].home{--t1:#7dff4a;--t2:#36d300;--t3:#1d9a00;border-color:#0b5200}
.nb[aria-current=page].shop{--t1:#ffc04a;--t2:#ff8a00;--t3:#e05e00;border-color:#6b2e00}
.nb[aria-current=page].pf{--t1:#c18bff;--t2:#9b3dff;--t3:#7020d6;border-color:#2c0f5c}
.nb[aria-current=page].lay{--t1:#ff7ab8;--t2:#ff2e8a;--t3:#d0106a;border-color:#5c0630}
.nb[aria-current=page].tools{--t1:#6fd0ff;--t2:#16a6ff;--t3:#0a6fe8;border-color:#06306b}
@media (max-width:900px){.nb[aria-current=page]{transform:none}}

/* ===== v5 ===== */
/* paneles anchos dejan espacio al avatar en escritorio */
@media (min-width:901px){ main .win.wide{width:min(1120px,60vw)} }
/* clientes: más alto, 3 filas y tarjetas más grandes */
#clients .marq{padding:10px 0}
#clients .cl{padding:12px 20px 12px 12px;gap:14px}
#clients .cl img{width:72px;height:72px}
#clients .cl b{font-size:22px}
#clients .cl span span{font-size:17px}
#clients .win-b{padding-top:26px;padding-bottom:30px}
/* portafolio: categorías centradas; los iconos sobresalen sin cortarse */
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:42px 16px}
.cats .cat{flex:0 0 160px}
@media (max-width:900px){.cats .cat{flex:0 0 calc(50% - 8px)}}
/* destello giratorio sin recortar la tarjeta: se gira el ángulo del gradiente, no el elemento */
@property --ra{syntax:'<angle>';inherits:false;initial-value:0deg}
.card{overflow:visible}
.card::before{inset:0!important;left:0!important;top:0!important;margin:0!important;width:auto!important;aspect-ratio:auto!important;transform:none!important;
  background:repeating-conic-gradient(from var(--ra) at 22% 50%,rgba(255,255,255,.26) 0 8deg,transparent 8deg 20deg)!important;
  -webkit-mask:radial-gradient(circle at 22% 50%,#000 0,transparent 70%)!important;mask:radial-gradient(circle at 22% 50%,#000 0,transparent 70%)!important;
  animation:rays 22s linear infinite!important}
.cat.card::before,.item.card::before{background:repeating-conic-gradient(from var(--ra) at 50% 45%,rgba(255,255,255,.26) 0 8deg,transparent 8deg 20deg)!important;
  -webkit-mask:radial-gradient(circle at 50% 45%,#000 0,transparent 75%)!important;mask:radial-gradient(circle at 50% 45%,#000 0,transparent 75%)!important}
@keyframes rays{to{--ra:360deg}}
.game .shot,.vid .th,.prod>img{overflow:hidden}
.vid,.prod,.game{overflow:hidden}
/* pestañas legales: texto centrado y con icono */
.docnav{gap:16px 12px;padding-top:26px}
.docnav .tab{height:52px;width:auto;min-width:118px;padding:0 14px;justify-content:center;flex-direction:column}
.docnav .tab img{width:48px;height:48px;top:-28px}
.docnav .tab b{font-size:15px;line-height:1;margin-top:14px}
@media (min-width:901px){.navlinks{gap:22px}.nav{gap:20px}}
.lang img{width:38px;height:38px;margin:-12px 2px -10px -8px;filter:drop-shadow(0 2px 0 var(--ink))}.lang{gap:6px;min-width:84px}
/* portafolio: 3 categorías grandes (3D | 2D | Videos) */
.cats.tops{gap:48px 22px;padding-top:44px}
.cats.tops .cat.big{flex:0 0 250px;min-height:250px;padding:0 14px 16px}
.cat.big img{width:150px;height:150px;margin-top:-44px}
.cat.big b{font-size:40px;-webkit-text-stroke:7px var(--ink)}
.cat.big small{font:700 13px/1.3 var(--fB);color:#fff;margin:4px 0 6px;text-shadow:0 1px 0 var(--ink),0 0 6px rgba(18,12,28,.7)}
.cat.big span{font-size:15px}
#pfCrumb{margin-bottom:6px}
.prods.shorts{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media (max-width:900px){.cats.tops .cat.big{flex:0 0 100%;min-height:200px}.cat.big img{width:120px;height:120px}.cat.big b{font-size:32px}}
.prods.shorts .vid.short{width:auto}
#pfCrumb{justify-content:flex-start;gap:16px}
@media (max-width:900px){.cats.tops .cat.big{min-height:150px}.cat.big img{width:96px;height:96px;margin-top:-30px}}
img[src="data:,"]{visibility:hidden}
/* grid sin recortes + caras con tono de piel */
.item.shot img{object-fit:contain;background:rgba(18,12,28,.55)}
.item.shot.face img{background:var(--skin,#e8bd9b);padding:6%}
.skins{display:flex;align-items:center;gap:10px;margin:6px 0 14px;font:400 16px var(--fH);color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.skins span{margin-right:4px}
.skin{width:34px;height:34px;border:4px solid var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .15s}
.skin:hover{transform:scale(1.1)}.skin.on{outline:4px solid #fff;outline-offset:2px}
/* visor: grande, flechas, contador */
#zoom{cursor:default;grid-template-columns:auto 1fr auto;gap:18px;padding:24px 28px}
#zoom .zbox{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
#zoom img{max-width:min(82vw,1280px);max-height:82vh;width:auto;height:auto;object-fit:contain;border:6px solid var(--ink);border-radius:0;background:rgba(18,12,28,.6);box-shadow:0 8px 0 var(--ink)}
#zoom.face img{background:var(--skin,#e8bd9b)}
#zCount{font:400 20px var(--fH);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.zarr{width:72px;height:96px;display:grid;place-items:center;cursor:pointer;background:var(--yellow);border:5px solid var(--ink);box-shadow:0 6px 0 var(--ink);font:400 40px/1 var(--fH);color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;transition:transform .15s}
.zarr:hover{transform:scale(1.08)}.zarr:active{transform:scale(.94)}
.zclose{position:fixed;right:22px;top:22px}
@media (max-width:900px){#zoom{gap:6px;padding:12px}.zarr{width:44px;height:64px;font-size:26px}#zoom img{max-width:calc(100vw - 120px)}}
#zoom img{width:min(80vw,1280px);height:min(76vh,860px);max-width:none;max-height:none}
@media (max-width:900px){#zoom img{width:calc(100vw - 120px);height:auto;max-height:70vh;aspect-ratio:1}}
.skins{font-size:18px}
#zoom.face img{width:min(76vh,80vw);height:min(76vh,80vw)}
/* destello giratorio en el compositor (sin repintar cada frame): elemento .rays insertado por JS */
.card.rz::before{content:none!important;animation:none!important}
.rays{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;border-radius:inherit;contain:strict}
.rays i{position:absolute;left:var(--rx,22%);top:var(--ry,50%);width:var(--rd,300px);aspect-ratio:1;translate:-50% -50%;
  background:repeating-conic-gradient(rgba(255,255,255,.26) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle closest-side,#000 0,transparent 100%);mask:radial-gradient(circle closest-side,#000 0,transparent 100%)}
.cat .rays i,.item .rays i{--rx:50%;--ry:45%}
.rays.on i{animation:raySpin 22s linear infinite;will-change:rotate}
@keyframes raySpin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.rays.on i{animation:none}}
.rough::after{will-change:transform}
/* aviso de privacidad (componente ConsentBanner) con el estilo del sitio */
.ccb{background:var(--win)!important;border:4px solid var(--ink)!important;border-radius:0!important;box-shadow:0 6px 0 var(--ink)!important;font-family:var(--fB)!important}
.ccb strong,.ccb .ccb-top{font-family:var(--fH)!important;font-weight:400!important;letter-spacing:.3px}
.ccb a{color:#ffd23a!important}
.ccb-btns button{border-radius:0!important;border:3px solid var(--ink)!important;font-family:var(--fH)!important;font-weight:400!important;color:#fff!important;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;background:linear-gradient(180deg,#3fd7c4,#16a99a)!important}
.ccb-btns button:last-child{background:linear-gradient(180deg,var(--lime1),var(--lime2) 60%,var(--lime3))!important}
.ccb .fas{display:none}
/* arreglos que el prototipo tenía en línea */
.card::before{animation:none!important}
@media (max-width:900px){.win-h:has(.hbtn){flex-wrap:wrap;row-gap:6px;padding-top:12px;padding-bottom:12px}.win-h:has(.hbtn) .win-t{flex:1 1 100%;order:0}.win-h .hbtn{margin-left:0;order:1}.marq{margin:0 -12px}}
.vid h3,.item b,.game h3,.prod h3{padding-left:4px;padding-right:4px;margin-left:-4px;margin-right:-4px}.vid small{padding-left:3px}.win-h:has(.hbtn){padding-right:22px}.win-h .hbtn{margin-left:auto;flex:none}
@media (max-width:900px){.win-h:has(.hbtn){padding-right:12px}.win-h .hbtn{font-size:14px;padding:6px 10px 8px}}
/* vistas: ventanas más anchas y cuadrículas más grandes */
.view .win.wide{width:min(1400px,100%)}
.view .items{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.view .item b{font-size:14px}
.view #pfGrid.items{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.view .prods{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.view .prods.shorts{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.view .vid .meta{padding-left:12px;padding-right:12px}
.view .vid h3{font-size:16px;line-height:1.25}
.view .cats .cat{flex:0 0 190px}.view .cat img{width:124px;height:124px}
@media (max-width:900px){.view .items,.view #pfGrid.items{grid-template-columns:repeat(2,1fr);gap:12px}.view .prods{grid-template-columns:1fr}.view .prods.shorts{grid-template-columns:repeat(2,1fr)}.view .cats .cat{flex:0 0 calc(50% - 8px)}}
@media (min-width:901px){.nav .lang{position:relative;top:-9px}}
/* nombres completos en las tarjetas (antes se cortaban a 2 líneas y arriba) */
.item b{height:auto;overflow:visible;padding-top:3px;padding-bottom:2px}
/* barra opaca dentro de las vistas: no se transparenta el contenido que pasa por debajo */
body.page .nav::before{background:#241b38;opacity:1}
/* celular: el título de la ventana no se corta con "..." */
@media (max-width:900px){.win-t{white-space:normal;overflow:visible;text-overflow:clip;font-size:clamp(24px,7.2vw,34px);line-height:1;overflow-wrap:normal;word-break:normal;hyphens:none}.win-t{max-width:100%}}
@media (max-width:480px){.win-t{font-size:clamp(20px,6.4vw,30px)}}
@media (min-width:901px){html[lang=es] .nb.tools b{font-size:12.5px;letter-spacing:0}}
@media (max-width:359px){.win-t{font-size:16px}}