/* efecto — cursor custom (solo puntero fino; nunca en touch) */
.efx-cursor { display: none; }
html.has-cursor .efx-cursor { display: contents; }
html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor [role="button"], html.has-cursor summary, html.has-cursor label, html.has-cursor .btn, html.has-cursor [data-cursor] { cursor: none; }
html.has-cursor .efx-loader, html.has-cursor .efx-ptrans { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor [contenteditable="true"] { cursor: auto; }

/* dot y ring son fixed en el contexto raíz (así mix-blend-mode mezcla con la página) */
.efx-cursor__dot, .efx-cursor__ring { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: calc(var(--z-loader) + 1); pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
html.cursor-on .efx-cursor__dot, html.cursor-on .efx-cursor__ring { opacity: 1; }
html.cursor-text .efx-cursor__dot, html.cursor-text .efx-cursor__ring, html.cursor-text .efx-cursor__trail { visibility: hidden; }
/* estela pixel */
.efx-cursor__trail { position: fixed; left: 0; top: 0; width: 4px; height: 4px; z-index: calc(var(--z-loader) + 1); pointer-events: none; background: #fff; mix-blend-mode: difference; opacity: 0; will-change: transform, opacity; }
html.cursor-link .efx-cursor__trail, html.cursor-label .efx-cursor__trail { background: var(--accent); mix-blend-mode: normal; }
.efx-cursor__dot { mix-blend-mode: difference; }
.efx-cursor__dot i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: #fff; transition: transform .35s var(--ease-out); }
.efx-cursor__ring::before { content: ''; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; transform: scale(.2) rotate(45deg); opacity: 0;
  background:
    linear-gradient(var(--paper), var(--paper)) 0 0 / 9px 2px no-repeat, linear-gradient(var(--paper), var(--paper)) 0 0 / 2px 9px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 100% 0 / 9px 2px no-repeat, linear-gradient(var(--paper), var(--paper)) 100% 0 / 2px 9px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 0 100% / 9px 2px no-repeat, linear-gradient(var(--paper), var(--paper)) 0 100% / 2px 9px no-repeat,
    linear-gradient(var(--paper), var(--paper)) 100% 100% / 9px 2px no-repeat, linear-gradient(var(--paper), var(--paper)) 100% 100% / 2px 9px no-repeat;
  transition: transform .5s var(--ease-out), opacity .3s; }
.efx-cursor__label { position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; display: grid; place-items: center; background: var(--accent); color: var(--ink); font-family: var(--font-pixel); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.1; padding: 4px; transform: scale(0) rotate(-12deg); opacity: 0; transition: transform .55s var(--ease-out), opacity .2s; white-space: nowrap; }

/* sobre algo clickeable */
html.cursor-link .efx-cursor__dot i { transform: scale(.01); }
html.cursor-link .efx-cursor__ring::before { transform: scale(1) rotate(0); opacity: 1; }
/* con etiqueta */
html.cursor-label .efx-cursor__ring::before { opacity: 0; transform: scale(1.3); }
html.cursor-label .efx-cursor__dot i { transform: scale(.01); }
html.cursor-label .efx-cursor__label { transform: scale(1) rotate(0); opacity: 1; }
html.cursor-down .efx-cursor__label { transform: scale(.82) rotate(0); }
html.cursor-down .efx-cursor__dot i { transform: scale(.6); }
html.cursor-drag .efx-cursor__label { background: var(--paper); }

/* botones magnéticos: el hover lo maneja JS (no transicionar transform en CSS) */
html.has-cursor .btn, html.has-cursor [data-magnetic] { transition-property: color, background-color, box-shadow; }
@media (prefers-reduced-motion: reduce) { .efx-cursor__label, .efx-cursor__ring::before { transition: opacity .1s; } }