/* ================================================================
   VARIANTE A — Game feel (estilos). Ver variante_a.js para el porqué.
================================================================= */

/* El hundido bajo el dedo. Transición corta a propósito: si dura mucho deja
   de leerse como respuesta física y pasa a leerse como animación. */
.cv-presionado {
  transform: scale(.96) !important;
  transition: transform .1s ease-out !important;
}

/* El anillo que sale del punto de contacto. */
.cv-onda {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle,
    rgba(241, 223, 160, .9), rgba(224, 163, 42, .5) 45%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: cvOnda .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes cvOnda {
  to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

/* La mira de cuatro esquinas. */
.cv-mira {
  position: fixed; top: 0; left: 0;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(var(--mx, -100px), var(--my, -100px));
  transition: opacity .25s ease, transform .18s cubic-bezier(.22, .61, .36, 1);
}
.cv-mira.es-visible { opacity: .85; }
.cv-mira i {
  position: absolute;
  width: 7px; height: 7px;
  border: 1.4px solid rgba(224, 163, 42, .85);
}
.cv-mira i:nth-child(1) { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.cv-mira i:nth-child(2) { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.cv-mira i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.cv-mira i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* El "trabado": se abre y brilla más fuerte. */
.cv-mira.es-blanco {
  transform: translate(var(--mx, -100px), var(--my, -100px)) scale(1.45);
}
.cv-mira.es-blanco i { border-color: rgba(241, 223, 160, .98); }

/* En pantalla táctil la mira no existe. */
@media (hover: none), (pointer: coarse) { .cv-mira { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cv-presionado { transform: none !important; }
  .cv-mira { display: none; }
}