Estructurix | Soluciones IT & Infraestructura 3D<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@600;700;800&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- VARIABLES CSS & RESET (ESTILO PRINCIPAL) --- *\/\n :root {\n --primary-bg: #0f172a; \/* Slate 900 *\/\n --secondary-bg: #1e293b; \/* Slate 800 *\/\n --main-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n --accent-glow: #38bdf8;\n \n --text-white: #f8fafc;\n --text-gray: #cbd5e1;\n --text-muted: #94a3b8;\n \n --glass-bg: rgba(30, 41, 59, 0.4);\n --glass-border: rgba(255, 255, 255, 0.08);\n \n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --container-width: 1250px;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n color: var(--text-white);\n line-height: 1.7;\n background-color: var(--primary-bg);\n background-image: \n radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%), \n radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08), transparent 25%);\n overflow-x: hidden; \/* Importante para el scroll horizontal *\/\n }\n\n a { text-decoration: none; color: inherit; }\n ul { list-style: none; }\n\n \/* --- TIPOGRAF\u00cdA --- *\/\n h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; }\n\n \/* --- COMPONENTES UI --- *\/\n .container {\n max-width: var(--container-width);\n margin: 0 auto;\n padding: 0 25px;\n }\n\n .btn {\n display: inline-block;\n padding: 14px 35px;\n border-radius: 50px;\n font-weight: 600;\n transition: var(--transition);\n cursor: pointer;\n border: none;\n font-size: 1rem;\n position: relative;\n z-index: 1;\n overflow: hidden;\n }\n\n .btn-primary {\n background: var(--main-gradient);\n color: var(--text-white);\n box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);\n }\n\n .btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);\n filter: brightness(1.1);\n }\n\n .btn-outline {\n background: transparent;\n border: 2px solid rgba(255,255,255,0.3);\n color: var(--text-white);\n }\n\n .btn-outline:hover {\n border-color: var(--text-white);\n background: rgba(255,255,255,0.1);\n transform: translateY(-3px);\n }\n\n .section-title {\n text-align: center;\n margin-bottom: 80px;\n position: relative;\n }\n\n .section-title h2 {\n font-size: 2.8rem;\n background: var(--main-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 15px;\n font-weight: 800;\n }\n\n .section-padding {\n padding: 100px 0;\n position: relative;\n }\n\n \/* --- HEADER & NAV --- *\/\n header {\n background: rgba(15, 23, 42, 0.7);\n backdrop-filter: blur(20px);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n padding: 15px 0;\n border-bottom: 1px solid var(--glass-border);\n }\n\n nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo-container {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .logo-img {\n height: 45px;\n width: auto;\n object-fit: contain;\n border-radius: 6px;\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);\n }\n \n .logo-text {\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--text-white);\n display: flex;\n flex-direction: column;\n line-height: 1;\n }\n \n .logo-text span {\n font-size: 0.65rem;\n font-weight: 600;\n color: var(--accent-glow);\n font-family: 'Inter', sans-serif;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n }\n\n .nav-links {\n display: flex;\n gap: 40px;\n }\n\n .nav-links a {\n color: var(--text-gray);\n font-weight: 500;\n font-size: 0.95rem;\n transition: var(--transition);\n }\n\n .nav-links a:hover, .nav-links a.active {\n color: var(--text-white);\n text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);\n }\n\n .mobile-toggle {\n display: none;\n color: var(--text-white);\n font-size: 1.6rem;\n cursor: pointer;\n }\n\n \/* --- HERO SECTION --- *\/\n .hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), var(--primary-bg)),\n url('https:\/\/picsum.photos\/seed\/serverroomtech\/1920\/1080');\n background-size: cover;\n background-position: center;\n padding-top: 80px;\n overflow: hidden;\n }\n\n .hero::before {\n content: \"\";\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background-image: \n radial-gradient(rgba(59, 130, 246, 0.15) 1px, transparent 1px);\n background-size: 40px 40px;\n mask-image: radial-gradient(circle at center, black 40%, transparent 100%);\n pointer-events: none;\n }\n\n .hero-content {\n position: relative;\n z-index: 2;\n text-align: center;\n color: var(--text-white);\n max-width: 900px;\n margin: 0 auto;\n }\n\n .hero-logo-watermark {\n opacity: 0.25;\n width: 160px;\n margin-bottom: 25px;\n filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));\n }\n\n .hero-content h1 {\n font-size: 4.2rem;\n font-weight: 800;\n margin-bottom: 30px;\n line-height: 1.1;\n text-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .hero-content h1 span {\n background: linear-gradient(to right, #60a5fa, #c084fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .tagline-hero {\n font-size: 1.5rem;\n color: var(--accent-glow);\n margin-bottom: 40px;\n font-weight: 400;\n letter-spacing: 1px;\n text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);\n }\n\n \/* --- SERVICIOS --- *\/\n #servicios {\n background: linear-gradient(180deg, var(--primary-bg) 0%, #1e1b4b 100%);\n }\n\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n }\n\n .service-card {\n background: var(--glass-bg);\n backdrop-filter: blur(12px);\n border: 1px solid var(--glass-border);\n padding: 45px 30px;\n border-radius: 20px;\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n }\n\n .service-card:hover {\n transform: translateY(-10px);\n background: rgba(30, 41, 59, 0.7);\n border-color: rgba(56, 189, 248, 0.5);\n box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(59, 130, 246, 0.1);\n }\n\n .service-card::before {\n content: '';\n position: absolute;\n top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);\n transition: 0.5s;\n }\n .service-card:hover::before { left: 100%; }\n\n .icon-box {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));\n border: 1px solid rgba(59, 130, 246, 0.3);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 25px;\n font-size: 1.8rem;\n color: var(--accent-glow);\n transition: var(--transition);\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);\n }\n\n .service-card:hover .icon-box {\n background: var(--main-gradient);\n color: var(--text-white);\n transform: rotateY(10deg) scale(1.1);\n box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);\n }\n\n .service-card h3 {\n font-size: 1.5rem;\n margin-bottom: 15px;\n color: var(--text-white);\n }\n\n .service-card p {\n color: var(--text-muted);\n margin-bottom: 25px;\n font-size: 0.95rem;\n }\n\n .service-link {\n color: var(--accent-glow);\n font-weight: 600;\n font-size: 0.9rem;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n \n .service-link i { transition: 0.3s; }\n .service-link:hover i { transform: translateX(5px); text-shadow: 0 0 10px var(--accent-glow); }\n\n \/* --- ABOUT SECTION --- *\/\n #nosotros {\n background-color: var(--primary-bg);\n }\n\n .about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 70px;\n align-items: center;\n }\n\n .about-image {\n position: relative;\n }\n \n .about-image::after {\n content: '';\n position: absolute;\n top: -20px; left: -20px;\n width: 100%; height: 100%;\n border: 2px solid transparent;\n border-image: var(--main-gradient);\n border-image-slice: 1;\n border-radius: 15px;\n z-index: 0;\n }\n\n .about-image img {\n width: 100%;\n border-radius: 15px;\n box-shadow: 0 25px 50px rgba(0,0,0,0.4);\n position: relative;\n z-index: 1;\n filter: brightness(0.9) contrast(1.1);\n }\n\n .about-text h2 {\n font-size: 2.5rem;\n color: var(--text-white);\n margin-bottom: 25px;\n }\n\n .feature-list li {\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-weight: 500;\n color: var(--text-gray);\n }\n\n .feature-list i {\n color: #8b5cf6;\n background: rgba(139, 92, 246, 0.15);\n padding: 10px;\n border-radius: 10px;\n border: 1px solid rgba(139, 92, 246, 0.3);\n }\n\n \/* --- 3D SECTION (INTEGRADA) --- *\/\n #marcas {\n background-color: #000; \/* Fondo negro profundo para el 3D *\/\n padding: 0;\n position: relative;\n border-top: 1px solid var(--glass-border);\n border-bottom: 1px solid var(--glass-border);\n \/* Altura espec\u00edfica para la escena 3D *\/\n height: 85vh; \n width: 100%;\n overflow: hidden;\n }\n\n #three-container {\n width: 100%;\n height: 100%;\n position: relative;\n background: #050b1a; \/* Color de fondo de la escena *\/\n }\n\n \/* UI Elementos del 3D (Scoping) *\/\n #three-container .title-panel {\n position: absolute;\n top: 30px;\n left: 0;\n right: 0;\n text-align: center;\n z-index: 100;\n pointer-events: none;\n }\n \n #three-container .title-panel h1 {\n background: linear-gradient(135deg, #ffffff, #0abde3);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n font-size: 2rem;\n margin: 0;\n text-shadow: 0 0 20px rgba(0,0,0,0.5);\n letter-spacing: 2px;\n }\n \n #three-container .title-panel p {\n color: #94a3b8;\n margin: 5px 0 0;\n font-size: 1rem;\n }\n \n #three-container .instructions {\n position: absolute;\n bottom: 30px;\n left: 30px;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(8px);\n padding: 10px 20px;\n border-radius: 30px;\n color: #cbd5e1;\n font-size: 14px;\n z-index: 100;\n pointer-events: none;\n font-family: monospace;\n border-left: 3px solid #0abde3;\n }\n \n #three-container .hover-tooltip {\n position: absolute;\n bottom: 150px;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(10, 20, 35, 0.95);\n backdrop-filter: blur(16px);\n border-radius: 50px;\n padding: 12px 28px;\n border: 1px solid #0abde3;\n color: white;\n text-align: center;\n z-index: 200;\n pointer-events: none;\n transition: all 0.2s ease;\n font-size: 16px;\n white-space: nowrap;\n box-shadow: 0 0 30px rgba(10, 189, 227, 0.3);\n font-weight: 500;\n }\n \n #three-container .hover-tooltip span {\n color: #0abde3;\n }\n \n #three-container .reset-btn {\n position: absolute;\n bottom: 30px;\n right: 30px;\n background: rgba(0,0,0,0.7);\n border: 1px solid #0abde3;\n color: #0abde3;\n padding: 10px 20px;\n border-radius: 30px;\n cursor: pointer;\n z-index: 100;\n font-size: 14px;\n font-weight: 500;\n transition: 0.2s;\n backdrop-filter: blur(4px);\n }\n \n #three-container .reset-btn:hover {\n background: #0abde3;\n color: #0a0e1a;\n }\n\n @media (max-width: 768px) {\n #three-container .title-panel h1 { font-size: 1.2rem; }\n #three-container .hover-tooltip { font-size: 11px; padding: 8px 16px; white-space: normal; width: 90%; text-align: center; bottom: 100px; }\n #three-container .instructions { font-size: 10px; bottom: 10px; left: 10px; }\n }\n\n \/* --- CONTACTO --- *\/\n .contact-section {\n background: linear-gradient(to top, #0f172a, #172554);\n position: relative;\n }\n\n .contact-container {\n display: grid;\n grid-template-columns: 1fr 1.2fr;\n gap: 60px;\n }\n\n .contact-info h3 {\n font-size: 2rem;\n color: var(--text-white);\n margin-bottom: 20px;\n }\n\n .info-item {\n margin-bottom: 35px;\n display: flex;\n align-items: flex-start;\n gap: 20px;\n }\n\n .info-item i {\n color: #60a5fa;\n background: rgba(59, 130, 246, 0.15);\n font-size: 1.4rem;\n margin-top: 5px;\n width: 55px;\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border: 1px solid rgba(59, 130, 246, 0.2);\n }\n\n .info-item h4 {\n color: var(--text-white);\n margin-bottom: 5px;\n font-size: 1.1rem;\n }\n\n .contact-form {\n background: rgba(15, 23, 42, 0.6);\n backdrop-filter: blur(15px);\n padding: 45px;\n border-radius: 24px;\n border: 1px solid var(--glass-border);\n box-shadow: 0 20px 50px rgba(0,0,0,0.2);\n }\n\n .form-group label {\n display: block;\n margin-bottom: 10px;\n font-weight: 500;\n font-size: 0.9rem;\n color: var(--text-gray);\n }\n\n .form-group input, .form-group select, .form-group textarea {\n width: 100%;\n padding: 15px;\n background: rgba(0, 0, 0, 0.3);\n border: 1px solid var(--glass-border);\n border-radius: 10px;\n font-family: inherit;\n color: var(--text-white);\n transition: var(--transition);\n }\n\n .form-group input:focus, .form-group textarea:focus {\n outline: none;\n border-color: #8b5cf6;\n box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);\n background: rgba(0, 0, 0, 0.5);\n }\n \n .form-group select option {\n background-color: var(--primary-bg);\n color: var(--text-white);\n }\n\n \/* --- MAPA --- *\/\n .map-wrapper {\n margin-top: 40px;\n border-radius: 20px;\n overflow: hidden;\n border: 1px solid var(--glass-border);\n box-shadow: 0 0 20px rgba(0,0,0,0.3);\n height: 300px;\n }\n\n .map-wrapper iframe {\n width: 100%;\n height: 100%;\n border: 0;\n filter: grayscale(100%) invert(92%) contrast(90%) brightness(0.8);\n }\n\n \/* --- FOOTER --- *\/\n footer {\n background-color: #020617;\n color: var(--text-muted);\n padding: 80px 0 30px;\n border-top: 1px solid var(--glass-border);\n background-image: radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.05), transparent 30%);\n }\n\n .footer-grid {\n display: grid;\n grid-template-columns: 1.5fr 1fr 1fr 1fr;\n gap: 40px;\n margin-bottom: 60px;\n }\n\n .footer-brand img {\n max-width: 200px;\n margin-bottom: 20px;\n opacity: 0.9;\n }\n\n .footer-brand h2 {\n color: var(--text-white);\n margin-bottom: 10px;\n }\n \n .slogan-footer {\n font-style: italic;\n color: var(--accent-glow);\n margin-bottom: 15px;\n display: block;\n }\n\n .footer-col h4 {\n color: var(--text-white);\n margin-bottom: 25px;\n font-weight: 600;\n font-size: 1.1rem;\n }\n\n .footer-links li { margin-bottom: 12px; }\n .footer-links a { transition: 0.3s; color: var(--text-muted); }\n .footer-links a:hover { color: #60a5fa; padding-left: 5px; }\n\n .social-icons {\n display: flex;\n gap: 15px;\n margin-top: 20px;\n }\n\n .social-icons a {\n width: 42px; height: 42px;\n background: rgba(255,255,255,0.05);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: var(--transition);\n color: var(--text-white);\n border: 1px solid transparent;\n }\n\n .social-icons a:hover {\n background: var(--main-gradient);\n transform: translateY(-3px);\n box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);\n }\n\n .footer-bottom {\n text-align: center;\n padding-top: 30px;\n border-top: 1px solid var(--glass-border);\n font-size: 0.85rem;\n color: var(--text-muted);\n }\n\n \/* --- RESPONSIVE --- *\/\n @media (max-width: 991px) {\n .hero-content h1 { font-size: 2.8rem; }\n .about-grid, .contact-container, .footer-grid { grid-template-columns: 1fr; }\n .about-image { order: -1; margin-bottom: 30px; }\n .footer-grid { text-align: center; }\n .social-icons { justify-content: center; }\n #marcas { height: 60vh; }\n }\n\n @media (max-width: 768px) {\n .nav-links {\n position: fixed;\n top: 0; right: -100%;\n width: 75%; height: 100vh;\n background: #0f172a;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-shadow: -10px 0 30px rgba(0,0,0,0.5);\n transition: 0.4s ease-in-out;\n border-left: 1px solid var(--glass-border);\n }\n .nav-links.active { right: 0; }\n .mobile-toggle { display: block; z-index: 1001; }\n .hero { padding-top: 100px; }\n .section-title h2 { font-size: 2rem; }\n }\n <\/style>\n \n \n <script type=\"importmap\">\n {\n \"imports\": {\n \"three\": \"https:\/\/unpkg.com\/three@0.128.0\/build\/three.module.js\",\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.128.0\/examples\/jsm\/\"\n }\n }\n <\/script>\n<\/head>\n<body>\n\n \n <header>\n <div class=\"container\">\n <nav>\n <a href=\"#\" class=\"logo-container\">\n <img decoding=\"async\" src=\"https:\/\/z-cdn-media.chatglm.cn\/files\/2c42de3b-618f-406d-af52-fa6e9fc4ee8a.jpeg?auth_key=1877944244-7467c27a68404e22adbb443cbffef21e-0-4a15d576640b51874548295d5bba8242\" alt=\"Estructurix Logo\" class=\"logo-img\">\n <div class=\"logo-text\">\n ESTRUCTURIX\n <span>CONEXI\u00d3N SIN ENREDOs<\/span>\n <\/div>\n <\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#inicio\">Inicio<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"#marcas\">Mundo 3D<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <li><a href=\"#contacto\" class=\"btn btn-primary\" style=\"padding: 10px 25px; font-size: 0.9rem;\">Cotizar<\/a><\/li>\n <\/ul>\n <div class=\"mobile-toggle\" id=\"mobileMenu\">\n <i class=\"fa-solid fa-bars\"><\/i>\n <\/div>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <section id=\"inicio\" class=\"hero\">\n <div class=\"container\">\n <div class=\"hero-content\">\n <img decoding=\"async\" src=\"https:\/\/z-cdn-media.chatglm.cn\/files\/2c42de3b-618f-406d-af52-fa6e9fc4ee8a.jpeg?auth_key=1877944244-7467c27a68404e22adbb443cbffef21e-0-4a15d576640b51874548295d5bba8242\" alt=\"Brand\" class=\"hero-logo-watermark\">\n \n <h1>Infraestructura <br> <span>S\u00f3lida y Segura<\/span><\/h1>\n <p class=\"tagline-hero\">Nuestra red, tu conexi\u00f3n sin enredos.<\/p>\n <p style=\"margin-bottom: 40px; font-size: 1.1rem; color: #cbd5e1; max-width: 700px; margin-left: auto; margin-right: auto;\">\n Especialistas en redes, datacenters, videovigilancia y mantenimiento preventivo de equipos de c\u00f3mputo e impresi\u00f3n en Mira, Carchi.\n <\/p>\n <div style=\"display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;\">\n <a href=\"#servicios\" class=\"btn btn-primary\">Nuestros Servicios<\/a>\n <a href=\"#marcas\" class=\"btn btn-outline\">Explorar Marcas 3D<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"servicios\" class=\"section-padding\">\n <div class=\"container\">\n <div class=\"section-title\">\n <h2>Nuestras Soluciones<\/h2>\n <p>Tecnolog\u00eda de punta para la operatividad de tu empresa.<\/p>\n <\/div>\n\n <div class=\"services-grid\">\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-network-wired\"><\/i><\/div>\n <h3>Redes Estructuradas<\/h3>\n <p>Dise\u00f1o e implementaci\u00f3n de cableado certificado. Conectividad de alta velocidad.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-server\"><\/i><\/div>\n <h3>Datacenter<\/h3>\n <p>Infraestructura cr\u00edtica: Racks, sistemas de enfriamiento, UPS y gesti\u00f3n de servidores.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-video\"><\/i><\/div>\n <h3>Vigilancia CCTV<\/h3>\n <p>Sistemas de seguridad IP 4K, monitoreo remoto y control de accesos.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-laptop-medical\"><\/i><\/div>\n <h3>Mantenimiento<\/h3>\n <p>Mantenimiento especializado para PCs, Laptops e Impresoras. Optimizaci\u00f3n y limpieza.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"nosotros\" class=\"section-padding\">\n <div class=\"container\">\n <div class=\"about-grid\">\n <div class=\"about-image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/techwork\/600\/500\" alt=\"T\u00e9cnico Estructurix\">\n <\/div>\n <div class=\"about-text\">\n <h2>Expertos en Conectividad<\/h2>\n <p style=\"margin-bottom: 25px; color: var(--text-gray);\">\n En Estructurix entendemos que la tecnolog\u00eda es el motor de tu negocio. Nos dedicamos a garantizar que tu infraestructura funcione sin interrupciones, ofreciendo calidad y compromiso en cada instalaci\u00f3n.\n <\/p>\n <ul class=\"feature-list\">\n <li><i class=\"fa-solid fa-shield-halved\"><\/i> Garant\u00eda en todos nuestros trabajos<\/li>\n <li><i class=\"fa-solid fa-clock\"><\/i> Soporte t\u00e9cnico \u00e1gil y local<\/li>\n <li><i class=\"fa-solid fa-microchip\"><\/i> Equipos de \u00faltima generaci\u00f3n<\/li>\n <li><i class=\"fa-solid fa-users-gear\"><\/i> Personal capacitado y certificado<\/li>\n <\/ul>\n <br>\n <a href=\"#contacto\" class=\"btn btn-primary\">Cont\u00e1ctanos Ahora<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"marcas\">\n <div id=\"three-container\">\n <div class=\"title-panel\">\n <h1>\ud83c\udf10 ESTRUCTURIX | Universo Tecnol\u00f3gico<\/h1>\n <p>Explora las marcas l\u00edderes en Redes \u00b7 Seguridad \u00b7 Telefon\u00eda IP \u00b7 Datacenter \u00b7 CCTV<\/p>\n <\/div>\n <div class=\"instructions\">\n \ud83d\uddb1\ufe0f Arrastra para rotar | Pasa el mouse sobre cada marca \u2192 se ampl\u00eda y muestra informaci\u00f3n\n <\/div>\n <div class=\"hover-tooltip\" id=\"hoverTooltip\">\n \ud83e\udded Pasa el mouse sobre cualquier marca\n <\/div>\n <button class=\"reset-btn\" id=\"resetViewBtn\">\u27f3 Resetear vista<\/button>\n \n <\/div>\n <\/section>\n\n \n <section id=\"contacto\" class=\"section-padding contact-section\">\n <div class=\"container\">\n <div class=\"contact-container\">\n <div class=\"contact-info\">\n <h3>Hablemos de tu Proyecto<\/h3>\n <p style=\"margin-bottom: 40px; color: var(--text-gray);\">\n Completa el formulario o vis\u00edtanos en nuestras oficinas. Estamos listos para solucionar tus necesidades tecnol\u00f3gicas.\n <\/p>\n \n <div class=\"info-item\">\n <i class=\"fa-solid fa-location-dot\"><\/i>\n <div>\n <h4>Ubicaci\u00f3n<\/h4>\n <p>San Antonio de Mira, Carchi<\/p>\n <\/div>\n <\/div>\n <div class=\"info-item\">\n <i class=\"fa-solid fa-envelope\"><\/i>\n <div>\n <h4>Email<\/h4>\n <p><a href=\"mailto:info@estructurix.com\">info@estructurix.com<\/a><\/p>\n <\/div>\n <\/div>\n <div class=\"info-item\">\n <i class=\"fa-solid fa-phone\"><\/i>\n <div>\n <h4>Tel\u00e9fono<\/h4>\n <p>+593 99 123 4567<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <div class=\"contact-form\">\n <form id=\"contactForm\">\n <div class=\"form-group\">\n <label for=\"name\">Nombre Completo<\/label>\n <input type=\"text\" id=\"name\" placeholder=\"Tu nombre\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Correo Electr\u00f3nico<\/label>\n <input type=\"email\" id=\"email\" placeholder=\"tucorreo@empresa.com\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"service\">Servicio de Inter\u00e9s<\/label>\n <select id=\"service\">\n <option value=\"redes\">Redes \/ Cableado<\/option>\n <option value=\"datacenter\">Datacenter<\/option>\n <option value=\"cctv\">C\u00e1maras \/ CCTV<\/option>\n <option value=\"mantenimiento\">Mantenimiento PC\/Impresoras<\/option>\n <option value=\"otro\">Otro<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"message\">Mensaje<\/label>\n <textarea id=\"message\" rows=\"4\" placeholder=\"Cu\u00e9ntanos sobre tus necesidades...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\" style=\"width: 100%;\">Enviar Mensaje<\/button>\n <\/form>\n <\/div>\n \n <div class=\"map-wrapper\">\n <iframe \n src=\"https:\/\/maps.google.com\/maps?q=San+Antonio+de+Mira,+Carchi,+Ecuador&t=&z=13&ie=UTF8&iwloc=&output=embed\" \n allowfullscreen=\"\" \n loading=\"lazy\">\n <\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer>\n <div class=\"container\">\n <div class=\"footer-grid\">\n <div class=\"footer-brand\">\n <img decoding=\"async\" src=\"https:\/\/z-cdn-media.chatglm.cn\/files\/2c42de3b-618f-406d-af52-fa6e9fc4ee8a.jpeg?auth_key=1877944244-7467c27a68404e22adbb443cbffef21e-0-4a15d576640b51874548295d5bba8242\" alt=\"Estructurix Logo\">\n <span class=\"slogan-footer\">\u00abNuestra red, tu conexi\u00f3n sin enredos.\u00bb<\/span>\n <p style=\"font-size: 0.9rem; margin-bottom: 20px;\">\n Soluciones integrales de TI en Mira, Carchi. Seguridad y tecnolog\u00eda al servicio de tu crecimiento.\n <\/p>\n <div class=\"social-icons\">\n <a href=\"#\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\n <\/div>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Servicios<\/h4>\n <ul class=\"footer-links\">\n <li><a href=\"#servicios\">Redes Estructuradas<\/a><\/li>\n <li><a href=\"#servicios\">Datacenter<\/a><\/li>\n <li><a href=\"#servicios\">C\u00e1maras de Seguridad<\/a><\/li>\n <li><a href=\"#servicios\">Mantenimiento Preventivo<\/a><\/li>\n <\/ul>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Enlaces<\/h4>\n <ul class=\"footer-links\">\n <li><a href=\"#nosotros\">Sobre Nosotros<\/a><\/li>\n <li><a href=\"https:\/\/estructurix.com\/?page_id=11\" target=\"_blank\">Nuestras Marcas<\/a><\/li>\n <li><a href=\"#contacto\">Soporte T\u00e9cnico<\/a><\/li>\n <li><a href=\"#\">T\u00e9rminos y Condiciones<\/a><\/li>\n <\/ul>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Cont\u00e1ctanos<\/h4>\n <ul class=\"footer-links\">\n <li><i class=\"fa-solid fa-location-dot\" style=\"margin-right:8px; color:#60a5fa\"><\/i> San Antonio de Mira, Carchi<\/li>\n <li><i class=\"fa-solid fa-phone\" style=\"margin-right:8px; color:#60a5fa\"><\/i> +593 99 123 4567<\/li>\n <li><i class=\"fa-solid fa-envelope\" style=\"margin-right:8px; color:#60a5fa\"><\/i> info@estructurix.com<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"footer-bottom\">\n <p>© 2023 Estructurix. Todos los derechos reservados.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n \/\/ Funcionalidad del Men\u00fa M\u00f3vil\n const mobileToggle = document.getElementById('mobileMenu');\n const navLinks = document.getElementById('navLinks');\n\n mobileToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const icon = mobileToggle.querySelector('i');\n if (navLinks.classList.contains('active')) {\n icon.classList.remove('fa-bars');\n icon.classList.add('fa-xmark');\n } else {\n icon.classList.remove('fa-xmark');\n icon.classList.add('fa-bars');\n }\n });\n\n document.querySelectorAll('.nav-links a').forEach(link => {\n link.addEventListener('click', () => {\n if (navLinks.classList.contains('active')) {\n navLinks.classList.remove('active');\n const icon = mobileToggle.querySelector('i');\n icon.classList.remove('fa-xmark');\n icon.classList.add('fa-bars');\n }\n });\n });\n\n const form = document.getElementById('contactForm');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n const btn = form.querySelector('button');\n const originalText = btn.innerText;\n \n btn.innerText = 'Enviando...';\n btn.style.opacity = '0.8';\n\n setTimeout(() => {\n alert('Gracias por contactar a Estructurix. Te responderemos a info@estructurix.com pronto.');\n form.reset();\n btn.innerText = originalText;\n btn.style.opacity = '1';\n }, 1500);\n });\n <\/script>\n\n \n <script type=\"module\">\n import * as THREE from 'three';\n import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n import { CSS2DRenderer, CSS2DObject } from 'three\/addons\/renderers\/CSS2DRenderer.js';\n\n \/\/ --- CONFIGURACI\u00d3N DEL CONTENEDOR ---\n const container = document.getElementById('three-container');\n \n \/\/ --- Inicializaci\u00f3n de escena ---\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x050b1a); \/\/ Fondo del universo\n scene.fog = new THREE.FogExp2(0x050b1a, 0.008);\n\n const camera = new THREE.PerspectiveCamera(45, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n camera.position.set(0, 1.5, 9);\n camera.lookAt(0, 0, 0);\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.shadowMap.enabled = true;\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n \/\/ CSS2DRenderer para etiquetas\n const labelRenderer = new CSS2DRenderer();\n labelRenderer.setSize(container.clientWidth, container.clientHeight);\n labelRenderer.domElement.style.position = 'absolute';\n labelRenderer.domElement.style.top = '0px';\n labelRenderer.domElement.style.left = '0px';\n labelRenderer.domElement.style.pointerEvents = 'none';\n container.appendChild(labelRenderer.domElement);\n\n \/\/ Controles\n const controls = new OrbitControls(camera, container); \/\/ Adjuntar al contenedor\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.autoRotate = true;\n controls.autoRotateSpeed = 1.5;\n controls.enableZoom = true;\n controls.enablePan = false;\n controls.zoomSpeed = 1.0;\n controls.target.set(0, 0, 0);\n \n \/\/ Bot\u00f3n reset\n document.getElementById('resetViewBtn').addEventListener('click', () => {\n camera.position.set(0, 1.5, 9);\n controls.target.set(0, 0, 0);\n controls.update();\n });\n\n \/\/ --- Luces ---\n const ambientLight = new THREE.AmbientLight(0x2c3e66);\n scene.add(ambientLight);\n \n const mainLight = new THREE.DirectionalLight(0xffffff, 1.2);\n mainLight.position.set(5, 8, 5);\n mainLight.castShadow = true;\n scene.add(mainLight);\n \n const fillLight = new THREE.PointLight(0x4466cc, 0.5);\n fillLight.position.set(-3, 2, 4);\n scene.add(fillLight);\n \n const backLight = new THREE.PointLight(0xffaa66, 0.4);\n backLight.position.set(0, 1, -5);\n scene.add(backLight);\n \n const rimLight = new THREE.PointLight(0x0abde3, 0.6);\n rimLight.position.set(2, 3, -3);\n scene.add(rimLight);\n \n \/\/ --- Part\u00edculas de fondo ---\n const starCount = 1800;\n const starGeo = new THREE.BufferGeometry();\n const starPos = new Float32Array(starCount * 3);\n for (let i = 0; i < starCount; i++) {\n starPos[i*3] = (Math.random() - 0.5) * 800;\n starPos[i*3+1] = (Math.random() - 0.5) * 500;\n starPos[i*3+2] = (Math.random() - 0.5) * 300 - 100;\n }\n starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));\n const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.2, transparent: true, opacity: 0.7 });\n const stars = new THREE.Points(starGeo, starMat);\n scene.add(stars);\n \n \/\/ --- Esfera y Anillos decorativos ---\n const glowSphere = new THREE.Mesh(\n new THREE.SphereGeometry(3.0, 32, 32),\n new THREE.MeshBasicMaterial({ color: 0x0abde3, wireframe: true, transparent: true, opacity: 0.12 })\n );\n scene.add(glowSphere);\n \n const ringGeo = new THREE.TorusGeometry(3.4, 0.04, 128, 400);\n const ringMat = new THREE.MeshStandardMaterial({ color: 0x0abde3, emissive: 0x0a2350, emissiveIntensity: 0.3 });\n const ring1 = new THREE.Mesh(ringGeo, ringMat);\n ring1.rotation.x = Math.PI \/ 2;\n scene.add(ring1);\n \n const ring2 = new THREE.Mesh(ringGeo, ringMat);\n ring2.rotation.z = Math.PI \/ 3;\n ring2.rotation.x = Math.PI \/ 3;\n scene.add(ring2);\n \n const ring3 = new THREE.Mesh(ringGeo, ringMat);\n ring3.rotation.y = Math.PI \/ 4;\n ring3.rotation.x = Math.PI \/ 5;\n scene.add(ring3);\n \n \/\/ --- MARCAS ---\n const brandsData = [\n { name: \"Fortinet\", category: \"Firewall NGFW\", icon: \"\ud83d\udee1\ufe0f\", desc: \"FortiGate \u00b7 SD-WAN \u00b7 Seguridad IA\", color: \"#E25822\" },\n { name: \"Palo Alto\", category: \"Seguridad Perimetral\", icon: \"\ud83d\udd25\", desc: \"ML \u00b7 Prisma SASE \u00b7 Zero Trust\", color: \"#F4C542\" },\n { name: \"Check Point\", category: \"Ciberseguridad\", icon: \"\ud83d\udd12\", desc: \"Quantum \u00b7 Infinity \u00b7 Ransomware Protection\", color: \"#CE181E\" },\n { name: \"Juniper\", category: \"Redes & Seguridad\", icon: \"\ud83c\udf32\", desc: \"SRX \u00b7 Mist AI \u00b7 Switching EX\", color: \"#85C1E9\" },\n { name: \"Trend Micro\", category: \"XDR \u00b7 Antivirus\", icon: \"\ud83d\udc1e\", desc: \"Deep Discovery \u00b7 Cloud Security\", color: \"#0099CC\" },\n { name: \"Hillstone\", category: \"Firewall\", icon: \"\u26f0\ufe0f\", desc: \"Alto rendimiento \u00b7 Protecci\u00f3n DDoS\", color: \"#6699CC\" },\n { name: \"Sophos\", category: \"Seguridad\", icon: \"\ud83d\udee1\ufe0f\", desc: \"XG Firewall \u00b7 MDR \u00b7 Synchronized\", color: \"#2C5E9C\" },\n { name: \"WatchGuard\", category: \"Firewall SMB\", icon: \"\ud83d\udee1\ufe0f\", desc: \"Firebox \u00b7 AuthPoint \u00b7 Zero-touch\", color: \"#D93F21\" },\n { name: \"MikroTik\", category: \"Routing & Wireless\", icon: \"\ud83d\udce1\", desc: \"RouterOS \u00b7 CAPsMAN \u00b7 Switches\", color: \"#DEB887\" },\n { name: \"Ruckus\", category: \"WiFi Enterprise\", icon: \"\ud83d\udcf6\", desc: \"BeamFlex+ \u00b7 Alta Densidad \u00b7 Cloud\", color: \"#2A9D8F\" },\n { name: \"Aruba\", category: \"Redes Inteligentes\", icon: \"\ud83c\udf0a\", desc: \"ESP \u00b7 WiFi 6E \u00b7 Aruba Central\", color: \"#1D7A46\" },\n { name: \"Cisco\", category: \"Infraestructura\", icon: \"\ud83d\udd37\", desc: \"Catalyst \u00b7 Meraki \u00b7 DNA Center\", color: \"#1BA0D7\" },\n { name: \"Zyxel\", category: \"Redes & Seguridad\", icon: \"\ud83d\udd32\", desc: \"Nebula Cloud \u00b7 USG FLEX\", color: \"#722F37\" },\n { name: \"Alcatel-Lucent\", category: \"Switching\", icon: \"\ud83c\udfe2\", desc: \"OmniSwitch \u00b7 Stellar WiFi\", color: \"#3771C8\" },\n { name: \"Ubiquiti\", category: \"SDN & WiFi\", icon: \"\ud83d\udce1\", desc: \"UniFi \u00b7 Dream Machine \u00b7 EdgeMAX\", color: \"#055C9D\" },\n { name: \"TP-Link Omada\", category: \"Redes SDN\", icon: \"\ud83c\udf10\", desc: \"Omada Cloud \u00b7 Switches SFP+\", color: \"#4CAF50\" },\n { name: \"Grandstream\", category: \"Telefon\u00eda IP\", icon: \"\ud83d\udcde\", desc: \"UCM \u00b7 Tel\u00e9fonos IP \u00b7 Wave\", color: \"#0B5E7E\" },\n { name: \"Yealink\", category: \"Unified Comms\", icon: \"\ud83c\udfa7\", desc: \"Tel\u00e9fonos IP \u00b7 Conferencias \u00b7 Teams\", color: \"#5D3A1A\" },\n { name: \"Poly (HP)\", category: \"Audio\/Video\", icon: \"\ud83c\udf99\ufe0f\", desc: \"Studio Series \u00b7 Auriculares\", color: \"#222222\" },\n { name: \"3CX\", category: \"PABX Software\", icon: \"\u2601\ufe0f\", desc: \"WebRTC \u00b7 M\u00f3vil \u00b7 Integraci\u00f3n CRM\", color: \"#2688C3\" },\n { name: \"Dell EMC\", category: \"Servidores & Storage\", icon: \"\ud83d\udcbe\", desc: \"PowerEdge \u00b7 PowerStore \u00b7 VxRail\", color: \"#007DB8\" },\n { name: \"HPE\", category: \"Datacenter\", icon: \"\ud83d\udda5\ufe0f\", desc: \"ProLiant \u00b7 Alletra \u00b7 GreenLake\", color: \"#0096D6\" },\n { name: \"VMware\", category: \"Virtualizaci\u00f3n\", icon: \"\ud83e\udde9\", desc: \"vSphere \u00b7 vSAN \u00b7 NSX\", color: \"#5C9E7B\" },\n { name: \"Lenovo\", category: \"Servidores\", icon: \"\u2699\ufe0f\", desc: \"ThinkSystem \u00b7 Refrigeraci\u00f3n L\u00edquida\", color: \"#E2231A\" },\n { name: \"Synology\", category: \"NAS Storage\", icon: \"\ud83d\udcc1\", desc: \"Backup \u00b7 Vigilancia \u00b7 Virtual DSM\", color: \"#4B4B4B\" },\n { name: \"QNAP\", category: \"Storage\", icon: \"\ud83d\udcbd\", desc: \"QuTS hero \u00b7 JBOD \u00b7 Virtualizaci\u00f3n\", color: \"#2F4858\" },\n { name: \"Hikvision\", category: \"Videovigilancia\", icon: \"\ud83c\udfa5\", desc: \"ColorVu \u00b7 AcuSense \u00b7 Deep Learning\", color: \"#1E3A5F\" },\n { name: \"Dahua\", category: \"CCTV\", icon: \"\ud83d\udc41\ufe0f\", desc: \"WizMind \u00b7 4K \u00b7 NVR Inteligente\", color: \"#2C5F8A\" },\n { name: \"AXIS\", category: \"C\u00e1maras IP\", icon: \"\ud83c\udfac\", desc: \"Ciberseguridad \u00b7 Anal\u00edtica Avanzada\", color: \"#114B5F\" }\n ];\n \n const radiusSphere = 3.6;\n const totalBrands = brandsData.length;\n const brandsGroup = new THREE.Group();\n scene.add(brandsGroup);\n const brandObjects = [];\n \n \/\/ Distribuci\u00f3n en esfera (Fibonacci sphere)\n const phiGolden = Math.PI * (3 - Math.sqrt(5));\n \n brandsData.forEach((brand, idx) => {\n const y = 1 - (idx \/ (totalBrands - 1)) * 2;\n const radiusAtY = Math.sqrt(1 - y*y);\n const theta = idx * phiGolden * 2 * Math.PI;\n \n const x = Math.cos(theta) * radiusAtY;\n const z = Math.sin(theta) * radiusAtY;\n \n const px = x * radiusSphere;\n const py = y * radiusSphere;\n const pz = z * radiusSphere;\n \n const group = new THREE.Group();\n group.position.set(px, py, pz);\n group.lookAt(0, 0, 0);\n group.rotateY(Math.PI);\n \n \/\/ Tarjeta 3D Base\n const baseGeo = new THREE.CylinderGeometry(0.58, 0.58, 0.1, 32);\n const materialBase = new THREE.MeshStandardMaterial({ \n color: brand.color, \n metalness: 0.7, \n roughness: 0.3,\n emissive: 0x111122,\n emissiveIntensity: 0.2\n });\n const basePlate = new THREE.Mesh(baseGeo, materialBase);\n basePlate.castShadow = true;\n group.add(basePlate);\n \n \/\/ Anillo\n const edgeRingGeo = new THREE.TorusGeometry(0.62, 0.035, 32, 64);\n const edgeMat = new THREE.MeshStandardMaterial({ color: 0x0abde3, emissive: 0x0abde3, emissiveIntensity: 0.5 });\n const edgeRing = new THREE.Mesh(edgeRingGeo, edgeMat);\n group.add(edgeRing);\n \n \/\/ Esfera central\n const centerSphere = new THREE.Mesh(\n new THREE.SphereGeometry(0.16, 16, 16),\n new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: brand.color, emissiveIntensity: 0.4 })\n );\n centerSphere.position.set(0, 0, 0.12);\n group.add(centerSphere);\n \n \/\/ Etiqueta CSS\n const labelDiv = document.createElement('div');\n labelDiv.textContent = `${brand.icon} ${brand.name}`;\n labelDiv.style.backgroundColor = 'rgba(0,0,0,0.75)';\n labelDiv.style.color = 'white';\n labelDiv.style.fontSize = '13px';\n labelDiv.style.fontWeight = 'bold';\n labelDiv.style.padding = '4px 12px';\n labelDiv.style.borderRadius = '40px';\n labelDiv.style.border = `1px solid ${brand.color}`;\n labelDiv.style.fontFamily = 'system-ui, sans-serif';\n labelDiv.style.whiteSpace = 'nowrap';\n labelDiv.style.backdropFilter = 'blur(4px)';\n labelDiv.style.pointerEvents = 'none';\n const labelObj = new CSS2DObject(labelDiv);\n labelObj.position.set(0, 0.75, 0);\n group.add(labelObj);\n \n group.userData = { brand: brand, originalScale: 1, isHovered: false };\n brandsGroup.add(group);\n brandObjects.push(group);\n });\n \n \/\/ Part\u00edculas orbitales\n const particleOrbitCount = 1200;\n const particleOrbitGeo = new THREE.BufferGeometry();\n const orbitPositions = new Float32Array(particleOrbitCount * 3);\n for (let i = 0; i < particleOrbitCount; i++) {\n const theta2 = Math.random() * Math.PI * 2;\n const phi2 = Math.acos(2 * Math.random() - 1);\n const r = radiusSphere + 0.12;\n const x2 = r * Math.sin(phi2) * Math.cos(theta2);\n const y2 = r * Math.sin(phi2) * Math.sin(theta2);\n const z2 = r * Math.cos(phi2);\n orbitPositions[i*3] = x2;\n orbitPositions[i*3+1] = y2;\n orbitPositions[i*3+2] = z2;\n }\n particleOrbitGeo.setAttribute('position', new THREE.BufferAttribute(orbitPositions, 3));\n const particleMatOrbit = new THREE.PointsMaterial({ color: 0x0abde3, size: 0.045, transparent: true, opacity: 0.5 });\n const orbitParticles = new THREE.Points(particleOrbitGeo, particleMatOrbit);\n scene.add(orbitParticles);\n \n \/\/ --- RAYCASTER Y INTERACCI\u00d3N ---\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n const tooltipEl = document.getElementById('hoverTooltip');\n \n let currentlyHovered = null;\n \n \/\/ Normalizar mouse relativo al contenedor\n container.addEventListener('mousemove', (event) => {\n const rect = container.getBoundingClientRect();\n mouse.x = ((event.clientX - rect.left) \/ rect.width) * 2 - 1;\n mouse.y = -((event.clientY - rect.top) \/ rect.height) * 2 + 1;\n \n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(brandObjects, true);\n \n if (intersects.length > 0) {\n let hitObj = intersects[0].object;\n while (hitObj && !brandObjects.includes(hitObj)) {\n hitObj = hitObj.parent;\n }\n if (hitObj && brandObjects.includes(hitObj)) {\n if (currentlyHovered !== hitObj) {\n if (currentlyHovered) {\n resetBrandScale(currentlyHovered);\n }\n currentlyHovered = hitObj;\n applyHoverEffect(currentlyHovered);\n \n const brandInfo = hitObj.userData.brand;\n tooltipEl.style.opacity = '1';\n tooltipEl.innerHTML = `\n \u2728 <span>${brandInfo.icon} ${brandInfo.name}<\/span> \u2728<br>\n ${brandInfo.category}<br>\n \ud83d\udccc ${brandInfo.desc}<br>\n <small style=\"color:#aaa;\">\u2705 Haz clic para \"aplicar esta marca\"<\/small>\n `;\n tooltipEl.style.whiteSpace = 'normal';\n tooltipEl.style.textAlign = 'center';\n tooltipEl.style.maxWidth = '280px';\n }\n } else {\n if (currentlyHovered) {\n resetBrandScale(currentlyHovered);\n currentlyHovered = null;\n tooltipEl.style.opacity = '0';\n }\n }\n } else {\n if (currentlyHovered) {\n resetBrandScale(currentlyHovered);\n currentlyHovered = null;\n tooltipEl.style.opacity = '0';\n }\n }\n });\n \n function resetBrandScale(obj) {\n if (!obj) return;\n obj.scale.set(1, 1, 1);\n const baseMesh = obj.children.find(c => c.geometry && c.geometry.type === 'CylinderGeometry');\n if (baseMesh && baseMesh.material) {\n baseMesh.material.emissiveIntensity = 0.2;\n baseMesh.material.color.setHex(parseInt(obj.userData.brand.color.replace('#', '0x')));\n }\n const ringMesh = obj.children.find(c => c.geometry && c.geometry.type === 'TorusGeometry');\n if (ringMesh && ringMesh.material) {\n ringMesh.material.emissiveIntensity = 0.5;\n }\n }\n \n function applyHoverEffect(obj) {\n if (!obj) return;\n obj.scale.set(1.28, 1.28, 1.28);\n const baseMesh = obj.children.find(c => c.geometry && c.geometry.type === 'CylinderGeometry');\n if (baseMesh && baseMesh.material) {\n baseMesh.material.emissiveIntensity = 0.7;\n baseMesh.material.color.setHex(0xffaa55);\n }\n const ringMesh = obj.children.find(c => c.geometry && c.geometry.type === 'TorusGeometry');\n if (ringMesh && ringMesh.material) {\n ringMesh.material.emissiveIntensity = 1.2;\n ringMesh.material.color.setHex(0xffffff);\n }\n }\n \n container.addEventListener('click', (event) => {\n if (currentlyHovered) {\n const brand = currentlyHovered.userData.brand;\n tooltipEl.style.backgroundColor = '#0abde3';\n tooltipEl.style.color = '#0a0e1a';\n tooltipEl.innerHTML = `\u2705 \u00a1MARCA APLICADA! \u2705<br>${brand.name} ha sido seleccionada.<br>\ud83d\udcde Un asesor te contactar\u00e1.`;\n setTimeout(() => {\n tooltipEl.style.backgroundColor = 'rgba(10, 20, 35, 0.95)';\n tooltipEl.style.color = 'white';\n setTimeout(() => {\n if (!currentlyHovered) tooltipEl.style.opacity = '0';\n else tooltipEl.style.opacity = '1';\n }, 1500);\n }, 2000);\n \n alert(`\ud83d\udd27 [ESTRUCTURIX] Has aplicado la marca ${brand.name} (${brand.category}).\\n\\nNuestro equipo especializado te ofrecer\u00e1 la mejor integraci\u00f3n y presupuesto.\\nGracias por confiar en nosotros.`);\n }\n });\n \n \/\/ --- ANIMACI\u00d3N ---\n let timeAnim = 0;\n \n function animate() {\n requestAnimationFrame(animate);\n timeAnim += 0.008;\n \n ring1.rotation.z += 0.002;\n ring2.rotation.x += 0.0015;\n ring2.rotation.y += 0.001;\n ring3.rotation.z += 0.001;\n ring3.rotation.x += 0.002;\n \n orbitParticles.rotation.y += 0.001;\n orbitParticles.rotation.x = Math.sin(timeAnim * 0.3) * 0.1;\n \n stars.rotation.y += 0.0003;\n stars.rotation.x += 0.0002;\n \n controls.update();\n \n renderer.render(scene, camera);\n labelRenderer.render(scene, camera);\n }\n \n animate();\n \n \/\/ Resize Listener espec\u00edfico para el contenedor\n window.addEventListener('resize', onWindowResize, false);\n function onWindowResize() {\n \/\/ Re-calcular dimensiones basado en el contenedor\n const width = container.clientWidth;\n const height = container.clientHeight;\n \n camera.aspect = width \/ height;\n camera.updateProjectionMatrix();\n renderer.setSize(width, height);\n labelRenderer.setSize(width, height);\n }\n \n console.log('\u2705 Mundo 3D de marcas Estructurix cargado correctamente');\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Estructurix | Soluciones IT & Infraestructura 3D ESTRUCTURIX CONEXI\u00d3N SIN ENREDOs Inicio Servicios Nosotros Mundo 3D Contacto Cotizar Infraestructura S\u00f3lida y Segura Nuestra red, tu conexi\u00f3n sin enredos. Especialistas en redes, datacenters, videovigilancia y mantenimiento preventivo de equipos de c\u00f3mputo e impresi\u00f3n en Mira, Carchi. Nuestros Servicios Explorar Marcas 3D Nuestras Soluciones Tecnolog\u00eda de punta […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/estructurix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":7,"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":11,"date":"2026-05-05T02:22:18","date_gmt":"2026-05-05T02:22:18","guid":{"rendered":"https:\/\/estructurix.com\/?page_id=11"},"modified":"2026-05-04T22:25:06","modified_gmt":"2026-05-05T03:25:06","slug":"marcas","status":"publish","type":"page","link":"https:\/\/estructurix.com\/?page_id=11","title":{"rendered":"Marcas"},"content":{"rendered":"\n\n\n\n \n \n Estructurix | Soluciones IT & Infraestructura 3D<\/title>\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@600;700;800&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- VARIABLES CSS & RESET (ESTILO PRINCIPAL) --- *\/\n :root {\n --primary-bg: #0f172a; \/* Slate 900 *\/\n --secondary-bg: #1e293b; \/* Slate 800 *\/\n --main-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);\n --accent-glow: #38bdf8;\n \n --text-white: #f8fafc;\n --text-gray: #cbd5e1;\n --text-muted: #94a3b8;\n \n --glass-bg: rgba(30, 41, 59, 0.4);\n --glass-border: rgba(255, 255, 255, 0.08);\n \n --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --container-width: 1250px;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n font-family: 'Inter', sans-serif;\n color: var(--text-white);\n line-height: 1.7;\n background-color: var(--primary-bg);\n background-image: \n radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%), \n radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.08), transparent 25%);\n overflow-x: hidden; \/* Importante para el scroll horizontal *\/\n }\n\n a { text-decoration: none; color: inherit; }\n ul { list-style: none; }\n\n \/* --- TIPOGRAF\u00cdA --- *\/\n h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; letter-spacing: -0.5px; }\n\n \/* --- COMPONENTES UI --- *\/\n .container {\n max-width: var(--container-width);\n margin: 0 auto;\n padding: 0 25px;\n }\n\n .btn {\n display: inline-block;\n padding: 14px 35px;\n border-radius: 50px;\n font-weight: 600;\n transition: var(--transition);\n cursor: pointer;\n border: none;\n font-size: 1rem;\n position: relative;\n z-index: 1;\n overflow: hidden;\n }\n\n .btn-primary {\n background: var(--main-gradient);\n color: var(--text-white);\n box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);\n }\n\n .btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);\n filter: brightness(1.1);\n }\n\n .btn-outline {\n background: transparent;\n border: 2px solid rgba(255,255,255,0.3);\n color: var(--text-white);\n }\n\n .btn-outline:hover {\n border-color: var(--text-white);\n background: rgba(255,255,255,0.1);\n transform: translateY(-3px);\n }\n\n .section-title {\n text-align: center;\n margin-bottom: 80px;\n position: relative;\n }\n\n .section-title h2 {\n font-size: 2.8rem;\n background: var(--main-gradient);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 15px;\n font-weight: 800;\n }\n\n .section-padding {\n padding: 100px 0;\n position: relative;\n }\n\n \/* --- HEADER & NAV --- *\/\n header {\n background: rgba(15, 23, 42, 0.7);\n backdrop-filter: blur(20px);\n position: fixed;\n width: 100%;\n top: 0;\n z-index: 1000;\n padding: 15px 0;\n border-bottom: 1px solid var(--glass-border);\n }\n\n nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo-container {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .logo-img {\n height: 45px;\n width: auto;\n object-fit: contain;\n border-radius: 6px;\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);\n }\n \n .logo-text {\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--text-white);\n display: flex;\n flex-direction: column;\n line-height: 1;\n }\n \n .logo-text span {\n font-size: 0.65rem;\n font-weight: 600;\n color: var(--accent-glow);\n font-family: 'Inter', sans-serif;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n }\n\n .nav-links {\n display: flex;\n gap: 40px;\n }\n\n .nav-links a {\n color: var(--text-gray);\n font-weight: 500;\n font-size: 0.95rem;\n transition: var(--transition);\n }\n\n .nav-links a:hover, .nav-links a.active {\n color: var(--text-white);\n text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);\n }\n\n .mobile-toggle {\n display: none;\n color: var(--text-white);\n font-size: 1.6rem;\n cursor: pointer;\n }\n\n \/* --- HERO SECTION --- *\/\n .hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), var(--primary-bg)),\n url('https:\/\/picsum.photos\/seed\/serverroomtech\/1920\/1080');\n background-size: cover;\n background-position: center;\n padding-top: 80px;\n overflow: hidden;\n }\n\n .hero::before {\n content: \"\";\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background-image: \n radial-gradient(rgba(59, 130, 246, 0.15) 1px, transparent 1px);\n background-size: 40px 40px;\n mask-image: radial-gradient(circle at center, black 40%, transparent 100%);\n pointer-events: none;\n }\n\n .hero-content {\n position: relative;\n z-index: 2;\n text-align: center;\n color: var(--text-white);\n max-width: 900px;\n margin: 0 auto;\n }\n\n .hero-logo-watermark {\n opacity: 0.25;\n width: 160px;\n margin-bottom: 25px;\n filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));\n }\n\n .hero-content h1 {\n font-size: 4.2rem;\n font-weight: 800;\n margin-bottom: 30px;\n line-height: 1.1;\n text-shadow: 0 10px 30px rgba(0,0,0,0.5);\n }\n\n .hero-content h1 span {\n background: linear-gradient(to right, #60a5fa, #c084fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .tagline-hero {\n font-size: 1.5rem;\n color: var(--accent-glow);\n margin-bottom: 40px;\n font-weight: 400;\n letter-spacing: 1px;\n text-shadow: 0 0 20px rgba(56, 189, 248, 0.4);\n }\n\n \/* --- SERVICIOS --- *\/\n #servicios {\n background: linear-gradient(180deg, var(--primary-bg) 0%, #1e1b4b 100%);\n }\n\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 30px;\n }\n\n .service-card {\n background: var(--glass-bg);\n backdrop-filter: blur(12px);\n border: 1px solid var(--glass-border);\n padding: 45px 30px;\n border-radius: 20px;\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n }\n\n .service-card:hover {\n transform: translateY(-10px);\n background: rgba(30, 41, 59, 0.7);\n border-color: rgba(56, 189, 248, 0.5);\n box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(59, 130, 246, 0.1);\n }\n\n .service-card::before {\n content: '';\n position: absolute;\n top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);\n transition: 0.5s;\n }\n .service-card:hover::before { left: 100%; }\n\n .icon-box {\n width: 70px;\n height: 70px;\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));\n border: 1px solid rgba(59, 130, 246, 0.3);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 25px;\n font-size: 1.8rem;\n color: var(--accent-glow);\n transition: var(--transition);\n box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);\n }\n\n .service-card:hover .icon-box {\n background: var(--main-gradient);\n color: var(--text-white);\n transform: rotateY(10deg) scale(1.1);\n box-shadow: 0 0 25px rgba(139, 92, 246, 0.6);\n }\n\n .service-card h3 {\n font-size: 1.5rem;\n margin-bottom: 15px;\n color: var(--text-white);\n }\n\n .service-card p {\n color: var(--text-muted);\n margin-bottom: 25px;\n font-size: 0.95rem;\n }\n\n .service-link {\n color: var(--accent-glow);\n font-weight: 600;\n font-size: 0.9rem;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n \n .service-link i { transition: 0.3s; }\n .service-link:hover i { transform: translateX(5px); text-shadow: 0 0 10px var(--accent-glow); }\n\n \/* --- ABOUT SECTION --- *\/\n #nosotros {\n background-color: var(--primary-bg);\n }\n\n .about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 70px;\n align-items: center;\n }\n\n .about-image {\n position: relative;\n }\n \n .about-image::after {\n content: '';\n position: absolute;\n top: -20px; left: -20px;\n width: 100%; height: 100%;\n border: 2px solid transparent;\n border-image: var(--main-gradient);\n border-image-slice: 1;\n border-radius: 15px;\n z-index: 0;\n }\n\n .about-image img {\n width: 100%;\n border-radius: 15px;\n box-shadow: 0 25px 50px rgba(0,0,0,0.4);\n position: relative;\n z-index: 1;\n filter: brightness(0.9) contrast(1.1);\n }\n\n .about-text h2 {\n font-size: 2.5rem;\n color: var(--text-white);\n margin-bottom: 25px;\n }\n\n .feature-list li {\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 15px;\n font-weight: 500;\n color: var(--text-gray);\n }\n\n .feature-list i {\n color: #8b5cf6;\n background: rgba(139, 92, 246, 0.15);\n padding: 10px;\n border-radius: 10px;\n border: 1px solid rgba(139, 92, 246, 0.3);\n }\n\n \/* --- 3D SECTION (INTEGRADA) --- *\/\n #marcas {\n background-color: #000; \/* Fondo negro profundo para el 3D *\/\n padding: 0;\n position: relative;\n border-top: 1px solid var(--glass-border);\n border-bottom: 1px solid var(--glass-border);\n \/* Altura espec\u00edfica para la escena 3D *\/\n height: 85vh; \n width: 100%;\n overflow: hidden;\n }\n\n #three-container {\n width: 100%;\n height: 100%;\n position: relative;\n background: #050b1a; \/* Color de fondo de la escena *\/\n }\n\n \/* UI Elementos del 3D (Scoping) *\/\n #three-container .title-panel {\n position: absolute;\n top: 30px;\n left: 0;\n right: 0;\n text-align: center;\n z-index: 100;\n pointer-events: none;\n }\n \n #three-container .title-panel h1 {\n background: linear-gradient(135deg, #ffffff, #0abde3);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n font-size: 2rem;\n margin: 0;\n text-shadow: 0 0 20px rgba(0,0,0,0.5);\n letter-spacing: 2px;\n }\n \n #three-container .title-panel p {\n color: #94a3b8;\n margin: 5px 0 0;\n font-size: 1rem;\n }\n \n #three-container .instructions {\n position: absolute;\n bottom: 30px;\n left: 30px;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(8px);\n padding: 10px 20px;\n border-radius: 30px;\n color: #cbd5e1;\n font-size: 14px;\n z-index: 100;\n pointer-events: none;\n font-family: monospace;\n border-left: 3px solid #0abde3;\n }\n \n #three-container .hover-tooltip {\n position: absolute;\n bottom: 150px;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(10, 20, 35, 0.95);\n backdrop-filter: blur(16px);\n border-radius: 50px;\n padding: 12px 28px;\n border: 1px solid #0abde3;\n color: white;\n text-align: center;\n z-index: 200;\n pointer-events: none;\n transition: all 0.2s ease;\n font-size: 16px;\n white-space: nowrap;\n box-shadow: 0 0 30px rgba(10, 189, 227, 0.3);\n font-weight: 500;\n }\n \n #three-container .hover-tooltip span {\n color: #0abde3;\n }\n \n #three-container .reset-btn {\n position: absolute;\n bottom: 30px;\n right: 30px;\n background: rgba(0,0,0,0.7);\n border: 1px solid #0abde3;\n color: #0abde3;\n padding: 10px 20px;\n border-radius: 30px;\n cursor: pointer;\n z-index: 100;\n font-size: 14px;\n font-weight: 500;\n transition: 0.2s;\n backdrop-filter: blur(4px);\n }\n \n #three-container .reset-btn:hover {\n background: #0abde3;\n color: #0a0e1a;\n }\n\n @media (max-width: 768px) {\n #three-container .title-panel h1 { font-size: 1.2rem; }\n #three-container .hover-tooltip { font-size: 11px; padding: 8px 16px; white-space: normal; width: 90%; text-align: center; bottom: 100px; }\n #three-container .instructions { font-size: 10px; bottom: 10px; left: 10px; }\n }\n\n \/* --- CONTACTO --- *\/\n .contact-section {\n background: linear-gradient(to top, #0f172a, #172554);\n position: relative;\n }\n\n .contact-container {\n display: grid;\n grid-template-columns: 1fr 1.2fr;\n gap: 60px;\n }\n\n .contact-info h3 {\n font-size: 2rem;\n color: var(--text-white);\n margin-bottom: 20px;\n }\n\n .info-item {\n margin-bottom: 35px;\n display: flex;\n align-items: flex-start;\n gap: 20px;\n }\n\n .info-item i {\n color: #60a5fa;\n background: rgba(59, 130, 246, 0.15);\n font-size: 1.4rem;\n margin-top: 5px;\n width: 55px;\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border: 1px solid rgba(59, 130, 246, 0.2);\n }\n\n .info-item h4 {\n color: var(--text-white);\n margin-bottom: 5px;\n font-size: 1.1rem;\n }\n\n .contact-form {\n background: rgba(15, 23, 42, 0.6);\n backdrop-filter: blur(15px);\n padding: 45px;\n border-radius: 24px;\n border: 1px solid var(--glass-border);\n box-shadow: 0 20px 50px rgba(0,0,0,0.2);\n }\n\n .form-group label {\n display: block;\n margin-bottom: 10px;\n font-weight: 500;\n font-size: 0.9rem;\n color: var(--text-gray);\n }\n\n .form-group input, .form-group select, .form-group textarea {\n width: 100%;\n padding: 15px;\n background: rgba(0, 0, 0, 0.3);\n border: 1px solid var(--glass-border);\n border-radius: 10px;\n font-family: inherit;\n color: var(--text-white);\n transition: var(--transition);\n }\n\n .form-group input:focus, .form-group textarea:focus {\n outline: none;\n border-color: #8b5cf6;\n box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);\n background: rgba(0, 0, 0, 0.5);\n }\n \n .form-group select option {\n background-color: var(--primary-bg);\n color: var(--text-white);\n }\n\n \/* --- MAPA --- *\/\n .map-wrapper {\n margin-top: 40px;\n border-radius: 20px;\n overflow: hidden;\n border: 1px solid var(--glass-border);\n box-shadow: 0 0 20px rgba(0,0,0,0.3);\n height: 300px;\n }\n\n .map-wrapper iframe {\n width: 100%;\n height: 100%;\n border: 0;\n filter: grayscale(100%) invert(92%) contrast(90%) brightness(0.8);\n }\n\n \/* --- FOOTER --- *\/\n footer {\n background-color: #020617;\n color: var(--text-muted);\n padding: 80px 0 30px;\n border-top: 1px solid var(--glass-border);\n background-image: radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.05), transparent 30%);\n }\n\n .footer-grid {\n display: grid;\n grid-template-columns: 1.5fr 1fr 1fr 1fr;\n gap: 40px;\n margin-bottom: 60px;\n }\n\n .footer-brand img {\n max-width: 200px;\n margin-bottom: 20px;\n opacity: 0.9;\n }\n\n .footer-brand h2 {\n color: var(--text-white);\n margin-bottom: 10px;\n }\n \n .slogan-footer {\n font-style: italic;\n color: var(--accent-glow);\n margin-bottom: 15px;\n display: block;\n }\n\n .footer-col h4 {\n color: var(--text-white);\n margin-bottom: 25px;\n font-weight: 600;\n font-size: 1.1rem;\n }\n\n .footer-links li { margin-bottom: 12px; }\n .footer-links a { transition: 0.3s; color: var(--text-muted); }\n .footer-links a:hover { color: #60a5fa; padding-left: 5px; }\n\n .social-icons {\n display: flex;\n gap: 15px;\n margin-top: 20px;\n }\n\n .social-icons a {\n width: 42px; height: 42px;\n background: rgba(255,255,255,0.05);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n transition: var(--transition);\n color: var(--text-white);\n border: 1px solid transparent;\n }\n\n .social-icons a:hover {\n background: var(--main-gradient);\n transform: translateY(-3px);\n box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);\n }\n\n .footer-bottom {\n text-align: center;\n padding-top: 30px;\n border-top: 1px solid var(--glass-border);\n font-size: 0.85rem;\n color: var(--text-muted);\n }\n\n \/* --- RESPONSIVE --- *\/\n @media (max-width: 991px) {\n .hero-content h1 { font-size: 2.8rem; }\n .about-grid, .contact-container, .footer-grid { grid-template-columns: 1fr; }\n .about-image { order: -1; margin-bottom: 30px; }\n .footer-grid { text-align: center; }\n .social-icons { justify-content: center; }\n #marcas { height: 60vh; }\n }\n\n @media (max-width: 768px) {\n .nav-links {\n position: fixed;\n top: 0; right: -100%;\n width: 75%; height: 100vh;\n background: #0f172a;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n box-shadow: -10px 0 30px rgba(0,0,0,0.5);\n transition: 0.4s ease-in-out;\n border-left: 1px solid var(--glass-border);\n }\n .nav-links.active { right: 0; }\n .mobile-toggle { display: block; z-index: 1001; }\n .hero { padding-top: 100px; }\n .section-title h2 { font-size: 2rem; }\n }\n <\/style>\n \n \n <script type=\"importmap\">\n {\n \"imports\": {\n \"three\": \"https:\/\/unpkg.com\/three@0.128.0\/build\/three.module.js\",\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.128.0\/examples\/jsm\/\"\n }\n }\n <\/script>\n<\/head>\n<body>\n\n \n <header>\n <div class=\"container\">\n <nav>\n <a href=\"#\" class=\"logo-container\">\n <img decoding=\"async\" src=\"https:\/\/z-cdn-media.chatglm.cn\/files\/2c42de3b-618f-406d-af52-fa6e9fc4ee8a.jpeg?auth_key=1877944244-7467c27a68404e22adbb443cbffef21e-0-4a15d576640b51874548295d5bba8242\" alt=\"Estructurix Logo\" class=\"logo-img\">\n <div class=\"logo-text\">\n ESTRUCTURIX\n <span>CONEXI\u00d3N SIN ENREDOs<\/span>\n <\/div>\n <\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#inicio\">Inicio<\/a><\/li>\n <li><a href=\"#servicios\">Servicios<\/a><\/li>\n <li><a href=\"#nosotros\">Nosotros<\/a><\/li>\n <li><a href=\"#marcas\">Mundo 3D<\/a><\/li>\n <li><a href=\"#contacto\">Contacto<\/a><\/li>\n <li><a href=\"#contacto\" class=\"btn btn-primary\" style=\"padding: 10px 25px; font-size: 0.9rem;\">Cotizar<\/a><\/li>\n <\/ul>\n <div class=\"mobile-toggle\" id=\"mobileMenu\">\n <i class=\"fa-solid fa-bars\"><\/i>\n <\/div>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <section id=\"inicio\" class=\"hero\">\n <div class=\"container\">\n <div class=\"hero-content\">\n <img decoding=\"async\" src=\"https:\/\/z-cdn-media.chatglm.cn\/files\/2c42de3b-618f-406d-af52-fa6e9fc4ee8a.jpeg?auth_key=1877944244-7467c27a68404e22adbb443cbffef21e-0-4a15d576640b51874548295d5bba8242\" alt=\"Brand\" class=\"hero-logo-watermark\">\n \n <h1>Infraestructura <br> <span>S\u00f3lida y Segura<\/span><\/h1>\n <p class=\"tagline-hero\">Nuestra red, tu conexi\u00f3n sin enredos.<\/p>\n <p style=\"margin-bottom: 40px; font-size: 1.1rem; color: #cbd5e1; max-width: 700px; margin-left: auto; margin-right: auto;\">\n Especialistas en redes, datacenters, videovigilancia y mantenimiento preventivo de equipos de c\u00f3mputo e impresi\u00f3n en Mira, Carchi.\n <\/p>\n <div style=\"display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;\">\n <a href=\"#servicios\" class=\"btn btn-primary\">Nuestros Servicios<\/a>\n <a href=\"#marcas\" class=\"btn btn-outline\">Explorar Marcas 3D<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"servicios\" class=\"section-padding\">\n <div class=\"container\">\n <div class=\"section-title\">\n <h2>Nuestras Soluciones<\/h2>\n <p>Tecnolog\u00eda de punta para la operatividad de tu empresa.<\/p>\n <\/div>\n\n <div class=\"services-grid\">\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-network-wired\"><\/i><\/div>\n <h3>Redes Estructuradas<\/h3>\n <p>Dise\u00f1o e implementaci\u00f3n de cableado certificado. Conectividad de alta velocidad.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-server\"><\/i><\/div>\n <h3>Datacenter<\/h3>\n <p>Infraestructura cr\u00edtica: Racks, sistemas de enfriamiento, UPS y gesti\u00f3n de servidores.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-video\"><\/i><\/div>\n <h3>Vigilancia CCTV<\/h3>\n <p>Sistemas de seguridad IP 4K, monitoreo remoto y control de accesos.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n\n <article class=\"service-card\">\n <div class=\"icon-box\"><i class=\"fa-solid fa-laptop-medical\"><\/i><\/div>\n <h3>Mantenimiento<\/h3>\n <p>Mantenimiento especializado para PCs, Laptops e Impresoras. Optimizaci\u00f3n y limpieza.<\/p>\n <a href=\"#contacto\" class=\"service-link\">Solicitar Info <i class=\"fa-solid fa-arrow-right\"><\/i><\/a>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"nosotros\" class=\"section-padding\">\n <div class=\"container\">\n <div class=\"about-grid\">\n <div class=\"about-image\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/techwork\/600\/500\" alt=\"T\u00e9cnico Estructurix\">\n <\/div>\n <div class=\"about-text\">\n <h2>Expertos en Conectividad<\/h2>\n <p style=\"margin-bottom: 25px; color: var(--text-gray);\">\n En Estructurix entendemos que la tecnolog\u00eda es el motor de tu negocio. Nos dedicamos a garantizar que tu infraestructura funcione sin interrupciones, ofreciendo calidad y compromiso en cada instalaci\u00f3n.\n <\/p>\n <ul class=\"feature-list\">\n <li><i class=\"fa-solid fa-shield-halved\"><\/i> Garant\u00eda en todos nuestros trabajos<\/li>\n <li><i class=\"fa-solid fa-clock\"><\/i> Soporte t\u00e9cnico \u00e1gil y local<\/li>\n <li><i class=\"fa-solid fa-microchip\"><\/i> Equipos de \u00faltima generaci\u00f3n<\/li>\n <li><i class=\"fa-solid fa-users-gear\"><\/i> Personal capacitado y certificado<\/li>\n <\/ul>\n <br>\n <a href=\"#contacto\" class=\"btn btn-primary\">Cont\u00e1ctanos Ahora<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"marcas\">\n <div id=\"three-container\">\n <div class=\"title-panel\">\n <h1>\ud83c\udf10 ESTRUCTURIX | Universo Tecnol\u00f3gico<\/h1>\n <p>Explora las marcas l\u00edderes en Redes \u00b7 Seguridad \u00b7 Telefon\u00eda IP \u00b7 Datacenter \u00b7 CCTV<\/p>\n <\/div>\n <div class=\"instructions\">\n \ud83d\uddb1\ufe0f Arrastra para rotar | Pasa el mouse sobre cada marca \u2192 se ampl\u00eda y muestra informaci\u00f3n\n <\/div>\n <div class=\"hover-tooltip\" id=\"hoverTooltip\">\n \ud83e\udded Pasa el mouse sobre cualquier marca\n <\/div>\n <button class=\"reset-btn\" id=\"resetViewBtn\">\u27f3 Resetear vista<\/button>\n \n <\/div>\n <\/section>\n\n \n <section id=\"contacto\" class=\"section-padding contact-section\">\n <div class=\"container\">\n <div class=\"contact-container\">\n <div class=\"contact-info\">\n <h3>Hablemos de tu Proyecto<\/h3>\n <p style=\"margin-bottom: 40px; color: var(--text-gray);\">\n Completa el formulario o vis\u00edtanos en nuestras oficinas. Estamos listos para solucionar tus necesidades tecnol\u00f3gicas.\n <\/p>\n \n <div class=\"info-item\">\n <i class=\"fa-solid fa-location-dot\"><\/i>\n <div>\n <h4>Ubicaci\u00f3n<\/h4>\n <p>San Antonio de Mira, Carchi<\/p>\n <\/div>\n <\/div>\n <div class=\"info-item\">\n <i class=\"fa-solid fa-envelope\"><\/i>\n <div>\n <h4>Email<\/h4>\n <p><a href=\"mailto:info@estructurix.com\">info@estructurix.com<\/a><\/p>\n <\/div>\n <\/div>\n <div class=\"info-item\">\n <i class=\"fa-solid fa-phone\"><\/i>\n <div>\n <h4>Tel\u00e9fono<\/h4>\n <p>+593 99 123 4567<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div>\n <div class=\"contact-form\">\n <form id=\"contactForm\">\n <div class=\"form-group\">\n <label for=\"name\">Nombre Completo<\/label>\n <input type=\"text\" id=\"name\" placeholder=\"Tu nombre\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Correo Electr\u00f3nico<\/label>\n <input type=\"email\" id=\"email\" placeholder=\"tucorreo@empresa.com\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"service\">Servicio de Inter\u00e9s<\/label>\n <select id=\"service\">\n <option value=\"redes\">Redes \/ Cableado<\/option>\n <option value=\"datacenter\">Datacenter<\/option>\n <option value=\"cctv\">C\u00e1maras \/ CCTV<\/option>\n <option value=\"mantenimiento\">Mantenimiento PC\/Impresoras<\/option>\n <option value=\"otro\">Otro<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label for=\"message\">Mensaje<\/label>\n <textarea id=\"message\" rows=\"4\" placeholder=\"Cu\u00e9ntanos sobre tus necesidades...\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\" style=\"width: 100%;\">Enviar Mensaje<\/button>\n <\/form>\n <\/div>\n \n <div class=\"map-wrapper\">\n <iframe \n src=\"https:\/\/maps.google.com\/maps?q=San+Antonio+de+Mira,+Carchi,+Ecuador&t=&z=13&ie=UTF8&iwloc=&output=embed\" \n allowfullscreen=\"\" \n loading=\"lazy\">\n <\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer>\n <div class=\"container\">\n <div class=\"footer-grid\">\n <div class=\"footer-brand\">\n <img decoding=\"async\" src=\"https:\/\/z-cdn-media.chatglm.cn\/files\/2c42de3b-618f-406d-af52-fa6e9fc4ee8a.jpeg?auth_key=1877944244-7467c27a68404e22adbb443cbffef21e-0-4a15d576640b51874548295d5bba8242\" alt=\"Estructurix Logo\">\n <span class=\"slogan-footer\">\u00abNuestra red, tu conexi\u00f3n sin enredos.\u00bb<\/span>\n <p style=\"font-size: 0.9rem; margin-bottom: 20px;\">\n Soluciones integrales de TI en Mira, Carchi. Seguridad y tecnolog\u00eda al servicio de tu crecimiento.\n <\/p>\n <div class=\"social-icons\">\n <a href=\"#\"><i class=\"fa-brands fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\n <\/div>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Servicios<\/h4>\n <ul class=\"footer-links\">\n <li><a href=\"#servicios\">Redes Estructuradas<\/a><\/li>\n <li><a href=\"#servicios\">Datacenter<\/a><\/li>\n <li><a href=\"#servicios\">C\u00e1maras de Seguridad<\/a><\/li>\n <li><a href=\"#servicios\">Mantenimiento Preventivo<\/a><\/li>\n <\/ul>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Enlaces<\/h4>\n <ul class=\"footer-links\">\n <li><a href=\"#nosotros\">Sobre Nosotros<\/a><\/li>\n <li><a href=\"https:\/\/estructurix.com\/?page_id=11\" target=\"_blank\">Nuestras Marcas<\/a><\/li>\n <li><a href=\"#contacto\">Soporte T\u00e9cnico<\/a><\/li>\n <li><a href=\"#\">T\u00e9rminos y Condiciones<\/a><\/li>\n <\/ul>\n <\/div>\n \n <div class=\"footer-col\">\n <h4>Cont\u00e1ctanos<\/h4>\n <ul class=\"footer-links\">\n <li><i class=\"fa-solid fa-location-dot\" style=\"margin-right:8px; color:#60a5fa\"><\/i> San Antonio de Mira, Carchi<\/li>\n <li><i class=\"fa-solid fa-phone\" style=\"margin-right:8px; color:#60a5fa\"><\/i> +593 99 123 4567<\/li>\n <li><i class=\"fa-solid fa-envelope\" style=\"margin-right:8px; color:#60a5fa\"><\/i> info@estructurix.com<\/li>\n <\/ul>\n <\/div>\n <\/div>\n \n <div class=\"footer-bottom\">\n <p>© 2023 Estructurix. Todos los derechos reservados.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n \n <script>\n \/\/ Funcionalidad del Men\u00fa M\u00f3vil\n const mobileToggle = document.getElementById('mobileMenu');\n const navLinks = document.getElementById('navLinks');\n\n mobileToggle.addEventListener('click', () => {\n navLinks.classList.toggle('active');\n const icon = mobileToggle.querySelector('i');\n if (navLinks.classList.contains('active')) {\n icon.classList.remove('fa-bars');\n icon.classList.add('fa-xmark');\n } else {\n icon.classList.remove('fa-xmark');\n icon.classList.add('fa-bars');\n }\n });\n\n document.querySelectorAll('.nav-links a').forEach(link => {\n link.addEventListener('click', () => {\n if (navLinks.classList.contains('active')) {\n navLinks.classList.remove('active');\n const icon = mobileToggle.querySelector('i');\n icon.classList.remove('fa-xmark');\n icon.classList.add('fa-bars');\n }\n });\n });\n\n const form = document.getElementById('contactForm');\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n const btn = form.querySelector('button');\n const originalText = btn.innerText;\n \n btn.innerText = 'Enviando...';\n btn.style.opacity = '0.8';\n\n setTimeout(() => {\n alert('Gracias por contactar a Estructurix. Te responderemos a info@estructurix.com pronto.');\n form.reset();\n btn.innerText = originalText;\n btn.style.opacity = '1';\n }, 1500);\n });\n <\/script>\n\n \n <script type=\"module\">\n import * as THREE from 'three';\n import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\n import { CSS2DRenderer, CSS2DObject } from 'three\/addons\/renderers\/CSS2DRenderer.js';\n\n \/\/ --- CONFIGURACI\u00d3N DEL CONTENEDOR ---\n const container = document.getElementById('three-container');\n \n \/\/ --- Inicializaci\u00f3n de escena ---\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x050b1a); \/\/ Fondo del universo\n scene.fog = new THREE.FogExp2(0x050b1a, 0.008);\n\n const camera = new THREE.PerspectiveCamera(45, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n camera.position.set(0, 1.5, 9);\n camera.lookAt(0, 0, 0);\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.shadowMap.enabled = true;\n renderer.setPixelRatio(window.devicePixelRatio);\n container.appendChild(renderer.domElement);\n\n \/\/ CSS2DRenderer para etiquetas\n const labelRenderer = new CSS2DRenderer();\n labelRenderer.setSize(container.clientWidth, container.clientHeight);\n labelRenderer.domElement.style.position = 'absolute';\n labelRenderer.domElement.style.top = '0px';\n labelRenderer.domElement.style.left = '0px';\n labelRenderer.domElement.style.pointerEvents = 'none';\n container.appendChild(labelRenderer.domElement);\n\n \/\/ Controles\n const controls = new OrbitControls(camera, container); \/\/ Adjuntar al contenedor\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.autoRotate = true;\n controls.autoRotateSpeed = 1.5;\n controls.enableZoom = true;\n controls.enablePan = false;\n controls.zoomSpeed = 1.0;\n controls.target.set(0, 0, 0);\n \n \/\/ Bot\u00f3n reset\n document.getElementById('resetViewBtn').addEventListener('click', () => {\n camera.position.set(0, 1.5, 9);\n controls.target.set(0, 0, 0);\n controls.update();\n });\n\n \/\/ --- Luces ---\n const ambientLight = new THREE.AmbientLight(0x2c3e66);\n scene.add(ambientLight);\n \n const mainLight = new THREE.DirectionalLight(0xffffff, 1.2);\n mainLight.position.set(5, 8, 5);\n mainLight.castShadow = true;\n scene.add(mainLight);\n \n const fillLight = new THREE.PointLight(0x4466cc, 0.5);\n fillLight.position.set(-3, 2, 4);\n scene.add(fillLight);\n \n const backLight = new THREE.PointLight(0xffaa66, 0.4);\n backLight.position.set(0, 1, -5);\n scene.add(backLight);\n \n const rimLight = new THREE.PointLight(0x0abde3, 0.6);\n rimLight.position.set(2, 3, -3);\n scene.add(rimLight);\n \n \/\/ --- Part\u00edculas de fondo ---\n const starCount = 1800;\n const starGeo = new THREE.BufferGeometry();\n const starPos = new Float32Array(starCount * 3);\n for (let i = 0; i < starCount; i++) {\n starPos[i*3] = (Math.random() - 0.5) * 800;\n starPos[i*3+1] = (Math.random() - 0.5) * 500;\n starPos[i*3+2] = (Math.random() - 0.5) * 300 - 100;\n }\n starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));\n const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.2, transparent: true, opacity: 0.7 });\n const stars = new THREE.Points(starGeo, starMat);\n scene.add(stars);\n \n \/\/ --- Esfera y Anillos decorativos ---\n const glowSphere = new THREE.Mesh(\n new THREE.SphereGeometry(3.0, 32, 32),\n new THREE.MeshBasicMaterial({ color: 0x0abde3, wireframe: true, transparent: true, opacity: 0.12 })\n );\n scene.add(glowSphere);\n \n const ringGeo = new THREE.TorusGeometry(3.4, 0.04, 128, 400);\n const ringMat = new THREE.MeshStandardMaterial({ color: 0x0abde3, emissive: 0x0a2350, emissiveIntensity: 0.3 });\n const ring1 = new THREE.Mesh(ringGeo, ringMat);\n ring1.rotation.x = Math.PI \/ 2;\n scene.add(ring1);\n \n const ring2 = new THREE.Mesh(ringGeo, ringMat);\n ring2.rotation.z = Math.PI \/ 3;\n ring2.rotation.x = Math.PI \/ 3;\n scene.add(ring2);\n \n const ring3 = new THREE.Mesh(ringGeo, ringMat);\n ring3.rotation.y = Math.PI \/ 4;\n ring3.rotation.x = Math.PI \/ 5;\n scene.add(ring3);\n \n \/\/ --- MARCAS ---\n const brandsData = [\n { name: \"Fortinet\", category: \"Firewall NGFW\", icon: \"\ud83d\udee1\ufe0f\", desc: \"FortiGate \u00b7 SD-WAN \u00b7 Seguridad IA\", color: \"#E25822\" },\n { name: \"Palo Alto\", category: \"Seguridad Perimetral\", icon: \"\ud83d\udd25\", desc: \"ML \u00b7 Prisma SASE \u00b7 Zero Trust\", color: \"#F4C542\" },\n { name: \"Check Point\", category: \"Ciberseguridad\", icon: \"\ud83d\udd12\", desc: \"Quantum \u00b7 Infinity \u00b7 Ransomware Protection\", color: \"#CE181E\" },\n { name: \"Juniper\", category: \"Redes & Seguridad\", icon: \"\ud83c\udf32\", desc: \"SRX \u00b7 Mist AI \u00b7 Switching EX\", color: \"#85C1E9\" },\n { name: \"Trend Micro\", category: \"XDR \u00b7 Antivirus\", icon: \"\ud83d\udc1e\", desc: \"Deep Discovery \u00b7 Cloud Security\", color: \"#0099CC\" },\n { name: \"Hillstone\", category: \"Firewall\", icon: \"\u26f0\ufe0f\", desc: \"Alto rendimiento \u00b7 Protecci\u00f3n DDoS\", color: \"#6699CC\" },\n { name: \"Sophos\", category: \"Seguridad\", icon: \"\ud83d\udee1\ufe0f\", desc: \"XG Firewall \u00b7 MDR \u00b7 Synchronized\", color: \"#2C5E9C\" },\n { name: \"WatchGuard\", category: \"Firewall SMB\", icon: \"\ud83d\udee1\ufe0f\", desc: \"Firebox \u00b7 AuthPoint \u00b7 Zero-touch\", color: \"#D93F21\" },\n { name: \"MikroTik\", category: \"Routing & Wireless\", icon: \"\ud83d\udce1\", desc: \"RouterOS \u00b7 CAPsMAN \u00b7 Switches\", color: \"#DEB887\" },\n { name: \"Ruckus\", category: \"WiFi Enterprise\", icon: \"\ud83d\udcf6\", desc: \"BeamFlex+ \u00b7 Alta Densidad \u00b7 Cloud\", color: \"#2A9D8F\" },\n { name: \"Aruba\", category: \"Redes Inteligentes\", icon: \"\ud83c\udf0a\", desc: \"ESP \u00b7 WiFi 6E \u00b7 Aruba Central\", color: \"#1D7A46\" },\n { name: \"Cisco\", category: \"Infraestructura\", icon: \"\ud83d\udd37\", desc: \"Catalyst \u00b7 Meraki \u00b7 DNA Center\", color: \"#1BA0D7\" },\n { name: \"Zyxel\", category: \"Redes & Seguridad\", icon: \"\ud83d\udd32\", desc: \"Nebula Cloud \u00b7 USG FLEX\", color: \"#722F37\" },\n { name: \"Alcatel-Lucent\", category: \"Switching\", icon: \"\ud83c\udfe2\", desc: \"OmniSwitch \u00b7 Stellar WiFi\", color: \"#3771C8\" },\n { name: \"Ubiquiti\", category: \"SDN & WiFi\", icon: \"\ud83d\udce1\", desc: \"UniFi \u00b7 Dream Machine \u00b7 EdgeMAX\", color: \"#055C9D\" },\n { name: \"TP-Link Omada\", category: \"Redes SDN\", icon: \"\ud83c\udf10\", desc: \"Omada Cloud \u00b7 Switches SFP+\", color: \"#4CAF50\" },\n { name: \"Grandstream\", category: \"Telefon\u00eda IP\", icon: \"\ud83d\udcde\", desc: \"UCM \u00b7 Tel\u00e9fonos IP \u00b7 Wave\", color: \"#0B5E7E\" },\n { name: \"Yealink\", category: \"Unified Comms\", icon: \"\ud83c\udfa7\", desc: \"Tel\u00e9fonos IP \u00b7 Conferencias \u00b7 Teams\", color: \"#5D3A1A\" },\n { name: \"Poly (HP)\", category: \"Audio\/Video\", icon: \"\ud83c\udf99\ufe0f\", desc: \"Studio Series \u00b7 Auriculares\", color: \"#222222\" },\n { name: \"3CX\", category: \"PABX Software\", icon: \"\u2601\ufe0f\", desc: \"WebRTC \u00b7 M\u00f3vil \u00b7 Integraci\u00f3n CRM\", color: \"#2688C3\" },\n { name: \"Dell EMC\", category: \"Servidores & Storage\", icon: \"\ud83d\udcbe\", desc: \"PowerEdge \u00b7 PowerStore \u00b7 VxRail\", color: \"#007DB8\" },\n { name: \"HPE\", category: \"Datacenter\", icon: \"\ud83d\udda5\ufe0f\", desc: \"ProLiant \u00b7 Alletra \u00b7 GreenLake\", color: \"#0096D6\" },\n { name: \"VMware\", category: \"Virtualizaci\u00f3n\", icon: \"\ud83e\udde9\", desc: \"vSphere \u00b7 vSAN \u00b7 NSX\", color: \"#5C9E7B\" },\n { name: \"Lenovo\", category: \"Servidores\", icon: \"\u2699\ufe0f\", desc: \"ThinkSystem \u00b7 Refrigeraci\u00f3n L\u00edquida\", color: \"#E2231A\" },\n { name: \"Synology\", category: \"NAS Storage\", icon: \"\ud83d\udcc1\", desc: \"Backup \u00b7 Vigilancia \u00b7 Virtual DSM\", color: \"#4B4B4B\" },\n { name: \"QNAP\", category: \"Storage\", icon: \"\ud83d\udcbd\", desc: \"QuTS hero \u00b7 JBOD \u00b7 Virtualizaci\u00f3n\", color: \"#2F4858\" },\n { name: \"Hikvision\", category: \"Videovigilancia\", icon: \"\ud83c\udfa5\", desc: \"ColorVu \u00b7 AcuSense \u00b7 Deep Learning\", color: \"#1E3A5F\" },\n { name: \"Dahua\", category: \"CCTV\", icon: \"\ud83d\udc41\ufe0f\", desc: \"WizMind \u00b7 4K \u00b7 NVR Inteligente\", color: \"#2C5F8A\" },\n { name: \"AXIS\", category: \"C\u00e1maras IP\", icon: \"\ud83c\udfac\", desc: \"Ciberseguridad \u00b7 Anal\u00edtica Avanzada\", color: \"#114B5F\" }\n ];\n \n const radiusSphere = 3.6;\n const totalBrands = brandsData.length;\n const brandsGroup = new THREE.Group();\n scene.add(brandsGroup);\n const brandObjects = [];\n \n \/\/ Distribuci\u00f3n en esfera (Fibonacci sphere)\n const phiGolden = Math.PI * (3 - Math.sqrt(5));\n \n brandsData.forEach((brand, idx) => {\n const y = 1 - (idx \/ (totalBrands - 1)) * 2;\n const radiusAtY = Math.sqrt(1 - y*y);\n const theta = idx * phiGolden * 2 * Math.PI;\n \n const x = Math.cos(theta) * radiusAtY;\n const z = Math.sin(theta) * radiusAtY;\n \n const px = x * radiusSphere;\n const py = y * radiusSphere;\n const pz = z * radiusSphere;\n \n const group = new THREE.Group();\n group.position.set(px, py, pz);\n group.lookAt(0, 0, 0);\n group.rotateY(Math.PI);\n \n \/\/ Tarjeta 3D Base\n const baseGeo = new THREE.CylinderGeometry(0.58, 0.58, 0.1, 32);\n const materialBase = new THREE.MeshStandardMaterial({ \n color: brand.color, \n metalness: 0.7, \n roughness: 0.3,\n emissive: 0x111122,\n emissiveIntensity: 0.2\n });\n const basePlate = new THREE.Mesh(baseGeo, materialBase);\n basePlate.castShadow = true;\n group.add(basePlate);\n \n \/\/ Anillo\n const edgeRingGeo = new THREE.TorusGeometry(0.62, 0.035, 32, 64);\n const edgeMat = new THREE.MeshStandardMaterial({ color: 0x0abde3, emissive: 0x0abde3, emissiveIntensity: 0.5 });\n const edgeRing = new THREE.Mesh(edgeRingGeo, edgeMat);\n group.add(edgeRing);\n \n \/\/ Esfera central\n const centerSphere = new THREE.Mesh(\n new THREE.SphereGeometry(0.16, 16, 16),\n new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: brand.color, emissiveIntensity: 0.4 })\n );\n centerSphere.position.set(0, 0, 0.12);\n group.add(centerSphere);\n \n \/\/ Etiqueta CSS\n const labelDiv = document.createElement('div');\n labelDiv.textContent = `${brand.icon} ${brand.name}`;\n labelDiv.style.backgroundColor = 'rgba(0,0,0,0.75)';\n labelDiv.style.color = 'white';\n labelDiv.style.fontSize = '13px';\n labelDiv.style.fontWeight = 'bold';\n labelDiv.style.padding = '4px 12px';\n labelDiv.style.borderRadius = '40px';\n labelDiv.style.border = `1px solid ${brand.color}`;\n labelDiv.style.fontFamily = 'system-ui, sans-serif';\n labelDiv.style.whiteSpace = 'nowrap';\n labelDiv.style.backdropFilter = 'blur(4px)';\n labelDiv.style.pointerEvents = 'none';\n const labelObj = new CSS2DObject(labelDiv);\n labelObj.position.set(0, 0.75, 0);\n group.add(labelObj);\n \n group.userData = { brand: brand, originalScale: 1, isHovered: false };\n brandsGroup.add(group);\n brandObjects.push(group);\n });\n \n \/\/ Part\u00edculas orbitales\n const particleOrbitCount = 1200;\n const particleOrbitGeo = new THREE.BufferGeometry();\n const orbitPositions = new Float32Array(particleOrbitCount * 3);\n for (let i = 0; i < particleOrbitCount; i++) {\n const theta2 = Math.random() * Math.PI * 2;\n const phi2 = Math.acos(2 * Math.random() - 1);\n const r = radiusSphere + 0.12;\n const x2 = r * Math.sin(phi2) * Math.cos(theta2);\n const y2 = r * Math.sin(phi2) * Math.sin(theta2);\n const z2 = r * Math.cos(phi2);\n orbitPositions[i*3] = x2;\n orbitPositions[i*3+1] = y2;\n orbitPositions[i*3+2] = z2;\n }\n particleOrbitGeo.setAttribute('position', new THREE.BufferAttribute(orbitPositions, 3));\n const particleMatOrbit = new THREE.PointsMaterial({ color: 0x0abde3, size: 0.045, transparent: true, opacity: 0.5 });\n const orbitParticles = new THREE.Points(particleOrbitGeo, particleMatOrbit);\n scene.add(orbitParticles);\n \n \/\/ --- RAYCASTER Y INTERACCI\u00d3N ---\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n const tooltipEl = document.getElementById('hoverTooltip');\n \n let currentlyHovered = null;\n \n \/\/ Normalizar mouse relativo al contenedor\n container.addEventListener('mousemove', (event) => {\n const rect = container.getBoundingClientRect();\n mouse.x = ((event.clientX - rect.left) \/ rect.width) * 2 - 1;\n mouse.y = -((event.clientY - rect.top) \/ rect.height) * 2 + 1;\n \n raycaster.setFromCamera(mouse, camera);\n const intersects = raycaster.intersectObjects(brandObjects, true);\n \n if (intersects.length > 0) {\n let hitObj = intersects[0].object;\n while (hitObj && !brandObjects.includes(hitObj)) {\n hitObj = hitObj.parent;\n }\n if (hitObj && brandObjects.includes(hitObj)) {\n if (currentlyHovered !== hitObj) {\n if (currentlyHovered) {\n resetBrandScale(currentlyHovered);\n }\n currentlyHovered = hitObj;\n applyHoverEffect(currentlyHovered);\n \n const brandInfo = hitObj.userData.brand;\n tooltipEl.style.opacity = '1';\n tooltipEl.innerHTML = `\n \u2728 <span>${brandInfo.icon} ${brandInfo.name}<\/span> \u2728<br>\n ${brandInfo.category}<br>\n \ud83d\udccc ${brandInfo.desc}<br>\n <small style=\"color:#aaa;\">\u2705 Haz clic para \"aplicar esta marca\"<\/small>\n `;\n tooltipEl.style.whiteSpace = 'normal';\n tooltipEl.style.textAlign = 'center';\n tooltipEl.style.maxWidth = '280px';\n }\n } else {\n if (currentlyHovered) {\n resetBrandScale(currentlyHovered);\n currentlyHovered = null;\n tooltipEl.style.opacity = '0';\n }\n }\n } else {\n if (currentlyHovered) {\n resetBrandScale(currentlyHovered);\n currentlyHovered = null;\n tooltipEl.style.opacity = '0';\n }\n }\n });\n \n function resetBrandScale(obj) {\n if (!obj) return;\n obj.scale.set(1, 1, 1);\n const baseMesh = obj.children.find(c => c.geometry && c.geometry.type === 'CylinderGeometry');\n if (baseMesh && baseMesh.material) {\n baseMesh.material.emissiveIntensity = 0.2;\n baseMesh.material.color.setHex(parseInt(obj.userData.brand.color.replace('#', '0x')));\n }\n const ringMesh = obj.children.find(c => c.geometry && c.geometry.type === 'TorusGeometry');\n if (ringMesh && ringMesh.material) {\n ringMesh.material.emissiveIntensity = 0.5;\n }\n }\n \n function applyHoverEffect(obj) {\n if (!obj) return;\n obj.scale.set(1.28, 1.28, 1.28);\n const baseMesh = obj.children.find(c => c.geometry && c.geometry.type === 'CylinderGeometry');\n if (baseMesh && baseMesh.material) {\n baseMesh.material.emissiveIntensity = 0.7;\n baseMesh.material.color.setHex(0xffaa55);\n }\n const ringMesh = obj.children.find(c => c.geometry && c.geometry.type === 'TorusGeometry');\n if (ringMesh && ringMesh.material) {\n ringMesh.material.emissiveIntensity = 1.2;\n ringMesh.material.color.setHex(0xffffff);\n }\n }\n \n container.addEventListener('click', (event) => {\n if (currentlyHovered) {\n const brand = currentlyHovered.userData.brand;\n tooltipEl.style.backgroundColor = '#0abde3';\n tooltipEl.style.color = '#0a0e1a';\n tooltipEl.innerHTML = `\u2705 \u00a1MARCA APLICADA! \u2705<br>${brand.name} ha sido seleccionada.<br>\ud83d\udcde Un asesor te contactar\u00e1.`;\n setTimeout(() => {\n tooltipEl.style.backgroundColor = 'rgba(10, 20, 35, 0.95)';\n tooltipEl.style.color = 'white';\n setTimeout(() => {\n if (!currentlyHovered) tooltipEl.style.opacity = '0';\n else tooltipEl.style.opacity = '1';\n }, 1500);\n }, 2000);\n \n alert(`\ud83d\udd27 [ESTRUCTURIX] Has aplicado la marca ${brand.name} (${brand.category}).\\n\\nNuestro equipo especializado te ofrecer\u00e1 la mejor integraci\u00f3n y presupuesto.\\nGracias por confiar en nosotros.`);\n }\n });\n \n \/\/ --- ANIMACI\u00d3N ---\n let timeAnim = 0;\n \n function animate() {\n requestAnimationFrame(animate);\n timeAnim += 0.008;\n \n ring1.rotation.z += 0.002;\n ring2.rotation.x += 0.0015;\n ring2.rotation.y += 0.001;\n ring3.rotation.z += 0.001;\n ring3.rotation.x += 0.002;\n \n orbitParticles.rotation.y += 0.001;\n orbitParticles.rotation.x = Math.sin(timeAnim * 0.3) * 0.1;\n \n stars.rotation.y += 0.0003;\n stars.rotation.x += 0.0002;\n \n controls.update();\n \n renderer.render(scene, camera);\n labelRenderer.render(scene, camera);\n }\n \n animate();\n \n \/\/ Resize Listener espec\u00edfico para el contenedor\n window.addEventListener('resize', onWindowResize, false);\n function onWindowResize() {\n \/\/ Re-calcular dimensiones basado en el contenedor\n const width = container.clientWidth;\n const height = container.clientHeight;\n \n camera.aspect = width \/ height;\n camera.updateProjectionMatrix();\n renderer.setSize(width, height);\n labelRenderer.setSize(width, height);\n }\n \n console.log('\u2705 Mundo 3D de marcas Estructurix cargado correctamente');\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Estructurix | Soluciones IT & Infraestructura 3D ESTRUCTURIX CONEXI\u00d3N SIN ENREDOs Inicio Servicios Nosotros Mundo 3D Contacto Cotizar Infraestructura S\u00f3lida y Segura Nuestra red, tu conexi\u00f3n sin enredos. Especialistas en redes, datacenters, videovigilancia y mantenimiento preventivo de equipos de c\u00f3mputo e impresi\u00f3n en Mira, Carchi. Nuestros Servicios Explorar Marcas 3D Nuestras Soluciones Tecnolog\u00eda de punta […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/estructurix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":7,"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":17,"href":"https:\/\/estructurix.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/17"}],"wp:attachment":[{"href":"https:\/\/estructurix.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}