/*
  OSIFIT — Menú dinámico y animado
  Header sticky en vidrio esmeralda, indicador deslizante bajo el link activo,
  hamburguesa que se transforma en X, panel móvil con revelado escalonado.
  Un solo authored moment de movimiento (nav skill: animate), transform+opacity.
*/

.site-nav {
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 1px solid var(--line-dark);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

/*
  El desenfoque vive en un pseudo-elemento, nunca directo en .site-nav:
  backdrop-filter en el header crearía un containing block nuevo para
  .site-nav__links (position:fixed), rompiendo su anclaje al viewport
  en el panel móvil (bug real encontrado y corregido en la revisión de diseño).
*/
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(2, 44, 34, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background-color var(--dur-base) var(--ease-out);
}

.site-nav.is-scrolled::before {
  background: rgba(2, 44, 34, 0.92);
}

.site-nav.is-scrolled {
  box-shadow: 0 12px 32px rgba(2, 44, 34, 0.35);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  height: 76px;
}

.site-nav__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-nav__brand:hover {
  transform: scale(1.03);
}

.site-nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin: 0 auto;
}

.site-nav__links a {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper-soft);
  padding: 0.5rem 0.1rem;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
  color: var(--paper);
}

.site-nav__indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--accent-bright);
  border-radius: var(--r-pill);
  transition: left var(--dur-base) var(--ease-in-out), width var(--dur-base) var(--ease-in-out), opacity var(--dur-fast) var(--ease-out);
  opacity: 0;
}

.site-nav__links:hover .site-nav__indicator,
.site-nav__indicator.is-active {
  opacity: 1;
}

.site-nav__cta {
  flex-shrink: 0;
  padding: 0.75rem 1.4rem;
  font-size: 0.8rem;
}

.site-nav__mobile-cta {
  display: none;
}

/* ---- Hamburguesa animada ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--paper);
  border-radius: var(--r-pill);
  transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-fast) var(--ease-out);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Responsive: panel móvil ---- */
@media (max-width: 880px) {
  .nav-toggle {
    display: flex;
  }

  .site-nav__cta {
    display: none;
  }

  .site-nav__links {
    position: fixed;
    inset: 76px 0 0 0;
    margin: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: var(--sp-md);
    background: var(--bg-deep);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }

  .site-nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav__links a {
    width: 100%;
    padding: var(--sp-sm) 0;
    font-size: 1.5rem;
    border-bottom: 1px solid var(--line-dark);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }

  .site-nav__links.is-open a {
    opacity: 1;
    transform: translateY(0);
  }

  .site-nav__links .site-nav__mobile-cta {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--sp-md);
    padding: 0.9rem 1rem;
    font-size: 0.8rem;
    white-space: normal;
    text-align: center;
    border-bottom: none;
  }

  .site-nav__indicator {
    display: none;
  }
}

/* Retraso escalonado de cada link al abrir el panel móvil */
@media (max-width: 880px) {
  .site-nav__links.is-open a:nth-child(1) { transition-delay: 40ms; }
  .site-nav__links.is-open a:nth-child(2) { transition-delay: 80ms; }
  .site-nav__links.is-open a:nth-child(3) { transition-delay: 120ms; }
  .site-nav__links.is-open a:nth-child(4) { transition-delay: 160ms; }
  .site-nav__links.is-open a:nth-child(5) { transition-delay: 200ms; }
  .site-nav__links.is-open a:nth-child(6) { transition-delay: 240ms; }
  .site-nav__links.is-open a:nth-child(7) { transition-delay: 280ms; }
  .site-nav__links.is-open a:nth-child(8) { transition-delay: 320ms; }
}