/* Animación para que aparezca el título en el header */

@keyframes title__fade {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.title__fade {
  opacity: 0;
  animation: title__fade 2s ease;
  animation-delay: 0.6s;
  animation-fill-mode: forwards; /* Mantiene los estilos del último frame después de la animación */
}

/* Define la animación llamada "aparecerLetra" */
@keyframes animated__letters {
  from {
    width: 0; /* Inicialmente, la anchura es 0, por lo que no se muestra ninguna letra */
  }
  to {
    width: 100%; /* Al final de la animación, la anchura es 100% para mostrar todo el texto */
  }
}

/* Aplica la animación a un elemento con la clase "texto-animado" */
.animated__letters {
  opacity: 0;
  display: inline-block; /* Hace que el texto aparezca letra por letra en una sola línea */
  overflow: hidden; /* Oculta las letras adicionales que no se están mostrando */
  white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
  animation-fill-mode: forwards; /* Mantiene los estilos del último frame después de la animación */
}

.aparecer {
  animation: animated__letters 3.5s steps(34, end); /* Utiliza la animación durante 2 segundos */
}