/* Estilos generales */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: Arial, sans-serif;
    text-align: center;
    color: #fff;
    position: relative;
}

/* Animación para los pétalos */
@keyframes caidaPetalos {
    0% {
        transform: translateY(-50px) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}

/* Pétalo individual */
.petalo {
    position: absolute;
    top: -50px; /* Empieza fuera de la pantalla */
    width: 30px; /* Tamaño inicial del pétalo */
    height: 30px;
    background-image: url('assets/petalo.png');
    background-size: cover;
    opacity: 0.8;
    animation: caidaPetalos linear infinite;
    z-index: -1; /* Asegura que los pétalos no interfieran con otros elementos */
}