/* Animaciones básicas */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from { 
        opacity: 0;
        transform: translateX(-30px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from { 
        opacity: 0;
        transform: translateX(30px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from { 
        opacity: 0;
        transform: scale(0.8);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Clases de animación */
.animate {
    animation-fill-mode: both;
}

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

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

.animate-delay-3 {
    animation-delay: 0.6s;
}

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

.slide-up {
    animation: slideUp 0.8s ease-out;
}

.slide-left {
    animation: slideLeft 0.8s ease-out;
}

.slide-right {
    animation: slideRight 0.8s ease-out;
}

.scale-in {
    animation: scaleIn 0.8s ease-out;
}

/* Animación para el botón de WhatsApp */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.whatsapp-float {
    animation: pulse 2s infinite;
}

/* Animación para las tarjetas de servicios */
.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Animación para los íconos */
.benefit-icon {
    transition: all 0.5s ease;
}

.benefit-icon:hover {
    transform: rotate(15deg) scale(1.1);
    background: linear-gradient(45deg, #8bbe45, #7aa93c);
}
/* Animaciones específicas para el carrusel de servicios */
.services-carousel {
    perspective: 1000px;
}

.service-card {
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotateY(15deg) scale(0.95);
    opacity: 0.8;
}

.service-card.active {
    transform: rotateY(0) scale(1);
    opacity: 1;
    z-index: 1;
}

/* Transición suave entre tarjetas */
.carousel-container {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animaciones específicas para el carrusel de servicios */
.services-carousel {
    perspective: 1000px;
}

.service-card {
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotateY(15deg) scale(0.95);
    opacity: 1;
}

.service-card.active {
    transform: rotateY(0) scale(1);
    opacity: 1;
    z-index: 1;
}


/* Transición suave entre tarjetas */
.carousel-container {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animación de los botones del carrusel */
.carousel-btn {
    transition: all 0.3s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(0.9);
}

.carousel-btn:hover {
    transform: scale(1.1);
}

.carousel-btn:active {
    transform: scale(0.95);
}

/* Efecto al cambiar de tarjeta */
@keyframes cardFocus {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.service-card.animate-focus {
    animation: cardFocus 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}