/* ============================================================
   BARRA UNIFICADA (25 ago) — copia exacta de la .hv-nav del home
   (home-rediseno.css) para usarla también en nuestra-historia.html.
   Autocontenida: define sus propias medidas en el propio nav para
   no depender de tokens de otras hojas. `.is-scrolled` (la clase
   que ya alterna historia.js) actúa igual que `.is-solid`.
   ============================================================ */
.hv-nav {
  --nav-h: 76px;
  --container: 1360px;
  --pad: clamp(20px, 4vw, 52px);
  position: fixed; inset: 0 0 auto 0; z-index: 990;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.hv-nav.is-solid, .hv-nav.is-scrolled {
  background: rgba(6, 6, 6, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(241, 241, 241, 0.14);
}
.hv-nav__inner {
  width: 100%; max-width: calc(var(--container) + 40px);
  margin-inline: auto; padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.hv-nav__logo img { height: 32px; width: auto; }
@media (max-width: 560px) { .hv-nav__logo img { height: 26px; } }
.hv-nav__links { display: flex; gap: 30px; }
.hv-nav__links a {
  font-size: 13px; color: rgba(241,241,241,.72);
  text-decoration: none;
  transition: color .25s ease;
}
.hv-nav__links a:hover { color: #F1F1F1; }
@media (max-width: 900px) { .hv-nav__links { display: none; } }
.hv-nav__historia {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: #0BCEE1; text-decoration: none; white-space: nowrap;
  padding: 10px 18px; border: 1px solid rgba(11, 206, 225, .45);
  border-radius: 999px;
  transition: background .25s ease, border-color .25s ease;
}
.hv-nav__historia svg { width: 17px; height: 17px; transition: transform .25s ease; }
.hv-nav__historia:hover { background: rgba(11, 206, 225, .1); border-color: #0BCEE1; }
.hv-nav__historia:hover svg { transform: translateX(4px); }
@media (max-width: 560px) { .hv-nav__historia { font-size: 13px; padding: 8px 14px; } }

/* En la propia página de Nuestra historia la píldora se oculta:
   no tiene sentido un botón hacia la página en la que ya estás */
.hv-nav__historia[aria-current="page"] { display: none; }