/* ============================================================
   ZYH — Heredia y Zarraga | AFRa Arquitectos
   ============================================================ */

:root{
  --ink:#22242C;
  --concrete:#EDEAE3;
  --concrete-2:#E1DDD3;
  --slate:#4A4D59;
  --wood:#B08659;
  --wood-deep:#835529;
  --wood-vivid:#DA8225;
  --white:#FFFFFF;
  --line: rgba(34,36,44,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--concrete);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
h1,h2,h3,.serif{font-family:'Fraunces', serif;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit;}
img{display:block; max-width:100%; height:auto;}
button{font:inherit;}

.wrap{max-width:1240px; margin:0 auto; padding:0 clamp(20px, 5vw, 32px);}

/* ---------- eyebrow / corner motif (signature element) ---------- */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--slate); margin-bottom:18px;
}
.eyebrow .angle{
  width:14px; height:14px;
  border-left:1.5px solid var(--wood-deep);
  border-bottom:1.5px solid var(--wood-deep);
  flex:none;
}
.lot .eyebrow .angle, .specs .eyebrow .angle, .contact .eyebrow .angle{
  border-color:var(--wood);
}

/* ---------- nav ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(237,234,227,0.66);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,0.5);
  box-shadow:0 1px 28px rgba(34,36,44,0.06);
}
.nav-inner{
  padding:18px clamp(20px, 5vw, 32px);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:'Fraunces', serif; font-size:22px; letter-spacing:0.06em;
  display:flex; align-items:baseline; gap:10px; text-decoration:none;
}
.brand small{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.1em;
  color:var(--slate); text-transform:uppercase; font-weight:400;
}
@media (max-width:380px){ .brand small{display:none;} }
nav.links{display:flex; gap:34px; font-size:14px;}
nav.links a{text-decoration:none; color:var(--ink); position:relative; padding-bottom:3px;}
nav.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--wood-deep); transform:scaleX(0); transform-origin:left;
  transition:transform 0.25s ease;
}
nav.links a:hover::after{transform:scaleX(1);}
.nav-right{display:flex; align-items:center; gap:18px;}
.nav-cta{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none; color:var(--white);
  background:var(--ink); padding:11px 20px; border-radius:2px;
  white-space:nowrap;
}
@media (max-width:820px){
  nav.links{display:none;}
  .nav-cta{display:none;}
}

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; margin-right:-5px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{height:1.5px; width:22px; background:var(--ink); transition:transform 0.25s ease, opacity 0.25s ease;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media (max-width:820px){ .nav-toggle{display:flex;} }

.links-mobile{
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  background:rgba(237,234,227,0.85);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-top:0 solid var(--line);
  transition:max-height 0.35s ease;
}
.links-mobile.open{ max-height:440px; border-top-width:1px; }
.links-mobile a{
  padding:16px 20px; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--line); font-size:15px;
}
.links-mobile a.mobile-cta{
  color:var(--wood-deep); font-family:'IBM Plex Mono', monospace;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  border-bottom:none;
}
@media (min-width:821px){ .links-mobile{display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  color:var(--white); overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img{width:100%; height:100%; object-fit:cover;}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(34,36,44,0.25) 0%, rgba(34,36,44,0.08) 35%, rgba(34,36,44,0.92) 100%);
}
.hero-content{
  position:relative; z-index:2; width:100%;
  padding-top:clamp(110px, 22vh, 180px);
  padding-bottom:clamp(48px, 9vh, 72px);
  /* the photo behind can get busy/light in places (windows, sky) —
     a soft shadow keeps the white text legible everywhere */
  text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 6px 24px rgba(0,0,0,0.4);
}
.hero-eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:clamp(10.5px, 1.6vw, 12px); letter-spacing:0.14em;
  text-transform:uppercase; margin-bottom:18px; line-height:1.5;
  display:flex; align-items:center; gap:12px;
}
.hero-eyebrow .rule{width:28px; height:1px; background:var(--wood); flex:none;}
.hero h1{
  font-size:clamp(56px, 13vw, 156px); font-weight:400; line-height:0.86;
  letter-spacing:0.01em;
}
.hero-sub{
  display:flex; flex-wrap:wrap; gap:16px clamp(24px, 5vw, 40px); align-items:flex-end;
  margin-top:clamp(20px, 4vw, 28px); justify-content:space-between;
}
.hero-address{font-size:clamp(16px, 2vw, 18px); font-weight:500; max-width:420px;}
.hero-address span{display:block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; opacity:0.85; margin-top:6px; letter-spacing:0.03em; line-height:1.5;}
.hero-stats{display:flex; flex-wrap:wrap; gap:12px clamp(22px, 5vw, 36px);}
.hero-stat b{display:block; font-family:'Fraunces',serif; font-size:clamp(24px, 4vw, 30px); font-weight:500;}
.hero-stat span{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.85; white-space:nowrap;}

/* urgency badge — one clear, non-redundant callout, with a soft pulse
   instead of a literal blink so it stays inside the site's vibe */
.urgency-badge{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 16px;
  width:fit-content; max-width:100%;
  margin:clamp(26px, 5vw, 38px) auto 0;
  padding:clamp(14px, 2.4vw, 20px) clamp(20px, 3.4vw, 30px);
  border:1.5px solid var(--wood-vivid);
  background:linear-gradient(rgba(218,130,37,0.24), rgba(218,130,37,0.24)), rgba(0,0,0,0.4);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-radius:2px;
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
  font-size:clamp(14px, 2.4vw, 19px);
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--white);
  box-shadow:0 0 0 1px rgba(218,130,37,0.4), 0 12px 34px rgba(0,0,0,0.32);
}
.urgency-dot{
  position:relative;
  width:11px; height:11px; border-radius:50%;
  background:var(--wood-vivid);
  flex:none;
}
.urgency-dot::before{
  content:"";
  position:absolute; inset:-9px;
  border-radius:50%;
  border:1.5px solid var(--wood-vivid);
  animation:urgency-ping 1.3s ease-out infinite;
}
@keyframes urgency-ping{
  0%{ transform:scale(0.5); opacity:0.9; }
  75%{ transform:scale(1.9); opacity:0; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---------- section shared ---------- */
section{padding:clamp(64px, 10vw, 120px) 0;}
.section-head{max-width:640px; margin-bottom:clamp(36px, 6vw, 56px);}
.section-head h2{font-size:clamp(30px,4.6vw,52px); font-weight:400; line-height:1.08;}
.section-head p{margin-top:16px; font-size:clamp(15px, 1.6vw, 17px); color:var(--slate); max-width:540px;}

/* ---------- lot / pitch section ---------- */
.lot{background:var(--ink); color:var(--white);}
.lot .eyebrow{color:rgba(255,255,255,0.68);}
.lot .section-head p{color:rgba(255,255,255,0.72);}
.lot-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:start;}
@media (max-width:900px){ .lot-grid{grid-template-columns:1fr; gap:48px;} }
.reasons{display:grid; gap:34px; margin-top:8px;}
.reason{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,0.14);
}
.reason:last-child{border-bottom:none; padding-bottom:0;}
.reason .num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--wood); padding-top:4px;}
.reason h4{font-family:'Fraunces',serif; font-weight:500; font-size:19px; margin-bottom:6px;}
.reason p{color:rgba(255,255,255,0.7); font-size:15px;}
.lot-maps{display:grid; gap:14px;}
.lot-maps img{border-radius:2px;}
.lot-maps .cap{font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(255,255,255,0.6); letter-spacing:0.04em;}

/* ---------- gallery / interiors ---------- */
.gallery{background:var(--concrete);}
/* 1.66fr:1fr is tuned so that, with every figure sized off its own real
   aspect-ratio below, the facade column and the stack column land on
   almost the same total height (recalculated for the facade video's
   3:4 ratio, slightly different from the old facade photo's 829:1172) */
.gallery-grid{display:grid; grid-template-columns:1.66fr 1fr; gap:24px;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:1fr;} }
.gallery figure{position:relative; overflow:hidden; border-radius:2px; margin:0;}
.gallery figure img{width:100%; height:100%; object-fit:cover; display:block;}
/* every photo is sized off its own real ratio — never flattened into a
   fixed short box, never cropped */
.gallery figure.tall{
  aspect-ratio:414 / 552;
  background:var(--concrete-2);
  display:flex; align-items:center; justify-content:center;
}
.gallery figure.tall img, .gallery figure.tall video{width:100%; height:100%; object-fit:contain;}
.gallery-stack{display:grid; gap:24px;}
.gallery-stack figure:nth-child(1){aspect-ratio:1536 / 1024;}
.gallery-stack figure:nth-child(2){aspect-ratio:1516 / 1038;}
.gallery-stack figure:nth-child(3){aspect-ratio:1700 / 1272;}
figcaption{
  position:absolute; left:20px; bottom:16px; z-index:2;
  max-width:calc(100% - 40px);
  color:var(--white); font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase;
  background:rgba(34,36,44,0.62); padding:6px 10px; backdrop-filter:blur(4px);
}

/* ---------- obra en construcción ---------- */
.obra{background:var(--ink); color:var(--white);}
.obra .eyebrow{color:rgba(255,255,255,0.68);}
.obra .section-head p{color:rgba(255,255,255,0.72);}
.obra-grid{display:grid; grid-template-columns:0.85fr 1fr; gap:64px; align-items:center;}
@media (max-width:900px){ .obra-grid{grid-template-columns:1fr; gap:32px;} }
.obra-media{
  position:relative; margin:0; overflow:hidden; border-radius:2px;
  /* real photo ratio (3:4) — shows the full building, no crop */
  aspect-ratio:3 / 4;
  max-width:460px;
}
@media (max-width:900px){ .obra-media{max-width:360px; margin:0 auto;} }
.obra-media img{width:100%; height:100%; object-fit:cover; display:block;}

/* ---------- local comercial ---------- */
.local{background:var(--ink); color:var(--white);}
.local .eyebrow{color:rgba(255,255,255,0.68);}
.local-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
@media (max-width:900px){ .local-grid{grid-template-columns:1fr; gap:28px;} }
.local-media{
  position:relative; margin:0; overflow:hidden; border-radius:2px;
  /* capped width (like .obra-media) so a landscape photo doesn't tower
     over a short text column — real photo ratio, never cropped */
  aspect-ratio:1600 / 894;
  max-width:560px;
}
@media (max-width:900px){ .local-media{max-width:100%;} }
.local-media img{width:100%; height:100%; object-fit:cover; display:block;}
.local-stats{display:flex; flex-wrap:wrap; gap:12px clamp(24px, 5vw, 40px); margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.16);}
.local-stats div b{display:block; font-family:'Fraunces',serif; font-size:clamp(24px, 3vw, 28px); font-weight:500;}
.local-stats div span{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; color:rgba(255,255,255,0.6); letter-spacing:0.06em;}

/* ---------- units ---------- */
.units{background:var(--concrete-2);}
.unit-toggle-wrap{display:flex; gap:10px; margin-bottom:clamp(32px, 5vw, 44px);}
.unit-tab{
  flex:1 1 0; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding:13px 16px; border:1px solid var(--line); background:transparent; cursor:pointer;
  border-radius:2px; color:var(--slate);
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.unit-tab:hover{border-color:var(--ink); color:var(--ink);}
.unit-tab.active{background:var(--ink); color:var(--white); border-color:var(--ink);}
.unit-card{display:none; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.unit-card.active{display:grid;}
@media (max-width:900px){ .unit-card{grid-template-columns:1fr; gap:32px;} }
.unit-plan{background:var(--ink); border:1px solid var(--line); border-radius:2px; overflow:hidden;}
.unit-plan img{width:100%;}
.unit-name{font-size:clamp(28px,4vw,44px); margin-bottom:6px;}
.unit-meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--wood-deep); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:clamp(20px, 4vw, 28px);}
.unit-dims{width:100%; border-collapse:collapse; margin-bottom:28px;}
.unit-dims tr{border-bottom:1px solid var(--line);}
.unit-dims tr:last-child{border-bottom:none;}
.unit-dims td{padding:12px 0; font-size:14px;}
.unit-dims td:first-child{color:var(--slate);}
.unit-dims td:last-child{text-align:right; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.unit-totals{display:flex; flex-wrap:wrap; gap:12px clamp(20px, 5vw, 36px); padding-top:8px; border-top:1px solid var(--ink); margin-bottom:8px;}
.unit-totals div b{display:block; font-family:'Fraunces',serif; font-size:26px; font-weight:500;}
.unit-totals div span{font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; color:var(--slate); letter-spacing:0.06em;}
.unit-note{font-size:13px; color:var(--slate); margin-top:18px;}

/* ---------- specs ---------- */
.specs{background:var(--ink); color:var(--white);}
.specs .eyebrow{color:rgba(255,255,255,0.68);}
.specs .section-head p{color:rgba(255,255,255,0.72);}
.spec-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:0; border-top:1px solid rgba(255,255,255,0.14);}
@media (max-width:760px){ .spec-grid{grid-template-columns:1fr;} }
.spec-item{padding:clamp(22px, 4vw, 30px) clamp(20px, 4vw, 28px); border-bottom:1px solid rgba(255,255,255,0.14); border-right:1px solid rgba(255,255,255,0.14);}
.spec-grid .spec-item:nth-child(2n){border-right:none;}
@media (max-width:760px){ .spec-item{border-right:none !important;} }
.spec-item h4{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--wood); margin-bottom:12px;}
.spec-item p{font-size:14.5px; color:rgba(255,255,255,0.76); line-height:1.65;}

/* ---------- financing timeline ---------- */
.financing{background:var(--concrete);}
.fin-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:900px){ .fin-grid{grid-template-columns:1fr; gap:48px;} }
.timeline{position:relative; padding-left:30px;}
.timeline::before{content:""; position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line);}
.tl-item{position:relative; padding-bottom:40px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:""; position:absolute; left:-30px; top:4px; width:11px; height:11px;
  border-radius:50%; background:var(--concrete); border:2px solid var(--wood-deep);
}
.tl-item.done::before{background:var(--wood-deep);}
.tl-item .date{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); margin-bottom:4px;}
.tl-item h4{font-family:'Fraunces',serif; font-size:20px; font-weight:500;}
.payment-card{background:var(--white); border:1px solid var(--line); border-radius:2px; padding:clamp(26px, 5vw, 40px);}
.payment-card h3{font-size:22px; margin-bottom:26px;}
.payment-row{display:flex; justify-content:space-between; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line);}
.payment-row:last-of-type{border-bottom:none;}
.payment-row span{font-size:14px; color:var(--slate);}
.payment-row b{font-family:'Fraunces',serif; font-size:24px; font-weight:500;}
.payment-note{margin-top:22px; font-size:13px; color:var(--slate); line-height:1.6;}

/* ---------- studio strip ---------- */
.studio{padding:clamp(48px, 8vw, 80px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.studio-inner{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;}
.studio-mark{font-family:'Fraunces',serif; font-size:clamp(21px, 3vw, 26px); letter-spacing:0.04em;}
.studio-stats{display:flex; gap:clamp(26px, 5vw, 52px); flex-wrap:wrap;}
.studio-stats div b{display:block; font-family:'Fraunces',serif; font-size:clamp(26px, 4vw, 34px); font-weight:500;}
.studio-stats div span{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate); white-space:nowrap;}

/* ---------- contact ---------- */
.contact{background:var(--ink); color:var(--white); text-align:center;}
.contact .eyebrow{justify-content:center; color:rgba(255,255,255,0.68);}
.contact h2{font-size:clamp(32px,6vw,68px); max-width:820px; margin:0 auto clamp(18px, 3vw, 26px); line-height:1.08;}
.contact p.lead{color:rgba(255,255,255,0.72); max-width:520px; margin:0 auto clamp(32px, 6vw, 44px); font-size:clamp(15px, 1.8vw, 17px);}
.contact-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(40px, 7vw, 56px);}
.btn{
  font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none; padding:16px 30px; border-radius:2px; display:inline-block;
  text-align:center;
  transition:opacity 0.2s ease;
}
@media (max-width:480px){
  .contact-actions{flex-direction:column; align-items:stretch; gap:12px;}
}
.btn:hover{opacity:0.85;}
.btn-primary{background:var(--wood); color:var(--ink);}
.btn-ghost{border:1px solid rgba(255,255,255,0.35); color:var(--white);}
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; max-width:900px; margin:0 auto;
  border-top:1px solid rgba(255,255,255,0.14); padding-top:40px;
}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr;} }
.contact-grid div span{display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.58); margin-bottom:8px;}
.contact-grid div b{font-size:16px; font-weight:500;}

footer{padding:28px 0; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.04em; color:var(--slate); background:var(--ink); border-top:1px solid rgba(255,255,255,0.1);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}