/*
 * no.es — tres modos visuales para una misma negativa.
 *
 * Cada modo es una dirección artística completa (tipografía, color y composición), y se
 * sortea en el servidor. Todo lo que cambia entre modos vive bajo [data-modo=...]: lo común
 * está arriba y no se repite.
 */

@font-face {
	font-family: 'Anton';
	src: url("../fonts/anton-KSH4Qgp.woff2") format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Bodoni Moda';
	src: url("../fonts/bodoni-moda-700-fbGnRmW.woff2") format('woff2');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Bungee';
	src: url("../fonts/bungee--Afw5KP.woff2") format('woff2');
	font-weight: 400;
	font-display: swap;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

.escena {
	/* Relleno lateral del lienzo. Se declara aquí para que el cálculo del tamaño de letra use
	   el ancho REAL disponible: con un valor aproximado, en pantallas pequeñas —donde el
	   relleno pesa proporcionalmente más— el texto se salía. */
	--margen-lateral: clamp(0.75rem, 2vw, 2rem);

	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

.lienzo {
	flex: 1;
	display: flex;
}

.negativa {
	margin: 0;
	font-weight: inherit;

	/* Tres techos, gana el menor:
	   1. proporción del ancho de pantalla,
	   2. proporción del alto,
	   3. el que impide que la palabra más larga se salga (--largo lo calcula el servidor).
	   `--escala` encoge el cuerpo cuando la frase es larga, porque el alto ocupado crece con
	   el cuadrado del tamaño. Los coeficientes cambian por modo y por tamaño de pantalla. */
	font-size: min(
		calc(var(--coef-ancho) * 1vw * var(--escala, 1)),
		calc(var(--coef-alto) * 1vh * var(--escala, 1)),
		calc((100vw - 2 * var(--margen-lateral)) / (var(--largo, 12) * var(--factor-glifo)))
	);
}

.pie {
	display: flex;
	/* Solo las acciones, centradas: el dominio y las redes están en la barra superior. */
	justify-content: center;
	align-items: baseline;
	gap: 1.25rem;
	padding: 1.25rem clamp(0.75rem, 2vw, 2rem);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.acciones {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
}

/* Barra superior: dominio y redes. El mismo tratamiento que el pie —monoespaciado, apagado—
   porque son el marco, no el contenido. */
.superior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem var(--margen-lateral);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.superior .marca {
	color: inherit;
	text-decoration: none;
}

.redes {
	display: flex;
	gap: 0.9rem;
}

.redes a {
	display: inline-flex;
	color: inherit;
	/* Visibles de verdad, pero por debajo de la negativa: es lo segundo que debe verse, no
	   lo primero. */
	opacity: 0.75;
}

.redes a:hover,
.redes a:focus-visible {
	opacity: 1;
}

.idiomas {
	display: flex;
	gap: 0.75rem;
}

/* Interruptor de groseras. Dice literalmente NSFW porque un símbolo suelto no se entiende:
   apagado va desvaído, encendido va a plena tinta y con recuadro. La diferencia visual
   codifica el estado, no adorna. */
.filtro {
	padding: 0.3rem 0.6rem;
	border: 1px solid transparent;
	border-radius: 2px;
	line-height: 1;
	opacity: 0.4;
}

.filtro:hover {
	opacity: 0.75;
}

.filtro--activo,
.filtro--activo:hover {
	border-color: currentcolor;
	opacity: 1;
}

.compartir {
	padding: 0.3rem 0.6rem;
	border: 1px solid currentcolor;
	border-radius: 2px;
	/* El pie usa mayúsculas y espaciado; el botón hereda para no cantar como pieza ajena. */
	line-height: 1;
	background: transparent;
	color: inherit;
	font: inherit;
	/* Los `button` traen `text-transform: none` del navegador, que gana a la herencia del
	   pie: sin esto, «Compartir» salía en minúsculas entre tres botones en mayúsculas. */
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
}

.compartir[hidden] {
	display: none;
}

/* Confirmación de que se ha copiado: el botón se invierte un instante.
   NO se usa `currentcolor` para el fondo: se resuelve con el `color` ya cambiado de la propia
   regla, así que fondo y texto acabarían siendo el mismo tono y el texto, invisible. */
/* Doble clase a propósito: `.pie a { color: inherit }` tiene más especificidad que una clase
   suelta y pisaba el color, dejando el texto del mismo tono que el fondo. */
.compartir.compartir--hecho {
	background: var(--tinta);
	color: var(--papel);
}

.pie a {
	color: inherit;
	text-decoration: none;
}

.pie a[aria-current] {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Brutalista ──────────────────────────────────────────────────────────── */

[data-modo='brutalista'] {
	--papel: #f4f2ed;
	--tinta: #0a0a0a;
	background: #f4f2ed;
	color: #0a0a0a;
	font-family: 'Anton', system-ui, sans-serif;
}

[data-modo='brutalista'] .lienzo {
	/* Centrado vertical: con line-height < 1 el texto sobresale de su caja, y anclarlo
	   abajo hace que la última línea se coma la regla del pie. */
	align-items: center;
	padding: clamp(1.5rem, 5vh, 4rem) var(--margen-lateral);
}

[data-modo='brutalista'] {
	/* Ancho medio de carácter, MEDIDO en el navegador (Anton real: 0.409). Se deja un poco de
	   margen porque el corte de línea desperdicia sitio. */
	--factor-glifo: 0.44;
	--coef-movil: 1;
	--coef-ancho: 28;
	--coef-alto: 34;
}

[data-modo='brutalista'] .negativa {
	line-height: 0.92;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

[data-modo='brutalista'] .pie {
	border-top: 3px solid currentcolor;
}

/* ── Editorial ───────────────────────────────────────────────────────────── */

[data-modo='editorial'] {
	--papel: #fbf9f4;
	--tinta: #14110f;
	background: #fbf9f4;
	color: #14110f;
	font-family: 'Bodoni Moda', Georgia, serif;
	/* Bodoni negrita medida: 0.624. Estaba en 0.56, que se quedaba CORTO y podía desbordar. */
	--factor-glifo: 0.64;
	--coef-movil: 0.8;
	/* Medidos en pantalla, no estimados. Con 16/24 una frase larga se quedaba en un 47 % del
	   ancho y un 36 % del alto en 2560×1440: una columna estrecha flotando en un escritorio
	   vacío. Manda el tope por ancho en pantallas cuadradas y el de alto de 1440 en adelante,
	   así que hubo que subir los dos. 20 de ancho se comía el margen lateral —la caja llegaba
	   al 98 %—, de ahí 18. El límite duro sigue siendo el tope por palabra más larga, y el
	   barrido de desbordes sigue limpio en las nueve pantallas. */
	--coef-ancho: 18;
	--coef-alto: 34;
}

[data-modo='editorial'] .lienzo {
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 6vw, 6rem) var(--margen-lateral);
	text-align: center;
}

[data-modo='editorial'] .negativa {
	font-weight: 700;
	line-height: 1.06;
	/* La Bodoni es variable y su único eje es `opsz` (6–96). Con el ajuste automático, el
	   navegador iguala ese eje al cuerpo en puntos: un titular de 150px son 113pt, así que
	   lo clava en el tope y sirve la variante de rótulo, con astas de un píxel que a esta
	   escala desaparecen —la «N» se queda sin asta izquierda—. Fijándolo se usa la instancia
	   por defecto, 11, que es además la que compone las tarjetas: web y vista previa vuelven
	   a coincidir. */
	font-optical-sizing: none;
	/* La medida va en el titular, no en el contenedor: `ch` se resuelve con la tipografía
	   del propio elemento, y en el padre valdría 16px por carácter. */
	max-width: 15ch;
	margin-inline: auto;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

[data-modo='editorial'] .pie {
	color: #8a8175;
}

[data-modo='editorial'] .pie a[aria-current] {
	color: #14110f;
}

/* ── Excéntrico ──────────────────────────────────────────────────────────── */

[data-modo='excentrico'] {
	--papel: #ffd23f;
	--tinta: #1b1b1b;
	background: #ffd23f;
	color: #1b1b1b;
	font-family: 'Bungee', system-ui, sans-serif;
	/* Bungee medida: 0.679. Estaba en 0.82, un 17% pasada, y por eso el excéntrico salía
	   pequeño. */
	--factor-glifo: 0.72;
	--coef-movil: 0.70;

	/* Margen lateral propio, mayor que el de los demás modos: la inclinación de 3° ensancha
	   la caja en proporción a la ALTURA del bloque, así que un texto de ocho líneas necesita
	   más aire a los lados que uno de dos. Como el cálculo del cuerpo usa esta misma
	   variable, ajustarla aquí cuadra padding y tamaño a la vez. */
	--margen-lateral: clamp(1.5rem, 5vw, 4rem);
	--coef-ancho: 13;
	--coef-alto: 20;
}

[data-modo='excentrico'] .lienzo {
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 5vw, 4rem) var(--margen-lateral);
	text-align: center;
}

[data-modo='excentrico'] .negativa {
	max-width: 11ch;
	margin-inline: auto;
	line-height: 1.12;
	text-transform: uppercase;
	/* Sombra dura desplazada: cartelería, no efecto de profundidad. */
	text-shadow: 0.09em 0.09em 0 #ff5964;
	/* Ligera inclinación: la ironía no se cuadra con la retícula. */
	transform: rotate(-3deg);
}



@media (prefers-reduced-motion: reduce) {
	[data-modo='excentrico'] .negativa {
		transform: none;
	}
}

.otra {
	padding: 0.3rem 0.6rem;
	border: 1px solid currentcolor;
	border-radius: 2px;
	line-height: 1;
}

/* ── Folio ───────────────────────────────────────────────────────────────── */

/*
 * Un párrafo entero no es un titular. Aquí manda la lectura: medida corta, interlineado
 * cómodo y cuerpo estable. Es el mismo papel y la misma serif del modo editorial, para que
 * se reconozca como parte del sitio, pero compuesto para leerse y no para gritar.
 */

[data-modo='folio'] {
	--papel: #fbf9f4;
	--tinta: #14110f;
	background: #fbf9f4;
	color: #14110f;
	font-family: 'Bodoni Moda', Georgia, serif;
}

[data-modo='folio'] .lienzo {
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 2rem);
}

[data-modo='folio'] .negativa {
	/* Ni `--largo` ni `--escala`: aquí el cuerpo no depende de la frase, depende de que se
	   lea bien. Alrededor de 60 caracteres por línea es la medida cómoda de siempre. */
	font-size: clamp(1.05rem, 1.6vw, 1.45rem);
	font-weight: 400;
	line-height: 1.65;
	max-width: 34rem;
	margin-inline: auto;
	text-wrap: pretty;
	white-space: pre-line;
}

[data-modo='folio'] .negativa::first-letter {
	/* Capitular: señal de que esto se lee, no se ojea. */
	font-size: 3.2em;
	float: left;
	line-height: 0.8;
	padding: 0.1em 0.1em 0 0;
}

[data-modo='folio'] .pie {
	color: #8a8175;
}

/* ── Móvil ───────────────────────────────────────────────────────────────── */

/*
 * Una pantalla de teléfono es estrecha y alta: con los coeficientes de escritorio, una frase
 * corta ocupaba el 4% del alto y el 29% del ancho. En una web que consiste en una frase
 * gigante, eso la desactiva. Aquí manda el ancho, y el alto queda de tope de seguridad.
 */
@media (max-width: 40rem) {
	/*
	 * El brutalista en vertical va a por todas: dos o tres palabras por línea, apiladas y
	 * llenando el ancho. `--escala-movil` la calcula el servidor a partir de la longitud
	 * total, igualando el alto del bloque con el de la pantalla; el techo por palabra más
	 * larga sigue mandando para que nada se salga.
	 */
	/*
	 * En vertical, brutalista y excéntrico van a por todas: dos o tres palabras por línea,
	 * apiladas y llenando el ancho. `--escala-movil` la calcula el servidor a partir de la
	 * longitud total; `--coef-movil` la corrige según lo ancha que sea cada tipografía.
	 */
	[data-modo='brutalista'] .negativa,
	[data-modo='excentrico'] .negativa,
	[data-modo='editorial'] .negativa {
		font-size: min(
			calc(100vw * var(--escala-movil, 0.3) * var(--coef-movil, 1)),
			/* Tope por ALTO real de la ventana. Hace falta además del anterior porque el
			   cálculo por ancho supone que las líneas se llenan enteras, y el corte de
			   palabras desperdicia sitio: en una pantalla corta se salía por abajo. */
			calc(24vh * var(--escala, 1) * var(--coef-movil, 1)),
			/* El factor es el de CADA tipografía: aquí estaba fijado al de Anton, así que el
			   tope por palabra larga no se aplicaba al excéntrico y el texto se salía —y
			   `overflow-x: hidden` lo tapaba en vez de evitarlo. */
			calc((100vw - 2 * var(--margen-lateral)) / (var(--largo, 12) * var(--factor-glifo)))
		);
	}

	/* La medida corta es de escritorio: en vertical estorba, porque impide llenar el ancho. */
	[data-modo='excentrico'] .negativa,
	[data-modo='editorial'] .negativa {
		max-width: none;
	}

	.pie {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.6rem 0.9rem;
	}


}

/* ── Medidas por negativa ────────────────────────────────────────────────── */

/*
 * El tamaño de letra depende de tres números que calcula el servidor para cada negativa. En
 * vez de escribirlos en un atributo `style`, que obligaría a permitir estilos en línea en la
 * política de contenido, se declaran aquí como clases y la plantilla elige la que toca.
 *
 * Los valores se redondean HACIA ABAJO al escalón más cercano: así el tamaño elegido nunca es
 * mayor que el calculado, y el redondeo no puede provocar un desbordamiento.
 */

/* Longitud de la palabra más larga. */
.largo-1 { --largo: 1; }
.largo-2 { --largo: 2; }
.largo-3 { --largo: 3; }
.largo-4 { --largo: 4; }
.largo-5 { --largo: 5; }
.largo-6 { --largo: 6; }
.largo-7 { --largo: 7; }
.largo-8 { --largo: 8; }
.largo-9 { --largo: 9; }
.largo-10 { --largo: 10; }
.largo-11 { --largo: 11; }
.largo-12 { --largo: 12; }
.largo-13 { --largo: 13; }
.largo-14 { --largo: 14; }
.largo-15 { --largo: 15; }
.largo-16 { --largo: 16; }
.largo-17 { --largo: 17; }
.largo-18 { --largo: 18; }
.largo-19 { --largo: 19; }
.largo-20 { --largo: 20; }
.largo-21 { --largo: 21; }
.largo-22 { --largo: 22; }
.largo-23 { --largo: 23; }
.largo-24 { --largo: 24; }
.largo-25 { --largo: 25; }
.largo-26 { --largo: 26; }
.largo-27 { --largo: 27; }
.largo-28 { --largo: 28; }
.largo-29 { --largo: 29; }
.largo-30 { --largo: 30; }
.largo-31 { --largo: 31; }
.largo-32 { --largo: 32; }
.largo-33 { --largo: 33; }
.largo-34 { --largo: 34; }
.largo-35 { --largo: 35; }
.largo-36 { --largo: 36; }
.largo-37 { --largo: 37; }
.largo-38 { --largo: 38; }
.largo-39 { --largo: 39; }
.largo-40 { --largo: 40; }

/* Escala por longitud total de la frase. */
.escala-30 { --escala: 0.30; }
.escala-35 { --escala: 0.35; }
.escala-40 { --escala: 0.40; }
.escala-45 { --escala: 0.45; }
.escala-50 { --escala: 0.50; }
.escala-55 { --escala: 0.55; }
.escala-60 { --escala: 0.60; }
.escala-65 { --escala: 0.65; }
.escala-70 { --escala: 0.70; }
.escala-75 { --escala: 0.75; }
.escala-80 { --escala: 0.80; }
.escala-85 { --escala: 0.85; }
.escala-90 { --escala: 0.90; }
.escala-95 { --escala: 0.95; }
.escala-100 { --escala: 1.00; }
.escala-105 { --escala: 1.05; }
.escala-110 { --escala: 1.10; }
.escala-115 { --escala: 1.15; }
.escala-120 { --escala: 1.20; }
.escala-125 { --escala: 1.25; }
.escala-130 { --escala: 1.30; }
.escala-135 { --escala: 1.35; }
.escala-140 { --escala: 1.40; }
.escala-145 { --escala: 1.45; }
.escala-150 { --escala: 1.50; }
.escala-155 { --escala: 1.55; }
.escala-160 { --escala: 1.60; }
.escala-165 { --escala: 1.65; }
.escala-170 { --escala: 1.70; }
.escala-175 { --escala: 1.75; }
.escala-180 { --escala: 1.80; }
.escala-185 { --escala: 1.85; }
.escala-190 { --escala: 1.90; }
.escala-195 { --escala: 1.95; }
.escala-200 { --escala: 2.00; }

/* Escala del móvil en vertical. */
.escmovil-10 { --escala-movil: 0.10; }
.escmovil-15 { --escala-movil: 0.15; }
.escmovil-20 { --escala-movil: 0.20; }
.escmovil-25 { --escala-movil: 0.25; }
.escmovil-30 { --escala-movil: 0.30; }
.escmovil-35 { --escala-movil: 0.35; }
.escmovil-40 { --escala-movil: 0.40; }
.escmovil-45 { --escala-movil: 0.45; }
.escmovil-50 { --escala-movil: 0.50; }
.escmovil-55 { --escala-movil: 0.55; }