/* ============================================================
   Menú de navegación del Sorteo Vibra.
   Compartido por index.html, premios.html, como-participar.html
   y bases.html. El marcado lo inserta menu.js.
   Usa las variables de color que define cada página en :root.
   ============================================================ */

.hamburguesa{
  position:fixed;
  top:14px;
  right:14px;
  z-index:60;
  width:46px;
  height:46px;
  display:grid;
  place-content:center;
  padding:0;
  border:1px solid var(--linea);
  border-radius:13px;
  background:rgba(16,11,10,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.hamburguesa .barras{display:grid;gap:5px}
.hamburguesa i{
  display:block;
  width:20px;
  height:2px;
  border-radius:2px;
  background:var(--oro);
  transition:transform .22s ease,opacity .18s ease;
}
.hamburguesa:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
body.menu-abierto .hamburguesa i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-abierto .hamburguesa i:nth-child(2){opacity:0}
body.menu-abierto .hamburguesa i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.velo{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(4,3,3,.66);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s;
}
body.menu-abierto .velo{opacity:1;visibility:visible}

.menu{
  position:fixed;
  top:0;
  right:0;
  z-index:55;
  width:min(80vw,310px);
  height:100%;
  padding:78px 22px 28px;
  background:rgba(13,9,8,.97);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border-left:1px solid var(--linea);
  box-shadow:-24px 0 60px rgba(0,0,0,.55);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .26s cubic-bezier(.4,0,.2,1),visibility .26s;
  overflow-y:auto;
}
body.menu-abierto .menu{transform:none;visibility:visible}

.menu .menu-titulo{
  margin:0;
  font-family:var(--titular);
  font-weight:400;
  font-size:22px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--oro);
}
.menu .menu-banda{
  display:flex;
  width:120px;
  height:5px;
  margin:10px 0 22px;
  border-radius:4px;
  overflow:hidden;
  transform:skewX(-7deg);
}
.menu .menu-banda i{flex:1}
.menu .menu-banda i:nth-child(1){background:var(--rojo)}
.menu .menu-banda i:nth-child(2){flex:1.4;background:var(--oro)}
.menu .menu-banda i:nth-child(3){background:var(--rojo)}

.menu a{
  display:block;
  padding:15px 2px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--texto);
  text-decoration:none;
  font-size:15.5px;
  transition:color .18s,padding-left .18s;
}
.menu a:first-of-type{border-top:1px solid rgba(255,255,255,.08)}
.menu a:hover,.menu a:focus-visible{color:var(--oro);padding-left:8px}
/* la página en la que ya estás */
.menu a.actual{color:var(--oro);font-weight:700}
.menu a.actual::before{content:"› ";}

/* En escritorio no se muestra: la navegación va dentro de cada página */
@media (min-width:980px){
  .hamburguesa,.menu,.velo{display:none}
}

@media (prefers-reduced-motion:reduce){
  .menu,.velo,.hamburguesa i{transition-duration:.01ms !important}
}