/* =====================================================================
   MICRO-ANIMACIONES · Premium · 0.2s – 0.35s ease-in-out
   ===================================================================== */

.icon-anim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), color .28s ease-in-out;
  will-change: transform;
}

.icon-anim-bounce:hover { animation: iconBounce .35s ease-in-out; }
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-5px); }
  70%      { transform: translateY(-1px); }
}

.icon-anim-scale:hover { transform: scale(1.18); }

.icon-anim-rotate:hover { transform: rotate(-14deg) scale(1.1); }

.icon-anim-pulse { animation: iconPulse 2.4s ease-in-out infinite; }
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.icon-anim-bell:hover { animation: bellSwing .6s ease-in-out; }
@keyframes bellSwing {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(16deg); }
  40%      { transform: rotate(-12deg); }
  60%      { transform: rotate(9deg); }
  80%      { transform: rotate(-4deg); }
}

.icon-anim-heart:hover { animation: heartBeat .65s ease-in-out; color: var(--c-rose-deep); }
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.25); }
  50%      { transform: scale(.92); }
  75%      { transform: scale(1.1); }
}

.btn-vibrar { animation: vibrar .45s ease-in-out; }
@keyframes vibrar {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

.carrito-animando { animation: carritoPop .55s ease-in-out; }
@keyframes carritoPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Botones con feedback premium */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background .25s ease-in-out;
  pointer-events: none;
}
.btn:active { transform: scale(.97); }
.btn:active::after { background: rgba(255, 255, 255, .35); }

/* Fade-in global al cargar */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn .5s ease-out; }

/* Shake para errores */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.shake { animation: shakeX .5s ease-in-out; }