/* BAIREN · Portal · Búsqueda con mapa. Mejoras del 25/10/2026 (segunda vuelta). Va con js/mapa-busqueda.js.
   25/10 (noche) · El mapa de bairengroup.com a pantalla completa (mapa-barrios.js): de lejos, cada barrio con su número
   en un círculo oro y su nombre; de cerca, los precios en etiquetas crema rectas. Abajo, un solo botón oro.
   El mapa es parte del navy de la casa (portal/IDENTIDAD.md), como el mapa de barrios de bairengroup.com: lienzo navy,
   calles y agua en navy más claro, barrios con borde oro fino y nombres en Jost crema tenue. Encabezado navy con filete
   oro. Los precios, en etiquetas crema con letra navy ("US$ 1.800"); el elegido, en oro. La tarjeta es la de siempre del
   portal (.p-tj, de js/data.js), sobre la hoja crema en la lista. Playfair para precios y títulos, Jost para lo demás. */
.mb{
  --mb-navy:#131D2D;--mb-navy2:#1E2A3F;--mb-navy3:#2A3A52;
  --mb-crema:#FBFAF6;--mb-crema2:rgba(251,250,246,.80);--mb-crema3:rgba(251,250,246,.64);--mb-hoja:#EEE5D0;
  --mb-oro:#C2A968;--mb-oro-claro:#DECDA0;--mb-oro-linea:rgba(194,169,104,.55);
  --mb-linea:rgba(255,255,255,.14);--mb-linea2:rgba(255,255,255,.22);--mb-tile:rgba(255,255,255,.06);
  --mb-titulo:var(--font-display,'Playfair Display'),Georgia,serif;--mb-texto:var(--font-body,'Jost'),system-ui,sans-serif;
  --mb-curva:cubic-bezier(.22,1,.36,1);--mb-hojac:cubic-bezier(.32,.72,0,1);
  --mb-sombra:0 10px 28px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.2);
  --mb-abajo:calc(68px + env(safe-area-inset-bottom, 0px));
  position:fixed;inset:0;z-index:5000;overflow:hidden;background:var(--mb-navy);color:var(--mb-crema);font-family:var(--mb-texto);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
.mb[hidden]{display:none}
html.mb-abierto,html.mb-abierto body{overflow:hidden}
/* el aviso "Guardada en favoritos" se ve arriba del mapa, debajo del encabezado (ui.js le pone bottom en línea) */
html.mb-abierto #bpToast{z-index:5100;top:calc(env(safe-area-inset-top, 0px) + 132px);bottom:auto !important}
.mb ::selection{background:var(--mb-oro-claro);color:var(--mb-navy)}
.mb button{font-family:var(--mb-texto);-webkit-appearance:none;appearance:none}
.mb svg{display:block;flex:none}

/* ── el mapa: el dibujo de barrios de la casa, a pantalla completa, y las etiquetas ── */
.mb .mb-mapa{position:absolute;inset:0;background:var(--mb-navy)}
.mb-dib{position:absolute;inset:0}
.mb-sel-b{fill:rgba(194,169,104,.16);fill-rule:evenodd;stroke:var(--mb-oro-claro);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.mb-zona-path{fill:rgba(194,169,104,.12);stroke:var(--mb-oro-claro);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
/* "Cargando el mapa": arriba, debajo del encabezado, para no tapar los barrios que ya se ven */
.mb-cargando{position:absolute;z-index:6;left:50%;top:calc(var(--mb-cab,120px) + 12px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;max-width:min(300px,calc(100% - 32px));margin:0;padding:12px 20px 14px;background:var(--mb-navy2);border:1px solid var(--mb-oro-linea);box-shadow:var(--mb-sombra);font:400 15px/1.35 var(--mb-texto);color:var(--mb-crema);text-align:center}
.mb-cargando[hidden]{display:none}
.mb-cargando i{display:block;width:120px;height:1px;background:linear-gradient(90deg,transparent 0,var(--mb-oro) 50%,transparent 100%) 0 0/60% 100% no-repeat,rgba(194,169,104,.2);animation:mb-carga 1.1s cubic-bezier(.45,0,.55,1) infinite}
.mb-cargando.error i{display:none}
@keyframes mb-carga{from{background-position:-80% 0,0 0}to{background-position:180% 0,0 0}}

.mb-capa{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.mb-capa>*{position:absolute;left:0;top:0;pointer-events:auto;transition:opacity .16s var(--mb-curva),visibility 0s linear 0s}
.mb-capa>.fuera{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease-out,visibility 0s linear .12s}
/* nombres de los barrios: Jost crema tenue, con un halo navy para leerse sobre las calles */
.mb-n{pointer-events:none !important;z-index:1;padding:2px 0;font:600 10px/1 var(--mb-texto);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;color:rgba(251,250,246,.46);text-shadow:0 0 2px var(--mb-navy),0 0 4px var(--mb-navy),0 0 8px var(--mb-navy)}
/* barrio con oferta, de lejos: su número en un círculo oro, en su barrio, y el nombre donde entra (abajo, a un costado o
   arriba), como en bairengroup.com */
.mb .mb-c{z-index:2;margin:0;padding:0;border:0;background:none;cursor:pointer}
.mb-c::before{content:"";position:absolute;inset:-6px -4px}
.mb-c .mb-in{display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .16s var(--mb-curva)}
.mb .mb-in .mb-cant{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:var(--mb-oro);color:var(--mb-navy);font:600 13px/1 var(--mb-texto);font-style:normal;letter-spacing:0;font-variant-numeric:tabular-nums lining-nums;box-shadow:0 0 0 4px rgba(194,169,104,.22),0 4px 12px rgba(0,0,0,.45)}
.mb-c b{font:500 11px/1 var(--mb-texto);letter-spacing:.1em;text-transform:uppercase;color:var(--mb-crema);white-space:nowrap;text-shadow:0 0 8px var(--mb-navy),0 0 3px var(--mb-navy),0 1px 2px var(--mb-navy)}
.mb-c[data-lado=t] .mb-in{flex-direction:column-reverse}
.mb-c[data-lado=r] .mb-in{flex-direction:row;gap:7px}
.mb-c[data-lado=l] .mb-in{flex-direction:row-reverse;gap:7px}
.mb-c[data-lado=n] b{position:absolute;visibility:hidden}
.mb-c:active .mb-in{transform:scale(.96)}
/* cada departamento: su precio en una etiqueta crema, con la punta en su esquina */
.mb .mb-p{z-index:3;margin:0;padding:0 0 6px;border:0;background:none;cursor:pointer;color:var(--mb-navy)}
.mb-p::before{content:"";position:absolute;inset:-6px -3px -2px}
.mb-p .mb-in{position:relative;display:flex;align-items:center;height:30px;padding:0 10px;background:#F4F0E6;border:1px solid #F4F0E6;box-shadow:0 4px 12px rgba(0,0,0,.42);font:600 13.5px/1 var(--mb-texto);letter-spacing:.02em;color:var(--mb-navy);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;transition:background-color .16s var(--mb-curva),color .16s var(--mb-curva),border-color .16s var(--mb-curva),transform .16s var(--mb-curva)}
.mb-p .mb-in::after{content:"";position:absolute;left:calc(50% + var(--cola, 0px));bottom:-5px;width:8px;height:8px;margin-left:-4px;background:inherit;border-right:1px solid;border-bottom:1px solid;border-color:inherit;transform:rotate(45deg)}
.mb-p small{margin-right:4px;font:500 11px/1 var(--mb-texto);letter-spacing:.02em;color:var(--mb-navy3)}
.mb-p:active .mb-in{transform:scale(.96)}
.mb-p.visto .mb-in{background:#D8D1C1;border-color:#D8D1C1}
.mb-p.mb-k .mb-in{font:600 11.5px/1 var(--mb-texto);letter-spacing:.12em;text-transform:uppercase;border-color:var(--mb-oro)}
.mb .mb-p.sel{z-index:6}
.mb-p.sel .mb-in{background:var(--mb-oro);border-color:var(--mb-oro);color:var(--mb-navy)}
.mb-p.sel small{color:var(--mb-navy)}

/* dibujo */
.mb-trazo{position:absolute;inset:0;z-index:3;pointer-events:none}
.mb-trazo.on{pointer-events:auto;touch-action:none;cursor:crosshair}
.mb-trazo svg{width:100%;height:100%}
.mb-linea{fill:rgba(194,169,104,.10);stroke:var(--mb-oro-claro);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}

/* ── arriba: el encabezado navy con filete oro, Volver, el campo y los filtros ── */
.mb-cab{position:absolute;left:0;right:0;top:0;z-index:7;padding-top:calc(env(safe-area-inset-top, 0px) + 8px);background:var(--mb-navy);border-bottom:1px solid var(--mb-oro)}
.mb-cab-fila{display:flex;align-items:center;gap:10px;padding:0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px))}
.mb .mb-volver{flex:none;display:inline-flex;align-items:center;gap:4px;height:44px;margin:0;padding:0 6px 0 0;border:0;background:none;color:var(--mb-crema);font:500 14.5px/1 var(--mb-texto);cursor:pointer}
.mb-volver svg{width:18px;height:18px;color:var(--mb-oro)}
.mb-campo{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--mb-tile);border:1px solid var(--mb-linea2);cursor:text;transition:border-color .16s var(--mb-curva),box-shadow .16s var(--mb-curva)}
.mb-campo:focus-within{border-color:var(--mb-oro);box-shadow:0 0 0 3px rgba(194,169,104,.35)}
.mb-campo svg{width:18px;height:18px;color:var(--mb-oro)}
.mb .mb-campo input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0 !important;border-radius:0;background:none !important;box-shadow:none !important;outline:none !important;color:var(--mb-crema);font:400 16px/1 var(--mb-texto);-webkit-appearance:none;appearance:none}
.mb #mbQ{outline:none !important}   /* el anillo de foco lo lleva el campo entero (le gana a la regla global con !important) */
.mb-campo input::placeholder{color:rgba(251,250,246,.58);opacity:1}
.mb-campo input::-webkit-search-cancel-button{display:none}
.mb-filtros{display:flex;gap:8px;overflow-x:auto;padding:8px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));scrollbar-width:none;overscroll-behavior-x:contain}
.mb-filtros::-webkit-scrollbar{display:none}
.mb .mb-f{flex:none;display:inline-flex;align-items:center;gap:7px;height:44px;margin:0;padding:0 13px;border:1px solid var(--mb-linea2);background:transparent;color:var(--mb-crema2);font:500 14px/1 var(--mb-texto);white-space:nowrap;cursor:pointer;transition:background-color .16s var(--mb-curva),border-color .16s var(--mb-curva),color .16s var(--mb-curva),transform .16s var(--mb-curva)}
.mb-f svg{width:14px;height:14px;color:var(--mb-oro)}
.mb .mb-f.on{background:rgba(194,169,104,.16);border-color:var(--mb-oro);color:var(--mb-oro-claro)}
.mb-f:active{transform:scale(.97)}
/* debajo del buscador, la plata: tres franjas en dólares por mes, finas y sin relleno; la elegida, con el oro de siempre
   (25/10 noche, Tomás: "que quede sutil, no tosco") */
.mb-plata{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:6px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));scrollbar-width:none;overscroll-behavior-x:contain}
.mb-plata[hidden]{display:none}
.mb-plata::-webkit-scrollbar{display:none}
.mb-plata-l{flex:none;margin-right:2px;font:500 10.5px/1 var(--mb-texto);letter-spacing:.14em;color:var(--mb-oro)}
.mb .mb-fr{position:relative;flex:none;height:30px;margin:0;padding:0 11px;border:1px solid rgba(251,250,246,.16);background:transparent;color:rgba(251,250,246,.78);font:400 13px/1 var(--mb-texto);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;cursor:pointer;transition:background-color .16s var(--mb-curva),border-color .16s var(--mb-curva),color .16s var(--mb-curva),transform .16s var(--mb-curva)}
.mb-fr::before{content:"";position:absolute;inset:-7px -3px}   /* 44 px para el dedo */
.mb .mb-fr.on{border-color:var(--mb-oro);background:rgba(194,169,104,.14);color:var(--mb-oro-claro)}
.mb-fr:active{transform:scale(.97)}
/* los barrios elegidos, flotando debajo del encabezado */
.mb-chips{position:absolute;z-index:5;top:calc(var(--mb-cab,120px) + 10px);left:max(16px, env(safe-area-inset-left, 0px));display:flex;gap:8px;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mb-chips[hidden]{display:none}
.mb-chips::-webkit-scrollbar{display:none}
.mb .mb-chips .mb-f{background:var(--mb-navy);box-shadow:0 6px 18px rgba(0,0,0,.35)}

/* sugerencias de barrio y topes de precio */
.mb-sugg{position:absolute;z-index:8;top:var(--mb-cab,120px);left:0;right:0;max-height:calc(100% - var(--mb-cab,120px) - 72px);overflow-y:auto;overscroll-behavior:contain;background:var(--mb-navy2);border-bottom:1px solid var(--mb-oro-linea);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mb-sugg[hidden]{display:none}
.mb .mb-sugg button{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:0;padding:8px 16px;border:0;border-bottom:1px solid var(--mb-linea);background:transparent;color:var(--mb-crema);font:400 16px/1.25 var(--mb-texto);text-align:left;cursor:pointer}
.mb .mb-sugg button:last-child{border-bottom:0}
.mb-sugg button svg{width:18px;height:18px;color:var(--mb-oro)}
.mb-sugg button span{flex:1;min-width:0}
.mb-sugg button em{display:block;margin-top:3px;font:400 13px/1.2 var(--mb-texto);font-style:normal;color:var(--mb-crema3)}
.mb-sugg button small{flex:none;font:400 13.5px/1 var(--mb-texto);color:var(--mb-crema3);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.mb .mb-sugg button:active{background:var(--mb-tile)}
.mb .mb-sugg button.on{background:rgba(194,169,104,.16);color:var(--mb-oro-claro)}

/* barrio sin oferta: "Todavía no hay" y los más cercanos */
.mb-aviso{position:absolute;z-index:6;top:calc(var(--mb-cab,120px) + var(--mb-chips,0px) + 12px);left:16px;right:16px;padding:14px 52px 14px 16px;background:var(--mb-navy2);border:1px solid var(--mb-oro-linea);box-shadow:var(--mb-sombra)}
.mb-aviso[hidden]{display:none}
.mb-aviso-b{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mb-aviso-b span{font:400 14px/1 var(--mb-texto);color:var(--mb-crema3)}
.mb .mb-aviso-x{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--mb-crema);cursor:pointer}
.mb-aviso-x svg{width:18px;height:18px}

/* ── abajo: el lápiz con su palabra, la atribución y "Ver lista (N)" ── */
.mb-dibujo{position:absolute;z-index:5;left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));bottom:calc(var(--mb-abajo) + 12px);display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none}
/* el lápiz: chico, solo el ícono, a la derecha (25/10 noche, Tomás: "más pequeño y más sutil, del lado derecho") */
.mb .mb-lapiz{pointer-events:auto;display:inline-grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid rgba(194,169,104,.4);background:rgba(19,29,45,.82);color:var(--mb-oro-claro);box-shadow:0 6px 16px rgba(0,0,0,.32);cursor:pointer;transition:transform .16s var(--mb-curva),border-color .16s var(--mb-curva)}
.mb .mb-lapiz svg{width:19px;height:19px}
.mb-lapiz[hidden],.mb-guia[hidden]{display:none !important}
.mb-lapiz-ico{flex:none;display:grid;place-items:center;width:46px;border-right:1px solid var(--mb-oro-linea);color:var(--mb-oro)}
.mb-lapiz-ico svg{width:20px;height:20px}
.mb-lapiz:active{transform:scale(.97)}
.mb-guia{pointer-events:auto;flex:1;display:flex;align-items:stretch;min-height:56px;background:var(--mb-navy);border:1px solid var(--mb-oro-linea);box-shadow:var(--mb-sombra);transition:opacity .2s var(--mb-curva)}
.mb-guia .mb-lapiz-ico{width:54px}
.mb-guia-t{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:8px 12px}
.mb-guia-t b{font:500 15px/1.2 var(--mb-texto);color:var(--mb-crema)}
.mb .mb-guia-x{flex:none;min-width:44px;margin:0;padding:0 16px;border:0;border-left:1px solid var(--mb-linea);background:none;color:var(--mb-oro-claro);font:500 14.5px/1 var(--mb-texto);cursor:pointer}
.mb.trazando .mb-guia{opacity:.3}
.mb-osm{position:absolute;z-index:5;left:max(16px, env(safe-area-inset-left, 0px));bottom:calc(var(--mb-abajo) + 14px);padding:3px 0;font:400 10px/1 var(--mb-texto);color:var(--mb-crema3);text-decoration:none;text-shadow:0 0 3px var(--mb-navy),0 0 6px var(--mb-navy)}
.mb.dibujando .mb-osm{display:none}
.mb .mb-barra{position:absolute;z-index:5;left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);display:flex;align-items:center;justify-content:center;height:52px;margin:0;padding:0 16px;border:0;background:var(--mb-oro);color:var(--mb-navy);font:600 13px/1 var(--mb-texto);letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums lining-nums;box-shadow:var(--mb-sombra);cursor:pointer;transition:transform .16s var(--mb-curva),background-color .16s var(--mb-curva)}
.mb .mb-barra:active{transform:scale(.97)}
.mb.con-previa .mb-barra,.mb.con-previa .mb-dibujo,.mb.con-previa .mb-osm{visibility:hidden}
.mb.con-lista .mb-dibujo,.mb.con-lista .mb-osm,.mb.con-lista .mb-barra{visibility:hidden}

/* ── la tarjeta de siempre del portal (.p-tj), con fotos que se deslizan ── */
.mb-tj{position:relative}
.mb .p-tj .tj-foto .mb-tj-fotos{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.mb .p-tj .tj-foto .mb-tj-fotos::-webkit-scrollbar{display:none}
.mb .p-tj .tj-foto .mb-tj-fotos img{position:static;flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;scroll-snap-stop:always;transform:none !important}
.mb-tj-puntos{position:absolute;z-index:1;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.mb-tj-puntos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.35);transition:background-color .16s var(--mb-curva)}
.mb-tj-puntos i.on{background:#fff}

/* la vista previa: abajo, flota sobre el mapa (que sigue usable atrás) */
.mb-prev{position:absolute;z-index:6;left:max(16px, env(safe-area-inset-left, 0px));right:max(16px, env(safe-area-inset-right, 0px));bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);box-shadow:0 18px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.25);opacity:0;transform:translateY(16px);transition:opacity .15s ease-out,transform .15s ease-out}
.mb-prev.on{opacity:1;transform:none;transition:opacity .24s var(--mb-curva),transform .24s var(--mb-curva)}
.mb-prev[hidden]{display:none}
.mb-prev .p-tj .tj-foto{aspect-ratio:auto;height:170px}
.mb-prev .p-tj .tj-fav{right:58px}
.mb .mb-prev-x{position:absolute;z-index:3;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;background:rgba(251,250,246,.92);color:var(--mb-navy);cursor:pointer}
.mb-prev-x svg{width:18px;height:18px}

/* la lista: la hoja crema con las tarjetas de siempre, debajo de una cabecera navy */
.mb-lista{position:absolute;z-index:6;left:0;right:0;top:var(--mb-cab,120px);bottom:0;display:flex;flex-direction:column;background:var(--mb-hoja);transform:translateY(100%);transition:transform .22s var(--mb-curva)}
.mb-lista.on{transform:none;transition:transform .32s var(--mb-hojac)}
.mb-lista.arrastre{transition:none}
.mb-lista[hidden]{display:none}
.mb-lista-cab{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));background:var(--mb-navy2);touch-action:none}
.mb-lista .mb-filtros{flex:none;background:var(--mb-navy2);border-bottom:1px solid var(--mb-oro-linea);padding-top:2px;padding-bottom:12px}
.mb-asa{position:absolute;top:7px;left:50%;width:32px;height:3px;margin-left:-16px;background:rgba(255,255,255,.22)}
.mb-lista-cab h2{margin:0;font:500 22px/1.15 var(--mb-titulo);color:var(--mb-crema)}
.mb-lista-cab p{margin:4px 0 0;font:400 14px/1.3 var(--mb-texto);color:var(--mb-crema3)}
.mb-lista-cab p[hidden]{display:none}
.mb .mb-btn-linea{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 14px;border:1px solid rgba(251,250,246,.32);background:transparent;color:var(--mb-crema);font:500 14px/1 var(--mb-texto);cursor:pointer;transition:border-color .16s var(--mb-curva),transform .16s var(--mb-curva)}
.mb-btn-linea svg{width:16px;height:16px;color:var(--mb-oro)}
.mb-btn-linea:active{transform:scale(.97)}
.mb-lista-c{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;overflow-y:auto;overscroll-behavior:contain;padding:16px max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(16px, env(safe-area-inset-left, 0px))}
.mb-lista .mb-tj{flex:none}
.mb-vacio{padding:32px 8px;text-align:center}
.mb-vacio .mb-btn-linea{border-color:rgba(19,29,45,.35);color:var(--mb-navy)}

@media (hover:hover) and (pointer:fine){
  .mb .mb-f:hover,.mb .mb-btn-linea:hover{border-color:var(--mb-oro)}
  .mb .mb-sugg button:hover{background:var(--mb-tile)}
  .mb .mb-fr:hover{border-color:rgba(194,169,104,.6);color:var(--mb-crema)}
  .mb .mb-lapiz:hover{border-color:var(--mb-oro)}
  .mb-p:hover .mb-in,.mb-c:hover .mb-in{border-color:var(--mb-oro)}
  .mb .mb-barra:hover{background:var(--mb-oro-claro)}
}
@media (min-width:900px){
  .mb-cab-fila,.mb-filtros,.mb-plata{padding-left:24px;padding-right:24px}
  .mb-campo{max-width:440px}
  .mb-sugg{left:24px;right:auto;width:560px;border:1px solid var(--mb-oro-linea);border-top:0}
  .mb-aviso{left:24px;right:auto;width:480px}
  .mb-prev{left:auto;right:24px;bottom:24px;width:380px}
  .mb-lista{left:auto;width:440px;border-left:1px solid var(--mb-oro-linea);transform:translateX(100%)}
  .mb-lista.on{transform:none}
  .mb .mb-barra{left:50%;right:auto;bottom:24px;width:320px;margin-left:-160px}
  .mb-dibujo{left:auto;right:24px;bottom:24px}
  .mb-guia{width:440px}
  .mb-osm{left:24px;bottom:28px}
}
@media (prefers-reduced-motion:reduce){
  .mb-prev,.mb-prev.on,.mb-lista,.mb-lista.on{transition:opacity .15s linear}
  .mb-prev{transform:none}
  .mb-p .mb-in,.mb-c .mb-in,.mb-f,.mb-fr,.mb-lapiz,.mb-btn-linea{transition:none}
  .mb-p:active .mb-in,.mb-c:active .mb-in,.mb-f:active,.mb-fr:active,.mb-lapiz:active,.mb-btn-linea:active{transform:none}
  .mb-cargando i{animation:none}
}

/* Varios departamentos en el mismo edificio: el nombre del edificio (o su calle) con el número en oro; al tocarlo, la
   lista de ese edificio. El punto crema: un departamento que a esta distancia no entra (al acercar, pasa a precio). */
.mb-p.mb-e .mb-in{gap:8px;padding:0 4px 0 10px;font:500 13px/1 var(--mb-texto);letter-spacing:0}
.mb-p.mb-e .mb-cant{min-width:22px;height:22px;padding:0 6px;font-size:12px;box-shadow:none}
.mb-p.sel.mb-e .mb-cant{background:var(--mb-navy);color:var(--mb-oro-claro)}
.mb-p::before{inset:-7px -3px}
.mb .mb-d{z-index:2;width:12px;height:12px;margin:0;padding:0;border:0;background:none;cursor:pointer}
.mb-d::before{content:"";position:absolute;inset:-12px}
.mb-d .mb-in{display:block;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:#F4F0E6;border:2px solid var(--mb-navy);box-shadow:0 0 0 1px rgba(244,240,230,.5),0 1px 4px rgba(0,0,0,.4);transition:transform .16s var(--mb-curva)}
.mb-d:active .mb-in{transform:scale(.8)}
.mb-d.visto .mb-in{background:#A9A391}
.mb .mb-prev-x{border-radius:50% !important;background:rgba(251,250,246,.88);box-shadow:0 2px 8px rgba(19,29,45,.16)}   /* igual al corazón de la tarjeta */
@media (prefers-reduced-motion:reduce){ .mb-d .mb-in{transition:none} .mb-d:active .mb-in{transform:none} }