/* ============================================================================
   Panorámika — hoja de estilos
   CSS3 nativo, sin frameworks. Mobile-first: las reglas base son para teléfono
   y luego @media (min-width: …) ajusta para pantallas grandes.

   Índice:
     1. Tokens de diseño (:root)     5. Selector de escenas
     2. Reset mínimo                 6. Pantalla de bienvenida (.intro)
     3. Lienzo del visor             7. Hoja de compartir
     4. Barra superior               8. Avisos, pista, botones
                                     9. Escritorio + accesibilidad
   ========================================================================== */

/* --- 1. Tokens de diseño ------------------------------------------------- */
:root {
  --sup-fondo:        #0d0f12;
  --sup-panel:        rgba(18, 21, 26, 0.72);
  --sup-panel-solido: #14171c;
  --sup-borde:        rgba(255, 255, 255, 0.10);

  --tx-fuerte: #f4f6f8;
  --tx-medio:  #b9c0c8;
  --tx-suave:  #7d858f;

  /* Acento ámbar/bronce arquitectónico: calidez y "hecho a medida". */
  --acento:       #d99a4e;
  --acento-claro: #e8c27a;
  --acento-tinte: rgba(217, 154, 78, 0.16);
  --acento-tx:    #1c1206;

  --ok:    #46b17a;
  --wa:    #25d366;   /* verde WhatsApp */

  /* Estatus de lote (mapa de lotes): verde / ámbar / teja apagados, en la
     línea cálida y sobria de la paleta (no colores de semáforo saturados). */
  --lote-disponible: #5aa17a;
  --lote-apartado:   #cf9a4a;
  --lote-vendido:    #c26a5c;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;  --e-4: 16px;  --e-5: 24px;  --e-6: 32px;
  --barra-escenas-alto: 44px;   /* alto de las pastillas de la barra de escenas (PASO 7) */
  --radio: 12px;
  --radio-pill: 999px;
  --sombra: 0 8px 30px rgba(0, 0, 0, 0.45);
  --difuminado: blur(14px) saturate(1.2);

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* El editor gráfico (?editar=1) sobreescribe estos dos con JS (editor.js)
     según el ancho real de su panel lateral, para que la barra superior, el
     selector de propiedades y el mini-mapa se corran y no queden tapados por
     el panel. En el visor público nunca se tocan → quedan en 0px. */
  --ed-inset-izq: 0px;
  --ed-inset-der: 0px;

  /* Fuente display: Anybody con caída al stack del sistema. Se usa en dos
     registros (DESIGN.md): pesado+apretado para títulos, chico+ancho+mayúsculas
     para rótulos HUD. */
  --fuente-display: "Anybody", var(--fuente);
}

/* --- 1b. Fuente display (Anybody, auto-alojada) --------------------------
   Gótica de señalética (OFL 1.1). SOLO titulares y micro-rótulos; el cuerpo
   sigue con el stack del sistema. `font-display: swap` → si Anybody tarda, se ve
   el fallback y luego cambia, sin bloquear el arranque del visor. Mismo bloque
   que portafolio.css / home.css. `font-weight: 100 900` = eje variable completo. */
@font-face {
  font-family: "Anybody";
  src: url("assets/fonts/anybody-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anybody";
  src: url("assets/fonts/anybody-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1c. Tema claro ----------------------------------------------------
   El diseño BASE (:root, arriba) es OSCURO. Aquí va la paleta CLARA como
   override, con la estructura que espera tema.js:
     · sistema en claro y SIN "oscuro" forzado → @media + :root:not([data-tema="oscuro"])
     · usuario fuerza "claro"                  → :root[data-tema="claro"]
   Nunca se define un color SOLO dentro del @media: su valor por defecto (oscuro)
   ya está en :root. Se conserva la calidez arena/bronce de la marca (nada de
   blanco azulado). El ámbar (--acento/--acento-claro/--acento-tx) y los colores
   de estatus de lote funcionan en ambos temas y no se tocan; solo se sube la
   opacidad de --acento-tinte para que se lea sobre fondo claro. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --sup-fondo:        #f4f2ee;
    --sup-panel:        rgba(255, 255, 255, 0.78);
    --sup-panel-solido: #ffffff;
    --sup-borde:        rgba(20, 16, 10, 0.14);
    --tx-fuerte: #1a1712;
    --tx-medio:  #4a4640;
    --tx-suave:  #6f6a61;
    --acento-tinte: rgba(217, 154, 78, 0.22);
    --sombra: 0 8px 30px rgba(20, 16, 10, 0.12);
  }
}
:root[data-tema="claro"] {
  --sup-fondo:        #f4f2ee;
  --sup-panel:        rgba(255, 255, 255, 0.78);
  --sup-panel-solido: #ffffff;
  --sup-borde:        rgba(20, 16, 10, 0.14);
  --tx-fuerte: #1a1712;
  --tx-medio:  #4a4640;
  --tx-suave:  #6f6a61;
  --acento-tinte: rgba(217, 154, 78, 0.22);
  --sombra: 0 8px 30px rgba(20, 16, 10, 0.12);
}

/* --- 2. Reset mínimo --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--sup-fondo);
  color: var(--tx-fuerte);
  font-family: var(--fuente);
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }

/* --- 3. Lienzo del visor ---------------------------------------------- */
#panorama {
  position: fixed; inset: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, #1a1e24, var(--sup-fondo) 70%);
}
.pnlm-container { font-family: var(--fuente) !important; }
.pnlm-load-box  { border-radius: var(--radio) !important; }

/* --- 3b. Capa de video (escena "tipo": "video") --------------------- */
/* Ocupa la misma área que el visor 360; queda por debajo de la barra y del
   selector de escenas (z-index 20), que siguen visibles y funcionales. */
#video {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: var(--e-3);
  background: var(--sup-fondo);
}
/* Marco del reproductor, centrado, sin tapar nunca la barra ni el selector
   (les dejamos ~150 px de alto). */
.video__marco {
  position: relative;
  background: #000;
  border: 1px solid var(--sup-borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
/* Embed de YouTube/Vimeo: proporción fija 16:9. El max-width por 'calc' limita
   el ancho para que el alto (ancho ÷ 16×9) no tape la barra. */
.video__marco--embed {
  width: 100%;
  max-width: min(1100px, calc((100vh - 150px) * 16 / 9));
  max-width: min(1100px, calc((100dvh - 150px) * 16 / 9));
  aspect-ratio: 16 / 9;
}
.video__marco--embed .video__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block; background: #000;
}
/* Video local (.mp4): puede ser horizontal O VERTICAL (grabado a pulso con el
   teléfono). El marco se ajusta al video; el video se limita en ancho y alto y
   conserva su proporción real. */
.video__marco--archivo {
  max-width: min(1100px, calc(100vw - var(--e-4)));
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
}
.video__marco--archivo .video__media {
  display: block; border: 0; background: #000;
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
}

/* Chip de video en la barra de escenas: acento para distinguirlo de las 360. */
.nav-escena--video .nav-escena__ico {
  background: var(--acento-tinte);
  color: var(--acento-claro);
}
.nav-escena--video[aria-current="true"] .nav-escena__ico {
  background: rgba(0, 0, 0, 0.18); color: inherit;
}
/* Chip de mapa de lotes: mismo patrón de acento que el de video. */
.nav-escena--mapa .nav-escena__ico {
  background: var(--acento-tinte); color: var(--acento-claro);
}
.nav-escena--mapa[aria-current="true"] .nav-escena__ico {
  background: rgba(0, 0, 0, 0.18); color: inherit;
}

/* --- 3c. Capa de mapa de lotes (escena "tipo": "mapa-lotes") -------- */
/* Ocupa la misma área que el visor 360; la barra y el selector (z 20) quedan
   por encima y siguen funcionando. */
#mapaLotes {
  position: fixed; inset: 0; z-index: 10;
  background: var(--sup-fondo);
}
/* El viewport recorta; el lienzo (img + svg) es lo que se mueve y escala. */
.mapa-lotes__viewport {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  overflow: hidden;
  touch-action: none;          /* el paneo / pellizco lo maneja el JS */
  cursor: default;
}
.mapa-lotes__viewport.--ampliado { cursor: grab; }
.mapa-lotes__lienzo {
  position: relative;
  display: inline-block;       /* se ajusta al tamaño real de la imagen */
  max-width: 100%;
  transform-origin: center center;
  will-change: transform;
  line-height: 0;
}
.mapa-lotes__img {
  display: block;
  max-width: 100%;
  max-height: 100vh; max-height: 100dvh;
  width: auto; height: auto;
  user-select: none; -webkit-user-drag: none;
}
/* preserveAspectRatio="none" en el SVG: se estira EXACTO al cuadro de la imagen,
   así "x,y" en % siempre cae en el mismo punto de la foto. */
.mapa-lotes__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Polígono de un lote. El borde usa vector-effect:non-scaling-stroke (en el JS)
   para no deformarse con el estiramiento no uniforme del SVG. */
.mapa-lote {
  fill-opacity: 0.28;
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill-opacity 0.15s ease;
}
.mapa-lote--disponible { fill: var(--lote-disponible); stroke: var(--lote-disponible); }
.mapa-lote--apartado   { fill: var(--lote-apartado);   stroke: var(--lote-apartado); }
.mapa-lote--vendido    { fill: var(--lote-vendido);    stroke: var(--lote-vendido); }
.mapa-lote:hover { fill-opacity: 0.5; }
.mapa-lote:focus { outline: none; }
.mapa-lote:focus-visible { fill-opacity: 0.5; outline: 2px solid var(--acento-claro); outline-offset: 1px; }
.mapa-lote--activo { fill-opacity: 0.62; stroke-width: 3; }
/* Modo "Lotes" del editor: el polígono se atenúa un poco… */
.mapa-lotes__svg--editor .mapa-lote { opacity: 0.35; pointer-events: none; }
/* …pero se puede arrastrar (recupera los eventos y muestra el cursor de mover). */
.mapa-lotes__svg--editor .mapa-lote--editable {
  opacity: 0.5; pointer-events: auto; cursor: move;
}

/* Asas de vértice del arrastre de lotes (modo "Lotes", montarArrastreLotes en
   script.js). Elementos HTML posicionados en % sobre el lienzo — círculos de
   verdad. Antes eran <circle> dentro del <svg> con preserveAspectRatio="none"
   y salían ovalados. */
.mapa-lotes__asas { position: absolute; inset: 0; pointer-events: none; }
.mapa-asa {
  position: absolute;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--acento-claro);
  border: 2px solid var(--acento-tx);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}
.mapa-asa:hover, .mapa-asa:active { background: #fff; }
.mapa-asa:active { cursor: grabbing; }
.mapa-asa:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* Etiqueta con el id del lote — hace de "pin" del lote (span en %, no <text>). */
.mapa-lote__tag {
  position: absolute;
  display: inline-block;
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  font-size: 0.62rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.02em;
  color: var(--tx-fuerte);
  background: rgba(13, 15, 18, 0.6);
  border-radius: var(--radio-pill);
  white-space: nowrap; pointer-events: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: pin-aparece 0.5s ease-out;   /* @keyframes junto a .hs--salir, §5b */
}
/* Modo "Lotes" del editor: la etiqueta se arrastra (mueve SOLO el pin). */
.mapa-lote__tag--editable { pointer-events: auto; cursor: grab; touch-action: none; }
.mapa-lote__tag--editable:active { cursor: grabbing; }

/* Leyenda de estatus (abajo-izquierda, sobre el selector). */
.mapa-lotes__leyenda {
  position: absolute; z-index: 12;
  left: var(--e-4); bottom: calc(var(--safe-bottom) + 84px);
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3);
  padding: var(--e-2) var(--e-3);
  font-size: 0.72rem; color: var(--tx-medio);
  background: var(--sup-panel);
  -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde); border-radius: var(--radio);
}
.mapa-lotes__leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.mapa-lotes__punto { width: 10px; height: 10px; border-radius: 3px; }
.mapa-lotes__punto--disponible { background: var(--lote-disponible); }
.mapa-lotes__punto--apartado   { background: var(--lote-apartado); }
.mapa-lotes__punto--vendido    { background: var(--lote-vendido); }

/* Botones de zoom (abajo-derecha). */
.mapa-lotes__zoom {
  position: absolute; z-index: 12;
  right: var(--e-4); bottom: calc(var(--safe-bottom) + 84px);
  display: flex; flex-direction: column;
}
.mapa-lotes__zoom-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 1.3rem; font-weight: 500; color: var(--tx-fuerte);
  background: var(--sup-panel);
  -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde);
}
.mapa-lotes__zoom-btn:first-child { border-radius: var(--radio) var(--radio) 0 0; }
.mapa-lotes__zoom-btn:last-child  { border-radius: 0 0 var(--radio) var(--radio); border-top: 0; }
.mapa-lotes__zoom-btn:hover { color: var(--acento-claro); }
.mapa-lotes__zoom-btn:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* Panel de detalle del lote: hoja inferior en móvil, tarjeta lateral en escritorio. */
.lote-panel__fondo { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, 0.35); }
.lote-panel {
  position: fixed; z-index: 45;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto; width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5) var(--e-5) calc(var(--safe-bottom) + var(--e-5));
  background: var(--sup-panel-solido);
  border: 1px solid var(--sup-borde);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--sombra);
  animation: subir 0.24s ease;
}
.lote-panel__cerrar {
  position: absolute; top: var(--e-3); right: var(--e-3);
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--tx-suave); background: rgba(255, 255, 255, 0.06);
}
.lote-panel__cerrar:hover { color: var(--tx-fuerte); }
.lote-panel__id { font-size: 1.15rem; font-weight: 700; padding-right: 50px; }
.lote-panel__estatus {
  align-self: flex-start;
  padding: 3px 10px; border-radius: var(--radio-pill);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.lote-panel__estatus--disponible { background: var(--lote-disponible); color: #04170e; }
.lote-panel__estatus--apartado   { background: var(--lote-apartado);   color: #1c1206; }
.lote-panel__estatus--vendido    { background: var(--lote-vendido);    color: #1c0906; }
.lote-panel__datos { display: flex; gap: var(--e-5); margin: 0; }
.lote-panel__dato dt { font-size: 0.68rem; color: var(--tx-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.lote-panel__dato dd { font-size: 1rem; font-weight: 650; }
.lote-panel__nota { font-size: 0.9rem; color: var(--tx-medio); }
.lote-panel__ver { margin-top: var(--e-2); width: 100%; }

/* --- 3d. Linderos sobre la esfera 360 (PASO 7d de script.js) --------- */
/* Overlay que va SOBRE el canvas de Pannellum y por DEBAJO de la barra
   superior / selector de escenas (z-index 20). La capa no intercepta el
   arrastre del visor (pointer-events:none); solo los polígonos y los pines. */
.linderos-capa {
  position: fixed; inset: 0; z-index: 14;
  pointer-events: none;
}
.linderos-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.linderos-pines { position: absolute; inset: 0; }

/* Polígono del lindero: relleno tenue coloreado por estatus + borde sólido de
   2px que no se deforma (vector-effect:non-scaling-stroke, puesto en el JS). */
.lindero {
  fill-opacity: 0.18;
  stroke-width: 2;
  pointer-events: auto;
  cursor: pointer;
  transition: fill-opacity 0.15s ease;
}
.lindero--disponible { fill: var(--lote-disponible); stroke: var(--lote-disponible); }
.lindero--apartado   { fill: var(--lote-apartado);   stroke: var(--lote-apartado); }
.lindero--vendido    { fill: var(--lote-vendido);    stroke: var(--lote-vendido); }
.lindero:hover { fill-opacity: 0.34; }
.lindero:focus { outline: none; }
.lindero:focus-visible { fill-opacity: 0.34; outline: 2px solid var(--acento-claro); }
/* abrirPanelLote() marca el polígono activo con .mapa-lote--activo (PASO 6c). */
.lindero.mapa-lote--activo { fill-opacity: 0.4; stroke-width: 3; }

/* Pin circular numerado en el centroide del lindero. Familia visual de
   .mapa-lotes__punto, en formato botón. */
.lindero-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  cursor: pointer;
  animation: pin-aparece 0.5s ease-out;   /* @keyframes junto a .hs--salir, §5b */
}
/* Texto oscuro sobre cada color de estatus (mismo criterio que .lote-panel__estatus). */
.lindero-pin--disponible { background: var(--lote-disponible); color: #04170e; }
.lindero-pin--apartado   { background: var(--lote-apartado);   color: #1c1206; }
.lindero-pin--vendido    { background: var(--lote-vendido);    color: #1c0906; }
.lindero-pin:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* ETAPA 2 (?editar=1): asas de vértice + pin como asa de traslación. Las asas
   van dentro del <svg> de linderos (sin viewBox → unidades = px, no se
   deforman). El pin pasa a cursor de mover. */
.linderos-capa--editor .lindero-pin { cursor: move; touch-action: none; }
/* Modo "Lotes": arrastrar el relleno del lindero lo traslada entero. */
body[data-ed-modo="lotes"] .lindero { cursor: move; }
.lindero-asa-grupo { pointer-events: auto; touch-action: none; }
.lindero-asa__hit { fill: transparent; pointer-events: all; cursor: grab; touch-action: none; }
.lindero-asa {
  fill: var(--acento-claro); stroke: #1c1206; stroke-width: 2;
  pointer-events: none;
}
.lindero-asa-grupo:active .lindero-asa__hit { cursor: grabbing; }
.lindero-asa-grupo:hover .lindero-asa,
.lindero-asa--arrastrando { fill: #fff; stroke-width: 3; }

@media (min-width: 768px) {
  .lote-panel {
    left: auto; right: var(--e-5); bottom: auto; top: 50%;
    width: 320px;
    border-radius: var(--radio);
    animation: none;
    translate: 0 -50%;
  }
}

/* --- Marca (logotipo de texto) -------------------------------------- */
/* Wordmark: punto ámbar con halo + "Panorámika" en la fuente display. Mismo
   objeto en el visor, el HOME (.home-marca) y el portafolio (.marca) y el mapa
   (.cabecera__marca): mismo markup, mismo tamaño, misma fuente. */
.marca { display: inline-flex; align-items: center; gap: var(--e-2); }
.marca__punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 4px var(--acento-tinte);
  flex: 0 0 auto;
}
.marca__texto {
  font-family: var(--fuente-display);
  font-size: 1rem; font-weight: 700; letter-spacing: -0.01em;
}

/* --- 4. Barra superior ---------------------------------------------- */
.barra-superior {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  /* 4 valores (top/right/bottom/left) en vez del shorthand de 3: con el editor
     abierto, --ed-inset-izq/der suman hueco solo del lado donde flota el panel. */
  padding:
    calc(var(--safe-top) + var(--e-3))
    calc(var(--e-4) + var(--ed-inset-der))
    var(--e-3)
    calc(var(--e-4) + var(--ed-inset-izq));
  background: linear-gradient(to bottom, rgba(13, 15, 18, 0.85), rgba(13, 15, 18, 0));
  pointer-events: none;
  transition: padding 0.15s ease;
}
.barra-superior > * { pointer-events: auto; }
.barra-superior__derecha { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; }
/* Solo el rótulo de escena se encoge (y recorta con "…"); los botones de icono
   —tema, compartir, "Preguntar por WhatsApp"— mantienen su tamaño y nunca se
   salen de la pantalla en móvil. */
.barra-superior__derecha > :not(.escena-actual) { flex: 0 0 auto; }

.escena-actual {
  font-family: var(--fuente-display);
  font-size: 0.8rem; font-weight: 600; color: var(--tx-fuerte);
  background: var(--sup-panel); -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde);
  padding: var(--e-1) var(--e-3); border-radius: var(--radio-pill);
  max-width: 44vw; min-width: 0;   /* min-width:0 → puede encoger y recortar con "…" si la barra va apretada */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.btn-icono {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--tx-medio);
  background: var(--sup-panel); -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde);
  transition: color 0.15s, border-color 0.15s;
}
.btn-icono:hover { color: var(--tx-fuerte); border-color: var(--acento); }
.btn-icono:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* --- 4c. Botón de tema (claro / oscuro / sistema) -----------------------
   Lo monta tema.js dentro de .barra-superior__derecha, junto a "Compartir".
   Mismo lenguaje visual que .btn-icono: círculo ghost, borde 1px que se vuelve
   ámbar al interactuar, ícono SVG de línea 2px (sol / luna / "auto"). */
.tema-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  color: var(--tx-medio);
  background: var(--sup-panel);
  -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde);
  transition: color 0.15s, border-color 0.15s;
}
.tema-btn svg { width: 18px; height: 18px; }
.tema-btn:hover { color: var(--tx-fuerte); border-color: var(--acento); }
.tema-btn:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.tema-btn--sin-mov { transition: none; }

/* --- 4b. Selector de propiedades ("Propiedades ▾") ---------------- */
/* Botón flotante DEBAJO de la barra, a la izquierda (mismo patrón visual que
   el panel del editor de lotes). Salta entre recorridos públicos sin recargar
   la URL a mano. Vive dentro de .barra-superior (z-index 20): queda por encima
   de las capas de video / mapa (z 10) y por debajo de la capa de aviso (z 60).
   Solo anima opacity/transform. Ver PASO 7b de script.js. */
.selector-props {
  position: absolute;
  top: calc(var(--safe-top) + 60px);
  left: calc(var(--e-4) + var(--ed-inset-izq));
  display: inline-block;
  transition: left 0.15s ease;
}

.selector-props__btn {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 60vw; min-height: 34px;
  padding: var(--e-1) var(--e-3);
  font-size: 0.8rem; font-weight: 600; color: var(--tx-medio);
  background: var(--sup-panel);
  -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde); border-radius: var(--radio-pill);
  transition: color 0.15s, border-color 0.15s;
}
.selector-props__btn:hover { color: var(--tx-fuerte); border-color: var(--acento); }
.selector-props__btn:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.selector-props__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selector-props__flecha { flex: 0 0 auto; display: grid; place-items: center; transition: transform 0.18s ease; }
.selector-props__flecha svg { display: block; width: 13px; height: 13px; }
.selector-props__btn[aria-expanded="true"] .selector-props__flecha { transform: rotate(180deg); }

/* Panel desplegable: baja desde el botón. Ancho acotado; con muchas
   propiedades hace scroll interno (no crece sin límite ni desborda la pantalla). */
.selector-props__panel {
  position: absolute; top: calc(100% + var(--e-2)); left: 0;
  min-width: 240px; max-width: min(80vw, 340px);
  max-height: 420px;
  max-height: min(60dvh, 420px);
  overflow-y: auto;
  padding: var(--e-1);
  background: var(--sup-panel-solido);
  border: 1px solid var(--sup-borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  transform-origin: top left;
  animation: props-desplegar 0.16s ease;
}
@keyframes props-desplegar { from { opacity: 0; transform: translateY(-4px); } }

.selector-props__item {
  display: block; width: 100%;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--e-2);
  color: var(--tx-medio); text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
a.selector-props__item:hover { background: rgba(255, 255, 255, 0.06); color: var(--tx-fuerte); }
.selector-props__item:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: -2px; }
.selector-props__item--actual { color: var(--acento-claro); }
.selector-props__item-nombre { display: block; font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.selector-props__item-check { color: var(--acento); }
.selector-props__item-meta {
  display: block; margin-top: 2px;
  font-size: 0.72rem; line-height: 1.35; color: var(--tx-suave);
}

@media (min-width: 768px) {
  .selector-props { left: calc(var(--e-6) + var(--ed-inset-izq)); }
}
@media (prefers-reduced-motion: reduce) {
  .selector-props__panel { animation: none; }
  .selector-props__flecha { transition: none; }
}

/* --- 5. Barra de navegación entre escenas (siempre visible) ------- */
/* Se ajusta a su propio contenido (fit-content) en vez de left:0;right:0: con
   pocas escenas (el caso típico) la barra queda angosta y centrada, dejando
   libres los lados de esta franja inferior para arrastrar y mirar alrededor.
   La barra SIGUE necesitando capturar el gesto para su scroll horizontal
   interno cuando el contenido sí desborda (max-width) — eso es correcto e
   inevitable solo en la franja angosta que ocupan las pastillas, ya no en
   TODO el ancho de la pantalla. (Causa raíz de "se siente atrapado" al
   arrastrar cerca de abajo en móvil, reportado por Daniel en celular). */
.selector-escenas {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + var(--e-3)); z-index: 20;
  transform: translateX(-50%);
  width: fit-content; max-width: calc(100% - (var(--e-6) * 2));
  display: flex; gap: var(--e-2); padding: 0 var(--e-4);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.selector-escenas::-webkit-scrollbar { display: none; }

/* Degradado de borde: solo se ve del lado donde SÍ hay contenido oculto por
   desbordar (clases que pone actualizarDesbordeSelector() en script.js, con
   scrollLeft/scrollWidth/clientWidth — mismo dato que ya usa
   aplicarEstadoBarraEscenas()). Al ser absolute dentro de un contenedor con
   overflow-x:auto, el degradado se ancla al VIEWPORT visible de la barra (no
   al contenido que se desplaza), así que se queda fijo en el borde mientras
   las pastillas se deslizan debajo — sin JS calculando estilos inline. */
.selector-escenas::before,
.selector-escenas::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 32px;
  pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.selector-escenas::before { left: 0; background: linear-gradient(to right, rgba(13, 15, 18, 0.55), rgba(13, 15, 18, 0)); }
.selector-escenas::after  { right: 0; background: linear-gradient(to left,  rgba(13, 15, 18, 0.55), rgba(13, 15, 18, 0)); }
.selector-escenas--desborda-izq::before { opacity: 1; }
.selector-escenas--desborda-der::after  { opacity: 1; }

.nav-escena {
  scroll-snap-align: center; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-2); min-height: 44px;
  font-size: 0.84rem; font-weight: 600; color: var(--tx-medio);
  background: var(--sup-panel); -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde); border-radius: var(--radio-pill);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-escena__ico {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.78rem; font-weight: 700;
}
.nav-escena__ico svg { width: 14px; height: 14px; }
.nav-escena:hover { color: var(--tx-fuerte); }
.nav-escena[aria-current="true"] {
  color: var(--acento-tx); background: var(--acento); border-color: var(--acento);
}
.nav-escena[aria-current="true"] .nav-escena__ico { background: rgba(0, 0, 0, 0.18); }
.nav-escena:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* Barra replegada (visor público, escena 360 con hotspots de navegación):
   se desliza fuera de la pantalla y deja solo la pestaña. Solo se anima el
   transform (barato). El visitante la despliega tocando la pestaña. */
.selector-escenas {
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.selector-escenas--replegada {
  /* translateX(-50%) se repite aquí porque el "transform" del estado normal
     (arriba, con left:50%) se REEMPLAZA entero al aplicar esta clase — sin
     este prefijo la barra se recentraría (perdiendo la corrección de left:50%)
     justo al deslizarse fuera de pantalla. */
  transform: translateX(-50%) translateY(calc(100% + var(--safe-bottom) + var(--e-4)));
  opacity: 0;
  pointer-events: none;
}

/* Pestaña "Escenas ▾" — asa fija centrada. Cuando la barra está abierta se
   posa justo encima de ella (sirve para volver a replegarla); cuando está
   replegada baja al ras inferior. */
.selector-escenas__pestana {
  position: fixed; left: 50%; z-index: 21;
  bottom: calc(var(--safe-bottom) + var(--e-3));
  transform: translateX(-50%) translateY(calc(-1 * (var(--barra-escenas-alto) + var(--e-2))));
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: var(--e-1) var(--e-3); min-height: 32px;
  font-size: 0.76rem; font-weight: 650; color: var(--tx-medio);
  background: var(--sup-panel); -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde); border-radius: var(--radio-pill);
  transition: transform 0.28s ease, color 0.15s, border-color 0.15s;
}
.selector-escenas__pestana:hover { color: var(--tx-fuerte); border-color: var(--acento); }
.selector-escenas__pestana:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.selector-escenas__pestana[hidden] { display: none; }
.selector-escenas__pestana[aria-expanded="false"] {
  transform: translateX(-50%) translateY(0);
}
.selector-escenas__pestana-ico { display: grid; place-items: center; width: 14px; height: 14px; }
.selector-escenas__pestana-ico svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
/* Chevron: apunta hacia abajo cuando la barra está abierta (= "empújame para
   ocultar"); hacia arriba cuando está replegada (= "sube la barra"). */
.selector-escenas__pestana[aria-expanded="true"] .selector-escenas__pestana-ico svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .selector-escenas,
  .selector-escenas__pestana,
  .selector-escenas__pestana-ico svg { transition: none; }
}

/* --- 5b. Marcadores dentro de la escena (hotspots) ---------------- */
/* Pannellum posiciona el div (.pnlm-hotspot-base) con un transform propio:
   NO le tocamos el transform. Solo anulamos su sprite y colgamos la pastilla,
   que se ancla con su propio transform relativo al punto. */
.pnlm-hotspot-base.hs { background: none; width: 0; height: 0; }

.marcador__pastilla {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);   /* centrada en el punto */
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--e-2) var(--e-4); min-height: 36px;
  font-size: 0.8rem; font-weight: 650; line-height: 1.15; white-space: nowrap;
  color: var(--tx-fuerte);
  background: rgba(13, 15, 18, 0.74);
  -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde);
  border-radius: var(--radio-pill);
  box-shadow: var(--sombra);
  transition: transform 0.12s ease, background 0.15s;
}
.hs.pnlm-pointer:hover .marcador__pastilla { transform: translate(-50%, -50%) scale(1.06); }
.marcador__linea { font-size: 0.82rem; display: inline-flex; align-items: center; gap: 4px; }
.marcador__linea svg { width: 13px; height: 13px; flex: 0 0 auto; }
.marcador__detalle { font-size: 0.7rem; font-weight: 550; color: var(--tx-medio); }

/* tipo "propiedad": marcador grande sobre el edificio, anclado por su punta */
.hs--propiedad .marcador__pastilla {
  transform: translate(-50%, calc(-100% - 8px));
  color: var(--acento-tx); background: var(--acento); border-color: var(--acento);
  animation: latido 2.4s ease-in-out infinite;
}
.hs--propiedad.pnlm-pointer:hover .marcador__pastilla { transform: translate(-50%, calc(-100% - 8px)) scale(1.05); }
.hs--propiedad .marcador__detalle { color: rgba(28, 18, 6, 0.72); }
.hs--propiedad .marcador__pastilla::after {   /* punta hacia el punto exacto */
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--acento);
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 var(--acento-tinte), var(--sombra); }
  50%      { box-shadow: 0 0 0 14px rgba(217, 154, 78, 0); }
}

/* Aparición MUY sutil al montar la escena — señal de "esto es clicable" para
   los pines discretos (navegación "salir" y numerados de lote/lindero, más
   abajo), deliberadamente mucho más discreta que el "latido" de
   .hs--propiedad (que NO se toca y sigue siendo el énfasis más fuerte). Estos
   nodos se recrean de cero cada vez que Pannellum monta la escena (hotspots) o
   que montarLinderos()/mostrarMapaLotes() la pintan (pines de lote), así que
   la animación corre UNA vez al aparecer; si luego solo se arrastra su
   posición en el editor (?editar=1) no se recrea el nodo y no vuelve a
   dispararse. */
@keyframes pin-aparece {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
}

/* tipo "salir": más discreto */
.hs--salir .marcador__pastilla {
  background: rgba(13, 15, 18, 0.62); color: var(--tx-medio); font-weight: 600;
  animation: pin-aparece 0.5s ease-out;
}

/* micro-rótulo "EN VENTA" del marcador de propiedad (lo pinta crearMarcador). */
.marcador__rotulo {
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acento-tx); opacity: 0.72;
  margin-bottom: 1px;
}

/* --- 6. Pantalla de bienvenida ---------------------------------- */
.intro {
  position: fixed; inset: 0; z-index: 30;
  display: grid; align-items: end;
  padding: var(--e-6) var(--e-5) calc(var(--safe-bottom) + var(--e-6));
  background:
    linear-gradient(to top, rgba(13,15,18,0.96) 8%, rgba(13,15,18,0.45) 55%, rgba(13,15,18,0.75)),
    var(--portada, none) center / cover no-repeat,
    var(--sup-fondo);
  transition: opacity 0.4s ease;
}
.intro.--saliendo { opacity: 0; pointer-events: none; }
.intro__contenido { max-width: 560px; }
.marca--intro { margin-bottom: var(--e-5); }
.marca--intro .marca__texto { font-size: 1.05rem; }

.intro__ubicacion {
  font-family: var(--fuente-display);   /* registro HUD: chico, ancho, mayúsculas */
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acento); margin-bottom: var(--e-2);
}
.intro__titulo {
  font-family: var(--fuente-display);   /* registro título: pesado y apretado */
  font-size: clamp(1.9rem, 7vw, 3rem); line-height: 1.05; font-weight: 800;
  letter-spacing: -0.04em; margin-bottom: var(--e-3);
}
.intro__descripcion { color: var(--tx-medio); font-size: 0.98rem; max-width: 42ch; margin-bottom: var(--e-5); }

/* --- 7. Hoja de compartir ------------------------------------ */
.hoja { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; }
.hoja__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.hoja__caja {
  position: relative; z-index: 1;
  margin: 0 auto; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5) var(--e-5) calc(var(--safe-bottom) + var(--e-5));
  background: var(--sup-panel-solido);
  border: 1px solid var(--sup-borde);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--sombra);
  animation: subir 0.25s ease;
}
@keyframes subir { from { transform: translateY(30px); opacity: 0; } }
.hoja__titulo { font-size: 1rem; margin-bottom: var(--e-2); }
.hoja__opcion {
  display: block; text-align: center; text-decoration: none;
  padding: var(--e-3) var(--e-4); min-height: 48px;
  font-weight: 600; color: var(--tx-fuerte);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--sup-borde); border-radius: var(--radio);
}
.hoja__opcion--wa { background: var(--wa); color: #04340f; border-color: transparent; }
.hoja__cerrar { padding: var(--e-3); color: var(--tx-suave); font-weight: 550; }

/* --- 8b. Botones ------------------------------------------- */
.btn-primario {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--e-3) var(--e-6); min-height: 50px;
  font-size: 0.98rem; font-weight: 650;
  color: var(--acento-tx); background: var(--acento);
  border-radius: var(--radio-pill);
  box-shadow: 0 6px 24px var(--acento-tinte);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.btn-primario:hover { transform: translateY(-1px); box-shadow: 0 10px 32px var(--acento-tinte); }
.btn-primario:active { transform: translateY(0); }
.btn-primario:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }

/* --- 8b2. Botones de WhatsApp para leads ------------------------------------
   "Preguntar por WhatsApp": píldora verde en la intro (.btn-wa), icono en la
   barra superior (.btn-icono--wa) y botón secundario en la ficha de lote
   (.lote-panel__wa). El verde --wa (#25d366) es IGUAL en tema claro y oscuro;
   el texto va en verde muy oscuro (#04340f, como .hoja__opcion--wa) para
   contraste AA en ambos temas. */
.btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-5); min-height: 48px;
  font-size: 0.95rem; font-weight: 650; text-decoration: none;
  color: #04340f; background: var(--wa);
  border: 1px solid transparent; border-radius: var(--radio-pill);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.btn-wa svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-wa:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.30); }
.btn-wa:active { transform: translateY(0); }
.btn-wa:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 3px; }

/* En la intro: bloque en su propia línea, ancho al contenido, encima del CTA
   ámbar "Iniciar recorrido". */
.intro .btn-wa { display: flex; width: fit-content; max-width: 100%; margin-bottom: var(--e-4); }

/* Barra superior: variante de icono del .btn-icono (mismo tamaño 38 px). */
.btn-icono--wa {
  color: #04340f; background: var(--wa); border-color: transparent;
  text-decoration: none;
}
.btn-icono--wa:hover { color: #04340f; border-color: transparent; filter: brightness(1.06); }

/* Ficha de lote: verde, secundario respecto a .lote-panel__ver (que es ámbar). */
.lote-panel__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  width: 100%; min-height: 46px; padding: var(--e-3) var(--e-4);
  font-size: 0.92rem; font-weight: 650; text-decoration: none;
  color: #04340f; background: var(--wa);
  border: 1px solid transparent; border-radius: var(--radio);
}
.lote-panel__wa svg { width: 18px; height: 18px; flex: 0 0 auto; }
.lote-panel__wa:hover { filter: brightness(1.05); }
.lote-panel__wa:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }

/* --- 8. Capa de aviso (carga / error) --------------------- */
.aviso {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: var(--e-5); background: rgba(13, 15, 18, 0.94);
  transition: opacity 0.3s ease;
}
.aviso.--oculto { opacity: 0; pointer-events: none; }
.aviso__caja { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); max-width: 340px; text-align: center; }
.aviso__texto { color: var(--tx-medio); font-size: 0.92rem; }
.aviso__spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--sup-borde); border-top-color: var(--acento);
  border-radius: 50%; animation: girar 0.9s linear infinite;
}
.aviso.--error .aviso__spinner { display: none; }
.aviso__reintentar {
  padding: var(--e-2) var(--e-5); min-height: 44px; font-weight: 600;
  color: var(--acento-tx); background: var(--acento); border-radius: var(--radio-pill);
}
.aviso__reintentar:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Pista de arrastre ---------------------------------- */
.pista-arrastre {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 76px); transform: translateX(-50%);
  z-index: 15; font-size: 0.78rem; color: var(--tx-suave);
  background: var(--sup-panel); -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  padding: var(--e-1) var(--e-3); border-radius: var(--radio-pill); border: 1px solid var(--sup-borde);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.pista-arrastre.--visible { opacity: 1; }

/* Pista de deslizamiento de la barra de escenas: mismo lenguaje visual que
   .pista-arrastre (arriba), pero independiente — un segundo aviso que NO la
   reemplaza. Una fila más arriba (116px) para no encimarse con ella si las dos
   llegaran a mostrarse a la vez. Ver gestionarPistaEscenas() en script.js:
   solo aparece si la barra de escenas realmente desborda. */
.pista-escenas {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 116px); transform: translateX(-50%);
  z-index: 15; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--tx-suave);
  background: var(--sup-panel); -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  padding: var(--e-1) var(--e-3); border-radius: var(--radio-pill); border: 1px solid var(--sup-borde);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.pista-escenas svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pista-escenas.--visible { opacity: 1; }

/* --- 8c. Mini-mapa HUD (PASO 7e de script.js) -------------------------
   Panel fijo en la esquina INFERIOR IZQUIERDA del visor, visible solo en
   escenas 360 de un recorrido que tenga una escena "mapa-lotes" de base.
   Arranca colapsado a la pastilla "▦ Mapa"; un toque lo expande a una tarjeta.
   z-index 16: por encima del lienzo y del overlay de linderos (14), por debajo
   de la barra superior / selector de escenas (20) y de la hoja / el aviso.
   El offset inferior (84px) libera la barra de escenas; en móvil la tarjeta es
   chica (min(46vw, 260px)), nunca a pantalla completa. Colores solo de :root
   (tema claro/oscuro heredado). */
.minimapa {
  position: fixed; z-index: 16;
  left: calc(var(--e-4) + var(--ed-inset-izq));
  bottom: calc(var(--safe-bottom) + 84px);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-2);
  pointer-events: none;   /* solo los controles internos reciben eventos */
  transition: left 0.15s ease;
}
.minimapa[hidden] { display: none; }
.minimapa > * { pointer-events: auto; }

/* Pastilla colapsada / botón de expandir. Mismo lenguaje que .nav-escena. */
.minimapa__toggle {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 34px; padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2);
  font-size: 0.8rem; font-weight: 650; color: var(--tx-medio);
  background: var(--sup-panel);
  -webkit-backdrop-filter: var(--difuminado); backdrop-filter: var(--difuminado);
  border: 1px solid var(--sup-borde); border-radius: var(--radio-pill);
  transition: color 0.15s, border-color 0.15s;
}
.minimapa__toggle:hover { color: var(--tx-fuerte); border-color: var(--acento); }
.minimapa__toggle:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.minimapa__toggle-ico { display: grid; place-items: center; width: 22px; height: 22px; }
.minimapa__toggle-ico svg { width: 15px; height: 15px; }
.minimapa--abierto .minimapa__toggle { color: var(--acento-claro); border-color: var(--acento); }

/* Tarjeta expandida. */
.minimapa__cuerpo {
  width: min(46vw, 260px);
  padding: var(--e-2);
  background: var(--sup-panel-solido);
  border: 1px solid var(--sup-borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: opacity 0.18s ease;
}
.minimapa__cuerpo[hidden] { display: none; }

.minimapa__lienzo { position: relative; line-height: 0; border-radius: var(--e-2); overflow: hidden; }
.minimapa__img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.minimapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.minimapa__marcas { position: absolute; inset: 0; pointer-events: none; }

/* Los polígonos reusan .mapa-lote / .mapa-lote--<estatus> (PASO 6c). Aquí solo
   se afina el grosor del borde para el tamaño reducido. */
.minimapa__lote { stroke-width: 1; }
.minimapa__lote:focus { outline: none; }
.minimapa__lote:focus-visible { outline: 2px solid var(--acento-claro); }

/* "Usted está aquí": punto + cono de visión. Son <div> (no <path> del SVG
   estirado) para que la rotación del cono no se deforme con la proporción de la
   imagen. El cono: triángulo con el vértice (apex) EN el punto; rotate(0)=arriba
   (norte del mapa), sentido horario como la brújula. Lo gira script.js. */
.minimapa__cono {
  position: absolute;
  width: 34px; height: 40px;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: linear-gradient(to top, var(--acento) 0%, rgba(217, 154, 78, 0.15) 62%, transparent 100%);
  pointer-events: none;
}
.minimapa__cono[hidden] { display: none; }
.minimapa__yo {
  position: absolute;
  width: 11px; height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--acento);
  border: 2px solid var(--sup-panel-solido);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.minimapa__yo[hidden] { display: none; }

/* Punto de otra escena 360 (navegación por mapa). */
.minimapa__punto {
  position: absolute;
  width: 22px; height: 22px;               /* área de toque */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent; border: 0;
  pointer-events: auto; cursor: pointer;
}
.minimapa__punto::after {
  content: ""; position: absolute; inset: 6px;
  border-radius: 50%;
  background: var(--tx-medio);
  border: 2px solid var(--sup-panel-solido);
  transition: background 0.15s;
}
.minimapa__punto:hover::after { background: var(--acento-claro); }
.minimapa__punto:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 1px; }

/* "Ver en Google Maps": enlace de solo texto bajo el lienzo, dentro del panel
   expandido — contexto real de ubicación (mundo real) sin API/key/iframe, solo
   un <a> a una URL pública. script.js lo arma con lat/lng de
   proyectos/proyectos.json; si el recorrido no los tiene ahí, se queda
   [hidden] — nunca un enlace roto. */
.minimapa__maps {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--e-2);
  font-size: 0.72rem; font-weight: 600; color: var(--tx-medio);
  text-decoration: none;
}
.minimapa__maps svg { width: 13px; height: 13px; flex: 0 0 auto; }
.minimapa__maps:hover { color: var(--acento-claro); }
.minimapa__maps:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 2px; }
.minimapa__maps[hidden] { display: none; }

/* Cuando el mini-mapa está en pantalla, la mini-leyenda de linderos (PASO 7d,
   reusa .mapa-lotes__leyenda, misma esquina inferior izquierda) se pasa a la
   derecha para no chocar con la tarjeta. En una escena 360 no hay botones de
   zoom, así que esa esquina está libre. */
body.hay-minimapa .linderos-capa .mapa-lotes__leyenda {
  left: auto; right: var(--e-4);
}

/* --- 9. Escritorio / tablet --------------------------- */
@media (min-width: 768px) {
  .barra-superior {
    padding-left: calc(var(--e-6) + var(--ed-inset-izq));
    padding-right: calc(var(--e-6) + var(--ed-inset-der));
  }
  .marca__texto { font-size: 1.05rem; }
  .escena-actual { font-size: 0.85rem; max-width: 30vw; }
  .selector-escenas { justify-content: center; bottom: calc(var(--safe-bottom) + var(--e-5)); }
  .intro { align-items: center; padding-left: 8vw; }
  .hoja { align-items: center; }
  .hoja__caja { border-radius: 20px; }
}

/* --- Accesibilidad: menos movimiento ---------------- */
@media (prefers-reduced-motion: reduce) {
  .aviso__spinner { animation-duration: 2s; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}