{"id":565,"date":"2024-02-09T10:51:12","date_gmt":"2024-02-09T10:51:12","guid":{"rendered":"https:\/\/startersites.io\/elementor\/smile-dent\/?page_id=565"},"modified":"2026-10-06T13:53:13","modified_gmt":"2026-10-06T18:53:13","slug":"home","status":"publish","type":"page","link":"https:\/\/serviciudad.gov.co\/wr\/","title":{"rendered":"Inicio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"565\" class=\"elementor elementor-565\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae46538 e-con-full e-flex e-con e-parent\" data-id=\"ae46538\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8af9e6 elementor-widget elementor-widget-shortcode\" data-id=\"d8af9e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8d9aca0 animated-slow e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"8d9aca0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;slideInRight&quot;,&quot;animation_delay&quot;:500}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6f9e21 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"b6f9e21\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     ACCESOS R\u00c1PIDOS SERVICIUDAD\r\n     ========================================= -->\r\n\r\n<div class=\"sc-accesos-rapidos\">\r\n\r\n    <!-- IMPRIMIR FACTURA -->\r\n    <a class=\"sc-acceso\"\r\n       href=\"https:\/\/www.serviciudad.gov.co\/impfacturas\/index.html\"\r\n       aria-label=\"Imprima aqu\u00ed su factura\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/BOTON_IMPRIMA_FACTURA.jpeg\"\r\n            alt=\"Imprima aqu\u00ed su factura\">\r\n    <\/a>\r\n\r\n\r\n    <!-- PSE -->\r\n    <a class=\"sc-acceso\"\r\n       href=\"http:\/\/www.serviciudadpse.com\/\"\r\n       aria-label=\"Pagos PSE\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/BOTON_PSE.jpeg\"\r\n            alt=\"Pagos PSE\">\r\n    <\/a>\r\n\r\n\r\n    <!-- PQRS -->\r\n    \r\n<a\r\n    class=\"sc-acceso\"\r\n    href=\"#\"\r\n    id=\"sc-pqrs-open\"\r\n    aria-label=\"PQRs\"\r\n>\r\n    <img decoding=\"async\"\r\n        src=\"https:\/\/lawngreen-wren-891982.hostingersite.com\/wp-content\/uploads\/2026\/06\/BOTON_PQR.jpeg\"\r\n        alt=\"PQRs\"\r\n    >\r\n<\/a>\r\n\r\n\r\n    <!-- MI DOSQUEBRADAS LIMPIA -->\r\n    <a class=\"sc-acceso\"\r\n       href=\"https:\/\/lawngreen-wren-891982.hostingersite.com\/category\/dosquebradas_limpia\/\"\r\n       aria-label=\"Mi Dosquebradas Limpia\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/mi-dosquebradas-limpia.jpg\"\r\n            alt=\"Mi Dosquebradas Limpia\">\r\n    <\/a>\r\n\r\n\r\n    <!-- SERVIKIDS -->\r\n    <a class=\"sc-acceso\"\r\n       href=\"https:\/\/youtube.com\/playlist?list=PLrmShm5rNDcCCeEWlv-L_29QHD6jhGsWJ\"\r\n       aria-label=\"Servikids\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/BOTON_SERVIKIDS.jpeg\"\r\n            alt=\"Servikids\">\r\n    <\/a>\r\n\r\n\r\n   \r\n    <!-- VERTIMIENTOS -->\r\n    <a class=\"sc-acceso\"\r\n       href=\"#\"\r\n       aria-label=\"Vertimientos\">\r\n\r\n        <img decoding=\"async\"\r\n            src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/BOTON_VERTIMIENTO.jpeg\"\r\n            alt=\"Vertimientos\">\r\n    <\/a>\r\n\r\n<\/div>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================\r\n   CONTENEDOR DE LOS ACCESOS\r\n   ========================================= *\/\r\n\r\n.sc-accesos-rapidos {\r\n    display: flex;\r\n\r\n    \/* Centra todos los botones *\/\r\n    justify-content: center;\r\n    align-items: center;\r\n\r\n    \/* Separaci\u00f3n entre botones *\/\r\n    gap: 25px;\r\n\r\n    \/* Espacio superior e inferior *\/\r\n    margin: 40px auto;\r\n\r\n    \/* Permite bajar botones a otra l\u00ednea\r\n       en pantallas peque\u00f1as *\/\r\n    flex-wrap: wrap;\r\n\r\n    \/* Evita que el contenido quede pegado\r\n       a los bordes en m\u00f3vil *\/\r\n    padding: 10px 20px;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   CADA BOT\u00d3N\r\n   ========================================= *\/\r\n\r\n.sc-acceso {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 130px;\r\n    height: 130px;\r\n\r\n    border-radius: 50%;\r\n\r\n    \/* Quitamos decoraci\u00f3n de los enlaces *\/\r\n    text-decoration: none !important;\r\n\r\n    \/* Sombra inicial:\r\n       hace que el bot\u00f3n ya parezca elevado\r\n       incluso sin pasar el mouse *\/\r\n    box-shadow:\r\n        0 8px 18px rgba(0, 0, 0, 0.18),\r\n        0 3px 6px rgba(0, 0, 0, 0.10);\r\n\r\n    \/* Necesario para algunos efectos *\/\r\n    position: relative;\r\n\r\n    \/* Animaci\u00f3n suave *\/\r\n    transition:\r\n        transform 0.30s ease,\r\n        box-shadow 0.30s ease,\r\n        filter 0.30s ease;\r\n\r\n    \/* Mejora visual de la animaci\u00f3n *\/\r\n    will-change: transform;\r\n\r\n    \/* Evita comportamientos raros *\/\r\n    overflow: visible;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IMAGEN DEL BOT\u00d3N\r\n   ========================================= *\/\r\n\r\n.sc-acceso img {\r\n    width: 120px;\r\n    height: 120px;\r\n\r\n    border-radius: 50%;\r\n\r\n    \/* Conserva la imagen completa *\/\r\n    object-fit: contain;\r\n\r\n    background: #ffffff;\r\n\r\n    display: block;\r\n\r\n    \/* Evita que otros estilos de WordPress\r\n       interfieran con la imagen *\/\r\n    margin: 0 !important;\r\n\r\n    transition:\r\n        transform 0.30s ease,\r\n        filter 0.30s ease;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   EFECTO AL PASAR EL MOUSE\r\n   ========================================= *\/\r\n\r\n.sc-acceso:hover {\r\n\r\n    \/* Sube ligeramente el bot\u00f3n\r\n       y aumenta un poco su tama\u00f1o *\/\r\n    transform: translateY(-8px) scale(1.06);\r\n\r\n    \/* Sombra m\u00e1s profunda al elevarse *\/\r\n    box-shadow:\r\n        0 16px 30px rgba(0, 0, 0, 0.25),\r\n        0 7px 12px rgba(0, 0, 0, 0.14);\r\n\r\n    \/* Peque\u00f1o aumento de luminosidad *\/\r\n    filter: brightness(1.03);\r\n}\r\n\r\n\r\n\/* Zoom MUY ligero de la imagen *\/\r\n.sc-acceso:hover img {\r\n    transform: scale(1.02);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   EFECTO AL HACER CLIC\r\n   ========================================= *\/\r\n\r\n.sc-acceso:active {\r\n\r\n    \/* Parece que el bot\u00f3n se presiona *\/\r\n    transform: translateY(-2px) scale(0.98);\r\n\r\n    box-shadow:\r\n        0 6px 12px rgba(0, 0, 0, 0.20);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ACCESIBILIDAD CON TECLADO\r\n   ========================================= *\/\r\n\r\n.sc-acceso:focus-visible {\r\n    outline: 3px solid #f28c00;\r\n    outline-offset: 5px;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TABLETS\r\n   ========================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n    .sc-accesos-rapidos {\r\n        gap: 22px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   CELULARES\r\n   ========================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n    .sc-accesos-rapidos {\r\n        gap: 18px;\r\n        margin: 25px auto;\r\n        padding: 10px;\r\n    }\r\n\r\n    .sc-acceso,\r\n    .sc-acceso img {\r\n        width: 100px;\r\n        height: 100px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   RESPETAR USUARIOS QUE PREFIEREN\r\n   MENOS ANIMACIONES\r\n   ========================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .sc-acceso,\r\n    .sc-acceso img {\r\n        transition: none;\r\n    }\r\n\r\n    .sc-acceso:hover {\r\n        transform: none;\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- =====================================================\r\n     MODAL INFORMATIVO PQRs\r\n====================================================== -->\r\n\r\n<div\r\n    class=\"sc-pqrs-modal\"\r\n    id=\"sc-pqrs-modal\"\r\n    aria-hidden=\"true\"\r\n>\r\n\r\n    <div\r\n        class=\"sc-pqrs-overlay\"\r\n        id=\"sc-pqrs-overlay\"\r\n    ><\/div>\r\n\r\n\r\n    <div\r\n        class=\"sc-pqrs-box\"\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby=\"sc-pqrs-title\"\r\n    >\r\n\r\n        <!-- BOT\u00d3N CERRAR -->\r\n        <button\r\n            type=\"button\"\r\n            class=\"sc-pqrs-close\"\r\n            id=\"sc-pqrs-close\"\r\n            aria-label=\"Cerrar aviso\"\r\n        >\r\n            \u00d7\r\n        <\/button>\r\n\r\n\r\n        <!-- ICONO -->\r\n        <div class=\"sc-pqrs-icon\">\r\n            !\r\n        <\/div>\r\n\r\n\r\n        <!-- T\u00cdTULO -->\r\n        <h2 id=\"sc-pqrs-title\">\r\n            Informaci\u00f3n importante\r\n        <\/h2>\r\n\r\n\r\n        <div class=\"sc-pqrs-divider\"><\/div>\r\n\r\n\r\n        <!-- TEXTO -->\r\n        <p class=\"sc-pqrs-text\">\r\n\r\n            En cumplimiento del derecho fundamental de petici\u00f3n\r\n            garantizado en el art\u00edculo 23 de la Constituci\u00f3n Pol\u00edtica\r\n            de Colombia y regulado por la Ley 1755 de 2015, se informa\r\n            que todas las peticiones, quejas, reclamos y sugerencias\r\n            (PQRS) presentadas o radicadas con posterioridad a las\r\n            <strong>4:01 p. m. de lunes a jueves y los d\u00edas viernes Despues de las las 3:01 pm<\/strong>, o durante\r\n            d\u00edas no h\u00e1biles, se entender\u00e1n recibidas y dar\u00e1n inicio\r\n            formal a su tr\u00e1mite reglamentario a partir del primer\r\n            minuto del d\u00eda h\u00e1bil siguiente dentro del horario de\r\n            atenci\u00f3n laboral.\r\n\r\n        <\/p>\r\n\r\n\r\n        <p class=\"sc-pqrs-text\">\r\n\r\n            En consecuencia, los t\u00e9rminos legales previstos para dar\r\n            respuesta comenzar\u00e1n a correr desde dicha fecha.\r\n\r\n        <\/p>\r\n\r\n\r\n        <!-- DESTACADO -->\r\n        <div class=\"sc-pqrs-notice\">\r\n\r\n            <span class=\"sc-pqrs-notice-icon\">\r\n                \ud83d\udd52\r\n            <\/span>\r\n\r\n            <span>\r\n                Tenga en cuenta el horario de radicaci\u00f3n antes de\r\n                continuar con su solicitud.\r\n            <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- BOTONES -->\r\n        <div class=\"sc-pqrs-actions\">\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"sc-pqrs-cancel\"\r\n                id=\"sc-pqrs-cancel\"\r\n            >\r\n                Cancelar\r\n            <\/button>\r\n\r\n\r\n            <a\r\n                class=\"sc-pqrs-continue\"\r\n                href=\"https:\/\/saia-serviciudad.netsaia.com\/ws\/registro_pqrsd\/index.html\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n            >\r\n                Ir a PQRs\r\n                <span>\u2192<\/span>\r\n            <\/a>\r\n\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\r\n\/* =====================================================\r\n   MODAL PQRs - AISLADO\r\n====================================================== *\/\r\n\r\n.sc-pqrs-modal,\r\n.sc-pqrs-modal * {\r\n    box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* MODAL COMPLETO *\/\r\n\r\n.sc-pqrs-modal {\r\n\r\n    position: fixed;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 999999;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    padding: 20px;\r\n\r\n    visibility: hidden;\r\n\r\n    opacity: 0;\r\n\r\n    pointer-events: none;\r\n\r\n    transition:\r\n        opacity .25s ease,\r\n        visibility .25s ease;\r\n\r\n}\r\n\r\n\r\n\/* MODAL ABIERTO *\/\r\n\r\n.sc-pqrs-modal.sc-pqrs-active {\r\n\r\n    visibility: visible;\r\n\r\n    opacity: 1;\r\n\r\n    pointer-events: auto;\r\n\r\n}\r\n\r\n\r\n\/* FONDO OSCURO *\/\r\n\r\n.sc-pqrs-overlay {\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    background:\r\n        rgba(5, 25, 45, .72);\r\n\r\n    backdrop-filter:\r\n        blur(5px);\r\n\r\n}\r\n\r\n\r\n\/* CAJA *\/\r\n\r\n.sc-pqrs-box {\r\n\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    width: 100%;\r\n\r\n    max-width: 680px;\r\n\r\n    max-height: 90vh;\r\n\r\n    overflow-y: auto;\r\n\r\n    padding:\r\n        42px\r\n        42px\r\n        36px;\r\n\r\n    background: #ffffff;\r\n\r\n    border-radius: 22px;\r\n\r\n    box-shadow:\r\n        0 28px 80px\r\n        rgba(0, 0, 0, .30);\r\n\r\n    transform:\r\n        translateY(20px)\r\n        scale(.97);\r\n\r\n    transition:\r\n        transform .25s ease;\r\n\r\n}\r\n\r\n\r\n\/* ANIMACI\u00d3N *\/\r\n\r\n.sc-pqrs-modal.sc-pqrs-active\r\n.sc-pqrs-box {\r\n\r\n    transform:\r\n        translateY(0)\r\n        scale(1);\r\n\r\n}\r\n\r\n\r\n\/* BOT\u00d3N X *\/\r\n\r\n.sc-pqrs-close {\r\n\r\n    position: absolute;\r\n\r\n    top: 14px;\r\n    right: 17px;\r\n\r\n    width: 38px;\r\n    height: 38px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    padding: 0;\r\n\r\n    border: none;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: #f1f5f7;\r\n\r\n    color: #52636f;\r\n\r\n    font-size: 27px;\r\n\r\n    line-height: 1;\r\n\r\n    cursor: pointer;\r\n\r\n    transition: .2s ease;\r\n\r\n}\r\n\r\n\r\n.sc-pqrs-close:hover {\r\n\r\n    background: #e6edf1;\r\n\r\n    color: #173e5b;\r\n\r\n}\r\n\r\n\r\n\/* ICONO *\/\r\n\r\n.sc-pqrs-icon {\r\n\r\n    width: 62px;\r\n    height: 62px;\r\n\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    margin:\r\n        0\r\n        auto\r\n        17px;\r\n\r\n    border-radius: 18px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #087fba,\r\n            #075990\r\n        );\r\n\r\n    color: #ffffff;\r\n\r\n    font-size: 34px;\r\n\r\n    font-weight: 800;\r\n\r\n    box-shadow:\r\n        0 12px 25px\r\n        rgba(8, 127, 186, .22);\r\n\r\n}\r\n\r\n\r\n\/* TITULO *\/\r\n\r\n.sc-pqrs-box h2 {\r\n\r\n    margin:\r\n        0\r\n        0\r\n        16px;\r\n\r\n    color: #153e5b;\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 26px;\r\n\r\n    font-weight: 800;\r\n\r\n    text-align: center;\r\n\r\n}\r\n\r\n\r\n\/* LINEA *\/\r\n\r\n.sc-pqrs-divider {\r\n\r\n    width: 70px;\r\n\r\n    height: 4px;\r\n\r\n    margin:\r\n        0\r\n        auto\r\n        25px;\r\n\r\n    background: #95c11f;\r\n\r\n    border-radius: 10px;\r\n\r\n}\r\n\r\n\r\n\/* TEXTO *\/\r\n\r\n.sc-pqrs-text {\r\n\r\n    margin:\r\n        0\r\n        0\r\n        16px;\r\n\r\n    color: #374957;\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 15px;\r\n\r\n    line-height: 1.7;\r\n\r\n    text-align: justify;\r\n\r\n}\r\n\r\n\r\n.sc-pqrs-text strong {\r\n\r\n    color: #173e5b;\r\n\r\n}\r\n\r\n\r\n\/* AVISO *\/\r\n\r\n.sc-pqrs-notice {\r\n\r\n    display: flex;\r\n\r\n    align-items: flex-start;\r\n\r\n    gap: 12px;\r\n\r\n    margin-top: 22px;\r\n\r\n    padding: 16px;\r\n\r\n    background: #f3f9fc;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(8, 127, 186, .18);\r\n\r\n    border-left:\r\n        4px solid #087fba;\r\n\r\n    border-radius: 11px;\r\n\r\n    color: #355366;\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 13px;\r\n\r\n    line-height: 1.55;\r\n\r\n}\r\n\r\n\r\n.sc-pqrs-notice-icon {\r\n\r\n    flex-shrink: 0;\r\n\r\n    font-size: 20px;\r\n\r\n}\r\n\r\n\r\n\/* BOTONES *\/\r\n\r\n.sc-pqrs-actions {\r\n\r\n    display: flex;\r\n\r\n    justify-content: flex-end;\r\n\r\n    gap: 12px;\r\n\r\n    margin-top: 27px;\r\n\r\n}\r\n\r\n\r\n\/* CANCELAR *\/\r\n\r\n.sc-pqrs-cancel {\r\n\r\n    min-height: 48px;\r\n\r\n    padding:\r\n        11px\r\n        24px;\r\n\r\n    border:\r\n        1px solid #cbd5db;\r\n\r\n    border-radius: 10px;\r\n\r\n    background: #ffffff;\r\n\r\n    color: #566875;\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 700;\r\n\r\n    cursor: pointer;\r\n\r\n    transition: .2s ease;\r\n\r\n}\r\n\r\n\r\n.sc-pqrs-cancel:hover {\r\n\r\n    background: #f4f7f8;\r\n\r\n}\r\n\r\n\r\n\/* CONTINUAR *\/\r\n\r\n.sc-pqrs-continue {\r\n\r\n    min-height: 48px;\r\n\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 9px;\r\n\r\n    padding:\r\n        11px\r\n        26px;\r\n\r\n    border-radius: 10px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #087fba,\r\n            #075b91\r\n        );\r\n\r\n    color: #ffffff !important;\r\n\r\n    font-family:\r\n        Arial,\r\n        sans-serif;\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 700;\r\n\r\n    text-decoration: none !important;\r\n\r\n    box-shadow:\r\n        0 8px 20px\r\n        rgba(8, 127, 186, .20);\r\n\r\n    transition:\r\n        transform .2s ease,\r\n        box-shadow .2s ease;\r\n\r\n}\r\n\r\n\r\n.sc-pqrs-continue:hover {\r\n\r\n    color: #ffffff !important;\r\n\r\n    transform:\r\n        translateY(-2px);\r\n\r\n    box-shadow:\r\n        0 12px 25px\r\n        rgba(8, 127, 186, .28);\r\n\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   RESPONSIVE\r\n====================================================== *\/\r\n\r\n@media(max-width:600px) {\r\n\r\n    .sc-pqrs-modal {\r\n\r\n        padding: 14px;\r\n\r\n    }\r\n\r\n\r\n    .sc-pqrs-box {\r\n\r\n        padding:\r\n            38px\r\n            22px\r\n            25px;\r\n\r\n        border-radius: 17px;\r\n\r\n    }\r\n\r\n\r\n    .sc-pqrs-box h2 {\r\n\r\n        font-size: 22px;\r\n\r\n    }\r\n\r\n\r\n    .sc-pqrs-text {\r\n\r\n        font-size: 14px;\r\n\r\n        text-align: left;\r\n\r\n    }\r\n\r\n\r\n    .sc-pqrs-actions {\r\n\r\n        flex-direction: column-reverse;\r\n\r\n    }\r\n\r\n\r\n    .sc-pqrs-cancel,\r\n    .sc-pqrs-continue {\r\n\r\n        width: 100%;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n\r\n    const openButton =\r\n        document.getElementById(\r\n            \"sc-pqrs-open\"\r\n        );\r\n\r\n\r\n    const modal =\r\n        document.getElementById(\r\n            \"sc-pqrs-modal\"\r\n        );\r\n\r\n\r\n    const closeButton =\r\n        document.getElementById(\r\n            \"sc-pqrs-close\"\r\n        );\r\n\r\n\r\n    const cancelButton =\r\n        document.getElementById(\r\n            \"sc-pqrs-cancel\"\r\n        );\r\n\r\n\r\n    const overlay =\r\n        document.getElementById(\r\n            \"sc-pqrs-overlay\"\r\n        );\r\n\r\n\r\n    if (\r\n        !openButton ||\r\n        !modal\r\n    ) {\r\n        return;\r\n    }\r\n\r\n\r\n    function abrirModal(event) {\r\n\r\n        if (event) {\r\n            event.preventDefault();\r\n        }\r\n\r\n\r\n        modal.classList.add(\r\n            \"sc-pqrs-active\"\r\n        );\r\n\r\n\r\n        modal.setAttribute(\r\n            \"aria-hidden\",\r\n            \"false\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"hidden\";\r\n\r\n\r\n        setTimeout(\r\n            function () {\r\n\r\n                closeButton.focus();\r\n\r\n            },\r\n            100\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function cerrarModal() {\r\n\r\n        modal.classList.remove(\r\n            \"sc-pqrs-active\"\r\n        );\r\n\r\n\r\n        modal.setAttribute(\r\n            \"aria-hidden\",\r\n            \"true\"\r\n        );\r\n\r\n\r\n        document.body.style.overflow =\r\n            \"\";\r\n\r\n\r\n        openButton.focus();\r\n\r\n    }\r\n\r\n\r\n    openButton.addEventListener(\r\n        \"click\",\r\n        abrirModal\r\n    );\r\n\r\n\r\n    closeButton.addEventListener(\r\n        \"click\",\r\n        cerrarModal\r\n    );\r\n\r\n\r\n    cancelButton.addEventListener(\r\n        \"click\",\r\n        cerrarModal\r\n    );\r\n\r\n\r\n    overlay.addEventListener(\r\n        \"click\",\r\n        cerrarModal\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"keydown\",\r\n        function (event) {\r\n\r\n            if (\r\n                event.key === \"Escape\" &&\r\n                modal.classList.contains(\r\n                    \"sc-pqrs-active\"\r\n                )\r\n            ) {\r\n\r\n                cerrarModal();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n})();\r\n\r\n<\/script>\r\n\r\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-98218b5 e-con-full e-flex e-con e-parent\" data-id=\"98218b5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f687119 elementor-widget elementor-widget-html\" data-id=\"f687119\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     TARJETAS INTERACTIVAS DE SERVICIOS - SERVICIUDAD\r\n\r\n     INCLUYE:\r\n     - Acueducto\r\n     - Aseo\r\n     - Alcantarillado\r\n     - Efectos hover en computador\r\n     - Apertura mediante clic en celular\r\n     - Dise\u00f1o responsive\r\n     - HTML, CSS y JavaScript en un solo bloque\r\n========================================================== -->\r\n\r\n\r\n<section\r\n  id=\"sc-servicios-interactivos\"\r\n  aria-label=\"Servicios de Serviciudad\"\r\n>\r\n\r\n  <!-- =====================================================\r\n       ENCABEZADO DE LA SECCI\u00d3N\r\n       Puedes borrar este bloque si no quieres el t\u00edtulo.\r\n  ====================================================== -->\r\n\r\n  <div class=\"sc-servicios-encabezado\">\r\n    <span class=\"sc-servicios-etiqueta\">\r\n      Nuestros servicios\r\n    <\/span>\r\n\r\n    <h2>\r\n      Trabajamos cada d\u00eda por Dosquebradas\r\n    <\/h2>\r\n\r\n    <p>\r\n      Conoce nuestros servicios, consulta informaci\u00f3n\r\n      y accede r\u00e1pidamente a los tr\u00e1mites disponibles.\r\n    <\/p>\r\n  <\/div>\r\n\r\n\r\n  <!-- =====================================================\r\n       CONTENEDOR DE LAS TRES TARJETAS\r\n  ====================================================== -->\r\n\r\n  <div class=\"sc-servicios-grid\">\r\n\r\n\r\n    <!-- ===================================================\r\n         TARJETA 1: ACUEDUCTO\r\n    ==================================================== -->\r\n\r\n    <article\r\n      class=\"sc-servicio-card\"\r\n      tabindex=\"0\"\r\n      aria-label=\"Informaci\u00f3n del servicio de Acueducto\"\r\n    >\r\n\r\n      <!--\r\n        IMPORTANTE:\r\n        Reemplaza PEGA_AQUI_URL_IMAGEN_ACUEDUCTO\r\n        por la URL real de la imagen en WordPress.\r\n      -->\r\n\r\n      <img decoding=\"async\"\r\n        class=\"sc-servicio-imagen\"\r\n        src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/755d9a2a-9f40-4234-ba01-540929ab36bf.jpeg\"\r\n        alt=\"Servicio de Acueducto de Serviciudad\"\r\n        loading=\"lazy\"\r\n      >\r\n\r\n\r\n      <!-- Degradado permanente para facilitar la lectura -->\r\n\r\n      <div class=\"sc-servicio-sombra\"><\/div>\r\n\r\n\r\n      <!-- Estado visible en la parte superior -->\r\n\r\n      <div class=\"sc-servicio-estado\">\r\n        <span class=\"sc-estado-punto\"><\/span>\r\n        Servicio disponible\r\n      <\/div>\r\n\r\n\r\n      <!-- Contenido visible cuando la tarjeta est\u00e1 cerrada -->\r\n\r\n      <div class=\"sc-servicio-resumen\">\r\n\r\n        <span class=\"sc-servicio-icono\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path\r\n              d=\"M12 2.5S6.5 9 6.5 14a5.5 5.5 0 0 0 11 0C17.5 9 12 2.5 12 2.5Z\"\r\n            ><\/path>\r\n            <path d=\"M9.5 15.5a2.8 2.8 0 0 0 2.5 1.7\"><\/path>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <div>\r\n          <span class=\"sc-servicio-numero\">01<\/span>\r\n          <h3>Acueducto<\/h3>\r\n          <p>Agua potable para nuestra ciudad.<\/p>\r\n        <\/div>\r\n\r\n        <span class=\"sc-indicador-abrir\" aria-hidden=\"true\">\r\n          +\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n      <!-- Informaci\u00f3n que aparece con hover o clic -->\r\n\r\n      <div class=\"sc-servicio-detalle\">\r\n\r\n        <div class=\"sc-detalle-contenido\">\r\n\r\n          <span class=\"sc-detalle-icono\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 2.5S6.5 9 6.5 14a5.5 5.5 0 0 0 11 0C17.5 9 12 2.5 12 2.5Z\"\r\n              ><\/path>\r\n              <path d=\"M9.5 15.5a2.8 2.8 0 0 0 2.5 1.7\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <h3>Acueducto<\/h3>\r\n\r\n          <p>\r\n            Prestamos el servicio de distribuci\u00f3n de agua potable,\r\n            trabajando por la continuidad, calidad y cobertura.\r\n          <\/p>\r\n\r\n          <div class=\"sc-servicio-indicadores\">\r\n            <span>\ud83d\udca7 Agua potable<\/span>\r\n            <span>\ud83d\udccd Dosquebradas<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"sc-servicio-acciones\">\r\n\r\n            <!-- Enlace conocido para reportar una novedad -->\r\n\r\n            <a\r\n              class=\"sc-accion sc-accion-principal\"\r\n              href=\"https:\/\/saia-serviciudad.netsaia.com\/ws\/registro_pqrsd\/index.html\"\r\n              target=\"_blank\"\r\n              rel=\"noopener noreferrer\"\r\n            >\r\n              Reportar novedad\r\n            <\/a>\r\n\r\n            <!-- Reemplaza # por el enlace correspondiente -->\r\n\r\n            \r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- ===================================================\r\n         TARJETA 2: ASEO\r\n    ==================================================== -->\r\n\r\n    <article\r\n      class=\"sc-servicio-card\"\r\n      tabindex=\"0\"\r\n      aria-label=\"Informaci\u00f3n del servicio de Aseo\"\r\n    >\r\n\r\n      <!--\r\n        Reemplaza PEGA_AQUI_URL_IMAGEN_ASEO\r\n        por la URL real de la imagen.\r\n      -->\r\n\r\n      <img decoding=\"async\"\r\n        class=\"sc-servicio-imagen\"\r\n        src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/9.jpeg\"\r\n        alt=\"Servicio de Aseo de Serviciudad\"\r\n        loading=\"lazy\"\r\n      >\r\n\r\n      <div class=\"sc-servicio-sombra\"><\/div>\r\n\r\n      <div class=\"sc-servicio-estado\">\r\n        <span class=\"sc-estado-punto\"><\/span>\r\n        Servicio disponible\r\n      <\/div>\r\n\r\n      <div class=\"sc-servicio-resumen\">\r\n\r\n        <span class=\"sc-servicio-icono\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M8 3h8\"><\/path>\r\n            <path d=\"M10 3v3\"><\/path>\r\n            <path d=\"M14 3v3\"><\/path>\r\n            <path d=\"M7 6h10l-1 15H8L7 6Z\"><\/path>\r\n            <path d=\"M4 8h3\"><\/path>\r\n            <path d=\"M17 8h3\"><\/path>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <div>\r\n          <span class=\"sc-servicio-numero\">02<\/span>\r\n          <h3>Aseo<\/h3>\r\n          <p>Una ciudad m\u00e1s limpia y sostenible.<\/p>\r\n        <\/div>\r\n\r\n        <span class=\"sc-indicador-abrir\" aria-hidden=\"true\">\r\n          +\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"sc-servicio-detalle\">\r\n\r\n        <div class=\"sc-detalle-contenido\">\r\n\r\n          <span class=\"sc-detalle-icono\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M8 3h8\"><\/path>\r\n              <path d=\"M10 3v3\"><\/path>\r\n              <path d=\"M14 3v3\"><\/path>\r\n              <path d=\"M7 6h10l-1 15H8L7 6Z\"><\/path>\r\n              <path d=\"M4 8h3\"><\/path>\r\n              <path d=\"M17 8h3\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <h3>Aseo<\/h3>\r\n\r\n          <p>\r\n            Realizamos recolecci\u00f3n y gesti\u00f3n de residuos,\r\n            limpieza urbana y actividades para conservar\r\n            una ciudad limpia.\r\n          <\/p>\r\n\r\n          <div class=\"sc-servicio-indicadores\">\r\n            <span>\u267b\ufe0f Gesti\u00f3n de residuos<\/span>\r\n            <span>\ud83d\ude9b Rutas de recolecci\u00f3n<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"sc-servicio-acciones\">\r\n\r\n            <a\r\n              class=\"sc-accion sc-accion-principal\"\r\n              href=\"https:\/\/saia-serviciudad.netsaia.com\/ws\/registro_pqrsd\/index.html\"\r\n              target=\"_blank\"\r\n              rel=\"noopener noreferrer\"\r\n            >\r\n              Reportar novedad\r\n            <\/a>\r\n\r\n            <!-- Reemplaza # por la p\u00e1gina de rutas -->\r\n\r\n          \r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/article>\r\n\r\n\r\n    <!-- ===================================================\r\n         TARJETA 3: ALCANTARILLADO\r\n    ==================================================== -->\r\n\r\n    <article\r\n      class=\"sc-servicio-card\"\r\n      tabindex=\"0\"\r\n      aria-label=\"Informaci\u00f3n del servicio de Alcantarillado\"\r\n    >\r\n\r\n      <!--\r\n        Reemplaza PEGA_AQUI_URL_IMAGEN_ALCANTARILLADO\r\n        por la URL real de la imagen.\r\n      -->\r\n\r\n      <img decoding=\"async\"\r\n        class=\"sc-servicio-imagen\"\r\n        src=\"https:\/\/serviciudad.gov.co\/wr\/\/wp-content\/uploads\/2026\/08\/PHOTO-2026-07-28-11-57-162.jpg\"\r\n        alt=\"Servicio de Alcantarillado de Serviciudad\"\r\n        loading=\"lazy\"\r\n      >\r\n\r\n      <div class=\"sc-servicio-sombra\"><\/div>\r\n\r\n      <div class=\"sc-servicio-estado\">\r\n        <span class=\"sc-estado-punto\"><\/span>\r\n        Servicio disponible\r\n      <\/div>\r\n\r\n      <div class=\"sc-servicio-resumen\">\r\n\r\n        <span class=\"sc-servicio-icono\" aria-hidden=\"true\">\r\n          <svg viewBox=\"0 0 24 24\">\r\n            <path d=\"M4 5h9v5\"><\/path>\r\n            <path d=\"M13 10h7v9\"><\/path>\r\n            <path d=\"M7 5v5h6\"><\/path>\r\n            <path d=\"M4 19h16\"><\/path>\r\n            <path d=\"M6 15c1.2 1.3 2.4 1.3 3.6 0s2.4-1.3 3.6 0 2.4 1.3 3.6 0\"><\/path>\r\n          <\/svg>\r\n        <\/span>\r\n\r\n        <div>\r\n          <span class=\"sc-servicio-numero\">03<\/span>\r\n          <h3>Alcantarillado<\/h3>\r\n          <p>Infraestructura para una ciudad saludable.<\/p>\r\n        <\/div>\r\n\r\n        <span class=\"sc-indicador-abrir\" aria-hidden=\"true\">\r\n          +\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"sc-servicio-detalle\">\r\n\r\n        <div class=\"sc-detalle-contenido\">\r\n\r\n          <span class=\"sc-detalle-icono\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 5h9v5\"><\/path>\r\n              <path d=\"M13 10h7v9\"><\/path>\r\n              <path d=\"M7 5v5h6\"><\/path>\r\n              <path d=\"M4 19h16\"><\/path>\r\n              <path d=\"M6 15c1.2 1.3 2.4 1.3 3.6 0s2.4-1.3 3.6 0 2.4 1.3 3.6 0\"><\/path>\r\n            <\/svg>\r\n          <\/span>\r\n\r\n          <h3>Alcantarillado<\/h3>\r\n\r\n          <p>\r\n            Gestionamos las redes de alcantarillado,\r\n            mantenimientos y obras necesarias para la correcta\r\n            conducci\u00f3n de las aguas residuales.\r\n          <\/p>\r\n\r\n          <div class=\"sc-servicio-indicadores\">\r\n            <span>\ud83d\udd27 Mantenimiento<\/span>\r\n            <span>\ud83c\udfd7\ufe0f Infraestructura<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"sc-servicio-acciones\">\r\n\r\n            <a\r\n              class=\"sc-accion sc-accion-principal\"\r\n              href=\"https:\/\/saia-serviciudad.netsaia.com\/ws\/registro_pqrsd\/index.html\"\r\n              target=\"_blank\"\r\n              rel=\"noopener noreferrer\"\r\n            >\r\n              Reportar novedad\r\n            <\/a>\r\n\r\n            <!-- Reemplaza # por el enlace de proyectos -->\r\n\r\n           \r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/article>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<style>\r\n\/* =========================================================\r\n   1. VARIABLES GENERALES\r\n   Cambia aqu\u00ed los colores del componente completo.\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos{\r\n  --sc-azul:#087db8;\r\n  --sc-azul-oscuro:#052b5c;\r\n  --sc-celeste:#22b6d9;\r\n  --sc-verde:#83bd1a;\r\n  --sc-blanco:#ffffff;\r\n  --sc-texto:#24364b;\r\n  --sc-fondo:#f4f8fb;\r\n\r\n  width:100%;\r\n  max-width:1240px;\r\n  margin:35px auto;\r\n  padding:20px;\r\n\r\n  font-family:inherit;\r\n}\r\n\r\n\r\n\/* Evita que el componente afecte otros elementos. *\/\r\n\r\n#sc-servicios-interactivos,\r\n#sc-servicios-interactivos *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   2. ENCABEZADO\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicios-encabezado{\r\n  max-width:760px;\r\n  margin:0 auto 34px;\r\n  text-align:center;\r\n}\r\n\r\n#sc-servicios-interactivos .sc-servicios-etiqueta{\r\n  display:inline-flex;\r\n  align-items:center;\r\n\r\n  margin-bottom:11px;\r\n  padding:7px 14px;\r\n\r\n  background:rgba(8,125,184,0.10);\r\n  color:var(--sc-azul);\r\n\r\n  border:1px solid rgba(8,125,184,0.16);\r\n  border-radius:999px;\r\n\r\n  font-size:13px;\r\n  font-weight:800;\r\n  letter-spacing:0.7px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n#sc-servicios-interactivos .sc-servicios-encabezado h2{\r\n  margin:0 0 12px;\r\n\r\n  color:var(--sc-azul-oscuro);\r\n\r\n  font-size:clamp(27px,4vw,42px);\r\n  font-weight:850;\r\n  line-height:1.15;\r\n}\r\n\r\n#sc-servicios-interactivos .sc-servicios-encabezado p{\r\n  margin:0;\r\n\r\n  color:#607086;\r\n\r\n  font-size:16px;\r\n  line-height:1.65;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   3. DISTRIBUCI\u00d3N DE LAS TARJETAS\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicios-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,minmax(0,1fr));\r\n  gap:24px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   4. TARJETA GENERAL\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-card{\r\n  position:relative;\r\n  isolation:isolate;\r\n\r\n  min-height:390px;\r\n  overflow:hidden;\r\n\r\n  border:1px solid rgba(8,125,184,0.10);\r\n  border-radius:28px;\r\n  outline:none;\r\n\r\n  background:var(--sc-azul-oscuro);\r\n\r\n  box-shadow:\r\n    0 18px 38px rgba(5,43,92,0.15);\r\n\r\n  cursor:pointer;\r\n\r\n  transition:\r\n    transform 0.38s cubic-bezier(.2,.8,.25,1),\r\n    box-shadow 0.38s ease;\r\n}\r\n\r\n\r\n\/* La tarjeta sube suavemente. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-card:hover,\r\n#sc-servicios-interactivos .sc-servicio-card:focus-visible,\r\n#sc-servicios-interactivos .sc-servicio-card.sc-activa{\r\n  transform:translateY(-10px);\r\n\r\n  box-shadow:\r\n    0 26px 55px rgba(5,43,92,0.25);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   5. IMAGEN DE FONDO\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-imagen{\r\n  position:absolute;\r\n  inset:0;\r\n\r\n  width:100%;\r\n  height:100%;\r\n\r\n  object-fit:cover;\r\n  object-position:center;\r\n\r\n  transition:\r\n    transform 0.75s cubic-bezier(.2,.8,.25,1),\r\n    filter 0.45s ease;\r\n}\r\n\r\n\r\n\/* Zoom suave cuando se abre. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-card:hover\r\n.sc-servicio-imagen,\r\n#sc-servicios-interactivos .sc-servicio-card:focus-within\r\n.sc-servicio-imagen,\r\n#sc-servicios-interactivos .sc-servicio-card.sc-activa\r\n.sc-servicio-imagen{\r\n  transform:scale(1.08);\r\n  filter:saturate(0.86) brightness(0.65);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   6. DEGRADADO PERMANENTE\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-sombra{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:1;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(5,43,92,0.06) 15%,\r\n      rgba(5,43,92,0.25) 55%,\r\n      rgba(5,43,92,0.92) 100%\r\n    );\r\n\r\n  pointer-events:none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   7. ESTADO DEL SERVICIO\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-estado{\r\n  position:absolute;\r\n  top:17px;\r\n  left:17px;\r\n  z-index:4;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  gap:7px;\r\n\r\n  padding:8px 12px;\r\n\r\n  background:rgba(255,255,255,0.88);\r\n\r\n  -webkit-backdrop-filter:blur(10px);\r\n  backdrop-filter:blur(10px);\r\n\r\n  border:1px solid rgba(255,255,255,0.65);\r\n  border-radius:999px;\r\n\r\n  color:var(--sc-azul-oscuro);\r\n\r\n  font-size:12px;\r\n  font-weight:750;\r\n\r\n  box-shadow:0 6px 16px rgba(5,43,92,0.12);\r\n\r\n  transition:\r\n    opacity 0.3s ease,\r\n    transform 0.3s ease;\r\n}\r\n\r\n\r\n\/* Punto verde del estado. *\/\r\n\r\n#sc-servicios-interactivos .sc-estado-punto{\r\n  width:8px;\r\n  height:8px;\r\n\r\n  border-radius:50%;\r\n  background:#58b957;\r\n\r\n  box-shadow:0 0 0 4px rgba(88,185,87,0.14);\r\n}\r\n\r\n\r\n\/* Oculta el estado cuando se abre el detalle. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-card:hover\r\n.sc-servicio-estado,\r\n#sc-servicios-interactivos .sc-servicio-card:focus-within\r\n.sc-servicio-estado,\r\n#sc-servicios-interactivos .sc-servicio-card.sc-activa\r\n.sc-servicio-estado{\r\n  opacity:0;\r\n  transform:translateY(-8px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   8. INFORMACI\u00d3N VISIBLE NORMALMENTE\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-resumen{\r\n  position:absolute;\r\n  right:0;\r\n  bottom:0;\r\n  left:0;\r\n  z-index:3;\r\n\r\n  display:grid;\r\n  grid-template-columns:auto 1fr auto;\r\n  align-items:center;\r\n  gap:14px;\r\n\r\n  padding:24px 22px 22px;\r\n\r\n  color:#fff;\r\n\r\n  transition:\r\n    opacity 0.32s ease,\r\n    transform 0.38s ease;\r\n}\r\n\r\n\r\n\/* Icono circular inferior. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-icono{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  width:52px;\r\n  height:52px;\r\n\r\n  background:rgba(255,255,255,0.15);\r\n\r\n  -webkit-backdrop-filter:blur(8px);\r\n  backdrop-filter:blur(8px);\r\n\r\n  border:1px solid rgba(255,255,255,0.26);\r\n  border-radius:17px;\r\n}\r\n\r\n#sc-servicios-interactivos .sc-servicio-icono svg{\r\n  width:29px;\r\n  height:29px;\r\n\r\n  fill:none;\r\n  stroke:currentColor;\r\n  stroke-width:1.8;\r\n  stroke-linecap:round;\r\n  stroke-linejoin:round;\r\n}\r\n\r\n\r\n\/* N\u00famero de cada servicio. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-numero{\r\n  display:block;\r\n\r\n  margin-bottom:2px;\r\n\r\n  color:rgba(255,255,255,0.65);\r\n\r\n  font-size:11px;\r\n  font-weight:800;\r\n  letter-spacing:1.5px;\r\n}\r\n\r\n\r\n\/* Nombre del servicio. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-resumen h3{\r\n  margin:0 0 4px;\r\n\r\n  color:#fff;\r\n\r\n  font-size:24px;\r\n  font-weight:850;\r\n  line-height:1.1;\r\n}\r\n\r\n\r\n\/* Texto peque\u00f1o inferior. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-resumen p{\r\n  margin:0;\r\n\r\n  color:rgba(255,255,255,0.80);\r\n\r\n  font-size:13px;\r\n  line-height:1.35;\r\n}\r\n\r\n\r\n\/* Bot\u00f3n visual con s\u00edmbolo +. *\/\r\n\r\n#sc-servicios-interactivos .sc-indicador-abrir{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  width:38px;\r\n  height:38px;\r\n\r\n  border:1px solid rgba(255,255,255,0.35);\r\n  border-radius:50%;\r\n\r\n  background:rgba(255,255,255,0.12);\r\n\r\n  color:#fff;\r\n\r\n  font-size:25px;\r\n  font-weight:300;\r\n\r\n  transition:\r\n    transform 0.35s ease,\r\n    background-color 0.35s ease;\r\n}\r\n\r\n\r\n\/* Oculta el resumen cuando aparece el detalle. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-card:hover\r\n.sc-servicio-resumen,\r\n#sc-servicios-interactivos .sc-servicio-card:focus-within\r\n.sc-servicio-resumen,\r\n#sc-servicios-interactivos .sc-servicio-card.sc-activa\r\n.sc-servicio-resumen{\r\n  opacity:0;\r\n  transform:translateY(35px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   9. DETALLE INTERACTIVO\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-detalle{\r\n  position:absolute;\r\n  inset:0;\r\n  z-index:5;\r\n\r\n  display:flex;\r\n  align-items:flex-end;\r\n\r\n  padding:28px 25px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(5,43,92,0.22),\r\n      rgba(5,43,92,0.97)\r\n    );\r\n\r\n  opacity:0;\r\n  visibility:hidden;\r\n\r\n  transform:translateY(25px);\r\n\r\n  transition:\r\n    opacity 0.38s ease,\r\n    visibility 0.38s ease,\r\n    transform 0.42s cubic-bezier(.2,.8,.25,1);\r\n}\r\n\r\n\r\n\/* Muestra el detalle. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-card:hover\r\n.sc-servicio-detalle,\r\n#sc-servicios-interactivos .sc-servicio-card:focus-within\r\n.sc-servicio-detalle,\r\n#sc-servicios-interactivos .sc-servicio-card.sc-activa\r\n.sc-servicio-detalle{\r\n  opacity:1;\r\n  visibility:visible;\r\n  transform:translateY(0);\r\n}\r\n\r\n\r\n\/* Contenido del detalle. *\/\r\n\r\n#sc-servicios-interactivos .sc-detalle-contenido{\r\n  width:100%;\r\n  color:#fff;\r\n}\r\n\r\n\r\n\/* Icono del detalle. *\/\r\n\r\n#sc-servicios-interactivos .sc-detalle-icono{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  width:54px;\r\n  height:54px;\r\n\r\n  margin-bottom:17px;\r\n\r\n  background:rgba(34,182,217,0.18);\r\n  border:1px solid rgba(34,182,217,0.38);\r\n  border-radius:17px;\r\n\r\n  color:#fff;\r\n}\r\n\r\n#sc-servicios-interactivos .sc-detalle-icono svg{\r\n  width:31px;\r\n  height:31px;\r\n\r\n  fill:none;\r\n  stroke:currentColor;\r\n  stroke-width:1.8;\r\n  stroke-linecap:round;\r\n  stroke-linejoin:round;\r\n}\r\n\r\n\r\n\/* T\u00edtulo dentro del detalle. *\/\r\n\r\n#sc-servicios-interactivos .sc-detalle-contenido h3{\r\n  margin:0 0 9px;\r\n\r\n  color:#fff;\r\n\r\n  font-size:27px;\r\n  font-weight:850;\r\n}\r\n\r\n\r\n\/* Descripci\u00f3n. *\/\r\n\r\n#sc-servicios-interactivos .sc-detalle-contenido > p{\r\n  margin:0 0 15px;\r\n\r\n  color:rgba(255,255,255,0.84);\r\n\r\n  font-size:14px;\r\n  line-height:1.55;\r\n}\r\n\r\n\r\n\/* Etiquetas informativas. *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-indicadores{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:7px;\r\n\r\n  margin-bottom:19px;\r\n}\r\n\r\n#sc-servicios-interactivos .sc-servicio-indicadores span{\r\n  display:inline-flex;\r\n  align-items:center;\r\n\r\n  padding:6px 9px;\r\n\r\n  background:rgba(255,255,255,0.11);\r\n  border:1px solid rgba(255,255,255,0.17);\r\n  border-radius:999px;\r\n\r\n  color:#fff;\r\n\r\n  font-size:11px;\r\n  font-weight:650;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   10. BOTONES\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-acciones{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:9px;\r\n}\r\n\r\n#sc-servicios-interactivos .sc-accion{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  min-height:41px;\r\n  padding:10px 14px;\r\n\r\n  border-radius:10px;\r\n\r\n  font-size:12px;\r\n  font-weight:800;\r\n  line-height:1.15;\r\n  text-align:center;\r\n  text-decoration:none !important;\r\n\r\n  transition:\r\n    transform 0.25s ease,\r\n    background-color 0.25s ease,\r\n    box-shadow 0.25s ease;\r\n}\r\n\r\n\r\n\/* Bot\u00f3n principal azul\/celeste. *\/\r\n\r\n#sc-servicios-interactivos .sc-accion-principal{\r\n  background:linear-gradient(135deg,var(--sc-celeste),var(--sc-azul));\r\n  color:#fff !important;\r\n\r\n  box-shadow:0 8px 18px rgba(8,125,184,0.28);\r\n}\r\n\r\n\r\n\/* Bot\u00f3n secundario transparente. *\/\r\n\r\n#sc-servicios-interactivos .sc-accion-secundaria{\r\n  background:rgba(255,255,255,0.10);\r\n  color:#fff !important;\r\n\r\n  border:1px solid rgba(255,255,255,0.25);\r\n}\r\n\r\n\r\n\/* Hover de los botones. *\/\r\n\r\n#sc-servicios-interactivos .sc-accion:hover{\r\n  transform:translateY(-3px);\r\n}\r\n\r\n#sc-servicios-interactivos .sc-accion-principal:hover{\r\n  box-shadow:0 12px 23px rgba(8,125,184,0.40);\r\n}\r\n\r\n#sc-servicios-interactivos .sc-accion-secundaria:hover{\r\n  background:rgba(255,255,255,0.20);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   11. TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width:960px){\r\n\r\n  #sc-servicios-interactivos .sc-servicios-grid{\r\n    grid-template-columns:repeat(2,minmax(0,1fr));\r\n  }\r\n\r\n  #sc-servicios-interactivos .sc-servicio-card:last-child{\r\n    grid-column:1 \/ -1;\r\n    max-width:520px;\r\n    width:100%;\r\n    justify-self:center;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   12. CELULAR\r\n========================================================= *\/\r\n\r\n@media (max-width:650px){\r\n\r\n  #sc-servicios-interactivos{\r\n    padding:12px;\r\n    margin:22px auto;\r\n  }\r\n\r\n  #sc-servicios-interactivos .sc-servicios-encabezado{\r\n    margin-bottom:25px;\r\n  }\r\n\r\n  #sc-servicios-interactivos .sc-servicios-grid{\r\n    grid-template-columns:1fr;\r\n    gap:18px;\r\n  }\r\n\r\n  #sc-servicios-interactivos .sc-servicio-card,\r\n  #sc-servicios-interactivos .sc-servicio-card:last-child{\r\n    grid-column:auto;\r\n    width:100%;\r\n    max-width:none;\r\n    min-height:365px;\r\n  }\r\n\r\n  #sc-servicios-interactivos .sc-servicio-resumen{\r\n    padding:22px 19px;\r\n  }\r\n\r\n  #sc-servicios-interactivos .sc-servicio-detalle{\r\n    padding:24px 21px;\r\n  }\r\n\r\n  #sc-servicios-interactivos .sc-detalle-contenido h3{\r\n    font-size:25px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   13. ACCESIBILIDAD\r\n========================================================= *\/\r\n\r\n#sc-servicios-interactivos .sc-servicio-card:focus-visible{\r\n  outline:3px solid var(--sc-celeste);\r\n  outline-offset:5px;\r\n}\r\n\r\n\r\n\/* Desactiva animaciones cuando el dispositivo lo solicita. *\/\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n  #sc-servicios-interactivos *,\r\n  #sc-servicios-interactivos *::before,\r\n  #sc-servicios-interactivos *::after{\r\n    animation:none !important;\r\n    transition:none !important;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n  \/* Busca \u00fanicamente las tarjetas de este componente. *\/\r\n\r\n  const componente = document.getElementById(\r\n    \"sc-servicios-interactivos\"\r\n  );\r\n\r\n  if(!componente){\r\n    return;\r\n  }\r\n\r\n  const tarjetas = Array.from(\r\n    componente.querySelectorAll(\".sc-servicio-card\")\r\n  );\r\n\r\n\r\n  \/* Detecta si el dispositivo utiliza pantalla t\u00e1ctil. *\/\r\n\r\n  const esDispositivoTactil = window.matchMedia(\r\n    \"(hover: none), (pointer: coarse)\"\r\n  ).matches;\r\n\r\n\r\n  \/*\r\n   * En celular o tablet:\r\n   * - Primer clic abre la tarjeta.\r\n   * - Clic en otra tarjeta cierra la anterior.\r\n   *\/\r\n\r\n  if(esDispositivoTactil){\r\n\r\n    tarjetas.forEach(function(tarjeta){\r\n\r\n      tarjeta.addEventListener(\r\n        \"click\",\r\n        function(evento){\r\n\r\n          \/*\r\n           * Si el usuario pulsa un bot\u00f3n, permitimos\r\n           * que el enlace funcione normalmente.\r\n           *\/\r\n\r\n          if(evento.target.closest(\"a\")){\r\n            return;\r\n          }\r\n\r\n          const estabaActiva =\r\n            tarjeta.classList.contains(\"sc-activa\");\r\n\r\n          tarjetas.forEach(function(otraTarjeta){\r\n            otraTarjeta.classList.remove(\"sc-activa\");\r\n          });\r\n\r\n          if(!estabaActiva){\r\n            tarjeta.classList.add(\"sc-activa\");\r\n          }\r\n\r\n        }\r\n      );\r\n\r\n    });\r\n\r\n  }\r\n\r\n\r\n  \/*\r\n   * Navegaci\u00f3n por teclado:\r\n   * Enter o espacio abre\/cierra la tarjeta.\r\n   *\/\r\n\r\n  tarjetas.forEach(function(tarjeta){\r\n\r\n    tarjeta.addEventListener(\r\n      \"keydown\",\r\n      function(evento){\r\n\r\n        if(\r\n          evento.key !== \"Enter\" &&\r\n          evento.key !== \" \"\r\n        ){\r\n          return;\r\n        }\r\n\r\n        if(evento.target.closest(\"a\")){\r\n          return;\r\n        }\r\n\r\n        evento.preventDefault();\r\n\r\n        const estabaActiva =\r\n          tarjeta.classList.contains(\"sc-activa\");\r\n\r\n        tarjetas.forEach(function(otraTarjeta){\r\n          otraTarjeta.classList.remove(\"sc-activa\");\r\n        });\r\n\r\n        if(!estabaActiva){\r\n          tarjeta.classList.add(\"sc-activa\");\r\n        }\r\n\r\n      }\r\n    );\r\n\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2823cc7 e-con-full e-transform e-transform animated-fast elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex elementor-invisible e-con e-parent\" data-id=\"2823cc7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;bounceInLeft&quot;,&quot;_transform_rotateZ_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_skewX_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_skewX_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_skewX_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_skewY_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_skewY_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_skewY_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t<div class=\"elementor-element elementor-element-56bc1b2 e-con-full e-flex e-con e-child\" data-id=\"56bc1b2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-dafdc74 e-flex e-con-boxed e-con e-child\" data-id=\"dafdc74\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-88a0935 e-con-full e-flex e-con e-child\" data-id=\"88a0935\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-da5df36 e-con-full e-flex e-con e-child\" data-id=\"da5df36\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-535d397 elementor-widget elementor-widget-heading\" data-id=\"535d397\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Aseo<\/h3>\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aed3fb4 e-con-full e-flex e-con e-child\" data-id=\"aed3fb4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-941ff23 e-flex e-con-boxed e-con e-child\" data-id=\"941ff23\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-5b562ea e-con-full e-flex e-con e-child\" data-id=\"5b562ea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a522795 e-con-full e-flex e-con e-child\" data-id=\"a522795\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-947505a elementor-widget elementor-widget-heading\" data-id=\"947505a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Acueducto<\/h3>\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6bf0a77 e-con-full e-flex e-con e-child\" data-id=\"6bf0a77\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-cd562d1 e-flex e-con-boxed e-con e-child\" data-id=\"cd562d1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9732925 e-con-full e-flex e-con e-child\" data-id=\"9732925\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-72f8cc9 e-con-full e-flex e-con e-child\" data-id=\"72f8cc9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f0866e elementor-widget elementor-widget-heading\" data-id=\"4f0866e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Alcantarillado<\/h3>\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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2af2782 animated-slow e-transform e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"2af2782\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;bounceInDown&quot;,&quot;_transform_rotateZ_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7aa6b6 elementor-grid-eael-col-2 elementor-grid-tablet-eael-col-2 elementor-grid-mobile-eael-col-1 elementor-widget elementor-widget-eael-post-grid\" data-id=\"c7aa6b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;eael_post_grid_columns&quot;:&quot;eael-col-2&quot;,&quot;eael_post_grid_columns_tablet&quot;:&quot;eael-col-2&quot;,&quot;eael_post_grid_columns_mobile&quot;:&quot;eael-col-1&quot;}\" data-widget_type=\"eael-post-grid.default\">\n\t\t\t\t\t<div id=\"eael-post-grid-c7aa6b6\" class=\"eael-post-grid-container\">\n            <div class=\"eael-post-grid eael-post-appender eael-post-appender-c7aa6b6 eael-post-grid-style-two\" data-layout-mode=\"masonry\"><article class=\"eael-grid-post  eael-post-grid-column eael-pg-post-3034 category-boletin\" data-id=\"3034\">\n    <div class=\"eael-grid-post-holder\">\n        <div class=\"eael-grid-post-holder-inner\"><div class=\"eael-entry-media\"><div class=\"eael-entry-overlay fade-in\"><i class=\"far fa-arrow-alt-circle-right\" aria-hidden=\"true\"><\/i><a href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8-atencion-dosquebradas-hay-que-romper-las-cadenas-de-desinformacion-%f0%9f%9a%a8\/\"><\/a><\/div><div class=\"eael-entry-thumbnail \">\n                            <img fetchpriority=\"high\" decoding=\"async\" width=\"747\" height=\"788\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-150216.png\" class=\"attachment-large size-large wp-image-3036\" alt=\"\" srcset=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-150216.png 747w, https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-150216-284x300.png 284w\" sizes=\"(max-width: 747px) 100vw, 747px\" \/>\n                            <\/div>\n                    <\/div><div class=\"eael-entry-wrapper\"><header class=\"eael-entry-header\"><h3 class=\"eael-entry-title\"><a class=\"eael-grid-post-link\" href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8-atencion-dosquebradas-hay-que-romper-las-cadenas-de-desinformacion-%f0%9f%9a%a8\/\" title=\"\ud83d\udea8 \u00a1ATENCI\u00d3N, DOSQUEBRADAS! Hay que romper las cadenas de desinformaci\u00f3n. \ud83d\udea8\">\ud83d\udea8 \u00a1ATENCI\u00d3N, DOSQUEBRADAS! Hay que romper las cadenas de desinformaci\u00f3n. \ud83d\udea8<\/a><\/h3><\/header><div class=\"eael-entry-content\">\n                                <div class=\"eael-grid-post-excerpt\"><p>En medio de esta emergencia, la informaci\u00f3n oficial es fundamental....<\/p><\/div>\n                            <\/div><div class=\"eael-entry-header-after style-two\"><div class=\"eael-entry-meta\"><span class=\"eael-meta-posted-on\"><i class=\"far fa-clock\"><\/i><time datetime=\"24.08.2026\">24.08.2026<\/time><\/span><\/div><\/div><\/div><\/div>\n    <\/div>\n<\/article><article class=\"eael-grid-post  eael-post-grid-column eael-pg-post-3031 category-boletin\" data-id=\"3031\">\n    <div class=\"eael-grid-post-holder\">\n        <div class=\"eael-grid-post-holder-inner\"><div class=\"eael-entry-media\"><div class=\"eael-entry-overlay fade-in\"><i class=\"far fa-arrow-alt-circle-right\" aria-hidden=\"true\"><\/i><a href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8%f0%9f%92%a7-dosquebradas-no-creas-en-noticias-falsas\/\"><\/a><\/div><div class=\"eael-entry-thumbnail \">\n                            <img decoding=\"async\" width=\"685\" height=\"861\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132720.png\" class=\"attachment-large size-large wp-image-3032\" alt=\"\" srcset=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132720.png 685w, https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132720-239x300.png 239w\" sizes=\"(max-width: 685px) 100vw, 685px\" \/>\n                            <\/div>\n                    <\/div><div class=\"eael-entry-wrapper\"><header class=\"eael-entry-header\"><h3 class=\"eael-entry-title\"><a class=\"eael-grid-post-link\" href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8%f0%9f%92%a7-dosquebradas-no-creas-en-noticias-falsas\/\" title=\"\ud83d\udea8\ud83d\udca7 \u00a1DOSQUEBRADAS, NO CREAS EN NOTICIAS FALSAS!\">\ud83d\udea8\ud83d\udca7 \u00a1DOSQUEBRADAS, NO CREAS EN NOTICIAS FALSAS!<\/a><\/h3><\/header><div class=\"eael-entry-content\">\n                                <div class=\"eael-grid-post-excerpt\"><p>En estos momentos no hay lugar para cuentos ni informaci\u00f3n...<\/p><\/div>\n                            <\/div><div class=\"eael-entry-header-after style-two\"><div class=\"eael-entry-meta\"><span class=\"eael-meta-posted-on\"><i class=\"far fa-clock\"><\/i><time datetime=\"24.08.2026\">24.08.2026<\/time><\/span><\/div><\/div><\/div><\/div>\n    <\/div>\n<\/article><article class=\"eael-grid-post  eael-post-grid-column eael-pg-post-3028 category-boletin\" data-id=\"3028\">\n    <div class=\"eael-grid-post-holder\">\n        <div class=\"eael-grid-post-holder-inner\"><div class=\"eael-entry-media\"><div class=\"eael-entry-overlay fade-in\"><i class=\"far fa-arrow-alt-circle-right\" aria-hidden=\"true\"><\/i><a href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8-atencion-dosquebradas-no-crean-en-cadenas-de-desinformacion-o-noticias-falsas\/\"><\/a><\/div><div class=\"eael-entry-thumbnail \">\n                            <img decoding=\"async\" width=\"674\" height=\"848\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132515.png\" class=\"attachment-large size-large wp-image-3029\" alt=\"\" srcset=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132515.png 674w, https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132515-238x300.png 238w\" sizes=\"(max-width: 674px) 100vw, 674px\" \/>\n                            <\/div>\n                    <\/div><div class=\"eael-entry-wrapper\"><header class=\"eael-entry-header\"><h3 class=\"eael-entry-title\"><a class=\"eael-grid-post-link\" href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8-atencion-dosquebradas-no-crean-en-cadenas-de-desinformacion-o-noticias-falsas\/\" title=\"\ud83d\udea8 ATENCI\u00d3N DOSQUEBRADAS, NO CREAN EN CADENAS DE DESINFORMACI\u00d3N O NOTICIAS FALSAS\">\ud83d\udea8 ATENCI\u00d3N DOSQUEBRADAS, NO CREAN EN CADENAS DE DESINFORMACI\u00d3N O NOTICIAS FALSAS<\/a><\/h3><\/header><div class=\"eael-entry-content\">\n                                <div class=\"eael-grid-post-excerpt\"><p>Serviciudad informa a toda la ciudadan\u00eda que este lunes no...<\/p><\/div>\n                            <\/div><div class=\"eael-entry-header-after style-two\"><div class=\"eael-entry-meta\"><span class=\"eael-meta-posted-on\"><i class=\"far fa-clock\"><\/i><time datetime=\"24.08.2026\">24.08.2026<\/time><\/span><\/div><\/div><\/div><\/div>\n    <\/div>\n<\/article><article class=\"eael-grid-post  eael-post-grid-column eael-pg-post-3025 category-boletin\" data-id=\"3025\">\n    <div class=\"eael-grid-post-holder\">\n        <div class=\"eael-grid-post-holder-inner\"><div class=\"eael-entry-media\"><div class=\"eael-entry-overlay fade-in\"><i class=\"far fa-arrow-alt-circle-right\" aria-hidden=\"true\"><\/i><a href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8-ey-dosquebradas-el-agua-no-es-infinita-%f0%9f%92%a7-2\/\"><\/a><\/div><div class=\"eael-entry-thumbnail \">\n                            <img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"855\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132343.png\" class=\"attachment-large size-large wp-image-3026\" alt=\"\" srcset=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132343.png 682w, https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/08\/Captura-de-pantalla-2026-08-24-132343-239x300.png 239w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/>\n                            <\/div>\n                    <\/div><div class=\"eael-entry-wrapper\"><header class=\"eael-entry-header\"><h3 class=\"eael-entry-title\"><a class=\"eael-grid-post-link\" href=\"https:\/\/serviciudad.gov.co\/wr\/%f0%9f%9a%a8-ey-dosquebradas-el-agua-no-es-infinita-%f0%9f%92%a7-2\/\" title=\"\ud83d\udea8 \u00a1EY DOSQUEBRADAS, EL AGUA NO ES INFINITA! \ud83d\udca7\">\ud83d\udea8 \u00a1EY DOSQUEBRADAS, EL AGUA NO ES INFINITA! \ud83d\udca7<\/a><\/h3><\/header><div class=\"eael-entry-content\">\n                                <div class=\"eael-grid-post-excerpt\"><p>Estamos en una emergencia y no podemos seguir desperdiciando agua...<\/p><\/div>\n                            <\/div><div class=\"eael-entry-header-after style-two\"><div class=\"eael-entry-meta\"><span class=\"eael-meta-posted-on\"><i class=\"far fa-clock\"><\/i><time datetime=\"24.08.2026\">24.08.2026<\/time><\/span><\/div><\/div><\/div><\/div>\n    <\/div>\n<\/article><\/div>\n            <div class=\"clearfix\"><\/div>\n        <\/div>            <div class=\"eael-load-more-button-wrap\">\n                <button class=\"eael-load-more-button\" id=\"eael-load-more-btn-c7aa6b6\" data-widget-id=\"c7aa6b6\" data-widget=\"c7aa6b6\" data-page-id=\"565\" data-template=\"{&quot;dir&quot;:&quot;lite&quot;,&quot;file_name&quot;:&quot;two.php&quot;,&quot;name&quot;:&quot;Post-Grid&quot;}\" data-class=\"Essential_Addons_Elementor\\Elements\\Post_Grid\" data-layout=\"masonry\" data-page=\"1\" data-args=\"orderby=date&amp;order=desc&amp;ignore_sticky_posts=1&amp;post_status=publish&amp;posts_per_page=4&amp;offset=0&amp;post_type=post&amp;tax_query%5B0%5D%5Btaxonomy%5D=category&amp;tax_query%5B0%5D%5Bfield%5D=term_id&amp;tax_query%5B0%5D%5Bterms%5D%5B0%5D=19&amp;tax_query%5Brelation%5D=AND\" data-max-page=\"11\">\n                    <span class=\"eael-btn-loader button__loader\"><\/span>\n                    <span class=\"eael_load_more_text\">Mostrar m\u00e1s<\/span>\n                <\/button>\n            <\/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-1898c54 e-flex e-con-boxed e-con e-parent\" data-id=\"1898c54\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49d7c35 elementor-widget elementor-widget-html\" data-id=\"49d7c35\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     SECCI\u00d3N INTERACTIVA DE INFORMACI\u00d3N R\u00c1PIDA - SERVICIUDAD\r\n     \r\n     INCLUYE:\r\n     - HTML\r\n     - CSS\r\n     - JavaScript\r\n     - Dise\u00f1o responsive\r\n     - Cambio mediante clic o pasando el cursor\r\n     \r\n     Puedes pegar todo directamente en un widget HTML de Elementor.\r\n========================================================== -->\r\n\r\n<style>\r\n  \/* =========================================================\r\n     1. VARIABLES DE COLORES\r\n     \r\n     Puedes cambiar f\u00e1cilmente los colores desde aqu\u00ed.\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info {\r\n    --sc-azul-principal: #005ca9;\r\n    --sc-azul-secundario: #008bc7;\r\n    --sc-azul-oscuro: #003d73;\r\n    --sc-azul-claro: #eaf6fc;\r\n    --sc-celeste: #1bb6d9;\r\n\r\n    --sc-blanco: #ffffff;\r\n    --sc-gris-fondo: #f7fafc;\r\n    --sc-gris-icono: #8a97a5;\r\n    --sc-gris-texto: #445466;\r\n    --sc-borde: rgba(0, 92, 169, 0.12);\r\n\r\n    --sc-sombra:\r\n      0 18px 48px rgba(0, 61, 115, 0.15);\r\n\r\n    --sc-sombra-activa:\r\n      0 12px 28px rgba(0, 61, 115, 0.2);\r\n  }\r\n\r\n  \/* =========================================================\r\n     2. REINICIO INTERNO\r\n     \r\n     Solo afecta este componente.\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info,\r\n  #sc-serviciudad-info * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  #sc-serviciudad-info button,\r\n  #sc-serviciudad-info a {\r\n    font-family: inherit;\r\n  }\r\n\r\n  \/* =========================================================\r\n     3. CONTENEDOR GENERAL\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info {\r\n    position: relative;\r\n    isolation: isolate;\r\n\r\n    width: 100%;\r\n    max-width: 1320px;\r\n\r\n    margin: 30px auto;\r\n    overflow: hidden;\r\n\r\n    background: var(--sc-blanco);\r\n    border: 1px solid var(--sc-borde);\r\n    border-radius: 38px;\r\n\r\n    box-shadow: var(--sc-sombra);\r\n\r\n    font-family: inherit;\r\n  }\r\n\r\n  \/*\r\n   * Decoraci\u00f3n suave en el fondo.\r\n   * No afecta el contenido ni los enlaces.\r\n   *\/\r\n\r\n  #sc-serviciudad-info::before,\r\n  #sc-serviciudad-info::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    z-index: -1;\r\n\r\n    width: 240px;\r\n    height: 240px;\r\n\r\n    border-radius: 50%;\r\n    filter: blur(10px);\r\n    pointer-events: none;\r\n  }\r\n\r\n  #sc-serviciudad-info::before {\r\n    top: -150px;\r\n    left: -120px;\r\n\r\n    background: rgba(27, 182, 217, 0.1);\r\n  }\r\n\r\n  #sc-serviciudad-info::after {\r\n    right: -130px;\r\n    bottom: -160px;\r\n\r\n    background: rgba(0, 92, 169, 0.1);\r\n  }\r\n\r\n  \/* =========================================================\r\n     4. ZONA SUPERIOR DE PESTA\u00d1AS\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tabs {\r\n    position: relative;\r\n\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    align-items: stretch;\r\n\r\n    min-height: 165px;\r\n    padding: 12px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        120deg,\r\n        var(--sc-azul-oscuro) 0%,\r\n        var(--sc-azul-principal) 45%,\r\n        var(--sc-azul-secundario) 100%\r\n      );\r\n\r\n    border-radius: 38px;\r\n  }\r\n\r\n  \/*\r\n   * Brillo decorativo superior.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tabs::after {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    right: 8%;\r\n    left: 8%;\r\n\r\n    height: 1px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(255, 255, 255, 0.55),\r\n        transparent\r\n      );\r\n\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* =========================================================\r\n     5. BOTONES DE LAS PESTA\u00d1AS\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tab {\r\n    position: relative;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 13px;\r\n\r\n    width: 100%;\r\n    min-width: 0;\r\n    padding: 20px;\r\n\r\n    border: 0;\r\n    border-radius: 30px;\r\n    outline: none;\r\n\r\n    background: transparent;\r\n    color: var(--sc-blanco);\r\n\r\n    font-size: 21px;\r\n    font-weight: 800;\r\n    line-height: 1.2;\r\n    text-align: center;\r\n\r\n    cursor: pointer;\r\n\r\n    transition:\r\n      color 0.3s ease,\r\n      background-color 0.3s ease,\r\n      transform 0.3s ease,\r\n      box-shadow 0.3s ease;\r\n  }\r\n\r\n  \/*\r\n   * Efecto al pasar el cursor sobre pesta\u00f1as no activas.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tab:not(.activo):hover {\r\n    background: rgba(255, 255, 255, 0.1);\r\n    transform: translateY(-3px);\r\n  }\r\n\r\n  \/*\r\n   * Estado de la pesta\u00f1a seleccionada.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tab.activo {\r\n    background:\r\n      linear-gradient(\r\n        145deg,\r\n        #ffffff 0%,\r\n        #f4fbff 100%\r\n      );\r\n\r\n    color: var(--sc-azul-principal);\r\n\r\n    box-shadow:\r\n      var(--sc-sombra-activa),\r\n      inset 0 0 0 1px rgba(255, 255, 255, 0.9);\r\n\r\n    transform: translateY(0);\r\n  }\r\n\r\n  \/*\r\n   * Borde accesible cuando se navega con teclado.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tab:focus-visible {\r\n    outline: 3px solid rgba(255, 255, 255, 0.95);\r\n    outline-offset: -6px;\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-tab.activo:focus-visible {\r\n    outline-color: var(--sc-celeste);\r\n  }\r\n\r\n  \/* =========================================================\r\n     6. ICONOS DE LAS PESTA\u00d1AS\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info .sc-info-icono {\r\n    position: relative;\r\n\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    width: 62px;\r\n    height: 62px;\r\n\r\n    color: currentColor;\r\n\r\n    transition:\r\n      color 0.3s ease,\r\n      transform 0.35s ease,\r\n      filter 0.35s ease;\r\n  }\r\n\r\n  \/*\r\n   * Resplandor detr\u00e1s del icono activo.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tab.activo .sc-info-icono::before {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    width: 54px;\r\n    height: 54px;\r\n\r\n    background: rgba(27, 182, 217, 0.12);\r\n    border-radius: 50%;\r\n\r\n    transform: scale(1);\r\n    animation: scPulsoIcono 2.8s ease-in-out infinite;\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-icono svg {\r\n    position: relative;\r\n    z-index: 1;\r\n\r\n    display: block;\r\n    width: 58px;\r\n    height: 58px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 1.9;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n\r\n    transition: transform 0.35s ease;\r\n  }\r\n\r\n  \/*\r\n   * Peque\u00f1a animaci\u00f3n del icono al activar una pesta\u00f1a.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-tab.activo .sc-info-icono {\r\n    color: var(--sc-azul-principal);\r\n    filter: drop-shadow(0 5px 9px rgba(0, 92, 169, 0.18));\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-tab.activo .sc-info-icono svg {\r\n    transform: scale(1.06);\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-tab:hover .sc-info-icono svg {\r\n    transform: scale(1.08) rotate(-3deg);\r\n  }\r\n\r\n  #sc-serviciudad-info\r\n    .sc-info-tab.activo:hover\r\n    .sc-info-icono\r\n    svg {\r\n    transform: scale(1.1) rotate(-2deg);\r\n  }\r\n\r\n  \/* =========================================================\r\n     7. CONTENIDO INFERIOR\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info .sc-info-contenidos {\r\n    position: relative;\r\n\r\n    min-height: 190px;\r\n    padding: 43px 48px 40px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        var(--sc-blanco) 0%,\r\n        var(--sc-gris-fondo) 100%\r\n      );\r\n  }\r\n\r\n  \/*\r\n   * L\u00ednea decorativa entre pesta\u00f1as y contenido.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-contenidos::before {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    right: 8%;\r\n    left: 8%;\r\n\r\n    height: 1px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(0, 92, 169, 0.16),\r\n        transparent\r\n      );\r\n  }\r\n\r\n  \/* =========================================================\r\n     8. PANELES CAMBIANTES\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info .sc-info-panel {\r\n    display: none;\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-panel.activo {\r\n    display: block;\r\n    animation: scEntradaPanel 0.42s ease both;\r\n  }\r\n\r\n  \/*\r\n   * Distribuye la informaci\u00f3n en tres columnas.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, minmax(0, 1fr));\r\n    align-items: stretch;\r\n    gap: 30px;\r\n  }\r\n\r\n  \/* =========================================================\r\n     9. CADA BLOQUE DE INFORMACI\u00d3N\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info .sc-info-dato {\r\n    position: relative;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n\r\n    min-width: 0;\r\n    padding: 8px 24px;\r\n\r\n    color: var(--sc-gris-texto);\r\n\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    line-height: 1.55;\r\n    text-align: center;\r\n  }\r\n\r\n  \/*\r\n   * Separadores verticales entre columnas.\r\n   *\/\r\n\r\n  #sc-serviciudad-info\r\n    .sc-info-dato:not(:last-child)::after {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    top: 8%;\r\n    right: -15px;\r\n\r\n    width: 1px;\r\n    height: 84%;\r\n\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        transparent,\r\n        rgba(0, 92, 169, 0.18),\r\n        transparent\r\n      );\r\n  }\r\n\r\n  \/*\r\n   * T\u00edtulo de cada dato.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-dato strong {\r\n    display: block;\r\n    margin-bottom: 7px;\r\n\r\n    color: var(--sc-azul-principal);\r\n\r\n    font-size: 18px;\r\n    font-weight: 800;\r\n    line-height: 1.3;\r\n  }\r\n\r\n  \/*\r\n   * Enlaces de tel\u00e9fono, WhatsApp y correo.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-dato a:not(.sc-info-boton) {\r\n    position: relative;\r\n\r\n    color: var(--sc-azul-oscuro);\r\n    font-weight: 750;\r\n    text-decoration: none;\r\n\r\n    transition:\r\n      color 0.25s ease,\r\n      transform 0.25s ease;\r\n  }\r\n\r\n  #sc-serviciudad-info\r\n    .sc-info-dato\r\n    a:not(.sc-info-boton)::after {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    right: 50%;\r\n    bottom: -3px;\r\n    left: 50%;\r\n\r\n    height: 2px;\r\n\r\n    background: var(--sc-celeste);\r\n    border-radius: 10px;\r\n\r\n    transition:\r\n      right 0.25s ease,\r\n      left 0.25s ease;\r\n  }\r\n\r\n  #sc-serviciudad-info\r\n    .sc-info-dato\r\n    a:not(.sc-info-boton):hover {\r\n    color: var(--sc-azul-secundario);\r\n  }\r\n\r\n  #sc-serviciudad-info\r\n    .sc-info-dato\r\n    a:not(.sc-info-boton):hover::after {\r\n    right: 0;\r\n    left: 0;\r\n  }\r\n\r\n  \/* =========================================================\r\n     10. BOT\u00d3N PRINCIPAL\r\n  ========================================================== *\/\r\n\r\n  #sc-serviciudad-info .sc-info-boton {\r\n    position: relative;\r\n\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 9px;\r\n\r\n    margin-top: 22px;\r\n    padding: 13px 26px;\r\n    overflow: hidden;\r\n\r\n    border: 1px solid rgba(255, 255, 255, 0.25);\r\n    border-radius: 12px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        120deg,\r\n        var(--sc-azul-principal),\r\n        var(--sc-azul-secundario)\r\n      );\r\n\r\n    color: var(--sc-blanco) !important;\r\n\r\n    font-size: 16px;\r\n    font-weight: 800;\r\n    line-height: 1;\r\n    text-decoration: none !important;\r\n\r\n    box-shadow:\r\n      0 10px 22px rgba(0, 92, 169, 0.25);\r\n\r\n    transition:\r\n      transform 0.25s ease,\r\n      box-shadow 0.25s ease,\r\n      filter 0.25s ease;\r\n  }\r\n\r\n  \/*\r\n   * Brillo animado del bot\u00f3n.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-boton::before {\r\n    content: \"\";\r\n    position: absolute;\r\n\r\n    top: 0;\r\n    left: -120%;\r\n\r\n    width: 65%;\r\n    height: 100%;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        rgba(255, 255, 255, 0.35),\r\n        transparent\r\n      );\r\n\r\n    transform: skewX(-20deg);\r\n    transition: left 0.55s ease;\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-boton:hover {\r\n    transform: translateY(-3px);\r\n\r\n    box-shadow:\r\n      0 14px 28px rgba(0, 92, 169, 0.32);\r\n\r\n    filter: saturate(1.08);\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-boton:hover::before {\r\n    left: 145%;\r\n  }\r\n\r\n  #sc-serviciudad-info .sc-info-boton:active {\r\n    transform: translateY(-1px);\r\n  }\r\n\r\n  \/*\r\n   * Icono peque\u00f1o dentro del bot\u00f3n.\r\n   *\/\r\n\r\n  #sc-serviciudad-info .sc-info-boton svg {\r\n    width: 19px;\r\n    height: 19px;\r\n\r\n    fill: none;\r\n    stroke: currentColor;\r\n    stroke-width: 2;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n  }\r\n\r\n  \/* =========================================================\r\n     11. ANIMACIONES\r\n  ========================================================== *\/\r\n\r\n  @keyframes scEntradaPanel {\r\n    from {\r\n      opacity: 0;\r\n      transform: translateY(13px);\r\n    }\r\n\r\n    to {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n  }\r\n\r\n  @keyframes scPulsoIcono {\r\n    0%,\r\n    100% {\r\n      opacity: 0.65;\r\n      transform: scale(0.9);\r\n    }\r\n\r\n    50% {\r\n      opacity: 1;\r\n      transform: scale(1.06);\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     12. TABLET\r\n  ========================================================== *\/\r\n\r\n  @media (max-width: 900px) {\r\n    #sc-serviciudad-info {\r\n      border-radius: 30px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-tabs {\r\n      min-height: 145px;\r\n      border-radius: 30px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-tab {\r\n      padding: 16px 10px;\r\n\r\n      border-radius: 24px;\r\n\r\n      font-size: 18px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-icono,\r\n    #sc-serviciudad-info .sc-info-icono svg {\r\n      width: 49px;\r\n      height: 49px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-contenidos {\r\n      padding: 35px 24px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-grid {\r\n      gap: 18px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-dato {\r\n      padding: 5px 8px;\r\n      font-size: 14px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-dato strong {\r\n      font-size: 16px;\r\n    }\r\n\r\n    #sc-serviciudad-info\r\n      .sc-info-dato:not(:last-child)::after {\r\n      right: -9px;\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     13. CELULAR\r\n     \r\n     Las pesta\u00f1as se colocan verticalmente para evitar que\r\n     el texto y los iconos queden demasiado peque\u00f1os.\r\n  ========================================================== *\/\r\n\r\n  @media (max-width: 650px) {\r\n    #sc-serviciudad-info {\r\n      margin: 18px auto;\r\n      border-radius: 24px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-tabs {\r\n      grid-template-columns: 1fr;\r\n      gap: 7px;\r\n\r\n      min-height: auto;\r\n      padding: 9px;\r\n\r\n      border-radius: 24px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-tab {\r\n      flex-direction: row;\r\n      justify-content: flex-start;\r\n      gap: 15px;\r\n\r\n      min-height: 72px;\r\n      padding: 12px 18px;\r\n\r\n      border-radius: 17px;\r\n\r\n      font-size: 16px;\r\n      text-align: left;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-icono,\r\n    #sc-serviciudad-info .sc-info-icono svg {\r\n      flex: 0 0 auto;\r\n\r\n      width: 40px;\r\n      height: 40px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-contenidos {\r\n      min-height: auto;\r\n      padding: 28px 20px 31px;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-grid {\r\n      grid-template-columns: 1fr;\r\n      gap: 0;\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-dato {\r\n      padding: 20px 0;\r\n\r\n      font-size: 15px;\r\n    }\r\n\r\n    \/*\r\n     * En celular, los separadores pasan a ser horizontales.\r\n     *\/\r\n\r\n    #sc-serviciudad-info\r\n      .sc-info-dato:not(:last-child)::after {\r\n      top: auto;\r\n      right: 15%;\r\n      bottom: 0;\r\n      left: 15%;\r\n\r\n      width: auto;\r\n      height: 1px;\r\n\r\n      background:\r\n        linear-gradient(\r\n          90deg,\r\n          transparent,\r\n          rgba(0, 92, 169, 0.2),\r\n          transparent\r\n        );\r\n    }\r\n\r\n    #sc-serviciudad-info .sc-info-dato strong {\r\n      font-size: 17px;\r\n    }\r\n  }\r\n\r\n  \/* =========================================================\r\n     14. ACCESIBILIDAD\r\n     \r\n     Desactiva movimientos cuando el usuario tiene activada\r\n     la opci\u00f3n de reducir animaciones en su dispositivo.\r\n  ========================================================== *\/\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n    #sc-serviciudad-info *,\r\n    #sc-serviciudad-info *::before,\r\n    #sc-serviciudad-info *::after {\r\n      scroll-behavior: auto !important;\r\n      animation-duration: 0.01ms !important;\r\n      animation-iteration-count: 1 !important;\r\n      transition-duration: 0.01ms !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- =========================================================\r\n     ESTRUCTURA HTML\r\n========================================================== -->\r\n\r\n<section\r\n  id=\"sc-serviciudad-info\"\r\n  aria-label=\"Informaci\u00f3n r\u00e1pida de Serviciudad\"\r\n>\r\n  <!-- =======================================================\r\n       PESTA\u00d1AS SUPERIORES\r\n  ======================================================== -->\r\n\r\n  <div\r\n    class=\"sc-info-tabs\"\r\n    role=\"tablist\"\r\n    aria-label=\"Informaci\u00f3n de atenci\u00f3n de Serviciudad\"\r\n  >\r\n    <!-- PESTA\u00d1A 1: CANALES DE ATENCI\u00d3N -->\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"sc-info-tab activo\"\r\n      role=\"tab\"\r\n      aria-selected=\"true\"\r\n      aria-controls=\"sc-panel-canales\"\r\n      data-panel=\"canales\"\r\n    >\r\n      <span class=\"sc-info-icono\" aria-hidden=\"true\">\r\n        <!-- Icono de atenci\u00f3n al usuario -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <path d=\"M4 13v-2a8 8 0 0 1 16 0v2\"><\/path>\r\n          <path d=\"M4 13a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h2v-6Z\"><\/path>\r\n          <path d=\"M20 13a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-2v-6Z\"><\/path>\r\n          <path d=\"M18 19c0 2-2 3-5 3\"><\/path>\r\n          <path d=\"M13 22h-2\"><\/path>\r\n          <path d=\"M8.5 10.5a5 5 0 0 1 7 0\"><\/path>\r\n        <\/svg>\r\n      <\/span>\r\n\r\n      <span>Canales de atenci\u00f3n<\/span>\r\n    <\/button>\r\n\r\n    <!-- PESTA\u00d1A 2: PUNTOS DE PAGO -->\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"sc-info-tab\"\r\n      role=\"tab\"\r\n      aria-selected=\"false\"\r\n      aria-controls=\"sc-panel-pagos\"\r\n      data-panel=\"pagos\"\r\n    >\r\n      <span class=\"sc-info-icono\" aria-hidden=\"true\">\r\n        <!-- Icono de tarjeta y pago seguro -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <rect x=\"2.5\" y=\"5\" width=\"19\" height=\"14\" rx=\"2.5\"><\/rect>\r\n          <path d=\"M2.5 9h19\"><\/path>\r\n          <path d=\"M6 15h4\"><\/path>\r\n          <path d=\"M16.5 13.5 18 15l3-3\"><\/path>\r\n        <\/svg>\r\n      <\/span>\r\n\r\n      <span>Puntos de pago<\/span>\r\n    <\/button>\r\n\r\n    <!-- PESTA\u00d1A 3: HORARIOS -->\r\n\r\n    <button\r\n      type=\"button\"\r\n      class=\"sc-info-tab\"\r\n      role=\"tab\"\r\n      aria-selected=\"false\"\r\n      aria-controls=\"sc-panel-horarios\"\r\n      data-panel=\"horarios\"\r\n    >\r\n      <span class=\"sc-info-icono\" aria-hidden=\"true\">\r\n        <!-- Icono de calendario y reloj -->\r\n        <svg viewBox=\"0 0 24 24\">\r\n          <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"17\" rx=\"2.5\"><\/rect>\r\n          <path d=\"M7 2v5\"><\/path>\r\n          <path d=\"M17 2v5\"><\/path>\r\n          <path d=\"M3 9h18\"><\/path>\r\n          <circle cx=\"12\" cy=\"15\" r=\"3.5\"><\/circle>\r\n          <path d=\"M12 13v2.2l1.5 1\"><\/path>\r\n        <\/svg>\r\n      <\/span>\r\n\r\n      <span>Horarios de atenci\u00f3n<\/span>\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <!-- =======================================================\r\n       CONTENIDO CAMBIANTE\r\n  ======================================================== -->\r\n\r\n  <div class=\"sc-info-contenidos\">\r\n\r\n    <!-- =====================================================\r\n         PANEL 1: CANALES DE ATENCI\u00d3N\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"sc-panel-canales\"\r\n      class=\"sc-info-panel activo\"\r\n      role=\"tabpanel\"\r\n      data-content=\"canales\"\r\n    >\r\n      <div class=\"sc-info-grid\">\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>L\u00ednea de atenci\u00f3n y anticorrupci\u00f3n<\/strong>\r\n\r\n          <a href=\"tel:+576063515177\">\r\n            +57 606 351 5177\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Celular y atenci\u00f3n al cliente<\/strong>\r\n\r\n          <a\r\n            href=\"https:\/\/wa.me\/573148289785\"\r\n            target=\"_blank\"\r\n            rel=\"noopener noreferrer\"\r\n          >\r\n            +57 314 828 9785\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Correo electr\u00f3nico<\/strong>\r\n\r\n          <a href=\"mailto:serviciu@serviciudad.gov.co\">\r\n            serviciu@serviciudad.gov.co\r\n          <\/a>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- =====================================================\r\n         PANEL 2: PUNTOS DE PAGO\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"sc-panel-pagos\"\r\n      class=\"sc-info-panel\"\r\n      role=\"tabpanel\"\r\n      data-content=\"pagos\"\r\n      hidden\r\n    >\r\n      <div class=\"sc-info-grid\">\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Pago en l\u00ednea<\/strong>\r\n\r\n          Realiza el pago de tu factura de forma r\u00e1pida y segura\r\n          utilizando PSE.\r\n\r\n          <a\r\n            class=\"sc-info-boton\"\r\n            href=\"https:\/\/serviciudad.gov.co\/apppse\/\"\r\n            target=\"_blank\"\r\n            rel=\"noopener noreferrer\"\r\n          >\r\n            <!-- Icono peque\u00f1o del bot\u00f3n -->\r\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n              <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"><\/rect>\r\n              <path d=\"M3 9h18\"><\/path>\r\n              <path d=\"M7 15h4\"><\/path>\r\n            <\/svg>\r\n\r\n            Pagar por PSE\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Entidades bancarias<\/strong>\r\n\r\n          Davivienda, Colpatria, Banco Caja Social y Banco GNB.\r\n        <\/div>\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Puntos aliados<\/strong>\r\n\r\n          Redeban, Puntored y puntos de recaudo autorizados.\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- =====================================================\r\n         PANEL 3: HORARIOS DE ATENCI\u00d3N\r\n    ====================================================== -->\r\n\r\n    <div\r\n      id=\"sc-panel-horarios\"\r\n      class=\"sc-info-panel\"\r\n      role=\"tabpanel\"\r\n      data-content=\"horarios\"\r\n      hidden\r\n    >\r\n      <div class=\"sc-info-grid\">\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Sede principal<\/strong>\r\n\r\n          Diagonal 26A No. 21AT-04, Avenida las Torres,\r\n          Edificio Moretti, Dosquebradas.\r\n        <\/div>\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Atenci\u00f3n presencial<\/strong>\r\n\r\n          Lunes a jueves de 7:00 a. m. a 3:45 p. m.<br>\r\n          Viernes de 7:00 a. m. a 2:45 p. m.\r\n        <\/div>\r\n\r\n        <div class=\"sc-info-dato\">\r\n          <strong>Canales virtuales<\/strong>\r\n\r\n          Lunes a viernes de 7:00 a. m. a 6:00 p. m.<br>\r\n          Jornada continua.\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- =========================================================\r\n     JAVASCRIPT\r\n     \r\n     Se encarga de:\r\n     - Cambiar la pesta\u00f1a seleccionada.\r\n     - Mostrar el panel correspondiente.\r\n     - Cambiar al pasar el cursor en computadores.\r\n     - Permitir navegaci\u00f3n mediante teclado.\r\n========================================================== -->\r\n\r\n<script>\r\n  (function () {\r\n    \/*\r\n     * Busca solamente este componente.\r\n     * Esto evita interferencias con otros elementos de WordPress.\r\n     *\/\r\n\r\n    const componente = document.getElementById(\r\n      \"sc-serviciudad-info\"\r\n    );\r\n\r\n    if (!componente) {\r\n      return;\r\n    }\r\n\r\n    \/*\r\n     * Capturamos las pesta\u00f1as y los paneles.\r\n     *\/\r\n\r\n    const pestanas = Array.from(\r\n      componente.querySelectorAll(\".sc-info-tab\")\r\n    );\r\n\r\n    const paneles = Array.from(\r\n      componente.querySelectorAll(\".sc-info-panel\")\r\n    );\r\n\r\n    \/*\r\n     * Funci\u00f3n principal para activar una pesta\u00f1a.\r\n     *\/\r\n\r\n    function activarPanel(nombrePanel) {\r\n      pestanas.forEach(function (pestana) {\r\n        const estaActiva =\r\n          pestana.dataset.panel === nombrePanel;\r\n\r\n        \/*\r\n         * Agrega o elimina la clase visual.\r\n         *\/\r\n\r\n        pestana.classList.toggle(\r\n          \"activo\",\r\n          estaActiva\r\n        );\r\n\r\n        \/*\r\n         * Actualiza atributos de accesibilidad.\r\n         *\/\r\n\r\n        pestana.setAttribute(\r\n          \"aria-selected\",\r\n          estaActiva ? \"true\" : \"false\"\r\n        );\r\n\r\n        pestana.tabIndex = estaActiva ? 0 : -1;\r\n      });\r\n\r\n      paneles.forEach(function (panel) {\r\n        const estaActivo =\r\n          panel.dataset.content === nombrePanel;\r\n\r\n        panel.classList.toggle(\r\n          \"activo\",\r\n          estaActivo\r\n        );\r\n\r\n        \/*\r\n         * Oculta los contenidos que no est\u00e1n seleccionados.\r\n         *\/\r\n\r\n        panel.hidden = !estaActivo;\r\n      });\r\n    }\r\n\r\n    \/*\r\n     * Cambio mediante clic.\r\n     *\/\r\n\r\n    pestanas.forEach(function (pestana) {\r\n      pestana.addEventListener(\r\n        \"click\",\r\n        function () {\r\n          activarPanel(pestana.dataset.panel);\r\n        }\r\n      );\r\n    });\r\n\r\n    \/*\r\n     * En computadores tambi\u00e9n cambia al pasar el cursor.\r\n     * En celulares no se activa para evitar cambios accidentales.\r\n     *\/\r\n\r\n    const dispositivoConCursor = window.matchMedia(\r\n      \"(hover: hover) and (pointer: fine)\"\r\n    ).matches;\r\n\r\n    if (dispositivoConCursor) {\r\n      pestanas.forEach(function (pestana) {\r\n        pestana.addEventListener(\r\n          \"mouseenter\",\r\n          function () {\r\n            activarPanel(pestana.dataset.panel);\r\n          }\r\n        );\r\n      });\r\n    }\r\n\r\n    \/*\r\n     * Navegaci\u00f3n con las flechas del teclado.\r\n     *\/\r\n\r\n    pestanas.forEach(function (pestana, indice) {\r\n      pestana.addEventListener(\r\n        \"keydown\",\r\n        function (evento) {\r\n          let nuevoIndice = indice;\r\n\r\n          if (\r\n            evento.key === \"ArrowRight\" ||\r\n            evento.key === \"ArrowDown\"\r\n          ) {\r\n            nuevoIndice =\r\n              (indice + 1) % pestanas.length;\r\n          } else if (\r\n            evento.key === \"ArrowLeft\" ||\r\n            evento.key === \"ArrowUp\"\r\n          ) {\r\n            nuevoIndice =\r\n              (indice - 1 + pestanas.length) %\r\n              pestanas.length;\r\n          } else {\r\n            return;\r\n          }\r\n\r\n          evento.preventDefault();\r\n\r\n          const nuevaPestana =\r\n            pestanas[nuevoIndice];\r\n\r\n          activarPanel(\r\n            nuevaPestana.dataset.panel\r\n          );\r\n\r\n          nuevaPestana.focus();\r\n        }\r\n      );\r\n    });\r\n\r\n    \/*\r\n     * Garantiza que el primer panel inicie visible.\r\n     *\/\r\n\r\n    activarPanel(\"canales\");\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2cc2386 e-flex e-con-boxed e-con e-parent\" data-id=\"2cc2386\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f3344eb elementor-widget elementor-widget-html\" data-id=\"f3344eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"instituciones-container\">\r\n    <div class=\"instituciones\">\r\n\r\n        <a href=\"https:\/\/www.cra.gov.co\/\" target=\"_blank\">\r\n            <img decoding=\"async\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/boton-comision-regulacion-agua-potable-serviciudad.jpg\">\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/www.contaduria.gov.co\/\" target=\"_blank\">\r\n            <img decoding=\"async\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/boton-contaduria-serviciudad.jpg\">\r\n        <\/a>\r\n\r\n        <a href=\"http:\/\/www.contraloriadedosquebradas.gov.co\/\" target=\"_blank\">\r\n            <img decoding=\"async\" src=\"https:\/\/serviciudad.gov.co\/wr\/\/wp-content\/uploads\/2026\/06\/boton-contraloria-dosquebradas-serviciudad.jpg\">\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/www.dnp.gov.co\/\" target=\"_blank\">\r\n            <img decoding=\"async\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/boton-dnp-serviciudad.jpg\">\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/minvivienda.gov.co\/\" target=\"_blank\">\r\n            <img decoding=\"async\" src=\"https:\/\/serviciudad.gov.co\/wr\/wp-content\/uploads\/2026\/06\/boton-minvivianda-serviciudad.jpg\">\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/www.procuraduria.gov.co\/\" target=\"_blank\">\r\n            <img decoding=\"async\" src=\"https:\/\/serviciudad.gov.co\/wr\/\/wp-content\/uploads\/2026\/06\/boton-procuraduria-serviciudad.jpg\">\r\n        <\/a>\r\n\r\n        <a href=\"https:\/\/www.superservicios.gov.co\/\" target=\"_blank\">\r\n            <img decoding=\"async\" src=\"https:\/\/serviciudad.gov.co\/wr\/\/wp-content\/uploads\/2026\/06\/boton-superservicios-serviciudad.jpg\">\r\n        <\/a>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* \ud83d\udd25 M\u00c1S PEGADO AL FOOTER *\/\r\n.instituciones-container {\r\n    position: relative;\r\n    margin-top: 0px; \/* \ud83d\udd25 ajusta esto *\/\r\n    margin-bottom: -40px;\r\n    z-index: 10;\r\n}\r\n\r\n\/* \ud83d\udd25 TODO EN UNA SOLA L\u00cdNEA *\/\r\n.instituciones {\r\n    display:flex;\r\n    justify-content:center; \/* \ud83d\udc49 alineado a la derecha *\/\r\n    align-items:center;\r\n    gap:25px;\r\n    padding:20px 40px;\r\n    \r\n    flex-wrap:nowrap; \/* \ud83d\udd25 NO saltar l\u00ednea *\/\r\n    overflow-x:auto; \/* por si no caben *\/\r\n}\r\n\r\n\/* \ud83d\udd25 ICONOS M\u00c1S GRANDES *\/\r\n.instituciones img{\r\n    height:160px;\r\n    max-width:140px;\r\n    object-fit:contain;\r\n    transition:0.3s;\r\n}\r\n\r\n\/* hover *\/\r\n.instituciones img:hover{\r\n    transform:scale(1.1);\r\n}\r\n\r\n\/*  m\u00f3vil *\/\r\n@media (max-width:768px){\r\n    .instituciones {\r\n        justify-content:center;\r\n        flex-wrap:wrap;\r\n    }\r\n\r\n    .instituciones img{\r\n        height:70px;\r\n    }\r\n\r\n    .instituciones-container {\r\n        margin-top: -30px;\r\n    }\r\n}\r\n<\/style>\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-b2cceee e-flex e-con-boxed e-con e-parent\" data-id=\"b2cceee\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a8634b elementor-widget elementor-widget-html\" data-id=\"0a8634b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n     TRADUCTOR DE IDIOMAS - SERVICIUDAD\r\n\r\n     CARACTER\u00cdSTICAS:\r\n     - Bot\u00f3n grande y centrado\r\n     - No es flotante ni sticky\r\n     - Men\u00fa desplegable hacia abajo\r\n     - Banderas compatibles con navegadores\r\n     - Traducci\u00f3n completa de la p\u00e1gina\r\n     - Conserva el idioma entre p\u00e1ginas\r\n     - M\u00e9todo alternativo si Google es bloqueado\r\n========================================================== -->\r\n\r\n<section\r\n    id=\"sc-site-translator\"\r\n    class=\"notranslate\"\r\n    translate=\"no\"\r\n    aria-label=\"Selector de idioma\"\r\n>\r\n\r\n    <div class=\"sc-translator-container\">\r\n\r\n        <!-- BOT\u00d3N PRINCIPAL -->\r\n\r\n        <button\r\n            type=\"button\"\r\n            id=\"sc-translator-toggle\"\r\n            class=\"sc-translator-toggle\"\r\n            aria-expanded=\"false\"\r\n            aria-controls=\"sc-translator-menu\"\r\n        >\r\n\r\n            <span\r\n                id=\"sc-main-flag\"\r\n                class=\"sc-flag sc-flag-es\"\r\n                aria-hidden=\"true\"\r\n            ><\/span>\r\n\r\n            <span class=\"sc-main-language-info\">\r\n\r\n                <small>\r\n                    Seleccionar idioma\r\n                <\/small>\r\n\r\n                <strong id=\"sc-main-language-text\">\r\n                    Espa\u00f1ol\r\n                <\/strong>\r\n\r\n            <\/span>\r\n\r\n            <span\r\n                class=\"sc-translator-arrow\"\r\n                aria-hidden=\"true\"\r\n            >\r\n                \u25bc\r\n            <\/span>\r\n\r\n        <\/button>\r\n\r\n\r\n        <!-- MEN\u00da DE IDIOMAS -->\r\n\r\n        <div\r\n            id=\"sc-translator-menu\"\r\n            class=\"sc-translator-menu\"\r\n            role=\"menu\"\r\n            hidden\r\n        >\r\n\r\n            <!-- ESPA\u00d1OL -->\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"sc-language-option sc-language-selected\"\r\n                data-language=\"es\"\r\n                data-label=\"Espa\u00f1ol\"\r\n                data-flag-class=\"sc-flag-es\"\r\n                role=\"menuitem\"\r\n            >\r\n\r\n                <span\r\n                    class=\"sc-flag sc-flag-es\"\r\n                    aria-hidden=\"true\"\r\n                ><\/span>\r\n\r\n                <span class=\"sc-language-copy\">\r\n\r\n                    <strong>\r\n                        Espa\u00f1ol\r\n                    <\/strong>\r\n\r\n                    <small>\r\n                        Idioma original\r\n                    <\/small>\r\n\r\n                <\/span>\r\n\r\n                <span class=\"sc-language-check\">\r\n                    \u2713\r\n                <\/span>\r\n\r\n            <\/button>\r\n\r\n\r\n            <!-- INGL\u00c9S -->\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"sc-language-option\"\r\n                data-language=\"en\"\r\n                data-label=\"English\"\r\n                data-flag-class=\"sc-flag-us\"\r\n                role=\"menuitem\"\r\n            >\r\n\r\n                <span\r\n                    class=\"sc-flag sc-flag-us\"\r\n                    aria-hidden=\"true\"\r\n                ><\/span>\r\n\r\n                <span class=\"sc-language-copy\">\r\n\r\n                    <strong>\r\n                        English\r\n                    <\/strong>\r\n\r\n                    <small>\r\n                        Ingl\u00e9s\r\n                    <\/small>\r\n\r\n                <\/span>\r\n\r\n                <span class=\"sc-language-check\">\r\n                    \u2713\r\n                <\/span>\r\n\r\n            <\/button>\r\n\r\n\r\n            <!-- FRANC\u00c9S -->\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"sc-language-option\"\r\n                data-language=\"fr\"\r\n                data-label=\"Fran\u00e7ais\"\r\n                data-flag-class=\"sc-flag-fr\"\r\n                role=\"menuitem\"\r\n            >\r\n\r\n                <span\r\n                    class=\"sc-flag sc-flag-fr\"\r\n                    aria-hidden=\"true\"\r\n                ><\/span>\r\n\r\n                <span class=\"sc-language-copy\">\r\n\r\n                    <strong>\r\n                        Fran\u00e7ais\r\n                    <\/strong>\r\n\r\n                    <small>\r\n                        Franc\u00e9s\r\n                    <\/small>\r\n\r\n                <\/span>\r\n\r\n                <span class=\"sc-language-check\">\r\n                    \u2713\r\n                <\/span>\r\n\r\n            <\/button>\r\n\r\n\r\n            <!-- PORTUGU\u00c9S -->\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"sc-language-option\"\r\n                data-language=\"pt\"\r\n                data-label=\"Portugu\u00eas\"\r\n                data-flag-class=\"sc-flag-br\"\r\n                role=\"menuitem\"\r\n            >\r\n\r\n                <span\r\n                    class=\"sc-flag sc-flag-br\"\r\n                    aria-hidden=\"true\"\r\n                ><\/span>\r\n\r\n                <span class=\"sc-language-copy\">\r\n\r\n                    <strong>\r\n                        Portugu\u00eas\r\n                    <\/strong>\r\n\r\n                    <small>\r\n                        Portugu\u00e9s\r\n                    <\/small>\r\n\r\n                <\/span>\r\n\r\n                <span class=\"sc-language-check\">\r\n                    \u2713\r\n                <\/span>\r\n\r\n            <\/button>\r\n\r\n\r\n            <!-- ALEM\u00c1N -->\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"sc-language-option\"\r\n                data-language=\"de\"\r\n                data-label=\"Deutsch\"\r\n                data-flag-class=\"sc-flag-de\"\r\n                role=\"menuitem\"\r\n            >\r\n\r\n                <span\r\n                    class=\"sc-flag sc-flag-de\"\r\n                    aria-hidden=\"true\"\r\n                ><\/span>\r\n\r\n                <span class=\"sc-language-copy\">\r\n\r\n                    <strong>\r\n                        Deutsch\r\n                    <\/strong>\r\n\r\n                    <small>\r\n                        Alem\u00e1n\r\n                    <\/small>\r\n\r\n                <\/span>\r\n\r\n                <span class=\"sc-language-check\">\r\n                    \u2713\r\n                <\/span>\r\n\r\n            <\/button>\r\n\r\n\r\n            <!-- ITALIANO -->\r\n\r\n            <button\r\n                type=\"button\"\r\n                class=\"sc-language-option\"\r\n                data-language=\"it\"\r\n                data-label=\"Italiano\"\r\n                data-flag-class=\"sc-flag-it\"\r\n                role=\"menuitem\"\r\n            >\r\n\r\n                <span\r\n                    class=\"sc-flag sc-flag-it\"\r\n                    aria-hidden=\"true\"\r\n                ><\/span>\r\n\r\n                <span class=\"sc-language-copy\">\r\n\r\n                    <strong>\r\n                        Italiano\r\n                    <\/strong>\r\n\r\n                    <small>\r\n                        Italiano\r\n                    <\/small>\r\n\r\n                <\/span>\r\n\r\n                <span class=\"sc-language-check\">\r\n                    \u2713\r\n                <\/span>\r\n\r\n            <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- MENSAJE DE ESTADO -->\r\n\r\n        <div\r\n            id=\"sc-translator-status\"\r\n            class=\"sc-translator-status\"\r\n            aria-live=\"polite\"\r\n        ><\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!--\r\n        Google crea internamente el traductor en este elemento.\r\n\r\n        No se utiliza display:none porque algunos navegadores\r\n        impiden que Google inicialice correctamente el selector.\r\n    -->\r\n\r\n    <div\r\n        id=\"sc-google-translate-element\"\r\n        class=\"sc-google-translate-element\"\r\n        aria-hidden=\"true\"\r\n    ><\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<style>\r\n\/* =========================================================\r\n   1. AISLAMIENTO\r\n========================================================= *\/\r\n\r\n#sc-site-translator,\r\n#sc-site-translator *{\r\n    box-sizing:border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   2. CONTENEDOR GENERAL\r\n\r\n   No utiliza:\r\n   - position: fixed\r\n   - position: sticky\r\n   - transformaciones al hacer scroll\r\n========================================================= *\/\r\n\r\n#sc-site-translator{\r\n    position:relative !important;\r\n\r\n    top:auto !important;\r\n    right:auto !important;\r\n    bottom:auto !important;\r\n    left:auto !important;\r\n\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:flex-start;\r\n\r\n    width:100%;\r\n    max-width:100%;\r\n\r\n    min-height:auto;\r\n\r\n    margin:0 auto;\r\n    padding:20px 15px 35px;\r\n\r\n    overflow:visible !important;\r\n\r\n    transform:none !important;\r\n\r\n    font-family:inherit;\r\n\r\n    z-index:20;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-translator-container{\r\n    position:relative;\r\n\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n\r\n    width:300px;\r\n    max-width:100%;\r\n\r\n    margin:0 auto;\r\n\r\n    overflow:visible;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   3. BOT\u00d3N PRINCIPAL\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-translator-toggle{\r\n    position:relative;\r\n\r\n    display:grid;\r\n    grid-template-columns:54px minmax(0,1fr) 28px;\r\n    align-items:center;\r\n    gap:14px;\r\n\r\n    width:100%;\r\n    min-height:76px;\r\n\r\n    margin:0;\r\n    padding:12px 18px;\r\n\r\n    border:1px solid rgba(255,255,255,0.28);\r\n    border-radius:20px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #075da8 0%,\r\n            #16419c 100%\r\n        );\r\n\r\n    color:#ffffff;\r\n\r\n    cursor:pointer;\r\n\r\n    font-family:inherit;\r\n    text-align:left;\r\n\r\n    box-shadow:\r\n        0 14px 34px rgba(7,33,93,0.28),\r\n        inset 0 1px 0 rgba(255,255,255,0.20);\r\n\r\n    transform:none;\r\n\r\n    transition:\r\n        box-shadow 0.25s ease,\r\n        filter 0.25s ease;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-translator-toggle:hover{\r\n    filter:brightness(1.07);\r\n\r\n    box-shadow:\r\n        0 18px 40px rgba(7,33,93,0.34),\r\n        inset 0 1px 0 rgba(255,255,255,0.23);\r\n}\r\n\r\n\r\n#sc-site-translator .sc-translator-toggle:active{\r\n    filter:brightness(0.98);\r\n}\r\n\r\n\r\n#sc-site-translator .sc-translator-toggle:focus-visible{\r\n    outline:4px solid rgba(30,185,221,0.43);\r\n    outline-offset:4px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   4. TEXTO DEL BOT\u00d3N\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-main-language-info{\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n    gap:5px;\r\n\r\n    min-width:0;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-main-language-info small{\r\n    display:block;\r\n\r\n    color:rgba(255,255,255,0.72);\r\n\r\n    font-size:10px;\r\n    font-weight:700;\r\n    line-height:1;\r\n\r\n    letter-spacing:0.6px;\r\n    text-transform:uppercase;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-main-language-info strong{\r\n    display:block;\r\n\r\n    color:#ffffff;\r\n\r\n    font-size:19px;\r\n    font-weight:850;\r\n    line-height:1.1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   5. FLECHA\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-translator-arrow{\r\n    justify-self:end;\r\n\r\n    color:#ffffff;\r\n\r\n    font-size:11px;\r\n\r\n    transition:\r\n        transform 0.25s ease;\r\n}\r\n\r\n\r\n#sc-site-translator\r\n.sc-translator-toggle[aria-expanded=\"true\"]\r\n.sc-translator-arrow{\r\n    transform:rotate(180deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   6. MEN\u00da DESPLEGABLE HACIA ABAJO\r\n\r\n   El men\u00fa est\u00e1 dentro del flujo normal.\r\n   No sube ni cambia de lugar al hacer scroll.\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-translator-menu{\r\n    position:relative;\r\n\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:4px;\r\n\r\n    width:100%;\r\n\r\n    margin-top:13px;\r\n    padding:10px;\r\n\r\n    background:rgba(255,255,255,0.99);\r\n\r\n    border:1px solid rgba(7,33,93,0.12);\r\n    border-radius:20px;\r\n\r\n    box-shadow:\r\n        0 23px 55px rgba(7,33,93,0.24);\r\n\r\n    -webkit-backdrop-filter:blur(16px);\r\n    backdrop-filter:blur(16px);\r\n\r\n    overflow:visible;\r\n\r\n    z-index:30;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-translator-menu[hidden]{\r\n    display:none !important;\r\n}\r\n\r\n\r\n\/* Tri\u00e1ngulo decorativo *\/\r\n\r\n#sc-site-translator .sc-translator-menu::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    top:-7px;\r\n    left:50%;\r\n\r\n    width:14px;\r\n    height:14px;\r\n\r\n    background:#ffffff;\r\n\r\n    border-top:1px solid rgba(7,33,93,0.12);\r\n    border-left:1px solid rgba(7,33,93,0.12);\r\n\r\n    transform:\r\n        translateX(-50%)\r\n        rotate(45deg);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   7. OPCIONES DE IDIOMA\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-language-option{\r\n    position:relative;\r\n    z-index:2;\r\n\r\n    display:grid;\r\n    grid-template-columns:50px minmax(0,1fr) 28px;\r\n    align-items:center;\r\n    gap:12px;\r\n\r\n    width:100%;\r\n    min-height:64px;\r\n\r\n    margin:0;\r\n    padding:8px 11px;\r\n\r\n    border:0;\r\n    border-radius:14px;\r\n\r\n    background:transparent;\r\n    color:#07215d;\r\n\r\n    cursor:pointer;\r\n\r\n    font-family:inherit;\r\n    text-align:left;\r\n\r\n    transition:\r\n        background-color 0.20s ease,\r\n        box-shadow 0.20s ease;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-language-option:hover{\r\n    background:#edf7ff;\r\n\r\n    box-shadow:\r\n        inset 0 0 0 1px rgba(7,93,168,0.08);\r\n}\r\n\r\n\r\n#sc-site-translator .sc-language-option:focus-visible{\r\n    outline:3px solid rgba(30,185,221,0.36);\r\n    outline-offset:-2px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   8. TEXTO DE CADA IDIOMA\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-language-copy{\r\n    display:flex;\r\n    flex-direction:column;\r\n    gap:4px;\r\n\r\n    min-width:0;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-language-copy strong{\r\n    color:#07215d;\r\n\r\n    font-size:15px;\r\n    font-weight:850;\r\n    line-height:1.1;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-language-copy small{\r\n    color:#708096;\r\n\r\n    font-size:11px;\r\n    font-weight:500;\r\n    line-height:1;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   9. MARCA DEL IDIOMA ACTIVO\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-language-check{\r\n    display:none;\r\n    align-items:center;\r\n    justify-content:center;\r\n\r\n    width:26px;\r\n    height:26px;\r\n\r\n    background:#e1f5dc;\r\n    color:#388e3c;\r\n\r\n    border-radius:50%;\r\n\r\n    font-size:13px;\r\n    font-weight:900;\r\n}\r\n\r\n\r\n#sc-site-translator\r\n.sc-language-option.sc-language-selected{\r\n    background:#e8f5ff;\r\n\r\n    box-shadow:\r\n        inset 0 0 0 1px rgba(7,93,168,0.10);\r\n}\r\n\r\n\r\n#sc-site-translator\r\n.sc-language-option.sc-language-selected\r\n.sc-language-check{\r\n    display:flex;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   10. BANDERAS\r\n\r\n   Est\u00e1n construidas con CSS.\r\n   No dependen de emojis ni im\u00e1genes externas.\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-flag{\r\n    position:relative;\r\n\r\n    display:block;\r\n\r\n    width:48px;\r\n    height:34px;\r\n\r\n    overflow:hidden;\r\n\r\n    border:2px solid rgba(255,255,255,0.72);\r\n    border-radius:7px;\r\n\r\n    box-shadow:\r\n        0 4px 11px rgba(7,33,93,0.18);\r\n\r\n    flex:none;\r\n}\r\n\r\n\r\n\/* Espa\u00f1a *\/\r\n\r\n#sc-site-translator .sc-flag-es{\r\n    background:\r\n        linear-gradient(\r\n            to bottom,\r\n            #aa151b 0%,\r\n            #aa151b 25%,\r\n            #f1bf00 25%,\r\n            #f1bf00 75%,\r\n            #aa151b 75%,\r\n            #aa151b 100%\r\n        );\r\n}\r\n\r\n\r\n\/* Estados Unidos *\/\r\n\r\n#sc-site-translator .sc-flag-us{\r\n    background:\r\n        repeating-linear-gradient(\r\n            to bottom,\r\n            #b22234 0,\r\n            #b22234 2.62px,\r\n            #ffffff 2.62px,\r\n            #ffffff 5.24px\r\n        );\r\n}\r\n\r\n\r\n#sc-site-translator .sc-flag-us::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n    top:0;\r\n    left:0;\r\n\r\n    width:21px;\r\n    height:18px;\r\n\r\n    background:#3c3b6e;\r\n}\r\n\r\n\r\n\/* Francia *\/\r\n\r\n#sc-site-translator .sc-flag-fr{\r\n    background:\r\n        linear-gradient(\r\n            to right,\r\n            #0055a4 0%,\r\n            #0055a4 33.33%,\r\n            #ffffff 33.33%,\r\n            #ffffff 66.66%,\r\n            #ef4135 66.66%,\r\n            #ef4135 100%\r\n        );\r\n}\r\n\r\n\r\n\/* Brasil *\/\r\n\r\n#sc-site-translator .sc-flag-br{\r\n    background:#009b3a;\r\n}\r\n\r\n\r\n#sc-site-translator .sc-flag-br::before{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    top:6px;\r\n    left:10px;\r\n\r\n    width:25px;\r\n    height:20px;\r\n\r\n    background:#ffdf00;\r\n\r\n    transform:rotate(45deg);\r\n}\r\n\r\n\r\n#sc-site-translator .sc-flag-br::after{\r\n    content:\"\";\r\n\r\n    position:absolute;\r\n\r\n    top:10px;\r\n    left:17px;\r\n\r\n    width:14px;\r\n    height:14px;\r\n\r\n    background:#002776;\r\n\r\n    border-radius:50%;\r\n}\r\n\r\n\r\n\/* Alemania *\/\r\n\r\n#sc-site-translator .sc-flag-de{\r\n    background:\r\n        linear-gradient(\r\n            to bottom,\r\n            #000000 0%,\r\n            #000000 33.33%,\r\n            #dd0000 33.33%,\r\n            #dd0000 66.66%,\r\n            #ffce00 66.66%,\r\n            #ffce00 100%\r\n        );\r\n}\r\n\r\n\r\n\/* Italia *\/\r\n\r\n#sc-site-translator .sc-flag-it{\r\n    background:\r\n        linear-gradient(\r\n            to right,\r\n            #009246 0%,\r\n            #009246 33.33%,\r\n            #ffffff 33.33%,\r\n            #ffffff 66.66%,\r\n            #ce2b37 66.66%,\r\n            #ce2b37 100%\r\n        );\r\n}\r\n\r\n\r\n\/* La bandera principal es ligeramente m\u00e1s grande *\/\r\n\r\n#sc-site-translator #sc-main-flag{\r\n    width:52px;\r\n    height:38px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   11. MENSAJE DE ESTADO\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-translator-status{\r\n    display:none;\r\n\r\n    width:100%;\r\n\r\n    margin-top:10px;\r\n    padding:9px 12px;\r\n\r\n    background:#eef8ff;\r\n    color:#075da8;\r\n\r\n    border:1px solid rgba(7,93,168,0.13);\r\n    border-radius:12px;\r\n\r\n    font-size:12px;\r\n    font-weight:700;\r\n    line-height:1.4;\r\n    text-align:center;\r\n}\r\n\r\n\r\n#sc-site-translator\r\n.sc-translator-status.sc-status-visible{\r\n    display:block;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   12. CONTENEDOR INTERNO DE GOOGLE\r\n\r\n   Se deja fuera de la pantalla, pero disponible para que\r\n   Google construya el selector correctamente.\r\n========================================================= *\/\r\n\r\n#sc-site-translator .sc-google-translate-element{\r\n    position:fixed !important;\r\n\r\n    top:-10000px !important;\r\n    left:-10000px !important;\r\n\r\n    width:2px !important;\r\n    height:2px !important;\r\n\r\n    overflow:hidden !important;\r\n\r\n    opacity:0 !important;\r\n\r\n    pointer-events:none !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   13. OCULTAR LA BARRA VISUAL DE GOOGLE\r\n========================================================= *\/\r\n\r\n.goog-te-banner-frame,\r\n.goog-te-banner-frame.skiptranslate,\r\n.goog-te-balloon-frame,\r\n#goog-gt-tt,\r\n.goog-tooltip,\r\n.goog-tooltip:hover{\r\n    display:none !important;\r\n}\r\n\r\n\r\nbody{\r\n    top:0 !important;\r\n}\r\n\r\n\r\nhtml.translated-ltr body,\r\nhtml.translated-rtl body{\r\n    top:0 !important;\r\n}\r\n\r\n\r\n.goog-text-highlight{\r\n    background:transparent !important;\r\n\r\n    box-shadow:none !important;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   14. CELULARES\r\n========================================================= *\/\r\n\r\n@media(max-width:600px){\r\n\r\n    #sc-site-translator{\r\n        padding:16px 12px 30px;\r\n    }\r\n\r\n\r\n    #sc-site-translator .sc-translator-container{\r\n        width:min(300px, 94vw);\r\n    }\r\n\r\n\r\n    #sc-site-translator .sc-translator-toggle{\r\n        min-height:70px;\r\n\r\n        grid-template-columns:50px minmax(0,1fr) 24px;\r\n\r\n        padding:11px 15px;\r\n    }\r\n\r\n\r\n    #sc-site-translator #sc-main-flag{\r\n        width:48px;\r\n        height:34px;\r\n    }\r\n\r\n\r\n    #sc-site-translator .sc-main-language-info strong{\r\n        font-size:17px;\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   15. REDUCCI\u00d3N DE MOVIMIENTO\r\n========================================================= *\/\r\n\r\n@media(prefers-reduced-motion:reduce){\r\n\r\n    #sc-site-translator *,\r\n    #sc-site-translator *::before,\r\n    #sc-site-translator *::after{\r\n        animation:none !important;\r\n        transition:none !important;\r\n    }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n(function(){\r\n\r\n    \"use strict\";\r\n\r\n\r\n    \/* =====================================================\r\n       1. OBTENER EL COMPONENTE\r\n    ====================================================== *\/\r\n\r\n    const translator =\r\n        document.getElementById(\r\n            \"sc-site-translator\"\r\n        );\r\n\r\n\r\n    \/*\r\n     * Evita que Elementor lo inicialice dos veces.\r\n     *\/\r\n\r\n    if(\r\n        !translator ||\r\n        translator.dataset.initialized === \"true\"\r\n    ){\r\n        return;\r\n    }\r\n\r\n\r\n    translator.dataset.initialized =\r\n        \"true\";\r\n\r\n\r\n    const toggleButton =\r\n        translator.querySelector(\r\n            \"#sc-translator-toggle\"\r\n        );\r\n\r\n\r\n    const menu =\r\n        translator.querySelector(\r\n            \"#sc-translator-menu\"\r\n        );\r\n\r\n\r\n    const mainLanguageText =\r\n        translator.querySelector(\r\n            \"#sc-main-language-text\"\r\n        );\r\n\r\n\r\n    const mainFlag =\r\n        translator.querySelector(\r\n            \"#sc-main-flag\"\r\n        );\r\n\r\n\r\n    const statusBox =\r\n        translator.querySelector(\r\n            \"#sc-translator-status\"\r\n        );\r\n\r\n\r\n    const languageOptions =\r\n        Array.from(\r\n            translator.querySelectorAll(\r\n                \".sc-language-option\"\r\n            )\r\n        );\r\n\r\n\r\n    \/* =====================================================\r\n       2. CONFIGURACI\u00d3N DE IDIOMAS\r\n    ====================================================== *\/\r\n\r\n    const languages = {\r\n\r\n        es:{\r\n            label:\"Espa\u00f1ol\",\r\n            flagClass:\"sc-flag-es\"\r\n        },\r\n\r\n        en:{\r\n            label:\"English\",\r\n            flagClass:\"sc-flag-us\"\r\n        },\r\n\r\n        fr:{\r\n            label:\"Fran\u00e7ais\",\r\n            flagClass:\"sc-flag-fr\"\r\n        },\r\n\r\n        pt:{\r\n            label:\"Portugu\u00eas\",\r\n            flagClass:\"sc-flag-br\"\r\n        },\r\n\r\n        de:{\r\n            label:\"Deutsch\",\r\n            flagClass:\"sc-flag-de\"\r\n        },\r\n\r\n        it:{\r\n            label:\"Italiano\",\r\n            flagClass:\"sc-flag-it\"\r\n        }\r\n\r\n    };\r\n\r\n\r\n    \/* =====================================================\r\n       3. ABRIR Y CERRAR EL MEN\u00da\r\n    ====================================================== *\/\r\n\r\n    function openMenu(){\r\n\r\n        menu.hidden = false;\r\n\r\n\r\n        toggleButton.setAttribute(\r\n            \"aria-expanded\",\r\n            \"true\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function closeMenu(){\r\n\r\n        menu.hidden = true;\r\n\r\n\r\n        toggleButton.setAttribute(\r\n            \"aria-expanded\",\r\n            \"false\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    toggleButton.addEventListener(\r\n        \"click\",\r\n        function(event){\r\n\r\n            event.preventDefault();\r\n            event.stopPropagation();\r\n\r\n\r\n            if(menu.hidden){\r\n                openMenu();\r\n            }else{\r\n                closeMenu();\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"click\",\r\n        function(event){\r\n\r\n            if(\r\n                !translator.contains(\r\n                    event.target\r\n                )\r\n            ){\r\n                closeMenu();\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    document.addEventListener(\r\n        \"keydown\",\r\n        function(event){\r\n\r\n            if(event.key === \"Escape\"){\r\n\r\n                closeMenu();\r\n\r\n                toggleButton.focus();\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       4. MOSTRAR MENSAJE DE ESTADO\r\n    ====================================================== *\/\r\n\r\n    function showStatus(message){\r\n\r\n        statusBox.textContent =\r\n            message;\r\n\r\n\r\n        statusBox.classList.add(\r\n            \"sc-status-visible\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function hideStatus(){\r\n\r\n        statusBox.classList.remove(\r\n            \"sc-status-visible\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       5. LOCALSTORAGE SEGURO\r\n    ====================================================== *\/\r\n\r\n    function saveLocalLanguage(language){\r\n\r\n        try{\r\n\r\n            localStorage.setItem(\r\n                \"sc_serviciudad_language\",\r\n                language\r\n            );\r\n\r\n        }catch(error){\r\n\r\n            \/*\r\n             * Algunos navegadores o modos privados pueden\r\n             * bloquear localStorage. La traducci\u00f3n contin\u00faa.\r\n             *\/\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    function getLocalLanguage(){\r\n\r\n        try{\r\n\r\n            const saved =\r\n                localStorage.getItem(\r\n                    \"sc_serviciudad_language\"\r\n                );\r\n\r\n\r\n            if(languages[saved]){\r\n                return saved;\r\n            }\r\n\r\n        }catch(error){\r\n\r\n            \/*\r\n             * Se utiliza espa\u00f1ol como alternativa.\r\n             *\/\r\n\r\n        }\r\n\r\n\r\n        return \"es\";\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       6. ACTUALIZAR EL DISE\u00d1O DEL BOT\u00d3N\r\n    ====================================================== *\/\r\n\r\n    function updateInterface(language){\r\n\r\n        const selected =\r\n            languages[language] ||\r\n            languages.es;\r\n\r\n\r\n        mainLanguageText.textContent =\r\n            selected.label;\r\n\r\n\r\n        mainFlag.className =\r\n            \"sc-flag \" +\r\n            selected.flagClass;\r\n\r\n\r\n        languageOptions.forEach(\r\n            function(option){\r\n\r\n                option.classList.toggle(\r\n                    \"sc-language-selected\",\r\n\r\n                    option.dataset.language ===\r\n                    language\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n\r\n        saveLocalLanguage(\r\n            language\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       7. MANEJO DE COOKIES\r\n    ====================================================== *\/\r\n\r\n    function setCookie(\r\n        name,\r\n        value,\r\n        days,\r\n        domain\r\n    ){\r\n\r\n        const expiration =\r\n            new Date();\r\n\r\n\r\n        expiration.setTime(\r\n            expiration.getTime() +\r\n            days * 24 * 60 * 60 * 1000\r\n        );\r\n\r\n\r\n        let cookie =\r\n            name +\r\n            \"=\" +\r\n            encodeURIComponent(value) +\r\n            \"; expires=\" +\r\n            expiration.toUTCString() +\r\n            \"; path=\/\" +\r\n            \"; SameSite=Lax\";\r\n\r\n\r\n        if(domain){\r\n\r\n            cookie +=\r\n                \"; domain=\" +\r\n                domain;\r\n\r\n        }\r\n\r\n\r\n        document.cookie =\r\n            cookie;\r\n\r\n    }\r\n\r\n\r\n    function expireCookie(\r\n        name,\r\n        domain\r\n    ){\r\n\r\n        let cookie =\r\n            name +\r\n            \"=;\" +\r\n            \" expires=Thu, 01 Jan 1970 00:00:00 GMT;\" +\r\n            \" path=\/;\" +\r\n            \" SameSite=Lax\";\r\n\r\n\r\n        if(domain){\r\n\r\n            cookie +=\r\n                \"; domain=\" +\r\n                domain;\r\n\r\n        }\r\n\r\n\r\n        document.cookie =\r\n            cookie;\r\n\r\n    }\r\n\r\n\r\n    function getCookie(name){\r\n\r\n        const prefix =\r\n            name + \"=\";\r\n\r\n\r\n        const cookies =\r\n            document.cookie.split(\";\");\r\n\r\n\r\n        for(let cookie of cookies){\r\n\r\n            cookie =\r\n                cookie.trim();\r\n\r\n\r\n            if(\r\n                cookie.indexOf(prefix) === 0\r\n            ){\r\n\r\n                return decodeURIComponent(\r\n                    cookie.substring(\r\n                        prefix.length\r\n                    )\r\n                );\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        return \"\";\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       8. DOMINIOS POSIBLES PARA LA COOKIE\r\n\r\n       Incluye correctamente dominios .gov.co.\r\n    ====================================================== *\/\r\n\r\n    function getCookieDomains(){\r\n\r\n        const hostname =\r\n            window.location.hostname;\r\n\r\n\r\n        const domains = [\r\n            \"\",\r\n            hostname\r\n        ];\r\n\r\n\r\n        if(\r\n            hostname.indexOf(\"www.\") === 0\r\n        ){\r\n\r\n            const withoutWww =\r\n                hostname.substring(4);\r\n\r\n\r\n            domains.push(\r\n                withoutWww\r\n            );\r\n\r\n        }\r\n\r\n\r\n        \/*\r\n         * Para serviciudad.gov.co conserva los \u00faltimos\r\n         * tres segmentos, no solamente gov.co.\r\n         *\/\r\n\r\n        if(\r\n            hostname.endsWith(\".gov.co\")\r\n        ){\r\n\r\n            const parts =\r\n                hostname.split(\".\");\r\n\r\n\r\n            if(parts.length >= 3){\r\n\r\n                const rootGovDomain =\r\n                    parts\r\n                        .slice(-3)\r\n                        .join(\".\");\r\n\r\n\r\n                domains.push(\r\n                    rootGovDomain\r\n                );\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        return Array.from(\r\n            new Set(domains)\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function clearGoogleCookies(){\r\n\r\n        getCookieDomains().forEach(\r\n            function(domain){\r\n\r\n                expireCookie(\r\n                    \"googtrans\",\r\n                    domain\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    function saveGoogleCookie(language){\r\n\r\n        const cookieValue =\r\n            \"\/es\/\" + language;\r\n\r\n\r\n        getCookieDomains().forEach(\r\n            function(domain){\r\n\r\n                setCookie(\r\n                    \"googtrans\",\r\n                    cookieValue,\r\n                    365,\r\n                    domain\r\n                );\r\n\r\n            }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       9. DETECTAR EL IDIOMA ACTUAL\r\n    ====================================================== *\/\r\n\r\n    function getCurrentLanguage(){\r\n\r\n        const googleCookie =\r\n            getCookie(\r\n                \"googtrans\"\r\n            );\r\n\r\n\r\n        if(googleCookie){\r\n\r\n            const parts =\r\n                googleCookie.split(\"\/\");\r\n\r\n\r\n            const cookieLanguage =\r\n                parts[\r\n                    parts.length - 1\r\n                ];\r\n\r\n\r\n            if(languages[cookieLanguage]){\r\n                return cookieLanguage;\r\n            }\r\n\r\n        }\r\n\r\n\r\n        return getLocalLanguage();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       10. OBTENER LA URL ORIGINAL\r\n\r\n       Se usa \u00fanicamente como m\u00e9todo alternativo cuando\r\n       Google es bloqueado totalmente.\r\n    ====================================================== *\/\r\n\r\n    function getOriginalUrl(){\r\n\r\n        try{\r\n\r\n            const currentUrl =\r\n                new URL(\r\n                    window.location.href\r\n                );\r\n\r\n\r\n            if(\r\n                currentUrl.hostname.includes(\r\n                    \"translate.google\"\r\n                )\r\n            ){\r\n\r\n                const originalUrl =\r\n                    currentUrl.searchParams.get(\r\n                        \"u\"\r\n                    );\r\n\r\n\r\n                if(originalUrl){\r\n                    return originalUrl;\r\n                }\r\n\r\n            }\r\n\r\n\r\n            return window.location.href;\r\n\r\n        }catch(error){\r\n\r\n            return window.location.href;\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       11. M\u00c9TODO ALTERNATIVO\r\n\r\n       Solo se ejecuta cuando el navegador, una extensi\u00f3n\r\n       o la red bloquea el traductor integrado.\r\n    ====================================================== *\/\r\n\r\n    function useAlternativeTranslation(\r\n        language\r\n    ){\r\n\r\n        const originalUrl =\r\n            getOriginalUrl();\r\n\r\n\r\n        const translateUrl =\r\n            \"https:\/\/translate.google.com\/translate\" +\r\n            \"?sl=es\" +\r\n            \"&tl=\" +\r\n            encodeURIComponent(language) +\r\n            \"&u=\" +\r\n            encodeURIComponent(originalUrl);\r\n\r\n\r\n        window.location.assign(\r\n            translateUrl\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       12. APLICAR EL IDIOMA EN TODA LA P\u00c1GINA\r\n    ====================================================== *\/\r\n\r\n    function applyLanguage(\r\n        language,\r\n        useFallback\r\n    ){\r\n\r\n        useFallback =\r\n            useFallback !== false;\r\n\r\n\r\n        if(!languages[language]){\r\n            return;\r\n        }\r\n\r\n\r\n        updateInterface(\r\n            language\r\n        );\r\n\r\n\r\n        closeMenu();\r\n\r\n\r\n        \/*\r\n         * Volver a espa\u00f1ol.\r\n         *\/\r\n\r\n        if(language === \"es\"){\r\n\r\n            showStatus(\r\n                \"Restaurando el idioma original...\"\r\n            );\r\n\r\n\r\n            clearGoogleCookies();\r\n\r\n\r\n            saveLocalLanguage(\r\n                \"es\"\r\n            );\r\n\r\n\r\n            window.setTimeout(\r\n                function(){\r\n\r\n                    window.location.reload();\r\n\r\n                },\r\n\r\n                250\r\n            );\r\n\r\n\r\n            return;\r\n        }\r\n\r\n\r\n        showStatus(\r\n            \"Traduciendo toda la p\u00e1gina...\"\r\n        );\r\n\r\n\r\n        clearGoogleCookies();\r\n\r\n\r\n        saveGoogleCookie(\r\n            language\r\n        );\r\n\r\n\r\n        saveLocalLanguage(\r\n            language\r\n        );\r\n\r\n\r\n        \/*\r\n         * Intenta encontrar el selector interno de Google\r\n         * durante aproximadamente 10 segundos.\r\n         *\/\r\n\r\n        let attempts = 0;\r\n\r\n\r\n        const maximumAttempts =\r\n            50;\r\n\r\n\r\n        const interval =\r\n            window.setInterval(\r\n                function(){\r\n\r\n                    attempts += 1;\r\n\r\n\r\n                    const googleSelect =\r\n                        document.querySelector(\r\n                            \".goog-te-combo\"\r\n                        );\r\n\r\n\r\n                    if(googleSelect){\r\n\r\n                        window.clearInterval(\r\n                            interval\r\n                        );\r\n\r\n\r\n                        googleSelect.value =\r\n                            language;\r\n\r\n\r\n                        googleSelect.dispatchEvent(\r\n                            new Event(\r\n                                \"change\",\r\n                                {\r\n                                    bubbles:true\r\n                                }\r\n                            )\r\n                        );\r\n\r\n\r\n                        window.setTimeout(\r\n                            function(){\r\n\r\n                                hideStatus();\r\n\r\n                            },\r\n\r\n                            2200\r\n                        );\r\n\r\n\r\n                        return;\r\n                    }\r\n\r\n\r\n                    if(\r\n                        attempts >=\r\n                        maximumAttempts\r\n                    ){\r\n\r\n                        window.clearInterval(\r\n                            interval\r\n                        );\r\n\r\n\r\n                        \/*\r\n                         * Si Google fue bloqueado, utiliza\r\n                         * el m\u00e9todo alternativo.\r\n                         *\/\r\n\r\n                        if(useFallback){\r\n\r\n                            showStatus(\r\n                                \"Abriendo el traductor compatible...\"\r\n                            );\r\n\r\n\r\n                            window.setTimeout(\r\n                                function(){\r\n\r\n                                    useAlternativeTranslation(\r\n                                        language\r\n                                    );\r\n\r\n                                },\r\n\r\n                                500\r\n                            );\r\n\r\n                        }else{\r\n\r\n                            hideStatus();\r\n\r\n                        }\r\n\r\n                    }\r\n\r\n                },\r\n\r\n                200\r\n            );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       13. EVENTOS DE LAS OPCIONES\r\n    ====================================================== *\/\r\n\r\n    languageOptions.forEach(\r\n        function(option){\r\n\r\n            option.addEventListener(\r\n                \"click\",\r\n                function(event){\r\n\r\n                    event.preventDefault();\r\n                    event.stopPropagation();\r\n\r\n\r\n                    const language =\r\n                        option.dataset.language;\r\n\r\n\r\n                    applyLanguage(\r\n                        language,\r\n                        true\r\n                    );\r\n\r\n                }\r\n            );\r\n\r\n        }\r\n    );\r\n\r\n\r\n    \/* =====================================================\r\n       14. INICIALIZAR GOOGLE TRANSLATE\r\n    ====================================================== *\/\r\n\r\n    window.scServiciudadTranslateInit =\r\n        function(){\r\n\r\n            if(\r\n                !window.google ||\r\n                !window.google.translate ||\r\n                !window.google.translate.TranslateElement\r\n            ){\r\n                return;\r\n            }\r\n\r\n\r\n            const googleContainer =\r\n                document.getElementById(\r\n                    \"sc-google-translate-element\"\r\n                );\r\n\r\n\r\n            if(\r\n                !googleContainer ||\r\n                googleContainer.dataset.created ===\r\n                \"true\"\r\n            ){\r\n                return;\r\n            }\r\n\r\n\r\n            googleContainer.dataset.created =\r\n                \"true\";\r\n\r\n\r\n            new window.google.translate.TranslateElement(\r\n                {\r\n                    pageLanguage:\"es\",\r\n\r\n                    includedLanguages:\r\n                        \"es,en,fr,pt,de,it\",\r\n\r\n                    autoDisplay:false\r\n                },\r\n\r\n                \"sc-google-translate-element\"\r\n            );\r\n\r\n\r\n            \/*\r\n             * Si el usuario ya hab\u00eda seleccionado un idioma,\r\n             * se vuelve a aplicar al cargar una nueva p\u00e1gina.\r\n             *\/\r\n\r\n            const currentLanguage =\r\n                getCurrentLanguage();\r\n\r\n\r\n            updateInterface(\r\n                currentLanguage\r\n            );\r\n\r\n\r\n            if(\r\n                currentLanguage !== \"es\"\r\n            ){\r\n\r\n                window.setTimeout(\r\n                    function(){\r\n\r\n                        applyLanguage(\r\n                            currentLanguage,\r\n                            false\r\n                        );\r\n\r\n                    },\r\n\r\n                    700\r\n                );\r\n\r\n            }\r\n\r\n        };\r\n\r\n\r\n    \/* =====================================================\r\n       15. CARGAR GOOGLE UNA SOLA VEZ\r\n    ====================================================== *\/\r\n\r\n    function loadGoogleTranslate(){\r\n\r\n        if(\r\n            window.google &&\r\n            window.google.translate &&\r\n            window.google.translate.TranslateElement\r\n        ){\r\n\r\n            window.scServiciudadTranslateInit();\r\n\r\n            return;\r\n        }\r\n\r\n\r\n        \/*\r\n         * Elimina solamente scripts antiguos relacionados\r\n         * con este componente que hayan quedado incompletos.\r\n         *\/\r\n\r\n        const existingScript =\r\n            document.querySelector(\r\n                \"script[data-sc-serviciudad-translator]\"\r\n            );\r\n\r\n\r\n        if(existingScript){\r\n\r\n            \/*\r\n             * Espera a que el script existente termine\r\n             * de cargar.\r\n             *\/\r\n\r\n            let attempts = 0;\r\n\r\n\r\n            const waitInterval =\r\n                window.setInterval(\r\n                    function(){\r\n\r\n                        attempts += 1;\r\n\r\n\r\n                        if(\r\n                            window.google &&\r\n                            window.google.translate &&\r\n                            window.google.translate.TranslateElement\r\n                        ){\r\n\r\n                            window.clearInterval(\r\n                                waitInterval\r\n                            );\r\n\r\n\r\n                            window.scServiciudadTranslateInit();\r\n\r\n                            return;\r\n                        }\r\n\r\n\r\n                        if(attempts >= 50){\r\n\r\n                            window.clearInterval(\r\n                                waitInterval\r\n                            );\r\n\r\n                        }\r\n\r\n                    },\r\n\r\n                    200\r\n                );\r\n\r\n\r\n            return;\r\n        }\r\n\r\n\r\n        const script =\r\n            document.createElement(\r\n                \"script\"\r\n            );\r\n\r\n\r\n        script.src =\r\n            \"https:\/\/translate.google.com\/\" +\r\n            \"translate_a\/element.js\" +\r\n            \"?cb=scServiciudadTranslateInit\";\r\n\r\n\r\n        script.async = true;\r\n        script.defer = true;\r\n\r\n\r\n        script.setAttribute(\r\n            \"data-sc-serviciudad-translator\",\r\n            \"true\"\r\n        );\r\n\r\n\r\n        script.onerror =\r\n            function(){\r\n\r\n                console.warn(\r\n                    \"El navegador o la red bloque\u00f3 Google Translate.\"\r\n                );\r\n\r\n            };\r\n\r\n\r\n        document.head.appendChild(\r\n            script\r\n        );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       16. INICIALIZACI\u00d3N\r\n    ====================================================== *\/\r\n\r\n    closeMenu();\r\n\r\n\r\n    updateInterface(\r\n        getCurrentLanguage()\r\n    );\r\n\r\n\r\n    loadGoogleTranslate();\r\n\r\n})();\r\n<\/script>\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>\u00d7 ! Informaci\u00f3n importante En cumplimiento del derecho fundamental de petici\u00f3n garantizado en el art\u00edculo 23 de la Constituci\u00f3n Pol\u00edtica de Colombia y regulado por la Ley 1755 de 2015, se informa que todas las peticiones, quejas, reclamos y sugerencias (PQRS) presentadas o radicadas con posterioridad a las 4:01 p. m. de lunes a jueves [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-565","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","vertical_spacing_source":"custom","content_area_spacing":"none","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/pages\/565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/comments?post=565"}],"version-history":[{"count":363,"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/pages\/565\/revisions"}],"predecessor-version":[{"id":3253,"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/pages\/565\/revisions\/3253"}],"wp:attachment":[{"href":"https:\/\/serviciudad.gov.co\/wr\/wp-json\/wp\/v2\/media?parent=565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}