/* ==========================================================================
   TRANSICIONES BASE (Preparan los elementos en main.css para animarse)
   ========================================================================== */
.aap-logo,
.method-pill,
.bento-card,
.package-card,
.btn-cta,
.wa-button,
.client-img {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Modificación de la velocidad específica para elementos continuos o sutiles */
.method-pill { transition: border-color 0.3s, transform 0.3s; }
.client-img { transition: transform 0.3s; }


/* ==========================================================================
   EFECTOS HOVER (Interacciones de usuario)
   ========================================================================== */

/* Logo */
.aap-logo:hover {
    transform: scale(1.02);
}

/* Pastillas de metodología */
.method-pill:hover { 
    border-color: var(--electric); 
    transform: translateY(-3px); 
}

/* Tarjetas Bento Grid */
.bento-card:hover { 
    transform: scale(1.03); 
    border-color: var(--electric); 
    box-shadow: 0 40px 80px rgba(0, 28, 85, 0.08); 
}

/* Tarjetas de Precios */
.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 28, 85, 0.06);
}
.package-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 98, 255, 0.2);
}

/* Botón de Llamada a la Acción (CTA) */
.btn-cta:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 25px 50px rgba(0, 98, 255, 0.4); 
}

/* Botón flotante de WhatsApp */
.wa-button:hover { 
    transform: scale(1.1) rotate(10deg); 
}

/* Imágenes de Clientes */
.client-img:hover { 
    transform: scale(1.1); 
}


/* ==========================================================================
   ANIMACIONES AUTOMÁTICAS (Bucle infinito)
   ========================================================================== */

/* Animación del Marquee (Carrusel infinito de logotipos) */
.track { 
    animation: carruselInfinito 40s linear infinite; 
}

@keyframes carruselInfinito { 
    from { 
        transform: translateX(0); 
    } 
    to { 
        transform: translateX(-50%); 
    } 
}