/* Datos clave de Brasil. Gráficos en tinta sobre papel (los colores de la marca no codifican datos);
   rojo y verde aparecen sólo donde hay candidatos. Usa las variables de estilos.css. */

.bloque { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--tinta); }
h1 + .bloque { margin-top: 30px; }
.bloque h2 { font-family: var(--titulos); font-weight: 700; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.15; margin: 0; }
/* la flecha del logo marca cada sección */
.bloque h2::before { content: ""; display: inline-block; width: .62em; height: .65em; margin-right: .45em;
                     background: url(/publico/flecha.svg) no-repeat center / contain; }
.como { margin: 8px 0 0; color: var(--gris); font-size: 15px; max-width: 70ch; }
.clave { margin: 8px 0 0; color: var(--tinta-2); font-size: 17px; max-width: 70ch; }   /* la clave de lectura, bajo el título de la página */
.clave + .clave { margin-top: 12px; }
.clave + .bloque { margin-top: 30px; }
.pie { margin: 18px 0 0; color: var(--gris); font-size: 14px; max-width: 720px; }

/* ---------- cifras: arriba, a todo el ancho, habitantes y electores; debajo, tres datos del censo.
   Primero el qué y debajo el cuánto; líneas finas de la trama del manual entre uno y otro. ---------- */
.cifras { --hilo: rgba(190, 8, 239, .45); /* línea fina de la trama del manual de marca */
          margin: 20px 0 0; max-width: 820px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cifras > div { padding: 18px 26px 6px; }
.cifras > div:first-child { grid-column: 1 / -1; padding: 6px 0 20px; border-bottom: 1px solid var(--hilo); }
.cifras > div:nth-child(2) { padding-left: 0; }
.cifras > div:nth-child(2), .cifras > div:nth-child(3) { border-right: 1px solid var(--hilo); }
.cifras dt { font-family: var(--titulos); font-weight: 700; font-size: 18px; line-height: 1.2; }
.cifras dd { margin: 6px 0 0; font-size: clamp(32px, 5vw, 50px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.cifras dd small { font-size: .5em; font-weight: 600; letter-spacing: 0; }
.cifras dd.detalle { margin-top: 5px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--gris); }
/* habitantes y electores en una misma frase, de un solo color: el número va con lo que cuenta, apenas más grande */
.cifras dd.frase { font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: var(--tinta); }
.cifras dd.frase b { font-size: 1.2em; font-weight: 600; }
/* la religión: a todo el ancho, con la barra de los grupos en el lugar del número */
.cifras > div.ancho { grid-column: 1 / -1; padding: 18px 0 6px; border-top: 1px solid var(--hilo); }
.cifras dd.grafico-cifras { margin-top: 12px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.35; }
.cifras dd.grafico-cifras .leyenda { margin-bottom: 8px; }

/* ---------- terna: tres cajas negras, cada una con dos líneas finas que se cruzan en una esquina,
   como la trama del manual de marca (la misma del panel de ingreso) ---------- */
.terna { margin: 22px 0 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.terna div { --hilo: rgba(190, 8, 239, .6); padding: 26px 40px 20px 22px; background-color: var(--tinta); color: #fff;
             background-image: linear-gradient(var(--hilo), var(--hilo)), linear-gradient(var(--hilo), var(--hilo));
             background-size: 1px 100%, 100% 1px; background-position: calc(100% - 12px) 0, 0 12px; background-repeat: no-repeat; }
.terna dt { font-family: var(--titulos); font-weight: 700; font-size: 16px; line-height: 1.2; }
.terna dd { margin: 8px 0 0; font-size: clamp(30px, 4.2vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.terna dd.detalle { margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.35; color: var(--gris-claro); }

/* ---------- mapa + estados de cada región ---------- */
.dos { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 20px 48px; align-items: center; }
.mapa { position: relative; margin: 0; }
.mapa svg { display: block; width: 100%; height: auto; }
/* bordes de estado apenas marcados: el mapa habla de regiones y las etiquetas tienen que leerse */
.mapa .estado { stroke: rgba(255, 255, 255, .3); stroke-width: .75px; vector-effect: non-scaling-stroke; }
.mapa .borde { fill: none; stroke: var(--papel); stroke-width: 2.5px; vector-effect: non-scaling-stroke; pointer-events: none; }
.etiqueta { position: absolute; transform: translate(-50%, -50%); text-align: center; line-height: 1.15; pointer-events: none; color: var(--tinta); }
.etiqueta.clara { color: #fff; }
.etiqueta b { display: block; font-family: var(--titulos); font-weight: 700; font-size: 13px; }
.etiqueta span { font-size: 13px; font-weight: 600; }

/* un cuadro por estado, del tamaño de su padrón y con el nombre adentro; cada región arriba de los suyos */
.arbol { position: relative; }
.arbol-reg { position: absolute; height: 22px; overflow: hidden; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--gris); }
.arbol-reg b { font-family: var(--titulos); font-weight: 700; font-size: var(--cuerpo, 15px); color: var(--tinta); }
.arbol-estado { position: absolute; box-sizing: border-box; overflow: hidden; padding: 6px 7px; border-radius: 3px; background: var(--tinta); color: #fff;
                font-size: 12.5px; line-height: 1.25; white-space: nowrap; cursor: default; outline: none; }
.arbol-estado b { font-weight: 600; }
.arbol-estado span { display: block; font-weight: 400; }
.arbol-estado.menor { padding: 4px 5px; font-size: 11px; }
.arbol-estado.chico { padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10.5px; line-height: 1.1; }
.arbol-estado.en-linea { flex-direction: row; gap: 4px; }
.arbol-estado.de-costado { writing-mode: vertical-rl; }
/* el estado señalado se marca a la vez en el mapa y en su cuadro */
.mapa .estado.activo { fill: var(--naranja); stroke: var(--papel); stroke-width: 1.5px; }
.arbol-estado.activo { background: var(--naranja); color: var(--tinta); }

/* ---------- primera vuelta ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; margin: 0 0 12px; padding: 0; list-style: none; }
.leyenda li { display: flex; align-items: center; gap: 7px; }
.cuadro { width: 12px; height: 12px; border-radius: 2px; background: var(--c); }

#vuelta { margin-top: 20px; --col: 136px; }
.mk-grupos { --col: 150px; }   /* las mismas barras, con grupos de municipios en vez de regiones (Población) */
.mk { position: relative; margin-top: 8px; padding-top: 20px; }
.mk-fila { display: grid; grid-template-columns: var(--col) 1fr; column-gap: 12px; align-items: center; margin-bottom: 2px; }
.mk-nombre { font-family: var(--titulos); font-weight: 700; font-size: 14px; line-height: 1.15; }
.mk-nombre small { display: block; font-family: var(--texto); font-weight: 400; font-size: 13px; color: var(--gris); }
.mk-barra { display: flex; gap: 2px; height: var(--h); }
.mk-barra > div { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; }
.mk-barra .l { background: var(--lula); padding-left: 8px; border-radius: 4px 0 0 4px; }
.mk-barra .o { background: var(--otros); color: var(--tinta); justify-content: center; font-size: 12.5px; cursor: default; outline: none; }
.mk-barra .o.chico { font-size: 10.5px; }
.mk-barra .o.de-costado { writing-mode: vertical-rl; line-height: 1; }
.mk-barra .o:hover, .mk-barra .o:focus-visible { background: #bdb8b5; }
.mk-barra .f { background: var(--flavio); justify-content: flex-end; padding-right: 8px; border-radius: 0 4px 4px 0; }
.mk-mitad { position: absolute; top: 0; bottom: 0; left: calc(var(--col) + 12px + (100% - var(--col) - 12px) / 2); width: 1px; background: var(--tinta); pointer-events: none; }
.mk-mitad::before { content: "50%"; position: absolute; top: -2px; left: 6px; font-size: 12px; font-style: normal; color: var(--gris); line-height: 1; }

/* ---------- reglas ---------- */
.reglas { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; }
.reglas li { border-top: 2px solid var(--tinta); padding-top: 12px; font-size: 15px; color: var(--tinta-2); }
.reglas strong { display: block; font-family: var(--titulos); font-weight: 700; font-size: 16px; color: var(--tinta); margin-bottom: 4px; line-height: 1.25; }

/* ---------- globo de datos ---------- */
.globo { position: fixed; z-index: 10; max-width: 260px; padding: 7px 10px; border-radius: 6px; background: var(--tinta); color: #fff;
         font-size: 13px; line-height: 1.4; pointer-events: none; }
.globo[hidden] { display: none; }
.globo b { font-weight: 600; }

@media (max-width: 760px) {
  .bloque { margin-top: 44px; }
  .cifras dt { font-size: 16px; }
  /* en un celular, los datos uno debajo del otro */
  .cifras { grid-template-columns: 1fr; }
  .cifras > div.ancho { border-top: 0; }
  .cifras > div, .cifras > div:first-child, .cifras > div:nth-child(2), .cifras > div:nth-child(3) {
    padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--hilo); }
  .cifras > div:first-child { padding-top: 4px; }
  .cifras > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .terna { grid-template-columns: 1fr; }
  .terna div { padding: 24px 36px 15px 16px; }
  .dos { grid-template-columns: 1fr; }
  .mapa { max-width: 420px; }
  #vuelta { --col: 92px; }
  .mk-grupos { --col: 118px; }
  .reglas { grid-template-columns: 1fr; }
}

/* ====================================================================================================
   Lo que sigue lo comparten las cinco páginas de Datos clave (Electoral, Historia, Latam, Población, Economía).
   ==================================================================================================== */

/* ---------- botonera: varias opciones, una elegida ---------- */
.botonera { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.botonera button, .mun-regiones button, .mun-zoom button {
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tinta); background: var(--papel); cursor: pointer;
  border: 1px solid var(--tinta); border-radius: 999px; padding: 4px 14px; }
.botonera button[aria-pressed="true"], .mun-regiones button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.botonera button:hover, .mun-zoom button:hover { background: var(--tinta); color: #fff; }
.mun-regiones button[aria-pressed="false"] { color: var(--gris); border-color: var(--gris-claro); }

/* ---------- primera vuelta por municipio: mapa y, a su derecha, el panel ---------- */
.mun { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 20px 32px; align-items: start; }
.mun-mapa { aspect-ratio: 10000 / 9399; }
.mun-mapa canvas { display: block; width: 100%; height: 100%; cursor: default; touch-action: pan-x pan-y; }
.mun-mapa canvas.acercado { cursor: grab; }
.mun-mapa canvas.acercado:active { cursor: grabbing; }
.mun-panel { display: grid; gap: 22px; }
.mun-grupo h3 { margin: 0 0 8px; font-family: var(--titulos); font-weight: 700; font-size: 14px; }
.mun-regiones { display: grid; gap: 6px; }
.mun-reg { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.mun-reg > b { font-family: var(--titulos); font-weight: 700; font-size: 14px; }
.mun-reg[hidden], .mun-opciones[hidden], .mun-nota[hidden] { display: none; }
.mun-val { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.mun-opciones { margin: 0 0 10px; }
.mun-opciones .botonera button { font-size: 12.5px; padding: 3px 10px; }
.mun-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--gris); }
.mun-zoom { display: flex; flex-wrap: wrap; gap: 6px; }
.mun-zoom button { width: 34px; padding: 4px 0; font-size: 16px; line-height: 1.3; }
.mun-ver[hidden] { display: none; }
.mun-capas.botonera { display: grid; gap: 6px; justify-items: start; }
/* dos mapas lado a lado (mapasPar en mapa.js): la primera vuelta y otra medida, cada uno con su panel debajo; arriba,
   el título del de la izquierda y los botones de las capas del de la derecha, a la misma altura */
.mapas-par { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 36px; }
/* cabeza y mapa en filas compartidas: aunque los botones ocupen dos renglones, los dos mapas empiezan a la misma altura */
.mapas-par > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.mapas-par .par-cabeza { min-height: 34px; display: flex; align-items: flex-end; }
.mapas-par .par-cabeza .grafico-titulo { margin: 0 0 4px; }
.mapas-par .par-cabeza .botonera { display: flex; flex-wrap: wrap; gap: 6px; }
/* align-content: sin él, la grilla estira el mapa más corto del par y su escala baja más que la del otro */
.mapas-par .mun { margin-top: 12px; grid-template-columns: minmax(0, 1fr); align-content: start; }
.mapas-par .mun-panel { grid-template-columns: 1fr; gap: 16px; }
.mapas-par .mun-grupo[hidden] { display: none; }
.mapas-par .mun-escala { max-width: 340px; }
/* el + y el − sobre el mapa (zoomSobreMapa: el par y el mapa de la portada), abajo a la izquierda (ahí no hay Brasil:
   es Chile y la Argentina) */
.mun-mapa { position: relative; }
.mun-mapa .mun-zoom { position: absolute; left: 0; bottom: 0; }
.mun-mapa .mun-zoom[hidden] { display: none; }
/* las regiones, con su correlación, sirven a los dos mapas: una franja a todo el ancho, debajo del par */
.mapas-par > .par-pie { grid-column: 1 / -1; grid-row: auto; display: block; margin-top: 24px; }
.par-pie .mun-reg-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.par-pie .mun-reg-titulo { margin: 0; }
.par-pie .mun-opciones { margin: 0; }
.par-pie .mun-regiones { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.par-pie .mun-reg { justify-content: flex-start; gap: 8px; }
.par-pie .mun-nota { flex-basis: 100%; margin: 0; }
.esc { margin-bottom: 8px; }
.esc b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.esc-tonos { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 2px; }
.esc-tonos i { height: 12px; border-radius: 2px; }
/* los números van en el límite entre dos tonos */
.esc-rotulos { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 2px; font-size: 12px; line-height: 1.2; color: var(--gris); }
.esc-rotulos span { justify-self: end; transform: translateX(calc(50% + 1px)); }
.globo .tenue { opacity: .7; }

/* ---------- texto al lado del gráfico: en una computadora van a la par; en un celular, uno debajo del otro ---------- */
.par { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px 48px; align-items: start; }
.par > .prosa { position: sticky; top: 64px; }
.prosa p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: var(--tinta-2); }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { font-weight: 600; color: var(--tinta); }
/* El dato principal va como una frase entera en letra de título: el cuánto y el qué pesan lo mismo. */
.prosa .titular, .titular { font-family: var(--titulos); font-weight: 700; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.3; margin: 0 0 14px; color: var(--tinta); }
.bloque > .titular { margin-top: 12px; max-width: 30em; }
.grafico { min-width: 0; }
.grafico-titulo { font-family: var(--titulos); font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.grafico-titulo small { display: block; font-family: var(--texto); font-weight: 400; font-size: 13.5px; color: var(--gris); }
.grafico + .grafico-titulo, .filas + .grafico-titulo, .dv + .grafico-titulo, .debajo + .grafico-titulo, .dos + .grafico-titulo { margin-top: 30px; }
.grafico-sub { margin: 0 0 6px; font-size: 13.5px; color: var(--gris); }
.controles { margin: 0 0 14px; }

/* ---------- gráfico centrado en su bloque, a buen tamaño, con el texto debajo a lo ancho del gráfico ---------- */
.centrado { max-width: 860px; margin: 26px auto 0; }
.prosa.debajo { margin-top: 22px; columns: 2 300px; column-gap: 44px; }
.prosa.debajo p { break-inside: avoid; }
.prosa.debajo:has(> p:only-child) { columns: auto; }
/* gráfico a la izquierda y el texto a la derecha, en un mismo renglón */
.par.invertido { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; }
.par.invertido > .prosa { position: static; }
.par.invertido .titular { margin: 0; }

/* ---------- líneas (comun.js) ---------- */
.grafico svg { display: block; overflow: visible; }
.grafico svg text { font-family: var(--texto); font-size: 12.5px; fill: var(--gris); }
.grafico svg text.bajo { font-size: 12px; }
.grafico svg text.bajo.pt { fill: var(--lula); }
.grafico svg text.bajo.rival { fill: var(--tinta); }
.grafico .ref { stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 2 4; }
.serie .linea { fill: none; stroke: var(--gris-claro); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.serie .hueco { fill: none; stroke: var(--gris-claro); stroke-width: 1.5; stroke-dasharray: 2 4; }
.serie circle { fill: var(--gris-claro); stroke: var(--papel); stroke-width: 1.5; }
.serie circle.toque, .serie.fuerte circle.toque, .serie.pt circle.toque, .serie.rival circle.toque, .serie.foco circle.toque { fill: transparent; stroke: none; }
.grafico svg .serie .nombre { fill: var(--tinta-2); font-size: 13px; }
.grafico svg .serie .valor { fill: var(--tinta); font-weight: 600; }
.serie.fuerte .linea, .serie.rival .linea { stroke: var(--tinta); stroke-width: 2.5; }
.serie.fuerte circle, .serie.rival circle { fill: var(--tinta); }
.grafico svg .serie.fuerte .nombre, .grafico svg .serie.rival .nombre { fill: var(--tinta); font-weight: 600; }
.serie.color .linea { stroke: var(--c); stroke-width: 2.2; }
.serie.color circle:not(.toque) { fill: var(--c); }
.grafico svg .serie.color .nombre { fill: var(--c); font-weight: 600; }
.serie.pt .linea { stroke: var(--lula); stroke-width: 2.5; }
.serie.pt circle { fill: var(--lula); }
.grafico svg .serie.pt .nombre { fill: var(--lula); font-weight: 600; }
/* señalar una serie: las demás se atenúan y la elegida toma el naranja de la marca */
.con-foco .serie:not(.foco) { opacity: .3; }
.serie.foco .linea { stroke: var(--naranja); stroke-width: 3; }
.serie.foco circle { fill: var(--naranja); }

/* ---------- filas con barra (regiones, estados) ---------- */
/* --col (ancho de la columna de nombres) se fija en el contenedor; una página puede cambiarlo con style="--col:…" */
.filas { --col: 132px; display: grid; gap: 6px; }
.fila { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; }
.fila > b { font-weight: 500; line-height: 1.2; }
.fila > b small { display: block; font-weight: 400; font-size: 12.5px; color: var(--gris); }
.fila.total > b { font-family: var(--titulos); font-weight: 700; }
.barra-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barra-h i { height: 18px; border-radius: 3px; background: var(--tinta); flex: none; }
.barra-h span { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fila.total .barra-h i { background: var(--gris-claro); }
/* barra partida en tramos (suman 100) */
.partida { position: relative; box-sizing: border-box; padding-right: var(--fuera, 0px); display: flex; gap: 2px; height: 26px; min-width: 0; }
.partida > div { min-width: 0; display: flex; align-items: center; padding-left: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; color: #fff; }
.partida > div:first-child { border-radius: 4px 0 0 4px; }
.partida > div:last-of-type { border-radius: 0 4px 4px 0; }
/* ningún tramo queda sin número: en letra más chica, de costado o, el último, afuera de la barra */
.partida > div.chico { justify-content: center; font-size: 10.5px; }
.partida > div.de-costado { writing-mode: vertical-rl; line-height: 1; }
.partida > .fuera { position: absolute; right: 0; top: 0; bottom: 0; width: var(--fuera); box-sizing: border-box; padding-left: 6px;
                    display: flex; align-items: center; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--tinta); }
.tono-1 { background: var(--tinta); }
.tono-2 { background: #6f6a6b; }
.partida > .tono-3 { background: #a6a8ab; color: var(--tinta); }
.partida > .tono-4 { background: #dcd9d7; color: var(--tinta); }
.cuadro.tono-3 { background: #a6a8ab; }
.cuadro.tono-4 { background: #dcd9d7; }

.barra-h i.claro { background: #a6a8ab; }
.barra-h.doble { --largo: 62%; }
/* cuatro gráficos chicos en cuadro */
.paneles { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; align-items: start; }
.paneles .leyenda { margin-bottom: 10px; }
.paneles .pie { margin-top: 12px; }
.dv-eje { display: grid; grid-template-columns: var(--col, 150px) minmax(0, 1fr); gap: 12px; margin-top: 8px; font-size: 12px; color: var(--gris); }
.dv-eje div { display: flex; justify-content: space-between; gap: 12px; }
.dv-eje div span:last-child { text-align: right; }

/* ---------- barras que salen del cero (correlaciones) ---------- */
.dv { --col: 150px; display: grid; gap: 14px; }
.dv-fila { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; }
.dv-nombre { font-weight: 600; line-height: 1.2; }
.dv-nombre small { display: block; font-weight: 400; font-size: 13px; color: var(--gris); }
.dv-pista { position: relative; display: grid; gap: 3px; padding: 3px 0; }
.dv-pista::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--tinta); }
.dv-linea { position: relative; height: 16px; }
.dv-linea i { position: absolute; top: 0; bottom: 0; background: var(--tinta); border-radius: 2px; }
.dv-linea i.lula { background: var(--lula); }
.dv-linea i.flavio { background: var(--flavio); }
.dv-linea i.gris { background: var(--gris-claro); }
.dv-linea span { position: absolute; top: 0; font-size: 12.5px; font-weight: 600; line-height: 16px; white-space: nowrap; }

/* ---------- casos: las comparaciones van juntas, una al lado de la otra, porque la gracia es verlas a la vez.
   Cada una apila, con aire entre una cosa y otra: qué se compara, la correlación, la nube de puntos y la lectura.
   Las cuatro partes comparten renglones (subgrid), así las nubes quedan a la misma altura aunque un título ocupe más. ---------- */
.casos { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; }
.caso { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.caso-titulo { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: 16.5px; line-height: 1.25; }
/* la correlación va en un solo renglón, con el número del mismo tamaño que el texto */
.caso-r { margin: 8px 0 14px; font-size: 14px; color: var(--gris); white-space: nowrap; }
.caso-r b { font-weight: 700; color: var(--tinta); }
.caso-texto { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
/* Latam: ocho comparaciones de siete países en dos filas de cuatro; cada una dice de qué país es, con su bandera */
.casos.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 30px; }
.casos.cuatro .caso-titulo { font-size: 15.5px; }
.caso-pais { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--texto); font-weight: 600; font-size: 14px; line-height: 1.2; }
.caso-pais small { font-weight: 400; font-size: 13px; color: var(--gris); white-space: nowrap; }
.bandera { flex: none; width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px var(--linea); }
/* un texto que ocupa el lugar de una comparación (México: dónde cambió el mapa) */
.caso-prosa { grid-row: span 4; align-self: start; }
.caso-prosa p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--tinta-2); }
.caso-prosa p:last-child { margin-bottom: 0; }
.caso-prosa p.titular { margin-bottom: 14px; font-size: 19px; line-height: 1.3; color: var(--tinta); }
/* países dentro de un bloque: título con bandera, bajada y sus comparaciones */
.sub { margin-top: 46px; }
.sub h3, .bloque h2:has(.bandera) { display: flex; align-items: center; gap: 10px; }
.sub h3 { margin: 0; font-family: var(--titulos); font-weight: 700; font-size: 19px; line-height: 1.2; }
.bloque h2:has(.bandera)::before { margin-right: 0; }
/* las comparaciones que abren la página de Latam van pegadas a la entrada, sin título propio */
.comparaciones { margin-top: 18px; }
@media (max-width: 1000px) { .casos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- nubes de puntos ---------- */
.nubes { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 24px 28px; }
.nube-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 6px; }
.nube-cab b { font-family: var(--titulos); font-weight: 700; font-size: 15px; line-height: 1.2; }
.nube-cab small { display: block; font-family: var(--texto); font-weight: 400; font-size: 13px; color: var(--gris); }
.nube-cab .r { font-family: var(--titulos); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; }

/* ---------- balotajes: una barra por elección ---------- */
.duelos { --col: 44px; display: grid; gap: 8px; position: relative; }
.duelos::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: calc(var(--col) + 12px + (100% - var(--col) - 12px) / 2); width: 1px; background: var(--tinta); }
.duelos::before { content: "50%"; position: absolute; top: -22px; left: calc(var(--col) + 12px + (100% - var(--col) - 12px) / 2); transform: translateX(-50%); font-size: 12px; color: var(--gris); }
.duelo-h { display: grid; grid-template-columns: var(--col) minmax(0, 1fr); gap: 12px; align-items: center; }
.duelo-h > b { font-family: var(--titulos); font-weight: 700; font-size: 15px; }
.duelo-h .partida > div:last-of-type { justify-content: flex-end; padding: 0 7px 0 0; }
/* quien ganó: su nombre y su % sobre un sombreado leve */
.duelo-h .gano { font-weight: 700; padding: 2px 8px; margin-left: -5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.duelo-h .partida > div:last-of-type .gano { margin: 0 -3px 0 0; }
.de-pt { background: var(--lula); }
.de-flavio { background: var(--flavio); }
.de-otro { background: #8b8687; }

/* ---------- enlaces dentro del texto ---------- */
.prosa a, .como a { color: inherit; text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .mun { grid-template-columns: 1fr; }
  .mun-panel { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .mun-grupo { grid-column: 1 / -1; }
  .mun-grupo.mun-ver, .mun-grupo.mun-zoom { grid-column: auto; }
  .mun-escala { max-width: 340px; }
  .mun-capas.botonera { display: flex; flex-wrap: wrap; }
  .mun-regiones { grid-template-columns: 1fr 1fr; gap: 6px 22px; max-width: 420px; }
  .mun-nota { max-width: 420px; }
  .mapas-par { grid-template-columns: minmax(0, 1fr); }
  .mapas-par > div + div { margin-top: 30px; }
  .par-pie .mun-regiones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .par, .par.invertido { grid-template-columns: 1fr; }
  /* barras con tramos muy finos: el nombre arriba y la barra debajo, a todo el ancho */
  .filas.apiladas { gap: 10px; }
  .filas.apiladas .fila { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .filas.apiladas .fila > b small { display: inline; margin-left: 6px; }
  .casos, .casos.cuatro { grid-template-columns: 1fr; gap: 40px; }
  .sub { margin-top: 38px; }
  .par > .prosa { position: static; }
  .nubes { grid-template-columns: 1fr; }
  .filas, .dv { --col: 104px; }
  .barra-h.doble { --largo: 40%; }
  .paneles { grid-template-columns: minmax(0, 1fr); gap: 34px; }   /* minmax: un gráfico dibujado más ancho no estira la columna */
  #tamanos, #voto, #voto + .dv-eje { --col: 132px !important; }
}

/* Descargar y compartir un gráfico (compartir.js): una línea chica, a la derecha, debajo de cada gráfico */
.cmp-barra { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 6px 0 2px; font: 500 13px/1.3 var(--texto); color: var(--gris); }
.cmp-barra > button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cmp-barra > button:hover, .cmp-barra > button:focus-visible { color: var(--tinta); }
.cmp-barra svg { width: 15px; height: 15px; }
.cmp-estado:empty { display: none; }
.cmp-estado { color: var(--tinta-2); }
.cmp-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; min-width: 210px; padding: 6px; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 8px 24px rgb(35 31 32 / 0.14); }
.cmp-menu button { padding: 8px 10px; border: 0; border-radius: 5px; background: none; text-align: left; font: 500 14px/1.3 var(--texto); color: var(--tinta); cursor: pointer; }
.cmp-menu button:hover, .cmp-menu button:focus-visible { background: var(--pista); }
.caso > .cmp-barra { margin-top: 10px; }
/* la tarjeta reparte sus partes en renglones compartidos (subgrid): con la barra son cinco, si no se encima con el texto */
.caso:has(> .cmp-barra), .casos:has(.cmp-barra) .caso-prosa { grid-row: span 5; }

/* De la primera vuelta al balotaje (latam.js): una fila por balotaje. Columnas: balotaje, votos a otros candidatos en la
   primera vuelta (barra) y los dos finalistas, cada uno con sus porcentajes y la correlación al final, del tamaño del texto. */
.ps-filas { margin: 22px 0 34px; display: grid; gap: 0; }
.ps-fila { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.25fr); gap: 6px 22px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.ps-fila > b { font-weight: 600; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.ps-fila > b small { flex-basis: 100%; padding-left: 32px; font-weight: 400; font-size: 12.5px; color: var(--gris); }
.ps-fila .barra-h i { height: 14px; min-width: 2px; }
.ps-fin { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
.ps-fin b { font-weight: 600; grid-column: 1; }
.ps-fin span { grid-column: 1; font-size: 12.5px; color: var(--gris); }
.ps-fin strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-cab { border-bottom: 1px solid var(--tinta); padding-top: 0; font-size: 12.5px; font-weight: 600; color: var(--gris); align-items: end; }
.ps-cab .ps-dos { grid-column: span 2; }
.ps-ahora { background: var(--pista); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
@media (max-width: 760px) {
  .ps-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ps-fila > b, .ps-fila > .barra-h { grid-column: span 2; }
  .ps-cab > span:nth-child(2) { display: none; }
  .ps-cab .ps-dos { grid-column: span 2; }
}