/* todoloquepagas — zona institucional y comparativas.
   Lo propio de /paises/, /corrupcion/, /sobre-nosotros/, /prensa/ y /legal/. Se carga con
   <Base estilos={['institucional']}>, después de tokens.css, componentes.css y sitio.css.
   Regla: ningún color literal; todos salen de las variables de tokens.css. */

/* ---- Tablas por país --------------------------------------------------------
   La primera columna (el país) se queda quieta mientras el resto se desplaza de lado. */
.tabla-paises { min-width: 620px; }
.tabla-paises--completa { min-width: 1340px; table-layout: fixed; }
.tabla-paises--completa .tabla-paises__pais { width: 124px; }
.tabla-paises--completa thead th { font-size: 13px; line-height: 18px; }
.tabla-paises--completa th, .tabla-paises--completa td { padding-right: var(--espacio-3); }
.tabla-paises thead th, .tabla-paises thead th.num { white-space: normal; vertical-align: bottom; }
.tabla-paises thead th small { display: block; margin-top: var(--espacio-1); font: var(--tipo-nota); font-weight: 450; color: var(--tinta-suave); }
.tabla-paises thead .num { text-align: left; }
.tabla-paises__grupo { display: block; margin-bottom: var(--espacio-1); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.tabla-paises th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 116px; background: var(--papel); font-weight: 450; }
.tabla-paises thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--papel); }
.tabla-paises .fila-resaltada th[scope="row"] { background: var(--subrayador-suave); font-weight: 860; }
.tabla-paises .fila-media > * { color: var(--tinta-suave); }
.tabla-paises .fila-media:first-of-type > *, .tabla-paises .tras-paises > * { border-top: var(--grosor-control) solid var(--tinta); }
.tabla-paises td.num { text-align: left; }
.tabla-paises td small { display: block; font: var(--tipo-nota); color: var(--tinta-suave); white-space: normal; }
.tabla-paises .sin-dato { font: var(--tipo-nota); line-height: 22px; color: var(--tinta-suave); }

/* El rótulo que cada celda lleva dentro solo se ve cuando la tabla está apilada (ver más abajo). */
.celda__rotulo { display: none; }
.tabla-aviso { font: var(--tipo-nota); color: var(--tinta-suave); }

/* Cifra con su barra debajo: la barra empieza en cero y todas las de una columna comparten escala.
   Colores del manual para una comparativa: España, en amarillo; los demás países, en gris de contexto;
   las medias, en el mismo gris con borde, para que no se confundan con un país. */
.celda-barra { min-width: 112px; }
.celda-barra__pista { display: block; height: 8px; margin-top: var(--espacio-1); }
.celda-barra__barra { display: block; height: 100%; min-width: 2px; border-radius: 0 3px 3px 0; background: var(--dato-neutro); }
.fila-media .celda-barra__barra { outline: var(--grosor-linea) solid var(--tinta-suave); outline-offset: -1px; }

/* Las mismas reglas en las barras de un indicador por país (components/paises/BarrasPaises.astro). */
.barras-paises__media .tlqp-barras__barra { border: var(--grosor-linea) solid var(--tinta-suave); border-left: 0; }
.barras-paises__media .tlqp-barras__nombre, .barras-paises__media .tlqp-barras__valor { color: var(--tinta-suave); }
.fila-resaltada .celda-barra__barra { background: var(--subrayador); outline: var(--grosor-linea) solid var(--sobre-subrayador); outline-offset: -1px; }
.fila-resaltada .celda-barra__valor { font-weight: 860; }

/* ---- Figura con titular: gráfica, nota y fuente ----------------------------- */
.figura { display: grid; gap: var(--espacio-4); align-content: start; min-width: 0; }
.figura > * { min-width: 0; }
.figura__titular { max-width: var(--ancho-lectura); font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }
.figura__texto { max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.notas-fuente { display: grid; gap: var(--espacio-2); }

/* ---- Intervalos: una puntuación de 0 a 100 con su margen de error ----------- */
.intervalos { display: grid; gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; }
.intervalos__fila { display: grid; grid-template-columns: minmax(110px, 190px) minmax(80px, 1fr) minmax(128px, auto); align-items: center; column-gap: var(--espacio-3); }
.intervalos__nombre { font: 450 15px/20px var(--font-sans); }
.intervalos__pista { position: relative; height: 24px; background: linear-gradient(var(--linea), var(--linea)) left center / 100% var(--grosor-linea) no-repeat; }
.intervalos__margen { position: absolute; top: 8px; height: 8px; background: var(--dato-neutro); }
.intervalos__punto { position: absolute; top: 2px; width: 4px; height: 20px; margin-left: -2px; background: var(--tinta); box-shadow: 0 0 0 2px var(--papel); }
.intervalos__valor { font: var(--tipo-dato); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.intervalos__valor small { font: inherit; color: var(--tinta-suave); }
.intervalos__fila--contexto .intervalos__punto { background: var(--dato-neutro); }
.intervalos__fila--contexto .intervalos__nombre, .intervalos__fila--contexto .intervalos__valor { color: var(--tinta-suave); }
.intervalos__fila--tu .intervalos__margen { top: 4px; height: 16px; background: var(--subrayador); border: var(--grosor-control) solid var(--sobre-subrayador); }
.intervalos__fila--tu .intervalos__punto { top: 0; height: 24px; background: var(--sobre-subrayador); box-shadow: none; }
.intervalos__fila--tu .intervalos__nombre, .intervalos__fila--tu .intervalos__valor { font-weight: 860; }
.intervalos__eje .intervalos__pista { height: 18px; background: none; }
.intervalos__marca { position: absolute; top: 0; font: var(--tipo-dato); color: var(--tinta-suave); transform: translateX(-50%); }
.intervalos__marca:first-child { transform: none; }
.intervalos__marca:last-child { transform: translateX(-100%); }
.intervalos__sentido { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espacio-1) var(--espacio-4); font: var(--tipo-nota); color: var(--tinta-suave); }
@media (max-width: 560px) {
  .intervalos__fila { grid-template-columns: 1fr auto; row-gap: var(--espacio-1); }
  .intervalos__pista { grid-column: 1 / -1; grid-row: 2; }
  .intervalos__eje .intervalos__nombre, .intervalos__eje .intervalos__valor { display: none; }
  .intervalos__eje .intervalos__pista { grid-row: 1; }
}

/* ---- Lado a lado: dos parejas de barras por país (components/paises/LadoALado.astro) ----
   Con el salario medio, impuestos del sueldo y pensión; por habitante, ingresos y gasto públicos. En cada pareja, la
   primera barra es llena y la segunda, de borde (lo dice la leyenda). España, en amarillo; los demás, en gris de contexto;
   las medias, en gris con borde y separadas por una raya. Los nombres de cada barra se leen con lector de pantalla. */
.lado { display: grid; gap: var(--espacio-4); min-width: 0; }
.lado__leyenda { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-6); margin: 0; padding: 0; list-style: none; font: var(--tipo-nota); color: var(--tinta-suave); }
.lado__leyenda li { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.lado__muestra { display: inline-block; flex: none; width: 24px; height: 12px; border-radius: 0 3px 3px 0; }
.lado__muestra--llena { background: var(--dato-neutro); }
.lado__muestra--borde { border: var(--grosor-control) solid var(--tinta-suave); border-left: 0; }
.lado__cabecera { display: none; }
.lado__filas { display: grid; margin: 0; padding: 0; list-style: none; }
.lado__fila { display: grid; gap: var(--espacio-2) var(--espacio-6); padding-block: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.lado__fila--tras-paises { border-top: var(--grosor-control) solid var(--tinta); }
.lado__nombre { font: 650 15px/20px var(--font-sans); }
.lado__par { display: grid; align-content: start; gap: var(--espacio-1); min-width: 0; }
.lado__rotulo-par { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.lado__barras { display: grid; gap: 2px; margin: 0; }
.lado__rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lado__dato { display: grid; grid-template-columns: minmax(40px, 1fr) minmax(84px, auto); align-items: center; column-gap: var(--espacio-3); margin: 0; }
.lado__pista { height: 12px; }
.lado__barra { display: block; height: 100%; min-width: 2px; border-radius: 0 3px 3px 0; }
.lado__barra-fila--llena .lado__barra { background: var(--dato-neutro); }
.lado__barra-fila--borde .lado__barra { border: var(--grosor-control) solid var(--tinta-suave); border-left: 0; }
.lado__valor { font: 500 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lado__valor.sin-dato { font: var(--tipo-nota); color: var(--tinta-suave); }
.lado__saldo { font: var(--tipo-nota); color: var(--tinta-suave); }
.lado__fila--tu { background: var(--subrayador-suave); box-shadow: 0 0 0 var(--espacio-2) var(--subrayador-suave); }
.lado__fila--tu .lado__nombre, .lado__fila--tu .lado__valor { font-weight: 860; }
.lado__fila--tu .lado__barra-fila--llena .lado__barra { background: var(--subrayador); border: var(--grosor-control) solid var(--sobre-subrayador); border-left: 0; }
/* La barra de borde de España, con el borde en tinta: el de sobre-subrayador es oscuro también en el tema oscuro y no se vería. */
.lado__fila--tu .lado__barra-fila--borde .lado__barra { background: transparent; border-color: var(--tinta); }
.lado__fila--media .lado__nombre, .lado__fila--media .lado__valor { color: var(--tinta-suave); }
.lado__fila--media .lado__barra-fila--llena .lado__barra { border: var(--grosor-linea) solid var(--tinta-suave); border-left: 0; }
@media screen and (min-width: 48em) {
  .lado__cabecera, .lado__fila { grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--espacio-6); }
  .lado__cabecera { display: grid; padding-bottom: var(--espacio-2); border-bottom: var(--grosor-control) solid var(--tinta); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
  .lado__fila:first-child { border-top: 0; }
  .lado__rotulo-par { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---- Tabla que se ordena pulsando en las cabeceras (components/paises/TablaOrdenable.astro) ---- */
.tabla-ordenable { min-width: 1400px; table-layout: fixed; }
.tabla-ordenable thead th { font-size: 13px; line-height: 18px; }
.tabla-ordenable th, .tabla-ordenable td { padding-right: var(--espacio-3); }
.tabla-ordenable thead th:first-child { width: 124px; }
.tabla-ordenar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espacio-1); width: 100%; min-height: var(--alto-control); margin: calc(-1 * var(--espacio-2)) 0; padding: var(--espacio-2) 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--tinta); text-align: left; cursor: pointer; }
.tabla-ordenar > * { grid-column: 1; }
.tabla-ordenar::after { content: "↕"; grid-column: 2; grid-row: 1; font: var(--tipo-dato); color: var(--tinta-suave); }
.tabla-ordenar:hover { background: var(--subrayador-suave); }
th[aria-sort="ascending"] .tabla-ordenar::after { content: "↑"; color: var(--tinta); }
th[aria-sort="descending"] .tabla-ordenar::after { content: "↓"; color: var(--tinta); }
.tabla-ordenar small { display: block; margin-top: var(--espacio-1); font: var(--tipo-nota); font-weight: 450; color: var(--tinta-suave); }

/* ---- Fichas: un índice o un estudio, con sus datos en filas ------------------ */
.fichas { display: grid; gap: var(--espacio-6); margin: 0; padding: 0; list-style: none; }
.fichas--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ficha { display: grid; align-content: start; gap: var(--espacio-4); padding: var(--espacio-6); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); }
.ficha__titulo { font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }
.ficha__antetitulo { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.ficha__datos { display: grid; gap: var(--espacio-3); margin: 0; }
.ficha__datos > div { display: grid; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.ficha__datos dt { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.ficha__datos dd { margin: 0; font: var(--tipo-cuerpo-pequeno); }
.ficha__cifra { font: 860 32px/1.1 var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ficha__cifra small { display: block; margin-top: var(--espacio-1); font: var(--tipo-nota); letter-spacing: normal; color: var(--tinta-suave); }
/* Los estudios: en pantallas anchas, el nombre a la izquierda y los datos a la derecha. */
@media (min-width: 50em) {
  .ficha--ancha { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: var(--espacio-8); }
  .ficha--ancha .ficha__datos > div:first-child { padding-top: 0; border-top: 0; }
}

/* ---- Dos listas enfrentadas: lo que se puede afirmar y lo que no ------------- */
.lista-afirmar { display: grid; gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo-pequeno); }
.lista-afirmar li { display: grid; grid-template-columns: var(--espacio-6) minmax(0, 1fr); column-gap: var(--espacio-2); }
.lista-afirmar li::before { display: grid; place-items: center; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; font: 860 15px/1 var(--font-sans); }
/* Lo que se puede afirmar, con un visto sobre amarillo; lo que no, con un aspa en un círculo de trazo (18-10-2026: el «+» y
   el «×» se confundían). */
.lista-afirmar--si li::before { content: "✓"; background: var(--subrayador); color: var(--sobre-subrayador); }
.lista-afirmar--no li::before { content: "✕"; border: 2px solid currentColor; color: var(--tinta-suave); }

/* ---- Reglas numeradas (sobre nosotros) ---------------------------------------- */
.reglas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--espacio-6) var(--espacio-8); margin: 0; padding: 0; list-style: none; counter-reset: regla; }
.reglas li { display: grid; align-content: start; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); font: var(--tipo-cuerpo-pequeno); counter-increment: regla; }
.reglas li::before { content: counter(regla); font: var(--tipo-dato); color: var(--tinta-suave); }
.reglas strong { font: 650 17px/24px var(--font-sans); }

/* ---- Registro de cambios -------------------------------------------------------- */
.registro { display: grid; max-width: var(--ancho-lectura); margin: 0; padding: 0; list-style: none; }
.registro li { display: grid; gap: var(--espacio-1) var(--espacio-4); padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
.registro li:first-child { border-top: var(--grosor-control) solid var(--tinta); }
.registro time { font: var(--tipo-dato); color: var(--tinta-suave); }
@media (min-width: 40em) { .registro li { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; } }

/* ---- Logotipo: muestras sobre fondo claro y oscuro. No siguen el tema --------- */
.muestras-logo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
.muestra-logo { display: grid; gap: var(--espacio-3); align-content: start; }
.muestra-logo__lienzo { display: grid; place-items: center; min-height: 168px; padding: var(--espacio-10) var(--espacio-8); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); box-shadow: var(--sombra-tarjeta); }
.muestra-logo__lienzo--claro { background: var(--fijo-papel); }
.muestra-logo__lienzo--oscuro { background: var(--fijo-tinta); }
.muestra-logo__lienzo img { display: block; width: auto; max-width: 100%; height: 40px; }
.muestra-logo__lienzo--isotipo img { height: 64px; }
.muestra-logo__lienzo--apilado img { height: 96px; }
.muestra-logo__pie { display: grid; gap: var(--espacio-1); font: var(--tipo-cuerpo-pequeno); }
.muestra-logo__pie span { color: var(--tinta-suave); }
.descargas { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-4); margin: 0; padding: 0; list-style: none; }
.descargas a { display: inline-flex; align-items: center; min-height: var(--alto-control); font: var(--tipo-dato); font-size: 14px; }


/* ---- Páginas legales ------------------------------------------------------------
   Con la rejilla de toda la web (sitio.css): desde 60em, el rail lleva el paso entre los tres textos y la fecha de la
   versión, que acompañan pegados mientras se lee; el texto va en la columna de lectura. */
.legal-indice { display: flex; flex-wrap: wrap; gap: 0 var(--espacio-6); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo-pequeno); }
.legal-indice a, .legal-indice span { display: inline-flex; align-items: center; min-height: var(--alto-control); }
.legal-indice [aria-current] { font-weight: 860; }
.legal-cuerpo { display: grid; gap: var(--espacio-8); padding-bottom: var(--entre-secciones); }
.legal-cuerpo > * { min-width: 0; }
.legal-rail { display: grid; gap: var(--espacio-4); }
@media screen and (min-width: 60em) {
  .legal-cuerpo { grid-template-columns: var(--pistas); column-gap: var(--canal); align-items: start; padding-top: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
  /* Sin hueco entre filas: el rail ocupa veinte, y con el hueco las vacías sumaban 608 px de papel al final del texto
     (lo encontró herramientas/auditar-maqueta.mjs). Lo de la lectura se separa con un margen, como en <Bloque>. */
  .legal-cuerpo { row-gap: 0; }
  .legal-cuerpo > * { grid-column: lectura; }
  .legal-cuerpo > :not(.legal-rail) + * { margin-top: var(--espacio-8); }
  .legal-cuerpo > .legal-rail { grid-column: rail; grid-row: 1 / span 20; position: sticky; top: var(--espacio-6); }
  .legal-rail .legal-indice { display: grid; justify-items: start; gap: 0; font: 650 15px/22px var(--font-sans); }
  .legal-rail .legal-indice a, .legal-rail .legal-indice span { min-height: 40px; }
}
.legal-version { font: var(--tipo-nota); color: var(--tinta-suave); }
/* Los datos del titular (aviso legal, privacidad y contacto): una fila por dato, con su rótulo delante. */
.datos-titular { display: grid; max-width: var(--ancho-lectura); margin: 0; }
.datos-titular > div { display: grid; gap: var(--espacio-1) var(--espacio-4); padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
.datos-titular > div:first-child { border-top: var(--grosor-control) solid var(--tinta); }
.datos-titular dt { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.datos-titular dd { margin: 0; overflow-wrap: anywhere; }
.datos-titular a { display: inline-flex; align-items: center; min-height: var(--alto-control); }
@media (min-width: 40em) { .datos-titular > div { grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; } }
.prosa .datos-titular { margin-top: var(--espacio-6); }
.prosa .aviso { margin-top: var(--espacio-6); }
.prosa .aviso p { max-width: none; }

/* ---- Pila de bloques dentro de un Bloque (texto, aviso, lista) ---------------- */
.bloque__cuerpo { display: grid; gap: var(--espacio-6); }
.bloque__cuerpo > * { min-width: 0; }

/* ---- Tabla apilada: en pantallas estrechas, cada país es una ficha -------------
   La tabla lleva `role` explícitos en el HTML para que siga siendo una tabla aunque cambie su display.
   --apiladas es el número de cifras por fila de la ficha (lo pone el componente). */
@media (max-width: 640px) {
  .tabla-paises--apilable { display: block; min-width: 0; }
  .tabla-paises--apilable caption { display: block; }
  .tabla-paises--apilable thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-paises--apilable tbody { display: block; border-top: var(--grosor-control) solid var(--tinta); }
  .tabla-paises--apilable tr { display: grid; grid-template-columns: repeat(var(--apiladas, 2), minmax(0, 1fr)); gap: var(--espacio-3) var(--espacio-4); padding: var(--espacio-4) 0; border-bottom: var(--grosor-linea) solid var(--linea); }
  .tabla-paises--apilable th[scope="row"], .tabla-paises--apilable td { display: block; position: static; min-width: 0; padding: 0; border: 0; background: none; }
  .tabla-paises--apilable th[scope="row"] { grid-column: 1 / -1; font: 650 17px/24px var(--font-sans); }
  .tabla-paises--apilable .fila-resaltada { margin-inline: calc(-1 * var(--espacio-3)); padding-inline: var(--espacio-3); background: var(--subrayador-suave); }
  .tabla-paises--apilable .fila-resaltada > * { background: none; }
  .tabla-paises--apilable .fila-resaltada th[scope="row"] { background: none; font-weight: 860; }
  .tabla-paises--apilable .tras-paises { border-top: var(--grosor-control) solid var(--tinta); }
  .tabla-paises--apilable .tras-paises > *, .tabla-paises--apilable .fila-media:first-of-type > * { border-top: 0; }
  .tabla-paises--apilable .celda__rotulo { display: block; margin-bottom: var(--espacio-1); font: var(--tipo-nota); color: var(--tinta-suave); white-space: normal; }
  .tabla-paises--apilable .celda-barra { min-width: 0; }
  /* Las cifras de una misma fila de la ficha, a la misma altura: el rótulo largo («Índice de percepción de la
     corrupción…», tres renglones) dejaba la cifra de al lado dos renglones más arriba. El rótulo se queda arriba y el
     sitio que sobra va entre él y la cifra. */
  .tabla-paises--apilable td { display: flex; flex-direction: column; }
  .tabla-paises--apilable td > .celda__rotulo { flex: 1 0 auto; }
}

@media print {
  .tabla-paises th[scope="row"], .tabla-paises thead th:first-child { position: static; }
  .tabla-paises, .tabla-paises--completa { min-width: 0; }
}

/* ---- Prensa: las provincias con la cifra más alta y más baja, con su salario al lado ---- */
.tabla-provincias { min-width: 560px; }
.tabla-provincias thead th.num { white-space: normal; text-align: right; }
.tabla-provincias td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-provincias th[scope="row"] { font-weight: 450; }
.tabla-provincias th[scope="row"], .tabla-provincias thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--papel); }
.tabla-aviso__estrecho { display: none; }
@media (max-width: 599px) { .tabla-aviso__estrecho { display: inline; } }
@media print { .tabla-provincias { min-width: 0; } .tabla-provincias th[scope="row"], .tabla-provincias thead th:first-child { position: static; } }
.tabla-provincias .fila-referencia > * { border-top: var(--grosor-control) solid var(--tinta); border-bottom: var(--grosor-control) solid var(--tinta); font-weight: 650; }

/* La tabla de países apilada no necesita desplazamiento lateral: sin él, la fila resaltada no mueve el marco. */
@media (max-width: 640px) { .tabla-marco:has(> .tabla-paises--apilable) { overflow-x: visible; } }

/* ---- Ritmo editorial (ronda 20) ----------------------------------------------
   Las piezas comunes (ritmo.css) con lo poco que necesita esta zona. Ningún color nuevo: las bandas y las familias
   ponen sus variables (--fondo-tabla, --familia-tinta…). */

/* La columna quieta de las tablas por país toma el fondo de la banda en la que está (en la superficie, blanco). */
.tabla-paises th[scope="row"], .tabla-paises thead th:first-child, .tabla-provincias th[scope="row"], .tabla-provincias thead th:first-child { background: var(--fondo-tabla, var(--papel)); }

/* Lista con iconos: la nota de base y año de cada cifra, debajo de su texto. */
.lista-iconos > li > .lista-iconos__nota { margin-top: var(--espacio-1); font: var(--tipo-nota); color: var(--tinta-suave); }
.recuadro__cuerpo > .recuadro__nota { font: var(--tipo-nota); color: var(--tinta-suave); }

/* Una nota al margen dentro del texto: lo que falta en una tabla y por qué. */
.prosa .nota-al-margen { font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }



/* Tres razones de lado a lado a todo el ancho (/paises/, «Cómo se compara»). */
@media screen and (min-width: 60em) { .razones--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Fichas (índices, estudios) dentro de una banda superficie: sobre el papel, para que no se pierdan en el blanco. */
.bloque--superficie .ficha { background: var(--papel); }
/* Los tres índices de /corrupcion/: lo que no mide cada uno, en su recuadro «Ojo», al pie de la ficha y a la misma altura. */
.fichas--indices .ficha { display: flex; flex-direction: column; }
.fichas--indices .ficha > .recuadro { margin-top: var(--espacio-4); }
.fichas--indices .ficha > .ficha__datos { margin-bottom: var(--espacio-2); }
/* Los estudios: el año junto al nombre y lo que mide, en una frase de peso, antes de cómo lo mide. */
.ficha__anio { display: flex; align-items: baseline; gap: var(--espacio-2); margin: 0; font: var(--tipo-dato); }
.ficha__anio span { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.ficha__datos .ficha__tesis { display: block; margin-bottom: var(--espacio-2); font: 650 19px/26px var(--font-sans); letter-spacing: -0.01em; }

/* Dos listas enfrentadas en la banda de tinta («Qué se puede afirmar y qué no», «Di siempre / No digas»): dos columnas
   sin caja, con un filete arriba y la lista a cuerpo. */
.bloque--tinta .rejilla .ficha { padding: var(--espacio-5) 0 0; border: 0; border-top: var(--grosor-control) solid var(--tinta); border-radius: 0; background: none; }
.bloque--tinta .lista-afirmar { gap: var(--espacio-4); font: var(--tipo-cuerpo); }
.bloque--tinta .lista-afirmar li { grid-template-columns: var(--espacio-8) minmax(0, 1fr); }
.bloque--tinta .lista-afirmar li::before { width: 28px; height: 28px; font: 860 17px/1 var(--font-sans); }

/* Sobre nosotros: cómo trabajamos, en dos columnas a lo ancho; las reglas, numeradas como razones; la declaración de
   quién lo paga, en grande. */
@media (min-width: 50em) { .lista-iconos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espacio-10); } }
.reglas li::before { content: counter(regla, decimal-leading-zero); font: 860 15px/1 var(--font-sans); color: var(--tinta); }
.reglas strong { font: 760 19px/26px var(--font-sans); letter-spacing: -0.01em; }
.reglas li { font: var(--tipo-cuerpo); }
.prosa blockquote.cita-destacada { padding-left: var(--espacio-5); border-left-width: 6px; font: 650 clamp(20px, 2.2vw, 24px)/1.35 var(--font-sans); letter-spacing: -0.01em; }

/* Prensa: lo que hay en la web, en cifras con su enlace. */
/* Las ocho cifras de «Qué es» en Prensa: dos filas de cuatro; en el móvil, de dos en dos. */
.hay-en-la-web { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-6) var(--espacio-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .hay-en-la-web { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hay-en-la-web li { display: grid; align-content: start; justify-items: start; gap: var(--espacio-2); padding-top: var(--espacio-4); border-top: var(--grosor-control) solid var(--tinta); }
.hay-en-la-web__cifra { font: 860 clamp(36px, 4vw, 48px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hay-en-la-web a { font: 650 17px/24px var(--font-sans); text-wrap: balance; }

/* ---- Páginas legales, con el ritmo editorial: solo lo básico (sin bandas ni cifras) ----
   El texto con el cuerpo de lectura (.prosa); cada apartado con el filete corto de los ladillos; y desde 60em, en el rail,
   «En esta página», con el apartado que se lee subrayado (cliente/sitio.ts, data-indice-activo). */
.legal-texto h2 { position: relative; padding-top: var(--espacio-5); scroll-margin-top: var(--espacio-6); }
.legal-texto h2::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 4px; background: var(--tinta); }
.legal-texto h3 { scroll-margin-top: var(--espacio-6); }
.legal-apartados { display: none; }
@media screen and (min-width: 60em) {
  .legal-apartados { display: grid; gap: var(--espacio-2); padding-top: var(--espacio-4); border-top: var(--grosor-linea) solid var(--linea); }
  .legal-apartados ol { display: grid; justify-items: start; margin: 0; padding: 0; list-style: none; font: 450 15px/20px var(--font-sans); }
  .tlqp .legal-apartados a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tinta); text-decoration: none; }
  .tlqp .legal-apartados a:hover, .tlqp .legal-apartados a[aria-current] { text-decoration: underline; }
}
/* «En corto» de privacidad: el resumen del texto, en una caja que se ve antes que el detalle. */
.legal-texto h2#en-corto + ul { padding: var(--espacio-5) var(--espacio-5) var(--espacio-5) var(--espacio-8); border-radius: var(--radio-l); background: var(--superficie); }

/* La 404: dónde seguir. */
.no-encontrada .enlaces-rejilla { max-width: var(--ancho-pagina); }
/* Un punto largo de una lista legal, partido en párrafos. */
.legal-texto li > p + p { margin-top: var(--espacio-2); }
/* La frase que cierra «Cómo trabajamos»: a lo ancho, como la lista de dos columnas que la precede, con la letra de lectura. */
.sobre-nosotros__cierre { margin: 0; font: var(--tipo-cuerpo-lectura); }

/* /contacto/ (18-10-2026): el correo grande bajo la portadilla y un motivo por tarjeta, con su botón «Escribir». */
.contacto-correo { margin: var(--espacio-6) 0 0; }
.contacto-correo .tlqp-boton { overflow-wrap: anywhere; }
.contacto-motivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
.contacto-motivo { display: grid; grid-template-rows: auto 1fr auto; gap: var(--espacio-3); min-width: 0; padding: var(--espacio-6); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-l); background: var(--superficie); scroll-margin-top: var(--espacio-24); }
.contacto-motivo__titulo { margin: 0; font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }
.contacto-motivo__texto { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.contacto-motivo__boton { justify-self: start; }
/* «Correcciones y cambios» (sobre-nosotros): cada corrección con lo que decía, lo que dice ahora y por qué. */
.registro__cambio { display: grid; gap: var(--espacio-2); margin: 0; }
.registro__cambio > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--espacio-3); }
.registro__cambio dt { font-weight: 760; }
.registro__cambio dd { margin: 0; }