/* ==========================================================================
   catalogo.css — tarjeta de producto de la tienda. La usan tanto la grilla de
   accesorios como la muestra de catálogo de la portada.
   ========================================================================== */

.card-producto{ transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.card-producto:active{ transform:scale(.985); }

/* El realce sólo se aplica donde hay puntero real: en pantallas táctiles el
   estado :hover se queda pegado después del toque y la tarjeta no vuelve. */
@media (hover:hover){
  .card-producto:hover{
    transform:translateY(-4px);
    border-color:var(--color-cyan-border);
    box-shadow:var(--shadow-lift);
  }
}

.card-producto:focus-within{ border-color:var(--color-cyan-light); }

@media (prefers-reduced-motion: reduce){
  .card-producto{ transition:none; }
  .card-producto:hover,.card-producto:active{ transform:none; }
}