/* Park Estudio — plantilla de página de proyecto (/projects/<slug>/).
   Va después de site.css. Cada página ajusta en su <style> el encuadre de la foto del hero. */

.menu-btn{min-height:44px}

/* HERO */
.hero{position:relative;height:100vh;min-height:620px;max-height:960px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(20,16,12,.34) 0%,rgba(20,16,12,.06) 38%,rgba(20,16,12,.5) 100%)}
.hero-title{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;padding:0 var(--pad) 56px}
.hero-title h1{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(48px,7vw,104px);line-height:.95}
.hero-title .meta{display:flex;gap:28px;padding-bottom:10px}

/* CRUMB */
.crumb{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:28px var(--pad);border-bottom:1px solid var(--rule)}
.crumb a{color:var(--blue);text-decoration:none}

/* INTRO */
.intro{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:48px;padding:96px var(--pad) 120px}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 24px;align-content:start;font-family:var(--mono);font-size:12px}
.facts dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.facts dd{margin:0;color:var(--ink)}
.intro .txt{max-width:720px}
.intro h2{margin:0 0 36px;font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,48px);line-height:1.12}
.intro p{margin:0 0 20px;font-family:var(--serif);font-weight:300;font-size:20px;line-height:1.6;color:var(--ink-2)}

/* GALLERY */
.g{padding:0 var(--pad);display:flex;flex-direction:column;gap:var(--gap)}
.row{display:grid;gap:var(--gap)}
.row.two{grid-template-columns:1fr 1fr}
.row.offset{grid-template-columns:5fr 7fr;align-items:end}
.row.offset.rev{grid-template-columns:7fr 5fr}
figure{margin:0}
figure img{width:100%;height:auto}
.full{margin:0 calc(var(--pad) * -1)}
.full img{width:100%;height:min(92vh,900px);object-fit:cover}
figcaption{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.tall img{aspect-ratio:2/3;object-fit:cover}
.wide img{aspect-ratio:3/2;object-fit:cover}
.sq img{aspect-ratio:1/1;object-fit:cover}

/* BEFORE / AFTER */
.ba{padding:144px var(--pad) 128px}
.ba-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px}
.ba-head h2{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(36px,3.8vw,52px);line-height:1.05}
.ba-head p{margin:0;max-width:440px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-bottom:56px}
.pair:last-child{margin-bottom:0}
.pair img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pair .before img{filter:grayscale(1)}
.pair figcaption{display:flex;justify-content:space-between}
.pair .after figcaption span:first-child{color:var(--blue)}

/* QUOTE */
.quote{padding:152px var(--pad);display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.quote blockquote{margin:0;max-width:980px;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26px,2.8vw,40px);line-height:1.3}
.quote cite{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--muted)}

/* CREDITS */
.credits{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:48px;padding:120px var(--pad);border-top:1px solid var(--rule)}
.credits .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.credits h3{margin:0 0 14px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.credits ul{list-style:none;margin:0;padding:0}
.credits li{padding:12px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-weight:300;font-size:19px;display:flex;justify-content:space-between;gap:16px}
.credits li span{font-family:var(--mono);font-size:12px;color:var(--muted);align-self:center;text-align:right}
.credits li a{text-decoration:none}
.credits li a::after{content:" ↗";font-family:var(--mono);font-size:12px;color:var(--blue)}

/* NEXT */
.next{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;text-decoration:none;background:var(--paper-2)}
.next:hover{opacity:1}
.next img{width:100%;height:100%;min-height:440px;object-fit:cover;transition:transform .8s ease}
.next .ph{overflow:hidden}
.next:hover img{transform:scale(1.03)}
.next .t{padding:64px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.next h2{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(40px,4.4vw,64px);line-height:1}
.next .go{color:var(--blue)}

/* CTA */
.band{margin:120px var(--pad);padding:72px 56px;background:var(--paper-2);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.band h3{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3vw,40px);line-height:1.1}

@media (max-width:1024px){
  .intro,.credits{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero{height:86vh;min-height:540px}
  .hero-title{flex-direction:column;align-items:flex-start;padding-bottom:32px}
  .intro{padding:64px var(--pad) 80px;gap:40px}
  .intro p{font-size:18px}
  .row.two,.row.offset,.row.offset.rev{grid-template-columns:1fr}
  .full img{height:70vh}
  .ba{padding:96px var(--pad) 88px}
  .pair{gap:8px;margin-bottom:40px}
  .quote{padding:96px var(--pad)}
  .credits{padding:72px var(--pad)}
  .credits .cols{grid-template-columns:1fr}
  .next{grid-template-columns:1fr}
  .next img{min-height:300px}
  .next .t{padding:36px 24px}
  .band{margin:72px var(--pad);padding:44px 28px}
}