/* ===================================================================
   XELVÁTIKA — design tokens (extraídos del book de marca)
   =================================================================== */
:root{
  --dark:        #0d1b12;   /* verde casi negro, portada */
  --forest:      #16321f;   /* verde bosque, headers */
  --forest-2:    #1e4028;
  --green:       #4c7c3f;   /* verde script / acentos */
  --green-light: #7fa864;
  --gold:        #c99a3d;
  --gold-light:  #e3c069;
  --blue:        #1f5c86;
  --blue-light:  #4f8fb8;
  --red:         #b6362b;
  --red-light:   #d4574a;
  --cream:       #f3ead6;
  --cream-2:     #ece0c6;
  --paper:       #f7f1e3;
  --ink:         #211b12;
  --white:       #ffffff;

  --font-serif:  'Cinzel', serif;
  --font-script: 'Alex Brush', cursive;
  --font-sans:   'Jost', sans-serif;

  --ease: cubic-bezier(.16,.84,.24,1);
  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:500; }
p{ margin:0; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 32px; }

.script{ font-family:var(--font-script); font-weight:400; font-style:normal; color:var(--green); }
.h2 .script{ font-size:1.35em; line-height:0; position:relative; top:.12em; }
.light .script{ color:var(--gold-light); }

.h2{
  font-family:var(--font-serif);
  font-size:clamp(2.1rem, 4.2vw, 3.6rem);
  letter-spacing:.01em;
  color:var(--forest);
  margin-bottom:.3em;
}
.h2.light{ color:var(--white); }
.h2.center{ text-align:center; }

.kicker{
  font-family:var(--font-sans);
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:.72rem;
  font-weight:600;
  color:var(--green);
  margin-bottom:14px;
}
.kicker.center{ text-align:center; }
.kicker.light{ color:var(--gold-light); }

/* film grain overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--gold),var(--green));
  z-index:9999; transform:scaleX(0); transform-origin:left; transition:transform .05s linear;
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; background:var(--dark); z-index:10000;
  overflow:hidden;
}
.loader-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border-radius:2px; border:1px solid transparent; cursor:pointer; transition:all .35s var(--ease);
  white-space:nowrap;
}
.btn-solid{ background:var(--gold); color:var(--dark); }
.btn-solid:hover{ background:var(--gold-light); transform:translateY(-2px); }
.btn-line{ border-color:rgba(255,255,255,.6); color:var(--white); }
.btn-line:hover{ background:rgba(255,255,255,.12); }
.btn-ghost{ border-color:var(--forest); color:var(--forest); padding:10px 22px; }
.btn-ghost:hover{ background:var(--forest); color:var(--white); }

/* ---------- nav (floating pill) ---------- */
.nav{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:500;
  display:inline-flex; align-items:center; gap:26px;
  background:rgba(13,27,18,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1); border-radius:999px;
  padding:9px 12px 9px 26px; box-shadow:0 14px 34px -14px rgba(0,0,0,.5);
  max-width:calc(100vw - 32px);
}
.nav-sep{ width:1px; height:18px; background:rgba(255,255,255,.15); }
.nav-logo{ display:flex; align-items:center; white-space:nowrap; }
.nav-logo img{ height:40px; width:auto; display:block; }
.nav-links{ display:flex; gap:20px; }
.nav-links a{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.78);
  position:relative; padding-bottom:3px; white-space:nowrap;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{ padding:9px 18px; font-size:.66rem; border-radius:999px; }
.burger{ display:none; background:none; border:0; width:24px; height:16px; position:relative; cursor:pointer; }
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--white); transition:all .3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; }
.mobile-menu{
  position:fixed; inset:0; background:var(--forest); z-index:499; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px; transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ color:var(--white); font-family:var(--font-serif); font-size:1.3rem; letter-spacing:.08em; }

/* ---------- hero: scroll-scrubbed video ---------- */
.scroll-stage{ height:600vh; position:relative; background:var(--dark); }
.pin{ position:sticky; top:0; height:100svh; width:100%; overflow:hidden; background:var(--dark); }
.scrub-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.overlay-grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,10,.4) 0%, rgba(8,16,10,.12) 28%, rgba(8,16,10,.3) 60%, rgba(8,16,10,.82) 100%);
}
.hero-elements{ position:absolute; top:96px; left:40px; display:flex; flex-direction:column; gap:14px; z-index:3; }
.elem-badge{
  display:flex; align-items:center; gap:8px;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.7);
  border-left:1px solid rgba(255,255,255,.3); padding-left:10px;
}
.elem-badge img{ width:16px; height:16px; }
.caption{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(900px,88%); text-align:center; z-index:5; opacity:0; pointer-events:none;
}
.caption .hero-eyebrow{ color:var(--gold-light); letter-spacing:.4em; text-transform:uppercase; font-size:.75rem; margin-bottom:20px; }
.caption h1{ font-family:var(--font-serif); color:var(--white); font-weight:500; line-height:1.08; font-size:clamp(2.3rem,5.6vw,4.6rem); }
.caption h1 .script{ font-size:1.2em; }
.caption h2{ font-family:var(--font-serif); color:var(--cream); font-weight:400; line-height:1.3; font-size:clamp(1.5rem,3.2vw,2.5rem); }
.hero-cta{
  position:absolute; left:50%; bottom:16%; transform:translateX(-50%); z-index:6;
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center; opacity:0;
}
.scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.7); font-size:.65rem; letter-spacing:.3em; text-transform:uppercase;
  transition:opacity .3s;
}
.scroll-hint span{ width:1px; height:34px; background:linear-gradient(var(--gold-light),transparent); animation:cue 1.8s infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0;} 40%{ transform:scaleY(1); transform-origin:top; opacity:1;} 60%{ transform:scaleY(1); transform-origin:bottom; opacity:1;} 100%{ transform:scaleY(0); transform-origin:bottom; opacity:0;} }

/* ---------- reveal utility (set by JS/GSAP) ---------- */
.reveal-up{ opacity:0; transform:translateY(36px); }
.reveal-img{ opacity:0; }

/* ---------- tesis ---------- */
.tesis{ padding:130px 0; background:var(--paper); position:relative; }
.tesis-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; margin-top:56px; align-items:start; }
.tesis-cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.tcard{ background:var(--white); border:1px solid rgba(22,50,31,.08); padding:26px 24px; border-radius:4px; box-shadow:0 14px 34px -22px rgba(22,50,31,.25); }
.tcard h3{ font-family:var(--font-serif); font-size:1rem; color:var(--forest); margin-bottom:10px; }
.tcard p{ font-size:.88rem; line-height:1.55; color:#4a4436; }
.tcard.highlight{ grid-column:span 2; background:var(--forest); color:var(--cream); }
.tcard.highlight h3{ color:var(--gold-light); }
.tcard.highlight ul{ display:flex; flex-direction:column; gap:8px; font-size:.88rem; }
.tcard.highlight li::before{ content:"— "; color:var(--gold-light); }
.num{ font-family:var(--font-serif); color:var(--green); font-size:1.5rem; }

.chart-card{ background:var(--white); border-radius:6px; padding:32px 30px; box-shadow:0 20px 50px -28px rgba(22,50,31,.3); }
.chart-title{ font-weight:600; font-size:.92rem; color:var(--forest); margin-bottom:22px; }
.chart-title span{ font-weight:400; color:#8a8270; font-size:.8rem; }
.chart{ display:flex; align-items:flex-end; gap:22px; height:220px; border-bottom:1px solid #e6dcc4; padding-bottom:0; }
.chart-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; }
.occ-dot{ position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:9px; height:9px; border-radius:50%; background:var(--forest); box-shadow:0 0 0 4px rgba(22,50,31,.12); }
.occ-label{ position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-size:.72rem; font-weight:600; color:var(--forest); white-space:nowrap; }
.bar{ width:60%; max-width:52px; background:linear-gradient(180deg,var(--green-light),var(--green)); border-radius:3px 3px 0 0; position:relative; transform:scaleY(0); transform-origin:bottom; transition:transform 1.1s var(--ease); }
.bar-value{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-size:.78rem; font-weight:700; color:var(--forest); white-space:nowrap; }
.bar-name{ margin-top:12px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8a8270; }
.chart-src{ margin-top:18px; font-size:.68rem; color:#a39c86; line-height:1.5; }

/* ---------- ubicación ---------- */
.ubicacion{ display:grid; grid-template-columns:1.15fr .85fr; min-height:640px; background:var(--dark); }
.ubi-img{ position:relative; overflow:hidden; }
.ubi-img img{ width:100%; height:100%; object-fit:cover; min-height:420px; }
.ubi-copy{ padding:90px 60px; display:flex; flex-direction:column; justify-content:center; color:var(--cream); }
.ubi-copy .kicker{ color:var(--gold-light); }
.ubi-copy .h2{ color:var(--white); }
.ubi-copy > p{ font-size:1rem; line-height:1.7; color:rgba(243,234,214,.82); max-width:420px; margin-bottom:34px; }
.dist-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 30px; }
.dist-list li{ display:flex; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.12); padding-bottom:8px; font-size:.85rem; }
.dist-list span{ color:rgba(243,234,214,.75); }
.dist-list b{ color:var(--gold-light); font-weight:600; }

/* ---------- servicios / masterplan ---------- */
.servicios{ background:var(--cream); padding:120px 0 0; }
.serv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(22,50,31,.12); margin-top:50px; border:1px solid rgba(22,50,31,.12); }
.serv-item{ background:var(--cream); padding:30px 24px; display:flex; flex-direction:column; gap:14px; font-size:.85rem; font-weight:500; color:var(--forest); }
.serv-item span{ font-size:1.6rem; }
.masterplan{ position:relative; margin-top:80px; overflow:hidden; }
.masterplan img{ width:100%; height:auto; display:block; }
.masterplan-tags{ position:absolute; top:26px; left:26px; display:flex; flex-direction:column; gap:10px; }
.tag{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--white); padding:7px 14px; border-radius:20px; width:max-content; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.tag-agua{ background:var(--blue); } .tag-tierra{ background:var(--green); } .tag-aire{ background:var(--gold); color:var(--ink); } .tag-fuego{ background:var(--red); }

/* ---------- lote ---------- */
.lote{ background:var(--paper); padding:140px 0; }
.lote-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; }
.lote-stats{ display:flex; gap:34px; flex-wrap:wrap; margin:34px 0; }
.lote-stats > div{ display:flex; flex-direction:column; gap:6px; max-width:160px; }
.lote-stats strong{ font-family:var(--font-serif); font-size:1.9rem; color:var(--green); }
.lote-stats span{ font-size:.8rem; color:#5c5646; line-height:1.4; }
.lote-amenities{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lote-amenities div{ font-size:.85rem; padding:12px 16px; background:var(--white); border-radius:4px; border:1px solid rgba(22,50,31,.08); }
.lote-cube{ display:flex; justify-content:center; }
.cube{ position:relative; width:220px; height:220px; }
.cube-face{ position:absolute; }
.cube-face.top{ width:180px; height:104px; background:linear-gradient(135deg,var(--green-light),var(--green)); top:0; left:20px; clip-path:polygon(50% 0,100% 25%,50% 50%,0 25%); }
.cube-face.front{ width:180px; height:110px; background:linear-gradient(180deg,#8a5a3a,#5c3a24); top:66px; left:20px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:skewX(0deg); }
.cube-face.side{ display:none; }
.cube-m2{ position:absolute; bottom:-6px; left:0; right:0; text-align:center; font-family:var(--font-serif); color:var(--forest); font-size:1.2rem; }

/* ---------- 360 ---------- */
.modelo360{ position:relative; padding:150px 0 110px; overflow:hidden; color:var(--white); }
.m360-bg{ position:absolute; inset:0; }
.m360-bg img{ width:100%; height:100%; object-fit:cover; filter:blur(2px) saturate(.7); transform:scale(1.05); }
.m360-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,16,10,.93),rgba(8,16,10,.86) 40%,rgba(8,16,10,.95)); }
.modelo360 .wrap{ position:relative; z-index:2; }
.wheel-wrap{ position:relative; max-width:560px; margin:70px auto 60px; }
.wheel{ width:100%; height:auto; }
.wheel-track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:36; }
.wheel-seg{ fill:none; stroke-width:36; stroke-dasharray:235.5 942; stroke-linecap:butt; transform-origin:200px 200px; transform:rotate(-90deg); }
.seg-1{ stroke:var(--green); stroke-dashoffset:0; }
.seg-2{ stroke:var(--gold); stroke-dashoffset:-235.5; }
.seg-3{ stroke:var(--blue); stroke-dashoffset:-471; }
.seg-4{ stroke:var(--red); stroke-dashoffset:-706.5; }
.wheel-center-num{ font-family:var(--font-serif); font-size:38px; fill:var(--white); text-anchor:middle; }
.wheel-center-lbl{ font-size:11px; letter-spacing:4px; fill:rgba(255,255,255,.6); text-anchor:middle; }
.wheel-label{ position:absolute; max-width:210px; font-size:.78rem; line-height:1.5; }
.wheel-label b{ display:block; font-family:var(--font-serif); font-size:.92rem; margin-bottom:4px; color:var(--gold-light); }
.wheel-label span{ color:rgba(255,255,255,.72); }
.lbl-1{ top:-8%; left:-14%; text-align:right; }
.lbl-2{ top:-8%; right:-14%; }
.lbl-3{ bottom:-6%; right:-16%; }
.lbl-4{ bottom:-6%; left:-16%; text-align:right; }
.m360-close{ text-align:center; max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:10px; color:rgba(255,255,255,.85); font-size:.95rem; }
.m360-close span em{ color:var(--gold-light); font-style:normal; font-weight:600; }

/* ---------- parques ---------- */
.parques{ background:var(--paper); padding:120px 0 40px; }
.parques-head{ margin-bottom:20px; }
.parque{ display:grid; grid-template-columns:1fr 1fr; min-height:640px; }
.parque-img{ overflow:hidden; }
.parque-img img{ width:100%; height:100%; object-fit:cover; min-height:420px; transform:scale(1.08); }
.parque-copy{ display:flex; flex-direction:column; justify-content:center; padding:70px 64px; color:var(--white); }
.parque-tag{ display:flex; align-items:center; gap:10px; font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; opacity:.85; margin-bottom:16px; }
.parque-tag img{ width:20px; height:20px; }
.parque-aire .parque-tag img{ filter:brightness(0); }
.parque-copy h3{ font-family:var(--font-serif); font-size:clamp(1.6rem,2.6vw,2.3rem); margin-bottom:34px; }
.parque-cols{ display:grid; grid-template-columns:1fr; gap:18px; }
.parque-cols b{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; opacity:.9; }
.parque-cols p{ font-size:.88rem; line-height:1.6; opacity:.8; }

.parque-tierra .parque-copy{ background:var(--forest); }
.parque-aire .parque-copy{ background:linear-gradient(160deg,#a3771f,#c99a3d); color:var(--ink); }
.parque-aire .parque-cols p, .parque-aire .parque-cols b{ opacity:.85; }
.parque-agua .parque-copy{ background:var(--blue); }
.parque-fuego .parque-copy{ background:var(--red); }
.parque-aire{ direction:rtl; } .parque-aire .parque-copy, .parque-aire .parque-img{ direction:ltr; }
.parque-fuego{ direction:rtl; } .parque-fuego .parque-copy, .parque-fuego .parque-img{ direction:ltr; }

/* ---------- club de playa ---------- */
.playa{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.playa-bg{ position:absolute; inset:0; }
.playa-bg img{ width:100%; height:120%; object-fit:cover; }
.playa-veil{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,14,9,.82) 0%,rgba(6,14,9,.35) 45%,rgba(6,14,9,.1) 70%); }
.playa-content{ position:relative; z-index:2; max-width:560px; padding:0 60px; color:var(--white); }
.playa-loc{ font-size:.85rem; letter-spacing:.08em; color:var(--gold-light); margin-bottom:20px; }
.playa-content > p:last-child{ margin-top:20px; line-height:1.7; color:rgba(255,255,255,.85); }

/* ---------- modelos ---------- */
.modelos{ background:var(--cream); padding:130px 0; }
.modelos-sub{ max-width:640px; margin:0 auto 60px; color:#5c5646; line-height:1.7; }
.modelos-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; }
.mcard{ position:relative; overflow:hidden; aspect-ratio:2/3; }
.mcard img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.mcard:hover img{ transform:scale(1.1); }
.mcard-info{
  position:absolute; left:0; right:0; bottom:0; padding:20px 16px;
  background:linear-gradient(0deg,rgba(0,0,0,.8),transparent); color:var(--white);
}
.mcard-info h4{ font-family:var(--font-serif); font-size:1rem; }
.mcard-info span{ font-size:.72rem; opacity:.8; }

/* ---------- fases / timeline ---------- */
.fases{ background:var(--paper); padding:130px 0 150px; }
.timeline{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:80px; }
.tl-line{ position:absolute; top:9px; left:0; right:0; height:2px; background:rgba(22,50,31,.15); }
.tl-line-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--green),var(--gold)); }
.tl-item{ position:relative; padding-top:34px; text-align:center; }
.tl-dot{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:var(--paper); border:2px solid var(--green); }
.tl-item strong{ display:block; font-family:var(--font-serif); font-size:1.4rem; color:var(--forest); margin-bottom:6px; }
.tl-item b{ display:block; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.tl-item p{ font-size:.8rem; color:#5c5646; }

/* ---------- CTA ---------- */
.cta{ position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cta-bg{ position:absolute; inset:0; } .cta-bg img{ width:100%; height:120%; object-fit:cover; }
.cta-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,14,9,.55),rgba(6,14,9,.88)); }
.cta-content{ position:relative; z-index:2; text-align:center; max-width:560px; padding:0 30px; color:var(--white); }
.cta-icons{ display:flex; align-items:center; justify-content:center; gap:18px; opacity:.75; margin-bottom:18px; }
.cta-icons img{ width:22px; height:22px; }
.cta-mark{ font-family:var(--font-serif); letter-spacing:.5em; color:var(--gold-light); font-size:.75rem; margin-bottom:20px; }
.cta-content > p{ color:rgba(255,255,255,.8); margin:18px 0 34px; line-height:1.6; }
.cta-form{ display:flex; flex-direction:column; gap:14px; max-width:360px; margin:0 auto; }
.cta-form input{
  padding:14px 16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:var(--white);
  border-radius:2px; font-family:var(--font-sans); font-size:.9rem;
}
.cta-form input::placeholder{ color:rgba(255,255,255,.5); }
.cta-form input:focus{ outline:none; border-color:var(--gold-light); }

/* ---------- footer ---------- */
.footer{ background:var(--dark); color:rgba(255,255,255,.55); padding:26px 40px; display:flex; justify-content:space-between; align-items:center; font-size:.75rem; }
.footer-links a:hover{ color:var(--gold-light); }

/* ---------- whatsapp fab ---------- */
.whatsapp-fab{
  position:fixed; bottom:26px; right:26px; z-index:400; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3); transition:transform .3s var(--ease);
}
.whatsapp-fab svg{ width:28px; height:28px; }
.whatsapp-fab:hover{ transform:scale(1.1); }

/* ===================================================================
   responsive
   =================================================================== */
@media (max-width:1080px){
  .tesis-grid{ grid-template-columns:1fr; }
  .ubicacion{ grid-template-columns:1fr; }
  .ubi-img img{ min-height:340px; }
  .lote-wrap{ grid-template-columns:1fr; }
  .lote-cube{ order:-1; }
  .wheel-label{ position:static; max-width:none; text-align:center !important; margin-bottom:14px; }
  .wheel-wrap{ display:flex; flex-direction:column; align-items:center; }
  .parque{ grid-template-columns:1fr; }
  .parque-img{ min-height:320px; }
  .modelos-grid{ grid-template-columns:repeat(3,1fr); }
  .timeline{ grid-template-columns:1fr 1fr; }
  .tl-line{ display:none; }
}
@media (max-width:760px){
  .nav-links, .nav-cta, .nav-sep{ display:none; }
  .nav{ padding:9px 16px; gap:16px; }
  .burger{ display:block; }
  .serv-grid{ grid-template-columns:1fr 1fr; }
  .tesis-cards{ grid-template-columns:1fr; }
  .tcard.highlight{ grid-column:span 1; }
  .dist-list{ grid-template-columns:1fr; }
  .lote-amenities{ grid-template-columns:1fr; }
  .modelos-grid{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:1fr; }
  .parque-copy{ padding:50px 28px; }
  .hero-elements{ top:80px; left:20px; }
  .hero-cta{ bottom:10%; flex-direction:column; width:86%; }
  .hero-cta .btn{ width:100%; }
  .footer{ flex-direction:column; gap:10px; text-align:center; }
}

/* ===================================================================
   CUATRO ELEMENTOS — scrollytelling con notch animado
   =================================================================== */
.elementos-stage{ background:var(--paper); padding:120px 0 0; }
.es-head{ margin-bottom:12px; }

.es-stage{ position:relative; height:400vh; }
.es-pin{
  position:sticky; top:0; height:100vh; z-index:1;
  background:var(--paper);
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
  max-width:var(--container); margin:0 auto; padding:0 32px;
}

.es-list{ display:flex; flex-direction:column; gap:24px; max-height:85vh; overflow-y:auto; padding-right:8px; --muted:#9c8d72; }
.es-item{
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .4s ease;
  border-left:2px solid transparent; padding-left:18px;
}
.es-item.visible{ opacity:.55; max-height:400px; }
.es-item.active{ opacity:1; border-left:2px solid var(--green); }
.es-num{ font-size:12px; color:var(--muted); letter-spacing:.1em; }
.es-item h3{ font-family:var(--font-serif); font-weight:500; font-size:22px; margin:6px 0 8px; color:var(--forest); }
.es-item p{ font-size:15px; line-height:1.55; max-width:440px; }
.es-item p .ec{ color:#d9cdb3; transition:color .05s linear; }
.es-item p .ec.lit{ color:var(--ink); }
.es-item.done p .ec{ color:var(--ink); }

.media-frame{ position:relative; overflow:hidden; background:#000; width:100%; height:70vh; }
.media-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease;
}
.media-frame img.active{ opacity:1; }

.media-notch{
  position:absolute; left:0; top:0; width:40px; height:100%;
  background:var(--paper); z-index:4; pointer-events:none;
}

@media (max-width:1080px){
  .es-pin{ grid-template-columns:1fr; height:auto; position:relative; top:auto; padding:60px 24px; }
  .es-stage{ height:auto; }
  .media-frame{ order:-1; margin-bottom:20px; border-radius:12px; }
  .media-notch{ display:none; }
}

/* elementos-3 es continuación de elementos-2: sin título propio, sin padding superior.
   margin-top negativo solapa el inicio de esta sección con el "release" del sticky
   anterior (dura 1 viewport) para que no se vea hueco en blanco entre ambas; el
   z-index creciente asegura que el pin de la sección de abajo tape al de arriba. */
#elementos-3.elementos-stage{ padding:0 0 0; margin-top:-100vh; }
#elementos-2 .es-pin{ z-index:2; }
#elementos-3 .es-pin{ z-index:3; }

/* ===================================================================
   CUATRO ELEMENTOS (copia) — invertido: imagen izquierda, texto derecha
   Bloque clonado e independiente del original (#elementos) para poder
   editar cada instancia por separado.
   =================================================================== */
#elementos-2.elementos-stage{ background:var(--paper); padding:0px 0 0; }
#elementos-2 .es-head{ margin-bottom:12px; }

#elementos-2 .es-stage{ position:relative; height:400vh; }
#elementos-2 .es-pin{
  position:sticky; top:0; height:100vh;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
  max-width:var(--container); margin:0 auto; padding:0 32px;
}

#elementos-2 .es-list{ order:2; display:flex; flex-direction:column; gap:24px; max-height:85vh; overflow-y:auto; padding-right:8px; --muted:#9c8d72; }
#elementos-2 .es-item{
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .4s ease;
  border-left:2px solid transparent; padding-left:18px;
}
#elementos-2 .es-item.visible{ opacity:.55; max-height:400px; }
#elementos-2 .es-item.active{ opacity:1; border-left:2px solid var(--green); }
#elementos-2 .es-num{ font-size:12px; color:var(--muted); letter-spacing:.1em; }
#elementos-2 .es-item h3{ font-family:var(--font-serif); font-weight:500; font-size:22px; margin:6px 0 8px; color:var(--forest); }
#elementos-2 .es-item p{ font-size:15px; line-height:1.55; max-width:440px; }
#elementos-2 .es-item p .ec{ color:#d9cdb3; transition:color .05s linear; }
#elementos-2 .es-item p .ec.lit{ color:var(--ink); }
#elementos-2 .es-item.done p .ec{ color:var(--ink); }

#elementos-2 .media-frame{ order:1; position:relative; overflow:hidden; background:#000; width:100%; height:70vh; }
#elementos-2 .media-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease;
}
#elementos-2 .media-frame img.active{ opacity:1; }

/* notch pegado al borde derecho del frame (junto al texto) y espejado */
#elementos-2 .media-notch{
  position:absolute; left:auto; right:0; top:0; width:40px; height:100%;
  background:var(--paper); z-index:4; pointer-events:none;
  transform:scaleX(-1);
}

@media (max-width:1080px){
  #elementos-2 .es-pin{ grid-template-columns:1fr; height:auto; position:relative; top:auto; padding:60px 24px; }
  #elementos-2 .es-stage{ height:auto; }
  #elementos-2 .es-list{ order:2; }
  #elementos-2 .media-frame{ order:1; margin-bottom:20px; border-radius:12px; }
  #elementos-2 .media-notch{ display:none; }
}

/* ===================================================================
   CUATRO ELEMENTOS (copia 2) — invertido: imagen izquierda, texto derecha
   Mismo bloque que #elementos-2, clonado e independiente para #elementos-4.
   =================================================================== */
#elementos-4.elementos-stage{ background:var(--paper); padding:0px 0 0; margin-top:-100vh; }
#elementos-4 .es-head{ margin-bottom:12px; }

#elementos-4 .es-stage{ position:relative; height:400vh; }
#elementos-4 .es-pin{
  position:sticky; top:0; height:100vh; z-index:4;
  background:var(--paper);
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
  max-width:var(--container); margin:0 auto; padding:0 32px;
}

#elementos-4 .es-list{ order:2; display:flex; flex-direction:column; gap:24px; max-height:85vh; overflow-y:auto; padding-right:8px; --muted:#9c8d72; }
#elementos-4 .es-item{
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .4s ease;
  border-left:2px solid transparent; padding-left:18px;
}
#elementos-4 .es-item.visible{ opacity:.55; max-height:400px; }
#elementos-4 .es-item.active{ opacity:1; border-left:2px solid var(--green); }
#elementos-4 .es-num{ font-size:12px; color:var(--muted); letter-spacing:.1em; }
#elementos-4 .es-item h3{ font-family:var(--font-serif); font-weight:500; font-size:22px; margin:6px 0 8px; color:var(--forest); }
#elementos-4 .es-item p{ font-size:15px; line-height:1.55; max-width:440px; }
#elementos-4 .es-item p .ec{ color:#d9cdb3; transition:color .05s linear; }
#elementos-4 .es-item p .ec.lit{ color:var(--ink); }
#elementos-4 .es-item.done p .ec{ color:var(--ink); }

#elementos-4 .media-frame{ order:1; position:relative; overflow:hidden; background:#000; width:100%; height:70vh; }
#elementos-4 .media-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease;
}
#elementos-4 .media-frame img.active{ opacity:1; }

/* notch pegado al borde derecho del frame (junto al texto) y espejado */
#elementos-4 .media-notch{
  position:absolute; left:auto; right:0; top:0; width:40px; height:100%;
  background:var(--paper); z-index:4; pointer-events:none;
  transform:scaleX(-1);
}

@media (max-width:1080px){
  #elementos-4 .es-pin{ grid-template-columns:1fr; height:auto; position:relative; top:auto; padding:60px 24px; }
  #elementos-4 .es-stage{ height:auto; }
  #elementos-4 .es-list{ order:2; }
  #elementos-4 .media-frame{ order:1; margin-bottom:20px; border-radius:12px; }
  #elementos-4 .media-notch{ display:none; }
}

/* ===================================================================
   DEMO — Carrusel acordeón (placeholder, contenido genérico)
   =================================================================== */
.demo-carousel{ background:var(--paper); padding:120px 0; }
.dc-wrap{ max-width:var(--container); margin:40px auto 0; padding:0 32px; }
.dc-controls{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.dc-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.dc-tab{
  background:transparent; border:1px solid var(--cream-2); color:var(--ink);
  padding:8px 16px; border-radius:20px; font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; font-family:var(--font-sans);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.dc-tab:hover{ border-color:var(--forest); }
.dc-tab.active{ background:var(--forest); color:#fff; border-color:var(--forest); }
.dc-arrows{ display:flex; gap:8px; }
.dc-arrow{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--cream-2);
  background:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; color:var(--ink);
}
.dc-arrow:hover{ background:var(--cream); }

.dc-row{ display:flex; gap:16px; height:460px; }
.dc-card{
  position:relative; overflow:hidden; border-radius:14px;
  flex:0 0 240px; cursor:pointer;
  transition:flex .55s cubic-bezier(.16,.84,.24,1);
}
.dc-card.active{ flex:1 1 auto; }
.dc-card[data-key="a"]{ background:var(--green); }
.dc-card[data-key="b"]{ background:var(--cream-2); }
.dc-card[data-key="c"]{ background:var(--forest); }
.dc-card[data-key="d"]{ background:var(--gold); }

.dc-img{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.dc-card.active .dc-img{ opacity:1; }
.dc-card[data-key="a"] .dc-img{ background:linear-gradient(135deg,#3c5a34,#16321f); }
.dc-card[data-key="b"] .dc-img{ background:linear-gradient(135deg,#8a7c5c,#4a4028); }
.dc-card[data-key="c"] .dc-img{ background:linear-gradient(135deg,#1e4028,#0d1b12); }
.dc-card[data-key="d"] .dc-img{ background:linear-gradient(135deg,#c99a3d,#7a5a1f); }
.dc-card.active::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
}

.dc-content{ position:absolute; inset:0; padding:28px; display:flex; flex-direction:column; z-index:2; color:#fff; }
.dc-card[data-key="b"] .dc-content{ color:var(--ink); }
.dc-tag{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin-bottom:14px; }
.dc-title{ font-family:var(--font-serif); font-size:19px; font-weight:500; line-height:1.3; max-width:230px; }
.dc-card.active .dc-title{ color:#fff; font-size:26px; max-width:420px; }
.dc-desc{ font-size:14px; line-height:1.6; max-width:440px; margin-top:16px; opacity:0; color:#f1ede1; transition:opacity .3s ease .15s; }
.dc-card.active .dc-desc{ opacity:1; }
.dc-more{
  margin-top:auto; align-self:flex-start; font-family:var(--font-sans);
  background:#fff; color:var(--ink); border:none; border-radius:8px;
  padding:10px 20px; font-size:11px; font-weight:700; letter-spacing:.08em;
  opacity:0; transition:opacity .3s ease .2s; cursor:pointer;
}
.dc-card.active .dc-more{ opacity:1; }

@media (max-width:900px){
  .dc-row{ flex-direction:column; height:auto; }
  .dc-card{ flex-basis:auto !important; height:120px; }
  .dc-card.active{ height:460px; }
  .dc-controls{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* ===================================================================
   DEMO — Calculadora (placeholder, sin fórmula real)
   =================================================================== */
.demo-calc{ background:var(--cream); padding:120px 0; }
.dcalc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.dcalc-form{ padding-top:6px; }
.dcalc-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 32px; margin:28px 0 32px; }
.dcalc-field label{ display:block; font-size:14px; margin-bottom:10px; font-family:var(--font-sans); }
.dcalc-field input{
  width:100%; border:none; border-bottom:1px solid var(--cream-2);
  padding:4px 0 10px; font-size:15px; color:var(--ink);
  background:transparent; outline:none; font-family:var(--font-sans);
}
.dcalc-slider-field > label{ display:block; font-size:14px; margin-bottom:16px; }
.dcalc-range{
  -webkit-appearance:none; appearance:none; width:100%; height:2px; border-radius:2px; outline:none;
  background:linear-gradient(to right, var(--forest) 0%, var(--forest) var(--val,50%), var(--cream-2) var(--val,50%), var(--cream-2) 100%);
}
.dcalc-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle, var(--forest) 0 4px, #fff 4px 100%);
  border:2px solid var(--forest); cursor:pointer;
}
.dcalc-range-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:12px; color:#9c8d72; }
.dcalc-range-labels .mid{ color:var(--ink); font-weight:700; }

.dcalc-result{ position:relative; overflow:hidden; border-radius:24px; background:linear-gradient(160deg, var(--forest-2) 0%, var(--dark) 70%); color:#fff; padding:44px 44px 0; }
.dcalc-top-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:160px; height:24px; background:var(--cream);
  clip-path:polygon(0 0, 100% 0, 87% 100%, 13% 100%);
}
.dcalc-left-notch{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:24px; height:160px; background:var(--cream);
  clip-path:polygon(0 0, 0 100%, 100% 87%, 100% 13%);
}
.dcalc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-bottom:28px; position:relative; z-index:2; }
.dcalc-head h3{ font-family:var(--font-serif); font-size:26px; font-weight:500; line-height:1.3; }
.dcalc-head h3 span{ display:block; color:var(--green-light); font-weight:400; font-size:.75em; }
.dcalc-amount-block{ text-align:right; }
.dcalc-amount{ font-size:34px; font-weight:600; white-space:nowrap; }
.dcalc-est{ margin-top:6px; font-size:13px; color:var(--green-light); }
.dcalc-est b{ color:#fff; }
.dcalc-breakdown{ border-top:1px solid rgba(255,255,255,.14); padding:26px 0; position:relative; z-index:2; }
.dcalc-breakdown-title{ font-size:13px; color:var(--green-light); margin-bottom:16px; }
.dcalc-row{ display:flex; justify-content:space-between; gap:20px; padding:9px 0; font-size:15px; }
.dcalc-cta{ background:rgba(0,0,0,.18); border-radius:16px; padding:26px 28px; display:flex; flex-direction:column; gap:22px; position:relative; z-index:2; margin-bottom:0; }
.dcalc-cta-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:32px; }
.dcalc-cta-top h4{ font-family:var(--font-serif); font-size:19px; font-weight:500; white-space:nowrap; }
.dcalc-cta-top p{ font-size:13px; line-height:1.5; color:var(--green-light); max-width:340px; }
.dcalc-cta-bottom{ display:flex; align-items:flex-end; gap:24px; }
.dcalc-cta-field{ flex:1; }
.dcalc-cta-field label{ display:block; font-size:12px; color:var(--green-light); margin-bottom:8px; }
.dcalc-cta-field input{
  width:100%; background:transparent; border:none; outline:none;
  border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:10px; color:#fff; font-size:14px;
}
.dcalc-cta-bottom button{
  background:var(--green-light); color:var(--dark); border:none; border-radius:8px;
  padding:14px 28px; font-size:12px; font-weight:700; letter-spacing:.04em; cursor:pointer; white-space:nowrap;
}

@media (max-width:900px){
  .dcalc-wrap{ grid-template-columns:1fr; }
  .dcalc-field-grid{ grid-template-columns:1fr; }
  .dcalc-top-notch, .dcalc-left-notch{ display:none; }
}

/* ===================================================================
   DEMO — FAQs (placeholder, contenido genérico)
   =================================================================== */
.demo-faqs{ background:var(--paper); padding:120px 0; }
.dfaq-grid{ display:grid; grid-template-columns:0.85fr 1.6fr; gap:60px; align-items:start; }
.dfaq-left p:last-child{ color:#5a5142; font-size:16px; line-height:1.6; max-width:320px; margin-top:10px; }
.dfaq-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.dfaq-tab{
  background:transparent; border:1px solid var(--cream-2); color:#9c8d72;
  padding:8px 16px; border-radius:8px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; cursor:pointer; font-family:var(--font-sans);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.dfaq-tab:hover{ border-color:var(--forest); color:var(--ink); }
.dfaq-tab.active{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

.dfaq-panel{ display:none; }
.dfaq-panel.active{ display:block; }
.dfaq-item{ border-bottom:1px solid var(--cream-2); transition:border-color .3s ease; }
.dfaq-item:hover{ border-color:var(--green); }
.dfaq-question{
  width:100%; background:none; border:none; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:28px;
  padding:26px 4px; font-family:var(--font-serif); font-size:24px; font-weight:500;
  color:var(--forest); cursor:pointer;
}
.dfaq-icon{ flex:none; width:20px; height:20px; position:relative; }
.dfaq-icon::before,.dfaq-icon::after{
  content:''; position:absolute; top:50%; left:50%;
  background:#9c8d72; transform:translate(-50%,-50%);
  transition:transform .3s ease, opacity .3s ease, background .3s ease;
}
.dfaq-icon::before{ width:16px; height:1.5px; }
.dfaq-icon::after{ width:1.5px; height:16px; }
.dfaq-item.open .dfaq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.dfaq-item.open .dfaq-icon::before{ background:var(--ink); }
.dfaq-answer{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.dfaq-item.open .dfaq-answer{ grid-template-rows:1fr; }
.dfaq-answer-inner{ overflow:hidden; }
.dfaq-answer p{ padding:0 4px 22px; font-size:14px; line-height:1.65; color:#5a5142; max-width:640px; }

@media (max-width:900px){
  .dfaq-grid{ grid-template-columns:1fr; }
}