/* ===== Visor de lotificación ===== */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body.visor{background-color:#0c1413;background-image:radial-gradient(120% 90% at 50% 40%,#1d2d2b 0%,#0c1413 70%);color:#fff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.lienzo{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none}
.lienzo.arrastrando{cursor:grabbing}
.escena{position:absolute;left:0;top:0;width:4000px;height:2250px;transform-origin:0 0;backface-visibility:hidden}
.mov .escena{will-change:transform}
.escena img{position:absolute;inset:0;width:4000px;height:2250px;max-width:none;pointer-events:none;-webkit-user-drag:none}
.escena img.hd{opacity:0;transition:opacity .6s}
.escena img.hd.ok{opacity:1}
.escena svg{position:absolute;inset:0;width:4000px;height:2250px;overflow:visible}

/* Capa neón */
#capa{--sw:2}
.l-glow{fill:none;stroke:var(--zc,var(--neon-fuerte));stroke-opacity:.32;stroke-width:calc(var(--sw) * 3.6);stroke-linejoin:round;pointer-events:none;transition:opacity .3s}
.l-core{fill:var(--zc,#8dffb4);fill-opacity:.07;stroke:var(--zc,var(--neon));stroke-width:var(--sw);stroke-linejoin:round;pointer-events:all;cursor:pointer;transition:fill-opacity .25s,opacity .3s}
.l-core.z-base{fill-opacity:.04}
.l-glow.z-base{stroke-opacity:.18}
.l-core.vendido{--zc:#a9b1ae;fill:#0c1413;fill-opacity:.55}
.l-glow.vendido{stroke-opacity:0}
.l-core.vendido:hover{fill-opacity:.4}
.t-id.vendido{fill:rgba(255,255,255,.55)}
.t-vendido{fill:#ff8f7a;font-family:var(--ui);font-weight:700;letter-spacing:.08em;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(8,16,15,.8);stroke-linejoin:round;pointer-events:none;transition:opacity .3s}
.z-lejos .t-vendido{opacity:0}
.l-core:hover{fill-opacity:.2}
.l-core.sel{fill-opacity:.34;stroke:#fff;stroke-width:calc(var(--sw) * 1.6)}
.l-glow.sel{stroke-opacity:.75;stroke-width:calc(var(--sw) * 7);animation:pulso 1.8s ease-in-out infinite}
/* resaltar desde la leyenda */
#capa[data-filtro] .l-core:not(.sel):not(.foco),#capa[data-filtro] .l-glow:not(.sel):not(.foco){opacity:.2}
#capa[data-filtro] .l-core.foco:not(.vendido){fill-opacity:.3}
@keyframes pulso{50%{stroke-opacity:.35}}
.intro .l-core,.intro .l-glow{stroke-dasharray:1;stroke-dashoffset:1;animation:trazo 1.2s var(--ease) forwards;animation-delay:var(--d)}
@keyframes trazo{to{stroke-dashoffset:0}}

.t-id{fill:#fff;font-family:var(--ui);font-weight:700;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(8,16,15,.75);stroke-linejoin:round;pointer-events:none;transition:opacity .3s}
.t-dim{fill:var(--neon);font-family:var(--ui);font-weight:700;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(8,16,15,.85);stroke-linejoin:round;pointer-events:none;opacity:0;transition:opacity .3s}
.t-calle{fill:#fff;font-family:var(--display);font-weight:700;text-anchor:middle;dominant-baseline:central;letter-spacing:.06em;paint-order:stroke;stroke:rgba(8,16,15,.7);stroke-linejoin:round;pointer-events:none}
.z-med .t-dim{opacity:1}
.z-lejos .t-id{opacity:0}
.z-lejos .t-id.big{opacity:1}

/* Barra superior: fluida. La barra es el contenedor y todo se mide contra su ancho (cqi),
   así funciona igual en un iPhone SE, un Pro Max, una tablet o un monitor. */
.vbar{position:fixed;z-index:20;left:0;right:0;top:0;container-type:inline-size;container-name:barra;display:flex;align-items:center;gap:clamp(6px,2cqi,10px);padding:clamp(8px,3cqi,12px);padding-top:max(clamp(8px,3cqi,12px),env(safe-area-inset-top));padding-left:max(clamp(8px,3cqi,12px),env(safe-area-inset-left));padding-right:max(clamp(8px,3cqi,12px),env(safe-area-inset-right));pointer-events:none;background:linear-gradient(180deg,rgba(8,14,13,.7),rgba(8,14,13,0))}
.vbar > *{pointer-events:auto}
.redondo{--d:46px;width:var(--d);height:var(--d);flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(17,27,26,.62);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;text-decoration:none;transition:background-color .2s,transform .2s}
.vbar .redondo{--d:clamp(40px,11cqi,46px)}
.redondo:hover{background:rgba(49,74,71,.9)}
.redondo:active{transform:scale(.93)}
.redondo .icon{width:calc(var(--d) * .48);height:calc(var(--d) * .48)}
/* el título es lo único que se encoge; nunca empuja los botones fuera de la pantalla */
.titulo{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:clamp(6px,2cqi,10px);height:clamp(40px,11cqi,46px);padding:0 clamp(10px,3.5cqi,16px) 0 clamp(4px,1.2cqi,6px);border-radius:999px;background:rgba(17,27,26,.62);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.titulo img{width:clamp(28px,8cqi,34px);height:auto;flex:none}
.titulo > div{min-width:0}
.titulo b,.titulo small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titulo b{font-family:var(--display);font-size:clamp(15px,4.4cqi,19px);line-height:1.05}
.titulo small{font-size:clamp(9px,2.5cqi,11px);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-top:2px}
.vbar .sp{flex:1 1 0;min-width:0}
.btn-lista{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:clamp(40px,11cqi,46px);padding:0 clamp(12px,3.5cqi,16px);border-radius:999px;border:1px solid rgba(141,255,180,.45);background:rgba(17,27,26,.62);color:var(--neon);font-weight:700;font-size:clamp(13px,3.4cqi,14px);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-lista .icon{width:18px;height:18px}
/* según el espacio real de la barra (no del dispositivo) se van quitando cosas */
@container barra (max-width:520px){.btn-lista span{display:none}.btn-lista{width:clamp(40px,11cqi,46px);padding:0}}
@container barra (max-width:330px){.titulo small{display:none}}
@container barra (max-width:290px){.titulo img{display:none}.titulo{padding-left:12px}}
/* respaldo para navegadores sin container queries */
@supports not (container-type:inline-size){@media (max-width:520px){.btn-lista span{display:none}.btn-lista{width:44px;padding:0}}}

/* Controles de zoom */
.zoom{position:fixed;z-index:15;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;transition:right .45s var(--ease),opacity .3s}
@media (max-width:899px){.zoom{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));transform:none}.con-panel .zoom{opacity:0;pointer-events:none}}
@media (min-width:900px){.con-panel .zoom{right:432px}}

/* Leyenda */
.leyenda{position:fixed;z-index:15;left:max(12px,env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px - 58px);display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:5px;border-radius:22px;background:rgba(17,27,26,.66);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .3s}
.leyenda button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px 0 9px;border-radius:999px;border:1px solid transparent;background:none;color:#fff;font:700 clamp(12px,3.3vw,13px)/1 var(--ui);cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s}
.leyenda button:hover{background:rgba(255,255,255,.08)}
.leyenda button[aria-pressed="true"]{background:rgba(255,255,255,.14);border-color:var(--zc)}
.leyenda i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--zc);box-shadow:0 0 8px var(--zc)}
.leyenda i + i{margin-left:-9px;box-shadow:0 0 0 2px #1b2826}
.leyenda i.x{background:#0c1413;border:1.5px solid #a9b1ae;box-shadow:none}
.leyenda button:last-of-type{color:rgba(255,255,255,.75)}
.leyenda small{padding:0 8px 0 2px;font-size:11px;font-weight:600;color:rgba(255,255,255,.6)}
@media (max-width:899px){.con-panel .leyenda{opacity:0;pointer-events:none}}

/* Ayuda */
.ayuda{position:fixed;z-index:16;left:50%;top:calc(78px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;gap:18px;align-items:center;padding:12px 20px;border-radius:18px;background:rgba(17,27,26,.82);border:1px solid rgba(141,255,180,.3);font-size:13px;font-weight:600;white-space:nowrap;max-width:calc(100vw - 24px);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .6s,transform .6s var(--ease);pointer-events:none}
.ayuda span{display:flex;align-items:center;gap:8px}
.ayuda .icon{width:22px;height:22px;color:var(--neon)}
.ayuda.fuera{opacity:0;transform:translate(-50%,-12px)}

/* Panel / dashboard */
.panel{position:fixed;z-index:30;background:rgba(246,241,231,.97);color:var(--texto);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 -10px 50px -10px rgba(0,0,0,.5);display:flex;flex-direction:column;transition:transform .5s var(--ease)}
@media (max-width:899px){
  .panel{left:0;right:0;bottom:0;max-height:min(58vh,560px);border-radius:26px 26px 0 0;transform:translateY(105%);padding-bottom:env(safe-area-inset-bottom)}
}
@media (min-width:900px){
  .panel{top:12px;right:12px;bottom:12px;width:408px;border-radius:26px;transform:translateX(calc(100% + 24px))}
}
.panel.abierto{transform:none}
.asa{flex:none;height:26px;display:grid;place-items:center;cursor:grab;touch-action:none}
.asa::before{content:"";width:44px;height:5px;border-radius:3px;background:rgba(49,74,71,.28)}
@media (min-width:900px){.asa{display:none}}
.p-scroll{overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 22px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
@media (min-width:900px){.p-scroll{padding:22px 24px 26px}}
.p-head{display:flex;align-items:center;gap:8px}
.estado{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:rgba(89,140,91,.14);color:#2f6b37;font-size:12px;font-weight:700;letter-spacing:.04em}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:#3fbf5d;box-shadow:0 0 0 3px rgba(63,191,93,.2)}
.p-head .sp{flex:1}
.mini{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(49,74,71,.16);background:#fff;color:var(--pino);cursor:pointer}
.mini:hover{background:var(--arena)}
.mini .icon{width:18px;height:18px}
.p-titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 0 4px}
.p-titulo h2{font-family:var(--display);font-size:46px;line-height:.95;margin:0;color:var(--pino)}
.p-titulo h2 small{display:block;font-family:var(--ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--tierra);font-weight:700;margin-bottom:6px}
.p-precio{text-align:right}
.p-precio small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);font-weight:700}
.p-precio b{font-family:var(--display);font-size:30px;color:var(--pino);line-height:1}
.p-precio span{font-size:12px;color:var(--texto-suave)}
.p-tipo{margin:0 0 14px;color:var(--texto-suave);font-size:14px}
.plano{position:relative;border-radius:18px;background:var(--pino-950);overflow:hidden;margin-bottom:14px}
.plano svg{width:100%;height:auto;display:block}
.plano .cap{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.p-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.p-item{background:#fff;border:1px solid rgba(49,74,71,.1);border-radius:14px;padding:12px;display:flex;gap:10px;align-items:flex-start;min-width:0}
.p-item.ancho{grid-column:1/-1}
.p-item .icon{width:20px;height:20px;color:var(--verde);margin-top:2px}
.p-item small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-suave);font-weight:700}
.p-item b{display:block;font-size:15px;color:var(--pino);line-height:1.3;overflow-wrap:anywhere}
.p-acciones{display:grid;gap:10px}
.p-acciones .fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.p-acciones .btn{width:100%;min-height:50px;padding:0 1em}
.toast{position:fixed;z-index:60;left:50%;top:calc(76px + env(safe-area-inset-top));transform:translate(-50%,-20px);opacity:0;padding:10px 18px;border-radius:999px;background:var(--neon);color:var(--pino-950);font-weight:700;font-size:14px;transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.toast.ver{opacity:1;transform:translate(-50%,0)}

/* Lista de lotes */
.lista{position:fixed;z-index:40;inset:0;background:rgba(8,14,13,.55);opacity:0;pointer-events:none;transition:opacity .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lista.abierto{opacity:1;pointer-events:auto}
.lista-in{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow-y:auto;background:var(--crema);color:var(--texto);border-radius:26px 26px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));transform:translateY(40px);transition:transform .4s var(--ease);overscroll-behavior:contain;touch-action:pan-y}
.lista.abierto .lista-in{transform:none}
@media (min-width:900px){.lista-in{left:50%;right:auto;bottom:auto;top:50%;width:620px;max-height:80vh;border-radius:26px;transform:translate(-50%,-46%)}.lista.abierto .lista-in{transform:translate(-50%,-50%)}}
.lista h3{font-family:var(--display);font-size:30px;color:var(--pino);margin:0}
.lista h4{margin:18px 0 8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tierra)}
.chips-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.chips-l button{height:46px;border-radius:12px;border:1px solid rgba(49,74,71,.16);background:#fff;font-weight:700;font-size:14px;color:var(--pino);cursor:pointer;transition:background-color .2s,transform .2s}
.chips-l button:hover{background:var(--pino);color:var(--neon)}
.chips-l button:active{transform:scale(.95)}
.chips-l button.sel{background:var(--pino);color:var(--neon)}
.lista-top{display:flex;align-items:center;justify-content:space-between;gap:12px}

.cargando{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:#0c1413;transition:opacity .6s}
.cargando.fuera{opacity:0;pointer-events:none}
.cargando img{width:84px;animation:lat 1.6s ease-in-out infinite}
@keyframes lat{50%{transform:scale(1.06);opacity:.7}}
@media (prefers-reduced-motion:reduce){.intro .l-core,.intro .l-glow{animation:none;stroke-dasharray:none}.l-glow.sel{animation:none}}
.visor .ar{position:fixed;z-index:5}
.redondo.on{color:var(--neon);border-color:rgba(141,255,180,.55)}
@media (max-width:420px){.titulo img{display:none}.titulo{padding-left:14px}.titulo small{letter-spacing:.06em}}
.p-legal{margin:16px 0 0;font-size:11.5px;line-height:1.5;color:var(--texto-suave)}
.p-legal a{color:var(--verde);font-weight:700}
.p-legal strong{color:var(--pino)}

@media (max-width:400px){.ayuda{white-space:normal;flex-direction:column;align-items:flex-start;gap:8px}}

/* zona en panel y lista */
.p-zona{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:6px 0 8px;font-size:13.5px;color:var(--texto-suave)}
.p-zona i{width:10px;height:10px;border-radius:50%;background:var(--zc);box-shadow:0 0 0 3px color-mix(in srgb,var(--zc) 30%,transparent)}
.p-zona b{color:var(--pino)}
.p-zona[hidden]{display:none}
.p-precio b.chico{font-size:22px}
.chips-l button.con-zona{box-shadow:inset 0 -4px 0 var(--zc)}
.estado.vendido{background:rgba(192,80,60,.12);color:#a2402d}
.estado.vendido::before{background:#d0563f;box-shadow:0 0 0 3px rgba(208,86,63,.2)}
.chips-l button.vendido{color:rgba(49,74,71,.45);text-decoration:line-through;box-shadow:none;background:#f1efea}
/* área verde */
.v-zona{fill:rgba(74,140,78,.42);stroke:#a6e8a2;stroke-width:calc(var(--sw) * 1.2);stroke-dasharray:calc(var(--sw) * 5) calc(var(--sw) * 3);stroke-linejoin:round}
.v-sombra{fill:rgba(6,14,10,.35)}
.v-tronco{fill:#7a5230}
.v-copa{fill:#3f8a46;stroke:#2a5f30;stroke-width:1.5}
.v-copa.b{fill:#5aa35a}
.v-brillo{fill:rgba(200,255,190,.28)}
#gVerde{cursor:pointer}
.t-verde{fill:#eaffe6;font-family:var(--ui);font-weight:700;letter-spacing:.12em;text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:rgba(10,40,18,.8);stroke-linejoin:round;pointer-events:none}