{"id":5077,"date":"2025-04-25T15:31:26","date_gmt":"2025-04-25T15:31:26","guid":{"rendered":"https:\/\/pepechedraui.mx\/segundoinforme\/?page_id=5077"},"modified":"2026-10-08T23:38:56","modified_gmt":"2026-10-08T23:38:56","slug":"startup","status":"publish","type":"page","link":"https:\/\/pepechedraui.mx\/segundoinforme\/","title":{"rendered":"Startup"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5077\" class=\"elementor elementor-5077\">\n\t\t\t\t<div class=\"e-con-height-full e-con-gap-no elementor-element elementor-element-3152bd7 e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex sc_layouts_column_icons_position_left e-con e-parent\" data-id=\"3152bd7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"e-con-height-full e-con-gap-no elementor-element elementor-element-7f6127c e-con-full elementor-hidden-desktop e-flex sc_layouts_column_icons_position_left e-con e-parent\" data-id=\"7f6127c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a7ab04e e-con-full e-flex sc_layouts_column_icons_position_left e-con e-parent\" data-id=\"a7ab04e\" 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-77bf6b4 e-con-full e-flex sc_layouts_column_icons_position_left e-con e-child\" data-id=\"77bf6b4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div data-id=\"2719f46\" data-interaction-id=\"2719f46\" data-e-type=\"e-youtube\"  class=\"e-2719f46-cac1382 e-youtube-base e-default-div\"  data-settings=\"&#x7B;&quot;source&quot;&#x3A;&quot;https&#x3A;&#x5C;&#x2F;&#x5C;&#x2F;youtu.be&#x5C;&#x2F;pCWxTA0U9J4&quot;,&quot;autoplay&quot;&#x3A;false,&quot;mute&quot;&#x3A;false,&quot;controls&quot;&#x3A;true,&quot;cc_load_policy&quot;&#x3A;false,&quot;loop&quot;&#x3A;false,&quot;rel&quot;&#x3A;true,&quot;start&quot;&#x3A;null,&quot;end&quot;&#x3A;null,&quot;privacy&quot;&#x3A;false,&quot;lazyload&quot;&#x3A;false&#x7D;\"><\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3960dd4 e-con-full sc-tablet_inner_width_none e-flex sc_layouts_column_icons_position_left e-con e-child\" data-id=\"3960dd4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-147f137 elementor-widget__width-initial animation_type_block sc_fly_static elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"147f137\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"garet\" data-settings=\"{&quot;_animation&quot;:&quot;ta_fadeinup&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\"><span style=\"color: #9C144F\">Dos a\u00f1os<\/span> construyendo la capital.<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t\n<hr class=\"e-ef76a50-f40f4ba e-divider-base\" data-interaction-id=\"ef76a50\"   \/>\n\t\t\t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-ec8a736 elementor-widget__width-initial animation_type_block sc_fly_static elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"ec8a736\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;ta_fadeinup&quot;,&quot;_animation_delay&quot;:100}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"page\" title=\"Page 1\"><div class=\"section\"><div class=\"layoutArea\"><div class=\"column\"><p>Han sido <strong>2 an\u0303os<\/strong> de asumir el compromiso de gobernar y de construir en equipo una mejor ciudad. En este sitio te presentamos los resultados que hemos alcanzado durante este segundo an\u0303o.<\/p><p>Hoy, nuestro trabajo continu\u0301a en favor de <strong>Puebla capital<\/strong> y sus familias. <br \/><strong>Lo que viene es bueno.<\/strong><\/p><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"e-con-gap-no elementor-element elementor-element-977b61c e-con-full e-flex sc_layouts_column_icons_position_left animation_type_block elementor-invisible e-con e-parent\" data-animation-type=\"block\" data-id=\"977b61c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;animation&quot;:&quot;ta_fadeinup&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:7532,&quot;url&quot;:&quot;https:\\\/\\\/pepechedraui.mx\\\/segundoinforme\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/8.webp&quot;},{&quot;id&quot;:7533,&quot;url&quot;:&quot;https:\\\/\\\/pepechedraui.mx\\\/segundoinforme\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/9-1.webp&quot;},{&quot;id&quot;:7535,&quot;url&quot;:&quot;https:\\\/\\\/pepechedraui.mx\\\/segundoinforme\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/11-1.webp&quot;},{&quot;id&quot;:7536,&quot;url&quot;:&quot;https:\\\/\\\/pepechedraui.mx\\\/segundoinforme\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/12-1.webp&quot;},{&quot;id&quot;:7537,&quot;url&quot;:&quot;https:\\\/\\\/pepechedraui.mx\\\/segundoinforme\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/13-1.webp&quot;},{&quot;id&quot;:7544,&quot;url&quot;:&quot;https:\\\/\\\/pepechedraui.mx\\\/segundoinforme\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/PEPE-CHEDRAUI-28.webp&quot;}],&quot;background_slideshow_slide_duration&quot;:2300,&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e0b2552 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed sc_layouts_column_icons_position_left e-con e-child\" data-id=\"e0b2552\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-e9ad9b9 animation_type_block sc_fly_static elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"e9ad9b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;ta_fadein&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Descarga mi Segundo Informe a la ciudad aqu\u00ed<\/h3>\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-f0683a9 e-flex e-con-boxed sc_layouts_column_icons_position_left e-con e-child\" data-id=\"f0683a9\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\n<hr class=\"e-76733c5-8a1eade e-divider-base\" data-interaction-id=\"76733c5\"   \/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c7333cb e-con e-atomic-element e-flexbox-base e-default-div e-3c2092b \" data-id=\"c7333cb\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c7333cb\">\n    \t\t<div class=\"elementor-element elementor-element-128f5e0 sc_fly_static elementor-widget elementor-widget-html\" data-id=\"128f5e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"stark-informe\">\n\n  <div class=\"stark-shell\">\n\n    <!-- =========================================\n         SELECTOR DE TEMAS\n    ========================================== -->\n    <nav class=\"stark-themes\" aria-label=\"Temas del Segundo Informe\">\n\n      <button class=\"stark-theme-btn is-active\"\n              type=\"button\"\n              data-theme=\"0\"\n              aria-label=\"Paz y Protecci\u00f3n\"\n              aria-pressed=\"true\">\n\n        <span class=\"stark-theme-icon\">\n          <img decoding=\"async\" src=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/pazyproteccion.webp\"\n               alt=\"Paz y Protecci\u00f3n\">\n        <\/span>\n\n        <span class=\"stark-theme-name\">\n          PAZ Y<br>PROTECCI\u00d3N\n        <\/span>\n\n        <span class=\"stark-theme-line\"><\/span>\n      <\/button>\n\n\n      <button class=\"stark-theme-btn\"\n              type=\"button\"\n              data-theme=\"1\"\n              aria-label=\"Imaginemos M\u00e1s\"\n              aria-pressed=\"false\">\n\n        <span class=\"stark-theme-icon\">\n          <img decoding=\"async\" src=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/imaginemosmas.webp\"\n               alt=\"Imaginemos M\u00e1s\">\n        <\/span>\n\n        <span class=\"stark-theme-name\">\n          IMAGINEMOS<br>M\u00c1S\n        <\/span>\n\n        <span class=\"stark-theme-line\"><\/span>\n      <\/button>\n\n\n      <button class=\"stark-theme-btn\"\n              type=\"button\"\n              data-theme=\"2\"\n              aria-label=\"Bien y a la Primera\"\n              aria-pressed=\"false\">\n\n        <span class=\"stark-theme-icon\">\n          <img decoding=\"async\" src=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/bienyalaprimera.webp\"\n               alt=\"Bien y a la Primera\">\n        <\/span>\n\n        <span class=\"stark-theme-name\">\n          BIEN Y<br>A LA PRIMERA\n        <\/span>\n\n        <span class=\"stark-theme-line\"><\/span>\n      <\/button>\n\n\n      <button class=\"stark-theme-btn\"\n              type=\"button\"\n              data-theme=\"3\"\n              aria-label=\"La Capital Te Escucha\"\n              aria-pressed=\"false\">\n\n        <span class=\"stark-theme-icon\">\n          <img decoding=\"async\" src=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/lacapitalteescucha.webp\"\n               alt=\"La Capital Te Escucha\">\n        <\/span>\n\n        <span class=\"stark-theme-name\">\n          LA CAPITAL<br>TE ESCUCHA\n        <\/span>\n\n        <span class=\"stark-theme-line\"><\/span>\n      <\/button>\n\n\n      <button class=\"stark-theme-btn\"\n              type=\"button\"\n              data-theme=\"4\"\n              aria-label=\"Gobierno de Vanguardia\"\n              aria-pressed=\"false\">\n\n        <span class=\"stark-theme-icon\">\n          <img decoding=\"async\" src=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/gobiernodevanguardia.webp\"\n               alt=\"Gobierno de Vanguardia\">\n        <\/span>\n\n        <span class=\"stark-theme-name\">\n          GOBIERNO<br>DE VANGUARDIA\n        <\/span>\n\n        <span class=\"stark-theme-line\"><\/span>\n      <\/button>\n\n    <\/nav>\n\n\n    <!-- =========================================\n         CONTENIDO PRINCIPAL\n    ========================================== -->\n    <main class=\"stark-main\">\n\n      <!-- COLUMNA TEXTO -->\n      <section class=\"stark-copy-panel\" aria-live=\"polite\">\n\n        <div class=\"stark-kicker\">\n          <span class=\"stark-kicker-dot\"><\/span>\n          <span id=\"stark-kicker-text\">PAZ Y PROTECCI\u00d3N<\/span>\n        <\/div>\n\n        <!--\n          El HTML del t\u00edtulo permite destacar palabras\n          individuales con el color del tema.\n        -->\n        <h2 id=\"stark-title\">\n          <span class=\"stark-title-accent\">Cuidamos<\/span> de <span class=\"stark-title-accent\">ti<\/span> y tu <span class=\"stark-title-accent\">familia <\/span>\n        <\/h2>\n\n        <p id=\"stark-description\">\n          Integramos un ecosistema 360 impulsado con IA para m\u00e1s prevenci\u00f3n, m\u00e1s monitoreo y mejor tiempo de respuesta ante una emergencia.\n        <\/p>\n\n\n        <div class=\"stark-stat\">\n\n          <div class=\"stark-stat-number\" id=\"stark-stat-number\">\n            1er\n          <\/div>\n\n          <div class=\"stark-stat-divider\"><\/div>\n\n          <div class=\"stark-stat-copy\" id=\"stark-stat-copy\">\n            Somos el primer municipio en integra inteligencia artificial a sus sistema de seguridad.\n          <\/div>\n\n        <\/div>\n\n      <\/section>\n\n\n      <!-- =========================================\n           COLUMNA CUBO\n      ========================================== -->\n      <section class=\"stark-visual-panel\">\n\n        <div class=\"stark-cube-stage\">\n\n          <!-- CUBO -->\n          <div class=\"stark-cube\" id=\"stark-cube\">\n\n            <div class=\"stark-cube-face stark-face-front\">\n              <div class=\"stark-face-bg\"><\/div>\n              <div class=\"stark-face-gradient\"><\/div>\n              <div class=\"stark-face-copy\"><\/div>\n            <\/div>\n\n            <div class=\"stark-cube-face stark-face-right\">\n              <div class=\"stark-face-bg\"><\/div>\n              <div class=\"stark-face-gradient\"><\/div>\n              <div class=\"stark-face-copy\"><\/div>\n            <\/div>\n\n            <div class=\"stark-cube-face stark-face-back\">\n              <div class=\"stark-face-bg\"><\/div>\n              <div class=\"stark-face-gradient\"><\/div>\n              <div class=\"stark-face-copy\"><\/div>\n            <\/div>\n\n            <div class=\"stark-cube-face stark-face-left\">\n              <div class=\"stark-face-bg\"><\/div>\n              <div class=\"stark-face-gradient\"><\/div>\n              <div class=\"stark-face-copy\"><\/div>\n            <\/div>\n\n          <\/div>\n\n\n          <!--\n            ARR\u00c1STRA:\n            AHORA ARRIBA A LA IZQUIERDA\n          -->\n          <div class=\"stark-drag-hint\">\n            <span class=\"stark-drag-icon\">\u2194<\/span>\n            ARRASTRA PARA GIRAR\n          <\/div>\n\n\n          <!-- FLECHA IZQUIERDA -->\n          <button\n            type=\"button\"\n            class=\"stark-cube-arrow stark-cube-prev\"\n            id=\"stark-prev\"\n            aria-label=\"Imagen anterior\">\n            <span>\u2039<\/span>\n          <\/button>\n\n\n          <!-- FLECHA DERECHA -->\n          <button\n            type=\"button\"\n            class=\"stark-cube-arrow stark-cube-next\"\n            id=\"stark-next\"\n            aria-label=\"Siguiente imagen\">\n            <span>\u203a<\/span>\n          <\/button>\n\n\n          <!--\n            PAGINACI\u00d3N:\n            AHORA ARRIBA A LA DERECHA\n          -->\n          <div class=\"stark-counter\">\n            <span id=\"stark-current\">01<\/span>\n            <i><\/i>\n            <span id=\"stark-total\">05<\/span>\n          <\/div>\n\n        <\/div>\n\n      <\/section>\n\n    <\/main>\n\n  <\/div>\n\n<\/div>\n\n\n<style>\n\n\/* =========================================================\n   FUENTES\n========================================================= *\/\n\n@font-face {\n  font-family: \"Garet Heavy\";\n\n  src:\n    url(\"https:\/\/pepechedraui.mx\/segundoinforme\/fonts\/Garet-Heavy.woff2\") format(\"woff2\"),\n    url(\"https:\/\/pepechedraui.mx\/segundoinforme\/fonts\/Garet-Heavy.woff\") format(\"woff\"),\n    url(\"https:\/\/pepechedraui.mx\/segundoinforme\/fonts\/Garet-Heavy.ttf\") format(\"truetype\"),\n    url(\"https:\/\/pepechedraui.mx\/segundoinforme\/fonts\/Garet-Heavy.otf\") format(\"opentype\");\n\n  font-style: normal;\n  font-weight: 900;\n  font-display: swap;\n}\n\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n\n\n\/* =========================================================\n   VARIABLES\n========================================================= *\/\n\n#stark-informe {\n\n  --stark-dark: #303032;\n  --stark-text: #303032;\n  --stark-white: #ffffff;\n  --stark-gray: #f2f2f2;\n\n  --theme-color: #355B53;\n\n  --cube-size: clamp(300px, 35vw, 430px);\n\n  width: 100%;\n  max-width: 100%;\n\n  overflow: hidden;\n\n  color: var(--stark-dark);\n\n  font-family: \"Poppins\", sans-serif;\n\n  isolation: isolate;\n\n  box-sizing: border-box;\n}\n\n\n#stark-informe *,\n#stark-informe *::before,\n#stark-informe *::after {\n  box-sizing: border-box;\n}\n\n\n\/* =========================================================\n   SHELL\n========================================================= *\/\n\n#stark-informe .stark-shell {\n\n  width: 100%;\n  max-width: 1320px;\n\n  margin: 0 auto;\n\n  padding:\n    clamp(20px, 3vw, 36px)\n    clamp(18px, 4vw, 55px)\n    clamp(30px, 5vw, 65px);\n\n}\n\n\n\/* =========================================================\n   THEMES NAV\n========================================================= *\/\n\n#stark-informe .stark-themes {\n\n  width: 100%;\n\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n\n  gap: clamp(12px, 2.2vw, 30px);\n\n  margin: 0 auto 48px;\n\n  position: relative;\n\n  z-index: 20;\n\n}\n\n\n\/* =========================================================\n   THEME BUTTON\n========================================================= *\/\n\n#stark-informe .stark-theme-btn {\n\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: 0 !important;\n  outline: 0 !important;\n\n  background: #ffffff !important;\n\n  padding: 0 7px 13px !important;\n\n  margin: 0 !important;\n\n  width: clamp(105px, 12vw, 145px);\n\n  min-width: 0;\n\n  cursor: pointer;\n\n  position: relative;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  color: #303032 !important;\n\n  transition:\n    transform .28s cubic-bezier(.2,.8,.2,1),\n    background-color .22s ease;\n\n  -webkit-tap-highlight-color: transparent;\n\n  touch-action: manipulation;\n\n}\n\n\n\/* GRIS NEUTRAL *\/\n\n#stark-informe .stark-theme-btn:hover,\n#stark-informe .stark-theme-btn:focus-visible {\n\n  background: #f2f2f2 !important;\n\n}\n\n\n\/* =========================================================\n   THEME ICON\n========================================================= *\/\n\n#stark-informe .stark-theme-icon {\n\n  width: 72px;\n  height: 72px;\n\n  border-radius: 18px;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  position: relative;\n\n  transition:\n    transform .32s cubic-bezier(.2,.8,.2,1),\n    box-shadow .28s ease;\n\n}\n\n\n#stark-informe .stark-theme-icon img {\n\n  display: block !important;\n\n  width: 100% !important;\n  height: 100% !important;\n\n  object-fit: contain !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n}\n\n\n\/* =========================================================\n   HOVER\n========================================================= *\/\n\n#stark-informe .stark-theme-btn:hover .stark-theme-icon {\n\n  transform: scale(1.20);\n\n}\n\n\n\/* =========================================================\n   ACTIVE\n========================================================= *\/\n\n#stark-informe .stark-theme-btn.is-active {\n\n  transform: translateY(-2px);\n\n}\n\n\n#stark-informe .stark-theme-btn.is-active .stark-theme-icon {\n\n  transform: scale(1.22);\n\n}\n\n\n\/* =========================================================\n   THEME NAME\n========================================================= *\/\n\n#stark-informe .stark-theme-name {\n\n  display: block;\n\n  width: 100%;\n\n  margin-top: 10px;\n\n  min-height: 32px;\n\n  color: #303032 !important;\n\n  font-family: \"Garet Heavy\", sans-serif !important;\n\n  font-size: clamp(14px, .72vw, 11px) !important;\n\n  line-height: 1.18 !important;\n\n  letter-spacing: .015em;\n\n  text-align: center;\n\n  font-weight: 900 !important;\n\n  text-shadow: none !important;\n\n}\n\n\n#stark-informe .stark-theme-btn.is-active .stark-theme-name {\n\n  color: var(--theme-color) !important;\n\n}\n\n\n\/* =========================================================\n   COLORED LINE\n========================================================= *\/\n\n#stark-informe .stark-theme-line {\n\n  position: absolute;\n\n  left: 20%;\n  right: 20%;\n\n  bottom: 0;\n\n  height: 2px;\n\n  border-radius: 10px;\n\n  background: transparent;\n\n  transform: scaleX(0);\n\n  transform-origin: center;\n\n  transition:\n    transform .28s cubic-bezier(.2,.8,.2,1),\n    background .25s ease;\n\n}\n\n\n#stark-informe .stark-theme-btn[data-theme=\"0\"] {\n  --button-color: #355B53;\n}\n\n#stark-informe .stark-theme-btn[data-theme=\"1\"] {\n  --button-color: #A8004C;\n}\n\n#stark-informe .stark-theme-btn[data-theme=\"2\"] {\n  --button-color: #B9A85F;\n}\n\n#stark-informe .stark-theme-btn[data-theme=\"3\"] {\n  --button-color: #303032;\n}\n\n#stark-informe .stark-theme-btn[data-theme=\"4\"] {\n  --button-color: #A8004C;\n}\n\n\n#stark-informe .stark-theme-btn:hover .stark-theme-line,\n#stark-informe .stark-theme-btn.is-active .stark-theme-line {\n\n  background: var(--button-color);\n\n  transform: scaleX(1);\n\n}\n\n\n\/* =========================================================\n   MAIN\n========================================================= *\/\n\n#stark-informe .stark-main {\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0, 1fr)\n    minmax(380px, 520px);\n\n  align-items: center;\n\n  gap: clamp(40px, 7vw, 95px);\n\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n#stark-informe .stark-copy-panel {\n\n  min-width: 0;\n\n  padding:\n    12px\n    0\n    25px;\n\n  opacity: 1;\n\n  transform: translateY(0);\n\n  transition:\n    opacity .28s ease,\n    transform .32s cubic-bezier(.2,.8,.2,1);\n\n}\n\n\n#stark-informe .stark-copy-panel.is-switching {\n\n  opacity: 0;\n\n  transform: translateY(12px);\n\n}\n\n\n\/* =========================================================\n   KICKER\n========================================================= *\/\n\n#stark-informe .stark-kicker {\n\n  display: flex;\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom: 18px;\n\n  font-family: \"Garet Heavy\", sans-serif;\n\n  font-size: 11px;\n\n  letter-spacing: .08em;\n\n  color: var(--theme-color);\n\n}\n\n\n#stark-informe .stark-kicker-dot {\n\n  width: 8px;\n  height: 8px;\n\n  flex: 0 0 auto;\n\n  border-radius: 50%;\n\n  background: var(--theme-color);\n\n}\n\n\n\/* =========================================================\n   TITLE\n========================================================= *\/\n\n#stark-informe #stark-title {\n\n  margin: 0 0 20px !important;\n\n  padding: 0 !important;\n\n  max-width: 720px;\n\n  color: #303032 !important;\n\n  font-family: \"Garet Heavy\", sans-serif !important;\n\n  font-size: clamp(40px, 5vw, 70px) !important;\n\n  font-weight: 900 !important;\n\n  line-height: .98 !important;\n\n  letter-spacing: -.035em;\n\n  text-shadow: none !important;\n\n}\n\n\n\/*\n  PALABRAS DESTACADAS\n*\/\n\n#stark-informe .stark-title-accent {\n\n  color: var(--theme-color) !important;\n\n}\n\n\n\/* =========================================================\n   DESCRIPTION\n========================================================= *\/\n\n#stark-informe #stark-description {\n\n  margin: 0 !important;\n\n  padding: 0 !important;\n\n  max-width: 600px;\n\n  color: #303032 !important;\n\n  font-family: \"Poppins\", sans-serif !important;\n\n  font-size: clamp(15px, 1.25vw, 18px) !important;\n\n  line-height: 1.72 !important;\n\n  font-weight: 400 !important;\n\n}\n\n\n\/* =========================================================\n   STAT\n========================================================= *\/\n\n#stark-informe .stark-stat {\n\n  margin-top: 42px;\n\n  display: grid;\n\n  grid-template-columns:\n    auto\n    2px\n    minmax(0, 1fr);\n\n  align-items: center;\n\n  column-gap: 20px;\n\n  max-width: 650px;\n\n}\n\n\n#stark-informe .stark-stat-number {\n\n  color: var(--theme-color);\n\n  font-family: \"Garet Heavy\", sans-serif;\n\n  font-size: clamp(48px, 5vw, 76px);\n\n  line-height: .9;\n\n  letter-spacing: -.04em;\n\n  white-space: nowrap;\n\n}\n\n\n#stark-informe .stark-stat-divider {\n\n  width: 2px;\n\n  min-height: 62px;\n\n  align-self: stretch;\n\n  border-radius: 10px;\n\n  background: var(--theme-color);\n\n}\n\n\n#stark-informe .stark-stat-copy {\n\n  color: #303032;\n\n  font-family: \"Poppins\", sans-serif;\n\n  font-size: clamp(13px, 1vw, 16px);\n\n  line-height: 1.5;\n\n  font-weight: 500;\n\n}\n\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n#stark-informe .stark-visual-panel {\n\n  display: flex;\n\n  justify-content: center;\n  align-items: center;\n\n  min-width: 0;\n\n  opacity: 1;\n\n  transform: translateY(0);\n\n  transition:\n    opacity .28s ease,\n    transform .32s cubic-bezier(.2,.8,.2,1);\n\n}\n\n\n#stark-informe .stark-visual-panel.is-switching {\n\n  opacity: 0;\n\n  transform: translateY(12px);\n\n}\n\n\n\/* =========================================================\n   CUBE STAGE\n========================================================= *\/\n\n#stark-informe .stark-cube-stage {\n\n  width: var(--cube-size);\n  height: var(--cube-size);\n\n  position: relative;\n\n  perspective: 1500px;\n\n  perspective-origin: 50% 50%;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  touch-action: pan-y;\n\n}\n\n\n#stark-informe .stark-cube-stage::after {\n\n  content: \"\";\n\n  position: absolute;\n\n  left: 12%;\n  right: 12%;\n\n  bottom: -22px;\n\n  height: 28px;\n\n  border-radius: 50%;\n\n  background: rgba(48,48,50,.18);\n\n  filter: blur(13px);\n\n  z-index: -1;\n\n}\n\n\n\/* =========================================================\n   CUBE\n========================================================= *\/\n\n#stark-informe .stark-cube {\n\n  --cube-half: calc(var(--cube-size) \/ 2);\n\n  width: var(--cube-size);\n  height: var(--cube-size);\n\n  position: absolute;\n\n  left: 0;\n  top: 0;\n\n  transform-style: preserve-3d;\n\n  transform: rotateY(0deg);\n\n  transition:\n    transform .95s cubic-bezier(.16,.76,.18,1);\n\n  will-change: transform;\n\n  cursor: grab;\n\n}\n\n\n#stark-informe .stark-cube.is-dragging {\n\n  cursor: grabbing;\n\n}\n\n\n\/* =========================================================\n   FACES\n========================================================= *\/\n\n#stark-informe .stark-cube-face {\n\n  position: absolute;\n\n  width: 100%;\n  height: 100%;\n\n  top: 0;\n  left: 0;\n\n  overflow: hidden;\n\n  border-radius: 6px;\n\n  background: #303032;\n\n  border: 1px solid rgba(255,255,255,.14);\n\n  backface-visibility: hidden;\n  -webkit-backface-visibility: hidden;\n\n  transform-style: preserve-3d;\n\n  box-shadow:\n    inset 0 0 0 1px rgba(255,255,255,.04),\n    0 22px 50px rgba(48,48,50,.18);\n\n}\n\n\n#stark-informe .stark-face-front {\n\n  transform:\n    rotateY(0deg)\n    translateZ(var(--cube-half));\n\n}\n\n\n#stark-informe .stark-face-right {\n\n  transform:\n    rotateY(90deg)\n    translateZ(var(--cube-half));\n\n}\n\n\n#stark-informe .stark-face-back {\n\n  transform:\n    rotateY(180deg)\n    translateZ(var(--cube-half));\n\n}\n\n\n#stark-informe .stark-face-left {\n\n  transform:\n    rotateY(-90deg)\n    translateZ(var(--cube-half));\n\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n#stark-informe .stark-face-bg {\n\n  position: absolute;\n\n  inset: 0;\n\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n\n  transform: scale(1.001);\n\n}\n\n\n\/* =========================================================\n   DARK GRADIENT\n========================================================= *\/\n\n#stark-informe .stark-face-gradient {\n\n  position: absolute;\n\n  inset: 0;\n\n  background:\n    linear-gradient(\n      180deg,\n      rgba(48,48,50,0) 24%,\n      rgba(48,48,50,.06) 38%,\n      rgba(20,20,21,.48) 55%,\n      rgba(15,15,16,.87) 76%,\n      #303032 100%\n    );\n\n  pointer-events: none;\n\n}\n\n\n\/* =========================================================\n   IMAGE TEXT\n========================================================= *\/\n\n#stark-informe .stark-face-copy {\n\n  position: absolute;\n\n  left: 28px;\n  right: 28px;\n  bottom: 27px;\n\n  z-index: 5;\n\n  color: #ffffff !important;\n\n  font-family: \"Garet Heavy\", sans-serif !important;\n\n  font-size: clamp(17px, 1.55vw, 24px);\n\n  line-height: 1.08;\n\n  letter-spacing: -.025em;\n\n  font-weight: 900 !important;\n\n  text-align: left;\n\n  text-shadow:\n    0 2px 12px rgba(0,0,0,.55);\n\n  opacity: 1 !important;\n\n  transform: translateZ(2px);\n\n}\n\n\n#stark-informe .stark-face-copy,\n#stark-informe .stark-face-copy *,\n#stark-informe .stark-face-copy span {\n\n  color: #ffffff !important;\n\n}\n\n\n\/* =========================================================\n   DRAG HINT\n   ARRIBA IZQUIERDA\n========================================================= *\/\n\n#stark-informe .stark-drag-hint {\n\n  position: absolute;\n\n  top: 17px;\n  left: 17px;\n\n  right: auto;\n\n  z-index: 30;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 6px;\n\n  padding: 7px 10px;\n\n  border-radius: 999px;\n\n  background: rgba(48,48,50,.62);\n\n  border: 1px solid rgba(255,255,255,.18);\n\n  backdrop-filter: blur(9px);\n  -webkit-backdrop-filter: blur(9px);\n\n  color: #ffffff;\n\n  font-family: \"Poppins\", sans-serif;\n\n  font-size: 8px;\n\n  line-height: 1;\n\n  font-weight: 600;\n\n  letter-spacing: .08em;\n\n  pointer-events: none;\n\n}\n\n\n#stark-informe .stark-drag-icon {\n\n  font-size: 12px;\n\n  line-height: 1;\n\n}\n\n\n\/* =========================================================\n   ARROWS\n========================================================= *\/\n\n#stark-informe .stark-cube-arrow {\n\n  position: absolute;\n\n  top: 50%;\n\n  z-index: 50;\n\n  width: 42px !important;\n  height: 42px !important;\n\n  min-width: 42px !important;\n  min-height: 42px !important;\n\n  max-width: 42px !important;\n  max-height: 42px !important;\n\n  padding: 0 !important;\n  margin: 0 !important;\n\n  display: flex !important;\n\n  align-items: center !important;\n  justify-content: center !important;\n\n  flex: 0 0 42px !important;\n\n  border-radius: 50% !important;\n\n  border: 1px solid rgba(255,255,255,.25) !important;\n\n  outline: none !important;\n\n  background:\n    rgba(48,48,50,.70) !important;\n\n  color: #ffffff !important;\n\n  box-shadow:\n    0 7px 20px rgba(0,0,0,.20) !important;\n\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n\n  transform: translateY(-50%);\n\n  cursor: pointer;\n\n  transition:\n    background .2s ease,\n    border-color .2s ease,\n    transform .2s ease;\n\n  appearance: none !important;\n  -webkit-appearance: none !important;\n\n}\n\n\n#stark-informe .stark-cube-prev {\n\n  left: -21px;\n\n}\n\n\n#stark-informe .stark-cube-next {\n\n  right: -21px;\n\n}\n\n\n#stark-informe .stark-cube-arrow span {\n\n  display: block;\n\n  color: #ffffff !important;\n\n  font-family: Arial, sans-serif !important;\n\n  font-size: 29px !important;\n\n  line-height: 34px !important;\n\n  font-weight: 300 !important;\n\n  text-align: center;\n\n  width: auto !important;\n  height: auto !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n}\n\n\n#stark-informe .stark-cube-arrow:hover {\n\n  background: #303032 !important;\n\n  border-color: rgba(255,255,255,.50) !important;\n\n  transform: translateY(-50%) scale(1.07);\n\n}\n\n\n\/* =========================================================\n   PAGINATION\n   ARRIBA DERECHA\n========================================================= *\/\n\n#stark-informe .stark-counter {\n\n  position: absolute;\n\n  top: 17px;\n  right: 17px;\n\n  bottom: auto;\n\n  z-index: 25;\n\n  display: flex;\n\n  align-items: center;\n\n  gap: 7px;\n\n  padding: 6px 9px;\n\n  border-radius: 7px;\n\n  background: rgba(48,48,50,.65);\n\n  border: 1px solid rgba(255,255,255,.16);\n\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n\n  color: #ffffff;\n\n  font-family: \"Garet Heavy\", sans-serif;\n\n  font-size: 9px;\n\n  letter-spacing: .05em;\n\n}\n\n\n#stark-informe .stark-counter i {\n\n  display: block;\n\n  width: 14px;\n\n  height: 1px;\n\n  background: rgba(255,255,255,.65);\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  #stark-informe .stark-shell {\n\n    padding:\n      20px\n      18px\n      45px;\n\n  }\n\n\n  #stark-informe .stark-themes {\n\n    justify-content: flex-start;\n\n    overflow-x: auto;\n    overflow-y: hidden;\n\n    padding:\n      4px\n      5px\n      13px;\n\n    margin-bottom: 34px;\n\n    gap: 11px;\n\n    scroll-snap-type: x proximity;\n\n    -webkit-overflow-scrolling: touch;\n\n    scrollbar-width: none;\n\n  }\n\n\n  #stark-informe .stark-themes::-webkit-scrollbar {\n\n    display: none;\n\n  }\n\n\n  #stark-informe .stark-theme-btn {\n\n    flex: 0 0 105px;\n\n    width: 105px;\n\n    scroll-snap-align: center;\n\n  }\n\n\n  #stark-informe .stark-theme-icon {\n\n    width: 66px;\n    height: 66px;\n\n    border-radius: 16px;\n\n  }\n\n\n  #stark-informe .stark-theme-btn:hover .stark-theme-icon,\n  #stark-informe .stark-theme-btn.is-active .stark-theme-icon {\n\n    transform: scale(1.17);\n\n  }\n\n\n  #stark-informe .stark-theme-name {\n\n    font-size: 9px !important;\n\n    margin-top: 9px;\n\n  }\n\n\n  #stark-informe .stark-main {\n\n    grid-template-columns: 1fr;\n\n    gap: 35px;\n\n  }\n\n\n  #stark-informe .stark-copy-panel {\n\n    padding-bottom: 0;\n\n  }\n\n\n  #stark-informe #stark-title {\n\n    font-size: clamp(39px, 9vw, 58px) !important;\n\n    line-height: .98 !important;\n\n  }\n\n\n  #stark-informe #stark-description {\n\n    max-width: 680px;\n\n    font-size: 15px !important;\n\n    line-height: 1.65 !important;\n\n  }\n\n\n  #stark-informe .stark-stat {\n\n    margin-top: 30px;\n\n  }\n\n\n  #stark-informe .stark-stat-number {\n\n    font-size: 56px;\n\n  }\n\n\n  #stark-informe .stark-stat-divider {\n\n    min-height: 52px;\n\n  }\n\n\n  #stark-informe .stark-visual-panel {\n\n    width: 100%;\n\n  }\n\n\n  #stark-informe .stark-cube-stage {\n\n    --cube-size: min(84vw, 390px);\n\n    width: var(--cube-size);\n    height: var(--cube-size);\n\n  }\n\n\n  #stark-informe .stark-face-copy {\n\n    left: 22px;\n    right: 22px;\n    bottom: 22px;\n\n    font-size: 18px;\n\n  }\n\n\n  #stark-informe .stark-cube-arrow {\n\n    width: 40px !important;\n    height: 40px !important;\n\n    min-width: 40px !important;\n    min-height: 40px !important;\n\n    max-width: 40px !important;\n    max-height: 40px !important;\n\n    flex-basis: 40px !important;\n\n  }\n\n\n  #stark-informe .stark-cube-prev {\n\n    left: -16px;\n\n  }\n\n\n  #stark-informe .stark-cube-next {\n\n    right: -16px;\n\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 520px) {\n\n  #stark-informe .stark-shell {\n\n    padding-left: 15px;\n    padding-right: 15px;\n\n  }\n\n\n  #stark-informe .stark-themes {\n\n    margin-left: -5px;\n    margin-right: -5px;\n\n    width: calc(100% + 10px);\n\n  }\n\n\n  #stark-informe .stark-theme-btn {\n\n    flex-basis: 98px;\n\n    width: 98px;\n\n  }\n\n\n  #stark-informe .stark-theme-icon {\n\n    width: 51px;\n    height: 51px;\n\n    border-radius: 14px;\n\n  }\n\n\n  #stark-informe .stark-theme-name {\n\n    font-size: 8px !important;\n\n  }\n\n\n  #stark-informe .stark-kicker {\n\n    font-size: 9px;\n\n    margin-bottom: 14px;\n\n  }\n\n\n  #stark-informe #stark-title {\n\n    font-size: 38px !important;\n\n    letter-spacing: -.045em;\n\n  }\n\n\n  #stark-informe #stark-description {\n\n    font-size: 14px !important;\n\n  }\n\n\n  #stark-informe .stark-stat {\n\n    grid-template-columns:\n      auto\n      2px\n      minmax(0, 1fr);\n\n    column-gap: 14px;\n\n    margin-top: 27px;\n\n  }\n\n\n  #stark-informe .stark-stat-number {\n\n    font-size: 49px;\n\n  }\n\n\n  #stark-informe .stark-stat-divider {\n\n    min-height: 48px;\n\n  }\n\n\n  #stark-informe .stark-stat-copy {\n\n    font-size: 12px;\n\n    line-height: 1.42;\n\n  }\n\n\n  \/* CUBE *\/\n\n  #stark-informe .stark-cube-stage {\n\n    --cube-size: min(84vw, 350px);\n\n  }\n\n\n  #stark-informe .stark-face-copy {\n\n    left: 18px;\n    right: 18px;\n    bottom: 18px;\n\n    font-size: 16px;\n\n    line-height: 1.08;\n\n  }\n\n\n  \/* ARR\u00c1STRA - IZQUIERDA *\/\n\n  #stark-informe .stark-drag-hint {\n\n    top: 12px;\n    left: 12px;\n\n    right: auto;\n\n    padding: 6px 8px;\n\n    font-size: 7px;\n\n  }\n\n\n  #stark-informe .stark-drag-icon {\n\n    font-size: 10px;\n\n  }\n\n\n  \/* PAGINACI\u00d3N - DERECHA *\/\n\n  #stark-informe .stark-counter {\n\n    top: 12px;\n    right: 12px;\n\n    bottom: auto;\n\n    font-size: 8px;\n\n  }\n\n\n  #stark-informe .stark-cube-arrow {\n\n    width: 36px !important;\n    height: 36px !important;\n\n    min-width: 36px !important;\n    min-height: 36px !important;\n\n    max-width: 36px !important;\n    max-height: 36px !important;\n\n    flex-basis: 36px !important;\n\n  }\n\n\n  #stark-informe .stark-cube-arrow span {\n\n    font-size: 25px !important;\n\n  }\n\n\n  #stark-informe .stark-cube-prev {\n\n    left: -12px;\n\n  }\n\n\n  #stark-informe .stark-cube-next {\n\n    right: -12px;\n\n  }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL PHONES\n========================================================= *\/\n\n@media (max-width: 360px) {\n\n  #stark-informe #stark-title {\n\n    font-size: 34px !important;\n\n  }\n\n\n  #stark-informe .stark-cube-stage {\n\n    --cube-size: 82vw;\n\n  }\n\n\n  #stark-informe .stark-face-copy {\n\n    font-size: 14px;\n\n  }\n\n\n  #stark-informe .stark-drag-hint {\n\n    font-size: 6.5px;\n\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  #stark-informe *,\n  #stark-informe *::before,\n  #stark-informe *::after {\n\n    animation-duration: .01ms !important;\n\n    animation-iteration-count: 1 !important;\n\n    transition-duration: .01ms !important;\n\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  \"use strict\";\n\n\n  \/* =======================================================\n     INIT\n  ======================================================= *\/\n\n  const root =\n    document.getElementById(\"stark-informe\");\n\n  if (!root) return;\n\n  if (root.dataset.ready === \"1\") return;\n\n  root.dataset.ready = \"1\";\n\n\n  \/* =======================================================\n     DATA\n  ======================================================= *\/\n\n  const themes = [\n\n    {\n      name: \"PAZ Y PROTECCI\u00d3N\",\n\n      color: \"#355B53\",\n\n      \/*\n        S\u00f3lo visual:\n        palabras destacadas en color del tema.\n      *\/\n      title:\n        '<span class=\"stark-title-accent\">Cuidamos <\/span> de <span class=\"stark-title-accent\">ti<\/span> y de tu <span class=\"stark-title-accent\">familia <\/span>',\n\n      description:\n        \"Integramos un ecosistema 360 impulsado con IA para m\u00e1s prevenci\u00f3n, m\u00e1s monitoreo y mejor tiempo de respuesta ante una emergencia.\",\n\n      statNumber: \"1er\",\n\n      statCopy:\n        \"Somos el primer municipio en integra inteligencia artificial a sus sistema de seguridad.\",\n\n      images: [\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/9.webp\",\n          text: \"144 nuevos elementos incorporados\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/10.webp\",\n          text: \"Somos el primer municipio de M\u00e9xico en integrar IA a sus sistema de seguridad.\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/11.webp\",\n          text: \"9 mil 210 operativos realizados\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/12.webp\",\n          text: \"Fortalecemos la seguridad con prevenci\u00f3n, tecnolog\u00eda y presencia cercana.\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/13.webp\",\n          text: \"M\u00e1s coordinaci\u00f3n y capacidad para proteger a las familias de Puebla.\"\n        }\n\n      ]\n\n    },\n\n\n    {\n      name: \"IMAGINEMOS M\u00c1S\",\n\n      color: \"#A8004C\",\n\n      title:\n        'M\u00e1s <span class=\"stark-title-accent\">oportunidades<\/span> para <span class=\"stark-title-accent\">crecer<\/span>',\n\n      description:\n        \"Impulsamos a las personas emprendedoras y la creaci\u00f3n de nuevos empleos.\",\n\n      statNumber: \"+7K\",\n\n      statCopy:\n        \"M\u00e1s de 7 mil emprendedoras y emprendedores beneficiados.\",\n\n      images: [\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/15.webp\",\n          text: \"2 mil 782 negocios impulsados\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/16.webp\",\n          text: \"M\u00e1s de 17 mil 700 vinculaciones laborales\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/14.webp\",\n          text: \"M\u00e1s de 7 mil emprendedoras y emprendedores beneficiados\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/17.webp\",\n          text: \"M\u00e1s oportunidades para emprender, crecer y fortalecer la econom\u00eda local.\"\n        }\n\n      ]\n\n    },\n\n\n    {\n      name: \"BIEN Y A LA PRIMERA\",\n\n      color: \"#B9A85F\",\n\n      title:\n        'Una <span class=\"stark-title-accent\">capital<\/span> que <span class=\"stark-title-accent\">funciona<\/span> mejor',\n\n      description:\n        \"Calles, luminarias y espacios p\u00fablicos rehabilitados para construir una mejor capital.\",\n\n      statNumber: \"4,612\",\n\n      statCopy:\n        \"4 mil 612 calles habilitadas, \u00a1y vamos x m\u00e1s!\",\n\n      images: [\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/19.webp\",\n          text: \"4 mil 612 calles habilitadas, \u00a1y vamos x m\u00e1s!\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/18.webp\",\n          text: \"Superamos los 460 mil baches atendidos\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/21.webp\",\n          text: \"41 mil luminarias LED modernizadas\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/20.webp\",\n          text: \"Puebla, patrimonio que nos identifica y orgullo que compartimos.\"\n        }\n\n      ]\n\n    },\n\n\n    {\n      name: \"LA CAPITAL TE ESCUCHA\",\n\n      color: \"#303032\",\n\n      title:\n        'Un <span class=\"stark-title-accent\">gobierno<\/span> cercano y presente.',\n\n      description:\n        \"Un gobierno cercano que trabaja por el bienestar de nuestras familias, juventudes y personas adultas mayores.\",\n\n      statNumber: \"+300\",\n\n      statCopy:\n        \"M\u00e1s de 300 Puntos Seguros contra la violencia de g\u00e9nero.\",\n\n      images: [\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/25.webp\",\n          text: \"Seguimos cerca de ti en las juntas auxiliares\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/PEPE-CHEDRAUI-30.webp\",\n          text: \"Inauguramos 4 Unidades M\u00e9dicas Imparables\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/22.webp\",\n          text: \"Somos un gobierno que escucha de frente\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/24.webp\",\n          text: \"M\u00e1s acciones para acompa\u00f1ar y atender a las familias de nuestra capital.\"\n        }\n\n      ]\n\n    },\n\n\n    {\n      name: \"GOBIERNO DE VANGUARDIA\",\n\n      color: \"#A8004C\",\n\n      title:\n        'Un gobierno que mira <span class=\"stark-title-accent\">hacia adelante<\/span>',\n\n      description:\n        \"Con orden, innovaci\u00f3n y transparencia, construimos un gobierno de vanguardia.\",\n\n      statNumber: \"#1\",\n\n      statCopy:\n        \"Somos el municipio con mayor \u00edndice de transparencia: ARegional.\",\n\n      images: [\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/26.webp\",\n          text: \"Somos el municipio con mayor \u00edndice de transparencia: ARegional\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/27.webp\",\n          text: \"M\u00e1s de 3 MDP otorgados en el Sorteo Predial y Limpia 2025\"\n        },\n\n        {\n          src: \"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/28.webp\",\n          text: \"Impulsamos la digitalizaci\u00f3n de los tr\u00e1mites municipales\"\n        }\n\n      ]\n\n    }\n\n  ];\n\n\n  \/* =======================================================\n     ELEMENTOS\n  ======================================================= *\/\n\n  const themeButtons =\n    Array.from(\n      root.querySelectorAll(\".stark-theme-btn\")\n    );\n\n  const copyPanel =\n    root.querySelector(\".stark-copy-panel\");\n\n  const visualPanel =\n    root.querySelector(\".stark-visual-panel\");\n\n  const kickerText =\n    root.querySelector(\"#stark-kicker-text\");\n\n  const titleEl =\n    root.querySelector(\"#stark-title\");\n\n  const descriptionEl =\n    root.querySelector(\"#stark-description\");\n\n  const statNumberEl =\n    root.querySelector(\"#stark-stat-number\");\n\n  const statCopyEl =\n    root.querySelector(\"#stark-stat-copy\");\n\n  const cube =\n    root.querySelector(\"#stark-cube\");\n\n  const cubeStage =\n    root.querySelector(\".stark-cube-stage\");\n\n  const prevButton =\n    root.querySelector(\"#stark-prev\");\n\n  const nextButton =\n    root.querySelector(\"#stark-next\");\n\n  const currentEl =\n    root.querySelector(\"#stark-current\");\n\n  const totalEl =\n    root.querySelector(\"#stark-total\");\n\n  const faces =\n    Array.from(\n      root.querySelectorAll(\".stark-cube-face\")\n    );\n\n\n  \/* =======================================================\n     STATE\n  ======================================================= *\/\n\n  let activeTheme = 0;\n\n  let currentImage = 0;\n\n  let faceIndexes = [0, 1, 2, 3];\n\n  let rotating = false;\n\n  let queuedDirection = 0;\n\n  let dragStartX = 0;\n\n  let dragDelta = 0;\n\n  let dragging = false;\n\n  let autoCubeTimer = null;\n\n  let autoThemeTimer = null;\n\n  let cubeVersion = 0;\n\n  let currentCubeAngle = 0;\n\n\n  const CUBE_INTERVAL = 7000;\n\n\n  \/* =======================================================\n     UTILS\n  ======================================================= *\/\n\n  function pad(number) {\n\n    return String(number).padStart(2, \"0\");\n\n  }\n\n\n  function setThemeColor(color) {\n\n    root.style.setProperty(\n      \"--theme-color\",\n      color\n    );\n\n  }\n\n\n  function updateCounter() {\n\n    const theme =\n      themes[activeTheme];\n\n    currentEl.textContent =\n      pad(currentImage + 1);\n\n    totalEl.textContent =\n      pad(theme.images.length);\n\n  }\n\n\n  \/* =======================================================\n     PRELOAD\n  ======================================================= *\/\n\n  themes.forEach(theme => {\n\n    theme.images.forEach(image => {\n\n      const img =\n        new Image();\n\n      img.decoding =\n        \"async\";\n\n      img.src =\n        image.src;\n\n    });\n\n  });\n\n\n  \/* =======================================================\n     FACE CONTENT\n  ======================================================= *\/\n\n  function setFace(face, image) {\n\n    if (!face || !image) return;\n\n    const bg =\n      face.querySelector(\".stark-face-bg\");\n\n    const copy =\n      face.querySelector(\".stark-face-copy\");\n\n\n    bg.style.backgroundImage =\n      \"url('\" + image.src + \"')\";\n\n\n    copy.textContent =\n      image.text;\n\n  }\n\n\n  function renderCubeFaces() {\n\n    const theme =\n      themes[activeTheme];\n\n    const total =\n      theme.images.length;\n\n\n    faces.forEach((face, index) => {\n\n      const imageIndex =\n        ((faceIndexes[index] % total) + total) % total;\n\n\n      setFace(\n        face,\n        theme.images[imageIndex]\n      );\n\n    });\n\n\n    updateCounter();\n\n  }\n\n\n  \/* =======================================================\n     RESET CUBE\n  ======================================================= *\/\n\n  function resetCube() {\n\n    cubeVersion++;\n\n    rotating = false;\n\n    queuedDirection = 0;\n\n    currentImage = 0;\n\n    currentCubeAngle = 0;\n\n    faceIndexes = [\n      0,\n      1,\n      2,\n      3\n    ];\n\n\n    cube.style.transition =\n      \"none\";\n\n    cube.style.transform =\n      \"rotateY(0deg)\";\n\n\n    renderCubeFaces();\n\n\n    requestAnimationFrame(() => {\n\n      requestAnimationFrame(() => {\n\n        cube.style.transition =\n          \"transform .95s cubic-bezier(.16,.76,.18,1)\";\n\n      });\n\n    });\n\n  }\n\n\n  \/* =======================================================\n     ROTATE\n  ======================================================= *\/\n\n  function rotateCube(\n    direction,\n    manual\n  ) {\n\n    if (!direction) return;\n\n\n    if (rotating) {\n\n      queuedDirection =\n        direction;\n\n      return;\n\n    }\n\n\n    const theme =\n      themes[activeTheme];\n\n    const total =\n      theme.images.length;\n\n\n    if (total <= 1) return;\n\n\n    rotating = true;\n\n\n    const versionAtStart =\n      cubeVersion;\n\n\n    const nextIndex =\n      (\n        (\n          currentImage +\n          direction\n        ) % total +\n        total\n      ) % total;\n\n\n    const targetAngle =\n      currentCubeAngle +\n      (\n        direction > 0\n          ? -90\n          : 90\n      );\n\n\n    cube.style.transform =\n      \"rotateY(\" +\n      targetAngle +\n      \"deg)\";\n\n\n    const finishRotation = () => {\n\n      if (\n        versionAtStart !== cubeVersion\n      ) {\n\n        rotating = false;\n\n        return;\n\n      }\n\n\n      cube.removeEventListener(\n        \"transitionend\",\n        finishRotation\n      );\n\n\n      currentImage =\n        nextIndex;\n\n\n      faceIndexes = [\n\n        currentImage,\n\n        currentImage + 1,\n\n        currentImage + 2,\n\n        currentImage + 3\n\n      ];\n\n\n      cube.style.transition =\n        \"none\";\n\n      cube.style.transform =\n        \"rotateY(0deg)\";\n\n\n      currentCubeAngle =\n        0;\n\n\n      renderCubeFaces();\n\n\n      requestAnimationFrame(() => {\n\n        requestAnimationFrame(() => {\n\n          cube.style.transition =\n            \"transform .95s cubic-bezier(.16,.76,.18,1)\";\n\n          rotating = false;\n\n\n          if (queuedDirection) {\n\n            const nextDirection =\n              queuedDirection;\n\n            queuedDirection = 0;\n\n\n            rotateCube(\n              nextDirection,\n              true\n            );\n\n          }\n\n        });\n\n      });\n\n    };\n\n\n    cube.addEventListener(\n      \"transitionend\",\n      finishRotation\n    );\n\n\n    if (manual) {\n\n      restartTimers();\n\n    }\n\n  }\n\n\n  \/* =======================================================\n     SELECT THEME\n  ======================================================= *\/\n\n  function selectTheme(\n    index,\n    automatic\n  ) {\n\n    if (\n      index < 0 ||\n      index >= themes.length\n    ) {\n      return;\n    }\n\n\n    activeTheme =\n      index;\n\n\n    const theme =\n      themes[activeTheme];\n\n\n    setThemeColor(\n      theme.color\n    );\n\n\n    themeButtons.forEach(\n      (button, i) => {\n\n        const active =\n          i === activeTheme;\n\n\n        button.classList.toggle(\n          \"is-active\",\n          active\n        );\n\n\n        button.setAttribute(\n          \"aria-pressed\",\n          active\n            ? \"true\"\n            : \"false\"\n        );\n\n      }\n    );\n\n\n    const activeButton =\n      themeButtons[activeTheme];\n\n\n    if (\n      activeButton &&\n      window.innerWidth <= 900\n    ) {\n\n      activeButton.scrollIntoView({\n\n        behavior:\n          automatic\n            ? \"smooth\"\n            : \"auto\",\n\n        block:\n          \"nearest\",\n\n        inline:\n          \"center\"\n\n      });\n\n    }\n\n\n    copyPanel.classList.add(\n      \"is-switching\"\n    );\n\n    visualPanel.classList.add(\n      \"is-switching\"\n    );\n\n\n    requestAnimationFrame(() => {\n\n      kickerText.textContent =\n        theme.name;\n\n\n      \/*\n        AQU\u00cd EST\u00c1 EL \u00daNICO CAMBIO\n        FUNCIONAL NECESARIO:\n\n        Antes:\n        titleEl.textContent = theme.title;\n\n        Ahora:\n        innerHTML permite las palabras\n        destacadas con .stark-title-accent\n      *\/\n\n      titleEl.innerHTML =\n        theme.title;\n\n\n      descriptionEl.textContent =\n        theme.description;\n\n\n      statNumberEl.textContent =\n        theme.statNumber;\n\n\n      statCopyEl.textContent =\n        theme.statCopy;\n\n\n      resetCube();\n\n\n      requestAnimationFrame(() => {\n\n        copyPanel.classList.remove(\n          \"is-switching\"\n        );\n\n        visualPanel.classList.remove(\n          \"is-switching\"\n        );\n\n      });\n\n    });\n\n\n    restartTimers();\n\n  }\n\n\n  \/* =======================================================\n     CUBE TIMER\n  ======================================================= *\/\n\n  function startCubeTimer() {\n\n    clearInterval(\n      autoCubeTimer\n    );\n\n    autoCubeTimer =\n      null;\n\n\n    if (\n      window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      ).matches\n    ) {\n\n      return;\n\n    }\n\n\n    autoCubeTimer =\n      setInterval(() => {\n\n        rotateCube(\n          1,\n          false\n        );\n\n      }, CUBE_INTERVAL);\n\n  }\n\n\n  \/* =======================================================\n     THEME TIMER\n  ======================================================= *\/\n\n  function startThemeTimer() {\n\n    clearTimeout(\n      autoThemeTimer\n    );\n\n    autoThemeTimer =\n      null;\n\n\n    if (\n      window.matchMedia(\n        \"(prefers-reduced-motion: reduce)\"\n      ).matches\n    ) {\n\n      return;\n\n    }\n\n\n    const theme =\n      themes[activeTheme];\n\n\n    const duration =\n      (\n        theme.images.length *\n        CUBE_INTERVAL\n      ) + 900;\n\n\n    autoThemeTimer =\n      setTimeout(() => {\n\n        const nextTheme =\n          (\n            activeTheme + 1\n          ) % themes.length;\n\n\n        selectTheme(\n          nextTheme,\n          true\n        );\n\n      }, duration);\n\n  }\n\n\n  \/* =======================================================\n     RESTART TIMERS\n  ======================================================= *\/\n\n  function restartTimers() {\n\n    startCubeTimer();\n\n    startThemeTimer();\n\n  }\n\n\n  \/* =======================================================\n     THEME BUTTONS\n  ======================================================= *\/\n\n  themeButtons.forEach(\n    (button, index) => {\n\n      button.addEventListener(\n        \"pointerdown\",\n        function (event) {\n\n          if (\n            event.pointerType === \"mouse\" &&\n            event.button !== 0\n          ) {\n\n            return;\n\n          }\n\n\n          selectTheme(\n            index,\n            false\n          );\n\n        },\n        {\n          passive: true\n        }\n      );\n\n\n      button.addEventListener(\n        \"keydown\",\n        function (event) {\n\n          if (\n            event.key === \"Enter\" ||\n            event.key === \" \"\n          ) {\n\n            event.preventDefault();\n\n            selectTheme(\n              index,\n              false\n            );\n\n          }\n\n        }\n      );\n\n    }\n  );\n\n\n  \/* =======================================================\n     ARROWS\n  ======================================================= *\/\n\n  prevButton.addEventListener(\n    \"pointerdown\",\n    function (event) {\n\n      event.preventDefault();\n\n      rotateCube(\n        -1,\n        true\n      );\n\n    }\n  );\n\n\n  nextButton.addEventListener(\n    \"pointerdown\",\n    function (event) {\n\n      event.preventDefault();\n\n      rotateCube(\n        1,\n        true\n      );\n\n    }\n  );\n\n\n  \/* =======================================================\n     DRAG \/ SWIPE\n  ======================================================= *\/\n\n  cube.addEventListener(\n    \"pointerdown\",\n    function (event) {\n\n      if (\n        event.pointerType === \"mouse\" &&\n        event.button !== 0\n      ) {\n\n        return;\n\n      }\n\n\n      dragging = true;\n\n      dragStartX =\n        event.clientX;\n\n      dragDelta = 0;\n\n\n      cube.classList.add(\n        \"is-dragging\"\n      );\n\n\n      try {\n\n        cube.setPointerCapture(\n          event.pointerId\n        );\n\n      } catch (e) {}\n\n    }\n  );\n\n\n  cube.addEventListener(\n    \"pointermove\",\n    function (event) {\n\n      if (!dragging) return;\n\n\n      dragDelta =\n        event.clientX -\n        dragStartX;\n\n    }\n  );\n\n\n  function finishDrag(event) {\n\n    if (!dragging) return;\n\n\n    dragging = false;\n\n\n    cube.classList.remove(\n      \"is-dragging\"\n    );\n\n\n    const threshold =\n      Math.max(\n        38,\n        cubeStage.clientWidth * .10\n      );\n\n\n    if (\n      Math.abs(dragDelta) >= threshold\n    ) {\n\n      if (dragDelta < 0) {\n\n        rotateCube(\n          1,\n          true\n        );\n\n      } else {\n\n        rotateCube(\n          -1,\n          true\n        );\n\n      }\n\n    }\n\n\n    dragDelta = 0;\n\n\n    try {\n\n      cube.releasePointerCapture(\n        event.pointerId\n      );\n\n    } catch (e) {}\n\n  }\n\n\n  cube.addEventListener(\n    \"pointerup\",\n    finishDrag\n  );\n\n\n  cube.addEventListener(\n    \"pointercancel\",\n    finishDrag\n  );\n\n\n  cube.addEventListener(\n    \"lostpointercapture\",\n    function () {\n\n      if (dragging) {\n\n        dragging = false;\n\n        cube.classList.remove(\n          \"is-dragging\"\n        );\n\n      }\n\n    }\n  );\n\n\n  \/* =======================================================\n     KEYBOARD\n  ======================================================= *\/\n\n  root.addEventListener(\n    \"keydown\",\n    function (event) {\n\n      if (\n        event.key === \"ArrowLeft\"\n      ) {\n\n        rotateCube(\n          -1,\n          true\n        );\n\n      }\n\n\n      if (\n        event.key === \"ArrowRight\"\n      ) {\n\n        rotateCube(\n          1,\n          true\n        );\n\n      }\n\n    }\n  );\n\n\n  \/* =======================================================\n     VISIBILITY\n  ======================================================= *\/\n\n  document.addEventListener(\n    \"visibilitychange\",\n    function () {\n\n      if (document.hidden) {\n\n        clearInterval(\n          autoCubeTimer\n        );\n\n        clearTimeout(\n          autoThemeTimer\n        );\n\n      } else {\n\n        restartTimers();\n\n      }\n\n    }\n  );\n\n\n  \/* =======================================================\n     INITIALIZE\n  ======================================================= *\/\n\n  setThemeColor(\n    themes[0].color\n  );\n\n\n  renderCubeFaces();\n\n  updateCounter();\n\n  restartTimers();\n\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-bb189e7 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed sc_layouts_column_icons_position_left e-con e-child\" data-id=\"bb189e7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div data-animation-type=\"block\" class=\"elementor-element elementor-element-5265008 animation_type_block sc_fly_static elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"5265008\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;ta_fadein&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Descarga mi Segundo Informe a la ciudad aqu\u00ed<\/h3>\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-b3cf36b e-flex e-con-boxed sc_layouts_column_icons_position_left e-con e-child\" data-id=\"b3cf36b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t\n<hr class=\"e-7f6651c-6c540b7 e-divider-base\" data-interaction-id=\"7f6651c\"   \/>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-be45230 e-con-full e-flex sc_layouts_column_icons_position_left e-con e-parent\" data-id=\"be45230\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"e-con-gap-no trx_addons_has_bg_text elementor-element elementor-element-2f3302f e-con-full e-flex sc_layouts_column_icons_position_left e-con e-child\" data-bg-text=\"{&quot;bg_text&quot;:&quot;SEGUNDO INFORME A LA CIUDAD&quot;,&quot;bg_text_effect&quot;:&quot;none&quot;,&quot;bg_text_overlay&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;bg_text_left&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;bg_text_top&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;bg_text_z_index&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;0&quot;,&quot;sizes&quot;:[]},&quot;bg_text_marquee&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:13,&quot;sizes&quot;:[]},&quot;bg_text_marquee_hover&quot;:&quot;&quot;,&quot;bg_text_marquee_margin&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:6,&quot;sizes&quot;:[]},&quot;bg_text_reverse&quot;:0,&quot;bg_text_accelerate&quot;:0,&quot;bg_text_delimiter_icon&quot;:&quot;&quot;,&quot;bg_text_delimiter_image&quot;:&quot;&quot;,&quot;bg_text_delimiter_svg&quot;:&quot;&quot;,&quot;bg_text_delimiter_rotation&quot;:0}\" data-id=\"2f3302f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-80132aa e-con e-atomic-element e-flexbox-base e-default-div e-e7e9649 \" data-id=\"80132aa\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"80132aa\">\n    <div class=\"elementor-element elementor-element-8b4cbb4 e-con e-atomic-element e-flexbox-base e-default-div e-5be18ae \" data-id=\"8b4cbb4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8b4cbb4\">\n    \t\t\t<img fetchpriority=\"high\" decoding=\"async\" class=\"e-image-base e-default-img e-78763da-5a9d0bb\" data-interaction-id=\"78763da\" id=\"7494\" src=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1.webp\" width=\"1600\" height=\"830\" srcset=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1.webp 1600w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1-300x156.webp 300w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1-1024x531.webp 1024w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1-768x398.webp 768w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1-1536x797.webp 1536w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1-370x192.webp 370w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1-924x479.webp 924w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/LOGO-COLOR-1-410x213.webp 410w\" alt=\"\"\/>\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6fdbd0a e-con e-atomic-element e-flexbox-base e-default-div e-8278a8d \" data-id=\"6fdbd0a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6fdbd0a\">\n    \t\t\t<img decoding=\"async\" class=\"e-image-base e-default-img e-5fea7e6-908dcf4\" data-interaction-id=\"5fea7e6\" id=\"7496\" src=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR.webp\" width=\"1600\" height=\"480\" srcset=\"https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR.webp 1600w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR-300x90.webp 300w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR-1024x307.webp 1024w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR-768x230.webp 768w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR-1536x461.webp 1536w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR-370x111.webp 370w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR-924x277.webp 924w, https:\/\/pepechedraui.mx\/segundoinforme\/wp-content\/uploads\/2026\/10\/SLOGANCOLOR-410x123.webp 410w\" alt=\"\"\/>\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-caacfb5 e-con e-atomic-element e-flexbox-base e-default-div e-caacfb5-8834d71 \" data-id=\"caacfb5\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"caacfb5\">\n    \t\t<div class=\"elementor-element elementor-element-aa3b388 sc_fly_static elementor-widget elementor-widget-html\" data-id=\"aa3b388\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n  CUBOS 3D CON F\u00cdSICA + REDES SOCIALES  |  Bloque HTML de Elementor\n  Color base: #a8004c  |  Librer\u00eda: Matter.js (se carga sola desde cdnjs)\n  Pega TODO esto en un widget \"HTML\" de Elementor.\n============================================================ -->\n\n<style>\n  #pj-cubes-root{\n      background: #F6F4F2 !important;\n    position:relative;\n    width:100%;\n    box-sizing:border-box;\n    padding-top:70px;                       \/* <- padding superior (50px en m\u00f3vil, abajo) *\/\n    height:clamp(520px,46vw,720px);\n    overflow:hidden;\n    user-select:none;-webkit-user-select:none;\n  }\n  #pj-cubes-root *{box-sizing:border-box}\n\n  \/* Lienzo donde caen los cubos (ocupa toda la secci\u00f3n) *\/\n  #pj-cubes-root .pj-canvas{\n    position:absolute;inset:0;width:100%;height:100%;\n    z-index:2;display:block;\n    touch-action:pan-y;                     \/* el scroll vertical en celular sigue funcionando *\/\n    cursor:grab;\n  }\n  #pj-cubes-root .pj-canvas:active{cursor:grabbing}\n\n  \/* ---------- Redes sociales: cubos 3D con giro en hover ---------- *\/\n  #pj-cubes-root .pj-social{\n    position:relative;z-index:5;\n    display:flex;justify-content:center;align-items:center;\n    gap:clamp(8px,1.4vw,16px);\n    pointer-events:none;\n  }\n  #pj-cubes-root .pj-cube{\n    --s:66px;\n    width:var(--s) !important;height:var(--s) !important;\n    perspective:420px;display:block !important;\n    text-decoration:none;pointer-events:auto;\n    -webkit-tap-highlight-color:transparent;\n    filter:drop-shadow(0 8px 7px rgba(0,0,0,.28));\n  }\n  #pj-cubes-root .pj-cube-inner{\n    display:block !important;\n    position:relative;width:100% !important;height:100% !important;\n    transform-style:preserve-3d;\n    transform:rotateX(-14deg) rotateY(18deg);\n    transition:transform .9s cubic-bezier(.25,1.35,.45,1);\n  }\n  #pj-cubes-root .pj-cube:hover .pj-cube-inner,\n  #pj-cubes-root .pj-cube:focus-visible .pj-cube-inner,\n  #pj-cubes-root .pj-cube.is-spin .pj-cube-inner{\n    transform:rotateX(-14deg) rotateY(378deg);\n  }\n  #pj-cubes-root .pj-face{\n    position:absolute !important;top:0;left:0;right:0;bottom:0;\n    width:100%;height:100%;\n    display:flex !important;align-items:center;justify-content:center;\n    border-radius:3px;margin:0;padding:0;\n    backface-visibility:hidden;-webkit-backface-visibility:hidden;\n    border:1px solid rgba(40,0,20,.35);\n    background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.025) 1px 3px),\n                     linear-gradient(135deg,#b30853 0%,#a8004c 50%,#940043 100%);\n  }\n  #pj-cubes-root .pj-face svg{\n    width:52%;height:52%;fill:#fff;\n    filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));\n  }\n  #pj-cubes-root .f-front {transform:translateZ(calc(var(--s)\/2))}\n  #pj-cubes-root .f-back  {transform:rotateY(180deg) translateZ(calc(var(--s)\/2))}\n  #pj-cubes-root .f-right {transform:rotateY(90deg)  translateZ(calc(var(--s)\/2));\n    background-image:linear-gradient(135deg,#870040,#6e0033)}\n  #pj-cubes-root .f-left  {transform:rotateY(-90deg) translateZ(calc(var(--s)\/2));\n    background-image:linear-gradient(135deg,#940046,#780037)}\n  #pj-cubes-root .f-top   {transform:rotateX(90deg)  translateZ(calc(var(--s)\/2));\n    background-image:linear-gradient(135deg,#c41764,#b00a55)}\n  #pj-cubes-root .f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)\/2));\n    background-image:linear-gradient(135deg,#5c002b,#400020)}\n\n  @media (max-width:767px){\n    #pj-cubes-root{padding-top:0px;height:310px}\n    #pj-cubes-root .pj-cube{--s:50px}\n  }\n  @media (prefers-reduced-motion:reduce){\n    #pj-cubes-root .pj-cube-inner{transition-duration:.01s}\n  }\n<\/style>\n\n<div id=\"pj-cubes-root\">\n  <canvas class=\"pj-canvas\" aria-hidden=\"true\"><\/canvas>\n\n  <div class=\"pj-social\">\n\n    <!-- Facebook -->\n    <a class=\"pj-cube\" href=\"https:\/\/www.facebook.com\/pepechedrauimx\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\">\n      <span class=\"pj-cube-inner\">\n        <span class=\"pj-face f-front\"><svg viewBox=\"0 0 24 24\"><path d=\"M14 8V6.2c0-.8.2-1.2 1.3-1.2H17V2h-2.6C11.5 2 10 3.6 10 6v2H7.5v3H10v11h4V11h2.7l.5-3H14z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-back\"><svg viewBox=\"0 0 24 24\"><path d=\"M14 8V6.2c0-.8.2-1.2 1.3-1.2H17V2h-2.6C11.5 2 10 3.6 10 6v2H7.5v3H10v11h4V11h2.7l.5-3H14z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-right\"><\/span><span class=\"pj-face f-left\"><\/span>\n        <span class=\"pj-face f-top\"><\/span><span class=\"pj-face f-bottom\"><\/span>\n      <\/span>\n    <\/a>\n\n    <!-- Instagram -->\n    <a class=\"pj-cube\" href=\"https:\/\/www.instagram.com\/pepechedrauimx\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\n      <span class=\"pj-cube-inner\">\n        <span class=\"pj-face f-front\"><svg viewBox=\"0 0 24 24\"><path d=\"M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm5.2-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-back\"><svg viewBox=\"0 0 24 24\"><path d=\"M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2zm0 2A3.5 3.5 0 0 0 4 7.5v9A3.5 3.5 0 0 0 7.5 20h9a3.5 3.5 0 0 0 3.5-3.5v-9A3.5 3.5 0 0 0 16.5 4h-9zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm5.2-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-right\"><\/span><span class=\"pj-face f-left\"><\/span>\n        <span class=\"pj-face f-top\"><\/span><span class=\"pj-face f-bottom\"><\/span>\n      <\/span>\n    <\/a>\n\n    <!-- X -->\n    <a class=\"pj-cube\" href=\"https:\/\/x.com\/pepechedrauimx\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"X (Twitter)\">\n      <span class=\"pj-cube-inner\">\n        <span class=\"pj-face f-front\"><svg viewBox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-back\"><svg viewBox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-right\"><\/span><span class=\"pj-face f-left\"><\/span>\n        <span class=\"pj-face f-top\"><\/span><span class=\"pj-face f-bottom\"><\/span>\n      <\/span>\n    <\/a>\n\n    <!-- TikTok -->\n    <a class=\"pj-cube\" href=\"https:\/\/www.tiktok.com\/@pepechedrauimx\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"TikTok\">\n      <span class=\"pj-cube-inner\">\n        <span class=\"pj-face f-front\"><svg viewBox=\"0 0 24 24\"><path d=\"M16.6 5.8A4.3 4.3 0 0 1 15.5 3h-3.1v12.4a2.6 2.6 0 1 1-2.6-2.6c.3 0 .5 0 .8.1V9.7a5.7 5.7 0 1 0 4.9 5.6V9a7.4 7.4 0 0 0 4.3 1.4V7.3a4.3 4.3 0 0 1-3.2-1.5z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-back\"><svg viewBox=\"0 0 24 24\"><path d=\"M16.6 5.8A4.3 4.3 0 0 1 15.5 3h-3.1v12.4a2.6 2.6 0 1 1-2.6-2.6c.3 0 .5 0 .8.1V9.7a5.7 5.7 0 1 0 4.9 5.6V9a7.4 7.4 0 0 0 4.3 1.4V7.3a4.3 4.3 0 0 1-3.2-1.5z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-right\"><\/span><span class=\"pj-face f-left\"><\/span>\n        <span class=\"pj-face f-top\"><\/span><span class=\"pj-face f-bottom\"><\/span>\n      <\/span>\n    <\/a>\n\n    <!-- YouTube -->\n    <a class=\"pj-cube\" href=\"https:\/\/www.youtube.com\/@pepechedrauimx\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"YouTube\">\n      <span class=\"pj-cube-inner\">\n        <span class=\"pj-face f-front\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5.2 3z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-back\"><svg viewBox=\"0 0 24 24\"><path d=\"M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8a2.5 2.5 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8c.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5.2 3z\"\/><\/svg><\/span>\n        <span class=\"pj-face f-right\"><\/span><span class=\"pj-face f-left\"><\/span>\n        <span class=\"pj-face f-top\"><\/span><span class=\"pj-face f-bottom\"><\/span>\n      <\/span>\n    <\/a>\n\n  <\/div>\n<\/div>\n\n<script>\n(function () {\n  var root = document.getElementById('pj-cubes-root');\n  if (!root || root.getAttribute('data-pj-init')) return;\n  root.setAttribute('data-pj-init', '1');\n\n  \/* ---------- Giro de cubos sociales en touch (en desktop lo hace :hover) ---------- *\/\n  var links = root.querySelectorAll('.pj-cube');\n  for (var li = 0; li < links.length; li++) {\n    (function (a) {\n      a.addEventListener('touchstart', function () {\n        a.classList.add('is-spin');\n        setTimeout(function () { a.classList.remove('is-spin'); }, 900);\n      }, { passive: true });\n    })(links[li]);\n  }\n\n  \/* ---------- Carga de Matter.js ---------- *\/\n  function loadMatter(cb) {\n    if (window.Matter) return cb();\n    var s = document.createElement('script');\n    s.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/matter-js\/0.19.0\/matter.min.js';\n    s.onload = cb;\n    document.head.appendChild(s);\n  }\n\n  loadMatter(function () {\n    var M = window.Matter;\n    var Engine = M.Engine, Bodies = M.Bodies, Body = M.Body,\n        Composite = M.Composite, Constraint = M.Constraint, Query = M.Query;\n\n    var canvas = root.querySelector('.pj-canvas');\n    var ctx = canvas.getContext('2d');\n\n    var W = 0, H = 0, dpr = 1, scale = 1;\n    var engine = null, bodies = [], timers = [];\n    var running = false, inView = false, raf = 0, lastT = 0, acc = 0;\n    var drag = null;\n    var LX = -0.447, LY = -0.894;           \/\/ luz desde arriba-izquierda\n\n    \/* ---------- Textura \"cepillada\" reutilizable ---------- *\/\n    var tex = document.createElement('canvas');\n    tex.width = tex.height = 256;\n    (function () {\n      var g = tex.getContext('2d');\n      for (var i = 0; i < 1100; i++) {\n        var light = Math.random() > 0.5;\n        g.fillStyle = light ? 'rgba(255,255,255,' + (0.015 + Math.random() * 0.05) + ')'\n                            : 'rgba(0,0,0,' + (0.02 + Math.random() * 0.06) + ')';\n        g.fillRect(Math.random() * 256, Math.random() * 256, 30 + Math.random() * 190, 1);\n      }\n    })();\n\n    function rr(g, x, y, w, h, r) {\n      g.beginPath();\n      g.moveTo(x + r, y);\n      g.arcTo(x + w, y, x + w, y + h, r);\n      g.arcTo(x + w, y + h, x, y + h, r);\n      g.arcTo(x, y + h, x, y, r);\n      g.arcTo(x, y, x + w, y, r);\n      g.closePath();\n    }\n\n    \/* ---------- Sprite de la cara frontal de cada cubo ---------- *\/\n    function makeSprite(w, h) {\n      var c = document.createElement('canvas');\n      c.width = Math.ceil(w * dpr); c.height = Math.ceil(h * dpr);\n      var g = c.getContext('2d');\n      g.scale(c.width \/ w, c.height \/ h);\n\n      var r = Math.min(4, Math.min(w, h) * 0.08);\n      g.save();\n      rr(g, 0, 0, w, h, r); g.clip();\n\n      var lg = g.createLinearGradient(0, 0, w, h);\n      lg.addColorStop(0, '#b50a54');\n      lg.addColorStop(0.5, '#a8004c');\n      lg.addColorStop(1, '#920042');\n      g.fillStyle = lg; g.fillRect(0, 0, w, h);\n\n      g.save();\n      g.translate(-Math.random() * 256, -Math.random() * 256);\n      g.fillStyle = g.createPattern(tex, 'repeat');\n      g.fillRect(0, 0, w + 256, h + 256);\n      g.restore();\n\n      var rg = g.createRadialGradient(w \/ 2, h \/ 2, Math.min(w, h) * 0.4, w \/ 2, h \/ 2, Math.hypot(w, h) \/ 2);\n      rg.addColorStop(0, 'rgba(0,0,0,0)');\n      rg.addColorStop(1, 'rgba(40,0,20,0.28)');\n      g.fillStyle = rg; g.fillRect(0, 0, w, h);\n      g.restore();\n\n      g.lineWidth = 1.5;\n      g.strokeStyle = 'rgba(255,255,255,.16)';\n      g.beginPath(); g.moveTo(1, h - 1.5); g.lineTo(1, 1); g.lineTo(w - 1.5, 1); g.stroke();\n      g.strokeStyle = 'rgba(40,0,20,.4)';\n      g.beginPath(); g.moveTo(w - 1, 1.5); g.lineTo(w - 1, h - 1); g.lineTo(1.5, h - 1); g.stroke();\n      g.lineWidth = 1; g.strokeStyle = 'rgba(40,0,20,.4)';\n      rr(g, 0.5, 0.5, w - 1, h - 1, r); g.stroke();\n      return c;\n    }\n\n    \/* ---------- Medidas ---------- *\/\n    function measure() {\n      var r = root.getBoundingClientRect();\n      W = Math.max(1, Math.round(r.width));\n      H = Math.max(1, Math.round(r.height));\n      dpr = Math.min(window.devicePixelRatio || 1, 2);\n      canvas.width = Math.round(W * dpr);\n      canvas.height = Math.round(H * dpr);\n      scale = Math.max(0.5, Math.min(1, W \/ 1400));\n    }\n\n    \/* ---------- Mundo f\u00edsico ---------- *\/\n    function buildWorld() {\n      engine = Engine.create({ positionIterations: 8, velocityIterations: 6 });\n      engine.gravity.y = 1.6;\n      var wallOpts = { isStatic: true, friction: 0.8, restitution: 0.05 };\n      Composite.add(engine.world, [\n        Bodies.rectangle(W \/ 2, H + 50, W * 3, 100, wallOpts),        \/\/ piso\n        Bodies.rectangle(-50, H \/ 2, 100, H * 6, wallOpts),            \/\/ pared izq\n        Bodies.rectangle(W + 50, H \/ 2, 100, H * 6, wallOpts)          \/\/ pared der\n      ]);\n      bodies = [];\n      drag = null;\n    }\n\n    function spawnCube() {\n      var base = 40 + Math.random() * 78;\n      var w = base * scale;\n      var h = w * (0.68 + Math.random() * 0.55);\n      if (Math.random() > 0.5) { var t = w; w = h; h = t; }\n      w = Math.max(24, w); h = Math.max(24, h);\n\n      \/\/ M\u00e1s cubos hacia la izquierda -> \"monta\u00f1a\" que baja hacia la derecha\n      var x = w \/ 2 + (W - w) * Math.pow(Math.random(), 1.7);\n      var y = -Math.max(w, h) - 20 - Math.random() * 60;\n\n      var b = Bodies.rectangle(x, y, w, h, {\n        friction: 0.75, frictionStatic: 0.95, restitution: 0.12, density: 0.002,\n        angle: (Math.random() - 0.5) * 0.9\n      });\n      Body.setVelocity(b, { x: (Math.random() - 0.5) * 2, y: 4 + Math.random() * 3 });\n      Body.setAngularVelocity(b, (Math.random() - 0.5) * 0.07);\n      b.pjW = w; b.pjH = h;\n      b.pjDepth = Math.max(6, Math.min(16, Math.min(w, h) * 0.17));\n      b.pjSprite = makeSprite(w, h);\n      Composite.add(engine.world, b);\n      bodies.push(b);\n    }\n\n    \/* ---------- Dibujo ---------- *\/\n    function draw() {\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n      ctx.clearRect(0, 0, W, H);\n\n      var list = bodies.slice().sort(function (a, b) { return b.position.y - a.position.y; });\n\n      for (var i = 0; i < list.length; i++) {\n        var b = list[i], v = b.vertices;\n        var cx = b.position.x, cy = b.position.y;\n        var ox = b.pjDepth * 0.75, oy = -b.pjDepth * 0.9;\n\n        \/\/ Caras laterales (extrusi\u00f3n 3D)\n        ctx.shadowColor = 'transparent';\n        for (var k = 0; k < v.length; k++) {\n          var p = v[k], q = v[(k + 1) % v.length];\n          var ex = q.x - p.x, ey = q.y - p.y, len = Math.hypot(ex, ey) || 1;\n          var nx = ey \/ len, ny = -ex \/ len;\n          var mx = (p.x + q.x) \/ 2 - cx, my = (p.y + q.y) \/ 2 - cy;\n          if (nx * mx + ny * my < 0) { nx = -nx; ny = -ny; }\n          if (nx * ox + ny * oy <= 0) continue;\n\n          var light = nx * LX + ny * LY;\n          var f = Math.max(0.58, Math.min(1.04, 0.8 + 0.3 * light));\n          var hi = Math.max(light, 0);\n          var R = Math.min(255, Math.round(168 * f + 15 * hi));\n          var G = Math.min(255, Math.round(5 * hi));\n          var B = Math.min(255, Math.round(76 * f + 12 * hi));\n          ctx.fillStyle = 'rgb(' + R + ',' + G + ',' + B + ')';\n          ctx.strokeStyle = 'rgba(40,0,20,.5)';\n          ctx.lineWidth = 0.8;\n          ctx.beginPath();\n          ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y);\n          ctx.lineTo(q.x + ox, q.y + oy); ctx.lineTo(p.x + ox, p.y + oy);\n          ctx.closePath(); ctx.fill(); ctx.stroke();\n        }\n\n        \/\/ Cara frontal con sombra suave sobre lo que tiene debajo\n        ctx.save();\n        ctx.shadowColor = 'rgba(0,0,0,.28)';\n        ctx.shadowBlur = 7 * dpr;\n        ctx.shadowOffsetY = 2 * dpr;\n        ctx.translate(cx, cy);\n        ctx.rotate(b.angle);\n        ctx.drawImage(b.pjSprite, -b.pjW \/ 2, -b.pjH \/ 2, b.pjW, b.pjH);\n        ctx.restore();\n      }\n    }\n\n    function frame(t) {\n      if (!running) return;\n      raf = requestAnimationFrame(frame);\n      var dt = Math.min(50, t - lastT); lastT = t;\n      acc += dt;\n      var n = 0;\n      while (acc >= 16.667 && n < 3) { Engine.update(engine, 16.667); acc -= 16.667; n++; }\n      if (n === 3) acc = 0;\n      draw();\n    }\n\n    \/* ---------- Iniciar \/ detener (cada vez que se llega a la secci\u00f3n) ---------- *\/\n    function clearTimers() { for (var i = 0; i < timers.length; i++) clearTimeout(timers[i]); timers = []; }\n\n    function start() {\n      clearTimers();\n      cancelAnimationFrame(raf);\n      measure();\n      buildWorld();\n      inView = true; running = true; acc = 0; lastT = performance.now();\n\n      var count = Math.round(Math.max(28, Math.min(90, W \/ 18)));\n      var step = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 6 : 38;\n      for (var i = 0; i < count; i++) {\n        timers.push(setTimeout(spawnCube, i * step + Math.random() * 40));\n      }\n      raf = requestAnimationFrame(frame);\n    }\n\n    function stop() {\n      inView = false; running = false;\n      clearTimers();\n      cancelAnimationFrame(raf);\n      bodies = []; engine = null; drag = null;\n      ctx.setTransform(1, 0, 0, 1, 0, 0);\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n    }\n\n    if ('IntersectionObserver' in window) {\n      new IntersectionObserver(function (entries) {\n        var e = entries[0];\n        if (!inView && e.intersectionRatio >= 0.3) start();\n        else if (inView && e.intersectionRatio === 0) stop();   \/\/ al salir completo, se reinicia la pr\u00f3xima vez\n      }, { threshold: [0, 0.05, 0.15, 0.3, 0.5] }).observe(root);\n    } else {\n      start();\n    }\n\n    var rzT, lastW = 0;\n    window.addEventListener('resize', function () {\n      clearTimeout(rzT);\n      rzT = setTimeout(function () {\n        var w = root.getBoundingClientRect().width;\n        if (Math.abs(w - lastW) > 30) { lastW = w; if (inView) start(); }\n      }, 300);\n    });\n    lastW = root.getBoundingClientRect().width;\n\n    \/* ---------- Interacci\u00f3n: mouse y touch ---------- *\/\n    var ptr = { x: 0, y: 0 };\n\n    function pos(e) {\n      var r = canvas.getBoundingClientRect();\n      return { x: e.clientX - r.left, y: e.clientY - r.top };\n    }\n\n    \/\/ Empuja los cubos cercanos al puntero\n    function push(x, y, vx, vy, gain, forcedSpeed) {\n      if (!engine) return;\n      var speed = forcedSpeed || Math.min(Math.hypot(vx, vy), 45);\n      if (speed < 1.5) return;\n      var R = 80 * Math.max(0.8, scale);\n      for (var i = 0; i < bodies.length; i++) {\n        var b = bodies[i];\n        if (drag && drag.bodyB === b) continue;\n        var dx = b.position.x - x, dy = b.position.y - y;\n        var dist = Math.hypot(dx, dy) || 1;\n        var reach = R + Math.max(b.pjW, b.pjH) \/ 2;\n        if (dist >= reach) continue;\n        var s = 1 - dist \/ reach;\n        var k = s * speed * 0.16 * gain;\n        Body.setVelocity(b, {\n          x: b.velocity.x + (dx \/ dist) * k + vx * 0.04 * s,\n          y: b.velocity.y + (dy \/ dist) * k - s * 1.6\n        });\n        Body.setAngularVelocity(b, b.angularVelocity + (Math.random() - 0.5) * 0.05 * s * gain);\n      }\n    }\n\n    canvas.addEventListener('pointerenter', function (e) { var p = pos(e); ptr.x = p.x; ptr.y = p.y; });\n\n    canvas.addEventListener('pointermove', function (e) {\n      var p = pos(e);\n      var vx = p.x - ptr.x, vy = p.y - ptr.y;\n      ptr.x = p.x; ptr.y = p.y;\n      if (drag) { drag.pointA.x = p.x; drag.pointA.y = p.y; return; }\n      push(p.x, p.y, vx, vy, e.pointerType === 'touch' ? 1.3 : 1);\n    });\n\n    canvas.addEventListener('pointerdown', function (e) {\n      if (!engine) return;\n      var p = pos(e);\n      ptr.x = p.x; ptr.y = p.y;\n\n      if (e.pointerType === 'mouse') {\n        \/\/ Agarrar y arrastrar un cubo\n        if (e.button !== 0) return;\n        var hit = Query.point(bodies, p);\n        if (hit.length) {\n          var b = hit[0];\n          var dx = p.x - b.position.x, dy = p.y - b.position.y;\n          var cs = Math.cos(b.angle), sn = Math.sin(b.angle);\n          drag = Constraint.create({\n            pointA: { x: p.x, y: p.y },\n            bodyB: b,\n            pointB: { x: dx * cs + dy * sn, y: -dx * sn + dy * cs },\n            stiffness: 0.18, damping: 0.1, length: 0\n          });\n          Composite.add(engine.world, drag);\n          try { canvas.setPointerCapture(e.pointerId); } catch (err) {}\n        } else {\n          push(p.x, p.y, 0, 0, 1.4, 28);\n        }\n      } else {\n        \/\/ Touch: un toque lanza los cubos cercanos\n        push(p.x, p.y, 0, 0, 1.5, 30);\n      }\n    });\n\n    function release() {\n      if (drag && engine) Composite.remove(engine.world, drag);\n      drag = null;\n    }\n    canvas.addEventListener('pointerup', release);\n    canvas.addEventListener('pointercancel', release);\n    canvas.addEventListener('lostpointercapture', release);\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dos a\u00f1os construyendo la capital. Han sido 2 an\u0303os de asumir el&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-5077","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/pages\/5077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/comments?post=5077"}],"version-history":[{"count":147,"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/pages\/5077\/revisions"}],"predecessor-version":[{"id":7561,"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/pages\/5077\/revisions\/7561"}],"wp:attachment":[{"href":"https:\/\/pepechedraui.mx\/segundoinforme\/wp-json\/wp\/v2\/media?parent=5077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}