/*
 * Tu Masterplan — sistema visual.
 *
 * Plus Jakarta Sans, superficies blancas sobre grises zinc, radios de 6/8/12 px
 * y sombras apenas insinuadas. Una barra superior fija y, debajo, la fotografía
 * manda: el cromado son tarjetas blancas con borde que se apoyan encima sin
 * taparla. La parcela se marca con un contorno blanco fino y un disco numerado
 * del color de su estado, que además es el objetivo de clic.
 *
 * **El cromado es tinta, no color.** Antes el botón, el foco y la selección eran
 * del verde de Cierra, el mismo verde que significa "disponible". Dos cosas
 * distintas con el mismo color: un botón verde se leía como un estado. Ahora el
 * único color saturado de la pantalla es el de la parcela que se puede comprar,
 * y de paso el visor dejó de parecer de otra empresa: se le vende a loteadoras
 * que no son clientes de Cierra.
 */

:root {
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Cromado: botones, foco, selección. Tinta, para que no compita con la foto
     ni se confunda con un estado. */
  --marca-50: #f4f4f5;
  --marca-100: #e4e4e7;
  --marca-500: #52525b;
  --marca-600: #3f3f46;
  --marca-700: #27272a;
  --marca-800: #18181b;
  --marca-900: #09090b;
  --marca-anillo: rgb(39 39 42 / 0.25);

  /* El verde tiene un solo significado: esta parcela se puede comprar. */
  --verde-50: #f0fdf4;
  --verde-100: #bbf7d0;
  --verde-700: #15803d;
  --verde-800: #166534;

  --ambar-50: #fffbeb;
  --ambar-200: #fde68a;
  --ambar-800: #92400e;
  --azul-50: #eff6ff;
  --azul-200: #bfdbfe;
  --azul-700: #1d4ed8;

  --tinta: var(--zinc-900);
  --tinta-suave: var(--zinc-600);
  --tinta-tenue: var(--zinc-500);
  --papel: #ffffff;
  --papel-suave: var(--zinc-50);
  --linea: var(--zinc-200);
  --linea-fuerte: var(--zinc-300);

  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Cuatro radios, como en un plano: 6 lo que se escribe o se rotula (campos,
     insignias), 8 lo que se aprieta, 12 las tarjetas, 16 los paneles grandes.
     En píxeles: la raíz mide 14 px y en rem quedaban todos un octavo más chicos. */
  --radio-sm: 6px;
  --radio-md: 8px;
  --radio-lg: 12px;
  --radio-xl: 16px;
  --radio-full: 999px;

  /* Dos alturas sobre la foto: los controles que flotan (nivel 2) y los paneles
     que se abren encima de ellos (nivel 3). La sombra va teñida de zinc y no de
     negro puro: sobre el pasto o la tierra el negro ensucia. */
  --sombra-hud: 0 4px 12px -2px rgb(24 24 27 / 0.08), 0 2px 6px -1px rgb(24 24 27 / 0.04);
  --sombra-panel: 0 10px 25px -5px rgb(24 24 27 / 0.15), 0 2px 6px -1px rgb(24 24 27 / 0.06);
  /* Las islas flotantes: vidrio. Semitransparentes y difuminadas, dejan ver la
     foto detrás y pesan menos que un blanco opaco. Un filo claro arriba les da el
     canto del vidrio. Las de abajo (--isla-firme) van más blancas: caen sobre
     pasto y árboles, y ahí el texto tiene que seguir leyéndose. */
  --isla: rgb(255 255 255 / 0.34);
  --isla-firme: rgb(255 255 255 / 0.55);
  --isla-borde: rgb(255 255 255 / 0.55);
  --isla-desenfoque: blur(16px) saturate(170%);
  --sombra-isla: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 -1px 1px rgb(255 255 255 / 0.18),
    0 10px 28px -14px rgb(9 9 11 / 0.45);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);

  /* Lo que se aprieta. También en píxeles: el mínimo táctil (48 px, ver el
     bloque del final) es una medida del dedo, no del texto. */
  --alto-control: 44px;

  --alto-cabecera: 4rem;
}

* { box-sizing: border-box; }

/* Cualquier `display` explícito le gana al atributo hidden. Sin esta regla, un
   panel oculto con display:grid sigue ocupando la pantalla y se come los clics. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--zinc-950);
  color: var(--tinta);
  font: 400 0.875rem/1.5 var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--marca-700); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Entradas --------------------------------------------------------------- */

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cabecera { animation: aparecer 200ms ease-out backwards; }
.instrumentos { animation: subir 240ms ease-out backwards 120ms; }
.barra-inferior { animation: subir 240ms ease-out backwards 80ms; }
.leyenda { animation: subir 240ms ease-out backwards 100ms; }
.carta { animation: subir 240ms ease-out backwards 140ms; }
.pista { animation: aparecer 600ms ease backwards 900ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* --- Tarjeta: la superficie base de todo el cromado ------------------------- */

.tarjeta,
.acciones-rapidas, .puntos, .leyenda, .altimetro, .carta, .filtros, .ficha, .sugerencias {
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-hud);
}

/* --- Botón con borde ------------------------------------------------------- */

.pastillon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--alto-control);
  padding: 0 1rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-md);
  color: var(--tinta);
  font: 500 0.875rem/1 var(--sans);
  transition: background 150ms, border-color 150ms;
}
.pastillon:hover { background: var(--papel-suave); }
.pastillon:active, .pastillon[aria-expanded="true"] { background: var(--zinc-100); }
.pastillon svg { width: 1rem; height: 1rem; flex: none; color: var(--zinc-500); }
#abrir-buscador { display: none; }

.cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--radio-full);
  background: var(--marca-700);
  color: #fff;
  font: 600 0.625rem/1 var(--sans);
}

/* --- Cabecera --------------------------------------------------------------- */

.cabecera {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background: rgb(255 255 255 / 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linea);
}

.marca { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.marca__hito {
  width: 2.25rem; height: 2.25rem;
  flex: none;
  background: #27272a;
  border-radius: var(--radio-md);
}
/* El logo de la loteadora, en lugar de la "m" de Tu Masterplan. Alto fijo; ancho el que
   pida el dibujo, con tope para que un logo apaisado no se coma la barra. */
.marca__logo {
  flex: none;
  height: 2.25rem; width: auto; max-width: 9rem;
  object-fit: contain; object-position: left center;
}
.marca__texto { margin: 0; display: grid; gap: 0.15rem; min-width: 0; }

.marca__nombre {
  font: 700 1rem/1.2 var(--sans);
  letter-spacing: -0.01em;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marca__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 0.6875rem/1 var(--sans);
  color: var(--tinta-tenue);
  white-space: nowrap;
}
/* La etapa como rótulo superior: versalitas, en tinta suave. */
#marca-etapa:not(:empty) {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.cabecera__herramientas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* --- Buscador --------------------------------------------------------------- */

.buscador { position: relative; width: min(16rem, 40vw); }

.buscador__lupa {
  position: absolute;
  left: 0.75rem; top: 50%;
  width: 1rem; height: 1rem;
  transform: translateY(-50%);
  color: var(--zinc-400);
  pointer-events: none;
  /* Sobre el campo: con el campo de vidrio (backdrop-filter) quedaba tapada. */
  z-index: 1;
}

.buscador input {
  width: 100%;
  height: var(--alto-control);
  padding: 0 0.75rem 0 2.25rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  font-size: 0.875rem;
  color: var(--tinta);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.buscador input::placeholder { color: var(--zinc-400); }
.buscador input:focus { border-color: var(--marca-700); box-shadow: 0 0 0 3px var(--marca-anillo); }

.sugerencias {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.375rem);
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 17rem;
  overflow-y: auto;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-panel);
  animation: subir 200ms ease-out;
}

.sugerencias li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--zinc-700);
}
.sugerencias li:hover { background: var(--papel-suave); }
.sugerencias li[aria-selected="true"] { background: var(--marca-50); color: var(--marca-800); }
.sugerencias li i {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  flex: none;
}
.sugerencias small { margin-left: auto; font: 400 0.75rem var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-tenue); }

/* --- Botones ---------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--alto-control);
  padding: 0 1rem;
  border: 1px solid transparent;
  border-radius: var(--radio-md);
  background: var(--marca-700);
  color: #fff;
  font: 600 0.875rem/1 var(--sans);
  text-decoration: none;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.boton:hover { background: var(--marca-800); }
.boton:active { background: var(--marca-900); }

.boton--contorno { background: var(--papel); border-color: var(--linea-fuerte); color: var(--tinta); }
.boton--contorno:hover { background: var(--papel-suave); }
.boton--contorno:active { background: var(--zinc-100); }

.boton--texto { background: transparent; color: var(--zinc-700); }
.boton--texto:hover { background: var(--zinc-100); color: var(--tinta); }
.boton--texto:active { background: var(--zinc-200); }

/* El de WhatsApp lleva el verde de WhatsApp, a pedido: es el botón que la gente
   reconoce. Con texto oscuro y no blanco: blanco sobre #25d366 da 2:1 y no se
   lee al sol; tinta da más de 10:1. Es el único verde que no es un estado. */
.boton--whatsapp { background: #25d366; color: var(--zinc-950); }
.boton--whatsapp:hover { background: #20ba59; }
.boton--whatsapp:active { background: #1caa4f; }


.boton[disabled] { background: var(--zinc-300); border-color: transparent; color: #fff; cursor: not-allowed; }

/* --- Filtros ---------------------------------------------------------------- */

.filtros {
  position: fixed;
  z-index: 32;
  top: calc(var(--alto-cabecera) + 0.5rem);
  right: 1.25rem;
  width: min(20rem, calc(100vw - 2.5rem));
  padding: 1.25rem;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-panel);
  animation: subir 200ms ease-out;
}

.filtros__grupo { margin: 0 0 1.15rem; padding: 0; border: 0; }
.filtros__grupo legend {
  padding: 0 0 0.6rem;
  font: 600 0.6875rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.875rem;
  padding: 0 0.75rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-full);
  font: 500 0.75rem/1 var(--sans);
  color: var(--zinc-700);
  transition: border-color 150ms, background 150ms, color 150ms;
}
.chip i {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.chip:hover { background: var(--papel-suave); }
/* El filtro encendido se invierte en vez de teñirse. Con el cromado en tinta, un
   fondo gris claro no se distinguía del apagado; el punto conserva el color del
   estado, que es lo que el chip está diciendo. */
.chip[aria-pressed="true"] {
  background: var(--marca-800);
  border-color: var(--marca-800);
  color: #fff;
}
.chip[aria-pressed="true"] i { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35); }

.rango { display: flex; gap: 0.6rem; }
.rango label {
  flex: 1;
  display: grid;
  gap: 0.3rem;
  font: 600 0.625rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.rango i { font-style: normal; }
.rango input {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.625rem;
  background: var(--papel);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  font: 400 0.875rem var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.rango input:focus { border-color: var(--marca-700); box-shadow: 0 0 0 3px var(--marca-anillo); }

.interruptor {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--zinc-700);
  cursor: pointer;
}
.interruptor input { accent-color: var(--marca-700); width: 1rem; height: 1rem; }

.filtros__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.875rem;
  border-top: 1px solid var(--linea);
}
.conteo { font: 400 0.75rem var(--sans); color: var(--tinta-tenue); }
.filtros__pie .boton { height: 2rem; padding: 0 0.625rem; font-size: 0.8125rem; }

/* --- Escena ----------------------------------------------------------------- */

.escena { position: fixed; inset: var(--alto-cabecera) 0 0; }

.visor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--zinc-950);
  touch-action: none;
  /* Arrastrar para girar seleccionaba como texto los números de las parcelas, y en
     el iPhone dejar el dedo quieto abría el menú de copiar. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.visor canvas, .overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Al cambiar de vista, la foto anterior se apaga un poco mientras llega la nueva:
   se nota que algo está pasando, y la nueva entra de golpe pero ya encuadrada. */
.visor canvas { transition: opacity 220ms ease-out; }
.visor canvas.cambiando { opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .visor canvas { transition: none; } }
/* El paso entre puntos (visor.js, salirHacia y llegar): mientras la cámara se
   acerca la foto se funde y se desenfoca, y la nueva aparece igual de a poco. */
.visor > canvas, .visor > .overlay, .visor > .puntos-360, .visor > .referencias {
  transition: opacity 420ms ease-out, filter 420ms ease-out;
}
.visor.viajando > canvas, .visor.viajando > .overlay,
.visor.viajando > .puntos-360, .visor.viajando > .referencias {
  opacity: 0;
  filter: blur(6px);
  transition-duration: 480ms;
  transition-timing-function: ease-in;
}
.overlay { pointer-events: none; z-index: 2; }
.visor:focus-visible { outline: 2px solid var(--marca-700); outline-offset: -4px; }
/* Dentro de un iframe (insertado.js) el dedo que baja sigue bajando por la página;
   el que se mueve de lado gira la vista. */
.insertado .visor { touch-action: pan-y; }

/* --- Parcelas sobre la vista ------------------------------------------------ */

.parcela { pointer-events: auto; cursor: pointer; }

.parcela__forma {
  /* `all` y no el valor por defecto: con fill-opacity 0 el interior podría dejar
     de ser objetivo de clic según cómo el navegador interprete "pintado". */
  pointer-events: all;
  fill: #fff;
  fill-opacity: 0;
  stroke: #fff;
  stroke-width: 1.25;
  stroke-opacity: 0.85;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill-opacity 160ms ease, stroke-width 160ms ease;
}

/* El alto y el redondeo los pone el guion al medir el rótulo: con una etapa dice
   "7" y queda redondo, con varias dice "4-35" y se estira. */
.parcela__disco {
  stroke: rgb(255 255 255 / 0.9);
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
  transition: transform 160ms var(--curva);
  transform-box: fill-box;
  transform-origin: center;
}

.parcela__numero {
  font: 700 0.625rem var(--sans);
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  pointer-events: none;
}

.parcela:hover .parcela__forma { fill-opacity: 0.18; stroke-width: 2; }
.parcela:hover .parcela__disco { transform: scale(1.15); }
/* Reservadas, vendidas y no disponibles: un punto de su color, sin número
   (visor.js, ESCALA_PUNTO). Al pasar encima crece un poco para que se note que se toca. */
.parcela--punto .parcela__numero { display: none; }
.parcela--punto .parcela__disco { transform: scale(0.32); stroke-width: 3; }
.parcela--punto:hover .parcela__disco { transform: scale(0.45); }

.parcela--seleccionada .parcela__forma {
  fill-opacity: 0.28;
  stroke-width: 2.5;
  stroke-opacity: 1;
}
.parcela--seleccionada .parcela__disco {
  transform: scale(1.22);
  stroke: #fff;
  stroke-width: 3;
}

/* El globo de la elegida: la pastilla flota sobre la parcela y una patita con
   punta la señala (visor.js, _ponerGlobo). En las demás no existen. */
.parcela__patita, .parcela__punta { display: none; }
.parcela--seleccionada .parcela__patita {
  display: inline;
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.5));
}
.parcela--seleccionada .parcela__punta {
  display: inline;
  fill: currentColor;
  stroke: #fff;
  stroke-width: 1.5;
}

/* "ETAPA 3" sobre su sector (visor.js, _dibujarEtapas): del color de su borde y
   en mayúsculas, para que no se lea como una parcela más. */
.etapa { pointer-events: auto; cursor: pointer; }
.etapa:hover .etapa__fondo { stroke: #fff; stroke-width: 2; }
/* El borde de la etapa: del color de la etapa (visor.js, colorDeEtapa) y más
   grueso que el de una parcela, con un filo oscuro para que se lea sobre pasto
   claro. Encierra; no se toca. */
.etapa__contorno {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linejoin: round;
  paint-order: stroke;
  filter: drop-shadow(0 0 1.5px rgb(0 0 0 / 0.7));
  pointer-events: none;
}
.etapa__fondo { fill: currentColor; stroke: rgb(255 255 255 / 0.85); stroke-width: 1; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45)); }
.etapa__nombre {
  fill: #1c1a17;
  font: 700 0.625rem var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-anchor: middle;
}
.overlay--con-seleccion .etapas { display: none; }
/* Etapa elegida: su borde se engruesa y el rótulo se marca; las demás quedan atrás. */
.etapa__contorno.etapa--resaltada { stroke-width: 5.5; fill: currentColor; fill-opacity: 0.16; filter: drop-shadow(0 0 2.5px rgb(0 0 0 / 0.8)); }
.etapa.etapa--resaltada .etapa__fondo { stroke: #fff; stroke-width: 2.5; }
.etapa__contorno.etapa--apagada { opacity: 0.3; }
.etapa.etapa--apagada { opacity: 0.6; }

.parcela--atenuada { opacity: 0.18; pointer-events: none; }
.parcela--atenuada .parcela__pastilla { display: none; }

/* Con una parcela elegida, el resto da un paso atrás: se apaga y pierde el rótulo,
   pero se puede tocar para cambiar de parcela. */
/* 0.2 y no más: en un loteo grande son cientos de contornos blancos, y al 30 % todavía
   competían con la elegida. */
.overlay--con-seleccion .parcela:not(.parcela--seleccionada) {
  opacity: 0.2;
  transition: opacity 200ms ease;
}
.overlay--con-seleccion .parcela:not(.parcela--seleccionada):hover { opacity: 0.75; }
.overlay--con-seleccion .parcela:not(.parcela--seleccionada) .parcela__pastilla { display: none; }

/* Un grupo de parcelas vecinas cuyos números no caben (grupos.js): su rango y
   cuántas quedan disponibles. Al tocarlo, la cámara se acerca y aparecen. */
.burbuja { pointer-events: auto; cursor: pointer; }
.burbuja__toque { fill: transparent; }
.burbuja__fondo {
  fill: var(--zinc-900);
  stroke: rgb(255 255 255 / 0.9);
  stroke-width: 1.5;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.45));
  transition: transform 160ms var(--curva);
  transform-box: fill-box;
  transform-origin: center;
}
.burbuja:hover .burbuja__fondo { transform: scale(1.08); }
.burbuja__texto {
  font: 600 0.75rem var(--sans);
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  fill: #fff;
  pointer-events: none;
}
.burbuja__rango { font-weight: 700; }
.burbuja__disponibles { fill: rgb(255 255 255 / 0.7); }
/* Verde claro y no el #15803d de disponible: sobre el fondo oscuro no se leería. */
.burbuja__disponibles--hay { fill: #4ade80; }
.overlay--con-seleccion .burbuja { display: none; }

/* El brillo que late alrededor de la elegida, del color de su estado. Solo se
   anima la opacidad. */
.parcela-halo {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
/* La regla general de movimiento reducido acorta las animaciones a 1 ms: en una
   infinita eso sería un parpadeo. Acá el brillo se queda quieto. */
@media (prefers-reduced-motion: reduce) {
  .parcela-halo, .parcela-mapa--elegida { animation: none !important; opacity: 0.85; }
}

/* Los accesos del KMZ, en el amarillo con que los dibuja la loteadora. */
.camino {
  pointer-events: none;
  fill: #f2c230;
  fill-opacity: 0.3;
  fill-rule: evenodd;
  stroke: #f2c230;
  stroke-width: 1.25;
  stroke-opacity: 0.9;
}

/* Los hitos del horizonte (visor.js, _dibujarReferencias): una píldora oscura con
   el nombre y el tiempo, parada sobre un alfiler que baja al lugar. Sobre nubes o
   cielo claro un texto suelto con borde se perdía. */
.referencias { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.referencia {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  translate: -50% -100%;
}
.referencia[hidden] { display: none; }
.referencia__pildora {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgb(15 15 15 / 0.72);
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  white-space: nowrap;
  font: 700 0.8125rem var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.referencia__lejania {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #ffd166;
}
/* El alfiler: una línea hasta el horizonte y un punto donde queda el lugar. */
.referencia::after {
  content: '';
  width: 2px;
  height: var(--alfiler, 22px);
  background: linear-gradient(#fff, rgb(255 255 255 / 0.6));
  box-shadow: 0 0 2px rgb(0 0 0 / 0.5);
}
.referencia::before {
  content: '';
  order: 2;
  width: 7px;
  height: 7px;
  margin-top: -1px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 0.35);
}
/* Detrás de un cerro: el rótulo se para en la cumbre, el alfiler es punteado y no
   tiene punto en el suelo, y un cerro con una flecha dice que el pueblo está más allá. */
.referencia--detras .referencia__pildora { background: rgb(15 15 15 / 0.55); }
.referencia--detras::after {
  background: repeating-linear-gradient(#fff 0 3px, transparent 3px 6px);
  box-shadow: none;
}
.referencia--detras::before { display: none; }
/* Un grupo de lugares en la misma dirección se apila a un costado: la píldora se
   ancla por su borde y el alfiler en codo hasta su punto lo dibuja el SVG. */
.referencia--costado { translate: 0 -50%; }
.referencia--costado.referencia--izquierda { translate: -100% -50%; }
.referencia--costado::after, .referencia--costado::before { display: none; }
/* Si no cabe al costado (celular), se corta el nombre y la distancia queda entera. */
.referencia--costado .referencia__pildora { max-width: 100%; box-sizing: border-box; }
.referencia--costado .referencia__pildora b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.referencia--costado .referencia__lejania { flex-shrink: 0; }
.guias-referencias { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.guia-referencia[hidden] { display: none; }
.guia-referencia path { fill: none; stroke-linejoin: round; }
.guia-referencia__sombra { stroke: rgb(0 0 0 / 0.35); stroke-width: 4; }
.guia-referencia__linea { stroke: rgb(255 255 255 / 0.9); stroke-width: 2; }
.guia-referencia__punto { fill: #fff; stroke: rgb(0 0 0 / 0.35); stroke-width: 2; }
.guia-referencia--detras .guia-referencia__linea { stroke-dasharray: 3 3; }
.guia-referencia--detras .guia-referencia__sombra, .guia-referencia--detras .guia-referencia__punto { display: none; }
.referencia__detras {
  align-self: center;
  width: 18px;
  height: 13px;
  fill: rgb(255 255 255 / 0.85);
  stroke: none;
}
.referencia__detras .referencia__flecha {
  fill: none;
  stroke: #ffd166;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 40rem) {
  .referencia__pildora { padding: 4px 9px; font-size: 0.6875rem; }
  .referencia__lejania { font-size: 0.6875rem; }
}
/* Con fotos (galeria.js): la píldora se puede tocar, y una cámara dice que hay algo
   que ver. Es lo único de la capa de referencias que recibe el puntero. */
.referencia--fotos .referencia__pildora {
  pointer-events: auto;
  cursor: pointer;
  align-items: center;
  transition: background-color 0.15s, transform 0.15s;
}
.referencia--fotos .referencia__pildora:hover { background: rgb(15 15 15 / 0.88); transform: scale(1.04); }
.referencia--fotos:focus-visible { outline: none; }
.referencia--fotos:focus-visible .referencia__pildora { outline: 2px solid #fff; outline-offset: 2px; }
.referencia__camara {
  width: 15px;
  height: 15px;
  margin-left: 1px;
  flex-shrink: 0;
  fill: none;
  stroke: #ffd166;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

/* --- Columna de instrumentos ------------------------------------------------ */

.instrumentos {
  position: fixed;
  z-index: 20;
  right: 1.25rem;
  top: calc(50% + var(--alto-cabecera) / 2);
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
}

.altimetro {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.6rem 0.5rem;
  border-radius: var(--radio-lg);
}
.altimetro__unidad {
  font: 600 0.5625rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.altimetro__unidad--pie { opacity: 0.7; }

.altimetro__escala { position: relative; display: grid; gap: 0.15rem; padding-right: 0.5rem; }
.altimetro__escala::after {
  content: '';
  position: absolute;
  right: 0; top: 0.55rem; bottom: 0.55rem;
  width: 1px;
  background: var(--linea-fuerte);
}

.altimetro__escala button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.25rem 0.45rem 0.25rem 0.3rem;
  background: none;
  border: 0;
  color: var(--tinta-suave);
  font: 500 0.8125rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  transition: color 150ms, transform 200ms var(--curva);
}
.altimetro__escala button:hover:not([disabled]) { color: var(--tinta); transform: translateX(-2px); }

.altimetro__tic {
  width: 0.45rem; height: 1px;
  background: var(--zinc-400);
  transition: width 220ms var(--curva), background 150ms;
}

.altimetro__escala button[aria-pressed="true"] { color: var(--marca-700); font-size: 0.9375rem; font-weight: 700; }
.altimetro__escala button[aria-pressed="true"] .altimetro__tic { width: 1rem; background: var(--marca-700); }
.altimetro__escala button[disabled] { opacity: 0.3; cursor: not-allowed; }
.altimetro__escala button[disabled] .altimetro__tic { width: 0.25rem; }

.zoom { display: grid; gap: 0.35rem; }
.zoom button {
  display: grid;
  place-items: center;
  width: var(--alto-control); height: var(--alto-control);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-hud);
  color: var(--tinta-suave);
  font: 400 1.125rem/1 var(--sans);
  transition: background 150ms, color 150ms;
}
.zoom button:hover { background: var(--papel-suave); color: var(--tinta); }
.zoom button:active { background: var(--zinc-100); }

/* --- Barra inferior --------------------------------------------------------- */

.barra-inferior {
  position: fixed;
  z-index: 22;
  left: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.acciones-rapidas {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: var(--radio-md);
}

.accion {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.125rem;
  padding: 0 0.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radio-sm);
  color: var(--zinc-700);
  font: 500 0.8125rem/1 var(--sans);
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.accion svg { width: 1rem; height: 1rem; flex: none; color: var(--zinc-500); }
.accion:hover { background: var(--zinc-100); color: var(--tinta); }

.puntos {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  border-radius: var(--radio-md);
}
.puntos__fila { display: flex; gap: 0.125rem; }
.puntos__fila button {
  min-width: 2rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  background: transparent;
  border: 0;
  border-radius: var(--radio-sm);
  color: var(--zinc-600);
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.04em;
  transition: color 150ms, background 150ms;
}
.puntos__fila button:hover { background: var(--zinc-100); color: var(--tinta); }
.puntos__fila button[aria-pressed="true"] { background: var(--marca-700); color: #fff; }
.puntos__palabra, .puntos__altura { display: none; }

/* --- Leyenda ---------------------------------------------------------------- */

.leyenda {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radio-md);
  white-space: nowrap;
}
.leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 500 0.75rem/1 var(--sans);
  color: var(--zinc-700);
}
.leyenda span + span { padding-left: 0.875rem; border-left: 1px solid var(--linea); }
.leyenda i {
  width: 0.625rem; height: 0.625rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
/* Sobre la vista aérea, "6 disponibles" y nada más: abre Filtros, donde se eligen
   los estados. La lista de estados solo aparece sobre el plano (más abajo). */
.leyenda__resumen {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  background: none;
  border: 0;
  font: 600 0.75rem/1 var(--sans);
  color: var(--tinta);
  cursor: pointer;
}
.leyenda__estado { display: none !important; }
body[data-plano="completo"] .leyenda__resumen,
body[data-panel="mapa"] .leyenda__resumen { display: none; }
body[data-plano="completo"] .leyenda__estado,
body[data-panel="mapa"] .leyenda__estado { display: inline-flex !important; }

/* --- WhatsApp ----------------------------------------------------------------- */

/* Un solo botón general, redondo y flotante. El de cada parcela va en su ficha. */
.whatsapp-flotante {
  position: fixed;
  z-index: 22;
  right: 1.25rem;
  bottom: calc(1.25rem + var(--alto-control) + 0.75rem);
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 50%;
  background: rgb(37 211 102 / 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 10px 26px -10px rgb(0 0 0 / 0.5);
  color: var(--zinc-950);
  transition: transform 160ms var(--curva), background 150ms;
}
.whatsapp-flotante[hidden] { display: none; }
.whatsapp-flotante:hover { background: rgb(37 211 102 / 0.92); transform: translateY(-1px); }
.whatsapp-flotante:focus-visible { outline: 2px solid var(--marca-700); outline-offset: 3px; }
.whatsapp-flotante svg { width: 1.6rem; height: 1.6rem; }
/* Con el minimapa abierto en la esquina, el botón pasa a su izquierda. */
body[data-plano="mini"] .whatsapp-flotante { bottom: 1.25rem; right: calc(1.25rem + 17.5rem + 0.75rem); }
body[data-plano="completo"] .whatsapp-flotante { display: none; }

/* --- Pista ------------------------------------------------------------------ */

.pista {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 3.9rem;
  transform: translateX(-50%);
  margin: 0;
  font: 500 0.75rem/1 var(--sans);
  white-space: nowrap;
  color: rgb(255 255 255 / 0.9);
  text-shadow: 0 1px 5px rgb(0 0 0 / 0.95), 0 0 14px rgb(0 0 0 / 0.7);
  transition: opacity 700ms;
}
.pista--oculta { opacity: 0; }

/* --- Carga y error ---------------------------------------------------------- */

.cargando {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  font: 600 0.625rem/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.9);
}
.cargando__hilo {
  display: block;
  width: 9rem; height: 2px;
  background: rgb(255 255 255 / 0.25);
  border-radius: 999px;
  overflow: hidden;
}
.cargando__hilo i {
  display: block;
  width: 35%; height: 100%;
  background: #fff;
  animation: recorre 1.15s ease-in-out infinite;
}
@keyframes recorre { 0% { transform: translateX(-100%); } 100% { transform: translateX(386%); } }

.aviso-error {
  position: absolute;
  z-index: 9;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.6rem;
  max-width: 34rem;
  margin: auto;
  padding: 2rem;
  text-align: center;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.875rem;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.9);
}
.aviso-error strong { color: #fff; }
.aviso-error code {
  display: block;
  padding: 0.6rem 0.8rem;
  background: rgb(255 255 255 / 0.12);
  border-radius: var(--radio-sm);
  color: #fff;
  font: 400 0.8125rem ui-monospace, monospace;
}

/* --- Carta (plano) ---------------------------------------------------------- */

.carta {
  position: fixed;
  z-index: 21;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 17.5rem;
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-panel);
  overflow: hidden;
  transition: width 420ms var(--curva);
}

.carta__barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-bottom: 1px solid var(--linea);
}
.carta__titulo {
  font: 600 0.6875rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.carta__accion {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  background: transparent;
  border: 0;
  border-radius: var(--radio-sm);
  color: var(--zinc-500);
  transition: background 150ms, color 150ms;
}
.carta__accion svg { width: 0.75rem; height: 0.75rem; }
.carta__accion:hover { background: var(--zinc-100); color: var(--tinta); }
.carta__accion[aria-pressed="true"] { background: var(--marca-50); color: var(--marca-700); }
.accion[aria-pressed="true"] { background: var(--zinc-900); color: #fff; }

.mapa { height: 11rem; background: var(--zinc-100); }
.carta__accion + .carta__accion { margin-left: 0; }

/* El plano en escritorio tiene tres estados (body[data-plano]): guardado en el
   botón flotante, abierto como minimapa en la esquina, o a pantalla completa bajo
   la cabecera. En el teléfono es otra pestaña y nada de esto aplica. */
.plano-flotante {
  position: fixed;
  z-index: 21;
  right: 1.25rem;
  bottom: 1.25rem;
  display: none;
  align-items: center;
  gap: 0.5rem;
  height: var(--alto-control);
  padding: 0 1.1rem 0 0.9rem;
  background: var(--papel);
  border: 0;
  border-radius: var(--radio-full);
  box-shadow: var(--sombra-panel);
  color: var(--tinta);
  font: 600 0.875rem/1 var(--sans);
  cursor: pointer;
  transition: transform 160ms var(--curva), box-shadow 160ms;
}
.plano-flotante svg { width: 1.15rem; height: 1.15rem; }
.plano-flotante:hover { transform: translateY(-1px); }
.plano-flotante:active { transform: translateY(0) scale(0.98); }
.plano-flotante:focus-visible { outline: 2px solid var(--marca-700); outline-offset: 2px; }

@media (min-width: 62.0625rem) {
  body[data-plano="cerrado"] .carta { display: none; }
  body[data-plano="cerrado"] .plano-flotante { display: inline-flex; animation: subir 200ms ease-out; }

  body[data-plano="completo"] .carta {
    inset: 0;
    width: auto;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    animation: aparecer 180ms ease-out;
  }
  body[data-plano="completo"] .mapa { flex: 1; height: auto; }
  /* Lo de la vista aérea queda debajo del plano; la leyenda sigue sirviendo. */
  body[data-plano="completo"] .barra-inferior,
  body[data-plano="completo"] .instrumentos { display: none; }
  body[data-plano="completo"] .leyenda { z-index: 22; }
  /* Volver a la vista aérea: el mismo botón del teléfono, en la esquina donde la
     vista aérea tiene el botón Plano. El zoom del plano sube para no quedar debajo. */
  body[data-plano="completo"] .entrar-360 { display: flex; left: auto; right: 1.25rem; bottom: 1.25rem; }
  body[data-plano="completo"] .carta .leaflet-control-zoom { margin-bottom: 6rem; }
}

/* En el plano, la elegida late y lleva su nombre fijo; las demás no muestran el
   suyo mientras haya una elegida. */
.parcela-mapa--elegida {
  animation: latido-plano 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgb(255 214 150 / 0.95));
}
@keyframes latido-plano {
  0%, 100% { stroke-opacity: 0.55; stroke-width: 3px; }
  50% { stroke-opacity: 1; stroke-width: 6px; }
}
.mapa--con-seleccion .leaflet-tooltip:not(.etiqueta-elegida) { display: none; }

/* Los números del plano y, cuando no caben, la burbuja de su grupo (grupos.js).
   Cuelgan de un ancla de tamaño cero para quedar centrados en la parcela. */
.numero-mapa-ancla { width: 0 !important; height: 0 !important; }
.numero-mapa, .burbuja-mapa {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--radio-full);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 0 0 1.5px rgb(255 255 255 / 0.9);
  cursor: pointer;
}
.numero-mapa {
  height: 20px;
  padding: 0 7px;
  font: 700 0.6875rem/1 var(--sans);
}
.burbuja-mapa {
  height: 28px;
  padding: 0 12px;
  gap: 0.15rem;
  background: var(--zinc-900);
  color: #fff;
  font: 600 0.75rem/1 var(--sans);
  transition: transform 160ms var(--curva);
}
.burbuja-mapa:hover { transform: translate(-50%, -50%) scale(1.08); }
/* El dedo necesita 44 px; la burbuja mide 28. */
.burbuja-mapa::after { content: ''; position: absolute; inset: -8px; }
.burbuja-mapa b { font-weight: 700; }
.burbuja-mapa__disponibles { color: rgb(255 255 255 / 0.7); }
.burbuja-mapa__disponibles--hay { color: #4ade80; }
.mapa--con-seleccion .numero-mapa-ancla { display: none; }
.leaflet-tooltip.etiqueta-elegida {
  padding: 0.3rem 0.6rem;
  background: var(--zinc-900);
  border: 0;
  border-radius: var(--radio-full);
  box-shadow: var(--sombra-hud);
  color: #fff;
  font: 700 0.75rem/1 var(--sans);
}
.leaflet-tooltip-top.etiqueta-elegida::before { border-top-color: var(--zinc-900); }

.leaflet-container { background: var(--zinc-100); font: inherit; outline: none; }
.leaflet-control-attribution {
  padding: 0 0.35rem !important;
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--tinta-tenue) !important;
  font: 400 0.5625rem/1.6 var(--sans) !important;
  white-space: nowrap;
}
.leaflet-control-attribution a { color: var(--tinta-suave) !important; }
.leaflet-control-attribution .leaflet-attribution-flag { display: none !important; }

.leaflet-control-zoom { border: 0 !important; box-shadow: none !important; }
.leaflet-control-zoom a {
  width: 1.5rem !important;
  height: 1.5rem !important;
  line-height: 1.4rem !important;
  background: var(--papel) !important;
  border: 1px solid var(--linea) !important;
  border-radius: var(--radio-sm) !important;
  box-shadow: var(--sombra-hud);
  color: var(--zinc-700) !important;
  font-size: 0.875rem !important;
}
.leaflet-control-zoom a + a { margin-top: 3px; }

.parcela-mapa { cursor: pointer; transition: fill-opacity 160ms; }

/* El punto de vuelo: un disco con el romano sobre el lugar exacto del dron y, al
   lado, a qué altura se voló. La pastilla cuelga del ancla (de tamaño cero) para
   que el centro del disco, y no la esquina de la pastilla, sea el punto. */
.punto-vuelo-ancla { width: 0 !important; height: 0 !important; }
.punto-vuelo {
  --disco: 32px;
  position: absolute;
  left: calc(var(--disco) / -2);
  top: calc(var(--disco) / -2);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--disco);
  padding-right: 0.65rem;
  background: var(--papel);
  border-radius: var(--radio-full);
  box-shadow: var(--sombra-hud), 0 0 0 1px var(--linea);
  white-space: nowrap;
  cursor: pointer;
}
/* El dedo necesita 48 px; el dibujo no, y más grande taparía las parcelas. */
.punto-vuelo::after { content: ''; position: absolute; inset: -8px; }
.punto-vuelo__disco {
  display: grid;
  place-items: center;
  width: var(--disco); height: var(--disco);
  border-radius: 50%;
  background: var(--zinc-900);
  color: #fff;
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.02em;
}
.punto-vuelo__rotulo {
  font: 600 0.75rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-suave);
}
.punto-vuelo--activo { background: var(--marca-700); box-shadow: var(--sombra-hud); }
.punto-vuelo--activo .punto-vuelo__disco { background: #fff; color: var(--marca-700); }
.punto-vuelo--activo .punto-vuelo__rotulo { color: #fff; }

/* En el plano chico de escritorio las pastillas tapaban el loteo: ahí basta el
   disco, y la altura vuelve al agrandarlo. */
@media (min-width: 62.0625rem) {
  body:not([data-plano="completo"]) .carta .punto-vuelo { --disco: 24px; padding-right: 0; }
  body:not([data-plano="completo"]) .carta .punto-vuelo__rotulo { display: none; }
  body:not([data-plano="completo"]) .carta .punto-vuelo__disco { font-size: 0.625rem; }
}

.leaflet-tooltip {
  padding: 0.25rem 0.5rem !important;
  background: var(--papel) !important;
  border: 1px solid var(--linea) !important;
  border-radius: var(--radio-sm) !important;
  box-shadow: var(--sombra-hud) !important;
  color: var(--tinta) !important;
  font: 500 0.75rem var(--sans) !important;
}
.leaflet-tooltip::before { display: none !important; }

/* --- Ver plano (vista aérea del teléfono) ------------------------------------ */

.ver-plano { display: none; }

.ver-plano {
  position: fixed;
  z-index: 24;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.1rem 0.4rem 0.4rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-hud);
  text-align: left;
  transition: background 150ms;
}
.ver-plano:hover { background: var(--papel-suave); }
/* El loteo en miniatura, en sus colores de estado, sobre un fondo de terreno. */
.ver-plano__miniatura {
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--radio-md);
  background: #c9cfb4;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.ver-plano__miniatura polygon { stroke: rgb(255 255 255 / 0.85); stroke-width: 0.4; }
.ver-plano__textos { display: grid; gap: 0.2rem; }
.ver-plano__textos strong {
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}
.ver-plano__textos span { font: 500 0.875rem/1.1 var(--sans); color: var(--tinta-suave); }

/* --- Ficha ------------------------------------------------------------------ */

.ficha {
  position: fixed;
  z-index: 28;
  left: 1.25rem;
  bottom: 5rem;
  /* Con las acciones en dos columnas, a 287 px la fila se partía y el panel
     pedía scroll. 360 px es el ancho del inspector del diseño, menos el margen. */
  width: 360px;
  max-height: min(52rem, calc(100vh - var(--alto-cabecera) - 6.5rem));
  overflow-y: auto;
  padding: 1.25rem;
  border-radius: var(--radio-xl);
  box-shadow: var(--sombra-panel);
  animation: subir 200ms ease-out;
}

/* El asa solo existe donde el panel se arrastra: en el teléfono (ver Móvil). */
.ficha__asa { display: none; }
.ficha--arrastrando { transition: none !important; animation: none; }
.ficha:not(.ficha--arrastrando) { transition: transform 220ms var(--curva); }

.ficha__cabecera { display: flex; align-items: flex-start; gap: 0.75rem; }
.ficha__identidad { min-width: 0; }
.ficha__titulo {
  margin: 0.5rem 0 0;
  font: 700 20px/1.2 var(--sans);
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.ficha__proyecto { color: var(--tinta); }
.ficha__herramientas { margin-left: auto; display: flex; gap: 0.5rem; flex: none; }
/* Compartir y cerrar: botones redondos grises, como en el diseño. */
.ficha__redondo {
  display: grid;
  place-items: center;
  width: var(--alto-control); height: var(--alto-control);
  background: var(--zinc-100);
  border: 0;
  border-radius: 50%;
  color: var(--tinta);
  font-size: 0.9375rem;
  transition: background 150ms;
}
.ficha__redondo:hover { background: var(--zinc-200); }
.ficha__redondo svg { width: 1.15rem; height: 1.15rem; }

.ficha__meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ficha__etapa { font: 600 0.8125rem/1 var(--sans); color: var(--tinta-suave); }

/* El estado en mayúsculas con su punto: lo primero que se lee de la ficha. */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radio-full);
  background: var(--zinc-100);
  color: var(--zinc-700);
  font: 700 0.6875rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.insignia::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.insignia--disponible { background: var(--verde-100); color: var(--verde-800); }
.insignia--reservado { background: var(--ambar-200); color: var(--ambar-800); }
.insignia--vendido { background: var(--azul-200); color: var(--azul-700); }
.insignia--no_disponible { background: var(--zinc-900); color: #fff; }
.insignia--no_en_venta { background: var(--zinc-200); color: var(--zinc-600); }

/* La cuadrícula de datos del lote: dos columnas de tarjetas con ícono. */
.atributos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}
.atributo {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem;
  background: var(--zinc-100);
  border-radius: var(--radio-lg);
}
.atributo__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem; height: 2.5rem;
  background: var(--papel);
  border-radius: var(--radio-md);
  color: var(--marca-700);
}
.atributo__icono svg { width: 1.25rem; height: 1.25rem; }
.atributo__textos { display: grid; gap: 0.2rem; min-width: 0; }
.atributo__rotulo {
  font: 700 0.625rem/1.1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.atributo__valor { font: 700 1.125rem/1.15 var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta); }
.atributo__detalle { font: 400 0.75rem/1.3 var(--sans); color: var(--tinta-suave); }

/* El precio en su propia tarjeta, grande: es la cifra que se compara. */
.precio {
  margin: 0.75rem 0 1.1rem;
  padding: 1rem 1.1rem;
  background: var(--zinc-100);
  border-radius: var(--radio-lg);
}
.precio__rotulo {
  font: 700 0.6875rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.precio__monto { margin: 0.4rem 0 0; color: var(--tinta); }
.precio__monto strong { font: 700 28px/1.1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.precio__monto small { font: 500 0.8125rem var(--sans); color: var(--tinta-suave); }
.precio__monto--consultar { font: 700 1.125rem/1.2 var(--sans); }
/* Pie y cuotas bajo el precio, separados por una línea, rótulo a la izquierda. */
.precio__financiamiento {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--linea-fuerte);
}
.precio__financiamiento div { display: flex; justify-content: space-between; gap: 1rem; }
.precio__financiamiento dt { font: 400 0.875rem/1.3 var(--sans); color: var(--tinta-suave); }
.precio__financiamiento dd {
  margin: 0;
  font: 700 0.875rem/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  text-align: right;
}

.acciones { display: grid; gap: 0.6rem; }
.acciones .boton { width: 100%; height: 52px; border-radius: var(--radio-lg); font-size: 0.9375rem; font-weight: 700; }
.acciones .boton svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* Compartir: un menú chico bajo su botón, con la hoja del sistema, copiar el
   enlace y los deslindes en KML (ficha.js, pintarCompartir). */
.ficha__compartir { position: relative; }
.menu-compartir {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.4rem);
  right: 0;
  display: grid;
  min-width: 12.5rem;
  padding: 0.35rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-panel);
  animation: aparecer 120ms ease-out;
}
.menu-compartir[hidden] { display: none; }
.menu-compartir__opcion {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--alto-control);
  padding: 0 0.75rem;
  background: none;
  border: 0;
  border-radius: var(--radio-md);
  color: var(--tinta);
  font: 500 0.875rem/1 var(--sans);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.menu-compartir__opcion:hover, .menu-compartir__opcion:focus-visible { background: var(--zinc-100); outline: none; }
.menu-compartir__opcion svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--tinta-suave); }

/* Bajo los botones, "Ver en 360°". */
.enlaces[hidden] { display: none; }
.enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.25rem;
  margin-top: 0.5rem;
}
.enlace-ficha {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--alto-control);
  padding: 0 0.6rem;
  background: none;
  border: 0;
  border-radius: var(--radio-md);
  color: var(--marca-700);
  font: 600 0.8125rem/1 var(--sans);
  text-decoration: none;
}
.enlace-ficha:hover { background: var(--zinc-100); }
.enlace-ficha svg { width: 1.05rem; height: 1.05rem; flex: none; }

.nota {
  margin: 1rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--linea);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--tinta-tenue);
}

/* --- Formulario de reserva --------------------------------------------------- */

/* Una ventana sobre todo lo demás (nivel 4 del sistema de diseño): el fondo se
   oscurece para que quede claro que hay que terminar esto o cancelarlo. */
.reserva {
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.5rem;
  border: 0;
  border-radius: var(--radio-xl);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-panel);
}
.reserva::backdrop { background: rgb(24 24 27 / 0.6); }
.reserva__titulo { margin: 0; font: 700 20px/1.2 var(--sans); letter-spacing: -0.015em; }
.reserva__explicacion { margin: 0.5rem 0 1.1rem; font-size: 0.875rem; line-height: 1.45; color: var(--tinta-suave); }
.reserva__campos { display: grid; gap: 0.85rem; }
.reserva__campo { display: grid; gap: 0.35rem; }
.reserva__campo span {
  font: 700 0.6875rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.reserva__campo input {
  height: var(--alto-control);
  padding: 0 0.85rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm);
  background: var(--papel);
  font: 400 1rem var(--sans);   /* 16 px: con menos, el iPhone acerca la página al escribir */
  color: var(--tinta);
  outline: none;
}
.reserva__campo input:focus { border-color: var(--marca-700); box-shadow: 0 0 0 3px var(--marca-anillo); }
/* Fuera de la vista y del tabulador, pero no display:none: algunos robots se saltan lo oculto. */
.reserva__antetitulo {
  display: block; margin-bottom: 0.35rem;
  font: 700 0.6875rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-tenue);
}
.reserva__campo small { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tinta-tenue); }
/* "Mañana / Tarde / Da igual": tres pastillas, una elegida. */
.reserva__horario { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
.reserva__horario legend { width: 100%; margin-bottom: 0.4rem; padding: 0; font-size: 0.8125rem; font-weight: 600; color: var(--tinta-suave); }
.reserva__horario label { flex: 1; position: relative; }
.reserva__horario input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.reserva__horario span {
  display: grid; place-items: center; height: 40px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-sm);
  font-size: 0.875rem; font-weight: 600; color: var(--tinta);
}
.reserva__horario input:checked + span { border-color: var(--marca-700); background: var(--marca-700); color: #fff; }
.reserva__horario input:focus-visible + span { box-shadow: 0 0 0 3px var(--marca-anillo); }
.reserva__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reserva__privacidad { margin: 1rem 0 0; font-size: 0.75rem; line-height: 1.45; color: var(--tinta-tenue); }
.reserva__error, .reserva__listo {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radio-md);
  font-size: 0.875rem;
  line-height: 1.4;
}
.reserva__error { background: #fef2f2; color: #991b1b; }
.reserva__listo { background: var(--verde-50); color: var(--verde-800); }
.reserva--lista .reserva__campos, .reserva--lista .reserva__privacidad { display: none; }
.reserva__acciones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
.reserva__acciones .boton { height: var(--alto-control); }

/* En el teléfono, una hoja que sube desde abajo, como la ficha. */
@media (max-width: 62rem) {
  .reserva {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
  }
  .reserva__acciones .boton { flex: 1; }
}

/* --- Perspectivas y Entrar a 360° (plano del teléfono) ------------------------ */

.perspectivas, .entrar-360 { display: none; }

.perspectivas {
  position: fixed;
  z-index: 24;
  left: 0; right: 0; bottom: 0;
  height: var(--alto-perspectivas);
  padding: 0.75rem 0.85rem env(safe-area-inset-bottom);
  background: var(--papel);
  border-top: 1px solid var(--linea);
  border-radius: var(--radio-xl) var(--radio-xl) 0 0;
  box-shadow: var(--sombra-panel);
}
.perspectivas__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.perspectivas__cabecera h2 {
  margin: 0;
  font: 700 0.6875rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
#perspectivas-conteo { font: 600 0.75rem/1 var(--sans); color: var(--tinta-suave); }

/* Una fila que se desliza con el dedo y se detiene en cada punto. */
.perspectivas__fila {
  display: flex;
  gap: 0.5rem;
  margin: 0 -0.85rem;
  padding: 0 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.85rem;
  scrollbar-width: none;
}
.perspectivas__fila::-webkit-scrollbar { display: none; }

.perspectiva {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  background: var(--zinc-100);
  border: 0;
  border-radius: var(--radio-lg);
  scroll-snap-align: start;
  text-align: left;
  transition: background 150ms;
}
.perspectiva:hover { background: var(--zinc-200); }
.perspectiva__disco {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--zinc-900);
  color: #fff;
  font: 700 0.8125rem/1 var(--sans);
}
.perspectiva__textos { display: grid; gap: 0.15rem; }
.perspectiva__textos strong { font: 700 0.875rem/1.1 var(--sans); color: var(--tinta); }
.perspectiva__textos small { font: 500 0.75rem/1.1 var(--sans); font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.perspectiva[aria-pressed="true"] { background: var(--marca-700); }
.perspectiva[aria-pressed="true"] .perspectiva__disco { background: #fff; color: var(--marca-700); }
.perspectiva[aria-pressed="true"] strong,
.perspectiva[aria-pressed="true"] small { color: #fff; }

.entrar-360 {
  position: fixed;
  z-index: 24;
  left: 0.85rem;
  bottom: calc(var(--alto-perspectivas) + 0.75rem);
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-hud);
  text-align: left;
  transition: background 150ms;
}
.entrar-360:hover { background: var(--papel-suave); }
/* La panorámica liviana (la que el visor ya bajó), recortada por perspectivas.js
   donde se estaba mirando; repetida a lo ancho porque da la vuelta completa. */
.entrar-360__miniatura {
  width: 64px; height: 64px;
  flex: none;
  border-radius: var(--radio-md);
  background-color: var(--zinc-800);
  background-repeat: repeat-x;
}
.entrar-360__textos { display: grid; gap: 0.15rem; }
.entrar-360__textos small {
  font: 700 0.6875rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.entrar-360__textos strong { font: 700 1rem/1.15 var(--sans); color: var(--tinta); }
.entrar-360__textos span { font: 500 0.75rem/1.2 var(--sans); color: var(--tinta-suave); }

/* --- Móvil ------------------------------------------------------------------ */

@media (max-width: 62rem) {
  /* En el teléfono la foto manda. Arriba, una cabecera de una fila y, debajo,
     una sola fila de 40 px con la brújula y los puntos de vuelo. Abajo, la
     leyenda delgada y, sobre ella, Ver plano y el zoom. Antes los
     controles de 48 px en cuatro filas tapaban casi media pantalla. Las medidas
     van en variables para que cada pieza se apoye en la anterior. */
  :root {
    --alto-cabecera: 56px;
    --alto-hud: 40px;
    /* La cabecera es transparente: la brújula y los puntos suben a su fila, al
       lado de los botones, y la foto gana esos 48 px. */
    --fila-1: calc(8px + env(safe-area-inset-top));
    --tope-hud: calc(var(--fila-1) + var(--alto-hud));
    --alto-leyenda: 30px;
    --fondo-hud: calc(0.85rem + var(--alto-leyenda) + 0.5rem + env(safe-area-inset-bottom));
    /* La franja de perspectivas: cabecera, una fila de 56 px y el área segura. */
    --alto-perspectivas: calc(112px + env(safe-area-inset-bottom));
  }

  /* Sin barra: la foto llega arriba y quedan flotando la lupa, los filtros y
     WhatsApp a la derecha. El nombre y las coordenadas no ayudaban a mirar el
     campo; el nombre sigue para los lectores de pantalla. La cabecera deja pasar
     el dedo para que la foto se pueda arrastrar también por arriba. El buscador
     se abre sobre esa fila al tocar la lupa. */
  .cabecera {
    height: auto;
    padding: var(--fila-1) 0.85rem 0;
    background: none;
    backdrop-filter: none;
    border-bottom: 0;
    pointer-events: none;
  }
  .cabecera > * { pointer-events: auto; }
  .marca {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .escena { inset: 0; }
  .cabecera__herramientas { flex: none; gap: 0.375rem; }
  .cabecera .pastillon { border-color: var(--linea); box-shadow: var(--sombra-hud); }
  .buscador { display: none; }
  #abrir-buscador { display: inline-flex; }
  .pastillon--icono, #abrir-filtros {
    position: relative;
    justify-content: center;
    width: var(--alto-hud); height: var(--alto-hud);
    padding: 0;
  }
  .pastillon--icono svg, #abrir-filtros svg { width: 1.15rem; height: 1.15rem; color: var(--tinta); }
  .pastillon__texto { display: none; }
  #filtros-activos { position: absolute; top: -5px; right: -5px; }
  body.buscando .buscador {
    display: block;
    position: absolute;
    z-index: 2;
    top: var(--fila-1);
    inset-inline: 0.85rem;
    height: var(--alto-hud);
    width: auto;
  }
  body.buscando .buscador input {
    height: 100%; border-color: var(--isla-borde); border-radius: var(--radio-full);
    background: var(--isla-firme); -webkit-backdrop-filter: var(--isla-desenfoque); backdrop-filter: var(--isla-desenfoque);
    box-shadow: var(--sombra-isla);
  }
  body.buscando .buscador input::placeholder { color: var(--tinta-suave); }
  /* Es de vidrio: lo de abajo se trasluciría. Los puntos de vuelo se apartan mientras tanto. */
  body.buscando .puntos { visibility: hidden; }
  /* Abierto, el buscador tapa la fila: se esconden los botones, no él (está
     dentro de las herramientas y heredaría el hidden). */
  body.buscando .cabecera__herramientas > :not(.buscador) { visibility: hidden; }

  .pista { display: none; }
  .parcela__pastilla { transform-box: fill-box; }

  /* Arriba a la izquierda, los puntos de vuelo como un selector chico "I · II":
     todos a la vista, sin desplegar nada. Compartir queda en la ficha y WhatsApp
     es el botón flotante, así que la barra se disuelve. */
  .barra-inferior { display: contents; }
  .acciones-rapidas { display: none; }

  .puntos {
    position: fixed;
    z-index: 25;
    top: var(--fila-1);
    left: 0.85rem;
    height: var(--alto-hud);
    padding: 3px;
  }
  .puntos__fila { display: flex; gap: 2px; height: 100%; }
  .puntos__fila button {
    display: grid;
    place-content: center;
    min-width: 2.75rem;
    height: 100%;
    padding: 0 0.9rem;
    font: 700 0.8125rem/1 var(--sans);
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Abajo a la izquierda: "6 disponibles" y, encima, Ver plano. A la derecha, el
     WhatsApp. Sin + y −: en el teléfono se acerca con dos dedos. */
  .leyenda {
    z-index: 23;
    left: 0.85rem;
    bottom: calc(0.85rem + env(safe-area-inset-bottom));
    height: var(--alto-leyenda);
    transform: none;
    gap: 0.5rem;
    padding: 0 0.65rem;
    overflow-x: auto;
  }
  .leyenda span { font-size: 0.6875rem; font-weight: 600; }
  .leyenda span + span { padding-left: 0.5rem; }
  .leyenda__resumen { font-size: 0.75rem; }
  .whatsapp-flotante { right: 0.85rem; bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
  .zoom { display: none; }

  .ver-plano { display: flex; left: 0.85rem; bottom: var(--fondo-hud); gap: 0.5rem; padding: 0.25rem 0.85rem 0.25rem 0.25rem; }
  .ver-plano__miniatura { width: 36px; height: 36px; }
  .ver-plano__textos span { display: none; }

  /* El altímetro, cuando hay más de una altura, sobre el WhatsApp. */
  .instrumentos { top: auto; bottom: calc(0.85rem + 3.25rem + 0.75rem + env(safe-area-inset-bottom)); right: 0.85rem; transform: none; gap: 0.45rem; }
  .zoom button { position: relative; width: var(--alto-hud); height: var(--alto-hud); font-size: 1.25rem; }
  .altimetro { padding: 0.5rem 0.45rem 0.4rem; }
  .altimetro__escala button { padding: 0.2rem 0.35rem 0.2rem 0.2rem; font-size: 0.75rem; }
  .altimetro__escala button[aria-pressed="true"] { font-size: 0.875rem; }
  .altimetro__unidad--pie { display: none; }

  /* Los botones sueltos de 40 px responden en 48: el dedo no tiene que atinar al dibujo. */
  .pastillon--icono::after, #abrir-filtros::after, .zoom button::after {
    content: '';
    position: absolute;
    inset: -4px;
  }

  /* El plano, a pantalla completa bajo la cabecera, sobre la franja de
     perspectivas. La leyenda se apila arriba a la izquierda, como en un plano
     de papel; lo de la vista aérea se esconde. */
  .carta {
    inset: 0;
    width: auto;
    border: 0;
    border-radius: 0;
    display: none;
  }
  .carta__barra { display: none; }
  .mapa { height: 100%; }

  body[data-panel="mapa"] .carta { display: flex; flex-direction: column; bottom: var(--alto-perspectivas); }
  body[data-panel="mapa"] .mapa { flex: 1; }
  body[data-panel="mapa"] .perspectivas { display: block; }
  body[data-panel="mapa"] .entrar-360 { display: flex; }
  body[data-panel="mapa"] .whatsapp-flotante,
  body[data-panel="mapa"] .barra-inferior,
  body[data-panel="mapa"] .ver-plano,
  body[data-panel="mapa"] .instrumentos { display: none; }
  body[data-panel="mapa"] .leyenda {
    top: var(--fila-1);
    bottom: auto;
    height: auto;
    right: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
  }
  body[data-panel="mapa"] .leyenda span + span { padding-left: 0; border-left: 0; }

  /* La ficha es una hoja que sube hasta debajo de los puntos de vuelo. Entera,
     media y asomada son la misma hoja corrida hacia abajo (--desplazo, hoja.js):
     nunca cambia de alto, así que el movimiento es uno solo. La curva es la de las
     hojas del sistema: arranca rápido y se posa sin rebote. */
  .ficha {
    left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: calc(100dvh - var(--tope-hud) - 0.75rem);
    padding-top: 0;
    border-radius: var(--radio-xl) var(--radio-xl) 0 0;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateY(var(--desplazo, 0px));
    animation: none;
    /* Fuera de entera, el dedo mueve la hoja en vez de desplazar el contenido. */
    overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: none;
    will-change: transform;
  }
  .ficha:not(.ficha--arrastrando) { transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1); }
  .ficha--entera { overflow-y: auto; touch-action: pan-y; }
  /* Arriba, el asa con su botón: baja la hoja hasta asomarla y la vuelve a subir.
     También se arrastra (touch-action: none, para que no sea scroll). */
  .ficha__asa {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -1.25rem 0.25rem;
    padding: 6px 0 2px;
    background: var(--papel);
    cursor: grab;
  }
  .ficha__asa, .ficha__cabecera { touch-action: none; }
  .ficha__bajar {
    display: grid;
    place-items: center;
    width: 3.5rem; height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radio-full);
    background: var(--zinc-100);
    color: var(--zinc-500);
    transition: background 150ms;
  }
  .ficha__bajar:active { background: var(--zinc-300); }
  .ficha__bajar svg { width: 1.1rem; height: 1.1rem; transition: transform 300ms var(--curva); }
  .ficha--minima .ficha__bajar svg { transform: rotate(180deg); }
  /* El dedo responde en 44 px de alto aunque la pastilla mida 28. */
  .ficha__bajar { position: relative; }
  .ficha__bajar::after { content: ''; position: absolute; inset: -8px -6px; }
  .ficha--minima .ficha__cabecera { cursor: pointer; }
  .ficha__titulo { font-size: 22px; }
  body:has(.ficha:not([hidden])) .perspectivas,
  body:has(.ficha:not([hidden])) .entrar-360,
  body:has(.ficha:not([hidden])) .ver-plano,
  body:has(.ficha:not([hidden])) .leyenda,
  body:has(.ficha:not([hidden])) .instrumentos { display: none; }
}

/* --- Táctil ----------------------------------------------------------------- */

/* Con el dedo, todo lo que se aprieta mide al menos 48 px por lado. Va por ancho
   y también por puntero: una tableta apaisada pasa del corte de escritorio y se
   sigue manejando con el dedo, en terreno y con sol. */
@media (max-width: 62rem), (pointer: coarse) {
  :root { --alto-control: 48px; }

  .ficha__cerrar,
  .carta__accion { width: var(--alto-control); height: var(--alto-control); }

  .accion { height: var(--alto-control); }
  .accion { min-width: var(--alto-control); justify-content: center; }
  .altimetro__escala button { min-height: var(--alto-control); }

  .chip { height: var(--alto-control); padding: 0 1rem; }
  .rango input { height: var(--alto-control); }
  .interruptor { min-height: var(--alto-control); }
  .filtros__pie .boton { height: var(--alto-control); }
  .sugerencias li { min-height: var(--alto-control); }

  /* En el teléfono, del alto de los demás controles del mapa (40); en una tableta, 48. */
  .leaflet-control-zoom a {
    width: var(--alto-hud, var(--alto-control)) !important;
    height: var(--alto-hud, var(--alto-control)) !important;
    line-height: calc(var(--alto-hud, var(--alto-control)) - 2px) !important;
    font-size: 1.125rem !important;
  }
}

/* --- Con una ficha abierta ---------------------------------------------------- */

/* La ficha toma el foco: se va todo lo que no sirve para decidir por esa parcela
   y vuelve al cerrarla. Quedan la ficha, la parcela, la búsqueda y los filtros. */
body:has(.ficha:not([hidden])) .leyenda,
body:has(.ficha:not([hidden])) .pista,
body:has(.ficha:not([hidden])) .barra-inferior,
body:has(.ficha:not([hidden])) .instrumentos,
body:has(.ficha:not([hidden])) .plano-flotante,
body:has(.ficha:not([hidden])) .whatsapp-flotante { display: none; }

/* --- Escritorio: islas flotantes, como en la consola -------------------------- */

/* La píldora de los puntos solo existe en escritorio; en el teléfono el punto
   elegido se marca en su propio botón. */
.puntos__pildora { display: none; }

@media (min-width: 62.0625rem) {
  /* Sin barra: la foto llega arriba y la marca, el buscador y los filtros flotan
     como islas. La cabecera deja pasar el mouse para arrastrar la foto por arriba. */
  .cabecera {
    height: auto; align-items: flex-start; padding: 1rem 1.25rem 0;
    background: none; backdrop-filter: none; border-bottom: 0; pointer-events: none;
  }
  .cabecera > * { pointer-events: auto; }
  .escena { inset: 0; }

  .marca, .cabecera__herramientas, .acciones-rapidas, .puntos, .leyenda, .zoom, .altimetro, .plano-flotante {
    background: var(--isla); -webkit-backdrop-filter: var(--isla-desenfoque); backdrop-filter: var(--isla-desenfoque);
    border: 1px solid var(--isla-borde); box-shadow: var(--sombra-isla);
  }
  .acciones-rapidas, .puntos, .leyenda, .plano-flotante { background: var(--isla-firme); }
  .accion, .accion svg, .plano-flotante { color: var(--tinta); }
  .marca { flex: none; padding: 0.375rem 1.25rem 0.375rem 0.375rem; border-radius: var(--radio-full); }
  .marca__hito { border-radius: 50%; }
  .cabecera__herramientas { gap: 0.25rem; padding: 0.375rem; border-radius: var(--radio-full); }
  /* El buscador también es vidrio: un blanco apenas más marcado que la isla, y casi
     opaco mientras se escribe, para que lo escrito se lea. */
  .buscador input { height: 2.5rem; border-color: transparent; border-radius: var(--radio-full); background: rgb(255 255 255 / 0.35); }
  .buscador input::placeholder { color: var(--tinta-suave); }
  .buscador input:focus { background: rgb(255 255 255 / 0.85); }
  .cabecera .pastillon { height: 2.5rem; border-color: transparent; border-radius: var(--radio-full); background: transparent; }
  .cabecera .pastillon:hover, .cabecera .pastillon[aria-expanded="true"] { background: var(--zinc-100); }

  .acciones-rapidas { padding: 0.375rem; border-radius: var(--radio-full); }
  .accion { height: 2.5rem; padding: 0 1rem; border-radius: var(--radio-full); font-weight: 600; }

  .puntos { position: relative; padding: 0.375rem; border-radius: var(--radio-full); }
  .puntos__pildora {
    display: block; position: absolute; top: 0.375rem; left: 0; height: 2.5rem;
    width: var(--pildora-ancho, 0); transform: translateX(var(--pildora-x, 0));
    border-radius: var(--radio-full); background: rgb(255 255 255 / 0.92);
    box-shadow: 0 2px 8px -2px rgb(9 9 11 / 0.3);
    transition: transform 320ms var(--curva), width 320ms var(--curva);
  }
  .puntos__pildora--quieta { transition: none; }
  .puntos__fila button { position: relative; min-width: 2.75rem; height: 2.5rem; border-radius: var(--radio-full); font-size: 0.8125rem; transition: color 200ms, background 150ms; }
  .puntos__fila button { color: var(--tinta-suave); }
  .puntos__fila button[aria-pressed="true"], .puntos__fila button[aria-pressed="true"]:hover { background: transparent; color: var(--tinta); }

  .leyenda { padding: 0.75rem 1.25rem; border-radius: var(--radio-full); }

  .zoom { gap: 0.125rem; padding: 0.3rem; border-radius: var(--radio-full); }
  .zoom button { border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--tinta); }
  .zoom button:hover { background: var(--zinc-100); }
  .altimetro { border-radius: 1.25rem; }
  .plano-flotante { border-radius: var(--radio-full); }
  /* El plano a pantalla completa queda bajo las islas de arriba: su barra (achicar
     y cerrar) pasa a ser una isla más, a la derecha, bajo el buscador. */
  body[data-plano="completo"] .carta__barra {
    position: absolute; z-index: 1001; top: 4.75rem; right: 1.25rem;
    padding: 0.3rem; gap: 0.125rem; border: 1px solid var(--linea); border-radius: var(--radio-full);
    background: var(--isla); -webkit-backdrop-filter: var(--isla-desenfoque); backdrop-filter: var(--isla-desenfoque);
    box-shadow: var(--sombra-isla);
  }
  body[data-plano="completo"] .carta__titulo { display: none; }
  body[data-plano="completo"] .carta__accion { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
}
@media (min-width: 62.0625rem) and (prefers-reduced-motion: reduce) {
  .puntos__pildora { transition: none; }
}

/* --- Teléfono: las mismas islas ---------------------------------------------- */

/* Los botones y cápsulas del teléfono toman el vidrio y las formas redondas de
   las islas de escritorio: botones redondos, cápsulas de punta redonda. */
@media (max-width: 62rem) {
  .cabecera .pastillon, .puntos, .leyenda, .ver-plano {
    background: var(--isla); -webkit-backdrop-filter: var(--isla-desenfoque); backdrop-filter: var(--isla-desenfoque);
    border: 1px solid var(--isla-borde); box-shadow: var(--sombra-isla);
  }
  .leyenda, .ver-plano { background: var(--isla-firme); }
  .cabecera .pastillon { border-radius: 50%; }
  .puntos { border-radius: var(--radio-full); padding: 3px; }
  .puntos__fila button { border-radius: var(--radio-full); color: var(--tinta); }
  .puntos__fila button:hover { background: rgb(255 255 255 / 0.4); }
  .puntos__fila button[aria-pressed="true"], .puntos__fila button[aria-pressed="true"]:hover {
    background: rgb(255 255 255 / 0.92); color: var(--tinta); box-shadow: 0 2px 8px -2px rgb(9 9 11 / 0.3);
  }
  .leyenda { border-radius: var(--radio-full); padding: 0 0.9rem; scrollbar-width: none; }
  /* Sobre el plano la lista de estados puede no caber: se desliza sin barra, con el
     borde derecho desvanecido, que avisa que hay más. */
  body[data-panel="mapa"] .leyenda { mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
  .leyenda::-webkit-scrollbar { display: none; }
  .ver-plano { border-radius: var(--radio-full); }
  .ver-plano__miniatura { border-radius: 50%; }
}

/* Los otros puntos de vuelo, parados en el suelo bajo el dron (visor.js,
   _dibujarPuntos). La punta del pin cae justo en el punto: por eso el
   translate(-50%, -100%) va dentro, en el botón, y el visor solo lo mueve. */
/* Sobre el overlay de las parcelas: un número no puede tapar el botón de otro punto. */
.puntos-360 { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
/* Los otros puntos de vuelo, sobre la foto. Discretos: un botón chico y oscuro con
   la lupa, sin nombre ni animación, para no tapar parcelas ni competir con ellas.
   Al pasar el mouse (o con el teclado) crece y dice qué punto es; en el celular la
   fila de puntos de abajo ya los nombra. */
.punto-360 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  pointer-events: auto;
  translate: -50% -100%;
  -webkit-tap-highlight-color: transparent;
}
.punto-360[hidden] { display: none; }
.punto-360__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.9);
  background: rgb(20 20 20 / 0.55);
  color: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.45);
  backdrop-filter: blur(3px);
  transition: transform 160ms var(--curva), background-color 160ms ease, color 160ms ease;
}
.punto-360__icono svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
}
/* El nombre flota sobre la lupa solo al pasar el mouse: fuera del flujo, así no
   agranda el botón ni esconde los números de alrededor. */
.punto-360__nombre {
  position: absolute;
  bottom: calc(100% + 4px);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(20 20 20 / 0.75);
  font: 700 0.625rem var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  opacity: 0;
  translate: 0 3px;
  transition: opacity 140ms ease, translate 140ms ease;
  pointer-events: none;
}
/* La patita hasta el suelo. */
.punto-360::after {
  content: '';
  width: 1.5px;
  height: 7px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.punto-360:hover .punto-360__icono,
.punto-360:focus-visible .punto-360__icono {
  transform: scale(1.25);
  background: #fff;
  color: var(--marca-800, #18181b);
}
.punto-360:hover .punto-360__nombre,
.punto-360:focus-visible .punto-360__nombre {
  opacity: 1;
  translate: 0 0;
}
.punto-360:focus-visible { outline: none; }
@media (max-width: 40rem) {
  .punto-360__icono { width: 22px; height: 22px; }
  .punto-360__icono svg { width: 11px; height: 11px; }
  .punto-360::after { height: 5px; }
}
/* Con una parcela elegida, los puntos dan un paso atrás como las demás parcelas. */
.visor:has(.overlay--con-seleccion) .punto-360 { opacity: 0.35; }

/* Los esteros del KMZ (visor.js, _dibujarAguas): azul, con un borde oscuro que lo
   despega del bosque, y su nombre en cursiva como en un mapa. */
.agua { pointer-events: none; }
.agua__borde, .agua__linea { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.agua__borde { stroke: rgb(0 30 60 / 0.6); stroke-width: 8; }
/* Más gruesa que el borde de una etapa (3.5): el agua es lo que se tiene que ver. */
.agua__linea { stroke: #38a6ff; stroke-width: 5; }
.agua__nombre {
  font: italic 700 0.75rem var(--sans);
  letter-spacing: 0.04em;
  fill: #d6eeff;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgb(0 30 60 / 0.8);
  stroke-width: 3.5px;
}

/* Las zonas con nombre del KMZ (visor.js, _dibujarZonas): un velo verde con borde
   punteado, para que se lea como paisaje protegido y no como un lote. */
.zona { pointer-events: none; }
.zona__area {
  fill: rgb(63 174 90 / 0.22);
  stroke: #8fe3a2;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  stroke-linejoin: round;
}
.zona__nombre {
  font: 700 0.8125rem var(--sans);
  letter-spacing: 0.08em;
  fill: #e9ffe9;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgb(10 50 20 / 0.8);
  stroke-width: 3.5px;
}
.zona-mapa__nombre {
  background: rgb(20 80 35 / 0.85);
  border: none;
  box-shadow: none;
  color: #fff;
  font: 700 0.75rem var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zona-mapa__nombre::before { display: none; }

/* "Volver al masterplan": solo en los puntos solo foto (app.js, cambiarVista).
   Arriba al centro, donde no lo tapa la barra de abajo ni la ficha del teléfono. */
.volver-masterplan {
  position: fixed;
  z-index: 26;
  top: 5rem;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--alto-control);
  padding: 0 1.2rem 0 1rem;
  border: 0;
  border-radius: var(--radio-full);
  background: var(--marca-800, #18181b);
  color: #fff;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
  font: 700 0.875rem var(--sans);
  white-space: nowrap;
  cursor: pointer;
  animation: volver-aparece 260ms var(--curva) both;
}
.volver-masterplan[hidden],
body[data-plano="completo"] .volver-masterplan { display: none; }
.volver-masterplan svg { width: 1.1rem; height: 1.1rem; }
.volver-masterplan:hover { background: var(--marca-700, #27272a); }
.volver-masterplan:focus-visible { outline: 3px solid var(--marca-anillo); outline-offset: 2px; }
@keyframes volver-aparece {
  from { opacity: 0; translate: -50% -8px; }
  to { opacity: 1; translate: -50% 0; }
}
@media (max-width: 62rem) {
  .volver-masterplan { top: 4.5rem; }
  /* Con el plano a la vista no hay foto de la cual volver. */
  body[data-panel="mapa"] .volver-masterplan { display: none; }
}
@media (prefers-reduced-motion: reduce) { .volver-masterplan { animation: none; } }

/* --- Galería de fotos de una referencia (galeria.js) ------------------------ */

/* A pantalla completa sobre negro: son fotos para mirar, no un formulario. */
.galeria {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(9 9 11 / 0.94);
  color: #fff;
  overflow: hidden;
}
.galeria[open] { display: grid; grid-template-rows: auto 1fr auto; }
.galeria::backdrop { background: rgb(9 9 11 / 0.6); }
.galeria__cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px 20px;
}
.galeria__titulo {
  margin: 0;
  font: 700 0.9375rem var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.galeria__cuenta { font: 600 0.8125rem var(--sans); color: rgb(255 255 255 / 0.65); font-variant-numeric: tabular-nums; }
.galeria__boton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
}
.galeria__boton:hover { background: rgb(255 255 255 / 0.22); }
.galeria__boton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.galeria__boton svg { width: 20px; height: 20px; }
.galeria__boton[hidden] { display: none; }
.galeria__cerrar { margin-left: auto; }
.galeria__escenario {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
/* Absoluta y contenida: en una fila 1fr del grid, una foto vertical con max-height
   no se achicaba y tapaba las miniaturas. */
.galeria__foto {
  position: absolute;
  inset: 0 72px;
  width: calc(100% - 144px);
  height: 100%;
  object-fit: contain;
}
.galeria__anterior, .galeria__siguiente { position: absolute; top: 50%; translate: 0 -50%; }
.galeria__anterior { left: 16px; }
.galeria__siguiente { right: 16px; }
.galeria__miniaturas {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  overflow-x: auto;
}
.galeria__miniaturas[hidden] { display: none; }
.galeria__miniatura {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  opacity: 0.55;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s;
}
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__miniatura:hover { opacity: 0.85; }
.galeria__miniatura[aria-current="true"] { opacity: 1; border-color: #fff; }
/* En el teléfono la foto usa todo el ancho y se pasa arrastrando: las flechas
   quedan encima, más chicas. */
@media (max-width: 40rem) {
  .galeria__foto { inset: 0; width: 100%; }
  .galeria__boton { width: 38px; height: 38px; }
  .galeria__anterior { left: 8px; }
  .galeria__siguiente { right: 8px; }
  .galeria__miniaturas { justify-content: flex-start; }
  .galeria__miniatura { width: 52px; height: 40px; }
}