@keyframes salto {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-18px); }
  50%  { transform: translateY(-20px); }
  70%  { transform: translateY(-4px); }
  85%  { transform: translateY(-8px); }
  95%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

.saltando {
  animation: salto 0.5s cubic-bezier(0.33, 0, 0.66, 1);
}

#pato-wrap,
.pato-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.pato-wrap.pato-left {
  left: 44%;
}

.pato-wrap.pato-right {
  left: 56%;
}

#pato,
.pato-anim {
  width: clamp(80px, 15vw, 220px);
  cursor: pointer;
}

@media (max-width: 480px) {
  #pato-wrap {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #pato,
  .pato-anim {
    width: 180px;
  }
}