/* ============================================
   LOS SKEEPERS — design tokens
   Palette: cream #FBF3E1, mustard #F0B429, forest #2B4C3F,
            skeeper red #C50300, ink #191512, brown #6B4226
   Display: 'Anton' | Body: 'Space Grotesk' | Utility: 'JetBrains Mono'
   ============================================ */

:root{
  --cream:#FBF3E1;
  --mustard:#F0B429;
  --forest:#2B4C3F;
  --red:#C50300;
  --ink:#191512;
  --brown:#6B4226;
  --paper:#FFFDF6;
  --line:3px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:56px;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M14,5 L16.12,11.09 L22.56,11.22 L17.42,15.11 L19.29,21.28 L14,17.6 L8.71,21.28 L10.58,15.11 L5.44,11.22 L11.88,11.09 Z' fill='%23F0B429' stroke='%23191512' stroke-width='1.3' stroke-linejoin='round'/></svg>") 14 14, auto;
}
body.lock{overflow:hidden;}

h1,h2,h3,.display{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.5px;
  line-height:0.95;
  margin:0;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:0.75rem;
  color:var(--red);
  font-weight:700;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:0.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- GLITCH XP: se intensifica progresivamente con el scroll de toda la página ---- */
:root{ --glitch: 0; }
.glitch-overlay{
  position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;
}
.glitch-wallpaper{
  position:fixed;inset:0;z-index:2;
  background:url('../assets/xp-bliss-wallpaper.jpg') center/cover no-repeat;
  opacity:calc(var(--glitch) * 1);
  pointer-events:none;
}
.wallpaper-crew{position:absolute;inset:0;overflow:hidden;}
.wallpaper-crew-item{
  position:absolute;bottom:32%;width:9vw;max-width:70px;min-width:34px;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,0.35));
}
@media (max-width:700px){.wallpaper-crew-item{bottom:26%;}}
.page-content{background:var(--cream);transition:background-color 0.15s linear;}
body.glitch-low .page-content{background:rgba(251,243,225,0.82);}
body.glitch-mid .page-content{background:rgba(251,243,225,0.6);}
body.glitch-high .page-content{background:rgba(251,243,225,0.4);}
body.glitch-max .page-content{background:rgba(251,243,225,0.28);}
/* el hero es fixed y vive detrás de todo; se apaga rápido y por completo apenas
   se termina la transición inicial, para que nunca se cuele por transparencia después */
:root{ --hero-fade: 0; }
.glitch-scanlines{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(200,220,255,0.55) 0px, rgba(200,220,255,0.55) 1px, transparent 1px, transparent 3px);
  opacity:calc(var(--glitch) * 0.3);
  mix-blend-mode:overlay;
}
.glitch-tint{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,20,180,0) 0%, rgba(0,30,190,0.3) 45%, rgba(0,10,140,0.62) 100%);
  opacity:calc(var(--glitch) * 0.95);
  mix-blend-mode:hard-light;
  transition:opacity 0.1s linear;
}
.glitch-rgb{
  position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(90deg, rgba(255,0,60,0.6) 0px, transparent 2px, transparent 4px, rgba(0,180,255,0.65) 4px, transparent 6px);
}
body.glitch-mid .glitch-rgb{opacity:calc((var(--glitch) - 0.3) * 0.4);}
body.glitch-high .glitch-rgb{opacity:calc((var(--glitch) - 0.4) * 0.65);}
body.glitch-max .glitch-rgb{animation:glitchRgbJitter 0.3s steps(2) infinite;}
@keyframes glitchRgbJitter{0%{transform:translate(0,0);}50%{transform:translate(-4px,2px);}100%{transform:translate(3px,-1px);}}

.glitch-text{
  position:absolute;color:#fff;font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;line-height:1.5;text-shadow:2px 0 #ff2650, -2px 0 #00d4ff;
  opacity:0;transition:opacity 0.4s ease;white-space:pre-line;max-width:60vw;
}
.glitch-text-1{top:14%;left:4vw;}
.glitch-text-2{top:38%;right:4vw;text-align:right;}
.glitch-text-3{top:58%;left:4vw;}
.glitch-text-4{top:74%;right:4vw;text-align:right;}
.glitch-text-5{top:88%;left:4vw;}
.glitch-text-6{top:96%;right:4vw;text-align:right;}
body.glitch-low .glitch-text-1{opacity:calc(var(--glitch) * 0.9);}
body.glitch-mid .glitch-text-1,body.glitch-mid .glitch-text-2{opacity:calc(var(--glitch) * 0.9);}
body.glitch-high .glitch-text-1,body.glitch-high .glitch-text-2,body.glitch-high .glitch-text-3,body.glitch-high .glitch-text-4{opacity:calc(var(--glitch) * 0.95);}
body.glitch-max .glitch-text{opacity:1;}

body.glitch-max .glitch-overlay{animation:glitchFlicker 2.4s steps(1) infinite;}
@keyframes glitchFlicker{
  0%,89%,100%{filter:none;}
  90%{filter:invert(1) hue-rotate(30deg);}
  91%{filter:none;}
  93%{filter:contrast(2.4) brightness(0.7);transform:translate(4px,0);}
  94%{filter:none;transform:none;}
  96%{filter:hue-rotate(180deg);}
  97%{filter:none;}
}
body.no-motion .glitch-overlay{animation:none !important;}

/* glitch existente en la galería, ahora también se dispara solo con el scroll, no solo hover */
/* concepto de galería: entre lo normal y XP — como verla a través de un monitor CRT viejo,
   consistente en todos los tiles (ya no cada uno mutando a un color random solo) */
body.glitch-mid .glitch-tile{
  filter:sepia(calc((var(--glitch) - 0.35) * 0.6)) saturate(calc(1 - (var(--glitch) - 0.35) * 0.4)) contrast(1.08);
}

/* bordes con interferencia en tarjetas clave (integrantes, merch, prensa) */
body.glitch-high .member-card,body.glitch-high .merch-thumb,body.glitch-high .press-photo{
  box-shadow:0 0 0 2px rgba(255,0,60,0.5), 0 0 0 4px rgba(0,220,255,0.35);
}

/* ---- "bugs" de Windows XP: algunos cuadros se corrompen al estilo XP, otros se quedan normales ---- */
.xp-glitch-target{position:relative;}
/* el quiz vive permanentemente en modo XP (está literal dentro de una tele), no depende del scroll */
#quiz-box.xp-glitch-target,
body.glitch-mid .montaje-box.xp-glitch-target,
body.glitch-high .press-card.xp-glitch-target:nth-of-type(odd),
body.glitch-high .merch-card.xp-glitch-target:nth-of-type(3n),
body.glitch-high .ig-card.xp-glitch-target:nth-of-type(even){
  outline:2px solid #003c74;outline-offset:0;
  border:1px solid #0831d9 !important;
  background:#ece9d8 !important;
  box-shadow:4px 4px 0 rgba(0,20,120,0.5), inset 0 0 0 1px #fff !important;
  filter:saturate(0.75) contrast(1.05);
  padding-top:40px !important;
}
body.glitch-mid .montaje-box.xp-glitch-target{padding:40px 20px 46px !important;}
#quiz-box.xp-glitch-target::before,
body.glitch-mid .montaje-box.xp-glitch-target::before,
body.glitch-high .press-card.xp-glitch-target:nth-of-type(odd)::before,
body.glitch-high .merch-card.xp-glitch-target:nth-of-type(3n)::before,
body.glitch-high .ig-card.xp-glitch-target:nth-of-type(even)::before{
  content:'Los_Skeepers.exe';
  position:absolute;top:0;left:0;right:0;height:22px;z-index:4;
  background:linear-gradient(180deg,#4198fa 0%,#1a5ce0 15%,#0a3ea8 55%,#001c66 100%);
  color:#fff;font-family:Tahoma,'Segoe UI',sans-serif;font-size:0.62rem;font-weight:700;
  display:flex;align-items:center;padding:0 9px;letter-spacing:0.3px;
  border-bottom:1px solid #001238;
}
#quiz-box.xp-glitch-target::after,
body.glitch-mid .montaje-box.xp-glitch-target::after,
body.glitch-high .press-card.xp-glitch-target:nth-of-type(odd)::after,
body.glitch-high .merch-card.xp-glitch-target:nth-of-type(3n)::after,
body.glitch-high .ig-card.xp-glitch-target:nth-of-type(even)::after{
  content:'File  Edit  View  Help';position:absolute;top:22px;left:0;right:0;height:18px;z-index:4;
  display:flex;align-items:center;color:#000;font-family:Tahoma,sans-serif;
  font-size:0.58rem;letter-spacing:1px;background:#ece9d8;padding:0 8px;
  border-bottom:1px solid #aca899;
}
body.glitch-mid .montaje-box.xp-glitch-target{position:relative;}
body.glitch-mid .montaje-box.xp-glitch-target .montaje-canvas-wrap::after{
  content:'listo.';position:absolute;left:0;right:0;bottom:-24px;height:20px;
  background:#ece9d8;border-top:1px solid #aca899;color:#555;
  font-family:Tahoma,sans-serif;font-size:0.6rem;display:flex;align-items:center;padding:0 8px;
}
/* estilo XP completo por dentro del quiz — mismo look que el montaje, siempre activo */
#quiz-box.xp-glitch-target *{font-family:Tahoma,'Segoe UI',sans-serif !important;}
#quiz-box.xp-glitch-target .btn{
  background:linear-gradient(180deg,#fefefe 0%,#ece9d8 100%) !important;color:#000 !important;
  border:1px solid #716f64 !important;border-radius:3px !important;
  box-shadow:inset 1px 1px 0 #fff, 1px 1px 2px rgba(0,0,0,0.25) !important;
  text-transform:none !important;font-weight:400 !important;transform:none !important;letter-spacing:0 !important;
}
#quiz-box.xp-glitch-target .quiz-option{
  background:linear-gradient(180deg,#fefefe 0%,#ece9d8 100%) !important;color:#000 !important;
  border:1px solid #716f64 !important;border-radius:3px !important;
  box-shadow:inset 1px 1px 0 #fff, 1px 1px 2px rgba(0,0,0,0.2) !important;
  font-family:Tahoma,'Segoe UI',sans-serif !important;font-size:0.85rem !important;
  transform:none !important;
}
#quiz-box.xp-glitch-target .quiz-option:hover{
  background:linear-gradient(180deg,#5ea1f2 0%,#1a5ce0 100%) !important;color:#fff !important;
  transform:none !important;box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5) !important;
}
#quiz-box.xp-glitch-target .quiz-option img{border:1px solid #716f64 !important;}
#quiz-box.xp-glitch-target .quiz-progress{border:1px solid #716f64 !important;background:#fff !important;height:16px !important;}
#quiz-box.xp-glitch-target .quiz-progress-bar{background:linear-gradient(180deg,#5ea1f2 0%,#0a3ea8 100%) !important;}
#quiz-box.xp-glitch-target .quiz-step-label{color:#444 !important;}
#quiz-box.xp-glitch-target .quiz-question{color:#000 !important;}
#quiz-box.xp-glitch-target .result-card{
  background:#ece9d8 !important;color:#000 !important;border:1px solid #716f64 !important;
  font-family:Tahoma,'Segoe UI',sans-serif !important;
}
#quiz-box.xp-glitch-target .result-card .eyebrow{color:#0a3ea8 !important;}
#quiz-box.xp-glitch-target .result-card p{color:#000 !important;opacity:1 !important;}
/* estilo XP completo por dentro del panel de montaje: nada de stickers brutalistas, todo Luna theme */
body.glitch-mid .montaje-box.xp-glitch-target *{font-family:Tahoma,'Segoe UI',sans-serif !important;}
body.glitch-mid .montaje-box.xp-glitch-target .btn{
  background:linear-gradient(180deg,#fefefe 0%,#ece9d8 100%) !important;color:#000 !important;
  border:1px solid #716f64 !important;border-radius:3px !important;
  box-shadow:inset 1px 1px 0 #fff, 1px 1px 2px rgba(0,0,0,0.25) !important;
  text-transform:none !important;font-weight:400 !important;font-size:0.78rem !important;
  transform:none !important;letter-spacing:0 !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .btn:hover{background:linear-gradient(180deg,#fff 0%,#f5f3ea 100%) !important;transform:none !important;}
body.glitch-mid .montaje-box.xp-glitch-target .btn.red{
  background:linear-gradient(180deg,#5ea1f2 0%,#0a3ea8 100%) !important;color:#fff !important;
  border-color:#003c74 !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .control-label{
  color:#000 !important;font-weight:700 !important;font-size:0.72rem !important;
  text-transform:none !important;letter-spacing:0 !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .sticker-tab{
  background:linear-gradient(180deg,#fefefe 0%,#ded9c4 100%) !important;
  border:1px solid #716f64 !important;border-radius:3px 3px 0 0 !important;
  color:#000 !important;box-shadow:none !important;text-transform:none !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .sticker-tab::before{content:'';margin:0;}
body.glitch-mid .montaje-box.xp-glitch-target .sticker-tab.active{
  background:linear-gradient(180deg,#5ea1f2 0%,#0a3ea8 100%) !important;color:#fff !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .frame-opt{
  background:linear-gradient(180deg,#fefefe 0%,#ece9d8 100%) !important;
  border:1px solid #716f64 !important;border-radius:3px !important;color:#000 !important;
  box-shadow:inset 1px 1px 0 #fff !important;text-transform:none !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .frame-opt.active{
  background:linear-gradient(180deg,#5ea1f2 0%,#0a3ea8 100%) !important;color:#fff !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .montaje-canvas-wrap{
  background:repeating-conic-gradient(#c8c8c8 0% 25%, #9a9a9a 0% 50%) 50% / 16px 16px !important;
  border:2px inset #838179 !important;box-shadow:none !important;
}
body.glitch-mid .montaje-box.xp-glitch-target .montaje-empty{color:#444 !important;opacity:1 !important;}
body.glitch-mid .montaje-box.xp-glitch-target .montaje-hint{
  color:#444 !important;font-size:0.68rem !important;
}
body.glitch-mid .montaje-box.xp-glitch-target #montaje-canvas{box-shadow:none !important;}


.stars-layer{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;}
.floating-star{
  position:absolute;width:26px;height:26px;opacity:0.55;
  transition:transform 0.4s ease-out;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.2));
}
@media (max-width:820px){.floating-star{width:18px;height:18px;opacity:0.4;}}
.side-star{
  position:fixed;right:-10px;top:38%;width:120px;z-index:6;pointer-events:none;
  opacity:0.9;filter:drop-shadow(3px 3px 0 rgba(0,0,0,0.15));
  will-change:transform;
}
@media (max-width:820px){.side-star{width:70px;top:20%;}}

/* ---- floating member cutouts, wobble on scroll, spring back upright ---- */
.floating-char{
  position:absolute;width:150px;z-index:3;pointer-events:none;
  filter:drop-shadow(4px 6px 6px rgba(0,0,0,0.25));
  transform-origin:bottom center;
  transition:transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.char-integrantes{top:-30px;right:0;}
.char-musica{top:20px;left:-10px;}
.char-shows{top:0;right:-10px;}
.char-fans{top:-20px;left:0;}
.char-montaje{top:-20px;left:-8px;}
.char-merch{top:10px;right:0;}
.char-prensa{top:-20px;left:-10px;}
.char-juegos{top:-22px;right:-8px;}
.char-exclusivo{top:-16px;left:-8px;}

@media (max-width:820px){
  .floating-char{
    position:static !important;
    display:block;
    width:56px;
    margin:0 0 14px auto;
    opacity:0.95;
  }
}
/* char-musica y char-fans son recortes de foto anchos (150px) que, a este
   ancho, tapan la primera letra del título y el párrafo de al lado — les
   dejamos espacio al texto en vez de subir el z-index del texto (el
   personaje va detrás visualmente, pero seguía robando ancho). Los demás
   floating-char son bocetos más angostos y no chocan con el texto. */
@media (min-width:821px){
  .char-musica + .section-head,
  .char-fans + .section-head{
    padding-left:140px;
  }
}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:5px 28px;
  background:rgba(251,243,225,0.88);
  backdrop-filter:blur(6px);
  border-bottom:var(--line) solid var(--ink);
  will-change:transform;transform:translateZ(0);
}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:'Anton',sans-serif;font-size:1.3rem;}
.nav-logo img{width:28px;height:auto;animation:navStarSpin 6s linear infinite;}
@keyframes navStarSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.nav-links{display:flex;gap:22px;font-family:'JetBrains Mono',monospace;font-size:0.8rem;text-transform:uppercase;}
.nav-links a{position:relative;padding-bottom:2px;cursor:pointer;}
.nav-links a:hover{color:var(--red);}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;font-family:inherit;}

@media (max-width:820px){
  .nav-links{
    position:fixed;top:37px;right:0;left:0;background:var(--cream);
    flex-direction:column;padding:18px 28px;gap:14px;
    border-bottom:var(--line) solid var(--ink);
    transform:translateY(-140%);transition:transform 0.3s ease;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-toggle{display:block;}
}

.hero{
  position:fixed;inset:0;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:var(--ink);z-index:1;
  opacity:calc(1 - var(--hero-fade, 0));
}
.hero video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.55;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(25,21,18,0.35) 0%, rgba(25,21,18,0.75) 100%);
}
.hero-content{position:relative;z-index:2;text-align:center;color:var(--paper);padding:0 20px;}
.hero-content .eyebrow{color:var(--mustard);}
.hero-title{
  font-size:clamp(3rem,11vw,8rem);
  color:var(--paper);
  -webkit-text-stroke:2px var(--ink);
}
.hero-sub{
  font-family:'JetBrains Mono',monospace;
  margin-top:14px;font-size:clamp(0.9rem,2vw,1.15rem);
  color:var(--mustard);
}
.hero-scroll{
  position:absolute;bottom:70px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;color:var(--paper);font-size:0.75rem;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  animation:bob 1.8s infinite ease-in-out;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

.marquee-wrap{
  background:var(--red);color:var(--cream);
  border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);
  overflow:hidden;white-space:nowrap;padding:12px 0;
}
.marquee-track{display:flex;width:max-content;animation:scrollMarquee 22s linear infinite;}
.marquee-track span{
  font-family:'Anton',sans-serif;font-size:1.1rem;text-transform:uppercase;
  margin:0 22px;letter-spacing:1px;white-space:nowrap;
}
@keyframes scrollMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

section{position:relative;padding:100px 6vw;max-width:1360px;margin:0 auto;}
.section-head{margin-bottom:44px;max-width:640px;}
.shows-subhead{margin-bottom:26px;}
.shows-subhead h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2rem);}
.shows-empty{
  background:transparent;border:none;padding:0;
  max-width:520px;
}
.shows-empty-centered{margin-left:auto;margin-right:auto;text-align:center;}
.shows-empty p{font-size:1rem;line-height:1.6;color:var(--ink);opacity:0.8;}
.link-preview-card{
  display:block;margin:18px auto 0;max-width:340px;text-align:left;
  background:var(--paper);border:var(--line) solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  border-radius:10px !important;overflow:hidden;transition:transform 0.15s ease,box-shadow 0.15s ease;
}
.link-preview-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.link-preview-thumb-photo{width:100%;aspect-ratio:16/9;}
.link-preview-thumb-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.link-preview-info{padding:16px 18px;min-width:0;}
.link-preview-domain{
  display:block;font-family:'JetBrains Mono',monospace;font-size:0.65rem;
  text-transform:uppercase;letter-spacing:0.5px;opacity:0.55;margin-bottom:3px;
}
.link-preview-title{font-family:'Space Grotesk';font-weight:700;font-size:1.2rem;}
.section-head h2{font-size:clamp(2.2rem,5vw,4rem);margin-top:6px;}
.section-head p{font-family:'Space Grotesk';font-size:1.05rem;color:var(--ink);opacity:0.8;margin-top:12px;}
.youtube-follow{display:flex;align-items:center;gap:10px;}
.youtube-icon{width:34px;height:auto;flex:none;}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:0.82rem;
  font-weight:700;letter-spacing:0.5px;
  background:var(--mustard);color:var(--ink);
  border:var(--line) solid var(--ink);
  padding:12px 22px;border-radius:40px;
  transform:rotate(-1.5deg);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  cursor:pointer;
}
.btn:hover{transform:rotate(0deg) translate(2px,2px);box-shadow:2px 2px 0 var(--ink);}
.btn.alt{background:var(--paper);}
.btn.dark{background:var(--ink);color:var(--cream);}
.btn.outline{background:transparent;border-color:var(--cream);color:var(--cream);box-shadow:4px 4px 0 var(--cream);}
.btn.outline:hover{box-shadow:2px 2px 0 var(--cream);}
.btn.red{background:var(--red);color:var(--cream);}
.btn.small{padding:8px 16px;font-size:0.72rem;}
.btn[disabled]{opacity:0.4;pointer-events:none;}

/* ---- SALA DE JUEGOS: consola "SKEEPER BOY" (carta de presentación del hub) ----
   Diseño propio inspirado en la silueta de una consola portátil clásica,
   con la paleta e ilustración del sitio (no es un logo/marca de terceros). */
.gameboy-wrap{display:flex;justify-content:center;}
.gameboy{
  position:relative;width:min(300px,80vw);
  background:#c9c9c6;
  border:var(--line) solid var(--ink);
  border-radius:20px 20px 50px 20px !important;
  box-shadow:9px 9px 0 var(--ink);
  padding:44px 22px 30px;
  transform:rotate(-0.6deg);
  overflow:hidden;
}
.gb-top-bar{
  position:absolute;top:0;left:0;right:0;height:26px;
  background:#c9c9c6;border-bottom:2px solid var(--ink);
  display:flex;align-items:center;padding:0 20px;gap:8px;
}
.gb-switch-pill{
  width:32px;height:11px;border:1.5px solid var(--ink);border-radius:7px !important;
  position:relative;background:var(--paper);flex:none;
}
.gb-switch-pill::after{
  content:'';position:absolute;top:1px;right:1px;width:8px;height:6px;
  background:var(--forest);border-radius:4px !important;
}
.gb-switch-text{
  font-family:'JetBrains Mono',monospace;font-size:0.42rem;letter-spacing:1.5px;
  color:var(--ink);opacity:0.5;text-transform:uppercase;
}
.gb-screen-bezel{
  background:#2e2e2e;border:var(--line) solid var(--ink);
  border-radius:10px 10px 38px 10px !important;
  padding:16px 14px 20px;display:flex;gap:8px;position:relative;
}
.gb-battery{
  flex:none;width:16px;padding-top:24px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.gb-battery-led{
  width:7px;height:7px;border-radius:50% !important;flex:none;
  background:var(--red);box-shadow:0 0 5px var(--red);
  animation:gbLedPulse 2.4s ease-in-out infinite;
}
@keyframes gbLedPulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.gb-battery-label{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font-family:'JetBrains Mono',monospace;font-size:0.4rem;letter-spacing:1.5px;
  color:var(--cream);opacity:0.55;text-transform:uppercase;
}
.gb-screen-col{flex:1;min-width:0;}
.gb-bezel-label{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:'JetBrains Mono',monospace;color:var(--cream);opacity:0.8;
  font-size:0.48rem;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:10px;
}
.gb-bezel-label::before,.gb-bezel-label::after{
  content:'';flex:1;max-width:36px;height:3px;
  background:linear-gradient(90deg, var(--red) 0 50%, #2454c9 50% 100%);
  opacity:0.85;
}
.gb-screen{
  background:linear-gradient(165deg,#9aab52 0%,#84964a 55%,#71833c 100%);
  border:3px solid var(--ink);border-radius:2px 2px 24px 2px !important;
  padding:22px 16px;min-height:128px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;position:relative;overflow:hidden;
  box-shadow:inset 0 3px 10px rgba(0,0,0,0.35);
}
.gb-screen-scan{
  position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
.gb-counter{
  font-family:'Press Start 2P',monospace;font-size:0.6rem;color:#2b3a12;opacity:0.75;
  letter-spacing:1px;position:relative;
}
.gb-title{
  font-family:'Press Start 2P',monospace;font-size:0.78rem;line-height:1.7;
  color:#26330f;text-align:center;text-shadow:1px 1px 0 rgba(255,255,255,0.15);
  position:relative;min-height:2.6em;display:flex;align-items:center;justify-content:center;
  transition:opacity 0.12s ease;
}
.gb-title.flip{animation:gbFlip 0.28s steps(3,end);}
@keyframes gbFlip{0%{opacity:1;transform:translateY(0);}40%{opacity:0.15;transform:translateY(-4px);}100%{opacity:1;transform:translateY(0);}}
.gb-status{
  font-family:'Press Start 2P',monospace;font-size:0.52rem;color:#2b3a12;opacity:0.85;
  letter-spacing:0.5px;position:relative;text-align:center;
}
.gb-status.soon{animation:gbShake 0.4s steps(2,end);color:var(--red);opacity:1;}
@keyframes gbShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}
.gb-brand{
  display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:18px;
}
.gb-brand-small{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-style:italic;
  color:var(--forest);font-size:1.05rem;
}
.gb-brand-big{
  font-family:'Anton',sans-serif;text-transform:uppercase;color:var(--forest);
  font-size:1.9rem;letter-spacing:0.5px;
}
.gb-brand-sub{
  display:block;text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.58rem;
  letter-spacing:2px;color:var(--ink);opacity:0.55;font-weight:700;margin-top:2px;text-transform:uppercase;
}
.gb-controls{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:26px;padding:0 6px;
}
.gb-dpad{
  position:relative;width:88px;height:88px;flex:none;
}
.gb-dpad-btn{
  position:absolute;background:var(--ink);border:none;cursor:pointer;padding:0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -3px 0 rgba(0,0,0,0.3);
  transition:transform 0.08s ease,background 0.08s ease;
}
.gb-dpad-btn:active{background:var(--forest);}
.gb-dpad-up,.gb-dpad-down{width:28px;height:32px;left:30px;}
.gb-dpad-up{top:0;border-radius:4px 4px 0 0 !important;}
.gb-dpad-down{bottom:0;border-radius:0 0 4px 4px !important;}
.gb-dpad-left,.gb-dpad-right{width:32px;height:28px;top:30px;}
.gb-dpad-left{left:0;border-radius:4px 0 0 4px !important;}
.gb-dpad-right{right:0;border-radius:0 4px 4px 0 !important;}
.gb-dpad-left:active{transform:translateX(-2px);}
.gb-dpad-right:active{transform:translateX(2px);}
.gb-dpad-center{
  position:absolute;top:30px;left:30px;width:28px;height:28px;background:var(--ink);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.18), inset 0 -3px 0 rgba(0,0,0,0.3);
}
.gb-dpad-btn[aria-hidden]{cursor:default;}
.gb-ab{position:relative;width:96px;height:74px;flex:none;}
.gb-btn-round{
  position:absolute;width:46px;height:46px;border-radius:50% !important;border:var(--line) solid var(--ink);
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.85rem;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.35), inset 0 -4px 0 rgba(0,0,0,0.15);
  transition:transform 0.08s ease,box-shadow 0.08s ease;
}
.gb-btn-round:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink), inset 0 3px 0 rgba(255,255,255,0.35);}
.gb-btn-b{background:#9c3d67;color:var(--cream);left:0;bottom:0;}
.gb-btn-a{background:#9c3d67;color:var(--cream);right:0;top:0;}
.gb-select-start{
  display:flex;justify-content:center;gap:30px;margin-top:24px;
  font-family:'JetBrains Mono',monospace;font-size:0.6rem;letter-spacing:1px;
  color:var(--ink);opacity:0.6;text-transform:uppercase;
}
.gb-select-start span::before{
  content:'';display:block;width:34px;height:9px;background:var(--ink);opacity:0.35;
  border-radius:6px !important;margin:0 auto 4px;transform:rotate(-16deg);
}
.gb-jack{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:52px;height:13px;border:1.5px solid var(--ink);opacity:0.4;
  border-radius:8px !important;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:0.36rem;letter-spacing:1.5px;
  color:var(--ink);text-transform:uppercase;
}
.gb-speaker{
  position:absolute;bottom:20px;right:20px;display:flex;gap:5px;transform:rotate(-16deg);
}
.gb-speaker span{width:2px;height:34px;background:var(--ink);opacity:0.5;border-radius:2px !important;}
.gameboy-hint{
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.75rem;
  color:var(--ink);opacity:0.6;margin-top:20px;letter-spacing:0.4px;
}
@media (max-width:520px){
  .gameboy{width:92vw;padding:40px 16px 26px;}
  .gb-ab{transform:scale(0.92);}
}
.gb-screen.gb-shake{animation:gbScreenShake 0.4s steps(2,end);}
@keyframes gbScreenShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* ---- QUIZ ---- */
.quiz-box{
  max-width:640px;margin:0 auto;background:var(--paper);
  border:var(--line) solid var(--ink);box-shadow:8px 8px 0 var(--ink);
  padding:44px 6vw;position:relative;
}
.quiz-tv-outer{
  /* deja que la PC se salga del ancho angosto de la sección para verse más grande */
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.quiz-tv-wrap{position:relative;max-width:min(1750px, 94vw);margin:0 auto;}
/* Miguel mandó una foto nueva de la tele con transparencia real de verdad
   (fondo Y pantalla ambos transparentes) — con esta imagen el marco SÍ
   puede ir arriba como se pensó al principio, para que el plástico tape
   bien los bordes de la cajita del quiz en vez de que la cajita tape parte
   del marco. */
.quiz-tv-frame{width:100%;display:block;position:relative;z-index:2;pointer-events:none;}
.quiz-tv-wrap .quiz-box{
  position:absolute;left:17%;right:12%;top:29%;bottom:15%;
  max-width:none;margin:0;z-index:1;overflow:hidden;
  padding:44px 2.5vw 10px !important;border:none;box-shadow:none;
  display:flex;flex-direction:column;justify-content:flex-start;
}
.quiz-tv-wrap .quiz-box .quiz-panel{
  padding-top:0;margin:auto;width:100%;max-width:640px;
  max-height:100%;overflow-y:auto;
}
.quiz-tv-wrap .quiz-box .quiz-intro-text,
.quiz-tv-wrap .quiz-box .quiz-question{font-size:clamp(0.95rem, 1.5vw, 1.25rem);}
.quiz-tv-wrap .quiz-box h3.quiz-question{font-size:clamp(1.1rem, 1.9vw, 1.55rem);line-height:1.28;margin-top:6px;margin-bottom:18px;}
.quiz-tv-wrap .quiz-box .quiz-step-label{font-size:0.8rem;margin-bottom:8px;}
.quiz-tv-wrap .quiz-box .quiz-options.photo-options{max-width:420px;margin:0 auto;}
.quiz-tv-wrap .quiz-box .quiz-option{padding:14px 18px;}
.quiz-tv-wrap .quiz-box .quiz-options:not(.photo-options){align-items:center;}
.quiz-tv-wrap .quiz-box .quiz-options:not(.photo-options) .quiz-option{width:100%;max-width:420px;margin:0 auto;}
.quiz-tv-wrap .quiz-box #quiz-start{display:block;max-width:320px;margin:0 auto;}
.quiz-tv-wrap .quiz-box .quiz-options{gap:10px;}
@media (max-width:820px){
  .quiz-tv-wrap .quiz-box{left:17%;right:12%;top:29%;bottom:15%;padding:38px 2vw 6px !important;}
  .quiz-tv-wrap .quiz-box .quiz-intro-text,
  .quiz-tv-wrap .quiz-box .quiz-question{font-size:0.66rem;line-height:1.25;}
  .quiz-tv-wrap .quiz-box h3.quiz-question{margin-bottom:8px;}
  .quiz-tv-wrap .quiz-box .btn{font-size:0.64rem;padding:7px 10px;}
  .quiz-tv-wrap .quiz-box .quiz-option{padding:6px 8px;font-size:0.62rem !important;}
  .quiz-tv-wrap .quiz-box .quiz-options{gap:5px;}
  .quiz-tv-wrap .quiz-box .quiz-step-label{font-size:0.55rem;}
}
@media (max-width:680px){
  /* la PC de Shrek no cabe bien en un celular angosto — mejor mostrar las preguntas
     directo, grandes y legibles, sin el marco */
  .quiz-tv-frame{display:none;}
  .quiz-tv-outer{width:auto;margin-left:0;margin-right:0;}
  .quiz-tv-wrap{max-width:none;}
  .quiz-tv-wrap .quiz-box{
    position:static;left:auto;right:auto;top:auto;bottom:auto;
    max-width:560px;margin:0 auto;background:var(--paper);
    border:var(--line) solid var(--ink);box-shadow:6px 6px 0 var(--ink);
    padding:32px 5vw !important;overflow:visible;
  }
  .quiz-tv-wrap .quiz-box .quiz-intro-text,
  .quiz-tv-wrap .quiz-box .quiz-question{font-size:1rem;line-height:1.5;}
  .quiz-tv-wrap .quiz-box h3.quiz-question{font-size:1.2rem;margin-bottom:16px;}
  .quiz-tv-wrap .quiz-box .btn{font-size:0.8rem;padding:12px 20px;}
  .quiz-tv-wrap .quiz-box .quiz-option{padding:12px 16px;font-size:0.85rem !important;}
  .quiz-tv-wrap .quiz-box .quiz-options{gap:8px;}
  .quiz-tv-wrap .quiz-box .quiz-step-label{font-size:0.7rem;}
}

.quiz-panel{text-align:center;}
.quiz-intro-text{font-size:1.15rem;line-height:1.6;margin-bottom:26px;}
.quiz-progress{height:10px;background:var(--cream);border:2px solid var(--ink);margin-bottom:10px;overflow:hidden;}
.quiz-progress-bar{height:100%;background:var(--red);width:0%;transition:width 0.35s ease;}
.quiz-step-label{font-family:'JetBrains Mono',monospace;font-size:0.75rem;text-transform:uppercase;letter-spacing:1px;opacity:0.6;margin-bottom:18px;text-align:left;}
.quiz-question{font-size:clamp(1.4rem,3.4vw,2rem);margin-bottom:26px;text-align:left;}
.quiz-options{display:flex;flex-direction:column;gap:12px;}
.quiz-option{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--cream);border:var(--line) solid var(--ink);
  padding:14px 18px;cursor:pointer;font-family:'Space Grotesk';font-size:1rem;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow:3px 3px 0 var(--ink);
}
.quiz-option:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);background:var(--mustard);}
.quiz-option img{width:56px;height:56px;object-fit:cover;border:2px solid var(--ink);flex-shrink:0;}
.quiz-options.photo-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.quiz-options.photo-options .quiz-option{flex-direction:column;text-align:center;padding:0;gap:0;overflow:hidden;}
.quiz-options.photo-options .quiz-option img{width:100%;height:110px;object-fit:cover;border-radius:0;display:block;}
@media (max-width:600px){.quiz-options.photo-options{grid-template-columns:1fr 1fr;}}

.result-card{
  background:#000;color:var(--cream);padding:48px 36px;
  max-width:640px;margin:0 auto;
  border:var(--line) solid var(--ink);position:relative;overflow:hidden;
}
.result-card .eyebrow{color:var(--mustard);}
.result-card img{
  width:220px;height:220px;object-fit:cover;border-radius:50%;
  border:5px solid var(--mustard);margin:20px auto;display:block;
}
.result-card h2{font-size:clamp(2.4rem,6vw,3.4rem);color:#FFFDF6;margin-top:6px;}
.result-match{font-family:'JetBrains Mono',monospace;font-size:1.1rem;color:var(--mustard);font-weight:700;margin-top:8px;}
.result-card p{font-family:'Space Grotesk';font-size:1.1rem;line-height:1.7;margin-top:18px;color:#FFFDF6;opacity:1;}
.result-actions{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}

/* share sheet */
.share-sheet{
  position:fixed;inset:0;z-index:600;background:rgba(25,21,18,0.55);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity 0.25s ease;
}
.share-sheet.open{opacity:1;pointer-events:auto;}
.share-sheet-inner{
  background:var(--paper);width:100%;max-width:480px;
  border:var(--line) solid var(--ink);border-bottom:none;
  border-radius:24px 24px 0 0;padding:22px 26px 34px;
  transform:translateY(100%);transition:transform 0.3s cubic-bezier(.65,0,.35,1);
}
.share-sheet.open .share-sheet-inner{transform:translateY(0);}
.share-sheet-handle{width:44px;height:5px;background:var(--ink);opacity:0.2;border-radius:10px;margin:0 auto 18px;}
.share-sheet h3{font-size:1.3rem;text-align:center;margin-bottom:20px;}
.share-sheet-options{display:flex;gap:18px;justify-content:center;margin-bottom:22px;}
.share-opt{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;text-transform:uppercase;color:var(--ink);
}
.share-icon{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;border:var(--line) solid var(--ink);background:var(--cream);
  box-shadow:3px 3px 0 var(--ink);transition:transform 0.15s ease;
}
.share-opt:hover .share-icon{transform:translate(-2px,-2px);}
.share-opt.whatsapp .share-icon{background:#25D366;}
.share-opt.instagram .share-icon{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.share-opt.download .share-icon{background:var(--mustard);}

/* ---- MONTAJE ---- */
.montaje-box{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  grid-template-areas:
    "photo controls"
    "actions controls";
  gap:40px;
  max-width:940px;margin:0 auto;align-items:start;
}
.montaje-photo-block{grid-area:photo;}
.montaje-controls{grid-area:controls;}
.montaje-final-actions{grid-area:actions;}
.montaje-canvas-wrap{
  position:relative;background:
    repeating-conic-gradient(var(--paper) 0% 25%, #F0E6CC 0% 50%) 50% / 22px 22px;
  border:var(--line) solid var(--ink);
  box-shadow:9px 9px 0 var(--ink);min-height:360px;
  display:flex;align-items:center;justify-content:center;padding:16px;
  transform:rotate(-1.2deg);
}
.montaje-empty{text-align:center;font-family:'JetBrains Mono',monospace;opacity:0.55;}
.montaje-empty-icon{width:64px;height:64px;margin:0 auto 10px;display:block;object-fit:contain;}
#montaje-canvas{display:none;max-width:100%;height:auto;touch-action:none;box-shadow:0 0 0 3px var(--ink);}
.montaje-canvas-wrap.has-photo .montaje-empty{display:none;}
.montaje-canvas-wrap.has-photo #montaje-canvas{display:block;}
.montaje-hint{
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;opacity:0.65;
  text-align:center;margin-top:14px;padding:0 10px;
}

.montaje-controls{display:flex;flex-direction:column;gap:24px;}
.control-block{
  background:var(--paper);border:var(--line) solid var(--ink);padding:18px 20px;
  box-shadow:5px 5px 0 var(--ink);transform:rotate(0.6deg);
}
.control-block:nth-child(2){transform:rotate(-0.6deg);}
.control-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:0.74rem;
  text-transform:uppercase;letter-spacing:1px;color:var(--red);font-weight:700;margin-bottom:12px;
}
.montaje-stickers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.sticker-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.sticker-tab{
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;text-transform:uppercase;letter-spacing:0.5px;
  padding:7px 12px;border:var(--line) solid var(--ink);background:var(--paper);cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.sticker-tab::before{content:'★ ';color:var(--red);}
.sticker-tab:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.sticker-tab.active{background:var(--mustard);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.sticker-panel{display:none;}
.sticker-panel.active{display:grid;}
.sticker-pick{
  background:var(--cream);border:2px solid var(--ink);cursor:pointer;
  padding:4px 4px 0;transition:transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow:3px 3px 0 var(--ink);
}
.sticker-pick img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;}
.sticker-pick:hover{transform:translate(-3px,-3px) rotate(-2deg);box-shadow:5px 5px 0 var(--ink);background:var(--mustard);}
.sticker-pick:active{transform:translate(0,0);box-shadow:1px 1px 0 var(--ink);}

.frame-options{display:flex;flex-direction:column;gap:10px;}
.frame-opt{
  font-family:'JetBrains Mono',monospace;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;
  padding:12px 16px;border:2.5px solid var(--ink);background:var(--cream);cursor:pointer;text-align:left;
  box-shadow:3px 3px 0 var(--ink);transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.frame-opt:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.frame-opt.active{background:var(--mustard);box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px);}

.montaje-actions{display:flex;gap:10px;margin-top:10px;}
.montaje-actions .btn{flex:1;justify-content:center;}
#montaje-download{transform:rotate(-1deg);}
#montaje-download:hover{transform:rotate(0deg) translate(2px,2px);}
#montaje-download[disabled]{transform:none;}

@media (max-width:800px){
  .montaje-box{grid-template-columns:1fr;grid-template-areas:"photo" "controls" "actions";}
  .montaje-canvas-wrap{transform:none;}
  .control-block, .control-block:nth-child(2){transform:none;}
  .montaje-stickers{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
  .quiz-box{padding:32px 5vw;}
  .result-card img{width:140px;height:140px;}
}

.about{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:center;}
.about-photo{position:relative;}
.about-photo img{border:var(--line) solid var(--ink);border-radius:18px;transform:rotate(-2deg);}
.about-photo::before{
  content:"★";position:absolute;top:-26px;right:-18px;font-size:3rem;color:var(--red);
  transform:rotate(12deg);
}
.about-text .eyebrow{margin-bottom:10px;display:block;}
.about-text p{font-size:1.05rem;line-height:1.6;margin-top:16px;}
.stat-row{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap;}
.stat{font-family:'JetBrains Mono',monospace;}
.stat b{display:block;font-family:'Anton',sans-serif;font-size:1.8rem;color:var(--forest);}

@media (max-width:820px){ .about{grid-template-columns:1fr;} }

.song-card{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:40px;align-items:center;
  margin-bottom:56px;
}
.song-info{padding:0;display:flex;flex-direction:column;justify-content:center;}
.song-info h3{font-size:2.2rem;}
.song-info .eyebrow{margin-bottom:8px;}
.song-embed iframe{width:100%;min-height:180px;border:none;display:block;}
@media (max-width:760px){.song-card{grid-template-columns:1fr;gap:16px;}}

.artist-embed{
  overflow:hidden;margin-top:20px;
}
.artist-embed iframe{width:100%;border:none;display:block;}

.album-card{
  display:flex;gap:34px;background:var(--forest);color:var(--cream);
  border:var(--line) solid var(--ink);border-radius:20px;padding:34px;flex-wrap:wrap;
}
.album-cover{
  width:170px;height:170px;flex:none;border-radius:14px;border:var(--line) solid var(--ink);
  background:var(--mustard);display:flex;align-items:center;justify-content:center;
  font-family:'Anton';color:var(--ink);text-align:center;font-size:1.1rem;padding:10px;
  transform:rotate(-3deg);
}
.track-list{list-style:none;margin:14px 0 0;padding:0;font-family:'JetBrains Mono',monospace;}
.track-list li{
  display:flex;justify-content:space-between;padding:10px 0;
  border-bottom:1px dashed rgba(251,243,225,0.35);
}

/* ---- discography track list (spotify-style) ---- */
.latest-release-podium{max-width:460px;margin:0 auto 60px;text-align:center;position:relative;padding:20px 0;}
.stream-links{margin-top:40px;text-align:center;}
.stream-links-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:0.78rem;
  text-transform:uppercase;letter-spacing:1px;color:var(--ink);opacity:0.65;margin-bottom:12px;
}
.stream-links-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.stream-link{
  display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:var(--line) solid var(--ink);
  padding:10px 18px;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:0.85rem;
  box-shadow:3px 3px 0 var(--ink);transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.stream-link-icon{width:18px;height:18px;flex-shrink:0;}
.btn-icon{width:16px;height:16px;flex-shrink:0;}
.stream-link:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}.latest-release-glow{
  position:absolute;inset:-50px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, rgba(240,180,41,0.5) 0%, rgba(240,180,41,0.18) 42%, transparent 72%);
  filter:blur(6px);
}
.latest-release-star{
  position:absolute;pointer-events:none;z-index:0;
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,0.25));animation:retroSpin linear infinite;
}
body.no-motion .latest-release-star{animation:none !important;}
.latest-release-star-1{top:-14px;left:-22px;width:52px;animation-duration:12s;}
.latest-release-star-2{bottom:-18px;right:-20px;width:60px;animation-duration:16s;animation-direction:reverse;}
.latest-release-star-3{top:44%;right:-38px;width:40px;animation-duration:9s;}
.latest-release-badge{
  display:inline-block;background:var(--mustard);color:var(--ink);
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:0.5px;
  font-size:0.9rem;padding:8px 20px;border:var(--line) solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);transform:rotate(-2deg);
  position:relative;z-index:2;margin-bottom:-2px;
}
.latest-release-embed{
  border-radius:14px;overflow:hidden;
  box-shadow:0 24px 44px -14px rgba(25,21,18,0.35);
  position:relative;z-index:1;
}
.latest-release-embed iframe{display:block;}
.discog-panel{background:#3B2410;color:var(--cream);border:var(--line) solid var(--ink);padding:0;}
.discog-row{
  display:flex;align-items:center;gap:18px;padding:14px 26px;
  border-bottom:1px solid rgba(251,243,225,0.12);text-decoration:none;color:inherit;
}
.discog-row:last-child{border-bottom:none;}
.discog-row:hover{background:rgba(251,243,225,0.06);}
.discog-num{font-family:'JetBrains Mono',monospace;width:22px;opacity:0.6;font-size:0.9rem;}
.discog-cover{width:52px;height:52px;object-fit:cover;flex:none;border:2px solid var(--ink);}
.discog-title{flex:1;min-width:0;}
.discog-title b{display:block;font-family:'Space Grotesk';font-weight:700;font-size:1rem;}
.discog-title span{font-family:'JetBrains Mono',monospace;font-size:0.72rem;opacity:0.65;}
.discog-time{font-family:'JetBrains Mono',monospace;font-size:0.82rem;opacity:0.7;}

.shows-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.show-card{
  border:var(--line) solid var(--ink);border-radius:16px;overflow:hidden;background:var(--paper);
}
.show-card img{aspect-ratio:4/5;object-fit:cover;width:100%;}

/* ---- hand-built instagram post card (no screenshots) ---- */
.ig-card{background:#fff;font-family:-apple-system,'Space Grotesk',sans-serif;border-bottom:var(--line) solid var(--ink);}
.ig-card-head{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.ig-avatar{
  width:34px;height:34px;flex:none;color:#fff;font-family:'Anton';font-size:1rem;
  display:flex;align-items:center;justify-content:center;
}
.ig-card-uname{flex:1;min-width:0;}
.ig-card-uname b{display:block;font-size:0.86rem;font-weight:700;color:#111;}
.ig-card-uname span{display:block;font-size:0.7rem;color:#8a8a8a;font-family:'JetBrains Mono',monospace;}
.ig-follow-btn{
  font-family:'JetBrains Mono',monospace;font-size:0.68rem;text-transform:uppercase;
  background:var(--red);color:#fff;padding:6px 12px;border:none;letter-spacing:0.5px;
}
.ig-card-photo{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
.ig-card-icons{display:flex;gap:16px;padding:12px 14px 4px;font-size:1.3rem;color:#111;}
.ig-card-icons .push{margin-left:auto;}
.ig-card-likes{padding:2px 14px 0;font-size:0.82rem;font-weight:700;color:#111;}
.ig-card-caption{padding:6px 14px 0;font-size:0.82rem;color:#111;line-height:1.4;}
.ig-card-caption b{margin-right:5px;}
.ig-card-comments{padding:6px 14px 0;font-size:0.76rem;color:#8a8a8a;font-family:'JetBrains Mono',monospace;}
.ig-card-addcomment{
  display:flex;align-items:center;gap:8px;padding:12px 14px;margin-top:8px;
  border-top:1px solid #efefef;font-size:0.76rem;color:#8a8a8a;font-family:'JetBrains Mono',monospace;
}
.show-meta{padding:18px;}
.show-meta .eyebrow{display:block;margin-bottom:4px;}
.show-meta h3{font-size:1.3rem;}
.show-meta p{font-family:'JetBrains Mono',monospace;font-size:0.82rem;margin-top:8px;opacity:0.75;}
@media (max-width:900px){.shows-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.shows-grid{grid-template-columns:1fr;}}

.polaroid-strip{display:none;}

/* ---- full-bleed glitch gallery (latin-mafia style) ---- */
.glitch-gallery{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  margin-top:10px;
}
.glitch-tile{
  position:relative;overflow:hidden;aspect-ratio:1/1;
  background-size:cover;background-position:center;
  border:1px solid var(--ink);
}
.glitch-tile::before,.glitch-tile::after{
  content:"";position:absolute;inset:0;
  background-image:inherit;background-size:cover;background-position:center;
  mix-blend-mode:screen;opacity:0;transition:opacity 0.15s ease;
}
.glitch-tile::before{background-color:rgba(197,3,0,0.45);}
.glitch-tile::after{background-color:rgba(43,76,63,0.45);}
.glitch-tile:hover::before{opacity:1;animation:glitchA 0.25s steps(2) infinite;}
.glitch-tile:hover::after{opacity:1;animation:glitchB 0.25s steps(2) infinite;}
.glitch-tile:hover{filter:contrast(1.1);}
@keyframes glitchA{0%{transform:translate(5px,0);}50%{transform:translate(-3px,3px);}100%{transform:translate(5px,0);}}
@keyframes glitchB{0%{transform:translate(-5px,0);}50%{transform:translate(3px,-3px);}100%{transform:translate(-5px,0);}}
.glitch-tile span{
  position:absolute;left:14px;bottom:12px;z-index:2;color:var(--cream);
  font-family:'JetBrains Mono',monospace;font-size:0.72rem;text-transform:uppercase;
  text-shadow:0 2px 4px rgba(0,0,0,0.8);
}
@media (max-width:760px){.glitch-gallery{grid-template-columns:repeat(3,1fr);}}
@media (max-width:480px){.glitch-gallery{grid-template-columns:repeat(2,1fr);}}

.glitch-tile.glitch-video{background:#111;}
.glitch-tile.glitch-video video{width:100%;height:100%;object-fit:cover;display:block;}
.glitch-video:hover video{animation:videoGlitch 0.25s steps(2) infinite;}
@keyframes videoGlitch{
  0%{filter:hue-rotate(0deg) saturate(1.3);transform:translate(0,0) scale(1.02);}
  50%{filter:hue-rotate(20deg) saturate(1.8);transform:translate(2px,-2px) scale(1.02);}
  100%{filter:hue-rotate(-20deg) saturate(1.3);transform:translate(-2px,2px) scale(1.02);}
}

.members-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.member-card{
  position:relative;border:var(--line) solid var(--ink);border-radius:18px;overflow:hidden;
  background:var(--ink);aspect-ratio:3/4;display:block;cursor:pointer;
}
.member-card img{width:100%;height:100%;object-fit:cover;opacity:0.9;transition:transform 0.4s ease, opacity 0.22s ease;}
.member-card:hover img{transform:scale(1.06);}
.member-card img.swap-out{opacity:0;transform:scale(1.12);}
.member-card-flash{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none;transition:opacity 0.15s ease;}
.member-card.flash .member-card-flash{opacity:0.85;}
.member-card.revealing{cursor:wait;}
.member-card.revealing .member-tag{animation:memberTagPulse 0.55s ease-in-out infinite;}
@keyframes memberTagPulse{0%,100%{transform:rotate(-2deg) scale(1);}50%{transform:rotate(-2deg) scale(1.1);}}
.member-tag{
  position:absolute;left:14px;bottom:14px;background:var(--mustard);
  border:2px solid var(--ink);border-radius:30px;padding:8px 16px;
  font-family:'Anton';font-size:1.1rem;transform:rotate(-2deg);color:var(--ink);
}
@media (max-width:560px){.members-grid{gap:8px;grid-template-columns:repeat(2,1fr);}
  .member-card{aspect-ratio:1/1;}
  .member-tag{font-size:0.62rem;padding:3px 7px;left:5px;bottom:5px;border-width:1px;}}

.merch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.merch-card{background:transparent;cursor:pointer;}
.merch-card:hover .merch-thumb{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);}
.merch-thumb{
  aspect-ratio:1/1;background:repeating-linear-gradient(45deg,#eee,#eee 10px,#e2e2e2 10px,#e2e2e2 20px);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;text-align:center;color:#8a8a8a;padding:20px;
  background-size:cover;background-position:center;border:var(--line) solid var(--ink);
  transition:background-image 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.merch-thumb.has-photo{padding:0;color:transparent;overflow:hidden;}
.merch-thumb.has-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity 0.28s ease, transform 0.28s ease;
}
.merch-thumb.has-photo img.swap-out{opacity:0;transform:scale(1.06);}
.merch-swatches{display:flex;gap:10px;margin-top:10px;}
.merch-swatches .swatch{
  width:30px;height:30px;border:var(--line) solid var(--ink);cursor:pointer;padding:0;position:relative;
  box-shadow:2px 2px 0 var(--ink);transition:transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s ease;
}
.merch-swatches .swatch:hover{transform:translate(-1px,-1px) scale(1.1);box-shadow:3px 3px 0 var(--ink);}
.merch-swatches .swatch.active{transform:translate(-2px,-2px) scale(1.05);box-shadow:4px 4px 0 var(--ink);}
.merch-swatches .swatch.active::after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:0.9rem;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
.swatch-name{
  font-family:'JetBrains Mono',monospace;font-size:0.7rem;text-transform:uppercase;
  letter-spacing:0.5px;color:var(--ink);opacity:0.6;margin-top:6px;
}
.merch-info{padding:14px 2px 0;}
.merch-info h3{font-size:1.05rem;text-transform:none;font-family:'Space Grotesk';font-weight:700;}
.merch-info .price{font-family:'JetBrains Mono',monospace;color:var(--red);font-weight:700;margin-top:6px;}
.merch-ticker{
  background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;
  padding:10px 0;margin-bottom:24px;
}
.merch-ticker .marquee-track{animation-duration:20s;}
.merch-ticker .marquee-track span{
  font-family:'JetBrains Mono',monospace;font-size:0.78rem;text-transform:uppercase;
  letter-spacing:1px;margin:0 22px;
}

/* ---- carrito ---- */
.cart-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--paper);border:var(--line) solid var(--ink);padding:12px 18px;
  margin-bottom:26px;flex-wrap:wrap;
}
#cart-count-label{font-family:'JetBrains Mono',monospace;font-size:0.82rem;}

/* ---- overlay de tienda (mismo patrón que game-overlay: pantalla completa, botón volver) ---- */
.shop-overlay{
  position:fixed;inset:0;z-index:525;background:var(--cream);
  transform:translateY(100%);transition:transform 0.45s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;
}
.shop-overlay.open{transform:translateY(0);}
.shop-photo-scatter{position:fixed;inset:0;z-index:3;pointer-events:none;}
.shop-scatter-photo{
  position:absolute;object-fit:cover;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);opacity:0;
  animation:shopScatterIn 0.4s ease forwards;
  transition:transform 0.4s cubic-bezier(.34,1.2,.64,1);
}
@keyframes shopScatterIn{from{opacity:0;}to{opacity:1;}}
.game-overlay-body.shop-detail-body{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;
  max-width:1040px;margin:0 auto;min-height:calc(100svh - 140px);
}
.shop-detail-title{grid-column:1 / -1;font-size:1.8rem;margin-bottom:6px;}
.shop-detail-photo-wrap{
  aspect-ratio:1/1;overflow:visible;position:relative;
  transition:transform 0.4s cubic-bezier(.34,1.2,.64,1);
}
.shop-detail-photo-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
  box-shadow:0 24px 60px rgba(0,0,0,0.35);
}
.shop-detail-info p{font-family:'Space Grotesk';line-height:1.5;margin-bottom:24px;}
.shop-size-row{margin-bottom:22px;}
.shop-size-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:0.8rem;
  text-transform:uppercase;letter-spacing:0.5px;opacity:0.7;margin-bottom:12px;
}
.shop-sizes{display:flex;gap:12px;flex-wrap:wrap;}
.shop-size-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:84px;padding:14px 8px;border:var(--line) solid var(--ink);background:var(--paper);
  font-family:'JetBrains Mono',monospace;font-weight:700;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);transition:transform 0.12s ease,box-shadow 0.12s ease;
}
.shop-size-letter{font-size:1.2rem;}
.shop-size-desc{font-family:'Space Grotesk';font-weight:400;font-size:0.68rem;text-transform:none;opacity:0.7;}
.shop-size-btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.shop-size-btn.active{background:var(--red);color:var(--cream);transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink);}
.shop-size-btn.active .shop-size-desc{opacity:0.9;}
.shop-qty-row{margin-bottom:24px;}
.shop-qty-stepper{display:flex;align-items:center;gap:0;width:fit-content;border:var(--line) solid var(--ink);box-shadow:3px 3px 0 var(--ink);}
.shop-qty-btn{
  width:40px;height:40px;background:var(--paper);border:none;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.1rem;
}
.shop-qty-btn:hover{background:var(--mustard);}
.shop-qty-btn:first-child{border-right:1px solid var(--ink);}
.shop-qty-btn:last-child{border-left:1px solid var(--ink);}
.shop-qty-value{width:44px;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;}
.shop-added-msg{
  display:none;font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--forest);
  margin-top:14px;
}
.shop-added-msg.show{display:block;}
.shop-added-msg a{color:var(--red);font-weight:700;}
@media (max-width:800px){.game-overlay-body.shop-detail-body{grid-template-columns:1fr;gap:26px;min-height:0;}}

/* ---- carrito: listado de items ---- */
.cart-empty{font-family:'Space Grotesk';opacity:0.6;padding:20px 0;}
.cart-row{
  display:flex;align-items:center;gap:14px;
  border-bottom:1px solid rgba(25,21,18,0.15);padding:14px 0;
}
.cart-row-thumb{width:56px;height:56px;object-fit:cover;flex:none;border:var(--line) solid var(--ink);}
.cart-row-thumb-empty{background:repeating-linear-gradient(45deg,#eee,#eee 6px,#e2e2e2 6px,#e2e2e2 12px);}
.cart-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.cart-row-name{font-family:'Space Grotesk';font-size:0.92rem;}
.cart-row-qty{display:flex;align-items:center;gap:0;width:fit-content;border:var(--line) solid var(--ink);}
.cart-row-qty-btn{
  width:28px;height:28px;background:var(--paper);border:none;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-weight:700;
}
.cart-row-qty-btn:hover{background:var(--mustard);}
.cart-row-qty-value{width:30px;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:0.85rem;}
.cart-row-price{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--red);flex:none;}
.cart-total-row{
  font-family:'JetBrains Mono',monospace;font-weight:700;text-align:right;
  padding-top:16px;font-size:1rem;
}
.cart-row-remove{
  background:none;border:var(--line) solid var(--ink);width:30px;height:30px;
  cursor:pointer;font-weight:700;flex:none;
}
#cart-checkout-btn{margin-top:26px;}

/* ---- muro de fans ---- */
.fans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.fan-tile{border:var(--line) solid var(--ink);overflow:hidden;aspect-ratio:1/1;transition:transform 0.25s ease;}
.fan-tile:nth-child(3n+1){transform:rotate(-2deg);}
.fan-tile:nth-child(3n+2){transform:rotate(1.5deg);}
.fan-tile:nth-child(3n){transform:rotate(-1deg);}
.fan-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.fan-tile:hover{transform:rotate(0deg) scale(1.04);z-index:2;position:relative;}
@media (max-width:900px){.fans-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.fans-grid{grid-template-columns:repeat(2,1fr);}}

/* ---- grid de portadas (mismo patrón visual que el muro de fans) ---- */
.songs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:50px 0;}
.song-tile{
  border:var(--line) solid var(--ink);overflow:hidden;aspect-ratio:1/1;position:relative;
  cursor:pointer;transition:transform 0.25s ease;background:var(--ink);
}
.song-tile:nth-child(3n+1){transform:rotate(-2deg);}
.song-tile:nth-child(3n+2){transform:rotate(1.5deg);}
.song-tile:nth-child(3n){transform:rotate(-1deg);}
.song-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease;}
.song-tile:hover{transform:rotate(0deg) scale(1.04);z-index:2;}
.song-tile:hover img{transform:scale(1.08);}
.song-tile-label{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:0.82rem;
  opacity:0;transition:opacity 0.2s ease;
}
.song-tile:hover .song-tile-label{opacity:1;}
@media (max-width:900px){.songs-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.songs-grid{grid-template-columns:repeat(2,1fr);}
  .song-tile-label{opacity:1;font-size:0.7rem;}}

/* ---- karaoke overlay: estilo Spotify oscuro, con sidebar e imagen de fondo difuminada ---- */
.karaoke-overlay{background:#0a0a0a;}
.karaoke-overlay .game-overlay-bar{
  background:#111;border-bottom:1px solid rgba(255,255,255,0.12);
}
.karaoke-overlay .game-overlay-bar .btn{
  background:#1DB954;color:#000;border-color:#1DB954;
}
.karaoke-overlay .game-overlay-bar .btn:hover{background:#1ed760;}
.karaoke-overlay .game-overlay-tag{color:#1DB954;}
.karaoke-bg{
  position:fixed;inset:0;z-index:0;background-size:cover;background-position:center;
  filter:blur(60px) brightness(0.35) saturate(1.3);transform:scale(1.2);
  transition:background-image 0.6s ease;opacity:0.9;
}
.karaoke-layout{position:relative;z-index:1;display:flex;align-items:flex-start;min-height:calc(100svh - 37px);}
.karaoke-sidebar{
  width:220px;flex:none;padding:34px 18px;border-right:none;
  background:linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0.08));
  position:sticky;top:37px;align-self:flex-start;
  max-height:calc(100svh - 37px);overflow-y:auto;
}
.karaoke-sidebar-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  text-transform:uppercase;letter-spacing:1px;color:#8a8a8a;margin-bottom:14px;
}
.karaoke-sidebar-links{display:flex;flex-direction:column;gap:2px;}
.karaoke-sidebar-link{
  text-align:left;background:none;border:none;border-left:3px solid transparent;color:#b3b3b3;font-family:'Space Grotesk';
  font-size:0.9rem;padding:9px 10px 9px 12px;border-radius:0 6px 6px 0 !important;cursor:pointer;
  transition:background 0.15s ease,color 0.15s ease,border-color 0.15s ease;
}
.karaoke-sidebar-link:hover{background:rgba(255,255,255,0.08);color:#fff;border-left-color:rgba(255,255,255,0.3);}
.karaoke-sidebar-link.active{
  background:rgba(29,185,84,0.15);color:#1DB954;font-weight:700;border-left-color:#1DB954;
}
.karaoke-body{flex:1;min-width:0;max-width:820px;margin:0 auto;padding:40px 6vw 90px;color:#fff;}

.karaoke-stream-row{margin-bottom:24px;}
.karaoke-stream-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  text-transform:uppercase;letter-spacing:1px;color:#8a8a8a;margin-bottom:10px;
}
.karaoke-stream-icons{display:flex;flex-wrap:wrap;gap:10px;}
.karaoke-stream-icons .stream-link{
  background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.25);color:#fff;
}
.karaoke-stream-icons .stream-link:hover{background:rgba(255,255,255,0.14);}

.karaoke-player{margin-bottom:34px;border-radius:12px;overflow:hidden;}
.karaoke-player audio{width:100%;display:block;}
/* control de volumen propio: nada de la barrita nativa aburrida — botones redondos
   tipo consola y estrellitas que se van prendiendo, con un saltito chistoso al cambiar */
.karaoke-volume-fun{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;}
.kv-btn{
  width:36px;height:36px;flex:none;border-radius:50%;border:3px solid var(--ink);background:var(--paper);
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1.2rem;line-height:1;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);transition:transform 0.1s ease, box-shadow 0.1s ease;
}
.kv-btn:hover{background:var(--mustard);}
.kv-btn:active{transform:translateY(3px);box-shadow:none;}
.kv-stars{display:flex;gap:3px;}
.kv-star{
  font-size:1.5rem;line-height:1;color:#e4dcc6;
  transition:color 0.2s ease, transform 0.2s ease;
}
.kv-star::before{content:'★';}
.kv-star.filled{color:var(--mustard);text-shadow:1px 1px 0 var(--ink);}
.kv-star.pop{animation:kvStarPop 0.4s cubic-bezier(.34,1.6,.64,1);}
@keyframes kvStarPop{
  0%{transform:scale(1) rotate(0deg);}
  40%{transform:scale(1.6) rotate(-18deg);}
  70%{transform:scale(0.9) rotate(8deg);}
  100%{transform:scale(1) rotate(0deg);}
}
.karaoke-player iframe{display:block;}
.karaoke-player .btn{background:#1DB954;color:#000;border-color:#1DB954;}

.karaoke-head{display:flex;gap:26px;align-items:flex-end;margin-bottom:36px;flex-wrap:wrap;}
.karaoke-cover{
  width:190px;height:190px;object-fit:cover;flex:none;
  box-shadow:0 20px 60px rgba(0,0,0,0.7);animation:karaokeCoverIn 0.6s cubic-bezier(.2,.8,.2,1);
}
@keyframes karaokeCoverIn{0%{opacity:0;transform:translateY(20px) scale(0.95);}100%{opacity:1;transform:translateY(0) scale(1);}}
.karaoke-head-info h2{color:#fff;font-size:2.1rem;text-shadow:0 4px 30px rgba(0,0,0,0.6);}
.karaoke-credit{color:#b3b3b3;font-family:'Space Grotesk';margin-top:6px;}
.karaoke-controls{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap;}
.karaoke-controls .btn{background:#1DB954;color:#000;border-color:#1DB954;}
.karaoke-controls .btn.playing{background:#fff;border-color:#fff;}
.karaoke-note{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:#7a7a7a;max-width:340px;}

.karaoke-lyrics{font-family:'Space Grotesk';font-size:1.4rem;line-height:2.2;font-weight:700;}
.karaoke-line{
  color:rgba(255,255,255,0.28);padding:4px 0;transform-origin:left center;
  transition:color 0.5s ease, transform 0.5s cubic-bezier(.2,.8,.2,1), filter 0.5s ease, text-shadow 0.5s ease;
  filter:blur(0.4px);
}
.karaoke-line.active{
  color:#fff;transform:scale(1.16) translateX(8px);filter:blur(0);font-size:1.08em;
  text-shadow:0 0 24px rgba(29,185,84,0.55), 0 0 4px rgba(255,255,255,0.4);
}
.karaoke-line.blank{height:0.6em;}
@media (max-width:900px){
  .karaoke-sidebar{display:none;}
}
@media (max-width:600px){
  .karaoke-cover{width:120px;height:120px;}
  .karaoke-head-info h2{font-size:1.4rem;}
  .karaoke-lyrics{font-size:1.1rem;line-height:1.9;}
}
@media (max-width:900px){.merch-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.merch-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .merch-info h3{font-size:0.82rem;}
  .merch-info .price{font-size:0.78rem;}
  .merch-thumb{font-size:0.68rem;}}

.press-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.press-grid:has(> :only-child){grid-template-columns:1fr;max-width:600px;margin:0 auto;}
.videos-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.video-embed{border:var(--line) solid var(--ink);overflow:hidden;aspect-ratio:16/9;}
@media (max-width:700px){.videos-grid{grid-template-columns:1fr;gap:20px;}}
.press-card{
  border:var(--line) solid var(--ink);background:var(--paper);overflow:hidden;
}
.press-photo{aspect-ratio:16/9;overflow:hidden;}
.press-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.press-photo.wordmark{
  display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;
  font-family:'Anton',sans-serif;text-transform:uppercase;color:var(--paper);
  font-size:1.6rem;letter-spacing:0.5px;line-height:1.15;
}
.press-card-body{padding:26px;}
.press-source{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-family:'Anton';font-size:1.1rem;}
.press-source .dot{width:10px;height:10px;background:var(--red);border-radius:50%;}
.press-card h3{font-size:1.4rem;font-family:'Space Grotesk';font-weight:700;text-transform:none;margin-top:6px;}
.press-card p{margin-top:10px;font-size:0.95rem;line-height:1.55;opacity:0.85;}
.press-meta{font-family:'JetBrains Mono',monospace;font-size:0.72rem;opacity:0.6;margin-top:12px;}
@media (max-width:760px){.press-grid{grid-template-columns:1fr;}}
.press-ig-mention{margin-top:50px;}

.follow{background:var(--ink);color:var(--cream);border-radius:26px;text-align:center;padding:70px 6vw;margin-top:100px;}
#seguir{position:relative;}
.follow h2{font-size:clamp(2.2rem,6vw,4.2rem);color:var(--paper);margin-top:14px;line-height:1.05;}
.follow-links{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px;}
.follow-icon{width:18px;height:18px;flex:none;}
.follow-links a:nth-child(2n){transform:rotate(1.5deg);}
.follow-links a:nth-child(3n){transform:rotate(-2.5deg);}
.follow-links a:nth-child(5n){transform:rotate(2deg);}
.follow-contact{margin-top:30px;font-family:'Space Grotesk';font-size:0.95rem;opacity:0.85;}
.follow-contact a{color:var(--mustard);font-weight:700;text-decoration:underline;}

/* ---- detalles decorativos girando en Síguenos (aparecen solo con el glitch bien avanzado) ---- */
.retro-deco{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1;}
.retro-deco-item{
  position:absolute;width:60px;opacity:0;
  filter:drop-shadow(2px 3px 5px rgba(0,0,0,0.45));
  transition:opacity 0.7s ease;
}
body.glitch-high .retro-deco-item{opacity:0.92;animation:retroSpin linear infinite;}
body.no-motion .retro-deco-item{animation:none !important;}
@keyframes retroSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.retro-deco-1{top:2%;left:5%;width:52px;animation-duration:11s;}
.retro-deco-2{top:8%;right:7%;width:60px;animation-duration:9s;animation-direction:reverse;}
.retro-deco-3{bottom:8%;left:3%;width:96px;animation-duration:17s;}
.retro-deco-4{bottom:4%;right:5%;width:54px;animation-duration:13s;animation-direction:reverse;}
.retro-deco-5{top:42%;left:0.5%;width:48px;animation-duration:10s;}
.retro-deco-6{top:36%;right:1%;width:64px;height:64px;animation-duration:19s;}
.retro-deco-photo{border-radius:50% !important;object-fit:cover;height:60px;border:3px solid #4fd1ff;box-shadow:0 0 14px rgba(79,209,255,0.65) !important;}
@media (max-width:760px){
  .retro-deco-item{width:34px !important;}
  .retro-deco-photo{height:34px !important;}
}

/* ---- Síguenos: estilo consola vieja (PS2/PSP) + tubo CRT, en vez de mezcla XP ---- */
body.glitch-high .follow.retro-console-target{
  position:relative;overflow:visible;
  background:#ece9d8 !important;
  border:2px solid #0831d9 !important;border-radius:8px !important;
  box-shadow:6px 6px 0 rgba(0,20,120,0.5), inset 0 0 0 1px #fff !important;
  padding-top:46px !important;
}
body.glitch-high .follow.retro-console-target::before{
  content:'Los_Skeepers.exe — Síguenos';
  position:absolute;top:0;left:0;right:0;height:26px;z-index:4;
  background:linear-gradient(180deg,#4198fa 0%,#1a5ce0 15%,#0a3ea8 55%,#001c66 100%);
  color:#fff;font-family:Tahoma,'Segoe UI',sans-serif;font-size:0.72rem;font-weight:700;
  display:flex;align-items:center;padding:0 10px;letter-spacing:0.2px;
  border-radius:6px 6px 0 0;
}
body.glitch-high .follow.retro-console-target::after{
  content:'File  Edit  View  Favorites  Help';position:absolute;top:26px;left:0;right:0;height:20px;z-index:4;
  display:flex;align-items:center;color:#000;font-family:Tahoma,sans-serif;
  font-size:0.62rem;letter-spacing:1px;background:#ece9d8;padding:0 10px;
  border-bottom:1px solid #aca899;
}
body.glitch-high .follow.retro-console-target > *{position:relative;z-index:2;}
body.glitch-high .follow.retro-console-target h2{
  color:#0a3ea8 !important;text-shadow:none !important;font-family:Tahoma,'Segoe UI',sans-serif !important;
}
body.glitch-high .follow.retro-console-target .eyebrow{color:#0a3ea8 !important;}
body.glitch-high .follow.retro-console-target .follow-links .btn{
  background:linear-gradient(180deg,#fefefe 0%,#ece9d8 100%) !important;color:#000 !important;
  border:1px solid #716f64 !important;border-radius:3px !important;
  box-shadow:inset 1px 1px 0 #fff, 1px 1px 2px rgba(0,0,0,0.25) !important;
  text-transform:none !important;font-weight:400 !important;transform:none !important;
  font-family:Tahoma,'Segoe UI',sans-serif !important;
}
body.glitch-high .follow.retro-console-target .follow-contact{
  color:#333 !important;opacity:1 !important;font-family:Tahoma,'Segoe UI',sans-serif !important;
}
body.glitch-high .follow.retro-console-target .follow-contact a{color:#0a3ea8 !important;}

footer{
  text-align:center;padding:40px 6vw;font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;opacity:0.7;
}
footer img{width:22px;margin:0 auto 10px;}
footer .credit{margin-top:14px;}
footer .credit a{font-size:0.68rem;opacity:0.45;letter-spacing:0.5px;}
footer .credit a:hover{opacity:0.8;}
footer .footer-aside{margin-top:10px;font-size:0.66rem;opacity:0.35;}
.footer-secret-btn{
  margin-top:16px;background:none;border:none;font-family:'JetBrains Mono',monospace;
  font-size:0.62rem;color:var(--ink);opacity:0.22;cursor:pointer;letter-spacing:1px;
  transition:opacity 0.2s ease;animation:footerSecretFlicker 6s infinite;
  text-decoration:none;display:inline-block;
}
.footer-secret-btn:hover{opacity:0.6;animation:none;}
@keyframes footerSecretFlicker{
  0%, 91%, 100%{opacity:0.22;}
  92%{opacity:0.05;}
  93%{opacity:0.4;}
  94%{opacity:0.1;}
}

/* ---- member overlay (acts like "another page") ---- */
.member-overlay{
  position:fixed;inset:0;z-index:500;background:var(--cream);
  transform:translateY(100%);transition:transform 0.45s cubic-bezier(.65,0,.35,1);
  display:flex;
}
.member-overlay.open{transform:translateY(0);}
.member-sidebar{
  width:150px;flex:none;background:var(--ink);
  padding:76px 12px 20px;overflow-y:auto;
  display:flex;flex-direction:column;
}
.member-sidebar-links{display:flex;flex-direction:column;gap:6px;}
.member-scroll{flex:1;overflow-y:auto;overflow-x:hidden;height:100%;min-width:0;}
.member-sidebar-link{
  display:block;padding:10px 12px;font-family:'JetBrains Mono',monospace;font-size:0.76rem;
  text-transform:uppercase;letter-spacing:0.5px;color:var(--paper);opacity:0.55;
  border:1px solid transparent;border-radius:6px;transition:all 0.15s ease;white-space:nowrap;
}
.member-sidebar-link:hover{opacity:1;border-color:rgba(255,253,246,0.3);}
.member-sidebar-link.active{background:var(--mustard);color:var(--ink);opacity:1;font-weight:700;}
@media (max-width:700px){
  .member-overlay{flex-direction:column;}
  .member-sidebar{
    width:100%;flex-direction:row;overflow-x:auto;overflow-y:visible;
    padding:68px 10px 10px;
  }
  .member-sidebar-links{flex-direction:row;gap:8px;}
  .member-scroll{flex:1;}
}
.member-hero{
  position:relative;min-height:50vh;display:flex;align-items:flex-end;
  background:var(--ink);overflow:hidden;
}
.member-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.5;}
.member-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,21,18,0.1),rgba(25,21,18,0.92));}
.member-hero-content{position:relative;z-index:2;padding:60px 6vw;color:var(--paper);}
.member-hero-content h1{font-size:clamp(3rem,10vw,7rem);color:var(--paper);-webkit-text-stroke:2px var(--ink);}
.member-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.member-deco-item{position:absolute;opacity:0.85;filter:drop-shadow(2px 3px 5px rgba(0,0,0,0.5));animation:memberDecoSpin linear infinite;height:auto;}
@keyframes memberDecoSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
body.no-motion .member-deco-item{animation:none !important;}
.member-deco-1{top:10%;right:6%;width:56px;animation-duration:10s;}
.member-deco-2{bottom:8%;right:14%;width:70px;animation-duration:14s;animation-direction:reverse;}
.member-deco-3{top:14%;left:4%;width:60px;animation-duration:12s;}
.member-deco-4{bottom:12%;left:10%;width:44px;animation-duration:9s;animation-direction:reverse;}
@media (max-width:700px){.member-deco-item{width:30px !important;max-width:30px !important;height:auto !important;}}
.member-close{
  position:fixed;top:20px;left:20px;z-index:510;
}
.member-body{
  max-width:1020px;margin:0 auto;padding:60px 6vw 70px;
  display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;align-items:start;
}
.member-info{position:relative;min-width:0;}
.member-side-deco{
  position:fixed;top:64%;transform:translateY(-50%);width:130px;z-index:501;
  pointer-events:none;opacity:0.85;filter:drop-shadow(3px 4px 8px rgba(0,0,0,0.4));
}
.member-side-deco-left{left:calc(50% - 620px);transform:translateY(-50%) rotate(-4deg);}
.member-side-deco-right{right:calc(50% - 620px);transform:translateY(-50%) rotate(4deg);}
@media (max-width:1300px){.member-side-deco{display:none;}}
.member-info p{font-size:1.1rem;line-height:1.7;}
.member-lore{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;}
.member-lore-item{
  background:var(--paper);border:var(--line) solid var(--ink);padding:14px 16px;
  box-shadow:4px 4px 0 var(--ink);
}
.member-lore-item.wide{grid-column:1 / -1;}
.member-lore-item .lore-label{
  display:block;font-family:'JetBrains Mono',monospace;font-size:0.7rem;
  text-transform:uppercase;letter-spacing:1px;color:var(--red);font-weight:700;margin-bottom:4px;
}
.member-lore-item .lore-value{font-family:'Space Grotesk';font-size:0.98rem;line-height:1.4;}
.member-playlist-wrap{position:relative;min-width:0;}

/* ---- slider playlist / chat dentro de la columna derecha ---- */
.member-widget-toggle{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.widget-toggle-btn{
  font-family:'Space Grotesk';font-weight:700;font-size:0.85rem;
  background:var(--paper);border:var(--line) solid var(--ink);
  padding:8px 16px;cursor:pointer;transition:background 0.15s ease,color 0.15s ease;
}
.widget-toggle-btn.active{background:var(--ink);color:var(--cream);}
.member-widget-slider{overflow:hidden;min-width:0;}
.member-widget-track{display:flex;width:200%;transition:transform 0.45s cubic-bezier(.4,0,.2,1);}
.member-widget-track.show-chat{transform:translateX(-50%);}
.member-widget-panel{width:50%;flex:none;min-width:0;}

/* ---- chat estilo WhatsApp con cada integrante ---- */
.wa-wrap{
  border-radius:12px !important;overflow:hidden;background:#e5ddd5;
  border:var(--line) solid var(--ink);box-shadow:0 10px 30px rgba(0,0,0,0.18);
}
.wa-header{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:#f0f0f0;border-bottom:1px solid rgba(0,0,0,0.1);
}
.wa-avatar{width:40px;height:40px;border-radius:50% !important;object-fit:cover;flex:none;background:#ccc;}
.wa-header-info{flex:1;display:flex;flex-direction:column;min-width:0;}
.wa-header-name{font-family:'Space Grotesk';font-weight:700;font-size:0.95rem;color:#111;}
.wa-header-status{font-family:'Space Grotesk';font-size:0.75rem;color:#667781;}
.wa-header-icons{display:flex;gap:14px;color:#54656f;flex:none;}
.wa-header-icons svg{width:19px;height:19px;}
.wa-body{
  height:440px;overflow-y:auto;padding:16px 12px;
  background-color:#e5ddd5;
  background-image:url('../assets/whatsapp-bg.png');
  background-size:320px auto;background-repeat:repeat;
  display:flex;flex-direction:column;gap:4px;
}
.wa-msg{display:flex;}
.wa-msg-them{justify-content:flex-start;}
.wa-msg-me{justify-content:flex-end;}
.wa-bubble{
  max-width:78%;padding:7px 9px 8px 10px;border-radius:8px !important;
  font-family:'Space Grotesk';font-size:0.88rem;line-height:1.35;position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,0.12);
}
.wa-msg-them .wa-bubble{background:#fff;color:#111;border-top-left-radius:2px !important;}
.wa-msg-me .wa-bubble{background:#d9fdd3;color:#111;border-top-right-radius:2px !important;}
.wa-time{
  display:inline-flex;align-items:center;gap:3px;font-size:0.65rem;color:#667781;
  float:right;margin:6px 0 -3px 8px;
}
.wa-time svg{width:14px;height:14px;color:#53bdeb;}
.wa-typing-bubble{display:flex;align-items:center;gap:4px;padding:11px 12px;}
.wa-typing-bubble span{
  width:6px;height:6px;border-radius:50% !important;background:#9aa3a8;
  animation:waTypingBounce 1.1s infinite ease-in-out;
}
.wa-typing-bubble span:nth-child(2){animation-delay:0.15s;}
.wa-typing-bubble span:nth-child(3){animation-delay:0.3s;}
@keyframes waTypingBounce{0%,60%,100%{transform:translateY(0);opacity:0.5;}30%{transform:translateY(-4px);opacity:1;}}
.wa-audio-bubble{display:flex;align-items:center;gap:8px;min-width:210px;}
.wa-audio-play{
  width:34px;height:34px;border-radius:50% !important;background:#25d366;border:none;
  color:#fff;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.85rem;
}
.wa-audio-play svg{width:16px;height:16px;}
.wa-audio-wave{flex:1;display:flex;align-items:center;gap:2px;height:22px;overflow:hidden;position:relative;}
.wa-audio-wave span{width:2.5px;background:#b0b8bb;border-radius:2px !important;flex:none;}
.wa-audio-wave .wa-audio-fill{
  position:absolute;inset:0;display:flex;align-items:center;gap:2px;width:0%;overflow:hidden;
}
.wa-audio-wave .wa-audio-fill span{background:#25d366;}
.wa-audio-duration{font-size:0.7rem;color:#667781;flex:none;font-family:'JetBrains Mono',monospace;}
.wa-sticker{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.25));}
.wa-input-row{
  display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f0f0f0;
  border-top:1px solid rgba(0,0,0,0.1);
}
.wa-input{
  flex:1;min-width:0;border:none;border-radius:20px !important;padding:10px 16px;
  font-family:'Space Grotesk';font-size:0.88rem;background:#fff;color:#111;
}
.wa-input:focus{outline:2px solid #25d366;outline-offset:1px;}
.wa-send-btn{
  width:38px;height:38px;border-radius:50% !important;background:#25d366;border:none;
  color:#fff;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.wa-send-btn svg{width:18px;height:18px;}
.wa-send-btn:disabled{opacity:0.5;cursor:default;}
@media (max-width:600px){.wa-wrap{max-width:100%;}}
.member-playlist-note{
  font-family:'Space Grotesk';font-size:0.85rem;font-style:italic;
  color:var(--ink);opacity:0.6;margin-bottom:10px;
}
.member-playlist{border-radius:18px;overflow:hidden;position:sticky;top:20px;}
.member-playlist iframe{width:100%;border:none;display:block;}
@media (max-width:800px){
  .member-body{grid-template-columns:1fr;}
  .member-lore{grid-template-columns:1fr;}
  .member-playlist{position:static;}
}

/* ---- game overlay: cada minijuego "vive en otra pestaña" navegable, con botón de volver ---- */
.game-overlay{
  position:fixed;inset:0;z-index:520;background:var(--cream);
  transform:translateY(100%);transition:transform 0.45s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;
}
.game-overlay.open{transform:translateY(0);}
.game-overlay:has(#game-slot-codigos.active){background:#000;}
.game-overlay-bar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 6vw;background:var(--paper);border-bottom:var(--line) solid var(--ink);
}
.btn.small.game-back{
  transform:none;box-shadow:none;border-width:1px;border-color:var(--ink);
  background:var(--red);color:var(--cream);
  font-size:1rem;font-weight:700;padding:7px 13px;letter-spacing:0;line-height:1;
}
.btn.small.game-back:hover{transform:none;box-shadow:none;opacity:0.85;}
#game-overlay .game-overlay-bar{
  background:transparent;border-bottom:none;padding:3px 6vw 3px 16px;
}
.game-overlay-tag{font-size:0.7rem;}
.game-overlay-body{max-width:900px;margin:0 auto;padding:44px 6vw 90px;}
.game-slot{display:none;}
.game-slot.active{display:block;}

/* ---- ATRAPA AL SKEEPER: snake con los 6 en fila, tamaño fijo (no se ajusta a la pantalla) ---- */
#game-slot-atrapa.game-slot{
  /* libera el juego del max-width:900px de .game-overlay-body para que se vea grande de
     verdad — calc(50% - 50vw) compensa el auto-centrado del padre, no solo su padding */
  margin-top:-44px;
  margin-bottom:-90px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:none;
  padding:44px 0 90px;
}
#game-slot-corre.game-slot{
  /* mismo problema, mismo arreglo: sin esto quedaba metido en el contenedor angosto de 900px */
  margin-top:-44px;
  margin-bottom:-90px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:none;
  padding:44px 0 90px;
}
#game-slot-codigos.game-slot.active{
  position:relative;
  margin-top:-44px;
  margin-bottom:-90px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
  max-width:none;
  min-height:100vh;
  padding:60px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 640px 460px at 50% 38%, rgba(255,248,225,0.16), transparent 70%),
    #000;
}
.scg-bg-words{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.scg-bg-words span{
  position:absolute;font-family:'JetBrains Mono',monospace;font-size:0.85rem;
  color:#fff;letter-spacing:1px;white-space:nowrap;
}
.scg-bg-mask{
  position:absolute;inset:0;background:#000;pointer-events:none;z-index:2;
  -webkit-mask-image:radial-gradient(circle 55px at var(--bx,-999px) var(--by,-999px), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
  mask-image:radial-gradient(circle 55px at var(--bx,-999px) var(--by,-999px), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%);
  -webkit-mask-mode:alpha;mask-mode:alpha;
}
.scg-bg-light{
  position:absolute;width:110px;height:110px;border-radius:50%;z-index:3;pointer-events:none;
  left:var(--bx,-999px);top:var(--by,-999px);transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.18) 40%, transparent 72%);
}
.atrapa-wrap{
  font-family:'Press Start 2P',monospace;
  max-width:min(1400px, 92vw);margin:0 auto;
}
.atrapa-main-row{display:flex;gap:8px;align-items:stretch;}
.atrapa-sidebar{
  flex:0 0 auto;width:92px;display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;gap:12px;padding:12px 8px;font-size:0.62rem;color:var(--cream);
  background:var(--ink);text-align:center;line-height:1.6;
}
.atrapa-mute{background:var(--paper);border:3px solid var(--ink);width:34px;height:34px;cursor:pointer;font-family:inherit;font-size:0.85rem;line-height:1;}
.atrapa-mute:active{background:var(--mustard);}
.atrapa-frame{
  position:relative;padding:8px;flex:1;min-width:0;
  background:var(--ink);
}
.atrapa-canvas-wrap{position:relative;width:100%;overflow:hidden;background:#000;}
#atrapa-canvas,
#corre-canvas{width:100%;height:auto;display:block;image-rendering:pixelated;image-rendering:crisp-edges;}
.atrapa-overlay-screen{
  position:absolute;inset:0;background:rgba(25,21,18,0.93);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:18px;padding:24px;overflow-y:auto;
}
.atrapa-overlay-screen h3{font-family:'Press Start 2P',monospace;font-size:clamp(0.85rem,3.4vw,1.15rem);color:var(--mustard);line-height:1.7;}
.atrapa-overlay-screen p{font-family:'Press Start 2P',monospace;font-size:0.62rem;line-height:2.1;letter-spacing:0.02em;}
.atrapa-overlay-screen .btn{font-family:'Press Start 2P',monospace;font-size:0.6rem;line-height:1.6;padding:14px 16px;}
.atrapa-select-row{display:flex;align-items:center;gap:14px;}
.atrapa-select-arrow{
  font-family:'Press Start 2P',monospace;background:var(--paper);border:3px solid var(--mustard);
  color:var(--ink);width:38px;height:38px;cursor:pointer;font-size:1.1rem;flex:0 0 auto;
}
.atrapa-select-arrow:active{background:var(--mustard);}
.atrapa-select-portrait-wrap{
  width:140px;height:170px;display:flex;align-items:flex-end;justify-content:center;
  cursor:pointer;
}
.atrapa-select-portrait-wrap img,
.atrapa-select-portrait-wrap canvas{max-height:170px;max-width:100%;image-rendering:pixelated;image-rendering:crisp-edges;}
#atrapa-select-name{letter-spacing:0.05em;}
#atrapa-select-desc{max-width:280px;min-height:3.2em;display:flex;align-items:center;justify-content:center;}
.atrapa-touch{
  display:none;align-items:center;justify-content:center;gap:28px;margin:16px auto 0;
}
.dpad{
  display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);
  filter:drop-shadow(0 3px 0 #000);
}
.dpad button{
  font-family:'Press Start 2P',monospace;background:#1c1c1f;border:none;
  color:var(--cream);cursor:pointer;font-size:1.05rem;
}
.dpad button:active{background:var(--mustard);color:var(--ink);}
.dpad button[data-dir="up"]{grid-column:2;grid-row:1;border-radius:14px 14px 0 0;} /* arriba */
.dpad button[data-dir="left"]{grid-column:1;grid-row:2;border-radius:14px 0 0 14px;} /* izquierda */
.dpad button[data-dir="right"]{grid-column:3;grid-row:2;border-radius:0 14px 14px 0;} /* derecha */
.dpad button[data-dir="down"]{grid-column:2;grid-row:3;border-radius:0 0 14px 14px;} /* abajo */
.dpad-center{grid-column:2;grid-row:2;background:#1c1c1f;pointer-events:none;}
.ab-cluster{position:relative;width:96px;height:96px;flex:none;}
.ab-cluster button{
  position:absolute;width:50px;height:50px;border-radius:50%;
  font-family:'Press Start 2P',monospace;font-size:1rem;border:3px solid var(--ink);
  cursor:pointer;box-shadow:0 3px 0 var(--ink);color:var(--ink);
  transition:transform 0.08s ease, box-shadow 0.08s ease;
}
.ab-cluster button:active{transform:translateY(3px);box-shadow:none;}
.ab-cluster .btn-b{background:var(--mustard);left:0;bottom:0;}
.ab-cluster .btn-a{background:var(--red);color:var(--cream);right:0;top:0;}
@media (max-width:820px){
  /* estilo consola: la pantalla arriba, los botones abajo */
  .atrapa-touch{display:flex;}
}
@media (max-width:700px){
  /* en celular el juego tiene que verse lo más grande posible: la barra de
     puntaje/mute pasa a ser una franja angosta arriba, no una columna que le
     come ancho al juego, y los controles quedan abajo de todo */
  .atrapa-main-row{flex-direction:column;}
  .atrapa-sidebar{
    width:100%;flex-direction:row;justify-content:space-between;
    padding:8px 14px;gap:8px;
  }
  /* BUG: en celular la pantalla de selección de personaje (retrato + flechas +
     nombre + descripción + botón "Elegir y empezar") mide más alto que el
     recuadro del juego (el ancho manda porque el canvas define el aspect
     ratio), así que el botón para confirmar quedaba fuera de la vista y solo
     se llegaba a él haciendo scroll DENTRO del recuadro negro — nada indicaba
     que eso se podía scrollear. Se achica todo para que entre sin scroll. */
  .atrapa-overlay-screen{gap:6px;padding:10px;}
  .atrapa-select-portrait-wrap{width:80px;height:80px;}
  .atrapa-overlay-screen h3{line-height:1.2;margin:0;}
  .atrapa-overlay-screen p{line-height:1.4;min-height:0;}
  .atrapa-overlay-screen .btn{padding:8px 12px;}
  #atrapa-select-desc,#corre-select-desc{min-height:0;}
  /* los botones para jugar (dpad + A/B) quedaban muy pegados a la pantalla
     del juego en celular — les damos más aire abajo de todo */
  .atrapa-touch{margin-top:28px;margin-bottom:10px;}
}
@media (max-width:380px){
  .dpad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);}
  .ab-cluster{width:80px;height:80px;}
  .ab-cluster button{width:42px;height:42px;}
}
@media (max-width:600px){
  .game-overlay-bar{padding:14px 5vw;}
  #shop-back, #shop-detail-cart-btn{font-size:0.66rem;padding:8px 10px;}
  .shop-detail-photo-wrap{width:100%;}
}

/* ---- contenido exclusivo: botón secreto + overlay glitch ---- */
.secret-cta{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:36px 0 6px;height:400px;justify-content:center;
}
.onlyfans-title{cursor:default;}
.onlyfans-title span{display:inline-block;transition:color 0.2s ease;}
.onlyfans-title:hover span:nth-child(1){transition-delay:0s;}
.onlyfans-title:hover span:nth-child(2){transition-delay:0.06s;}
.onlyfans-title:hover span:nth-child(3){transition-delay:0.12s;}
.onlyfans-title:hover span:nth-child(4){transition-delay:0.18s;}
.onlyfans-title:hover span:nth-child(5){transition-delay:0.24s;}
.onlyfans-title:hover span:nth-child(6){transition-delay:0.3s;}
.onlyfans-title:hover span:nth-child(7){transition-delay:0.36s;}
.onlyfans-title:hover span:nth-child(8){transition-delay:0.42s;}
.onlyfans-title:hover span{color:var(--red);}
.onlyfans-eyebrow{display:block;text-align:center;width:100%;}
.onlyfans-title{font-size:clamp(3rem,8vw,6.5rem) !important;white-space:nowrap;position:relative;z-index:3;}
.onlyfans-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:20px;}
.onlyfans-fire{width:90px;height:auto;opacity:0;transform:scale(0.5);transition:opacity 0.35s ease, transform 0.35s ease;pointer-events:none;}
.onlyfans-fire.lit{opacity:1;transform:scale(1);}
@media (max-width:600px){
  .onlyfans-fire{width:52px;}
  .onlyfans-wrap{flex-direction:column;width:auto;gap:10px;}
  .onlyfans-title{font-size:clamp(2.1rem, 11vw, 4rem) !important;}
}
.secret-star-btn{
  background:none;border:none;cursor:pointer;padding:0;line-height:0;
  position:absolute;left:50%;top:110px;transform:translate(-50%,-50%);
  transition:left 0.35s cubic-bezier(.34,1.56,.64,1), top 0.35s cubic-bezier(.34,1.56,.64,1), transform 0.2s ease;
}
.secret-star-btn:hover{transform:translate(-50%,-50%) scale(1.08);}
.secret-star-btn.dodging{transform:translate(-50%,-50%) scale(0.92) rotate(-10deg);}
.secret-star-btn:active{transform:translate(-50%,-50%) scale(0.94);}
.secret-star-img{
  width:120px;height:120px;display:block;
  filter:drop-shadow(4px 4px 0 var(--red));
  animation:secretStarSpin 6s linear infinite;
}
.secret-star-btn:hover .secret-star-img{animation-duration:1.4s;}
@keyframes secretStarSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.secret-star-caption{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;font-size:0.82rem;text-align:center;
  max-width:280px;color:var(--ink);opacity:0.75;transition:opacity 0.15s ease;
}
.secret-star-caption span{display:block;font-weight:700;color:var(--red);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px;}
@media (max-width:600px){.secret-star-img{width:92px;height:92px;}}

.secret-star-clone{
  background:none;border:none;cursor:pointer;padding:0;line-height:0;
  position:absolute;transform:translate(-50%,-50%);z-index:1;
}
.secret-star-clone img{width:120px;height:120px;display:block;filter:drop-shadow(4px 4px 0 var(--red));animation:secretStarSpin 5s linear infinite;}
.secret-star-clone.exploding{animation:starExplode 0.38s ease forwards;}
@keyframes starExplode{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1;}
  50%{transform:translate(-50%,-50%) scale(1.5) rotate(25deg);opacity:0.7;}
  100%{transform:translate(-50%,-50%) scale(0.2) rotate(60deg);opacity:0;}
}
.secret-star-celebrate{
  position:absolute;width:34px;pointer-events:none;z-index:3;
  animation:starCelebrate 1.2s ease-out forwards;
}
@keyframes starCelebrate{
  0%{transform:translateY(0) scale(0.3) rotate(0deg);opacity:0;}
  15%{opacity:1;}
  100%{transform:translateY(-140px) scale(1.1) rotate(200deg);opacity:0;}
}

.secret-overlay{
  position:fixed;inset:0;z-index:600;background:#000;
  display:flex;align-items:center;justify-content:center;padding:8vw;
  opacity:0;pointer-events:none;transition:opacity 0.3s ease;
}
.secret-overlay.open{opacity:1;pointer-events:auto;}
.secret-overlay.glitching{animation:secretGlitchBg 0.65s steps(2,end) both;}
@keyframes secretGlitchBg{
  0%{filter:none;transform:none;}
  10%{filter:invert(1) hue-rotate(90deg);}
  22%{filter:contrast(3) brightness(0.6);transform:translate(6px,0);}
  34%{filter:none;transform:translate(-6px,0);}
  46%{filter:invert(1);transform:translate(4px,-2px);}
  58%{filter:contrast(2) saturate(0);transform:translate(-4px,2px);}
  70%{filter:none;transform:translate(3px,0);}
  82%{filter:hue-rotate(180deg);transform:none;}
  100%{filter:none;transform:none;}
}
.secret-content{max-width:460px;text-align:center;}
.secret-side-photo{
  position:absolute;top:50%;width:min(30vw, 380px);
  filter:contrast(1.1);border:none;
  transform:translateY(-50%);opacity:0;transition:opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}
.secret-side-left{left:1vw;transform:translateY(-50%) translateX(-40px) rotate(-4deg);}
.secret-side-right{right:1vw;transform:translateY(-50%) translateX(40px) rotate(4deg);}
.secret-overlay.open .secret-side-photo{opacity:0.85;}
.secret-overlay.open .secret-side-left{transform:translateY(-50%) translateX(0) rotate(-4deg);}
.secret-overlay.open .secret-side-right{transform:translateY(-50%) translateX(0) rotate(4deg);}
@media (max-width:900px){.secret-side-photo{display:none;}}
.secret-content .eyebrow{color:var(--mustard);}
.secret-content h2{color:var(--paper);font-size:clamp(1.7rem,5vw,2.8rem);margin-top:10px;-webkit-text-stroke:1px var(--red);}
.secret-content p{margin-top:16px;color:var(--paper);opacity:0.8;line-height:1.6;}
.secret-form{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
/* honeypot anti-spam: invisible para una persona real, un bot simple sí lo
   llena porque no distingue — si llega lleno, el backend lo descarta */
.secret-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.secret-form input[type="email"]{
  font-family:'JetBrains Mono',monospace;padding:16px 18px;border:var(--line) solid var(--paper);
  background:transparent;color:var(--paper);font-size:1rem;caret-color:var(--mustard);
}
.secret-form input[type="email"]::placeholder{color:rgba(255,253,246,0.5);}
.secret-form .btn{justify-content:center;}
.secret-close{position:absolute;top:20px;left:20px;}
.secret-thanks{display:none;margin-top:24px;color:var(--paper);}
.secret-thanks.show{display:block;}
@media (max-width:600px){
  .secret-content h2{font-size:2rem;}
}

/* ---- mobile polish pass ---- */
@media (max-width:600px){
  section{padding:64px 5vw;}
  .nav{padding:12px 16px;}
  .nav-logo{font-size:1.05rem;gap:7px;}
  .nav-logo img{width:22px;}
  .hero-content{padding:0 14px;}
  .hero-sub{font-size:0.85rem;}
  .marquee-track span{font-size:0.85rem;margin:0 14px;}
  .marquee-wrap,.merch-ticker{padding:9px 0;}
  .discog-row{padding:11px 14px;gap:12px;}
  .discog-cover{width:42px;height:42px;}
  .discog-title b{font-size:0.88rem;}
  .discog-num{width:16px;font-size:0.78rem;}
  .discog-time{font-size:0.72rem;}
  .countdown-band{padding:32px 5vw;gap:20px;justify-content:flex-start;}
  .countdown-label h3{font-size:1.3rem;}
  .countdown-unit{padding:10px 12px;min-width:64px;}
  .countdown-unit b{font-size:1.5rem;}
  .press-photo{aspect-ratio:4/3;}
  .press-card-body{padding:18px;}
  .about-photo::before{font-size:2rem;top:-16px;right:-8px;}
  .follow{padding:44px 5vw;border-radius:0;}
  .side-star{opacity:0.6;}
}
@media (max-width:400px){
  .hero-title{font-size:2.6rem;}
  .nav-links{padding:16px 20px;}
}

/* ---- disable the fixed/sticky hero on mobile: mobile browsers resize their
   address bar during scroll, which makes every fixed-position element on the
   page (nav, side-star, shop button) jitter. Plain scrolling hero avoids this. ---- */
@media (max-width:820px){
  .hero{position:relative !important;height:100svh;min-height:520px;}
  .page-content{margin-top:0 !important;}
  .side-star{position:absolute !important;right:6px !important;}
  /* content fades in unpredictably on short mobile scrolls; just show it */
  .reveal, .reveal-stagger, .reveal-stagger > *{opacity:1 !important;transform:none !important;}
  /* keep nothing poking past the viewport edge (avoids a few px of horizontal drift) */
  html, body{width:100%;overflow-x:hidden;}
}

/* ---- SHARP CORNERS: override every rounded edge in the system ---- */
*{border-radius:0 !important;}

/* ---- countdown ---- */
.countdown-band{
  background:var(--mustard);border-top:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);
  padding:50px 6vw;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px;
  width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-top:50px;
}
.countdown-label{transform:rotate(-2deg);}
.countdown-label .eyebrow{color:var(--ink);}
.countdown-label h3{font-size:clamp(1.6rem,4vw,2.6rem);}
.countdown-units{display:flex;gap:18px;flex-wrap:wrap;}
.countdown-unit{
  background:var(--ink);color:var(--cream);border:var(--line) solid var(--ink);
  padding:16px 20px;min-width:86px;text-align:center;
}
.countdown-unit:nth-child(2){transform:rotate(2deg);}
.countdown-unit:nth-child(3){transform:rotate(-2deg);}
.countdown-unit b{display:block;font-family:'Anton';font-size:2.2rem;}
.countdown-unit span{font-family:'JetBrains Mono',monospace;font-size:0.65rem;text-transform:uppercase;letter-spacing:1px;}

/* ---- glitch title ---- */
.hero-title{position:relative;}
.hero-title:hover{animation:glitch 0.4s steps(2) infinite;}
@keyframes glitch{
  0%{text-shadow:3px 0 var(--red), -3px 0 var(--forest);}
  50%{text-shadow:-3px 0 var(--red), 3px 0 var(--forest);}
  100%{text-shadow:3px 0 var(--red), -3px 0 var(--forest);}
}
.section-head h2{transition:letter-spacing 0.3s ease;}
.section-head h2:hover{letter-spacing:2px;}

/* ---- hover tilts on cards ---- */
.show-card, .merch-card, .press-card{transition:transform 0.3s ease, box-shadow 0.3s ease;}
.show-card:hover{transform:rotate(-1.5deg) translateY(-4px);box-shadow:6px 6px 0 var(--ink);}
.merch-card:hover{transform:rotate(1.5deg) translateY(-4px);}
.press-card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--ink);}
.member-card:hover{transform:rotate(-2deg) scale(1.02);}

/* ---- stagger reveal children ---- */
.shows-grid.reveal-stagger > *, .merch-grid.reveal-stagger > *, .members-grid.reveal-stagger > * {
  opacity:0;transform:translateY(24px) rotate(0deg);transition:opacity 0.6s ease, transform 0.6s ease;
}
.shows-grid.reveal-stagger.in > *, .merch-grid.reveal-stagger.in > *, .members-grid.reveal-stagger.in > *{
  opacity:1;transform:translateY(0);
}

/* ---- more diagonal placement ---- */
.section-head{transform:rotate(-0.6deg);}
.press-source{transform:rotate(-1deg);}
.show-meta .eyebrow{display:inline-block;transform:rotate(-2deg);}
.merch-info h3{transform:rotate(-0.4deg);}
.stat:nth-child(2){transform:rotate(2deg);}
.stat:nth-child(3){transform:rotate(-2deg);}

.page-content{position:relative;z-index:2;background:var(--cream);margin-top:100svh;}

/* ==== CINTAS PERDIDAS: ventana secreta estilo TV/VHS vieja ==== */
.cintas-overlay{
  position:fixed;inset:0;z-index:530;background:#202020;color:var(--paper);
  transform:translateY(100%);transition:transform .45s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;visibility:hidden;
}
.cintas-overlay.open{transform:translateY(0);visibility:visible;}
.cintas-overlay-bar{
  position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;
  padding:3px 6vw 3px 16px;background:rgba(20,20,20,.88);backdrop-filter:blur(6px);
}
.cintas-overlay .cintas-close{transform:none;box-shadow:none;border-width:1px;border-color:var(--paper);background:var(--red);color:var(--cream);font-size:1rem;font-weight:700;padding:7px 13px;line-height:1;}
.cintas-overlay .cintas-close:hover{transform:none;box-shadow:none;opacity:.85;}
.cintas-overlay-content{position:relative;min-height:calc(100svh - 42px);overflow:hidden;padding:72px 6vw 90px;}
.cintas-bg{position:absolute;inset:0;z-index:0;}
.cintas-bg-static{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity 0.7s ease;}
.cintas-bg-static.is-dimmed{opacity:0.55;}
.cintas-bg-ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0.8s ease;}
.cintas-bg-ghost.is-visible{opacity:0.45;}
.cintas-bg-shade{position:absolute;inset:0;background:rgba(20,20,20,0.55);}

.cintas-tv-wrap{max-width:560px;margin:0 auto;}
.cintas-tv{
  position:relative;padding:18px 26px 28px;
  background:linear-gradient(150deg,#aeb1b0 0%,#747876 46%,#aeb1ae 73%,#6e716f 100%);
  border:2px solid #c8cac7;border-radius:11px 11px 17px 17px;
  clip-path:polygon(3% 0,97% 0,100% 85%,96% 100%,4% 100%,0 85%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.65),inset 0 -7px 8px rgba(0,0,0,.22),0 24px 38px rgba(0,0,0,.58);
}
.cintas-tv-topline{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;
  font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:1.5px;color:#303331;
}
.cintas-tv-led{width:8px;height:8px;border-radius:50%;background:#6bff8a;box-shadow:0 0 6px #6bff8a;display:inline-block;}

/* pantalla: bisel grueso + doble aro (oscuro pegado al tubo, claro alrededor) + curvatura simulada */
.cintas-screen{
  position:relative;width:100%;aspect-ratio:4/3;
  background:#0a0a0a;
  border:28px solid #202220;
  outline:5px solid #5b5e5c;outline-offset:0;
  border-radius:10% 10% 13% 13% / 9% 9% 12% 12%;
  overflow:hidden;
  box-shadow:inset 0 3px 8px rgba(255,255,255,.15),inset 0 0 0 3px #050505,0 2px 0 rgba(255,255,255,.25);
}
.cintas-screen-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cintas-screen-glitch{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;}
.cintas-screen-scan{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.3) 0px,rgba(0,0,0,0.3) 1px,transparent 1px,transparent 3px);
}
/* curvatura tipo tubo: viñeta fuerte en las esquinas + brillo curvo arriba */
.cintas-screen-curve{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 65px 21px rgba(0,0,0,.82);
  background:radial-gradient(ellipse 130% 80% at 50% -14%,rgba(255,255,255,.28),transparent 50%),radial-gradient(ellipse 105% 110% at 50% 50%,transparent 58%,rgba(0,0,0,.5) 100%);
}
.cintas-screen-label{
  position:absolute;bottom:10px;left:14px;z-index:4;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:0.68rem;color:var(--mustard);text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.cintas-screen-time{
  position:absolute;bottom:10px;right:14px;z-index:4;font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;color:#f2f2f2;text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.cintas-mute-btn{
  position:absolute;top:10px;right:10px;z-index:4;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.4);background:rgba(0,0,0,0.45);color:#f2f2f2;font-size:0.85rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}

/* panel inferior: bocina + jacks + botones, como un "mentón" angulado */
.cintas-tv-panel{
  display:flex;align-items:center;gap:10px;margin:15px -12px -8px;padding:10px 18px 13px;
  background:linear-gradient(180deg,#9da09e,#747876);border:1px solid rgba(30,32,31,.5);
  border-radius:0 0 18px 18px;box-shadow:inset 0 1px rgba(255,255,255,.4),0 -1px rgba(0,0,0,.35);
}
.cintas-speaker{width:86px;height:28px;display:grid;grid-template-columns:repeat(8,5px);grid-auto-rows:5px;gap:2px;flex:none;padding:4px 8px;border-radius:0 0 0 11px;background:linear-gradient(135deg,#565a57,#2f3230);transform:skewX(-16deg);}
.cintas-speaker span{background:#151716;border-radius:50%;box-shadow:0 1px rgba(255,255,255,.12);}
.cintas-jacks{display:flex;gap:5px;flex:none;padding:4px 7px;border:1px solid rgba(30,30,30,.45);border-radius:9px;background:#888b89;}
.cintas-jack{width:8px;height:8px;border-radius:50%;border:1px solid #333;background:#292b29;box-shadow:inset 0 1px 1px #bbb;}
.cintas-jack-y{background:#e8c93f;}
.cintas-jack-w{background:#eee;}
.cintas-jack-r{background:#c0392b;}
.cintas-ch-buttons{display:flex;align-items:center;gap:5px;flex:none;margin-left:auto;padding:4px 7px;border-radius:8px;background:#858886;}
.cintas-ch-btn{
  width:22px;height:18px;border-radius:2px;cursor:pointer;font-size:.62rem;line-height:1;
  background:linear-gradient(145deg,#dedfdb,#898d89);border:1px solid #454845;color:#252725;
  box-shadow:inset 1px 1px rgba(255,255,255,.8),1px 1px 1px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
}
.cintas-ch-btn:hover{background:linear-gradient(145deg,#f3f3ed,#b1b4b0);}
.cintas-ch-btn:active{box-shadow:inset 1px 1px 1px rgba(0,0,0,.4);}
.cintas-ch-label{font-family:'JetBrains Mono',monospace;font-size:.55rem;color:#2c2e2c;letter-spacing:.5px;}
.cintas-tv-feet{display:flex;justify-content:space-between;padding:0 38px;margin-top:0;}
.cintas-tv-feet span{width:16px;height:9px;background:#292b29;border-radius:0 0 4px 4px;box-shadow:0 3px 2px rgba(0,0,0,.45);}

.cintas-caption{text-align:center;margin-top:12px;font-size:0.85rem;color:var(--paper);opacity:0.8;}

@media (max-width:520px){
  .cintas-overlay-content{padding:52px 5vw 70px;}
  .cintas-tv{padding:13px 17px 22px;}
  .cintas-screen{border-width:16px;}
  .cintas-tv-panel{margin:12px -7px -6px;padding:8px 9px 10px;gap:6px;}
  .cintas-speaker{width:58px;height:23px;grid-template-columns:repeat(8,3px);grid-auto-rows:3px;gap:2px;padding:3px 6px;}
  .cintas-jacks{gap:3px;padding:3px 4px;}
  .cintas-jack{width:6px;height:6px;}
  .cintas-ch-buttons{gap:3px;padding:3px 4px;}
  .cintas-ch-btn{width:18px;height:15px;font-size:.56rem;}
}

/* cassette que desbloquea el archivo: siempre flota sobre un espacio vacío del main */
.secret-cassette{
  position:absolute;z-index:510;width:clamp(58px,8vw,96px);aspect-ratio:1/1.04;
  padding:0;border:0;background:transparent;cursor:pointer;opacity:.88;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.28));transition:transform .16s ease,opacity .16s ease;
}
.secret-cassette:hover,.secret-cassette:focus-visible{transform:scale(1.1) rotate(-3deg);opacity:1;outline:none;}
.secret-cassette img{width:100%;height:100%;display:block;object-fit:contain;}
.secret-cassette.is-jumping{pointer-events:none;transform:scale(.65) rotate(9deg);opacity:0;}
.secret-cassette.is-final{opacity:1;isolation:isolate;filter:drop-shadow(0 0 7px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(255,255,255,.68));animation:cassette-halo 2.8s ease-in-out infinite;}
.secret-cassette.is-final::before{content:'';position:absolute;z-index:-1;inset:50%;width:260%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.62) 0deg 7deg,transparent 7deg 23deg),radial-gradient(circle,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,.48) 29%,transparent 68%);filter:blur(2px);opacity:.86;pointer-events:none;}
@keyframes cassette-halo{0%,100%{filter:drop-shadow(0 0 7px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(255,255,255,.68));}50%{filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 28px rgba(255,255,255,.9));}}
.secret-cassette::after{content:'✦';position:absolute;inset:50%;z-index:-1;width:12px;height:12px;display:grid;place-items:center;color:var(--mustard);font-size:12px;line-height:1;opacity:0;transform:translate(-50%,-50%) scale(.2);text-shadow:0 0 6px #fff,0 0 12px var(--mustard);pointer-events:none;}
.secret-cassette.is-exploding{pointer-events:none;animation:cassette-pop .26s ease-out both;}
.secret-cassette.is-exploding::after{animation:cassette-spark .26s ease-out both;}
@keyframes cassette-pop{0%{transform:scale(1) rotate(0);opacity:1}55%{transform:scale(1.2) rotate(8deg);opacity:1;filter:brightness(1.7) drop-shadow(0 0 12px var(--mustard))}100%{transform:scale(.1) rotate(18deg);opacity:0}}
@keyframes cassette-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}45%{opacity:1;transform:translate(-50%,-50%) scale(8)}100%{opacity:0;transform:translate(-50%,-50%) scale(13)}}
body.cintas-open{overflow:hidden;}

/* ==== Guardar puntaje en Los Top Globales (pantallas de game over) ==== */
.lb-save-score{display:flex;flex-direction:column;gap:8px;align-items:center;margin:14px 0;width:100%;max-width:280px;}
.lb-save-score input{
  width:100%;box-sizing:border-box;padding:10px 12px;border:2px solid var(--ink);border-radius:4px;
  font-family:'JetBrains Mono',monospace;font-size:0.9rem;text-align:center;background:var(--paper);color:var(--ink);
  text-transform:uppercase;letter-spacing:3px;font-weight:700;
}
.lb-save-score .btn{width:100%;justify-content:center;}
.lb-save-msg{font-family:'JetBrains Mono',monospace;font-size:0.7rem;text-align:center;min-height:1.2em;color:var(--mustard);margin:0;}

/* ==== LOS TOP GLOBALES: ahora chiquito, al lado de la GameBoy, sin fondo
   propio (usa el mismo fondo cielo/pasto de Sala de Juegos), estilo
   "placa" retro de 80s en vez de panel oscuro grande. ==== */
.gameboy-row{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;}
.tg-mini{width:170px;flex:none;padding-top:10px;border-top:4px solid var(--ink);}
.tg-mini[data-tg-mini="corre"]{border-top-color:var(--mustard);}
.tg-mini[data-tg-mini="atrapa"]{border-top-color:var(--red);}
.tg-mini-title{
  display:block;text-align:center;font-family:'Press Start 2P',monospace;font-size:0.52rem;line-height:1.6;
  color:var(--ink);letter-spacing:0.5px;margin-bottom:10px;text-transform:uppercase;
  background:var(--paper);border:2px solid var(--ink);border-radius:3px;padding:4px 2px;
}
.tg-mini-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.tg-mini-list li{
  display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:3px;
  border:1.5px solid var(--ink);background:var(--paper);
  font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--ink);
}
.tg-mini-rank{flex:none;width:16px;font-weight:700;color:var(--red);}
.tg-mini-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tg-mini-score{flex:none;font-weight:700;}
.tg-mini-empty{
  list-style:none;text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.6rem;
  opacity:0.55;padding:10px 6px;border:1.5px dashed var(--ink);border-radius:3px;
}
@media (max-width:900px){
  .gameboy-row{flex-direction:column;}
  .tg-mini{width:220px;}
}

.analytics-note{font-family:'JetBrains Mono',monospace;font-size:0.62rem;opacity:0.45;margin-top:8px;}

/* ==== ícono discreto de acceso del equipo (lleva a /admin) ==== */
.nav-admin-link{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:none;margin-left:8px;
  color:var(--ink);opacity:0.45;transition:opacity 0.15s ease,background 0.15s ease;
}
.nav-admin-link:hover{opacity:0.9;background:rgba(25,21,18,0.08);}
@media (max-width:820px){
  .nav-admin-link{margin-left:auto;order:2;}
  .nav-toggle{order:3;}
}