{"id":9727,"date":"2026-10-09T04:48:26","date_gmt":"2026-10-09T04:48:26","guid":{"rendered":"https:\/\/mostros.co\/?page_id=9727"},"modified":"2026-10-09T04:50:20","modified_gmt":"2026-10-09T04:50:20","slug":"creative-technology","status":"publish","type":"page","link":"https:\/\/mostros.co\/es\/creative-technology\/","title":{"rendered":"Creative Technology"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\nMOSTROS \u2014 Creative Technology<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;700;800&family=Cormorant:ital,wght@1,500;1,700&display=swap\" rel=\"stylesheet\">\n<style>\nhtml,body{margin:0;width:100%;background:#000}\n.ws{--mars:#E8532A;--sand:#E7E4BB;--razz:#E84951;--cloud:#97DDFA;--sun:#F9E771;--blue:#2C4DE9;--ink:#fff;--mute:#a9a79b;--line:#262626;--card:#101010;\nposition:relative;overflow:hidden;background:#000;color:var(--ink);font:500 16px\/1.65 Montserrat,Helvetica,Arial,sans-serif}\n.ws *{box-sizing:border-box;margin:0}.ws a{color:inherit;text-decoration:none}\n.ws h1,.ws h2,.ws h3{font-weight:800;text-transform:uppercase;line-height:1.02;letter-spacing:-.015em}\n.ws h1{font-size:clamp(40px,7.4vw,112px)}.ws h2{font-size:clamp(30px,5.2vw,76px)}.ws h3{font-size:19px;letter-spacing:0;line-height:1.15}\n.ws em{font-family:Cormorant,Georgia,serif;font-style:italic;font-weight:700;text-transform:none;letter-spacing:0;font-size:1.12em;color:var(--mars)}\n.ws .mk{display:inline-block;font-weight:800;font-style:normal;margin:0 .14em;line-height:1;animation:ws-mk 3s ease-in-out infinite}\n@keyframes ws-mk{50%{transform:translateY(-.08em) rotate(8deg)}}\n.ws .wrap{width:100%;padding:clamp(64px,9vw,130px) 4vw;position:relative;z-index:1}\n.ws .lb{font:700 12px\/1 Montserrat,sans-serif;letter-spacing:.3em;text-transform:uppercase}\n.ws .tag{display:inline-flex;gap:12px;align-items:center;color:var(--sun);margin-bottom:28px}\n.ws .tag:before{content:\"\";width:12px;height:12px;border-radius:50%;background:var(--mars);box-shadow:8px 0 0 -2px var(--blue);margin-right:8px;animation:ws-bl 1.6s infinite}\n@keyframes ws-bl{50%{opacity:.3}}\n.ws .lead{max-width:540px;color:#d6d4c6;font-size:19px;margin-top:28px;font-weight:400}\n.ws .btn{display:inline-block;margin-top:38px;padding:19px 34px;background:var(--mars);color:#000;border-radius:99px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .25s}\n.ws .btn:hover{transform:scale(1.06) rotate(-1.5deg);background:var(--sun)}.ws .btn:active{transform:scale(.97)}\n.ws .rv{opacity:0;transform:translateY(36px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1)}\n.ws .rv.in{opacity:1;transform:none}\n.ws .rv:nth-child(2){transition-delay:.1s}.ws .rv:nth-child(3){transition-delay:.2s}.ws .rv:nth-child(4){transition-delay:.3s}\n@media(prefers-reduced-motion:reduce){.ws *{animation:none!important;transition:none!important}.ws .rv{opacity:1;transform:none}}\n\/* HERO with grid + cursor spotlight *\/\n.ws .hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;\nbackground-image:linear-gradient(#1c1c1c 1px,transparent 1px),linear-gradient(90deg,#1c1c1c 1px,transparent 1px),radial-gradient(ellipse 55% 60% at 88% 25%,#3a1a0c 0,transparent 70%),radial-gradient(ellipse 40% 40% at 5% 100%,#101a4d 0,transparent 70%);\nbackground-size:48px 48px,48px 48px,auto,auto;animation:ws-grid 20s linear infinite}\n@keyframes ws-grid{to{background-position:48px 48px,48px 48px,0 0,0 0}}\n.ws .hero:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle 280px at var(--x,70%) var(--y,40%),#E8532A33,#2C4DE91a 50%,transparent);pointer-events:none;z-index:0}\n.ws .hero .wrap{display:grid;gap:56px;grid-template-columns:1.15fr .85fr;align-items:center}\n@media(max-width:900px){.ws .hero .wrap{grid-template-columns:1fr}}\n.ws .ln{display:block;overflow:hidden;padding-bottom:.08em}\n.ws .ln>span{display:inline-block;transform:translateY(115%);animation:ws-up .9s cubic-bezier(.2,.8,.2,1) forwards}\n.ws .ln:nth-child(2)>span{animation-delay:.12s}.ws .ln:nth-child(3)>span{animation-delay:.24s}\n@keyframes ws-up{to{transform:none}}\n.ws .fade{opacity:0;animation:ws-fade .8s forwards}@keyframes ws-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}\n.ws .bub{position:absolute;border-radius:50%;pointer-events:none;z-index:0}\n.ws .bb1{width:110px;height:110px;background:var(--blue);right:7%;top:12%;animation:ws-fl 8s ease-in-out infinite}\n.ws .bb2{width:64px;height:64px;background:var(--sun);right:24%;top:20%;animation:ws-fl 6s -2s ease-in-out infinite reverse}\n.ws .bb3{width:90px;height:90px;border:4px solid var(--razz);right:4%;bottom:10%;animation:ws-fl 9s -4s ease-in-out infinite}\n@keyframes ws-fl{50%{transform:translate(-22px,34px) scale(1.12)}}\n\/* terminal *\/\n.ws .term{background:#0b0b0b;border:2px solid var(--sand);border-radius:22px;padding:0;margin-top:44px;max-width:560px;box-shadow:0 0 0 10px #ffffff0a;overflow:hidden}\n.ws .term .bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line)}\n.ws .term .bar i{width:11px;height:11px;border-radius:50%}.ws .term .bar i:nth-child(1){background:var(--mars)}.ws .term .bar i:nth-child(2){background:var(--sun)}.ws .term .bar i:nth-child(3){background:var(--cloud)}\n.ws .term pre{font:500 13px\/1.9 ui-monospace,Menlo,Consolas,monospace;color:var(--cloud);padding:18px 22px 22px;min-height:170px;white-space:pre-wrap}\n.ws .term pre .p{color:var(--sun)}.ws .term pre .o{color:var(--mute)}.ws .term pre .in{color:var(--razz);font-weight:700}\n.ws .term pre:after{content:\"\u258b\";color:var(--mars);animation:ws-bl 1s infinite}\n\/* orbit *\/\n.ws .orb{position:relative;z-index:1;aspect-ratio:1;width:min(440px,100%);margin:auto}\n.ws .orb .core{position:absolute;inset:34%;border-radius:50%;background:var(--mars);display:grid;place-items:center;animation:ws-pulse 3s ease-in-out infinite;box-shadow:0 0 70px #E8532A88}\n.ws .orb .core b{font:800 12px\/1 Montserrat,sans-serif;letter-spacing:.2em;color:#000;text-transform:uppercase}\n@keyframes ws-pulse{50%{transform:scale(1.1)}}\n.ws .ring{position:absolute;border:2px dashed #3a3a3a;border-radius:50%;animation:ws-spin linear infinite}\n.ws .ring i{position:absolute;border-radius:50%;top:-14px;left:50%;margin-left:-14px;width:28px;height:28px}\n.ws .r1{inset:14%;animation-duration:12s}.ws .r1 i{background:var(--sun)}\n.ws .r2{inset:2%;animation-duration:20s;animation-direction:reverse}.ws .r2 i{background:var(--cloud);width:38px;height:38px;margin-left:-19px;top:-19px}\n.ws .r3{inset:-12%;animation-duration:30s}.ws .r3 i{background:var(--blue);width:22px;height:22px;margin-left:-11px;top:-11px;box-shadow:0 0 0 0 transparent}\n.ws .r3 i+i{top:auto;bottom:-14px;background:transparent;border:3px solid var(--razz)}\n@keyframes ws-spin{to{transform:rotate(360deg)}}\n.ws .pop{position:absolute;right:0;top:4%;background:var(--razz);color:#fff;padding:12px 18px;border-radius:26px 26px 6px 26px;z-index:3;animation:ws-pop 4s infinite;font-weight:800;font-size:18px}\n@keyframes ws-pop{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-3deg) scale(1.08)}}\n\/* marquee *\/\n.ws .mq{background:var(--sun);color:#000;overflow:hidden;white-space:nowrap;padding:22px 0;transform:rotate(1.2deg);margin:30px -2vw}\n.ws .mq div{display:inline-block;animation:ws-mq 26s linear infinite;font:800 clamp(22px,3.4vw,44px)\/1 Montserrat,sans-serif;text-transform:uppercase}\n.ws .mq span{margin:0 .6em}.ws .mq b{color:var(--mars)}\n@keyframes ws-mq{to{transform:translateX(-50%)}}\n\/* services *\/\n.ws .sand{background:var(--sand);color:#000}.ws .sand em{color:var(--razz)}\n.ws .grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:56px}\n.ws .card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:26px;padding:30px;transition:transform .3s,border-color .3s}\n.ws .card:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--c)}\n.ws .card i{display:block;width:44px;height:44px;border-radius:50%;background:var(--c);margin-bottom:22px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}\n.ws .card:hover i{transform:scale(1.5) translate(8px,8px)}\n.ws .card .lb{color:var(--c);display:block;margin-bottom:12px}\n.ws .card p{color:var(--mute);margin-top:10px;font-size:15px;font-weight:400}\n\/* playground *\/\n.ws .lab{position:relative;margin-top:56px;height:clamp(300px,48vw,480px);border:2px solid var(--sand);border-radius:34px;background:#0b0b0b;overflow:hidden;cursor:crosshair;box-shadow:0 0 0 10px #ffffff0a;touch-action:none}\n.ws .lab .hint{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--mute);pointer-events:none}\n.ws .lab .dot{position:absolute;left:0;top:0;border-radius:50%;will-change:transform;pointer-events:none}\n.ws .cta{text-align:center;position:relative;background:radial-gradient(ellipse 50% 70% at 50% 100%,#3a1a0c 0,transparent 70%),#000;overflow:hidden}\n.ws .cta h2{max-width:980px;margin:auto}\n.ws footer{padding:36px 4vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--mute);font-size:12px;letter-spacing:.14em;text-transform:uppercase}\n\n\/* WIZARD *\/\n.wb{--ink:#fff;--mute:#a9a79b;--line:#2a2a2a;--mars:#E8532A;--sun:#F9E771;position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:16px;font:500 16px\/1.6 Montserrat,Helvetica,Arial,sans-serif;color:var(--ink)}\n.wb[hidden]{display:none}.wb *{box-sizing:border-box;margin:0}\n.wb-bg{position:absolute;inset:0;background:#000000d9;backdrop-filter:blur(6px);animation:wb-f .3s}\n.wb-box{position:relative;width:min(660px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#0b0b0b;border:1px solid var(--line);border-radius:26px;padding:clamp(24px,5vw,44px);background-image:radial-gradient(ellipse 70% 50% at 85% 0,#3a1a0c 0,transparent 70%);animation:wb-in .45s cubic-bezier(.2,.9,.2,1)}\n@keyframes wb-f{from{opacity:0}}@keyframes wb-in{from{opacity:0;transform:translateY(24px) scale(.96)}}\n.wb-x{position:absolute;right:14px;top:10px;background:none;border:0;color:var(--mute);font-size:32px;line-height:1;cursor:pointer;padding:6px 10px}.wb-x:hover{color:var(--sun)}\n.wb-prog{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-right:40px}.wb-prog i{display:block;height:100%;width:0;background:var(--mars);border-radius:99px;transition:width .5s}\n.wb-hd{margin-top:20px;font:700 12px\/1 Montserrat,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--sun)}\n.wb h2{font:800 clamp(24px,4.2vw,36px)\/1.05 Montserrat,sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin-top:14px}\n.wb .hint{color:var(--mute);font-size:15px;margin-top:8px;font-weight:400}\n.wb .st{animation:wb-s .35s cubic-bezier(.2,.8,.2,1)}@keyframes wb-s{from{opacity:0;transform:translateX(24px)}}.wb .st.back{animation-name:wb-sb}@keyframes wb-sb{from{opacity:0;transform:translateX(-24px)}}\n.wb .lb{display:block;margin:24px 0 10px;font:700 11px\/1 Montserrat,sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--mute)}\n.wb .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}\n.wb .chip{font:600 14px\/1 Montserrat,sans-serif;color:var(--ink);background:transparent;border:2px solid #3a3a3a;border-radius:99px;padding:12px 18px;cursor:pointer;transition:.2s}\n.wb .chip:hover{border-color:var(--sun)}.wb .chip[aria-pressed=true]{background:var(--mars);border-color:var(--mars);color:#000;transform:scale(1.04)}\n.wb input,.wb textarea{width:100%;background:#050505;border:2px solid #3a3a3a;border-radius:16px;color:var(--ink);font:500 16px\/1.4 Montserrat,sans-serif;padding:14px 16px}\n.wb textarea{min-height:110px;resize:vertical}.wb input:focus,.wb textarea:focus{outline:0;border-color:var(--sun)}\n.wb .two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}@media(max-width:520px){.wb .two{grid-template-columns:1fr}}\n.wb-err{min-height:22px;margin-top:14px;color:#ff8a8f;font-size:14px}\n.wb-nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px}\n.wb-back{background:none;border:0;color:var(--mute);font:700 12px\/1 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:14px 4px}.wb-back:hover{color:#fff}\n.wb-pill{background:var(--mars);border:0;color:#000;border-radius:99px;padding:16px 28px;font:800 13px\/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.25s cubic-bezier(.3,1.6,.5,1)}\n.wb-pill:hover{background:var(--sun);transform:scale(1.05)}.wb-pill:disabled{opacity:.5}\n.wb-done{text-align:center;padding:24px 0 6px}.wb-done[hidden]{display:none}\n.wb-done svg{width:84px;height:84px}.wb-done circle,.wb-done path{fill:none;stroke:var(--sun);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220;animation:wb-d .9s .1s forwards}.wb-done path{animation-delay:.6s;animation-duration:.5s}\n@keyframes wb-d{to{stroke-dashoffset:0}}\n.wb-done p{color:var(--mute);margin-top:12px}.wb-done .wb-pill{margin-top:26px}\n.wb :focus-visible{outline:3px solid var(--sun);outline-offset:3px}\n@media(prefers-reduced-motion:reduce){.wb *{animation:none!important;transition:none!important}}\n<\/style><\/head><body>\n<div class=\"ws\">\n\n<!-- 01 \u00b7 HERO -->\n<header class=\"hero\" id=\"hero\"><i class=\"bub bb1\"><\/i><i class=\"bub bb2\"><\/i><i class=\"bub bb3\"><\/i><div class=\"wrap\">\n <div>\n <div class=\"tag lb fade\" style=\"animation-delay:.1s\">Creative Technology<\/div>\n <h1><span class=\"ln\"><span><span class=\"mk\" style=\"color:var(--sun)\">+<\/span>Beyond<\/span><\/span><span class=\"ln\"><span>the <em>screen.<\/em><\/span><\/span><span class=\"ln\"><span>Into the room.<span class=\"mk\" style=\"color:var(--razz)\">[<\/span><\/span><\/span><\/h1>\n <p class=\"lead fade\" style=\"animation-delay:.7s\">Interactive experiences and custom digital solutions: installations, experimental web, iOS apps and 3D games.<\/p>\n <a class=\"btn lb fade\" style=\"animation-delay:.9s\" href=\"#brief\" data-ws-open role=\"button\">Prototype it \u2192<\/a>\n <div class=\"term fade\" style=\"animation-delay:1.1s\" aria-hidden=\"true\"><div class=\"bar\"><i><\/i><i><\/i><i><\/i><\/div><pre id=\"term\"><\/pre><\/div>\n <\/div>\n <div class=\"orb fade\" style=\"animation-delay:.5s\" aria-hidden=\"true\">\n <div class=\"pop\">Live!<\/div>\n <div class=\"ring r3\"><i><\/i><i><\/i><\/div><div class=\"ring r2\"><i><\/i><\/div><div class=\"ring r1\"><i><\/i><\/div>\n <div class=\"core\"><b>Mostros<\/b><\/div>\n <\/div>\n<\/div><\/header>\n\n<!-- MARQUEE -->\n<div class=\"mq\" aria-hidden=\"true\"><div>\n <span>Installations<\/span><b>+<\/b><span>WebGL<\/span><b>[<\/b><span>3D & Games<\/span><b>+<\/b><span>Sensors<\/span><b>[<\/b><span>AI<\/span><b>+<\/b><span>Generative<\/span><b>[<\/b>\n <span>Installations<\/span><b>+<\/b><span>WebGL<\/span><b>[<\/b><span>3D & Games<\/span><b>+<\/b><span>Sensors<\/span><b>[<\/b><span>AI<\/span><b>+<\/b><span>Generative<\/span><b>[<\/b>\n<\/div><\/div>\n\n<!-- 02 \u00b7 SERVICES -->\n<section class=\"sand\"><div class=\"wrap\">\n <div class=\"tag lb rv\" style=\"color:#000\">What we build<\/div>\n <h2 class=\"rv\"><span class=\"mk\" style=\"color:var(--mars)\">+<\/span>Built where <em>comfort<\/em> ends.<span class=\"mk\" style=\"color:var(--blue)\">[<\/span><\/h2>\n <div class=\"grid\">\n <div class=\"card rv\" style=\"--c:var(--mars)\"><i><\/i><span class=\"lb\">Installations<\/span><h3>Spaces that listen<\/h3><p>Physical and digital spaces that respond to people.<\/p><\/div>\n <div class=\"card rv\" style=\"--c:var(--blue)\"><i><\/i><span class=\"lb\">3D & games<\/span><h3>Worlds in real time<\/h3><p>Real-time worlds and playful interactive stories.<\/p><\/div>\n <div class=\"card rv\" style=\"--c:var(--razz)\"><i><\/i><span class=\"lb\">Experimental web<\/span><h3>Web, unlocked<\/h3><p>WebGL, generative visuals and immersive editorial.<\/p><\/div>\n <div class=\"card rv\" style=\"--c:var(--sun)\"><i><\/i><span class=\"lb\">Custom tech<\/span><h3>One-off solutions<\/h3><p>Hardware, APIs and AI stitched into one-off solutions.<\/p><\/div>\n <\/div>\n<\/div><\/section>\n\n<!-- 03 \u00b7 PLAYGROUND -->\n<section><div class=\"wrap\">\n <div class=\"tag lb rv\">The lab<\/div>\n <h2 class=\"rv\">Don't read it. <em>Touch it.<\/em><span class=\"mk\" style=\"color:var(--cloud)\">[<\/span><\/h2>\n <div class=\"lab rv\" id=\"lab\" aria-label=\"Interactive playground: move your cursor\"><div class=\"hint lb\">Move your cursor \u00b7 Click to burst<\/div><\/div>\n<\/div><\/section>\n\n<!-- 04 \u00b7 CTA -->\n<section class=\"cta\"><i class=\"bub bb1\" style=\"right:8%;top:14%\"><\/i><i class=\"bub bb3\" style=\"left:6%;right:auto;bottom:18%\"><\/i><div class=\"wrap\">\n <div class=\"tag lb rv\">Next experiment<\/div>\n <h2 class=\"rv\"><span class=\"mk\" style=\"color:var(--sun)\">+<\/span>Weird idea? <em>Perfect.<\/em><span class=\"mk\" style=\"color:var(--razz)\">[<\/span><\/h2>\n <a class=\"btn lb rv\" href=\"#brief\" data-ws-open role=\"button\">Prototype it \u2192<\/a>\n<\/div><\/section>\n\n<footer><span>MOSTROS \u00b7 Creative studio \u00b7 Made in Colombia<\/span><span>Info@mostros.co \u00b7 +1 908 936 9150<\/span><\/footer>\n<\/div>\n\n<script>\n\/* page animations: spotlight, typed terminal, reveal, playground *\/\n(function(){\nvar hero=document.getElementById(\"hero\");\nhero.addEventListener(\"pointermove\",function(e){var r=hero.getBoundingClientRect();hero.style.setProperty(\"--x\",e.clientX-r.left+\"px\");hero.style.setProperty(\"--y\",e.clientY-r.top+\"px\")});\n\/* typed terminal *\/\nvar T=document.getElementById(\"term\"),L=[\n '<span class=\"p\">$<\/span> mostros build --experience',\n '<span class=\"o\">\u2192<\/span> sensors connected',\n '<span class=\"o\">\u2192<\/span> 3D scene rendered',\n '<span class=\"o\">\u2192<\/span> audience: <span class=\"in\">inside<\/span>'],li=0,ci=0,out=\"\";\nfunction strip(s){return s.replace(\/<[^>]+>\/g,\"\")}\nfunction tick(){\n if(li>=L.length){setTimeout(function(){li=0;ci=0;out=\"\";T.innerHTML=\"\";tick()},3200);return}\n var plain=strip(L[li]);\n if(ci<plain.length){ci++;var shown=0,h=\"\",inTag=false,src=L[li];\n for(var k=0;k<src.length&&shown<ci;k++){var c=src[k];h+=c;if(c==\"<\")inTag=true;else if(c==\">\")inTag=false;else if(!inTag)shown++}\n var open=(h.match(\/<span\/g)||[]).length-(h.match(\/<\\\/span>\/g)||[]).length;while(open-->0)h+=\"<\/span>\";\n T.innerHTML=out+h;setTimeout(tick,li?38:70)}\n else{out+=L[li]+\"\\n\";li++;ci=0;T.innerHTML=out;setTimeout(tick,420)}\n}\nsetTimeout(tick,1200);\n\/* reveal *\/\nvar els=document.querySelectorAll(\".rv\");\nif(\"IntersectionObserver\" in window){var io=new IntersectionObserver(function(es){es.forEach(function(x){if(x.isIntersecting){x.target.classList.add(\"in\");io.unobserve(x.target)}})},{threshold:.2});els.forEach(function(e){io.observe(e)})}\nelse els.forEach(function(e){e.classList.add(\"in\")});\n\/* playground: dots chase the pointer, click bursts *\/\nvar lab=document.getElementById(\"lab\"),C=[\"#E8532A\",\"#F9E771\",\"#97DDFA\",\"#E84951\",\"#2C4DE9\",\"#E7E4BB\"],D=[],mx=0,my=0,W=0,H=0;\nfunction size(){W=lab.clientWidth;H=lab.clientHeight;if(!mx){mx=W\/2;my=H\/2}}\nsize();addEventListener(\"resize\",size);\nfor(var n=0;n<14;n++){var s=14+n*5,el=document.createElement(\"i\");el.className=\"dot\";el.style.width=el.style.height=s+\"px\";\n if(n%4==3){el.style.border=\"3px solid \"+C[n%6];el.style.background=\"transparent\"}else el.style.background=C[n%6];\n lab.appendChild(el);D.push({el:el,x:W\/2,y:H\/2,s:s,k:.04+n*.012,vx:0,vy:0})}\nlab.addEventListener(\"pointermove\",function(e){var r=lab.getBoundingClientRect();mx=e.clientX-r.left;my=e.clientY-r.top});\nlab.addEventListener(\"pointerdown\",function(e){var r=lab.getBoundingClientRect(),cx=e.clientX-r.left,cy=e.clientY-r.top;\n D.forEach(function(d){var a=Math.random()*6.28,f=10+Math.random()*16;d.vx=Math.cos(a)*f;d.vy=Math.sin(a)*f;d.x=cx;d.y=cy})});\nvar vis=true;if(\"IntersectionObserver\" in window)new IntersectionObserver(function(e){vis=e[0].isIntersecting}).observe(lab);\n(function loop(){if(vis)D.forEach(function(d){d.vx*=.88;d.vy*=.88;d.x+=(mx-d.x)*d.k+d.vx;d.y+=(my-d.y)*d.k+d.vy;d.el.style.transform=\"translate(\"+(d.x-d.s\/2)+\"px,\"+(d.y-d.s\/2)+\"px)\"});requestAnimationFrame(loop)})();\n})();\n<\/script>\n<script>\n\/* brief wizard \u2014 injected once; any [data-ws-open] or a[href=\"#brief\"] opens it *\/\n(function(){\nif(window.wsBrief)return;\nvar ENDPOINT=\"https:\/\/script.google.com\/macros\/s\/AKfycbyFTH9EZASeQk4RpvzCFdVUG_usBjuwFNpjCq8dWFEQlLp4KJgV7ubegWNdRBZaHmjF\/exec\", EMAIL=\"Info@mostros.co\";\nvar STEPS=[\n {q:\"What are we prototyping?\",h:\"Pick everything that applies.\",f:[{k:\"type\",t:\"multi\",req:1,o:[\"Installation\",\"Interactive experience\",\"Experimental website\",\"3D \/ real-time scene\",\"Game\",\"AR \/ VR\",\"Hardware \/ sensors\",\"AI-powered experience\",\"Not sure yet\"]}]},\n {q:\"Where will it live?\",h:\"So we build for the right context.\",f:[{k:\"stack\",t:\"multi\",req:1,o:[\"Browser \/ web\",\"iOS \/ mobile\",\"Physical space\",\"Event \/ activation\",\"Museum \/ retail\",\"Not sure\"]}]},\n {q:\"What does it need to do?\",h:\"Select the features that matter.\",f:[{k:\"features\",t:\"multi\",o:[\"Motion \/ sensor input\",\"Camera \/ vision\",\"Real-time 3D\",\"Sound \/ audio-reactive\",\"Multiplayer\",\"Generative visuals\",\"Data \/ API\",\"Hardware build\"]},{k:\"pages\",t:\"single\",l:\"Approximate scope\",o:[\"Quick prototype\",\"One experience\",\"Full installation\",\"Ongoing platform\",\"Not sure\"]}]},\n {q:\"What do you already have?\",h:\"No problem if the answer is nothing.\",f:[{k:\"have\",t:\"multi\",o:[\"Brand identity\",\"Concept \/ idea\",\"3D assets\",\"Venue \/ space\",\"Hardware\",\"Nothing yet\"]},{k:\"notes\",t:\"area\",l:\"Tell us about the project\",p:\"The idea, the audience, references, links\u2026\"}]},\n {q:\"Time and budget\",h:\"So we can propose something realistic.\",f:[{k:\"time\",t:\"single\",l:\"When do you need it?\",o:[\"ASAP (under 6 weeks)\",\"2\u20134 months\",\"5+ months\",\"Flexible\"]},{k:\"budget\",t:\"single\",l:\"Budget range (USD)\",o:[\"Under $5k\",\"$5k \u2013 $15k\",\"$15k \u2013 $40k\",\"$40k+\",\"Not sure\"]}]},\n {q:\"Where do we reach you?\",h:\"We reply within 24 hours.\",f:[{k:\"name\",t:\"text\",req:1,l:\"Name\",c:1},{k:\"email\",t:\"email\",req:1,l:\"Email\",c:1},{k:\"company\",t:\"text\",l:\"Company \/ current site\",c:1},{k:\"phone\",t:\"text\",l:\"Phone \/ WhatsApp\",c:1}]}\n];\nvar LB={type:\"Needs\",stack:\"Where it lives\",features:\"Features\",pages:\"Scope\",have:\"Already has\",notes:\"Project notes\",time:\"Timeline\",budget:\"Budget\",name:\"Name\",email:\"Email\",company:\"Company \/ site\",phone:\"Phone\"};\nvar A={},i=0,last=null,m,box,$=function(id){return document.getElementById(id)};\nfunction build(){\n m=document.createElement('div');m.className='wb';m.hidden=true;m.setAttribute('role','dialog');m.setAttribute('aria-modal','true');m.setAttribute('aria-labelledby','wb-t');\n m.innerHTML='<div class=\"wb-bg\" data-close><\/div><div class=\"wb-box\" tabindex=\"-1\"><button class=\"wb-x\" data-close aria-label=\"Close\">\u00d7<\/button>'+\n '<div id=\"wb-wiz\"><div class=\"wb-prog\"><i id=\"wb-bar\"><\/i><\/div><div class=\"wb-hd\" id=\"wb-step\"><\/div><form id=\"wb-form\" novalidate><div id=\"wb-body\"><\/div><p class=\"wb-err\" id=\"wb-err\" role=\"alert\"><\/p>'+\n '<div class=\"wb-nav\"><button type=\"button\" class=\"wb-back\" id=\"wb-back\">\u2190 Back<\/button><button type=\"submit\" class=\"wb-pill\" id=\"wb-next\">Next \u2192<\/button><\/div><\/form><\/div>'+\n '<div class=\"wb-done\" id=\"wb-done\" hidden><svg viewBox=\"0 0 80 80\" aria-hidden=\"true\"><circle cx=\"40\" cy=\"40\" r=\"34\"\/><path d=\"M26 41l10 10 19-21\"\/><\/svg><h2>Brief received<\/h2><p id=\"wb-donetxt\">Thanks! We\\'ll review it and get back to you within 24 hours.<\/p><button type=\"button\" class=\"wb-pill\" data-close>Close<\/button><\/div><\/div>';\n document.body.appendChild(m);box=m.querySelector('.wb-box');\n $(\"wb-form\").addEventListener(\"submit\",function(e){e.preventDefault();collect();var er=check();if(er){$(\"wb-err\").textContent=er;return}if(i<STEPS.length-1){i++;render(1);box.scrollTop=0}else send()});\n $(\"wb-back\").addEventListener(\"click\",function(){collect();if(i){i--;render(-1)}});\n m.addEventListener(\"click\",function(e){var b=e.target.closest(\".chip\");\n if(b){var w=b.parentNode;if(w.dataset.t==\"single\")w.querySelectorAll(\".chip\").forEach(function(c){c.setAttribute(\"aria-pressed\",\"false\")});\n b.setAttribute(\"aria-pressed\",w.dataset.t==\"single\"?\"true\":String(b.getAttribute(\"aria-pressed\")!=\"true\"));$(\"wb-err\").textContent=\"\"}\n if(e.target.closest(\"[data-close]\"))close()});\n}\nfunction esc(s){return String(s).replace(\/&\/g,'&').replace(\/\"\/g,'"').replace(\/<\/g,'<')}\nfunction render(dir){\n var s=STEPS[i],h='<div class=\"st'+(dir<0?' back':'')+'\"><h2 id=\"wb-t\">'+s.q+'<\/h2><p class=\"hint\">'+s.h+'<\/p>',row=false;\n s.f.forEach(function(f){\n if(f.c&&!row){h+='<div class=\"two\">';row=true}\n if(f.l&&!f.c)h+='<span class=\"lb\">'+f.l+'<\/span>';\n if(f.t==\"multi\"||f.t==\"single\"){h+='<div class=\"chips\" data-k=\"'+f.k+'\" data-t=\"'+f.t+'\"'+(f.l?' style=\"margin-top:0\"':'')+'>';\n f.o.forEach(function(o){var on=f.t==\"multi\"?(A[f.k]||[]).indexOf(o)>-1:A[f.k]==o;h+='<button type=\"button\" class=\"chip\" aria-pressed=\"'+on+'\">'+o+'<\/button>'});h+='<\/div>'}\n else if(f.t==\"area\")h+='<textarea data-k=\"'+f.k+'\" placeholder=\"'+f.p+'\">'+esc(A[f.k]||'')+'<\/textarea>';\n else h+='<div><label class=\"lb\" style=\"margin-top:0\" for=\"wb-'+f.k+'\">'+f.l+(f.req?' *':'')+'<\/label><input id=\"wb-'+f.k+'\" data-k=\"'+f.k+'\" type=\"'+f.t+'\" value=\"'+esc(A[f.k]||'')+'\" autocomplete=\"'+(f.k==\"name\"?\"name\":f.k==\"email\"?\"email\":\"off\")+'\"><\/div>';\n });\n if(row)h+='<\/div>';\n $(\"wb-body\").innerHTML=h+'<\/div>';\n $(\"wb-step\").textContent=\"Step \"+(i+1)+\" \/ \"+STEPS.length;\n $(\"wb-bar\").style.width=((i+1)\/STEPS.length*100)+\"%\";\n $(\"wb-back\").style.visibility=i?\"visible\":\"hidden\";\n $(\"wb-next\").textContent=i==STEPS.length-1?\"Send brief \u2192\":\"Next \u2192\";\n $(\"wb-err\").textContent=\"\";\n}\nfunction collect(){$(\"wb-body\").querySelectorAll(\"[data-k]\").forEach(function(e){\n if(e.classList.contains(\"chips\")){var v=[].map.call(e.querySelectorAll(\"[aria-pressed=true]\"),function(b){return b.textContent});A[e.dataset.k]=e.dataset.t==\"multi\"?v:(v[0]||\"\")}\n else A[e.dataset.k]=e.value.trim()})}\nfunction check(){for(var n=0;n<STEPS[i].f.length;n++){var f=STEPS[i].f[n],v=A[f.k];\n if(f.req&&(!v||!v.length))return f.t==\"multi\"||f.t==\"single\"?\"Please choose at least one option.\":\"Please fill in \"+f.l.toLowerCase()+\".\";\n if(f.t==\"email\"&&!\/^\\S+@\\S+\\.\\S+$\/.test(v))return \"Please enter a valid email.\"}return \"\"}\nfunction summary(){return Object.keys(LB).filter(function(k){return A[k]&&A[k].length}).map(function(k){return LB[k]+\": \"+(Array.isArray(A[k])?A[k].join(\", \"):A[k])}).join(\"\\n\")}\nfunction done(msg){$(\"wb-wiz\").hidden=true;$(\"wb-done\").hidden=false;if(msg)$(\"wb-donetxt\").textContent=msg}\nfunction send(){\n var nb=$(\"wb-next\");nb.disabled=true;nb.textContent=\"Sending\u2026\";$(\"wb-err\").textContent=\"\";\n var payload=JSON.stringify(Object.assign({service:\"Creative Technology\",page:location.href,brief:summary()},A));\n function fail(){nb.disabled=false;nb.textContent=\"Send brief \u2192\";$(\"wb-err\").textContent=\"We couldn't send it. Please check your connection and try again, or write to \"+EMAIL+\".\"}\n fetch(ENDPOINT,{method:\"POST\",mode:\"no-cors\",headers:{\"Content-Type\":\"text\/plain;charset=utf-8\"},body:payload}).then(function(){done()}).catch(function(){\n try{if(navigator.sendBeacon&&navigator.sendBeacon(ENDPOINT,new Blob([payload],{type:\"text\/plain;charset=utf-8\"}))){done();return}}catch(e){}\n fail()})}\nfunction open(){if(!m)build();last=document.activeElement;A={};i=0;$(\"wb-wiz\").hidden=false;$(\"wb-done\").hidden=true;$(\"wb-next\").disabled=false;render(1);m.hidden=false;document.documentElement.style.overflow=\"hidden\";box.focus()}\nfunction close(){m.hidden=true;document.documentElement.style.overflow=\"\";if(last&&last.focus)last.focus()}\ndocument.addEventListener(\"click\",function(e){var t=e.target.closest(\"[data-ws-open],a[href='#brief']\");if(t){e.preventDefault();open()}});\ndocument.addEventListener(\"keydown\",function(e){if(!m||m.hidden)return;if(e.key==\"Escape\")close();\n if(e.key==\"Tab\"){var f=[].filter.call(m.querySelectorAll(\"button,input,textarea\"),function(x){return x.offsetParent&&!x.disabled});if(!f.length)return;\n var a=f[0],z=f[f.length-1];if(e.shiftKey&&document.activeElement==a){e.preventDefault();z.focus()}else if(!e.shiftKey&&document.activeElement==z){e.preventDefault();a.focus()}}});\nwindow.wsBrief={open:open,close:close};\n})();\n<\/script>\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MOSTROS \u2014 Creative Technology Creative Technology +Beyondthe screen.Into the room.[ Interactive experiences and custom digital solutions: installations, experimental web, iOS apps and 3D games. Prototype it \u2192 Live! Mostros Installations+WebGL[3D & Games+Sensors[AI+Generative[ Installations+WebGL[3D & Games+Sensors[AI+Generative[ What we build +Built where comfort ends.[ Installations Spaces that listen Physical and digital spaces that respond to people. 3D […]<\/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-9727","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9727","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=9727"}],"version-history":[{"count":7,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9727\/revisions"}],"predecessor-version":[{"id":9734,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9727\/revisions\/9734"}],"wp:attachment":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/media?parent=9727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}