/* Morfolia: colectivo creativo. Negro, una sola familia tipográfica (SF Pro del sistema), el trabajo como protagonista. */
:root{
  --bg:#000000;
  --surface:#111112;
  --surface-2:#1a1a1c;
  --ink:#f2f1ee;
  --ink-2:#8e8e93;
  --accent:#ff914d;
  --on-accent:#140a03;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --m:clamp(20px,2.6vw,40px);
  --gap:10px;
  --r:14px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1;text-wrap:balance}
p,ol,ul,dl{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{padding-left:max(var(--m),env(safe-area-inset-left,0px));padding-right:max(var(--m),env(safe-area-inset-right,0px))}
.logo{display:block;background:currentColor;-webkit-mask:url(/assets/img/logo-morfolia.png) left center/contain no-repeat;mask:url(/assets/img/logo-morfolia.png) left center/contain no-repeat;aspect-ratio:5/1}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600;font-size:16px;padding:14px 24px;border-radius:999px;transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:var(--accent);color:var(--on-accent)}
.more{font-size:16px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;width:fit-content;transition:color .2s}
.more:hover{color:var(--accent)}
.lead{font-size:clamp(19px,1.6vw,24px);line-height:1.42;max-width:58ch}

/* cabecera */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px;background:color-mix(in srgb,var(--bg) 86%,transparent)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.top .logo{width:128px;color:var(--ink)}
.top nav{display:flex;gap:28px;font-size:16px}
.top nav a{text-decoration:none;color:var(--ink-2);transition:color .2s}
.top nav a:hover,.top nav a[aria-current="page"]{color:var(--ink)}

/* hero */
.hero{padding-block:clamp(64px,12vh,140px) clamp(72px,10vh,130px)}
.hero h1{font-size:clamp(56px,11.4vw,188px);font-weight:700;letter-spacing:-.055em;line-height:.88}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
.hero h1 .ln span{display:block}
.hero .under{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px)}
.hero .under p{font-size:clamp(18px,1.5vw,22px);line-height:1.4;max-width:46ch}
.hero .under p span{color:var(--ink-2)}

.page-head{padding-block:clamp(56px,9vh,120px) clamp(48px,6vw,80px);display:grid;gap:28px}
.page-head h1{font-size:clamp(52px,8.6vw,140px);font-weight:700;letter-spacing:-.05em;line-height:.9}
.page-head .lead{color:var(--ink-2)}
.block{padding-block:clamp(120px,14vw,200px) 0}
.bar{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.bar h2,.two h2{font-size:clamp(36px,4.4vw,68px)}

/* tarjetas de proyecto */
.grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px var(--gap)}
.tile[hidden]{display:none}
.tile.big{grid-column:span 2;grid-row:span 2}
.tile.big .media{aspect-ratio:auto;height:calc(100% - 64px)}
.open{display:block;text-decoration:none}
.media{display:block;position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface);aspect-ratio:4/5}
.media img,.media video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.open:hover .media img,.open:hover .media video{transform:scale(1.03)}
.open:focus-visible{outline:none}
.open:focus-visible .media{outline:2px solid var(--accent);outline-offset:3px}
.cap{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:17px}
.cap b{font-weight:600}
.cap span{color:var(--ink-2);text-align:right}
.tile .meta{display:block;font-size:16px;color:var(--ink-2);margin-top:4px;max-width:44ch}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:36px}
.filters button{all:unset;cursor:pointer;font-size:16px;color:var(--ink-2);padding:8px 16px;border-radius:999px;transition:background .25s,color .25s}
.filters button sup{font-size:11px;margin-left:3px;vertical-align:4px}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.filters button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.empty{color:var(--ink-2);padding:24px 0}

/* columnas de texto */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px clamp(32px,6vw,96px);align-items:start}
.two .txt{display:grid;gap:22px;max-width:60ch}
.two .txt p{font-size:clamp(19px,1.6vw,24px);line-height:1.42}
.two .txt p+p{color:var(--ink-2)}
.disc,.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 56px}
.disc h3,.steps h3{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.disc p,.steps p{font-size:17px;color:var(--ink-2);max-width:40ch}
.steps{counter-reset:s}
.steps li{counter-increment:s}
.steps h3::before{content:counter(s) ". ";color:var(--ink-2)}
.names{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.names li{font-size:16px;background:var(--surface);padding:6px 14px;border-radius:999px}

/* página de cliente */
.case{padding-block:clamp(40px,6vh,72px) 0}
.back{display:inline-block;color:var(--ink-2);text-decoration:none;font-size:16px;margin-bottom:36px}
.back::before{content:"← "}
.back:hover{color:var(--ink)}
.case-h{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px clamp(32px,6vw,96px);align-items:end;padding-bottom:clamp(64px,8vw,110px)}
.case-h h1{font-size:clamp(48px,7.6vw,124px);font-weight:700;letter-spacing:-.05em;line-height:.92;grid-column:1}
.facts{display:grid;gap:16px;grid-column:2;grid-row:1 / span 2;align-self:end}
.facts dt{font-size:15px;color:var(--ink-2)}
.facts dd{margin:2px 0 0;font-size:17px}
.case-h .lead{grid-column:1}
.sec{padding-top:clamp(72px,8vw,120px)}
.sec-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px clamp(32px,6vw,96px);margin-bottom:28px;align-items:baseline}
.sec-h h2{font-size:clamp(26px,2.4vw,36px)}
.sec-h p{color:var(--ink-2);max-width:56ch}
.vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-bottom:var(--gap)}
.vids video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);background:#000}
.vids video.wide{aspect-ratio:auto;grid-column:1/-1;max-height:78vh;object-fit:contain}
.pics{columns:3 280px;column-gap:var(--gap)}
.pics.doc{columns:2 380px}
.pics img{width:100%;height:auto;border-radius:var(--r);margin-bottom:var(--gap);break-inside:avoid;background:var(--surface)}
.next{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:clamp(96px,10vw,160px);padding:28px 0}
.next span{color:var(--ink-2);font-size:16px}
.next a{font-size:clamp(32px,4vw,64px);font-weight:600;letter-spacing:-.04em;text-decoration:none;transition:color .2s}
.next a:hover{color:var(--accent)}

/* contacto y pie */
.contact{padding-block:clamp(140px,16vw,220px) clamp(110px,12vw,180px)}
.contact h2{font-size:clamp(44px,6vw,96px);letter-spacing:-.045em}
.links{display:grid;gap:14px;font-size:clamp(19px,1.6vw,24px);align-self:end}
.links a{width:fit-content;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color .4s var(--ease),color .2s}
.links a:hover{text-decoration-color:currentColor;color:var(--accent)}
.links small{font-size:15px;color:var(--ink-2);margin-top:8px}
footer{padding-block:0 max(28px,env(safe-area-inset-bottom,0px))}
footer .logo{width:100%;color:var(--ink)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:13px;color:var(--ink-2)}

/* movimiento */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .tile .media{clip-path:inset(10% 0 0 0 round var(--r));transition:clip-path 1.2s var(--ease)}
.js .tile.in .media{clip-path:inset(0 0 0 0 round var(--r))}
.js .tile .cap,.js .tile .meta{opacity:0;transition:opacity .8s var(--ease) .25s}
.js .tile.in .cap,.js .tile.in .meta{opacity:1}
.js .hero h1 .ln span,.js .page-head h1,.js .case-h h1{transform:translateY(104%);transition:transform 1.15s var(--ease)}
.js .page-head h1,.js .case-h h1{transform:translateY(30px);opacity:0;transition:transform 1.1s var(--ease),opacity 1s var(--ease)}
.js .go .hero h1 .ln span,.js .go .page-head h1,.js .go .case-h h1{transform:none;opacity:1}
.js .go .hero h1 .ln:nth-child(2) span{transition-delay:.12s}
.js .hero .under{opacity:0;transition:opacity 1s var(--ease) .6s}
.js .go .hero .under{opacity:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .tile .media,.js .tile .cap,.js .tile .meta,.js .hero h1 .ln span,.js .hero .under,.js .page-head h1,.js .case-h h1{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

@media (max-width:1000px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two,.case-h,.sec-h{grid-template-columns:minmax(0,1fr)}
  .facts{grid-column:1;grid-row:auto;grid-template-columns:1fr 1fr}
  .vids{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .top nav{gap:18px}
  .top .logo{width:108px}
  .hero h1{font-size:15.5vw}
  .hero .under .btn{width:100%}
  .grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .tile.big{grid-column:auto;grid-row:auto}
  .tile.big .media{aspect-ratio:4/5;height:auto}
  .disc,.steps{grid-template-columns:minmax(0,1fr);gap:32px}
  .vids{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pics,.pics.doc{columns:1}
  .facts{grid-template-columns:minmax(0,1fr)}
}

/* franja de imágenes en Estudio y botón en la ficha de cliente */
.strip{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);background:var(--surface)}
.page-head .btn{width:fit-content}
.case-cta{grid-column:2;justify-self:start}
@media (max-width:1000px){.case-cta{grid-column:1}}
@media (max-width:640px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}