{"id":169,"date":"2019-04-09T15:41:06","date_gmt":"2019-04-09T15:41:06","guid":{"rendered":"https:\/\/colon.gob.mx\/inicio\/?page_id=169"},"modified":"2025-12-23T20:13:25","modified_gmt":"2025-12-23T20:13:25","slug":"gabinete","status":"publish","type":"page","link":"https:\/\/colon.gob.mx\/inicio\/gabinete\/","title":{"rendered":"Gabinete"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"169\" class=\"elementor elementor-169\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9246af3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9246af3\" 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-34b7e3a\" data-id=\"34b7e3a\" 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-c64fa9c elementor-widget elementor-widget-html\" data-id=\"c64fa9c\" 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<!-- Header Web: Gabinete Municipal (con Descripci\u00f3n de Secci\u00f3n) -->\r\n<section class=\"gabinete-header\">\r\n  <div class=\"gabinete-header__inner\">\r\n  \r\n    <!-- T\u00edtulo principal -->\r\n    <h2 class=\"gabinete-header__title\">\r\n      Gabinete Municipal\r\n    <\/h2>\r\n    <!-- Subt\u00edtulo -->\r\n    <div class=\"gabinete-header__subtitle\">\r\n      <strong>Administraci\u00f3n 2024 \u2013 2027<\/strong>\r\n    <\/div>\r\n    <!-- Descripci\u00f3n completa de secci\u00f3n -->\r\n    <div class=\"gabinete-header__desc\">\r\n      <p>\r\n        El <strong>Gabinete Municipal<\/strong> est\u00e1 conformado por las y los titulares de las diferentes dependencias que apoyan directamente al Presidente Municipal en la operaci\u00f3n diaria y la ejecuci\u00f3n de pol\u00edticas p\u00fablicas del Ayuntamiento de Col\u00f3n.\r\n      <\/p>\r\n      <p>\r\n        En cumplimiento de las obligaciones de transparencia, se presenta la informaci\u00f3n de cada integrante del gabinete, incluyendo cargo, fotograf\u00eda y una breve descripci\u00f3n de sus funciones.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <!-- Nota de acceso -->\r\n    <div class=\"gabinete-header__note\">\r\n      <i class=\"fa-solid fa-circle-info\"><\/i>\r\n      <span>Informaci\u00f3n vigente y actualizada | Administraci\u00f3n 2024-2027<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- ============================================================ -->\r\n<style>\r\n  .gabinete-header {\r\n    background: #fff;\r\n    border-left: 6px solid #470a68;\r\n    padding: 2.5rem;\r\n    margin: 0 auto 2rem auto;\r\n    border-radius: 0 0 .75rem .75rem;\r\n    box-shadow: 0 4px 14px rgba(71, 10, 104, .12);\r\n    max-width: 1300px;\r\n  }\r\n  .gabinete-header__inner {\r\n    margin: 0 auto;\r\n    text-align: left;\r\n  }\r\n  .gabinete-header__title {\r\n    font-size: 2.3rem;\r\n    font-weight: 700;\r\n    color: #470a68;\r\n    margin: 0 0 1.4rem;\r\n    text-align: center;\r\n    position: relative;\r\n  }\r\n  .gabinete-header__title::after {\r\n    content: '';\r\n    display: block;\r\n    width: 80px;\r\n    height: 4px;\r\n    background: #fd6125;\r\n    margin: .9rem auto 0;\r\n    border-radius: 2px;\r\n  }\r\n  .gabinete-header__subtitle {\r\n    text-align: center;\r\n    font-size: 1.35rem;\r\n    color: #470a68;\r\n    margin-bottom: 1.6rem;\r\n    font-weight: 600;\r\n  }\r\n  .gabinete-header__desc {\r\n    font-size: 1.05rem;\r\n    line-height: 1.7;\r\n    color: #333;\r\n    margin-bottom: 1.6rem;\r\n  }\r\n  .gabinete-header__desc p {\r\n    margin: 0 0 1.1rem;\r\n  }\r\n  .gabinete-header__desc strong {\r\n    color: #470a68;\r\n    font-weight: 600;\r\n  }\r\n  .gabinete-header__contact {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    background: #fff8f0;\r\n    padding: 1rem 1.3rem;\r\n    border-radius: .6rem;\r\n    border: 1px solid #ffd4b3;\r\n    margin-bottom: 1.4rem;\r\n    font-size: 1.05rem;\r\n    color: #470a68;\r\n  }\r\n  .gabinete-header__contact i {\r\n    font-size: 1rem;\r\n    color: #fd6125;\r\n  }\r\n  .contact-title {\r\n    color: #fd6125;\r\n  }\r\n  .contact-phone {\r\n    font-weight: 700;\r\n    font-size: 1.2rem;\r\n    color: #fd6125;\r\n  }\r\n  .gabinete-header__note {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: .75rem;\r\n    background: #68bd9d30;\r\n    padding: 1rem 1.3rem;\r\n    border-radius: .6rem;\r\n    font-size: .98rem;\r\n    color: #68bd9d;\r\n    border: 1px solid #68bd9d50;\r\n    font-weight: 500;\r\n  }\r\n  .gabinete-header__note i {\r\n    font-size: 1.2rem;\r\n    color: #68bd9d;\r\n  }\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .gabinete-header {\r\n      padding: 1.8rem;\r\n      margin: 1.5rem auto;\r\n    }\r\n    .gabinete-header__title {\r\n      font-size: 2rem;\r\n    }\r\n    .gabinete-header__subtitle {\r\n      font-size: 1.2rem;\r\n    }\r\n  }\r\n  @media (max-width: 480px) {\r\n    .gabinete-header__note,\r\n    .gabinete-header__contact {\r\n      flex-direction: column;\r\n      text-align: center;\r\n      font-size: .92rem;\r\n    }\r\n    .gabinete-header__title::after {\r\n      width: 60px;\r\n    }\r\n  }\r\n<\/style>\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fb1adc4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fb1adc4\" 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-0f9bca5\" data-id=\"0f9bca5\" 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-365fa98 elementor-widget elementor-widget-html\" data-id=\"365fa98\" 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>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');\r\n:root {\r\n  --primario: #470a68;\r\n  --secundario: #fd6125;\r\n  --comp1: #68bd9d;\r\n  --comp2: #ffbb17;\r\n  --neutro: #4a4a4a;\r\n  --fondo: #f4f4f4;\r\n}\r\n* {\r\n  box-sizing: border-box;\r\n}\r\nhtml, body {\r\n  margin: 0;\r\n  font-family: 'Roboto', system-ui, sans-serif;\r\n  background: var(--fondo);\r\n}\r\n\/* ================= CONTENEDOR ================= *\/\r\n.ayuntamiento {\r\n  padding: 0px 20px;\r\n}\r\n.container {\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\/* ================= HEADERS ================= *\/\r\n.section-header {\r\n  text-align: left;\r\n  margin-bottom: 32px;\r\n}\r\n.section-header h2 {\r\n  margin: 0;\r\n  font-size: 34px;\r\n  color: var(--primario);\r\n  font-weight: 700;\r\n}\r\n.section-subtitle {\r\n  max-width: 900px;\r\n  margin-top: 10px;\r\n  font-size: 16px;\r\n  color: #666;\r\n}\r\n\/* ================= CARDS ================= *\/\r\n.card {\r\n  background: #fff;\r\n  border-radius: 18px;\r\n  overflow: hidden;\r\n  box-shadow: 0 12px 32px rgba(0,0,0,.08);\r\n  max-width: 700px;\r\n  margin: 0 auto;\r\n  transition: box-shadow 0.3s ease;\r\n}\r\n.card:hover{\r\n  box-shadow: 0 12px 32px #470a6840;\r\n}\r\n\/* ================= HEADER ================= *\/\r\n.card-header-secondary {\r\n  flex-direction: column;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 15px;\r\n  color: #fff;\r\n  background: var(--neutro);\r\n  transition: background 0.35s ease; \/* Transici\u00f3n suave del color *\/\r\n}\r\n.card:hover .card-header-secondary {\r\n  background: var(--secundario); \/* Cambia a naranja al hover de la tarjeta *\/\r\n}\r\n\/* ================= AVATAR ================= *\/\r\n.avatar-secondary {\r\n  position: relative;\r\n  cursor: pointer;\r\n  flex-shrink: 0;\r\n}\r\n.avatar-secondary img {\r\n  width: 120px;\r\n  height: 120px;\r\n  border-radius: 50%;\r\n  object-fit: cover;\r\n  border: 4px solid rgba(255,255,255,.35);\r\n  transition: transform .35s ease;\r\n}\r\n.avatar-secondary .expand {\r\n  position: absolute;\r\n  bottom: 8px;\r\n  right: 8px;\r\n  width: 32px;\r\n  height: 32px;\r\n  background: rgba(255,255,255,.5);\r\n  color: #fff;\r\n  border-radius: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  opacity: 1;\r\n  transition: transform .35s ease, opacity .25s ease, background .25s ease;\r\n}\r\n.avatar-secondary:hover img {\r\n  transform: scale(1.06);\r\n}\r\n.avatar-secondary:hover .expand,\r\n.avatar-secondary .expand:hover {\r\n  opacity: 1;\r\n  background: rgba(255,255,255,1);\r\n  transform: scale(1.15);\r\n}\r\n.avatar-secondary i{\r\n    margin-top: 2px;\r\n}\r\n.avatar-secondary:hover i{\r\n    color: #470a68;\r\n}\r\n\/* ================= INFO ================= *\/\r\n.info-secondary h3 {\r\n  margin: 0;\r\n  font-size: 20px;\r\n  font-weight: 700;\r\n  text-align: center;\r\n  font-family: 'Roboto', sans-serif; !important;\r\n  line-height: 1.3;\r\n  padding: 0 15px;\r\n}\r\n.info-secondary p {\r\n  padding: 0 15px;\r\n  text-align: center;\r\n  margin-top: 6px;\r\n  font-size: 15px;\r\n  opacity: .9;\r\n  font-family: 'Roboto', sans-serif; !important;\r\n}\r\n\/* ================= BODY ================= *\/\r\n.card-body {\r\n  padding: 28px;\r\n  color: #555;\r\n  font-size: 13px;\r\n  line-height: 1.65;\r\n  text-align: left;\r\n}\r\n\/* ================= GRID ================= *\/\r\n.grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 20px;\r\n  margin-bottom: 40px;\r\n}\r\n\/* ================= MODAL ================= *\/\r\n.modal {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: rgba(0,0,0,.8);\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 9999;\r\n}\r\n.modal.active {\r\n  display: flex;\r\n}\r\n.modal-content {\r\n  position: relative;\r\n  background: #fff;\r\n  border-radius: 18px;\r\n  padding: 26px;\r\n  max-width: 520px;\r\n  width: 90%;\r\n}\r\n.modal-content img {\r\n  width: 100%;\r\n  border-radius: 14px;\r\n  margin-bottom: 18px;\r\n}\r\n.modal-content h3 {\r\n  margin: 0;\r\n  font-size: 22px;\r\n  color: var(--secundario);\r\n  font-weight: 600;\r\n  font-family: 'Roboto', sans-serif; !important;\r\n}\r\n.modal-content p {\r\n  margin-top: 6px;\r\n  font-size: 16px;\r\n  color: #666;\r\n  font-family: 'Roboto', sans-serif; !important;\r\n  text-align: center;\r\n  font-weight: 700;\r\n}\r\n\/* Bot\u00f3n cerrar *\/\r\n.modal-close {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px;\r\n  width: 36px;\r\n  height: 36px;\r\n  background: #000;\r\n  color: #fff;\r\n  border-radius: 50%;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  opacity: .7;\r\n  transition: opacity .25s ease;\r\n}\r\n.modal-close:hover {\r\n  opacity: 1;\r\n}\r\n\/* ================= RESPONSIVE ================= *\/\r\n@media (max-width: 900px) {\r\n  .grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n<\/style>\r\n<section class=\"ayuntamiento\">\r\n  <div class=\"container\">\r\n    <!-- GABINETE -->\r\n    <div class=\"grid\" id=\"gabinete-grid\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n<!-- MODAL -->\r\n<div class=\"modal\" id=\"imageModal\">\r\n  <div class=\"modal-content\">\r\n    <div class=\"modal-close\">\r\n      <i class=\"fa-solid fa-xmark\"><\/i>\r\n    <\/div>\r\n    <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\">\r\n    <h3 id=\"modalName\"><\/h3>\r\n    <p id=\"modalRole\"><\/p>\r\n  <\/div>\r\n<\/div>\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n  const modal = document.getElementById('imageModal');\r\n  const modalContent = modal.querySelector('.modal-content');\r\n  const modalImg = document.getElementById('modalImage');\r\n  const modalName = document.getElementById('modalName');\r\n  const modalRole = document.getElementById('modalRole');\r\n  const modalClose = modal.querySelector('.modal-close');\r\n  function openModal(el) {\r\n    modalImg.src = el.dataset.img;\r\n    modalName.textContent = el.dataset.name;\r\n    modalRole.textContent = el.dataset.role;\r\n    modal.classList.add('active');\r\n  }\r\n  function closeModal() {\r\n    modal.classList.remove('active');\r\n  }\r\n  modalClose.addEventListener('click', closeModal);\r\n  modal.addEventListener('click', e => {\r\n    if (!modalContent.contains(e.target)) {\r\n      closeModal();\r\n    }\r\n  });\r\n  fetch('https:\/\/colon.gob.mx\/include\/GABINETE.json')\r\n    .then(res => res.json())\r\n    .then(data => {\r\n      const grid = document.getElementById('gabinete-grid');\r\n      data.forEach(member => {\r\n        const card = document.createElement('div');\r\n        card.className = 'card';\r\n        card.innerHTML = `\r\n          <div class=\"card-header-secondary\">\r\n            <div class=\"avatar-secondary\"\r\n              data-img=\"${member.Photo}\"\r\n              data-name=\"${member.Name}\"\r\n              data-role=\"${member.Role}\">\r\n              <img decoding=\"async\" src=\"${member.Photo}\" alt=\"\">\r\n              <div class=\"expand\">\r\n                <i class=\"fa-solid fa-expand\"><\/i>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"info-secondary\">\r\n              <h3>${member.Name}<\/h3>\r\n              <p>${member.Role}<\/p>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"card-body\">\r\n            ${member.Description || 'Integrante del gabinete municipal comprometido con el desarrollo institucional.'}\r\n          <\/div>\r\n        `;\r\n        card.querySelector('.avatar-secondary')\r\n          .addEventListener('click', e => openModal(e.currentTarget));\r\n        grid.appendChild(card);\r\n      });\r\n    });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c1774b elementor-widget elementor-widget-html\" data-id=\"0c1774b\" 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<!-- ==================== FOOTER PROGRAMA ANUAL DE EVALUACI\u00d3N ==================== -->\r\n<footer class=\"gcuenta-footer-simple\">\r\n  <div class=\"gcuenta-footer-simple__inner\">\r\n    <p class=\"gcuenta-footer-simple__update\">\r\n      \u00daltima actualizaci\u00f3n: <strong>diciembre de 2025<\/strong>\r\n    <\/p>\r\n    <p class=\"gcuenta-footer-simple__note\">\r\n      Informaci\u00f3n sujeta a evaluaci\u00f3n y verificaci\u00f3n por las <em>autoridades competentes<\/em>.\r\n    <\/p>\r\n    <p class=\"gcuenta-footer-simple__credit\">\r\n      H. Ayuntamiento de Col\u00f3n, Quer\u00e9taro | 2024 \u2013 2027\r\n    <\/p>\r\n  <\/div>\r\n<\/footer>\r\n\r\n<style>\r\n  .gcuenta-footer-simple {\r\n    background: #f8f9fa;\r\n    padding: 1.5rem 1rem;\r\n    margin: 2rem 0;\r\n    font-size: .875rem;\r\n    color: #555;\r\n    text-align: center;\r\n  }\r\n  .gcuenta-footer-simple__inner {\r\n    max-width: 900px;\r\n    margin: 0 auto;\r\n  }\r\n  .gcuenta-footer-simple__update,\r\n  .gcuenta-footer-simple__note,\r\n  .gcuenta-footer-simple__credit {\r\n    margin: 0 0 .75rem;\r\n    line-height: 1.5;\r\n  }\r\n  .gcuenta-footer-simple__update strong {\r\n    color: #333;\r\n    font-weight: 600;\r\n  }\r\n  .gcuenta-footer-simple__note em {\r\n    font-style: italic;\r\n    color: #444;\r\n  }\r\n  .gcuenta-footer-simple__credit {\r\n    font-size: .8rem;\r\n    color: #777;\r\n    margin-bottom: 0;\r\n  }\r\n  @media (max-width: 480px) {\r\n    .gcuenta-footer-simple {\r\n      padding: 1.25rem .75rem;\r\n      font-size: .8rem;\r\n    }\r\n  }\r\n<\/style>\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>Gabinete Municipal Administraci\u00f3n 2024 \u2013 2027 El Gabinete Municipal est\u00e1 conformado por las y los titulares de las diferentes dependencias que apoyan directamente al Presidente Municipal en la operaci\u00f3n diaria y la ejecuci\u00f3n de pol\u00edticas p\u00fablicas del Ayuntamiento de Col\u00f3n. En cumplimiento de las obligaciones de transparencia, se presenta la &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-169","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/pages\/169","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=169"}],"version-history":[{"count":203,"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/pages\/169\/revisions"}],"predecessor-version":[{"id":10689,"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/pages\/169\/revisions\/10689"}],"wp:attachment":[{"href":"https:\/\/colon.gob.mx\/inicio\/wp-json\/wp\/v2\/media?parent=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}