.app-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                height: 100%;
            }
            .app-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
            .app-icon {
                font-size: 2rem;
                margin-bottom: 1rem;
                color: #0d6efd;
            }
            .app-header {
                border-bottom: 3px solid #0d6efd;
                padding-bottom: 0.5rem;
                margin-bottom: 1rem;
            }
            .impact-badge {
                position: absolute;
                top: -10px;
                right: -10px;
                font-size: 0.8rem;
            }
            .app-img {
                height: 180px;
                object-fit: cover;
                border-radius: 8px 8px 0 0;
            }
            
            /* Efectos eléctricos para el encabezado */
            .electric-header {
                position: relative;
                overflow: hidden;
            }

            .electric-effect {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, rgba(13,110,253,0.1) 0%, rgba(255,255,255,0) 50%, rgba(13,110,253,0.1) 100%);
                animation: electricPulse 8s infinite;
            }

            @keyframes electricPulse {
                0%, 100% { opacity: 0.1; }
                50% { opacity: 0.3; }
            }

            .electric-title span {
                display: inline-block;
                animation: electricFlicker 4s infinite;
            }

            @keyframes electricFlicker {
                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                    text-shadow: 0 0 5px currentColor;
                }
                20%, 24%, 55% { 
                    text-shadow: none;
                }
            }

            /* Tarjetas interactivas */
            .interactive-card {
                transition: all 0.3s ease;
            }

            .interactive-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
            }

            .card-img-container {
                position: relative;
                overflow: hidden;
            }

            .card-hover-content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .interactive-card:hover .card-hover-content {
                opacity: 1;
            }

            /* Animación para detalles expandibles */
            .app-details {
                transition: all 0.3s ease;
                max-height: 0;
                overflow: hidden;
            }

            .app-details.show {
                max-height: 500px;
                display: block;
            }

            /* Filtros activos */
            .filter-btn.active {
                background-color: #0d6efd;
                color: white;
            }

            /* Dispositivos animados */
            .electric-devices {
                position: relative;
                height: 300px;
            }

            .electric-devices .device {
                position: absolute;
                max-width: 120px;
                transition: all 0.5s ease;
            }

            .device-1 {
                top: 20%;
                left: 10%;
                animation: floatDevice1 6s ease-in-out infinite;
            }

            .device-2 {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                animation: floatDevice2 5s ease-in-out infinite 1s;
            }

            .device-3 {
                bottom: 10%;
                right: 10%;
                animation: floatDevice3 7s ease-in-out infinite 0.5s;
            }

            @keyframes floatDevice1 {
                0%, 100% { transform: translateY(0) rotate(-5deg); }
                50% { transform: translateY(-20px) rotate(5deg); }
            }

            @keyframes floatDevice2 {
                0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
                50% { transform: translate(-50%, -60%) rotate(10deg); }
            }

            @keyframes floatDevice3 {
                0%, 100% { transform: translateY(0) rotate(5deg); }
                50% { transform: translateY(-15px) rotate(-5deg); }
            }