/* ==========================================================================
   Ikonic Tower - front page
   --------------------------------------------------------------------------
   Palette is drawn from the building's own renders: travertine sand, Gulf
   turquoise, and the warm interior light of the night elevation.
   The organising metaphor: a lit window is a residence still for sale.
   ========================================================================== */

:root{
  /* ink */
  --ink:#04070a;
  --ink-2:#070c11;
  --surf:#0b1218;
  --surf-2:#101a21;
  --surf-3:#16232c;
  --line:#1d2b34;
  --line-soft:#141e25;

  /* brand */
  --sand:#dcb98d;
  --sand-lo:#a98a62;
  --sand-hi:#f0dcc0;
  --sea:#46bccd;
  --sea-lo:#2a7e8c;
  --sea-deep:#0e343e;
  --gold:#e3a94e;
  --coral:#e2726a;

  /* text */
  --shell:#f4efe8;
  --shell-2:#b9c6cd;
  --muted:#7c8b95;
  --faint:#54646e;

  /* type */
  --serif:"Instrument Serif","Bodoni MT",Didot,"Didot LT STD","Hoefler Text",
          "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Inter","Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",
          Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono","SF Mono",Menlo,
          Consolas,monospace;

  /* system */
  --r-xs:3px; --r-sm:6px; --r-md:11px; --r-lg:18px; --r-xl:28px;
  --ease:cubic-bezier(.22,.68,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --max:1240px;
  --pad:clamp(20px,4vw,44px);
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--shell);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--sand);color:var(--ink)}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sand);
      color:var(--ink);padding:12px 20px;font-weight:600}
.skip:focus{left:12px;top:12px}

:where(a,button,select,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--sea);outline-offset:3px;border-radius:var(--r-xs);
}

/* film grain, sits above everything, never intercepts the pointer */
body::after{
  content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- type primitives */
.eyebrow{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--sand);font-weight:500;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:64px;
  background:linear-gradient(90deg,var(--sand-lo),transparent)}
.eyebrow.c::after{display:none}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;
  line-height:1.08;text-wrap:balance}
h2{font-size:clamp(31px,4.6vw,54px);line-height:1.1}
h3{font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.lede{color:var(--shell-2);font-size:clamp(16px,1.35vw,18.5px);max-width:60ch;
  text-wrap:pretty}

.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* section shell */
/* ── VERTICAL RHYTHM ─────────────────────────────────────────────────────────
   ONE token owns the gap between every section, so the gaps cannot drift apart
   again. --sec-y is HALF the gap: each section contributes its own half at the
   boundary, so section-to-section is always exactly one --sec-gap.

   Measured before this change, at 1280px, the gaps down the front page were
   141, 213, 213, 141, 141, 282, 282, 282, 282. Four different values. The 282s
   came from two full-padded sections meeting; the 141s from the inline
   `style="padding-top:0"` that three sections carried; the 213s from .rail
   using its own smaller value. Every one of those is now one number.

   The 30% reduction is against the old standard gap: 2 x clamp(80,11vw,150)
   = clamp(160,22vw,300). Times 0.7 gives clamp(112,15.4vw,210), so --sec-y is
   half of that. At 1280px the gap goes 282px -> 197px.

   DO NOT reintroduce `style="padding-top:0"` on a section to tighten one
   boundary. That is what produced three of the four values above. Change the
   token, or nothing. */
:root{
  --sec-gap:clamp(112px,15.4vw,210px);
  --sec-y:calc(var(--sec-gap) / 2);
}
.sec{position:relative;padding:var(--sec-y) 0}
.sec-head{max-width:680px;margin-bottom:clamp(38px,5vw,64px)}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head .lede{margin-top:20px}

/* Reveal. The hiding half is scoped to .js, which an inline script in the head
   sets. With scripting off nothing is ever hidden, so the page still reads. */
.js .rv{opacity:0;transform:translateY(26px);
    transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* ------------------------------------------------------------- buttons -- */
.btn{
  --bg:transparent;--fg:var(--shell);--bd:var(--line);
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:13.5px;font-weight:500;letter-spacing:.02em;border-radius:var(--r-sm);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .45s var(--ease),border-color .45s var(--ease),
             transform .35s var(--ease),box-shadow .45s var(--ease);
}
/* the fill sweeps up from the bottom edge on hover */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--sand);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover,.btn:focus-visible{color:var(--ink);border-color:var(--sand);
  transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(220,185,141,.75)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

.btn-fill{--bg:var(--sand);--fg:var(--ink);--bd:var(--sand)}
.btn-fill::before{background:var(--sand-hi)}
.btn-fill:hover,.btn-fill:focus-visible{color:var(--ink)}

.btn-sea{--bd:var(--sea-lo)}
.btn-sea::before{background:var(--sea)}
.btn-sea:hover,.btn-sea:focus-visible{border-color:var(--sea);
  box-shadow:0 14px 34px -18px rgba(70,188,205,.8)}

/* a text link that draws its own rule */
.lnk{position:relative;color:var(--sand);font-size:13.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:8px;padding-bottom:3px}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease)}
.lnk:hover::after,.lnk:focus-visible::after{transform:scaleX(1);transform-origin:left}
.lnk .ar{transition:transform .4s var(--ease)}
.lnk:hover .ar{transform:translateX(4px)}

/* ================================================================== nav == */
.nav{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease),
             backdrop-filter .5s var(--ease),padding .5s var(--ease)}
.nav-in{max-width:var(--max);margin-inline:auto;padding:20px var(--pad);
  display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nav.solid{background:rgba(4,7,10,.78);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line-soft)}
.nav.solid .nav-in{padding-block:13px}

.mark{display:flex;flex-direction:column;line-height:1;flex:none}
.mark b{font-family:var(--serif);font-size:20px;letter-spacing:.2em;color:var(--sand);
  font-weight:400;transition:color .4s var(--ease),letter-spacing .5s var(--ease)}
.mark small{font-family:var(--mono);font-size:8px;letter-spacing:.34em;color:var(--faint);
  margin-top:5px;transition:color .4s var(--ease)}
.mark:hover b{color:var(--sand-hi);letter-spacing:.24em}
.mark:hover small{color:var(--muted)}

.nav-links{display:flex;gap:clamp(14px,1.9vw,28px);margin-left:auto;list-style:none}
.nav-links a{position:relative;font-size:13px;color:var(--shell-2);letter-spacing:.015em;
  padding-block:6px;transition:color .35s var(--ease);white-space:nowrap}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--sand);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.nav-links a:hover{color:var(--sand)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}

.lang{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;flex:none}
/* Real links now, one page per locale, so the switch works without scripting. */
.lang a{display:block;background:none;border:0;font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:.1em;color:var(--muted);padding:6px 11px;
  cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.lang a:hover{color:var(--sand);background:rgba(220,185,141,.08)}
.lang a[aria-current="page"]{background:var(--sand);color:var(--ink)}

.nav-cta{flex:none;padding:10px 18px;font-size:12.5px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);
  width:42px;height:38px;cursor:pointer;position:relative;flex:none;
  transition:border-color .35s var(--ease)}
.burger:hover{border-color:var(--sand)}
.burger i{position:absolute;left:11px;right:11px;height:1px;background:var(--shell);
  transition:transform .45s var(--ease),opacity .3s var(--ease)}
.burger i:nth-child(1){top:14px}
.burger i:nth-child(2){top:19px}
.burger i:nth-child(3){top:24px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:99;background:rgba(4,7,10,.97);
  backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:center;
  gap:6px;padding:0 var(--pad);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s}
.drawer.open{opacity:1;visibility:visible}
.drawer a{font-family:var(--serif);font-size:clamp(27px,7vw,42px);color:var(--shell);
  padding:9px 0;border-bottom:1px solid var(--line-soft);
  transition:color .35s var(--ease),padding-left .45s var(--ease)}
.drawer a:hover{color:var(--sand);padding-left:14px}

@media (max-width:1080px){
  .nav-links,.nav-cta{display:none}
  .burger{display:block;margin-left:auto}
  .lang{margin-left:0}
}

/* ================================================================= hero == */
/* The hero grows past 100svh when the copy needs it. Clipping lives on the
   background layer, not here, so a short or landscape screen never crops the
   headline. */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:132px 0 0}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:clip}
/* The render is a bright interior. Graded down hard so the warm windows read as
   embers against near black and the display serif carries the frame. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;
  filter:brightness(.44) contrast(1.14) saturate(.88);
  transform:scale(1.09);animation:drift 34s var(--ease) infinite alternate}
@keyframes drift{
  from{transform:scale(1.09) translate3d(0,0,0)}
  to{transform:scale(1.17) translate3d(-2.2%,-1.4%,0)}
}
/* three stacked veils: colour grade, vertical falloff, corner vignette */
.hero-bg::before{content:"";position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(3,6,8,.92) 0%,rgba(3,6,8,.72) 34%,
                    rgba(4,7,10,.1) 66%,rgba(6,12,17,.42) 100%),
    linear-gradient(180deg,rgba(4,7,10,.82) 0%,transparent 22%,
                    transparent 46%,rgba(4,7,10,.96) 100%)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(124% 90% at 48% 42%,transparent 26%,rgba(3,6,8,.78) 100%)}

.hero-in{position:relative;z-index:3;width:100%;padding-bottom:clamp(30px,5vw,58px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,70px);
  align-items:end}
.hero-copy{max-width:790px}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-size:clamp(46px,8.2vw,104px);line-height:.98;letter-spacing:-.028em;
  margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--sand)}
/* each line rises on load */
.rise{display:block;overflow:hidden}
.rise > span{display:block;transition:transform 1.15s var(--ease-out)}
.js .rise > span{transform:translateY(105%)}
.loaded .rise > span{transform:none}
.loaded .rise:nth-child(2) > span{transition-delay:.11s}
.loaded .rise:nth-child(3) > span{transition-delay:.22s}

.hero .lede{margin-bottom:36px;max-width:50ch;font-size:clamp(16px,1.5vw,19px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* live availability card, right of the headline */
.pulse{position:relative;min-width:246px;padding:24px 26px 22px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(158deg,rgba(16,26,33,.86),rgba(4,7,10,.72));
  backdrop-filter:blur(16px);overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease),
             box-shadow .5s var(--ease)}
.pulse::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--sea),transparent);
  transform:translateX(-100%);transition:transform 1.1s var(--ease)}
.pulse:hover{border-color:var(--sea-lo);transform:translateY(-4px);
  box-shadow:0 26px 60px -34px rgba(70,188,205,.6)}
.pulse:hover::before{transform:translateX(100%)}
.pulse-top{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--sea);flex:none;
  box-shadow:0 0 0 0 rgba(70,188,205,.65);animation:ping 2.6s var(--ease) infinite}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(70,188,205,.55)}
  70%{box-shadow:0 0 0 11px rgba(70,188,205,0)}
  100%{box-shadow:0 0 0 0 rgba(70,188,205,0)}
}
.pulse-top span{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.pulse b{display:block;font-family:var(--mono);font-size:clamp(40px,4.6vw,54px);
  font-weight:400;line-height:1;color:var(--shell);letter-spacing:-.04em}
.pulse b i{font-style:normal;font-size:.42em;color:var(--muted);margin-left:6px;
  letter-spacing:0}
.pulse p{margin-top:11px;font-size:12.5px;color:var(--shell-2);line-height:1.5}
.pulse .bar{margin-top:16px;height:3px;border-radius:2px;background:var(--surf-3);
  overflow:hidden}
.pulse .bar i{display:block;height:100%;width:44.9%;border-radius:2px;
  background:linear-gradient(90deg,var(--sea-lo),var(--sea));
  transition:width 1.7s var(--ease-out) .35s}
.js .pulse .bar i{width:0}
.js .pulse.in .bar i{width:44.9%}
.pulse .bar-cap{display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint)}

.scroll-cue{position:absolute;bottom:26px;left:50%;translate:-50% 0;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);background:none;border:0;cursor:pointer;
  transition:color .4s var(--ease)}
.scroll-cue:hover{color:var(--sand)}
.scroll-cue i{width:1px;height:40px;overflow:hidden;position:relative;
  background:var(--line)}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--sand);
  animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:900px),(max-height:820px){.scroll-cue{display:none}}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr}
  .pulse{width:100%;max-width:340px}
}

/* ================================================================ ticker = */
/* The ticker sits flush against the bottom of the hero on purpose: it is a band
   riding the hero edge, not a row of its own. Below it, it owes the same half
   gap every other row contributes, or the first content section would sit
   closer than all the rest. */
.ticker{border-block:1px solid var(--line-soft);background:var(--ink-2);
  overflow:hidden;position:relative;margin-bottom:var(--sec-y)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:110px;
  z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink-2),transparent)}
.ticker-track{display:flex;width:max-content;animation:march 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes march{to{transform:translateX(-50%)}}
.ticker-track span{display:flex;align-items:center;gap:16px;padding:14px 24px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.ticker-track span::after{content:"";width:3px;height:3px;border-radius:50%;
  background:var(--sand-lo)}
.ticker-track b{color:var(--sand);font-weight:500}

/* ================================================================ tower == */
.tower{background:var(--ink-2);position:relative;overflow:clip}
.tower::before{content:"";position:absolute;inset:0;z-index:0;opacity:.2;
  background:url("../img/tower/fachada.jpg") center 26%/cover no-repeat;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent)}
.tower::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(96% 62% at 50% 40%,rgba(220,185,141,.055),transparent 68%)}
.tower > *{position:relative;z-index:2}

/* Both columns stretch to the taller of the two and each distributes its own
   slack, so the elevation and the detail-plus-plan column start and finish on
   the same lines whichever one happens to be taller at a given width. */
.tower-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.6vw,68px);align-items:stretch}

/* the elevation: 12 rows of cells, a lit cell is a residence still for sale */
.elev{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(178deg,rgba(11,18,24,.94),rgba(4,7,10,.97));
  position:relative;display:flex;flex-direction:column}
/* cursor-tracked spotlight, positions come from JS custom properties */
.elev::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(220,185,141,.13),transparent 68%)}
.elev:hover::before{opacity:1}

.elev-head{display:flex;align-items:baseline;gap:14px;padding:18px 22px;
  border-bottom:1px solid var(--line-soft);position:relative;z-index:1}
.elev-head h3{font-size:17px}
.elev-head span{margin-left:auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* The twelve floors take whatever height is left and share it evenly, which is
   what opens the gaps between the rows. */
.floors{padding:14px 12px 18px;position:relative;z-index:1;
  flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.floor{display:grid;grid-template-columns:46px minmax(0,1fr) 62px;align-items:center;
  gap:12px;padding:3px 10px;border-radius:var(--r-sm);position:relative;
  transition:background .4s var(--ease)}
.floor:hover{background:rgba(220,185,141,.05)}
/* a hairline sweeps across the floor on hover */
.floor::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--sand-lo),transparent);
  transform:scaleX(0);transition:transform .6s var(--ease)}
.floor:hover::after{transform:scaleX(1)}

.floor-n{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em;
  transition:color .35s var(--ease)}
.floor:hover .floor-n{color:var(--sand)}
.floor-n b{font-weight:500;font-size:13px;color:var(--muted);
  transition:color .35s var(--ease)}
.floor:hover .floor-n b{color:var(--sand-hi)}

.cells{display:flex;gap:5px;justify-content:center}
.cells.ph{justify-content:center;gap:8px}

/* one cell = one residence */
.cell{position:relative;flex:1 1 0;min-width:0;height:26px;border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--surf);cursor:pointer;padding:0;
  transition:background .4s var(--ease),border-color .4s var(--ease),
             transform .35s var(--ease),box-shadow .45s var(--ease)}
.cell::before{content:"";position:absolute;inset:3px;border-radius:1px;
  background:rgba(255,255,255,.02);transition:background .4s var(--ease)}
.cells.ph .cell{max-width:76px;height:32px}

/* sold: a dark window */
.cell[data-s="vendido"]{background:#0a1015;border-color:#182229;cursor:default}
.cell[data-s="vendido"]::before{background:rgba(255,255,255,.012)}

/* reserved: outlined, waiting */
.cell[data-s="reservado"]{border-color:rgba(227,169,78,.5);
  background:rgba(227,169,78,.07)}
.cell[data-s="reservado"]::before{background:rgba(227,169,78,.1)}

/* available: a lit window */
.cell[data-s="disponible"]{border-color:rgba(220,185,141,.42);
  background:linear-gradient(180deg,rgba(220,185,141,.2),rgba(220,185,141,.09));
  box-shadow:0 0 15px -6px rgba(220,185,141,.5)}
.cell[data-s="disponible"]::before{background:rgba(240,220,192,.14)}
.cell[data-s="disponible"]:hover,.cell[data-s="disponible"]:focus-visible{
  border-color:var(--sand-hi);transform:translateY(-3px) scale(1.06);
  background:linear-gradient(180deg,var(--sand),rgba(220,185,141,.5));
  box-shadow:0 0 30px -4px rgba(220,185,141,.85),0 10px 22px -12px rgba(0,0,0,.9);
  z-index:3}
.cell[data-s="reservado"]:hover{border-color:var(--gold);transform:translateY(-2px)}
.cell[aria-pressed="true"]{outline:1px solid var(--sand-hi);outline-offset:2px}

/* the penthouse levels get their own weight */
.floor.crown{padding-block:6px}
.floor.crown .floor-n b{color:var(--sand)}

.floor-cap{font-family:var(--mono);font-size:10px;color:var(--faint);text-align:right;
  letter-spacing:.04em;transition:color .35s var(--ease)}
.floor:hover .floor-cap{color:var(--shell-2)}
.floor-cap.none{color:#33424b}

.elev-key{display:flex;flex-wrap:wrap;gap:16px;padding:14px 22px 18px;
  border-top:1px solid var(--line-soft);position:relative;z-index:1}
.elev-key span{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.elev-key i{width:14px;height:9px;border-radius:2px;border:1px solid var(--line);
  background:var(--surf)}
.elev-key i.a{border-color:rgba(220,185,141,.5);
  background:linear-gradient(180deg,rgba(220,185,141,.35),rgba(220,185,141,.12));
  box-shadow:0 0 10px -3px rgba(220,185,141,.7)}
.elev-key i.r{border-color:rgba(227,169,78,.55);background:rgba(227,169,78,.12)}
.elev-key i.v{background:#0a1015;border-color:#182229}

/* the detail panel */
/* The detail card and the floor plan travel together as one column. Slack goes
   between them, so the plan's bottom edge lands on the elevation's. */
.tower-side{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.detail{border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,var(--surf),rgba(4,7,10,.9));overflow:hidden;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.detail:hover{border-color:var(--line);box-shadow:0 30px 70px -46px rgba(0,0,0,.95)}
.detail-hd{padding:24px 26px 20px;border-bottom:1px solid var(--line-soft);
  display:flex;align-items:flex-start;gap:16px}
.detail-hd .u{font-family:var(--serif);font-size:clamp(38px,4.2vw,52px);line-height:.9;
  color:var(--shell)}
.detail-hd .meta{margin-left:auto;text-align:right}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;
  border-radius:100px;border:1px solid var(--line);color:var(--muted)}
.tag.a{color:var(--sand);border-color:rgba(220,185,141,.4);
  background:rgba(220,185,141,.07)}
.tag.r{color:var(--gold);border-color:rgba(227,169,78,.4);background:rgba(227,169,78,.07)}
.tag.v{color:var(--faint)}
.detail-hd .lvl{display:block;margin-top:9px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
.spec{background:var(--surf);padding:18px 14px;text-align:center;
  transition:background .4s var(--ease)}
.spec:hover{background:var(--surf-2)}
.spec b{display:block;font-family:var(--mono);font-size:20px;font-weight:400;
  color:var(--shell);letter-spacing:-.03em;line-height:1}
.spec b sub{font-size:.55em;color:var(--muted);vertical-align:baseline;margin-left:2px}
.spec span{display:block;margin-top:8px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

.price{padding:24px 26px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft)}
.price .p{font-family:var(--mono);font-size:clamp(24px,2.7vw,32px);color:var(--sand);
  letter-spacing:-.03em;line-height:1}
.price .c{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);
  padding-bottom:3px}
.price .n{width:100%;font-size:12.5px;color:var(--muted);line-height:1.5}
.detail-cta{display:flex;gap:10px;padding:0 26px 26px;flex-wrap:wrap}
.detail-cta .btn{flex:1 1 auto;justify-content:center;padding-block:13px;font-size:13px}

/* ------------------------------------------------- floor plan, under detail */
/* The plate is a light architectural render. Against the dark column it reads
   as a lit drafting table, which is the point. It is the plan of the whole
   level, not of the single unit, and the caption says so. */
.plan{border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surf);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
.plan:hover{border-color:rgba(220,185,141,.42);
  box-shadow:0 30px 68px -44px rgba(0,0,0,.95)}

.plan-media{position:relative;overflow:hidden;aspect-ratio:1000/564;
  background:#080d11;cursor:zoom-in}
.plan-media img{width:100%;height:100%;object-fit:contain;
  filter:brightness(.86) contrast(1.03) saturate(.94);
  transform-origin:var(--px,50%) var(--py,50%);
  transition:transform .5s var(--ease),filter .55s var(--ease),opacity .3s var(--ease)}
/* cursor-tracked magnification, origin follows the pointer */
@media (hover:hover) and (pointer:fine){
  .plan-media:hover img{transform:scale(2.2);
    filter:brightness(1.04) contrast(1.06) saturate(1)}
  .plan-media:hover img{transition:transform .28s var(--ease),filter .4s var(--ease)}
}
.plan-media.zoom img{transform:scale(2.2);filter:brightness(1.04) contrast(1.06)}
.plan-media.swap img{opacity:0}

.plan-hint{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  background:rgba(4,7,10,.74);backdrop-filter:blur(8px);padding:6px 11px;
  border-radius:100px;border:1px solid var(--line-soft);pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.plan-media:hover .plan-hint{opacity:0;transform:translateY(5px)}

.plan figcaption{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:15px 20px;border-top:1px solid var(--line-soft)}
.plan figcaption b{font-family:var(--serif);font-size:19px;font-weight:400;
  color:var(--shell);transition:color .4s var(--ease)}
.plan:hover figcaption b{color:var(--sand)}
.plan figcaption span{margin-left:auto;font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  transition:color .4s var(--ease)}
.plan:hover figcaption span{color:var(--shell-2)}

@media (max-width:960px){
  .tower-grid{grid-template-columns:1fr}
  .specs{grid-template-columns:repeat(2,1fr)}
  .plan-media{cursor:pointer}
}

/* ============================================================ price rail = */
/* The price rail is a narrow band, but it is still a row, so it carries the
   same half gap as everything else. Its own smaller value is what made the two
   boundaries around it 213px while its neighbours were 282px. */
.rail{border-block:1px solid var(--line-soft);background:var(--ink-2);
  padding:var(--sec-y) 0}
.rail-hd{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:38px}
.rail-hd h3{font-size:clamp(21px,2.3vw,27px)}
.rail-hd p{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
/* THE TRACK SCROLLS, THE INNER HOLDS THE AXIS.
   Measured at 375px before this change: 35 pins in a 335px track, median gap
   5px, MINIMUM GAP 0px. Pins physically overlapped and no single one could be
   tapped. A price axis with 77 marks on it needs room, and a phone does not
   have it, so the axis keeps its own width and the track scrolls to it.
   padding-top is what keeps the pin labels visible: overflow-x:auto clips the
   y axis too, and the labels sit above the pins. */
/* padding-inline is load bearing. A pin label is centred on its pin and can be
   110px wide, so the labels on the first and last pins hang past the ends of
   the axis. Absolutely positioned children still count toward scroll width, so
   without this the desktop track scrolled 65px for labels nobody could reach.
   The padding gives them somewhere to hang. */
.rail-track{position:relative;overflow-x:auto;overflow-y:hidden;padding-top:38px;
  padding-inline:68px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.rail-track::-webkit-scrollbar{height:3px}
.rail-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.rail-inner{position:relative;height:96px;min-width:100%;
  border-bottom:1px solid var(--line)}
.rail-inner::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--sea-lo),var(--sand),var(--gold))}
.pin{position:absolute;bottom:0;width:2px;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--sand),rgba(220,185,141,.25));
  transform-origin:bottom;cursor:pointer;
  transition:transform .8s var(--ease-out),background .3s var(--ease),
             width .3s var(--ease),box-shadow .4s var(--ease)}
.js .rail .pin{transform:scaleY(0)}
.js .rail.in .pin{transform:scaleY(1)}
.pin::after{content:"";position:absolute;inset:-9px -8px 0}
.pin:hover,.pin:focus-visible{width:4px;background:var(--sand-hi);
  box-shadow:0 0 20px 1px rgba(240,220,192,.75);outline:none}
.pin b{position:absolute;bottom:calc(100% + 9px);left:50%;translate:-50% 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink);
  background:var(--sand-hi);padding:5px 9px;border-radius:var(--r-xs);white-space:nowrap;
  opacity:0;transform:translateY(5px) scale(.94);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
/* :focus as well as :focus-visible. A tap on a phone focuses the button but
   does not always satisfy :focus-visible, which left the label unreachable on
   exactly the devices that have no hover. */
.pin:hover b,.pin:focus b,.pin:focus-visible b{opacity:1;transform:none}

/* THE SOLD RESIDENCES.
   Short, muted, inert. They carry no price because the source has none for
   them: see the long comment in build_home.py. Shorter than any available pin
   on purpose, so a residence that is gone can never read as louder than one
   that is still for sale. */
.pin.gone{width:2px;background:linear-gradient(180deg,var(--line),rgba(38,52,61,.25));
  pointer-events:none;cursor:default}

.rail-scale{display:flex;justify-content:space-between;margin-top:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.rail-scale b{color:var(--sand);font-weight:400}
.rail-key{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:18px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
.rail-key span{display:inline-flex;align-items:center;gap:9px}
.rail-key i{width:2px;height:13px;border-radius:2px;flex:none}
.rail-key .a{background:var(--sand)}
.rail-key .v{background:var(--line)}

@media (max-width:820px){
  /* Seventy seven marks cannot share 335px, so the axis keeps its own width
     and the track scrolls to it. At 760px the available pins sit about 21px
     apart, and the widened hit area below clears the 24px touch minimum. */
  .rail-inner{min-width:760px}
  .pin::after{inset:-11px -11px 0}
  .rail-hd{gap:10px}
  .rail-hd p{margin-left:0}
}

/* ============================================================== typology = */
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:clamp(12px,1.6vw,20px)}
.type{position:relative;padding:30px 26px 26px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surf);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;min-height:280px;
  transition:transform .55s var(--ease),border-color .55s var(--ease),
             box-shadow .55s var(--ease)}
.type::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(168deg,rgba(220,185,141,.13),transparent 62%);
  opacity:0;transition:opacity .55s var(--ease)}
/* a rule grows down the left edge on hover */
.type::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--sand),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.type:hover{transform:translateY(-6px);border-color:rgba(220,185,141,.36);
  box-shadow:0 34px 66px -42px rgba(0,0,0,.98)}
.type:hover::before{opacity:1}
.type:hover::after{transform:scaleY(1)}
.type-n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint);
  margin-bottom:16px}
.type h3{margin-bottom:6px}
.type .sub{font-size:13px;color:var(--muted);margin-bottom:22px}
.type dl{margin-top:auto;display:grid;gap:9px}
.type div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.type dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint)}
.type dd{font-family:var(--mono);font-size:14px;color:var(--shell)}
.type dd.hi{color:var(--sand)}
.type .go{margin-top:20px}

/* =============================================================== gallery = */
.plates{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.3vw,16px)}
.plate{position:relative;overflow:hidden;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:var(--surf);cursor:pointer;
  transition:border-color .55s var(--ease)}
.plate img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out),filter .8s var(--ease)}
.plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(4,7,10,.9) 100%);
  opacity:.86;transition:opacity .6s var(--ease)}
.plate:hover{border-color:rgba(220,185,141,.42)}
.plate:hover img{transform:scale(1.07)}
.plate:hover::after{opacity:.62}
.plate figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;
  transition:transform .6s var(--ease)}
.plate:hover figcaption{transform:translateY(-4px)}
.plate figcaption b{display:block;font-family:var(--serif);font-size:clamp(19px,2vw,25px);
  color:var(--shell);line-height:1.15}
.plate figcaption span{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand);opacity:0;
  transform:translateY(7px);
  transition:opacity .5s var(--ease) .05s,transform .5s var(--ease) .05s}
.plate:hover figcaption span{opacity:1;transform:none}
.p-lg{grid-column:span 7;aspect-ratio:16/10}
.p-md{grid-column:span 5;aspect-ratio:4/3.4}
.p-sm{grid-column:span 4;aspect-ratio:4/3.1}
@media (max-width:820px){
  .p-lg,.p-md{grid-column:span 12;aspect-ratio:16/10}
  .p-sm{grid-column:span 6;aspect-ratio:1/1}
}

/* ============================================================= amenities = */
/* FLEX, NOT GRID, AND THAT IS THE WHOLE POINT.
   This was `grid-template-columns:repeat(auto-fit,minmax(180px,1fr))`. At
   1280px that resolved to SIX columns for SEVEN cards, so the second row held
   one card and five empty cells: roughly 960x195px of dead slab. Any count
   that is not an exact multiple of the column count leaves the same hole, so
   it would have come back the moment EKPM added an amenity.
   Flex wrap has no cells to leave empty. The items on a short last row grow to
   consume the leftover width, so the block is solid at ANY number of amenities
   and at any viewport, with no media query counting cards. */
.amen{display:flex;flex-wrap:wrap;
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden}
/* Basis picks the row length; grow fills whatever is left over. At the current
   seven this gives a 4 + 3 split, both rows full edge to edge. */
.am{position:relative;background:var(--ink-2);padding:30px 24px 28px;overflow:hidden;
  flex:1 1 250px;min-width:min(100%,250px);
  transition:background .55s var(--ease)}
.am::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 118%,rgba(70,188,205,.16),transparent 66%);
  opacity:0;transition:opacity .55s var(--ease)}
.am:hover{background:var(--surf)}
.am:hover::before{opacity:1}
.am-n{position:relative;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--faint);transition:color .45s var(--ease)}
.am:hover .am-n{color:var(--sea)}
.am b{position:relative;display:block;margin-top:16px;font-family:var(--serif);
  font-size:21px;line-height:1.16;color:var(--shell);
  transition:transform .55s var(--ease)}
.am:hover b{transform:translateX(5px)}
.am p{position:relative;margin-top:9px;font-size:13px;color:var(--muted);line-height:1.55}

.servs{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(26px,3.4vw,40px)}
.serv{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;
  border:1px solid var(--line);border-radius:100px;font-size:13px;color:var(--shell-2);
  cursor:default;transition:border-color .45s var(--ease),color .45s var(--ease),
    background .45s var(--ease),transform .4s var(--ease)}
.serv i{width:4px;height:4px;border-radius:50%;background:var(--faint);flex:none;
  transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.serv:hover{border-color:rgba(70,188,205,.45);color:var(--shell);
  background:rgba(70,188,205,.06);transform:translateY(-2px)}
.serv:hover i{background:var(--sea);box-shadow:0 0 9px 1px rgba(70,188,205,.8)}

/* ============================================================== location = */
.loc{position:relative;overflow:clip}
.loc-media{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/8.4;margin-bottom:clamp(34px,4.6vw,58px)}
.loc-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out)}
.loc-media:hover img{transform:scale(1.045)}
.loc-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,7,10,.28) 0%,transparent 34%,
             rgba(4,7,10,.82) 100%)}
.loc-stamp{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,3vw,34px);
  display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.loc-stamp b{font-family:var(--serif);font-size:clamp(23px,3.1vw,38px);line-height:1.1}
.loc-stamp span{margin-left:auto;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}

.dists{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-md);
  overflow:hidden}
.dist{background:var(--ink-2);padding:26px 22px;transition:background .5s var(--ease)}
.dist:hover{background:var(--surf)}
.dist b{display:block;font-family:var(--mono);font-size:26px;color:var(--sand);
  letter-spacing:-.03em;line-height:1;transition:transform .5s var(--ease)}
.dist:hover b{transform:translateY(-3px)}
.dist b sub{font-size:.44em;color:var(--muted);vertical-align:baseline;margin-left:3px}
.dist span{display:block;margin-top:10px;font-size:12.5px;color:var(--muted)}

/* ============================================================ fideicomiso = */
.fid{background:
  linear-gradient(150deg,rgba(14,52,62,.5),rgba(4,7,10,.7)),var(--ink-2);
  border-block:1px solid var(--line-soft);position:relative;overflow:clip}
.fid::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(70,188,205,.1),transparent 66%);
  pointer-events:none}
.fid-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(30px,5vw,72px);align-items:center}
.steps{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-md);overflow:hidden}
.step{background:rgba(11,18,24,.9);padding:20px 24px;display:flex;gap:18px;
  align-items:flex-start;transition:background .5s var(--ease),padding-left .5s var(--ease)}
.step:hover{background:var(--surf-2);padding-left:30px}
.step em{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--sea);
  padding-top:3px;flex:none;letter-spacing:.1em;transition:color .4s var(--ease)}
.step:hover em{color:var(--sea)}
.step b{display:block;font-size:15px;font-weight:500;color:var(--shell);margin-bottom:4px}
.step p{font-size:13px;color:var(--muted);line-height:1.55}
@media (max-width:900px){.fid-grid{grid-template-columns:1fr}}

/* ============================================================= developer = */
.dev{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4.6vw,64px);align-items:center}
.dev-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3.2}
.dev-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.06);
  transition:transform 1.3s var(--ease-out),filter .8s var(--ease)}
.dev-fig:hover img{transform:scale(1.06);filter:saturate(1) contrast(1)}
@media (max-width:860px){.dev{grid-template-columns:1fr}}

/* =============================================================== contact = */
.contact{background:var(--ink-2);border-top:1px solid var(--line-soft);position:relative;
  overflow:clip}
.contact::before{content:"";position:absolute;inset:0;opacity:.14;
  background:url("../img/gallery/render-cuatro.webp") center/cover no-repeat;
  mask-image:linear-gradient(180deg,#000,transparent 74%)}
.contact > *{position:relative}
.c-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(32px,5vw,76px);align-items:start}

.form{display:grid;gap:16px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{position:relative}
.field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px;
  transition:color .4s var(--ease)}
.field:focus-within label{color:var(--sand)}
.field input,.field select,.field textarea{
  width:100%;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;font-size:14.5px;color:var(--shell);
  transition:border-color .45s var(--ease),background .45s var(--ease),
             box-shadow .45s var(--ease)}
.field textarea{min-height:112px;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237c8b95' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sand);background:var(--surf-2);
  box-shadow:0 0 0 3px rgba(220,185,141,.1)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field optgroup{background:var(--surf);color:var(--muted);font-style:normal}
.field option{background:var(--surf);color:var(--shell)}
.form-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.form-foot p{font-size:11.5px;color:var(--faint);line-height:1.5;max-width:44ch}
.form-foot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;
  transition:color .35s var(--ease)}
.form-foot a:hover{color:var(--sand)}

.c-cards{display:grid;gap:11px;margin-top:30px}
.c-card{display:flex;align-items:center;gap:16px;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surf);
  transition:border-color .5s var(--ease),transform .45s var(--ease),
             background .5s var(--ease)}
.c-card:hover{border-color:rgba(220,185,141,.4);transform:translateX(5px);
  background:var(--surf-2)}
.c-card i{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--sand);
  transition:border-color .45s var(--ease),background .45s var(--ease)}
.c-card:hover i{border-color:var(--sand);background:rgba(220,185,141,.1)}
.c-card b{display:block;font-size:14.5px;font-weight:500}
.c-card span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-top:3px}
@media (max-width:900px){.c-grid{grid-template-columns:1fr}.row{grid-template-columns:1fr}}

/* ================================================================ footer = */
.foot{border-top:1px solid var(--line-soft);background:var(--ink);
  padding:clamp(52px,7vw,84px) 0 34px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,48px);padding-bottom:44px;border-bottom:1px solid var(--line-soft)}
.foot h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:18px;font-weight:500}
.foot ul{list-style:none;display:grid;gap:11px}
.foot li a,.foot address a{font-size:13.5px;color:var(--shell-2);position:relative;
  display:inline-block;transition:color .4s var(--ease),transform .4s var(--ease)}
.foot li a:hover,.foot address a:hover{color:var(--sand);transform:translateX(4px)}
.foot address{font-style:normal;font-size:13.5px;color:var(--shell-2);line-height:1.85}
.foot-brand p{margin-top:18px;font-size:13.5px;color:var(--muted);max-width:34ch}
.foot-bot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:26px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.foot-bot .r{margin-left:auto;display:flex;gap:18px}
.foot-bot a{transition:color .35s var(--ease)}
.foot-bot a:hover{color:var(--sand)}
@media (max-width:820px){.foot-top{grid-template-columns:1fr 1fr}}

/* floating WhatsApp */
.wa{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;
  gap:0;padding:14px;border-radius:100px;background:var(--sand);color:var(--ink);
  box-shadow:0 16px 40px -16px rgba(220,185,141,.7);overflow:hidden;
  transition:gap .5s var(--ease),padding .5s var(--ease),background .4s var(--ease),
             transform .4s var(--ease)}
.wa span{max-width:0;overflow:hidden;white-space:nowrap;font-size:13.5px;font-weight:600;
  transition:max-width .55s var(--ease)}
.wa:hover{gap:10px;padding-inline:18px 22px;background:var(--sand-hi);
  transform:translateY(-3px)}
.wa:hover span{max-width:190px}
.wa svg{flex:none}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .js .rv{opacity:1;transform:none}
  .js .rise > span{transform:none}
  .js .pulse .bar i{width:44.9%}
  .js .rail .pin{transform:scaleY(1)}
  .hero-bg img{animation:none;transform:scale(1.04)}
}


/* ============================================================ back to top =
   Scaffold: z.warp.sovereign.projects.template/scaffolds/back-to-top/
   Themed to the Ikonic palette and raised to 84px so it clears the floating
   WhatsApp pill, which owns the bottom right corner and should keep it.
   ========================================================================== */
:root{
  --btt-offset-x: 20px;
  --btt-offset-y: 84px;
  --btt-bg:      rgba(11,18,24,.88);
  --btt-fg:      var(--shell-2);
  --btt-border:  var(--line);
  --btt-shadow:  0 18px 44px -22px rgba(0,0,0,.95);
  --btt-radius:  100px;
  --btt-font:    var(--mono);
  --btt-size:    10px;
}
.backtotop{
  position: fixed;
  right: var(--btt-offset-x);
  bottom: var(--btt-offset-y);
  z-index: 999;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.backtotop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.backtotop a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--btt-radius);
  border: 1px solid var(--btt-border);
  background: var(--btt-bg);
  color: var(--btt-fg);
  box-shadow: var(--btt-shadow);
  text-decoration: none;
  font-family: var(--btt-font);
  font-size: var(--btt-size);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .15em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  transition: transform .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), box-shadow .4s var(--ease);
}
.backtotop a:hover{
  transform: translateY(-3px);
  color: var(--ink);
  border-color: var(--sand);
  background: var(--sand);
  box-shadow: 0 18px 40px -20px rgba(220,185,141,.8);
}

/* The fade is decoration. The scroll itself is handled in JS, which checks the
   same query and jumps instead of animating. */
@media (prefers-reduced-motion: reduce){
  .backtotop{ transition: none }
  .backtotop a:hover{ transform: none }
}

/* ==========================================================================
   Sub pages: one per available residence, plus the two legal documents
   --------------------------------------------------------------------------
   Everything here reuses the front page primitives (.wrap, .sec, .btn, .specs,
   .price, .detail-hd, .plan, .foot). Only the layouts that do not exist on the
   front page are defined below.

   These pages have no hero, so the fixed nav would sit on top of the first
   line. .usec carries the offset instead of the nav carrying a variant.
   ========================================================================== */
/* Sub pages have no hero, so the fixed nav would sit on top of the first line.
   The 74px clears the nav; below that the page uses the same half gap as every
   other row so the sub pages breathe like the front page. */
.usec{padding:calc(74px + var(--sec-y)) 0 var(--sec-y)}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:clamp(26px,4vw,44px);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.crumb a{color:var(--muted);transition:color .3s var(--ease)}
.crumb a:hover{color:var(--sand)}
.crumb span[aria-hidden]{color:var(--faint)}
.crumb span[aria-current]{color:var(--shell-2)}

.uhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(30px,5vw,64px);align-items:start}
.uhead h1{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em;
  font-size:clamp(38px,6.4vw,74px);color:var(--shell);margin:14px 0 20px}

/* The unit box repeats the front page detail pane so a buyer who clicked
   through from the elevation lands on something they recognise. */
.ubox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surf);
  overflow:hidden;position:sticky;top:92px}
.ubox .detail-hd,.ubox .specs,.ubox .price{border-color:var(--line-soft)}
.ubox .detail-cta{display:flex;flex-wrap:wrap;gap:11px;padding:0 26px 20px}
.ubox .detail-cta .btn{flex:1 1 auto;justify-content:center}
.ubox-back{padding:0 26px 24px;margin:0}

.detail-ficha{padding:0 26px 22px;margin:0}
.detail-ficha[hidden]{display:none}

/* plan plus the shared-amenities list */
.uplan{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,54px);align-items:start}
.uplan-side .lede{margin-bottom:34px}
.uh{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;color:var(--shell);
  font-size:clamp(23px,2.7vw,33px);line-height:1.12;margin-bottom:18px}
.ulist{list-style:none;display:grid;gap:13px}
.ulist li{position:relative;padding-left:22px;color:var(--shell-2);font-size:14.5px;line-height:1.55}
.ulist li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;
  background:var(--sand-lo)}

/* neighbour and similar-residence cards */
.ucards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:8px}
.ucard{display:grid;gap:5px;padding:20px 21px;border:1px solid var(--line-soft);
  border-radius:var(--r-md);background:var(--surf);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.ucard:hover,.ucard:focus-visible{border-color:var(--sand-lo);background:var(--surf-2);transform:translateY(-2px)}
.ucard b{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--shell)}
.ucard:hover b{color:var(--sand)}
.ucard-lv,.ucard-m2{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.ucard-m2{color:var(--muted);letter-spacing:.08em;text-transform:none;font-size:11.5px}
.ucard-p{font-family:var(--mono);font-size:15px;color:var(--sand);margin-top:5px}

.ufid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.ufid .lede{margin-top:12px}

/* legal documents */
.legal h1{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(34px,5.4vw,60px);color:var(--shell);margin-bottom:22px}
.lbody{max-width:74ch;margin-top:clamp(34px,5vw,58px)}
.lblock{padding-top:30px;margin-top:30px;border-top:1px solid var(--line-soft)}
.lblock:first-child{border-top:0;margin-top:0;padding-top:0}
.lblock h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);margin-bottom:16px}
.lblock p{color:var(--shell-2);font-size:15px;line-height:1.72;margin-bottom:13px}
.lblock p:last-child{margin-bottom:0}
.lfoot{margin-top:40px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}

@media (max-width:960px){
  .uhead,.uplan{grid-template-columns:1fr}
  .ubox{position:static}
}