/* index2 · navigation */
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:min(var(--max), calc(100vw - 40px));
  margin:20px auto 0;
  padding:16px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(253,250,246,.55);
  backdrop-filter:blur(22px) saturate(165%);
  box-shadow:0 18px 44px rgba(60,40,30,.10);
  transition:
    background .3s ease,
    box-shadow .3s ease,
    padding .3s ease,
    transform .3s ease,
    width .3s ease,
    margin .3s ease;
}

nav.scrolled{
  width:min(1120px, calc(100vw - 54px));
  margin-top:10px;
  padding:10px 16px;
  background:rgba(253,250,246,.92);
  box-shadow:
    0 24px 56px rgba(60,40,30,.16),
    0 8px 22px rgba(60,40,30,.08);
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  color:var(--ink);
  transition:all .28s ease;
}

.nav-brand-real{
  text-decoration:none;
}

.nav-brand-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background: transparent;
  box-shadow: 0 12px 28px rgba(20,18,18,.10);
  color:transparent;
  transition:all .28s ease;
}

.nav-brand-icon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background:#df3b32;
}

.nav-brand-icon::after{
  content:"U.";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-family:var(--sans);
  font-size:28px;
  font-weight:800;
  letter-spacing:-.04em;
}

.nav-brand-copy{
  display:flex;
  flex-direction:column;
  line-height:1;
  min-width:0;
}

.nav-brand-copy strong{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2rem, 2.4vw, 2.8rem);
  font-weight:600;
  line-height:.88;
  letter-spacing:.04em;
  color:var(--ink);
  transition:all .28s ease;
}

.nav-brand-copy span{
  display:block;
  margin-top:4px;
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  font-family:var(--sans);
  transition:all .28s ease;
}
    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1 1 auto;
      justify-content: center;
    }
    .nav-links a {
      padding: 10px 14px;
      border-radius: 999px;
      font-size: .84rem;
      color: var(--ink-soft);
      transition: background .2s, color .2s;
    }
    .nav-links a:hover,
    .nav-links a.active {
      background: rgba(26,22,20,.06);
      color: var(--coral);
    }
    .nav-utilities {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .nav-test-link {
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid rgba(26,22,20,.08);
      background: rgba(255,255,255,.72);
      font-size: .9rem;
      font-weight: 600;
      color: #1d2452;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 26px rgba(60,40,30,.08);
    }
    .nav-icon-link {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(26,22,20,.08);
      background: rgba(255,255,255,.72);
      color: #1d2452;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 12px 26px rgba(60,40,30,.08);
      transition: transform .22s, box-shadow .22s, color .22s;
    }
    .nav-icon-link:hover,
    .nav-test-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(60,40,30,.12);
      color: var(--coral);
    }
    .nav-cta {
      min-height: 44px;
      padding: 0 20px;
      border-radius: 999px;
      background: var(--coral);
      color: #fff;
      font-size: .84rem;
      font-weight: 700;
      box-shadow: 0 14px 30px rgba(201,74,65,.28);
      transition: transform .22s, box-shadow .22s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(201,74,65,.34); }
nav,
.nav-links,
.nav-links a,
.nav-utilities,
.nav-icon-link,
.nav-cta{
  transition:all .28s ease;
}

nav.scrolled .nav-links{
  gap:2px;
}

nav.scrolled .nav-links a{
  padding:8px 12px;
  font-size:.8rem;
}

nav.scrolled .nav-icon-link{
  width:40px;
  height:40px;
}

nav.scrolled .nav-cta{
  min-height:40px;
  padding:0 18px;
  font-size:.8rem;
}

nav.scrolled .nav-brand{
  gap:10px;
}

nav.scrolled .nav-brand-icon{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:14px;
  background: transparent;
}

nav.scrolled .nav-brand-icon::after{
  font-size:24px;
}

nav.scrolled .nav-brand-copy strong{
  font-size:clamp(1.7rem, 2vw, 2.2rem);
}

nav.scrolled .nav-brand-copy span{
  font-size:.52rem;
  letter-spacing:.18em;
}
.nav-toggle{
  display:none;
  width:48px;
  height:48px;
  border:1px solid rgba(34,31,28,.08);
  border-radius:16px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(60,40,30,.08);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:#2a2d34;
  transition:transform .24s ease, opacity .24s ease;
}

#nav.is-open .nav-toggle span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

#nav.is-open .nav-toggle span:nth-child(2){
  opacity:0;
}

#nav.is-open .nav-toggle span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.nav-mobile-panel{
  display:contents;
}

@media (max-width: 980px){
  #nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:14px;
    align-items:center;
  }

  .nav-toggle{
    display:inline-flex;
  }

  .nav-mobile-panel{
    display:block;
    grid-column:1 / -1;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:max-height .28s ease, opacity .22s ease, margin-top .22s ease;
    margin-top:0;
  }

  #nav.is-open .nav-mobile-panel{
    max-height:80vh;
    opacity:1;
    pointer-events:auto;
    margin-top:8px;
  }

  .nav-mobile-panel .nav-links{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px;
    border-radius:24px 24px 0 0;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(34,31,28,.06);
    border-bottom:0;
  }

  .nav-mobile-panel .nav-links a{
    display:block;
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(244,241,239,.72);
  }

  .nav-mobile-panel .nav-utilities{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:0 18px 18px;
    border-radius:0 0 24px 24px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(34,31,28,.06);
    border-top:0;
  }

  .nav-mobile-panel .nav-icon-link{
    width:100%;
    min-height:52px;
    border-radius:14px;
    justify-content:center;
  }

  .nav-mobile-panel .nav-cta{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  #nav > .nav-links,
  #nav > .nav-utilities{
    display:none !important;
  }
}
/* Stream en menú: mismo estilo que los links normales + bolita estado */
.nav-stream-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.nav-stream-link .stream-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 10px;
  background: #d32f2f;
  box-shadow: 0 0 0 5px rgba(211,47,47,.14);
}

.nav-stream-link.is-live .stream-dot{
  background: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.14);
}

.nav-stream-link.is-off .stream-dot{
  background: #d32f2f;
  box-shadow: 0 0 0 5px rgba(211,47,47,.14);
}