{"id":239,"date":"2026-05-18T22:39:09","date_gmt":"2026-05-18T22:39:09","guid":{"rendered":"https:\/\/luum.estaciondiseno.es\/?page_id=239"},"modified":"2026-09-02T00:54:12","modified_gmt":"2026-09-02T00:54:12","slug":"aplicacionvisual","status":"publish","type":"page","link":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/","title":{"rendered":"APLICACI\u00d3N VISUAL"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"239\" class=\"elementor elementor-239\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1cbb479 e-flex e-con-boxed e-con e-parent\" data-id=\"1cbb479\" 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-a8a0798 elementor-widget elementor-widget-html\" data-id=\"a8a0798\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Portfolio Full-Width Premium con Info Modal<\/title>\n    <style>\n        \/* --- ESTILOS GLOBALES --- *\/\n        body {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            background-color: #fff;\n            color: #1500ff;\n            margin: 0;\n            padding: 0;\n            overflow-x: hidden; \n        }\n\n        \/* --- TRUCO ANCHO COMPLETO PARA WORDPRESS --- *\/\n        .portfolio-container {\n            width: 100vw;\n            position: relative;\n            left: 50%;\n            right: 50%;\n            margin-left: -50vw;\n            margin-right: -50vw;\n            box-sizing: border-box;\n            padding: 30px 0;\n        }\n\n        h2 {\n            text-align: center;\n            font-size: 22px;\n            font-weight: 600;\n            margin-bottom: 24px;\n            letter-spacing: -0.5px;\n            padding: 0 20px;\n        }\n\n        \/* --- BOTONES DE CATEGOR\u00cdA --- *\/\n        .filter-menu {\n            display: flex;\n            justify-content: center; \n            flex-wrap: wrap; \n            gap: 8px; \n            margin-bottom: 30px;\n            padding: 0 16px; \n        }\n\n        .filter-btn {\n            background-color: #fff;\n            border: 2px solid #1500ff;\n            color: #1500ff;\n            padding: 6px 14px;\n            font-size: 12px;\n            font-weight: 500;\n            border-radius: 25px;\n            cursor: pointer;\n            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n            flex-shrink: 0;\n        }\n\n        .filter-btn:hover, .filter-btn.active {\n            background-color: #1500ff;\n            color: #fff;\n            border-color: #1500ff;\n        }\n\n        \/* --- REJILLA DE IM\u00c1GENES (Por defecto m\u00f3vil: 2 columnas) --- *\/\n        .portfolio-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr); \n            gap: 4px; \n            padding: 0 4px;\n        }\n\n        \/* --- TARJETA DE PROYECTO --- *\/\n        .portfolio-item {\n            background-color: #fff;\n            overflow: hidden;\n            transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;\n            position: relative;\n            cursor: pointer; \n        }\n\n        .portfolio-item.hide {\n            opacity: 0;\n            visibility: hidden;\n            position: absolute;\n            transform: scale(0.95);\n            pointer-events: none;\n            width: 0;\n            height: 0;\n            overflow: hidden;\n            margin: 0;\n            padding: 0;\n        }\n\n        .item-image-wrapper {\n            position: relative;\n            width: 100%;\n            padding-top: 120%; \n            background-color: #f4f4f4;\n            overflow: hidden;\n        }\n\n        .item-image-wrapper img {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        }\n\n        \/* --- CAPA AZUL ELECTRICO --- *\/\n        .item-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(to bottom, rgba(21, 0, 255, 0.1) 30%, rgba(21, 0, 255, 0.85) 100%);\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-end;\n            align-items: center;\n            opacity: 1;\n            transition: all 0.3s ease;\n            padding: 15px 10px;\n            box-sizing: border-box;\n            text-align: center;\n        }\n\n        .item-overlay h3 {\n            color: #fff;\n            margin: 0 0 2px 0;\n            font-size: 13px;\n            font-weight: 600;\n            text-shadow: 0 2px 4px rgba(0,0,0,0.2);\n        }\n\n        .item-overlay p {\n            color: rgba(255, 255, 255, 0.9);\n            margin: 0;\n            font-size: 10px;\n        }\n\n        \/* --- VENTANA MODAL --- *\/\n        .project-modal {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(255, 255, 255, 0.98); \n            z-index: 99999; \n            display: flex;\n            justify-content: center;\n            align-items: center;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n            padding: 20px;\n            box-sizing: border-box;\n        }\n\n        .project-modal.open {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        .modal-content {\n            background: #fff;\n            width: 100%;\n            max-width: 950px;\n            max-height: 85vh;\n            display: flex;\n            flex-direction: column; \n            gap: 20px;\n            overflow-y: auto;\n            position: relative;\n            padding: 40px 15px 20px 15px;\n            box-sizing: border-box;\n        }\n\n        .modal-gallery-wrapper {\n            width: 100%;\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .modal-gallery-wrapper img {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n            background: #f8f8f8;\n            border-radius: 4px;\n        }\n\n        .modal-info {\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start;\n            padding: 10px 0;\n            color: #1500ff;\n        }\n\n        .modal-info h3 {\n            margin: 0 0 10px 0;\n            font-size: 22px;\n            font-weight: 600;\n            letter-spacing: -0.5px;\n        }\n\n        .modal-info .modal-tag {\n            font-size: 11px;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            font-weight: 700;\n            margin-bottom: 12px;\n            opacity: 0.7;\n        }\n\n        .modal-info p {\n            margin: 0;\n            font-size: 14px;\n            line-height: 1.6;\n            color: #333; \n        }\n\n        .close-modal-btn {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            background: rgba(255, 255, 255, 0.9);\n            border: none;\n            color: #1500ff;\n            font-size: 32px;\n            font-weight: 300;\n            cursor: pointer;\n            z-index: 100;\n            line-height: 1;\n            width: 40px;\n            height: 40px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-radius: 50%;\n            transition: transform 0.2s ease;\n        }\n\n        body.modal-active {\n            overflow: hidden;\n        }\n\n        \/* --- RESPONSIVE ESCRITORIO (Cambio clave a 4 columnas) --- *\/\n        @media (min-width: 768px) {\n            .portfolio-container {\n                padding: 40px 0;\n            }\n\n            h2 {\n                font-size: 32px;\n                margin-bottom: 40px;\n            }\n\n            .filter-menu {\n                margin-bottom: 50px;\n                padding: 0;\n            }\n\n            .filter-btn {\n                padding: 10px 22px;\n                font-size: 14px;\n            }\n\n            \/* Forzamos exactamente 4 columnas en pantallas medianas y grandes *\/\n            .portfolio-grid {\n                grid-template-columns: repeat(4, 1fr);\n                gap: 8px;\n                padding: 0 8px;\n            }\n\n            .item-overlay {\n                background: rgba(21, 0, 255, 0.9); \n                justify-content: center; \n                opacity: 0; \n            }\n\n            .item-overlay h3 {\n                font-size: 16px; \/* Ajustado ligeramente para que no rompa en 4 columnas *\/\n                transform: translateY(15px);\n                transition: transform 0.35s ease;\n                text-shadow: none;\n            }\n\n            .item-overlay p {\n                font-size: 11px;\n                transform: translateY(15px);\n                transition: transform 0.35s ease 0.05s;\n            }\n\n            @media (hover: hover) {\n                .portfolio-item:hover .item-image-wrapper img {\n                    transform: scale(1.04);\n                }\n                .portfolio-item:hover .item-overlay {\n                    opacity: 1;\n                }\n                .portfolio-item:hover .item-overlay h3,\n                .portfolio-item:hover .item-overlay p {\n                    transform: translateY(0);\n                }\n            }\n\n            \/* Estructura Modal en Dos Columnas *\/\n            .modal-content {\n                flex-direction: row; \n                align-items: stretch;\n                overflow-y: hidden;\n                padding: 30px;\n            }\n\n            .modal-gallery-wrapper {\n                width: 60%;\n                overflow-y: auto;\n                max-height: 100%;\n                padding-right: 15px;\n            }\n\n            .modal-info {\n                width: 40%;\n                padding: 10px 10px 10px 20px;\n                overflow-y: auto;\n            }\n            \n            .modal-info h3 {\n                font-size: 28px;\n            }\n\n            .close-modal-btn {\n                top: 20px;\n                right: 20px;\n            }\n        }\n\n        \/* --- PANTALLAS ULTRA ANCHAS (Mantiene 4 columnas pero ampl\u00eda margen\/separaci\u00f3n) --- *\/\n        @media (min-width: 1400px) {\n            .portfolio-grid {\n                grid-template-columns: repeat(4, 1fr);\n                gap: 12px;\n                padding: 0 12px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n<div class=\"portfolio-container\">\n\n    <h2>Aplicaciones Visuales<\/h2>\n\n    <div class=\"filter-menu\">\n        <button class=\"filter-btn active\" data-filter=\"all\">Todos<\/button>\n        <button class=\"filter-btn\" data-filter=\"carteleria\">Carteler\u00eda<\/button>\n        <button class=\"filter-btn\" data-filter=\"packaging\">Packaging<\/button> \n    <\/div>\n\n    <div class=\"portfolio-grid\">\n\n        <div class=\"portfolio-item\" data-category=\"carteleria\" \n             data-title=\"Derechos Humanos\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Serie de carteles realizados a partir de una rejilla tipogr\u00e1fica base con la Declaraci\u00f3n Universal de Derechos Humanos.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup5-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup1-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup2-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup3-scaled.jpg\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup5-scaled.jpg\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>Derechos Humanos<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n <div class=\"portfolio-item\" data-category=\"carteleria\" \n             data-title=\"NAPTA\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Proyecto colectivo para la creaci\u00f3n de un invento y su respectiva carteler\u00eda publicitaria.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-1-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-4-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-03-08-at-20.33.51-1.jpeg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/napta-e1781602013103.jpeg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/logo.jpeg\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-1-scaled.jpg\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>NAPTA<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"portfolio-item\" data-category=\"carteleria\" \n             data-title=\"FRAGMENTOS\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Serie de carteles inspirados en el mundo on\u00edrico como fragmento de la esencia humana.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-1-e1781603254435.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/FRAGMENTOS-1-scaled.jpg\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-1-e1781603254435.png\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>FRAGMENTOS<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"portfolio-item\" data-category=\"carteleria\"\n             data-title=\"FRAGMENTOS II\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Serie de carteles inspirados en el mundo on\u00edrico como fragmento de la esencia humana.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-2.3-e1781602968861.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/FRAGMENTOS-2-scaled.jpg\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-2.3-e1781602968861.png\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>FRAGMENTOS II<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"portfolio-item\" data-category=\"carteleria\"\n             data-title=\"HADES\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Cartel basado en el nuevo \u00e1lbum del a\u00f1o 2026 de la cantante Melanie Mart\u00ednez.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-2-e1781603038949.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/HADES-1-scaled.jpg\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-2-e1781603038949.jpg\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>HADES<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n <div class=\"portfolio-item\" data-category=\"carteleria\"\n             data-title=\"GRUNGE\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Cartel basado en el movimiento art\u00edstico Grunge.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-grunge-3-scaled-e1781604024918.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-grunge-1-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Cartel-Grunge-2-scaled.jpg\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup-grunge-3-scaled-e1781604024918.jpg\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>GRUNGE<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n         <div class=\"portfolio-item\" data-category=\"carteleria\"\n             data-title=\"Cartel Experimental\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Cartel experimental realizado con Adobe Photoshop.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/mockup-scaled.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Cartel-scaled.png\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/mockup-scaled.png\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>Cartel Experimental<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"portfolio-item\" data-category=\"packaging\"\n             data-title=\"EKOO\" \n             data-tag=\"Packaging\"\n             data-desc=\"EKOO es una marca de velas arom\u00e1ticas, dedicada a esas personas que viven con un ritmo de vida acelerado, y necesitan una pausa en su d\u00eda para volver a conectar con ellas mismas.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-14-jun-2026-00_21_38.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-14-jun-2026-00_28_48.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-14-jun-2026-00_20_08.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/FB08A04D-F0BE-479E-99B2-310E3980120C.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-10-jun-2026-01_11_00.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/EKOO.png\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-14-jun-2026-00_21_38.png\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>EKOO<\/h3>\n                    <p>Packaging<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"portfolio-item\" data-category=\"carteleria\"\n             data-title=\"La Forja\" \n             data-tag=\"Carteler\u00eda\"\n             data-desc=\"Un cartel experimental con mockups realizados en met\u00e1lico.\"\n             data-gallery=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/09\/AMS01-mockup-metal-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-22-ago-2026-13_29_20.png, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/09\/mockup-1-scaled.jpg, https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/09\/mockup-scaled.jpg\">\n            <div class=\"item-image-wrapper\">\n                <img decoding=\"async\" src=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-22-ago-2026-13_29_20.png\" alt=\"Proyecto\">\n                <div class=\"item-overlay\">\n                    <h3>La Forja<\/h3>\n                    <p>Carteler\u00eda<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<div class=\"project-modal\" id=\"projectModal\">\n    <button class=\"close-modal-btn\" id=\"closeModal\">&times;<\/button>\n    <div class=\"modal-content\">\n        <div class=\"modal-gallery-wrapper\" id=\"modalGallery\"><\/div>\n        <div class=\"modal-info\">\n            <span class=\"modal-tag\" id=\"modalTag\">Categor\u00eda<\/span>\n            <h3 id=\"modalTitle\">T\u00edtulo del Proyecto<\/h3>\n            <p id=\"modalDesc\">Descripci\u00f3n completa...<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', () => {\n        \/\/ L\u00f3gica de Filtrado\n        const buttons = document.querySelectorAll('.filter-btn');\n        const items = document.querySelectorAll('.portfolio-item');\n\n        buttons.forEach(button => {\n            button.addEventListener('click', (e) => {\n                e.stopPropagation();\n                buttons.forEach(btn => btn.classList.remove('active'));\n                button.classList.add('active');\n\n                const filterValue = button.getAttribute('data-filter');\n\n                items.forEach(item => {\n                    if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {\n                        item.classList.remove('hide');\n                    } else {\n                        item.classList.add('hide');\n                    }\n                });\n            });\n        });\n\n        \/\/ L\u00f3gica de Ventana Modal con Inyecci\u00f3n de Galer\u00eda\n        const modal = document.getElementById('projectModal');\n        const modalGallery = document.getElementById('modalGallery');\n        const modalTag = document.getElementById('modalTag');\n        const modalTitle = document.getElementById('modalTitle');\n        const modalDesc = document.getElementById('modalDesc');\n        const closeModal = document.getElementById('closeModal');\n\n        items.forEach(item => {\n            item.addEventListener('click', () => {\n                const titleText = item.getAttribute('data-title');\n                const tagText = item.getAttribute('data-tag');\n                const descText = item.getAttribute('data-desc');\n                \n                const galleryData = item.getAttribute('data-gallery');\n                \n                modalGallery.innerHTML = '';\n\n                if (galleryData) {\n                    const imagesArray = galleryData.split(',');\n                    imagesArray.forEach(srcUrl => {\n                        const imgElement = document.createElement('img');\n                        imgElement.setAttribute('src', srcUrl.trim());\n                        imgElement.setAttribute('alt', titleText);\n                        modalGallery.appendChild(imgElement);\n                    });\n                }\n\n                modalTag.textContent = tagText;\n                modalTitle.textContent = titleText;\n                modalDesc.textContent = descText;\n\n                modal.classList.add('open');\n                document.body.classList.add('modal-active');\n                \n                modalGallery.scrollTop = 0;\n            });\n        });\n\n        closeModal.addEventListener('click', () => {\n            modal.classList.remove('open');\n            document.body.classList.remove('modal-active');\n        });\n\n        modal.addEventListener('click', (e) => {\n            if (e.target === modal) {\n                modal.classList.remove('open');\n                document.body.classList.remove('modal-active');\n            }\n        });\n    });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\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>Portfolio Full-Width Premium con Info Modal Aplicaciones Visuales Todos Carteler\u00eda Packaging Derechos Humanos Carteler\u00eda NAPTA Carteler\u00eda FRAGMENTOS Carteler\u00eda FRAGMENTOS II Carteler\u00eda HADES Carteler\u00eda GRUNGE Carteler\u00eda Cartel Experimental Carteler\u00eda EKOO Packaging La Forja Carteler\u00eda &times; Categor\u00eda T\u00edtulo del Proyecto Descripci\u00f3n completa&#8230;<\/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-239","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>APLICACI\u00d3N VISUAL - luum.designs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"APLICACI\u00d3N VISUAL - luum.designs\" \/>\n<meta property=\"og:description\" content=\"Portfolio Full-Width Premium con Info Modal Aplicaciones Visuales Todos Carteler\u00eda Packaging Derechos Humanos Carteler\u00eda NAPTA Carteler\u00eda FRAGMENTOS Carteler\u00eda FRAGMENTOS II Carteler\u00eda HADES Carteler\u00eda GRUNGE Carteler\u00eda Cartel Experimental Carteler\u00eda EKOO Packaging La Forja Carteler\u00eda &times; Categor\u00eda T\u00edtulo del Proyecto Descripci\u00f3n completa&#8230;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/\" \/>\n<meta property=\"og:site_name\" content=\"luum.designs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/txxrmenta\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-02T00:54:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup5-scaled.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/\",\"url\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/\",\"name\":\"APLICACI\u00d3N VISUAL - luum.designs\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Mockup5-scaled.jpg\",\"datePublished\":\"2026-05-18T22:39:09+00:00\",\"dateModified\":\"2026-09-02T00:54:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/#primaryimage\",\"url\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Mockup5-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/Mockup5-scaled.jpg\",\"width\":2560,\"height\":1991},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/index.php\\\/aplicacionvisual\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"APLICACI\u00d3N VISUAL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/#website\",\"url\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/\",\"name\":\"luum.designs\",\"description\":\"Portfolio web de luum.designs\",\"publisher\":{\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/#\\\/schema\\\/person\\\/4688aeda8d53dbb764a681a70ace7272\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/#\\\/schema\\\/person\\\/4688aeda8d53dbb764a681a70ace7272\",\"name\":\"luum\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/LOGO-luum-1500ff-2.png\",\"url\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/LOGO-luum-1500ff-2.png\",\"contentUrl\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/LOGO-luum-1500ff-2.png\",\"width\":2255,\"height\":2050,\"caption\":\"luum\"},\"logo\":{\"@id\":\"https:\\\/\\\/luum.estaciondiseno.es\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/LOGO-luum-1500ff-2.png\"},\"sameAs\":[\"https:\\\/\\\/luum.estaciondiseno.es\",\"https:\\\/\\\/www.facebook.com\\\/txxrmenta\",\"https:\\\/\\\/www.instagram.com\\\/luum.designs\",\"https:\\\/\\\/www.pinterest.com\\\/txxrmenta\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"APLICACI\u00d3N VISUAL - luum.designs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/","og_locale":"es_ES","og_type":"article","og_title":"APLICACI\u00d3N VISUAL - luum.designs","og_description":"Portfolio Full-Width Premium con Info Modal Aplicaciones Visuales Todos Carteler\u00eda Packaging Derechos Humanos Carteler\u00eda NAPTA Carteler\u00eda FRAGMENTOS Carteler\u00eda FRAGMENTOS II Carteler\u00eda HADES Carteler\u00eda GRUNGE Carteler\u00eda Cartel Experimental Carteler\u00eda EKOO Packaging La Forja Carteler\u00eda &times; Categor\u00eda T\u00edtulo del Proyecto Descripci\u00f3n completa&#8230;","og_url":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/","og_site_name":"luum.designs","article_publisher":"https:\/\/www.facebook.com\/txxrmenta","article_modified_time":"2026-09-02T00:54:12+00:00","og_image":[{"url":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup5-scaled.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/","url":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/","name":"APLICACI\u00d3N VISUAL - luum.designs","isPartOf":{"@id":"https:\/\/luum.estaciondiseno.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/#primaryimage"},"image":{"@id":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/#primaryimage"},"thumbnailUrl":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup5-scaled.jpg","datePublished":"2026-05-18T22:39:09+00:00","dateModified":"2026-09-02T00:54:12+00:00","breadcrumb":{"@id":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/#primaryimage","url":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup5-scaled.jpg","contentUrl":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/06\/Mockup5-scaled.jpg","width":2560,"height":1991},{"@type":"BreadcrumbList","@id":"https:\/\/luum.estaciondiseno.es\/index.php\/aplicacionvisual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/luum.estaciondiseno.es\/"},{"@type":"ListItem","position":2,"name":"APLICACI\u00d3N VISUAL"}]},{"@type":"WebSite","@id":"https:\/\/luum.estaciondiseno.es\/#website","url":"https:\/\/luum.estaciondiseno.es\/","name":"luum.designs","description":"Portfolio web de luum.designs","publisher":{"@id":"https:\/\/luum.estaciondiseno.es\/#\/schema\/person\/4688aeda8d53dbb764a681a70ace7272"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/luum.estaciondiseno.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/luum.estaciondiseno.es\/#\/schema\/person\/4688aeda8d53dbb764a681a70ace7272","name":"luum","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/LOGO-luum-1500ff-2.png","url":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/LOGO-luum-1500ff-2.png","contentUrl":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/LOGO-luum-1500ff-2.png","width":2255,"height":2050,"caption":"luum"},"logo":{"@id":"https:\/\/luum.estaciondiseno.es\/wp-content\/uploads\/2026\/05\/LOGO-luum-1500ff-2.png"},"sameAs":["https:\/\/luum.estaciondiseno.es","https:\/\/www.facebook.com\/txxrmenta","https:\/\/www.instagram.com\/luum.designs","https:\/\/www.pinterest.com\/txxrmenta"]}]}},"_links":{"self":[{"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":115,"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages\/239\/revisions"}],"predecessor-version":[{"id":1571,"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/pages\/239\/revisions\/1571"}],"wp:attachment":[{"href":"https:\/\/luum.estaciondiseno.es\/index.php\/wp-json\/wp\/v2\/media?parent=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}