:root { --ink:#1e201d; --paper:#f2f0e9; --warm:#d8d0c2; --sage:#9ba18f; --line:rgba(30,32,29,.2); --pad:clamp(22px,5vw,76px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; }
img,video { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.topbar { position:fixed; z-index:50; top:0; left:0; right:0; height:72px; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; color:white; border-bottom:1px solid rgba(255,255,255,.25); transition:.3s ease; }
.topbar.scrolled { background:rgba(242,240,233,.94); color:var(--ink); backdrop-filter:blur(16px); border-color:var(--line); }
.brand { font-family:"Manrope",sans-serif; font-weight:600; letter-spacing:.14em; }
.brand span { display:inline-grid; place-items:center; margin-left:7px; width:27px; height:27px; border:1px solid currentColor; border-radius:50%; font-size:10px; }
nav { display:flex; gap:30px; font-size:13px; }
nav a { opacity:.85; } nav a:hover { opacity:1; }
.nav-cta { padding:10px 16px; border:1px solid currentColor; border-radius:99px; font-size:12px; }
.hero { position:relative; min-height:100svh; overflow:hidden; color:white; background:#30342e; }
.hero>img { position:absolute; inset:0; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,13,10,.72) 0%,rgba(11,13,10,.22) 60%,rgba(11,13,10,.18)),linear-gradient(0deg,rgba(11,13,10,.55),transparent 45%); }
.hero-copy { position:absolute; z-index:2; left:var(--pad); top:50%; transform:translateY(-50%); max-width:780px; }
.eyebrow { margin:0 0 20px; text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:600; }
.hero h1 { font-family:"Manrope"; font-weight:300; letter-spacing:-.055em; font-size:clamp(58px,8vw,118px); line-height:.89; margin:0; }
.hero-lede { max-width:480px; margin:28px 0 0; font-size:clamp(16px,1.7vw,21px); line-height:1.6; color:rgba(255,255,255,.8); }
.hero-facts { position:absolute; z-index:2; right:var(--pad); bottom:52px; display:grid; grid-template-columns:repeat(2,150px); gap:22px 30px; }
.hero-facts div { border-top:1px solid rgba(255,255,255,.45); padding-top:9px; display:flex; align-items:baseline; gap:8px; }
.hero-facts strong { font-family:"Manrope"; font-weight:300; font-size:31px; }.hero-facts span { font-size:10px; text-transform:uppercase; letter-spacing:.1em; opacity:.75; }
.scroll-cue { position:absolute; z-index:2; left:var(--pad); bottom:42px; font-size:12px; letter-spacing:.07em; }.scroll-cue span { margin-left:12px; }
.section { padding:clamp(90px,11vw,170px) var(--pad); }
.section-kicker { display:flex; align-items:center; gap:14px; text-transform:uppercase; letter-spacing:.2em; font-size:11px; margin-bottom:clamp(58px,7vw,105px); }.section-kicker span { display:grid; place-items:center; width:31px; height:31px; border:1px solid currentColor; border-radius:50%; letter-spacing:0; }
.intro-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:9vw; }
h2 { font-family:"Manrope"; font-weight:300; letter-spacing:-.045em; font-size:clamp(45px,6vw,86px); line-height:1.02; margin:0; }
.intro-copy { max-width:580px; }.intro-copy p { line-height:1.75; color:#5e625a; }.intro-copy .lead { font-family:"Manrope"; font-size:clamp(21px,2.2vw,31px); line-height:1.45; color:var(--ink); margin-top:0; }
.specs { margin:55px 0 0; }.specs div { display:grid; grid-template-columns:145px 1fr; padding:15px 0; border-top:1px solid var(--line); }.specs dt { color:#7b7f76; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }.specs dd { margin:0; }
.dark { background:#1e211d; color:#f4f1e9; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:52px; }.section-heading>p { max-width:360px; line-height:1.65; color:#94998f; }
.before-after-list { display:grid; gap:clamp(70px,9vw,135px); }.before-after-pair header { display:grid; grid-template-columns:45px 1fr 1fr; align-items:end; gap:24px; margin-bottom:22px; }.before-after-pair header>span { color:#858a80; font-size:12px; }.before-after-pair h3 { margin:0; font-family:"Manrope"; font-size:clamp(26px,3vw,43px); font-weight:300; }.before-after-pair header p { max-width:390px; justify-self:end; margin:0; color:#aeb3aa; line-height:1.6; font-size:14px; }.pair-images { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.pair-images figure { position:relative; margin:0; background:#30332e; }.pair-images img { width:100%; aspect-ratio:4/3; object-fit:contain; background:#292b27; }.pair-images figcaption { position:absolute; left:15px; top:15px; padding:7px 12px; border-radius:99px; background:rgba(20,20,20,.58); backdrop-filter:blur(8px); text-transform:uppercase; letter-spacing:.15em; font-size:9px; color:white; }
.split { align-items:end; }.split p { max-width:470px; color:#676b63; line-height:1.7; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.timeline article { position:relative; }.timeline article>span { position:absolute; z-index:2; top:12px; left:12px; width:31px; height:31px; display:grid; place-items:center; background:rgba(242,240,233,.85); border-radius:50%; font-size:10px; }.timeline img { aspect-ratio:3/4; object-fit:cover; filter:saturate(.72); }.timeline h3 { font-family:"Manrope"; font-weight:500; font-size:21px; margin:18px 0 6px; }.timeline p { color:#747970; line-height:1.55; font-size:13px; margin:0; }
.films { background:#d8d1c5; }.film-sequence { display:grid; gap:70px; }.film-sequence article { display:grid; grid-template-columns:42px minmax(0,1.5fr) minmax(240px,.6fr); gap:24px; align-items:start; padding-top:20px; border-top:1px solid rgba(30,32,29,.25); }.film-sequence article>span { display:grid; place-items:center; width:32px; height:32px; border:1px solid currentColor; border-radius:50%; font-size:10px; }.film-sequence video { aspect-ratio:16/9; object-fit:contain; background:#171914; }.film-sequence article>div { padding:8px 0 0 12px; }.film-sequence article>div>p:first-child { margin:0 0 12px; text-transform:uppercase; letter-spacing:.16em; font-size:10px; color:#666a61; }.film-sequence h3 { margin:0; font-family:"Manrope"; font-weight:300; font-size:clamp(28px,3vw,45px); line-height:1.08; }.film-description { margin:20px 0 0; color:#62665e; line-height:1.7; font-size:14px; }
.masonry { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:260px; gap:12px; }.masonry button { padding:0; border:0; cursor:zoom-in; background:#ddd; overflow:hidden; }.masonry img { height:100%; object-fit:cover; transition:transform .6s ease; }.masonry button:hover img { transform:scale(1.025); }.masonry .tall { grid-row:span 2; }.masonry .wide { grid-column:span 2; }
.closing { padding:140px var(--pad) 60px; min-height:75vh; display:flex; flex-direction:column; justify-content:center; background:#aeb2a1; }.closing h2 { font-size:clamp(70px,11vw,160px); line-height:.86; }.closing a { align-self:flex-end; margin-top:70px; border-bottom:1px solid; padding-bottom:5px; }
.lightbox { max-width:none; width:100%; height:100%; border:0; padding:40px; background:rgba(13,15,12,.94); }.lightbox::backdrop { background:transparent; }.lightbox img { width:100%; height:100%; object-fit:contain; }.lightbox button { position:absolute; top:20px; right:25px; z-index:3; border:0; background:none; color:white; font-size:42px; cursor:pointer; }
.reveal { animation:rise .9s both .15s; } @keyframes rise { from{opacity:0;transform:translateY(calc(-50% + 25px))} to{opacity:1;transform:translateY(-50%)} }
@media(max-width:900px){ nav{display:none}.hero-facts{left:var(--pad);right:var(--pad);grid-template-columns:repeat(4,1fr);bottom:90px}.scroll-cue{display:none}.intro-grid{grid-template-columns:1fr}.intro-grid{gap:50px}.timeline{grid-template-columns:repeat(2,1fr)}.masonry{grid-template-columns:repeat(2,1fr)}.masonry .wide{grid-column:span 1}.section-heading{align-items:start;flex-direction:column}.film-sequence article{grid-template-columns:38px 1fr}.film-sequence article>div{grid-column:2}}
@media(max-width:620px){.topbar{height:62px}.nav-cta{font-size:10px}.hero-copy{top:38%;}.hero h1{font-size:55px}.hero-lede{font-size:15px;max-width:330px}.hero-facts{grid-template-columns:repeat(2,1fr);bottom:28px}.section{padding-top:85px;padding-bottom:85px}.section-kicker{margin-bottom:50px}.intro-grid h2,h2{font-size:43px}.specs div{grid-template-columns:115px 1fr}.before-after-pair header{grid-template-columns:34px 1fr}.before-after-pair header p{grid-column:2;justify-self:start}.pair-images{grid-template-columns:1fr}.pair-images img{aspect-ratio:4/3}.timeline{gap:10px}.timeline img{aspect-ratio:3/4}.film-sequence{gap:55px}.film-sequence article{grid-template-columns:1fr}.film-sequence article>div{grid-column:1;padding-left:0}.masonry{grid-auto-rows:190px;gap:7px}.closing{min-height:65vh}.closing h2{font-size:65px}.closing a{align-self:flex-start}.lightbox{padding:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{animation:none}.masonry img{transition:none}}
video::-webkit-media-controls-download-button{display:none!important}

/* DIADRIA HOMES */
.topbar,.topbar.scrolled{height:110px;background:#fff;color:#171714;border-bottom:1px solid #e7e2d8}.topbar .brand{display:block;width:160px;height:100px;flex-shrink:0}.topbar .brand img{width:100%;height:100%;object-fit:contain}.project-footer{padding:32px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff}.project-footer img{width:200px;height:auto}.project-footer>a:last-child{font-size:13px;border-bottom:1px solid #b7965c;padding-bottom:8px}section[id]{scroll-margin-top:120px}@media(max-width:620px){.topbar{height:96px}.topbar .brand{width:132px;height:88px}.project-footer{flex-direction:column;align-items:flex-start}.hero-copy{top:43%}}

@media(max-width:620px){.hero{min-height:780px}.hero-copy,.hero-copy.reveal{top:175px;right:var(--pad);transform:none;animation:none}.hero h1{font-size:clamp(38px,12vw,55px)}.topbar{gap:12px}.topbar .nav-cta{white-space:nowrap}.intro-grid>*{min-width:0}}

.hero-copy{transform:translateY(-50%)}.film-sequence video{aspect-ratio:9/16;max-height:640px}.furnished{margin:60px 0 0}.furnished img{max-height:700px;object-fit:contain}.furnished figcaption{margin-top:14px;color:#62665e;font-size:13px}.pair-images img{aspect-ratio:4/5}.timeline img{object-fit:contain;background:#ddd8ce}@media(max-width:620px){.hero-copy{transform:none}.hero{min-height:820px}.hero h1{font-size:46px}.hero-copy{top:150px}.masonry{grid-template-columns:1fr}.closing h2{font-size:52px}}
.redistribution-story{max-width:900px;margin:0 0 64px}.redistribution-story p{line-height:1.8;color:#5e625a}.redistribution-story .lead{font-size:clamp(21px,2.2vw,30px);color:var(--ink);line-height:1.5}.timeline img{aspect-ratio:3/4;object-fit:contain}.masonry button:last-child img{object-fit:contain;background:#dedbd3}

/* Los dos lados de cada comparación comparten tamaño y muestran la foto completa. */
.pair-images{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.pair-images figure{min-width:0;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pair-images img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain}

.building{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(30px,6vw,90px);align-items:center;background:#e7e2d9}
.building h2{font-size:clamp(38px,4.8vw,72px);line-height:1.08;margin:22px 0 30px}
.building-copy>p:last-child{max-width:620px;line-height:1.8;color:#555a53}
.building figure{margin:0;min-width:0}
.building img{display:block;width:100%;max-height:760px;object-fit:cover}
.building figcaption{margin-top:14px;font-size:13px;color:#62665e}
@media(max-width:900px){.building{grid-template-columns:1fr}.building figure{max-width:620px}}
@media(max-width:620px){.pair-images{grid-template-columns:1fr}.pair-images figure{aspect-ratio:4/5}}