*{box-sizing:border-box}
:root{--ink:#25261f;--paper:#f3eddf;--yellow:#ead8a3;--sage:#c2c8ac;--clay:#ac5339;--sans:Arial,Helvetica,sans-serif;--serif:Georgia,"Times New Roman",serif}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;color:var(--ink);font-family:var(--sans);background:#c6a47d url('./wood.svg') center top/1200px 640px;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible{outline:3px solid #764431;outline-offset:6px}
button:focus-visible{z-index:5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-150%);z-index:30;padding:12px 20px;background:var(--paper)}
.skip-link:focus{transform:none}
.desk{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;padding-top:38px;background:linear-gradient(100deg,#583b2110,transparent 30%,#fff7d414 55%,#291c1220)}
main{position:relative;z-index:1}
.paper{background-color:var(--paper);background-image:url('./paper.svg');box-shadow:0 2px 2px #34251530,0 10px 18px -12px #2e1d12b0,0 1px 1px #fff9 inset}
.hero-sheet{max-width:1240px;width:calc(100% - 124px);margin:auto;padding:30px 50px 38px;position:relative;box-shadow:0 2px 3px #34251560,0 22px 40px -20px #2e1d1280,1px 1px 1px #fff8 inset}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.045em;text-decoration:none;white-space:nowrap}
.brand span{display:block;margin-top:5px;font:14px/1.25 var(--serif);letter-spacing:0}
nav{display:flex;align-items:center;gap:30px;font-size:12px}
nav a{text-decoration:none}
nav a:not(.button):hover{text-decoration:underline}
.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;min-height:46px;padding:12px 23px;background:var(--ink);color:#fffaf0;border:1px solid #171a16;border-radius:2px;text-decoration:none;font-size:13px;box-shadow:0 1px 0 #ffffff18 inset;transition:transform .25s,background .25s}
.button:hover{background:#394032;transform:translateY(-2px)}
.hero-body{display:grid;grid-template-columns:1.08fr 1fr;gap:14px;align-items:center;margin-top:36px}
.hero-copy{position:relative;z-index:2;padding-block:20px 24px}
h1{font-size:clamp(42px,4.6vw,68px);letter-spacing:-.065em;line-height:1.035;font-weight:700;margin:0 0 28px}
.hero-strip{display:table;background-color:var(--yellow);font-size:clamp(26px,2.9vw,43px);line-height:1.15;letter-spacing:-.055em;font-weight:700;margin:0 -12px 28px;padding:16px 19px 17px;transform:rotate(-1.8deg);white-space:nowrap;box-shadow:0 2px 2px #34251528,0 5px 5px -3px #34251570,0 1px 1px #fff9 inset}
.support{font:clamp(20px,1.7vw,25px)/1.2 var(--serif);margin:0;max-width:440px;padding-left:4px;text-wrap:balance}
.method{align-self:center;scroll-margin-top:40px;position:relative;margin-right:-10px}
.cycle{position:relative;width:100%;aspect-ratio:1;min-width:0;max-width:530px;margin:auto}
.cycle-arrows{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);overflow:visible}
.cycle-arrows>path{stroke:currentColor;stroke-width:3;stroke-linecap:round}
.wood-block{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #b9915e;border-top-color:#f9dfb2;border-left-color:#e7c995;border-radius:3px;background:#dfbb86 url('./wood.svg') center/900px 490px;background-blend-mode:soft-light;box-shadow:0 5px 0 #b89360,2px 7px 2px #70502f35,6px 18px 15px -6px #4b311b70,1px 2px 1px #fff7 inset;line-height:1.02;cursor:pointer;transition:transform .38s,box-shadow .38s,filter .38s;padding:11px 7px 12px}
.wood-block:after{content:"";position:absolute;inset:5px;border:1px solid #f9e6c225;border-radius:1px;pointer-events:none}
.wood-block>span{font-size:clamp(17px,1.7vw,24px);letter-spacing:-.04em;font-weight:500}
.wood-block svg{width:42px;height:42px;margin-bottom:4px;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.wood-block .solid,.palancas circle{fill:currentColor;stroke:none}
.mapear{width:37%;height:23%;left:31.5%;top:0;transform:rotate(.8deg)}
.palancas{width:28%;height:30%;right:0;top:35%;transform:rotate(-1deg)}
.mover{width:37%;height:23%;left:31.5%;bottom:0;transform:rotate(-.6deg)}
.medir{width:25%;height:28%;left:0;top:36%;transform:rotate(.7deg)}
.wood-block:hover{transform:translateY(-4px) rotate(0);filter:brightness(1.025);box-shadow:0 6px 0 #b89360,2px 8px 2px #70502f35,6px 21px 17px -5px #4b311b70,1px 2px 1px #fff7 inset}
.wood-block.is-active{transform:translateY(-5px) rotate(-1deg);box-shadow:0 5px 0 #a38153,0 0 0 2px #96543880,4px 20px 17px -5px #4b311b60,1px 2px 1px #fff7 inset}
.pivot{position:absolute;display:grid;place-items:center;width:25%;aspect-ratio:1;left:37.5%;top:37.5%;background:#bc6347 url('./paper.svg');border:1px solid #983d27;border-top-color:#e4966d;border-radius:50%;cursor:pointer;box-shadow:0 5px 0 #843820,4px 13px 15px -5px #5c321880,0 0 0 5px #cf785445 inset;transition:transform .5s,box-shadow .3s;padding:3.6%;transform:rotate(var(--turn,0deg))}
.pivot svg{display:block;width:100%;height:100%}
.pivot:hover{box-shadow:0 5px 0 #843820,4px 15px 18px -5px #5c321899,0 0 0 5px #cf785470 inset}
.pivot:active{translate:0 2px}
.stage-caption{margin:18px 0 0;text-align:center;min-height:24px;font:italic 15px/1.4 var(--serif);color:#555344}
.stage-divider{padding-inline:7px;color:#77735f}
.applications{max-width:1090px;width:calc(100% - 190px);margin:48px auto 68px;position:relative}
.section-heading{margin:0 0 29px;padding-inline:8px}
.section-heading p{font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 9px}
.section-heading h2{font-size:clamp(30px,3.1vw,43px);letter-spacing:-.055em;line-height:1.06;margin:0;font-weight:700}
.mobile-break{display:none}
.application-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px 25px;perspective:1200px}
.application-card{--angle:0deg;--shift:0px;position:relative;background-color:var(--paper);padding:27px 27px 28px;transform:translateY(var(--shift)) rotate(var(--angle));transition:transform .8s cubic-bezier(.25,.75,.25,1),box-shadow .4s;box-shadow:1px 2px 2px #4e361c50,4px 11px 10px -7px #3b2a1980,0 1px 0 #fffa inset;min-width:0}
.application-card:nth-child(1){--angle:-1.2deg;--shift:4px;background-color:var(--yellow)}
.application-card:nth-child(2){--angle:.8deg;--shift:8px}
.application-card:nth-child(3){--angle:-1.5deg;--shift:7px;background-color:var(--sage)}
.application-card:nth-child(4){--angle:1deg;--shift:6px}
.application-card:nth-child(5){--angle:-.9deg;--shift:11px;background-color:var(--sage)}
.application-card:nth-child(6){--angle:.6deg;--shift:5px;background-color:var(--yellow)}
.application-grid.is-settled .application-card{transform:translateY(0) rotate(calc(var(--angle) * .5))}
.application-grid.is-settled .application-card:hover,.application-card:hover{transform:translateY(-5px) rotate(0deg);box-shadow:1px 2px 2px #4e361c40,6px 20px 15px -9px #3b2a1980,0 1px 0 #fffa inset;z-index:2}
.application-card h3{font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.045em;line-height:1.12;margin:0 0 19px;min-height:26px}
.application-card svg{display:block;width:100%;height:auto;aspect-ratio:200/110;overflow:visible;margin:0 0 19px}
.application-card .use{font:16px/1.3 var(--serif);margin:0;max-width:255px;min-height:64px}
.contact{width:100%;padding:48px max(6vw,calc((100vw - 1210px)/2)) 37px;position:relative;box-shadow:0 -2px 8px #48331f30}
.contact-main{display:flex;align-items:center;justify-content:space-between;gap:40px;margin:0 auto 48px;max-width:1210px}
.contact h2{font-size:clamp(32px,3.3vw,46px);letter-spacing:-.055em;line-height:1.09;font-weight:700;margin:0}
.contact h2 br{display:none}
.contact-links{display:flex;align-items:center;flex-direction:column;gap:13px;flex-shrink:0}
.contact-links .button{min-width:188px}
.email{font-size:15px;text-decoration:none}
.email:hover{text-decoration:underline}
footer{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:1210px;margin:auto}
footer .brand{font-size:23px}
footer .brand span{font-size:13px}
footer nav{font-size:11px;gap:30px}
.notebook{position:absolute;z-index:0;left:-55px;top:206px;width:154px;height:500px;transform:rotate(9deg);background:#7f8970 url('./paper.svg');border-radius:4px 8px 8px 4px;border:1px solid #69745e;box-shadow:7px 7px 0 #e7dec7,9px 11px 0 #676d52,15px 24px 26px #35240f66}
.notebook:before{content:"";position:absolute;inset:0 0 0 16px;border-left:1px solid #b6b79b66}
.notebook span{position:absolute;top:65px;right:17px;font-size:10px;letter-spacing:.11em;line-height:1.9;transform:rotate(-1deg);opacity:.8}
.pencil{position:absolute;top:862px;left:4.5%;width:8px;height:245px;border-radius:2px;background:linear-gradient(90deg,#514c38,#232c25 28%,#999780 35%,#252c26 57%,#181d1a);transform:rotate(7deg);box-shadow:4px 5px 5px #32241566}
.pencil:before{content:"";position:absolute;bottom:-25px;left:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:25px solid #b79867}
.loose-note{position:absolute;z-index:0;top:1250px;left:-25px;padding:35px 24px 20px;background:#dcc8a5 url('./paper.svg');font:12px/1.7 monospace;letter-spacing:.09em;transform:rotate(-11deg);box-shadow:1px 2px 2px #34251540,4px 9px 9px #34251530}
.loose-note span{display:block;margin-top:10px}
.plant{position:absolute;z-index:3;right:-40px;top:890px;width:165px;height:270px;transform:rotate(10deg);pointer-events:none}
.plant:before{content:"";position:absolute;top:0;left:80px;width:3px;height:270px;background:#585839;transform:rotate(12deg);box-shadow:8px 9px 10px #35271544}
.plant i{position:absolute;width:86px;height:40px;border-radius:3% 90% 3% 90%;background:linear-gradient(24deg,#2f4527,#627247 44%,#94985b 48%,#4c6333 53%,#3f562e);box-shadow:12px 13px 15px #2f261b40;transform-origin:right bottom}
.plant i:nth-child(1){top:10px;left:-2px;transform:rotate(30deg)}
.plant i:nth-child(2){top:73px;left:0;transform:rotate(12deg)}
.plant i:nth-child(3){top:138px;left:-8px;transform:rotate(-5deg)}
.plant i:nth-child(4){top:56px;right:-5px;transform:rotate(105deg)}
.plant i:nth-child(5){top:119px;right:2px;transform:rotate(112deg)}
.plant i:nth-child(6){top:195px;right:15px;transform:rotate(120deg)}
@media(min-width:1600px){.desk{padding-top:52px}.hero-sheet{padding:36px 56px 48px}.hero-body{margin-top:45px}.hero-copy{padding-block:32px}.applications{margin-top:60px}.plant{right:calc((100vw - 1410px)/2 - 115px)}.notebook{left:calc((100vw - 1380px)/2 - 100px)}.pencil{left:calc((100vw - 1240px)/2 - 25px)}}
@media(max-width:1100px){.hero-sheet{width:calc(100% - 70px);padding:27px 35px 30px}.hero-body{gap:10px;margin-top:28px}.masthead nav{gap:22px}.brand{font-size:24px}.brand span{font-size:12px}h1{font-size:clamp(42px,4.8vw,56px)}.hero-strip{font-size:3.1vw;margin-left:-8px;padding:13px 14px}.support{font-size:21px}.method{margin-right:-8px}.wood-block svg{width:35px;height:35px}.wood-block>span{font-size:clamp(16px,1.9vw,19px)}.applications{width:calc(100% - 134px);margin-top:38px}.application-grid{gap:22px 18px}.application-card{padding:24px 22px}.application-card .use{font-size:15px}.contact h2 br{display:block}.notebook{left:-84px}.pencil{left:3.2%}}
@media(max-width:780px){.desk{padding-top:22px}.hero-sheet{width:calc(100% - 38px);padding:25px 28px 34px}.masthead{align-items:flex-start;gap:17px}.masthead nav{gap:17px;padding-top:5px}.masthead nav>a:not(.button){display:none}.button{font-size:12px;min-height:43px;padding:10px 17px}.brand{font-size:24px}.brand span{font-size:12px}.hero-body{grid-template-columns:1fr;gap:18px;margin-top:34px}.hero-copy{padding:0 8px}.desktop-break{display:none}h1{max-width:580px;font-size:clamp(42px,7.9vw,61px);line-height:1.03;letter-spacing:-.062em;margin-bottom:23px}.hero-strip{font-size:clamp(29px,5.1vw,39px);margin-bottom:26px;padding:12px 17px}.support{max-width:440px;font-size:22px;line-height:1.2}.method{max-width:440px;width:100%;margin:22px auto 0}.cycle{width:100%;max-width:420px}.wood-block>span{font-size:23px}.wood-block svg{width:38px;height:38px}.stage-caption{margin-top:22px}.applications{width:calc(100% - 68px);margin-top:38px;margin-bottom:47px}.application-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 22px}.section-heading{padding-left:0;margin-bottom:23px}.section-heading h2{font-size:34px}.application-card h3{font-size:22px}.application-card{padding:25px 23px}.application-card .use{font-size:17px;min-height:86px}.application-card svg{margin-block:22px 20px}.contact{padding:34px 36px 30px}.contact-main{gap:28px;margin-bottom:35px}.contact h2{font-size:33px}.contact-links .button{min-width:165px}.email{font-size:13px}footer{gap:26px}footer .brand{font-size:21px}footer .brand span{font-size:11px}footer nav{gap:16px}.notebook{left:-125px;top:280px}.pencil{display:none}.loose-note{left:-107px;top:1560px}.plant{top:1165px;right:-115px;transform:scale(.8)}}
@media(max-width:520px){html{scroll-padding-top:18px}.desk{padding-top:13px}.hero-sheet{width:calc(100% - 24px);padding:23px 19px 29px}.masthead{align-items:center}.brand{font-size:22px}.brand span{max-width:160px;font-size:11px;line-height:1.2}.masthead nav{padding:0}.masthead .button{min-height:41px;padding:10px 12px;font-size:11px;gap:8px}.hero-body{margin-top:39px;gap:14px}.hero-copy{padding:0 4px}h1{font-size:clamp(35px,10.6vw,53px);margin-bottom:23px;line-height:1.055}.hero-strip{font-size:clamp(23px,6.5vw,32px);margin-left:-5px;margin-right:-5px;padding:13px 12px;margin-bottom:25px;letter-spacing:-.052em}.support{font-size:21px;line-height:1.2;padding-left:1px}.method{margin-top:18px;max-width:355px}.cycle-arrows>path{stroke-width:3.3}.wood-block{padding:9px 4px 10px}.wood-block>span{font-size:clamp(16px,4.6vw,21px)}.wood-block svg{width:clamp(26px,8vw,36px);height:clamp(26px,8vw,36px);margin-bottom:3px;stroke-width:2.6}.pivot{border-width:1px}.stage-caption{font-size:14px;margin-top:19px}.applications{width:calc(100% - 48px);margin-top:37px;margin-bottom:39px}.section-heading p{font-size:11px;margin-bottom:9px}.section-heading h2{font-size:32px;line-height:1.09;letter-spacing:-.05em}.mobile-break{display:block}.application-grid{grid-template-columns:1fr;gap:23px}.application-card{padding:27px 28px 28px;display:grid;grid-template-columns:1fr;min-height:0}.application-card h3{font-size:25px;margin-bottom:6px;min-height:0}.application-card svg{width:100%;max-width:290px;justify-self:center;aspect-ratio:200/100;margin:17px 0 17px}.application-card .use{font-size:19px;line-height:1.32;max-width:none;min-height:0}.contact{padding:32px 26px 27px}.contact-main{display:block;margin-bottom:34px}.contact h2{font-size:34px;line-height:1.08;max-width:340px}.contact-links{align-items:flex-start;gap:13px;margin-top:25px}.contact-links .button{min-width:180px}.contact-links .email{font-size:16px}footer{align-items:flex-start;gap:24px;flex-direction:column}footer .brand{font-size:22px}footer .brand span{max-width:none;font-size:12px}footer nav{gap:25px;font-size:12px}.notebook{display:none}.loose-note{display:none}.plant{right:-125px;top:1310px;z-index:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.application-card,.application-grid.is-settled .application-card{transform:rotate(calc(var(--angle) * .5))}.wood-block:hover,.wood-block.is-active{transform:none}.pivot{transform:none}}
