/* =========================================================================
   ESTILOS
   Tipografía y componentes. Los valores salen de variables.css; la
   disposición de bandas y paneles está en reticula.css.
   ========================================================================= */

/* --- Base --------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-fondo);
	color: var(--color-tinta);
	font-family: var(--fuente-texto);
	font-size: var(--tam-texto);
	line-height: var(--interlineado-texto);
	font-optical-sizing: auto;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

img,
picture {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: var(--filete);
	text-underline-offset: 0.2em;
}
a:hover {
	color: var(--color-acento);
}

:focus-visible {
	outline: 2px solid var(--color-acento);
	outline-offset: 2px;
}
#contenido:focus {
	outline: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* Rótulos en monoespaciada (navegación, metadatos). */
.panel,
.antetitulo,
.pieza__fecha,
.cartela,
.lamina__pie,
.catalogo__ficha,
.indice-salas__contador,
.indice-creadores__contador,
.entradilla--meta,
.fuentes,
.saltar,
.aviso-vacio {
	font-family: var(--fuente-meta);
	font-size: var(--tam-meta);
	line-height: var(--interlineado-meta);
	font-optical-sizing: none;
}

.saltar {
	padding: var(--esp-2) var(--esp-3);
	background: var(--color-tinta);
	color: var(--color-fondo);
	text-decoration: none;
}
.saltar:hover {
	color: var(--color-fondo);
}

/* --- Paneles ------------------------------------------------------------ */

.panel {
	padding: var(--esp-5) var(--esp-5) var(--esp-6);
}

.panel__titulo,
.panel__rotulo {
	margin: 0 0 var(--esp-4);
	font-size: var(--tam-micro);
	font-weight: 400;
	letter-spacing: var(--espaciado-rotulo);
	text-transform: uppercase;
	color: var(--color-tinta-suave);
}
.panel__titulo a {
	text-decoration: none;
}
.panel__titulo a:hover {
	color: var(--color-acento);
}
.panel__subtitulo {
	display: block;
	margin-top: var(--esp-1);
	color: var(--color-tinta);
}
.panel__vacio {
	margin: 0;
	color: var(--color-tinta-suave);
}

.lista-panel {
	list-style: none;
	display: grid;
	gap: var(--esp-3);
}
.lista-panel a {
	position: relative;
	display: block;
	text-decoration: none;
}
.lista-panel a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--filete);
}
.lista-panel__titulo {
	display: block;
}
.lista-panel__meta {
	display: block;
	color: var(--color-tinta-suave);
	font-size: var(--tam-micro);
}

/* Elemento activo: color de acento, peso y un cuadrado al margen
   (la señal no depende solo del color). */
.panel a[aria-current] {
	color: var(--color-acento);
	font-weight: 500;
}
.lista-panel a[aria-current]::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: calc(-1 * var(--esp-4));
	width: 0.5em;
	height: 0.5em;
	background: currentColor;
}

/* Panel principal: título del blog, menú e idioma. */
.panel--principal {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--esp-5);
}
.principal__titulo {
	margin: 0;
	font-family: var(--fuente-texto);
	font-size: var(--tam-titulo-2);
	line-height: var(--interlineado-titulo);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.principal__titulo a {
	text-decoration: none;
	color: var(--color-tinta);
	font-weight: inherit;
}
.principal__titulo a:hover {
	color: var(--color-acento);
}
.principal__menu {
	list-style: none;
	display: grid;
	gap: var(--esp-2);
}
.principal__menu a,
.idiomas a,
.menu-plegado a {
	text-decoration: none;
}
.principal__menu a:hover,
.idiomas a:hover {
	text-decoration: underline;
}

.idiomas__rotulo {
	margin-bottom: var(--esp-2);
}
.idiomas__lista {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-1) var(--esp-4);
}

/* Menú desplegable de la vista plegada (<details>: funciona sin JavaScript). */
.menu-plegado__boton {
	position: absolute;
	top: var(--esp-4);
	right: clamp(1.25rem, 5vw, 2.5rem);
	display: flex;
	align-items: center;
	gap: var(--esp-2);
	padding: var(--esp-2) var(--esp-3);
	border: var(--filete) solid var(--color-linea);
	cursor: pointer;
	list-style: none;
	text-transform: uppercase;
	letter-spacing: var(--espaciado-rotulo);
	font-size: var(--tam-micro);
}
.menu-plegado__boton::-webkit-details-marker {
	display: none;
}
.menu-plegado__boton::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-25%) rotate(45deg);
}
.menu-plegado[open] .menu-plegado__boton::after {
	transform: translateY(25%) rotate(-135deg);
}
.menu-plegado[open] .menu-plegado__boton {
	background: var(--color-tinta);
	color: var(--color-fondo);
}
.menu-plegado__contenido {
	display: grid;
	gap: var(--esp-4);
	padding-top: var(--esp-4);
	border-top: var(--filete) solid var(--color-linea-suave);
}
.menu-plegado__contenido .panel__rotulo {
	margin: 0;
}
.menu-plegado__contenido .lista-panel--salas {
	font-family: var(--fuente-texto);
	font-size: var(--tam-entradilla);
	line-height: var(--interlineado-titulo);
}
.menu-plegado__otros {
	padding-top: var(--esp-4);
	border-top: var(--filete) solid var(--color-linea-suave);
}

/* En la vista plegada el panel principal es una cabecera compacta. */
/* 66.5rem = punto de repliegue calculado en reticula.css. */
@media (width < 66.5rem) {
	.panel--principal {
		gap: var(--esp-3);
		padding: var(--esp-4) clamp(1.25rem, 5vw, 2.5rem);
	}
	.principal__titulo {
		padding-right: 6.5rem; /* sitio para el botón «Menú» */
		font-size: var(--tam-entradilla);
		min-height: 2.1rem;
		display: flex;
		align-items: center;
	}
	.idiomas {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: var(--esp-1) var(--esp-4);
	}
	.idiomas__rotulo {
		margin: 0;
	}
	.panel--piezas,
	.panel--creadores {
		padding-inline: clamp(1.25rem, 5vw, 2.5rem);
	}
}

/* Panel de salas: nombres de sala en la serif, grandes. */
.panel--salas .lista-panel {
	font-family: var(--fuente-texto);
	font-size: var(--tam-entradilla);
	line-height: var(--interlineado-titulo);
	gap: var(--esp-3);
}

/* Las bandas empujan el selector de idioma al pie de su mini-pantalla. */
/* 66.5rem = punto de repliegue calculado en reticula.css. */
@media (width >= 66.5rem) {
	.panel--principal .idiomas {
		margin-top: auto;
	}
}

/* --- Ventana central ---------------------------------------------------- */

.reticula__centro {
	padding-block: var(--esp-7) var(--esp-9);
}

.cabecera-pagina {
	margin-bottom: var(--esp-7);
}
.cabecera-pagina__titulo {
	margin: 0;
	font-size: var(--tam-titulo-1);
	line-height: var(--interlineado-titulo);
	font-weight: 400;
	letter-spacing: -0.015em;
	text-wrap: balance;
	hyphens: manual;
}
.cabecera-pagina--portada .cabecera-pagina__titulo {
	font-size: var(--tam-titulo-portada);
	letter-spacing: -0.025em;
}
.antetitulo {
	margin: 0 0 var(--esp-4);
	text-transform: uppercase;
	letter-spacing: var(--espaciado-rotulo);
	font-size: var(--tam-micro);
	color: var(--color-tinta-suave);
}
.antetitulo a {
	text-decoration: none;
}
.antetitulo a:hover {
	text-decoration: underline;
}
.entradilla {
	max-width: var(--medida-max);
	margin: var(--esp-5) 0 0;
	font-size: var(--tam-entradilla);
	line-height: 1.4;
	font-style: italic;
	text-wrap: pretty;
}
.entradilla--meta {
	font-style: normal;
	color: var(--color-tinta-suave);
}

.bloque + .bloque {
	margin-top: var(--esp-8);
}
.bloque__titulo,
.fuentes__titulo {
	margin: 0 0 var(--esp-5);
	padding-top: var(--esp-3);
	border-top: var(--filete) solid var(--color-linea);
	font-family: var(--fuente-meta);
	font-size: var(--tam-micro);
	font-weight: 400;
	letter-spacing: var(--espaciado-rotulo);
	text-transform: uppercase;
	color: var(--color-tinta-suave);
}

.aviso-vacio {
	color: var(--color-tinta-suave);
}

/* --- Texto de lectura ---------------------------------------------------- */

.prosa {
	font-size: clamp(1.0625rem, 0.9rem + 0.75vw, var(--tam-texto));
	hyphens: auto;
	text-wrap: pretty;
}
/* Medida: el texto nunca supera ~75 caracteres; las láminas desbordan. */
.prosa > :not(.lamina) {
	max-width: var(--medida-max);
}
.prosa p {
	margin: 0 0 1em;
}
.prosa h2 {
	margin: var(--esp-7) 0 var(--esp-4);
	font-size: var(--tam-titulo-2);
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.01em;
	hyphens: manual;
}
.prosa h3 {
	margin: var(--esp-6) 0 var(--esp-3);
	font-size: 1em;
	font-weight: 600;
}
.prosa blockquote {
	margin: var(--esp-6) 0;
	padding-left: var(--esp-5);
	border-left: var(--filete) solid var(--color-linea);
	font-size: var(--tam-entradilla);
	line-height: 1.4;
	font-style: italic;
}
.prosa blockquote p:last-child {
	margin-bottom: 0;
}
.prosa ul,
.prosa ol {
	margin: 0 0 1em;
	padding-left: 1.25em;
}

/* --- Láminas ------------------------------------------------------------ */

.lamina {
	margin: var(--esp-7) 0;
	max-width: var(--lamina-max);
}
.lamina img {
	width: 100%;
}
.lamina__pie {
	display: grid;
	gap: var(--esp-1);
	margin-top: var(--esp-3);
	padding-top: var(--esp-2);
	border-top: var(--filete) solid var(--color-linea);
	hyphens: manual;
}
.lamina__texto,
.lamina__creditos {
	margin: 0;
}
.lamina__numero {
	margin-right: var(--esp-2);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--espaciado-rotulo);
}
.lamina__creditos {
	color: var(--color-tinta-suave);
	font-size: var(--tam-micro);
}
.lamina__creditos > span + span::before {
	content: "·";
	margin-right: 0.5em;
}
.lamina__creditos a {
	overflow-wrap: anywhere;
}

/* --- Cartela ------------------------------------------------------------ */

.cartela {
	max-width: 30rem;
	margin: 0 0 var(--esp-7);
	padding: var(--esp-3) var(--esp-4) var(--esp-4);
	background: var(--color-fondo-alterno);
	border: var(--filete) solid var(--color-linea);
	border-top: var(--filete-grueso) solid var(--color-linea);
}
.cartela__rotulo {
	display: flex;
	justify-content: space-between;
	margin: 0 0 var(--esp-3);
	padding-bottom: var(--esp-2);
	border-bottom: var(--filete) solid var(--color-linea);
	font-size: var(--tam-micro);
	letter-spacing: var(--espaciado-rotulo);
	text-transform: uppercase;
}
.cartela__rotulo::after {
	content: "";
	width: 0.6em;
	height: 0.6em;
	margin-top: 0.25em;
	background: var(--color-acento);
}
.cartela__datos {
	margin: 0;
	display: grid;
	gap: var(--esp-2);
}
.cartela__fila {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: var(--esp-3);
	align-items: baseline;
}
.cartela dt {
	font-size: var(--tam-micro);
	letter-spacing: var(--espaciado-rotulo);
	text-transform: uppercase;
	color: var(--color-tinta-suave);
}
.cartela dd {
	margin: 0;
}
.cartela__fila--objeto {
	padding-bottom: var(--esp-2);
	border-bottom: var(--filete) solid var(--color-linea-suave);
}
.cartela__fila--objeto dd {
	font-family: var(--fuente-texto);
	font-size: var(--tam-entradilla);
	line-height: 1.2;
	font-style: italic;
	font-optical-sizing: auto;
}
.cartela__creadores {
	list-style: none;
}
.cartela a {
	text-decoration: none;
	border-bottom: var(--filete) solid currentColor;
}
@media (width < 30rem) {
	.cartela__fila {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.pieza__fecha {
	margin: var(--esp-5) 0 0;
	color: var(--color-tinta-suave);
}

/* --- Catálogo (listas de piezas) ---------------------------------------- */

.catalogo {
	list-style: none;
	counter-reset: catalogo;
	border-top: var(--filete) solid var(--color-linea);
}
.catalogo__item {
	counter-increment: catalogo;
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	column-gap: var(--esp-4);
	padding: var(--esp-5) 0;
	border-bottom: var(--filete) solid var(--color-linea-suave);
}
.catalogo__item::before {
	content: counter(catalogo, decimal-leading-zero);
	grid-row: 1 / span 3;
	font-family: var(--fuente-meta);
	font-size: var(--tam-meta);
	line-height: 2;
	color: var(--color-tinta-suave);
}
.catalogo__item > * {
	grid-column: 2;
}
.catalogo__titulo {
	margin: 0;
	font-size: var(--tam-titulo-2);
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.catalogo__titulo a {
	text-decoration: none;
}
.catalogo__titulo a:hover {
	text-decoration: underline;
}
.catalogo__ficha {
	margin: var(--esp-2) 0 0;
	color: var(--color-tinta-suave);
}
.catalogo__ficha > span + span::before {
	content: "·";
	margin-right: 0.5em;
}
.catalogo__resumen {
	max-width: var(--medida-max);
	margin: var(--esp-3) 0 0;
	text-wrap: pretty;
}

/* --- Índices ------------------------------------------------------------ */

.indice-salas {
	list-style: none;
	counter-reset: sala;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	gap: var(--esp-6) var(--esp-5);
}
.indice-salas__item {
	counter-increment: sala;
	padding-top: var(--esp-3);
	border-top: var(--filete-grueso) solid var(--color-linea);
}
.indice-salas__item::before {
	content: counter(sala, upper-roman);
	display: block;
	margin-bottom: var(--esp-2);
	font-family: var(--fuente-meta);
	font-size: var(--tam-meta);
	color: var(--color-acento);
}
.indice-salas__enlace {
	display: block;
	font-size: var(--tam-titulo-2);
	line-height: 1.1;
	text-decoration: none;
}
.indice-salas__enlace:hover {
	text-decoration: underline;
}
.indice-salas__contador {
	display: block;
	margin-top: var(--esp-2);
	color: var(--color-tinta-suave);
}
.indice-salas__descripcion {
	margin: var(--esp-3) 0 0;
	font-size: 1rem;
	text-wrap: pretty;
}

.indice-creadores {
	list-style: none;
	border-top: var(--filete) solid var(--color-linea);
}
.indice-creadores__item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--esp-1) var(--esp-4);
	padding: var(--esp-3) 0;
	border-bottom: var(--filete) solid var(--color-linea-suave);
	font-size: var(--tam-entradilla);
	line-height: 1.2;
}
.indice-creadores__item a {
	text-decoration: none;
}
.indice-creadores__item a:hover {
	text-decoration: underline;
}
.indice-creadores__contador {
	color: var(--color-tinta-suave);
}

/* --- Fuentes bibliográficas --------------------------------------------- */

.fuentes {
	max-width: var(--medida-max);
	margin-top: var(--esp-8);
}
.fuentes__lista {
	padding-left: 1.75em;
	display: grid;
	gap: var(--esp-2);
}
.fuentes__lista li::marker {
	color: var(--color-tinta-suave);
}