/* ==============================
   ANIMACIONES DE SCROLL
============================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.aparecer {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-left.aparecer {
  opacity: 1;
  transform: translateX(0);
}

.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-right.aparecer {
  opacity: 1;
  transform: translateX(0);
}

.zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.zoom-in.aparecer {
  opacity: 1;
  transform: scale(1);
}

/* ==============================
   HOVERS Y BOTONES
============================== */
button,
.btn,
.navegacion a {
  transition: all 0.3s ease;
}

button:hover,
.btn:hover,
.navegacion a:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}