/* Animaciones de productos: entrada de la foto, inclinación 3D, brillo que sigue el cursor, precio que "salta" al cambiar. Solo transform/opacity. */
.card .shot img{transition:transform .5s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.card.rv .shot img{transform:scale(.86) translateY(8px)}
.card .shot img.pop{animation:fxpop .5s cubic-bezier(.23,1,.32,1)}
@keyframes fxpop{0%{transform:scale(.9) rotate(-3deg)}55%{transform:scale(1.07) rotate(1deg)}100%{transform:none}}
.card .p.tick,.pdet .p.tick{animation:fxtick .45s cubic-bezier(.23,1,.32,1)}
@keyframes fxtick{0%{transform:translateY(8px);opacity:0}100%{transform:none;opacity:1}}
.card .chip{transition:transform .18s cubic-bezier(.23,1,.32,1),background-color .2s,border-color .2s}
.card .chip:active{transform:scale(.93)}
/* en pantalla grande y con ratón */
@media (hover:hover) and (pointer:fine){
  .card{transform-style:preserve-3d}
  .card:hover{transform:perspective(900px) translateY(-5px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .card:hover .shot img{transform:scale(1.07) translate(var(--tx,0px),var(--ty,0px))}
  .card .shot{overflow:hidden}
  .card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s;
    background:radial-gradient(240px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.10),transparent 70%)}
  .card:hover::before{opacity:1}
}
/* carga más rápida: lo que está lejos no se dibuja hasta acercarse */
#tienda,footer{content-visibility:auto;contain-intrinsic-size:auto 640px}
@media (prefers-reduced-motion:reduce){.card .shot img,.card .chip{transition:none!important}.card .shot img.pop,.card .p.tick{animation:none}.card::before{display:none}}