/* ==========================================================================
   SKYNEX — la web que cambia de piel.  Solo HTML + CSS, sin JavaScript.
   1. Fuentes   2. Fichas de diseño (piel por defecto)   3. Estructura
   4. Componentes   5. Adaptación   6. Pieles (segunda mitad del archivo)
   ========================================================================== */

@font-face{font-family:"Rubik";src:url(../fonts/rubik.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Share Tech Mono";src:url(../fonts/sharetech.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Orbitron";src:url(../fonts/orbitron.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Limelight";src:url(../fonts/limelight.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Audiowide";src:url(../fonts/audiowide.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bangers";src:url(../fonts/bangers.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fredoka";src:url(../fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Press Start 2P";src:url(../fonts/pressstart.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"VT323";src:url(../fonts/vt323.woff2) format("woff2");font-weight:400;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{background:#05070d;color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:78px}
/* desplazamiento suave solo al usar los enlaces de la pagina (no al buscar ni al cargar) */
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:inherit}
img{max-width:100%}

.skip{position:fixed;left:12px;top:-90px;z-index:100;padding:12px 18px;border-radius:8px;background:#fff;color:#000;font:700 1rem/1.2 "Rubik",system-ui,sans-serif}
.skip:focus{top:12px}
.piel,.vh{position:fixed;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.vh{position:absolute;top:auto;left:auto}

/* ---------- 2. Fichas de diseño: Minimal oscuro (por defecto) ---------- */
.page{
  --bg:#05070d;--bg-b:#080c18;--panel:rgba(13,18,33,.8);--panel-2:rgba(24,33,58,.72);--bar:rgba(5,7,13,.84);
  --ink:#eef2ff;--ink2:#a6b1cd;--hi:#4f8cff;--hi-ink:#8ab4ff;--hi2:#b9d2ff;--on-hi:#03102a;--focus:#fff;
  --line:rgba(125,155,225,.2);--line-2:rgba(125,155,225,.42);
  --rad:20px;--rad-s:12px;--rad-btn:999px;--bw:1px;
  --font-d:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-m:"Share Tech Mono",ui-monospace,Menlo,Consolas,monospace;
  --fs:1.02rem;--lh:1.6;--fs-m:.74rem;--ls-m:.2em;--w-m:400;
  --h1-fs:clamp(2.75rem,max(6.3vw,min(12.4vw,3.3rem)),5.5rem);--h1-w:900;--h1-ls:-.035em;--h1-lh:.95;--h1-tt:none;
  --h2-fs:clamp(1.75rem,3.6vw,2.8rem);--h2-w:800;--h2-ls:-.02em;--h2-tt:none;
  --h3-fs:1.3rem;--h3-w:700;--h3-ls:-.01em;--h3-tt:none;
  --sh:0 30px 70px -40px rgba(0,0,0,.9);
  --ph-frame:#0c111d;--ph-edge:rgba(140,170,240,.4);--ph-rad:34px;
  --ph-sh:0 40px 90px -30px rgba(40,90,255,.55),0 0 0 8px rgba(79,140,255,.05);
  --hud-a:"RA 05h 34m 31s";--hud-b:"DEC +22° 00′ 52″";
  --skin-n:"07/24";--skin:"MINIMAL OSCURO";
  --k-pre:"";--coin-a:#bcd3ff;--coin-b:#4f8cff;--strip-h:74px;
  --term-bg:#04060c;--term-ink:#dbe5ff;
  --shot-menu:url(../img/dark_menu.webp);--shot-retro:url(../img/dark_game_retro.webp);
  --shot-modern:url(../img/dark_game_modern.webp);--shot-shop:url(../img/dark_shop.webp);
  --gut:clamp(16px,4vw,56px);
  --tk-bg:#f3ecd8;--tk-bg2:#e9e0c6;--tk-ink:#1d1a14;--tk-ink2:#4b4537;--tk-link:#8c1a14;--tk-line:rgba(29,26,20,.45);--tk-stamp:#b3261e;
  --wm-fs:clamp(3.4rem,17.5vw,15.5rem);--wm-ls:.02em;--wm-w:900;--st-x:76px;--plank:#232a3a;

  position:relative;isolation:isolate;min-height:100vh;overflow-x:hidden;overflow-x:clip;
  background:var(--bg);color:var(--ink);
  font:400 var(--fs)/var(--lh) var(--font-b);
  -webkit-font-smoothing:antialiased;
}

/* ---------- 3. Estructura ---------- */
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx i{position:absolute;display:block}
.wipe{position:fixed;left:0;right:0;top:0;height:34vh;z-index:60;pointer-events:none;opacity:0;
  background:linear-gradient(to bottom,transparent,var(--hi) 92%,#fff);transform:translateY(-100%)}
@keyframes w0{0%{opacity:.55;transform:translateY(-100%)}80%{opacity:.4}100%{opacity:0;transform:translateY(300%)}}
@keyframes w1{0%{opacity:.55;transform:translateY(-100%)}80%{opacity:.4}100%{opacity:0;transform:translateY(300%)}}
@keyframes w2{0%{opacity:.55;transform:translateY(-100%)}80%{opacity:.4}100%{opacity:0;transform:translateY(300%)}}
@keyframes w3{0%{opacity:.55;transform:translateY(-100%)}80%{opacity:.4}100%{opacity:0;transform:translateY(300%)}}
@keyframes w4{0%{opacity:.55;transform:translateY(-100%)}80%{opacity:.4}100%{opacity:0;transform:translateY(300%)}}
@keyframes w5{0%{opacity:.55;transform:translateY(-100%)}80%{opacity:.4}100%{opacity:0;transform:translateY(300%)}}
@keyframes w6{0%{opacity:.55;transform:translateY(-100%)}80%{opacity:.4}100%{opacity:0;transform:translateY(300%)}}
#p-dark:checked~.page .wipe{animation:w0 .42s ease-out}
#p-cyber:checked~.page .wipe{animation:w1 .42s ease-out}
#p-hotel:checked~.page .wipe{animation:w2 .42s ease-out}
#p-neon:checked~.page .wipe{animation:w3 .42s ease-out}
#p-comic:checked~.page .wipe{animation:w4 .42s ease-out}
#p-ocean:checked~.page .wipe{animation:w5 .42s ease-out}
#p-pixel:checked~.page .wipe{animation:w6 .42s ease-out}

@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--font-d)}
h2{font-size:var(--h2-fs);font-weight:var(--h2-w);letter-spacing:var(--h2-ls);text-transform:var(--h2-tt);line-height:1.08;text-wrap:balance}
h3{font-size:var(--h3-fs);font-weight:var(--h3-w);letter-spacing:var(--h3-ls);text-transform:var(--h3-tt);line-height:1.15}
p{margin:0}

/* ---------- Cabecera ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px max(var(--gut),calc((100% - 1280px)/2 + var(--gut)));background:var(--bar);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:44px;text-decoration:none;line-height:1}
.brand-n{font:700 1.18rem/1 var(--font-d);letter-spacing:.4em}
.brand-s{display:flex;align-items:center;gap:7px;font:var(--w-m) .72rem/1 var(--font-m);letter-spacing:.42em;color:var(--ink2);text-transform:uppercase}
.brand-s::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hi)}
.skin-now{display:flex;align-items:center;gap:10px;margin:0 auto 0 14px;font:400 .72rem/1.5 "Share Tech Mono",ui-monospace,monospace;letter-spacing:.18em;color:var(--ink2);white-space:nowrap}
.skin-now::before{content:"";flex:none;width:22px;height:14px;border-radius:calc(var(--rad-s)*.25);background:linear-gradient(135deg,var(--hi) 50%,var(--hi2) 50%);box-shadow:0 0 0 1px var(--line-2)}
.skin-now span::before{content:"PIEL " var(--skin-n) " · "}
.skin-now span::after{content:var(--skin)}
.nav{display:flex;align-items:center;gap:2px}
.nav a{position:relative;display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--rad-btn);
  font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink2);transition:color .15s,background .15s}
.nav a:hover{color:var(--ink);background:var(--panel-2)}
.nav a[hreflang]{margin-left:8px;border:1px solid var(--line-2);color:var(--ink);font:var(--w-m) .78rem var(--font-m);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Portada ---------- */
.hero{position:relative;padding-top:clamp(20px,3.2vw,44px)}
.hero-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(14px,2vw,26px) clamp(20px,3vw,48px);align-items:center}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;padding:8px 16px 8px 12px;
  border:1px solid var(--line-2);border-radius:var(--rad-btn);background:var(--panel);
  font:var(--w-m) var(--fs-m)/1.3 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--hi-ink)}
.tag i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hi);animation:blink 1.6s steps(1) infinite}
h1{margin-bottom:22px;font-size:var(--h1-fs);font-weight:var(--h1-w);letter-spacing:var(--h1-ls);line-height:var(--h1-lh);text-transform:var(--h1-tt);text-wrap:balance}
h1 em{font-style:normal;color:var(--hi-ink)}
/* La palabra LCD es un cristal líquido: igual en todas las pieles, como la pantalla de la maquinita */
.lcdw{display:inline-block;position:relative;margin:0 .03em;padding:.08em .15em .03em;border-radius:.09em;vertical-align:.03em;
  font:900 .84em/1 "Orbitron","Rubik",sans-serif;letter-spacing:.05em;text-transform:uppercase;
  color:#1b2018;-webkit-text-fill-color:#1b2018;text-shadow:.035em .045em 0 rgba(27,32,24,.2);
  background:linear-gradient(112deg,rgba(255,255,255,.42) 0 15%,rgba(255,255,255,0) 15.5%),linear-gradient(170deg,#cbd1b6,#a9b293);
  box-shadow:inset 0 .06em .14em rgba(0,0,0,.5),0 0 0 .065em #15170f,0 0 0 .095em rgba(255,255,255,.3),0 .14em .3em rgba(0,0,0,.4)}
.lead{max-width:35em;margin-bottom:28px;color:var(--ink2);font-size:1.08em}

.cta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px 16px;margin-bottom:22px}
.gp{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:8px 24px 8px 18px;
  border:1px dashed var(--line-2);border-radius:var(--rad-s);background:var(--panel-2);color:var(--ink);
  font:700 1.18rem/1.15 var(--font-b);text-align:left;cursor:not-allowed}
.gp svg{flex:none;color:var(--hi-ink)}
.gp small{display:block;margin-bottom:2px;font:var(--w-m) .72rem/1.2 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.gp-nota{margin-top:7px;padding-left:2px;font:var(--w-m) .72rem/1.3 var(--font-m);letter-spacing:.05em;color:var(--ink2)}
.btn-2{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:0 24px;border:1px solid var(--line-2);border-radius:var(--rad-btn);
  background:transparent;color:var(--ink);font-weight:600;text-decoration:none;transition:background .15s,transform .15s}
.btn-2::after{content:"→";color:var(--hi-ink)}
.btn-2:hover{background:var(--panel-2);transform:translateY(-2px)}

.nota{display:flex;align-items:center;gap:14px;margin-bottom:26px;max-width:30em;font-size:.95em;color:var(--ink2)}
.nota img{flex:none;width:48px;height:48px;border-radius:12px;box-shadow:0 0 0 1px var(--line-2)}

/* Selector de piel */
.sw{grid-column:1/-1;position:relative;display:grid;grid-template-columns:minmax(0,14.5em) minmax(0,1fr);gap:10px 22px;align-items:center;padding:12px 14px;border:var(--bw) solid var(--line);border-radius:var(--rad);background:var(--panel)}
.sw-t{font-size:.95em;line-height:1.35;color:var(--ink2)}
.sw-t b{display:block;color:var(--ink);font-weight:700}
.sw-g{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.k{--ka:#101a33;--kb:#05070d;--kh:#4f8cff;--kf:"Rubik";
  position:relative;display:flex;flex-direction:column;gap:6px;min-height:64px;padding:5px 5px 6px;
  border:1px solid var(--line);border-radius:var(--rad-s);background:var(--bg-b);color:var(--ink);
  text-decoration:none;cursor:pointer;transition:transform .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.k:hover{transform:translateY(-3px);border-color:var(--line-2)}
.k i{position:relative;display:block;height:34px;border-radius:calc(var(--rad-s)*.55);background:linear-gradient(160deg,var(--ka),var(--kb));box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.k i::before{content:"";position:absolute;left:22%;right:22%;top:18%;height:40%;border-radius:2px;background:#b9c2a3;box-shadow:0 0 0 2px rgba(0,0,0,.55)}
.k i::after{content:"";position:absolute;left:30%;right:30%;bottom:13%;height:4px;border-radius:2px;background:var(--kh)}
.k span{display:block;overflow:hidden;font:600 .75rem/1.15 var(--kf),sans-serif;text-align:center;white-space:nowrap;text-overflow:ellipsis}
.k-cyber{--ka:#2c0a5e;--kb:#07031a;--kh:#ffe600;--kf:"Orbitron"}
.k-hotel{--ka:#9a1027;--kb:#3a0510;--kh:#ffcf5a;--kf:"Limelight"}
.k-neon{--ka:#2a0a5a;--kb:#0d0524;--kh:#ff4fd8;--kf:"Audiowide"}
.k-comic{--ka:#ffe94a;--kb:#ffc400;--kh:#e8112d;--kf:"Bangers"}
.k-ocean{--ka:#1a8ae0;--kb:#052a66;--kh:#7fe8ff;--kf:"Fredoka"}
.k-pixel{--ka:#9bbc0f;--kb:#7d9c0c;--kh:#0f380f;--kf:"Press Start 2P"}
.k-cyber span{font-size:.7rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.k-neon span{font-size:.72rem}
.k-comic span{font-size:.98rem;font-weight:400;letter-spacing:.05em}
.k-pixel span{font:400 1.05rem/1 "VT323",monospace;letter-spacing:.04em;text-transform:uppercase}
/* «24 · Ver todos» es un enlace de verdad a la galería */
.k-more{justify-content:center;align-items:center;gap:5px;border:1px solid var(--hi);background:linear-gradient(160deg,var(--panel-2),transparent);color:var(--ink)}
.k-more b{display:flex;align-items:center;gap:6px;font:800 1.45rem/1 var(--font-d);color:var(--hi-ink)}
.k-more b::after{content:"↓";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--hi);color:var(--on-hi);font:700 .8rem/1 "Rubik",sans-serif;transition:transform .2s}
.k-more:hover b::after{transform:translateY(3px)}
.k-more span{overflow:visible;font:600 .75rem/1.15 "Rubik",sans-serif;letter-spacing:.02em;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
#p-dark:checked~.page .k-dark,#p-cyber:checked~.page .k-cyber,#p-hotel:checked~.page .k-hotel,#p-neon:checked~.page .k-neon,
#p-comic:checked~.page .k-comic,#p-ocean:checked~.page .k-ocean,#p-pixel:checked~.page .k-pixel{
  border-color:var(--hi);box-shadow:0 0 0 2px var(--hi);background:var(--panel-2)}
#p-dark:checked~.page .k-dark::after,#p-cyber:checked~.page .k-cyber::after,#p-hotel:checked~.page .k-hotel::after,#p-neon:checked~.page .k-neon::after,
#p-comic:checked~.page .k-comic::after,#p-ocean:checked~.page .k-ocean::after,#p-pixel:checked~.page .k-pixel::after{
  content:"";position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;background:var(--hi);box-shadow:0 0 0 3px var(--bg)}
#p-dark:focus-visible~.page .k-dark,#p-cyber:focus-visible~.page .k-cyber,#p-hotel:focus-visible~.page .k-hotel,#p-neon:focus-visible~.page .k-neon,
#p-comic:focus-visible~.page .k-comic,#p-ocean:focus-visible~.page .k-ocean,#p-pixel:focus-visible~.page .k-pixel{outline:3px solid var(--focus);outline-offset:3px}

/* Escenario con los móviles */
.stage{--pw:clamp(200px,18.6vw,256px);position:relative;height:calc(var(--pw)*2.164 + var(--st-x))}
.lt{position:absolute;display:none;pointer-events:none}
.ph{--s:1;position:absolute;width:calc(var(--pw)*var(--s));aspect-ratio:390/844;padding:calc(var(--pw)*var(--s)*.03);
  border-radius:calc(var(--ph-rad)*var(--s));background:var(--ph-frame);box-shadow:0 0 0 1px var(--ph-edge),var(--ph-sh)}
.ph-s{width:100%;height:100%;border-radius:calc((var(--ph-rad) - 8px)*var(--s));background:#111 center/cover no-repeat}
.s-menu{background-image:var(--shot-menu)}
.s-retro{background-image:var(--shot-retro)}
.s-modern{background-image:var(--shot-modern)}
.s-shop{background-image:var(--shot-shop)}
.ph-c{left:50%;top:26px;transform:translateX(-50%);z-index:3}
.ph-l{--s:.8;left:50%;top:86px;transform:translateX(-134%) rotate(-7deg);z-index:2}
.ph-r{--s:.8;left:50%;top:86px;transform:translateX(34%) rotate(7deg);z-index:2}
.ph-l .ph-s,.ph-r .ph-s{filter:brightness(.82)}
.fl{position:absolute;display:block;font-style:normal;pointer-events:none}
.stage-k{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:space-between;gap:12px;
  font:var(--w-m) .72rem/1 var(--font-m);letter-spacing:.2em;color:var(--ink2);white-space:nowrap}
.hud-a::before{content:var(--hud-a)}
.hud-b::before{content:var(--hud-b)}
.strip{position:relative;height:var(--strip-h);overflow:hidden;pointer-events:none}
.strip i{position:absolute;display:block}

/* ---------- Cifras: ventanas LCD con dígitos de siete segmentos ---------- */
.keys{position:relative;padding-top:clamp(18px,2.6vw,34px)}
.keys ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);margin:0;padding:0;list-style:none}
.keys li{position:relative;display:flex;flex-direction:column;gap:11px;padding:10px 10px 13px;border:var(--bw) solid var(--line);border-radius:var(--rad);background:var(--panel);box-shadow:var(--sh)}
.kg{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;height:clamp(84px,8.6vw,112px);margin:5px;padding:14px 18px 14px 14px;overflow:hidden;border-radius:9px;color:#1b2018;
  background:linear-gradient(170deg,#cbd1b6,#a9b293);box-shadow:inset 0 3px 10px rgba(0,0,0,.45),0 0 0 4px #15170f,0 0 0 5px rgba(255,255,255,.2)}
.kg::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.34) 0 13%,rgba(255,255,255,0) 13.4%);pointer-events:none}
.kg i{align-self:flex-start;font:700 .75rem/1.2 "Share Tech Mono",monospace;font-style:normal;letter-spacing:.14em;text-transform:uppercase}
.kg i::after{content:"GAME B";display:block;margin-top:4px;opacity:.14}
.seg7{display:block;height:100%;width:auto;fill:currentColor;overflow:visible;filter:drop-shadow(1.2px 1.6px 0 rgba(20,26,18,.2))}
.keys p{padding:0 6px;font-size:.95em;line-height:1.3;color:var(--ink)}
.keys p b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.keys p span{display:block}

/* ---------- Secciones ---------- */
main{counter-reset:s}
.sec{position:relative;padding-block:clamp(46px,6.4vw,92px);counter-increment:s}
.sh{position:relative;margin-bottom:clamp(24px,3.6vw,44px)}
.sh-k{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:var(--w-m) var(--fs-m)/1.2 var(--font-m);letter-spacing:var(--ls-m);text-transform:uppercase;color:var(--hi-ink)}
.sh-k::before{content:var(--k-pre)}
.sh-k span{color:var(--ink)}
.sh-k::after{content:"";flex:1;height:1px;background:var(--line);order:2}
.sh-k i{order:3;font-style:normal;color:var(--ink2);letter-spacing:.14em;white-space:nowrap}
.sh-s{max-width:46em;margin-top:12px;color:var(--ink2)}

.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);counter-reset:c}
.card{position:relative;padding:clamp(18px,2.3vw,28px);border:var(--bw) solid var(--line);border-radius:var(--rad);background:var(--panel);box-shadow:var(--sh);counter-increment:c}
.card::before,.card::after{position:absolute;pointer-events:none}
.card-k{margin-bottom:10px;font:var(--w-m) var(--fs-m)/1.3 var(--font-m);letter-spacing:.14em;text-transform:uppercase;color:var(--hi-ink)}
.card h3{margin-bottom:10px}
.card p{color:var(--ink2)}
.c-jue{grid-column:span 4}
.c-est{grid-column:span 8}
.c-con{grid-column:span 7}
.c-mod{grid-column:span 5}
.c-tie{grid-column:span 7}
.c-idi{grid-column:span 5}
.c-est,.c-con,.c-tie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,30px);align-items:center}
.c-con,.c-tie{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}

/* LCD: el mismo cristal en todas las pieles, como la maquinita de la app */
.lcd{position:relative;height:116px;margin-bottom:20px;overflow:hidden;border-radius:10px;color:#1b2018;
  background:linear-gradient(170deg,#cbd1b6,#a9b293);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.45),0 0 0 4px #15170f,0 0 0 5px rgba(255,255,255,.16)}
.lcd .seg7{position:absolute;right:16px;top:18px;height:80px}
.lcd-a,.lcd-b{position:absolute;left:16px;font:700 .72rem/1 "Share Tech Mono",monospace;letter-spacing:.12em}
.lcd-a{top:16px}
.lcd-b{top:34px;opacity:.16}
.lcd::before{content:"";position:absolute;left:22px;bottom:22px;width:12px;height:12px;border-radius:50%;background:currentColor;opacity:.09;
  box-shadow:26px -14px 0 currentColor,52px -22px 0 currentColor,78px -14px 0 currentColor,104px 0 0 currentColor}
.lcd::after{content:"";position:absolute;left:22px;bottom:22px;width:12px;height:12px;border-radius:50%;background:currentColor;animation:lcd 2.4s steps(1) infinite}
@keyframes lcd{0%{transform:translate(0,0)}20%{transform:translate(26px,-14px)}40%{transform:translate(52px,-22px)}60%{transform:translate(78px,-14px)}80%{transform:translate(104px,0)}}

.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font-weight:600;color:var(--hi-ink);text-underline-offset:5px}
.more::after{content:"↓"}
.fan{margin:0;min-width:0}
.fan-g{position:relative;width:100%;max-width:430px;margin-inline:auto;aspect-ratio:400/300}
.fan img{position:absolute;left:calc(8% + var(--i)*13.5%);bottom:8%;width:30%;height:auto;border-radius:10px;background:#111;
  box-shadow:0 0 0 3px #0c111d,0 0 0 4px var(--line-2),0 16px 26px -14px rgba(0,0,0,.85);
  transform-origin:50% 100%;transform:rotate(calc((var(--i) - 2)*5deg)) translateY(calc((var(--i) - 2)*(var(--i) - 2)*5px));transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.fan img:nth-child(3){z-index:3}
.fan img:nth-child(2),.fan img:nth-child(4){z-index:2}
.fan figcaption{margin-top:18px;text-align:center;font:var(--w-m) .78rem/1.4 var(--font-m);letter-spacing:.06em;color:var(--ink2)}

.seg{display:inline-grid;grid-template-columns:1fr 1fr;margin-top:18px;padding:4px;border:1px solid var(--line-2);border-radius:var(--rad-btn);background:var(--bg-b)}
.seg label{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 20px;border-radius:var(--rad-btn);
  font:700 .76rem/1 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);cursor:pointer;transition:background .2s,color .2s}
#c-maq:checked~.seg label[for="c-maq"],#c-mod:checked~.seg label[for="c-mod"],
#m-cla:checked~.seg label[for="m-cla"],#m-plus:checked~.seg label[for="m-plus"]{background:var(--hi);color:var(--on-hi)}
#c-maq:focus-visible~.seg label[for="c-maq"],#c-mod:focus-visible~.seg label[for="c-mod"],
#m-cla:focus-visible~.seg label[for="m-cla"],#m-plus:focus-visible~.seg label[for="m-plus"]{outline:3px solid var(--focus);outline-offset:3px}

.duo{--pw:168px;position:relative;height:calc(var(--pw)*2.164 + 12px);max-width:300px;margin-inline:auto;width:100%}
.duo .ph{top:0;left:0;transition:transform .45s cubic-bezier(.3,1.3,.5,1),filter .3s;--ph-sh:0 24px 40px -22px rgba(0,0,0,.8)}
.duo .ph-maq{z-index:2;transform:translateX(0) rotate(-3deg);filter:none}
.c-con:has(#c-mod:checked) .duo .ph-mod{z-index:2;transform:translateX(0) rotate(-3deg);filter:none}
.duo .ph-mod{z-index:1;transform:translateX(62%) translateY(4%) rotate(7deg) scale(.88);filter:brightness(.55)}
.c-con:has(#c-mod:checked) .duo .ph-maq{z-index:1;transform:translateX(62%) translateY(4%) rotate(7deg) scale(.88);filter:brightness(.55)}
.shot{width:100%;aspect-ratio:390/500;border-radius:var(--rad-s);background-color:#111;background-position:top center;background-size:cover;background-repeat:no-repeat;box-shadow:0 0 0 1px var(--line-2),var(--sh)}

.perks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.perks li{display:flex;align-items:center;gap:10px;min-height:42px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--rad-s);
  font-size:.9em;line-height:1.2;color:var(--ink2);transition:opacity .25s,border-color .25s,background .25s}
.perks i{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px currentColor}
.pk-c{grid-column:1/-1}
#m-cla:checked~.perks .pk-c,#m-plus:checked~.perks .pk-p{border-color:var(--hi);background:var(--panel-2);color:var(--ink)}
#m-cla:checked~.perks .pk-c i,#m-plus:checked~.perks .pk-p i{background:var(--hi);box-shadow:0 0 0 2px var(--hi)}
#m-cla:checked~.perks .pk-p,#m-plus:checked~.perks .pk-c{opacity:.86}

.coins{display:flex;margin-top:18px}
.coins i{width:34px;height:34px;margin-right:-8px;border-radius:50%;
  background:radial-gradient(circle,var(--coin-b) 0 34%,var(--coin-a) 36% 52%,var(--coin-b) 54%);box-shadow:0 0 0 2px var(--bg),0 4px 10px rgba(0,0,0,.4)}
.coins i:nth-child(2){transform:translateY(-5px)}

.mx{width:100%;margin-top:18px;border-collapse:collapse;font:var(--w-m) .8rem/1.3 var(--font-m);letter-spacing:.04em;color:var(--ink2)}
.mx td,.mx th{padding:9px 6px;border-top:1px solid var(--line);text-align:left}
.mx tr:first-child td,.mx tr:first-child th{border-top:0}
.mx th,.mx td+td{width:52px;text-align:center}
.mx th{font:800 .8rem/1 var(--font-b);padding:12px 6px}
.mx th::before{content:"";display:none}
.mx th{color:var(--on-hi)}
.mx th{background:linear-gradient(var(--hi),var(--hi)) center/38px 28px no-repeat}
.mx i{display:inline-block;width:14px;height:8px;border-left:3px solid var(--hi-ink);border-bottom:3px solid var(--hi-ink);transform:rotate(-45deg) translateY(-2px)}

/* ---------- Galería de estilos ---------- */
.big-sw{display:flex;flex-wrap:wrap;gap:10px}
.big-sw .k{flex-direction:row;align-items:center;gap:12px;min-height:56px;padding:7px 18px 7px 7px}
.big-sw .k i{flex:none;width:52px;height:40px}
.big-sw .k span{font-size:.92rem;overflow:visible}
.big-sw .k-cyber span{font-size:.76rem}
.big-sw .k-comic span{font-size:1.2rem}
.big-sw .k-pixel span{font-size:1rem;letter-spacing:.02em}
.big-sw .k-hotel span,.big-sw .k-neon span{font-size:.86rem;font-weight:400}
.live-dot{display:inline-block;width:10px;height:10px;margin:0 2px;border-radius:50%;background:var(--hi);box-shadow:0 0 0 3px var(--line-2)}
.gal{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:22px 14px;max-width:1280px;margin:34px auto 0;padding:6px var(--gut) 10px;list-style:none}
.gi{position:relative;min-width:0}
.gi img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line-2),0 18px 30px -22px rgba(0,0,0,.8);transition:transform .2s}
.gi p,.gi-p{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-size:.84rem;font-weight:600;line-height:1.2;color:var(--ink)}
.gi p span,.gi-p span{font:var(--w-m) .72rem/1 var(--font-m);color:var(--hi-ink)}
.gi label{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gi label:hover img{transform:translateY(-5px)}
.gi-l{position:absolute;left:7px;top:7px;display:flex;align-items:center;gap:6px;padding:5px 9px 5px 7px;border-radius:999px;background:rgba(0,0,0,.82);color:#fff;
  font:600 .72rem/1 "Rubik",sans-serif;letter-spacing:.04em}
.gi-l::before{content:"";width:7px;height:7px;border-radius:50%;background:#5dff9b;animation:blink 1.6s steps(1) infinite}
#p-dark:checked~.page .g-dark img,#p-cyber:checked~.page .g-cyber img,#p-hotel:checked~.page .g-hotel img,#p-neon:checked~.page .g-neon img,
#p-comic:checked~.page .g-comic img,#p-ocean:checked~.page .g-ocean img,#p-pixel:checked~.page .g-pixel img{box-shadow:0 0 0 3px var(--hi),0 0 0 6px var(--line-2)}
#p-dark:focus-visible~.page .g-dark,#p-cyber:focus-visible~.page .g-cyber,#p-hotel:focus-visible~.page .g-hotel,#p-neon:focus-visible~.page .g-neon,
#p-comic:focus-visible~.page .g-comic,#p-ocean:focus-visible~.page .g-ocean,#p-pixel:focus-visible~.page .g-pixel{outline:3px solid var(--focus);outline-offset:4px}
.gal-h{display:none}

/* ---------- Estantería de cartuchos ---------- */
.shelf-box{position:relative}
.filt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:clamp(14px,2vw,24px)}
.filt-t{margin-right:6px;font:var(--w-m) var(--fs-m)/1.2 var(--font-m);letter-spacing:var(--ls-m);text-transform:uppercase;color:var(--hi-ink)}
.filt label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--rad-btn);background:var(--bg-b);color:var(--ink);
  font:700 .8rem/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.filt label em{font:var(--w-m) .75rem/1 var(--font-m);font-style:normal;letter-spacing:.04em}
.filt label:hover{border-color:var(--hi)}
#f-todas:checked~.filt label[for="f-todas"],#f-pocket:checked~.filt label[for="f-pocket"],#f-deluxe:checked~.filt label[for="f-deluxe"],
#f-vista:checked~.filt label[for="f-vista"],#f-duo:checked~.filt label[for="f-duo"]{background:var(--hi);border-color:var(--hi);color:var(--on-hi)}
#f-todas:focus-visible~.filt label[for="f-todas"],#f-pocket:focus-visible~.filt label[for="f-pocket"],#f-deluxe:focus-visible~.filt label[for="f-deluxe"],
#f-vista:focus-visible~.filt label[for="f-vista"],#f-duo:focus-visible~.filt label[for="f-duo"]{outline:3px solid var(--focus);outline-offset:3px}
.shelf{display:flex;gap:clamp(10px,1.5vw,22px);align-items:flex-start;padding-top:18px}
.serie{--n:4;flex:var(--n) 1 0;min-width:0;display:flex;flex-direction:column;transition:opacity .25s,filter .25s}
.se-deluxe{--n:3}.se-vista{--n:7}.se-duo{--n:2}
.serie ol{order:1;display:flex;align-items:flex-end;gap:clamp(4px,.55vw,8px);margin:0;padding:0 4px;list-style:none;border-bottom:10px solid var(--plank);box-shadow:0 2px 0 var(--line-2)}
.serie h3{order:2;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:3px 8px;margin-top:2px;padding:10px 12px 11px;border:var(--bw) solid var(--line);border-top:0;border-radius:0 0 var(--rad-s) var(--rad-s);background:var(--panel);
  font:700 .95rem/1.15 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;transition:background .25s,border-color .25s}
.serie h3 em{font:var(--w-m) .75rem/1.2 var(--font-b);font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--hi-ink)}
.serie h3 small{flex:1 0 100%;font:400 .78rem/1.2 "Share Tech Mono",monospace;letter-spacing:.04em;text-transform:none;color:var(--ink2)}
.cart{--c:#7c1f2a;position:relative;flex:1 1 0;min-width:0;height:clamp(228px,20.5vw,284px);display:flex;padding:27px 5px 18px;border-radius:9px 9px 3px 3px;
  background:linear-gradient(90deg,rgba(255,255,255,.2),transparent 26%,transparent 72%,rgba(0,0,0,.34)),linear-gradient(180deg,rgba(255,255,255,.16),transparent 18%),var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -15px 0 rgba(0,0,0,.24),0 12px 14px -10px rgba(0,0,0,.75);transition:transform .22s cubic-bezier(.3,1.5,.5,1)}
.cart:nth-child(3n+2){height:clamp(220px,19.8vw,274px)}
.cart::before{content:"";position:absolute;top:8px;left:18%;right:18%;height:12px;border-radius:2px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 2px,rgba(255,255,255,.2) 2px 4px)}
.cart::after{content:"";position:absolute;bottom:4px;left:14%;right:14%;height:9px;border-radius:1px;background:repeating-linear-gradient(90deg,#f0d27a 0 3px,#3a2a08 3px 5px);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.cart-l{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px 6px;border-radius:5px;background:linear-gradient(180deg,#f6f0de,#e4dbc0);color:#1c1611;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.25)}
.cart-c{font:700 .72rem/1 "Share Tech Mono",monospace;letter-spacing:0;white-space:nowrap}
.cart b{flex:1;min-height:0;display:flex;align-items:center;writing-mode:vertical-rl;font:800 clamp(.9rem,1.38vw,1.25rem)/1 var(--font-b);letter-spacing:.1em;white-space:nowrap}
.cart-l>i{display:grid;place-items:center;flex:none;width:100%;max-width:32px;aspect-ratio:1;border-radius:50%;background:var(--cb,var(--c));color:#fff;font:700 .8rem/1 "Rubik",sans-serif;font-style:normal;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.c2{--c:#a4530f}.c3{--c:#e6dfcb;--cb:#5a4d2e}.c4{--c:#47284c}.c5{--c:#553021}.c6{--c:#83264a}.c7{--c:#6e2020}.c8{--c:#5e3626}
.c9{--c:#15507a}.c10{--c:#8a5a12}.c11{--c:#2f5d33}.c12{--c:#3b3f8c}.c13{--c:#1b6a66}.c14{--c:#5b5f66}.c15{--c:#16181d;--cb:#3a4152}
.cart-duo{flex:2 1 0}
.cart-d{flex:1;min-height:0;display:flex;gap:10px;align-items:center;justify-content:center;width:100%}
.cart-w{flex:0 1 52px;display:grid;padding:5px;border-radius:7px;background:linear-gradient(160deg,#4b5266,#1c2029);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 2px 4px rgba(0,0,0,.35)}
.cart-w i{display:block;aspect-ratio:1.25;border-radius:3px;background:linear-gradient(#c6cdb3,#adb598);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 0 0 1.5px #23262b}
.cart-w i+i{position:relative;margin-top:7px}
.cart-w i+i::before{content:"";position:absolute;left:-5px;right:-5px;top:-5px;height:3px;background:#0b0d12;box-shadow:0 1px 0 rgba(255,255,255,.2)}
.cart-duo b{flex:none}
/* Resaltar serie */
#f-pocket:checked~.shelf .serie:not(.se-pocket),#f-deluxe:checked~.shelf .serie:not(.se-deluxe),
#f-vista:checked~.shelf .serie:not(.se-vista),#f-duo:checked~.shelf .serie:not(.se-duo){opacity:.3;filter:grayscale(.85)}
#f-pocket:checked~.shelf .se-pocket .cart,#f-deluxe:checked~.shelf .se-deluxe .cart,
#f-vista:checked~.shelf .se-vista .cart,#f-duo:checked~.shelf .se-duo .cart{transform:translateY(-10px)}
#f-pocket:checked~.shelf .se-pocket h3,#f-deluxe:checked~.shelf .se-deluxe h3,
#f-vista:checked~.shelf .se-vista h3,#f-duo:checked~.shelf .se-duo h3{border-color:var(--hi);background:var(--panel-2)}
.shelf-n{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:16px;font-size:.92em;line-height:1.35;color:var(--ink2)}
.shelf-n>span:last-child{display:flex;align-items:center;gap:12px}
.shelf-n>span:last-child::before{content:"";flex:none;width:20px;height:26px;border-radius:3px;background:linear-gradient(#15170f,#15170f) 0 50%/100% 3px no-repeat,linear-gradient(170deg,#cbd1b6,#a9b293);box-shadow:0 0 0 2px #15170f,0 0 0 3px rgba(255,255,255,.2)}
.shelf-h{display:none;align-items:center;gap:10px;width:100%;font:var(--w-m) .75rem/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--hi-ink)}
.shelf-h i{flex:1;height:2px;background:linear-gradient(90deg,var(--hi),transparent)}
.shelf-h::after{content:"→";font:700 1.15rem/1 "Rubik",sans-serif;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.specs-t{margin:clamp(34px,5vw,56px) 0 16px;font:var(--w-m) var(--fs-m)/1.2 var(--font-m);letter-spacing:var(--ls-m);text-transform:uppercase;color:var(--hi-ink)}
.specs-t{margin:clamp(34px,5vw,56px) 0 16px;font:var(--w-m) var(--fs-m)/1.2 var(--font-m);letter-spacing:var(--ls-m);text-transform:uppercase;color:var(--hi-ink)}
.specs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.specs li{display:flex;flex-direction:column;gap:12px;padding:14px;border:var(--bw) solid var(--line);border-radius:var(--rad-s);background:var(--panel);font-size:.9em;line-height:1.35;color:var(--ink2)}
.specs i{position:relative;display:flex;align-items:center;justify-content:center;width:64px;height:38px;border-radius:6px;color:#1b2018;
  background:linear-gradient(170deg,#cbd1b6,#a9b293);box-shadow:inset 0 2px 5px rgba(0,0,0,.4),0 0 0 3px #15170f;
  font:700 .82rem/1 "Share Tech Mono",monospace;font-style:normal;letter-spacing:.06em}
.i-fig::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:-16px 0 0 rgba(27,32,24,.12),16px 0 0 rgba(27,32,24,.12);animation:fig 1.8s steps(1) infinite}
@keyframes fig{0%{transform:translateX(-16px)}33%{transform:none}66%{transform:translateX(16px)}}
.i-btn::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:-14px 0 0 currentColor,14px 0 0 rgba(27,32,24,.16),28px 0 0 rgba(27,32,24,.16);transform:translateX(-7px)}
.i-ab::before{content:"A·B"}
.i-rec::before{content:"HI 88"}
.i-clk::before{content:"12:00"}
.i-bip::before{content:"♪ ♪"}

/* ---------- Contacto y ficha ---------- */
.end-g{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4vw,64px);align-items:start}
/* El contacto es un tique: papel, perforación, código de barras y sello */
.tk{--focus:#1d1a14;position:relative;max-width:640px;color:var(--tk-ink);filter:drop-shadow(0 22px 24px rgba(0,0,0,.5));transform:rotate(-1deg)}
.tk-a,.tk-b{position:relative;padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,32px)}
.tk-a{border-radius:14px 14px 0 0;background:radial-gradient(circle at 0 100%,transparent 11px,var(--tk-bg) 11.6px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 100%,transparent 11px,var(--tk-bg) 11.6px) 100% 0/51% 100% no-repeat}
.tk-b{border-radius:0 0 14px 14px;background:radial-gradient(circle at 0 0,transparent 11px,var(--tk-bg2) 11.6px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 0,transparent 11px,var(--tk-bg2) 11.6px) 100% 0/51% 100% no-repeat}
.tk-b::before{content:"";position:absolute;left:18px;right:18px;top:-1px;border-top:2px dashed var(--tk-line)}
.tk-k{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font:700 .75rem/1.2 "Share Tech Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--tk-ink2)}
.contact-p{font-size:1.05em;color:var(--tk-ink)}
.mail{margin:4px 0 0;font:var(--h3-w) clamp(1.2rem,2.3vw,1.75rem)/1.2 var(--font-d);overflow-wrap:anywhere}
.mail a{display:inline-flex;align-items:center;min-height:48px;color:var(--tk-link);text-decoration-thickness:2px;text-underline-offset:7px}
.legal{font-size:.95em;line-height:1.5;color:var(--tk-ink)}
.tk-f{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:18px}
.tk-bc{display:block;min-width:0}
.tk-bc span{display:block;margin-top:6px;font:700 .75rem/1 "Share Tech Mono",monospace;letter-spacing:.22em;color:var(--tk-ink2);white-space:nowrap}
.bars{display:block;width:154px;max-width:100%;height:44px;background:linear-gradient(90deg,var(--tk-ink) 0 2px,transparent 2px 4px,var(--tk-ink) 4px 5px,transparent 5px 8px,var(--tk-ink) 8px 11px,transparent 11px 12px,var(--tk-ink) 12px 13px,transparent 13px 15px,var(--tk-ink) 15px 17px,transparent 17px 20px,var(--tk-ink) 20px 21px,transparent 21px 22px) 0 0/22px 100%}
.stamp{flex:none;margin:0 4px 6px 0;padding:9px 13px 7px;border:3px double var(--tk-stamp);border-radius:8px;color:var(--tk-stamp);font:800 .86rem/1.15 "Rubik",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-align:center;transform:rotate(-8deg);opacity:.88}
/* Cómo está hecho */
.how{grid-column:1/-1;position:relative;padding:clamp(18px,2.4vw,28px);border:var(--bw) solid var(--line);border-radius:var(--rad);background:var(--panel);box-shadow:var(--sh)}
.how-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.how-s{font:var(--w-m) var(--fs-m)/1.2 var(--font-m);letter-spacing:var(--ls-m);text-transform:uppercase;color:var(--hi-ink)}
.how ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;counter-reset:h}
.how li{position:relative;padding:0 clamp(12px,1.6vw,22px);border-left:1px solid var(--line-2);counter-increment:h}
.how li:first-child{border-left:0;padding-left:0}
.how li::before{content:"0" counter(h) " /";display:block;margin-bottom:10px;font:var(--w-m) .78rem/1 "Share Tech Mono",monospace;letter-spacing:.2em;color:var(--hi-ink)}
.how li b{display:block;margin-bottom:8px;font:var(--h1-w) clamp(1.3rem,2.05vw,1.75rem)/1.05 var(--font-d);letter-spacing:var(--h3-ls);color:var(--ink);white-space:nowrap}
.how li b small{font:var(--w-m) .78rem/1 "Share Tech Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.how li p{font-size:.95em;color:var(--ink2)}
.term{position:relative;overflow:hidden;border:var(--bw) solid var(--line-2);border-radius:var(--rad);background:var(--term-bg);color:var(--term-ink);box-shadow:var(--sh);
  font:400 .9rem/1.5 "Share Tech Mono",ui-monospace,monospace}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.72rem;letter-spacing:.08em;color:var(--ink2)}
.term-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.term-bar i:first-child{background:var(--hi)}
.term-bar span{margin-left:auto}
.term h3{padding:16px 18px 4px;font:400 .9rem/1.4 "Share Tech Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--hi-ink)}
.term h3::before{content:"$ cat ";color:var(--ink2);text-transform:none;letter-spacing:.04em}
.term dl{margin:0;padding:6px 18px 6px}
.term dl div{display:grid;grid-template-columns:10.5ch minmax(0,1fr);gap:14px;padding:6px 0;border-top:1px dashed var(--line)}
.term dt{color:var(--ink2)}
.term dd{margin:0}
.term-p{padding:10px 18px 16px;color:var(--ink2)}
.term-p span{color:var(--hi-ink)}
.term-p b{display:inline-block;width:.6em;height:1em;margin-left:6px;vertical-align:-.15em;background:var(--hi);animation:blink 1.1s steps(1) infinite}

/* ---------- Pie ---------- */
.foot{position:relative;margin-top:clamp(10px,3vw,40px);border-top:1px solid var(--line)}
.foot-w{margin-top:clamp(16px,2.6vw,34px);font:var(--wm-w) var(--wm-fs)/.86 var(--font-d);letter-spacing:var(--wm-ls);text-transform:uppercase;white-space:nowrap;color:var(--ink);-webkit-user-select:none;user-select:none}
.foot-l{display:flex;align-items:center;gap:16px;margin:clamp(12px,1.6vw,20px) 0 clamp(22px,3vw,38px);font:600 clamp(1.02rem,1.6vw,1.3rem)/1.3 var(--font-b);color:var(--ink)}
.foot-l::after{content:"";flex:1;min-width:20px;height:1px;background:var(--line-2)}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px clamp(16px,3vw,44px);padding-bottom:26px}
.foot-h{margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid var(--line-2);font:var(--w-m) var(--fs-m)/1.2 var(--font-m);letter-spacing:var(--ls-m);text-transform:uppercase;color:var(--hi-ink)}
.foot-cols a{display:flex;align-items:center;min-height:42px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px}
.foot-cols a:hover{color:var(--hi-ink);text-decoration-color:currentColor}
.foot-app{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:.92em;line-height:1.35;color:var(--ink2)}
.foot-app img{flex:none;width:44px;height:44px;border-radius:11px;box-shadow:0 0 0 1px var(--line-2)}
.foot-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 22px;padding:10px 0 24px;border-top:1px solid var(--line);font:var(--w-m) .8rem/1.3 var(--font-m);letter-spacing:.08em;color:var(--ink2)}
.foot-sk::before{content:"PIEL " var(--skin-n) " · " var(--skin)}
.foot-up{display:inline-flex;align-items:center;gap:8px;min-height:42px;color:var(--ink);text-underline-offset:5px}
.foot-up::after{content:"↑";color:var(--hi-ink)}

/* ---------- 5. Adaptación ---------- */
@media (max-width:1180px){.skin-now{display:none}}
@media (max-width:1100px){
  .gal{grid-template-columns:repeat(6,minmax(0,1fr))}
  .specs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sw{grid-template-columns:minmax(0,1fr)}
  .sw-t b{display:inline}
  .how ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .how li:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:980px){
  .c-jue,.c-est,.c-con,.c-mod,.c-tie,.c-idi{grid-column:span 12}
  .c-mod{grid-column:span 12}
  .kg{height:92px;padding:26px 12px 10px;justify-content:flex-end}
  .kg i{position:absolute;left:11px;top:9px}
  .kg i::after{display:none}
}
@media (max-width:860px){
  html{scroll-padding-top:12px}
  .top{position:static;flex-wrap:wrap;gap:8px 12px;padding:10px var(--gut) 0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .skin-now{display:flex;flex-direction:row-reverse;margin:0;text-align:right;line-height:1.45}
  .skin-now span::before{content:"PIEL " var(--skin-n);display:block}
  .nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;flex:none;width:calc(100% + var(--gut)*2);margin-inline:calc(var(--gut)*-1);border-top:1px solid var(--line)}
  .nav a,.nav a[hreflang]{justify-content:center;min-height:42px;margin:0;padding:0 4px;border:0;border-radius:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font:500 .84rem/1 var(--font-b);letter-spacing:0;text-transform:none;color:var(--ink)}
  .nav a:nth-child(3n){border-right:0}
  .nav a:nth-child(n+4){border-bottom:0}
  /* Orden en el móvil: rótulo, titular, entradilla, botones, móviles, selector de piel, nota */
  .hero-g{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .sh-k i{display:none}
  .hero-t{display:contents}
  .tag{order:1;align-self:flex-start;margin-bottom:16px}
  .hero h1{order:2;margin-bottom:16px}
  .lead{order:3;margin-bottom:18px}
  .cta{order:4;margin-bottom:4px}
  .stage{order:5;--pw:min(54vw,236px);margin-top:16px}
  .sw{order:6;margin-top:14px}
  .nota{order:7;margin:18px 0 0;max-width:none}
  .ph-l{transform:translateX(-118%) rotate(-7deg)}
  .ph-r{transform:translateX(18%) rotate(7deg)}
  .end-g{grid-template-columns:minmax(0,1fr)}
  .gal{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--hi) transparent}
  .gi{flex:0 0 136px;scroll-snap-align:start}
  .gal-h{display:flex;align-items:center;gap:12px;margin-top:6px;font:var(--w-m) .75rem/1 var(--font-m);letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
  .gal-h i{flex:1;height:1px;background:linear-gradient(90deg,var(--hi),var(--line))}
  /* La estantería se desliza de lado, con su aviso */
  .shelf{gap:14px;overflow-x:auto;margin-inline:calc(var(--gut)*-1);padding:22px calc(var(--gut) + 30px) 14px var(--gut);scroll-snap-type:x proximity;scroll-padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:var(--hi) transparent;
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 46px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}
  .serie{flex:none}
  .serie ol{gap:6px}
  .cart{flex:none;width:66px;height:252px;scroll-snap-align:start}
  .cart:nth-child(3n+2){height:244px}
  .cart-duo{width:138px}
  .cart b{font-size:1.08rem}
  .shelf-h{display:flex}
  /* en el móvil, resaltar una serie la deja sola en la estantería */
  #f-pocket:checked~.shelf .serie:not(.se-pocket),#f-deluxe:checked~.shelf .serie:not(.se-deluxe),
  #f-vista:checked~.shelf .serie:not(.se-vista),#f-duo:checked~.shelf .serie:not(.se-duo){display:none}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .c-jue,.c-idi{grid-column:span 12}
  .c-est,.c-con,.c-tie{grid-template-columns:minmax(0,1fr)}
  .shot{aspect-ratio:390/330}
  .duo{--pw:150px;max-width:270px}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .big-sw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .big-sw .k{padding-right:8px;gap:9px}
  .big-sw .k i{width:40px;height:34px}
  .big-sw .k span{white-space:normal;text-align:left}
  .big-sw .k:last-child{grid-column:1/-1}
  .cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
  .btn-2,.gp{min-height:56px}
  .gp{width:100%;gap:8px;padding:8px 10px}
  .gp small{letter-spacing:.02em;white-space:nowrap}
  .btn-2{justify-content:center;gap:8px;padding:0 12px;line-height:1.15}
  .sw-g{grid-template-columns:repeat(4,minmax(0,1fr))}
  .keys ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how ol{grid-template-columns:minmax(0,1fr);row-gap:0}
  .how li,.how li:first-child{padding:16px 0 0;margin-top:16px;border-left:0;border-top:1px solid var(--line-2)}
  .how li:first-child{padding-top:0;margin-top:0;border-top:0}
  .stamp{font-size:.78rem;padding:8px 10px 6px}
  .foot-end{padding-bottom:20px}
}
@media (max-width:380px){
  .tag{padding:7px 12px 7px 10px;gap:8px;font-size:.7rem;letter-spacing:.02em}
  .stage-k{letter-spacing:.06em}
  .cta{grid-template-columns:minmax(0,1fr)}
  .tag{margin-bottom:12px}
  .hero h1{margin-bottom:12px}
  .lead{margin-bottom:14px;font-size:1em;line-height:1.5}
  .sw{padding:10px}
  .sw-g{gap:6px}
  .kg i{letter-spacing:.06em}
  .perks{grid-template-columns:1fr}
  .term dl div{grid-template-columns:11ch minmax(0,1fr);gap:8px}
  .term{font-size:.82rem}
  .bars{width:110px}
}

/* ==========================================================================
   6. PIELES.  Cada radio (#p-…) viste .page con sus fichas y sus adornos.
   Funciona con el combinador ~ (cualquier navegador); html:has() solo se usa
   al final para teñir el lienzo de fuera de la página.
   ========================================================================== */
.page{--t2:#a6b1cd;--t-hi:#8ab4ff;--t-line:rgba(125,155,225,.3)}
.term{--ink2:var(--t2);--hi-ink:var(--t-hi);--hi:var(--t-hi);--line:var(--t-line);--line-2:var(--t-line)}
.gi img{border-radius:var(--rad-s)}
@keyframes bulbs{0%,49%{opacity:1}50%,100%{opacity:.5}}
@keyframes flick{0%,18%,23%,61%,66%,100%{opacity:1}20%,63%{opacity:.5}}
@keyframes rise{to{transform:translateY(-125vh)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes flame{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}

/* ============================ MINIMAL OSCURO ============================ */
#p-dark:checked~.page .fx{background:
  radial-gradient(900px 620px at 82% 220px,rgba(60,110,255,.26),transparent 70%) no-repeat,
  radial-gradient(760px 640px at -6% 1700px,rgba(60,110,255,.13),transparent 70%) no-repeat,
  radial-gradient(820px 640px at 104% 3300px,rgba(60,110,255,.13),transparent 70%) no-repeat,
  radial-gradient(760px 640px at 0 88%,rgba(60,110,255,.12),transparent 70%) no-repeat,
  radial-gradient(circle at 1px 1px,rgba(140,170,240,.17) 1px,transparent 1.6px) 0 0/28px 28px}
#p-dark:checked~.page .fx-a{right:-20vmax;top:-28vmax;width:80vmax;height:80vmax;border-radius:50%;border:1px solid rgba(120,160,255,.17)}
#p-dark:checked~.page .fx-a::before{content:"";position:absolute;inset:10vmax;border-radius:50%;border:1px dashed rgba(120,160,255,.2)}
#p-dark:checked~.page .fx-a::after{content:"";position:absolute;inset:23vmax;border-radius:50%;border:1px solid rgba(120,160,255,.11)}
#p-dark:checked~.page .fx-b{left:6px;top:0;bottom:0;width:10px;background:
  repeating-linear-gradient(to bottom,rgba(140,170,240,.5) 0 1px,transparent 1px 70px) 0 0/10px 100% no-repeat,
  repeating-linear-gradient(to bottom,rgba(140,170,240,.3) 0 1px,transparent 1px 14px) 0 0/5px 100% no-repeat}
#p-dark:checked~.page h1 em{background:linear-gradient(95deg,#9cc0ff,#4f8cff 55%,#c5d9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#p-dark:checked~.page .btn-2:hover{border-color:var(--hi)}
#p-dark:checked~.page .stage::before,#p-dark:checked~.page .stage::after{content:"";position:absolute;width:34px;height:34px;border:2px solid var(--hi)}
#p-dark:checked~.page .stage::before{left:0;top:0;border-right:0;border-bottom:0}
#p-dark:checked~.page .stage::after{right:0;bottom:28px;border-left:0;border-top:0}
#p-dark:checked~.page .fl-1{left:46px;top:-5px}
#p-dark:checked~.page .fl-1::before{content:"01 — LCD · SX-01 / SX-15";font:400 .72rem/1 var(--font-m);letter-spacing:.22em;color:var(--hi-ink);white-space:nowrap}
#p-dark:checked~.page .fl-2{left:50%;top:50%;width:calc(var(--pw)*2.1);height:calc(var(--pw)*2.1);margin:calc(var(--pw)*-1.08) 0 0 calc(var(--pw)*-1.05);border-radius:50%;border:1px solid rgba(120,160,255,.3);animation:spin 70s linear infinite}
#p-dark:checked~.page .fl-2::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--hi);box-shadow:0 0 0 5px rgba(79,140,255,.2),0 0 18px var(--hi)}
#p-dark:checked~.page .fl-3{left:50%;top:50%;width:calc(var(--pw)*1.56);height:calc(var(--pw)*1.56);margin:calc(var(--pw)*-.81) 0 0 calc(var(--pw)*-.78);border-radius:50%;border:1px dashed rgba(120,160,255,.26);animation:spin 110s linear infinite reverse}
#p-dark:checked~.page .fl-3::before{content:"";position:absolute;left:14.6%;top:14.6%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff}
#p-dark:checked~.page .fl-4{right:3%;top:8%;width:22px;height:22px;background:linear-gradient(var(--hi),var(--hi)) center/100% 1px no-repeat,linear-gradient(var(--hi),var(--hi)) center/1px 100% no-repeat}
#p-dark:checked~.page .card::before{content:"";left:-1px;top:-1px;width:26px;height:26px;border-left:2px solid var(--hi);border-top:2px solid var(--hi);border-top-left-radius:var(--rad)}
#p-dark:checked~.page .card::after{content:"0" counter(c);right:22px;top:-7px;padding:0 9px;background:var(--bg);font:400 .72rem/1.3 var(--font-m);letter-spacing:.22em;color:var(--ink2)}
#p-dark:checked~.page .card-k::before,#p-dark:checked~.page .specs-t::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:var(--hi);vertical-align:.12em}
#p-dark:checked~.page .sh-k span::after{content:" —";color:var(--hi-ink)}
#p-dark:checked~.page .sw{background:linear-gradient(180deg,rgba(24,33,58,.75),rgba(13,18,33,.8))}
#p-dark:checked~.page .strip i:nth-child(1){left:-25%;right:-25%;top:30px;height:520px;border-radius:50%;border-top:1px solid rgba(140,180,255,.7);background:radial-gradient(ellipse at 50% 0,rgba(79,140,255,.2),transparent 55%);box-shadow:0 -20px 60px -22px rgba(79,140,255,.75)}
#p-dark:checked~.page .strip i:nth-child(2){left:var(--gut);right:var(--gut);top:6px;height:8px;background:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 24px)}
#p-dark:checked~.page .sh::before{content:"0" counter(s);position:absolute;right:0;top:-.2em;z-index:-1;font:800 clamp(5rem,13vw,10.5rem)/1 "Rubik",sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(120,160,255,.2)}

/* ============================== CYBERPUNK ============================== */
#p-cyber:checked~.page{
  --skin-n:"02/24";--skin:"CYBERPUNK";
  --bg:#07031a;--bg-b:#0c0526;--panel:rgba(16,8,44,.88);--panel-2:rgba(44,18,96,.75);--bar:rgba(7,3,26,.92);
  --ink:#ecfbff;--ink2:#adc2e2;--hi:#ffe600;--hi-ink:#ffe600;--hi2:#00f0ff;--on-hi:#0a0a0a;--focus:#00f0ff;
  --line:rgba(0,240,255,.26);--line-2:rgba(0,240,255,.58);
  --rad:0px;--rad-s:0px;--rad-btn:0px;
  --font-d:"Orbitron","Rubik",sans-serif;--font-b:"Share Tech Mono",ui-monospace,Menlo,monospace;--fs:.98rem;--lh:1.62;
  --h1-fs:clamp(1.5rem,4.2vw,3.25rem);--h1-w:900;--h1-ls:.01em;--h1-lh:1.14;--h1-tt:uppercase;
  --h2-fs:clamp(1.25rem,3vw,2.2rem);--h2-w:900;--h2-ls:.02em;--h2-tt:uppercase;
  --h3-fs:1.04rem;--h3-w:800;--h3-ls:.05em;--h3-tt:uppercase;
  --sh:0 0 0 0 transparent;
  --ph-frame:#130a2e;--ph-edge:#ffe600;--ph-rad:10px;--ph-sh:8px 8px 0 rgba(0,240,255,.4),0 0 60px -8px rgba(255,43,214,.65);
  --hud-a:"> LINK PLAYER_01 ... OK";--hud-b:"SIGNAL 98%";
  --k-pre:"//";--coin-a:#0a0a0a;--coin-b:#ffe600;--strip-h:132px;--term-bg:#03010c;--term-ink:#d7fbff;--t2:#9fb6da;--t-hi:#ffe600;--t-line:rgba(0,240,255,.4);
  --shot-menu:url(../img/cyber_menu.webp);--shot-retro:url(../img/cyber_game_retro.webp);--shot-modern:url(../img/cyber_game_modern.webp);--shot-shop:url(../img/cyber_shop.webp);
  --sky:linear-gradient(90deg,#000 55%,transparent 0) 0 100%/110px 62% repeat-x,linear-gradient(90deg,#000 30%,transparent 0) 30px 100%/170px 94% repeat-x,linear-gradient(90deg,#000 72%,transparent 0) 12px 100%/64px 40% repeat-x,linear-gradient(90deg,#000 14%,transparent 0) 96px 100%/290px 100% repeat-x;
}
#p-cyber:checked~.page .fx{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),
  linear-gradient(rgba(0,240,255,.075) 1px,transparent 1px) 0 0/100% 48px,
  linear-gradient(90deg,rgba(0,240,255,.075) 1px,transparent 1px) 0 0/48px 100%,
  radial-gradient(70vw 60vh at 88% 0,rgba(255,43,214,.26),transparent 70%),
  radial-gradient(60vw 50vh at 0 80%,rgba(0,240,255,.12),transparent 70%),
  linear-gradient(#07031a,#170636 70%,#2a0a4f)}
#p-cyber:checked~.page .fx-a{right:8px;top:22%;width:7px;height:190px;background:repeating-linear-gradient(to bottom,#00f0ff 0 2px,transparent 2px 5px,#00f0ff 5px 6px,transparent 6px 12px);opacity:.6}
#p-cyber:checked~.page .fx-b{left:8px;bottom:12%;width:7px;height:140px;background:repeating-linear-gradient(to bottom,#ff2bd6 0 3px,transparent 3px 7px);opacity:.6}
#p-cyber:checked~.page .top{border-bottom:6px solid;border-image:repeating-linear-gradient(135deg,#ffe600 0 12px,#111 12px 24px) 6}
#p-cyber:checked~.page .brand-n{font-weight:900;letter-spacing:.14em;color:#ffe600;text-shadow:2px 0 #ff2bd6,-2px 0 #00f0ff}
#p-cyber:checked~.page .brand-s{color:#00f0ff;letter-spacing:.3em}
#p-cyber:checked~.page .brand-s::before{border-radius:0;background:#ff2bd6}
#p-cyber:checked~.page .brand-s::after{content:"// SYS";color:var(--ink2)}
#p-cyber:checked~.page .nav a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
#p-cyber:checked~.page .nav a:hover{background:#ffe600;color:#0a0a0a}
#p-cyber:checked~.page .tag{border:0;background:#ffe600;color:#0a0a0a;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));padding-inline:16px 20px}
#p-cyber:checked~.page .tag i{border-radius:0;background:#0a0a0a}
#p-cyber:checked~.page h1{color:#ffe600;text-shadow:.045em 0 #ff2bd6,-.045em 0 #00c8ff}
#p-cyber:checked~.page h1 em{color:#fff}
#p-cyber:checked~.page h1::after{content:"_";color:#00f0ff;text-shadow:none;animation:blink 1s steps(1) infinite}
#p-cyber:checked~.page .lead::before{content:"> ";color:#00f0ff}
#p-cyber:checked~.page .gp{border-color:#00f0ff;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);font-family:"Orbitron",sans-serif;font-size:1rem;letter-spacing:.04em}
#p-cyber:checked~.page .btn-2{border:0;background:#ffe600;color:#0a0a0a;padding:0 38px 0 0;font:800 .8rem/1.2 "Orbitron",sans-serif;letter-spacing:.08em;text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%)}
#p-cyber:checked~.page .btn-2::before{content:"";align-self:stretch;width:22px;margin-right:4px;background:repeating-linear-gradient(135deg,#0a0a0a 0 5px,#ffe600 5px 10px)}
#p-cyber:checked~.page .btn-2::after{content:"»";color:#0a0a0a}
#p-cyber:checked~.page .btn-2:hover{background:#00f0ff}
#p-cyber:checked~.page .card,#p-cyber:checked~.page .sw,#p-cyber:checked~.page .specs li{
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  background:linear-gradient(225deg,transparent 12.4px,var(--line-2) 12.4px 14px,transparent 14px) top right/26px 26px no-repeat,
    linear-gradient(45deg,transparent 12.4px,var(--line-2) 12.4px 14px,transparent 14px) bottom left/26px 26px no-repeat,var(--panel)}
#p-cyber:checked~.page .card::before{content:"";left:0;top:0;width:64px;height:6px;background:repeating-linear-gradient(135deg,#ffe600 0 6px,#111 6px 12px)}
#p-cyber:checked~.page .card::after{content:"[ ID:0" counter(c) " ]";right:28px;top:6px;font:400 .72rem/1 "Share Tech Mono",monospace;letter-spacing:.18em;color:#00f0ff}
#p-cyber:checked~.page .card-k{color:#00f0ff}
#p-cyber:checked~.page .card-k::before{content:"> ";color:#ff2bd6}
#p-cyber:checked~.page .sh-k{color:#00f0ff}
#p-cyber:checked~.page .sh-k::before{color:#ff2bd6}
#p-cyber:checked~.page .sh-k::after{height:5px;background:repeating-linear-gradient(90deg,rgba(0,240,255,.6) 0 2px,transparent 2px 7px)}
#p-cyber:checked~.page h2{text-shadow:3px 3px 0 rgba(255,43,214,.75)}
#p-cyber:checked~.page h2::after{content:"_";color:#ffe600;text-shadow:none}
#p-cyber:checked~.page .sh::before{content:"0" counter(s);position:absolute;right:0;top:-.1em;z-index:-1;font:900 clamp(4.4rem,11vw,9rem)/1 "Orbitron",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(0,240,255,.3);text-shadow:6px 0 0 rgba(255,43,214,.12)}
#p-cyber:checked~.page .stage::before{content:"";position:absolute;left:0;right:0;bottom:26px;height:8px;background:repeating-linear-gradient(135deg,#ffe600 0 10px,#111 10px 20px)}
#p-cyber:checked~.page .stage-k{color:#00f0ff}
#p-cyber:checked~.page .fl-1{left:-1%;top:0;z-index:4;padding:7px 11px;border:2px solid #00f0ff;background:rgba(7,3,26,.85);box-shadow:0 0 14px #00f0ff,inset 0 0 9px rgba(0,240,255,.5)}
#p-cyber:checked~.page .fl-1::before{content:"ARCADE 24H";font:800 .7rem/1 "Orbitron",sans-serif;letter-spacing:.14em;color:#00f0ff;text-shadow:0 0 8px #00f0ff;white-space:nowrap}
#p-cyber:checked~.page .fl-2{right:0;top:34px;z-index:4;padding:10px 5px;border:2px solid #ff2bd6;background:rgba(7,3,26,.85);box-shadow:0 0 14px #ff2bd6,inset 0 0 9px rgba(255,43,214,.5);writing-mode:vertical-rl;animation:flick 5s infinite}
#p-cyber:checked~.page .fl-2::before{content:"ネオン";font:700 1rem/1 sans-serif;letter-spacing:.2em;color:#ff7be6;text-shadow:0 0 8px #ff2bd6}
#p-cyber:checked~.page .fl-3{left:0;bottom:48px;z-index:4;padding:7px 11px;border-left:3px solid #ffe600;background:rgba(7,3,26,.88)}
#p-cyber:checked~.page .fl-3::before{content:"> BOOT GAME ROM .... OK\A> ICE SCAN ...... CLEAR\A> RUN _";white-space:pre;font:400 .72rem/1.7 "Share Tech Mono",monospace;letter-spacing:.08em;color:#00f0ff}
#p-cyber:checked~.page .fl-4{right:1%;bottom:50px;z-index:4;width:46px;height:28px;background:
  linear-gradient(#ffe600,#ffe600) 0 100%/6px 20% no-repeat,linear-gradient(#ffe600,#ffe600) 10px 100%/6px 40% no-repeat,
  linear-gradient(#ffe600,#ffe600) 20px 100%/6px 60% no-repeat,linear-gradient(#ffe600,#ffe600) 30px 100%/6px 80% no-repeat,
  linear-gradient(rgba(255,230,0,.3),rgba(255,230,0,.3)) 40px 100%/6px 100% no-repeat}
#p-cyber:checked~.page .ph-c::after{content:"";position:absolute;left:-7px;top:18%;width:4px;height:22%;background:#00f0ff;box-shadow:0 0 10px #00f0ff}
#p-cyber:checked~.page .strip i:nth-child(1){inset:0 0 20px 0;background:#2a1260;-webkit-mask:var(--sky);mask:var(--sky)}
#p-cyber:checked~.page .strip i:nth-child(1)::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffe600 1px,transparent 1.7px) 0 0/10px 12px,radial-gradient(circle,#00f0ff 1.2px,transparent 1.9px) 5px 6px/30px 36px,radial-gradient(circle,#ff2bd6 1.2px,transparent 1.9px) 15px 18px/50px 48px;opacity:.75}
#p-cyber:checked~.page .strip i:nth-child(2){left:0;right:0;bottom:20px;height:44px;background:#0b0424;-webkit-mask:linear-gradient(90deg,#000 50%,transparent 0) 40px 100%/140px 100% repeat-x,linear-gradient(90deg,#000 62%,transparent 0) 0 100%/86px 56% repeat-x;mask:linear-gradient(90deg,#000 50%,transparent 0) 40px 100%/140px 100% repeat-x,linear-gradient(90deg,#000 62%,transparent 0) 0 100%/86px 56% repeat-x}
#p-cyber:checked~.page .strip i:nth-child(3){left:0;right:0;bottom:0;height:20px;overflow:hidden;background:#ffe600;color:#0a0a0a;font:400 .72rem/20px "Share Tech Mono",monospace;letter-spacing:.22em;white-space:nowrap;text-indent:16px}
#p-cyber:checked~.page .strip i:nth-child(3)::before{content:"PLAYER_01 // LINK ESTABLISHED // 15 LCD UNITS // 24 SKINS // ICE CLEAR // PLAYER_01 // LINK ESTABLISHED // 15 LCD UNITS // 24 SKINS // ICE CLEAR // PLAYER_01 // LINK ESTABLISHED // 15 LCD UNITS // 24 SKINS //"}
#p-cyber:checked~.page .gi img{box-shadow:0 0 0 1px #00f0ff,5px 5px 0 rgba(255,43,214,.5)}
#p-cyber:checked~.page .seg label,#p-cyber:checked~.page .k span{font-family:"Share Tech Mono",monospace}

/* ============================ HOTEL INFERNAL ============================ */
#p-hotel:checked~.page{
  --skin-n:"03/24";--skin:"HOTEL INFERNAL";
  --bg:#3d0510;--bg-b:#2a030b;--panel:rgba(38,4,12,.86);--panel-2:rgba(120,16,38,.62);--bar:rgba(42,3,11,.94);
  --ink:#fff0da;--ink2:#f4c9b8;--hi:#ffcf5a;--hi-ink:#ffd874;--hi2:#ff4f8b;--on-hi:#2a030b;--focus:#fff;
  --line:rgba(255,207,90,.32);--line-2:rgba(255,207,90,.66);
  --rad:16px;--rad-s:10px;--bw:2px;
  --font-d:"Limelight","Rubik",serif;--font-m:"Rubik",sans-serif;--w-m:600;--fs-m:.7rem;
  --h1-fs:clamp(2rem,5vw,4rem);--h1-w:400;--h1-ls:.005em;--h1-lh:1.06;
  --h2-fs:clamp(1.7rem,3.6vw,2.7rem);--h2-w:400;--h2-ls:.01em;--h3-fs:1.42rem;--h3-w:400;--h3-ls:.01em;
  --sh:0 26px 50px -30px #000;
  --ph-frame:linear-gradient(160deg,#ffe29a,#b8802a 45%,#ffd874 75%,#a56a14);--ph-edge:#5a2a00;--ph-rad:30px;--ph-sh:0 30px 70px -20px rgba(0,0,0,.85),0 0 70px -10px rgba(255,79,139,.6);
  --hud-a:"★ NOW SHOWING ★";--hud-b:"ROOM 666";
  --k-pre:"★";--coin-a:#fff3c4;--coin-b:#e0a02a;--strip-h:112px;--term-bg:#1c0207;--term-ink:#ffeccd;--t2:#f0bfae;--t-hi:#ffd874;--t-line:rgba(255,207,90,.4);
  --shot-menu:url(../img/hotel_menu.webp);--shot-retro:url(../img/hotel_game_retro.webp);--shot-modern:url(../img/hotel_game_modern.webp);--shot-shop:url(../img/hotel_shop.webp);
}
#p-hotel:checked~.page .fx{background:
  radial-gradient(80vw 70vh at 50% 8%,rgba(255,80,110,.3),transparent 70%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 10px,rgba(0,0,0,0) 26px,rgba(255,120,120,.08) 40px,rgba(0,0,0,0) 54px,rgba(0,0,0,.34) 72px),
  linear-gradient(#640a1b,#2a030b)}
#p-hotel:checked~.page .fx-a{left:-10px;right:-10px;top:44px;height:110px;background:radial-gradient(ellipse at 50% 0,#7d0c21 67%,transparent 69%) 0 0/130px 110px repeat-x;opacity:.75;filter:drop-shadow(0 3px 0 rgba(255,207,90,.5))}
#p-hotel:checked~.page .fx-b{left:6%;top:-8%;width:34vw;height:130vh;background:linear-gradient(rgba(255,230,160,.13),transparent 72%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);transform:rotate(-16deg);transform-origin:50% 0}
#p-hotel:checked~.page .top{border-bottom:2px solid #ffcf5a}
#p-hotel:checked~.page .top::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:7px;background:radial-gradient(circle,#fff3c4 0 2px,#ffb02e 2.6px 3.2px,transparent 3.6px) 0 0/20px 7px repeat-x;animation:bulbs 1.3s steps(1) infinite}
#p-hotel:checked~.page .brand-n{font-weight:400;letter-spacing:.14em;color:#ffd874;text-shadow:0 2px 0 #7a0a1c}
#p-hotel:checked~.page .brand-s::before{background:#ff4f8b;box-shadow:0 0 8px #ff4f8b}
#p-hotel:checked~.page .tag{border:2px solid #ffcf5a;background:#2a030b;box-shadow:inset 0 0 0 3px #2a030b,inset 0 0 0 4px rgba(255,207,90,.5)}
#p-hotel:checked~.page .tag i{background:#ff4f8b;box-shadow:0 0 8px #ff4f8b}
#p-hotel:checked~.page h1{text-shadow:0 3px 0 #7a0a1c,0 0 30px rgba(255,79,139,.6)}
#p-hotel:checked~.page h1 em{color:#ffd874}
#p-hotel:checked~.page h2{text-shadow:0 2px 0 #7a0a1c,0 0 22px rgba(255,79,139,.5)}
#p-hotel:checked~.page .gp{border-color:#ffcf5a;background:rgba(42,3,11,.8)}
#p-hotel:checked~.page .btn-2{border:2px solid #ffcf5a;background:linear-gradient(#e0245f,#a81145);color:#fff;box-shadow:0 0 22px rgba(255,79,139,.55),inset 0 2px 0 rgba(255,255,255,.3)}
#p-hotel:checked~.page .btn-2::after{content:"♥";color:#ffd874}
#p-hotel:checked~.page .btn-2:hover{background:linear-gradient(#c81a52,#8a0c37)}
#p-hotel:checked~.page .card,#p-hotel:checked~.page .sw{border-color:#ffcf5a;box-shadow:inset 0 0 0 4px #2a030b,inset 0 0 0 5px rgba(255,207,90,.45),var(--sh)}
#p-hotel:checked~.page .card::before{content:"";left:20px;right:20px;top:-6px;height:9px;background:radial-gradient(circle,#fff3c4 0 2.2px,#ffb02e 2.8px 3.6px,transparent 4.2px) 0 0/22px 9px repeat-x;animation:bulbs 1.3s steps(1) infinite}
#p-hotel:checked~.page .card:nth-child(even)::before{animation-delay:-.65s}
#p-hotel:checked~.page .card::after{content:"ROOM 66" counter(c);right:20px;bottom:-12px;padding:4px 11px;border-radius:5px;background:linear-gradient(#ffe29a,#d9a23a);color:#2a030b;font:700 .72rem/1.2 "Rubik",sans-serif;letter-spacing:.18em;box-shadow:0 2px 0 #7a4a08}
#p-hotel:checked~.page .sh-k::after{height:2px;background:linear-gradient(90deg,#ffcf5a,transparent)}
#p-hotel:checked~.page .ph-c::before{content:"";position:absolute;inset:-15px;border:5px dotted #ffd874;border-radius:44px;animation:bulbs 1.3s steps(1) infinite}
#p-hotel:checked~.page .fl-1{left:50%;top:-12px;z-index:4;padding:7px 18px;border:3px dotted #ffcf5a;border-radius:12px;background:#2a030b;transform:translateX(-50%) rotate(-2deg);box-shadow:0 8px 20px rgba(0,0,0,.6)}
#p-hotel:checked~.page .fl-1::before{content:"★ SHOWTIME ★";font:400 .92rem/1 "Limelight",serif;letter-spacing:.18em;color:#ff8fb8;text-shadow:0 0 10px #ff4f8b;white-space:nowrap}
#p-hotel:checked~.page .fl-2{right:1%;top:70px;z-index:4;animation:spin 40s linear infinite}
#p-hotel:checked~.page .fl-2::before{content:"★";font:400 3rem/1 serif;color:#ffd874;text-shadow:0 0 18px rgba(255,207,90,.9)}
#p-hotel:checked~.page .fl-3{left:0;bottom:56px;z-index:4;padding:6px 11px;border:2px solid #ff5a5a;border-radius:6px;background:#2a030b;box-shadow:0 0 16px rgba(255,60,60,.75);animation:flick 6s infinite}
#p-hotel:checked~.page .fl-3::before{content:"● ON AIR";font:700 .72rem/1 "Rubik",sans-serif;letter-spacing:.2em;color:#ff8a8a;white-space:nowrap}
#p-hotel:checked~.page .fl-4{right:3%;bottom:60px;z-index:4;padding:5px 10px;border-radius:999px 999px 6px 6px;background:linear-gradient(#ffe29a,#d9a23a);box-shadow:0 3px 0 #7a4a08}
#p-hotel:checked~.page .fl-4::before{content:"666";font:400 .9rem/1 "Limelight",serif;color:#2a030b}
#p-hotel:checked~.page .stage-k{color:#ffd874}
#p-hotel:checked~.page .strip i:nth-child(1){left:0;right:0;bottom:0;height:92px;background:linear-gradient(#ff3b1f,#8a0a12);-webkit-mask:conic-gradient(from 160deg at 50% 0,#000 40deg,transparent 0) 0 0/54px 100%;mask:conic-gradient(from 160deg at 50% 0,#000 40deg,transparent 0) 0 0/54px 100%;opacity:.9;transform-origin:50% 100%;animation:flame 1.7s ease-in-out infinite}
#p-hotel:checked~.page .strip i:nth-child(2){left:0;right:0;bottom:0;height:56px;background:linear-gradient(#ffd34d,#ff6a1f);-webkit-mask:conic-gradient(from 155deg at 50% 0,#000 50deg,transparent 0) 17px 0/36px 100%;mask:conic-gradient(from 155deg at 50% 0,#000 50deg,transparent 0) 17px 0/36px 100%;transform-origin:50% 100%;animation:flame 1.1s ease-in-out infinite reverse}
#p-hotel:checked~.page .strip i:nth-child(3){left:0;right:0;bottom:0;height:5px;background:#ffcf5a}
#p-hotel:checked~.page .gi img{box-shadow:0 0 0 2px #ffcf5a,0 18px 30px -18px #000}
#p-hotel:checked~.page .seg label{letter-spacing:.12em}
#p-hotel:checked~.page #c-maq:checked~.seg label[for="c-maq"],#p-hotel:checked~.page #c-mod:checked~.seg label[for="c-mod"],
#p-hotel:checked~.page #m-cla:checked~.seg label[for="m-cla"],#p-hotel:checked~.page #m-plus:checked~.seg label[for="m-plus"]{background:linear-gradient(#e0245f,#a81145);color:#fff}

/* ================================ NEÓN ================================ */
#p-neon:checked~.page{
  --skin-n:"08/24";--skin:"NEÓN";
  --bg:#0d0524;--bg-b:#150838;--panel:rgba(18,7,46,.88);--panel-2:rgba(64,20,118,.6);--bar:rgba(13,5,36,.92);
  --ink:#f8edff;--ink2:#cdb9f0;--hi:#ff4fd8;--hi-ink:#ff93e8;--hi2:#37f0ff;--on-hi:#1a0224;--focus:#37f0ff;
  --line:rgba(255,79,216,.36);--line-2:rgba(255,79,216,.75);
  --rad:18px;--rad-s:12px;--bw:2px;
  --font-d:"Audiowide","Rubik",sans-serif;--font-m:"Audiowide","Rubik",sans-serif;--fs-m:.68rem;--ls-m:.16em;
  --h1-fs:clamp(1.7rem,4.4vw,3.45rem);--h1-w:400;--h1-ls:.01em;--h1-lh:1.14;--h1-tt:uppercase;
  --h2-fs:clamp(1.4rem,3.2vw,2.4rem);--h2-w:400;--h2-ls:.02em;--h2-tt:uppercase;--h3-fs:1.1rem;--h3-w:400;--h3-ls:.03em;--h3-tt:uppercase;
  --sh:0 0 18px rgba(255,79,216,.5),inset 0 0 18px rgba(255,79,216,.14);
  --ph-frame:#1a0838;--ph-edge:#ff4fd8;--ph-sh:0 0 0 5px #0d0524,0 0 0 7px #37f0ff,0 0 34px rgba(55,240,255,.75),0 0 80px rgba(255,79,216,.55);
  --hud-a:"OPEN ALL NIGHT";--hud-b:"INSERT COIN";
  --k-pre:"✦";--coin-a:#fff6b0;--coin-b:#ffc928;--strip-h:88px;--term-bg:#0a031c;--term-ink:#eaffff;--t2:#c3b0ea;--t-hi:#37f0ff;--t-line:rgba(55,240,255,.45);
  --shot-menu:url(../img/neon_menu.webp);--shot-retro:url(../img/neon_game_retro.webp);--shot-modern:url(../img/neon_game_modern.webp);--shot-shop:url(../img/neon_shop.webp);
}
#p-neon:checked~.page .fx{background:
  radial-gradient(60vw 60vh at 0 10%,rgba(255,79,216,.2),transparent 70%),
  radial-gradient(60vw 60vh at 100% 60%,rgba(55,240,255,.16),transparent 70%),
  conic-gradient(from 0deg at 2px 28px,transparent 270deg,rgba(140,80,220,.3) 0) 0 0/64px 56px,
  conic-gradient(from 0deg at 2px 28px,transparent 270deg,rgba(140,80,220,.3) 0) 32px 28px/64px 56px,
  linear-gradient(rgba(140,80,220,.3) 2px,transparent 2px) 0 0/100% 28px,
  #0d0524}
#p-neon:checked~.page .fx-a{left:0;right:0;bottom:0;height:34vh;background:linear-gradient(transparent,rgba(255,79,216,.16))}
#p-neon:checked~.page :is(.brand-s,.gp small,.gp-nota,.stage-k,.k-more span,.gi p span,.gi-p span,.foot-c,.gal-h,.mx,.tag){font-family:"Rubik",sans-serif;font-weight:600}
#p-neon:checked~.page .top{border-bottom:2px solid #ff4fd8;box-shadow:0 0 18px rgba(255,79,216,.7)}
#p-neon:checked~.page .brand-n{font-weight:400;letter-spacing:.14em;color:#fff;text-shadow:0 0 6px #ff4fd8,0 0 18px #ff4fd8}
#p-neon:checked~.page .brand-s::before{background:#37f0ff;box-shadow:0 0 8px #37f0ff}
#p-neon:checked~.page .nav a:hover{background:transparent;color:#aefaff;text-shadow:0 0 10px #37f0ff}
#p-neon:checked~.page .tag{border:2px solid #37f0ff;color:#c4fbff;background:rgba(13,5,36,.8);box-shadow:0 0 12px rgba(55,240,255,.6),inset 0 0 10px rgba(55,240,255,.25)}
#p-neon:checked~.page .tag i{background:#ffe45c;box-shadow:0 0 8px #ffc928}
#p-neon:checked~.page h1{color:#fff;text-shadow:0 0 4px #fff,0 0 14px #ff4fd8,0 0 34px #ff4fd8,0 0 70px #b400ff}
#p-neon:checked~.page h1 em{color:#d9fdff;text-shadow:0 0 4px #fff,0 0 14px #37f0ff,0 0 36px #37f0ff;animation:flick 7s infinite}
#p-neon:checked~.page h2{text-shadow:0 0 12px #ff4fd8,0 0 30px #ff4fd8}
#p-neon:checked~.page .card h3{color:#d9fdff;text-shadow:0 0 10px rgba(55,240,255,.8)}
#p-neon:checked~.page .gp{border:2px dashed rgba(55,240,255,.7);background:rgba(13,5,36,.75)}
#p-neon:checked~.page .btn-2{border:2px solid #ff4fd8;color:#ffd0f5;font:400 .82rem/1.2 "Audiowide",sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 14px rgba(255,79,216,.8),inset 0 0 12px rgba(255,79,216,.4);outline:2px solid rgba(55,240,255,.55);outline-offset:4px}
#p-neon:checked~.page .btn-2:focus-visible{outline:3px solid var(--focus)}
#p-neon:checked~.page .btn-2::after{color:#37f0ff}
#p-neon:checked~.page .card,#p-neon:checked~.page .sw{border-color:#ff4fd8;outline:1px solid rgba(55,240,255,.6);outline-offset:-8px}
#p-neon:checked~.page .card::after{content:"✦ 0" counter(c);right:22px;top:-10px;padding:0 10px;background:#0d0524;font:400 .7rem/1.5 "Audiowide",sans-serif;letter-spacing:.14em;color:#ffe45c;text-shadow:0 0 8px #ffc928}
#p-neon:checked~.page .sh-k{color:#8ff6ff}
#p-neon:checked~.page .sh-k::before{color:#ffe45c;text-shadow:0 0 8px #ffc928}
#p-neon:checked~.page .sh-k::after{height:2px;background:#37f0ff;box-shadow:0 0 10px #37f0ff}
#p-neon:checked~.page .sh::before{content:"0" counter(s);position:absolute;right:0;top:-.1em;z-index:-1;font:400 clamp(4.4rem,11vw,9rem)/1 "Audiowide",sans-serif;color:transparent;-webkit-text-stroke:2px rgba(255,79,216,.4);filter:drop-shadow(0 0 10px rgba(255,79,216,.6))}
#p-neon:checked~.page .fl-1{left:50%;top:-18px;z-index:4;transform:translateX(-50%)}
#p-neon:checked~.page .fl-1::before{content:"ARCADE";font:400 1.5rem/1 "Audiowide",sans-serif;letter-spacing:.2em;color:#fff;text-shadow:0 0 6px #ff4fd8,0 0 18px #ff4fd8,0 0 40px #b400ff}
#p-neon:checked~.page .fl-2{right:0;top:44%;z-index:4;padding:7px 13px;border:2px solid #37f0ff;border-radius:11px;background:rgba(13,5,36,.8);box-shadow:0 0 14px #37f0ff,inset 0 0 10px rgba(55,240,255,.4);animation:flick 5s infinite}
#p-neon:checked~.page .fl-2::before{content:"OPEN";font:400 1rem/1 "Audiowide",sans-serif;letter-spacing:.14em;color:#ff93e8;text-shadow:0 0 10px #ff4fd8}
#p-neon:checked~.page .fl-3{left:0;top:18%;z-index:4}
#p-neon:checked~.page .fl-3::before{content:"→";font:700 2.6rem/1 "Rubik",sans-serif;color:#aefaff;text-shadow:0 0 10px #37f0ff,0 0 26px #37f0ff}
#p-neon:checked~.page .fl-4{left:3%;bottom:64px;z-index:4;animation:bob 4s ease-in-out infinite}
#p-neon:checked~.page .fl-4::before{content:"♪";font:700 2.4rem/1 "Rubik",sans-serif;color:#fff3a8;text-shadow:0 0 10px #ffc928,0 0 26px #ffc928}
#p-neon:checked~.page .stage-k{color:#8ff6ff;text-shadow:0 0 8px #37f0ff}
#p-neon:checked~.page .strip i:nth-child(1){left:0;right:0;top:14px;height:2px;background:#37f0ff;box-shadow:0 0 12px #37f0ff}
#p-neon:checked~.page .strip i:nth-child(2){left:0;top:34px;white-space:nowrap;animation:mq 40s linear infinite}
#p-neon:checked~.page .strip i:nth-child(2)::before{content:"OPEN ALL NIGHT  ✦  HAPPY HOUR  ✦  INSERT COIN  ✦  OPEN ALL NIGHT  ✦  HAPPY HOUR  ✦  INSERT COIN  ✦  OPEN ALL NIGHT  ✦  HAPPY HOUR  ✦  INSERT COIN  ✦  OPEN ALL NIGHT  ✦  HAPPY HOUR  ✦  INSERT COIN  ✦  OPEN ALL NIGHT  ✦  HAPPY HOUR  ✦  INSERT COIN  ✦  OPEN ALL NIGHT  ✦  HAPPY HOUR  ✦  INSERT COIN  ✦  ";white-space:pre;font:400 .82rem/1 "Audiowide",sans-serif;letter-spacing:.3em;color:#ff93e8;text-shadow:0 0 10px #ff4fd8}
#p-neon:checked~.page .strip i:nth-child(3){left:0;right:0;bottom:16px;height:2px;background:#ff4fd8;box-shadow:0 0 12px #ff4fd8}
#p-neon:checked~.page .gi img{box-shadow:0 0 0 2px #ff4fd8,0 0 16px rgba(255,79,216,.6)}
#p-neon:checked~.page .seg label{font-family:"Rubik",sans-serif}

/* ================================ CÓMIC ================================ */
#p-comic:checked~.page{
  --skin-n:"22/24";--skin:"CÓMIC";
  --bg:#ffd91a;--bg-b:#fff;--panel:#fff;--panel-2:#fff1a0;--bar:#fff;
  --ink:#111;--ink2:#2a2a2a;--hi:#d90f28;--hi-ink:#a80a1c;--hi2:#1565d8;--on-hi:#fff;--focus:#1565d8;
  --line:#111;--line-2:#111;
  --rad:6px;--rad-s:4px;--rad-btn:4px;--bw:3px;
  --font-d:"Bangers","Rubik",sans-serif;--font-m:"Bangers","Rubik",sans-serif;--fs-m:1.02rem;--ls-m:.08em;
  --h1-fs:clamp(2.8rem,7.2vw,5.6rem);--h1-w:400;--h1-ls:.02em;--h1-lh:1;--h1-tt:uppercase;
  --h2-fs:clamp(2.2rem,4.8vw,3.6rem);--h2-w:400;--h2-ls:.03em;--h2-tt:uppercase;--h3-fs:1.75rem;--h3-w:400;--h3-ls:.04em;--h3-tt:uppercase;
  --sh:6px 6px 0 #111;
  --ph-frame:#111;--ph-edge:#111;--ph-rad:18px;--ph-sh:9px 9px 0 #111;
  --hud-a:"★ SX-01 ★";--hud-b:"¡EXTRA!";
  --k-pre:"";--coin-a:#fff3a0;--coin-b:#f5a700;--strip-h:104px;--term-bg:#fff;--term-ink:#111;--t2:#333;--t-hi:#a80a1c;--t-line:#111;
  --shot-menu:url(../img/comic_menu.webp);--shot-retro:url(../img/comic_game_retro.webp);--shot-modern:url(../img/comic_game_modern.webp);--shot-shop:url(../img/comic_shop.webp);
  --ol:2px 0 #111,-2px 0 #111,0 2px #111,0 -2px #111,1.5px 1.5px #111,-1.5px 1.5px #111,1.5px -1.5px #111,-1.5px -1.5px #111;
  --star:polygon(50% 0,61% 14%,79% 7%,80% 26%,98% 30%,88% 46%,100% 60%,83% 68%,85% 87%,66% 82%,55% 100%,44% 83%,26% 92%,24% 72%,5% 70%,13% 52%,0 40%,16% 31%,13% 12%,33% 17%);
}
#p-comic:checked~.page .fx{background:
  radial-gradient(circle,rgba(232,150,0,.6) 2.2px,transparent 2.7px) 0 0/14px 14px,
  repeating-conic-gradient(from 0deg at 74% 330px,rgba(255,255,255,.4) 0 9deg,transparent 9deg 18deg),
  #ffd91a}
#p-comic:checked~.page :is(.brand-s,.gp small,.gp-nota,.k-more span,.gi p span,.gi-p span,.foot-c,.gal-h,.mx,.cart-c){font-family:"Rubik",sans-serif;font-weight:700}
#p-comic:checked~.page .top{border-bottom:4px solid #111;-webkit-backdrop-filter:none;backdrop-filter:none}
#p-comic:checked~.page .brand-n{font-size:1.75rem;font-weight:400;letter-spacing:.06em;color:#ffd91a;text-shadow:var(--ol),4px 4px 0 #d90f28}
#p-comic:checked~.page .brand-s{color:#111}
#p-comic:checked~.page .brand-s::before{background:#d90f28}
#p-comic:checked~.page .nav a{font:400 1.18rem/1 "Bangers",sans-serif;letter-spacing:.07em;color:#111}
#p-comic:checked~.page .nav a:hover{background:#ffd91a;box-shadow:inset 0 0 0 3px #111;transform:rotate(-2deg)}
#p-comic:checked~.page .nav a[hreflang]{border:3px solid #111;background:#1565d8;color:#fff}
#p-comic:checked~.page .tag{letter-spacing:.06em;border:3px solid #111;border-radius:0;background:#fff;color:#111;box-shadow:4px 4px 0 #111;transform:rotate(-1.5deg)}
#p-comic:checked~.page .tag i{background:#d90f28;border-radius:0;clip-path:var(--star);width:16px;height:16px}
#p-comic:checked~.page h1{color:#e8112d;text-shadow:var(--ol),6px 6px 0 #111;transform:rotate(-1.5deg);transform-origin:0 50%}
#p-comic:checked~.page h1 em{color:#1565d8}
#p-comic:checked~.page h2{color:#d90f28;text-shadow:var(--ol),4px 4px 0 #111}
#p-comic:checked~.page .lead{position:relative;padding:14px 18px;border:3px solid #111;border-radius:22px 22px 22px 4px;background:#fff;color:#111;box-shadow:5px 5px 0 #111}
#p-comic:checked~.page .sh-s{display:inline-block;padding:6px 12px;border:3px solid #111;background:#fff;color:#111}
#p-comic:checked~.page .gp{border:3px dashed #111;background:#fff}
#p-comic:checked~.page .gp svg{color:#d90f28}
#p-comic:checked~.page .btn-2{border:3px solid #111;background:#d90f28;color:#fff;font:400 1.35rem/1 "Bangers",sans-serif;letter-spacing:.06em;box-shadow:5px 5px 0 #111;transform:rotate(-1deg)}
#p-comic:checked~.page .btn-2::after{color:#ffd91a}
#p-comic:checked~.page .btn-2:hover{background:#1565d8;transform:rotate(1deg) translateY(-2px)}
#p-comic:checked~.page .nota{color:#111;font-weight:500}
#p-comic:checked~.page .nota img{box-shadow:0 0 0 3px #111,4px 4px 0 3px #111}
#p-comic:checked~.page .sw-t{color:#111}
#p-comic:checked~.page .card:nth-child(odd){transform:rotate(-.5deg)}
#p-comic:checked~.page .card:nth-child(even){transform:rotate(.45deg)}
#p-comic:checked~.page .card::before{content:counter(c);right:-12px;top:-18px;display:grid;place-items:center;width:58px;height:58px;background:#d90f28;color:#fff;font:400 1.6rem/1 "Bangers",sans-serif;clip-path:var(--star);z-index:2}
#p-comic:checked~.page .card::after{content:"";right:0;bottom:0;z-index:-1;width:110px;height:110px;background:radial-gradient(circle,#1565d8 1.7px,transparent 2.1px) 0 0/9px 9px;-webkit-mask:linear-gradient(315deg,#000,transparent 55%);mask:linear-gradient(315deg,#000,transparent 55%);opacity:.55}
#p-comic:checked~.page .card p,#p-comic:checked~.page .specs li{color:#111}
#p-comic:checked~.page .card-k{display:inline-block;padding:2px 10px;background:#ffd91a;border:2px solid #111;color:#111;transform:rotate(-1.5deg)}
#p-comic:checked~.page .sh-k{color:#111}
#p-comic:checked~.page .sh-k span{padding:2px 12px;background:#111;color:#ffd91a;transform:rotate(-4deg)}
#p-comic:checked~.page .sh-k::after{height:4px;background:#111}
#p-comic:checked~.page .ph-l .ph-s,#p-comic:checked~.page .ph-r .ph-s{filter:none}
#p-comic:checked~.page .fl{z-index:4;filter:drop-shadow(3px 3px 0 #111)}
#p-comic:checked~.page .fl::before{content:"";position:absolute;inset:0;clip-path:var(--star)}
#p-comic:checked~.page .fl::after{position:absolute;inset:0;display:grid;place-items:center;font:400 1.5rem/1 "Bangers",sans-serif;letter-spacing:.04em;text-shadow:2px 2px 0 #111}
#p-comic:checked~.page .fl-1{left:-3%;top:4px;width:108px;height:108px;transform:rotate(-14deg)}
#p-comic:checked~.page .fl-1::before{background:#d90f28}
#p-comic:checked~.page .fl-1::after{content:"POW!";color:#ffd91a}
#p-comic:checked~.page .fl-2{right:-2%;top:30px;width:96px;height:96px;transform:rotate(12deg)}
#p-comic:checked~.page .fl-2::before{background:#1565d8}
#p-comic:checked~.page .fl-2::after{content:"ZAP!";color:#fff}
#p-comic:checked~.page .fl-3{left:0;bottom:62px;width:74px;height:74px;transform:rotate(-8deg)}
#p-comic:checked~.page .fl-3::before{clip-path:none;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #111}
#p-comic:checked~.page .fl-3::after{content:"WOW!";color:#d90f28;text-shadow:none;font-size:1.3rem}
#p-comic:checked~.page .fl-4{right:0;bottom:70px;width:70px;height:52px}
#p-comic:checked~.page .fl-4::before{clip-path:none;border-radius:50% 50% 50% 8px;background:#fff;box-shadow:inset 0 0 0 3px #111}
#p-comic:checked~.page .fl-4::after{content:"?!";color:#111;text-shadow:none;font-size:1.6rem}
#p-comic:checked~.page .stage-k{color:#111;font:400 1rem/1 "Bangers",sans-serif;letter-spacing:.1em}
#p-comic:checked~.page .strip i:nth-child(1){left:0;right:0;bottom:0;height:62px;border-top:4px solid #111;background:radial-gradient(circle,rgba(255,255,255,.75) 2px,transparent 2.6px) 0 0/12px 12px,#ff6fae}
#p-comic:checked~.page .strip i:nth-child(2){left:0;right:0;bottom:62px;height:40px;background:#1565d8;-webkit-mask:linear-gradient(90deg,#000 55%,transparent 0) 0 100%/96px 64% repeat-x,linear-gradient(90deg,#000 34%,transparent 0) 26px 100%/150px 100% repeat-x,linear-gradient(90deg,#000 70%,transparent 0) 10px 100%/58px 38% repeat-x;mask:linear-gradient(90deg,#000 55%,transparent 0) 0 100%/96px 64% repeat-x,linear-gradient(90deg,#000 34%,transparent 0) 26px 100%/150px 100% repeat-x,linear-gradient(90deg,#000 70%,transparent 0) 10px 100%/58px 38% repeat-x}
#p-comic:checked~.page .strip i:nth-child(3){right:var(--gut);bottom:14px;padding:5px 14px;border:3px solid #111;background:#ffd91a;box-shadow:3px 3px 0 #111;transform:rotate(-2deg)}
#p-comic:checked~.page .strip i:nth-child(3)::before{content:"CONTINUARÁ…";font:400 1.05rem/1 "Bangers",sans-serif;letter-spacing:.08em;color:#111}
#p-comic:checked~.page .gi img{box-shadow:0 0 0 3px #111,6px 6px 0 3px #111}
#p-comic:checked~.page .gi:nth-child(odd) img{transform:rotate(-1deg)}
#p-comic:checked~.page .gi:nth-child(even) img{transform:rotate(1deg)}
#p-comic:checked~.page .gi p,#p-comic:checked~.page .gi-p{font-weight:700}
#p-comic:checked~.page .shot{box-shadow:0 0 0 3px #111,6px 6px 0 3px #111}
#p-comic:checked~.page .seg{border:3px solid #111;background:#fff}
#p-comic:checked~.page .seg label{font:400 1.05rem/1 "Bangers",sans-serif;letter-spacing:.08em;color:#111}
#p-comic:checked~.page .perks li{border:2px solid #111;color:#111;font-weight:500}
#p-comic:checked~.page .k{border:2px solid #111}

/* ================================ OCÉANO ================================ */
#p-ocean:checked~.page{
  --skin-n:"15/24";--skin:"OCÉANO";
  --bg:#063a80;--bg-b:#04285c;--panel:rgba(6,46,108,.8);--panel-2:rgba(32,116,206,.55);--bar:#0a4c98;
  --ink:#f3fbff;--ink2:#d2e8fb;--hi:#6fe6ff;--hi-ink:#93eeff;--hi2:#f4c04e;--on-hi:#03254a;--focus:#fff;
  --line:rgba(160,225,255,.32);--line-2:rgba(160,225,255,.62);
  --rad:26px;--rad-s:16px;--bw:2px;
  --font-d:"Fredoka","Rubik",sans-serif;--font-b:"Fredoka","Rubik",sans-serif;--font-m:"Fredoka","Rubik",sans-serif;--w-m:600;--fs-m:.76rem;--ls-m:.18em;--fs:1.07rem;
  --h1-fs:clamp(2.3rem,5.6vw,4.5rem);--h1-w:700;--h1-ls:-.01em;--h1-lh:1.02;
  --h2-w:700;--h2-ls:-.005em;--h3-fs:1.4rem;--h3-w:600;--h3-ls:0;
  --sh:0 26px 50px -30px rgba(0,10,40,.95),inset 0 2px 0 rgba(255,255,255,.2);
  --ph-frame:linear-gradient(150deg,#ffe9a6,#b98a2c 40%,#f6d57c 70%,#9a6c1a);--ph-edge:#5d3f08;--ph-rad:40px;--ph-sh:0 30px 60px -20px rgba(0,10,40,.95),inset 0 0 0 2px rgba(255,255,255,.4);
  --hud-a:"≈ DEPTH 180 M";--hud-b:"O₂ 98% · 18°C";
  --k-pre:"≈";--coin-a:#eaffff;--coin-b:#58c8ee;--strip-h:128px;--term-bg:#021a3e;--term-ink:#e6f7ff;--t2:#b9d8f2;--t-hi:#93eeff;--t-line:rgba(160,225,255,.4);
  --shot-menu:url(../img/ocean_menu.webp);--shot-retro:url(../img/ocean_game_retro.webp);--shot-modern:url(../img/ocean_game_modern.webp);--shot-shop:url(../img/ocean_shop.webp);
  --brass:linear-gradient(#f8dc8e,#d1a245);
}
#p-ocean:checked~.page .fx{background:
  repeating-linear-gradient(105deg,rgba(255,255,255,.055) 0 60px,transparent 60px 200px),
  linear-gradient(#0b5cb0,#063a80 46%,#031c48)}
#p-ocean:checked~.page .fx-a,#p-ocean:checked~.page .fx-b{left:6%;top:118vh;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.3);
  box-shadow:12vw -18vh 0 3px rgba(255,255,255,.16),30vw -6vh 0 -2px rgba(255,255,255,.34),52vw -34vh 0 5px rgba(255,255,255,.12),74vw -12vh 0 0 rgba(255,255,255,.24),86vw -44vh 0 2px rgba(255,255,255,.18),40vw -58vh 0 -3px rgba(255,255,255,.3);animation:rise 22s linear infinite}
#p-ocean:checked~.page .fx-b{left:14%;animation-duration:31s;animation-delay:-14s}
#p-ocean:checked~.page .top{border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
#p-ocean:checked~.page .top::after{content:"";position:absolute;left:0;right:0;top:100%;height:13px;background:radial-gradient(circle at 50% -3px,#0a4c98 12px,transparent 13px) 0 0/28px 13px repeat-x}
#p-ocean:checked~.page .brand-n{letter-spacing:.2em;font-weight:700}
#p-ocean:checked~.page .tag{letter-spacing:.08em;border:1px solid #7a5412;background:var(--brass);color:#33200a;box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 0 #7a5412}
#p-ocean:checked~.page .tag i{background:#33200a}
#p-ocean:checked~.page h1{text-shadow:0 3px 0 #04306a,0 0 36px rgba(111,230,255,.5)}
#p-ocean:checked~.page h2{text-shadow:0 2px 0 #04306a}
#p-ocean:checked~.page .gp{border-style:dashed;border-width:2px;background:rgba(6,46,108,.7)}
#p-ocean:checked~.page .btn-2{border:2px solid #d8fbff;background:linear-gradient(#a6f3ff,#3cc4ee);color:#03254a;box-shadow:inset 0 -7px 10px rgba(0,80,140,.25),0 6px 0 #0b5d94}
#p-ocean:checked~.page .btn-2::after{color:#03254a}
#p-ocean:checked~.page .btn-2:hover{background:linear-gradient(#c9f8ff,#5fd4f5)}
#p-ocean:checked~.page .card::before{content:"";left:10px;right:10px;top:7px;height:34%;border-radius:18px 18px 50% 50%/18px 18px 26px 26px;background:linear-gradient(rgba(255,255,255,.13),transparent)}
#p-ocean:checked~.page .card::after{content:"";inset:9px;background:
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 0 0/10px 10px no-repeat,
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 100% 0/10px 10px no-repeat,
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 0 100%/10px 10px no-repeat,
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 100% 100%/10px 10px no-repeat}
#p-ocean:checked~.page .card-k{color:#f8dc8e}
#p-ocean:checked~.page .sh-k::after{height:6px;background:radial-gradient(circle at 50% 100%,transparent 5px,var(--line-2) 5px 6px,transparent 6.5px) 0 0/14px 6px repeat-x}
#p-ocean:checked~.page .fl-1{left:3%;top:36px;z-index:4;width:46px;height:36px;border-radius:50% 50% 12px 12px/75% 75% 10px 10px;background:radial-gradient(circle at 35% 35%,#ffe1f6,#c77dff);opacity:.92;animation:bob 5s ease-in-out infinite}
#p-ocean:checked~.page .fl-1::after{content:"";position:absolute;left:6px;right:6px;top:100%;height:36px;background:repeating-linear-gradient(90deg,#dcaeff 0 3px,transparent 3px 9px);-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
#p-ocean:checked~.page .fl-2{left:50%;top:-14px;z-index:4;padding:5px 15px;border:1px solid #7a5412;border-radius:6px;background:var(--brass);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 0 #7a5412;transform:translateX(-50%)}
#p-ocean:checked~.page .fl-2::before{content:"· BATHYSPHERE ·";font:600 .72rem/1 "Fredoka",sans-serif;letter-spacing:.24em;color:#33200a;white-space:nowrap}
#p-ocean:checked~.page .fl-3{right:1%;top:50%;z-index:4;width:38px;height:20px;border-radius:50%;background:radial-gradient(circle at 72% 38%,#03254a 0 2px,transparent 2.5px),linear-gradient(#ffb04d,#ff7a2e);animation:bob 4s ease-in-out infinite}
#p-ocean:checked~.page .fl-3::before{content:"";position:absolute;right:86%;top:1px;border:9px solid transparent;border-left-color:#ff8a3a;border-right:0}
#p-ocean:checked~.page .fl-4{left:6%;bottom:74px;z-index:4;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.75);box-shadow:16px -18px 0 -3px rgba(255,255,255,.6),-4px -32px 0 -1px rgba(255,255,255,.4),12px -50px 0 -4px rgba(255,255,255,.55);animation:bob 3.4s ease-in-out infinite}
#p-ocean:checked~.page .stage-k{color:#f8dc8e;font-weight:600}
#p-ocean:checked~.page .strip i:nth-child(1){left:-6%;right:-6%;bottom:-34px;height:78px;border-radius:50%/100% 100% 0 0;background:linear-gradient(#f3dfa8,#c9a45c)}
#p-ocean:checked~.page .strip i:nth-child(2){left:0;right:0;bottom:20px;height:70px;background:radial-gradient(ellipse 5px 48px at 50% 100%,#2fbf7a 96%,transparent) 0 0/66px 100% repeat-x,radial-gradient(ellipse 4px 30px at 50% 100%,#58e0a0 96%,transparent) 15px 0/66px 100% repeat-x,radial-gradient(ellipse 6px 66px at 50% 100%,#178a55 96%,transparent) 40px 0/156px 100% repeat-x,radial-gradient(ellipse 4px 40px at 50% 100%,#22a468 96%,transparent) 52px 0/156px 100% repeat-x}
#p-ocean:checked~.page .strip i:nth-child(3){left:0;right:0;bottom:18px;height:28px;background:
  radial-gradient(circle at 50% 100%,#ff7aa8 11px,transparent 12px) 34px 0/170px 28px repeat-x,
  radial-gradient(circle at 50% 100%,#ff9f43 8px,transparent 9px) 96px 0/230px 28px repeat-x,
  radial-gradient(circle at 50% 100%,#ff5c8a 7px,transparent 8px) 50px 0/170px 28px repeat-x}
#p-ocean:checked~.page .gi img{box-shadow:0 0 0 2px rgba(200,240,255,.7),0 18px 30px -18px rgba(0,10,40,.9)}
#p-ocean:checked~.page .seg label{letter-spacing:.1em}

/* ============================ CONSOLA VERDE ============================ */
#p-pixel:checked~.page{
  --skin-n:"20/24";--skin:"CONSOLA VERDE";
  --bg:#9bbc0f;--bg-b:#8bac0f;--panel:#8bac0f;--panel-2:#aaca22;--bar:#8bac0f;
  --ink:#0f380f;--ink2:#0f380f;--hi:#0f380f;--hi-ink:#0f380f;--hi2:#306230;--on-hi:#b4d42a;--focus:#0f380f;
  --line:#306230;--line-2:#0f380f;
  --rad:0px;--rad-s:0px;--rad-btn:0px;--bw:4px;
  --font-d:"Press Start 2P",monospace;--font-b:"VT323",monospace;--font-m:"VT323",monospace;--fs:1.34rem;--lh:1.2;--fs-m:1.14rem;--ls-m:.1em;
  --h1-fs:clamp(1.1rem,3.4vw,2.3rem);--h1-w:400;--h1-ls:0;--h1-lh:1.5;--h1-tt:uppercase;
  --h2-fs:clamp(1rem,2.4vw,1.6rem);--h2-w:400;--h2-ls:0;--h2-tt:uppercase;--h3-fs:.84rem;--h3-w:400;--h3-ls:0;--h3-tt:uppercase;
  --sh:6px 6px 0 #306230;
  --ph-frame:#0f380f;--ph-edge:#0f380f;--ph-rad:8px;--ph-sh:8px 8px 0 #306230;
  --hud-a:"1UP ♥♥♥";--hud-b:"STAGE 01";
  --k-pre:"▶";--coin-a:#9bbc0f;--coin-b:#0f380f;--strip-h:108px;--term-bg:#0f380f;--term-ink:#b4d42a;--t2:#8bac0f;--t-hi:#c8e44a;--t-line:#306230;
  --shot-menu:url(../img/pixel_menu.webp);--shot-retro:url(../img/pixel_game_retro.webp);--shot-modern:url(../img/pixel_game_modern.webp);--shot-shop:url(../img/pixel_shop.webp);
  --notch:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  --cloud:8px 0,16px 0,24px 0,32px 0,40px 0,48px 0,56px 0,8px -8px,16px -8px,24px -8px,32px -8px,40px -8px,48px -8px,16px -16px,24px -16px,32px -16px;
}
#p-pixel:checked~.page .fx{background:repeating-linear-gradient(0deg,rgba(15,56,15,.07) 0 2px,transparent 2px 4px),#9bbc0f}
#p-pixel:checked~.page .fx-a,#p-pixel:checked~.page .fx-b{right:9%;top:150px;width:8px;height:8px;background:#b6d436;color:#b6d436;box-shadow:var(--cloud)}
#p-pixel:checked~.page .fx-b{right:auto;left:5%;top:62%}
#p-pixel:checked~.page :is(.brand-s,.gp small,.gp-nota,.stage-k,.k-more span,.gi p span,.gi-p span,.foot-c,.gal-h,.mx,.cart-c,.term-bar){font-family:"VT323",monospace;font-size:1rem;letter-spacing:.06em}
#p-pixel:checked~.page .top{border-bottom:4px solid #0f380f;-webkit-backdrop-filter:none;backdrop-filter:none}
#p-pixel:checked~.page .brand-n{font-size:.9rem;font-weight:400;letter-spacing:.08em}
#p-pixel:checked~.page .brand-s::before{border-radius:0}
#p-pixel:checked~.page .nav a{font-size:1.25rem;text-transform:uppercase;color:#0f380f}
#p-pixel:checked~.page .nav a:hover{background:#0f380f;color:#b4d42a}
#p-pixel:checked~.page .nav a[hreflang]{border:4px solid #0f380f}
#p-pixel:checked~.page .tag{border:4px solid #0f380f;font-size:1.1rem;letter-spacing:.04em}
#p-pixel:checked~.page .tag i{border-radius:0}
#p-pixel:checked~.page h1{text-shadow:3px 3px 0 rgba(48,98,48,.5)}
#p-pixel:checked~.page h1 em{padding:.1em .28em;background:#0f380f;color:#b4d42a;text-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#p-pixel:checked~.page h2{text-shadow:3px 3px 0 rgba(48,98,48,.5);line-height:1.4}
#p-pixel:checked~.page h3{line-height:1.5}
#p-pixel:checked~.page .lead{font-size:1em}
#p-pixel:checked~.page .gp{border:4px dashed #306230;background:transparent;font:400 1.5rem/1 "VT323",monospace}
#p-pixel:checked~.page .btn-2{border:0;background:#0f380f;color:#b4d42a;font:400 .72rem/1.5 "Press Start 2P",monospace;text-transform:uppercase;box-shadow:5px 5px 0 #306230}
#p-pixel:checked~.page .btn-2::after{content:"▶";color:#b4d42a}
#p-pixel:checked~.page .btn-2:hover{background:#306230;transform:translate(3px,3px);box-shadow:2px 2px 0 #306230}
#p-pixel:checked~.page .nota img{border-radius:0;box-shadow:0 0 0 4px #0f380f}
#p-pixel:checked~.page .card,#p-pixel:checked~.page .sw,#p-pixel:checked~.page .specs li,#p-pixel:checked~.page .term{border-color:#0f380f;clip-path:var(--notch);box-shadow:inset 4px 4px 0 #aaca22,inset -4px -4px 0 #7d9c0c}
#p-pixel:checked~.page .term{box-shadow:none}
#p-pixel:checked~.page .card{padding-bottom:34px}
#p-pixel:checked~.page .card::after{content:"STAGE 0" counter(c) "  ♥♥♥";right:14px;bottom:8px;font:400 1.05rem/1 "VT323",monospace;letter-spacing:.08em;color:#0f380f}
#p-pixel:checked~.page .card-k::before{content:"▶ "}
#p-pixel:checked~.page .sh-k::after{height:4px;background:repeating-linear-gradient(90deg,#0f380f 0 8px,transparent 8px 16px)}
#p-pixel:checked~.page .ph-l{transform:translateX(-122%)}
#p-pixel:checked~.page .ph-r{transform:translateX(22%)}
#p-pixel:checked~.page .ph-l .ph-s,#p-pixel:checked~.page .ph-r .ph-s{filter:none}
#p-pixel:checked~.page .fl-1,#p-pixel:checked~.page .fl-2{left:2%;top:26px;width:8px;height:8px;background:#0f380f;color:#0f380f;box-shadow:var(--cloud);opacity:.9}
#p-pixel:checked~.page .fl-2{left:auto;right:calc(2% + 56px);top:8px;background:#306230;color:#306230}
#p-pixel:checked~.page .fl-3{left:0;top:52%;z-index:4;padding:7px 8px 5px;background:#0f380f;animation:blink 1.2s steps(1) infinite}
#p-pixel:checked~.page .fl-3::before{content:"▶ START";font:400 .72rem/1 "Press Start 2P",monospace;color:#b4d42a}
#p-pixel:checked~.page .fl-4{right:2%;bottom:66px;z-index:4;display:grid;place-items:center;width:36px;height:36px;border:4px solid #0f380f;background:#306230;animation:bob 1.4s steps(2) infinite}
#p-pixel:checked~.page .fl-4::before{content:"?";font:400 .8rem/1 "Press Start 2P",monospace;color:#b4d42a}
#p-pixel:checked~.page .strip i:nth-child(1){left:0;right:0;bottom:16px;height:64px;background:#306230;
  -webkit-mask:linear-gradient(90deg,#000 128px,transparent 0) 0 100%/176px 16px repeat-x,linear-gradient(90deg,transparent 16px,#000 16px 112px,transparent 0) 0 calc(100% - 16px)/176px 16px repeat-x,linear-gradient(90deg,transparent 32px,#000 32px 96px,transparent 0) 0 calc(100% - 32px)/176px 16px repeat-x,linear-gradient(90deg,transparent 48px,#000 48px 80px,transparent 0) 0 calc(100% - 48px)/176px 16px repeat-x;
  mask:linear-gradient(90deg,#000 128px,transparent 0) 0 100%/176px 16px repeat-x,linear-gradient(90deg,transparent 16px,#000 16px 112px,transparent 0) 0 calc(100% - 16px)/176px 16px repeat-x,linear-gradient(90deg,transparent 32px,#000 32px 96px,transparent 0) 0 calc(100% - 32px)/176px 16px repeat-x,linear-gradient(90deg,transparent 48px,#000 48px 80px,transparent 0) 0 calc(100% - 48px)/176px 16px repeat-x}
#p-pixel:checked~.page .strip i:nth-child(2){left:0;right:0;bottom:0;height:16px;border-top:4px solid #0f380f;background:repeating-linear-gradient(90deg,#306230 0 8px,#0f380f 8px 16px)}
#p-pixel:checked~.page .strip i:nth-child(3){right:12%;bottom:16px;width:4px;height:76px;background:#0f380f}
#p-pixel:checked~.page .strip i:nth-child(3)::before{content:"";position:absolute;left:4px;top:0;width:24px;height:16px;background:#0f380f;clip-path:polygon(0 0,100% 0,100% 25%,66% 25%,66% 75%,100% 75%,100% 100%,0 100%)}
#p-pixel:checked~.page .gi img{box-shadow:0 0 0 4px #0f380f,6px 6px 0 4px #306230}
#p-pixel:checked~.page .gi p,#p-pixel:checked~.page .gi-p{font-size:1.1rem;font-weight:400}
#p-pixel:checked~.page .shot{box-shadow:0 0 0 4px #0f380f}
#p-pixel:checked~.page .seg{border:4px solid #0f380f}
#p-pixel:checked~.page .seg label{font:400 1.15rem/1 "VT323",monospace;letter-spacing:.08em;color:#0f380f}
#p-pixel:checked~.page #c-maq:checked~.seg label[for="c-maq"],#p-pixel:checked~.page #c-mod:checked~.seg label[for="c-mod"],
#p-pixel:checked~.page #m-cla:checked~.seg label[for="m-cla"],#p-pixel:checked~.page #m-plus:checked~.seg label[for="m-plus"]{color:#b4d42a}
#p-pixel:checked~.page .perks li{border-width:2px}
#p-pixel:checked~.page .perks i{border-radius:0}
#p-pixel:checked~.page .k{border-width:2px;border-color:#0f380f}
#p-pixel:checked~.page .term{font-size:1.15rem;line-height:1.2}
#p-pixel:checked~.page .term h3{font:400 1.15rem/1.2 "VT323",monospace}
#p-pixel:checked~.page .coins i{border-radius:0;background:#0f380f;box-shadow:inset 0 0 0 4px #0f380f,inset 0 0 0 8px #9bbc0f,0 0 0 2px #9bbc0f}

/* ==========================================================================
   7. PIELES, SEGUNDA PARTE: escenario iluminado, cifras, estantería de cartuchos,
   tique de contacto, «cómo está hecho» y pie.  El cristal LCD no cambia nunca.
   ========================================================================== */

/* ---------------------------- MINIMAL OSCURO ---------------------------- */
#p-dark:checked~.page{--st-x:112px}
#p-dark:checked~.page .lt{display:block}
/* foco cenital, resplandor de pantalla y suelo con horizonte: todo por detrás de los móviles */
#p-dark:checked~.page .lt-1{left:50%;top:-46px;width:124%;height:calc(100% + 20px);transform:translateX(-50%);
  background:conic-gradient(from 150deg at 50% 0,transparent 0,rgba(150,190,255,.2) 16deg,rgba(205,224,255,.34) 30deg,rgba(150,190,255,.2) 44deg,transparent 60deg);
  -webkit-mask:linear-gradient(transparent,#000 16%,#000 34%,transparent 92%);mask:linear-gradient(transparent,#000 16%,#000 34%,transparent 92%)}
#p-dark:checked~.page .lt-2{left:50%;top:10px;width:calc(var(--pw)*2.3);height:calc(var(--pw)*2.3);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(79,140,255,.55),rgba(79,140,255,.16) 58%,transparent)}
#p-dark:checked~.page .lt-3{left:-12%;right:-12%;bottom:20px;height:74px;
  background:linear-gradient(90deg,transparent,rgba(170,200,255,.8) 28%,#fff 50%,rgba(170,200,255,.8) 72%,transparent) 0 0/100% 1px no-repeat,
    radial-gradient(ellipse 46% 100% at 50% 0,rgba(110,160,255,.85),transparent 72%),
    radial-gradient(ellipse 16% 40% at 50% 0,rgba(230,240,255,.7),transparent 80%),
    repeating-linear-gradient(90deg,rgba(140,175,255,.16) 0 1px,transparent 1px 46px);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
#p-dark:checked~.page .ph-l,#p-dark:checked~.page .ph-r{top:calc(12px + var(--pw)*.433)}
#p-dark:checked~.page .ph-c{-webkit-box-reflect:below 3px linear-gradient(transparent 86%,rgba(0,0,0,.36))}
#p-dark:checked~.page .stage::after{bottom:auto;top:calc(var(--pw)*2.164 - 30px)}
#p-dark:checked~.page .lcdw{box-shadow:inset 0 .06em .14em rgba(0,0,0,.5),0 0 0 .065em #15170f,0 0 0 .095em rgba(160,195,255,.55),0 .16em .5em rgba(40,90,255,.6)}
#p-dark:checked~.page .keys li::before{content:"";position:absolute;left:-1px;top:-1px;width:22px;height:22px;border-left:2px solid var(--hi);border-top:2px solid var(--hi);border-top-left-radius:var(--rad)}
#p-dark:checked~.page .serie ol{border-bottom-color:#1b2440;box-shadow:0 2px 0 var(--hi)}
#p-dark:checked~.page .how::before{content:"";position:absolute;left:-1px;top:-1px;width:26px;height:26px;border-left:2px solid var(--hi);border-top:2px solid var(--hi);border-top-left-radius:var(--rad)}
#p-dark:checked~.page .foot{background:radial-gradient(900px 440px at 50% 100%,rgba(60,110,255,.24),transparent 70%)}
#p-dark:checked~.page .foot-w{width:max-content;max-width:100%;background:linear-gradient(180deg,#f4f7ff 28%,#4f8cff 120%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ------------------------------ CYBERPUNK ------------------------------ */
#p-cyber:checked~.page{--h1-fs:clamp(1.75rem,4.6vw,3.6rem);
  --tk-bg:#ffe600;--tk-bg2:#f4da00;--tk-ink:#0a0a0a;--tk-ink2:#2b2600;--tk-link:#0a0a0a;--tk-line:#0a0a0a;--tk-stamp:#a8006a;
  --wm-fs:clamp(2.5rem,13.2vw,11.5rem);--plank:#111}
#p-cyber:checked~.page .keys li,#p-cyber:checked~.page .how{
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  background:linear-gradient(225deg,transparent 12.4px,var(--line-2) 12.4px 14px,transparent 14px) top right/26px 26px no-repeat,
    linear-gradient(45deg,transparent 12.4px,var(--line-2) 12.4px 14px,transparent 14px) bottom left/26px 26px no-repeat,var(--panel)}
#p-cyber:checked~.page .keys p::before{content:"> ";color:#ff2bd6}
#p-cyber:checked~.page .how li b{color:#ffe600}
#p-cyber:checked~.page .how li::before{color:#00f0ff}
#p-cyber:checked~.page .k-more b{font-size:1.2rem}
#p-cyber:checked~.page .filt label{font-family:"Share Tech Mono",monospace}
#p-cyber:checked~.page .cart{border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);box-shadow:inset 0 0 0 1px rgba(0,240,255,.7),inset 0 -15px 0 rgba(0,0,0,.3)}
#p-cyber:checked~.page .cart-l{border-radius:0;background:#0b0424;color:#ecfbff;box-shadow:inset 0 0 0 1px #00f0ff}
#p-cyber:checked~.page .cart-c{color:#00f0ff}
#p-cyber:checked~.page .cart b{font:800 clamp(.78rem,1.06vw,.96rem)/1 "Orbitron",sans-serif;letter-spacing:.08em}
#p-cyber:checked~.page .cart-l>i{border-radius:0;background:#ffe600;color:#0a0a0a;box-shadow:none;font-family:"Orbitron",sans-serif}
#p-cyber:checked~.page .serie ol{border-bottom:10px solid;border-image:repeating-linear-gradient(135deg,#ffe600 0 8px,#111 8px 16px) 10;box-shadow:none}
#p-cyber:checked~.page .serie h3{font:800 .84rem/1.15 "Orbitron",sans-serif;color:#00f0ff}
#p-cyber:checked~.page .serie h3 span::before{content:"//";margin-right:6px;color:#ff2bd6}
#p-cyber:checked~.page .serie h3 em{color:#ffe600}
#p-cyber:checked~.page .tk{transform:none;filter:drop-shadow(8px 8px 0 rgba(0,240,255,.45))}
#p-cyber:checked~.page .tk-a,#p-cyber:checked~.page .tk-b{border-radius:0}
#p-cyber:checked~.page .tk-a{padding-top:30px}
#p-cyber:checked~.page .tk-a::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(135deg,#0a0a0a 0 10px,#ffe600 10px 20px)}
#p-cyber:checked~.page .mail{font-size:clamp(1.05rem,1.9vw,1.45rem)}
#p-cyber:checked~.page .stamp{border-radius:0;font-family:"Orbitron",sans-serif;font-size:.74rem}
#p-cyber:checked~.page .foot-w{color:#ffe600;text-shadow:.035em 0 #ff2bd6,-.035em 0 #00c8ff}
#p-cyber:checked~.page .foot-l::after{height:5px;background:repeating-linear-gradient(90deg,rgba(0,240,255,.7) 0 2px,transparent 2px 7px)}
#p-cyber:checked~.page .foot-l::before{content:">";color:#ff2bd6}
#p-cyber:checked~.page .foot-h{color:#00f0ff}
#p-cyber:checked~.page .foot-cols a:hover{color:#ffe600}

/* ---------------------------- HOTEL INFERNAL ---------------------------- */
#p-hotel:checked~.page{--fs-m:.75rem;--h1-fs:clamp(2.3rem,5.5vw,4.4rem);
  --tk-bg:#fff0d2;--tk-bg2:#f6dfb4;--tk-ink:#2a030b;--tk-ink2:#5a1622;--tk-link:#8a0c2c;--tk-line:rgba(90,22,34,.6);--tk-stamp:#a81145;
  --wm-fs:clamp(3rem,15.4vw,13.4rem);--wm-w:400;--wm-ls:.03em;--plank:#7a0a1c}
#p-hotel:checked~.page .keys li,#p-hotel:checked~.page .how{border-color:#ffcf5a;box-shadow:inset 0 0 0 4px #2a030b,inset 0 0 0 5px rgba(255,207,90,.45),var(--sh)}
#p-hotel:checked~.page .keys li::before{content:"";position:absolute;left:18px;right:18px;top:-6px;height:9px;background:radial-gradient(circle,#fff3c4 0 2.2px,#ffb02e 2.8px 3.6px,transparent 4.2px) 0 0/22px 9px repeat-x;animation:bulbs 1.3s steps(1) infinite}
#p-hotel:checked~.page .keys li:nth-child(even)::before{animation-delay:-.65s}
#p-hotel:checked~.page .how li b{font-weight:400;color:#ffd874}
#p-hotel:checked~.page .cart{border-radius:999px 999px 8px 8px;padding-top:36px;box-shadow:inset 0 0 0 2px rgba(255,207,90,.85),inset 0 -15px 0 rgba(0,0,0,.25),0 10px 16px -10px #000}
#p-hotel:checked~.page .cart::before{top:13px;left:50%;right:auto;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#2a030b;box-shadow:0 0 0 2px #ffcf5a}
#p-hotel:checked~.page .cart-l{border-radius:999px 999px 5px 5px;padding-top:16px;background:linear-gradient(#fff3d6,#f1d9a6)}
#p-hotel:checked~.page .cart-l>i{background:linear-gradient(#ffe29a,#d9a23a);color:#2a030b;box-shadow:0 0 0 2px #7a4a08}
#p-hotel:checked~.page .serie ol{box-shadow:0 2px 0 #ffcf5a}
#p-hotel:checked~.page .serie h3{border-color:#ffcf5a}
#p-hotel:checked~.page .serie h3 span{font:400 1.12rem/1.1 "Limelight",serif;letter-spacing:.06em;text-transform:none;color:#ffd874}
#p-hotel:checked~.page .tk-a::after{content:"★ ADMIT ONE ★";display:block;margin-top:4px;text-align:right;font:400 .8rem/1 "Limelight",serif;letter-spacing:.16em;color:#a81145}
#p-hotel:checked~.page .stamp{font-family:"Limelight",serif;font-weight:400}
#p-hotel:checked~.page .foot-w{color:#ffd874;text-shadow:0 .035em 0 #7a0a1c,0 0 50px rgba(255,79,139,.55)}
#p-hotel:checked~.page .foot-l::after{height:7px;background:radial-gradient(circle,#fff3c4 0 2px,#ffb02e 2.6px 3.2px,transparent 3.6px) 0 0/20px 7px repeat-x;animation:bulbs 1.3s steps(1) infinite}

/* --------------------------------- NEÓN --------------------------------- */
#p-neon:checked~.page{--fs-m:.74rem;--h1-fs:clamp(1.9rem,4.7vw,3.7rem);
  --tk-bg:#1c0b44;--tk-bg2:#150838;--tk-ink:#f8edff;--tk-ink2:#cdb9f0;--tk-link:#8ff6ff;--tk-line:rgba(255,79,216,.85);--tk-stamp:#ff93e8;
  --wm-fs:clamp(2.5rem,13.4vw,11.8rem);--wm-w:400;--plank:#12062c}
#p-neon:checked~.page .keys li{border-color:#37f0ff;box-shadow:0 0 16px rgba(55,240,255,.5),inset 0 0 16px rgba(55,240,255,.14)}
#p-neon:checked~.page .keys li:nth-child(even){border-color:#ff4fd8;box-shadow:var(--sh)}
#p-neon:checked~.page .how{border-color:#ff4fd8;outline:1px solid rgba(55,240,255,.6);outline-offset:-8px}
#p-neon:checked~.page .how li b{color:#d9fdff;text-shadow:0 0 10px rgba(55,240,255,.8)}
#p-neon:checked~.page .how li::before{color:#ffe45c;text-shadow:0 0 8px #ffc928}
#p-neon:checked~.page :is(.keys p,.fan figcaption,.serie h3 em,.filt label,.filt label em,.foot-end){font-family:"Rubik",sans-serif;font-weight:600}
#p-neon:checked~.page .cart{background:#12062c;box-shadow:inset 0 0 0 2px #ff4fd8,0 0 12px rgba(255,79,216,.75),inset 0 0 12px rgba(255,79,216,.35)}
#p-neon:checked~.page .cart:nth-child(even){box-shadow:inset 0 0 0 2px #37f0ff,0 0 12px rgba(55,240,255,.75),inset 0 0 12px rgba(55,240,255,.35)}
#p-neon:checked~.page .cart:nth-child(3n){box-shadow:inset 0 0 0 2px #ffe45c,0 0 12px rgba(255,201,40,.75),inset 0 0 12px rgba(255,201,40,.3)}
#p-neon:checked~.page .cart::before{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.55) 0 2px,transparent 2px 4px)}
#p-neon:checked~.page .cart::after{background:repeating-linear-gradient(90deg,#ffe45c 0 3px,transparent 3px 5px);box-shadow:0 0 8px #ffc928}
#p-neon:checked~.page .cart-l{background:transparent;color:#fff;box-shadow:none}
#p-neon:checked~.page .cart-c{color:#8ff6ff}
#p-neon:checked~.page .cart b{text-shadow:0 0 8px #ff4fd8,0 0 18px #ff4fd8}
#p-neon:checked~.page .cart-l>i{background:transparent;color:#ffe45c;box-shadow:inset 0 0 0 2px #ffe45c,0 0 8px rgba(255,201,40,.7)}
#p-neon:checked~.page .serie ol{border-bottom:3px solid #37f0ff;box-shadow:0 0 14px #37f0ff}
#p-neon:checked~.page .serie h3{margin-top:10px;border:2px solid rgba(255,79,216,.75);border-radius:var(--rad-s);font-size:.8rem}
#p-neon:checked~.page .tk{--focus:#37f0ff;filter:drop-shadow(0 0 2px #ff4fd8) drop-shadow(0 0 14px rgba(255,79,216,.8))}
#p-neon:checked~.page .mail a{text-shadow:0 0 12px #37f0ff}
#p-neon:checked~.page .stamp{opacity:1;text-shadow:0 0 10px #ff4fd8;box-shadow:0 0 12px rgba(255,79,216,.6),inset 0 0 10px rgba(255,79,216,.3)}
#p-neon:checked~.page .foot{border-top:2px solid #ff4fd8;box-shadow:0 -4px 18px rgba(255,79,216,.5)}
#p-neon:checked~.page .foot-w{color:#fff;text-shadow:0 0 6px #fff,0 0 24px #ff4fd8,0 0 60px #ff4fd8,0 0 110px #b400ff;animation:flick 9s infinite}
#p-neon:checked~.page .foot-l::after{height:2px;background:#37f0ff;box-shadow:0 0 10px #37f0ff}

/* --------------------------------- CÓMIC --------------------------------- */
#p-comic:checked~.page{--h1-lh:1.1;
  --tk-bg:#fff;--tk-bg2:#fff;--tk-ink:#111;--tk-ink2:#333;--tk-link:#a80a1c;--tk-line:#111;--tk-stamp:#d90f28;
  --wm-fs:clamp(4.4rem,23vw,19rem);--wm-w:400;--wm-ls:.03em;--plank:#111}
#p-comic:checked~.page :is(.keys p,.fan figcaption,.serie h3 em,.filt label em,.foot-end,.how-s){font-family:"Rubik",sans-serif;font-weight:700}
#p-comic:checked~.page .lcdw{box-shadow:inset 0 .06em .14em rgba(0,0,0,.5),0 0 0 .07em #111,.13em .13em 0 .07em #111}
#p-comic:checked~.page .keys li:nth-child(odd){transform:rotate(-1deg)}
#p-comic:checked~.page .keys li:nth-child(even){transform:rotate(.8deg)}
#p-comic:checked~.page .keys p{color:#111;font-weight:700;font-size:.9rem}
#p-comic:checked~.page .fan img{box-shadow:0 0 0 3px #111,4px 4px 0 3px #111}
#p-comic:checked~.page .fan figcaption{color:#111;font-size:.8rem}
#p-comic:checked~.page .k-more span{font-family:"Rubik",sans-serif;font-weight:700}
#p-comic:checked~.page .filt-t{color:#111}
#p-comic:checked~.page .filt label{border:3px solid #111;background:#fff;color:#111;font:400 1.1rem/1 "Bangers",sans-serif;letter-spacing:.08em;box-shadow:3px 3px 0 #111}
#p-comic:checked~.page #f-todas:checked~.filt label[for="f-todas"],#p-comic:checked~.page #f-pocket:checked~.filt label[for="f-pocket"],#p-comic:checked~.page #f-deluxe:checked~.filt label[for="f-deluxe"],
#p-comic:checked~.page #f-vista:checked~.filt label[for="f-vista"],#p-comic:checked~.page #f-duo:checked~.filt label[for="f-duo"]{background:#d90f28;color:#fff;transform:rotate(-2deg)}
#p-comic:checked~.page .cart{border-radius:6px 6px 2px 2px;box-shadow:inset 0 0 0 3px #111,4px 4px 0 #111}
#p-comic:checked~.page .cart::before{top:9px;background:repeating-linear-gradient(to bottom,#111 0 2px,transparent 2px 4px)}
#p-comic:checked~.page .cart::after{bottom:5px}
#p-comic:checked~.page .cart-l{border-radius:3px;background:#fff;box-shadow:inset 0 0 0 2.5px #111}
#p-comic:checked~.page .cart b{font:400 clamp(1.05rem,1.7vw,1.55rem)/1 "Bangers",sans-serif;letter-spacing:.09em}
#p-comic:checked~.page .cart-l>i{background:#d90f28;box-shadow:inset 0 0 0 2px #111;font:400 1rem/1 "Bangers",sans-serif}
#p-comic:checked~.page .serie ol{box-shadow:none}
#p-comic:checked~.page .serie h3{border:3px solid #111;border-top:0;background:#fff;box-shadow:4px 4px 0 #111}
#p-comic:checked~.page .serie h3 span{font:400 1.35rem/1 "Bangers",sans-serif;letter-spacing:.07em;color:#d90f28}
#p-comic:checked~.page .serie h3 em{color:#111}
#p-comic:checked~.page .serie h3 small{color:#111;font-weight:700}
#p-comic:checked~.page .shelf-n,#p-comic:checked~.page .how li p{color:#111}
#p-comic:checked~.page .shelf-h{font-size:1.05rem;color:#111}
#p-comic:checked~.page .tk{transform:rotate(-1.5deg);filter:drop-shadow(3px 0 0 #111) drop-shadow(-3px 0 0 #111) drop-shadow(0 3px 0 #111) drop-shadow(0 -3px 0 #111) drop-shadow(6px 6px 0 #111)}
#p-comic:checked~.page .tk-a,#p-comic:checked~.page .tk-b{border-radius:0}
#p-comic:checked~.page .mail a{color:#d90f28}
#p-comic:checked~.page .stamp{font:400 1.15rem/1.05 "Bangers",sans-serif;letter-spacing:.1em;border-style:solid}
#p-comic:checked~.page .how li b{color:#d90f28;letter-spacing:.05em}
#p-comic:checked~.page .how li::before{color:#111;font-weight:700}
#p-comic:checked~.page .how-s{color:#111;font-size:.78rem}
#p-comic:checked~.page .foot{margin-top:0;border-top:0;background:#fff}
#p-comic:checked~.page .foot .strip{background:#ffd91a}
#p-comic:checked~.page .foot-w{color:#ffd91a;-webkit-text-stroke:.03em #111;paint-order:stroke fill;text-shadow:.04em .04em 0 #d90f28,.055em .055em 0 #111;line-height:.9}
#p-comic:checked~.page .foot-l{font:400 clamp(1.3rem,2.2vw,1.8rem)/1.2 "Bangers",sans-serif;letter-spacing:.06em}
#p-comic:checked~.page .foot-l::after{height:4px;background:#111}
#p-comic:checked~.page .foot-h{color:#111;border-bottom:3px solid #111}
#p-comic:checked~.page .foot-cols a{font-weight:500}
#p-comic:checked~.page .foot-app{color:#111}
#p-comic:checked~.page .foot-end{border-top:3px solid #111;color:#111;font-size:.82rem;letter-spacing:.04em}

/* -------------------------------- OCÉANO -------------------------------- */
#p-ocean:checked~.page{--h1-fs:clamp(2.6rem,max(5.8vw,min(11.6vw,3.1rem)),4.9rem);
  --tk-bg:#f7ecc9;--tk-bg2:#efdfb0;--tk-ink:#2b1c06;--tk-ink2:#5b4520;--tk-link:#0b4f86;--tk-line:rgba(91,69,32,.6);--tk-stamp:#0b5d94;
  --wm-fs:clamp(3.2rem,16.6vw,14.6rem);--wm-w:700;--wm-ls:.03em;--plank:#04285c}
#p-ocean:checked~.page .keys li::after,#p-ocean:checked~.page .how::after{content:"";position:absolute;inset:8px;pointer-events:none;background:
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 0 0/10px 10px no-repeat,
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 100% 0/10px 10px no-repeat,
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 0 100%/10px 10px no-repeat,
  radial-gradient(circle,#f6d57c 0 2.6px,#8a5f14 3.1px 4.1px,transparent 4.6px) 100% 100%/10px 10px no-repeat}
#p-ocean:checked~.page .keys li{padding:16px 16px 18px}
#p-ocean:checked~.page .how li::before,#p-ocean:checked~.page .how-s{color:#f8dc8e}
#p-ocean:checked~.page .cart{border-radius:34px 34px 14px 14px;padding:32px 5px 20px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),inset 0 14px 14px -8px rgba(255,255,255,.5),0 10px 16px -10px rgba(0,10,40,.9)}
#p-ocean:checked~.page .cart::before{top:10px;left:50%;right:auto;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:rgba(3,28,72,.7);box-shadow:0 0 0 2px #f6d57c}
#p-ocean:checked~.page .cart::after{bottom:6px}
#p-ocean:checked~.page .cart-l{border-radius:24px 24px 9px 9px;padding-top:12px;background:linear-gradient(#f7ecc9,#e6d29a)}
#p-ocean:checked~.page .cart-l>i{background:var(--brass);color:#33200a;box-shadow:0 0 0 2px #7a5412}
#p-ocean:checked~.page .serie ol{border-bottom:10px solid;border-image:repeating-linear-gradient(115deg,#f6d57c 0 5px,#9a6c1a 5px 10px) 10;box-shadow:none}
#p-ocean:checked~.page .serie h3 em{color:#f8dc8e}
#p-ocean:checked~.page .tk{transform:rotate(-1.2deg)}
#p-ocean:checked~.page .foot{border-top:0}
#p-ocean:checked~.page .foot-w{color:#f3fbff;text-shadow:0 .04em 0 #04306a,0 0 60px rgba(111,230,255,.45)}
#p-ocean:checked~.page .foot-l::after{height:6px;background:radial-gradient(circle at 50% 100%,transparent 5px,var(--line-2) 5px 6px,transparent 6.5px) 0 0/14px 6px repeat-x}
#p-ocean:checked~.page .foot-h{color:#f8dc8e}

/* ---------------------------- CONSOLA VERDE ---------------------------- */
/* VT323 para todo lo que lleva tildes o eñes; Press Start 2P solo donde no las hay */
#p-pixel:checked~.page{
  --font-d:"VT323",monospace;--fs:1.4rem;--lh:1.3;--fs-m:1.15rem;
  --h1-fs:clamp(3.1rem,7.6vw,6.2rem);--h1-lh:.92;--h1-ls:.01em;
  --h2-fs:clamp(2.4rem,4.6vw,3.6rem);--h3-fs:1.85rem;
  --tk-bg:#c8e44a;--tk-bg2:#b4d42a;--tk-ink:#0f380f;--tk-ink2:#0f380f;--tk-link:#0f380f;--tk-line:#0f380f;--tk-stamp:#0f380f;
  --wm-fs:clamp(2rem,11.4vw,9.4rem);--wm-w:400;--wm-ls:0;--plank:#0f380f}
#p-pixel:checked~.page .brand-n{font-family:"Press Start 2P",monospace}
#p-pixel:checked~.page h1{text-shadow:4px 4px 0 rgba(48,98,48,.5)}
#p-pixel:checked~.page h1 em{padding:0 .14em}
#p-pixel:checked~.page h2{line-height:.95;text-shadow:3px 3px 0 rgba(48,98,48,.5)}
#p-pixel:checked~.page h3{line-height:1}
#p-pixel:checked~.page .lead{font-size:1.06em}
#p-pixel:checked~.page .btn-2{font:400 1.5rem/1 "VT323",monospace;letter-spacing:.04em}
#p-pixel:checked~.page .sw-t{font-size:1em}
#p-pixel:checked~.page .k-more{border:2px solid #0f380f}
#p-pixel:checked~.page .k-more b::after{border-radius:0}
#p-pixel:checked~.page .k-more span{font:400 1.05rem/1 "VT323",monospace}
#p-pixel:checked~.page .keys li,#p-pixel:checked~.page .how{border-color:#0f380f;clip-path:var(--notch);box-shadow:inset 4px 4px 0 #aaca22,inset -4px -4px 0 #7d9c0c}
#p-pixel:checked~.page .keys li{padding:14px 14px 16px}
#p-pixel:checked~.page .keys p{font-size:1em;line-height:1.05}
#p-pixel:checked~.page .keys p::before{content:"▶ "}
#p-pixel:checked~.page .fan img{border-radius:0;box-shadow:0 0 0 4px #0f380f}
#p-pixel:checked~.page .fan figcaption{font-size:1.1rem;letter-spacing:.04em}
#p-pixel:checked~.page .filt label{border:4px solid #0f380f;background:transparent;font:400 1.3rem/1 "VT323",monospace;letter-spacing:.06em}
#p-pixel:checked~.page #f-todas:checked~.filt label[for="f-todas"],#p-pixel:checked~.page #f-pocket:checked~.filt label[for="f-pocket"],#p-pixel:checked~.page #f-deluxe:checked~.filt label[for="f-deluxe"],
#p-pixel:checked~.page #f-vista:checked~.filt label[for="f-vista"],#p-pixel:checked~.page #f-duo:checked~.filt label[for="f-duo"]{background:#0f380f;color:#b4d42a}
#p-pixel:checked~.page .filt label em{font:400 1.1rem/1 "VT323",monospace}
#p-pixel:checked~.page .cart{--c:#306230;border-radius:0;background:var(--c);box-shadow:inset 0 0 0 4px #0f380f}
#p-pixel:checked~.page .cart:nth-child(even){--c:#0f380f}
#p-pixel:checked~.page .cart::before{border-radius:0;background:repeating-linear-gradient(to bottom,#9bbc0f 0 2px,transparent 2px 4px)}
#p-pixel:checked~.page .cart::after{background:repeating-linear-gradient(90deg,#b4d42a 0 3px,transparent 3px 6px);box-shadow:none}
#p-pixel:checked~.page .cart-l{border-radius:0;background:#9bbc0f;color:#0f380f;box-shadow:inset 0 0 0 2px #0f380f}
#p-pixel:checked~.page .cart b{font:400 .72rem/1 "Press Start 2P",monospace;letter-spacing:.06em}
#p-pixel:checked~.page .cart-l>i{border-radius:0;background:#0f380f;color:#b4d42a;box-shadow:none;font:400 1.15rem/1 "VT323",monospace}
#p-pixel:checked~.page .cart-w{border-radius:0;background:#0f380f;box-shadow:none}
#p-pixel:checked~.page .cart-w i{border-radius:0}
#p-pixel:checked~.page .serie ol{box-shadow:none}
#p-pixel:checked~.page .serie h3{border:4px solid #0f380f;border-top:0;font:400 1.5rem/1 "VT323",monospace;letter-spacing:.06em}
#p-pixel:checked~.page .serie h3 em{font:400 1.1rem/1 "VT323",monospace}
#p-pixel:checked~.page .serie h3 small{font:400 1.1rem/1 "VT323",monospace}
#p-pixel:checked~.page .shelf-h{font-size:1.1rem}
#p-pixel:checked~.page .tk{transform:none;filter:drop-shadow(6px 6px 0 #306230)}
#p-pixel:checked~.page .tk-a,#p-pixel:checked~.page .tk-b{border-radius:0}
#p-pixel:checked~.page .tk-k,#p-pixel:checked~.page .tk-bc span{font:400 1.1rem/1.1 "VT323",monospace;letter-spacing:.1em}
#p-pixel:checked~.page .stamp{border-radius:0;border-width:4px;border-style:solid;opacity:1;font:400 1.25rem/1 "VT323",monospace}
#p-pixel:checked~.page .how li::before,#p-pixel:checked~.page .how li b small{font:400 1.1rem/1 "VT323",monospace}
#p-pixel:checked~.page .term{font-size:1.2rem;line-height:1.25}
#p-pixel:checked~.page .term h3{font:400 1.2rem/1.2 "VT323",monospace}
#p-pixel:checked~.page .foot{border-top:0}
#p-pixel:checked~.page .foot-w{font-family:"Press Start 2P",monospace;line-height:1.1;text-shadow:.07em .07em 0 #306230}
#p-pixel:checked~.page .foot-l{font-size:1.5rem}
#p-pixel:checked~.page .foot-l::after{height:4px;background:repeating-linear-gradient(90deg,#0f380f 0 8px,transparent 8px 16px)}
#p-pixel:checked~.page .foot-h{border-bottom:4px solid #0f380f}
#p-pixel:checked~.page .foot-cols a{text-transform:uppercase}
#p-pixel:checked~.page .foot-app img{border-radius:0;box-shadow:0 0 0 4px #0f380f}
#p-pixel:checked~.page .foot-end{border-top:4px solid #0f380f;font-size:1.1rem}
@media (max-width:860px){
  #p-dark:checked~.page .ph-l,#p-dark:checked~.page .ph-r{top:calc(12px + var(--pw)*.433)}
  #p-cyber:checked~.page .cart b{font-size:.84rem}
  #p-comic:checked~.page .cart b{font-size:1.35rem}
}
@media (max-width:620px){
  #p-cyber:checked~.page .gp{font-size:.84rem}
  #p-cyber:checked~.page .btn-2{padding:0 26px 0 0;font-size:.72rem}
  #p-neon:checked~.page .btn-2{font-size:.74rem}
  #p-neon:checked~.page .tag{font-size:.7rem;letter-spacing:.05em;padding-inline:10px 12px}
  #p-comic:checked~.page .btn-2{font-size:1.15rem}
  #p-pixel:checked~.page .btn-2{font-size:1.3rem}
  #p-pixel:checked~.page .gp{font-size:1.35rem}
}
@media (max-width:380px){
  #p-pixel:checked~.page .tag{font-size:.98rem;letter-spacing:0;padding:5px 8px}
  #p-comic:checked~.page .tag{font-size:.84rem;letter-spacing:.04em}
}


/* Lienzo de fuera de la página (mejora progresiva) */
html:has(#p-cyber:checked){background:#07031a}
html:has(#p-hotel:checked){background:#2a030b}
html:has(#p-neon:checked){background:#0d0524}
html:has(#p-comic:checked){background:#ffd91a;color-scheme:light}
html:has(#p-ocean:checked){background:#031c48}
html:has(#p-pixel:checked){background:#9bbc0f;color-scheme:light}

@media (prefers-reduced-motion:reduce){
  html,html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.fx,.wipe,.strip,.fl{display:none}}

/* ============ VERSION COMPACTA ============ */
/* Titular y pie mas contenidos, menos aire entre secciones y galeria de estilos en miniaturas. */
h1{font-size:calc(var(--h1-fs)*.74);margin-bottom:18px}
.hero{padding-top:clamp(14px,2.2vw,30px)}
.stage{--pw:clamp(176px,15.6vw,218px)}
.sec{padding-block:clamp(34px,4.2vw,58px)}
.foot-w{font-size:calc(var(--wm-fs)*.42);margin-top:clamp(12px,1.8vw,22px)}
.foot-cols{padding-bottom:16px}
.gal{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 10px;margin-top:24px}
.gi img{border-radius:9px}
.gi p,.gi-p{display:block;margin-top:7px;font-size:.75rem;line-height:1.25}
.gi p span,.gi-p span{display:block;margin-bottom:2px;font-size:.6875rem}
.gi-l{left:5px;top:5px;gap:0;padding:4px;font-size:0;letter-spacing:0}
@media (max-width:1100px){
  .gal{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media (max-width:860px){
  .gi{flex:0 0 112px}
  .gi-l{left:6px;top:6px}
}
@media (max-width:560px){
  h1{font-size:calc(var(--h1-fs)*.8)}
  .foot-w{font-size:calc(var(--wm-fs)*.62)}
}

/* ============ ENGLISH PAGE (en/) ============ */
/* Textos que imprime el CSS, en inglés. Solo se aplican con <html lang="en">: la página en español no cambia. */
html[lang="en"] .skin-now span::before{content:"SKIN " var(--skin-n) " · "}
html[lang="en"] .foot-sk::before{content:"SKIN " var(--skin-n) " · " var(--skin)}
@media (max-width:860px){
  html[lang="en"] .skin-now span::before{content:"SKIN " var(--skin-n)}
}
html[lang="en"] .page{--skin:"MINIMAL DARK"}
html[lang="en"] #p-cyber:checked~.page{--skin:"CYBERPUNK"}
html[lang="en"] #p-hotel:checked~.page{--skin:"HELL HOTEL"}
html[lang="en"] #p-neon:checked~.page{--skin:"NEON"}
html[lang="en"] #p-comic:checked~.page{--skin:"COMIC";--hud-a:"★ SX-01 ★";--hud-b:"EXTRA!"}
html[lang="en"] #p-ocean:checked~.page{--skin:"OCEAN"}
html[lang="en"] #p-pixel:checked~.page{--skin:"GREEN HANDHELD"}
html[lang="en"] #p-comic:checked~.page .strip i:nth-child(3)::before{content:"TO BE CONTINUED…"}
/* «Aviso legal (Spanish)»: el enlace del pie es flex y se comía el espacio entre el nombre y la aclaración */
html[lang="en"] .foot-cols a[href$="aviso-legal/"]{flex-wrap:wrap;align-content:center;column-gap:.3em}

/* ============ REVISION FINAL ============ */
/* El boton de la tienda, pendiente (a rayas) mientras no haya enlace; con enlace (<a class="gp">) pasa a boton activo. */
.gp{border-style:dashed}
.page a.gp{border-style:solid;border-color:var(--hi);text-decoration:none;color:var(--ink);cursor:pointer}
.page a.gp:hover{background:var(--panel-2)}
@media (min-width:700px){.big-sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}}
#p-comic:checked~.page :is(#c-maq:checked~.seg label[for="c-maq"],#c-mod:checked~.seg label[for="c-mod"],#m-cla:checked~.seg label[for="m-cla"],#m-plus:checked~.seg label[for="m-plus"]){color:#fff}
#p-pixel:checked~.page{--h1-fs:clamp(2.6rem,6.2vw,5rem)}
#p-pixel:checked~.page .fl-3{display:none}
#p-pixel:checked~.page .fx-b{left:auto;right:6%}
.se-duo h3 em{font-size:.7rem}
@media (max-width:360px){
  .foot-st{grid-column:1/-1}
  .tk-bc span{display:none}
  #p-pixel:checked~.page .k-more span{font-size:.82rem;letter-spacing:0}
}
/* Con el teclado, el selector de piel enseña siempre donde esta el foco. */
.piel:focus-visible~.page::after{content:"PIEL " var(--skin-n) " · " var(--skin);position:fixed;z-index:300;top:10px;left:50%;transform:translateX(-50%);padding:10px 16px;border:3px solid var(--focus);border-radius:999px;background:var(--bg);color:var(--ink);font:600 .8rem/1 "Share Tech Mono",ui-monospace,monospace;letter-spacing:.14em;white-space:nowrap}
html[lang="en"] .piel:focus-visible~.page::after{content:"SKIN " var(--skin-n) " · " var(--skin)}
/* La marca de los siete estilos que visten la web, igual que el punto de la frase que la explica. */
.gi-l{left:6px;top:6px;width:12px;height:12px;padding:0;border-radius:50%}
.gi-l,.live-dot{background:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.8)}
.gi-l::before{display:none}