Transmisi\u00f3n Telecom Vertical Transparente<\/title>\r\n\r\n<style>\r\n\/* CONTENEDOR (vertical) con fondo transparente *\/\r\n.contenedor {\r\n width: 120px; \/* ancho fijo *\/\r\n height: 100vh; \/* ocupa toda la altura de la ventana o contenedor padre *\/\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: transparent; \/* fondo transparente *\/\r\n}\r\n\r\n\/* l\u00ednea de transmisi\u00f3n vertical *\/\r\n.red {\r\n position: relative;\r\n width: 8px; \/* ancho del cable *\/\r\n height: 90%; \/* altura del cable *\/\r\n border-radius: 10px;\r\n\r\n \/* degradado vertical amarillo-naranja *\/\r\n background: linear-gradient(180deg, #ffffff, #ffffff, #ffffff);\r\n box-shadow: 0 0 15px #ffffff;\r\n overflow: hidden;\r\n}\r\n\r\n\/* nodos verticales *\/\r\n.nodo {\r\n position: absolute;\r\n width: 18px;\r\n height: 18px;\r\n border-radius: 50%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n\r\n background: radial-gradient(circle, #ffffff, #ffffff);\r\n box-shadow: 0 0 15px #ffae00;\r\n}\r\n\r\n\/* posici\u00f3n de los nodos *\/\r\n.nodo:nth-child(1){ top: 0; }\r\n.nodo:nth-child(2){ top: 50%; transform: translate(-50%, -50%); }\r\n.nodo:nth-child(3){ bottom: 0; }\r\n\r\n\/* paquete de datos vertical *\/\r\n.paquete {\r\n position: absolute;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n\r\n background: radial-gradient(circle, #fff, #ffd000, #ff6a00);\r\n box-shadow: 0 0 25px #ffae00;\r\n\r\n animation: transmitir 2.5s linear infinite;\r\n}\r\n\r\n\/* animaci\u00f3n vertical *\/\r\n@keyframes transmitir {\r\n from {\r\n top: -2%;\r\n }\r\n to {\r\n top: 102%;\r\n }\r\n}\r\n\r\n\/* efecto brillo tipo fibra \u00f3ptica vertical *\/\r\n.red::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 120deg,\r\n transparent,\r\n rgba(255,255,255,0.4),\r\n transparent\r\n );\r\n animation: brillo 2s linear infinite;\r\n}\r\n\r\n@keyframes brillo {\r\n from { transform: translateY(-100%); }\r\n to { transform: translateY(100%); }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"contenedor\">\r\n <div class=\"red\">\r\n <div class=\"nodo\"><\/div>\r\n <div class=\"nodo\"><\/div>\r\n <div class=\"nodo\"><\/div>\r\n <div class=\"paquete\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-49cc1af elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-html\" data-id=\"49cc1af\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeIn"}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Mapa de Proyectos<\/title>\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"\/>\r\n\r\n<style>\r\n#map { width:100%; height:100vh; }\r\n\r\n@media (max-width: 768px) {\r\n #map {\r\n height: 50vh; \r\n }\r\n}\r\n\r\n\/* Popup con fondo blanco, igual disposici\u00f3n que la versi\u00f3n azul *\/\r\n.leaflet-popup-content-wrapper {\r\n width: 360px;\r\n border-radius: 16px;\r\n background: #ffffff; \/* fondo blanco *\/\r\n border: 2px solid #ffffff; \/* borde naranja estilo corporativo *\/\r\n color: #181717; \/* texto base *\/\r\n}\r\n\r\n.leaflet-popup-content .title {\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n color: #0a0a0a; \/* rojo\/naranja para t\u00edtulo principal *\/\r\n}\r\n\r\n.leaflet-popup-content .subtitle {\r\n font-weight: 600;\r\n color: #1f1f1f; \/* naranja para subt\u00edtulos *\/\r\n}\r\n\r\n.leaflet-popup-content a {\r\n text-decoration: none;\r\n font-weight: 600;\r\n color: #f54e00; \/* enlaces secundarios naranja *\/\r\n}\r\n\r\n.leaflet-popup-content ul {\r\n padding-left: 0;\r\n list-style: none;\r\n}\r\n\r\n.leaflet-popup-content li {\r\n margin-bottom: 6px;\r\n}\r\n\r\n.leaflet-popup-content a.back {\r\n display: inline-block;\r\n margin-top: 10px;\r\n color: #d81515; \/* link \u201cvolver\u201d m\u00e1s rojizo\/naranja *\/\r\n}\r\n\r\n\/* Iconos de marcador naranja\/amarillo con c\u00edrculo blanco *\/\r\n.custom-marker svg {\r\n filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"map\"><\/div>\r\n\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n<script>\r\nlet map;\r\nlet projects = [];\r\n\r\nmap = L.map(\"map\").setView([-12.0464, -77.0428], 6);\r\n\r\nL.tileLayer(\"https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png\", {\r\n attribution: \"\u00a9 OpenStreetMap\"\r\n}).addTo(map);\r\n\r\nmap.on(\"click\", () => map.closePopup());\r\n\r\n\/\/ Marcador naranja-amarillo-rojo con c\u00edrculo blanco\r\nconst orangeMarkerIcon = L.divIcon({\r\n className: \"custom-marker\",\r\n html: `\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\">\r\n <path fill=\"url(#grad1)\" stroke=\"#e64a19\" stroke-width=\"1.5\"\r\n d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\"\/>\r\n <circle cx=\"12\" cy=\"9\" r=\"3\" fill=\"#ffffff\"\/>\r\n <defs>\r\n <linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\r\n <stop offset=\"0%\" style=\"stop-color:#f2b600;stop-opacity:1\" \/>\r\n <stop offset=\"50%\" style=\"stop-color:#f27611;stop-opacity:1\" \/>\r\n <stop offset=\"100%\" style=\"stop-color:#d32f2f;stop-opacity:1\" \/>\r\n <\/linearGradient>\r\n <\/defs>\r\n <\/svg>\r\n `,\r\n iconSize: [32,32],\r\n iconAnchor: [16,32],\r\n popupAnchor: [0,-32]\r\n});\r\n\r\nfetch(\"https:\/\/sermatelec.com\/wp-content\/uploads\/2026\/03\/proyectos-sermatelec-.json\")\r\n .then(res => res.json())\r\n .then(data => {\r\n if (!data.projects || !Array.isArray(data.projects)) {\r\n console.error(\"JSON inv\u00e1lido\");\r\n return;\r\n }\r\n projects = data.projects;\r\n iniciarMapaOriginal();\r\n })\r\n .catch(err => console.error(\"Error JSON:\", err));\r\n\r\nfunction iniciarMapaOriginal() {\r\n\r\n const grouped = {};\r\n projects.forEach(p => {\r\n if (!p.coords || p.coords.length !== 2) return;\r\n const key = p.coords.join(\",\");\r\n if (!grouped[key]) grouped[key] = [];\r\n grouped[key].push(p);\r\n });\r\n\r\n Object.keys(grouped).forEach(key => {\r\n const group = grouped[key];\r\n\r\n const marker = L.marker(group[0].coords, {\r\n icon: orangeMarkerIcon\r\n }).addTo(map);\r\n\r\n const entidades = {};\r\n group.forEach(p => {\r\n if (!entidades[p.entidad]) entidades[p.entidad] = [];\r\n entidades[p.entidad].push(p);\r\n });\r\n\r\n marker._data = { entidades };\r\n\r\n marker.bindPopup(buildEntidadMenu(entidades), {\r\n closeOnClick: false,\r\n autoClose: false\r\n });\r\n\r\n marker.on(\"popupopen\", e => {\r\n const el = e.popup.getElement();\r\n L.DomEvent.disableClickPropagation(el);\r\n L.DomEvent.disableScrollPropagation(el);\r\n el.addEventListener(\"click\", ev => ev.stopPropagation());\r\n });\r\n });\r\n}\r\n\r\nfunction buildEntidadMenu(entidades) {\r\n let html = `<div class=\"title\">Proyectos<\/div><ul>`;\r\n Object.keys(entidades).forEach(entidad => {\r\n html += `\r\n <li>\r\n <a href=\"#\" onclick=\"event.preventDefault(); showProjectsByEntidad('${escapeJS(entidad)}')\">\r\n ${entidad} (${entidades[entidad].length})\r\n <\/a>\r\n <\/li>`;\r\n });\r\n html += \"<\/ul>\";\r\n return html;\r\n}\r\n\r\nfunction showProjectsByEntidad(entidad) {\r\n map.eachLayer(layer => {\r\n if (layer._data && layer.isPopupOpen()) {\r\n layer._currentEntidad = entidad;\r\n const proyectos = layer._data.entidades[entidad];\r\n\r\n let html = `<div class=\"subtitle\">${entidad}<\/div><ul>`;\r\n proyectos.forEach((p, i) => {\r\n html += `\r\n <li>\r\n <a href=\"#\" onclick=\"event.preventDefault(); showProjectDetail(${i})\">\r\n ${p.descripcion}\r\n <\/a>\r\n <\/li>`;\r\n });\r\n\r\n html += `<\/ul>\r\n <a href=\"#\" class=\"back\"\r\n onclick=\"event.preventDefault(); backToEntidades()\">\u2190 Volver<\/a>`;\r\n\r\n layer.setPopupContent(html);\r\n }\r\n });\r\n}\r\n\r\nfunction showProjectDetail(index) {\r\n map.eachLayer(layer => {\r\n if (layer._currentEntidad && layer.isPopupOpen()) {\r\n const p = layer._data.entidades[layer._currentEntidad][index];\r\n\r\n layer.setPopupContent(`\r\n <div class=\"title\">${p.entidad}<\/div>\r\n ${p.departamento} - ${p.provincia} - ${p.distrito}<br><br>\r\n ${p.descripcion}<br><br>\r\n \r\n\r\n <a href=\"#\" class=\"back\"\r\n onclick=\"event.preventDefault(); showProjectsByEntidad('${escapeJS(p.entidad)}')\">\r\n \u2190 Volver\r\n <\/a>\r\n `);\r\n }\r\n });\r\n}\r\n\r\nfunction backToEntidades() {\r\n map.eachLayer(layer => {\r\n if (layer._data && layer.isPopupOpen()) {\r\n layer._currentEntidad = null;\r\n layer.setPopupContent(buildEntidadMenu(layer._data.entidades));\r\n }\r\n });\r\n}\r\n\r\nfunction escapeJS(text) {\r\n return text.replace(\/\\\\\/g, \"\\\\\\\\\").replace(\/'\/g, \"\\\\'\");\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7ab632 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"f7ab632\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInLeft"}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>Transmisi\u00f3n Telecom Vertical Transparente<\/title>\r\n\r\n<style>\r\n\/* CONTENEDOR (vertical) con fondo transparente *\/\r\n.contenedor {\r\n width: 120px; \/* ancho fijo *\/\r\n height: 100vh; \/* ocupa toda la altura de la ventana o contenedor padre *\/\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: transparent; \/* fondo transparente *\/\r\n}\r\n\r\n\/* l\u00ednea de transmisi\u00f3n vertical *\/\r\n.red {\r\n position: relative;\r\n width: 8px; \/* ancho del cable *\/\r\n height: 90%; \/* altura del cable *\/\r\n border-radius: 10px;\r\n\r\n \/* degradado vertical amarillo-naranja *\/\r\n background: linear-gradient(180deg, #ffffff, #ffffff, #ffffff);\r\n box-shadow: 0 0 15px #ffffff;\r\n overflow: hidden;\r\n}\r\n\r\n\/* nodos verticales *\/\r\n.nodo {\r\n position: absolute;\r\n width: 18px;\r\n height: 18px;\r\n border-radius: 50%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n\r\n background: radial-gradient(circle, #ffffff, #ffffff);\r\n box-shadow: 0 0 15px #ffae00;\r\n}\r\n\r\n\/* posici\u00f3n de los nodos *\/\r\n.nodo:nth-child(1){ top: 0; }\r\n.nodo:nth-child(2){ top: 50%; transform: translate(-50%, -50%); }\r\n.nodo:nth-child(3){ bottom: 0; }\r\n\r\n\/* paquete de datos vertical *\/\r\n.paquete {\r\n position: absolute;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n\r\n background: radial-gradient(circle, #fff, #ffd000, #ff6a00);\r\n box-shadow: 0 0 25px #ffae00;\r\n\r\n animation: transmitir 2.5s linear infinite;\r\n}\r\n\r\n\/* animaci\u00f3n vertical *\/\r\n@keyframes transmitir {\r\n from {\r\n top: -2%;\r\n }\r\n to {\r\n top: 102%;\r\n }\r\n}\r\n\r\n\/* efecto brillo tipo fibra \u00f3ptica vertical *\/\r\n.red::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 120deg,\r\n transparent,\r\n rgba(255,255,255,0.4),\r\n transparent\r\n );\r\n animation: brillo 2s linear infinite;\r\n}\r\n\r\n@keyframes brillo {\r\n from { transform: translateY(-100%); }\r\n to { transform: translateY(100%); }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"contenedor\">\r\n <div class=\"red\">\r\n <div class=\"nodo\"><\/div>\r\n <div class=\"nodo\"><\/div>\r\n <div class=\"nodo\"><\/div>\r\n <div class=\"paquete\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-068f20c e-flex e-con-boxed e-con e-parent\" data-id=\"068f20c\" data-element_type=\"container\" data-settings=\"{"background_background":"gradient"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd71971 elementor-invisible elementor-widget elementor-widget-html\" data-id=\"cd71971\" data-element_type=\"widget\" data-settings=\"{"_animation":"fadeInUp"}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n\/* =====================\r\n BUSCADOR\r\n===================== *\/\r\n.buscador {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n gap: 10px;\r\n margin-bottom: 15px;\r\n}\r\n\r\n.buscador input {\r\n padding: 10px;\r\n border: 1px solid rgb(242, 81, 17);\r\n border-radius: 8px;\r\n font-size: 14px;\r\n}\r\n\r\n\/* =====================\r\n TABLA DESKTOP\r\n===================== *\/\r\ntable {\r\n width: 100%;\r\n border-collapse: collapse;\r\n}\r\n\r\nth, td {\r\n padding: 10px;\r\n border-bottom: 1px solid #000000;\r\n text-align: left;\r\n font-size: 14px;\r\n vertical-align: top;\r\n background-color: #ffffff; \r\n}\r\n\r\nth {\r\n background: #000000;\r\n color: #ffffff;\r\n}\r\n\r\n\/* =====================\r\n COLORES POR COLUMNA\r\n===================== *\/\r\ntd.col-entidad {\r\n color: rgb(242, 81, 17);\r\n font-weight: 600;\r\n}\r\n\r\ntd.col-departamento { color: #000000; }\r\ntd.col-provincia,\r\ntd.col-distrito,\r\ntd.col-descripcion { color: #000000; }\r\n\r\n\/* =====================\r\n DESCRIPCI\u00d3N\r\n===================== *\/\r\n.desc-corta { display: inline; }\r\n.desc-completa { display: none; }\r\n\r\n.ver-mas {\r\n display: inline-block;\r\n margin-top: 6px;\r\n color: rgb(242, 69, 17);\r\n cursor: pointer;\r\n font-size: 13px;\r\n font-weight: 500;\r\n}\r\n\r\n\/* =====================\r\n BOT\u00d3N MOSTRAR M\u00c1S\r\n===================== *\/\r\n#toggleBtn {\r\n margin-top: 15px;\r\n padding: 10px 20px;\r\n border: none;\r\n background: rgb(242, 88, 17);\r\n color: #fff;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n#toggleBtn:hover {\r\n background: rgb(242, 152, 17);\r\n}\r\n\r\n\/* =====================\r\n RESPONSIVE M\u00d3VIL\r\n===================== *\/\r\n@media (max-width: 768px) {\r\n\r\n table { border: 0; }\r\n thead { display: none; }\r\n\r\n tbody tr {\r\n display: block;\r\n margin-bottom: 15px;\r\n border: 1px solid #ac3f00;\r\n border-radius: 12px;\r\n padding: 10px;\r\n background: #ffffff; \/* fondo blanco para m\u00f3vil agregado *\/\r\n }\r\n\r\n tbody td {\r\n display: block;\r\n padding: 6px 0;\r\n border: none;\r\n font-size: 14px;\r\n }\r\n\r\n tbody td::before {\r\n content: attr(data-label);\r\n display: block;\r\n font-weight: 600;\r\n font-size: 12px;\r\n color: #944612;\r\n margin-bottom: 2px;\r\n text-transform: uppercase;\r\n }\r\n\r\n #toggleBtn {\r\n width: 100%;\r\n }\r\n}\r\n<\/style>\r\n\r\n<div class=\"buscador\">\r\n <input type=\"text\" id=\"fDepartamento\" placeholder=\"Departamento\">\r\n <input type=\"text\" id=\"fProvincia\" placeholder=\"Provincia\">\r\n <input type=\"text\" id=\"fDistrito\" placeholder=\"Distrito\">\r\n<\/div>\r\n\r\n<table>\r\n <thead>\r\n <tr>\r\n <th>Entidad<\/th>\r\n <th>Departamento<\/th>\r\n <th>Provincia<\/th>\r\n <th>Distrito<\/th>\r\n <th>Descripci\u00f3n<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaProyectos\"><\/tbody>\r\n<\/table>\r\n\r\n<button id=\"toggleBtn\">Mostrar m\u00e1s<\/button>\r\n\r\n<script>\r\nlet proyectos = [];\r\nlet mostrarTodos = false;\r\n\r\nconst LIMITE = 10;\r\nconst LIMITE_DESC = 120;\r\n\r\n\/* =====================\r\n CARGAR JSON\r\n===================== *\/\r\nfetch(\"https:\/\/sermatelec.com\/wp-content\/uploads\/2026\/03\/proyectos-sermatelec-.json\")\r\n .then(res => res.json())\r\n .then(data => {\r\n proyectos = data.projects || [];\r\n renderTabla();\r\n })\r\n .catch(err => console.error(\"Error cargando proyectos:\", err));\r\n\r\n\r\nfunction normalizar(txt) {\r\n return (txt || \"\")\r\n .toLowerCase()\r\n .normalize(\"NFD\")\r\n .replace(\/[\\u0300-\\u036f]\/g, \"\")\r\n .trim();\r\n}\r\n\r\n\/* =====================\r\n DESCRIPCI\u00d3N\r\n===================== *\/\r\nfunction crearDescripcion(desc) {\r\n if (!desc || desc.length <= LIMITE_DESC) return desc || \"\";\r\n\r\n const corta = desc.slice(0, LIMITE_DESC) + \"...\";\r\n\r\n return `\r\n <span class=\"desc-corta\">${corta}<\/span>\r\n <span class=\"desc-completa\">${desc}<\/span>\r\n <span class=\"ver-mas\" onclick=\"toggleDesc(this)\">Mostrar m\u00e1s<\/span>\r\n `;\r\n}\r\n\r\nfunction toggleDesc(btn) {\r\n const td = btn.parentElement;\r\n const corta = td.querySelector(\".desc-corta\");\r\n const completa = td.querySelector(\".desc-completa\");\r\n\r\n if (completa.style.display === \"none\" || completa.style.display === \"\") {\r\n corta.style.display = \"none\";\r\n completa.style.display = \"inline\";\r\n btn.textContent = \"Ocultar\";\r\n } else {\r\n corta.style.display = \"inline\";\r\n completa.style.display = \"none\";\r\n btn.textContent = \"Mostrar m\u00e1s\";\r\n }\r\n}\r\n\r\n\/* =====================\r\n RENDER TABLA\r\n===================== *\/\r\nfunction renderTabla() {\r\n const depto = normalizar(fDepartamento.value);\r\n const prov = normalizar(fProvincia.value);\r\n const dist = normalizar(fDistrito.value);\r\n\r\n const filtrados = proyectos.filter(p =>\r\n (!depto || normalizar(p.departamento).includes(depto)) &&\r\n (!prov || normalizar(p.provincia).includes(prov)) &&\r\n (!dist || normalizar(p.distrito).includes(dist))\r\n );\r\n\r\n tablaProyectos.innerHTML = \"\";\r\n\r\n const visibles = mostrarTodos ? filtrados : filtrados.slice(0, LIMITE);\r\n\r\n visibles.forEach(p => {\r\n tablaProyectos.innerHTML += `\r\n <tr>\r\n <td class=\"col-entidad\" data-label=\"Entidad\">${p.entidad || \"\"}<\/td>\r\n <td class=\"col-departamento\" data-label=\"Departamento\">${p.departamento || \"\"}<\/td>\r\n <td class=\"col-provincia\" data-label=\"Provincia\">${p.provincia || \"\"}<\/td>\r\n <td class=\"col-distrito\" data-label=\"Distrito\">${p.distrito || \"\"}<\/td>\r\n <td class=\"col-descripcion\" data-label=\"Descripci\u00f3n\">\r\n ${crearDescripcion(p.descripcion)}\r\n <\/td>\r\n <\/tr>\r\n `;\r\n });\r\n\r\n toggleBtn.style.display = filtrados.length > LIMITE ? \"inline-block\" : \"none\";\r\n toggleBtn.textContent = mostrarTodos ? \"Ocultar\" : \"Mostrar m\u00e1s\";\r\n}\r\n\r\n\/* =====================\r\n EVENTOS\r\n===================== *\/\r\n[\"fDepartamento\",\"fProvincia\",\"fDistrito\"].forEach(id => {\r\n document.getElementById(id).addEventListener(\"input\", () => {\r\n mostrarTodos = false;\r\n renderTabla();\r\n });\r\n});\r\n\r\ntoggleBtn.addEventListener(\"click\", () => {\r\n mostrarTodos = !mostrarTodos;\r\n renderTabla();\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Super\u00e1ndonos en Nuestros Proyectos Transmisi\u00f3n Telecom Vertical Transparente Mapa de Proyectos Transmisi\u00f3n Telecom Vertical Transparente Entidad Departamento Provincia Distrito Descripci\u00f3n […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-337","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Proyectos El\u00e9ctricos y Telecomunicaciones | Sermatelec<\/title>\n<meta name=\"description\" content=\"Conoce los proyectos realizados por Sermatelec en servicios el\u00e9ctricos, telecomunicaciones e infraestructura tecnol\u00f3gica para empresas e instituciones.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Proyectos El\u00e9ctricos y Telecomunicaciones | Sermatelec\" \/>\n<meta property=\"og:description\" content=\"Conoce los proyectos realizados por Sermatelec en servicios el\u00e9ctricos, telecomunicaciones e infraestructura tecnol\u00f3gica para empresas e instituciones.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/\" \/>\n<meta property=\"og:site_name\" content=\"SERMATELEC - Servicios y Materiales El\u00e9ctricos\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-10T09:52:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sermatelec.com\/wp-content\/uploads\/2026\/03\/Captura-de-pantalla-2026-03-10-041330.png\" \/>\n\t<meta property=\"og:image:width\" content=\"514\" \/>\n\t<meta property=\"og:image:height\" content=\"387\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/\",\"url\":\"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/\",\"name\":\"Proyectos El\u00e9ctricos y Telecomunicaciones | Sermatelec\",\"isPartOf\":{\"@id\":\"https:\/\/sermatelec.com\/#website\"},\"datePublished\":\"2026-01-30T17:39:54+00:00\",\"dateModified\":\"2026-03-10T09:52:56+00:00\",\"description\":\"Conoce los proyectos realizados por Sermatelec en servicios el\u00e9ctricos, telecomunicaciones e infraestructura tecnol\u00f3gica para empresas e instituciones.\",\"breadcrumb\":{\"@id\":\"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sermatelec.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Proyectos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sermatelec.com\/#website\",\"url\":\"https:\/\/sermatelec.com\/\",\"name\":\"SERMATELEC - Servicios y Materiales El\u00e9ctricos\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/sermatelec.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sermatelec.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sermatelec.com\/#organization\",\"name\":\"SERMATELEC - Servicios y Materiales El\u00e9ctricos\",\"url\":\"https:\/\/sermatelec.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sermatelec.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sermatelec.com\/wp-content\/uploads\/2024\/06\/cropped-cropped-cropped-cropped-logo_convertido-fotor-bg-remover-20260130152318.png\",\"contentUrl\":\"https:\/\/sermatelec.com\/wp-content\/uploads\/2024\/06\/cropped-cropped-cropped-cropped-logo_convertido-fotor-bg-remover-20260130152318.png\",\"width\":397,\"height\":252,\"caption\":\"SERMATELEC - Servicios y Materiales El\u00e9ctricos\"},\"image\":{\"@id\":\"https:\/\/sermatelec.com\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Proyectos El\u00e9ctricos y Telecomunicaciones | Sermatelec","description":"Conoce los proyectos realizados por Sermatelec en servicios el\u00e9ctricos, telecomunicaciones e infraestructura tecnol\u00f3gica para empresas e instituciones.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/","og_locale":"en_US","og_type":"article","og_title":"Proyectos El\u00e9ctricos y Telecomunicaciones | Sermatelec","og_description":"Conoce los proyectos realizados por Sermatelec en servicios el\u00e9ctricos, telecomunicaciones e infraestructura tecnol\u00f3gica para empresas e instituciones.","og_url":"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/","og_site_name":"SERMATELEC - Servicios y Materiales El\u00e9ctricos","article_modified_time":"2026-03-10T09:52:56+00:00","og_image":[{"width":514,"height":387,"url":"https:\/\/sermatelec.com\/wp-content\/uploads\/2026\/03\/Captura-de-pantalla-2026-03-10-041330.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/","url":"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/","name":"Proyectos El\u00e9ctricos y Telecomunicaciones | Sermatelec","isPartOf":{"@id":"https:\/\/sermatelec.com\/#website"},"datePublished":"2026-01-30T17:39:54+00:00","dateModified":"2026-03-10T09:52:56+00:00","description":"Conoce los proyectos realizados por Sermatelec en servicios el\u00e9ctricos, telecomunicaciones e infraestructura tecnol\u00f3gica para empresas e instituciones.","breadcrumb":{"@id":"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sermatelec.com\/index.php\/proyectos-electricos-telecomunicaciones\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sermatelec.com\/"},{"@type":"ListItem","position":2,"name":"Proyectos"}]},{"@type":"WebSite","@id":"https:\/\/sermatelec.com\/#website","url":"https:\/\/sermatelec.com\/","name":"SERMATELEC - Servicios y Materiales El\u00e9ctricos","description":"","publisher":{"@id":"https:\/\/sermatelec.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sermatelec.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sermatelec.com\/#organization","name":"SERMATELEC - Servicios y Materiales El\u00e9ctricos","url":"https:\/\/sermatelec.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sermatelec.com\/#\/schema\/logo\/image\/","url":"https:\/\/sermatelec.com\/wp-content\/uploads\/2024\/06\/cropped-cropped-cropped-cropped-logo_convertido-fotor-bg-remover-20260130152318.png","contentUrl":"https:\/\/sermatelec.com\/wp-content\/uploads\/2024\/06\/cropped-cropped-cropped-cropped-logo_convertido-fotor-bg-remover-20260130152318.png","width":397,"height":252,"caption":"SERMATELEC - Servicios y Materiales El\u00e9ctricos"},"image":{"@id":"https:\/\/sermatelec.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/pages\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":115,"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/pages\/337\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/pages\/337\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/sermatelec.com\/index.php\/wp-json\/wp\/v2\/media?parent=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}