/* 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: 6px;
      flex: 1 1 auto;
      justify-content: flex-start;
    }
    .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: #D4E053;
  color: #243041;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(212,224,83,.34);
  transition: transform .22s, box-shadow .22s, background .22s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-cta:hover {
  transform: translateY(-2px);
  background: #C9D747;
  color: #243041;
  box-shadow: 0 18px 36px rgba(212,224,83,.42);
}

.nav-cta:hover {
  transform: translateY(-2px);
  background: #AEBB2F;
  color: #243041;
  box-shadow: 0 18px 36px rgba(186,199,52,.38);
}

.nav-cta:hover {
  transform: translateY(-2px);
  background: #ECEF45;
  color: #243041;
  box-shadow: 0 18px 36px rgba(243,244,94,.38);
}
    .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: 860px){
  #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);
}

/* Pack UMANA en menú: solo texto, negrita y rojo UMANA */
.nav-pack-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 9px;
  border-radius:999px;
  background:transparent !important;
  color:var(--coral) !important;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

.nav-pack-link__splash{
  display:none !important;
}

.nav-pack-link__label{
  display:inline;
  width:auto;
  height:auto;
  transform:none;
  font-family:var(--sans);
  font-size:inherit;
  line-height:1;
  font-weight:900;
  color:var(--coral);
  text-align:inherit;
  white-space:nowrap;
  text-shadow:
    0 2px 8px rgba(40,18,16,.22),
    0 8px 18px rgba(40,18,16,.14);
}

.nav-pack-link:hover .nav-pack-link__label,
.nav-pack-link:focus-visible .nav-pack-link__label,
.nav-pack-link.active .nav-pack-link__label{
  text-shadow:
    0 0 12px rgba(212,224,83,.72),
    0 0 24px rgba(212,224,83,.48),
    0 2px 10px rgba(40,18,16,.20);
}

.nav-pack-link:hover,
.nav-pack-link:focus-visible,
.nav-pack-link.active{
  background:rgba(211,47,47,.10) !important;
  color:var(--coral) !important;
  transform:none;
}

.nav-pack-link:hover .nav-pack-link__label,
.nav-pack-link:focus-visible .nav-pack-link__label,
.nav-pack-link.active .nav-pack-link__label{
  text-shadow:
    0 2px 10px rgba(40,18,16,.32),
    0 10px 22px rgba(40,18,16,.20);
}

nav.scrolled .nav-pack-link{
  padding:8px 9px;
}

@media (max-width: 860px){
  .nav-mobile-panel .nav-pack-link{
    width:100%;
    min-width:0;
    height:auto;
    margin:0;
    padding:12px 14px !important;
    justify-content:flex-start;
    border-radius:14px !important;
    background:rgba(244,241,239,.72) !important;
    color:var(--coral) !important;
    font-weight:800;
    box-shadow:none;
  }

  .nav-mobile-panel .nav-pack-link__splash{
    display:none !important;
  }

.nav-mobile-panel .nav-pack-link__label{
  width:auto;
  height:auto;
  transform:none;
  color:var(--coral);
  text-align:left;
  line-height:1;
  font-size:1rem;
  font-weight:900;
  text-shadow:
    0 2px 8px rgba(40,18,16,.22),
    0 8px 18px rgba(40,18,16,.14);
}

  .nav-mobile-panel .nav-pack-link:hover,
  .nav-mobile-panel .nav-pack-link:focus-visible,
  .nav-mobile-panel .nav-pack-link.active{
    color:var(--coral) !important;
    transform:none;
  }
}
/* ===== Ajuste desktop: distribución homogénea del menú ===== */
@media (min-width: 861px){

  nav{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    width: min(1440px, calc(100vw - 24px));
    column-gap: 24px;
    row-gap: 0;
    padding: 14px 18px;
  }

  nav.scrolled{
    width: min(1320px, calc(100vw - 32px));
    column-gap: 22px;
    padding: 10px 16px;
  }

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

  .nav-brand{
    grid-column:1;
    justify-self:start;
    min-width: 0;
  }

  .nav-brand-copy strong,
  .nav-brand-copy span{
    white-space: nowrap;
  }

  .nav-links{
    grid-column:2;
    justify-self:center;
    display:flex;
    align-items:center;
    min-width: 0;
    gap: 5px;
    justify-content: center;
  }

  nav.scrolled .nav-links{
    flex-wrap:nowrap;
  }

  .nav-links a{
    white-space: nowrap;
    padding: 9px 10px;
    font-size: .86rem;
  }

  .nav-utilities{
    grid-column:3;
    justify-self:end;
    display:flex;
    align-items:center;
    gap: 8px;
  }

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

  .nav-cta{
    padding: 0 18px;
    font-size: .84rem;
    white-space: nowrap;
  }
}

@media (min-width: 861px) and (max-width: 1320px){

  nav{
    width:min(1380px, calc(100vw - 24px));
    column-gap:16px;
    padding:12px 16px;
  }

  nav.scrolled{
    width:min(1280px, calc(100vw - 28px));
    column-gap:14px;
    padding:10px 14px;
  }

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

  nav.scrolled .nav-links a{
    padding:6px 7px;
    font-size:.74rem;
  }

  nav.scrolled .nav-brand-copy strong{
    font-size:clamp(1.45rem, 2.1vw, 1.9rem);
  }

  nav.scrolled .nav-brand-copy span{
    font-size:.44rem;
    letter-spacing:.12em;
  }

  nav.scrolled .nav-utilities{
    gap:5px;
  }

  nav.scrolled .nav-cta{
    padding:0 12px;
    font-size:.74rem;
  }

  .nav-brand{
    gap:10px;
  }

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

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

  .nav-brand-copy strong{
    font-size:clamp(1.55rem, 2.3vw, 2.05rem);
  }

  .nav-brand-copy span{
    font-size:.48rem;
    letter-spacing:.15em;
  }

  .nav-links{
    gap:2px;
    flex-wrap:wrap;
  }

  .nav-links a{
    padding:7px 8px;
    font-size:.78rem;
  }

  .nav-utilities{
    gap:6px;
  }

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

  .nav-cta{
    min-height:40px;
    padding:0 14px;
    font-size:.78rem;
  }
}

@media (min-width: 861px) and (max-width: 1080px){

  nav{
    column-gap:12px;
    padding-left:14px;
    padding-right:14px;
  }

  .nav-brand-copy strong{
    font-size:clamp(1.35rem, 2.1vw, 1.8rem);
  }

  .nav-brand-copy span{
    font-size:.42rem;
    letter-spacing:.12em;
  }

  .nav-links a{
    padding:6px 6px;
    font-size:.72rem;
  }

  .nav-cta{
    padding:0 12px;
    font-size:.74rem;
  }
}

@media (min-width: 1321px) and (max-width: 1450px){

  nav{
    column-gap: 18px;
    padding-left: 14px;
    padding-right: 14px;
  }

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

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

  nav.scrolled .nav-cta{
    padding:0 14px;
    font-size:.78rem;
  }

  .nav-brand-copy strong{
    font-size: clamp(1.8rem, 1.95vw, 2.2rem);
  }

  .nav-brand-copy span{
    font-size: .52rem;
    letter-spacing: .16em;
  }

  .nav-links{
    gap: 3px;
  }

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

  .nav-utilities{
    gap: 6px;
  }

  .nav-cta{
    padding: 0 14px;
    font-size: .8rem;
  }
}