/* plantilla.css — la plantilla de las 4 webs (Lawang /projects), copiada tal cual de la maqueta S8
   (agencia: encargos/20261020_sandalwoods_marketplace/s8/maqueta.html, commit e6babad5a; bloques plantilla, lawang-card,
   lawang-cabecera y escala). No se edita aquí: lo propio de sandalwoods.id va en sw.css, que se carga después.
   Vuelta a una sola copia compartida: subtarea abierta en el encargo (S9, backport). */
/* ── BRAND FONTS (locales, mismas que index.html) ────────── */

/* ── RESET & PAGE BASE ───────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;font-family:var(--sans);}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
/* a11y (EAA): foco visible por teclado en todo control interactivo */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
::selection{background:var(--clay);color:var(--bone)}

/* ── LAWANG BRAND PALETTE ────────────────────────────────── */
:root{
  --va: var(--ink);
  --rl: var(--bone);
  --rl-dark: var(--bone-2);

  /* Portfolio system */
  --ink-2: var(--sc);
  --clay: var(--tg);
  --clay-d: var(--tg-dark);
  --wrap:   1280px;
  --gut:    clamp(20px, calc(5vw / var(--lw-z, 1)), 72px);
  --nav-h:  64px;
  /* Easing */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.23, 1, 0.32, 1);

  /* Marketplace palette */
  --jt-bg: var(--bone);
  --jt-surface: var(--surface);
  --jt-dark: var(--dl);
  --jt-text: var(--ink);
  --jt-sub: var(--sc);
  --jt-terra: var(--tg);
  --jt-terra-lt: var(--sc);
  --jt-palm: var(--tg);
  --jt-palm-bg: var(--tg-light);
  --jt-border: color-mix(in srgb, var(--tg) 14%, transparent);
  --jt-border-md: color-mix(in srgb, var(--tg) 24%, transparent);

  --tt-bg: var(--bone);
  --tt-surface: var(--surface);
  --tt-text: var(--ink);
  --tt-sub: var(--sc);
  --tt-gold: var(--tg);
  --tt-gold-lt: var(--sc);
  --tt-border: color-mix(in srgb, var(--tg) 14%, transparent);
  --tt-border-md: color-mix(in srgb, var(--tg) 26%, transparent);
  --tt-sage: var(--tg);
  --tt-sage-bg: var(--tg-light);
  --tt-clay: var(--dl);
  --tt-clay-bg: var(--dl-light);
  --tt-slate: var(--ink-60);
  --tt-slate-bg: var(--ink-8);
}

body { background: var(--bone) var(--m-textura, none) top center / 100% auto no-repeat; }
/* El shell del marketplace se pinta con background:var(--bone) inline (JS) y tapaba el fondo del body → transparente para que se vea bg-ecommerce (no afecta al #pf-overlay) */
#portfolio-root > div:not([id]) { background: transparent !important; }

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes kb     { from{transform:scale(1.06) translate(0,0)} to{transform:scale(1.14) translate(-1.5%,-1.5%)} }

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
.kicker  { font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); }
/* Todo thecollection.html en Neue; el único serif es el "INDONESIA" del hero (.hero-serif) */
.display { font-family:var(--sans); font-weight:300; line-height:0.98; letter-spacing:-0.005em; text-wrap:balance; }
.serif   { font-family:var(--sans); }
.proc-num{ font-family:var(--sans); font-weight:400; }
.hero-serif { font-family:var(--serif) !important; }
.italic  { font-style:italic; }
h1,h2,h3{ margin:0; font-weight:300; }

/* ── LAYOUT ──────────────────────────────────────────────── */
.wrap        { max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.section     { padding-block:clamp(64px,calc(9vw / var(--lw-z, 1)),140px); }
.eyebrow-row { display:flex; align-items:center; gap:14px; }
.eyebrow-row::after { content:""; height:1px; flex:1; background:var(--line); }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn        { display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.01em; cursor:pointer; border:1px solid transparent; transition:transform .16s var(--ease-press),background .22s,color .22s,border-color .22s; }
.btn:active { transform:scale(0.97); }
.btn-solid  { background:var(--ink); color:var(--bone); }
.btn-solid:hover { background:var(--clay); }
.btn-clay   { background:var(--clay); color:var(--bone); border-color:var(--clay); }
.btn-clay:hover  { background:var(--clay-d); }
.btn-ghost  { border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-ghost:hover { background:var(--ink); color:var(--bone); }
.btn-light  { border-color:color-mix(in srgb, var(--bone) 50%, transparent); color:var(--bone); background:transparent; }
.btn-light:hover { background:var(--bone); color:var(--ink); border-color:var(--bone); }
.btn .arr   { transition:transform .28s var(--ease); }
.btn:hover .arr { transform:translateX(5px); }

/* ── IMAGE PLACEHOLDERS ──────────────────────────────────── */
.ph { position:relative; overflow:hidden; background:var(--k-lienzo); isolation:isolate; }
.ph-fill { width:100%; height:100%; }
.ph::after { content:""; position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events:none; }
.ph-grad { position:absolute; inset:0; }
.ph-jungle { background:radial-gradient(120% 100% at 20% 0%,var(--sc) 0%,transparent 55%),radial-gradient(120% 120% at 90% 30%,var(--tg-dark) 0%,transparent 60%),linear-gradient(160deg,var(--tg) 0%,var(--tg-jungle) 100%); }
.ph-sunset { background:radial-gradient(120% 90% at 75% 18%,var(--ss) 0%,transparent 50%),radial-gradient(140% 120% at 20% 80%,var(--be) 0%,transparent 60%),linear-gradient(155deg,var(--be-lt) 0%,var(--be-dk) 100%); }
.ph-ocean  { background:radial-gradient(120% 100% at 30% 10%,var(--dl-lt) 0%,transparent 55%),radial-gradient(120% 120% at 85% 80%,var(--dl-dk) 0%,transparent 60%),linear-gradient(160deg,var(--dl) 0%,var(--dl-dkr) 100%); }
.ph-sand   { background:radial-gradient(120% 100% at 25% 15%,var(--bone) 0%,transparent 55%),radial-gradient(120% 120% at 90% 85%,var(--sc) 0%,transparent 60%),linear-gradient(160deg,var(--ss) 0%,var(--tg) 100%); }
.ph-dusk   { background:radial-gradient(120% 100% at 70% 12%,var(--sc) 0%,transparent 50%),radial-gradient(130% 120% at 15% 85%,var(--ink) 0%,transparent 62%),linear-gradient(160deg,var(--tg) 0%,var(--dusk) 100%); }
.ph-horizon::before { content:""; position:absolute; left:0; right:0; top:58%; height:1px; background:rgba(255,255,255,.18); box-shadow:0 14px 50px 8px rgba(255,255,255,.05); }
.ph-label   { position:absolute; left:14px; bottom:12px; z-index:3; font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--bone) 72%, transparent); display:flex; align-items:center; gap:7px; }
.ph-label::before { content:""; width:16px; height:1px; background:color-mix(in srgb, var(--bone) 60%, transparent); }
.ph-kb .ph-grad { animation:kb 18s ease-in-out infinite alternate; }
.ph-kb .ph-img  { animation:kb 22s ease-in-out infinite alternate; }
.ph-img    { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:opacity 1s ease, transform .7s var(--ease); }
.ph-tint   { position:absolute; inset:0; z-index:2; pointer-events:none; }
.ph-photo::after { z-index:2; opacity:.06; }
.ph-play   { position:absolute; inset:0; z-index:3; display:grid; place-items:center; }
.ph-play span { width:64px; height:64px; border-radius:999px; border:1px solid color-mix(in srgb, var(--bone) 70%, transparent); display:grid; place-items:center; background:color-mix(in srgb, var(--k-scrim) 18%, transparent); backdrop-filter:blur(2px); transition:transform .4s cubic-bezier(.2,.7,.2,1),background .3s; }
.ph-play span::after { content:""; width:0; height:0; margin-left:4px; border-left:13px solid color-mix(in srgb, var(--bone) 92%, transparent); border-top:8px solid transparent; border-bottom:8px solid transparent; }
.ph:hover .ph-play span { transform:scale(1.08); background:color-mix(in srgb, var(--k-terracota) 40%, transparent); }
.ph-timecode { position:absolute; right:14px; bottom:12px; z-index:3; font-family:var(--sans); font-size:10.5px; font-weight:500; letter-spacing:.1em; color:color-mix(in srgb, var(--bone) 70%, transparent); font-variant-numeric:tabular-nums; }

/* ── PDP GALLERY MOSAIC ──────────────────────────────────── */
.pdp-mosaic { display:grid; grid-template-columns:1.55fr 1fr; grid-template-rows:1fr 1fr; gap:8px; aspect-ratio:16/9; }
.pdp-mosaic .pdp-tile { position:relative; border:none; padding:0; margin:0; border-radius:10px; overflow:hidden; cursor:pointer; background:var(--bone-2); }
.pdp-mosaic .pdp-tile img, .pdp-mosaic .pdp-tile .ph { transition:transform .5s var(--ease); }
.pdp-mosaic .pdp-side:hover img, .pdp-mosaic .pdp-side:hover .ph { transform:scale(1.05); }
@media(max-width:720px){ .pdp-mosaic{ grid-template-columns:1fr; grid-template-rows:1fr; aspect-ratio:4/3; } .pdp-mosaic .pdp-side{ display:none; } }

/* ── THE MASTERPLAN — configurador (rework 27-jul) ─────────────
   Antes: titular verde en mayúsculas compitiendo con un rosario de píldoras como stepper, y el
   total colgado al final de esa misma fila. No se leía ni en qué paso estabas ni cuánto quedaba.
   Ahora: cabecera editorial (kicker + titular serif + total vivo a la derecha) · RAÍL numerado con
   la barra de progreso real · paso · pie de navegación. Sigue siendo UNA sola tarjeta. */
.cfg-card{ background:#fff; border:1px solid color-mix(in srgb, var(--ss) 45%, transparent); border-radius:20px;
  padding:clamp(22px,calc(2.6vw / var(--lw-z, 1)),40px); box-shadow:0 30px 70px -50px color-mix(in srgb, var(--k-scrim) 45%, transparent); }
.cfg-head{ display:flex; align-items:flex-start; gap:clamp(18px,calc(3vw / var(--lw-z, 1)),40px); flex-wrap:wrap; }
.cfg-head-l{ flex:1 1 300px; min-width:0; }
.cfg-head .kicker{ margin-bottom:10px; }
/* En Neue Kabel, NO en The Seasons: el OTF de la marca es la versión DEMO y sustituye "-", "4",
   "+", "&" y "%" por una flor con la palabra DEMO. Un titular como "34 plots. From 250 m²." o un
   "Add-ons" salían rotos. Mismo criterio que el resto de thecollection.html (.serif → var(--sans)). */
.cfg-title{ font-family:var(--sans); font-weight:300; font-size:clamp(26px,calc(3vw / var(--lw-z, 1)),42px); line-height:1.06;
  letter-spacing:-.005em; color:var(--tg); margin:0; text-wrap:balance; }
.cfg-sub{ font-family:var(--sans); font-size:clamp(13.5px,calc(1.15vw / var(--lw-z, 1)),15px); font-weight:300; line-height:1.6;
  color:var(--ink-2); margin:12px 0 0; max-width:46ch; }
/* Total vivo: cambia al elegir parcela/villa/extras — es el dato que el visitante persigue */
.cfg-total{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  padding-left:clamp(16px,calc(2vw / var(--lw-z, 1)),26px); border-left:1px solid var(--line); }
.cfg-total-l{ font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.cfg-total-v{ font-family:var(--sans); font-size:clamp(24px,calc(2.4vw / var(--lw-z, 1)),34px); font-weight:600; line-height:1.05;
  color:var(--be); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cfg-total-s{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--tg); margin-top:4px; }
/* Sin nada configurado solo queda el contador de paso: el filete separador se quedaba flotando solo */
.cfg-total-bare{ border-left:0; padding-left:0; }

/* Raíl de pasos: línea continua que se rellena hasta el paso actual (--cfg-f = fracción 0–1).
   Los círculos llevan un halo blanco que tapa la línea por debajo, así no hace falta recortarla. */
.cfg-rail{ list-style:none; display:flex; justify-content:space-between; position:relative;
  margin:clamp(24px,calc(3vw / var(--lw-z, 1)),36px) 0 0; padding:0 0 clamp(20px,calc(2.4vw / var(--lw-z, 1)),28px); border-bottom:1px solid var(--line); }
.cfg-rail::before,.cfg-rail::after{ content:""; position:absolute; left:17px; top:16px; height:2px; border-radius:2px; }
.cfg-rail::before{ right:17px; background:var(--bone-2); }
.cfg-rail::after{ width:calc((100% - 34px) * var(--cfg-f,0)); background:var(--tg); transition:width .45s var(--ease); }
.cfg-rail-i{ flex:1 1 0; min-width:0; position:relative; z-index:1; }
.cfg-rail-i:last-child{ flex:0 0 auto; }
.cfg-rail-i button{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%;
  background:none; border:0; padding:0; cursor:pointer; text-align:left; }
.cfg-rail-i:last-child button{ align-items:flex-end; text-align:right; }
.cfg-rail-i.off button{ cursor:default; }
.cfg-rail-n{ width:34px; height:34px; border-radius:999px; display:grid; place-items:center; flex:none;
  background:var(--bone); border:2px solid var(--bone-2); box-shadow:0 0 0 5px #fff;
  font-family:var(--sans); font-size:13px; font-weight:700; color:var(--ink-2);
  transition:background .25s,border-color .25s,color .25s,transform .2s var(--ease-press); }
.cfg-rail-t{ font-family:var(--sans); font-size:clamp(10.5px,calc(1vw / var(--lw-z, 1)),12.5px); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); transition:color .25s; }
.cfg-rail-i.done .cfg-rail-n{ background:var(--tg); border-color:var(--tg); color:var(--bone); }
.cfg-rail-i.done .cfg-rail-t{ color:var(--ink); }
.cfg-rail-i.on .cfg-rail-n{ background:var(--be); border-color:var(--be); color:var(--rl); transform:scale(1.06); }
.cfg-rail-i.on .cfg-rail-t{ color:var(--be); }
.cfg-rail-i.off{ opacity:.42; }
.cfg-rail-i button:not([disabled]):hover .cfg-rail-n{ border-color:var(--tg); }

/* Paso */
.cfg-step{ animation:cfgFade .32s var(--ease); padding-top:clamp(22px,calc(2.6vw / var(--lw-z, 1)),32px); }
@keyframes cfgFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .cfg-step{ animation:none; } .cfg-rail::after{ transition:none; } span.pdp-hs{ animation:none; } .cfg-btn-wa{ animation:none; } }
.cfg-h{ font-family:var(--sans); font-weight:300; font-size:clamp(20px,calc(2vw / var(--lw-z, 1)),28px); line-height:1.12;
  letter-spacing:0; color:var(--be); margin:0 0 clamp(16px,calc(2vw / var(--lw-z, 1)),22px); }
.cfg-step-h{ margin-bottom:clamp(18px,calc(2.2vw / var(--lw-z, 1)),26px); }
.cfg-step-h .cfg-h{ margin-bottom:0; }
.cfg-step-h p{ font-family:var(--sans); font-size:14px; font-weight:300; line-height:1.6; color:var(--ink-2); margin:8px 0 0; max-width:52ch; }

/* Opciones del configurador: parcelas, villas y extras. La selección ya no se anuncia con una
   línea de texto que descuadraba la altura de las tarjetas — se marca la tarjeta entera. */
.cfg-opt{ position:relative; text-align:left; cursor:pointer; background:var(--rl); border:1px solid var(--line);
  border-radius:14px; padding:0; overflow:hidden;
  transition:border-color .2s,background .2s,box-shadow .3s var(--ease),transform .18s var(--ease-press); }
.cfg-opt:hover{ border-color:var(--sc); box-shadow:0 16px 34px -26px color-mix(in srgb, var(--k-scrim) 70%, transparent); }
.cfg-opt:active{ transform:scale(.99); }
.cfg-opt.on{ border-color:var(--tg); background:var(--tg-light); box-shadow:0 0 0 1px var(--tg) inset; }
.cfg-tick{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:999px; z-index:2;
  background:var(--tg); color:var(--bone); display:grid; place-items:center; font-size:13px; font-weight:700;
  opacity:0; transform:scale(.7); transition:opacity .2s,transform .24s var(--ease); }
.cfg-opt.on .cfg-tick{ opacity:1; transform:none; }

.cfg-plots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:10px; }
.cfg-plot{ display:flex; flex-direction:column; gap:9px; padding:18px 16px 16px; }
.cfg-plot-size{ font-family:var(--sans); font-size:26px; font-weight:600; line-height:1; color:var(--ink); }
.cfg-plot-size em{ font-style:normal; font-size:13px; font-weight:500; color:var(--ink-2); }
.cfg-plot-price{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--be); }
.cfg-plot.on .cfg-plot-size{ color:var(--tg-dark); }

/* Masterplan: plano real con pines por parcela, sustituye a .cfg-plots cuando la ficha trae
   p.masterplanImage + p.masterplanPlots. Deliberadamente distinto de los hotspots del aéreo
   (círculo numerado + etiqueta narrativa): aquí el pin es funcional -- código + chip de
   estado -- y el detalle vive en un panel debajo, nunca en un globo pegado al pin (a x≈95%
   un globo ahí se saldría del marco; un panel fijo no tiene ese problema en ningún ancho). */
.mp-map{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bone-2); }
.mp-map img{ display:block; width:100%; height:auto; }
.mp-pin{ position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; display:flex; align-items:center;
  justify-content:center; background:none; border:0; padding:0; cursor:pointer; }
.mp-pin[disabled]{ cursor:default; }
.mp-pin span{ min-width:26px; height:26px; padding:0 6px; border-radius:7px; background:var(--tg); color:var(--bone);
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center;
  justify-content:center; box-shadow:0 0 0 2px #fff,0 6px 14px -8px color-mix(in srgb, var(--k-scrim) 60%, transparent);
  transition:transform .18s var(--ease-press),background .2s; }
.mp-pin:hover span,.mp-pin.focus span{ transform:scale(1.14); }
.mp-pin.on span{ background:var(--be); }
.mp-pin.mp-held span{ background:var(--ink-2); }
.mp-pin.mp-gone span{ background:var(--bone-2); color:var(--ink-2); text-decoration:line-through; box-shadow:0 0 0 2px #fff; }
.mp-pin.mp-unknown span{ background:var(--rl); color:var(--ink); border:1px solid var(--line); }
.mp-detail{ margin-top:16px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--rl);
  display:flex; flex-direction:column; gap:10px; }
.mp-detail-code{ font-family:var(--sans); font-size:20px; font-weight:600; color:var(--ink); }
.mp-detail-row{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--sans);
  font-size:15px; font-weight:600; color:var(--be); }
.mp-detail-status{ font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  display:inline-flex; align-self:flex-start; padding:4px 10px; border-radius:999px; background:var(--bone-2); color:var(--ink-2); }
.mp-detail-status.mp-ok{ background:var(--tg-light); color:var(--tg-dark); }
.mp-detail-picked{ align-self:flex-start; font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tg-dark); display:flex; align-items:center; gap:6px; }
.mp-hint{ margin-top:14px; font-family:var(--sans); font-size:13px; font-weight:300; color:var(--ink-2); text-align:center;
  padding:14px; border:1px dashed var(--line); border-radius:14px; }

/* ── THE PAYMENT PLAN — vitrina a sangre (calco Ecomerce.pdf p.4, 6-ago) ──────────────────
   Foto de la villa a sangre con overlay oscuro; tarjetas icono+monto+% en cascada diagonal
   (cada paso se desplaza a la derecha y hacia abajo, como en la guía). En movil la cascada no
   cabe: se endereza a columna vertical bajo 760px, mismo criterio que el resto de la ficha. */
.pp-bleed{ position:relative; background-size:cover; background-position:center; background-color:var(--k-noche);
  padding:clamp(48px,calc(7vw / var(--lw-z, 1)),84px) 0 clamp(40px,calc(6vw / var(--lw-z, 1)),64px); }
.pp-bleed::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,color-mix(in srgb, var(--k-scrim) 72%, transparent) 0%,color-mix(in srgb, var(--k-scrim) 42%, transparent) 32%,color-mix(in srgb, var(--k-scrim) 58%, transparent) 100%); }
.pp-bleed-in{ position:relative; max-width:1760px; margin:0 auto; padding:0 clamp(20px,calc(4vw / var(--lw-z, 1)),64px); color:var(--bone);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:clamp(32px,calc(5vw / var(--lw-z, 1)),64px); align-items:flex-start; }
.pp-bleed-main{ flex:1 1 560px; min-width:0; }
/* Tarjeta clara "Technical sheet" del plan de pagos (calco Ecomerce.pdf p.4, 7-ago) — mismas filas
   que la ficha técnica del configurador, mismo aspecto de tarjeta (.pdp-spec), flotando a la
   derecha de la cascada de pasos igual que en el PDF del cliente. Crece con la pantalla hasta 480px
   (revisión cliente 20-oct: 380px fijos se quedaba estrecha) sin pisar la cascada de la izquierda. */
.pp-techcard{ flex:0 1 clamp(380px,calc(32vw / var(--lw-z, 1)),480px); min-width:280px; background:#fff; border-radius:20px;
  padding:clamp(22px,calc(2.4vw / var(--lw-z, 1)),30px); box-shadow:0 30px 70px -40px rgba(0,0,0,.55); color:var(--ink); }
.pp-techcard-from{ font-family:var(--sans); font-size:clamp(24px,calc(2.4vw / var(--lw-z, 1)),30px); font-weight:600;
  color:var(--ink); margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.pp-h1{ font-family:var(--sans); font-weight:300; font-size:clamp(38px,calc(5.2vw / var(--lw-z, 1)),74px); line-height:1.02; letter-spacing:-.01em;
  color:#fff; margin:6px 0 clamp(26px,calc(3.4vw / var(--lw-z, 1)),42px); text-wrap:balance; }
.pp-bar{ height:2px; background:rgba(255,255,255,.28); border-radius:2px; max-width:900px; margin-bottom:clamp(28px,calc(4vw / var(--lw-z, 1)),48px); }
.pp-bar span{ display:block; height:100%; background:#fff; border-radius:2px; }
.pp-steps{ display:flex; flex-direction:column; gap:clamp(14px,calc(1.8vw / var(--lw-z, 1)),20px); max-width:900px; }
.pp-step{ display:flex; align-items:center; gap:0; }
.pp-step2{ margin-left:clamp(28px,calc(7vw / var(--lw-z, 1)),120px); }
.pp-step3{ margin-left:clamp(56px,calc(14vw / var(--lw-z, 1)),240px); }
.pp-step4{ margin-left:clamp(84px,calc(21vw / var(--lw-z, 1)),360px); }
.pp-ic{ flex:none; width:clamp(48px,calc(5.2vw / var(--lw-z, 1)),70px); height:clamp(48px,calc(5.2vw / var(--lw-z, 1)),70px); border-radius:14px; display:grid; place-items:center;
  color:#fff; box-shadow:0 14px 30px -16px rgba(0,0,0,.7); position:relative; z-index:1; }
.pp-ic svg{ width:44%; height:44%; }
.pp-pill{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; background:color-mix(in srgb, var(--k-scrim) 62%, transparent); backdrop-filter:blur(6px);
  border-radius:0 12px 12px 0; padding:clamp(10px,calc(1.4vw / var(--lw-z, 1)),16px) clamp(16px,calc(2.2vw / var(--lw-z, 1)),26px) clamp(10px,calc(1.4vw / var(--lw-z, 1)),16px) clamp(20px,calc(2.6vw / var(--lw-z, 1)),28px);
  margin-left:-12px; }
.pp-pill b{ font-family:var(--sans); font-size:clamp(17px,calc(1.8vw / var(--lw-z, 1)),23px); font-weight:600; color:#fff; }
.pp-pill em{ font-style:normal; font-family:var(--sans); font-size:12px; font-weight:500; color:rgba(255,255,255,.65); }
.pp-pill small{ flex-basis:100%; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.85); }
.pp-delivery{ margin-top:clamp(40px,calc(5.4vw / var(--lw-z, 1)),64px); padding-top:clamp(20px,calc(2.6vw / var(--lw-z, 1)),28px); border-top:1px solid rgba(255,255,255,.25);
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.pp-delivery-l b{ display:block; font-family:var(--sans); font-size:clamp(24px,calc(2.6vw / var(--lw-z, 1)),34px); font-weight:600; color:#fff; margin-top:4px; }
.pp-delivery p{ font-family:var(--sans); font-size:12px; font-weight:300; line-height:1.7; color:rgba(255,255,255,.65); margin:0; }
/* Sin max-width (antes 34ch = 3 líneas; revisión cliente 20-oct): en escritorio cabe en una línea; si no cabe
   junto a Delivery, el flex-wrap la baja a su propia fila, y en móvil parte como cualquier texto. */
@media(max-width:760px){
  .pp-step2,.pp-step3,.pp-step4{ margin-left:0; }
  .pp-pill{ margin-left:10px; border-radius:12px; }
}

.cfg-homes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.cfg-home{ display:flex; flex-direction:column; }
.cfg-home-media{ position:relative; display:block; aspect-ratio:4/3; background:var(--bone-2); overflow:hidden; }
.cfg-home-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cfg-home:hover .cfg-home-media img{ transform:scale(1.04); }
.cfg-home-body{ display:flex; flex-direction:column; gap:5px; padding:14px 16px 16px; }
.cfg-home-name{ font-family:var(--sans); font-size:21px; font-weight:400; line-height:1.15; color:var(--ink); }
.cfg-home-meta{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--tg); }
.cfg-home-areas{ font-family:var(--sans); font-size:12px; font-weight:300; line-height:1.5; color:var(--ink-2); }
.cfg-home-price{ font-family:var(--sans); font-size:16px; font-weight:600; color:var(--be); margin-top:4px; }

/* Botón de vuelta al wizard sobre la vitrina de pago (10-ago) — el step "Plan" reemplaza la
   tarjeta del configurador entera por el calco exacto del PDF p.4 (paymentPlanBleedHTML tal cual,
   sin adaptar), así que hace falta un camino de vuelta a Parcela/Villa/Extras. En flujo normal
   (NO absolute) a propósito: el hueco entre la barra fija (64px) y donde arranca el kicker/titular
   es demasiado estrecho para flotar el botón sin chocar con uno de los dos según el viewport —
   probado con captura real dos veces (corregido el mismo día). En flujo, empuja el contenido hacia
   abajo unos px en vez de competir por un hueco que no existe siempre.
   margin-left: mismo padding horizontal que .pp-bleed-in, para que quede alineado con el kicker;
   margin-bottom: separación real antes del kicker, no un hueco prestado. */
.pp-back{ display:inline-flex; align-items:center; gap:6px; margin:0 0 18px clamp(20px,calc(4vw / var(--lw-z, 1)),64px);
  background:rgba(255,255,255,.12); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28); color:#fff; border-radius:999px; padding:8px 16px 8px 14px;
  font-family:var(--sans); font-size:12.5px; font-weight:600; cursor:pointer; transition:background .2s var(--ease); }
.pp-back:hover{ background:rgba(255,255,255,.2); }

.cfg-extras{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--rl); }
.cfg-extra{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; transition:background .2s; }
.cfg-extra + .cfg-extra{ border-top:1px solid var(--line); }
.cfg-extra.on{ background:var(--tg-light); }
.cfg-extra-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cfg-extra-name{ font-family:var(--sans); font-size:14.5px; font-weight:600; color:var(--ink); }
.cfg-extra-note{ font-family:var(--sans); font-size:12px; font-weight:300; color:var(--ink-2); }
.cfg-extra-act{ display:flex; align-items:center; gap:14px; flex:none; }
.cfg-extra-price{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--be); }
.cfg-extra-btn{ border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px;
  padding:7px 16px; font-family:var(--sans); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s; }
.cfg-extra-btn:hover{ border-color:var(--tg); color:var(--tg); }
.cfg-extra-btn.on{ background:var(--tg); border-color:var(--tg); color:var(--bone); }
.cfg-extras-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin-top:14px; padding-top:12px; border-top:2px solid var(--ink); font-family:var(--sans); }
.cfg-extras-total span{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.cfg-extras-total b{ font-size:18px; font-weight:700; }

/* Pie de navegación */
.cfg-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:clamp(24px,calc(2.8vw / var(--lw-z, 1)),34px); padding-top:clamp(18px,calc(2vw / var(--lw-z, 1)),22px); border-top:1px solid var(--line); }
.cfg-foot-end{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-left:auto; }
.cfg-btn{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:11px 24px;
  font-family:var(--sans); font-size:13px; font-weight:700; cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:background .22s,color .22s,border-color .22s,transform .16s var(--ease-press); }
.cfg-btn:active{ transform:scale(.97); }
/* Deshabilitado legible: con opacity .35 sobre fondo claro el "Continue" desaparecía y parecía roto */
.cfg-btn[disabled]{ cursor:default; }
.cfg-btn-ghost{ background:none; border-color:var(--line); color:var(--ink); font-weight:600; }
.cfg-btn-ghost:not([disabled]):hover{ border-color:var(--ink); }
.cfg-btn-ghost[disabled]{ color:var(--ink-2); border-color:var(--bone-2); }
.cfg-btn-go{ background:var(--tg); color:var(--bone); }
.cfg-btn-go:not([disabled]):hover{ background:var(--tg-dark); }
.cfg-btn-go[disabled]{ background:var(--bone-2); color:var(--ink-2); }
/* Latido sutil del CTA final (reservar por WhatsApp): solo el brillo, nunca el tamaño -- un botón
   que cambia de tamaño solo invita a hacer click sin querer. Bucle infinito, mismo motivo que
   span.pdp-hs: reiniciar fase en cada re-render no se nota. */
@keyframes waPulse{ 0%,100%{ box-shadow:0 8px 20px -8px color-mix(in srgb, var(--k-wa) 65%, transparent); } 50%{ box-shadow:0 8px 26px -6px color-mix(in srgb, var(--k-wa) 90%, transparent); } }
.cfg-btn-wa{ background:var(--k-wa); color:#fff; box-shadow:0 8px 20px -8px color-mix(in srgb, var(--k-wa) 65%, transparent); animation:waPulse 2.8s ease-in-out infinite; }
.cfg-btn-wa svg{ width:17px; height:17px; flex:none; }
/* Móvil: sin sitio para 4 etiquetas en fila — los pasos pasan a rejilla y la línea sobra */
@media(max-width:560px){
  .cfg-rail{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px 12px; }
  .cfg-rail::before,.cfg-rail::after{ display:none; }
  .cfg-rail-i:last-child{ flex:none; }
  .cfg-rail-i:last-child button{ align-items:flex-start; text-align:left; }
  .cfg-rail-i button{ flex-direction:row; align-items:center; gap:10px; }
  .cfg-total{ border-left:0; padding-left:0; align-items:flex-start; }
  .cfg-foot,.cfg-foot-end{ flex-direction:column; align-items:stretch; }
  .cfg-btn{ justify-content:center; }
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal    { opacity:0; transform:translateY(28px); filter:blur(4px); transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease); }
.reveal.in { opacity:1; transform:none; filter:blur(0); }
@media(prefers-reduced-motion:reduce){ .reveal{ filter:none; transform:none; transition:opacity .4s ease; } }

/* ── PILLS ───────────────────────────────────────────────── */
.pill      { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); color:var(--ink-2); background:rgba(255,255,255,.4); }
.pill.solid{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.pill.clay { background:var(--clay); color:var(--bone); border-color:var(--clay); }

/* ── FORM FIELDS ─────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); }
.field input,.field select,.field textarea { font-family:var(--sans); font-size:15px; color:var(--ink); background:rgba(255,255,255,.55); border:1px solid var(--line); border-radius:10px; padding:13px 14px; transition:border-color .2s,background .2s; width:100%; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--clay); background:#fff; }
.field textarea { resize:vertical; min-height:120px; }

/* ── LANGUAGE / CURRENCY TOGGLE ──────────────────────────── */
.seg { display:inline-flex; border:1px solid currentColor; border-radius:999px; overflow:hidden; opacity:.8; }
.seg.faded { opacity:.55; }
.seg button { appearance:none; background:none; border:0; color:inherit; cursor:pointer; font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.04em; padding:6px 11px; transition:background .2s,color .2s; }
.seg button.on { background:currentColor; }
.seg button.on span { display:block; color:var(--bone); mix-blend-mode:normal; }
.seg button span { display:block; }

/* ── PORTFOLIO TOPBAR ────────────────────────────────────── */
.pf-topbar { background:var(--dl); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,calc(4vw / var(--lw-z, 1)),52px); height:64px; position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(58,102,69,0.3); }

/* ── PROPERTY OVERLAY ────────────────────────────────────── */
/* Tarjetas de categoría — entrada .reveal (opacity/transform/filter) + hover animado */
.lw-cat { transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease), box-shadow .35s var(--ease); }
/* Filete fino blanco interior, igual que las cards de propiedad */
.lw-cat::after { content:""; position:absolute; inset:clamp(9px,calc(1vw / var(--lw-z, 1)),13px); border:1px solid color-mix(in srgb, var(--bone) 42%, transparent); border-radius:10px; pointer-events:none; z-index:2; }
.lw-cat.on { box-shadow:0 0 0 2px var(--clay); }
/* Solo sombra al pasar el ratón: el anillo verde se reserva para la categoría activa (.on) */
.lw-cat:hover { box-shadow:0 18px 40px -20px color-mix(in srgb, var(--k-scrim) 55%, transparent); }
.lw-cat > img { transition:transform .7s var(--ease); will-change:transform; }
.lw-cat:hover > img { transform:scale(1.08); }
.lw-cat > span:last-child { transition:transform .4s var(--ease); }
.lw-cat:hover > span:last-child { transform:translateX(7px); }
@media(max-width:1024px){ .lw-cat-grid { grid-template-columns:repeat(2,1fr) !important; } }
/* ── Ficha: scroll continuo ──
   Hasta el 27-jul esto replicaba el `.snap` del index: scroll-snap MANDATORY + cada sección a
   pantalla completa, o sea "una sección = un scroll". Fuera (petición cliente 27-jul): la ficha se
   lee del tirón. Con el snap se va también el min-height:100vh — era lo que estiraba cada sección
   a pantalla entera y dejaba huecos enormes cuando el contenido no llegaba. Cada sección mide
   ahora lo que ocupa. El hero SÍ sigue a pantalla completa: es un hero. */
#pf-overlay { position:fixed; inset:0; z-index:9000; background:var(--bone);
  overflow-y:scroll; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; }
#pf-overlay::-webkit-scrollbar{ display:none; }
@media(prefers-reduced-motion:reduce){ #pf-overlay{ scroll-behavior:auto; } }
@media(hover:none){ #pf-overlay{ scroll-behavior:auto; } }
.pdp-sec{ display:flex; flex-direction:column; justify-content:safe center;
  padding-block:clamp(2.5rem,calc(6vh / var(--lw-z, 1)),4.5rem); }
.pdp-sec:not(.pdp-hero) > *{ width:100%; }
.pdp-hero.pdp-sec{ padding:0; min-height:calc(100vh / var(--lw-z, 1)); min-height:calc(100dvh / var(--lw-z, 1)); }
/* Sección 50/50 a sangre: sin padding, su propio margen la separa */
.pdp-sec-flush{ padding-block:0; }
/* Última: otros proyectos + footer (su .wrap trae el espaciado) */
.pdp-sec-last{ padding-block:0; }
.pdp-sec-last > .pdp-wrap{ padding-top:clamp(40px,calc(6vh / var(--lw-z, 1)),90px); padding-bottom:clamp(28px,calc(4vh / var(--lw-z, 1)),56px); }
#pf-overlay .pf-overlay-bar { position:sticky; top:0; z-index:2; height:60px; display:flex; align-items:center; justify-content:space-between; background:color-mix(in srgb, var(--bone) 94%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:0 clamp(20px,calc(5vw / var(--lw-z, 1)),72px); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:900px){ .pf-topbar{ flex-wrap:wrap; height:auto; padding-block:12px; gap:10px; } }

/* ── INTERACTION UPGRADES ────────────────────────────────── */
/* Image zoom on card hover */
article:hover .ph-img { transform:scale(1.05); }
/* Animated arrow in property card footer */
.view-cta { display:inline-flex; align-items:center; gap:5px; transition:gap .3s var(--ease),color .2s; }
article:hover .view-cta { gap:9px; }
/* Filter chip press feedback */
.filter-chip { transition:transform .12s var(--ease-press),background .2s,color .2s,border-color .2s !important; }
.filter-chip:active { transform:scale(0.95) !important; }
/* Topbar link hover */
.pf-topbar a { transition:opacity .2s; }

/* ── Barra superior: /assets/lawang-cabecera.css (fuente única de la cabecera del menú, 19-oct-2026).
   Aquí solo lo propio de esta página: las banderas del idioma, la moneda y la ficha fantasma (#topbar.pdp). ── */
.flag{ width:21px;height:14px;flex:none;border-radius:2px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.10) }
/* Moneda: mismo desplegable que el idioma (guía Ficha). Menú más estrecho y símbolo delante del código. */
.nav-cur-wrap .lang-menu{ min-width:118px }
.nav-cur-wrap .cur-sym{ display:inline-block;min-width:1.4em;font-weight:600;color:var(--tg) }
/* ── Ficha: topbar "fantasma" (#topbar.pdp) — transparente sobre el hero, se colorea al scroll (como el index) ── */
/* fixed (no sticky) → no reserva franja encima del hero; la imagen llega al top y el nav flota sobre ella */
#topbar.pdp{ position:fixed; top:0; left:0; right:0; background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background .35s,box-shadow .35s; }
#topbar.pdp:not(.solid) #nav{ background:color-mix(in srgb, var(--k-scrim) 22%, transparent); border-color:color-mix(in srgb, var(--ss) 45%, transparent); }
#topbar.pdp:not(.solid) .nav-link{ color:color-mix(in srgb, var(--bone) 92%, transparent); text-shadow:0 1px 8px rgba(0,0,0,.55); }
#topbar.pdp:not(.solid) .nav-link:hover{ color:#fff; }
#topbar.pdp:not(.solid) .nav-link::after{ background:var(--ss); }
#topbar.pdp:not(.solid) .nav-lang{ color:color-mix(in srgb, var(--bone) 82%, transparent); text-shadow:0 1px 8px rgba(0,0,0,.55); }
#topbar.pdp:not(.solid) .nav-lang:hover{ color:#fff; }
/* CTA "Request details": pastilla Burnt Earth sólida en toda la ficha, también sobre el hero.
   Padding simétrico: el 9px izquierdo del marketplace compensa el icono de WhatsApp, pero aquí
   el icono va oculto y el texto quedaba descentrado (revisión cliente 23-jul). */
#topbar.pdp .nav-cta{ background:var(--be); border-color:var(--be); color:var(--rl); padding:8px 20px; justify-content:center; }
#topbar.pdp .nav-cta:hover{ background:var(--be-hover); border-color:var(--be-hover); }
#topbar.pdp .nav-cta svg, #topbar.pdp .nav-cta .wa{ display:none }
#topbar.pdp.solid{ background:color-mix(in srgb, var(--bar) 94%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 color-mix(in srgb, var(--ss) 30%, transparent); }
/* Ficha en móvil: el desplegable de la hamburguesa es el crema de lawang-cabecera.css también sobre la foto
   (sin esto heredaba el cristal oscuro y el texto blanco de .pdp:not(.solid)), y el botón conserva el círculo
   de WhatsApp cuando el texto se oculta (a ≤700 px se quedaba vacío). */
@media(max-width:1000px){
  #topbar.pdp.nav-open #nav{ background:color-mix(in srgb, var(--bar) 98%, transparent); border-color:transparent; border-top:1px solid color-mix(in srgb, var(--ss) 40%, transparent); }
  #topbar.pdp.nav-open .nav-link{ color:color-mix(in srgb, var(--k-scrim) 72%, transparent); text-shadow:none; }
  #topbar.pdp.nav-open .nav-link::after{ background:var(--tg); }
  #topbar.pdp:not(.solid).nav-open .nav-link:hover,#topbar.pdp.nav-open .nav-link.active{ color:var(--tg); }
}
@media(max-width:700px){
  #topbar.pdp .nav-cta .wa{ display:flex; }
  #topbar.pdp .nav-cta .wa svg{ display:block; }
  #topbar.pdp .nav-cta{ padding:8px 9px; }
}

/* ── Ficha: hero de la guía — marco de filete interior ──
   27-jul: el marco pasa a ser un RECUADRO cerrado. Antes iba a bottom:0 y sin borde inferior, así
   que se salía por abajo de la pantalla y se leía como dos líneas sueltas, no como un marco. */
.pdp-hero-frame{ position:absolute; top:clamp(74px,calc(9.5vh / var(--lw-z, 1)),108px); left:clamp(20px,calc(2.8vw / var(--lw-z, 1)),54px); right:clamp(20px,calc(2.8vw / var(--lw-z, 1)),54px);
  bottom:clamp(20px,calc(2.8vw / var(--lw-z, 1)),54px);
  border:1px solid color-mix(in srgb, var(--bone) 30%, transparent); border-radius:10px; pointer-events:none; z-index:1 }
/* (marca de agua "The Collection" del hero retirada — revisión cliente 23-jul) */
/* ── Isotipo real de marca (assets/img/isotipo.webp, blanco sobre transparente) ──────────────
   Va como MÁSCARA en vez de <img> para que tome el color del contexto: crema sobre el hero y
   Burnt Earth sobre el topbar claro. Ratio del arte recortado 261/280. */
.lw-iso{ display:block; aspect-ratio:261/280; background-color:currentColor;
  -webkit-mask:url('assets/img/isotipo.webp') center/contain no-repeat;
          mask:url('assets/img/isotipo.webp') center/contain no-repeat }
/* La ficha respira más ancho que el marketplace (en la guía el contenido casi toca los bordes y
   solo el footer se queda en 1280) — de ahí un contenedor propio en vez de tocar --wrap global. */
.pdp-wrap{ max-width:1760px }
/* ── Ficha: fila de características al pie del hero ──
   27-jul (2ª vuelta): cada dato es un bloque de tres pisos — icono, CIFRA, etiqueta. La cifra baja
   un 20% respecto a la primera versión (39 -> 31 px) porque ahora no va sola: lleva icono encima y
   etiqueta debajo, y a 39 px el conjunto pesaba más que el propio nombre de la propiedad.
   `align-items:flex-end` alinea las etiquetas de toda la fila aunque un dato no tenga cifra
   (SIGNATURE, FREEHOLD HGB): sin eso, esos bloques flotaban a media altura. */
.pdp-hero-feats{ position:absolute; left:0; right:0; bottom:clamp(64px,calc(11vh / var(--lw-z, 1)),132px); z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:clamp(16px,calc(2.4vh / var(--lw-z, 1)),30px) clamp(20px,calc(3.2vw / var(--lw-z, 1)),58px);
  padding:0 clamp(34px,calc(6vw / var(--lw-z, 1)),90px);
  color:var(--bone); font-family:var(--sans); text-shadow:0 2px 18px color-mix(in srgb, var(--k-scrim) 50%, transparent); }
.pdp-hf{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.pdp-hf-i{ width:clamp(17px,calc(1.55vw / var(--lw-z, 1)),21px); height:clamp(17px,calc(1.55vw / var(--lw-z, 1)),21px); flex:none; opacity:.82; margin-bottom:10px; }
.pdp-hf-n{ font-size:clamp(18px,calc(2.4vw / var(--lw-z, 1)),31px); font-weight:600; line-height:1; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.pdp-hf-l{ font-style:normal; font-size:clamp(9px,calc(.8vw / var(--lw-z, 1)),11.5px); font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; opacity:.82; margin-top:.75em; white-space:nowrap; }
/* ── Ficha: lightbox de la galería (click en foto = ampliar) ── */
.pdp-lb{ position:fixed; inset:0; z-index:400; background:color-mix(in srgb, var(--k-scrim) 93%, transparent); display:flex; align-items:center; justify-content:center; }
.pdp-lb-media img,.pdp-lb-media video{ display:block; max-width:calc(92vw / var(--lw-z, 1)); max-height:calc(86vh / var(--lw-z, 1)); border-radius:6px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
.pdp-lb-close{ position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:999px; border:none;
  background:color-mix(in srgb, var(--bone) 14%, transparent); color:var(--bone); font-size:26px; line-height:1; cursor:pointer;
  display:grid; place-items:center; font-family:var(--sans); transition:background .18s; }
.pdp-lb-close:hover{ background:color-mix(in srgb, var(--bone) 28%, transparent); }
.pdp-lb-count{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:var(--bone);
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.18em; }
/* ── Ficha: galería 2 grandes + tira de miniaturas (revisión cliente 23-jul: ver más fotos de un vistazo) ── */
.pdp-gal2-big{ display:flex; gap:clamp(8px,calc(1vw / var(--lw-z, 1)),12px); }
/* Alto limitado por la pantalla (revisión cliente 24-jul: la sección de fotos tocaba los bordes sin
   margen y se recortaba en pantallas bajas). Se recorta con object-fit, no deforma. */
.pdp-gal2-big .pdp-g3-tile{ aspect-ratio:auto !important; height:clamp(220px,calc(36vh / var(--lw-z, 1)),400px); }
/* Miniaturas en rejilla FIJA de 6: con pocas fotos (2-3) no se estiran hasta el tamaño de las
   grandes — se quedan pequeñas y alineadas a la izquierda (revisión cliente 24-jul). */
.pdp-gal2-thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(6px,calc(.8vw / var(--lw-z, 1)),10px); margin-top:clamp(6px,calc(.8vw / var(--lw-z, 1)),10px); }
@media(max-width:720px){
  .pdp-gal2-big .pdp-g3-extra{ display:none; }              /* móvil: 1 foto grande */
  .pdp-gal2-thumbs{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pdp-gal2-thumbs::-webkit-scrollbar{ display:none; }
  .pdp-gal2-thumbs .pdp-g3-thumb{ flex:0 0 27% !important; }  /* !important: pisa el flex:1 inline — deslizables, se ve que hay más */
}
/* ── Ficha: flechas de la galería — chevron SVG grande en círculo compacto ── */
.pdp-gal-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:clamp(36px,calc(2.8vw / var(--lw-z, 1)),42px); height:clamp(36px,calc(2.8vw / var(--lw-z, 1)),42px); border-radius:999px; border:none; padding:0;
  background:rgba(255,255,255,.9); color:var(--ink); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 18px -6px color-mix(in srgb, var(--k-scrim) 45%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background .18s, transform .18s; }
.pdp-gal-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.pdp-gal-arrow svg{ display:block; width:50%; height:50%; }
/* SW-22 (repaso 3-nov): en móvil la flecha es táctil y mide 44 px (regla del owner para carruseles, 26-oct); salía a 36 */
@media(max-width:640px){ .pdp-gal-arrow{ width:44px; height:44px; } }
/* Fundido al navegar la galería: sin él, avanzar de 1 en 1 repite fotos en pantalla y parece que no pasa nada */
.pdp-gal2.gal-anim .pdp-g3-tile{ animation:pdpGalIn .32s ease both; }
@keyframes pdpGalIn{ from{ opacity:.3 } to{ opacity:1 } }
/* Burbuja flotante de WhatsApp (guía Ficha p1) */
.pdp-wa-float{ position:fixed; right:clamp(16px,calc(2vw / var(--lw-z, 1)),30px); bottom:clamp(16px,calc(2vw / var(--lw-z, 1)),30px); z-index:160;
  width:clamp(50px,calc(4.2vw / var(--lw-z, 1)),62px); height:clamp(50px,calc(4.2vw / var(--lw-z, 1)),62px); border-radius:999px; background:var(--k-wa); color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 26px -8px color-mix(in srgb, var(--k-scrim) 55%, transparent); transition:transform .2s }
.pdp-wa-float svg{ width:58%; height:58%; display:block }
.pdp-wa-float:hover{ transform:scale(1.06) }
/* ── Ficha: 2 columnas bajo el carrusel — izq 60% (tabla + configurador/payment) · dcha 40% (card) ── */
.pdp-info-2col{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:clamp(24px,calc(3.5vw / var(--lw-z, 1)),52px); align-items:start; }
/* El configurador/payment plan es lo primero de su columna → sin margen superior. */
.pdp-leftmain{ margin-top:0; }

/* ── FICHA TÉCNICA — hoja de datos (rework 27-jul) ─────────────
   Antes: chips de piedra en rejilla 2×N con el valor SIN etiqueta ("Private pool", "34" y "2028"
   uno detrás de otro, sin decir de qué eran) y el mapa metido en la esquina de la misma tarjeta.
   Ahora: pares etiqueta/valor con filete, como la hoja de datos de un dossier. El mapa se fue a
   su propia banda (.pdp-terr) y el dossier es el pie de la hoja, ya no una caja dentro de la caja. */
.pdp-spec{ display:block; background:#fff; border:1px solid color-mix(in srgb, var(--ss) 45%, transparent); border-radius:20px;
  padding:clamp(22px,calc(2.4vw / var(--lw-z, 1)),34px); box-shadow:0 30px 70px -50px color-mix(in srgb, var(--k-scrim) 45%, transparent); }
.pdp-spec-lead{ font-family:var(--sans); font-size:clamp(14px,calc(1.3vw / var(--lw-z, 1)),16px); font-weight:300; line-height:1.7;
  color:var(--ink); margin:13px 0 0; }
.pdp-spec-hd{ font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--clay); margin-bottom:4px; }
.pdp-spec > .pdp-spec-hd{ margin-top:clamp(24px,calc(2.6vw / var(--lw-z, 1)),32px); padding-top:clamp(20px,calc(2.2vw / var(--lw-z, 1)),26px); border-top:1px solid var(--line); }
.pdp-spec > .pdp-spec-hd:first-child{ margin-top:0; padding-top:0; border-top:0; }
.pdp-spec-list{ margin:12px 0 0; }
.pdp-spec-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.pdp-spec-row:last-child{ border-bottom:0; padding-bottom:0; }
.pdp-spec-row dt{ display:flex; align-items:center; gap:10px; min-width:0; font-family:var(--sans);
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2); }
.pdp-spec-row dt svg{ width:17px; height:17px; flex:none; color:var(--sc); transition:color .2s; }
.pdp-spec-row:hover dt svg{ color:var(--tg); }
.pdp-spec-row dd{ margin:0; font-family:var(--sans); font-size:15px; font-weight:600; color:var(--be);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pdp-spec-dossier{ margin-top:clamp(24px,calc(2.6vw / var(--lw-z, 1)),32px); padding-top:clamp(20px,calc(2.2vw / var(--lw-z, 1)),26px); border-top:1px solid var(--line); }

/* ── Columna junto a la galería (calco Ecomerce.pdf p.2, 6-ago): The Villa (badges) + The
   Overview + caja Delivery/Status/Units/Available + The Location con mapa y sus dos badges. */
.pdp-gi{ display:flex; flex-direction:column; gap:clamp(22px,calc(2.6vw / var(--lw-z, 1)),30px); }
.pdp-gi-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.pdp-gi-badge{ flex:1 1 100px; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.pdp-gi-badge-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.pdp-gi-badge-top b{ font-family:var(--sans); font-size:clamp(26px,calc(2.6vw / var(--lw-z, 1)),34px); font-weight:700; line-height:1; color:var(--ink); }
.pdp-gi-badge-top svg{ width:18px; height:18px; flex:none; color:var(--sc); margin-top:4px; }
.pdp-gi-badge span{ display:block; margin-top:8px; font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.pdp-gi-overview{ font-family:var(--sans); font-size:14px; font-weight:300; line-height:1.75; color:var(--ink-2); margin:10px 0 0; }
.pdp-gi-info{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 10px; background:#fff;
  border:1px solid color-mix(in srgb, var(--ss) 45%, transparent); border-radius:14px; padding:16px 18px; box-shadow:0 20px 50px -40px color-mix(in srgb, var(--k-scrim) 40%, transparent); }
.pdp-gi-info-cell{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.pdp-gi-info-l{ font-family:var(--sans); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); padding-bottom:5px; border-bottom:1px solid var(--line); }
.pdp-gi-info-cell b{ font-family:var(--sans); font-size:13px; font-weight:700; color:var(--tg-dark); line-height:1.2; }
.pdp-gi-loc-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.pdp-gi-loc-region{ font-family:var(--sans); font-size:13px; font-weight:600; text-align:right; color:var(--ink); }
.pdp-gi-map{ position:relative; margin-top:14px; }
.pdp-gi-map-badge{ position:absolute; top:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(100deg,var(--tg-black),var(--tg-mid)); color:var(--bone); font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.02em; padding:7px 12px; border-radius:999px; }
.pdp-gi-map-badge svg{ width:14px; height:14px; flex:none; }
/* Fondo sólido (7-ago): sin él, el texto blanco+sombra se leía bien sobre la foto aérea del PDF
   pero se confundía con las etiquetas de un mapa de Google real (calles, POIs) — se veía como
   texto suelto flotando sobre el mapa. Mismo degradado que el badge hermano, para que ambos lean
   igual de bien sobre cualquier fondo, foto o mapa interactivo. */
.pdp-gi-map-tenure{ position:absolute; bottom:12px; left:14px; z-index:3; display:flex; align-items:center; gap:8px;
  background:linear-gradient(100deg,var(--tg-black),var(--tg-mid)); color:#fff; padding:8px 14px 8px 10px; border-radius:999px; }
.pdp-gi-map-tenure svg{ width:22px; height:22px; flex:none; }
.pdp-gi-map-tenure span{ display:flex; flex-direction:column; }
.pdp-gi-map-tenure em{ font-style:normal; font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.pdp-gi-map-tenure b{ font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
/* Mapa embebido: debajo del iframe va «Open in Google Maps» y abajo a la izquierda Google pone la miniatura de capas, el
   logo y Términos. Con bottom:12px la etiqueta tapaba todo eso (verificador, 21-oct): va arriba a la derecha, la esquina
   que el embed deja libre (arriba a la izquierda está la de la playa). */
.pdp-gi-map:has(.pdp-map-open) .pdp-gi-map-tenure{ top:12px; right:12px; bottom:auto; left:auto; }
/* Con las dos etiquetas (Palm Field: «5 min from the beach») a 390 px quedan 66 px entre ellas; por debajo chocan: FREEHOLD baja una fila. */
@media(max-width:420px){ .pdp-gi-map:has(.pdp-map-open):has(.pdp-gi-map-badge) .pdp-gi-map-tenure{ top:52px; } }
/* Sin mapa (enlace de Maps que no se pudo resolver → botón): las etiquetas van en fila junto al botón, nunca encima. */
.pdp-gi-map.is-link{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pdp-gi-map.is-link .pdp-gi-map-badge, .pdp-gi-map.is-link .pdp-gi-map-tenure{ position:static; }
@media(max-width:640px){ .pdp-gi-info{ grid-template-columns:repeat(2,1fr); } }

/* ── THE TERRITORY — mapa + planta 3D a ancho completo (rework 27-jul) ──
   El mapa medía 280px en una columna estrecha y la planta 3D colgaba huérfana debajo de la ficha
   técnica. Ahora comparten banda; con solo uno de los dos cargado, ese ocupa el ancho entero. */
.pdp-terr-head{ margin-bottom:clamp(18px,calc(2.2vw / var(--lw-z, 1)),26px); }
.pdp-terr-h{ font-family:var(--sans); font-weight:300; font-size:clamp(26px,calc(3vw / var(--lw-z, 1)),44px); line-height:1.05;
  letter-spacing:-.005em; color:var(--ink); margin:9px 0 0; }
.pdp-terr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,calc(2vw / var(--lw-z, 1)),26px); align-items:stretch; }
.pdp-terr-solo .pdp-terr-grid{ grid-template-columns:1fr; }
.pdp-terr-card{ margin:0; display:flex; flex-direction:column; gap:11px; min-width:0; }
.pdp-terr-media{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--bone-2); height:clamp(280px,calc(42vh / var(--lw-z, 1)),460px); }
.pdp-terr-media img{ width:100%; height:100%; object-fit:cover; }
/* La planta 3D es un plano: recortarla a "cover" se come parcelas. Se ve entera sobre papel crema. */
.pdp-terr-plan .pdp-terr-media{ background:var(--rl); }
.pdp-terr-plan .pdp-terr-media img{ object-fit:contain; }
.pdp-terr-card figcaption{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); }
/* mapMediaHTML trae sus propias alturas y bordes (venía de la columna estrecha): aquí llena la caja */
.pdp-terr-media .pdp-map{ position:absolute !important; inset:0; border:0 !important; border-radius:0 !important; min-height:0 !important; }
.pdp-terr-media .pdp-map-embed{ height:100%; border:0; border-radius:0; }
.pdp-terr-media .pdp-map-embed iframe{ height:100%; }
.pdp-terr-media .pdp-map-open{ position:absolute; right:12px; bottom:12px; margin:0; background:rgba(255,255,255,.94);
  padding:8px 14px; border-radius:999px; box-shadow:0 8px 20px -10px color-mix(in srgb, var(--k-scrim) 50%, transparent); }
.pdp-terr-link{ margin-top:clamp(14px,calc(1.8vw / var(--lw-z, 1)),20px); }
/* ── Ficha: sección 50/50 — izq. imagen + título · dcha. tarjetas (revisión cliente 24-jul) ── */
.pdp-split-section{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; margin:0; min-height:clamp(380px,calc(44vw / var(--lw-z, 1)),560px); }
.pdp-split-img{ position:relative; overflow:hidden; background:var(--k-noche); }
.pdp-split-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Velo inferior: sin él el título se pierde sobre fotos claras (cielo, arrozal) */
.pdp-split-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,color-mix(in srgb, var(--k-scrim) 74%, transparent) 0%,color-mix(in srgb, var(--k-scrim) 16%, transparent) 46%,transparent 72%); pointer-events:none; }
.pdp-split-cap{ position:absolute; z-index:2; left:clamp(20px,calc(3vw / var(--lw-z, 1)),48px); right:clamp(20px,calc(3vw / var(--lw-z, 1)),48px); bottom:clamp(22px,calc(3vw / var(--lw-z, 1)),44px); }
.pdp-split-cap h2{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(28px,calc(3.4vw / var(--lw-z, 1)),52px); line-height:1.04; color:var(--rl); }
.pdp-split-cap p{ margin:10px 0 0; font-family:var(--sans); font-size:clamp(12px,calc(1.15vw / var(--lw-z, 1)),15px); font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--bone) 82%, transparent); }
/* Panel derecho: pestañas de tipo de vivienda (Dali, Dune…) */
.pdp-split-panel{ display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,calc(4.5vw / var(--lw-z, 1)),72px); background:var(--rl); min-width:0; }
.pdp-tabs-head{ display:flex; flex-wrap:wrap; gap:8px 26px; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:clamp(18px,calc(2.2vw / var(--lw-z, 1)),28px); }
.pdp-tab{ background:none; border:none; padding:6px 0; cursor:pointer; font-family:var(--sans); font-size:clamp(11px,calc(1.1vw / var(--lw-z, 1)),13px); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); position:relative; transition:color .2s; }
.pdp-tab::after{ content:""; position:absolute; left:0; right:0; bottom:-15px; height:2px; background:var(--tg); transform:scaleX(0); transition:transform .22s; }
.pdp-tab:hover{ color:var(--ink); }
.pdp-tab.on{ color:var(--tg); }
.pdp-tab.on::after{ transform:scaleX(1); }
.pdp-tab-body h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(24px,calc(2.6vw / var(--lw-z, 1)),38px); line-height:1.08; color:var(--ink); }
.pdp-tab-sub{ margin:8px 0 0; font-family:var(--sans); font-size:clamp(12px,calc(1.1vw / var(--lw-z, 1)),14px); font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--tg); }
.pdp-tab-main{ margin-top:clamp(14px,calc(1.8vw / var(--lw-z, 1)),20px); border-radius:14px; overflow:hidden; background:var(--bone-2); height:clamp(200px,calc(30vh / var(--lw-z, 1)),320px); }
.pdp-tab-main img{ display:block; width:100%; height:100%; object-fit:cover; }
.pdp-tab-thumbs{ display:flex; gap:8px; margin-top:8px; overflow-x:auto; padding-bottom:4px; }
.pdp-tab-thumb{ flex:0 0 auto; width:clamp(56px,calc(6vw / var(--lw-z, 1)),84px); aspect-ratio:1; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bone-2); cursor:pointer; opacity:.62; transition:opacity .2s,border-color .2s; }
.pdp-tab-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.pdp-tab-thumb:hover{ opacity:.85; }
.pdp-tab-thumb.on{ opacity:1; border-color:var(--tg); }
.pdp-tab-text{ margin:clamp(12px,calc(1.5vw / var(--lw-z, 1)),18px) 0 0; font-family:var(--sans); font-size:clamp(13.5px,calc(1.15vw / var(--lw-z, 1)),15.5px); font-weight:300; line-height:1.65; color:var(--ink); }
/* Iconos de configuración del tipo de vivienda (los mismos 5 del hero), en la pestaña 50/50 */
.pdp-tab-feats{ display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:clamp(16px,calc(2vw / var(--lw-z, 1)),22px); padding-top:clamp(14px,calc(1.8vw / var(--lw-z, 1)),20px); border-top:1px solid var(--line); }
.pdp-tab-feats span{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--va); white-space:nowrap; }
.pdp-tab-feats svg{ width:17px; height:17px; flex:none; color:var(--be); }
/* Imagen a sangre inferior — a sangre de verdad (revisión cliente 7-ago: la contención del 24-jul
   se deshace). Ancho completo (sección sin .wrap) y alto natural, sin recorte artificial. */
.pdp-bleed-img{ display:block; width:100%; height:auto; max-height:calc(92vh / var(--lw-z, 1)); }
/* Mapa embebido de Google Maps (cuando el enlace es geolocalizable) */
.pdp-map-embed{ border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bone-2); }
.pdp-map-embed iframe{ display:block; width:100%; height:clamp(240px,calc(32vh / var(--lw-z, 1)),340px); border:0; }
.pdp-map-open{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--tg); text-decoration:none; }
.pdp-map-open:hover{ color:var(--be); }
/* ── Ficha: "More in this line" — máx 3 cards del marketplace (LawangCard), CENTRADAS ── */
.pdp-also-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,320px)); gap:clamp(18px,calc(2vw / var(--lw-z, 1)),26px); justify-content:center; padding-bottom:40px; }
/* Móvil: ficha de propiedad a 1 columna */
@media(max-width:860px){
  .pdp-info-2col{ grid-template-columns:1fr; }
  .pdp-split-section{ grid-template-columns:1fr; min-height:0; }
  .pdp-split-img{ min-height:clamp(280px,calc(62vw / var(--lw-z, 1)),400px); }
  .pdp-terr-grid{ grid-template-columns:1fr; }              /* mapa y planta 3D apilados */
}
/* Lista de puntos del aéreo para móvil (7-ago, repaso de la ficha en móvil): oculta por defecto,
   la sección ≤720px la enseña. El texto es del cliente (PDF p.6) y bajo 720px la línea+etiqueta
   superpuesta no cabe — antes se ocultaba TODO el hotspot (también el punto sobre la foto) y ese
   texto no se veía en móvil. */
.pdp-hs-list{ display:none; }
/* Punto del aereo (span.pdp-hs, distinto del div.pdp-hs de la linea+etiqueta): late en bucle para
   invitar al tap -- reiniciar la fase en cada re-render no se nota, es un bucle infinito, no una
   entrada (10-ago, microanimaciones). El transform de centrado va DENTRO del keyframe: la animacion
   pisa el `transform:translate(-50%,-50%)` inline mientras corre, asi que hay que repetirlo o el
   punto saltaria de sitio. */
@keyframes hsPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.22); } }
span.pdp-hs{ animation:hsPulse 2.4s ease-in-out infinite; }
@media(max-width:720px){
  .pdp-aerial{ aspect-ratio:4/3 !important; }               /* aéreo más alto en móvil */
  .pdp-aerial div.pdp-hs{ display:none !important; }        /* la línea+etiqueta no cabe: ver .pdp-hs-list */
  .pdp-hs-list{ display:grid; gap:13px; padding:20px clamp(20px,calc(5vw / var(--lw-z, 1)),32px) 26px; background:var(--k-noche); }
  .pdp-hs-list-i{ font-family:var(--sans); color:var(--bone); font-size:14px; line-height:1.3;
    padding-left:14px; position:relative; }
  .pdp-hs-list-i::before{ content:""; position:absolute; left:0; top:5px; width:6px; height:6px; border-radius:999px; background:var(--sc); }
  .pdp-hs-list-i b{ font-weight:700; }
  .pdp-spec-row{ align-items:flex-start; }                  /* etiquetas largas: valor arriba, no centrado */
}
/* Gallery thumbnails in property detail */
#pf-overlay .gallery-thumb { transition:transform .18s var(--ease-press),border-color .2s; }
#pf-overlay .gallery-thumb:hover { transform:scale(1.04); }
/* PropertySidebar CTA buttons */
.sidebar-cta { transition:transform .16s var(--ease-press),background .22s,color .22s,border-color .22s,opacity .22s !important; }
.sidebar-cta:active { transform:scale(0.97) !important; }

/* Pie: el de la home, desde assets/lawang-pie.js (variante «home», owner 13-oct-2026); trae su propio CSS (.lwh). */

/* ═══ Bloque «Availability» de la ficha (F7, 6-oct-2026; lámina F6 aprobada). Solo existe con datos en vivo
   (portfolio-app.js availabilityHTML). Va dentro de la columna de las fotos, a su ancho (sin max-width propio: revisión
   cliente 20-oct). Misma gramática que los pines del masterplan; cada estado se distingue
   también sin color (borde, tachado, texto). ═══ */
.avail{background:var(--surface);border:1px solid color-mix(in srgb, var(--tg) 11%, transparent);border-radius:11px;padding:28px clamp(18px,calc(3vw / var(--lw-z, 1)),36px) 30px;margin-top:clamp(20px,calc(2.2vw / var(--lw-z, 1)),32px);font-family:'Neue Kabel','Jost',system-ui,sans-serif;color:var(--ink)}
.avail .kick{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tg-ink)}
.avail .av-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.avail h2{margin:6px 0 0;font-weight:500;font-size:clamp(24px,calc(3vw / var(--lw-z, 1)),34px);letter-spacing:.04em;text-transform:uppercase;color:var(--be);line-height:1.1}
.avail h2 b{font-weight:500;color:var(--tg-dark)}
.avail .av-legend{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--ink-80)}
.avail .av-legend li{display:flex;align-items:center;gap:8px}
.avail .av-legend i{display:inline-block;width:10px;height:10px;border-radius:50%}
.avail .sg-ok{background:var(--tg)}
.avail .sg-held{background:var(--sc)}
.avail .sg-gone{background:var(--bone-2);box-shadow:inset 0 0 0 1px var(--line)}
.avail .av-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;margin:20px 0 22px;gap:2px}
.avail .av-bar i{display:block;height:100%}
.avail .av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.avail .pl{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;border-radius:8px;text-decoration:none;min-height:64px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s}
.avail .pl b{font-size:15px;font-weight:600;letter-spacing:.04em}
.avail .pl em{font-style:normal;font-size:12px;color:var(--ink-80)}
.avail .pl u{text-decoration:none;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.avail .pl-ok{background:var(--tg-light);border-color:color-mix(in srgb, var(--tg) 28%, transparent)}
.avail .pl-ok u{color:var(--tg-dark)}
.avail .pl-link{cursor:pointer}
.avail .pl-link:hover{transform:translateY(-3px);border-color:var(--tg)}
.avail .pl-link:focus-visible{outline:2px solid var(--tg);outline-offset:2px}
.avail .pl-held{background:#fff;border-style:dashed;border-color:var(--sc)}
.avail .pl-held u{color:var(--tg-ink)}
.avail .pl-gone{background:var(--bone-2);border-color:var(--bone-2);color:var(--warm-38)}
.avail .pl-gone b{text-decoration:line-through;text-decoration-thickness:1px}
.avail .pl-gone em,.avail .pl-gone u{color:var(--warm-38)}
.avail .av-foot{font-size:13px;line-height:1.6;color:var(--ink-80);margin:20px 0 0;max-width:62ch}
.avail.av-na{border-style:dashed}
.avail .av-cta{display:inline-block;margin-top:18px;padding:12px 24px;border-radius:999px;background:var(--tg);color:var(--bone);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.avail .av-cta:hover{background:var(--tg-dark)}
.avail .av-cta:focus-visible{outline:2px solid var(--tg);outline-offset:3px}
@media(max-width:560px){.avail .av-grid{grid-template-columns:repeat(3,1fr)}.avail .av-legend{gap:12px}}
@media(prefers-reduced-motion:reduce){.avail .pl{transition:none}}

/* ════════════════════════════════════════════════════════════
   Lawang — Property Card (FUENTE ÚNICA compartida)
   Usado por index.html (teaser) y thecollection.html (marketplace).
   Valores explícitos (sin variables de stack) para que sea portable.
   ════════════════════════════════════════════════════════════ */
.lw-prop { padding:3px; background:color-mix(in srgb, var(--tg) 5%, transparent); border:1px solid color-mix(in srgb, var(--tg) 11%, transparent); border-radius:11px;
  transition:transform .38s cubic-bezier(.16,1,.3,1), box-shadow .38s cubic-bezier(.16,1,.3,1); }
.lw-prop:hover { transform:translateY(-6px) scale(1.007); box-shadow:0 36px 80px -36px color-mix(in srgb, var(--k-scrim) 48%, transparent); }
/* line-height propio, NO heredado: index.html tiene 1.6 en el body y thecollection.html no.
   Heredándolo, el body de la card crecía ~21px, se pasaba de los 577px fijos y el navegador
   encogía .lw-prop-meta (el único hijo sin min-height) a 0.9px -> la fila de iconos desaparecía
   en la home y no en el marketplace (30-jul-2026). */
.lw-prop > a { display:flex; flex-direction:column; height:577px; background:var(--surface); border-radius:8px; overflow:hidden; text-decoration:none; color:var(--ink); line-height:normal; }
/* Guía Collection: imagen inset (margen cream + radio propio).
   27-jul: la foto pasa a ALTURA FIJA. Antes era flex:1 1 auto y absorbía la variación de texto del
   body, así que cada tarjeta enseñaba la foto de un tamaño distinto (medido: 239 a 270 px en la
   misma fila). Ahora manda la foto y es el body el que flexa; el texto se reserva su altura abajo
   (título 2 líneas, sub 2 líneas, meta 1) para que el body sea constante y nada se recorte.
   Alto de tarjeta 546 -> 577 px: la foto se queda en los 270 px de la más grande, no en los 239
   de la más pequeña. */
.lw-prop-media { position:relative; flex:0 0 270px; overflow:hidden; background:var(--k-lienzo); margin:8px 8px 0; border-radius:7px; }
.lw-prop-media.ph-jungle { background:radial-gradient(120% 100% at 20% 0%,var(--sc) 0%,transparent 55%),radial-gradient(120% 120% at 90% 30%,var(--tg-dark) 0%,transparent 60%),linear-gradient(160deg,var(--tg) 0%,var(--tg-jungle) 100%); }
.lw-prop-media.ph-sunset { background:radial-gradient(120% 90% at 75% 18%,var(--ss) 0%,transparent 50%),radial-gradient(140% 120% at 20% 80%,var(--be) 0%,transparent 60%),linear-gradient(155deg,var(--be-lt) 0%,var(--be-dk) 100%); }
.lw-prop-media.ph-ocean { background:radial-gradient(120% 100% at 30% 10%,var(--dl-lt) 0%,transparent 55%),radial-gradient(120% 120% at 85% 80%,var(--dl-dk) 0%,transparent 60%),linear-gradient(160deg,var(--dl) 0%,var(--dl-dkr) 100%); }
.lw-prop-media.ph-sand { background:radial-gradient(120% 100% at 25% 15%,var(--bone) 0%,transparent 55%),radial-gradient(120% 120% at 90% 85%,var(--sc) 0%,transparent 60%),linear-gradient(160deg,var(--ss) 0%,var(--tg) 100%); }
.lw-prop-media.ph-dusk { background:radial-gradient(120% 100% at 70% 12%,var(--sc) 0%,transparent 50%),radial-gradient(130% 120% at 15% 85%,var(--ink) 0%,transparent 62%),linear-gradient(160deg,var(--tg) 0%,var(--dusk) 100%); }
.lw-prop-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.lw-prop:hover .lw-prop-img { transform:scale(1.05); }
.lw-prop-media::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb, var(--k-scrim) 15.4%, transparent) 0%,transparent 30%,transparent 55%,color-mix(in srgb, var(--k-scrim) 35.2%, transparent) 100%); }
.lw-prop-line { position:absolute; left:14px; bottom:12px; z-index:3; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--bone) 90%, transparent); }
.lw-prop-line .lw-line-ico { width:30px; height:30px; flex-shrink:0; object-fit:contain;
  filter:drop-shadow(0 1px 3px color-mix(in srgb, var(--k-scrim) 55%, transparent)); }
/* Chip de vista outlined/glassy (guía): borde claro + fondo translúcido oscuro */
.lw-prop-view { position:absolute; right:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--bone) 95%, transparent);
  background:color-mix(in srgb, var(--k-scrim) 32%, transparent); border:1px solid color-mix(in srgb, var(--bone) 70%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:5px 13px 5px 9px; border-radius:999px; box-shadow:0 4px 14px -4px color-mix(in srgb, var(--k-scrim) 40%, transparent); }
.lw-prop-view img { width:auto; height:19px; flex-shrink:0; object-fit:contain; }
.lw-prop-body { padding:18px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-height:0; }
.lw-prop-loc { font-family:var(--sans); font-size:12px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--tg-ink); }
.lw-prop-loc b { font-weight:700; color:var(--tg); }
.lw-prop-pills { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pf-pill { display:inline-flex; align-items:center; gap:7px; padding:3px 9px; border-radius:999px; font-family:var(--sans);
  font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); color:var(--ink-85); background:rgba(255,255,255,.4); white-space:nowrap; }
.pf-pill.ten { background:var(--tg-light); color:var(--ink-85); border-color:color-mix(in srgb, var(--tg) 28%, transparent); }
.pf-pill.built { background:var(--tg); color:var(--bone); border-color:var(--tg); }
.pf-pill.constr { background:var(--be); color:var(--bone); border-color:var(--be); }
.pf-pill.plan { background:transparent; color:var(--ink-85); border-color:var(--line); }
/* Título uppercase Burnt Earth + sub uppercase Deep Lagoon (guía Collection) */
/* Título y sub a EXACTAMENTE 2 líneas (máximo por clamp, mínimo por min-height) y meta a 1: así el
   body mide siempre lo mismo y la foto de arriba puede tener altura fija. Con 1 sola línea de
   título queda un hueco reservado — es lo que alinea el sub, la meta y el precio entre tarjetas. */
.lw-prop-title { font-family:var(--sans); font-weight:500; font-size:29px; letter-spacing:.04em; text-transform:uppercase; color:var(--be); margin:0; line-height:1.05;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.1em; }
.lw-prop-sub { font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-50); line-height:1.5; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:3em; }
/* flex-shrink:0 — la fila de specs es de altura fija por diseño (1 línea). Sin esto, cualquier
   desbordamiento futuro del body la aplasta en silencio en vez de notarse. */
/* gap y margen del punto ajustados 7-ago: a 264px de ancho útil (tarjeta mínima 240px del grid),
   los 3 valores (m²·rooms·m² land) con los 10px de antes sumaban 278px — el texto del último se
   recortaba contra el overflow:hidden de arriba. Repaso móvil de la ficha de producto lo cazó. */
.lw-prop-meta { font-family:var(--sans); font-size:13.5px; color:var(--ink-70); display:flex; align-items:center; gap:6px; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; margin-top:4px; flex-shrink:0; }
.lw-prop-meta .lw-m { display:inline-flex; align-items:center; gap:5px; font-weight:500; }
.lw-prop-meta .lw-m b { font-weight:700; }
.lw-prop-meta .lw-m .lw-mi { width:16px; height:16px; flex-shrink:0; color:var(--ink-70); }
.lw-prop-meta .lw-m + .lw-m::before { content:"·"; margin-right:6px; color:var(--warm-74); }
.lw-prop-meta .lw-m-txt { color:var(--ink-70); }
.lw-prop-foot { display:flex; align-items:center; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.lw-prop-price { font-family:var(--sans); font-weight:600; font-size:28px; color:var(--tg-deep); }
.lw-prop-price .from { font-size:.5em; font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin-right:8px; }

/* ── Estado de la unidad sobre la foto (F7, 6-oct-2026; lámina F6 aprobada por el owner) ─────────────────
   Esquina sup. izq. (la dcha es la vista); no toca los 577 px de la tarjeta. Solo existe con la intranet como
   fuente (LawangCard.render con opts.live). Cada estado se distingue también sin color: punto lleno / aro / aro
   punteado y el propio texto. El fondo va algo más opaco que el de la vista (.54 en la lámina): medido sobre las
   fotos reales, .54 da 4,17-4,34:1 en River, Tangkuban y Riverfront III (<4,5); .72 da >=7,4:1 en las 11. max-width: el chip
   de vista ocupa hasta ~135 px; si el estado no cabe a su lado (tarjeta de 311 px) pasa a dos líneas en vez de pisarlo. */
.lw-prop-state { position:absolute; left:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:8px; max-width:calc(100% - 24px - 160px);
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; line-height:1.25; color:color-mix(in srgb, var(--bone) 98%, transparent);
  background:color-mix(in srgb, var(--k-scrim) 72%, transparent); border:1px solid color-mix(in srgb, var(--bone) 70%, transparent); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:6px 13px 6px 10px; border-radius:14px; }
.lw-prop-state i { width:8px; height:8px; border-radius:50%; flex:none; background:var(--k-ok); }
.lw-prop-state.st-few i { background:var(--bone); box-shadow:0 0 0 3px color-mix(in srgb, var(--bone) 28%, transparent); }
.lw-prop-state.st-held i { background:transparent; border:2px solid var(--ss); }
.lw-prop-state.st-gone i { background:var(--warm-56); }
.lw-prop-state.st-na { border-style:dashed; }
.lw-prop-state.st-na i { background:transparent; border:2px dotted var(--ss); }
.lw-prop.is-sold .lw-prop-img { filter:grayscale(.85) brightness(.92); }
.lw-prop-price.sold-price { font-size:22px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--warm-38); }

/* lawang-cabecera.css — la cabecera de las páginas del menú: The Land y Projects (/projects,
   servido por thecollection.php), The Villas (/thevillas) y The Soul (/thesoul).                                       19-oct-2026
   FUENTE ÚNICA, como assets/lawang-pie.js para el pie. Owner: «la cabecera y el footer tienen que ser
   EXACTAMENTE IGUALES» al pasar de una sección a otra; cada página llevaba su copia del CSS y The Soul
   se había quedado con la de la home (menú a 300 y .13em, botón en otro verde, otra hamburguesa), así
   que el menú cambiaba de grosor y de color al entrar en ella.
   Se enlaza ANTES del <style> de la página: lo que la página necesite de verdad distinto (la ficha
   fantasma #topbar.pdp de /thecollection, el position:fixed de /thesoul por su scroll-snap) gana por
   orden o por especificidad. Ningún aspecto de la barra se vuelve a escribir en la página.
   Valores literales en vez de las variables de cada página: --gut, --va o --sans no valen lo mismo en
   las tres y la barra tiene que medir igual en todas. La home (index.html) conserva su barra propia. */


#topbar{position:sticky;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(.5rem,calc(1.2vh / var(--lw-z, 1)),.8rem) clamp(1.4rem,calc(4vw / var(--lw-z, 1)),3.4rem);background:color-mix(in srgb, var(--bar) 94%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 color-mix(in srgb, var(--ss) 30%, transparent);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:auto}
/* El suavizado se hereda del <body> de cada página y no era el mismo: /thevillas antialiased, /projects el del
   sistema y /thesoul antialiased + optimizeLegibility. En un Mac el menú se veía con otro grosor de una página
   a otra aunque fuera la misma fuente a 400 (owner, 19-oct-2026). Se fija aquí, en la barra. */
#topbar > *{pointer-events:auto}

/* Logo verde (máscara del PNG). La versión blanca solo la usa la ficha fantasma de /thecollection. */
#topbar #logo{flex:none;min-width:0}
#topbar #logo-inner{display:flex;align-items:center;padding:6px 0;text-decoration:none}
#topbar #logo-inner img{height:23px;width:auto;display:block}
#topbar #logo-inner .ll-white{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
#topbar #logo-inner .ll-dark{display:none;height:23px;width:165px;background-color:var(--logo-ink);
  -webkit-mask:var(--m-logo-mascara,none) left center/contain no-repeat;
          mask:var(--m-logo-mascara,none) left center/contain no-repeat}
#topbar:not(.pdp) #logo-inner .ll-white,#topbar #logo.dark .ll-white{display:none}
#topbar:not(.pdp) #logo-inner .ll-dark,#topbar #logo.dark .ll-dark{display:block}

/* Menú en píldora, centrado */
#topbar #nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:clamp(1.2rem,calc(2.6vw / var(--lw-z, 1)),2.4rem);
  height:auto;background:rgba(255,255,255,.5);border:1px solid color-mix(in srgb, var(--tg) 28%, transparent);border-radius:40px;padding:.6rem 1.7rem;
  -webkit-backdrop-filter:none;backdrop-filter:none}
#topbar .nav-link{position:relative;font-family:var(--sans);font-weight:400;font-size:.64rem;letter-spacing:.22em;
  color:color-mix(in srgb, var(--k-scrim) 72%, transparent);text-transform:uppercase;text-decoration:none;text-shadow:none;cursor:pointer;white-space:nowrap;
  transition:color .3s,letter-spacing .3s}
#topbar .nav-link::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:var(--tg);box-shadow:none;
  transform:scaleX(0);transform-origin:center;transition:transform .32s cubic-bezier(.16,1,.3,1)}
#topbar .nav-link:hover{color:var(--tg);letter-spacing:.25em}
#topbar .nav-link:hover::after,#topbar .nav-link.active::after{transform:scaleX(1)}
#topbar .nav-link.active{color:var(--tg);font-weight:500}

#topbar #nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:clamp(.7rem,calc(1.5vw / var(--lw-z, 1)),1.2rem);flex:none;min-width:0}

/* Idioma (y la moneda de /thecollection, que reutiliza .nav-lang/.lang-menu) */
#topbar .nav-lang-wrap{position:relative}
#topbar .nav-lang{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:400;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:color-mix(in srgb, var(--k-scrim) 62%, transparent);text-shadow:none;background:none;border:none;cursor:pointer;white-space:nowrap;transition:color .3s}
#topbar .nav-lang .lang-abbr{display:none}
#topbar .nav-lang .caret{font-size:.62rem;opacity:.7;transition:transform .28s}
#topbar .nav-lang[aria-expanded="true"] .caret{transform:rotate(180deg)}
#topbar .nav-lang:hover{color:var(--tg)}
#topbar .lang-menu{position:absolute;top:calc(100% + 14px);right:0;min-width:158px;list-style:none;margin:0;padding:6px;border-radius:14px;
  background:rgba(255,255,255,.98);border:1px solid color-mix(in srgb, var(--tg) 20%, transparent);box-shadow:0 20px 44px -18px color-mix(in srgb, var(--tg) 28%, transparent);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .24s ease,transform .24s,visibility .24s;z-index:160}
#topbar .lang-menu.open{opacity:1;visibility:visible;transform:none}
#topbar .lang-menu li{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--sans);font-weight:400;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb, var(--k-scrim) 72%, transparent);padding:10px 13px;border-radius:9px;cursor:pointer;transition:background .2s,color .2s}
#topbar .lang-menu li:hover{background:color-mix(in srgb, var(--tg) 10%, transparent);color:var(--tg)}
#topbar .lang-menu li.active{color:var(--tg)}
#topbar .lang-menu li.active::after{content:'✓';font-size:.78rem;color:var(--tg)}
#topbar .lang-opt{display:inline-flex;align-items:center;gap:.6rem}

/* Botón de WhatsApp: píldora verde con el círculo de WhatsApp */
#topbar .nav-cta{display:inline-flex;align-items:center;gap:.55rem;height:auto;text-decoration:none;border:1px solid var(--tg);padding:8px 20px 8px 9px;border-radius:30px;
  font-family:var(--sans);font-weight:400;font-size:.6rem;letter-spacing:.22em;color:var(--bone);text-transform:uppercase;
  white-space:nowrap;cursor:pointer;background:var(--tg);transition:all .35s}
#topbar .nav-cta .wa{width:20px;height:20px;border-radius:50%;background:var(--k-wa);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;line-height:1}
#topbar .nav-cta .wa svg{width:13px;height:13px;display:block}
#topbar .nav-cta:hover{background:var(--tg-hover);color:var(--bone);border-color:var(--tg-hover)}

/* Hamburguesa (≤1000 px) */
#topbar .nav-burger{display:none;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid color-mix(in srgb, var(--tg) 28%, transparent);background:rgba(255,255,255,.5);cursor:pointer;
  flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px}
#topbar .nav-burger span{display:block;width:16px;height:1.5px;background:var(--ink);box-shadow:none;transition:transform .3s,opacity .3s}
#topbar.nav-open .nav-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
#topbar.nav-open .nav-burger span:nth-child(2){opacity:0}
#topbar.nav-open .nav-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:1000px){
  #topbar .nav-burger{display:inline-flex}
  #topbar #nav{display:none;position:absolute;top:100%;left:0;right:0;transform:none;flex-direction:column;align-items:stretch;gap:0;
    border-radius:0;border:0;border-top:1px solid color-mix(in srgb, var(--ss) 40%, transparent);background:color-mix(in srgb, var(--bar) 98%, transparent);box-shadow:none;padding:.5rem clamp(20px,calc(5vw / var(--lw-z, 1)),72px) 1rem}
  #topbar.nav-open #nav{display:flex}
  #topbar .nav-link{width:auto;padding:14px 0;font-size:.72rem}
  #topbar .nav-link::after{display:block;bottom:8px;right:auto;width:28px}
}
/* Móvil: botón solo con el icono e idioma abreviado (EN/ES/ID). /projects pinta .lang-abbr en el botón;
   /thesoul lo añade por JS en su script de idioma (su marcado estático es el de la home). */
@media(max-width:700px){
  #topbar{padding-inline:1rem}
  #topbar #nav-actions{gap:.6rem}
  #topbar .nav-cta{padding:8px 9px}
  #topbar .nav-cta span:not(.wa){display:none}
  #topbar .nav-lang:has(.lang-abbr) > span:not(.caret):not(.lang-abbr){display:none}
  #topbar .nav-lang > span.lang-abbr{display:inline}
}
@media(max-width:560px){
  #topbar #logo-inner img{height:20px}
  #topbar #logo-inner .ll-dark{height:20px;width:144px}
}


/* escala.css — ESCALA COMPACTA EN PORTÁTIL de todo lawangproperties.com (19-oct-2026). FUENTE ÚNICA del corte.

   Por qué: el owner, en un MacBook (ventana de ~1390 × 645 px con las barras de Chrome), veía la web, la intranet y el
   portal «gigantes» a 100 % —botones cortados, el subtítulo de /modelo montado sobre la barra de estancias— y bien al
   80 % de zoom del navegador. La web se dibujó para una ventana más alta y más ancha. En portátil (de 1024 a 1599 px de
   ancho) y solo con ratón (una tablet apaisada sigue a tamaño de dedo), la página entera va al 80 %.

   Cómo: `--lw-z` vale .8 y `html{zoom:var(--lw-z)}`. El zoom de CSS, a diferencia del del navegador, también encoge las
   unidades de ventana (100vh mediría el 80 % de la pantalla; medido en Chrome 155 y WebKit 26.6), así que en todo el
   repo cada `Nvh`/`Nvw` va escrito `calc(Nvh / var(--lw-z, 1))` — lo pone y lo vigila `tools/escala_vh.py` de la
   agencia, y Tailwind lo recibe al compilar (`empaqueta_css.py`). El JS que coloca algo con getBoundingClientRect lo
   divide por `lwEscala()`. Los cortes @media siguen midiendo la ventana real.

   Quién la carga: las páginas públicas y el portal (<link> en su <head>, antes que nada que se pinte). La intranet la
   lleva en shell.css y nav-montaje.css, que cargan todas sus pantallas: mismos números, y si cambian aquí, cambian allí.
   Interruptor: borrar el bloque de abajo (y sus dos gemelas) y todo vuelve a medir lo de antes, sin tocar nada más. */
@media screen and (min-width:1024px) and (max-width:1599px) and (pointer:fine){
  :root{--lw-z:.8}
  html{zoom:var(--lw-z)}
}