.timeline-inline {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px; /* Altura del banner */
  width: 100%; /* Ancho completo del contenedor */
  text-align: center;
  background-color: #0c0a10; /* Fondo oscuro para contraste */
}

.evento {
  font-size: 2em; /* Tamaño de fuente base para los textos */
  opacity: 0; /* Inicialmente invisible */
  position: absolute;
  transition: opacity 1.5s ease; /* Transición suave */
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(
    45deg,
    rgba(255, 3, 7, 1) 12%,
    rgba(163, 5, 8, 1) 29%,
    rgba(179, 21, 21, 1) 42%,
    rgb(247, 245, 245) 56%,
    rgb(241, 218, 218) 73%,
    rgb(250, 250, 250) 89%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dia-madre {
  font-size: 2.5em; /* Tamaño más grande para "Día de la Madre" */
  font-weight: 900; /* Texto en negrita */
}

#corazon {
  font-size: 3em; /* Tamaño del corazón más grande */
  background: linear-gradient(
    45deg,
    rgba(255, 3, 7, 1) 12%,
    rgba(163, 5, 8, 1) 29%,
    rgba(179, 21, 21, 1) 42%,
    rgb(221, 124, 124) 56%,
    rgb(241, 218, 218) 73%,
    rgb(250, 250, 250) 89%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0; /* Inicialmente invisible */
  transition: opacity 1.5s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.evento.animate {
  animation: fadeInOut 4s forwards; /* Animación para los textos */
}

#corazon.animate {
  animation: fadeInOut 4s forwards; /* Animación del corazón */
}