/* Estilos para la sección de productos */

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

.animate-fade-up {
    animation: fadeUp 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-delay-100 {
    animation-delay: 0.1s;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-300 {
    animation-delay: 0.3s;
}

.animate-delay-400 {
    animation-delay: 0.4s;
}

@keyframes sparkle {

    0%,
    100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
}

.heart-sparkle::before,
.heart-sparkle::after,
.heart-sparkle::before,
.heart-sparkle::after {
    content: "✦";
    position: absolute;
    animation: sparkle 0.6s ease-in-out;
    color: #ef4444;
    font-size: 1.25rem;
}

.heart-sparkle::before {
    top: -12px;
    right: -12px;
}

.heart-sparkle::after {
    bottom: -12px;
    left: -12px;
}

.heart-sparkle span:nth-child(1) {
    content: "✦";
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%);
    animation: sparkle 0.6s ease-in-out 0.1s;
    color: #ef4444;
    font-size: 1.25rem;
}

.heart-sparkle span:nth-child(2) {
    content: "✦";
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    animation: sparkle 0.6s ease-in-out 0.2s;
    color: #ef4444;
    font-size: 1.25rem;
}