/* Animación de aparición desde la izquierda para los números */
.hidden-left {
    opacity: 0;
    transform: translateX(-30px); /* Inicialmente desplazados a la izquierda */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.visible-left {
    opacity: 1;
    transform: translateX(0); /* Vuelven a su posición original */
}

/* Animación de aparición desde la derecha para los números */
.hidden-right {
    opacity: 0;
    transform: translateX(30px); /* Inicialmente desplazados a la derecha */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.visible-right {
    opacity: 1;
    transform: translateX(0); /* Vuelven a su posición original */
}

/* Animación para el título de la sección */
.hidden-title {
    opacity: 0;
    transform: translateY(-50px); /* Inicialmente desplazado hacia arriba */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.visible-title {
    opacity: 1;
    transform: translateY(0); /* Vuelven a su posición original */
}

/* Animación general para la sección */
.servicio .titulo-servicio {
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.servicio .numeros .item {
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Cuando los items se vuelven visibles */
.servicio .numeros .item:nth-child(1) {
    transition-delay: 0.1s; /* Aparece un poco más tarde */
}

.servicio .numeros .item:nth-child(2) {
    transition-delay: 0.2s; /* Aparece después */
}

.servicio .numeros .item:nth-child(3) {
    transition-delay: 0.3s; /* Último en aparecer */
}