El punto mide lo mismo en los dos mapas, medido en píxeles

Era proporcional al encuadre, y eso no basta: los dos mapas se dibujan a
anchos distintos —América ocupa una columna y la Península menos de la
mitad—, así que el mismo porcentaje daba un punto la mitad de grande en
España. Ahora se mide el ancho de cada lienzo en pantalla y se convierte:
catorce píxeles de diámetro en los dos, comprobado midiéndolos y no a
ojo.

Y «adoptado» pasa a ser el mismo tono que «cuna», solo que más flojo.
Antes era un verde claro que no se parecía a nada del otro mapa, así que
España parecía pintada de otro color en vez de con menos intensidad del
mismo.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/app.css

@@ -62,7 +62,8 @@
 	 * elige, que es su trabajo en el resto del sitio.
 	 */
 	--c-dato: oklch(0.74 0.09 198);
-	--c-dato-tenue: oklch(0.5 0.06 205);
+	/* El mismo tono, más flojo: «también se canta aquí», no otro dato. */
+	--c-dato-tenue: oklch(0.55 0.075 198);
 	--c-dato-vacio: oklch(0.29 0.03 255);
 
 	--c-danger: oklch(0.72 0.16 22);
@@ -214,7 +215,8 @@
 
 	/* En claro se invierten: el dato pintado tiene que ser oscuro sobre papel. */
 	--c-dato: oklch(0.5 0.085 200);
-	--c-dato-tenue: oklch(0.78 0.05 200);
+	/* El mismo tono, más flojo: «también se canta aquí», no otro dato. */
+	--c-dato-tenue: oklch(0.68 0.07 200);
 	--c-dato-vacio: oklch(0.93 0.012 255);
 
 	--c-danger: oklch(0.5 0.17 25);

src/lib/components/MapaDeGeneros.svelte

@@ -51,9 +51,25 @@
 		return espana ? [espana, ...resto] : resto;
 	});
 
-	/** El ancho de un encuadre, para medir con él lo que se dibuja encima. */
+	/** El ancho de un encuadre, en unidades del mapa. */
 	const anchoDe = (encuadre: string) => Number(encuadre.split(' ')[2]);
 
+	/*
+	 * El radio del punto, en píxeles de pantalla.
+	 *
+	 * No basta con hacerlo proporcional al encuadre: los dos mapas se dibujan a
+	 * anchos distintos —América ocupa una columna y la Península menos de la
+	 * mitad—, así que el mismo porcentaje daba un punto la mitad de grande en
+	 * España. Se mide lo que ocupa cada lienzo y se convierte.
+	 */
+	const PUNTO_PX = 7;
+
+	let anchoAmerica = $state(0);
+	let anchoPeninsula = $state(0);
+
+	const radio = (anchoDelEncuadre: number, anchoEnPantalla: number) =>
+		anchoEnPantalla > 0 ? (PUNTO_PX * anchoDelEncuadre) / anchoEnPantalla : 0;
+
 	const enAmerica = PAISES.filter((p) => !IBERIA.includes(p.codigo));
 	const enIberia = PAISES.filter((p) => IBERIA.includes(p.codigo));
 
@@ -89,9 +105,14 @@
 			</defs>
 		</svg>
 
-		<svg viewBox={ENCUADRE} role="group" aria-label="Géneros por país">
+		<svg
+			viewBox={ENCUADRE}
+			role="group"
+			aria-label="Géneros por país"
+			bind:clientWidth={anchoAmerica}
+		>
 			{#each enAmerica as p (p.codigo)}
-				{@render pais(p, anchoDe(ENCUADRE))}
+				{@render pais(p, radio(anchoDe(ENCUADRE), anchoAmerica))}
 			{/each}
 		</svg>
 
@@ -108,9 +129,10 @@
 			viewBox={ENCUADRE_IBERIA}
 			role="group"
 			aria-label="Géneros en la Península"
+			bind:clientWidth={anchoPeninsula}
 		>
 			{#each enIberia as p (p.codigo)}
-				{@render pais(p, anchoDe(ENCUADRE_IBERIA))}
+				{@render pais(p, radio(anchoDe(ENCUADRE_IBERIA), anchoPeninsula))}
 			{/each}
 		</svg>
 	</div>
@@ -149,7 +171,7 @@
 	</ul>
 </div>
 
-{#snippet pais(p: (typeof PAISES)[number], anchoDelLienzo: number)}
+{#snippet pais(p: (typeof PAISES)[number], r: number)}
 	{@const suyo = porPais[p.codigo]}
 	{#if suyo}
 		<!--
@@ -175,13 +197,7 @@
 		>
 			<title>{resumen(p.codigo)}</title>
 			<path class="tierra" d={p.d} />
-			<!--
-				El radio se mide contra el ancho del lienzo, no en unidades fijas: los
-				dos mapas tienen encuadres muy distintos —seiscientas unidades América,
-				ciento diez la Península— y con un radio fijo el punto de España salía
-				del tamaño de Castilla.
-			-->
-			<circle class="punto" cx={p.centro[0]} cy={p.centro[1]} r={anchoDelLienzo * 0.014} />
+			<circle class="punto" cx={p.centro[0]} cy={p.centro[1]} {r} />
 		</g>
 	{:else}
 		<!--