/**
 * RADIO UNaF — CABECERA Y NAVEGACIÓN
 * Header fijo que arranca transparente sobre el hero oscuro y se vuelve
 * sólido al bajar. Menú lateral completo en móvil.
 */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: var(--border-hairline) solid transparent;
  transition:
    background-color var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

/* Sobre el hero: el header vive en modo oscuro. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 76px;
  color: var(--white);
}

/* Al desplazarse: fondo negro sólido y filete inferior. Lo activa
   navigation.js observando un centinela al tope del documento. */
.site-header.is-stuck {
  background: var(--ink-900);
  border-bottom-color: var(--ink-600);
}

/*
 * Red de seguridad.
 *
 * El texto de la cabecera es blanco, y su fondo transparente sólo es legible
 * mientras el hero oscuro está detrás. Si el JavaScript no llega a
 * ejecutarse, la cabecera quedaría en blanco sobre blanco al desplazarse:
 * invisible. Sin JS, entonces, arranca sólida. Se ve algo menos vistosa que
 * la versión completa, pero se lee siempre, que es lo que importa.
 */
.no-js .site-header {
  background: var(--ink-900);
  border-bottom-color: var(--ink-600);
}

/* En páginas internas (sin hero oscuro) el header es sólido desde el inicio. */
.site-header--solid {
  position: sticky;
  background: var(--ink-900);
  border-bottom-color: var(--ink-600);
}

/* ==========================================================================
   MARCA
   Lockup: «RADIO UNaF» en display + filete rojo + institución en dos líneas.
   La «a» de UNaF va en minúscula: es la grafía institucional.
   ========================================================================== */

/* flex: 0 1 auto y no flex: none. En un teléfono de 360px el lockup completo
   más el botón de menú suman apenas más que el contenedor; dejándolo encoger,
   la línea de la institución se recorta con puntos suspensivos en vez de
   empujar la página y generar scroll horizontal. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 1 auto;
  min-width: 0;
}

.brand__mark { flex: none; color: var(--red-500); }

.brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-stretch: 108%;
  color: var(--white);
  white-space: nowrap;
}

.brand__name em {
  font-style: normal;
  color: var(--red-400);
}

.brand__institution {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En pantallas muy angostas la línea institucional cede cuerpo antes que
   recortarse: es preferible leerla entera y más chica que ver
   «UNIVERSIDAD NACIONAL DE FORM…». */
@media (max-width: 400px) {
  .brand { gap: var(--space-3); }
  .brand__name { font-size: 1.18rem; }
  .brand__institution { font-size: 0.5rem; letter-spacing: 0.06em; }
}

/* ==========================================================================
   NAVEGACIÓN DE ESCRITORIO
   ========================================================================== */

.nav-desktop { display: none; }

@media (min-width: 1100px) {
  .nav-desktop { display: block; }
}

.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.2rem + 0.9vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-desktop__link {
  position: relative;
  display: block;
  padding-block: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-300);
  transition: color var(--duration-fast) var(--ease-out);
}

/* Subrayado rojo que crece desde la izquierda. Sin desplazar el texto. */
.nav-desktop__link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: 2px;
  background: var(--red-500);
  transition: width var(--duration) var(--ease-out);
}

.nav-desktop__link:hover,
.nav-desktop__item.is-current .nav-desktop__link { color: var(--white); }

.nav-desktop__link:hover::after,
.nav-desktop__item.is-current .nav-desktop__link::after { width: 100%; }

/* ==========================================================================
   ACCIONES DEL HEADER
   ========================================================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* Botón ESCUCHÁ EN VIVO: la acción más importante del sitio. */
.btn-live {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  min-height: 44px;
  background: var(--red-500);
  color: var(--white);
  border: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.btn-live:hover { background: var(--red-600); }

@media (min-width: 560px) { .btn-live { display: inline-flex; } }

/* Botón hamburguesa: dos trazos que se cruzan al abrir. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: var(--border-hairline) solid var(--ink-500);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--white); }

@media (min-width: 1100px) { .nav-toggle { display: none; } }

.nav-toggle__box {
  position: relative;
  width: 20px;
  height: 14px;
}

.nav-toggle__bar {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 6px; }
.nav-toggle__bar:nth-child(3) { top: 12px; }

[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   MENÚ MÓVIL
   Panel completo, negro, con la navegación en tipografía grande. No es un
   menú apretado: es una pantalla de navegación.
   ========================================================================== */

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  color: var(--white);
  /* Oculto por defecto, sin sacarlo del árbol de accesibilidad de golpe:
     el atributo hidden lo controla el JS al terminar la transición. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--duration) var(--ease-out),
    transform var(--duration) var(--ease-out),
    visibility 0s linear var(--duration);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

@media (min-width: 1100px) { .nav-mobile { display: none; } }

.nav-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 76px;
  border-bottom: var(--border-hairline) solid var(--ink-600);
}

.nav-mobile__body {
  flex: 1;
  padding-block: var(--space-6);
}

.nav-mobile__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-mobile__item { border-bottom: var(--border-hairline) solid var(--ink-700); }

.nav-mobile__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--duration-fast) var(--ease-out), padding-inline-start var(--duration) var(--ease-out);
}
.nav-mobile__link:hover,
.nav-mobile__link:focus-visible { color: var(--red-400); padding-inline-start: var(--space-3); }

/* Numeración monoespaciada al costado: ordena la lista sin viñetas. */
.nav-mobile__index {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  color: var(--gray-400);
  text-transform: none;
}

.nav-mobile__foot {
  padding-block: var(--space-6);
  border-top: var(--border-hairline) solid var(--ink-600);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Bloquea el scroll del documento mientras el menú está abierto. */
.has-nav-open { overflow: hidden; }