/* Contenedor para la frase animada */
.frase-container {
    display: flex; /* Usamos flexbox para alinear las letras horizontalmente */
    justify-content: center; /* Centra la frase horizontalmente */
    align-items: flex-start; /* Alinea las letras desde la parte superior */
    gap: 1vw; /* Espacio entre letras */
    font-size: 5vw; /* Tamaño dinámico basado en el ancho de la ventana */
    font-family: 'Arial', sans-serif;
    color: #0ce117; /* Color inicial de las letras */
    z-index: 10; /* Asegura que las letras estén encima de la imagen */
    width: 100%;
    height: auto;
    overflow: visible;
    pointer-events: none;
    margin-top: 2rem;
}

/* Letras individuales dentro del contenedor */
.frase-container span {
    opacity: 0;
    position: relative;
    top: -150px; /* Comienzan fuera del contenedor */
    font-size: 100%;
    transition: all 0.5s ease-in-out;
}

/* Cuando las letras son visibles */
.frase-container span.show {
    opacity: 1;
    top: 0; /* Posición final dentro del contenedor */
}

/* Ajustes finales de color para la última letra */
.frase-container span.show:last-of-type {
    color: #1d1b1a; /* Cambia el color final de la última letra */
}