/* ==========================================================================
   BOTONES — botón principal y efectos con el mouse
   Efectos (magnético, luz que sigue el cursor, onda y pulso al presionar):
   las clases .magnetic / .btn-glow las añade modules/buttons.js solo cuando
   hay un puntero fino (mouse); en pantallas táctiles no se aplican.
   ========================================================================== */

/* Botón principal (pastilla azul) */
.btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; color: #FFFFFF; background: var(--accent-text); padding: 16px 26px; border-radius: 999px; }
.btn-primary:hover { color: #FFFFFF; }

/* ---------- Botón magnético ---------- */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background-color .3s ease;
  will-change: transform;
}

/* ---------- Luz que sigue la punta del cursor ---------- */
.btn-glow { position: relative; overflow: hidden; isolation: isolate; }
.btn-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(130px circle at var(--mx, 50%) var(--my, 50%),
    rgb(var(--glow-rgb) / 0.45),
    rgba(70, 140, 255, 0.15) 45%,
    transparent 70%);
}
.btn-glow:hover::after { opacity: 1; }

/* ---------- Onda de color al presionar ---------- */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  background: radial-gradient(circle,
    rgba(160, 230, 255, 0.75),
    rgba(90, 150, 255, 0.40) 45%,
    transparent 70%);
  animation: btn-ripple 0.65s ease-out forwards;
}
@keyframes btn-ripple { to { transform: scale(1); opacity: 0; } }

.btn-pulse { animation: btn-pulse 0.55s ease-out; }
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(120, 200, 255, 0.55), 0 0 26px rgba(90, 160, 255, 0.50);
         filter: saturate(1.6) brightness(1.10); }
  100% { box-shadow: 0 0 0 20px rgba(120, 200, 255, 0), 0 0 8px rgba(90, 160, 255, 0);
         filter: saturate(1) brightness(1); }
}

/* Resplandor al pasar sobre los botones de color */
.btn-glow:hover {
  box-shadow: 0 0 28px rgb(var(--accent-rgb) / 0.45), 0 0 8px rgb(var(--accent-rgb) / 0.3);
}