/**
 * componentes.css — las piezas que se repiten por toda la web.
 *
 * ══════════════════════════════════════════════════════════════════════════
 *  REGLAS DE LA CASA, y no son adorno:
 *
 *   · UN nivel de clase. `.svh-tarjeta__titulo`, nunca
 *     `.svh-tarjeta .contenido .titulo h3`. Si hay que subir la
 *     especificidad para ganar, es que algo está mal.
 *   · Ni un color, espacio, radio o sombra suelto: todo sale de un token.
 *   · CERO `!important` en los componentes. El orden lo decide el momento de
 *     encolado (vamos después de Woodmart), no la especificidad. Los únicos
 *     seis de todo el tema están en `base.css`, y los dos son de
 *     accesibilidad: el texto para lectores de pantalla y el respeto a
 *     `prefers-reduced-motion`. Los dos están comentados donde están.
 *   · El color NUNCA es el único indicador (8 % de daltonismo): siempre va
 *     acompañado de un icono, una palabra o una forma.
 * ══════════════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════
 * 1 · BOTONES
 * ═══════════════════════════════════════════════════════════════════ */

.svh-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-3) var(--svh-espacio-6);
	border: 1px solid transparent;
	border-radius: var(--svh-radio-md);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--svh-transicion), border-color var(--svh-transicion);
}

.svh-boton--principal {
	background: var(--svh-marca);
	color: var(--svh-marca-texto);
}

.svh-boton--principal:hover { background: var(--svh-marca-hover); }

.svh-boton--secundario {
	background: transparent;
	color: var(--svh-texto);
	border-color: var(--svh-borde);
}

.svh-boton--secundario:hover { background: var(--svh-fondo-suave); }

/* ═══════════════════════════════════════════════════════════════════
 * 2 · LA TARJETA DE CREADOR — exactamente 7 elementos, ni uno más.
 *
 * Fuera: biografía, logos de marcas, contadores totales, botones sociales.
 * Lo que la separa de una lista de nombres es la tira de 3 miniaturas.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-rejilla-creadores {
	display: grid;
	gap: var(--svh-espacio-6);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.svh-tarjeta-creador {
	/* Nivel 3 de tokens: solo para lo que es de este componente. */
	--tarjeta-padding: var(--svh-espacio-4);
	--tarjeta-radio: var(--svh-radio-lg);

	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-3);
	padding: var(--tarjeta-padding);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--tarjeta-radio);
	box-shadow: var(--svh-sombra-tarjeta);
	transition: box-shadow var(--svh-transicion);
}

.svh-tarjeta-creador:hover { box-shadow: var(--svh-sombra-md); }

/* 1 · Foto. `aspect-ratio` reserva el hueco antes de cargar: sin esto la
   página salta al llegar la imagen (eso es el CLS). */
.svh-tarjeta-creador__foto {
	aspect-ratio: 1;
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-hundido);
}

/* 2 · Nombre + @usuario */
.svh-tarjeta-creador__nombre {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

.svh-tarjeta-creador__handle {
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

/* 3 · Sector · Provincia */
.svh-tarjeta-creador__donde {
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

/* 4 · Iconos de las redes CONECTADAS. Las que no lo están no se pintan:
   una ficha llena de huecos grises comunica abandono. */
.svh-redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.svh-redes__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;      /* > 24 px: criterio 2.5.8 */
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	color: var(--svh-texto-suave);
}

/* 5 y 6 · Los dos números: tamaño y calidad */
.svh-tarjeta-creador__cifras {
	display: flex;
	gap: var(--svh-espacio-4);
	margin-block-start: auto;
}

.svh-cifra__valor {
	display: block;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.svh-cifra__etiqueta {
	display: block;
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
}

/* 7 · La tira de 3 miniaturas */
.svh-tarjeta-creador__tira {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--svh-espacio-1);
}

.svh-tarjeta-creador__tira img {
	aspect-ratio: 9 / 16;
	inline-size: 100%;
	/* 28/08/2026 · F8 · aquí ya NO se declara `object-fit`. Lo declara
	   `.svh-portada`, que estas tres miniaturas llevan siempre, y así
	   `.svh-portada--entera` puede cambiarlo cuando la foto no tiene la
	   forma del hueco. Con el `object-fit: cover` que había aquí —una clase
	   más un elemento, o sea más fuerza— las tres miniaturas de la tarjeta
	   se seguían cortando un 25 % mientras las de la parrilla ya salían
	   enteras. Es la regla de la casa: si hay que subir la especificidad
	   para ganar, es que sobra la declaración de abajo. */
	border-radius: var(--svh-radio-sm);
	background: var(--svh-fondo-hundido);
}

/* ═══════════════════════════════════════════════════════════════════
 * 3 · LA PARRILLA DE VÍDEOS — vertical 9:16, como el contenido real.
 *     4-5 columnas en escritorio, 2 en móvil. Cero carruseles.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-parrilla {
	display: grid;
	gap: var(--svh-espacio-4);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px)  { .svh-parrilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .svh-parrilla { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1400px) { .svh-parrilla { grid-template-columns: repeat(5, 1fr); } }

.svh-video {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-hundido);
	text-decoration: none;
}

.svh-video__portada {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ── EL PIE DE LA MINIATURA, Y POR QUÉ LLEVA FONDO SÓLIDO ──────────
   Antes el texto blanco se apoyaba SOLO en un degradado, o sea: en que
   detrás hubiera una foto. Cuando la foto no carga —y el 19/08/2026 no
   cargaba el 85 % de las veces— el degradado sigue ahí, pero el margen
   se vuelve finísimo y ninguna herramienta automática puede medir el
   contraste, porque `getComputedStyle` solo sabe leer `background-color`,
   no un degradado.

   Un contraste que no se puede medir es un contraste del que no te
   puedes fiar, y ya nos costó un rediseño entero. Así que aquí hay las
   dos cosas: el degradado (bonito sobre foto) **y** un color de fondo
   sólido debajo. El blanco sobre `#111827` da 16,1:1 pase lo que pase. */
.svh-video__pie {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-6) var(--svh-espacio-3) var(--svh-espacio-3);
	background-color: rgb(17 24 39 / 0.82);
	background-image: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
	color: #FFFFFF;
	font-size: var(--svh-txt-micro);
	font-variant-numeric: tabular-nums;
}

/* «sin datos» NO se pinta como un dato. Va en cursiva y apagado, pero
   sin bajar de 4,5:1 sobre el fondo del pie. */
/* 🔴 23/08/2026 · el color estaba escrito a mano: `#D1D5DB`. Medido en la
   ficha de creador con `getComputedStyle`: **1,34:1** sobre el fondo de la
   tarjeta, en 24 elementos. El mínimo del criterio 1.4.3 son 4,5:1, o sea
   que ese texto era invisible para mucha gente. Y `contraste.py` no podía
   verlo, porque solo mira `tokens.css` y esto era un hex suelto.
   Pasa al token de texto suave. Medido en la web real: el fondo de esa fila
   no es blanco, es `#F3F4F6`, y con `--svh-texto-tenue` se quedaba en
   **4,39:1** — a un pelo de cumplir, pero sin cumplir. Con
   `--svh-texto-suave` da **6,87:1**. Y el modo «contraste alto» del widget
   ya lo sube al máximo por encima de esto. */
.svh-video__dato--vacio {
	font-style: italic;
	color: var(--svh-texto-suave);
}

.svh-video__red {
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
}

.svh-video__red .svh-icono { inline-size: 18px; block-size: 18px; }

/* ── EL ICONO DE RED COMO ENLACE (v5, 29/08/2026) ──────────────────────
   El icono lleva al muro de esa red (`/red/{red}/`). Es un SEGUNDO enlace
   dentro de la tarjeta: la tarjeta entera ya lleva al vídeo con el «estirado»
   del título (`.svh-video__titulo a::after`, z-index:1). Para poder pulsarse,
   este enlace tiene que quedar POR ENCIMA de ese estirado → z-index:2. Diana
   de 24 px (WCAG 2.5.8) sin cambiar la altura de la fila, y foco visible con
   teclado. El blanco va sobre el fondo opaco del pie (#111827 → 16:1). */
a.svh-video__red {
	position: relative;
	z-index: 2;
	margin-inline-start: auto;
	padding: 3px var(--svh-espacio-2);
	border-radius: var(--svh-radio-full);
	color: #FFFFFF;
	text-decoration: none;
}

a.svh-video__red:hover { background: rgb(255 255 255 / 0.18); }

a.svh-video__red:focus-visible {
	outline: 3px solid var(--svh-foco, #2563EB);
	outline-offset: 2px;
}

.svh-video__titulo {
	margin-block: var(--svh-espacio-2) 0;
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	line-height: 1.35;
	color: var(--svh-texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* El título de la miniatura es un enlace de bloque, no un enlace dentro de
   una frase: se le da caja para que sea una diana cómoda. La norma 2.5.8
   ya se cumpliría solo con la portada (el mismo destino, y mide 240 px),
   pero obligar a apuntar a un renglón de 13 px es incómodo con el pulgar,
   y el 69,9 % del tráfico viene de un pulgar. */
.svh-video__titulo a {
	display: block;
	padding-block: var(--svh-espacio-1);
	min-block-size: 24px;
	color: inherit;
	text-decoration: none;
}

.svh-video__titulo a:hover { text-decoration: underline; }

.svh-video__fecha {
	margin: var(--svh-espacio-1) 0 0;
	font-size: 0.75rem;
	color: var(--svh-texto-tenue);
}

/* ═══════════════════════════════════════════════════════════════════
 * 4 · MÉTRICAS — barras horizontales.
 *
 * PROHIBIDOS: tartas, donuts, 3D, y usar el color como único indicador.
 * Cada barra lleva su número escrito al lado: quien no distinga el color
 * sigue teniendo el dato.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-barra {
	display: grid;
	grid-template-columns: 8rem 1fr auto;
	align-items: center;
	gap: var(--svh-espacio-3);
	padding-block: var(--svh-espacio-2);
}

.svh-barra__etiqueta { font-size: var(--svh-txt-micro); color: var(--svh-texto-suave); }

.svh-barra__pista {
	block-size: 10px;
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	overflow: hidden;
}

.svh-barra__valor {
	block-size: 100%;
	border-radius: var(--svh-radio-full);
	background: var(--svh-marca);
}

.svh-barra__cifra {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* El origen y la fecha del dato. Esto NO es letra pequeña decorativa:
   la trazabilidad es el producto. Los seguidores falsos son el 56,5 % de
   las quejas de las marcas. */
.svh-origen {
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-tenue);
}

/* ═══════════════════════════════════════════════════════════════════
 * 5 · SEMÁFORO — 5 estados, ni uno más.
 *     El color NUNCA va solo: siempre lleva su palabra al lado.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-estado {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-1) var(--svh-espacio-3);
	border-radius: var(--svh-radio-full);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
}

.svh-estado::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--svh-radio-full);
	background: currentColor;
}

.svh-estado--ok       { color: var(--svh-estado-ok);       background: var(--svh-estado-ok-fondo); }
.svh-estado--curso    { color: var(--svh-estado-curso);    background: var(--svh-estado-curso-fondo); }
.svh-estado--avisa    { color: var(--svh-estado-avisa);    background: var(--svh-estado-avisa-fondo); }
.svh-estado--error    { color: var(--svh-estado-error);    background: var(--svh-estado-error-fondo); }
.svh-estado--inactivo { color: var(--svh-estado-inactivo); background: var(--svh-fondo-hundido); }

/* ═══════════════════════════════════════════════════════════════════
 * 6 · LA FICHA DEL CREADOR — es una página de PRODUCTO.
 *
 * 1 de cada 3 visitas empieza aquí, sin pasar por la portada, y rebota el
 * 61 %. Así que la primera pantalla tiene que bastarse sola.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-ficha {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: var(--svh-espacio-6) var(--svh-espacio-4) var(--svh-espacio-24);
}

.svh-ficha__cabecera {
	display: grid;
	gap: var(--svh-espacio-6);
	align-items: start;
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.svh-ficha__cabecera { grid-template-columns: 180px 1fr auto; }
}

.svh-ficha__foto {
	aspect-ratio: 1;
	inline-size: 100%;
	max-inline-size: 180px;
	object-fit: cover;
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-hundido);
}

.svh-ficha__linea {
	margin: var(--svh-espacio-2) 0 0;
	color: var(--svh-texto-suave);
}

/* El número grande de alcance, y el segundo de calidad. Solo dos. */
.svh-ficha__numeros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-8);
	margin-block-start: var(--svh-espacio-4);
}

.svh-numero-grande {
	font-size: var(--svh-txt-numero);
	font-weight: 700;
	line-height: 1;
	/* 🔴 31/08/2026 · «1,2 K» se leía «1, 2 K». Medido en la ficha de Woman
	   Wishes: el texto real ERA correcto (`1,2 K`) — lo que separaba la coma
	   era `tabular-nums`, que da a TODOS los caracteres el ancho de un dígito;
	   con una coma decimal, eso deja un hueco que se lee como un espacio.
	   Las cifras tabulares sirven para columnas alineadas (tablas), no para
	   un número suelto y grande. Aquí van proporcionales, que es como se
	   compone un número para leerlo. Donde SÍ hay columnas (tablas de
	   precios, listados) el `tabular-nums` se queda tal cual. */
	font-variant-numeric: proportional-nums;
}

/* La etiqueta de sector, clicable */
.svh-etiqueta {
	display: inline-block;
	padding: var(--svh-espacio-1) var(--svh-espacio-3);
	border-radius: var(--svh-radio-full);
	background: var(--svh-marca-suave);
	color: var(--svh-marca);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	text-decoration: none;
}

/* ── La barra fija de móvil ────────────────────────────────────────
   «Contactar» desde el primer píxel. Solo el 45,2 % de las sesiones
   móviles hacen scroll: si el botón está abajo del todo, no existe. */
.svh-barra-movil {
	position: fixed;
	inset-inline: 0;
	/* 28/08/2026 · F4. ANTES: `0`, o sea pegada al borde de abajo — y el aviso
	   de cookies (que también va pegado abajo, y con z-index 99999 contra el
	   40 de aquí) la tapaba ENTERA. Medido en la ficha de creador a 375x812:
	   la barra ocupaba 745-812 y el aviso 706-812, así que el botón
	   «Contactar» de la barra quedaba tapado al 100 %.
	   Ahora la barra se sube justo por encima del aviso. Si no hay aviso, la
	   variable vale 0 y la barra se queda donde estaba. */
	inset-block-end: var(--svh-ck-alto, 0px);
	z-index: 40;
	display: flex;
	gap: var(--svh-espacio-3);
	padding: var(--svh-espacio-3);
	padding-block-end: calc(var(--svh-espacio-3) + env(safe-area-inset-bottom));
	background: var(--svh-fondo-tarjeta);
	border-block-start: 1px solid var(--svh-borde-suave);
	box-shadow: var(--svh-sombra-flotante);
}

.svh-barra-movil .svh-boton { flex: 1; }

@media (min-width: 800px) { .svh-barra-movil { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
 * 7 · PESTAÑAS DE REDES — «Todo» primero, mezclado por fecha.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-pestanas {
	display: flex;
	gap: var(--svh-espacio-2);
	overflow-x: auto;
	padding-block: var(--svh-espacio-3);
	border-block-end: 1px solid var(--svh-borde-suave);
	scrollbar-width: thin;
}

.svh-pestana {
	flex: none;
	padding: var(--svh-espacio-2) var(--svh-espacio-4);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-full);
	background: transparent;
	color: var(--svh-texto-suave);
	font: inherit;
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* El estado activo NO se marca solo con color: también con borde y peso. */
.svh-pestana[aria-current="page"] {
	background: var(--svh-marca);
	border-color: var(--svh-marca);
	color: var(--svh-marca-texto);
}

/* ═══════════════════════════════════════════════════════════════════
 * 8 · ESTADOS VACÍOS — tres distintos, no uno.
 *
 * Un estado vacío bien hecho convierte un callejón sin salida en un clic.
 * Nunca una rejilla de cuadros grises.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-vacio {
	padding: var(--svh-espacio-12) var(--svh-espacio-6);
	text-align: center;
	border: 1px dashed var(--svh-borde);
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-suave);
}

.svh-vacio__titulo { margin: 0 0 var(--svh-espacio-2); font-size: 1.125rem; font-weight: 700; }
.svh-vacio__texto  { margin: 0 0 var(--svh-espacio-6); color: var(--svh-texto-suave); }

/* ═══════════════════════════════════════════════════════════════════
 * 9 · ESQUELETO ANTI-SALTO — para lo que monta React después.
 *
 * El truco: ocupa EXACTAMENTE la altura que ocupará el contenido real.
 * Sin esto la página da un salto al montar, y eso es CLS.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-esqueleto {
	border-radius: var(--svh-radio-md);
	background: linear-gradient(90deg,
		var(--svh-fondo-hundido) 25%,
		var(--svh-fondo-suave) 50%,
		var(--svh-fondo-hundido) 75%);
	background-size: 200% 100%;
	animation: svh-brillo 1.4s ease-in-out infinite;
}

@keyframes svh-brillo {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════
 * 10 · EL PANEL DEL CREADOR
 *
 * Barra lateral a la izquierda en escritorio; arriba y plegada en móvil.
 * Máximo 7 entradas: más de eso y nadie las lee.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-panel {
	display: grid;
	gap: var(--svh-espacio-8);
	max-inline-size: 1180px;
	margin-inline: auto;
	padding: var(--svh-espacio-6) var(--svh-espacio-4) var(--svh-espacio-16);
	grid-template-columns: 1fr;
}

@media (min-width: 860px) {
	.svh-panel { grid-template-columns: 220px 1fr; }
}

.svh-panel__quien {
	margin: 0 0 var(--svh-espacio-4);
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-1);
}

.svh-panel__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-1);
}

@media (min-width: 860px) {
	.svh-panel__menu { flex-direction: column; }
}

.svh-panel__menu a {
	display: block;
	padding: var(--svh-espacio-2) var(--svh-espacio-3);
	border-radius: var(--svh-radio-md);
	color: var(--svh-texto-suave);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--svh-txt-micro);
}

.svh-panel__menu a:hover { background: var(--svh-fondo-suave); }

/* El activo NO se marca solo con color: también con fondo y peso. */
.svh-panel__menu a[aria-current="page"] {
	background: var(--svh-marca-suave);
	color: var(--svh-marca);
}

.svh-panel__caja {
	padding: var(--svh-espacio-6);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
	margin-block-end: var(--svh-espacio-6);
}

.svh-panel__cifras {
	display: grid;
	gap: var(--svh-espacio-4);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.svh-panel__cifras .svh-panel__caja {
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-1);
	margin: 0;
}

.svh-panel__redes {
	display: grid;
	gap: var(--svh-espacio-4);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.svh-panel__redes .svh-panel__caja { margin: 0; }

/* La checklist que se marca sola */
.svh-pasos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-2);
}

.svh-pasos li {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-2);
}

.svh-pasos--hecho { color: var(--svh-texto-tenue); }
.svh-pasos--hecho span:first-child { color: var(--svh-estado-ok); }

/* ═══════════════════════════════════════════════════════════════════
 * 11 · PRECIOS
 * ═══════════════════════════════════════════════════════════════════ */

.svh-precios {
	display: grid;
	gap: var(--svh-espacio-6);
	margin-block-start: var(--svh-espacio-12);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: start;
}

.svh-precios__plan {
	padding: var(--svh-espacio-8);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
	text-align: center;
}

/* El del medio, marcado. Y no solo con color: también con borde y con la
   etiqueta «Más popular», para quien no distinga el matiz. */
.svh-precios__plan--destacado {
	border-color: var(--svh-marca);
	border-width: 2px;
	box-shadow: var(--svh-sombra-md);
}

.svh-tabla {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block-start: var(--svh-espacio-6);
}

.svh-tabla th,
.svh-tabla td {
	padding: var(--svh-espacio-3);
	text-align: start;
	border-block-end: 1px solid var(--svh-borde-suave);
	font-size: var(--svh-txt-micro);
}

.svh-tabla th { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
 * 12 · CONTENEDOR — la anchura de lectura, en un solo sitio.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-contenedor {
	max-inline-size: 1180px;
	margin-inline: auto;
	padding-inline: var(--svh-espacio-4);
}

/* ═══════════════════════════════════════════════════════════════════
 * 13 · CABECERA — mobile-first: el cajón de <details> es lo normal,
 *      el escritorio es la excepción que se enciende con min-width.
 *
 *      `--svh-cabecera-alto` existe para que `[id] { scroll-margin-top }`
 *      de `base.css` (6rem) y la altura real de la cabecera fija no se
 *      desincronicen si un día cambia el tamaño del logo o el padding.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-cabecera {
	--svh-cabecera-alto: 4rem;

	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	/* V2: la cabecera es del color del fondo, separada solo por el filo. */
	background: var(--svh-fondo);
	border-block-end: 1px solid var(--svh-borde-suave);
}

.svh-cabecera__fila {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-4);
	block-size: var(--svh-cabecera-alto);
}

/* ── El logo V2: la mariposa + «SocialVideoHub.es» ─────────────────
   La mariposa va tal cual su SVG (nunca recoloreada); «Video» lleva el
   rosa de las letras del logotipo original y «.es» el rosa de marca
   del modo. Satoshi 700, apretado −0,02 em (papel de Design §3). */
.svh-cabecera__logo {
	display: flex;
	align-items: center;
	gap: 9px;
	/* 🔴 31/08/2026 · EL LOGO SE APLASTABA A 24 PÍXELES. Medido en la web
	   viva a 1440: el logo ocupaba 24 px cuando su contenido necesita 144, y
	   su texto se salía por encima del menú. Tenía `white-space: nowrap` —o
	   sea, no se parte— pero le faltaba lo otro: `flex: none`. En una fila
	   flexible, todo lo que no diga «no me encojas» cede su ancho cuando
	   algo empuja; y aquí empujaba el menú, que lleva `flex: 1`.
	   `flex: none` = el logo mide lo que mide y no se toca. Es la pareja
	   obligatoria del `nowrap`: sin ella, el nombre se sale de su caja. */
	flex: none;
	font-size: 1.0625rem;             /* 17 px, el de la maqueta */
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--svh-texto);
	text-decoration: none;
	white-space: nowrap;
}

.svh-cabecera__logo .svh-mariposa-svg { flex: none; }
.svh-cabecera__video { color: var(--svh-rosa-letra-video); }
.svh-cabecera__es    { color: var(--svh-marca); }

/* ── El botón claro/oscuro (V2) ────────────────────────────────────
   Píldora de superficie con el mínimo pulsable de la casa (44 px).
   Se identifica por su texto (19,8:1): el borde es el decorativo. */
.svh-boton-tema {
	min-inline-size: var(--svh-alto-pulsable);
	min-block-size: var(--svh-alto-pulsable);
	padding: 0 12px;
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-tarjeta);
	color: var(--svh-texto);
	font: 600 0.8125rem/1 var(--svh-fuente-cuerpo);
	cursor: pointer;
	white-space: nowrap;
}

.svh-boton-tema:hover { background: var(--svh-fondo-hundido); }

/* En móvil solo caben el logo y el botón de menú: todo lo demás vive
   dentro del cajón. */
.svh-cabecera__nav,
.svh-cabecera > .svh-cabecera__fila > .svh-buscador,
.svh-cabecera__acciones {
	display: none;
}

.svh-cabecera__movil { margin-inline-start: auto; position: relative; }

.svh-cabecera__hamburguesa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--svh-radio-md);
	color: var(--svh-texto);
	cursor: pointer;
	list-style: none;
}

/* El navegador pinta su propio triángulo de <summary>; con dos reglas
   (WebKit y estándar) se quita, porque ya hay un icono propio. */
.svh-cabecera__hamburguesa::-webkit-details-marker { display: none; }
.svh-cabecera__hamburguesa::marker { content: ""; }

.svh-cabecera__hamburguesa:hover { background: var(--svh-fondo-suave); }

/* El cajón es un panel flotante, no una fila más del documento: si se
   quedara en el flujo normal, su altura fija de la cabecera (pensada para
   una sola línea) lo recortaría y el contenido se vería encima de la
   portada en vez de debajo de la cabecera. `position: absolute` lo saca
   del flujo y lo pone donde tiene que estar, con fondo propio para que
   no se lea mezclado con lo que hay detrás. */
.svh-cabecera__cajon {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 100%;
	inline-size: min(320px, 100vw);
	max-block-size: calc(100vh - var(--svh-cabecera-alto));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-4);
	padding: var(--svh-espacio-4);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-block-start: 1px solid var(--svh-borde-suave);
	border-radius: 0 0 0 var(--svh-radio-lg);
	box-shadow: var(--svh-sombra-flotante);
}

.svh-cabecera__enlaces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-1);
}

.svh-cabecera__enlaces a {
	display: block;
	padding: var(--svh-espacio-2) 0;
	color: var(--svh-texto);
	text-decoration: none;
	font-weight: 600;
}

/* ── El submenú (V2): las 10 redes bajo «Creadores», los países… ───
   En móvil (el cajón) va SIEMPRE visible, como lista anidada con
   sangría: panel completo, nada que descubrir con el pulgar. */
.svh-menu__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--svh-espacio-4);
}

.svh-menu__sub a {
	font-weight: 500;
	color: var(--svh-texto-suave);
}

.svh-cabecera__acciones--movil {
	display: flex;
	gap: var(--svh-espacio-3);
}

.svh-cabecera__acciones--movil .svh-boton { flex: 1; }

/* ── El buscador, en los dos sitios donde aparece ────────────────── */
.svh-buscador {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-2) var(--svh-espacio-2) var(--svh-espacio-2) var(--svh-espacio-4);
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo);
}

.svh-buscador input {
	flex: 1;
	inline-size: 100%;
	border: 0;
	background: transparent;
	color: var(--svh-texto);
	font: inherit;
}

.svh-buscador input:focus { outline: none; }
.svh-buscador:has(input:focus-visible) {
	outline: 3px solid var(--svh-foco);
	outline-offset: 2px;
}

.svh-buscador button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 32px;
	block-size: 32px;
	min-inline-size: 32px;
	min-block-size: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--svh-radio-full);
	background: var(--svh-marca);
	color: var(--svh-marca-texto);
	cursor: pointer;
}

.svh-buscador button svg {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
}

/* ── A partir de aquí, escritorio: se apaga el cajón y se enciende
   la fila completa. ─────────────────────────────────────────────── */
@media (min-width: 960px) {
	.svh-cabecera { --svh-cabecera-alto: 4.5rem; }

	.svh-cabecera__nav,
	.svh-cabecera > .svh-cabecera__fila > .svh-buscador,
	.svh-cabecera__acciones {
		display: flex;
	}

	.svh-cabecera__nav { margin-inline-start: var(--svh-espacio-6); flex: 1; }

	.svh-cabecera__enlaces {
		flex-direction: row;
		/* Con `nowrap` puesto, el aire baja un escalón: así las 7 entradas
		   caben holgadas también en un portátil de 1280. */
		gap: var(--svh-espacio-4);
	}

	/* 🔴 31/08/2026 · LA CABECERA SE APLASTABA, Y SALÍA EN LAS 92 PANTALLAS.
	   Medido en la web viva a 1440: «Cómo funciona» ocupaba 59 px de alto
	   contra los 49 del resto —o sea, PARTIDO EN DOS LÍNEAS— y el campo de
	   buscar se quedaba en 115 px de los 280 que pide, cortando el texto
	   («Buscar creac»). Y no era falta de sitio: la suma de logo + menú +
	   buscador + acciones daba 1.090 px, con 350 px LIBRES.

	   La causa: el nav lleva `flex: 1` (crece), y el buscador no tenía
	   `flex` propio, así que cedía su ancho; y los enlaces no tenían
	   `nowrap`, así que el más largo se partía en vez de pedir su sitio.
	   Dos líneas lo arreglan, sin tocar el diseño ni un color.            */
	.svh-cabecera__enlaces a { padding: var(--svh-espacio-2) 0; }

	/* El nombre de una entrada de menú NUNCA se parte en dos líneas. */
	.svh-cabecera__enlaces > li > a { white-space: nowrap; }

	/* En escritorio el submenú es un panel flotante bajo su padre.
	   Se abre con el ratón (:hover) Y con el teclado (:focus-within):
	   tabular dentro lo mantiene abierto. */
	.svh-menu__con-sub { position: relative; }

	.svh-cabecera__enlaces .svh-menu__sub {
		visibility: hidden;
		opacity: 0;
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: calc(-1 * var(--svh-espacio-3));
		min-inline-size: 200px;
		padding: var(--svh-espacio-2);
		background: var(--svh-fondo-tarjeta);
		border: 1px solid var(--svh-borde-suave);
		border-radius: var(--svh-radio-md);
		box-shadow: var(--svh-sombra-flotante);
		z-index: 60;
	}

	.svh-menu__con-sub:hover .svh-menu__sub,
	.svh-menu__con-sub:focus-within .svh-menu__sub {
		visibility: visible;
		opacity: 1;
	}

	.svh-cabecera__enlaces .svh-menu__sub a {
		padding: var(--svh-espacio-2) var(--svh-espacio-3);
		border-radius: var(--svh-radio-sm);
	}

	.svh-cabecera__enlaces .svh-menu__sub a:hover { background: var(--svh-fondo-hundido); }

	/* `flex: none` = el buscador no cede su ancho a nadie (ver arriba). */
	.svh-cabecera > .svh-cabecera__fila > .svh-buscador { flex: none; inline-size: 280px; max-inline-size: 280px; }

	.svh-cabecera__acciones { gap: var(--svh-espacio-3); flex: none; }

	.svh-cabecera__movil { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * 14 · PIE
 * ═══════════════════════════════════════════════════════════════════ */

.svh-pie {
	margin-block-start: var(--svh-espacio-24);
	background: var(--svh-fondo-suave);
	border-block-start: 1px solid var(--svh-borde-suave);
}

.svh-pie__fila {
	display: grid;
	gap: var(--svh-espacio-8);
	padding-block: var(--svh-espacio-12);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.svh-pie__fila { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.svh-pie__fila { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.svh-pie__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--svh-espacio-2);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--svh-texto);
}

/* V2: el color de «Video» y «.es» lo ponen las clases del nombre
   (svh-cabecera__video / __es), compartidas con la cabecera. */

.svh-pie__marca p:last-child { color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }

.svh-pie__columna h2 {
	margin: 0 0 var(--svh-espacio-3);
	font-size: var(--svh-txt-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--svh-texto-suave);
}

.svh-pie__columna ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-2);
	font-size: var(--svh-txt-micro);
}

.svh-pie__columna a { color: var(--svh-texto-suave); text-decoration: none; }
.svh-pie__columna a:hover { color: var(--svh-texto); text-decoration: underline; }

/* El botón «Preferencias de cookies» tiene que leerse y comportarse
   igual que sus hermanos <a>: mismo color, mismo tamaño, sin marco de
   botón nativo. Es un <button> por dentro porque abre un panel con JS
   (Fase 8), no porque deba parecer distinto. */
.svh-pie__boton-enlace {
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	color: var(--svh-texto-suave);
	font: inherit;
	font-size: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.svh-pie__boton-enlace:hover { color: var(--svh-texto); text-decoration: underline; }

.svh-pie__ia {
	padding-block: var(--svh-espacio-6);
	border-block-start: 1px solid var(--svh-borde-suave);
	color: var(--svh-texto-tenue);
	font-size: var(--svh-txt-micro);
}

.svh-pie__ia p { max-inline-size: 70ch; }

.svh-pie__abajo {
	padding-block: var(--svh-espacio-4);
	border-block-start: 1px solid var(--svh-borde-suave);
	color: var(--svh-texto-tenue);
	font-size: var(--svh-txt-micro);
}

/* ═══════════════════════════════════════════════════════════════════
 * 15 · PORTADA
 * ═══════════════════════════════════════════════════════════════════ */

.svh-portada-hero {
	padding-block: var(--svh-espacio-16) var(--svh-espacio-12);
	background: linear-gradient(180deg, var(--svh-marca-suave), var(--svh-fondo) 70%);
	text-align: center;
}

.svh-portada-hero__caja { max-inline-size: 760px; margin-inline: auto; }

.svh-portada-hero__linea {
	margin-block-start: var(--svh-espacio-4);
	color: var(--svh-texto-suave);
	font-size: 1.0625rem;
}

.svh-portada-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--svh-espacio-3);
	margin-block-start: var(--svh-espacio-6);
}

.svh-portada-cifras {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--svh-espacio-8);
	margin: var(--svh-espacio-8) 0 0;
}

.svh-portada-cifras dt {
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
}

.svh-portada-cifras dd {
	margin: 0;
	font-size: var(--svh-txt-titulo);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.svh-portada-seccion { padding-block: var(--svh-espacio-12); }

.svh-portada-seccion__titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--svh-espacio-3);
	margin-block-end: var(--svh-espacio-6);
}

.svh-portada-seccion__titulo h2 { margin: 0; }

.svh-portada-seccion__intro {
	max-inline-size: 65ch;
	color: var(--svh-texto-suave);
}

.svh-portada-redes {
	display: grid;
	gap: var(--svh-espacio-8);
	margin-block-start: var(--svh-espacio-6);
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.svh-portada-redes { grid-template-columns: repeat(3, 1fr); }
}

.svh-portada-redes__grupo h3 {
	margin: 0 0 var(--svh-espacio-3);
	font-size: 1.0625rem;
	font-weight: 700;
}

.svh-redes--etiquetadas {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--svh-espacio-2);
}

.svh-redes--etiquetadas li {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-2);
}

.svh-portada-publicos {
	display: grid;
	gap: var(--svh-espacio-6);
	margin-block-start: var(--svh-espacio-6);
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.svh-portada-publicos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.svh-portada-publicos { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
 * 16 · PÁGINA GENÉRICA, BLOG Y BÚSQUEDA
 * ═══════════════════════════════════════════════════════════════════ */

.svh-pagina__cuerpo {
	max-inline-size: 70ch;
	margin-block-start: var(--svh-espacio-6);
}

.svh-pagina__cuerpo :where(h2, h3) { margin-block-start: var(--svh-espacio-8); }

.svh-lista-entradas {
	display: grid;
	gap: var(--svh-espacio-4);
	margin-block-start: var(--svh-espacio-6);
}

/* ═══════════════════════════════════════════════════════════════════
 * 14 · EL MARCADOR DE POSICIÓN — cuando no hay portada
 *
 *  Sergio, 19/08/2026: «si una imagen no existe, que se vea intencionado,
 *  no averiado.» Esto es esa pieza.
 *
 *  Se dibuja con CSS y con el SVG de la red que YA viaja en la página:
 *  **cero peticiones de red**. Por eso es la única parte del sistema de
 *  imágenes que no puede fallar nunca — no hay nada que pueda dar 403.
 *
 *  Contraste comprobado sobre `--svh-fondo-hundido` (#F3F4F6):
 *    icono en `--svh-texto-tenue`  (#606877) → 5,10:1  ✓ (mínimo 3:1)
 *      (hasta el 24/08/2026 el token era #6B7280 → 4,39; ese día gris-500
 *       subió en tokens.css y aquí mejoró solo)
 *    texto en `--svh-texto-suave`  (#4B5563) → 6,87:1  ✓ (mínimo 4,5:1)
 *  Y en modo oscuro se recalcula solo, porque los dos son tokens de
 *  nivel 2: no hay ni un color escrito a mano aquí.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-portada {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	background: var(--svh-fondo-hundido);
}

.svh-marcador {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--svh-espacio-2);
	inline-size: 100%;
	padding: var(--svh-espacio-3);
	text-align: center;
	/* La trama diagonal es lo que lo hace leer como «hueco de diseño» y no
	   como «imagen que no cargó». Es la misma idea que el papel pautado. */
	background-color: var(--svh-fondo-hundido);
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 10px,
		rgb(0 0 0 / 0.022) 10px 20px
	);
	color: var(--svh-texto-suave);
	overflow: hidden;
}

.svh-marcador__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-tarjeta);
	color: var(--svh-texto-tenue);
	box-shadow: var(--svh-sombra-sm);
}

.svh-marcador__icono .svh-icono { inline-size: 22px; block-size: 22px; }

.svh-marcador__inicial {
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: 0.02em;
}

.svh-marcador__texto {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	max-inline-size: 14ch;
	color: var(--svh-texto-suave);
}

/* El acento de la red: una línea de color abajo. El color es DECORACIÓN
   —la red ya se dice con el icono y con la palabra— así que nadie se
   queda sin la información por no distinguirlo. */
.svh-marcador::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	background: var(--marcador-acento, var(--svh-borde-suave));
}

.svh-marcador--youtube   { --marcador-acento: #C00000; }
.svh-marcador--instagram { --marcador-acento: #C13584; }
.svh-marcador--tiktok    { --marcador-acento: #111827; }
.svh-marcador--facebook  { --marcador-acento: #1877F2; }
.svh-marcador--threads   { --marcador-acento: #111827; }
.svh-marcador--x         { --marcador-acento: #111827; }
.svh-marcador--twitch    { --marcador-acento: #772CE8; }
.svh-marcador--pinterest { --marcador-acento: #BD081C; }
.svh-marcador--linkedin  { --marcador-acento: #0A66C2; }
.svh-marcador--telegram  { --marcador-acento: #229ED9; }
.svh-marcador--whatsapp  { --marcador-acento: #128C7E; }

/* El monograma del creador. Es lo que hacen Gmail, Slack y GitHub cuando
   falta la foto: se reconoce de un vistazo y nadie lo lee como un error. */
.svh-monograma {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	background: var(--svh-marca-suave);
	color: var(--svh-marca);
	font-weight: 700;
	font-size: clamp(1.25rem, 26cqi, 3.5rem);
	letter-spacing: 0.03em;
	border-radius: var(--svh-radio-md);
	container-type: inline-size;
}

.svh-monograma > span { line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════
 * 15 · EL DIRECTORIO Y SUS FILTROS
 * ═══════════════════════════════════════════════════════════════════ */

.svh-directorio__cabecera { margin-block-end: var(--svh-espacio-6); }

.svh-directorio__intro {
	max-inline-size: 60ch;
	color: var(--svh-texto-suave);
}

.svh-directorio__cuenta {
	margin-block: var(--svh-espacio-6) var(--svh-espacio-4);
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

.svh-filtros {
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-4);
	padding: var(--svh-espacio-4);
	background: var(--svh-fondo-suave);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
}

.svh-filtros__texto {
	display: flex;
	gap: var(--svh-espacio-2);
	flex-wrap: wrap;
}

.svh-filtros__texto input[type="search"] {
	flex: 1 1 16rem;
	min-inline-size: 0;
	padding: var(--svh-espacio-3) var(--svh-espacio-4);
	font: inherit;
	color: var(--svh-texto);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-md);
}

/* Los chips en móvil van en una tira que se desliza, y NO se parten en
   cinco filas: con el 69,9 % del tráfico en móvil y solo el 45,2 %
   haciendo scroll, unos filtros que ocupan media pantalla se comen el
   contenido. `scroll-snap` para que no queden a medias. */
.svh-chips {
	display: flex;
	gap: var(--svh-espacio-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block-end: var(--svh-espacio-1);
	scrollbar-width: thin;
	list-style: none;
	margin: 0;

	/* 🔴 28/08/2026 · R2 · LA SEÑAL DE QUE HAY MÁS A LA DERECHA.
	   Medido a 375 px: de 1.219 px de filtros solo se ven 317. El 74 % está
	   fuera, y hasta hoy **no había ni una sombra ni una flecha** que lo
	   dijera. Quien no arrastra, no se entera de que existen.

	   Son cuatro fondos superpuestos, y el truco es de manual (las «sombras
	   de scroll» de Lea Verou): dos van pegados al contenido
	   (`background-attachment: local`) y dos al marco (`scroll`). Cuando el
	   carril está al principio, la sombra de la izquierda queda tapada por su
	   pareja blanca; en cuanto se arrastra, aparece. Y al llegar al final,
	   desaparece la de la derecha. **Sin una línea de JavaScript**, y por eso
	   no se puede desincronizar.

	   `--svh-fondo` es el fondo de la página, así que esto funciona igual en
	   claro y en oscuro sin escribir un solo color a mano. */
	background:
		linear-gradient(to right, var(--svh-fondo) 30%, transparent),
		linear-gradient(to left,  var(--svh-fondo) 30%, transparent) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 18%), transparent),
		radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 18%), transparent) 100% 0;
	background-repeat: no-repeat;
	background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
	background-attachment: local, local, scroll, scroll;
}

/* El anillo del teclado en el propio carril: ahora se puede enfocar, así que
   tiene que verse cuál está enfocado. Mismo anillo que el resto de la web. */
.svh-chips:focus-visible {
	outline: 3px solid var(--svh-marca);
	outline-offset: 2px;
	border-radius: var(--svh-radio-sm);
}

@media (min-width: 800px) {
	.svh-chips { flex-wrap: wrap; overflow-x: visible; }
}

.svh-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	flex: 0 0 auto;
	scroll-snap-align: start;
	padding: var(--svh-espacio-2) var(--svh-espacio-4);
	min-block-size: 40px;              /* diana táctil holgada */
	background: var(--svh-fondo-tarjeta);
	color: var(--svh-texto);
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-full);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--svh-transicion), border-color var(--svh-transicion);
}

.svh-chip:hover { background: var(--svh-fondo-hundido); }

.svh-chip .svh-icono { inline-size: 16px; block-size: 16px; }

/* El activo NO se distingue solo por el color: cambia también el peso y
   el borde. El 8 % de daltonismo no es una cifra decorativa. */
.svh-chip--activo {
	background: var(--svh-marca);
	color: var(--svh-marca-texto);
	border-color: var(--svh-marca);
	font-weight: 700;
}

/* ⚠️ El contador del chip activo llevaba `rgb(255 255 255 / 0.22)` de
   fondo: blanco translúcido sobre morado deja un morado CLARO, y el número
   en blanco encima daba **1:1 medido en la página real**. O sea, ilegible
   — otra vez blanco sobre casi blanco, en pequeñito.
   Con negro al 28 % el fondo se oscurece en vez de aclararse y el mismo
   blanco pasa a **10,4:1**. Y sube la letra: 9,6 px era demasiado poco. */
.svh-chip--activo .svh-chip__n { background: rgb(0 0 0 / 0.28); color: inherit; }

.svh-chip__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.75em;
	padding-inline: 0.4em;
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	color: var(--svh-texto-suave);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

.svh-chip--menor { padding: var(--svh-espacio-1) var(--svh-espacio-3); min-block-size: 32px; }

.svh-chips--sueltos { flex-wrap: wrap; overflow: visible; }

/* La fila de accesos a cada red, encima del muro de vídeos. Reutiliza los
   chips del directorio; solo necesita respirar del titular y del muro. */
.svh-botonera-redes { margin-block: var(--svh-espacio-4) var(--svh-espacio-6); }

.svh-filtros__fila {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-4);
	align-items: center;
	justify-content: space-between;
}

.svh-orden { display: flex; align-items: center; gap: var(--svh-espacio-2); flex-wrap: wrap; }
.svh-orden__etiqueta { font-size: var(--svh-txt-micro); color: var(--svh-texto-suave); font-weight: 600; }

.svh-filtros__limpiar { margin: 0; }

.svh-boton--menor { padding: var(--svh-espacio-2) var(--svh-espacio-4); font-size: var(--svh-txt-micro); }

/* La tarjeta entera clicable, pero con UN solo enlace tabulable. */
.svh-tarjeta-creador { position: relative; }

.svh-tarjeta-creador__enlace { color: inherit; text-decoration: none; }

.svh-tarjeta-creador__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--tarjeta-radio);
}

.svh-tarjeta-creador__enlace:hover { text-decoration: underline; }

/* El foco tiene que verse en la TARJETA, no solo en el texto: si no, con
   el teclado aparece un recuadro alrededor de dos palabras y no se
   entiende qué está seleccionado. */
.svh-tarjeta-creador:has(.svh-tarjeta-creador__enlace:focus-visible) {
	outline: 3px solid var(--svh-foco);
	outline-offset: 2px;
}

.svh-tarjeta-creador__cuerpo { display: flex; flex-direction: column; gap: var(--svh-espacio-1); min-inline-size: 0; }

.svh-tarjeta-creador__handle { margin: 0; }
.svh-tarjeta-creador__donde  { margin: var(--svh-espacio-1) 0 0; }

/* ── EN MÓVIL, LA TARJETA SE TUMBA ─────────────────────────────────
   Medido en la web real a 375 px: con la foto cuadrada a todo lo ancho,
   los 5 creadores ocupaban **5.633 px**, o sea casi siete pantallas de
   un iPhone. Y solo el 45,2 % de las sesiones móviles hacen scroll: el
   quinto creador, sencillamente, no existía para más de la mitad de la
   gente.

   Tumbada —foto de 88 px a la izquierda, datos a la derecha, tira de
   miniaturas debajo— cabe más del doble por pantalla sin quitar ni un
   dato. A partir de 560 px vuelve a la vertical, que es más bonita y
   ahí sí hay sitio. */
@media (max-width: 559px) {
	.svh-tarjeta-creador {
		display: grid;
		grid-template-columns: 88px minmax(0, 1fr);
		column-gap: var(--svh-espacio-4);
		row-gap: var(--svh-espacio-3);
		align-items: start;
	}

	.svh-tarjeta-creador__foto  { grid-column: 1; inline-size: 88px; }
	.svh-tarjeta-creador__cuerpo { grid-column: 2; }
	.svh-tarjeta-creador__tira  { grid-column: 1 / -1; }

	.svh-rejilla-creadores { gap: var(--svh-espacio-3); }
}

/* La tira de miniaturas queda por encima del enlace estirado para que
   siga siendo decoración y no robe el clic al nombre. */
.svh-tarjeta-creador__tira > * { border-radius: var(--svh-radio-sm); }

/* En la tira el marcador es diminuto: la píldora del icono y el nombre de
   la red no caben. Se deja solo el icono, centrado, y el acento de color. */
.svh-tarjeta-creador__tira .svh-marcador { gap: 0; padding: var(--svh-espacio-1); }
.svh-tarjeta-creador__tira .svh-marcador__icono { inline-size: 28px; block-size: 28px; box-shadow: none; }
.svh-tarjeta-creador__tira .svh-marcador__icono .svh-icono { inline-size: 15px; block-size: 15px; }
.svh-tarjeta-creador__tira .svh-marcador__texto { font-size: 0.625rem; }

.svh-cifra { display: flex; flex-direction: column; }

.svh-redes__icono--youtube   { color: #C00000; }
.svh-redes__icono--instagram { color: #A3336C; }
.svh-redes__icono--facebook  { color: #1461C4; }
.svh-redes__icono--tiktok    { color: var(--svh-texto); }
.svh-redes__icono--threads   { color: var(--svh-texto); }
.svh-redes__icono--x         { color: var(--svh-texto); }
.svh-redes__icono--twitch    { color: #6421D8; }
.svh-redes__icono--pinterest { color: #B00818; }
.svh-redes__icono--linkedin  { color: #0A5AAC; }
.svh-redes__icono--telegram  { color: #1B7FAE; }
.svh-redes__icono--whatsapp  { color: #0F7A6D; }

/* ══ MODO OSCURO (24/08/2026, v1b · contraste-capas): cinco de esos tonos
 * —oscurecidos aposta para leerse en claro— no llegan al 3:1 de WCAG 1.4.11
 * sobre la tarjeta oscura #16161C (medidos: youtube 2,78 · instagram 2,79 ·
 * twitch 2,36 · pinterest 2,48 · linkedin 2,63). En oscuro mandan los tonos
 * OFICIALES claros de cada red, medidos contra #16161C:
 *   youtube #FF0000 → 4,51 · instagram #E4405F → 4,46 · twitch #9146FF → 3,88
 *   pinterest #E60023 → 3,77 · linkedin #0A66C2 → 3,17
 * facebook, telegram y whatsapp NO se tocan: sus tonos de claro ya pasan
 * también en oscuro (3,03 · 4,03 · 3,45). Los tres «negros» tampoco: usan
 * var(--svh-texto), que ya se invierte solo. Mismo doble mecanismo que
 * tokens.css (el sistema y el interruptor), cero !important: se gana por
 * especificidad de la guarda y por venir después. ══ */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .svh-redes__icono--youtube   { color: #FF0000; }
	:root:not([data-tema="claro"]) .svh-redes__icono--instagram { color: #E4405F; }
	:root:not([data-tema="claro"]) .svh-redes__icono--twitch    { color: #9146FF; }
	:root:not([data-tema="claro"]) .svh-redes__icono--pinterest { color: #E60023; }
	:root:not([data-tema="claro"]) .svh-redes__icono--linkedin  { color: #0A66C2; }
}

[data-tema="oscuro"] .svh-redes__icono--youtube   { color: #FF0000; }
[data-tema="oscuro"] .svh-redes__icono--instagram { color: #E4405F; }
[data-tema="oscuro"] .svh-redes__icono--twitch    { color: #9146FF; }
[data-tema="oscuro"] .svh-redes__icono--pinterest { color: #E60023; }
[data-tema="oscuro"] .svh-redes__icono--linkedin  { color: #0A66C2; }

.svh-redes__icono .svh-icono { inline-size: 17px; block-size: 17px; }

/* ═══════════════════════════════════════════════════════════════════
 * 16 · PAGINACIÓN — la que faltaba (bug nº 3)
 * ═══════════════════════════════════════════════════════════════════ */

.svh-ficha .pagination,
.svh-paginacion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--svh-espacio-2);
	margin-block-start: var(--svh-espacio-12);
}

.svh-ficha .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--svh-espacio-2);
}

.svh-ficha .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding-inline: var(--svh-espacio-3);
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-tarjeta);
	color: var(--svh-texto);
	font-weight: 600;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.svh-ficha .page-numbers:hover { background: var(--svh-fondo-suave); }

.svh-ficha .page-numbers.current {
	background: var(--svh-marca);
	border-color: var(--svh-marca);
	color: var(--svh-marca-texto);
}

.svh-ficha .page-numbers.dots { border-color: transparent; background: none; }

.svh-paginacion__estado {
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
	font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
 * 17 · LA FICHA DE CREADOR
 * ═══════════════════════════════════════════════════════════════════ */

.svh-ficha__cabecera {
	display: grid;
	gap: var(--svh-espacio-6);
	grid-template-columns: 1fr;
	align-items: start;
	padding-block-end: var(--svh-espacio-8);
	border-block-end: 1px solid var(--svh-borde-suave);
}

@media (min-width: 800px) {
	.svh-ficha__cabecera { grid-template-columns: 190px minmax(0, 1fr) auto; }
}

.svh-ficha__retrato { inline-size: min(132px, 38%); }

@media (min-width: 800px) {
	.svh-ficha__retrato { inline-size: 100%; }
}

.svh-ficha__foto {
	aspect-ratio: 1;
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-hundido);
}

.svh-ficha__identidad > * { margin-block: 0 var(--svh-espacio-2); }

.svh-ficha__linea {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svh-espacio-3);
	color: var(--svh-texto-suave);
}

.svh-ficha__handle { font-weight: 600; }

/* El sello. Dice QUÉ verifica: un sello sin definición es ruido. */
.svh-sello {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-1);
	padding: var(--svh-espacio-1) var(--svh-espacio-3);
	border-radius: var(--svh-radio-full);
	background: var(--svh-estado-ok-fondo);
	color: var(--svh-estado-ok);
	font-size: 0.75rem;
	font-weight: 700;
}

.svh-sello .svh-icono { inline-size: 15px; block-size: 15px; }

.svh-ficha__titular {
	max-inline-size: 62ch;
	font-size: 1.0625rem;
	color: var(--svh-texto);
}

.svh-ficha__contexto { color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }

.svh-ficha__numeros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-8);
	margin-block: var(--svh-espacio-4);
}

.svh-ficha__acciones {
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-3);
	min-inline-size: 11rem;
}

@media (max-width: 799px) {
	.svh-ficha__acciones { flex-direction: row; flex-wrap: wrap; }
	.svh-ficha__acciones .svh-boton { flex: 1 1 auto; }
}

.svh-seccion { margin-block-start: var(--svh-espacio-12); }

.svh-seccion > h2 {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-3);
	margin-block-end: var(--svh-espacio-4);
}

.svh-seccion__cuenta {
	padding: 0.15em 0.6em;
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.svh-barras { display: flex; flex-direction: column; gap: var(--svh-espacio-3); max-inline-size: 44rem; }

.svh-barra__etiqueta { display: inline-flex; align-items: center; gap: var(--svh-espacio-2); }
.svh-barra__etiqueta .svh-icono { inline-size: 16px; block-size: 16px; }

.svh-barra__cuentas {
	padding: 0.1em 0.5em;
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	font-size: 0.6875rem;
}

.svh-barra__valor--youtube   { background: #C00000; }
.svh-barra__valor--instagram { background: #A3336C; }
.svh-barra__valor--facebook  { background: #1461C4; }
.svh-barra__valor--tiktok    { background: var(--svh-texto); }
.svh-barra__valor--threads   { background: var(--svh-texto); }
.svh-barra__valor--x         { background: var(--svh-texto); }
.svh-barra__valor--twitch    { background: #6421D8; }
.svh-barra__valor--pinterest { background: #B00818; }
.svh-barra__valor--linkedin  { background: #0A5AAC; }
.svh-barra__valor--telegram  { background: #1B7FAE; }

/* ══ MODO OSCURO (24/08/2026, v1b · contraste-capas): el relleno de la
 * barra es un objeto gráfico sobre el carril hundido oscuro #0A0A0E, y
 * tres tonos no llegan al 3:1 (twitch 2,59 · pinterest 2,72 · linkedin
 * 2,89). En oscuro mandan los oficiales claros, medidos contra #0A0A0E:
 * twitch #9146FF → 4,26 · pinterest #E60023 → 4,13 · linkedin #0A66C2 →
 * 3,47. El resto pasa tal cual (youtube 3,05 · instagram 3,06 · facebook
 * 3,33 · telegram 4,42) y los «negros» usan var(--svh-texto), que se
 * invierte solo. Doble mecanismo, cero !important. ══ */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .svh-barra__valor--twitch    { background: #9146FF; }
	:root:not([data-tema="claro"]) .svh-barra__valor--pinterest { background: #E60023; }
	:root:not([data-tema="claro"]) .svh-barra__valor--linkedin  { background: #0A66C2; }
}

[data-tema="oscuro"] .svh-barra__valor--twitch    { background: #9146FF; }
[data-tema="oscuro"] .svh-barra__valor--pinterest { background: #E60023; }
[data-tema="oscuro"] .svh-barra__valor--linkedin  { background: #0A66C2; }

/* Las cuentas conectadas, una por una. Aquí SÍ se ven todas: agrupar es
   para no repetir pestañas, no para esconder cuentas. */
.svh-cuentas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-2);
	list-style: none;
	margin: var(--svh-espacio-4) 0 0;
	padding: 0;
}

.svh-cuenta {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-2) var(--svh-espacio-4);
	min-block-size: 44px;
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-tarjeta);
	color: var(--svh-texto);
	text-decoration: none;
}

.svh-cuenta:hover { background: var(--svh-fondo-suave); }
.svh-cuenta__texto { display: flex; flex-direction: column; line-height: 1.2; }
.svh-cuenta__red { font-weight: 600; font-size: var(--svh-txt-micro); }
.svh-cuenta__handle { font-size: 0.75rem; color: var(--svh-texto-suave); }

/* ── Las pestañas por red. UNA por red: nunca tres «Instagram». ── */
.svh-pestana {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	min-block-size: 44px;
}

.svh-pestana .svh-icono { inline-size: 16px; block-size: 16px; }

/* La cifra de vídeos de cada pestaña.
   ANTES llevaba `opacity: 0.75`, y eso es lo que la suspendía: la opacidad no
   cambia el color declarado, pero SÍ el color que se acaba pintando, así que
   `contraste.py` la daba por buena (mira los tokens) y el navegador pintaba
   otra cosa. axe-core lo cazó en la ficha de creador: 2 nodos en móvil y 3 en
   escritorio. Se cambia por un color de token, que es medible y ya está
   aprobado. Medido con `getComputedStyle` sobre el elemento pintado, no
   leyendo esta regla. */
.svh-pestana__n {
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	color: var(--svh-texto-suave);
}

/* 🔴 Y LA PESTAÑA ACTIVA, APARTE. Esto lo cazó la medición, no la regla.
   La pestaña activa (`[aria-current="page"]`) va sobre el morado de marca
   `rgb(109, 40, 217)`. Al poner arriba un color fijo de texto suave, la cifra
   de ESA pestaña pasó a medir **1,06:1** sobre el morado — ilegible. Medido
   con `getComputedStyle` en la ficha real, no deducido de esta hoja:

     pestaña activa   ANTES de esta línea: rgb(75,85,99)    sobre rgb(109,40,217) = 1,06:1
     pestaña activa   DESPUÉS:             rgb(255,255,255) sobre rgb(109,40,217) = 7,10:1
     las otras tres   ANTES y DESPUÉS:     rgb(75,85,99)    sobre blanco          = 7,56:1

   El mínimo del criterio 1.4.3 de la WCAG para letra pequeña son 4,5:1, y
   estas letras miden 9,6 px. Las cuatro pasan.

   `inherit` en vez de repetir el color: así, el día que cambie el color de la
   pestaña activa, la cifra lo sigue sola y no se queda atrás. */
.svh-pestana[aria-current="page"] .svh-pestana__n { color: inherit; }

.svh-pestana--activa { font-weight: 700; }

.svh-transparencia p { max-inline-size: 68ch; color: var(--svh-texto-suave); }

/* ═══════════════════════════════════════════════════════════════════
 * 18 · LA FICHA DE VÍDEO
 * ═══════════════════════════════════════════════════════════════════ */

.svh-migas { margin-block-end: var(--svh-espacio-6); font-size: var(--svh-txt-micro); }

.svh-migas ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svh-espacio-2);
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--svh-texto-suave);
}

.svh-migas li + li::before { content: "›"; margin-inline-end: var(--svh-espacio-2); color: var(--svh-texto-tenue); }

.svh-video-detalle {
	display: grid;
	gap: var(--svh-espacio-8);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.svh-video-detalle { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
	.svh-video-detalle__reproductor { position: sticky; inset-block-start: var(--svh-espacio-8); }
}

.svh-video-detalle__reproductor > .svh-portada,
.svh-video-detalle__reproductor > .svh-marcador { border-radius: var(--svh-radio-lg); }

.svh-reproductor {
	inline-size: 100%;
	border: 0;
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-hundido);
}

.svh-video-detalle__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svh-espacio-3);
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

.svh-video-detalle__desc { max-inline-size: 62ch; white-space: pre-line; }

.svh-autor {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-3);
	margin-block: var(--svh-espacio-4);
	padding: var(--svh-espacio-3);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-suave);
	color: var(--svh-texto);
	text-decoration: none;
}

.svh-autor:hover { background: var(--svh-fondo-hundido); }
.svh-autor__foto { inline-size: 56px; block-size: 56px; flex: 0 0 auto; border-radius: var(--svh-radio-full); }
.svh-autor__texto { display: flex; flex-direction: column; line-height: 1.3; }
.svh-autor__nombre { font-weight: 700; }
.svh-autor__mas { font-size: var(--svh-txt-micro); color: var(--svh-marca); }

.svh-hashtags { display: flex; flex-wrap: wrap; gap: var(--svh-espacio-2); list-style: none; margin: var(--svh-espacio-4) 0 0; padding: 0; }

.svh-etiqueta { display: inline-flex; align-items: center; gap: var(--svh-espacio-1); }
.svh-etiqueta .svh-icono { inline-size: 15px; block-size: 15px; }

.svh-etiqueta--suave {
	background: var(--svh-fondo-hundido);
	color: var(--svh-texto-suave);
}

/* ═══════════════════════════════════════════════════════════════════
 * 19 · FORMULARIOS Y AVISOS
 * ═══════════════════════════════════════════════════════════════════ */

.svh-formulario { max-inline-size: 34rem; display: flex; flex-direction: column; gap: var(--svh-espacio-4); }

.svh-campo { display: flex; flex-direction: column; gap: var(--svh-espacio-2); }

.svh-campo label { font-weight: 600; font-size: var(--svh-txt-micro); }

.svh-campo input,
.svh-campo textarea {
	padding: var(--svh-espacio-3) var(--svh-espacio-4);
	font: inherit;
	color: var(--svh-texto);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-md);
	min-block-size: 44px;
}

.svh-campo textarea { resize: vertical; line-height: var(--svh-alto-linea); }

.svh-campo__ayuda { margin: 0; font-size: var(--svh-txt-micro); color: var(--svh-texto-suave); }
.svh-campo__obligatorio { color: var(--svh-estado-error); }
.svh-campo__opcional { font-weight: 400; color: var(--svh-texto-tenue); }

/* La trampa antirrobots. Fuera de la pantalla en vez de `display:none`,
   porque bastantes robots se saltan lo que está oculto con `display`. Y
   con `aria-hidden` en el HTML, para que un lector de pantalla no la
   encuentre nunca: si alguien con lector la rellenara, su mensaje se
   tiraría a la basura sin decírselo. */
.svh-trampa {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.svh-formulario__legal { font-size: var(--svh-txt-micro); color: var(--svh-texto-suave); max-inline-size: 60ch; }
.svh-formulario__enviar { margin: 0; }

.svh-aviso {
	padding: var(--svh-espacio-4);
	border-radius: var(--svh-radio-md);
	border-inline-start: 4px solid currentColor;
	margin-block-end: var(--svh-espacio-6);
}

.svh-aviso__titulo { margin: 0 0 var(--svh-espacio-2); font-weight: 700; }
.svh-aviso p:last-child, .svh-aviso ul:last-child { margin-block-end: 0; }

.svh-aviso--ok    { background: var(--svh-estado-ok-fondo);    color: var(--svh-estado-ok); }
.svh-aviso--error { background: var(--svh-estado-error-fondo); color: var(--svh-estado-error); }
.svh-aviso--avisa { background: var(--svh-estado-avisa-fondo); color: var(--svh-estado-avisa); }

/* El cuerpo del aviso vuelve al color de texto normal: el color de estado
   es para el borde y el título. Un párrafo entero en rojo sobre rosa se
   lee peor y encima grita. */
.svh-aviso p:not(.svh-aviso__titulo),
.svh-aviso li { color: var(--svh-texto); }

.svh-contacto__intro { max-inline-size: 60ch; }
.svh-contacto__otros { margin-block-start: var(--svh-espacio-8); }
.svh-contacto__vias { display: flex; flex-wrap: wrap; gap: var(--svh-espacio-3); list-style: none; margin: var(--svh-espacio-3) 0 0; padding: 0; }

.svh-vacio__botones { display: flex; gap: var(--svh-espacio-3); justify-content: center; flex-wrap: wrap; margin: 0; }

/* La bandeja de contactos del panel. Lo que un creador viene a ver. */
.svh-encargos { list-style: none; margin: var(--svh-espacio-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--svh-espacio-4); }

.svh-encargo {
	padding: var(--svh-espacio-4);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
}

/* Un mensaje sin leer se marca con BORDE, no solo con color de fondo. */
.svh-encargo--nuevo { border-inline-start: 4px solid var(--svh-estado-curso); }

.svh-encargo__quien { display: flex; flex-wrap: wrap; align-items: center; gap: var(--svh-espacio-2); margin: 0; }
.svh-encargo__empresa { color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }
.svh-encargo__mensaje { margin-block: var(--svh-espacio-3); max-inline-size: 68ch; }

/* ═══════════════════════════════════════════════════════════════════
 * 20 · LA PÁGINA DE PLANES
 * ═══════════════════════════════════════════════════════════════════ */

.svh-precios__cabecera { text-align: center; max-inline-size: 46rem; margin-inline: auto; }
.svh-precios__intro { color: var(--svh-texto-suave); max-inline-size: 52ch; margin-inline: auto; }

.svh-conmutador {
	display: inline-flex;
	gap: var(--svh-espacio-1);
	margin-block-start: var(--svh-espacio-6);
	padding: var(--svh-espacio-1);
	background: var(--svh-fondo-hundido);
	border-radius: var(--svh-radio-full);
}

.svh-conmutador__opcion {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-2) var(--svh-espacio-6);
	min-block-size: 44px;
	border-radius: var(--svh-radio-full);
	color: var(--svh-texto-suave);
	font-weight: 600;
	text-decoration: none;
}

.svh-conmutador__opcion--activa {
	background: var(--svh-fondo-tarjeta);
	color: var(--svh-texto);
	box-shadow: var(--svh-sombra-sm);
}

.svh-conmutador__ahorro {
	padding: 0.1em 0.5em;
	border-radius: var(--svh-radio-full);
	background: var(--svh-estado-ok-fondo);
	color: var(--svh-estado-ok);
	font-size: 0.6875rem;
	font-weight: 700;
}

.svh-precios__grupo { margin-block-start: var(--svh-espacio-16); }
.svh-precios__titulo { max-inline-size: 52rem; margin-block-end: var(--svh-espacio-6); }
.svh-precios__titulo p { color: var(--svh-texto-suave); }

.svh-precios {
	display: grid;
	gap: var(--svh-espacio-4);
	grid-template-columns: 1fr;
	align-items: stretch;
}

@media (min-width: 760px)  { .svh-precios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svh-precios { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px)  { .svh-precios--dos { grid-template-columns: repeat(2, 1fr); max-inline-size: 46rem; } }

.svh-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-3);
	padding: var(--svh-espacio-6);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
}

/* El destacado se marca con BORDE y SELLO, no solo con color: el color
   nunca puede ser el único indicador. */
.svh-plan--destacado {
	border: 2px solid var(--svh-marca);
	box-shadow: var(--svh-sombra-md);
}

.svh-plan__sello {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: var(--svh-espacio-6);
	transform: translateY(-50%);
	margin: 0;
	padding: var(--svh-espacio-1) var(--svh-espacio-4);
	background: var(--svh-marca);
	color: var(--svh-marca-texto);
	border-radius: var(--svh-radio-full);
	font-size: 0.75rem;
	font-weight: 700;
}

.svh-plan__nombre { margin: 0; font-size: 1.125rem; }
.svh-plan__precio { display: flex; flex-direction: column; margin: 0; }
.svh-plan__iva { font-size: var(--svh-txt-micro); color: var(--svh-texto-suave); }
.svh-plan__ahorro { margin: 0; font-size: var(--svh-txt-micro); font-weight: 600; color: var(--svh-estado-ok); }
.svh-plan__ahorro--apagado { color: var(--svh-texto-tenue); font-weight: 400; }

.svh-plan__incluye { list-style: none; margin: var(--svh-espacio-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--svh-espacio-2); }
.svh-plan__incluye li { display: flex; gap: var(--svh-espacio-2); align-items: flex-start; font-size: var(--svh-txt-micro); }
.svh-icono--check { color: var(--svh-estado-ok); flex: 0 0 auto; inline-size: 18px; block-size: 18px; }

.svh-plan__accion { margin: auto 0 0; }
.svh-plan__accion .svh-boton { inline-size: 100%; }
.svh-plan__prueba { margin: 0; font-size: 0.75rem; color: var(--svh-texto-tenue); text-align: center; }

.svh-promesas { margin-block-start: var(--svh-espacio-16); padding: var(--svh-espacio-8); background: var(--svh-fondo-suave); border-radius: var(--svh-radio-lg); }
.svh-promesas__lista { list-style: none; margin: var(--svh-espacio-4) 0 0; padding: 0; display: grid; gap: var(--svh-espacio-4); }

@media (min-width: 800px) { .svh-promesas__lista { grid-template-columns: repeat(2, 1fr); } }

.svh-promesas__lista li { max-inline-size: 56ch; color: var(--svh-texto-suave); }
.svh-promesas__lista strong { color: var(--svh-texto); }

.svh-medida { margin-block-start: var(--svh-espacio-16); text-align: center; }

.svh-faq__item { padding: var(--svh-espacio-4) 0; border-block-end: 1px solid var(--svh-borde-suave); }
.svh-faq__item summary { font-weight: 600; cursor: pointer; min-block-size: 44px; display: flex; align-items: center; }
.svh-faq__item p { margin-block: var(--svh-espacio-3) 0; max-inline-size: 68ch; color: var(--svh-texto-suave); }

/* Una tabla ancha se desliza DENTRO de su caja. El `<body>` no se
   desplaza nunca a lo ancho: es el fallo nº 1 en móvil. */
.svh-tabla-envoltorio { overflow-x: auto; margin-block: var(--svh-espacio-4); }
.svh-tabla__red { display: inline-flex; align-items: center; gap: var(--svh-espacio-2); white-space: nowrap; }
.svh-tabla__red .svh-icono { inline-size: 18px; block-size: 18px; }

/* ═══════════════════════════════════════════════════════════════════
 * 21 · P2B — CON QUÉ CRITERIOS SE ORDENA
 * ═══════════════════════════════════════════════════════════════════ */

.svh-criterios { margin-block-start: var(--svh-espacio-16); }
.svh-criterios summary { font-weight: 600; cursor: pointer; min-block-size: 44px; display: flex; align-items: center; }
.svh-criterios__intro { max-inline-size: 68ch; color: var(--svh-texto-suave); }
.svh-criterios__lista { display: flex; flex-direction: column; gap: var(--svh-espacio-3); max-inline-size: 68ch; }
.svh-criterios__porque { display: block; font-size: var(--svh-txt-micro); color: var(--svh-texto-suave); }

/* ═══════════════════════════════════════════════════════════════════
 * 22 · LAS PÁGINAS LEGALES
 *
 *  Si no se lee, no informa; y si no informa, no cumple.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-legal {
	max-inline-size: 52rem;
	margin-inline: auto;
	padding: var(--svh-espacio-8) var(--svh-espacio-4) var(--svh-espacio-16);
}

.svh-legal__cabecera { padding-block-end: var(--svh-espacio-6); border-block-end: 1px solid var(--svh-borde-suave); }
.svh-legal__fecha { color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }

.svh-legal__indice {
	margin-block: var(--svh-espacio-8);
	padding: var(--svh-espacio-6);
	background: var(--svh-fondo-suave);
	border-radius: var(--svh-radio-lg);
}

.svh-legal__indice h2 { margin: 0 0 var(--svh-espacio-3); font-size: 1rem; }
.svh-legal__indice ol { margin: 0; padding-inline-start: var(--svh-espacio-6); display: flex; flex-direction: column; gap: var(--svh-espacio-2); }

/* La medida de 70 caracteres. Una línea de 140 se pierde al volver al
   margen, y un documento legal que no se puede leer no informa. */
.svh-legal__cuerpo { margin-block-start: var(--svh-espacio-8); }
.svh-legal__cuerpo > * { max-inline-size: 70ch; }
.svh-legal__cuerpo :where(h2) { margin-block: var(--svh-espacio-12) var(--svh-espacio-3); }
.svh-legal__cuerpo :where(h3) { margin-block: var(--svh-espacio-8) var(--svh-espacio-2); font-size: 1.0625rem; }
.svh-legal__cuerpo :where(p, li) { color: var(--svh-texto-suave); }
.svh-legal__cuerpo :where(table) { max-inline-size: 100%; }

.svh-legal__contacto {
	margin-block-start: var(--svh-espacio-16);
	padding: var(--svh-espacio-6);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);
}

.svh-legal__contacto h2 { margin-block-start: 0; font-size: 1.0625rem; }
.svh-legal__contacto dl { display: grid; gap: var(--svh-espacio-3); margin: 0; }
.svh-legal__contacto dt { font-weight: 600; font-size: var(--svh-txt-micro); }
.svh-legal__contacto dd { margin: 0; }

.svh-legal__hermanas { margin-block-start: var(--svh-espacio-8); }
.svh-legal__hermanas h2 { font-size: 1rem; }
.svh-legal__hermanas ul { display: flex; flex-wrap: wrap; gap: var(--svh-espacio-3); list-style: none; margin: 0; padding: 0; }

/* Imprimible: hay quien necesita guardarlo en papel o en PDF, y es un
   derecho, no un capricho. */
@media print {
	.svh-cabecera, .svh-pie, .svh-barra-movil, .svh-saltar,
	.svh-legal__indice, .svh-legal__hermanas { display: none; }

	.svh-legal { max-inline-size: none; padding: 0; }
	.svh-legal__cuerpo > * { max-inline-size: none; }
	.svh-legal__cuerpo :where(p, li) { color: #000; }

	/* La URL de cada enlace, escrita: en papel un enlace sin destino no
	   sirve para nada. */
	.svh-legal__cuerpo a::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}

/* ═══════════════════════════════════════════════════════════════════
 * EL SELLO DE «DESTACADO» — recado de DINERO (fallo nº 13), 22/08/2026
 *
 * Por esto se cobra. Si no se ve, se está vendiendo humo. Aquí se pinta.
 *
 * · Cero `!important`, igual que el resto del tema. Y **sin `@layer`**: no es
 *   un olvido. `tokens.css` lo explica y se probó en el navegador — envolver
 *   solo NUESTRO CSS en una capa hace que Woodmart, que no está en ninguna,
 *   gane siempre. Lo que funciona aquí es encolar después, y ya se hace.
 *   Además estas dos clases son nombres nuevos: no chocan con nadie.
 * · Los colores son dos fichas del sistema que YA valida `contraste.py`:
 *   `--svh-estado-avisa` sobre `--svh-estado-avisa-fondo`. No se inventa
 *   ningún color, así que el marcador sigue en 34 de 34.
 * · Lleva la palabra «Destacado» escrita. El color NO es el único indicador
 *   (WCAG 2.2, criterio 1.4.1): quien no distingue colores lo lee igual.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-sello-destacado {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-1);
	border-radius: var(--svh-radio-full);
	background: var(--svh-estado-avisa-fondo);
	color: var(--svh-estado-avisa);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* En la miniatura: arriba a la izquierda, sobre la portada. `.svh-video` ya
   es `position: relative`, así que no hace falta tocarlo. Fondo opaco propio:
   si la foto no carga —hoy pasa mucho— se sigue leyendo. */
.svh-tarjeta-video .svh-sello-destacado {
	position: absolute;
	inset-block-start: var(--svh-espacio-2);
	inset-inline-start: var(--svh-espacio-2);
	z-index: 2;
	padding: 2px var(--svh-espacio-2);
	box-shadow: var(--svh-sombra-sm);
}

/* En la ficha del vídeo: una línea encima del título, con la fecha de fin. */
.svh-sello-destacado--ficha {
	margin: 0 0 var(--svh-espacio-2);
	padding: var(--svh-espacio-1) var(--svh-espacio-3);
	border: 1px solid var(--svh-estado-avisa);
	white-space: normal;
}

/* El borde de la tarjeta destacada, para que se distinga en una rejilla de
   veinte. Es un refuerzo del sello, nunca el único aviso. */
.svh-tarjeta-video.svh-video-destacado .svh-video {
	outline: 2px solid var(--svh-estado-avisa);
	outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
 * PROPUESTA 7 · UN SOLO ENLACE POR TARJETA, PERO LA TARJETA ENTERA SE PINCHA
 *
 * Antes cada miniatura tenía DOS <a> al mismo sitio (la foto y el título).
 * Medido a 375 px en la ficha de Victor Salvo: 48 enlaces en 24 tarjetas. Un
 * lector de pantalla leía el mismo destino dos veces por tarjeta.
 *
 * Ahora el ÚNICO enlace es el del título. Para que la foto —y toda la
 * tarjeta— siga llevando al vídeo, ese enlace se «estira»: un `::after`
 * transparente que cubre la tarjeta de borde a borde. Es el patrón de enlace
 * de bloque de siempre; cero JavaScript, cero `!important`.
 *
 * `position: relative` en el <article> es lo que ancla ese estirado a la
 * tarjeta (sin esto se estiraría sobre toda la página).
 * ═══════════════════════════════════════════════════════════════════ */
.svh-tarjeta-video {
	position: relative;
}

.svh-video__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* nada visible: solo capta el clic sobre la tarjeta entera */
}

/* La foto ya no es un <a>, pero tiene que SEGUIR pareciendo pinchable: el
   estirado le pone el cursor de mano encima. */
.svh-tarjeta-video .svh-video {
	cursor: pointer;
}

/* Teclado: al enfocar el enlace, se resalta la TARJETA ENTERA, no solo el
   renglón del título. Diana visible (WCAG 2.4.7) y coherente con que toda la
   tarjeta es el objetivo. */
.svh-video__titulo a:focus-visible::after {
	outline: 3px solid var(--svh-foco, #2563EB);
	outline-offset: 2px;
	border-radius: var(--svh-radio-md);
}

/* La fecha en el pie cuando no hay cifra: se lee como el resto del pie
   (blanco sobre el fondo opaco #111827 → 16:1), NO apagada como el viejo
   «sin datos». Es un dato de verdad. */
.svh-video__dato--fecha {
	font-style: normal;
	color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════
 * K2 · EL CANDADO DEL REPRODUCTOR
 *
 * El `<iframe>` sale de PHP sin `src` (lo lleva en `data-svh-src`) cuando el
 * visitante no ha dado permiso. Aquí solo se pinta el cartel que lo explica.
 *
 * ⚠️ El cartel se esconde SOLO, sin una línea de JavaScript nueva: en cuanto
 * el script del aviso de cookies le devuelve el `src` al marco, el atributo
 * `data-svh-src` desaparece, `:has()` deja de casar y el cartel se va.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-marco-permiso { position: relative; }

.svh-marco-permiso__aviso { display: none; }

/* Solo mientras el marco siga parado. */
.svh-marco-permiso:has(iframe[data-svh-src]) .svh-marco-permiso__aviso {
	display: grid;
	position: absolute;
	inset: 0;
	place-content: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-4);
	border: 1px dashed var(--svh-borde);
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-tarjeta);
	text-align: center;
}

.svh-marco-permiso__titulo {
	margin: 0;
	font-family: var(--svh-fuente-titulo);
	font-size: var(--svh-txt-cuerpo);
	font-weight: 700;
	color: var(--svh-texto);
}

.svh-marco-permiso__texto {
	margin: 0;
	max-inline-size: 42ch;
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
}

.svh-marco-permiso__aviso .svh-boton { justify-self: center; }

/* Navegadores sin `:has()` (muy pocos ya en 2026): el cartel se enseña
   siempre debajo del hueco en vez de encima. Peor, pero nunca invisible. */
@supports not selector(:has(*)) {
	.svh-marco-permiso__aviso {
		display: grid;
		gap: var(--svh-espacio-2);
		padding: var(--svh-espacio-4);
		border: 1px dashed var(--svh-borde);
		border-radius: var(--svh-radio-lg);
		text-align: center;
	}
}

/* ═══════════════════════════════════════════════════════════════════
 * G8 · G9 · G10 · G11 · G12 · G15 — LAS PANTALLAS NUEVAS DE LA FICHA
 *
 * Todo con selectores de UNA clase y sin un solo `!important`: el orden de
 * encolado (999, detrás de Woodmart) ya nos hace ganar los empates. Y ningún
 * color primitivo: solo tokens, para que el modo oscuro salga solo.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── La cabecera de las pantallas de red / cuenta / destacados ──── */
.svh-red-cab,
.svh-cuenta-cab {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-6);
	align-items: flex-start;
	margin-block: var(--svh-espacio-6) var(--svh-espacio-8);
	padding-block-end: var(--svh-espacio-6);
	border-block-end: 1px solid var(--svh-borde-suave);
}

.svh-red-cab__retrato { flex: 0 0 auto; inline-size: 96px; }
.svh-red-cab__foto { inline-size: 96px; block-size: 96px; border-radius: var(--svh-radio-full); object-fit: cover; }
.svh-red-cab__texto { flex: 1 1 18rem; min-inline-size: 0; }

.svh-red-cab__migaja { margin: 0 0 var(--svh-espacio-2); font-size: var(--svh-txt-micro); }

.svh-red-cab h1,
.svh-cuenta-cab h1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svh-espacio-3);
	margin: 0 0 var(--svh-espacio-3);
	font-size: var(--svh-txt-h1-movil);
}

@media (min-width: 800px) {
	.svh-red-cab h1,
	.svh-cuenta-cab h1 { font-size: var(--svh-txt-h1); }
}

.svh-red-cab__icono { display: inline-flex; color: var(--svh-marca); }
.svh-red-cab__icono .svh-icono { inline-size: 28px; block-size: 28px; }

.svh-red-cab__cifras,
.svh-cuenta-cab__cifras,
.svh-cuenta-cab__linea {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-2) var(--svh-espacio-4);
	margin: 0 0 var(--svh-espacio-3);
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
}

.svh-red-cab__handle,
.svh-cuenta-cab__linea a { font-weight: 600; }

.svh-red-cab__aviso { color: var(--svh-texto); font-weight: 600; }
.svh-red-cab__botones,
.svh-cuenta-cab__botones { display: flex; flex-wrap: wrap; gap: var(--svh-espacio-3); margin: 0 0 var(--svh-espacio-2); }

/* ── G11 · el avatar de la cuenta, con su chapa de red ──────────── */
.svh-cuenta-cab__avatar {
	position: relative;
	flex: 0 0 auto;
	inline-size: 128px;
	block-size: 128px;
	display: grid;
	place-items: center;
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	overflow: visible;
}

.svh-cuenta-cab__avatar img {
	inline-size: 128px;
	block-size: 128px;
	border-radius: var(--svh-radio-full);
	object-fit: cover;
}

.svh-cuenta-cab__iniciales {
	font-family: var(--svh-fuente-titulo);
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--svh-texto-suave);
}

.svh-cuenta-cab__chapa {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: 0;
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--svh-radio-full);
	border: 2px solid var(--svh-fondo);
	background: var(--svh-marca);
	color: var(--svh-marca-texto);
}

.svh-cuenta-cab__chapa .svh-icono { inline-size: 20px; block-size: 20px; }

.svh-cuenta-cab__estado { margin: 0 0 var(--svh-espacio-3); color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }
.svh-cuenta-cab__bio { margin: 0 0 var(--svh-espacio-3); max-inline-size: 62ch; }

/* ── G8 · la rejilla de las pantallas de red ────────────────────── */
.svh-parrilla--red {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--svh-espacio-5);
}

@media (min-width: 800px) {
	.svh-parrilla--red { grid-template-columns: repeat(4, 1fr); }
}

.svh-tarjeta-red { display: flex; flex-direction: column; gap: var(--svh-espacio-2); }

.svh-ver-original {
	display: inline-block;
	align-self: flex-start;
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	color: var(--svh-marca);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.svh-lote__estado {
	margin: var(--svh-espacio-6) 0 var(--svh-espacio-3);
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
	text-align: center;
}

.svh-lote__mas { display: flex; justify-content: center; margin: 0 0 var(--svh-espacio-6); }

/* ── G15 y G10 · la cuenta atrás ────────────────────────────────── */
.svh-cuenta-atras {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	margin: 0;
	padding: 2px var(--svh-espacio-2);
	border-radius: var(--svh-radio-sm);
	background: var(--svh-estado-avisa-fondo);
	color: var(--svh-texto);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Menos de un día: se refuerza con un borde, no solo con color. */
.svh-cuenta-atras--poco { border: 1px solid var(--svh-estado-avisa); }
.svh-cuenta-atras--fin  { background: var(--svh-fondo-hundido); color: var(--svh-texto-suave); }

/* ── G15 · «Destacados ahora mismo» ─────────────────────────────── */
.svh-destacados-ahora {
	padding: var(--svh-espacio-6);
	border: 1px solid var(--svh-estado-avisa);
	border-radius: var(--svh-radio-lg);
	background: var(--svh-fondo-suave);
}

.svh-destacados-ahora__cab {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-3);
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--svh-espacio-5);
}

.svh-destacados-ahora__cab h2 { margin: 0; }
.svh-destacados-ahora__estrella { color: var(--svh-estado-avisa); }
.svh-destacados-ahora__cuenta { margin: 0; color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); font-weight: 600; }

.svh-destacados-ahora__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--svh-espacio-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.svh-destacados-ahora__lista { grid-template-columns: repeat(2, 1fr); }
}

.svh-destacado-fila {
	display: flex;
	gap: var(--svh-espacio-4);
	align-items: flex-start;
	padding: var(--svh-espacio-3);
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-tarjeta);
}

.svh-destacado-fila__foto { flex: 0 0 72px; inline-size: 72px; }
.svh-destacado-fila__texto { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: var(--svh-espacio-2); justify-items: start; }
.svh-destacado-fila__titulo { margin: 0; font-size: var(--svh-txt-cuerpo); font-weight: 600; }
.svh-destacado-fila__red { display: flex; align-items: center; gap: var(--svh-espacio-2); margin: 0; color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }
.svh-destacado-fila__red .svh-icono { inline-size: 14px; block-size: 14px; }
.svh-destacados-ahora__pie { margin: var(--svh-espacio-5) 0 0; }

/* ── G12 · el panel «Cuentas de este creador» ───────────────────── */
.svh-panel-cuentas__cab {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-3);
	align-items: flex-end;
	justify-content: space-between;
	margin-block-end: var(--svh-espacio-5);
}

.svh-panel-cuentas__antetitulo {
	margin: 0;
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--svh-texto-suave);
}

.svh-panel-cuentas__cab h2 { margin: 0; }
.svh-panel-cuentas__cuenta { margin: 0; color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }

.svh-panel-cuentas__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--svh-espacio-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.svh-panel-cuentas__lista { grid-template-columns: repeat(2, 1fr); }
}

.svh-panel-cuenta {
	padding: var(--svh-espacio-4);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-tarjeta);
}

.svh-panel-cuenta__cab { display: flex; gap: var(--svh-espacio-3); align-items: center; }
.svh-panel-cuenta__icono { display: grid; place-items: center; flex: 0 0 40px; inline-size: 40px; block-size: 40px; border-radius: var(--svh-radio-full); background: var(--svh-fondo-hundido); color: var(--svh-texto); }
.svh-panel-cuenta__icono .svh-icono { inline-size: 20px; block-size: 20px; }
.svh-panel-cuenta__quien { flex: 1 1 auto; min-inline-size: 0; }
.svh-panel-cuenta__red { margin: 0; font-weight: 700; }
.svh-panel-cuenta__cifra { margin: 0; color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); }

.svh-panel-cuenta__ir {
	flex: 0 0 auto;
	display: grid;
	justify-items: center;
	padding: var(--svh-espacio-2) var(--svh-espacio-3);
	border-radius: var(--svh-radio-sm);
	background: var(--svh-marca-suave);
	color: var(--svh-marca-hover);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
}

.svh-panel-cuenta__ir span { font-size: var(--svh-txt-micro); font-weight: 400; }

.svh-panel-cuenta__handles {
	display: grid;
	gap: var(--svh-espacio-2);
	margin: var(--svh-espacio-4) 0 0;
	padding: 0;
	list-style: none;
}

.svh-panel-handle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-2);
	border-radius: var(--svh-radio-sm);
	background: var(--svh-fondo-suave);
	color: var(--svh-texto);
	font-size: var(--svh-txt-micro);
	text-decoration: none;
}

.svh-panel-handle__arroba { font-weight: 700; }

.svh-chapa {
	display: inline-block;
	padding: 1px var(--svh-espacio-2);
	border-radius: var(--svh-radio-full);
	background: var(--svh-fondo-hundido);
	color: var(--svh-texto-suave);
	font-size: var(--svh-txt-micro);
	font-weight: 600;
	white-space: nowrap;
}

.svh-chapa--ok        { background: var(--svh-estado-ok-fondo); color: var(--svh-texto); }
.svh-chapa--avisa     { background: var(--svh-estado-avisa-fondo); color: var(--svh-texto); }
.svh-chapa--principal { background: var(--svh-marca-suave); color: var(--svh-marca-hover); }

/* ── G12 · las burbujas de colecciones ──────────────────────────── */
.svh-burbujas { margin-block-start: var(--svh-espacio-6); }
.svh-burbujas__titulo { margin: 0 0 var(--svh-espacio-3); font-size: var(--svh-txt-cuerpo); font-weight: 700; }
.svh-burbujas__vacio { margin: 0; color: var(--svh-texto-suave); font-size: var(--svh-txt-micro); max-inline-size: 62ch; }

.svh-burbujas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.svh-burbuja { display: grid; justify-items: center; gap: var(--svh-espacio-2); inline-size: 76px; text-decoration: none; color: var(--svh-texto); }

.svh-burbuja__anillo {
	display: grid;
	place-items: center;
	inline-size: 68px;
	block-size: 68px;
	border-radius: var(--svh-radio-full);
	/* El anillo de dos colores es la seña de una colección. Es decoración:
	   lo que identifica a cada una es su NOMBRE, escrito debajo. */
	padding: 3px;
	background: var(--svh-marca-suave);
	box-shadow: 0 0 0 2px var(--svh-marca) inset;
	overflow: hidden;
}

.svh-burbuja__anillo img { inline-size: 100%; block-size: 100%; border-radius: var(--svh-radio-full); object-fit: cover; }
.svh-burbuja__iniciales { font-family: var(--svh-fuente-titulo); font-weight: 800; color: var(--svh-marca-hover); }
.svh-burbuja__nombre { font-size: var(--svh-txt-micro); text-align: center; overflow-wrap: anywhere; }

/* ── Las otras redes, al pie de la pantalla de red ──────────────── */
.svh-otras-redes__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--svh-espacio-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 🔴 EL DESBORDE DE LA FICHA A 375 px — medido en el navegador el 23/08/2026.
   La columna del nombre es una celda de rejilla, y una celda de rejilla NO se
   encoge por debajo del ancho de su palabra más larga a menos que se le diga.
   Con `@soyjosemiguelvalenzuela` dentro, esa columna pedía **516 px en una
   pantalla de 375** y arrastraba consigo todo lo de al lado (el titular, el
   sello, el sector, las cifras y los botones: 10 elementos midiendo hasta
   `right = 530`). `min-inline-size: 0` le devuelve el permiso para encogerse;
   `overflow-wrap` (en `base.css`) parte la palabra. Hacen falta LAS DOS.
   La versión de escritorio ya lo tenía resuelto con `minmax(0, 1fr)` en la
   línea 1487; el móvil, que es el 69,9 % del tráfico, se había quedado sin. */
.svh-ficha__identidad,
.svh-ficha__retrato,
.svh-red-cab__texto,
.svh-cuenta-cab__texto,
.svh-panel-cuenta__quien { min-inline-size: 0; }

/* 🔴 ÁREA DE TOQUE — medida en el navegador a 375 px, no leída de mi regla.
   `svh-panel-cuenta__ir` daba 94×**42** y `svh-panel-handle` 317×**34**. El
   mínimo que se acepta aquí son 44×44 (es lo que mide la yema de un dedo:
   por debajo se falla el toque y se pulsa lo de al lado). El 69,9 % del
   tráfico es de móvil, así que esto no es un detalle. */
.svh-panel-cuenta__ir,
.svh-panel-handle,
.svh-ver-original { min-block-size: 44px; }

.svh-panel-cuenta__ir  { align-content: center; }
.svh-panel-handle      { align-items: center; }
.svh-ver-original      { display: flex; align-items: center; }

/* El redondel del avatar tiene que LEERSE como un avatar aunque no haya foto.
   En modo oscuro, `--svh-fondo-hundido` queda casi igual que el fondo de la
   página y el círculo desaparecía: se veía la letra flotando. Un borde de
   1 px lo devuelve al sitio. Visto en el navegador en oscuro, 23/08/2026. */
.svh-cuenta-cab__avatar { border: 1px solid var(--svh-borde-suave); }

/* ═══════════════════════════════════════════════════════════════════
 * 24 · UN ENLACE DENTRO DE UN PÁRRAFO SE SUBRAYA — axe-core, 23/08/2026
 *
 * ══ QUÉ PASABA ═══════════════════════════════════════════════════════
 * Dentro de un texto corrido, los enlaces se distinguían SOLO por el color.
 * Quien no distingue bien los colores —una de cada doce personas con visión
 * masculina, más o menos— ve una frase entera del mismo tono y no sabe que
 * ahí hay algo que se puede pulsar.
 *
 * Es el criterio 1.4.1 de la norma WCAG («uso del color»). axe-core lo marcó
 * como `link-in-text-block`, con impacto «serio», en **30 nodos**: el aviso
 * de IA del pie salía en las 24 pantallas medidas, más el pie de formulario
 * de la ficha y los dos correos de contacto de las páginas legales.
 *
 * ══ POR QUÉ ASÍ Y NO CON UNA REGLA GENERAL ═══════════════════════════
 * No se pone `a { text-decoration: underline }` a lo bruto: eso subrayaría
 * también las tarjetas de creador, las pestañas y los botones, que NO son
 * texto corrido y ya se distinguen por su forma. Se subraya donde de verdad
 * hay prosa, que es donde falla.
 *
 * Sin `:where()` y sin `!important` a propósito: `:where()` no suma
 * especificidad y Woodmart también escribe reglas de enlaces, así que un
 * selector de dos clases (0,2,0) gana limpio por especificidad y no depende
 * del orden de encolado.
 *
 * `text-underline-offset` separa la raya de las letras: sin eso, en 12 px la
 * raya se come las colas de la «g» y la «p» y se lee peor que sin subrayar.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-pie__ia p a,
.svh-formulario__legal a,
.svh-legal__cuerpo p a,
.svh-legal__cuerpo li a,
.svh-legal__contacto p a,
.svh-transparencia p a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ═══════════════════════════════════════════════════════════════════
 * 25 · LA FICHA DEL VÍDEO: DETALLES, COLOR DE CADA RED Y BOTÓN AL CANAL
 *      (H5 y H7 del contrato, 24/08/2026)
 *
 * ══ EL COLOR DE CADA RED, CON EL CONTRASTE MEDIDO ════════════════════
 * La etiqueta de red y el botón del canal llevan el color de SU red, no
 * el morado de la casa. Regla de la casa: texto normal ≥ 4,5:1. Todos los
 * fondos de abajo están MEDIDOS contra el texto blanco (WCAG, luminancia
 * relativa; guion en el informe v1-front-tema-20260824.md):
 *
 *   youtube   #CC0000 → 5,89:1   (el oficial #FF0000 da 4,00 y NO llega)
 *   instagram #C13584 → 5,11:1   (el oficial #E4405F da 4,04 y NO llega)
 *   tiktok    #161616 → 18,1:1
 *   facebook  #1259B3 → 6,76:1   (el oficial #1877F2 da 4,23 y NO llega)
 *   threads   #101010 → 19,0:1
 *   x         #0F1419 → 18,5:1
 *   twitch    #9146FF → 4,64:1   (el oficial, y SÍ llega)
 *   pinterest #E60023 → 4,78:1   (el oficial, y SÍ llega)
 *   linkedin  #0A66C2 → 5,69:1   (el oficial, y SÍ llega)
 *   telegram  #0C7BB3 → 4,67:1   (el oficial #229ED9 da 3,02 y NO llega)
 *   whatsapp  #075E54 → 7,67:1   (el oficial #25D366 da 1,98: ni de lejos)
 *
 * El hover es SIEMPRE una variante más oscura del mismo color: oscurecer
 * sobre texto blanco solo puede subir el contraste, nunca bajarlo.
 *
 * ══ POR QUÉ ESTO GANA SIN !important ═════════════════════════════════
 * Misma especificidad (0,1,0) que `.svh-etiqueta` y que los `.svh-boton--*`
 * de arriba, pero DESPUÉS en el mismo fichero: gana por orden, que es la
 * regla de la casa (se encola después, nunca se grita).
 * ═══════════════════════════════════════════════════════════════════ */

/* La caja de detalles del vídeo (música y lugar) — H5 */
.svh-video-detalle__detalles {
	list-style: none;
	margin: var(--svh-espacio-4) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-2);
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
}

.svh-detalle__que {
	display: inline-block;
	min-inline-size: 3.5rem;
	font-weight: 700;
	color: var(--svh-texto);
}

/* La etiqueta de red y el botón del canal, con el color de cada red */
.svh-boton--red-social {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	color: #fff;
}

.svh-boton--red-social .svh-icono { inline-size: 18px; block-size: 18px; flex: 0 0 auto; }

.svh-etiqueta--youtube,   .svh-boton--youtube   { background: #CC0000; color: #fff; }
.svh-etiqueta--instagram, .svh-boton--instagram { background: #C13584; color: #fff; }
.svh-etiqueta--tiktok,    .svh-boton--tiktok    { background: #161616; color: #fff; }
.svh-etiqueta--facebook,  .svh-boton--facebook  { background: #1259B3; color: #fff; }
.svh-etiqueta--threads,   .svh-boton--threads   { background: #101010; color: #fff; }
.svh-etiqueta--x,         .svh-boton--x         { background: #0F1419; color: #fff; }
.svh-etiqueta--twitch,    .svh-boton--twitch    { background: #9146FF; color: #fff; }
.svh-etiqueta--pinterest, .svh-boton--pinterest { background: #E60023; color: #fff; }
.svh-etiqueta--linkedin,  .svh-boton--linkedin  { background: #0A66C2; color: #fff; }
.svh-etiqueta--telegram,  .svh-boton--telegram  { background: #0C7BB3; color: #fff; }
.svh-etiqueta--whatsapp,  .svh-boton--whatsapp  { background: #075E54; color: #fff; }

/* El hover del botón: el mismo color, un punto más oscuro (contraste sube) */
.svh-boton--youtube:hover,   .svh-boton--youtube:focus-visible   { background: #B00000; color: #fff; }
.svh-boton--instagram:hover, .svh-boton--instagram:focus-visible { background: #A02D6F; color: #fff; }
.svh-boton--tiktok:hover,    .svh-boton--tiktok:focus-visible    { background: #000;    color: #fff; }
.svh-boton--facebook:hover,  .svh-boton--facebook:focus-visible  { background: #0E4C99; color: #fff; }
.svh-boton--threads:hover,   .svh-boton--threads:focus-visible   { background: #000;    color: #fff; }
.svh-boton--x:hover,         .svh-boton--x:focus-visible         { background: #000;    color: #fff; }
.svh-boton--twitch:hover,    .svh-boton--twitch:focus-visible    { background: #772CE8; color: #fff; }
.svh-boton--pinterest:hover, .svh-boton--pinterest:focus-visible { background: #BD081C; color: #fff; }
.svh-boton--linkedin:hover,  .svh-boton--linkedin:focus-visible  { background: #084F97; color: #fff; }
.svh-boton--telegram:hover,  .svh-boton--telegram:focus-visible  { background: #006C9E; color: #fff; }
.svh-boton--whatsapp:hover,  .svh-boton--whatsapp:focus-visible  { background: #054C44; color: #fff; }

/* ══ MODO OSCURO: las tres redes «negras» no pueden ser negro sobre
 * negro. La tarjeta oscura es #16161C — un chip #161616 encima desaparece.
 * Se invierten SOLO esas tres: fondo claro, texto casi negro (≈17,9:1).
 * Mismo doble mecanismo que tokens.css: el sistema y el interruptor. ══ */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .svh-etiqueta--tiktok,
	:root:not([data-tema="claro"]) .svh-etiqueta--threads,
	:root:not([data-tema="claro"]) .svh-etiqueta--x,
	:root:not([data-tema="claro"]) .svh-boton--tiktok,
	:root:not([data-tema="claro"]) .svh-boton--threads,
	:root:not([data-tema="claro"]) .svh-boton--x {
		background: #F2F2F5;
		color: #121212;
	}
}

[data-tema="oscuro"] .svh-etiqueta--tiktok,
[data-tema="oscuro"] .svh-etiqueta--threads,
[data-tema="oscuro"] .svh-etiqueta--x,
[data-tema="oscuro"] .svh-boton--tiktok,
[data-tema="oscuro"] .svh-boton--threads,
[data-tema="oscuro"] .svh-boton--x {
	background: #F2F2F5;
	color: #121212;
}

/* ═══════════════════════════════════════════════════════════════════
 * 28 · LAS DOS PANTALLAS QUE CONVIERTEN VISITAS EN CLIENTES
 *      `/acceso/` y `/registro/`  ·  añadido el 28/08/2026
 *
 * POR QUÉ EXISTE ESTE BLOQUE. La Tanda B lo midió con el navegador:
 * `grep -c 'svh-acceso' componentes.css` daba **0**. Los dos formularios
 * no tenían NI UNA regla de estilo. Se veían con los botones grises de
 * fábrica del navegador:
 *   · «Entrar» ................... 90 × 26 px, fondo rgb(243,243,243)
 *   · «Crear mi cuenta gratis» ... 202 × 26 px, esquinas de 0 px
 * En modo oscuro eran dos cajas grises claras sobre un fondo casi negro:
 * parecían un formulario roto. Y con 26 px de alto son casi imposibles de
 * acertar con el dedo (el mínimo cómodo son 44).
 *
 * Aquí se arreglan de una vez F3, F5, F6 y F13 de esa misma tanda, porque
 * los cuatro viven en estas dos pantallas.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-acceso,
.svh-alta {
	display: grid;
	gap: var(--svh-espacio-4);
	inline-size: min(26rem, 100%);
	margin-inline: auto;
	margin-block: var(--svh-espacio-6) var(--svh-espacio-8);
	padding: var(--svh-espacio-6);
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-lg);

	/* F5 · EL ANILLO DEL TECLADO EN LAS CASILLAS Y LOS ENLACES.
	   Woodmart pinta ese anillo con `!important`, así que contra él no gana
	   ninguna especificidad — pero su valor está hecho de variables, y las
	   variables sí se pueden dar. Es exactamente el mismo truco ya probado
	   en el aviso de cookies (`Legal/Cookies.php`, 23/08/2026).
	   Con `--svh-marca`: morado 600 sobre blanco = 7,10:1 en claro, y
	   morado 200 sobre el fondo oscuro = 15,9:1 en oscuro. El mínimo de la
	   WCAG 2.2 (criterio 2.4.11) son 3:1. */
	--wd-otl-color: var(--svh-marca);
	--wd-otl-width: 3px;
	--wd-otl-style: solid;
	--wd-otl-offset: 2px;
}

/* Solo las filas de campo se ponen en rejilla (etiqueta arriba, caja
   debajo). Los párrafos de texto corriente —«¿No tienes cuenta? Crea una
   gratis.»— se quedan como texto: si se les pone rejilla, el enlace se va a
   un renglón propio y el punto final se queda solo en otro. Se distinguen
   porque la fila de campo lleva `<label for=…>` y el párrafo de texto no. */
.svh-acceso p,
.svh-alta p { margin: 0; }
.svh-acceso p:has(> label[for]),
.svh-alta p:has(> label[for]) { display: grid; gap: var(--svh-espacio-2); }

.svh-acceso label,
.svh-alta label { font-weight: 600; font-size: var(--svh-txt-micro); color: var(--svh-texto); }

.svh-acceso input[type="text"],
.svh-acceso input[type="password"],
.svh-alta input[type="text"],
.svh-alta input[type="email"],
.svh-alta input[type="password"] {
	inline-size: 100%;
	min-block-size: 48px;                    /* dedo, no ratón */
	padding: var(--svh-espacio-3);
	font: inherit;
	color: var(--svh-texto);
	background: var(--svh-fondo);
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-sm);
}

/* F5 · ANTES, en modo claro, al entrar en una caja con el teclado lo ÚNICO
   que cambiaba era el borde: de negro al 10 % a negro al 15 %. Sobre blanco
   eso son **1,4:1** y el mínimo son 3:1 — quien rellenaba el alta con el
   teclado no sabía en qué casilla estaba. (En oscuro sí se veía.)
   La regla de Woodmart que pinta el anillo morado NO incluye
   `input[type=text|email|password]`, así que aquí no hay pelea de
   `!important` y se puede declarar el anillo directamente. */
.svh-acceso input:focus-visible,
.svh-alta input:focus-visible {
	outline: 3px solid var(--svh-marca);
	outline-offset: 2px;
	border-color: var(--svh-marca);
}

/* La contraseña y su botón «Mostrar», en la misma fila. */
.svh-acceso p:has(> #svh-acceso-ver-pwd),
.svh-alta p:has(> #svh-alta-ver-password) {
	grid-template-columns: 1fr auto;
	align-items: end;
}
.svh-acceso p:has(> #svh-acceso-ver-pwd) label,
.svh-alta p:has(> #svh-alta-ver-password) label { grid-column: 1 / -1; }

/* F13 · la casilla «Recordarme» medía 13 × 13 px, la de fábrica del
   navegador. El criterio 2.5.8 de la WCAG 2.2 pide **24 × 24** de zona
   pulsable. La casilla se ve de 22 px y la ETIQUETA ENTERA es la zona
   pulsable, con 44 px de alto: se acierta con el dedo a la primera. */
.svh-acceso__casilla {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-3);
	min-block-size: 44px;
	font-weight: 400;
	font-size: var(--svh-txt-cuerpo);
	cursor: pointer;
}
.svh-acceso__casilla input[type="checkbox"] {
	inline-size: 22px;
	block-size: 22px;
	margin: 0;
	accent-color: var(--svh-marca);
	cursor: pointer;
}

/* F3 · el botón de enviar ocupa el ancho entero: es la acción de la
   pantalla, y en un móvil no se falla. Alto real medido después: 48 px. */
.svh-acceso__enviar { inline-size: 100%; min-block-size: 48px; }

/* F6 · «Crea una gratis» y «¿Olvidaste tu contraseña?» eran enlaces SIN
   subrayar, que solo se distinguían por el color, y el color casi coincidía
   con el texto de al lado: **2,76:1 en claro y 1,39:1 en oscuro** (el
   mínimo son 3:1). `axe-core` los marcaba como `link-in-text-block`
   (gravedad seria) en las cuatro combinaciones. Con subrayado, el color
   deja de ser el único indicador y ese criterio ya no aplica: es la regla
   de la casa —el color nunca es el único indicador— aplicada aquí. */
.svh-acceso a,
.svh-alta a {
	color: var(--svh-marca);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.svh-acceso a:hover,
.svh-alta a:hover { color: var(--svh-marca-hover); }

/* Los avisos de error, que hasta hoy salían como un párrafo normal. */
.svh-acceso-error,
.svh-alta-error {
	margin: 0;
	padding: var(--svh-espacio-3);
	color: var(--svh-texto);
	background: var(--svh-fondo-hundido);
	border: 1px solid var(--svh-borde);
	border-inline-start: 4px solid var(--svh-estado-error, #B91C1C);
	border-radius: var(--svh-radio-sm);
	font-size: var(--svh-txt-micro);
}

/* El medidor de la contraseña del alta: una lista de requisitos, no viñetas
   sueltas. El color NUNCA es el único indicador: va con ✓ y con ·. */
#svh-alta-medidor { display: grid; gap: var(--svh-espacio-2); margin: 0; padding: 0; list-style: none; }
#svh-alta-medidor li {
	display: flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
}
#svh-alta-medidor li::before { content: '·'; inline-size: 1em; font-weight: 700; text-align: center; }
#svh-alta-medidor li[data-ok="1"] { color: var(--svh-estado-ok, #047857); }
#svh-alta-medidor li[data-ok="1"]::before { content: '✓'; }

/* ═══════════════════════════════════════════════════════════════════
 * 29 · F8 y F9 · QUE NO SE CORTEN LAS FOTOS  ·  28/08/2026
 * ═══════════════════════════════════════════════════════════════════ */

/* 🔴 F8 y F9 · LA FOTO DEL CREADOR VOLVÍA A SER UN RECTÁNGULO ESTIRADO.
   ────────────────────────────────────────────────────────────────────
   `.svh-tarjeta-creador__foto` ya pedía `aspect-ratio: 1` (cuadrada), pero
   la misma etiqueta lleva también la clase `.svh-portada`, y esa regla
   —escrita más abajo en este mismo fichero, o sea con la misma fuerza pero
   ganando por ir después— le pone `block-size: 100%`. Un alto explícito
   anula la proporción, así que la foto se estiraba hasta el alto de la
   tarjeta.

   Medido el 28/08 a 375 px con getBoundingClientRect, tres tarjetas:
     150×150 -> 88×223 = **61 % de la foto fuera**
     480×381 -> 88×151 = 54 % fuera
     150×150 -> 88×151 = 42 % fuera
   Y en escritorio era además el motivo de que las 4 tarjetas de una fila
   quedaran desalineadas (F9): las fotos medían 242, 293 y 261 px de alto,
   51 px de diferencia, y los títulos arrancaban a cuatro alturas distintas.

   Con el alto en automático la proporción vuelve a mandar: la foto es
   cuadrada, todas las de una fila miden lo mismo, y una foto cuadrada
   (que es lo que son los avatares) se ve ENTERA. */
.svh-tarjeta-creador__foto {
	block-size: auto;
	aspect-ratio: 1;
}

/* 🔴 F8 · LA FOTO ENTERA CUANDO NO TIENE LA FORMA DEL HUECO.
   La clase la pone `svh_tema_clase_ajuste()` en `inc/portadas.php`, y solo
   cuando la diferencia de forma pasa del 25 %. Con `contain` no se pierde
   ni un píxel de la foto; el hueco que sobra se rellena con el fondo
   hundido del tema, que existe en claro y en oscuro. */
.svh-portada--entera {
	object-fit: contain;
	background: var(--svh-fondo-hundido);
}

/* ═══════════════════════════════════════════════════════════════════
 * 30 · E2 · LA PUERTA DE EDAD DEL ALTA  ·  28/08/2026
 *
 * Dos casillas que deciden dos cosas distintas: los 16 años son el mínimo
 * para tener cuenta, y los 18 son lo que hace falta para que se publique el
 * teléfono. Se separan del resto del formulario con un marco suave para que
 * se lean como un bloque y no como dos casillas sueltas más.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-alta__edad {
	display: grid;
	gap: var(--svh-espacio-2);
	margin: 0;
	padding: var(--svh-espacio-4);
	border: 1px solid var(--svh-borde-suave);
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-suave);
}

.svh-alta__edad legend {
	padding-inline: var(--svh-espacio-2);
	font-weight: 700;
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto);
}

/* La casilla y su texto, alineados arriba: el texto son dos renglones y con
   `align-items: center` la casilla quedaba flotando a media altura. */
.svh-alta__edad .svh-acceso__casilla {
	align-items: start;
	min-block-size: 44px;
	font-size: var(--svh-txt-micro);
	line-height: 1.45;
}
.svh-alta__edad .svh-acceso__casilla input[type="checkbox"] { margin-block-start: 2px; }

/* ═══════════════════════════════════════════════════════════════════
 * 31 · R1 · QUE LA TABLA COMPARATIVA DE /planes/ QUEPA EN UN MÓVIL
 *      28/08/2026
 *
 * MEDIDO ANTES, a 375 px: el carril de la tabla mide `clientWidth 347` y la
 * tabla `scrollWidth 377`. **Se salen 30 px, y son justo la última columna:
 * «Cuál sale mejor»** — la única conclusión que hay que leer de esa tabla.
 * Hay que arrastrar para verla, y solo el 45,2 % de las sesiones móviles
 * hacen scroll.
 *
 * De dónde salen los 30 px: la tabla tiene 4 columnas y cada celda lleva
 * `--svh-espacio-3` (12 px) de hueco a cada lado. Son **96 px de puro
 * hueco** en una pantalla de 347. Bajando el hueco lateral a 8 px se
 * recuperan **32 px**, que son los 30 que faltaban y dos de propina.
 *
 * El hueco de ARRIBA y ABAJO no se toca: es lo que hace que las filas se
 * distingan, y quitarlo apretaría la tabla sin ganar ancho.
 *
 * ⚠️ Y el carril se queda como está (`overflow-x: auto`, `tabindex="0"`,
 * `role="region"`): que hoy quepa no quiere decir que quepa siempre. Con la
 * letra en «Muy grande» del widget de accesibilidad volverá a no caber, y
 * entonces el carril es lo que salva la situación.
 * ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
	.svh-tabla th,
	.svh-tabla td {
		/* Con `--svh-espacio-2` (8 px) se pasaba de 30 px fuera a **2**.
		   Faltaban dos, así que se baja a 6,4 px: la tabla entra con margen y
		   las celdas siguen separadas. Medido después: **0 px fuera**. */
		padding-inline: .4rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ENTRAR CON FACEBOOK · INSTAGRAM · THREADS      (29/08/2026)
   ───────────────────────────────────────────────────────────────────────
   Los tres botones que van encima del formulario de /acceso/ y /registro/.
   Solo se pintan cuando `svh_entrar_con_red_on` está encendido, así que
   hoy este bloque no se ve en ninguna pantalla — y cuando se vea, ya
   estará con el contraste comprobado, que es la lección del rediseño que
   hubo que revertir por ilegible.

   Cero `!important`: todo con tokens y con la especificidad justa.
   Los colores de marca de cada red van escritos aquí y no como token
   global a propósito: son de OTRA empresa, no de la casa, y no deben
   poder colarse en el resto del diseño.
   ═══════════════════════════════════════════════════════════════════════ */

.svh-entrar-redes {
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-2);
	margin-block-end: var(--svh-espacio-6);
}

.svh-entrar-redes__titulo {
	margin: 0 0 var(--svh-espacio-1);
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-suave);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.svh-entrar-redes__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;             /* el mínimo táctil de las pautas WCAG */
	padding: var(--svh-espacio-2) var(--svh-espacio-4);
	border: 1px solid var(--svh-borde);
	border-radius: var(--svh-radio-md);
	background: var(--svh-fondo-tarjeta);
	color: var(--svh-texto);
	font-family: var(--svh-fuente-cuerpo);
	font-weight: 600;
	text-decoration: none;
	transition: var(--svh-transicion);
}

.svh-entrar-redes__boton:hover,
.svh-entrar-redes__boton:focus-visible {
	border-color: var(--svh-marca);
	background: var(--svh-marca-suave);
}

.svh-entrar-redes__boton:focus-visible {
	outline: var(--svh-foco);
	outline-offset: 2px;
}

/* La franja de color de cada red, a la izquierda. Es un adorno: el nombre
   de la red va escrito en el propio botón, así que quien no distinga los
   colores no se pierde nada. */
.svh-entrar-redes__boton {
	position: relative;
	overflow: hidden;
}

.svh-entrar-redes__boton::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 4px;
	background: currentColor;
	opacity: .55;
}

.svh-entrar-redes__boton--facebook::before  { background: #1877F2; opacity: 1; }
.svh-entrar-redes__boton--instagram::before { background: linear-gradient(180deg,#F58529,#DD2A7B,#8134AF); opacity: 1; }
.svh-entrar-redes__boton--threads::before   { background: #000; opacity: 1; }

/* En oscuro, la franja negra de Threads desaparecería contra el fondo. */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="claro"]) .svh-entrar-redes__boton--threads::before { background: #FFF; }
}

:root[data-tema="oscuro"] .svh-entrar-redes__boton--threads::before { background: #FFF; }

.svh-entrar-redes__letra {
	margin: 0;
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-tenue);
	line-height: var(--svh-alto-linea);
}

/* ═══════════════════════════════════════════════════════════════════════
   EXPLORAR — la columna del pie que enlaza lo que estaba huérfano
   ───────────────────────────────────────────────────────────────────────
   30/08/2026. Antes de esto, /catalogo/ y las categorías de creador
   tenían CERO enlaces internos en toda la web. Con esto los tienen desde
   todas las páginas. Ver partes/explorar.php.

   Solo tokens, cero !important, y la columna se parte en dos en pantallas
   estrechas para que la lista de 8 redes no se haga un chorizo vertical.
   ═══════════════════════════════════════════════════════════════════════ */

.svh-explorar__titulo {
	margin: var(--svh-espacio-3) 0 var(--svh-espacio-1);
	font-size: var(--svh-txt-micro);
	color: var(--svh-texto-tenue);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.svh-explorar__titulo:first-of-type {
	margin-block-start: 0;
}

.svh-explorar__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px var(--svh-espacio-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.svh-explorar__lista a {
	display: inline-block;
	padding-block: 6px;      /* área de toque cómoda sin separar de más */
	line-height: var(--svh-alto-linea);
}

@media (min-width: 900px) {
	/* En escritorio la columna es estrecha: una sola fila lee mejor. */
	.svh-explorar__lista {
		grid-template-columns: 1fr;
	}
}


/* ═══════════════════════════════════════════════════════════════════
 * LA MARIPOSA-PUNTO DE LISTA · `svh-lista-mariposa` (PIEL V2, 30/08/2026)
 *
 * Donde una lista llevaría puntos, el punto ES la mariposa del logo en
 * miniatura: 18 px de ancho a cuerpo 14 (papel de Design §4). El dibujo
 * va como data-uri del SVG OFICIAL — jamás redibujado:
 *  · En oscuro, tal cual sus tres rosas (sobre #0A0A0D se ven de sobra).
 *  · Sobre claro, la silueta MACIZA en #8C3F7A — la regla del añadido 6:
 *    los rosas pastel sobre blanco dan ~1,3:1 y desaparecen; en pequeño,
 *    verse manda. Misma geometría, un solo relleno: no es un redibujo.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-lista-mariposa,
.svh-pagina__cuerpo ul,
.svh-legal__cuerpo ul {
	list-style: none;
	padding-inline-start: 0;
}

.svh-lista-mariposa > li,
.svh-pagina__cuerpo ul > li,
.svh-legal__cuerpo ul > li {
	position: relative;
	padding-inline-start: 28px;
	margin-block-end: var(--svh-espacio-2);
}

.svh-lista-mariposa > li::before,
.svh-pagina__cuerpo ul > li::before,
.svh-legal__cuerpo ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.28em;
	inline-size: 18px;
	block-size: 13.5px;
	background: url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22309.2%2084.0%20273.2%20204.7%22><path%20d=%22M444.94%20179.93C446.06%20180%20447.18%20180.08%20448.31%20180.15C451.53%20180.28%20455.37%20179.11%20458.81%20178.53C466.1%20177.3%20473.47%20176.22%20480.81%20175.53C491.54%20174.53%20502.76%20174.19%20513.5%20175.03C516.23%20175.24%20519.02%20176%20521.58%20175.96C534.15%20177.09%20546.13%20181.58%20556.05%20189.33C558.82%20192.41%20561.49%20195.45%20563.35%20199.19C569.06%20210.67%20568.72%20227.12%20561.33%20237.79C558.06%20242.52%20553.6%20245%20549.24%20248.47C541.88%20249.96%20535.28%20252.41%20527.51%20251.81C499.06%20249.64%20474.74%20230.1%20459.09%20207.36C453.7%20199.54%20450.09%20190.93%20445.5%20182.7C441.38%20190.91%20437.6%20199.19%20432.38%20206.81C416.62%20229.81%20392.28%20249.68%20363.49%20251.83C355.82%20252.41%20349.07%20250.24%20341.83%20248.36C337.59%20245.24%20333.28%20242.72%20330.12%20238.34C319.78%20224.02%20322.61%20201.88%20334.81%20189.77C343.99%20181.99%20354.51%20178.58%20366.21%20176.37C369.83%20176.09%20373.73%20175.33%20377.5%20175.03C388.24%20174.19%20399.46%20174.53%20410.19%20175.53C417.78%20176.24%20425.68%20177.08%20433.19%20178.53C437.22%20179.31%20440.81%20180.07%20444.94%20179.93Z%22%20fill=%22%23ebbfda%22%20stroke=%22%23ebbfda%22%20stroke-width=%221.4%22%20stroke-linejoin=%22round%22></path><path%20d=%22M561.08%20135C555.5%20131.25%20551.28%20126.94%20544.42%20125.2C533.27%20122.37%20521.51%20125.13%20511.2%20129.66C493.27%20137.54%20477.67%20149.67%20463.2%20162.71C458.17%20167.24%20453.58%20173.26%20448.06%20177.06C449.69%20168.81%20455.44%20160.35%20459.48%20152.98C470.88%20132.14%20491.42%20100.66%20515.8%2094.4C533.1%2089.96%20554.08%20100.11%20560.3%20117.31C562.2%20122.57%20563.4%20129.76%20561.08%20135ZM448.06%20177.06C448.14%20178.09%20448.23%20179.12%20448.31%20180.15C447.18%20180.08%20446.06%20180%20444.94%20179.93C439.74%20172.61%20431.93%20166.21%20425.16%20160.34C405.61%20143.39%20374.35%20118.08%20346.6%20125.23C340.89%20126.7%20336.65%20130.02%20331.85%20133.16C327.82%20114.5%20350.7%2096.93%20367.5%2096.18C378.3%2095.7%20388.55%20101.23%20396.82%20107.65C412.14%20119.56%20423.45%20137.01%20432.91%20153.68C436.44%20159.91%20439.67%20166.27%20442.76%20172.73C444.14%20175.62%20444.55%20179.85%20448.06%20177.06ZM331.68%20134C333.56%20147.59%20341.87%20158.73%20352.6%20166.95C356.76%20170.14%20363.13%20172.5%20366.21%20176.37C354.51%20178.58%20343.99%20181.99%20334.81%20189.77C333.67%20188.16%20332.11%20187.19%20330.64%20185.86C327.48%20183%20324.72%20179.52%20322.65%20175.8C315.18%20162.37%20319.67%20143.49%20331.68%20134ZM561.22%20135.89C564.6%20138.87%20567.28%20143.26%20569.14%20147.39C576.42%20163.48%20569.55%20179.43%20556.05%20189.33C546.13%20181.58%20534.15%20177.09%20521.58%20175.96C524.44%20172.37%20533.32%20169.28%20537.75%20166.26C548.66%20158.85%20557.4%20148.64%20561.22%20135.89ZM549.24%20248.47C549.08%20252.45%20547.41%20256.49%20545.56%20260.11C534.59%20281.51%20511.67%20281.42%20492.67%20270.92C472.98%20260.04%20459.41%20239.12%20452.27%20218.29C450.61%20213.45%20449.21%20208.48%20448.18%20203.46C447.39%20199.66%20447.34%20195.35%20445.5%20192C442.8%20198.33%20441.89%20208.74%20439.56%20216.12C432.95%20236.94%20419.88%20257.79%20400.93%20269.44C381.84%20281.18%20356.89%20282.69%20345.5%20260.01C343.66%20256.34%20342.07%20252.42%20341.83%20248.36C349.07%20250.24%20355.82%20252.41%20363.49%20251.83C392.28%20249.68%20416.62%20229.81%20432.38%20206.81C437.6%20199.19%20441.38%20190.91%20445.5%20182.7C450.09%20190.93%20453.7%20199.54%20459.09%20207.36C474.74%20230.1%20499.06%20249.64%20527.51%20251.81C535.28%20252.41%20541.88%20249.96%20549.24%20248.47Z%22%20fill=%22%23ebbfda%22%20stroke=%22%23ebbfda%22%20stroke-width=%221.4%22%20stroke-linejoin=%22round%22></path><path%20d=%22M444.94%20179.93C440.81%20180.07%20437.22%20179.31%20433.19%20178.53C425.68%20177.08%20417.78%20176.24%20410.19%20175.53C399.46%20174.53%20388.24%20174.19%20377.5%20175.03C373.73%20175.33%20369.83%20176.09%20366.21%20176.37C363.13%20172.5%20356.76%20170.14%20352.6%20166.95C341.87%20158.73%20333.56%20147.59%20331.68%20134C331.74%20133.72%20331.8%20133.44%20331.85%20133.16C336.65%20130.02%20340.89%20126.7%20346.6%20125.23C374.35%20118.08%20405.61%20143.39%20425.16%20160.34C431.93%20166.21%20439.74%20172.61%20444.94%20179.93ZM561.08%20135C561.13%20135.29%20561.18%20135.59%20561.22%20135.89C557.4%20148.64%20548.66%20158.85%20537.75%20166.26C533.32%20169.28%20524.44%20172.37%20521.58%20175.96C519.02%20176%20516.23%20175.24%20513.5%20175.03C502.76%20174.19%20491.54%20174.53%20480.81%20175.53C473.47%20176.22%20466.1%20177.3%20458.81%20178.53C455.37%20179.11%20451.53%20180.28%20448.31%20180.15C448.23%20179.12%20448.14%20178.09%20448.06%20177.06C453.58%20173.26%20458.17%20167.24%20463.2%20162.71C477.67%20149.67%20493.27%20137.54%20511.2%20129.66C521.51%20125.13%20533.27%20122.37%20544.42%20125.2C551.28%20126.94%20555.5%20131.25%20561.08%20135Z%22%20fill=%22%23ebbfda%22%20stroke=%22%23ebbfda%22%20stroke-width=%221.4%22%20stroke-linejoin=%22round%22></path><path%20d=%22M444.94%20179.93C446.06%20180%20447.18%20180.08%20448.31%20180.15C451.53%20180.28%20455.37%20179.11%20458.81%20178.53C466.1%20177.3%20473.47%20176.22%20480.81%20175.53C491.54%20174.53%20502.76%20174.19%20513.5%20175.03C516.23%20175.24%20519.02%20176%20521.58%20175.96C534.15%20177.09%20546.13%20181.58%20556.05%20189.33C558.82%20192.41%20561.49%20195.45%20563.35%20199.19C569.06%20210.67%20568.72%20227.12%20561.33%20237.79C558.06%20242.52%20553.6%20245%20549.24%20248.47C541.88%20249.96%20535.28%20252.41%20527.51%20251.81C499.06%20249.64%20474.74%20230.1%20459.09%20207.36C453.7%20199.54%20450.09%20190.93%20445.5%20182.7C441.38%20190.91%20437.6%20199.19%20432.38%20206.81C416.62%20229.81%20392.28%20249.68%20363.49%20251.83C355.82%20252.41%20349.07%20250.24%20341.83%20248.36C337.59%20245.24%20333.28%20242.72%20330.12%20238.34C319.78%20224.02%20322.61%20201.88%20334.81%20189.77C343.99%20181.99%20354.51%20178.58%20366.21%20176.37C369.83%20176.09%20373.73%20175.33%20377.5%20175.03C388.24%20174.19%20399.46%20174.53%20410.19%20175.53C417.78%20176.24%20425.68%20177.08%20433.19%20178.53C437.22%20179.31%20440.81%20180.07%20444.94%20179.93Z%22%20fill=%22%23e7b0d0%22%20fill-rule=%22evenodd%22%20stroke=%22%23e7b0d0%22%20stroke-width=%220.5%22%20stroke-linejoin=%22round%22></path><path%20d=%22M561.08%20135C555.5%20131.25%20551.28%20126.94%20544.42%20125.2C533.27%20122.37%20521.51%20125.13%20511.2%20129.66C493.27%20137.54%20477.67%20149.67%20463.2%20162.71C458.17%20167.24%20453.58%20173.26%20448.06%20177.06C449.69%20168.81%20455.44%20160.35%20459.48%20152.98C470.88%20132.14%20491.42%20100.66%20515.8%2094.4C533.1%2089.96%20554.08%20100.11%20560.3%20117.31C562.2%20122.57%20563.4%20129.76%20561.08%20135ZM448.06%20177.06C448.14%20178.09%20448.23%20179.12%20448.31%20180.15C447.18%20180.08%20446.06%20180%20444.94%20179.93C439.74%20172.61%20431.93%20166.21%20425.16%20160.34C405.61%20143.39%20374.35%20118.08%20346.6%20125.23C340.89%20126.7%20336.65%20130.02%20331.85%20133.16C327.82%20114.5%20350.7%2096.93%20367.5%2096.18C378.3%2095.7%20388.55%20101.23%20396.82%20107.65C412.14%20119.56%20423.45%20137.01%20432.91%20153.68C436.44%20159.91%20439.67%20166.27%20442.76%20172.73C444.14%20175.62%20444.55%20179.85%20448.06%20177.06ZM331.68%20134C333.56%20147.59%20341.87%20158.73%20352.6%20166.95C356.76%20170.14%20363.13%20172.5%20366.21%20176.37C354.51%20178.58%20343.99%20181.99%20334.81%20189.77C333.67%20188.16%20332.11%20187.19%20330.64%20185.86C327.48%20183%20324.72%20179.52%20322.65%20175.8C315.18%20162.37%20319.67%20143.49%20331.68%20134ZM561.22%20135.89C564.6%20138.87%20567.28%20143.26%20569.14%20147.39C576.42%20163.48%20569.55%20179.43%20556.05%20189.33C546.13%20181.58%20534.15%20177.09%20521.58%20175.96C524.44%20172.37%20533.32%20169.28%20537.75%20166.26C548.66%20158.85%20557.4%20148.64%20561.22%20135.89ZM549.24%20248.47C549.08%20252.45%20547.41%20256.49%20545.56%20260.11C534.59%20281.51%20511.67%20281.42%20492.67%20270.92C472.98%20260.04%20459.41%20239.12%20452.27%20218.29C450.61%20213.45%20449.21%20208.48%20448.18%20203.46C447.39%20199.66%20447.34%20195.35%20445.5%20192C442.8%20198.33%20441.89%20208.74%20439.56%20216.12C432.95%20236.94%20419.88%20257.79%20400.93%20269.44C381.84%20281.18%20356.89%20282.69%20345.5%20260.01C343.66%20256.34%20342.07%20252.42%20341.83%20248.36C349.07%20250.24%20355.82%20252.41%20363.49%20251.83C392.28%20249.68%20416.62%20229.81%20432.38%20206.81C437.6%20199.19%20441.38%20190.91%20445.5%20182.7C450.09%20190.93%20453.7%20199.54%20459.09%20207.36C474.74%20230.1%20499.06%20249.64%20527.51%20251.81C535.28%20252.41%20541.88%20249.96%20549.24%20248.47Z%22%20fill=%22%23ebbfda%22%20fill-rule=%22evenodd%22%20stroke=%22%23ebbfda%22%20stroke-width=%220.5%22%20stroke-linejoin=%22round%22></path><path%20d=%22M444.94%20179.93C440.81%20180.07%20437.22%20179.31%20433.19%20178.53C425.68%20177.08%20417.78%20176.24%20410.19%20175.53C399.46%20174.53%20388.24%20174.19%20377.5%20175.03C373.73%20175.33%20369.83%20176.09%20366.21%20176.37C363.13%20172.5%20356.76%20170.14%20352.6%20166.95C341.87%20158.73%20333.56%20147.59%20331.68%20134C331.74%20133.72%20331.8%20133.44%20331.85%20133.16C336.65%20130.02%20340.89%20126.7%20346.6%20125.23C374.35%20118.08%20405.61%20143.39%20425.16%20160.34C431.93%20166.21%20439.74%20172.61%20444.94%20179.93ZM561.08%20135C561.13%20135.29%20561.18%20135.59%20561.22%20135.89C557.4%20148.64%20548.66%20158.85%20537.75%20166.26C533.32%20169.28%20524.44%20172.37%20521.58%20175.96C519.02%20176%20516.23%20175.24%20513.5%20175.03C502.76%20174.19%20491.54%20174.53%20480.81%20175.53C473.47%20176.22%20466.1%20177.3%20458.81%20178.53C455.37%20179.11%20451.53%20180.28%20448.31%20180.15C448.23%20179.12%20448.14%20178.09%20448.06%20177.06C453.58%20173.26%20458.17%20167.24%20463.2%20162.71C477.67%20149.67%20493.27%20137.54%20511.2%20129.66C521.51%20125.13%20533.27%20122.37%20544.42%20125.2C551.28%20126.94%20555.5%20131.25%20561.08%20135Z%22%20fill=%22%23e7b2d2%22%20fill-rule=%22evenodd%22%20stroke=%22%23e7b2d2%22%20stroke-width=%220.5%22%20stroke-linejoin=%22round%22></path></svg>") center / contain no-repeat;
}

/* RETIRADO el 30/08/2026 (orden de Sergio: se usa lo que hizo Claude
   Design, no una suposicion). Aqui se recoloreaba la mariposa a
   #8C3F7A macizo en modo claro. Design NO la recolorea: en su manual
   la lista usa `referencias/mariposa-oficial.svg` tal cual en los dos
   modos, y el papel §1 lo dice: «La mariposa es la excepcion: siempre
   tal cual el SVG oficial, a cualquier tamano». La copia intacta del
   fichero esta en componentes.css.bak-20260830-antes-mariposa-de-design
:root[data-tema="claro"] .svh-lista-mariposa > li::before,
:root[data-tema="claro"] .svh-pagina__cuerpo ul > li::before,
:root[data-tema="claro"] .svh-legal__cuerpo ul > li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22309.2 84.0 273.2 204.7%22%3E%3Cpath d=%22M444.94 179.93C446.06 180 447.18 180.08 448.31 180.15C451.53 180.28 455.37 179.11 458.81 178.53C466.1 177.3 473.47 176.22 480.81 175.53C491.54 174.53 502.76 174.19 513.5 175.03C516.23 175.24 519.02 176 521.58 175.96C534.15 177.09 546.13 181.58 556.05 189.33C558.82 192.41 561.49 195.45 563.35 199.19C569.06 210.67 568.72 227.12 561.33 237.79C558.06 242.52 553.6 245 549.24 248.47C541.88 249.96 535.28 252.41 527.51 251.81C499.06 249.64 474.74 230.1 459.09 207.36C453.7 199.54 450.09 190.93 445.5 182.7C441.38 190.91 437.6 199.19 432.38 206.81C416.62 229.81 392.28 249.68 363.49 251.83C355.82 252.41 349.07 250.24 341.83 248.36C337.59 245.24 333.28 242.72 330.12 238.34C319.78 224.02 322.61 201.88 334.81 189.77C343.99 181.99 354.51 178.58 366.21 176.37C369.83 176.09 373.73 175.33 377.5 175.03C388.24 174.19 399.46 174.53 410.19 175.53C417.78 176.24 425.68 177.08 433.19 178.53C437.22 179.31 440.81 180.07 444.94 179.93Z%22 fill=%22%238C3F7A%22 fill-rule=%22evenodd%22/%3E%3Cpath d=%22M561.08 135C555.5 131.25 551.28 126.94 544.42 125.2C533.27 122.37 521.51 125.13 511.2 129.66C493.27 137.54 477.67 149.67 463.2 162.71C458.17 167.24 453.58 173.26 448.06 177.06C449.69 168.81 455.44 160.35 459.48 152.98C470.88 132.14 491.42 100.66 515.8 94.4C533.1 89.96 554.08 100.11 560.3 117.31C562.2 122.57 563.4 129.76 561.08 135ZM448.06 177.06C448.14 178.09 448.23 179.12 448.31 180.15C447.18 180.08 446.06 180 444.94 179.93C439.74 172.61 431.93 166.21 425.16 160.34C405.61 143.39 374.35 118.08 346.6 125.23C340.89 126.7 336.65 130.02 331.85 133.16C327.82 114.5 350.7 96.93 367.5 96.18C378.3 95.7 388.55 101.23 396.82 107.65C412.14 119.56 423.45 137.01 432.91 153.68C436.44 159.91 439.67 166.27 442.76 172.73C444.14 175.62 444.55 179.85 448.06 177.06ZM331.68 134C333.56 147.59 341.87 158.73 352.6 166.95C356.76 170.14 363.13 172.5 366.21 176.37C354.51 178.58 343.99 181.99 334.81 189.77C333.67 188.16 332.11 187.19 330.64 185.86C327.48 183 324.72 179.52 322.65 175.8C315.18 162.37 319.67 143.49 331.68 134ZM561.22 135.89C564.6 138.87 567.28 143.26 569.14 147.39C576.42 163.48 569.55 179.43 556.05 189.33C546.13 181.58 534.15 177.09 521.58 175.96C524.44 172.37 533.32 169.28 537.75 166.26C548.66 158.85 557.4 148.64 561.22 135.89ZM549.24 248.47C549.08 252.45 547.41 256.49 545.56 260.11C534.59 281.51 511.67 281.42 492.67 270.92C472.98 260.04 459.41 239.12 452.27 218.29C450.61 213.45 449.21 208.48 448.18 203.46C447.39 199.66 447.34 195.35 445.5 192C442.8 198.33 441.89 208.74 439.56 216.12C432.95 236.94 419.88 257.79 400.93 269.44C381.84 281.18 356.89 282.69 345.5 260.01C343.66 256.34 342.07 252.42 341.83 248.36C349.07 250.24 355.82 252.41 363.49 251.83C392.28 249.68 416.62 229.81 432.38 206.81C437.6 199.19 441.38 190.91 445.5 182.7C450.09 190.93 453.7 199.54 459.09 207.36C474.74 230.1 499.06 249.64 527.51 251.81C535.28 252.41 541.88 249.96 549.24 248.47Z%22 fill=%22%238C3F7A%22 fill-rule=%22evenodd%22/%3E%3Cpath d=%22M444.94 179.93C440.81 180.07 437.22 179.31 433.19 178.53C425.68 177.08 417.78 176.24 410.19 175.53C399.46 174.53 388.24 174.19 377.5 175.03C373.73 175.33 369.83 176.09 366.21 176.37C363.13 172.5 356.76 170.14 352.6 166.95C341.87 158.73 333.56 147.59 331.68 134C331.74 133.72 331.8 133.44 331.85 133.16C336.65 130.02 340.89 126.7 346.6 125.23C374.35 118.08 405.61 143.39 425.16 160.34C431.93 166.21 439.74 172.61 444.94 179.93ZM561.08 135C561.13 135.29 561.18 135.59 561.22 135.89C557.4 148.64 548.66 158.85 537.75 166.26C533.32 169.28 524.44 172.37 521.58 175.96C519.02 176 516.23 175.24 513.5 175.03C502.76 174.19 491.54 174.53 480.81 175.53C473.47 176.22 466.1 177.3 458.81 178.53C455.37 179.11 451.53 180.28 448.31 180.15C448.23 179.12 448.14 178.09 448.06 177.06C453.58 173.26 458.17 167.24 463.2 162.71C477.67 149.67 493.27 137.54 511.2 129.66C521.51 125.13 533.27 122.37 544.42 125.2C551.28 126.94 555.5 131.25 561.08 135Z%22 fill=%22%238C3F7A%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E");
}
*/

/* ═══════════════════════════════════════════════════════════════════
 * PORTADA V2 (30/08/2026) — hero, banda de redes, muro, contadores,
 * medallas y cierre. Del papel PAPEL-ESCRITO-FINAL.md, pantalla 1.
 *
 * TODO el movimiento de esta sección lleva `data-anim` en su elemento:
 * la última regla de la sección lo PARA entero con «menos movimiento»
 * (prefers-reduced-motion) — la regla de la casa que no se negocia.
 * ═══════════════════════════════════════════════════════════════════ */

@keyframes svh-banda    { to { transform: translateX(-50%); } }
@keyframes svh-muro     { to { transform: translateY(-50%); } }
@keyframes svh-progreso { from { inline-size: 0; } to { inline-size: 100%; } }
@keyframes svh-flota    { from { transform: translateY(4%); } to { transform: translateY(-8%); } }

/* ── 1 · El hero ─────────────────────────────────────────────────── */

.svh-hero {
	padding-block: var(--svh-espacio-16) var(--svh-espacio-8);
	text-align: center;
}

.svh-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--svh-espacio-2);
	padding: var(--svh-espacio-2) var(--svh-espacio-4);
	border-radius: var(--svh-radio-full);
	background: var(--svh-marca);
	color: var(--svh-marca-texto);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.svh-hero__titular {
	margin: var(--svh-espacio-6) auto 0;
	max-inline-size: 900px;
	font-size: clamp(42px, 8.5vw, 84px);
	/* peso/interlineado/espaciado: los del token de titular (base.css) */
}

.svh-hero__rosa { color: var(--svh-marca); }

.svh-hero__iconos { white-space: nowrap; }

.svh-hero__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 0.82em;
	block-size: 0.82em;
	margin-inline-start: 0.08em;
	border-radius: 0.22em;
	color: #FFFFFF;
	font-size: 0.42em;
	vertical-align: -0.08em;
	animation: svh-flota 2.6s ease-in-out infinite alternate;
}

.svh-hero__icono--youtube   { background: var(--svh-red-youtube); }
.svh-hero__icono--instagram { background: linear-gradient(135deg, var(--svh-red-instagram-1), var(--svh-red-instagram-2), var(--svh-red-instagram-3)); animation-delay: 0.4s; }
.svh-hero__icono--tiktok    { background: var(--svh-red-tiktok); border: 1px solid var(--svh-borde-suave); color: var(--svh-red-tiktok-cian); animation-delay: 0.8s; }

.svh-hero__linea {
	margin: var(--svh-espacio-6) auto 0;
	max-inline-size: 620px;
	color: var(--svh-texto-suave);
	line-height: var(--svh-alto-linea);
}

.svh-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--svh-espacio-3);
	margin-block-start: var(--svh-espacio-8);
}

.svh-boton--grande {
	min-block-size: var(--svh-alto-boton);
	padding-inline: var(--svh-espacio-6);
	font-size: 1rem;
}

.svh-hero__confianza {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--svh-espacio-3);
	margin-block-start: var(--svh-espacio-6);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--svh-texto-suave);
}

.svh-hero__estrellas { color: var(--svh-estrella); font-size: 0.9375rem; letter-spacing: 2px; }

/* ── 2 · La banda de las 10 redes ────────────────────────────────── */

.svh-banda {
	overflow: hidden;
	border-block: 1px solid var(--svh-borde-suave);
	padding-block: var(--svh-espacio-3);
}

.svh-banda__tira {
	display: flex;
	gap: 10px;
	inline-size: max-content;
	animation: svh-banda 30s linear infinite;
}

.svh-banda__grupo { display: flex; gap: 10px; padding-inline-end: 10px; }

.svh-banda__chip {
	padding: var(--svh-espacio-2) var(--svh-espacio-4);
	border-radius: var(--svh-radio-full);
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
}

.svh-banda__chip--youtube   { background: var(--svh-red-youtube); }
.svh-banda__chip--instagram { background: linear-gradient(90deg, var(--svh-red-instagram-1), var(--svh-red-instagram-2), var(--svh-red-instagram-3)); }
.svh-banda__chip--tiktok    { background: var(--svh-red-tiktok); }
.svh-banda__chip--facebook  { background: var(--svh-red-facebook); }
.svh-banda__chip--twitch    { background: var(--svh-red-twitch); }
.svh-banda__chip--pinterest { background: var(--svh-red-pinterest); }
.svh-banda__chip--threads   { background: var(--svh-red-threads); border: 1px solid rgba(255, 255, 255, 0.18); }
.svh-banda__chip--x         { background: var(--svh-red-x); border: 1px solid rgba(255, 255, 255, 0.18); }
.svh-banda__chip--linkedin  { background: var(--svh-red-linkedin); }
.svh-banda__chip--telegram  { background: var(--svh-red-telegram); color: var(--svh-red-telegram-tinta); }

.svh-banda__punto-cian { color: var(--svh-red-tiktok-cian); }
.svh-banda__punto-rosa { color: var(--svh-red-tiktok-rosa); }

/* ── 3 · El muro de vídeos reales ────────────────────────────────── */

.svh-muro__titulo { font-size: clamp(28px, 5vw, 44px); }

.svh-muro {
	position: relative;
	block-size: 520px;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--svh-espacio-4);
	align-items: start;
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}

.svh-muro__columna { overflow: hidden; block-size: 100%; }

.svh-muro__tira {
	display: flex;
	flex-direction: column;
	gap: var(--svh-espacio-4);
	animation: svh-muro 38s linear infinite;
}

.svh-muro__columna:nth-child(1) .svh-muro__tira { animation-duration: 34s; }
.svh-muro__columna:nth-child(2) .svh-muro__tira { animation-duration: 44s; }
.svh-muro__columna:nth-child(3) .svh-muro__tira { animation-duration: 38s; }

.svh-muro__grupo { display: flex; flex-direction: column; gap: var(--svh-espacio-4); }

.svh-muro__tarjeta {
	display: block;
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.svh-muro__portada { position: relative; display: block; }

.svh-muro__chip {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 2;
	padding: 3px 9px;
	border-radius: var(--svh-radio-full);
	color: #FFFFFF;
	font-size: 0.625rem;
	font-weight: 600;
	white-space: nowrap;
}

.svh-muro__progreso {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3px;
	z-index: 2;
	display: block;
}

.svh-muro__progreso > span {
	display: block;
	block-size: 3px;
	inline-size: 0;
	background: var(--svh-marca);
	animation: svh-progreso 7s linear infinite;
}

.svh-muro__texto { display: block; padding: 10px 12px; }

.svh-muro__nombre {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--svh-texto);
}

.svh-muro__datos {
	display: block;
	margin-block-start: 4px;
	font-size: 0.6875rem;
	color: var(--svh-texto-suave);
}

/* ── 4 · Los contadores ──────────────────────────────────────────── */

.svh-contadores { border-block-start: 1px solid var(--svh-borde-suave); }

.svh-contadores__fila {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--svh-espacio-6);
	text-align: center;
}

.svh-contadores__cifra {
	margin: 0;
	font-family: var(--svh-fuente-numero);
	font-size: clamp(38px, 6vw, 58px);
	font-weight: var(--svh-titular-peso);
	line-height: 0.95;
	letter-spacing: -0.04em;
	color: var(--svh-texto);
}

.svh-contadores__cifra--rosa { color: var(--svh-marca); }

.svh-contadores__nombre {
	margin: var(--svh-espacio-2) 0 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svh-texto-suave);
}

.svh-contadores__nota {
	margin: var(--svh-espacio-6) auto 0;
	max-inline-size: 560px;
	text-align: center;
	font-size: 0.8125rem;
	color: var(--svh-texto-suave);
}

/* ── 7 · Las 3 medallas ──────────────────────────────────────────── */

.svh-medallas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--svh-espacio-4);
}

.svh-medallas__caja {
	background: var(--svh-fondo-tarjeta);
	border: 1px solid var(--svh-borde-suave);
	border-radius: 18px;
	padding: var(--svh-espacio-6);
}

.svh-medallas__titulo {
	margin: 0 0 var(--svh-espacio-2);
	font-size: 1.625rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--svh-marca);
}

.svh-medallas__texto { margin: 0; font-size: 0.875rem; color: var(--svh-texto-suave); }

/* ── 9 · El cierre para marcas ───────────────────────────────────── */

.svh-cierre { text-align: center; border-block-start: 1px solid var(--svh-borde-suave); padding-block-start: var(--svh-espacio-16); }

.svh-cierre__titulo { font-size: clamp(34px, 6.5vw, 60px); }

.svh-cierre__texto {
	margin: var(--svh-espacio-6) auto 0;
	max-inline-size: 520px;
	color: var(--svh-texto-suave);
}

/* ── LA PARADA GENERAL DEL MOVIMIENTO ────────────────────────────
   Con «menos movimiento» del sistema, TODO lo animado de la V2 se
   queda quieto: banda, muro, barras, iconitos. Va al final de la
   sección para ganar cualquier empate de especificidad. Las
   mariposas y los contadores lo comprueban por su cuenta en JS.  */
@media (prefers-reduced-motion: reduce) {
	[data-anim] { animation: none; }
}

/* ── V2 · EL MARCO POR RED de la ficha de vídeo ──────────────────
   Un filo del color oficial de la red alrededor del reproductor:
   se sabe de qué red es el vídeo sin leer nada. La clase la pone
   single-contenido-svh.php (svh-video-detalle--{red}). */
.svh-video-detalle__reproductor { border-radius: var(--svh-radio-lg); overflow: hidden; }

.svh-video-detalle--youtube   .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-youtube); }
.svh-video-detalle--instagram .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-instagram-2); }
.svh-video-detalle--tiktok    .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-tiktok-cian); }
.svh-video-detalle--facebook  .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-facebook); }
.svh-video-detalle--twitch    .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-twitch); }
.svh-video-detalle--pinterest .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-pinterest); }
.svh-video-detalle--threads   .svh-video-detalle__reproductor { border: 3px solid var(--svh-borde); }
.svh-video-detalle--x         .svh-video-detalle__reproductor { border: 3px solid var(--svh-borde); }
.svh-video-detalle--linkedin  .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-linkedin); }
.svh-video-detalle--telegram  .svh-video-detalle__reproductor { border: 3px solid var(--svh-red-telegram); }

/* ── V2 · el realce de las tarjetas al pasar (readme de Design):
   sube 3 px y el borde se enciende en rosa. Quieta con «menos
   movimiento» (la transición es transform: no viaja sola). */
.svh-tarjeta-video,
.svh-tarjeta-creador {
	transition: transform var(--svh-transicion), border-color var(--svh-transicion);
}

.svh-tarjeta-video:hover,
.svh-tarjeta-creador:hover {
	transform: translateY(-3px);
	border-color: var(--svh-marca);
}

@media (prefers-reduced-motion: reduce) {
	.svh-tarjeta-video:hover,
	.svh-tarjeta-creador:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * EL TITULAR DE PANTALLA INTERIOR · `svh-titular-v2` (PIEL V2, 30/08/2026)
 *
 * Las maquetas de Claude Design escriben el titular de cada pantalla en
 * DOS líneas, y la segunda va en el rosa de marca. Hasta hoy solo lo
 * hacía la portada (`svh-hero__titular`); las pantallas de dentro
 * llevaban un titular corto y plano («Vídeos», «Catálogo»…).
 *
 * Medidas copiadas literalmente del `style=` de las maquetas:
 * peso 600 · cuerpo clamp(34px, 7vw, 58px) · interlineado 0,95 ·
 * espaciado −0,05 em. Es el mismo ajuste del papel §2.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-titular-v2 {
	margin-block: 0 var(--svh-espacio-2);
	font-weight: 600;
	font-size: clamp(2.125rem, 7vw, 3.625rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	text-wrap: balance;
}

.svh-titular-v2__rosa { color: var(--svh-marca); }

/* ═══════════════════════════════════════════════════════════════════
 * EL HUECO DE «FALTA LA FOTO» · `svh-sin-foto` (31/08/2026)
 *
 * Sustituye al monograma de iniciales, que el papel de Claude Design
 * prohíbe («nada de círculos con iniciales»). No es un adorno: dice la
 * verdad —ahí falta una cara— con la mariposa de la casa en discreto,
 * para que no parezca que el sitio está roto.
 * ═══════════════════════════════════════════════════════════════════ */

.svh-sin-foto {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--svh-espacio-2);
	background: var(--svh-fondo-hundido);
	border: 1px dashed var(--svh-borde);
	border-radius: var(--svh-radio-md);
}

.svh-sin-foto img { opacity: 0.55; }

.svh-sin-foto__texto {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--svh-texto-tenue);
}

/* En la tarjeta del directorio la caja es pequeña y el texto no cabe:
   ahí la mariposa sola ya dice que falta la foto. En la ficha grande sí
   se escribe. (Se hace por selector y no con `@container` porque el
   contenedor no declara `container-type`: una consulta de contenedor sin
   contenedor declarado no se aplica nunca — sería CSS muerto.) */
.svh-tarjeta-creador__foto.svh-sin-foto .svh-sin-foto__texto,
.svh-autor__foto.svh-sin-foto .svh-sin-foto__texto { display: none; }