/* Swinger Party — Piñita animada con hojas de fotogramas (Fase 21, js/pinita-anim.js).
 * La hoja tiene 4 columnas y 4 filas (3 en «cerca»): la columna avanza con steps(4) cada fila y la fila avanza con steps(filas) durante todo el clip.
 * El ancho del fotograma sale solo: una imagen SVG transparente con su proporción (sin aspect-ratio, que Chromium 60 no tiene).
 * Compatibilidad con Chromium ~60: sin gap en flexbox, sin inset, aspect-ratio ni min()/max()/clamp(). */
.pa { position: relative; display: inline-block; height: 100%; vertical-align: bottom; pointer-events: none; }
.pa-sp { display: block; height: 100%; width: auto; }
.pa-fr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0; background-size: 400% 400%; animation: pa-x 1.01s steps(4, end) infinite, pa-y 4.04s steps(4, end) 1; }
.pa-r3 .pa-fr { background-size: 400% 300%; animation: pa-x 0.73s steps(4, end) infinite, pa-y3 2.92s steps(3, end) 1; }
@keyframes pa-x { from { background-position-x: 0%; } to { background-position-x: 133.3333%; } }
@keyframes pa-y { from { background-position-y: 0%; } to { background-position-y: 133.3333%; } }
@keyframes pa-y3 { from { background-position-y: 0%; } to { background-position-y: 150%; } }
.pa-quieta .pa-fr { animation: none; }
.pa-loop .pa-fr { animation: pa-x 1.01s steps(4, end) infinite, pa-y 4.04s steps(4, end) infinite; }
.pa-loop.pa-r3 .pa-fr { animation: pa-x 0.73s steps(4, end) infinite, pa-y3 2.92s steps(3, end) infinite; }
@media (prefers-reduced-motion: reduce) { .pa-fr { animation: none !important; } }