{"id":1297,"date":"2026-02-19T17:16:33","date_gmt":"2026-02-19T17:16:33","guid":{"rendered":"http:\/\/192.168.0.100\/wordpress\/?page_id=1297"},"modified":"2026-03-24T17:40:28","modified_gmt":"2026-03-24T17:40:28","slug":"comunidad-universitaria","status":"publish","type":"page","link":"https:\/\/metropoli.edu.mx\/index.php\/comunidad-universitaria\/","title":{"rendered":"COMUNIDAD UNIVERSITARIA"},"content":{"rendered":"\n<style>\n  \/* =========================================\n      VARIABLES Y SCOPE PRINCIPAL\n  ========================================= *\/\n  .upmp-custom-gallery {\n    --vino-deep: #5f1b2d;\n    --vino-light: #7a233a;\n    --vino-darker: #3d1020;\n    --gold-accent: #c79b66;\n    --gold-light: #e2be96;\n    --gold-dim: rgba(199,155,102,0.15);\n    --cream-bg: #fffded;\n    --text-dark: #1a1a1a;\n    --text-gray: #777;\n    --white: #ffffff;\n    \n    font-family: 'DM Sans', sans-serif;\n    background: var(--cream-bg);\n    color: var(--text-dark);\n    overflow-x: hidden;\n    position: relative;\n    display: block;\n    width: 100%;\n  }\n\n  .upmp-custom-gallery *, \n  .upmp-custom-gallery *::before, \n  .upmp-custom-gallery *::after { \n    box-sizing: border-box; \n    margin: 0; \n    padding: 0; \n  }\n\n  \/* =========================================\n      HEADER\n  ========================================= *\/\n  .upmp-custom-gallery .gallery-header {\n    background: var(--vino-deep);\n    padding: 80px 20px 100px;\n    text-align: center;\n    position: relative;\n    clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);\n    overflow: hidden;\n  }\n\n  .upmp-custom-gallery .gallery-header::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'\/%3E%3C\/svg%3E\");\n    opacity: 0.3;\n    pointer-events: none;\n  }\n\n  .upmp-custom-gallery .header-eyebrow {\n    display: inline-block;\n    font-size: 0.78rem;\n    font-weight: 500;\n    letter-spacing: 4px;\n    text-transform: uppercase;\n    color: var(--gold-accent);\n    margin-bottom: 18px;\n    z-index: 1;\n    position: relative;\n  }\n\n  .upmp-custom-gallery .gallery-header h1 {\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2.8rem, 6vw, 5.5rem);\n    font-weight: 900;\n    color: var(--white);\n    line-height: 1.05;\n    position: relative;\n    z-index: 1;\n  }\n\n  .upmp-custom-gallery .gallery-header h1 span {\n    color: var(--gold-accent);\n    display: block;\n    font-style: italic;\n  }\n\n  .upmp-custom-gallery .header-divider {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    margin: 28px auto 0;\n    position: relative;\n    z-index: 1;\n    color: var(--white);\n  }\n\n  .upmp-custom-gallery .header-divider::before,\n  .upmp-custom-gallery .header-divider::after {\n    content: '';\n    width: 60px;\n    height: 1px;\n    background: linear-gradient(to right, transparent, var(--gold-accent));\n  }\n\n  \/* =========================================\n      GALLERY GRID\n  ========================================= *\/\n  .upmp-custom-gallery .gallery-wrapper {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 80px 24px 100px;\n  }\n\n  .upmp-custom-gallery .essence-gallery {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n    grid-auto-rows: 320px;\n    gap: 18px;\n  }\n\n  .upmp-custom-gallery .gallery-item {\n    position: relative;\n    overflow: hidden;\n    border-radius: 12px;\n    cursor: pointer;\n    background: #2a0e1a;\n    box-shadow: 0 8px 24px rgba(95,27,45,0.12);\n    opacity: 0;\n    transform: translateY(30px);\n    animation: revealItem 0.7s ease forwards;\n  }\n\n  .upmp-custom-gallery .gallery-item img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    object-position: 50% 20%;\n    transition: transform 0.9s cubic-bezier(0.2, 1, 0.3, 1);\n    display: block;\n  }\n\n  .upmp-custom-gallery .gallery-item .item-overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(to top, rgba(95,27,45,0.7) 0%, transparent 50%);\n    opacity: 0;\n    transition: opacity 0.4s ease;\n    display: flex;\n    align-items: flex-end;\n    padding: 28px;\n    z-index: 2;\n  }\n\n  .upmp-custom-gallery .open-icon {\n    width: 48px; height: 48px;\n    border-radius: 50%;\n    border: 2px solid var(--gold-accent);\n    background: rgba(95,27,45,0.6);\n    display: flex; align-items: center; justify-content: center;\n    margin-left: auto;\n    backdrop-filter: blur(4px);\n    transform: scale(0.8);\n    transition: transform 0.3s ease;\n  }\n\n  .upmp-custom-gallery .open-icon svg {\n    width: 20px; height: 20px;\n    stroke: var(--gold-accent);\n    fill: none;\n    stroke-width: 2;\n  }\n\n  .upmp-custom-gallery .gallery-item:hover img { transform: scale(1.08); }\n  .upmp-custom-gallery .gallery-item:hover .item-overlay { opacity: 1; }\n  .upmp-custom-gallery .gallery-item:hover .open-icon { transform: scale(1); }\n\n  \/* Grid spans *\/\n  .upmp-custom-gallery .w-8  { grid-column: span 8; }\n  .upmp-custom-gallery .w-4  { grid-column: span 4; }\n  .upmp-custom-gallery .w-6  { grid-column: span 6; }\n  .upmp-custom-gallery .panoramica { grid-column: span 12; }\n\n  \/* =========================================\n      LIGHTBOX\n  ========================================= *\/\n  .upmp-custom-gallery .lightbox {\n    position: fixed;\n    inset: 0;\n    z-index: 99999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.4s ease;\n  }\n\n  .upmp-custom-gallery .lightbox.active { opacity: 1; pointer-events: all; }\n\n  .upmp-custom-gallery .lb-backdrop {\n    position: absolute;\n    inset: 0;\n    background: rgba(20, 6, 12, 0.95);\n    backdrop-filter: blur(16px);\n  }\n\n  .upmp-custom-gallery .lb-container {\n    position: relative;\n    z-index: 2;\n    width: 100%; \n    max-width: 1200px;\n    padding: 0 80px; \n    box-sizing: border-box;\n  }\n\n  .upmp-custom-gallery .lb-img-wrapper {\n    position: relative;\n    width: 100%;\n  }\n\n  .upmp-custom-gallery .lb-img-wrapper img {\n    display: block;\n    max-width: 100%; \n    max-height: 80vh;\n    margin: 0 auto;\n    object-fit: contain;\n    transition: opacity 0.3s ease;\n    user-select: none; \/* Evita que la imagen se seleccione al deslizar *\/\n  }\n\n  .upmp-custom-gallery .lb-counter {\n    position: absolute;\n    bottom: -50px;\n    left: 50%;\n    transform: translateX(-50%);\n    color: white;\n    text-align: center;\n  }\n\n  .upmp-custom-gallery .lb-dots { display: flex; gap: 6px; margin-top: 10px; justify-content: center; }\n  .upmp-custom-gallery .lb-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: 0.3s; cursor: pointer; }\n  .upmp-custom-gallery .lb-dot.active { background: var(--gold-accent); transform: scale(1.3); }\n\n  .upmp-custom-gallery .lb-btn {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: rgba(95,27,45,0.5);\n    border: 1px solid var(--gold-accent);\n    width: 50px; height: 50px;\n    border-radius: 50%;\n    cursor: pointer;\n    color: white;\n    display: flex; align-items: center; justify-content: center;\n    z-index: 10;\n  }\n  \n  .upmp-custom-gallery .lb-prev { left: 10px; }\n  .upmp-custom-gallery .lb-next { right: 10px; }\n\n  .upmp-custom-gallery .lb-close {\n    position: fixed;\n    top: 20px; right: 20px;\n    background: none; border: none; cursor: pointer; color: white;\n    z-index: 100;\n  }\n\n  @keyframes revealItem { to { opacity: 1; transform: translateY(0); } }\n\n  \/* =========================================\n      MEDIA QUERIES\n  ========================================= *\/\n  \n  \/* Tablets y pantallas medianas *\/\n  @media (max-width: 900px) {\n    .upmp-custom-gallery .essence-gallery { grid-auto-rows: 240px; }\n    .upmp-custom-gallery .w-8, .upmp-custom-gallery .w-4 { grid-column: span 6; }\n    .upmp-custom-gallery .lb-container { padding: 0 60px; } \n  }\n\n  \/* Dispositivos m\u00f3viles est\u00e1ndar *\/\n  @media (max-width: 768px) {\n    .upmp-custom-gallery .gallery-header { padding: 50px 15px 70px; }\n    .upmp-custom-gallery .gallery-wrapper { padding: 40px 15px 60px; }\n    .upmp-custom-gallery .header-eyebrow { font-size: 0.65rem; }\n    .upmp-custom-gallery .header-divider { flex-direction: column; text-align: center; gap: 8px; }\n    .upmp-custom-gallery .header-divider::before, \n    .upmp-custom-gallery .header-divider::after { width: 40px; }\n    \n    .upmp-custom-gallery .lb-container { padding: 0 10px; }\n    .upmp-custom-gallery .lb-img-wrapper img { max-height: 65vh; }\n    .upmp-custom-gallery .lb-counter { bottom: -45px; }\n    .upmp-custom-gallery .lb-close { top: 15px; right: 15px; }\n\n    \/* Ocultar botones laterales para usar solo swipe en m\u00f3viles *\/\n    .upmp-custom-gallery .lb-prev, \n    .upmp-custom-gallery .lb-next { \n        display: none; \n    }\n  }\n\n  \/* Tel\u00e9fonos peque\u00f1os *\/\n  @media (max-width: 600px) {\n    .upmp-custom-gallery .essence-gallery { \n      display: flex; \n      flex-direction: column; \n    }\n    .upmp-custom-gallery .gallery-item { \n      height: 280px; \n      width: 100%; \n    }\n  }\n<\/style>\n\n<div class=\"upmp-custom-gallery\">\n  <header class=\"gallery-header\">\n    <p class=\"header-eyebrow\">Universidad Polit\u00e9cnica Metropolitana de Puebla<\/p>\n    <h1>El Coraz\u00f3n<span>de la Metro<\/span><\/h1>\n    <div class=\"header-divider\">\n      <span>Momentos de Excelencia Acad\u00e9mica y Cultural<\/span>\n    <\/div>\n  <\/header>\n\n  <div class=\"gallery-wrapper\">\n    <section class=\"essence-gallery\" id=\"gallery\">\n\n      <div class=\"gallery-item w-8\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/636631052_932371226404532_926334915721026568_n.jpg\" alt=\"Gente UPMP\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-4\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/636296613_932579256383729_1556656817479627990_n.jpg\" alt=\"Evento\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-4\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/536653346_782441171397539_4285792426246516359_n.jpg\" alt=\"Comunidad Metro\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-8\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/539032736_786610554313934_3264006201175753070_n.jpg\" alt=\"Estudiantes UPMP\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-4\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/629185851_921938000781188_5055164785515853853_n.jpg\" alt=\"Clase\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-8\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/619382698_914282018213453_5355190725108493635_n.jpg\" alt=\"Campus\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/598141357_880374051604250_7467452262168639328_n.jpg\" alt=\"Actividad acad\u00e9mica\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/615483069_900845742890414_7902965859632003787_n.jpg\" alt=\"Colaboraci\u00f3n\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/596576976_876591261982529_2792845428311384071_n.jpg\" alt=\"Estudiantes\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/596420792_876591428649179_8493017816224969594_n.jpg\" alt=\"Taller\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item panoramica\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/636968266_932579143050407_4031947399061277670_n.jpg\" style=\"object-position: center 30%;\" alt=\"Naturaleza UPMP\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-8\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/631415826_927193266922328_8872430894800935526_n.jpg\" alt=\"Proyecto Metro\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-4\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/572390510_841731115468544_6218712336066780058_n.jpg\" style=\"object-position: center 5%;\" alt=\"Grupo\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/563485590_829445786697077_8864981403525108155_n.jpg\" alt=\"Grupo 2\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/598037427_876591451982510_2749126903024687128_n.jpg\" alt=\"Evento UPMP\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-4\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/555414544_814048658236790_4915000494754598737_n.jpg\" alt=\"Actividad\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-4\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/550560088_807046458937010_2719415908532907143_n.jpg\" alt=\"Cierre\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-4\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/cumunida.jpg\" alt=\"Comunidad\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/594475290_872034659104856_8798248550347872379_n.jpg\" alt=\"Vida universitaria\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n      <div class=\"gallery-item w-6\" tabindex=\"0\">\n        <img decoding=\"async\" src=\"https:\/\/metropoli.edu.mx\/wp-content\/uploads\/2026\/02\/574073375_847996284842027_4000403625916133514_n.jpg\" alt=\"Campus panor\u00e1mica\" style=\"object-position: center 40%;\">\n        <div class=\"item-overlay\"><div class=\"open-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><path d=\"M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7\" stroke-width=\"2\"\/><\/svg><\/div><\/div>\n      <\/div>\n\n    <\/section>\n  <\/div>\n\n  <div class=\"lightbox\" id=\"lightbox\" role=\"dialog\" aria-modal=\"true\">\n    <div class=\"lb-backdrop\" id=\"lbBackdrop\"><\/div>\n    <button class=\"lb-close\" id=\"lbClose\"><svg width=\"30\" height=\"30\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg><\/button>\n    <div class=\"lb-container\">\n      <button class=\"lb-btn lb-prev\" id=\"lbPrev\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg><\/button>\n      <div class=\"lb-img-wrapper\">\n        <img decoding=\"async\" id=\"lbImg\" src=\"\" alt=\"\">\n        <div class=\"lb-counter\">\n          <span id=\"lbCounterText\"><\/span>\n          <div class=\"lb-dots\" id=\"lbDots\"><\/div>\n        <\/div>\n      <\/div>\n      <button class=\"lb-btn lb-next\" id=\"lbNext\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"><polyline points=\"9 18 15 12 9 6\"\/><\/svg><\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  (function() {\n    const gallery = document.getElementById('gallery');\n    const lightbox = document.getElementById('lightbox');\n    const lbImg = document.getElementById('lbImg');\n    const lbPrev = document.getElementById('lbPrev');\n    const lbNext = document.getElementById('lbNext');\n    const lbClose = document.getElementById('lbClose');\n    const lbBackdrop = document.getElementById('lbBackdrop');\n    const lbCounterText = document.getElementById('lbCounterText');\n    const lbDots = document.getElementById('lbDots');\n\n    const items = Array.from(gallery.querySelectorAll('.gallery-item'));\n    const images = items.map(item => ({\n      src: item.querySelector('img').src,\n      alt: item.querySelector('img').alt\n    }));\n\n    let current = 0;\n\n    function buildDots() {\n      lbDots.innerHTML = '';\n      images.forEach((_, i) => {\n        const d = document.createElement('span');\n        d.className = 'lb-dot' + (i === current ? ' active' : '');\n        d.addEventListener('click', (e) => { e.stopPropagation(); goTo(i); });\n        lbDots.appendChild(d);\n      });\n    }\n\n    function goTo(index) {\n      current = (index + images.length) % images.length;\n      lbImg.style.opacity = '0';\n      setTimeout(() => {\n        lbImg.src = images[current].src;\n        lbImg.alt = images[current].alt;\n        lbCounterText.textContent = `${current + 1} \/ ${images.length}`;\n        buildDots();\n        lbImg.style.opacity = '1';\n      }, 200);\n    }\n\n    function openLightbox(index) {\n      current = index;\n      lbImg.src = images[current].src;\n      lbImg.alt = images[current].alt;\n      lbCounterText.textContent = `${current + 1} \/ ${images.length}`;\n      buildDots();\n      lightbox.classList.add('active');\n      document.body.style.overflow = 'hidden';\n    }\n\n    function closeLightbox() {\n      lightbox.classList.remove('active');\n      document.body.style.overflow = '';\n    }\n\n    items.forEach((item, i) => {\n      item.addEventListener('click', () => openLightbox(i));\n    });\n\n    \/\/ Eventos de botones (se mantienen para escritorio)\n    lbPrev.addEventListener('click', (e) => { e.stopPropagation(); goTo(current - 1); });\n    lbNext.addEventListener('click', (e) => { e.stopPropagation(); goTo(current + 1); });\n    lbClose.addEventListener('click', closeLightbox);\n    lbBackdrop.addEventListener('click', closeLightbox);\n\n    \/\/ Navegaci\u00f3n por teclado\n    document.addEventListener('keydown', e => {\n      if (!lightbox.classList.contains('active')) return;\n      if (e.key === 'ArrowLeft') goTo(current - 1);\n      if (e.key === 'ArrowRight') goTo(current + 1);\n      if (e.key === 'Escape') closeLightbox();\n    });\n\n    \/\/ ==========================================\n    \/\/      L\u00d3GICA DE GESTOS (SWIPE)\n    \/\/ ==========================================\n    let touchStartX = 0;\n    let touchEndX = 0;\n    const swipeThreshold = 50;\n\n    function handleSwipe() {\n      const swipeDistance = touchStartX - touchEndX;\n      if (Math.abs(swipeDistance) > swipeThreshold) {\n        if (swipeDistance > 0) {\n          goTo(current + 1); \/\/ Desliz\u00f3 a la izquierda\n        } else {\n          goTo(current - 1); \/\/ Desliz\u00f3 a la derecha\n        }\n      }\n    }\n\n    lightbox.addEventListener('touchstart', (e) => {\n      touchStartX = e.changedTouches[0].screenX;\n    }, { passive: true });\n\n    lightbox.addEventListener('touchend', (e) => {\n      touchEndX = e.changedTouches[0].screenX;\n      handleSwipe();\n    }, { passive: true });\n\n  })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Universidad Polit\u00e9cnica Metropolitana de Puebla El Coraz\u00f3nde la Metro Momentos de Excelencia Acad\u00e9mica y Cultural<\/p>\n","protected":false},"author":1,"featured_media":1339,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1297","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/1297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/comments?post=1297"}],"version-history":[{"count":22,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/1297\/revisions"}],"predecessor-version":[{"id":1838,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/pages\/1297\/revisions\/1838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media\/1339"}],"wp:attachment":[{"href":"https:\/\/metropoli.edu.mx\/index.php\/wp-json\/wp\/v2\/media?parent=1297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}