/* ============================================================
   Cursor "esfera de plasma" (assets/js/cursor.js) — design-mockup
   styles.css, verbatim. Only active with a fine pointer and no
   reduced motion: the JS adds .fx-cursor to <html>. The sphere radii
   (22 / 32 / 19) must match R_* in the JS.
   ============================================================ */
.fx-cursor,
.fx-cursor * { cursor: none !important; }
.fx-cursor input:not([type=checkbox]):not([type=radio]):not([type=range]),
.fx-cursor textarea { cursor: text !important; }

.fx-cursor__canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;          /* los rayos van sobre el cristal */
}
.fx-cursor__ring,
.fx-cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
.fx-cursor--on .fx-cursor__ring,
.fx-cursor--on .fx-cursor__dot { opacity: 1; }

/* la esfera: cristal con un brillo arriba a la izquierda; se centra con margen
   negativo para no pelear con el translate del JS */
.fx-cursor__ring {
  z-index: 9997;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1px solid rgba(25, 217, 220, .55);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 38%),
              radial-gradient(circle at 50% 50%, rgba(10, 107, 240, .06) 40%, rgba(10, 107, 240, .22) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 18px rgba(25, 217, 220, .3), inset 0 0 12px rgba(25, 217, 220, .25);
  transition: opacity .25s, width .25s cubic-bezier(.2, .7, .2, 1), height .25s cubic-bezier(.2, .7, .2, 1),
              margin .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s;
}
/* el puntero: una flecha chica y blanca en el centro de la esfera; la punta (0, 0) es el punto exacto del cursor */
.fx-cursor__dot {
  z-index: 9999;
  width: 15px;
  height: 20px;
  margin: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 15'%3E%3Cpath d='M1 1v12.2l3.2-2.9h5.3z' fill='%23fff' stroke='%230A1C2E' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
  filter: drop-shadow(0 0 3px rgba(25, 217, 220, .6));
  transition: opacity .25s;
}

/* sobre algo clicable: la esfera crece y se carga */
.fx-cursor--hot .fx-cursor__ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 0 28px rgba(25, 217, 220, .5), inset 0 0 18px rgba(25, 217, 220, .4);
}

/* sobre algo clicable también aparece la manita de siempre: reemplaza a la flecha dentro de la esfera,
   con la punta del dedo índice en el punto exacto del cursor (por eso el margen negativo) */
.fx-cursor--hot .fx-cursor__dot {
  width: 22px;
  height: 25px;
  margin: -1px 0 0 -7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 25'%3E%3Cpath d='M5.4 3.2A2 2 0 0 1 9.4 3.2V8.6A1.7 1.7 0 0 1 12.8 8.6A1.7 1.7 0 0 1 16.2 9.6A1.7 1.7 0 0 1 19.6 10.6V16.5C19.6 20.2 17.4 22.6 14 22.6H10.6C8.8 22.6 7.6 21.8 6.6 20.6L2.4 15.6C1.6 14.6 2.6 13.2 3.8 13.7L5.4 14.9Z' fill='%23fff' stroke='%230A1C2E' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M9.4 9.6V13.6M12.8 10.2V13.6M16.2 11.2V13.6' stroke='%230A1C2E' stroke-width='.8' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* clic: la esfera se contrae un poco; la flecha no se anima, así nunca sale de ella */
.fx-cursor--down .fx-cursor__ring {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
}

/* sobre campos de texto: solo queda el cursor de texto nativo */
.fx-cursor--text .fx-cursor__ring,
.fx-cursor--text .fx-cursor__dot { opacity: 0; }