/* ============ TOKENS ============ */
:root{
  --black:#0b0b0b;
  --cream:#efe9dd;
  --purple:#7a2cff;
  --lime:#d9ff00;
  --orange:#ff5a0a;
  --u:max(1vw, 13px);              /* unidad fluida del layout */
  --hero-h:calc(var(--u) * 47);
  --nav-gap:calc(var(--u) * 5);
  --display:'Anton', 'Impact', sans-serif;
  --mono:'Space Mono', ui-monospace, monospace;
  --narrow:'Archivo Narrow', 'Arial Narrow', sans-serif;
  --script:'Caveat', cursive;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--black);font-family:var(--mono);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ============ NAV ============ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:40;           /* debajo del busto al inicio */
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--u)*1) calc(var(--u)*2.8);
  color:#fff;
  transition:padding .45s cubic-bezier(.2,.8,.2,1), background .45s, backdrop-filter .45s, box-shadow .45s;
}
.nav__logo{display:flex;align-items:center;gap:14px;font-family:var(--narrow);font-weight:700;font-size:15px;line-height:1;letter-spacing:.02em}
.nav__logo svg{width:44px;height:44px;transition:width .4s,height .4s}
.nav__links{position:absolute;left:calc(var(--u)*25.3);display:flex;gap:calc(var(--u)*2.1);font-family:var(--narrow);font-weight:700;font-size:14px;letter-spacing:.02em}
.nav__links a{position:relative;padding:8px 0;transition:color .2s}
.nav__links a.is-active{background:var(--lime);color:#000;padding:8px 18px;margin:-0px calc(var(--u)*-.6);margin-right:calc(var(--u)*-.6)}
.nav__links a:not(.is-active):hover{color:var(--lime)}
.nav__right{display:flex;align-items:center;gap:calc(var(--u)*2)}
.nav__search{background:none;border:0;color:#fff;width:22px;height:22px;cursor:pointer}
.nav__cta{font-family:var(--narrow);font-weight:700;font-size:14px;border:2px solid #fff;border-radius:40px;padding:13px 30px;transition:background .25s,color .25s}
.nav__cta:hover{background:#fff;color:#000}

/* Estado tras el scroll: el menú se "acomoda" */
.nav.is-scrolled{
  z-index:60;                                           /* ahora pasa por encima del busto */
  padding:10px calc(var(--u)*2.8);
  background:rgba(11,11,11,.82);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.25);
}
.nav.is-scrolled .nav__logo svg{width:30px;height:30px}
.nav.is-scrolled .nav__links{position:static;margin-left:auto;margin-right:auto}
.nav.is-scrolled .nav__cta{padding:9px 22px}

/* ============ HERO ============ */
.hero{position:relative;height:var(--hero-h);background:var(--cream);color:#fff}
.hero__bg{position:absolute;inset:0;overflow:hidden;z-index:1}
.layer{position:absolute;inset:0;will-change:transform}

.orange-circle{position:absolute;left:calc(var(--u)*72);top:calc(var(--u)*3.5);width:calc(var(--u)*21);height:calc(var(--u)*21);border-radius:50%;background:var(--orange)}
.shape--purple-big{position:absolute;left:calc(var(--u)*38.5);top:calc(var(--u)*5);width:calc(var(--u)*22);height:calc(var(--u)*26);
  background:linear-gradient(160deg,#8b3cff,#5b17c9);clip-path:polygon(45% 0,100% 8%,86% 55%,100% 100%,0 100%,12% 48%)}
.shape--pixels{position:absolute;left:calc(var(--u)*72);top:calc(var(--u)*15.5);width:calc(var(--u)*21.5);height:calc(var(--u)*15.5);
  background:
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--u)*1.8) calc(var(--u)*1.8),
    linear-gradient(0deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--u)*1.8) calc(var(--u)*1.8),
    linear-gradient(135deg,#9a55ff 0%,#5420b8 55%,#2a0f66 100%);
  clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%,20% 75%,20% 52%,45% 52%,45% 28%,75% 28%)}
.shape--lime{position:absolute;left:calc(var(--u)*40);top:calc(var(--u)*29.5);width:calc(var(--u)*8);height:calc(var(--u)*4.2);background:var(--lime);clip-path:polygon(0 100%,18% 0,100% 0,100% 100%)}

.cross{position:absolute;width:30px;height:30px}
.cross::before,.cross::after{content:"";position:absolute;background:#fff}
.cross::before{left:50%;top:0;bottom:0;width:1px}
.cross::after{top:50%;left:0;right:0;height:1px}
.cross--1{left:calc(var(--u)*2.2);top:calc(var(--u)*7)}
.cross--2{left:calc(var(--u)*96.5);top:calc(var(--u)*17.8)}
.cross--2::before,.cross--2::after{background:var(--lime)}
.cross--3{left:calc(var(--u)*94.2);top:calc(var(--u)*5.2);opacity:.8;transform:scale(.7)}
.vline{position:absolute;right:calc(var(--u)*3.2);top:calc(var(--u)*4.5);height:calc(var(--u)*9);display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;font-size:11px;color:#fff}
.vline b{width:14px;height:1px;background:#fff}

/* contenido */
.hero__content{position:absolute;inset:var(--nav-gap) 0 0 0;z-index:3;pointer-events:none}
.hero__content a{pointer-events:auto}
.headline{position:absolute;left:calc(var(--u)*4.1);top:calc(var(--u)*6.5);font-family:var(--display);font-weight:400;font-size:calc(var(--u)*8.5);line-height:.86;text-transform:uppercase;letter-spacing:-.005em;color:var(--cream)}
.headline__line{display:block;transform:skewX(-9deg);transform-origin:left bottom;opacity:0;animation:rise .9s cubic-bezier(.2,.9,.2,1) forwards}
.headline__line.l2{animation-delay:.12s}
.headline__obvious{display:inline-block;margin-left:calc(var(--u)*3.6);margin-top:calc(var(--u)*.4);position:relative;transform:skewX(-9deg);transform-origin:left bottom;opacity:0;animation:rise .9s .24s cubic-bezier(.2,.9,.2,1) forwards}
.headline__obvious::before{content:"";position:absolute;inset:calc(var(--u)*.5) calc(var(--u)*-1.4) calc(var(--u)*-.3) calc(var(--u)*-.6);background:var(--lime);z-index:-1;transform-origin:left;animation:wipe .8s .5s cubic-bezier(.7,0,.2,1) both}
.headline__obvious em{font-style:normal;color:#000;position:relative}
.headline{z-index:2;isolation:isolate}
@keyframes rise{from{opacity:0;transform:translateY(40px) skewX(-9deg)}to{opacity:1;transform:translateY(0) skewX(-9deg)}}
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.script{font-family:var(--script);font-weight:500}
.script--tag{position:absolute;left:calc(var(--u)*33.2);top:calc(var(--u)*5.6);font-size:calc(var(--u)*2.3);line-height:1.05;transform:rotate(-8deg);color:#fff}
.script--tag svg{width:58px;height:18px;vertical-align:middle;margin-left:6px}

.services{position:absolute;left:calc(var(--u)*78.7);top:calc(var(--u)*5.5);display:flex;flex-direction:column;gap:7px;font-size:12px;letter-spacing:.05em;color:#fff;line-height:1}
.hero__sub{position:absolute;left:calc(var(--u)*11);top:calc(var(--u)*34.5);display:flex;align-items:flex-start;gap:calc(var(--u)*1.2);font-size:12.5px;letter-spacing:.07em;line-height:1.4}
.hero__sub .hline{width:calc(var(--u)*2.9);height:1px;background:#fff;margin-top:8px}
.btn-explore{position:absolute;left:calc(var(--u)*8.2);top:calc(var(--u)*37.8);background:var(--cream);color:#000;font-size:12.5px;letter-spacing:.1em;padding:calc(var(--u)*1.05) calc(var(--u)*2.2);display:flex;gap:calc(var(--u)*3);transition:background .25s,transform .25s}
.btn-explore:hover{background:var(--lime);transform:translate(3px,-3px)}
.cursor{position:absolute;left:calc(var(--u)*34.5);top:calc(var(--u)*29.6);width:calc(var(--u)*2.6);animation:cursorMove 4s ease-in-out infinite}
@keyframes cursorMove{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,-10px)}}

/* ===== Papel con textura (frente, animado) ===== */
.paper-wrap{position:absolute;left:0;right:0;bottom:-1px;height:calc(var(--u)*10);z-index:2;will-change:transform;pointer-events:none}
.paper{position:absolute;inset:0;background-color:var(--cream);
  clip-path:polygon(0 38%,1.6% 30%,2.4% 40%,3.8% 28%,5% 44%,6.8% 36%,8% 58%,10.5% 50%,13% 70%,17% 78%,23% 90%,32% 94%,100% 94%,100% 100%,0 100%);
  animation:paperWobble 7s ease-in-out infinite alternate}
.paper::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.28;mix-blend-mode:multiply}
@keyframes paperWobble{
  0%{clip-path:polygon(0 38%,1.6% 30%,2.4% 40%,3.8% 28%,5% 44%,6.8% 36%,8% 58%,10.5% 50%,13% 70%,17% 78%,23% 90%,32% 94%,100% 94%,100% 100%,0 100%);transform:translateX(0)}
  50%{clip-path:polygon(0 30%,1.6% 38%,2.4% 30%,3.8% 40%,5% 34%,6.8% 46%,8% 48%,10.5% 62%,13% 62%,17% 84%,23% 82%,32% 92%,100% 92%,100% 100%,0 100%);transform:translateX(5px)}
  100%{clip-path:polygon(0 42%,1.6% 34%,2.4% 36%,3.8% 32%,5% 40%,6.8% 42%,8% 52%,10.5% 54%,13% 66%,17% 72%,23% 94%,32% 90%,100% 95%,100% 100%,0 100%);transform:translateX(-4px)}}

.note-wrap{position:absolute;right:calc(var(--u)*1.6);bottom:calc(var(--u)*3.4);width:calc(var(--u)*21.5);z-index:4;will-change:transform}
.note{position:relative;padding:calc(var(--u)*2.4) calc(var(--u)*3) calc(var(--u)*3);background:var(--cream);color:#1a1a1a;transform:rotate(-8deg);
  clip-path:polygon(2% 12%,6% 2%,12% 10%,20% 0,34% 6%,48% 0,62% 8%,78% 2%,92% 8%,100% 0,98% 30%,100% 55%,96% 80%,100% 100%,80% 94%,64% 100%,48% 92%,30% 100%,14% 94%,0 100%,3% 70%,0 40%);
  animation:noteFloat 5s ease-in-out infinite alternate;box-shadow:none}
.note::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.3;mix-blend-mode:multiply}
.note .script{position:relative;font-size:calc(var(--u)*3);line-height:1;font-weight:500;transform:rotate(-4deg)}
.note__stroke{position:absolute;left:8%;right:6%;bottom:calc(var(--u)*1.3);width:86%;height:calc(var(--u)*1.4)}
.note__stroke path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.2s 1.1s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes noteFloat{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(-5.5deg) translateY(-9px)}}

/* ===== BUSTO — capa superior ===== */
.bust{position:absolute;z-index:50;left:calc(var(--u)*37.5);top:calc(var(--u)*-3);width:calc(var(--u)*44);height:calc(var(--u)*50);overflow:hidden;pointer-events:none;will-change:transform;
  -webkit-mask-image:linear-gradient(#000 93%,transparent);mask-image:linear-gradient(#000 93%,transparent);
  animation:bustIn 1.2s cubic-bezier(.2,.9,.2,1) both}
.bust img{display:block;width:100%;height:auto;user-select:none}
@keyframes bustIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}

/* ============ SECCIONES ============ */
.sections{position:relative;z-index:1;background:var(--cream)}
.heads{display:grid;grid-template-columns:36.5fr 31.5fr 32fr;height:calc(var(--u)*9.5)}
.head{position:relative;display:flex;align-items:center;gap:calc(var(--u)*3);padding:0 calc(var(--u)*2) 0 calc(var(--u)*2);overflow:hidden;transition:filter .3s}
.head small{position:absolute;left:calc(var(--u)*2);top:calc(var(--u)*1.2);font-size:11px;letter-spacing:.1em}
.head h2{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*4.4);line-height:.88;text-transform:uppercase;transform:skewX(-9deg);transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.head p{font-size:12px;line-height:1.55;letter-spacing:.02em}
.head .arrow{position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*.9);font-size:20px;transition:transform .3s}
.head:hover h2{transform:skewX(-9deg) translateX(8px)}
.head:hover .arrow{transform:translateX(10px)}
.head--work{background:var(--cream);color:#000}
.head--work p{margin-left:auto;max-width:calc(var(--u)*13.5)}
.head--exp{background:var(--purple);color:#fff}
.head--exp h2{font-size:calc(var(--u)*4.2)}
.head--exp .arrow{left:calc(var(--u)*2);}
.head--notes{background:var(--black);color:#fff}
.head--notes p{margin-left:auto;max-width:calc(var(--u)*8.6)}

.cards{display:grid;grid-template-columns:19fr 17.3fr 16fr 15.7fr 32fr;height:calc(var(--u)*22)}
.card{position:relative;border-right:1px solid rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;background:var(--cream)}
.card__art{position:relative;flex:1;overflow:hidden;transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.card:hover .card__art{transform:scale(1.045)}
.card footer{flex:none;height:calc(var(--u)*2.1);min-height:30px;display:flex;align-items:center;gap:9px;padding:0 14px;font-family:var(--narrow);font-weight:700;font-size:10px;letter-spacing:.06em;background:var(--cream);position:relative;z-index:2;border-top:1px solid rgba(0,0,0,.08)}
.card footer em{margin-left:auto;font-style:normal;font-size:18px;transition:transform .3s}
.card:hover footer em{transform:translateX(5px)}

/* card 1 */
.card--n47 .card__art{background:var(--orange)}
.foil{position:absolute;inset:0;background:
  conic-gradient(from 20deg at 30% 40%,#888,#eee,#555,#ddd,#777,#fff,#666,#999,#888);filter:contrast(1.1);clip-path:polygon(0 0,45% 0,70% 12%,100% 0,100% 100%,0 100%);opacity:.9;
  mask-image:var(--grain)}
.orange-tag{position:absolute;right:0;top:0;width:50%;height:100%;background:var(--orange)}
.box{position:absolute;left:12%;top:12%;width:70%;height:84%;background:#0e0e0e;transform:rotate(-8deg);color:#fff;padding:10% 0 0 14%;box-shadow:10px 14px 24px rgba(0,0,0,.4)}
.box b,.box strong{display:block;font-family:var(--display);font-weight:400;font-size:calc(var(--u)*5.6);line-height:.9;transform:skewX(-9deg)}
.box strong{margin-left:calc(var(--u)*1.2);font-size:calc(var(--u)*6.4)}
.box small{position:absolute;left:12%;bottom:8%;font-size:8px;letter-spacing:.08em;line-height:1.3}
.barcode{position:absolute;right:8%;bottom:8%;width:34%;height:12%;background:var(--lime) repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px)}

/* card 2 */
.card--lab .card__art{background:#14102a}
.lab-bg{position:absolute;inset:0;background:linear-gradient(135deg,#caa6ff 0 38%,#0a0a0a 38%)}
.laptop{position:absolute;left:8%;top:12%;width:92%;height:68%;background:#1b1b1f;border:6px solid #2c2c32;border-radius:8px;transform:perspective(500px) rotateX(8deg) rotateY(-6deg) rotate(-3deg);box-shadow:0 20px 30px rgba(0,0,0,.5)}
.screen{position:absolute;inset:0;background:radial-gradient(circle at 70% 85%,#555,transparent 55%),#0a0a0d;padding:10%;color:#fff}
.screen h3{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*2.1);line-height:.95;transform:skewX(-9deg)}
.screen i{position:absolute;right:0;bottom:0;width:62%;height:52%;background:linear-gradient(150deg,transparent 0 30%,#aaa 30% 45%,#555 45% 60%,#ccc 60% 70%,#333 70%);clip-path:polygon(0 100%,35% 20%,55% 55%,75% 10%,100% 60%,100% 100%)}

/* card 3 */
.card--glitch .card__art{background:#e9e4d8}
.grid-lines{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.18) 1px,transparent 1px) 0 0/16px 16px,
  linear-gradient(0deg,rgba(0,0,0,.18) 1px,transparent 1px) 0 0/16px 16px;mask-image:linear-gradient(90deg,#000 0 35%,transparent 70%)}
.glitch-bust{position:absolute;inset:0;background:url(assets/busto.webp) 8% -4%/230% auto no-repeat;filter:grayscale(1) contrast(1.15);animation:glitch 3.4s steps(1) infinite}
.lime{position:absolute;background:var(--lime)}
.l1{left:34%;top:19%;width:36%;height:6%}
.l2{left:2%;top:40%;width:28%;height:6%}
.l3{left:36%;top:51%;width:14%;height:10%}
@keyframes glitch{0%,88%,100%{transform:none;clip-path:none}90%{transform:translateX(-5px);clip-path:inset(30% 0 40% 0)}93%{transform:translateX(6px);clip-path:inset(60% 0 10% 0)}96%{transform:translateX(-2px)}}

/* card 4 */
.card--fluid .card__art{background:#050505}
.card--fluid .blob{position:absolute;inset:6% -6% -4% -10%;width:116%;height:98%;animation:blobFloat 6s ease-in-out infinite alternate}
.card--fluid .num{position:absolute;right:12%;top:8%;font-family:var(--display);font-weight:400;font-size:calc(var(--u)*3.6);color:#fff;z-index:2;font-stretch:condensed}
.card--fluid .tick{position:absolute;left:14%;top:4%;bottom:4%;width:1px;background:rgba(255,255,255,.4);z-index:2}
@keyframes blobFloat{to{transform:translate(8px,-12px) rotate(3deg) scale(1.04)}}

/* notas */
.notes-col{display:flex;flex-direction:column;background:var(--cream);border-left:1px solid rgba(0,0,0,.12)}
.note-row{flex:1;display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.9) calc(var(--u)*1.4);position:relative;border-bottom:1px solid rgba(0,0,0,.14);transition:background .25s}
.note-row:last-child{border-bottom:0}
.note-row:hover{background:#e6dfd0}
.thumb{flex:none;width:calc(var(--u)*7.6);height:calc(var(--u)*7.6);position:relative;overflow:hidden;background:#111}
.thumb--ai{background:linear-gradient(#cfcfcf,#555)}
.thumb--ai i{position:absolute;inset:14% 12% 0 24%;background:url(assets/busto.webp) 40% 10%/190% auto no-repeat;filter:grayscale(1) brightness(1.25);mix-blend-mode:normal}
.thumb--ai::after{content:"";position:absolute;left:20%;right:0;top:44%;height:14%;background:var(--purple);opacity:.85}
.thumb--geo{background:#e5e5e5}
.thumb--geo i{position:absolute;inset:0;background:linear-gradient(135deg,#111 0 50%,transparent 50%),linear-gradient(#111,#111) 0 0/55% 100% no-repeat;clip-path:polygon(0 0,60% 0,100% 100%,0 100%)}
.thumb--geo::after{content:"";position:absolute;right:8%;bottom:0;width:40%;height:42%;background:var(--orange)}
.note-row small{font-family:var(--narrow);font-weight:700;font-size:10.5px;color:var(--purple);letter-spacing:.04em}
.note-row h3{font-family:var(--narrow);font-weight:700;font-size:calc(var(--u)*1.28);line-height:1.04;margin:4px 0 6px;text-transform:uppercase}
.note-row p{font-size:10px;line-height:1.35}
.note-row em{margin-left:auto;font-style:normal;font-size:20px;transition:transform .3s}
.note-row:hover em{transform:translateX(6px)}

/* marquee + contact */
.marquee{background:var(--lime);overflow:hidden;border-block:1px solid #000;white-space:nowrap}
.marquee__track{display:inline-flex;animation:marquee 28s linear infinite}
.marquee span{font-family:var(--display);font-size:calc(var(--u)*3.4);padding:calc(var(--u)*1) 0;transform:skewX(-9deg);color:#000}
@keyframes marquee{to{transform:translateX(-50%)}}
.contact{position:relative;background:var(--black);color:#fff;padding:calc(var(--u)*8) calc(var(--u)*4) calc(var(--u)*9);overflow:hidden}
.contact small{font-size:11px;letter-spacing:.1em;color:var(--lime)}
.contact h2{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*8);line-height:.92;margin:calc(var(--u)*1.5) 0 calc(var(--u)*2.5);transform:skewX(-9deg)}
.contact h2.reveal{transform:translateY(30px) skewX(-9deg)}
.contact h2.reveal.in{transform:skewX(-9deg)}
.contact h2 em{font-style:normal;color:var(--black);background:var(--lime);padding:0 .15em}
.contact p{max-width:calc(var(--u)*34);font-size:13px;line-height:1.7;margin-bottom:calc(var(--u)*2.5)}
.btn-explore--static{position:static;display:inline-flex}
.contact::after{content:"";position:absolute;right:-6vw;top:10%;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;background:var(--orange);z-index:0;opacity:.95}
.contact>*{position:relative;z-index:1}

/* footer */
.bar{display:flex;align-items:center;gap:calc(var(--u)*1.2);height:calc(var(--u)*2.9);min-height:44px;padding:0 calc(var(--u)*2.8);background:var(--cream);border-top:1px solid rgba(0,0,0,.18);font-family:var(--narrow);font-weight:700;font-size:13px}
.bar svg{width:20px;height:20px}
.bar__line{flex:1;height:1px;background:#000;max-width:calc(var(--u)*50)}
.bar nav{display:flex;gap:calc(var(--u)*1.6);margin-left:auto;font-weight:500;font-size:12px;letter-spacing:.06em}
.bar nav a:hover{color:var(--purple)}
.bar__dots{display:flex;gap:6px;margin-left:calc(var(--u)*5)}
.bar__dots b{width:calc(var(--u)*1.7);height:10px;border:1px solid #000}
.bar__dots b.on{background:var(--lime)}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s, transform .8s cubic-bezier(.2,.9,.2,1)}
.reveal.in{opacity:1;transform:none}
.cards .reveal:nth-child(2){transition-delay:.08s}
.cards .reveal:nth-child(3){transition-delay:.16s}
.cards .reveal:nth-child(4){transition-delay:.24s}
.cards .reveal:nth-child(5){transition-delay:.32s}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  :root{--u:max(1.6vw,9px);--hero-h:auto}
  .nav__links{display:none}
  .hero{height:auto;min-height:calc(100vw*1.7);padding-bottom:0}
  .headline{font-size:17vw;left:5vw;top:24vw}
  .headline__obvious{margin-left:6vw}
  .script--tag{left:auto;right:6vw;top:20vw;font-size:5vw}
  .services{display:none}
  .bust{left:30vw;top:62vw;width:72vw;height:75vw}
  .hero__sub{left:5vw;top:auto;bottom:34vw;position:absolute}
  .btn-explore{left:5vw;top:auto;bottom:18vw}
  .cursor{display:none}
  .orange-circle{left:50vw;top:40vw;width:52vw;height:52vw}
  .shape--purple-big{left:20vw;top:60vw;width:55vw;height:70vw}
  .shape--pixels{left:60vw;top:100vw;width:40vw;height:40vw}
  .shape--lime{left:20vw;top:120vw;width:24vw;height:10vw}
  .paper-wrap{height:22vw}
  .note-wrap{width:50vw;bottom:10vw;right:2vw}
  .note .script{font-size:7vw}
  .heads{grid-template-columns:1fr;height:auto}
  .head{min-height:34vw;padding:8vw 5vw}
  .head h2{font-size:12vw}
  .cards{grid-template-columns:1fr 1fr;height:auto}
  .card{min-height:70vw}
  .notes-col{grid-column:1/-1}
  .note-row{padding:5vw}
  .thumb{width:28vw;height:28vw}
  .note-row h3{font-size:4.4vw}
  .note-row p{font-size:12px}
  .bar nav{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .headline__line,.headline__obvious{opacity:1}
  .note__stroke path{stroke-dashoffset:0}
}


/* ================= HERO BG_HERO_REAL — capas rasgadas animadas ================= */
.hero__bg{background:#0a0a0a;clip-path:var(--torn,none)}          /* máscara de borde rasgado (JS) */
.art{position:absolute;left:0;right:0;bottom:0;height:calc(var(--u)*42);transform-origin:62% 40%;animation:push 24s ease-in-out infinite alternate}
@keyframes push{from{transform:scale(1)}to{transform:scale(1.05) translateX(-.6%)}}
.art__base,.a{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 100%;display:block;user-select:none;pointer-events:none}
.art__layers{position:absolute;inset:0;filter:url(#rough)}       /* "boil" de papel recortado */
.layer{position:absolute;inset:0;will-change:transform}
.a{will-change:transform,clip-path}

/* entrada épica, pieza por pieza */
.a-purple{animation:shardIn 1.1s .15s cubic-bezier(.16,.9,.2,1) both, shardIdle 9s 1.4s ease-in-out infinite alternate}
@keyframes shardIn{from{transform:translate(14%,-120%) skewX(-24deg) rotate(8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes shardIdle{to{transform:translate(.5%,.8%) rotate(.25deg)}}

.a-circle{transform-origin:80% 14%;animation:circlePop 1.2s .45s cubic-bezier(.2,1.5,.3,1) both, pulse 4.5s 1.8s ease-in-out infinite}
@keyframes circlePop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{50%{transform:scale(1.025);filter:brightness(1.12) saturate(1.15)}}

.a-brush{animation:wipeX 1s .85s cubic-bezier(.7,0,.2,1) both, brushLoop 7s 3s ease-in-out infinite}
@keyframes wipeX{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes brushLoop{0%,88%{clip-path:inset(0 0 0 0);transform:none}93%{clip-path:inset(0 0 0 0);transform:translateX(-1.4%) skewX(-3deg)}100%{transform:none}}

.a-tag{animation:wipeX 1.1s 1.1s steps(14,end) both}
.a-serv{animation:wipeY 1s 1.25s steps(9,end) both}
@keyframes wipeY{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

.a-stairs{animation:build 1s .7s steps(7,end) both}
@keyframes build{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

.a-lime{animation:limeIn .8s 1s cubic-bezier(.2,.9,.2,1) both, limeIdle 5s 2s ease-in-out infinite alternate}
@keyframes limeIn{from{transform:translateX(-60%) skewX(30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes limeIdle{to{transform:translateX(2.2%)}}

.a-paperl{animation:slideL 1s .5s cubic-bezier(.2,.9,.2,1) both, paperSway 6s 1.5s ease-in-out infinite alternate}
@keyframes slideL{from{transform:translateX(-40%) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes paperSway{to{transform:translate(.6%,-.8%) rotate(.4deg)}}

.a-note{transform-origin:90% 85%;animation:noteDrop 1.2s 1.5s cubic-bezier(.3,1.6,.4,1) both, noteFloat2 4.5s 2.8s ease-in-out infinite alternate}
@keyframes noteDrop{from{transform:translateY(-140%) rotate(18deg);opacity:0}to{transform:none;opacity:1}}
@keyframes noteFloat2{from{transform:rotate(0) translateY(0)}to{transform:rotate(-1.4deg) translateY(-2.5%)}}

/* atmósfera */
.sweep{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.9;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  background-size:260% 100%;background-position:150% 0;animation:sweep 6.5s 2.2s ease-in-out infinite}
@keyframes sweep{0%{background-position:150% 0}45%,100%{background-position:-60% 0}}
.grain{position:absolute;inset:-50%;pointer-events:none;background:var(--grain);opacity:.22;mix-blend-mode:screen;animation:grainMove .9s steps(6) infinite}
@keyframes grainMove{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 140% at 55% 45%,transparent 55%,rgba(0,0,0,.55))}

/* el texto del hero entra sobre el nuevo fondo */
.hero__sub .hline{background:#fff}

@media (max-width:900px){
  .art{top:0;height:100%}
  .hero__content{inset:0}
  .hero__bg{min-height:100%}
  .art__base,.a{object-fit:cover;object-position:62% 50%}
  .hero__sub{left:5vw}
}
@media (prefers-reduced-motion:reduce){.art__layers{filter:none}.a,.art{opacity:1!important}}

/* posiciones propias por pieza (el recorte 'cover' no las pierde) */
.a-tag{transform:scale(.82);transform-origin:33% 18%}.a-stairs{object-position:85% 100%}.a-note{object-position:100% 100%;scale:.9;transform-origin:100% 92%}.a-paperl{object-position:0% 100%}

/* THE pequeño a la izquierda de OBVIOUS, alineado al margen de BEYOND */
.headline__row{display:flex;align-items:flex-end;gap:calc(var(--u)*1.1);margin-top:calc(var(--u)*.4)}
.headline__the{display:block;font-size:.5em;line-height:1;padding-bottom:.1em;color:var(--cream);transform:skewX(-9deg);transform-origin:left bottom;opacity:0;animation:rise .9s .12s cubic-bezier(.2,.9,.2,1) forwards}
.headline__row .headline__obvious{margin:0}
@media (max-width:900px){.headline__row{gap:2vw}}

/* OBVIOUS completamente dentro del rectángulo lima */
.headline__row .headline__obvious{padding:.12em .14em .06em .12em;line-height:.92}
.headline__row .headline__obvious::before{inset:0}

/* THE alineado con la parte alta de OBVIOUS */
.headline__row .headline__the{align-self:flex-start;margin-top:.2em;padding-bottom:0}

/* THE mucho más grande y pegado a OBVIOUS */
.headline__row{gap:calc(var(--u)*.35)}
.headline__row .headline__the{font-size:.82em;margin-top:.02em;line-height:.9}

/* sección "a creative playground" + botón, más arriba */
.hero__sub{top:calc(var(--u)*27)}
.btn-explore{top:calc(var(--u)*30.3)}

/* ================= Cintas / tickers de periódico en el hero ================= */
.ticker{position:absolute;left:-4%;width:108%;z-index:6;overflow:hidden;white-space:nowrap;pointer-events:auto}
.ticker__track{display:inline-flex;align-items:center;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker span{padding:0 calc(var(--u)*1.4);line-height:1}
.ticker i{font-style:normal;font-size:calc(var(--u)*1.4)}
.ticker--a{bottom:calc(var(--u)*3.9);background:var(--cream);color:#0b0b0b;transform:rotate(-1.3deg);
  border-block:3px double #0b0b0b;padding:calc(var(--u)*.7) 0;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.ticker--a::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.3;mix-blend-mode:multiply;pointer-events:none}
.ticker--b{bottom:calc(var(--u)*1.1);background:var(--lime);color:#000;transform:rotate(1.1deg);padding:calc(var(--u)*.55) 0;border-block:2px solid #000}
.ticker--b .ticker__track{animation-direction:reverse;animation-duration:46s}
.ticker--a span{font-size:calc(var(--u)*2.1)}
.ticker--b span{font-size:calc(var(--u)*1.8)}
.f-anton{font-family:var(--display);letter-spacing:.02em;transform:skewX(-9deg);display:inline-block}
.f-play{font-family:'Playfair Display',serif;font-weight:900;font-style:italic}
.f-fraktur{font-family:'UnifrakturCook',cursive;font-weight:700}
.f-type{font-family:'Special Elite',monospace;font-size:.7em!important;letter-spacing:.06em}
.f-abril{font-family:'Abril Fatface',serif}
.f-dm{font-family:'DM Serif Display',serif;font-style:italic}
.f-mono{font-family:var(--mono);font-weight:700;font-size:.62em!important;letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

.art--front{z-index:7;pointer-events:none}

/* cintas por encima del busto (la nota queda sobre las cintas) */
.ticker{z-index:55}
.art--front{z-index:56}

@media (max-width:900px){
  .hero__sub{top:auto;bottom:34vw;left:5vw}
  .btn-explore{top:auto;bottom:18vw;left:5vw}
  .ticker--a span{font-size:5vw}.ticker--b span{font-size:4.2vw}
  .ticker--a{bottom:9vw}.ticker--b{bottom:2vw}
}

/* Logo Stenner */
.nav__logo img{display:block;height:calc(var(--u)*2.9);min-height:38px;width:auto;transition:height .4s}
.nav.is-scrolled .nav__logo img{height:calc(var(--u)*2.1);min-height:28px}

/* Logo recoloreable: cambia de color en hover */
.nav__logo{--logo-color:#fff;--logo-hover:var(--lime)}
.logo-mark{display:block;height:calc(var(--u)*2.9);min-height:38px;aspect-ratio:623.57/205.56;
  background:var(--logo-color);
  -webkit-mask:url(assets/logo-stenner.svg) center/contain no-repeat;mask:url(assets/logo-stenner.svg) center/contain no-repeat;
  transition:background-color .25s ease, transform .35s cubic-bezier(.2,.9,.2,1), height .4s}
.nav__logo:hover .logo-mark,.nav__logo:focus-visible .logo-mark{background:var(--logo-hover);transform:rotate(-3deg) scale(1.06)}
.nav.is-scrolled .logo-mark{height:calc(var(--u)*2.1);min-height:28px}

/* El hero recorta al busto y a las cintas: la sección de abajo queda libre */
.hero{overflow:clip}
.bust{height:calc(var(--u)*46)}
@media (max-width:900px){.bust{height:75vw}}

/* busto un poco más abajo */
.bust{top:calc(var(--u)*-.2);height:calc(var(--u)*47.2)}
@media (max-width:900px){.bust{top:62vw;height:75vw}}

/* ===== Botón "Explore work": papel rasgado + pincel (concepto collage) ===== */
.btn-explore{
  --torn:polygon(1% 14%,5% 2%,12% 10%,22% 1%,35% 10%,50% 0,64% 9%,78% 1%,90% 10%,99% 3%,100% 40%,98% 62%,100% 88%,93% 100%,80% 91%,65% 100%,50% 90%,35% 100%,20% 91%,8% 100%,0 86%,2% 60%,0 35%);
  position:absolute;isolation:isolate;background:transparent;color:#0b0b0b;
  padding:calc(var(--u)*1.25) calc(var(--u)*1.7) calc(var(--u)*1.25) calc(var(--u)*2.2);
  gap:calc(var(--u)*1.6);align-items:center;font-family:var(--mono);font-weight:700;letter-spacing:.12em;
  transform:rotate(-2.2deg);transition:transform .45s cubic-bezier(.2,.9,.2,1), color .3s, filter .3s;
  filter:drop-shadow(4px 5px 0 rgba(0,0,0,.85));animation:btnWobble 4s ease-in-out infinite alternate;
}
@keyframes btnWobble{to{transform:rotate(-1.2deg) translateY(-2px)}}
.btn-explore::before,.btn-explore::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--torn)}
.btn-explore::before{background:var(--cream);background-image:var(--grain);background-blend-mode:multiply}
.btn-explore::after{background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.btn-explore span{display:grid;place-items:center;width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);min-width:26px;min-height:26px;border-radius:50%;background:#0b0b0b;color:var(--lime);font-size:15px;
  transition:transform .45s cubic-bezier(.2,.9,.2,1), background .3s, color .3s}
.btn-explore:hover{transform:rotate(1.4deg) scale(1.06);color:#fff;filter:drop-shadow(6px 7px 0 var(--lime));animation:none}
.btn-explore:hover::after{transform:scaleX(1)}
.btn-explore:hover span{transform:rotate(45deg);background:var(--lime);color:#0b0b0b}
.btn-explore:active{transform:rotate(0) scale(.97)}
.btn-explore--static{filter:drop-shadow(4px 5px 0 rgba(255,255,255,.2))}
@media (prefers-reduced-motion:reduce){.btn-explore{animation:none}}
.btn-explore::before{background-image:none;background:#f1ebdf}

/* ===== Botón "Explore work" v3: trazo de pincel (como el brochazo del busto) ===== */
.btn-explore{
  --brush:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 84' preserveAspectRatio='none'><path d='M6 34C16 12 58 18 120 12S250 6 290 16l7 7-8 4 8 9-8 6 7 9c-28 14-96 10-156 16S34 76 12 66l4-10-12-6 9-9Z'/></svg>");
  filter:none;animation:none;background:transparent;color:#0b0b0b;font-family:var(--display);font-weight:400;
  font-size:calc(var(--u)*1.7);letter-spacing:.04em;text-transform:uppercase;
  padding:calc(var(--u)*1.35) calc(var(--u)*3.4) calc(var(--u)*1.5) calc(var(--u)*3);gap:calc(var(--u)*1.2);
  transform:rotate(-2.5deg) skewX(-8deg);transition:transform .45s cubic-bezier(.2,.9,.2,1), color .3s;
}
.btn-explore::before,.btn-explore::after{clip-path:none;
  -webkit-mask:var(--brush) center/100% 100% no-repeat;mask:var(--brush) center/100% 100% no-repeat}
.btn-explore::before{background:var(--lime);background-image:none}
.btn-explore::after{background:var(--purple);transform:none;clip-path:inset(0 100% 0 0);transition:clip-path .55s cubic-bezier(.7,0,.2,1)}
.btn-explore span{width:auto;height:auto;min-width:0;min-height:0;border-radius:0;background:none;color:inherit;font-family:var(--mono);font-weight:700;font-size:1.1em;
  display:inline-block;transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.btn-explore:hover{transform:rotate(1deg) skewX(-8deg) scale(1.07);color:#fff;filter:none}
.btn-explore:hover::after{clip-path:inset(0 0 0 0);transform:none}
.btn-explore:hover span{transform:translate(6px,-4px);background:none;color:var(--lime)}
.btn-explore:active{transform:rotate(0) skewX(-8deg) scale(.96)}
.btn-explore--static{filter:none}

/* Botón: más a la derecha y sin recuadro al hacer click/foco */
.btn-explore{left:calc(var(--u)*21);top:calc(var(--u)*30.2);outline:none;-webkit-tap-highlight-color:transparent;user-select:none}
.btn-explore:focus,.btn-explore:focus-visible,.btn-explore:active{outline:none;box-shadow:none;background:transparent}
.btn-explore:focus-visible{transform:rotate(1deg) skewX(-8deg) scale(1.07);color:#fff}
.btn-explore:focus-visible::after{clip-path:inset(0 0 0 0)}
.btn-explore:active{transform:rotate(0) skewX(-8deg) scale(.97)}
.btn-explore--static{position:static}
@media (max-width:900px){.btn-explore{left:5vw;top:auto;bottom:18vw}}

/* botón más arriba (sin el texto "a creative playground") */
.btn-explore{left:calc(var(--u)*5);top:calc(var(--u)*26.5)}
@media (max-width:900px){.btn-explore{left:5vw;top:auto;bottom:22vw}}

/* botón más a la derecha */
.btn-explore{left:calc(var(--u)*17)}
@media (max-width:900px){.btn-explore{left:12vw}}

/* Al hover/click el trazo lima desaparece: solo se ve el pincel morado */
.btn-explore::before{transition:opacity 0s}
.btn-explore:hover::before,.btn-explore:focus-visible::before,.btn-explore:active::before{opacity:0;transition:opacity 0s .5s}

/* causa del recuadro lima: la regla antigua ponía fondo lima en hover */
.btn-explore:hover,.btn-explore:focus,.btn-explore:focus-visible,.btn-explore:active{background:transparent!important}

/* triángulo en lugar de flecha */
.btn-explore .tri{display:inline-block;width:calc(var(--u)*.95);height:calc(var(--u)*1.1);min-width:12px;min-height:14px;font-size:0;
  background:#0b0b0b;clip-path:polygon(0 0,100% 50%,0 100%);transform:none;transition:transform .45s cubic-bezier(.2,.9,.2,1), background .3s}
.btn-explore:hover .tri,.btn-explore:focus-visible .tri{background:var(--lime);transform:translateX(7px) scale(1.15)}
.btn-explore--static .tri{background:#0b0b0b}

/* triángulo un poco más arriba */
.btn-explore .tri{position:relative;top:calc(var(--u)*-.45)}


/* =====================================================================
   SECCIONES v2 — collage: papel rasgado, pincel, periódico
   ===================================================================== */
:root{--brush:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 84' preserveAspectRatio='none'><path d='M6 34C16 12 58 18 120 12S250 6 290 16l7 7-8 4 8 9-8 6 7 9c-28 14-96 10-156 16S34 76 12 66l4-10-12-6 9-9Z'/></svg>");
  --rip-a:polygon(0 100%,0.0% 38%,2.1% 27%,4.2% 43%,6.2% 14%,8.3% 22%,10.4% 76%,12.5% 24%,14.6% 54%,16.7% 55%,18.8% 15%,20.8% 76%,22.9% 72%,25.0% 31%,27.1% 12%,29.2% 23%,31.2% 63%,33.3% 44%,35.4% 16%,37.5% 33%,39.6% 19%,41.7% 53%,43.8% 62%,45.8% 21%,47.9% 23%,50.0% 78%,52.1% 36%,54.2% 58%,56.2% 15%,58.3% 54%,60.4% 58%,62.5% 21%,64.6% 36%,66.7% 20%,68.8% 25%,70.8% 36%,72.9% 61%,75.0% 27%,77.1% 77%,79.2% 25%,81.2% 47%,83.3% 53%,85.4% 31%,87.5% 24%,89.6% 32%,91.7% 41%,93.8% 20%,95.8% 53%,97.9% 16%,100.0% 54%,100% 100%);--rip-b:polygon(0 100%,0.0% 21%,2.1% 34%,4.2% 49%,6.2% 76%,8.3% 45%,10.4% 48%,12.5% 47%,14.6% 66%,16.7% 41%,18.8% 46%,20.8% 33%,22.9% 31%,25.0% 62%,27.1% 39%,29.2% 23%,31.2% 46%,33.3% 51%,35.4% 71%,37.5% 74%,39.6% 51%,41.7% 64%,43.8% 65%,45.8% 36%,47.9% 17%,50.0% 25%,52.1% 73%,54.2% 44%,56.2% 29%,58.3% 66%,60.4% 51%,62.5% 27%,64.6% 70%,66.7% 44%,68.8% 13%,70.8% 60%,72.9% 17%,75.0% 66%,77.1% 48%,79.2% 39%,81.2% 52%,83.3% 56%,85.4% 71%,87.5% 55%,89.6% 66%,91.7% 22%,93.8% 19%,95.8% 78%,97.9% 42%,100.0% 48%,100% 100%);
  --torn2:polygon(0 3%,3% 0,9% 2%,16% 0,25% 2%,36% 0,48% 2%,60% 0,72% 2%,84% 0,93% 2%,100% 0,99% 25%,100% 50%,98% 75%,100% 100%,92% 98%,80% 100%,66% 98%,52% 100%,38% 98%,24% 100%,12% 98%,4% 100%,0 97%,1% 70%,0 45%,1% 20%)}
.sections{background:transparent;position:relative}
.sec{position:relative;isolation:isolate;padding:calc(var(--u)*10) calc(var(--u)*4) calc(var(--u)*11);background:var(--bg)}
.sec::before{content:"";position:absolute;left:0;right:0;top:calc(var(--u)*-2.6);height:calc(var(--u)*2.7);background:var(--bg);clip-path:var(--rip-a);z-index:0;pointer-events:none}
.sec::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.16;mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.sec>*{position:relative;z-index:2}
.sec>.deco{position:absolute;z-index:1;pointer-events:none}
.sec--work{--bg:#efe9dd;color:#0b0b0b}
.sec--exp{--bg:#0b0b0b;color:var(--cream)}
.sec--exp::before{clip-path:var(--rip-b)}
.sec--exp::after{mix-blend-mode:screen;opacity:.12}
.sec--notes{--bg:#e8e0cf;color:#0b0b0b}
.sec--notes::before{clip-path:var(--rip-a)}

/* ---- encabezados ---- */
.sec-head{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"tag tag tag" "title title script" "title title mono";align-items:end;gap:calc(var(--u)*.4) calc(var(--u)*3);margin-bottom:calc(var(--u)*6);max-width:calc(var(--u)*92);margin-inline:auto}
.sec-head small{grid-area:tag;font-size:12px;letter-spacing:.14em;font-weight:700}
.sec-head h2{grid-area:title;font-family:var(--display);font-weight:400;font-size:calc(var(--u)*9);line-height:.9;text-transform:uppercase;transform:skewX(-9deg);transform-origin:left bottom;white-space:nowrap}
.sec-head h2 b{font-weight:400;background:var(--lime);color:#000;padding:0 .14em;display:inline-block;margin-left:.06em}
.sec-head .script{grid-area:script;font-size:calc(var(--u)*2.3);line-height:1;transform:rotate(-6deg);justify-self:end}
.sec-head .script svg{width:52px;height:18px;vertical-align:middle}
.sec-head .mono{grid-area:mono;font-size:12px;letter-spacing:.04em;max-width:calc(var(--u)*20);justify-self:end;text-align:right;line-height:1.5}
.sec-head--exp h2 .stroke{color:transparent;-webkit-text-stroke:2px var(--cream)}
.sec-head--exp h2 b{background:var(--purple);color:#fff}

/* ---- decoración ---- */
.deco--circle{right:calc(var(--u)*-7);top:calc(var(--u)*4);width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:var(--orange)}
.deco--brush{left:calc(var(--u)*-2);top:calc(var(--u)*5.5);width:calc(var(--u)*46);height:calc(var(--u)*7);background:var(--purple);-webkit-mask:var(--brush) center/100% 100% no-repeat;mask:var(--brush) center/100% 100% no-repeat;opacity:.9;rotate:-3deg;z-index:0!important}
.deco--cross{left:calc(var(--u)*3);bottom:calc(var(--u)*5);width:30px;height:30px;background:linear-gradient(#000,#000) center/1px 100% no-repeat,linear-gradient(#000,#000) center/100% 1px no-repeat}
.deco--shard{right:calc(var(--u)*4);top:calc(var(--u)*-1);width:calc(var(--u)*26);height:calc(var(--u)*34);background:linear-gradient(160deg,#8b3cff,#4a14a8);clip-path:polygon(45% 0,100% 8%,86% 55%,100% 100%,0 100%,12% 48%);opacity:.95}
.deco--lime{left:0;bottom:calc(var(--u)*7);width:calc(var(--u)*30);height:calc(var(--u)*3);background:var(--lime);clip-path:polygon(0 0,100% 0,96% 100%,0 100%);rotate:-2deg}
.deco--ring{left:calc(var(--u)*-8);top:calc(var(--u)*12);width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:50%;border:2px dashed rgba(239,233,221,.35)}

/* ---- piezas (proyectos) ---- */
.pieces{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--u)*3);max-width:calc(var(--u)*92);margin-inline:auto;position:relative;padding-bottom:calc(var(--u)*6)}
.piece{position:relative;rotate:var(--r,0deg);translate:0 var(--y,0);filter:drop-shadow(0 18px 22px rgba(0,0,0,.35));transition:rotate .6s cubic-bezier(.2,.9,.2,1),translate .6s cubic-bezier(.2,.9,.2,1),filter .4s,opacity .8s,transform .8s}
.piece:hover{rotate:0deg;translate:0 calc(var(--y,0px) - 1.2vw);filter:drop-shadow(0 26px 26px rgba(0,0,0,.45))}
.piece__frame{display:block;position:relative;padding:calc(var(--u)*.9) calc(var(--u)*.9) calc(var(--u)*1.1);background:#f1ebdf;clip-path:var(--torn2)}
.piece .card{height:calc(var(--u)*27);border:0;background:transparent}
.piece__no{position:absolute;left:calc(var(--u)*1.6);top:calc(var(--u)*1.6);z-index:3;font-family:var(--display);font-size:calc(var(--u)*1.7);color:#000;background:var(--lime);padding:.1em .45em;transform:skewX(-9deg)}
.tape{position:absolute;z-index:4;top:calc(var(--u)*-1.2);left:50%;margin-left:calc(var(--u)*-3.5);width:calc(var(--u)*7);height:calc(var(--u)*2.4);background:rgba(217,255,0,.9);rotate:-5deg;clip-path:polygon(0 10%,3% 0,6% 12%,9% 0,100% 0,97% 20%,100% 40%,97% 60%,100% 80%,97% 100%,6% 100%,3% 88%,0 100%,2% 55%)}
.piece--lab .tape,.piece--fluid .tape{background:rgba(122,44,255,.92);rotate:4deg}
.piece__cap{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(var(--u)*2);margin-top:calc(var(--u)*1.8);padding:0 calc(var(--u)*.5)}
.piece__cap small{display:block;font-size:11px;letter-spacing:.12em;margin-bottom:.5em;opacity:.8}
.piece__cap h3{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*2.7);line-height:1;text-transform:uppercase;transform:skewX(-9deg);transform-origin:left}
.piece__cap h3 span{background:linear-gradient(var(--lime),var(--lime)) 0 90%/0% .5em no-repeat;transition:background-size .5s cubic-bezier(.7,0,.2,1),color .3s}
.piece:hover h3 span{background-size:100% .5em;color:#000}
.sec--exp .piece__cap{color:var(--cream)}
.tri-link{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.14em;white-space:nowrap}
.tri{display:inline-block;width:11px;height:13px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transition:transform .35s cubic-bezier(.2,.9,.2,1),background .3s}
.piece:hover .tri-link .tri,.tri-link:hover .tri{transform:translateX(8px);background:var(--purple)}
.sec--exp .piece:hover .tri-link .tri{background:var(--lime)}

/* sticker giratorio */
.badge{position:absolute;z-index:5;width:calc(var(--u)*13);right:calc(var(--u)*-1);bottom:calc(var(--u)*1);color:var(--lime);animation:spin 18s linear infinite}
.badge svg{display:block;width:100%;overflow:visible}
.badge__txt{font-family:var(--display);font-size:21px;fill:#0b0b0b;letter-spacing:.08em}
.badge__tri{fill:#0b0b0b}
.badge--2{color:var(--orange);right:calc(var(--u)*1);bottom:calc(var(--u)*-1)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- creative notes: periódico ---- */
.masthead{max-width:calc(var(--u)*92);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-block:5px double #0b0b0b;padding:calc(var(--u)*1.2) 0}
.masthead h2{font-family:'UnifrakturCook',cursive;font-weight:700;font-size:calc(var(--u)*6.6);line-height:1;text-align:center;padding:0 calc(var(--u)*2)}
.masthead .f-type{font-size:calc(var(--u)*.95)!important}
.masthead .f-type:last-child{text-align:right}
.notes-sub{max-width:calc(var(--u)*92);margin:calc(var(--u)*1.4) auto calc(var(--u)*4);display:flex;gap:1em;align-items:center;font-family:'DM Serif Display',serif;font-style:italic;font-size:calc(var(--u)*1.5);border-bottom:1px solid #0b0b0b;padding-bottom:calc(var(--u)*1.2)}
.notes-sub small{font-family:var(--mono);font-style:normal;font-weight:700;letter-spacing:.14em;font-size:12px;background:var(--purple);color:#fff;padding:.3em .7em}
.news{max-width:calc(var(--u)*92);margin:0 auto;display:grid;grid-template-columns:1.35fr 1fr;gap:calc(var(--u)*4)}
.lead{padding-right:calc(var(--u)*4);border-right:1px solid #0b0b0b}
.lead__fig{position:relative;height:calc(var(--u)*24);margin:0 0 calc(var(--u)*2);overflow:hidden;background:#cfcabd;border:1px solid #0b0b0b}
.lead__fig::before{content:"";position:absolute;inset:0;background:url(assets/busto.webp) 50% 6%/70% auto no-repeat;filter:grayscale(1) contrast(1.25)}
.halftone{position:absolute;inset:0;z-index:2;background:radial-gradient(#0b0b0b 28%,transparent 30%) 0 0/7px 7px;mix-blend-mode:multiply;opacity:.35}
.lead__band{position:absolute;z-index:3;left:-5%;right:-5%;top:34%;height:14%;background:var(--purple);transform:rotate(-6deg);opacity:.92;mix-blend-mode:multiply}
.tagline{display:inline-block;font-family:var(--narrow);font-weight:700;font-size:12px;letter-spacing:.1em;background:var(--lime);color:#000;padding:.35em .8em;transform:rotate(-2deg)}
.lead__fig .tagline{position:absolute;z-index:4;left:calc(var(--u)*1.2);top:calc(var(--u)*1.2)}
.lead h3{font-family:'Playfair Display',serif;font-weight:900;font-size:calc(var(--u)*4.4);line-height:1.02;letter-spacing:-.01em}
.lead h3 em{font-style:italic;background:linear-gradient(var(--lime),var(--lime)) 0 88%/100% .38em no-repeat}
.dek{margin:calc(var(--u)*1.2) 0;font-family:'DM Serif Display',serif;font-style:italic;font-size:calc(var(--u)*1.7);line-height:1.25}
.body{font-size:13px;line-height:1.75;columns:2;column-gap:calc(var(--u)*2.4);column-rule:1px solid rgba(0,0,0,.4);margin-bottom:calc(var(--u)*2)}
.dropcap{float:left;font-family:'Playfair Display',serif;font-weight:900;font-size:calc(var(--u)*5);line-height:.8;padding:.06em .1em 0 0}
.news__side{display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.story{display:flex;gap:calc(var(--u)*1.8);padding-bottom:calc(var(--u)*3);border-bottom:1px solid #0b0b0b}
.story__thumb{flex:none;width:calc(var(--u)*11);height:calc(var(--u)*14);position:relative;background:#e5e5e5;overflow:hidden;border:1px solid #0b0b0b}
.story__thumb i{position:absolute;inset:0;background:#111;clip-path:polygon(0 0,60% 0,100% 100%,0 100%)}
.story__thumb::after{content:"";position:absolute;right:8%;bottom:0;width:42%;height:38%;background:var(--orange)}
.story h3{font-family:'Playfair Display',serif;font-weight:900;font-size:calc(var(--u)*2.3);line-height:1.08;margin:.6em 0 .5em}
.story p{font-size:12px;line-height:1.6;margin-bottom:1em}
.pull{position:relative;background:var(--black);color:#fff;padding:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*3.6);rotate:-2deg;clip-path:polygon(2% 6%,8% 0,20% 5%,35% 0,52% 5%,70% 0,86% 5%,98% 0,100% 40%,97% 70%,100% 100%,80% 95%,60% 100%,40% 94%,20% 100%,5% 95%,0 60%,3% 30%)}
.pull .script{font-size:calc(var(--u)*4);line-height:.95}
.pull svg{position:absolute;left:8%;bottom:calc(var(--u)*1.6);width:84%;height:calc(var(--u)*1.4)}

/* ---- responsive ---- */
@media (max-width:900px){
  .sec{padding:calc(var(--u)*10) 5vw calc(var(--u)*10)}
  .sec-head{grid-template-columns:1fr;grid-template-areas:"tag" "title" "script" "mono"}
  .sec-head h2{font-size:12vw;white-space:normal}
  .sec-head .script,.sec-head .mono{justify-self:start;text-align:left}
  .pieces{display:flex;flex-direction:column;gap:12vw}
  .piece{grid-column:auto!important}
  .piece .card{height:75vw}
  .piece__cap h3{font-size:7vw}
  .badge{width:28vw;right:0}
  .masthead{grid-template-columns:1fr}.masthead .f-type{text-align:center!important}
  .masthead h2{font-size:13vw}
  .news{grid-template-columns:1fr}.lead{padding-right:0;border-right:0}
  .lead h3{font-size:9vw}.body{columns:1}
  .story__thumb{width:30vw;height:38vw}.story h3{font-size:6vw}
}


/* =====================================================================
   Cada sección cabe en UNA pantalla (escala por alto y ancho del viewport)
   ===================================================================== */
.sec{--u:max(min(1vw,1.6vh),9px);min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--u)*7.5) calc(var(--u)*4) calc(var(--u)*5)}
.sec>.sec-head,.sec>.pieces,.sec>.masthead,.sec>.notes-sub,.sec>.news{width:100%}

/* encabezados */
.sec-head{margin-bottom:calc(var(--u)*3.4)}
.sec-head h2{font-size:calc(var(--u)*7.6)}
.sec-head .script{font-size:calc(var(--u)*2)}

/* proyectos */
.pieces{padding-bottom:calc(var(--u)*3)}
.piece .card{height:calc(var(--u)*20)}
.piece__cap{margin-top:calc(var(--u)*1.3)}
.piece__cap h3{font-size:calc(var(--u)*2.2)}
.badge{width:calc(var(--u)*10)}
.piece__no{font-size:calc(var(--u)*1.4)}

/* periódico */
.masthead{padding:calc(var(--u)*.8) 0}
.masthead h2{font-size:calc(var(--u)*5.4)}
.notes-sub{margin:calc(var(--u)*1) auto calc(var(--u)*2.4);padding-bottom:calc(var(--u)*.9);font-size:calc(var(--u)*1.3)}
.news{gap:calc(var(--u)*3)}
.lead{padding-right:calc(var(--u)*3)}
.lead__fig{height:calc(var(--u)*15);margin-bottom:calc(var(--u)*1.4)}
.lead h3{font-size:calc(var(--u)*3.4)}
.dek{font-size:calc(var(--u)*1.4);margin:calc(var(--u)*.8) 0}
.body{font-size:12px;line-height:1.6;margin-bottom:calc(var(--u)*1.2)}
.dropcap{font-size:calc(var(--u)*4)}
.news__side{gap:calc(var(--u)*2)}
.story{padding-bottom:calc(var(--u)*2)}
.story__thumb{width:calc(var(--u)*9);height:calc(var(--u)*11)}
.story h3{font-size:calc(var(--u)*1.9)}
.pull{padding:calc(var(--u)*2.2) calc(var(--u)*2.6) calc(var(--u)*2.8)}
.pull .script{font-size:calc(var(--u)*3.2)}

@media (max-width:900px){
  .sec{--u:max(1.6vw,9px);min-height:0;display:block;padding:calc(var(--u)*10) 5vw calc(var(--u)*10)}
  .sec-head h2{font-size:12vw}
  .piece .card{height:75vw}
  .piece__cap h3{font-size:7vw}
  .badge{width:28vw}
  .masthead h2{font-size:13vw}
  .lead__fig{height:60vw}
  .lead h3{font-size:9vw}
  .story__thumb{width:30vw;height:38vw}
  .story h3{font-size:6vw}
}

/* ajuste fino: notes cabe incluso en pantallas de 768 px de alto */
@media (min-width:901px){
  .sec--notes{padding-top:calc(var(--u)*6.5);padding-bottom:calc(var(--u)*3.5)}
  .lead__fig{height:calc(var(--u)*13)}
}

/* sticker giratorio más grande, con estrella */
@media (min-width:901px){
  .badge{width:calc(var(--u)*16);right:calc(var(--u)*-1.5);bottom:calc(var(--u)*-.5)}
  .badge--2{right:calc(var(--u)*.5);bottom:calc(var(--u)*-1.5)}
}
@media (max-width:900px){.badge{width:38vw}}

/* sticker más a la derecha */
@media (min-width:901px){
  .badge{right:calc(var(--u)*-3.2)}
  .badge--2{right:calc(var(--u)*-3.2)}
}
@media (min-width:901px){.badge,.badge--2{right:calc(var(--u)*-1.8)}}

/* sticker pegado a la orilla derecha de la sección (no del contenedor) */
@media (min-width:901px){
  .sec>.pieces{position:static}
  .badge,.badge--2{right:calc(var(--u)*1.5);bottom:calc(var(--u)*6);top:auto}
}

/* ===== Sin desborde horizontal: nada puede empujar la página a la derecha ===== */
html{overflow-x:clip;background:var(--cream)}
body{overflow-x:clip;width:100%;max-width:100%;position:relative}
.sections{overflow-x:clip}
.sec{overflow-x:clip;overflow-y:visible}
.marquee,.contact{overflow:hidden}


/* =====================================================================
   SELECTED WORK v3 — composición en capas sobre fondo negro
   ===================================================================== */
.sec--wk{--bg:#0b0b0b;color:var(--cream);padding-top:calc(var(--u)*7);padding-bottom:calc(var(--u)*3.5)}
.sec--wk::after{mix-blend-mode:screen;opacity:.1}
.sec>.wk{position:relative;width:min(calc(var(--u)*92),100%);aspect-ratio:1821/864;margin:0 auto}
.wk>*{position:absolute}

/* fondo: papeles rasgados */
.wk-deco{z-index:0;pointer-events:none}
.wk-deco--purple-l{left:-1%;top:30%;width:11%;height:21%;background:linear-gradient(150deg,#8b3cff,#5319c4);clip-path:polygon(34% 0,100% 18%,92% 100%,24% 78%,0 100%,8% 40%)}
.wk-deco--purple-b{left:40%;bottom:-3%;width:62%;height:22%;background:linear-gradient(160deg,#8b3cff,#4a14a8);clip-path:polygon(0 70%,6% 52%,12% 60%,20% 34%,30% 44%,42% 20%,52% 34%,64% 10%,76% 30%,88% 6%,100% 24%,100% 100%,0 100%)}
.wk-deco--lime-b{right:-2%;bottom:-4%;width:44%;height:14%;background:var(--lime);clip-path:polygon(0 80%,10% 56%,22% 66%,36% 36%,50% 52%,64% 20%,78% 40%,92% 8%,100% 22%,100% 100%,0 100%)}
.wk-deco--paper-bl{left:-3%;bottom:-3%;width:9%;height:13%;background:#e9e2d4;clip-path:polygon(0 0,60% 22%,100% 70%,70% 100%,0 100%)}
.wk-cross{width:26px;height:26px;z-index:1;background:linear-gradient(var(--cream),var(--cream)) center/1px 100% no-repeat,linear-gradient(var(--cream),var(--cream)) center/100% 1px no-repeat}
.wk-cross--1{left:2.2%;top:6%}.wk-cross--2{left:2.2%;top:84%}

/* título */
.wk-title{left:5.4%;top:2%;width:32%;z-index:6}
.wk-title h2{font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--cream);transform:skewX(-9deg);transform-origin:left bottom;line-height:.88;text-shadow:calc(var(--u)*.22) calc(var(--u)*.22) 0 rgba(0,0,0,.65)}
.wk-title h2 span{display:block;font-size:calc(var(--u)*6.4)}
.wk-title h2 b{display:block;font-weight:400;font-size:calc(var(--u)*8.6);margin-left:calc(var(--u)*3.6)}
.wk-ring{position:absolute;left:-3%;top:7%;width:112%;height:98%;overflow:visible;pointer-events:none}
.wk-ring path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw2 1.6s .6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw2{to{stroke-dashoffset:0}}
.wk-script{left:34%;top:5.5%;z-index:6;font-family:var(--script);font-weight:500;font-size:calc(var(--u)*1.9);line-height:1.05;rotate:-8deg;color:var(--cream)}
.wk-script svg{width:calc(var(--u)*4);height:calc(var(--u)*1.5);vertical-align:bottom}

/* filtros */
.wk-tabs{right:3.4%;top:5.6%;z-index:6;display:flex;gap:calc(var(--u)*2.4);align-items:center}
.wk-tabs a{text-decoration:none;background:none;border:0;color:var(--cream);cursor:pointer;font-family:var(--narrow);font-weight:700;font-size:max(calc(var(--u)*1.15),12px);letter-spacing:.02em;padding:calc(var(--u)*.55) calc(var(--u)*1.5);transition:background .25s,color .25s,transform .3s}
.wk-tabs a:hover{color:var(--lime)}
.wk-tabs a.is-on{background:var(--lime);color:#000;transform:skewX(-8deg) rotate(-1deg)}
.wk-tabs a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* proyectos */
.pk{display:block;z-index:3;isolation:isolate;rotate:var(--r,0deg);color:#0b0b0b;transition:rotate .6s cubic-bezier(.2,.9,.2,1),translate .6s cubic-bezier(.2,.9,.2,1),scale .6s cubic-bezier(.2,.9,.2,1),opacity .5s,filter .5s,transform .8s}
.pk__photo{position:absolute;inset:0;overflow:hidden;background:#222;box-shadow:0 0 0 2px #f1ebdf,0 18px 28px rgba(0,0,0,.55);z-index:2}
.pk__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.9,.2,1)}
.pk:hover{rotate:0deg;translate:0 calc(var(--u)*-.8);scale:1.025;z-index:8}
.pk:hover .pk__photo img{transform:scale(1.07)}
.pk__d1,.pk__d2{position:absolute;z-index:0;pointer-events:none;transition:translate .6s cubic-bezier(.2,.9,.2,1)}
.pk__d1{background:linear-gradient(150deg,#8b3cff,#5319c4);clip-path:polygon(10% 0,60% 4%,100% 0,92% 40%,100% 70%,80% 100%,30% 94%,0 100%,6% 55%,0 25%)}
.pk__d2{background:var(--lime);clip-path:polygon(0 4%,40% 0,100% 6%,98% 100%,60% 96%,0 100%)}
.pk:hover .pk__d1{translate:calc(var(--u)*-.5) calc(var(--u)*.4)}
.pk:hover .pk__d2{translate:calc(var(--u)*.5) calc(var(--u)*-.4)}
.pk__label{position:absolute;z-index:4;display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.7) calc(var(--u)*1.5) calc(var(--u)*.75) calc(var(--u)*1.7);background:#efe9dd;
  clip-path:polygon(0 8%,100% 0,98% 100%,2% 94%);box-shadow:0 10px 20px rgba(0,0,0,.4);transition:translate .5s cubic-bezier(.2,.9,.2,1)}
.pk:hover .pk__label{translate:calc(var(--u)*.6) calc(var(--u)*-.4)}
.pk__label b{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*3);line-height:1;text-transform:uppercase;transform:skewX(-9deg);white-space:nowrap}
.pk__label .v{flex:none;width:1px;align-self:stretch;background:#0b0b0b;opacity:.6}
.pk__label em{font-style:normal;font-family:var(--mono);font-size:max(calc(var(--u)*.78),9.5px);letter-spacing:.07em;line-height:1.45;text-transform:uppercase}
.pk__label u{text-decoration:none;margin-left:auto;font-family:var(--mono);font-size:calc(var(--u)*1.7);line-height:1;transition:transform .4s cubic-bezier(.2,.9,.2,1),color .3s}
.pk:hover .pk__label u{transform:translate(4px,-4px);color:var(--purple)}

.pk--teopm{left:3.8%;top:37%;width:28.3%;height:33.5%}
.pk--teopm .pk__d1{left:-9%;top:-20%;width:26%;height:50%}
.pk--teopm .pk__d2{left:6%;top:112%;width:78%;height:7%}
.pk--teopm .pk__label{left:-3%;top:96%;width:91%}
.pk--geo{left:34.3%;top:26%;width:27.7%;height:40.5%}
.pk--geo .pk__d1{left:-9%;top:36%;width:14%;height:70%}
.pk--geo .pk__d2{left:4%;top:-6%;width:101%;height:104%}
.pk--geo .pk__label{left:4%;top:98%;width:90%}
.pk--eops{left:66.2%;top:13.9%;width:29.7%;height:30.7%}
.pk--eops .pk__d1{left:-7%;top:16%;width:11%;height:62%}
.pk--eops .pk__d2{left:3%;top:-4%;width:101.5%;height:96%}
.pk--eops .pk__label{left:1%;top:94%;width:80%}
.pk--lab{left:65.6%;top:56.7%;width:30.5%;height:24.3%}
.pk--lab .pk__d1{left:-6%;top:62%;width:16%;height:64%}
.pk--lab .pk__d2{left:-3%;top:6%;width:9%;height:92%}
.pk--lab .pk__label{left:7%;top:97%;width:87%}

.pk.is-dim{opacity:.16;filter:grayscale(1) blur(1px);scale:.96;pointer-events:none}

/* cta */
.wk-cta{left:7.7%;top:85.6%;z-index:6;display:inline-flex;align-items:center;gap:calc(var(--u)*1);border:3px solid var(--lime);border-radius:99px;color:var(--lime);font-family:var(--narrow);font-weight:700;font-size:max(calc(var(--u)*1.55),13px);letter-spacing:.03em;padding:calc(var(--u)*.85) calc(var(--u)*2.4);transition:background .3s,color .3s,transform .35s cubic-bezier(.2,.9,.2,1)}
.wk-cta:hover{background:var(--lime);color:#000;transform:rotate(-2deg) scale(1.05)}
.wk-cta span{display:inline-block;transition:transform .35s}
.wk-cta:hover span{transform:translate(4px,-4px)}
.wk-vline{left:27.2%;top:85.8%;height:7%;width:1px;background:var(--cream);z-index:6}
.wk-mono{left:29.2%;top:86.4%;z-index:6;font-size:max(calc(var(--u)*.95),10.5px);letter-spacing:.08em;line-height:1.55}

/* ===== Experiments pasa a MORADO (alterna negro → morado → crema) ===== */
.sec--exp{--bg:#7a2cff;color:var(--cream)}
.sec--exp::after{mix-blend-mode:screen;opacity:.1}
.sec-head--exp h2 b{background:var(--lime);color:#000}
.deco--shard{background:linear-gradient(160deg,#1a1a1a,#000)}
.sec--exp .piece__frame{background:#f3eee3}
.sec--exp .piece:hover .tri-link .tri{background:var(--lime)}

/* ===== responsive: Selected Work apilado en móvil ===== */
@media (max-width:900px){
  .sec>.wk{aspect-ratio:auto;display:flex;flex-direction:column;gap:12vw;width:100%}
  .wk>*{position:relative}
  .wk-deco,.wk-cross{display:none}
  .wk-title{left:auto;top:auto;width:100%}
  .wk-title h2 span{font-size:15vw}.wk-title h2 b{font-size:20vw;margin-left:8vw}
  .wk-ring{display:none}
  .wk-script{left:auto;top:auto;font-size:6vw}
  .wk-tabs{right:auto;top:auto;flex-wrap:wrap;gap:2vw}
  .pk{left:auto!important;top:auto!important;width:100%!important;height:62vw!important;margin-bottom:10vw}
  .pk__label{top:auto!important;bottom:-8vw;left:3%!important;width:94%!important}
  .pk__label b{font-size:6.5vw}.pk__label em{font-size:10px}.pk__label u{font-size:5vw}
  .wk-cta{left:auto;top:auto;align-self:flex-start;font-size:14px}
  .wk-vline{display:none}.wk-mono{left:auto;top:auto;font-size:11px}
}

/* ajustes finos Selected Work (proporciones del diseño) */
.wk-tabs{gap:calc(var(--u)*.4)}
.wk-tabs a{font-size:max(calc(var(--u)*.98),11.5px);padding:calc(var(--u)*.5) calc(var(--u)*1.45)}
.pk__label{gap:calc(var(--u)*1)}
.pk__label b{font-size:calc(var(--u)*2.6)}
.pk__label em{font-size:max(calc(var(--u)*.7),9px);white-space:nowrap}
.pk__label u{font-size:calc(var(--u)*1.5)}
.wk-cta{font-size:max(calc(var(--u)*1.25),12px);padding:calc(var(--u)*.75) calc(var(--u)*2);border-width:2.5px}
.wk-mono{font-size:max(calc(var(--u)*.85),10px)}

/* =====================================================================
   Selected Work a TODO el ancho: la composición escala con su propio ancho
   (container units) y se limita por el alto para caber en una pantalla
   ===================================================================== */
@media (min-width:901px){
  .sec--wk{--su:max(min(1vw,1.6vh),9px);padding-inline:0;padding-top:calc(var(--su)*6.5);padding-bottom:calc(var(--su)*2.5)}
  .sec>.wk{container-type:inline-size;--u:1.087cqw;
    width:min(100%,calc((100vh - var(--su)*9) * 2.1076));aspect-ratio:1821/864}
  .wk-ring{left:-3%;top:7%}
}
@media (max-width:900px){
  .sec--wk{padding-inline:5vw}
  .sec>.wk{container-type:normal;--u:max(1.6vw,9px);width:100%}
}

/* Selected Work: título más a la izquierda/centrado y texto manuscrito más chico y arriba */
.wk-title{left:3%;top:3.5%}
.wk-script{left:33%;top:.5%;font-size:calc(var(--u)*1.35);line-height:1.02;rotate:-7deg}
.wk-script svg{width:calc(var(--u)*2.8);height:calc(var(--u)*1.1)}

/* el óvalo lima rodea exactamente la palabra WORK */
.wk-title h2 b{position:relative;display:block;width:max-content}
.wk-title h2 b .wk-ring{position:absolute;left:-16%;top:-14%;width:132%;height:128%;pointer-events:none;overflow:visible}

/* "A collection of…" un poco a la derecha y más rotado */
.wk-script{left:36%;top:1%;rotate:-13deg}

/* decoración de Selected Work pegada a las ORILLAS de la sección */
.sec--wk>.wk-deco,.sec--wk>.wk-cross{position:absolute}
.sec--wk .wk-deco--purple-l{left:0;right:auto;top:36%;bottom:auto;width:8vw;height:22vh;clip-path:polygon(0 0,34% 6%,100% 24%,88% 100%,26% 82%,0 100%)}
.sec--wk .wk-deco--purple-b{left:36%;right:0;bottom:0;top:auto;width:auto;height:20vh}
.sec--wk .wk-deco--lime-b{left:auto;right:0;bottom:0;top:auto;width:42vw;height:11vh}
.sec--wk .wk-deco--paper-bl{left:0;bottom:0;top:auto;width:8vw;height:13vh}
.sec--wk .wk-cross--1{left:1.6vw;top:9vh}
.sec--wk .wk-cross--2{left:1.6vw;top:auto;bottom:14vh}
@media (max-width:900px){.sec--wk>.wk-deco,.sec--wk>.wk-cross{display:none}}

/* Selected Work: fondo ilustrado (reemplaza los papeles dibujados con CSS) */
.sec--wk{background:#0b0b0b url("assets/bg_work.webp") center/cover no-repeat}
.sec--wk .wk-deco{display:none}

/* =====================================================================
   VISUAL LAB (sec 02) + MOVE LAB (sec 03)
   ===================================================================== */
.sec--vl{--bg:var(--cream);color:#0b0b0b}
.sec--vl .sec-head h2 span{display:inline-block}
.vl{max-width:calc(var(--u)*92);margin:0 auto;display:grid;gap:calc(var(--u)*8)}
.vl-bhead{display:flex;align-items:baseline;gap:calc(var(--u)*1.6);border-bottom:2px solid currentColor;padding-bottom:calc(var(--u)*.8);margin-bottom:calc(var(--u)*2.4)}
.vl-bhead small,.vl-feature small{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em}
.vl-bhead h3{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*3);line-height:1;text-transform:uppercase;transform:skewX(-9deg);transform-origin:left bottom}

/* feature: tríptico */
.vl-feature{display:grid;grid-template-columns:1.35fr 1fr;grid-template-areas:"main txt" "spreads spreads";gap:calc(var(--u)*3) calc(var(--u)*4);align-items:center}
.vl-feature__main{grid-area:main;margin:0;background:#e9e9ef;box-shadow:0 18px 40px rgba(0,0,0,.25);rotate:-1deg}
.vl-feature__main img{display:block;width:100%;height:auto}
.vl-feature__txt{grid-area:txt}
.vl-feature__txt h3{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*4.6);line-height:.95;text-transform:uppercase;transform:skewX(-9deg);transform-origin:left;margin:.25em 0 .4em}
.vl-feature__txt p{font-size:max(calc(var(--u)*1.05),14px);line-height:1.6;max-width:34em}
.vl-tags{list-style:none;padding:0;margin:calc(var(--u)*1.6) 0 0;display:flex;flex-wrap:wrap;gap:calc(var(--u)*.6)}
.vl-tags li{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#0b0b0b;color:var(--cream);padding:.5em .9em}
.vl-tags li:nth-child(2){background:var(--purple)}.vl-tags li:nth-child(3){background:var(--lime);color:#000}
.vl-spreads{grid-area:spreads;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3)}
.vl-spreads figure{margin:0;position:relative;box-shadow:0 14px 30px rgba(0,0,0,.28);transition:rotate .5s cubic-bezier(.2,.9,.2,1)}
.vl-spreads figure:nth-child(1){rotate:-.8deg}.vl-spreads figure:nth-child(2){rotate:.8deg}
.vl-spreads figure:hover{rotate:0deg}
.vl-spreads img{display:block;width:100%;height:auto}
.vl-spreads figcaption{position:absolute;left:0;top:0;background:var(--lime);color:#000;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;padding:.4em .8em}

/* logofolio */
.vl-logos{background:#0b0b0b;color:var(--cream);padding:calc(var(--u)*3) calc(var(--u)*3.4) calc(var(--u)*3.4)}
.logo-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.2)}
.logo-grid li{aspect-ratio:16/10;display:grid;place-items:center;min-width:0;padding:calc(var(--u)*2);border:1px solid rgba(239,233,221,.14);transition:background .3s,border-color .3s}
.logo-grid img{max-width:100%;max-height:calc(var(--u)*8);width:auto;height:auto;object-fit:contain;transition:transform .5s cubic-bezier(.2,.9,.2,1),filter .3s}
.logo-grid li:hover{background:var(--lime);border-color:var(--lime)}
.logo-grid li:hover img{filter:invert(1);transform:scale(1.07) rotate(-2deg)}

/* social wall */
.social-wall{columns:4;column-gap:calc(var(--u)*1.4)}
.social-wall img{display:block;width:100%;height:auto;margin:0 0 calc(var(--u)*1.4);break-inside:avoid;box-shadow:0 10px 22px rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.social-wall img:hover{transform:scale(1.03) rotate(-.8deg);position:relative;z-index:2}

/* move lab */
.ml{max-width:calc(var(--u)*92);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3.4)}
.ml-reel{margin:0;rotate:var(--r,0deg);transition:rotate .5s cubic-bezier(.2,.9,.2,1)}
.ml-reel:hover{rotate:0deg}
.ml-reel__frame{background:#fff;aspect-ratio:16/9;overflow:hidden;box-shadow:0 0 0 2px var(--cream),0 18px 34px rgba(0,0,0,.6)}
.ml-reel video{display:block;width:100%;height:100%;object-fit:cover}
.ml-reel figcaption{margin-top:calc(var(--u)*1.4)}
.ml-reel small,.qph small{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--lime)}
.ml-reel h3,.qph h3{font-family:var(--display);font-weight:400;font-size:calc(var(--u)*2.6);line-height:1;text-transform:uppercase;transform:skewX(-9deg);transform-origin:left;margin:.25em 0 .3em}
.ml-reel p,.qph p{font-size:max(calc(var(--u)*1),14px);line-height:1.55;opacity:.85;max-width:34em;margin:0}
.qph{max-width:calc(var(--u)*92);margin:calc(var(--u)*6) auto 0;display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*3.5);align-items:center;padding:calc(var(--u)*2.6) calc(var(--u)*3);border:2px solid var(--lime);background:rgba(217,255,0,.04)}
.qph__logo{width:calc(var(--u)*17);height:auto}
.qph b{color:var(--lime)}

@media (max-width:900px){
  .vl-feature{grid-template-columns:1fr;grid-template-areas:"main" "txt" "spreads"}
  .vl-feature__txt h3{font-size:12vw}
  .vl-spreads{grid-template-columns:1fr}
  .vl-bhead h3{font-size:8vw}
  .vl-logos{padding:5vw}
  .logo-grid{grid-template-columns:repeat(2,1fr)}
  .social-wall{columns:2}
  .ml{grid-template-columns:1fr}
  .ml-reel h3,.qph h3{font-size:8vw}
  .qph{grid-template-columns:1fr;padding:6vw}
  .qph__logo{width:48vw}
}

/* Hero → Selected Work: el borde rasgado del hero descansa sobre negro (mismo tono que la sección),
   así las cintas quedan como "cinta adhesiva" que une ambas partes en vez de un corte seco */
.hero{background:linear-gradient(to bottom,var(--cream) 0,var(--cream) 72%,#0b0b0b 72%)}
.sec--wk::before{background:#0b0b0b}

/* =====================================================================
   SELECTED WORK v2 — "Explore our creative universe"
   Composición escalada con su propio ancho (container units)
   ===================================================================== */
.hero{background:var(--cream)}
.sec--sw{--bg:#efe6d6;color:#0b0b0b;padding:calc(var(--u)*7) 0 calc(var(--u)*3);
  background:#efe6d6;overflow:hidden}
.sw-bg{position:absolute!important;z-index:0!important;right:0;bottom:8%;width:60%;aspect-ratio:16/9;background:url("assets/visual-lab/bg.webp") 100% 100%/100% auto no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 14%);mask:linear-gradient(90deg,transparent,#000 14%);pointer-events:none}
.sec--sw::after{opacity:.08}
.sw{container-type:inline-size;position:relative;width:min(100%,1680px);margin-inline:auto;aspect-ratio:1672/860}
.sw>*{position:absolute}
.sw-label{left:6%;top:4.2%;width:52%;margin:0;display:flex;align-items:center;gap:1.4cqw;font:700 1.15cqw/1 var(--mono);letter-spacing:.14em}
.sw-label i{flex:1;height:1px;background:#0b0b0b}
.sw-title{left:4.6%;top:11%;margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;transform:skewX(-9deg);transform-origin:left bottom}
.sw-title span{display:block;font-size:6cqw}
.sw-title b{display:block;font-weight:400;font-size:6cqw;margin-top:.04em}
.sw-title b em{font-style:normal;display:inline-block;background:var(--lime);padding:0 .08em 0 .06em;margin-left:-.04em}
.sw-script{left:44.5%;top:16%;margin:0;padding-left:2.2cqw;border-left:1px solid #0b0b0b;height:11.5%;display:flex;flex-direction:column;justify-content:center;font:500 2.3cqw/1.1 var(--script);rotate:-6deg}
.sw-script i{position:absolute;left:2.6cqw;bottom:-.6cqw;width:8.4cqw;height:.7cqw;background:var(--lime);border-radius:99px;rotate:-3deg}
.sw-thumbs{left:3.4%;top:42.5%;width:47.5%;height:22.3%;display:flex}
.sw-th{position:relative;flex:1;margin-right:-1.6cqw;overflow:hidden;background:#7a2cff;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);transition:flex .5s cubic-bezier(.2,.9,.2,1)}
.sw-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.9,.2,1)}
.sw-th u{position:absolute;right:11%;bottom:0;width:3.6cqw;height:3.6cqw;display:grid;place-items:center;background:#efe9dd;text-decoration:none;font:400 1.9cqw/1 var(--mono);clip-path:polygon(25% 0,100% 0,100% 100%,0 100%);padding-left:.6cqw;transition:background .3s}
.sw-th:hover{flex:1.25}
.sw-th:hover img{transform:scale(1.08)}
.sw-th:hover u{background:var(--lime)}
.sw-th:focus-visible{outline:3px solid var(--purple);outline-offset:-3px}
.sw-more{left:4.5%;top:73%;display:inline-flex;align-items:center;gap:1.2cqw;font:700 1.25cqw/1 var(--mono);letter-spacing:.2em;padding-bottom:.55cqw;background:linear-gradient(#0b0b0b,#0b0b0b) 0 100%/9% 2px no-repeat;transition:background-size .5s cubic-bezier(.7,0,.2,1)}
.sw-more svg{width:1.9cqw;height:1cqw;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.sw-more:hover{background-size:100% 2px}
.sw-more:hover svg{transform:translateX(.6cqw)}

.sw-stage{left:49%;top:-6%;width:50%;height:86%;pointer-events:none}
.sw-machine{position:absolute;left:0;top:0;width:100%;height:auto;filter:drop-shadow(0 2cqw 2.4cqw rgba(40,0,90,.3))}
.sw-go{position:absolute;left:29%;top:64%;width:42%;height:9%;pointer-events:auto;display:grid;place-items:center;border-radius:1.2cqw;transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.sw-go{background:var(--lime);box-shadow:0 0 0 .35cqw #2a2a2a,0 .6cqw 0 .35cqw #2a2a2a,0 0 2.4cqw rgba(217,255,0,.7);font:400 2.1cqw/1 var(--display);letter-spacing:.02em;color:#000;gap:.8cqw;grid-auto-flow:column}
.sw-go::before{content:"";width:1.3cqw;height:1.5cqw;background:#000;clip-path:polygon(0 0,100% 50%,0 100%)}
.sw-go:hover{transform:scale(1.05) rotate(-1deg)}
.sw-go:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.sw-note{right:1.4%;top:7%;margin:0;font:500 2.1cqw/1.12 var(--script);rotate:-12deg;color:#0b0b0b}
.sw-note svg{position:absolute;left:-5.6cqw;top:100%;width:6.2cqw;height:4.8cqw;rotate:12deg}

.sw-cats{left:4.5%;right:4.5%;bottom:3.4%;margin:0;padding:1.9cqw 0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);border-block:1px solid #0b0b0b}
.sw-cats li{display:flex;gap:1.1cqw;align-items:center;padding:0 1.4cqw;border-left:1px solid #0b0b0b}
.sw-cats li:first-child{border-left:0;padding-left:0}
.sw-cats svg{flex:none;width:3.4cqw;height:3.4cqw}
.sw-cats b{display:block;font:400 1.75cqw/1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:.5cqw}
.sw-cats small{display:block;font:400 .78cqw/1.45 var(--mono);letter-spacing:.06em}

@media (max-width:900px){
  .sec--sw{padding:14vw 5vw 8vw;background-position:60% 100%}
  .sw{aspect-ratio:auto;display:flex;flex-direction:column;gap:6vw;container-type:normal}
  .sw>*{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:auto!important}
  .sw-label{font-size:11px}
  .sw-title span,.sw-title b{font-size:15vw}
  .sw-script{font-size:7vw;border-left:0;padding:0;rotate:-3deg}
  .sw-script i{display:none}
  .sw-thumbs{height:34vw!important}
  .sw-th u{width:9vw;height:9vw;font-size:5vw}
  .sw-more{width:max-content!important;font-size:12px;padding-bottom:6px}
  .sw-more svg{width:20px;height:10px}
  .sw-stage{margin-top:-4vw}
  .sw-machine{position:relative}
  .sw-go{position:absolute!important;left:23%!important;top:64%!important;width:54%!important;height:11%!important}
  .sw-note{display:none}
  .sw-cats{grid-template-columns:1fr 1fr;gap:5vw 0;padding:5vw 0}
  .sw-cats li{padding:0 2vw}.sw-cats li:nth-child(odd){border-left:0;padding-left:0}
  .sw-cats svg{width:30px;height:30px}.sw-cats b{font-size:18px}.sw-cats small{font-size:9px}
}

@media (max-width:900px){.sw-bg{width:100%;opacity:.9}}
@media (max-width:900px){.sw-go{font-size:5vw;border-radius:2vw}.sw-go::before{width:3vw;height:3.4vw}}

/* ---- Selected Work: ajuste v3 (miniaturas del diseño, textos más chicos, botón sobre la plataforma) ---- */
.sw-thumbs{left:3.3%;top:43%;width:50%;height:auto;aspect-ratio:835/208;display:block}
.sw-th{position:absolute;top:0;height:100%;margin:0;flex:none;overflow:visible;background:none;clip-path:none;transition:translate .4s cubic-bezier(.2,.9,.2,1),filter .3s;filter:drop-shadow(0 .8cqw 1cqw rgba(30,0,80,.25))}
.sw-th img{width:100%;height:100%;display:block;object-fit:fill;transition:none}
.sw-th--1{left:0;width:38.3%}.sw-th--2{left:33.2%;width:36.3%}.sw-th--3{left:64.3%;width:35.4%}
.sw-th:hover{flex:none;translate:0 -.7cqw;filter:drop-shadow(0 1.2cqw 1.2cqw rgba(30,0,80,.4))}
.sw-th:hover img{transform:none}
.sw-script{left:46.5%;top:15%;height:auto;padding:.3cqw 0 .3cqw 1.6cqw;font-size:1.55cqw;line-height:1.1;rotate:-5deg}
.sw-script i{left:1.8cqw;bottom:-.9cqw;width:6cqw;height:.5cqw}
.sw-note{right:2.2%;top:9%;font-size:1.5cqw;line-height:1.1}
.sw-note svg{left:-4.4cqw;width:4.6cqw;height:3.6cqw}
.sw-go{left:30%;top:51.5%;width:40%;height:8.6%}
@media (max-width:900px){
  .sw-thumbs{width:100%!important;height:auto!important}
  .sw-script{font-size:5vw;padding:0}
  .sw-go{top:51.5%!important;left:30%!important;width:40%!important;height:8.6%!important}
}
.sw-bg{bottom:11%;-webkit-mask:linear-gradient(90deg,transparent,#000 14%),linear-gradient(180deg,transparent,#000 20%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 14%),linear-gradient(180deg,transparent,#000 20%);mask-composite:intersect}
/* v4: máquina + botón más a la derecha y bajados a la altura de las miniaturas */
@media (min-width:901px){
  .sw-stage{left:54%;top:6%;width:46%}
  .sw-script{left:48.5%;top:21%}
  .sw-note{right:1.5%;top:15%}
}
/* v5: miniaturas con corte diagonal limpio (muesca de la flecha incluida en la imagen) */
.sw-thumbs{aspect-ratio:835/209}
.sw-th--2{left:33.05%;width:36.5%}.sw-th--3{left:64.3%;width:35.7%}

/* =====================================================================
   CREATIVE NOTES — look de revista (home: feature + daily experiment)
   ===================================================================== */
.sec--nj{--bg:#e9e1cf;color:#0b0b0b}
.nj{width:100%;max-width:calc(var(--u)*96);margin:0 auto}
.nj-mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*.3) 0 calc(var(--u)*.9)}
.nj-mast h2{font-family:'UnifrakturCook',cursive;font-weight:700;font-size:calc(var(--u)*7.6);line-height:.95;letter-spacing:-.01em;text-align:center;text-shadow:calc(var(--u)*.08) calc(var(--u)*.08) 0 rgba(0,0,0,.25)}
.nj-side{font:400 calc(var(--u)*.85)/1.4 var(--mono);letter-spacing:.06em}
.nj-side--r{text-align:right}
.nj-meta{display:flex;justify-content:space-between;font:400 calc(var(--u)*.85)/1 var(--mono);letter-spacing:.06em;padding:calc(var(--u)*.7) 0;border-block:3px double #0b0b0b}
.nj-break{display:flex;align-items:center;gap:calc(var(--u)*2.4);background:var(--lime);margin:calc(var(--u)*.9) 0 calc(var(--u)*1.4);padding:calc(var(--u)*.55) calc(var(--u)*1);font:400 calc(var(--u)*.85)/1 var(--mono);letter-spacing:.04em;white-space:nowrap;overflow:hidden}
.nj-break b{display:flex;align-items:center;gap:.4em;font:400 italic calc(var(--u)*1.9)/1 var(--display);transform:skewX(-9deg);letter-spacing:.01em;flex:none}
.nj-break b svg{width:.9em;height:.9em}
.nj-tag{display:inline-block;font:700 calc(var(--u)*.9)/1 var(--mono);letter-spacing:.1em;color:var(--purple);border:1.5px solid var(--purple);padding:.45em .8em;background:rgba(255,255,255,.3)}

.nj-feature{position:relative;display:grid;grid-template-columns:1.05fr 1fr;min-height:calc(var(--u)*30);overflow:hidden}
.nj-feature__txt{position:relative;z-index:3;padding:0 0 calc(var(--u)*.5);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.nj-feature h3{font-family:var(--display);font-style:italic;font-weight:400;font-size:calc(var(--u)*6.4);line-height:.88;text-transform:uppercase;margin:calc(var(--u)*1.2) 0 calc(var(--u)*1);letter-spacing:-.01em}
.nj-feature h3 span,.nj-feature h3 em{display:block;transform:skewX(-9deg);transform-origin:left}
.nj-feature h3 em{font-style:inherit;background:var(--lime);padding:.02em .12em 0 .1em;margin-left:-.15em;width:max-content;box-shadow:calc(var(--u)*.2) calc(var(--u)*.2) 0 #0b0b0b}
.nj-dek{font:italic 400 calc(var(--u)*2.1)/1.15 'DM Serif Display',serif;margin-bottom:calc(var(--u)*1)}
.nj-body{font:400 calc(var(--u)*.9)/1.6 var(--mono);max-width:calc(var(--u)*30);margin-bottom:calc(var(--u)*1.1)}
.nj-read{font:700 calc(var(--u)*1)/1 var(--mono);letter-spacing:.08em;border-bottom:2px solid #0b0b0b;padding-bottom:.35em;transition:color .2s,border-color .2s}
.nj-read:hover{color:var(--purple);border-color:var(--purple)}
.nj-feature__art{position:absolute;inset:0 0 0 38%;z-index:1}
.nj-feature__art img{position:absolute;right:-2%;bottom:-6%;height:112%;width:auto;filter:grayscale(1) contrast(1.35);z-index:3;max-width:none}
.nj-sun{position:absolute;z-index:1;left:18%;top:-6%;width:calc(var(--u)*17);aspect-ratio:1;border-radius:50%;background:var(--lime)}
.nj-ht{position:absolute;z-index:2;right:0;top:0;width:34%;height:100%;background:radial-gradient(#0b0b0b 26%,transparent 28%) 0 0/calc(var(--u)*.55) calc(var(--u)*.55);opacity:.8;-webkit-mask:linear-gradient(270deg,#000,transparent);mask:linear-gradient(270deg,#000,transparent)}
.nj-purple{position:absolute;z-index:2;background:var(--purple)}
.nj-purple--a{right:0;top:14%;width:44%;height:42%;clip-path:polygon(30% 0,100% 0,100% 100%,0 70%,12% 38%)}
.nj-purple--b{left:8%;right:0;bottom:0;height:24%;clip-path:polygon(0 100%,6% 30%,20% 62%,38% 8%,58% 50%,78% 0,100% 28%,100% 100%)}

.nj-daily{display:grid;grid-template-columns:1fr 1.3fr;border-block:3px double #0b0b0b;margin-top:calc(var(--u)*1.4)}
.nj-daily__lab{position:relative;padding:calc(var(--u)*1.2) calc(var(--u)*10) calc(var(--u)*1.2) 0;border-right:1.5px solid #0b0b0b;min-height:calc(var(--u)*13)}
.nj-daily h3{font-family:var(--display);font-style:italic;font-weight:400;line-height:.92;text-transform:uppercase}
.nj-daily h3 span{display:block;font-size:calc(var(--u)*3.6);transform:skewX(-9deg);transform-origin:left}
.nj-daily h3 b{display:block;width:max-content;font-weight:400;font-size:calc(var(--u)*3.6);background:var(--lime);padding:0 .12em;transform:skewX(-9deg) rotate(-2deg);transform-origin:left;margin-left:-.1em}
.nj-daily__lab p{font:400 calc(var(--u)*.85)/1.5 var(--mono);margin-top:calc(var(--u)*.9);max-width:calc(var(--u)*22)}
.nj-go{position:absolute;left:calc(var(--u)*21);bottom:calc(var(--u)*1.4);display:grid;place-items:center;width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);border-radius:50%;background:var(--lime);border:2px solid #0b0b0b;font:700 calc(var(--u)*1.1)/1 var(--mono);transition:transform .25s}
.nj-go:hover{transform:translateX(5px)}
.nj-flask{position:absolute;right:calc(var(--u)*.5);bottom:calc(var(--u)*.4);height:calc(var(--u)*11.6);width:auto}
.nj-daily__note{padding:calc(var(--u)*1.2) 0 calc(var(--u)*1.2) calc(var(--u)*2.4)}
.nj-daily__note h4{font:italic 400 calc(var(--u)*3)/1.05 'DM Serif Display',serif;margin:calc(var(--u)*.8) 0}
.nj-daily__note p{font:400 calc(var(--u)*.85)/1.6 var(--mono);max-width:calc(var(--u)*38)}

@media (max-width:900px){
  .nj-mast{grid-template-columns:1fr;text-align:center}.nj-side{display:none}
  .nj-mast h2{font-size:15vw}
  .nj-meta{flex-direction:column;gap:6px;font-size:10px}.nj-meta span:nth-child(2){display:none}
  .nj-break{font-size:10px}.nj-break b{font-size:20px}
  .nj-feature{grid-template-columns:1fr}
  .nj-feature__art{position:relative;inset:auto;height:90vw;order:-1}
  .nj-feature h3{font-size:16vw}.nj-dek{font-size:6vw}.nj-body,.nj-read,.nj-tag{font-size:12px}.nj-body{max-width:none}
  .nj-sun{width:50vw}
  .nj-daily{grid-template-columns:1fr}
  .nj-daily__lab{border-right:0;border-bottom:1.5px solid #0b0b0b;padding-right:30vw;min-height:44vw}
  .nj-daily h3 span,.nj-daily h3 b{font-size:11vw}.nj-daily__lab p{font-size:12px;max-width:none}
  .nj-go{left:auto;right:36vw;bottom:4vw;width:36px;height:36px;font-size:16px}
  .nj-flask{height:38vw}
  .nj-daily__note{padding:5vw 0}.nj-daily__note h4{font-size:8vw}.nj-daily__note p{font-size:12px}
}

/* ===== Creative Notes (home): fondo de papel con "boil" sutil; las noticias van sobre papel sólido ===== */
.nj-bg{inset:0;overflow:hidden}
.nj-bg i{position:absolute;inset:0;background:#e9e1cf url("assets/bg_notes.webp") center/cover no-repeat;}
@keyframes njBoil{
  0%{transform:translate(0,0) rotate(0) scale(1.03)}
  20%{transform:translate(.35%,-.25%) rotate(.18deg) scale(1.035)}
  40%{transform:translate(-.3%,.3%) rotate(-.15deg) scale(1.03)}
  60%{transform:translate(.2%,.35%) rotate(.12deg) scale(1.04)}
  80%{transform:translate(-.35%,-.2%) rotate(-.2deg) scale(1.032)}
}
@media (prefers-reduced-motion:reduce){.nj-bg i{animation:none}}
.nj-feature,.nj-daily{background:#e9e1cf;padding-inline:calc(var(--u)*2.2)}
.nj-daily{margin-top:calc(var(--u)*1.2);border-top:3px double #0b0b0b}
.nj-feature__art{inset:0}
.nj-feature__art img{right:-6%;bottom:0;height:100%;filter:none}
@media (max-width:900px){
  .nj-feature,.nj-daily{padding-inline:16px}
  .nj-feature__art{inset:auto;height:56vw}
  .nj-feature__art img{right:0;left:auto;height:100%}
}

/* Tag "FEATURE STORY": morado, texto blanco, rotado — "mírame, esto es nuevo" */
.nj-tag--new{background:var(--purple);color:#fff;border-color:var(--purple);transform:rotate(-4deg);transform-origin:left center;box-shadow:calc(var(--u)*.2) calc(var(--u)*.2) 0 #0b0b0b;padding:.55em 1em}
.nj-feature{overflow:visible}
.nj-feature__art{overflow:hidden}
.nj-tag--new{position:absolute;z-index:6;top:0;left:calc(var(--u)*.6);transform:translateY(-55%) rotate(-5deg)}
@media (max-width:900px){.nj-tag--new{left:6px}}
.nj-tag--new{top:calc(var(--u)*.9);left:calc(var(--u)*-1.4);transform:rotate(-6deg)}
@media (max-width:900px){.nj-tag--new{left:-4px}}
.nj-flask{height:calc(var(--u)*13.5);right:calc(var(--u)*.2);bottom:calc(var(--u)*-.2);object-fit:contain}

/* ===== Creative Notes (home): más compacto + poción grande y recortada por la retícula ===== */
.sec--nj{--u:max(min(.82vw,1.3vh),8px)}
.nj-daily{overflow:hidden;min-height:calc(var(--u)*15)}
.nj-daily__lab{padding-right:calc(var(--u)*14)}
.nj-flask{height:calc(var(--u)*24);right:calc(var(--u)*-3.2);bottom:calc(var(--u)*-5.5);transform:rotate(4deg)}
.nj-go{left:0;bottom:calc(var(--u)*1.2)}
.nj-daily__lab{padding-bottom:calc(var(--u)*4.4)}
@media (max-width:900px){.nj-flask{height:52vw;right:-8vw;bottom:-14vw}.nj-go{left:0;right:auto}}
@media (max-width:900px){.sec--nj{--u:max(1.6vw,9px)}}
.nj-flask{bottom:calc(var(--u)*-3.5);height:calc(var(--u)*23)}
.nj-bg{display:none}.sec--nj{--bg:#e9e1cf}
.nj-daily h3{line-height:1.02;padding-top:calc(var(--u)*.4)}
.nj-daily h3 span{width:max-content;background:#0b0b0b;color:#e9e1cf;padding:.04em .14em 0 .12em;margin-left:-.1em;margin-bottom:.06em;transform:skewX(-9deg) rotate(-1.5deg)}