/* Animación CSS 2D - Agrandar los botones, cambiar el color y hacer un efecto de shine horizontal al hacer hover */
.btn-animated {
  position: relative;
  overflow: hidden !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Hacer el botón más grande y ponerle sombra */
.btn-animated:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Crear un elemento temporal después del botón con forma diagonal para simular el destello */
.btn-animated::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

/* Mover el destello de izquierda a derecha por encima del botón al hacer hover sobre él */
.btn-animated:hover::after {
  left: 125%;
}

/* Animación CSS 3D - Hacer que las imagenes se inclinen en 3D */
.tilt-3d {
  /* Transiciones para que sea un movimiento suave */
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
  border-radius: 12px;
}

/* Hacer que se incline, se gire y se agrande y además añadirle una sombra */
.tilt-3d:hover {
  transform: perspective(800px) rotateX(5deg) rotateY(-5deg) scale(1.02);
  box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.25);
}

/* Animación con Javascript - Hacer que las secciones aparezcan suavemente al scrollear */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}