[data-personaje], [data-objeto] { display: inline-block; line-height: 0; }
.pj, .obj { width: 100%; height: auto; overflow: visible; }
.pj g { transform-box: view-box; }
.pj-brazo-i { transform-origin: -80px 37px; }
.pj-brazo-d { transform-origin: 80px 37px; }
.pj-pierna-i { transform-origin: -32px 110px; }
.pj-pierna-d { transform-origin: 32px 110px; }
.pj-salto, .pj-todo { transform-origin: 0 180px; }
.pj-ojos { transform-origin: 0 -13px; }

.pj--saludar .pj-brazo-d { transform: rotate(-102deg); }
.pj--celebrar .pj-brazo-i { transform: rotate(104deg); }
.pj--celebrar .pj-brazo-d { transform: rotate(-104deg); }
.pj--lupa .pj-brazo-d { transform: rotate(-78deg); }
.pj--pensar .pj-brazo-d { transform: rotate(-150deg) scale(.6); }
.pj--dormir .pj-brazo-i { transform: rotate(-20deg); }
.pj--dormir .pj-brazo-d { transform: rotate(20deg); }

@media (prefers-reduced-motion: no-preference) {
  .pj-ojos { animation: pj-parpadeo 4.2s var(--pj-retraso, 0s) infinite; }
  .pj--respirar .pj-salto, .pj--lupa .pj-salto, .pj--pensar .pj-salto, .pj--sorpresa .pj-salto { animation: pj-respira 3s ease-in-out infinite; }
  .pj--saludar .pj-salto { animation: pj-respira 3s ease-in-out infinite; }
  .pj--saludar .pj-brazo-d { animation: pj-saluda 1s ease-in-out infinite; }
  .pj--saltar .pj-salto { animation: pj-salta 1.1s cubic-bezier(.3, 0, .4, 1) infinite; }
  .pj--saltar .pj-sombra { animation: pj-sombra 1.1s cubic-bezier(.3, 0, .4, 1) infinite; transform-origin: 0 186px; }
  .pj--celebrar .pj-salto { animation: pj-salta 1s cubic-bezier(.3, 0, .4, 1) infinite; }
  .pj--celebrar .pj-brazo-i { animation: pj-festeja-i 1s ease-in-out infinite; }
  .pj--celebrar .pj-brazo-d { animation: pj-festeja-d 1s ease-in-out infinite; }
  .pj--celebrar .pj-confeti { animation: pj-confeti 1s ease-out infinite; transform-origin: 0 -20px; }
  .pj--caminar .pj-salto { animation: pj-camina 1s ease-in-out infinite; }
  .pj--caminar .pj-pierna-i { animation: pj-paso 1s ease-in-out infinite; }
  .pj--caminar .pj-pierna-d { animation: pj-paso 1s ease-in-out -.5s infinite; }
  .pj--caminar .pj-brazo-i { animation: pj-paso 1s ease-in-out -.5s infinite; }
  .pj--caminar .pj-brazo-d { animation: pj-paso 1s ease-in-out infinite; }
  .pj--flotar .pj-todo { animation: pj-flota 4s ease-in-out infinite; }
  .pj--flotar .pj-sombra { display: none; }
  .pj--dormir .pj-salto { animation: pj-respira 4s ease-in-out infinite; }
  .pj--dormir .pj-zetas { animation: pj-zetas 3s ease-in-out infinite; }
  .obj-llama { animation: obj-llama 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
}

@keyframes pj-parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
@keyframes pj-respira { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(.985); } }
@keyframes pj-saluda { 0%, 100% { transform: rotate(-92deg); } 50% { transform: rotate(-116deg); } }
@keyframes pj-salta {
  0%, 100% { transform: translateY(0) scale(1.03, .96); }
  15% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-90px) scale(.98, 1.03); }
  85% { transform: translateY(0) scale(1, 1); }
}
@keyframes pj-sombra { 0%, 15%, 85%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .5; } }
@keyframes pj-festeja-i { 0%, 100% { transform: rotate(104deg); } 50% { transform: rotate(118deg); } }
@keyframes pj-festeja-d { 0%, 100% { transform: rotate(-104deg); } 50% { transform: rotate(-118deg); } }
@keyframes pj-confeti { 0% { transform: scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes pj-camina { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-7px) rotate(2.5deg); } }
@keyframes pj-paso { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes pj-flota { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes pj-zetas { 0% { opacity: 0; transform: translateY(10px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes obj-llama { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.92, 1.08) rotate(3deg); } }