/* Berchatti 3D — estructura de Google Earth (barra, capas, navegación, barra de estado).
   La piel, desde el 20-10, es la del manual de marca de Royal Estate (ROYAL ESTATE.pdf que mandó Jhonny):
   grises fríos de pizarra y blanco, sin color vivo — #171C22 casi negro, #353942 pizarra, #5F636E y #6D767F
   grises azulados, #354141 petróleo. Las letras siguen siendo Cormorant + DM Sans. Los colores del MAPA
   (estados de los lotes, etiquetas, la gota de Berchatti) son datos y no cambiaron. */
@font-face{font-family:"Cormorant Garamond";src:url(fuentes/fonts/cormorant-garamond-400-600.woff2) format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fuentes/fonts/dm-sans-400-500.woff2) format("woff2");font-weight:400 500;font-display:swap}

:root{
  --principal:#353942;
  --claro:#f4f5f7;
  --papel:#fafbfc;
  --tinta:#171c22;
  --tinta-suave:#5f636e;
  --acento:#5f636e;
  --acento-vivo:#c5cad1;
  --fondo:#171c22;
  --vidrio:rgba(23,28,34,.42);
  --vidrio-denso:rgba(23,28,34,.8);
  --vidrio-borde:rgba(255,255,255,.2);
  --vidrio-luz:inset 0 1px 0 rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.22);
  --desenfoque:blur(18px) saturate(1.5);
  --sombra-letra:0 1px 2px rgba(0,0,0,.5);
  --titulo-h:120px;
  --vidrio-2:rgba(255,255,255,.08);
  --linea:rgba(255,255,255,.14);
  --linea-papel:rgba(95,99,110,.24);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:14px;
  --barra-h:48px;
  --pie-h:28px;
  --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--fondo);color:var(--claro);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
/* Un botón oculto se oculta siempre: los estilos de la barra le ponían display:flex encima del hidden (19-10). */
button[hidden]{display:none!important}
button:focus-visible,input:focus-visible,label.sw:has(input:focus-visible){outline:2px solid var(--acento-vivo);outline-offset:2px}
#mapa{position:fixed;inset:0}
.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:var(--pie-h)}
.maplibregl-ctrl-attrib{display:none}

/* ── carga: la intro (20-10) ──
   La escena (2752×1536 en el original) cubre la pantalla en la computadora; en el celular entra entera a lo
   ancho, sobre la misma escena desenfocada. Royal está en su lugar exacto (los % salen de recortar-escena.py) y
   se mueve aparte: eso da la profundidad. Todo es CSS; intro.js solo suma el mouse y el tiempo mínimo. */
.carga{position:fixed;inset:0;z-index:50;overflow:hidden;background:var(--fondo);transition:opacity .9s var(--e),visibility .9s}
.carga.fuera{opacity:0;visibility:hidden}
.carga.fuera .intro{transform:scale(1.06)}
.intro{position:absolute;inset:0;transition:transform 1.1s var(--e)}
.intro-velo{position:absolute;inset:-40px}
.intro-velo img{width:100%;height:100%;object-fit:cover;filter:blur(26px) brightness(.55) saturate(1.1)}
.intro-escena{--px:0;--py:0;position:absolute;left:50%;top:50%;width:min(100vw,calc(100vh * 1.7917));aspect-ratio:2752/1536;transform:translate(-50%,-50%);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.intro-fondo img,.intro-leon img{display:block;width:100%;height:auto}
.intro-fondo{position:absolute;inset:0;transform-origin:62% 45%;animation:intro-fondo 1.4s var(--e) both,intro-deriva 9s 1.4s ease-out forwards}
.intro-fondo img{height:100%;object-fit:cover;transform:translate(calc(var(--px) * -6px),calc(var(--py) * -4px));transition:transform .6s var(--e)}
.intro-leon{position:absolute;left:2.871%;top:23.503%;width:28.852%;transform-origin:45% 100%;
  animation:intro-leon .9s .15s cubic-bezier(.2,1.2,.35,1) both,intro-saluda 1s 1.1s ease-in-out,intro-respira 3.4s 2.1s ease-in-out infinite}
.intro-leon img{transform:translate(calc(var(--px) * 12px),calc(var(--py) * 6px));transition:transform .6s var(--e);filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
/* el brillo dorado que cruza «Powered by Luara Collective» */
.intro-brillo{position:absolute;left:52%;top:22%;width:44%;height:58%;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(105deg,transparent 30%,rgba(255,236,190,.85) 47%,rgba(255,214,140,.5) 52%,transparent 68%) no-repeat;background-size:260% 100%;
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);mask-image:radial-gradient(closest-side,#000 45%,transparent 100%);
  animation:intro-brillo 1.4s 1s ease-in-out both}
/* abajo: el logo de Berchatti, la barra y el texto, sobre un degradé */
.carga-pie{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:14px;padding:90px 20px max(34px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(17,21,26,.72) 45%,rgba(17,21,26,.92));animation:intro-sube .8s .5s var(--e) both}
.carga-marca img{display:block;width:min(300px,62vw);height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.carga-barra{width:200px;height:2px;background:var(--linea);overflow:hidden}
.carga-barra i{display:block;height:100%;width:0;background:#d6c282;transition:width .4s var(--e)}
.carga-texto{margin:0;font-family:var(--serif);font-size:18px;font-style:italic;color:var(--claro);opacity:.85}
@keyframes intro-fondo{from{opacity:0;transform:scale(1.12);filter:blur(8px)}to{opacity:1;transform:scale(1.04);filter:blur(0)}}
@keyframes intro-deriva{from{transform:scale(1.04)}to{transform:scale(1)}}
@keyframes intro-leon{from{opacity:0;transform:translateY(3%) scale(.95)}to{opacity:1;transform:none}}
@keyframes intro-saluda{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.2deg)}60%{transform:rotate(1.4deg)}}
@keyframes intro-respira{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.6%) scale(1.006)}}
@keyframes intro-brillo{from{background-position:120% 0;opacity:0}20%{opacity:1}to{background-position:-30% 0;opacity:0}}
@keyframes intro-sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* el celular: la escena entera a lo ancho, un poco más arriba del centro, sobre ella misma desenfocada */
@media (max-width:820px){
  /* en el celular la escena va grande y la cámara se desliza: primero Royal con el cartel, después
     «Powered by Luara Collective» */
  .intro-escena{width:180vw;left:0;top:37%;transform:translate(0,-50%);animation:intro-paneo 1.8s .9s cubic-bezier(.45,0,.2,1) both}
  @keyframes intro-paneo{from{transform:translate(0,-50%)}to{transform:translate(-80vw,-50%)}}
  .carga-pie{padding-top:60px}
  .carga-marca img{width:min(260px,70vw)}
}
@media (prefers-reduced-motion:reduce){
  .intro-fondo,.intro-leon,.intro-brillo,.carga-pie{animation:none}
  .intro-brillo{display:none}
}

/* ── barra superior ── */
.barra{position:fixed;z-index:20;top:14px;left:14px;right:14px;display:grid;grid-template-columns:1fr minmax(0,420px) 1fr;
  grid-template-areas:"izq titulo der" ". llegar ." ". busca .";align-items:start;gap:10px 12px;pointer-events:none}
.barra>*{pointer-events:auto}
.b-izq{grid-area:izq;justify-self:start}
.b-der{grid-area:der;justify-self:end;display:flex;gap:8px}
.marca{grid-area:titulo;justify-self:center;display:block;height:var(--titulo-h);padding:13px 30px;background:rgba(23,28,34,.58);border:1px solid var(--vidrio-borde);border-radius:20px;
  backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-luz);transition:background .25s}
.marca:hover{background:rgba(23,28,34,.66)}
.marca img{display:block;height:100%;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
#btn-presentar{grid-area:llegar;justify-self:center;display:flex;align-items:center;gap:9px;height:var(--barra-h);padding:0 24px 0 20px;border:1px solid rgba(255,255,255,.55);border-radius:99px;
  background:rgba(250,251,252,.66);color:var(--tinta);font-size:14px;font-weight:500;letter-spacing:.03em;backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 28px rgba(0,0,0,.22);transition:background .2s,transform .2s var(--e)}
#btn-presentar:hover{background:rgba(255,255,255,.82);transform:translateY(-1px)}
#btn-presentar svg{width:19px;height:19px;fill:currentColor}
.busca{grid-area:busca;position:relative;width:100%;height:var(--barra-h);display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--vidrio);border:1px solid var(--vidrio-borde);border-radius:var(--radio);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-luz)}
.busca svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;opacity:.75}
.busca input{flex:1;min-width:0;height:100%;background:none;border:0;color:var(--claro);font:inherit;font-size:15px;outline:none;text-shadow:var(--sombra-letra)}
.busca input::placeholder{color:rgba(244,245,247,.78)}
.busca-res{position:absolute;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;background:var(--vidrio-denso);border:1px solid var(--linea);border-radius:var(--radio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);max-height:320px;overflow:auto}
.busca-res li{padding:9px 10px;border-radius:9px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.busca-res li small{opacity:.65}
.busca-res li[aria-selected=true],.busca-res li:hover{background:var(--vidrio-2)}

/* ── panel de capas ── */
.panel{position:fixed;z-index:15;left:14px;bottom:calc(var(--pie-h) + 14px);width:330px;max-height:calc(100dvh - 14px - var(--barra-h) - 14px - var(--pie-h) - 14px);
  display:flex;flex-direction:column;background:var(--vidrio-denso);border:1px solid var(--vidrio-borde);border-radius:var(--radio);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);
  box-shadow:0 18px 50px rgba(0,0,0,.35);transform-origin:0 100%;transition:transform .45s var(--e),opacity .3s}
.panel.cerrado{transform:scale(.6);opacity:0;pointer-events:none}
/* «Capas» (20-10): abajo a la izquierda; mientras su panel está abierto, el botón no está */
.capas-btn{position:fixed;z-index:16;left:14px;bottom:calc(var(--pie-h) + 14px);height:var(--barra-h);display:flex;align-items:center;gap:8px;padding:0 18px 0 15px;
  background:var(--vidrio);color:var(--claro);border:1px solid var(--vidrio-borde);border-radius:var(--radio);font-size:13.5px;font-weight:500;letter-spacing:.02em;text-shadow:var(--sombra-letra);
  backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-luz);transition:opacity .25s,transform .35s var(--e),background .2s}
.capas-btn:hover{background:rgba(23,28,34,.58)}
.capas-btn svg,.plano3d svg,.nav svg{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.45))}
.capas-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#panel:not(.cerrado)~#btn-capas{opacity:0;transform:scale(.85);pointer-events:none}
body.presentando #btn-capas{display:none}
.panel-cab{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.panel-cab h2{margin:0;font-family:var(--serif);font-weight:500;font-size:26px}
.cerrar{width:32px;height:32px;border:0;border-radius:50%;background:var(--vidrio-2);font-size:20px;line-height:1}
.panel-cuerpo{overflow:auto;padding:0 16px 16px;scrollbar-width:thin;scrollbar-color:rgba(244,245,247,.25) transparent}
.panel section{padding:14px 0;border-top:1px solid var(--linea)}
.panel section:first-child{border-top:0}
.panel h3{margin:0 0 10px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--acento-vivo)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips button{padding:6px 11px;border:1px solid var(--linea);border-radius:99px;background:none;font-size:12.5px}
.chips button.on{background:var(--claro);color:var(--principal);border-color:var(--claro)}
.chips.rubros button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;font-size:12px}
.chips.rubros button small{opacity:.6;font-size:11px}
.chips.rubros button:not(.on){opacity:.55}
.chips .punto{flex:none;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.chips .ico{flex:none;width:20px;height:20px;margin:-3px 0 -3px -4px}
/* elegir lugares, uno por uno */
.lugares-caja{margin:4px 0 2px;border:1px solid var(--linea);border-radius:12px;background:rgba(244,245,247,.03)}
.lugares-caja summary{cursor:pointer;padding:9px 12px;font-size:13px;font-weight:500;list-style:none;display:flex;align-items:center;gap:8px}
.lugares-caja summary::-webkit-details-marker{display:none}
.lugares-caja summary::before{content:"›";display:inline-block;transition:transform .2s var(--e);opacity:.7}
.lugares-caja[open] summary::before{transform:rotate(90deg)}
.lugares-caja summary small{margin-left:auto;opacity:.6;font-size:11.5px;font-weight:400}
#lugares{max-height:340px;overflow:auto;padding:0 8px 8px;overscroll-behavior:contain}
#lugares input[type=search]{width:100%;margin:2px 0 8px;padding:7px 10px;border-radius:9px;border:1px solid var(--linea);background:rgba(0,0,0,.18);color:inherit;font:inherit;font-size:12.5px}
#lugares .grupo{margin:6px 0 10px}
#lugares .grupo-cab{display:flex;align-items:center;gap:6px;padding:4px 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;position:sticky;top:0;background:var(--panel-fondo, #1c2128);z-index:1}
#lugares .grupo-cab small{opacity:.6;letter-spacing:0}
#lugares .grupo-cab button{margin-left:auto;padding:2px 7px;border:1px solid var(--linea);border-radius:99px;background:none;color:inherit;font-size:10.5px;letter-spacing:0;text-transform:none}
#lugares .grupo-cab button+button{margin-left:0}
#lugares .lugar{display:flex;align-items:center;gap:6px;padding:2px 0}
#lugares .lugar label{display:flex;align-items:center;gap:7px;flex:1;min-width:0;cursor:pointer;font-size:12.5px;line-height:1.25}
#lugares .lugar label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lugares .lugar input{flex:none;accent-color:var(--acento);width:14px;height:14px}
#lugares .lugar .ico{flex:none;width:20px;height:20px}
#lugares .lugar .ir{flex:none;padding:2px 6px;border:0;border-radius:6px;background:none;color:inherit;opacity:.55;font-size:11px;font-variant-numeric:tabular-nums}
#lugares .lugar .ir:hover{opacity:1;background:rgba(244,245,247,.08)}
#lugares .lugar.apagado{opacity:.38}
#lugares .lugar:has(input:not(:checked)) label span{opacity:.55;text-decoration:line-through;text-decoration-color:rgba(244,245,247,.35)}
label.sw{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13.5px}
label.sw small{opacity:.6;font-size:11.5px}
label.sw input{position:absolute;opacity:0;pointer-events:none}
label.sw i{flex:none;width:30px;height:17px;border-radius:99px;background:rgba(244,245,247,.2);position:relative;transition:background .25s}
label.sw i::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:var(--claro);transition:transform .25s var(--e)}
label.sw input:checked+i{background:var(--acento)}
label.sw input:checked+i::after{transform:translateX(13px)}
.cuenta{margin:8px 0 0;font-family:var(--serif);font-size:19px}
.cuenta b{font-weight:600}
.segm{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:3px;border-radius:11px;background:rgba(0,0,0,.25)}
.segm button{padding:7px 0;border:0;border-radius:8px;background:none;font-size:12px}
.segm button.on{background:var(--claro);color:var(--principal);font-weight:500}
.segm button:disabled{opacity:.35;cursor:not-allowed}
.segm.dos{grid-template-columns:1.5fr 1fr;margin-top:8px}
.leyenda{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.leyenda li{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.25}
.leyenda li i{flex:none;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.25)}
.leyenda li b{font-weight:500;margin-left:auto;opacity:.75;font-variant-numeric:tabular-nums}
.leyenda.chica{grid-template-columns:1fr 1fr 1fr 1fr}
.leyenda.chica:empty{display:none}
.leyenda .barra-color{grid-column:1/-1;height:10px;border-radius:5px}
.leyenda .extremos{grid-column:1/-1;display:flex;justify-content:space-between;font-size:11.5px;opacity:.75;margin-top:-2px}
.nota{margin:10px 0 0;font-size:12px;line-height:1.45;opacity:.75}
.nota button{padding:0;border:0;background:none;color:var(--acento-vivo);text-decoration:underline;font-size:12px}
.rango{display:flex;align-items:center;gap:10px;padding:4px 0 8px 40px;font-size:12.5px}
.rango input{flex:1;accent-color:var(--acento)}
.rango output{width:30px;text-align:right;font-variant-numeric:tabular-nums}
.bases{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bases button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 0 6px;border:1px solid var(--linea);border-radius:11px;background:none;font-size:12px;overflow:hidden}
.bases button small{font-size:10px;opacity:.6;margin-top:-5px}
.bases button span{display:block;width:100%;height:46px;background-size:cover;background-position:center}
.bases button.on{border-color:var(--acento-vivo);box-shadow:0 0 0 1px var(--acento-vivo)}
.b-esri{background:linear-gradient(135deg,#2f4a2a,#56723d 45%,#8f8a5c 70%,#3c5a33)}
.b-s2{background:linear-gradient(135deg,#27402a,#4f6d3c 40%,#c9b48a 62%,#3fb6d0 75%,#27402a)}
.b-osm{background:linear-gradient(135deg,#f2efe9,#e0dcd2 50%,#f8f4ea);position:relative}
.creditos{margin:4px 0 0;font-size:10.5px;line-height:1.5;opacity:.5}

/* ── ficha (la del explorador) ── */
.ficha{position:fixed;z-index:25;top:0;right:0;bottom:0;width:min(420px,100%);display:flex;flex-direction:column;background:var(--claro);color:var(--tinta);box-shadow:-20px 0 60px rgba(0,0,0,.35);transform:translateX(105%);transition:transform .55s var(--e)}
.ficha.abierta{transform:none}
.ficha-cab{flex:none;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 18px 0 28px;background:var(--principal);color:var(--claro);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.ficha-cab .cerrar{background:rgba(244,245,247,.12)}
.ficha-cuerpo{flex:1;overflow:auto;padding:26px 28px 18px}
.ficha-forma{margin:0 0 22px;height:200px;background:#eef0f2;border:1px solid var(--linea-papel);position:relative}
.ficha-forma svg{display:block;width:100%;height:100%}
.ficha-forma .norte{position:absolute;top:8px;right:10px;font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--tinta-suave);text-align:center;line-height:1}
.ante{margin:0;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--acento)}
.ficha h2{margin:6px 0 6px;font-family:var(--serif);font-weight:500;font-size:40px;line-height:1;color:var(--principal)}
.estado{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.estado i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.estado small{letter-spacing:.08em;opacity:.6;text-transform:none;font-size:11.5px}
.datos{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 16px}
.datos dt,.datos dd{margin:0;padding:10px 0;border-top:1px solid var(--linea-papel);font-size:14px}
.datos dt{color:var(--tinta-suave)}
.datos dd{text-align:right;font-variant-numeric:tabular-nums}
.datos dd small{display:block;font-size:11.5px;color:var(--tinta-suave);margin-top:2px}
.ficha-nota{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--tinta-suave)}
/* «Me interesa este lote» (mapa del cliente, 19-10): la misma piel de la ficha */
.ficha-pie [hidden]{display:none}
.interes{position:relative;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--linea-papel)}
.interes p{margin:0}
.interes .interes-txt{margin:8px 0 16px;font-size:14px;line-height:1.5;color:var(--tinta)}
.interes label{display:block;margin:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.interes input{display:block;width:100%;margin-top:6px;padding:9px 0;border:0;border-bottom:1px solid var(--linea-papel);border-radius:0;background:none;color:var(--tinta);font:inherit;font-size:16px;letter-spacing:0;text-transform:none}
.interes input:focus{outline:none;border-bottom-color:var(--principal)}
.interes button{width:100%;height:48px;margin-top:4px;border:0;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.interes button:disabled{opacity:.6}
.interes .trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.interes .interes-msj{margin-top:12px;font-size:14px;line-height:1.5;color:var(--principal)}
.interes .interes-priv{margin-top:10px;font-size:12px;line-height:1.45;color:var(--tinta-suave)}
.interes .interes-priv a{color:var(--principal)}
.estado-barra .eb-priv{margin-right:auto;color:inherit;opacity:.7;text-decoration:none}
.estado-barra .eb-priv:hover{opacity:1;text-decoration:underline}
.interes .interes-msj.error{color:#9b3a2a}
.interes.enviado label,.interes.enviado button{display:none}
.ficha-pie{flex:none;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:10px;padding:16px 28px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--linea-papel);background:var(--papel)}
.ficha-pie button{height:48px;border:0;font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.b-3d{background:none;border:1px solid var(--principal)!important;color:var(--principal)}
.b-wa{background:var(--principal);color:var(--claro)}

/* ── hoja de medir / perfil ── */
.hoja{position:fixed;z-index:18;left:342px;right:12px;bottom:calc(var(--pie-h) + 12px);padding:12px 16px 10px;background:var(--vidrio);border:1px solid var(--linea);border-radius:var(--radio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel.cerrado~.hoja{left:12px}
.hoja-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hoja-cab strong{font-family:var(--serif);font-weight:500;font-size:21px}
.hoja-cab #hoja-resumen{font-size:13px;opacity:.85;font-variant-numeric:tabular-nums}
.hoja-acc{margin-left:auto;display:flex;gap:8px;align-items:center}
.hoja-acc button:not(.cerrar){padding:6px 12px;border:1px solid var(--linea);border-radius:99px;background:none;font-size:12px}
.hoja-ayuda{margin:6px 0 0;font-size:12.5px;opacity:.7}
.grafico{display:block;width:100%;height:150px;margin-top:8px}
.grafico:empty{display:none}
.grafico .area{fill:rgba(197,202,209,.28)}
.grafico .linea{fill:none;stroke:var(--acento-vivo);stroke-width:2;vector-effect:non-scaling-stroke}
.grafico .eje{stroke:rgba(244,245,247,.18);stroke-width:1;vector-effect:non-scaling-stroke}
.grafico text{fill:rgba(244,245,247,.7);font-size:11px;font-family:var(--sans)}
.grafico .cursor{stroke:var(--claro);stroke-width:1;vector-effect:non-scaling-stroke}

/* ── navegación ── */
.nav{position:fixed;z-index:16;right:14px;bottom:calc(var(--pie-h) + 14px);display:flex;align-items:center;gap:8px}
.nav button{width:42px;height:42px;border:1px solid var(--vidrio-borde);border-radius:50%;background:var(--vidrio);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-luz);display:grid;place-items:center;font-size:20px;text-shadow:var(--sombra-letra)}
.nav .txt{font-size:13px;font-weight:500;letter-spacing:.04em}
.nav .txt.activo{background:var(--claro);color:var(--principal);border-color:var(--claro)}
.nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.giro{display:flex;align-items:center;gap:2px;padding:0 2px;border:1px solid var(--vidrio-borde);border-radius:99px;background:var(--vidrio);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-luz)}
.giro button{border:0;background:none;backdrop-filter:none;box-shadow:none;width:38px}
.brujula svg{width:22px;height:22px;transition:transform .1s linear;stroke:none}
.brujula path{fill:rgba(244,245,247,.55)}
.brujula path.n{fill:#e2574c}
.zoom{display:flex;border:1px solid var(--vidrio-borde);border-radius:99px;background:var(--vidrio);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-luz)}
.zoom button{border:0;background:none;backdrop-filter:none;box-shadow:none}

/* ── barra de estado ── */
.estado-barra{position:fixed;z-index:17;left:0;right:0;bottom:0;height:var(--pie-h);display:flex;align-items:center;justify-content:flex-end;gap:22px;padding:0 16px;background:rgba(17,21,26,.9);font-size:11.5px;color:rgba(244,245,247,.82);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.estado-barra .eb-nota{opacity:.55}

/* ── aviso ── */
.aviso{position:fixed;z-index:40;left:50%;top:calc(14px + var(--titulo-h) + 10px + var(--barra-h) * 2 + 10px + 16px);transform:translateX(-50%);max-width:min(560px,calc(100% - 24px));padding:11px 16px;background:var(--claro);color:var(--tinta);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);font-size:13.5px;line-height:1.4}

/* ── etiquetas HTML sobre el mapa (medir) ── */
.etq-medida{padding:3px 7px;border-radius:6px;background:var(--claro);color:var(--tinta);font-size:11.5px;font-weight:500;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}
.punto-medida{width:12px;height:12px;border-radius:50%;background:var(--claro);border:2px solid var(--acento);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.marca-perfil{width:14px;height:14px;border-radius:50%;background:var(--acento-vivo);border:2px solid var(--claro);box-shadow:0 1px 6px rgba(0,0,0,.5);pointer-events:none}
.maplibregl-popup-content{background:var(--claro);color:var(--tinta);border-radius:10px;padding:8px 11px;font-family:var(--sans);font-size:12.5px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.maplibregl-popup-tip{border-top-color:var(--claro)!important;border-bottom-color:var(--claro)!important}
.pop b{font-family:var(--serif);font-weight:600;font-size:16px}
.pop small{color:var(--tinta-suave)}

/* ── marcadores (como los de Google Earth) ── */
.pin{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:0;border-radius:99px;background:rgba(23,28,34,.88);color:var(--claro);box-shadow:0 4px 14px rgba(0,0,0,.35);font-family:var(--sans);position:relative;margin-bottom:8px}
.pin::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-top-color:rgba(23,28,34,.88);border-bottom:0}
.pin-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acento-vivo);color:var(--tinta)}
.pin-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pin-txt{display:flex;flex-direction:column;text-align:left;line-height:1.15}
.pin-txt b{font-size:12.5px;font-weight:500}
.pin-txt small{font-size:10.5px;opacity:.7}
/* secundarios (country club, laguna): más chicos y más tenues que la gota de Berchatti */
.pin.chico{gap:6px;padding:3px 9px 3px 3px;background:rgba(23,28,34,.72);box-shadow:0 2px 8px rgba(0,0,0,.28);margin-bottom:6px}
.pin.chico::after{bottom:-5px;margin-left:-4px;border-width:4px;border-top-color:rgba(23,28,34,.72)}
.pin.chico .pin-ico{width:20px;height:20px;background:rgba(197,202,209,.85)}
.pin.chico .pin-ico svg{width:12px;height:12px}
.pin.chico .pin-txt b{font-size:11px}
.pin.chico .pin-txt small{font-size:9.5px}

/* ── recorrido para presentar ── */
.relato{position:fixed;z-index:22;left:24px;bottom:calc(var(--pie-h) + 24px);width:min(440px,calc(100% - 48px));padding:22px 24px 16px;background:var(--claro);color:var(--tinta);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden}
.relato.entra{animation:relato-entra .7s var(--e)}
@keyframes relato-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.relato-barra{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(53,57,66,.12)}
.relato-barra i{display:block;height:100%;width:0;background:var(--acento)}
.relato-ante{margin:0;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--acento)}
.relato h2{margin:6px 0 8px;font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.02;color:var(--principal)}
.relato-texto{margin:0;font-size:14.5px;line-height:1.5;color:#2e333b}
.relato-datos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.relato-datos:empty{display:none}
.relato-datos li{padding:5px 10px;border-radius:99px;background:rgba(53,57,66,.08);color:var(--principal);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.relato-ctrl{display:flex;align-items:center;gap:6px;margin-top:16px;padding-top:12px;border-top:1px solid var(--linea-papel)}
.relato-ctrl>button{width:36px;height:36px;border:1px solid var(--linea-papel);border-radius:50%;background:none;color:var(--principal);font-size:17px;line-height:1}
.relato-ctrl>button:disabled{opacity:.3;cursor:default}
.relato-ctrl .relato-salir{width:auto;margin-left:auto;padding:0 14px;border-radius:99px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.relato-puntos{display:flex;gap:5px;margin-left:8px}
.relato-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(53,57,66,.25)}
.relato-puntos button.on{background:var(--acento);width:20px;border-radius:4px}
body.presentando .busca,body.presentando #btn-presentar,body.presentando .b-der,body.presentando .panel,body.presentando .hoja,body.presentando .estado-barra #eb-coords,body.presentando .estado-barra #eb-alt{display:none}
body.presentando .nav{bottom:calc(var(--pie-h) + 24px)}

/* ── El Plano 3D (19-10): el enlace a la página del explorador pintado, arriba junto a la marca ── */
.plano3d{display:flex;align-items:center;gap:7px;height:var(--barra-h);padding:0 16px 0 14px;background:var(--vidrio);color:var(--claro);border:1px solid var(--vidrio-borde);border-radius:var(--radio);font-size:13px;font-weight:500;letter-spacing:.02em;text-decoration:none;white-space:nowrap;text-shadow:var(--sombra-letra);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque);box-shadow:var(--vidrio-luz)}
.plano3d:hover{background:rgba(23,28,34,.58)}
/* «Panel» (20-10): un círculo casi invisible con su dibujo; se nota al pasarle el mouse */
.panel-muv{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;color:var(--claro);text-decoration:none;
  background:rgba(23,28,34,.2);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:.55;transition:opacity .25s,background .25s}
.panel-muv:hover,.panel-muv:focus-visible{opacity:1;background:rgba(23,28,34,.5)}
.panel-muv svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.b-der{align-items:center}
.plano3d[hidden]{display:none}
.plano3d svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.presentando .plano3d{display:none}
/* De 821 a 1000 px, los botones de las esquinas con su dibujo solo: el título necesita el centro */
@media (min-width:821px) and (max-width:1000px){
  .plano3d{padding:0 13px}
  .plano3d span{display:none}
}

/* ── celular ── */
@media (max-width:820px){
  :root{--barra-h:44px}
  /* el mismo orden en angosto: título al centro con los dos botones de las esquinas a los costados,
     «Cómo llegar» debajo y el buscador a todo el ancho */
  .barra{top:8px;left:8px;right:8px;grid-template-columns:auto 1fr auto;grid-template-areas:"izq titulo der" ". llegar ." "busca busca busca";gap:8px 8px}
  :root{--titulo-h:88px}
  .marca{padding:9px 14px;border-radius:16px}
  .panel-muv{width:46px;height:46px}
  #btn-presentar{padding:0 18px 0 15px;font-size:13.5px}
  .busca{padding:0 12px}
  .busca input{font-size:16px}
  /* en el celular, solo el dibujo en los botones de las esquinas */
  .plano3d{padding:0 12px}
  .plano3d span{display:none}
  .b-der{gap:6px}
  .capas-btn{left:8px;bottom:calc(var(--pie-h) + 10px);padding:0 16px 0 13px}
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:72vh;border-radius:18px 18px 0 0;z-index:30;transform-origin:50% 100%}
  .panel.cerrado{transform:translateY(105%);opacity:1}
  .hoja{left:8px!important;right:8px;bottom:calc(var(--pie-h) + 68px)}
  .nav{right:8px;bottom:calc(var(--pie-h) + 10px);flex-direction:column-reverse;align-items:flex-end}
  .aviso{top:auto;bottom:calc(var(--pie-h) + 66px)}
  .zoom{display:none}
  .giro{flex-direction:column;border-radius:22px;padding:2px 0}
  .relato{left:8px;right:8px;width:auto;bottom:calc(var(--pie-h) + 8px);padding:18px 18px 12px}
  .relato h2{font-size:28px}
  .relato-texto{font-size:13.5px}
  body.presentando .nav{bottom:auto;top:80px}
  .estado-barra{justify-content:center;gap:12px;font-size:10.5px}
  .estado-barra #eb-camara{display:none}
  .ficha{top:auto;height:86vh;width:100%;border-radius:18px 18px 0 0;transform:translateY(105%);overflow:hidden}
  .ficha-cuerpo{padding:20px 20px 14px}
  .ficha-pie{padding:12px 20px calc(12px + env(safe-area-inset-bottom))}
  .ficha-forma{height:160px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ── ficha del lote para imprimir (A4) ── */
.hoja-pdf{display:none}
@media print{
  @page{size:A4 portrait;margin:0}
  html,body{background:#fff!important;height:auto!important;overflow:visible!important}
  body>*:not(.hoja-pdf){display:none!important}
  .hoja-pdf{display:flex!important;flex-direction:column;gap:5mm;box-sizing:border-box;width:210mm;height:296mm;padding:13mm 14mm 11mm;
    background:#fff;color:#171c22;font-family:var(--sans);-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}
  /* (20-10) la banda de la marca, como las tarjetas del manual de Royal Estate: pizarra con el logo */
  .hp-banda{display:flex;align-items:center;justify-content:space-between;margin:-13mm -14mm 1mm;padding:5mm 14mm;background:#171c22}
  .hp-banda img{display:block;height:15mm;width:auto}
  .hp-banda span{font-size:7.5pt;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#c5cad1}
  .hp-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:8mm;padding-bottom:4mm;border-bottom:.6mm solid #353942}
  .hp-marca{margin:0;font-size:8pt;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#353942}
  .hp-cab h1{margin:1.5mm 0 1mm;font-family:var(--serif);font-weight:500;font-size:30pt;line-height:1;color:#171c22}
  .hp-cab h1 span{font-size:18pt;color:#5f636e}
  .hp-sector{margin:0;font-size:8.5pt;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#8a7433}
  .hp-fecha{text-align:right;font-size:8.5pt;color:#5f636e;display:flex;flex-direction:column;align-items:flex-end;gap:2mm}
  .hp-fecha b{display:inline-block;padding:1mm 3mm;border-radius:99px;color:#fff;font-size:8pt;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
  .hoja-pdf figure{margin:0}
  .hoja-pdf figcaption{margin-top:1.2mm;font-size:7pt;color:#8a8f99;letter-spacing:.04em}
  .hp-foto img{display:block;width:100%;height:92mm;object-fit:cover;border-radius:2.5mm}
  .hp-fila{display:grid;grid-template-columns:1fr 1fr;gap:6mm;align-items:start}
  .hp-forma svg{display:block;width:100%;height:52mm;background:#f1f2f4;border-radius:2mm}
  .hp-plano svg{display:block;width:100%;height:50mm;background:#f1f2f4;border-radius:2mm}
  .hp-datos{margin:0;display:grid;grid-template-columns:auto 1fr;font-size:9pt}
  .hp-datos dt,.hp-datos dd{margin:0;padding:1.6mm 0;border-top:.25mm solid #e3e5e9}
  .hp-datos dt{color:#5f636e}
  .hp-datos dd{text-align:right;font-variant-numeric:tabular-nums}
  .hp-datos dd small{display:block;font-size:7pt;color:#8a8f99}
  .hp-llegar{display:flex;gap:5mm;align-items:center;padding:4mm;border:.3mm solid #e3e5e9;border-radius:2mm;font-size:8.5pt;line-height:1.45}
  .hp-qr{flex:none;width:30mm;height:30mm}
  .hp-qr svg{width:100%;height:100%}
  .hp-tit{margin:0 0 1mm;font-family:var(--serif);font-size:15pt;color:#353942}
  .hp-llegar p{margin:0}
  .hp-llegar a{color:#8a7433;word-break:break-all}
  .hp-coord{margin-top:1.5mm!important;font-size:7.5pt;color:#8a8f99}
  .hp-pie{margin-top:auto;padding-top:3mm;border-top:.25mm solid #e3e5e9;font-size:7pt;line-height:1.5;color:#5f636e}
  .hp-pie p{margin:0 0 1mm}
  .hp-pie b{font-size:9pt;color:#171c22;font-weight:500}
}

/* el vehículo del viaje desde el puente (js/viaje.js): acostado sobre el mapa, gira con el camino */
.viaje-auto{pointer-events:none;width:30px;height:60px;filter:drop-shadow(0 0 6px rgba(255,214,140,.35))}
.viaje-auto svg{display:block}
/* mientras se presenta no aparece el aviso de ayuda de la primera visita */
body.presentando #aviso{display:none!important}