Aire entre las dos orillas

La Península quedaba rozando el Caribe. El lienzo de América se ensancha
por la derecha con océano de sobra: entre las dos orillas hay un
Atlántico, y sin separación parecen el mismo continente.

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

src/lib/components/MapaDeGeneros.svelte

@@ -54,6 +54,18 @@
 	/** El ancho de un encuadre, para medir con él lo que se dibuja encima. */
 	const anchoDe = (encuadre: string) => Number(encuadre.split(' ')[2]);
 
+	/**
+	 * El lienzo de América, con océano de sobra a la derecha.
+	 *
+	 * La Península va ahí encima, y con el encuadre justo quedaba rozando el
+	 * Caribe. El aire no es decoración: entre las dos orillas hay un Atlántico,
+	 * y sin separación parecen el mismo continente.
+	 */
+	const LIENZO = (() => {
+		const [x, y, ancho, alto] = ENCUADRE.split(' ').map(Number);
+		return [x, y, ancho * 1.42, alto].join(' ');
+	})();
+
 	const enAmerica = PAISES.filter((p) => !IBERIA.includes(p.codigo));
 	const enIberia = PAISES.filter((p) => IBERIA.includes(p.codigo));
 
@@ -71,7 +83,7 @@
 
 <div class="conjunto">
 	<div class="mapa">
-		<svg viewBox={ENCUADRE} role="group" aria-label="Géneros por país">
+		<svg viewBox={LIENZO} role="group" aria-label="Géneros por país">
 			{#each enAmerica as p (p.codigo)}
 				{@render pais(p, anchoDe(ENCUADRE))}
 			{/each}
@@ -203,7 +215,7 @@
 		position: absolute;
 		top: 0;
 		right: 0;
-		width: 34%;
+		width: 27%;
 		height: auto;
 	}