/* Trabajo real: el propio trabajo como protagonista */
.shows{display:grid;gap:clamp(48px,7vw,104px)}
.show{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4.5vw,64px);align-items:center;text-decoration:none;color:inherit}
.show--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.show--flip .show__vis{order:2}
.show__vis{position:relative;container-type:inline-size;aspect-ratio:7/5;overflow:hidden;border-radius:12px;background:color-mix(in srgb,var(--a) 15%,var(--paper))}
.show__vis{transition:translate .6s var(--ease),box-shadow .6s var(--ease)}
.show:hover .show__vis,.show:focus-visible .show__vis{translate:0 -8px;box-shadow:0 34px 54px -30px rgb(21 19 15 / .55)}
.show__vis>*{transition:translate .6s var(--ease),scale .6s var(--ease)}
.show:hover .win--main,.show:hover .win--img,.show:focus-visible .win--main,.show:focus-visible .win--img{translate:0 -2.6cqw;scale:1.025}
.show:hover .fl--a,.show:focus-visible .fl--a{translate:-3cqw 1.6cqw;scale:1.05}
.show:hover .fl--b,.show:focus-visible .fl--b{translate:2.4cqw -2.2cqw;scale:1.05}
.win,.fl{position:absolute;background:#FCFAF5;color:#15130F;border-radius:clamp(6px,1.1cqw,12px);box-shadow:0 2px 3px rgb(21 19 15 / .12),0 22px 40px -22px rgb(21 19 15 / .5)}
.win{overflow:hidden}
.win--main,.win--img{left:6%;top:8%;width:74%}
.win__bar{display:flex;align-items:center;gap:clamp(3px,.6cqw,6px);padding:1.5cqw 2cqw;border-bottom:1px solid rgb(21 19 15 / .1);font:400 clamp(9px,1.3cqw,13px)/1.2 var(--mono);color:#5C564A;white-space:nowrap}
.win__bar i{width:clamp(6px,1cqw,10px);aspect-ratio:1;border-radius:50%;background:#D8D3C8}
.win__bar i:first-child{background:var(--a)}
.win__bar span{margin-left:1cqw}
.week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1cqw;padding:1.8cqw;min-height:32cqw}
.week>div{display:flex;flex-direction:column;gap:.8cqw}
.week b{font:600 clamp(9px,1.35cqw,14px)/1.2 var(--text);margin-bottom:.4cqw}
.ev{display:flex;flex-direction:column;justify-content:space-between;padding:1cqw;border-radius:clamp(3px,.6cqw,6px);background:color-mix(in srgb,var(--a) 12%,#FCFAF5);border-left:clamp(2px,.4cqw,4px) solid var(--a);font-size:clamp(9px,1.25cqw,13px);line-height:1.2;font-weight:500}
.ev em{font:400 clamp(8px,1.1cqw,11px) var(--mono);font-style:normal;color:#5C564A}
.ev--on{background:var(--a);color:#fff}
.ev--on em{color:#fff}
.fl{padding:clamp(8px,1.6cqw,18px)}
.fl--a{right:4%;bottom:7%;width:46%}
.fl--b{right:6%;top:8%;background:#15130F;color:#FCFAF5;max-width:30%}
.fl--b b{display:block;font:800 clamp(18px,3.4cqw,38px)/1 var(--display);letter-spacing:-.03em;color:var(--mar)}
.fl--b span{display:block;margin-top:.5cqw;font-size:clamp(9px,1.25cqw,13px);line-height:1.2}
.fl__t{font:400 clamp(8px,1.15cqw,12px) var(--mono);text-transform:uppercase;color:#5C564A;margin-bottom:1cqw}
.bar{display:grid;grid-template-columns:22% 1fr auto;gap:1cqw;align-items:center;padding:.4cqw 0;font-size:clamp(9px,1.25cqw,13px)}
.bar i{display:block;height:clamp(5px,.9cqw,9px);width:var(--w);background:var(--c,#15130F);border-radius:99px}
.bar em{font:400 clamp(8px,1.1cqw,11px) var(--mono);font-style:normal}
.mini-heat{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:.5cqw;padding:1cqw;font-size:clamp(9px,1.35cqw,14px)}
.mini-heat th{font-weight:500;font-size:clamp(8px,1.15cqw,12px);text-align:left;padding:.5cqw}
.mini-heat th.me{color:var(--a);font-weight:700}
.mini-heat td{height:6.4cqw;text-align:center;font-family:var(--mono);color:#15130F;border-radius:clamp(2px,.5cqw,5px);background:color-mix(in srgb,#15130F calc(var(--v) * 14%),#F1ECE1)}
.mini-heat td[style*="--v:3"]{color:#FCFAF5}
.mini-heat td.me,.mini-heat td.me[style]{background:color-mix(in srgb,var(--a) calc((4 - var(--v)) * 25%),#FCFAF5);color:#15130F}
.win--img img{display:block;width:100%;aspect-ratio:16/10.5;object-fit:cover;object-position:top}
.win--sub{width:42%;left:auto;top:auto}
.win--sub img{display:block;width:100%;aspect-ratio:4/2.6;object-fit:cover}
.fl--tok{display:flex;align-items:center;gap:.8cqw;max-width:42%;background:#FCFAF5;color:#15130F;top:5%;right:3%}
.fl--tok b{font:600 clamp(10px,1.5cqw,15px)/1.1 var(--mono);color:#15130F;letter-spacing:0}
.tok{flex:none;width:clamp(14px,2.6cqw,28px);aspect-ratio:1;border-radius:50%;margin:0!important}
.tok+.tok{margin-left:-1.6cqw!important;box-shadow:0 0 0 2px #FCFAF5}
.show__k{font:400 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--a)}
.show h3{margin-top:10px;font:700 clamp(30px,3.7vw,52px)/1.02 var(--display);letter-spacing:-.03em}
.show__d{margin-top:12px;color:var(--ink-2);font-size:clamp(16px,1.4vw,18px);line-height:1.45}
.show__m{display:flex;gap:clamp(18px,2.4vw,32px);margin-top:20px;padding-top:14px;border-top:1px solid var(--ink)}
.show__m div{display:flex;flex-direction:column;min-width:0}
.show__m dd{order:1;font:700 clamp(25px,2.7vw,36px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.show__m dt{order:2;margin-top:5px;font:400 11px/1.25 var(--mono);text-transform:uppercase;color:var(--ink-2)}
.show__go{display:inline-flex;gap:8px;margin-top:20px;font-weight:600;text-decoration:underline;text-underline-offset:4px;transition:color .2s}
.show:hover .show__go{color:var(--a)}
.show:hover .show__go .ar{translate:6px 0}
@media (max-width:900px){
  .show,.show--flip{grid-template-columns:minmax(0,1fr)}
  .show--flip .show__vis{order:0}
  .show__vis{aspect-ratio:7/5.4}
  .fl--b{display:none}
  .fl--tok{display:flex}
}

/* Preview de las apps */
.peek{position:fixed;left:0;top:0;z-index:90;width:min(440px,calc(100vw - 32px));pointer-events:none;opacity:0;transform:translateY(10px) scale(.96);transform-origin:var(--ax,50%) 100%;transition:opacity .2s,transform .3s var(--ease)}
.peek.on{opacity:1;transform:none}
.peek.below{transform-origin:var(--ax,50%) 0}
.peek__f{background:#FCFAF5;border-radius:10px;overflow:hidden;box-shadow:0 2px 3px rgb(21 19 15 / .2),0 30px 60px -20px rgb(21 19 15 / .6);border:1px solid rgb(21 19 15 / .12)}
.peek::after{content:"";position:absolute;left:var(--ax,50%);bottom:-7px;width:15px;height:15px;margin-left:-7px;background:#FCFAF5;rotate:45deg;border-right:1px solid rgb(21 19 15 / .12);border-bottom:1px solid rgb(21 19 15 / .12)}
.peek.below::after{bottom:auto;top:-7px;border:0;border-left:1px solid rgb(21 19 15 / .12);border-top:1px solid rgb(21 19 15 / .12)}
.peek__bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid rgb(21 19 15 / .12);font:400 12px var(--mono);color:#5C564A}
.peek__bar i{width:9px;height:9px;border-radius:50%;background:#D8D3C8}
.peek__bar i:first-child{background:var(--ver)}
.peek__bar span{margin-left:8px;color:#15130F}
.peek__img{aspect-ratio:16/10;background:#F1ECE1;overflow:hidden}
.peek__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.peek__img.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 14px 0;background:#15130F}
.peek__img.phones img{border-radius:10px 10px 0 0}

/* Sobre mí: la mesa */
.wall{position:relative;height:1240px}
.wall__hint{margin-bottom:12px}
.pol{--r:0deg;position:absolute;left:var(--x);top:var(--y);width:clamp(200px,20vw,250px);padding:10px 10px 14px;background:#FCFAF5;color:#15130F;box-shadow:0 1px 2px rgb(21 19 15 / .2),0 20px 34px -20px rgb(21 19 15 / .55);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r));transition:box-shadow .25s,scale .25s var(--ease),rotate .25s var(--ease);cursor:grab;touch-action:none;user-select:none}
.pol:hover{rotate:calc(var(--r) * -.45)}
.pol.drag{cursor:grabbing;scale:1.04;rotate:calc(var(--r) * -1);box-shadow:0 2px 4px rgb(21 19 15 / .2),0 40px 54px -22px rgb(21 19 15 / .6)}
.pol img{width:100%;aspect-ratio:1/.84;object-fit:cover;pointer-events:none}
.pol figcaption{margin-top:12px}
.pol .mono{color:#5C564A}
.pol b{display:block;margin-top:5px;font:700 17px/1.12 var(--display);letter-spacing:-.015em}
.pol p{margin-top:6px;font-size:14px;line-height:1.35;color:#5C564A}
.pol--note{width:clamp(156px,16vw,200px);padding:16px 14px;background:var(--c,#F5B21A);min-height:150px}
.pol--note b{margin-top:8px;font-size:17px}
.pol--note p{color:#15130F}
.pol--note .mono{color:#15130F}
@media (max-width:1000px){
  .wall{height:auto;display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,300px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px var(--gut) 28px;margin-inline:calc(var(--gut) * -1);scrollbar-width:none}
  .wall::-webkit-scrollbar{display:none}
  .pol,.pol--note{position:relative;left:auto;top:auto;width:auto;scroll-snap-align:center;touch-action:auto;cursor:default}
  .wall__hint{display:none}
}

/* Trayectoria: línea de tiempo */
.tline{--f:1;position:relative;padding-block:8px}
.tline::before,.tline__fill{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--line)}
.tline__fill{background:var(--ver);transform-origin:50% 0;transform:scaleY(var(--f))}
.tli{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:start;padding-block:clamp(18px,2.6vw,34px)}
.tli__y{padding-top:2px;text-align:right}
.tli__y b{display:block;font:800 clamp(44px,6vw,84px)/.95 var(--display);letter-spacing:-.04em}
.tli__y span{display:block;margin-top:6px;font:400 12px var(--mono);text-transform:uppercase;color:var(--ink-2)}
.tli__dot{justify-self:center;position:relative;z-index:1;width:22px;height:22px;margin-top:12px;border-radius:50%;background:var(--paper);border:3px solid var(--line);transition:background .3s,border-color .3s,scale .3s var(--ease)}
.tli.on .tli__dot{background:var(--ver);border-color:var(--ver)}
.tli--study.on .tli__dot{background:var(--paper)}
.tli--now .tli__dot{animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ver) 50%,transparent)}70%,100%{box-shadow:0 0 0 16px transparent}}
.tli__c{padding:clamp(16px,2vw,24px);background:var(--paper-2);border-radius:8px}
.tli--study .tli__c{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.tli__tag{font:400 11px var(--mono);text-transform:uppercase;color:var(--ver)}
.tli--study .tli__tag{color:var(--ink-2)}
.tli h3{margin-top:4px;font:700 clamp(22px,2.4vw,30px)/1.08 var(--display);letter-spacing:-.02em}
.tli .at{margin-top:4px;font-weight:600;font-size:15px}
.tli p{margin-top:8px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.tli ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tli li{padding:3px 8px;border-radius:4px;background:var(--paper);font:400 11.5px var(--mono)}
.tli:nth-of-type(odd) .tli__y{order:3;text-align:left}
.tli:nth-of-type(odd) .tli__dot{order:2}
.tli:nth-of-type(odd) .tli__c{order:1}
.js .tli[data-tl] .tli__c{opacity:0;translate:var(--from,48px) 18px;scale:.96;transition:opacity .6s,translate .8s var(--ease),scale .8s var(--ease)}
.js .tli[data-tl].seen .tli__c{opacity:1;translate:0 0;scale:1}
.js .tli[data-tl] .tli__y{opacity:0;translate:calc(var(--from,48px) * -.5) 0;transition:opacity .6s .1s,translate .8s .1s var(--ease)}
.js .tli[data-tl].seen .tli__y{opacity:1;translate:0 0}
.js .tli[data-tl] .tli__dot{scale:.5}
.js .tli[data-tl].seen .tli__dot{scale:1}
.js .tli[data-tl].on .tli__dot{scale:1.15}
.tline__fill{transition:transform .35s var(--ease)}
.tli:nth-of-type(odd){--from:-48px}
@media (max-width:800px){
  .tline::before,.tline__fill{left:11px}
  .tli,.tli:nth-of-type(n){grid-template-columns:minmax(0,1fr);padding-left:38px}
  .tli__dot,.tli:nth-of-type(n) .tli__dot{position:absolute;left:0;top:clamp(18px,2.6vw,34px);margin:6px 0 0;order:0}
  .tli__y,.tli:nth-of-type(n) .tli__y{order:0;text-align:left;margin-bottom:10px}
  .tli__c,.tli:nth-of-type(n) .tli__c{order:1}
  .tli,.tli:nth-of-type(n){--from:0px}
  .tli__y b{font-size:44px}
}

/* Casos y colección */
.case-hero__g{grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr)}
.case-vis{--a:var(--ver);aspect-ratio:4/3;overflow:hidden;background:#F1ECE1;color:var(--a);border-top:5px solid var(--a);display:grid;place-items:center}
.case-vis svg,.case-vis img{width:100%;height:100%;object-fit:cover}
.case-hero{overflow-x:clip}
.jump{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px}
.jump a{font-weight:600;text-underline-offset:4px}
.jump a:hover{color:var(--ver)}
.intro{max-width:38em;margin-top:14px;font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:var(--ink-2)}
.pin--on .intro{margin-top:10px}
@media (max-width:1000px){.case-hero__g{grid-template-columns:minmax(0,1fr)}}

/* Carrusel: se arrastra con el ratón y tiene su propia barra */
section:has(>.wrap>.strip){overflow-x:clip}
@media (min-width:761px){
  .strip{grid-auto-columns:clamp(240px,21vw,290px);margin-inline:calc(50% - 50vw);padding-inline:max(var(--gut),calc(50vw - var(--max) / 2 + var(--gut)))}
}
.strip{cursor:grab;user-select:none}
.strip.dragging,.sheet.dragging{cursor:grabbing;scroll-snap-type:none}
.strip .card img,.strip .card svg{-webkit-user-drag:none}
.sbar{position:relative;height:8px;margin-top:10px;background:color-mix(in srgb,var(--ink) 16%,transparent);border-radius:99px;cursor:pointer;touch-action:none;transition:height .2s}
.sbar::before{content:"";position:absolute;inset:-12px 0}
.sbar:hover,.sbar.on{height:12px}
.sbar[hidden]{display:none}
.sbar i{position:absolute;left:0;top:0;height:100%;background:var(--ver);border-radius:99px;will-change:transform}

/* Carta de Adriana */
.card--pink{--c:#FFE1EB;--on:#4A1130}
.card--pink .card__art{background:rgb(74 17 48 / .08)}