/* Navbar píldora · estructura y medidas de see-for-yourself (.navbar)
   Cambios: fondo --nav (ref rgb(2,1,9)), wordmark SVG claro de 28px (ref texto PP Neue Montreal),
   círculo de flecha --accent (ref #0099ff). */

.navbar {
  position: sticky;
  top: var(--nav-top);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  width: calc(100% - var(--nav-top) * 2);
  max-width: var(--container);
  height: var(--nav-h);
  margin: var(--nav-top) auto 0;
  padding: var(--nav-pad);
  background: var(--nav);
  border-radius: var(--radius-pill);
}

.navbar__logo {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 16px;
}

.navbar__logo img {
  width: auto;
  height: var(--logo-h);
}

.navbar__links {
  display: none;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.navbar__links a {
  display: block;
  padding: var(--nav-link-pad);
  border-radius: var(--radius-pill);
  font-size: var(--nav-link-size);
  font-weight: 500;
  color: var(--nav-link);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

.navbar__links a:hover,
.navbar__links a[aria-current="page"] {
  background: var(--nav-link-hover-bg);
  color: var(--bg);
}

/* CTA píldora pequeño (.cta-pill) */
.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--cta-gap);
  padding: var(--cta-pad);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--cta-size);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.cta-pill__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-arrow);
  height: var(--cta-arrow);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--surface);
}

.cta-pill__arrow svg { width: 9px; height: 9px; }

@media (min-width: 768px) {
  .navbar__logo { flex: 0 0 auto; }
  .navbar__links { display: flex; flex: 1; }
}

/* ---------- Respuesta del botón del navbar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cta-pill,
  .cta-pill__arrow,
  .cta-pill__arrow svg { transition: transform var(--dur-fast) var(--ease-out); }

  .cta-pill:active {
    transform: scale(var(--press-scale));
    transition-duration: var(--dur-press);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cta-pill:hover .cta-pill__arrow { transform: scale(1.08); }
  .cta-pill:hover .cta-pill__arrow svg { transform: translateX(2px); }
}