confetti.css

/* ===== CONFETI ROCKERO - PALETA MORADA ===== */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: 0;
    animation: confettiFall linear forwards;
}

.confetti-piece svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ===== NUEVA PALETA DE COLORES (Morado / Negro / Blanco) ===== */
.confetti-piece.star svg { fill: #8b5cf6; }      /* Morado principal */
.confetti-piece.spark svg { fill: #c4b5fd; }     /* Morado claro */
.confetti-piece.diamond svg { fill: #ffffff; }   /* Blanco */
.confetti-piece.circle svg { fill: #4c1d95; }    /* Morado oscuro */
.confetti-piece.triangle svg { fill: #a855f7; }  /* Morado vibrante */
.confetti-piece.square svg { fill: #1a1a1e; }    /* Negro con tono sutil */

@keyframes confettiFall {
    0% {
        opacity: 0;
        transform: translateY(-10vh) rotate(0deg) scale(0.5);
    }
    10% {
        opacity: 1;
        transform: translateY(-5vh) rotate(72deg) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateY(85vh) rotate(648deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(95vh) rotate(720deg) scale(0.3);
    }
}