/* Botones de la web con vida al pasar el cursor (Gonzalo, 2026-10-17): los principales se sacuden («shake») y
   los secundarios dan un volteo («flip»). Solo con ratón y sin movimiento reducido; en táctil no hay hover. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;backface-visibility:hidden;}
  .btn-primary:hover{animation:wm-shake .55s cubic-bezier(.36,.07,.19,.97) both;box-shadow:0 10px 24px rgba(200,21,145,.28);}
  .btn-ghost:hover{animation:wm-flip .6s cubic-bezier(.2,.7,.2,1) both;border-color:var(--primary,#C81591);color:var(--primary,#C81591);box-shadow:0 8px 20px rgba(43,42,41,.08);}
  .btn:active{animation:none;transform:scale(.96);transition-duration:.08s;}
}
@keyframes wm-shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px) rotate(-.4deg);}
  30%,50%,70%{transform:translateX(-3px) rotate(.4deg);}
  40%,60%{transform:translateX(3px) rotate(-.4deg);}
  100%{transform:translateX(0) rotate(0);}
}
@keyframes wm-flip{
  0%{transform:perspective(520px) rotateX(0);}
  45%{transform:perspective(520px) rotateX(-90deg);}
  46%{transform:perspective(520px) rotateX(90deg);}
  100%{transform:perspective(520px) rotateX(0);}
}