/* ═══════════════════════════════════════════
   TEATRO AURORA — NAVIGATION
═══════════════════════════════════════════ */

/* ─── NAV ─── */
nav {
  position:        fixed;
  top: 0; left: 0; right: 0;
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.6rem var(--pad-x);
  background:      rgba(8, 31, 33, .97);
  backdrop-filter: blur(14px);
  transition:      background var(--transition-slow);
}

nav.transparent {
  background: linear-gradient(to bottom, rgba(8,31,33,.95) 0%, rgba(8,31,33,0) 100%);
}

/* Logo */
.nav-logo {
  font-family:    var(--font-display);
  font-style:     italic;
  font-size:      1.5rem;
  color:          var(--gold);
  text-decoration: none;
  line-height:    1;
}
.nav-logo span {
  font-style:     normal;
  font-family:    var(--font-label);
  font-size:      .58rem;
  color:          var(--cream);
  letter-spacing: .32em;
  display:        block;
  margin-bottom:  -.15rem;
}

/* Links */
.nav-links {
  display:    flex;
  gap:        2.6rem;
  list-style: none;
}
.nav-links a {
  font-family:    var(--font-label);
  font-size:      .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color:          var(--text-light);
  text-decoration: none;
  position:       relative;
  padding-bottom: 4px;
  transition:     color var(--transition-normal);
}
.nav-links a::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0;
  width:      0;
  height:     1px;
  background: var(--gold);
  transition: width .38s ease;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
}
.nav-links a.active::after,
.nav-links a:hover::after {
  width: 100%;
}

/* CTA */
.nav-cta {
  font-family:    var(--font-label);
  font-size:      .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--petrolio-dark);
  background:     var(--gold);
  padding:        .7rem 1.5rem;
  text-decoration: none;
  transition:     background var(--transition-normal),
                  transform  var(--transition-fast);
}
.nav-cta:hover {
  background: var(--gold-light);
  transform:  translateY(-1px);
}

/* Mobile hamburger */
.nav-toggle {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  background:      none;
  border:          none;
  padding:         4px;
}
.nav-toggle span {
  display:          block;
  width:            24px;
  height:           1px;
  background:       var(--gold);
  transition:       transform var(--transition-normal),
                    opacity   var(--transition-normal);
}

/* Mobile nav open */
.nav-open .nav-links {
  display:         flex;
  flex-direction:  column;
  position:        fixed;
  inset:           0;
  background:      rgba(8,31,33,.98);
  align-items:     center;
  justify-content: center;
  gap:             2.5rem;
  z-index:         498;
}
.nav-open .nav-links a {
  font-size:   .8rem;
}

@media (max-width: 900px) {
  .nav-links  { display: none; }
  .nav-toggle { display: flex; }
  .nav-cta    { display: none; }
}