/* --- Posición inicial del dedo (oculto por defecto) --- */
#guia-dedo { 
    position: absolute; 
    top: 50%; 
    right: 20px; 
    transform: translateY(-50%); 
    z-index: 100; 
    pointer-events: none; /* Evita que el dedo bloquee el click real en los colores */
    opacity: 0; 
    transition: opacity 0.5s ease; 
}

/* --- Tamaño y preparación para la animación --- */
#guia-dedo span {
    font-size: 26px;
    display: block;
    animation: deslizarDedo 2s infinite;
}

/* --- La animación de izquierda a derecha --- */
@keyframes deslizarDedo {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: translateX(-60px); opacity: 1; }
    100% { transform: translateX(-60px); opacity: 0; }
}