/* ============================================================
   Plantilla de lectura de un número.
   Columna de 680px a 19px: 68 caracteres por línea. Texto en
   #dfe3ea (el blanco puro deslumbra en 1.600 palabras sobre
   negro). El índice vive en el margen, nunca compite con el texto.
   ============================================================ */
.nu_progreso{position:fixed;left:0;top:0;height:2px;width:0;z-index:60;
  background:var(--accent);pointer-events:none;transition:width .1s linear}
.nu_cargando{padding:6rem 0;text-align:center;color:var(--muted)}
.nu_cargando[hidden]{display:none}

/* ── cabecera del número ── */
.nu_cab{padding-top:clamp(2.5rem,6vh,4.5rem);padding-bottom:clamp(2rem,4vh,3rem)}
.nu_cab_g{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:end}
@media (min-width:900px){.nu_cab_g{grid-template-columns:1fr 28.75rem}}
.nu_cab_txt{display:flex;flex-flow:column;gap:1rem}
.nu_cab h1{margin:0;font-weight:800;text-transform:uppercase;
  font-size:clamp(2.1rem,calc(1.4rem + 2.6vw),3.5rem);
  letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.nu_sub{margin:0;font-size:clamp(1.05rem,1.35vw,1.31rem);line-height:1.5;
  color:var(--ink2);max-width:60ch}
.nu_sub:empty{display:none}
.nu_meta{display:flex;align-items:center;gap:.8rem;margin:.4rem 0 0;
  font-size:.81rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);flex-flow:row wrap}
.nu_meta b{color:var(--accent-text)}
.nu_meta i{font-style:normal;width:1px;height:12px;background:var(--line2)}
.nu_cab_media{border-radius:16px;overflow:clip;border:1px solid var(--line2);
  background:var(--card)}
.nu_cab_media img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.94)}

/* ── cuerpo ── */
.nu_cuerpo_g{display:grid;gap:4rem;align-items:start;
  padding-top:clamp(2rem,4vh,3rem);padding-bottom:clamp(3rem,7vh,5rem);
  border-top:1px solid var(--line)}
@media (min-width:1120px){
  .nu_cuerpo_g{grid-template-columns:13.75rem minmax(0,42.5rem) 1fr}
}
/* índice con el mismo efecto LineSidebar de las páginas legales: cada
   entrada se desplaza, colorea y alarga su marcador según la cercanía del
   puntero (--effect lo anima un rAF con suavizado exponencial) */
.nu_indice{position:sticky;top:2rem;max-height:60vh;overflow-y:auto;
  scrollbar-width:none}
.nu_indice::-webkit-scrollbar{display:none}
.nu_indice p{margin:0 0 .9rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.ls-lista{list-style:none;margin:0;padding:.3rem 0 .3rem 56px;
  display:flex;flex-direction:column;gap:14px}
.ls-item{--effect:0;position:relative;display:block}
.ls-item::before{content:"";position:absolute;inset:-5px -28px} /* diana amplia */
.ls-label{position:relative;display:block;font-size:.86rem;line-height:1.3;
  color:color-mix(in srgb,var(--accent) calc(var(--effect)*100%),var(--muted));
  transform:translateX(calc(var(--effect)*16px))}
.ls-marker{position:absolute;top:.62em;left:-56px;height:1px;width:44px;
  background:color-mix(in srgb,var(--accent) calc(var(--effect)*100%),#4a4f58);
  transform-origin:left center;
  transform:scaleX(calc(.7 + var(--effect)*.5))}
/* tic corto entre entradas, que también crece con la cercanía */
.ls-lista li:not(:last-child) .ls-item::after{content:"";position:absolute;
  top:calc(100% + 7px);left:-56px;height:1px;width:22px;background:#4a4f58;
  opacity:.5;transform-origin:left center;
  transform:scaleX(calc(.7 + var(--effect)*.6))}
@media (max-width:1119px){
  .nu_indice{position:static;max-height:none;
    border-bottom:1px solid var(--line);padding-bottom:1.4rem;margin-bottom:.5rem}
  .ls-lista{padding-left:44px}
  .ls-marker,.ls-lista li:not(:last-child) .ls-item::after{left:-44px}
}

.nu_texto{min-width:0;font-size:1.19rem;line-height:1.75;color:#dfe3ea}
.nu_texto p{margin:0 0 1.55rem;text-wrap:pretty}
.nu_texto b{color:var(--ink);font-weight:700}
.nu_texto h2{margin:4.5rem 0 1rem;padding-top:1.4rem;font-size:1.55rem;
  font-weight:800;line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;
  color:var(--ink);border-top:1px solid var(--line);position:relative;
  scroll-margin-top:2rem}
.nu_texto h2:first-child{margin-top:0}
@media (min-width:1180px){
  .nu_texto h2::before{content:"";position:absolute;left:-1.75rem;top:1.85rem;
    width:3px;height:14px;background:var(--accent)}
}
.nu_texto h3{margin:2.5rem 0 .8rem;font-size:1.19rem;font-weight:800;
  color:var(--ink);scroll-margin-top:2rem}
.nu_texto ul{margin:0 0 1.7rem;padding-left:1.6em;display:grid;gap:.62rem}
.nu_texto li{position:relative;line-height:1.68}
.nu_texto li::before{content:"";position:absolute;left:-1.15em;top:.62em;
  width:5px;height:5px;background:var(--accent)}
.nu_texto figure{margin:2.4rem 0}
.nu_texto figure img{width:100%;height:auto;border-radius:10px;
  border:1px solid var(--line)}
/* las figuras rompen hacia la derecha en pantallas anchas */
@media (min-width:1120px){.nu_texto figure{width:min(53.75rem,100%)}}

/* ── vecinos ── */
.nu_vecinos{display:grid;gap:1rem;padding-bottom:clamp(3rem,7vh,5rem)}
@media (min-width:720px){.nu_vecinos{grid-template-columns:1fr 1fr}}
.nu_vec{display:flex;flex-flow:column;gap:.35rem;padding:1.3rem 1.5rem;
  border:1px solid var(--line);border-radius:16px;background:var(--panel);
  transition:border-color .3s,transform .35s cubic-bezier(.625,.05,0,1)}
.nu_vec:hover{border-color:rgba(255,95,0,.4);transform:translateY(-3px)}
.nu_vec span{font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.nu_vec b{font-size:1.02rem;font-weight:700;line-height:1.3}
.nu_vec--sig{text-align:right;align-items:flex-end}

@media (max-width:719px){
  .nu_cab_g{text-align:center}
  .nu_cab_txt{align-items:center}
  .nu_meta{justify-content:center}
  .nu_texto{font-size:1.06rem}
  .nu_vec--sig{text-align:left;align-items:flex-start}
}