/*
 * 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;
}

/*
 * La misma serif en peso de lectura, solo para el folio.
 *
 * Un párrafo largo compuesto en la 700 se lee como un titular estirado: la negrita de rótulo
 * pesa demasiado cuando hay que recorrer cientos de caracteres. Y el folio es justo el modo
 * que declara que aquí manda la lectura.
 *
 * No la paga quien no la usa: el navegador solo descarga una fuente si algún elemento de la
 * página la aplica, y esto solo lo aplica `[data-modo='folio']` — menos del 5 % del catálogo.
 */
@font-face {
	font-family: 'Bodoni Moda';
	src: url("../fonts/bodoni-moda-400-5gmBwUJ.woff2") format('woff2');
	font-weight: 400;
	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)))
	);
}

/*
 * La aclaración bajo la frase, para lo que no se entiende sin ayuda: una frase en euskera, un
 * dicho de una zona.
 *
 * Monoespaciada y apagada, como el pie y la barra de arriba, y NO en la tipografía de la
 * composición: es el sitio hablando, no la frase. Con la letra del soporte se leería como una
 * segunda línea del texto, que es exactamente lo que no es.
 *
 * El tamaño no depende de `--escala`: la frase encoge cuando es larga, y una nota al pie que
 * encogiera con ella acabaría ilegible justo en las frases que más falta hace aclarar.
 */
/* La frase y su aclaración, como un bloque: el lienzo coloca a sus hijos en fila y sin esto la
   nota se iba al lado del texto. Ancho completo para no estrechar la frase, que es lo que manda. */
.bloque-frase {
	width: 100%;
}

.subtitulo {
	margin: 1.25em 0 0;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: clamp(0.7rem, 1.6vw, 0.85rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: none;
	opacity: 0.6;
}

.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;
	justify-content: center;
	gap: 0.75rem;
	/* Si no caben los cuatro, saltan de línea ENTEROS. Sin esto, «Copiar enlace» se partía en dos
	   renglones dentro de su propio recuadro en cuanto aparecía el botón de compartir — que solo
	   se revela en móviles con menú del sistema, así que en escritorio no se veía nunca.
	   Medido en un iPhone 12: el botón pasaba de 24 px de alto a 40. */
	flex-wrap: wrap;
	row-gap: 0.5rem;
	column-gap: clamp(0.5rem, 2vw, 0.75rem);
	/* El panel del menú se ancla a ESTA fila y no al `details`: al menú se entra por dos sitios
	   —el gancho y «Más»—, y colgándolo del primero el panel quedaba desplazado a la izquierda
	   del rótulo que acababas de pulsar. Anclado al pie, cae siempre en el mismo borde. */
	position: relative;
}

/* Ninguna etiqueta del pie se parte por dentro: son rótulos de dos palabras y partirlos se lee
   como un error de composición, no como una línea más. */
.acciones > * {
	white-space: nowrap;
}

/* 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;
}

/* El código de estado en las páginas de error, donde en el resto del sitio van las redes.
   Atenuado: es información para quien depura, no parte de lo que se ha venido a leer. */
.codigo-error {
	opacity: 0.45;
}

.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;
}

/*
 * El menú de lo secundario.
 *
 * `details` nativo: abre y cierra sin JavaScript y ya trae la semántica correcta. Se le quita
 * el triángulo porque el pie es una fila de rótulos y una flecha de widget rompe la retícula;
 * el estado abierto se ve por el recuadro, igual que el NSFW encendido.
 */
.menu__boton {
	padding: 0.3rem 0.6rem;
	border: 1px solid transparent;
	border-radius: 2px;
	line-height: 1;
	/* Apagado, porque es lo secundario, pero no tanto como el NSFW que vivía suelto en el pie:
	   medido sobre el gris de la persiana del modo cartel, por debajo de esto se pierde. */
	opacity: 0.7;
	white-space: nowrap;
	list-style: none;
	cursor: pointer;
}

/* Safari no atiende a `list-style` en el marcador del resumen. */
.menu__boton::-webkit-details-marker {
	display: none;
}

.menu__boton:hover {
	opacity: 0.85;
}

.menu[open] .menu__boton {
	border-color: currentcolor;
	opacity: 1;
}

/*
 * El kebab. Es lo único del pie que no es una palabra, así que lo que hay que cuidar es que no
 * parezca de otra fila: los tres puntos se alinean con el texto de al lado —`inline-flex` para
 * que la caja mida lo que mide el icono y no lo que mide una línea de texto— y el recuadro sigue
 * siendo el mismo, con la misma altura que «Otra» y que copiar.
 *
 * El padding lateral sube: un icono estrecho con el padding de un rótulo deja un blanco de pulsar
 * más pequeño que el dedo. Con esto la caja pasa de 30 px de ancho, que es el mínimo cómodo.
 */
.menu__boton--kebab {
	display: inline-flex;
	align-items: center;
	padding-inline: 0.7rem;
	/* Recuadro SIEMPRE, como «Otra» y como copiar. Cuando el disparador era una palabra podía
	   vivir sin caja —una palabra en mayúsculas ya se lee como un rótulo—, pero un icono suelto sin
	   recuadro, en una fila de dos botones que sí lo tienen, no parece el tercer control: parece
	   una marca de la página. La caja es lo que dice «esto se pulsa». */
	border-color: currentcolor;
	/* Menos apagado que un rótulo de texto. Tres puntos tienen mucha menos tinta que una palabra
	   de cuatro letras, así que con la misma opacidad se leen como más tenues de lo que son —y
	   sobre los soportes de color se perdían del todo. */
	opacity: 0.85;
}

/* El icono mide lo que mide una letra del pie, no un tamaño en píxeles: así el recuadro del kebab
   sale igual de alto que el de «Otra» tanto en escritorio como en el móvil estrecho, donde el pie
   encoge la tipografía. Con un tamaño fijo, en 320 px sobresalía tres píxeles. */
.menu__boton--kebab svg {
	display: block;
	width: 1.15em;
	height: 1.15em;
}

/* El resto del pie se alinea por la LÍNEA BASE del texto, y un icono no tiene línea base: medido,
   el kebab quedaba dos píxeles más arriba que los rótulos y con la caja más alta. Este es el único
   control de la fila que se centra, precisamente porque es el único que no es una palabra. */
.acciones > .menu {
	align-self: center;
}

/*
 * El reclamo: el segundo rótulo que abre el mismo menú, apagado por defecto.
 *
 * Es un `button` y vive FUERA del `details`, así que no hereda la tipografía del pie —los botones
 * traen la del navegador— ni el recuadro que marca el panel abierto. Lo segundo es a propósito:
 * el recuadro señala de dónde cuelga el panel, y el panel cuelga de «Más».
 *
 * Va a plena tinta y por delante de «Más», al revés que el resto de lo secundario: un reclamo que
 * no se ve no es un reclamo. Es la única pieza del pie que pide mirada en vez de esperarla.
 */
.menu__boton--gancho {
	background: transparent;
	color: inherit;
	font: inherit;
	/* Los `button` traen `text-transform: none` del navegador, que gana a la herencia del pie. */
	text-transform: inherit;
	letter-spacing: inherit;
	opacity: 1;
}

/* Se abre HACIA ARRIBA y flotando: el pie está pegado al borde inferior, y un panel que
   empujara la fila movería la frase, que es el contenido. */
.menu__panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.5rem);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 0.85rem;
	border: 1px solid currentcolor;
	background: var(--papel);
	/* El color se HEREDA del pie y no se fija en `--tinta`, que es lo que parecería correcto:
	   en el modo cartel el pie va en blanco sobre la persiana, así que un panel con la tinta del
	   soporte salía en gris oscuro sobre gris y no se leía. Heredando, los ocho modos pintan el
	   panel con la misma pareja de colores que ya usa el pie que lo abre. */
	color: inherit;
	text-align: right;
}

.menu__raya {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid currentcolor;
	opacity: 0.25;
}

/*
 * Dentro del menú NO hay botones: texto y nada más.
 *
 * El recuadro del pie existe para separar los controles del fondo en una fila donde conviven
 * con la frase. Un panel desplegado ya dice por sí mismo que todo lo que hay dentro se pulsa,
 * así que repetir la caja en cada línea convierte el menú en una botonera.
 *
 * El NSFW pierde el recuadro pero NO pierde el estado: apagado va tenue, encendido va a plena
 * tinta y subrayado, que es la misma señal que marca el idioma activo.
 */
.menu__panel .filtro {
	align-self: flex-end;
	padding: 0;
	border: 0;
	opacity: 0.6;
}

.menu__panel .filtro:hover {
	opacity: 0.85;
}

.menu__panel .filtro--activo,
.menu__panel .filtro--activo:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.menu__seccion {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

/* Sin esto la sección se ve SIEMPRE: `hidden` es `display: none` del navegador, y cualquier
   `display` declarado en una clase le gana. Es decir, copiar el enlace salía a la vez en el pie
   y en el menú. */
.menu__seccion[hidden] {
	display: none;
}

/* Los otros tipos. Es lo que promete el rótulo del menú, así que van primero y a plena tinta:
   dentro de un panel de ajustes apagados, esto es lo único que lleva a otra parte. */
.menu__tipos {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.55rem;
}

.menu__tipos a {
	opacity: 0.9;
}

.menu__tipos a:hover,
.menu__tipos a:focus-visible {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.menu__copiar {
	align-self: flex-end;
	opacity: 0.85;
}

.menu__copiar:hover {
	opacity: 1;
}

/* El acuse de recibo NO invierte el rótulo como en el pie: ahí el botón tenía caja que invertir
   y aquí es texto suelto. La señal es el rótulo cambiando a «Copiado», y el subrayado lo
   acompaña para que el cambio se note aunque no se esté leyendo la palabra. */
.menu__copiar.compartir--hecho {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * El aviso de idioma.
 *
 * `dialog` con `showModal()`: el fondo, el foco atrapado y el cierre con Escape son del
 * navegador. Escrito en el idioma que sugiere, no en el de la página.
 */
.aviso {
	max-width: min(24rem, 88vw);
	margin: auto;
	padding: 1.5rem;
	border: 1px solid currentcolor;
	background: var(--papel);
	/* Explícito porque el navegador le da a `dialog` su propio `color: CanvasText` —negro—, que
	   gana a la herencia y dejaba el aviso ilegible en los modos oscuros. */
	color: inherit;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
}

.aviso::backdrop {
	background: rgb(0 0 0 / 55%);
}

/* El `dialog` enfoca su primer botón al abrirse, y el anillo azul del navegador es lo único de
   toda la página que no es de este sitio. Se sustituye por uno del propio color, que además
   funciona en los modos oscuros — el azul sobre el fondo del modo mensaje era ilegible. */
.aviso :focus-visible,
.pie :focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

.aviso__texto {
	margin: 0 0 1.25rem;
	line-height: 1.5;
}

.aviso__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.72rem;
}

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

/* Quedarse es la opción tibia: se ofrece, pero no se subraya. */
.aviso__no {
	border-color: transparent;
	opacity: 0.6;
}

.aviso__no:hover {
	opacity: 1;
}

/* ── 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;
}

/* La medida se ensancha con la longitud, por el mismo motivo que en el cartel: quince
   caracteres por línea son ocho renglones para una frase de ciento diez, y en una pantalla de
   1080 el bloque se salía por abajo. Encoger la letra no lo arregla — los renglones no dependen
   del cuerpo, sino de cuántos caracteres entran en una línea.

   Hasta 0.45 —menos de 50 caracteres— no se toca: ahí la columna estrecha ES la cita de revista
   que se busca. */
[data-modo='editorial'].escala-45 .negativa { max-width: 18ch; }
[data-modo='editorial'].escala-40 .negativa { max-width: 20ch; }
[data-modo='editorial'].escala-35 .negativa { max-width: 23ch; }
[data-modo='editorial'].escala-30 .negativa { max-width: 26ch; }
[data-modo='editorial'].escala-25 .negativa { max-width: 30ch; }
[data-modo='editorial'].escala-20 .negativa { max-width: 34ch; }

[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);
}

/*
 * La caja se ensancha cuando la frase es larga, y esto NO es cosmética: es lo que impide que el
 * cartel se salga de la pantalla por abajo.
 *
 * Once caracteres por línea es la medida del cartel y funciona para un titular de tres palabras.
 * Con una parrafada —las hay de 126 caracteres desde que existen los insultos rioplatenses— son
 * TRECE renglones, y trece renglones no caben en un escritorio de 720 px de alto: el pie se
 * quedaba fuera. Encoger más la letra no lo arregla, porque el número de renglones no depende
 * del cuerpo sino de cuántos caracteres entran por línea.
 *
 * Va por escalones de `--escala` —que el servidor ya calcula a partir de la longitud— y no con
 * una fórmula sobre la variable, porque los escalones son justo lo que existe como clase. Y no
 * va en un `style` en línea porque la política de contenido del sitio prohíbe los estilos
 * incrustados: esa es la razón de que las medidas por frase sean clases y no atributos.
 *
 * Por encima de 0.45 —frases de menos de 50 caracteres— no se toca nada: ahí el cartel de once
 * caracteres es exactamente lo que se quiere.
 */
[data-modo='excentrico'].escala-45 .negativa { max-width: 14ch; }
[data-modo='excentrico'].escala-40 .negativa { max-width: 16ch; }
[data-modo='excentrico'].escala-35 .negativa { max-width: 19ch; }
[data-modo='excentrico'].escala-30 .negativa { max-width: 24ch; }
[data-modo='excentrico'].escala-25 .negativa { max-width: 28ch; }
[data-modo='excentrico'].escala-20 .negativa { max-width: 32ch; }

@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--capitular::first-letter {
	/* Capitular: señal de que esto se lee, no se ojea.
	   Solo cuando el texto arranca con una palabra normal — la plantilla lo decide. */
	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.
   Los dos primeros escalones son de las frases MUY largas —de 111 caracteres para arriba— y no
   existían: el suelo del servidor estaba en 0.30 porque hasta que llegaron los insultos
   rioplatenses nada que no fuera de folio pasaba de 81 caracteres. Sin ellos, una frase de ese
   tramo se quedaría sin `--escala` y saldría a tamaño completo, que es el peor desbordamiento
   posible. */
.escala-20 { --escala: 0.20; }
.escala-25 { --escala: 0.25; }
.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; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOS SOPORTES DE LAS EXCUSAS

   Una negativa se compone como una declaración: ocupa la pantalla y no lleva nada alrededor.
   Una excusa necesita lo contrario — quién la dice y por dónde—, porque su gracia está en que
   podría colar. Por eso cada modo de excusa es un soporte real: un justificante, un bocadillo,
   un mensaje enviado a las tantas, un cartel pegado con celo.

   Los cuatro reutilizan `.negativa` y su cálculo de tamaño, con coeficientes más pequeños:
   el texto ya no dispone de la pantalla entera sino de lo que quepa dentro del soporte.

   Coste en tipografías: CERO. Usan las que ya carga el sitio o las del sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

.soporte {
	width: 100%;
	/* El lienzo es flex y sus hijos no se centran solos cuando llevan ancho propio. */
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Parte ───────────────────────────────────────────────────────────────── */

[data-modo='parte'] {
	--papel: #e8e4d9;
	--tinta: #1a1a1a;
	--coef-ancho: 11;
	--coef-alto: 13;
	/* Ancho medio de carácter de la monoespaciada: es fija por definición, de ahí lo alto. */
	--factor-glifo: 0.62;
	background: var(--papel);
	color: var(--tinta);
	font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
}

[data-modo='parte'] .lienzo {
	align-items: center;
	padding: clamp(1rem, 4vh, 3rem) var(--margen-lateral);
}

.soporte--parte {
	flex-direction: column;
	align-items: stretch;
	background: #faf8f2;
	width: min(64rem, 100%);
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
	box-shadow: 0 2px 0 rgb(0 0 0 / 8%), 0 24px 50px -20px rgb(0 0 0 / 45%);
	position: relative;
}

/* Perforaciones de archivador: el detalle que dice «esto va a un cajón». */
.soporte--parte::before {
	content: '';
	position: absolute;
	left: 0.85rem;
	top: 0;
	bottom: 0;
	width: 10px;
	background-image: radial-gradient(circle, #d8d3c6 45%, transparent 46%);
	background-size: 10px 90px;
}

.parte__cabecera {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 2px solid var(--tinta);
	padding-bottom: 0.6rem;
	margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
	font-size: clamp(0.55rem, 1.1vw, 0.7rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.parte__titulo { font-weight: 700; }
.parte__ref { color: #8a8578; white-space: nowrap; }

.parte__campo {
	margin: 0 0 0.9rem;
	font-size: clamp(0.5rem, 1vw, 0.62rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8a8578;
}

[data-modo='parte'] .negativa {
	line-height: 1.25;
	border-bottom: 1px dashed #b9b3a4;
	padding-bottom: clamp(1rem, 3vh, 1.8rem);
	margin-bottom: clamp(1rem, 3vh, 2rem);
}

.parte__pie {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
}

.parte__firma {
	margin: 0;
	font-size: clamp(0.5rem, 1vw, 0.62rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #8a8578;
}

.parte__firma span {
	display: block;
	border-top: 1px solid var(--tinta);
	margin-top: clamp(1.25rem, 3vh, 2.6rem);
	padding-top: 0.4rem;
	width: clamp(7rem, 18vw, 12rem);
}

/* El sello es lo único rojo de la composición, y marca lo único que importa: no cuela. */
.parte__sello {
	border: 3px solid #c62d1f;
	color: #c62d1f;
	font-weight: 700;
	padding: 0.5rem 1.1rem;
	font-size: clamp(0.7rem, 1.4vw, 1rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transform: rotate(-11deg);
	opacity: 0.82;
	white-space: nowrap;
}

[data-modo='parte'] .pie { border-top: 1px solid #cdc7b8; }

/* ── Viñeta ──────────────────────────────────────────────────────────────── */

[data-modo='vineta'] {
	--papel: #ffd400;
	--tinta: #111;
	--coef-ancho: 14;
	--coef-alto: 17;
	--factor-glifo: 0.44;
	background: var(--papel);
	color: var(--tinta);
	font-family: 'Anton', system-ui, sans-serif;
}

[data-modo='vineta'] .lienzo {
	align-items: stretch;
	padding: clamp(1rem, 3vw, 2.5rem);
}

.soporte--vineta {
	border: clamp(4px, 0.5vw, 7px) solid var(--tinta);
	padding: clamp(1.5rem, 5vw, 5rem);
}

.vineta__globo {
	background: #fff;
	border: clamp(4px, 0.45vw, 6px) solid var(--tinta);
	border-radius: clamp(20px, 3vw, 42px);
	padding: clamp(1.25rem, 3vw, 3rem) clamp(1.5rem, 3.5vw, 3.4rem);
	position: relative;
	width: fit-content;
	max-width: 100%;
	box-shadow: clamp(6px, 0.9vw, 12px) clamp(6px, 0.9vw, 12px) 0 var(--tinta);
}

/* El rabo, en dos triángulos: uno negro que hace de borde y otro blanco encima. Con `border`
   el pico sale deformado, porque las esquinas de un borde no casan en diagonal. */
.vineta__globo::before,
.vineta__globo::after {
	content: '';
	position: absolute;
}

.vineta__globo::before {
	bottom: clamp(-70px, -7vw, -44px);
	left: clamp(2rem, 5vw, 4.4rem);
	width: clamp(56px, 6vw, 90px);
	height: clamp(44px, 5vw, 70px);
	background: var(--tinta);
	clip-path: polygon(0 0, 100% 0, 10% 100%);
}

.vineta__globo::after {
	bottom: clamp(-54px, -5.4vw, -34px);
	left: clamp(2.4rem, 5.4vw, 4.75rem);
	width: clamp(44px, 4.8vw, 72px);
	height: clamp(34px, 3.9vw, 54px);
	background: #fff;
	clip-path: polygon(0 0, 100% 0, 4% 100%);
}

[data-modo='vineta'] .negativa {
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

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

/* ── Mensaje ─────────────────────────────────────────────────────────────── */

[data-modo='mensaje'] {
	--papel: #0d1418;
	--tinta: #fff;
	--coef-ancho: 10;
	--coef-alto: 13;
	--factor-glifo: 0.5;
	background: var(--papel);
	color: var(--tinta);
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Trama del fondo de la app de mensajería: sugerida, no calcada. */
[data-modo='mensaje'] .escena::before,
[data-modo='mensaje'].escena::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.05;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 20% 30%, #fff 1.5px, transparent 2px),
		radial-gradient(circle at 70% 65%, #fff 1.5px, transparent 2px);
	background-size: 90px 90px;
}

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

.soporte--mensaje {
	flex-direction: column;
	align-items: stretch;
	width: min(56rem, 100%);
	position: relative;
}

.mensaje__burbuja {
	background: #075e54;
	border-radius: 22px 22px 6px 22px;
	padding: clamp(1.25rem, 3vw, 2.4rem) clamp(1.25rem, 3vw, 2.8rem) clamp(0.9rem, 2vw, 1.6rem);
	margin-left: auto;
	max-width: 100%;
	box-shadow: 0 12px 40px -12px rgb(0 0 0 / 60%);
}

[data-modo='mensaje'] .negativa { line-height: 1.22; }

.mensaje__meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin: clamp(0.6rem, 1.5vh, 1.2rem) 0 0;
	font-size: clamp(0.7rem, 1.1vw, 0.95rem);
	color: rgb(255 255 255 / 62%);
}

/* Azules: es lo que convierte «lo mandé» en «lo leíste y no contestaste». */
.mensaje__ticks {
	color: #53bdeb;
	font-size: 1.15em;
	letter-spacing: -0.35em;
	padding-right: 0.35em;
}

.mensaje__estado {
	margin: clamp(0.7rem, 1.5vh, 1.4rem) 0 0;
	color: rgb(255 255 255 / 35%);
	font-size: clamp(0.7rem, 1.1vw, 1rem);
	font-style: italic;
}

[data-modo='mensaje'] .pie { border-top: 1px solid rgb(255 255 255 / 12%); }

/* ── Cartel ──────────────────────────────────────────────────────────────── */

[data-modo='cartel'] {
	--papel: #7a7d74;
	--tinta: #111;
	--coef-ancho: 8;
	--coef-alto: 10;
	--factor-glifo: 0.5;
	background: var(--papel);
	color: #f2f2ee;
	/* La sans más neutra que hay: el cartel de la persiana se imprime en lo que trae el Word. */
	font-family: Arial, Helvetica, system-ui, sans-serif;
	/* Las lamas de la persiana. */
	background-image: linear-gradient(90deg, rgb(0 0 0 / 16%) 1px, transparent 1px);
	background-size: 46px 100%;
}

[data-modo='cartel'] .lienzo {
	align-items: center;
	padding: clamp(1.5rem, 4vh, 3rem) var(--margen-lateral);
}

.cartel__folio {
	background: #fdfdfa;
	color: var(--tinta);
	/* Un A4 se dimensiona por su ALTO. Y ese alto sale de la VENTANA menos el cromo, nunca de
	   `height: 100%`: el lienzo crece con su contenido, así que el folio pediría el alto del
	   lienzo y el lienzo se lo daría creciendo — medido, acababa en 1750 px dentro de una
	   ventana de 900. El `max-width` es lo que evita que en móvil se salga a lo ancho: con
	   `aspect-ratio`, recortar el ancho recalcula el alto solo.
	   Se deja aire alrededor a propósito: un folio que llena la pantalla deja de leerse como un
	   papel PEGADO a algo y pasa a ser el fondo. Tiene que verse la persiana detrás. */
	height: min(68vh, calc(100vh - 13rem));
	max-width: 78%;
	aspect-ratio: 1 / 1.414;
	padding: clamp(1.5rem, 4vh, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
	transform: rotate(-1.6deg);
	box-shadow: 0 30px 60px -25px rgb(0 0 0 / 70%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
}

.cartel__celo {
	position: absolute;
	width: clamp(70px, 9vw, 130px);
	height: clamp(22px, 2.4vw, 34px);
	background: rgb(226 226 214 / 72%);
	border-left: 1px solid rgb(255 255 255 / 50%);
	border-right: 1px solid rgb(255 255 255 / 50%);
	left: 50%;
}

.cartel__celo--sup { top: calc(clamp(22px, 2.4vw, 34px) / -2); transform: translateX(-50%) rotate(2deg); }
.cartel__celo--inf { bottom: calc(clamp(22px, 2.4vw, 34px) / -2); transform: translateX(-50%) rotate(-3deg); }

.cartel__aviso {
	margin: 0 0 clamp(1rem, 3vh, 2.6rem);
	font-size: clamp(0.55rem, 1.1vw, 0.8rem);
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #444;
	font-weight: 700;
}

[data-modo='cartel'] .negativa {
	line-height: 1.18;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.cartel__disculpe {
	margin: clamp(1.25rem, 3vh, 3rem) 0 0;
	font-size: clamp(0.7rem, 1.2vw, 1rem);
	color: #555;
	font-style: italic;
}

[data-modo='cartel'] .pie { border-top: 1px solid rgb(255 255 255 / 20%); }

/* ═══════════════════════════════════════════════════════════════════════════
   LOS SOPORTES DE LOS INSULTOS

   Una excusa necesita quién la dice y por dónde. Un insulto necesita **dónde está escrito**:
   ninguno de estos cuatro es una conversación, son sitios donde alguien dejó la frase para que
   la leyera otro. Ese desplazamiento es lo que le quita el mal trago al insulto directo.

   Coste en tipografías: CERO, igual que en las excusas. Las que ya carga el sitio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Libreta ─────────────────────────────────────────────────────────────── */

/*
 * El insulto escrito a mano en una hoja arrancada. Es el más cercano de los cuatro: una pared es
 * pública y un periódico es de todos, pero una nota la escribió alguien para alguien.
 *
 * La letra manuscrita sale de las que TRAE EL SISTEMA, con una cadena de respaldos. No se añade
 * un fichero de fuente por una razón: sería la primera del sitio que se descarga para un solo
 * soporte, y aquí la que hace el trabajo es la hoja —las rayas, el margen rojo, las anillas—.
 * Donde no haya ninguna manuscrita, la nota se lee igual: escrita a máquina en un papel de
 * libreta, que sigue siendo una nota.
 */

[data-modo='libreta'] {
	--papel: #cfc6b8;
	--tinta: #1a2f69;
	--coef-ancho: 9;
	--coef-alto: 12;
	--factor-glifo: 0.46;
	/* La mesa donde está la hoja, no la hoja. */
	background: radial-gradient(120% 90% at 50% 10%, #d8cfc0 0%, #bfb5a5 60%, #a89e8e 100%);
	color: var(--tinta);
	font-family: 'Bradley Hand', 'Segoe Script', 'Segoe Print', 'Comic Sans MS', cursive;
}

[data-modo='libreta'] .lienzo {
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vh, 3rem) var(--margen-lateral);
}

.soporte--libreta {
	flex-direction: column;
}

.libreta__hoja {
	position: relative;
	width: min(48rem, 100%);
	margin-inline: auto;
	background: #fdfcf6;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
	box-shadow: 0 2px 0 rgb(0 0 0 / 6%), 0 26px 46px -22px rgb(0 0 0 / 45%);
	/* Arrancada: el borde de arriba no está recto. */
	clip-path: polygon(0 6px, 6% 2px, 14% 7px, 23% 1px, 35% 6px, 47% 0, 58% 5px, 69% 1px, 80% 6px, 90% 2px, 100% 6px, 100% 100%, 0 100%);
}

/* El margen rojo del cuaderno: una línea vertical DENTRO de la hoja, no su borde. Como borde se
   confundía con la sombra y no se leía como margen. */
.libreta__anillas {
	position: absolute;
	left: clamp(2.2rem, 5.5vw, 3.8rem);
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgb(214 90 90 / 45%);
}

/* Y los agujeros de la espiral, pegados al canto. Redondos y pequeños: con la mancha alargada
   que había antes parecían manchas de humedad. */
.libreta__anillas::before {
	content: '';
	position: absolute;
	left: clamp(-1.6rem, -4vw, -1rem);
	top: clamp(2.5rem, 6vw, 4rem);
	bottom: clamp(2rem, 5vw, 3rem);
	width: 9px;
	background-image: radial-gradient(circle at 50% 50%, #d5cec1 0 4px, transparent 4.5px);
	background-size: 9px 58px;
}

/*
 * Las rayas van AQUÍ y no en la hoja, y ese es el detalle que hace que esto parezca papel: se
 * dibujan a partir del interlineado del propio texto, así que el renglón cae sobre la raya
 * cualquiera que sea el cuerpo de letra. En la hoja habría que acertar el alto a ojo y fallaría
 * en cuanto la frase cambiara de tamaño.
 */
[data-modo='libreta'] .negativa {
	line-height: 1.6;
	max-width: 22ch;
	/* La raya se pinta al FINAL de cada franja de interlineado, que es donde se apoya el
	   renglón. Sin desplazar: con cualquier offset aparece una raya suelta ENCIMA del texto,
	   porque el patrón también repite hacia arriba. */
	background-image: linear-gradient(transparent calc(100% - 2px), rgb(120 150 190 / 45%) calc(100% - 2px));
	background-size: 100% 1.6em;
	background-position: 0 0;
	background-repeat: repeat-y;
}

[data-modo='libreta'].escala-45 .negativa { max-width: 26ch; }
[data-modo='libreta'].escala-40 .negativa { max-width: 29ch; }
[data-modo='libreta'].escala-35 .negativa { max-width: 32ch; }
[data-modo='libreta'].escala-30 .negativa { max-width: 36ch; }
[data-modo='libreta'].escala-25 .negativa { max-width: 40ch; }
[data-modo='libreta'].escala-20 .negativa { max-width: 44ch; }

/* Firmada como se firma una nota: abajo a la derecha y más pequeña. */
.libreta__firma {
	display: block;
	margin-top: clamp(1.5rem, 4vh, 2.5rem);
	text-align: right;
	font-size: clamp(0.85rem, 1.7vw, 1.15rem);
	color: rgb(26 47 105 / 55%);
}

[data-modo='libreta'] .pie { border-top: 1px solid rgb(0 0 0 / 12%); }

/* ── Titular ─────────────────────────────────────────────────────────────── */

[data-modo='titular'] {
	--papel: #efece2;
	--tinta: #14110f;
	--coef-ancho: 10;
	--coef-alto: 13;
	--factor-glifo: 0.44;
	background: var(--papel);
	color: var(--tinta);
	font-family: 'Anton', Impact, sans-serif;
}

[data-modo='titular'] .lienzo {
	align-items: center;
	padding: clamp(1rem, 4vh, 3rem) var(--margen-lateral);
}

.soporte--titular {
	flex-direction: column;
	align-items: stretch;
}

.titular__portada {
	width: min(60rem, 100%);
	margin-inline: auto;
	background: #f7f5ee;
	padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
	box-shadow: 0 2px 0 rgb(0 0 0 / 8%), 0 24px 50px -22px rgb(0 0 0 / 40%);
}

.titular__cabecera {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px double var(--tinta);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: clamp(0.55rem, 1.1vw, 0.72rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.titular__marca { font-weight: 700; }
.titular__seccion { color: #a8291f; font-weight: 700; }

/* El antetítulo va en cursiva de lectura y NO en la tipografía del titular: en una portada de
   verdad son dos voces distintas, y aquí además evita que compita con la frase. */
.titular__antetitulo {
	margin: clamp(1rem, 3vh, 2rem) 0 0.4rem;
	font-family: 'Bodoni Moda', Georgia, serif;
	font-weight: 400;
	font-style: italic;
	font-size: clamp(0.8rem, 1.6vw, 1.15rem);
	color: #4a443e;
}

[data-modo='titular'] .negativa {
	margin: 0;
	line-height: 0.95;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	/* Sin `text-wrap: balance`: una portada parte las líneas por el ancho de la columna, no
	   repartiendo palabras a partes iguales. */
	text-align: left;
}

.titular__pie {
	margin-top: clamp(1rem, 3vh, 2rem);
	padding-top: 0.6rem;
	border-top: 1px solid rgb(0 0 0 / 25%);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: clamp(0.55rem, 1.1vw, 0.72rem);
	letter-spacing: 0.08em;
	color: #6b645c;
	text-transform: uppercase;
}

/* ── Chat ────────────────────────────────────────────────────────────────── */

/*
 * El insulto que TE LLEGA. Mismo mundo que el `mensaje` de las excusas y composición distinta a
 * propósito, porque cuentan cosas opuestas: allí la burbuja es tuya —verde, a la derecha, con el
 * doble tick— y aquí es la de enfrente, gris y a la izquierda. Copiar aquel habría sido repetir
 * un dibujo sin mirar lo que significa.
 */

[data-modo='chat'] {
	--papel: #0b141a;
	--tinta: #e9edef;
	--coef-ancho: 9;
	--coef-alto: 12;
	--factor-glifo: 0.5;
	color: var(--tinta);
	font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* La trama del fondo de la aplicación de mensajería. Es lo que hace que se reconozca de un
	   vistazo, más que la burbuja: un fondo liso con una caja gris puede ser cualquier cosa.
	   Va en SVG incrustado y no como fichero — son garabatos de trazo fino, pesa menos que la
	   petición que costaría pedirlo, y la política de contenido admite `data:` en imágenes. */
	background-color: var(--papel);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='30' cy='34' r='11'/%3E%3Cpath d='M74 22c6-7 16-3 16 5 0 9-16 17-16 17s-16-8-16-17c0-8 10-12 16-5z'/%3E%3Crect x='128' y='16' width='22' height='34' rx='5'/%3E%3Cpath d='M186 40c8-14 22-14 30 0'/%3E%3Cpath d='M20 92h30M20 102h20'/%3E%3Cpath d='M92 84l26 12-26 12 6-12z'/%3E%3Ccircle cx='170' cy='96' r='14'/%3E%3Cpath d='M214 86v22M204 96h20'/%3E%3Cpath d='M34 150c10-12 24-12 34 0'/%3E%3Crect x='104' y='140' width='30' height='22' rx='4'/%3E%3Cpath d='M170 140l10 20 10-20'/%3E%3Ccircle cx='222' cy='152' r='9'/%3E%3Cpath d='M24 206c6 8 18 8 24 0'/%3E%3Cpath d='M86 196h34l-8 20H94z'/%3E%3Ccircle cx='162' cy='208' r='12'/%3E%3Cpath d='M204 200l16 16M220 200l-16 16'/%3E%3C/g%3E%3C/svg%3E");
	background-size: clamp(200px, 26vw, 320px);
}

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

.soporte--chat {
	flex-direction: column;
	align-items: stretch;
	width: min(54rem, 100%);
}

/*
 * El separador de día, en su pastilla. Sustituye a la cabecera con nombre que había antes: aquel
 * «Tu mejor amigo» decidía por quien lo lee qué relación tenéis, y eso viaja en la imagen que se
 * comparte. Con el fondo de la aplicación puesto, el sitio ya se reconoce sin que nadie lo diga.
 */
.chat__dia {
	align-self: center;
	margin: 0 0 clamp(1rem, 2.5vh, 1.8rem);
	padding: 0.35em 0.9em;
	border-radius: 999px;
	background: rgb(32 44 51 / 92%);
	font-size: clamp(0.65rem, 1.1vw, 0.8rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(233 237 239 / 65%);
}

/* Gris y esquina rota a la IZQUIERDA: la burbuja de quien te escribe. Verde y a la derecha es
   la de las EXCUSAS, y ahí sí es lo correcto porque la excusa la mandas tú. */
.chat__burbuja {
	background: #202c33;
	border-radius: 22px 22px 22px 6px;
	padding: clamp(1.1rem, 3vw, 2.2rem) clamp(1.25rem, 3vw, 2.6rem) clamp(0.8rem, 2vw, 1.4rem);
	margin-right: auto;
	max-width: 100%;
	box-shadow: 0 12px 40px -14px rgb(0 0 0 / 70%);
}

[data-modo='chat'] .negativa {
	line-height: 1.22;
	text-align: left;
}

/* Sin ticks, y es lo que más se nota si algún día alguien los añade: los ticks son de lo que
   mandas tú. En un mensaje recibido no existen. */
.chat__hora {
	margin: clamp(0.5rem, 1.2vh, 1rem) 0 0;
	font-size: clamp(0.7rem, 1.1vw, 0.9rem);
	color: rgb(233 237 239 / 55%);
	text-align: right;
}

/*
 * Los ticks azules en un mensaje RECIBIDO no existen en la aplicación de verdad: los ticks son
 * de lo que mandas tú. Se ponen igual, y a sabiendas, porque son la señal que todo el mundo
 * reconoce como «esto ha llegado» — que es lo que tiene que entenderse de un vistazo.
 *
 * La alternativa fiel sería la burbuja verde a la derecha, pero esa ES la de las excusas, y
 * entonces los dos soportes serían el mismo dibujo contando cosas distintas.
 */
.chat__ticks {
	color: #53bdeb;
	font-size: 1.15em;
	letter-spacing: -0.35em;
	padding-right: 0.35em;
}

[data-modo='chat'] .pie { border-top: 1px solid rgb(255 255 255 / 10%); }

/* ── Pizarra ─────────────────────────────────────────────────────────────── */

/*
 * La pizarra de bar, en el formato en el que existe: vertical, marco de color y la marca arriba.
 * La que regala la cervecera y está apoyada en la puerta de medio país.
 *
 * Han hecho falta tres intentos y los dos primeros fallaron por parecerse a otra cosa: con la
 * serif del sitio era la carta de un restaurante caro; con manuscrita era la hoja de libreta,
 * que ya es otro de los cuatro soportes. La letra de cartel —la única del sitio que no usaba
 * ningún soporte de insulto— es lo que la deja siendo ella misma.
 */

[data-modo='pizarra'] {
	--papel: #1d221f;
	--tinta: #f4f1e6;
	--coef-ancho: 13;
	--coef-alto: 13;
	--factor-glifo: 0.72;
	background: radial-gradient(120% 90% at 50% 0%, #241f1c 0%, #17130f 70%);
	color: var(--tinta);
	font-family: 'Bungee', system-ui, sans-serif;
}

[data-modo='pizarra'] .lienzo {
	align-items: center;
	justify-content: center;
	padding: clamp(0.75rem, 3vh, 2rem) var(--margen-lateral);
}

.soporte--pizarra {
	flex-direction: column;
}

/*
 * VERTICAL, y esa es la forma del objeto: más alta que ancha, como la que se apoya en la acera.
 * El alto manda sobre el ancho —`height` primero y el ancho por proporción— porque en una
 * pantalla apaisada lo que escasea es el alto, y una pizarra que no cabe entera no es una
 * pizarra.
 */
.pizarra__cartel {
	/* 70 y no más: por encima, en un móvil corto —320×568— el cartel más la barra de arriba y el
	   pie dejaban de caber y la página empezaba a hacer scroll. Medido, no estimado. */
	height: min(70vh, 44rem);
	aspect-ratio: 3 / 4;
	max-width: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	/* El rojo del marco: el de las pizarras de cervecera, sin ser el de ninguna. */
	background: #b3261e;
	border-radius: 6px;
	padding: clamp(0.5rem, 1.4vw, 1rem);
	box-shadow: 0 28px 50px -26px rgb(0 0 0 / 80%);
	/* La caja se declara contenedor para poder medir el texto CONTRA ELLA. El cálculo general
	   del sitio usa el ancho de pantalla, que aquí sobra: el texto no vive en la pantalla, vive
	   dentro de un cartel estrecho, y sin esto se salía del marco o quedaba diminuto. */
	container-type: size;
}

/* La marca, arriba y sobre el rojo: en el original ese hueco es de quien paga la pizarra. */
.pizarra__marca {
	flex: none;
	padding: clamp(0.4rem, 1.2vh, 0.8rem) 0 clamp(0.5rem, 1.4vh, 0.9rem);
	text-align: center;
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: clamp(0.7rem, 1.6vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 92%);
}

.pizarra__superficie {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 3vw, 2rem) clamp(0.75rem, 2.5vw, 1.75rem);
	border-radius: 3px;
	text-align: center;
	/* Tiza mal borrada: dos barridos suaves. Una pizarra de verdad nunca está limpia. */
	background:
		radial-gradient(70% 40% at 30% 25%, rgb(255 255 255 / 6%) 0%, transparent 70%),
		radial-gradient(60% 35% at 70% 72%, rgb(255 255 255 / 4%) 0%, transparent 70%),
		#232823;
	box-shadow: inset 0 0 50px rgb(0 0 0 / 60%);
}

[data-modo='pizarra'] .negativa {
	/* El menor de los dos: lo que dice el sistema y lo que cabe en el cartel. */
	font-size: min(calc(var(--coef-ancho) * 1vw * var(--escala, 1)), calc(11cqw * var(--escala, 1) * 2.2));
	max-width: 13ch;
	margin-inline: auto;
	line-height: 1.18;
	text-transform: uppercase;
	color: #f6f3e8;
	/* El polvo de la tiza sobre el trazo grueso: el halo es lo que dice que no está impreso. */
	text-shadow: 0 0 0.04em rgb(246 243 232 / 70%), 0 0 0.14em rgb(246 243 232 / 30%);
	/* Escrita con prisa: ni recta del todo. */
	transform: rotate(-0.8deg);
}

[data-modo='pizarra'].escala-45 .negativa { max-width: 15ch; }
[data-modo='pizarra'].escala-40 .negativa { max-width: 17ch; }
[data-modo='pizarra'].escala-35 .negativa { max-width: 19ch; }
[data-modo='pizarra'].escala-30 .negativa { max-width: 22ch; }
[data-modo='pizarra'].escala-25 .negativa { max-width: 25ch; }
[data-modo='pizarra'].escala-20 .negativa { max-width: 28ch; }

.pizarra__hoy {
	margin: 0 0 clamp(0.9rem, 2.5vh, 1.75rem);
	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	font-size: clamp(0.6rem, 1.3vw, 0.85rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgb(246 243 232 / 55%);
}

[data-modo='pizarra'] .pie { border-top: 1px solid rgb(255 255 255 / 10%); }

/* ── El pie en móvil ─────────────────────────────────────────────────────── */

/* Móviles (de los 320 del iPhone SE a los 430 del Pro Max). Aquí es donde se decide si el pie
   cabe en una fila.

   El corte estaba en 360 y subió a 430 al probar un cuarto control: medido, un pie de 390 px con
   «Copiar link» —el rótulo largo, el que se ve donde el navegador no trae menú del sistema— se
   partía en dos renglones, y un pie de dos filas debajo de una frase a pantalla completa se lee
   como un error de composición. Se queda en 430 aunque hoy sean tres, porque el cuarto vuelve en
   cuanto se encienda el reclamo del menú. */
@media (max-width: 430px) {
	.pie {
		font-size: 0.62rem;
		padding-inline: 0.35rem;
		letter-spacing: 0.06em;
	}

	.acciones {
		column-gap: 0.4rem;
	}

	.compartir,
	.menu__boton,
	.otra {
		padding-inline: 0.35rem;
	}

	/* El kebab NO se aprieta con los demás: un rótulo estrecho sigue teniendo la anchura de su
	   palabra, y un icono de una letra de ancho con el padding de aquí se queda en un blanco de
	   pulsar más pequeño que el dedo. Lo que se gana quitando la palabra «Más» se devuelve aquí. */
	.menu__boton--kebab {
		padding-inline: 0.7rem;
	}
}

@media (orientation: portrait) and (max-width: 600px) {
	/* En vertical hay ancho de sobra para el soporte y poco para el texto: sin subir estos
	   coeficientes, la frase —que es el contenido— queda de cuerpo 14 dentro de un cartel que
	   ocupa media pantalla. Los topes de alto y de palabra más larga siguen mandando. */
	[data-modo='parte'] { --coef-ancho: 11; }
	[data-modo='vineta'] { --coef-ancho: 15; }
	[data-modo='mensaje'] { --coef-ancho: 11; }
	/* El folio en vertical deja poco ancho y muchísimo alto: medido, el texto llenaba el 96 % del
	   ancho y solo el 10 % del alto. Se le da más ancho útil —folio más ancho y menos margen
	   interior— y con él sube el cuerpo de letra. Subirlo sin lo otro solo lo habría desbordado. */
	[data-modo='cartel'] { --coef-ancho: 15; }

	.cartel__folio {
		max-width: 92%;
		padding: clamp(1.25rem, 3vh, 2rem) 1rem;
	}

	.soporte--parte { padding: 1.5rem 1.25rem; }
	.soporte--parte::before { display: none; }
}