/* AMAESTETIQUE — lo propio de este sitio para ZAP Movimiento (zap-movimiento.css no se edita). */

/* La foto que viaja entre la tarjeta y la ficha (nombre por producto: movimiento.js). */
::view-transition-group(*.ama-foto) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(*.ama-foto), ::view-transition-new(*.ama-foto) { height: 100%; object-fit: contain; }

/* Esqueletos del catálogo mientras llega la página que se pidió (/api/products): el CSS dibuja las
   tarjetas de carga sobre las que ya están, sin tocar la isla de React. Reemplaza al giro viejo. */
.product-grid.loading::after { content: none; }
.product-grid.loading .product-card { position: relative; overflow: hidden; pointer-events: none; transform: none; box-shadow: none; }
.product-grid.loading .product-card > * { visibility: hidden; }
/* Mismo orden que la tarjeta (tarjeta.css): barra del nombre, foto, barra del precio */
.product-grid.loading .product-card::before {
  content: ""; position: absolute; z-index: 1; top: 48px; left: 14px; right: 14px; aspect-ratio: 1;
  border-radius: 14px; background: color-mix(in srgb, currentColor 8%, transparent);
}
.product-grid.loading .product-card > .zc-enlace::before,
.product-grid.loading .product-card > .zc-pie::before {
  content: ""; visibility: visible; position: absolute; z-index: 1; left: 14px; height: 12px;
  border-radius: 6px; background: color-mix(in srgb, currentColor 8%, transparent);
}
.product-grid.loading .product-card > .zc-enlace::before { top: 18px; right: 30%; }
.product-grid.loading .product-card > .zc-pie::before { bottom: 18px; width: 45%; }
@media (max-width: 640px) {
  .product-grid.loading .product-card::before { top: 40px; left: 10px; right: 10px; border-radius: 12px; }
  .product-grid.loading .product-card > .zc-enlace::before { top: 14px; left: 10px; }
  .product-grid.loading .product-card > .zc-pie::before { bottom: 14px; left: 10px; }
}
.product-grid.loading .product-card::after {
  content: ""; position: absolute; z-index: 2; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, currentColor 7%, transparent) 50%, transparent 80%);
  animation: zm-brillo 1.4s ease-in-out infinite;
}
.zm-liviano .product-grid.loading .product-card::after { animation-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) {
  .product-grid.loading .product-card::after { animation: none; }
}