/* Micro-animaciones de CTA — compartido en todo el sitio v2 (index, catálogo, producto, carrito).
   Sutiles y con propósito: guían la mirada al CTA principal (saliencia, Sistema 1) sin distraer.
   Se apagan con prefers-reduced-motion o con <html class="no-motion">. */
.btn{transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,17,17,.14)}
.btn:active{transform:translateY(0) scale(.98);box-shadow:none}
.card{transition:box-shadow .18s,transform .18s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(15,17,17,.12)}
/* "Comprar ahora": pulso suave + anillo cada ~2,5 s; se pausa al pasar el mouse o con foco */
@keyframes ctaPulse{0%,70%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,164,28,0)}
  80%{transform:scale(1.03);box-shadow:0 0 0 6px rgba(255,164,28,.35)}90%{transform:scale(1.01);box-shadow:0 0 0 10px rgba(255,164,28,0)}}
.cta-pulse,.btn-orange[data-buy]{animation:ctaPulse 2.5s ease-in-out infinite;will-change:transform}
.cta-pulse:hover,.cta-pulse:focus-visible,.btn-orange[data-buy]:hover,.btn-orange[data-buy]:focus-visible{animation-play-state:paused}
/* "Agregar al carrito": brillo que cruza el botón (el principal en loop lento; en tarjetas solo al hover) */
@keyframes ctaShine{0%{transform:translateX(-120%) skewX(-20deg)}35%,100%{transform:translateX(320%) skewX(-20deg)}}
.cta-shimmer,.card .btn-yellow{position:relative;overflow:hidden;isolation:isolate}
.cta-shimmer::after,.card .btn-yellow::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-120%) skewX(-20deg);pointer-events:none;z-index:-1}
.cta-shimmer::after{animation:ctaShine 3.6s ease-in-out 1.2s infinite}
.card .btn-yellow:hover::after{animation:ctaShine .9s ease-out 1}
.cta-shimmer:hover::after{animation-play-state:paused}
/* contador del carrito: rebote al agregar (la clase .bump la pone app.js) */
@keyframes cartBounce{0%{transform:scale(1)}30%{transform:scale(1.45) translateY(-3px)}55%{transform:scale(.92)}75%{transform:scale(1.08)}100%{transform:scale(1)}}
.cart-count.bump{animation:cartBounce .55s cubic-bezier(.3,1.5,.5,1)}
.btn.done{animation:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .btn:hover,.card:hover{transform:none}
}
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important}