/* =========================================================
   SECCIÓN · Menú superior (fijo)
   JS: js/header.js (barra de progreso, menú compacto, enlace activo)
   ========================================================= */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgba(11, 11, 11, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark); color: var(--paper);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 72px; transition: height .3s ease;
}
.brand img { height: 46px; width: auto; transition: height .3s ease; }

/* Menú compacto al bajar (clase .scrolled la pone header.js) */
.site-header.scrolled .wrap { height: 60px; }
.site-header.scrolled .brand img { height: 38px; }

.nav { display: flex; align-items: center; gap: 28px; font-size: .95rem; }
.nav a { color: var(--nav-link); text-decoration: none; }
.nav a:not(.btn) {
  text-decoration: underline 2px transparent; text-underline-offset: 8px;
  transition: color .2s, text-decoration-color .2s;
}
.nav a:hover { color: var(--paper); }
.nav a.active:not(.btn) { color: var(--paper); text-decoration-color: var(--orange); }
.nav .btn { padding: 10px 18px; font-size: .9rem; color: var(--night); }

/* Barra naranja que muestra cuánto has bajado (--p va de 0 a 1) */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

@media (max-width: 860px) {
  .nav a:not(.btn) { display: none; }
}