/* Aro del cursor (acompaña al punto morado de style.css) */
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%;
  pointer-events: none; z-index: 9998;
  border: 1.5px solid rgba(168, 85, 247, 0.5);
  opacity: 0;
  transition: opacity .25s ease, width .28s cubic-bezier(.22,.61,.36,1), height .28s cubic-bezier(.22,.61,.36,1),
              background-color .25s ease, border-color .25s ease, scale .15s ease;
  will-change: transform;
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hover { width: 60px; height: 60px; background: rgba(168, 85, 247, 0.10); border-color: rgba(168, 85, 247, 0.75); }
.cursor-ring.is-down { scale: .85; }
@media (max-width: 900px), (hover: none) { .cursor-ring { display: none; } }