/* Barra superior y menú compartidos por la home y el minijuego (mismo logo, mismos botones). */
.nav,.menu{--alto:48px;--crema:#efe4cc;--tinta:#132048;--suave:#b9bfd3;--oro:#c49a5c;--linea:rgba(239,228,204,.16)}
.nav{position:fixed;inset:0 0 auto;z-index:30;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(8,16,42,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--linea)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 24px;height:136px;transition:height .35s}
.nav.solid .wrap{height:96px}
.nav .marca{display:block;line-height:0}
.nav .marca img{width:86px;height:auto;transition:width .35s}
.nav.solid .marca img{width:62px}
.nav-der{display:flex;align-items:center;gap:12px}
/* los tres controles comparten alto, borde y forma */
.nav-juego,.nav-spotify,.hamb{box-sizing:border-box;height:var(--alto);border:1.5px solid transparent;border-radius:999px}
.nav-juego{display:inline-flex;align-items:center;gap:8px;padding:0 18px;background:#e4ff5c;color:#14112b;border-color:#e4ff5c;text-decoration:none;font:700 13px/1 var(--texto);letter-spacing:.06em;text-transform:uppercase;transition:transform .15s,box-shadow .15s;animation:nav-brilla 3.5s ease-in-out infinite}
.nav-juego:hover{transform:translateY(-2px)}
.nav-juego[aria-current]{animation:none}
@keyframes nav-brilla{0%,80%,100%{transform:none}86%{transform:rotate(-4deg) scale(1.05)}92%{transform:rotate(3deg)}}
.nav-spotify{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 18px;background:linear-gradient(135deg,#f8f0de 0%,#efe2c6 55%,#e2c99d 100%);color:var(--tinta);text-decoration:none;font:600 13px/1 var(--texto);letter-spacing:.14em;text-transform:uppercase;transition:transform .25s}
.nav-spotify:hover{transform:translateY(-2px)}
.nav-spotify svg{width:20px;height:20px}
.hamb{width:var(--alto);border-color:var(--linea);background:rgba(239,228,204,.06);display:grid;place-content:center;gap:5px;cursor:pointer;position:relative;z-index:41;padding:0}
.hamb i{display:block;width:20px;height:2px;border-radius:2px;background:var(--crema);transition:transform .3s,opacity .3s}
.hamb[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb[aria-expanded="true"] i:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:29;display:flex;flex-direction:column;justify-content:center;padding:140px max(24px,calc((100vw - 1100px)/2)) 50px;
  background:radial-gradient(60% 50% at 100% 0%,rgba(122,63,184,.45),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(196,154,92,.25),transparent 70%),#08102a;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;overflow-y:auto}
.menu[hidden]{display:none}
.menu.abierto{opacity:1;visibility:visible}
.menu ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.menu li{opacity:0;transform:translateY(24px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.menu.abierto li{opacity:1;transform:none;transition-delay:calc(var(--i) * 55ms + .08s)}
.menu a{display:flex;align-items:baseline;gap:18px;text-decoration:none;color:var(--crema);font:400 clamp(38px,6vw,64px)/1.1 var(--display);padding:4px 0;transition:color .2s,transform .2s}
.menu a:hover{color:var(--oro);transform:translateX(8px)}
.menu a small{font:600 12px/1 var(--texto);letter-spacing:.18em;color:var(--oro)}
.menu-redes{display:flex;gap:22px;margin:40px 0 0;flex-wrap:wrap}
.menu-redes a{font:600 12px/1 var(--texto);letter-spacing:.18em;text-transform:uppercase;color:var(--suave)}
body.menu-on{overflow:hidden}
body.menu-on .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:transparent}
@media (max-width:760px){
  .nav .wrap{height:100px}
  .nav.solid .wrap{height:82px}
  .nav .marca img{width:66px}
  .nav.solid .marca img{width:54px}
  .nav,.menu{--alto:42px}
  .nav-der{gap:8px}
  .nav-juego{padding:0 14px;font-size:12px}
  .nav-spotify{padding:0;width:var(--alto)}
  .nav-spotify span{display:none}
  .menu{justify-content:flex-start;padding-top:124px}
  .menu ul a{font-size:clamp(34px,10vw,46px)}
}
@media (prefers-reduced-motion:reduce){.nav-juego{animation:none}}
/* Redes en la cabecera: iconos redondos con borde; en pantallas estrechas se quedan solo en el menú */
.nav-redes{display:flex;align-items:center;gap:8px}
.nav-redes a{box-sizing:border-box;width:var(--alto);height:var(--alto);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--crema);border:1.5px solid var(--linea);background:rgba(255,255,255,.04);transition:transform .2s,border-color .2s,background .2s}
.nav-redes a:hover{transform:translateY(-2px);border-color:var(--oro);background:rgba(196,154,92,.14)}
.nav-redes svg{width:19px;height:19px}
@media (max-width:980px){.nav-redes{display:none}}