.timeline-slider-navigation button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanco);
  background: var(--negro);
  width: 48px;
  height: 48px;
  cursor: pointer;
  padding: 0;
  border: none;
}

.timeline-slider-navigation button span {
  font-family: "Material Icons";
  font-size: 40px;
  font-weight: 500;
  color: var(--blanco);
  background: none;
}

.timeline-slider-navigation button.disabled {
  background: var(--negro-tr);
}

.timeline-slider-navigation button.disabled:hover {
  background: var(--negro-tr);
}

.timeline-slider-navigation button:hover,
.timeline-slider-navigation span button:hover {
  background: var(--negro);
  padding: 0;
  border: none;
}

.timeline-slider-navigation button.owl-prev.disabled span,
.timeline-slider-navigation button.owl-next.disabled span {
  color: var(--blanco-50);
}

/* ---------------------- Media Queries para mobile --------------------- */

@media (max-width: 768px) {
  .timeline__event {
    min-width: 100vw;
  }
}

@media (min-width: 769px) and (max-width: 1279px) {
  .timeline__event {
    /*min-width: 50vw;*/
    grid-auto-columns: auto;
  }
}

@media (min-width: 1280px) {
  .timeline__event {
    /*min-width: 33.33vw;*/
    grid-auto-columns: auto;
  }
}

/* Animations */

/* Animación de entrada para el primer elemento */
/* Animación para el primer elemento (más suave) */
.fadeInLeft {
  /* Aumentamos la duración a 1.2s y usamos ease-in-out */
  animation: fadeInLeft 1.2s ease-in-out both;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    /* Reducimos la distancia de movimiento para un efecto más sutil */
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animaciones para los elementos siguientes (más suaves) */
.fadeInDown {
  animation: fadeInDown 1.2s ease-in-out both;
}

.fadeInUp {
  animation: fadeInUp 1.2s ease-in-out both;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(15px); /* Movimiento más sutil */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-15px); /* Movimiento más sutil */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Si usas la clase de retraso, puedes mantenerla así: */
.animated-delayed {
  animation-delay: 0.5s;
}