{"id":13833,"date":"2026-08-11T10:58:34","date_gmt":"2026-08-11T16:58:34","guid":{"rendered":"https:\/\/colon.gob.mx\/inicio\/?page_id=13833"},"modified":"2026-08-21T10:29:01","modified_gmt":"2026-08-21T16:29:01","slug":"seguridad-publica","status":"publish","type":"page","link":"https:\/\/colon.gob.mx\/inicio\/seguridad-publica\/","title":{"rendered":"Seguridad P\u00fablica"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13833\" class=\"elementor elementor-13833\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8ae75dd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8ae75dd\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c6dfe96\" data-id=\"c6dfe96\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-be87e4a elementor-widget elementor-widget-html\" data-id=\"be87e4a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  @import url('https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css');\n\n  \/* =========================================================\n     PALETA INSTITUCIONAL\n     ========================================================= *\/\n\n  :root {\n    --xonthe-purple: #470A68;\n    --xonthe-orange: #FD6125;\n    --xonthe-blue: #223265;\n\n    --xonthe-red: #C62828;\n\n    --xonthe-white: #FFFFFF;\n    --xonthe-muted: #666666;\n\n    --xonthe-shadow:\n      0 10px 30px rgba(71, 10, 104, 0.06);\n  }\n\n\n  \/* =========================================================\n     CONTENEDOR PRINCIPAL\n     ========================================================= *\/\n\n  .xonthe-assistance-section {\n    width: 100%;\n    max-width: 950px;\n\n    margin: 0px auto;\n    padding: 35px 25px;\n\n    background: var(--xonthe-white);\n\n    border-radius: 24px;\n\n    box-shadow: var(--xonthe-shadow);\n\n    border: 1px solid rgba(71, 10, 104, 0.08);\n\n    font-family:\n      system-ui,\n      -apple-system,\n      BlinkMacSystemFont,\n      \"Segoe UI\",\n      Roboto,\n      Arial,\n      sans-serif;\n\n    box-sizing: border-box;\n  }\n\n\n  \/* =========================================================\n     ENCABEZADO\n     ========================================================= *\/\n\n  .xonthe-assistance-header {\n    text-align: center;\n\n    max-width: 680px;\n\n    margin: 0 auto 30px auto;\n  }\n\n\n  .xonthe-assistance-header .badge-tag {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 6px;\n\n    background: rgba(253, 97, 37, 0.10);\n\n    color: var(--xonthe-orange);\n\n    font-size: 12px;\n    font-weight: 800;\n\n    padding: 6px 14px;\n\n    border-radius: 9999px;\n\n    text-transform: uppercase;\n\n    letter-spacing: 0.5px;\n\n    margin-bottom: 12px;\n  }\n\n\n  .xonthe-assistance-header .badge-tag i {\n    font-size: 12px;\n  }\n\n\n  .xonthe-assistance-header h2 {\n    font-size: 2rem;\n\n    font-weight: 800;\n\n    color: var(--xonthe-purple);\n\n    margin: 0 0 10px 0;\n\n    letter-spacing: -0.5px;\n\n    line-height: 1.15;\n  }\n\n\n  .xonthe-assistance-header p {\n    font-size: 0.95rem;\n\n    color: var(--xonthe-muted);\n\n    line-height: 1.6;\n\n    margin: 0;\n  }\n\n\n  .xonthe-assistance-header strong {\n    color: var(--xonthe-purple);\n\n    font-weight: 800;\n  }\n\n\n  \/* =========================================================\n     GRID DE TARJETAS\n     ========================================================= *\/\n\n  .xonthe-emergency-grid {\n    display: grid;\n\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n\n    gap: 20px;\n\n    margin-top: 25px;\n  }\n\n\n  \/* =========================================================\n     TARJETAS\n     ========================================================= *\/\n\n  .xonthe-emergency-card {\n    text-decoration: none !important;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: space-between;\n\n    padding: 22px 24px;\n\n    border-radius: 18px;\n\n    color: #ffffff !important;\n\n    position: relative;\n\n    overflow: hidden;\n\n    box-shadow:\n      0 6px 18px rgba(0, 0, 0, 0.08);\n\n    box-sizing: border-box;\n\n    min-height: 110px;\n\n\n    \/* Estado inicial *\/\n\n    opacity: 0;\n\n    transform: translateY(35px);\n\n\n    transition:\n      opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),\n      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),\n      box-shadow 0.25s ease;\n  }\n\n\n  \/* =========================================================\n     BRILLO SUTIL\n     ========================================================= *\/\n\n  .xonthe-emergency-card::after {\n    content: \"\";\n\n    position: absolute;\n\n    inset: 0;\n\n    background:\n      linear-gradient(\n        120deg,\n        rgba(255,255,255,0.08),\n        transparent 48%\n      );\n\n    pointer-events: none;\n  }\n\n\n  \/* =========================================================\n     ESTADO ACTIVO\n     ========================================================= *\/\n\n  .xonthe-emergency-card.is-visible {\n    opacity: 1;\n\n    transform: translateY(0);\n  }\n\n\n  \/* =========================================================\n     ANIMACI\u00d3N EN CASCADA\n     ========================================================= *\/\n\n  .xonthe-emergency-card.card-1.is-visible {\n    transition-delay: 0.10s;\n  }\n\n\n  .xonthe-emergency-card.card-2.is-visible {\n    transition-delay: 0.22s;\n  }\n\n\n  .xonthe-emergency-card.card-3.is-visible {\n    transition-delay: 0.08s;\n  }\n\n\n  \/* =========================================================\n     HOVER\n     ========================================================= *\/\n\n  .xonthe-emergency-card:hover {\n    transform: translateY(-4px) !important;\n\n    box-shadow:\n      0 14px 28px rgba(0, 0, 0, 0.15) !important;\n  }\n\n\n  .xonthe-emergency-card:active {\n    transform: translateY(-1px) !important;\n  }\n\n\n  \/* =========================================================\n     COLORES INSTITUCIONALES\n     ========================================================= *\/\n\n  .xonthe-emergency-card.security {\n    background: var(--xonthe-blue);\n  }\n\n\n  .xonthe-emergency-card.protection {\n    background: var(--xonthe-orange);\n  }\n\n\n  \/* =========================================================\n     911 \u2014 EMERGENCIAS\n     ========================================================= *\/\n\n  .xonthe-emergency-card.emergency {\n    grid-column: 1 \/ -1;\n\n    min-height: 118px;\n\n    background: var(--xonthe-red);\n  }\n\n\n  \/* =========================================================\n     CONTENIDO INTERNO\n     ========================================================= *\/\n\n  .xonthe-card-body-content {\n    display: flex;\n\n    align-items: center;\n\n    gap: 16px;\n\n    flex: 1;\n\n    min-width: 0;\n\n    position: relative;\n\n    z-index: 2;\n  }\n\n\n  \/* =========================================================\n     LOGOS\n     ========================================================= *\/\n\n  .xonthe-agency-logo {\n    width: 56px;\n\n    height: 56px;\n\n    object-fit: contain;\n\n    flex-shrink: 0;\n  }\n\n\n  \/* =========================================================\n     ICONO 911\n     ========================================================= *\/\n\n  .xonthe-emergency-icon {\n    width: 56px;\n\n    height: 56px;\n\n    flex: 0 0 56px;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    background: rgba(255,255,255,0.18);\n\n    border-radius: 50%;\n\n    color: #ffffff;\n\n    font-size: 24px;\n  }\n\n\n  \/* =========================================================\n     INFORMACI\u00d3N\n     ========================================================= *\/\n\n  .xonthe-agency-info {\n    display: flex;\n\n    flex-direction: column;\n\n    gap: 6px;\n\n    min-width: 0;\n  }\n\n\n  .xonthe-agency-info h3 {\n    font-size: 15px;\n\n    font-weight: 800;\n\n    margin: 0;\n\n    line-height: 1.25;\n\n    color: #ffffff;\n\n    white-space: normal;\n  }\n\n\n  \/* =========================================================\n     TEL\u00c9FONO\n     ========================================================= *\/\n\n  .xonthe-phone-line {\n    display: flex;\n\n    align-items: center;\n\n    gap: 8px;\n\n    flex-wrap: wrap;\n  }\n\n\n  .xonthe-phone-number {\n    font-size: 14px;\n\n    font-weight: 800;\n\n    white-space: nowrap;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 6px;\n\n    color: #ffffff;\n  }\n\n\n  .xonthe-phone-number i {\n    font-size: 12px;\n  }\n\n\n  \/* =========================================================\n     EXTENSI\u00d3N \/ ETIQUETA\n     ========================================================= *\/\n\n  .xonthe-ext-tag {\n    background: rgba(255,255,255,0.22);\n\n    color: #ffffff;\n\n    padding: 3px 8px;\n\n    border-radius: 6px;\n\n    font-size: 12px;\n\n    font-weight: 800;\n\n    white-space: nowrap;\n\n    letter-spacing: 0.3px;\n  }\n\n\n  \/* =========================================================\n     BOT\u00d3N DE LLAMADA\n     ========================================================= *\/\n\n  .xonthe-call-action {\n    width: 44px;\n\n    height: 44px;\n\n    background: rgba(255,255,255,0.18);\n\n    border-radius: 50%;\n\n    display: flex;\n\n    align-items: center;\n\n    justify-content: center;\n\n    font-size: 18px;\n\n    color: #ffffff;\n\n    flex-shrink: 0;\n\n    margin-left: 12px;\n\n    position: relative;\n\n    z-index: 2;\n\n    transition:\n      background 0.25s ease,\n      color 0.25s ease,\n      transform 0.25s ease;\n  }\n\n\n  .xonthe-emergency-card:hover .xonthe-call-action {\n    background: #ffffff;\n\n    color: var(--xonthe-purple);\n\n    transform: scale(1.08);\n  }\n\n\n  \/* =========================================================\n     911 \u2014 JERARQU\u00cdA MAYOR\n     ========================================================= *\/\n\n  .xonthe-emergency-card.emergency\n  .xonthe-agency-info h3 {\n    font-size: 18px;\n  }\n\n\n  .xonthe-emergency-card.emergency\n  .xonthe-phone-number {\n    font-size: 17px;\n  }\n\n\n  .xonthe-emergency-card.emergency\n  .xonthe-emergency-icon {\n    width: 60px;\n\n    height: 60px;\n\n    flex-basis: 60px;\n\n    font-size: 26px;\n  }\n\n\n  \/* =========================================================\n     SEPARADOR\n     ========================================================= *\/\n\n  .xonthe-assistance-divider {\n    grid-column: 1 \/ -1;\n\n    display: flex;\n\n    align-items: center;\n\n    gap: 14px;\n\n    margin: 0;\n  }\n\n\n  .xonthe-assistance-divider::before,\n  .xonthe-assistance-divider::after {\n    content: \"\";\n\n    height: 1px;\n\n    flex: 1;\n\n    background:\n      rgba(71, 10, 104, 0.16);\n  }\n\n\n  .xonthe-assistance-divider span {\n    color: var(--xonthe-purple);\n\n    font-size: 10px;\n\n    font-weight: 800;\n\n    letter-spacing: 0.8px;\n\n    text-transform: uppercase;\n\n    white-space: nowrap;\n  }\n\n\n  \/* =========================================================\n     RESPONSIVE \u2014 TABLET\n     ========================================================= *\/\n\n  @media (max-width: 819px) {\n\n    .xonthe-assistance-section {\n      margin: 30px auto;\n\n      padding: 30px 20px;\n\n      border-radius: 20px;\n    }\n\n\n    .xonthe-emergency-grid {\n      grid-template-columns: 1fr;\n\n      gap: 15px;\n    }\n\n\n    .xonthe-emergency-card.emergency {\n      grid-column: 1;\n    }\n\n\n    .xonthe-assistance-divider {\n      grid-column: 1;\n    }\n  }\n\n\n  \/* =========================================================\n     RESPONSIVE \u2014 M\u00d3VIL\n     ========================================================= *\/\n\n  @media (max-width: 480px) {\n\n    .xonthe-assistance-section {\n      padding: 26px 16px;\n    }\n\n\n    .xonthe-assistance-header {\n      margin-bottom: 24px;\n    }\n\n\n    .xonthe-assistance-header h2 {\n      font-size: 1.65rem;\n    }\n\n\n    .xonthe-assistance-header p {\n      font-size: 0.90rem;\n    }\n\n\n    .xonthe-emergency-card {\n      min-height: 100px;\n\n      padding: 18px 16px;\n\n      border-radius: 17px;\n    }\n\n\n    .xonthe-card-body-content {\n      gap: 12px;\n    }\n\n\n    .xonthe-agency-logo {\n      width: 50px;\n\n      height: 50px;\n    }\n\n\n    .xonthe-emergency-icon {\n      width: 50px;\n\n      height: 50px;\n\n      flex-basis: 50px;\n\n      font-size: 22px;\n    }\n\n\n    .xonthe-agency-info h3 {\n      font-size: 13px;\n    }\n\n\n    .xonthe-phone-number {\n      font-size: 13px;\n    }\n\n\n    .xonthe-ext-tag {\n      font-size: 10px;\n\n      padding: 3px 7px;\n    }\n\n\n    .xonthe-call-action {\n      width: 40px;\n\n      height: 40px;\n\n      margin-left: 8px;\n\n      flex-basis: 40px;\n    }\n\n\n    .xonthe-emergency-card.emergency {\n      min-height: 108px;\n    }\n\n\n    .xonthe-emergency-card.emergency\n    .xonthe-agency-info h3 {\n      font-size: 16px;\n    }\n\n\n    .xonthe-emergency-card.emergency\n    .xonthe-phone-number {\n      font-size: 15px;\n    }\n\n\n    .xonthe-emergency-card.emergency\n    .xonthe-emergency-icon {\n      width: 52px;\n\n      height: 52px;\n\n      flex-basis: 52px;\n\n      font-size: 23px;\n    }\n\n\n    .xonthe-assistance-divider {\n      gap: 10px;\n    }\n\n\n    .xonthe-assistance-divider span {\n      font-size: 9px;\n    }\n  }\n\n\n  \/* =========================================================\n     ACCESIBILIDAD\n     ========================================================= *\/\n\n  @media (prefers-reduced-motion: reduce) {\n\n    .xonthe-emergency-card {\n      opacity: 1;\n\n      transform: none;\n\n      transition:\n        box-shadow 0.2s ease;\n    }\n\n\n    .xonthe-emergency-card:hover {\n      transform: none !important;\n    }\n  }\n<\/style>\n\n\n<div class=\"xonthe-assistance-section\">\n\n  <!-- =====================================================\n       ENCABEZADO\n       ===================================================== -->\n\n  <div class=\"xonthe-assistance-header\">\n\n    <div class=\"badge-tag\">\n      <i class=\"fa-solid fa-headset\"><\/i>\n      Atenci\u00f3n y Orientaci\u00f3n\n    <\/div>\n\n    <h2>\n      Asistencia en el Evento\n    <\/h2>\n\n    <p>\n      Para cualquier consulta o eventualidad, elementos de\n      <strong>Seguridad Ciudadana<\/strong>,\n      <strong>Protecci\u00f3n Civil<\/strong> y\n      <strong>Servicios P\u00fablicos<\/strong>\n      estar\u00e1n disponibles en todo momento.\n    <\/p>\n\n  <\/div>\n\n\n  <!-- =====================================================\n       GRID\n       ===================================================== -->\n\n  <div class=\"xonthe-emergency-grid\">\n\n\n    <!-- ===================================================\n         911 \u2014 EMERGENCIAS\n         =================================================== -->\n\n    <a\n      href=\"tel:911\"\n      class=\"xonthe-emergency-card emergency card-3 js-xonthe-scroll-card\"\n      title=\"Llamar al 911\"\n      aria-label=\"Llamar al 911\"\n    >\n\n      <div class=\"xonthe-card-body-content\">\n\n        <div class=\"xonthe-emergency-icon\">\n          <i class=\"fa-solid fa-phone-volume\"><\/i>\n        <\/div>\n\n        <div class=\"xonthe-agency-info\">\n\n          <h3>\n            Emergencias\n          <\/h3>\n\n          <div class=\"xonthe-phone-line\">\n\n            <span class=\"xonthe-phone-number\">\n              <i class=\"fa-solid fa-phone\"><\/i>\n              911\n            <\/span>\n\n            <span class=\"xonthe-ext-tag\">\n              Atenci\u00f3n inmediata\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n      <div class=\"xonthe-call-action\">\n        <i class=\"fa-solid fa-phone-flip\"><\/i>\n      <\/div>\n\n    <\/a>\n\n\n    <!-- ===================================================\n         SEPARADOR\n         =================================================== -->\n\n    <div\n      class=\"xonthe-assistance-divider\"\n      aria-hidden=\"true\"\n    >\n      <span>\n        Atenci\u00f3n durante el evento\n      <\/span>\n    <\/div>\n\n\n    <!-- ===================================================\n         SEGURIDAD CIUDADANA\n         =================================================== -->\n\n    <a\n      href=\"tel:4192343700,1704\"\n      class=\"xonthe-emergency-card security card-1 js-xonthe-scroll-card\"\n      title=\"Llamar a Seguridad y Protecci\u00f3n Ciudadana\"\n      aria-label=\"Llamar a Seguridad y Protecci\u00f3n Ciudadana\"\n    >\n\n      <div class=\"xonthe-card-body-content\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/xonthe.colon.gob.mx\/wp-content\/uploads\/2025\/08\/LOGO_SSCP.png\"\n          alt=\"Secretar\u00eda de Seguridad y Protecci\u00f3n Ciudadana\"\n          class=\"xonthe-agency-logo\"\n        \/>\n\n        <div class=\"xonthe-agency-info\">\n\n          <h3>\n            Secretar\u00eda de Seguridad y Protecci\u00f3n Ciudadana\n          <\/h3>\n\n          <div class=\"xonthe-phone-line\">\n\n            <span class=\"xonthe-phone-number\">\n              <i class=\"fa-solid fa-phone\"><\/i>\n              419-234-3700\n            <\/span>\n\n            <span class=\"xonthe-ext-tag\">\n              Ext. 1704\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n      <div class=\"xonthe-call-action\">\n        <i class=\"fa-solid fa-phone-flip\"><\/i>\n      <\/div>\n\n    <\/a>\n\n\n    <!-- ===================================================\n         PROTECCI\u00d3N CIVIL\n         =================================================== -->\n\n    <a\n      href=\"tel:4192343700,2802\"\n      class=\"xonthe-emergency-card protection card-2 js-xonthe-scroll-card\"\n      title=\"Llamar a Protecci\u00f3n Civil\"\n      aria-label=\"Llamar a Protecci\u00f3n Civil\"\n    >\n\n      <div class=\"xonthe-card-body-content\">\n\n        <img decoding=\"async\"\n          src=\"https:\/\/xonthe.colon.gob.mx\/wp-content\/uploads\/2025\/08\/LOGO_PC.png\"\n          alt=\"Protecci\u00f3n Civil Municipal\"\n          class=\"xonthe-agency-logo\"\n        \/>\n\n        <div class=\"xonthe-agency-info\">\n\n          <h3>\n            Protecci\u00f3n Civil Municipal\n          <\/h3>\n\n          <div class=\"xonthe-phone-line\">\n\n            <span class=\"xonthe-phone-number\">\n              <i class=\"fa-solid fa-phone\"><\/i>\n              419-234-3700\n            <\/span>\n\n            <span class=\"xonthe-ext-tag\">\n              Ext. 2802\n            <\/span>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n      <div class=\"xonthe-call-action\">\n        <i class=\"fa-solid fa-phone-flip\"><\/i>\n      <\/div>\n\n    <\/a>\n\n  <\/div>\n\n<\/div>\n\n\n<script>\n  document.addEventListener('DOMContentLoaded', function () {\n\n    const cards = document.querySelectorAll(\n      '.js-xonthe-scroll-card'\n    );\n\n\n    if (!cards.length) {\n      return;\n    }\n\n\n    const observerOptions = {\n      root: null,\n\n      rootMargin: '0px 0px -50px 0px',\n\n      threshold: 0.15\n    };\n\n\n    const observer = new IntersectionObserver(\n      function (entries) {\n\n        entries.forEach(function (entry) {\n\n          if (entry.isIntersecting) {\n\n            entry.target.classList.add(\n              'is-visible'\n            );\n\n          } else {\n\n            entry.target.classList.remove(\n              'is-visible'\n            );\n\n          }\n\n        });\n\n      },\n      observerOptions\n    );\n\n\n    cards.forEach(function (card) {\n\n      observer.observe(card);\n\n    });\n\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5310164 elementor-widget elementor-widget-html\" data-id=\"5310164\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  \/* =========================================================\n     M\u00d3DULO DE PUBLICACIONES\n     CATEGOR\u00cdAS: SSPM + PC\n     WordPress REST API\n     ========================================================= *\/\n\n  :root {\n    --posts-purple: #470A68;\n    --posts-orange: #FD6125;\n    --posts-blue: #223265;\n\n    --posts-pc: #D96B00;\n\n    --posts-white: #FFFFFF;\n    --posts-text: #333333;\n    --posts-muted: #707070;\n    --posts-bg: #F8F8FA;\n\n    --posts-border: rgba(71, 10, 104, 0.10);\n  }\n\n\n  \/* =========================================================\n     CONTENEDOR PRINCIPAL\n     ========================================================= *\/\n\n  .municipal-posts-module {\n    width: 100%;\n    max-width: 1200px;\n\n    margin: 40px auto;\n    padding: 0;\n\n    box-sizing: border-box;\n\n    font-family:\n      system-ui,\n      -apple-system,\n      BlinkMacSystemFont,\n      \"Segoe UI\",\n      Roboto,\n      Arial,\n      sans-serif;\n  }\n\n\n  \/* =========================================================\n     ENCABEZADO\n     ========================================================= *\/\n\n  .municipal-posts-header {\n    max-width: 720px;\n\n    margin: 0 auto 35px;\n\n    text-align: center;\n  }\n\n\n  .municipal-posts-badge {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 7px;\n\n    margin-bottom: 12px;\n\n    padding: 7px 14px;\n\n    border-radius: 999px;\n\n    background: rgba(71, 10, 104, 0.08);\n\n    color: var(--posts-purple);\n\n    font-size: 11px;\n    font-weight: 800;\n\n    letter-spacing: 0.6px;\n\n    text-transform: uppercase;\n  }\n\n\n  .municipal-posts-badge i {\n    font-size: 11px;\n  }\n\n\n  .municipal-posts-title {\n    margin: 0 0 10px;\n\n    color: var(--posts-purple);\n\n    font-size: 32px;\n    line-height: 1.15;\n\n    font-weight: 800;\n\n    letter-spacing: -0.6px;\n  }\n\n\n  .municipal-posts-description {\n    margin: 0;\n\n    color: var(--posts-muted);\n\n    font-size: 15px;\n    line-height: 1.6;\n  }\n\n\n  \/* =========================================================\n     GRID\n     ========================================================= *\/\n\n  .municipal-posts-grid {\n    display: grid;\n\n    grid-template-columns:\n      repeat(3, minmax(0, 1fr));\n\n    gap: 24px;\n\n    width: 100%;\n  }\n\n\n  \/* =========================================================\n     TARJETA\n     ========================================================= *\/\n\n  .municipal-post-card {\n    display: flex;\n\n    flex-direction: column;\n\n    min-width: 0;\n\n    background: var(--posts-white);\n\n    border: 1px solid var(--posts-border);\n\n    border-radius: 18px;\n\n    overflow: hidden;\n\n    box-shadow:\n      0 8px 25px rgba(71, 10, 104, 0.06);\n\n    opacity: 0;\n\n    transform: translateY(30px);\n\n    transition:\n      opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),\n      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),\n      box-shadow 0.25s ease;\n  }\n\n\n  .municipal-post-card.is-visible {\n    opacity: 1;\n\n    transform: translateY(0);\n  }\n\n\n  .municipal-post-card:hover {\n    transform: translateY(-5px);\n\n    box-shadow:\n      0 16px 36px rgba(71, 10, 104, 0.13);\n  }\n\n\n  \/* =========================================================\n     IMAGEN\n     ========================================================= *\/\n\n  .municipal-post-image {\n    position: relative;\n\n    width: 100%;\n\n    aspect-ratio: 16 \/ 9;\n\n    overflow: hidden;\n\n    background:\n      linear-gradient(\n        135deg,\n        var(--posts-purple),\n        var(--posts-blue)\n      );\n  }\n\n\n  .municipal-post-image img {\n    display: block;\n\n    width: 100%;\n    height: 100%;\n\n    object-fit: cover;\n\n    transition:\n      transform 0.45s ease;\n  }\n\n\n  .municipal-post-card:hover\n  .municipal-post-image img {\n    transform: scale(1.045);\n  }\n\n\n  \/* =========================================================\n     PLACEHOLDER\n     ========================================================= *\/\n\n  .municipal-post-placeholder {\n    position: absolute;\n\n    inset: 0;\n\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    color: rgba(255, 255, 255, 0.9);\n\n    font-size: 36px;\n  }\n\n\n  \/* =========================================================\n     ETIQUETA DE CATEGOR\u00cdA\n     ========================================================= *\/\n\n  .municipal-post-category {\n    position: absolute;\n\n    left: 14px;\n    bottom: 14px;\n\n    z-index: 2;\n\n    display: inline-flex;\n\n    align-items: center;\n\n    gap: 6px;\n\n    padding: 6px 10px;\n\n    border-radius: 7px;\n\n    color: #FFFFFF;\n\n    font-size: 10px;\n    font-weight: 800;\n\n    letter-spacing: 0.5px;\n\n    text-transform: uppercase;\n\n    box-shadow:\n      0 4px 12px rgba(0, 0, 0, 0.15);\n  }\n\n\n  .municipal-post-category.sspm {\n    background: var(--posts-blue);\n  }\n\n\n  .municipal-post-category.pc {\n    background: var(--posts-pc);\n  }\n\n\n  \/* =========================================================\n     CONTENIDO\n     ========================================================= *\/\n\n  .municipal-post-content {\n    display: flex;\n\n    flex-direction: column;\n\n    flex: 1;\n\n    padding: 21px;\n  }\n\n\n  \/* =========================================================\n     FECHA\n     ========================================================= *\/\n\n  .municipal-post-date {\n    display: flex;\n\n    align-items: center;\n\n    gap: 6px;\n\n    margin-bottom: 9px;\n\n    color: var(--posts-orange);\n\n    font-size: 11px;\n\n    font-weight: 800;\n\n    letter-spacing: 0.3px;\n\n    text-transform: uppercase;\n  }\n\n\n  .municipal-post-date i {\n    font-size: 10px;\n  }\n\n\n  \/* =========================================================\n     T\u00cdTULO\n     ========================================================= *\/\n\n  .municipal-post-card-title {\n    margin: 0 0 10px;\n\n    color: var(--posts-purple);\n\n    font-size: 18px;\n\n    line-height: 1.3;\n\n    font-weight: 800;\n  }\n\n\n  .municipal-post-card-title a {\n    color: inherit !important;\n\n    text-decoration: none !important;\n  }\n\n\n  .municipal-post-card-title a:hover {\n    color: var(--posts-orange) !important;\n  }\n\n\n  \/* =========================================================\n     EXTRACTO\n     ========================================================= *\/\n\n  .municipal-post-excerpt {\n    margin: 0 0 20px;\n\n    color: var(--posts-muted);\n\n    font-size: 13px;\n\n    line-height: 1.6;\n\n    display: -webkit-box;\n\n    -webkit-line-clamp: 3;\n\n    -webkit-box-orient: vertical;\n\n    overflow: hidden;\n  }\n\n\n  \/* =========================================================\n     BOT\u00d3N\n     ========================================================= *\/\n\n  .municipal-post-link {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    align-self: flex-start;\n\n    gap: 8px;\n\n    margin-top: auto;\n\n    padding: 9px 14px;\n\n    border-radius: 8px;\n\n    background: var(--posts-purple);\n\n    color: #FFFFFF !important;\n\n    text-decoration: none !important;\n\n    font-size: 12px;\n    font-weight: 800;\n\n    transition:\n      background 0.25s ease,\n      transform 0.25s ease;\n  }\n\n\n  .municipal-post-link:hover {\n    background: var(--posts-orange);\n\n    color: #FFFFFF !important;\n\n    transform: translateX(3px);\n  }\n\n\n  \/* =========================================================\n     CARGANDO\n     ========================================================= *\/\n\n  .municipal-posts-loading {\n    display: flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 10px;\n\n    min-height: 180px;\n\n    color: var(--posts-purple);\n\n    font-size: 14px;\n    font-weight: 700;\n  }\n\n\n  .municipal-post-spinner {\n    width: 22px;\n    height: 22px;\n\n    border-radius: 50%;\n\n    border: 3px solid rgba(71, 10, 104, 0.15);\n\n    border-top-color: var(--posts-purple);\n\n    animation:\n      municipal-post-spin 0.8s linear infinite;\n  }\n\n\n  @keyframes municipal-post-spin {\n\n    to {\n      transform: rotate(360deg);\n    }\n\n  }\n\n\n  \/* =========================================================\n     SIN RESULTADOS\n     ========================================================= *\/\n\n  .municipal-posts-empty {\n    display: none;\n\n    padding: 50px 20px;\n\n    text-align: center;\n\n    color: var(--posts-muted);\n  }\n\n\n  .municipal-posts-empty i {\n    display: block;\n\n    margin-bottom: 12px;\n\n    color: var(--posts-purple);\n\n    font-size: 30px;\n  }\n\n\n  .municipal-posts-empty strong {\n    display: block;\n\n    margin-bottom: 5px;\n\n    color: var(--posts-purple);\n\n    font-size: 16px;\n  }\n\n\n  \/* =========================================================\n     ERROR\n     ========================================================= *\/\n\n  .municipal-posts-error {\n    display: none;\n\n    padding: 25px;\n\n    border-radius: 14px;\n\n    background: rgba(253, 97, 37, 0.08);\n\n    border: 1px solid rgba(253, 97, 37, 0.18);\n\n    color: var(--posts-orange);\n\n    text-align: center;\n\n    font-size: 14px;\n  }\n\n\n  \/* =========================================================\n     CARGAR M\u00c1S\n     ========================================================= *\/\n\n  .municipal-posts-load-container {\n    display: flex;\n\n    justify-content: center;\n\n    margin-top: 30px;\n  }\n\n\n  .municipal-posts-load-more {\n    display: inline-flex;\n\n    align-items: center;\n    justify-content: center;\n\n    gap: 9px;\n\n    padding: 12px 20px;\n\n    border: 0;\n\n    border-radius: 10px;\n\n    background: var(--posts-purple);\n\n    color: #FFFFFF;\n\n    font-family: inherit;\n\n    font-size: 13px;\n    font-weight: 800;\n\n    cursor: pointer;\n\n    transition:\n      background 0.25s ease,\n      transform 0.25s ease,\n      opacity 0.25s ease;\n  }\n\n\n  .municipal-posts-load-more:hover {\n    background: var(--posts-orange);\n\n    transform: translateY(-2px);\n  }\n\n\n  .municipal-posts-load-more:disabled {\n    opacity: 0.6;\n\n    cursor: wait;\n\n    transform: none;\n  }\n\n\n  \/* =========================================================\n     RESPONSIVE\n     ========================================================= *\/\n\n  @media (max-width: 900px) {\n\n    .municipal-posts-grid {\n      grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n      gap: 18px;\n    }\n\n  }\n\n\n  @media (max-width: 600px) {\n\n    .municipal-posts-module {\n      margin: 30px auto;\n    }\n\n\n    .municipal-posts-title {\n      font-size: 26px;\n    }\n\n\n    .municipal-posts-description {\n      font-size: 14px;\n    }\n\n\n    .municipal-posts-grid {\n      grid-template-columns: 1fr;\n\n      gap: 16px;\n    }\n\n\n    .municipal-post-content {\n      padding: 18px;\n    }\n\n\n    .municipal-post-card-title {\n      font-size: 17px;\n    }\n\n  }\n\n\n  \/* =========================================================\n     REDUCIR MOVIMIENTO\n     ========================================================= *\/\n\n  @media (prefers-reduced-motion: reduce) {\n\n    .municipal-post-card {\n      opacity: 1;\n\n      transform: none;\n\n      transition:\n        box-shadow 0.2s ease;\n    }\n\n\n    .municipal-post-card:hover {\n      transform: none;\n    }\n\n  }\n<\/style>\n\n\n<!-- =========================================================\n     HTML\n     ========================================================= -->\n\n<div\n  id=\"municipal-posts-module\"\n  class=\"municipal-posts-module\"\n>\n\n  <div class=\"municipal-posts-header\">\n\n    <div class=\"municipal-posts-badge\">\n\n      <i class=\"fa-solid fa-shield-halved\"><\/i>\n\n      Seguridad y Protecci\u00f3n\n\n    <\/div>\n\n\n    <h2 class=\"municipal-posts-title\">\n      Seguridad P\u00fablica\n    <\/h2>\n\n\n    <p class=\"municipal-posts-description\">\n\n      Informaci\u00f3n, acciones y comunicados de la\n      Secretar\u00eda de Seguridad y Protecci\u00f3n Ciudadana\n      y Protecci\u00f3n Civil del Municipio de Col\u00f3n.\n\n    <\/p>\n\n  <\/div>\n\n\n  <div\n    class=\"municipal-posts-loading\"\n    data-municipal-loading\n  >\n\n    <span class=\"municipal-post-spinner\"><\/span>\n\n    <span>\n      Cargando publicaciones...\n    <\/span>\n\n  <\/div>\n\n\n  <div\n    class=\"municipal-posts-error\"\n    data-municipal-error\n  >\n\n    <i class=\"fa-solid fa-circle-exclamation\"><\/i>\n\n    No fue posible cargar las publicaciones.\n\n  <\/div>\n\n\n  <div\n    class=\"municipal-posts-empty\"\n    data-municipal-empty\n  >\n\n    <i class=\"fa-regular fa-newspaper\"><\/i>\n\n    <strong>\n      No hay publicaciones disponibles\n    <\/strong>\n\n    <span>\n      Actualmente no existen publicaciones\n      en estas categor\u00edas.\n    <\/span>\n\n  <\/div>\n\n\n  <div\n    class=\"municipal-posts-grid\"\n    data-municipal-grid\n  ><\/div>\n\n\n  <div\n    class=\"municipal-posts-load-container\"\n    data-municipal-load-container\n    style=\"display:none;\"\n  >\n\n    <button\n      type=\"button\"\n      class=\"municipal-posts-load-more\"\n      data-municipal-load\n    >\n\n      <i class=\"fa-solid fa-plus\"><\/i>\n\n      Cargar m\u00e1s\n\n    <\/button>\n\n  <\/div>\n\n<\/div>\n\n\n<script>\n(function () {\n\n  'use strict';\n\n\n  \/* =========================================================\n     CONFIGURACI\u00d3N\n     ========================================================= *\/\n\n  const CONFIG = {\n\n    \/*\n     * URL REAL DE WORDPRESS\n     *\/\n    API_BASE:\n      'https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2',\n\n\n    \/*\n     * CATEGOR\u00cdAS A MOSTRAR\n     *\n     * Se buscan autom\u00e1ticamente por slug.\n     *\/\n    CATEGORY_SLUGS: [\n      'sspm',\n      'pc'\n    ],\n\n\n    \/*\n     * PUBLICACIONES POR P\u00c1GINA\n     *\/\n    POSTS_PER_PAGE: 6,\n\n\n    \/*\n     * ORDEN\n     *\/\n    ORDER_BY: 'date',\n\n    ORDER: 'desc'\n\n  };\n\n\n  \/* =========================================================\n     ELEMENTOS\n     ========================================================= *\/\n\n  const module =\n    document.getElementById(\n      'municipal-posts-module'\n    );\n\n\n  if (!module) {\n    return;\n  }\n\n\n  const grid =\n    module.querySelector(\n      '[data-municipal-grid]'\n    );\n\n\n  const loading =\n    module.querySelector(\n      '[data-municipal-loading]'\n    );\n\n\n  const errorBox =\n    module.querySelector(\n      '[data-municipal-error]'\n    );\n\n\n  const emptyBox =\n    module.querySelector(\n      '[data-municipal-empty]'\n    );\n\n\n  const loadContainer =\n    module.querySelector(\n      '[data-municipal-load-container]'\n    );\n\n\n  const loadButton =\n    module.querySelector(\n      '[data-municipal-load]'\n    );\n\n\n  \/* =========================================================\n     ESTADO\n     ========================================================= *\/\n\n  let categoryIds = [];\n\n  let currentPage = 1;\n\n  let loadingPosts = false;\n\n  let hasMorePosts = true;\n\n\n  \/* =========================================================\n     ESCAPAR HTML\n     ========================================================= *\/\n\n  function escapeHTML(value) {\n\n    if (\n      value === null ||\n      value === undefined\n    ) {\n\n      return '';\n\n    }\n\n\n    return String(value)\n      .replace(\/&\/g, '&amp;')\n      .replace(\/<\/g, '&lt;')\n      .replace(\/>\/g, '&gt;')\n      .replace(\/\"\/g, '&quot;')\n      .replace(\/'\/g, '&#039;');\n\n  }\n\n\n  \/* =========================================================\n     LIMPIAR TEXTO DE WORDPRESS\n     ========================================================= *\/\n\n  function cleanText(html) {\n\n    const temp =\n      document.createElement('div');\n\n    temp.innerHTML =\n      html || '';\n\n    return (\n      temp.textContent ||\n      temp.innerText ||\n      ''\n    )\n      .replace(\/\\s+\/g, ' ')\n      .trim();\n\n  }\n\n\n  \/* =========================================================\n     FECHA\n     ========================================================= *\/\n\n  function formatDate(dateString) {\n\n    if (!dateString) {\n      return '';\n    }\n\n\n    const date =\n      new Date(dateString);\n\n\n    return new Intl.DateTimeFormat(\n      'es-MX',\n      {\n        day: 'numeric',\n        month: 'short',\n        year: 'numeric'\n      }\n    ).format(date);\n\n  }\n\n\n  \/* =========================================================\n     OBTENER IMAGEN DESTACADA\n     ========================================================= *\/\n\n  function getFeaturedImage(post) {\n\n    try {\n\n      const media =\n        post._embedded &&\n        post._embedded[\n          'wp:featuredmedia'\n        ];\n\n\n      if (\n        media &&\n        media.length &&\n        media[0].source_url\n      ) {\n\n        return media[0].source_url;\n\n      }\n\n    } catch (error) {\n\n      console.warn(\n        'Error obteniendo imagen:',\n        error\n      );\n\n    }\n\n\n    return null;\n\n  }\n\n\n  \/* =========================================================\n     DETERMINAR CATEGOR\u00cdA\n     ========================================================= *\/\n\n  function getPostCategory(post) {\n\n    \/*\n     * WordPress devuelve los IDs\n     * de las categor\u00edas en post.categories.\n     *\n     * Buscamos cu\u00e1l de nuestras categor\u00edas\n     * corresponde al post.\n     *\/\n\n    if (\n      !post.categories ||\n      !Array.isArray(post.categories)\n    ) {\n\n      return {\n        slug: 'sspm',\n        name: 'SSPM'\n      };\n\n    }\n\n\n    \/*\n     * El orden de CATEGORY_SLUGS coincide\n     * con la prioridad visual.\n     *\/\n\n    for (\n      let i = 0;\n      i < categoryIds.length;\n      i++\n    ) {\n\n      if (\n        post.categories.includes(\n          categoryIds[i]\n        )\n      ) {\n\n        const slug =\n          CONFIG.CATEGORY_SLUGS[i];\n\n\n        if (slug === 'pc') {\n\n          return {\n            slug: 'pc',\n            name: 'Protecci\u00f3n Civil'\n          };\n\n        }\n\n\n        return {\n          slug: 'sspm',\n          name: 'SSPM'\n        };\n\n      }\n\n    }\n\n\n    return {\n      slug: 'sspm',\n      name: 'SSPM'\n    };\n\n  }\n\n\n  \/* =========================================================\n     CREAR TARJETA\n     ========================================================= *\/\n\n  function createCard(post, index) {\n\n    const title =\n      cleanText(\n        post.title &&\n        post.title.rendered\n      );\n\n\n    const excerpt =\n      cleanText(\n        post.excerpt &&\n        post.excerpt.rendered\n      );\n\n\n    const image =\n      getFeaturedImage(post);\n\n\n    const date =\n      formatDate(post.date);\n\n\n    const url =\n      post.link || '#';\n\n\n    const category =\n      getPostCategory(post);\n\n\n    let imageHTML;\n\n\n    if (image) {\n\n      imageHTML = `\n\n        <img decoding=\"async\"\n          src=\"${escapeHTML(image)}\"\n          alt=\"${escapeHTML(title)}\"\n          loading=\"lazy\"\n        \/>\n\n      `;\n\n    } else {\n\n      imageHTML = `\n\n        <div\n          class=\"municipal-post-placeholder\"\n        >\n\n          <i\n            class=\"fa-solid ${\n              category.slug === 'pc'\n                ? 'fa-triangle-exclamation'\n                : 'fa-shield-halved'\n            }\"\n          ><\/i>\n\n        <\/div>\n\n      `;\n\n    }\n\n\n    const card =\n      document.createElement('article');\n\n\n    card.className =\n      'municipal-post-card';\n\n\n    card.innerHTML = `\n\n      <div class=\"municipal-post-image\">\n\n        ${imageHTML}\n\n\n        <div\n          class=\"\n            municipal-post-category\n            ${escapeHTML(category.slug)}\n          \"\n        >\n\n          <i\n            class=\"fa-solid ${\n              category.slug === 'pc'\n                ? 'fa-triangle-exclamation'\n                : 'fa-shield-halved'\n            }\"\n          ><\/i>\n\n          ${escapeHTML(category.name)}\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"municipal-post-content\">\n\n\n        ${\n          date\n            ? `\n\n              <div\n                class=\"municipal-post-date\"\n              >\n\n                <i\n                  class=\"fa-regular fa-calendar\"\n                ><\/i>\n\n                ${escapeHTML(date)}\n\n              <\/div>\n\n            `\n            : ''\n        }\n\n\n        <h3\n          class=\"municipal-post-card-title\"\n        >\n\n          <a\n            href=\"${escapeHTML(url)}\"\n          >\n\n            ${escapeHTML(title)}\n\n          <\/a>\n\n        <\/h3>\n\n\n        ${\n          excerpt\n            ? `\n\n              <p\n                class=\"municipal-post-excerpt\"\n              >\n\n                ${escapeHTML(excerpt)}\n\n              <\/p>\n\n            `\n            : ''\n        }\n\n\n        <a\n          class=\"municipal-post-link\"\n          href=\"${escapeHTML(url)}\"\n        >\n\n          Leer publicaci\u00f3n\n\n          <i\n            class=\"fa-solid fa-arrow-right\"\n          ><\/i>\n\n        <\/a>\n\n\n      <\/div>\n\n    `;\n\n\n    \/*\n     * Animaci\u00f3n escalonada.\n     *\/\n\n    card.style.transitionDelay =\n      `${Math.min(index * 0.07, 0.35)}s`;\n\n\n    return card;\n\n  }\n\n\n  \/* =========================================================\n     OBSERVER DE ANIMACI\u00d3N\n     ========================================================= *\/\n\n  function observeCards() {\n\n    const cards =\n      grid.querySelectorAll(\n        '.municipal-post-card'\n      );\n\n\n    if (\n      !('IntersectionObserver' in window)\n    ) {\n\n      cards.forEach(\n        function (card) {\n\n          card.classList.add(\n            'is-visible'\n          );\n\n        }\n      );\n\n      return;\n\n    }\n\n\n    const observer =\n      new IntersectionObserver(\n        function (entries, obs) {\n\n          entries.forEach(\n            function (entry) {\n\n              if (\n                entry.isIntersecting\n              ) {\n\n                entry.target.classList.add(\n                  'is-visible'\n                );\n\n\n                obs.unobserve(\n                  entry.target\n                );\n\n              }\n\n            }\n          );\n\n        },\n        {\n          threshold: 0.12\n        }\n      );\n\n\n    cards.forEach(\n      function (card) {\n\n        observer.observe(card);\n\n      }\n    );\n\n  }\n\n\n  \/* =========================================================\n     OBTENER IDs DE LAS CATEGOR\u00cdAS\n     ========================================================= *\/\n\n  async function getCategories() {\n\n    const ids = [];\n\n\n    for (\n      const slug\n      of CONFIG.CATEGORY_SLUGS\n    ) {\n\n      const url =\n        `${CONFIG.API_BASE}\/categories` +\n        `?slug=${encodeURIComponent(slug)}` +\n        `&per_page=1`;\n\n\n      const response =\n        await fetch(\n          url,\n          {\n            method: 'GET',\n\n            headers: {\n              'Accept':\n                'application\/json'\n            }\n          }\n        );\n\n\n      if (!response.ok) {\n\n        throw new Error(\n          `Error buscando categor\u00eda \"${slug}\": ${response.status}`\n        );\n\n      }\n\n\n      const categories =\n        await response.json();\n\n\n      if (\n        Array.isArray(categories) &&\n        categories.length\n      ) {\n\n        ids.push(\n          categories[0].id\n        );\n\n      } else {\n\n        console.warn(\n          `No se encontr\u00f3 la categor\u00eda: ${slug}`\n        );\n\n      }\n\n    }\n\n\n    if (!ids.length) {\n\n      throw new Error(\n        'No se encontraron las categor\u00edas SSPM o PC.'\n      );\n\n    }\n\n\n    return ids;\n\n  }\n\n\n  \/* =========================================================\n     OBTENER PUBLICACIONES\n     ========================================================= *\/\n\n  async function getPosts(page) {\n\n    const params =\n      new URLSearchParams({\n\n        \/*\n         * WordPress acepta m\u00faltiples\n         * IDs separados por coma.\n         *\/\n        categories:\n          categoryIds.join(','),\n\n\n        per_page:\n          String(\n            CONFIG.POSTS_PER_PAGE\n          ),\n\n\n        page:\n          String(page),\n\n\n        orderby:\n          CONFIG.ORDER_BY,\n\n\n        order:\n          CONFIG.ORDER,\n\n\n        \/*\n         * Incluye imagen destacada,\n         * autor y otros datos relacionados.\n         *\/\n        _embed:\n          '1'\n\n      });\n\n\n    const url =\n      `${CONFIG.API_BASE}\/posts?${params.toString()}`;\n\n\n    const response =\n      await fetch(\n        url,\n        {\n          method: 'GET',\n\n          headers: {\n            'Accept':\n              'application\/json'\n          }\n        }\n      );\n\n\n    \/*\n     * WordPress devuelve 400 cuando\n     * se solicita una p\u00e1gina inexistente.\n     *\/\n    if (\n      response.status === 400\n    ) {\n\n      return {\n        posts: [],\n        hasMore: false\n      };\n\n    }\n\n\n    if (!response.ok) {\n\n      throw new Error(\n        `Error cargando publicaciones: ${response.status}`\n      );\n\n    }\n\n\n    const posts =\n      await response.json();\n\n\n    const totalPages =\n      parseInt(\n        response.headers.get(\n          'X-WP-TotalPages'\n        ) || '1',\n        10\n      );\n\n\n    return {\n\n      posts:\n        Array.isArray(posts)\n          ? posts\n          : [],\n\n\n      hasMore:\n        page < totalPages\n\n    };\n\n  }\n\n\n  \/* =========================================================\n     CARGAR PUBLICACIONES\n     ========================================================= *\/\n\n  async function loadPosts(\n    page,\n    append\n  ) {\n\n    if (loadingPosts) {\n      return;\n    }\n\n\n    if (\n      !hasMorePosts &&\n      append\n    ) {\n\n      return;\n\n    }\n\n\n    loadingPosts =\n      true;\n\n\n    if (!append) {\n\n      loading.style.display =\n        'flex';\n\n\n      errorBox.style.display =\n        'none';\n\n\n      emptyBox.style.display =\n        'none';\n\n    }\n\n\n    loadButton.disabled =\n      true;\n\n\n    try {\n\n      const result =\n        await getPosts(page);\n\n\n      const posts =\n        result.posts;\n\n\n      hasMorePosts =\n        result.hasMore;\n\n\n      \/*\n       * No hay publicaciones.\n       *\/\n      if (\n        !append &&\n        !posts.length\n      ) {\n\n        loading.style.display =\n          'none';\n\n\n        emptyBox.style.display =\n          'block';\n\n\n        loadContainer.style.display =\n          'none';\n\n\n        return;\n\n      }\n\n\n      \/*\n       * Agregar tarjetas.\n       *\/\n      posts.forEach(\n        function (post, index) {\n\n          const card =\n            createCard(\n              post,\n              index\n            );\n\n\n          grid.appendChild(\n            card\n          );\n\n        }\n      );\n\n\n      \/*\n       * Activar animaciones.\n       *\/\n      observeCards();\n\n\n      loading.style.display =\n        'none';\n\n\n      currentPage =\n        page;\n\n\n      \/*\n       * Mostrar\/ocultar\n       * \"Cargar m\u00e1s\".\n       *\/\n      if (hasMorePosts) {\n\n        loadContainer.style.display =\n          'flex';\n\n      } else {\n\n        loadContainer.style.display =\n          'none';\n\n      }\n\n    } catch (error) {\n\n      console.error(\n        'Municipal Posts:',\n        error\n      );\n\n\n      loading.style.display =\n        'none';\n\n\n      if (!append) {\n\n        errorBox.style.display =\n          'block';\n\n      }\n\n    } finally {\n\n      loadingPosts =\n        false;\n\n\n      loadButton.disabled =\n        false;\n\n    }\n\n  }\n\n\n  \/* =========================================================\n     BOT\u00d3N CARGAR M\u00c1S\n     ========================================================= *\/\n\n  loadButton.addEventListener(\n    'click',\n    function () {\n\n      loadPosts(\n        currentPage + 1,\n        true\n      );\n\n    }\n  );\n\n\n  \/* =========================================================\n     INICIALIZACI\u00d3N\n     ========================================================= *\/\n\n  async function init() {\n\n    try {\n\n      \/*\n       * Obtener IDs:\n       *\n       * SSPM\n       * PC\n       *\/\n      categoryIds =\n        await getCategories();\n\n\n      \/*\n       * Primera p\u00e1gina.\n       *\/\n      await loadPosts(\n        1,\n        false\n      );\n\n    } catch (error) {\n\n      console.error(\n        'Municipal Posts:',\n        error\n      );\n\n\n      loading.style.display =\n        'none';\n\n\n      errorBox.style.display =\n        'block';\n\n    }\n\n  }\n\n\n  init();\n\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Atenci\u00f3n y Orientaci\u00f3n Asistencia en el Evento Para cualquier consulta o eventualidad, elementos de Seguridad Ciudadana, Protecci\u00f3n Civil y Servicios P\u00fablicos estar\u00e1n disponibles en todo momento. Emergencias 911 Atenci\u00f3n inmediata Atenci\u00f3n durante el evento Secretar\u00eda de Seguridad y Protecci\u00f3n Ciudadana 419-234-3700 Ext. 1704 Protecci\u00f3n Civil Municipal 419-234-3700 Ext. 2802 Seguridad &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-13833","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/pages\/13833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/comments?post=13833"}],"version-history":[{"count":13,"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/pages\/13833\/revisions"}],"predecessor-version":[{"id":14043,"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/pages\/13833\/revisions\/14043"}],"wp:attachment":[{"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/media?parent=13833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}