body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
        
        /* Barra de desplazamiento personalizada */
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: #fff; }
        ::-webkit-scrollbar-thumb { background: #000; }

        /* Clases de Animación */
        .reveal-element {
            opacity: 0;
            transform: translateY(30px);
            filter: blur(5px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .reveal-element.active {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        /* Delays */
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }
        .delay-400 { transition-delay: 400ms; }
        .delay-500 { transition-delay: 500ms; }
        .delay-600 { transition-delay: 600ms; }
        .delay-700 { transition-delay: 700ms; }
        .delay-800 { transition-delay: 800ms; }
        .delay-900 { transition-delay: 900ms; }

        /* Zoom del Hero */
        @keyframes zoomOut {
            from { transform: scale(1.1); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        .hero-zoom {
            animation: zoomOut 1.8s ease-out forwards;
        }

        /* Filtro para invertir logo negro a blanco */
        .logo-white {
            filter: brightness(0) invert(1);
        }

        /* SVG Drawings Hover Effect */
        .system-card:hover svg {
            stroke: #000;
            transform: scale(1.05);
        }
        .system-card svg {
            transition: all 0.5s ease;
        }

        /* Lightbox Styles */
        #lightbox-modal {
            transition: opacity 0.3s ease;
        }

        #lightbox-modal.opacity-0 {
            opacity: 0;
        }

        #lightbox-modal:not(.hidden) {
            opacity: 1;
        }

        #lightbox-image {
            max-width: 90vw;
            max-height: 90vh;
            animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        #lightbox-modal button {
            transition: all 0.2s ease;
        }

        #lightbox-modal button:hover {
            transform: scale(1.1);
        }

        #lightbox-prev:hover,
        #lightbox-next:hover {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        #lightbox-close:hover {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        }

        .gallery-item {
            animation: fadeIn 0.5s ease-out forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* Mobile Menu Styles */
        #mobile-menu {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #mobile-menu-btn svg {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #mobile-menu.hidden {
            pointer-events: none;
        }

        #mobile-menu:not(.hidden) {
            point-events: auto;
        }

        .mobile-nav-link {
            transition: all 0.2s ease;
        }

        /* Mobile adjustments */
        @media (max-width: 640px) {
            #lightbox-image {
                max-width: 95vw;
                max-height: 95vh;
            }

            #lightbox-modal button {
                width: 40px;
                height: 40px;
            }
        }