/* Navegación persistente: vidrio azul BIG, compartido con el roster integrado. */
:root { --alto-header: 88px; }
/* Las cabeceras de sección quedan debajo de la barra al fijarse cada bloque. */
.page-flow #creadores,
.page-flow #producciones { padding-top: calc(var(--alto-header) + 24px); }
body #hdr.nav-permanente,
body #hdr.nav-permanente:hover,
body #hdr.nav-permanente:focus-within {
  --naranja: #ff761e;
  --lavanda: #dae0ff;
  inset: 16px auto auto 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(800px, calc(100vw - 32px));
  height: 72px;
  min-height: 0;
  max-height: none;
  padding: 8px 12px;
  overflow: visible;
  border: 1px solid rgba(218, 224, 255, .3);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(218, 224, 255, .16), transparent 45%), rgba(51, 65, 154, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(218, 224, 255, .09), 0 10px 32px rgba(20, 29, 83, .18);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}
body #hdr.nav-permanente::before,
body #hdr.nav-permanente::after { display: none; }
#hdr.nav-permanente #menu {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
}
#hdr.nav-permanente #nav,
#hdr.nav-permanente:hover #nav,
#hdr.nav-permanente:focus-within #nav {
  position: static;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: 2px;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  max-height: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
}
#hdr.nav-permanente #nav .btn {
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #dae0ff;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -.015em;
}
#hdr.nav-permanente #nav .btn[aria-current="page"] {
  color: #fff;
  background: rgba(218, 224, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
#hdr.nav-permanente #nav .btn:hover,
#hdr.nav-permanente #nav .btn:focus-visible {
  color: #fff;
  border-radius: 14px;
  background: rgba(218, 224, 255, .12);
}
#hdr.nav-permanente > .pais {
  position: static;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(218, 224, 255, .2);
  border-radius: 999px;
  background: rgba(218, 224, 255, .07);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
#hdr.nav-permanente .pais-flag {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 7px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  opacity: .65;
}
#hdr.nav-permanente .pais-flag img { width: 26px; height: 26px; border-radius: 50%; }
#hdr.nav-permanente .pais-flag[aria-pressed="true"] { opacity: 1; background: rgba(218, 224, 255, .16); }
#hdr.nav-permanente a:focus-visible,
#hdr.nav-permanente button:focus-visible { outline: 2px solid #ff761e; outline-offset: 2px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body #hdr.nav-permanente { background: #33419a; }
}
@media (max-width: 700px) {
  :root { --alto-header: 120px; }
  body #hdr.nav-permanente,
  body #hdr.nav-permanente:hover,
  body #hdr.nav-permanente:focus-within {
    inset: 10px auto auto 50%;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: 44px auto;
    gap: 2px 8px;
    width: calc(100vw - 24px);
    height: auto;
    padding: 7px;
    border-radius: 22px;
  }
  #hdr.nav-permanente #menu { grid-column: 1; grid-row: 1; }
  #hdr.nav-permanente > .pais { grid-column: 3; grid-row: 1; padding: 1px; }
  #hdr.nav-permanente #nav,
  #hdr.nav-permanente:hover #nav,
  #hdr.nav-permanente:focus-within #nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }
  #hdr.nav-permanente #nav .btn { padding: 10px 2px; font-size: 11px; justify-content: center; }
}
@media (max-width: 359px) {
  :root { --alto-header: 164px; }
  #hdr.nav-permanente #nav,
  #hdr.nav-permanente:hover #nav,
  #hdr.nav-permanente:focus-within #nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #hdr.nav-permanente #nav .btn { font-size: 12px; }
}