/* ====== ANIMACIÓN TIPO 1: Flotación + Fade/Slide ====== */
.animacion-1 .producto-card {
    animation: flotar 4s ease-in-out infinite;
    animation-delay: calc(0.2s * var(--i, 0));
}
.animacion-1 .banner-content {
    animation: fadeSlideIn 1s ease-out;
}
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== ANIMACIÓN TIPO 2: Hover Rotación/Scale + Slide Bottom ====== */
.animacion-2 .producto-card {
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.animacion-2 .producto-card:hover {
    transform: rotate(-2deg) scale(1.05);
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}
.animacion-2 .banner-content {
    animation: slideBottom 1s ease-out;
}
@keyframes slideBottom {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====== ANIMACIÓN TIPO 3: Pulso/Glow + Fade Zoom ====== */
.animacion-3 .producto-card {
    animation: pulso 3s infinite;
}
@keyframes pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 157, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(255, 107, 157, 0); }
}
.animacion-3 .banner-content {
    animation: fadeZoom 1s ease-out;
}
@keyframes fadeZoom {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}