/* ==========================================================================
   UNO Beach Residences — private sales brochure
   Design system. No border-radius, no shadows, one hairline, four inks.
   ========================================================================== */

:root{
  /* ink */
  --ink:#14161A;
  --ink-70:rgba(20,22,26,.70);
  --ink-52:rgba(20,22,26,.52);
  --chalk:#FCFBF9;
  --sand:#EFEAE3;
  --sand-deep:#E4DED4;
  --line:rgba(20,22,26,.15);
  --line-soft:rgba(20,22,26,.08);
  --on-dark:#F4F2EE;
  --on-dark-60:rgba(244,242,238,.72);
  --line-dark:rgba(244,242,238,.22);

  /* type */
  --f-display:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --f-sans:"Figtree",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --t-display:clamp(2.15rem,5.1vw,5.3rem);
  --t-h2:clamp(1.95rem,3.7vw,3.9rem);
  --t-h3:clamp(1.35rem,2.1vw,2.15rem);
  --t-lead:clamp(1.05rem,1.1vw,1.35rem);
  --t-body:clamp(0.975rem,.5vw + .84rem,1.0625rem);
  --t-label:0.6875rem;

  /* space — deliberately uneven rhythm */
  --pad:clamp(20px,4.6vw,88px);
  /* controles: relleno suave en vez de contorno, y una curva con rebote
     corto — es lo que separa un botón táctil de una caja dibujada */
  --fill-1:rgba(20,22,26,.055);
  --fill-2:rgba(20,22,26,.10);
  --fill-1-d:rgba(252,251,249,.14);
  --fill-2-d:rgba(252,251,249,.26);
  --spring:cubic-bezier(.22,1,.36,1);
  --maxw:1560px;
  --s-xl:clamp(88px,10.5vw,168px);
  --s-lg:clamp(72px,8.5vw,132px);
  --s-md:clamp(56px,6vw,104px);
  --s-sm:clamp(32px,3.4vw,56px);

  --e:cubic-bezier(.16,1,.3,1);
  --e-soft:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  overflow-x:clip;
  font-family:var(--f-sans);
  font-size:16px;
  background:var(--chalk);
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  line-height:1.6;
  /* `clip` y no `hidden`: los dos cortan igual el desbordamiento lateral, pero
     `hidden` convierte el body en un contenedor de scroll y entonces cualquier
     position:sticky de dentro deja de pegarse a la ventana. Con `clip` no hay
     contenedor de scroll y el pegado funciona. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--ink);color:var(--chalk)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--on-dark)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--chalk);padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* ---------- type ---------- */
.display{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--t-display);
  line-height:.96;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.h2{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--t-h2);
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.h3{
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--t-h3);
  line-height:1.14;
  letter-spacing:-.012em;
}
em,.it{font-style:italic;font-weight:300}
.label{
  font-family:var(--f-sans);
  font-size:var(--t-label);
  font-weight:500;
  letter-spacing:.235em;
  text-transform:uppercase;
  color:var(--ink-52);
  line-height:1.4;
}
.on-dark .label{color:var(--on-dark-60)}
.lead{font-size:var(--t-lead);line-height:1.5;font-weight:300;max-width:34ch}
.body{font-size:var(--t-body);line-height:1.66;font-weight:300;color:var(--ink-70);max-width:56ch}
.on-dark .body{color:var(--on-dark-60)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--s-lg)}
.sec--xl{padding-block:var(--s-xl)}
.sec--md{padding-block:var(--s-md)}
.sec--tb{padding-bottom:var(--s-md)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,40px)}
.rule{height:1px;background:var(--line);border:0}
.on-dark .rule{background:var(--line-dark)}

/* ---------- links & buttons ---------- */
.link{
  display:inline-flex;align-items:baseline;gap:.6em;
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:7px;border-bottom:1px solid var(--line);
  transition:border-color .45s var(--e),color .45s var(--e);
}
.link .arw{transition:transform .5s var(--e);display:inline-block}
.link:hover{border-bottom-color:var(--ink)}
.link:hover .arw{transform:translateX(5px)}
.on-dark .link{border-bottom-color:var(--line-dark)}
.on-dark .link:hover{border-bottom-color:var(--on-dark)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding:17px 32px;border:0;border-radius:999px;
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:background-color .3s var(--e),color .3s var(--e),
             transform .28s var(--spring),box-shadow .3s var(--e);
}
.btn:active{transform:scale(.972)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(20,22,26,.16)}
.on-dark .btn:focus-visible{box-shadow:0 0 0 3px rgba(252,251,249,.28)}

.btn--solid{background:var(--ink);color:var(--chalk)}
.btn--solid:hover{background:#2B3038}
.on-dark .btn--solid{background:var(--on-dark);color:var(--ink)}
.on-dark .btn--solid:hover{background:#EAE6E0}

.btn--ghost{background:var(--fill-1);color:var(--ink)}
.btn--ghost:hover{background:var(--fill-2)}
.on-dark .btn--ghost{background:var(--fill-1-d);color:var(--on-dark)}
.on-dark .btn--ghost:hover{background:var(--fill-2-d)}

/* ---------- progress hairline ---------- */
.prog{position:fixed;inset:0 auto auto 0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--ink);z-index:120;pointer-events:none;opacity:.85}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px var(--pad);
  color:var(--on-dark);
  transition:background-color .5s var(--e),color .5s var(--e),padding .5s var(--e),border-color .5s var(--e);
  border-bottom:1px solid transparent;
}
.nav.is-solid{background:var(--chalk);color:var(--ink);border-bottom-color:var(--line);padding-block:14px}

.nav__menu{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)}
.nav__menu a{
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding-bottom:4px;border-bottom:1px solid transparent;transition:border-color .4s var(--e);
}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{border-bottom-color:currentColor}
.nav__cta{
  border:0;border-radius:999px;padding:11px 22px !important;border-bottom:0 !important;
  background:color-mix(in srgb,currentColor 11%,transparent);
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--e),transform .28s var(--spring);
}
.nav__cta:hover{background:color-mix(in srgb,currentColor 19%,transparent)}
.nav__cta:active{transform:scale(.96)}
.nav.is-solid .nav__cta:hover{background:var(--ink);color:var(--chalk)}
.nav__burger{display:none;width:34px;height:34px;position:relative}
.nav__burger span{position:absolute;left:5px;right:5px;height:1px;background:currentColor;transition:transform .4s var(--e),opacity .3s}
.nav__burger span:nth-child(1){top:13px}
.nav__burger span:nth-child(2){top:20px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--chalk);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e);
}
.drawer.is-open{clip-path:inset(0 0 0 0)}
.drawer a{font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,7vw,3.4rem);line-height:1.24;letter-spacing:-.02em}
.drawer .label{margin-top:32px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--ink);color:var(--on-dark)}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--e)}
.hero__media video.is-ready{opacity:1}
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(9,10,12,.46) 0%,rgba(9,10,12,.05) 30%,rgba(9,10,12,.26) 58%,rgba(9,10,12,.82) 100%),
    linear-gradient(90deg,rgba(9,10,12,.40) 0%,rgba(9,10,12,.10) 42%,rgba(9,10,12,0) 70%)}
.hero__inner{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--pad) clamp(36px,6vh,72px)}
.hero__eyebrow{margin-bottom:clamp(14px,1.8vh,22px);color:rgba(244,242,238,.82);
  font-size:.625rem;letter-spacing:.26em}
/* la portada pide un punto más de voz que el resto de displays: +12 % y un
   pelín más de aire en el subtítulo. Sutil — el mismo clamp, subido, no otra
   tipografía ni otro peso. */
.hero .display{max-width:15ch;font-size:clamp(2.4rem,5.7vw,5.95rem)}
.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
  margin-top:clamp(26px,4vh,50px);padding-top:22px;border-top:1px solid var(--line-dark)}
.hero__sub{font-size:1.0625rem;font-weight:300;line-height:1.6;max-width:42ch;color:rgba(244,242,238,.84)}
.hero__cue{display:flex;align-items:center;gap:14px;color:rgba(244,242,238,.80)}
.hero__cue i{display:block;width:1px;height:38px;background:var(--line-dark);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;inset:0;background:var(--on-dark);
  animation:cue 2.6s var(--e-soft) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* video control */
.hero__vidctl{position:absolute;top:clamp(88px,11vh,124px);right:var(--pad);
  width:44px;height:44px;border:0;border-radius:50%;
  display:grid;place-items:center;color:var(--on-dark);
  background:var(--fill-1-d);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  -webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--e),transform .28s var(--spring)}
.hero__vidctl:hover{background:var(--fill-2-d)}
.hero__vidctl:active{transform:scale(.9)}
.hero__vidctl:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(252,251,249,.3)}
.hero__vidctl svg{width:13px;height:13px;fill:currentColor}
.hero__vidctl .ic-play{display:none}
.hero__vidctl[data-state="paused"] .ic-play{display:block}
.hero__vidctl[data-state="paused"] .ic-pause{display:none}

/* ---------- media blocks ---------- */
.media{position:relative;overflow:hidden;background:var(--sand)}
.media img{position:absolute;top:-6%;left:0;width:100%;height:112%;object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--3x4{aspect-ratio:3/4}
.media--1x1{aspect-ratio:1/1}
.cap{margin-top:12px;font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-52)}

/* bleed to the right / left edge of the viewport */
.bleed-r{margin-right:calc(-1 * var(--pad))}
.bleed-l{margin-left:calc(-1 * var(--pad))}
.bleed{margin-inline:calc(-1 * var(--pad))}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.facts div{padding:26px 0 0;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts div>span:first-child{display:block;font-family:var(--f-display);font-weight:300;
  font-size:clamp(2.1rem,4.2vw,4rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.facts .label{margin-top:12px;display:block;padding-right:16px}

/* ---------- residence plate ---------- */
.plate{position:relative;padding-block:var(--s-lg);overflow:hidden}
.plate + .plate{border-top:1px solid var(--line)}
.plate__ghost{position:absolute;top:calc(var(--s-lg) - .34em);left:calc(var(--pad) * -.35);
  font-family:var(--f-display);font-weight:300;font-size:clamp(9rem,26vw,26rem);line-height:.72;
  color:var(--ink);opacity:.038;pointer-events:none;user-select:none;z-index:0;letter-spacing:-.04em}
.plate__grid{position:relative;z-index:1;align-items:center}
.plate__txt{grid-column:1/span 5;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,22px)}
.plate__media{grid-column:7/span 6;margin-right:calc(-1 * var(--pad))}
.plate--flip .plate__txt{grid-column:8/span 5;order:2}
.plate--flip .plate__media{grid-column:1/span 6;order:1;margin-right:0;margin-left:calc(-1 * var(--pad))}
.plate--flip .plate__ghost{left:auto;right:calc(var(--pad) * -.35)}
.plate__name{margin-top:-.12em}
.plate__tag{font-family:var(--f-display);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,1.55vw,1.6rem);line-height:1.32;color:var(--ink-70);max-width:26ch}
.specs{display:flex;flex-wrap:wrap;gap:0;width:100%;border-top:1px solid var(--line);margin-top:6px}
.specs div{flex:1 1 0;min-width:96px;padding:16px 14px 0 0}
.specs b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(1.1rem,1.5vw,1.5rem);
  line-height:1.1;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.specs .label{margin-top:7px;display:block;font-size:.625rem;letter-spacing:.2em}

/* ---------- masterplan tabs: control segmentado ---------- */
.tabs{
  display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;
  background:var(--fill-1);border-radius:999px;
}
.tabs button{
  padding:13px 24px;border:0;border-radius:999px;cursor:pointer;
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-52);background:transparent;-webkit-tap-highlight-color:transparent;
  transition:color .3s var(--e),background-color .3s var(--e),
             box-shadow .3s var(--e),transform .28s var(--spring);
}
.tabs button:hover{color:var(--ink)}
.tabs button:active{transform:scale(.97)}
.tabs button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(20,22,26,.16)}
.tabs button[aria-selected="true"]{
  color:var(--ink);background:var(--chalk);
  box-shadow:0 1px 3px rgba(20,22,26,.10),0 0 0 .5px rgba(20,22,26,.05);
}
.on-dark .tabs{background:var(--fill-1-d)}
.on-dark .tabs button{color:var(--on-dark-60)}
.on-dark .tabs button[aria-selected="true"]{
  color:var(--ink);background:var(--on-dark);box-shadow:none;
}
/* en móvil no caben en una fila: se apilan como un grupo iOS, con esquinas
   redondeadas pero no en píldora — la píldora sobre tres filas queda rara */
@media (max-width:820px){
  .tabs{display:flex;flex-direction:column;width:100%;border-radius:18px;gap:2px}
  .tabs button{width:100%;border-radius:15px;padding:15px 14px;text-align:center}
}
.tabstack{position:relative;margin-top:clamp(20px,2.4vw,34px);--carh:clamp(280px,42vw,560px)}
.tabstack>[role="tabpanel"]{position:absolute;inset:0;opacity:0;
  transition:opacity .8s var(--e);pointer-events:none}
.tabstack>[role="tabpanel"].is-on{opacity:1;position:relative;pointer-events:auto}
/* el carrusel dentro de una caja con márgenes ya no necesita los suyos */
.car--inset .car__track{padding-inline:0;scroll-padding-inline-start:0}
.car--inset .car__bar{padding-inline:0;max-width:none;margin-inline:0}
.car--inset .car__s img{max-width:min(96%,1400px)}
.car--inset::after{display:none}

/* ---------- editorial pair ---------- */
.pair{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,40px);align-items:end}
.quote{font-family:var(--f-display);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,2.9vw,2.9rem);line-height:1.22;letter-spacing:-.015em;text-wrap:balance}

/* ---------- spec list ---------- */
.dl{border-top:1px solid var(--line)}
.dl>div{display:grid;grid-template-columns:minmax(150px,.9fr) 2fr;gap:clamp(16px,3vw,56px);
  padding:20px 0;border-bottom:1px solid var(--line-soft)}
.dl dt{font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-52)}
.dl dd{font-size:var(--t-body);font-weight:300;line-height:1.55}

/* ---------- floors stepper ---------- */
.floors{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,40px)}
.floors__nav{grid-column:1/span 4}
.floors__nav button{display:block;width:100%;text-align:left;padding:20px 0;border-bottom:1px solid var(--line-soft);
  transition:color .4s var(--e)}
.floors__nav button span{display:block}
.floors__nav .fnum{font-size:var(--t-label);letter-spacing:.22em;color:var(--ink-52);margin-bottom:8px}
.floors__nav .fname{font-family:var(--f-display);font-weight:300;font-size:clamp(1.25rem,1.9vw,1.9rem);
  line-height:1.1;letter-spacing:-.015em;color:var(--ink-52);transition:color .4s var(--e)}
.floors__nav button[aria-selected="true"] .fname{color:var(--ink)}
.floors__nav button[aria-selected="true"] .fnum{color:var(--ink)}
.floors__body{grid-column:6/span 7}
.floors__panel{display:none}
.floors__panel.is-on{display:block}
.rooms{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:26px;border-top:1px solid var(--line)}
.rooms li{flex:0 0 50%;padding:12px 20px 12px 0;font-size:var(--t-body);font-weight:300;
  border-bottom:1px solid var(--line-soft);color:var(--ink-70)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,28px)}
.gal>*{grid-column:span 6}
.gal>.w4{grid-column:span 4}
.gal>.w8{grid-column:span 8}
.gal>.w12{grid-column:span 12}

/* ---------- dark section ---------- */
.dark{background:var(--ink);color:var(--on-dark)}
.warm{background:var(--sand)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--on-dark);padding:var(--s-md) 0 40px}

.foot__cols{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,40px);
  padding-bottom:var(--s-sm)}
.foot .fine{font-size:.75rem;line-height:1.6;color:rgba(244,242,238,.42);max-width:88ch;font-weight:300}
.foot__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--line-dark)}

/* ==========================================================================
   MOTION — content is visible by default. The .js class (set before paint)
   is what enables the entrance animations, so a JS or network failure
   degrades to a plain, complete page rather than a blank one.
   ========================================================================== */
.js .r{opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--e) var(--d,0ms),transform .95s var(--e) var(--d,0ms)}
.js .r.in{opacity:1;transform:none}

.js .rm img{clip-path:inset(0 0 100% 0);scale:1.06;
  transition:clip-path 1.15s var(--e) var(--d,0ms),scale 1.5s var(--e) var(--d,0ms)}
.js .rm.in img{clip-path:inset(0 0 0 0);scale:1}

.js .rl{opacity:0;transform:translateY(.42em);display:inline-block;
  transition:opacity .9s var(--e) var(--d,0ms),transform .9s var(--e) var(--d,0ms)}
.js .rl.in{opacity:1;transform:none}
.lines{display:block;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .r,.js .rm,.js .rl,.js .rm img{opacity:1 !important;transform:none !important;
    clip-path:none !important;scale:none !important;translate:none !important;transition:none !important}
  .hero__cue i::after{animation:none;transform:none}
  .drawer{transition:none}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .plate__txt,.plate--flip .plate__txt{grid-column:1/span 6}
  .plate__media,.plate--flip .plate__media{grid-column:7/span 6;margin-right:calc(-1 * var(--pad))}
  .floors__nav{grid-column:1/span 5}
  .floors__body{grid-column:6/span 7}
}
@media (max-width:900px){
  /* Generic 12-column placements are set inline per section; collapse them all
     to a single column here rather than repeating a rule for each one. */
  .grid > *{grid-column:1 / -1 !important;padding-top:0 !important}
  .grid{gap:clamp(22px,5vw,34px)}
  .body,.lead{max-width:none}
}
@media (max-width:860px){
  .nav__menu{display:none}
  .nav__burger{display:block}
  .facts{grid-template-columns:repeat(2,1fr);border-top:0}
  .facts div{border-top:1px solid var(--line);padding-top:20px;padding-bottom:20px}
  .facts div:nth-child(2n){border-right:0}
  .plate__grid{display:block}
  .plate__media{margin-top:30px;margin-inline:calc(-1 * var(--pad))}
  .plate--flip .plate__media{margin-top:0;margin-bottom:30px;margin-inline:calc(-1 * var(--pad))}
  .plate--flip .plate__txt,.plate--flip .plate__media{order:initial}
  .plate--flip{display:flex;flex-direction:column}
  .plate__ghost{font-size:clamp(7rem,34vw,12rem);opacity:.055}
  .floors{display:block}
  .floors__body{margin-top:32px}
  .rooms li{flex:0 0 100%}
  .gal>*,.gal>.w4,.gal>.w8{grid-column:span 12}
  .dl>div{grid-template-columns:1fr;gap:8px}
  .foot__cols{display:block}
  .foot__cols>*+*{margin-top:32px}
  .pair{display:block}
  .pair>*+*{margin-top:var(--s-sm)}
  .bleed-r{margin-right:calc(-1 * var(--pad))}
  .bleed-l{margin-left:calc(-1 * var(--pad))}
  .hero__vidctl{top:auto;bottom:calc(100% - 74px);right:var(--pad)}
}
@media (max-width:560px){
  .hero__eyebrow{letter-spacing:.15em}
  .specs div{flex:0 0 50%;min-width:0}
  .tabs button{flex:0 0 100%;min-width:0;border-right:0;border-bottom:1px solid var(--line-soft);padding-block:16px}
}

/* ==========================================================================
   STATEMENT — the signature module of the official UNO site:
   a centred serif paragraph with one or two words in italic, and a smaller
   centred sans paragraph beneath it.
   ========================================================================== */
.statement{max-width:min(100%,980px);margin-inline:auto;text-align:center}
.statement__lead{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.45rem,2.55vw,2.5rem);
  line-height:1.3;letter-spacing:-.012em;text-wrap:balance;
}
.statement__lead em{font-style:italic;font-weight:300}
.statement__sub{
  max-width:66ch;margin:clamp(30px,3.6vw,58px) auto 0;
  font-size:clamp(1rem,.42vw + .88rem,1.125rem);line-height:1.72;font-weight:300;color:var(--ink-70);
}
.on-dark .statement__sub{color:var(--on-dark-60)}
@media (max-width:700px){
  .statement{text-align:left}
  .statement__sub{margin-inline:0;max-width:none}
}

/* residence copy pair */
.copy2{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,40px)}
.copy2__lead{grid-column:1/span 6}
.copy2__detail{grid-column:8/span 5}
.copy2__lead p{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.2rem,1.9vw,1.75rem);line-height:1.36;letter-spacing:-.01em;
}
.copy2__lead em{font-style:italic}
@media (max-width:900px){
  .copy2{display:block}
  .copy2__detail{margin-top:clamp(28px,4vw,48px)}
}

/* ==========================================================================
   MAP MODE — append ?map to any URL (or press M) to label every editable
   block and slot with its reference code. Never loads unless asked for.
   ========================================================================== */
.mapmode [data-b]{outline:1px dashed rgba(20,22,26,.22);outline-offset:-1px;position:relative}
.mapmode [data-b]::before{
  content:attr(data-b);position:absolute;z-index:90;top:0;left:0;
  background:#14161A;color:#FCFBF9;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:11px;letter-spacing:.06em;padding:4px 8px;pointer-events:none;
}
.mapmode [data-s]{outline:1px dotted rgba(190,60,40,.55);outline-offset:2px;position:relative}
.mapmode [data-s]::after{
  content:attr(data-s);position:absolute;z-index:91;top:-9px;right:0;
  background:#BE3C28;color:#fff;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:10px;letter-spacing:.04em;padding:2px 6px;pointer-events:none;white-space:nowrap;
}
.maphud{
  position:fixed;z-index:200;left:14px;bottom:14px;
  background:#14161A;color:#FCFBF9;padding:12px 16px;max-width:340px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;line-height:1.7;
}
.maphud b{color:#E9C46A;font-weight:400}
.maphud kbd{border:1px solid rgba(244,242,238,.4);padding:0 4px}

/* ==========================================================================
   LOGO E ICONOS — un solo sprite SVG embebido, todo en currentColor
   ========================================================================== */
.logo{
  display:block;width:100%;height:auto;
  /* proporción explícita: el dimensionado implícito por viewBox depende del
     parser y en la versión rusa el SVG caía al alto por defecto de 150 px */
  aspect-ratio:824/214;
  color:currentColor;fill:currentColor;
}
.nav__logo{display:block;width:clamp(118px,10.5vw,164px);color:inherit}
.foot__logo{width:clamp(180px,17vw,248px);color:var(--on-dark);opacity:.92;margin-bottom:28px}
.drawer__logo{width:148px;color:var(--ink);margin-bottom:auto;padding-top:26px}

.ic{width:1.65em;height:1.65em;flex:none;color:currentColor}

/* fila de especificaciones con icono */
.spec-icons{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,34px) clamp(24px,3vw,56px);
  border-top:1px solid var(--line);padding-top:clamp(28px,3.2vw,46px);
}
.spec-icons div{display:flex;align-items:flex-start;gap:14px}
.spec-icons span{
  font-size:var(--t-label);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.55;color:var(--ink-70);padding-top:.35em;
}
.on-dark .spec-icons{border-top-color:var(--line-dark)}
.on-dark .spec-icons span{color:var(--on-dark-60)}
@media (max-width:900px){.spec-icons{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.spec-icons{grid-template-columns:1fr}}

/* ==========================================================================
   EL RECORRIDO — capítulo por estancia, carrusel por capítulo
   El carrusel es un scroller nativo con scroll-snap: funciona sin una línea
   de JavaScript. El script solo añade flechas, contador y teclado.
   Las imágenes NO se recortan: la altura del escenario es fija y el ancho lo
   pone la proporción original de cada render.
   ========================================================================== */
.tour{--carh:clamp(320px,60vh,660px)}
.tour__intro{max-width:56ch;margin-top:1.6em}

.chapter{margin-top:clamp(56px,7vw,120px)}
.chapter:first-of-type{margin-top:clamp(20px,2.6vw,44px)}

.chapter__head{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(12px,1.6vw,28px);align-items:end;
  padding-bottom:clamp(22px,2.6vw,40px);
}
.chapter__id{grid-column:1/span 5;display:flex;align-items:baseline;gap:clamp(14px,1.6vw,26px)}
.chapter__n{
  font-size:var(--t-label);letter-spacing:.22em;color:var(--ink-52);
  font-variant-numeric:tabular-nums;padding-bottom:.35em;
}
.chapter__t{font-family:var(--serif);font-weight:300;line-height:1.02;
  font-size:clamp(1.7rem,3.1vw,2.9rem);letter-spacing:-.01em}
.chapter__note{grid-column:6/span 3;font-size:.9375rem;line-height:1.62;color:var(--ink-70)}

/* el plano-clave: la estancia marcada dentro de la planta.
   Va pequeño y a la derecha: es una referencia, no una pieza. */
.chapter__plan{grid-column:9/span 4;margin:0}
.chapter__plan img{
  max-height:clamp(110px,12.5vw,180px);width:auto;max-width:100%;
  height:auto;display:block;margin-left:auto;mix-blend-mode:multiply;
}
.chapter__plan figcaption{
  margin-top:9px;font-size:.5625rem;letter-spacing:.16em;text-align:right;
  text-transform:uppercase;color:var(--ink-52);
}

/* ---- el carrusel ---- */
.car{position:relative}
.car__track{
  display:flex;gap:clamp(12px,1.4vw,24px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-inline:var(--pad);scroll-padding-inline-start:var(--pad);
  scrollbar-width:none;-ms-overflow-style:none;
}
.car__track::-webkit-scrollbar{display:none}
.car__s{
  flex:0 0 auto;scroll-snap-align:start;margin:0;
  height:var(--carh);position:relative;background:var(--sand);
}
.car__s img{height:100%;width:auto;max-width:min(92vw,1600px);display:block;object-fit:contain}
.car__s figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(30px,5vh,58px) 18px 14px;
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  color:#FCFBF9;line-height:1.5;
  background:linear-gradient(to top,rgba(20,22,26,.62),rgba(20,22,26,0));
  opacity:0;transition:opacity .45s var(--e);
}
.car__s:hover figcaption,.car__s:focus-within figcaption{opacity:1}

/* barra de control: solo aparece con JS */
.car__bar{
  display:none;align-items:center;gap:clamp(18px,2.2vw,28px);
  margin-top:clamp(16px,1.8vw,26px);
}
.js .car__bar{display:flex}
.car__nav{display:flex;gap:8px;flex:none}
.car__b{
  width:46px;height:46px;flex:none;border:0;border-radius:50%;
  background:var(--fill-1);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:background-color .3s var(--e),opacity .3s var(--e),
             transform .28s var(--spring);
}
.car__b:hover{background:var(--fill-2)}
.car__b:active{transform:scale(.9)}
.car__b:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(20,22,26,.16)}
.car__b[disabled]{opacity:.22;cursor:default}
.car__b[disabled]:hover{background:var(--fill-1)}
.car__b[disabled]:active{transform:none}
/* trazo de chevron tipo SF Symbol: punta redondeada y ángulo estrecho */
.car__b svg{
  width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.car__b--prev svg{margin-right:2px}
.car__b--next svg{margin-left:2px}

/* indicador de página: puntos, como en iOS */
.car__dots{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.car__dot{
  width:7px;height:7px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:rgba(20,22,26,.20);-webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--e),transform .3s var(--spring);
}
.car__dot:hover{background:rgba(20,22,26,.42)}
.car__dot[aria-current="true"]{background:var(--ink);transform:scale(1.14)}
.car__dot:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(20,22,26,.16)}

/* el contador solo aparece donde no caben los puntos */
.car__i{
  display:none;font-size:var(--t-label);letter-spacing:.2em;color:var(--ink-52);
  font-variant-numeric:tabular-nums;flex:none;
}

.on-dark .car__b{background:var(--fill-1-d);color:var(--on-dark)}
.on-dark .car__b:hover{background:var(--fill-2-d)}
.on-dark .car__dot{background:rgba(252,251,249,.26)}
.on-dark .car__dot[aria-current="true"]{background:var(--on-dark)}

/* pista de que hay más a la derecha */
.car::after{
  content:"";position:absolute;top:0;right:0;width:clamp(24px,5vw,80px);
  height:var(--carh);pointer-events:none;
  background:linear-gradient(to right,rgba(239,234,227,0),var(--sand));
  opacity:0;transition:opacity .4s var(--e);
}
.car.has-next::after{opacity:1}

/* el bloque del esquema de interiorismo, cuando se enseña como propuesta */
.scheme{
  margin-top:clamp(72px,9vw,150px);
  border-top:1px solid var(--line);padding-top:clamp(40px,5vw,84px);
}

@media (max-width:1100px){
  .chapter__id{grid-column:1/span 7}
  .chapter__note{grid-column:8/span 5}
  .chapter__plan{grid-column:1/span 5;margin-top:clamp(16px,2vw,28px)}
  .chapter__plan img{margin-left:0}
  .chapter__plan figcaption{text-align:left}
}
@media (max-width:900px){
  .tour{--carh:clamp(260px,44vh,420px)}
  .chapter__id,.chapter__note{grid-column:1/-1}
  .chapter__plan{grid-column:1/span 7;margin-top:1.4em}
  .chapter__plan img{margin-left:0;max-height:150px}
  .chapter__note{margin-top:1em}
  .car__s img{max-width:88vw}
  .car__dots{display:none}
  .car__i{display:block}
}
@media (prefers-reduced-motion:reduce){
  .car__track{scroll-behavior:auto}
  .car__s figcaption{opacity:1;transition:none}
}

/* ==========================================================================
   BLOQUE DE CONTACTO
   ========================================================================== */
.contact__name{
  font-family:var(--f-display);font-weight:300;line-height:1.05;
  font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.015em;
}
.contact__list{list-style:none;margin:clamp(14px,1.6vw,22px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:2px}
.contact__list a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:1.0625rem;line-height:1.5;color:var(--on-dark-60);
  transition:color .3s var(--e);font-variant-numeric:tabular-nums;
}
.contact__list a:hover{color:var(--on-dark)}
.contact__icons{display:flex;gap:10px;margin-top:clamp(12px,1.4vw,18px)}
.contact__ic{
  width:44px;height:44px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--on-dark);
  background:var(--fill-1-d);-webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--e),transform .28s var(--spring);
}
.contact__ic:hover{background:var(--fill-2-d)}
.contact__ic:active{transform:scale(.9)}
.contact__ic:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(252,251,249,.3)}
.contact__ic .ic{width:19px;height:19px}
.contact__btns{display:flex;flex-direction:column;gap:10px;
  margin-top:clamp(22px,2.6vw,34px)}
@media (max-width:900px){
  .contact__icons{margin-top:16px}
  .contact__btns{margin-top:26px}
}

/* ==========================================================================
   ZONAS TÁCTILES — 44 px de alto donde se toca con el dedo.
   Solo por debajo de 900: en escritorio el subrayado ajustado es lo correcto.
   ========================================================================== */
@media (max-width:900px){
  .link{min-height:44px;align-items:center;padding-bottom:0;
    border-bottom:0;position:relative}
  .link::after{content:"";position:absolute;left:0;right:0;bottom:11px;
    height:1px;background:var(--line);transition:background-color .45s var(--e)}
  .link:hover::after{background:var(--ink)}
  .on-dark .link::after{background:var(--line-dark)}
  .on-dark .link:hover::after{background:var(--on-dark)}
  .foot__nav a,.foot a{min-height:44px;display:inline-flex;align-items:center}
  .nav__logo{min-height:44px;display:flex;align-items:center}
  .nav__burger{width:44px;height:44px}
  .drawer a{min-height:48px;display:flex;align-items:center}
}

/* ==========================================================================
   CARRUSEL DE FUNDIDO — para el masterplan de la home.
   La tira con scroll-snap deja media imagen a la derecha, y con dos vistas
   eso queda desordenado. Aquí el marco es fijo y las vistas se cruzan.
   Sin JavaScript la tira sigue funcionando: el marco solo se activa con .js
   ========================================================================== */
.js .car--fade .car__track{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:16/9;background:var(--chalk);
  scroll-snap-type:none;padding-inline:0;
}
.js .car--fade .car__s{
  position:absolute;inset:0;height:auto;width:auto;background:none;
  opacity:0;transition:opacity .8s var(--e);pointer-events:none;
}
.js .car--fade .car__s.is-on{opacity:1;pointer-events:auto}
.js .car--fade .car__s img{
  width:100%;height:100%;max-width:none;object-fit:contain;display:block;
}
/* la aérea llena el marco; el plano, que es un dibujo sobre papel, se ajusta */
.js .car--fade .car__s:first-child img{object-fit:cover}
.js .car--fade .car__s figcaption{
  opacity:0;background:linear-gradient(to top,rgba(20,22,26,.55),rgba(20,22,26,0));
}
.js .car--fade .car__s:hover figcaption{opacity:1}
.js .car--fade::after{display:none}
@media (prefers-reduced-motion:reduce){
  .js .car--fade .car__s{transition:none}
  .js .car--fade .car__s figcaption{opacity:1}
}

/* ==========================================================================
   RUSO — tipografía cirílica y ajuste de escala
   Newsreader y Figtree no traen cirílico: en ruso caerían a la fuente del
   sistema y se rompería la marca. Se sustituyen por el par equivalente que sí
   lo trae — Cormorant Garamond conserva la cursiva real, que es el gesto de
   voz de UNO, y Manrope es geométrico-humanista como Figtree.
   El ruso ocupa de media un 15 % más, así que la escala baja en consecuencia.
   ========================================================================== */
:root:lang(ru){
  --f-display:"Cormorant Garamond","Iowan Old Style",Palatino,"Times New Roman",serif;
  --f-sans:"Manrope",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* display y titulares: −10 %, que es donde más se nota el desbordamiento */
  --t-display:clamp(1.95rem,4.6vw,4.75rem);
  --t-h2:clamp(1.75rem,3.35vw,3.5rem);
  --t-h3:clamp(1.25rem,1.95vw,1.95rem);
}
/* Cormorant tiene el ojo más pequeño que Newsreader a igual cuerpo:
   se compensa un punto para que la mancha de texto pese lo mismo. */
:lang(ru) .body,:lang(ru) .copy2__detail p{font-size:1.0em}
:lang(ru) .hero__sub{font-size:1.0rem;max-width:46ch}
/* el ruso corre un 15 % más largo: su portada sube desde SU escala, no la inglesa */
:lang(ru) .hero .display{font-size:clamp(2.2rem,5.15vw,5.3rem)}
:lang(ru) .hero .display{max-width:17ch}
:lang(ru) .label,:lang(ru) .spec-icons span{letter-spacing:.15em}
:lang(ru) .btn,:lang(ru) .nav__cta{letter-spacing:.13em}
:lang(ru) .nav__menu a{letter-spacing:.13em;font-size:.6875rem}
:lang(ru) .tabs button{letter-spacing:.13em;padding-inline:20px}
:lang(ru) .chapter__t{font-size:clamp(1.5rem,2.8vw,2.6rem)}
:lang(ru) .plate__tag{font-size:clamp(1.05rem,1.42vw,1.45rem);max-width:28ch}
:lang(ru) .statement__lead{font-size:clamp(1.3rem,2.5vw,2.35rem)}
/* Las etiquetas rusas son más largas —«м² внутренней площади» frente a
   «interior m²»— y hay que darles sitio. Se gana con el espaciado entre letras
   y con un poco menos de cuerpo, pero nunca por debajo de 10 px: más pequeño
   ya no se lee en el móvil. Lo que sobra se va a una segunda línea. */
:lang(ru) .specs .label,:lang(ru) .facts .label{
  font-size:.625rem;letter-spacing:.1em;line-height:1.35;
}
:lang(ru) .facts .label{padding-right:10px}
:lang(ru) .specs div{min-width:104px}
:lang(ru) .contact__list a{font-size:1.0rem}
/* Manrope no tiene cursiva: si algún <em> cae en texto de palo, el navegador
   la inclinaría de forma sintética. Mejor marcarlo con peso. */
:lang(ru) .body em,:lang(ru) .fine em{font-style:normal;font-weight:500}

/* el selector de idioma */
.lang{display:inline-flex;align-items:center;gap:2px;margin-left:clamp(10px,1.4vw,18px)}
.lang a{
  min-width:34px;height:30px;padding:0 9px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.625rem;letter-spacing:.16em;font-weight:500;
  color:inherit;opacity:.55;-webkit-tap-highlight-color:transparent;
  transition:background-color .3s var(--e),opacity .3s var(--e);
}
.lang a:hover{opacity:1}
.lang a[aria-current="true"]{
  opacity:1;background:color-mix(in srgb,currentColor 12%,transparent);
}
@media (max-width:900px){
  .lang{margin-left:0;margin-top:auto;padding-top:22px}
  .lang a{min-width:44px;height:44px;font-size:.6875rem}
}

/* ── flechas a los costados en «three positions» ──────────────────────────
   Debajo de la imagen pasaban desapercibidas y la gente se quedaba en la
   primera vista. Aquí van sobre la propia foto, centradas en el alto y una a
   cada lado, con fondo sólido para que se lean sobre cualquier render.

   El alto se calcula con una consulta de contenedor: la pista tiene relación
   16:9, así que su mitad son 28,125 cqw. Así quedan centradas sobre la imagen
   sin depender del alto de la barra de puntos que va debajo. */
.js .car--fade{container-type:inline-size}
.js .car--fade .car__nav{display:contents}
.js .car--fade .car__b{
  position:absolute;top:calc(56.25cqw / 2);transform:translateY(-50%);
  width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);
  background:rgba(252,251,249,.94);
  box-shadow:0 3px 16px rgba(20,22,26,.20),0 0 0 1px rgba(20,22,26,.05);
  z-index:3;
}
.js .car--fade .car__b:hover{background:#FCFBF9}
.js .car--fade .car__b:active{transform:translateY(-50%) scale(.9)}
.js .car--fade .car__b[disabled]{opacity:0;pointer-events:none}
.js .car--fade .car__b svg{width:18px;height:18px;stroke-width:2.1}
.js .car--fade .car__b--prev{left:clamp(10px,1.4vw,22px)}
.js .car--fade .car__b--next{right:clamp(10px,1.4vw,22px)}
/* la barra de abajo se queda con los puntos y el contador, centrados */
.js .car--fade .car__bar{justify-content:center}

@media (max-width:600px){
  .js .car--fade .car__b{width:42px;height:42px}
  .js .car--fade .car__b--prev{left:8px}
  .js .car--fade .car__b--next{right:8px}
}

/* ══════════════════════════════════════════════════════════════════════════
   v3 · los tres capítulos nuevos
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 02 · SOLD OUT ----------
   Una sola pantalla, oscura, con la frase grande. Es lo primero que se lee
   después de la portada y tiene que sostenerse sola. */
.sold{
  min-height:min(92vh,900px);display:grid;align-content:center;
  /* la columna tiene que ocupar el ancho: sin esto la rejilla la ajusta al
     contenido y el .wrap se centra solo, dejando el bloque flotando */
  grid-template-columns:minmax(0,1fr);
  padding-block:var(--s-lg);
}
/* .wrap lleva margin-inline:auto, y en una rejilla los márgenes automáticos
   ganan al estirado: el bloque se quedaba centrado y flotando en medio. Con
   width:100% vuelve a ocupar la columna y a alinearse con el resto de la web. */
.sold .wrap{width:100%}
.sold__in{max-width:none}
.sold .display{margin-top:.34em;max-width:13ch}
.sold__lead{
  margin-top:clamp(26px,3vw,44px);max-width:44ch;
  font-size:clamp(1.05rem,1.15vw,1.3rem);line-height:1.55;font-weight:300;
  color:var(--on-dark-60);
}
/* el texto a la izquierda y el mapa a la derecha, como la portada. El mapa
   pesa un punto más que el texto porque es un plano apaisado: con las dos
   columnas iguales se quedaba pequeño y no se leían los rótulos. */
.sold__cols{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);
  gap:clamp(30px,4.4vw,80px);align-items:center;
}
@media (max-width:980px){
  .sold__cols{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,48px)}
}

/* ---------- el mapa de la Milla ----------
   El esquema ya trae dentro su propio marco y su pie, así que aquí no se le
   pone cartela: solo ocupa la columna. */
.mile{margin:0}
.mile img{display:block;width:100%;height:auto}

.sold__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,40px);
  margin-top:clamp(48px,6vw,96px);border-top:1px solid var(--line-dark);
}
.sold__grid div{padding-top:clamp(18px,2vw,30px)}
.sold__grid b{
  display:block;font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.75rem);line-height:1.1;letter-spacing:-.015em;
}
.sold__grid .label{margin-top:10px;display:block;max-width:22ch}
@media (max-width:700px){
  .sold__grid{grid-template-columns:1fr;gap:0}
  .sold__grid div{border-top:1px solid var(--line-dark);padding-block:18px}
  .sold__grid div:first-child{border-top:0}
}

/* ---------- 03 · THE PLACE ----------
   Cuatro paradas en horizontal. Cada una es una lámina: foto a sangre con un
   velo y el texto encima, abajo a la izquierda. */
.place{--carh:clamp(420px,64vh,720px)}
.place .car__s{width:min(88vw,1180px);background:var(--ink)}
.place .car__s img{width:100%;height:100%;object-fit:cover;max-width:none}
.place__panel{position:relative;height:100%}
.place__panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(16,18,21,.86) 0%,rgba(16,18,21,.42) 38%,rgba(16,18,21,.06) 72%);
}
.place__txt{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(26px,3.4vw,54px);color:var(--on-dark);
  display:grid;gap:clamp(10px,1.1vw,16px);
}
.place__n{
  font-family:var(--f-display);font-weight:300;font-size:var(--t-label);
  letter-spacing:.28em;color:rgba(244,242,238,.62);
}
.place__h{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.6rem,2.9vw,3rem);line-height:1.04;letter-spacing:-.02em;
  max-width:16ch;
}
.place__h em{font-style:italic}
.place__b{
  font-size:clamp(.95rem,.95vw,1.0625rem);line-height:1.6;font-weight:300;
  color:rgba(244,242,238,.82);max-width:52ch;
}
.place__b em{font-style:italic;color:rgba(244,242,238,.66)}
@media (max-width:700px){
  .place{--carh:clamp(460px,74vh,620px)}
  .place .car__s{width:88vw}
  .place__h{font-size:clamp(1.45rem,7vw,2rem)}
}

/* ---------- 05 · A DAY AT UNO ----------
   Cuatro momentos, en rejilla. Sin carrusel: se ven los cuatro de un vistazo y
   el conjunto es el que cuenta la historia. */
.day{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,22px)}
.day figure{margin:0;position:relative}
.day .media{aspect-ratio:3/4}
/* la imagen la coloca .media img, que ya trae el 112 % de alto del paralaje:
   tocarlo aquí dejaba una franja vacía abajo */
.day figcaption{
  margin-top:clamp(14px,1.4vw,20px);
  font-size:clamp(.9rem,.9vw,1rem);line-height:1.55;font-weight:300;
  color:var(--ink-70);max-width:30ch;
}
.day__t{
  display:block;font-size:var(--t-label);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-52);margin-bottom:8px;
}
@media (max-width:900px){
  .day{grid-template-columns:repeat(2,1fr);gap:clamp(14px,3vw,26px)}
}
@media (max-width:520px){
  .day{grid-template-columns:1fr}
  .day .media{aspect-ratio:16/10}
  .day figcaption{max-width:none}
}

/* las flechas al costado también en los carruseles de lámina */
.js .place .car{container-type:inline-size}
.js .place .car__nav{display:contents}
.js .place .car__b{
  position:absolute;top:calc(var(--carh) / 2);transform:translateY(-50%);
  width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);
  background:rgba(252,251,249,.94);
  box-shadow:0 3px 16px rgba(20,22,26,.22),0 0 0 1px rgba(20,22,26,.05);
  z-index:4;
}
.js .place .car__b:active{transform:translateY(-50%) scale(.9)}
.js .place .car__b[disabled]{opacity:0;pointer-events:none}
.js .place .car__b--prev{left:clamp(10px,1.4vw,22px)}
.js .place .car__b--next{right:clamp(10px,1.4vw,22px)}
.js .place .car__bar{justify-content:center}

/* la fila de cifras admite tres columnas cuando solo hay tres datos */
.facts--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.facts--3{grid-template-columns:repeat(3,1fr)}}

/* ==========================================================================
   v3 · MOVIMIENTO LIGADO AL SCROLL
   --------------------------------------------------------------------------
   Tres reglas que me pongo, para que «espectacular» no acabe en «cargante»:

     1. Nada de esto es necesario. Todo va dentro de @supports; en un navegador
        que no lo entienda la página se ve exactamente como hoy, sin JavaScript
        de repuesto ni salto de maquetación.
     2. Nada de esto se mueve solo. La animación avanza con el scroll del
        usuario: si para, se para. No hay bucles, no hay parpadeos, y con el
        scroll quieto cada fotograma es una composición que se sostiene sola.
     3. `prefers-reduced-motion` lo apaga entero.

   Es todo CSS: cero librerías, cero coste en el primer pintado.
   ========================================================================== */

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  /* ---------- La portada se contrae ----------
     Arranca a sangre, como un plano de cine, y al bajar el marco se cierra
     hasta los márgenes de la retícula: la película se convierte en página.
     Se recorta con clip-path —no se escala— para que la imagen no se mueva ni
     un píxel de donde estaba mientras se estrecha. */
  .hero__media{
    animation: heroMarco linear both;
    animation-timeline: scroll(root);
    animation-range: 0 92svh;
    will-change: clip-path;
  }
  @keyframes heroMarco{
    0%, 22% { clip-path: inset(0 0 0 0 round 0) }
    100%    { clip-path: inset(0 var(--pad) 0 var(--pad) round 2px) }
  }
  /* el fondo que asoma al cerrarse el marco es el papel de la página */
  .hero{ background: var(--chalk) }

  /* y el titular sube y cede el paso, sin llegar a desaparecer del todo antes
     de que la portada haya salido de pantalla */
  .hero__inner{
    animation: heroSube linear both;
    animation-timeline: scroll(root);
    animation-range: 0 86svh;
  }
  @keyframes heroSube{
    0%, 44% { opacity: 1; translate: 0 0 }
    100%    { opacity: 0; translate: 0 -7vh }
  }

  /* ---------- UN DÍA · los cuatro momentos, apilados ----------
     La sección se vuelve alta y el marco se queda clavado: al bajar, la mañana
     funde en el mediodía, el mediodía en la tarde y la tarde en la noche. Es
     literalmente un día pasando, y ahora que cada imagen tiene su propia hora
     —ver hora.py— el fundido cuenta algo, no es un efecto.

     Debajo de 900 px vuelve la rejilla de cuatro: en un móvil, clavar una
     sección durante tres pantallas es una encerrona, no una idea. */
  @media (min-width: 900px){
    .js .day-reel{
      height: 300svh;
      view-timeline: --dia block;
    }
    .js .day-reel > .day{
      display: block;
      position: sticky;
      top: 0;
      height: 100svh;
      margin: 0;
    }
    .js .day-reel .day figure{
      position: absolute;
      inset: clamp(82px,10.5vh,128px) 0 clamp(40px,6vh,80px);
      margin: 0;
      display: grid;
      grid-template-columns: minmax(0,1.9fr) minmax(0,1fr);
      align-items: stretch;
      gap: clamp(30px,4vw,74px);
      animation: diaPasa linear both;
      animation-timeline: --dia;
    }
    .js .day-reel .day figure .media{
      aspect-ratio: auto;
      height: 100%;
    }
    /* el pie se descuelga al fondo de la columna, a la altura del canto
       inferior de la foto: la línea que forman los dos es lo que sostiene la
       composición mientras el resto se funde */
    .js .day-reel .day figcaption{
      margin: 0;
      align-self: end;
      padding-bottom: clamp(6px,1.2vh,18px);
      max-width: 24ch;
      font-family: var(--f-display);
      font-weight: 300;
      font-size: clamp(1.24rem,1.65vw,1.86rem);
      line-height: 1.28;
      letter-spacing: -.012em;
      color: var(--ink);
      text-wrap: balance;
    }
    .js .day-reel .day__t{
      font-family: var(--f-sans);
      font-size: var(--t-label);
      font-weight: 500;
      letter-spacing: .235em;
      color: var(--ink-52);
      margin-bottom: 20px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    /* la imagen ya no la coloca el paralaje: aquí el encuadre es fijo. Y se
       desactiva el barrido de entrada (`.rm`), que aquí sobra: la imagen ya
       entra fundida con el scroll y los dos efectos se estorbaban. */
    .js .day-reel .day .media img{
      top:0; height:100%;
      clip-path:none !important; scale:none !important; transition:none !important;
    }

    /* Tres curvas, no una. Fuera de su tramo, una animación con `both` se queda
       congelada en el fotograma del extremo: si los cuatro momentos entraran y
       salieran igual, la sección estaría en blanco mientras entra en pantalla
       —antes del primer tramo— y otra vez en blanco al salir. Así que el
       primero ya está puesto antes de empezar, y el último se queda puesto
       después de terminar; solo los de en medio hacen el relevo completo. */
    @keyframes diaEntra{
      0%, 72% { opacity: 1; translate: 0 0 }
      100%    { opacity: 0; translate: 0 -3.2vh }
    }
    @keyframes diaPasa{
      0%   { opacity: 0; translate: 0 3.2vh }
      16%  { opacity: 1; translate: 0 0 }
      80%  { opacity: 1; translate: 0 0 }
      100% { opacity: 0; translate: 0 -3.2vh }
    }
    @keyframes diaQueda{
      0%        { opacity: 0; translate: 0 3.2vh }
      22%, 100% { opacity: 1; translate: 0 0 }
    }
    /* cada momento se queda con su cuarto del recorrido, solapando lo justo
       para que el relevo sea un fundido y no un corte */
    /* `contain` y no `cover`: el tramo `contain` es exactamente aquel en el que
       el carrete llena la ventana entera, o sea justo mientras el marco está
       clavado. Con `cover` el reparto empezaba a contar desde que la sección
       asoma por abajo, y los dos primeros momentos se gastaban antes de que la
       sección estuviera siquiera en pantalla. */
    .js .day-reel .day figure:nth-child(1){ animation-name: diaEntra; animation-range: contain  0%  contain 27% }
    .js .day-reel .day figure:nth-child(2){ animation-range: contain 25%  contain 52% }
    .js .day-reel .day figure:nth-child(3){ animation-range: contain 50%  contain 77% }
    .js .day-reel .day figure:nth-child(4){ animation-name: diaQueda; animation-range: contain 75%  contain 92% }
  }

  /* ---------- Las cifras entran con un barrido ----------
     No un contador girando —eso es de panel de control—: la cifra ya está
     escrita y se descubre de izquierda a derecha, como si alguien pasara la
     mano por encima. */
  .facts .tnum, .specs b{
    animation: barrido linear both;
    animation-timeline: view(block);
    animation-range: entry 18% entry 62%;
  }
  @keyframes barrido{
    from{ clip-path: inset(0 100% 0 0) }
    to  { clip-path: inset(0 0 0 0) }
  }

  /* ---------- El logo de la barra se afina al bajar ---------- */
  .nav__logo{
    animation: logoAfina linear both;
    animation-timeline: scroll(root);
    animation-range: 0 40svh;
  }
  @keyframes logoAfina{ to{ scale: .88 } }
}
}

/* ==========================================================================
   v3 · TRANSICIÓN ENTRE PÁGINAS
   --------------------------------------------------------------------------
   Al pulsar una residencia, su foto NO desaparece para que aparezca otra: la
   misma foto se transforma en la portada de su ficha. No hay corte ni parpadeo
   de recarga. Son dos declaraciones y un nombre repetido en las dos páginas.

   Donde el navegador no lo soporte, navega como siempre. No hay nada que
   comprobar ni ningún JavaScript detrás.
   ========================================================================== */
@view-transition{ navigation: auto }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .40s;
  animation-timing-function: var(--e);
}
/* la foto que viaja manda sobre el resto y va un pelo más despacio: es la que
   el ojo sigue */
::view-transition-group(vt-arc),
::view-transition-group(vt-beach),
::view-transition-group(vt-garden){
  animation-duration: .58s;
  animation-timing-function: var(--e);
  z-index: 3;
}

@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none }
}

/* ---------- La llegada ----------
   La única imagen del conjunto que enseña cómo se entra: la caseta y el
   monolito al anochecer. Va a sangre y abre el capítulo de las tres
   residencias, porque es lo que ve un comprador antes de ver nada más. */
.arrival{margin:0}
.arrival__cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em clamp(16px,2vw,34px);
  margin-top:clamp(16px,1.8vw,26px);
  font-size:var(--t-body);font-weight:300;line-height:1.6;color:var(--ink-70);
}
.arrival__cap .label{flex:none}

/* ==========================================================================
   ENQUIRY FORM  ·  vive dentro de #enquire, que siempre es .dark .on-dark
   ========================================================================== */
.frm{margin-top:clamp(40px,4.6vw,72px)}
.frm__rule{margin:0 0 clamp(32px,3.8vw,54px)}
.frm__head{max-width:62ch}
.frm__t{
  font-family:var(--f-display);font-weight:300;line-height:1.06;
  font-size:var(--t-h3);letter-spacing:-.015em;color:var(--on-dark);
}
.frm__note{margin-top:.7em;font-size:var(--t-body);line-height:1.6;color:var(--on-dark-60)}
.frm__f{margin-top:clamp(26px,3vw,40px)}
.frm__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,22px)}

.f{display:flex;flex-direction:column;gap:9px;min-width:0}
.f--4{grid-column:span 4}
.f--6{grid-column:span 6}
.f--12{grid-column:1/-1}

.f__l{
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark-60);
}
.f__i,.f__s,.f__t{
  -webkit-appearance:none;appearance:none;
  width:100%;min-height:58px;
  font-family:var(--f-sans);font-size:1.0625rem;line-height:1.5;color:var(--on-dark);
  background:var(--fill-1-d);
  border:1px solid transparent;border-radius:14px;
  padding:16px 17px;
  transition:background-color .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e);
}
.f__t{min-height:132px;resize:vertical;padding-top:15px}
.f__i::placeholder,.f__t::placeholder{color:rgba(244,242,238,.42)}
.f__i:hover,.f__s:hover,.f__t:hover{background:var(--fill-2-d)}
.f__i:focus,.f__s:focus,.f__t:focus{
  outline:0;background:var(--fill-2-d);
  border-color:rgba(244,242,238,.5);
  box-shadow:0 0 0 3px rgba(252,251,249,.13);
}
/* el autorrelleno de Chrome pinta amarillo sobre fondo oscuro */
.f__i:-webkit-autofill,.f__i:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--on-dark);
  -webkit-box-shadow:0 0 0 1000px #22262C inset;
  caret-color:var(--on-dark);
}

.f__sw{position:relative}
.f__s{padding-right:46px;cursor:pointer}
.f__s option{background:#1A1D22;color:var(--on-dark)}
.f__ar{
  position:absolute;right:18px;top:50%;width:12px;height:8px;margin-top:-4px;
  fill:none;stroke:var(--on-dark-60);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}

.f__e{
  font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  color:#E8A091;
}
.f.is-bad .f__i,.f.is-bad .f__s,.f.is-bad .f__t{border-color:#C9705F;background:rgba(201,112,95,.10)}

/* ---------- consentimiento y envío ---------- */
.frm__foot{
  margin-top:clamp(22px,2.6vw,32px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(18px,2.4vw,40px);
}
.f__c{
  display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  max-width:52ch;-webkit-tap-highlight-color:transparent;
}
.f__c input{position:absolute;opacity:0;width:0;height:0}
.f__cb{
  flex:none;width:24px;height:24px;margin-top:1px;border-radius:7px;
  background:var(--fill-1-d);border:1px solid var(--line-dark);
  display:grid;place-items:center;
  transition:background-color .25s var(--e),border-color .25s var(--e);
}
.f__cb svg{width:13px;height:10px;fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.7);
  transition:opacity .2s var(--e),transform .28s var(--spring)}
.f__c input:checked+.f__cb{background:var(--on-dark);border-color:var(--on-dark)}
.f__c input:checked+.f__cb svg{opacity:1;transform:scale(1)}
.f__c input:focus-visible+.f__cb{box-shadow:0 0 0 3px rgba(252,251,249,.28)}
.f__ct{font-size:.9375rem;line-height:1.55;color:var(--on-dark-60)}
.f__e--c{flex-basis:100%;margin-top:-6px}

.frm__act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.frm__send{align-self:flex-start}
.frm__send[disabled]{opacity:.55;pointer-events:none}
.frm__fine{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,238,.42)}

.frm__msg{
  margin-top:clamp(20px,2.4vw,30px);
  padding:18px 20px;border-radius:14px;
  background:var(--fill-1-d);border:1px solid var(--line-dark);
  font-size:var(--t-body);line-height:1.6;color:var(--on-dark);
  max-width:70ch;
}
.frm__msg.is-ok{border-color:rgba(160,196,160,.45);background:rgba(160,196,160,.10)}
.frm__msg.is-fail{border-color:rgba(201,112,95,.5);background:rgba(201,112,95,.10)}

/* trampa de spam: fuera de pantalla, nunca enfocable a la vista */
.frm__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

@media (max-width:1100px){
  .f--4{grid-column:span 6}
}
@media (max-width:760px){
  .f--4,.f--6{grid-column:1/-1}
  .frm__foot{flex-direction:column;align-items:stretch}
  .frm__act{align-items:stretch}
  .frm__send{align-self:stretch;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .f__i,.f__s,.f__t,.f__cb,.f__cb svg{transition:none}
}

/* ==========================================================================
   NAV · desplegable de residencias + acceso desde el hero
   ========================================================================== */
.nav__group{position:relative;display:flex;align-items:center}
.nav__group>a{display:inline-flex;align-items:center;gap:7px}
.nav__car{width:9px;height:6px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--e)}
.nav__group:hover .nav__car,.nav__group:focus-within .nav__car{transform:rotate(180deg)}

.nav__drop{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  padding-top:18px;opacity:0;pointer-events:none;
  transition:opacity .3s var(--e),transform .35s var(--e);z-index:110;
}
.nav__group:hover .nav__drop,.nav__group:focus-within .nav__drop{
  opacity:1;pointer-events:auto;transform:translate(-50%,0);
}
.nav__drop-in{
  min-width:286px;padding:10px;border-radius:18px;
  background:var(--chalk);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(20,22,26,.18);
}
.nav__menu .nav__drop-in a{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;
  padding:13px 14px;border-radius:12px;border-bottom:0;
  font-size:1.0625rem;letter-spacing:0;text-transform:none;font-weight:400;
  transition:background-color .25s var(--e);
}
.nav__menu .nav__drop-in a:hover{background:var(--fill-1);border-bottom:0}
.nav__drop-n{
  font-size:var(--t-label);letter-spacing:.14em;color:var(--ink-52);
  font-variant-numeric:tabular-nums;
}
.nav__drop-in b{font-weight:500}
.nav__drop-in em{
  grid-column:2;font-style:normal;margin-top:3px;
  font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-52);
}
@media (max-width:860px){.nav__drop{display:none}}

/* --- hero: las tres residencias, línea editorial --- */
.hero__res{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(26px,3.4vw,48px);
  border-top:1px solid rgba(252,251,249,.30);
}
.hero__res a{
  display:flex;flex-direction:column;gap:9px;color:var(--on-dark);
  padding:clamp(16px,1.9vw,26px) clamp(18px,2vw,28px) 6px 0;
  transition:opacity .3s var(--e);
}
.hero__res a+a{border-left:1px solid rgba(252,251,249,.16);padding-left:clamp(18px,2vw,28px)}
.hero__res-meta{opacity:.66;letter-spacing:.2em}
.hero__res-name{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-display);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(1.35rem,1.9vw,1.95rem);line-height:1.05;
}
.hero__res-arw{
  width:20px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--e),transform .35s var(--e);
}
.hero__res a:hover .hero__res-arw,.hero__res a:focus-visible .hero__res-arw{opacity:.9;transform:none}
.hero__res a:hover{opacity:.92}
.hero__res a:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(252,251,249,.35);border-radius:8px}
@media (max-width:700px){
  .hero__res{grid-template-columns:1fr;border-top:0}
  .hero__res a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;
    padding:13px 2px;border-top:1px solid rgba(252,251,249,.22)}
  .hero__res a+a{border-left:0;padding-left:2px}
  .hero__res-meta{order:2}
  .hero__res-arw{display:none}
}
@media (prefers-reduced-motion:reduce){.hero__res-arw{transition:none}}

/* --- drawer: número y tipo sobre cada residencia --- */
/* --- drawer ordenado: jerarquía clara --- */
.drawer{overflow-y:auto;padding-top:90px;padding-bottom:34px;justify-content:center;gap:6px}
.drawer a{font-size:clamp(1.7rem,6.2vw,2.7rem)}
.drawer__lab{margin:22px 0 4px;font-size:.625rem;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-52)}
.drawer a.drawer__res{
  font-size:clamp(1.35rem,5vw,1.9rem);line-height:1.15;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;border-top:1px solid var(--line-soft);min-height:0;
}
.drawer a.drawer__res:last-of-type{border-bottom:1px solid var(--line-soft);margin-bottom:10px}
.drawer__res .label{margin:0;color:var(--ink-52);letter-spacing:.14em;font-size:.5625rem;
  text-align:right;flex:none}

/* --- hero compacto en móvil: todo cabe en una pantalla --- */
@media (max-width:700px){
  .hero__inner{padding-top:92px}                     /* el eyebrow ya no roza el logo */
  .hero__proof{display:none}
  .hero__cue{display:none}
  .hero .display{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .hero:lang(ru) .display,
  :lang(ru) .hero .display{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .hero__sub{font-size:.9375rem;line-height:1.5}
  .hero__foot{margin-top:.4em}
  .hero__res{margin-top:16px}
  .hero__res a{padding:9px 2px;gap:10px}
  .hero__res .hero__res-name{font-size:1.1rem}
  .hero__res .hero__res-meta{font-size:.5625rem;letter-spacing:.16em}
}
@media (max-width:700px) and (max-height:700px){
  .hero__sub{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
}

/* --- header en móvil: se retira al bajar, vuelve al subir --- */
@media (max-width:860px){
  .nav{transition:background-color .5s var(--e),color .5s var(--e),padding .5s var(--e),
       border-color .5s var(--e),transform .45s var(--e)}
  .nav.is-away{transform:translateY(-100%)}
}
@media (prefers-reduced-motion:reduce){
  .nav{transition:none}
}