/* 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}
/* (02-11) el 3D de Google: termina arriba de la barra de abajo, para que su logo (abajo a la izquierda) se vea siempre;
   lo que va abajo a la izquierda sube lo justo para no taparlo, y la barra de abajo no muestra lo del relieve propio */
#mapa-google{position:fixed;left:0;right:0;top:0;bottom:var(--pie-h);z-index:1;background:#26302a}
#mapa-google[hidden]{display:none}
#mapa-google gmp-map-3d{display:block;width:100%;height:100%}
body.vista-google .capas-btn{bottom:calc(var(--pie-h) + 44px)}
body.vista-google #eb-camara,body.vista-google #eb-coords,body.vista-google #eb-alt{display:none}
.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{bottom:var(--pie-h)}
.maplibregl-ctrl-attrib{display:none}

/* ── carga: la intro de cine (20-10, el video de Jhonny) ──
   El escenario tiene la proporción del video (16:9). En la computadora lo cubre todo; en el celular es una franja
   grande sobre el lobby desenfocado. La pantalla de la tablet es un recuadro que intro.js lleva a las cuatro esquinas
   de la tablet del último cuadro (matrix3d): el logo y el reloj quedan en su perspectiva y se mueven con el escenario. */
.carga{position:fixed;inset:0;z-index:50;overflow:hidden;background:#000;transition:opacity 1s var(--e),visibility 1s;cursor:default}
.carga.fuera{opacity:0;visibility:hidden}
.carga.final{cursor:pointer}
.cine{position:absolute;inset:0}
.cine-escenario{position:absolute;transform-origin:50% 50%;transition:transform 2.4s cubic-bezier(.22,.8,.2,1)}
.cine-video,.cine-final{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill}
.cine-final{opacity:0}
.carga.final .cine-final{opacity:1}
/* la pantalla de la tablet */
.cine-pantalla{position:absolute;left:0;top:0;width:1000px;height:800px;transform-origin:0 0;overflow:hidden;opacity:0;pointer-events:none}
.carga.final .cine-pantalla{opacity:1;transition:opacity .25s ease}
.pantalla-luz{position:absolute;inset:0;opacity:0;
  background:radial-gradient(60% 62% at 50% 48%,#16263a 0%,#0b1420 45%,#05080d 78%,#020306 100%)}
.carga.final .pantalla-luz{animation:pantalla-enciende 1.1s .1s ease-out forwards}
@keyframes pantalla-enciende{0%{opacity:0}12%{opacity:.9}18%{opacity:.3}32%{opacity:1}100%{opacity:1}}
.pantalla-sello{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px}
.pantalla-reloj,.pantalla-texto{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.reloj-aro{fill:none;stroke:rgba(214,194,130,.42);stroke-width:1.3;stroke-dasharray:1200;stroke-dashoffset:1200}
.reloj-aro.fino{stroke:rgba(214,194,130,.22);stroke-width:1}
.reloj-marcas line{stroke:rgba(214,194,130,.55);stroke-width:1.4;stroke-linecap:round;opacity:0}
.reloj-marcas line.hora{stroke:#d6c282;stroke-width:2.4}
.carga.final .reloj-aro{animation:dibuja 1.6s .35s cubic-bezier(.4,0,.2,1) forwards}
.carga.final .reloj-marcas line{animation:aparece .5s ease forwards;animation-delay:calc(.6s + var(--i) * 18ms)}
@keyframes dibuja{to{stroke-dashoffset:0}}
@keyframes aparece{to{opacity:1}}
.pantalla-texto text{font-family:var(--sans);font-size:19px;font-weight:500;letter-spacing:.2em;fill:#e9dcb0}
.pantalla-texto{opacity:0;transform-origin:50% 50%}
.carga.final .pantalla-texto{animation:aparece 1s .9s ease forwards,reloj 24s .9s linear infinite}
@keyframes reloj{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.pantalla-logo{position:absolute;left:50%;top:50%;width:250px;height:auto;transform:translate(-50%,-50%) scale(.9);opacity:0;
  filter:drop-shadow(0 0 22px rgba(214,194,130,.22))}
.carga.final .pantalla-logo{animation:logo-entra 1.3s .45s cubic-bezier(.16,1,.3,1) forwards,logo-late 4.2s 2.2s ease-in-out infinite}
@keyframes logo-entra{from{opacity:0;transform:translate(-50%,-50%) scale(.86);filter:blur(8px) drop-shadow(0 0 0 rgba(214,194,130,0))}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0) drop-shadow(0 0 22px rgba(214,194,130,.22))}}
@keyframes logo-late{0%,100%{filter:drop-shadow(0 0 18px rgba(214,194,130,.16))}50%{filter:drop-shadow(0 0 34px rgba(214,194,130,.4))}}
/* el reflejo del vidrio que cruza una vez cuando se enciende */
.pantalla-reflejo{position:absolute;inset:-20%;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.13) 47%,rgba(255,255,255,.04) 53%,transparent 62%);transform:translateX(-60%)}
.carga.final .pantalla-reflejo{animation:reflejo 2.2s 1s ease-in-out forwards}
@keyframes reflejo{0%{opacity:0;transform:translateX(-60%)}15%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
/* al final, arriba de la tablet: «Tocá la pantalla», el único botón de la intro (Jhonny, 20-10: nunca entra solo, y
   mientras corre el video, ninguno) */
.cine-letrero{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 14px;border-radius:99px;
  transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;opacity:0;
  border:1px solid rgba(214,194,130,.55);background:rgba(10,12,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);color:#f4ead0;font:500 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.cine-letrero i{position:relative;width:9px;height:9px;border-radius:50%;background:#d6c282}
.cine-letrero i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #d6c282;animation:letrero-onda 1.8s ease-out infinite}
@keyframes letrero-onda{from{transform:scale(1);opacity:.9}to{transform:scale(2.8);opacity:0}}
.carga.final .cine-letrero{animation:letrero-entra .9s 1.5s cubic-bezier(.16,1,.3,1) forwards,letrero-flota 2.6s 2.4s ease-in-out infinite}
@keyframes letrero-entra{from{opacity:0;transform:translate(-50%,-70%)}to{opacity:1;transform:translate(-50%,-100%)}}
@keyframes letrero-flota{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-112%)}}
.carga.entrando .cine-letrero{animation:none;opacity:0;transition:opacity .3s}
/* el botón de sonido, como al principio (Jhonny, 20-10): de vidrio, abajo a la izquierda mientras corre el video.
   «Activar sonido» con el parlante tachado si el navegador la arrancó muda; «Sonido» con las ondas si suena */
.cine-sonido{position:absolute;z-index:3;left:max(18px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:8px;height:38px;margin:0;padding:0 15px;border-radius:99px;
  border:1px solid rgba(255,255,255,.22);background:rgba(10,12,16,.38);color:rgba(244,245,247,.86);font:500 12px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;animation:aparece .8s .6s ease forwards;transition:background .2s,border-color .2s,opacity .5s}
.cine-sonido:hover{background:rgba(10,12,16,.6);border-color:rgba(255,255,255,.45)}
.cine-sonido svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cine-sonido svg path:first-child{fill:currentColor;stroke:none}
.cine-sonido .onda{display:none}
.cine-sonido[aria-pressed="true"] .onda{display:block}
.cine-sonido[aria-pressed="true"] .tacha{display:none}
.carga.final .cine-sonido{animation:none;opacity:0;pointer-events:none}
/* al tocar: la cámara entra a la pantalla de la tablet */
.carga.entrando .cine-escenario{transition:transform 1.25s cubic-bezier(.62,0,.24,1)}
.carga.entrando .pantalla-texto{opacity:.0;transition:opacity .5s}
/* lo que tarda el mapa: una línea dorada muy fina abajo; el texto solo aparece si hay que esperarlo */
.carga-barra{position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:transparent}
.carga-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,rgba(214,194,130,0),#d6c282);transition:width .5s var(--e)}
.carga-texto{position:absolute;z-index:3;left:0;right:0;bottom:max(84px,calc(env(safe-area-inset-bottom) + 60px));margin:0;text-align:center;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,234,.7);opacity:0;transition:opacity .4s}
.carga.espera .carga-texto{opacity:1}
@media (prefers-reduced-motion:reduce){
  .carga.final .pantalla-texto{animation:aparece .4s forwards}
  .carga.final .pantalla-logo{animation:aparece .4s forwards;transform:translate(-50%,-50%)}
  .pantalla-reflejo{display:none}
  .cine-escenario{transition:none}
}

/* ── barra superior ── */
/* (20-10, dibujo de Jhonny) una sola fila: «Cómo llegar» a la izquierda del título y «Nosotros» a la derecha, a su
   altura, para que quede más mapa. Si falta ancho, el que se achica es el título (minmax 0) */
.barra{position:fixed;z-index:20;top:14px;left:14px;right:14px;display:grid;grid-template-columns:auto minmax(var(--lado,0px),1fr) minmax(0,420px) minmax(var(--lado,0px),1fr) auto;
  grid-template-areas:"izq llegar titulo busca der";align-items:start;gap:10px 16px;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{max-width:100%}
/* con Royal el título es más ancho: en un celular angosto se achica sin deformarse en vez de salirse */
.marca img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
#btn-presentar,#btn-nosotros,#btn-proyecto{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,#btn-nosotros:hover,#btn-proyecto:hover{background:rgba(255,255,255,.82);transform:translateY(-1px)}
#btn-presentar svg,#btn-nosotros svg,#btn-proyecto svg{width:19px;height:19px;fill:currentColor}
/* «Nosotros» (20-10): donde estaba el buscador, igual a «Cómo llegar» */
.b-sitio{grid-area:busca}
#btn-nosotros,#btn-proyecto{text-decoration:none}
#btn-presentar{justify-self:end;align-self:center}
.b-sitio{justify-self:start;align-self:center;display:flex;gap:10px}
/* (21-10) «Conocé al equipo Royal Estate» va en dos renglones: en uno medía 285 px contra 158 de «Cómo llegar» y el
   título quedaba corrido 64 px a la izquierda. Los dos botones, del mismo ancho, para que el título siga al medio */
#btn-presentar,#btn-nosotros,#btn-proyecto{min-width:10.6em;justify-content:center;white-space:nowrap}
.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}
/* (20-10) la disponibilidad: el color del estado y cuántos lotes hay, a la derecha */
label.sw.est .punto{flex:none;width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.25);margin-right:-3px}
label.sw.est b{margin-left:auto;font-weight:500;opacity:.75;font-variant-numeric:tabular-nums}
label.sw.est:has(input:not(:checked)){opacity:.55}
/* (29-10) lo que queda por sector: el nombre, «quedan 115 de 760 (15 %)» y una barra fina */
.por-sector{margin-top:12px;padding-top:10px;border-top:1px solid rgba(244,245,247,.12)}
.por-sector:empty{display:none}
.ps-tit{margin:0 0 6px;font-size:11.5px;opacity:.6}
.ps-fila{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:5px 0}
.ps-nom{display:flex;align-items:center;gap:8px;font-size:13px}
.ps-nom i{flex:none;width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.25)}
.ps-num{font-size:12px;opacity:.75;font-variant-numeric:tabular-nums}
.ps-barra{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(244,245,247,.14);overflow:hidden}
.ps-barra i{display:block;height:100%;border-radius:2px;background:var(--acento-vivo)}
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)}
/* la flecha «← Mapa»: solo en el celular vertical (abajo, en su @media) */
.ficha-cab .volver{display:none;flex:none;align-items:center;gap:4px;height:38px;padding:0 14px 0 8px;border:0;border-radius:99px;background:rgba(244,245,247,.16);color:var(--claro);font:inherit;letter-spacing:.1em;cursor:pointer}
.ficha-cab .volver svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ficha-cuerpo{flex:1;overflow:auto;padding:26px 28px 18px}
.interes-wa{margin:10px 0 0;font-size:12.5px;color:var(--tinta-suave)}
.interes-wa button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:#1f8f4e;text-decoration:underline;cursor:pointer}
.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)}
/* (20-10) «Agendar visita a este lote»: toda la fila de arriba, en dorado, para que resalte */
.ficha-pie .b-visita{grid-column:1/-1;background:#c9a24a;color:#1b1f24;font-weight:700}
.ficha-pie .b-visita:hover{background:#d8b35c}

/* ── 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)}
/* el pórtico de ingreso (20-10): su imagen en un recuadro sobre el pin, a la altura de la ficha de un lote */
.pop-portico .maplibregl-popup-content{width:min(330px,calc(100vw - 32px));padding:0;overflow:hidden;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.pop-portico figure{margin:0;aspect-ratio:1280/714;overflow:hidden;background:#1c2229}
.pop-portico img{display:block;width:100%;height:100%;object-fit:cover;animation:portico-entra 1.1s var(--e) both}
@keyframes portico-entra{from{transform:scale(1.06);opacity:0}to{transform:none;opacity:1}}
.portico-txt{display:grid;gap:3px;padding:12px 16px 15px}
.portico-txt span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-suave)}
.pop-portico .portico-txt b{font-size:23px;line-height:1.1}
.portico-txt small{font-size:12px;line-height:1.45}
.pop-portico .maplibregl-popup-close-button{top:8px;right:8px;width:30px;height:30px;padding:0;border-radius:50%;background:rgba(20,24,28,.55);color:#fff;font-size:19px;line-height:30px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pop-portico .maplibregl-popup-close-button:hover{background:rgba(20,24,28,.75)}
@media (prefers-reduced-motion:reduce){.pop-portico img{animation:none}}

/* ── 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}
/* (20-10) el pin es un marcador de MapLibre: tiene que ir con position:absolute. El «relative» de .pin le ganaba al de
   maplibre-gl.css (este archivo carga después) y los pines quedaban apilados uno debajo del otro, corridos 32 px más
   cada uno, y no sobre su zona */
.pin.maplibregl-marker{position:absolute}
.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}}
/* (21-10, Jhonny: «en ese cuadro, la foto más profesional de cada punto de referencia») a la derecha de la tarjeta, de
   su mismo alto y con la forma de la foto (el tamaño lo pone js/presentacion.js). Entra como la tarjeta, la foto se acerca muy despacio
   y de una a otra se funden. El crédito, abajo, sobre una sombra */
.relato-foto{position:fixed;z-index:22;left:var(--foto-izq,480px);bottom:calc(var(--pie-h) + 24px);width:var(--foto-w,420px);height:var(--foto-h,280px);margin:0;border-radius:16px;overflow:hidden;
  background:#1d2229;box-shadow:0 20px 50px rgba(0,0,0,.4);opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--e),transform .7s var(--e),height .5s var(--e),width .5s var(--e),visibility 0s .7s}
.relato-foto.ver{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .6s var(--e),transform .7s var(--e),height .5s var(--e),width .5s var(--e),visibility 0s}
.relato-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1.1s ease}
.relato-foto img.on{opacity:1;animation:foto-cerca 14s cubic-bezier(.25,.6,.3,1) forwards}
/* (21-10) se acerca apenas (3 %): la foto va entera, sin recortar sus bordes ni los logos de arriba */
@keyframes foto-cerca{from{transform:scale(1.03)}to{transform:scale(1)}}
.relato-foto::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);pointer-events:none}
.relato-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 11px;background:linear-gradient(rgba(10,12,16,0),rgba(10,12,16,.6));font-size:10.5px;letter-spacing:.05em;line-height:1.3}
.relato-foto figcaption a{color:rgba(255,255,255,.85);text-decoration:none}
.relato-foto figcaption a[href]:hover{color:#fff;text-decoration:underline}
@media (prefers-reduced-motion:reduce){.relato-foto img.on{animation:none;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 .b-sitio,body.presentando #btn-nosotros,body.presentando #btn-proyecto,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}
  /* en angosto, a los costados del título no entran (están los dos botones de las esquinas): «Cómo llegar» y
     «Nosotros» van juntos en UNA fila debajo del título (antes eran dos filas) */
  .barra{top:8px;left:8px;right:8px;grid-template-columns:auto 1fr 1fr auto;grid-template-areas:"izq titulo titulo der" "llegar llegar busca busca";gap:8px 8px}
  #btn-presentar,#btn-nosotros,#btn-proyecto{align-self:auto}
  :root{--titulo-h:88px}
  .marca{padding:9px 14px;border-radius:16px}
  .panel-muv{width:46px;height:46px}
  #btn-presentar,#btn-nosotros,#btn-proyecto{padding:0 18px 0 15px;font-size:13.5px}
  /* (21-10) en el celular el título ya va solo arriba y al medio: los dos botones, cada uno de su ancho (iguales no
     entraban en 360 px) */
  #btn-presentar,#btn-nosotros,#btn-proyecto{min-width:0}
  .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}
  body.vista-google .capas-btn{bottom:calc(var(--pie-h) + 38px)}
  .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}
  /* (21-10) la foto del recorrido, por ahora solo en la compu: la versión del celular se arma después (Jhonny) */
  .relato-foto{display:none}
  .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}
  /* (20-10) dvh: el alto que de verdad se ve. Con vh, en el navegador de WhatsApp del iPhone la ficha quedaba más alta
     que la pantalla y su barra de arriba (la ✕) se escondía */
  .ficha{top:auto;height:86vh;height:min(86dvh, calc(100dvh - 48px));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 (max-width:820px) and (orientation:portrait){
  .ficha-cab{gap:10px;padding:0 14px}
  .ficha-cab .volver{display:inline-flex}
  #ficha-titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@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;max-width:100%;height:296mm;height:min(296mm,100vh);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) Al imprimir, 100vh es el alto de la página: la hoja llena justo el papel que toque (A4, Carta, con o sin
     márgenes) y la foto cede lo que falte. Probado en Chrome con A4, Carta y Carta con márgenes de 12,7 mm. */
  .hoja-pdf>*{flex:none;break-inside:avoid}
  .hoja-pdf>.hp-foto{flex:1 1 auto}
  /* (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}
  /* (20-10) la foto es la que cede: ocupa lo que sobra de la hoja, así la ficha entra en UNA hoja sea A4 o Carta
     (Jhonny: «hay lotes que por culpa de una fila sacan dos hojas»; el iPhone ignora @page A4 y usa Carta) */
  .hp-foto{flex:1 1 auto;min-height:38mm;display:flex;flex-direction:column}
  .hp-foto img{display:block;flex:1 1 auto;min-height:0;width:100%;height:auto;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:48mm;background:#f1f2f4;border-radius:2mm}
  .hp-plano svg{display:block;width:100%;height:46mm;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}

/* ── (04-11) «Conocenos» y «El proyecto» a la derecha del título; «Cómo llegar», a la izquierda ──
   Jhonny: «desde la página principal necesitamos que se conozca al equipo de Royal desde el principio». «Conocenos» va
   directo a /berchatti/nosotros/ y «El proyecto», a /berchatti/. Las dos columnas de al lado del título arrancan del
   mismo ancho (--lado: lo que mide el par de la derecha) y crecen igual: el título sigue al medio */
.barra{--lado:316px}
/* de 1101 a 1300 px: sin el dibujo, para que el título no se achique */
@media (min-width:1101px) and (max-width:1300px){
  .barra{--lado:244px}
  #btn-presentar svg,#btn-nosotros svg,#btn-proyecto svg{display:none}
  #btn-presentar,#btn-nosotros,#btn-proyecto{padding:0 18px;min-width:0}
}
/* hasta 1100 px los tres no entran al lado del título: el título va arriba, entre las esquinas, y los tres botones,
   iguales, en una fila debajo (el corte de fila es el ::after) */
@media (max-width:1100px){
  .barra{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;column-gap:8px;row-gap:0}
  .b-izq{order:1}
  /* el título arranca en 0 y crece hasta su ancho: así entra en la fila de las esquinas (con su ancho entero, las
     esquinas bajaban a otra fila) y lo que sobra va a los márgenes, que lo dejan al medio */
  .marca{order:2;flex:1 0 0;min-width:0;max-width:max-content;margin:0 auto}
  .b-der{order:3}
  .barra::after{content:"";order:4;flex-basis:100%;height:8px}
  #btn-presentar{order:5}
  .b-sitio{display:contents}
  #btn-nosotros{order:6}
  #btn-proyecto{order:7}
  #btn-presentar,#btn-nosotros,#btn-proyecto{flex:1 1 0;min-width:0;max-width:240px;justify-content:center;align-self:auto}
}
/* en un celular angosto, sin el dibujo: así entran los tres en 360 px */
@media (max-width:600px){
  #btn-presentar svg,#btn-nosotros svg,#btn-proyecto svg{display:none}
  #btn-presentar,#btn-nosotros,#btn-proyecto{padding:0 8px;font-size:13px;letter-spacing:.01em}
}
/* en inglés «How to get there» es largo: en los celulares más angostos, un punto menos de letra */
@media (max-width:360px){
  #btn-presentar,#btn-nosotros,#btn-proyecto{padding:0 6px;font-size:12px;letter-spacing:0}
}