diff --git a/src/app.css b/src/app.css
index e4ec166..cb9037b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -61,8 +61,9 @@
 	 * conviven sin pelearse; y deja el dorado para lo que se pulsa y lo que se
 	 * elige, que es su trabajo en el resto del sitio.
 	 */
-	--c-dato: oklch(0.78 0.13 192);
-	--c-dato-tenue: oklch(0.52 0.085 200);
+	--c-dato: oklch(0.74 0.09 198);
+	--c-dato-tenue: oklch(0.5 0.06 205);
+	--c-dato-vacio: oklch(0.29 0.03 255);
 
 	--c-danger: oklch(0.72 0.16 22);
 	--c-focus: oklch(0.84 0.12 88);
@@ -212,8 +213,9 @@
 	--c-accent-sombra: oklch(0.6 0.12 74);
 
 	/* En claro se invierten: el dato pintado tiene que ser oscuro sobre papel. */
-	--c-dato: oklch(0.52 0.09 200);
-	--c-dato-tenue: oklch(0.82 0.045 200);
+	--c-dato: oklch(0.5 0.085 200);
+	--c-dato-tenue: oklch(0.78 0.05 200);
+	--c-dato-vacio: oklch(0.93 0.012 255);
 
 	--c-danger: oklch(0.5 0.17 25);
 	--c-focus: oklch(0.5 0.13 264);
diff --git a/src/lib/components/MapaDeGeneros.svelte b/src/lib/components/MapaDeGeneros.svelte
index 58728b7..703d28d 100644
--- a/src/lib/components/MapaDeGeneros.svelte
+++ b/src/lib/components/MapaDeGeneros.svelte
@@ -54,18 +54,6 @@
 	/** 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));
 
@@ -83,7 +71,25 @@
 
 <div class="conjunto">
 	<div class="mapa">
-		<svg viewBox={LIENZO} role="group" aria-label="Géneros por país">
+		<!--
+			El mismo oro de los botones, aquí como degradado de SVG: el token `--oro`
+			es un `linear-gradient` de CSS y no se puede usar en un `fill`. Las cinco
+			paradas y el ángulo son los suyos, para que el punto del mapa y el botón
+			dorado sean el mismo metal.
+		-->
+		<svg width="0" height="0" aria-hidden="true" class="paleta">
+			<defs>
+				<linearGradient id="oro-del-mapa" x1="0" y1="0" x2="0.24" y2="1">
+					<stop offset="0%" stop-color="var(--c-accent-sombra)" />
+					<stop offset="24%" stop-color="var(--c-accent-superficie)" />
+					<stop offset="46%" stop-color="var(--c-accent-brillo)" />
+					<stop offset="64%" stop-color="var(--c-accent-superficie)" />
+					<stop offset="100%" stop-color="var(--c-accent-sombra)" />
+				</linearGradient>
+			</defs>
+		</svg>
+
+		<svg viewBox={ENCUADRE} role="group" aria-label="Géneros por país">
 			{#each enAmerica as p (p.codigo)}
 				{@render pais(p, anchoDe(ENCUADRE))}
 			{/each}
@@ -203,32 +209,27 @@
 	}
 
 	/*
-	 * La Península va sobre el mapa de América, en el hueco del Atlántico
-	 * norte, que es donde le corresponde y donde no tapa nada. Encima de la
-	 * lista de países no pintaba nada: no es un índice, es mapa.
+	 * Los dos mapas en columnas, no uno encima del otro.
+	 *
+	 * Con la Península en posición absoluta había que ensanchar el lienzo de
+	 * América para hacerle sitio, y eso dejaba el mapa descentrado en su caja.
+	 * En columnas cada uno ocupa lo suyo, el hueco entre ellos es el Atlántico
+	 * y el conjunto se centra solo.
 	 */
 	.mapa {
-		position: relative;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
+		gap: var(--sp-6);
+		align-items: start;
+		justify-items: center;
 	}
 
 	.peninsula {
-		position: absolute;
-		top: 0;
-		right: 0;
-		width: 27%;
+		display: block;
+		width: 100%;
 		height: auto;
 	}
 
-	/*
-	 * Iberoamérica es casi tan alta como ancha, así que el límite lo pone el
-	 * alto: a todo lo ancho ocupaba la pantalla entera y había que bajar para
-	 * ver que debajo hay un buscador.
-	 */
-	.mapa {
-		display: grid;
-		place-items: center;
-	}
-
 	.listado {
 		list-style: none;
 		margin: 0;
@@ -285,12 +286,22 @@
 		}
 	}
 
+	/*
+	 * Cada mapa llena su columna y el alto lo limita la ventana: Iberoamérica es
+	 * casi tan alta como ancha, y a todo lo ancho ocupaba la pantalla entera.
+	 */
+	/* El lienzo que solo lleva el degradado no ocupa sitio. */
+	.paleta {
+		position: absolute;
+		width: 0;
+		height: 0;
+	}
+
 	svg {
 		display: block;
-		width: auto;
+		width: 100%;
 		height: auto;
-		max-width: min(100%, 26rem);
-		max-height: 58vh;
+		max-height: 62vh;
 	}
 
 	path {
@@ -316,7 +327,7 @@
 	 * el relleno a medias parecía que Brasil no estaba en el mapa.
 	 */
 	.vacio {
-		fill: var(--c-bg-raised);
+		fill: var(--c-dato-vacio);
 		stroke: color-mix(in oklab, var(--c-text) 22%, transparent);
 		pointer-events: none;
 	}
@@ -363,22 +374,23 @@
 	}
 
 	/*
-	 * El punto es el área de golpeo y solo se ve cuando hace falta: transparente
-	 * en reposo, marcado al pasar por encima, al enfocar con el teclado y en el
-	 * país elegido.
+	 * El punto es dos cosas a la vez: el área de golpeo —Puerto Rico mide cuatro
+	 * píxeles— y la señal de que ahí hay algo que abrir. Va en el mismo oro que
+	 * los botones del sitio, con su degradado: es el color de lo que se pulsa.
 	 */
 	.punto {
-		fill: transparent;
-		stroke: none;
-		transition: fill 0.15s var(--suave);
-	}
-
-	.pais:focus-visible .punto {
-		fill: color-mix(in oklab, var(--c-text) 70%, transparent);
+		fill: url(#oro-del-mapa);
+		stroke: color-mix(in oklab, var(--c-accent-sombra) 70%, transparent);
+		stroke-width: 0.8;
+		vector-effect: non-scaling-stroke;
+		transition: opacity 0.15s var(--suave);
+		opacity: 0.9;
 	}
 
+	.pais:hover .punto,
+	.pais:focus-visible .punto,
 	.pais.elegido .punto {
-		fill: var(--c-bg);
+		opacity: 1;
 	}
 
 	.fila.elegido .nombre {