/* ============================================
   MUTUAL AGRUPAR - Animaciones
   Animaciones sutiles y elegantes
   ============================================ */

/* === Keyframes === */

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

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce suave */
@keyframes bounceSubtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

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

/* Glow */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 0, 51, 0.3);
    }
    50% {
        box-shadow: 0 4px 25px rgba(255, 0, 51, 0.5);
    }
}

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

/* Floating */
@keyframes floating {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(2deg);
    }
    50% {
        transform: translateY(-5px) rotate(0deg);
    }
    75% {
        transform: translateY(-20px) rotate(-2deg);
    }
}

/* Draw Line */
@keyframes drawLine {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

/* Counter */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Ripple */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Check mark */
@keyframes checkmark {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Typing cursor */
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* === Clases de Animación Reutilizables === */

/* Animación al cargar */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

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

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

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

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

/* Delays para animaciones en secuencia */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Estado inicial para elementos animados on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Variantes de dirección */
.animate-on-scroll.from-left {
    transform: translateX(-30px);
}

.animate-on-scroll.from-left.animated {
    transform: translateX(0);
}

.animate-on-scroll.from-right {
    transform: translateX(30px);
}

.animate-on-scroll.from-right.animated {
    transform: translateX(0);
}

.animate-on-scroll.from-scale {
    transform: scale(0.9);
}

.animate-on-scroll.from-scale.animated {
    transform: scale(1);
}

/* === Animaciones Específicas === */

/* Botón Contacto con glow pulsante */
.btn-contacto {
    animation: glow 2s ease-in-out infinite;
}

/* WhatsApp flotante con bounce */
.whatsapp-float {
    animation: bounceSubtle 3s ease-in-out infinite;
}

/* Formas flotantes del hero */
.shape-1 {
    animation: floating 8s ease-in-out infinite;
}

.shape-2 {
    animation: floating 10s ease-in-out infinite;
    animation-delay: -2s;
}

.shape-3 {
    animation: floating 12s ease-in-out infinite;
    animation-delay: -4s;
}

/* Hero title animación palabra por palabra */
.hero-title .word {
    display: inline-block;
    opacity: 0;
    animation: fadeInUp 0.5s ease-out forwards;
}

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

/* Hero subtitle */
.hero-subtitle {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out 0.5s forwards;
}

/* Hero CTA */
.hero-cta {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out 0.7s forwards;
}

/* Botón primario con degradado animado del logo */
/* La animación gradientMove está definida en styles.css */

/* Timeline de pasos - línea que se dibuja */
.pasos-timeline::before {
    animation: drawLine 1s ease-out forwards;
    animation-play-state: paused;
}

.pasos-timeline.animated::before {
    animation-play-state: running;
}

/* Paso items con stagger */
.paso-item {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease-out;
}

.pasos-timeline.animated .paso-item {
    opacity: 1;
    transform: translateX(0);
}

.pasos-timeline.animated .paso-item:nth-child(1) { transition-delay: 0.2s; }
.pasos-timeline.animated .paso-item:nth-child(2) { transition-delay: 0.4s; }
.pasos-timeline.animated .paso-item:nth-child(3) { transition-delay: 0.6s; }
.pasos-timeline.animated .paso-item:nth-child(4) { transition-delay: 0.8s; }

/* Especialidades con stagger */
.especialidades-grid .especialidad-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-out;
}

.especialidades-grid.animated .especialidad-item {
    opacity: 1;
    transform: translateY(0);
}

/* Generar delays para cada item */
.especialidades-grid.animated .especialidad-item:nth-child(1) { transition-delay: 0.05s; }
.especialidades-grid.animated .especialidad-item:nth-child(2) { transition-delay: 0.1s; }
.especialidades-grid.animated .especialidad-item:nth-child(3) { transition-delay: 0.15s; }
.especialidades-grid.animated .especialidad-item:nth-child(4) { transition-delay: 0.2s; }
.especialidades-grid.animated .especialidad-item:nth-child(5) { transition-delay: 0.25s; }
.especialidades-grid.animated .especialidad-item:nth-child(6) { transition-delay: 0.3s; }
.especialidades-grid.animated .especialidad-item:nth-child(7) { transition-delay: 0.35s; }
.especialidades-grid.animated .especialidad-item:nth-child(8) { transition-delay: 0.4s; }
.especialidades-grid.animated .especialidad-item:nth-child(9) { transition-delay: 0.45s; }
.especialidades-grid.animated .especialidad-item:nth-child(10) { transition-delay: 0.5s; }
.especialidades-grid.animated .especialidad-item:nth-child(11) { transition-delay: 0.55s; }
.especialidades-grid.animated .especialidad-item:nth-child(12) { transition-delay: 0.6s; }
.especialidades-grid.animated .especialidad-item:nth-child(13) { transition-delay: 0.65s; }
.especialidades-grid.animated .especialidad-item:nth-child(14) { transition-delay: 0.7s; }

/* Valores con stagger */
.valores .valor-item {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}

.valores.animated .valor-item {
    opacity: 1;
    transform: translateY(0);
}

.valores.animated .valor-item:nth-child(1) { transition-delay: 0.1s; }
.valores.animated .valor-item:nth-child(2) { transition-delay: 0.2s; }
.valores.animated .valor-item:nth-child(3) { transition-delay: 0.3s; }
.valores.animated .valor-item:nth-child(4) { transition-delay: 0.4s; }

/* Servicios cards */
.servicio-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease-out;
}

.servicio-card.animated {
    opacity: 1;
    transform: translateY(0);
}

.servicio-card:nth-child(2).animated {
    transition-delay: 0.2s;
}

/* Acordeon animación de apertura */
.acordeon-content {
    transition: max-height 0.4s ease-out;
}

/* Formulario - campos animados */
.form-group {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-out;
}

.contacto-form-container.animated .form-group {
    opacity: 1;
    transform: translateY(0);
}

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

/* Mensaje de éxito */
.mensaje-exito {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease-out;
}

.mensaje-exito.show {
    opacity: 1;
    transform: scale(1);
}

.mensaje-exito-icon {
    animation: scaleIn 0.5s ease-out 0.2s forwards, pulse 2s ease-in-out 0.7s infinite;
    opacity: 0;
}

.mensaje-exito.show .mensaje-exito-icon {
    opacity: 1;
}

/* Footer columns stagger */
.footer-col {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease-out;
}

.footer-col.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll to top aparición */
.scroll-top {
    transition: all 0.3s ease-out;
}

/* === Hover Effects Mejorados === */

/* Links con underline animado */
.nav-link::after {
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cards con elevación suave */
.servicio-card,
.valor-item,
.especialidad-item,
.servicio-ciba-item {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.3s ease-out;
}

/* Íconos con rotación suave */
.header-icon i,
.valor-icon i,
.servicio-icon i {
    transition: transform 0.3s ease-out;
}

.header-icon:hover i {
    transform: rotate(10deg) scale(1.1);
}

/* Acordeon toggle rotación */
.acordeon-toggle {
    transition: transform 0.3s ease-out;
}

/* === Reduce Motion === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}