/* Ocultar la animación en escritorio */
@media (min-width: 768px) {
    .hand-animation-container,
    .hand-animation-container.visible,
    .hand-animation {
        display: none !important;
        visibility: hidden !important;
    }
}

@media (max-width: 767px) {
    .hand-animation-container {
        display: none !important; /* Oculta por defecto */
        position: fixed; /* Alinear con la ventana */
        top: 70px; /* Ajustado según la posición del menú (~70px desde el top) */
        left: 0;
        width: 100vw !important; /* Ancho completo de la ventana */
        height: 50px; /* Altura suficiente para la mano */
        pointer-events: none !important; /* No captura eventos */
        z-index: 1000;
        background: transparent;
        visibility: hidden;
    }

    .hand-animation-container.visible {
        display: block !important;
        visibility: visible !important;
    }

    .hand-animation {
        display: block !important;
        position: absolute;
        width: 50px;
        height: auto;
        top: 50%;
        left: calc(100vw - 60px); /* Inicia en el borde derecho */
        transform: translateY(-50%);
        z-index: 1001;
        animation: slideHand 3s ease-in-out 1; /* Un solo ciclo */
        opacity: 1;
        pointer-events: none !important; /* No captura eventos */
        border: 2px solid red; /* Para depuración */
    }

    @keyframes slideHand {
        0% {
            left: calc(100vw - 60px); /* Borde derecho */
            opacity: 1;
        }
        50% {
            left: 10px; /* Borde izquierdo */
            opacity: 1;
        }
        100% {
            left: calc(100vw - 60px); /* Vuelve al borde derecho */
            opacity: 1;
        }
    }

    .hand-animation.hidden {
        opacity: 0;
        display: none !important;
    }

    .listivo-panel-menu {
        position: relative;
        width: 100%;
        overflow: visible !important; /* Evita recorte */
    }

    .listivo-panel-menu__list {
        position: relative;
        overflow-x: auto !important;
        white-space: nowrap !important;
        pointer-events: auto !important;
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
    }

    .listivo-panel-menu__list::-webkit-scrollbar {
        display: none;
    }

    .listivo-panel-menu__item {
        display: inline-flex;
        align-items: center;
        white-space: normal;
        margin-right: 10px;
        flex-shrink: 0;
    }
}