/* Estilos generales que ya tenías */
.widget_fcs {
    position: relative; 
    top: 0px;
    user-select: none;
    /* ... otros estilos ... */
    font-size: 72px !important;
    font-family: 'Merriweather', Times, serif;
    display: flex;
    gap: 0.2px;
    align-items: start;
    justify-content: center;
    padding: 0px 50px;
    width: 100%;
    height: 100px; /* Aseguramos la altura para el movimiento */
    /* ... otros estilos ... */
}

/* Contenedor de la palabra */
.widget_fcs .list {
    /* ... tus estilos ... */
    /* Añadimos overflow: hidden; para que la palabra entrante/saliente no se vea fuera del área 
    overflow: hidden; */
    /* La altura debe ser suficiente para contener la palabra y dejar espacio para la transición */
    height: 1.2em; 
    width: 300px;
}



/* La palabra que rota */
.rotating-word {
    /* ... tus estilos ... */
    display: inline-block; /* Importante para que las transformaciones funcionen */
    transform: translateY(0); /* Posición inicial */
    opacity: 1; /* Opacidad inicial */
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Transición suave */
}

/* Animación de SALIDA: Se va hacia arriba y se vuelve transparente */
.fade-out-up {
    transform: translateY(30%); 
    opacity: 0;
}

/* Animación de ENTRADA: Viene desde abajo y se vuelve visible */
.fade-in-down {
    transform: translateY(0%); /* Vuelve a su posición normal */
    opacity: 1;
}

/* Clase de estado inicial para la palabra entrante (fuera de vista) */
.initial-down {
    transform: translateY(-30%);
    opacity: 0;
}