{"id":19392,"date":"2025-08-12T16:21:18","date_gmt":"2025-08-12T16:21:18","guid":{"rendered":"https:\/\/hbtelecom.curitiba.br\/teste\/?page_id=19392"},"modified":"2025-08-15T17:01:01","modified_gmt":"2025-08-15T17:01:01","slug":"home","status":"publish","type":"page","link":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/home\/","title":{"rendered":"HB Telecom"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"19392\" class=\"elementor elementor-19392\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20e0f13 e-con-full e-flex e-con e-parent\" data-id=\"20e0f13\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a41869 elementor-widget elementor-widget-html\" data-id=\"5a41869\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- BANNER ESTILO TIM - COPIE DAQUI PARA O ELEMENTOR -->\r\n\r\n<!-- 1. PRIMEIRO: Cole este CSS no campo \"CSS Customizado\" do Elementor -->\r\n<style>\r\n        \/* VARI\u00c1VEIS CSS BANNER TIM STYLE *\/\r\n        :root {\r\n            --primary-red: #dc2626;\r\n            --gradient-red: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            --dark-bg: #0f0f0f;\r\n            --text-light: #f8fafc;\r\n            --text-gray: #6c757d;\r\n            --glass-bg: rgba(26, 26, 26, 0.8);\r\n        }\r\n\r\n        \/* SLIDER CONTAINER *\/\r\n        .hero-slider-container {\r\n            position: relative;\r\n            width: 100%;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .hero-slider-wrapper {\r\n            display: flex;\r\n            transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);\r\n            width: 200%;\r\n        }\r\n\r\n        .hero-slide {\r\n            width: 50%;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        \/* NAVIGATION CONTROLS *\/\r\n        .slider-navigation {\r\n            position: absolute;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            display: flex;\r\n            gap: 15px;\r\n            z-index: 100;\r\n            background: rgba(26, 26, 26, 0.9);\r\n            padding: 15px 25px;\r\n            border-radius: 25px;\r\n            backdrop-filter: blur(20px);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        .slider-dot {\r\n            width: 12px;\r\n            height: 12px;\r\n            border-radius: 50%;\r\n            background: rgba(255, 255, 255, 0.3);\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            position: relative;\r\n            border: 2px solid transparent;\r\n        }\r\n\r\n        .slider-dot.active {\r\n            background: #dc2626;\r\n            box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);\r\n            border-color: rgba(220, 38, 38, 0.3);\r\n            transform: scale(1.2);\r\n        }\r\n\r\n        .slider-dot:hover {\r\n            background: rgba(220, 38, 38, 0.7);\r\n            transform: scale(1.1);\r\n        }\r\n\r\n        \/* ARROW NAVIGATION *\/\r\n        .slider-arrow {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 50px;\r\n            height: 50px;\r\n            background: rgba(26, 26, 26, 0.9);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            z-index: 10;\r\n            backdrop-filter: blur(20px);\r\n            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);\r\n        }\r\n\r\n        .slider-arrow:hover {\r\n            background: rgba(220, 38, 38, 0.9);\r\n            border-color: rgba(220, 38, 38, 0.3);\r\n            transform: translateY(-50%) scale(1.1);\r\n            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);\r\n        }\r\n\r\n        .slider-arrow i {\r\n            color: #fff;\r\n            font-size: 1.2rem;\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .slider-arrow.prev {\r\n            left: 30px;\r\n        }\r\n\r\n        .slider-arrow.next {\r\n            right: 30px;\r\n        }\r\n\r\n        \/* AUTO-PLAY PROGRESS BAR *\/\r\n        .slider-progress {\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            height: 3px;\r\n            background: rgba(220, 38, 38, 0.3);\r\n            z-index: 100;\r\n            transition: width 0.1s linear;\r\n        }\r\n\r\n        .slider-progress::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, #dc2626, #ff4757);\r\n            width: 100%;\r\n            animation: progressBar 6s linear infinite;\r\n            animation-play-state: paused;\r\n        }\r\n\r\n        @keyframes progressBar {\r\n            0% { width: 0%; }\r\n            100% { width: 100%; }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN SLIDER *\/\r\n        @media (max-width: 768px) {\r\n            .hero-slider-container {\r\n                margin-bottom: 50px !important; \/* Espa\u00e7o para bullets *\/\r\n            }\r\n            \r\n            .slider-arrow {\r\n                display: none !important; \/* SEM SETAS *\/\r\n            }\r\n            \r\n            .slider-navigation {\r\n                bottom: -30px !important; \/* Posi\u00e7\u00e3o embaixo *\/\r\n                padding: 8px 16px !important; \/* Padding pequeno *\/\r\n                gap: 12px;\r\n                left: 50%;\r\n                transform: translateX(-50%);\r\n                background: rgba(0, 0, 0, 0.5) !important; \/* Fundo escuro vis\u00edvel *\/\r\n                border: none !important;\r\n                backdrop-filter: none !important;\r\n                box-shadow: none !important;\r\n                border-radius: 20px !important;\r\n                display: flex !important; \/* FOR\u00c7A APARECER *\/\r\n                z-index: 1000 !important;\r\n            }\r\n            \r\n            .slider-dot {\r\n                width: 8px !important; \/* BULLETS PEQUENOS *\/\r\n                height: 8px !important;\r\n                background: rgba(255, 255, 255, 0.7) !important; \/* BRANCO VIS\u00cdVEL *\/\r\n                border: none !important;\r\n                border-radius: 50% !important;\r\n                display: block !important;\r\n            }\r\n            \r\n            .slider-dot.active {\r\n                background: #dc2626 !important; \/* VERMELHO ATIVO *\/\r\n                box-shadow: 0 0 5px rgba(220, 38, 38, 0.8) !important; \/* SOMBRA LEVE *\/\r\n                transform: scale(1.3) !important; \/* DESTAQUE SUTIL *\/\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-slider-container {\r\n                overflow: visible !important; \/* PERMITE BULLETS APARECEREM FORA *\/\r\n                margin-bottom: 5px !important; \/* ESPA\u00c7O EMBAIXO APENAS NO MOBILE *\/\r\n                padding-bottom: 5px !important; \/* PADDING INTERNO APENAS NO MOBILE *\/\r\n            }\r\n            \r\n            .slider-arrow {\r\n                display: none; \/* Remove setas no mobile *\/\r\n            }\r\n            \r\n            .slider-navigation {\r\n                bottom: 20px !important; \/* MAIS PR\u00d3XIMO AINDA DOS BOT\u00d5ES *\/\r\n                background: none !important; \/* SEM FUNDO\/C\u00cdRCULO *\/\r\n                padding: 0 !important; \/* SEM PADDING *\/\r\n                border: none !important; \/* SEM BORDA *\/\r\n                border-radius: 0 !important; \/* SEM BORDER-RADIUS *\/\r\n                backdrop-filter: none !important; \/* SEM FILTRO *\/\r\n                box-shadow: none !important; \/* SEM SOMBRA *\/\r\n                display: flex !important; \/* FOR\u00c7A APARECER *\/\r\n                visibility: visible !important;\r\n                opacity: 1 !important;\r\n                position: absolute !important;\r\n                left: 50% !important;\r\n                transform: translateX(-50%) !important;\r\n                z-index: 50 !important; \/* Z-INDEX BAIXO PARA FICAR ABAIXO DO MENUBAR *\/\r\n                gap: 8px !important; \/* ESPA\u00c7AMENTO PEQUENO *\/\r\n                border: 2px solid #000000 !important; \/* Borda preta para destacar *\/\r\n            }\r\n            \r\n            .slider-dot {\r\n                width: 12px !important; \/* Maiores para ver melhor *\/\r\n                height: 12px !important;\r\n                background: #dc2626 !important; \/* VERMELHO SEMPRE *\/\r\n                border-radius: 50% !important;\r\n                display: block !important; \/* FOR\u00c7A APARECER *\/\r\n                visibility: visible !important;\r\n                opacity: 1 !important;\r\n                cursor: pointer !important;\r\n                border: 2px solid #ffffff !important; \/* Borda branca *\/\r\n                box-shadow: 0 0 5px rgba(220, 38, 38, 0.8) !important; \/* Sombra vermelha *\/\r\n            }\r\n            \r\n            .slider-dot.active {\r\n                background: #ff0000 !important; \/* VERMELHO MAIS FORTE *\/\r\n                border-color: #ffffff !important;\r\n                transform: scale(1.5) !important; \/* Maior quando ativo *\/\r\n                box-shadow: 0 0 15px rgba(255, 0, 0, 1) !important; \/* Sombra bem forte *\/\r\n            }\r\n            \r\n            \/* Mais espa\u00e7o para acomodar bullets *\/\r\n            .hero-slider-container {\r\n                margin-bottom: 80px !important;\r\n            }\r\n            \r\n            \/* Fundo \u00fanico para mobile *\/\r\n            .hero-banner-tim,\r\n            .hero-banner-combo {\r\n                background: #1a1a1a !important;\r\n            }\r\n            \r\n            \/* DEBUG - FOR\u00c7A BULLETS APARECEREM DE QUALQUER FORMA *\/\r\n            .slider-navigation,\r\n            .slider-dot {\r\n                display: block !important;\r\n                visibility: visible !important;\r\n                opacity: 1 !important;\r\n            }\r\n            \r\n            .slider-navigation {\r\n                display: flex !important;\r\n            }\r\n        }\r\n\r\n        \/* MELHORIAS PARA DISPOSITIVOS M\u00d3VEIS *\/\r\n        @media (hover: none) and (pointer: coarse) {\r\n            .slider-dot {\r\n                -webkit-tap-highlight-color: transparent;\r\n                user-select: none;\r\n                touch-action: manipulation;\r\n            }\r\n            \r\n            .slider-dot:active {\r\n                background: #dc2626 !important;\r\n            }\r\n            \r\n            \/* Melhorar \u00e1rea de swipe do slider *\/\r\n            .hero-slider-container {\r\n                -webkit-overflow-scrolling: touch;\r\n                scroll-behavior: smooth;\r\n            }\r\n        }\r\n\r\n        \/* BANNER HERO SECTION TIM STYLE *\/\r\n        .hero-banner-tim {\r\n            position: relative;\r\n            min-height: 70vh;\r\n            background: #1a1a1a; \/* FUNDO S\u00d3LIDO \u00daNICO *\/\r\n            overflow: hidden;\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 40px 0;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* BACKGROUND ANIMATED ELEMENTS *\/\r\n        .hero-bg-tim {\r\n            display: none; \/* OCULTAR ELEMENTOS DECORATIVOS *\/\r\n        }\r\n\r\n        .bg-circle-tim {\r\n            display: none; \/* OCULTAR C\u00cdRCULOS *\/\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY *\/\r\n        .grid-overlay-tim {\r\n            display: none; \/* OCULTAR GRID *\/\r\n        }\r\n\r\n        @keyframes gridMoveTim {\r\n            0% { transform: translate(0, 0); }\r\n            100% { transform: translate(60px, 60px); }\r\n        }\r\n\r\n        @keyframes floatTim {\r\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.4; }\r\n            33% { transform: translateY(-25px) scale(1.05) rotate(120deg); opacity: 0.6; }\r\n            66% { transform: translateY(-10px) scale(0.95) rotate(240deg); opacity: 0.5; }\r\n        }\r\n\r\n        \/* MAIN CONTAINER *\/\r\n        .hero-container-tim {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 40px 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            display: grid;\r\n            grid-template-columns: 1.2fr 0.8fr;\r\n            gap: 60px;\r\n            align-items: center;\r\n        }\r\n\r\n        \/* LEFT SIDE - CONTENT *\/\r\n        .hero-content-tim {\r\n            padding-right: 20px;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE *\/\r\n        .announcement-badge-tim {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 10px 24px;\r\n            border-radius: 25px;\r\n            font-size: 0.9rem;\r\n            font-weight: 700;\r\n            margin-bottom: 30px;\r\n            animation: badgeEntranceTim 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .announcement-badge-tim i {\r\n            color: #ffd700;\r\n            animation: starSpinTim 3s linear infinite;\r\n        }\r\n\r\n        @keyframes badgeEntranceTim {\r\n            0% { opacity: 0; transform: translateX(-30px) scale(0.8); }\r\n            100% { opacity: 1; transform: translateX(0) scale(1); }\r\n        }\r\n\r\n        @keyframes starSpinTim {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* TITLE *\/\r\n        .hero-title-tim {\r\n            font-size: 2.4rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 15px !important;\r\n            line-height: 1.2 !important;\r\n            animation: titleEntranceTim 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        .title-highlight-tim {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: titleGradientTim 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .title-highlight-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -3px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: titleUnderline 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes titleUnderline {\r\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\r\n            50% { opacity: 1; transform: scaleX(1.05); }\r\n        }\r\n\r\n        @keyframes titleGradientTim {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes titleEntranceTim {\r\n            0% { opacity: 0; transform: translateX(-50px); }\r\n            100% { opacity: 1; transform: translateX(0); }\r\n        }\r\n\r\n        \/* SUBTITLE *\/\r\n        .hero-subtitle-tim {\r\n            font-size: 1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 20px !important;\r\n            animation: subtitleEntranceTim 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 95%;\r\n        }\r\n\r\n        \/* QUEBRA DE LINHA APENAS NO DESKTOP *\/\r\n        .desktop-break {\r\n            display: inline;\r\n        }\r\n\r\n        @keyframes subtitleEntranceTim {\r\n            0% { opacity: 0; transform: translateX(-30px); }\r\n            100% { opacity: 1; transform: translateX(0); }\r\n        }\r\n\r\n        \/* PRICE SECTION - ESTILO TIM *\/\r\n        .price-section-tim {\r\n            background: rgba(26, 26, 26, 0.9);\r\n            border: 1px solid rgba(255, 255, 255, 0.06);\r\n            border-radius: 20px;\r\n            padding: 18px 16px;\r\n            margin: 20px 0;\r\n            max-width: 400px;\r\n            width: 100%;\r\n            animation: priceEntranceTim 1s ease-out 0.8s both;\r\n            backdrop-filter: blur(25px);\r\n            position: relative;\r\n            box-shadow: \r\n                0 6px 25px rgba(0, 0, 0, 0.15),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.04);\r\n        }\r\n\r\n\r\n\r\n        .price-header-tim {\r\n            text-align: center;\r\n            margin-bottom: 14px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .price-label-tim {\r\n            font-size: 1rem;\r\n            color: rgba(248, 250, 252, 1);\r\n            margin-bottom: 6px;\r\n            font-weight: 500;\r\n            text-transform: lowercase;\r\n            letter-spacing: 0.8px;\r\n            font-family: 'Inter', sans-serif;\r\n            line-height: 1;\r\n        }\r\n\r\n        .price-main-tim {\r\n            display: flex;\r\n            align-items: baseline;\r\n            justify-content: center;\r\n            gap: 16px;\r\n            margin-bottom: 14px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .speed-highlight-tim {\r\n            font-size: 2.1rem !important;\r\n            font-weight: 700 !important;\r\n            color: #dc2626 !important;\r\n            font-family: 'Inter', sans-serif;\r\n            letter-spacing: -0.02em;\r\n            line-height: 1;\r\n        }\r\n\r\n        .price-divider-tim {\r\n            width: 1px;\r\n            height: 30px;\r\n            background: rgba(255, 255, 255, 0.2);\r\n            border-radius: 1px;\r\n            align-self: stretch;\r\n        }\r\n\r\n        .price-value-container-tim {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            justify-content: flex-end;\r\n        }\r\n\r\n        .price-value-tim {\r\n            font-size: 1.6rem !important;\r\n            font-weight: 700 !important;\r\n            color: var(--text-light) !important;\r\n            margin-bottom: 0 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            letter-spacing: -0.02em;\r\n            line-height: 1;\r\n            display: flex;\r\n            align-items: baseline;\r\n            justify-content: flex-start;\r\n            gap: 4px;\r\n        }\r\n\r\n        .price-prefix-tim {\r\n            font-size: 0.7rem;\r\n            color: rgba(248, 250, 252, 0.5);\r\n            font-weight: 400;\r\n            text-transform: lowercase;\r\n            letter-spacing: 0.3px;\r\n            margin-bottom: 2px;\r\n            display: block;\r\n            font-family: 'Inter', sans-serif;\r\n            text-align: left;\r\n            line-height: 1;\r\n        }\r\n\r\n        .price-period-tim {\r\n            font-size: 0.8rem;\r\n            color: var(--text-light);\r\n            font-weight: 400;\r\n            letter-spacing: 0.3px;\r\n            margin-left: -2px;\r\n        }\r\n\r\n        .price-details-tim {\r\n            color: rgba(248, 250, 252, 0.7);\r\n            font-size: 0.75rem;\r\n            line-height: 1.5;\r\n            text-align: center;\r\n            padding: 14px 20px;\r\n            background: rgba(255, 255, 255, 0.02);\r\n            border-radius: 12px;\r\n            border: 1px solid rgba(255, 255, 255, 0.04);\r\n            font-family: 'Inter', sans-serif;\r\n            font-weight: 400;\r\n        }\r\n\r\n        .highlight-benefit {\r\n            color: #4ade80 !important;\r\n            font-weight: 500;\r\n        }\r\n\r\n        @keyframes priceEntranceTim {\r\n            0% { opacity: 0; transform: translateX(-40px) scale(0.95); }\r\n            100% { opacity: 1; transform: translateX(0) scale(1); }\r\n        }\r\n\r\n        \/* HIGHLIGHTS COMPACT DENTRO DO CARD *\/\r\n        .highlights-compact {\r\n            display: flex;\r\n            gap: 10px;\r\n            flex-wrap: wrap;\r\n            margin: 10px 0 0 0;\r\n            animation: highlightsEntrance 1s ease-out 1s both;\r\n            justify-content: center;\r\n        }\r\n\r\n        .highlight-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            background: rgba(255, 255, 255, 0.06);\r\n            padding: 6px 10px;\r\n            border-radius: 10px;\r\n            font-size: 0.75rem;\r\n            color: var(--text-light);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            font-family: 'Inter', sans-serif;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .highlight-item i {\r\n            color: #4ade80;\r\n            font-size: 0.8rem;\r\n        }\r\n\r\n        \/* \u00cdCONES VERMELHOS PARA VELOCIDADE E WIFI *\/\r\n        .highlight-item.red-icon i {\r\n            color: #dc2626;\r\n        }\r\n\r\n        @keyframes highlightsEntrance {\r\n            0% { opacity: 0; transform: translateY(20px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* BUTTONS *\/\r\n        .hero-buttons-tim {\r\n            display: flex;\r\n            gap: 15px;\r\n            margin-top: 25px;\r\n            animation: buttonsEntranceTim 1s ease-out 1.2s both;\r\n        }\r\n\r\n        @keyframes buttonsEntranceTim {\r\n            0% { opacity: 0; transform: translateX(-30px); }\r\n            100% { opacity: 1; transform: translateX(0); }\r\n        }\r\n\r\n        .btn-tim {\r\n            position: relative;\r\n            display: inline-flex !important;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 12px 24px !important;\r\n            border: none !important;\r\n            border-radius: 8px !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            font-weight: 500 !important;\r\n            font-size: 0.9rem !important;\r\n            text-decoration: none !important;\r\n            cursor: pointer;\r\n            transition: all 0.2s ease !important;\r\n            min-width: 140px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .btn-primary-tim {\r\n            background: var(--gradient-red) !important;\r\n            color: white !important;\r\n            box-shadow: 0 10px 35px rgba(220, 38, 38, 0.4) !important;\r\n        }\r\n\r\n        .btn-primary-tim:hover {\r\n            transform: translateY(-2px) !important;\r\n            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;\r\n            color: white !important;\r\n        }\r\n\r\n        .btn-secondary-tim {\r\n            background: transparent !important;\r\n            border: 1px solid rgba(255, 255, 255, 0.2) !important;\r\n            color: var(--text-light) !important;\r\n        }\r\n\r\n        .btn-secondary-tim:hover {\r\n            background: rgba(220, 38, 38, 0.1) !important;\r\n            border-color: rgba(220, 38, 38, 0.3) !important;\r\n            color: white !important;\r\n            transform: translateY(-2px) !important;\r\n        }\r\n\r\n        \/* RIGHT SIDE - IMAGE *\/\r\n        .hero-image-tim {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            animation: imageEntranceTim 1s ease-out 0.8s both;\r\n        }\r\n\r\n        @keyframes imageEntranceTim {\r\n            0% { opacity: 0; transform: translateX(50px) scale(0.9); }\r\n            100% { opacity: 1; transform: translateX(0) scale(1); }\r\n        }\r\n\r\n        \/* MOCK IMAGE CONTAINER *\/\r\n        .image-container-tim {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 380px;\r\n            height: 320px;\r\n            background: linear-gradient(135deg, \r\n                rgba(220, 38, 38, 0.1) 0%, \r\n                rgba(26, 26, 26, 0.8) 25%,\r\n                rgba(255, 107, 107, 0.08) 50%,\r\n                rgba(26, 26, 26, 0.9) 75%,\r\n                rgba(220, 38, 38, 0.12) 100%);\r\n            border: 1px solid rgba(220, 38, 38, 0.2);\r\n            border-radius: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            backdrop-filter: blur(20px);\r\n            overflow: hidden;\r\n            box-shadow: \r\n                0 15px 40px rgba(220, 38, 38, 0.15),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .image-container-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, \r\n                transparent 0%,\r\n                rgba(220, 38, 38, 0.05) 25%, \r\n                rgba(255, 107, 107, 0.08) 50%, \r\n                rgba(220, 38, 38, 0.05) 75%,\r\n                transparent 100%);\r\n            animation: imageGlow 4s ease-in-out infinite;\r\n        }\r\n\r\n        .image-container-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: conic-gradient(\r\n                transparent,\r\n                rgba(220, 38, 38, 0.1),\r\n                transparent,\r\n                rgba(255, 107, 107, 0.08),\r\n                transparent\r\n            );\r\n            animation: rotateBorder 8s linear infinite;\r\n        }\r\n\r\n        @keyframes rotateBorder {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        @keyframes imageGlow {\r\n            0%, 100% { opacity: 0.6; transform: scale(1); }\r\n            50% { opacity: 1; transform: scale(1.02); }\r\n        }\r\n\r\n        .image-placeholder-tim {\r\n            position: relative;\r\n            z-index: 2;\r\n            text-align: center;\r\n            color: var(--text-light);\r\n            background: rgba(26, 26, 26, 0.5);\r\n            padding: 30px;\r\n            border-radius: 15px;\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .image-placeholder-tim i {\r\n            font-size: 3rem;\r\n            color: #dc2626;\r\n            margin-bottom: 12px;\r\n            animation: iconFloat 3s ease-in-out infinite;\r\n            filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.3));\r\n        }\r\n\r\n        @keyframes iconFloat {\r\n            0%, 100% { transform: translateY(0) rotate(0deg); }\r\n            25% { transform: translateY(-8px) rotate(5deg); }\r\n            50% { transform: translateY(-4px) rotate(-3deg); }\r\n            75% { transform: translateY(-10px) rotate(2deg); }\r\n        }\r\n\r\n        .image-placeholder-tim h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            margin-bottom: 8px;\r\n            color: var(--text-light);\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .image-placeholder-tim p {\r\n            color: var(--text-gray);\r\n            font-size: 0.9rem;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        \/* FLOATING ELEMENTS *\/\r\n        .floating-element {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            animation: floatingElements 8s ease-in-out infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        .floating-element:nth-child(1) {\r\n            width: 8px;\r\n            height: 8px;\r\n            top: 15%;\r\n            right: 20%;\r\n            background: linear-gradient(135deg, #4ade80, #22c55e);\r\n            animation-delay: 0s;\r\n            box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);\r\n        }\r\n\r\n        .floating-element:nth-child(2) {\r\n            width: 12px;\r\n            height: 12px;\r\n            bottom: 25%;\r\n            right: 30%;\r\n            background: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            animation-delay: 2s;\r\n            box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);\r\n        }\r\n\r\n        .floating-element:nth-child(3) {\r\n            width: 6px;\r\n            height: 6px;\r\n            top: 45%;\r\n            right: 10%;\r\n            background: linear-gradient(135deg, #f59e0b, #d97706);\r\n            animation-delay: 4s;\r\n            box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);\r\n        }\r\n\r\n        .floating-element:nth-child(4) {\r\n            width: 10px;\r\n            height: 10px;\r\n            top: 70%;\r\n            right: 25%;\r\n            background: linear-gradient(135deg, #8b5cf6, #7c3aed);\r\n            animation-delay: 6s;\r\n            box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);\r\n        }\r\n\r\n        @keyframes floatingElements {\r\n            0%, 100% { \r\n                transform: translateY(0) translateX(0) scale(1); \r\n                opacity: 0.6; \r\n            }\r\n            25% { \r\n                transform: translateY(-20px) translateX(5px) scale(1.2); \r\n                opacity: 0.8; \r\n            }\r\n            50% { \r\n                transform: translateY(-10px) translateX(-8px) scale(0.9); \r\n                opacity: 1; \r\n            }\r\n            75% { \r\n                transform: translateY(-25px) translateX(3px) scale(1.1); \r\n                opacity: 0.7; \r\n            }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN *\/\r\n        @media (max-width: 1024px) {\r\n            .hero-container-tim {\r\n                grid-template-columns: 1fr;\r\n                gap: 40px;\r\n                text-align: center;\r\n                padding: 30px 25px;\r\n            }\r\n            \r\n            .hero-content-tim {\r\n                padding-right: 0;\r\n                order: 1;\r\n            }\r\n            \r\n            .hero-image-tim {\r\n                order: 2;\r\n            }\r\n            \r\n            .image-container-tim {\r\n                max-width: 320px;\r\n                height: 280px;\r\n                margin: 0 auto;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .hero-banner-tim {\r\n                min-height: 60vh;\r\n                padding: 60px 0 40px 0;\r\n            }\r\n            \r\n            .hero-container-tim {\r\n                padding: 40px 25px 30px 25px;\r\n            }\r\n            \r\n            .announcement-badge-tim {\r\n                margin-top: 20px;\r\n                margin-bottom: 25px;\r\n            }\r\n            \r\n            .hero-title-tim {\r\n                font-size: 2rem !important;\r\n            }\r\n            \r\n            .hero-subtitle-tim {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            \/* ESCONDER QUEBRA DE LINHA NO MOBILE\/TABLET *\/\r\n            .desktop-break {\r\n                display: none;\r\n            }\r\n            \r\n            .price-value-tim {\r\n                font-size: 1.8rem !important;\r\n            }\r\n            \r\n            .speed-highlight-tim {\r\n                font-size: 1.7rem !important;\r\n            }\r\n            \r\n            .hero-buttons-tim {\r\n                flex-direction: row;\r\n                justify-content: center;\r\n                gap: 12px;\r\n                margin-top: 25px;\r\n                padding: 0 10px;\r\n            }\r\n            \r\n            .btn-tim {\r\n                min-width: 140px !important;\r\n                flex: 1;\r\n                max-width: 160px;\r\n            }\r\n            \r\n            .image-container-tim {\r\n                max-width: 280px;\r\n                height: 240px;\r\n            }\r\n            \r\n            .highlights-compact {\r\n                justify-content: center;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-banner-tim {\r\n                min-height: 10vh !important; \/* ALTURA MENOR NO MOBILE *\/\r\n                padding: 30px 0 !important;\r\n            }\r\n            \r\n            .hero-container-tim {\r\n                padding: 35px 20px 25px 20px;\r\n            }\r\n            \r\n            .announcement-badge-tim {\r\n                margin-top: 25px;\r\n                margin-bottom: 20px;\r\n                padding: 8px 20px;\r\n                font-size: 0.85rem;\r\n            }\r\n            \r\n            .hero-title-tim {\r\n                font-size: 1.8rem !important;\r\n            }\r\n            \r\n            .price-value-tim {\r\n                font-size: 1.6rem !important;\r\n            }\r\n            \r\n            .speed-highlight-tim {\r\n                font-size: 1.6rem !important;\r\n            }\r\n            \r\n            .btn-tim {\r\n                min-width: 140px !important;\r\n                padding: 12px 20px !important;\r\n                font-size: 0.85rem !important;\r\n                flex: 1;\r\n                max-width: 170px;\r\n            }\r\n            \r\n            .image-container-tim {\r\n                max-width: 260px;\r\n                height: 220px;\r\n            }\r\n            \r\n            .image-placeholder-tim {\r\n                padding: 25px 20px;\r\n            }\r\n            \r\n            .image-placeholder-tim i {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .highlights-compact {\r\n                gap: 10px;\r\n            }\r\n            \r\n            .highlight-item {\r\n                font-size: 0.8rem;\r\n                padding: 6px 10px;\r\n            }\r\n            \r\n            \/* ESCONDER CARD COMPLETO DA IMAGEM NO MOBILE *\/\r\n            .hero-image-tim {\r\n                display: none;\r\n            }\r\n            \r\n            \/* FOR\u00c7A FUNDO \u00daNICO NO MOBILE *\/\r\n            .hero-banner-tim,\r\n            .hero-banner-combo {\r\n                background: #1a1a1a !important;\r\n                background-image: none !important;\r\n                background-attachment: initial !important;\r\n            }\r\n        }\r\n\r\n        \/* SLIDER CONTAINER *\/\r\n        .hero-slider-container {\r\n            position: relative;\r\n            width: 100%;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .hero-slider-wrapper {\r\n            display: flex;\r\n            transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);\r\n            width: 200%;\r\n        }\r\n\r\n        .hero-slide {\r\n            width: 50%;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n\r\n\r\n        \/* AUTO-PLAY PROGRESS BAR *\/\r\n        .slider-progress {\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            height: 3px;\r\n            background: rgba(220, 38, 38, 0.3);\r\n            z-index: 100;\r\n            transition: width 0.1s linear;\r\n        }\r\n\r\n        .slider-progress::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, #dc2626, #ff4757);\r\n            width: 100%;\r\n            animation: progressBar 6s linear infinite;\r\n            animation-play-state: paused;\r\n        }\r\n\r\n        @keyframes progressBar {\r\n            0% { width: 0%; }\r\n            100% { width: 100%; }\r\n        }\r\n\r\n        \/* SEGUNDO SLIDER - COMBO INTERNET + TV (CLONADO DO PRIMEIRO) *\/\r\n        .hero-banner-combo {\r\n            position: relative;\r\n            min-height: 70vh;\r\n            background: #1a1a1a; \/* FUNDO S\u00d3LIDO \u00daNICO IGUAL AO TIM *\/\r\n            overflow: hidden;\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 40px 0;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* BACKGROUND ANIMATED ELEMENTS COMBO *\/\r\n        .hero-bg-combo {\r\n            display: none; \/* OCULTAR ELEMENTOS DECORATIVOS *\/\r\n        }\r\n\r\n        .bg-circle-combo {\r\n            display: none; \/* OCULTAR C\u00cdRCULOS *\/\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY COMBO *\/\r\n        .grid-overlay-combo {\r\n            display: none; \/* OCULTAR GRID *\/\r\n        }\r\n\r\n        \/* MAIN CONTAINER COMBO *\/\r\n        .hero-container-combo {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 40px 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            display: grid;\r\n            grid-template-columns: 1.2fr 0.8fr;\r\n            gap: 60px;\r\n            align-items: center;\r\n        }\r\n\r\n        \/* LEFT SIDE - CONTENT COMBO *\/\r\n        .hero-content-combo {\r\n            padding-right: 20px;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE COMBO *\/\r\n        .announcement-badge-combo {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 10px 24px;\r\n            border-radius: 25px;\r\n            font-size: 0.9rem;\r\n            font-weight: 700;\r\n            margin-bottom: 30px;\r\n            animation: badgeEntranceTim 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .announcement-badge-combo i {\r\n            color: #ffd700;\r\n            animation: starSpinTim 3s linear infinite;\r\n        }\r\n\r\n        \/* TITLE COMBO *\/\r\n        .hero-title-combo {\r\n            font-size: 2.4rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 15px !important;\r\n            line-height: 1.2 !important;\r\n            animation: titleEntranceTim 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        .title-highlight-combo {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: titleGradientTim 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .title-highlight-combo::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -3px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: titleUnderline 2s ease-in-out infinite;\r\n        }\r\n\r\n        \/* SUBTITLE COMBO *\/\r\n        .hero-subtitle-combo {\r\n            font-size: 1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 20px !important;\r\n            animation: subtitleEntranceTim 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 95%;\r\n        }\r\n\r\n        \/* PRICE SECTION COMBO *\/\r\n        .price-section-combo {\r\n            background: rgba(26, 26, 26, 0.9);\r\n            border: 1px solid rgba(255, 255, 255, 0.06);\r\n            border-radius: 20px;\r\n            padding: 18px 16px;\r\n            margin: 20px 0;\r\n            max-width: 400px;\r\n            width: 100%;\r\n            animation: priceEntranceTim 1s ease-out 0.8s both;\r\n            backdrop-filter: blur(25px);\r\n            position: relative;\r\n            box-shadow: \r\n                0 6px 25px rgba(0, 0, 0, 0.15),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.04);\r\n        }\r\n\r\n        .price-header-combo {\r\n            text-align: center;\r\n            margin-bottom: 14px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .price-label-combo {\r\n            font-size: 1rem;\r\n            color: rgba(248, 250, 252, 1);\r\n            margin-bottom: 6px;\r\n            font-weight: 500;\r\n            text-transform: lowercase;\r\n            letter-spacing: 0.8px;\r\n            font-family: 'Inter', sans-serif;\r\n            line-height: 1;\r\n        }\r\n\r\n        .price-main-combo {\r\n            display: flex;\r\n            align-items: baseline;\r\n            justify-content: center;\r\n            gap: 16px;\r\n            margin-bottom: 14px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .speed-highlight-combo {\r\n            font-size: 2.1rem !important;\r\n            font-weight: 700 !important;\r\n            color: #dc2626 !important;\r\n            font-family: 'Inter', sans-serif;\r\n            letter-spacing: -0.02em;\r\n            line-height: 1;\r\n        }\r\n\r\n        .price-divider-combo {\r\n            width: 1px;\r\n            height: 30px;\r\n            background: rgba(255, 255, 255, 0.2);\r\n            border-radius: 1px;\r\n            align-self: stretch;\r\n        }\r\n\r\n        .price-value-container-combo {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            justify-content: flex-end;\r\n        }\r\n\r\n        .price-value-combo {\r\n            font-size: 1.6rem !important;\r\n            font-weight: 700 !important;\r\n            color: var(--text-light) !important;\r\n            margin-bottom: 0 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            letter-spacing: -0.02em;\r\n            line-height: 1;\r\n            display: flex;\r\n            align-items: baseline;\r\n            justify-content: flex-start;\r\n            gap: 4px;\r\n        }\r\n\r\n        .price-period-combo {\r\n            font-size: 0.8rem;\r\n            color: var(--text-light);\r\n            font-weight: 400;\r\n            letter-spacing: 0.3px;\r\n            margin-left: -2px;\r\n        }\r\n\r\n        \/* HIGHLIGHTS COMPACT COMBO *\/\r\n        .highlights-compact-combo {\r\n            display: flex;\r\n            gap: 10px;\r\n            flex-wrap: wrap;\r\n            margin: 10px 0 0 0;\r\n            animation: highlightsEntrance 1s ease-out 1s both;\r\n            justify-content: center;\r\n        }\r\n\r\n        .highlight-item-combo {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            background: rgba(255, 255, 255, 0.06);\r\n            padding: 6px 10px;\r\n            border-radius: 10px;\r\n            font-size: 0.75rem;\r\n            color: var(--text-light);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            font-family: 'Inter', sans-serif;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .highlight-item-combo i {\r\n            color: #4ade80;\r\n            font-size: 0.8rem;\r\n        }\r\n\r\n        .highlight-item-combo.red-icon i {\r\n            color: #dc2626;\r\n        }\r\n\r\n        \/* BUTTONS COMBO *\/\r\n        .hero-buttons-combo {\r\n            display: flex;\r\n            gap: 15px;\r\n            margin-top: 25px;\r\n            animation: buttonsEntranceTim 1s ease-out 1.2s both;\r\n        }\r\n\r\n        .btn-combo {\r\n            position: relative;\r\n            display: inline-flex !important;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 12px 24px !important;\r\n            border: none !important;\r\n            border-radius: 8px !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            font-weight: 500 !important;\r\n            font-size: 0.9rem !important;\r\n            text-decoration: none !important;\r\n            cursor: pointer;\r\n            transition: all 0.2s ease !important;\r\n            min-width: 140px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .btn-primary-combo {\r\n            background: var(--gradient-red) !important;\r\n            color: white !important;\r\n            box-shadow: 0 10px 35px rgba(220, 38, 38, 0.4) !important;\r\n        }\r\n\r\n        .btn-primary-combo:hover {\r\n            transform: translateY(-2px) !important;\r\n            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;\r\n            color: white !important;\r\n        }\r\n\r\n        .btn-secondary-combo {\r\n            background: transparent !important;\r\n            border: 1px solid rgba(255, 255, 255, 0.2) !important;\r\n            color: var(--text-light) !important;\r\n        }\r\n\r\n        .btn-secondary-combo:hover {\r\n            background: rgba(220, 38, 38, 0.1) !important;\r\n            border-color: rgba(220, 38, 38, 0.3) !important;\r\n            color: white !important;\r\n            transform: translateY(-2px) !important;\r\n        }\r\n\r\n        \/* RIGHT SIDE - IMAGE COMBO *\/\r\n        .hero-image-combo {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            animation: imageEntranceTim 1s ease-out 0.8s both;\r\n        }\r\n\r\n        .image-container-combo {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 380px;\r\n            height: 320px;\r\n            background: linear-gradient(135deg, \r\n                rgba(220, 38, 38, 0.1) 0%, \r\n                rgba(26, 26, 26, 0.8) 25%,\r\n                rgba(255, 107, 107, 0.08) 50%,\r\n                rgba(26, 26, 26, 0.9) 75%,\r\n                rgba(220, 38, 38, 0.12) 100%);\r\n            border: 1px solid rgba(220, 38, 38, 0.2);\r\n            border-radius: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            backdrop-filter: blur(20px);\r\n            overflow: hidden;\r\n            box-shadow: \r\n                0 15px 40px rgba(220, 38, 38, 0.15),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .image-container-combo::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, \r\n                transparent 0%,\r\n                rgba(220, 38, 38, 0.05) 25%, \r\n                rgba(255, 107, 107, 0.08) 50%, \r\n                rgba(220, 38, 38, 0.05) 75%,\r\n                transparent 100%);\r\n            animation: imageGlow 4s ease-in-out infinite;\r\n        }\r\n\r\n        .image-container-combo::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: conic-gradient(\r\n                transparent,\r\n                rgba(220, 38, 38, 0.1),\r\n                transparent,\r\n                rgba(255, 107, 107, 0.08),\r\n                transparent\r\n            );\r\n            animation: rotateBorder 8s linear infinite;\r\n        }\r\n\r\n        .image-placeholder-combo {\r\n            position: relative;\r\n            z-index: 2;\r\n            text-align: center;\r\n            color: var(--text-light);\r\n            background: rgba(26, 26, 26, 0.5);\r\n            padding: 30px;\r\n            border-radius: 15px;\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .image-placeholder-combo i {\r\n            font-size: 3rem;\r\n            color: #dc2626;\r\n            margin-bottom: 12px;\r\n            animation: iconFloat 3s ease-in-out infinite;\r\n            filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.3));\r\n        }\r\n\r\n        .image-placeholder-combo h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            margin-bottom: 8px;\r\n            color: var(--text-light);\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .image-placeholder-combo p {\r\n            color: var(--text-gray);\r\n            font-size: 0.9rem;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        \/* FLOATING ELEMENTS COMBO *\/\r\n        .floating-element-combo {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            animation: floatingElements 8s ease-in-out infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        .floating-element-combo:nth-child(1) {\r\n            width: 8px;\r\n            height: 8px;\r\n            top: 15%;\r\n            right: 20%;\r\n            background: linear-gradient(135deg, #4ade80, #22c55e);\r\n            animation-delay: 0s;\r\n            box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);\r\n        }\r\n\r\n        .floating-element-combo:nth-child(2) {\r\n            width: 12px;\r\n            height: 12px;\r\n            bottom: 25%;\r\n            right: 30%;\r\n            background: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            animation-delay: 2s;\r\n            box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);\r\n        }\r\n\r\n        .floating-element-combo:nth-child(3) {\r\n            width: 6px;\r\n            height: 6px;\r\n            top: 45%;\r\n            right: 10%;\r\n            background: linear-gradient(135deg, #f59e0b, #d97706);\r\n            animation-delay: 4s;\r\n            box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);\r\n        }\r\n\r\n        .floating-element-combo:nth-child(4) {\r\n            width: 10px;\r\n            height: 10px;\r\n            top: 70%;\r\n            right: 25%;\r\n            background: linear-gradient(135deg, #8b5cf6, #7c3aed);\r\n            animation-delay: 6s;\r\n            box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN COMBO *\/\r\n        @media (max-width: 1024px) {\r\n            .hero-container-combo {\r\n                grid-template-columns: 1fr;\r\n                gap: 40px;\r\n                text-align: center;\r\n                padding: 30px 25px;\r\n            }\r\n            \r\n            .hero-content-combo {\r\n                padding-right: 0;\r\n                order: 1;\r\n            }\r\n            \r\n            .hero-image-combo {\r\n                order: 2;\r\n            }\r\n            \r\n            .image-container-combo {\r\n                max-width: 320px;\r\n                height: 280px;\r\n                margin: 0 auto;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .hero-banner-combo {\r\n                min-height: 60vh;\r\n                padding: 60px 0 40px 0;\r\n            }\r\n            \r\n            .hero-container-combo {\r\n                padding: 40px 25px 30px 25px;\r\n            }\r\n            \r\n            .announcement-badge-combo {\r\n                margin-top: 20px;\r\n                margin-bottom: 25px;\r\n            }\r\n            \r\n            .hero-title-combo {\r\n                font-size: 2rem !important;\r\n            }\r\n            \r\n            .hero-subtitle-combo {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .price-value-combo {\r\n                font-size: 1.8rem !important;\r\n            }\r\n            \r\n            .speed-highlight-combo {\r\n                font-size: 1.7rem !important;\r\n            }\r\n            \r\n            .hero-buttons-combo {\r\n                flex-direction: row;\r\n                justify-content: center;\r\n                gap: 12px;\r\n                margin-top: 25px;\r\n                padding: 0 10px;\r\n            }\r\n            \r\n            .btn-combo {\r\n                min-width: 140px !important;\r\n                flex: 1;\r\n                max-width: 160px;\r\n            }\r\n            \r\n            .image-container-combo {\r\n                max-width: 280px;\r\n                height: 240px;\r\n            }\r\n            \r\n            .highlights-compact-combo {\r\n                justify-content: center;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-container-combo {\r\n                padding: 35px 20px 25px 20px;\r\n            }\r\n            \r\n            .announcement-badge-combo {\r\n                margin-top: 25px;\r\n                margin-bottom: 20px;\r\n                padding: 8px 20px;\r\n                font-size: 0.85rem;\r\n            }\r\n            \r\n            .hero-title-combo {\r\n                font-size: 1.8rem !important;\r\n            }\r\n            \r\n            .price-value-combo {\r\n                font-size: 1.6rem !important;\r\n            }\r\n            \r\n            .speed-highlight-combo {\r\n                font-size: 1.6rem !important;\r\n            }\r\n            \r\n            .btn-combo {\r\n                min-width: 140px !important;\r\n                padding: 12px 20px !important;\r\n                font-size: 0.85rem !important;\r\n                flex: 1;\r\n                max-width: 170px;\r\n            }\r\n            \r\n            .image-container-combo {\r\n                max-width: 260px;\r\n                height: 220px;\r\n            }\r\n            \r\n            .image-placeholder-combo {\r\n                padding: 25px 20px;\r\n            }\r\n            \r\n            .image-placeholder-combo i {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .highlights-compact-combo {\r\n                gap: 10px;\r\n            }\r\n            \r\n            .highlight-item-combo {\r\n                font-size: 0.8rem;\r\n                padding: 6px 10px;\r\n            }\r\n            \r\n            \/* ESCONDER CARD COMPLETO DA IMAGEM NO MOBILE COMBO *\/\r\n            .hero-image-combo {\r\n                display: none;\r\n            }\r\n        }\r\n        \r\n        \/* UNIFORMIZAR ALTURA DOS SLIDERS EM MOBILE *\/\r\n        @media (max-width: 480px) {\r\n            .hero-banner-combo {\r\n                min-height: 10vh !important; \/* MESMA ALTURA DO PRIMEIRO SLIDER *\/\r\n                padding: 30px 0 !important; \/* MESMO PADDING DO PRIMEIRO SLIDER *\/\r\n            }\r\n        }\r\n        \r\n        .hero-bg-combo {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .bg-circle-combo {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(220, 38, 38, 0.12) 0%, rgba(255, 107, 107, 0.08) 40%, transparent 70%);\r\n            animation: floatCombo 8s ease-in-out infinite;\r\n            filter: blur(1px);\r\n        }\r\n\r\n        .bg-circle-combo:nth-child(1) {\r\n            width: 400px;\r\n            height: 400px;\r\n            top: -10%;\r\n            left: -10%;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .bg-circle-combo:nth-child(2) {\r\n            width: 300px;\r\n            height: 300px;\r\n            bottom: -15%;\r\n            right: -15%;\r\n            animation-delay: 4s;\r\n        }\r\n\r\n        .bg-circle-combo:nth-child(3) {\r\n            width: 200px;\r\n            height: 200px;\r\n            top: 30%;\r\n            left: 70%;\r\n            animation-delay: 2s;\r\n            background: radial-gradient(circle, rgba(74, 222, 128, 0.1) 0%, transparent 70%);\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY COMBO *\/\r\n        .grid-overlay-combo {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                linear-gradient(rgba(220, 38, 38, 0.03) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(220, 38, 38, 0.03) 1px, transparent 1px);\r\n            background-size: 60px 60px;\r\n            animation: gridMoveCombo 25s linear infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        @keyframes gridMoveCombo {\r\n            0% { transform: translate(0, 0); }\r\n            100% { transform: translate(60px, 60px); }\r\n        }\r\n\r\n        @keyframes floatCombo {\r\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.4; }\r\n            33% { transform: translateY(-25px) scale(1.05) rotate(120deg); opacity: 0.6; }\r\n            66% { transform: translateY(-10px) scale(0.95) rotate(240deg); opacity: 0.5; }\r\n        }\r\n\r\n        \/* MAIN CONTAINER COMBO *\/\r\n        .hero-container-combo {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 40px 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            display: grid;\r\n            grid-template-columns: 1.2fr 0.8fr;\r\n            gap: 60px;\r\n            align-items: center;\r\n        }\r\n\r\n        \/* LEFT SIDE - CONTENT COMBO *\/\r\n        .hero-content-combo {\r\n            padding-right: 20px;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE COMBO *\/\r\n        .announcement-badge-combo {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 10px 24px;\r\n            border-radius: 25px;\r\n            font-size: 0.9rem;\r\n            font-weight: 700;\r\n            margin-bottom: 30px;\r\n            animation: badgeEntranceCombo 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        .announcement-badge-combo i {\r\n            color: #ffd700;\r\n            animation: starSpinCombo 3s linear infinite;\r\n        }\r\n\r\n        @keyframes badgeEntranceCombo {\r\n            0% { opacity: 0; transform: translateX(-30px) scale(0.8); }\r\n            100% { opacity: 1; transform: translateX(0) scale(1); }\r\n        }\r\n\r\n        @keyframes starSpinCombo {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* TITLE COMBO *\/\r\n        .hero-title-combo {\r\n            font-size: 2.4rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 15px !important;\r\n            line-height: 1.2 !important;\r\n            animation: titleEntranceCombo 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        .title-highlight-combo {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: titleGradientCombo 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .title-highlight-combo::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -3px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: titleUnderlineCombo 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes titleUnderlineCombo {\r\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\r\n            50% { opacity: 1; transform: scaleX(1.05); }\r\n        }\r\n\r\n        @keyframes titleGradientCombo {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes titleEntranceCombo {\r\n            0% { opacity: 0; transform: translateX(-50px); }\r\n            100% { opacity: 1; transform: translateX(0); }\r\n        }\r\n\r\n        \/* SUBTITLE COMBO *\/\r\n        .hero-subtitle-combo {\r\n            font-size: 1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 20px !important;\r\n            animation: subtitleEntranceCombo 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 95%;\r\n        }\r\n\r\n        @keyframes subtitleEntranceCombo {\r\n            0% { opacity: 0; transform: translateX(-30px); }\r\n            100% { opacity: 1; transform: translateX(0); }\r\n        }\r\n\r\n        \/* PRICE SECTION COMBO *\/\r\n        .price-section-combo {\r\n            background: rgba(26, 26, 26, 0.9);\r\n            border: 1px solid rgba(255, 255, 255, 0.06);\r\n            border-radius: 20px;\r\n            padding: 18px 16px;\r\n            margin: 20px 0;\r\n            max-width: 400px;\r\n            width: 100%;\r\n            animation: priceEntranceCombo 1s ease-out 0.8s both;\r\n            backdrop-filter: blur(25px);\r\n            position: relative;\r\n            box-shadow: \r\n                0 6px 25px rgba(0, 0, 0, 0.15),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.04);\r\n        }\r\n\r\n        .price-header-combo {\r\n            text-align: center;\r\n            margin-bottom: 14px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .price-label-combo {\r\n            font-size: 1rem;\r\n            color: rgba(248, 250, 252, 1);\r\n            margin-bottom: 6px;\r\n            font-weight: 500;\r\n            text-transform: lowercase;\r\n            letter-spacing: 0.8px;\r\n            font-family: 'Inter', sans-serif;\r\n            line-height: 1;\r\n        }\r\n\r\n        .price-main-combo {\r\n            display: flex;\r\n            align-items: baseline;\r\n            justify-content: center;\r\n            gap: 16px;\r\n            margin-bottom: 14px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .speed-highlight-combo {\r\n            font-size: 2.1rem !important;\r\n            font-weight: 700 !important;\r\n            color: #dc2626 !important;\r\n            font-family: 'Inter', sans-serif;\r\n            letter-spacing: -0.02em;\r\n            line-height: 1;\r\n        }\r\n\r\n        .price-divider-combo {\r\n            width: 1px;\r\n            height: 30px;\r\n            background: rgba(255, 255, 255, 0.2);\r\n            border-radius: 1px;\r\n            align-self: stretch;\r\n        }\r\n\r\n        .price-value-container-combo {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            justify-content: flex-end;\r\n        }\r\n\r\n        .price-value-combo {\r\n            font-size: 1.6rem !important;\r\n            font-weight: 700 !important;\r\n            color: var(--text-light) !important;\r\n            margin-bottom: 0 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            letter-spacing: -0.02em;\r\n            line-height: 1;\r\n            display: flex;\r\n            align-items: baseline;\r\n            justify-content: flex-start;\r\n            gap: 4px;\r\n        }\r\n\r\n        .price-period-combo {\r\n            font-size: 0.8rem;\r\n            color: var(--text-light);\r\n            font-weight: 400;\r\n            letter-spacing: 0.3px;\r\n            margin-left: -2px;\r\n        }\r\n\r\n        @keyframes priceEntranceCombo {\r\n            0% { opacity: 0; transform: translateX(-40px) scale(0.95); }\r\n            100% { opacity: 1; transform: translateX(0) scale(1); }\r\n        }\r\n\r\n        \/* HIGHLIGHTS COMPACT COMBO *\/\r\n        .highlights-compact-combo {\r\n            display: flex;\r\n            gap: 10px;\r\n            flex-wrap: wrap;\r\n            margin: 10px 0 0 0;\r\n            animation: highlightsEntranceCombo 1s ease-out 1s both;\r\n            justify-content: center;\r\n        }\r\n\r\n        .highlight-item-combo {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            background: rgba(255, 255, 255, 0.06);\r\n            padding: 6px 10px;\r\n            border-radius: 10px;\r\n            font-size: 0.75rem;\r\n            color: var(--text-light);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            font-family: 'Inter', sans-serif;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .highlight-item-combo i {\r\n            color: #4ade80;\r\n            font-size: 0.8rem;\r\n        }\r\n\r\n        .highlight-item-combo.red-icon i {\r\n            color: #dc2626;\r\n        }\r\n\r\n        @keyframes highlightsEntranceCombo {\r\n            0% { opacity: 0; transform: translateY(20px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* BUTTONS COMBO *\/\r\n        .hero-buttons-combo {\r\n            display: flex;\r\n            gap: 15px;\r\n            margin-top: 25px;\r\n            animation: buttonsEntranceCombo 1s ease-out 1.2s both;\r\n        }\r\n\r\n        @keyframes buttonsEntranceCombo {\r\n            0% { opacity: 0; transform: translateX(-30px); }\r\n            100% { opacity: 1; transform: translateX(0); }\r\n        }\r\n\r\n        .btn-combo {\r\n            position: relative;\r\n            display: inline-flex !important;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 12px 24px !important;\r\n            border: none !important;\r\n            border-radius: 8px !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            font-weight: 500 !important;\r\n            font-size: 0.9rem !important;\r\n            text-decoration: none !important;\r\n            cursor: pointer;\r\n            transition: all 0.2s ease !important;\r\n            min-width: 140px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .btn-primary-combo {\r\n            background: var(--gradient-red) !important;\r\n            color: white !important;\r\n            box-shadow: 0 10px 35px rgba(220, 38, 38, 0.4) !important;\r\n        }\r\n\r\n        .btn-primary-combo:hover {\r\n            transform: translateY(-2px) !important;\r\n            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4) !important;\r\n            color: white !important;\r\n        }\r\n\r\n        .btn-secondary-combo {\r\n            background: transparent !important;\r\n            border: 1px solid rgba(255, 255, 255, 0.2) !important;\r\n            color: var(--text-light) !important;\r\n        }\r\n\r\n        .btn-secondary-combo:hover {\r\n            background: rgba(220, 38, 38, 0.1) !important;\r\n            border-color: rgba(220, 38, 38, 0.3) !important;\r\n            color: white !important;\r\n            transform: translateY(-2px) !important;\r\n        }\r\n\r\n        \/* RIGHT SIDE - IMAGE COMBO *\/\r\n        .hero-image-combo {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            animation: imageEntranceCombo 1s ease-out 0.8s both;\r\n        }\r\n\r\n        @keyframes imageEntranceCombo {\r\n            0% { opacity: 0; transform: translateX(50px) scale(0.9); }\r\n            100% { opacity: 1; transform: translateX(0) scale(1); }\r\n        }\r\n\r\n        .image-container-combo {\r\n            position: relative;\r\n            width: 100%;\r\n            max-width: 380px;\r\n            height: 320px;\r\n            background: linear-gradient(135deg, \r\n                rgba(220, 38, 38, 0.1) 0%, \r\n                rgba(26, 26, 26, 0.8) 25%,\r\n                rgba(255, 107, 107, 0.08) 50%,\r\n                rgba(26, 26, 26, 0.9) 75%,\r\n                rgba(220, 38, 38, 0.12) 100%);\r\n            border: 1px solid rgba(220, 38, 38, 0.2);\r\n            border-radius: 20px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            backdrop-filter: blur(20px);\r\n            overflow: hidden;\r\n            box-shadow: \r\n                0 15px 40px rgba(220, 38, 38, 0.15),\r\n                inset 0 1px 0 rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .image-container-combo::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, \r\n                transparent 0%,\r\n                rgba(220, 38, 38, 0.05) 25%, \r\n                rgba(255, 107, 107, 0.08) 50%, \r\n                rgba(220, 38, 38, 0.05) 75%,\r\n                transparent 100%);\r\n            animation: imageGlowCombo 4s ease-in-out infinite;\r\n        }\r\n\r\n        .image-container-combo::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -50%;\r\n            left: -50%;\r\n            width: 200%;\r\n            height: 200%;\r\n            background: conic-gradient(\r\n                transparent,\r\n                rgba(220, 38, 38, 0.1),\r\n                transparent,\r\n                rgba(255, 107, 107, 0.08),\r\n                transparent\r\n            );\r\n            animation: rotateBorderCombo 8s linear infinite;\r\n        }\r\n\r\n        @keyframes rotateBorderCombo {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        @keyframes imageGlowCombo {\r\n            0%, 100% { opacity: 0.6; transform: scale(1); }\r\n            50% { opacity: 1; transform: scale(1.02); }\r\n        }\r\n\r\n        .image-placeholder-combo {\r\n            position: relative;\r\n            z-index: 2;\r\n            text-align: center;\r\n            color: var(--text-light);\r\n            background: rgba(26, 26, 26, 0.5);\r\n            padding: 30px;\r\n            border-radius: 15px;\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n        }\r\n\r\n        .image-placeholder-combo i {\r\n            font-size: 3rem;\r\n            color: #dc2626;\r\n            margin-bottom: 12px;\r\n            animation: iconFloatCombo 3s ease-in-out infinite;\r\n            filter: drop-shadow(0 0 15px rgba(220, 38, 38, 0.3));\r\n        }\r\n\r\n        @keyframes iconFloatCombo {\r\n            0%, 100% { transform: translateY(0) rotate(0deg); }\r\n            25% { transform: translateY(-8px) rotate(5deg); }\r\n            50% { transform: translateY(-4px) rotate(-3deg); }\r\n            75% { transform: translateY(-10px) rotate(2deg); }\r\n        }\r\n\r\n        .image-placeholder-combo h3 {\r\n            font-size: 1.3rem;\r\n            font-weight: 600;\r\n            margin-bottom: 8px;\r\n            color: var(--text-light);\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .image-placeholder-combo p {\r\n            color: var(--text-gray);\r\n            font-size: 0.9rem;\r\n            line-height: 1.4;\r\n        }\r\n\r\n        \/* FLOATING ELEMENTS COMBO *\/\r\n        .floating-element-combo {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            animation: floatingElementsCombo 8s ease-in-out infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        .floating-element-combo:nth-child(1) {\r\n            width: 8px;\r\n            height: 8px;\r\n            top: 15%;\r\n            right: 20%;\r\n            background: linear-gradient(135deg, #4ade80, #22c55e);\r\n            animation-delay: 0s;\r\n            box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);\r\n        }\r\n\r\n        .floating-element-combo:nth-child(2) {\r\n            width: 12px;\r\n            height: 12px;\r\n            bottom: 25%;\r\n            right: 30%;\r\n            background: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            animation-delay: 2s;\r\n            box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);\r\n        }\r\n\r\n        .floating-element-combo:nth-child(3) {\r\n            width: 6px;\r\n            height: 6px;\r\n            top: 45%;\r\n            right: 10%;\r\n            background: linear-gradient(135deg, #f59e0b, #d97706);\r\n            animation-delay: 4s;\r\n            box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);\r\n        }\r\n\r\n        .floating-element-combo:nth-child(4) {\r\n            width: 10px;\r\n            height: 10px;\r\n            top: 70%;\r\n            right: 25%;\r\n            background: linear-gradient(135deg, #8b5cf6, #7c3aed);\r\n            animation-delay: 6s;\r\n            box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);\r\n        }\r\n\r\n        @keyframes floatingElementsCombo {\r\n            0%, 100% { \r\n                transform: translateY(0) translateX(0) scale(1); \r\n                opacity: 0.6; \r\n            }\r\n            25% { \r\n                transform: translateY(-20px) translateX(5px) scale(1.2); \r\n                opacity: 0.8; \r\n            }\r\n            50% { \r\n                transform: translateY(-10px) translateX(-8px) scale(0.9); \r\n                opacity: 1; \r\n            }\r\n            75% { \r\n                transform: translateY(-25px) translateX(3px) scale(1.1); \r\n                opacity: 0.7; \r\n            }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN COMBO *\/\r\n        @media (max-width: 1024px) {\r\n            .hero-container-combo {\r\n                grid-template-columns: 1fr;\r\n                gap: 40px;\r\n                text-align: center;\r\n                padding: 30px 25px;\r\n            }\r\n            \r\n            .hero-content-combo {\r\n                padding-right: 0;\r\n                order: 1;\r\n            }\r\n            \r\n            .hero-image-combo {\r\n                order: 2;\r\n            }\r\n            \r\n            .image-container-combo {\r\n                max-width: 320px;\r\n                height: 280px;\r\n                margin: 0 auto;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .hero-banner-combo {\r\n                min-height: 60vh;\r\n                padding: 60px 0 40px 0;\r\n            }\r\n            \r\n            .hero-container-combo {\r\n                padding: 40px 25px 30px 25px;\r\n            }\r\n            \r\n            .announcement-badge-combo {\r\n                margin-top: 20px;\r\n                margin-bottom: 25px;\r\n            }\r\n            \r\n            .hero-title-combo {\r\n                font-size: 2rem !important;\r\n            }\r\n            \r\n            .hero-subtitle-combo {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .price-value-combo {\r\n                font-size: 1.8rem !important;\r\n            }\r\n            \r\n            .speed-highlight-combo {\r\n                font-size: 1.7rem !important;\r\n            }\r\n            \r\n            .hero-buttons-combo {\r\n                flex-direction: row;\r\n                justify-content: center;\r\n                gap: 12px;\r\n                margin-top: 25px;\r\n                padding: 0 10px;\r\n            }\r\n            \r\n            .btn-combo {\r\n                min-width: 140px !important;\r\n                flex: 1;\r\n                max-width: 160px;\r\n            }\r\n            \r\n            .image-container-combo {\r\n                max-width: 280px;\r\n                height: 240px;\r\n            }\r\n            \r\n            .highlights-compact-combo {\r\n                justify-content: center;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hero-container-combo {\r\n                padding: 35px 20px 25px 20px;\r\n            }\r\n            \r\n            .announcement-badge-combo {\r\n                margin-top: 25px;\r\n                margin-bottom: 20px;\r\n                padding: 8px 20px;\r\n                font-size: 0.85rem;\r\n            }\r\n            \r\n            .hero-title-combo {\r\n                font-size: 1.8rem !important;\r\n            }\r\n            \r\n            .price-value-combo {\r\n                font-size: 1.6rem !important;\r\n            }\r\n            \r\n            .speed-highlight-combo {\r\n                font-size: 1.6rem !important;\r\n            }\r\n            \r\n            .btn-combo {\r\n                min-width: 140px !important;\r\n                padding: 12px 20px !important;\r\n                font-size: 0.85rem !important;\r\n                flex: 1;\r\n                max-width: 170px;\r\n            }\r\n            \r\n            .image-container-combo {\r\n                max-width: 260px;\r\n                height: 220px;\r\n            }\r\n            \r\n            .image-placeholder-combo {\r\n                padding: 25px 20px;\r\n            }\r\n            \r\n            .image-placeholder-combo i {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .highlights-compact-combo {\r\n                gap: 10px;\r\n            }\r\n            \r\n            .highlight-item-combo {\r\n                font-size: 0.8rem;\r\n                padding: 6px 10px;\r\n            }\r\n            \r\n            \/* ESCONDER CARD COMPLETO DA IMAGEM NO MOBILE COMBO *\/\r\n            .hero-image-combo {\r\n                display: none;\r\n            }\r\n        }\r\n        \r\n        \/* FOR\u00c7A FUNDO \u00daNICO GLOBAL NO MOBILE *\/\r\n        @media (max-width: 768px) {\r\n            .hero-banner-tim,\r\n            .hero-banner-combo {\r\n                background: #1a1a1a !important;\r\n                background-image: none !important;\r\n                background-attachment: initial !important;\r\n                background-size: initial !important;\r\n                background-repeat: initial !important;\r\n                background-position: initial !important;\r\n            }\r\n        }\r\n        \r\n        \/* FOR\u00c7A FUNDO UNIFORME EM TODOS OS ELEMENTOS DO SLIDER *\/\r\n        .hero-slider-container,\r\n        .hero-slider-wrapper,\r\n        .hero-slide,\r\n        .hero-banner-tim,\r\n        .hero-banner-combo {\r\n            background: #1a1a1a !important;\r\n            background-image: none !important;\r\n        }\r\n        \r\n        \/* ELEMENTOR OVERRIDE - Remove qualquer fundo do Elementor *\/\r\n        .elementor-widget-container,\r\n        .elementor-element,\r\n        .elementor-section {\r\n            background: transparent !important;\r\n        }\r\n    <\/style>\r\n\r\n<!-- 2. SEGUNDO: Cole este HTML no widget \"HTML\" do Elementor -->\r\n\r\n<!-- LINKS OBRIGAT\u00d3RIOS (Cole no cabe\u00e7alho do site) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Poppins:wght@400;600;700;800;900&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<!-- BANNER TIM STYLE - SLIDER -->\r\n<div class=\"hero-slider-container\">\r\n    <!-- PROGRESS BAR -->\r\n    <div class=\"slider-progress\"><\/div>\r\n    \r\n    <!-- SLIDER WRAPPER -->\r\n    <div class=\"hero-slider-wrapper\" id=\"heroSlider\">\r\n        <!-- SLIDE 1 - INTERNET -->\r\n        <div class=\"hero-slide\">\r\n            <section class=\"hero-banner-tim\">\r\n                <!-- BACKGROUND ELEMENTS -->\r\n                <div class=\"hero-bg-tim\">\r\n                    <div class=\"bg-circle-tim\"><\/div>\r\n                    <div class=\"bg-circle-tim\"><\/div>\r\n                    <div class=\"bg-circle-tim\"><\/div>\r\n                <\/div>\r\n                <div class=\"grid-overlay-tim\"><\/div>\r\n                \r\n                <!-- MAIN CONTAINER -->\r\n                <div class=\"hero-container-tim\">\r\n                    <!-- LEFT SIDE - CONTENT -->\r\n                    <div class=\"hero-content-tim\">\r\n                        <!-- ANNOUNCEMENT BADGE -->\r\n                        <div class=\"announcement-badge-tim\">\r\n                            <i class=\"fas fa-award\"><\/i>\r\n                            <span>Melhor Internet de Curitiba 2024<\/span>\r\n                        <\/div>\r\n                        \r\n                        <!-- TITLE -->\r\n                        <h1 class=\"hero-title-tim\">\r\n                            Internet <span class=\"title-highlight-tim\">Ultra R\u00e1pida<\/span><br>\r\n                            que n\u00e3o te abandona\r\n                        <\/h1>\r\n                        \r\n                        <!-- SUBTITLE -->\r\n                        <h2 class=\"hero-subtitle-tim\">\r\n                            Fibra \u00f3ptica dedicada com velocidade real garantida<br class=\"desktop-break\"> para trabalho, jogos e streaming.\r\n                        <\/h2>\r\n                        \r\n                        <!-- PRICE SECTION -->\r\n                        <div class=\"price-section-tim\">\r\n                            <div class=\"price-header-tim\">\r\n                                <div class=\"price-label-tim\">planos a partir de <\/div>\r\n                            <\/div>\r\n                            \r\n                            <div class=\"price-main-tim\">\r\n                                <div class=\"speed-highlight-tim\">400MEGA<\/div>\r\n                                <div class=\"price-divider-tim\"><\/div>\r\n                                <div class=\"price-value-container-tim\">\r\n                                    <div class=\"price-value-tim\">\r\n                                        <span style=\"font-size: 1.2rem;\">R$<\/span> 89,90<span class=\"price-period-tim\">\/m\u00eas<\/span>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            \r\n                            <!-- HIGHLIGHTS DENTRO DO CARD -->\r\n                            <div class=\"highlights-compact\">\r\n                                <div class=\"highlight-item red-icon\">\r\n                                    <i class=\"fas fa-rocket\"><\/i>\r\n                                    <span>Velocidade Real<\/span>\r\n                                <\/div>\r\n                                <div class=\"highlight-item red-icon\">\r\n                                    <i class=\"fas fa-wifi\"><\/i>\r\n                                    <span>WiFi Premium<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- BUTTONS FORA DO CARD -->\r\n                        <div class=\"hero-buttons-tim\">\r\n                            <a href=\"https:\/\/wa.me\/554130731297\" target=\"_blank\" class=\"btn-tim btn-primary-tim\">\r\n                                <i class=\"fas fa-bolt\"><\/i>\r\n                                <span>Quero Contratar<\/span>\r\n                            <\/a>\r\n                            <a href=\"https:\/\/wa.me\/554130731297\" target=\"_blank\" class=\"btn-tim btn-secondary-tim\">\r\n                                <i class=\"fab fa-whatsapp\"><\/i>\r\n                                <span>WhatsApp<\/span>\r\n                            <\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <!-- RIGHT SIDE - IMAGE -->\r\n                    <div class=\"hero-image-tim\">\r\n                        <div class=\"image-container-tim\">\r\n                            <div class=\"image-placeholder-tim\">\r\n                                <i class=\"fas fa-globe-americas\"><\/i>\r\n                                <h3>Internet HB<\/h3>\r\n                                <p>Conectando Curitiba<br>com velocidade total<\/p>\r\n                            <\/div>\r\n                            \r\n                            <!-- FLOATING ELEMENTS -->\r\n                            <div class=\"floating-element\"><\/div>\r\n                            <div class=\"floating-element\"><\/div>\r\n                            <div class=\"floating-element\"><\/div>\r\n                            <div class=\"floating-element\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n        <\/div>\r\n\r\n        <!-- SLIDE 2 - COMBO INTERNET + TV -->\r\n        <div class=\"hero-slide\">\r\n            <section class=\"hero-banner-combo\">\r\n                <!-- BACKGROUND ELEMENTS -->\r\n                <div class=\"hero-bg-combo\">\r\n                    <div class=\"bg-circle-combo\"><\/div>\r\n                    <div class=\"bg-circle-combo\"><\/div>\r\n                    <div class=\"bg-circle-combo\"><\/div>\r\n                <\/div>\r\n                <div class=\"grid-overlay-combo\"><\/div>\r\n                \r\n                <!-- MAIN CONTAINER -->\r\n                <div class=\"hero-container-combo\">\r\n                    <!-- LEFT SIDE - CONTENT -->\r\n                    <div class=\"hero-content-combo\">\r\n                        <!-- ANNOUNCEMENT BADGE -->\r\n                        <div class=\"announcement-badge-combo\">\r\n                            <i class=\"fas fa-star\"><\/i>\r\n                            <span>Melhor Internet de Curitiba 2024<\/span>\r\n                        <\/div>\r\n                        \r\n                        <!-- TITLE -->\r\n                        <h1 class=\"hero-title-combo\">\r\n                            <span class=\"title-highlight-combo\">Internet + TV<\/span><br>\r\n                            sem limites para toda fam\u00edlia\r\n                        <\/h1>\r\n                        \r\n                        <!-- SUBTITLE -->\r\n                        <h2 class=\"hero-subtitle-combo\">\r\n                            Combos com a internet mais r\u00e1pida da cidade,<br class=\"desktop-break\"> canais HD e streamings inclusos.\r\n                        <\/h2>\r\n                        \r\n                        <!-- PRICE SECTION -->\r\n                        <div class=\"price-section-combo\">\r\n                            <div class=\"price-header-combo\">\r\n                                <div class=\"price-label-combo\">combos a partir de<\/div>\r\n                            <\/div>\r\n                            \r\n                            <div class=\"price-main-combo\">\r\n                                <div class=\"speed-highlight-combo\">500MEGA<\/div>\r\n                                <div class=\"price-divider-combo\"><\/div>\r\n                                <div class=\"price-value-container-combo\">\r\n                                    <div class=\"price-value-combo\">\r\n                                        <span style=\"font-size: 1.2rem;\">R$<\/span> 99,90<span class=\"price-period-combo\">\/m\u00eas<\/span>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            \r\n                            <!-- HIGHLIGHTS DENTRO DO CARD -->\r\n                            <div class=\"highlights-compact-combo\">\r\n                                <div class=\"highlight-item-combo red-icon\">\r\n                                    <i class=\"fas fa-play-circle\"><\/i>\r\n                                    <span>Wacth Brasil<\/span>\r\n                                <\/div>\r\n                                <div class=\"highlight-item-combo red-icon\">\r\n                                    <i class=\"fas fa-play-circle\"><\/i>\r\n                                    <span>Paramount+<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <!-- BUTTONS FORA DO CARD -->\r\n                        <div class=\"hero-buttons-combo\">\r\n                            <a href=\"https:\/\/wa.me\/554130731297\" target=\"_blank\" class=\"btn-combo btn-primary-combo\">\r\n                                <i class=\"fas fa-bolt\"><\/i>\r\n                                <span>Quero o Combo<\/span>\r\n                            <\/a>\r\n                            <a href=\"https:\/\/wa.me\/554130731297\" target=\"_blank\" class=\"btn-combo btn-secondary-combo\">\r\n                                <i class=\"fab fa-whatsapp\"><\/i>\r\n                                <span>WhatsApp<\/span>\r\n                            <\/a>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <!-- RIGHT SIDE - IMAGE -->\r\n                    <div class=\"hero-image-combo\">\r\n                        <div class=\"image-container-combo\">\r\n                            <div class=\"image-placeholder-combo\">\r\n                                <i class=\"fas fa-tv\"><\/i>\r\n                                <h3>Combo HB<\/h3>\r\n                                <p>Internet + TV<br>Entretenimento total<\/p>\r\n                            <\/div>\r\n                            \r\n                            <!-- FLOATING ELEMENTS -->\r\n                            <div class=\"floating-element-combo\"><\/div>\r\n                            <div class=\"floating-element-combo\"><\/div>\r\n                            <div class=\"floating-element-combo\"><\/div>\r\n                            <div class=\"floating-element-combo\"><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/section>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <!-- NAVIGATION ARROWS -->\r\n    <div class=\"slider-arrow prev\" onclick=\"previousSlide()\">\r\n        <i class=\"fas fa-chevron-left\"><\/i>\r\n    <\/div>\r\n    <div class=\"slider-arrow next\" onclick=\"nextSlide()\">\r\n        <i class=\"fas fa-chevron-right\"><\/i>\r\n    <\/div>\r\n    \r\n    <!-- NAVIGATION DOTS -->\r\n    <div class=\"slider-navigation\">\r\n        <div class=\"slider-dot active\" onclick=\"goToSlide(0)\"><\/div>\r\n        <div class=\"slider-dot\" onclick=\"goToSlide(1)\"><\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- 3. TERCEIRO: Cole este JavaScript no rodap\u00e9 do site -->\r\n<script>\r\n    \/\/ SLIDER FUNCTIONALITY\r\n    let currentSlide = 0;\r\n    const totalSlides = 2;\r\n    let isAutoPlaying = true;\r\n    let autoPlayInterval;\r\n    let progressInterval;\r\n\r\n    \/\/ BUTTON INTERACTIONS TIM STYLE\r\n    function handlePlanClickTim() {\r\n        \/\/ Adicione aqui a l\u00f3gica para navegar para os planos\r\n        console.log('Navegando para planos...');\r\n        \/\/ Exemplo: window.location.href = '#plans';\r\n        \r\n        \/\/ Scroll suave para se\u00e7\u00e3o de planos\r\n        const plansSection = document.getElementById('plans');\r\n        if (plansSection) {\r\n            plansSection.scrollIntoView({ behavior: 'smooth' });\r\n        }\r\n    }\r\n\r\n    function handleComboClickTim() {\r\n        \/\/ Adicione aqui a l\u00f3gica para navegar para os combos\r\n        console.log('Navegando para combos...');\r\n        \/\/ Exemplo: window.location.href = '#combo';\r\n        \r\n        \/\/ Scroll suave para se\u00e7\u00e3o de combos\r\n        const comboSection = document.getElementById('combo');\r\n        if (comboSection) {\r\n            comboSection.scrollIntoView({ behavior: 'smooth' });\r\n        }\r\n    }\r\n\r\n    function handleContactTim() {\r\n        \/\/ Abrir WhatsApp da HB Telecom\r\n        window.open('https:\/\/wa.me\/554130731297', '_blank');\r\n    }\r\n\r\n    \/\/ SLIDER NAVIGATION FUNCTIONS\r\n    function goToSlide(slideIndex) {\r\n        currentSlide = slideIndex;\r\n        updateSlider();\r\n        resetAutoPlay();\r\n    }\r\n\r\n    function nextSlide() {\r\n        currentSlide = (currentSlide + 1) % totalSlides;\r\n        updateSlider();\r\n        \/\/ Remover resetAutoPlay daqui para evitar conflitos\r\n    }\r\n\r\n    function previousSlide() {\r\n        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;\r\n        updateSlider();\r\n        \/\/ Remover resetAutoPlay daqui para evitar conflitos\r\n    }\r\n\r\n    function updateSlider() {\r\n        const slider = document.getElementById('heroSlider');\r\n        const dots = document.querySelectorAll('.slider-dot');\r\n        \r\n        if (slider) {\r\n            \/\/ For\u00e7a o reflow antes da transi\u00e7\u00e3o\r\n            slider.style.transition = 'none';\r\n            slider.offsetHeight; \/\/ For\u00e7a reflow\r\n            slider.style.transition = 'transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1)';\r\n            slider.style.transform = `translateX(-${currentSlide * 50}%)`;\r\n        }\r\n        \r\n        \/\/ Update dots\r\n        if (dots.length > 0) {\r\n            dots.forEach((dot, index) => {\r\n                dot.classList.toggle('active', index === currentSlide);\r\n            });\r\n        }\r\n    }\r\n\r\n    function startAutoPlay() {\r\n        \/\/ Certificar que n\u00e3o h\u00e1 timer ativo antes de criar um novo\r\n        stopAutoPlay();\r\n        \r\n        if (isAutoPlaying) {\r\n            autoPlayInterval = setInterval(() => {\r\n                nextSlide();\r\n            }, 10000); \/\/ 10 segundos por slide - MAIS LENTO PARA EVITAR BUG\r\n        }\r\n    }\r\n\r\n    function stopAutoPlay() {\r\n        if (autoPlayInterval) {\r\n            clearInterval(autoPlayInterval);\r\n            autoPlayInterval = null;\r\n        }\r\n    }\r\n\r\n    function resetAutoPlay() {\r\n        \/\/ Simplificar para evitar loops infinitos\r\n        stopAutoPlay();\r\n        startAutoPlay();\r\n    }\r\n\r\n    \/\/ PARALLAX EFFECT ON SCROLL TIM E COMBO\r\n    window.addEventListener('scroll', () => {\r\n        const scrolled = window.pageYOffset;\r\n        const rate = scrolled * -0.3;\r\n        \r\n        \/\/ Parallax para primeiro slider\r\n        const bgCircles = document.querySelectorAll('.bg-circle-tim');\r\n        if (bgCircles.length > 0) {\r\n            bgCircles.forEach((circle, index) => {\r\n                const speed = (index + 1) * 0.2;\r\n                circle.style.transform = `translateY(${rate * speed}px)`;\r\n            });\r\n        }\r\n        \r\n        \/\/ Parallax para segundo slider\r\n        const bgCirclesCombo = document.querySelectorAll('.bg-circle-combo');\r\n        if (bgCirclesCombo.length > 0) {\r\n            bgCirclesCombo.forEach((circle, index) => {\r\n                const speed = (index + 1) * 0.2;\r\n                circle.style.transform = `translateY(${rate * speed}px)`;\r\n            });\r\n        }\r\n        \r\n        \/\/ Floating elements parallax primeiro slider\r\n        const floatingElements = document.querySelectorAll('.floating-element');\r\n        if (floatingElements.length > 0) {\r\n            floatingElements.forEach((element, index) => {\r\n                const speed = (index + 1) * 0.1;\r\n                element.style.transform = `translateY(${rate * speed}px) rotate(${scrolled * 0.1}deg)`;\r\n            });\r\n        }\r\n\r\n        \/\/ Floating elements parallax segundo slider\r\n        const floatingElementsCombo = document.querySelectorAll('.floating-element-combo');\r\n        if (floatingElementsCombo.length > 0) {\r\n            floatingElementsCombo.forEach((element, index) => {\r\n                const speed = (index + 1) * 0.1;\r\n                element.style.transform = `translateY(${rate * speed}px) rotate(${scrolled * 0.1}deg)`;\r\n            });\r\n        }\r\n    });\r\n\r\n    \/\/ INTERSECTION OBSERVER FOR ANIMATIONS TIM E COMBO\r\n    const observerOptionsTim = {\r\n        threshold: 0.1,\r\n        rootMargin: '0px 0px -50px 0px'\r\n    };\r\n\r\n    const observerTim = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.animationPlayState = 'running';\r\n            }\r\n        });\r\n    }, observerOptionsTim);\r\n\r\n    \/\/ PAUSE AUTO-PLAY ON USER INTERACTION\r\n    document.addEventListener('visibilitychange', () => {\r\n        if (document.hidden) {\r\n            stopAutoPlay();\r\n        } else {\r\n            startAutoPlay();\r\n        }\r\n    });\r\n\r\n    \/\/ KEYBOARD NAVIGATION\r\n    document.addEventListener('keydown', (e) => {\r\n        if (e.key === 'ArrowLeft') {\r\n            previousSlide();\r\n        } else if (e.key === 'ArrowRight') {\r\n            nextSlide();\r\n        }\r\n    });\r\n\r\n    \/\/ TOUCH\/SWIPE SUPPORT\r\n    let touchStartX = 0;\r\n    let touchEndX = 0;\r\n\r\n    document.addEventListener('touchstart', (e) => {\r\n        touchStartX = e.changedTouches[0].screenX;\r\n    });\r\n\r\n    document.addEventListener('touchend', (e) => {\r\n        touchEndX = e.changedTouches[0].screenX;\r\n        handleSwipe();\r\n    });\r\n\r\n    function handleSwipe() {\r\n        const swipeThreshold = 50;\r\n        const diff = touchStartX - touchEndX;\r\n        \r\n        if (Math.abs(diff) > swipeThreshold) {\r\n            if (diff > 0) {\r\n                nextSlide(); \/\/ Swipe left - next slide\r\n            } else {\r\n                previousSlide(); \/\/ Swipe right - previous slide\r\n            }\r\n        }\r\n    }\r\n\r\n    \/\/ MOUSE HOVER PAUSE\r\n    const sliderContainer = document.querySelector('.hero-slider-container');\r\n    if (sliderContainer) {\r\n        sliderContainer.addEventListener('mouseenter', () => {\r\n            stopAutoPlay();\r\n        });\r\n        sliderContainer.addEventListener('mouseleave', () => {\r\n            if (isAutoPlaying) {\r\n                startAutoPlay();\r\n            }\r\n        });\r\n    }\r\n\r\n    \/\/ OBSERVE ANIMATED ELEMENTS WHEN DOM IS READY TIM E COMBO\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ OBSERVE ANIMATED ELEMENTS PRIMEIRO SLIDER\r\n        const animatedElementsTim = document.querySelectorAll('[class*=\"EntranceTim\"]');\r\n        animatedElementsTim.forEach(el => {\r\n            if (observerTim) {\r\n                observerTim.observe(el);\r\n            }\r\n        });\r\n\r\n        \/\/ OBSERVE ANIMATED ELEMENTS SEGUNDO SLIDER\r\n        const animatedElementsCombo = document.querySelectorAll('[class*=\"EntranceCombo\"]');\r\n        animatedElementsCombo.forEach(el => {\r\n            if (observerTim) {\r\n                observerTim.observe(el);\r\n            }\r\n        });\r\n\r\n        \/\/ INITIALIZE SLIDER\r\n        updateSlider();\r\n        \r\n        \/\/ Aguardar o DOM estar completamente carregado antes de iniciar autoplay\r\n        setTimeout(() => {\r\n            startAutoPlay();\r\n        }, 500);\r\n    });\r\n<\/script>\r\n\r\n<!-- FIM DO C\u00d3DIGO PARA ELEMENTOR TIM STYLE -->\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db869a0 e-con-full e-flex e-con e-parent\" data-id=\"db869a0\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6d55af elementor-widget elementor-widget-html\" data-id=\"b6d55af\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- T\u00cdTULO PLANOS ESTILO TIM - COPIE DAQUI PARA O ELEMENTOR -->\n\n<!-- 1. PRIMEIRO: Cole este CSS no campo \"CSS Customizado\" do Elementor -->\n<style>\n        \/* VARI\u00c1VEIS CSS T\u00cdTULO PLANOS TIM STYLE *\/\n        :root {\n            --primary-red: #dc2626;\n            --gradient-red: linear-gradient(135deg, #dc2626, #b91c1c);\n            --dark-bg: #0f0f0f;\n            --text-light: #f8fafc;\n            --text-gray: #6c757d;\n        }\n\n        \/* SECTION T\u00cdTULO PLANOS TIM STYLE *\/\n        .plans-title-section-tim {\n            position: relative;\n            padding: 60px 0 40px 0;\n            background: #000000;\n            overflow: hidden;\n            margin: 0;\n        }\n\n        \/* BACKGROUND ANIMATED ELEMENTS *\/\n        .plans-bg-tim {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            pointer-events: none;\n            z-index: 1;\n        }\n\n        .plans-circle-tim {\n            position: absolute;\n            border-radius: 50%;\n            background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, rgba(255, 107, 107, 0.05) 40%, transparent 70%);\n            animation: floatPlansTim 12s ease-in-out infinite;\n            filter: blur(1px);\n        }\n\n        .plans-circle-tim:nth-child(1) {\n            width: 200px;\n            height: 200px;\n            top: -20%;\n            right: 10%;\n            animation-delay: 0s;\n        }\n\n        .plans-circle-tim:nth-child(2) {\n            width: 150px;\n            height: 150px;\n            bottom: -15%;\n            left: 15%;\n            animation-delay: 6s;\n        }\n\n        @keyframes floatPlansTim {\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.3; }\n            50% { transform: translateY(-20px) scale(1.1) rotate(180deg); opacity: 0.5; }\n        }\n\n        \/* GRID PATTERN OVERLAY *\/\n        .plans-grid-overlay-tim {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-image: \n                linear-gradient(rgba(220, 38, 38, 0.02) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(220, 38, 38, 0.02) 1px, transparent 1px);\n            background-size: 80px 80px;\n            animation: plansGridMoveTim 30s linear infinite;\n            z-index: 1;\n        }\n\n        @keyframes plansGridMoveTim {\n            0% { transform: translate(0, 0); }\n            100% { transform: translate(80px, 80px); }\n        }\n\n        \/* MAIN CONTAINER *\/\n        .plans-container-tim {\n            max-width: 1200px;\n            width: 100%;\n            margin: 0 auto;\n            padding: 0 30px;\n            position: relative;\n            z-index: 10;\n            text-align: center;\n        }\n\n        \/* ANNOUNCEMENT BADGE *\/\n        .plans-badge-tim {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            background: var(--gradient-red);\n            color: white;\n            padding: 8px 20px;\n            border-radius: 25px;\n            font-size: 0.85rem;\n            font-weight: 600;\n            margin-bottom: 25px;\n            animation: plansBadgeEntranceTim 1s ease-out 0.2s both;\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.3);\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            font-family: 'Inter', sans-serif;\n        }\n\n        .plans-badge-tim i {\n            color: #ffd700;\n            animation: plansStarSpinTim 4s linear infinite;\n        }\n\n        @keyframes plansBadgeEntranceTim {\n            0% { opacity: 0; transform: translateY(-30px) scale(0.8); }\n            100% { opacity: 1; transform: translateY(0) scale(1); }\n        }\n\n        @keyframes plansStarSpinTim {\n            0% { transform: rotate(0deg); }\n            100% { transform: rotate(360deg); }\n        }\n\n        \/* MAIN TITLE *\/\n        .plans-main-title-tim {\n            font-size: 2.8rem !important;\n            font-weight: 700 !important;\n            font-family: 'Inter', sans-serif !important;\n            margin-bottom: 20px !important;\n            line-height: 1.2 !important;\n            animation: plansTitleEntranceTim 1s ease-out 0.4s both;\n            color: var(--text-light) !important;\n            letter-spacing: -0.02em;\n        }\n\n        \/* RESPONSIVE TITLE DISPLAY *\/\n        .desktop-only {\n            display: inline;\n        }\n\n        .mobile-only {\n            display: none;\n        }\n\n        @media (max-width: 768px) {\n            .desktop-only {\n                display: none;\n            }\n\n            .mobile-only {\n                display: inline;\n            }\n        }\n\n        .plans-title-highlight-tim {\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\n            background-size: 400% 400%;\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            animation: plansTitleGradientTim 3s ease-in-out infinite;\n            position: relative;\n            font-weight: 800;\n        }\n\n        .plans-title-highlight-tim::after {\n            content: '';\n            position: absolute;\n            bottom: -4px;\n            left: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\n            border-radius: 2px;\n            animation: plansTitleUnderline 2s ease-in-out infinite;\n        }\n\n        @keyframes plansTitleUnderline {\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\n            50% { opacity: 1; transform: scaleX(1.05); }\n        }\n\n        @keyframes plansTitleGradientTim {\n            0%, 100% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n        }\n\n        @keyframes plansTitleEntranceTim {\n            0% { opacity: 0; transform: translateY(-50px); }\n            100% { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* SUBTITLE *\/\n        .plans-subtitle-tim {\n            font-size: 1.1rem !important;\n            font-weight: 500 !important;\n            color: rgba(248, 250, 252, 0.8) !important;\n            margin-bottom: 0 !important;\n            animation: plansSubtitleEntranceTim 1s ease-out 0.6s both;\n            font-family: 'Inter', sans-serif !important;\n            line-height: 1.5 !important;\n            max-width: 600px;\n            margin: 0 auto;\n        }\n\n        @keyframes plansSubtitleEntranceTim {\n            0% { opacity: 0; transform: translateY(-30px); }\n            100% { opacity: 1; transform: translateY(0); }\n        }\n\n        \/* DECORATIVE ELEMENTS *\/\n        .plans-decorative-line-tim {\n            width: 80px;\n            height: 3px;\n            background: var(--gradient-red);\n            margin: 30px auto 0;\n            border-radius: 2px;\n            animation: plansLineEntranceTim 1s ease-out 0.8s both;\n            position: relative;\n        }\n\n        .plans-decorative-line-tim::before {\n            content: '';\n            position: absolute;\n            top: -3px;\n            left: -3px;\n            right: -3px;\n            bottom: -3px;\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\n            border-radius: 4px;\n            z-index: -1;\n            animation: plansLineGlow 2s ease-in-out infinite;\n        }\n\n        @keyframes plansLineGlow {\n            0%, 100% { opacity: 0.3; transform: scale(1); }\n            50% { opacity: 0.6; transform: scale(1.1); }\n        }\n\n        @keyframes plansLineEntranceTim {\n            0% { opacity: 0; transform: scaleX(0); }\n            100% { opacity: 1; transform: scaleX(1); }\n        }\n\n        \/* WIFI ICONS WITH WAVES *\/\n        .plans-wifi-icon-tim {\n            position: absolute;\n            z-index: 2;\n            color: #dc2626;\n            font-size: 32px;\n            animation: plansWifiFloat 8s ease-in-out infinite;\n            opacity: 0.8;\n            display: none; \/* Oculto por padr\u00e3o no desktop *\/\n        }\n\n        .plans-wifi-icon-tim:nth-child(1) {\n            top: 35%;\n            left: 25%;\n            animation-delay: 0s;\n            color: #dc2626;\n        }\n\n        .plans-wifi-icon-tim:nth-child(2) {\n            top: 70%;\n            left: 50%;\n            animation-delay: 2s;\n            color: #dc2626;\n        }\n\n        .plans-wifi-icon-tim:nth-child(3) {\n            top: 35%;\n            right: 45%;\n            animation-delay: 4s;\n            color: #dc2626;\n        }\n\n        .plans-wifi-icon-tim:nth-child(4) {\n            top: 70%;\n            right: 50%;\n            animation-delay: 6s;\n            color: #dc2626;\n        }\n\n        .plans-wifi-icon-tim::before {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 50px;\n            height: 50px;\n            border: 2px solid currentColor;\n            border-radius: 50%;\n            transform: translate(-50%, -50%);\n            animation: plansWifiWaves 3s ease-out infinite;\n            opacity: 0;\n        }\n\n        .plans-wifi-icon-tim::after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 80px;\n            height: 80px;\n            border: 2px solid currentColor;\n            border-radius: 50%;\n            transform: translate(-50%, -50%);\n            animation: plansWifiWaves 3s ease-out infinite;\n            animation-delay: 1s;\n            opacity: 0;\n        }\n\n        @keyframes plansWifiFloat {\n            0%, 100% { \n                transform: translateY(0) translateX(0) scale(1) rotate(0deg); \n                opacity: 0.6; \n            }\n            25% { \n                transform: translateY(-15px) translateX(8px) scale(1.1) rotate(10deg); \n                opacity: 0.8; \n            }\n            50% { \n                transform: translateY(-8px) translateX(-5px) scale(0.95) rotate(-5deg); \n                opacity: 1; \n            }\n            75% { \n                transform: translateY(-20px) translateX(10px) scale(1.05) rotate(8deg); \n                opacity: 0.7; \n            }\n        }\n\n        @keyframes plansWifiWaves {\n            0% {\n                opacity: 0.6;\n                transform: translate(-50%, -50%) scale(0.5);\n            }\n            50% {\n                opacity: 0.3;\n                transform: translate(-50%, -50%) scale(1);\n            }\n            100% {\n                opacity: 0;\n                transform: translate(-50%, -50%) scale(1.5);\n            }\n        }\n\n        \/* RESPONSIVE DESIGN *\/\n        @media (max-width: 1024px) {\n            .plans-container-tim {\n                padding: 0 25px;\n            }\n            \n            .plans-main-title-tim {\n                font-size: 2.4rem !important;\n            }\n            \n            .plans-subtitle-tim {\n                font-size: 1rem !important;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .plans-title-section-tim {\n                padding: 50px 0 35px 0;\n            }\n            \n            .plans-container-tim {\n                padding: 0 20px;\n            }\n            \n            .plans-main-title-tim {\n                font-size: 2rem !important;\n                margin-bottom: 16px !important;\n            }\n            \n            .plans-subtitle-tim {\n                font-size: 0.95rem !important;\n                max-width: 100%;\n            }\n            \n            .plans-badge-tim {\n                font-size: 0.8rem;\n                padding: 6px 16px;\n                margin-bottom: 20px;\n            }\n            \n            .plans-decorative-line-tim {\n                width: 60px;\n                margin-top: 25px;\n            }\n            \n            \/* MOBILE WIFI ICONS POSITIONING - APENAS VIS\u00cdVEL NO MOBILE *\/\n            .plans-wifi-icon-tim {\n                display: block; \/* Mostra apenas no mobile *\/\n            }\n            \n            .plans-wifi-icon-tim:nth-child(1) {\n                top: 15%;\n                left: 5%;\n            }\n\n            .plans-wifi-icon-tim:nth-child(2) {\n                display: none; \/* Esconde o segundo \u00edcone no mobile *\/\n            }\n\n            .plans-wifi-icon-tim:nth-child(3) {\n                top: 15%;\n                right: 5%;\n            }\n\n            .plans-wifi-icon-tim:nth-child(4) {\n                display: none; \/* Esconde o quarto \u00edcone no mobile *\/\n            }\n        }\n\n        @media (max-width: 480px) {\n            .plans-title-section-tim {\n                padding: 40px 0 30px 0;\n            }\n            \n            .plans-container-tim {\n                padding: 0 15px;\n            }\n            \n            .plans-main-title-tim {\n                font-size: 1.8rem !important;\n                margin-bottom: 14px !important;\n            }\n            \n            .plans-subtitle-tim {\n                font-size: 0.9rem !important;\n            }\n            \n            .plans-badge-tim {\n                font-size: 0.75rem;\n                padding: 5px 14px;\n                margin-bottom: 18px;\n            }\n            \n            .plans-decorative-line-tim {\n                width: 50px;\n                margin-top: 20px;\n            }\n        }\n    <\/style>\n\n<!-- 2. SEGUNDO: Cole este HTML no widget \"HTML\" do Elementor -->\n\n<!-- LINKS OBRIGAT\u00d3RIOS (Cole no cabe\u00e7alho do site se ainda n\u00e3o tiver) -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<!-- T\u00cdTULO PLANOS TIM STYLE -->\n<section class=\"plans-title-section-tim\">\n    <!-- BACKGROUND ELEMENTS -->\n    <div class=\"plans-bg-tim\">\n        <div class=\"plans-circle-tim\"><\/div>\n        <div class=\"plans-circle-tim\"><\/div>\n    <\/div>\n    <div class=\"plans-grid-overlay-tim\"><\/div>\n    \n    <!-- FLOATING WIFI ICONS MOBILE -->\n    <div class=\"plans-wifi-icon-tim\">\n        <i class=\"fas fa-wifi\"><\/i>\n    <\/div>\n    <div class=\"plans-wifi-icon-tim\">\n        <i class=\"fas fa-wifi\"><\/i>\n    <\/div>\n    <div class=\"plans-wifi-icon-tim\">\n        <i class=\"fas fa-wifi\"><\/i>\n    <\/div>\n    \n    <!-- MAIN CONTAINER -->\n    <div class=\"plans-container-tim\">\n        <!-- ANNOUNCEMENT BADGE -->\n        <div class=\"plans-badge-tim\">\n            <i class=\"fas fa-fire\"><\/i>\n            <span>Planos Exclusivos<\/span>\n        <\/div>\n        \n        <!-- MAIN TITLE -->\n        <h2 class=\"plans-main-title-tim\">\n            <span class=\"desktop-only\">Escolha o <span class=\"plans-title-highlight-tim\">Plano Ideal<\/span> para voc\u00ea<\/span>\n            <span class=\"mobile-only\">Escolha o <span class=\"plans-title-highlight-tim\">Plano Ideal<\/span><br>para voc\u00ea<\/span>\n        <\/h2>\n        \n        <!-- SUBTITLE -->\n        <p class=\"plans-subtitle-tim\">\n            Velocidade real, estabilidade garantida e o melhor custo-benef\u00edcio de Curitiba. Conecte-se sem limites.\n        <\/p>\n        \n        <!-- DECORATIVE LINE -->\n        <div class=\"plans-decorative-line-tim\"><\/div>\n    <\/div>\n<\/section>\n\n<!-- 3. TERCEIRO: Cole este JavaScript no rodap\u00e9 do site (opcional) -->\n<script>\n    \/\/ PARALLAX EFFECT ON SCROLL PLANS TIM\n    window.addEventListener('scroll', () => {\n        const scrolled = window.pageYOffset;\n        const rate = scrolled * -0.2;\n        \n        const plansCircles = document.querySelectorAll('.plans-circle-tim');\n        if (plansCircles.length > 0) {\n            plansCircles.forEach((circle, index) => {\n                const speed = (index + 1) * 0.15;\n                circle.style.transform = translateY(${rate * speed}px);\n            });\n        }\n        \n        \/\/ Floating WiFi icons parallax\n        const plansWifiIcons = document.querySelectorAll('.plans-wifi-icon-tim');\n        if (plansWifiIcons.length > 0) {\n            plansWifiIcons.forEach((icon, index) => {\n                const speed = (index + 1) * 0.08;\n                icon.style.transform = translateY(${rate * speed}px) rotate(${scrolled * 0.05}deg);\n            });\n        }\n    });\n\n    \/\/ INTERSECTION OBSERVER FOR ANIMATIONS PLANS TIM\n    const observerOptionsPlans = {\n        threshold: 0.1,\n        rootMargin: '0px 0px -50px 0px'\n    };\n\n    const observerPlans = new IntersectionObserver((entries) => {\n        entries.forEach(entry => {\n            if (entry.isIntersecting) {\n                entry.target.style.animationPlayState = 'running';\n            }\n        });\n    }, observerOptionsPlans);\n\n    \/\/ OBSERVE ANIMATED ELEMENTS WHEN DOM IS READY PLANS TIM\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ OBSERVE ANIMATED ELEMENTS\n        const animatedElementsPlans = document.querySelectorAll('[class*=\"EntranceTim\"], [class*=\"plansGlow\"]');\n        animatedElementsPlans.forEach(el => {\n            if (observerPlans) {\n                observerPlans.observe(el);\n            }\n        });\n    });\n<\/script>\n\n<!-- FIM DO C\u00d3DIGO PARA ELEMENTOR T\u00cdTULO PLANOS TIM STYLE -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-90ae54c e-con-full e-flex e-con e-parent\" data-id=\"90ae54c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79d0fe0 elementor-widget elementor-widget-html\" data-id=\"79d0fe0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<!-- ABAS INTERNET \/ COMBO -->\n<div class=\"hb-tabs-puro-linha\">\n  <div class=\"hb-tabs-header-linha\">\n    <span class=\"hb-tab-item active\" onclick=\"switchTabLinha(0)\">Internet<\/span>\n    <span class=\"hb-tab-item\" onclick=\"switchTabLinha(1)\">Combo<\/span>\n    <div class=\"hb-tab-underline\"><\/div>\n  <\/div>\n  \n\n  <div class=\"hb-tabs-content-linha\">\n    <!-- Aba Internet -->\n    <div class=\"hb-tab-panel-linha active\">\n      <div class=\"hb-cards-precos\">\n        <!-- XXXXXXX PLANO 400MEGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>400MEGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 400 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 200 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/AWDIO-1.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('400MEGA', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 400 Mbps', 'Upload 200 Mbps', 'Roteador incluso'], 'R$ 89,90\/m\u00eas')\">+ Mais detalhes<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 89,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%20400MEGA%20-%20R$%2089,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n        <!-- XXXXXXX PLANO 600MEGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-selo-topo-linha\">\n            <span class=\"selo-texto\">Melhor oferta<\/span>\n            <div class=\"selo-linha\"><\/div>\n          <\/div>\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>600MEGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 600 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 300 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/AWDIO-1.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('600MEGA', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 600 Mbps', 'Upload 300 Mbps', 'Roteador incluso'], 'R$ 99,90\/m\u00eas')\">+ Mais detalhes<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 99,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%20600MEGA%20-%20R$%2099,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n       <!-- XXXXXXX PLANO 800MEGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>800MEGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 800 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 400 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/AWDIO-1.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('800MEGA', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 800 Mbps', 'Upload 400 Mbps', 'Roteador incluso'], 'R$ 119,90\/m\u00eas')\">+ Mais detalhes<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 119,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%20800MEGA%20-%20R$%20119,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n        <!-- XXXXXXX PLANO 1GIGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>1GIGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 1000 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 500 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/AWDIO-1.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('1GIGA', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 1 Gbps', 'Upload 500 Mbps', 'Roteador incluso'], 'R$ 129,90\/m\u00eas')\">+ Mais detalhes<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 129,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%201GIGA%20-%20R$%20129,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n        \n      <\/div>\n    <\/div>\n\n    <!-- Aba Combo -->\n    <div class=\"hb-tab-panel-linha\">\n      <div class=\"hb-cards-precos\">\n       <!-- XXXXXXX PLANO 500MEGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>500MEGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 500 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 250 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/700MB_COMBO.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('500MEGA Combo', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 500 Mbps', 'Upload 250 Mbps', 'Roteador incluso', 'TV por assinatura'], 'R$ 99,90\/m\u00eas', canais500Combo)\">Ver grade de canais<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 99,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%20500MEGA%20Combo%20-%20R$%2099,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n        <!-- XXXXXXX PLANO 700MEGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-selo-topo-linha\">\n            <span class=\"selo-texto\">Melhor oferta<\/span>\n            <div class=\"selo-linha\"><\/div>\n          <\/div>\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>700MEGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 700 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 350 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/700MB_COMBO.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('700MEGA Combo', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 700 Mbps', 'Upload 350 Mbps', 'Roteador incluso', 'TV por assinatura'], 'R$ 109,90\/m\u00eas', canais700Combo)\">Ver grade de canais<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 109,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%20700MEGA%20Combo%20-%20R$%20109,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n        <!-- XXXXXXX PLANO 800MEGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>800MEGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 800 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 400 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/800MB_COMBO.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('800MEGA Combo', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 800 Mbps', 'Upload 400 Mbps', 'Roteador incluso', 'TV por assinatura'], 'R$ 139,90\/m\u00eas', canais800Combo)\">Ver grade de canais<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 139,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%20800MEGA%20Combo%20-%20R$%20139,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n        <!-- XXXXXXX PLANO 1GIGA XXXXXXX -->\n        <div class=\"hb-plan-card destaque\">\n          <div class=\"hb-bloco-destaque\">\n            <div class=\"hb-plan-header-alinhado\">\n              <h3>1GIGA<\/h3>\n              <div class=\"hb-underline-left\"><\/div>\n            <\/div>\n            <ul class=\"hb-plan-info\">\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/instalacao.svg\" class=\"hb-icon\" \/> Instala\u00e7\u00e3o inclusa<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/cabo_de_Rede.svg\" class=\"hb-icon\" \/> Internet 100% fibra<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/download-1.svg\" class=\"hb-icon\" \/> Download 1000 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/upload-1.svg\" class=\"hb-icon\" \/> Upload 500 Mbps<\/li>\n              <li><img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/wifi-2.svg\" class=\"hb-icon\" \/> Roteador incluso<\/li>\n            <\/ul>\n          <\/div>\n          <div class=\"hb-produtos-inclusos\">\n            <strong>Produtos inclusos<\/strong>\n            <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/1GB_COMBOO.png\" alt=\"Produtos Inclusos\" \/>\n          <\/div>\n          <a href=\"#\" class=\"hb-plan-details\" onclick=\"openPopup('1GIGA Combo', ['Instala\u00e7\u00e3o inclusa', 'Internet 100% fibra', 'Download 1000 Mbps', 'Upload 500 Mbps', 'Roteador incluso', 'TV por assinatura'], 'R$ 169,90\/m\u00eas', canais1GigaCombo)\">Ver grade de canais<\/a>\n          <div class=\"hb-plan-bottom\">\n            <div class=\"hb-plan-price\"><strong>R$ 169,90\/m\u00eas<\/strong><\/div>\n          <\/div>\n          <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20de%20contratar%20o%20plano%201GIGA%20Combo%20-%20R$%20169,90\/m\u00eas\" target=\"_blank\" class=\"hb-plan-button-integrado\">Quero contratar<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- CSS -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;700&display=swap');\n\n.hb-tabs-puro-linha {\n  font-family: 'DM Sans', sans-serif;\n  max-width: 1140px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.hb-plan-card.destaque { position: relative; \n}\n\n.hb-selo-topo-linha {\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translateX(-48%);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  z-index: 2;\n}\n\n.selo-texto {\n  background-color: #e60000;\n  color: #fff;\n  font-size: 12px;\n  font-weight: 700;\n  padding: 2px 26px;\n  text-transform: uppercase;\n  letter-spacing: 3px;\n  border-radius: 0 0 35px 35px;\n  white-space: nowrap;\n}\n\n.hb-tabs-header-linha {\n  display: flex;\n  max-width: 1045px;\n  margin: 0 auto 12px auto;\n  position: relative;\n  gap: 40px;\n  border-bottom: 2px solid #3C3C3C;\n  padding-bottom: 2px;\n}\n\n.hb-tab-item {\n  font-size: 18px;\n  font-weight: 600;\n  color: #fff;\n  cursor: pointer;\n  transition: color 0.3s ease;\n}\n\n.hb-tab-item:hover,\n.hb-tab-item.active {\n  color: #e60000;\n}\n\n.hb-tab-underline {\n  position: absolute;\n  bottom: -1px;\n  height: 4px;\n  width: 80px;\n  background-color: #e60000;\n  border-radius: 12px 12px 0 0;\n  transition: left 0.3s ease, width 0.3s ease;\n  left: 0;\n}\n\n.hb-tab-panel-linha { display: none; }\n.hb-tab-panel-linha.active { display: block; }\n\n.hb-cards-precos {\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  gap: 15px;\n  padding-bottom: 10px;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.hb-cards-precos::-webkit-scrollbar {\n  display: none;\n}\n\n.hb-plan-card {\n  flex: 0 0 300px;\n  background: #1a1a1a;\n  border: 1px solid #3C3C3C;\n  border-radius: 15px;\n  padding: 30px;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n  overflow: hidden;\n  padding-bottom: 55px;\n}\n\n.hb-plan-header-alinhado {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.hb-plan-header-alinhado h3 {\n  color: #fff;\n  font-size: 28px;\n  font-weight: 700;\n  margin: 4px 20px 0px 38px;\n}\n.hb-underline-left {\n  height: 3px;\n  width: 60px;\n  background-color: #fff;\n  border-radius: 2px;\n  margin: 0px 0px 10px 38px;\n}\n\n.hb-plan-info {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  font-size: 15px;\n  color: #fff;\n  line-height: 1.6;\n}\n.hb-plan-info li {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding-left: 38px;\n  margin-bottom: 6px;\n}\n.hb-icon {\n  width: 20px;\n  height: 20px;\n  object-fit: contain;\n}\n\n.hb-produtos-inclusos {\n  margin-top: 10px;\n  text-align: left;\n  padding-left: 38px;\n}\n.hb-produtos-inclusos strong {\n  display: block;\n  font-weight: 600;\n  font-size: 15px;\n  margin-bottom: 6px;\n  color: #fff;\n}\n.hb-produtos-inclusos img {\n  width: 100%;\n  max-width: 240px;\n  border-radius: 10px;\n  object-fit: cover;\n}\n\n.hb-plan-details {\n  text-decoration: none;\n  color: #fff;\n  font-size: 15px;\n  font-weight: 500;\n  margin: 12px 0;\n  display: block;\n  text-align: left;\n  padding-left: 38px;\n}\n.hb-plan-details:hover {\n    Color:#e60000;\n}\n\n.hb-plan-bottom {\n  margin-top: 12px;\n  text-align: center;\n  padding-top: 12px;\n}\n\n.hb-plan-price {\n  font-size: 22px;\n  font-weight: 800;\n  color: #fff;\n  margin-bottom: 16px;\n}\n\n.hb-plan-button-integrado {\n  background-color: #e60000 !important;\n  color: #fff !important;\n  width: 100%;\n  border-radius: 0 0 14px 14px !important;\n  padding: 16px 24px;\n  font-weight: 600;\n  font-size: 16px;\n  cursor: pointer;\n  transition: background 0.3s ease, transform 0.3s ease;\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  text-align: center;\n}\n\n.hb-plan-button-integrado .arrow {\n  display: inline-block;\n  margin-left: 20px;\n  transition: transform 0.3s ease;\n}\n.hb-plan-button-integrado:hover {\n  background-color: #000 !important;\n  border: none !important;\n}\n\n\/* Mobile *\/\n@media (max-width: 600px) {\n    .hb-plan-card.destaque .hb-plan-header-alinhado{\n      margin-top: 20px;\n  }\n  .hb-plan-card {\n    flex: 0 0 90%;\n  }\n}\n\n\/* Desktop: mostra cards lado a lado sem scroll *\/\n@media (min-width: 992px) {\n  .hb-plan-card.destaque .hb-plan-header-alinhado{\n      margin-top: 20px;\n  }\n  .hb-produtos-inclusos img {\n      max-width: 250px !important;\n      width: auto !important;\n      height: auto !important;\n      display: inline-block !important;\n  }\n  .hb-cards-precos {\n    overflow-x: visible;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    padding-left: px;\n  }\n  \n  .hb-plan-header-alinhado h3,\n  .hb-underline-left,\n  .hb-plan-info li,\n  .hb-produtos-inclusos,\n  .hb-plan-details {\n      padding-left: 20px !important;\n      margin-left: 0 !important\n  }\n  .hb-underline-left {\n      margin-left: 20px !important\n  }\n\n  .hb-plan-card {\n    flex: 1 1 calc(25% - 15px);\n    max-width: calc(25% - 15px);\n  }\n  \n  .hb-plan-info {\n    font-size: 14px;\n  }\n  .hb-plan-info li {\n    gap: 8px;\n  }\n  .hb-icon {\n    width: 22px;\n    height: 22px;\n  }\n}\n<\/style>\n\n<!-- JS -->\n<script>\n    \/\/ LISTAS DE CANAIS POR PLANO\n    var canais500Combo = [\n        { nome: \"Globo\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboRPCCuritiba_White_Web.svg\" },\n        { nome: \"SBT\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/SBT_White.svg\" },\n        { nome: \"Band\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Band.svg\" },\n        { nome: \"Record\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Record_White.svg\" },\n        { nome: \"RedeTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeTV_White.svg\" },\n        { nome: \"Futura\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Futura_White.svg\" },\n        { nome: \"Aparecida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Aparecida_White.svg\" },\n        { nome: \"CNN\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CNNBrasil_White_Web.svg\" },\n        { nome: \"Gazeta\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gazeta_White.svg\" },\n        { nome: \"Rede Vida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeVida_White.svg\" },\n        { nome: \"TV Brasil\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TvBrasil_White_Web.svg\" },\n        { nome: \"Can\u00e7\u00e3o Nova\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CancaoNova.svg\" },\n        { nome: \"Ser\u00e1\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sera_White_Web.svg\" },\n        { nome: \"Desimpedidos\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Desimpedidos_White_Web.svg\" },\n        { nome: \"Canal do Artesanato\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CanaldoArtesanato_White_Web.svg\" },\n        { nome: \"InterTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/InterTVCabugi_White_Web.svg\" },\n        { nome: \"Paramount+\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/PPlus_Logo_Verticle-scaled.png\" }\n    ];\n\n    var canais700Combo = [\n        { nome: \"Globo\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboRPCCuritiba_White_Web.svg\" },\n        { nome: \"SBT\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/SBT_White.svg\" },\n        { nome: \"Band\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Band.svg\" },\n        { nome: \"Record\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Record_White.svg\" },\n        { nome: \"RedeTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeTV_White.svg\" },\n        { nome: \"Futura\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Futura_White.svg\" },\n        { nome: \"Aparecida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Aparecida_White.svg\" },\n        { nome: \"CNN\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CNNBrasil_White_Web.svg\" },\n        { nome: \"Gazeta\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gazeta_White.svg\" },\n        { nome: \"Rede Vida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeVida_White.svg\" },\n        { nome: \"TV Brasil\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TvBrasil_White_Web.svg\" },\n        { nome: \"Can\u00e7\u00e3o Nova\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CancaoNova.svg\" },\n        { nome: \"Ser\u00e1\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sera_White_Web.svg\" },\n        { nome: \"Desimpedidos\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Desimpedidos_White_Web.svg\" },\n        { nome: \"Canal do Artesanato\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CanaldoArtesanato_White_Web.svg\" },\n        { nome: \"InterTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/InterTVCabugi_White_Web.svg\" },\n        { nome: \"Paramount+\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/PPlus_Logo_Verticle-scaled.png\" }\n    ];\n\n    var canais800Combo = [\n        \/\/ Canais dos planos 500\/700\n        { nome: \"Globo\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboRPCCuritiba_White_Web.svg\" },\n        { nome: \"SBT\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/SBT_White.svg\" },\n        { nome: \"Band\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Band.svg\" },\n        { nome: \"Record\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Record_White.svg\" },\n        { nome: \"RedeTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeTV_White.svg\" },\n        { nome: \"Futura\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Futura_White.svg\" },\n        { nome: \"Aparecida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Aparecida_White.svg\" },\n        { nome: \"CNN\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CNNBrasil_White_Web.svg\" },\n        { nome: \"Gazeta\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gazeta_White.svg\" },\n        { nome: \"Rede Vida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeVida_White.svg\" },\n        { nome: \"TV Brasil\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TvBrasil_White_Web.svg\" },\n        { nome: \"Can\u00e7\u00e3o Nova\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CancaoNova.svg\" },\n        { nome: \"Ser\u00e1\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sera_White_Web.svg\" },\n        { nome: \"Universal\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Universal_White_Web.svg\" },\n        { nome: \"Desimpedidos\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Desimpedidos_White_Web.svg\" },\n        { nome: \"Canal do Artesanato\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CanaldoArtesanato_White_Web.svg\" },\n        { nome: \"InterTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/InterTVCabugi_White_Web.svg\" },\n        { nome: \"Paramount+\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/PPlus_Logo_Verticle-scaled.png\" },\n        \n        \/\/ Canais adicionais do plano 800MEGA\n        { nome: \"GloboNews\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboNews_White_Web.svg\" },\n        { nome: \"Multishow\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MultiShow_White_Web.svg\" },\n        { nome: \"SporTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sportv_White_Web.svg\" },\n        { nome: \"SporTV2\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sportv2_White_Web.svg\" },\n        { nome: \"SporTV3\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sportv3_White_Web.svg\" },\n        { nome: \"GNT\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gnt_White_Web.svg\" },\n        { nome: \"Modo Viagem\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ModoViagem_White_Web.svg\" },\n        { nome: \"Gloobinho\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gloobinho_White_Web.svg\" },\n        { nome: \"Gloob\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gloob_White_Web.svg\" },\n        { nome: \"Globoplay Novelas\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboPlayNovelas_White_Web.svg\" },\n        { nome: \"OFF\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Off_White_Web.svg\" },\n        { nome: \"BIS\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Bis_White_Web.svg\" },\n        { nome: \"MEGAPIX\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MegaPix_White_Web.svg\" },\n        { nome: \"STUDIO UNIVERSAL\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/StudioUniversal_Logo_Branca-scaled.png\" },\n        { nome: \"Canal Brasil\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/canal_brasil_fundo_escuro.png\" },\n        { nome: \"Agro+\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Agro_White_Web.svg\" },\n        { nome: \"AMC\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/AMC_watch_White_Web.svg\" },\n        { nome: \"Film&Arts\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/FilmsArt_White_Web.svg\" },\n        { nome: \"Band News\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/BandNews_White_Web.svg\" },\n        { nome: \"BandSports\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/BandSports_White_Web.svg\" },\n        { nome: \"USA\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Syfy_White_Web.svg\" },\n        { nome: \"ESPN\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN_White_Web.svg\" },\n        { nome: \"ESPN2\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN2_White_Web.svg\" },\n        { nome: \"ESPN3\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN3_White_Web.svg\" },\n        { nome: \"ESPN4\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN4_White_Web.svg\" },\n        { nome: \"ESPN5\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN5_White_Web.svg\" },\n        { nome: \"ESPN6\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN6_White_Web.svg\" },\n        { nome: \"MTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MTV_watch_White_Web.svg\" },\n        { nome: \"MTV 00s\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MTVLive_watch_White_Web.svg\" },\n        { nome: \"Nick Jr\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/NickJr_watch_White_Web.svg\" },\n        { nome: \"Nickelodeon\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Nickelodeon_watch_White_Web.svg\" },\n        { nome: \"Comedy Central\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ComedyCentral_watch_White_Web.svg\" },\n        { nome: \"Telecine Premium\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecinePremium_White_Web.svg\" },\n        { nome: \"Telecine Action\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineAction_White_Web.svg\" },\n        { nome: \"Telecine Touch\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineTouch_White_Web.svg\" },\n        { nome: \"Telecine Pipoca\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecinePipoca_White_Web.svg\" },\n        { nome: \"Telecine Fun\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineFun_White_Web.svg\" },\n        { nome: \"Telecine Cult\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineCult_White_Web.svg\" }\n    ];\n\n    var canais1GigaCombo = [\n        \/\/ Todos os canais do plano 800MEGA\n        { nome: \"Globo\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboRPCCuritiba_White_Web.svg\" },\n        { nome: \"SBT\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/SBT_White.svg\" },\n        { nome: \"Band\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Band.svg\" },\n        { nome: \"Record\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Record_White.svg\" },\n        { nome: \"RedeTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeTV_White.svg\" },\n        { nome: \"Futura\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Futura_White.svg\" },\n        { nome: \"Aparecida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Aparecida_White.svg\" },\n        { nome: \"CNN\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CNNBrasil_White_Web.svg\" },\n        { nome: \"Gazeta\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gazeta_White.svg\" },\n        { nome: \"Rede Vida\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RedeVida_White.svg\" },\n        { nome: \"TV Brasil\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TvBrasil_White_Web.svg\" },\n        { nome: \"Can\u00e7\u00e3o Nova\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CancaoNova.svg\" },\n        { nome: \"Ser\u00e1\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sera_White_Web.svg\" },\n        { nome: \"Cultura\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Cultura_White_Web.svg\" },\n        { nome: \"TV Ratimbum\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Ratimbum_White_Web.svg\" },\n        { nome: \"Universal\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Universal_White_Web.svg\" },\n        { nome: \"Desimpedidos\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Desimpedidos_White_Web.svg\" },\n        { nome: \"Canal do Artesanato\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/CanaldoArtesanato_White_Web.svg\" },\n        { nome: \"InterTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/InterTVCabugi_White_Web.svg\" },\n        { nome: \"Paramount+\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/PPlus_Logo_Verticle-scaled.png\" },\n        { nome: \"GloboNews\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboNews_White_Web.svg\" },\n        { nome: \"Multishow\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MultiShow_White_Web.svg\" },\n        { nome: \"SporTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sportv_White_Web.svg\" },\n        { nome: \"SporTV2\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sportv2_White_Web.svg\" },\n        { nome: \"SporTV3\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sportv3_White_Web.svg\" },\n        { nome: \"GNT\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gnt_White_Web.svg\" },\n        { nome: \"Modo Viagem\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ModoViagem_White_Web.svg\" },\n        { nome: \"Gloobinho\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gloobinho_White_Web.svg\" },\n        { nome: \"Gloob\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gloob_White_Web.svg\" },\n        { nome: \"Globoplay Novelas\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboPlayNovelas_White_Web.svg\" },\n        { nome: \"OFF\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Off_White_Web.svg\" },\n        { nome: \"BIS\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Bis_White_Web.svg\" },\n        { nome: \"MEGAPIX\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MegaPix_White_Web.svg\" },\n        { nome: \"STUDIO UNIVERSAL\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/StudioUniversal_Logo_Branca-scaled.png\" },\n        { nome: \"Canal Brasil\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/canal_brasil_fundo_escuro.png\" },\n        { nome: \"AMC\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/AMC_watch_White_Web.svg\" },\n        { nome: \"Film&Arts\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/FilmsArt_White_Web.svg\" },\n        { nome: \"USA\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Syfy_White_Web.svg\" },\n        { nome: \"ESPN\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN_White_Web.svg\" },\n        { nome: \"ESPN2\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN2_White_Web.svg\" },\n        { nome: \"ESPN3\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN3_White_Web.svg\" },\n        { nome: \"ESPN4\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN4_White_Web.svg\" },\n        { nome: \"ESPN5\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN5_White_Web.svg\" },\n        { nome: \"ESPN6\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN6_White_Web.svg\" },\n        { nome: \"Record News\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/RecordNews_White_Web.svg\" },\n        { nome: \"MTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MTV_watch_White_Web.svg\" },\n        { nome: \"MTV 00s\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MTVLive_watch_White_Web.svg\" },\n        { nome: \"Nick Jr\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/NickJr_watch_White_Web.svg\" },\n        { nome: \"Nickelodeon\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Nickelodeon_watch_White_Web.svg\" },\n        { nome: \"Comedy Central\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ComedyCentral_watch_White_Web.svg\" },\n        { nome: \"Telecine Premium\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecinePremium_White_Web.svg\" },\n        { nome: \"Telecine Action\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineAction_White_Web.svg\" },\n        { nome: \"Telecine Touch\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineTouch_White_Web.svg\" },\n        { nome: \"Telecine Pipoca\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecinePipoca_White_Web.svg\" },\n        { nome: \"Telecine Fun\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineFun_White_Web.svg\" },\n        { nome: \"Telecine Cult\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/TelecineCult_White_Web.svg\" },\n        \n        \/\/ Canais exclusivos do plano 1GIGA\n        { nome: \"Premiere Clube\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere1_White_Web.svg\" },\n        { nome: \"Premiere 2\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere2_White_Web.svg\" },\n        { nome: \"Premiere 3\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere3_White_Web.svg\" },\n        { nome: \"Premiere 4\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere4_White_Web.svg\" },\n        { nome: \"Premiere 5\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere5_White_Web.svg\" },\n        { nome: \"Premiere 6\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere6_White_Web.svg\" },\n        { nome: \"Premiere 7\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere7_White_Web.svg\" },\n        { nome: \"Premiere 8\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Premiere8_White_Web.svg\" }\n    ];\n\nfunction switchTabLinha(index) {\n  const tabs = document.querySelectorAll('.hb-tab-item');\n  const panels = document.querySelectorAll('.hb-tab-panel-linha');\n  const underline = document.querySelector('.hb-tab-underline');\n\n  tabs.forEach(tab => tab.classList.remove('active'));\n  panels.forEach(panel => panel.classList.remove('active'));\n\n  tabs[index].classList.add('active');\n  panels[index].classList.add('active');\n\n  const tab = tabs[index];\n  underline.style.left = tab.offsetLeft + \"px\";\n  underline.style.width = tab.offsetWidth + \"px\";\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const activeTab = document.querySelector('.hb-tab-item.active');\n  const underline = document.querySelector('.hb-tab-underline');\n  underline.style.left = activeTab.offsetLeft + \"px\";\n  underline.style.width = activeTab.offsetWidth + \"px\";\n});\n<\/script>\n\n<!-- POPUP PLANOS TIM STYLE -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\n<style>\n        \/* POPUP OVERLAY *\/\n        .popup-overlay-tim {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.8);\n            display: none;\n            justify-content: center;\n            align-items: center;\n            z-index: 9999;\n            backdrop-filter: blur(10px);\n            animation: popupFadeIn 0.3s ease-out;\n            overflow-y: auto;\n            -webkit-overflow-scrolling: touch;\n        }\n\n        .popup-overlay-tim.active {\n            display: flex;\n        }\n\n        \/* Prevenir scroll da p\u00e1gina de fundo *\/\n        body.popup-open {\n            overflow: hidden;\n        }\n\n        @keyframes popupFadeIn {\n            0% { opacity: 0; }\n            100% { opacity: 1; }\n        }\n\n        \/* POPUP CONTAINER *\/\n        .popup-container-tim {\n            background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);\n            border-radius: 20px;\n            padding: 25px;\n            max-width: 600px;\n            width: 95%;\n            max-height: 85vh;\n            overflow-y: auto;\n            position: relative;\n            border: 1px solid rgba(220, 38, 38, 0.2);\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n            animation: popupSlideIn 0.4s ease-out;\n        }\n\n        @keyframes popupSlideIn {\n            0% { \n                transform: translateY(-50px) scale(0.9); \n                opacity: 0; \n            }\n            100% { \n                transform: translateY(0) scale(1); \n                opacity: 1; \n            }\n        }\n\n        \/* CLOSE BUTTON *\/\n        .popup-close-tim {\n            position: absolute;\n            top: 15px;\n            right: 15px;\n            width: 40px;\n            height: 40px;\n            background: rgba(220, 38, 38, 0.1);\n            border: 1px solid rgba(220, 38, 38, 0.3);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            color: #dc2626;\n            font-size: 1.2rem;\n        }\n\n        .popup-close-tim:hover {\n            background: rgba(220, 38, 38, 0.2);\n            transform: scale(1.1);\n        }\n\n        \/* POPUP HEADER *\/\n        .popup-header-tim {\n            text-align: center;\n            margin-bottom: 20px;\n        }\n\n        .popup-title-tim {\n            font-size: 1.6rem;\n            font-weight: 700;\n            color: #f8fafc;\n            margin-bottom: 8px;\n            font-family: 'Inter', sans-serif;\n        }\n\n        .popup-subtitle-tim {\n            color: rgba(248, 250, 252, 0.7);\n            font-size: 0.85rem;\n            font-family: 'Inter', sans-serif;\n        }\n\n        \/* POPUP CONTENT *\/\n        .popup-content-tim {\n            margin-bottom: 20px;\n        }\n\n        .popup-plan-details-tim {\n            background: rgba(0, 0, 0, 0.3);\n            border-radius: 12px;\n            padding: 18px;\n            margin-bottom: 15px;\n            border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .popup-plan-name-tim {\n            font-size: 1.2rem;\n            font-weight: 600;\n            color: #dc2626;\n            margin-bottom: 12px;\n            font-family: 'Inter', sans-serif;\n            text-align: center;\n        }\n\n        .popup-plan-price-tim {\n            font-size: 1.4rem;\n            font-weight: 700;\n            color: #f8fafc;\n            margin-bottom: 15px;\n            font-family: 'Inter', sans-serif;\n            text-align: center;\n        }\n\n        .popup-plan-streaming-tim {\n            background: rgba(220, 38, 38, 0.1);\n            border: 1px solid rgba(220, 38, 38, 0.2);\n            border-radius: 8px;\n            padding: 12px;\n            margin-bottom: 15px;\n            text-align: center;\n        }\n\n        .popup-streaming-title-tim {\n            font-size: 1rem;\n            font-weight: 600;\n            color: #dc2626;\n            margin-bottom: 6px;\n            font-family: 'Inter', sans-serif;\n        }\n\n        .popup-streaming-desc-tim {\n            font-size: 0.85rem;\n            color: rgba(248, 250, 252, 0.8);\n            font-family: 'Inter', sans-serif;\n            line-height: 1.4;\n        }\n\n        .popup-benefits-list-tim {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .popup-benefits-list-tim li {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 6px 0;\n            color: #f8fafc;\n            font-size: 0.85rem;\n            font-family: 'Inter', sans-serif;\n        }\n\n        .popup-benefits-list-tim li i {\n            color: #4ade80;\n            font-size: 0.9rem;\n        }\n\n        \/* GRADE DE CANAIS - ESTILO COMPACTO *\/\n        .popup-channels-tim {\n            background: rgba(0, 0, 0, 0.3);\n            border-radius: 12px;\n            padding: 18px;\n            margin-bottom: 15px;\n            border: 1px solid rgba(255, 255, 255, 0.1);\n        }\n\n        .channels-header-tim {\n            font-size: 1rem;\n            font-weight: 600;\n            color: #dc2626;\n            margin-bottom: 15px;\n            font-family: 'Inter', sans-serif;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 6px;\n        }\n\n        .channels-grid-modern-tim {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));\n            gap: 12px;\n            padding: 5px;\n            justify-items: center;\n        }\n\n        .channel-wrapper-tim {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-start;\n            width: 85px;\n        }\n\n        .channel-item-modern-tim {\n            background: rgba(255, 255, 255, 0.05);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            border-radius: 8px;\n            padding: 10px;\n            text-align: center;\n            transition: all 0.3s ease;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 85px;\n            height: 60px;\n            position: relative;\n            overflow: hidden;\n            margin-bottom: 6px;\n        }\n\n        .channel-item-modern-tim:hover {\n            background: rgba(220, 38, 38, 0.1);\n            border-color: rgba(220, 38, 38, 0.2);\n            transform: translateY(-1px);\n            box-shadow: 0 4px 15px rgba(220, 38, 38, 0.15);\n        }\n\n        .channel-logo-modern-tim {\n            width: 50px;\n            height: 30px;\n            object-fit: contain;\n            object-position: center;\n            filter: brightness(0.9) contrast(1.1);\n            transition: all 0.3s ease;\n            flex-shrink: 0;\n        }\n\n        .channel-item-modern-tim:hover .channel-logo-modern-tim {\n            filter: brightness(1.1) contrast(1.2);\n            transform: scale(1.03);\n        }\n\n        .channel-name-modern-tim {\n            font-weight: 500;\n            line-height: 1.1;\n            font-size: 0.45rem;\n            color: rgba(248, 250, 252, 0.7);\n            margin-top: 0;\n            font-family: 'Inter', sans-serif;\n            text-align: center;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            max-width: 85px;\n            width: 100%;\n        }\n\n        \/* POPUP BUTTONS - SIMPLIFICADO *\/\n        .popup-buttons-tim {\n            display: flex;\n            gap: 12px;\n            margin-top: 15px;\n            justify-content: center;\n        }\n\n        .popup-btn-tim {\n            padding: 14px 28px;\n            border-radius: 10px;\n            font-family: 'Inter', sans-serif;\n            font-weight: 600;\n            font-size: 0.9rem;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            border: none !important;\n            outline: none !important;\n            box-shadow: none !important;\n            text-align: center;\n            text-decoration: none;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            min-width: 140px;\n        }\n\n        .popup-btn-primary-tim {\n            background: #dc2626 !important;\n            color: white !important;\n            border: none !important;\n            outline: none !important;\n            box-shadow: none !important;\n        }\n\n        .popup-btn-primary-tim:hover {\n            background: #000000 !important;\n            border: none !important;\n            outline: none !important;\n            box-shadow: none !important;\n        }\n\n        \/* RESPONSIVE DESIGN *\/\n        @media (max-width: 768px) {\n            .popup-container-tim {\n                padding: 18px;\n                margin: 15px;\n                max-width: calc(100% - 30px);\n            }\n\n            .popup-title-tim {\n                font-size: 1.4rem;\n            }\n\n            .popup-buttons-tim {\n                flex-direction: column;\n                gap: 10px;\n            }\n\n            .popup-btn-tim {\n                width: 100%;\n                min-width: auto;\n            }\n\n            .channels-grid-modern-tim {\n                grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));\n                gap: 10px;\n            }\n\n            .channel-wrapper-tim {\n                width: 75px;\n            }\n\n            .channel-item-modern-tim {\n                width: 75px;\n                height: 50px;\n                padding: 8px;\n                margin-bottom: 5px;\n            }\n\n            .channel-logo-modern-tim {\n                width: 42px;\n                height: 26px;\n            }\n\n            .channel-name-modern-tim {\n                font-size: 0.4rem;\n                max-width: 75px;\n                margin-top: 0;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .popup-container-tim {\n                padding: 15px;\n                margin: 10px;\n                max-width: calc(100% - 20px);\n            }\n\n            .popup-title-tim {\n                font-size: 1.2rem;\n            }\n\n            .channels-grid-modern-tim {\n                grid-template-columns: repeat(auto-fit, minmax(65px, 1fr));\n                gap: 8px;\n            }\n\n            .channel-wrapper-tim {\n                width: 65px;\n            }\n\n            .channel-item-modern-tim {\n                width: 65px;\n                height: 45px;\n                padding: 6px;\n                margin-bottom: 4px;\n            }\n\n            .channel-logo-modern-tim {\n                width: 36px;\n                height: 22px;\n            }\n\n            .channel-name-modern-tim {\n                font-size: 0.35rem;\n                max-width: 65px;\n                margin-top: 0;\n            }\n        }\n    <\/style>\n\n<!-- POPUP HTML -->\n<div class=\"popup-overlay-tim\" id=\"popupPlanos\">\n    <div class=\"popup-container-tim\">\n        <!-- CLOSE BUTTON -->\n        <div class=\"popup-close-tim\" onclick=\"closePopup()\">\n            <i class=\"fas fa-times\"><\/i>\n        <\/div>\n\n        <!-- POPUP HEADER -->\n        <div class=\"popup-header-tim\">\n            <h3 class=\"popup-title-tim\" id=\"popupTitle\">Detalhes do Plano<\/h3>\n            <p class=\"popup-subtitle-tim\">Confira os benef\u00edcios inclusos<\/p>\n        <\/div>\n\n        <!-- POPUP CONTENT -->\n        <div class=\"popup-content-tim\">\n            <!-- PLAN DETAILS -->\n            <div class=\"popup-plan-details-tim\" id=\"popupPlanDetails\">\n                <div class=\"popup-plan-name-tim\" id=\"popupPlanName\">Plano Selecionado<\/div>\n                <div class=\"popup-plan-price-tim\" id=\"popupPlanPrice\">Pre\u00e7o<\/div>\n                \n                <!-- STREAMING INFO (s\u00f3 aparece para planos combo) -->\n                <div class=\"popup-plan-streaming-tim\" id=\"popupStreamingInfo\" style=\"display: none;\">\n                    <div class=\"popup-streaming-title-tim\">8 perfis e 4 telas simult\u00e2neas<\/div>\n                    <div class=\"popup-streaming-desc-tim\">Crie at\u00e9 8 perfis e assista em at\u00e9 4 telas de forma simult\u00e2neas em diferentes dispositivos.<\/div>\n                <\/div>\n                \n                <ul class=\"popup-benefits-list-tim\" id=\"popupBenefits\">\n                    <!-- Benefits will be inserted by JavaScript -->\n                <\/ul>\n            <\/div>\n\n            <!-- GRADE DE CANAIS (s\u00f3 aparece para planos combo) -->\n            <div class=\"popup-channels-tim\" id=\"popupChannels\" style=\"display: none;\">\n                <div class=\"channels-header-tim\">\n                    <i class=\"fas fa-tv\"><\/i>\n                    Canais Inclusos\n                <\/div>\n                <div class=\"channels-grid-modern-tim\" id=\"channelsContent\">\n                    <!-- Channels will be inserted by JavaScript -->\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- POPUP BUTTONS -->\n        <div class=\"popup-buttons-tim\">\n            <button class=\"popup-btn-tim popup-btn-primary-tim\" onclick=\"contractPlan()\">\n                <i class=\"fab fa-whatsapp\"><\/i>\n                Contratar Agora\n            <\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ POPUP PLANOS FUNCTIONALITY\n    function openPopup(planName, benefits, price, channels = null) {\n        console.log('openPopup chamada:', planName);\n        \n        \/\/ Salvar posi\u00e7\u00e3o atual do scroll antes de abrir o popup\n        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n        \n        const popup = document.getElementById('popupPlanos');\n        const popupTitle = document.getElementById('popupTitle');\n        const popupPlanName = document.getElementById('popupPlanName');\n        const popupPlanPrice = document.getElementById('popupPlanPrice');\n        const popupBenefits = document.getElementById('popupBenefits');\n        const popupChannels = document.getElementById('popupChannels');\n        const popupStreamingInfo = document.getElementById('popupStreamingInfo');\n        const channelsContent = document.getElementById('channelsContent');\n\n        if (!popup) {\n            console.error('Popup n\u00e3o encontrado!');\n            return;\n        }\n\n        \/\/ Update popup content\n        popupTitle.textContent = 'Detalhes do plano';\n        popupPlanName.textContent = planName;\n        popupPlanPrice.textContent = price;\n        \n        \/\/ Store plan info for contract function\n        window.currentPlan = {\n            name: planName,\n            price: price,\n            benefits: benefits,\n            channels: channels\n        };\n        \n        \/\/ Clear benefits section (not showing benefits anymore)\n        popupBenefits.innerHTML = '';\n\n        \/\/ Show streaming info and channels only for combo plans\n        if (planName.toLowerCase().indexOf('combo') !== -1) {\n            popupStreamingInfo.style.display = 'block';\n            popupChannels.style.display = 'block';\n            renderChannels(channelsContent, channels);\n        } else {\n            popupStreamingInfo.style.display = 'none';\n            popupChannels.style.display = 'none';\n        }\n\n        \/\/ Show popup e prevenir scroll da p\u00e1gina\n        popup.classList.add('active');\n        document.body.classList.add('popup-open');\n        \n        \/\/ Manter a posi\u00e7\u00e3o do scroll\n        document.body.style.top = `-${scrollTop}px`;\n        document.body.style.position = 'fixed';\n        document.body.style.width = '100%';\n        \n        console.log('Popup deveria estar vis\u00edvel agora');\n    }\n\n    function closePopup() {\n        const popup = document.getElementById('popupPlanos');\n        if (popup) {\n            popup.classList.remove('active');\n            document.body.classList.remove('popup-open');\n            \n            \/\/ Restaurar posi\u00e7\u00e3o do scroll\n            const scrollY = document.body.style.top;\n            document.body.style.position = '';\n            document.body.style.top = '';\n            document.body.style.width = '';\n            window.scrollTo(0, parseInt(scrollY || '0') * -1);\n        }\n    }\n\n    function contractPlan() {\n        if (!window.currentPlan) {\n            alert('Erro: Dados do plano n\u00e3o encontrados!');\n            return;\n        }\n\n        const planData = window.currentPlan;\n        const message = 'Ol\u00e1! Gostaria de contratar o plano ' + planData.name + ' - ' + planData.price + '.\\n\\nBeneficios inclusos:\\n' + planData.benefits.join('\\n- ') + '\\n\\nPor favor, entrem em contato comigo para finalizar a contrata\u00e7\u00e3o!';\n\n        const whatsappUrl = 'https:\/\/wa.me\/554130731297?text=' + encodeURIComponent(message);\n        window.open(whatsappUrl, '_blank');\n\n        closePopup();\n    }\n\n    function renderChannels(container, customChannels = null) {\n        container.innerHTML = '';\n        \n        \/\/ Lista padr\u00e3o de canais (fallback)\n        var canaisDefault = [\n            { nome: \"Globo\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2013\/03\/rede-globo-vector-logo.png\" },\n            { nome: \"SBT\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/06-SBT.png\" },\n            { nome: \"Record\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2013\/03\/record-vector-logo.png\" },\n            { nome: \"Band\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2014\/09\/band-vector-logo.png\" },\n            { nome: \"RedeTV!\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2013\/03\/redetv-vector-logo.png\" },\n            { nome: \"SporTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Sportv_White_Web.svg\" },\n            { nome: \"ESPN\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ESPN_White_Web.svg\" },\n            { nome: \"Fox Sports\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/08\/Fox_Sports_2012.svg\" },\n            { nome: \"HBO\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2012\/10\/hbo-vector-logo.png\" },\n            { nome: \"Sony Channel\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b9\/Sony_Channel_Logo.png\" },\n            { nome: \"Warner\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/5e\/Warner2018.png\" },\n            { nome: \"Universal\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Universal_White_Web.svg\" },\n            { nome: \"AXN\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/52\/AXN_logo_%282015%29.svg\" },\n            { nome: \"Multishow\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MultiShow_White_Web.svg\" },\n            { nome: \"MTV\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/MTV_watch_White_Web.svg\" },\n            { nome: \"Comedy Central\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/ComedyCentral_watch_White_Web.svg\" },\n            { nome: \"Discovery\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/27\/Discovery_Channel_-_Logo_2019.svg\" },\n            { nome: \"Cartoon Network\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2012\/11\/cartoon-network-vector-logo.png\" },\n            { nome: \"Disney Channel\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2012\/10\/disney-channel-vector-logo.png\" },\n            { nome: \"Nickelodeon\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Nickelodeon_watch_White_Web.svg\" },\n            { nome: \"Gloob\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/Gloob_White_Web.svg\" },\n            { nome: \"GloboNews\", logo: \"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/GloboNews_White_Web.svg\" },\n            { nome: \"CNN Brasil\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b1\/CNN.svg\" },\n            { nome: \"National Geographic\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2012\/10\/national-geographic-vector-logo.png\" },\n            { nome: \"Animal Planet\", logo: \"https:\/\/logoeps.com\/wp-content\/uploads\/2012\/10\/animal-planet-vector-logo.png\" },\n            { nome: \"History\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/01\/History_%282021%29.svg\" },\n            { nome: \"Lifetime\", logo: \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/9c\/Logo_Lifetime_2020.svg\" }\n        ];\n        \n        \/\/ Usar canais customizados se fornecidos, sen\u00e3o usar a lista padr\u00e3o\n        var canaisParaExibir = customChannels || canaisDefault;\n        \n        \/\/ Criar grid moderno\n        for (var i = 0; i < canaisParaExibir.length; i++) {\n            var canal = canaisParaExibir[i];\n            \n            \/\/ Criar wrapper para cada canal\n            var channelWrapper = document.createElement('div');\n            channelWrapper.className = 'channel-wrapper-tim';\n            \n            \/\/ Criar container da logo\n            var channelItem = document.createElement('div');\n            channelItem.className = 'channel-item-modern-tim';\n            \n            var logoImg = document.createElement('img');\n            logoImg.className = 'channel-logo-modern-tim';\n            logoImg.src = canal.logo;\n            logoImg.alt = canal.nome;\n            logoImg.onerror = function() {\n                this.style.display = 'none';\n            };\n            \n            \/\/ Criar nome do canal (fora do container)\n            var channelName = document.createElement('div');\n            channelName.className = 'channel-name-modern-tim';\n            channelName.textContent = canal.nome;\n            \n            \/\/ Montar a estrutura\n            channelItem.appendChild(logoImg);\n            channelWrapper.appendChild(channelItem);\n            channelWrapper.appendChild(channelName);\n            container.appendChild(channelWrapper);\n        }\n    }\n\n    \/\/ Close popup when clicking outside\n    document.addEventListener('click', function(e) {\n        const popup = document.getElementById('popupPlanos');\n        if (e.target === popup) {\n            closePopup();\n        }\n    });\n\n    \/\/ Close popup with ESC key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            closePopup();\n        }\n    });\n\n    \/\/ Debug on load\n    document.addEventListener('DOMContentLoaded', function() {\n        console.log('DOM carregado - popup pronto');\n    });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-254979e e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet e-flex e-con e-parent\" data-id=\"254979e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec88571 elementor-widget elementor-widget-html\" data-id=\"ec88571\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- T\u00cdTULO HB TELECOM ESTILO TIM - COPIE DAQUI PARA O ELEMENTOR -->\r\n\r\n<!-- 1. PRIMEIRO: Cole este CSS no campo \"CSS Customizado\" do Elementor -->\r\n<style>\r\n        \/* VARI\u00c1VEIS CSS T\u00cdTULO HB TELECOM TIM STYLE *\/\r\n        :root {\r\n            --primary-red: #dc2626;\r\n            --gradient-red: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            --dark-bg: #0f0f0f;\r\n            --text-light: #f8fafc;\r\n            --text-gray: #6c757d;\r\n        }\r\n\r\n        \/* SECTION T\u00cdTULO HB TELECOM TIM STYLE *\/\r\n        .hb-title-section-tim {\r\n            position: relative;\r\n            padding: 60px 0 40px 0;\r\n            background: #000000;\r\n            overflow: hidden;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* BACKGROUND ANIMATED ELEMENTS *\/\r\n        .hb-bg-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .hb-circle-tim {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, rgba(255, 107, 107, 0.05) 40%, transparent 70%);\r\n            animation: floatHbTim 12s ease-in-out infinite;\r\n            filter: blur(1px);\r\n        }\r\n\r\n        .hb-circle-tim:nth-child(1) {\r\n            width: 200px;\r\n            height: 200px;\r\n            top: -20%;\r\n            right: 10%;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .hb-circle-tim:nth-child(2) {\r\n            width: 150px;\r\n            height: 150px;\r\n            bottom: -15%;\r\n            left: 15%;\r\n            animation-delay: 6s;\r\n        }\r\n\r\n        @keyframes floatHbTim {\r\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.3; }\r\n            50% { transform: translateY(-20px) scale(1.1) rotate(180deg); opacity: 0.5; }\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY *\/\r\n        .hb-grid-overlay-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                linear-gradient(rgba(220, 38, 38, 0.02) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(220, 38, 38, 0.02) 1px, transparent 1px);\r\n            background-size: 80px 80px;\r\n            animation: hbGridMoveTim 30s linear infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        @keyframes hbGridMoveTim {\r\n            0% { transform: translate(0, 0); }\r\n            100% { transform: translate(80px, 80px); }\r\n        }\r\n\r\n        \/* MAIN CONTAINER *\/\r\n        .hb-container-tim {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 0 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE *\/\r\n        .hb-badge-tim {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 8px 20px;\r\n            border-radius: 25px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            margin-bottom: 25px;\r\n            animation: hbBadgeEntranceTim 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.3);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .hb-badge-tim i {\r\n            color: #ffd700;\r\n            animation: hbSignalSpinTim 4s linear infinite;\r\n        }\r\n\r\n        @keyframes hbBadgeEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px) scale(0.8); }\r\n            100% { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n\r\n        @keyframes hbSignalSpinTim {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* MAIN TITLE *\/\r\n        .hb-main-title-tim {\r\n            font-size: 2.8rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 20px !important;\r\n            line-height: 1.2 !important;\r\n            animation: hbTitleEntranceTim 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        \/* RESPONSIVE TITLE DISPLAY *\/\r\n        .desktop-only {\r\n            display: inline;\r\n        }\r\n\r\n        .mobile-only {\r\n            display: none;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .desktop-only {\r\n                display: none;\r\n            }\r\n\r\n            .mobile-only {\r\n                display: inline;\r\n            }\r\n        }\r\n\r\n        .hb-title-highlight-tim {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: hbTitleGradientTim 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .hb-title-highlight-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -4px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: hbTitleUnderline 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes hbTitleUnderline {\r\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\r\n            50% { opacity: 1; transform: scaleX(1.05); }\r\n        }\r\n\r\n        @keyframes hbTitleGradientTim {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes hbTitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-50px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* SUBTITLE *\/\r\n        .hb-subtitle-tim {\r\n            font-size: 1.1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 0 !important;\r\n            animation: hbSubtitleEntranceTim 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 650px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @keyframes hbSubtitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* DECORATIVE ELEMENTS *\/\r\n        .hb-decorative-line-tim {\r\n            width: 80px;\r\n            height: 3px;\r\n            background: var(--gradient-red);\r\n            margin: 30px auto 0;\r\n            border-radius: 2px;\r\n            animation: hbLineEntranceTim 1s ease-out 1s both;\r\n            position: relative;\r\n        }\r\n\r\n        .hb-decorative-line-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 4px;\r\n            z-index: -1;\r\n            animation: hbLineGlow 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes hbLineGlow {\r\n            0%, 100% { opacity: 0.3; transform: scale(1); }\r\n            50% { opacity: 0.6; transform: scale(1.1); }\r\n        }\r\n\r\n        @keyframes hbLineEntranceTim {\r\n            0% { opacity: 0; transform: scaleX(0); }\r\n            100% { opacity: 1; transform: scaleX(1); }\r\n        }\r\n\r\n        \/* HB TELECOM ICONS WITH WAVES *\/\r\n        .hb-icon-tim {\r\n            position: absolute;\r\n            z-index: 2;\r\n            color: #dc2626;\r\n            font-size: 32px;\r\n            animation: hbIconFloat 8s ease-in-out infinite;\r\n            opacity: 0.8;\r\n            display: none; \/* Oculto por padr\u00e3o no desktop *\/\r\n        }\r\n\r\n        .hb-icon-tim:nth-child(1) {\r\n            top: 35%;\r\n            left: 25%;\r\n            animation-delay: 0s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .hb-icon-tim:nth-child(2) {\r\n            top: 70%;\r\n            left: 50%;\r\n            animation-delay: 2s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .hb-icon-tim:nth-child(3) {\r\n            top: 35%;\r\n            right: 45%;\r\n            animation-delay: 4s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .hb-icon-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 50px;\r\n            height: 50px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: hbIconWaves 3s ease-out infinite;\r\n            opacity: 0;\r\n        }\r\n\r\n        .hb-icon-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 80px;\r\n            height: 80px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: hbIconWaves 3s ease-out infinite;\r\n            animation-delay: 1s;\r\n            opacity: 0;\r\n        }\r\n\r\n        @keyframes hbIconFloat {\r\n            0%, 100% { \r\n                transform: translateY(0) translateX(0) scale(1) rotate(0deg); \r\n                opacity: 0.6; \r\n            }\r\n            25% { \r\n                transform: translateY(-15px) translateX(8px) scale(1.1) rotate(10deg); \r\n                opacity: 0.8; \r\n            }\r\n            50% { \r\n                transform: translateY(-8px) translateX(-5px) scale(0.95) rotate(-5deg); \r\n                opacity: 1; \r\n            }\r\n            75% { \r\n                transform: translateY(-20px) translateX(10px) scale(1.05) rotate(8deg); \r\n                opacity: 0.7; \r\n            }\r\n        }\r\n\r\n        @keyframes hbIconWaves {\r\n            0% {\r\n                opacity: 0.6;\r\n                transform: translate(-50%, -50%) scale(0.5);\r\n            }\r\n            50% {\r\n                opacity: 0.3;\r\n                transform: translate(-50%, -50%) scale(1);\r\n            }\r\n            100% {\r\n                opacity: 0;\r\n                transform: translate(-50%, -50%) scale(1.5);\r\n            }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN *\/\r\n        @media (max-width: 1024px) {\r\n            .hb-container-tim {\r\n                padding: 0 25px;\r\n            }\r\n            \r\n            .hb-main-title-tim {\r\n                font-size: 2.4rem !important;\r\n            }\r\n            \r\n            .hb-subtitle-tim {\r\n                font-size: 1rem !important;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .hb-title-section-tim {\r\n                padding: 50px 0 35px 0;\r\n            }\r\n            \r\n            .hb-container-tim {\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .hb-main-title-tim {\r\n                font-size: 2rem !important;\r\n                margin-bottom: 16px !important;\r\n            }\r\n            \r\n            .hb-subtitle-tim {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .hb-badge-tim {\r\n                font-size: 0.8rem;\r\n                padding: 6px 16px;\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .hb-decorative-line-tim {\r\n                width: 60px;\r\n                margin-top: 25px;\r\n            }\r\n            \r\n            \/* MOBILE HB TELECOM ICONS POSITIONING - APENAS VIS\u00cdVEL NO MOBILE *\/\r\n            .hb-icon-tim {\r\n                display: block; \/* Mostra apenas no mobile *\/\r\n            }\r\n            \r\n            .hb-icon-tim:nth-child(1) {\r\n                top: 15%;\r\n                left: 5%;\r\n            }\r\n\r\n            .hb-icon-tim:nth-child(2) {\r\n                display: none; \/* Esconde o segundo \u00edcone no mobile *\/\r\n            }\r\n\r\n            .hb-icon-tim:nth-child(3) {\r\n                top: 15%;\r\n                right: 5%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .hb-title-section-tim {\r\n                padding: 40px 0 30px 0;\r\n            }\r\n            \r\n            .hb-container-tim {\r\n                padding: 0 15px;\r\n            }\r\n            \r\n            .hb-main-title-tim {\r\n                font-size: 1.8rem !important;\r\n                margin-bottom: 14px !important;\r\n            }\r\n            \r\n            .hb-subtitle-tim {\r\n                font-size: 0.9rem !important;\r\n            }\r\n            \r\n            .hb-badge-tim {\r\n                font-size: 0.75rem;\r\n                padding: 5px 14px;\r\n                margin-bottom: 18px;\r\n            }\r\n            \r\n            .hb-decorative-line-tim {\r\n                width: 50px;\r\n                margin-top: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n<!-- 2. SEGUNDO: Cole este HTML no widget \"HTML\" do Elementor -->\r\n\r\n<!-- LINKS OBRIGAT\u00d3RIOS (Cole no cabe\u00e7alho do site se ainda n\u00e3o tiver) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&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<!-- T\u00cdTULO HB TELECOM TIM STYLE -->\r\n<section class=\"hb-title-section-tim\">\r\n    <!-- BACKGROUND ELEMENTS -->\r\n    <div class=\"hb-bg-tim\">\r\n        <div class=\"hb-circle-tim\"><\/div>\r\n        <div class=\"hb-circle-tim\"><\/div>\r\n    <\/div>\r\n    <div class=\"hb-grid-overlay-tim\"><\/div>\r\n    \r\n    <!-- FLOATING HB TELECOM ICONS MOBILE -->\r\n    <div class=\"hb-icon-tim\">\r\n        <i class=\"fas fa-wifi\"><\/i>\r\n    <\/div>\r\n    \r\n    <div class=\"hb-icon-tim\">\r\n        <i class=\"fas fa-mobile-alt\"><\/i>\r\n    <\/div>\r\n    \r\n    <!-- MAIN CONTAINER -->\r\n    <div class=\"hb-container-tim\">\r\n        <!-- ANNOUNCEMENT BADGE -->\r\n        <div class=\"hb-badge-tim\">\r\n            <i class=\"fas fa-broadcast-tower\"><\/i>\r\n            <span>Conectando Curitiba<\/span>\r\n        <\/div>\r\n        \r\n        <!-- MAIN TITLE -->\r\n        <h2 class=\"hb-main-title-tim\">\r\n            <span class=\"desktop-only\">Voc\u00ea pode tudo com <span class=\"hb-title-highlight-tim\">HB Telecom<\/span><\/span>\r\n            <span class=\"mobile-only\">Voc\u00ea pode tudo com<br><span class=\"hb-title-highlight-tim\">HB Telecom<\/span><\/span>\r\n        <\/h2>\r\n        \r\n        <!-- SUBTITLE -->\r\n        <p class=\"hb-subtitle-tim\">\r\n            Solu\u00e7\u00f5es completas em telecomunica\u00e7\u00f5es para sua casa e empresa. Conectividade de alta qualidade com atendimento personalizado.\r\n        <\/p>\r\n        \r\n        <!-- DECORATIVE LINE -->\r\n        <div class=\"hb-decorative-line-tim\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 3. TERCEIRO: Cole este JavaScript no rodap\u00e9 do site (opcional) -->\r\n<script>\r\n    \/\/ PARALLAX EFFECT ON SCROLL HB TELECOM TIM\r\n    window.addEventListener('scroll', () => {\r\n        const scrolled = window.pageYOffset;\r\n        const rate = scrolled * -0.2;\r\n        \r\n        const hbCircles = document.querySelectorAll('.hb-circle-tim');\r\n        if (hbCircles.length > 0) {\r\n            hbCircles.forEach((circle, index) => {\r\n                const speed = (index + 1) * 0.15;\r\n                circle.style.transform = `translateY(${rate * speed}px)`;\r\n            });\r\n        }\r\n        \r\n        \/\/ Floating HB telecom icons parallax\r\n        const hbIcons = document.querySelectorAll('.hb-icon-tim');\r\n        if (hbIcons.length > 0) {\r\n            hbIcons.forEach((icon, index) => {\r\n                const speed = (index + 1) * 0.08;\r\n                icon.style.transform = `translateY(${rate * speed}px) rotate(${scrolled * 0.05}deg)`;\r\n            });\r\n        }\r\n    });\r\n\r\n    \/\/ INTERSECTION OBSERVER FOR ANIMATIONS HB TELECOM TIM\r\n    const observerOptionsHb = {\r\n        threshold: 0.1,\r\n        rootMargin: '0px 0px -50px 0px'\r\n    };\r\n\r\n    const observerHb = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.animationPlayState = 'running';\r\n            }\r\n        });\r\n    }, observerOptionsHb);\r\n\r\n    \/\/ OBSERVE ANIMATED ELEMENTS WHEN DOM IS READY HB TELECOM TIM\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ OBSERVE ANIMATED ELEMENTS\r\n        const animatedElementsHb = document.querySelectorAll('[class*=\"hbEntranceTim\"], [class*=\"hbGlow\"]');\r\n        animatedElementsHb.forEach(el => {\r\n            if (observerHb) {\r\n                observerHb.observe(el);\r\n            }\r\n        });\r\n    });\r\n<\/script>\r\n\r\n<!-- FIM DO C\u00d3DIGO PARA ELEMENTOR T\u00cdTULO HB TELECOM TIM STYLE -->\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7504583 e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet e-flex e-con e-parent\" data-id=\"7504583\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ccf6e6f elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"ccf6e6f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;700&display=swap');\n\n.cartao-servico {\n  font-family: 'DM Sans', sans-serif;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1px;\n  padding: 20px;\n}\n\n\/* Card *\/\n.cartao-item {\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  min-height: 168px;\n  height: 1px;\n  background-color: #1a1a1a;\n  border-radius: 15px;\n  overflow: visible;\n  align-items: flex-start;\n  padding: 30px;\n  gap: 16px;\n  position: relative; \/* ADICIONADO *\/\n  z-index: 0;          \/* ADICIONADO *\/\n}\n\/* Imagem *\/\n.cartao-img {\n  width: 164px;\n  height: 80px;\n  flex-shrink: 0;\n  position: relative;\n  object-fit: cover;\n  border-radius: 10px;\n  top: -56px;\n  left: -30px;\n}\n\n\/* Conte\u00fado *\/\n.cartao-conteudo {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  color: #fff;\n  margin-left: -20px;\n  margin-top: 25px;\n}\n\n\/* T\u00edtulo *\/\n.cartao-conteudo h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 500;\n}\n\n\/* Linha abaixo do t\u00edtulo *\/\n.cartao-linha {\n  width: 30px;\n  height: 3px;\n  background-color: #fff;\n  margin: 6px 0 8px 0;\n  border-radius: 2px;\n}\n\n\/* Descri\u00e7\u00e3o *\/\n.cartao-descricao {\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n\/* Sinal de + *\/\n.cartao-plus {\n  font-size: 46px;\n  color: #fff;\n\n  margin: -10px 0;\n  position: relative;  \/* ADICIONADO *\/\n  z-index: 10;         \/* ADICIONADO *\/\n  margin-left: 85px;\n  top: -2px;\n}\n\/* Responsivo desktop: aumenta imagem e fontes *\/\n@media (min-width: 768px) {\n  .cartao-item {\n    max-width: 700px;\n  }\n\n  .cartao-img {\n    width: 100px;\n    height: 100px;\n  }\n\n  .cartao-conteudo h3 {\n    font-size: 20px;\n  }\n\n  .cartao-descricao {\n    font-size: 15px;\n  }\n\n  .cartao-linha {\n    width: 40px;\n  }\n\n  .cartao-plus {\n    font-size: 32px;\n  }\n}\n<\/style>\n\n<div class=\"cartao-servico\">\n\n  <!-- Cart\u00e3o 1 -->\n  <div class=\"cartao-item\">\n    <img decoding=\"async\" class=\"cartao-img\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/gamer_hb.png\" alt=\"Internet\">\n    <div class=\"cartao-conteudo\">\n      <h3>Internet<\/h3>\n      <div class=\"cartao-linha\"><\/div>\n      <p class=\"cartao-descricao\">Internet 100% fibra \u00f3ptica.<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- + -->\n  <div class=\"cartao-plus\">+<\/div>\n\n  <!-- Cart\u00e3o 2 -->\n  <div class=\"cartao-item\">\n    <img decoding=\"async\" class=\"cartao-img\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/teste-2.png\" alt=\"Entretenimento\">\n    <div class=\"cartao-conteudo\">\n      <h3>Entretenimento<\/h3>\n      <div class=\"cartao-linha\"><\/div>\n      <p class=\"cartao-descricao\">Filmes, s\u00e9ries, canais ao vivo.<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- + -->\n  <div class=\"cartao-plus\">+<\/div>\n\n  <!-- Cart\u00e3o 3 -->\n  <div class=\"cartao-item\">\n    <img decoding=\"async\" class=\"cartao-img\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/08\/celular_hb.png\" alt=\"Telefonia\">\n    <div class=\"cartao-conteudo\">\n      <h3>Telefonia<\/h3>\n      <div class=\"cartao-linha\"><\/div>\n      <p class=\"cartao-descricao\">Telefone fixo e m\u00f3vel com cobertura nacional.<\/p>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1af9867 e-con-full e-flex e-con e-parent\" data-id=\"1af9867\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-459ab91 elementor-widget elementor-widget-html\" data-id=\"459ab91\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- T\u00cdTULO ENTRETENIMENTO ESTILO TIM - COPIE DAQUI PARA O ELEMENTOR -->\r\n\r\n<!-- 1. PRIMEIRO: Cole este CSS no campo \"CSS Customizado\" do Elementor -->\r\n<style>\r\n        \/* VARI\u00c1VEIS CSS T\u00cdTULO ENTRETENIMENTO TIM STYLE *\/\r\n        :root {\r\n            --primary-red: #dc2626;\r\n            --gradient-red: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            --dark-bg: #0f0f0f;\r\n            --text-light: #f8fafc;\r\n            --text-gray: #6c757d;\r\n        }\r\n\r\n        \/* SECTION T\u00cdTULO ENTRETENIMENTO TIM STYLE *\/\r\n        .entertainment-title-section-tim {\r\n            position: relative;\r\n            padding: 60px 0 40px 0;\r\n            background: #000000;\r\n            overflow: hidden;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* BACKGROUND ANIMATED ELEMENTS *\/\r\n        .entertainment-bg-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .entertainment-circle-tim {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, rgba(255, 107, 107, 0.05) 40%, transparent 70%);\r\n            animation: floatEntertainmentTim 12s ease-in-out infinite;\r\n            filter: blur(1px);\r\n        }\r\n\r\n        .entertainment-circle-tim:nth-child(1) {\r\n            width: 200px;\r\n            height: 200px;\r\n            top: -20%;\r\n            right: 10%;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .entertainment-circle-tim:nth-child(2) {\r\n            width: 150px;\r\n            height: 150px;\r\n            bottom: -15%;\r\n            left: 15%;\r\n            animation-delay: 6s;\r\n        }\r\n\r\n        @keyframes floatEntertainmentTim {\r\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.3; }\r\n            50% { transform: translateY(-20px) scale(1.1) rotate(180deg); opacity: 0.5; }\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY *\/\r\n        .entertainment-grid-overlay-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                linear-gradient(rgba(220, 38, 38, 0.02) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(220, 38, 38, 0.02) 1px, transparent 1px);\r\n            background-size: 80px 80px;\r\n            animation: entertainmentGridMoveTim 30s linear infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        @keyframes entertainmentGridMoveTim {\r\n            0% { transform: translate(0, 0); }\r\n            100% { transform: translate(80px, 80px); }\r\n        }\r\n\r\n        \/* MAIN CONTAINER *\/\r\n        .entertainment-container-tim {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 0 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE *\/\r\n        .entertainment-badge-tim {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 8px 20px;\r\n            border-radius: 25px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            margin-bottom: 25px;\r\n            animation: entertainmentBadgeEntranceTim 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.3);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .entertainment-badge-tim i {\r\n            color: #ffd700;\r\n            animation: entertainmentStarSpinTim 4s linear infinite;\r\n        }\r\n\r\n        @keyframes entertainmentBadgeEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px) scale(0.8); }\r\n            100% { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n\r\n        @keyframes entertainmentStarSpinTim {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* MAIN TITLE *\/\r\n        .entertainment-main-title-tim {\r\n            font-size: 2.8rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 20px !important;\r\n            line-height: 1.2 !important;\r\n            animation: entertainmentTitleEntranceTim 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        \/* RESPONSIVE TITLE DISPLAY *\/\r\n        .desktop-only {\r\n            display: inline;\r\n        }\r\n\r\n        .mobile-only {\r\n            display: none;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .desktop-only {\r\n                display: none;\r\n            }\r\n\r\n            .mobile-only {\r\n                display: inline;\r\n            }\r\n        }\r\n\r\n        .entertainment-title-highlight-tim {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: entertainmentTitleGradientTim 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .entertainment-title-highlight-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -4px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: entertainmentTitleUnderline 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes entertainmentTitleUnderline {\r\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\r\n            50% { opacity: 1; transform: scaleX(1.05); }\r\n        }\r\n\r\n        @keyframes entertainmentTitleGradientTim {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes entertainmentTitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-50px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* SUBTITLE *\/\r\n        .entertainment-subtitle-tim {\r\n            font-size: 1.1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 0 !important;\r\n            animation: entertainmentSubtitleEntranceTim 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @keyframes entertainmentSubtitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* DECORATIVE ELEMENTS *\/\r\n        .entertainment-decorative-line-tim {\r\n            width: 80px;\r\n            height: 3px;\r\n            background: var(--gradient-red);\r\n            margin: 30px auto 0;\r\n            border-radius: 2px;\r\n            animation: entertainmentLineEntranceTim 1s ease-out 0.8s both;\r\n            position: relative;\r\n        }\r\n\r\n        .entertainment-decorative-line-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 4px;\r\n            z-index: -1;\r\n            animation: entertainmentLineGlow 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes entertainmentLineGlow {\r\n            0%, 100% { opacity: 0.3; transform: scale(1); }\r\n            50% { opacity: 0.6; transform: scale(1.1); }\r\n        }\r\n\r\n        @keyframes entertainmentLineEntranceTim {\r\n            0% { opacity: 0; transform: scaleX(0); }\r\n            100% { opacity: 1; transform: scaleX(1); }\r\n        }\r\n\r\n        \/* ENTERTAINMENT ICONS WITH WAVES *\/\r\n        .entertainment-icon-tim {\r\n            position: absolute;\r\n            z-index: 2;\r\n            color: #dc2626;\r\n            font-size: 32px;\r\n            animation: entertainmentIconFloat 8s ease-in-out infinite;\r\n            opacity: 0.8;\r\n            display: none; \/* Oculto por padr\u00e3o no desktop *\/\r\n        }\r\n\r\n        .entertainment-icon-tim:nth-child(1) {\r\n            top: 35%;\r\n            left: 25%;\r\n            animation-delay: 0s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .entertainment-icon-tim:nth-child(2) {\r\n            top: 70%;\r\n            left: 50%;\r\n            animation-delay: 2s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .entertainment-icon-tim:nth-child(3) {\r\n            top: 35%;\r\n            right: 45%;\r\n            animation-delay: 4s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .entertainment-icon-tim:nth-child(4) {\r\n            top: 70%;\r\n            right: 50%;\r\n            animation-delay: 6s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .entertainment-icon-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 50px;\r\n            height: 50px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: entertainmentIconWaves 3s ease-out infinite;\r\n            opacity: 0;\r\n        }\r\n\r\n        .entertainment-icon-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 80px;\r\n            height: 80px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: entertainmentIconWaves 3s ease-out infinite;\r\n            animation-delay: 1s;\r\n            opacity: 0;\r\n        }\r\n\r\n        @keyframes entertainmentIconFloat {\r\n            0%, 100% { \r\n                transform: translateY(0) translateX(0) scale(1) rotate(0deg); \r\n                opacity: 0.6; \r\n            }\r\n            25% { \r\n                transform: translateY(-15px) translateX(8px) scale(1.1) rotate(10deg); \r\n                opacity: 0.8; \r\n            }\r\n            50% { \r\n                transform: translateY(-8px) translateX(-5px) scale(0.95) rotate(-5deg); \r\n                opacity: 1; \r\n            }\r\n            75% { \r\n                transform: translateY(-20px) translateX(10px) scale(1.05) rotate(8deg); \r\n                opacity: 0.7; \r\n            }\r\n        }\r\n\r\n        @keyframes entertainmentIconWaves {\r\n            0% {\r\n                opacity: 0.6;\r\n                transform: translate(-50%, -50%) scale(0.5);\r\n            }\r\n            50% {\r\n                opacity: 0.3;\r\n                transform: translate(-50%, -50%) scale(1);\r\n            }\r\n            100% {\r\n                opacity: 0;\r\n                transform: translate(-50%, -50%) scale(1.5);\r\n            }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN *\/\r\n        @media (max-width: 1024px) {\r\n            .entertainment-container-tim {\r\n                padding: 0 25px;\r\n            }\r\n            \r\n            .entertainment-main-title-tim {\r\n                font-size: 2.4rem !important;\r\n            }\r\n            \r\n            .entertainment-subtitle-tim {\r\n                font-size: 1rem !important;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .entertainment-title-section-tim {\r\n                padding: 50px 0 35px 0;\r\n            }\r\n            \r\n            .entertainment-container-tim {\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .entertainment-main-title-tim {\r\n                font-size: 2rem !important;\r\n                margin-bottom: 16px !important;\r\n            }\r\n            \r\n            .entertainment-subtitle-tim {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .entertainment-badge-tim {\r\n                font-size: 0.8rem;\r\n                padding: 6px 16px;\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .entertainment-decorative-line-tim {\r\n                width: 60px;\r\n                margin-top: 25px;\r\n            }\r\n            \r\n            \/* MOBILE ENTERTAINMENT ICONS POSITIONING - APENAS VIS\u00cdVEL NO MOBILE *\/\r\n            .entertainment-icon-tim {\r\n                display: block; \/* Mostra apenas no mobile *\/\r\n            }\r\n            \r\n            .entertainment-icon-tim:nth-child(1) {\r\n                top: 15%;\r\n                left: 5%;\r\n            }\r\n\r\n            .entertainment-icon-tim:nth-child(2) {\r\n                top: 75%;\r\n                left: 8%;\r\n            }\r\n\r\n            .entertainment-icon-tim:nth-child(3) {\r\n                top: 15%;\r\n                right: 5%;\r\n            }\r\n\r\n            .entertainment-icon-tim:nth-child(4) {\r\n                display: none; \/* Esconde o quarto \u00edcone no mobile *\/\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .entertainment-title-section-tim {\r\n                padding: 40px 0 30px 0;\r\n            }\r\n            \r\n            .entertainment-container-tim {\r\n                padding: 0 15px;\r\n            }\r\n            \r\n            .entertainment-main-title-tim {\r\n                font-size: 1.8rem !important;\r\n                margin-bottom: 14px !important;\r\n            }\r\n            \r\n            .entertainment-subtitle-tim {\r\n                font-size: 0.9rem !important;\r\n            }\r\n            \r\n            .entertainment-badge-tim {\r\n                font-size: 0.75rem;\r\n                padding: 5px 14px;\r\n                margin-bottom: 18px;\r\n            }\r\n            \r\n            .entertainment-decorative-line-tim {\r\n                width: 50px;\r\n                margin-top: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n<!-- 2. SEGUNDO: Cole este HTML no widget \"HTML\" do Elementor -->\r\n\r\n<!-- LINKS OBRIGAT\u00d3RIOS (Cole no cabe\u00e7alho do site se ainda n\u00e3o tiver) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&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<!-- T\u00cdTULO ENTRETENIMENTO TIM STYLE -->\r\n<section class=\"entertainment-title-section-tim\">\r\n    <!-- BACKGROUND ELEMENTS -->\r\n    <div class=\"entertainment-bg-tim\">\r\n        <div class=\"entertainment-circle-tim\"><\/div>\r\n        <div class=\"entertainment-circle-tim\"><\/div>\r\n    <\/div>\r\n    <div class=\"entertainment-grid-overlay-tim\"><\/div>\r\n    \r\n    <!-- FLOATING ENTERTAINMENT ICONS MOBILE -->\r\n    <div class=\"entertainment-icon-tim\">\r\n        <i class=\"fas fa-gamepad\"><\/i>\r\n    <\/div>\r\n    <div class=\"entertainment-icon-tim\">\r\n        <i class=\"fas fa-music\"><\/i>\r\n    <\/div>\r\n    <div class=\"entertainment-icon-tim\">\r\n        <i class=\"fas fa-film\"><\/i>\r\n    <\/div>\r\n    \r\n    <!-- MAIN CONTAINER -->\r\n    <div class=\"entertainment-container-tim\">\r\n        <!-- ANNOUNCEMENT BADGE -->\r\n        <div class=\"entertainment-badge-tim\">\r\n            <i class=\"fas fa-star\"><\/i>\r\n            <span>Entretenimento Total<\/span>\r\n        <\/div>\r\n        \r\n        <!-- MAIN TITLE -->\r\n        <h2 class=\"entertainment-main-title-tim\">\r\n            <span class=\"desktop-only\">Servi\u00e7os de <span class=\"entertainment-title-highlight-tim\">Entretenimento<\/span><\/span>\r\n            <span class=\"mobile-only\">Servi\u00e7os de <span class=\"entertainment-title-highlight-tim\">Entretenimento<\/span><\/span>\r\n        <\/h2>\r\n        \r\n        <!-- SUBTITLE -->\r\n        <p class=\"entertainment-subtitle-tim\">\r\n            Streaming, gamer, m\u00fasica e v\u00eddeos com qualidade m\u00e1xima. Transforme sua internet em uma central de divers\u00e3o.\r\n        <\/p>\r\n        \r\n        <!-- DECORATIVE LINE -->\r\n        <div class=\"entertainment-decorative-line-tim\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 3. TERCEIRO: Cole este JavaScript no rodap\u00e9 do site (opcional) -->\r\n<script>\r\n    \/\/ PARALLAX EFFECT ON SCROLL ENTERTAINMENT TIM\r\n    window.addEventListener('scroll', () => {\r\n        const scrolled = window.pageYOffset;\r\n        const rate = scrolled * -0.2;\r\n        \r\n        const entertainmentCircles = document.querySelectorAll('.entertainment-circle-tim');\r\n        if (entertainmentCircles.length > 0) {\r\n            entertainmentCircles.forEach((circle, index) => {\r\n                const speed = (index + 1) * 0.15;\r\n                circle.style.transform = `translateY(${rate * speed}px)`;\r\n            });\r\n        }\r\n        \r\n        \/\/ Floating entertainment icons parallax\r\n        const entertainmentIcons = document.querySelectorAll('.entertainment-icon-tim');\r\n        if (entertainmentIcons.length > 0) {\r\n            entertainmentIcons.forEach((icon, index) => {\r\n                const speed = (index + 1) * 0.08;\r\n                icon.style.transform = `translateY(${rate * speed}px) rotate(${scrolled * 0.05}deg)`;\r\n            });\r\n        }\r\n    });\r\n\r\n    \/\/ INTERSECTION OBSERVER FOR ANIMATIONS ENTERTAINMENT TIM\r\n    const observerOptionsEntertainment = {\r\n        threshold: 0.1,\r\n        rootMargin: '0px 0px -50px 0px'\r\n    };\r\n\r\n    const observerEntertainment = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.animationPlayState = 'running';\r\n            }\r\n        });\r\n    }, observerOptionsEntertainment);\r\n\r\n    \/\/ OBSERVE ANIMATED ELEMENTS WHEN DOM IS READY ENTERTAINMENT TIM\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ OBSERVE ANIMATED ELEMENTS\r\n        const animatedElementsEntertainment = document.querySelectorAll('[class*=\"entertainmentEntranceTim\"], [class*=\"entertainmentGlow\"]');\r\n        animatedElementsEntertainment.forEach(el => {\r\n            if (observerEntertainment) {\r\n                observerEntertainment.observe(el);\r\n            }\r\n        });\r\n    });\r\n<\/script>\r\n\r\n<!-- FIM DO C\u00d3DIGO PARA ELEMENTOR T\u00cdTULO ENTRETENIMENTO TIM STYLE -->\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-14410a0 elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"14410a0\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a936297 elementor-widget__width-initial elementor-widget elementor-widget-image-carousel\" data-id=\"a936297\" data-element_type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;4&quot;,&quot;lazyload&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:0,&quot;speed&quot;:7000,&quot;slides_to_show_mobile&quot;:&quot;2&quot;,&quot;slides_to_show_tablet&quot;:&quot;3&quot;,&quot;navigation&quot;:&quot;none&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:20,&quot;sizes&quot;:[]},&quot;image_spacing_custom_laptop&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carrossel de imagens\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/Chespirito.webp\" alt=\"Chespirito\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/mafia-e-poder.webp\" alt=\"mafia-e-poder\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/Paramount-Conmebol-Libertadores-1.webp\" alt=\"Paramount-Conmebol-Libertadores-1\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/terra-da-mafia.webp\" alt=\"terra-da-mafia\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/brasileirao.png\" alt=\"brasileirao\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\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<div class=\"elementor-element elementor-element-6c79855 elementor-hidden-desktop elementor-hidden-laptop e-flex e-con-boxed e-con e-parent\" data-id=\"6c79855\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c171555 elementor-widget elementor-widget-image-carousel\" data-id=\"c171555\" data-element_type=\"widget\" data-settings=\"{&quot;slides_to_show&quot;:&quot;4&quot;,&quot;lazyload&quot;:&quot;yes&quot;,&quot;autoplay_speed&quot;:0,&quot;speed&quot;:7000,&quot;slides_to_show_mobile&quot;:&quot;2&quot;,&quot;slides_to_show_tablet&quot;:&quot;3&quot;,&quot;navigation&quot;:&quot;none&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;pause_on_hover&quot;:&quot;yes&quot;,&quot;pause_on_interaction&quot;:&quot;yes&quot;,&quot;infinite&quot;:&quot;yes&quot;,&quot;image_spacing_custom&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:20,&quot;sizes&quot;:[]},&quot;image_spacing_custom_laptop&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;image_spacing_custom_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"image-carousel.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-image-carousel-wrapper swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"Carrossel de imagens\" dir=\"ltr\">\n\t\t\t<div class=\"elementor-image-carousel swiper-wrapper\" aria-live=\"off\">\n\t\t\t\t\t\t\t\t<div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/Chespirito.webp\" alt=\"Chespirito\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/mafia-e-poder.webp\" alt=\"mafia-e-poder\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/Paramount-Conmebol-Libertadores-1.webp\" alt=\"Paramount-Conmebol-Libertadores-1\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/terra-da-mafia.webp\" alt=\"terra-da-mafia\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div><div class=\"swiper-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"5 de 5\"><figure class=\"swiper-slide-inner\"><img class=\"swiper-slide-image swiper-lazy\" data-src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/brasileirao.png\" alt=\"brasileirao\" \/><div class=\"swiper-lazy-preloader\"><\/div><\/figure><\/div>\t\t\t<\/div>\n\t\t\t\t\t\t\t\n\t\t\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<div class=\"elementor-element elementor-element-db48ef2 e-con-full e-flex e-con e-parent\" data-id=\"db48ef2\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9fe0838 elementor-widget elementor-widget-html\" data-id=\"9fe0838\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- T\u00cdTULO FAQ ESTILO TIM - COPIE DAQUI PARA O ELEMENTOR -->\r\n\r\n<!-- 1. PRIMEIRO: Cole este CSS no campo \"CSS Customizado\" do Elementor -->\r\n<style>\r\n        \/* VARI\u00c1VEIS CSS T\u00cdTULO FAQ TIM STYLE *\/\r\n        :root {\r\n            --primary-red: #dc2626;\r\n            --gradient-red: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            --dark-bg: #0f0f0f;\r\n            --text-light: #f8fafc;\r\n            --text-gray: #6c757d;\r\n        }\r\n\r\n        \/* SECTION T\u00cdTULO FAQ TIM STYLE *\/\r\n        .faq-title-section-tim {\r\n            position: relative;\r\n            padding: 60px 0 40px 0;\r\n            background: #000000;\r\n            overflow: hidden;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* BACKGROUND ANIMATED ELEMENTS *\/\r\n        .faq-bg-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .faq-circle-tim {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, rgba(255, 107, 107, 0.05) 40%, transparent 70%);\r\n            animation: floatFaqTim 12s ease-in-out infinite;\r\n            filter: blur(1px);\r\n        }\r\n\r\n        .faq-circle-tim:nth-child(1) {\r\n            width: 200px;\r\n            height: 200px;\r\n            top: -20%;\r\n            right: 10%;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .faq-circle-tim:nth-child(2) {\r\n            width: 150px;\r\n            height: 150px;\r\n            bottom: -15%;\r\n            left: 15%;\r\n            animation-delay: 6s;\r\n        }\r\n\r\n        @keyframes floatFaqTim {\r\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.3; }\r\n            50% { transform: translateY(-20px) scale(1.1) rotate(180deg); opacity: 0.5; }\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY *\/\r\n        .faq-grid-overlay-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                linear-gradient(rgba(220, 38, 38, 0.02) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(220, 38, 38, 0.02) 1px, transparent 1px);\r\n            background-size: 80px 80px;\r\n            animation: faqGridMoveTim 30s linear infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        @keyframes faqGridMoveTim {\r\n            0% { transform: translate(0, 0); }\r\n            100% { transform: translate(80px, 80px); }\r\n        }\r\n\r\n        \/* MAIN CONTAINER *\/\r\n        .faq-container-tim {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 0 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE *\/\r\n        .faq-badge-tim {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 8px 20px;\r\n            border-radius: 25px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            margin-bottom: 25px;\r\n            animation: faqBadgeEntranceTim 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.3);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .faq-badge-tim i {\r\n            color: #ffd700;\r\n            animation: faqQuestionSpinTim 4s linear infinite;\r\n        }\r\n\r\n        @keyframes faqBadgeEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px) scale(0.8); }\r\n            100% { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n\r\n        @keyframes faqQuestionSpinTim {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* MAIN TITLE *\/\r\n        .faq-main-title-tim {\r\n            font-size: 2.8rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 20px !important;\r\n            line-height: 1.2 !important;\r\n            animation: faqTitleEntranceTim 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        \/* RESPONSIVE TITLE DISPLAY *\/\r\n        .desktop-only {\r\n            display: inline;\r\n        }\r\n\r\n        .mobile-only {\r\n            display: none;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .desktop-only {\r\n                display: none;\r\n            }\r\n\r\n            .mobile-only {\r\n                display: inline;\r\n            }\r\n        }\r\n\r\n        .faq-title-highlight-tim {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: faqTitleGradientTim 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .faq-title-highlight-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -4px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: faqTitleUnderline 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes faqTitleUnderline {\r\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\r\n            50% { opacity: 1; transform: scaleX(1.05); }\r\n        }\r\n\r\n        @keyframes faqTitleGradientTim {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes faqTitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-50px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* SUBTITLE *\/\r\n        .faq-subtitle-tim {\r\n            font-size: 1.1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 0 !important;\r\n            animation: faqSubtitleEntranceTim 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @keyframes faqSubtitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* DECORATIVE ELEMENTS *\/\r\n        .faq-decorative-line-tim {\r\n            width: 80px;\r\n            height: 3px;\r\n            background: var(--gradient-red);\r\n            margin: 30px auto 0;\r\n            border-radius: 2px;\r\n            animation: faqLineEntranceTim 1s ease-out 0.8s both;\r\n            position: relative;\r\n        }\r\n\r\n        .faq-decorative-line-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 4px;\r\n            z-index: -1;\r\n            animation: faqLineGlow 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes faqLineGlow {\r\n            0%, 100% { opacity: 0.3; transform: scale(1); }\r\n            50% { opacity: 0.6; transform: scale(1.1); }\r\n        }\r\n\r\n        @keyframes faqLineEntranceTim {\r\n            0% { opacity: 0; transform: scaleX(0); }\r\n            100% { opacity: 1; transform: scaleX(1); }\r\n        }\r\n\r\n        \/* FAQ ICONS WITH WAVES *\/\r\n        .faq-icon-tim {\r\n            position: absolute;\r\n            z-index: 2;\r\n            color: #dc2626;\r\n            font-size: 32px;\r\n            animation: faqIconFloat 8s ease-in-out infinite;\r\n            opacity: 0.8;\r\n            display: none; \/* Oculto por padr\u00e3o no desktop *\/\r\n        }\r\n\r\n        .faq-icon-tim:nth-child(1) {\r\n            top: 35%;\r\n            left: 25%;\r\n            animation-delay: 0s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .faq-icon-tim:nth-child(2) {\r\n            top: 70%;\r\n            left: 50%;\r\n            animation-delay: 2s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .faq-icon-tim:nth-child(3) {\r\n            top: 35%;\r\n            right: 45%;\r\n            animation-delay: 4s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .faq-icon-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 50px;\r\n            height: 50px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: faqIconWaves 3s ease-out infinite;\r\n            opacity: 0;\r\n        }\r\n\r\n        .faq-icon-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 80px;\r\n            height: 80px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: faqIconWaves 3s ease-out infinite;\r\n            animation-delay: 1s;\r\n            opacity: 0;\r\n        }\r\n\r\n        @keyframes faqIconFloat {\r\n            0%, 100% { \r\n                transform: translateY(0) translateX(0) scale(1) rotate(0deg); \r\n                opacity: 0.6; \r\n            }\r\n            25% { \r\n                transform: translateY(-15px) translateX(8px) scale(1.1) rotate(10deg); \r\n                opacity: 0.8; \r\n            }\r\n            50% { \r\n                transform: translateY(-8px) translateX(-5px) scale(0.95) rotate(-5deg); \r\n                opacity: 1; \r\n            }\r\n            75% { \r\n                transform: translateY(-20px) translateX(10px) scale(1.05) rotate(8deg); \r\n                opacity: 0.7; \r\n            }\r\n        }\r\n\r\n        @keyframes faqIconWaves {\r\n            0% {\r\n                opacity: 0.6;\r\n                transform: translate(-50%, -50%) scale(0.5);\r\n            }\r\n            50% {\r\n                opacity: 0.3;\r\n                transform: translate(-50%, -50%) scale(1);\r\n            }\r\n            100% {\r\n                opacity: 0;\r\n                transform: translate(-50%, -50%) scale(1.5);\r\n            }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN *\/\r\n        @media (max-width: 1024px) {\r\n            .faq-container-tim {\r\n                padding: 0 25px;\r\n            }\r\n            \r\n            .faq-main-title-tim {\r\n                font-size: 2.4rem !important;\r\n            }\r\n            \r\n            .faq-subtitle-tim {\r\n                font-size: 1rem !important;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .faq-title-section-tim {\r\n                padding: 50px 0 35px 0;\r\n            }\r\n            \r\n            .faq-container-tim {\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .faq-main-title-tim {\r\n                font-size: 2rem !important;\r\n                margin-bottom: 16px !important;\r\n            }\r\n            \r\n            .faq-subtitle-tim {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .faq-badge-tim {\r\n                font-size: 0.8rem;\r\n                padding: 6px 16px;\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .faq-decorative-line-tim {\r\n                width: 60px;\r\n                margin-top: 25px;\r\n            }\r\n            \r\n            \/* MOBILE FAQ ICONS POSITIONING - APENAS VIS\u00cdVEL NO MOBILE *\/\r\n            .faq-icon-tim {\r\n                display: block; \/* Mostra apenas no mobile *\/\r\n            }\r\n            \r\n            .faq-icon-tim:nth-child(1) {\r\n                top: 15%;\r\n                left: 5%;\r\n            }\r\n\r\n            .faq-icon-tim:nth-child(2) {\r\n                display: none; \/* Esconde o segundo \u00edcone no mobile *\/\r\n            }\r\n\r\n            .faq-icon-tim:nth-child(3) {\r\n                top: 15%;\r\n                right: 5%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .faq-title-section-tim {\r\n                padding: 40px 0 30px 0;\r\n            }\r\n            \r\n            .faq-container-tim {\r\n                padding: 0 15px;\r\n            }\r\n            \r\n            .faq-main-title-tim {\r\n                font-size: 1.8rem !important;\r\n                margin-bottom: 14px !important;\r\n            }\r\n            \r\n            .faq-subtitle-tim {\r\n                font-size: 0.9rem !important;\r\n            }\r\n            \r\n            .faq-badge-tim {\r\n                font-size: 0.75rem;\r\n                padding: 5px 14px;\r\n                margin-bottom: 18px;\r\n            }\r\n            \r\n            .faq-decorative-line-tim {\r\n                width: 50px;\r\n                margin-top: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n<!-- 2. SEGUNDO: Cole este HTML no widget \"HTML\" do Elementor -->\r\n\r\n<!-- LINKS OBRIGAT\u00d3RIOS (Cole no cabe\u00e7alho do site se ainda n\u00e3o tiver) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&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<!-- T\u00cdTULO FAQ TIM STYLE -->\r\n<section class=\"faq-title-section-tim\">\r\n    <!-- BACKGROUND ELEMENTS -->\r\n    <div class=\"faq-bg-tim\">\r\n        <div class=\"faq-circle-tim\"><\/div>\r\n        <div class=\"faq-circle-tim\"><\/div>\r\n    <\/div>\r\n    <div class=\"faq-grid-overlay-tim\"><\/div>\r\n    \r\n    <!-- FLOATING FAQ ICONS MOBILE -->\r\n    <div class=\"faq-icon-tim\">\r\n        <i class=\"fas fa-question-circle\"><\/i>\r\n    <\/div>\r\n    <div class=\"faq-icon-tim\">\r\n        <i class=\"fas fa-lightbulb\"><\/i>\r\n    <\/div>\r\n    \r\n    \r\n    <!-- MAIN CONTAINER -->\r\n    <div class=\"faq-container-tim\">\r\n        <!-- ANNOUNCEMENT BADGE -->\r\n        <div class=\"faq-badge-tim\">\r\n            <i class=\"fas fa-question\"><\/i>\r\n            <span>Tire suas d\u00favidas<\/span>\r\n        <\/div>\r\n        \r\n        <!-- MAIN TITLE -->\r\n        <h2 class=\"faq-main-title-tim\">\r\n            <span class=\"desktop-only\">Perguntas <span class=\"faq-title-highlight-tim\">Frequentes<\/span><\/span>\r\n            <span class=\"mobile-only\">Perguntas <span class=\"faq-title-highlight-tim\">Frequentes<\/span><\/span>\r\n        <\/h2>\r\n        \r\n        <!-- SUBTITLE -->\r\n        <p class=\"faq-subtitle-tim\">\r\n            Encontre respostas r\u00e1pidas para as principais d\u00favidas sobre nossos servi\u00e7os de internet.\r\n        <\/p>\r\n        \r\n        <!-- DECORATIVE LINE -->\r\n        <div class=\"faq-decorative-line-tim\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 3. TERCEIRO: Cole este JavaScript no rodap\u00e9 do site (opcional) -->\r\n<script>\r\n    \/\/ PARALLAX EFFECT ON SCROLL FAQ TIM\r\n    window.addEventListener('scroll', () => {\r\n        const scrolled = window.pageYOffset;\r\n        const rate = scrolled * -0.2;\r\n        \r\n        const faqCircles = document.querySelectorAll('.faq-circle-tim');\r\n        if (faqCircles.length > 0) {\r\n            faqCircles.forEach((circle, index) => {\r\n                const speed = (index + 1) * 0.15;\r\n                circle.style.transform = `translateY(${rate * speed}px)`;\r\n            });\r\n        }\r\n        \r\n        \/\/ Floating FAQ icons parallax\r\n        const faqIcons = document.querySelectorAll('.faq-icon-tim');\r\n        if (faqIcons.length > 0) {\r\n            faqIcons.forEach((icon, index) => {\r\n                const speed = (index + 1) * 0.08;\r\n                icon.style.transform = `translateY(${rate * speed}px) rotate(${scrolled * 0.05}deg)`;\r\n            });\r\n        }\r\n    });\r\n\r\n    \/\/ INTERSECTION OBSERVER FOR ANIMATIONS FAQ TIM\r\n    const observerOptionsFaq = {\r\n        threshold: 0.1,\r\n        rootMargin: '0px 0px -50px 0px'\r\n    };\r\n\r\n    const observerFaq = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.animationPlayState = 'running';\r\n            }\r\n        });\r\n    }, observerOptionsFaq);\r\n\r\n    \/\/ OBSERVE ANIMATED ELEMENTS WHEN DOM IS READY FAQ TIM\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ OBSERVE ANIMATED ELEMENTS\r\n        const animatedElementsFaq = document.querySelectorAll('[class*=\"faqEntranceTim\"], [class*=\"faqGlow\"]');\r\n        animatedElementsFaq.forEach(el => {\r\n            if (observerFaq) {\r\n                observerFaq.observe(el);\r\n            }\r\n        });\r\n    });\r\n<\/script>\r\n\r\n<!-- FIM DO C\u00d3DIGO PARA ELEMENTOR T\u00cdTULO FAQ TIM STYLE -->\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19e0c88 e-flex e-con-boxed e-con e-parent\" data-id=\"19e0c88\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e9121b6 elementor-widget elementor-widget-html\" data-id=\"e9121b6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;700&display=swap');\n\n* {\n  box-sizing: border-box;\n}\n\n.faq-container {\n  max-width: 100%;\n  margin: 0 auto;\n  font-family: 'DM Sans', sans-serif;\n  padding: 10px;\n  padding-bottom: 20px; \/* Espa\u00e7o extra para a \u00faltima resposta *\/\n}\n\n.faq-item {\n  background-color: #131111;\n  border: 0px solid #444; \/* Borda vermelha *\/\n  border-radius: 15px;\n  margin-bottom: 6px;\n  overflow: visible;\n  box-shadow: 0 0 8px rgba(230, 0, 0, 0.2); \/* Sombra leve *\/\n}\n\n.faq-question {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: #fff;\n  cursor: pointer;\n  padding: 15px;\n  font-weight: normal; \n  gap: 10px;\n}\n\n.faq-question-text {\n  font-size: 25px;\n  line-height: 1.4;\n}\n\n.faq-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background-color: red;\n  position: relative;\n  flex-shrink: 0;\n  display: inline-block;\n}\n\n.faq-icon::before,\n.faq-icon::after {\n  content: \"\";\n  position: absolute;\n  background-color: #fff;\n  transition: all 0.3s ease;\n}\n\n.faq-icon::before {\n  width: 20px;\n  height: 2px;\n  top: 50%;\n  left: 10px;\n  transform: translateY(-50%);\n}\n\n.faq-icon::after {\n  width: 2px;\n  height: 20px;\n  top: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.faq-question.open .faq-icon::after {\n  height: 0; \/* Vira o \u201c\u2013\u201d *\/\n}\n\n.faq-answer {\n  max-height: 0;\n  overflow: hidden;\n  font-size: 15px;\n  line-height: 1.6;\n  transition: all 0.3s ease;\n  color: #fff;\n}\n\n.faq-answer.open {\n  padding: 15px 15px 15px 15px;\n  max-height: 1000px; \/* Sem limite de altura *\/\n}\n\n\/* Responsivo *\/\n@media (max-width: 600px) {\n  .faq-question {\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 30px;\n  }\n\n  .faq-question-text {\n    font-size: 18px;\n  }\n\n  .faq-icon {\n    width: 36px;\n    height: 36px;\n  }\n\n  .faq-icon::before {\n    width: 18px;\n    left: 9px;\n  }\n\n  .faq-icon::after {\n    height: 18px;\n    top: 9px;\n  }\n\n  .faq-answer {\n    font-size: 14px;\n    padding: 0 12px 0 20px;\n  }\n\n  .faq-answer.open {\n    padding: 12px 12px 12px 28px;\n  }\n  @media (min-width: 992px) {\n  .faq-container {\n  max-width: 1240px;\n  margin: 7px auto;\n  font-family: 'DM Sans', sans-serif;\n  padding: 0 20px;\n }\n  .faq-item {\n  border: none;\n  border-radius: 6px;\n  margin-bottom: 10px;\n  background-color: none;\n  overflow: hidden;\n      \n  }\n  .faq-question {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #131111;\n  color: #fff;\n  cursor: pointer;\n  padding: 15px;\n  font-weight: 400;\n  gap: 10px;\n }\n  .faq-question-text {\n  flex: 1;\n  font-size: 22px;\n  line-height: 1.4;\n }\n  .faq-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background-color: red;\n  position: relative;\n  display: inline-block;\n  flex-shrink: 0;\n }\n .faq-icon::before,\n .faq-icon::after {\n  content: \"\";\n  position: absolute;\n  background-color: #fff;\n  transition: all 0.3s ease;\n  border-radius: 2px;\n }\n  .faq-icon::before {\n  width: 20px;\n  height: 3px;\n  top: 50%;\n  left: 10px;\n  transform: translateY(-50%);\n }\n  .faq-icon::after {\n  width: 3px;\n  height: 20px;\n  top: 10px;\n  left: 50%;\n  transform: translateX(-50%);\n }\n  .faq-question.open .hb-faq-icon::after {\n  height: 0; \/* vira tra\u00e7o \u2013 *\/\n }\n  .faq-answer {\n  max-height: 0;\n  overflow: hidden;\n  background: #131111;\n  padding: 0 15px;\n  font-size: 16px;\n  line-height: 1.6;\n  transition: all 0.3s ease;\n }\n  .faq-answer.open {\n  padding: 15px;\n  max-height: 300px;\n}\n<\/style>\n\n<div class=\"faq-container\">\n\n  <div class=\"faq-item\">\n    <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n      <div class=\"faq-question-text\"> Oque  \u00e9 fibra \u00f3ptica ?<\/div>\n      <div class=\"faq-icon\"><\/div>\n    <\/div>\n    <div class=\"faq-answer\">A fibra \u00f3tica \u00e9 uma estrutura de vidro cil\u00edndrica, transparente, flex\u00edvel e com dimens\u00f5es microsc\u00f3picas, parecidas com um fio de cabelo. \u00c9 uma forma de transmiss\u00e3o que permite o tr\u00e1fego de dados com velocidades pr\u00f3ximas \u00e0 velocidade da luz. O sinal da fibra \u00f3ptica \u00e9 transmitido por meio de reflex\u00f5es de raios laser ao longo de todo o cabo, atingindo uma capacidade de transmiss\u00e3o \u00fanica.<\/div>\n  <\/div>\n\n  <div class=\"faq-item\">\n    <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n      <div class=\"faq-question-text\"> Porque a fibra \u00f3ptica \u00e9 melhor que outras tecnologias ?<\/div>\n      <div class=\"faq-icon\"><\/div>\n    <\/div>\n    <div class=\"faq-answer\">- Velocidade de transmiss\u00e3o de dados \u00e9 maior que de outras tecnologias;<br>\n- Maior estabilidade de sinal;<br>\n- N\u00e3o sofre interfer\u00eancias ou quedas de transmiss\u00e3o.<\/div>\n  <\/div>\n\n  <div class=\"faq-item\">\n    <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n      <div class=\"faq-question-text\"> Oque \u00e9 velocidade de download ?<\/div>\n      <div class=\"faq-icon\"><\/div>\n    <\/div>\n    <div class=\"faq-answer\">\u00c9 a velocidade de recebimento de dados (como um arquivo, v\u00eddeo, etc) de outro computador ou servidor para um computador local atrav\u00e9s da Internet. Usu\u00e1rios dom\u00e9sticos tendem a realizar mais downloads do que uploads.<\/div>\n  <\/div>\n  <div class=\"faq-item\">\n    <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n      <div class=\"faq-question-text\"> Oque \u00e9 velocidade de upload ?<\/div>\n      <div class=\"faq-icon\"><\/div>\n    <\/div>\n    <div class=\"faq-answer\">\u00c9 a velocidade de envio de dados (como um arquivo, e-mail, foto, etc) de um computador em um local para um computador ou servidor em outro local, atrav\u00e9s da Internet. A velocidade de upload \u00e9 geralmente muito menor do que a velocidade de download. A raz\u00e3o para isso \u00e9 que as pessoas, ao acessar a Internet, geralmente fazem mais download do que upload.<\/div>\n  <\/div>\n  \n  <div class=\"faq-item\">\n    <div class=\"faq-question\" onclick=\"toggleFAQ(this)\">\n      <div class=\"faq-question-text\"> Qual a diferen\u00e7a da rede 2.4GHz (normal) e a rede 5.8GHz ?<\/div>\n      <div class=\"faq-icon\"><\/div>\n    <\/div>\n    <div class=\"faq-answer\">A frequ\u00eancia 2.4 GHz \u00e9 uma frequ\u00eancia comum e usada por todos os dispositivos. Suas caracter\u00edsticas s\u00e3o: baixa frequ\u00eancia, maior alcance e banda larga menor que a faz transmitir os dados com menor velocidade e est\u00e1 mais sujeita a interfer\u00eancias.<br><br>\nJ\u00e1 a 5.8 GHz \u00e9 usada somente em dispositivos mais modernos que sejam compat\u00edveis com a tecnologia, al\u00e9m disso, ela possui um alcance menor, barda larga maior que permitindo transmitir os dados com maior velocidade e est\u00e1 menos sujeita a interfer\u00eancias, fazendo a qualidade da rede ser melhor.<\/div>\n  <\/div>\n\n<\/div>\n\n<script>\nfunction toggleFAQ(element) {\n  const isOpen = element.classList.contains('open');\n\n  \/\/ Fecha todos\n  document.querySelectorAll('.faq-question').forEach(q => q.classList.remove('open'));\n  document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));\n\n  \/\/ Abre o atual\n  if (!isOpen) {\n    element.classList.add('open');\n    element.nextElementSibling.classList.add('open');\n  }\n}\n<\/script>\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-b8eec27 e-con-full e-flex e-con e-parent\" data-id=\"b8eec27\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-380d151 elementor-widget elementor-widget-html\" data-id=\"380d151\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- T\u00cdTULO CENTRAL DE AJUDA ESTILO TIM - COPIE DAQUI PARA O ELEMENTOR -->\r\n\r\n<!-- 1. PRIMEIRO: Cole este CSS no campo \"CSS Customizado\" do Elementor -->\r\n<style>\r\n        \/* VARI\u00c1VEIS CSS T\u00cdTULO CENTRAL DE AJUDA TIM STYLE *\/\r\n        :root {\r\n            --primary-red: #dc2626;\r\n            --gradient-red: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            --dark-bg: #0f0f0f;\r\n            --text-light: #f8fafc;\r\n            --text-gray: #6c757d;\r\n        }\r\n\r\n        \/* SECTION T\u00cdTULO CENTRAL DE AJUDA TIM STYLE *\/\r\n        .help-title-section-tim {\r\n            position: relative;\r\n            padding: 60px 0 40px 0;\r\n            background: #000000;\r\n            overflow: hidden;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* BACKGROUND ANIMATED ELEMENTS *\/\r\n        .help-bg-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .help-circle-tim {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, rgba(255, 107, 107, 0.05) 40%, transparent 70%);\r\n            animation: floatHelpTim 12s ease-in-out infinite;\r\n            filter: blur(1px);\r\n        }\r\n\r\n        .help-circle-tim:nth-child(1) {\r\n            width: 200px;\r\n            height: 200px;\r\n            top: -20%;\r\n            right: 10%;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .help-circle-tim:nth-child(2) {\r\n            width: 150px;\r\n            height: 150px;\r\n            bottom: -15%;\r\n            left: 15%;\r\n            animation-delay: 6s;\r\n        }\r\n\r\n        @keyframes floatHelpTim {\r\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.3; }\r\n            50% { transform: translateY(-20px) scale(1.1) rotate(180deg); opacity: 0.5; }\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY *\/\r\n        .help-grid-overlay-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                linear-gradient(rgba(220, 38, 38, 0.02) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(220, 38, 38, 0.02) 1px, transparent 1px);\r\n            background-size: 80px 80px;\r\n            animation: helpGridMoveTim 30s linear infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        @keyframes helpGridMoveTim {\r\n            0% { transform: translate(0, 0); }\r\n            100% { transform: translate(80px, 80px); }\r\n        }\r\n\r\n        \/* MAIN CONTAINER *\/\r\n        .help-container-tim {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 0 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE *\/\r\n        .help-badge-tim {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 8px 20px;\r\n            border-radius: 25px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            margin-bottom: 25px;\r\n            animation: helpBadgeEntranceTim 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.3);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .help-badge-tim i {\r\n            color: #ffd700;\r\n            animation: helpHeartSpinTim 4s linear infinite;\r\n        }\r\n\r\n        @keyframes helpBadgeEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px) scale(0.8); }\r\n            100% { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n\r\n        @keyframes helpHeartSpinTim {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* MAIN TITLE *\/\r\n        .help-main-title-tim {\r\n            font-size: 2.8rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 20px !important;\r\n            line-height: 1.2 !important;\r\n            animation: helpTitleEntranceTim 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        \/* RESPONSIVE TITLE DISPLAY *\/\r\n        .desktop-only {\r\n            display: inline;\r\n        }\r\n\r\n        .mobile-only {\r\n            display: none;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .desktop-only {\r\n                display: none;\r\n            }\r\n\r\n            .mobile-only {\r\n                display: inline;\r\n            }\r\n        }\r\n\r\n        .help-title-highlight-tim {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: helpTitleGradientTim 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .help-title-highlight-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -4px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: helpTitleUnderline 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes helpTitleUnderline {\r\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\r\n            50% { opacity: 1; transform: scaleX(1.05); }\r\n        }\r\n\r\n        @keyframes helpTitleGradientTim {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes helpTitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-50px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* SUBTITLE *\/\r\n        .help-subtitle-tim {\r\n            font-size: 1.1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 0 !important;\r\n            animation: helpSubtitleEntranceTim 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @keyframes helpSubtitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* DECORATIVE ELEMENTS *\/\r\n        .help-decorative-line-tim {\r\n            width: 80px;\r\n            height: 3px;\r\n            background: var(--gradient-red);\r\n            margin: 30px auto 0;\r\n            border-radius: 2px;\r\n            animation: helpLineEntranceTim 1s ease-out 0.8s both;\r\n            position: relative;\r\n        }\r\n\r\n        .help-decorative-line-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 4px;\r\n            z-index: -1;\r\n            animation: helpLineGlow 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes helpLineGlow {\r\n            0%, 100% { opacity: 0.3; transform: scale(1); }\r\n            50% { opacity: 0.6; transform: scale(1.1); }\r\n        }\r\n\r\n        @keyframes helpLineEntranceTim {\r\n            0% { opacity: 0; transform: scaleX(0); }\r\n            100% { opacity: 1; transform: scaleX(1); }\r\n        }\r\n\r\n        \/* HELP ICONS WITH WAVES *\/\r\n        .help-icon-tim {\r\n            position: absolute;\r\n            z-index: 2;\r\n            color: #dc2626;\r\n            font-size: 32px;\r\n            animation: helpIconFloat 8s ease-in-out infinite;\r\n            opacity: 0.8;\r\n            display: none; \/* Oculto por padr\u00e3o no desktop *\/\r\n        }\r\n\r\n        .help-icon-tim:nth-child(1) {\r\n            top: 35%;\r\n            left: 25%;\r\n            animation-delay: 0s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .help-icon-tim:nth-child(2) {\r\n            top: 70%;\r\n            left: 50%;\r\n            animation-delay: 2s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .help-icon-tim:nth-child(3) {\r\n            top: 35%;\r\n            right: 45%;\r\n            animation-delay: 4s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .help-icon-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 50px;\r\n            height: 50px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: helpIconWaves 3s ease-out infinite;\r\n            opacity: 0;\r\n        }\r\n\r\n        .help-icon-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 80px;\r\n            height: 80px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: helpIconWaves 3s ease-out infinite;\r\n            animation-delay: 1s;\r\n            opacity: 0;\r\n        }\r\n\r\n        @keyframes helpIconFloat {\r\n            0%, 100% { \r\n                transform: translateY(0) translateX(0) scale(1) rotate(0deg); \r\n                opacity: 0.6; \r\n            }\r\n            25% { \r\n                transform: translateY(-15px) translateX(8px) scale(1.1) rotate(10deg); \r\n                opacity: 0.8; \r\n            }\r\n            50% { \r\n                transform: translateY(-8px) translateX(-5px) scale(0.95) rotate(-5deg); \r\n                opacity: 1; \r\n            }\r\n            75% { \r\n                transform: translateY(-20px) translateX(10px) scale(1.05) rotate(8deg); \r\n                opacity: 0.7; \r\n            }\r\n        }\r\n\r\n        @keyframes helpIconWaves {\r\n            0% {\r\n                opacity: 0.6;\r\n                transform: translate(-50%, -50%) scale(0.5);\r\n            }\r\n            50% {\r\n                opacity: 0.3;\r\n                transform: translate(-50%, -50%) scale(1);\r\n            }\r\n            100% {\r\n                opacity: 0;\r\n                transform: translate(-50%, -50%) scale(1.5);\r\n            }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN *\/\r\n        @media (max-width: 1024px) {\r\n            .help-container-tim {\r\n                padding: 0 25px;\r\n            }\r\n            \r\n            .help-main-title-tim {\r\n                font-size: 2.4rem !important;\r\n            }\r\n            \r\n            .help-subtitle-tim {\r\n                font-size: 1rem !important;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .help-title-section-tim {\r\n                padding: 50px 0 35px 0;\r\n            }\r\n            \r\n            .help-container-tim {\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .help-main-title-tim {\r\n                font-size: 2rem !important;\r\n                margin-bottom: 16px !important;\r\n            }\r\n            \r\n            .help-subtitle-tim {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .help-badge-tim {\r\n                font-size: 0.8rem;\r\n                padding: 6px 16px;\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .help-decorative-line-tim {\r\n                width: 60px;\r\n                margin-top: 25px;\r\n            }\r\n            \r\n            \/* MOBILE HELP ICONS POSITIONING - APENAS VIS\u00cdVEL NO MOBILE *\/\r\n            .help-icon-tim {\r\n                display: block; \/* Mostra apenas no mobile *\/\r\n            }\r\n            \r\n            .help-icon-tim:nth-child(1) {\r\n                top: 15%;\r\n                left: 5%;\r\n            }\r\n\r\n            .help-icon-tim:nth-child(2) {\r\n                display: none; \/* Esconde o segundo \u00edcone no mobile *\/\r\n            }\r\n\r\n            .help-icon-tim:nth-child(3) {\r\n                top: 15%;\r\n                right: 5%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .help-title-section-tim {\r\n                padding: 40px 0 30px 0;\r\n            }\r\n            \r\n            .help-container-tim {\r\n                padding: 0 15px;\r\n            }\r\n            \r\n            .help-main-title-tim {\r\n                font-size: 1.8rem !important;\r\n                margin-bottom: 14px !important;\r\n            }\r\n            \r\n            .help-subtitle-tim {\r\n                font-size: 0.9rem !important;\r\n            }\r\n            \r\n            .help-badge-tim {\r\n                font-size: 0.75rem;\r\n                padding: 5px 14px;\r\n                margin-bottom: 18px;\r\n            }\r\n            \r\n            .help-decorative-line-tim {\r\n                width: 50px;\r\n                margin-top: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n<!-- 2. SEGUNDO: Cole este HTML no widget \"HTML\" do Elementor -->\r\n\r\n<!-- LINKS OBRIGAT\u00d3RIOS (Cole no cabe\u00e7alho do site se ainda n\u00e3o tiver) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&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<!-- T\u00cdTULO CENTRAL DE AJUDA TIM STYLE -->\r\n<section class=\"help-title-section-tim\">\r\n    <!-- BACKGROUND ELEMENTS -->\r\n    <div class=\"help-bg-tim\">\r\n        <div class=\"help-circle-tim\"><\/div>\r\n        <div class=\"help-circle-tim\"><\/div>\r\n    <\/div>\r\n    <div class=\"help-grid-overlay-tim\"><\/div>\r\n    \r\n    <!-- FLOATING HELP ICONS MOBILE -->\r\n    <div class=\"help-icon-tim\">\r\n        <i class=\"fas fa-headset\"><\/i>\r\n    <\/div>\r\n    <div class=\"help-icon-tim\">\r\n        <i class=\"fas fa-tools\"><\/i>\r\n    <\/div>\r\n    \r\n    <!-- MAIN CONTAINER -->\r\n    <div class=\"help-container-tim\">\r\n        <!-- ANNOUNCEMENT BADGE -->\r\n        <div class=\"help-badge-tim\">\r\n            <i class=\"fas fa-heart\"><\/i>\r\n            <span>Estamos aqui para ajudar<\/span>\r\n        <\/div>\r\n        \r\n        <!-- MAIN TITLE -->\r\n        <h2 class=\"help-main-title-tim\">\r\n            <span class=\"desktop-only\">Central de <span class=\"help-title-highlight-tim\">Ajuda<\/span><\/span>\r\n            <span class=\"mobile-only\">Central de <span class=\"help-title-highlight-tim\">Ajuda<\/span><\/span>\r\n        <\/h2>\r\n        \r\n        <!-- SUBTITLE -->\r\n        <p class=\"help-subtitle-tim\">\r\n            Suporte especializado e atendimento personalizado para resolver todas as suas necessidades.\r\n        <\/p>\r\n        \r\n        <!-- DECORATIVE LINE -->\r\n        <div class=\"help-decorative-line-tim\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 3. TERCEIRO: Cole este JavaScript no rodap\u00e9 do site (opcional) -->\r\n<script>\r\n    \/\/ PARALLAX EFFECT ON SCROLL HELP TIM\r\n    window.addEventListener('scroll', () => {\r\n        const scrolled = window.pageYOffset;\r\n        const rate = scrolled * -0.2;\r\n        \r\n        const helpCircles = document.querySelectorAll('.help-circle-tim');\r\n        if (helpCircles.length > 0) {\r\n            helpCircles.forEach((circle, index) => {\r\n                const speed = (index + 1) * 0.15;\r\n                circle.style.transform = `translateY(${rate * speed}px)`;\r\n            });\r\n        }\r\n        \r\n        \/\/ Floating help icons parallax\r\n        const helpIcons = document.querySelectorAll('.help-icon-tim');\r\n        if (helpIcons.length > 0) {\r\n            helpIcons.forEach((icon, index) => {\r\n                const speed = (index + 1) * 0.08;\r\n                icon.style.transform = `translateY(${rate * speed}px) rotate(${scrolled * 0.05}deg)`;\r\n            });\r\n        }\r\n    });\r\n\r\n    \/\/ INTERSECTION OBSERVER FOR ANIMATIONS HELP TIM\r\n    const observerOptionsHelp = {\r\n        threshold: 0.1,\r\n        rootMargin: '0px 0px -50px 0px'\r\n    };\r\n\r\n    const observerHelp = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.animationPlayState = 'running';\r\n            }\r\n        });\r\n    }, observerOptionsHelp);\r\n\r\n    \/\/ OBSERVE ANIMATED ELEMENTS WHEN DOM IS READY HELP TIM\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ OBSERVE ANIMATED ELEMENTS\r\n        const animatedElementsHelp = document.querySelectorAll('[class*=\"helpEntranceTim\"], [class*=\"helpGlow\"]');\r\n        animatedElementsHelp.forEach(el => {\r\n            if (observerHelp) {\r\n                observerHelp.observe(el);\r\n            }\r\n        });\r\n    });\r\n<\/script>\r\n\r\n<!-- FIM DO C\u00d3DIGO PARA ELEMENTOR T\u00cdTULO CENTRAL DE AJUDA TIM STYLE -->\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-681b9ac elementor-hidden-laptop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"681b9ac\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e884f4 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"1e884f4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Font Awesome para os \u00edcones -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n<style>\r\n.autoatendimento {\r\n  background-color: #0f0f0f;\r\n  padding: 60px 20px;\r\n  font-family: 'DM Sans', sans-serif;\r\n  color: white;\r\n  text-align: center;\r\n}\r\n\r\n.autoatendimento h2 {\r\n  font-size: 28px;\r\n  font-weight: bold;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.auto-cards {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 20px;\r\n}\r\n\r\n.auto-card {\r\n  background-color: #1a1a1a;\r\n  border: 1px solid #444;\r\n  border-radius: 16px;\r\n  padding: 25px 20px;\r\n  width: 240px;\r\n  height: 200px;\r\n  text-align: left;\r\n  position: relative;\r\n  transition: all 0.3s ease;\r\n  text-decoration: none;\r\n  color: inherit;\r\n  display: block;\r\n}\r\n\r\n.auto-card:hover {\r\n  border-color: #e60000;\r\n  transform: translateY(-5px);\r\n}\r\n\r\n.auto-card i {\r\n  font-size: 22px;\r\n  margin-bottom: 15px;\r\n  color: white;\r\n}\r\n\r\n.auto-card h4 {\r\n  font-size: 16px;\r\n  color: white;\r\n  margin-bottom: 5px;\r\n  font-weight: bold;\r\n}\r\n\r\n.auto-card .desc {\r\n  font-size: 14px;\r\n  color: #ccc;\r\n  line-height: 1.3;\r\n}\r\n\r\n.auto-card .seta {\r\n  position: absolute;\r\n  bottom: 20px;\r\n  right: 20px;\r\n  font-size: 16px;\r\n  color: #FFD700;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.auto-card:hover .seta {\r\n  transform: translateX(3px);\r\n}\r\n<\/style>\r\n\r\n  <div class=\"auto-cards\">\r\n\r\n    <a href=\"https:\/\/hbtelecom.sgp.net.br\/accounts\/central\/login?next=\/central\/2via\/\" target=\"_blank\" class=\"auto-card\">\r\n      <i class=\"fas fa-file-invoice\"><\/i>\r\n      <h4>2\u00aa via da fatura<\/h4>\r\n      <div class=\"desc\">Baixe sua fatura atrav\u00e9s do sistema online<\/div>\r\n      <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20que%20entrassem%20em%20contato%20comigo.%20Meu%20nome%20\u00e9%20[SEU%20NOME]%20e%20meu%20telefone%20\u00e9%20[SEU%20TELEFONE].\" target=\"_blank\" class=\"auto-card\">\r\n      <i class=\"fas fa-phone\"><\/i>\r\n      <h4>Ligamos para voc\u00ea<\/h4>\r\n      <div class=\"desc\">Informe seus dados e entraremos em contato<\/div>\r\n      <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Preciso%20de%20ajuda%20e%20suporte.%20Podem%20me%20auxiliar?\" target=\"_blank\" class=\"auto-card\">\r\n      <i class=\"fas fa-headset\"><\/i>\r\n      <h4>Central de ajuda<\/h4>\r\n      <div class=\"desc\">Tudo que voc\u00ea precisa saber para tirar d\u00favidas<\/div>\r\n      <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n    <\/a>\r\n\r\n    <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Preciso%20de%20suporte%20t\u00e9cnico%20remoto%20para%20resolver%20um%20problema%20na%20minha%20internet.\" target=\"_blank\" class=\"auto-card\">\r\n      <i class=\"fas fa-desktop\"><\/i>\r\n      <h4>Suporte remoto<\/h4>\r\n      <div class=\"desc\">Realizamos seu atendimento por acesso remoto<\/div>\r\n      <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n    <\/a>\r\n\r\n  <\/div>\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-8a718a3 e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet e-flex e-con e-parent\" data-id=\"8a718a3\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e96474 elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"7e96474\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Font Awesome -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\r\n\r\n<style>\r\n.autoatendimento-mobile {\r\n  background-color: #000;\r\n  padding: 0px 0 0px;\r\n  font-family: 'DM Sans', sans-serif;\r\n  color: white;\r\n  text-align: center;\r\n  overflow: hidden;\r\n}\r\n\r\n.auto-cards-container-mobile {\r\n  overflow-x: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n  scroll-snap-type: x mandatory;\r\n  scroll-behavior: smooth;\r\n  padding-left: 20px;\r\n}\r\n\r\n.auto-cards-mobile {\r\n  display: flex;\r\n  gap: 12px;\r\n  width: max-content;\r\n  padding-right: 20px; \/* foi 140px antes *\/\r\n}\r\n\r\n.auto-cards-mobile::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n.auto-card-mobile {\r\n  background-color: #1a1a1a;\r\n  border: 1px solid #444;\r\n  border-radius: 15px;\r\n  width: 240px;\r\n  min-width: 240px;\r\n  height: 240px;\r\n  flex-shrink: 0;\r\n  scroll-snap-align: start;\r\n  text-align: left;\r\n  padding: 25px;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  text-decoration: none;\r\n  color: white;\r\n  transition: none;\r\n  outline: none;\r\n}\r\n\r\n.auto-card-mobile:visited,\r\n.auto-card-mobile:hover,\r\n.auto-card-mobile:focus {\r\n  text-decoration: none;\r\n  color: white;\r\n}\r\n\r\n.auto-card-mobile i {\r\n  font-size: 24px;\r\n  color: white;\r\n  margin-bottom: 15px;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n.auto-card-mobile h4 {\r\n  font-size: 16px;\r\n  margin-bottom: 4px;\r\n  font-weight: bold;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  transition: color 0.3s ease;\r\n  position: relative;\r\n  padding-bottom: 8px;\r\n}\r\n\r\n\/* Linha abaixo do t\u00edtulo *\/\r\n.auto-card-mobile h4::after {\r\n  content: \"\";\r\n  display: block;\r\n  width: 30px;\r\n  height: 2px;\r\n  background-color: #fff;\r\n  margin-top: 6px;\r\n  transition: background-color 0.3s ease;\r\n}\r\n\r\n.auto-card-mobile .desc {\r\n  font-size: 14px;\r\n  color: #ccc;\r\n  line-height: 1.4;\r\n  flex-grow: 1;\r\n  transition: color 0.3s ease;\r\n  margin-bottom: 15px;\r\n}\r\n\r\n.auto-card-mobile .cta-button {\r\n  background: linear-gradient(135deg, #dc2626, #b91c1c);\r\n  color: white;\r\n  border: none;\r\n  border-radius: 8px;\r\n  padding: 12px 16px;\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  text-align: center;\r\n  margin-bottom: 10px;\r\n  text-decoration: none;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  position: relative;\r\n}\r\n\r\n.auto-card-mobile .cta-button .btn-text {\r\n  font-size: 13px;\r\n  font-weight: 600;\r\n}\r\n\r\n.auto-card-mobile .cta-button .btn-arrow {\r\n  font-size: 14px;\r\n  transition: transform 0.3s ease;\r\n  position: absolute;\r\n  right: 16px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n.auto-card-mobile .cta-button:hover {\r\n  background: linear-gradient(135deg, #b91c1c, #991b1b);\r\n  transform: translateY(-1px);\r\n  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);\r\n}\r\n\r\n.auto-card-mobile .cta-button:hover .btn-arrow {\r\n  transform: translateY(-50%) translateX(3px);\r\n}\r\n\r\n.auto-card-mobile .cta-button:active {\r\n  transform: translateY(0);\r\n}\r\n\r\n.auto-card-mobile.active .cta-button {\r\n  background: linear-gradient(135deg, #fff, #f1f1f1);\r\n  color: #E52D2F;\r\n  border: 1px solid #E52D2F;\r\n}\r\n\r\n.auto-card-mobile.active .cta-button:hover {\r\n  background: linear-gradient(135deg, #f8f8f8, #e8e8e8);\r\n  color: #b91c1c;\r\n}\r\n\r\n.auto-card-mobile .seta {\r\n  display: none; \/* Esconder a seta original *\/\r\n}\r\n\r\n.auto-card-mobile .seta {\r\n  font-size: 16px;\r\n  color: #FFD700;\r\n  position: absolute;\r\n  bottom: 20px;\r\n  right: 20px;\r\n  transition: color 0.3s ease;\r\n}\r\n\r\n\/* CARD ATIVO - tudo vermelho + linha *\/\r\n.auto-card-mobile.active i {\r\n  color: #E52D2F;\r\n}\r\n\r\n.auto-card-mobile.active h4 {\r\n  color: #E52D2F;\r\n}\r\n\r\n.auto-card-mobile.active h4::after {\r\n  background-color: #E52D2F;\r\n}\r\n\r\n.auto-card-mobile.active .desc {\r\n  color: #E52D2F;\r\n}\r\n\r\n.auto-card-mobile.active .seta {\r\n  color: #E52D2F;\r\n}\r\n\r\n\/* Bullets *\/\r\n.bullets-mobile {\r\n  display: flex;\r\n  justify-content: center;\r\n  margin-top: 20px;\r\n  gap: 10px;\r\n}\r\n\r\n.bullet-mobile {\r\n  width: 18px;\r\n  height: 6px;\r\n  background-color: #555;\r\n  border-radius: 3px;\r\n  transition: background-color 0.3s, width 0.3s;\r\n}\r\n\r\n.bullet-mobile.active {\r\n  background-color: #e60000;\r\n  width: 26px;\r\n}\r\n<\/style>\r\n\r\n<div class=\"autoatendimento-mobile\">\r\n  <div class=\"auto-cards-container-mobile\" id=\"scrollCardsMobile\">\r\n    <div class=\"auto-cards-mobile\">\r\n\r\n      <a href=\"https:\/\/hbtelecom.sgp.net.br\/accounts\/central\/login?next=\/central\/2via\/\" class=\"auto-card-mobile\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        <i class=\"fas fa-file-invoice\"><\/i>\r\n        <h4>2\u00aa via da fatura<\/h4>\r\n        <div class=\"desc\">Baixe sua fatura atrav\u00e9s do sistema online<\/div>\r\n        <div class=\"cta-button\">\r\n          <span class=\"btn-text\">Acessar 2\u00aa Via<\/span>\r\n          <i class=\"fas fa-arrow-right btn-arrow\"><\/i>\r\n        <\/div>\r\n        <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Gostaria%20que%20voc\u00eas%20entrassem%20em%20contato%20comigo.%20Podem%20me%20ligar?\" class=\"auto-card-mobile\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        <i class=\"fas fa-phone\"><\/i>\r\n        <h4>Ligamos para voc\u00ea<\/h4>\r\n        <div class=\"desc\">Informe seus dados e entraremos em contato<\/div>\r\n        <div class=\"cta-button\">\r\n          <span class=\"btn-text\">Solicitar Liga\u00e7\u00e3o<\/span>\r\n          <i class=\"fas fa-arrow-right btn-arrow\"><\/i>\r\n        <\/div>\r\n        <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Preciso%20de%20ajuda%20e%20suporte.%20Podem%20me%20auxiliar?\" class=\"auto-card-mobile\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        <i class=\"fas fa-headset\"><\/i>\r\n        <h4>Central de ajuda<\/h4>\r\n        <div class=\"desc\">Tudo que voc\u00ea precisa saber para tirar d\u00favidas<\/div>\r\n        <div class=\"cta-button\">\r\n          <span class=\"btn-text\">Ver Ajuda<\/span>\r\n          <i class=\"fas fa-arrow-right btn-arrow\"><\/i>\r\n        <\/div>\r\n        <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/wa.me\/554130731297?text=Ol\u00e1!%20Preciso%20de%20suporte%20t\u00e9cnico%20remoto.%20Podem%20me%20ajudar?\" class=\"auto-card-mobile\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        <i class=\"fas fa-desktop\"><\/i>\r\n        <h4>Suporte remoto<\/h4>\r\n        <div class=\"desc\">Realizamos seu atendimento por acesso remoto<\/div>\r\n        <div class=\"cta-button\">\r\n          <span class=\"btn-text\">Iniciar Suporte<\/span>\r\n          <i class=\"fas fa-arrow-right btn-arrow\"><\/i>\r\n        <\/div>\r\n        <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n      <\/a>\r\n\r\n      <a href=\"https:\/\/hbtelecom.speedtestcustom.com\/\" class=\"auto-card-mobile\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n        <i class=\"fas fa-gauge\"><\/i>\r\n        <h4>Testar velocidade<\/h4>\r\n        <div class=\"desc\">Verifique a velocidade da sua internet em tempo real<\/div>\r\n        <div class=\"cta-button\">\r\n          <span class=\"btn-text\">Testar Agora<\/span>\r\n          <i class=\"fas fa-arrow-right btn-arrow\"><\/i>\r\n        <\/div>\r\n        <div class=\"seta\"><i class=\"fas fa-arrow-right\"><\/i><\/div>\r\n      <\/a>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"bullets-mobile\" id=\"bulletsMobile\">\r\n    <div class=\"bullet-mobile active\"><\/div>\r\n    <div class=\"bullet-mobile\"><\/div>\r\n    <div class=\"bullet-mobile\"><\/div>\r\n    <div class=\"bullet-mobile\"><\/div>\r\n    <div class=\"bullet-mobile\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst container = document.getElementById(\"scrollCardsMobile\");\r\nconst bullets = document.querySelectorAll(\".bullet-mobile\");\r\nconst cards = document.querySelectorAll(\".auto-card-mobile\");\r\n\r\nfunction updateActiveCard() {\r\n  const scrollLeft = container.scrollLeft;\r\n  const cardWidth = 252; \/\/ 240 + gap\r\n  const index = Math.round(scrollLeft \/ cardWidth);\r\n\r\n  bullets.forEach((b, i) => {\r\n    b.classList.toggle(\"active\", i === index);\r\n  });\r\n\r\n  cards.forEach((card, i) => {\r\n    card.classList.toggle(\"active\", i === index);\r\n  });\r\n}\r\n\r\ncontainer.addEventListener(\"scroll\", () => {\r\n  window.requestAnimationFrame(updateActiveCard);\r\n});\r\n\r\nupdateActiveCard();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c76b0ec e-con-full elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet e-flex e-con e-parent\" data-id=\"c76b0ec\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9f6f9f0 elementor-widget elementor-widget-html\" data-id=\"9f6f9f0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- T\u00cdTULO APLICATIVO MINHA HB TELECOM ESTILO TIM - COPIE DAQUI PARA O ELEMENTOR -->\r\n\r\n<!-- 1. PRIMEIRO: Cole este CSS no campo \"CSS Customizado\" do Elementor -->\r\n<style>\r\n        \/* VARI\u00c1VEIS CSS T\u00cdTULO APP MINHA HB TELECOM TIM STYLE *\/\r\n        :root {\r\n            --primary-red: #dc2626;\r\n            --gradient-red: linear-gradient(135deg, #dc2626, #b91c1c);\r\n            --dark-bg: #0f0f0f;\r\n            --text-light: #f8fafc;\r\n            --text-gray: #6c757d;\r\n        }\r\n\r\n        \/* SECTION T\u00cdTULO APP MINHA HB TELECOM TIM STYLE *\/\r\n        .app-title-section-tim {\r\n            position: relative;\r\n            padding: 60px 0 40px 0;\r\n            background: #000000;\r\n            overflow: hidden;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* BACKGROUND ANIMATED ELEMENTS *\/\r\n        .app-bg-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .app-circle-tim {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(220, 38, 38, 0.08) 0%, rgba(255, 107, 107, 0.05) 40%, transparent 70%);\r\n            animation: floatAppTim 12s ease-in-out infinite;\r\n            filter: blur(1px);\r\n        }\r\n\r\n        .app-circle-tim:nth-child(1) {\r\n            width: 200px;\r\n            height: 200px;\r\n            top: -20%;\r\n            right: 10%;\r\n            animation-delay: 0s;\r\n        }\r\n\r\n        .app-circle-tim:nth-child(2) {\r\n            width: 150px;\r\n            height: 150px;\r\n            bottom: -15%;\r\n            left: 15%;\r\n            animation-delay: 6s;\r\n        }\r\n\r\n        @keyframes floatAppTim {\r\n            0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); opacity: 0.3; }\r\n            50% { transform: translateY(-20px) scale(1.1) rotate(180deg); opacity: 0.5; }\r\n        }\r\n\r\n        \/* GRID PATTERN OVERLAY *\/\r\n        .app-grid-overlay-tim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                linear-gradient(rgba(220, 38, 38, 0.02) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(220, 38, 38, 0.02) 1px, transparent 1px);\r\n            background-size: 80px 80px;\r\n            animation: appGridMoveTim 30s linear infinite;\r\n            z-index: 1;\r\n        }\r\n\r\n        @keyframes appGridMoveTim {\r\n            0% { transform: translate(0, 0); }\r\n            100% { transform: translate(80px, 80px); }\r\n        }\r\n\r\n        \/* MAIN CONTAINER *\/\r\n        .app-container-tim {\r\n            max-width: 1200px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            padding: 0 30px;\r\n            position: relative;\r\n            z-index: 10;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* ANNOUNCEMENT BADGE *\/\r\n        .app-badge-tim {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--gradient-red);\r\n            color: white;\r\n            padding: 8px 20px;\r\n            border-radius: 25px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            margin-bottom: 25px;\r\n            animation: appBadgeEntranceTim 1s ease-out 0.2s both;\r\n            box-shadow: 0 6px 25px rgba(220, 38, 38, 0.3);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .app-badge-tim i {\r\n            color: #ffd700;\r\n            animation: appMobileSpinTim 4s linear infinite;\r\n        }\r\n\r\n        @keyframes appBadgeEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px) scale(0.8); }\r\n            100% { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n\r\n        @keyframes appMobileSpinTim {\r\n            0% { transform: rotate(0deg); }\r\n            100% { transform: rotate(360deg); }\r\n        }\r\n\r\n        \/* MAIN TITLE *\/\r\n        .app-main-title-tim {\r\n            font-size: 2.8rem !important;\r\n            font-weight: 700 !important;\r\n            font-family: 'Inter', sans-serif !important;\r\n            margin-bottom: 20px !important;\r\n            line-height: 1.2 !important;\r\n            animation: appTitleEntranceTim 1s ease-out 0.4s both;\r\n            color: var(--text-light) !important;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        \/* RESPONSIVE TITLE DISPLAY *\/\r\n        .desktop-only {\r\n            display: inline;\r\n        }\r\n\r\n        .mobile-only {\r\n            display: none;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .desktop-only {\r\n                display: none;\r\n            }\r\n\r\n            .mobile-only {\r\n                display: inline;\r\n            }\r\n        }\r\n\r\n        .app-title-highlight-tim {\r\n            background: linear-gradient(135deg, #ff6b6b 0%, #dc2626 25%, #ff4757 50%, #e74c3c 75%, #dc2626 100%);\r\n            background-size: 400% 400%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: appTitleGradientTim 3s ease-in-out infinite;\r\n            position: relative;\r\n            font-weight: 800;\r\n        }\r\n\r\n        .app-title-highlight-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -4px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 2px;\r\n            animation: appTitleUnderline 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes appTitleUnderline {\r\n            0%, 100% { opacity: 0.6; transform: scaleX(1); }\r\n            50% { opacity: 1; transform: scaleX(1.05); }\r\n        }\r\n\r\n        @keyframes appTitleGradientTim {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        @keyframes appTitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-50px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* SUBTITLE *\/\r\n        .app-subtitle-tim {\r\n            font-size: 1.1rem !important;\r\n            font-weight: 500 !important;\r\n            color: rgba(248, 250, 252, 0.8) !important;\r\n            margin-bottom: 0 !important;\r\n            animation: appSubtitleEntranceTim 1s ease-out 0.6s both;\r\n            font-family: 'Inter', sans-serif !important;\r\n            line-height: 1.5 !important;\r\n            max-width: 650px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        @keyframes appSubtitleEntranceTim {\r\n            0% { opacity: 0; transform: translateY(-30px); }\r\n            100% { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* DECORATIVE ELEMENTS *\/\r\n        .app-decorative-line-tim {\r\n            width: 80px;\r\n            height: 3px;\r\n            background: var(--gradient-red);\r\n            margin: 30px auto 0;\r\n            border-radius: 2px;\r\n            animation: appLineEntranceTim 1s ease-out 1s both;\r\n            position: relative;\r\n        }\r\n\r\n        .app-decorative-line-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -3px;\r\n            left: -3px;\r\n            right: -3px;\r\n            bottom: -3px;\r\n            background: linear-gradient(135deg, #ff6b6b, #dc2626, #ff4757);\r\n            border-radius: 4px;\r\n            z-index: -1;\r\n            animation: appLineGlow 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes appLineGlow {\r\n            0%, 100% { opacity: 0.3; transform: scale(1); }\r\n            50% { opacity: 0.6; transform: scale(1.1); }\r\n        }\r\n\r\n        @keyframes appLineEntranceTim {\r\n            0% { opacity: 0; transform: scaleX(0); }\r\n            100% { opacity: 1; transform: scaleX(1); }\r\n        }\r\n\r\n        \/* APP ICONS WITH WAVES *\/\r\n        .app-icon-tim {\r\n            position: absolute;\r\n            z-index: 2;\r\n            color: #dc2626;\r\n            font-size: 32px;\r\n            animation: appIconFloat 8s ease-in-out infinite;\r\n            opacity: 0.8;\r\n            display: none; \/* Oculto por padr\u00e3o no desktop *\/\r\n        }\r\n\r\n        .app-icon-tim:nth-child(1) {\r\n            top: 25%;\r\n            left: 8%;\r\n            animation-delay: 0s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .app-icon-tim:nth-child(2) {\r\n            top: 65%;\r\n            right: 8%;\r\n            animation-delay: 2s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .app-icon-tim:nth-child(3) {\r\n            top: 45%;\r\n            right: 5%;\r\n            animation-delay: 4s;\r\n            color: #dc2626;\r\n        }\r\n\r\n        .app-icon-tim::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 50px;\r\n            height: 50px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: appIconWaves 3s ease-out infinite;\r\n            opacity: 0;\r\n        }\r\n\r\n        .app-icon-tim::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 80px;\r\n            height: 80px;\r\n            border: 2px solid currentColor;\r\n            border-radius: 50%;\r\n            transform: translate(-50%, -50%);\r\n            animation: appIconWaves 3s ease-out infinite;\r\n            animation-delay: 1s;\r\n            opacity: 0;\r\n        }\r\n\r\n        @keyframes appIconFloat {\r\n            0%, 100% { \r\n                transform: translateY(0) translateX(0) scale(1) rotate(0deg); \r\n                opacity: 0.6; \r\n            }\r\n            25% { \r\n                transform: translateY(-15px) translateX(8px) scale(1.1) rotate(10deg); \r\n                opacity: 0.8; \r\n            }\r\n            50% { \r\n                transform: translateY(-8px) translateX(-5px) scale(0.95) rotate(-5deg); \r\n                opacity: 1; \r\n            }\r\n            75% { \r\n                transform: translateY(-20px) translateX(10px) scale(1.05) rotate(8deg); \r\n                opacity: 0.7; \r\n            }\r\n        }\r\n\r\n        @keyframes appIconWaves {\r\n            0% {\r\n                opacity: 0.6;\r\n                transform: translate(-50%, -50%) scale(0.5);\r\n            }\r\n            50% {\r\n                opacity: 0.3;\r\n                transform: translate(-50%, -50%) scale(1);\r\n            }\r\n            100% {\r\n                opacity: 0;\r\n                transform: translate(-50%, -50%) scale(1.5);\r\n            }\r\n        }\r\n\r\n        \/* RESPONSIVE DESIGN *\/\r\n        @media (max-width: 1024px) {\r\n            .app-container-tim {\r\n                padding: 0 25px;\r\n            }\r\n            \r\n            .app-main-title-tim {\r\n                font-size: 2.4rem !important;\r\n            }\r\n            \r\n            .app-subtitle-tim {\r\n                font-size: 1rem !important;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .app-title-section-tim {\r\n                padding: 50px 0 35px 0;\r\n            }\r\n            \r\n            .app-container-tim {\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .app-main-title-tim {\r\n                font-size: 2rem !important;\r\n                margin-bottom: 16px !important;\r\n            }\r\n            \r\n            .app-subtitle-tim {\r\n                font-size: 0.95rem !important;\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .app-badge-tim {\r\n                font-size: 0.8rem;\r\n                padding: 6px 16px;\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .app-decorative-line-tim {\r\n                width: 60px;\r\n                margin-top: 25px;\r\n            }\r\n            \r\n            \/* MOBILE APP ICONS POSITIONING - APENAS VIS\u00cdVEL NO MOBILE *\/\r\n            .app-icon-tim {\r\n                display: block; \/* Mostra apenas no mobile *\/\r\n            }\r\n            \r\n            .app-icon-tim:nth-child(1) {\r\n                top: 12%;\r\n                left: 5%;\r\n            }\r\n\r\n            .app-icon-tim:nth-child(2) {\r\n                display: none; \/* Esconde o segundo \u00edcone no mobile *\/\r\n            }\r\n\r\n            .app-icon-tim:nth-child(3) {\r\n                top: 15%;\r\n                right: 5%;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .app-title-section-tim {\r\n                padding: 40px 0 30px 0;\r\n            }\r\n            \r\n            .app-container-tim {\r\n                padding: 0 15px;\r\n            }\r\n            \r\n            .app-main-title-tim {\r\n                font-size: 1.8rem !important;\r\n                margin-bottom: 14px !important;\r\n            }\r\n            \r\n            .app-subtitle-tim {\r\n                font-size: 0.9rem !important;\r\n            }\r\n            \r\n            .app-badge-tim {\r\n                font-size: 0.75rem;\r\n                padding: 5px 14px;\r\n                margin-bottom: 18px;\r\n            }\r\n            \r\n            .app-decorative-line-tim {\r\n                width: 50px;\r\n                margin-top: 20px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n<!-- 2. SEGUNDO: Cole este HTML no widget \"HTML\" do Elementor -->\r\n\r\n<!-- LINKS OBRIGAT\u00d3RIOS (Cole no cabe\u00e7alho do site se ainda n\u00e3o tiver) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&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<!-- T\u00cdTULO APLICATIVO MINHA HB TELECOM TIM STYLE -->\r\n<section class=\"app-title-section-tim\">\r\n    <!-- BACKGROUND ELEMENTS -->\r\n    <div class=\"app-bg-tim\">\r\n        <div class=\"app-circle-tim\"><\/div>\r\n        <div class=\"app-circle-tim\"><\/div>\r\n    <\/div>\r\n    <div class=\"app-grid-overlay-tim\"><\/div>\r\n    \r\n    <!-- FLOATING APP ICONS MOBILE -->\r\n    <div class=\"app-icon-tim\">\r\n        <i class=\"fas fa-mobile-alt\"><\/i>\r\n    <\/div>\r\n    <div class=\"app-icon-tim\">\r\n        <i class=\"fas fa-download\"><\/i>\r\n    <\/div>\r\n   \r\n   \r\n    <!-- MAIN CONTAINER -->\r\n    <div class=\"app-container-tim\">\r\n        <!-- ANNOUNCEMENT BADGE -->\r\n        <div class=\"app-badge-tim\">\r\n            <i class=\"fas fa-mobile-screen-button\"><\/i>\r\n            <span>Baixe Agora<\/span>\r\n        <\/div>\r\n        \r\n        <!-- MAIN TITLE -->\r\n        <h2 class=\"app-main-title-tim\">\r\n            <span class=\"desktop-only\">Aplicativo <span class=\"app-title-highlight-tim\">Minha HB Telecom<\/span><\/span>\r\n            <span class=\"mobile-only\">Aplicativo<br><span class=\"app-title-highlight-tim\">Minha HB Telecom<\/span><\/span>\r\n        <\/h2>\r\n        \r\n        <!-- SUBTITLE -->\r\n        <p class=\"app-subtitle-tim\">\r\n            Gerencie sua conta, consulte faturas, acompanhe seu consumo e muito mais. Tudo na palma da sua m\u00e3o com praticidade e seguran\u00e7a.\r\n        <\/p>\r\n        \r\n        <!-- DECORATIVE LINE -->\r\n        <div class=\"app-decorative-line-tim\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- 3. TERCEIRO: Cole este JavaScript no rodap\u00e9 do site (opcional) -->\r\n<script>\r\n    \/\/ PARALLAX EFFECT ON SCROLL APP MINHA HB TELECOM TIM\r\n    window.addEventListener('scroll', () => {\r\n        const scrolled = window.pageYOffset;\r\n        const rate = scrolled * -0.2;\r\n        \r\n        const appCircles = document.querySelectorAll('.app-circle-tim');\r\n        if (appCircles.length > 0) {\r\n            appCircles.forEach((circle, index) => {\r\n                const speed = (index + 1) * 0.15;\r\n                circle.style.transform = `translateY(${rate * speed}px)`;\r\n            });\r\n        }\r\n        \r\n        \/\/ Floating app icons parallax\r\n        const appIcons = document.querySelectorAll('.app-icon-tim');\r\n        if (appIcons.length > 0) {\r\n            appIcons.forEach((icon, index) => {\r\n                const speed = (index + 1) * 0.08;\r\n                icon.style.transform = `translateY(${rate * speed}px) rotate(${scrolled * 0.05}deg)`;\r\n            });\r\n        }\r\n    });\r\n\r\n    \/\/ INTERSECTION OBSERVER FOR ANIMATIONS APP MINHA HB TELECOM TIM\r\n    const observerOptionsApp = {\r\n        threshold: 0.1,\r\n        rootMargin: '0px 0px -50px 0px'\r\n    };\r\n\r\n    const observerApp = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.style.animationPlayState = 'running';\r\n            }\r\n        });\r\n    }, observerOptionsApp);\r\n\r\n    \/\/ OBSERVE ANIMATED ELEMENTS WHEN DOM IS READY APP MINHA HB TELECOM TIM\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        \/\/ OBSERVE ANIMATED ELEMENTS\r\n        const animatedElementsApp = document.querySelectorAll('[class*=\"appEntranceTim\"], [class*=\"appGlow\"]');\r\n        animatedElementsApp.forEach(el => {\r\n            if (observerApp) {\r\n                observerApp.observe(el);\r\n            }\r\n        });\r\n    });\r\n<\/script>\r\n\r\n<!-- FIM DO C\u00d3DIGO PARA ELEMENTOR T\u00cdTULO APLICATIVO MINHA HB TELECOM TIM STYLE -->\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3fe4a90 elementor-hidden-desktop elementor-hidden-laptop elementor-hidden-tablet e-flex e-con-boxed e-con e-parent\" data-id=\"3fe4a90\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57adc61 elementor-widget elementor-widget-html\" data-id=\"57adc61\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;700&display=swap');\n\n.app-box {\n  font-family: 'DM Sans', sans-serif;\n  background-color: #1a1a1a;\n  border: 1px solid #A7A6A64F;\n  border-radius: 15px;\n  padding: 20px;\n  max-width: 390px;\n  margin: 10px auto;\n  color: white;\n}\n\n.app-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 15px;\n}\n\n.app-header img.app-logo {\n  width: 50px;\n  height: 50px;\n  border-radius: 15%; \/* \ud83d\udd34 Deixa a imagem redonda *\/\n  object-fit: cover;\n  aspect-ratio: 1 \/ 1;\n  display: block;\n}\n\n.app-header h3 {\n  font-size: 18px;\n  margin: 0;\n}\n\n.app-header hr {\n  border: 0;\n  height: 2px;\n  background-color: white;\n  width: 38px;\n  margin-top: 6px;\n}\n\n.app-desc {\n  font-size: 18px;\n  margin-bottom: 30px;\n  line-height: 1.4;\n}\n\n.app-buttons {\n  display: flex;\n  gap: 6px;\n  flex-wrap: nowrap;\n  justify-content: center;\n}\n\n.app-button {\n  flex: 1 1 140px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  text-decoration: none;\n  border: 1px solid #fff;\n  padding: 8px 12px;\n  border-radius: 12px;\n  color: #fff;\n  font-weight: 600;\n  font-size: 14px;\n  transition: all 0.3s ease;\n  box-sizing: border-box;\n  white-space: nowrap;\n}\n\n.app-button img {\n  width: 28px;\n  height: 28px;\n  object-fit: contain;\n  filter: brightness(1) invert(0);\n  transition: filter 0.6s ease;\n}\n\n.app-button:hover {\n  background-color: #fff;\n  color: black;\n}\n\n.app-button:hover img {\n  filter: brightness(1) invert(0);\n}\n<\/style>\n\n<div class=\"app-box\">\n  <div class=\"app-header\">\n    <!-- \u2705 Classe app-logo adicionada aqui -->\n    <img decoding=\"async\" class=\"app-logo\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-11-at-10.04.34.jpeg\" alt=\"App Logo\">\n    <div>\n      <h3>Minha HB Telecom<\/h3>\n      <hr>\n    <\/div>\n  <\/div>\n  <div class=\"app-desc\">\n    O aplicativo \u00e9 uma forma pr\u00e1tica de autoatendimento para clientes do servi\u00e7o de internet fibra.\n  <\/div>\n  <div class=\"app-buttons\">\n    <a class=\"app-button\" href=\"https:\/\/apps.apple.com\/us\/app\/minha-hb-telecom\/id6701995592\" target=\"_blank\">\n      <img decoding=\"async\" src=\"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-content\/uploads\/2025\/07\/applecinza.png\" alt=\"Apple\">\n      App Store\n    <\/a>\n    <a class=\"app-button\" href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.provedor.hbtelecom\" target=\"_blank\">\n      <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/d\/d0\/Google_Play_Arrow_logo.svg\" alt=\"Google Play\">\n      Google Play\n    <\/a>\n  <\/div>\n<\/div>\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>Melhor Internet de Curitiba 2024 Internet Ultra R\u00e1pida que n\u00e3o te abandona Fibra \u00f3ptica dedicada com velocidade real garantida para trabalho, jogos e streaming. planos a partir de 400MEGA R$ 89,90\/m\u00eas Velocidade Real WiFi Premium Quero Contratar WhatsApp Internet HB Conectando Curitibacom velocidade total Melhor Internet de Curitiba 2024 Internet + TV sem limites para [&hellip;]<\/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-19392","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/pages\/19392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/comments?post=19392"}],"version-history":[{"count":166,"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/pages\/19392\/revisions"}],"predecessor-version":[{"id":19824,"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/pages\/19392\/revisions\/19824"}],"wp:attachment":[{"href":"https:\/\/hbtelecom.curitiba.br\/hbtelecom\/wp-json\/wp\/v2\/media?parent=19392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}