body{margin:0;background:#F6F4F0}
.hr{--bg:#F6F4F0;--ink:#1B1B1A;--gray:#5C606B;--mute:#8A8C92;--line:#D5D1CA;--red:#C8102E;--redd:#A10C24;--sand:#D8D3CB;--night:#1E1E1D;
  --ease:cubic-bezier(.19,.8,.22,1);--sans:'Hanken Grotesk',ui-sans-serif,sans-serif;--serif:'Newsreader',Georgia,serif;
  background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip}
.hr *{box-sizing:border-box}
.hr a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.kick{font:600 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gray);display:flex;align-items:center;gap:18px}
.kick::after{content:"";width:64px;height:1px;background:currentColor;opacity:.6}

/* ---------- reveal system ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block}
.armed [data-rv]:not(.in) .ln>span{transform:translate3d(0,112%,0)}
.armed [data-rv]:not(.in) .fd{opacity:0;transform:translate3d(0,16px,0)}
.go .ln>span{transition:transform 1.15s var(--ease) var(--d,0s)}
.go .fd{transition:opacity .9s ease var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}

/* ---------- header ---------- */
.anc{display:block;height:0;width:0;overflow:hidden;scroll-margin-top:76px}
.bar{position:sticky;top:0;z-index:40;transition:background-color .5s ease,box-shadow .5s ease,-webkit-backdrop-filter .5s,backdrop-filter .5s}
.bar.sc{background:rgba(246,244,240,.84);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(27,27,26,.08)}
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:26px;padding-bottom:22px;position:relative;transition:padding .5s var(--ease)}
.bar.sc .top{padding-top:14px;padding-bottom:12px}
.bar .logo-t{transition:opacity .4s ease,max-height .5s var(--ease);max-height:12px;overflow:hidden}
.bar.sc .logo-t{opacity:0;max-height:0}
.bar .logo{transition:gap .5s var(--ease)}
.bar.sc .logo{gap:0}
.logo{display:inline-flex;flex-direction:column;gap:7px}
.logo-w{font:300 30px/1 var(--sans);letter-spacing:-.02em}
.logo-w b{font-weight:800}
.logo-w i{display:inline-block;position:relative;top:.008em;width:.166em;height:.166em;margin:0 .037em;border-radius:50%;background:var(--red);color:transparent;overflow:hidden;font-style:normal}
.logo-t{font:500 8.5px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gray)}
.nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);flex-wrap:wrap}
.nav a.u{font:500 10.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#4B4E57;padding:8px 0}
.nav a.cur{color:var(--red)}
.u{background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-size:0% 1px;background-position:100% 100%;transition:background-size .55s var(--ease),color .3s}
.u:hover,.u:focus-visible{background-size:100% 1px;background-position:0 100%;color:var(--ink)}
.nav a.cur{background-size:100% 1px}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--red);color:#fff!important;font:500 14px/1 var(--sans);padding:15px 22px;min-height:46px;transition:background .4s ease}
.btn:hover,.btn:focus-visible{background:var(--redd)}
.arr{position:relative;width:12px;height:12px;overflow:hidden;display:inline-block}
.arr svg{position:absolute;inset:0;transition:transform .5s var(--ease)}
.arr svg+svg{transform:translate(-120%,120%)}
.btn:hover .arr svg:first-child,.btn:focus-visible .arr svg:first-child{transform:translate(120%,-120%)}
.btn:hover .arr svg+svg,.btn:focus-visible .arr svg+svg{transform:translate(0,0)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(620px,calc(100vh - 100px),900px);border-bottom:1px solid var(--line);overflow:hidden}
.hero .wrap{position:relative;z-index:2;padding-top:clamp(40px,7vh,80px);padding-bottom:64px}
.h-pre{display:block;font:300 clamp(34px,4.6vw,68px)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 6px}
.h-main{font:800 clamp(58px,9.4vw,150px)/.88 var(--sans);letter-spacing:-.055em;margin:0}
.h-main .red{color:var(--red)}
.h-tag{margin-top:clamp(28px,4vw,46px);font:600 11px/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gray)}
.thr-hero{position:absolute;right:0;bottom:-2%;height:99%;aspect-ratio:1059/1257;z-index:1;pointer-events:none}
.thr-par{width:100%;height:100%;transform:translate3d(calc(var(--mx,0)*-16px),calc(var(--my,0)*-12px + var(--sp,0)*-90px),0) rotate(calc(var(--sp,0)*-3deg));transform-origin:100% 0;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.thr-mask{width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 58%);mask-image:linear-gradient(180deg,#000 42%,transparent 58%);-webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;transform-origin:100% 0}
.armed .thr-hero:not(.in) .thr-mask{-webkit-mask-position:0 100%;mask-position:0 100%;transform:translate3d(28px,-22px,0) rotate(2deg)}
.go .thr-mask{transition:-webkit-mask-position 1.9s cubic-bezier(.62,.04,.3,1),mask-position 1.9s cubic-bezier(.62,.04,.3,1),transform 2.6s var(--ease)}
.thr-img{display:block;width:100%;height:100%;transform-origin:100% 0;animation:breathe 12s ease-in-out infinite;will-change:transform}
@keyframes breathe{0%,100%{transform:translate3d(0,0,0) rotate(0) skewX(0) scale(1)}33%{transform:translate3d(-8px,7px,0) rotate(-.9deg) skewX(.7deg) scale(1.012)}66%{transform:translate3d(5px,11px,0) rotate(.6deg) skewX(-.5deg) scale(1.006)}}

/* ---------- qué hacemos ---------- */
.sec{padding-top:clamp(72px,10vw,128px);padding-bottom:clamp(72px,10vw,120px)}
.s-h{font:800 clamp(46px,6.6vw,104px)/.92 var(--sans);letter-spacing:-.05em;margin:28px 0 0}
.s-h em{font:italic 300 1.08em/.9 var(--serif);letter-spacing:-.035em;color:var(--red)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,6vw,80px)}
.col{padding:0 clamp(18px,2.6vw,40px);border-left:1px solid var(--line)}
.col:first-child{padding-left:0;border-left:0}
.ic{display:block;width:88px;height:80px;overflow:visible}
.ic .o,.ic .t{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.ic .o{stroke:var(--ink);stroke-width:1.5}
.ic .t{stroke:var(--red);stroke-width:1.8}
.ic .f{fill:var(--ink)}
.armed .cols:not(.in) .ic .o,.armed .cols:not(.in) .ic .t{stroke-dashoffset:1}
.armed .cols:not(.in) .ic .f{opacity:0}
.go .ic .o{transition:stroke-dashoffset 1.6s cubic-bezier(.62,.04,.3,1) calc(var(--d,0s) + .2s)}
.go .ic .t{transition:stroke-dashoffset 1.4s cubic-bezier(.62,.04,.3,1) calc(var(--d,0s) + .9s)}
.go .ic .f{transition:opacity .6s ease calc(var(--d,0s) + 1.3s)}
.col:hover .ic .t{animation:redraw 1.3s cubic-bezier(.62,.04,.3,1)}
@keyframes redraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.col h3{font:400 clamp(21px,1.8vw,26px)/1.2 var(--serif);margin:22px 0 18px;letter-spacing:-.01em}
.col p{font:300 15px/1.6 var(--sans);color:var(--gray);margin:0;max-width:34ch}
.tags{margin-top:26px;padding-top:22px;position:relative;font:300 14px/1.75 var(--sans);color:var(--gray)}
.tags::before{content:"";position:absolute;top:0;left:0;width:28px;height:1px;background:var(--mute)}

/* ---------- cómo trabajamos ---------- */
.work{background:var(--night);color:#F2EFEA;clip-path:inset(0 calc((1 - var(--open,1)) * 3.5vw) round calc((1 - var(--open,1)) * 24px))}
.work .kick{color:#CFCBC4}
.w-h{font:800 clamp(52px,7.4vw,118px)/.9 var(--sans);letter-spacing:-.05em;margin:24px 0 0}
.w-sub{margin-top:28px;font:600 11px/1 var(--sans);letter-spacing:.42em;color:var(--red);text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(18px,2vw,32px);margin-top:clamp(48px,6vw,76px)}
.step{transition:opacity .5s ease}
.st-n{display:flex;align-items:center;gap:14px;font:300 32px/1 var(--serif)}
.st-rule{height:1px;width:46px;background:#8B8780;transition:width .8s var(--ease),background .4s ease}
.step h4{font:400 21px/1.2 var(--serif);margin:18px 0 14px;letter-spacing:-.01em}
.step p{font:300 14.5px/1.6 var(--sans);color:#C9C5BE;margin:0}
.steps:hover .step{opacity:.32}
.steps .step:hover{opacity:1}
.steps .step:hover+.step{opacity:.72}
.step:hover .st-rule{width:calc(100% - 52px);background:var(--red)}

/* ---------- detrás ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:44px}
.name{font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 22px}
.ab-lead{font:300 clamp(26px,2.6vw,36px)/1.22 var(--serif);color:#3E4250;letter-spacing:-.015em;margin:0 0 28px}
.ab-p{font:300 17px/1.62 var(--sans);color:var(--gray);margin:0 0 20px;max-width:46ch}
.photo{justify-self:end;width:min(100%,400px);position:relative;margin-top:-40px}
.photo::before{content:"";position:absolute;inset:0;border:1px solid var(--red);border-radius:999px 999px 0 0;transform:translate3d(22px,22px,0) translate3d(0,var(--ry,0px),0);opacity:.55;pointer-events:none}
.ph-in{aspect-ratio:4/5.2;overflow:hidden;border-radius:999px 999px 0 0;clip-path:inset(0 0 0 0);position:relative;z-index:1}
.armed .photo:not(.in) .ph-in{clip-path:inset(100% 0 0 0)}
.go .ph-in{transition:clip-path 1.5s cubic-bezier(.62,.04,.3,1) .1s}
.ph-in img{display:block;width:100%;height:116%;object-fit:cover;object-position:42% 18%;transform:translate3d(0,var(--py,-6%),0) scale(1.04);transition:filter 2.4s ease .6s}
.armed .photo:not(.in) .ph-in img{filter:grayscale(1) contrast(1.05)}
.photo:hover .ph-in img{filter:none}

/* ---------- red ---------- */
.red-sec{border-top:1px solid var(--line)}
.red-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);row-gap:clamp(36px,4vw,56px);align-items:start}
.red-g>.red-h{grid-column:1/-1}
.red-g>.red-txt{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);row-gap:24px;align-items:start}
@media (max-width:820px){.red-g>.red-txt{grid-template-columns:minmax(0,1fr)}}
.red-h{font:800 clamp(46px,6.4vw,104px)/.92 var(--sans);letter-spacing:-.05em;margin:0}
.red-h em{font:italic 300 1.08em/.9 var(--serif);color:var(--red);letter-spacing:-.035em}
.red-p{font:300 17px/1.62 var(--sans);color:var(--gray);margin:0 0 18px;max-width:50ch}

/* ---------- contacto ---------- */
.contact{background:var(--sand);position:relative;overflow:hidden}
.contact .wrap{position:relative;z-index:2}
.c-title{font:800 clamp(56px,8.4vw,136px)/.88 var(--sans);letter-spacing:-.055em;margin:26px 0 0;display:inline-block;cursor:default}
.c-lines{margin-top:30px;font:300 clamp(24px,2.3vw,32px)/1.22 var(--serif);color:var(--red)}
.c-mail{display:inline-block;margin-top:18px;font:600 clamp(22px,2.2vw,30px)/1.3 var(--sans);color:var(--red)!important;letter-spacing:-.01em;padding-bottom:4px;background-size:0% 2px}
.c-mail:hover,.c-mail:focus-visible{background-size:100% 2px;color:var(--red)!important}
.thr-close{position:absolute;right:0;top:clamp(110px,15vw,210px);width:min(52vw,760px);aspect-ratio:879/474;z-index:3}
.armed .thr-close:not(.in) .thr-reach{transform:translate3d(55%,0,0)}
.thr-reach{width:100%;height:100%;transform-origin:100% 10%;transition:transform 1.6s var(--ease) var(--d,0s)}
.contact:has(.c-title:hover) .thr-reach,.contact:has(.c-mail:hover) .thr-reach,.contact:has(.c-mail:focus-visible) .thr-reach{transform:translate3d(-58px,0,0) rotate(1.1deg);transition-duration:1.2s;transition-delay:0s}
.tug{display:block;width:100%;height:100%;transform-origin:100% 10%;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.tug.grabbing{cursor:grabbing}
.tug img{display:block;width:100%;height:100%;transform-origin:100% 10%;animation:sway 6.5s ease-in-out infinite alternate;will-change:transform;pointer-events:none;-webkit-user-drag:none;user-select:none}
@keyframes sway{0%{transform:rotate(-1.3deg) skewX(.6deg)}100%{transform:rotate(1.4deg) translate3d(-8px,0,0) skewX(-.6deg)}}
.c-pad{padding-top:clamp(72px,9vw,120px);padding-bottom:clamp(72px,9vw,120px)}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:34px;padding-bottom:34px}

/* ---------- horizontal: cómo trabajamos ---------- */
.hz .pin{height:var(--pinH,260vh)}
.hz .stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(80px,11vh,110px) 0 clamp(32px,5vh,64px)}
.hz .work .sec{padding-top:0;padding-bottom:0;max-width:none;padding-left:0;padding-right:0;width:100%;min-width:0;overflow:visible}
.hz .work .sec>[data-rv]:not(.steps){max-width:1360px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.hz .prog{margin-left:clamp(20px,5vw,72px);margin-right:clamp(20px,5vw,72px)}
.hz .steps{display:flex;gap:0;width:max-content;margin-top:clamp(36px,6vh,72px);padding-left:max(clamp(20px,5vw,72px),calc((100vw - 1360px) / 2 + 72px));padding-right:12vw;transform:translate3d(var(--tx,0px),0,0);will-change:transform}
.hz .step{width:clamp(320px,31vw,480px);padding-right:clamp(40px,5vw,80px)}
.hz .st-n{font-size:clamp(64px,6vw,96px)}
.hz .step h4{font-size:clamp(26px,2.3vw,34px);margin:26px 0 16px}
.hz .step p{font-size:17px;max-width:30ch}
.prog{display:none;height:2px;background:rgba(255,255,255,.14);margin-top:clamp(36px,6vh,64px);position:relative}
.prog span{position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--pp,0))}
.hz .prog{display:block}
.hz .step{opacity:.3;transition:opacity .8s ease}
.hz .step.on{opacity:1}
.hz .step.on .st-rule{width:calc(100% - 52px);background:var(--red)}

/* ---------- equipo: palabras que se encienden ---------- */
.team-st{font:300 clamp(26px,2.5vw,38px)/1.25 var(--serif);letter-spacing:-.015em;color:var(--ink);margin:0}
.armed .team-st .w{opacity:.14;transition:opacity .45s ease}
.armed .team-st .w.on{opacity:1}

/* ---------- cursor: la punta del hilo ---------- */
.cx{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:60;display:none;opacity:0;transition:opacity .3s}
.has-cur .cx{display:block}
.has-cur .cx.vis{opacity:1}
.has-cur,.has-cur a,.has-cur button{cursor:none!important}
.cx span{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--red);border:1px solid var(--red);transition:width .45s var(--ease),height .45s var(--ease),left .45s var(--ease),top .45s var(--ease),background-color .35s ease}
.cx.big span{width:58px;height:58px;left:-29px;top:-29px;background-color:rgba(200,16,46,0)}
.cx.grab span{width:26px;height:26px;left:-13px;top:-13px}
[data-mag]{display:inline-flex;transition:transform .6s var(--ease)}
.c-mail[data-mag]{display:inline-block}

/* ---------- reduced / still ---------- */
.still .thr-img,.still .tug img{animation:none}
.still .thr-par,.still .thr-reach{transition:none}

/* ---------- mobile ---------- */
.menu-btn{display:none}
@media (max-width:820px){
  .top{flex-wrap:nowrap;padding-top:14px;padding-bottom:12px}
  .bar.sc .top{padding-top:10px;padding-bottom:10px}
  .logo-w{font-size:24px}
  .logo-t{font-size:7.5px;letter-spacing:.24em}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;margin-right:-10px;padding:0 10px;background:none;border:0;color:var(--ink);font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;z-index:2}
  .menu-ic{position:relative;width:22px;height:12px;display:inline-block}
  .menu-ic::before,.menu-ic::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease),top .5s var(--ease)}
  .menu-ic::before{top:2px}.menu-ic::after{top:9px}
  .bar.open .menu-ic::before{top:5.5px;transform:rotate(45deg)}
  .bar.open .menu-ic::after{top:5.5px;transform:rotate(-45deg)}
  .bar .nav{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:96px 24px 40px;background:var(--bg);opacity:0;visibility:hidden;transform:translate3d(0,-12px,0);transition:opacity .45s ease,transform .6s var(--ease),visibility 0s linear .6s;z-index:1}
  .bar.open{background:var(--bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
  .bar.open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .6s var(--ease),visibility 0s}
  .bar .nav a.u{font:300 clamp(32px,9vw,42px)/1.15 var(--serif);letter-spacing:-.015em;text-transform:none;color:var(--ink);padding:6px 0;background-size:0 0}
  .bar .nav a.cur{color:var(--red)}
  .bar .logo{position:relative;z-index:2}
  .bar .nav .btn{display:inline-flex;margin-top:28px}
  .foot .nav{gap:8px 20px}
  .foot .nav a.u{padding:10px 0}
  .hero{min-height:0}
  .hero .wrap{padding-top:28px;padding-bottom:min(98vw,560px)}
  .h-tag{letter-spacing:.2em;line-height:1.6;font-size:10px}
  .thr-hero{height:auto;width:min(86vw,520px)}
  .cols{grid-template-columns:minmax(0,1fr);gap:56px}
  .col{padding:0;border-left:0}
  .col p{max-width:none}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .about,.red-g{grid-template-columns:minmax(0,1fr)}
  .about{gap:56px}
  .ab-lead .ln,.ab-lead .ln>span{display:inline!important;transform:none!important}
  .ab-lead{font-size:clamp(24px,6.6vw,30px)}
  .photo{justify-self:start;width:min(82%,320px);margin-top:0}
  .photo::before{transform:translate3d(14px,14px,0)}
  .red-p{max-width:none}
  .c-title{font-size:clamp(46px,13.5vw,72px)}
  .thr-close{top:auto;bottom:6px;right:-4vw;width:118vw;max-width:none}
  .c-pad{padding-bottom:calc(64vw + 24px)}
}
@media (max-width:480px){.steps{grid-template-columns:minmax(0,1fr)}.w-h{font-size:clamp(44px,12.5vw,60px)}.s-h{font-size:clamp(42px,11.5vw,56px)}}