/* ========================================
   ESTILOS GLOBALES - FONDO
   ======================================== */

/* Forzar fondo de invierno - Sobrescribe cualquier otro estilo */
body {
    
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    text-align: center !important;
    min-height: 100vh !important;
}
 
/* ========================================
   BOTONES ANIMADOS
   ======================================== */

/* Botón base con animación de círculo expandible */
.animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 36px;
    border: 4px solid transparent;
    font-size: 16px;
    border-radius: 100px;
    font-weight: 600;
    box-shadow: 0 0 0 2px #ffffff;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    color: #FFFFFF;
}

/* Variante Verde */
.animated-button.green {
    background-color: #60682E;
}

.animated-button.green .circle {
    background-color: #c5e5e4;
}

.animated-button.green:hover svg {
    fill: #1f387e;
}

.animated-button.green:active {
    box-shadow: 0 0 0 4px greenyellow;
}

/* Variante Azul */
.animated-button.blue {
    background-color: #003E93;
}

.animated-button.blue .circle {
    background-color: #0073BA;
}

.animated-button.blue:hover {
    color: #D0D0D1;
}

.animated-button.blue:hover svg {
    fill: #D0D0D1;
}

.animated-button.blue:active {
    box-shadow: 0 0 0 4px #00BFFF;
}

/* Variante Roja */
.animated-button.red {
    background-color: #BA000A;
    box-shadow: 0 0 0 2px #7F0001;
}

.animated-button.red .circle {
    background-color: #7F0001;
}

.animated-button.red:hover {
    color: #FFFFFF;
}

.animated-button.red:hover svg {
    fill: #FFFFFF;
}

.animated-button.red:active {
    box-shadow: 0 0 0 4px #FF6B6B;
}


/* Variante Rosa */
.animated-button.pink {
    background-color: #4a2545;
    box-shadow: 0 0 0 2px #e8a0b4;
}

.animated-button.pink .circle {
    background-color: #e8a0b4;
}

.animated-button.pink:hover {
    color: #FFFFFF;
}

.animated-button.pink:hover svg {
    fill: #FFFFFF;
}

.animated-button.pink:active {
    box-shadow: 0 0 0 4px #FF6B6B;
}

/* Centrado opcional */
.animated-button.centered {
    margin-left: 35%;
    
}

/* SVG dentro del botón */
.animated-button svg {
    position: absolute;
    width: 24px;
    fill: #FFFFFF;
    z-index: 9;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
    right: 16px;
}

.animated-button .arr-2 {
    left: -25%;
}

/* Círculo expandible */
.animated-button .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Texto del botón */
.animated-button .text {
    position: relative;
    z-index: 1;
    transform: translateX(-12px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Efectos hover */
.animated-button:hover {
    box-shadow: 0 0 0 12px transparent;
    color: #212121;
    border-radius: 12px;
}

.animated-button:hover .arr-1 {
    right: -25%;
}

.animated-button:hover .arr-2 {
    left: 16px;
}

.animated-button:hover .text {
    transform: translateX(12px);
}

.animated-button:active {
    scale: 0.95;
}

.animated-button:hover .circle {
    width: 220px;
    height: 220px;
    opacity: 1;
}

/* ========================================
   BOTONES CIRCULARES
   ======================================== */

/* Botón circular base */
.circular-button {
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
    position: relative;
}

/* Botón FAQ */
.faq-button.red {
    width: 50px;
    height: 50px;
    background-image: linear-gradient(147deg, #F5353D 0%, #7F0001 74%);
    margin-left: 15px;
}


.faq-button.green {
    width: 50px;
    height: 50px;
    background-image: linear-gradient(147deg, #e8a0b4 0%, #2F6613 74%);
    margin-left: 15px;
}

.faq-button.pink {
    width: 50px;
    height: 50px;
    background-image: linear-gradient(147deg, #e8a0b4 0%, #4a2545 74%);
    margin-left: 15px;
}


.faq-button:hover {
    animation: jello-vertical 1s both;
}

.faq-button svg {
    height: 1.5em;
    fill: white;
}

/* Botón de Usuario */
.user-button {
    width: 150px;
    height: 150px;
    background-image: linear-gradient(147deg, #ff2525 25%, #590AB5 74%);
    margin-left: 250px;
}

.user-button:hover {
    animation: jello-vertical2 1s both;
}

.user-button svg {
    height: 10.5em;
}

/* Tooltip para botones circulares */
.tooltip {
    position: absolute;
    top: -20px;
    opacity: 0;
    background-image: linear-gradient(147deg, #6b3a5a 0%, #e8a0b4 74%);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 0.2s;
    pointer-events: none;
    letter-spacing: 0.5px;
    margin-right: -600%;
}

.tooltip::before {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    background-color: #ff2525;
    background-size: 1000%;
    background-position: center;
    transform: rotate(45deg);
    bottom: -15%;
    transition-duration: 0.3s;
}

.faq-button:hover .tooltip {
    top: -40px;
    opacity: 1;
    transition-duration: 0.3s;
}

/* ========================================
   ANIMACIONES DE BOTONES CIRCULARES
   ======================================== */

@keyframes jello-vertical {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(0.75, 1.25, 1);
    }

    40% {
        transform: scale3d(1.25, 0.75, 1);
    }

    50% {
        transform: scale3d(0.85, 1.15, 1);
    }

    65% {
        transform: scale3d(1.05, 0.95, 1);
    }

    75% {
        transform: scale3d(0.95, 1.05, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes jello-vertical2 {
    0% {
        transform: scale3d(1, 1, 1);
        background-image: linear-gradient(147deg, #ff2525 32%, #590AB5 69%);
    }

    30% {
        transform: scale3d(0.75, 1.25, 1);
        background-image: linear-gradient(147deg, #ff2525 37%, #590AB5 64%);
    }

    40% {
        transform: scale3d(1.25, 0.75, 1);
        background-image: linear-gradient(147deg, #ff2525 42%, #590AB5 53%);
    }

    50% {
        transform: scale3d(0.85, 1.15, 1);
        background-image: linear-gradient(147deg, #590AB5 42%, #ff2525 53%);
        fill: silver;
    }

    65% {
        transform: scale3d(1.05, 0.95, 1);
        background-image: linear-gradient(147deg, #590AB5 25%, #ff2525 64%);
    }

    75% {
        transform: scale3d(0.95, 1.05, 1);
        background-image: linear-gradient(147deg, #590AB5 25%, #ff2525 69%);
    }

    100% {
        transform: scale3d(1, 1, 1);
        background-image: linear-gradient(147deg, #590AB5 25%, #ff2525 74%);
    }
}

/* ========================================
   BOTONES DE FORMULARIO
   ======================================== */

/* Botón base de formulario */
.form-button {
    font-family: inherit;
    font-size: 16px;
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

/* Botón Enviar */
.btn-enviar {
    background: #28A745;
}

/* Botón Limpiar */
.btn-limpiar {
    background: #17A2B8;
}

.form-button span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
}

.form-button svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
}

.form-button:hover .svg-wrapper {
    animation: fly-icon 0.6s ease-in-out infinite alternate;
}

.form-button:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

.form-button:hover span {
    transform: translateX(5em);
}

.form-button:active {
    transform: scale(0.95);
}

@keyframes fly-icon {
    from {
        transform: translateY(0.1em);
    }

    to {
        transform: translateY(-0.1em);
    }
}

/* ========================================
   INPUTS Y LABELS
   ======================================== */

.label {
    --border: rgba(66, 66, 66, 0.733);
    --bgLabel: rgba(120, 120, 120, 1);
    --bgInput: rgba(255, 255, 255, 1);
    --color-light: rgb(98, 0, 255);
    --color-light-a: rgb(255, 125, 0);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
    background: var(--bgLabel);
    position: relative;
    font-size: 0.65rem;
    transition: all 0.3s ease-out;
}

.label>.label-title {
    border: 1px solid var(--color-light);
    color: var(--color-light);
    box-shadow: 0 2px 2px rgba(120, 120, 120, 0.25);
    padding: 0.25em 0.5em;
    background-color: var(--bgInput);
    grid-column: 1/span 1;
    grid-row: 1/span 1;
    position: relative;
    border-radius: 4px;
    translate: 10px -10px;
    transition: all 0.5s ease-out 0.5s;
    z-index: 10;
}

.label:focus .input,
.label:focus-within .input {
    background-color: var(--bgInput);
    padding: 1em;
    color: var(--color-light);
    border: 2px solid var(--color-light);
    outline: 2px solid var(--color-light);
    outline-offset: -2px;
    border-radius: 12px;
    box-shadow: 0 5px 10px rgba(98, 0, 255, 0.25), 0 -5px 20px rgba(98, 0, 255, 0.1);
    scale: 1.15;
    transition: all 0.5s cubic-bezier(0, 1.46, 1, 1.62) 0.3s;
}

.label:focus,
.label:focus-within .label-title {
    translate: 10px -20px;
    border-radius: 4px 4px 0 0;
    z-index: 0;
    transition: all 0.3s cubic-bezier(0, 1.46, 1, 1.62);
}

.input {
    appearance: none;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 2px solid var(--color-light);
    border-left: 2px solid transparent;
    background-color: var(--bgInput);
    caret-color: var(--color-light);
    min-width: 200px;
    padding: 1.25em 1em 0.25em;
    outline: 0px solid var(--color-light);
    grid-column: 1/-1;
    grid-row: 1 / -1;
    position: relative;
    transition: all 0.3s cubic-bezier(0.5, 0.6, 0.5, 0.62);
    z-index: 0;
}

.input,
.input::placeholder {
    color: var(--color-light-a);
}

/* ========================================
   SISTEMA DE IMÁGENES CIRCULARES
   ======================================== */
@keyframes sway {
    from { transform: rotate(-1deg) translateX(-3px); }  /* ← Inclinado a la izquierda */
    to   { transform: rotate(1deg) translateX(3px); }    /* → Inclinado a la derecha */
}

.imagen-circular-container {
    position: relative;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    animation: sway 8s ease-in-out infinite alternate;
}

/* ========================================
   CONTENEDOR GRANDE (350px)
   ======================================== */
.imagen-circular-container.large {
    width: 350px;
    height: 350px;
    margin-right: 350px;
}

.imagen-circular-container.large .imagen-circular-layer-1 {
    width: 350px;
    height: 350px;
    z-index: 0;
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.imagen-circular-container.large .imagen-circular-layer-2 {
    width: 350px;
    height: 350px;
    z-index: 1;
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    
}

.imagen-circular-container.large .imagen-circular-layer-3 {
    width: 200px;
    height: 200px;
    z-index: 2;
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 250px;
    margin-left: 50px;
}
/* Hover contenedor grande */
.imagen-circular-container.large:hover .imagen-circular-layer-1,
.imagen-circular-layer-1:hover~.imagen-circular-layer-1 {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
 /*    animation: glow 3s ease-in-out infinite;*/
    
}

.imagen-circular-layer-2:hover,.imagen-circular-layer-3:hover {
    transform: scale(1.2);
}


/* ========================================
   VERSIÓN 1: SMALL (Original)
   
   Comportamiento actual sin animación de
   encogimiento. La imagen se muestra a su 
   tamaño normal dentro del círculo de 200px.
   
   Uso: class="imagen-circular-container small"
   ======================================== */
.imagen-circular-container.small {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle,
            rgba(150, 151, 76, 1) 0%,
            rgba(150, 151, 76, 0.9) 35%,
            rgba(150, 151, 76, 0.6) 60%,
            rgba(150, 151, 76, 0.2) 85%,
            rgba(150, 151, 76, 0) 100%);
    border-radius: 50%;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(49, 109, 62, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    cursor: pointer;
}

.imagen-circular-container.small .imagen-circular-layer-3 {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    border-radius: 250px;
}

.imagen-circular-container.small .imagen-circular-layer-2 {
    width: 350px;
    height: 350px;
    z-index: 2;
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.imagen-circular-container.small .imagen-circular-layer-1 {
    width: 350px;
    height: 350px;
    z-index: 0;
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Hover versión small original */
.imagen-circular-container.small:hover .imagen-circular-layer-1 {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

.imagen-circular-container.small .imagen-circular-layer-2:hover,
.imagen-circular-container.small .imagen-circular-layer-3:hover {
    transform: scale(1.2);
}

/* Texto flotante hover (small) */
.imagen-circular-container.small::after {
    /*   content: '¡Felices Fiestas!'; */
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 22px;
    font-weight: bold;
    font-family: 'Georgia', serif;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #C41E3A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    white-space: nowrap;
    z-index: 10;
}

.imagen-circular-container.small:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/* ========================================
   VERSIÓN 2: SMALL-ANIMATED (Nueva)
   
   La imagen empieza al tamaño máximo del 
   hover grande (350px × 1.2 = 420px) y se 
   encoge con animación hasta caber en 200px.
   
   Uso: class="imagen-circular-container small-animated"
   ======================================== */
.imagen-circular-container.small-animated {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle,
            rgba(150, 151, 76, 1) 0%,
            rgba(150, 151, 76, 0.9) 35%,
            rgba(150, 151, 76, 0.6) 60%,
            rgba(150, 151, 76, 0.2) 85%,
            rgba(150, 151, 76, 0) 100%);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(49, 109, 62, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    cursor: pointer;
}

/* La imagen se muestra a scale(1.2) por defecto
   y se encoge a scale(1) solo con hover */
.imagen-circular-container.small-animated img,
.imagen-circular-container.small-animated .imagen-circular-layer-3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    transform: scale(1.2);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover: se encoge al tamaño del contenedor */
.imagen-circular-container.small-animated:hover img,
.imagen-circular-container.small-animated:hover .imagen-circular-layer-3 {
    transform: scale(1);
}

/* Texto flotante hover (small-animated) */
.imagen-circular-container.small-animated::after {
    /*   content: '¡Felices Fiestas!'; */
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 22px;
    font-weight: bold;
    font-family: 'Georgia', serif;
    background: linear-gradient(45deg, #D4AF37, #FFD700, #C41E3A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    white-space: nowrap;
    z-index: 10;
}

.imagen-circular-container.small-animated:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* ========================================
   EFECTOS NAVIDEÑOS - BRILLO
   ======================================== */

@keyframes glow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 20px rgba(220, 20, 60, 0.4)) drop-shadow(0 0 30px rgba(255, 255, 255, 0.3)) drop-shadow(0 0 40px rgba(34, 139, 34, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 35px rgba(255, 0, 0, 0.5)) drop-shadow(0 0 53px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 70px rgba(50, 205, 50, 0.3));
    }
}

/* Aplicar brillo a imágenes */


/* ========================================
   EFECTOS NAVIDEÑOS - NIEVE
   ======================================== */

.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Capa 1A - Copos pequeños rápidos */
.snow-container::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(2px 2px at 70% 40%, white, transparent),
        radial-gradient(1px 1px at 15% 65%, white, transparent),
        radial-gradient(2px 2px at 45% 25%, white, transparent),
        radial-gradient(1px 1px at 75% 85%, white, transparent),
        radial-gradient(2px 2px at 5% 45%, white, transparent),
        radial-gradient(1px 1px at 95% 15%, white, transparent),
        radial-gradient(2px 2px at 35% 55%, white, transparent),
        radial-gradient(1px 1px at 65% 35%, white, transparent),
        radial-gradient(2px 2px at 25% 75%, white, transparent),
        radial-gradient(1px 1px at 55% 95%, white, transparent),
        radial-gradient(2px 2px at 85% 50%, white, transparent),
        radial-gradient(1px 1px at 10% 20%, white, transparent),
        radial-gradient(2px 2px at 40% 90%, white, transparent),
        radial-gradient(1px 1px at 88% 68%, white, transparent);
    background-size:
        200px 200px, 300px 300px, 250px 250px, 180px 180px,
        220px 220px, 280px 280px, 240px 240px, 190px 190px,
        260px 260px, 210px 210px, 270px 270px, 230px 230px,
        290px 290px, 170px 170px, 310px 310px, 195px 195px,
        255px 255px, 225px 225px, 285px 285px, 205px 205px;
    background-position:
        0 0, 40px 60px, 130px 270px, 70px 100px,
        150px 50px, 90px 180px, 200px 120px, 30px 220px,
        160px 140px, 110px 80px, 180px 200px, 50px 160px,
        140px 40px, 190px 260px, 20px 100px, 170px 180px,
        100px 240px, 210px 20px, 60px 140px, 120px 60px;
    animation: snowfall-small 15s linear infinite;
    opacity: 0.7;
}

/* Capa 1B - Duplicado con delay */
.snow-layer-1b {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(2px 2px at 70% 40%, white, transparent),
        radial-gradient(1px 1px at 15% 65%, white, transparent),
        radial-gradient(2px 2px at 45% 25%, white, transparent),
        radial-gradient(1px 1px at 75% 85%, white, transparent),
        radial-gradient(2px 2px at 5% 45%, white, transparent),
        radial-gradient(1px 1px at 95% 15%, white, transparent),
        radial-gradient(2px 2px at 35% 55%, white, transparent),
        radial-gradient(1px 1px at 65% 35%, white, transparent),
        radial-gradient(2px 2px at 25% 75%, white, transparent),
        radial-gradient(1px 1px at 55% 95%, white, transparent),
        radial-gradient(2px 2px at 85% 50%, white, transparent),
        radial-gradient(1px 1px at 10% 20%, white, transparent),
        radial-gradient(2px 2px at 40% 90%, white, transparent),
        radial-gradient(1px 1px at 88% 68%, white, transparent);
    background-size:
        200px 200px, 300px 300px, 250px 250px, 180px 180px,
        220px 220px, 280px 280px, 240px 240px, 190px 190px,
        260px 260px, 210px 210px, 270px 270px, 230px 230px,
        290px 290px, 170px 170px, 310px 310px, 195px 195px,
        255px 255px, 225px 225px, 285px 285px, 205px 205px;
    background-position:
        0 0, 40px 60px, 130px 270px, 70px 100px,
        150px 50px, 90px 180px, 200px 120px, 30px 220px,
        160px 140px, 110px 80px, 180px 200px, 50px 160px,
        140px 40px, 190px 260px, 20px 100px, 170px 180px,
        100px 240px, 210px 20px, 60px 140px, 120px 60px;
    animation: snowfall-small 15s linear infinite;
    animation-delay: -7.5s;
    opacity: 0.7;
}

/* Capa 2A - Copos medianos */
.snow-container::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(3px 3px at 10% 20%, white, transparent),
        radial-gradient(3px 3px at 40% 60%, white, transparent),
        radial-gradient(2px 2px at 70% 30%, white, transparent),
        radial-gradient(3px 3px at 85% 80%, white, transparent),
        radial-gradient(2px 2px at 25% 90%, white, transparent),
        radial-gradient(3px 3px at 55% 45%, white, transparent),
        radial-gradient(2px 2px at 12% 55%, white, transparent),
        radial-gradient(3px 3px at 48% 15%, white, transparent),
        radial-gradient(2px 2px at 78% 75%, white, transparent),
        radial-gradient(3px 3px at 32% 38%, white, transparent),
        radial-gradient(2px 2px at 62% 88%, white, transparent),
        radial-gradient(3px 3px at 92% 25%, white, transparent),
        radial-gradient(2px 2px at 18% 70%, white, transparent),
        radial-gradient(3px 3px at 52% 92%, white, transparent),
        radial-gradient(2px 2px at 82% 42%, white, transparent),
        radial-gradient(3px 3px at 8% 85%, white, transparent);
    background-size:
        250px 250px, 280px 280px, 300px 300px, 230px 230px,
        260px 260px, 290px 290px, 240px 240px, 270px 270px,
        310px 310px, 220px 220px, 295px 295px, 235px 235px,
        275px 275px, 255px 255px, 315px 315px, 245px 245px;
    background-position:
        0 0, 60px 80px, 120px 200px, 180px 140px,
        240px 60px, 100px 220px, 40px 160px, 200px 40px,
        80px 260px, 160px 100px, 20px 180px, 220px 120px,
        140px 240px, 70px 20px, 190px 280px, 130px 80px;
    animation: snowfall-medium 20s linear infinite;
    opacity: 0.9;
}

/* Capa 2B - Duplicado con delay */
.snow-layer-2b {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(3px 3px at 10% 20%, white, transparent),
        radial-gradient(3px 3px at 40% 60%, white, transparent),
        radial-gradient(2px 2px at 70% 30%, white, transparent),
        radial-gradient(3px 3px at 85% 80%, white, transparent),
        radial-gradient(2px 2px at 25% 90%, white, transparent),
        radial-gradient(3px 3px at 55% 45%, white, transparent),
        radial-gradient(2px 2px at 12% 55%, white, transparent),
        radial-gradient(3px 3px at 48% 15%, white, transparent),
        radial-gradient(2px 2px at 78% 75%, white, transparent),
        radial-gradient(3px 3px at 32% 38%, white, transparent),
        radial-gradient(2px 2px at 62% 88%, white, transparent),
        radial-gradient(3px 3px at 92% 25%, white, transparent),
        radial-gradient(2px 2px at 18% 70%, white, transparent),
        radial-gradient(3px 3px at 52% 92%, white, transparent),
        radial-gradient(2px 2px at 82% 42%, white, transparent),
        radial-gradient(3px 3px at 8% 85%, white, transparent);
    background-size:
        250px 250px, 280px 280px, 300px 300px, 230px 230px,
        260px 260px, 290px 290px, 240px 240px, 270px 270px,
        310px 310px, 220px 220px, 295px 295px, 235px 235px,
        275px 275px, 255px 255px, 315px 315px, 245px 245px;
    background-position:
        0 0, 60px 80px, 120px 200px, 180px 140px,
        240px 60px, 100px 220px, 40px 160px, 200px 40px,
        80px 260px, 160px 100px, 20px 180px, 220px 120px,
        140px 240px, 70px 20px, 190px 280px, 130px 80px;
    animation: snowfall-medium 20s linear infinite;
    animation-delay: -10s;
    opacity: 0.9;
}

/* Capa 3A - Copos grandes lentos */
.snow-layer-3 {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(4px 4px at 15% 25%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 45% 65%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 75% 35%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 30% 75%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 60% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 90% 85%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 22% 42%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 68% 18%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 38% 92%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 82% 58%, rgba(255, 255, 255, 0.8), transparent);
    background-size:
        350px 350px, 320px 320px, 380px 380px, 340px 340px,
        360px 360px, 330px 330px, 370px 370px, 325px 325px,
        355px 355px, 345px 345px;
    background-position:
        0 0, 80px 120px, 160px 40px, 40px 200px,
        120px 160px, 200px 80px, 60px 240px, 180px 20px,
        100px 180px, 220px 140px;
    animation: snowfall-large 25s linear infinite;
    opacity: 0.5;
}

/* Capa 3B - Duplicado con delay */
.snow-layer-3b {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(4px 4px at 15% 25%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 45% 65%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 75% 35%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 30% 75%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 60% 50%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 90% 85%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 22% 42%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 68% 18%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(4px 4px at 38% 92%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 82% 58%, rgba(255, 255, 255, 0.8), transparent);
    background-size:
        350px 350px, 320px 320px, 380px 380px, 340px 340px,
        360px 360px, 330px 330px, 370px 370px, 325px 325px,
        355px 355px, 345px 345px;
    background-position:
        0 0, 80px 120px, 160px 40px, 40px 200px,
        120px 160px, 200px 80px, 60px 240px, 180px 20px,
        100px 180px, 220px 140px;
    animation: snowfall-large 25s linear infinite;
    animation-delay: -12.5s;
    opacity: 0.5;
}

/* Animaciones de nieve */
@keyframes snowfall-small {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200%);
    }
}

@keyframes snowfall-medium {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200%);
    }
}

@keyframes snowfall-large {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(200%);
    }
}

/* ========================================
   EFECTOS CAIDA - PETALOS
   ======================================== */
.cherry-blossom-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
    perspective: 800px;
}

/* --- Estilo base del pétalo --- */
.petal {
    position: absolute;
    top: -60px;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 150px 0 150px 0;
    background: linear-gradient(135deg, #ffb7c5 0%, #ff91a4 40%, #ff6b8a 100%);
    opacity: 0;
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.5),
        0 0 6px rgba(255, 150, 180, 0.3);
    /* Cada pétalo usa DOS animaciones simultáneas:
       1. fall-X  → controla caída vertical + opacidad
       2. flutter-X → controla el aleteo/movimiento lateral */
}

/* --- Variaciones de forma y color --- */
.petal:nth-child(odd) {
    border-radius: 0 150px 0 150px;
    background: linear-gradient(135deg, #ffc1cc 0%, #ffaabb 40%, #ff85a2 100%);
}

.petal:nth-child(3n) {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #ffd6e0 0%, #ffb8c9 40%, #ff99b3 100%);
}

.petal:nth-child(5n) {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #ffccd5 0%, #ffa3b5 40%, #ff7a96 100%);
}

.petal:nth-child(7n) {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #ffe0e6 0%, #ffc4d0 40%, #ffaabb 100%);
}

/* ============================================
   ANIMACIONES DE ALETEO / FLUTTER
   
   Estas animaciones corren EN PARALELO con las
   de caída. Son más rápidas (3-5s) y se repiten
   muchas veces durante la caída, dando vida al
   pétalo con:
   - rotateY → volteo 3D (como una hoja girando)
   - rotateZ → giro en el plano 
   - translateX → balanceo lateral amplio
   - scaleX → aplastamiento que simula perspectiva
   ============================================ */

@keyframes flutter-1 {
    0% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }

    15% {
        transform: rotateY(50deg) rotateZ(12deg) translateX(30px) scaleX(0.7);
    }

    30% {
        transform: rotateY(0deg) rotateZ(-8deg) translateX(-25px) scaleX(1);
    }

    50% {
        transform: rotateY(-60deg) rotateZ(15deg) translateX(35px) scaleX(0.6);
    }

    65% {
        transform: rotateY(-20deg) rotateZ(-10deg) translateX(-20px) scaleX(0.9);
    }

    80% {
        transform: rotateY(40deg) rotateZ(8deg) translateX(28px) scaleX(0.75);
    }

    100% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }
}

@keyframes flutter-2 {
    0% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }

    20% {
        transform: rotateY(-45deg) rotateZ(-15deg) translateX(-35px) scaleX(0.65);
    }

    40% {
        transform: rotateY(10deg) rotateZ(10deg) translateX(20px) scaleX(0.95);
    }

    55% {
        transform: rotateY(55deg) rotateZ(-5deg) translateX(40px) scaleX(0.55);
    }

    75% {
        transform: rotateY(-15deg) rotateZ(12deg) translateX(-30px) scaleX(0.85);
    }

    90% {
        transform: rotateY(30deg) rotateZ(-8deg) translateX(15px) scaleX(0.7);
    }

    100% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }
}

@keyframes flutter-3 {
    0% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }

    12% {
        transform: rotateY(65deg) rotateZ(8deg) translateX(25px) scaleX(0.5);
    }

    28% {
        transform: rotateY(-10deg) rotateZ(-12deg) translateX(-40px) scaleX(0.95);
    }

    45% {
        transform: rotateY(-50deg) rotateZ(18deg) translateX(30px) scaleX(0.6);
    }

    60% {
        transform: rotateY(25deg) rotateZ(-6deg) translateX(-15px) scaleX(0.8);
    }

    78% {
        transform: rotateY(45deg) rotateZ(10deg) translateX(35px) scaleX(0.65);
    }

    100% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }
}

@keyframes flutter-4 {
    0% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }

    18% {
        transform: rotateY(-55deg) rotateZ(10deg) translateX(-28px) scaleX(0.6);
    }

    35% {
        transform: rotateY(20deg) rotateZ(-14deg) translateX(38px) scaleX(0.9);
    }

    52% {
        transform: rotateY(60deg) rotateZ(6deg) translateX(-18px) scaleX(0.5);
    }

    70% {
        transform: rotateY(-30deg) rotateZ(-8deg) translateX(32px) scaleX(0.8);
    }

    85% {
        transform: rotateY(15deg) rotateZ(12deg) translateX(-22px) scaleX(0.7);
    }

    100% {
        transform: rotateY(0deg) rotateZ(0deg) translateX(0) scaleX(1);
    }
}

/* ============================================
   ANIMACIONES DE CAÍDA (vertical + opacidad)
   
   Solo controlan top, left y opacity.
   El movimiento lateral/rotación viene del
   flutter que corre en paralelo.
   ============================================ */

@keyframes fall-1 {
    0% {
        top: -5%;
        left: 10%;
        opacity: 0;
    }

    8% {
        opacity: 0.85;
    }

    20% {
        left: 14%;
    }

    35% {
        left: 7%;
    }

    50% {
        left: 13%;
        opacity: 0.7;
    }

    65% {
        left: 8%;
        opacity: 0.45;
    }

    80% {
        left: 12%;
        opacity: 0.18;
    }

    92% {
        opacity: 0.05;
    }

    100% {
        top: 105%;
        left: 10%;
        opacity: 0;
    }
}

@keyframes fall-2 {
    0% {
        top: -5%;
        left: 25%;
        opacity: 0;
    }

    8% {
        opacity: 0.8;
    }

    22% {
        left: 20%;
    }

    38% {
        left: 29%;
    }

    52% {
        left: 22%;
        opacity: 0.65;
    }

    66% {
        left: 28%;
        opacity: 0.38;
    }

    80% {
        left: 24%;
        opacity: 0.15;
    }

    92% {
        opacity: 0.04;
    }

    100% {
        top: 105%;
        left: 26%;
        opacity: 0;
    }
}

@keyframes fall-3 {
    0% {
        top: -5%;
        left: 45%;
        opacity: 0;
    }

    7% {
        opacity: 0.9;
    }

    18% {
        left: 41%;
    }

    34% {
        left: 50%;
    }

    50% {
        left: 42%;
        opacity: 0.7;
    }

    64% {
        left: 48%;
        opacity: 0.4;
    }

    78% {
        left: 44%;
        opacity: 0.15;
    }

    90% {
        opacity: 0.04;
    }

    100% {
        top: 105%;
        left: 46%;
        opacity: 0;
    }
}

@keyframes fall-4 {
    0% {
        top: -5%;
        left: 65%;
        opacity: 0;
    }

    9% {
        opacity: 0.78;
    }

    24% {
        left: 60%;
    }

    40% {
        left: 70%;
    }

    54% {
        left: 62%;
        opacity: 0.6;
    }

    68% {
        left: 68%;
        opacity: 0.32;
    }

    82% {
        left: 64%;
        opacity: 0.12;
    }

    92% {
        opacity: 0.03;
    }

    100% {
        top: 105%;
        left: 66%;
        opacity: 0;
    }
}

@keyframes fall-5 {
    0% {
        top: -5%;
        left: 85%;
        opacity: 0;
    }

    8% {
        opacity: 0.85;
    }

    20% {
        left: 80%;
    }

    36% {
        left: 90%;
    }

    52% {
        left: 82%;
        opacity: 0.65;
    }

    66% {
        left: 88%;
        opacity: 0.35;
    }

    80% {
        left: 84%;
        opacity: 0.12;
    }

    92% {
        opacity: 0.03;
    }

    100% {
        top: 105%;
        left: 86%;
        opacity: 0;
    }
}

@keyframes fall-6 {
    0% {
        top: -5%;
        left: 5%;
        opacity: 0;
    }

    10% {
        opacity: 0.72;
    }

    25% {
        left: 10%;
    }

    42% {
        left: 2%;
    }

    56% {
        left: 9%;
        opacity: 0.55;
    }

    70% {
        left: 3%;
        opacity: 0.28;
    }

    84% {
        left: 7%;
        opacity: 0.1;
    }

    93% {
        opacity: 0.03;
    }

    100% {
        top: 105%;
        left: 6%;
        opacity: 0;
    }
}

@keyframes fall-7 {
    0% {
        top: -5%;
        left: 35%;
        opacity: 0;
    }

    7% {
        opacity: 0.82;
    }

    22% {
        left: 30%;
    }

    38% {
        left: 40%;
    }

    52% {
        left: 32%;
        opacity: 0.6;
    }

    66% {
        left: 38%;
        opacity: 0.32;
    }

    80% {
        left: 34%;
        opacity: 0.12;
    }

    91% {
        opacity: 0.04;
    }

    100% {
        top: 105%;
        left: 36%;
        opacity: 0;
    }
}

@keyframes fall-8 {
    0% {
        top: -5%;
        left: 55%;
        opacity: 0;
    }

    9% {
        opacity: 0.8;
    }

    24% {
        left: 50%;
    }

    40% {
        left: 60%;
    }

    55% {
        left: 52%;
        opacity: 0.58;
    }

    68% {
        left: 58%;
        opacity: 0.3;
    }

    82% {
        left: 54%;
        opacity: 0.1;
    }

    92% {
        opacity: 0.03;
    }

    100% {
        top: 105%;
        left: 56%;
        opacity: 0;
    }
}

@keyframes fall-9 {
    0% {
        top: -5%;
        left: 75%;
        opacity: 0;
    }

    8% {
        opacity: 0.88;
    }

    20% {
        left: 70%;
    }

    36% {
        left: 80%;
    }

    50% {
        left: 72%;
        opacity: 0.62;
    }

    64% {
        left: 78%;
        opacity: 0.35;
    }

    78% {
        left: 74%;
        opacity: 0.12;
    }

    90% {
        opacity: 0.04;
    }

    100% {
        top: 105%;
        left: 76%;
        opacity: 0;
    }
}

@keyframes fall-10 {
    0% {
        top: -5%;
        left: 95%;
        opacity: 0;
    }

    10% {
        opacity: 0.75;
    }

    26% {
        left: 90%;
    }

    42% {
        left: 97%;
    }

    56% {
        left: 92%;
        opacity: 0.55;
    }

    70% {
        left: 96%;
        opacity: 0.28;
    }

    84% {
        left: 93%;
        opacity: 0.1;
    }

    93% {
        opacity: 0.03;
    }

    100% {
        top: 105%;
        left: 94%;
        opacity: 0;
    }
}

/* ============================================
   ASIGNACIÓN DE ANIMACIONES
   
   Cada pétalo recibe DOS animaciones separadas
   por coma:
   1. fall-X  → caída lenta (14-19s)
   2. flutter-X → aleteo rápido (3-5s, se repite
      varias veces durante la caída)
   
   Los delays del fall están distribuidos por
   grupos para continuidad. El flutter empieza
   inmediatamente (delay 0).
   ============================================ */

/* Grupo A: fall-1 14s + flutter variado */
.petal-1 {
    animation: fall-1 14s 0.0s infinite ease-in-out,
        flutter-1 3.5s 0s infinite ease-in-out;
}

.petal-11 {
    animation: fall-1 14s 3.5s infinite ease-in-out,
        flutter-3 4.2s 0s infinite ease-in-out;
}

.petal-21 {
    animation: fall-1 14s 7.0s infinite ease-in-out,
        flutter-2 3.8s 0s infinite ease-in-out;
}

.petal-31 {
    animation: fall-1 14s 10.5s infinite ease-in-out,
        flutter-4 4.5s 0s infinite ease-in-out;
}

/* Grupo B: fall-2 16s + flutter variado */
.petal-2 {
    animation: fall-2 16s 0.0s infinite ease-in-out,
        flutter-2 4.0s 0s infinite ease-in-out;
}

.petal-12 {
    animation: fall-2 16s 4.0s infinite ease-in-out,
        flutter-4 3.3s 0s infinite ease-in-out;
}

.petal-22 {
    animation: fall-2 16s 8.0s infinite ease-in-out,
        flutter-1 4.8s 0s infinite ease-in-out;
}

.petal-32 {
    animation: fall-2 16s 12.0s infinite ease-in-out,
        flutter-3 3.6s 0s infinite ease-in-out;
}

/* Grupo C: fall-3 13s + flutter variado */
.petal-3 {
    animation: fall-3 13s 0.0s infinite ease-in-out,
        flutter-3 3.2s 0s infinite ease-in-out;
}

.petal-13 {
    animation: fall-3 13s 3.25s infinite ease-in-out,
        flutter-1 4.4s 0s infinite ease-in-out;
}

.petal-23 {
    animation: fall-3 13s 6.5s infinite ease-in-out,
        flutter-4 3.7s 0s infinite ease-in-out;
}

.petal-33 {
    animation: fall-3 13s 9.75s infinite ease-in-out,
        flutter-2 4.1s 0s infinite ease-in-out;
}

/* Grupo D: fall-4 18s + flutter variado */
.petal-4 {
    animation: fall-4 18s 0.0s infinite ease-in-out,
        flutter-4 4.6s 0s infinite ease-in-out;
}

.petal-14 {
    animation: fall-4 18s 4.5s infinite ease-in-out,
        flutter-2 3.4s 0s infinite ease-in-out;
}

.petal-24 {
    animation: fall-4 18s 9.0s infinite ease-in-out,
        flutter-3 5.0s 0s infinite ease-in-out;
}

.petal-34 {
    animation: fall-4 18s 13.5s infinite ease-in-out,
        flutter-1 3.9s 0s infinite ease-in-out;
}

/* Grupo E: fall-5 15s + flutter variado */
.petal-5 {
    animation: fall-5 15s 0.0s infinite ease-in-out,
        flutter-1 4.3s 0s infinite ease-in-out;
}

.petal-15 {
    animation: fall-5 15s 3.75s infinite ease-in-out,
        flutter-3 3.1s 0s infinite ease-in-out;
}

.petal-25 {
    animation: fall-5 15s 7.5s infinite ease-in-out,
        flutter-2 4.7s 0s infinite ease-in-out;
}

.petal-35 {
    animation: fall-5 15s 11.25s infinite ease-in-out,
        flutter-4 3.5s 0s infinite ease-in-out;
}

/* Grupo F: fall-6 19s + flutter variado */
.petal-6 {
    animation: fall-6 19s 0.0s infinite ease-in-out,
        flutter-2 5.2s 0s infinite ease-in-out;
}

.petal-16 {
    animation: fall-6 19s 4.75s infinite ease-in-out,
        flutter-4 3.8s 0s infinite ease-in-out;
}

.petal-26 {
    animation: fall-6 19s 9.5s infinite ease-in-out,
        flutter-1 4.1s 0s infinite ease-in-out;
}

.petal-36 {
    animation: fall-6 19s 14.25s infinite ease-in-out,
        flutter-3 4.9s 0s infinite ease-in-out;
}

/* Grupo G: fall-7 13s + flutter variado */
.petal-7 {
    animation: fall-7 13s 1.5s infinite ease-in-out,
        flutter-3 3.3s 0s infinite ease-in-out;
}

.petal-17 {
    animation: fall-7 13s 4.75s infinite ease-in-out,
        flutter-1 4.6s 0s infinite ease-in-out;
}

.petal-27 {
    animation: fall-7 13s 8.0s infinite ease-in-out,
        flutter-4 3.0s 0s infinite ease-in-out;
}

.petal-37 {
    animation: fall-7 13s 11.25s infinite ease-in-out,
        flutter-2 4.4s 0s infinite ease-in-out;
}

/* Grupo H: fall-8 16s + flutter variado */
.petal-8 {
    animation: fall-8 16s 2.0s infinite ease-in-out,
        flutter-4 4.2s 0s infinite ease-in-out;
}

.petal-18 {
    animation: fall-8 16s 6.0s infinite ease-in-out,
        flutter-2 3.5s 0s infinite ease-in-out;
}

.petal-28 {
    animation: fall-8 16s 10.0s infinite ease-in-out,
        flutter-1 4.8s 0s infinite ease-in-out;
}

.petal-38 {
    animation: fall-8 16s 14.0s infinite ease-in-out,
        flutter-3 3.2s 0s infinite ease-in-out;
}

/* Grupo I: fall-9 14s + flutter variado */
.petal-9 {
    animation: fall-9 14s 1.0s infinite ease-in-out,
        flutter-1 3.6s 0s infinite ease-in-out;
}

.petal-19 {
    animation: fall-9 14s 4.5s infinite ease-in-out,
        flutter-3 4.3s 0s infinite ease-in-out;
}

.petal-29 {
    animation: fall-9 14s 8.0s infinite ease-in-out,
        flutter-2 3.9s 0s infinite ease-in-out;
}

.petal-39 {
    animation: fall-9 14s 11.5s infinite ease-in-out,
        flutter-4 4.7s 0s infinite ease-in-out;
}

/* Grupo J: fall-10 17s + flutter variado */
.petal-10 {
    animation: fall-10 17s 0.5s infinite ease-in-out,
        flutter-2 4.5s 0s infinite ease-in-out;
}

.petal-20 {
    animation: fall-10 17s 4.75s infinite ease-in-out,
        flutter-4 3.4s 0s infinite ease-in-out;
}

.petal-30 {
    animation: fall-10 17s 9.0s infinite ease-in-out,
        flutter-1 5.1s 0s infinite ease-in-out;
}

.petal-40 {
    animation: fall-10 17s 13.25s infinite ease-in-out,
        flutter-3 3.7s 0s infinite ease-in-out;
}