{"id":280,"date":"2020-10-05T11:08:31","date_gmt":"2020-10-05T11:08:31","guid":{"rendered":"http:\/\/demo.athemes.com\/sp-plumber\/?page_id=280"},"modified":"2026-07-20T08:35:47","modified_gmt":"2026-07-20T14:35:47","slug":"promociones","status":"publish","type":"page","link":"https:\/\/ccsanalejo.com\/?page_id=280","title":{"rendered":"Promociones"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Promociones del Mes | Fedecr\u00e9dito<\/title>\r\n \r\n <style>\r\n #promociones-seccion,\r\n #promociones-seccion *,\r\n #promociones-seccion *::before,\r\n #promociones-seccion *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n #promociones-seccion {\r\n --surface: #ffffff;\r\n --surface-alt: #f8faf9;\r\n --text-primary: #1a1a1a;\r\n --text-secondary: #5f6b7a;\r\n --text-muted: #8a94a3;\r\n --border: rgba(0, 0, 0, 0.06);\r\n --border-light: rgba(0, 0, 0, 0.04);\r\n --accent: #0b734d;\r\n --accent-dark: #08563a;\r\n --accent-soft: rgba(11, 115, 77, 0.04);\r\n --accent-medium: rgba(11, 115, 77, 0.08);\r\n --accent-glow: rgba(11, 115, 77, 0.15);\r\n --accent-bright: rgba(11, 115, 77, 0.25);\r\n \r\n --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);\r\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);\r\n --shadow-md: 0 4px 8px rgba(0,0,0,0.04), 0 12px 28px rgba(0,0,0,0.05);\r\n --shadow-lg: 0 8px 16px rgba(0,0,0,0.05), 0 24px 48px rgba(11, 115, 77, 0.06);\r\n --shadow-xl: 0 12px 24px rgba(0,0,0,0.06), 0 32px 64px rgba(11, 115, 77, 0.1);\r\n \r\n --radius-xs: 8px;\r\n --radius-sm: 12px;\r\n --radius-md: 18px;\r\n --radius-lg: 24px;\r\n --radius-xl: 32px;\r\n \r\n --transition-fast: 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);\r\n --transition-smooth: 0.35s cubic-bezier(0.2, 0.0, 0, 1.0);\r\n --transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n \r\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n line-height: 1.5;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n \r\n background: #fafbfa;\r\n color: var(--text-primary);\r\n width: 100%;\r\n max-width: 100%;\r\n padding: 48px 0 56px;\r\n margin: 0;\r\n }\r\n\r\n #promociones-seccion .container {\r\n max-width: 1300px;\r\n width: 100%;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n\r\n \/* ===== HERO ===== *\/\r\n #promociones-seccion .hero {\r\n text-align: left;\r\n margin-bottom: 44px;\r\n padding: 0 4px;\r\n }\r\n\r\n #promociones-seccion .hero-label {\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n color: var(--accent);\r\n margin-bottom: 14px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: var(--accent-soft);\r\n padding: 6px 14px;\r\n border-radius: 20px;\r\n }\r\n\r\n #promociones-seccion .hero-label::before {\r\n content: '';\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--accent);\r\n animation: pulse-dot 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse-dot {\r\n 0%, 100% { opacity: 0.4; transform: scale(1); }\r\n 50% { opacity: 1; transform: scale(1.5); }\r\n }\r\n\r\n #promociones-seccion .hero h1 {\r\n font-size: 2.6rem;\r\n font-weight: 300;\r\n letter-spacing: -2px;\r\n color: var(--text-primary);\r\n margin-bottom: 12px;\r\n line-height: 1.1;\r\n }\r\n\r\n #promociones-seccion .hero h1 strong {\r\n font-weight: 650;\r\n color: var(--accent);\r\n }\r\n\r\n #promociones-seccion .hero p {\r\n font-size: 1.05rem;\r\n color: var(--text-secondary);\r\n max-width: 540px;\r\n font-weight: 400;\r\n line-height: 1.6;\r\n }\r\n\r\n #promociones-seccion .hero-divider {\r\n width: 48px;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--accent) 0%, rgba(11,115,77,0.3) 100%);\r\n margin-top: 22px;\r\n border-radius: 2px;\r\n }\r\n\r\n \/* ===== ENCABEZADO DE SECCI\u00d3N ===== *\/\r\n #promociones-seccion .section-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n margin-bottom: 32px;\r\n padding: 0 4px;\r\n }\r\n\r\n #promociones-seccion .section-index {\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n color: var(--accent);\r\n opacity: 0.45;\r\n letter-spacing: 1.5px;\r\n font-feature-settings: \"tnum\";\r\n min-width: 22px;\r\n }\r\n\r\n #promociones-seccion .section-header h2 {\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n color: var(--text-primary);\r\n letter-spacing: -0.3px;\r\n }\r\n\r\n #promociones-seccion .section-line {\r\n flex: 1;\r\n height: 1px;\r\n background: var(--border);\r\n min-width: 30px;\r\n opacity: 0.7;\r\n }\r\n\r\n #promociones-seccion .month-badge {\r\n background: var(--accent);\r\n color: #ffffff;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n padding: 7px 16px;\r\n border-radius: 20px;\r\n letter-spacing: 1.5px;\r\n white-space: nowrap;\r\n box-shadow: 0 2px 8px rgba(11, 115, 77, 0.2);\r\n }\r\n\r\n \/* ===== CONTADOR DE PROMOCIONES ===== *\/\r\n #promociones-seccion .promo-counter {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 32px;\r\n padding: 0 4px;\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n font-weight: 500;\r\n }\r\n\r\n #promociones-seccion .promo-counter .counter-number {\r\n font-weight: 700;\r\n color: var(--accent);\r\n font-size: 1.1rem;\r\n font-feature-settings: \"tnum\";\r\n background: var(--accent-soft);\r\n padding: 2px 10px;\r\n border-radius: 12px;\r\n }\r\n\r\n \/* ===== GALER\u00cdA PRINCIPAL (ILIMITADA) ===== *\/\r\n #promociones-seccion .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n #promociones-seccion .gallery-grid {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 16px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n #promociones-seccion .gallery-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n #promociones-seccion .gallery-grid {\r\n grid-template-columns: 1fr;\r\n gap: 14px;\r\n max-width: 400px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n \/* ===== TARJETA DE PROMOCI\u00d3N ===== *\/\r\n #promociones-seccion .promo-card {\r\n background: var(--surface);\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-sm);\r\n border: 1px solid var(--border);\r\n transition: all var(--transition-bounce);\r\n cursor: pointer;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n outline: none;\r\n -webkit-tap-highlight-color: transparent;\r\n transform: translateY(0);\r\n }\r\n\r\n #promociones-seccion .promo-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--shadow-xl);\r\n border-color: var(--accent-medium);\r\n z-index: 5;\r\n }\r\n\r\n #promociones-seccion .promo-card:active {\r\n transform: translateY(-2px) scale(0.98);\r\n transition: all 0.1s ease;\r\n box-shadow: var(--shadow-md);\r\n }\r\n\r\n \/* Borde superior animado *\/\r\n #promociones-seccion .promo-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--accent), rgba(11,115,77,0.4));\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.45s cubic-bezier(0.2, 0.0, 0, 1.0);\r\n z-index: 2;\r\n border-radius: 0 0 2px 0;\r\n }\r\n\r\n #promociones-seccion .promo-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n \/* Imagen *\/\r\n #promociones-seccion .promo-card-image {\r\n width: 100%;\r\n aspect-ratio: 4 \/ 5;\r\n overflow: hidden;\r\n background: #f5f5f5;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n }\r\n\r\n #promociones-seccion .promo-card-image img,\r\n #promociones-seccion .promo-card-image video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.6s cubic-bezier(0.2, 0.0, 0, 1.0);\r\n }\r\n\r\n #promociones-seccion .promo-card:hover .promo-card-image img,\r\n #promociones-seccion .promo-card:hover .promo-card-image video {\r\n transform: scale(1.06);\r\n }\r\n\r\n \/* Overlay sutil al hover *\/\r\n #promociones-seccion .promo-card-image::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top, rgba(11,115,77,0.12) 0%, transparent 40%);\r\n opacity: 0;\r\n transition: opacity var(--transition-smooth);\r\n pointer-events: none;\r\n }\r\n\r\n #promociones-seccion .promo-card:hover .promo-card-image::after {\r\n opacity: 1;\r\n }\r\n\r\n \/* Badge \"Promoci\u00f3n del Mes\" *\/\r\n #promociones-seccion .promo-badge {\r\n position: absolute;\r\n top: 12px;\r\n left: 12px;\r\n background: var(--accent);\r\n color: #ffffff;\r\n font-size: 0.62rem;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n z-index: 3;\r\n pointer-events: none;\r\n box-shadow: 0 2px 8px rgba(11, 115, 77, 0.3);\r\n transition: all var(--transition-smooth);\r\n }\r\n\r\n #promociones-seccion .promo-card:hover .promo-badge {\r\n transform: scale(1.05);\r\n box-shadow: 0 4px 14px rgba(11, 115, 77, 0.4);\r\n }\r\n\r\n \/* Badge de video *\/\r\n #promociones-seccion .video-badge {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n width: 34px;\r\n height: 34px;\r\n background: rgba(0, 0, 0, 0.65);\r\n backdrop-filter: blur(6px);\r\n -webkit-backdrop-filter: blur(6px);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 3;\r\n transition: all var(--transition-smooth);\r\n pointer-events: none;\r\n }\r\n\r\n #promociones-seccion .promo-card:hover .video-badge {\r\n background: var(--accent);\r\n transform: scale(1.1);\r\n }\r\n\r\n #promociones-seccion .video-badge::after {\r\n content: '';\r\n width: 0;\r\n height: 0;\r\n border-left: 8px solid #ffffff;\r\n border-top: 5.5px solid transparent;\r\n border-bottom: 5.5px solid transparent;\r\n margin-left: 2px;\r\n }\r\n\r\n \/* ===== PAGINACI\u00d3N OPCIONAL ===== *\/\r\n #promociones-seccion .pagination-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 32px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n #promociones-seccion .pagination-btn {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n border: 1px solid var(--border);\r\n background: var(--surface);\r\n color: var(--text-secondary);\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all var(--transition-fast);\r\n font-size: 0.85rem;\r\n font-weight: 500;\r\n }\r\n\r\n #promociones-seccion .pagination-btn:hover {\r\n background: var(--accent-soft);\r\n border-color: var(--accent-medium);\r\n color: var(--accent);\r\n }\r\n\r\n #promociones-seccion .pagination-btn.active {\r\n background: var(--accent);\r\n color: #ffffff;\r\n border-color: var(--accent);\r\n font-weight: 700;\r\n }\r\n\r\n #promociones-seccion .pagination-btn:disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n }\r\n\r\n #promociones-seccion .pagination-info {\r\n font-size: 0.82rem;\r\n color: var(--text-muted);\r\n margin: 0 8px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* ===== LIGHTBOX ===== *\/\r\n #promociones-seccion .lightbox-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.94);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n z-index: 1000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.35s ease;\r\n cursor: pointer;\r\n }\r\n\r\n #promociones-seccion .lightbox-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n #promociones-seccion .lightbox-content {\r\n max-width: 93vw;\r\n max-height: 93vh;\r\n position: relative;\r\n cursor: default;\r\n animation: lightboxIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n @keyframes lightboxIn {\r\n from {\r\n opacity: 0;\r\n transform: scale(0.92) translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: scale(1) translateY(0);\r\n }\r\n }\r\n\r\n #promociones-seccion .lightbox-content img,\r\n #promociones-seccion .lightbox-content video {\r\n max-width: 93vw;\r\n max-height: 93vh;\r\n border-radius: var(--radius-md);\r\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);\r\n object-fit: contain;\r\n }\r\n\r\n #promociones-seccion .lightbox-close {\r\n position: absolute;\r\n top: -44px;\r\n right: 0;\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.12);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n cursor: pointer;\r\n color: #ffffff;\r\n font-size: 1.1rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all var(--transition-fast);\r\n line-height: 1;\r\n }\r\n\r\n #promociones-seccion .lightbox-close:hover {\r\n background: rgba(255, 255, 255, 0.25);\r\n transform: scale(1.08);\r\n }\r\n\r\n \/* Navegaci\u00f3n en lightbox *\/\r\n #promociones-seccion .lightbox-nav {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.15);\r\n border: 1px solid rgba(255, 255, 255, 0.25);\r\n cursor: pointer;\r\n color: #ffffff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all var(--transition-fast);\r\n z-index: 5;\r\n }\r\n\r\n #promociones-seccion .lightbox-nav:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n #promociones-seccion .lightbox-nav.prev {\r\n left: -50px;\r\n }\r\n\r\n #promociones-seccion .lightbox-nav.next {\r\n right: -50px;\r\n }\r\n\r\n #promociones-seccion .lightbox-nav svg {\r\n width: 18px;\r\n height: 18px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n #promociones-seccion .lightbox-nav.prev {\r\n left: -36px;\r\n }\r\n #promociones-seccion .lightbox-nav.next {\r\n right: -36px;\r\n }\r\n #promociones-seccion .lightbox-nav {\r\n width: 32px;\r\n height: 32px;\r\n }\r\n }\r\n\r\n \/* ===== RESPONSIVE ===== *\/\r\n @media (max-width: 768px) {\r\n #promociones-seccion {\r\n padding: 32px 0 40px;\r\n }\r\n #promociones-seccion .hero h1 {\r\n font-size: 1.8rem;\r\n letter-spacing: -1px;\r\n }\r\n #promociones-seccion .hero p {\r\n font-size: 0.92rem;\r\n }\r\n #promociones-seccion .hero-label {\r\n font-size: 0.68rem;\r\n padding: 5px 12px;\r\n }\r\n #promociones-seccion .promo-card:hover {\r\n transform: translateY(-4px);\r\n }\r\n #promociones-seccion .promo-card:active {\r\n transform: translateY(-1px) scale(0.98);\r\n }\r\n #promociones-seccion .promo-badge {\r\n font-size: 0.58rem;\r\n padding: 5px 10px;\r\n top: 8px;\r\n left: 8px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n #promociones-seccion .hero h1 {\r\n font-size: 1.5rem;\r\n }\r\n #promociones-seccion .promo-card-image {\r\n aspect-ratio: 16 \/ 10;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div id=\"promociones-seccion\">\r\n\r\n <main class=\"container\">\r\n\r\n <!-- HERO -->\r\n <header class=\"hero\">\r\n <span class=\"hero-label\">Promociones Exclusivas<\/span>\r\n <h1><strong>Promociones<\/strong> del Mes<\/h1>\r\n <p>Descubre las mejores ofertas y beneficios dise\u00f1ados para ti. Nuevas oportunidades cada mes.<\/p>\r\n <div class=\"hero-divider\"><\/div>\r\n <\/header>\r\n\r\n <!-- GALER\u00cdA COMPLETA -->\r\n <div class=\"section-header\">\r\n <span class=\"section-index\">01<\/span>\r\n <h2>Todas las Promociones<\/h2>\r\n <div class=\"section-line\"><\/div>\r\n <span class=\"month-badge\" id=\"monthBadge\">JULIO 2026<\/span>\r\n <\/div>\r\n\r\n <!-- CONTADOR DIN\u00c1MICO DE PROMOCIONES -->\r\n <div class=\"promo-counter\">\r\n <span>\ud83d\udce2<\/span>\r\n <span><strong>Total de promociones activas:<\/strong><\/span>\r\n <span class=\"counter-number\" id=\"promoCount\">0<\/span>\r\n <\/div>\r\n\r\n <!-- GRID ILIMITADO -->\r\n <div class=\"gallery-grid\" id=\"galleryGrid\"><\/div>\r\n\r\n <!-- PAGINACI\u00d3N (OPCIONAL, PARA NAVEGAR ENTRE MUCHAS PROMOCIONES) -->\r\n <div class=\"pagination-container\" id=\"paginationContainer\"><\/div>\r\n\r\n <\/main>\r\n\r\n <!-- LIGHTBOX -->\r\n <div class=\"lightbox-overlay\" id=\"lightboxOverlay\">\r\n <div class=\"lightbox-content\" id=\"lightboxContent\">\r\n <button class=\"lightbox-close\" id=\"lightboxClose\">\u2715<\/button>\r\n <button class=\"lightbox-nav prev\" id=\"lightboxPrev\" aria-label=\"Anterior\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"15 18 9 12 15 6\"\/>\r\n <\/svg>\r\n <\/button>\r\n <button class=\"lightbox-nav next\" id=\"lightboxNext\" aria-label=\"Siguiente\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"9 18 15 12 9 6\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n (function() {\r\n \/\/ ============================================\r\n \/\/ AQU\u00cd AGREGA TODAS LAS PROMOCIONES QUE QUIERAS\r\n \/\/ No hay l\u00edmite, puedes agregar cientos si quieres\r\n \/\/ ============================================\r\n const promociones = [\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Almacenes-platinum-Story.jpg',\r\n type: 'image',\r\n titulo: 'Almacenes Platinum'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Deliverys-julio-Story.jpg',\r\n type: 'image',\r\n titulo: 'Deliverys Julio'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Barberi\u2560uas-Story.jpg',\r\n type: 'image',\r\n titulo: 'Barber\u00edas'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Cines-julio-Story.jpg',\r\n type: 'image',\r\n titulo: 'Cines Julio'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Matri\u2560uculas-Story.jpg',\r\n type: 'image',\r\n titulo: 'Matr\u00edculas'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Entretenimiento-Story.jpg.jpeg',\r\n type: 'image',\r\n titulo: 'Entretenimiento'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Restaurantes-Story.jpg',\r\n type: 'image',\r\n titulo: 'Restaurantes'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Salones-de-Belleza-Story.jpg',\r\n type: 'image',\r\n titulo: 'Salones de Belleza'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Ferrocentro-Story.jpg',\r\n type: 'image',\r\n titulo: 'Ferro Centro'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Farmacias14-Story.aep_.mp4',\r\n type: 'video',\r\n titulo: 'Farmacias'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/HISTORIA-LIFEMILES.png',\r\n type: 'image',\r\n titulo: 'Lee Shoes'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/HISTORIA.png',\r\n type: 'image',\r\n titulo: 'Life Miles'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Hoteles-Airbnb-Story.jpg',\r\n type: 'image',\r\n titulo: 'Hoteles'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Ferreterias-Story.jpg',\r\n type: 'image',\r\n titulo: 'Ferreterias'\r\n },\r\n {\r\n src: 'https:\/\/ccsanalejo.com\/wp-content\/uploads\/2026\/07\/Farmacias28-Story.jpg',\r\n type: 'image',\r\n titulo: 'Farmacias'\r\n }\r\n \/\/ \u00a1AGREGA M\u00c1S PROMOCIONES AQU\u00cd SIN L\u00cdMITE!\r\n \/\/ Ejemplo:\r\n \/\/ ,\r\n \/\/ {\r\n \/\/ src: 'https:\/\/ejemplo.com\/promocion9.jpg',\r\n \/\/ type: 'image',\r\n \/\/ titulo: 'Nueva Promoci\u00f3n 9'\r\n \/\/ },\r\n \/\/ {\r\n \/\/ src: 'https:\/\/ejemplo.com\/promocion10.mp4',\r\n \/\/ type: 'video',\r\n \/\/ titulo: 'Video Promoci\u00f3n 10'\r\n \/\/ }\r\n ];\r\n\r\n \/\/ ===== CONFIGURACI\u00d3N =====\r\n const CONFIG = {\r\n itemsPorPagina: 12, \/\/ Cantidad de promociones por p\u00e1gina (aj\u00fastalo seg\u00fan necesites)\r\n paginacionVisible: true, \/\/ Muestra u oculta la paginaci\u00f3n\r\n mesActual: 'JULIO 2026'\r\n };\r\n\r\n \/\/ ===== ELEMENTOS =====\r\n const galleryGrid = document.getElementById('galleryGrid');\r\n const lightboxOverlay = document.getElementById('lightboxOverlay');\r\n const lightboxContent = document.getElementById('lightboxContent');\r\n const lightboxClose = document.getElementById('lightboxClose');\r\n const lightboxPrev = document.getElementById('lightboxPrev');\r\n const lightboxNext = document.getElementById('lightboxNext');\r\n const paginationContainer = document.getElementById('paginationContainer');\r\n const promoCountElement = document.getElementById('promoCount');\r\n const monthBadge = document.getElementById('monthBadge');\r\n\r\n let currentLightboxIndex = 0;\r\n let paginaActual = 1;\r\n let totalPaginas = 1;\r\n\r\n \/\/ Actualizar badge del mes\r\n if (monthBadge) {\r\n monthBadge.textContent = CONFIG.mesActual;\r\n }\r\n\r\n \/\/ Actualizar contador de promociones\r\n if (promoCountElement) {\r\n promoCountElement.textContent = promociones.length;\r\n }\r\n\r\n \/\/ ===== OBTENER PROMOCIONES POR P\u00c1GINA =====\r\n function obtenerPromocionesPagina(pagina) {\r\n const inicio = (pagina - 1) * CONFIG.itemsPorPagina;\r\n const fin = inicio + CONFIG.itemsPorPagina;\r\n return promociones.slice(inicio, fin);\r\n }\r\n\r\n \/\/ ===== CONSTRUIR GALER\u00cdA =====\r\n function buildGallery(pagina = 1) {\r\n galleryGrid.innerHTML = '';\r\n paginaActual = pagina;\r\n totalPaginas = Math.ceil(promociones.length \/ CONFIG.itemsPorPagina);\r\n\r\n const promocionesPagina = CONFIG.paginacionVisible ? \r\n obtenerPromocionesPagina(pagina) : \r\n promociones;\r\n\r\n promocionesPagina.forEach((promo) => {\r\n \/\/ Encontrar el \u00edndice real en el array completo\r\n const indexReal = promociones.indexOf(promo);\r\n \r\n const card = document.createElement('div');\r\n card.className = 'promo-card';\r\n card.addEventListener('click', () => openLightbox(indexReal));\r\n \r\n \/\/ Imagen\r\n const imageDiv = document.createElement('div');\r\n imageDiv.className = 'promo-card-image';\r\n \r\n if (promo.type === 'image') {\r\n const img = document.createElement('img');\r\n img.src = promo.src;\r\n img.alt = promo.titulo || 'Promoci\u00f3n del Mes';\r\n img.loading = 'lazy';\r\n img.onerror = function() {\r\n this.style.display = 'none';\r\n imageDiv.innerHTML = `<div style=\"color:#999;font-size:0.85rem;text-align:center;padding:20px;display:flex;align-items:center;justify-content:center;height:100%;\">${promo.titulo || 'Promoci\u00f3n del Mes'}<\/div>`;\r\n };\r\n imageDiv.appendChild(img);\r\n } else {\r\n const video = document.createElement('video');\r\n video.src = promo.src;\r\n video.muted = true;\r\n video.loop = true;\r\n video.playsInline = true;\r\n video.preload = 'metadata';\r\n video.onerror = function() {\r\n this.style.display = 'none';\r\n imageDiv.innerHTML = `<div style=\"color:#999;font-size:0.85rem;text-align:center;padding:20px;display:flex;align-items:center;justify-content:center;height:100%;\">${promo.titulo || 'Promoci\u00f3n del Mes'}<\/div>`;\r\n };\r\n imageDiv.appendChild(video);\r\n \r\n const videoBadge = document.createElement('div');\r\n videoBadge.className = 'video-badge';\r\n imageDiv.appendChild(videoBadge);\r\n }\r\n \r\n \/\/ Badge \"Promoci\u00f3n del Mes\"\r\n const badge = document.createElement('div');\r\n badge.className = 'promo-badge';\r\n badge.textContent = 'Promoci\u00f3n del Mes';\r\n imageDiv.appendChild(badge);\r\n \r\n card.appendChild(imageDiv);\r\n galleryGrid.appendChild(card);\r\n\r\n \/\/ Reproducir video al hover (escritorio)\r\n if (promo.type === 'video') {\r\n card.addEventListener('mouseenter', () => {\r\n const v = card.querySelector('video');\r\n if (v) v.play().catch(() => {});\r\n });\r\n card.addEventListener('mouseleave', () => {\r\n const v = card.querySelector('video');\r\n if (v) {\r\n v.pause();\r\n v.currentTime = 0;\r\n }\r\n });\r\n }\r\n });\r\n\r\n \/\/ Construir paginaci\u00f3n si es necesario\r\n if (CONFIG.paginacionVisible && totalPaginas > 1) {\r\n buildPagination();\r\n } else {\r\n paginationContainer.innerHTML = '';\r\n }\r\n }\r\n\r\n \/\/ ===== CONSTRUIR PAGINACI\u00d3N =====\r\n function buildPagination() {\r\n paginationContainer.innerHTML = '';\r\n\r\n \/\/ Bot\u00f3n \"Anterior\"\r\n const prevBtn = document.createElement('button');\r\n prevBtn.className = 'pagination-btn';\r\n prevBtn.innerHTML = '\u2039';\r\n prevBtn.disabled = paginaActual === 1;\r\n prevBtn.addEventListener('click', () => {\r\n if (paginaActual > 1) {\r\n buildGallery(paginaActual - 1);\r\n window.scrollTo({ top: galleryGrid.offsetTop - 100, behavior: 'smooth' });\r\n }\r\n });\r\n paginationContainer.appendChild(prevBtn);\r\n\r\n \/\/ Determinar qu\u00e9 p\u00e1ginas mostrar\r\n let paginasMostradas = [];\r\n const maxPaginasVisibles = 7;\r\n\r\n if (totalPaginas <= maxPaginasVisibles) {\r\n paginasMostradas = Array.from({ length: totalPaginas }, (_, i) => i + 1);\r\n } else {\r\n paginasMostradas.push(1);\r\n \r\n let inicio = Math.max(2, paginaActual - 1);\r\n let fin = Math.min(totalPaginas - 1, paginaActual + 1);\r\n \r\n if (inicio > 2) paginasMostradas.push('...');\r\n \r\n for (let i = inicio; i <= fin; i++) {\r\n paginasMostradas.push(i);\r\n }\r\n \r\n if (fin < totalPaginas - 1) paginasMostradas.push('...');\r\n \r\n paginasMostradas.push(totalPaginas);\r\n }\r\n\r\n \/\/ Botones de p\u00e1gina\r\n paginasMostradas.forEach(pagina => {\r\n if (pagina === '...') {\r\n const dots = document.createElement('span');\r\n dots.className = 'pagination-info';\r\n dots.textContent = '...';\r\n paginationContainer.appendChild(dots);\r\n } else {\r\n const pageBtn = document.createElement('button');\r\n pageBtn.className = 'pagination-btn';\r\n if (pagina === paginaActual) {\r\n pageBtn.classList.add('active');\r\n }\r\n pageBtn.textContent = pagina;\r\n pageBtn.addEventListener('click', () => {\r\n buildGallery(pagina);\r\n window.scrollTo({ top: galleryGrid.offsetTop - 100, behavior: 'smooth' });\r\n });\r\n paginationContainer.appendChild(pageBtn);\r\n }\r\n });\r\n\r\n \/\/ Bot\u00f3n \"Siguiente\"\r\n const nextBtn = document.createElement('button');\r\n nextBtn.className = 'pagination-btn';\r\n nextBtn.innerHTML = '\u203a';\r\n nextBtn.disabled = paginaActual === totalPaginas;\r\n nextBtn.addEventListener('click', () => {\r\n if (paginaActual < totalPaginas) {\r\n buildGallery(paginaActual + 1);\r\n window.scrollTo({ top: galleryGrid.offsetTop - 100, behavior: 'smooth' });\r\n }\r\n });\r\n paginationContainer.appendChild(nextBtn);\r\n\r\n \/\/ Info de p\u00e1gina actual\r\n const info = document.createElement('span');\r\n info.className = 'pagination-info';\r\n info.textContent = `P\u00e1gina ${paginaActual} de ${totalPaginas}`;\r\n paginationContainer.appendChild(info);\r\n }\r\n\r\n \/\/ ===== LIGHTBOX =====\r\n function openLightbox(index) {\r\n currentLightboxIndex = index;\r\n updateLightboxContent();\r\n lightboxOverlay.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function updateLightboxContent() {\r\n const promo = promociones[currentLightboxIndex];\r\n lightboxContent.querySelector('.lightbox-close')?.remove();\r\n lightboxContent.querySelector('.lightbox-nav')?.remove();\r\n lightboxContent.querySelector('.lightbox-nav')?.remove();\r\n \r\n lightboxContent.innerHTML = `\r\n <button class=\"lightbox-close\" id=\"lightboxCloseInner\">\u2715<\/button>\r\n <button class=\"lightbox-nav prev\" id=\"lightboxPrevInner\" aria-label=\"Anterior\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"15 18 9 12 15 6\"\/>\r\n <\/svg>\r\n <\/button>\r\n <button class=\"lightbox-nav next\" id=\"lightboxNextInner\" aria-label=\"Siguiente\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"9 18 15 12 9 6\"\/>\r\n <\/svg>\r\n <\/button>\r\n `;\r\n \r\n if (promo.type === 'image') {\r\n const img = document.createElement('img');\r\n img.src = promo.src;\r\n img.alt = promo.titulo || 'Promoci\u00f3n del Mes';\r\n lightboxContent.appendChild(img);\r\n } else {\r\n const video = document.createElement('video');\r\n video.src = promo.src;\r\n video.controls = true;\r\n video.autoplay = true;\r\n video.playsInline = true;\r\n lightboxContent.appendChild(video);\r\n }\r\n\r\n const closeBtn = lightboxContent.querySelector('#lightboxCloseInner');\r\n const prevBtn = lightboxContent.querySelector('#lightboxPrevInner');\r\n const nextBtn = lightboxContent.querySelector('#lightboxNextInner');\r\n \r\n if (closeBtn) closeBtn.addEventListener('click', closeLightbox);\r\n if (prevBtn) prevBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n lightboxPrevAction();\r\n });\r\n if (nextBtn) nextBtn.addEventListener('click', (e) => {\r\n e.stopPropagation();\r\n lightboxNextAction();\r\n });\r\n }\r\n\r\n function lightboxPrevAction() {\r\n currentLightboxIndex = ((currentLightboxIndex - 1) + promociones.length) % promociones.length;\r\n updateLightboxContent();\r\n }\r\n\r\n function lightboxNextAction() {\r\n currentLightboxIndex = (currentLightboxIndex + 1) % promociones.length;\r\n updateLightboxContent();\r\n }\r\n\r\n function closeLightbox() {\r\n lightboxOverlay.classList.remove('active');\r\n document.body.style.overflow = '';\r\n const video = lightboxContent.querySelector('video');\r\n if (video) video.pause();\r\n }\r\n\r\n \/\/ ===== EVENTOS GLOBALES =====\r\n lightboxClose.addEventListener('click', closeLightbox);\r\n lightboxOverlay.addEventListener('click', function(e) {\r\n if (e.target === lightboxOverlay) closeLightbox();\r\n });\r\n\r\n document.addEventListener('keydown', function(e) {\r\n if (!lightboxOverlay.classList.contains('active')) return;\r\n if (e.key === 'ArrowLeft') lightboxPrevAction();\r\n if (e.key === 'ArrowRight') lightboxNextAction();\r\n if (e.key === 'Escape') closeLightbox();\r\n });\r\n\r\n \/\/ ===== INICIAR =====\r\n buildGallery();\r\n\r\n \/\/ Exponer funci\u00f3n para recargar si se agregan promociones din\u00e1micamente\r\n window.recargarPromociones = function(nuevasPromociones) {\r\n promociones.length = 0;\r\n promociones.push(...nuevasPromociones);\r\n if (promoCountElement) {\r\n promoCountElement.textContent = promociones.length;\r\n }\r\n buildGallery(1);\r\n };\r\n\r\n })();\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Promociones del Mes | Fedecr\u00e9dito Promociones Exclusivas Promociones del Mes Descubre las mejores ofertas y beneficios dise\u00f1ados para ti. Nuevas oportunidades cada mes. 01 Todas las […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page_front-page.php","meta":{"footnotes":""},"class_list":["post-280","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=\/wp\/v2\/pages\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":281,"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=\/wp\/v2\/pages\/280\/revisions"}],"predecessor-version":[{"id":7556,"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=\/wp\/v2\/pages\/280\/revisions\/7556"}],"wp:attachment":[{"href":"https:\/\/ccsanalejo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}