.site-nav {
  position:          absolute;
  inset-block-start: 0;
  inset-inline:      0;
  z-index:           var(--z-nav);

  padding-block:     clamp(var(--space-5), 2.6vh, var(--space-8));
  color:             var(--nexo-dark);
}

.site-nav__inner {
  --nav-gap: clamp(var(--space-8), 3vw, var(--space-12));

  max-width:        var(--container-max);
  margin-inline:    auto;
  padding-inline:   var(--container-pad);
  display:          flex;
  align-items:      center;

  justify-content:  flex-end;
  gap:              var(--nav-gap);
}

.site-nav.is-scrolled {
  background: transparent;
  backdrop-filter: none;
}

.nav__brand {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}
.nav__brand img { height: 36px; width: auto; }

.nav__desktop {
  padding-inline-end: var(--nav-gap);
  border-inline-end:  2px solid rgba(21, 7, 31, 0.35);
}

.nav__list {
  display:     flex;
  align-items: center;
  gap:         var(--nav-gap);
}

.nav__link,
.nav__cta,
.lang-selector__trigger {
  font-family:    var(--font-heading);
  font-size:      var(--fs-base);
  font-weight:    var(--fw-semibold);
  line-height:    var(--lh-none);
  letter-spacing: 0;
}

.nav__link {
  position:      relative;
  color:         currentColor;
  opacity:       1;
  padding-block: 0.35rem;
  transition:    opacity var(--duration-fast) ease, color var(--duration-fast) ease;
}

.nav__link::after {
  content:    '';
  position:   absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width:      0;
  height:     5px;
  background: var(--nexo-purple);
  transition: width var(--duration-base) var(--ease-out-expo);
}

.nav__link:hover,
.nav__link.is-active { opacity: 1; color: currentColor; }

.nav__link:hover::after,
.nav__link.is-active::after,
.current-menu-item > .nav__link::after,
.current_page_item > .nav__link::after { width: 100%; }

.nav__actions {
  display:     flex;
  align-items: center;
  gap:         var(--nav-gap);
  flex-shrink: 0;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:    #B200E3;
  color:         var(--nexo-cream);
  min-height:    2.35rem;
  padding:       0.75rem 1rem;
  border-radius: 0;
  white-space:   nowrap;
}

.lang-selector {
  position: relative;
}

.lang-selector__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: currentColor;
  padding: 0.35rem 0;
}

.lang-selector__flag,
.lang-selector__opt-flag {
  font-size: var(--fs-base);
  line-height: var(--lh-none);
}

.lang-selector__arrow {
  display: block;
}

.lang-selector__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  min-width: 9rem;
  padding: var(--space-2);
  border-radius: 4px;
  background: var(--nexo-cream);
  color: var(--nexo-dark);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.lang-selector__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: 2px;
  cursor: pointer;
}

.lang-selector__option:hover,
.lang-selector__option.is-selected {
  background: rgba(240, 240, 228, 0.12);
}

.nav__toggle {
  display:         none;            /* flex en móvil */
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           44px;
  height:          44px;
  padding:         0;
  background:      var(--nexo-yellow);
  cursor:          pointer;
  transition:      filter var(--duration-fast) ease;
}
.nav__toggle:hover { filter: brightness(1.05); }

.nav__toggle span {
  display:          block;
  width:            22px;
  height:           2.5px;
  background-color: var(--nexo-dark);
  border-radius:    2px;
  transform-origin: center;
  transition:       transform var(--duration-base) var(--ease-out-expo),
                    opacity   var(--duration-fast)  ease;
}

/* ── Menú móvil (panel oscuro con tarjetas claras) ────────────────────────── */
.nav__mobile {
  position:        fixed;
  inset:           0;
  z-index:         calc(var(--z-nav) + 1);   /* cubre la barra (logo/hamburguesa) */
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-6);
  padding:         var(--space-5) var(--space-5) var(--space-8);
  background:      #2a2533;
  color:           var(--nexo-cream);
  overflow-y:      auto;

  opacity:         0;
  visibility:      hidden;
  transform:       translateY(-8px);
  transition:      opacity   var(--duration-base) ease-in-out,
                   transform var(--duration-base) ease-in-out,
                   visibility 0s linear var(--duration-base);
  pointer-events:  none;
}
.nav__mobile.is-open {
  opacity:        1;
  visibility:     visible;
  transform:      none;
  pointer-events: auto;
  transition:     opacity   var(--duration-base) var(--ease-out-expo),
                  transform var(--duration-base) var(--ease-out-expo);
}

/* Cabecera: cerrar (arriba-derecha) + idioma (debajo-izquierda) */
.nav__mobile-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.nav__mobile-close {
  align-self:      flex-end;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  color:           var(--nexo-cream);
  background:      var(--nexo-dark);
  cursor:          pointer;
  transition:      filter var(--duration-fast) ease;
}
.nav__mobile-close:hover { filter: brightness(1.6); }

/* Selector de idioma (dropdown) */
.nav__mobile-lang {
  align-self: flex-start;
  position:   relative;
}
.nav__mobile-lang-trigger {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  font-family: var(--font-heading);
  font-size:   var(--fs-base);
  font-weight: var(--fw-semibold);
  color:       var(--nexo-cream);
  background:  transparent;
  cursor:      pointer;
  padding:     0.25rem 0;
}
.nav__mobile-lang-flag  { font-size: var(--fs-lg); line-height: var(--lh-none); }
.nav__mobile-lang-arrow { display: inline-flex; transition: transform var(--duration-fast) ease; }
.nav__mobile-lang-trigger[aria-expanded="true"] .nav__mobile-lang-arrow { transform: rotate(180deg); }

.nav__mobile-lang-menu {
  position:          absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
  min-width:         11rem;
  margin:            0;
  padding:           var(--space-2);
  list-style:        none;
  background:        var(--nexo-cream);
  color:             var(--nexo-dark);
  box-shadow:        0 16px 40px rgba(0, 0, 0, 0.35);
  z-index:           2;
}
.nav__mobile-lang-option {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     var(--space-2) var(--space-3);
  cursor:      pointer;
}
.nav__mobile-lang-option:hover,
.nav__mobile-lang-option.is-selected { background: rgba(21, 7, 31, 0.08); }

/* Lista de enlaces: tarjetas claras con chevron */
.nav__mobile-links {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  margin:         0;
  padding:        0;
  list-style:     none;
}
.nav__mobile-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         1rem 1.25rem;
  font-family:     var(--font-heading);
  font-size:       var(--fs-lg);
  font-weight:     var(--fw-bold);
  color:           var(--nexo-dark);
  background:      var(--nexo-bg);
  transition:      transform var(--duration-fast) ease,
                   filter var(--duration-fast) ease;
}
.nav__mobile-item:hover,
.nav__mobile-item:focus-visible { filter: brightness(0.96); }
.nav__mobile-item:active        { transform: scale(0.99); }
.nav__mobile-item-arrow { display: inline-flex; flex-shrink: 0; }

/* CTA: botón cian a lo ancho, al pie */
.nav__mobile-cta {
  margin-block-start: auto;
  display:            flex;
  align-items:        center;
  justify-content:    center;
  min-height:         3rem;
  padding:            1rem 1.25rem;
  font-family:        var(--font-heading);
  font-size:          var(--fs-base);
  font-weight:        var(--fw-bold);
  color:              var(--nexo-dark);
  background:         var(--nexo-cyan);
  white-space:        nowrap;
  transition:         filter var(--duration-fast) ease;
}

/* ── Entrada escalonada: cada elemento "aterriza" al abrir el menú ─────────── */
.nav__mobile-head,
.nav__mobile-links > li,
.nav__mobile-cta {
  opacity:    0;
  transform:  translateY(16px);
  transition: opacity   var(--duration-base) ease-in-out,
              transform var(--duration-base) ease-in-out;
}
.nav__mobile.is-open .nav__mobile-head,
.nav__mobile.is-open .nav__mobile-links > li,
.nav__mobile.is-open .nav__mobile-cta {
  opacity:   1;
  transform: none;
  transition-timing-function: var(--ease-out-expo);
}
.nav__mobile.is-open .nav__mobile-head              { transition-delay:  40ms; }
.nav__mobile.is-open .nav__mobile-links > li:nth-child(1) { transition-delay: 110ms; }
.nav__mobile.is-open .nav__mobile-links > li:nth-child(2) { transition-delay: 160ms; }
.nav__mobile.is-open .nav__mobile-links > li:nth-child(3) { transition-delay: 210ms; }
.nav__mobile.is-open .nav__mobile-links > li:nth-child(4) { transition-delay: 260ms; }
.nav__mobile.is-open .nav__mobile-links > li:nth-child(5) { transition-delay: 310ms; }
.nav__mobile.is-open .nav__mobile-cta               { transition-delay: 370ms; }

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

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .nav__mobile,
  .nav__mobile-head,
  .nav__mobile-links > li,
  .nav__mobile-cta { transition-duration: 1ms; transition-delay: 0s; }
}

@media (max-width: 1024px) {
  .site-nav__inner { --nav-gap: var(--space-6); }
}

@media (max-width: 768px) {
  /* En móvil la barra superior muestra SOLO la hamburguesa.
     El idioma y el CTA viven dentro del menú desplegable (.nav__mobile). */
  .nav__desktop                  { display: none; }
  .nav__actions .lang-selector,
  .nav__actions > .nav__cta      { display: none; }
  .nav__actions { margin-inline-start: auto; }
  .nav__toggle  { display: flex; }
  .site-nav { position: fixed; }
}

/* El menú móvil (con su idioma + CTA) solo existe por debajo del breakpoint. */
@media (min-width: 769px) {
  .nav__mobile { display: none; }
}