From a1154b3a0bd01f9c88e8a8bbc369e0d5336a0fa4 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 12 Sep 2026 17:46:13 +0200
Subject: [PATCH] Restore translucent navigation on scroll

---
 src/lib/components/Cabecera.svelte                 | 11 +++++------
 src/routes/(sitio)/interpretes/[slug]/+page.svelte | 14 +-------------
 2 files changed, 6 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/Cabecera.svelte b/src/lib/components/Cabecera.svelte
index e0f5ccd..e1be37a 100644
--- a/src/lib/components/Cabecera.svelte
+++ b/src/lib/components/Cabecera.svelte
@@ -17,9 +17,8 @@
 	 *
 	 * Arriba del todo, la cabecera se aparta y deja ver la portada por debajo:
 	 * es lo que hace que la primera pantalla llegue hasta el borde en vez de
-	 * empezar bajo una franja. En cuanto se baja, se vuelve opaca, porque
-	 * entonces lo que pasa por detrás es texto y el menú tiene que seguir
-	 * leyéndose.
+	 * empezar bajo una franja. En cuanto se baja, gana una base translúcida y
+	 * desenfocada para que el menú siga leyéndose sin ocultar lo que pasa detrás.
 	 */
 	let desplazada = $state(false);
 
@@ -204,10 +203,10 @@
 			backdrop-filter 0.35s var(--suave);
 	}
 
-	/* Al bajar, detrás pasa texto: la cabecera se vuelve opaca y desenfoca. */
+	/* Al bajar conserva la transparencia y desenfoca lo que pasa por detrás. */
 	.cabecera.desplazada {
 		background-image: none;
-		background-color: color-mix(in oklab, var(--c-bg) 82%, transparent);
+		background-color: color-mix(in oklab, var(--c-bg) 68%, transparent);
 		backdrop-filter: var(--desenfoque);
 	}
 
@@ -218,7 +217,7 @@
 	 */
 	@supports not (backdrop-filter: blur(1px)) {
 		.cabecera.desplazada {
-			background-color: color-mix(in oklab, var(--c-bg) 96%, transparent);
+			background-color: color-mix(in oklab, var(--c-bg) 88%, transparent);
 		}
 	}
 
diff --git a/src/routes/(sitio)/interpretes/[slug]/+page.svelte b/src/routes/(sitio)/interpretes/[slug]/+page.svelte
index ea71f95..10a7764 100644
--- a/src/routes/(sitio)/interpretes/[slug]/+page.svelte
+++ b/src/routes/(sitio)/interpretes/[slug]/+page.svelte
@@ -4,7 +4,6 @@
 	import RejillaCanciones from '$lib/components/RejillaCanciones.svelte';
 	import RetratoArtista from '$lib/components/RetratoArtista.svelte';
 	import TarjetaAlbum from '$lib/components/TarjetaAlbum.svelte';
-	import type { TipoArtista } from '$lib/types';
 	import { mostrarHeroe } from '$lib/presentacion';
 
 	let { data } = $props();
@@ -14,17 +13,6 @@
 	const ubicacion = $derived(
 		[data.artista.lugarOrigen, data.artista.pais].filter(Boolean).join(', ')
 	);
-	const tipos: Record<TipoArtista, string> = {
-		persona: 'Solista',
-		grupo: 'Grupo',
-		proyecto: 'Proyecto musical',
-		virtual: 'Artista virtual'
-	};
-	const nombreTipo = $derived(
-		data.artista.tipo === 'virtual'
-			? tipos.virtual
-			: `${tipos[data.artista.tipo]}${data.artista.virtual ? ' virtual' : ''}`
-	);
 	const heroAmplio = $derived(
 		mostrarHeroe(
 			data.artista.presentacion,
@@ -63,7 +51,7 @@
 			{/if}
 
 			<div class="presentacion">
-				<p class="ceja">{nombreTipo} · {data.artista.codigo}</p>
+				<p class="ceja">{data.artista.codigo}</p>
 				<h1>{data.artista.nombre}</h1>
 				{#if data.artista.descripcion}<p class="entradilla">{data.artista.descripcion}</p>{/if}