/* Cursor personalizado web*/
body.lt-cursor-active,
body.lt-cursor-active * {
    cursor: none !important;
}

.lt-cursor {
    position: fixed;
    width: 14px;
    height: 14px;
    background: var(--color-green);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    transition: width .2s, height .2s, background .2s;
    opacity: 0;
    top: 0;
    left: 0;
}

.lt-cursor-ring {
    position: fixed;
    width: 52px;
    height: 52px;
    border: 2px solid var(--color-green-glow-md);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    will-change: transform;
    transition: width .3s, height .3s, border-color .3s;
    opacity: 0;
    left: 0;
    top: 0;
}

/* Cursor custom oculto en mobiles, con breakpoint a 1200px */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
    .lt-cursor,
    .lt-cursor-ring { display: none !important; }
}

/* Estela de puntos */
.lt-cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--color-green);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99997;
    will-change: transform;
    opacity: 0;
    left: 0;
    top: 0;
}

/* Efecto hover */
.lt-cursor.is-hover {
    width: 18px;
    height: 18px;
    mix-blend-mode: difference;
}

.lt-cursor-ring.is-hover {
    width: 60px;
    height: 60px;
    border-color: var(--color-green-glow-sm);
}

/* Efecto click*/
.lt-cursor.is-click {
    width: 10px;
    height: 10px;
    background: var(--color-white);
}

.lt-cursor-ring.is-click {
    width: 44px;
    height: 44px;
    background: var(--color-green-glow-sm);
    border-color: var(--color-green-glow-md);
}