{"id":2984,"date":"2026-04-30T10:34:55","date_gmt":"2026-04-30T13:34:55","guid":{"rendered":"https:\/\/www.nortebox.com.br\/site\/?page_id=2984"},"modified":"2026-04-30T11:31:33","modified_gmt":"2026-04-30T14:31:33","slug":"simule-seu-plano","status":"publish","type":"page","link":"https:\/\/www.nortebox.com.br\/site\/simule-seu-plano\/","title":{"rendered":"Simule seu Plano"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n\n\nNortebox \u2014 Simule seu plano<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Saira:wght@500;600;700&family=Barlow:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --petroleo: #001f26;\n --petroleo-2: #02303a;\n --teal: #00a1b0;\n --teal-dark: #055f67;\n --teal-deep: #0a4148;\n --teal-soft: #a3c9cc;\n --teal-pale: #d4e5e7;\n --text-primary: #e8f2f3;\n --text-secondary: #a3c9cc;\n --text-tertiary: #6b8b8f;\n --warning-bg: rgba(239, 159, 39, 0.12);\n --warning-text: #efb66b;\n --warning-border: rgba(239, 159, 39, 0.3);\n --success-bg: rgba(0, 161, 176, 0.12);\n --success-text: #5ddbe8;\n --success-border: rgba(0, 161, 176, 0.35);\n --info-bg: rgba(163, 201, 204, 0.08);\n --info-text: #a3c9cc;\n --info-border: rgba(163, 201, 204, 0.2);\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Barlow', sans-serif;\n background: var(--petroleo);\n color: var(--text-primary);\n min-height: 100vh;\n line-height: 1.5;\n position: relative;\n overflow-x: hidden;\n }\n\n .bg-gradient {\n position: fixed;\n inset: 0;\n background:\n radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 161, 176, 0.08), transparent 60%),\n radial-gradient(ellipse 60% 50% at 90% 50%, rgba(5, 95, 103, 0.15), transparent 60%),\n linear-gradient(180deg, #001f26 0%, #00282f 50%, #001f26 100%);\n z-index: -2;\n }\n\n .bg-grafismo {\n position: fixed;\n inset: 0;\n z-index: -1;\n opacity: 0.35;\n pointer-events: none;\n }\n\n .container {\n max-width: 1280px;\n margin: 0 auto;\n padding: 32px 24px 60px;\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n padding-bottom: 24px;\n border-bottom: 1px solid rgba(163, 201, 204, 0.15);\n margin-bottom: 32px;\n }\n\n .logo-wrap {\n display: flex;\n align-items: center;\n gap: 14px;\n }\n\n .logo-wrap svg { display: block; }\n\n .logo-text {\n font-family: 'Saira', sans-serif;\n font-weight: 500;\n font-size: 30px;\n letter-spacing: 0.08em;\n color: var(--teal-soft);\n }\n\n .header-slogan {\n font-family: 'Barlow', sans-serif;\n font-size: 13px;\n color: var(--text-tertiary);\n text-align: right;\n line-height: 1.4;\n max-width: 280px;\n }\n\n .header-slogan em {\n font-style: italic;\n color: var(--teal-soft);\n }\n\n h1 {\n font-family: 'Saira', sans-serif;\n font-weight: 600;\n font-size: 34px;\n letter-spacing: 0.02em;\n color: var(--text-primary);\n margin-bottom: 8px;\n line-height: 1.15;\n }\n\n .subtitle {\n font-size: 15px;\n color: var(--text-secondary);\n margin-bottom: 32px;\n max-width: 680px;\n }\n\n .step-label {\n font-family: 'Saira', sans-serif;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .step-label::before {\n content: '';\n width: 20px;\n height: 1px;\n background: var(--teal);\n }\n\n .segment-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 32px;\n }\n\n .segment-card {\n background: rgba(2, 48, 58, 0.5);\n border: 1.5px solid rgba(163, 201, 204, 0.15);\n border-radius: 16px;\n padding: 22px 24px;\n cursor: pointer;\n transition: all 0.25s;\n position: relative;\n overflow: hidden;\n }\n\n .segment-card:hover {\n border-color: rgba(0, 161, 176, 0.5);\n transform: translateY(-2px);\n }\n\n .segment-card.active {\n background: linear-gradient(135deg, rgba(0, 161, 176, 0.2), rgba(5, 95, 103, 0.35));\n border-color: var(--teal);\n box-shadow: 0 0 28px rgba(0, 161, 176, 0.2);\n }\n\n .segment-card.active::before {\n content: '\u2713';\n position: absolute;\n top: 14px;\n right: 16px;\n width: 26px;\n height: 26px;\n background: var(--teal);\n color: var(--petroleo);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Saira', sans-serif;\n font-weight: 700;\n font-size: 14px;\n }\n\n .segment-title {\n font-family: 'Saira', sans-serif;\n font-weight: 600;\n font-size: 18px;\n color: var(--text-primary);\n margin-bottom: 4px;\n letter-spacing: 0.01em;\n }\n\n .segment-desc {\n font-size: 13px;\n color: var(--text-tertiary);\n margin-bottom: 16px;\n line-height: 1.45;\n }\n\n .segment-values {\n display: flex;\n gap: 20px;\n padding-top: 14px;\n border-top: 1px solid rgba(163, 201, 204, 0.12);\n }\n\n .segment-value-item {\n flex: 1;\n }\n\n .segment-value-label {\n font-family: 'Saira', sans-serif;\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--text-tertiary);\n margin-bottom: 4px;\n }\n\n .segment-value-num {\n font-family: 'Saira', sans-serif;\n font-size: 20px;\n font-weight: 600;\n color: var(--teal-soft);\n letter-spacing: 0.01em;\n }\n\n .segment-card.active .segment-value-num {\n color: var(--text-primary);\n }\n\n .card {\n background: rgba(2, 48, 58, 0.6);\n border: 1px solid rgba(163, 201, 204, 0.15);\n border-radius: 14px;\n padding: 22px 26px;\n margin-bottom: 28px;\n backdrop-filter: blur(8px);\n }\n\n .card-label {\n font-family: 'Saira', sans-serif;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 20px;\n }\n\n .param-row {\n display: flex;\n align-items: center;\n gap: 14px;\n margin-bottom: 14px;\n }\n .param-row:last-child { margin-bottom: 0; }\n\n .param-row label {\n font-size: 14px;\n color: var(--text-secondary);\n flex: 0 0 220px;\n }\n\n .stepper {\n display: flex;\n align-items: center;\n gap: 0;\n background: rgba(2, 48, 58, 0.7);\n border: 1px solid rgba(163, 201, 204, 0.2);\n border-radius: 10px;\n overflow: hidden;\n flex: 1;\n max-width: 220px;\n margin-left: auto;\n }\n\n .stepper-btn {\n width: 44px;\n height: 44px;\n background: rgba(0, 161, 176, 0.12);\n border: none;\n color: var(--teal-soft);\n font-size: 22px;\n font-weight: 400;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s, color 0.15s;\n flex-shrink: 0;\n line-height: 1;\n padding-bottom: 2px;\n user-select: none;\n }\n\n .stepper-btn:hover {\n background: rgba(0, 161, 176, 0.28);\n color: #fff;\n }\n\n .stepper-btn:active {\n background: rgba(0, 161, 176, 0.45);\n }\n\n .stepper-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n background: transparent;\n }\n\n .stepper-val {\n flex: 1;\n font-family: 'Saira', sans-serif;\n font-weight: 600;\n font-size: 22px;\n color: var(--teal-soft);\n text-align: center;\n background: transparent;\n border: none;\n outline: none;\n min-width: 0;\n pointer-events: none;\n }\n\n .columns-wrap {\n position: relative;\n margin-bottom: 20px;\n }\n\n .columns {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 16px;\n }\n\n .col {\n text-align: center;\n }\n\n .col-title {\n font-family: 'Saira', sans-serif;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--text-tertiary);\n margin-bottom: 6px;\n }\n\n .col-count {\n font-family: 'Saira', sans-serif;\n font-size: 34px;\n font-weight: 600;\n color: var(--teal-soft);\n line-height: 1;\n margin-bottom: 14px;\n transition: color 0.3s;\n }\n\n .col-count.auto {\n color: var(--text-tertiary);\n font-size: 28px;\n }\n\n .col-count-sub {\n font-family: 'Barlow', sans-serif;\n font-size: 10px;\n font-weight: 400;\n color: var(--text-tertiary);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n margin-top: -8px;\n margin-bottom: 10px;\n opacity: 0.7;\n }\n\n .col-box {\n background: rgba(2, 48, 58, 0.5);\n border: 1px solid rgba(163, 201, 204, 0.12);\n border-radius: 14px;\n padding: 20px 14px;\n min-height: 280px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 7px;\n }\n\n .modem, .equip {\n border-radius: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Saira', sans-serif;\n font-weight: 500;\n flex-shrink: 0;\n transition: transform 0.2s;\n }\n\n .modem {\n width: 52px;\n height: 30px;\n font-size: 10px;\n letter-spacing: 0.08em;\n }\n\n .modem-stock {\n background: rgba(107, 139, 143, 0.2);\n color: var(--text-tertiary);\n border: 1px dashed rgba(107, 139, 143, 0.4);\n }\n\n .modem-active {\n background: linear-gradient(135deg, #055f67, #00a1b0);\n color: #ffffff;\n border: 1px solid var(--teal);\n box-shadow: 0 0 12px rgba(0, 161, 176, 0.25);\n }\n\n .equip {\n width: 58px;\n height: 36px;\n font-size: 11px;\n background: rgba(163, 201, 204, 0.15);\n color: var(--teal-soft);\n border: 1px solid rgba(163, 201, 204, 0.35);\n letter-spacing: 0.05em;\n }\n\n .empty-state {\n font-size: 12px;\n color: var(--text-tertiary);\n font-style: italic;\n margin: auto 0;\n }\n\n #links-svg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n }\n\n .legend {\n display: flex;\n gap: 24px;\n justify-content: center;\n margin-bottom: 20px;\n flex-wrap: wrap;\n font-size: 12px;\n color: var(--text-secondary);\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .legend-dot {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .legend-line {\n width: 22px;\n height: 0;\n border-top: 2px solid;\n flex-shrink: 0;\n }\n\n .aviso {\n border-radius: 12px;\n padding: 14px 20px;\n margin-bottom: 28px;\n border: 1px solid;\n display: flex;\n align-items: center;\n gap: 14px;\n transition: background 0.3s, border-color 0.3s;\n }\n\n .aviso-icon {\n width: 28px;\n height: 28px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n font-family: 'Saira', sans-serif;\n font-weight: 600;\n font-size: 14px;\n }\n\n .aviso-text {\n font-size: 13px;\n line-height: 1.45;\n }\n\n .aviso.info { background: var(--info-bg); border-color: var(--info-border); }\n .aviso.info .aviso-text { color: var(--info-text); }\n .aviso.info .aviso-icon { background: var(--info-border); color: var(--info-text); }\n\n .aviso.warning { background: var(--warning-bg); border-color: var(--warning-border); }\n .aviso.warning .aviso-text { color: var(--warning-text); }\n .aviso.warning .aviso-icon { background: var(--warning-border); color: var(--warning-text); }\n\n .aviso.success {\n background: var(--success-bg);\n border-color: var(--success-border);\n box-shadow: 0 0 24px rgba(0, 161, 176, 0.15);\n }\n .aviso.success .aviso-text { color: var(--success-text); }\n .aviso.success .aviso-icon { background: var(--success-border); color: var(--success-text); }\n\n .aviso-title {\n font-family: 'Saira', sans-serif;\n font-weight: 600;\n font-size: 13px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n margin-bottom: 2px;\n display: block;\n }\n\n .stats-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n margin-bottom: 16px;\n }\n\n .stat-card {\n background: linear-gradient(135deg, rgba(5, 95, 103, 0.3), rgba(2, 48, 58, 0.6));\n border: 1px solid rgba(163, 201, 204, 0.15);\n border-radius: 14px;\n padding: 22px 24px;\n position: relative;\n overflow: hidden;\n transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;\n }\n\n .stat-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 3px;\n height: 100%;\n background: var(--teal);\n transition: background 0.3s, box-shadow 0.3s;\n }\n\n .stat-card.highlight {\n background: linear-gradient(135deg, rgba(0, 161, 176, 0.25), rgba(5, 95, 103, 0.4));\n border-color: var(--teal);\n box-shadow: 0 0 20px rgba(0, 161, 176, 0.2);\n }\n\n .stat-card.highlight::before {\n background: #5ddbe8;\n box-shadow: 0 0 10px #5ddbe8;\n }\n\n .stat-label {\n font-family: 'Saira', sans-serif;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--text-secondary);\n margin-bottom: 10px;\n }\n\n .stat-value {\n font-family: 'Saira', sans-serif;\n font-size: 32px;\n font-weight: 600;\n color: var(--text-primary);\n line-height: 1.1;\n margin-bottom: 6px;\n }\n\n .stat-detail {\n font-size: 12px;\n color: var(--text-tertiary);\n }\n\n .cta-wrap {\n margin-top: 32px;\n padding: 24px;\n background: rgba(2, 48, 58, 0.4);\n border-radius: 14px;\n border: 1px solid rgba(163, 201, 204, 0.1);\n text-align: center;\n }\n\n .cta-text {\n font-size: 14px;\n color: var(--text-secondary);\n margin-bottom: 14px;\n }\n\n .cta-text strong {\n color: var(--teal-soft);\n font-weight: 500;\n }\n\n .cta-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, var(--teal), var(--teal-dark));\n color: #fff !important;\n font-family: 'Saira', sans-serif;\n font-weight: 600;\n font-size: 14px;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n padding: 12px 28px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n text-decoration: none;\n transition: transform 0.15s, box-shadow 0.15s;\n }\n\n .cta-btn:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 20px rgba(0, 161, 176, 0.3);\n }\n\n .footer {\n margin-top: 40px;\n padding-top: 20px;\n border-top: 1px solid rgba(163, 201, 204, 0.1);\n text-align: center;\n font-size: 11px;\n color: var(--text-tertiary);\n letter-spacing: 0.05em;\n }\n\n @media (max-width: 840px) {\n .segment-grid, .stats-grid { grid-template-columns: 1fr; }\n .columns { gap: 10px; }\n .col-count { font-size: 28px; }\n .modem { width: 44px; height: 26px; font-size: 9px; }\n .equip { width: 50px; height: 32px; font-size: 10px; }\n .header { flex-direction: column; align-items: flex-start; gap: 12px; }\n .header-slogan { text-align: left; }\n h1 { font-size: 26px; }\n .param-row label { flex: 0 0 150px; font-size: 13px; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"bg-gradient\"><\/div>\n\n<svg class=\"bg-grafismo\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" preserveAspectRatio=\"none\" viewBox=\"0 0 1920 1080\">\n <g stroke=\"#a3c9cc\" stroke-width=\"0.5\" fill=\"none\" opacity=\"0.4\">\n <line x1=\"100\" y1=\"80\" x2=\"100\" y2=\"400\"\/>\n <circle cx=\"100\" cy=\"80\" r=\"3\" fill=\"#a3c9cc\"\/>\n <line x1=\"100\" y1=\"400\" x2=\"480\" y2=\"400\"\/>\n <circle cx=\"480\" cy=\"400\" r=\"3\" fill=\"#a3c9cc\"\/>\n <line x1=\"-50\" y1=\"100\" x2=\"600\" y2=\"750\"\/>\n <line x1=\"1400\" y1=\"150\" x2=\"1900\" y2=\"650\"\/>\n <circle cx=\"1400\" cy=\"150\" r=\"3\" fill=\"#a3c9cc\"\/>\n <line x1=\"1700\" y1=\"300\" x2=\"1920\" y2=\"300\"\/>\n <circle cx=\"1700\" cy=\"300\" r=\"3\" fill=\"#a3c9cc\"\/>\n <line x1=\"1800\" y1=\"800\" x2=\"1920\" y2=\"800\"\/>\n <line x1=\"1800\" y1=\"800\" x2=\"1800\" y2=\"1080\"\/>\n <circle cx=\"1800\" cy=\"800\" r=\"3\" fill=\"#a3c9cc\"\/>\n <rect x=\"1450\" y=\"700\" width=\"320\" height=\"180\" rx=\"50\" opacity=\"0.5\"\/>\n <\/g>\n<\/svg>\n\n<div class=\"container\">\n\n<h1>Simule seu plano<\/h1>\n <p class=\"subtitle\">Monitoramento e telemetria remota para seus geradores de energia. Escolha seu perfil, informe quantos equipamentos voc\u00ea quer monitorar e veja quanto custa.<\/p>\n\n <div class=\"step-label\">Passo 1 \u2014 Qual \u00e9 o seu perfil?<\/div>\n <div class=\"segment-grid\">\n <div class=\"segment-card active\" data-segment=\"locadores\" data-ativacao=\"400\" data-mensalidade=\"99\">\n <div class=\"segment-title\">Locadores e prestadores de servi\u00e7o<\/div>\n <div class=\"segment-desc\">Empresas que alugam geradores ou prestam servi\u00e7os de manuten\u00e7\u00e3o, com alta rotatividade de equipamentos entre obras e clientes.<\/div>\n <div class=\"segment-values\">\n <div class=\"segment-value-item\">\n <div class=\"segment-value-label\">Ativa\u00e7\u00e3o<\/div>\n <div class=\"segment-value-num\">R$ 400<\/div>\n <\/div>\n <div class=\"segment-value-item\">\n <div class=\"segment-value-label\">Mensalidade<\/div>\n <div class=\"segment-value-num\">R$ 99<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"segment-card\" data-segment=\"outros\" data-ativacao=\"850\" data-mensalidade=\"149\">\n <div class=\"segment-title\">Outros perfis<\/div>\n <div class=\"segment-desc\">Ind\u00fastrias, com\u00e9rcios, hospitais, condom\u00ednios e demais empresas que operam geradores pr\u00f3prios em instala\u00e7\u00e3o fixa.<\/div>\n <div class=\"segment-values\">\n <div class=\"segment-value-item\">\n <div class=\"segment-value-label\">Ativa\u00e7\u00e3o<\/div>\n <div class=\"segment-value-num\">R$ 850<\/div>\n <\/div>\n <div class=\"segment-value-item\">\n <div class=\"segment-value-label\">Mensalidade<\/div>\n <div class=\"segment-value-num\">R$ 149<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"step-label\">Passo 2 \u2014 Seu cen\u00e1rio<\/div>\n <div class=\"card\">\n <div class=\"param-row\">\n <label>Modems contratados<\/label>\n <div class=\"stepper\">\n <button class=\"stepper-btn\" id=\"usoDec\" onclick=\"step('uso',-1)\">\u2212<\/button>\n <span class=\"stepper-val\" id=\"usoVal\">5<\/span>\n <button class=\"stepper-btn\" id=\"usoInc\" onclick=\"step('uso',1)\">+<\/button>\n <\/div>\n <\/div>\n <div class=\"param-row\">\n <label>Equipamentos monitorados<\/label>\n <div class=\"stepper\">\n <button class=\"stepper-btn\" id=\"equipDec\" onclick=\"step('equip',-1)\">\u2212<\/button>\n <span class=\"stepper-val\" id=\"equipVal\">5<\/span>\n <button class=\"stepper-btn\" id=\"equipInc\" onclick=\"step('equip',1)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"step-label\">Seu investimento<\/div>\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <div class=\"stat-label\">Investimento inicial<\/div>\n <div class=\"stat-value\" id=\"investimento\">R$ 2.000<\/div>\n <\/div>\n <div class=\"stat-card\" id=\"mensalCard\">\n <div class=\"stat-label\" id=\"mensalLabel\">Mensalidade total<\/div>\n <div class=\"stat-value\" id=\"mensal\">R$ 495<\/div>\n <\/div>\n <\/div>\n\n <div class=\"step-label\">Como funciona<\/div>\n\n <div class=\"columns-wrap\">\n <div class=\"columns\">\n <div class=\"col\">\n <div class=\"col-title\">Em estoque<\/div>\n <div class=\"col-count auto\" id=\"estoqueCount\">0<\/div>\n <div class=\"col-count-sub\">calculado<\/div>\n <div class=\"col-box\" id=\"colEstoque\"><\/div>\n <\/div>\n <div class=\"col\">\n <div class=\"col-title\">Em uso<\/div>\n <div class=\"col-count\" id=\"usoCount\">5<\/div>\n <div class=\"col-count-sub\"> <\/div>\n <div class=\"col-box\" id=\"colUso\"><\/div>\n <\/div>\n <div class=\"col\">\n <div class=\"col-title\">Equipamentos monitorados<\/div>\n <div class=\"col-count\" id=\"equipCount\">5<\/div>\n <div class=\"col-count-sub\"> <\/div>\n <div class=\"col-box\" id=\"colEquip\"><\/div>\n <\/div>\n <\/div>\n <svg id=\"links-svg\"><\/svg>\n <\/div>\n\n <div class=\"legend\">\n <div class=\"legend-item\"><span class=\"legend-dot\" style=\"background: rgba(107, 139, 143, 0.25); border: 1px dashed rgba(107, 139, 143, 0.5);\"><\/span>Estoque (ocioso)<\/div>\n <div class=\"legend-item\"><span class=\"legend-dot\" style=\"background: linear-gradient(135deg, #055f67, #00a1b0);\"><\/span>Modem em uso<\/div>\n <div class=\"legend-item\"><span class=\"legend-dot\" style=\"background: rgba(163, 201, 204, 0.2); border: 1px solid rgba(163, 201, 204, 0.5);\"><\/span>Equipamento<\/div>\n <div class=\"legend-item\"><span class=\"legend-line\" style=\"border-color: #00a1b0;\"><\/span>Conex\u00e3o direta<\/div>\n <div class=\"legend-item\"><span class=\"legend-line\" style=\"border-color: #5ddbe8; border-style: dashed;\"><\/span>Liga\u00e7\u00e3o em s\u00e9rie<\/div>\n <\/div>\n\n <div id=\"aviso\" class=\"aviso info\">\n <div class=\"aviso-icon\" id=\"avisoIcon\">=<\/div>\n <div class=\"aviso-text\">\n <span class=\"aviso-title\" id=\"avisoTitle\">Cen\u00e1rio 1 para 1<\/span>\n <span id=\"avisoTxt\">Cada modem monitora um equipamento.<\/span>\n <\/div>\n <\/div>\n\n <div class=\"cta-wrap\">\n <div class=\"cta-text\">Gostou da simula\u00e7\u00e3o? <strong>Fale com nosso time comercial<\/strong> e receba uma proposta personalizada.<\/div>\n <a href=\"https:\/\/wa.me\/+5562982816071\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"cta-btn\">Falar com um consultor \u2192<\/a>\n <\/div>\n\n<\/div>\n\n<script>\n(function(){\n const $ = id => document.getElementById(id);\n const fmt = n => 'R$ ' + Math.round(n).toLocaleString('pt-BR');\n\n let state = { uso: 5, equip: 5 };\n const limits = { uso: { min: 1, max: 30 }, equip: { min: 0, max: 40 } };\n\n let currentSegment = {\n ativacao: 400,\n mensalidade: 99\n };\n\n window.step = function(id, delta) {\n const lim = limits[id];\n state[id] = Math.min(lim.max, Math.max(lim.min, state[id] + delta));\n render();\n };\n\n function selectSegment(card){\n document.querySelectorAll('.segment-card').forEach(c => c.classList.remove('active'));\n card.classList.add('active');\n currentSegment.ativacao = Number(card.dataset.ativacao);\n currentSegment.mensalidade = Number(card.dataset.mensalidade);\n render();\n }\n\n function render(){\n const taxa = currentSegment.ativacao;\n const mens = currentSegment.mensalidade;\n const uso = state.uso;\n const eq = state.equip;\n\n \/\/ Update stepper displays and button states\n $('usoVal').textContent = uso;\n $('equipVal').textContent = eq;\n $('usoDec').disabled = uso <= limits.uso.min;\n $('usoInc').disabled = uso >= limits.uso.max;\n $('equipDec').disabled = eq <= limits.equip.min;\n $('equipInc').disabled = eq >= limits.equip.max;\n\n const estoque = Math.max(0, uso - eq);\n const modemsEmUso = Math.min(uso, eq);\n\n $('estoqueCount').textContent = estoque;\n $('usoCount').textContent = modemsEmUso;\n $('equipCount').textContent = eq;\n\n const colE = $('colEstoque');\n const colU = $('colUso');\n const colQ = $('colEquip');\n colE.innerHTML = '';\n colU.innerHTML = '';\n colQ.innerHTML = '';\n\n for (let i = 0; i < estoque; i++){\n const m = document.createElement('div');\n m.className = 'modem modem-stock';\n m.textContent = 'MDM';\n colE.appendChild(m);\n }\n if (estoque === 0){\n const empty = document.createElement('div');\n empty.className = 'empty-state';\n empty.textContent = eq > uso ? 'todos em uso' : 'sem estoque';\n colE.appendChild(empty);\n }\n\n const usoNodes = [];\n for (let i = 0; i < modemsEmUso; i++){\n const m = document.createElement('div');\n m.className = 'modem modem-active';\n m.textContent = 'M' + (i+1);\n colU.appendChild(m);\n usoNodes.push(m);\n }\n if (modemsEmUso === 0){\n const empty = document.createElement('div');\n empty.className = 'empty-state';\n empty.textContent = 'nenhum em uso';\n colU.appendChild(empty);\n }\n\n const equipNodes = [];\n for (let i = 0; i < eq; i++){\n const e = document.createElement('div');\n e.className = 'equip';\n e.textContent = 'Eq' + (i+1);\n colQ.appendChild(e);\n equipNodes.push(e);\n }\n\n requestAnimationFrame(() => drawLinks(usoNodes, equipNodes, modemsEmUso, eq));\n\n const unidadesFat = Math.max(uso, eq);\n const investimento = uso * taxa;\n const faturado = unidadesFat * mens;\n const anual = faturado * 12;\n\n $('investimento').textContent = fmt(investimento);\n $('mensal').textContent = fmt(faturado);\n\n const aviso = $('aviso');\n const txt = $('avisoTxt');\n const title = $('avisoTitle');\n const icon = $('avisoIcon');\n const mensCard = $('mensalCard');\n const mensLabel = $('mensalLabel');\n\n aviso.className = 'aviso';\n mensCard.classList.remove('highlight');\n\n if (eq === 0){\n aviso.classList.add('info');\n icon.textContent = 'i';\n title.textContent = 'Aguardando instala\u00e7\u00e3o';\n txt.textContent = 'Nenhum equipamento monitorado ainda. A mensalidade m\u00ednima cobra os ' + uso + ' modems contratados = ' + fmt(uso * mens) + '.';\n mensLabel.textContent = 'Mensalidade total';\n } else if (eq === uso){\n aviso.classList.add('info');\n icon.textContent = '=';\n title.textContent = 'Cen\u00e1rio 1 para 1';\n txt.textContent = 'Cada modem monitora um equipamento. A cobran\u00e7a \u00e9 feita por modem = ' + uso + ' unidades.';\n mensLabel.textContent = 'Mensalidade total';\n } else if (eq < uso){\n aviso.classList.add('warning');\n icon.textContent = '!';\n title.textContent = 'Capacidade ociosa \u2014 m\u00ednimo contratual';\n const ocioso = (uso - eq) * mens;\n txt.textContent = 'Voc\u00ea tem ' + estoque + ' modem(s) em estoque sem monitorar equipamento. A fatura m\u00ednima mant\u00e9m os ' + uso + ' modems contratados, o que representa ' + fmt(ocioso) + '\/m\u00eas pelos ociosos.';\n mensLabel.textContent = 'Mensalidade total';\n } else {\n aviso.classList.add('success');\n icon.textContent = '\u2191';\n title.textContent = 'Cobran\u00e7a passa a ser por equipamento';\n const serie = eq - uso;\n txt.textContent = 'Seus equipamentos monitorados (' + eq + ') ultrapassaram os modems contratados (' + uso + '). Gra\u00e7as \u00e0 liga\u00e7\u00e3o em s\u00e9rie, cada modem pode atender v\u00e1rios equipamentos. A partir daqui, a cobran\u00e7a deixa de ser por modem e passa a ser por equipamento monitorado: ' + eq + ' \u00d7 ' + fmt(mens) + ' = ' + fmt(faturado) + '.';\n mensLabel.textContent = 'Mensalidade total';\n mensCard.classList.add('highlight');\n }\n }\n\n function drawLinks(modems, equips, uso, eq){\n const svg = $('links-svg');\n svg.innerHTML = '';\n if (modems.length === 0 || equips.length === 0) return;\n\n const container = svg.parentElement;\n const rect = container.getBoundingClientRect();\n svg.setAttribute('viewBox', '0 0 ' + rect.width + ' ' + rect.height);\n svg.setAttribute('width', rect.width);\n svg.setAttribute('height', rect.height);\n\n const assignments = [];\n for (let i = 0; i < eq; i++){\n assignments.push({ modem: i % uso, equip: i });\n }\n\n assignments.forEach(({ modem, equip }) => {\n const m = modems[modem];\n const e = equips[equip];\n if (!m || !e) return;\n const mRect = m.getBoundingClientRect();\n const eRect = e.getBoundingClientRect();\n const x1 = mRect.right - rect.left;\n const y1 = mRect.top + mRect.height\/2 - rect.top;\n const x2 = eRect.left - rect.left;\n const y2 = eRect.top + eRect.height\/2 - rect.top;\n\n const modemConnections = assignments.filter(a => a.modem === modem).length;\n const isSeries = modemConnections > 1;\n\n const midX = (x1 + x2) \/ 2;\n const path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n path.setAttribute('d', 'M ' + x1 + ' ' + y1 + ' C ' + midX + ' ' + y1 + ', ' + midX + ' ' + y2 + ', ' + x2 + ' ' + y2);\n path.setAttribute('fill', 'none');\n path.setAttribute('stroke', isSeries ? '#5ddbe8' : '#00a1b0');\n path.setAttribute('stroke-width', isSeries ? '1.5' : '1.2');\n path.setAttribute('opacity', isSeries ? '0.9' : '0.7');\n if (isSeries) path.setAttribute('stroke-dasharray', '5 4');\n svg.appendChild(path);\n\n const dot1 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n dot1.setAttribute('cx', x1);\n dot1.setAttribute('cy', y1);\n dot1.setAttribute('r', '2');\n dot1.setAttribute('fill', isSeries ? '#5ddbe8' : '#00a1b0');\n svg.appendChild(dot1);\n\n const dot2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'circle');\n dot2.setAttribute('cx', x2);\n dot2.setAttribute('cy', y2);\n dot2.setAttribute('r', '2');\n dot2.setAttribute('fill', isSeries ? '#5ddbe8' : '#00a1b0');\n svg.appendChild(dot2);\n });\n }\n\n document.querySelectorAll('.segment-card').forEach(card => {\n card.addEventListener('click', () => selectSegment(card));\n });\n\n window.addEventListener('resize', render);\n render();\n})();\n<\/script>\n\n<\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-490f824 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"490f824\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6f61398\" data-id=\"6f61398\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e5ffe02 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"e5ffe02\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nortebox \u2014 Simule seu plano Simule seu plano Monitoramento e telemetria remota para seus geradores de energia. Escolha seu perfil, informe quantos equipamentos voc\u00ea quer monitorar e veja quanto custa. Passo 1 \u2014 Qual \u00e9 o seu perfil? Locadores e prestadores de servi\u00e7o Empresas que alugam geradores ou prestam servi\u00e7os de manuten\u00e7\u00e3o, com alta rotatividade […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"_links":{"self":[{"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/pages\/2984"}],"collection":[{"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/comments?post=2984"}],"version-history":[{"count":12,"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/pages\/2984\/revisions"}],"predecessor-version":[{"id":3011,"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/pages\/2984\/revisions\/3011"}],"wp:attachment":[{"href":"https:\/\/www.nortebox.com.br\/site\/wp-json\/wp\/v2\/media?parent=2984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}