/* ============================================================
   nav.css — barra de navegación fija, compartida por todas las páginas
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 400ms ease, box-shadow 400ms ease;
  font-family: var(--font-cuerpo);
}

/* Al bajar del scroll inicial (o con el menú móvil abierto) la barra se opaca */
.nav.is-solido {
  background: var(--nav-fondo);
  box-shadow: var(--nav-sombra);
}

.nav a {
  transition: color var(--t-rapida) ease, background var(--t-media) ease,
              transform var(--t-media) ease, border-bottom-color var(--t-rapida) ease;
}

.nav a:hover {
  color: var(--color-acento-oscuro);
  border-bottom-color: var(--color-acento);
}

.nav-barra {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 32px);
}

/* ── Logotipo ── */
.nav-logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

/* Logotipo completo del manual: el isotipo sobre la marca
   denominativa. A esta altura el isotipo completo, de
   Va en monocromo y no a dos tonos a propósito: el Pale Silver del
   «Fit» da 1.5:1 sobre el Old Lace del fondo y a este tamaño se
   borra. El padding lateral de la barra sostiene el área de
   resguardo. */
.nav-logotipo {
  display: block;
  height: 66px;
  width: auto;
}

@media (max-width: 767px) {
  .nav-logotipo { height: 54px; }
}

/* ── Links de escritorio ── */
.nav-links {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.nav-link {
  font-size: 13px;
  font-weight: var(--peso-cuerpo);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 10px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-texto);
  border-bottom: 2px solid transparent;
}

/* Página actual */
.nav-link.is-activa,
.nav-panel-link.is-activa {
  color: var(--color-acento-oscuro);
}

.nav-link.is-activa {
  border-bottom-color: var(--color-acento);
}

/* ── CTA "Agendar cita" ── */
.nav-cta {
  background: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  font-size: 13px;
  font-weight: var(--peso-cuerpo);
  letter-spacing: 0.06em;
  padding: 12px 20px;
  border-radius: var(--radio-pill);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nav .nav-cta:hover {
  background: var(--color-acento);
  color: var(--color-texto-inverso);
  transform: translateY(-1px);
}

.nav .nav-cta:active {
  transform: scale(0.97);
}

/* ── Hamburguesa (solo móvil): dos líneas que se cruzan al abrir ── */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  order: 2;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
}

.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-texto);
  transition: transform var(--t-larga) var(--ease-suave);
}

.nav.is-abierto .nav-burger span:first-child {
  transform: translateY(4.5px) rotate(45deg);
}

.nav.is-abierto .nav-burger span:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* ── Panel desplegable móvil ── */
.nav-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 450ms var(--ease-suave);
  background: var(--nav-panel-fondo);
}

.nav.is-abierto .nav-panel {
  max-height: 360px;
}

.nav-panel-lista {
  display: flex;
  flex-direction: column;
  padding: 8px clamp(16px, 4vw, 32px) 20px;
  border-top: 1px solid var(--linea-tenue);
}

.nav-panel-link {
  font-size: 16px;
  font-weight: var(--peso-cuerpo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 4px;
  text-decoration: none;
  color: var(--color-texto);
  border-bottom: 1px solid var(--nav-panel-linea);
}

/* ── Responsive: por debajo de 820px los links se ocultan tras la hamburguesa ── */
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

@media (max-width: 480px) {
  .nav-cta {
    font-size: 12px;
    padding: 10px 14px;
  }
  .nav-logotipo { height: 46px; }
}