{"id":9738,"date":"2026-10-09T04:55:43","date_gmt":"2026-10-09T04:55:43","guid":{"rendered":"https:\/\/mostros.co\/?page_id=9738"},"modified":"2026-10-09T04:57:21","modified_gmt":"2026-10-09T04:57:21","slug":"branding-design","status":"publish","type":"page","link":"https:\/\/mostros.co\/es\/branding-design\/","title":{"rendered":"Branding & Design"},"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 Branding & Design<\/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@media(prefers-reduced-motion:reduce){.ws *{animation:none!important;transition:none!important}.ws .rv{opacity:1;transform:none}}\n\/* HERO *\/\n.ws .hero{min-height:100svh;display:flex;align-items:center;position:relative;background:radial-gradient(ellipse 55% 60% at 88% 25%,#3a1a0c 0,transparent 70%),radial-gradient(ellipse 40% 40% at 5% 100%,#101a4d 0,transparent 70%),#000}\n.ws .hero .wrap{display:grid;gap:56px;grid-template-columns:1.2fr .8fr;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 .ol{-webkit-text-stroke:2px #fff;color:transparent;transition:color .4s}.ws .ol:hover{color:var(--sun);-webkit-text-stroke-color:var(--sun)}\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\/* pattern board *\/\n.ws .board{position:relative;z-index:1;background:var(--card);border:2px solid var(--sand);border-radius:34px;padding:22px;box-shadow:0 0 0 10px #ffffff0a;animation:ws-bd 7s ease-in-out infinite}\n@keyframes ws-bd{50%{transform:translateY(-12px) rotate(1deg)}}\n.ws .pat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n.ws .pat i{aspect-ratio:1;display:block;animation:ws-sh 6s ease-in-out infinite;animation-delay:calc(var(--d)*.25s)}\n@keyframes ws-sh{0%,100%{border-radius:50%;transform:scale(1)}33%{border-radius:22%;transform:scale(.88) rotate(45deg)}66%{border-radius:50% 50% 50% 8%;transform:scale(1) rotate(-12deg)}}\n.ws .board .cap{display:flex;justify-content:space-between;margin-top:18px;color:var(--mute)}\n.ws .pop{position:absolute;right:-12px;top:-22px;background:var(--razz);color:#fff;padding:12px 20px;border-radius:26px 26px 6px 26px;z-index:3;font-weight:800;font-size:16px;animation:ws-pop 4s infinite}\n@keyframes ws-pop{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-3deg) scale(1.08)}}\n\/* marquee *\/\n.ws .mq{background:var(--cloud);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(--razz)}\n@keyframes ws-mq{to{transform:translateX(-50%)}}\n\/* SWATCHES *\/\n.ws .sw{display:flex;height:clamp(260px,34vw,380px);margin-top:56px;border-radius:34px;overflow:hidden;gap:6px}\n.ws .sw button{flex:1;border:0;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;padding:20px;color:#000;font:inherit;transition:flex .5s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}\n.ws .sw button:hover,.ws .sw button:focus-visible{flex:2.6}\n.ws .sw b{font:800 clamp(14px,1.6vw,20px)\/1.1 Montserrat,sans-serif;text-transform:uppercase}\n.ws .sw span{font:700 10px\/1.6 Montserrat,sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.75;white-space:nowrap}\n.ws .sw button:after{content:\"\";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:#00000018;transition:transform .5s}\n.ws .sw button:hover:after{transform:scale(1.8)}\n.ws .toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,90px);background:var(--sun);color:#000;padding:14px 24px;border-radius:99px;z-index:9;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}\n.ws .toast.on{transform:translate(-50%,0)}\n\/* TYPE *\/\n.ws .sand{background:var(--sand);color:#000}.ws .sand em{color:var(--razz)}\n.ws .spec{margin-top:56px;display:grid;gap:30px}\n.ws .spec .big{font:800 clamp(40px,9vw,140px)\/.95 Montserrat,sans-serif;text-transform:uppercase;letter-spacing:-.02em}\n.ws .spec .big span{display:inline-block;animation:ws-wv 3s ease-in-out infinite;animation-delay:calc(var(--i)*.07s)}\n@keyframes ws-wv{50%{transform:translateY(-.12em);color:var(--mars)}}\n.ws .marks{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}\n.ws .marks span{width:64px;height:64px;border-radius:20px;background:#000;color:var(--sun);display:grid;place-items:center;font:800 26px\/1 Montserrat,sans-serif;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s}\n.ws .marks span:hover{transform:scale(1.18) rotate(-8deg);background:var(--mars);color:#000}\n\/* DELIVERABLES *\/\n.ws .dl{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));column-gap:48px}\n.ws .dl p{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);font:800 clamp(20px,2.2vw,28px)\/1 Montserrat,sans-serif;text-transform:uppercase;transition:padding .35s,color .3s}\n.ws .dl p span{font:700 12px\/1 Montserrat,sans-serif;letter-spacing:.25em;color:var(--mars)}\n.ws .dl p:hover{padding-left:18px;color:var(--sun)}\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\"><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\">Branding & Design<\/div>\n <h1><span class=\"ln\"><span><span class=\"mk\" style=\"color:var(--sun)\">+<\/span>Be <em>unmistakable.<\/em><\/span><\/span><span class=\"ln\"><span class=\"ol\">Not louder.<span class=\"mk\" style=\"color:var(--razz);-webkit-text-stroke:0\">[<\/span><\/span><\/span><\/h1>\n <p class=\"lead fade\" style=\"animation-delay:.7s\">Visual identity and graphic design built around what makes you different, so you compete on that, not on price.<\/p>\n <a class=\"btn lb fade\" style=\"animation-delay:.9s\" href=\"#brief\" data-ws-open role=\"button\">Start branding \u2192<\/a>\n <\/div>\n <div class=\"fade\" style=\"animation-delay:.5s;position:relative\" aria-hidden=\"true\">\n <div class=\"pop\">Your brand<\/div>\n <div class=\"board\"><div class=\"pat\" id=\"pat\"><\/div><div class=\"cap lb\"><span>Pattern system<\/span><span>v1.0<\/span><\/div><\/div>\n <\/div>\n<\/div><\/header>\n\n<!-- MARQUEE -->\n<div class=\"mq\" aria-hidden=\"true\"><div>\n <span>Identity<\/span><b>+<\/b><span>Logo<\/span><b>[<\/b><span>Guidelines<\/span><b>+<\/b><span>Packaging<\/span><b>[<\/b><span>Editorial<\/span><b>+<\/b><span>Social kits<\/span><b>[<\/b>\n <span>Identity<\/span><b>+<\/b><span>Logo<\/span><b>[<\/b><span>Guidelines<\/span><b>+<\/b><span>Packaging<\/span><b>[<\/b><span>Editorial<\/span><b>+<\/b><span>Social kits<\/span><b>[<\/b>\n<\/div><\/div>\n\n<!-- 02 \u00b7 PALETTE -->\n<section><div class=\"wrap\">\n <div class=\"tag lb rv\">Color<\/div>\n <h2 class=\"rv\"><span class=\"mk\" style=\"color:var(--sun)\">+<\/span>Colors with <em>energy.<\/em><span class=\"mk\" style=\"color:var(--cloud)\">[<\/span><\/h2>\n <p class=\"lead rv\">A palette built to feel youthful and contemporary. Tap a swatch to copy its HEX.<\/p>\n <div class=\"sw rv\">\n <button data-hex=\"#E8532A\" style=\"background:#E8532A\"><b>Mars Red<\/b><span>Primary energy<\/span><span>#E8532A<\/span><\/button>\n <button data-hex=\"#E7E4BB\" style=\"background:#E7E4BB\"><b>Sand<\/b><span>Neutral balance<\/span><span>#E7E4BB<\/span><\/button>\n <button data-hex=\"#E84951\" style=\"background:#E84951\"><b>Razzmatazz<\/b><span>Bold highlight<\/span><span>#E84951<\/span><\/button>\n <button data-hex=\"#97DDFA\" style=\"background:#97DDFA\"><b>Cloud Blue<\/b><span>Fresh accent<\/span><span>#97DDFA<\/span><\/button>\n <button data-hex=\"#F9E771\" style=\"background:#F9E771\"><b>Sun Yellow<\/b><span>Bright spark<\/span><span>#F9E771<\/span><\/button>\n <button data-hex=\"#2C4DE9\" style=\"background:#2C4DE9;color:#fff\"><b>Electric Blue<\/b><span>Professional core<\/span><span>#2C4DE9<\/span><\/button>\n <\/div>\n<\/div><\/section>\n\n<!-- 03 \u00b7 TYPE -->\n<section class=\"sand\"><div class=\"wrap\">\n <div class=\"tag lb rv\" style=\"color:#000\">Type & marks<\/div>\n <h2 class=\"rv\">Type that <em>speaks up.<\/em><span class=\"mk\" style=\"color:var(--blue)\">[<\/span><\/h2>\n <div class=\"spec rv\">\n <div class=\"big\" id=\"big\" aria-label=\"We build brands that refuse to blend in.\"><\/div>\n <div class=\"marks\" aria-hidden=\"true\"><span>+<\/span><span>x<\/span><span>><\/span><span>\u2026<\/span><span>( )<\/span><span>[ ]<\/span><span>-<\/span><span>\u2192<\/span><\/div>\n <\/div>\n<\/div><\/section>\n\n<!-- 04 \u00b7 DELIVERABLES -->\n<section><div class=\"wrap\">\n <div class=\"tag lb rv\">Deliverables<\/div>\n <h2 class=\"rv\">What you <em>walk away with.<\/em><\/h2>\n <div class=\"dl rv\">\n <div><p>Positioning <span>01<\/span><\/p><p>Logo system <span>02<\/span><\/p><p>Color & type <span>03<\/span><\/p><p>Brand guidelines <span>04<\/span><\/p><\/div>\n <div><p>Editorial & print <span>05<\/span><\/p><p>Social kits <span>06<\/span><\/p><p>Packaging <span>07<\/span><\/p><p>Merch & goods <span>08<\/span><\/p><\/div>\n <\/div>\n<\/div><\/section>\n\n<!-- 05 \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 brand<\/div>\n <h2 class=\"rv\"><span class=\"mk\" style=\"color:var(--sun)\">+<\/span>Let's give your brand <em>a spine.<\/em><span class=\"mk\" style=\"color:var(--razz)\">[<\/span><\/h2>\n <a class=\"btn lb rv\" href=\"#brief\" data-ws-open role=\"button\">Start branding \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 class=\"toast lb\" id=\"toast\" role=\"status\"><\/div>\n<\/div>\n\n<script>\n\/* page animations *\/\n(function(){\nvar C=[\"#E8532A\",\"#F9E771\",\"#97DDFA\",\"#E84951\",\"#2C4DE9\",\"#E7E4BB\"],pat=document.getElementById(\"pat\");\nfor(var n=0;n<16;n++){var e=document.createElement(\"i\");e.style.setProperty(\"--d\",(n%4)+Math.floor(n\/4));\n var c=C[(n*5+Math.floor(n\/4))%6];if(n%5==3){e.style.border=\"4px solid \"+c}else e.style.background=c;pat.appendChild(e)}\n\/* wave headline *\/\nvar big=document.getElementById(\"big\"),t=\"We build brands that refuse to blend in.\",h=\"\",ix=0;\nt.split(\" \").forEach(function(w){h+='<span style=\"display:inline-block;white-space:nowrap\">';w.split(\"\").forEach(function(ch){h+='<span style=\"--i:'+(ix++)+'\">'+ch+'<\/span>'});h+=\"<\/span> \";ix++});\nbig.innerHTML=h;\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:.15});els.forEach(function(e){io.observe(e)})}\nelse els.forEach(function(e){e.classList.add(\"in\")});\n\/* copy hex *\/\nvar toast=document.getElementById(\"toast\"),tt;\ndocument.querySelectorAll(\".sw button\").forEach(function(b){b.addEventListener(\"click\",function(){var hx=b.dataset.hex;\n try{navigator.clipboard.writeText(hx)}catch(e){}\n toast.textContent=\"Copied \"+hx;toast.classList.add(\"on\");clearTimeout(tt);tt=setTimeout(function(){toast.classList.remove(\"on\")},1600)})});\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 branding?\",h:\"Pick everything that applies.\",f:[{k:\"type\",t:\"multi\",req:1,o:[\"New brand identity\",\"Rebrand\",\"Logo only\",\"Brand guidelines\",\"Naming & positioning\",\"Packaging\",\"Editorial & print\",\"Social media kit\",\"Merch & goods\",\"Not sure yet\"]}]},\n {q:\"Where will it show up?\",h:\"So we design for the right touchpoints.\",f:[{k:\"stack\",t:\"multi\",req:1,o:[\"Website & digital\",\"Social media\",\"Print & stationery\",\"Packaging\",\"Retail \/ space\",\"Events\",\"Not sure\"]}]},\n {q:\"What does the brand need?\",h:\"Select what matters.\",f:[{k:\"features\",t:\"multi\",o:[\"Logo system\",\"Color & typography\",\"Brand voice\",\"Pattern \/ graphic system\",\"Templates\",\"Brand book\",\"Motion identity\",\"Photo direction\"]},{k:\"pages\",t:\"single\",l:\"Approximate scope\",o:[\"Starter kit\",\"Full identity\",\"Identity + rollout\",\"Ongoing partner\",\"Not sure\"]}]},\n {q:\"What do you already have?\",h:\"No problem if the answer is nothing.\",f:[{k:\"have\",t:\"multi\",o:[\"Existing logo\",\"Brand colors\",\"Copy \/ content\",\"Competitor refs\",\"Mood references\",\"Nothing yet\"]},{k:\"notes\",t:\"area\",l:\"Tell us about the brand\",p:\"What makes you different, audience, competitors, 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 4 weeks)\",\"1\u20132 months\",\"3+ months\",\"Flexible\"]},{k:\"budget\",t:\"single\",l:\"Budget range (USD)\",o:[\"Under $3k\",\"$3k \u2013 $8k\",\"$8k \u2013 $20k\",\"$20k+\",\"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:\"Touchpoints\",features:\"Brand needs\",pages:\"Scope\",have:\"Already has\",notes:\"Brand 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:\"Branding & Design\",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 Branding & Design Branding & Design +Be unmistakable.Not louder.[ Visual identity and graphic design built around what makes you different, so you compete on that, not on price. Start branding \u2192 Your brand Pattern systemv1.0 Identity+Logo[Guidelines+Packaging[Editorial+Social kits[ Identity+Logo[Guidelines+Packaging[Editorial+Social kits[ Color +Colors with energy.[ A palette built to feel youthful and contemporary. Tap a […]<\/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-9738","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9738","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=9738"}],"version-history":[{"count":7,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9738\/revisions"}],"predecessor-version":[{"id":9745,"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/pages\/9738\/revisions\/9745"}],"wp:attachment":[{"href":"https:\/\/mostros.co\/es\/wp-json\/wp\/v2\/media?parent=9738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}