@media (max-width: 768px) {
    #floating-menu-btn {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
    }
}
        @media (min-width: 768px) { body { cursor: none; } }
        body { background-color: #ffffff; overflow-x: hidden; position: relative;}

        body.is-loading { overflow: hidden !important; }
        .precargador {
            position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
            z-index: 100000; display: flex; align-items: center; justify-content: center;
        }
        .precargador svg {
            position: absolute; top: 0; left: 0; width: 100vw; height: 110vh; z-index: -1;
        }
        .cargador-contenedor {
            position: relative; z-index: 10;
        }

        .glow-link {
            transition: all 0.3s ease-in-out;
        }
        .glow-link:hover {
            color: #00dbee !important;
            text-shadow: 0 0 10px rgba(0, 219, 238, 0.6), 
                         0 0 20px rgba(0, 219, 238, 0.4), 
                         0 0 30px rgba(0, 219, 238, 0.2);
        }

        #network-canvas {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 0; 
            pointer-events: none; 
        }

        #custom-cursor-dot {
            width: 10px; height: 10px; background: #00dbee; border-radius: 50%;
            position: fixed; pointer-events: none; z-index: 10000;
            top: 0; left: 0;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 10px rgba(0, 219, 238, 0.7);
            will-change: transform;
        }

        .pulse-ring {
            position: absolute; 
            border: 2px solid rgba(0, 219, 238, 0.4); 
            border-radius: 50%;
            top: 50%; left: 50%; 
            transform: translate(-50%, -50%); 
            pointer-events: none;
            box-shadow: 0 0 20px rgba(0, 219, 238, 0.15); 
            animation: pulse-ring 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            will-change: transform, opacity;
        }
        @keyframes pulse-ring {
            0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.2; }
            50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; }
        }

        .curved-bottom {
            position: relative;
            border-bottom-left-radius: 50% 120px;
            border-bottom-right-radius: 50% 120px;
            box-shadow: 0 20px 30px rgba(0,0,0,0.03); 
            will-change: border-radius;
        }

        .reveal-line {
            display: inline;
            color: rgba(0, 0, 0, 0.1);
            background-image: linear-gradient(#000, #000);
            background-repeat: no-repeat; background-clip: text;
            -webkit-background-clip: text; background-size: 0% 100%;
            will-change: background-size;
        }

        .service-card {
            position: sticky; top: 120px;
            height: 500px; width: 100%;
            margin-bottom: 100px; display: flex; overflow: hidden;
            box-shadow: 0 -20px 30px rgba(0,0,0,0.1);
            will-change: transform;
        }

        #floating-menu-btn {
            opacity: 0; transform: scale(0.5); pointer-events: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 250; 
        }
        #floating-menu-btn.show-btn, #floating-menu-btn.active {
            opacity: 1; transform: scale(1); pointer-events: auto;
        }
        #floating-menu-btn:hover.show-btn, #floating-menu-btn:hover.active {
            transform: scale(1.05); 
        }
        #floating-menu-btn.active {
            background-color: #ffffff; 
        }
        
        #floating-menu-btn .line {
            position: absolute; left: 0; width: 100%; height: 2px;
            background-color: #ffffff; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #floating-menu-btn .line-1 { top: 0; }
        #floating-menu-btn .line-2 { bottom: 0; }
        
        #floating-menu-btn.active .line { background-color: #010508; }
        #floating-menu-btn.active .line-1 { top: 50%; transform: translateY(-50%) rotate(45deg); }
        #floating-menu-btn.active .line-2 { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

        #side-menu {
            position: fixed; top: 0; right: 0; bottom: 0; 
            width: 100%; max-width: 500px; background: #010508; z-index: 200; 
            transform: translateX(100%); 
            border-top-left-radius: 100% 50%;
            border-bottom-left-radius: 100% 50%;
            transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), border-radius 0.7s cubic-bezier(0.77, 0, 0.175, 1);
            will-change: transform, border-radius;
        }
        #side-menu.active { 
            transform: translateX(0); 
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        
        #menu-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 199; 
            display: none; opacity: 0; transition: opacity 0.4s;
        }
        #menu-overlay.active { display: block; opacity: 1; }

        .tech-btn {
            position: relative; overflow: hidden; background-color: #010508; 
            border: 1px solid rgba(0, 219, 238, 0.2); color: #ffffff; 
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;
        }
        .tech-btn .btn-text { position: relative; z-index: 3; transition: color 0.4s ease, text-shadow 0.4s ease; }
        .tech-btn::after {
            content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 3px; 
            background: #00dbee; box-shadow: 0 0 15px 4px rgba(0, 219, 238, 1); opacity: 0; z-index: 2;
        }
        .tech-btn:hover {
            background-color: rgba(0, 219, 238, 0.05); border-color: #00dbee; color: #00dbee; 
            box-shadow: 0 0 25px rgba(0, 219, 238, 0.5); transform: translateY(-3px) scale(1.02); 
        }
        .tech-btn:hover .btn-text { text-shadow: 0 0 8px rgba(0, 219, 238, 0.8); }
        .tech-btn:hover::after { animation: scan-ray 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        .tech-btn .btn-arrow { display: inline-block; transition: transform 0.4s ease; }
        .tech-btn:hover .btn-arrow { transform: translateX(6px); }

        @keyframes scan-ray {
            0% { top: -10px; opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { top: 110%; opacity: 0; } 
        }