/* Barra superior y menú móvil.
   Parte de styles/ — se cargan en orden desde index.html. */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 2rem;
  padding-inline: var(--bleed);
  transition: background-color .4s var(--ease), backdrop-filter .4s var(--ease),
              transform .45s var(--ease);
}
.nav.is-stuck {
  background: rgb(7 8 15 / .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hueso-08);
}
/* Escondido = fuera de pantalla. El blur del backdrop ahí no se ve pero se
   sigue calculando en cada cuadro, y bajar con la nav escondida es la mayor
   parte del scroll. Apagarlo mientras no se ve no cambia nada visible. */
.nav.is-hidden {
  transform: translateY(-100%);
  backdrop-filter: none;
}

.nav__brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* La versión hueso del logo: el nav va sin fondo hasta el scroll y a veces
   queda sobre el cielo dorado del hero, donde el amarillo real del logo
   pierde casi todo el contraste. */
.nav__mark { width: auto; height: 34px; }

.nav__links { display: flex; gap: 1.85rem; }
.nav__links a {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: var(--hueso-70);
  transition: color .25s;
}
.nav__links a:hover { color: var(--oro); }

.nav__boletos {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  padding: .55rem 1.05rem; border: 1px solid var(--hueso-16); border-radius: 100px;
  transition: border-color .25s, color .25s, background-color .25s;
}
.nav__boletos:hover { border-color: var(--oro); color: var(--oro); }

/* La página en la que estás, marcada también visualmente y no sólo con
   aria-current. */
.nav__links a[aria-current="page"] { color: var(--oro); }

.nav__burger { display: none; }

/* --- menú móvil --- */
.menu {
  position: fixed; inset: 0; z-index: 65;
  background: rgb(7 8 15 / .97);
  display: grid; align-content: center; gap: 2.5rem;
  padding: var(--bleed);
}
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: .4rem; }
.menu a {
  font-family: var(--display); font-variation-settings: 'wdth' 122;
  font-weight: 800; font-size: clamp(2.2rem, 11vw, 4rem); line-height: 1.05;
  text-transform: uppercase; text-decoration: none;
  display: flex; align-items: baseline; gap: 1rem;
}
.menu a span {
  font-family: var(--mono); font-size: .7rem; font-weight: 400;
  color: var(--oro); letter-spacing: .1em;
}
.menu__ig {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--hueso-70); text-decoration: none;
}

/* Debajo de 780px los enlaces se esconden detrás de la hamburguesa. */
@media (max-width: 780px) {
  .nav__links, .nav__boletos { display: none; }
  .nav__burger {
    display: grid; gap: 5px; place-content: center;
    width: 44px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
  }
  .nav__burger span {
    display: block; width: 24px; height: 1.5px; background: var(--hueso);
    transition: transform .35s var(--ease), opacity .2s;
  }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
}