/* Animaciones y Efectos */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(37, 211, 102, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    }
}

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

@keyframes wave {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hero::before {
    animation: wave 10s linear infinite;
}

/* Animaciones de aparición */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efectos de hover mejorados */
.service-card,
.industry-card,
.stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover,
.industry-card:hover,
.stat-card:hover {
    transform: translateY(-8px);
}

/* Animación de carga del hero */
.hero-text h1 {
    animation: slideInLeft 0.8s ease-out;
}

.hero-text p {
    animation: slideInLeft 0.8s ease-out 0.2s both;
}

.hero-buttons {
    animation: slideInLeft 0.8s ease-out 0.4s both;
}

.savings-calculator {
    animation: slideInRight 0.8s ease-out 0.3s both;
}

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

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

/* Efectos de scroll */
.section-header {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.section-header.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animación de números estadísticos */
.stat-number {
    position: relative;
    overflow: hidden;
}

.stat-number::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Efectos de formulario */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.1);
}

.submit-button {
    position: relative;
    overflow: hidden;
}

.submit-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    transition: width 0.6s, height 0.6s;
    transform: translate(-50%, -50%);
}

.submit-button:hover::before {
    width: 300px;
    height: 300px;
}

/* Efecto de typing para el título */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

.typing-effect {
    overflow: hidden;
    border-right: 3px solid var(--secondary);
    white-space: nowrap;
    animation: typing 3s steps(40, end), blink 0.8s infinite;
}

/* Efectos de carga progresiva */
.progressive-load {
    opacity: 0;
    transform: translateY(40px);
    animation: progressiveLoad 0.8s ease forwards;
}

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

.progressive-load:nth-child(1) { animation-delay: 0.1s; }
.progressive-load:nth-child(2) { animation-delay: 0.2s; }
.progressive-load:nth-child(3) { animation-delay: 0.3s; }
.progressive-load:nth-child(4) { animation-delay: 0.4s; }
.progressive-load:nth-child(5) { animation-delay: 0.5s; }
.progressive-load:nth-child(6) { animation-delay: 0.6s; }