:root{--bg:#FCF9F4;--ink:#1A1A1A;--gray:#A8A8A6;--blue:#A4AFB6;--line:rgba(26,26,26,.14);--pink:#E3AFC0;--pad:clamp(16px,4vw,64px);--sans:"Inter",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace;--ease:cubic-bezier(.22,.61,.12,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
html[lang=es] .en,html[lang=en] .es{display:none!important}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.muted{color:var(--gray)}
::selection{background:var(--blue);color:#fff}

/* header */
.hd{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);mix-blend-mode:difference;color:#fff}
.logo{font-size:20px;letter-spacing:-.02em}
.nav{display:flex;gap:clamp(14px,2.5vw,36px);align-items:center}
.nav a,.lang{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;background:none;border:0;color:inherit;cursor:pointer;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .5s var(--ease)}
.nav a:hover::after,.nav a.on::after{right:0}
.lang b{font-weight:400;opacity:.45}html[lang=es] .lang .l-es,html[lang=en] .lang .l-en{opacity:1}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.clip{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease);transition-delay:var(--d,0s)}
.clip.in{clip-path:inset(0 0 0 0)}
.clip img{transform:scale(1.18);transition:transform 1.8s var(--ease);transition-delay:var(--d,0s)}
.clip.in img{transform:scale(1)}
.hov{overflow:hidden}
.hov img{transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.hov:hover img{transform:scale(1.06)!important}
.cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}

/* cursor */

.peek{position:fixed;left:0;top:0;z-index:40;pointer-events:none;width:min(24vw,320px);opacity:0;transition:opacity .4s var(--ease)}
.peek.on{opacity:1}
@media (pointer:coarse){.cur,.peek{display:none}}

/* type */
.h-xl{font-size:clamp(56px,13vw,220px);line-height:.9;letter-spacing:-.045em;font-weight:400}
.h-l{font-size:clamp(40px,7vw,112px);line-height:.95;letter-spacing:-.04em;font-weight:400}
.h-m{font-size:clamp(28px,3.6vw,52px);line-height:1.02;letter-spacing:-.03em;font-weight:400}
.h-gray{color:var(--blue)}
.it{font-style:italic}
.body{font-family:var(--mono);font-size:14px;line-height:1.75;max-width:52ch}
.body b{font-weight:500}
section{position:relative}
.wrap{padding:0 var(--pad)}

/* ficha */
.ficha{margin-top:36px;border-top:1px solid var(--line);max-width:560px}
.ficha div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.ficha dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray);padding-top:3px}
.ficha dd{font-size:14px;line-height:1.55;white-space:pre-line}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;padding:14px 22px;border:1px solid var(--ink);border-radius:999px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:var(--bg)}.btn:hover::before{transform:none}

/* home */
.hero{height:100vh;min-height:620px;position:relative;display:grid;place-items:center;overflow:hidden}
.hero .h-xl{position:relative;z-index:3;text-align:center}
.hero .tag{position:absolute;z-index:3;right:var(--pad);bottom:clamp(24px,6vh,64px);text-align:right;line-height:1.6}
.hero .meta{position:absolute;z-index:3;left:var(--pad);bottom:clamp(24px,6vh,64px)}
.float{position:absolute;z-index:2;display:block}
.float img{box-shadow:0 0 0 rgba(0,0,0,0)}
.float .cap{opacity:0;transition:opacity .4s}
.float:hover .cap{opacity:1}
.marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;white-space:nowrap}
.marq div{display:inline-block;animation:mq 38s linear infinite;font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--gray)}
.marq span{margin:0 28px}
@keyframes mq{to{transform:translateX(-50%)}}
.mani{padding:clamp(100px,18vh,200px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px)}
.mani .body{font-size:clamp(14px,1.15vw,17px)}
.mani .body p+p{margin-top:1.4em}
.mani .body{color:var(--gray)}
.mani .body b{color:var(--ink);font-weight:500;background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 100%/0 1px;transition:background-size 1.4s var(--ease) .4s}
.mani .in b{background-size:100% 1px}
.doors{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.door{padding:clamp(40px,8vh,90px) var(--pad);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:18px;transition:background .6s var(--ease)}
.door:last-child{border-right:0}
.door:hover{background:#F3EEE6}
.door .h-l{display:flex;justify-content:space-between;align-items:flex-end}
.door .arr{display:inline-block;transition:transform .6s var(--ease)}
.door:hover .arr{transform:translateX(12px)}

/* trabajos */
.top{padding:clamp(120px,22vh,220px) var(--pad) clamp(40px,8vh,80px)}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--pad) 28px;border-bottom:1px solid var(--line);margin-bottom:clamp(40px,7vh,80px)}
.grid-ed{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,40px);padding:0 var(--pad) clamp(100px,16vh,180px);align-items:start}
.card{display:block}
.card .clip{aspect-ratio:4/5}.card .clip img{height:100%;object-fit:cover}.c1 .clip{aspect-ratio:1/1}.c1 .clip img{object-position:50% 30%}
.card .ttl{font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;margin-top:6px;transition:color .4s}
.card:hover .ttl{color:var(--blue)}
.c1{grid-column:1/8}.c2{grid-column:9/13;margin-top:22vh}.c3{grid-column:2/6;margin-top:10vh}.c4{grid-column:7/13;margin-top:10vh}
.list-in{padding:0 var(--pad) clamp(100px,16vh,180px)}
.row{display:grid;grid-template-columns:70px 1fr 1fr 60px;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease)}
.row:hover{padding-left:18px}
.row .h-m{transition:color .4s}.row:hover .h-m{color:var(--blue)}
.row .go{text-align:right;transition:transform .5s var(--ease)}.row:hover .go{transform:translateX(-8px)}

/* project common */
.p-top{padding:clamp(110px,18vh,180px) var(--pad) 0}
.next{display:block;border-top:1px solid var(--line);padding:clamp(50px,10vh,110px) var(--pad);margin-top:clamp(80px,14vh,160px)}
.next .h-l{transition:transform .8s var(--ease),color .5s}
.next:hover .h-l{transform:translateX(24px);color:var(--blue)}

/* zero noise: split */
.split{display:grid;grid-template-columns:minmax(300px,38%) 1fr;gap:clamp(24px,4vw,72px);padding:0 var(--pad)}
.split .side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6vh}
.split .flow{padding-top:16vh;display:flex;flex-direction:column;gap:clamp(40px,9vh,120px)}
.flow .w100{width:100%}.flow .w72{width:72%;align-self:flex-end}.flow .w58{width:58%}.flow .w84{width:84%;align-self:center}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,32px)}

/* snark: scattered */
.scatter{position:relative;height:230vh}
.scatter .float{width:var(--w)}
.sn-title{position:sticky;top:0;height:100vh;display:grid;place-items:center;z-index:1;pointer-events:none}
.sn-title .h-xl span{color:var(--pink)}
.sn-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px);padding:clamp(60px,10vh,120px) var(--pad) 0}

/* memoria */
.band{background:var(--blue);color:var(--bg);min-height:78vh;padding:clamp(110px,18vh,180px) var(--pad) clamp(50px,9vh,100px);display:flex;flex-direction:column;justify-content:flex-end}
.trio-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,32px);padding:clamp(70px,12vh,140px) var(--pad) 0;align-items:start}
.trio-row figure:nth-child(2){margin-top:14vh}.trio-row figure:nth-child(3){margin-top:6vh}
.band .mono{color:rgba(252,249,244,.75)}
.duo{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(16px,3vw,48px);padding:0 var(--pad);align-items:end}
.wide{padding:clamp(80px,14vh,160px) 0;overflow:hidden}
.wide .zm{height:88vh;overflow:hidden}
.wide .zm img{height:100%;object-fit:cover;transform-origin:center}

/* exodonauts */
.ex-hero{height:100vh;overflow:hidden;position:relative;color:#fff}
.ex-hero img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:50% 40%}
.ex-hero .in-t{position:absolute;left:var(--pad);bottom:7vh;z-index:2}
.ex-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.35))}
.hs{position:relative}
.hs .stick{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.hs .track{display:flex;gap:clamp(16px,2.4vw,40px);padding:0 var(--pad);will-change:transform}
.hs .track figure{flex:0 0 auto;width:clamp(240px,28vw,440px)}
.hs .track figure:nth-child(even){margin-top:14vh}

/* informes */
.inf-head{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,90px);padding:0 var(--pad);align-items:end}
.inf-cover{margin:clamp(50px,9vh,100px) var(--pad) 0}
.inf-grid{display:grid;gap:clamp(14px,2vw,28px);padding:clamp(50px,9vh,100px) var(--pad) 0}
.g-sq{grid-template-columns:repeat(2,1fr)}.g-port{grid-template-columns:repeat(3,1fr)}.g-land{grid-template-columns:1fr}
.g-port figure:nth-child(3n+2){margin-top:8vh}
.g-sq figure:nth-child(even){margin-top:10vh}

/* about */
.ab{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,120px);padding:clamp(110px,18vh,180px) var(--pad) 0;align-items:start}
.pic{position:relative;isolation:isolate}
.frame{position:absolute;top:7%;left:9%;right:-7%;bottom:-6%;background:var(--blue);z-index:-1}
.bw img{filter:grayscale(1) contrast(1.04)}
.ab-h{color:var(--blue)}
.ab-b{color:var(--gray)}
.ab-b b{color:var(--ink);font-weight:500;background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 100%/0 1px;transition:background-size 1.4s var(--ease) .5s}
.ab-b.in b{background-size:100% 1px}
.xp{margin-top:clamp(120px,20vh,220px);padding:0 var(--pad)}
.xg{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
.xc{position:relative;background:var(--bg);min-height:260px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:hidden;isolation:isolate;cursor:default;transition:color .5s var(--ease)}
@media (max-width:1100px){.xg{grid-template-columns:repeat(3,1fr)}}
.xc::before{content:"";position:absolute;inset:0;background:var(--blue);clip-path:circle(0% at 100% 100%);transition:clip-path .8s var(--ease);z-index:-1}
.xc:hover{color:var(--bg)}.xc:hover::before{clip-path:circle(150% at 100% 100%)}
.xc .xn{font-size:11px;color:var(--gray);transition:color .5s,transform .6s var(--ease)}
.xc:hover .xn{color:var(--bg);transform:translateX(6px)}
.xc .xt{font-size:clamp(17px,1.5vw,22px);line-height:1.2;letter-spacing:-.015em;max-width:22ch;transition:transform .7s var(--ease)}
.xc:hover .xt{transform:translateY(-4px)}
.xc .xs{font-size:10px;color:var(--gray);transition:color .5s}
.xc:hover .xs{color:var(--bg)}
.xc.rv{transform:translateY(30px) scale(.97)}.xc.rv.in{transform:none}

/* contact */
.ct{min-height:100vh;position:relative;overflow:hidden}
.ct-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.ct::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(252,249,244,.9),rgba(252,249,244,.72) 55%,rgba(252,249,244,.9))}
.ct-in{position:relative;z-index:1;min-height:100vh;padding:clamp(120px,20vh,200px) var(--pad) 60px;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,6vw,100px);align-items:end}
.ct .muted{color:#6f6f6d}
.ct-h{font-size:clamp(44px,6.4vw,104px);line-height:.95;letter-spacing:-.04em;font-weight:400}
.ct-list a,.ct-list p{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;letter-spacing:0}
.ct-list a span:last-child{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100%/0 1px;transition:background-size .6s var(--ease);justify-self:start}
.ct-list a:hover span:last-child{background-size:100% 1px}

/* footer */
.ft{padding:clamp(60px,10vh,120px) var(--pad) 28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.ft .links{display:flex;gap:22px;flex-wrap:wrap}
.ft .links a:hover{color:var(--blue)}
.ft small{grid-column:1/-1;display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.05em}

@media (max-width:820px){
  .hd{padding:14px var(--pad)}.logo{font-size:16px;white-space:nowrap}.nav{gap:10px}.nav a,.lang{font-size:10px;white-space:nowrap;letter-spacing:.03em}
  .mani,.doors,.split,.sn-text,.duo,.inf-head,.ab,.ct-in{grid-template-columns:1fr}
  .trio-row{grid-template-columns:1fr 1fr}.trio-row figure{margin-top:0!important}
  .xg{grid-template-columns:1fr 1fr}.xc{min-height:190px}.xc:last-child{grid-column:1/-1}
  .door{border-right:0;border-bottom:1px solid var(--line)}
  .grid-ed{grid-template-columns:1fr;gap:56px}.c1,.c2,.c3,.c4{grid-column:auto;margin-top:0}
  .c2,.c4{width:78%;justify-self:end}
  .row{grid-template-columns:40px 1fr 36px}.row .typ{display:none}
  .split .side{position:static;height:auto;padding:0}.split .flow{padding-top:40px}
  .flow .w72,.flow .w58,.flow .w84{width:100%}
  .scatter{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 var(--pad)}
  .scatter .float{position:static!important;width:auto!important;transform:none!important}
  .sn-title{position:static;height:60vh}

  .hs .stick{position:static;height:auto;overflow-x:auto;padding:40px 0;-webkit-overflow-scrolling:touch}
  .hs{height:auto!important}.hs .track{transform:none!important}.hs .track figure{width:68vw}.hs .track figure:nth-child(even){margin-top:0}
  .g-port,.g-sq{grid-template-columns:1fr 1fr}.g-port figure,.g-sq figure{margin-top:0!important}

  .ficha div{grid-template-columns:100px 1fr}
  .ct-list a,.ct-list p{grid-template-columns:90px 1fr}
  .hero .float:nth-of-type(n+4){display:none}.hero .float{width:26vw!important}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.clip{opacity:1!important;transform:none!important;clip-path:none!important}
  .clip img{transform:none!important}
}