/* ===========================
   navigation.css — Sistema de navegación posicional unificado
   =========================== */

/* Contenedor de navegación (para páginas con HTML estático) */
.nav-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
}

/* Botones de navegación base */
.nav-btn {
  position: absolute;
  pointer-events: auto;
  z-index: 1201;
  background: none;
  border: none;
  color: #c81e1e;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.9rem, 1.5dvw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-decoration: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-btn:hover {
  color: #ff3c3c;
}

/* Posición: Arriba (centro superior) */
.nav-btn.pos-top {
  top: 3dvh;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center center;
}

.nav-btn.pos-top:hover {
  transform: translateX(-50%) scale(1.05);
}

/* Posición: Abajo (centro inferior, rotado 180°) */
.nav-btn.pos-bottom {
  bottom: 3dvh;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  transform-origin: center center;
}

.nav-btn.pos-bottom:hover {
  transform: translateX(-50%) rotate(180deg) scale(1.05);
}

/* Posición: Izquierda (centro izquierdo, rotado 90° antihorario) */
.nav-btn.pos-left {
  left: 3dvw;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;
}

.nav-btn.pos-left:hover {
  transform: translateY(-50%) rotate(-90deg) scale(1.05);
}

/* Posición: Derecha (centro derecho, rotado 90° horario) */
.nav-btn.pos-right {
  right: 3dvw;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
}

.nav-btn.pos-right:hover {
  transform: translateY(-50%) rotate(90deg) scale(1.05);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .nav-btn {
    font-size: clamp(0.7rem, 3dvw, 1rem);
  }

  .nav-btn.pos-left {
    left: 2dvw;
  }

  .nav-btn.pos-right {
    right: 2dvw;
  }
}