{"id":9,"date":"2026-07-31T12:35:39","date_gmt":"2026-07-31T15:35:39","guid":{"rendered":"https:\/\/agenciawifi.com.br\/?page_id=9"},"modified":"2026-10-11T17:44:40","modified_gmt":"2026-10-11T20:44:40","slug":"wifi","status":"publish","type":"page","link":"https:\/\/agenciawifi.com.br\/","title":{"rendered":"Wifi"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9\" class=\"elementor elementor-9\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4bad5bd e-con-full e-flex e-con e-parent\" data-id=\"4bad5bd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57c3801 elementor-widget elementor-widget-html\" data-id=\"57c3801\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"pt-BR\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Ag\u00eancia Wifi 360\u00b0 | Em Breve - Conecte sua Marca ao Futuro<\/title>\n    <meta name=\"description\"\n        content=\"Ag\u00eancia Wifi - Comunica\u00e7\u00e3o 360\u00b0, Tr\u00e1fego Pago, Rob\u00f4s de IA, Est\u00fadio Podcast, Lan\u00e7amentos e Posicionamento Digital. O novo portal est\u00e1 chegando!\">\n\n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap\"\n        rel=\"stylesheet\">\n\n    <!-- Font Awesome Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n\n    <style>\n        \/* ==========================================\n   AG\u00caNCIA WIFI 360\u00b0 - STYLESYSTEM (CSS)\n   ========================================== *\/\n\n        :root {\n            \/* Color Palette *\/\n            --bg-dark: #07090E;\n            --bg-card: rgba(18, 24, 38, 0.75);\n            --bg-card-hover: rgba(28, 36, 56, 0.85);\n            --bg-glass: rgba(255, 255, 255, 0.03);\n\n            --orange-glow: #FF9900;\n            --orange-primary: #FB8500;\n            --orange-deep: #D97706;\n            --orange-bright: #FFAA00;\n\n            --text-main: #F8FAFC;\n            --text-muted: #94A3B8;\n            --text-dim: #64748B;\n\n            --border-glass: rgba(255, 255, 255, 0.08);\n            --border-orange: rgba(251, 133, 0, 0.35);\n\n            \/* Fonts *\/\n            --font-heading: 'Outfit', sans-serif;\n            --font-body: 'Plus Jakarta Sans', sans-serif;\n\n            \/* Transitions *\/\n            --transition-fast: 0.2s ease;\n            --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n        }\n\n        \/* Reset & Base Settings *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        html {\n            scroll-behavior: smooth;\n            font-size: 16px;\n        }\n\n        body {\n            background-color: var(--bg-dark);\n            color: var(--text-main);\n            font-family: var(--font-body);\n            min-height: 100vh;\n            overflow-x: hidden;\n            position: relative;\n            line-height: 1.6;\n        }\n\n        \/* Disclaimer Top Bar & Notice Card *\/\n        .site-disclaimer-bar {\n            background: rgba(251, 133, 0, 0.12);\n            border-bottom: 1px solid rgba(251, 133, 0, 0.3);\n            color: #FFB703;\n            font-size: 0.85rem;\n            padding: 0.5rem 1rem;\n            text-align: center;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.6rem;\n            position: relative;\n            z-index: 100;\n            backdrop-filter: blur(10px);\n        }\n\n        .presentation-notice-card {\n            background: rgba(18, 24, 38, 0.7);\n            border: 1px solid rgba(251, 133, 0, 0.3);\n            border-radius: 12px;\n            padding: 0.8rem 1.4rem;\n            margin: 0.5rem 0 2rem;\n            display: flex;\n            align-items: center;\n            gap: 0.8rem;\n            max-width: 680px;\n            text-align: left;\n            backdrop-filter: blur(12px);\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n        }\n\n        .presentation-notice-card p {\n            font-size: 0.88rem;\n            color: var(--text-muted);\n            line-height: 1.4;\n        }\n\n        .presentation-notice-card i {\n            font-size: 1.2rem;\n        }\n\n        \/* Background Canvas *\/\n        #wifi-bg-canvas {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100vw;\n            height: 100vh;\n            z-index: 0;\n            pointer-events: none;\n        }\n\n        \/* Ambient Glow Blobs *\/\n        .ambient-glow {\n            position: fixed;\n            border-radius: 50%;\n            filter: blur(140px);\n            z-index: 1;\n            pointer-events: none;\n            opacity: 0.45;\n        }\n\n        .glow-top-left {\n            top: -15%;\n            left: -10%;\n            width: 50vw;\n            height: 50vw;\n            background: radial-gradient(circle, rgba(251, 133, 0, 0.35) 0%, rgba(0, 0, 0, 0) 70%);\n        }\n\n        .glow-bottom-right {\n            bottom: -20%;\n            right: -10%;\n            width: 60vw;\n            height: 60vw;\n            background: radial-gradient(circle, rgba(217, 119, 6, 0.3) 0%, rgba(0, 0, 0, 0) 70%);\n        }\n\n        .glow-center {\n            top: 35%;\n            left: 25%;\n            width: 40vw;\n            height: 40vw;\n            background: radial-gradient(circle, rgba(255, 170, 0, 0.15) 0%, rgba(0, 0, 0, 0) 70%);\n        }\n\n        \/* Container *\/\n        .app-container {\n            position: relative;\n            z-index: 2;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 1.5rem;\n        }\n\n        \/* ==========================================\n   HEADER\n   ========================================== *\/\n        .main-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 2rem 0 1.5rem;\n            border-bottom: 1px solid var(--border-glass);\n        }\n\n        .wifi-logo-svg {\n            height: 52px;\n            width: auto;\n        }\n\n        .header-status {\n            display: flex;\n            align-items: center;\n            gap: 0.6rem;\n            background: rgba(16, 185, 129, 0.1);\n            border: 1px solid rgba(16, 185, 129, 0.25);\n            padding: 0.4rem 1rem;\n            border-radius: 50px;\n        }\n\n        .status-pulse {\n            width: 8px;\n            height: 8px;\n            background-color: #10B981;\n            border-radius: 50%;\n            box-shadow: 0 0 10px #10B981;\n            animation: pulse-green 2s infinite;\n        }\n\n        @keyframes pulse-green {\n            0% {\n                transform: scale(0.95);\n                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);\n            }\n\n            70% {\n                transform: scale(1.1);\n                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);\n            }\n\n            100% {\n                transform: scale(0.95);\n                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);\n            }\n        }\n\n        .status-text {\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: #34D399;\n            letter-spacing: 0.5px;\n        }\n\n        .header-actions {\n            display: flex;\n            align-items: center;\n            gap: 0.8rem;\n        }\n\n        .btn-instagram-pill {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.6rem;\n            background: linear-gradient(135deg, rgba(225, 48, 108, 0.15), rgba(251, 133, 0, 0.15));\n            border: 1px solid rgba(225, 48, 108, 0.4);\n            color: #FFF;\n            text-decoration: none;\n            padding: 0.6rem 1.2rem;\n            border-radius: 50px;\n            font-family: var(--font-heading);\n            font-size: 0.9rem;\n            font-weight: 600;\n            transition: var(--transition-fast);\n        }\n\n        .btn-instagram-pill:hover {\n            background: linear-gradient(135deg, #E1306C, #FB8500);\n            box-shadow: 0 4px 20px rgba(225, 48, 108, 0.4);\n            transform: translateY(-2px);\n        }\n\n        .linktree-pill {\n            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(251, 133, 0, 0.15));\n            border-color: rgba(16, 185, 129, 0.4);\n        }\n\n        .linktree-pill:hover {\n            background: linear-gradient(135deg, #10B981, #FB8500);\n            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);\n        }\n\n        .whatsapp-pill {\n            background: linear-gradient(135deg, rgba(37, 211, 102, 0.2), rgba(18, 140, 126, 0.2));\n            border-color: rgba(37, 211, 102, 0.5);\n            color: #25D366;\n        }\n\n        .whatsapp-pill:hover {\n            background: linear-gradient(135deg, #25D366, #128C7E);\n            color: #FFF;\n            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);\n        }\n\n        .text-whatsapp {\n            color: #25D366;\n        }\n\n        .social-wa:hover {\n            background: #25D366 !important;\n            border-color: #25D366 !important;\n            box-shadow: 0 0 15px #25D366 !important;\n        }\n\n        \/* ==========================================\n   HERO SECTION\n   ========================================== *\/\n        .hero-section {\n            text-align: center;\n            padding: 4rem 1rem 3rem;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n        }\n\n        .hero-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.5rem;\n            background: rgba(251, 133, 0, 0.1);\n            border: 1px solid var(--border-orange);\n            color: var(--orange-bright);\n            padding: 0.4rem 1.1rem;\n            border-radius: 50px;\n            font-size: 0.85rem;\n            font-weight: 600;\n            margin-bottom: 1.5rem;\n        }\n\n        .signal-icon {\n            animation: wifi-blink 1.8s ease-in-out infinite alternate;\n        }\n\n        @keyframes wifi-blink {\n            0% {\n                opacity: 0.4;\n            }\n\n            100% {\n                opacity: 1;\n                transform: scale(1.1);\n            }\n        }\n\n        .hero-title {\n            font-family: var(--font-heading);\n            font-size: 3.2rem;\n            font-weight: 800;\n            line-height: 1.15;\n            margin-bottom: 1.2rem;\n            max-width: 900px;\n        }\n\n        .text-gradient {\n            background: linear-gradient(135deg, #FFF 20%, #FFB703 60%, #FB8500 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n\n        .hero-description {\n            color: var(--text-muted);\n            font-size: 1.15rem;\n            max-width: 680px;\n            margin-bottom: 2.5rem;\n        }\n\n        \/* ==========================================\n   COUNTDOWN TIMER\n   ========================================== *\/\n        .countdown-wrapper {\n            background: var(--bg-card);\n            border: 1px solid var(--border-glass);\n            backdrop-filter: blur(12px);\n            padding: 1.5rem 2.5rem;\n            border-radius: 20px;\n            margin-bottom: 3rem;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n        }\n\n        .countdown-title {\n            font-size: 0.85rem;\n            text-transform: uppercase;\n            letter-spacing: 2px;\n            color: var(--text-dim);\n            margin-bottom: 0.8rem;\n            font-weight: 600;\n        }\n\n        .countdown-grid {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 1rem;\n        }\n\n        .count-box {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            min-width: 70px;\n        }\n\n        .count-number {\n            font-family: var(--font-heading);\n            font-size: 2.5rem;\n            font-weight: 800;\n            color: var(--orange-bright);\n            line-height: 1;\n            text-shadow: 0 0 15px rgba(251, 133, 0, 0.5);\n        }\n\n        .count-label {\n            font-size: 0.75rem;\n            color: var(--text-muted);\n            text-transform: uppercase;\n            margin-top: 0.3rem;\n        }\n\n        .count-dots {\n            font-size: 2rem;\n            font-weight: 700;\n            color: var(--text-dim);\n            margin-bottom: 1rem;\n        }\n\n        \/* ==========================================\n   LEAD FORM CARD\n   ========================================== *\/\n        .lead-card {\n            background: linear-gradient(180deg, rgba(251, 133, 0, 0.08) 0%, rgba(18, 24, 38, 0.8) 100%);\n            border: 1px solid var(--border-orange);\n            backdrop-filter: blur(16px);\n            padding: 2.2rem;\n            border-radius: 24px;\n            max-width: 600px;\n            width: 100%;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\n        }\n\n        .lead-card-header {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.6rem;\n            font-weight: 600;\n            font-size: 0.95rem;\n            margin-bottom: 1.5rem;\n            color: var(--text-main);\n        }\n\n        .text-orange {\n            color: var(--orange-primary);\n        }\n\n        .lead-form {\n            display: flex;\n            flex-direction: column;\n            gap: 1rem;\n        }\n\n        .input-group {\n            position: relative;\n            width: 100%;\n        }\n\n        .input-icon {\n            position: absolute;\n            left: 1.2rem;\n            top: 50%;\n            transform: translateY(-50%);\n            color: var(--text-dim);\n            font-size: 1.1rem;\n            transition: var(--transition-fast);\n        }\n\n        .input-group input {\n            width: 100%;\n            background: rgba(7, 9, 14, 0.7);\n            border: 1px solid var(--border-glass);\n            border-radius: 12px;\n            padding: 0.9rem 1rem 0.9rem 3rem;\n            color: var(--text-main);\n            font-family: var(--font-body);\n            font-size: 0.95rem;\n            outline: none;\n            transition: var(--transition-fast);\n        }\n\n        .input-group input:focus {\n            border-color: var(--orange-primary);\n            box-shadow: 0 0 15px rgba(251, 133, 0, 0.25);\n        }\n\n        .input-group input:focus+.input-icon {\n            color: var(--orange-primary);\n        }\n\n        .btn-primary {\n            background: linear-gradient(135deg, var(--orange-primary), var(--orange-deep));\n            border: none;\n            color: #FFF;\n            padding: 1rem 1.8rem;\n            border-radius: 12px;\n            font-family: var(--font-heading);\n            font-size: 1rem;\n            font-weight: 700;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.8rem;\n            transition: var(--transition-fast);\n            box-shadow: 0 8px 25px rgba(251, 133, 0, 0.35);\n        }\n\n        .btn-primary:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 12px 30px rgba(251, 133, 0, 0.5);\n            background: linear-gradient(135deg, #FF9500, #E65100);\n        }\n\n        .form-feedback {\n            display: flex;\n            align-items: center;\n            gap: 0.6rem;\n            background: rgba(16, 185, 129, 0.15);\n            border: 1px solid rgba(16, 185, 129, 0.4);\n            color: #34D399;\n            padding: 0.8rem 1rem;\n            border-radius: 10px;\n            font-size: 0.9rem;\n            margin-top: 1rem;\n        }\n\n        .form-feedback.hidden {\n            display: none;\n        }\n\n        .privacy-note {\n            font-size: 0.78rem;\n            color: var(--text-dim);\n            margin-top: 1rem;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.4rem;\n        }\n\n        \/* ==========================================\n   INTERACTIVE RADAR & SERVICES\n   ========================================== *\/\n        .services-section {\n            padding: 4rem 0;\n        }\n\n        .section-header {\n            text-align: center;\n            margin-bottom: 3.5rem;\n        }\n\n        .section-tag {\n            font-size: 0.8rem;\n            font-weight: 700;\n            letter-spacing: 3px;\n            color: var(--orange-primary);\n            text-transform: uppercase;\n        }\n\n        .section-title {\n            font-family: var(--font-heading);\n            font-size: 2.2rem;\n            font-weight: 700;\n            margin: 0.5rem 0;\n        }\n\n        .section-subtitle {\n            color: var(--text-muted);\n            font-size: 1rem;\n        }\n\n        .radar-container {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 3rem;\n            align-items: center;\n        }\n\n        .radar-display {\n            position: relative;\n            width: 100%;\n            aspect-ratio: 1;\n            max-width: 440px;\n            margin: 0 auto;\n            background: radial-gradient(circle, rgba(251, 133, 0, 0.05) 0%, rgba(7, 9, 14, 0.95) 70%);\n            border: 2px solid var(--border-orange);\n            border-radius: 50%;\n            box-shadow: 0 0 50px rgba(251, 133, 0, 0.15);\n            overflow: visible;\n        }\n\n        \/* Radar Animation Sweep *\/\n        .radar-sweep {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: conic-gradient(from 0deg at 50% 50%, rgba(251, 133, 0, 0.35) 0deg, rgba(251, 133, 0, 0) 60deg);\n            border-radius: 50%;\n            animation: sweep 4s linear infinite;\n            pointer-events: none;\n        }\n\n        @keyframes sweep {\n            from {\n                transform: rotate(0deg);\n            }\n\n            to {\n                transform: rotate(360deg);\n            }\n        }\n\n        .radar-circle {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            border: 1px dashed rgba(251, 133, 0, 0.25);\n            border-radius: 50%;\n            pointer-events: none;\n        }\n\n        .circle-1 {\n            width: 30%;\n            height: 30%;\n        }\n\n        .circle-2 {\n            width: 60%;\n            height: 60%;\n        }\n\n        .circle-3 {\n            width: 88%;\n            height: 88%;\n        }\n\n        .radar-crosshair {\n            position: absolute;\n            background: rgba(251, 133, 0, 0.15);\n            pointer-events: none;\n        }\n\n        .radar-crosshair.horizontal {\n            top: 50%;\n            left: 0;\n            width: 100%;\n            height: 1px;\n        }\n\n        .radar-crosshair.vertical {\n            left: 50%;\n            top: 0;\n            height: 100%;\n            width: 1px;\n        }\n\n        .radar-center {\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            gap: 0.3rem;\n            color: var(--orange-bright);\n            font-family: var(--font-heading);\n            font-weight: 700;\n            font-size: 0.75rem;\n            z-index: 3;\n        }\n\n        .radar-center i {\n            font-size: 1.5rem;\n            text-shadow: 0 0 10px var(--orange-primary);\n        }\n\n        \/* Radar Buttons Nodes *\/\n        .radar-node {\n            position: absolute;\n            transform: translate(-50%, -50%);\n            width: 44px;\n            height: 44px;\n            background: rgba(18, 24, 38, 0.9);\n            border: 2px solid var(--border-orange);\n            border-radius: 50%;\n            color: var(--text-muted);\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 1.1rem;\n            transition: var(--transition-fast);\n            z-index: 5;\n        }\n\n        .radar-node:hover,\n        .radar-node.active {\n            background: var(--orange-primary);\n            color: #FFF;\n            border-color: #FFF;\n            box-shadow: 0 0 20px var(--orange-primary);\n            transform: translate(-50%, -50%) scale(1.25);\n        }\n\n        .node-tooltip {\n            position: absolute;\n            white-space: nowrap;\n            background: #0B0F19;\n            border: 1px solid var(--border-orange);\n            color: var(--text-main);\n            padding: 0.35rem 0.75rem;\n            border-radius: 8px;\n            font-size: 0.75rem;\n            font-weight: 600;\n            pointer-events: none;\n            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 12px rgba(251, 133, 0, 0.3);\n            z-index: 20;\n        }\n\n        \/* Tooltip Positions *\/\n        .radar-node[data-tooltip-pos=\"bottom\"] .node-tooltip {\n            top: calc(100% + 8px);\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        .radar-node[data-tooltip-pos=\"top\"] .node-tooltip {\n            bottom: calc(100% + 8px);\n            left: 50%;\n            transform: translateX(-50%);\n        }\n\n        .radar-node[data-tooltip-pos=\"left\"] .node-tooltip {\n            right: calc(100% + 10px);\n            top: 50%;\n            transform: translateY(-50%);\n        }\n\n        .radar-node[data-tooltip-pos=\"right\"] .node-tooltip {\n            left: calc(100% + 10px);\n            top: 50%;\n            transform: translateY(-50%);\n        }\n\n        \/* Service Detail Card *\/\n        .service-detail-card {\n            background: var(--bg-card);\n            border: 1px solid var(--border-glass);\n            backdrop-filter: blur(16px);\n            padding: 2.5rem;\n            border-radius: 24px;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n            transition: var(--transition-smooth);\n        }\n\n        .detail-badge {\n            display: inline-block;\n            background: rgba(251, 133, 0, 0.15);\n            color: var(--orange-bright);\n            padding: 0.3rem 0.9rem;\n            border-radius: 50px;\n            font-size: 0.75rem;\n            font-weight: 700;\n            letter-spacing: 1px;\n            margin-bottom: 1rem;\n        }\n\n        .detail-title {\n            font-family: var(--font-heading);\n            font-size: 1.8rem;\n            font-weight: 700;\n            margin-bottom: 1rem;\n        }\n\n        .detail-desc {\n            color: var(--text-muted);\n            font-size: 0.98rem;\n            margin-bottom: 1.5rem;\n            line-height: 1.6;\n        }\n\n        .detail-list {\n            list-style: none;\n            margin-bottom: 2rem;\n            display: flex;\n            flex-direction: column;\n            gap: 0.8rem;\n        }\n\n        .detail-list li {\n            display: flex;\n            align-items: center;\n            gap: 0.8rem;\n            font-size: 0.92rem;\n            color: var(--text-main);\n        }\n\n        .btn-secondary {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.6rem;\n            width: 100%;\n            background: rgba(255, 255, 255, 0.05);\n            border: 1px solid var(--border-glass);\n            color: var(--text-main);\n            text-decoration: none;\n            padding: 0.9rem 1.2rem;\n            border-radius: 12px;\n            font-family: var(--font-heading);\n            font-weight: 600;\n            transition: var(--transition-fast);\n        }\n\n        .btn-secondary:hover {\n            background: rgba(251, 133, 0, 0.15);\n            border-color: var(--orange-primary);\n            color: var(--orange-bright);\n        }\n\n        \/* ==========================================\n   DIFFERENTIALS GRID\n   ========================================== *\/\n        .differentials-section {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n            gap: 1.5rem;\n            padding: 3rem 0 5rem;\n        }\n\n        .diff-card {\n            background: var(--bg-glass);\n            border: 1px solid var(--border-glass);\n            padding: 2rem;\n            border-radius: 20px;\n            transition: var(--transition-fast);\n        }\n\n        .diff-card:hover {\n            background: var(--bg-card-hover);\n            border-color: var(--border-orange);\n            transform: translateY(-4px);\n        }\n\n        .diff-icon {\n            width: 48px;\n            height: 48px;\n            background: rgba(251, 133, 0, 0.15);\n            border-radius: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--orange-primary);\n            font-size: 1.3rem;\n            margin-bottom: 1.2rem;\n        }\n\n        .diff-card h3 {\n            font-family: var(--font-heading);\n            font-size: 1.2rem;\n            font-weight: 700;\n            margin-bottom: 0.6rem;\n        }\n\n        .diff-card p {\n            color: var(--text-muted);\n            font-size: 0.88rem;\n            line-height: 1.5;\n        }\n\n        \/* ==========================================\n   FOOTER\n   ========================================== *\/\n        .main-footer {\n            border-top: 1px solid var(--border-glass);\n            padding: 2.5rem 0;\n        }\n\n        .footer-content {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            flex-wrap: wrap;\n            gap: 1.5rem;\n        }\n\n        .footer-tagline {\n            color: var(--text-muted);\n            font-size: 0.9rem;\n        }\n\n        .footer-subtext {\n            color: var(--text-dim);\n            font-size: 0.8rem;\n            margin-top: 0.2rem;\n        }\n\n        .social-link {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 42px;\n            height: 42px;\n            background: rgba(255, 255, 255, 0.05);\n            border: 1px solid var(--border-glass);\n            border-radius: 50%;\n            color: var(--text-main);\n            text-decoration: none;\n            font-size: 1.2rem;\n            transition: var(--transition-fast);\n        }\n\n        .social-link:hover {\n            background: var(--orange-primary);\n            color: #FFF;\n            border-color: var(--orange-primary);\n            box-shadow: 0 0 15px var(--orange-primary);\n        }\n\n        \/* ==========================================\n   RESPONSIVE DESIGN\n   ========================================== *\/\n        @media (max-width: 900px) {\n            .radar-container {\n                grid-template-columns: 1fr;\n            }\n\n            .hero-title {\n                font-size: 2.4rem;\n            }\n\n            .countdown-grid {\n                gap: 0.5rem;\n            }\n\n            .count-box {\n                min-width: 55px;\n            }\n\n            .count-number {\n                font-size: 1.8rem;\n            }\n        }\n\n        @media (max-width: 600px) {\n            .main-header {\n                flex-direction: column;\n                gap: 1rem;\n                text-align: center;\n            }\n\n            .hero-title {\n                font-size: 1.9rem;\n            }\n\n            .lead-card {\n                padding: 1.5rem;\n            }\n\n            .countdown-wrapper {\n                padding: 1.2rem;\n            }\n\n            .count-dots {\n                font-size: 1.4rem;\n            }\n        }\n    <\/style>\n<\/head>\n\n<body>\n\n    <!-- Background Animated WiFi Particle Canvas -->\n    <canvas id=\"wifi-bg-canvas\"><\/canvas>\n\n    <!-- Glow Ambient Overlays -->\n    <div class=\"ambient-glow glow-top-left\"><\/div>\n    <div class=\"ambient-glow glow-bottom-right\"><\/div>\n    <div class=\"ambient-glow glow-center\"><\/div>\n\n    <div class=\"app-container\">\n        <!-- HEADER -->\n        <header class=\"main-header\">\n            <div class=\"header-logo\">\n                <svg class=\"wifi-logo-svg\" viewBox=\"0 0 240 70\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <defs>\n                        <linearGradient id=\"wifiOrangeGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                            <stop offset=\"0%\" stop-color=\"#FFB703\" \/>\n                            <stop offset=\"50%\" stop-color=\"#FB8500\" \/>\n                            <stop offset=\"100%\" stop-color=\"#D97706\" \/>\n                        <\/linearGradient>\n                        <filter id=\"glow\" x=\"-20%\" y=\"-20%\" width=\"140%\" height=\"140%\">\n                            <feGaussianBlur stdDeviation=\"3\" result=\"blur\" \/>\n                            <feComposite in=\"SourceGraphic\" in2=\"blur\" operator=\"over\" \/>\n                        <\/filter>\n                    <\/defs>\n                    <!-- Triangle Geometric W Logo -->\n                    <g filter=\"url(#glow)\">\n                        <polygon points=\"15,10 65,10 40,55\" fill=\"none\" stroke=\"url(#wifiOrangeGrad)\" stroke-width=\"7\"\n                            stroke-linejoin=\"round\" \/>\n                        <polyline points=\"27,10 40,36 53,10\" fill=\"none\" stroke=\"url(#wifiOrangeGrad)\" stroke-width=\"5\"\n                            stroke-linecap=\"round\" stroke-linejoin=\"round\" \/>\n                        <line x1=\"40\" y1=\"36\" x2=\"40\" y2=\"55\" stroke=\"url(#wifiOrangeGrad)\" stroke-width=\"4\" \/>\n                    <\/g>\n                    <!-- Text Wordmark -->\n                    <text x=\"80\" y=\"32\" font-family=\"'Outfit', sans-serif\" font-weight=\"300\" font-size=\"14\"\n                        fill=\"#94A3B8\" letter-spacing=\"4\">AG\u00caNCIA<\/text>\n                    <text x=\"80\" y=\"55\" font-family=\"'Outfit', sans-serif\" font-weight=\"700\" font-size=\"28\"\n                        fill=\"#FFFFFF\" letter-spacing=\"1\">wifi<tspan font-size=\"14\" font-weight=\"400\" fill=\"#FB8500\">\n                            360\u00b0<\/tspan><\/text>\n                <\/svg>\n            <\/div>\n\n            <div class=\"header-actions\">\n                <a href=\"https:\/\/wa.me\/5511982097533?text=Ol%C3%A1%21+Vim+pelo+site+da+Ag%C3%AAncia+Wifi.\"\n                    target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn-instagram-pill whatsapp-pill\"\n                    title=\"WhatsApp (11) 98209-7533\">\n                    <i class=\"fa-brands fa-whatsapp\"><\/i>\n                    <span>(11) 98209-7533<\/span>\n                <\/a>\n                <a href=\"https:\/\/linktr.ee\/agencia_wifi\" target=\"_blank\" rel=\"noopener noreferrer\"\n                    class=\"btn-instagram-pill linktree-pill\">\n                    <i class=\"fa-solid fa-tree\"><\/i>\n                    <span>Linktree<\/span>\n                <\/a>\n                <a href=\"https:\/\/www.instagram.com\/agencia_wifi\/\" target=\"_blank\" rel=\"noopener noreferrer\"\n                    class=\"btn-instagram-pill\">\n                    <i class=\"fa-brands fa-instagram\"><\/i>\n                    <span>@agencia_wifi<\/span>\n                <\/a>\n            <\/div>\n        <\/header>\n\n        <!-- MAIN HERO SECTION -->\n        <main class=\"hero-section\">\n            <div class=\"hero-badge\">\n                <i class=\"fa-solid fa-bullhorn signal-icon\"><\/i>\n                <span>Ag\u00eancia de Publicidade & Propaganda 360\u00b0<\/span>\n            <\/div>\n\n            <h1 class=\"hero-title\">\n                Conecte sua empresa ao <br>\n                <span class=\"text-gradient\">Futuro do Marketing Digital<\/span>\n            <\/h1>\n\n            <p class=\"hero-description\">\n                Sua ag\u00eancia de publicidade e propaganda completa. Preparamos solu\u00e7\u00f5es de alta performance em tr\u00e1fego\n                pago, rob\u00f4s humanizados de IA, est\u00fadio de grava\u00e7\u00e3o e posicionamento de autoridade sem mimimi.\n            <\/p>\n\n        <\/main>\n\n        <!-- INTERACTIVE RADAR & SERVICES SECTION -->\n        <section class=\"services-section\">\n            <div class=\"section-header\">\n                <span class=\"section-tag\">ECOSSISTEMA DE SOLU\u00c7\u00d5ES<\/span>\n                <h2 class=\"section-title\">Nossos Servi\u00e7os 360\u00b0 em A\u00e7\u00e3o<\/h2>\n                <p class=\"section-subtitle\">Clique nos pilares do radar para conhecer o alcance da Ag\u00eancia Wifi<\/p>\n            <\/div>\n\n            <div class=\"radar-container\">\n                <!-- RADAR VISUAL WIDGET -->\n                <div class=\"radar-display\">\n                    <div class=\"radar-sweep\"><\/div>\n                    <div class=\"radar-circle circle-1\"><\/div>\n                    <div class=\"radar-circle circle-2\"><\/div>\n                    <div class=\"radar-circle circle-3\"><\/div>\n                    <div class=\"radar-crosshair horizontal\"><\/div>\n                    <div class=\"radar-crosshair vertical\"><\/div>\n\n                    <div class=\"radar-center\">\n                        <i class=\"fa-solid fa-tower-cell\"><\/i>\n                        <span>WIFI 360\u00b0<\/span>\n                    <\/div>\n\n                    <!-- NODES -->\n                    <button class=\"radar-node active\" data-service=\"trafego\" data-tooltip-pos=\"bottom\"\n                        style=\"top: 15%; left: 50%;\">\n                        <i class=\"fa-solid fa-chart-line\"><\/i>\n                        <span class=\"node-tooltip\">Tr\u00e1fego Pago<\/span>\n                    <\/button>\n\n                    <button class=\"radar-node\" data-service=\"ia\" data-tooltip-pos=\"left\" style=\"top: 35%; left: 80%;\">\n                        <i class=\"fa-solid fa-robot\"><\/i>\n                        <span class=\"node-tooltip\">Rob\u00f4s Humanizados IA<\/span>\n                    <\/button>\n\n                    <button class=\"radar-node\" data-service=\"podcast\" data-tooltip-pos=\"top\"\n                        style=\"top: 70%; left: 75%;\">\n                        <i class=\"fa-solid fa-microphone-lines\"><\/i>\n                        <span class=\"node-tooltip\">Est\u00fadio & PodCast<\/span>\n                    <\/button>\n\n                    <button class=\"radar-node\" data-service=\"lancamentos\" data-tooltip-pos=\"top\"\n                        style=\"top: 75%; left: 25%;\">\n                        <i class=\"fa-solid fa-rocket\"><\/i>\n                        <span class=\"node-tooltip\">Lan\u00e7amentos<\/span>\n                    <\/button>\n\n                    <button class=\"radar-node\" data-service=\"sites\" data-tooltip-pos=\"right\"\n                        style=\"top: 40%; left: 18%;\">\n                        <i class=\"fa-solid fa-laptop-code\"><\/i>\n                        <span class=\"node-tooltip\">Sites & LandPages<\/span>\n                    <\/button>\n\n                    <button class=\"radar-node\" data-service=\"social\" data-tooltip-pos=\"bottom\"\n                        style=\"top: 18%; left: 25%;\">\n                        <i class=\"fa-solid fa-hashtag\"><\/i>\n                        <span class=\"node-tooltip\">Redes Sociais<\/span>\n                    <\/button>\n                <\/div>\n\n                <!-- DYNAMIC SERVICE DETAIL PANEL -->\n                <div class=\"service-detail-card\" id=\"service-detail\">\n                    <div class=\"detail-badge\" id=\"detail-tag\">PERFORMANCE & ESCALA<\/div>\n                    <h3 class=\"detail-title\" id=\"detail-title\">Campanhas de Tr\u00e1fego Pago<\/h3>\n                    <p class=\"detail-desc\" id=\"detail-desc\">\n                        Aumente suas vendas e capta\u00e7\u00e3o de leads qualificados com an\u00fancios direcionados nas redes sociais\n                        e buscadores (Meta Ads, Google Ads). Estrat\u00e9gia de funil cont\u00ednuo para retorno sobre\n                        investimento.\n                    <\/p>\n                    <ul class=\"detail-list\" id=\"detail-list\">\n                        <li><i class=\"fa-solid fa-check text-orange\"><\/i> Campanhas de Alta Convers\u00e3o no Instagram &\n                            Facebook<\/li>\n                        <li><i class=\"fa-solid fa-check text-orange\"><\/i> Pesquisa & Display no Google Ads<\/li>\n                        <li><i class=\"fa-solid fa-check text-orange\"><\/i> Otimiza\u00e7\u00e3o di\u00e1ria baseada em dados reais<\/li>\n                    <\/ul>\n                    <a href=\"https:\/\/wa.me\/5511982097533?text=Ol%C3%A1%21+Gostaria+de+falar+com+a+Ag%C3%AAncia+Wifi+sobre+Campanhas+de+Tr%C3%A1fego+Pago.\"\n                        target=\"_blank\" rel=\"noopener noreferrer\" class=\"btn-secondary\" id=\"detail-cta-btn\">\n                        <i class=\"fa-brands fa-whatsapp text-whatsapp\"><\/i>\n                        <span id=\"detail-cta-text\">Falar sobre este servi\u00e7o no WhatsApp<\/span>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- WHY AGENCIA WIFI GRID -->\n        <section class=\"differentials-section\">\n            <div class=\"diff-card\">\n                <div class=\"diff-icon\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\n                <h3>Sem Fronteiras<\/h3>\n                <p>Comunica\u00e7\u00e3o sem limita\u00e7\u00f5es de espa\u00e7o e tempo. Conectamos sua marca onde o seu cliente est\u00e1.<\/p>\n            <\/div>\n            <div class=\"diff-card\">\n                <div class=\"diff-icon\"><i class=\"fa-solid fa-handshake-simple\"><\/i><\/div>\n                <h3>Cocria\u00e7\u00e3o & Parceria<\/h3>\n                <p>Trabalhamos lado a lado com seu neg\u00f3cio, criando estrat\u00e9gias customizadas para crescer juntos.<\/p>\n            <\/div>\n            <div class=\"diff-card\">\n                <div class=\"diff-icon\"><i class=\"fa-solid fa-microchip\"><\/i><\/div>\n                <h3>Tecnologia & IA<\/h3>\n                <p>Integra\u00e7\u00e3o de automa\u00e7\u00f5es inteligentes e rob\u00f4s de atendimento humanizados que vendem 24\/7.<\/p>\n            <\/div>\n            <div class=\"diff-card\">\n                <div class=\"diff-icon\"><i class=\"fa-solid fa-bullseye\"><\/i><\/div>\n                <h3>Estrat\u00e9gia 360\u00b0<\/h3>\n                <p>Solu\u00e7\u00f5es completas: do est\u00fadio de gravac\u00e3o ao tr\u00e1fego de vendas e estrutura\u00e7\u00e3o de marca.<\/p>\n            <\/div>\n        <\/section>\n\n        <!-- FOOTER -->\n        <footer class=\"main-footer\">\n            <div class=\"footer-content\">\n                <div class=\"footer-brand\">\n                    <p class=\"footer-tagline\">Ag\u00eancia Wifi 360\u00b0 &copy; <span id=\"current-year\">2026<\/span>. Todos os\n                        direitos reservados.<\/p>\n                    <p class=\"footer-subtext\">WhatsApp: (11) 98209-7533 | Sem mesmice, sem mimimi. Somos Wifi.<\/p>\n                <\/div>\n                <div class=\"footer-socials\">\n                    <a href=\"https:\/\/wa.me\/5511982097533?text=Ol%C3%A1%21+Vim+pelo+site+da+Ag%C3%AAncia+Wifi.\"\n                        target=\"_blank\" class=\"social-link social-wa\" title=\"WhatsApp (11) 98209-7533\">\n                        <i class=\"fa-brands fa-whatsapp\"><\/i>\n                    <\/a>\n                    <a href=\"https:\/\/linktr.ee\/agencia_wifi\" target=\"_blank\" class=\"social-link\"\n                        title=\"Linktree Ag\u00eancia Wifi\">\n                        <i class=\"fa-solid fa-tree\"><\/i>\n                    <\/a>\n                    <a href=\"https:\/\/www.instagram.com\/agencia_wifi\/\" target=\"_blank\" class=\"social-link\"\n                        title=\"Instagram @agencia_wifi\">\n                        <i class=\"fa-brands fa-instagram\"><\/i>\n                    <\/a>\n                <\/div>\n            <\/div>\n        <\/footer>\n    <\/div>\n\n    <!-- JS Script -->\n    <script>\n        \/* ==========================================\n   AG\u00caNCIA WIFI 360\u00b0 - JAVASCRIPT CORE\n   ========================================== *\/\n\n        document.addEventListener('DOMContentLoaded', () => {\n            initCanvasAnimation();\n            initCountdownTimer();\n            initRadarServices();\n            initLeadForm();\n            setCurrentYear();\n        });\n\n        \/* ------------------------------------------\n           1. CANVAS WIFI PARTICLE NETWORK\n        ------------------------------------------ *\/\n        function initCanvasAnimation() {\n            const canvas = document.getElementById('wifi-bg-canvas');\n            if (!canvas) return;\n            const ctx = canvas.getContext('2d');\n\n            let width = canvas.width = window.innerWidth;\n            let height = canvas.height = window.innerHeight;\n\n            window.addEventListener('resize', () => {\n                width = canvas.width = window.innerWidth;\n                height = canvas.height = window.innerHeight;\n            });\n\n            const particles = [];\n            const particleCount = Math.min(Math.floor(width \/ 18), 75);\n\n            class Particle {\n                constructor() {\n                    this.x = Math.random() * width;\n                    this.y = Math.random() * height;\n                    this.vx = (Math.random() - 0.5) * 0.6;\n                    this.vy = (Math.random() - 0.5) * 0.6;\n                    this.radius = Math.random() * 2 + 1;\n                    this.alpha = Math.random() * 0.5 + 0.2;\n                }\n\n                update() {\n                    this.x += this.vx;\n                    this.y += this.vy;\n\n                    if (this.x < 0 || this.x > width) this.vx *= -1;\n                    if (this.y < 0 || this.y > height) this.vy *= -1;\n                }\n\n                draw() {\n                    ctx.beginPath();\n                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);\n                    ctx.fillStyle = `rgba(251, 133, 0, ${this.alpha})`;\n                    ctx.shadowBlur = 8;\n                    ctx.shadowColor = '#FB8500';\n                    ctx.fill();\n                    ctx.shadowBlur = 0;\n                }\n            }\n\n            for (let i = 0; i < particleCount; i++) {\n                particles.push(new Particle());\n            }\n\n            let mouse = { x: null, y: null, maxDist: 140 };\n\n            window.addEventListener('mousemove', (e) => {\n                mouse.x = e.clientX;\n                mouse.y = e.clientY;\n            });\n\n            window.addEventListener('mouseleave', () => {\n                mouse.x = null;\n                mouse.y = null;\n            });\n\n            function animate() {\n                ctx.clearRect(0, 0, width, height);\n\n                \/\/ Draw connections\n                for (let i = 0; i < particles.length; i++) {\n                    particles[i].update();\n                    particles[i].draw();\n\n                    for (let j = i + 1; j < particles.length; j++) {\n                        const dx = particles[i].x - particles[j].x;\n                        const dy = particles[i].y - particles[j].y;\n                        const dist = Math.sqrt(dx * dx + dy * dy);\n\n                        if (dist < 120) {\n                            const opacity = (1 - dist \/ 120) * 0.25;\n                            ctx.beginPath();\n                            ctx.moveTo(particles[i].x, particles[i].y);\n                            ctx.lineTo(particles[j].x, particles[j].y);\n                            ctx.strokeStyle = `rgba(251, 133, 0, ${opacity})`;\n                            ctx.lineWidth = 0.8;\n                            ctx.stroke();\n                        }\n                    }\n\n                    \/\/ Mouse connection\n                    if (mouse.x && mouse.y) {\n                        const dx = particles[i].x - mouse.x;\n                        const dy = particles[i].y - mouse.y;\n                        const dist = Math.sqrt(dx * dx + dy * dy);\n\n                        if (dist < mouse.maxDist) {\n                            const opacity = (1 - dist \/ mouse.maxDist) * 0.4;\n                            ctx.beginPath();\n                            ctx.moveTo(particles[i].x, particles[i].y);\n                            ctx.lineTo(mouse.x, mouse.y);\n                            ctx.strokeStyle = `rgba(255, 183, 3, ${opacity})`;\n                            ctx.lineWidth = 1;\n                            ctx.stroke();\n                        }\n                    }\n                }\n\n                requestAnimationFrame(animate);\n            }\n\n            animate();\n        }\n\n        \/* ------------------------------------------\n           2. COUNTDOWN TIMER\n        ------------------------------------------ *\/\n        function initCountdownTimer() {\n            \/\/ Target date set to 21 days from now\n            const targetDate = new Date();\n            targetDate.setDate(targetDate.getDate() + 21);\n\n            const daysEl = document.getElementById('days');\n            const hoursEl = document.getElementById('hours');\n            const minutesEl = document.getElementById('minutes');\n            const secondsEl = document.getElementById('seconds');\n\n            if (!daysEl || !hoursEl || !minutesEl || !secondsEl) return;\n\n            function updateTimer() {\n                const now = new Date().getTime();\n                const diff = targetDate.getTime() - now;\n\n                if (diff <= 0) {\n                    daysEl.textContent = '00';\n                    hoursEl.textContent = '00';\n                    minutesEl.textContent = '00';\n                    secondsEl.textContent = '00';\n                    return;\n                }\n\n                const days = Math.floor(diff \/ (1000 * 60 * 60 * 24));\n                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\n                const minutes = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\n                const seconds = Math.floor((diff % (1000 * 60)) \/ 1000);\n\n                daysEl.textContent = days < 10 ? '0' + days : days;\n                hoursEl.textContent = hours < 10 ? '0' + hours : hours;\n                minutesEl.textContent = minutes < 10 ? '0' + minutes : minutes;\n                secondsEl.textContent = seconds < 10 ? '0' + seconds : seconds;\n            }\n\n            updateTimer();\n            setInterval(updateTimer, 1000);\n        }\n\n        \/* ------------------------------------------\n           3. INTERACTIVE RADAR & SERVICES DATA\n        ------------------------------------------ *\/\n        const servicesData = {\n            trafego: {\n                tag: \"PERFORMANCE & ESCALA\",\n                title: \"Campanhas de Tr\u00e1fego Pago\",\n                desc: \"Aumente suas vendas e capta\u00e7\u00e3o de leads qualificados com an\u00fancios direcionados nas redes sociais e buscadores (Meta Ads, Google Ads). Estrat\u00e9gia de funil cont\u00ednuo para m\u00e1ximo retorno sobre investimento.\",\n                items: [\n                    \"Campanhas de Alta Convers\u00e3o no Instagram & Facebook\",\n                    \"Pesquisa, Rede de Display & Youtube Ads no Google\",\n                    \"Otimiza\u00e7\u00e3o di\u00e1ria baseada em m\u00e9tricas de ROI real\"\n                ]\n            },\n            ia: {\n                tag: \"AUTOMA\u00c7\u00c3O & IA\",\n                title: \"Rob\u00f4s Humanizados de Atendimento\",\n                desc: \"Assistentes virtuais inteligentes com intelig\u00eancia artificial para atendimento, qualifica\u00e7\u00e3o de leads e vendas 24\/7 diretamente no seu WhatsApp e Instagram.\",\n                items: [\n                    \"Respostas instant\u00e2neas com tom humanizado e emp\u00e1tico\",\n                    \"Agendamento autom\u00e1tico de reuni\u00f5es e consultas\",\n                    \"Integra\u00e7\u00e3o direta com seu CRM de vendas\"\n                ]\n            },\n            podcast: {\n                tag: \"PRODU\u00c7\u00c3O AUDIOVISUAL 360\u00b0\",\n                title: \"Est\u00fadio & PodCast Profissional\",\n                desc: \"Grava\u00e7\u00e3o e produ\u00e7\u00e3o de PodCasts e videocasts em est\u00fadio profissional equipado com c\u00e2meras 4K, ilumina\u00e7\u00e3o c\u00eanica e cortes estrat\u00e9gicos para impulsionar suas redes.\",\n                items: [\n                    \"Est\u00fadio completo para grava\u00e7\u00f5es de podcast e entrevistas\",\n                    \"Edi\u00e7\u00e3o profissional e vinhetas personalizadas\",\n                    \"Cria\u00e7\u00e3o de cortes de alto engajamento (Reels \/ TikTok \/ Shorts)\"\n                ]\n            },\n            lancamentos: {\n                tag: \"INFOPRODUTOS & ESCALA\",\n                title: \"Lan\u00e7amento de InfoProdutos\",\n                desc: \"Estrutura\u00e7\u00e3o completa de lan\u00e7amentos para especialistas, cursos digitais e mentorias. Do planejamento do funil de vendas ao tr\u00e1fego de alta escala.\",\n                items: [\n                    \"Cria\u00e7\u00e3o da jornada do comprador e e-mail marketing\",\n                    \"Copys persuasivas para p\u00e1ginas de vendas e an\u00fancios\",\n                    \"Gest\u00e3o de tr\u00e1fego de pico para sementes e lan\u00e7amentos perp\u00e9tuos\"\n                ]\n            },\n            sites: {\n                tag: \"WEB & BRANDING\",\n                title: \"Cria\u00e7\u00e3o de Sites e LandPages\",\n                desc: \"Desenvolvimento de p\u00e1ginas de alta convers\u00e3o, portais corporativos e plataformas interativas com design moderno, carregamento ultrarr\u00e1pido e otimiza\u00e7\u00e3o para SEO.\",\n                items: [\n                    \"Design responsivo otimizado para dispositivos m\u00f3veis\",\n                    \"Landing Pages focadas na m\u00e1xima taxa de convers\u00e3o\",\n                    \"Cria\u00e7\u00e3o e reestrutura\u00e7\u00e3o de BrandBooks e identidades de marca\"\n                ]\n            },\n            social: {\n                tag: \"REDES SOCIAIS & CONTE\u00daDO\",\n                title: \"Gest\u00e3o Estrat\u00e9gica de Redes Sociais\",\n                desc: \"Posicionamento de marca com autoridade atrav\u00e9s de planos de conte\u00fado t\u00e9cnico, conex\u00e3o, v\u00eddeos e storytelling que engajam e convertem seguidores em clientes.\",\n                items: [\n                    \"Planejamento editorial estrat\u00e9gico focado em autoridade\",\n                    \"Design gr\u00e1fico profissional e edi\u00e7\u00e3o de v\u00eddeos verticais\",\n                    \"Acompanhamento de m\u00e9tricas de crescimento e engajamento\"\n                ]\n            }\n        };\n\n        function initRadarServices() {\n            const nodes = document.querySelectorAll('.radar-node');\n            const detailTag = document.getElementById('detail-tag');\n            const detailTitle = document.getElementById('detail-title');\n            const detailDesc = document.getElementById('detail-desc');\n            const detailList = document.getElementById('detail-list');\n            const detailCard = document.getElementById('service-detail');\n\n            if (!nodes.length || !detailCard) return;\n\n            let currentIndex = 0;\n            const nodeKeys = Object.keys(servicesData);\n            let autoRotate = true;\n\n            const detailCtaBtn = document.getElementById('detail-cta-btn');\n\n            function renderService(key) {\n                const data = servicesData[key];\n                if (!data) return;\n\n                detailCard.style.opacity = '0';\n                detailCard.style.transform = 'translateY(10px)';\n\n                setTimeout(() => {\n                    detailTag.textContent = data.tag;\n                    detailTitle.textContent = data.title;\n                    detailDesc.textContent = data.desc;\n\n                    detailList.innerHTML = data.items.map(item =>\n                        `<li><i class=\"fa-solid fa-check text-orange\"><\/i> ${item}<\/li>`\n                    ).join('');\n\n                    if (detailCtaBtn) {\n                        detailCtaBtn.href = `https:\/\/wa.me\/5511982097533?text=${encodeURIComponent('Ol\u00e1! Gostaria de falar com a Ag\u00eancia Wifi sobre ' + data.title + '.')}`;\n                    }\n\n                    detailCard.style.opacity = '1';\n                    detailCard.style.transform = 'translateY(0)';\n                }, 150);\n            }\n\n            nodes.forEach(node => {\n                node.addEventListener('click', () => {\n                    autoRotate = false;\n                    const serviceKey = node.getAttribute('data-service');\n\n                    nodes.forEach(n => n.classList.remove('active'));\n                    node.classList.add('active');\n\n                    renderService(serviceKey);\n                });\n            });\n\n            \/\/ Optional Auto Rotation every 6s\n            setInterval(() => {\n                if (!autoRotate) return;\n                currentIndex = (currentIndex + 1) % nodeKeys.length;\n                const nextKey = nodeKeys[currentIndex];\n\n                nodes.forEach(n => {\n                    if (n.getAttribute('data-service') === nextKey) {\n                        n.classList.add('active');\n                    } else {\n                        n.classList.remove('active');\n                    }\n                });\n\n                renderService(nextKey);\n            }, 6000);\n        }\n\n        \/* ------------------------------------------\n           4. LEAD FORM SUBMISSION\n        ------------------------------------------ *\/\n        function initLeadForm() {\n            const form = document.getElementById('notify-form');\n            const feedback = document.getElementById('form-feedback');\n\n            if (!form || !feedback) return;\n\n            form.addEventListener('submit', (e) => {\n                e.preventDefault();\n\n                const email = document.getElementById('user-email').value;\n                const phone = document.getElementById('user-phone').value;\n\n                if (!email || !phone) return;\n\n                \/\/ Save lead locally (privacy compliant)\n                const leads = JSON.parse(localStorage.getItem('agencia_wifi_leads') || '[]');\n                leads.push({ email, phone, timestamp: new Date().toISOString() });\n                localStorage.setItem('agencia_wifi_leads', JSON.stringify(leads));\n\n                form.reset();\n                feedback.classList.remove('hidden');\n\n                setTimeout(() => {\n                    feedback.classList.add('hidden');\n                }, 6000);\n            });\n        }\n\n        function setCurrentYear() {\n            const yearEl = document.getElementById('current-year');\n            if (yearEl) {\n                yearEl.textContent = new Date().getFullYear();\n            }\n        }\n    <\/script>\n<\/body>\n\n<\/html>\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>Ag\u00eancia Wifi 360\u00b0 | Em Breve &#8211; Conecte sua Marca ao Futuro AG\u00caNCIA wifi 360\u00b0 (11) 98209-7533 Linktree @agencia_wifi Ag\u00eancia de Publicidade &#038; Propaganda 360\u00b0 Conecte sua empresa ao Futuro do Marketing Digital Sua ag\u00eancia de publicidade e propaganda completa. Preparamos solu\u00e7\u00f5es de alta performance em tr\u00e1fego pago, rob\u00f4s humanizados de IA, est\u00fadio de grava\u00e7\u00e3o [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":7,"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/agenciawifi.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}