/* ============ KAIA · cobertura de Lima ============
   El mapa del Perú pinta cumplimiento (semáforo). Este pinta volumen: cuántos
   Hyundai vive en cada distrito. Por eso una sola rampa del azul de la marca y
   no tres colores de estado: aquí no hay bueno ni malo, hay mucho y poco. */
.cgrid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:18px;align-items:start;margin-top:20px}
.cmap{position:relative;padding:0;overflow:hidden}
/* .cmap anula el padding de la tarjeta, asi que maptop tiene que poner el suyo
   o el titulo y la leyenda quedan pegados al borde. */
.cmap .maptop{padding:13px 16px;gap:12px;flex-wrap:wrap}
.lima{display:block;width:100%;height:auto;position:relative;z-index:1;margin-bottom:2px}

/* El relleno es contexto geografico, no la cifra: apenas insinua densidad.
   La cantidad la llevan los circulos, cuya area es proporcional al parque. */
.ld{fill:color-mix(in srgb,#2E86C1 calc(var(--i)*38%),#182833);
  stroke:rgba(255,255,255,.12);stroke-width:.7;stroke-linejoin:round;
  transition:fill .18s var(--ease),stroke .18s var(--ease);cursor:pointer}
.ld:hover,.ld.sel{stroke:#fff;stroke-width:1.5}

.bu{fill:rgba(93,190,240,.42);stroke:#7CCDF5;stroke-width:1.1;
  pointer-events:none;transition:fill .18s var(--ease),stroke .18s var(--ease)}
.ld.sel ~ .bu{}
.bu.sel{fill:rgba(255,200,69,.55);stroke:#FFC845;stroke-width:2}

/* Talleres: aspa, no punto. Un punto se confunde con una burbuja mas. */
.tw{cursor:pointer}
.tw-h{fill:#0A1620;opacity:.66}
.tw-x{stroke:#fff;stroke-width:2.4;stroke-linecap:round;fill:none}
.tw:hover .tw-x,.tw.sel .tw-x{stroke:#FFC845;stroke-width:3.2}
.tw:hover .tw-h,.tw.sel .tw-h{opacity:.85}

/* Leyenda de tamanos dentro del mapa: sin ella un circulo no es un numero. */
.lgc{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1.2}
.lgn{stroke:rgba(255,255,255,.28);stroke-width:1.2;stroke-dasharray:2 3}
.lgt{fill:rgba(255,255,255,.72);font:500 15px/1 var(--mono);dominant-baseline:middle}
.lgl{fill:rgba(255,255,255,.48);font:500 13px/1 var(--font);letter-spacing:.12em;
  text-transform:uppercase}

.cleg{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--font);
  letter-spacing:.06em;text-transform:uppercase;color:inherit;white-space:nowrap}
.cleg i{width:9px;height:9px;border-radius:50%;display:block;
  background:rgba(93,190,240,.42);border:1px solid #7CCDF5}
.cleg s{width:11px;height:11px;display:block;text-decoration:none;position:relative}
.cleg s::before,.cleg s::after{content:"";position:absolute;inset:50% 0 auto;height:1.8px;
  background:currentColor;border-radius:1px}
.cleg s::before{transform:rotate(45deg)}
.cleg s::after{transform:rotate(-45deg)}
/* Va sobre la tarjeta oscura del mapa, no sobre el fondo claro de la pagina. */
.cfoot{margin:0;padding:12px 16px 14px;font:400 11.5px/1.55 var(--font);
  color:rgba(196,209,224,.72);border-top:1px solid var(--navy-3);
  position:relative;z-index:1}

.cpanel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 20px;position:sticky;top:16px}
.cpanel h2{margin:.2rem 0 .3rem;font:600 1.18rem/1.25 var(--disp);color:var(--ink);
  text-wrap:balance}
.csub{margin:0 0 14px;font:400 .82rem/1.5 var(--font);color:var(--ink-2)}

/* Fila de taller: la barra es la carga, no el puntaje. */
.trow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.trow:first-of-type{border-top:0}
.trow:hover .tn{color:var(--accent)}
.tn{font:500 .84rem/1.3 var(--font);color:var(--ink)}
.tv{font:600 .84rem/1.3 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.tz{grid-column:1/-1;font:400 .71rem/1.4 var(--font);color:var(--ink-3)}
.tbar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--accent-soft);overflow:hidden;margin-top:3px}
.tbar i{display:block;height:100%;background:var(--accent);border-radius:2px}
.tnada{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:#FDF6E3;
  border:1px solid rgba(191,136,0,.28);font:400 .76rem/1.5 var(--font);color:#6B4E00}

.zrow{display:grid;grid-template-columns:1fr auto auto;gap:3px 12px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--line)}
.zn{font:500 .82rem/1.3 var(--font);color:var(--ink)}
.zk{font:500 .78rem/1.3 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.zv{font:600 .82rem/1.3 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}

/* Hallazgos: tres tarjetas, cada una con su cifra y de dónde sale. */
.chall{margin-top:26px}
.chg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px}
.chc{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 17px 17px}
.chc.dudo{background:var(--bg-3);border-style:dashed}
.chn{display:block;font:600 1.75rem/1 var(--disp);color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chc h3{margin:.45rem 0 .35rem;font:600 .93rem/1.3 var(--disp);color:var(--ink);text-wrap:balance}
.chc p{margin:0;font:400 .8rem/1.55 var(--font);color:var(--ink-2)}
.chf{display:inline-block;margin-top:9px;font:500 .64rem/1.35 var(--font);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

@media (max-width:900px){
  .cgrid{grid-template-columns:1fr}
  .cpanel{position:static}
}