@font-face{font-family:Roboto Mono;src:url('assets/roboto-mono.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/poppins.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url('assets/poppins-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Source Code Pro;src:url('assets/source-code-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Source Code Pro;src:url('assets/source-code-semibold.woff2') format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:dark;--red:#be1e2d}
*{box-sizing:border-box}
body{margin:0;background:#000;color:#fff;font-family:Arial,sans-serif}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:5px}
.header{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;height:82px;padding:0 8.8% 0 20px}
.brand{width:155px;flex-shrink:0}.brand img{display:block;width:100%;height:auto}
nav{position:absolute;left:49.5%;transform:translateX(-50%);display:flex;gap:4px;white-space:nowrap}
nav a{padding:24px 18px 12px;font-family:Poppins,Arial,sans-serif;font-size:15px;font-weight:600;border-bottom:3px solid transparent}
nav a:hover,nav a.active{border-color:var(--red)}
.header-actions{display:flex;align-items:center;gap:14px;align-self:stretch}
.language{position:relative;display:flex;align-items:center}.language button{display:flex;align-items:center;gap:6px;background:transparent;font-size:14px}
#language-toggle{height:100%;padding:0 10px;border-radius:0;color:#bbb}
#language-options{position:absolute;right:0;top:68px;min-width:150px;overflow:hidden;border:1px solid #333;border-radius:5px}
#language-options button{width:100%;padding:14px;gap:10px}#language-options button:hover{background:#393939}.language img{width:18px;height:auto}
#menu-toggle{display:none;background:transparent;width:44px;height:44px;padding:10px}#menu-toggle span{display:block;height:2px;background:#fff;margin:5px 0}
.hero{overflow:hidden;position:relative;min-height:780px;height:100svh}
.hero-stage{position:relative;width:1140px;height:780px;margin:0 auto}
.hero-copy{position:absolute;z-index:3;left:35px;top:155px}
h1{font-family:Roboto Mono,'Courier New',monospace;font-size:60px;line-height:1.13;font-weight:700;margin:0;letter-spacing:0}h1 span{display:block}
.discover{display:table;margin:16px 0 0 -20px;padding:9px 20px 13px;border-radius:5px;background:var(--red);font:700 60px/1.15 'Roboto Mono','Courier New',monospace;white-space:nowrap;transition:background .2s,color .2s}
.discover:hover{background:#fff;color:#000}
.hero-copy p{font-size:15px;line-height:22px;font-weight:300;color:#c9c9c9;max-width:405px;margin:43px 0 0 5px}
.hero-art{position:absolute;left:393px;top:111px;width:576px;height:576px;z-index:2}
.symbols{position:absolute;pointer-events:none;max-width:none}.symbols-back{left:0;top:0;width:1909px;height:780px;opacity:.38}.symbols-front{left:0;top:77px;width:1140px;height:auto;opacity:.35}
.top-ring{position:absolute;left:257px;top:-217px;width:280px;height:277px;opacity:.35}
@media(min-width:1600px){.hero-stage{transform:scale(1.03);transform-origin:top center}}
@media(min-width:1024px) and (max-width:1199px){.hero-stage{width:960px}.hero-copy{left:45px}.hero-art{left:365px;width:540px;height:540px}h1,.discover{font-size:54px}.header{padding-right:24px}nav{left:52%}nav a{padding-left:10px;padding-right:10px;font-size:13px}.brand{width:140px}}
@media(max-width:1023px){
 .header{position:absolute;height:78px;padding:0 20px}.brand{width:145px}.header-actions{align-self:center;gap:8px}#language-toggle{height:44px;padding:0 8px;border-radius:0}#language-options{top:51px}#menu-toggle{display:block}
 nav{display:none;position:absolute;left:16px;right:16px;top:78px;transform:none;background:#161616;border:1px solid #303030;border-radius:8px;padding:10px;white-space:normal}nav.open{display:flex;flex-direction:column}nav a{padding:13px 15px;font-size:15px;border-bottom:0;border-left:3px solid transparent}nav a.active,nav a:hover{border-left-color:var(--red)}
 .hero{height:auto;min-height:100svh}.hero-stage{width:100%;height:auto;min-height:100svh;padding:116px 24px 24px;display:flex;flex-direction:column}
 .hero-copy{position:relative;left:auto;top:auto}h1{font-size:clamp(28px,7.7vw,52px);line-height:1.16}.discover{margin:20px 0 0;padding:12px 17px;font-size:clamp(28px,7vw,42px)}.hero-copy p{max-width:390px;margin:24px 0 0;font-size:14px;line-height:22px}
 .hero-art{position:relative;left:auto;top:auto;order:2;align-self:center;margin:8px 0 0;width:min(88vw,390px);height:auto}.symbols-back{left:-210px;top:65px;width:1200px;height:700px;opacity:.22}.symbols-front{left:-170px;top:20px;width:900px;opacity:.2}.top-ring{left:auto;right:-35px;top:-165px;width:240px;height:auto}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
html{scroll-behavior:smooth;scroll-padding-top:82px}
.header{position:fixed;transition:background .2s}.header.scrolled{background:rgba(25,24,23,.8)}
.about{background:#ffd79c url('uploads/2021/02/webmaster2-section-bg1.png') no-repeat right bottom;color:#293858;overflow:hidden;font:400 17px/1.8 Poppins,Arial,sans-serif}
.about-layout{max-width:1100px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.about-visual{padding-top:280px;align-self:stretch;display:flex;align-items:flex-end;background:url('uploads/2021/02/webmaster2-wrap-bg1.png') no-repeat center top;background-size:100% auto}
.about-visual img{display:block;width:100%;height:auto;align-self:flex-end}
.about-copy{padding:48px 20px 55px 0;min-width:0}
.eyebrow{font:400 14px/1.5 'Source Code Pro',monospace;letter-spacing:5px;margin:0 0 60px 16px}
.about h2{font:600 36px/1.28 'Source Code Pro',monospace;margin:0 0 49px}.accent{color:#3f51b5}
.about-intro{margin:0;text-align:justify}.about strong{font-weight:600}
.principles{display:grid;gap:14px;margin-top:74px}.principle{display:flex;align-items:stretch;border:1px solid #edcd95;padding:15px 18px;gap:20px}
.principle svg{width:24px;height:32px;flex-shrink:0;color:#d9b67d;margin-top:4px}
.principle p{margin:0;border-left:1px solid #edcd95;padding:9px 0 11px 20px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:55px}.stat{padding:60px 35px 30px;border:1px solid #f5c886;min-height:280px;background:#ffe9bb}.stat-companies{background:#cdf6ff}
.stat-number{font:400 50px/1.2 'Source Code Pro',monospace;color:#7b4925;font-variant-numeric:tabular-nums}.stat-companies .stat-number{font-weight:600;color:#1f95b2}.stat p{margin:15px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.services{background:#eceff3 url('uploads/2021/02/webmaster2-section-bg2.png') no-repeat center;background-size:cover;color:#293858;padding:130px 28px;font:400 17px/1.8 Poppins,Arial,sans-serif}
.services-inner{max-width:1140px;margin:auto}.services .eyebrow{display:table;margin:0 0 64px;padding:7px 14px;background:#e7eaef;color:#3f51b5;letter-spacing:4px}
.services h2{max-width:920px;margin:0;font:600 36px/1.3 'Source Code Pro',monospace}.services-accent{color:#27ffa1;display:inline-block}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:110px;row-gap:130px;max-width:1000px;margin-top:65px}
.service:nth-child(odd){position:relative;top:75px}.service img{display:block;width:110px;height:110px;object-fit:contain;margin-bottom:42px}.service h3{max-width:350px;margin:0 0 28px;font:600 28px/1.5 'Source Code Pro',monospace}.service p{margin:0}
.services-contact{display:flex;width:min(100%,630px);margin-top:190px;background:#eee3eb;color:#f05b94}.services-contact p{margin:0;padding:25px 30px;flex:1;font-size:21px}.services-contact a{display:flex;align-items:center;justify-content:center;flex:0 0 40%;padding:24px;background:#e65b8f;color:#fff;font:600 22px/1.4 'Source Code Pro',monospace;transition:background .2s}.services-contact a:hover{background:#bb3266}.services-contact a:focus-visible{outline-color:#293858;outline-offset:4px}
@media(max-width:1199px){.services-inner{max-width:940px}.services-grid{column-gap:70px}.services h2{font-size:34px}}
@media(max-width:767px){.services{padding:60px 24px;background-size:auto 100%;font-size:15px}.services .eyebrow{font-size:12px;letter-spacing:3px;margin-bottom:30px}.services h2{font-size:28px}.services-grid{grid-template-columns:1fr;gap:48px;margin-top:45px}.service:nth-child(odd){top:0}.service img{width:88px;height:88px;margin-bottom:22px}.service h3{font-size:24px;margin-bottom:18px;max-width:none}.services-contact{margin-top:50px}.services-contact p{font-size:17px;padding:22px 18px}.services-contact a{font-size:18px;padding:20px 16px;flex-basis:48%}}
@media(max-width:359px){.services{padding-left:22px;padding-right:22px}.services h2{font-size:25px}.services-contact{flex-direction:column}.services-contact p{text-align:center}}
.whatsapp{position:fixed;z-index:9;right:14px;bottom:14px;width:50px;height:50px;filter:drop-shadow(0 2px 3px #0002)}.whatsapp svg{width:100%;height:100%}
.work{background:#eceff3;color:#293858;padding:100px 28px 90px}.work-inner{max-width:964px;margin:auto}.work .eyebrow{display:table;background:#e7eaef;color:#3f51b5;margin:0 12px 65px;padding:7px 14px;letter-spacing:4px}.work h2{font:600 32px/1.3 'Source Code Pro',monospace;max-width:750px;margin:0 12px 50px}.work-pink{color:#ff1769}.work-blue{color:#00aeef}.work-green{color:#008b43}
.project-slider{position:relative;background:#383838;isolation:isolate}.project-link{display:block;touch-action:pan-y}.project-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;user-select:none}.slider-dots{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);display:flex;justify-content:center}.slider-dots button{padding:0;width:24px;height:32px;background:transparent;display:grid;place-items:center}.slider-dots button::after{content:'';width:8px;height:8px;border:2px solid #bcbcbc;border-radius:50%;background:transparent}.slider-dots button[aria-current="true"]::after{background:#ddd}
.slider-arrow,.slider-pause{position:absolute;background:#272727b8;color:#fff;display:grid;place-items:center;border-radius:4px}.slider-arrow{top:50%;transform:translateY(-50%);width:38px;height:52px;font-size:38px;line-height:1;opacity:0;transition:opacity .2s}.slider-prev{left:10px}.slider-next{right:10px}.project-slider:hover .slider-arrow,.project-slider:focus-within .slider-arrow{opacity:1}.slider-pause{top:12px;right:12px;width:34px;height:34px;font-size:16px}.project-link:focus-visible{outline-color:#ff1769;outline-offset:4px}
@media(max-width:767px){.work{padding:60px 22px}.work .eyebrow{font-size:12px;letter-spacing:3px;margin:0 0 30px}.work h2{font-size:27px;margin:0 0 35px}.slider-dots{position:relative;left:auto;bottom:auto;transform:none;padding:3px 0}.slider-dots button{width:30px;height:40px}.slider-arrow{opacity:1;width:30px;height:40px;font-size:30px;top:calc(50% - 23px)}.slider-prev{left:4px}.slider-next{right:4px}.slider-pause{top:5px;right:5px;width:32px;height:32px}}
@media(hover:none){.slider-arrow{opacity:1}}
.contact,.footer{background:#282b34;color:#b9c0ce}.contact{padding:115px 28px 0;overflow:clip}.contact-inner{max-width:964px;margin:auto}.contact .eyebrow{display:table;margin:0 10px 60px;padding:7px 14px;background:#ffffff06;color:#979da9;letter-spacing:3px}.contact h2{font:600 32px/1.3 'Source Code Pro',monospace;color:#a2e8f4;margin:0 10px 55px}.contact-red{color:#ff493d}.contact-green{color:#b9f277}.contact-panel{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:75px 60px 60px;background:#2e323d;position:relative}.contact-panel::after{content:'';position:absolute;left:100%;top:0;width:30px;height:310px;background:radial-gradient(circle,#334476 3px,transparent 4px) 10px 0/26px 26px;pointer-events:none}.contact-aside h3{font:600 24px/1.3 'Source Code Pro',monospace;color:#a2e8f4;margin:0 0 20px}.contact-aside p{font:400 14px/1.9 Poppins,Arial,sans-serif;margin:0;color:#a0a7b5}.contact-aside h4{font:600 19px/1.4 'Source Code Pro',monospace;color:#e65b8f;margin:44px 0 18px}.contact-aside hr{width:85px;margin:0;border:0;border-top:1px solid #646b78}
#contact-form{display:grid;gap:24px;min-width:0}#contact-form input:not([type="hidden"]),#contact-form textarea{display:block;box-sizing:border-box;width:100%;border:1px solid #363a46;border-radius:0;background:#22252d;color:white;font:400 14px/1.5 Poppins,Arial,sans-serif;padding:10px 12px}#contact-form input::placeholder,#contact-form textarea::placeholder{color:#d5d6dc;opacity:1}#contact-form textarea{resize:vertical;min-height:195px}.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-submit{width:100%;background:#e65b8f;color:white;padding:24px;font:600 17px/1.5 Poppins,Arial,sans-serif}.contact-submit:hover{background:#ce477b}.contact-submit:disabled{opacity:.6;cursor:wait}#contact-form :focus-visible{outline:2px solid #a2e8f4;outline-offset:3px}#form-status{margin:0;font:400 14px/1.6 Poppins,Arial,sans-serif;color:#b9f277}#form-status:empty{display:none}#form-status.error{color:#ffb3c8}.form-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}#recaptcha-badge:empty{display:none}.grecaptcha-badge{z-index:12}.whatsapp{bottom:80px}
.footer-inner{max-width:964px;margin:auto;display:grid;grid-template-columns:1.1fr .75fr 1.25fr;gap:50px;padding:180px 0 55px}.footer h3{font:600 24px/1.3 'Source Code Pro',monospace;color:white;margin:0 0 65px}.footer-details{display:grid;gap:18px;font:400 14px/1.6 Poppins,Arial,sans-serif}.footer-details a{width:fit-content}.footer-details a:hover{text-decoration:underline}.footer-details a:last-child{color:#b9f277}.footer-blue{color:#74d8ff}.footer-brand{align-self:center}.footer-brand img{display:block;width:100%;height:auto}.social-links{display:flex;align-items:center;gap:16px;color:#fff}.social-links svg{width:32px;height:32px;display:block}.instagram{color:#ffc000}.footer-youtube{color:#ff4039}.copyright{background:#090909;text-align:center;padding:8px 20px;color:#bbb;font:400 12px/1.5 Arial,sans-serif}
@media(max-width:1023px){.contact-panel{gap:30px;padding:45px 32px}.footer-inner{padding:100px 28px 50px;gap:30px}.footer h3{font-size:21px}.footer-details{font-size:12px}}
@media(max-width:767px){.contact{padding:60px 22px 0}.contact .eyebrow{margin:0 0 30px;font-size:12px}.contact h2{font-size:27px;margin:0 0 35px}.contact-panel{grid-template-columns:1fr;gap:30px;padding:28px 20px}.contact-panel::after{display:none}.contact-aside h4{margin-top:24px}.contact-row{grid-template-columns:1fr;gap:20px}#contact-form{gap:20px}.contact-submit{padding:18px}.footer-inner{grid-template-columns:1fr 1fr;padding:65px 24px 40px;gap:35px 20px}.footer h3{margin-bottom:25px;font-size:20px}.footer-details{font-size:13px;overflow-wrap:anywhere}.footer-brand{grid-column:1/-1;max-width:290px}.social-links{gap:10px}.social-links svg{width:28px;height:28px}.copyright{font-size:11px}}
.clients{background:#423cc1 url('uploads/2021/02/webmaster2-section-bg4.png') no-repeat center top;background-size:contain;padding:130px 28px 120px}.clients-inner{max-width:1140px;margin:auto}.clients .eyebrow{display:table;margin:0 auto 55px;padding:8px 16px;background:#ffffff0a;color:#fff;font-size:15px;letter-spacing:4px}.clients-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 20px;align-items:center}.client-logo{position:relative;display:grid;place-items:center;aspect-ratio:16/10}.client-logo img{width:100%;height:100%;object-fit:contain;transition:opacity .25s}.client-white{position:relative}.client-color{position:absolute;inset:0;opacity:0}.client-logo:hover .client-color,.client-logo:focus .client-color,.client-logo:active .client-color{opacity:1}.client-logo:hover .client-white,.client-logo:focus .client-white,.client-logo:active .client-white{opacity:0}.client-logo:nth-last-child(2){grid-column:2}.client-logo:last-child{grid-column:3}
.tutorial-slider{background:#ff003e url('files/fondo-para-mockup-scaled.jpg') center/cover;container-type:inline-size}.tutorial-slider .project-link{position:relative;aspect-ratio:16/9;padding:12% 12.7% 2.5%;color:white}.tutorial-title{position:absolute;top:4.5%;left:12.7%;right:12.7%;font:400 clamp(14px,2.7cqw,32px)/1.25 Arial,sans-serif;max-height:17%;overflow:hidden}.tutorial-slider .project-image{width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}.youtube-mark{position:absolute;bottom:4%;right:2%;width:7.3%;height:auto}.tutorial-slider .slider-arrow{opacity:1;background:transparent;font-size:48px}.tutorial-slider .slider-pause{background:#ac002e70}.tutorial-slider .slider-dots{bottom:2px}
@media(max-width:767px){.clients{padding:60px 22px}.clients .eyebrow{font-size:12px;letter-spacing:3px;margin-bottom:30px}.clients-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.client-logo:nth-last-child(2),.client-logo:last-child{grid-column:auto}.client-logo{aspect-ratio:16/11}.tutorial-slider .project-link{aspect-ratio:auto;padding:18px 35px 14px;min-height:220px}.tutorial-title{position:static;display:block;max-height:none;min-height:64px;font-size:16px;line-height:1.35;margin-bottom:14px}.tutorial-slider .project-image{height:auto}.tutorial-slider .youtube-mark{width:24px;right:6px;bottom:10px}.tutorial-slider .slider-pause{top:auto;bottom:48px;right:4px;width:28px;height:28px}.tutorial-slider .slider-dots{bottom:auto}.tutorial-slider .slider-arrow{font-size:36px}.tutorial-slider .slider-prev{left:1px}.tutorial-slider .slider-next{right:1px}}
@media(min-width:1024px) and (max-width:1199px){.about-layout{padding:0 40px;gap:28px}.about h2{font-size:31px}.about{font-size:15px}.stat{padding:40px 22px}.about-visual{padding-top:230px}}
@media(max-width:1023px){html{scroll-padding-top:78px}.about-layout{max-width:720px;padding:0 28px;grid-template-columns:1fr}.about-copy{padding:55px 0 45px}.eyebrow{margin:0 0 28px}.about h2{font-size:34px;margin-bottom:30px}.about-intro{text-align:left}.principles{margin-top:35px}.stats{margin-top:30px}.about-visual{display:none}.about{background-size:auto 65%}.stat{min-height:250px;padding:35px 25px}.whatsapp{width:46px;height:46px}}
@media(max-width:479px){.about-layout{padding:0 22px}.about{font-size:15px}.about h2{font-size:28px}.principle{padding:14px 12px;gap:12px}.principle p{padding:3px 0 3px 12px}.principle svg{width:20px;height:28px}.stats{gap:12px}.stat{padding:28px 16px;min-height:265px}.stat-number{font-size:42px}.stat p{font-size:14px;line-height:1.75}}
