.mascota-flotante {
    position: fixed;
    bottom: -120px; /* Empieza escondido abajo */
    right: 20px; /*para que salga a 20px de lado derecho no tan pegado*/
    font-size: 50px; /* Tamaño del animalito */
    transition: bottom 0.5s;
    z-index: 100;/*para que salga encima de todo y no bloque algo*/
    pointer-events: none; /* Para que no bloquee clics */
}

.mascota-flotante.visible {
    bottom: 40px; /* Sube a la pantalla como tenemos la transicion arriba pues vera que sale poco a poco con animación*/
}

/* Animación de la manita saludando */
.saludo {
    display: inline-block;
    transform-origin: 70% 70%;/*este es para que la mano se se coloque en la posición que queremos y como le tenemos animación abajo se moverá de un lado a otro ya que lo tenemos de manera infinita y al ternada ya que si no no se moveria de izquierda a derecha */
    animation: saludo 0.5s infinite alternate;
}

@keyframes saludo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(20deg); } /*aquí le decimos que tanto queremos que se mueva si muy inclinado o no dependiendo los grados que sería como un transportador*/
}