/* 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); }
}

/* ---------- Selector de idioma ES | EN (español predeterminado) ---------- */
.lang {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--nav-link-hover-bg);
}

.lang a {
  display: block;
  min-width: 36px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  color: var(--nav-link);
  font-size: var(--lang-size);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lang a[aria-current="page"] { background: var(--bg); color: var(--nav); }
.lang a:not([aria-current]):hover { color: var(--bg); }
.lang a:focus-visible { outline: 2px solid var(--bg); outline-offset: 1px; }

/* En el navbar solo desde 768 (a 375 no cabe junto al botón) */
.lang--nav { display: none; margin-right: 4px; }

/* En celular: debajo del navbar, alineado a la derecha */
.lang--bar {
  display: flex;
  width: max-content;
  margin: 8px var(--nav-top) 0 auto;
  background: var(--nav);
}

.lang--footer { margin-top: 4px; }

@media (min-width: 768px) {
  .lang--nav { display: inline-flex; }
  .lang--bar { display: none; }
}