/* Botón píldora con círculo de flecha · see-for-yourself (.btn-blue)
   Cambios: fondo --accent (ref #0099ff); variante secundaria propia. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-text);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  text-decoration: none;
  white-space: nowrap;
}

.btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon);
  height: var(--btn-icon);
  border-radius: 50%;
}

.btn__icon svg { width: 11px; height: 11px; }

.btn--primary {
  background: var(--accent);
  color: var(--surface);
}
.btn--primary .btn__icon { background: var(--btn-icon-bg); }

.btn--secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
}
.btn--secondary .btn__icon {
  background: var(--accent);
  color: var(--surface);
}

/* ---------- Respuesta al tocar y al pasar el mouse ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .btn__icon,
  .btn__icon svg { transition: transform var(--dur-fast) var(--ease-out); }

  .btn:active {
    transform: scale(var(--press-scale));
    transition-duration: var(--dur-press);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover:active { transform: scale(var(--press-scale)); }
  .btn:hover .btn__icon { transform: scale(1.08); }
  .btn:hover .btn__icon svg { transform: translateX(2px); }
  .btn--down:hover .btn__icon svg { transform: translateY(2px); }
}