{"id":3590,"date":"2025-10-06T09:01:41","date_gmt":"2025-10-06T14:01:41","guid":{"rendered":"https:\/\/www.colconcretos.com\/?page_id=3590"},"modified":"2025-11-13T07:30:23","modified_gmt":"2025-11-13T12:30:23","slug":"galeria","status":"publish","type":"page","link":"https:\/\/www.colconcretos.com\/?page_id=3590","title":{"rendered":"Galeria"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3590\" class=\"elementor elementor-3590\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5caff353 ct-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"5caff353\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-26bb1195\" data-id=\"26bb1195\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-561cf405 elementor-widget elementor-widget-spacer\" data-id=\"561cf405\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ae996d elementor-widget elementor-widget-heading\" data-id=\"4ae996d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\"SIGAMOS CRECIENDO JUNTOS\"<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-1d1476d9 e-flex e-con-boxed e-con e-parent\" data-id=\"1d1476d9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c1c1b25 elementor-widget elementor-widget-spacer\" data-id=\"6c1c1b25\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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-363b0383 e-con-full e-flex e-con e-parent\" data-id=\"363b0383\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7eff07c3 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"7eff07c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>    \/* ESTILOS PARA ELEMENTOR - TEXTO LARGO OPTIMIZADO *\/\r\n    .np-elementor-section {\r\n        line-height: 1.6;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n\r\n    .np-elementor-container {\r\n        width: 100%;\r\n        max-width: 1200px;\r\n        margin: 0 auto;\r\n        padding: 0 15px;\r\n    }\r\n\r\n    \/* SECCI\u00d3N GALER\u00cdA PERSONAL *\/\r\n    .np-galeria-personal {\r\n        padding: 80px 0;\r\n        background: white;\r\n    }\r\n\r\n    .np-galeria-header {\r\n        text-align: center;\r\n        margin-bottom: 50px;\r\n    }\r\n\r\n    .np-galeria-header h2 {\r\n        font-size: 2.2rem;\r\n        color: #1a1a1a;\r\n        margin-bottom: 20px;\r\n        font-weight: 700;\r\n        position: relative;\r\n        display: inline-block;\r\n    }\r\n\r\n    .np-galeria-header h2::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -10px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        width: 80px;\r\n        height: 4px;\r\n        background: #2e8b57;\r\n        border-radius: 2px;\r\n    }\r\n\r\n    .np-galeria-header p {\r\n        font-size: 1.1rem;\r\n        color: #666;\r\n        max-width: 800px;\r\n        margin: 0 auto;\r\n        line-height: 1.7;\r\n    }\r\n\r\n    \/* FILTROS DE GALER\u00cdA PERSONAL *\/\r\n    .np-galeria-filtros {\r\n        display: flex;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .np-filtro-btn {\r\n        background: #f8f9fa;\r\n        border: 1px solid #e9ecef;\r\n        padding: 10px 20px;\r\n        border-radius: 30px;\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        color: #555;\r\n    }\r\n\r\n    .np-filtro-btn:hover, .np-filtro-btn.active {\r\n        background: #2e8b57;\r\n        color: white;\r\n        border-color: #2e8b57;\r\n    }\r\n\r\n    \/* GRID DE GALER\u00cdA PERSONAL *\/\r\n    .np-galeria-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n        gap: 25px;\r\n    }\r\n\r\n    .np-galeria-item {\r\n        position: relative;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\r\n        transition: all 0.4s ease;\r\n        cursor: pointer;\r\n        background: white;\r\n        border: 1px solid #f0f0f0;\r\n        height: 280px;\r\n    }\r\n\r\n    .np-galeria-item:hover {\r\n        transform: translateY(-8px) scale(1.02);\r\n        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);\r\n        border-color: #2e8b57;\r\n    }\r\n\r\n    .np-galeria-img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        display: block;\r\n        transition: transform 0.5s ease;\r\n    }\r\n\r\n    .np-galeria-item:hover .np-galeria-img {\r\n        transform: scale(1.08);\r\n    }\r\n\r\n    .np-galeria-overlay {\r\n        position: absolute;\r\n        bottom: 0;\r\n        left: 0;\r\n        right: 0;\r\n        background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\r\n        color: white;\r\n        padding: 20px;\r\n        transform: translateY(100%);\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .np-galeria-item:hover .np-galeria-overlay {\r\n        transform: translateY(0);\r\n    }\r\n\r\n    .np-galeria-categoria {\r\n        display: inline-block;\r\n        background: #2e8b57;\r\n        color: white;\r\n        padding: 4px 12px;\r\n        border-radius: 20px;\r\n        font-size: 0.75rem;\r\n        font-weight: 600;\r\n        margin-bottom: 8px;\r\n    }\r\n\r\n    .np-galeria-titulo {\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        margin: 0;\r\n        line-height: 1.3;\r\n    }\r\n\r\n    .np-galeria-fecha {\r\n        font-size: 0.8rem;\r\n        opacity: 0.9;\r\n        margin-top: 5px;\r\n    }\r\n\r\n    \/* MODAL DE GALER\u00cdA PERSONAL - MEJORADO Y OPTIMIZADO *\/\r\n    .np-galeria-modal {\r\n        display: none;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(255, 255, 255, 0.98);\r\n        z-index: 1000;\r\n        justify-content: center;\r\n        align-items: center;\r\n        padding: 20px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .np-galeria-modal-content {\r\n        width: 95vw;\r\n        height: 95vh;\r\n        max-width: 1400px;\r\n        position: relative;\r\n        background: white;\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);\r\n        border: 1px solid #e9ecef;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .np-galeria-modal-close {\r\n        position: absolute;\r\n        top: 15px;\r\n        right: 20px;\r\n        background: rgba(0, 0, 0, 0.7);\r\n        color: white;\r\n        border: none;\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        font-size: 1.2rem;\r\n        cursor: pointer;\r\n        z-index: 10;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .np-galeria-modal-close:hover {\r\n        background: rgba(0, 0, 0, 0.9);\r\n        transform: rotate(90deg);\r\n    }\r\n\r\n    \/* CONTENEDOR DE IMAGEN - OPTIMIZADO SEG\u00daN ORIENTACI\u00d3N *\/\r\n    .np-galeria-modal-img {\r\n        flex: 1;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        overflow: hidden;\r\n        background-color: #f8f9fa;\r\n        padding: 15px;\r\n        position: relative;\r\n        min-height: 0;\r\n    }\r\n\r\n    .np-galeria-modal-img img {\r\n        width: auto;\r\n        height: auto;\r\n        object-fit: contain;\r\n        display: block;\r\n        border-radius: 4px;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n    }\r\n\r\n    \/* IM\u00c1GENES HORIZONTALES - ANCHO COMPLETO COMO ANTES *\/\r\n    .np-galeria-modal-img.landscape img {\r\n        max-width: 100%;\r\n        max-height: 100%;\r\n        width: auto;\r\n        height: auto;\r\n    }\r\n\r\n    \/* IM\u00c1GENES VERTICALES - OPTIMIZADAS PARA VERSE COMPLETAS *\/\r\n    .np-galeria-modal-img.portrait img {\r\n        max-height: 100%;\r\n        max-width: 100%;\r\n        width: auto;\r\n        height: auto;\r\n    }\r\n\r\n    \/* CUERPO DEL MODAL CON MINIATURAS *\/\r\n    .np-galeria-modal-body {\r\n        padding: 20px;\r\n        border-top: 1px solid #e9ecef;\r\n        flex-shrink: 0;\r\n        background: white;\r\n        overflow: visible;\r\n    }\r\n\r\n    .np-galeria-modal-categoria {\r\n        display: inline-block;\r\n        background: #2e8b57;\r\n        color: white;\r\n        padding: 6px 15px;\r\n        border-radius: 20px;\r\n        font-size: 0.8rem;\r\n        font-weight: 600;\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    .np-galeria-modal-titulo {\r\n        font-size: 1.5rem;\r\n        color: #1a1a1a;\r\n        margin-bottom: 8px;\r\n        font-weight: 700;\r\n        line-height: 1.2;\r\n    }\r\n\r\n    .np-galeria-modal-fecha {\r\n        color: #888;\r\n        font-size: 0.9rem;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    \/* CONTROLES DE NAVEGACI\u00d3N - MEJORADOS PARA M\u00d3VIL *\/\r\n    .np-galeria-controls {\r\n        position: absolute;\r\n        top: 50%;\r\n        width: 100%;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        transform: translateY(-50%);\r\n        pointer-events: none;\r\n        z-index: 5;\r\n        padding: 0 15px;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    .np-galeria-prev, .np-galeria-next {\r\n        background: rgba(0, 0, 0, 0.7);\r\n        color: white;\r\n        border: none;\r\n        width: 50px;\r\n        height: 50px;\r\n        border-radius: 50%;\r\n        font-size: 1.2rem;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        margin: 0;\r\n        pointer-events: all;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .np-galeria-prev:hover, .np-galeria-next:hover {\r\n        background: rgba(0, 0, 0, 0.9);\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* INDICADOR DE IM\u00c1GENES *\/\r\n    .np-galeria-indicador {\r\n        position: absolute;\r\n        bottom: 120px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        text-align: center;\r\n        color: white;\r\n        font-size: 0.9rem;\r\n        background: rgba(0, 0, 0, 0.7);\r\n        padding: 8px 16px;\r\n        border-radius: 20px;\r\n        display: inline-block;\r\n        width: auto;\r\n        min-width: 80px;\r\n        white-space: nowrap;\r\n        z-index: 5;\r\n    }\r\n\r\n    \/* MINIATURAS OPTIMIZADAS - UNA SOLA FILA CON SCROLL HORIZONTAL *\/\r\n    .np-galeria-miniaturas {\r\n        display: flex;\r\n        gap: 8px;\r\n        padding: 10px 0 5px 0;\r\n        overflow-x: auto;\r\n        overflow-y: hidden;\r\n        margin-top: 10px;\r\n        border-top: 1px solid #f0f0f0;\r\n        flex-wrap: nowrap;\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n        min-height: 70px;\r\n        scrollbar-width: thin;\r\n        scrollbar-color: #2e8b57 #f0f0f0;\r\n    }\r\n\r\n    \/* Estilos para la barra de scroll en navegadores WebKit *\/\r\n    .np-galeria-miniaturas::-webkit-scrollbar {\r\n        height: 6px;\r\n    }\r\n\r\n    .np-galeria-miniaturas::-webkit-scrollbar-track {\r\n        background: #f0f0f0;\r\n        border-radius: 3px;\r\n    }\r\n\r\n    .np-galeria-miniaturas::-webkit-scrollbar-thumb {\r\n        background: #2e8b57;\r\n        border-radius: 3px;\r\n    }\r\n\r\n    .np-galeria-miniaturas::-webkit-scrollbar-thumb:hover {\r\n        background: #247048;\r\n    }\r\n\r\n    .np-miniatura {\r\n        width: 80px;\r\n        height: 60px;\r\n        border-radius: 6px;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n        opacity: 0.6;\r\n        transition: all 0.3s ease;\r\n        flex-shrink: 0;\r\n        border: 2px solid transparent;\r\n        position: relative;\r\n    }\r\n\r\n    .np-miniatura.active {\r\n        opacity: 1;\r\n        border: 2px solid #2e8b57;\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .np-miniatura:hover {\r\n        opacity: 0.8;\r\n        transform: scale(1.05);\r\n    }\r\n\r\n    .np-miniatura img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    \/* N\u00famero en miniatura *\/\r\n    .np-miniatura-numero {\r\n        position: absolute;\r\n        top: 2px;\r\n        right: 2px;\r\n        background: rgba(0, 0, 0, 0.7);\r\n        color: white;\r\n        font-size: 0.7rem;\r\n        width: 18px;\r\n        height: 18px;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-weight: bold;\r\n    }\r\n    \r\n    .np-galeria-item.hidden {\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* MEJORAS RESPONSIVE *\/\r\n    @media (min-width: 768px) {\r\n        .np-galeria-personal {\r\n            padding: 100px 0;\r\n        }\r\n        \r\n        .np-galeria-header h2 {\r\n            font-size: 2.5rem;\r\n        }\r\n        \r\n        .np-galeria-header p {\r\n            font-size: 1.2rem;\r\n        }\r\n        \r\n        .np-galeria-grid {\r\n            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n            gap: 30px;\r\n        }\r\n        \r\n        .np-galeria-item {\r\n            height: 300px;\r\n        }\r\n        \r\n        .np-galeria-modal-img {\r\n            padding: 20px;\r\n        }\r\n        \r\n        .np-galeria-modal-body {\r\n            padding: 25px;\r\n        }\r\n        \r\n        .np-galeria-modal-titulo {\r\n            font-size: 1.7rem;\r\n        }\r\n        \r\n        .np-miniatura {\r\n            width: 90px;\r\n            height: 70px;\r\n        }\r\n        \r\n        .np-galeria-indicador {\r\n            bottom: 130px;\r\n        }\r\n    }\r\n\r\n    @media (min-width: 1024px) {\r\n        .np-galeria-personal {\r\n            padding: 120px 0;\r\n        }\r\n        \r\n        .np-galeria-header h2 {\r\n            font-size: 3rem;\r\n        }\r\n        \r\n        .np-galeria-header p {\r\n            font-size: 1.3rem;\r\n        }\r\n        \r\n        .np-galeria-grid {\r\n            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n            gap: 35px;\r\n        }\r\n        \r\n        .np-galeria-item {\r\n            height: 320px;\r\n        }\r\n        \r\n        .np-galeria-modal-img {\r\n            padding: 25px;\r\n        }\r\n        \r\n        .np-galeria-modal-body {\r\n            padding: 30px;\r\n        }\r\n        \r\n        .np-galeria-modal-titulo {\r\n            font-size: 1.9rem;\r\n        }\r\n\r\n        .np-miniatura {\r\n            width: 100px;\r\n            height: 75px;\r\n        }\r\n        \r\n        .np-galeria-indicador {\r\n            bottom: 140px;\r\n        }\r\n    }\r\n\r\n    \/* CORRECCIONES ESPEC\u00cdFICAS PARA M\u00d3VILES *\/\r\n    @media (max-width: 480px) {\r\n        .np-galeria-personal {\r\n            padding: 60px 0;\r\n        }\r\n        \r\n        .np-galeria-header h2 {\r\n            font-size: 1.8rem;\r\n        }\r\n        \r\n        .np-galeria-header p {\r\n            font-size: 1rem;\r\n        }\r\n        \r\n        .np-galeria-filtros {\r\n            gap: 8px;\r\n        }\r\n        \r\n        .np-filtro-btn {\r\n            padding: 8px 16px;\r\n            font-size: 0.85rem;\r\n        }\r\n        \r\n        .np-galeria-grid {\r\n            grid-template-columns: 1fr;\r\n            gap: 20px;\r\n        }\r\n        \r\n        .np-galeria-item {\r\n            height: 250px;\r\n        }\r\n        \r\n        \/* SOLUCI\u00d3N: MOSTRAR OVERLAY SIEMPRE EN M\u00d3VIL *\/\r\n        .np-galeria-overlay {\r\n            transform: translateY(0) !important;\r\n            background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.4), transparent) !important;\r\n            padding: 15px !important;\r\n            position: absolute;\r\n            bottom: 0;\r\n            left: 0;\r\n            right: 0;\r\n            color: white;\r\n        }\r\n        \r\n        .np-galeria-categoria {\r\n            font-size: 0.7rem !important;\r\n            padding: 3px 10px !important;\r\n            margin-bottom: 5px !important;\r\n        }\r\n        \r\n        .np-galeria-titulo {\r\n            font-size: 1rem !important;\r\n            margin: 0 !important;\r\n            line-height: 1.2 !important;\r\n        }\r\n        \r\n        .np-galeria-fecha {\r\n            font-size: 0.75rem !important;\r\n            margin-top: 3px !important;\r\n        }\r\n        \r\n        \/* ELIMINAR HOVER EN M\u00d3VIL *\/\r\n        .np-galeria-item:hover {\r\n            transform: none !important;\r\n        }\r\n        \r\n        .np-galeria-item:hover .np-galeria-img {\r\n            transform: none !important;\r\n        }\r\n        \r\n        .np-galeria-modal-content {\r\n            width: 98vw;\r\n            height: 98vh;\r\n            max-height: 98vh;\r\n        }\r\n        \r\n        .np-galeria-modal-img {\r\n            padding: 10px;\r\n            flex: 1;\r\n            min-height: 0;\r\n        }\r\n        \r\n        .np-galeria-modal-body {\r\n            padding: 15px;\r\n            flex-shrink: 0;\r\n            overflow: visible;\r\n        }\r\n        \r\n        .np-galeria-modal-titulo {\r\n            font-size: 1.3rem;\r\n            margin-bottom: 5px;\r\n        }\r\n        \r\n        .np-galeria-modal-fecha {\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        \/* CONTROLES MEJORADOS PARA M\u00d3VIL *\/\r\n        .np-galeria-controls {\r\n            padding: 0 10px;\r\n            top: 50%;\r\n        }\r\n        \r\n        .np-galeria-prev, .np-galeria-next {\r\n            width: 40px;\r\n            height: 40px;\r\n            margin: 0;\r\n            font-size: 1rem;\r\n        }\r\n        \r\n        \/* MINIATURAS PARA M\u00d3VIL *\/\r\n        .np-galeria-miniaturas {\r\n            gap: 6px;\r\n            padding: 8px 0 3px 0;\r\n            min-height: 60px;\r\n        }\r\n        \r\n        .np-miniatura {\r\n            width: 70px;\r\n            height: 50px;\r\n        }\r\n        \r\n        .np-miniatura-numero {\r\n            width: 16px;\r\n            height: 16px;\r\n            font-size: 0.65rem;\r\n        }\r\n        \r\n        .np-galeria-indicador {\r\n            font-size: 0.8rem;\r\n            padding: 6px 12px;\r\n            min-width: 70px;\r\n            bottom: 110px;\r\n        }\r\n        \r\n        \/* ESPEC\u00cdFICO PARA IPHONE 12 PRO (390px) *\/\r\n        @media (max-width: 390px) {\r\n            .np-galeria-modal-content {\r\n                width: 99vw;\r\n                height: 99vh;\r\n            }\r\n            \r\n            .np-galeria-modal-img {\r\n                padding: 5px;\r\n            }\r\n            \r\n            .np-galeria-modal-body {\r\n                padding: 12px;\r\n            }\r\n            \r\n            .np-galeria-controls {\r\n                top: 50%;\r\n            }\r\n            \r\n            .np-galeria-prev, .np-galeria-next {\r\n                width: 35px;\r\n                height: 35px;\r\n            }\r\n            \r\n            .np-galeria-miniaturas {\r\n                gap: 4px;\r\n                min-height: 50px;\r\n            }\r\n            \r\n            .np-miniatura {\r\n                width: 60px;\r\n                height: 45px;\r\n            }\r\n            \r\n            .np-miniatura-numero {\r\n                width: 14px;\r\n                height: 14px;\r\n                font-size: 0.6rem;\r\n            }\r\n            \r\n            .np-galeria-indicador {\r\n                bottom: 100px;\r\n                font-size: 0.75rem;\r\n                padding: 5px 10px;\r\n            }\r\n            \r\n            \/* AJUSTES ADICIONALES PARA OVERLAY EN PANTALLAS PEQUE\u00d1AS *\/\r\n            .np-galeria-overlay {\r\n                padding: 12px !important;\r\n            }\r\n            \r\n            .np-galeria-titulo {\r\n                font-size: 0.9rem !important;\r\n            }\r\n            \r\n            .np-galeria-categoria {\r\n                font-size: 0.65rem !important;\r\n                padding: 2px 8px !important;\r\n            }\r\n        }\r\n        \r\n        \/* PARA DISPOSITIVOS MUY PEQUE\u00d1OS (320px) *\/\r\n        @media (max-width: 320px) {\r\n            .np-galeria-overlay {\r\n                padding: 10px !important;\r\n            }\r\n            \r\n            .np-galeria-titulo {\r\n                font-size: 0.85rem !important;\r\n            }\r\n            \r\n            .np-galeria-categoria {\r\n                font-size: 0.6rem !important;\r\n            }\r\n            \r\n            .np-galeria-fecha {\r\n                font-size: 0.7rem !important;\r\n            }\r\n            \r\n            .np-galeria-miniaturas {\r\n                min-height: 45px;\r\n            }\r\n            \r\n            .np-miniatura {\r\n                width: 50px;\r\n                height: 38px;\r\n            }\r\n        }\r\n    }\r\n\r\n    \/* ESTILOS DE CARGA *\/\r\n    .np-galeria-modal-img.loading {\r\n        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\r\n        background-size: 200% 100%;\r\n        animation: loading 1.5s infinite;\r\n    }\r\n\r\n    @keyframes loading {\r\n        0% { background-position: 200% 0; }\r\n        100% { background-position: -200% 0; }\r\n    }\r\n    \r\n    \/* ZOOM ADAPTADO A PANTALLA SIN SCROLL *\/\r\n    .np-galeria-modal-img {\r\n        cursor: default;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .np-galeria-modal-img.zoomed {\r\n        cursor: default;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0;\r\n    }\r\n\r\n    .np-galeria-modal-img.zoomed img {\r\n        width: auto !important;\r\n        height: auto !important;\r\n        max-width: 95vw !important;\r\n        max-height: 95vh !important;\r\n        object-fit: contain;\r\n    }\r\n\r\n    \/* Fondo oscuro en zoom *\/\r\n    .np-galeria-modal.zoomed {\r\n        background: rgba(0, 0, 0, 0.98);\r\n    }\r\n\r\n    .np-galeria-modal.zoomed .np-galeria-modal-content {\r\n        background: transparent;\r\n        box-shadow: none;\r\n        border: none;\r\n    }\r\n\r\n    .np-galeria-modal.zoomed .np-galeria-modal-body,\r\n    .np-galeria-modal.zoomed .np-galeria-controls,\r\n    .np-galeria-modal.zoomed .np-galeria-indicador {\r\n        display: none;\r\n    }\r\n\r\n    \/* OCULTAR bot\u00f3n cerrar modal original en zoom *\/\r\n    .np-galeria-modal.zoomed .np-galeria-modal-close {\r\n        display: none !important;\r\n    }\r\n\r\n    \/* Bot\u00f3n cerrar SOLO ZOOM *\/\r\n    .np-zoom-close {\r\n        position: absolute;\r\n        top: 20px;\r\n        right: 25px;\r\n        background: rgba(255, 255, 255, 0.9);\r\n        color: #000;\r\n        border: 2px solid rgba(0, 0, 0, 0.3);\r\n        width: 45px;\r\n        height: 45px;\r\n        border-radius: 50%;\r\n        font-size: 1.4rem;\r\n        font-weight: bold;\r\n        cursor: pointer;\r\n        z-index: 1001;\r\n        display: none;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .np-galeria-modal.zoomed .np-zoom-close {\r\n        display: flex;\r\n    }\r\n\r\n    .np-zoom-close:hover {\r\n        background: #fff;\r\n        color: #000;\r\n        border-color: #000;\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* Para m\u00f3viles *\/\r\n    @media (max-width: 480px) {\r\n        .np-galeria-modal-img.zoomed img {\r\n            max-width: 98vw !important;\r\n            max-height: 98vh !important;\r\n        }\r\n        \r\n        .np-zoom-close {\r\n            width: 40px;\r\n            height: 40px;\r\n            font-size: 1.2rem;\r\n            top: 15px;\r\n            right: 20px;\r\n        }\r\n    }\r\n    <\/style>\r\n\r\n<!-- SECCI\u00d3N GALER\u00cdA PERSONAL -->\r\n<section class=\"np-elementor-section np-galeria-personal\">\r\n    <div class=\"np-elementor-container\">\r\n        <div class=\"np-galeria-header\">\r\n            <h2>Nuestra Galer\u00eda<\/h2>\r\n            <p>Un recorrido visual por nuestros momentos especiales, eventos y experiencias compartidas.<\/p>\r\n        <\/div>\r\n        \r\n        <!-- Filtros de Galer\u00eda -->\r\n        <div class=\"np-galeria-filtros\">\r\n            <button class=\"np-filtro-btn active\" data-filter=\"todos\">Todos<\/button>\r\n            <button class=\"np-filtro-btn\" data-filter=\"personal\">Personal<\/button>\r\n            <button class=\"np-filtro-btn\" data-filter=\"eventos\">Eventos<\/button>\r\n        <\/div>\r\n        \r\n        <!-- Grid de Galer\u00eda -->\r\n        <div class=\"np-galeria-grid\">\r\n            <!-- Evento 1 - Personal -->\r\n            <div class=\"np-galeria-item\" data-event=\"personal-tunja\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251003-WA0018-1.jpg\" alt=\"Personal Tunja\" class=\"np-galeria-img\">\r\n                <div class=\"np-galeria-overlay\">\r\n                    <span class=\"np-galeria-categoria\">Personal<\/span>\r\n                    <h3 class=\"np-galeria-titulo\">Personal Planta Tunja<\/h3>\r\n                    <div class=\"np-galeria-fecha\">Octubre 2025<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Evento 2 - Eventos -->\r\n            <div class=\"np-galeria-item\" data-event=\"aniversario-20\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-57.jpg\" alt=\"Celebraci\u00f3n\" class=\"np-galeria-img\">\r\n                <div class=\"np-galeria-overlay\">\r\n                    <span class=\"np-galeria-categoria\">Eventos<\/span>\r\n                    <h3 class=\"np-galeria-titulo\">Aniversario 20<\/h3>\r\n                    <div class=\"np-galeria-fecha\">Marzo 2015<\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- Evento 3 - Personal -->\r\n            <div class=\"np-galeria-item\" data-event=\"personal-nobsa\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/Imagen-de-WhatsApp-2025-10-14-a-las-14.23.30_5a7f3b92.jpg\" class=\"np-galeria-img\">\r\n                <div class=\"np-galeria-overlay\">\r\n                    <span class=\"np-galeria-categoria\">Personal<\/span>\r\n                    <h3 class=\"np-galeria-titulo\">Personal Planta Nobsa<\/h3>\r\n                    <div class=\"np-galeria-fecha\">Octubre 2025<\/div>\r\n                <\/div>\r\n            <\/div>\r\n              <!-- Evento 4 - Personal -->\r\n            <div class=\"np-galeria-item\" data-event=\"Diplomado\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-35.jpg\" alt=\"Celebraci\u00f3n\" class=\"np-galeria-img\">\r\n                <div class=\"np-galeria-overlay\">\r\n                    <span class=\"np-galeria-categoria\">Eventos<\/span>\r\n                    <h3 class=\"np-galeria-titulo\">Diplomado<\/h3>\r\n                    <div class=\"np-galeria-fecha\">Marzo 2015<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<!-- Modal de Galer\u00eda -->\r\n<div class=\"np-galeria-modal\">\r\n    <div class=\"np-galeria-modal-content\">\r\n        <button class=\"np-galeria-modal-close\">&times;<\/button>\r\n        \r\n        <div class=\"np-galeria-controls\">\r\n            <button class=\"np-galeria-prev\">&#10094;<\/button>\r\n            <button class=\"np-galeria-next\">&#10095;<\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"np-galeria-modal-img\" id=\"modalImageContainer\">\r\n            <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"Imagen de galer\u00eda\">\r\n        <\/div>\r\n        \r\n        <div class=\"np-galeria-modal-body\">\r\n            <span class=\"np-galeria-modal-categoria\" id=\"modalCategory\">Personal<\/span>\r\n            <h3 class=\"np-galeria-modal-titulo\" id=\"modalTitle\">Personal Nobsa<\/h3>\r\n            <div class=\"np-galeria-modal-fecha\" id=\"modalDate\">Octubre 2025<\/div>\r\n            \r\n            <!-- Miniaturas OPTIMIZADAS -->\r\n            <div class=\"np-galeria-miniaturas\" id=\"miniaturasContainer\">\r\n                <!-- Las miniaturas se generar\u00e1n din\u00e1micamente con JavaScript -->\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"np-galeria-indicador\">\r\n            <span id=\"imageCounter\">2 de 6<\/span>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ Datos de la galer\u00eda personal\r\nconst galleryData = [\r\n    {\r\n        id: \"personal-tunja\",\r\n        category: \"personal\",\r\n        title: \"Personal Tunja\",\r\n        date: \"Octubre 2025\",\r\n        images: [\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251003-WA0018-1.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251003-WA0019.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251003-WA0021-1.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0015.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0016.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0019.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0020.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0021.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0022.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0023.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0024.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0026.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0028.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0029.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0030.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0031.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0032.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0034.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0035.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0036.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0039.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0044.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0045.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/IMG-20251016-WA0049.jpg\"\r\n        ]\r\n    },\r\n    {\r\n        id: \"aniversario-20\",\r\n        category: \"eventos\",\r\n        title: \"Aniversario 20\",\r\n        date: \"Marzo 2015\",\r\n        images: [\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-57.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-1.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-2.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-3.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-6.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-7.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-8.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-9.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-10.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-11.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-12.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-13.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-14.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-15.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-16.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-17.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-18.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-19.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-20.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-21.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-22.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-23.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-24.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-25.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-26.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-27.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-28.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-29.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-31.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-32.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-33.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-34.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-35.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-36.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-37.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-39.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-40.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-41.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-42.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-43.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-44.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-45.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-46.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-47.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-48.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-51.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-52.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-53.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-55.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-56.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-58.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/ani-60.jpg\"\r\n        ]\r\n    },\r\n    {\r\n        id: \"personal-nobsa\",\r\n        category: \"personal\",\r\n        title: \"Personal Nobsa\",\r\n        date: \"Octubre 2025\",\r\n        images: [\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/Imagen-de-WhatsApp-2025-10-14-a-las-14.23.30_5a7f3b92.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-1.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-5.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-6.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-7.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-8.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/Imagen-de-WhatsApp-2025-10-24-a-las-08.41.32_1f22fcef.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-14.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-16.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/Imagen-de-WhatsApp-2025-10-23-a-las-11.40.22_a5329759.jpg\",\r\n             \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-20.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-18.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-23.jpg\",\r\n            \r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-28.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-29.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-31.jpg\",\r\n          \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-26.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-36.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-40.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-44.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-46.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/22-09-2025-47.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/Imagen-de-WhatsApp-2025-10-16-a-las-13.49.53_b8c82a79.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/Imagen-de-WhatsApp-2025-10-20-a-las-10.34.27_6da7a849.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/Imagen-de-WhatsApp-2025-10-20-a-las-10.34.27_e76281d4.jpg\"\r\n            \r\n        ]\r\n    },\r\n    {\r\n        id: \"Diplomado\",\r\n        category: \"eventos\",\r\n        title: \"Diplomado\",\r\n        date: \"Marzo 2015\",\r\n        images: [\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-35.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-1.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-2.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-4.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-5.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-6.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-8.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-9.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-10.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-11.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-12.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-13.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-14.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-15.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-16.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-17.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-18.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-19.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-20.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-21.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-22.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-23.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-24.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-25.jpg\",\r\n             \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-26.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-27.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-28.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-29.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-30.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-31.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-32.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-33.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-34.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-36.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-37.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-38.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-40-1.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-40-2.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-40-3.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-40-4.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-40-5.jpg\",\r\n            \"https:\/\/www.colconcretos.com\/wp-content\/uploads\/2025\/10\/img-40-6.jpg\"\r\n                  \r\n        ]\r\n    },\r\n];\r\n\r\n\/\/ Variables globales\r\nlet currentEventIndex = 0;\r\nlet currentImageIndex = 0;\r\nlet currentEventImages = [];\r\n\r\n\/\/ Inicializaci\u00f3n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    initGallery();\r\n});\r\n\r\nfunction initGallery() {\r\n    const filterButtons = document.querySelectorAll('.np-filtro-btn');\r\n    filterButtons.forEach(button => {\r\n        button.addEventListener('click', function() {\r\n            filterButtons.forEach(btn => btn.classList.remove('active'));\r\n            this.classList.add('active');\r\n            const filter = this.getAttribute('data-filter');\r\n            filterGallery(filter);\r\n        });\r\n    });\r\n    \r\n    const galleryItems = document.querySelectorAll('.np-galeria-item');\r\n    galleryItems.forEach((item) => {\r\n        item.addEventListener('click', function() {\r\n            const eventId = this.getAttribute('data-event');\r\n            openModal(eventId);\r\n        });\r\n    });\r\n    \r\n    const modal = document.querySelector('.np-galeria-modal');\r\n    const closeBtn = document.querySelector('.np-galeria-modal-close');\r\n    const prevBtn = document.querySelector('.np-galeria-prev');\r\n    const nextBtn = document.querySelector('.np-galeria-next');\r\n    \r\n    closeBtn.addEventListener('click', closeModal);\r\n    prevBtn.addEventListener('click', showPrevImage);\r\n    nextBtn.addEventListener('click', showNextImage);\r\n    \r\n    window.addEventListener('click', function(e) {\r\n        if (e.target === modal) {\r\n            closeModal();\r\n        }\r\n    });\r\n    \r\n    document.addEventListener('keydown', function(e) {\r\n        if (modal.style.display === 'flex') {\r\n            if (e.key === 'Escape') closeModal();\r\n            if (e.key === 'ArrowLeft') showPrevImage();\r\n            if (e.key === 'ArrowRight') showNextImage();\r\n        }\r\n    });\r\n}\r\n\r\nfunction filterGallery(filter) {\r\n    const galleryItems = document.querySelectorAll('.np-galeria-item');\r\n    \r\n    galleryItems.forEach(item => {\r\n        item.classList.add('hidden');\r\n    });\r\n    \r\n    setTimeout(() => {\r\n        galleryItems.forEach(item => {\r\n            const eventId = item.getAttribute('data-event');\r\n            const event = galleryData.find(e => e.id === eventId);\r\n            \r\n            if (filter === 'todos' || (event && event.category === filter)) {\r\n                item.style.display = 'block';\r\n                setTimeout(() => {\r\n                    item.classList.remove('hidden');\r\n                }, 50);\r\n            } else {\r\n                item.style.display = 'none';\r\n                item.classList.add('hidden');\r\n            }\r\n        });\r\n    }, 200);\r\n}\r\n\r\nfunction openModal(eventId) {\r\n    const modal = document.querySelector('.np-galeria-modal');\r\n    const eventIndex = galleryData.findIndex(event => event.id === eventId);\r\n    if (eventIndex === -1) return;\r\n    \r\n    currentEventIndex = eventIndex;\r\n    currentEventImages = galleryData[eventIndex].images;\r\n    currentImageIndex = 0;\r\n    \r\n    updateModalContent();\r\n    createThumbnails();\r\n    modal.style.display = 'flex';\r\n    document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeModal() {\r\n    const modal = document.querySelector('.np-galeria-modal');\r\n    modal.style.display = 'none';\r\n    document.body.style.overflow = 'auto';\r\n}\r\n\r\nfunction showPrevImage() {\r\n    currentImageIndex = (currentImageIndex - 1 + currentEventImages.length) % currentEventImages.length;\r\n    updateModalContent();\r\n    updateThumbnails();\r\n}\r\n\r\nfunction showNextImage() {\r\n    currentImageIndex = (currentImageIndex + 1) % currentEventImages.length;\r\n    updateModalContent();\r\n    updateThumbnails();\r\n}\r\n\r\nfunction updateModalContent() {\r\n    const currentEvent = galleryData[currentEventIndex];\r\n    const currentImage = currentEventImages[currentImageIndex];\r\n    const modalImage = document.getElementById('modalImage');\r\n    const imageContainer = document.getElementById('modalImageContainer');\r\n    \r\n    imageContainer.classList.add('loading');\r\n    \r\n    \/\/ Precargar la imagen para detectar orientaci\u00f3n\r\n    const img = new Image();\r\n    img.src = currentImage;\r\n    \r\n    img.onload = function() {\r\n        modalImage.src = currentImage;\r\n        imageContainer.classList.remove('loading');\r\n        \r\n        \/\/ Detectar orientaci\u00f3n y aplicar clases\r\n        if (img.naturalWidth > img.naturalHeight) {\r\n            \/\/ Imagen horizontal\r\n            imageContainer.classList.add('landscape');\r\n            imageContainer.classList.remove('portrait');\r\n        } else {\r\n            \/\/ Imagen vertical\r\n            imageContainer.classList.add('portrait');\r\n            imageContainer.classList.remove('landscape');\r\n        }\r\n    };\r\n    \r\n    img.onerror = function() {\r\n        modalImage.src = currentImage;\r\n        imageContainer.classList.remove('loading');\r\n        \/\/ Por defecto asumimos landscape si hay error\r\n        imageContainer.classList.add('landscape');\r\n        imageContainer.classList.remove('portrait');\r\n    };\r\n    \r\n    document.getElementById('modalCategory').textContent = \r\n        currentEvent.category.charAt(0).toUpperCase() + currentEvent.category.slice(1);\r\n    document.getElementById('modalTitle').textContent = currentEvent.title;\r\n    document.getElementById('modalDate').textContent = currentEvent.date;\r\n    document.getElementById('imageCounter').textContent = \r\n        `${currentImageIndex + 1} de ${currentEventImages.length}`;\r\n}\r\n\r\nfunction createThumbnails() {\r\n    const container = document.getElementById('miniaturasContainer');\r\n    container.innerHTML = '';\r\n    \r\n    currentEventImages.forEach((image, index) => {\r\n        const thumb = document.createElement('div');\r\n        thumb.className = 'np-miniatura' + (index === currentImageIndex ? ' active' : '');\r\n        thumb.innerHTML = `\r\n            <img decoding=\"async\" src=\"${image}\" alt=\"Miniatura ${index + 1}\">\r\n            <div class=\"np-miniatura-numero\">${index + 1}<\/div>\r\n        `;\r\n        thumb.addEventListener('click', () => {\r\n            currentImageIndex = index;\r\n            updateModalContent();\r\n            updateThumbnails();\r\n        });\r\n        container.appendChild(thumb);\r\n    });\r\n}\r\n\r\nfunction updateThumbnails() {\r\n    const thumbs = document.querySelectorAll('.np-miniatura');\r\n    thumbs.forEach((thumb, index) => {\r\n        if (index === currentImageIndex) {\r\n            thumb.classList.add('active');\r\n        } else {\r\n            thumb.classList.remove('active');\r\n        }\r\n    });\r\n}\r\n\r\n\/\/ Variable para controlar el zoom\r\nlet isZoomed = false;\r\n\r\n\/\/ Crear bot\u00f3n de cerrar zoom\r\nfunction createZoomCloseButton() {\r\n    const modalContent = document.querySelector('.np-galeria-modal-content');\r\n    if (!modalContent.querySelector('.np-zoom-close')) {\r\n        const zoomCloseBtn = document.createElement('button');\r\n        zoomCloseBtn.className = 'np-zoom-close';\r\n        zoomCloseBtn.innerHTML = '\u2715';\r\n        zoomCloseBtn.title = 'Salir del zoom';\r\n        zoomCloseBtn.addEventListener('click', toggleZoom);\r\n        modalContent.appendChild(zoomCloseBtn);\r\n    }\r\n}\r\n\r\n\/\/ Click en la imagen para zoom\r\nfunction initImageClickZoom() {\r\n    const imageContainer = document.getElementById('modalImageContainer');\r\n    const image = document.getElementById('modalImage');\r\n    \r\n    imageContainer.addEventListener('click', function(e) {\r\n        \/\/ Solo hacer zoom si se hace click en la imagen misma\r\n        if (e.target === image && !isZoomed) {\r\n            toggleZoom();\r\n        }\r\n    });\r\n    \r\n    \/\/ Click en el contenedor (fuera de la imagen) para salir del zoom\r\n    imageContainer.addEventListener('click', function(e) {\r\n        if (e.target === imageContainer && isZoomed) {\r\n            toggleZoom();\r\n        }\r\n    });\r\n}\r\n\r\n\/\/ Funci\u00f3n simple para alternar zoom\r\nfunction toggleZoom() {\r\n    const imageContainer = document.getElementById('modalImageContainer');\r\n    const modal = document.querySelector('.np-galeria-modal');\r\n    \r\n    isZoomed = !isZoomed;\r\n    \r\n    if (isZoomed) {\r\n        \/\/ Activar zoom - imagen adaptada a pantalla\r\n        imageContainer.classList.add('zoomed');\r\n        modal.classList.add('zoomed');\r\n    } else {\r\n        \/\/ Desactivar zoom - volver a vista normal\r\n        imageContainer.classList.remove('zoomed');\r\n        modal.classList.remove('zoomed');\r\n    }\r\n}\r\n\r\n\/\/ ESC SOLO para salir del zoom - NO cierra el modal\r\nfunction initZoomKeyboard() {\r\n    document.addEventListener('keydown', function(e) {\r\n        if (e.key === 'Escape' && isZoomed) {\r\n            \/\/ Solo salir del zoom, NO cerrar el modal\r\n            toggleZoom();\r\n            e.stopImmediatePropagation(); \/\/ Detener completamente el evento\r\n            e.preventDefault(); \/\/ Prevenir comportamiento por defecto\r\n        }\r\n    }, true); \/\/ Usar capture phase para ejecutarse primero\r\n}\r\n\r\n\/\/ Cerrar zoom al cambiar de imagen\r\nconst originalUpdateModalContent = updateModalContent;\r\nupdateModalContent = function() {\r\n    originalUpdateModalContent();\r\n    \r\n    \/\/ Si estaba en zoom, salir del zoom\r\n    if (isZoomed) {\r\n        toggleZoom();\r\n    }\r\n};\r\n\r\n\/\/ Inicializar cuando el DOM est\u00e9 listo\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    createZoomCloseButton();\r\n    initImageClickZoom();\r\n    initZoomKeyboard();\r\n});\r\n\r\n\/\/ Tambi\u00e9n inicializar cuando se abra el modal\r\nconst originalOpenModal = openModal;\r\nopenModal = function(eventId) {\r\n    originalOpenModal(eventId);\r\n    \/\/ Resetear estado de zoom\r\n    isZoomed = false;\r\n    createZoomCloseButton();\r\n};\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#8220;SIGAMOS CRECIENDO JUNTOS&#8221; Nuestra Galer\u00eda Un recorrido visual por nuestros momentos especiales, eventos y experiencias compartidas. Todos Personal Eventos Personal Personal Planta Tunja Octubre 2025 Eventos Aniversario 20 Marzo 2015 Personal Personal Planta Nobsa Octubre 2025 Eventos Diplomado Marzo 2015 &times; &#10094; &#10095; Personal Personal Nobsa Octubre 2025 2 de 6<\/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-3590","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=\/wp\/v2\/pages\/3590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3590"}],"version-history":[{"count":349,"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=\/wp\/v2\/pages\/3590\/revisions"}],"predecessor-version":[{"id":6142,"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=\/wp\/v2\/pages\/3590\/revisions\/6142"}],"wp:attachment":[{"href":"https:\/\/www.colconcretos.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}