/* ============ Gimnasio Escanes — estilos base ============ */

html { scroll-behavior: smooth; }
body { background-color: #0B0B0B; }

::selection { background: #1D4ED8; color: white; }

/* Scroll estilizado */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0B0B0B; }
::-webkit-scrollbar-thumb { background: #2A2A2A; border-radius: 8px; }

/* Textura sutil de fondo tipo grilla/cancha */
.grid-texture {
  background-image:
    linear-gradient(rgba(29, 78, 216, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 78, 216, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
}

.glow-accent {
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.35), 0 20px 60px -20px rgba(29, 78, 216, 0.45);
}

/* Tarjetas tipo "aviso pinchado" en el tablón */
.pin-card {
  position: relative;
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform .25s ease, box-shadow .25s ease;
}
.pin-card:hover {
  transform: rotate(0deg) translateY(-4px);
}
.pin-tape {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 70px;
  height: 22px;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.35);
  backdrop-filter: blur(1px);
}

/* Fotos de la galería "Así es el gym" */
.photo-tile {
  transition: box-shadow .25s ease;
}
.photo-tile:hover {
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.45), 0 20px 45px -20px rgba(29, 78, 216, 0.5);
}

/* Animación de aparición al hacer scroll */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .pin-card { transition: none; }
}

/* Subrayado animado en el menú */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%; height: 2px;
  background: #3B82F6;
  transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }