.bicho-andante {
    height: 120px;
}

.bicho-palma {
    position: absolute;
    right: clamp(10px, 4vw, 40px);
    bottom: -4px;
    width: 96px;
    height: 118px;
    pointer-events: none;
}

.bicho-palma svg {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: 70% 100%;
    animation: palma-menea 7s ease-in-out infinite;
}

.bicho-andante .bicho-pista {
    transform-origin: bottom center;
}

.bicho-andante.js-activo .bicho-pista {
    animation: none;
}

.bicho-pista.vivo {
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.bicho-pista.vivo:hover svg {
    filter: drop-shadow(0 0 4px rgba(164, 2, 90, 0.45));
}

.bicho-pista.muerto {
    pointer-events: none;
    opacity: 0.55;
}

.bicho-pista.muerto svg {
    animation: bicho-muere 0.45s ease-out forwards;
    filter: grayscale(1);
}

.bicho-pista.muerto .pata {
    animation: none;
}

.bicho-pista.desvanece {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bicho-pista.subiendo {
    pointer-events: none;
    transition: transform 1.8s ease-in-out, opacity 1.2s ease-in 0.6s;
}

@keyframes palma-menea {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

@keyframes bicho-muere {
    0%   { transform: rotate(0deg) scale(1); }
    60%  { transform: rotate(195deg) scale(0.9, 0.76); }
    100% { transform: rotate(180deg) scale(0.92, 0.82); }
}

@media (max-width: 576px) {
    .bicho-andante {
        height: 104px;
    }

    .bicho-palma {
        right: 8px;
        width: 76px;
        height: 94px;
    }

    .bicho-pista {
        width: 48px;
    }

    .bicho-pista svg {
        width: 48px;
        height: 63px;
    }
}