{"id":10,"date":"2025-11-27T13:43:06","date_gmt":"2025-11-27T13:43:06","guid":{"rendered":"https:\/\/tglobalnetworks.com\/?page_id=10"},"modified":"2026-03-03T13:17:53","modified_gmt":"2026-03-03T13:17:53","slug":"home","status":"publish","type":"page","link":"https:\/\/tglobalnetworks.com\/es\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Cloud, Conectividade e Seguran\u00e7a Inteligentes.<\/h1>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Solu\u00e7\u00f5es integradas de Cloud, Edge, Mitiga\u00e7\u00e3o DDoS e Conectividade para garantir alta performance, lat\u00eancia m\u00ednima, seguran\u00e7a m\u00e1xima e crescimento escal\u00e1vel.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t
\n\t\t\t\t\t\r\n FALE COM ESPECIALISTA\r\n <\/i>\r\n<\/a>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\r\n CONHE\u00c7A\r\n <\/i>\r\n<\/a>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Nossas Solu\u00e7\u00f5es<\/h1>\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t\t
<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n TGlobal Networks - Solu\u00e7\u00f5es<\/title>\r\n <style>\r\n \/* ==================== IMPORT DA FONTE OUTFIT ==================== *\/\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Outfit', sans-serif;\r\n background: #FFFFFF;\r\n color: #02172A;\r\n }\r\n\r\n \/* ==================== RESET WORDPRESS BUTTONS ==================== *\/\r\n .solutions-section button,\r\n .solutions-section .solution-card__cta,\r\n .solutions-section .solution-back-btn {\r\n -webkit-appearance: none !important;\r\n appearance: none !important;\r\n background-image: none !important;\r\n outline: none !important;\r\n }\r\n\r\n \/* ==================== SE\u00c7\u00c3O DE SOLU\u00c7\u00d5ES ==================== *\/\r\n .solutions-section {\r\n width: 100%;\r\n min-height: 60vh;\r\n padding: 80px 40px 40px;\r\n background: transparent;\r\n }\r\n\r\n .solutions-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .section-title {\r\n text-align: center;\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n margin-bottom: 60px;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n color: #02172A;\r\n font-family: 'Outfit', sans-serif;\r\n }\r\n\r\n \/* ==================== GRID DE CARDS (DESKTOP) ==================== *\/\r\n .solutions-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 30px;\r\n padding-bottom: 0;\r\n }\r\n\r\n \/* ==================== CARD PRINCIPAL ==================== *\/\r\n .solution-card {\r\n position: relative;\r\n border-radius: 20px;\r\n padding: 32px 24px;\r\n min-height: 400px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 35px;\r\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n cursor: pointer;\r\n }\r\n\r\n \/* Camada 1: Gradiente base (vis\u00edvel quando FECHADO) *\/\r\n .solution-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, #00385F 0%, #001A2C 100%);\r\n z-index: 1;\r\n opacity: 1;\r\n transition: opacity 0.5s ease;\r\n }\r\n\r\n \/* Camada 2: Imagem de fundo (sempre presente) *\/\r\n .solution-card::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n opacity: 0.25;\r\n z-index: 2;\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n }\r\n\r\n \/* Backgrounds espec\u00edficos de cada card *\/\r\n .solution-card[data-solution=\"conectividade\"]::after {\r\n background-image: url('https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/conectividade-bg.png');\r\n }\r\n\r\n .solution-card[data-solution=\"seguranca\"]::after {\r\n background-image: url('https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/security-bg.png');\r\n }\r\n\r\n .solution-card[data-solution=\"cloud\"]::after {\r\n background-image: url('https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/cloud-bg.png');\r\n }\r\n\r\n .solution-card[data-solution=\"edge\"]::after {\r\n background-image: url('https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/edge-bg.png');\r\n }\r\n\r\n \/* Camada 3: Overlay azul escuro (vis\u00edvel quando ABERTO) *\/\r\n .solution-card__overlay {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, #00385F 0%, #001A2C 100%);\r\n opacity: 0;\r\n z-index: 3;\r\n transition: opacity 0.5s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .solution-card > * {\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n \/* HOVER quando FECHADO *\/\r\n .solution-card:not(.solution-card--open):hover {\r\n transform: translateY(-10px) scale(1.02);\r\n box-shadow: 0 20px 60px rgba(70, 181, 255, 0.4);\r\n }\r\n\r\n .solution-card:not(.solution-card--open):hover::after {\r\n opacity: 0.4;\r\n transform: scale(1.05);\r\n }\r\n\r\n \/* ==================== ESTADO ABERTO ==================== *\/\r\n .solution-card--open {\r\n transform: translateY(0);\r\n min-height: auto;\r\n cursor: default;\r\n background: linear-gradient(135deg, #00385F 0%, #001A2C 100%) !important;\r\n justify-content: flex-start;\r\n gap: 0;\r\n }\r\n\r\n .solution-card--open:hover {\r\n transform: translateY(0);\r\n }\r\n\r\n \/* Quando ABERTO: esconde gradiente e imagem, mostra overlay azul escuro *\/\r\n .solution-card--open::before {\r\n opacity: 0 !important;\r\n }\r\n\r\n .solution-card--open::after {\r\n opacity: 0 !important;\r\n }\r\n\r\n .solution-card--open .solution-card__overlay {\r\n opacity: 1 !important;\r\n pointer-events: none;\r\n }\r\n\r\n \/* ==================== CONTE\u00daDO DO CARD ==================== *\/\r\n .solution-card__content {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n \/* Remove espa\u00e7amentos extras quando aberto *\/\r\n .solution-card--open .solution-card__content {\r\n margin-top: 0;\r\n }\r\n\r\n .solution-card__icon {\r\n width: 80px;\r\n height: 80px;\r\n margin-bottom: 30px;\r\n filter: drop-shadow(0 4px 15px rgba(70, 181, 255, 0.6));\r\n transition: all 0.4s ease;\r\n }\r\n\r\n \/* Ajusta espa\u00e7amento do \u00edcone quando card aberto *\/\r\n .solution-card--open .solution-card__icon {\r\n margin-bottom: 25px;\r\n margin-top: 0;\r\n }\r\n\r\n .solution-card:hover .solution-card__icon {\r\n transform: scale(1.1);\r\n filter: drop-shadow(0 6px 20px rgba(70, 181, 255, 0.8));\r\n }\r\n\r\n .solution-card__icon img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n }\r\n\r\n .solution-card__title {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n margin-bottom: 0;\r\n margin-top: 0;\r\n padding-bottom: 0;\r\n border-bottom: none;\r\n width: 100%;\r\n color: #ffffff;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n \/* Adiciona linha divis\u00f3ria APENAS quando aberto *\/\r\n .solution-card--open .solution-card__title {\r\n margin-bottom: 30px;\r\n padding-bottom: 20px;\r\n border-bottom: 2px solid rgba(70, 181, 255, 0.3);\r\n }\r\n\r\n \/* ==================== BOT\u00c3O PRINCIPAL (PADRONIZADO) ==================== *\/\r\n .solution-card__cta {\r\n -webkit-appearance: none !important;\r\n appearance: none !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n padding: 16px 32px;\r\n background: linear-gradient(135deg, #003B66 0%, #002641 100%) !important;\r\n color: #D9E4EC !important;\r\n border: 2px solid rgba(217, 228, 236, 0.15) !important;\r\n border-radius: 12px;\r\n font-size: 0.9rem;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-family: 'Outfit', sans-serif;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 4px 15px rgba(0, 59, 102, 0.3);\r\n min-width: 200px;\r\n }\r\n\r\n \/* Background animado no hover do bot\u00e3o *\/\r\n .solution-card__cta::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(217, 228, 236, 0.2), transparent);\r\n transition: left 0.5s ease;\r\n z-index: 1;\r\n }\r\n\r\n .solution-card__cta:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .solution-card__cta:hover {\r\n background: linear-gradient(135deg, #002641 0%, #001a2c 100%) !important;\r\n color: #ffffff !important;\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 25px rgba(0, 59, 102, 0.5);\r\n border-color: rgba(217, 228, 236, 0.4) !important;\r\n }\r\n\r\n .solution-card__cta svg {\r\n width: 16px;\r\n height: 16px;\r\n transition: transform 0.3s ease;\r\n position: relative;\r\n z-index: 2;\r\n color: inherit;\r\n }\r\n\r\n .solution-card__cta:hover svg {\r\n transform: translateX(5px);\r\n color: #ffffff !important;\r\n }\r\n\r\n \/* Esconde CTA quando aberto *\/\r\n .solution-card--open .solution-card__cta {\r\n display: none;\r\n }\r\n\r\n \/* ==================== LISTA DE SUBSERVI\u00c7OS ==================== *\/\r\n .solution-items {\r\n display: none;\r\n width: 100%;\r\n flex-direction: column;\r\n gap: 12px;\r\n margin-top: 20px;\r\n animation: fadeInUp 0.5s ease forwards;\r\n }\r\n\r\n .solution-card--open .solution-items {\r\n display: flex;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .solution-item {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 18px 20px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(70, 181, 255, 0.25);\r\n border-radius: 12px;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n text-decoration: none;\r\n color: #ffffff;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Background hover nos itens - MELHORADO *\/\r\n .solution-item::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg,\r\n transparent,\r\n rgba(70, 181, 255, 0.15),\r\n rgba(70, 181, 255, 0.25),\r\n rgba(70, 181, 255, 0.15),\r\n transparent\r\n );\r\n transition: left 0.6s ease;\r\n }\r\n\r\n .solution-item:hover::before {\r\n left: 100%;\r\n }\r\n\r\n \/* HOVER MELHORADO - azul claro vibrante *\/\r\n .solution-item:hover {\r\n background: linear-gradient(135deg, rgba(70, 181, 255, 0.2) 0%, rgba(102, 212, 255, 0.15) 100%);\r\n border-color: rgba(70, 181, 255, 0.6);\r\n transform: translateX(8px) scale(1.02);\r\n box-shadow: 0 5px 25px rgba(70, 181, 255, 0.35);\r\n }\r\n\r\n .solution-item__content {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n\r\n .solution-item__icon {\r\n width: 28px;\r\n height: 28px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.4s ease;\r\n filter: drop-shadow(0 2px 4px rgba(70, 181, 255, 0.3));\r\n }\r\n\r\n .solution-item:hover .solution-item__icon {\r\n transform: scale(1.15) rotate(-5deg);\r\n filter: drop-shadow(0 4px 12px rgba(70, 181, 255, 0.6));\r\n }\r\n\r\n .solution-item__icon img,\r\n .solution-item__icon svg {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n }\r\n\r\n .solution-item__name {\r\n font-size: 1rem;\r\n font-weight: 600;\r\n font-family: 'Outfit', sans-serif;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .solution-item:hover .solution-item__name {\r\n color: #66d4ff;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .solution-item__arrow {\r\n width: 20px;\r\n height: 20px;\r\n transition: all 0.4s ease;\r\n filter: drop-shadow(0 2px 4px rgba(70, 181, 255, 0.3));\r\n }\r\n\r\n .solution-item:hover .solution-item__arrow {\r\n transform: translateX(8px) scale(1.1);\r\n filter: drop-shadow(0 4px 8px rgba(70, 181, 255, 0.6));\r\n }\r\n\r\n \/* ==================== BOT\u00c3O RETORNAR (PADRONIZADO) ==================== *\/\r\n .solution-back-btn {\r\n -webkit-appearance: none !important;\r\n appearance: none !important;\r\n display: none;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 20px;\r\n padding: 16px 32px;\r\n background: transparent !important;\r\n border: 2px solid #001A2C !important;\r\n border-radius: 12px;\r\n color: #ffffff !important;\r\n font-size: 0.85rem;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n margin-top: 30px;\r\n font-family: 'Outfit', sans-serif;\r\n letter-spacing: 0.5px;\r\n min-width: 180px;\r\n }\r\n\r\n .solution-card--open .solution-back-btn {\r\n display: flex;\r\n }\r\n\r\n .solution-back-btn:hover {\r\n background: #5E98D2 !important;\r\n color: #ffffff !important;\r\n border-color: #5E98D2 !important;\r\n transform: translateX(-3px);\r\n box-shadow: 0 8px 25px rgba(94, 152, 210, 0.3);\r\n }\r\n\r\n .solution-back-btn svg {\r\n width: 14px;\r\n height: 14px;\r\n transition: transform 0.3s ease;\r\n color: inherit;\r\n }\r\n\r\n .solution-back-btn:hover svg {\r\n transform: translateX(-5px);\r\n color: #ffffff !important;\r\n }\r\n\r\n \/* ==================== RESPONSIVO TABLET ==================== *\/\r\n @media (max-width: 1024px) and (min-width: 769px) {\r\n .solutions-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 25px;\r\n }\r\n\r\n .solution-card {\r\n min-height: 380px;\r\n }\r\n }\r\n\r\n \/* ==================== RESPONSIVO MOBILE (CARROSSEL PREMIUM - SEM DEGRAD\u00ca LATERAL) ==================== *\/\r\n @media (max-width: 768px) {\r\n .solutions-section {\r\n padding: 44px 0 18px;\r\n }\r\n\r\n .section-title {\r\n font-size: 1.8rem;\r\n padding: 0 20px;\r\n margin-bottom: 22px;\r\n letter-spacing: 1.5px;\r\n }\r\n\r\n \/* Wrapper (sem fade\/degrad\u00ea nas laterais) *\/\r\n .solutions-carousel {\r\n position: relative;\r\n }\r\n\r\n \/* Container do carrossel *\/\r\n .solutions-grid {\r\n display: flex;\r\n overflow-x: auto;\r\n overflow-y: visible;\r\n -webkit-overflow-scrolling: touch;\r\n\r\n scroll-snap-type: x mandatory;\r\n scroll-snap-stop: always;\r\n scroll-behavior: smooth;\r\n\r\n gap: 14px;\r\n padding: 10px 18px 12px 18px;\r\n scroll-padding: 0 18px;\r\n\r\n scrollbar-width: none;\r\n overscroll-behavior-x: contain;\r\n touch-action: pan-x;\r\n\r\n align-items: stretch;\r\n }\r\n\r\n .solutions-grid::-webkit-scrollbar { display: none; }\r\n\r\n \/* Cards: peek consistente + destaque do central *\/\r\n .solution-card {\r\n min-width: 84vw;\r\n max-width: 84vw;\r\n scroll-snap-align: center;\r\n flex-shrink: 0;\r\n\r\n padding: 26px 20px;\r\n min-height: 420px;\r\n\r\n opacity: 0.80;\r\n transform: scale(0.975);\r\n filter: saturate(0.97);\r\n transition: transform 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;\r\n }\r\n\r\n .solution-card.solution-card--active {\r\n opacity: 1;\r\n transform: scale(1.02);\r\n filter: saturate(1.05);\r\n box-shadow: 0 18px 65px rgba(70, 181, 255, 0.22);\r\n }\r\n\r\n .solution-card--open {\r\n opacity: 1 !important;\r\n transform: scale(1) !important;\r\n filter: none !important;\r\n min-height: auto;\r\n padding-bottom: 22px;\r\n }\r\n\r\n .solution-card__icon {\r\n width: 64px;\r\n height: 64px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .solution-card__title {\r\n font-size: 1.22rem;\r\n margin-bottom: 18px;\r\n line-height: 1.2;\r\n }\r\n\r\n .solution-card--open .solution-card__title {\r\n margin-bottom: 18px;\r\n padding-bottom: 14px;\r\n }\r\n\r\n .solution-card__cta {\r\n width: 100%;\r\n justify-content: center;\r\n padding: 12px 18px;\r\n font-size: 0.85rem;\r\n min-width: 0;\r\n }\r\n\r\n .solution-items {\r\n margin-top: 14px;\r\n gap: 10px;\r\n }\r\n\r\n .solution-item { padding: 14px 14px; }\r\n .solution-item__content { gap: 12px; }\r\n .solution-item__icon { width: 26px; height: 26px; }\r\n .solution-item__name { font-size: 0.95rem; line-height: 1.15; }\r\n .solution-item__arrow { width: 18px; height: 18px; }\r\n\r\n .solution-back-btn {\r\n width: 100%;\r\n justify-content: center;\r\n padding: 12px 18px;\r\n margin-top: 18px;\r\n min-width: 0;\r\n }\r\n\r\n \/* Pagina\u00e7\u00e3o (bolinhas) *\/\r\n .solutions-pagination {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 0 0;\r\n user-select: none;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n .solutions-dot {\r\n -webkit-appearance: none !important;\r\n appearance: none !important;\r\n display: inline-block;\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 999px !important;\r\n background: rgba(2, 23, 42, 0.22) !important;\r\n background-image: none !important;\r\n border: none !important;\r\n outline: none !important;\r\n box-shadow: none !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n cursor: pointer;\r\n transition: width 0.25s ease, background 0.25s ease, opacity 0.25s ease;\r\n opacity: 0.9;\r\n font-size: 0 !important;\r\n line-height: 0 !important;\r\n }\r\n\r\n .solutions-dot.is-active {\r\n width: 22px;\r\n background: rgba(2, 23, 42, 0.55) !important;\r\n }\r\n\r\n \/* No touch: corta hover exagerado *\/\r\n .solution-card:hover .solution-card__icon,\r\n .solution-item:hover,\r\n .solution-item:hover .solution-item__icon,\r\n .solution-item:hover .solution-item__arrow {\r\n transform: none;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"solutions-section\">\r\n <div class=\"solutions-container\">\r\n\r\n <div class=\"solutions-carousel\">\r\n\r\n <div class=\"solutions-grid\">\r\n\r\n <!-- ==================== CARD: CONECTIVIDADE ==================== -->\r\n <div class=\"solution-card\" data-solution=\"conectividade\">\r\n <div class=\"solution-card__overlay\"><\/div>\r\n\r\n <div class=\"solution-card__content\">\r\n <div class=\"solution-card__icon\">\r\n <img decoding=\"async\" src=\"https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/Conec_2-1.png\" alt=\"Conectividade\">\r\n <\/div>\r\n <h3 class=\"solution-card__title\">Conectividade<\/h3>\r\n <\/div>\r\n\r\n <button class=\"solution-card__cta\" type=\"button\">\r\n Clique e saiba mais\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <div class=\"solution-items\">\r\n <a href=\"https:\/\/tglobalnetworks.com\/link-ip\/\" class=\"solution-item\">\r\n <div class=\"solution-item__content\">\r\n <span class=\"solution-item__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\r\n <path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/>\r\n <path d=\"M2 12h20\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"solution-item__name\">IP Tr\u00e2nsito<\/span>\r\n <\/div>\r\n <svg class=\"solution-item__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/tglobalnetworks.com\/lan-to-lan\/\" class=\"solution-item\">\r\n <div class=\"solution-item__content\">\r\n <span class=\"solution-item__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <rect x=\"2\" y=\"3\" width=\"8\" height=\"7\" rx=\"1\"\/>\r\n <rect x=\"14\" y=\"3\" width=\"8\" height=\"7\" rx=\"1\"\/>\r\n <rect x=\"2\" y=\"14\" width=\"8\" height=\"7\" rx=\"1\"\/>\r\n <rect x=\"14\" y=\"14\" width=\"8\" height=\"7\" rx=\"1\"\/>\r\n <line x1=\"6\" y1=\"10\" x2=\"6\" y2=\"14\"\/>\r\n <line x1=\"18\" y1=\"10\" x2=\"18\" y2=\"14\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"solution-item__name\">Transporte Ethernet<\/span>\r\n <\/div>\r\n <svg class=\"solution-item__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <button class=\"solution-back-btn\" type=\"button\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M19 12H5M12 19l-7-7 7-7\"\/>\r\n <\/svg>\r\n Retornar\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- ==================== CARD: SEGURAN\u00c7A ==================== -->\r\n <div class=\"solution-card\" data-solution=\"seguranca\">\r\n <div class=\"solution-card__overlay\"><\/div>\r\n\r\n <div class=\"solution-card__content\">\r\n <div class=\"solution-card__icon\">\r\n <img decoding=\"async\" src=\"https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/Seg_2-1.png\" alt=\"Seguran\u00e7a\">\r\n <\/div>\r\n <h3 class=\"solution-card__title\">Seguran\u00e7a<\/h3>\r\n <\/div>\r\n\r\n <button class=\"solution-card__cta\" type=\"button\">\r\n Clique e saiba mais\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <div class=\"solution-items\">\r\n <a href=\"https:\/\/tglobalnetworks.com\/mitigacao-ddos\/\" class=\"solution-item\">\r\n <div class=\"solution-item__content\">\r\n <span class=\"solution-item__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n <path d=\"M9 12l2 2 4-4\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"solution-item__name\">Mitiga\u00e7\u00e3o DDoS<\/span>\r\n <\/div>\r\n <svg class=\"solution-item__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <button class=\"solution-back-btn\" type=\"button\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M19 12H5M12 19l-7-7 7-7\"\/>\r\n <\/svg>\r\n Retornar\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- ==================== CARD: CLOUD ==================== -->\r\n <div class=\"solution-card\" data-solution=\"cloud\">\r\n <div class=\"solution-card__overlay\"><\/div>\r\n\r\n <div class=\"solution-card__content\">\r\n <div class=\"solution-card__icon\">\r\n <img decoding=\"async\" src=\"https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/Cloud_2-1.png\" alt=\"Cloud\">\r\n <\/div>\r\n <h3 class=\"solution-card__title\">Cloud<\/h3>\r\n <\/div>\r\n\r\n <button class=\"solution-card__cta\" type=\"button\">\r\n Clique e saiba mais\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <div class=\"solution-items\">\r\n <a href=\"https:\/\/tglobalnetworks.com\/cloud-publica\/\" class=\"solution-item\">\r\n <div class=\"solution-item__content\">\r\n <span class=\"solution-item__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"solution-item__name\">Cloud P\u00fablica<\/span>\r\n <\/div>\r\n <svg class=\"solution-item__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/tglobalnetworks.com\/cloud-privada\/\" class=\"solution-item\">\r\n <div class=\"solution-item__content\">\r\n <span class=\"solution-item__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z\"\/>\r\n <rect x=\"9\" y=\"13\" width=\"6\" height=\"4\" rx=\"1\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"solution-item__name\">Cloud Privada<\/span>\r\n <\/div>\r\n <svg class=\"solution-item__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <button class=\"solution-back-btn\" type=\"button\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M19 12H5M12 19l-7-7 7-7\"\/>\r\n <\/svg>\r\n Retornar\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- ==================== CARD: EDGE ==================== -->\r\n <div class=\"solution-card\" data-solution=\"edge\">\r\n <div class=\"solution-card__overlay\"><\/div>\r\n\r\n <div class=\"solution-card__content\">\r\n <div class=\"solution-card__icon\">\r\n <img decoding=\"async\" src=\"https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/Edge_2-1.png\" alt=\"Edge\">\r\n <\/div>\r\n <h3 class=\"solution-card__title\">Edge<\/h3>\r\n <\/div>\r\n\r\n <button class=\"solution-card__cta\" type=\"button\">\r\n Clique e saiba mais\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/button>\r\n\r\n <div class=\"solution-items\">\r\n <a href=\"https:\/\/tglobalnetworks.com\/bare-metal\/\" class=\"solution-item\">\r\n <div class=\"solution-item__content\">\r\n <span class=\"solution-item__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/>\r\n <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/>\r\n <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"solution-item__name\">Bare Metal<\/span>\r\n <\/div>\r\n <svg class=\"solution-item__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/tglobalnetworks.com\/colocation\/\" class=\"solution-item\">\r\n <div class=\"solution-item__content\">\r\n <span class=\"solution-item__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n <rect x=\"7\" y=\"7\" width=\"3\" height=\"9\" rx=\"1\"\/>\r\n <rect x=\"14\" y=\"7\" width=\"3\" height=\"5\" rx=\"1\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span class=\"solution-item__name\">Colocation<\/span>\r\n <\/div>\r\n <svg class=\"solution-item__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#46B5FF\" stroke-width=\"2.5\" stroke-linecap=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <button class=\"solution-back-btn\" type=\"button\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n <path d=\"M19 12H5M12 19l-7-7 7-7\"\/>\r\n <\/svg>\r\n Retornar\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"solutions-pagination\" aria-label=\"Navega\u00e7\u00e3o do carrossel\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const cards = Array.from(document.querySelectorAll('.solution-card'));\r\n const grid = document.querySelector('.solutions-grid');\r\n const pagination = document.querySelector('.solutions-pagination');\r\n\r\n function isMobile() {\r\n return window.matchMedia('(max-width: 768px)').matches;\r\n }\r\n\r\n \/\/ --------- Pagina\u00e7\u00e3o (bolinhas) ----------\r\n function buildDots() {\r\n if (!pagination) return;\r\n pagination.innerHTML = '';\r\n cards.forEach((card, idx) => {\r\n const btn = document.createElement('span');\r\n btn.className = 'solutions-dot';\r\n btn.setAttribute('role', 'button');\r\n btn.setAttribute('tabindex', '0');\r\n btn.setAttribute('aria-label', 'Ir para o card ' + (idx + 1));\r\n btn.addEventListener('click', () => {\r\n card.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n });\r\n btn.addEventListener('keydown', (e) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n card.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n }\r\n });\r\n pagination.appendChild(btn);\r\n });\r\n }\r\n\r\n function setActiveByIndex(index) {\r\n cards.forEach(c => c.classList.remove('solution-card--active'));\r\n const target = cards[index];\r\n if (target && !target.classList.contains('solution-card--open')) {\r\n target.classList.add('solution-card--active');\r\n }\r\n if (pagination) {\r\n const dots = Array.from(pagination.querySelectorAll('.solutions-dot'));\r\n dots.forEach(d => d.classList.remove('is-active'));\r\n if (dots[index]) dots[index].classList.add('is-active');\r\n }\r\n }\r\n\r\n \/\/ Observa qual card est\u00e1 mais \"no centro\" (interse\u00e7\u00e3o dentro do carrossel)\r\n let io = null;\r\n function setupObserver() {\r\n if (!grid || !isMobile()) return;\r\n\r\n if (io) io.disconnect();\r\n\r\n io = new IntersectionObserver((entries) => {\r\n const visible = entries\r\n .filter(e => e.isIntersecting)\r\n .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];\r\n\r\n if (!visible) return;\r\n\r\n const index = cards.indexOf(visible.target);\r\n if (index >= 0) setActiveByIndex(index);\r\n }, {\r\n root: grid,\r\n threshold: [0.25, 0.5, 0.75]\r\n });\r\n\r\n cards.forEach(c => io.observe(c));\r\n }\r\n\r\n \/\/ Inicializa\u00e7\u00e3o\r\n buildDots();\r\n setupObserver();\r\n\r\n setTimeout(() => setActiveByIndex(0), 30);\r\n\r\n window.addEventListener('resize', () => {\r\n setupObserver();\r\n });\r\n\r\n \/\/ --------- Abrir\/fechar cards ----------\r\n cards.forEach(card => {\r\n const ctaButton = card.querySelector('.solution-card__cta');\r\n const backButton = card.querySelector('.solution-back-btn');\r\n\r\n ctaButton.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n cards.forEach(c => {\r\n if (c !== card) c.classList.remove('solution-card--open');\r\n });\r\n\r\n card.classList.add('solution-card--open');\r\n\r\n if (isMobile()) {\r\n card.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n }\r\n\r\n const index = cards.indexOf(card);\r\n if (index >= 0) setActiveByIndex(index);\r\n });\r\n\r\n backButton.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n\r\n card.classList.remove('solution-card--open');\r\n\r\n if (isMobile()) {\r\n card.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\r\n }\r\n\r\n const index = cards.indexOf(card);\r\n if (index >= 0) setActiveByIndex(index);\r\n });\r\n\r\n const solutionItems = card.querySelectorAll('.solution-item');\r\n solutionItems.forEach(item => {\r\n item.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n });\r\n });\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1750b06 e-flex e-con-boxed e-con e-parent\" data-id=\"1750b06\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b538190 e-con-full e-flex e-con e-child\" data-id=\"b538190\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60cb1a5 elementor-widget elementor-widget-menu-anchor\" data-id=\"60cb1a5\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"porque-tglobal\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9097b29 elementor-widget elementor-widget-heading\" data-id=\"9097b29\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Porque escolher a TGLOBAL?<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87b8487 elementor-widget elementor-widget-text-editor\" data-id=\"87b8487\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Infraestrutura robusta, alcance internacional e prote\u00e7\u00e3o total \u2014 tudo com tecnologia pr\u00f3pria e desempenho incompar\u00e1vel.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-26d7eb0 e-con-full e-flex e-con e-child\" data-id=\"26d7eb0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0bda666 elementor-widget elementor-widget-html\" data-id=\"0bda666\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<a href=\"#formulario\" class=\"btn-modern\">\r\n FALE COM ESPECIALISTA\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n<\/a>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-662c9a1 e-flex e-con-boxed e-con e-parent\" data-id=\"662c9a1\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e4d45a0 elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"e4d45a0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>TGlobal Networks - Cards Diferenciais<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n \/* GRID DE CARDS *\/\r\n .diferenciais-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* CARD *\/\r\n .diferencial-card {\r\n background: rgba(255, 255, 255, 0.95);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 20px;\r\n padding: 40px 30px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .diferencial-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 4px;\r\n background: linear-gradient(90deg, #00AEEF 0%, #0077BE 100%);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .diferencial-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 35px rgba(0, 174, 239, 0.12);\r\n border-color: rgba(0, 174, 239, 0.3);\r\n }\r\n\r\n .diferencial-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n \/* \u00cdcone *\/\r\n .card-icon {\r\n width: 70px;\r\n height: 70px;\r\n background: #003B66;\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 25px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .diferencial-card:hover .card-icon {\r\n background: linear-gradient(135deg, #00AEEF 0%, #0077BE 100%);\r\n }\r\n\r\n .card-icon i {\r\n font-size: 30px;\r\n color: #ffffff;\r\n }\r\n\r\n \/* T\u00edtulo do Card *\/\r\n .card-title {\r\n font-family: 'Outfit', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n color: #003B66;\r\n line-height: 1.3;\r\n margin-bottom: 15px;\r\n }\r\n\r\n \/* Descri\u00e7\u00e3o do Card *\/\r\n .card-description {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 15px;\r\n color: #6c757d;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* Responsivo *\/\r\n @media (max-width: 1024px) {\r\n .diferenciais-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .diferenciais-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .card-title {\r\n font-size: 20px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"diferenciais-grid\">\r\n <!-- Card 1: Anti-DDoS -->\r\n <div class=\"diferencial-card\">\r\n <div class=\"card-icon\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h3 class=\"card-title\">Solu\u00e7\u00e3o Anti-DDoS 100% Propriet\u00e1ria<\/h3>\r\n <p class=\"card-description\">\r\n Tecnologia desenvolvida internamente pela TGlobal com algoritmos avan\u00e7ados de detec\u00e7\u00e3o \r\n e mitiga\u00e7\u00e3o. Capacidade de filtrar ataques volum\u00e9tricos de at\u00e9 3.5 Tbps com lat\u00eancia \r\n m\u00ednima, mantendo sua opera\u00e7\u00e3o online sem interrup\u00e7\u00f5es.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Card 2: Baixa Lat\u00eancia -->\r\n <div class=\"diferencial-card\">\r\n <div class=\"card-icon\">\r\n <i class=\"fas fa-globe-americas\"><\/i>\r\n <\/div>\r\n <h3 class=\"card-title\">Baixa Lat\u00eancia Global<\/h3>\r\n <p class=\"card-description\">\r\n Infraestrutura estrategicamente distribu\u00edda em m\u00faltiplos pontos de presen\u00e7a (PoPs) \r\n nas Am\u00e9ricas. Backbone pr\u00f3prio com conex\u00f5es diretas aos principais IXPs, garantindo \r\n lat\u00eancias inferiores a 5ms em rotas cr\u00edticas e alcance otimizado.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Card 3: Alto Volume IOPS -->\r\n <div class=\"diferencial-card\">\r\n <div class=\"card-icon\">\r\n <i class=\"fas fa-chart-line\"><\/i>\r\n <\/div>\r\n <h3 class=\"card-title\">Alto Volume de IOPS<\/h3>\r\n <p class=\"card-description\">\r\n Infraestrutura de colocation equipada com storage NVMe de \u00faltima gera\u00e7\u00e3o, \r\n entregando mais de 1 milh\u00e3o de IOPS por servidor. Ideal para aplica\u00e7\u00f5es cr\u00edticas, \r\n bancos de dados intensivos e workloads de alta performance.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Card 4: Projetos Personalizados -->\r\n <div class=\"diferencial-card\">\r\n <div class=\"card-icon\">\r\n <i class=\"fas fa-cogs\"><\/i>\r\n <\/div>\r\n <h3 class=\"card-title\">Projetos Altamente Personalizados<\/h3>\r\n <p class=\"card-description\">\r\n Solu\u00e7\u00f5es sob medida desenvolvidas pelo nosso time de especialistas para atender \r\n demandas espec\u00edficas. Desde arquiteturas h\u00edbridas multi-cloud at\u00e9 implementa\u00e7\u00f5es \r\n de redes privadas complexas com SLA garantido e suporte t\u00e9cnico dedicado 24\/7.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9b35a0 e-flex e-con-boxed e-con e-parent\" data-id=\"e9b35a0\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1463eaa elementor-widget elementor-widget-html\" data-id=\"1463eaa\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\" \/>\r\n <title>Globo Interativo - Conectividade Global<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n <style>\r\n :root {\r\n --c-light: #eff5fb;\r\n --c-light-active: #cddff1;\r\n --c-normal: #5e98d2;\r\n --c-dark: #47729e;\r\n --c-dark-active: #2a445e;\r\n --c-darker: #21354a;\r\n --shadow: 0 10px 30px rgba(0,0,0,.18);\r\n --shadow-hover: 0 14px 40px rgba(0,0,0,.22);\r\n }\r\n\r\n * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n html, body { overflow-x: hidden; touch-action: pan-y; }\r\n body { font-family: 'Outfit', sans-serif; background: transparent; }\r\n\r\n .connectivity-section {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n overflow: hidden;\r\n }\r\n\r\n .connectivity-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1.6fr;\r\n gap: 50px;\r\n align-items: center;\r\n }\r\n\r\n .info-column h2 {\r\n font-size: 2.5rem;\r\n color: var(--c-light);\r\n margin-bottom: 36px;\r\n font-weight: 700;\r\n line-height: 1.2;\r\n text-shadow: 0 8px 28px rgba(0,0,0,.35);\r\n }\r\n\r\n .locations-container { display: grid; gap: 28px; }\r\n\r\n .location-section h3 {\r\n font-size: 1.05rem;\r\n color: rgba(239,245,251,.92);\r\n margin-bottom: 12px;\r\n font-weight: 600;\r\n letter-spacing: .2px;\r\n text-shadow: 0 6px 22px rgba(0,0,0,.25);\r\n }\r\n\r\n .locations-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n }\r\n\r\n .location-card {\r\n background: rgba(239,245,251,0.95);\r\n padding: 12px 14px;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n box-shadow: var(--shadow);\r\n border: 1px solid rgba(94,152,210,.18);\r\n transition: transform .22s ease, box-shadow .22s ease, background .22s ease;\r\n backdrop-filter: blur(6px);\r\n }\r\n\r\n .location-card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: var(--shadow-hover);\r\n background: rgba(231,240,248,0.97);\r\n border-color: rgba(94,152,210,.28);\r\n }\r\n\r\n .location-dot {\r\n width: 8px; height: 8px;\r\n background: var(--c-normal);\r\n border-radius: 999px;\r\n flex-shrink: 0;\r\n box-shadow: 0 0 0 4px rgba(94,152,210,.12);\r\n }\r\n\r\n .location-info { flex: 1; min-width: 0; }\r\n .location-name { font-size: 0.9rem; font-weight: 700; color: var(--c-darker); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }\r\n .location-state { font-size: 0.78rem; color: rgba(33,53,74,.78); font-weight: 500; }\r\n\r\n .globe-column { background: transparent; touch-action: none; }\r\n\r\n .globe-widget {\r\n position: relative;\r\n width: 100%;\r\n height: 650px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: visible;\r\n border-radius: 18px;\r\n touch-action: none;\r\n }\r\n\r\n #globe-canvas { width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; display: block; }\r\n #globe-canvas:active { cursor: grabbing; }\r\n\r\n .location-tooltip {\r\n position: absolute; left: 0; top: 0;\r\n background: rgba(33,53,74,0.92); color: var(--c-light);\r\n padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;\r\n pointer-events: none; opacity: 0; transform: translate(-9999px, -9999px);\r\n transition: opacity .18s ease; z-index: 100; white-space: nowrap;\r\n box-shadow: 0 12px 30px rgba(0,0,0,.28); border: 1px solid rgba(94,152,210,.28);\r\n }\r\n\r\n .location-tooltip::after {\r\n content: ''; position: absolute; bottom: -6px; left: 14px;\r\n width: 0; height: 0;\r\n border-left: 6px solid transparent; border-right: 6px solid transparent;\r\n border-top: 6px solid rgba(33,53,74,0.92);\r\n }\r\n\r\n \/* ========== PAINEL DE CALIBRA\u00c7\u00c3O ========== *\/\r\n \/* Mude display: none \u2192 display: flex para ativar *\/\r\n .cal-panel {\r\n position: fixed; top: 10px; right: 10px;\r\n background: rgba(0,0,0,0.9); color: #fff;\r\n padding: 18px; border-radius: 14px;\r\n font-family: 'Outfit', sans-serif; font-size: 13px;\r\n z-index: 9999; min-width: 280px;\r\n display: none; \/* \u2190 MUDE PARA flex PARA CALIBRAR *\/\r\n flex-direction: column; gap: 12px;\r\n border: 1px solid rgba(94,152,210,0.3);\r\n }\r\n .cal-panel .cal-title { font-weight: 700; font-size: 14px; color: #5e98d2; }\r\n .cal-panel label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }\r\n .cal-panel input[type=\"range\"] { flex: 1; accent-color: #5e98d2; }\r\n .cal-panel span { min-width: 44px; text-align: right; font-weight: 700; color: #5e98d2; }\r\n\r\n \/* ========== CARROSSEL MOBILE ========== *\/\r\n .carousel-dots { display: none; justify-content: center; gap: 8px; margin-top: 16px; }\r\n .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(94,152,210,0.3); cursor: pointer; transition: all 0.3s ease; }\r\n .carousel-dot.active { background: var(--c-normal); width: 24px; border-radius: 4px; }\r\n\r\n @media (max-width: 1200px) { .connectivity-grid { gap: 40px; } }\r\n @media (max-width: 1024px) {\r\n .connectivity-grid { grid-template-columns: 1fr; gap: 40px; }\r\n .info-column h2 { font-size: 2rem; }\r\n .globe-widget { height: 550px; }\r\n }\r\n @media (max-width: 768px) {\r\n .connectivity-section { padding: 40px 15px; }\r\n .info-column h2 { font-size: 1.75rem; margin-bottom: 24px; }\r\n .globe-widget { height: 420px; border-radius: 12px; margin-bottom: 30px; }\r\n .connectivity-grid { display: flex; flex-direction: column-reverse; }\r\n .locations-container { position: relative; overflow: hidden; gap: 0; }\r\n .location-section { display: none; }\r\n .location-section.active { display: block; animation: fadeIn 0.4s ease; }\r\n @keyframes fadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }\r\n .locations-grid { gap: 10px; }\r\n .carousel-dots { display: flex; }\r\n .cal-panel { display: none !important; }\r\n }\r\n @media (max-width: 480px) {\r\n .connectivity-section { padding: 30px 12px; }\r\n .globe-widget { height: 360px; margin-bottom: 24px; }\r\n .info-column h2 { font-size: 1.5rem; margin-bottom: 20px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <!-- PAINEL CALIBRA\u00c7\u00c3O \u2014 ative no CSS (.cal-panel display: flex) -->\r\n <div class=\"cal-panel\" id=\"calPanel\">\r\n <div class=\"cal-title\">\ud83d\udd27 Calibra\u00e7\u00e3o do Mapa<\/div>\r\n <label>Longitude <input type=\"range\" id=\"calLon\" min=\"-180\" max=\"180\" value=\"30\" step=\"1\"> <span id=\"calLonVal\">30\u00b0<\/span><\/label>\r\n <label>Latitude <input type=\"range\" id=\"calLat\" min=\"-90\" max=\"90\" value=\"8\" step=\"1\"> <span id=\"calLatVal\">8\u00b0<\/span><\/label>\r\n <\/div>\r\n\r\n <section class=\"connectivity-section\">\r\n <div class=\"connectivity-grid\">\r\n\r\n <div class=\"info-column\">\r\n <h2>Mapa da Conectividade<\/h2>\r\n\r\n <div class=\"locations-container\" id=\"locationsContainer\">\r\n <!-- AM\u00c9RICAS (Brasil primeiro) -->\r\n <div class=\"location-section active\">\r\n <h3>Pontos de Presen\u00e7a \u2014 Am\u00e9ricas<\/h3>\r\n <div class=\"locations-grid\">\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">S\u00e3o Paulo<\/div><div class=\"location-state\">SP, Brasil<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Rio de Janeiro<\/div><div class=\"location-state\">RJ, Brasil<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Fortaleza<\/div><div class=\"location-state\">CE, Brasil<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Bel\u00e9m<\/div><div class=\"location-state\">PA, Brasil<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Bras\u00edlia<\/div><div class=\"location-state\">DF, Brasil<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Porto Alegre<\/div><div class=\"location-state\">RS, Brasil<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Miami<\/div><div class=\"location-state\">FL, EUA<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Nova York<\/div><div class=\"location-state\">NY, EUA<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Quer\u00e9taro<\/div><div class=\"location-state\">M\u00e9xico<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Santiago<\/div><div class=\"location-state\">Chile<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Lima<\/div><div class=\"location-state\">Peru<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Buenos Aires<\/div><div class=\"location-state\">Argentina<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Quito<\/div><div class=\"location-state\">Equador<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Bogot\u00e1<\/div><div class=\"location-state\">Col\u00f4mbia<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EUROPA -->\r\n <div class=\"location-section\">\r\n <h3>Pontos de Presen\u00e7a \u2014 Europa<\/h3>\r\n <div class=\"locations-grid\">\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Frankfurt<\/div><div class=\"location-state\">Alemanha<\/div><\/div><\/div>\r\n <div class=\"location-card\"><div class=\"location-dot\"><\/div><div class=\"location-info\"><div class=\"location-name\">Amsterd\u00e3<\/div><div class=\"location-state\">Holanda<\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"carousel-dots\" id=\"carouselDots\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"globe-column\">\r\n <div class=\"globe-widget\">\r\n <canvas id=\"globe-canvas\"><\/canvas>\r\n <div class=\"location-tooltip\" id=\"tooltip\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n\r\n <script>\r\n \/\/ ==================== CARROSSEL MOBILE ====================\r\n let carouselInit = false;\r\n function initCarousel() {\r\n if (window.innerWidth > 768 || carouselInit) return;\r\n carouselInit = true;\r\n const secs = document.querySelectorAll('.location-section');\r\n const dotsC = document.getElementById('carouselDots');\r\n let cur = 0, timer;\r\n dotsC.innerHTML = '';\r\n secs.forEach((_, i) => {\r\n const d = document.createElement('div');\r\n d.className = 'carousel-dot' + (i === 0 ? ' active' : '');\r\n d.addEventListener('click', () => go(i));\r\n dotsC.appendChild(d);\r\n });\r\n const dots = dotsC.querySelectorAll('.carousel-dot');\r\n function go(i) {\r\n secs.forEach(s => s.classList.remove('active'));\r\n dots.forEach(d => d.classList.remove('active'));\r\n secs[i].classList.add('active');\r\n dots[i].classList.add('active');\r\n cur = i;\r\n clearInterval(timer);\r\n timer = setInterval(() => { cur = (cur + 1) % secs.length; go(cur); }, 5000);\r\n }\r\n timer = setInterval(() => { cur = (cur + 1) % secs.length; go(cur); }, 5000);\r\n }\r\n\r\n \/\/ ==================== CONFIG ====================\r\n const CFG = {\r\n radius: 100,\r\n pointSize: 2.8,\r\n glowSize: 5.5,\r\n lineOpacity: 0.4,\r\n autoSpeed: 0.0005,\r\n\r\n \/\/ \u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557\r\n \/\/ \u2551 ALINHAMENTO DA TEXTURA COM OS PONTOS \u2551\r\n \/\/ \u2551 \u2551\r\n \/\/ \u2551 longitudeOffset (+) = pontos v\u00e3o para LESTE \u2551\r\n \/\/ \u2551 latitudeOffset (+) = pontos v\u00e3o para NORTE \u2551\r\n \/\/ \u2551 \u2551\r\n \/\/ \u2551 Ative o painel de calibra\u00e7\u00e3o no CSS para ajustar \u2551\r\n \/\/ \u2551 em tempo real arrastando os sliders. \u2551\r\n \/\/ \u255a\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255d\r\n lonOffset: -11,\r\n latOffset: -25,\r\n };\r\n\r\n \/\/ ==================== SETUP ====================\r\n const canvas = document.getElementById('globe-canvas');\r\n const cont = document.querySelector('.globe-widget');\r\n const tip = document.getElementById('tooltip');\r\n\r\n const scene = new THREE.Scene();\r\n const cam = new THREE.PerspectiveCamera(50, cont.clientWidth \/ cont.clientHeight, 0.1, 1000);\r\n cam.position.z = 260;\r\n\r\n const ren = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });\r\n ren.setSize(cont.clientWidth, cont.clientHeight);\r\n ren.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n ren.setClearColor(0x000000, 0);\r\n ren.outputEncoding = THREE.sRGBEncoding;\r\n\r\n const root = new THREE.Group();\r\n scene.add(root);\r\n\r\n \/\/ ==================== GLOBO ====================\r\n const tex = new THREE.TextureLoader().load(\r\n 'https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/11\/MAPA-FINAL-scaled.png'\r\n );\r\n tex.encoding = THREE.sRGBEncoding;\r\n\r\n const globeGeo = new THREE.SphereGeometry(CFG.radius, 128, 128);\r\n const globeMat = new THREE.MeshPhongMaterial({ map: tex, transparent: true, opacity: 1, shininess: 22 });\r\n const globe = new THREE.Mesh(globeGeo, globeMat);\r\n root.add(globe);\r\n\r\n \/\/ Atmosfera\r\n const atmoGeo = new THREE.SphereGeometry(CFG.radius + 3, 64, 64);\r\n const atmoMat = new THREE.MeshBasicMaterial({ color: 0x2a445e, transparent: true, opacity: 0.14, side: THREE.BackSide });\r\n root.add(new THREE.Mesh(atmoGeo, atmoMat));\r\n\r\n \/\/ ==================== CONVERS\u00c3O ====================\r\n function ll2v(lat, lon, r) {\r\n const la = lat + CFG.latOffset;\r\n const lo = lon + CFG.lonOffset;\r\n const phi = (90 - la) * Math.PI \/ 180;\r\n const theta = (lo + 180) * Math.PI \/ 180;\r\n return new THREE.Vector3(\r\n -r * Math.sin(phi) * Math.cos(theta),\r\n r * Math.cos(phi),\r\n r * Math.sin(phi) * Math.sin(theta)\r\n );\r\n }\r\n\r\n \/\/ ==================== LOCALIZA\u00c7\u00d5ES ====================\r\n const locs = [\r\n { lat: -23.5505, lon: -46.6333, name: 'S\u00e3o Paulo', c: 'Brasil' }, \/\/ 0\r\n { lat: -22.9068, lon: -43.1729, name: 'Rio de Janeiro', c: 'Brasil' }, \/\/ 1\r\n { lat: -3.7172, lon: -38.5433, name: 'Fortaleza', c: 'Brasil' }, \/\/ 2\r\n { lat: -1.4558, lon: -48.5039, name: 'Bel\u00e9m', c: 'Brasil' }, \/\/ 3\r\n { lat: -15.7975, lon: -47.8919, name: 'Bras\u00edlia', c: 'Brasil' }, \/\/ 4\r\n { lat: -30.0346, lon: -51.2177, name: 'Porto Alegre', c: 'Brasil' }, \/\/ 5\r\n { lat: 25.7617, lon: -80.1918, name: 'Miami', c: 'EUA' }, \/\/ 6\r\n { lat: 40.7128, lon: -74.0060, name: 'Nova York', c: 'EUA' }, \/\/ 7\r\n { lat: 20.5888, lon: -100.3899,name: 'Quer\u00e9taro', c: 'M\u00e9xico' }, \/\/ 8\r\n { lat: -33.4489, lon: -70.6693, name: 'Santiago', c: 'Chile' }, \/\/ 9\r\n { lat: -12.0464, lon: -77.0428, name: 'Lima', c: 'Peru' }, \/\/ 10\r\n { lat: -34.6037, lon: -58.3816, name: 'Buenos Aires', c: 'Argentina' }, \/\/ 11\r\n { lat: -0.1807, lon: -78.4678, name: 'Quito', c: 'Equador' }, \/\/ 12\r\n { lat: 4.7110, lon: -74.0721, name: 'Bogot\u00e1', c: 'Col\u00f4mbia' }, \/\/ 13\r\n { lat: 52.3676, lon: 4.9041, name: 'Amsterd\u00e3', c: 'Holanda' }, \/\/ 14\r\n { lat: 50.1109, lon: 8.6821, name: 'Frankfurt', c: 'Alemanha' }, \/\/ 15\r\n ];\r\n\r\n const conns = [\r\n [0,1],[0,4],[0,5],[1,4],[2,3],[2,4],[4,5],\r\n [0,9],[0,11],[5,11],[3,13],[2,13],\r\n [9,10],[9,11],[10,12],[12,13],[10,13],\r\n [2,6],[0,6],[1,6],[3,6],[6,7],[8,6],[8,7],[13,6],[9,6],\r\n [7,14],[7,15],[6,14],[2,15],\r\n [14,15],\r\n ];\r\n\r\n \/\/ ==================== PONTOS + GLOW ====================\r\n const ptsGrp = new THREE.Group();\r\n const interPts = [];\r\n const glows = [];\r\n\r\n function buildPoints() {\r\n while (ptsGrp.children.length) ptsGrp.remove(ptsGrp.children[0]);\r\n interPts.length = 0;\r\n glows.length = 0;\r\n\r\n locs.forEach((loc, i) => {\r\n const pos = ll2v(loc.lat, loc.lon, CFG.radius + 1.5);\r\n\r\n const gGeo = new THREE.SphereGeometry(CFG.glowSize, 16, 16);\r\n const gMat = new THREE.MeshBasicMaterial({ color: 0xcddff1, transparent: true, opacity: 0.28, blending: THREE.AdditiveBlending, depthWrite: false });\r\n const glow = new THREE.Mesh(gGeo, gMat);\r\n glow.position.copy(pos);\r\n ptsGrp.add(glow);\r\n glows.push(glow);\r\n\r\n const pGeo = new THREE.SphereGeometry(CFG.pointSize, 16, 16);\r\n const pMat = new THREE.MeshBasicMaterial({ color: 0x5e98d2 });\r\n const pt = new THREE.Mesh(pGeo, pMat);\r\n pt.position.copy(pos);\r\n pt.userData = { name: loc.name, country: loc.c, index: i };\r\n ptsGrp.add(pt);\r\n interPts.push(pt);\r\n });\r\n }\r\n\r\n buildPoints();\r\n root.add(ptsGrp);\r\n\r\n \/\/ ==================== CONEX\u00d5ES ====================\r\n const lnsGrp = new THREE.Group();\r\n const connObjs = [];\r\n\r\n function buildLines() {\r\n while (lnsGrp.children.length) lnsGrp.remove(lnsGrp.children[0]);\r\n connObjs.length = 0;\r\n\r\n conns.forEach(([s, e]) => {\r\n const p1 = ll2v(locs[s].lat, locs[s].lon, CFG.radius + 1.5);\r\n const p2 = ll2v(locs[e].lat, locs[e].lon, CFG.radius + 1.5);\r\n const d = p1.distanceTo(p2);\r\n\r\n const mid = new THREE.Vector3().addVectors(p1, p2).multiplyScalar(0.5)\r\n .normalize().multiplyScalar(CFG.radius + d * 0.28);\r\n\r\n const curve = new THREE.QuadraticBezierCurve3(p1, mid, p2);\r\n\r\n const lGeo = new THREE.BufferGeometry().setFromPoints(curve.getPoints(80));\r\n const lMat = new THREE.LineBasicMaterial({ color: 0x47729e, transparent: true, opacity: CFG.lineOpacity, depthTest: true, depthWrite: false });\r\n lnsGrp.add(new THREE.Line(lGeo, lMat));\r\n\r\n const partGeo = new THREE.SphereGeometry(1.1, 8, 8);\r\n const partMat = new THREE.MeshBasicMaterial({ color: 0xeff5fb, transparent: true, opacity: 0.85 });\r\n const part = new THREE.Mesh(partGeo, partMat);\r\n part.userData.curve = curve;\r\n part.userData.progress = Math.random();\r\n part.userData.speed = 0.0004 + Math.random() * 0.0003;\r\n lnsGrp.add(part);\r\n connObjs.push({ curve, particle: part });\r\n });\r\n }\r\n\r\n buildLines();\r\n root.add(lnsGrp);\r\n\r\n \/\/ ==================== LUZ ====================\r\n scene.add(new THREE.AmbientLight(0xffffff, 0.95));\r\n const dl = new THREE.DirectionalLight(0xffffff, 0.65);\r\n dl.position.set(5, 3, 5);\r\n scene.add(dl);\r\n\r\n \/\/ ==================== INTERA\u00c7\u00c3O ====================\r\n const ray = new THREE.Raycaster();\r\n const mouse = new THREE.Vector2();\r\n let hovered = null, dragging = false, touching = false;\r\n let prev = { x: 0, y: 0 };\r\n let rot = { x: 0, y: 1.2 };\r\n let autoSpd = CFG.autoSpeed;\r\n let lastPt = { x: 0, y: 0 };\r\n\r\n canvas.addEventListener('mousedown', e => { dragging = true; prev = { x: e.clientX, y: e.clientY }; autoSpd = 0; });\r\n canvas.addEventListener('mousemove', e => {\r\n lastPt = { x: e.clientX, y: e.clientY };\r\n const r = canvas.getBoundingClientRect();\r\n mouse.x = ((e.clientX - r.left) \/ r.width) * 2 - 1;\r\n mouse.y = -((e.clientY - r.top) \/ r.height) * 2 + 1;\r\n if (dragging) {\r\n rot.y += (e.clientX - prev.x) * 0.005;\r\n rot.x += (e.clientY - prev.y) * 0.005;\r\n rot.x = Math.max(-Math.PI \/ 2, Math.min(Math.PI \/ 2, rot.x));\r\n prev = { x: e.clientX, y: e.clientY };\r\n }\r\n if (hovered) {\r\n const cr = cont.getBoundingClientRect();\r\n tip.style.transform = `translate(${Math.min(Math.max(lastPt.x - cr.left + 14, 10), cr.width - 10)}px, ${Math.min(Math.max(lastPt.y - cr.top + 14, 10), cr.height - 10)}px)`;\r\n }\r\n });\r\n canvas.addEventListener('mouseup', () => { dragging = false; setTimeout(() => autoSpd = CFG.autoSpeed, 1200); });\r\n canvas.addEventListener('mouseleave', () => { dragging = false; hovered = null; tip.style.opacity = '0'; tip.style.transform = 'translate(-9999px,-9999px)'; });\r\n\r\n let tStart = { x: 0, y: 0 };\r\n canvas.addEventListener('touchstart', e => { e.preventDefault(); touching = true; tStart = { x: e.touches[0].clientX, y: e.touches[0].clientY }; autoSpd = 0; }, { passive: false });\r\n canvas.addEventListener('touchmove', e => {\r\n e.preventDefault();\r\n if (!touching) return;\r\n rot.y += (e.touches[0].clientX - tStart.x) * 0.005;\r\n rot.x += (e.touches[0].clientY - tStart.y) * 0.005;\r\n rot.x = Math.max(-Math.PI \/ 2, Math.min(Math.PI \/ 2, rot.x));\r\n tStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };\r\n }, { passive: false });\r\n canvas.addEventListener('touchend', e => { e.preventDefault(); touching = false; setTimeout(() => autoSpd = CFG.autoSpeed, 1200); }, { passive: false });\r\n\r\n \/\/ ==================== CALIBRA\u00c7\u00c3O ====================\r\n const calLon = document.getElementById('calLon');\r\n const calLat = document.getElementById('calLat');\r\n const calLonV = document.getElementById('calLonVal');\r\n const calLatV = document.getElementById('calLatVal');\r\n\r\n function onCal() {\r\n CFG.lonOffset = +calLon.value;\r\n CFG.latOffset = +calLat.value;\r\n calLonV.textContent = calLon.value + '\u00b0';\r\n calLatV.textContent = calLat.value + '\u00b0';\r\n buildPoints();\r\n buildLines();\r\n }\r\n\r\n calLon.addEventListener('input', onCal);\r\n calLat.addEventListener('input', onCal);\r\n calLon.value = CFG.lonOffset;\r\n calLat.value = CFG.latOffset;\r\n calLonV.textContent = CFG.lonOffset + '\u00b0';\r\n calLatV.textContent = CFG.latOffset + '\u00b0';\r\n\r\n \/\/ ==================== ANIMA\u00c7\u00c3O ====================\r\n function animate() {\r\n requestAnimationFrame(animate);\r\n\r\n if (!dragging && !touching) rot.y += autoSpd;\r\n\r\n root.rotation.x = rot.x;\r\n root.rotation.y = rot.y;\r\n\r\n const now = Date.now();\r\n for (let i = 0; i < glows.length; i++) {\r\n glows[i].scale.setScalar(1 + Math.sin(now * 0.0016 + i) * 0.16);\r\n }\r\n\r\n for (const c of connObjs) {\r\n c.particle.userData.progress += c.particle.userData.speed;\r\n if (c.particle.userData.progress > 1) c.particle.userData.progress = 0;\r\n c.particle.position.copy(c.curve.getPoint(c.particle.userData.progress));\r\n }\r\n\r\n if (!dragging && !touching && window.innerWidth > 768) {\r\n ray.setFromCamera(mouse, cam);\r\n const hits = ray.intersectObjects(interPts);\r\n if (hits.length) {\r\n const h = hits[0].object;\r\n if (hovered !== h) {\r\n hovered = h;\r\n tip.textContent = `${h.userData.name}, ${h.userData.country}`;\r\n tip.style.opacity = '1';\r\n canvas.style.cursor = 'pointer';\r\n }\r\n } else if (hovered) {\r\n hovered = null;\r\n tip.style.opacity = '0';\r\n tip.style.transform = 'translate(-9999px,-9999px)';\r\n canvas.style.cursor = 'grab';\r\n }\r\n }\r\n\r\n ren.render(scene, cam);\r\n }\r\n\r\n animate();\r\n\r\n \/\/ ==================== RESIZE ====================\r\n let rT;\r\n window.addEventListener('resize', () => {\r\n clearTimeout(rT);\r\n rT = setTimeout(() => {\r\n cam.aspect = cont.clientWidth \/ cont.clientHeight;\r\n cam.updateProjectionMatrix();\r\n ren.setSize(cont.clientWidth, cont.clientHeight);\r\n }, 100);\r\n });\r\n\r\n window.addEventListener('DOMContentLoaded', initCarousel);\r\n window.addEventListener('resize', () => { if (window.innerWidth <= 768 && !carouselInit) initCarousel(); });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-969486b e-flex e-con-boxed e-con e-parent\" data-id=\"969486b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-65bb6a0 e-con-full e-flex e-con e-child\" data-id=\"65bb6a0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-18467c6 elementor-widget elementor-widget-heading\" data-id=\"18467c6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Conhe\u00e7a a TGLOBAL\u2028e sua hist\u00f3ria<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61a6266 elementor-widget elementor-widget-text-editor\" data-id=\"61a6266\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>A TGlobal nasceu da necessidade por conectividade de alto desempenho e seguran\u00e7a contra ataques DDoS. Com infraestrutura robusta e atua\u00e7\u00e3o t\u00e9cnica especializada, evolu\u00edmos para entregar solu\u00e7\u00f5es completas de infraestrutura digital, com foco em desempenho, escalabilidade e alta disponibilidade.<\/p><p>A TGlobal \u00e9 um one-stop-shop para o mercado Enterprise, Telecom, Hyperscales, Fintechs e OTTs. Nosso foco se concentra em diminuir lat\u00eancia, suporte humano 24x7x365, r\u00e1pida resposta em cen\u00e1rios de ataques e alta disponibilidade.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c276673 elementor-widget elementor-widget-html\" data-id=\"c276673\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<a href=\"#formulario\" class=\"btn-modern\">\r\n FALE COM ESPECIALISTA\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n<\/a>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d064ba4 e-con-full e-flex e-con e-child\" data-id=\"d064ba4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f4fae9 elementor-widget elementor-widget-image\" data-id=\"6f4fae9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"747\" height=\"541\" src=\"https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/12\/IMAGEM-T-GLOBAL.png\" class=\"attachment-large size-large wp-image-142\" alt=\"\" srcset=\"https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/12\/IMAGEM-T-GLOBAL.png 747w, https:\/\/tglobalnetworks.com\/wp-content\/uploads\/2025\/12\/IMAGEM-T-GLOBAL-300x217.png 300w\" sizes=\"(max-width: 747px) 100vw, 747px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cloud, Conectividade e Seguran\u00e7a Inteligentes. Solu\u00e7\u00f5es integradas de Cloud, Edge, Mitiga\u00e7\u00e3o DDoS e Conectividade para garantir alta performance, lat\u00eancia m\u00ednima, seguran\u00e7a m\u00e1xima e crescimento escal\u00e1vel. FALE COM ESPECIALISTA CONHE\u00c7A Nossas Solu\u00e7\u00f5es TGlobal Networks – Solu\u00e7\u00f5es Conectividade Clique e saiba mais IP Tr\u00e2nsito Transporte Ethernet Retornar Seguran\u00e7a Clique e saiba mais Mitiga\u00e7\u00e3o DDoS Retornar Cloud Clique […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":379,"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":939,"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/pages\/10\/revisions\/939"}],"wp:attachment":[{"href":"https:\/\/tglobalnetworks.com\/es\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}