Mapa Interativo do Brasil - Elementor<\/title>\r\n <style>\r\n \/* CONFIGURA\u00c7\u00d5ES DE CORES E ESTILO *\/\r\n :root {\r\n --cor-fundo-mapa: #000000;\r\n --cor-estado-ativo: #2ecc71;\r\n --cor-estado-inativo: #1a1a1a;\r\n --cor-estado-hover: #27ae60;\r\n --cor-borda: #000000;\r\n --cor-texto: #ffffff;\r\n --cor-tooltip-bg: rgba(15, 15, 15, 0.95);\r\n --cor-botao: #2ecc71;\r\n --cor-botao-hover: #27ae60;\r\n --cor-destaque: #2ecc71;\r\n }\r\n\r\n .mapa-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;\r\n background-color: transparent;\r\n overflow: visible;\r\n }\r\n\r\n #mapa-svg {\r\n width: 100%;\r\n height: auto;\r\n filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));\r\n }\r\n\r\n \/* Estilo dos Estados *\/\r\n .estado {\r\n fill: var(--cor-estado-inativo);\r\n stroke: #333;\r\n stroke-width: 0.5;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .estado.ativo {\r\n fill: var(--cor-estado-ativo);\r\n stroke: var(--cor-borda);\r\n }\r\n\r\n .estado:hover {\r\n fill: var(--cor-estado-hover) !important;\r\n stroke-width: 1.5;\r\n filter: brightness(1.2);\r\n }\r\n\r\n \/* TOOLTIP CUSTOMIZADO E PERSISTENTE *\/\r\n .mapa-tooltip {\r\n position: absolute;\r\n display: none;\r\n background: var(--cor-tooltip-bg);\r\n color: var(--cor-texto);\r\n padding: 20px;\r\n border-radius: 12px;\r\n font-size: 14px;\r\n z-index: 9999;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.8);\r\n pointer-events: auto; \/* IMPORTANTE: Permite interagir com o tooltip *\/\r\n min-width: 260px;\r\n border: 1px solid #333;\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n .mapa-tooltip h3 {\r\n margin: 0 0 15px 0;\r\n font-size: 20px;\r\n color: var(--cor-destaque);\r\n border-bottom: 2px solid var(--cor-destaque);\r\n padding-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .info-item {\r\n margin-bottom: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: 1px solid #222;\r\n padding-bottom: 5px;\r\n }\r\n\r\n .info-label {\r\n font-weight: 400;\r\n color: #888;\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .info-value {\r\n font-weight: 600;\r\n color: #eee;\r\n font-size: 14px;\r\n }\r\n\r\n .btn-estado {\r\n display: block;\r\n width: 100%;\r\n background-color: var(--cor-botao);\r\n color: #000;\r\n text-align: center;\r\n padding: 12px 0;\r\n margin-top: 15px;\r\n border-radius: 6px;\r\n text-decoration: none;\r\n font-weight: 800;\r\n transition: all 0.3s;\r\n text-transform: uppercase;\r\n font-size: 13px;\r\n }\r\n\r\n .btn-estado:hover {\r\n background-color: var(--cor-botao-hover);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);\r\n }\r\n\r\n \/* Responsividade *\/\r\n @media (max-width: 768px) {\r\n .mapa-tooltip {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0 !important;\r\n right: 0 !important;\r\n top: auto !important;\r\n width: 100%;\r\n border-radius: 20px 20px 0 0;\r\n transform: none !important;\r\n box-sizing: border-box;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"mapa-container\">\r\n \r\n <svg id=\"mapa-svg\" viewBox=\"0 0 600 600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <g id=\"estados-group\">\r\n \r\n <path id=\"AC\" class=\"estado\" d=\"M68.5,215.5l-5.1,3.4l-1.7,6.8l5.1,10.2l13.6,1.7l10.2-5.1l1.7-10.2l-6.8-6.8L68.5,215.5z\" \/>\r\n <path id=\"AM\" class=\"estado\" d=\"M48.1,110.1l-13.6,23.8l10.2,37.4l23.8,44.2l17,3.4l23.8-13.6l47.6,13.6l37.4-17l10.2-44.2l-17-47.6l-51-23.8L48.1,110.1z\" \/>\r\n <path id=\"AP\" class=\"estado\" d=\"M265.7,45.5l-17,17l10.2,23.8l23.8,3.4l13.6-17l-3.4-23.8L265.7,45.5z\" \/>\r\n <path id=\"PA\" class=\"estado\" d=\"M187.5,79.5l17,47.6l-10.2,44.2l37.4,51l51,13.6l44.2-23.8l13.6-68l-30.6-51l-51-13.6L187.5,79.5z\" \/>\r\n <path id=\"RO\" class=\"estado\" d=\"M109.3,215.5l-17,17l10.2,37.4l37.4,10.2l17-17l-10.2-37.4L109.3,215.5z\" \/>\r\n <path id=\"RR\" class=\"estado\" d=\"M109.3,45.5l-17,17l10.2,37.4l37.4,10.2l17-17l-10.2-37.4L109.3,45.5z\" \/>\r\n <path id=\"TO\" class=\"estado\" d=\"M292.9,181.5l-17,37.4l17,51l30.6,3.4l13.6-37.4l-10.2-44.2L292.9,181.5z\" \/>\r\n \r\n \r\n <path id=\"AL\" class=\"estado\" d=\"M463,181.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,181.5z\" \/>\r\n <path id=\"BA\" class=\"estado\" d=\"M343.9,215.5l-17,51l37.4,68l68,17l37.4-51l-17-68l-51-17L343.9,215.5z\" \/>\r\n <path id=\"CE\" class=\"estado\" d=\"M412,113.5l-17,17l10.2,30.6l30.6,3.4l13.6-23.8l-10.2-23.8L412,113.5z\" \/>\r\n <path id=\"MA\" class=\"estado\" d=\"M310,113.5l-17,37.4l17,51l37.4,3.4l13.6-37.4l-10.2-44.2L310,113.5z\" \/>\r\n <path id=\"PB\" class=\"estado\" d=\"M463,147.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,147.5z\" \/>\r\n <path id=\"PE\" class=\"estado\" d=\"M429,164.5l-17,17l10.2,23.8l51,3.4l13.6-17l-10.2-23.8L429,164.5z\" \/>\r\n <path id=\"PI\" class=\"estado\" d=\"M360.9,130.5l-17,37.4l17,51l30.6,3.4l13.6-37.4l-10.2-44.2L360.9,130.5z\" \/>\r\n <path id=\"RN\" class=\"estado\" d=\"M463,113.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,113.5z\" \/>\r\n <path id=\"SE\" class=\"estado\" d=\"M463,215.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,215.5z\" \/>\r\n\r\n \r\n <path id=\"DF\" class=\"estado\" d=\"M326.9,317.5l-6.8,6.8l6.8,6.8l6.8-6.8l-6.8-6.8z\" \/>\r\n <path id=\"GO\" class=\"estado\" d=\"M292.9,283.5l-17,37.4l17,51l51,13.6l37.4-37.4l-10.2-51L292.9,283.5z\" \/>\r\n <path id=\"MT\" class=\"estado\" d=\"M173.9,215.5l-17,51l37.4,68l68,17l37.4-51l-17-68l-51-17L173.9,215.5z\" \/>\r\n <path id=\"MS\" class=\"estado\" d=\"M207.9,351.5l-17,37.4l17,51l51,13.6l37.4-37.4l-10.2-51L207.9,351.5z\" \/>\r\n\r\n \r\n <path id=\"ES\" class=\"estado\" d=\"M412,351.5l-10.2,10.2l10.2,23.8l17-10.2l-3.4-17L412,351.5z\" \/>\r\n <path id=\"MG\" class=\"estado\" d=\"M326.9,334.5l-17,51l37.4,68l68,17l37.4-51l-17-68l-51-17L326.9,334.5z\" \/>\r\n <path id=\"RJ\" class=\"estado\" d=\"M395,419.5l-10.2,10.2l23.8,10.2l10.2-10.2l-17-10.2L395,419.5z\" \/>\r\n <path id=\"SP\" class=\"estado\" d=\"M292.9,402.5l-17,37.4l37.4,51l51,3.4l13.6-37.4l-10.2-44.2L292.9,402.5z\" \/>\r\n\r\n \r\n <path id=\"PR\" class=\"estado\" d=\"M258.9,453.5l-17,17l17,30.6l37.4,3.4l13.6-23.8l-10.2-23.8L258.9,453.5z\" \/>\r\n <path id=\"RS\" class=\"estado\" d=\"M224.9,521.5l-17,37.4l37.4,30.6l51-17l13.6-37.4l-37.4-13.6L224.9,521.5z\" \/>\r\n <path id=\"SC\" class=\"estado\" d=\"M275.9,487.5l-10.2,10.2l17,23.8l23.8-10.2l-10.2-17L275.9,487.5z\" \/>\r\n <\/g>\r\n <\/svg>\r\n\r\n \r\n <div id=\"tooltip\" class=\"mapa-tooltip\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ CONFIGURA\u00c7\u00c3O DOS ESTADOS\r\n \/\/ Ativando todos exceto: AC, AM, AP, RO, RR, DF\r\n const inativos = [\"AC\", \"AM\", \"AP\", \"RO\", \"RR\", \"DF\"];\r\n \r\n const dadosPadrao = {\r\n desconto: \"At\u00e9 20%\",\r\n prazo: \"60 a 90 dias\",\r\n trocaTitularidade: \"Sim\",\r\n distribuidoras: \"Principais da Regi\u00e3o\",\r\n pagamento: \"Boleto \u00danico\",\r\n link: \"#\"\r\n };\r\n\r\n const nomesEstados = {\r\n \"AC\": \"Acre\", \"AL\": \"Alagoas\", \"AP\": \"Amap\u00e1\", \"AM\": \"Amazonas\", \"BA\": \"Bahia\", \"CE\": \"Cear\u00e1\", \"DF\": \"Distrito Federal\", \"ES\": \"Esp\u00edrito Santo\", \"GO\": \"Goi\u00e1s\", \"MA\": \"Maranh\u00e3o\", \"MT\": \"Mato Grosso\", \"MS\": \"Mato Grosso do Sul\", \"MG\": \"Minas Gerais\", \"PA\": \"Par\u00e1\", \"PB\": \"Para\u00edba\", \"PR\": \"Paran\u00e1\", \"PE\": \"Pernambuco\", \"PI\": \"Piau\u00ed\", \"RJ\": \"Rio de Janeiro\", \"RN\": \"Rio Grande do Norte\", \"RS\": \"Rio Grande do Sul\", \"RO\": \"Rond\u00f4nia\", \"RR\": \"Roraima\", \"SC\": \"Santa Catarina\", \"SP\": \"S\u00e3o Paulo\", \"SE\": \"Sergipe\", \"TO\": \"Tocantins\"\r\n };\r\n\r\n \/\/ Gerar base de dados din\u00e2mica\r\n const dadosEstados = {};\r\n Object.keys(nomesEstados).forEach(uf => {\r\n dadosEstados[uf] = {\r\n nome: nomesEstados[uf],\r\n ativo: !inativos.includes(uf),\r\n ...dadosPadrao,\r\n link: `\/estado\/${uf.toLowerCase()}`\r\n };\r\n });\r\n\r\n \/\/ Customiza\u00e7\u00f5es espec\u00edficas se necess\u00e1rio\r\n dadosEstados[\"SP\"].distribuidoras = \"CPFL, Enel, Elektro\";\r\n dadosEstados[\"MG\"].desconto = \"At\u00e9 22%\";\r\n dadosEstados[\"RJ\"].pagamento = \"Dois Boletos\";\r\n\r\n const tooltip = document.getElementById('tooltip');\r\n const estados = document.querySelectorAll('.estado');\r\n let timer;\r\n\r\n \/\/ Inicializar estados ativos\r\n estados.forEach(path => {\r\n const uf = path.id;\r\n if (dadosEstados[uf] && dadosEstados[uf].ativo) {\r\n path.classList.add('ativo');\r\n }\r\n });\r\n\r\n function mostrarTooltip(uf, e) {\r\n clearTimeout(timer);\r\n const dados = dadosEstados[uf];\r\n if (!dados) return;\r\n\r\n let conteudo = `<h3>${dados.nome}<\/h3>`;\r\n \r\n if (dados.ativo) {\r\n conteudo += `\r\n <div class=\"info-item\"><span class=\"info-label\">Desconto Estimado<\/span><span class=\"info-value\">${dados.desconto}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Prazo de Conex\u00e3o<\/span><span class=\"info-value\">${dados.prazo}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Troca de Titularidade<\/span><span class=\"info-value\">${dados.trocaTitularidade}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Distribuidoras Atendidas<\/span><span class=\"info-value\">${dados.distribuidoras}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Forma de Pagamento<\/span><span class=\"info-value\">${dados.pagamento}<\/span><\/div>\r\n <a href=\"${dados.link}\" class=\"btn-estado\">Ir para p\u00e1gina do estado<\/a>\r\n `;\r\n } else {\r\n conteudo += `<p style=\"color: #888; text-align: center; margin: 20px 0;\">Em breve teremos conex\u00f5es dispon\u00edveis nesta regi\u00e3o.<\/p>`;\r\n }\r\n\r\n tooltip.innerHTML = conteudo;\r\n tooltip.style.display = 'block';\r\n\r\n \/\/ Posicionamento inteligente\r\n const containerRect = document.querySelector('.mapa-container').getBoundingClientRect();\r\n let x = e.clientX - containerRect.left + 15;\r\n let y = e.clientY - containerRect.top + 15;\r\n\r\n \/\/ Ajuste para n\u00e3o sair da tela\r\n if (x + 280 > containerRect.width) x = x - 300;\r\n if (y + 350 > containerRect.height) y = y - 350;\r\n\r\n tooltip.style.left = x + 'px';\r\n tooltip.style.top = y + 'px';\r\n }\r\n\r\n function esconderTooltip() {\r\n \/\/ Pequeno delay para permitir que o mouse entre no tooltip\r\n timer = setTimeout(() => {\r\n tooltip.style.display = 'none';\r\n }, 300);\r\n }\r\n\r\n estados.forEach(path => {\r\n path.addEventListener('mouseenter', (e) => mostrarTooltip(path.id, e));\r\n path.addEventListener('mouseleave', esconderTooltip);\r\n });\r\n\r\n \/\/ Manter tooltip aberto se o mouse estiver sobre ele\r\n tooltip.addEventListener('mouseenter', () => clearTimeout(timer));\r\n tooltip.addEventListener('mouseleave', esconderTooltip);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Mapa Interativo do Brasil – Elementor<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3586","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages\/3586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=3586"}],"version-history":[{"count":11,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages\/3586\/revisions"}],"predecessor-version":[{"id":3624,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages\/3586\/revisions\/3624"}],"wp:attachment":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=3586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Mapa Interativo do Brasil - Elementor<\/title>\r\n <style>\r\n \/* CONFIGURA\u00c7\u00d5ES DE CORES E ESTILO *\/\r\n :root {\r\n --cor-fundo-mapa: #000000;\r\n --cor-estado-ativo: #2ecc71;\r\n --cor-estado-inativo: #1a1a1a;\r\n --cor-estado-hover: #27ae60;\r\n --cor-borda: #000000;\r\n --cor-texto: #ffffff;\r\n --cor-tooltip-bg: rgba(15, 15, 15, 0.95);\r\n --cor-botao: #2ecc71;\r\n --cor-botao-hover: #27ae60;\r\n --cor-destaque: #2ecc71;\r\n }\r\n\r\n .mapa-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;\r\n background-color: transparent;\r\n overflow: visible;\r\n }\r\n\r\n #mapa-svg {\r\n width: 100%;\r\n height: auto;\r\n filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));\r\n }\r\n\r\n \/* Estilo dos Estados *\/\r\n .estado {\r\n fill: var(--cor-estado-inativo);\r\n stroke: #333;\r\n stroke-width: 0.5;\r\n transition: all 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .estado.ativo {\r\n fill: var(--cor-estado-ativo);\r\n stroke: var(--cor-borda);\r\n }\r\n\r\n .estado:hover {\r\n fill: var(--cor-estado-hover) !important;\r\n stroke-width: 1.5;\r\n filter: brightness(1.2);\r\n }\r\n\r\n \/* TOOLTIP CUSTOMIZADO E PERSISTENTE *\/\r\n .mapa-tooltip {\r\n position: absolute;\r\n display: none;\r\n background: var(--cor-tooltip-bg);\r\n color: var(--cor-texto);\r\n padding: 20px;\r\n border-radius: 12px;\r\n font-size: 14px;\r\n z-index: 9999;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.8);\r\n pointer-events: auto; \/* IMPORTANTE: Permite interagir com o tooltip *\/\r\n min-width: 260px;\r\n border: 1px solid #333;\r\n backdrop-filter: blur(5px);\r\n }\r\n\r\n .mapa-tooltip h3 {\r\n margin: 0 0 15px 0;\r\n font-size: 20px;\r\n color: var(--cor-destaque);\r\n border-bottom: 2px solid var(--cor-destaque);\r\n padding-bottom: 8px;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .info-item {\r\n margin-bottom: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: 1px solid #222;\r\n padding-bottom: 5px;\r\n }\r\n\r\n .info-label {\r\n font-weight: 400;\r\n color: #888;\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .info-value {\r\n font-weight: 600;\r\n color: #eee;\r\n font-size: 14px;\r\n }\r\n\r\n .btn-estado {\r\n display: block;\r\n width: 100%;\r\n background-color: var(--cor-botao);\r\n color: #000;\r\n text-align: center;\r\n padding: 12px 0;\r\n margin-top: 15px;\r\n border-radius: 6px;\r\n text-decoration: none;\r\n font-weight: 800;\r\n transition: all 0.3s;\r\n text-transform: uppercase;\r\n font-size: 13px;\r\n }\r\n\r\n .btn-estado:hover {\r\n background-color: var(--cor-botao-hover);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);\r\n }\r\n\r\n \/* Responsividade *\/\r\n @media (max-width: 768px) {\r\n .mapa-tooltip {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0 !important;\r\n right: 0 !important;\r\n top: auto !important;\r\n width: 100%;\r\n border-radius: 20px 20px 0 0;\r\n transform: none !important;\r\n box-sizing: border-box;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"mapa-container\">\r\n \r\n <svg id=\"mapa-svg\" viewBox=\"0 0 600 600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <g id=\"estados-group\">\r\n \r\n <path id=\"AC\" class=\"estado\" d=\"M68.5,215.5l-5.1,3.4l-1.7,6.8l5.1,10.2l13.6,1.7l10.2-5.1l1.7-10.2l-6.8-6.8L68.5,215.5z\" \/>\r\n <path id=\"AM\" class=\"estado\" d=\"M48.1,110.1l-13.6,23.8l10.2,37.4l23.8,44.2l17,3.4l23.8-13.6l47.6,13.6l37.4-17l10.2-44.2l-17-47.6l-51-23.8L48.1,110.1z\" \/>\r\n <path id=\"AP\" class=\"estado\" d=\"M265.7,45.5l-17,17l10.2,23.8l23.8,3.4l13.6-17l-3.4-23.8L265.7,45.5z\" \/>\r\n <path id=\"PA\" class=\"estado\" d=\"M187.5,79.5l17,47.6l-10.2,44.2l37.4,51l51,13.6l44.2-23.8l13.6-68l-30.6-51l-51-13.6L187.5,79.5z\" \/>\r\n <path id=\"RO\" class=\"estado\" d=\"M109.3,215.5l-17,17l10.2,37.4l37.4,10.2l17-17l-10.2-37.4L109.3,215.5z\" \/>\r\n <path id=\"RR\" class=\"estado\" d=\"M109.3,45.5l-17,17l10.2,37.4l37.4,10.2l17-17l-10.2-37.4L109.3,45.5z\" \/>\r\n <path id=\"TO\" class=\"estado\" d=\"M292.9,181.5l-17,37.4l17,51l30.6,3.4l13.6-37.4l-10.2-44.2L292.9,181.5z\" \/>\r\n \r\n \r\n <path id=\"AL\" class=\"estado\" d=\"M463,181.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,181.5z\" \/>\r\n <path id=\"BA\" class=\"estado\" d=\"M343.9,215.5l-17,51l37.4,68l68,17l37.4-51l-17-68l-51-17L343.9,215.5z\" \/>\r\n <path id=\"CE\" class=\"estado\" d=\"M412,113.5l-17,17l10.2,30.6l30.6,3.4l13.6-23.8l-10.2-23.8L412,113.5z\" \/>\r\n <path id=\"MA\" class=\"estado\" d=\"M310,113.5l-17,37.4l17,51l37.4,3.4l13.6-37.4l-10.2-44.2L310,113.5z\" \/>\r\n <path id=\"PB\" class=\"estado\" d=\"M463,147.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,147.5z\" \/>\r\n <path id=\"PE\" class=\"estado\" d=\"M429,164.5l-17,17l10.2,23.8l51,3.4l13.6-17l-10.2-23.8L429,164.5z\" \/>\r\n <path id=\"PI\" class=\"estado\" d=\"M360.9,130.5l-17,37.4l17,51l30.6,3.4l13.6-37.4l-10.2-44.2L360.9,130.5z\" \/>\r\n <path id=\"RN\" class=\"estado\" d=\"M463,113.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,113.5z\" \/>\r\n <path id=\"SE\" class=\"estado\" d=\"M463,215.5l-10.2,10.2l10.2,10.2l13.6-6.8l-3.4-10.2L463,215.5z\" \/>\r\n\r\n \r\n <path id=\"DF\" class=\"estado\" d=\"M326.9,317.5l-6.8,6.8l6.8,6.8l6.8-6.8l-6.8-6.8z\" \/>\r\n <path id=\"GO\" class=\"estado\" d=\"M292.9,283.5l-17,37.4l17,51l51,13.6l37.4-37.4l-10.2-51L292.9,283.5z\" \/>\r\n <path id=\"MT\" class=\"estado\" d=\"M173.9,215.5l-17,51l37.4,68l68,17l37.4-51l-17-68l-51-17L173.9,215.5z\" \/>\r\n <path id=\"MS\" class=\"estado\" d=\"M207.9,351.5l-17,37.4l17,51l51,13.6l37.4-37.4l-10.2-51L207.9,351.5z\" \/>\r\n\r\n \r\n <path id=\"ES\" class=\"estado\" d=\"M412,351.5l-10.2,10.2l10.2,23.8l17-10.2l-3.4-17L412,351.5z\" \/>\r\n <path id=\"MG\" class=\"estado\" d=\"M326.9,334.5l-17,51l37.4,68l68,17l37.4-51l-17-68l-51-17L326.9,334.5z\" \/>\r\n <path id=\"RJ\" class=\"estado\" d=\"M395,419.5l-10.2,10.2l23.8,10.2l10.2-10.2l-17-10.2L395,419.5z\" \/>\r\n <path id=\"SP\" class=\"estado\" d=\"M292.9,402.5l-17,37.4l37.4,51l51,3.4l13.6-37.4l-10.2-44.2L292.9,402.5z\" \/>\r\n\r\n \r\n <path id=\"PR\" class=\"estado\" d=\"M258.9,453.5l-17,17l17,30.6l37.4,3.4l13.6-23.8l-10.2-23.8L258.9,453.5z\" \/>\r\n <path id=\"RS\" class=\"estado\" d=\"M224.9,521.5l-17,37.4l37.4,30.6l51-17l13.6-37.4l-37.4-13.6L224.9,521.5z\" \/>\r\n <path id=\"SC\" class=\"estado\" d=\"M275.9,487.5l-10.2,10.2l17,23.8l23.8-10.2l-10.2-17L275.9,487.5z\" \/>\r\n <\/g>\r\n <\/svg>\r\n\r\n \r\n <div id=\"tooltip\" class=\"mapa-tooltip\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ CONFIGURA\u00c7\u00c3O DOS ESTADOS\r\n \/\/ Ativando todos exceto: AC, AM, AP, RO, RR, DF\r\n const inativos = [\"AC\", \"AM\", \"AP\", \"RO\", \"RR\", \"DF\"];\r\n \r\n const dadosPadrao = {\r\n desconto: \"At\u00e9 20%\",\r\n prazo: \"60 a 90 dias\",\r\n trocaTitularidade: \"Sim\",\r\n distribuidoras: \"Principais da Regi\u00e3o\",\r\n pagamento: \"Boleto \u00danico\",\r\n link: \"#\"\r\n };\r\n\r\n const nomesEstados = {\r\n \"AC\": \"Acre\", \"AL\": \"Alagoas\", \"AP\": \"Amap\u00e1\", \"AM\": \"Amazonas\", \"BA\": \"Bahia\", \"CE\": \"Cear\u00e1\", \"DF\": \"Distrito Federal\", \"ES\": \"Esp\u00edrito Santo\", \"GO\": \"Goi\u00e1s\", \"MA\": \"Maranh\u00e3o\", \"MT\": \"Mato Grosso\", \"MS\": \"Mato Grosso do Sul\", \"MG\": \"Minas Gerais\", \"PA\": \"Par\u00e1\", \"PB\": \"Para\u00edba\", \"PR\": \"Paran\u00e1\", \"PE\": \"Pernambuco\", \"PI\": \"Piau\u00ed\", \"RJ\": \"Rio de Janeiro\", \"RN\": \"Rio Grande do Norte\", \"RS\": \"Rio Grande do Sul\", \"RO\": \"Rond\u00f4nia\", \"RR\": \"Roraima\", \"SC\": \"Santa Catarina\", \"SP\": \"S\u00e3o Paulo\", \"SE\": \"Sergipe\", \"TO\": \"Tocantins\"\r\n };\r\n\r\n \/\/ Gerar base de dados din\u00e2mica\r\n const dadosEstados = {};\r\n Object.keys(nomesEstados).forEach(uf => {\r\n dadosEstados[uf] = {\r\n nome: nomesEstados[uf],\r\n ativo: !inativos.includes(uf),\r\n ...dadosPadrao,\r\n link: `\/estado\/${uf.toLowerCase()}`\r\n };\r\n });\r\n\r\n \/\/ Customiza\u00e7\u00f5es espec\u00edficas se necess\u00e1rio\r\n dadosEstados[\"SP\"].distribuidoras = \"CPFL, Enel, Elektro\";\r\n dadosEstados[\"MG\"].desconto = \"At\u00e9 22%\";\r\n dadosEstados[\"RJ\"].pagamento = \"Dois Boletos\";\r\n\r\n const tooltip = document.getElementById('tooltip');\r\n const estados = document.querySelectorAll('.estado');\r\n let timer;\r\n\r\n \/\/ Inicializar estados ativos\r\n estados.forEach(path => {\r\n const uf = path.id;\r\n if (dadosEstados[uf] && dadosEstados[uf].ativo) {\r\n path.classList.add('ativo');\r\n }\r\n });\r\n\r\n function mostrarTooltip(uf, e) {\r\n clearTimeout(timer);\r\n const dados = dadosEstados[uf];\r\n if (!dados) return;\r\n\r\n let conteudo = `<h3>${dados.nome}<\/h3>`;\r\n \r\n if (dados.ativo) {\r\n conteudo += `\r\n <div class=\"info-item\"><span class=\"info-label\">Desconto Estimado<\/span><span class=\"info-value\">${dados.desconto}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Prazo de Conex\u00e3o<\/span><span class=\"info-value\">${dados.prazo}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Troca de Titularidade<\/span><span class=\"info-value\">${dados.trocaTitularidade}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Distribuidoras Atendidas<\/span><span class=\"info-value\">${dados.distribuidoras}<\/span><\/div>\r\n <div class=\"info-item\"><span class=\"info-label\">Forma de Pagamento<\/span><span class=\"info-value\">${dados.pagamento}<\/span><\/div>\r\n <a href=\"${dados.link}\" class=\"btn-estado\">Ir para p\u00e1gina do estado<\/a>\r\n `;\r\n } else {\r\n conteudo += `<p style=\"color: #888; text-align: center; margin: 20px 0;\">Em breve teremos conex\u00f5es dispon\u00edveis nesta regi\u00e3o.<\/p>`;\r\n }\r\n\r\n tooltip.innerHTML = conteudo;\r\n tooltip.style.display = 'block';\r\n\r\n \/\/ Posicionamento inteligente\r\n const containerRect = document.querySelector('.mapa-container').getBoundingClientRect();\r\n let x = e.clientX - containerRect.left + 15;\r\n let y = e.clientY - containerRect.top + 15;\r\n\r\n \/\/ Ajuste para n\u00e3o sair da tela\r\n if (x + 280 > containerRect.width) x = x - 300;\r\n if (y + 350 > containerRect.height) y = y - 350;\r\n\r\n tooltip.style.left = x + 'px';\r\n tooltip.style.top = y + 'px';\r\n }\r\n\r\n function esconderTooltip() {\r\n \/\/ Pequeno delay para permitir que o mouse entre no tooltip\r\n timer = setTimeout(() => {\r\n tooltip.style.display = 'none';\r\n }, 300);\r\n }\r\n\r\n estados.forEach(path => {\r\n path.addEventListener('mouseenter', (e) => mostrarTooltip(path.id, e));\r\n path.addEventListener('mouseleave', esconderTooltip);\r\n });\r\n\r\n \/\/ Manter tooltip aberto se o mouse estiver sobre ele\r\n tooltip.addEventListener('mouseenter', () => clearTimeout(timer));\r\n tooltip.addEventListener('mouseleave', esconderTooltip);\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Mapa Interativo do Brasil – Elementor<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3586","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages\/3586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=3586"}],"version-history":[{"count":11,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages\/3586\/revisions"}],"predecessor-version":[{"id":3624,"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/pages\/3586\/revisions\/3624"}],"wp:attachment":[{"href":"https:\/\/projeto103.doi2versos.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=3586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}