:root {
  color-scheme: light dark;

  --bg: #f8fafc;
  --surface: #ffffff;
  --fg: #1e293b;
  --fg-muted: #475569; /* 7,2:1 sobre --bg */
  --fg-subtle: #5b6577; /* 5,6:1: metadatos, nunca texto largo */
  --border: #e2e8f0;
  --border-strong: #8492a6; /* 3,2:1: bordes de controles (WCAG 1.4.11) */
  /* Los dos niveles de línea de una ficha (docs/23, fase 1), como valores
     fijos sobre la superficie y no con color-mix(): la fuerte arriba de cada
     bloque (--border-strong al 50 %) y la tenue entre las filas de adentro
     (--border al 60 %). */
  --border-block: #c2c9d3;
  --border-soft: #edf1f6;
  --accent: #2563eb; /* 5,2:1 sobre --surface */
  --accent-soft: #eff4ff;
  --on-accent: #ffffff;

  /* Mapa: países neutros por defecto. Desde la D1 (2026-10-31; docs/06, "El
     mapa con más vida"), la tierra casi blanca con las fronteras en gris sobre
     un mar acero claro: antes el mar era el fondo de la página y la tierra un
     gris pálido (#D3DBE5) con fronteras blancas, y el mapa se veía lavado. El
     mar va hacia el cian, lejos del azul del acento y de la rampa del mapa
     temático, para que un país pintado no se confunda con el agua. Todo lo
     que se pinta gana contraste contra la tierra (docs/06). --mar-velo: el
     mar casi opaco, detrás de los créditos. --sombra-pais: la sombra de un
     país elegido, que se levanta del mapa. */
  --mar: #d6e3eb;
  --mar-velo: rgb(214 227 235 / 0.88);
  --land: #f8fafc;
  --land-hover: #e2e8f0;
  --land-border: #a9b5c5;
  --territory: #e9edf3;
  --territory-hatch: #c9d3de;
  --sombra-pais: rgb(15 23 42 / 0.2);
  /* El borde de un país elegido, levantado: el acento con menos luz. */
  --accent-borde: #1d4ed8;
  /* Rayas de una zona en disputa sobre el color de su país. */
  --zone-hatch: #8491a3;
  --zone-hatch-hover: #4f5b6d;
  --point: #64748b;

  /* Estado de la relación (F3): escala contenida, sin rojo semáforo. */
  --rel-alianza: #2f7d6d;
  --rel-cooperacion: #6c9d90;
  --rel-neutral: #94a3b8;
  --rel-tension: #b7791f;
  --rel-conflicto: #9b3b3b;
  /* Los dos bandos de un conflicto en el mapa (decisión 4 de Diego; docs/23,
     fase 7). El primero, más oscuro que el rojo del cartel, con su propio
     token para no cambiar el cartel: 6,86:1 contra la tierra y 2,27:1 contra
     el segundo. El segundo: 3,02:1 contra la tierra (el #D08A8A del plan daba
     1,96:1; este es el mismo rojo con menos luz, hasta 3:1). */
  --rel-conflicto-1: #7a2a2a;
  --rel-conflicto-2: #ac696a;
  /* "Conflicto armado activo" en el mapa de "En guerra ahora" (fase 7): el
     ámbar de la tensión con menos luz, 3,18:1 contra la tierra (el de la
     tensión da 2,61:1). La guerra va con --rel-conflicto, 4,88:1. */
  --rel-tension-mapa: #a66b12;
  /* El que está mejor en la comparación del par (fase 5): el verde de la
     alianza, 4,9:1 sobre la superficie. Siempre con un tilde al lado. */
  --ok: var(--rel-alianza);
  /* El voto de cada país en una votación de la ONU (fase 10): una ficha con el
     texto ("Sí", "No", "Abstención") y su color de fondo, nunca solo el color.
     El texto del sí es el verde del "mejor" con menos luz: el de --ok da
     4,33:1 sobre su fondo y este, 5,53:1. El no, 5,76:1. */
  --voto-si: #276b5d;
  --voto-si-bg: #e8f3f0;
  --voto-si-borde: #cfe4dd;
  --voto-no: var(--rel-conflicto);
  --voto-no-bg: #f6e9e9;
  --voto-no-borde: #ecd3d3;
  --voto-abs-bg: #eef1f5;

  /* Rampa del mapa temático (fase 8): cinco azules del tono del acento
     (OKLCH 262°), todos más oscuros que la tierra y a pasos parejos de
     luminosidad (0,81 a 0,42). Medidos en OKLab: la primera queda a 0,092 de la
     tierra (1,29:1; la de la fase 1 daba 0,039 y 1,12:1) y cada una a más de
     0,10 de la anterior (1,41:1 o más). La quinta no es el acento: el acento es
     lo elegido, que va con su borde (docs/06). */
  --tema-1: #aac2ec;
  --tema-2: #81a3e2;
  --tema-3: #5684da;
  --tema-4: #2e62c9;
  --tema-5: #19459c;

  /* Tiers (docs/05): 2 curado, 1 estructural, 0 comparable. El tier 1 son
     las contrapartes del país elegido (F3): 1,93:1 contra la tierra y 1,91:1
     contra el acento. El hover es un valor fijo, sin color-mix(), que un
     WebView viejo no entiende. */
  --tier-2: var(--accent);
  --tier-1: #759cf0;
  --tier-1-hover: #688bd5;
  --tier-0: var(--land);

  /* La línea entre los dos países del par (ajuste A; docs/06, "La línea del
     par"): el acento llevado hacia el color del texto, porque corre sobre los
     dos países, que van con el acento, y con el acento mismo se perdía ahí y
     solo se veía el halo, como una línea doble. 2,0:1 contra el acento, 7,4:1
     contra la tierra y 9,9:1 contra el fondo. */
  --par-linea: #1e3a8a;
  /* Desde la D1 la línea es una cinta que se ensancha hacia el medio, con un
     degradé de --par-linea en las puntas a --par-linea-alto en lo alto del
     arco (el índigo: con un azul más vivo, sobre los dos países, que van con
     el acento, la cinta se perdía y quedaba su borde, una línea doble; el
     índigo da 1,92:1 contra el acento), y su sombra sobre el mapa
     (--par-sombra, con la opacidad en el degradé): da la altura del arco. */
  --par-linea-alto: #3730a3;
  --par-sombra: #0f172a;

  /* Los controles que flotan sobre el mapa (el buscador, los botones de la
     barra y el de "En guerra"; ajuste B): apenas una sombra, que los despega
     del mapa cuando pasan por encima de un país. */
  --sombra-control: 0 1px 2px rgb(15 23 42 / 0.05), 0 2px 8px rgb(15 23 42 / 0.06);
  /* El anillo del foco de un campo: el borde del acento más un halo suave. */
  --anillo: rgb(37 99 235 / 0.22);

  /* Las fichas desde la D2 (2026-10-31; docs/06, "Las fichas (D2)"). La
     franja de los títulos de sección: un tono del acento, con el texto en el
     azul más oscuro (9,1:1) y el icono en el del borde del acento (5,9:1). Las
     tarjetas (las cuatro cifras, los cinco grupos, el comercio): un relleno
     apenas más oscuro que la ficha, con el borde de siempre. El segmentado:
     la pista y, encima, lo elegido en la superficie. */
  --seccion-bg: #eaf1fe;
  --seccion-fg: #1e3a8a;
  --seccion-icono: #1d4ed8;
  --tarjeta: #f8fafc;
  --pista: #eef2f6;
  /* Las tarjetas de las cifras: un gris más marcado, sin borde (5,2:1 los
     metadatos encima). */
  --kpi-bg: #eef2f6;
  /* Los dos países de la comparación del par (D3, 2026-10-31; docs/06, "El
     par y el tablero (D3)"): el primero en violeta y el segundo en naranja,
     los mismos en toda la comparación y en el tablero. Lejos del verde de
     "mejor", de los rojos de los conflictos y del azul de los vínculos;
     contra la ficha, 5,70:1 y 3,56:1 (sobre --kpi-bg, 5,07:1 y 3,16:1), y
     entre los dos, ΔE 33 con daltonismo simulado (validate_palette.js). Solo
     marcan barras y muestras, nunca un texto. */
  --pais-a: #7c3aed;
  --pais-b: #ea580c;

  /* Alto visible de la ficha plegada en móvil. */
  --peek: calc(7rem + env(safe-area-inset-bottom));
  /* Ancho del panel de la derecha en la computadora (docs/23, fase 3). Desde
     el ajuste B crece con la pantalla (abajo, desde 1024 px). */
  --panel-w: 22rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --surface: #171a1f;
    --fg: #e5e7eb;
    --fg-muted: #a3abb7; /* 7,3:1 sobre --surface */
    --fg-subtle: #8b94a1; /* 5,3:1 */
    --border: #2a2f37;
    --border-strong: #646c7a; /* 3,3:1 */
    --border-block: #3e434d;
    --border-soft: #22272d;
    --accent: #6ea8fe; /* 7,1:1 sobre --surface */
    --accent-soft: #1b2436;
    --on-accent: #0b1220;

    /* El mar, azul noche, más oscuro que la página; la tierra gris con las
       fronteras más claras que ella. */
    --mar: #0b1119;
    --mar-velo: rgb(11 17 25 / 0.85);
    --land: #272e38;
    --land-hover: #36404d;
    --land-border: #4a5462;
    --territory: #1b2129;
    --territory-hatch: #343b45;
    --sombra-pais: rgb(0 0 0 / 0.55);
    --accent-borde: #a5c8ff;
    --zone-hatch: #6b7686;
    --zone-hatch-hover: #a3abb7;
    --point: #9aa4b2;

    --rel-alianza: #5fb3a0;
    --rel-cooperacion: #86b7aa;
    --rel-neutral: #7b8594;
    --rel-tension: #d69e4a;
    --rel-conflicto: #d47a72;
    /* En oscuro el primer bando es el más claro: más oscuro que el segundo no
       llega a 3:1 contra la tierra. 6,31:1 contra la tierra y 2,09:1 contra
       el segundo, que da 3,01:1 (el #8F4E4E del plan daba 2,04:1). */
    --rel-conflicto-1: #eba59e;
    --rel-conflicto-2: #ac6968;
    /* La tensión ya llega: 5,36:1 contra la tierra; la guerra, 4,14:1. */
    --rel-tension-mapa: var(--rel-tension);
    /* Los votos de la ONU: 5,66:1 el sí y 4,85:1 el no sobre su fondo. */
    --voto-si: #5fb3a0;
    --voto-si-bg: #16302a;
    --voto-si-borde: #24493f;
    --voto-no: #d47a72;
    --voto-no-bg: #3a2020;
    --voto-no-borde: #573030;
    --voto-abs-bg: #22272d;

    /* En oscuro, más claro es más: de 0,43 a 0,83 de luminosidad. La primera
       queda a 0,123 de la tierra (1,57:1) y cada una a 0,10 de la anterior. */
    --tema-1: #3a5076;
    --tema-2: #4f6ba0;
    --tema-3: #6689c9;
    --tema-4: #85a8e7;
    --tema-5: #afc8f6;

    --tier-1: #4368a6; /* 2,28:1 contra la tierra y 2,31:1 contra el acento */
    --tier-1-hover: #5b7bb0;
    /* En oscuro, hacia el texto es más claro: 2,0:1 contra el acento, 10,4:1
       contra la tierra y 15,2:1 contra el fondo. */
    --par-linea: #dbeafe;
    --par-linea-alto: #ffffff;
    --par-sombra: #000000;

    --sombra-control: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.25);
    --anillo: rgb(110 168 254 / 0.3);

    /* La franja, un azul noche apenas más claro que la ficha; el texto, 11,6:1. */
    --seccion-bg: #1c2a44;
    --seccion-fg: #dce7ff;
    --seccion-icono: #6ea8fe;
    --tarjeta: #1d2127;
    --pista: #111317;
    --kpi-bg: #22272e;
    /* 5,40:1 y 5,42:1 contra la ficha (sobre --kpi-bg, 4,65:1 y 4,67:1);
       ΔE 29 entre los dos. */
    --pais-a: #9a7af7;
    --pais-b: #e0702c;
  }
}
/* Las páginas para los buscadores (scripts/paginas.ts). Los tokens de color
   (:root, claro y oscuro) los antepone el generador, copiados de
   src/app/globals.css: así siguen siempre al sitio. Sin JavaScript. */

@font-face {
  font-family: 'Inter Bilateral';
  src: url('/_next/static/media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font: 400 17px/1.65 'Inter Bilateral', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'cv11';
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: -9999px;
}
.saltar:focus {
  left: 16px;
  top: 12px;
  z-index: 10;
  background: var(--surface);
  padding: 8px 12px;
}

.ancho {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 20px;
}

/* La barra de arriba: la marca y el botón al mapa. */
.cabecera {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cabecera .ancho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.marca {
  display: inline-flex;
  color: var(--fg);
  padding: 6px 0;
}
.marca svg {
  height: 26px;
  width: auto;
}
.marca .marca-iso {
  color: var(--accent);
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.boton svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.boton-principal {
  background: var(--accent);
  color: var(--on-accent);
}
.boton-principal:hover {
  background: var(--accent-borde);
}
.boton-borde {
  border: 1px solid var(--border-strong);
  color: var(--fg);
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
}
.boton-borde .corto {
  display: none;
}
.boton-borde:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* El recorrido. */
.migas {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 14px;
  color: var(--fg-subtle);
}
.migas li + li::before {
  content: '›';
  margin-right: 8px;
  color: var(--fg-subtle);
}
.migas a {
  color: var(--fg-muted);
}

/* El encabezado: título, datos y mapa. */
.portada {
  display: grid;
  gap: 24px;
  padding: 16px 0 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .portada {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
  }
}
/* Una página índice: el encabezado solo, sin mapa. */
@media (min-width: 900px) {
  .portada-sola {
    grid-template-columns: minmax(0, 48rem);
  }
}
.que-es {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
h1 {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
h1 .bandera {
  width: 44px;
  height: 33px;
}
h1 .nombre-pais {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
h1 .punto {
  color: var(--fg-subtle);
  font-weight: 400;
}
.oficial {
  margin: 10px 0 0;
  font-size: 18px;
  color: var(--fg-muted);
}
.region {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--fg-subtle);
}
.bajada {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 38rem;
}
.acciones {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.bandera {
  display: inline-block;
  width: 28px;
  height: 21px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--border);
  object-fit: cover;
  vertical-align: middle;
  flex: none;
}

/* El mapa chico: usa el mapa del sitio (data/paginas/mapa.<hash>.svg) con
   <use>, así cada página pesa unos bytes. Tocarlo abre el mapa interactivo. */
.mapa {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mar);
  box-shadow: inset 0 0 0 1px var(--border);
}
.mapa svg {
  display: block;
  width: 100%;
  height: auto;
}
.mapa .m-mundo {
  fill: var(--land);
  stroke: var(--land-border);
  stroke-width: 0.6px;
}
.mapa .m-rel {
  fill: var(--tier-1);
  stroke: var(--land-border);
  stroke-width: 0.6px;
}
.mapa .m-sel {
  fill: var(--accent);
  stroke: var(--accent-borde);
  stroke-width: 0.8px;
}
.mapa .m-linea {
  fill: none;
  stroke: var(--par-linea);
  stroke-width: 3px;
  stroke-linecap: round;
}
.mapa .m-punta {
  fill: var(--surface);
  stroke: var(--par-linea);
  stroke-width: 2.5px;
}
/* Un organismo: los suspendidos, en el acento lavado; los países de los que
   una entidad de la época era solo una parte, en el azul medio lavado. */
.mapa .m-susp {
  fill: var(--accent);
  fill-opacity: 0.45;
  stroke: var(--accent-borde);
  stroke-width: 0.8px;
}
.mapa .m-parcial {
  fill: var(--tier-1);
  fill-opacity: 0.6;
  stroke: var(--land-border);
  stroke-width: 0.6px;
}
/* Una guerra o un conflicto: los dos bandos en los dos rojos (decisión 4 de
   Diego). En el mapa interactivo, los que estuvieron en los dos bandos, los que
   pusieron tropas y el lugar donde ocurre van rayados; acá, sin rayas, con el
   borde y la transparencia, y la leyenda lo dice con palabras. */
.mapa .m-a,
.mapa .m-b,
.mapa .m-tropas-a,
.mapa .m-tropas-b {
  stroke: var(--land-border);
  stroke-width: 0.6px;
}
.mapa .m-a {
  fill: var(--rel-conflicto-1);
}
.mapa .m-b {
  fill: var(--rel-conflicto-2);
}
.mapa .m-dos {
  fill: var(--rel-conflicto-2);
  stroke: var(--rel-conflicto-1);
  stroke-width: 2px;
}
.mapa .m-tropas-a {
  fill: var(--rel-conflicto-1);
  fill-opacity: 0.35;
}
.mapa .m-tropas-b {
  fill: var(--rel-conflicto-2);
  fill-opacity: 0.4;
}
.mapa .m-lugar {
  fill: var(--land);
  stroke: var(--rel-conflicto);
  stroke-width: 2px;
}
/* Un producto: la rampa del mapa temático. */
.mapa .m-t1,
.mapa .m-t2,
.mapa .m-t3,
.mapa .m-t4,
.mapa .m-t5 {
  stroke: var(--land-border);
  stroke-width: 0.6px;
}
.mapa .m-t1 {
  fill: var(--tema-1);
}
.mapa .m-t2 {
  fill: var(--tema-2);
}
.mapa .m-t3 {
  fill: var(--tema-3);
}
.mapa .m-t4 {
  fill: var(--tema-4);
}
.mapa .m-t5 {
  fill: var(--tema-5);
}

/* La leyenda del mapa chico y las muestras de color de las listas: cada una
   con el estilo con que el mapa pinta, y siempre con el texto al lado. */
.leyenda-mapa {
  margin: 10px 2px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 14px;
  color: var(--fg-muted);
}
.leyenda-mapa li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.muestra {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--land-border);
  background: var(--land);
}
.mu-sel {
  background: var(--accent);
  box-shadow: none;
}
.mu-susp {
  background: var(--accent);
  opacity: 0.5;
  box-shadow: none;
}
.mu-rel {
  background: var(--tier-1);
  box-shadow: none;
}
.mu-parcial {
  background: var(--tier-1);
  opacity: 0.6;
}
.mu-a {
  background: var(--rel-conflicto-1);
  box-shadow: none;
}
.mu-b {
  background: var(--rel-conflicto-2);
  box-shadow: none;
}
.mu-dos {
  background: var(--rel-conflicto-2);
  box-shadow: inset 0 0 0 2px var(--rel-conflicto-1);
}
.mu-tropas-a {
  background: color-mix(in srgb, var(--rel-conflicto-1) 35%, var(--land));
}
.mu-tropas-b {
  background: color-mix(in srgb, var(--rel-conflicto-2) 40%, var(--land));
}
.mu-lugar {
  box-shadow: inset 0 0 0 2px var(--rel-conflicto);
}
.mu-t1 {
  background: var(--tema-1);
  box-shadow: none;
}
.mu-t2 {
  background: var(--tema-2);
  box-shadow: none;
}
.mu-t3 {
  background: var(--tema-3);
  box-shadow: none;
}
.mu-t4 {
  background: var(--tema-4);
  box-shadow: none;
}
.mu-t5 {
  background: var(--tema-5);
  box-shadow: none;
}
.mapa-pie {
  margin: 8px 2px 0;
  font-size: 13px;
  color: var(--fg-subtle);
}

/* El cartel de conflicto. */
.cartel {
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 4px solid var(--rel-conflicto);
  background: var(--voto-no-bg);
}
.cartel strong {
  color: var(--rel-conflicto);
}
.cartel p {
  margin: 4px 0 0;
  font-size: 15px;
}

/* El cuerpo: una columna para leer y, en una pantalla ancha, el índice de la
   página a la derecha, quieto mientras se baja. */
.columnas-pagina {
  display: grid;
  gap: 48px;
}
.indice {
  display: none;
}
@media (min-width: 1100px) {
  .columnas-pagina {
    grid-template-columns: minmax(0, 48rem) 15rem;
    justify-content: space-between;
  }
  .indice {
    display: block;
    position: sticky;
    top: 24px;
    align-self: start;
    margin-top: 40px;
    font-size: 15px;
  }
  .indice p {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
  }
  .indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--border);
  }
  .indice a {
    display: block;
    padding: 6px 0 6px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--fg-muted);
    text-decoration: none;
    line-height: 1.35;
  }
  .indice a:hover {
    color: var(--accent);
    border-left-color: var(--accent);
  }
}

/* El cuerpo: una columna para leer. */
.cuerpo {
  max-width: 48rem;
  padding-bottom: 48px;
}
section {
  margin-top: 40px;
}
h2 {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--seccion-bg);
  color: var(--seccion-fg);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.005em;
}
h3 {
  margin: 28px 0 6px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 650;
}
h3 + .meta {
  margin-top: 0;
}
h4 {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
p {
  margin: 0 0 14px;
}
.meta {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--fg-subtle);
}
.entrada {
  font-weight: 500;
}
.citas {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--fg-subtle);
}
.citas a {
  color: var(--fg-muted);
}
.ver-tambien {
  margin: 6px 0 0;
  font-size: 15px;
}
.meta-lista {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--fg-muted);
}
/* Muchos enlaces en una oración (las relaciones de un país): se leen como
   texto y no ocupan una fila cada uno. */
.enlaces {
  line-height: 1.9;
}

/* "Ver los N": sin JavaScript, un <details>; abierto, el botón se va y la
   lista sigue. */
details.mas {
  margin-top: 12px;
}
details.mas > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
}
details.mas > summary::-webkit-details-marker {
  display: none;
}
details.mas > summary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
details.mas[open] > summary {
  display: none;
}
details.mas[open] {
  margin-top: 0;
}
.filas.sigue li:first-child {
  border-top: 0;
}

/* Las cifras clave, como las tarjetas de la ficha. */
.tarjetas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tarjetas li {
  background: var(--kpi-bg);
  border-radius: 12px;
  padding: 14px 14px 12px;
  min-width: 0;
}
.tarjetas .etiqueta {
  display: block;
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.35;
}
.tarjetas .valor {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tarjetas .año {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-subtle);
}

/* Las listas de filas (vínculos, socios, organismos). */
.filas {
  margin: 0;
  padding: 0;
  list-style: none;
}
.filas li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}
.filas li:first-child {
  border-top: 1px solid var(--border-soft);
}
.filas .izq {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}
/* La bandera y la muestra, a la altura del primer renglón: con dos o tres
   renglones debajo del nombre, centradas quedaban en el medio del bloque. */
.filas .izq .bandera {
  margin-top: 4px;
}
.filas .der {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
  font-size: 15px;
  text-align: right;
}
.filas .sub {
  display: block;
  font-size: 14px;
  color: var(--fg-subtle);
}
.bandera-hueco {
  flex: none;
  width: 28px;
}
.filas .izq .muestra {
  margin-top: 7px;
}
.filas .sin-enlace {
  font-weight: 500;
}
/* El número del capítulo en el índice de productos. */
.capitulo {
  flex: none;
  min-width: 2.4em;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
}
/* El título de un bando y el de un país en el índice de relaciones. */
h3.bando,
h3.con-bandera {
  display: flex;
  align-items: center;
  gap: 10px;
}
h3.con-bandera {
  margin-top: 24px;
  font-size: 17px;
}
h3 .cuenta {
  font-weight: 400;
  color: var(--fg-subtle);
}
.filas.columnas {
  columns: 2 15rem;
  column-gap: 32px;
}
.filas.columnas li {
  break-inside: avoid;
  border-top: 0;
}

/* Las tablas de cifras. */
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.tabla caption {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 20px 0 8px;
}
.tabla th,
.tabla td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
  text-align: left;
}
.tabla thead th {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-muted);
}
.tabla td.num,
.tabla th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 16px;
  white-space: nowrap;
}
.tabla tbody th {
  font-weight: 400;
}
.tabla .año,
.tabla .nota {
  display: block;
  font-size: 13px;
  color: var(--fg-subtle);
  white-space: normal;
  font-weight: 400;
}
.tabla.comparar {
  table-layout: fixed;
}
.tabla.comparar th:first-child {
  width: 44%;
}
.tabla .mejor {
  color: var(--ok);
  font-weight: 650;
}
/* El ranking de un producto: el puesto, el país con su valor debajo y su
   parte (tres columnas angostas, que entran en un teléfono). */
.tabla.ranking {
  table-layout: fixed;
}
.tabla.ranking .puesto {
  width: 2.75rem;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
.tabla.ranking abbr {
  text-decoration: none;
}
.tabla.ranking td.num,
.tabla.ranking th.num {
  width: 5.5rem;
}
.tabla.ranking th .izq {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.tabla.ranking th .bandera {
  margin-top: 3px;
}
.desplaza {
  overflow-x: auto;
}

/* La línea de tiempo. */
.tiempo {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--border-block);
}
.tiempo li {
  position: relative;
  padding: 0 0 22px 22px;
}
.tiempo li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}
.tiempo time {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.tiempo h3 {
  margin: 2px 0 6px;
  font-size: 17px;
}
.tiempo p {
  margin-bottom: 6px;
}

/* El gráfico de la ONU. */
.grafico {
  margin: 8px 0 16px;
}
.grafico svg {
  display: block;
  width: 100%;
  height: auto;
}
.grafico .g-banda {
  fill: var(--border-soft);
}
.grafico .g-normal {
  fill: none;
  stroke: var(--fg-subtle);
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
}
.grafico .g-par {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}
.grafico .g-guia {
  stroke: var(--border);
  stroke-width: 1px;
}
.grafico text {
  fill: var(--fg-subtle);
  font-size: 12px;
  font-family: inherit;
}
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--fg-muted);
}
.leyenda span {
  display: inline-block;
  width: 18px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: 3px solid var(--accent);
}
.leyenda .l-normal {
  border-top: 2px dashed var(--fg-subtle);
}
.leyenda .l-banda {
  height: 10px;
  border: 0;
  background: var(--border-soft);
}

/* La intensidad de un conflicto por año: una celda por año, y los mismos
   años escritos debajo (el color no es lo único). */
.franja {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.franja span {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: 16px;
  border-radius: 2px;
}
.f-guerra {
  background: var(--rel-conflicto);
}
.f-menor {
  background: var(--rel-tension);
}
.f-sin {
  background: var(--border);
}
.muestra.f-guerra,
.muestra.f-menor,
.muestra.f-sin {
  box-shadow: none;
}
.franja-extremos {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 13px;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.intensidad {
  margin: 14px 0 10px;
  font-size: 15px;
}
.intensidad div {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.intensidad dt {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.intensidad dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Las fuentes. */
.fuentes {
  margin: 0;
  padding-left: 1.6em;
  font-size: 15px;
  line-height: 1.55;
}
.fuentes li {
  margin-bottom: 8px;
  padding-left: 4px;
}
.fuentes .quien {
  color: var(--fg-subtle);
}

/* Al final: volver al mapa. */
.cierre {
  margin-top: 48px;
  padding: 24px;
  border-radius: 16px;
  background: var(--kpi-bg);
}
.cierre p {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}

.pie {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 28px 0 40px;
  font-size: 14px;
  color: var(--fg-subtle);
}
.pie .marca svg {
  height: 22px;
}
/* Todo el sitio, en el pie de cada página. */
.pie-nav ul {
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}
.pie-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}
.pie-nav a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.pie p {
  margin: 10px 0 0;
}
.pie a {
  color: var(--fg-muted);
}

@media (max-width: 520px) {
  body {
    font-size: 16px;
  }
  .cabecera .boton-borde .largo {
    display: none;
  }
  .cabecera .boton-borde .corto {
    display: inline;
  }
  .filas.columnas {
    columns: 1;
  }
}