.circle{
    height: 24px;
    width: 24px;
    border-radius: 24px;
    background-color: black;
    position: fixed;
    cursor: none;
    pointer-events: none; 
    z-index: 999999;
}

body {
    cursor: none;
}

body.cursor-over-interactive {
    cursor: none; 
}

a, button, input[type="submit"], [data-cursor-interactive] {
    cursor: none !important; /* El !important es solo por si acaso otro estilo lo está sobrescribiendo */
}


/* Esta regla SOLO se activa si JS detectó Android/iOS */
html.es-movil .circle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Opcional: Asegúrate de que los botones tengan cursor normal en estos casos */
html.es-movil a, 
html.es-movil button {
    cursor: pointer !important;
}


@media (max-width: 1370px) {

    /* 1. Ocultar el cursor personalizado */
    .circle {
        display: none !important;
    }

    /* 2. Restaurar la flecha normal del sistema en toda la web */
    body {
        cursor: auto !important; 
    }

    /* 3. FORZAR la "manita" en elementos interactivos */
    a, 
    button, 
    input[type="submit"], 
    input[type="button"], 
    [role="button"],
    .clickable { /* Añade aquí cualquier otra clase interactiva que uses */
        cursor: pointer !important;
    }
}