/* 26 · «Lo que no tienes, Gu lo busca» (opción B de opciones-mapa.html): mapa real en grises.
 * Cada alcance es un anillo que encierra por completo lo que Gu mira (afuera se oscurece, adentro un sombreado morado);
 * los anteriores quedan punteados. Formas por capa: cuadrado = tus propiedades, triángulo = asociaciones, círculo hueco = red Ungga.
 * El pin «?» marca lo que pidió Mariana; al abrir la red la cámara vuela a la casa y se vuelve «comparte comisión». */
.islb-h { margin: 0 auto; max-width: 18ch; text-align: center; font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.islb-sub { margin: 18px auto 56px; max-width: 58ch; text-align: center; color: var(--muted); font-size: 17.5px; text-wrap: balance; }
.islb { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: stretch; }
.islb-vis { position: relative; height: 560px; overflow: hidden; }
.islb-mapa { position: absolute; inset: 0; background: var(--k0c0d10); }
.islb-filtro .islb-mapa .maplibregl-canvas { filter: grayscale(1) brightness(.78) contrast(1.08); }   /* solo si no se pudo pasar el estilo a grises */
.islb-mapa .maplibregl-ctrl-attrib { font-size: 10px; }
.islb-mapa .maplibregl-canvas-container { cursor: grab; } .islb-mapa .maplibregl-canvas-container:active { cursor: grabbing; }
.islb-mapa .maplibregl-ctrl-bottom-right { z-index: 4; }
.islb-mapa .maplibregl-cooperative-gesture-screen { z-index: 5; font: 500 15px var(--sans); background: var(--k08090a-7); }

/* anillos en HTML: el contenedor solo cambia transform (y su tamaño mientras crece); el borde de luz gira con transform,
 * así el navegador lo compone sin repintar. El activo oscurece todo lo de afuera con una sombra enorme. */
@keyframes islbGira { to { transform: rotate(360deg); } }
.islb-ring { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; pointer-events: none; will-change: transform; transition: opacity .6s;
  border: 1px dashed var(--kffffff-22); }
.islb-ring > i { position: absolute; inset: 0; border-radius: 50%; display: none; }
.islb-ring.islb-act { border: 0; }
/* afuera oscuro: capa fija de 3000px con un hueco de 250px de radio (cubre la vista desde anillos de ~150px); se mueve y se escala solo con transform, sin repintar */
.islb-fuera { position: absolute; left: 0; top: 0; z-index: 2; width: 3000px; height: 3000px; margin: -1500px 0 0 -1500px; pointer-events: none; will-change: transform;
  transform-origin: 50% 50%; transition: opacity .6s;
  background: radial-gradient(circle at 50% 50%, transparent 0 249.5px, var(--k08090a-62) 250.5px); }
.islb-ring.islb-act > i { display: block; }
.islb-ring-luz { padding: 1.6px; will-change: transform; animation: islbGira 6s linear infinite;
  background: conic-gradient(var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.islb-ring-sombra { opacity: var(--sombra, 0); background: radial-gradient(closest-side, rgb(var(--t1) / 0) 25%, rgb(var(--t1) / .16) 100%); }
.islb-an { position: absolute; left: 0; top: 0; z-index: 3; white-space: nowrap; font-size: 12px; color: var(--dim); text-shadow: 0 1px 6px var(--k000000); transition: opacity .5s, color .4s; pointer-events: none; will-change: transform; }
.islb-an.on { color: var(--fg); font-weight: 600; font-size: 13px; }

/* lo que pidió Mariana (Marker de MapLibre, por encima del oscurecido): «?» que pulsa; al encontrarla, la casa con el borde de los botones */
.islb-mapa .maplibregl-marker { z-index: 4; }
.islb-pide { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.islb-pide > span { padding: 7px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.35; text-align: center; white-space: nowrap; border: 1px solid transparent;
  opacity: 0; transform: translateY(6px); transition: opacity .45s, transform .45s; animation: giraBorde 6s linear infinite;
  background: linear-gradient(var(--k0d0e10-941176), var(--k0d0e10-941176)) padding-box, conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box; }
.islb-pide > span small { display: block; color: var(--muted); font-size: 11.5px; }
.islb-pide.on > span { opacity: 1; transform: none; }
.islb-casa { position: relative; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--k1b1c20); border: 1px solid var(--line2);
  box-shadow: 0 8px 20px var(--k000000-5); animation: islbLate 1.6s ease-in-out infinite; transition: background .4s, border-color .4s; }
.islb-casa svg { width: 17px; height: 17px; fill: none; stroke: var(--cta-fg); stroke-width: 2.2; stroke-linejoin: round; opacity: 0; transition: opacity .3s; }
.islb-casa em { position: absolute; font: 800 16px var(--disp); font-style: normal; color: var(--fg); transition: opacity .3s; }
.islb-pide.on .islb-casa { animation: giraBorde 4s linear infinite; border: 1.5px solid transparent;
  background: linear-gradient(var(--cta-fill), var(--cta-fill)) padding-box, conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box;
  box-shadow: 0 0 0 7px rgb(var(--t1) / .18), 0 0 26px rgb(var(--t1) / .6); }
.islb-pide.on .islb-casa svg { opacity: 1; } .islb-pide.on .islb-casa em { opacity: 0; }
@keyframes islbLate { 50% { box-shadow: 0 0 0 9px var(--kffffff-07), 0 8px 20px var(--k000000-5); } }

/* carril: lo que pidió, los tres alcances sobre líneas y el resultado */
.islb-rail { display: flex; flex-direction: column; }
.islb-pid { display: grid; gap: 6px; padding-bottom: 22px; }
.islb-pid small { color: var(--dim); font-size: 12.5px; }
.islb-in { justify-self: start; max-width: 32ch; padding: 9px 13px; border-radius: 14px; border-top-left-radius: 4px; background: var(--k1b1c20); font-size: 14.5px; line-height: 1.45; }
.islb-alc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.islb-alc li { position: relative; border-bottom: 1px solid var(--line); }
.islb-alc button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 14px 2px; }
.islb-alc button:focus-visible { outline: 2px solid var(--b1); outline-offset: 2px; border-radius: 4px; }
.islb-alc b { display: block; font-size: 15px; font-weight: 600; color: var(--muted); transition: color .3s; }
.islb-alc small { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; line-height: 1.45; transition: color .3s; }
.islb-alc li.on b { color: var(--fg); } .islb-alc li.on small { color: var(--muted); }
.islb-alc button:hover b { color: var(--kd0d3d8); }
.islb-alc li > .luz-l { top: -1px; }
.islb-alc li.on > .luz-l { opacity: 1; animation: barre 2.8s linear infinite; }
.islb-mu { width: 13px; height: 13px; margin-top: 4px; display: block; }
.islb-res { margin-top: auto; padding-top: 22px; min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.islb-st { margin: 0; animation: islbAparece .4s both; }
.islb-st b { display: block; font-size: 15px; font-weight: 600; } .islb-st small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.islb-gu { justify-self: end; align-self: flex-end; max-width: 300px; padding: 10px 13px; border-radius: 14px; border-top-right-radius: 4px; font-size: 14.5px; line-height: 1.45;
  border: 1px solid transparent; animation: giraBorde 8s linear infinite, islbAparece .5s both;
  background: linear-gradient(var(--fill), var(--fill)) padding-box, conic-gradient(from var(--ang), var(--b1), var(--b2) 22%, var(--b3) 40%, var(--b4) 55%, var(--b1) 75%, var(--b2) 90%, var(--b1)) border-box; }
.islb-gu .ref { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: center; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line2); }
.islb-gu .ref img { width: 60px; height: 46px; border-radius: 6px; object-fit: cover; }
.islb-gu .ref small { display: block; color: var(--muted); font-size: 12.5px; }
.islb-pie { margin: 0; align-self: flex-end; color: var(--muted); font-size: 13.5px; animation: islbAparece .5s .3s both; }
.islb-pie b { color: var(--fg); font-weight: 600; }
@keyframes islbAparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.islb-nota { margin: 28px 0 0; color: var(--muted); font-size: 14.5px; text-align: center; }

@media (max-width: 900px) {
  .islb { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .islb-vis { height: 400px; }
  .islb-res { min-height: 250px; }
  .islb-sub { margin-bottom: 36px; }
  .islb-an { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .islb-casa, .islb-pide > span, .islb-gu { animation: none; }
  .islb-ring-luz { animation: none; }
}