/* ═══════════════════════════════════════════════════════════
   NeuroFluxIA V3 — Dónde trabajamos
   Un directorio de 242 nombres. Todo el diseño va a que se
   pueda BARRER con la vista: quien entra busca su pueblo, no
   viene a leer. De ahí que sean listas separadas por puntos
   medios y no tarjetas: 242 tarjetas son cuatro pantallas de
   scroll para encontrar una línea.
   ═══════════════════════════════════════════════════════════ */

/* Las comarcas fluyen en columnas de periódico. Con `columns` en
   vez de grid, un grupo de 32 y otro de 1 no dejan huecos muertos:
   el texto se reparte solo. `break-inside` evita que una comarca
   se parta por la mitad entre dos columnas, que es lo único que
   rompe la lectura aquí. */
.dir{columns:2 260px;column-gap:clamp(1.8rem,3.5vw,3rem);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:1100px){.dir{columns:3 260px}}

.dir-grupo{break-inside:avoid;margin:0 0 clamp(1.4rem,2.4vw,2rem);padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.dir-grupo:last-child{border-bottom:0}

.dir-grupo h2{margin-bottom:0 !important;
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;margin:0 0 .55rem;
}
.dir-meta{margin:.1rem 0 .55rem;display:flex;flex-wrap:wrap;gap:.15rem .7rem;align-items:baseline}
.dir-n{
  font-family:var(--f-ui);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.1em;color:var(--ink-2);
}

/* Los nombres van seguidos, separados por un punto medio, no en
   lista vertical: 242 renglones son 242 renglones. */
.dir-lista{list-style:none;margin:0;padding:0;font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2)}
.dir-lista li{display:inline}
/* El punto va DETRÁS de cada nombre, no delante del siguiente: puesto
   delante, al envolver la línea el separador caía al principio del
   renglón y cada comarca parecía empezar con un punto suelto. */
.dir-lista li:not(:last-child)::after{content:"·";margin:0 .35rem 0 .45rem;color:var(--line-2)}
.dir-lista a{color:var(--ink-2);text-decoration:none}
.dir-lista a:hover{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}

/* La comarca de casa se marca, porque es la única donde la visita
   presencial no cuesta nada y eso es lo que la diferencia. */
.dir-grupo--casa h2{color:var(--gold-text)}
.dir-nota{font-size:var(--fs-xs);color:var(--ink-2);font-style:italic}

.dir-pie{margin-top:clamp(1.6rem,3vw,2.4rem);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;max-width:70ch}
.dir-pie a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.dir-pie a:hover{color:var(--gold)}