.nav {

  color: var(--p-paper);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--p-z-nav);
  height: var(--p-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--p-margen);
  border-bottom: 1px solid transparent;
  transition: background var(--p-m-slow) var(--p-ease),
              border-color var(--p-m-slow) var(--p-ease),
              color var(--p-m-slow) var(--p-ease),
              height var(--p-m) var(--p-ease);
}

.nav.encogida { height: var(--p-nav-h-posada) }

.nav.posada {
  background: var(--p-pilares-fondo-plano);
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav.posada.sobre-claro {
  color: var(--p-ink);
  background: var(--p-papel-secciones);
}

.nav.posada.sobre-video { background: transparent }

.posado .marca-svg { color: var(--p-paper) }
.sobre-claro .marca-svg { color: var(--p-ink) }

.nav-marca { display: flex; align-items: center; text-decoration: none }
.nav-marca .marca-svg { width: auto; height: 26px }

.nav-enlaces { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px) }

.nav-enlaces a {
  text-decoration: none;

  font-family: var(--p-font-ui);
  font-size: var(--p-t-label);

  font-weight: var(--p-peso-medio);
  letter-spacing: var(--p-track-label);
  text-transform: uppercase;
  padding-block: var(--p-s-1);
  position: relative;
}

.nav-enlaces a:not(.nav-acceso)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--p-m) var(--p-ease);
}
.nav-enlaces a:not(.nav-acceso):hover::after { width: 100% }

.nav-acceso {
  border: 1px solid color-mix(in oklab, currentColor 52%, transparent);
  border-radius: var(--p-r);
  padding: 9px 22px;
  transition: background var(--p-m) var(--p-ease), color var(--p-m) var(--p-ease),
              border-color var(--p-m) var(--p-ease);
}
.nav:not(.posada) .nav-acceso:hover {
  background: var(--p-paper); color: var(--p-noche); border-color: var(--p-paper);
}

.nav.posada .nav-acceso:hover {
  background: var(--p-paper); color: var(--p-noche); border-color: var(--p-paper);
}
.nav.posada.sobre-claro .nav-acceso:hover {
  background: var(--p-ink); color: var(--p-paper); border-color: var(--p-ink);
}

.nav-boton { display: none; background: none; border: 0; cursor: pointer;

  width: 30px; height: 20px; position: relative; z-index: calc(var(--p-z-menu) + 1);

  color: inherit }

.nav-boton span { position: absolute; left: 0; width: 100%; height: 1.5px;
  background: currentColor; transition: transform var(--p-m) var(--p-ease),
  opacity var(--p-m-fast) var(--p-ease) }
.nav-boton span:nth-child(1) { top: 2px }
.nav-boton span:nth-child(2) { top: 9px }
.nav-boton span:nth-child(3) { top: 16px }
.nav-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.nav-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.nav-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

.nav-boton[aria-expanded="true"] { color: var(--p-paper) }

@media (max-width: 860px) {
  .nav-boton { display: block }
  .nav-enlaces {
    position: fixed;
    inset: 0;

    background: var(--p-noche);
    color: var(--p-paper);
    flex-direction: column;
    justify-content: center;
    gap: var(--p-s-10);
    transform: translateX(100%);

    visibility: hidden;
    transition: transform var(--p-m-slow) var(--p-ease),
                visibility 0s linear var(--p-m-slow);
    z-index: var(--p-z-menu);
  }
  .nav-enlaces.abierto {
    transform: none;
    visibility: visible;
    transition: transform var(--p-m-slow) var(--p-ease), visibility 0s;
  }
  .nav-enlaces a { font-size: var(--p-t-3) }
  .nav-acceso { padding: 12px 30px }
}