/* Calor en Neiva por comunas: portada, historia corta por comuna y ficha para consultar. Usa los tokens de cuspide.css */
.cn-hero { padding: clamp(2rem,5vw,3.2rem) 0 1rem; }
.cn-hero h1 { font-size: clamp(1.9rem,4.4vw,3rem); line-height:1.1; margin:.6rem 0 .8rem; max-width:24ch; }
.cn-hero .lead { max-width:64ch; }
.cn-cifras { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.8rem; margin:1.4rem 0 0; }
.cn-cifra { background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:.95rem 1.05rem; }
.cn-cifra b { display:block; font-family:var(--display); font-weight:600; font-size:1.8rem; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums; }
.cn-cifra span { display:block; font-size:.95rem; color:var(--ink); margin-top:.25rem; }
.cn-cifra small { display:block; font-size:.84rem; color:var(--muted); margin-top:.35rem; }
.cn-contexto { margin:.9rem 0 0; font-size:.9rem; color:var(--muted); max-width:72ch; }
.cn-contexto i { color:var(--amber-600); margin-right:.3rem; }
.cn-acciones { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }

/* historia: texto que avanza a la izquierda, mapa fijo a la derecha; en celular el mapa arriba */
.cn-hs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(1.2rem,3vw,2.6rem); align-items:start; padding-bottom:2rem; }
.cn-hs-mapa { position:sticky; top:84px; height:calc(100vh - 100px); min-height:420px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#e9e6df; order:2; }
.cn-hs-texto { order:1; padding:18vh 0 26vh; }
.cn-mapa { position:absolute; inset:0; }
.cn-paso { background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem; margin:0 0 60vh; box-shadow:0 10px 30px -22px rgba(0,0,0,.4); transition:border-color .3s, box-shadow .3s; }
.cn-paso:last-child { margin-bottom:0; }
.cn-paso.activo { border-color:var(--green); box-shadow:0 14px 34px -20px rgba(46,82,56,.55); }
.cn-paso .num { font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-700); }
.cn-paso h2 { font-size:clamp(1.3rem,2.4vw,1.65rem); line-height:1.2; margin:.35rem 0 .6rem; }
.cn-paso p { margin:.5rem 0; }
.cn-paso .dato { font-family:var(--display); font-size:1.9rem; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }

/* leyenda y controles del mapa */
.cn-leyenda { position:absolute; left:10px; bottom:10px; z-index:2; background:rgba(252,248,240,.96); border:1px solid var(--line); border-radius:10px; padding:.5rem .7rem; font-size:.8rem; max-width:min(330px, calc(100% - 20px)); }
.cn-leyenda .t { font-weight:600; margin-bottom:.25rem; }
.cn-cajas { display:flex; flex-wrap:wrap; gap:.3rem .8rem; color:var(--ink); }
.cn-cajas i { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:4px; }
.cn-cajas i.lim { background:none; border-top:2px dashed #23271F; border-radius:0; width:16px; height:0; vertical-align:3px; }
.cn-leyenda [hidden], .cn-cajas [hidden] { display:none !important; }
.cn-aviso { position:absolute; inset:auto 10px 10px 10px; background:#fdecea; color:#8a1c12; border-radius:8px; padding:.5rem .7rem; font-size:.85rem; z-index:3; }
.cn-capas { position:absolute; top:10px; left:10px; z-index:2; display:flex; gap:.35rem; flex-wrap:wrap; max-width:calc(100% - 60px); }
.cn-capas button { font:inherit; font-size:.85rem; border:1px solid var(--line-strong); background:rgba(252,248,240,.96); color:var(--ink); border-radius:var(--r-pill); padding:.5rem .9rem; cursor:pointer; }
.cn-capas button[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:#fff; }

/* ficha para consultar */
.cn-ficha { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(1rem,3vw,2rem); align-items:start; }
.cn-ficha-mapa { position:relative; height:min(70vh,620px); min-height:380px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#e9e6df; }
.cn-calles { list-style:none; padding:0; margin:.6rem 0 0; }
.cn-calles li { border-bottom:1px solid var(--line); }
.cn-calles button { all:unset; box-sizing:border-box; width:100%; display:flex; gap:.6rem; align-items:center; padding:.5rem .2rem; cursor:pointer; }
.cn-calles button:hover, .cn-calles button:focus-visible { background:var(--bg-soft); outline:2px solid transparent; }
.cn-calles button:focus-visible { box-shadow:0 0 0 2px var(--green); border-radius:6px; }
.cn-calles button::before { content:""; width:14px; height:4px; border-radius:2px; background:#c0392b; flex:none; }
.cn-calles button::after { content:"Ver en el mapa →"; margin-left:auto; font-size:.8rem; color:var(--green); white-space:nowrap; }
.cn-nota { font-size:.88rem; color:var(--muted); }
.cn-descargas a { margin-right:1rem; }

/* comparacion entre comunas: barras horizontales, una serie; la comuna de la pagina en tinta, las demas en gris */
.cn-barras { margin:.8rem 0 .3rem; max-width:760px; }
.cn-fila { display:grid; grid-template-columns:minmax(9rem,14rem) 1fr 3.4rem; align-items:center; gap:.6rem; padding:3px 0; font-size:.9rem; border-radius:6px; color:inherit; text-decoration:none; }
.cn-fila:hover { background:var(--bg-soft); }
.cn-fila .nom { color:var(--muted); }
.cn-fila.esta .nom { color:var(--ink); font-weight:700; }
.cn-fila .pista { position:relative; height:14px; }
.cn-fila .bar { position:absolute; left:0; top:0; bottom:0; background:#b9b3a6; border-radius:0 4px 4px 0; }
.cn-fila.esta .bar { background:var(--ink); }
.cn-fila .ciudad { position:absolute; top:-3px; bottom:-3px; width:0; border-left:2px dashed var(--ink); opacity:.55; }
.cn-fila .val { text-align:right; font-variant-numeric:tabular-nums; }
.cn-tabla { border-collapse:collapse; font-size:.9rem; margin-top:.6rem; }
.cn-tabla th, .cn-tabla td { padding:.3rem .6rem; border-bottom:1px solid var(--line); }
.cn-tabla td.n { text-align:right; font-variant-numeric:tabular-nums; }

.cn-hacer { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.9rem; margin-top:1rem; }
.cn-hacer > div { background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:1rem 1.15rem; }
.cn-hacer h3 { font-size:1.08rem; margin:0 0 .35rem; }
.cn-hacer p { margin:0; color:var(--muted); }
.cn-limites { max-width:780px; }
.cn-limites li { margin:.45rem 0; }
details.cn-plegable > summary { cursor:pointer; font-weight:600; }

/* portada */
.cn-portada { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(1rem,3vw,2rem); align-items:start; }
.cn-portada-mapa { position:relative; height:min(72vh,640px); min-height:400px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#e9e6df; }
.cn-tarjetas { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.7rem; margin-top:1rem; }
.cn-tarjeta { display:block; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; color:var(--ink); text-decoration:none; }
.cn-tarjeta:hover, .cn-tarjeta:focus-visible { border-color:var(--green); }
.cn-tarjeta:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.cn-tarjeta b { font-family:var(--display); font-size:1.35rem; font-weight:600; }
.cn-tarjeta span { display:block; font-size:.88rem; color:var(--muted); }

@media (max-width: 860px) {
  .cn-hs { grid-template-columns:minmax(0,1fr); gap:0; }
  .cn-hs-mapa { order:0; top:72px; height:46vh; min-height:280px; border-radius:0 0 12px 12px; z-index:5; margin-inline:calc(-1 * var(--gutter,16px)); }
  .cn-hs-texto { order:1; padding:4vh 0 18vh; position:relative; z-index:6; }
  .cn-paso { margin-bottom:50vh; background:rgba(252,248,240,.97); }
  .cn-ficha, .cn-portada { grid-template-columns:minmax(0,1fr); }
  .cn-ficha-mapa, .cn-portada-mapa { height:60vh; }
  .cn-leyenda { bottom:40px; }
  .cn-hs-mapa .cn-leyenda { top:8px; bottom:auto; left:8px; right:8px; max-width:none; font-size:.75rem; padding:.4rem .55rem; }
  .cn-fila { grid-template-columns:minmax(7.5rem,10rem) 1fr 3rem; font-size:.85rem; }
}
@media (prefers-reduced-motion: reduce) { .cn-paso { transition:none; } }