/*
 * A RÚA · Bloques editoriales
 * Un único archivo para el editor y para la web: lo que se ve al escribir es
 * lo que se publica. Los colores y las tipografías vienen del tema (variables
 * de :root) y llevan valor de reserva para que el bloque funcione sin él.
 */

.arua-ap,
.arua-collage,
.arua-datos,
.arua-cap,
.arua-fc,
.arua-ficha-bl,
.arua-placa,
.arua-sello,
.arua-ficha-archivo,
.arua-bl-vacio {
	--ar-tinta: var(--tinta, #14130F);
	--ar-papel: var(--papel, #F6F1E7);
	--ar-hueso: var(--hueso, #EAE3D4);
	--ar-arena: var(--arena, #D8CEBB);
	--ar-piedra: var(--piedra, #635D52);
	--ar-granito: var(--granito, #3A3731);
	--ar-seccion: var(--arua-seccion, var(--gente, #F4B0C3));
	--ar-display: var(--f-display, Fraunces, Georgia, serif);
	--ar-read: var(--f-read, "Source Serif 4", Georgia, serif);
	--ar-ui: var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	--ar-m: clamp(18px, 4.4vw, 60px);
	box-sizing: border-box;
}

.arua-ap *,
.arua-collage *,
.arua-datos *,
.arua-cap *,
.arua-fc *,
.arua-ficha-bl * { box-sizing: border-box; }

/* Recursos compartidos ---------------------------------------------------- */

.arua-placa {
	display: inline-block;
	font: 800 clamp(10px, 1.1vw, 13px)/1.15 var(--ar-ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ar-tinta);
	background: var(--ar-hueso);
	padding: 13px 22px 12px;
	border: 2px solid var(--ar-tinta);
	box-shadow: inset 0 0 0 3px var(--ar-hueso), inset 0 0 0 4.5px var(--ar-tinta);
	position: relative;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.arua-placa::before,
.arua-placa::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ar-tinta);
	margin-top: -2.5px;
}

.arua-placa::before { left: 8px; }
.arua-placa::after { right: 8px; }

/* En pantalla estrecha la placa parte el texto en dos líneas en lugar de
   recortarlo: una placa con puntos suspensivos se come palabras del rótulo.
   Los puntos de las esquinas se separan un poco para dejarle sitio. */
@media (max-width: 760px) {
	.arua-placa {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		letter-spacing: .14em;
		padding: 11px 22px 10px;
		text-wrap: balance;
	}
	.arua-placa::before,
	.arua-placa::after { top: 11px; margin-top: 0; }
}

.arua-placa--s { font-size: 10px; padding: 9px 18px 8px; letter-spacing: .18em; }
.arua-placa--g { font-size: clamp(13px, 1.6vw, 20px); padding: 18px 34px 16px; }

.arua-placa--n {
	background: var(--ar-tinta);
	color: var(--ar-papel);
	border-color: var(--ar-papel);
	box-shadow: inset 0 0 0 3px var(--ar-tinta), inset 0 0 0 4.5px var(--ar-papel);
}

.arua-placa--n::before,
.arua-placa--n::after { background: var(--ar-papel); }

.arua-ficha-archivo {
	margin: 0;
	color: var(--ar-tinta);
	min-width: 230px;
	background: var(--ar-hueso);
	border: 1.5px solid var(--ar-tinta);
	padding: 10px 14px 12px;
	font-family: var(--ar-ui);
	box-shadow: 3px 3px 0 var(--ar-tinta);
	align-self: start;
}

.arua-ficha-archivo > div {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 8px;
	align-items: baseline;
	border-bottom: 1px dotted var(--ar-piedra);
	padding: 6px 0 5px;
}

.arua-ficha-archivo__cab {
	border-bottom: 2px solid var(--ar-tinta) !important;
	padding-bottom: 8px;
	margin-bottom: 2px;
}

.arua-ficha-archivo dt {
	font: 700 9px/1 var(--ar-ui);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ar-piedra);
}

.arua-ficha-archivo dd { margin: 0; font: 600 13px/1.25 var(--ar-ui); color: var(--ar-tinta); }
.arua-ficha-archivo__marca {
	display: block;
	width: 52px;
	height: auto;
	color: var(--ar-tinta);
}

.arua-ficha-archivo__cab dt,
.arua-ficha-archivo__cab dd {
	font: 800 10px/1 var(--ar-ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ar-tinta);
}

/* Apertura editorial ------------------------------------------------------ */

.arua-ap { position: relative; margin: 0 0 clamp(28px, 5vw, 60px); }
.arua-ap--oscuro { background: var(--ar-tinta); color: var(--ar-papel); }

.arua-ap__media { position: relative; margin: 0; overflow: hidden; }
.arua-ap__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arua-ap__media--full img { height: clamp(260px, 46vw, 660px); }
.arua-ap__media--bn img { filter: grayscale(1) contrast(1.04); }

.arua-ap__media .arua-placa {
	position: absolute;
	left: var(--ar-m);
	top: 22px;
	z-index: 2;
}

.arua-ap__par { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.arua-ap__par img { height: clamp(220px, 34vw, 500px); }
.arua-ap__par .arua-ap__media .arua-placa { left: 14px; right: auto; }

.arua-ap__eje {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	border-left: 3px dotted var(--ar-papel);
	z-index: 2;
}

.arua-ap__nota {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-3deg);
	z-index: 3;
	background: var(--ar-seccion);
	color: var(--ar-tinta);
	font: 800 clamp(9px, 1vw, 11px)/1.3 var(--ar-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 9px 12px 8px;
	text-align: center;
	max-width: 46%;
}

.arua-ap__horas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(8px, 1.4vw, 18px);
	padding: clamp(18px, 3vw, 34px) var(--ar-m) 0;
}

.arua-ap__hora { margin: 0; position: relative; }
.arua-ap__hora img { display: block; width: 100%; aspect-ratio: .82; object-fit: cover; }

.arua-ap__hora b {
	display: block;
	width: max-content;
	position: relative;
	z-index: 2;
	margin: 0 0 -12px -6px;
	background: var(--ar-seccion);
	color: var(--ar-tinta);
	font: 900 clamp(16px, 2vw, 26px)/1 var(--ar-display);
	padding: 5px 9px 7px;
}

.arua-ap__hora figcaption {
	font: 800 10px/1.3 var(--ar-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-top: 10px;
}

.arua-ap__titular {
	font: 900 clamp(52px, 11.5vw, 170px)/.86 var(--ar-display);
	letter-spacing: -.045em;
	margin: clamp(10px, 1.6vw, 22px) 0 0;
	padding: 0 var(--ar-m);
	color: var(--ar-seccion);
	text-wrap: balance;
}

.arua-ap:not(.arua-ap--oscuro) .arua-ap__titular { color: var(--ar-tinta); }

.arua-ap--archivo .arua-ap__titular {
	text-align: center;
	margin-top: clamp(-30px, -3.4vw, -12px);
	position: relative;
	z-index: 4;
}

.arua-ap__pie {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 2.4vw, 46px);
	align-items: start;
	justify-content: space-between;
	padding: clamp(22px, 3.4vw, 54px) var(--ar-m) clamp(26px, 3vw, 46px);
}

.arua-ap__bajada { flex: 0 1 auto; max-width: 100%; }
.arua-ap__texto { flex: 1 1 320px; min-width: 260px; }

.arua-ap__bajada {
	font: italic 600 clamp(28px, 4.6vw, 72px)/.98 var(--ar-display);
	letter-spacing: -.025em;
	margin: 0;
}

.arua-ap__entradilla {
	font: 400 clamp(16.5px, 1.4vw, 19px)/1.55 var(--ar-read);
	margin: 0;
	max-width: 36em;
}

.arua-ap--oscuro .arua-ap__entradilla { color: var(--ar-arena); }

.arua-ap__creditos {
	font: 700 11.5px/1.4 var(--ar-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	margin: 14px 0 0;
}

.arua-ap--oscuro .arua-ap__creditos { color: var(--ar-seccion); }

@media (max-width: 860px) {
	.arua-ap__texto { flex-basis: 100%; }
}

/* Collage documental ------------------------------------------------------ */

.arua-collage { margin: clamp(30px, 5vw, 70px) 0; }

.arua-collage__lienzo {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--ar-hueso);
	overflow: hidden;
}

.arua-collage--oscuro .arua-collage__lienzo { background: var(--ar-tinta); }

.arua-collage__hueco { position: absolute; overflow: hidden; }
.arua-collage__hueco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arua-collage__hueco.is-bn img { filter: grayscale(1) contrast(1.05); }
.arua-collage__hueco.is-tinta { background: var(--ar-seccion); }
.arua-collage__hueco.is-tinta img { filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; }

/* La foto de fondo cubre el lienzo entero: nunca se ve el fondo por detrás. */
.arua-collage__hueco--fondo  { inset: 0; }
.arua-collage__hueco--suelta { left: 46%; top: 26%; right: 3%; bottom: 5%; border: 10px solid var(--ar-papel); }
.arua-collage__hueco--copia  { left: 58%; top: 4%; right: 6%; height: 30%; border: 7px solid #fff; box-shadow: 0 12px 26px -16px rgba(20, 19, 15, .85); transform: rotate(2deg); }
.arua-collage__hueco--tira   { left: 4%; top: 58%; width: 26%; bottom: 7%; border: 7px solid var(--ar-papel); }

.arua-collage--tres .arua-collage__hueco--suelta,
.arua-collage--cuatro .arua-collage__hueco--suelta { top: 38%; }

.arua-collage__lienzo > .arua-placa { position: absolute; left: 3%; bottom: 6%; z-index: 5; }

.arua-collage__pie {
	display: flex;
	gap: 18px;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 12px;
}

.arua-collage__nota { font: italic 500 clamp(16px, 1.5vw, 20px)/1.25 var(--ar-display); }

.arua-collage__credito {
	font: 700 9.5px/1.4 var(--ar-ui);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ar-piedra);
}

@media (max-width: 600px) {
	.arua-collage__lienzo { aspect-ratio: 1 / 1.1; }
	.arua-collage__hueco--suelta { left: 36%; top: 44%; right: 4%; bottom: 4%; border-width: 6px; }
	.arua-collage--tres .arua-collage__hueco--suelta,
	.arua-collage--cuatro .arua-collage__hueco--suelta { top: 50%; }
	.arua-collage__hueco--copia { left: 48%; top: 3%; right: 4%; height: 26%; border-width: 5px; }
	.arua-collage__hueco--tira { left: 4%; top: 66%; width: 30%; bottom: 5%; border-width: 5px; }
	.arua-collage__lienzo > .arua-placa { bottom: auto; top: 4%; }
}

/* Datos y cifras ---------------------------------------------------------- */

.arua-datos { margin: clamp(30px, 5vw, 70px) 0; display: grid; gap: clamp(18px, 2.4vw, 34px); }
.arua-datos--fila { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: end; }
.arua-datos__dato { min-width: 0; }

.arua-datos__cifra {
	display: block;
	font: 900 clamp(44px, 7.2vw, 112px)/.82 var(--ar-display);
	letter-spacing: -.05em;
	/* Una cifra no se parte: «+3.000.000» va en una línea. */
	white-space: nowrap;
}

.arua-datos__dato.is-perfilada .arua-datos__cifra {
	color: transparent;
	-webkit-text-stroke: 2.5px var(--ar-tinta);
}

.arua-datos__texto {
	display: block;
	font: 800 clamp(10px, 1.1vw, 13px)/1.35 var(--ar-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-top: 14px;
	max-width: 26em;
}

.arua-datos__nota {
	font: 400 16px/1.5 var(--ar-read);
	color: var(--ar-granito);
	margin: 0;
	max-width: 34em;
}

/* Ayudas del editor ------------------------------------------------------- */

.arua-bl-vacio {
	border: 2px dashed var(--ar-arena);
	background: var(--ar-hueso);
	color: var(--ar-piedra);
	font: 700 11px/1.4 var(--ar-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 18px;
	min-height: 120px;
}

.arua-bl-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Capítulo ---------------------------------------------------------------- */

.arua-cap {
	position: relative;
	overflow: hidden;
	margin: clamp(34px, 5.5vw, 76px) 0 clamp(26px, 4vw, 56px);
	min-height: clamp(230px, 32vw, 460px);
	display: flex;
	align-items: flex-end;
	background: var(--ar-seccion);
	color: var(--ar-tinta);
}

/* Sin fotografía no hay que reservar la altura de la foto: el capítulo se
   ajusta a su texto en vez de dejar un hueco vacío arriba o abajo. */
.arua-cap:not(.arua-cap--con-foto) { min-height: clamp(190px, 25vw, 360px); }

.arua-cap--tinta { background: var(--ar-tinta); color: var(--ar-papel); }
.arua-cap--papel { background: var(--ar-hueso); }

.arua-cap__anio {
	position: absolute;
	left: clamp(10px, 2vw, 34px);
	top: clamp(-14px, -1vw, 0px);
	font: 900 clamp(130px, 23vw, 330px)/1 var(--ar-display);
	letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 2px currentColor;
	pointer-events: none;
}

.arua-cap__foto { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; }
.arua-cap__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arua-cap--con-foto .arua-cap__tx { max-width: 54%; }

.arua-cap__tx {
	position: relative;
	z-index: 2;
	padding: clamp(18px, 2.6vw, 38px) var(--ar-m);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.arua-cap__num {
	font: 900 clamp(44px, 7vw, 120px)/.8 var(--ar-display);
	letter-spacing: -.05em;
}

.arua-cap--tinta .arua-cap__num { color: var(--ar-seccion); }

/* Doble clase a propósito: el contenido del tema da a los h2 un margen
   superior de 2em y un cuerpo menor, y aquí mandan los del bloque. */
.arua-cap .arua-cap__titulo {
	font: 800 clamp(26px, 4vw, 58px)/.98 var(--ar-display);
	letter-spacing: -.03em;
	margin: 0;
	max-width: 14em;
}

@media (max-width: 600px) {
	.arua-cap { min-height: 320px; align-items: flex-start; }
	.arua-cap__foto { width: 100%; height: 44%; bottom: auto; }
	.arua-cap--con-foto .arua-cap__tx { max-width: none; margin-top: 44%; }
	.arua-cap__anio { top: auto; bottom: 8px; font-size: 150px; -webkit-text-stroke-width: 1.5px; }
}

/* Foto a sangre con cita -------------------------------------------------- */

/* La cita vive sobre la fotografía: comparten celda, así la frase queda
   siempre dentro de la foto por muchas líneas que ocupe. */
.arua-fc {
	position: relative;
	display: grid;
	grid-template-rows: auto auto;
	margin: clamp(30px, 5vw, 70px) 0 clamp(50px, 7vw, 110px);
}
.arua-fc__media { grid-area: 1 / 1; }
.arua-fc__pie { grid-row: 2; }
.arua-fc__media { position: relative; overflow: hidden; }
.arua-fc__media img { display: block; width: 100%; height: clamp(240px, 42vw, 620px); object-fit: cover; }
.arua-fc--grande .arua-fc__media img,
.arua-fc--alta .arua-fc__media img { height: clamp(300px, 56vw, 820px); }

.arua-fc__media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	background: linear-gradient(to top, rgba(10, 9, 7, .78), rgba(10, 9, 7, 0));
	pointer-events: none;
}

.arua-fc__cita {
	grid-area: 1 / 1;
	position: relative;
	align-self: end;
	margin: 0 var(--ar-m) clamp(22px, 3vw, 48px);
	z-index: 2;
}

.arua-fc__cita p {
	font: 900 clamp(32px, 7.4vw, 110px)/.86 var(--ar-display);
	letter-spacing: -.045em;
	color: var(--ar-papel);
	margin: 0;
	text-wrap: balance;
}

.arua-fc__cita cite {
	display: block;
	font: 800 11.5px/1 var(--ar-ui);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--ar-papel);
	margin-top: 14px;
	opacity: .9;
}

.arua-fc__pie {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	font: 500 12.5px/1.4 var(--ar-ui);
	color: var(--ar-granito);
	padding: 12px var(--ar-m) 0;
}

.arua-fc__pie b { color: var(--ar-tinta); }

@media (max-width: 600px) {
	.arua-fc__cita { margin: 0 14px 16px; }
	.arua-fc__pie { justify-content: flex-start; }
	/* En vertical la cita necesita sitio: la foto crece y la cita se ajusta,
	   que si no la frase se corta contra el borde de la fotografía. */
	.arua-fc__media img { height: clamp(330px, 88vw, 470px); }
	.arua-fc--grande .arua-fc__media img,
	.arua-fc--alta .arua-fc__media img { height: clamp(390px, 106vw, 540px); }
	.arua-fc__cita p { font-size: clamp(26px, 6.8vw, 40px); }
}

/* Ficha práctica ---------------------------------------------------------- */

.arua-ficha-bl {
	display: flex;
	gap: clamp(18px, 3vw, 44px);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	border: 2px solid var(--ar-tinta);
	box-shadow: 8px 8px 0 var(--ar-seccion);
	padding: clamp(18px, 2.4vw, 34px);
	margin: clamp(34px, 5vw, 70px) 0;
}

.arua-ficha-bl__tx { flex: 1 1 320px; min-width: 0; }

.arua-ficha-bl__k {
	font: 800 11px/1 var(--ar-ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ar-piedra);
}

.arua-ficha-bl .arua-ficha-bl__nombre {
	font: 800 clamp(26px, 3.4vw, 44px)/1 var(--ar-display);
	letter-spacing: -.02em;
	margin: 10px 0 18px;
}

.arua-ficha-archivo--ancha { width: 100%; min-width: 0; box-shadow: none; }
.arua-ficha-archivo--ancha > div { grid-template-columns: minmax(84px, 120px) 1fr; padding: 9px 0 8px; }
.arua-ficha-archivo--ancha dd { font-size: 15px; }

.arua-sello {
	display: grid;
	place-items: center;
	width: clamp(118px, 13vw, 158px);
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid var(--ar-tinta);
	box-shadow: inset 0 0 0 3px var(--ar-papel), inset 0 0 0 4.5px var(--ar-tinta);
	text-align: center;
	padding: 10px;
	transform: rotate(-6deg);
	color: var(--ar-tinta);
}

.arua-sello em {
	display: block;
	font-style: normal;
	line-height: 0;
}

/* El logotipo va en SVG: nunca se compone con una tipografía. */
.arua-sello__marca {
	display: block;
	width: clamp(54px, 6vw, 72px);
	height: auto;
	color: currentColor;
}

.arua-sello b {
	font: 800 9px/1 var(--ar-ui);
	letter-spacing: .2em;
	text-transform: uppercase;
	border-top: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	padding: 5px 8px;
	margin: 6px 0;
}

.arua-sello i {
	font: 700 7.5px/1.3 var(--ar-ui);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-style: normal;
	max-width: 11em;
}

/* Selector de imágenes (editor) ------------------------------------------- */

.arua-bl-pick { position: absolute; inset: 0; }
.arua-ap__media .arua-bl-pick,
.arua-ap__hora .arua-bl-pick,
.arua-fc__media .arua-bl-pick { position: relative; inset: auto; display: block; }

.arua-bl-pick__btn {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
	text-align: inherit;
}

.arua-bl-pick__btn img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arua-ap__media--full .arua-bl-pick__btn img { height: clamp(260px, 46vw, 660px); }
.arua-ap__par .arua-bl-pick__btn img { height: clamp(220px, 34vw, 500px); }
.arua-ap__hora .arua-bl-pick__btn img { aspect-ratio: .82; height: auto; }
.arua-fc .arua-bl-pick__btn img { height: clamp(240px, 42vw, 620px); }
.arua-fc--grande .arua-bl-pick__btn img,
.arua-fc--alta .arua-bl-pick__btn img { height: clamp(300px, 56vw, 820px); }
.arua-fc .arua-bl-pick__btn .arua-bl-vacio { min-height: clamp(240px, 42vw, 620px); }

.arua-bl-pick__btn:focus-visible {
	outline: 3px solid #3A63E0;
	outline-offset: 2px;
}

.arua-bl-ayuda { font-size: 12px; line-height: 1.45; color: #5a5a5a; margin: 0 0 12px; }
.arua-bl-grupo { border-top: 1px solid #e0e0e0; padding-top: 12px; margin-top: 12px; }

/* Dos fotos: díptico y composición asimétrica ----------------------------- */

.arua-par {
	--ar-tinta: var(--tinta, #14130F);
	--ar-papel: var(--papel, #F6F1E7);
	--ar-piedra: var(--piedra, #635D52);
	--ar-granito: var(--granito, #3A3731);
	--ar-ui: var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	--ar-hueco: clamp(10px, 1.6vw, 26px);
	display: grid;
	gap: var(--ar-hueco);
	margin: clamp(30px, 4.5vw, 64px) 0;
	box-sizing: border-box;
}

.arua-par--sep-junta { --ar-hueco: 3px; }
.arua-par--sep-amplia { --ar-hueco: clamp(22px, 4vw, 60px); }

.arua-par__foto { margin: 0; min-width: 0; }
.arua-par__foto img { display: block; width: 100%; height: auto; }

.arua-par__foto figcaption,
.arua-par__credito {
	font: 500 12.5px/1.45 var(--ar-ui);
	color: var(--ar-granito);
	margin: 10px 0 0;
	max-width: 42em;
}

.arua-par__credito {
	grid-column: 1 / -1;
	font: 700 9.5px/1.4 var(--ar-ui);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ar-piedra);
	margin-top: 2px;
}

@media (min-width: 701px) {
	.arua-par { grid-template-columns: 1fr 1fr; align-items: start; }
	.arua-par--mayor-izquierda { grid-template-columns: 1.62fr 1fr; }
	.arua-par--mayor-derecha { grid-template-columns: 1fr 1.62fr; }
	.arua-par--al-centro { align-items: center; }
	.arua-par--al-abajo { align-items: end; }
}

/* Fotografía suelta y series, sobre bloques nativos ----------------------- */

/* A sangre de verdad: el ancho lo dan los márgenes negativos, no 100vw. */
.entry-content > .wp-block-image.alignfull,
.entry-content > .wp-block-gallery.alignfull {
	max-width: none;
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.entry-content > .wp-block-image.alignwide,
.entry-content > .wp-block-gallery.alignwide {
	max-width: var(--max, 1240px);
	margin-left: auto;
	margin-right: auto;
}

/* «A sangre» está pensada para fotografías horizontales. Si se aplica a una
   vertical, la foto no puede comerse tres pantallas: se limita la altura y se
   centra. Para una vertical sin recortar, foto suelta o dos fotos. */
.entry-content .wp-block-image.is-style-arua-sangre img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 88svh;
	object-fit: cover;
	object-position: center;
}

.entry-content .wp-block-image.is-style-arua-marco {
	background: var(--hueso, #EAE3D4);
	padding: clamp(12px, 1.8vw, 30px);
}

.entry-content .wp-block-image figcaption {
	font: 500 12.5px/1.45 var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	color: var(--granito, #3A3731);
	text-align: left;
	margin-top: 10px;
	max-width: 46em;
}

/* Serie documental: varias fotos al mismo tamaño, como una hoja de contactos.
   Para fotografía sin recortar están la foto suelta y el bloque de dos fotos. */
.entry-content .wp-block-gallery.is-style-arua-serie {
	display: grid;
	grid-template-columns: repeat(var(--ar-cols, 3), minmax(0, 1fr));
	gap: clamp(8px, 1.2vw, 18px);
	margin: clamp(30px, 4.5vw, 64px) 0;
}

.entry-content .wp-block-gallery.is-style-arua-serie.columns-2 { --ar-cols: 2; }
.entry-content .wp-block-gallery.is-style-arua-serie.columns-4 { --ar-cols: 4; }
.entry-content .wp-block-gallery.is-style-arua-serie.columns-5 { --ar-cols: 5; }

.entry-content .wp-block-gallery.is-style-arua-serie .wp-block-image {
	margin: 0;
	width: auto !important;
	flex: none !important;
}

.entry-content .wp-block-gallery.is-style-arua-serie img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}

.entry-content .wp-block-gallery.is-style-arua-serie > figcaption {
	grid-column: 1 / -1;
	font: 500 12.5px/1.45 var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	color: var(--granito, #3A3731);
	text-align: left;
	margin: 2px 0 0;
}

@media (max-width: 700px) {
	.entry-content .wp-block-gallery.is-style-arua-serie { --ar-cols: 2 !important; }
	.entry-content .wp-block-gallery.is-style-arua-serie img { aspect-ratio: 1 / 1.15; }
}
}

.arua-par .arua-bl-pick { position: relative; inset: auto; display: block; }
.arua-par .arua-bl-pick__btn img { height: auto; }
.arua-par .arua-bl-vacio { min-height: 220px; }

/* Hoja de contactos ------------------------------------------------------- */
/* El archivo de A RÚA: fotogramas de 35 mm en blanco y negro sobre tinta, con
   los números y la marca de lápiz graso en amarillo. Para fotografía vertical;
   con horizontales, la serie documental. */

.entry-content .wp-block-gallery.is-style-arua-contacto {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--ar-cols, 4), minmax(0, 1fr));
	gap: clamp(8px, 1vw, 15px);
	margin: clamp(34px, 5vw, 70px) 0;
	padding: clamp(44px, 4.4vw, 62px) clamp(22px, 2vw, 30px) clamp(18px, 1.8vw, 26px);
	/* La plancha crece con el número de fotogramas: una hoja de contactos tiene
	   fotogramas pequeños, no dos fotos grandes sobre fondo negro. */
	max-width: calc(var(--ar-cols, 4) * 272px);
	margin-inline: auto;
	background: #14130F; /* la plancha de revelado no cambia con el modo oscuro */
	border: 1px solid rgba(234, 227, 212, .18); /* el canto de la plancha, visible también en oscuro */
	counter-reset: arua-contacto;
}

/* Cabecera del revelado: rótulo y perforación. */
.entry-content .wp-block-gallery.is-style-arua-contacto::before {
	/* El nombre nunca se compone con tipografía: la marca de A RÚA es el SVG
	   del logotipo. Aquí basta el rótulo del revelado. */
	content: "Archivo";
	position: absolute;
	top: clamp(15px, 1.6vw, 22px);
	left: clamp(14px, 1.8vw, 26px);
	font: 800 clamp(10px, 1vw, 12px)/1 var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #F3CE45;
}
.entry-content .wp-block-gallery.is-style-arua-contacto::after {
	content: "";
	position: absolute;
	top: clamp(14px, 1.5vw, 20px);
	right: clamp(14px, 1.8vw, 26px);
	width: clamp(60px, 12vw, 160px);
	height: 9px;
	background-image: repeating-linear-gradient(to right, #F3CE45 0 7px, transparent 7px 14px);
	opacity: .55;
}

.entry-content .wp-block-gallery.is-style-arua-contacto > figure {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	width: auto !important;
	flex: none !important;
	counter-increment: arua-contacto;
}
/* El pie va debajo del fotograma, no encima: la galería de WordPress lo
   posiciona sobre la foto y aquí no queremos eso. */
.entry-content .wp-block-gallery.is-style-arua-contacto > figure figcaption {
	position: static !important;
	max-height: none !important;
	padding: 0 !important;
	background: none !important;
	box-sizing: border-box;
	flex: 1 1 auto;
}
.entry-content .wp-block-gallery.is-style-arua-contacto > figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border: 1px solid rgba(234, 227, 212, .22);
	filter: grayscale(1) contrast(1.08);
}
/* Número de fotograma. */
.entry-content .wp-block-gallery.is-style-arua-contacto > figure::after {
	content: counter(arua-contacto, decimal-leading-zero);
	position: absolute;
	left: 8px;
	top: 8px;
	font: 800 11px/1 var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	letter-spacing: .08em;
	color: #F3CE45;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
/* La marca de lápiz graso sobre el fotograma elegido. */
.entry-content .wp-block-gallery.is-style-arua-contacto > figure:nth-of-type(2)::before {
	content: "";
	position: absolute;
	inset: -6px;
	border: 2.5px solid #F3CE45;
	border-radius: 48% 52% 51% 49% / 50% 48% 52% 50%;
	opacity: .92;
	pointer-events: none;
}

/* El pie de cada fotograma, debajo, como en una hoja de contactos de verdad. */
.entry-content .wp-block-gallery.is-style-arua-contacto > figure figcaption {
	display: block;
	margin: 8px 0 0;
	font: 500 12px/1.35 var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	color: #BCB2A0;
	text-align: left;
}

.entry-content .wp-block-gallery.is-style-arua-contacto > figcaption {
	grid-column: 1 / -1;
	margin: 6px 0 0;
	font: 500 12.5px/1.45 var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	color: #D8CEBB;
	text-align: left;
}

.entry-content .wp-block-gallery.is-style-arua-contacto.columns-2 { --ar-cols: 2; }
.entry-content .wp-block-gallery.is-style-arua-contacto.columns-3 { --ar-cols: 3; }
.entry-content .wp-block-gallery.is-style-arua-contacto.columns-5 { --ar-cols: 5; }

@media (max-width: 719.98px) {
	.entry-content .wp-block-gallery.is-style-arua-contacto { --ar-cols: 2 !important; }
}


/* Cita grande de transición ------------------------------------------------ */

.entry-content .wp-block-pullquote.is-style-arua-grande {
	border: 0;
	padding: clamp(26px, 4vw, 54px) 0;
	margin: clamp(30px, 4vw, 56px) 0;
	background: none;
	text-align: left;
}
.entry-content .wp-block-pullquote.is-style-arua-grande blockquote { margin: 0; padding: 0; border: 0; }
.entry-content .wp-block-pullquote.is-style-arua-grande p {
	margin: 0;
	font-family: var(--f-display, Fraunces, Georgia, serif);
	font-weight: 700;
	font-variation-settings: "opsz" 96;
	font-size: clamp(1.9rem, 1.1rem + 3.2vw, 4rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	text-wrap: balance;
	color: var(--tinta, #14130F);
}
.entry-content .wp-block-pullquote.is-style-arua-grande cite {
	display: block;
	margin-top: 18px;
	font-family: var(--f-ui, "Hanken Grotesk", system-ui, sans-serif);
	font-size: .78rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--piedra, #6B655A);
}

/* Frase de transición centrada --------------------------------------------- */

.entry-content p.arua-transicion {
	max-width: 24ch;
	margin: clamp(30px, 4vw, 54px) auto;
	font-family: var(--f-display, Fraunces, Georgia, serif);
	font-weight: 600;
	font-variation-settings: "opsz" 48;
	font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
	line-height: 1.18;
	letter-spacing: -.015em;
	text-align: center;
	text-wrap: balance;
}