/* Host Grotesk, self-hosted (SIL Open Font License, see fonts/OFL.txt) */
@font-face{font-family:"Host Grotesk";src:url("fonts/HostGrotesk-VariableFont_wght.woff2") format("woff2"),url("fonts/HostGrotesk-VariableFont_wght.woff") format("woff");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("fonts/HostGrotesk-Italic-VariableFont_wght.woff2") format("woff2"),url("fonts/HostGrotesk-Italic-VariableFont_wght.woff") format("woff");font-weight:300 800;font-style:italic;font-display:swap}
:root{
  --ground:#ECEBE6;      /* warm paper grey */
  --ground-2:#E2E1DB;    /* one tone step down, for surfaces */
  --ink:#121211;         /* near black */
  --muted:#66635C;       /* secondary notes only */
  --rule:#C9C7C0;        /* index lines */
  --star:#FF5A1F;        /* the asterisk, the only colour */
  --star-ink:#D31900;    /* orange for small text on the paper grey: 4.5:1 (WCAG AA) */
  --star-strong:#EC4000; /* orange for large text and focus rings on the paper grey: 3:1 */
  --band:#121211;        /* black band */
  --band-ink:#ECEBE6;
  --band-muted:#8F8C85;
  --band-rule:#2E2D2A;

  --sans:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gut:clamp(16px,2.2vw,32px);
  --s-text:clamp(16px,1.15vw,18px);
  --s-small:14px;
  --s-row:clamp(30px,4vw,60px);
  --s-statement:clamp(24px,2.5vw,36px);
  --s-head:clamp(40px,6.2vw,104px);
  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-in:cubic-bezier(.3,0,1,1);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  --ground:#141413; --ground-2:#1D1D1B; --ink:#ECEAE4; --muted:#8E8B84; --rule:#33322F;
  --star:#FF6A33; --band:#0B0B0A; --band-ink:#ECEAE4; --band-muted:#8E8B84; --band-rule:#2A2927;
  --star-ink:#FF6A33; --star-strong:#FF6A33;
  color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:var(--s-text);line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--star);color:#fff}
:focus-visible{outline:2px solid var(--star-strong);outline-offset:3px}
.wrap{padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.star{display:inline-block;color:var(--star)}
.star svg{display:block;width:100%;height:100%}
.bar{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:16px;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--ground)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--ground)}
.bar nav{display:flex;gap:clamp(14px,2vw,32px)}
.bar nav a{text-decoration:none;position:relative}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .18s var(--ease-out)}
.bar nav a:hover::after{transform:scaleX(1)}
.bar .right{justify-self:end;display:flex;align-items:center;gap:18px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--ground);border:0;border-radius:999px;
  padding:10px 18px;font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .12s var(--ease-out),background .15s}
.btn:hover{background:var(--star);color:#121211}
.btn:active{transform:scale(.96)}
@keyframes drop{from{opacity:0;transform:translateY(28px) scale(.94)}}
.name{margin:0;font-weight:500;line-height:.86;letter-spacing:-.045em;white-space:nowrap;font-size:12vw;text-transform:uppercase}
.name .line{display:inline-block;white-space:nowrap}
.name .ch{display:inline-block;animation:rise .9s var(--ease-out) backwards}
.name .star{width:.34em;height:.34em;vertical-align:top;margin-left:.04em;margin-top:.02em;animation:spinin 1.2s var(--ease-out) .55s backwards}
@keyframes rise{from{transform:translateY(.5em);opacity:0}}
@keyframes spinin{from{transform:rotate(-200deg) scale(.2);opacity:0}}
.note{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gut)}
.note figure{margin:0;max-width:340px}
.note figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.note .body{display:flex;flex-direction:column;gap:clamp(28px,3vw,48px);min-width:0}
.statement{margin:0;font-size:var(--s-statement);line-height:1.18;letter-spacing:-.015em;max-width:24em}
.statement .star{width:.5em;height:.5em;vertical-align:.45em;margin-right:.06em}
.statement .w{color:var(--muted);transition:color .25s}
.statement .w.on{color:var(--ink)}
.facts{display:grid;gap:var(--gut)}
.facts div{min-width:0}
.facts dt{color:var(--muted);font-size:var(--s-small);margin-bottom:6px}
.facts dd{margin:0}
.sec-head{display:flex;align-items:baseline;gap:.35em;margin:0 0 clamp(24px,3vw,44px);font-size:var(--s-head);font-weight:500;letter-spacing:-.04em;line-height:.95}
.sec-head sup{font-size:.28em;letter-spacing:0;color:var(--muted);font-weight:400;vertical-align:top;position:relative;top:.25em}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rows a{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,2fr) auto;align-items:baseline;gap:var(--gut);
  padding-block:clamp(14px,1.6vw,22px);border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .25s var(--ease-out),color .2s}
.rows .t{font-size:var(--s-row);font-weight:500;letter-spacing:-.035em;line-height:1}
.rows .k,.rows .y{color:var(--muted)}
.rows .y{font-variant-numeric:tabular-nums}
.rows .go{width:22px;height:22px;opacity:0;transform:translateX(-8px) rotate(0);transition:opacity .2s,transform .25s var(--ease-out)}
.rows a:hover{padding-left:14px}
.rows a:hover .go{opacity:1;transform:translateX(0) rotate(45deg)}
.rows a:hover .t{color:var(--ink)}
.rows:hover a:not(:hover) .t{color:var(--muted)}
.peek{position:fixed;left:0;top:0;width:clamp(200px,20vw,300px);aspect-ratio:4/5;pointer-events:none;z-index:20;opacity:0;
  transform:translate(-50%,-50%) scale(.9);transition:opacity .2s,transform .25s var(--ease-out)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover}
.peek .tone{width:100%;height:100%;display:grid;place-items:center;font-weight:600;font-size:28px;letter-spacing:-.03em}
.rows .thumb{display:none}
.band{background:var(--band);color:var(--band-ink)}
.band .muted{color:var(--band-muted)}
.exp .sec-head sup{color:var(--band-muted)}
.jobs{list-style:none;margin:0;padding:0;border-top:1px solid var(--band-rule)}
.jobs li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,6fr);gap:var(--gut);padding-block:24px;border-bottom:1px solid var(--band-rule)}
.jobs .when{font-variant-numeric:tabular-nums;color:var(--band-muted)}
.jobs h3{margin:0;font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.jobs .at{color:var(--band-muted)}
.jobs p{margin:0;max-width:60ch}
.jobs .todo h3,.jobs .todo p{color:var(--band-muted)}
.skills{grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:var(--gut)}
.skills ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1em .5em;font-size:clamp(28px,3.6vw,58px);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.skills li:not(:last-child)::after{content:"·";color:var(--star);margin-left:.5em}
.tools{grid-column:2;margin:0}
.socials{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:40px}
.socials a{text-decoration:none;border-bottom:1.5px solid var(--rule);padding-bottom:2px;transition:border-color .15s}
.legal{justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--s-small)}
.legal a{text-decoration:none}
.js .pre{opacity:0;transform:translateY(24px)}
.js .pre.in{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0ms)}

/* ---------- phone ---------- */
@media (max-width:820px){
.bar{grid-template-columns:auto 1fr}
.bar nav{justify-self:end}
.bar .right{display:none}
.name{white-space:normal}
.name .line{display:block}
.note{grid-template-columns:1fr;padding-block:90px}
.note figure{max-width:60%}
.facts{grid-template-columns:1fr 1fr}
.rows a{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:4px}
.rows .thumb{display:block;grid-row:1 / span 2;width:72px;aspect-ratio:4/5;object-fit:cover;background:var(--ground-2)}
.rows .t{grid-column:2}
.rows .k{grid-column:2;font-size:var(--s-small)}
.rows .y,.rows .go{display:none}
.rows a:hover{padding-left:0}
.skills{grid-template-columns:1fr}
.tools{grid-column:1}
.jobs li{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.pre{opacity:1;transform:none}
}
.bar nav a[aria-current="page"]::after{transform:scaleX(1)}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);margin-bottom:clamp(28px,4vw,60px);transition:color .15s}
.back:hover{color:var(--ink)}
.back svg{width:16px;height:16px;transform:rotate(-135deg)}
.p-title{margin:0;font-size:clamp(56px,11vw,200px);font-weight:500;letter-spacing:-.055em;line-height:.86;text-wrap:balance}
.p-title .star{width:.26em;height:.26em;vertical-align:top;margin-left:.04em;margin-top:.04em}
.p-title .ch{display:inline-block;animation:rise .8s var(--ease-out) backwards}
.p-meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);margin:clamp(28px,3vw,48px) 0 0;padding-top:18px;border-top:1px solid var(--rule)}
.p-meta div{min-width:0}
.p-meta dt{color:var(--muted);font-size:var(--s-small);margin-bottom:6px}
.p-meta dd{margin:0}
.p-lead{margin:clamp(40px,5vw,80px) 0 0;font-size:var(--s-statement);line-height:1.18;letter-spacing:-.015em;max-width:24em}
.todo-note{color:var(--muted);font-size:var(--s-small)}

@media (max-width:820px){
.p-meta{grid-template-columns:1fr 1fr}
}
.more{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:500;border-bottom:1.5px solid var(--ink);padding-bottom:3px;width:max-content;transition:color .15s,border-color .15s}
.more svg{width:14px;height:14px;transition:transform .25s var(--ease-out)}
.more:hover{color:var(--star-ink);border-color:var(--star-ink)}
.more:hover svg{transform:rotate(45deg)}
.jobs a{color:inherit}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3vw,48px)}
.filters button{background:var(--ground-2);color:var(--ink);border:0;border-radius:999px;padding:10px 18px;font:500 15px/1 var(--sans);cursor:pointer;transition:background .15s,color .15s,transform .12s}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.filters button:active{transform:scale(.96)}
.focus{filter:blur(16px);transition:filter 1.1s var(--ease-out)}
@media (prefers-reduced-motion:reduce){
.focus{filter:none}}
.bar nav a{white-space:nowrap}
@media (max-width:820px){
.bar nav{gap:14px;font-size:15px}}
.tile{position:absolute;left:0;top:0;width:var(--s);height:var(--s);border-radius:5px;overflow:hidden;background:var(--ground-2);will-change:transform;cursor:default}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.cfoot{background:var(--band);color:var(--band-ink)}
.cfoot-in{display:flex;flex-direction:column}
.cta{display:flex;flex-direction:column;gap:8px;text-decoration:none;width:max-content;max-width:100%}
.cta span{color:var(--band-muted)}
.cta strong{display:inline-flex;align-items:center;font-size:clamp(56px,11vw,190px);font-weight:500;letter-spacing:-.055em;line-height:.88;transition:color .2s}
.cta strong svg{width:.48em;height:.48em;transition:transform .35s var(--ease-out)}
.cta:hover strong{color:var(--star)}
.cta:hover strong svg{transform:rotate(45deg)}
.cfoot-row{justify-content:space-between;flex-wrap:wrap}
.cfoot .socials a{border-color:var(--band-rule)}
.legal{background:var(--band);color:var(--band-muted)}
.legal a:hover{color:var(--band-ink)}
.bar{display:none}
.hdr{position:fixed;left:0;right:0;top:0;z-index:40;display:grid;align-items:center;gap:16px;padding-top:calc(env(safe-area-inset-top,0px) + 16px);padding-bottom:16px;background:var(--ground);color:var(--ink);transition:background .3s,color .3s}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;width:max-content}
.logo .star{width:24px;height:24px;color:var(--star)}
.menu-btn{justify-self:end;background:none;border:0;color:inherit;cursor:pointer;position:relative}
.menu-btn::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .2s var(--ease-out)}
.menu-btn:hover::after{transform:scaleX(1);transform-origin:left}
.hdr-space{height:calc(env(safe-area-inset-top,0px) + 58px)}
.menu{inset:0}
.menu-big{list-style:none;margin:0;padding:0}
.menu-big a{text-decoration:none;transition:color .15s}
.menu.show .menu-big li:nth-child(2){animation-delay:60ms}
.menu.show .menu-big li:nth-child(3){animation-delay:120ms}
.cover{position:relative;height:100svh;min-height:560px;overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none}
.cover-ui{position:absolute;left:0;right:0;bottom:0;padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
.cover-name{margin:0}
.exp-light{--band-ink:var(--ink);--band-muted:var(--muted);--band-rule:var(--rule);color:var(--ink);background:var(--ground)}
.menu-wrap{justify-self:end;position:relative}
.menu-btn{padding:10px 18px;letter-spacing:0;text-transform:none;font:500 15px/1 var(--sans)}
.menu-btn::after{display:none}
.hdr.over .menu-btn:hover,.hdr .menu-btn[aria-expanded="true"]{background:var(--star);color:#121211}
.hdr.open{background:var(--ground);color:var(--ink)}
.hdr.over.open{background:transparent}
.menu{position:absolute;right:0;top:calc(100% + 10px);inset-inline-start:auto;bottom:auto;left:auto;z-index:41;background:#FF5A1F;color:#1a0d08;display:flex;flex-direction:column;box-shadow:0 18px 40px -18px rgba(0,0,0,.45);transform-origin:top right}
.menu.show{animation:pop .22s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.96)}}
.menu-big a{font-weight:500;letter-spacing:-.03em;line-height:1.1;text-transform:none;color:#1a0d08}
.menu-big a:hover,.menu-big a[aria-current]{color:#fff}
.menu.show .menu-big li{animation:none}
.cover::after{background:none}
.trail{position:absolute;inset:0;overflow:hidden;z-index:1}
.trail img{position:absolute;left:0;top:0;height:auto;max-width:none;pointer-events:none;user-select:none;transform:translate(-50%,-50%) scale(.85);opacity:0;animation:trailin .35s var(--ease-out) forwards}
.trail img.out{animation:trailout .5s var(--ease-in) forwards}
@keyframes trailin{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes trailout{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
.cover-ui{z-index:2;pointer-events:none}
.cover{background:var(--ground);color:var(--ink)}
.cover-name{color:var(--ink)}
.hdr{grid-template-columns:1fr auto 1fr}
.hdr.over{background:transparent;color:var(--ink)}
.hdr.over .menu-btn{background:var(--ink);color:var(--ground)}
.hdr.over.open{color:var(--ink)}
.role{justify-self:center;font-size:15px;font-weight:500;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.hdr:not(.at-top) .role{opacity:0;transform:translateY(-6px);pointer-events:none}
.trail img{box-shadow:none}
.sel{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.4vw,22px)}
.sel-im{position:relative;width:100%}
.sel-im.tall{aspect-ratio:652/876;background:#f8d73a}
.sel-im.sq{aspect-ratio:652/696}
.sel-im img{width:100%;height:100%;object-fit:cover;display:block}
.sel-im.black{background:#000;display:grid;place-items:center}
.cross{width:66%;height:66%;fill:#fff;animation:crossturn 3.2s var(--ease-out) infinite}
@keyframes crossturn{0%,38%{transform:rotate(45deg)}50%,88%{transform:rotate(90deg)}100%{transform:rotate(135deg)}}
.sel-im.sea{background:#bcd9dd}
.stamp img{transition:none}
@media (max-width:820px){
.sel{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){
.cross{animation:none;transform:rotate(45deg)}}
.hdr .menu-btn{background:var(--ink);color:var(--ground)}
.hdr .menu-btn:hover,.hdr .menu-btn[aria-expanded="true"]{background:var(--star);color:#121211}
.role{white-space:nowrap}
@media (max-width:820px){
.hdr{gap:10px}
.role{font-size:13px}
.logo{font-size:12px;gap:6px}
.logo .star{width:16px;height:16px}
.hdr .menu-btn{padding:9px 14px;font-size:14px}}
:root{--sec:clamp(96px,10vw,160px)}
.note{padding-block:var(--sec) 0}
.exp{padding-block:var(--sec) 0}
.index{padding-top:var(--sec);padding-bottom:0}
.cfoot{margin-top:var(--sec)}
.p-head{padding-block:clamp(40px,5vw,80px) 0}
.p-head + *{margin-top:var(--sec)}
.sec-head{margin-bottom:clamp(28px,3vw,48px)}
.facts{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
.portrait img{width:100%;object-fit:cover}
.skills{margin-top:clamp(40px,4.5vw,72px)}
.trail img{width:var(--w,220px);filter:none}
.role-m{display:none;margin:0 0 10px;font-size:15px;font-weight:500}
@media (max-width:820px){
.hdr .role{display:none}
.role-m{display:block}
.hdr{grid-template-columns:1fr auto}}
.plus-cur{position:fixed;left:0;top:0;width:30px;height:30px;pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .15s,transform .2s var(--ease-out)}
.plus-cur.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.plus-cur::before,.plus-cur::after{content:"";position:absolute}
.plus-cur::before{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
.plus-cur::after{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
@media (hover:none){
.sel a{cursor:pointer}}
.totop{display:inline-flex;align-items:center;gap:8px}
.totop svg{width:15px;height:15px;transition:transform .2s var(--ease-out)}
.totop:hover svg{transform:translateY(-3px)}
.menu{border-radius:16px}
.menu-big a{font-size:clamp(34px,3vw,42px)}
.plus-cur{mix-blend-mode:difference}
.plus-cur::before,.plus-cur::after{background:#fff}
.sel-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px 24px;flex-wrap:wrap}
.sel-head .sec-head{margin:0}
.sel a{cursor:pointer}
.plus-cur{display:none}
.sel{--rise:clamp(60px,7.6vw,150px);--ps:clamp(44px,6.4vw,128px)}
.skills > .muted,.facts dt{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted)}
.skills{display:block}
.skills > .muted{display:block;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--rule)}
.tools{margin-top:18px}
.jobs p,.tools{font-size:var(--s-text);line-height:1.5;color:var(--ink)}
.tools{color:var(--muted)}
#trabajo{--rise:clamp(60px,7.6vw,150px);--ps:clamp(44px,6.4vw,128px)}
.dot{color:var(--star);font-weight:800;margin:0 .15em}
#experiencia .sec-head{margin-bottom:clamp(36px,4vw,64px)}
#experiencia .jobs li{grid-template-columns:minmax(0,2.2fr) minmax(0,3.6fr) minmax(0,6.2fr);column-gap:clamp(20px,3vw,48px);padding-block:clamp(22px,2.2vw,32px);align-items:start}
#experiencia .when{font-size:15px;line-height:1.4;padding-top:.25em}
#experiencia h3{font-size:clamp(19px,1.6vw,24px);line-height:1.2;margin-bottom:6px}
#experiencia .at{display:block;font-size:15px;line-height:1.4;color:var(--band-muted)}
#experiencia .jobs p{font-size:clamp(15px,1.05vw,17px);line-height:1.55;max-width:58ch;padding-top:.15em}
#experiencia .skill-list{column-gap:0;row-gap:.12em}
#experiencia .skill-list li{white-space:nowrap}
#experiencia .skill-list li::after{content:none}
#experiencia .skill-list li:not(.br) + li:not(.br)::before{content:"·";color:var(--star);margin:0 .42em}
#experiencia .tools{font-size:15px;color:var(--muted)}
@media (max-width:1100px){
#experiencia .jobs li{grid-template-columns:minmax(0,1.6fr) minmax(0,3fr) minmax(0,4.6fr)}
}
@media (max-width:820px){
#experiencia .jobs li{grid-template-columns:1fr;row-gap:8px}
#experiencia .jobs li > div{order:1}
#experiencia .jobs li > .when{order:2;padding-top:0}
#experiencia .jobs li > p{order:3;max-width:none}
#experiencia .skill-list{flex-direction:column;font-size:clamp(26px,7.2vw,40px);row-gap:.08em}
#experiencia .skill-list li::before{content:none!important}
#experiencia .skill-list li{white-space:normal}
}
#experiencia .tools,#experiencia .skill-list li{text-wrap:balance}
#experiencia .skills{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,9.8fr);column-gap:clamp(20px,3vw,48px);align-items:baseline}
#experiencia .skills > .muted{grid-column:1;padding:0;margin:0;border:0}
#experiencia .skill-list,#experiencia .tools{grid-column:2}
@media (max-width:1100px){
#experiencia .skills{grid-template-columns:minmax(0,1.6fr) minmax(0,7.6fr)}}
@media (max-width:820px){
#experiencia .skills{grid-template-columns:1fr;row-gap:14px}
#experiencia .skill-list,#experiencia .tools,#experiencia .skills > .muted{grid-column:1}}
#experiencia .skills{border-top:0;margin-top:0;padding-top:clamp(28px,2.8vw,40px)}
.sel{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.sel a{display:flex;flex-direction:column;gap:0;text-decoration:none;color:inherit;outline:none}
.sel-fig{position:relative;padding-top:0}
.sel-im{backface-visibility:hidden}
.sel-txt{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.sel-name{font-size:clamp(17px,1.35vw,21px);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.sel-cat{font-size:15px;line-height:1.3;color:var(--muted)}
.sel a:focus-visible .sel-name{text-underline-offset:3px}
@media (max-width:900px){
.sel{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,5vw,44px)}}
#experiencia .tools{margin-top:14px}
.sel{--ez:cubic-bezier(.22,1,.36,1)}
.sel-head{margin-bottom:clamp(28px,3vw,48px)}
.sel-im{overflow:hidden}
.sel-zoom{position:absolute;inset:0;transform:scale(1);transform-origin:50% 50%;transition:transform .4s var(--ez);will-change:transform;backface-visibility:hidden}
.sel-im.black .sel-zoom{display:grid;place-items:center}
.sel-zoom > img{width:100%;height:100%;object-fit:cover;display:block}
.sel-name{display:flex;justify-content:space-between;align-items:baseline;gap:12px;transition:color .4s var(--ez)}
.sel a:hover .sel-name,.sel a:focus-visible .sel-name{color:var(--star-ink)}
.sel a:focus-visible .sel-name{text-decoration:none}
.sel a:focus-visible .sel-im{outline:2px solid var(--star-strong);outline-offset:4px}
@media (hover:none){
.sel a:hover .sel-zoom{transform:none}}
@media (prefers-reduced-motion:reduce){
.sel-zoom,.sel-name{transition:none}
.sel a:hover .sel-zoom,.sel a:focus-visible .sel-zoom{transform:none}
}
.menu{width:min(340px,calc(100vw - 32px));padding:22px 26px 26px;gap:16px;max-height:calc(100svh - 96px);overflow-y:auto}
.menu-big{display:flex;flex-direction:column;gap:6px}
.menu-big a{display:flex;align-items:baseline;gap:14px}
.hdr .menu-btn[aria-expanded="true"],.hdr.over .menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--ground)}
.hdr .menu-btn[aria-expanded="true"]{padding:9px 16px;font-size:14px}
@media (max-width:820px){
.menu-big a{font-size:clamp(30px,8.5vw,38px)}}
.cfoot-in{padding-block:clamp(80px,9vw,140px) clamp(28px,3vw,44px);gap:0}
.cfoot .ask{margin:0 0 clamp(8px,1vw,14px);font-size:clamp(18px,1.6vw,24px);color:var(--band-muted)}
.cta strong{gap:.12em}
.cfoot-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:28px 40px;padding-top:clamp(24px,2.4vw,34px);border-top:1px solid var(--band-rule)}
.fcol{display:flex;flex-direction:column;gap:6px;min-width:0}
.fcol-r{align-items:flex-end;text-align:right}
.flabel{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--band-muted);margin-bottom:8px}
.fmail{font-size:clamp(18px,1.6vw,24px);text-decoration:none;width:max-content;max-width:100%;overflow-wrap:anywhere;border-bottom:1.5px solid var(--band-rule);padding-bottom:2px;transition:color .15s,border-color .15s}
.ftel{font-size:16px;text-decoration:none;width:max-content;color:var(--band-ink);opacity:.85;transition:color .15s}
.fmail:hover,.ftel:hover{color:var(--star);border-color:var(--star)}
.cfoot .socials{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;margin:0;font-size:16px}
.cfoot .socials .dot{margin:0 .7em}
.legal{padding-block:0 clamp(22px,2.4vw,32px)}
.legal{display:grid;grid-template-columns:1fr auto}
.legal > span{grid-column:1}
.legal > a{grid-column:2;justify-self:end}
@media (max-width:820px){
.cfoot-row{grid-template-columns:1fr;row-gap:30px}
.fcol-r{align-items:flex-start;text-align:left}
}
.legal > *{border-top:0;padding-top:0}
.cfoot-in{padding-top:clamp(56px,6vw,96px)}
.cta{margin-bottom:clamp(24px,2.8vw,40px)}
.hdr .menu-btn,.hdr .menu-btn[aria-expanded="true"]{min-width:108px;padding:10px 24px;justify-content:center;font-size:15px}
@media (max-width:820px){
.hdr .menu-btn,.hdr .menu-btn[aria-expanded="true"]{min-width:96px;padding:9px 20px;font-size:14px}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.about-lead{margin:clamp(40px,5vw,80px) 0 0;font-weight:400;letter-spacing:-.02em;text-wrap:pretty}
.about-collage{margin-top:var(--sec)}
.collage{position:relative;user-select:none;-webkit-user-select:none}
.mix-btn{position:absolute;top:0;right:0;z-index:1000;background:var(--star)}
.mix-btn:hover{background:var(--ink);color:var(--ground)}
.cl-item{position:absolute;left:0;top:0;width:180px;cursor:grab;touch-action:pan-y;opacity:0;outline:none;
  transition:transform .95s cubic-bezier(.34,1.45,.64,1),opacity .4s ease;will-change:transform}
.collage.ready .cl-item{opacity:1}
.cl-item img{display:block;width:100%;height:auto;pointer-events:none}
.cl-item.dragging{cursor:grabbing;transition:opacity .4s ease}
.cl-item.dragging img{box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.cl-item:focus-visible{outline:2px solid var(--star-strong);outline-offset:4px}
@media (max-width:820px){
.about-lead{max-width:none}
}
@media (prefers-reduced-motion:reduce){
.cl-item{transition:opacity .2s ease}}
@media (max-width:820px){
.collage{height:clamp(640px,175vw,920px)}}
.cl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,52px)}
.cl-head-t{min-width:0}
.cl-title{margin:0;font-weight:500;letter-spacing:-.04em;line-height:.95}
.dot-end{color:var(--star-strong)}
.cl-hint{margin:clamp(10px,1.2vw,16px) 0 0;font-size:15px;color:var(--muted)}
.cl-head .mix-btn{flex:0 0 auto}
.collage{height:clamp(540px,54vw,860px)}
@media (max-width:820px){
.cl-head{flex-direction:column;align-items:flex-start}
}
.collage{isolation:isolate;z-index:0}
.cl-head .mix-btn{position:relative;z-index:1}
body:has(.about-collage) .p-title{font-size:clamp(48px,7.6vw,132px);line-height:.9}
.about-lead{font-size:var(--s-statement);line-height:1.2;max-width:24em}
.cl-title{font-size:clamp(34px,4.6vw,76px)}
@media (max-width:820px){
.about-lead{font-size:clamp(21px,5.6vw,26px)}}

/* v23: header keeps 3 columns on every page; phones drop the empty middle cell */
@media (max-width:820px){
.hdr > span:empty{display:none}}
.about-collage{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end}
.about-collage .cl-head{grid-column:1;grid-row:1;margin-bottom:0}
.about-collage .sr-only{grid-column:1}
.about-collage .collage{grid-column:1 / -1;grid-row:2;margin-top:clamp(28px,3.4vw,52px)}
.about-collage .mix-btn{grid-column:2;grid-row:1 / 3;align-self:start;justify-self:end;position:sticky;top:calc(var(--hdr-h,62px) + 14px);z-index:5}
@media (max-width:820px){
.about-collage{grid-template-columns:minmax(0,1fr)}
.about-collage .cl-head{grid-row:1}
.about-collage .mix-btn{grid-column:1;grid-row:2 / 4;justify-self:start}
.about-collage .collage{grid-row:3;margin-top:calc(18px + var(--mix-h,36px) + 22px)}
}
.about-collage .cl-title-c{grid-column:1 / -1;grid-row:2;align-self:center;justify-self:center;text-align:center;margin:clamp(28px,3.4vw,52px) 0 0;font-size:clamp(28px,3.4vw,56px);pointer-events:none}
.about-collage .cl-hint{margin-top:0}
@media (max-width:820px){
.about-collage .cl-title-c{grid-row:3;margin-top:calc(18px + var(--mix-h,36px) + 22px);font-size:clamp(26px,7vw,34px)}
}
.about-collage .mix-btn{margin-top:calc((var(--head-h,0px) - var(--mix-h,36px)) / 2)}
@media (max-width:820px){
.about-collage .mix-btn{margin-top:18px}}
.about-collage .cl-title-c{position:relative;z-index:2}
.about-collage .cl-title-c{-webkit-backdrop-filter:blur(14px) saturate(1.1)}
.about-collage .cl-title-c{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;padding:.14em .4em .18em}
.about-collage .cl-title-c::before{content:"";position:absolute;inset:-.45em -1.1em;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--ground) 45%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  -webkit-mask-image:radial-gradient(farthest-side,#000 45%,transparent 100%);mask-image:radial-gradient(farthest-side,#000 45%,transparent 100%)}
.back svg{transition:transform .25s var(--ease-out)}
.back:hover svg{transform:translateX(-4px) rotate(-135deg)}
body:has(.work-list) .p-title{font-size:clamp(48px,7.6vw,132px);line-height:.9}
body:has(.work-list) .p-lead{margin-top:clamp(40px,5vw,80px)}
.p-head + .work-list{margin-top:var(--sec);padding-top:0}
.work-list .filters{margin-bottom:clamp(20px,2.2vw,32px)}
.work-list .filters button:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--ink) 10%,var(--ground-2))}
#work-rows a{position:relative;grid-template-columns:minmax(0,1fr) minmax(0,19em) 4.5em 22px;align-items:baseline;column-gap:clamp(20px,2.4vw,40px);
  padding-block:clamp(18px,1.9vw,28px);transition:color .2s}
#work-rows a:hover{padding-left:0}
#work-rows .t{display:inline-block;transition:transform .45s var(--ease-out),color .25s}
#work-rows .k,#work-rows .y{transition:color .25s}
#work-rows .y{text-align:right}
#work-rows .go{align-self:center;color:var(--star)}
#work-rows a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
#work-rows a:hover::after,#work-rows a:focus-visible::after{transform:scaleX(1)}
#work-rows a:hover .t,#work-rows a:focus-visible .t{transform:translateX(clamp(10px,1.2vw,18px))}
#work-rows a:hover .k,#work-rows a:hover .y{color:var(--ink)}
#work-rows a:focus-visible{outline:none}
#work-rows a:focus-visible .go{opacity:1;transform:translateX(0) rotate(45deg)}
#work-rows li:not([hidden]){animation:row-in .45s var(--ease-out) both}
@keyframes row-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:820px){
.work-list .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);scroll-padding-inline:var(--gut)}
.work-list .filters::-webkit-scrollbar{display:none}
.work-list .filters button{flex:0 0 auto;white-space:nowrap}
#work-rows a{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:8px;column-gap:16px;padding-block:20px}
#work-rows .thumb{display:none}
#work-rows .t{grid-column:1 / -1;grid-row:1;font-size:clamp(34px,10vw,46px)}
#work-rows .k{grid-column:1;grid-row:2;font-size:var(--s-small)}
#work-rows .y{display:block;grid-column:2;grid-row:2;font-size:var(--s-small)}
#work-rows .go{display:none}
#work-rows a:hover .t{transform:none}
}
@media (prefers-reduced-motion:reduce){
#work-rows li:not([hidden]){animation:none}
#work-rows .t,#work-rows a::after{transition:none}}
.sel a:hover .sel-zoom,.sel a:focus-visible .sel-zoom{transform:none}
.sel-im{transform:translate3d(0,0,0);transition:transform .5s var(--ease-out);will-change:transform}
.sel a:hover .sel-im,.sel a:focus-visible .sel-im{transform:translate3d(0,-12px,0)}
@media (hover:none){
.sel a:hover .sel-im{transform:none}}
@media (prefers-reduced-motion:reduce){
.sel-im{transition:none}
.sel a:hover .sel-im,.sel a:focus-visible .sel-im{transform:none}}
.sel-txt{transition:transform .5s var(--ease-out),color .25s}
.sel a:hover .sel-im,.sel a:focus-visible .sel-im,.sel a:hover .sel-txt,.sel a:focus-visible .sel-txt{transform:translate3d(0,-20px,0)}
@media (hover:none){
.sel a:hover .sel-im,.sel a:hover .sel-txt{transform:none}}
@media (prefers-reduced-motion:reduce){
.sel-txt{transition:none}
.sel a:hover .sel-im,.sel a:focus-visible .sel-im,.sel a:hover .sel-txt,.sel a:focus-visible .sel-txt{transform:none}}
.fcv{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:16px;text-decoration:none;width:max-content;color:var(--band-ink);opacity:.85;transition:color .15s,opacity .15s}
.fcv svg{width:15px;height:15px;transition:transform .25s var(--ease-out)}
.fcv:hover{color:var(--star);opacity:1}
.fcv:hover svg{transform:translateY(2px)}
.reveal{margin:clamp(56px,7vw,110px) 0 0}
.reveal-stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ground-2);cursor:crosshair;touch-action:pan-y;
  --x:50%;--y:50%;--r:0px;contain:paint}
.reveal-layer{position:absolute;inset:0}
.reveal-layer > .reveal-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reveal-soft{filter:blur(18px);transform:scale(1.06)}
.reveal-sharp{-webkit-mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 72%,transparent 100%);
  mask-image:radial-gradient(circle var(--r) at var(--x) var(--y),#000 72%,transparent 100%)}
.reveal.all .reveal-sharp{-webkit-mask-image:none;mask-image:none}
.reveal.all .reveal-soft{visibility:hidden}
.reveal figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;color:var(--muted);font-size:var(--s-small)}
.reveal-toggle{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);padding:2px 0;cursor:pointer;transition:border-color .15s,color .15s}
.reveal-toggle:hover{color:var(--star-ink);border-color:var(--star-ink)}
.reveal-toggle:focus-visible{outline:2px solid var(--star-strong);outline-offset:3px}

@media (max-width:820px){
.reveal-stage{aspect-ratio:4/3}
.reveal figcaption{flex-direction:column;align-items:flex-start}
}
.socials .fcv-s{margin:0;font-size:inherit;opacity:1;color:inherit;border-bottom:1.5px solid var(--band-rule);padding-bottom:2px;gap:5px}
.socials .fcv-s svg{width:.85em;height:.85em}
.socials .fcv-s:hover{color:var(--star);border-color:var(--star)}
.cover.has-cstar,.cover.has-cstar *{cursor:none}
.cstar{position:fixed;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;z-index:30;color:var(--star);
  translate:var(--cx,-100px) var(--cy,-100px);opacity:0;scale:.5;rotate:-20deg;
  transition:opacity .5s var(--ease-out),scale .5s var(--ease-out),rotate .6s var(--ease-out);will-change:translate,opacity}
.cstar.on{opacity:1;scale:1;rotate:22deg}
@media (prefers-reduced-motion:reduce){
.cstar{transition:opacity .3s linear;scale:1;rotate:22deg}}
.cstar svg{width:100%;height:100%;display:block}
.hdr .logo,.hdr .role{position:relative;isolation:isolate}
.hdr.over .logo::before,.hdr.over .role::before{content:"";position:absolute;inset:-14px -26px;z-index:-1;pointer-events:none;
  background:color-mix(in srgb,var(--ground) 72%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:radial-gradient(farthest-side,#000 40%,transparent 100%);mask-image:radial-gradient(farthest-side,#000 40%,transparent 100%)}
.cover-ui .role-m{position:relative;isolation:isolate;width:max-content}
.cover-ui .role-m::before{content:"";position:absolute;inset:-12px -22px;z-index:-1;background:color-mix(in srgb,var(--ground) 72%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  -webkit-mask-image:radial-gradient(farthest-side,#000 40%,transparent 100%);mask-image:radial-gradient(farthest-side,#000 40%,transparent 100%)}
.socials a:hover{color:var(--star);border-color:var(--star)}
.name .star-m{display:none}
@media (max-width:820px), (hover:none){
.cover-name .star-m{display:inline-block;vertical-align:top;color:var(--star);animation:spinin 1.2s var(--ease-out) .55s backwards}
.cover-ui .role-m{margin-bottom:clamp(26px,6vw,44px)}
.cover{cursor:default}
}

/* v36: phones/tablets — bigger, tilted star next to «Lucía» (like the desktop cursor); no star cursor there */
@media (max-width:820px), (hover:none){
.cover-name .star-m{width:clamp(40px,11vw,64px);height:clamp(40px,11vw,64px);margin:.02em 0 0 .08em;rotate:22deg}
}
@media (max-width:820px), (hover:none), (pointer:coarse){
.cstar{display:none}
.cover.has-cstar,.cover.has-cstar *{cursor:auto}
}
body.mk .p-head{padding-bottom:0}
.mk-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gut);align-items:end;margin-top:clamp(36px,4.4vw,72px)}
.mk-sub{margin:0;max-width:16em}
.mk-desc{margin:0;max-width:46ch}
.mk-meta{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(36px,4vw,60px)}

@media (max-width:820px){
.mk-intro{grid-template-columns:1fr}
.mk-meta{grid-template-columns:1fr 1fr;row-gap:18px}
.mk-meta div:last-child{grid-column:1 / -1}
}
body.mk .p-title{font-size:clamp(48px,7.6vw,132px);line-height:.9}
.sel-im.cabot-flat{background:#f8d73a}
body.mf .p-title .star{display:none}
.mf-sec{padding-top:clamp(90px,9vw,130px)}
.mf-k{margin:0 0 clamp(16px,1.6vw,22px);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mf-h{margin:0;font-size:var(--s-statement);font-weight:400;letter-spacing:-.02em;line-height:1.3}
.mf-big{font-size:clamp(34px,3.6vw,52px);font-weight:500;letter-spacing:-.035em;line-height:.9;max-width:11em}
.mf-big b,.mf-visit{color:var(--star-strong)}
.mf-big b{font-weight:inherit}
.mf-narrow{max-width:11em}
.mf-split{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);align-items:start}
.mf-txt{display:flex;flex-direction:column;gap:24px;max-width:460px;font-size:15px;line-height:1.65}
.mf-txt p{margin:0}
.mf-statement{margin:0;font-size:var(--s-statement);letter-spacing:-.015em;line-height:1.2;max-width:20em}
.mf-context{margin-top:clamp(40px,4.4vw,62px)}
.mf-mono{width:min(100%,423px);height:auto}
.mf-context .mf-txt{grid-column:2}
.mf-top{align-items:start}
.mf-two span{display:block}
.mf-two .l2{padding-left:clamp(0px,6.8vw,98px)}
.mf-top .mf-txt{padding-top:6px}
.mf-hotels{display:grid;grid-template-columns:minmax(0,535fr) minmax(0,814fr);gap:28px;align-items:start;margin-top:clamp(56px,6vw,85px)}
.mf-fig{margin:0;min-width:0}
.mf-fig figcaption{margin-top:16px;font-weight:500;color:var(--muted)}
.mf-fig img{width:100%;height:auto;display:block}
.mf-role{margin-top:clamp(48px,5vw,70px);grid-template-columns:minmax(0,57fr) minmax(0,43fr)}
.mf-role .mf-txt{max-width:556px;padding-top:4px}
.mf-comp{padding-top:clamp(90px,8.4vw,120px);overflow:hidden}
.mf-intro{margin:0;max-width:817px;font-size:15px;line-height:1.65}
.mf-comp-row{display:grid;grid-template-columns:minmax(0,982fr) minmax(0,699fr);gap:clamp(24px,3vw,44px);align-items:center}
.mf-dec{list-style:none;margin:clamp(56px,5vw,70px) 0 0;padding:0;border-bottom:1px solid var(--rule)}
.mf-dec li{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);align-items:start;padding:26px 0 22px;border-top:1px solid var(--rule)}
.mf-dec h3{margin:0;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.mf-dec p{margin:0;color:var(--muted);line-height:1.46}
.mf-result{margin-top:clamp(40px,4.4vw,62px);max-width:26em}
.mf-fig.e{margin-top:clamp(40px,3.2vw,46px)}
.mf-visit{display:inline-flex;align-items:center;gap:.16em;margin-top:clamp(28px,2.8vw,40px);text-decoration:none;font-size:clamp(36px,3.6vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1.5;transition:opacity .2s}
.mf-visit svg{width:.8em;height:.8em}
.mf-visit:hover svg{transform:translate(4px,-4px)}
.mf-reflect{display:grid;grid-template-columns:minmax(0,480px) minmax(0,592px);margin-top:clamp(24px,2.4vw,36px);padding-top:20px;border-top:1px solid var(--rule)}
.mf-reflect .mf-k{margin:0}
.mf-reflect p:last-child{margin:0}
.mf-more{margin-top:clamp(24px,2.2vw,32px);padding-top:30px;border-top:1px solid var(--rule);padding-bottom:clamp(40px,3vw,30px)}

@media (max-width:820px){
.mf-split,.mf-role,.mf-dec li,.mf-reflect{grid-template-columns:1fr;row-gap:14px}
.mf-context .mf-txt{grid-column:1}
.mf-mono{width:55%}
.mf-two .l2{padding-left:0}
.mf-hotels,.mf-comp-row{grid-template-columns:1fr}
.mf-comp-row{margin:24px var(--gut) 0}
.mf-top .mf-txt{padding-top:16px}
}
@media (prefers-reduced-motion:reduce){
.mf-visit svg{transition:none}}
.mf-fig img.cv{aspect-ratio:var(--ar);object-fit:cover}
.mf-comp-row{margin:clamp(24px,2.6vw,40px) var(--gut) 0}
.mf-wm{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:clamp(96px,11vw,158px);font-weight:700;line-height:.8;letter-spacing:-.06em;color:#E2E1DB;user-select:none;justify-self:start}
@media (max-width:820px){
.mf-wm{font-size:72px;writing-mode:horizontal-tb;transform:none}
}
.cb-meta{grid-template-columns:repeat(6,minmax(0,1fr))}
.cb-display{margin:0;font-size:clamp(40px,4.9vw,70px);font-weight:400;letter-spacing:-.04em;line-height:1.02}
.cb-display span{display:block}
.cb-display .l2{padding-left:clamp(0px,9vw,130px)}
.cb-display b{font-weight:inherit;color:var(--star-strong)}
.cb-reto-txt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,40px);margin:clamp(40px,4.4vw,64px) 0 0 41%;padding-top:20px;border-top:1px solid var(--rule);font-size:15px;line-height:1.65}
.cb-reto-txt p{margin:0;max-width:400px}
.cb-comp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2vw,28px);margin-top:clamp(48px,5vw,72px)}
.cb-comp + .cb-comp{margin-top:clamp(72px,7.5vw,110px)}
.cb-comp.a .cb-shot{grid-column:1 / span 8}
.cb-comp.a .cb-comp-txt{grid-column:9 / -1;align-self:end}
.cb-comp.b .cb-comp-txt{grid-column:1 / span 4;align-self:start;grid-row:1}
.cb-comp.b .cb-shot{grid-column:6 / -1;grid-row:1}
.cb-shot{margin:0}
.cb-shot img{width:100%;height:auto;display:block}
.cb-comp-txt{padding-top:16px;border-top:1px solid var(--rule)}
.cb-num{margin:0 0 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cb-comp-txt h3{margin:0 0 14px;font-size:clamp(22px,1.9vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.15;max-width:13em}
.cb-comp-txt p:last-child{margin:0;font-size:15px;line-height:1.65;max-width:420px}
body.cb .mk-head + .mf-sec{padding-top:clamp(64px,6.4vw,96px)}

@media (max-width:1100px){
.cb-meta{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}
.cb-reto-txt{margin-left:0;grid-template-columns:1fr 1fr}
.cb-comp.a .cb-shot{grid-column:1 / -1}
.cb-comp.a .cb-comp-txt{grid-column:1 / span 8;margin-top:24px}
.cb-comp.b .cb-comp-txt{grid-column:1 / span 8;grid-row:auto;margin-bottom:24px}
.cb-comp.b .cb-shot{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:820px){
body.cb .mk-meta{grid-template-columns:1fr 1fr}
body.cb .mk-meta div:last-child{grid-column:auto}
.cb-display .l2{padding-left:0}
.cb-reto-txt{grid-template-columns:1fr;row-gap:16px}
.cb-comp.a .cb-comp-txt,.cb-comp.b .cb-comp-txt{grid-column:1 / -1}
}
body.cb .mf-top .mf-txt{max-width:520px}
.cb-state-big{margin:clamp(28px,2.8vw,40px) 0 0;font-size:clamp(36px,3.6vw,52px);font-weight:500;letter-spacing:-.035em;line-height:1.5}
.cb-state-big b{font-weight:inherit;color:var(--star-strong)}
@media (max-width:820px){
.cb-state-big{line-height:1.1}}
.cb-context{grid-template-columns:minmax(0,21.5fr) minmax(0,78.5fr);margin-top:clamp(36px,3.6vw,52px)}
.cb-context .mf-wm{font-size:clamp(110px,12.6vw,182px)}
.cb-context .mf-txt{max-width:640px;padding-top:12px}
body.cb .cb-reto2 .mf-top .mf-txt{max-width:650px}
@media (max-width:820px){
.cb-context{grid-template-columns:1fr}
.cb-context .mf-wm{font-size:72px}}
.px3-row{display:flex;gap:clamp(16px,2vw,28px);align-items:flex-start}
.px3-row > .px3-f{flex:var(--r) 1 0;min-width:0;margin:0}
.px3-f img{width:100%;height:auto;display:block}
.px3-context figure{margin:0;max-width:520px}
.px3-context figure img{width:100%;height:auto;display:block}
.px3-system .cb-comp.b .cb-shot{display:flex}
.px3-apps{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,4vw,60px)}
.px3-apps + .mf-reflect{margin-top:clamp(56px,5vw,72px)}
.px3-reflect{display:flex;flex-direction:column;gap:16px}
.px3-reflect p{margin:0}
@media (max-width:820px){
.px3-apps .px3-row{flex-wrap:wrap}
.px3-apps .px3-row > .px3-f{flex:1 1 100%}
}
.mf-visit svg{transition:transform .25s var(--ease-out)}
.mf-visit:hover,.mf-visit:focus-visible{color:var(--star-strong)}
.mf-visit:hover svg,.mf-visit:focus-visible svg{transform:rotate(45deg)}
#experiencia .jobs p{color:var(--ink)}
@media (min-width:821px){
#experiencia .skill-list{font-size:clamp(28px,3.45vw,60px);flex-wrap:nowrap}
}
@media (min-width:821px) and (max-width:1100px){
#experiencia .skill-list{flex-wrap:wrap}
}
.cb-full{margin-top:clamp(40px,3.2vw,46px)}
.cb-full .px3-f img{width:100%;height:auto;display:block}
@media (max-width:820px){
.cb-full .px3-row{flex-direction:column}
.cb-full .px3-row > .px3-f{flex:none;width:100%}}
.cb-full .px3-f img{box-shadow:none}
.cb-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2vw,28px);row-gap:48px;margin-top:clamp(40px,4vw,60px)}
.cb-item{margin:0;min-width:0;display:grid;grid-template-rows:auto 1fr}
.cb-item img{width:100%;height:auto;aspect-ratio:1600/898;display:block}
.cb-item figcaption{margin-top:clamp(20px,2vw,28px);max-width:34em}
.cb-item .cb-num{display:block;margin:0 0 12px}
.cb-item h3{margin:0 0 10px;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.cb-item p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
@media (max-width:820px){
.cb-pair{grid-template-columns:1fr}}
.cb-comps2 .mf-h{max-width:18em}
img[data-zoom]{cursor:zoom-in}
img[data-zoom]:focus-visible{outline:2px solid var(--star-strong);outline-offset:4px}
.cb-full-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px}
.cb-open{background:none;border:0;border-bottom:1.5px solid var(--ink);font:inherit;font-weight:500;color:var(--ink);cursor:pointer;padding:0 0 3px}
.zoom-box{position:fixed;inset:0;z-index:200;background:rgba(18,18,17,.9)}
.zoom-box[hidden]{display:none}
.zoom-scroll{position:absolute;inset:0;overflow:auto;padding:clamp(56px,6vw,80px) var(--gut) var(--gut);display:flex;justify-content:center;align-items:flex-start;overscroll-behavior:contain}
.zoom-scroll img{display:block;width:min(100%,1400px);height:auto;cursor:zoom-out}
.zoom-close{position:absolute;top:14px;right:var(--gut);z-index:1;font:inherit;font-size:15px;font-weight:500;color:#121211;background:#ECEBE6;border:0;border-radius:999px;padding:8px 18px;cursor:pointer}
.zoom-close:focus-visible{outline:2px solid var(--star-strong);outline-offset:3px}
html.zoom-on,html.zoom-on body{overflow:hidden}
.px4-band{margin-top:clamp(56px,6vw,90px)}
.px4-reveal{margin:0}
.px4-reveal .reveal-stage{aspect-ratio:21/9;background:#22211f}
.px4-reveal figcaption{margin-top:14px}
.px3-system .cb-comp-txt h3{max-width:16em}
.px4-color{margin-top:clamp(72px,7.5vw,110px)}
.px4-color-head{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);column-gap:0;row-gap:10px;padding-top:16px;border-top:1px solid var(--rule)}
.px4-color-head .cb-num{grid-column:1;grid-row:1 / span 2;margin:0}
.px4-color-head h3{grid-column:2;margin:0;font-size:clamp(22px,1.9vw,27px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.px4-color-head p:last-child{grid-column:2;margin:0;max-width:460px;font-size:15px;line-height:1.65}
.px4-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(32px,3.2vw,48px)}
.px4-sw{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:clamp(150px,15vw,230px);padding:clamp(16px,1.6vw,24px)}
.px4-sw.a,.px4-sw.b{grid-column:span 3;min-height:clamp(190px,19vw,290px)}
.px4-sw.c,.px4-sw.d,.px4-sw.e{grid-column:span 2}
.px4-sw .n{font-size:clamp(18px,1.6vw,23px);font-weight:500;letter-spacing:-.02em}
.px4-sw .c{font-size:12px;letter-spacing:.04em;line-height:1.6;font-variant-numeric:tabular-nums;opacity:.85}
.px4-note{padding-top:16px;border-top:1px solid var(--rule)}
.px4-note .cb-num{margin:0 0 14px}
.px4-note p:last-child{margin:0;font-size:15px;line-height:1.65;max-width:400px}
@media (max-width:820px){
.px4-reveal .reveal-stage{aspect-ratio:4/3}
.px4-color-head{grid-template-columns:1fr}
.px4-color-head > *{grid-column:1!important;grid-row:auto!important}
.px4-swatches{grid-template-columns:1fr 1fr}
.px4-sw.a,.px4-sw.b,.px4-sw.c,.px4-sw.d,.px4-sw.e{grid-column:span 1;min-height:130px}
.px4-sw.e{grid-column:1 / -1}
}
.px3-system .cb-comp.a .cb-shot{grid-column:1 / span 6}
.px3-system .cb-comp.a .cb-comp-txt{grid-column:8 / -1}
.px3-system .cb-comp.b .cb-shot{grid-column:7 / -1}
@media (max-width:1100px){
.px3-system .cb-comp.a .cb-shot,.px3-system .cb-comp.b .cb-shot{grid-column:1 / -1}
.px3-system .cb-comp.a .cb-comp-txt{grid-column:1 / span 8}
.px3-apps .px3-row:first-child{max-width:none}
}
.px3-apps .px3-row:first-child{max-width:none}
.px4-stories{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,3fr);column-gap:clamp(20px,2vw,28px);align-items:end}
@media (max-width:820px){
.px4-stories{grid-template-columns:1fr;row-gap:20px}}
.px4-reveal .reveal-layer > .reveal-media{object-position:50% 42%}
.px4-logo{display:grid;place-items:center;padding:clamp(24px,4vw,64px) clamp(16px,3vw,48px)}
.px4-logo img{width:min(100%,560px);height:auto}
.px4-x{display:grid;place-items:center;aspect-ratio:16/10;margin:0}
.px4-cross{width:46%;height:auto;aspect-ratio:1;fill:#22211F}
.px4-type{margin-top:clamp(72px,7.5vw,110px)}
.px4-manual{margin-top:clamp(40px,4vw,56px);color:var(--ink)}
.px4-manual:hover,.px4-manual:focus-visible{color:var(--ink)}
@media (max-width:820px){
.px4-x{aspect-ratio:4/3}
.px4-cross{width:40%}}
.px4-context figure{max-width:520px}
.px5-type{margin-top:clamp(32px,3.2vw,48px);border-bottom:1px solid var(--rule)}
.px5-row{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--rule);align-items:start}
.px5-name{margin:0 0 20px;font-size:clamp(22px,1.9vw,27px);font-weight:500;letter-spacing:-.025em}
.px5-info dl{margin:0;max-width:320px}
.px5-info dl div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:12px;padding:7px 0;font-size:15px}
.px5-info dt{color:var(--muted)}
.px5-info dd{margin:0}
.px5-spec img{display:block;height:auto}
.px5-spec .big{width:min(100%,520px)}
.px5-spec .abc{width:min(100%,400px);margin-top:clamp(18px,2vw,28px)}
.px5-spec-w{display:flex;gap:clamp(24px,3vw,48px);align-items:flex-start}
.px5-spec-w > div{flex:1 1 auto;min-width:0}
.px5-spec-w .w{width:clamp(110px,11vw,160px);flex:none}
@media (max-width:820px){
.px5-row{grid-template-columns:1fr;row-gap:24px}
.px5-spec-w{flex-direction:column}
.px5-spec-w .w{width:130px}
}

@media (max-width:820px){
.px3-apps .px4-stories .px3-row > .px3-f{flex:1 1 calc(50% - 10px)}}
.px3-system .cb-comp.b .px4-x{grid-column:8 / -1;aspect-ratio:auto;place-items:start;align-self:start;padding-top:16px}
.px3-system .cb-comp.b .px4-cross{width:clamp(170px,18vw,262px)}
@media (max-width:1100px){
.px3-system .cb-comp.b .px4-x{grid-column:1 / -1;padding-top:28px}}
.legal-intro{max-width:30em}
.legal-page .mf-dec{margin-top:0}
.legal-page .mf-dec h2{margin:0;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.legal-page .mf-dec p{max-width:62ch;color:var(--ink);line-height:1.6}
.legal-page .mf-dec a{color:inherit;text-underline-offset:3px}
.legal-page .mf-dec a:hover{color:var(--star-ink)}
.legal-page{padding-bottom:clamp(90px,9vw,130px)}
.legal-title{overflow-wrap:normal;hyphens:none}
.fpriv{margin-top:10px;font-size:var(--s-small);text-decoration:none;width:max-content;color:var(--band-muted);transition:color .15s}
.fpriv:hover{color:var(--band-ink)}
body:has(.filters) .peek:has(img){aspect-ratio:auto}
body:has(.filters) .peek img{height:auto;object-fit:contain;display:block}
.pgw-f{margin-bottom:clamp(24px,2.4vw,36px)}
.pgw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(12px,1.4vw,20px);align-content:start}
.pgw-item figure{margin:0}
.pgw-im img{width:100%;display:block}
.pgw-item figcaption{justify-content:space-between;gap:12px}
.pgw-c{transition:color .2s}
@media (hover:hover){
.pgw-item:hover .pgw-c{color:var(--star-ink)}}
.pgw .mf-more{margin-top:clamp(56px,6vw,90px)}
@media (max-width:1100px){
.pgw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
.pgw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
.pgw-im img{transition:none}
.pgw-item:hover .pgw-im img{transform:none}}
.pgw-grid{row-gap:clamp(36px,4vw,60px)}
.pgw-im{aspect-ratio:652/696;background:none;overflow:visible;transition:transform .5s var(--ease-out)}
.pgw-im img{height:100%;object-fit:contain;transition:none}
.pgw-item figcaption{display:block;margin-top:14px;padding-top:0;border-top:0;font-size:clamp(17px,1.35vw,21px);font-weight:500;letter-spacing:-.015em;line-height:1.2;transition:transform .5s var(--ease-out),color .25s}
@media (hover:hover){
.pgw-item:hover .pgw-im img{transform:none}
.pgw-item:hover .pgw-im,.pgw-item:hover figcaption{transform:translate3d(0,-20px,0)}
.pgw-item:hover figcaption{color:var(--star-ink)}
}
@media (prefers-reduced-motion:reduce){
.pgw-im,.pgw-item figcaption{transition:none}
.pgw-item:hover .pgw-im,.pgw-item:hover figcaption{transform:none}}
.pgw-idx{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(12px,1.4vw,20px);row-gap:clamp(48px,5vw,80px);align-items:start}
.pgw-idx .pgw-im{aspect-ratio:auto;background:var(--ground-2);overflow:hidden}
.pgw-idx .pgw-im img{height:auto;object-fit:initial;transition:transform .6s var(--ease-out)}
.pgw-idx figcaption{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-size:15px;font-weight:400;letter-spacing:0;line-height:1.35}
.pgw-idx .pgw-t{font-weight:500;color:var(--ink);transition:color .25s}
.pgw-idx .pgw-c{color:var(--muted)}
@media (hover:hover){
.pgw-idx .pgw-item:hover .pgw-im,.pgw-idx .pgw-item:hover figcaption{transform:none}
.pgw-idx .pgw-item:hover figcaption{color:inherit}
.pgw-idx .pgw-item:hover .pgw-im img{transform:scale(1.03)}
.pgw-idx .pgw-item:hover .pgw-t{color:var(--star-ink)}
}
@media (max-width:1100px){
.pgw-idx{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
.pgw-idx{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}
@media (prefers-reduced-motion:reduce){
.pgw-idx .pgw-item:hover .pgw-im img{transform:none}}
.pgw-idx.pgw-3{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){
.pgw-idx.pgw-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){
.pgw-idx.pgw-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v77 — Proyectos personales on phones: one piece per row */
@media (max-width:600px){
.pgw-idx.pgw-3{grid-template-columns:1fr;row-gap:40px}}
/* v78 — Trabajo seleccionado on phones: one project per row */
@media (max-width:600px){
.sel{grid-template-columns:1fr;row-gap:40px}}
.pgw-item,.pgw-item *{cursor:default}
.pgw-idx .pgw-item:hover .pgw-im,.pgw-idx .pgw-item:hover figcaption,.pgw-idx .pgw-item:hover .pgw-im img{transform:none!important}
.pgw-idx .pgw-item:hover .pgw-t{color:var(--ink)!important}
.pgw-idx .pgw-item:hover figcaption{color:inherit!important}
.portrait img{aspect-ratio:3/4;object-position:50% 100%}
.mix-btn{color:#121211}
.skip-link{position:absolute;left:12px;top:-100px;z-index:3000;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--ground);font-weight:500;text-decoration:none}
.skip-link:focus{top:12px;outline:2px solid var(--star-strong);outline-offset:3px}
.totop,.fpriv{min-height:24px;display:inline-flex;align-items:center}
.legal-page .mf-dec a{display:inline-flex;align-items:center;min-height:24px}
.fpriv:hover,.fpriv:focus-visible{color:var(--star)}
.flegal{display:flex;flex-wrap:wrap;align-items:center;margin-top:10px}
.flegal .fpriv{margin-top:0}
.flegal .dot{margin:0 .6em;color:var(--band-muted);font-size:var(--s-small)}
.sm .mf-dec h2 a{text-decoration:none;color:inherit;transition:color .15s}
.sm .mf-dec h2 a:hover,.sm .mf-dec h2 a:focus-visible{color:var(--star-ink)}
.sm-sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sm-sub a{display:inline-flex;align-items:center;min-height:24px;color:var(--ink);text-underline-offset:3px}
.sm-sub a:hover,.sm-sub a:focus-visible{color:var(--star-ink)}
.sm .sm-sub li{display:block;padding:0;border:0}
.sm .sm-sub a{font-size:17px;text-decoration:none}
.sm .sm-sub a:hover{text-decoration:underline}
.legal-page.sm{padding-top:clamp(56px,6vw,90px)}

/* ---- accessibility and technical review (WCAG 2.2 AA) ---- */
/* focus inside the orange menu card: an ink ring, the orange one would not be visible */
.menu :focus-visible{outline-color:#121211}
/* keyboard focus is never hidden under the sticky header */
html{scroll-padding-top:calc(var(--hdr-h,0px) + 8px)}
/* footer control to pause content that moves on its own (WCAG 2.2.2) */
.fmotion{display:inline-flex;align-items:center}
@media (max-width:480px){.fmotion{flex-basis:100%}.fmotion .dot{display:none}}
.fmotion-btn{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.motion-paused .cross{animation-play-state:paused}
/* 404 page */
.nf-head{padding-bottom:clamp(90px,9vw,130px)}
.nf-code{margin-bottom:clamp(10px,1vw,16px)}
.nf-links{display:flex;flex-wrap:wrap;gap:14px clamp(24px,2.4vw,36px);margin-top:clamp(28px,3vw,44px)}