/* ---------------------------------------------------------------------------
   MAPA BASE PROPIO (ficha de proyecto + sala de ventas del home)
   Reemplaza el iframe de Google. La imagen es cartografía oficial de Bogotá
   (mapa base "Tóner" de IDECA/Catastro) pre-renderizada en el servidor:
   src/lib/basemap.js + content/generar-mapas-ago03.mjs. Acá solo vive lo que
   se dibuja ENCIMA: el pin del proyecto y el crédito obligatorio.

   REGLA DE ORO: la imagen NUNCA se escala. Los rótulos de vía que trae el
   servicio (KR 13, CL 134A) están dibujados para 1 píxel de imagen = 1 píxel
   CSS; a la mitad de tamaño son manchas. Por eso `object-fit:none` con recorte
   centrado: en un teléfono se ve menos territorio, no un mapa más pequeño.
   El recorte es centrado, así que el centro geográfico —el pin— siempre queda
   en el centro de la caja. De ahí que el pin se posicione en 50%/50% y no haga
   falta ninguna cuenta.
   Este archivo se carga después de site.css, así que puede ganarle a
   `.proj-map .mf-tag{display:none}` sin subir especificidad artificial.
--------------------------------------------------------------------------- */

.bm{
  /* Tonos del pin = leyenda del mapa isométrico del home (src/lib/isomap.js
     TONE por estado). Son las variantes "para fondo oscuro": el azul
     corporativo #35638B desaparece sobre el negro del plano. */
  --bm-preventa:#FFDB5C;
  --bm-construccion:#7CB8EC;
  --bm-entregado:#B0B0BA;
  /* "Próximamente" (144 LOFT): el estado nuevo todavía no tiene tono en la
     leyenda del isométrico. En claro el sitio lo pinta con --blue-100 (#D8E5EF,
     .badge.proximamente de site.css); acá se usa su equivalente para fondo
     oscuro, un azul claro que no se confunde con el gris de "entregado".
     Cuando se fije el tono oficial se cambia ESTA línea y nada más. */
  --bm-proximamente:#A9DCEF;
  --bm-sede:#FFD23F;          /* sala de ventas: acento de marca, no es proyecto */
  --bm-ink:#0B1520;           /* tinta oscura del plano, para el contorno del pin */
  background:#000;
}
.bm .bm-view{
  position:relative;
  display:block;
  height:340px;               /* alto explícito en los dos breakpoints → sin CLS */
  overflow:hidden;
  background:#000;
}
.bm .bm-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:none;            /* sin escalar: recorte 1:1 */
  object-position:50% 50%;    /* centrado en el pin */
  border:0;
}
@media (min-width:700px){
  .bm .bm-view{height:420px;}
}

/* Pin: gota en el color del estado, con contorno oscuro y halo para que aguante
   tanto el negro de las manzanas como el blanco de las vías. La punta cae en el
   centro exacto de la caja (translate -50%,-100%). */
.bm .bm-pin{
  position:absolute;
  left:50%;
  top:50%;
  width:30px;
  height:40px;
  transform:translate(-50%,-100%);
  pointer-events:none;
  z-index:2;
}
.bm .bm-pin::before{          /* halo suave bajo la punta */
  content:"";
  position:absolute;
  left:50%;
  bottom:-9px;
  width:44px;
  height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.42),rgba(255,255,255,0));
}
.bm .bm-pin svg{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));
}
.bm .bm-pin .bm-drop{
  fill:var(--bm-sede);
  stroke:var(--bm-ink);
  stroke-width:1.6;
}
.bm .bm-pin .bm-eye{fill:var(--bm-ink);}
.bm .bm-pin[data-status="preventa"] .bm-drop{fill:var(--bm-preventa);}
.bm .bm-pin[data-status="construccion"] .bm-drop{fill:var(--bm-construccion);}
.bm .bm-pin[data-status="entregado"] .bm-drop{fill:var(--bm-entregado);}
.bm .bm-pin[data-status="proximamente"] .bm-drop{fill:var(--bm-proximamente);}

/* Crédito obligatorio del proveedor de la cartografía. Va en el DOM (y no solo
   grabado en el píxel) porque el recorte se come las esquinas de la imagen; el
   archivo .webp lo lleva grabado igual, para cuando alguien lo enlaza suelto. */
.bm .bm-credit{
  position:absolute;
  right:9px;
  bottom:8px;
  z-index:2;
  padding:2px 7px;
  border-radius:4px;
  background:rgba(11,21,32,.62);
  color:rgba(255,255,255,.9);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.5;
  pointer-events:none;
}

/* Rótulo propio (nombre + dirección). site.css lo esconde salvo con .has-map,
   que este bloque ya trae; acá solo se ajusta para que se lea sobre el plano
   negro y no tape el pin en pantallas angostas. */
.bm .mf-tag{max-width:min(70%,32ch);box-shadow:0 4px 14px rgba(0,0,0,.45);}

@media (max-width:479px){
  .bm .bm-view{height:300px;}
  .bm .mf-tag{left:9px;top:9px;max-width:calc(100% - 18px);padding:7px 11px;}
  .bm .mf-tag b{font-size:12.5px;}
}