/* Concept case studies (proyectos/conceptos/*): agency-style case page on the shared tokens. */
.case-hero { position:relative; min-height:min(860px,92svh); display:flex; align-items:flex-end; background:var(--bg-inverse); color:var(--lr-cal-blanca); overflow:hidden; }
.case-hero > img, .case-hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.case-hero-shade { background:linear-gradient(180deg, rgba(27,20,16,0.45) 0%, rgba(27,20,16,0) 30%, rgba(27,20,16,0.1) 55%, rgba(27,20,16,0.8) 100%); }
.case-hero-content { position:relative; width:100%; padding:var(--space-10) var(--space-7) var(--space-8); }
.case-hero-content a { display:inline-flex; align-items:center; min-height:44px; color:var(--lr-cal-blanca); border:0; font-size:var(--fs-caption); }
.case-hero .lr-eyebrow { color:var(--lr-cal-blanca); margin:var(--space-7) 0 var(--space-4); }
.case-hero h1 { color:inherit; font:400 clamp(var(--fs-h1),8vw,var(--fs-mega))/0.95 var(--font-display); letter-spacing:-0.025em; margin:0; }
.case-hero-services { margin:var(--space-5) 0 0; font:500 var(--fs-caption) var(--font-ui); letter-spacing:0.04em; color:rgba(243,238,231,0.88); }

.case-notice { padding-top:var(--space-6); padding-bottom:0; }
.case-notice p { margin:0; padding:var(--space-4) var(--space-5); border-left:2px solid var(--border-accent); background:var(--bg-soft); font-size:var(--fs-caption); line-height:var(--leading-relaxed); color:var(--fg-secondary); max-width:80ch; }

.case-intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-9); align-items:start; }
.case-intro h2 { font-size:clamp(var(--fs-h3),3.4vw,var(--fs-h1)); line-height:1.1; margin:var(--space-4) 0 0; }
.case-intro .page-lead { margin-top:var(--space-4); }
.case-concept { margin-top:var(--space-5); font-family:var(--font-italic); font-style:italic; font-size:var(--fs-h5); color:var(--fg-secondary); }

.case-system { border-top:1px solid var(--border-subtle); padding-top:var(--space-8); padding-bottom:var(--space-8); }
.case-system-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-7); margin:var(--space-5) 0 0; }
.case-system-grid div { border-top:1px solid var(--border-default); padding-top:var(--space-4); }
.case-system-grid dt { font:700 var(--fs-eyebrow) var(--font-ui); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--fg-secondary); margin-bottom:var(--space-3); }
.case-system-grid dd { margin:0; font-size:var(--fs-h5); line-height:var(--leading-snug); }
.case-swatches { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--space-4); font:500 11px var(--font-ui); color:var(--fg-secondary); }
.case-swatches li { display:flex; flex-direction:column; gap:var(--space-2); }
.case-swatches span { display:block; width:56px; height:56px; border:1px solid var(--border-subtle); border-radius:var(--radius-xs); }

.case-pieces { background:var(--bg-soft); }
.case-pieces h2, .case-renders h2 { font-size:clamp(var(--fs-h3),4vw,var(--fs-h1)); margin:var(--space-4) 0 0; }
.case-pieces h2 em, .case-renders h2 em { color:var(--fg-link); }
.case-pieces-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-7) var(--space-6); margin-top:var(--space-8); }
.case-piece { margin:0; min-width:0; }
.case-piece--identidad { grid-column:1 / -1; }
.case-piece img, .case-render img { display:block; width:100%; height:auto; background:var(--bg-canvas); border-radius:var(--radius-xs); }
/* Pieces side by side share one frame so both columns end level; the identity board spans the row at 16:9. */
.case-piece img { aspect-ratio:4 / 3; object-fit:cover; }
.case-piece--identidad img { aspect-ratio:16 / 9; }
.case-piece figcaption { display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:baseline; margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--border-default); }
.case-piece figcaption strong { font:400 var(--fs-h5) var(--font-display); }
.case-piece figcaption span { font-size:var(--fs-caption); color:var(--fg-secondary); }
.case-piece figcaption a { font-size:var(--fs-caption); white-space:nowrap; }

.case-renders-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); margin-top:var(--space-8); }
.case-render { margin:0; }

.case-others h2 { font-size:var(--fs-h2); margin:0 0 var(--space-6); }
.case-others-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
.case-other { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4); padding:var(--space-5) 0; border:0; border-top:1px solid var(--border-default); color:var(--fg-primary); }
.case-other span { font:400 var(--fs-h3) var(--font-display); }
.case-other small { font-size:var(--fs-caption); color:var(--fg-secondary); }

@media (max-width:768px) {
 .case-hero { min-height:80svh; }
 .case-hero-content { padding:var(--space-10) var(--space-5) var(--space-7); }
 .case-notice { padding-left:var(--space-5); padding-right:var(--space-5); }
 .case-intro-grid, .case-system-grid, .case-pieces-grid, .case-renders-grid, .case-others-grid { grid-template-columns:1fr; gap:var(--space-6); }
 .case-piece figcaption { grid-template-columns:1fr; gap:var(--space-2); }
 .case-other span { font-size:var(--fs-h4); }
}

/* Scroll depth (parallax.js): images sit in a clipping frame; the hero clips its moving cover. */
.media-frame { overflow:hidden; border-radius:var(--radius-xs); background:var(--bg-soft); }
.media-frame img { display:block; width:100%; transform-origin:50% 50%; will-change:transform; border-radius:0; }
.project-hero, .case-hero { overflow:hidden; }
.project-hero > img, .case-hero > img { will-change:transform; }
.project-hero-content, .case-hero-content { will-change:transform, opacity; }