@charset "utf-8";

/* CSS Document */





        body {

            background-color: #040d1f;

            color: #ffffff;

            position: relative;

            font-family: 'Geist', sans-serif;

            overflow-x: hidden;

        }

        

        h1, h2, h3, h4, h5, h6, .font-heading {

            font-family: 'Outfit', sans-serif;

        }



        /* Ruido CSS Universal */

        .css-noise {

            position: fixed;

            top: 0; left: 0; width: 100vw; height: 100vh;

            pointer-events: none;

            z-index: 50;

            opacity: 0.04;

            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

        }



        /* Glassmorphism Navbar */

        .glass-nav {

            background: rgba(4, 13, 31, 0.8);

            backdrop-filter: blur(16px);

            -webkit-backdrop-filter: blur(16px);

            border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        }



        /* Cyber Arena Grid (Perspectiva 3D) */

        .cyber-grid-container {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%;

            height: 60vh;

            perspective: 1000px;

            overflow: hidden;

            z-index: 0;

            pointer-events: none;

            mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent);

            -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), transparent);

        }

        .cyber-grid {

            position: absolute;

            width: 200%;

            height: 200%;

            bottom: -50%;

            left: -50%;

            background-image: 

                linear-gradient(to right, rgba(57,167,223,0.15) 1px, transparent 1px),

                linear-gradient(to bottom, rgba(57,167,223,0.15) 1px, transparent 1px);

            background-size: 50px 50px;

            transform: rotateX(75deg);

            transform-origin: bottom center;

            animation: grid-move 5s linear infinite;

        }



        /* Tarjetas Holográficas */

        .holo-card {

            background: rgba(255, 255, 255, 0.02);

            backdrop-filter: blur(20px);

            -webkit-backdrop-filter: blur(20px);

            border: 1px solid rgba(255, 255, 255, 0.05);

            border-radius: 1.5rem;

            transition: all 0.4s ease;

        }

        .holo-card:hover {

            background: rgba(255, 255, 255, 0.05);

            transform: translateY(-5px);

            border-color: rgba(255, 255, 255, 0.15);

        }



        /* Scroll Reveal */

        .reveal-blur {

            opacity: 0;

            filter: blur(12px);

            transform: translateY(30px);

            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

        }

        .reveal-blur.active {

            opacity: 1;

            filter: blur(0);

            transform: translateY(0);

        }



        /* Custom Scrollbar */

        ::-webkit-scrollbar { width: 8px; }

        ::-webkit-scrollbar-track { background: #040d1f; }

        ::-webkit-scrollbar-thumb { background: #39a7df; border-radius: 4px; }

        ::-webkit-scrollbar-thumb:hover { background: #e80085; }



        /* =========================================

           NUEVAS ANIMACIONES: FONDOS CONCEPTUALES

           ========================================= */

        

        /* 1. Ecosistema Digital (Redes, Nodos y HUD) */

        .digital-shape {

            position: absolute;

            opacity: 0.5;

            pointer-events: none;

            z-index: 0;

        }

        /* Hexágono de Escaneo (Scanline Chip) */

        .d-shape-1 {

            width: clamp(200px, 25vw, 400px); height: clamp(200px, 25vw, 400px);

            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

            background: repeating-linear-gradient(0deg, rgba(57, 167, 223, 0.15), rgba(57, 167, 223, 0.15) 2px, transparent 2px, transparent 8px);

            top: 5%; left: 5%;

            animation: digitalHex 25s infinite linear;

        }

        /* Escuadra HUD (Targeting Bracket) */

        .d-shape-2 {

            width: clamp(250px, 30vw, 500px); height: clamp(250px, 30vw, 500px);

            border-top: 8px solid #e80085;

            border-right: 8px solid #e80085;

            background: radial-gradient(circle at top right, rgba(232, 0, 133, 0.15) 0%, transparent 70%);

            bottom: -5%; right: 5%;

            animation: digitalHUD 20s infinite ease-in-out alternate;

        }

        /* Anillo Radar Punteado */

        .d-shape-3 {

            width: clamp(150px, 20vw, 300px); height: clamp(150px, 20vw, 300px);

            border: 4px dotted #39a7df;

            border-radius: 50%;

            box-shadow: inset 0 0 50px rgba(57, 167, 223, 0.2);

            top: 35%; right: 35%;

            animation: digitalRadar 30s infinite linear;

        }

        /* Código de Barras / Tira de Datos */

        .d-shape-4 {

            width: clamp(100px, 15vw, 200px); height: clamp(150px, 20vw, 300px);

            background: repeating-linear-gradient(90deg, rgba(232, 0, 133, 0.2), rgba(232, 0, 133, 0.2) 4px, transparent 4px, transparent 15px);

            bottom: 15%; left: 15%;

            animation: digitalBars 15s infinite ease-in-out alternate;

        }



        @keyframes digitalHex {

            0% { transform: translate(0, 0) rotate(0deg) scale(1); }

            50% { transform: translate(10vw, 15vh) rotate(180deg) scale(1.1); }

            100% { transform: translate(0, 0) rotate(360deg) scale(1); }

        }

        @keyframes digitalHUD {

            0% { transform: translate(0, 0) rotate(0deg) scale(1); }

            100% { transform: translate(-10vw, -10vh) rotate(-15deg) scale(1.2); }

        }

        @keyframes digitalRadar {

            0% { transform: translate(0, 0) rotate(0deg) scale(0.8); }

            50% { transform: translate(15vw, -15vh) rotate(-180deg) scale(1.1); }

            100% { transform: translate(0, 0) rotate(-360deg) scale(0.8); }

        }

        @keyframes digitalBars {

            0% { transform: translate(0, 0) skewX(0deg) scaleY(1); }

            100% { transform: translate(-5vw, -5vh) skewX(20deg) scaleY(1.3); }

        }



        /* 2. Ecosistema Robótico (Engranes Mecánicos Realistas en CSS) */

        .robotics-shape {

            position: absolute;

            border-radius: 50%;

            opacity: 0.4;

            pointer-events: none;

            z-index: 0;

        }

        /* Engrane Verde Grande */

        .r-shape-1 {

            width: clamp(250px, 30vw, 500px); height: clamp(250px, 30vw, 500px);

            border: 25px dashed #00e676; /* Dientes anchos */

            background: radial-gradient(circle, transparent 40%, rgba(0, 230, 118, 0.15) 45%, rgba(0, 230, 118, 0.05) 70%); /* Eje */

            box-shadow: inset 0 0 0 20px rgba(0, 230, 118, 0.2); /* Cuerpo sólido del engrane */

            top: -10%; right: -5%;

            animation: mechDrift1 40s infinite linear;

        }

        /* Engrane Azul Mediano */

        .r-shape-2 {

            width: clamp(200px, 25vw, 400px); height: clamp(200px, 25vw, 400px);

            border: 20px dashed #1e3a8a;

            background: radial-gradient(circle, transparent 30%, rgba(30, 58, 138, 0.2) 35%, rgba(30, 58, 138, 0.1) 60%);

            box-shadow: inset 0 0 0 15px rgba(30, 58, 138, 0.3);

            bottom: -5%; left: -5%;

            animation: mechDrift2 30s infinite linear;

        }

        /* Engrane Verde Pequeño */

        .r-shape-3 {

            width: clamp(150px, 20vw, 300px); height: clamp(150px, 20vw, 300px);

            border: 15px dashed #00e676;

            background: radial-gradient(circle, transparent 35%, rgba(0, 230, 118, 0.2) 40%, rgba(0, 230, 118, 0.1) 65%);

            box-shadow: inset 0 0 0 10px rgba(0, 230, 118, 0.2);

            top: 40%; left: 30%;

            animation: mechDrift3 25s infinite linear;

        }



        @keyframes mechDrift1 {

            0% { transform: translate(0, 0) rotate(0deg); }

            50% { transform: translate(-5vw, 10vh) rotate(180deg); }

            100% { transform: translate(0, 0) rotate(360deg); }

        }

        @keyframes mechDrift2 {

            0% { transform: translate(0, 0) rotate(0deg); }

            50% { transform: translate(10vw, -10vh) rotate(-180deg); }

            100% { transform: translate(0, 0) rotate(-360deg); }

        }

        @keyframes mechDrift3 {

            0% { transform: translate(0, 0) rotate(0deg); }

            50% { transform: translate(-10vw, -15vh) rotate(180deg); }

            100% { transform: translate(0, 0) rotate(360deg); }

        }

		

		/* --- Estilos Modal Iframe Agendar Demostración --- */

        #iframe-modal {

            opacity: 0;

            pointer-events: none;

            transition: opacity 0.4s ease;

        }

        #iframe-modal.modal-open {

            opacity: 1;

            pointer-events: auto;

        }

        #iframe-modal .iframe-modal-panel {

            transform: scale(0.95) translateY(20px);

            opacity: 0;

            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        }

        #iframe-modal.modal-open .iframe-modal-panel {

            transform: scale(1) translateY(0);

            opacity: 1;

        }



        ::-webkit-scrollbar { width: 8px; }

        ::-webkit-scrollbar-track { background: #15234f; }

        ::-webkit-scrollbar-thumb { background: #1e3a8a; border-radius: 4px; }

        ::-webkit-scrollbar-thumb:hover { background: #e80085; }



        @media (max-width: 1023px) {

            .mobile-slider-x::-webkit-scrollbar { display: none; }

            .mobile-slider-x { -ms-overflow-style: none; scrollbar-width: none; }

        }