/* =========================================================
   SF TOOLS — case study interactivo (vista previa)
   Todo vive dentro de .sf: no toca el resto del portafolio.
   Movimiento: transform/opacity/clip-path a partir de --p
   (case.js `progress`: "pin" mientras una sección está fija,
   "through" desde que entra hasta que sale). Sin movimiento
   reducido: todo queda quieto y legible.
   ========================================================= */
.sf{padding-top:calc(var(--header-h,84px) + 12px);--sf-o:#FF6700;--sf-o2:#E25A08;--sf-k:#101010;--sf-k2:#1B1B1B;--sf-g:#2B2B2B;--sf-gap:clamp(14px,1.8vw,24px);--sf-r:var(--r-xl,28px);--sf-max:1440px;overflow-x:clip}
.sf img,.sf video{display:block;width:100%;height:auto}
.sf figure{margin:0}
.sf-sec{max-width:var(--sf-max);margin:0 auto;padding:clamp(88px,10vw,168px) var(--gut) 0}
.sf-kicker{display:inline-flex;align-items:center;gap:10px;font:600 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sf-o)}
.sf-kicker b{font-weight:600;color:var(--gray)}
.sf-title{margin-top:14px;font:900 clamp(34px,4.6vw,76px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.03em;color:var(--fg);text-wrap:balance}
.sf-head{margin-bottom:clamp(28px,3.4vw,52px)}
.sf-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--pill);border:1px solid currentColor;font:600 14.5px/1 var(--text);color:inherit;transition:background .3s ease,color .3s ease,border-color .3s ease,translate .35s var(--e-out)}
.sf-btn span{transition:translate .35s var(--e-out)}
.sf-btn:hover{background:var(--sf-o);border-color:var(--sf-o);color:#FFFFFF}
.sf-btn:hover span{translate:0 3px}
.sf-btn--solid{background:var(--sf-o);border-color:var(--sf-o);color:#FFFFFF}
.sf-btn--solid:hover{background:#FFFFFF;color:var(--sf-k);border-color:#FFFFFF}
.sf-btn--solid:hover span{translate:4px 0}
.sf [data-lb]{cursor:zoom-in}
.has-cursor .sf [data-lb]{cursor:none}

/* ---------- 01 · hero ---------- */
.sf-hero{--mx:0;--my:0;position:relative;isolation:isolate;overflow:hidden;margin:0 clamp(8px,1.2vw,16px);height:calc(100svh - var(--header-h,84px) - 24px);min-height:600px;max-height:1060px;border-radius:var(--sf-r);background:radial-gradient(90% 80% at 70% 40%,#3A1A06 0%,#160B05 45%,#0A0A0A 100%);color:#FFFFFF}
.sf-hero__back{position:absolute;top:clamp(16px,2vw,28px);left:clamp(16px,2.4vw,36px);z-index:5;margin:0}
.sf-hero__art{position:absolute;inset:0;z-index:1}
.sf-hero__piece{position:absolute;translate:calc(var(--mx) * var(--z) * 1px) calc(var(--my) * var(--z) * 1px);animation:sf-pop .9s var(--e-out) var(--d,0s) both}
.sf-hero__piece img{border-radius:20px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.sf-hero__main{right:3%;top:7%;width:min(66%,1060px)}
.sf-hero__a{right:52%;top:16%;width:min(15%,230px);rotate:-6deg}
.sf-hero__b{right:6%;bottom:9%;width:min(17%,260px);rotate:5deg}
.sf-hero__text{position:absolute;left:clamp(20px,3.4vw,56px);bottom:clamp(22px,3.4vw,52px);z-index:3;display:grid;justify-items:start;gap:16px;max-width:min(760px,60%)}
.sf-hero__title{margin:0;font:900 clamp(84px,14vw,240px)/.82 var(--display);letter-spacing:-.04em;text-transform:uppercase;color:#FFFFFF}
.sf-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.sf-mask > span{display:inline-block;animation:sf-rise 1s var(--e-out) var(--d,0s) both}
.sf-hero__title .sf-mask:last-child > span{color:var(--sf-o)}
.sf-hero__sub{font:600 clamp(13px,1.1vw,16px)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.sf-hero .sf-kicker{color:var(--sf-o)}
.sf-hero .sf-btn{color:#FFFFFF}
.sf-in{animation:sf-fade .8s var(--e-out) var(--d,0s) both}
.sf-scroll{position:absolute;right:clamp(18px,2.4vw,36px);bottom:clamp(22px,3vw,44px);z-index:3;width:26px;height:42px;border:1.5px solid rgba(255,255,255,.6);border-radius:14px}
.sf-scroll i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--sf-o);animation:sf-wheel 1.8s ease-in-out infinite}
@keyframes sf-pop{from{opacity:0;scale:.9}}
@keyframes sf-rise{from{transform:translateY(105%)}}
@keyframes sf-fade{from{opacity:0;transform:translateY(16px)}}
@keyframes sf-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ---------- 02 · overview ---------- */
.sf-statement{margin-top:18px;max-width:20ch;font:900 clamp(36px,5vw,84px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.03em;color:var(--fg);text-wrap:balance}
.sf-overview__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);margin-top:clamp(36px,4.4vw,64px);align-items:start}
.sf-overview__text{display:grid;gap:16px;font-size:clamp(16px,1.25vw,19px);line-height:1.55;max-width:52ch;margin-left:clamp(0px,10vw,160px)}
.sf-todo{padding:12px 16px;border:1.5px dashed var(--sf-o);border-radius:12px;font-size:14px;color:var(--sf-o2)}
.sf-todo-inline{font-size:12px;color:var(--sf-o2)}
.sf-meta{display:grid;gap:14px}
.sf-meta > div{display:grid;grid-template-columns:minmax(110px,.42fr) minmax(0,1fr);gap:18px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.sf-meta dt{font:600 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.sf-meta dd{font-size:15.5px;line-height:1.45;color:var(--fg)}
.sf-statement-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sf-overview__lottie{flex:none;width:clamp(96px,11vw,170px);margin-bottom:6px}
.sf-overview__fig{margin-top:clamp(40px,5vw,80px) !important;overflow:hidden;border-radius:var(--sf-r);background:var(--sf-k)}

/* ---------- 03 · brand reveal ---------- */
.sf-reveal{--p:.5;--s0:clamp(0,calc(1 - (var(--p) - .28) * 9),1);--s2:clamp(0,calc((var(--p) - .66) * 9),1);--s1:clamp(0,calc(1 - var(--s0) - var(--s2)),1);margin-top:clamp(88px,10vw,168px);color:#FFFFFF}
.sf-reveal__pin{position:relative;display:grid;place-items:center;overflow:hidden;margin:0 clamp(8px,1.2vw,16px);min-height:min(92svh,900px);border-radius:var(--sf-r);background:color-mix(in srgb,var(--sf-o) calc(var(--s1) * 100%),#0D0D0D);padding:clamp(60px,7vw,110px) var(--gut)}
.sf-reveal__kicker{position:absolute;top:clamp(20px,2.6vw,36px);left:clamp(20px,3vw,48px)}
.sf-reveal__kicker,.sf-reveal__kicker b{color:#FFFFFF}
.sf-reveal__stage{display:grid;width:min(100%,1100px)}
.sf-reveal__step{grid-area:1 / 1;align-self:center;justify-self:center}
.sf-reveal__step--0{width:min(56vh,520px);opacity:var(--s0);scale:calc(.82 + var(--p) * .5)}
.sf-reveal__step--1{width:100%;opacity:var(--s1);scale:calc(.94 + var(--s1) * .06)}
.sf-reveal__step--2{width:100%;opacity:var(--s2);scale:calc(1.06 - var(--s2) * .06)}
.sf-reveal__step img{border-radius:18px}
.sf-reveal__steps{position:absolute;bottom:clamp(18px,2.4vw,32px);left:50%;translate:-50% 0;display:flex;gap:8px}
.sf-reveal__steps li{padding:7px 12px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.35);font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sf-reveal__steps li:nth-child(1){opacity:calc(.4 + var(--s0) * .6)}
.sf-reveal__steps li:nth-child(2){opacity:calc(.4 + var(--s1) * .6)}
.sf-reveal__steps li:nth-child(3){opacity:calc(.4 + var(--s2) * .6)}

/* ---------- 04 · sistema visual ---------- */
.sf-palette{--p:.6;overflow:hidden;border-radius:var(--sf-r);background:var(--sf-k);clip-path:inset(0 calc((1 - clamp(0,calc(var(--p) * 2.2),1)) * 50%) 0 calc((1 - clamp(0,calc(var(--p) * 2.2),1)) * 0%) round var(--sf-r))}
.sf-system__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px;margin-inline:auto !important;gap:var(--sf-gap);margin-top:var(--sf-gap);align-items:start}
.sf-tile{--p:.5;position:relative;overflow:hidden;border-radius:var(--sf-r);background:var(--sf-k)}
.sf-tile img{translate:0 calc((.5 - var(--p)) * 30px);scale:1.06;transition:scale .6s var(--e-out)}
.sf-tile--low{margin-top:clamp(40px,6vw,96px)}
.sf-tile--sq{margin-top:clamp(80px,12vw,180px)}
.sf [data-spot]{--mx:0;--my:0;isolation:isolate}
.sf [data-spot]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at calc(50% + var(--mx) * 50%) calc(50% + var(--my) * 50%),rgba(255,140,60,.22),transparent 62%);opacity:0;transition:opacity .35s ease}
@media (hover:hover) and (pointer:fine){
  .sf [data-spot]:hover::after{opacity:1}
  .sf-tile:hover img{scale:1.1}
}

/* ---------- 05A · galería horizontal ---------- */
.sf-hgal{--p:0;margin-top:clamp(56px,6vw,104px)}
.sf-hgal__pin{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:clamp(22px,3vw,40px);overflow:hidden;padding:clamp(16px,2vw,28px) 0}
.sf-hgal__head{padding:0 var(--gut);max-width:var(--sf-max);margin:0 auto;width:100%}
.sf-hgal__track{--x:0px;display:flex;align-items:center;gap:clamp(16px,2vw,32px);width:max-content;padding:0 var(--gut);translate:var(--x) 0;will-change:translate}
.sf-hgal__item{position:relative;flex:none;overflow:hidden;border-radius:var(--sf-r);background:var(--sf-k)}
.sf-hgal__item img{height:100%;object-fit:cover;transition:scale .7s var(--e-out)}
.sf-hgal__item--l{width:clamp(320px,46vw,780px);aspect-ratio:16 / 9}
.sf-hgal__item--m{width:clamp(260px,30vw,520px);aspect-ratio:4 / 3}
.sf-hgal__item--up{translate:0 -6%}
.sf-hgal__item--down{translate:0 6%}
@media (hover:hover){.sf-hgal__item:hover img{scale:1.05}}
.sf-hgal__bar{height:3px;margin:0 var(--gut);border-radius:2px;background:var(--line);overflow:hidden;max-width:calc(var(--sf-max) - 2 * var(--gut))}
.sf-hgal__bar i{display:block;height:100%;width:100%;background:var(--sf-o);transform-origin:0 50%;scale:var(--p) 1}

/* ---------- 05B · tarjetas apiladas ---------- */
.sf-hgal + .sf-stack{padding-top:clamp(56px,6vw,104px)}
.sf-stack__list{display:grid;gap:clamp(24px,4vw,64px)}
.sf-stack__card{position:sticky;top:calc(var(--header-h,84px) + 16px + var(--i) * 28px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;padding:clamp(16px,2vw,28px);border-radius:var(--sf-r);background:var(--sf-k2);color:#FFFFFF;box-shadow:0 -1px 0 rgba(255,255,255,.06),0 -24px 40px -30px rgba(0,0,0,.5)}
.sf-stack__card figure{overflow:hidden;border-radius:18px;max-width:min(100%,calc(100svh - var(--header-h,84px) - 180px))}
.sf-stack__card p{font:600 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sf-stack__card p b{display:block;font:900 clamp(40px,5vw,72px)/1 var(--display);color:var(--sf-o)}

/* ---------- 05C · imagen completa con máscara ---------- */
.sf-full{--p:.5;--q:clamp(0,calc(var(--p) * 2.4 - .35),1);margin-top:clamp(88px,10vw,168px);padding:0 clamp(8px,1.2vw,16px)}
.sf-full__fig{overflow:hidden;border-radius:var(--sf-r);clip-path:inset(calc((1 - var(--q)) * 12%) calc((1 - var(--q)) * 18%) round var(--sf-r))}
.sf-full__fig img{scale:calc(1.18 - var(--q) * .18)}

/* ---------- 05D · GIF ---------- */
.sf-gifs__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:var(--sf-gap);align-items:center}
.sf-gif{overflow:hidden;border-radius:var(--sf-r);background:#000}

/* ---------- 06 · aplicaciones ---------- */
.sf-apps{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(28px,4vw,72px);align-items:start}
.sf-apps__text{position:sticky;top:calc(var(--header-h,84px) + 32px)}
.sf-apps .sf-title{font-size:clamp(30px,3.2vw,54px);hyphens:auto;overflow-wrap:anywhere}
.sf-apps__lead{margin-top:16px;max-width:34ch;font-size:clamp(15.5px,1.15vw,18px);line-height:1.55;color:var(--fg)}
.sf-apps__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sf-gap)}
.sf-app{--p:.5;position:relative;overflow:hidden;border-radius:var(--sf-r);background:var(--sf-k)}
.sf-app img{translate:0 calc((.5 - var(--p)) * 24px);scale:1.05;transition:scale .7s var(--e-out)}
@media (hover:hover){.sf-app:hover img{scale:1.09}}
.sf-app--a{grid-column:1 / 7}
.sf-app--b{grid-column:1 / 4;margin-top:-8%;z-index:2;box-shadow:0 0 0 6px var(--bg)}
.sf-app--c{grid-column:4 / 7}
.sf-app--d{grid-column:1 / 4;grid-row:span 2}
.sf-app--e{grid-column:4 / 7;align-self:end}

/* ---------- 07 · cierre ---------- */
.sf-final{--p:.5;position:relative;isolation:isolate;overflow:hidden;margin:clamp(88px,10vw,168px) clamp(8px,1.2vw,16px) 0;border-radius:var(--sf-r);background:#0A0A0A;color:#FFFFFF}
.sf-final__art{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;opacity:.55}
.sf-final__art img{width:min(80vh,900px);scale:calc(.9 + var(--p) * .25);filter:saturate(1.1)}
.sf-final__in{display:grid;justify-items:center;gap:22px;padding:clamp(80px,10vw,160px) var(--gut);text-align:center}
.sf-final__big{font:900 clamp(34px,5vw,84px)/.95 var(--display);text-transform:uppercase;letter-spacing:-.03em;max-width:14ch}
.sf-final__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.sf-final .sf-btn{color:#FFFFFF}

/* ---------- escritorio con lugar: secciones fijas ---------- */
@media (min-width:1025px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
  .sf-reveal{height:280vh}
  .sf-reveal__pin{position:sticky;top:calc(var(--header-h,84px) + 4px);height:calc(100svh - var(--header-h,84px) - 20px);min-height:0}
  .sf-hgal{height:var(--sf-hgal-h,auto)}
  .sf-hgal__pin{position:sticky;top:var(--sf-pin-top,96px)}
}
/* tablet y celular: todo en vertical; la galería horizontal se desliza con el dedo */
@media (max-width:1024px),(max-height:679px),(prefers-reduced-motion:reduce){
  .sf-reveal{--s0:1;--s1:1;--s2:1}
  .sf-reveal__pin{min-height:0;background:#0D0D0D}
  .sf-reveal__stage{display:grid;gap:18px}
  .sf-reveal__step{grid-area:auto;opacity:1;scale:none}
  .sf-reveal__step--0{width:min(70vw,420px)}
  .sf-reveal__steps{display:none}
  .sf-hgal__track{translate:none;overflow-x:auto;width:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .sf-hgal__track::-webkit-scrollbar{display:none}
  .sf-hgal__item{scroll-snap-align:start}
  .sf-hgal__item--up,.sf-hgal__item--down{translate:none}
  .sf-hgal__bar{display:none}
}
@media (max-width:1024px){
  .sf-overview__grid,.sf-apps{grid-template-columns:minmax(0,1fr)}
  .sf-overview__text{margin-left:0}
  .sf-apps__text{position:static}
  .sf-gifs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-gif--wide{grid-column:1 / -1}
}
@media (max-width:768px){
  .sf-hero{height:auto;min-height:0;display:flex;flex-direction:column;padding:84px 0 24px}
  .sf-hero__art{position:relative;inset:auto;order:2;height:min(70vw,360px);margin-top:20px}
  .sf-hero__main{right:auto;left:4%;top:0;width:92%}
  .sf-hero__a{right:auto;left:4%;top:auto;bottom:0;width:28%}
  .sf-hero__b{right:4%;bottom:6%;width:30%}
  .sf-hero__text{position:relative;left:auto;bottom:auto;max-width:none;padding:0 20px}
  .sf-hero__title{font-size:clamp(76px,24vw,120px)}
  .sf-scroll{display:none}
  .sf-system__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-tile--low,.sf-tile--sq{margin-top:0}
  .sf-tile--sq{grid-column:1 / -1}
  .sf-hgal__item--l{width:84vw}
  .sf-hgal__item--m{width:70vw}
  .sf-stack__card{position:relative;top:auto;grid-template-columns:minmax(0,1fr)}
  .sf-gifs__grid{grid-template-columns:minmax(0,1fr)}
  .sf-apps__grid{grid-template-columns:minmax(0,1fr)}
  .sf-app--a,.sf-app--b,.sf-app--c,.sf-app--d,.sf-app--e{grid-column:auto;grid-row:auto;margin-top:0;box-shadow:none}
  .sf-meta > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .sf-overview__lottie{width:84px}
}
@media (prefers-reduced-motion:reduce){
  .sf-hero__piece,.sf-mask > span,.sf-in,.sf-scroll i{animation:none}
  .sf-palette,.sf-full__fig{clip-path:none}
  .sf-full__fig img,.sf-tile img,.sf-app img,.sf-final__art img{scale:none;translate:none}
}

/* textos del proyecto (de Daniss) dentro de las secciones */
.sf-lead{margin-top:16px;max-width:46ch;font-size:clamp(15.5px,1.2vw,18.5px);line-height:1.55;color:var(--fg)}
.sf-overview__tags{font:600 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sf-o)}
.sf-more{margin-top:6px}
.sf-more .cs-brief__body{font-size:inherit}
.sf-reveal__note{position:absolute;top:clamp(20px,2.6vw,36px);left:clamp(20px,3vw,48px);z-index:2;display:grid;gap:10px;max-width:min(380px,40%)}
.sf-reveal__note p:not(.sf-kicker){font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.sf-reveal__note .sf-kicker,.sf-reveal__note .sf-kicker b{color:#FFFFFF}
.sf-final .sf-kicker{color:var(--sf-o)}
.sf-final__text{max-width:58ch;font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:rgba(255,255,255,.85)}
@media (max-width:1024px){.sf-reveal__note{position:static;max-width:none;margin-bottom:18px}}

/* ---------- portada: la imagen del manual a sangre; el texto en la zona oscura de la derecha ---------- */
.sf-hero{background:#0E0E0E}
.sf-hero .sf-hero__main{inset:-2%;width:auto;height:auto}
.sf-hero .sf-hero__main img{width:100%;height:100%;object-fit:cover;object-position:35% 50%;border-radius:0;box-shadow:none}
.sf-hero__text{left:auto;right:clamp(24px,4vw,72px);bottom:auto;top:50%;translate:0 -46%;justify-items:end;text-align:right;max-width:min(520px,36%)}
.sf-hero__title{font-size:clamp(64px,8.6vw,156px)}
.sf-hero__sub{text-align:right}
/* la imagen ocupa solo el lado del logo (anclada a la izquierda) y se funde en el gris de su propio fondo:
   así el logo nunca queda debajo del título, sea cual sea el ancho o el alto de la ventana */
.sf-hero:not(#x){background:#1C1C1C}
.sf-hero .sf-hero__main{inset:-2% auto -2% -2%;width:calc(104% - min(520px,36%) - clamp(24px,4vw,72px) + 2%)}
.sf-hero .sf-hero__main img{object-position:44% 50%;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.sf-scroll{right:auto;left:50%;margin-left:-13px}
@media (max-width:768px){
  .sf-hero{padding-top:0}
  .sf-hero__art{order:-1;height:auto;margin:0;aspect-ratio:1008 / 612}
  .sf-hero .sf-hero__main{inset:0;width:auto}
  .sf-hero .sf-hero__main img{-webkit-mask-image:none;mask-image:none}
  .sf-hero .sf-hero__main img{object-position:50% 50%}
  .sf-hero__back{top:12px;left:12px}
  .sf-hero__text{position:relative;top:auto;right:auto;translate:none;justify-items:start;text-align:left;max-width:none;padding:22px 20px 4px}
  .sf-hero__sub{text-align:left}
}

/* portada en pantallas angostas o altas (tablet, ventana no apaisada): el logo crecería hasta
   quedar debajo del título, así que la imagen va completa arriba y el texto debajo */
@media (min-width:769px) and (max-aspect-ratio:11/10){
  .sf-hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;padding:0 0 clamp(28px,4vw,48px)}
  .sf-hero__art{position:relative;inset:auto;order:-1;height:auto;margin:0;aspect-ratio:1008 / 612}
  .sf-hero .sf-hero__main{inset:0;width:auto}
  .sf-hero .sf-hero__main img{-webkit-mask-image:none;mask-image:none}
  .sf-hero .sf-hero__main img{object-position:50% 50%}
  .sf-hero__text{position:relative;top:auto;right:auto;left:auto;bottom:auto;translate:none;justify-items:start;text-align:left;max-width:none;padding:clamp(24px,3vw,40px) clamp(24px,4vw,56px) 0}
  .sf-hero__title{font-size:clamp(84px,11vw,150px)}
  .sf-hero__sub{text-align:left}
  .sf-scroll{display:none}
}

/* 05 · fila horizontal de piezas más chicas (mismo motor que la galería del 04) */
.sf-hgal--sq{margin-top:clamp(56px,6vw,104px)}
.sf-hgal__item--sq{width:clamp(220px,22vw,340px);aspect-ratio:1 / 1}
.sf-hgal__item--sq img{height:100%;object-fit:cover}
.sf-hgal__cap{position:absolute;left:12px;bottom:12px;z-index:2;padding:7px 11px;border-radius:var(--pill);background:rgba(10,10,10,.78);color:#FFFFFF;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sf-hgal__cap b{color:var(--sf-o);margin-right:6px}
@media (max-width:768px){.sf-hgal__item--sq{width:62vw}}

/* cierre alineado a la izquierda, igual que el resto de los proyectos */
.sf-final__in{justify-items:start;text-align:left;padding-left:clamp(24px,6vw,96px);padding-right:clamp(24px,6vw,96px)}
.sf-final__actions{justify-content:flex-start}
@media (max-width:768px){.sf-final__in{padding:56px 22px 48px}.sf-final__actions{flex-direction:column;align-items:flex-start}}