/* =========================================================
   Navegación fija con indicador de progreso de lectura.
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--alto-nav);
  transition: background var(--t-media), box-shadow var(--t-media);
}

.nav--fija {
  background: var(--color-fondo-velo);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--color-linea);
}

.nav__interior {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  height: 100%;
}

.nav__marca {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  text-decoration: none;
}

/* Logo del socio a la derecha del sufijo; empuja el menú al otro extremo. */
.nav__socio {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-right: auto;
  text-decoration: none;
}

/* «By» con la misma letra que el sufijo, sin pasar a mayúsculas. */
.nav__por {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-tenue);
}

/* Acceso al panel de administración, esquina superior derecha */
.nav__ingresar {
  min-height: 38px;
  padding: var(--esp-2) var(--esp-4);
}

.nav__ingresar svg {
  width: 16px;
  height: 16px;
}

.nav__logo {
  height: var(--logo-nav-alto);
  width: auto;
}

/* Logo del socio (SKYN3T): más pequeño que el de PersonaVirtual. */
.nav__logo--socio {
  height: var(--logo-socio-alto);
}

/* Separador vertical antes del sufijo y del logo del socio */
.nav__sufijo,
.nav__socio {
  padding-left: var(--esp-3);
  border-left: 1px solid var(--color-linea);
}

.nav__sufijo {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tenue);
}

.nav__enlaces {
  display: flex;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__enlace {
  display: block;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-pill);
  font-size: var(--texto-sm);
  font-weight: 500;
  color: var(--color-tenue);
  text-decoration: none;
  transition: color var(--t-rapida), background var(--t-rapida);
}

.nav__enlace:hover {
  color: var(--color-tinta);
}

.nav__enlace.es-activo {
  background: var(--color-acento-suave);
  color: var(--color-acento);
}

.nav__menu {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.nav__menu span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: var(--color-tinta);
  transition: transform var(--t-media);
}

.nav__progreso {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--color-acento);
  transform-origin: left;
  transform: scaleX(var(--progreso, 0));
}

@media (max-width: 900px) {
  .nav__menu {
    display: block;
  }

  .nav__enlaces {
    position: absolute;
    top: var(--alto-nav);
    left: 0;
    right: 0;
    flex-direction: column;
    padding: var(--esp-4) var(--gutter) var(--esp-5);
    background: var(--color-fondo);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-media), transform var(--t-media);
  }

  .nav--abierta .nav__enlaces {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .nav--abierta {
    background: var(--color-fondo);
  }

  .nav--abierta .nav__menu span:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }

  .nav--abierta .nav__menu span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }

  .nav__enlace {
    padding: var(--esp-3) var(--esp-4);
    font-size: var(--texto-md);
  }
}

@media (max-width: 480px) {
  /* Marca completa en dos pisos: logo y, debajo, el sufijo en pequeño;
     a la derecha «By» y el logo del socio a su ancho natural. Los botones
     no se encogen. */
  .nav__marca {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-1);
  }

  .nav__sufijo {
    padding-left: 0;
    border-left: 0;
    font-size: var(--texto-nav-movil);
    letter-spacing: 0;
    white-space: nowrap;
  }

  .nav__socio {
    gap: var(--esp-1);
  }

  .nav__por {
    font-size: var(--texto-nav-movil);
    letter-spacing: 0;
  }

  .nav__logo {
    height: var(--logo-nav-alto-movil);
  }

  .nav__logo--socio {
    height: var(--logo-socio-alto-movil);
  }

  .nav__ingresar,
  .nav__menu {
    flex-shrink: 0;
  }

  /* En móvil queda solo el icono para no competir con el menú */
  .nav__ingresar {
    width: 40px;
    padding: 0;
  }

  .nav__ingresar span {
    display: none;
  }
}