{"id":9264,"date":"2026-08-03T19:32:52","date_gmt":"2026-08-03T19:32:52","guid":{"rendered":"https:\/\/mostros.co\/?page_id=9264"},"modified":"2026-08-04T18:26:06","modified_gmt":"2026-08-04T18:26:06","slug":"syncwork-app","status":"publish","type":"page","link":"https:\/\/mostros.co\/es\/syncwork-app\/","title":{"rendered":"SyncWork-App"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nSyncWork \u2014 Case Study<\/title>\n<!-- Gotham is a licensed commercial typeface and isn't available on a free web-font CDN,\n so Montserrat is loaded here as the closest open substitute in the same geometric-grotesk family. -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<style>\n\n:root{\n --black:#0a0a0a;\n --orange:#E8532A;\n --cream:#E7E4BB;\n --red:#E84951;\n --sky:#97DDFA;\n --yellow:#F9E771;\n --blue:#2C4DE9;\n --font:'Gotham','Montserrat',sans-serif;\n}\n\n*{box-sizing:border-box; margin:0; padding:0;}\nhtml{background:var(--black);}\nbody{\n font-family:var(--font);\n background:var(--black);\n color:var(--cream);\n overflow-x:hidden;\n -webkit-font-smoothing:antialiased;\n}\n\n.wrap{width:88%; max-width:1240px; margin:0 auto;}\n\na{color:inherit;}\n\n.eyebrow{\n display:inline-flex; align-items:center; gap:10px;\n font-size:18px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;\n}\n.dot{width:8px; height:8px; border-radius:50%; display:inline-block;}\n\n\/* ===== HERO ===== *\/\n.hero{padding:70px 0 40px; position:relative;}\n\n\/* FIX: blurred blobs were expensive live-filter layers that iOS Safari\n would tear\/leave stale during scroll compositing. Replaced blur()\n with a soft radial-gradient (visually near-identical, no filter cost)\n and pinned each to its own GPU layer so it never needs re-rasterizing. *\/\n.hero-blob{\n position:absolute; width:520px; height:520px; border-radius:50%;\n opacity:.28; z-index:0;\n will-change:transform;\n transform:translateZ(0);\n -webkit-backface-visibility:hidden;\n pointer-events:none;\n}\n.blob1{background:radial-gradient(circle, var(--blue), transparent 70%); top:-160px; left:-160px;}\n.blob2{background:radial-gradient(circle, var(--orange), transparent 70%); bottom:-200px; right:-160px;}\n\n.hero-inner{position:relative; z-index:1;}\n.hero h1{\n font-weight:800; font-size:clamp(28px,3.6vw,50px);\n line-height:1.08; letter-spacing:-.02em;\n margin:18px 0 22px; max-width:20ch; color:var(--cream);\n}\n.hero h1 .c1{color:var(--orange);}\n.hero h1 .c2{color:var(--sky);}\n.hero h1 .c3{color:var(--yellow);}\n\n.hero-sub{\n display:flex; gap:60px; flex-wrap:wrap; align-items:flex-end;\n border-top:1px solid #1c1c1c; padding-top:26px;\n}\n.hero-sub p{max-width:520px; font-size:18px; line-height:1.55; color:#c7c4b8; font-weight:400;}\n.hero-sub p b{color:var(--cream); font-weight:700;}\n\n.meta-row{display:flex; gap:34px; flex-wrap:wrap; font-size:17px; color:#a5a297;}\n.meta-row div{display:flex; flex-direction:column; gap:6px;}\n.meta-row b{color:var(--cream); font-size:18px; font-weight:700;}\n\n\/* ===== MARQUEE ===== *\/\n.marquee{\n border-top:1px solid #1c1c1c; border-bottom:1px solid #1c1c1c;\n overflow:hidden; white-space:nowrap; padding:18px 0; margin-top:60px;\n}\n.marquee-track{\n display:inline-flex; gap:40px; animation:scroll 26s linear infinite;\n will-change:transform;\n transform:translateZ(0);\n}\n.marquee span{\n font-size:20px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;\n display:inline-flex; align-items:center; gap:10px; color:#807d73;\n}\n@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}\n\n\/* ===== GALLERY (light section, small floating images) ===== *\/\n.gallery{\n background:var(--cream);\n color:var(--black);\n padding:100px 0 60px;\n position:relative;\n \/* isolates this section's own compositing\/paint context so the\n dark hero above it can't bleed through or leave a stale frame\n behind when the browser paints this section in during scroll. *\/\n isolation:isolate;\n contain:paint;\n}\n.gallery .section-head h2, .gallery .section-head p{color:var(--black);}\n.gallery .section-head p{color:#4d4b3f;}\n\n.float-field{\n position:relative;\n width:100%;\n height:600px;\n padding:0 24px;\n overflow:hidden;\n}\n.float-item{\n position:absolute;\n top:var(--t); left:var(--l);\n width:150px;\n max-width:32vw;\n cursor:grab;\n touch-action:none;\n user-select:none;\n -webkit-user-select:none;\n filter:drop-shadow(0 20px 30px rgba(0,0,0,.28));\n animation:floaty var(--dur) ease-in-out infinite;\n animation-delay:var(--delay);\n \/* animation-play-state is toggled by JS (see script) so items\n off-screen stop animating and stop costing paint *\/\n animation-play-state:paused;\n transform:rotate(var(--rot));\n transition:transform .3s ease, filter .3s ease, width .2s ease;\n will-change:transform;\n -webkit-backface-visibility:hidden;\n}\n.float-item img{display:block; width:100%; height:auto; border-radius:16px; pointer-events:none;}\n\n.float-item:hover{\n animation-play-state:paused;\n filter:drop-shadow(0 26px 36px rgba(0,0,0,.36));\n transform:rotate(var(--rot)) scale(1.18);\n z-index:60;\n}\n\n.float-item.dragging{\n cursor:grabbing;\n animation-play-state:paused;\n transition:none;\n transform:rotate(0deg) scale(1.07);\n filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));\n z-index:80;\n}\n\n@keyframes floaty{\n 0%,100%{ transform:translateY(0) rotate(var(--rot)); }\n 50%{ transform:translateY(-14px) rotate(calc(var(--rot) * -1)); }\n}\n\n\/* Mobile: no free dragging \u2014 lay the images out in a clean, organized\n grid instead of scattering them with absolute top\/left + rotation. *\/\n@media(max-width:900px){\n .float-field{\n height:auto;\n padding:0 16px 20px;\n display:grid;\n grid-template-columns:repeat(2, 1fr);\n gap:24px 16px;\n justify-items:center;\n }\n .float-item{\n position:static;\n width:100%;\n max-width:220px;\n cursor:default;\n touch-action:auto;\n transform:none;\n animation:none;\n filter:drop-shadow(0 14px 22px rgba(0,0,0,.22));\n }\n .float-item:hover{ transform:none; filter:drop-shadow(0 14px 22px rgba(0,0,0,.22)); }\n}\n@media(max-width:480px){\n .float-field{ grid-template-columns:repeat(2, 1fr); gap:20px 14px; }\n .float-item{ max-width:none; }\n}\n\n\/* ===== SECTION HEAD (shared) ===== *\/\nsection{padding:100px 0;}\n.section-head{\n display:flex; justify-content:space-between; align-items:flex-end; gap:36px; flex-wrap:wrap;\n border-bottom:1px solid #1c1c1c; padding-bottom:30px; margin-bottom:50px;\n}\n.section-head h2{font-weight:800; font-size:clamp(28px,4vw,48px); line-height:1.06; max-width:14ch; color:var(--cream);}\n.section-head p{max-width:420px; color:#a5a297; font-size:19px; line-height:1.6;}\n\n\/* ===== PROCESS ===== *\/\n.process{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:#1c1c1c;}\n@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr);}}\n@media(max-width:520px){.process{grid-template-columns:1fr;}}\n.proc-cell{\n background:var(--black); padding:30px 24px; min-height:220px;\n display:flex; flex-direction:column; justify-content:space-between;\n border-top:3px solid var(--pc);\n}\n.proc-num{font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--pc);}\n.proc-cell h3{font-size:21px; font-weight:800; margin:18px 0 8px; color:var(--cream);}\n.proc-cell p{font-size:17px; color:#a5a297; line-height:1.55;}\n\n\/* ===== FEATURE STRIP ===== *\/\n.feat-row{\n display:grid; grid-template-columns:1fr 2fr; gap:36px;\n padding:32px 0; border-bottom:1px solid #1c1c1c; align-items:baseline;\n border-left:4px solid var(--fc); padding-left:20px;\n}\n.feat-row:first-child{border-top:1px solid #1c1c1c;}\n@media(max-width:700px){.feat-row{grid-template-columns:1fr;}}\n.feat-tag{font-size:18px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fc);}\n.feat-row h3{font-size:24px; font-weight:800; margin-bottom:8px; color:var(--cream);}\n.feat-row p{color:#c7c4b8; font-size:18px; line-height:1.6; max-width:56ch;}\n\n\/* ===== STATS ===== *\/\n.stats{display:flex; flex-wrap:wrap; border-top:1px solid #1c1c1c; border-bottom:1px solid #1c1c1c;}\n.stat{flex:1; min-width:150px; padding:34px 28px; border-right:1px solid #1c1c1c;}\n.stat:last-child{border-right:none;}\n.stat b{font-size:40px; font-weight:800; display:block; color:var(--sc);}\n.stat span{font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#a5a297;}\n\n\/* ===== CTA ===== *\/\n.cta{background:var(--blue); color:var(--cream); text-align:center; padding:130px 0 110px;}\n.cta h2{font-weight:800; font-size:clamp(32px,6vw,68px); line-height:1.04; max-width:16ch; margin:0 auto 22px;}\n.cta h2 em{font-style:normal; color:var(--yellow);}\n.cta p{color:#d7dcf9; font-size:19px; margin-bottom:38px;}\n.btn{\n display:inline-flex; align-items:center; gap:10px;\n font-size:18px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;\n background:var(--yellow); color:var(--black); padding:17px 32px; border-radius:3px;\n text-decoration:none; transition:.25s;\n}\n.btn:hover{transform:translateY(-3px);}\n\n\/* ===== FOOTER ===== *\/\nfooter{border-top:1px solid #1c1c1c; padding:44px 0;}\n.foot-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; font-size:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#a5a297;}\n.foot-mark{font-size:18px; font-weight:800; color:var(--cream); text-transform:none; letter-spacing:0;}\n\n<\/style>\n<\/head>\n<body>\n\n<section class=\"hero\">\n <div class=\"hero-blob blob1\"><\/div>\n <div class=\"hero-blob blob2\"><\/div>\n <div class=\"wrap hero-inner\">\n <span class=\"eyebrow\"><span class=\"dot\" style=\"background:var(--orange)\"><\/span>Case Study \u2014 Product Design \/ 2026<\/span>\n <h1>Teams don't need <span class=\"c1\">more tools.<\/span> They need one that <span class=\"c2\">talks back<\/span> and <span class=\"c3\">stays out of the way.<\/span><\/h1>\n\n <div class=\"hero-sub\">\n <p>SyncWork replaces the six tabs your team keeps open with <b>one workspace that plans, tracks, messages, and reports on its own.<\/b> Built for teams who'd rather ship than manage the tool meant to help them ship.<\/p>\n <div class=\"meta-row\">\n <div><b>Client<\/b>SyncWork<\/div>\n <div><b>Discipline<\/b>Product, UI\/UX<\/div>\n <div><b>Platform<\/b>iOS \u00b7 Web<\/div>\n <div><b>Status<\/b>Available now<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"marquee\">\n <div class=\"marquee-track\">\n <span><span class=\"dot\" style=\"background:var(--orange)\"><\/span>PLAN<\/span>\n <span><span class=\"dot\" style=\"background:var(--sky)\"><\/span>TRACK<\/span>\n <span><span class=\"dot\" style=\"background:var(--yellow)\"><\/span>REVIEW<\/span>\n <span><span class=\"dot\" style=\"background:var(--red)\"><\/span>SHIP<\/span>\n <span><span class=\"dot\" style=\"background:var(--blue)\"><\/span>REPEAT<\/span>\n <span><span class=\"dot\" style=\"background:var(--orange)\"><\/span>PLAN<\/span>\n <span><span class=\"dot\" style=\"background:var(--sky)\"><\/span>TRACK<\/span>\n <span><span class=\"dot\" style=\"background:var(--yellow)\"><\/span>REVIEW<\/span>\n <span><span class=\"dot\" style=\"background:var(--red)\"><\/span>SHIP<\/span>\n <span><span class=\"dot\" style=\"background:var(--blue)\"><\/span>REPEAT<\/span>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"gallery\" id=\"gallery\">\n <div class=\"wrap\">\n <div class=\"section-head\">\n <h2>Inside the workspace, in small pieces.<\/h2>\n <p>A few screens from SyncWork, adrift \u2014 every panel, chart, and status card the team actually uses day to day. Drag them around.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"float-field\" id=\"floatField\">\n <div class=\"float-item\" style=\"--t:10%; --l:5%; --rot:-5deg; --delay:0s; --dur:6.5s;\">\n <img decoding=\"async\" src=\"https:\/\/mostros.co\/wp-content\/uploads\/2026\/02\/Group-3-scaled.png\" alt=\"SyncWork interface detail\" draggable=\"false\" title=\"\">\n <\/div>\n <div class=\"float-item\" style=\"--t:46%; --l:19%; --rot:5deg; --delay:1.1s; --dur:7.2s;\">\n <img decoding=\"async\" src=\"https:\/\/mostros.co\/wp-content\/uploads\/2026\/02\/Group-1-scaled.png\" alt=\"SyncWork interface detail\" draggable=\"false\" title=\"\">\n <\/div>\n <div class=\"float-item\" style=\"--t:8%; --l:35%; --rot:-4deg; --delay:.4s; --dur:5.8s;\">\n <img decoding=\"async\" src=\"https:\/\/mostros.co\/wp-content\/uploads\/2026\/02\/Group-2-scaled.png\" alt=\"SyncWork interface detail\" draggable=\"false\" title=\"\">\n <\/div>\n <div class=\"float-item\" style=\"--t:46%; --l:49%; --rot:4deg; --delay:.7s; --dur:6.2s;\">\n <img decoding=\"async\" src=\"https:\/\/mostros.co\/wp-content\/uploads\/2026\/02\/Group-4-scaled.png\" alt=\"SyncWork interface detail\" draggable=\"false\" title=\"\">\n <\/div>\n <div class=\"float-item\" style=\"--t:8%; --l:65%; --rot:-5deg; --delay:1s; --dur:6.9s;\">\n <img decoding=\"async\" src=\"https:\/\/mostros.co\/wp-content\/uploads\/2026\/02\/Group-5-scaled.png\" alt=\"SyncWork interface detail\" draggable=\"false\" title=\"\">\n <\/div>\n <div class=\"float-item\" style=\"--t:46%; --l:80%; --rot:5deg; --delay:1.9s; --dur:6.1s;\">\n <img decoding=\"async\" src=\"https:\/\/mostros.co\/wp-content\/uploads\/2026\/02\/Group-6-scaled.png\" alt=\"SyncWork interface detail\" draggable=\"false\" title=\"\">\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"process\">\n <div class=\"wrap\">\n <div class=\"section-head\">\n <h2>One workspace. Five moves.<\/h2>\n <p>The actual sequence a task moves through inside SyncWork \u2014 from idea to shipped, without leaving the app.<\/p>\n <\/div>\n\n <div class=\"process\">\n <div class=\"proc-cell\" style=\"--pc:var(--orange)\">\n <span class=\"proc-num\">01 \u00b7 Plan<\/span>\n <div>\n <h3>Turn goals into tasks<\/h3>\n <p>Describe the outcome. SyncWork breaks it into an ordered, assignable task list in seconds.<\/p>\n <\/div>\n <\/div>\n <div class=\"proc-cell\" style=\"--pc:var(--sky)\">\n <span class=\"proc-num\">02 \u00b7 Track<\/span>\n <div>\n <h3>Watch it move<\/h3>\n <p>Every status change updates one shared timeline \u2014 no separate spreadsheet to reconcile.<\/p>\n <\/div>\n <\/div>\n <div class=\"proc-cell\" style=\"--pc:var(--yellow)\">\n <span class=\"proc-num\">03 \u00b7 Discuss<\/span>\n <div>\n <h3>Message where the work lives<\/h3>\n <p>Send a note straight to a project or task \u2014 no hunting through a separate chat app to find the thread.<\/p>\n <\/div>\n <\/div>\n <div class=\"proc-cell\" style=\"--pc:var(--red)\">\n <span class=\"proc-num\">04 \u00b7 Review<\/span>\n <div>\n <h3>Approve in context<\/h3>\n <p>Comment, mark up, and sign off on work without switching to a fourth tool to do it.<\/p>\n <\/div>\n <\/div>\n <div class=\"proc-cell\" style=\"--pc:var(--blue)\">\n <span class=\"proc-num\">05 \u00b7 Ship<\/span>\n <div>\n <h3>Close the loop<\/h3>\n <p>Completed work rolls straight into a report \u2014 the update writes itself.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section>\n <div class=\"wrap\">\n <div class=\"section-head\">\n <h2>Built for how teams actually work.<\/h2>\n <p>Six things SyncWork does differently from the project tool you're using now.<\/p>\n <\/div>\n\n <div class=\"feat-strip\">\n <div class=\"feat-row\" style=\"--fc:var(--orange)\">\n <span class=\"feat-tag\">Planning<\/span>\n <div><h3>Plans that write their own tasks<\/h3><p>Set a goal in plain language. SyncWork proposes the task breakdown, owners, and rough timeline \u2014 you edit, not draft from scratch.<\/p><\/div>\n <\/div>\n <div class=\"feat-row\" style=\"--fc:var(--red)\">\n <span class=\"feat-tag\">Messaging<\/span>\n <div><h3>Every conversation, attached to the work<\/h3><p>Send messages tied to a specific project or task, so questions and decisions stay next to the thing they're about instead of scattered across a separate chat app.<\/p><\/div>\n <\/div>\n <div class=\"feat-row\" style=\"--fc:var(--sky)\">\n <span class=\"feat-tag\">Daily focus<\/span>\n <div><h3>Today's tasks, one glance away<\/h3><p>Open SyncWork and see exactly what's due today across every project you're on \u2014 no digging through boards to find it.<\/p><\/div>\n <\/div>\n <div class=\"feat-row\" style=\"--fc:var(--sky)\">\n <span class=\"feat-tag\">Collaboration<\/span>\n <div><h3>Review without losing context<\/h3><p>Approvals, comments, and revisions live on the task itself, so nothing important gets buried in a separate thread.<\/p><\/div>\n <\/div>\n <div class=\"feat-row\" style=\"--fc:var(--yellow)\">\n <span class=\"feat-tag\">Analytics<\/span>\n <div><h3>On-time progress, per project<\/h3><p>See what percentage of each project's work is complete and on schedule, updated the moment status changes \u2014 not the moment someone remembers to report it.<\/p><\/div>\n <\/div>\n <div class=\"feat-row\" style=\"--fc:var(--red)\">\n <span class=\"feat-tag\">Control<\/span>\n <div><h3>Roles that match how you're organized<\/h3><p>Permissions, workflows, and visibility are set per team, not forced into one rigid structure for the whole company.<\/p><\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section id=\"stats\">\n <div class=\"wrap\">\n <div class=\"section-head\">\n <h2>Numbers, not promises.<\/h2>\n <p>Averages reported by teams six weeks after switching to SyncWork.<\/p>\n <\/div>\n <div class=\"stats\">\n <div class=\"stat\" style=\"--sc:var(--orange)\"><b>4.2 hrs<\/b><span>Saved per person, weekly<\/span><\/div>\n <div class=\"stat\" style=\"--sc:var(--sky)\"><b>62%<\/b><span>Fewer status meetings<\/span><\/div>\n <div class=\"stat\" style=\"--sc:var(--yellow)\"><b>9 \u2192 1<\/b><span>Tools replaced<\/span><\/div>\n <div class=\"stat\" style=\"--sc:var(--red)\"><b>11 days<\/b><span>To full team adoption<\/span><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<section class=\"cta\" id=\"start\">\n <div class=\"wrap\">\n <span class=\"eyebrow\" style=\"justify-content:center; color:#d7dcf9\"><span class=\"dot\" style=\"background:var(--yellow)\"><\/span>Ready when you are<\/span>\n <h2 style=\"margin-top:20px\">Give your team back <em>the hours<\/em> the tools were taking.<\/h2>\n <p>Free for teams up to 10. No credit card, no onboarding call required.<\/p>\n <a class=\"btn\" href=\"#\">Start with SyncWork \u2192<\/a>\n <\/div>\n<\/section>\n\n<footer>\n <div class=\"wrap foot-row\">\n <div class=\"foot-mark\">sync.work<\/div>\n <div>Product design case study \u2014 2026<\/div>\n <div>Built in collaboration with Mostros<\/div>\n <\/div>\n<\/footer>\n\n<script>\n(function(){\n var field = document.getElementById('floatField');\n if(!field) return;\n var items = field.querySelectorAll('.float-item');\n var mq = window.matchMedia('(max-width:900px)');\n\n \/\/ Only run the infinite floaty keyframe animation on items that\n \/\/ are actually visible in the viewport, to keep scroll compositing cheap.\n \/\/ (No-op on mobile since the grid layout disables the animation via CSS.)\n if('IntersectionObserver' in window){\n var io = new IntersectionObserver(function(entries){\n entries.forEach(function(entry){\n entry.target.style.animationPlayState = entry.isIntersecting ? 'running' : 'paused';\n });\n }, { root:null, threshold:0.05 });\n items.forEach(function(el){ io.observe(el); });\n } else {\n items.forEach(function(el){ el.style.animationPlayState = 'running'; });\n }\n\n items.forEach(function(el){\n var dragging = false;\n var startX = 0, startY = 0, origLeft = 0, origTop = 0;\n\n function toPx(){\n var rect = el.getBoundingClientRect();\n var parentRect = field.getBoundingClientRect();\n var left = rect.left - parentRect.left;\n var top = rect.top - parentRect.top;\n el.style.left = left + 'px';\n el.style.top = top + 'px';\n return { left: left, top: top };\n }\n\n el.addEventListener('pointerdown', function(e){\n \/\/ Dragging is a desktop-only interaction; on mobile the images\n \/\/ sit in a static organized grid and aren't draggable.\n if(mq.matches) return;\n dragging = true;\n el.classList.add('dragging');\n el.setPointerCapture(e.pointerId);\n var pos = toPx();\n origLeft = pos.left;\n origTop = pos.top;\n startX = e.clientX;\n startY = e.clientY;\n });\n\n el.addEventListener('pointermove', function(e){\n if(!dragging) return;\n var dx = e.clientX - startX;\n var dy = e.clientY - startY;\n var fieldRect = field.getBoundingClientRect();\n var elW = el.offsetWidth;\n var elH = el.offsetHeight;\n var maxLeft = Math.max(0, fieldRect.width - elW);\n var maxTop = Math.max(0, fieldRect.height - elH);\n var newLeft = Math.min(Math.max(origLeft + dx, 0), maxLeft);\n var newTop = Math.min(Math.max(origTop + dy, 0), maxTop);\n el.style.left = newLeft + 'px';\n el.style.top = newTop + 'px';\n });\n\n function stop(e){\n if(!dragging) return;\n dragging = false;\n el.classList.remove('dragging');\n }\n\n el.addEventListener('pointerup', stop);\n el.addEventListener('pointercancel', stop);\n window.addEventListener('resize', function(){\n if(mq.matches) return; \/\/ grid layout on mobile, nothing to clamp\n var fieldRect = field.getBoundingClientRect();\n var elW = el.offsetWidth;\n var elH = el.offsetHeight;\n var maxLeft = Math.max(0, fieldRect.width - elW);\n var maxTop = Math.max(0, fieldRect.height - elH);\n var pos = toPx();\n el.style.left = Math.min(pos.left, maxLeft) + 'px';\n el.style.top = Math.min(pos.top, maxTop) + 'px';\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>","protected":false},"excerpt":{"rendered":"<p>SyncWork \u2014 Case Study Case Study \u2014 Product Design \/ 2026 Teams don’t need more tools. They need one that talks back and stays out of the way. SyncWork replaces the six tabs your team keeps open with one workspace that plans, tracks, messages, and reports on its own. Built for teams who’d rather ship […]<\/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-9264","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/comments?post=9264"}],"version-history":[{"count":61,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9264\/revisions"}],"predecessor-version":[{"id":9328,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9264\/revisions\/9328"}],"wp:attachment":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/media?parent=9264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}