.cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  mix-blend-mode: difference;
}

.cursor__ring {
  position: absolute;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--color-gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--duration-base) var(--ease-out),
              height var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) ease;
}

.cursor__dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--color-gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--duration-fast) var(--ease-out),
              height var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) ease;
}

/* Estado hover (clase aplicada via JS) */
.cursor--hover .cursor__ring {
  width: 60px;
  height: 60px;
  opacity: 0.5;
}

.cursor--hover .cursor__dot {
  width: 8px;
  height: 8px;
}

/* Estado click */
.cursor--click .cursor__ring {
  width: 28px;
  height: 28px;
}

@media (pointer: coarse) {
  .cursor { display: none; }
}