/* Sección «Quién está detrás» con la maqueta de Bogotá (assets/bogota/mapa.js).
   En escritorio el texto flota a la izquierda sobre la maqueta; en móvil va encima. */
.bogota{position:relative;display:grid;background:var(--noche);color:var(--sobre-noche);overflow:hidden;isolation:isolate}
.bogota-lienzo{position:relative;grid-area:1/1;min-height:clamp(620px,92vh,940px);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.bogota.arrastrando .bogota-lienzo{cursor:grabbing}
.bogota-lienzo canvas{position:absolute;inset:0;-webkit-user-drag:none;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent)}
.bogota.mapa-listo canvas{opacity:1}
.bogota-poster{position:absolute;inset:0;pointer-events:none;-webkit-user-drag:none;width:100%;height:100%;object-fit:cover;object-position:62% 50%;transition:opacity 1.2s ease}
.bogota.mapa-listo .bogota-poster{opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s 1.2s}

/* velo para que el texto se lea sobre la maqueta (queda encima de las etiquetas) */
.bogota-lienzo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--noche) 0,color-mix(in srgb,var(--noche) 86%,transparent) 24%,transparent 50%)}

.bogota-texto{grid-area:1/1;position:relative;z-index:1;align-self:center;width:100%;pointer-events:none;display:grid;gap:18px;justify-items:start;padding-block:clamp(64px,9vw,112px)}
.bogota-texto>*{max-width:34rem}
.bogota-texto .etiqueta{color:var(--suave-noche)}
.bogota-titulo{font-size:clamp(36px,4.6vw,60px);line-height:1.02;letter-spacing:-.03em;font-weight:900;max-width:12ch}
.bogota-texto p{color:var(--suave-noche);font-size:17px;max-width:40ch}
.bogota-datos{display:flex;flex-wrap:wrap;gap:12px 32px;margin:10px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.bogota-datos dt{font-family:var(--mono);font-size:11px;letter-spacing:-.013em;text-transform:uppercase;color:var(--suave-noche)}
.bogota-datos dd{margin:4px 0 0;font-weight:800;font-size:17px}
.bogota-pista{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px!important;letter-spacing:-.013em;text-transform:uppercase}
.bogota-pista svg{width:26px;height:14px;flex:none}
.bogota-fuente{position:absolute;right:var(--gutter);bottom:14px;z-index:1;margin:0;font-size:11px;color:rgba(255,255,255,.5)}  /* .4 daba 3.81:1 sobre #111118; .5 da 5.32:1 */
.bogota-fuente a{color:inherit}

/* etiquetas que siguen a la maqueta */
.bogota-etiquetas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mapa-loc{position:absolute;left:0;top:0;translate:-50% -50%;white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-shadow:0 0 6px var(--noche),0 0 2px var(--noche);opacity:0;transition:opacity .6s ease;will-change:transform}
.mapa-loc.on{opacity:1}
.mapa-faro{position:absolute;left:0;top:0;translate:0 -100%;display:grid;gap:2px;padding:0 0 10px 12px;border-left:1px solid rgba(255,218,0,.8);
  opacity:0;transition:opacity .8s ease;will-change:transform}
.mapa-faro.on{opacity:1}
.mapa-faro.izq{translate:-100% -100%;border-left:0;border-right:1px solid rgba(255,218,0,.8);padding:0 12px 10px 0;text-align:right}
.mapa-faro b{font-size:20px;font-weight:900;letter-spacing:-.02em;line-height:1}
.mapa-faro span{font-family:var(--mono);font-size:10px;letter-spacing:-.013em;color:rgba(255,255,255,.7)}

@media (max-width:980px){
  .bogota-lienzo{grid-area:2/1;min-height:min(140vw,680px);margin-top:-40px}
  .bogota-lienzo::after{background:linear-gradient(180deg,var(--noche) 0,transparent 22%)}
  .bogota-texto{grid-area:1/1;padding-block:clamp(56px,9vw,80px) 0}
  .bogota-titulo{max-width:14ch}
}
@media (prefers-reduced-motion:reduce){ .bogota-lienzo canvas,.bogota-poster,.mapa-loc,.mapa-faro{transition:none} }