.fire {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 100, 0, 1), rgba(255, 215, 0, 0.8), rgba(255, 0, 0, 0));
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: fireAnimation 0.5s ease-in-out infinite;
}

@keyframes fireAnimation {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(0.2) translateY(-100px);
        opacity: 0;
    }
}

/* Estilo de la estela */
.trail {
    animation: trailAnimation 1s forwards;
}

@keyframes trailAnimation {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(-50px);
    }
}