/*
 * Museo Sonoro de la Revuelta — lo que `theme.json` no puede dar.
 *
 * REGLA: acá va sólo lo que no tiene lugar en `theme.json`. Paleta, tipografía,
 * cuerpos y espaciados se declaran allá y se usan por variable. Si una regla de
 * este archivo fija un color con un literal, está en el archivo equivocado.
 *
 * Todo lo de abajo sale de medir `diseno/capturas/museo-1440.jpg` el
 * 2026-08-27, y de `diseno/museosonorodelarevuelta.md`, que midió
 * `themes/bridge/css/style_dynamic.css` —el compilado con los ajustes reales—
 * y no la hoja genérica de Bridge, que trae 161 colores y un turquesa
 * `#1abc9c` que no aparece en el sitio.
 */

/* --------------------------------------------------- 1. La página, sin caja
 *
 * **No hay contenedor.** Medido: de 400 filas muestreadas de la captura, 227
 * NO tienen negro en el borde izquierdo — o sea que la imagen llega al borde
 * de la ventana. El negro que se ve es el fondo entre obra y obra, no un
 * margen.
 *
 * Por eso `useRootPaddingAwareAlignments` está en `false` en `theme.json`: con
 * él, WordPress reserva un canal a los lados que este diseño no tiene.
 */
/* LA GRILLA. Decisión del cliente, 2026-08-27: «en main page puedes hacer una
 * grilla de 6 x N hacia abajo, en que al hacer click levantar modal».
 *
 * Se aparta del original, que es una columna de imágenes a pantalla completa.
 * El motivo es medible: a 1440 px cada obra ocupaba ~1.100 px de alto, y 39
 * obras son ~43.000 px — más de treinta pantallas. Recorrer el archivo entero
 * era un ejercicio físico.
 *
 * Queda escrito como decisión y no como deriva: es la primera desviación
 * deliberada del diseño del origen en este tema. La imagen completa no se
 * pierde, se mueve — está en el modal y en la ficha.
 */
.museo-muro {
	margin-block: 0;
}

.museo-muro__grilla {
	gap: 2px;
	padding: 2px;
}

/* Seis columnas es el pedido, y sólo se sostiene en pantalla ancha: a 1440 px
 * cada celda mide ~238 px. Por debajo se baja de a poco en vez de saltar a
 * una sola columna, que dejaría el mismo scroll interminable que se quería
 * evitar. */
@media (max-width: 78rem) {
	.museo-muro__grilla { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 52rem) {
	.museo-muro__grilla { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 32rem) {
	.museo-muro__grilla { grid-template-columns: repeat(2, 1fr) !important; }
}

.museo-obra {
	position: relative;
	margin-block: 0;
	cursor: pointer;
}

/* La imagen llena su celda. `cover` y no `contain`: con `contain` aparecen
 * franjas negras y la retícula se deshilacha. Se pierde ver la obra entera
 * desde la grilla — está a un clic, en el modal. */
.museo-obra__imagen,
.museo-obra__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.museo-obra__imagen img {
	object-fit: cover;
	aspect-ratio: 1;
}

/* Una obra: su imagen y su título, y el aire negro que las separa de la
 * siguiente. Medido a 1440 px: 56 px entre el pie de la imagen y el título,
 * 74 px entre el título y la obra siguiente. */
.museo-obra {
	padding-block-end: var(--wp--preset--spacing--50);
}

.museo-obra .wp-block-post-featured-image {
	margin: 0;
}

.museo-obra .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------- 2. El título de la obra
 *
 * Blanco, pequeño, en negrita y **pegado al borde izquierdo**: medido, arranca
 * en x=1 sobre 1440. No va a un margen de contenido — va alineado con el
 * sangrado de su imagen, que es lo que hace que se lea como su pie y no como
 * un párrafo suelto.
 *
 * 14 px de tinta en la captura, sobre una negrita: eso es el 15 px de la
 * escala que midió la ficha (55 / 35 / 26 / 25 / 16 / 15).
 */
/* El título sobre la celda, en una banda que sólo aparece al pasar por encima
 * o al enfocar con el teclado. Con seis columnas, treinta y nueve títulos
 * permanentes serían una pared de texto; escondidos, la grilla se lee como lo
 * que es: un mosaico de imágenes del estallido.
 *
 * Pero NUNCA se esconde del lector de pantalla ni del teclado: la banda
 * aparece con `:focus-within`, así que tabular por la grilla va mostrando cada
 * título. Esconder por CSS lo que el teclado necesita es el error clásico. */
.museo-obra__titulo {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	margin: 0;
	padding: 0.5em 0.6em;
	background: color-mix(in srgb, var(--wp--preset--color--tinta) 82%, transparent);
	font-weight: 700;
	font-size: 0.813rem;
	line-height: 1.25;
	/* VISIBLE POR OMISIÓN. En un teléfono no hay «pasar por encima»: si el
	 * título depende de `:hover`, en táctil no aparece NUNCA y el mosaico
	 * queda mudo. Se oculta sólo donde el hover existe de verdad. */
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.museo-obra__titulo {
		opacity: 0;
		transition: opacity 120ms ease-out;
	}

	.museo-obra:hover .museo-obra__titulo,
	.museo-obra:focus-within .museo-obra__titulo {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.museo-obra__titulo { transition: none; }
}

.museo-obra__titulo a {
	color: var(--wp--preset--color--papel);
	text-decoration: none;
}

.museo-obra__titulo a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ------------------------------------------------------- 3.bis El menú ancho
 *
 * En escritorio el menú va desplegado; la hamburguesa queda sólo para el
 * teléfono (`overlayMenu: "mobile"`). El original mostraba hamburguesa también
 * en 1440 px, pero con siete sitios de Tsonami en un submenú, esconder el
 * acceso detrás de un botón deja el resto de la organización invisible.
 *
 * Es la segunda desviación deliberada del original en este tema, después de la
 * grilla. Decidida por el cliente el 2026-08-27: «en desktop se mantiene
 * activado menú burger, quiero un nav menu amplio».
 */
.museo-menu {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	gap: clamp(0.9rem, 2vw, 1.8rem);
}

.museo-menu a {
	color: var(--wp--preset--color--papel);
	text-decoration: none;
	/* El área de toque llega a 44 px de alto sin agrandar la letra: el relleno
	 * es lo que se pulsa, no lo que se ve. */
	padding-block: 0.7rem;
}

.museo-menu a:hover,
.museo-menu .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* El submenú de sitios: fondo negro con regla, como todo lo demás. */
.museo-menu .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--tinta);
	border: 1px solid var(--wp--preset--color--gris);
	color: var(--wp--preset--color--papel);
}

.museo-menu .wp-block-navigation__submenu-container a {
	padding-block: 0.55rem;
}

/* -------------------------------------------------------- 3. La barra de arriba
 *
 * Negra, el logotipo a la izquierda y un botón de menú a la derecha. No hay
 * menú horizontal desplegado: por eso `overlayMenu: "always"` en el marcado,
 * que es lo que el original hace con su hamburguesa.
 *
 * OJO — decisión pendiente de `diseno/museosonorodelarevuelta.md`: el original
 * muestra la palabra «BRIDGE», que es el logotipo POR OMISIÓN del tema. O
 * nunca se cargó uno, o se perdió. Acá se pone el título del sitio, que al
 * menos dice la verdad; el logotipo real hay que pedírselo al cliente.
 */
.museo-barra {
	background-color: var(--wp--preset--color--tinta);
	position: relative;
	z-index: 2;
}

/* El botón del menú medía 24×24: el mínimo exacto de WCAG 2.5.8, sin margen,
 * y un blanco chico para un pulgar. Se le da área de toque sin agrandar el
 * icono —el `padding` es lo que se pulsa, no lo que se ve— y se compensa el
 * margen para que no empuje la barra. */
/* **Sin `display` acá.** WordPress esconde el botón en escritorio con
 * `display: none` y lo muestra en móvil; declarar `display: inline-flex`
 * —que fue el primer intento— lo dejaba visible en 1440 px y la hamburguesa
 * no se iba nunca. El blanco de toque se consigue con tamaño mínimo y
 * relleno, que no pelean con esa decisión. */
.museo-menu .wp-block-navigation__responsive-container-open,
.museo-menu .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
	margin: -10px;
}

.museo-marca {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.museo-marca a {
	color: var(--wp--preset--color--papel);
	text-decoration: none;
}

/* ------------------------------------------------------ 4. Accesibilidad
 *
 * Foco visible sobre negro. Bridge lo suprimía, igual que Enfold en festival;
 * no se reproduce un defecto. El contorno va en blanco porque el fondo es
 * negro entero y es el único par de esta paleta con contraste suficiente.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--papel);
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------ 5. Las obras sin imagen: placa
 *
 * Tres de las 39 no tienen ninguna imagen, ni destacada ni en el cuerpo. En un
 * muro de imágenes a sangre, una fila sin imagen parece un error de carga.
 *
 * No se marcan como carentes ni se reordenan: se les da su propio peso
 * tipográfico. El título ocupa el lugar que ocuparía la imagen, con la misma
 * proporción (las imágenes van a 1440×960, que es 3:2) y las reglas grises que
 * la ficha midió. Deja de parecer un hueco y pasa a parecer una decisión.
 *
 * `:has()` hace todo el trabajo: el bloque de imagen destacada no renderiza
 * nada cuando falta, así que no hace falta ni marcado nuevo ni JavaScript.
 */
.museo-obra:not(:has(.wp-block-post-featured-image)) {
	display: flex;
	align-items: center;
	aspect-ratio: 3 / 2;
	max-height: 60vh;
	border-block: 1px solid var(--wp--preset--color--gris);
	padding-inline: var(--wp--preset--spacing--30);
}

.museo-obra:not(:has(.wp-block-post-featured-image)) .museo-obra__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
}

/* ------------------------------------------------------ 6. La ficha de obra
 *
 * La imagen a sangre igual que en el muro —es el mismo objeto, visto de
 * cerca— y debajo el texto en una columna legible. El reproductor viene
 * dentro del contenido, reconstruido por el saneador desde su lista blanca de
 * proveedores: lo único que hace falta acá es que no desborde.
 */
.museo-ficha__cuerpo {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding-inline: var(--wp--preset--spacing--30);
}

.museo-ficha__cuerpo iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-block: var(--wp--preset--spacing--30);
	border: 0;
}

.museo-ficha__cuerpo img {
	max-width: 100%;
	height: auto;
}

/* El volver, discreto y al final: se llega acá desde el muro y hay que poder
 * regresar sin depender del botón del navegador. */
.museo-ficha__volver {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--gris);
}

/* ------------------------------------------------- 8. La fachada del sonido
 *
 * Ocupa el lugar del reproductor de terceros hasta que alguien decida
 * escuchar. Su tamaño es el del iframe que reemplaza, para que la ficha no dé
 * un salto al pulsar.
 */
.museo-fachada {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.6rem;
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--gris);
}

.museo-fachada__boton {
	align-self: flex-start;
	min-height: 44px;
	padding: 0.5em 1.2em;
	border: 1px solid var(--wp--preset--color--papel);
	background: none;
	color: var(--wp--preset--color--papel);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 120ms ease-out, color 120ms ease-out;
}

.museo-fachada__boton:hover,
.museo-fachada__boton:focus-visible {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
}

/* El aviso NO está atenuado a propósito. Un texto que dice a quién se le va a
 * entregar tu IP y se pinta en gris claro es un aviso escrito para no leerse. */
.museo-fachada__nota {
	font-size: 0.813rem;
	line-height: 1.4;
	color: var(--wp--preset--color--papel);
}

@media (prefers-reduced-motion: reduce) {
	.museo-fachada__boton {
		transition: none;
	}
}


/* ---------------------------------------------------- 9. El modal de obra
 *
 * Se abre desde la grilla y trae la obra entera: la imagen completa, el texto
 * y su reproductor. La grilla es el índice; esto es la obra.
 */
.museo-modal {
	width: min(60rem, 94vw);
	max-height: 90vh;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 0;
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--papel);
	overflow: auto;
}

.museo-modal::backdrop {
	background: rgb(0 0 0 / 88%);
}

.museo-modal__barra {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	gap: 0.4rem;
	justify-content: flex-end;
	padding-block-end: 0.6rem;
	background: var(--wp--preset--color--tinta);
}

/* 44×44 y no 32: es el área que un pulgar acierta. En escritorio no estorba
 * —el icono sigue siendo del mismo tamaño, crece la zona pulsable— y en un
 * teléfono es la diferencia entre cambiar de obra y cerrar el modal sin
 * querer. Mismo criterio que el botón del menú. */
.museo-modal__ir,
.museo-modal__cerrar {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--papel);
	background: none;
	color: var(--wp--preset--color--papel);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

/* Deshabilitado se atenúa, no desaparece: si se va, la fila de controles se
 * recoloca sola y el cursor queda apuntando a otro botón. */
.museo-modal__ir[disabled] {
	opacity: 0.3;
	cursor: default;
}

.museo-modal__cerrar {
	margin-inline-start: auto;
}

.museo-modal__titulo {
	margin-block: 0 0.3em;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.15;
}

/* El recuento de imágenes y reproductores. En Roboto Mono si algún día se
 * sirve; hasta entonces, en el mismo Roboto con espaciado de dato. */
.museo-modal__meta {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: 0.813rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acento);
}

.museo-modal__portada img {
	display: block;
	width: 100%;
	height: auto;
}

.museo-modal__portada {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.museo-modal__texto img {
	max-width: 100%;
	height: auto;
}

.museo-modal__texto iframe {
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* El enlace con la URL a la vista: en un archivo, poder copiar la dirección
 * de una obra para citarla es parte de lo que lo hace archivo. Por eso se
 * muestra entera y no detrás de un «ver más». */
.museo-modal__enlace {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-block-start: 1px solid var(--wp--preset--color--gris);
	font-size: 0.813rem;
	word-break: break-all;
	color: var(--wp--preset--color--papel);
}

/* ------------------------------------------- 10. La grilla de una página
 *
 * `/museo-sonoro-de-la-revuelta/` trae el texto del archivo y 37 fotografías
 * de la exposición, que el constructor de Bridge dejaba una debajo de otra.
 * En retícula se leen como el registro fotográfico que son.
 *
 * Cuatro columnas y no seis: acá las fotos acompañan un texto, no son el
 * índice del sitio. Más grandes, menos por fila.
 */
.museo-pagina {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	padding-inline: var(--wp--preset--spacing--30);
}

.museo-reja {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	margin-block: var(--wp--preset--spacing--40);
}

@media (max-width: 60rem) { .museo-reja { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) { .museo-reja { grid-template-columns: repeat(2, 1fr); } }

.museo-reja__celda {
	margin: 0;
	cursor: pointer;
}

.museo-reja__celda img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* El texto de la página, en columna legible. El original lo servía a ancho
 * completo sobre negro, que a 1440 px son líneas de 200 caracteres. */
.museo-pagina .wp-block-post-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol) {
	max-width: 46rem;
	margin-inline: auto;
}

/* -------------------------------------------------------- 11. Contacto
 *
 * El formulario del original era un shortcode de Contact Form 7, un plugin
 * que este proyecto no reinstala. `diseno/ADAPTACION.md` §Paso 4 es explícito:
 * los formularios son trabajo de un plugin, no del tema — «un tema que hace de
 * plugin no se puede cambiar nunca más».
 *
 * Así que esto NO es un formulario que envía: es un formulario que ABRE el
 * programa de correo con el mensaje ya escrito, y lo dice antes de que alguien
 * lo pulse. Sin servidor, sin plugin, sin un campo que se pierda en silencio.
 */
.museo-contacto {
	max-width: 34rem;
	margin-block: var(--wp--preset--spacing--40);
}

.museo-contacto label {
	display: block;
	margin-block-end: 0.35em;
	font-size: 0.813rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.museo-contacto input,
.museo-contacto textarea {
	width: 100%;
	min-height: 44px;
	margin-block-end: var(--wp--preset--spacing--30);
	padding: 0.6em 0.7em;
	border: 1px solid var(--wp--preset--color--gris);
	border-radius: 0;
	background: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--papel);
	font: inherit;
}

.museo-contacto textarea {
	min-height: 9rem;
	resize: vertical;
}

.museo-contacto button {
	min-height: 44px;
	padding: 0.6em 1.4em;
	border: 1px solid var(--wp--preset--color--papel);
	background: none;
	color: var(--wp--preset--color--papel);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.museo-contacto button:hover,
.museo-contacto button:focus-visible {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
}

/* El aviso NO se atenúa: decir qué va a pasar al pulsar y pintarlo en gris
 * claro es escribirlo para que no se lea. */
.museo-contacto__aviso {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: 0.813rem;
	line-height: 1.4;
}

/* La galería dentro del modal: mismas reglas que la de la página, más chica
 * porque el modal es más angosto que la ventana. */
.museo-modal__reja {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	margin-block: var(--wp--preset--spacing--30);
}

@media (max-width: 40rem) {
	.museo-modal__reja { grid-template-columns: repeat(2, 1fr); }
}

.museo-modal__reja-celda {
	margin: 0;
}

.museo-modal__reja-celda img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* ------------------------------------------------------- 12. El buscador
 *
 * En la barra, entre la marca y el menú. Busca en el título y en el texto:
 * medido, el autor de WordPress está vacío en 38 de las 39 obras, pero el
 * nombre del artista o del colectivo está escrito en el cuerpo —33 obras
 * dicen «Por…», 20 «Artista», 14 «Colectiv…»—. O sea que buscar por autor ES
 * buscar en el contenido, y por eso no hay un campo aparte que sería mentira.
 */
.museo-buscador {
	flex: 0 1 16rem;
	margin: 0;
}

.museo-buscador .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--gris);
	background: var(--wp--preset--color--tinta);
}

.museo-buscador input[type="search"] {
	min-height: 44px;
	padding: 0.4em 0.7em;
	border: 0;
	background: none;
	color: var(--wp--preset--color--papel);
	font: inherit;
	font-size: 0.875rem;
}

.museo-buscador button {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: none;
	color: var(--wp--preset--color--papel);
	cursor: pointer;
}

/* En un teléfono la barra tiene marca, buscador y hamburguesa: el buscador
 * pasa a la línea de abajo, a ancho completo, en vez de espachurrar a los
 * otros dos. */
@media (max-width: 48rem) {
	.museo-barra {
		flex-wrap: wrap;
	}

	.museo-buscador {
		order: 3;
		flex: 1 0 100%;
	}
}

.museo-resultados {
	padding-block-start: var(--wp--preset--spacing--30);
}

.museo-resultados__cabeza {
	padding-inline: var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--30);
}

.museo-resultados__nota,
.museo-resultados__vacio {
	max-width: 44rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.museo-resultados__vacio {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

/* --------------------------------------- 13. Los pies de la ficha de obra
 *
 * Anterior · volver al archivo · siguiente, y debajo la pista de las teclas.
 * Los tres son enlaces de verdad puestos por WordPress: el teclado los usa,
 * no los reemplaza.
 */
.museo-ficha__pies {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--gris);
	gap: var(--wp--preset--spacing--30);
}

.museo-ficha__pies a {
	display: inline-block;
	min-height: 44px;
	padding-block: 0.7rem;
	color: var(--wp--preset--color--papel);
	font-weight: 700;
}

.museo-ficha__volver {
	margin: 0;
	text-align: center;
}

.museo-ficha__teclas {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: 0.813rem;
	opacity: 0.7;
}

.museo-ficha__teclas kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	margin-inline-end: 0.2em;
	border: 1px solid var(--wp--preset--color--papel);
	border-block-end-width: 2px;
	font: inherit;
	line-height: 1;
}

/* En un teléfono no hay teclado físico: la pista sobra y los enlaces de
 * anterior/siguiente hacen todo el trabajo. */
@media (max-width: 48rem) {
	.museo-ficha__teclas { display: none; }
}

/* La destacada de la ficha ya no es una banda a sangre: es la primera foto de
 * la galería. El bloque que WordPress imprime se oculta —el script se lleva su
 * imagen a la retícula— y si el script no corre, se ve a tamaño contenido en
 * vez de ocupar una pantalla. */
.museo-ficha__destacada {
	max-width: 22rem;
	margin-block: var(--wp--preset--spacing--30);
}

.museo-ficha__destacada img {
	display: block;
	width: 100%;
	height: auto;
}

.museo-ficha__destacada:empty {
	display: none;
}

/* -------------------------------------------------------- 14. Descargas
 *
 * Dos listas, rotuladas distinto porque son cosas distintas: las imágenes las
 * servimos nosotros y se descargan; el sonido vive en Bandcamp o SoundCloud y
 * de ahí sólo se puede enlazar. Medido: el origen no tiene una sola pista de
 * audio entre sus 4.567 archivos.
 */
.museo-descargas {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--gris);
}

.museo-descargas h2 {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-size: 0.813rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.museo-descargas__lista {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	list-style: none;
}

.museo-descargas__lista li {
	margin-block-end: 0.2rem;
}

.museo-descargas__lista a {
	display: inline-block;
	min-height: 44px;
	padding-block: 0.7rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--papel);
}

.museo-descargas__nota {
	margin-block: var(--wp--preset--spacing--20) 0.4rem;
	font-size: 0.813rem;
	line-height: 1.4;
}

/* La descarga bajo cada foto del modal: discreta, y sólo visible al pasar por
 * encima o al enfocar, para no tapar la imagen. En táctil siempre visible,
 * por lo mismo que los títulos del mosaico. */
.museo-modal__descarga {
	display: block;
	padding-block: 0.5rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--papel);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (hover: hover) and (pointer: fine) {
	.museo-modal__reja-celda .museo-modal__descarga {
		opacity: 0;
		transition: opacity 120ms ease-out;
	}

	.museo-modal__reja-celda:hover .museo-modal__descarga,
	.museo-modal__reja-celda:focus-within .museo-modal__descarga {
		opacity: 1;
	}
}

/* La columna legible también en la ficha de obra. Sin esto el texto —ahora que
 * son párrafos de verdad— se sirve a los 840 px del contenedor, que son
 * líneas de unos 100 caracteres. */
.museo-ficha__cuerpo .wp-block-post-content > :where(p, h2, h3, h4, ul, ol) {
	max-width: 46rem;
}

/* ------------------------------------------ 15. El icono de descarga
 *
 * Sobre cada imagen que servimos nosotros, arriba a la derecha. Es un
 * `<a download>` de verdad: se puede abrir en otra pestaña, copiar la
 * dirección y guardar con el menú del navegador. Un botón con JavaScript no
 * deja hacer ninguna de las tres.
 */
.museo-bajar {
	position: absolute;
	inset-block-start: 0.4rem;
	inset-inline-end: 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--papel);
	background: color-mix(in srgb, var(--wp--preset--color--tinta) 70%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--papel) 45%, transparent);
	text-decoration: none;
}

.museo-bajar:hover,
.museo-bajar:focus-visible {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
}

.museo-reja__celda,
.museo-modal__reja-celda,
.museo-modal__portada {
	position: relative;
}

/* En escritorio aparece al pasar por encima; en táctil está siempre, porque
 * ahí no hay «pasar por encima». Es el mismo criterio que los títulos del
 * mosaico, y el mismo error que ya cometí una vez. */
@media (hover: hover) and (pointer: fine) {
	.museo-bajar {
		opacity: 0;
		transition: opacity 120ms ease-out;
	}

	.museo-reja__celda:hover .museo-bajar,
	.museo-modal__reja-celda:hover .museo-bajar,
	.museo-modal__portada:hover .museo-bajar,
	.museo-reja__celda:focus-within .museo-bajar,
	.museo-modal__reja-celda:focus-within .museo-bajar,
	.museo-modal__portada:focus-within .museo-bajar {
		opacity: 1;
	}
}

.museo-descargas__todo {
	min-height: 44px;
	margin-block-end: 0.4rem;
	padding: 0.6em 1.2em;
	border: 1px solid var(--wp--preset--color--papel);
	background: none;
	color: var(--wp--preset--color--papel);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.museo-descargas__todo:hover:not([disabled]),
.museo-descargas__todo:focus-visible {
	background: var(--wp--preset--color--papel);
	color: var(--wp--preset--color--tinta);
}

.museo-descargas__todo[disabled] {
	opacity: 0.6;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.museo-bajar { transition: none; }
}

/* LA OBRA QUE NO TIENE FOTO NO ES UNA FOTO QUE FALLÓ.
 *
 * Medido el 2026-08-31: tres de las 39 fichas no tienen imagen destacada —
 * `zona-cero`, `radio-tsonami` y `el-derecho-de-vivir-en-paz-en-chile-2019`,
 * que está nombrada en `DA-14` como una de las 15 obras cuyo contenido visual
 * era el reproductor incrustado y no una foto. El artefacto tampoco las trae:
 * `media` vacío y sin `_thumbnail_id`. O sea no hay archivo que reponer.
 *
 * `wp:post-featured-image` no emite nada cuando no hay imagen, así que la
 * celda quedaba con el título solo, flotando entre 36 celdas con foto. Se lee
 * como una imagen que no cargó, que es justo lo que NO pasó.
 *
 * Acá la celda conserva la proporción de la retícula y el título se centra
 * sobre el fondo. No disimula que no hay foto: deja de mentir que hubo una.
 * Cuando alguien les elija imagen, esta regla deja de aplicar sola. */
.museo-obra:not(:has( img )) {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--gris);
	text-align: center;
}

.museo-obra:not(:has( img )) .museo-obra__titulo {
	position: static;
	opacity: 1;
	transform: none;
}