/* El mapa de la morosidad.
   Un plano navegable, no una página: #lienzo es la ventana y #mundo el
   territorio, movido con un transform. Todo lo que flota encima es .hud. */
:root {
  --tinta: #0d1520;
  --tinta-suave: #5a6880;
  --papel: #eef1f6;
  --borde: #d8dee8;
  --hud: rgba(255, 255, 255, .92);
  --fuente: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sombra: 0 1px 2px rgba(13, 21, 32, .06), 0 8px 28px rgba(13, 21, 32, .10);
  /* Un solo lugar: lo consumen el ancho del panel, el corrimiento del HUD y
     —leído del DOM, no copiado— el reencuadre del plano en mapa.js. */
  --panel-w: 460px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body.mapa {
  margin: 0;
  overflow: hidden;
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--papel);
  line-height: 1.5;
  /* La trama del fondo es lo que hace que el plano se lea como plano: al
     arrastrar, el movimiento se percibe contra ella. */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(13, 21, 32, .07) 1px, transparent 0);
  background-size: 28px 28px;
}
a { color: inherit; }

/* ── el plano ─────────────────────────────────────────────────────────── */
#lienzo {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
#lienzo.arrastrando { cursor: grabbing; }
#mundo {
  position: absolute;
  top: 0; left: 0;
  width: max-content;
  padding: 160px 200px;
  transform-origin: 0 0;
  will-change: transform;
  --k: 1;
  /* Arrastrar el plano es el gesto principal, y por defecto el navegador lo
     interpreta como "seleccionar texto": quedaba media pantalla resaltada en
     azul. Nada del plano se selecciona, ni las anotaciones: en un mapa, hacer
     clic en cualquier lado tiene que mover el mapa y nada más.
     Ctrl+F sigue encontrando todo, incluso lo que no se puede seleccionar:
     el buscador del navegador no mira `user-select`. */
  user-select: none;
}
/* El trazo y la tipografía del recorrido se dividen por el zoom para que
   midan siempre lo mismo en pantalla: con un stroke de 3 px del mundo, en la
   vista general (k≈0.24) la flecha se dibujaba de 0,7 px y desaparecía. */
#conexiones {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
#conexiones path {
  stroke-width: calc(3px / var(--k, 1));
  stroke-dasharray: calc(11px / var(--k, 1)) calc(10px / var(--k, 1));
}
#conexiones text { font-size: calc(15px / var(--k, 1)); }
.banda {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 96px;
  margin-left: var(--sangria, 0);
  margin-bottom: 130px;
}
.banda:last-child { margin-bottom: 0; }

/* ── una zona ─────────────────────────────────────────────────────────── */
.zona {
  position: relative;
  padding: 40px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: var(--fondo);
  box-shadow: var(--sombra);
  scroll-margin: 200px;
}
.zona::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto;
  height: 6px;
  border-radius: 20px 20px 0 0;
  background: var(--color);
}
/* Los rótulos de zona compensan el zoom: como en un mapa, el nombre del
   territorio se sigue leyendo cuando estás lejos. --k lo actualiza mapa.js.
   ⚠ Por eso el encabezado tiene alto fijo y el título va posicionado, fuera del
   flujo. Si el texto que crece con el zoom empujara la caja, cambiaría el ancho
   de la zona, y con él el tamaño del plano y el encuadre: el zoom se
   realimentaría a sí mismo. El ancho del encabezado lo manda la grilla. */
.zona > .encabezado {
  position: relative;
  width: 100%;
  height: 210px;
  margin-bottom: 16px;
}
.zona .momento {
  position: absolute;
  top: 0; left: 0;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(13px, calc(11px / var(--k, 1)), 26px);
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--color);
}
.zona h2 {
  position: absolute;
  top: 24px; left: 0;
  width: 100%;
  margin: 0;
  /* Envuelve dentro del ancho de su propia zona: con nowrap, el título crecido
     por el zoom se metía encima del territorio de al lado. */
  font-size: clamp(30px, calc(26px / var(--k, 1)), 56px);
  line-height: 1.02;
  letter-spacing: -.025em;
}
/* La cuenta y el subtítulo van juntos en un bloque anclado ABAJO del
   encabezado, así el título puede crecer hacia el medio sin pisarlos. Van en un
   solo bloque y no como dos absolutos: anclados por separado se solapaban
   cuando el subtítulo envolvía en tres líneas. */
.zona .pie { position: absolute; bottom: 0; left: 0; width: 100%; }
.zona .cuenta { margin: 0 0 6px; font-size: 14px; color: var(--tinta-suave); }
.zona .cuenta b { font-size: 17px; color: var(--tinta); }
.zona .subtitulo { margin: 0; max-width: 46rem; font-size: 15px; color: var(--tinta-suave); }

.familias { display: flex; flex-wrap: wrap; align-items: stretch; gap: 28px; }
.familia {
  padding: 22px;
  border: 1px dashed var(--color);
  border-radius: 14px;
  background: var(--fondo);
}
.familia > .encabezado { max-width: 32rem; margin-bottom: 18px; }
.familia h3 { margin: 0; font-size: 17px; color: var(--color); letter-spacing: -.01em; }
.familia .corto {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.familia .subtitulo { margin: 8px 0 0; font-size: 13px; color: var(--tinta-suave); }

/* ── una ficha ────────────────────────────────────────────────────────── */
.grilla {
  width: var(--ancho);
  columns: var(--columnas);
  column-gap: 24px;
}
.proyecto {
  width: 300px;
  break-inside: avoid;
  margin: 0 0 24px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(13, 21, 32, .05);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s, opacity .2s;
}
.proyecto:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.proyecto .ficha { display: block; padding: 6px 6px 0; }
.proyecto .ficha svg { display: block; width: 100%; height: auto; }
.proyecto .meta {
  margin: 0;
  padding: 0 16px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.anotacion {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--borde);
  font-size: 13.5px;
  /* Se atenúa con opacity y NUNCA con display:none: un nodo ocultado así
     desaparece del Ctrl+F del navegador. */
  transition: opacity .18s;
}
.anotacion p { margin: 0 0 8px; }
.anotacion p:last-child { margin-bottom: 0; }
.anotacion .destacado {
  margin: 0 0 10px;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--color, #0d1520);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .04em;
}
.anotacion .enlaces { margin-top: 10px; font-size: 11.5px; color: var(--tinta-suave); }

/* De lejos, los subtítulos largos son ruido ilegible y se atenúan. Las
   anotaciones NO: son la textura del territorio, y ocultarlas dejaba manchas
   blancas donde deberían verse proyectos. Además nunca se usa display:none,
   que borraría el texto del Ctrl+F del navegador. */
#mundo.lejos .familia .subtitulo, #mundo.lejos .zona .subtitulo { opacity: .3; }
#mundo.lejos .anotacion .enlaces { opacity: 0; }

/* ── el HUD ───────────────────────────────────────────────────────────── */
.hud {
  position: fixed;
  z-index: 10;
  background: var(--hud);
  backdrop-filter: blur(10px);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra);
}
.hud-titulo { top: 20px; left: 20px; width: 268px; padding: 18px 20px; transition: width .18s; }
.hud .plegar {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--tinta-suave);
  cursor: pointer;
}
.hud .plegar:hover { background: var(--papel); }
/* Plegado: queda sólo el título, del ancho de un rótulo. El panel no se oculta
   entero porque el visitante tiene que poder volver a abrirlo. */
.hud-titulo.plegado { width: 196px; padding-bottom: 16px; }
.hud-titulo.plegado .sobretitulo,
.hud-titulo.plegado .metricas,
.hud-titulo.plegado .corte,
.hud-titulo.plegado .ayuda { display: none; }
.hud-titulo.plegado h1 { font-size: 19px; padding-right: 26px; }
.hud-titulo .sobretitulo {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.hud-titulo h1 { margin: 0; font-size: 29px; line-height: 1.02; letter-spacing: -.035em; }
.metricas { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 16px 0 10px; padding: 0; }
.metricas dt { font-size: 23px; font-weight: 800; line-height: 1; cursor: help; letter-spacing: -.02em; }
.metricas dd {
  margin: 2px 0 0;
  font-size: 9.5px;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: .07em;
}
/* El wordmark. Alto fijo y ancho automático: la proporción la trae el archivo,
   y fijar los dos lo deformaría el día que cambie el logo. */
.hud-titulo .marca { display: block; height: 26px; width: auto; margin-bottom: 12px; }

/* La puerta de conversión, al pie del panel del título. Separada por una línea:
   es un pedido, no una cifra más del encabezado. */
.hud-titulo .captura {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borde);
}
.hud-titulo .captura-titulo { font-size: 13px; }
.hud-titulo .captura-texto { margin-bottom: 8px; font-size: 12px; }
/* En 268px de ancho el campo y el botón no entran en una línea: van apilados. */
.hud-titulo .captura-fila { flex-direction: column; gap: 6px; }
.hud-titulo .captura-fila input[type="email"] { flex: none; width: 100%; padding: 9px 10px; }
.hud-titulo .captura-fila button { width: 100%; padding: 9px 12px; }
.hud-titulo .captura-estado { font-size: 12px; }
/* Plegado, el panel deja sólo el título: la puerta se va con el resto. */
.hud-titulo.plegado .marca,
.hud-titulo.plegado .captura { display: none; }

.hud-titulo .corte { margin: 0; font-size: 11px; color: var(--tinta-suave); }
/* La fecha de corte se destaca del rango de expedientes: son dos fechas
   distintas y confundirlas es leer mal la pieza entera. */
.hud-titulo .corte-fecha { margin-top: 3px; font-weight: 650; color: var(--tinta); }
.hud-titulo .ayuda {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--borde);
  font-size: 10.5px;
  color: var(--tinta-suave);
}

.hud-recorrido { top: 20px; right: 20px; width: 194px; padding: 7px; }
.hud-recorrido ol { margin: 0; padding: 0; list-style: none; }
.hud-recorrido button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.hud-recorrido button:hover,
.hud-recorrido button.activa { background: color-mix(in srgb, var(--color) 14%, transparent); }
.hud-recorrido .paso {
  flex: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--color);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  text-align: center;
  line-height: 17px;
}
.hud-recorrido .titulo {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.005em;
}
.hud-recorrido .cuenta { flex: none; font-size: 11px; font-weight: 800; color: var(--color); }

/* ── los filtros ──────────────────────────────────────────────────────── */
/* Abajo y al medio: es la única pieza del HUD que se usa mirando el plano
   entero, así que no puede tapar una esquina del territorio. */
/* Se ancla al hueco que dejan el zoom y el minimapa, y NO se centra en la
   ventana: el ancho de la barra cambia con lo que esté elegido en cada
   desplegable, así que un centrado deja el solape librado al texto del filtro.
   Con `left`/`right` fijos no puede tocarlos nunca. */
.hud-filtros {
  left: 200px;
  right: calc(var(--hueco-der) + 256px);
  bottom: 20px;
  display: flex;
  /* Envuelve en dos filas cuando el hueco no alcanza. Sin esto, a 1280 px los
     desplegables se comprimían encima del contador y el número desaparecía. */
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  padding: 9px 12px;
}
/* Cuánto le come el panel al pie de la pantalla. Una sola variable la manda, y
   de ahí salen tanto el borde derecho de la barra como su centro cuando está
   plegada: con dos cálculos separados, uno se olvida de actualizar. */
:root { --hueco-der: 0px; }
body.con-panel { --hueco-der: var(--panel-w); }

/* Plegada quedan el botón y el contador, y la caja se encoge a ellos: estirada
   de punta a punta, una barra con dos cosas adentro se lee como una banda
   vacía cruzando el mapa. */
.hud-filtros.plegado {
  left: calc((100vw - var(--hueco-der)) / 2);
  right: auto;
  transform: translateX(-50%);
}
.hud-filtros.plegado .filtro,
.hud-filtros.plegado .limpiar { display: none; }
.hud-filtros .alternar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 1px;
  padding: 6px 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
}
.hud-filtros .alternar:hover { background: var(--papel); }
.hud-filtros .alternar .chevron { font-size: 9px; color: var(--tinta-suave); }
.hud-filtros:not(.plegado) .alternar { border-color: var(--tinta); }
/* Con filtros puestos el botón lo canta aunque esté plegada: si no, el mapa se
   vería medio apagado y el control que lo explica estaría escondido. */
.hud-filtros .alternar.con-filtros {
  border-color: var(--tinta);
  background: var(--tinta);
  color: #fff;
}
.hud-filtros .alternar.con-filtros .chevron { color: rgba(255, 255, 255, .65); }
.hud-filtros .filtro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hud-filtros .filtro span {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El mínimo entra «Diputados» con su flecha; el máximo recorta los nombres de
   tema, que son largos. Lo recortado se lee en el `title`, que pone mapa.js. */
.hud-filtros select {
  min-width: 106px;
  max-width: 148px;
  padding: 5px 7px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  color: var(--tinta);
  cursor: pointer;
}
.hud-filtros select:hover { border-color: var(--tinta-suave); }
/* Un desplegable con algo elegido se distingue de uno en «Todos» sin tener que
   leerlo: si no, no se ve de dónde sale un mapa medio apagado. */
.hud-filtros select.puesto { border-color: var(--tinta); font-weight: 700; }
.hud-filtros .cuenta-filtro {
  flex: none;
  margin: 0 0 5px;
  padding-left: 4px;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.hud-filtros .cuenta-filtro b { font-size: 15px; color: var(--tinta); letter-spacing: -.01em; }
.hud-filtros .limpiar {
  flex: none;
  padding: 6px 11px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
}
.hud-filtros .limpiar:hover:not(:disabled) { background: var(--papel); }
.hud-filtros .limpiar:disabled { opacity: .35; cursor: default; }

/* ⛔ Filtrar ATENÚA, no oculta. La ficha que no coincide sigue ocupando su
   lugar exacto: el plano no se reacomoda y el lector no pierde dónde estaba —
   que es lo único que un mapa no puede hacerle. Sólo se toca `opacity`; nada
   que empuje el layout, y nunca `display:none`, que además borraría el texto
   del Ctrl+F del navegador. */
.proyecto.apagado { opacity: .13; }
.proyecto.apagado:hover { opacity: .5; }
/* La ficha abierta en el panel NUNCA se atenúa: es la que estás leyendo. */
.proyecto.seleccionado.apagado { opacity: 1; }

.hud-minimapa { right: 20px; bottom: 20px; width: 200px; padding: 8px; line-height: 0; }
#minimapa { width: 100%; height: auto; cursor: crosshair; border-radius: 8px; }

.hud-zoom { left: 20px; bottom: 20px; display: flex; gap: 4px; padding: 5px; }
.hud-zoom button {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.hud-zoom button:hover { background: rgba(13, 21, 32, .07); }

.hud-pie { display: none; }
.aviso-telefono { display: none; }

/* ── la captura de correo ─────────────────────────────────────────────── */
/* El sumidero de los formularios. `display:none` NO sirve: Firefox y Safari no
   envían a un iframe que no está en el flujo de dibujo. Se esconde con tamaño
   cero, que sí lo deja recibir la respuesta. */
iframe[name="sumidero-captura"] {
  position: absolute; width: 0; height: 0; border: 0; visibility: hidden;
}
/* La trampa para bots de Listmonk: si viene con algo, el envío se rechaza. Se
   oculta como en su propio formulario. */
.captura .nonce { display: none; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.captura { margin: 14px 0 0; }
.captura-titulo { margin: 0 0 2px; font-weight: 650; font-size: 15px; }
.captura-texto { margin: 0 0 10px; font-size: 13px; color: var(--tinta-suave); }
.captura-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.captura-fila input[type="email"] {
  flex: 1 1 12rem; min-width: 0; padding: 11px 12px;
  border: 1px solid var(--borde); border-radius: 10px;
  font: inherit; font-size: 16px;   /* 16px o iOS hace zoom solo al enfocar */
  background: #fff; color: var(--tinta);
}
.captura-fila input[type="email"]:focus-visible {
  outline: 2px solid var(--tinta); outline-offset: 1px;
}
.captura-fila button, .copiar {
  padding: 11px 16px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--tinta); color: #fff; font: inherit; font-weight: 600;
}
.captura-fila button:hover, .copiar:hover { opacity: .88; }
.copiar {
  margin-top: 10px; width: 100%;
  background: transparent; color: var(--tinta);
  border: 1px solid var(--borde);
}
.captura-estado, .copiar-estado {
  margin: 8px 0 0; font-size: 13px; min-height: 1.2em;
}
/* El estado vacío no ocupa lugar: sin esto, cada formulario deja un hueco. */
.captura-estado:empty, .copiar-estado:empty { min-height: 0; margin: 0; }
.captura-estado.mal { color: #b42318; }
.captura-estado.bien, .copiar-estado.bien { color: #027a48; }

/* ── el panel lateral ─────────────────────────────────────────────────── */
/* Corre el mapa, no lo tapa: el panel se para a la derecha y el plano se
   reencuadra contra el rectángulo que queda libre (`areaLibre()` en mapa.js
   mide este ancho, no lo supone). Por eso también el recorrido y el minimapa
   se corren: si no, quedarían debajo del panel. */
.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 20;
  width: var(--panel-w);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid var(--borde);
  box-shadow: -12px 0 40px rgba(13, 21, 32, .12);
}
.panel[hidden] { display: none; }
body.con-panel .hud-recorrido,
body.con-panel .hud-minimapa { right: calc(var(--panel-w) + 20px); }

.panel-barra {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  background: var(--papel);
}
.panel-barra .paso {
  padding: 6px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
}
.panel-barra .paso:hover:not(:disabled) { background: var(--papel); }
/* Se detiene en los extremos: el botón queda apagado, no desaparece. */
.panel-barra .paso:disabled { opacity: .38; cursor: default; }
.panel-barra .posicion {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.panel-barra .cerrar {
  flex: none;
  width: 30px; height: 30px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--tinta-suave);
  cursor: pointer;
}
.panel-barra .cerrar:hover { background: var(--papel); color: var(--tinta); }

.panel-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px 40px; }
.panel .ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.panel .pastilla {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--color, #0d1520);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.panel .familia-nombre { font-size: 11.5px; color: var(--tinta-suave); }
.panel h2 { margin: 0; font-size: 20px; line-height: 1.22; letter-spacing: -.02em; }
.panel .datos {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.panel .bloque { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde); }
.panel .bloque h3 {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.panel .bloque p { margin: 0 0 9px; font-size: 14px; }
.panel .bloque p:last-child { margin-bottom: 0; }
.panel .fuente { margin-top: 8px; font-size: 11px; color: var(--tinta-suave); }
.panel .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.panel .chip {
  padding: 5px 10px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--papel);
  font-size: 12px;
  text-decoration: none;
  color: var(--tinta);
}
.panel .chip:hover { border-color: var(--tinta-suave); background: #fff; }
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel .firmantes li { margin-bottom: 10px; font-size: 13.5px; }
.panel .firmantes li:last-child { margin-bottom: 0; }
.panel .firmantes b { display: block; font-weight: 700; }
.panel .firmantes span { font-size: 12px; color: var(--tinta-suave); }
.panel .comisiones li {
  margin-bottom: 6px;
  padding-left: 14px;
  position: relative;
  font-size: 13.5px;
}
.panel .comisiones li::before {
  content: '';
  position: absolute;
  top: 8px; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tinta-suave);
}
.panel .articulado summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta-suave);
}
.panel .articulado summary:hover { color: var(--tinta); }
/* El texto completo, sin recorte: es el documento, no una vista previa. */
.panel .articulado .texto {
  max-height: 460px;
  overflow-y: auto;
  margin-top: 12px;
  padding: 14px;
  border-radius: 10px;
  background: var(--papel);
  font-size: 12.5px;
  line-height: 1.62;
  white-space: pre-wrap;
}
.panel .acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.panel .acciones a {
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.panel .acciones a:hover { background: var(--papel); }
.panel .acciones .principal { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.panel .acciones .principal:hover { background: #1c2c40; }

/* La ficha elegida se marca en el plano: con el panel abierto tiene que
   quedar claro cuál de las 59 se está leyendo. */
.proyecto { cursor: pointer; }
.proyecto.seleccionado {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px var(--tinta), var(--sombra);
}

/* ── el cierre: método, preguntas y puertas (INT-727) ─────────────────── */
/* Va encima de los controles de zoom, no debajo del panel del título: el alto
   del título cambia con el plegado y la cifra más larga, así que anclarlo ahí
   dejaría el botón bailando. El zoom mide fijo. */
.hud-metodo {
  left: 20px;
  bottom: 76px;
  padding: 10px 16px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--tinta);
}
.hud-metodo:hover { background: #fff; }

.cierre {
  position: fixed;
  z-index: 60;
  top: 0; right: 0; bottom: 0;
  width: min(680px, 92vw);
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid var(--borde);
  box-shadow: var(--sombra);
  /* Fuera de pantalla, NO `display:none`: el contenido del cierre —el método,
     las cuatro preguntas— tiene que seguir existiendo para el Ctrl+F del
     navegador y para quien lo lea sin JavaScript. Es la misma regla por la que
     el mapa atenúa con `opacity` en vez de ocultar. */
  transform: translateX(101%);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}
.cierre.abierto { transform: none; }
.cierre-cuerpo { padding: 28px 32px 40px; }
.cierre-cerrar {
  position: absolute;
  top: 14px; right: 16px;
  width: 34px; height: 34px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  color: var(--tinta-suave);
}
.cierre h2 {
  margin: 30px 0 10px;
  font-size: 22px;
  letter-spacing: -.01em;
}
.cierre-cuerpo > h2:first-child { margin-top: 0; }

.embudo { margin: 0; padding-left: 0; list-style: none; counter-reset: paso; }
.embudo li {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 14px 12px 46px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--papel);
  font-size: 14px;
  line-height: 1.45;
}
.embudo li::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  left: 14px; top: 12px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}
.embudo b { font-size: 17px; }
/* Cada escalón se angosta un poco: el embudo se ve, no sólo se lee. */
.embudo li:nth-child(2) { margin-right: 4%; }
.embudo li:nth-child(3) { margin-right: 8%; }
.embudo li:nth-child(4) { margin-right: 12%; }
.embudo li:nth-child(5) { margin-right: 16%; }
.embudo-nota, .preguntas-nota {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.preguntas { display: grid; gap: 14px; }
.pregunta {
  padding: 16px 18px;
  border: 1px solid var(--borde);
  border-radius: 14px;
}
.pregunta h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.pregunta-alcance {
  margin: 3px 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinta-suave);
}
.pregunta ul { margin: 0; padding: 0; list-style: none; }
.pregunta li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--borde);
  font-size: 14px;
}
.pregunta li b {
  flex: none;
  min-width: 2.2rem;
  font-size: 18px;
  text-align: right;
}

.puertas { display: grid; gap: 14px; margin-top: 30px; }
.puerta {
  padding: 18px 20px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: var(--papel);
}
.puerta p { margin: 0 0 4px; font-size: 14px; line-height: 1.5; }
.puerta-titulo { font-weight: 650; }
.puerta-boton {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--tinta);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.puerta-boton:hover { opacity: .88; }

/* ── el teléfono (INT-726) ────────────────────────────────────────────── */
/* ⛔ En el teléfono la pieza NO es el mapa achicado: es el mismo contenido
   apilado, y el aviso con la captura de correo va PRIMERO. Mismo HTML, otro
   CSS — no hay una segunda plantilla que se pueda desincronizar.

   El orden del HTML lo manda el escritorio, donde todo flota sobre el plano y
   da igual. Acá el orden del DOM sí se ve, así que el body se vuelve una
   columna flex y cada pieza declara su `order`. Es la única forma de subir el
   aviso sin emitirlo dos veces. */
@media (max-width: 900px) {
  body.mapa {
    overflow: auto;
    background-image: none;
    display: flex;
    flex-direction: column;
  }
  .aviso-telefono { order: 1; }
  .hud-titulo      { order: 2; }
  .hud-recorrido   { order: 3; }
  .hud-filtros     { order: 4; }
  #lienzo          { order: 5; }
  .cierre          { order: 6; }
  .hud-pie         { order: 7; }

  /* El cierre deja de ser una hoja que se abre: en el teléfono ya se llega
     scrolleando, así que va apilado al final y sin nada que abrir ni cerrar. */
  .cierre {
    position: static;
    width: auto;
    transform: none;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--borde);
    box-shadow: none;
    margin-top: 8px;
  }
  .cierre-cuerpo { padding: 24px 16px 32px; }
  .cierre-cerrar, .hud-metodo { display: none; }
  /* Los escalones angostados del embudo no entran en 390px: acá van derechos. */
  .embudo li:nth-child(n) { margin-right: 0; }

  #lienzo { position: static; overflow: visible; cursor: auto; }
  #mundo {
    position: static;
    width: auto;
    padding: 16px;
    transform: none !important;
    --k: 1;
  }
  /* Lo que se va: el plano y todo lo que sirve para navegarlo. Criterio del
     issue — en 390px no puede quedar ni un control de zoom ni el minimapa. */
  #conexiones, .hud-minimapa, .hud-zoom, .hud .plegar { display: none; }
  .banda { display: block; margin: 0 0 24px; }
  .zona { margin-bottom: 24px; padding: 20px; }
  .zona h2 { font-size: 26px; }
  .familias { display: block; }
  .familia { margin-bottom: 20px; }
  .grilla { width: auto; columns: 1; }
  .proyecto { width: auto; }
  /* Sin zoom no hay «lejos»: la anotación de los 59 se lee siempre. Es lo que
     hace que los 59 proyectos sean alcanzables en el teléfono. */
  #mundo.lejos .anotacion { opacity: 1; }
  /* Sin plano que correr, el panel deja de ser lateral y pasa a ser la
     pantalla entera. El .hud de abajo lo vuelve estático: el panel no. */
  .panel { position: fixed; inset: 0; width: auto; border-left: 0; z-index: 40; }
  body.con-panel { overflow: hidden; }
  .hud { position: static; width: auto; margin: 16px; }
  /* Los filtros sí sirven en la vista apilada: se enderezan en columna. El
     `translateX(-50%)` de escritorio los correría media pantalla. */
  .hud-filtros {
    flex-wrap: wrap;
    align-items: stretch;
    max-width: none;
    transform: none;
  }
  .hud-filtros .filtro { flex: 1 1 45%; }
  .hud-filtros select { max-width: none; width: 100%; }
  .hud-titulo { width: auto; }
  .hud-titulo .ayuda { display: none; }
  .hud-pie { display: block; }

  /* El ciclo de la deuda, que en el plano es el recorrido del mapa, acá es una
     lista vertical: sigue siendo el índice de la pieza y es la única forma de
     saber qué hay abajo sin scrollear las seis zonas. */
  .hud-recorrido { display: block; }
  .hud-recorrido ol { display: block; }
  .hud-recorrido li { margin-bottom: 6px; }
  .hud-recorrido button {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  .hud-recorrido .titulo { white-space: normal; max-width: none; }

  /* El aviso: lo primero que se ve, sin scrollear. */
  .aviso-telefono {
    display: block;
    margin: 16px 16px 0;
    padding: 16px;
    border-radius: 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #7c2d12;
  }
  .aviso-telefono h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
  .aviso-telefono > p { margin: 0; font-size: 14px; }
  .aviso-telefono .captura-texto { color: #9a3412; }
  .aviso-telefono .captura-fila button,
  .aviso-telefono .copiar { border-color: #fdba74; }
  .aviso-telefono .captura-fila button { background: #9a3412; }
  /* Fondo blanco, no transparente: sobre el naranja del aviso el borde solo no
     alcanza y «Copiar link» se lee como un enlace suelto, no como una acción. */
  .aviso-telefono .copiar { color: #7c2d12; background: #fff; }
}