/* Lotificadora El Volcán — sitio web (staging). Tokens, faces and pattern from the brand manual v1.0 (Luis Gallego,
   «Claude outputs/elvolcan-site»), read only. Commission 656: Luis's corrections of 11/10/2026 — the nav and footer in the
   manual's purple and 1920 px wide, no gradient rule under the nav, no line in the eyebrows, David's photographs (one on the
   first screen, one tall band with parallax), the location map, real contact links. The fourth lot state, «En desarrollo», and
   the photographs' treatment are proposals for the manual (Commission 650 §4 row 5; this commission's report). */
@font-face{font-family:"Krona One";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/krona-one-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2")}

:root{
  --white:#FFFFFF; --purple:#231942; --velvet:#69306D; --electric:#8761FF; --pink:#EB87A6; --cyan:#4D9DE0;
  --bg:#FFFFFF; --tint:#F5F3FA; --ink:#231942; --muted:#5E5678; --line:#DAD5E6; --line-2:#8E86A6; --link:#6A42E8; --info:#1F6FB5; --ok:#1E7B4F;
  --on-dark:#FFFFFF; --on-dark-2:#CFC8E3; --on-dark-3:#A99FC8; --dark-line:#3A2E63; --purple-2:#2C2052;
  --shadow-sm:0 1px 2px rgba(35,25,66,.10); --shadow-md:0 8px 24px rgba(35,25,66,.14); --shadow-lg:0 24px 56px rgba(35,25,66,.22);
  --fd:"Krona One","Arial Black","Helvetica Neue",sans-serif;
  --fs:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --maxw:1320px; --maxw-chrome:1920px; --pad:clamp(16px,5vw,72px);
  /* the plan */
  --land:#FBFAFD; --road:#E7E3F0; --green:#E4F1EA; --green-ink:#1E7B4F; --lbl:#5E5678;
  --st-available:var(--cyan); --st-reserved:var(--pink); --st-sold:var(--muted); --st-development:var(--tint); --dev-edge:var(--line-2);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--fs);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;text-wrap:pretty}
::selection{background:var(--electric);color:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--electric);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.wrap.chrome{max-width:var(--maxw-chrome)} /* the nav and the footer: 1920 px (Luis, 11/10/2026, item 8) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:8px;
  font:600 15px/1.2 var(--fs);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn.cta{background:var(--velvet);color:#fff}
.btn.cta:hover{background:#561F5A}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn.light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.sm{min-height:44px;padding:10px 16px;font-size:14px}

/* ---------- header: the manual's purple, the alt logo (manual ch. 04: «sobre el púrpura principal») ---------- */
.hd{position:sticky;top:0;z-index:900;background:var(--purple);color:var(--on-dark)}
.hd-in{display:flex;align-items:center;gap:24px;height:76px}
.hd .logo{height:48px;width:auto}
.hd nav{margin-left:auto;display:flex;gap:2px}
.hd nav a{color:var(--on-dark-2);text-decoration:none;font-weight:500;font-size:15px;padding:10px 14px;border-radius:8px}
.hd nav a:hover{color:#fff;background:var(--purple-2)}
.hd .btn.cta{background:var(--velvet)}
.hd .btn.cta:hover{background:#7D3A82}
@media (max-width:899px){.hd-in{height:62px;gap:12px}.hd .logo{height:36px}.hd nav{display:none}.hd .btn{margin-left:auto}}
@media (max-width:419px){.hd .btn{display:none}}

/* ---------- type ---------- */
.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--velvet)} /* no line (Luis, item 2) */
h1,h2.title{font-family:var(--fd);font-weight:400;letter-spacing:-.01em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,72px)}
h2.title{font-size:clamp(24px,3.4vw,40px);margin-top:14px}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);font-weight:300;max-width:56ch;margin-top:18px;line-height:1.6}
.body{font-size:17px;max-width:60ch;margin-top:18px}
.note{font-size:14px;color:var(--muted);margin-top:12px;max-width:68ch}
section{position:relative;padding:clamp(64px,9vh,112px) 0}
section.alt{background:var(--tint)}

/* ---------- 1 · first screen: David's aerial, the purple over it only where the words sit ---------- */
.hero{padding:0;background:var(--purple);color:#fff;overflow:hidden}
.hero-ph{position:absolute;inset:0}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero-ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(35,25,66,.8) 0%,rgba(35,25,66,.5) 40%,rgba(35,25,66,0) 66%),linear-gradient(0deg,rgba(35,25,66,.5) 0%,rgba(35,25,66,0) 30%)} /* lighter after the critic (C656): the aerial read murky */
.hero-in{position:relative;min-height:min(78svh,760px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:72px;padding-bottom:clamp(36px,6vh,64px)}
.hero h1{color:#fff;max-width:12ch}
.hero .lead{color:#E6E1F2;font-weight:400;max-width:46ch}
.hero .lead b{color:#fff;font-weight:600}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .avail{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:14px;color:var(--on-dark-2)}
.hero .avail b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.hero .avail i{width:12px;height:12px;border-radius:3px;background:var(--cyan);flex:none}
.hero .credit-ph{position:absolute;right:var(--pad);bottom:14px;font-size:12px;color:var(--on-dark-3)}
@media (max-width:599px){
  .hero-ph img{object-position:72% 60%} /* the street and the poles, not only the peak */
  .hero-ph::after{background:linear-gradient(0deg,rgba(35,25,66,.92) 0%,rgba(35,25,66,.72) 52%,rgba(35,25,66,.18) 100%)}
  .hero-in{min-height:min(84svh,680px)}
  .hero .acts .btn{flex:1 1 100%}
  .hero .credit-ph{display:none}
}

/* ---------- 2 · the map ---------- */
.mapsec{padding-top:clamp(48px,7vh,80px);padding-bottom:clamp(40px,6vh,64px)}
.mapsec-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 48px;align-items:end}
.mapsec-top .acts{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:899px){.mapsec-top{grid-template-columns:minmax(0,1fr)}.wide-only{display:none}}
.maplead{margin-top:14px;font-size:16px;color:var(--muted);max-width:62ch}
.mount{margin-top:22px}
.scale-note{font-size:13px;color:var(--muted);margin-top:10px}
/* the live map from 900 px up; a still of the plan below (plan §2 row 2) */
.still{display:none}
@media (max-width:899px){
  .mount.hero-map{display:none}
  .still{display:block;margin-top:24px}
  .still a{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--land)}
  .still .legend-s{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .still .btn{margin-top:16px;width:100%}
}

/* ---------- state chips: a word and a mark each, never colour alone (manual ch. 05) ---------- */
.status{display:inline-flex;align-items:center;gap:8px;min-height:24px;padding:2px 8px;border-radius:4px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--purple);white-space:nowrap}
.status::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;flex:none}
.status.available{background:var(--cyan)}
.status.reserved{background:var(--pink)}
.status.reserved::before{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.status.sold{background:var(--muted);color:#fff}
.status.sold::before{height:2px;border-radius:0}
.status.development{background:var(--tint);box-shadow:inset 0 0 0 1px var(--dev-edge);background-image:none}
.status.development::before{background:transparent;border:1.5px dashed currentColor;border-radius:2px}

/* ---------- the count ---------- */
.count{margin-top:clamp(28px,4vh,44px)}
.figs{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.fig{background:var(--bg);padding:22px;display:flex;flex-direction:column;gap:10px}
.fig b{font-size:clamp(34px,4vw,48px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fig span{font-size:14px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.fig:not(.all) span::before{content:"";width:10px;height:10px;border-radius:2px;flex:none}
.fig.st-available span::before{background:var(--cyan)}
.fig.st-reserved span::before{background:var(--pink);box-shadow:inset 0 0 0 2px var(--purple)}
.fig.st-sold span::before{background:var(--muted);height:3px;border-radius:0}
.fig.st-development span::before{background:var(--tint);border:1.5px dashed var(--dev-edge)}
.fig.all{background:var(--purple);color:#fff}
.fig.all span{color:var(--on-dark-2)}
.asof{margin-top:12px;font-size:14px;color:var(--muted)}
@media (max-width:899px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}.fig.all{grid-column:1/-1}}

/* ---------- 3 · what the project has (David's adverts) ---------- */
.has{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.has-ph{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5}
.has-ph img{width:100%;height:100%;object-fit:cover}
.has-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;font-size:13px;color:#fff;background:linear-gradient(0deg,rgba(35,25,66,.8),rgba(35,25,66,0))}
.water{margin-top:22px;padding:20px 22px;border-radius:12px;background:var(--purple);color:#fff}
.water b{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.water span{display:block;margin-top:6px;color:var(--on-dark-2);font-size:15px}
.points{list-style:none;margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--line)}
.points li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}
.points li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--cyan);flex:none;transform:translateY(1px)}
@media (max-width:899px){.has{grid-template-columns:minmax(0,1fr)}.has-ph{aspect-ratio:4/3;order:2}}
@media (max-width:479px){.points{grid-template-columns:minmax(0,1fr)}}

/* ---------- 4 · the project ---------- */
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:899px){.two{grid-template-columns:minmax(0,1fr)}}
.specs{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.spec{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--bg)}
.spec .num{display:block;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}
.spec .lb{display:block;font-size:13px;color:var(--muted);margin-top:6px}
@media (max-width:419px){.specs{grid-template-columns:minmax(0,1fr)}}
.gallery{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:clamp(220px,24vw,340px);gap:14px;margin-top:clamp(36px,5vw,56px)}
.gallery figure{position:relative;border-radius:14px;overflow:hidden;background:var(--tint)} /* one row height: three photos, one line */
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;font-size:13px;color:#fff;background:linear-gradient(0deg,rgba(35,25,66,.78),rgba(35,25,66,0))}
@media (max-width:767px){.gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:clamp(150px,34vw,260px)}.gallery figure:first-child{grid-column:1/-1}}
@media (max-width:419px){.gallery{grid-template-columns:minmax(0,1fr);grid-auto-rows:clamp(190px,62vw,260px)}}

/* ---------- 5 · the tall band: one photograph, purple over it, parallax (off under reduced motion) ---------- */
.band{position:relative;min-height:clamp(520px,92vh,900px);padding:0;overflow:hidden;background:var(--purple);color:#fff;display:flex;align-items:flex-end}
.band-ph{position:absolute;left:0;right:0;top:-18%;height:136%;will-change:transform}
.band-ph img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(35,25,66,.9) 0%,rgba(35,25,66,.45) 40%,rgba(35,25,66,.12) 70%,rgba(35,25,66,.3) 100%)}
.band-in{position:relative;z-index:1;width:100%;padding-bottom:clamp(48px,9vh,96px)}
.band .eyebrow{color:var(--pink)}
.band h2.title{color:#fff;font-size:clamp(28px,4.4vw,56px);max-width:16ch}
.band p{margin-top:16px;max-width:46ch;color:var(--on-dark-2);font-size:clamp(16px,1.5vw,19px)}
@media (prefers-reduced-motion:reduce){.band-ph{top:0;height:100%;transform:none!important}}

/* ---------- 6 · location, with the map ---------- */
.loc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:899px){.loc{grid-template-columns:minmax(0,1fr)}}
.rules{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:26px;border-top:1px solid var(--line)}
.rule{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.rule .k{font-size:14px;color:var(--muted)}
.rule .v{font-size:16px;font-weight:700;text-align:right}
.loc .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.geo{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--land)}
.geo iframe{display:block;width:100%;height:clamp(320px,46vh,480px);border:0}
.geo p{padding:10px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);background:var(--bg)}

/* ---------- 7 · financing ---------- */
.big{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.big b{font-size:clamp(72px,11vw,132px);font-weight:700;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.big span{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--velvet)}

/* ---------- 8 · contact ---------- */
.contact{background:var(--purple);color:#fff}
.contact .eyebrow{color:var(--pink)}
.contact h2.title{color:#fff}
.contact .say{font-size:clamp(19px,2.2vw,26px);font-weight:300;max-width:34ch;line-height:1.35;margin-top:18px;color:var(--on-dark-2)}
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px;max-width:860px}
.route{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:14px;background:var(--purple-2);border:1px solid var(--dark-line);color:#fff;text-decoration:none;transition:border-color .2s,background .2s}
.route:hover{border-color:var(--on-dark-3);background:#33265E}
.route .k{font-size:13px;color:var(--on-dark-3);display:flex;align-items:center;gap:8px}
.route .k svg{width:18px;height:18px}
.route .v{font-size:clamp(18px,1.8vw,22px);font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.route.wa{background:var(--velvet);border-color:var(--velvet)}
.route.wa:hover{background:#7D3A82}
.route.wa .k{color:#F1DDEE}
@media (max-width:599px){.routes{grid-template-columns:minmax(0,1fr)}}

/* ---------- 9 · footer: the manual's purple, 1920 px, the stacked alt logo linked home ---------- */
.ft{background:var(--purple);color:var(--on-dark-2);font-size:14px;border-top:1px solid var(--dark-line)}
.ft-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px 48px;padding-top:clamp(48px,7vh,72px);padding-bottom:40px}
.ft .brand a{display:inline-block;border-radius:8px}
.ft .logo-v{width:150px;height:auto}
.ft .brand p{margin-top:18px;max-width:30ch;line-height:1.55}
.ft h3{font:600 12px/1.2 var(--fs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);margin-bottom:14px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft a{color:var(--on-dark-2);text-decoration:none}
.ft a:hover{color:#fff;text-decoration:underline}
.ft .st{display:flex;flex-direction:column;gap:6px}
.ft .st span{display:inline-flex;align-items:center;gap:8px}
.ft .st i{width:10px;height:10px;border-radius:2px;flex:none}
.ft .st .a i{background:var(--cyan)} .ft .st .r i{background:var(--pink);box-shadow:inset 0 0 0 2px #fff}
.ft-base{border-top:1px solid var(--dark-line)}
.ft-base .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-top:18px;padding-bottom:22px;font-size:13px;color:var(--on-dark-3)}
@media (max-width:1023px){.ft-in{grid-template-columns:repeat(2,minmax(0,1fr))}.ft .brand{grid-column:1/-1}}
@media (max-width:479px){.ft-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- reveal (manual: fade-in on scroll; never on the map) ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- /mapa/ ---------- */
.mp-top{padding:28px 0 0}
.mp-top h1{font-size:clamp(26px,3.6vw,40px);margin-top:12px}
.mp-top .lead{font-size:16px;margin-top:10px}
.mp-main{padding-bottom:40px}

/* =====================================================================================================
   The map (js/planmap.js): one code, two mounts — the first screen from 900 px up (hero) and /mapa/ (full)
   ===================================================================================================== */
.pm{position:relative}
.pm-chips{display:flex;gap:8px;flex-wrap:wrap}
.pm-chip{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:8px;padding:6px 12px;min-height:40px;
  font-size:14px;color:var(--ink);background:var(--bg);cursor:pointer}
.pm-chip b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.pm-chip input{position:absolute;opacity:0;width:1px;height:1px}
.pm-chip:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--tint)}
.pm-chip:has(input:focus-visible){outline:2px solid var(--electric);outline-offset:2px}
.mk{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
.mk.available{background:var(--cyan)}
.mk.reserved{background:var(--pink);box-shadow:inset 0 0 0 2px var(--purple)}
.mk.sold{background:var(--muted);position:relative}
.mk.sold::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:#fff}
.mk.development{background:var(--tint);border:1.5px dashed var(--dev-edge)}

.pm-filters{border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.pm-filters summary{padding:12px 16px;cursor:pointer;font-weight:600;font-size:15px;min-height:44px}
.pm-filters summary .cnt{font-weight:400;color:var(--muted)}
.pm-fgrid{display:grid;gap:14px;padding:0 16px 14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.pm-fgrid{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;align-items:end}}
.pm-fgrid fieldset{border:0;min-width:0}
.pm-fgrid legend{font-size:13px;font-weight:600;margin-bottom:6px;display:flex;gap:8px;flex-wrap:wrap}
.pm-fgrid legend output{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.pm-range{display:grid;grid-template-columns:2.6em minmax(0,1fr);align-items:center;gap:0 6px}
.pm-range span{font-size:12px;color:var(--muted)}
.pm input[type=range]{width:100%;accent-color:var(--velvet);height:32px}
.pm select{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:6px 8px}
.pm button{font:inherit;cursor:pointer}
.pm .ghostb{background:transparent;border:1.5px solid var(--line-2);border-radius:8px;color:var(--ink);padding:8px 14px;min-height:40px;font-size:14px;font-weight:600}

.pm-tabs{display:none;margin-top:12px}
.pm-tabs .seg{display:flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;width:100%}
.pm-tabs button{flex:1;border:0;background:transparent;min-height:44px;font-weight:600;color:var(--muted)}
.pm-tabs button[aria-selected=true]{background:var(--purple);color:#fff}

.pm-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 320px;margin-top:14px}
.pm-box{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--land);aspect-ratio:1104/600}
.pm-full .pm-box{aspect-ratio:1104/640}
.pm svg.plan{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.pm svg.plan.dragging{cursor:grabbing}
.pm-legend{display:none;gap:6px;flex-wrap:wrap;margin:0} /* from 900 px up the status chips above the plan carry the same counts */
.pm-zoom{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}
.pm-zoom button{width:40px;height:40px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);color:var(--ink);font-size:20px;font-weight:600;box-shadow:var(--shadow-sm)}
.pm-hint{margin:8px 2px 0;font-size:13px;color:var(--muted)}

/* the plan: 1 m = 4 units */
.pm .land{fill:var(--land)}
.pm .street{fill:var(--road)} .pm .road-band{fill:none;stroke:var(--road);stroke-width:32;stroke-linejoin:round}
.pm .green{fill:var(--green)}
.pm .lbl{fill:var(--lbl);font:600 12px var(--fs);text-anchor:middle;dominant-baseline:central;pointer-events:none;letter-spacing:.12em;text-transform:uppercase}
.pm .lbl.gr{fill:var(--green-ink);font-size:11px}
.pm .lbl.rd{font-size:10px;letter-spacing:.06em}
.pm .bbadge{pointer-events:none} .pm .bbadge circle{fill:var(--purple)}
.pm .bbadge text{fill:#fff;font:400 13px var(--fd);text-anchor:middle;dominant-baseline:central}
.pm .north{pointer-events:none} .pm .north path{fill:var(--lbl)} .pm .north text{fill:var(--lbl);font:600 12px var(--fs);text-anchor:middle}
.pm .lot{cursor:pointer;outline:none}
.pm .lot polygon{stroke:#fff;stroke-width:2;stroke-linejoin:round;transition:fill-opacity .15s}
.pm .lot text{fill:var(--purple);font:700 14px var(--fs);font-variant-numeric:tabular-nums;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.pm .lot.st-available polygon{fill:var(--st-available)}
.pm .lot.st-reserved polygon{fill:var(--st-reserved);stroke:var(--purple);stroke-width:3}
.pm .lot.st-sold polygon{fill:var(--st-sold)}
.pm .lot.st-sold text{fill:#fff;text-decoration:line-through}
.pm .lot.st-development polygon{fill:var(--st-development);stroke:var(--dev-edge);stroke-width:1.5;stroke-dasharray:5 4}
.pm .lot.dim polygon{fill-opacity:.18} .pm .lot.dim text{opacity:.35}
.pm svg.nolbl .lot text{display:none}
.pm .lot.hl polygon,.pm .lot:hover polygon{stroke:var(--purple);stroke-width:3.5;stroke-dasharray:none}
.pm .lot:focus-visible polygon{stroke:var(--link);stroke-width:4}
.pm .lot.sel polygon{stroke:var(--electric);stroke-width:5;stroke-dasharray:none;fill-opacity:1}

.pm-side{min-width:0;position:relative}
.pm-side-in{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (min-width:900px){.pm-full .pm-side-in{position:absolute;inset:0}.pm-full .pm-card{flex:none;max-height:62%;overflow:auto}
  .pm-full .pm-listbox{flex:1;min-height:0;display:flex;flex-direction:column}.pm-full .pm-list{flex:1;min-height:0}}
.pm-card{border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:20px;box-shadow:var(--shadow-sm)}
.pm-card .ph{color:var(--muted);font-size:15px}
.pm-card .ph b{display:block;font-family:var(--fd);font-weight:400;font-size:17px;color:var(--ink);margin-bottom:8px}
.pm-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pm-card h2{font-family:var(--fd);font-weight:400;font-size:18px;line-height:1.25;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-card .x{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:20px}
.pm-facts{list-style:none;margin:14px 0;border-top:1px solid var(--line)}
.pm-facts li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.pm-facts li span{color:var(--muted)}
.pm-facts li b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.pm-card .cnote{font-size:14px;color:var(--muted);margin:0 0 12px}
.pm-acts{display:flex;gap:8px;flex-wrap:wrap}
.pm-acts .btn{min-height:44px;padding:10px 16px;font-size:14px}
.pm-listbox{border:1px solid var(--line);border-radius:16px;background:var(--bg);overflow:hidden;padding:0} /* not the page's section padding */
.pm-listhead{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.pm-listhead h2{font-family:var(--fd);font-weight:400;font-size:15px}
.pm-list{list-style:none;overflow:auto}
.pm-lrow{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;display:grid;grid-template-columns:14px 3.6em minmax(0,1fr) auto;
  gap:4px 10px;align-items:center;text-align:left;padding:10px 14px;min-height:48px;color:var(--ink)}
.pm-lrow b{font-weight:700;font-variant-numeric:tabular-nums}
.pm-lrow .sz{font-size:14px;font-variant-numeric:tabular-nums}
.pm-lrow .stl{font-size:12px;color:var(--muted);text-align:right}
.pm-lrow.is-sold b,.pm-lrow.is-sold .sz,.pm-lrow.is-dev b,.pm-lrow.is-dev .sz{color:var(--muted)}
.pm-lrow.is-sold b{text-decoration:line-through}
.pm-lrow:hover,.pm-lrow.hl{background:var(--tint)}
.pm-lrow[aria-current=true]{background:var(--tint);box-shadow:inset 4px 0 0 var(--electric)}
.pm-empty{padding:14px;color:var(--muted);font-size:14px}
.pm-tip{position:fixed;z-index:960;pointer-events:none;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;font-size:13px;box-shadow:var(--shadow-md);max-width:260px}
.pm-tip b{font-weight:700}

/* the first screen's map (hero): no list; the card sits beside the plan */
/* the hero card is as tall as what it says (critic, C652): an empty full-height box read as unfinished */

@media (max-width:899px){
  .pm-tabs{display:block}
  .pm-layout{grid-template-columns:minmax(0,1fr)}
  .pm-full .pm-layout[data-view=list] .pm-mapcol{display:none}
  .pm-full .pm-layout[data-view=map] .pm-listbox{display:none}
  .pm-box,.pm-full .pm-box{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"lg" "pl";align-items:center;background:var(--tint)}
  .pm svg.plan{grid-area:pl;height:auto;aspect-ratio:1/1;background:var(--land)}
  .pm-legend{grid-area:lg;display:flex;padding:8px 10px}
  .pm-zoom{right:8px;bottom:8px}
  .pm-zoom button{width:44px;height:44px}
  .pm-card{position:fixed;left:0;right:0;bottom:0;z-index:950;max-height:74vh;overflow:auto;border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(35,25,66,.25);
    padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  .pm-card.none{display:none}
  .pm-chip{min-height:44px}
  .pm .ghostb{min-height:44px}
  .pm input[type=range]{height:44px}
  .pm-card .x{width:44px;height:44px}
}

/* ---------- the menu below 900 px (Commission 659, PM ruling): the five sections, each its own row; a <details>, so it opens
   without the script too; the script only closes it after a choice, on Escape and on a tap outside ---------- */
.mn{display:none}
@media (max-width:899px){
  .hd .mn{display:block}
  .mn summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:8px;
    border:1px solid var(--dark-line);color:#fff;font-weight:600;font-size:14px;cursor:pointer;user-select:none;-webkit-user-select:none}
  .mn summary::-webkit-details-marker{display:none}
  .mn summary svg{width:18px;height:18px}
  .mn[open] summary{background:var(--purple-2)}
  .hd .mn nav{position:absolute;left:0;right:0;top:100%;margin:0;display:flex;flex-direction:column;gap:0;background:var(--purple);
    border-top:1px solid var(--dark-line);padding:4px var(--pad) 12px;box-shadow:0 14px 28px rgba(35,25,66,.28)}
  .hd .mn nav a{color:#fff;font-size:17px;font-weight:500;padding:14px 2px;border-radius:0;border-bottom:1px solid var(--dark-line)}
  .hd .mn nav a:last-child{border-bottom:0}
}
@media (max-width:419px){.hd .mn{margin-left:auto}}