/* Dirección de arte y movimiento. El contenido es visible sin JavaScript. */
:root{--navy:#0b223e;--teal:#008b91;--mint:#a7eeeb}
h1,h2,h3,.big-result{font-family:'Space Grotesk','Manrope',Arial,sans-serif}
.header{height:136px}
.brand{position:relative;display:block;width:108px;height:116px;overflow:hidden;flex-shrink:0}
.brand img{position:absolute;width:190px;height:190px;max-width:none;left:-42px;top:-40px;object-fit:contain}
.hero{padding-top:60px;padding-bottom:70px;align-items:start;grid-template-columns:1.05fr 1fr;gap:65px}
.hero-copy{min-width:0}
h1{font-size:clamp(80px,7.6vw,112px);line-height:.98;letter-spacing:-6px;font-weight:500}
h1>.headline-line{animation:none;display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
.headline-line>span{display:block;animation:headline-enter 550ms cubic-bezier(.2,.7,.2,1) both}
.headline-line:nth-child(2)>span{animation-delay:110ms}
.headline-line:nth-child(3)>span{animation-delay:220ms}
h1 .last-line{font-size:.68em;line-height:1.08;letter-spacing:-3.6px;margin-top:22px}
h1 em{position:relative}
h1 em::after{content:'';position:absolute;bottom:1px;left:0;width:100%;height:3px;background:var(--teal);transform-origin:left;animation:accent-enter 500ms 350ms both}
.intro{margin-top:28px}
.hero-visual{margin-top:48px;position:relative;isolation:isolate}
.hero-visual::before{content:'';position:absolute;width:125px;height:125px;right:-19px;top:-16px;border:1px solid #009a9b45;border-radius:40% 40% 5% 40%;transform:rotate(-30deg);z-index:-1}
.organizer{border-radius:5px;background:linear-gradient(145deg,#edf8f5,#f5f8f8)}
.scene-board{height:306px;padding:0;background-image:radial-gradient(#8caeac40 1px,transparent 1px);background-size:18px 18px}
.task,.organized .task{left:5%;width:90%;top:16px;padding:12px;min-height:82px;transition:transform 760ms cubic-bezier(.22,.75,.2,1),box-shadow 350ms,border-color 350ms}
.task-one{transform:translate(-6px,10px) rotate(-8deg)}
.task-two{transform:translate(18px,109px) rotate(7deg)}
.task-three{transform:translate(-9px,196px) rotate(-5deg)}
.organized .task-one{top:16px;transform:translate(0,0)}
.organized .task-two{top:16px;transform:translate(0,92px)}
.organized .task-three{top:16px;transform:translate(0,184px)}
.task>div{min-width:0;flex:1}
.task-next,.organized .task-next{display:block;opacity:0;transform:translateY(6px);transition:opacity 350ms,transform 350ms;font-size:9px;margin-top:3px;line-height:1.4}
.task-status,.organized .task-status{display:block;opacity:0;transform:translateX(-6px);transition:opacity 350ms,transform 350ms;max-width:80px;white-space:normal;font-size:8px;text-align:center}
.organized .task-next,.organized .task-status{opacity:1;transform:translate(0);transition-delay:240ms}
.organized .task{border-color:#a4d8cf;box-shadow:0 4px 12px #0b223e06}
.loose-note,.loose-file{transition:opacity 250ms,transform 400ms}
.loose-note{bottom:9px}
.scene-bottom>span{font-size:11px}
.scene-bottom .button{min-width:114px}
.organized .scene-bottom .button{font-size:11px;gap:10px}
.strip{background:white}
.strip i{display:inline-block;transform:rotate(-25deg)}
.solutions{grid-template-columns:.85fr 1.15fr;gap:90px}
.section-intro{position:sticky;top:40px;align-self:start}


.calculator-result{border-radius:0;background:white;border-block:2px solid var(--navy);padding:25px 0 28px;overflow:visible;min-height:430px}
.calculator-result>p:first-of-type{color:var(--teal)}
.big-result{font-size:clamp(115px,11vw,170px);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-9px;margin-top:45px}
.result-star{font-size:0;width:87px;height:63px;right:0;top:70px;background:var(--teal);clip-path:polygon(0 0,75% 0,100% 100%,30% 100%);transform:rotate(-7deg);opacity:.16}
.calculator-result h3{font-size:26px}
.calculator-result #formula{border-color:var(--line);font-size:12px}
.calculator-result small{font-size:11px;max-width:360px}
.process-section{background:white;border-top:1px solid var(--line)}
.process-heading h2{max-width:850px}
.process{gap:24px;margin-top:65px;position:relative}
.process::before{content:'';position:absolute;top:25px;left:0;right:0;height:1px;background:var(--line);transform:rotate(4deg);transform-origin:left}
.process article{position:relative;border:0;padding-top:0}
.process article:nth-child(2){margin-top:42px}
.process article:nth-child(3){margin-top:84px}
.process article:nth-child(4){margin-top:126px}
.process article>span{display:inline-grid;place-items:center;background:white;border:1px solid var(--teal);width:54px;height:54px;border-radius:50%;font-size:19px;letter-spacing:-.7px}
.process h3{font-size:24px}
.process p{font-size:13px}
.team{border-top:1px solid var(--line)}
.identity{position:relative;background:white;padding:20px 18px}
.logo-toggle{display:block;width:100%;border:0;background:white;color:var(--navy);padding:18px 0;text-align:center;border-radius:5px}
.logo-crop{position:relative;display:block;width:min(100%,300px);aspect-ratio:614/480;margin:0 auto 16px;overflow:hidden}
.logo-piece{position:absolute;max-width:none;width:204.235%;height:auto;left:-52.117%;top:-47.917%;transition:transform 500ms cubic-bezier(.22,.75,.2,1);pointer-events:none}
.piece-al{clip-path:polygon(46.9% 21.2%,55.8% 21.2%,68.1% 43.7%,56.3% 43.7%,46.9% 23.3%)}
.piece-lo{clip-path:polygon(45.95% 23.13%,50.56% 30.3%,50.56% 34.53%,38.2% 54.23%,28.55% 54.23%,28.55% 50.72%)}
.piece-t{clip-path:polygon(44.5% 44.1%,68.5% 44.1%,73.6% 54.3%,48.5% 54.3%)}
.logo-open .piece-al{transform:translate(12px,-14px)}
.logo-open .piece-lo{transform:translate(-15px,4px)}
.logo-open .piece-t{transform:translate(12px,15px)}
.logo-instruction{font-size:11px;display:block;color:var(--teal);position:relative;z-index:1}
.logo-instruction>span{display:inline-block;margin-left:6px;transition:transform 200ms}
.logo-toggle:hover .logo-instruction>span{transform:translate(3px,-3px)}
.logo-names{display:flex;justify-content:center;gap:10px;padding:4px 0 25px;position:relative;z-index:1}
.logo-names>span{font-size:12px;border:1px solid var(--line);padding:6px 12px;border-radius:30px}
.logo-names b{color:var(--teal)}
.identity details{margin-top:10px}
.identity details p{font-size:13px}
.contact{background:#eff8f6}
.contact h2{font-family:'Space Grotesk',sans-serif}
.button,.nav-cta,.text-link{transition:transform 200ms,background 200ms,color 200ms,box-shadow 200ms}
.button>span,.nav-cta>span,.text-link>span{display:inline-block;transition:transform 250ms}
.button:hover>span,.button:focus-visible>span,.nav-cta:hover>span{transform:translate(3px,-3px)}
.text-link:hover>span{transform:translateY(3px)}
.button:active,.nav-cta:active{transform:translateY(1px) scale(.98)}
.button:focus-visible{box-shadow:0 0 0 7px #008b9115}
.primary{background:var(--navy)}
@keyframes headline-enter{from{opacity:0;transform:translateY(65%)}to{opacity:1;transform:translateY(0)}}
@keyframes accent-enter{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1100px){.hero{gap:35px}
h1{font-size:clamp(74px,8vw,90px)}
.solutions{gap:45px}
.big-result{font-size:125px}
.hero-visual{margin-top:70px}
}
@media(max-width:800px){.header{height:116px}
.brand{width:90px;height:98px}
.brand img{width:163px;height:163px;left:-36px;top:-34px}
.hero{grid-template-columns:1fr;padding-block:45px 55px;gap:30px}
h1{font-size:clamp(84px,14vw,105px)}
h1 .last-line{font-size:.7em}
.hero-visual{margin-top:0;padding-top:0}
.hero-visual::before{right:0}
.solutions{grid-template-columns:1fr;gap:30px}
.section-intro{position:static}
.process{grid-template-columns:1fr 1fr;gap:35px 30px;margin-top:38px}
.process::before{display:none}
.process article:nth-child(n){margin-top:0}
.process article:nth-child(even){margin-top:40px}
.calculator-result{padding:24px 0;min-height:350px}
.big-result{font-size:140px}
.identity{max-width:440px;margin-inline:auto;width:100%}
}
@media(max-width:520px){.header{height:108px}
.hero{padding-top:30px}
h1{font-size:clamp(61px,18.5vw,88px);letter-spacing:-4px}
h1 .last-line{font-size:.76em;letter-spacing:-2.8px;margin-top:18px}
.intro{font-size:15px}
.hero-foot{font-size:8px}
.hero-visual{padding-top:12px}
.scene-board{height:310px}
.task,.organized .task{left:5%;width:90%;top:15px;padding:11px 9px;min-height:88px;gap:7px}
.task-one{transform:translate(-3px,8px) rotate(-7deg)}
.task-two{transform:translate(12px,105px) rotate(6deg)}
.task-three{transform:translate(-4px,202px) rotate(-4deg)}
.organized .task-one{top:15px;transform:translate(0,0)}
.organized .task-two{top:15px;transform:translate(0,95px)}
.organized .task-three{top:15px;transform:translate(0,190px)}
.task-next{font-size:8px}
.task-status{max-width:54px;font-size:7px}
.task-icon{width:24px}
.scene-bottom{align-items:center}
.scene-bottom>span{font-size:9px;max-width:130px}
.scene-bottom .button{font-size:10px;min-width:105px;min-height:44px}
.organized .scene-bottom .button{font-size:9px;gap:5px}
.loose-note{font-size:10px}


.big-result{font-size:clamp(110px,32vw,145px);letter-spacing:-7px}
.big-result span{font-size:45px}
.calculator-result h3{font-size:23px}
.result-star{width:66px;height:48px;top:55px}
.process h3{font-size:20px}
.process p{font-size:12px}
.logo-crop{width:245px;max-width:100%}
.logo-open .piece-al{transform:translate(9px,-10px)}
.logo-open .piece-lo{transform:translate(-11px,3px)}
.logo-open .piece-t{transform:translate(9px,11px)}
.logo-names{gap:6px}
.logo-names>span{font-size:11px;padding:6px 9px}
.contact h2{font-size:clamp(40px,12vw,52px)}
}
@media(max-width:350px){
.big-result{font-size:110px}
.logo-names>span{padding:6px 7px}
.process{gap:24px 18px}
}
@media(prefers-reduced-motion:reduce){.headline-line>span,h1 em::after{animation:none!important}
.task,.logo-piece,.task-status,.task-next{transition:none!important}
.button:hover,.button:active,.button:hover>span,.button:focus-visible>span,.nav-cta:hover>span,.text-link:hover>span,.logo-toggle:hover .logo-instruction>span{transform:none!important}
}