/* ═══════════════════════════════════════════════════════════════════
   VALIA · DUBAI CREEK HARBOUR — Palm Signature

   Piel Apple sobre paleta Emaar. Dos registros y solo dos:
     · CLARO   — blanco y gris de sistema, texto tinta. El de los datos.
     · OSCURO  — azul marino del folleto. El de las escenas.
   Nada intermedio: alternarlos es lo que da el ritmo.

   El azul de acción (#0071E3) es de Apple y no de Emaar a propósito —
   es el único color que dice «pulsa aquí» sin que haya que explicarlo.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Emaar · muestreado del brochure ───────────────────────────── */
  --navy:      #0E2A5C;
  --navy-deep: #071B3D;
  --navy-mid:  #1B4487;
  --sky:       #DCE6F5;
  --sky-pale:  #F0F5FC;

  /* ── neutros de sistema ────────────────────────────────────────── */
  --ink:       #1D1D1F;
  --ink-2:     #6E6E73;
  --ink-3:     #86868B;
  --surface:   #FFFFFF;
  --surface-2: #F5F5F7;
  --hair:      rgba(0,0,0,.12);
  --hair-lt:   rgba(255,255,255,.18);

  /* ── acción ────────────────────────────────────────────────────── */
  --blue:      #0071E3;
  --blue-hi:   #0077ED;

  /* CONTRASTE — medido, no estimado (WCAG 2.1, ratio de luminancia):
       #0071E3 sobre blanco ......... 4,70:1  texto normal AA ✓
       blanco sobre #0071E3 ......... 4,70:1  botón sólido AA ✓
       #6E6E73 sobre #F5F5F7 ........ 4,66:1  cuerpo secundario AA ✓
       #0E2A5C sobre #DCE6F5 ........ 11,1:1  AAA ✓
       #86868B solo para ≥18,66px o texto desactivado.               */

  /* ── tipografía ────────────────────────────────────────────────── */
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --f-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Inter", "Segoe UI", Roboto, system-ui, sans-serif;

  --t-hero:  clamp(2.75rem, 8vw, 5.5rem);
  --t-h2:    clamp(2rem, 4.6vw, 3.5rem);
  --t-h3:    clamp(1.375rem, 2.4vw, 1.75rem);
  --t-lead:  clamp(1.125rem, 1.7vw, 1.5rem);
  --t-body:  1.0625rem;
  --t-sm:    .875rem;
  --t-xs:    .75rem;

  /* ── ritmo · escala de 8 ───────────────────────────────────────── */
  --sp-1:.5rem; --sp-2:1rem;  --sp-3:1.5rem; --sp-4:2rem;
  --sp-6:3rem;  --sp-8:4rem;  --sp-12:6rem;  --sp-16:8rem;

  --wrap:  1120px;
  --wrap-n: 740px;
  --nav-h: 52px;
  --radius: 18px;
  --radius-lg: 28px;

  /* ── movimiento ────────────────────────────────────────────────── */
  --ease:     cubic-bezier(.28,.11,.32,1);   /* la curva de Apple */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur:      600ms;
  --dur-fast: 260ms;

  --z-sticky:40; --z-nav:60; --z-lb:100;
}

/* ═══ DOCTRINA DE MOVIMIENTO ═══════════════════════════════════════
   Heredada de The Archive y reescrita para esta piel. Auditable:

   1. Dos primitivas y solo dos — el ASCENSO (24px + opacidad) al
      entrar en pantalla, y el EMPUJE del hero. Nada rota, nada rebota,
      ningún easing hace overshoot.

      Sobre el empuje: la regla original decía «ninguna fotografía
      escala». Se levanta A PROPÓSITO y solo para el hero, porque no
      escala sola — la mueve el scroll, fotograma a fotograma, y se
      detiene en cuanto el visitante se detiene. Una imagen que se
      mueve por su cuenta es ruido; una que responde a la mano es
      control. Fuera del hero, la regla sigue en pie: ninguna
      fotografía de la página escala, ni al pasar el ratón salvo las
      teselas de la galería, que es una afordancia de «esto se abre».
   2. El estado en reposo del CSS es SIEMPRE el estado final. Si no hay
      JS, si falla el IntersectionObserver o si el visitante pide menos
      movimiento, la página se ve entera. No hay nada que apagar.
   3. En #residences y #payment no se anima ni una cifra. Un número que
      aparece tarde es un número en el que no se confía.
   4. El scrub del hero jamás bloquea el primer paint: el póster está
      pintado antes de que se cargue el primer fotograma.
   ═══════════════════════════════════════════════════════════════════ */

/* ── reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x:hidden en body lo convierte en contenedor de scroll y
   rompe position:sticky EN SILENCIO — y aquí el hero entero es sticky.
   clip recorta sin ese efecto secundario. */
html,body{ overflow-x:clip; }
@supports not (overflow:clip){ html,body{ overflow-x:hidden; } }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scroll-padding-block-start:var(--nav-h);
}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font:400 var(--t-body)/1.5 var(--f-text);
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:target{ scroll-margin-block-start:calc(var(--nav-h) + 1rem); }
img,picture,svg,canvas,video{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; font-family:var(--f-display);
             letter-spacing:-.022em; line-height:1.07; }
p,ul,ol{ margin:0; }
ul{ list-style:none; padding:0; }
table{ border-collapse:collapse; width:100%; }

.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:50%; top:-100px; transform:translateX(-50%);
  z-index:200; background:var(--ink); color:#fff; padding:.75rem 1.25rem;
  border-radius:0 0 12px 12px; font-size:var(--t-sm);
}
.skip:focus{ top:0; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px;
                border-radius:4px; }

/* ═══ 0 · NAV ══════════════════════════════════════════════════════
   La barra de Apple: 52px, translúcida, con un pelo de separación y
   nada más. El desenfoque es la única textura que se permite. */
.nav{
  position:fixed; inset:0 0 auto; z-index:var(--z-nav);
  height:var(--nav-h);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav{ background:rgba(255,255,255,.62);
        -webkit-backdrop-filter:saturate(180%) blur(20px);
        backdrop-filter:saturate(180%) blur(20px); }
}
.nav.is-stuck{ border-bottom-color:var(--hair); }

.nav__in{
  max-width:var(--wrap); height:100%; margin-inline:auto;
  padding-inline:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-3);
}
.nav__brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav__logo{ width:88px; height:auto; }
.nav__div{ width:1px; height:14px; background:var(--hair); }
.nav__proj{ font-size:var(--t-sm); font-weight:600; letter-spacing:-.01em; }

.nav__links{ display:flex; gap:var(--sp-3); margin-inline:auto;
             font-size:var(--t-xs); color:var(--ink); }
.nav__links a{ opacity:.82; transition:opacity var(--dur-fast) var(--ease); }
.nav__links a:hover{ opacity:1; }
@media (max-width:1000px){ .nav__links{ display:none; } }

.nav__right{ display:flex; align-items:center; gap:var(--sp-2); flex:none;
             margin-left:auto; }
@media (min-width:1001px){ .nav__right{ margin-left:0; } }

/* ── selector de idioma ───────────────────────────────────────── */
.lang{ position:relative; }
.lang__btn{
  display:flex; align-items:center; gap:.3rem;
  font-size:var(--t-xs); font-weight:500; color:var(--ink);
  padding:.35rem .5rem; border-radius:8px; opacity:.82;
}
.lang__btn:hover{ opacity:1; background:rgba(0,0,0,.05); }
.lang__menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:160px;
  background:rgba(255,255,255,.9); border:1px solid var(--hair);
  border-radius:14px; padding:.35rem; box-shadow:0 12px 34px rgba(0,0,0,.14);
  overflow:hidden;
}
@supports (backdrop-filter:blur(1px)){
  .lang__menu{ -webkit-backdrop-filter:saturate(180%) blur(24px);
               backdrop-filter:saturate(180%) blur(24px); }
}
.lang__menu button{
  display:block; width:100%; text-align:left; padding:.5rem .7rem;
  font-size:var(--t-sm); border-radius:9px;
}
.lang__menu button:hover{ background:rgba(0,0,0,.06); }
.lang__menu [aria-selected="true"]{ color:var(--blue); font-weight:600; }

/* ── botones ──────────────────────────────────────────────────────
   Pill de Apple: sin sombra, sin borde, sin transform. El hover solo
   cambia luminancia — cualquier otra cosa es ruido. */
/* El atributo hidden lo pone la UA con display:none, pero cualquier
   regla de autor que declare display gana. .btn declara inline-flex, así
   que el botón de Zoom —que nace hidden y lo enciende el JS— se veía
   muerto en el primer pintado y para siempre si el JS no llega. */
[hidden]{ display:none !important; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--blue); color:#fff;
  font-size:var(--t-body); font-weight:400; letter-spacing:-.01em;
  padding:.75rem 1.35rem; border-radius:980px;
  transition:background var(--dur-fast) var(--ease);
  text-align:center;
}
.btn:hover{ background:var(--blue-hi); }
.btn--sm{ font-size:var(--t-xs); padding:.4rem .95rem; }
/* botón solo icono. 44px es el mínimo táctil, no una estética */
.btn--icon{ width:44px; height:44px; padding:0; flex:none; }
.btn--lg{ font-size:1.0625rem; padding:.95rem 1.9rem; }
.btn--ghost{
  background:transparent; color:var(--blue);
  box-shadow:inset 0 0 0 1px currentColor;
}
.btn--ghost:hover{ background:rgba(0,113,227,.08); }
.btn--onDark{ background:#fff; color:var(--navy-deep); }
.btn--onDark:hover{ background:#EDF2FA; }
.btn--ghostDark{ background:transparent; color:#fff;
                 box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.btn--ghostDark:hover{ background:rgba(255,255,255,.12); }

/* enlace-flecha de Apple */
.alink{ color:var(--blue); font-size:var(--t-body); display:inline-flex;
        align-items:center; gap:.28rem; }
.alink::after{ content:"›"; font-size:1.2em; line-height:1;
               transform:translateY(-.05em); }
.alink:hover{ text-decoration:underline; }

/* ═══ ESTRUCTURA DE SECCIÓN ════════════════════════════════════════ */
.sec{ padding-block:var(--sp-16); position:relative; }
.sec--tight{ padding-block:var(--sp-12); }
.sec--flush{ padding-block:0; }
.sec--gray{ background:var(--surface-2); }
.sec--navy{ background:var(--navy); color:#fff; }
.sec--navy-deep{ background:var(--navy-deep); color:#fff; }
.sec--sky{ background:var(--sky-pale); }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-3); }
.wrap--narrow{ max-width:var(--wrap-n); }
.wrap--wide{ max-width:1440px; }

.kicker{
  font-size:var(--t-sm); font-weight:600; color:var(--blue);
  letter-spacing:.004em; margin-bottom:var(--sp-1);
}
/* Todo lo que va sobre fondo oscuro comparte estas reglas. El CTA final
   (.adviser) tiene que estar en la lista: sin él, .lead y .checks li se
   quedaban con --ink-2 —gris oscuro— sobre azul marino, que es texto
   ilegible en la sección donde se pide el contacto. */
.sec--navy .kicker,.sec--navy-deep .kicker,
.bleed__card .kicker,.adviser .kicker{ color:#7FB3F5; }

.h2{ font-size:var(--t-h2); max-width:19ch; }
.h2--center{ margin-inline:auto; text-align:center; }
.h3{ font-size:var(--t-h3); }
.lead{
  font-size:var(--t-lead); line-height:1.42; color:var(--ink-2);
  max-width:52ch; margin-top:var(--sp-2); letter-spacing:-.015em;
}
.sec--navy .lead,.sec--navy-deep .lead,.adviser .lead,
.bleed__card .lead{ color:rgba(255,255,255,.78); }
.lead--center{ margin-inline:auto; text-align:center; }
.prose p + p{ margin-top:var(--sp-2); }
.prose{ color:var(--ink-2); max-width:58ch; }
.sec--navy .prose,.sec--navy-deep .prose,.adviser .prose{ color:rgba(255,255,255,.76); }

.note{ font-size:var(--t-xs); color:var(--ink-3); margin-top:var(--sp-2);
       max-width:70ch; }
.sec--navy .note,.sec--navy-deep .note,.adviser .note{ color:rgba(255,255,255,.55); }

/* ═══ 1 · HERO ═════════════════════════════════════════════════════
   El fotograma se pinta en un <canvas> y el scroll lo recorre. La
   sección mide 300vh solo cuando hay JS: sin él, el póster ocupa una
   pantalla y ya está. */
.hero{ position:relative; background:var(--navy-deep); height:100vh; height:100svh; }
/* El recorrido del empuje. Lo pone JS y no el CSS: si no hay motor
   —sin JS, reduced-motion, móvil— el hero mide una pantalla y ya. */
.hero.is-scrub{ height:220vh; }

/* El texto NO va centrado sobre el cielo. Va abajo, sobre la banda del
   skyline y el agua, que ya es oscura de por sí: así el titular pasa de
   3:1 a 9:1 sin tener que apagar la hora dorada con un velo gris.
   Oscurecer media fotografía para poder escribir encima es resolver el
   problema por el lado caro. */
.hero__sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:grid; align-items:end; justify-items:start;
}
/* El render es 1,6:1 y el hero suele ser 16:10 o 16:9: apenas hay
   recorte. El encuadre se desplaza un poco a la derecha para que la
   torre no quede pegada al borde en pantallas muy anchas. */
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:62% 50%;
}
/* EL EMPUJE. La escala la escribe JS en cada frame; el origen y la
   promoción a capa propia viven aquí para que el compositor haga el
   trabajo y no se repinte nada. transform-origin cae sobre la torre:
   así el movimiento se lee como acercarse al edificio, no como un
   zoom plano sobre el centro del encuadre. */
.hero.is-scrub .hero__bg img{
  transform-origin:70% 46%;
  will-change:transform;
  backface-visibility:hidden;
}

/* VELO. Dos direcciones, cada una con su motivo:

   · LATERAL — el titular cae sobre el resplandor del atardecer, junto
     al Burj, que es la zona más clara de todo el render: ahí el blanco
     se quedaba en 1,5:1. El degradado horizontal oscurece la columna
     de texto y se apaga al 62%, antes de tocar la torre, que conserva
     su corona encendida y el reflejo en el agua.
   · VERTICAL — asienta la fila de cifras al pie y da un punto de apoyo
     a la nav. El cielo del centro se deja intacto: es la fotografía. */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,14,32,.84) 0%, rgba(4,14,32,.62) 34%,
                           rgba(4,14,32,0) 64%),
    linear-gradient(180deg, rgba(4,14,32,.20) 0%, rgba(4,14,32,0) 22%,
                            rgba(4,14,32,0) 46%, rgba(4,14,32,.30) 70%,
                            rgba(4,14,32,.70) 88%, rgba(4,14,32,.84) 100%);
}

/* Anclado abajo a la izquierda, sobre el agua y el skyline. Es la única
   zona de este plano que es oscura de verdad, y así la torre se queda
   libre a la derecha en vez de tener texto encima. */
.hero__copy{
  position:relative; z-index:2; text-align:left; color:#fff;
  width:min(100%, calc(var(--wrap) + 2 * var(--sp-3)));
  margin-inline:auto; padding-inline:var(--sp-3); max-width:none;
  padding-bottom:clamp(6.5rem, 15vh, 9.5rem);
}
.hero__mark{ font-size:var(--t-hero); font-weight:600; letter-spacing:-.03em;
             line-height:1; }
.hero__sub{
  margin-top:var(--sp-2); font-size:clamp(.8rem,1.5vw,1rem);
  font-weight:500; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.hero__tag{
  margin-top:var(--sp-3); font-size:var(--t-lead); font-weight:400;
  color:rgba(255,255,255,.94); letter-spacing:-.015em; max-width:22ch;
}
.hero__act{ margin-top:var(--sp-4); display:flex; gap:.75rem;
            flex-wrap:wrap; }

.hero__facts{
  position:absolute; left:0; right:0; bottom:clamp(1.5rem,4.5vh,2.75rem);
  z-index:2; width:min(100%, calc(var(--wrap) + 2 * var(--sp-3)));
  margin-inline:auto; padding-inline:var(--sp-3);
  display:flex; gap:clamp(1.5rem,5vw,3.5rem); color:#fff;
}
.hero__facts b{ display:block; font-size:clamp(1rem,2.2vw,1.5rem);
                font-weight:600; letter-spacing:-.02em; }
.hero__facts span{ display:block; font-size:var(--t-xs);
                   color:rgba(255,255,255,.72); margin-top:.15rem; }


/* ═══ ASCENSO AL ENTRAR ════════════════════════════════════════════
   Estado en reposo = estado final. La clase .is-out solo la pone JS
   cuando de verdad va a animar, así que sin JS no hay nada oculto. */
@media (prefers-reduced-motion:no-preference){
  [data-rev].is-out{ opacity:0; transform:translate3d(0,24px,0); }
  [data-rev]{
    opacity:1; transform:none;
    transition:opacity var(--dur) var(--ease-out) var(--d,0ms),
               transform var(--dur) var(--ease-out) var(--d,0ms);
  }
}

/* ═══ MEDIA ════════════════════════════════════════════════════════ */
.figure{ margin:0; }
.figure img{ width:100%; border-radius:var(--radius); }
.figure--flat img{ border-radius:0; }
.figure figcaption{ font-size:var(--t-xs); color:var(--ink-3);
                    margin-top:.6rem; }
.sec--navy figcaption,.sec--navy-deep figcaption{ color:rgba(255,255,255,.55); }

/* pareja y trío */
.duo{ display:grid; gap:var(--sp-2); }
.trio{ display:grid; gap:var(--sp-2); }
@media (min-width:760px){
  .duo{ grid-template-columns:1fr 1fr; }
  .trio{ grid-template-columns:repeat(3,1fr); }
}

/* pieza a sangre con tarjeta encima */
.bleed{ position:relative; min-height:min(88vh,760px); display:grid;
        align-items:end; overflow:hidden; }
.bleed__bg{ position:absolute; inset:0; z-index:0; }
.bleed__bg img{ width:100%; height:100%; object-fit:cover; }
.bleed::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(4,14,32,.06) 0%,
                             rgba(4,14,32,.30) 46%, rgba(4,14,32,.82) 100%);
}
.bleed__card{
  position:relative; z-index:2; color:#fff;
  max-width:var(--wrap); width:100%; margin-inline:auto;
  padding:var(--sp-3) var(--sp-3) var(--sp-8);
}
.bleed__card .h2{ color:#fff; }

/* media dentro de caja, esquinas redondeadas — el otro registro Apple */
.showcase{ display:grid; gap:var(--sp-4); align-items:center; }
@media (min-width:900px){
  .showcase{ grid-template-columns:1fr 1fr; gap:var(--sp-8); }
  .showcase--flip .showcase__media{ order:2; }
}
.showcase__media img{ width:100%; border-radius:var(--radius-lg); }

/* ═══ 4 · CONECTIVIDAD ═════════════════════════════════════════════ */
.times{ display:grid; gap:var(--sp-2); margin-top:var(--sp-6);
        grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .times{ grid-template-columns:repeat(4,1fr); } }
.time{
  background:var(--surface); border-radius:var(--radius);
  padding:var(--sp-3); text-align:center;
}
.sec--gray .time{ background:var(--surface); }
.time b{ display:block; font-family:var(--f-display); font-size:2.25rem;
         font-weight:600; letter-spacing:-.03em; color:var(--navy); }
.time b em{ font-style:normal; font-size:.95rem; font-weight:500;
            color:var(--ink-2); letter-spacing:-.01em; margin-left:.15rem; }
.time span{ display:block; font-size:var(--t-sm); color:var(--ink-2);
            margin-top:.35rem; }

/* ═══ 12 · AMENIDADES ══════════════════════════════════════════════ */
.amen3{ display:grid; gap:var(--sp-4); margin-top:var(--sp-6); }
@media (min-width:760px){ .amen3{ grid-template-columns:repeat(3,1fr); } }
.amen3 img{ width:100%; border-radius:var(--radius); aspect-ratio:16/11;
            object-fit:cover; }
.amen3 h3{ font-size:1.25rem; margin-top:var(--sp-2); }
.amen3 p{ color:var(--ink-2); margin-top:.4rem; font-size:var(--t-sm);
          line-height:1.5; }
.sec--navy .amen3 p{ color:rgba(255,255,255,.72); }

/* lista de amenidades, dos columnas con pelo */
.amen{ columns:2; column-gap:var(--sp-6); margin-top:var(--sp-4);
       font-size:var(--t-sm); }
@media (min-width:900px){ .amen{ columns:3; } }
.amen li{ break-inside:avoid; padding:.55rem 0;
          border-bottom:1px solid var(--hair); color:var(--ink-2); }
.sec--navy .amen li{ border-bottom-color:var(--hair-lt);
                     color:rgba(255,255,255,.8); }

/* ═══ 15 · RESIDENCIAS · control segmentado ════════════════════════
   El patrón nativo de Apple, y aquí además resuelve una tabla de 4×5
   que a 375px no cabe de ninguna manera honesta. */
.seg{
  display:inline-flex; background:rgba(120,120,128,.12);
  border-radius:980px; padding:2px; margin-top:var(--sp-4);
  max-width:100%; overflow:auto; scrollbar-width:none;
}
.seg::-webkit-scrollbar{ display:none; }
.seg button{
  flex:1 0 auto; padding:.5rem 1.15rem; border-radius:980px;
  font-size:var(--t-sm); font-weight:500; color:var(--ink);
  white-space:nowrap; transition:background var(--dur-fast) var(--ease);
}
.seg [aria-selected="true"]{
  background:var(--surface); font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.04);
}
/* En móvil las cuatro tipologías caben repartiéndose el ancho. Un
   segmentado que hay que arrastrar esconde opciones: a 375px el
   4 dormitorios quedaba fuera de pantalla, y es el más caro. */
@media (max-width:520px){
  .seg{ display:flex; width:100%; align-items:stretch; }
  .seg button{
    flex:1 1 0; min-width:0; padding:.45rem .3rem;
    font-size:.75rem; line-height:1.2;
    /* «2 dormitorios» y «2 quartos» no caben en 81px de una línea:
       antes que recortarlas o sacarlas de la pastilla, que envuelvan */
    white-space:normal; overflow-wrap:anywhere;
  }
}

.typanel{ margin-top:var(--sp-4); }
.typanel[hidden]{ display:none; }

/* ficha de tipología, ritmo de las Tech Specs */
.spec{ border-top:1px solid var(--hair); }
.spec div{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--sp-2); padding:.9rem 0;
  border-bottom:1px solid var(--hair); font-size:var(--t-body);
}
.spec dt,.spec .k{ color:var(--ink-2); }
.spec dd,.spec .v{ margin:0; font-weight:600; text-align:right;
                   letter-spacing:-.015em; }
.spec .v--big{ font-size:1.5rem; font-family:var(--f-display);
               letter-spacing:-.03em; }

.tywrap{ display:grid; gap:var(--sp-4); align-items:start; }
@media (min-width:860px){ .tywrap{ grid-template-columns:1fr 1fr;
                                   gap:var(--sp-8); } }

/* tabla completa — la versión ancha, para quien la quiera entera */
.tablewrap{ overflow-x:auto; margin-top:var(--sp-4);
            border-radius:var(--radius); }
.table{ font-size:var(--t-sm); min-width:520px; }
.table th,.table td{ padding:.85rem 1rem; text-align:right;
                     border-bottom:1px solid var(--hair); }
.table thead th{ font-weight:600; color:var(--ink-2); font-size:var(--t-xs);
                 text-transform:uppercase; letter-spacing:.04em;
                 border-bottom-color:var(--hair); }
.table th:first-child,.table td:first-child{ text-align:left; }
.table tbody th{ font-weight:600; }
.table tfoot td,.table tfoot th{ font-weight:600; border-bottom:0; }

/* ═══ 16 · PLAN DE PAGO ════════════════════════════════════════════ */
.plan{ margin-top:var(--sp-6); border-top:1px solid var(--hair); }
.plan__row{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-2);
  align-items:baseline; padding:.9rem 0;
  border-bottom:1px solid var(--hair);
}
.plan__pct{ font-family:var(--f-display); font-size:1.25rem; font-weight:600;
            letter-spacing:-.03em; min-width:3.2ch; }
.plan__what{ color:var(--ink-2); font-size:var(--t-sm); }
.plan__when{ font-size:var(--t-sm); font-weight:500; white-space:nowrap; }
.plan__row--final .plan__pct{ color:var(--blue); }
.plan__row--final .plan__when{ font-weight:600; }

/* barra de reparto */
.split{ display:flex; height:6px; border-radius:980px; overflow:hidden;
        margin-top:var(--sp-4); background:var(--surface-2); }
.split i{ display:block; }
.split i:nth-child(1){ background:var(--navy); }
.split i:nth-child(2){ background:var(--blue); }
.splitkey{ display:flex; gap:var(--sp-3); margin-top:.7rem;
           font-size:var(--t-xs); color:var(--ink-2); flex-wrap:wrap; }
.splitkey span{ display:flex; align-items:center; gap:.4rem; }
.splitkey i{ width:9px; height:9px; border-radius:50%; }
.splitkey span:nth-child(1) i{ background:var(--navy); }
.splitkey span:nth-child(2) i{ background:var(--blue); }

/* ═══ 18 · PROMOTOR ════════════════════════════════════════════════ */
.stats{ display:grid; gap:var(--sp-3); margin-top:var(--sp-6);
        grid-template-columns:repeat(2,1fr); }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(3,1fr); } }
.stats li{ padding:var(--sp-3) 0; border-top:1px solid var(--hair-lt); }
.stats b{ display:block; font-family:var(--f-display);
          font-size:clamp(1.5rem,3vw,2.125rem); font-weight:600;
          letter-spacing:-.03em; }
.stats span{ display:block; font-size:var(--t-sm);
             color:rgba(255,255,255,.66); margin-top:.3rem; }

/* ═══ CTA · formulario ═════════════════════════════════════════════ */
.ctagrid{ display:grid; gap:var(--sp-6); align-items:start; }
@media (min-width:900px){ .ctagrid{ grid-template-columns:1fr 1fr;
                                    gap:var(--sp-8); } }
.checks{ margin-top:var(--sp-3); display:grid; gap:.7rem; }
.checks li{ display:flex; gap:.65rem; align-items:flex-start;
            font-size:var(--t-body); color:var(--ink-2); }
.checks li::before{
  content:""; flex:none; width:20px; height:20px; margin-top:.1rem;
  border-radius:50%; background:var(--blue);
  -webkit-mask:var(--tick) center/12px no-repeat;
          mask:var(--tick) center/12px no-repeat;
}
:root{ --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 17.2 4.4 12l1.7-1.7 3.5 3.5 8.3-8.3L19.6 7z'/%3E%3C/svg%3E"); }
.sec--navy .checks li,.sec--navy-deep .checks li,
.adviser .checks li{ color:rgba(255,255,255,.86); }
.sec--navy .checks li::before,
.sec--navy-deep .checks li::before,
.adviser .checks li::before{ background:#7FB3F5; }

.card{
  background:var(--surface); border-radius:var(--radius-lg);
  padding:var(--sp-4); box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.card__t{ font-size:1.375rem; }
.card__s{ color:var(--ink-2); font-size:var(--t-sm); margin-top:.4rem; }
.tally{ margin-top:var(--sp-3); min-height:420px; }
.tally iframe{ width:100%; border:0; }
.card__fine{ font-size:var(--t-xs); color:var(--ink-3);
             margin-top:var(--sp-2); line-height:1.5; }
.card__ns{ font-size:var(--t-sm); margin-top:var(--sp-2); }
.card__ns a{ color:var(--blue); }

/* CTA final sobre imagen */
.adviser{ position:relative; overflow:hidden; background:var(--navy-deep); }
.adviser__bg{ position:absolute; inset:0; z-index:0; }
/* La aérea del masterplan es CLARA —arena, agua, azoteas blancas— y a
   .42 el cuerpo de texto blanco se quedaba en 2:1 largo. Baja la foto y
   añade un velo que apoya justo donde va la columna de texto. */
.adviser__bg img{ width:100%; height:100%; object-fit:cover; opacity:.26; }
.adviser::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(7,27,61,.92) 0%, rgba(7,27,61,.72) 46%,
                            rgba(7,27,61,.42) 100%),
    linear-gradient(180deg, rgba(7,27,61,.55) 0%, rgba(7,27,61,0) 30%);
}
.adviser__in{ position:relative; z-index:1; color:#fff; }
.adviser__act{ margin-top:var(--sp-4); display:flex; gap:.75rem;
               flex-wrap:wrap; align-items:center; }
.adviser__alt{ font-size:var(--t-sm); color:rgba(255,255,255,.72);
               width:100%; margin-top:.4rem; }
.adviser__alt a{ color:#7FB3F5; }
.adviser__fine{ font-size:var(--t-xs); color:rgba(255,255,255,.55);
                margin-top:var(--sp-3); max-width:56ch; }

/* ═══ 19 · GALERÍA ═════════════════════════════════════════════════ */
.grid{
  max-width:1440px; margin:var(--sp-6) auto 0; padding-inline:var(--sp-3);
  display:grid; gap:var(--sp-2); grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px){ .grid{ grid-template-columns:repeat(4,1fr); } }
.tile{
  position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/3; display:block; width:100%;
}
.tile img{ width:100%; height:100%; object-fit:cover;
           transition:transform 700ms var(--ease-out); }
@media (prefers-reduced-motion:no-preference){
  .tile:hover img{ transform:scale(1.03); }
}
.tile__cap{
  position:absolute; inset:auto 0 0; padding:2.5rem .9rem .8rem;
  font-size:var(--t-xs); color:#fff; text-align:left;
  background:linear-gradient(180deg,transparent,rgba(4,14,32,.75));
}

/* ═══ LIGHTBOX ═════════════════════════════════════════════════════ */
.lb{ position:fixed; inset:0; z-index:var(--z-lb);
     background:rgba(0,0,0,.94); display:grid; place-items:center; }
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; max-width:94vw; max-height:88vh; text-align:center; }
.lb__fig img{ max-width:94vw; max-height:80vh; width:auto; height:auto;
              object-fit:contain; border-radius:8px; margin-inline:auto; }
@media (prefers-reduced-motion:no-preference){
  .lb__fig img.is-fresh{ animation:lbin 420ms var(--ease-out) both; }
}
@keyframes lbin{ from{ opacity:.35; } to{ opacity:1; } }
.lb__fig figcaption{ color:rgba(255,255,255,.7); font-size:var(--t-sm);
                     margin-top:var(--sp-2); }
.lb__close,.lb__nav{
  position:absolute; color:#fff; width:48px; height:48px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.10);
  transition:background var(--dur-fast) var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,255,255,.2); }
.lb__close{ top:1rem; right:1rem; }
.lb__nav{ top:50%; transform:translateY(-50%); }
.lb__nav--prev{ left:1rem; }
.lb__nav--next{ right:1rem; }

/* ═══ STICKY CTA (móvil) ═══════════════════════════════════════════ */
.sticky{
  position:fixed; left:50%; bottom:1rem; transform:translate(-50%,150%);
  z-index:var(--z-sticky); width:min(560px,calc(100% - 2rem));
  display:flex; align-items:center; gap:var(--sp-2);
  padding:.6rem .6rem .6rem 1.1rem; border-radius:980px;
  background:rgba(255,255,255,.82); border:1px solid var(--hair);
  box-shadow:0 8px 30px rgba(0,0,0,.16);
  transition:transform var(--dur) var(--ease); visibility:hidden;
}
@supports (backdrop-filter:blur(1px)){
  .sticky{ -webkit-backdrop-filter:saturate(180%) blur(20px);
           backdrop-filter:saturate(180%) blur(20px); }
}
.sticky.is-on{ transform:translate(-50%,0); visibility:visible; }
.sticky__txt{ font-size:var(--t-sm); line-height:1.25; }
.sticky__txt b{ display:block; font-weight:600; letter-spacing:-.015em; }
.sticky__txt span{ color:var(--ink-2); font-size:var(--t-xs); }
/* el grupo de acciones va a la derecha; dentro, los botones no se
   encogen. Antes el margin-left:auto colgaba del .btn y con dos
   botones habría separado el primero del segundo. */
.sticky__act{ margin-left:auto; display:flex; align-items:center; gap:.4rem; }
.sticky__act .btn{ flex:none; }
.sticky__act .btn--sm{ min-height:44px; }
@media (min-width:1001px){ .sticky{ display:none; } }

/* ═══ PIE ══════════════════════════════════════════════════════════ */
.foot{ background:var(--surface-2); color:var(--ink-2);
       font-size:var(--t-xs); padding-block:var(--sp-8) var(--sp-6); }
.foot__top{ display:flex; align-items:center; gap:var(--sp-3);
            flex-wrap:wrap; padding-bottom:var(--sp-4);
            border-bottom:1px solid var(--hair); }
.foot__logo{ width:132px; height:auto; }
.foot__claim{ font-size:var(--t-sm); color:var(--ink); line-height:1.45; }
.foot__cols{ display:grid; gap:var(--sp-4); padding-block:var(--sp-4);
             grid-template-columns:repeat(2,1fr); }
@media (min-width:860px){ .foot__cols{ grid-template-columns:repeat(4,1fr); } }
.foot__cols h3{ font-size:var(--t-xs); color:var(--ink); font-weight:600;
                margin-bottom:.5rem; }
.foot__cols p{ line-height:1.65; }
.foot__cols a:hover{ color:var(--blue); }
.foot__docs{ display:flex; flex-wrap:wrap; gap:var(--sp-2);
             padding-block:var(--sp-3); border-top:1px solid var(--hair); }
.foot__docs a{ color:var(--blue); }
.foot__legal,.foot__indep{ line-height:1.6; padding-top:var(--sp-3);
                           border-top:1px solid var(--hair);
                           color:var(--ink-3); }
.foot__copy{ padding-top:var(--sp-3); }

/* ═══ IMPRESIÓN ════════════════════════════════════════════════════ */
@media print{
  .nav,.sticky,.lb,.hero__act,.tally{ display:none !important; }
  .js .hero{ height:auto; }
  .hero__sticky{ position:static; height:auto; }
  .sec{ padding-block:1.5rem; break-inside:avoid; }
  .sec--navy,.sec--navy-deep{ background:#fff; color:#000; }
}