/* ==========================================================
   NAV · barra superior fija y barra de progreso de scroll
   ========================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 64px;
  background: var(--color-nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-soft);
}
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }

.logo-nav { height: 48px; width: auto; display: block; }

.nav-links { display: flex; gap: 26px; }
.nav-links a { text-decoration: none; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.nav-links a:hover { color: var(--color-cream); }

#nav-progress { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; background: var(--color-accent); }

/* Móvil: solo logo + botón. Va DESPUÉS de .nav-links{display:flex} para ganarle en la cascada. */
@media (max-width: 900px) {
  .nav-links { display: none; }
}

@media (max-width: 500px) {
  .site-nav .btn { padding: .9em 1em; font-size: .78rem; white-space: nowrap; } /* .9em → 44 px de alto mínimo */
}

/* Pantallas muy angostas (320 px): logo y botón en una sola línea */
@media (max-width: 360px) {
  .logo-nav { height: 40px; }
  .site-nav .btn { padding: .9em .8em; letter-spacing: .02em; }
  .site-nav .wa-icono { margin-right: .3em; }   /* con el ícono, el botón entra justo a 320 px */
}