/* ===== Movimiento y sensación táctil (se carga al final) ===== */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1)}

/* Base móvil: sin destello gris al tocar, sin retraso de toque, sin texto seleccionable en controles */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button,[role=button],.chip,.opt,.tab{touch-action:manipulation}
button,.btn,.chip,.nav a,.seg button,.cart-btn,.pd-qty button,.qadd{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Respuesta al toque: se hunde al instante, se suelta rápido */
.btn,.chip,.nav a,.seg button,.gens button,.cart-btn,.cb-in,.pd-qty button,.qadd,.st-arrow,.soc,.opt,.co-back{transition-timing-function:var(--ease-out)}
.btn:active,.cart-btn:active,.pd-qty button:active,.qadd:active,.st-arrow:active,.soc:active{transform:scale(.97)}
.chip:active,.seg button:active,.gens button:active,.nav a:active,.opt:active{transform:scale(.96)}
.cb-in{transition:transform .16s var(--ease-out)}
.cb-in:active{transform:scale(.98)}
.chip,.seg button,.gens button,.nav a,.opt{transition-property:transform,color,background-color,border-color,box-shadow}
.chip,.seg button,.gens button,.nav a,.opt{transition-duration:.16s}

/* Foto de la tarjeta: el zoom al pasar el mouse sí se anima (efectos.css lo pisaba) */
.shot img{transition:transform .4s var(--ease-out),opacity .4s ease}

/* Tarjetas, promos y redes: entrada y salida con curva fuerte */
.card{transition:border-color .2s,transform .25s var(--ease-out),box-shadow .25s}
.pcard{transition:transform .25s var(--ease-out),border-color .2s}
.soc{transition:transform .25s var(--ease-out),border-color .2s,box-shadow .25s}

/* Brillo de WhatsApp: ahora con transform (antes animaba "left" y forzaba re-cálculo de diseño) y solo en botones destacados */
.btn-wa::after{left:0;transform:translateX(-150%) skewX(-20deg);will-change:transform}
@keyframes shine{0%,70%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(325%) skewX(-20deg)}}
.card .btn-wa::after,.cart .btn-wa::after,.co .btn-wa::after{animation:none;display:none}

/* Paneles: entra con curva fuerte, ≤300 ms */
.cart{transition-duration:.3s;transition-timing-function:var(--ease-out)}
.pd{transition-timing-function:var(--ease-out)}
.co{transition-timing-function:var(--ease-out)}
.cart-ov,.pd-ov{transition-timing-function:ease-out}

/* Teléfono: el fondo borroso a pantalla completa es caro; se cambia por un fondo más oscuro */
@media (pointer:coarse){
  .pd-ov,.cart-ov{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,3,12,.82)}
}

/* ===== Burbujas: brinquito al seleccionar un producto ===== */
#bub{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.bub,.bub-ring,.bub-fly{position:absolute;left:0;top:0;display:block;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.bub{background:radial-gradient(circle at 31% 27%,rgba(255,255,255,.95) 0 13%,rgba(255,255,255,0) 15%),radial-gradient(circle at 50% 52%,rgba(236,72,153,.16),rgba(157,107,240,.42) 64%,rgba(255,255,255,.6) 100%);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 -3px 6px rgba(157,107,240,.35),0 0 12px rgba(236,72,153,.28)}
.bub-ring{width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid rgba(236,72,153,.75);box-shadow:0 0 14px rgba(157,107,240,.45)}
.bub-fly{display:block}

/* Detalle del producto: entra como burbuja (sube, se pasa un poquito y se acomoda) y la foto da un brinquito */
@keyframes pdPop{0%{transform:translateY(28px) scale(.9);opacity:.6}55%{transform:translateY(-6px) scale(1.025);opacity:1}78%{transform:translateY(2px) scale(.995)}100%{transform:none;opacity:1}}
@keyframes pdJump{0%,22%{transform:translateY(0) scale(1)}40%{transform:translateY(-16px) scale(.97,1.04)}62%{transform:translateY(0) scale(1.04,.95)}80%{transform:translateY(-4px) scale(.99,1.01)}100%{transform:none}}
.pd-ov.on .pd{animation:pdPop .46s cubic-bezier(.3,.7,.3,1) both}
.pd-ov.on .pd-img img{animation:pdJump .8s .18s both}