/* Concepto: la página alterna bandas de "día" (sal marina) y "ocaso" (Pacífico profundo),
   como una tarde frente al mar. El vidrio esmerilado solo aparece sobre foto, mapa o 3D. */
:root {
  /* Color */
  --sal: #eef2ef;
  --espuma: #f8faf8;
  --pacifico: #0c2630;
  --pacifico-2: #133540;
  --abismo: #081b22;
  --marea: #2b7479;
  --marea-clara: #8fcac5;
  --ocaso: #e8734a;
  --ocaso-claro: #f28d66;
  --arena: #dcc9a4;
  --niebla: #56696e;
  --bruma: #a3bbbc;
  --st-disponible: #33a77c;
  --st-apartado: #e3a63c;
  --st-vendido: #8b979b;

  /* Tipografía */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --w-display: 560;
  --f-texto: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --t-xs: 0.78rem;
  --t-s: 0.9rem;
  --t-m: 1rem;
  --t-l: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem);
  --t-xl: clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
  --t-2xl: clamp(2.1rem, 1.45rem + 2.9vw, 3.7rem);
  --t-hero: clamp(3rem, 1.2rem + 10.5vw, 10.5rem);

  /* Espacio y forma */
  --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right, 0px));
  --banda: clamp(72px, 9vw, 136px);
  --r-s: 3px;
  --r-m: 12px;
  --nav-h: 68px;
  --vidrio-fondo: rgba(10, 32, 40, 0.42);
  --vidrio-borde: rgba(255, 255, 255, 0.16);

  /* Tokens de banda (los redefine cada sección) */
  --bg: var(--sal);
  --fg: var(--pacifico);
  --muted: var(--niebla);
  --linea: rgba(12, 38, 48, 0.14);
  --superficie: var(--espuma);
  --eyebrow: var(--marea);
  --enlace: var(--marea);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-m);
  line-height: 1.6;
  background: var(--pacifico);
  color: var(--fg);
  font-variation-settings: 'wdth' 100, 'SOFT' 100;  /* SOFT redondea los remates de Fraunces; Archivo lo ignora */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ocaso); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.ico--xl { width: 2.5rem; height: 2.5rem; stroke-width: 1.2; }

.saltar {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ocaso); color: var(--pacifico); padding: 10px 16px; border-radius: var(--r-s);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

.envoltura {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

/* ── Bandas ───────────────────────────────────────────────────────────── */
.banda { background: var(--bg); color: var(--fg); padding-block: var(--banda); position: relative; }
.banda--dia { --bg: var(--sal); }
.banda--sal { --bg: var(--espuma); --superficie: #ffffff; }
.banda--ocaso {
  --bg: var(--pacifico);
  --fg: #f1f4f1;
  --muted: var(--bruma);
  --linea: rgba(241, 244, 241, 0.14);
  --superficie: var(--pacifico-2);
  --eyebrow: var(--arena);
  --enlace: var(--marea-clara);
  color-scheme: dark;
}
.banda--ocaso + .banda--ocaso { border-top: 1px solid var(--linea); }

/* ── Tipografía ───────────────────────────────────────────────────────── */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  font-stretch: 118%;
  font-variation-settings: 'wdth' 118;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow);
}
.titulo {
  font-family: var(--f-display);
  font-weight: var(--w-display);
  font-size: var(--t-2xl);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 20ch;
  font-optical-sizing: auto;
}
.lead { font-size: var(--t-l); line-height: 1.55; max-width: 60ch; color: var(--fg); opacity: 0.92; }
.nota { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; max-width: 80ch; }
.nota strong { color: var(--fg); }
.enlace {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--enlace); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.enlace:hover .ico { transform: translateX(3px); }
.enlace .ico { transition: transform 0.2s; }

.encabezado { display: grid; gap: 18px; margin-bottom: clamp(32px, 4vw, 56px); }
.encabezado--fila { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: 24px 48px; }
.encabezado--fila > div:not(.filtros) { display: grid; gap: 18px; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  padding: 0.95em 1.45em;
  border-radius: var(--r-s);
  border: 1px solid transparent;
  font-weight: 600;
  font-stretch: 108%;
  font-variation-settings: 'wdth' 108;
  font-size: var(--t-s);
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1.1;
  transition: background-color 0.2s, transform 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--sol { background: var(--ocaso); color: var(--pacifico); }
.btn--sol:hover { background: var(--ocaso-claro); }
.btn--vidrio {
  background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.btn--vidrio:hover { background: rgba(255, 255, 255, 0.22); }
.btn--linea { background: transparent; color: var(--fg); border-color: var(--linea); }
.btn--linea:hover { border-color: currentColor; }
.btn--sm { padding: 0.7em 1.1em; font-size: var(--t-xs); }
.btn--ancho { width: 100%; }

/* ── Vidrio (transparencias) ─────────────────────────────────────────── */
.vidrio {
  background: var(--vidrio-fondo);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--r-m);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #f1f4f1;
}

/* ── Navegación ───────────────────────────────────────────────────────── */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 51; background: var(--abismo);
}
.nav {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50;
  color: #fff;
  transition: background-color 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav--solida {
  background: rgba(8, 27, 34, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.nav__in {
  height: var(--nav-h);
  max-width: 1440px; margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-r);
  display: flex; align-items: center; gap: 24px;
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.marca__sol { width: 34px; height: 21px; fill: none; stroke: var(--ocaso); stroke-width: 2; }
.marca__nombre { font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; letter-spacing: 0.01em; }
.nav__links { display: flex; gap: clamp(12px, 1.5vw, 24px); margin-left: auto; }
.nav__links a {
  text-decoration: none; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.03em;
  font-stretch: 106%; font-variation-settings: 'wdth' 106;
  padding-block: 6px; border-bottom: 1px solid transparent; opacity: 0.88;
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current="true"] { opacity: 1; border-bottom-color: var(--ocaso); }
.nav__acciones { display: flex; align-items: center; gap: 12px; }
.moneda {
  display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 2px;
}
.moneda button {
  border: 0; background: transparent; color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 5px 10px; border-radius: 999px; opacity: 0.75;
}
.moneda button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: var(--pacifico); opacity: 1; }
.nav__menu {
  display: none; width: 44px; height: 44px; border-radius: var(--r-s);
  border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: #fff;
  align-items: center; justify-content: center;
}

.menu-movil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 27, 34, 0.86);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  color: #fff; overflow-y: auto;
}
.menu-movil__in {
  min-height: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) var(--gutter-r) calc(env(safe-area-inset-bottom, 0px) + 32px) var(--gutter);
  display: grid; align-content: start; gap: 32px;
}
.menu-movil__cerrar {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: var(--gutter-r);
  width: 44px; height: 44px; border-radius: var(--r-s); border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.menu-movil nav { display: grid; gap: 4px; }
.menu-movil .moneda { display: inline-flex; justify-self: start; }
.menu-movil .moneda button { padding: 8px 14px; font-size: 0.8rem; }
.menu-movil nav a {
  font-family: var(--f-display); font-size: clamp(1.6rem, 6vw, 2.2rem); text-decoration: none;
  padding-block: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; color: #fff;
  min-height: min(94svh, 940px);
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); align-content: end;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(20px, 3vw, 36px);
  background: var(--abismo);
}
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; z-index: -2; }
.hero__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8, 27, 34, 0.6) 0%, rgba(8, 27, 34, 0) 26%),
    linear-gradient(0deg, rgba(8, 27, 34, 0.92) 0%, rgba(8, 27, 34, 0.55) 34%, rgba(8, 27, 34, 0) 62%);
}
.hero__in { display: grid; gap: 20px; align-self: end; padding-bottom: clamp(28px, 4vw, 48px); }
.hero .eyebrow { color: #fff; }
.hero__in > * { text-shadow: 0 1px 18px rgba(8, 27, 34, 0.55); }
.hero__in .btn { text-shadow: none; }
.hero__titulo {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-hero);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-left: -0.04em;
}
.hero__titulo em { font-style: italic; font-weight: 460; color: #ffd9c4; }
.hero__lead { font-size: var(--t-l); max-width: 52ch; line-height: 1.55; opacity: 0.94; }
.hero__sol { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-s); color: var(--arena); }
.hero__sol strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero__sol .ico { color: var(--ocaso); width: 1.5em; height: 1.5em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px; }
.datos > div { padding: 14px 18px; display: grid; gap: 4px; }
.datos > div + div { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.datos dt { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bruma); }
.datos dd { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }

/* ── Desarrollo ───────────────────────────────────────────────────────── */
.desarrollo {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.desarrollo__texto { display: grid; gap: 20px; }
.desarrollo__texto p:not(.eyebrow):not(.lead) { color: var(--muted); max-width: 62ch; }
.desarrollo__foto { margin: 0; display: grid; gap: 10px; }
.desarrollo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-m); }
.desarrollo__foto figcaption { font-size: var(--t-xs); color: var(--muted); }
.cifras {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--linea);
}
.cifras > div { padding: 22px 16px 0 0; display: grid; gap: 6px; align-content: start; }
.cifras dt { font-size: var(--t-xs); color: var(--muted); letter-spacing: 0.04em; }
.cifras dd { font-family: var(--f-display); font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1; font-variant-numeric: lining-nums; }
.cifras small { font-family: var(--f-texto); font-size: var(--t-s); color: var(--muted); margin-left: 2px; }

/* ── Masterplan 3D ────────────────────────────────────────────────────── */
.mp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: stretch; }
.mp__escena {
  position: relative; overflow: hidden; border-radius: var(--r-m);
  height: clamp(460px, 70vh, 740px);
  background: linear-gradient(180deg, #2a4f63 0%, #d99a74 70%, #e9b48c 100%);
  touch-action: pan-y;
}
.mp__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.mp__escena--activa .mp__canvas { touch-action: none; }
.mp__etiquetas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mp-etq {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; letter-spacing: 0.02em;
  color: #fff; background: rgba(8, 27, 34, 0.55); border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.25s;
}
.mp-etq::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ocaso); }
.mp-etq--mar { background: transparent; border-color: transparent; backdrop-filter: none; font-family: var(--f-display); font-style: italic; font-size: 1rem; font-weight: 400; letter-spacing: 0.04em; opacity: 0.85; }
.mp-etq--mar::before { display: none; }
.mp__tooltip {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3;
  padding: 8px 12px; border-radius: 8px; font-size: 0.8rem; line-height: 1.35;
  background: rgba(8, 27, 34, 0.82); color: #fff; border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translate(14px, 14px); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.mp__tooltip strong { font-family: var(--f-display); font-size: 1rem; font-weight: 600; margin-right: 6px; }
.mp__vistas, .mapa__controles {
  position: absolute; top: 14px; left: 14px; display: flex; gap: 2px; padding: 4px; z-index: 2;
  border-radius: 999px; max-width: calc(100% - 80px);
  overflow-x: auto; scrollbar-width: none;
}
.mp__vistas::-webkit-scrollbar, .mapa__controles::-webkit-scrollbar { display: none; }
.mp__vistas button, .mapa__controles button { flex: none; white-space: nowrap; }
.mp__vistas button {
  border: 0; background: transparent; color: #fff; padding: 7px 13px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; opacity: 0.8;
}
.mp__vistas button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: var(--pacifico); opacity: 1; }
.mp__brujula {
  position: absolute; top: 14px; right: 14px; width: 46px; height: 46px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center;
}
.mp__brujula span {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; color: #fff;
  background: conic-gradient(from -8deg at 50% 50%, transparent 0 0, transparent 100%);
  position: relative;
}
.mp__brujula span::before {
  content: ""; position: absolute; top: 4px; left: 50%; width: 0; height: 0; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--ocaso);
}
.mp__leyenda {
  position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 8px 14px; z-index: 2; font-size: 0.76rem; border-radius: 10px;
}
.mp__leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.punto { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.punto--disponible { background: var(--st-disponible); }
.punto--apartado { background: var(--st-apartado); }
.punto--vendido { background: var(--st-vendido); }
.mp__cargando, .mapa__cargando, .tour__cargando {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  color: #fff; font-size: var(--t-s); z-index: 4; text-align: center; padding: 16px;
  background: rgba(8, 27, 34, 0.35);
}
.giro {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--ocaso);
  animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.mp__activar {
  position: absolute; inset: 0; z-index: 3; border: 0; width: 100%;
  background: rgba(8, 27, 34, 0.18); color: #fff;
  display: flex; align-items: flex-end; justify-content: center; gap: 10px;
  padding-bottom: 72px; font-weight: 600; font-size: var(--t-s);
}
.mp__activar .ico { width: 1.4em; height: 1.4em; }
.mp__activar::after { content: none; }
.mp__soltar { position: absolute; right: 14px; bottom: 60px; z-index: 3; }

.mp__panel {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m);
  padding: 20px; display: grid; gap: 18px; align-content: start;
}
.filtros { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.filtros legend { font-size: var(--t-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; padding: 0; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span, .chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linea);
  font-size: 0.8rem; font-weight: 500; color: var(--muted); background: transparent;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip input:checked + span, .chip-btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.banda--ocaso .chip input:checked + span { background: #f1f4f1; color: var(--pacifico); }
.chip input:focus-visible + span { outline: 2px solid var(--ocaso); outline-offset: 2px; }

.lote { border-top: 1px solid var(--linea); padding-top: 18px; }
.lote__vacio { display: grid; gap: 12px; color: var(--muted); }
.lote__vacio strong { color: var(--fg); }
.lote__vacio .ico { color: var(--arena); }
.lote__ficha { display: grid; gap: 14px; }
.lote__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lote__id { font-family: var(--f-display); font-size: 2.6rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.lote__tipo { color: var(--arena); font-weight: 600; font-size: var(--t-s); letter-spacing: 0.04em; }
.lote__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.lote__datos > div { display: grid; gap: 2px; }
.lote__datos > div:last-child { grid-column: 1 / -1; }
.lote__datos dt { font-size: var(--t-xs); color: var(--muted); }
.lote__datos dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.lote__precio { display: grid; gap: 2px; padding: 14px 0; border-block: 1px solid var(--linea); }
.lote__precio span { font-size: var(--t-xs); color: var(--muted); }
.lote__precio strong { font-family: var(--f-display); font-size: 2rem; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.lote__desc { font-size: var(--t-s); color: var(--muted); }
.lote__acciones { display: grid; gap: 8px; }
.lote__acciones .btn { width: 100%; }

.estado {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  border: 1px solid currentColor; white-space: nowrap;
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado--disponible, .estado--ok { color: var(--st-disponible); }
.estado--apartado, .estado--tramite { color: var(--st-apartado); }
.estado--vendido { color: var(--st-vendido); }
.banda--dia .estado--ok, .banda--sal .estado--ok { color: #1f7f5c; }
.banda--dia .estado--tramite, .banda--sal .estado--tramite { color: #9a6a12; }

.mp__lista { margin-top: 20px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--superficie); }
.mp__lista summary {
  cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mp__lista summary::-webkit-details-marker { display: none; }
.mp__lista summary::after { content: "+"; font-family: var(--f-display); font-size: 1.5rem; line-height: 1; transition: transform 0.2s; }
.mp__lista[open] summary::after { transform: rotate(45deg); }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mp__lista .tabla-scroll { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--linea); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { font-size: var(--t-xs); font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.tabla-lotes thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-lotes tbody tr { cursor: pointer; transition: background-color 0.15s; }
.tabla-lotes tbody tr:hover, .tabla-lotes tbody tr[aria-selected="true"] { background: rgba(255, 255, 255, 0.06); }
.tabla-lotes tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--ocaso); }
.tabla-lotes td:first-child { font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
.tabla-lotes tr[data-oculto="true"] { display: none; }

/* ── Mapa ─────────────────────────────────────────────────────────────── */
.mapa { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin-bottom: 16px; }
.mapa__lienzo {
  position: relative; overflow: hidden; border-radius: var(--r-m);
  height: clamp(440px, 64vh, 660px); background: #1d3a40;
}
.mapa__controles { z-index: 5; max-width: calc(100% - 70px); }
.mapa__controles button {
  border: 0; background: transparent; color: #fff; padding: 7px 13px; border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; opacity: 0.85;
}
.mapa__controles button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.92); color: var(--pacifico); opacity: 1; }
.mapa__puntos { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--linea); }
.mapa__puntos li { border-bottom: 1px solid var(--linea); }
.mapa__puntos button {
  width: 100%; border: 0; background: transparent; text-align: left; padding: 14px 4px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline;
  border-radius: var(--r-s); transition: background-color 0.15s;
}
.mapa__puntos button:hover, .mapa__puntos button[aria-pressed="true"] { background: rgba(43, 116, 121, 0.08); }
.mapa__puntos .p-nombre { font-weight: 600; }
.mapa__puntos .p-tiempo { font-family: var(--f-display); font-size: 1.35rem; font-variant-numeric: lining-nums tabular-nums; grid-row: span 2; align-self: center; }
.mapa__puntos .p-tipo { font-size: var(--t-xs); color: var(--muted); }
.mapa__puntos .p-detalle { grid-column: 1 / -1; font-size: var(--t-s); color: var(--muted); margin-top: 4px; }
.mapa__puntos button:not([aria-pressed="true"]) .p-detalle { display: none; }
.mapa__puntos li:first-child button { padding-top: 14px; }

.mk {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px;
  background: rgba(8, 27, 34, 0.7); color: #fff; font: 600 0.74rem/1.1 var(--f-texto); white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}
.mk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--marea-clara); }
.mk--activo { background: rgba(255, 255, 255, 0.95); color: var(--pacifico); }
.mk--dev {
  padding: 8px 14px 8px 10px; font-family: var(--f-display); font-size: 1rem; font-weight: 600;
  background: var(--ocaso); color: var(--pacifico); border-color: transparent; position: relative;
}
.mk--dev::before { background: var(--pacifico); }
.mk--dev::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  border: 2px solid var(--ocaso); animation: pulso 2.2s ease-out infinite;
}
@keyframes pulso { from { transform: scale(1); opacity: 0.9; } to { transform: scale(4); opacity: 0; } }
.maplibregl-ctrl-attrib { font-size: 10px !important; }
.maplibregl-ctrl-group { background: rgba(8, 27, 34, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.18); }
.maplibregl-ctrl-group button + button { border-top-color: rgba(255, 255, 255, 0.16) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }

/* ── Amenidades ───────────────────────────────────────────────────────── */
.amenidades {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(230px, 22vw, 310px); gap: 14px;
}
.amenidad { position: relative; overflow: hidden; border-radius: var(--r-m); color: #fff; isolation: isolate; background: var(--pacifico); }
.amenidad img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.amenidad::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8, 27, 34, 0.88) 0%, rgba(8, 27, 34, 0.3) 45%, rgba(8, 27, 34, 0) 70%); }
.amenidad:hover img { transform: scale(1.04); }
.amenidad__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: grid; gap: 6px; }
.amenidad h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.45rem; line-height: 1.1; }
.amenidad p { font-size: var(--t-s); line-height: 1.45; opacity: 0.9; max-width: 46ch; }
.amenidad--grande { grid-column: span 2; grid-row: span 2; }
.amenidad--grande .amenidad__texto { padding: 28px; }
.amenidad--grande h3 { font-size: var(--t-2xl); }
.amenidad--grande p { font-size: var(--t-m); }

.servicios {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px;
}
.servicios li { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid var(--linea); align-items: flex-start; }
.servicios .ico { color: var(--marea); width: 1.6rem; height: 1.6rem; margin-top: 2px; }
.servicios div { display: grid; gap: 2px; }
.servicios strong { font-weight: 600; }
.servicios span { font-size: var(--t-s); color: var(--muted); }

/* ── Club de Propietarios ─────────────────────────────────────────────── */
.club { isolation: isolate; overflow: hidden; }
.club__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.club__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 27, 34, 0.94) 0%, rgba(8, 27, 34, 0.78) 50%, rgba(8, 27, 34, 0.55) 100%); }
.vip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vip li { padding: 24px; display: grid; gap: 10px; align-content: start; }
.vip .ico { width: 1.8rem; height: 1.8rem; color: var(--ocaso); stroke-width: 1.4; }
.vip h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; }
.vip p { font-size: var(--t-s); color: rgba(241, 244, 241, 0.82); }
.club__cta {
  margin-top: 14px; padding: 24px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  border-color: rgba(232, 115, 74, 0.45);
}
.club__cta > div { display: grid; gap: 6px; min-width: 0; flex: 1 1 340px; }
.club__cta h3 { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 500; }
.club__cta p { color: rgba(241, 244, 241, 0.82); font-size: var(--t-s); max-width: 60ch; }

/* ── Tour virtual ─────────────────────────────────────────────────────── */
.tour { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-bottom: 16px; }
.tour__visor { position: relative; border-radius: var(--r-m); overflow: hidden; height: clamp(420px, 64vh, 660px); background: var(--abismo); }
.tour__lado { display: grid; gap: 16px; align-content: start; }
.tour__nota {
  font-family: var(--f-display); font-size: 1.2rem; line-height: 1.4; min-height: 4.2em;
  padding-bottom: 16px; border-bottom: 1px solid var(--linea);
}
.tour__escenas { display: grid; gap: 8px; }
.tour__escenas button {
  width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 6px; border-radius: 10px; border: 1px solid var(--linea); background: transparent; text-align: left;
  transition: border-color 0.2s, background-color 0.2s;
}
.tour__escenas img { width: 96px; height: 48px; object-fit: cover; border-radius: 6px; }
.tour__escenas span { font-size: var(--t-s); font-weight: 600; }
.tour__escenas button:hover { background: rgba(255, 255, 255, 0.05); }
.tour__escenas button[aria-current="true"] { border-color: var(--ocaso); background: rgba(232, 115, 74, 0.1); }
.hs {
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(8, 27, 34, 0.5); border: 1.5px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.2s, background-color 0.2s;
}
.hs:hover { transform: scale(1.1); background: var(--ocaso); }
.hs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs__texto {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  background: rgba(8, 27, 34, 0.85); color: #fff; padding: 6px 10px; border-radius: 6px;
  font: 600 0.78rem/1.3 var(--f-texto); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.hs--info .hs__texto { white-space: normal; width: 220px; font-weight: 500; }
.hs:hover .hs__texto, .hs:focus-visible .hs__texto { opacity: 1; }
.hs--info { border-color: var(--arena); }
.pnlm-container { background: var(--abismo) !important; font-family: var(--f-texto) !important; }
.pnlm-load-box { background: rgba(8, 27, 34, 0.8) !important; border-radius: var(--r-m) !important; }

/* ── Galería ──────────────────────────────────────────────────────────── */
.filtros--galeria { justify-content: flex-end; }
.chip-btn { cursor: pointer; }
.galeria {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(170px, 17vw, 250px); grid-auto-flow: dense; gap: 10px;
  margin-bottom: 16px;
}
.galeria li { min-width: 0; }
.galeria li[data-ancho="true"] { grid-column: span 2; }
.galeria li[data-alto="true"] { grid-row: span 2; }
.galeria button {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden;
  border-radius: 8px; background: var(--linea);
}
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.galeria button:hover img { transform: scale(1.05); }
.galeria .g-texto {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; text-align: left;
  font-size: 0.78rem; line-height: 1.35; color: #fff;
  background: linear-gradient(0deg, rgba(8, 27, 34, 0.85), rgba(8, 27, 34, 0));
  opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s;
}
.galeria button:hover .g-texto, .galeria button:focus-visible .g-texto { opacity: 1; transform: none; }
.galeria li[data-oculto="true"] { display: none; }

.visor {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(5, 18, 23, 0.96); color: #fff;
}
.visor::backdrop { background: rgba(5, 18, 23, 0.9); }
.visor[open] { display: grid; place-items: center; }
.visor__figura {
  margin: 0; display: grid; gap: 12px; justify-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 64px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 24px) max(16px, env(safe-area-inset-left, 0px));
  max-width: 100%;
}
.visor__figura img { max-width: min(92vw, 1600px); max-height: calc(100dvh - 160px); object-fit: contain; border-radius: 4px; }
.visor figcaption { display: flex; gap: 16px; justify-content: space-between; width: 100%; max-width: 900px; font-size: var(--t-s); color: rgba(255, 255, 255, 0.85); }
.visor__contador { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); flex: none; }
.visor__btn {
  position: fixed; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.visor__btn:hover { background: rgba(255, 255, 255, 0.2); }
.visor__btn--cerrar { top: calc(env(safe-area-inset-top, 0px) + 12px); right: max(16px, env(safe-area-inset-right, 0px)); }
.visor__btn--prev { left: max(16px, env(safe-area-inset-left, 0px)); top: 50%; margin-top: -24px; }
.visor__btn--sig { right: max(16px, env(safe-area-inset-right, 0px)); top: 50%; margin-top: -24px; }

/* ── Precios ──────────────────────────────────────────────────────────── */
.tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(40px, 5vw, 64px); }
.tipo { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 26px; display: grid; gap: 14px; align-content: start; }
.tipo__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tipo h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); }
.tipo__fila { font-size: var(--t-xs); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.tipo p { font-size: var(--t-s); color: var(--muted); }
.tipo dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linea); }
.tipo dt { font-size: var(--t-xs); color: var(--muted); }
.tipo dd { font-weight: 600; font-variant-numeric: tabular-nums; }
.tipo .tipo__desde { color: var(--fg); font-family: var(--f-display); font-size: 1.9rem; font-weight: 500; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.tipo__barra { height: 4px; border-radius: 2px; background: var(--linea); overflow: hidden; }
.tipo__barra span { display: block; height: 100%; background: var(--st-disponible); width: var(--disp, 50%); }

.calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--linea); border-radius: var(--r-m); overflow: hidden; background: var(--superficie);
}
.calc__entrada { padding: clamp(22px, 3vw, 36px); display: grid; gap: 20px; align-content: start; }
.calc__entrada h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.campo output { color: var(--fg); font-variant-numeric: tabular-nums; }
.opcional { font-weight: 400; }
select, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea {
  width: 100%; min-width: 0; padding: 12px 14px; border-radius: var(--r-s);
  border: 1px solid var(--linea); background: var(--bg); color: var(--fg);
  font-size: var(--t-m);
}
textarea { resize: vertical; }
input[type="range"] { width: 100%; accent-color: var(--ocaso); }
.planes { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.planes legend { font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; padding: 0; }
.planes > div { display: grid; gap: 8px; }
.plan { position: relative; display: block; }
.plan input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan span {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px;
  border: 1px solid var(--linea); border-radius: var(--r-s); transition: border-color 0.2s, background-color 0.2s;
}
.plan strong { font-weight: 600; }
.plan em { font-style: normal; font-size: var(--t-xs); color: var(--muted); grid-column: 1; }
.plan b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; color: var(--marea); }
.plan input:checked + span { border-color: var(--pacifico); background: rgba(12, 38, 48, 0.04); box-shadow: inset 3px 0 0 var(--ocaso); }
.plan input:focus-visible + span { outline: 2px solid var(--ocaso); outline-offset: 2px; }
.calc__resultado {
  background: var(--pacifico); color: #f1f4f1; padding: clamp(22px, 3vw, 36px);
  display: grid; gap: 18px; align-content: start;
  --linea: rgba(241, 244, 241, 0.14); --muted: var(--bruma); --fg: #f1f4f1;
}
.calc__resultado dl { display: grid; }
.calc__resultado dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.calc__resultado dt { color: var(--bruma); font-size: var(--t-s); }
.calc__resultado dd { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.calc__resultado .calc__clave { padding: 16px 0; }
.calc__resultado .calc__clave dt { color: var(--arena); align-self: center; }
.calc__resultado .calc__clave dd { font-family: var(--f-display); font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 500; line-height: 1; }
.calc__resultado .btn { justify-self: start; }

.etapas { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 18px; }
.etapas h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); }
.etapas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.etapas__lista::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--linea); }
.etapas__item { position: relative; display: grid; gap: 4px; padding: 28px 16px 0 0; }
.etapas__item::before {
  content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--niebla);
}
.etapas__item--actual::before { background: var(--ocaso); border-color: var(--ocaso); box-shadow: 0 0 0 5px rgba(232, 115, 74, 0.2); }
.etapas__nombre { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; }
.etapas__valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.etapas__fecha { font-size: var(--t-s); color: var(--muted); }

/* ── Certeza jurídica ─────────────────────────────────────────────────── */
.expediente td:first-child { display: flex; align-items: center; gap: 12px; white-space: normal; min-width: 280px; font-weight: 500; }
.expediente td { white-space: normal; vertical-align: middle; }
.expediente td:nth-child(2) { color: var(--muted); min-width: 200px; }
.expediente .ico { color: var(--marea); }
.expediente tbody tr:last-child td { border-bottom: 0; }
.expediente { border-top: 1px solid var(--fg); }
.legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.legal__bloque { background: var(--espuma); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 26px; display: grid; gap: 12px; align-content: start; }
.legal__bloque h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); }
.legal__bloque p { color: var(--muted); font-size: var(--t-s); }
.legal__cifra { color: var(--fg) !important; font-size: var(--t-m) !important; }
.legal__cifra strong { font-family: var(--f-display); font-size: 2rem; font-weight: 500; margin-right: 6px; }
.pasos { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 20px; }
.pasos h3 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-xl); }
.pasos ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; counter-reset: paso; }
.pasos li { counter-increment: paso; display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--fg); }
.pasos li::before { content: counter(paso); font-family: var(--f-display); font-size: 2.4rem; line-height: 1; color: var(--ocaso); font-style: italic; }
.pasos strong { font-weight: 600; }
.pasos span { font-size: var(--t-s); color: var(--muted); }

/* ── Avance de obra ───────────────────────────────────────────────────── */
.avance { display: grid; gap: 10px; justify-self: stretch; }
.avance__barra { height: 8px; border-radius: 4px; background: rgba(241, 244, 241, 0.12); overflow: hidden; }
.avance__barra span { display: block; height: 100%; width: var(--avance); background: linear-gradient(90deg, var(--marea-clara), var(--ocaso)); border-radius: 4px; }
.avance p { color: var(--muted); font-size: var(--t-s); }
.avance strong { color: var(--fg); font-family: var(--f-display); font-size: 1.5rem; font-weight: 500; margin-right: 4px; }
.linea { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.linea::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--linea); }
.linea__hito { position: relative; padding: 36px 24px 0 0; display: grid; gap: 8px; align-content: start; }
.linea__hito::before {
  content: ""; position: absolute; top: 0; left: 0; width: 17px; height: 17px; border-radius: 50%;
  background: var(--pacifico); border: 1.5px solid var(--bruma);
}
.linea__hito--hecho::before { background: var(--marea-clara); border-color: var(--marea-clara); }
.linea__hito--curso::before { background: var(--ocaso); border-color: var(--ocaso); box-shadow: 0 0 0 6px rgba(232, 115, 74, 0.22); }
.linea__fecha { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--arena); font-weight: 600; }
.linea__hito h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; }
.linea__hito p { color: var(--muted); font-size: var(--t-s); }

/* ── Preguntas ────────────────────────────────────────────────────────── */
.preguntas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.preguntas .encabezado { position: sticky; top: calc(var(--nav-h) + 32px); }
.acordeon { border-top: 1px solid var(--fg); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; line-height: 1.25;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--marea); transition: transform 0.25s; flex: none; }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon p { padding: 0 0 24px; color: var(--muted); max-width: 64ch; }

/* ── Contacto ─────────────────────────────────────────────────────────── */
.contacto { isolation: isolate; overflow: hidden; }
.contacto::before {
  content: ""; position: absolute; inset: auto -10% -40% -10%; height: 80%; z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, rgba(232, 115, 74, 0.35), rgba(232, 115, 74, 0) 62%);
}
.contacto__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contacto__info { display: grid; gap: 20px; }
.contacto__datos { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--linea); }
.contacto__datos li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); align-items: flex-start; }
.contacto__datos .ico { color: var(--ocaso); margin-top: 2px; }
.contacto__datos div { display: grid; gap: 2px; min-width: 0; }
.contacto__datos span { font-size: var(--t-xs); color: var(--muted); }
.contacto__datos strong { font-weight: 500; overflow-wrap: anywhere; user-select: all; }
.form { padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; background: rgba(19, 53, 64, 0.6); }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .campo label { color: var(--bruma); }
.form select, .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="date"], .form textarea {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff;
}
.form select option { color: var(--pacifico); background: #fff; }
.form ::placeholder { color: rgba(241, 244, 241, 0.45); }
.form [aria-invalid="true"] { border-color: var(--ocaso) !important; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-s); color: var(--bruma); }
.check input { margin-top: 4px; accent-color: var(--ocaso); width: 16px; height: 16px; flex: none; }
.check a { color: #fff; }
.form__estado { font-size: var(--t-s); min-height: 1.5em; }
.form__estado[data-tipo="error"] { color: var(--ocaso-claro); }
.form__estado[data-tipo="ok"] { color: var(--marea-clara); }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { background: var(--abismo); color: rgba(241, 244, 241, 0.86); padding-block: 64px calc(48px + env(safe-area-inset-bottom, 0px)); }
.pie__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 40px; }
.pie__marca { display: grid; gap: 14px; align-content: start; }
.pie__marca p, .pie__legal p { font-size: var(--t-xs); color: var(--bruma); line-height: 1.6; }
.pie__nav { display: grid; gap: 8px; align-content: start; }
.pie__nav a { text-decoration: none; font-size: var(--t-s); }
.pie__nav a:hover { color: var(--ocaso-claro); }
.pie__legal { display: grid; gap: 12px; }
.pie__legal strong { color: #fff; }

/* ── WhatsApp flotante ────────────────────────────────────────────────── */
.flotante {
  position: fixed; z-index: 40;
  right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border-radius: 999px;
  background: var(--ocaso); color: var(--pacifico); font-weight: 600; font-size: var(--t-s); text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(8, 27, 34, 0.6);
  transition: transform 0.2s, background-color 0.2s;
}
.flotante:hover { transform: translateY(-2px); background: var(--ocaso-claro); }
.flotante .ico { width: 1.4em; height: 1.4em; }

/* Aviso de sitio demostrativo (quitar junto con el noindex al publicar datos reales) */
.demo {
  position: fixed; z-index: 40; margin: 0; pointer-events: none;
  left: max(16px, calc(env(safe-area-inset-left, 0px) + 12px));
  bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  padding: 8px 14px; border-radius: 999px;
  background: rgba(8, 27, 34, 0.8); color: #f1f4f1; border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em;
}

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__acciones { margin-left: auto; }
}
@media (max-width: 1080px) {
  .mp, .mapa, .tour { grid-template-columns: minmax(0, 1fr); }
  .mp__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .mp__panel .lote { grid-column: 1 / -1; }
  .lote__ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .lote__cabeza, .lote__tipo, .lote__desc { grid-column: 1; }
  .lote__datos { grid-column: 1; grid-row: 3 / span 2; }
  .lote__precio { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .lote__acciones { grid-column: 2; }
  .mapa__puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .tour__escenas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour__escenas button { grid-template-columns: minmax(0, 1fr); }
  .tour__escenas img { width: 100%; height: 64px; }
  .tour__nota { min-height: 0; }
  .vip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .pasos ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(160px, 24vw, 240px); }
  .pie__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pie__legal { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .encabezado--fila, .desarrollo, .preguntas, .contacto__in { grid-template-columns: minmax(0, 1fr); }
  .preguntas .encabezado { position: static; }
  .desarrollo__foto img { aspect-ratio: 16 / 10; }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos > div:nth-child(3) { border-left: 0; }
  .datos > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .amenidades { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 40vw, 300px); }
  .amenidad--grande { grid-column: span 2; grid-row: span 1; }
  .amenidad:last-child { grid-column: span 2; }
  .tipos, .legal { grid-template-columns: minmax(0, 1fr); }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .linea { grid-template-columns: minmax(0, 1fr); }
  .linea::before { left: 8px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .linea__hito { padding: 0 0 28px 40px; }
  .filtros--galeria { justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  .nav__in { gap: 12px; }
  .marca__nombre { font-size: 1.15rem; }
  .marca__sol { width: 28px; height: 18px; }
  .moneda { display: none; }
  .nav__cta { display: none; }
  .hero { min-height: min(100svh, 780px); }
  .hero__ctas .btn { flex: 1 1 100%; }
  .datos > div { padding: 12px 14px; }
  .datos dd { font-size: clamp(1.05rem, 0.6rem + 2.4vw, 1.3rem); white-space: nowrap; }
  .mp__escena { height: min(68svh, 520px); }
  .mp__vistas { max-width: calc(100% - 76px); }
  .mp__vistas button { padding: 6px 10px; font-size: 0.72rem; }
  .mp__leyenda { right: 14px; justify-content: center; }
  .mp-etq--sec { display: none; }
  .mp__panel { grid-template-columns: minmax(0, 1fr); }
  .lote__ficha { grid-template-columns: minmax(0, 1fr); }
  .lote__cabeza, .lote__tipo, .lote__desc, .lote__datos, .lote__precio, .lote__acciones { grid-column: 1; grid-row: auto; }
  .mapa__lienzo { height: min(64svh, 480px); }
  .mapa__puntos { grid-template-columns: minmax(0, 1fr); }
  .tour__visor { height: min(64svh, 480px); }
  .tour__escenas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vip, .servicios { grid-template-columns: minmax(0, 1fr); }
  .amenidades { grid-template-columns: minmax(0, 1fr); }
  .amenidad--grande, .amenidad:last-child { grid-column: auto; }
  .amenidad--grande h3 { font-size: var(--t-xl); }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos ol { grid-template-columns: minmax(0, 1fr); }
  .etapas__lista { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .etapas__lista::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .etapas__item { padding: 0 0 0 36px; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 6px; }
  .form__fila { grid-template-columns: minmax(0, 1fr); }
  .pie__in { grid-template-columns: minmax(0, 1fr); }
  .flotante span { display: none; }
  .demo { font-size: 0.7rem; padding: 7px 12px; bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 18px)); }
  .flotante { padding: 14px; }
  .club__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}