/* ========================================
   ANIMACIONES PERSONALIZADAS
   ======================================== */

/* Fade In Up - Aparece desde abajo */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down - Aparece desde arriba */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left - Aparece desde la izquierda */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right - Aparece desde la derecha */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In - Aparece simple */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Scale In - Escala desde pequeño */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate In - Rota desde pequeño */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Slide In Bottom - Desliza desde abajo */
@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse - Pulso */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Float - Flotar */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Shimmer - Brillo passing */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Blink - Parpadeo (para esferas) */
@keyframes blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* ========================================
   CLASES DE ANIMACIÓN
   ======================================== */

/* Aplicar animaciones base */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease forwards;
}

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

.animate-scale-in {
    animation: scaleIn 0.6s ease forwards;
}

.animate-rotate-in {
    animation: rotateIn 0.6s ease forwards;
}

.animate-slide-in-bottom {
    animation: slideInBottom 0.8s ease forwards;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

/* Delay classes para stagger */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* Ocultar inicialmente */
.animate-on-scroll {
    opacity: 0;
}

/* Estado visible (agregado por JS) */
.animate-on-scroll.visible {
    animation: fadeInUp 0.8s ease forwards;
}

/* ========================================
   EFECTOS HOVER ESPECIALES
   ======================================== */

/* Glow effect */
.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(255, 99, 71, 0.4);
}

/* Border glow */
.hover-border-glow {
    position: relative;
    transition: border-color 0.3s ease;
}

.hover-border-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.hover-border-glow:hover::before {
    opacity: 1;
}

/* Text gradient hover */
.hover-text-gradient {
    background-size: 200% auto;
    transition: background-position 0.3s ease;
}

.hover-text-gradient:hover {
    background-position: right center;
}

/* ========================================
   ANIMACIONES PARA ELEMENTOS ESPECÍFICOS
   ======================================== */

/* Tarjetas de servicios */
.servicio {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

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

/* Miembros del equipo */
.miembro {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.miembro:nth-child(1) { animation-delay: 0.1s; }
.miembro:nth-child(2) { animation-delay: 0.3s; }

/* Casos de éxito */
.caso {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.caso:nth-child(1) { animation-delay: 0.1s; }
.caso:nth-child(2) { animation-delay: 0.25s; }
.caso:nth-child(3) { animation-delay: 0.4s; }

/* FAQ */
.faq-item {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.faq-item:nth-child(1) { animation-delay: 0.1s; }
.faq-item:nth-child(2) { animation-delay: 0.15s; }
.faq-item:nth-child(3) { animation-delay: 0.2s; }
.faq-item:nth-child(4) { animation-delay: 0.25s; }
.faq-item:nth-child(5) { animation-delay: 0.3s; }
.faq-item:nth-child(6) { animation-delay: 0.35s; }

/* Títulos de secciones */
section h2 {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.2s;
}

/* Párrafo introductorio */
.intro {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.4s;
}

/* Botones */
.btn {
    opacity: 0;
    animation: scaleIn 0.6s ease forwards;
    animation-delay: 0.6s;
}

/* Historia y valores */
.historia-valores {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.3s;
}

/* Formulario */
.form-group {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }

/* ========================================
   RESPONSIVE - Reducir animaciones en móvil
   ======================================== */
@media (max-width: 768px) {
    .servicio,
    .miembro,
    .caso,
    .faq-item,
    .form-group {
        animation-delay: 0s !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        animation: none !important;
    }
}

/* Reducir movimiento para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}