{"id":2066,"date":"2026-05-10T19:19:35","date_gmt":"2026-05-10T19:19:35","guid":{"rendered":"https:\/\/paleroo.com\/?page_id=2066"},"modified":"2026-09-11T15:39:51","modified_gmt":"2026-09-11T15:39:51","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/paleroo.com\/es\/portfolio\/","title":{"rendered":"Portafolio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2066\" class=\"elementor elementor-2066\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7012b638 BnnerPort e-flex e-con-boxed e-con e-parent\" data-id=\"7012b638\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-3c6f1c65 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"3c6f1c65\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;zoomIn&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdbac0f elementor-widget elementor-widget-heading\" data-id=\"bdbac0f\" 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\">OUR WORK<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cc837ad elementor-widget elementor-widget-heading\" data-id=\"6cc837ad\" 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\">REAL PROJECTS. REAL VISIBILITY.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20dd8cd elementor-widget elementor-widget-heading\" data-id=\"20dd8cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Explore vehicle wraps, commercial signs, storefront graphics and custom branding produced and installed by Paleroo.<\/p>\t\t\t\t<\/div>\n\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-2ea94fe e-con-full e-flex e-con e-parent\" data-id=\"2ea94fe\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a29b9d elementor-widget elementor-widget-shortcode\" data-id=\"4a29b9d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <section class=\"PortfolioGallery\">\n\n        <div class=\"portfolio-filters\">\n            <button class=\"filter-btn active\" data-filter=\"all\" style=\"padding:13px 22px!important;border-radius:999px!important;background:linear-gradient(135deg,#00CC66,#0080FF)!important;border:1px solid transparent!important;color:#fff!important;font-size:13px!important;\">ALL<\/button>\n                            <button class=\"filter-btn\" data-filter=\"channel-letters\" style=\"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\">CHANNEL LETTERS<\/button>\n                            <button class=\"filter-btn\" data-filter=\"large-format\" style=\"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\">LARGE FORMAT<\/button>\n                            <button class=\"filter-btn\" data-filter=\"partial-wraps\" style=\"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\">PARTIAL WRAPS<\/button>\n                            <button class=\"filter-btn\" data-filter=\"pylon-monument\" style=\"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\">PYLON &amp;AMP; MONUMENT<\/button>\n                            <button class=\"filter-btn\" data-filter=\"storefronts\" style=\"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\">STOREFRONTS<\/button>\n                            <button class=\"filter-btn\" data-filter=\"vehicle-wraps\" style=\"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\">VEHICLE WRAPS<\/button>\n                            <button class=\"filter-btn\" data-filter=\"window-graphics\" style=\"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\">WINDOW GRAPHICS<\/button>\n                    <\/div>\n\n        <div class=\"portfolio-grid\" id=\"portfolio-grid\"><\/div>\n\n    <\/section>\n\n    <div class=\"portfolio-modal\" id=\"portfolio-modal\">\n        <div class=\"modal-backdrop\" id=\"modal-backdrop\"><\/div>\n        <div class=\"modal-box\">\n            <button class=\"modal-close\" id=\"modal-close\" aria-label=\"Cerrar\" style=\"position:absolute!important;top:18px!important;right:18px!important;width:40px!important;height:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important;margin:0!important;border-radius:50%!important;background:rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;font-size:20px!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;\">\u00d7<\/button>\n            <div class=\"modal-image\">\n                <div class=\"modal-tabs\" id=\"modal-tabs\" style=\"display:none;position:absolute!important;top:18px!important;left:18px!important;z-index:3!important;flex-wrap:nowrap!important;gap:8px!important;\">\n                    <button class=\"modal-tab active\" id=\"tab-photos\" style=\"position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;flex:0 0 auto!important;margin:0!important;padding:9px 16px!important;border-radius:999px!important;background:linear-gradient(135deg,#00CC66,#0080FF)!important;border:1px solid transparent!important;color:#fff!important;font-size:11px!important;font-weight:800!important;letter-spacing:.5px;cursor:pointer;\">PHOTOS<\/button>\n                    <button class=\"modal-tab\" id=\"tab-before-after\" style=\"position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;flex:0 0 auto!important;margin:0!important;padding:9px 16px!important;border-radius:999px!important;background:rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.2)!important;color:rgba(255,255,255,.75)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.5px;cursor:pointer;\">BEFORE \/ AFTER<\/button>\n                <\/div>\n                <div id=\"modal-gallery-view\">\n                    <img decoding=\"async\" id=\"modal-img\" src=\"\" alt=\"\">\n                    <button class=\"modal-nav modal-prev\" id=\"modal-prev\" aria-label=\"Foto anterior\" style=\"position:absolute!important;top:50%!important;left:16px!important;transform:translateY(-50%)!important;width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;margin:0!important;border-radius:50%!important;background:rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;font-size:20px!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer;z-index:2;\">\u2039<\/button>\n                    <button class=\"modal-nav modal-next\" id=\"modal-next\" aria-label=\"Foto siguiente\" style=\"position:absolute!important;top:50%!important;right:16px!important;transform:translateY(-50%)!important;width:42px!important;height:42px!important;min-width:42px!important;padding:0!important;margin:0!important;border-radius:50%!important;background:rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;font-size:20px!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer;z-index:2;\">\u203a<\/button>\n                    <div class=\"modal-dots\" id=\"modal-dots\"><\/div>\n                <\/div>\n                <div class=\"before-after-slider\" id=\"before-after-slider\" style=\"display:none;\">\n                    <img decoding=\"async\" class=\"ba-after\" id=\"ba-after-img\" src=\"\" alt=\"Despu\u00e9s\">\n                    <div class=\"ba-before-wrap\" id=\"ba-before-wrap\">\n                        <img decoding=\"async\" class=\"ba-before\" id=\"ba-before-img\" src=\"\" alt=\"Antes\">\n                    <\/div>\n                    <div class=\"ba-label ba-label-before\">BEFORE<\/div>\n                    <div class=\"ba-label ba-label-after\">AFTER<\/div>\n                    <div class=\"ba-handle\" id=\"ba-handle\">\n                        <div class=\"ba-handle-line\"><\/div>\n                        <div class=\"ba-handle-circle\">\u27f7<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"modal-info\">\n                <span class=\"modal-tag\" id=\"modal-category\"><\/span>\n                <h3 id=\"modal-title\"><\/h3>\n                <div class=\"modal-meta\">\n                    <span id=\"modal-location\"><\/span>\n                    <span class=\"meta-dot\">\u2022<\/span>\n                    <span id=\"modal-service\"><\/span>\n                <\/div>\n                <p id=\"modal-desc\"><\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n    .PortfolioGallery{position:relative;overflow:hidden;padding:100px 7% 140px;background:linear-gradient(180deg,#040816,#060B18);}\n    .portfolio-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:60px;}\n    .filter-btn{padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;font-weight:700;letter-spacing:.5px;cursor:pointer;box-shadow:none!important;transition:all .3s ease;}\n    .filter-btn:hover{border-color:rgba(0,128,255,.35)!important;color:white!important;}\n    .filter-btn.active{background:linear-gradient(135deg,#00CC66,#0080FF)!important;border-color:transparent!important;color:white!important;box-shadow:0 10px 24px rgba(0,128,255,.25)!important;}\n    .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}\n    .portfolio-card{position:relative;overflow:hidden;border-radius:28px;height:340px;cursor:pointer;border:1px solid rgba(255,255,255,.06);transition:transform .4s ease,box-shadow .4s ease;}\n    .portfolio-card.hidden{display:none;}\n    .portfolio-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.4);}\n    .portfolio-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}\n    .portfolio-card:hover img{transform:scale(1.08);}\n    .portfolio-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(4,8,16,.95) 100%);}\n    .portfolio-card-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px;}\n    .portfolio-card-tag{display:inline-flex;padding:7px 14px;border-radius:999px;margin-bottom:12px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);color:white;font-size:10px;font-weight:800;letter-spacing:1px;}\n    .portfolio-card-info h4{color:white;font-size:19px;font-weight:800;margin-bottom:4px;}\n    .portfolio-card-info span.location{color:rgba(255,255,255,.65);font-size:13px;}\n    .portfolio-cta-block{grid-column:1\/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 40px;border-radius:28px;background:linear-gradient(135deg,rgba(0,204,102,.12),rgba(0,128,255,.12));border:1px dashed rgba(0,128,255,.3);}\n    .portfolio-cta-block h3{color:white;font-size:clamp(26px,3vw,36px);font-weight:900;margin-bottom:22px;}\n    .portfolio-cta-block a{display:inline-flex;align-items:center;padding:16px 30px;border-radius:16px;background:linear-gradient(135deg,#00CC66,#0080FF);color:white;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:1px;box-shadow:0 15px 30px rgba(0,128,255,.25);transition:transform .3s ease;}\n    .portfolio-cta-block a:hover{transform:translateY(-4px);}\n    .portfolio-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:30px;}\n    .portfolio-modal.open{display:flex;}\n    .modal-backdrop{position:absolute;inset:0;background:rgba(2,4,10,.88);backdrop-filter:blur(6px);}\n    .modal-box{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;max-width:1000px;width:100%;max-height:85vh;overflow:hidden;border-radius:32px;background:linear-gradient(145deg,#0e1220,#070a12);border:1px solid rgba(255,255,255,.08);box-shadow:0 40px 100px rgba(0,0,0,.5);}\n    .modal-image{position:relative;min-height:340px;}\n    .modal-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}\n    .modal-tabs{position:absolute;top:18px;left:18px;z-index:3;display:flex;gap:8px;}\n    .modal-tab{padding:9px 16px!important;border-radius:999px!important;background:rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.2)!important;color:rgba(255,255,255,.75)!important;font-size:11px!important;font-weight:800;letter-spacing:.5px;cursor:pointer;}\n    .modal-tab.active{background:linear-gradient(135deg,#00CC66,#0080FF)!important;border-color:transparent!important;color:#fff!important;}\n    #modal-gallery-view{position:absolute;inset:0;}\n    .before-after-slider{position:absolute;inset:0;overflow:hidden;cursor:ew-resize;user-select:none;}\n    .ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}\n    .ba-before-wrap{position:absolute;inset:0;}\n    .ba-before{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;clip-path:inset(0 50% 0 0);}\n    .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:2;pointer-events:none;}\n    .ba-handle-line{position:absolute;top:0;bottom:0;left:0;width:2px;background:rgba(255,255,255,.9);transform:translateX(-1px);}\n    .ba-handle-circle{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:#0a0a12;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;box-shadow:0 6px 16px rgba(0,0,0,.4);}\n    .ba-label{position:absolute;top:18px;z-index:2;padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;pointer-events:none;}\n    .ba-label-before{left:18px;}\n    .ba-label-after{right:18px;}\n    .modal-dots{position:absolute;bottom:18px;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:8px;}\n    .modal-dot{width:8px!important;height:8px!important;min-width:8px!important;max-width:8px!important;border-radius:50%!important;background:rgba(255,255,255,.35)!important;border:none!important;padding:0!important;margin:0!important;cursor:pointer;transition:background .25s ease,transform .25s ease;}\n    .modal-dot.active{background:linear-gradient(135deg,#00CC66,#0080FF)!important;transform:scale(1.25);}\n    .modal-info{padding:44px;overflow-y:auto;}\n    .modal-tag{display:inline-flex;padding:8px 16px;border-radius:999px;margin-bottom:20px;background:rgba(0,128,255,.12);border:1px solid rgba(0,128,255,.3);color:#0080FF;font-size:11px;font-weight:800;letter-spacing:1px;}\n    .modal-info h3{color:white;font-size:30px;font-weight:900;margin-bottom:16px;line-height:1.1;}\n    .modal-meta{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:rgba(255,255,255,.6);font-size:14px;}\n    .meta-dot{color:rgba(255,255,255,.3);}\n    .modal-info p{color:rgba(255,255,255,.72);line-height:1.85;font-size:15px;}\n    @media(max-width:680px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}\n    @media(max-width:640px){\n        .PortfolioGallery{padding:80px 24px 100px;}\n        .portfolio-filters{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;}\n        .filter-btn{flex-shrink:0;}\n        .portfolio-grid{grid-template-columns:1fr;}\n        .modal-box{grid-template-columns:1fr;max-height:90vh;overflow-y:auto;}\n        .modal-image{min-height:220px;}\n        .modal-info{padding:30px;}\n    }\n    <\/style>\n\n    <script>\n    (function () {\n        var projects = [{\"title\":\"Client Storefront Project\",\"categories\":[\"storefronts\"],\"categoryLabel\":\"STOREFRONTS\",\"location\":\"New Jersey\",\"service\":\"Commercial Signage\",\"description\":\"A complete storefront visibility project produced and installed by Paleroo.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/18464-1024x585.jpg\"]},{\"title\":\"Commercial Storefront Signage\",\"categories\":[\"storefronts\"],\"categoryLabel\":\"STOREFRONTS\",\"location\":\"New Jersey\",\"service\":\"Commercial Signage\",\"description\":\"Storefront signage designed and installed to boost visibility and give the business a professional, established look.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/492946496_1220830310048833_6167949308927685703_n-1024x743.jpg\"]},{\"title\":\"Professional Installation\",\"categories\":[\"channel-letters\"],\"categoryLabel\":\"CHANNEL LETTERS\",\"location\":\"New Jersey\",\"service\":\"Installation\",\"description\":\"Behind the scenes: our team handling a professional installation from start to finish.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_3167-1-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_3166-1-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_3163-1-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_3162-1024x768.jpg\"]},{\"title\":\"Full wraps\",\"categories\":[\"vehicle-wraps\"],\"categoryLabel\":\"VEHICLE WRAPS\",\"location\":\"New Jersey\",\"service\":\"Full wraps\",\"description\":\"Custom vehicle graphics designed to reinforce brand identity on the road.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_5505-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_5504-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_5503-768x1024.jpg\"]},{\"title\":\"Full wraps\",\"categories\":[\"vehicle-wraps\"],\"categoryLabel\":\"VEHICLE WRAPS\",\"location\":\"New Jersey\",\"service\":\"Full wraps\",\"description\":\"Custom vehicle graphics designed to reinforce brand identity on the road.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_2060-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_2058-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_2059-768x1024.jpg\"]},{\"title\":\"Partial Wraps\",\"categories\":[\"partial-wraps\"],\"categoryLabel\":\"PARTIAL WRAPS\",\"location\":\"New Jersey\",\"service\":\"Partial Wraps\",\"description\":\"Custom vehicle graphics designed to reinforce brand identity on the road.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1661-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1660-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1662-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1659-1024x768.jpg\"]},{\"title\":\"Partial Wraps\",\"categories\":[\"partial-wraps\"],\"categoryLabel\":\"PARTIAL WRAPS\",\"location\":\"New Jersey\",\"service\":\"Full wraps\",\"description\":\"Custom vehicle graphics designed to reinforce brand identity on the road.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_27271-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_2728-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_2757-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_2729-1024x768.jpg\"]},{\"title\":\"Full wraps\",\"categories\":[\"vehicle-wraps\"],\"categoryLabel\":\"VEHICLE WRAPS\",\"location\":\"New Jersey\",\"service\":\"Full wraps\",\"description\":\"Custom vehicle graphics designed to reinforce brand identity on the road.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_0894-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_0893-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_0896-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_0895-768x1024.jpg\"]},{\"title\":\"Full Vehicle Wrap\",\"categories\":[\"vehicle-wraps\"],\"categoryLabel\":\"VEHICLE WRAPS\",\"location\":\"New Jersey\",\"service\":\"Full wraps\",\"description\":\"Custom full vehicle wrap designed and installed to turn this vehicle into a moving advertisement for the business.\",\"images\":[\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1713-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1714-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1715-1024x768.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1716-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1711-768x1024.jpg\",\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1712-768x1024.jpg\"],\"beforeAfter\":{\"before\":\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1716-768x1024.jpg\",\"after\":\"https:\\\/\\\/paleroo.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/IMG_1714-768x1024.jpg\"}}];\n\n        var grid = document.getElementById(\"portfolio-grid\");\n        var currentProject = null, currentImageIndex = 0, autoplayTimer = null;\n\n        function startAutoplay(){ stopAutoplay(); if (currentProject.images.length>1) autoplayTimer=setInterval(nextImage,4000); }\n        function stopAutoplay(){ if(autoplayTimer){clearInterval(autoplayTimer);autoplayTimer=null;} }\n\n        function renderGrid(){\n            grid.innerHTML = \"\";\n            var ctaShown = false;\n            projects.forEach(function(project,index){\n                var card = document.createElement(\"div\");\n                card.className = \"portfolio-card\";\n                \/\/ CAMBIO: ahora un proyecto puede tener varias categor\u00edas\n                \/\/ a la vez, guardadas separadas por espacio\n                card.setAttribute(\"data-category\", project.categories.join(\" \"));\n                card.innerHTML =\n                    '<img decoding=\"async\" src=\"'+project.images[0]+'\" alt=\"'+project.title+'\" loading=\"lazy\">'+\n                    '<div class=\"portfolio-card-overlay\"><\/div>'+\n                    '<div class=\"portfolio-card-info\">'+\n                        '<span class=\"portfolio-card-tag\">'+project.categoryLabel+'<\/span>'+\n                        '<h4>'+project.title+'<\/h4>'+\n                        '<span class=\"location\">'+project.location+'<\/span>'+\n                    '<\/div>';\n                card.addEventListener(\"click\", function(){ openModal(project); });\n                grid.appendChild(card);\n                if ((index+1) % ctaFrequency === 0){ appendCtaBlock(); ctaShown = true; }\n            });\n            if (!ctaShown) appendCtaBlock();\n        }\n\n        \/\/ Estos 5 valores vienen de Portfolio Projects \u2192 Settings,\n        \/\/ as\u00ed la clienta los puede cambiar sin tocar c\u00f3digo.\n        var ctaTitle1   = \"LIKE WHAT YOU SEE?\";\n        var ctaTitle2   = \"START YOUR PROJECT.\";\n        var ctaBtnText  = \"GET A FREE QUOTE\";\n        var ctaBtnLink  = \"\\\/contact\\\/\";\n        var ctaFrequency = 6;\n\n        function appendCtaBlock(){\n            var cta = document.createElement(\"div\");\n            cta.className = \"portfolio-cta-block\";\n            cta.innerHTML = '<h3>' + ctaTitle1 + '<br>' + ctaTitle2 + '<\/h3><a href=\"' + ctaBtnLink + '\">' + ctaBtnText + '<\/a>';\n            grid.appendChild(cta);\n        }\n\n        function openModal(project){\n            currentProject = project; currentImageIndex = 0;\n            document.getElementById(\"modal-category\").textContent = project.categoryLabel;\n            document.getElementById(\"modal-title\").textContent = project.title;\n            document.getElementById(\"modal-location\").textContent = project.location;\n            document.getElementById(\"modal-service\").textContent = project.service;\n            document.getElementById(\"modal-desc\").textContent = project.description;\n            renderModalImage(); renderModalDots();\n            var tabs = document.getElementById(\"modal-tabs\");\n            if (project.beforeAfter && project.beforeAfter.before && project.beforeAfter.after){\n                tabs.style.display = \"flex\";\n                document.getElementById(\"ba-before-img\").src = project.beforeAfter.before;\n                document.getElementById(\"ba-after-img\").src = project.beforeAfter.after;\n                switchToPhotosTab();\n            } else { tabs.style.display = \"none\"; switchToPhotosTab(); }\n            document.getElementById(\"portfolio-modal\").classList.add(\"open\");\n            startAutoplay();\n        }\n\n        var tabActiveStyle = \"position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;flex:0 0 auto!important;margin:0!important;padding:9px 16px!important;border-radius:999px!important;background:linear-gradient(135deg,#00CC66,#0080FF)!important;border:1px solid transparent!important;color:#fff!important;font-size:11px!important;font-weight:800!important;letter-spacing:.5px;cursor:pointer;\";\n        var tabInactiveStyle = \"position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;flex:0 0 auto!important;margin:0!important;padding:9px 16px!important;border-radius:999px!important;background:rgba(0,0,0,.5)!important;border:1px solid rgba(255,255,255,.2)!important;color:rgba(255,255,255,.75)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.5px;cursor:pointer;\";\n\n        function switchToPhotosTab(){\n            document.getElementById(\"modal-gallery-view\").style.display = \"block\";\n            document.getElementById(\"before-after-slider\").style.display = \"none\";\n            document.getElementById(\"tab-photos\").classList.add(\"active\");\n            document.getElementById(\"tab-before-after\").classList.remove(\"active\");\n            document.getElementById(\"tab-photos\").setAttribute(\"style\", tabActiveStyle);\n            document.getElementById(\"tab-before-after\").setAttribute(\"style\", tabInactiveStyle);\n            stopAutoSweep();\n            clearTimeout(autoSweepResumeTimer);\n        }\n        function switchToBeforeAfterTab(){\n            document.getElementById(\"modal-gallery-view\").style.display = \"none\";\n            document.getElementById(\"before-after-slider\").style.display = \"block\";\n            document.getElementById(\"tab-before-after\").classList.add(\"active\");\n            document.getElementById(\"tab-photos\").classList.remove(\"active\");\n            document.getElementById(\"tab-before-after\").setAttribute(\"style\", tabActiveStyle);\n            document.getElementById(\"tab-photos\").setAttribute(\"style\", tabInactiveStyle);\n            startAutoSweep();\n        }\n        document.getElementById(\"tab-photos\").addEventListener(\"click\", switchToPhotosTab);\n        document.getElementById(\"tab-before-after\").addEventListener(\"click\", switchToBeforeAfterTab);\n\n        var baSlider = document.getElementById(\"before-after-slider\");\n        var baBeforeImg = document.getElementById(\"ba-before-img\");\n        var baHandle = document.getElementById(\"ba-handle\");\n        var isDraggingSlider = false;\n        var autoSweepRAF = null;\n        var autoSweepPercent = 50;\n        var autoSweepDirection = 1;\n        var autoSweepResumeTimer = null;\n\n        function resetSlider(){ setSliderPosition(50); }\n        function setSliderPosition(percent){\n            percent = Math.max(0, Math.min(100, percent));\n            baBeforeImg.style.clipPath = \"inset(0 \" + (100-percent) + \"% 0 0)\";\n            baHandle.style.left = percent + \"%\";\n        }\n\n        \/\/ NUEVO: mueve el control solo, de un lado a otro, mientras\n        \/\/ nadie lo est\u00e9 arrastrando con el mouse\/dedo.\n        function startAutoSweep(){\n            stopAutoSweep();\n            autoSweepPercent = 50;\n            autoSweepDirection = 1;\n            function step(){\n                autoSweepPercent += autoSweepDirection * 0.12;\n                if (autoSweepPercent >= 95) autoSweepDirection = -1;\n                if (autoSweepPercent <= 5) autoSweepDirection = 1;\n                setSliderPosition(autoSweepPercent);\n                autoSweepRAF = requestAnimationFrame(step);\n            }\n            step();\n        }\n        function stopAutoSweep(){\n            if (autoSweepRAF) cancelAnimationFrame(autoSweepRAF);\n            autoSweepRAF = null;\n        }\n\n        function updateSliderFromEvent(e){\n            var rect = baSlider.getBoundingClientRect();\n            var clientX = e.touches ? e.touches[0].clientX : e.clientX;\n            var percent = ((clientX-rect.left)\/rect.width)*100;\n            setSliderPosition(percent);\n        }\n        baSlider.addEventListener(\"mousedown\", function(e){\n            isDraggingSlider = true;\n            stopAutoSweep();\n            clearTimeout(autoSweepResumeTimer);\n            updateSliderFromEvent(e);\n        });\n        baSlider.addEventListener(\"touchstart\", function(e){\n            isDraggingSlider = true;\n            stopAutoSweep();\n            clearTimeout(autoSweepResumeTimer);\n            updateSliderFromEvent(e);\n        });\n        window.addEventListener(\"mousemove\", function(e){ if(isDraggingSlider) updateSliderFromEvent(e); });\n        window.addEventListener(\"touchmove\", function(e){ if(isDraggingSlider) updateSliderFromEvent(e); });\n\n        \/\/ Al soltar, espera 3 segundos sin actividad y retoma el\n        \/\/ movimiento autom\u00e1tico solo (igual que el carrusel de fotos)\n        function scheduleAutoSweepResume(){\n            clearTimeout(autoSweepResumeTimer);\n            autoSweepResumeTimer = setTimeout(function(){\n                if (document.getElementById(\"before-after-slider\").style.display !== \"none\") {\n                    startAutoSweep();\n                }\n            }, 3000);\n        }\n        window.addEventListener(\"mouseup\", function(){ if(isDraggingSlider){ isDraggingSlider=false; scheduleAutoSweepResume(); } });\n        window.addEventListener(\"touchend\", function(){ if(isDraggingSlider){ isDraggingSlider=false; scheduleAutoSweepResume(); } });\n\n        function renderModalImage(){\n            document.getElementById(\"modal-img\").src = currentProject.images[currentImageIndex];\n            var showNav = currentProject.images.length > 1;\n            document.getElementById(\"modal-prev\").style.display = showNav ? \"flex\" : \"none\";\n            document.getElementById(\"modal-next\").style.display = showNav ? \"flex\" : \"none\";\n        }\n        function renderModalDots(){\n            var dotsWrap = document.getElementById(\"modal-dots\");\n            dotsWrap.innerHTML = \"\";\n            if (currentProject.images.length <= 1) return;\n            currentProject.images.forEach(function(img,i){\n                var dot = document.createElement(\"button\");\n                dot.className = \"modal-dot\" + (i===currentImageIndex ? \" active\" : \"\");\n                dot.setAttribute(\"style\",\"width:8px!important;height:8px!important;min-width:8px!important;max-width:8px!important;border-radius:50%!important;border:none!important;padding:0!important;margin:0!important;cursor:pointer;background:\"+(i===currentImageIndex?\"linear-gradient(135deg,#00CC66,#0080FF)\":\"rgba(255,255,255,.35)\")+\"!important;\");\n                dot.addEventListener(\"click\", function(){ currentImageIndex=i; renderModalImage(); renderModalDots(); startAutoplay(); });\n                dotsWrap.appendChild(dot);\n            });\n        }\n        function nextImage(){ currentImageIndex=(currentImageIndex+1)%currentProject.images.length; renderModalImage(); renderModalDots(); }\n        function prevImage(){ currentImageIndex=(currentImageIndex-1+currentProject.images.length)%currentProject.images.length; renderModalImage(); renderModalDots(); }\n\n        document.getElementById(\"modal-next\").addEventListener(\"click\", function(e){ e.stopPropagation(); nextImage(); startAutoplay(); });\n        document.getElementById(\"modal-prev\").addEventListener(\"click\", function(e){ e.stopPropagation(); prevImage(); startAutoplay(); });\n\n        function closeModal(){\n            document.getElementById(\"portfolio-modal\").classList.remove(\"open\");\n            stopAutoplay();\n            stopAutoSweep();\n            clearTimeout(autoSweepResumeTimer);\n        }\n        document.getElementById(\"modal-close\").addEventListener(\"click\", closeModal);\n        document.getElementById(\"modal-backdrop\").addEventListener(\"click\", closeModal);\n\n        var inactiveStyle = \"padding:13px 22px!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;color:rgba(255,255,255,.7)!important;font-size:13px!important;\";\n        var activeStyle = \"padding:13px 22px!important;border-radius:999px!important;background:linear-gradient(135deg,#00CC66,#0080FF)!important;border:1px solid transparent!important;color:#fff!important;font-size:13px!important;\";\n\n        document.querySelectorAll(\".filter-btn\").forEach(function(btn){\n            btn.addEventListener(\"click\", function(){\n                document.querySelectorAll(\".filter-btn\").forEach(function(b){ b.classList.remove(\"active\"); b.setAttribute(\"style\", inactiveStyle); });\n                btn.classList.add(\"active\"); btn.setAttribute(\"style\", activeStyle);\n                var filter = btn.getAttribute(\"data-filter\");\n                document.querySelectorAll(\".portfolio-card\").forEach(function(card){\n                    var cats = card.getAttribute(\"data-category\").split(\" \");\n                    if (filter===\"all\" || cats.indexOf(filter) !== -1) card.classList.remove(\"hidden\");\n                    else card.classList.add(\"hidden\");\n                });\n                \/\/ CORRECCI\u00d3N: el bloque \"LIKE WHAT YOU SEE?\" est\u00e1 en una\n                \/\/ posici\u00f3n fija pensada para la lista COMPLETA de\n                \/\/ proyectos \u2014 al filtrar una categor\u00eda con pocos\n                \/\/ resultados, quedaba encajado entre 1 o 2 tarjetas y\n                \/\/ romp\u00eda la cuadr\u00edcula. Ahora ese bloque solo se muestra\n                \/\/ en la vista \"ALL\"; en cualquier categor\u00eda filtrada\n                \/\/ se oculta, para que las tarjetas fluyan normal.\n                document.querySelectorAll(\".portfolio-cta-block\").forEach(function(cta){\n                    if (filter === \"all\") cta.style.display = \"\";\n                    else cta.style.display = \"none\";\n                });\n            });\n        });\n\n        renderGrid();\n    }());\n    <\/script>\n    <\/div>\n\t\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>OUR WORK REAL PROJECTS. REAL VISIBILITY. Explore vehicle wraps, commercial signs, storefront graphics and custom branding produced and installed by Paleroo.<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2066","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/pages\/2066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/comments?post=2066"}],"version-history":[{"count":163,"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/pages\/2066\/revisions"}],"predecessor-version":[{"id":3568,"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/pages\/2066\/revisions\/3568"}],"wp:attachment":[{"href":"https:\/\/paleroo.com\/es\/wp-json\/wp\/v2\/media?parent=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}