/*
Theme Name: Flamenco Pop
Theme URI: https://museoflamencopop.org
Author: David Medina
Description: Tema de bloques a medida para el Museo Flamenco Pop. Traduce el diseno de Figma "Website 2": degradado bandera, tipografia estrecha en caja alta y catalogo de fondos filtrable.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flamenco-pop
Tags: full-site-editing, blocks, museum, custom-colors
*/

/* Alto de la fila de filtros en el Figma (frame "filters", 45 px). Va en la
   raiz porque lo usan la barra y la columna A-Z, que no son parientes: dentro
   de .fp-filtros, el calc de la columna se quedaba invalido y no limitaba su
   altura. */
:root {
	--fp-alto-filtro: 45px;
}

/* -------------------------------------------------------------------------
   1. Fondo: azul plano en todo el sitio, video animado solo en la portada
   ---------------------------------------------------------------------- */

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Empuja el pie al fondo cuando la pagina tiene poco contenido. */
body > .wp-site-blocks {
	position: relative;
	z-index: 1;
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}

body > .wp-site-blocks > main {
	flex: 1 0 auto;
}

.fp-fondo-video {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Las tres capas posibles (lienzo del shader, video y poster) se superponen en
   la misma caja: si fueran de flujo normal se apilarian una debajo de otra. */
.fp-fondo-video video,
.fp-fondo-video img,
.fp-fondo-shader {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* El video es el artboard de 958x2010: anclado arriba, los rayos caen
	   sobre el hero igual que en el Figma. */
	object-position: center top;
}

/* La imagen fija solo entra si el video no debe reproducirse. Hace falta
   igualar la especificidad de `.fp-fondo-video img`, que si no la tapa. */
.fp-fondo-video img.fp-fondo-video__fijo {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.fp-fondo-video video {
		display: none;
	}

	.fp-fondo-video img.fp-fondo-video__fijo {
		display: block;
	}
}

/* La rueda va en una capa propia, entre el video y el contenido: comparte el
   `z-index: 0` del fondo pero se imprime despues en el DOM, asi que pinta
   encima del video y por debajo de `.wp-site-blocks` (z-index 1). El SVG va a
   opacidad plena y el 4 % se aplica aqui, para tener el valor en un solo
   sitio. */
.fp-rueda {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.04;
}

/* Al girar no vale una caja del tamano de la ventana: asomarian las esquinas
   vacias. La rueda vive en un cuadrado del lado de la diagonal -- que es la
   distancia mas larga que puede tapar al rotar -- centrado con `translate`,
   que es una propiedad aparte de `rotate` y por eso el giro no la pisa.
   `142vmax` es el apano para navegadores sin `hypot()`: la diagonal nunca
   pasa de 1,42 veces el lado mayor de la ventana. */
.fp-rueda::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 142vmax;
	height: 142vmax;
	translate: -50% -50%;
	background: url("assets/img/rueda.svg") center center / cover no-repeat;
}

@supports (width: hypot(100vw, 100vh)) {
	.fp-rueda::before {
		width: hypot(100vw, 100vh);
		height: hypot(100vw, 100vh);
	}
}

/* Una vuelta cada tres minutos: se nota que esta viva, pero no compite con el
   contenido. Mismo fotograma clave que la flor de las areas. */
@media (prefers-reduced-motion: no-preference) {
	.fp-rueda::before {
		animation: fp-girar 180s linear infinite;
	}
}

/* La entradilla del hero va en caja alta como el resto de rotulos del sitio.
   Se hace con `text-transform` y no escribiendo el texto en mayusculas, para
   que el lector de pantalla lo lea como una frase normal y no deletreando. */
.fp-hero__entradilla {
	text-transform: uppercase;
}

/* Cuando el shader ya ha pintado su primer fotograma se queda solo: el video y
   el poster sobran. Lo marca fondo-shader.js al tomar el relevo. */
.fp-fondo-video--relevo video,
.fp-fondo-video--relevo img.fp-fondo-video__fijo,
.fp-fondo-video--relevo img {
	display: none;
}

/* -------------------------------------------------------------------------
   2. Marquesina de noticias
   ---------------------------------------------------------------------- */

/* Va con la clase `alignfull` del bloque: el ancho lo fija el layout de
   WordPress (margenes negativos contra el padding global), asi que aqui no
   se toca el ancho o la cinta se quedaria corta por la derecha. */
.fp-marquesina {
	display: flex;
	overflow: hidden;
	gap: 0;
	user-select: none;
	padding-block: var(--wp--preset--spacing--16);
}

.fp-marquesina__pista {
	display: flex;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--32);
	padding-right: var(--wp--preset--spacing--32);
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--marquesina);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

/* Las cintas de exposiciones van al tamano del h1, no al de la marquesina
   de la portada. */
.fp-marquesina--display .fp-marquesina__pista {
	font-size: var(--wp--preset--font-size--display);
}

/* La duracion la calcula fp_cinta() a partir del largo del texto, para que
   todas las cintas se muevan al mismo ritmo: la animacion recorre el ancho de
   la pista, asi que con un tiempo fijo las largas irian disparadas. */
@media (prefers-reduced-motion: no-preference) {
	.fp-marquesina__pista {
		animation: fp-desplazar var(--fp-duracion, 30s) linear infinite;
	}
}

@keyframes fp-desplazar {
	to { transform: translateX(-100%); }
}

/* La cinta de la portada no se mueve: el texto se repite hasta pasar del ancho
   de la ventana y se centra, de modo que queda cortado por los dos lados. El
   `justify-content` reparte el sobrante a izquierda y derecha; como la caja
   lleva `overflow: hidden`, lo que sobra simplemente no se ve. */
.fp-marquesina--quieta {
	justify-content: center;
}

.fp-marquesina--quieta .fp-marquesina__pista {
	animation: none;
}

/* Una cinta que corre al reves, de izquierda a derecha. Las dos pistas son
   identicas, asi que basta con recorrer la misma animacion del final al
   principio: el bucle sigue sin saltar. */
.fp-marquesina--derecha .fp-marquesina__pista {
	animation-direction: reverse;
}

/* -------------------------------------------------------------------------
   3. Catalogo de fondos
   ---------------------------------------------------------------------- */

.fp-filtros {
	/* Todo a la izquierda, pegado al contador: el `space-between` dejaba un
	   hueco enorme entre el contador y el resto. */
	justify-content: flex-start;
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	padding-block: var(--wp--preset--spacing--16);
	/* Al bajar, la barra se queda encima de las portadas. Un velo del azul del
	   sitio mas desenfoque: se sigue viendo que hay algo debajo, pero el texto
	   de los filtros se lee sin pelear con las caratulas. */
	background: color-mix(in srgb, var(--wp--preset--color--azul) 72%, transparent);
	backdrop-filter: blur(24px) saturate(1.2);
}

/* Los filtros van seguidos, sin aire entre ellos: el hueco solo queda entre el
   contador y el grupo. Los bordes se solapan 2 px para que dos pildoras
   contiguas compartan la linea en vez de pintar una doble. */
.fp-filtros__grupo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	/* Ocupa lo que queda de barra para que la vista pueda irse al borde. */
	flex: 1;
}

/* Portadas y Artistxs, al extremo derecho del contenedor. Va con el hijo
   directo para ganarle a la regla que solapa los bordes (-2px), que tiene la
   misma especificidad y se declara despues. */
.fp-filtros__grupo > .fp-filtros__vista {
	margin-left: auto;
}

.fp-filtros__grupo > * + *,
.fp-filtros__sueltas > * + *,
.fp-filtros__vista > * + * {
	margin-left: -2px;
}

/* Todo el texto de la barra al mismo cuerpo: contador, casillas y pildoras. */
.fp-filtros__total {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

/* theme.json subraya todos los enlaces al pasar el raton. En el catalogo la
   senal es el color -blanco-, asi que aqui se quita: en una pildora o en una
   letra de 64 px el subrayado solo ensucia. */
.fp-filtros a:hover,
.fp-filtros a:focus-visible,
.fp-az a:hover,
.fp-az a:focus-visible,
.fp-indice a:hover,
.fp-indice a:focus-visible {
	text-decoration: none;
}

/* --- Buscador --------------------------------------------------------- */

.fp-filtros__busca {
	position: relative;
	display: flex;
	align-items: center;
}

.fp-filtros__campo {
	box-sizing: border-box;
	/* Tres veces el cuerpo de las pildoras: es la entrada principal al
	   catalogo y tiene que verse como tal. */
	min-height: calc(var(--fp-alto-filtro) * 1.6);
	padding-block: 0;
	width: 48ch;
	border: 2px solid var(--wp--preset--color--negro);
	border-radius: var(--wp--custom--radio-pildora, 24px);
	background: transparent;
	padding-inline: var(--wp--preset--spacing--12);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	/* Va despues de `font: inherit`, que lleva el line-height dentro y si no se
	   lo come. Un input no centra el texto solo cuando la altura sale de
	   min-height: con la linea a la altura de la caja -menos los bordes- el
	   texto queda en su centro, y el aviso tambien. */
	line-height: calc(var(--fp-alto-filtro) * 1.6 - 4px);
	letter-spacing: var(--wp--custom--tracking);
	color: inherit;
}

/* Mismo cuerpo que lo que se escribe: si el aviso es mas pequeno, la caja
   cambia de aspecto al teclear. El campo es ancho justo para que la frase
   entera entre a 36 px. */
.fp-filtros__campo::placeholder {
	color: inherit;
	opacity: 1;
}

/* El aspa de borrar se monta encima del campo, por dentro. */
.fp-filtros__borrar {
	position: absolute;
	right: var(--wp--preset--spacing--12);
	color: inherit;
	font-size: var(--wp--preset--font-size--dato);
	line-height: 1;
	text-decoration: none;
}

/* --- Formato a la vista ----------------------------------------------- */

.fp-filtros__sueltas {
	display: flex;
	align-items: center;
}

/* Sin contorno: en la barra solo se ve la casilla y el texto. El recuadro lo
   pone la propia marca de verificacion. */
.fp-filtros__sueltas .fp-filtros__casilla {
	box-sizing: border-box;
	min-height: var(--fp-alto-filtro);
	padding-inline: var(--wp--preset--spacing--12);
	white-space: nowrap;
}

/* La regla general pinta de negro todo lo que esta activo en la barra; aqui
   el formato marcado se señala en blanco, texto y casilla, sin recuadro. */
.fp-filtros__sueltas .fp-filtros__casilla[aria-pressed="true"] {
	background: transparent;
	color: var(--wp--preset--color--blanco);
}

/* Relleno blanco pero el borde se queda negro: contra el azul, un cuadrado
   blanco a pelo se desdibuja, y con el filo negro se lee como casilla marcada. */
.fp-filtros__sueltas .fp-filtros__casilla.is-activo .fp-filtros__marca {
	border-color: var(--wp--preset--color--negro);
	background: var(--wp--preset--color--blanco);
	box-shadow: none;
}

.fp-filtros select,
.fp-filtros .fp-pildora,
.fp-filtros__letra {
	/* Sin esto el min-height se suma al padding y al borde: la pildora se iba
	   a 73 px en vez de a 45. */
	box-sizing: border-box;
}

.fp-filtros select,
.fp-filtros .fp-pildora {
	appearance: none;
	display: inline-flex;
	align-items: center;
	min-height: var(--fp-alto-filtro);
	gap: var(--wp--preset--spacing--4);
	border: 2px solid var(--wp--preset--color--negro);
	border-radius: var(--wp--custom--radio-pildora);
	background: transparent;
	padding: var(--wp--preset--spacing--12);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking);
	cursor: pointer;
}

.fp-filtros [aria-pressed="true"],
.fp-filtros .fp-pildora.is-activo {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* Al pasar por encima, la pildora se comporta como si ya estuviera puesta:
   fondo negro y texto blanco. Asi se ve lo que va a pasar al pulsar. */
.fp-filtros .fp-pildora:hover,
.fp-filtros .fp-pildora:focus-visible {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* La separacion entre iniciales es el espacio del HTML (~0.23em). Se triplica
   con word-spacing en em para que siga el font-size de la barra. */
/* El abecedario vive dentro del desplegable, en rejilla: siete por fila es lo
   que hace el panel mas o menos cuadrado con 26 letras. */
.fp-filtros__letras {
	display: grid;
	grid-template-columns: repeat(7, auto);
	gap: 4px;
	justify-content: start;
}

/* La letra activa se marca con un circulo negro. El circulo lo lleva siempre,
   transparente, para que al pulsar no cambie el ancho de la fila y el
   abecedario no baile. */
.fp-filtros__letra {
	display: inline-grid;
	place-items: center;
	min-width: var(--fp-alto-filtro);
	min-height: var(--fp-alto-filtro);
	aspect-ratio: 1;
	border: 2px solid transparent;
	border-radius: 50%;
	color: inherit;
	text-decoration: none;
	word-spacing: normal;
}

.fp-filtros__letra.is-activo {
	border-color: var(--wp--preset--color--negro);
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

.fp-filtros__letra:hover,
.fp-filtros__letra:focus-visible {
	border-color: var(--wp--preset--color--negro);
}

/* Aviso de la carga automatica: cuenta lo que va entrando para quien navega
   con lector de pantalla y hace de punto de mira del IntersectionObserver.
   El min-height no es decorativo: vacio mide cero de alto y el observador no
   dispara nunca con una caja de altura cero. De paso evita el salto de la
   pagina cuando entra el texto. */
.fp-cargando {
	min-height: 1.2em;
	margin: var(--wp--preset--spacing--48) 0 0;
	font-size: var(--wp--preset--font-size--etiqueta);
	text-transform: uppercase;
}

/* --- Desplegables de seleccion multiple (formato, tematica) -------------
   La pildora es el <summary> y el panel se abre con <details>, sin javascript:
   cada casilla es un enlace que se suma o se quita de la lista de la URL. */

.fp-filtros__desplegable {
	position: relative;
}

.fp-filtros__desplegable summary {
	list-style: none;
}

.fp-filtros__desplegable summary::-webkit-details-marker {
	display: none;
}

/* La flecha del Figma, en puro CSS. */
.fp-filtros__desplegable summary::after {
	content: "";
	width: 0;
	height: 0;
	border-inline: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.fp-filtros__desplegable[open] summary::after {
	transform: rotate(180deg);
}

.fp-filtros__panel {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--8));
	left: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	min-width: max-content;
	max-height: 60vh;
	overflow-y: auto;
	border: 2px solid var(--wp--preset--color--negro);
	/* Cuadrado, como las tarjetas: con el radio de pildora las esquinas se
	   comen la primera y la ultima casilla. */
	background: var(--wp--preset--color--crema);
	padding: var(--wp--preset--spacing--12);
	gap: var(--wp--preset--spacing--8);
}

.fp-filtros__casilla {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	color: inherit;
	font-size: var(--wp--preset--font-size--base);
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: var(--wp--custom--tracking);
}

.fp-filtros__marca {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 2px solid var(--wp--preset--color--negro);
	background: transparent;
}

.fp-filtros__casilla.is-activo .fp-filtros__marca {
	background: var(--wp--preset--color--negro);
	/* La marca de verificacion, dibujada con el borde de un pseudoelemento. */
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--crema);
}

.fp-filtros__casilla:hover,
.fp-filtros__casilla:focus-visible {
	color: var(--wp--preset--color--blanco);
}

.fp-filtros__limpiar {
	margin-top: var(--wp--preset--spacing--4);
	border-top: 1px solid var(--wp--preset--color--negro);
	padding-top: var(--wp--preset--spacing--8);
	color: inherit;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
}

.fp-filtros__cuenta {
	font-variant-numeric: tabular-nums;
}

/* El rotulo de los relacionados, siempre en una linea. Con nombres largos
   -"Juan Pena El Lebrijano y El Camaron de la Isla"- se corta con puntos
   suspensivos antes que partirse en dos. */
.fp-relacionados__titulo {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ritmo de la pagina "El museo": 72 px entre bloques y 36 entre el titular de
   cada uno y lo que viene debajo. WordPress reparte el aire con margen
   superior, asi que la regla de abajo lo anula donde haria que se sumaran. */
.fp-museo > * + * {
	margin-block-start: 72px;
}

.fp-museo h2 {
	margin-block-end: 36px;
}

.fp-museo h2 + * {
	margin-block-start: 0;
}

/* La creadora y el equipo, lado a lado. La foto de Cathy manda el ancho de su
   columna y el texto va debajo. */
.fp-museo__personas {
	align-items: start;
}

.fp-creadora__foto {
	margin-block-end: var(--wp--preset--spacing--24);
}

/* --- "Con el apoyo de": los shorts ------------------------------------- */

.fp-apoyo__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-apoyo__corto {
	margin: 0;
}

/* Un short es vertical: la tarjeta tiene su proporcion para que la rejilla no
   baile mientras cargan las miniaturas. */
.fp-apoyo__boton,
.fp-apoyo__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	border: 0;
	padding: 0;
	background: var(--wp--preset--color--negro);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.fp-apoyo__miniatura {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.fp-apoyo__boton:hover .fp-apoyo__miniatura,
.fp-apoyo__boton:focus-visible .fp-apoyo__miniatura {
	transform: scale(1.04);
}

/* El triangulo de play, dibujado con bordes: ni icono ni SVG que cargar. */
.fp-apoyo__play {
	position: absolute;
	/* Centrado por transform y no por `margin: auto`: la caja mide 0x0 y son
	   los bordes los que dibujan el triangulo, asi que el centrado automatico
	   lo dejaba pegado arriba. El 4px extra compensa el peso visual del
	   triangulo, que no esta centrado dentro de su propia caja. */
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% + 4px), -50%);
	width: 0;
	height: 0;
	border-block: 16px solid transparent;
	border-left: 26px solid var(--wp--preset--color--blanco);
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

.fp-apoyo__video {
	aspect-ratio: 9 / 16;
}

/* Las seis actividades, en rejilla de tres: dos filas de tres. Una debajo de
   otra ocupaban media pagina de scroll para seis parrafos cortos. */
.fp-actividades__lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 72 px en los dos sentidos. No esta en la escala del tema (8·16·24·32·48·96),
	   es una medida pedida para esta rejilla. */
	gap: 72px;
}

/* El margen superior que pone el layout de flujo de WordPress desalinearia
   las filas: aqui la separacion la da el `gap`. */
.fp-actividades__lista > * {
	margin-block: 0;
}

@media (max-width: 900px) {
	.fp-actividades__lista {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.fp-actividades__lista {
		grid-template-columns: 1fr;
	}
}

/* El bloque de "¿Que es?" va a dos columnas: a linea completa un parrafo de
   36 px se lee fatal -el ojo se pierde al volver al principio de la siguiente
   linea- y partiendolo en dos se aprovecha el ancho sin perder la medida.
   El titular cruza las dos. */
.fp-museo__que-es {
	columns: 2;
	column-gap: var(--wp--preset--spacing--96);
}

.fp-museo__que-es h2 {
	column-span: all;
}

/* Un parrafo no se parte entre columnas: cada uno entero donde caiga. */
.fp-museo__que-es p {
	break-inside: avoid;
}

/* La separacion entre parrafos va por abajo y no por arriba. Con margen
   superior, el parrafo que abre la segunda columna arrastraba el suyo y esa
   columna empezaba mas arriba que la primera. */
.fp-museo__que-es > * {
	margin-block-start: 0;
}

.fp-museo__que-es p {
	margin-block-end: var(--wp--preset--spacing--24);
}

.fp-museo__que-es p:last-child {
	margin-block-end: 0;
}

@media (max-width: 781px) {
	.fp-museo__que-es {
		columns: 1;
	}
}

/* -------------------------------------------------------------------------
   Columna A-Z

   Las iniciales en vertical a la izquierda, a 64 px, y la rejilla al lado.
   Se queda pegada arriba al bajar: es un indice, no un encabezado.
   ---------------------------------------------------------------------- */

.fp-catalogo {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--wp--preset--spacing--24);
}

.fp-az {
	/* Alto de la barra de filtros, que va pegada arriba: la columna empieza
	   justo debajo para que no se metan una dentro de otra. */
	--fp-alto-barra: calc(var(--fp-alto-filtro) * 1.6 + var(--wp--preset--spacing--16) * 2);

	position: sticky;
	top: var(--fp-alto-barra);
	/* Con 24 letras a 64 px la columna mide mas que la pantalla y las ultimas
	   no se alcanzaban nunca: se queda a la altura de la ventana y se recorre
	   por dentro. `contain` evita que al llegar al final arrastre a la pagina. */
	max-height: calc(100vh - var(--fp-alto-barra) - var(--wp--preset--spacing--24));
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Sin barra de scroll a la vista: se sigue pudiendo recorrer con la rueda,
	   el trackpad o el teclado, pero la linea no ensucia la columna. */
	scrollbar-width: none;
	display: flex;
	flex-direction: column;
	line-height: 0.9;
	/* El ancho lo fija "TODXS", que es lo mas largo de la columna; las letras
	   se centran respecto a el en vez de quedar pegadas a la izquierda. */
	text-align: center;
}

/* Cabecera de la columna. Mas pequena que las letras: es la salida del filtro,
   no una inicial mas. */
.fp-az::-webkit-scrollbar {
	display: none;
}

.fp-az__todas {
	margin-bottom: var(--wp--preset--spacing--8);
	color: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking);
}

.fp-az__todas:hover,
.fp-az__todas:focus-visible,
.fp-az__todas.is-activo {
	color: var(--wp--preset--color--blanco);
}

.fp-az__letra {
	color: inherit;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: var(--wp--custom--tracking);
}

/* La columna va en negro sobre el azul; la letra puesta y la que se señala con
   el raton, en blanco. */
.fp-az__letra:hover,
.fp-az__letra:focus-visible,
.fp-az__letra.is-activo {
	color: var(--wp--preset--color--blanco);
}

/* En movil la columna se tumba y pasa a ser una fila con desplazamiento. */
@media (max-width: 781px) {
	.fp-catalogo {
		grid-template-columns: 1fr;
	}

	.fp-az {
		position: static;
		/* Tumbada deja de necesitar scroll propio. */
		max-height: none;
		overflow: visible;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--8);
		line-height: 1;
	}

	.fp-az__letra {
		font-size: var(--wp--preset--font-size--titulo);
	}
}

.fp-rejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* Menos aire entre filas que entre columnas: el pie ya mete 24 px por
	   dentro de la tarjeta, que en hover quedan dentro del fondo negro. */
	gap: var(--wp--preset--spacing--48) var(--wp--preset--spacing--96);
	/* El sitio justo para el marco del hover, que se dibuja por fuera: sin
	   esto el de la ultima columna se saldria y sacaria scroll horizontal. */
	padding-inline: 5px;
}

.fp-lista {
	display: grid;
	grid-template-columns: 1fr;
}

/* El bucle de consulta llega con la clase `is-layout-flow` de WordPress, que
   pone `margin-block-start` a todos los hijos menos al primero. En una lista
   vertical eso es la separacion entre elementos; en una rejilla empuja hacia
   abajo a todas las tarjetas menos a la primera de la primera fila, que se
   quedaba 24 px mas alta que sus vecinas. La separacion aqui la da `gap`. */
.fp-rejilla > *,
.fp-lista > * {
	margin-block: 0;
}

/* Ficha de disco dentro de la rejilla */
.fp-disco {
	position: relative;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.fp-disco__imagen {
	/* WordPress le pone `position: relative` al bloque de portada; asi seria
	   el bloque contenedor del enlace estirado de abajo y este solo cubriria
	   la imagen en vez de la tarjeta entera. */
	position: static;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--crema);
}

.fp-disco__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Toda la tarjeta lleva al fondo: el enlace de la portada se estira por encima
   de la tarjeta entera, que es la forma de tener un area de click grande sin
   meter un <a> dentro de otro. */
.fp-disco__imagen a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* El nombre del interprete lleva a su archivo, que es otro destino: se queda
   por encima del enlace de la tarjeta para no perderlo. */
.fp-disco__interprete a {
	position: relative;
	z-index: 2;
}

/* El marco del hover rodea la tarjeta por fuera. Va en un pseudo-elemento y no
   en un `border` de la tarjeta para no descolocar la rejilla al entrar el
   cursor; los 5 px que se come caben en el gap y en el padding de la rejilla. */
.fp-disco::after {
	content: "";
	position: absolute;
	inset: -5px;
	z-index: 3;
	border: 5px solid var(--wp--preset--color--negro);
	opacity: 0;
	pointer-events: none;
}

.fp-disco:hover::after,
.fp-disco:focus-within::after {
	opacity: 1;
}

/* La tarjeta entera se pone en negativo. Los enlaces del pie heredan el color
   (en theme.json son `currentColor`), asi que basta con cambiarlo aqui. */
.fp-disco:hover,
.fp-disco:focus-within {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

.fp-disco__pie {
	/* gap de 10 px entre imagen y pie en el Figma */
	padding: 10px 0 var(--wp--preset--spacing--24);
	font-size: var(--wp--preset--font-size--menu);
	text-transform: uppercase;
	line-height: normal;
}

.fp-disco__titulo { font-weight: 700; }
.fp-disco__interprete { font-weight: 400; }

/* Vista lista A-Z */
.fp-lista .fp-disco {
	font-size: var(--wp--preset--font-size--menu);
	flex-direction: row;
	align-items: baseline;
	gap: var(--wp--preset--spacing--24);
	border-bottom: 1px solid var(--wp--preset--color--negro);
	padding-block: var(--wp--preset--spacing--8);
}

.fp-lista .fp-disco__imagen { display: none; }

/* --- Tira de fondos de la portada ------------------------------------- */

/* El desplazamiento es del navegador, como en la cinta del equipo: asi
   arrastrar la tira y que avance sola son la misma cosa. Sin JavaScript queda
   una tira arrastrable con el dedo o el trackpad, quieta y sin dar la vuelta.
   La vuelta sin fin y el arrastre con raton los pone view.js. */
.fp-tira-fondos {
	/* `cqw` mide esta caja, que es lo que hace falta para que la tarjeta salga
	   igual que en la rejilla de fondos. */
	container-type: inline-size;
}

.fp-tira-fondos__pista {
	display: flex;
	overflow-x: auto;
	/* El gesto no se escapa a la navegacion atras/adelante del navegador. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* Hueco para el marco del hover, que se dibuja 5 px por fuera. */
	padding-block: 5px;
	cursor: grab;
}

.fp-tira-fondos__pista::-webkit-scrollbar {
	display: none;
}

.fp-tira-fondos--arrastrando .fp-tira-fondos__pista {
	cursor: grabbing;
	/* Arrastrando no se va seleccionando el texto de las fichas. */
	user-select: none;
}

/* La separacion entre grupos la da el `padding-right` y no un `gap` de la
   pista: asi la costura entre un grupo y el siguiente lleva el mismo hueco
   que hay entre dos tarjetas cualesquiera. */
.fp-tira-fondos__grupo {
	display: flex;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--96);
	padding-right: var(--wp--preset--spacing--96);
}

/* La cuenta de la rejilla de fondos: cuatro columnas, 96 px entre ellas y los
   10 px que la rejilla reserva a los lados para el marco del hover. */
.fp-tira-fondos .fp-disco {
	flex: 0 0 calc((100cqw - 10px - 3 * var(--wp--preset--spacing--96)) / 4);
}

/* --- Ultimas noticias de la portada ------------------------------------ */

/* La fila entera es el enlace, no solo el titular: el hover responde en toda
   la celda. La flecha va de adorno (aria-hidden en el render). */
.fp-noticia {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	padding-block: var(--wp--preset--spacing--16);
	color: inherit;
	text-decoration: none;
}

/* Una linea entre titular y titular, del grosor del borde de las flechas
   (2 px). Solo entre medias: la lista no se cierra ni arriba ni abajo. */
.fp-noticia:not(:last-child) {
	border-bottom: 2px solid var(--wp--preset--color--negro);
}

/* La fecha va delante del titular, con el mismo formato que el listado de
   prensa (d.m.Y). Numeros de ancho fijo para que queden en columna. */
.fp-noticia__fecha {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--dato);
	font-variant-numeric: tabular-nums;
}

/* El `margin: 0` es lo que iguala la separacion entre filas: el titular es un
   h3 y arrastraba el margen de bloque, que no caia igual en todas. */
.fp-noticia__titulo {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
}

/* La flecha es la misma que la de la tarjeta de exposicion: circulo de 43 px
   (47 con el borde) y el cuerpo de texto que herede, como alli. */
.fp-noticia .fp-enlace-flecha {
	width: 43px;
	height: 43px;
}

/* Misma regla que las filas de prensa: al pasar por encima, fecha y titular se
   ponen en blanco, sin subrayado. El foco va junto al hover para que tambien
   se vea navegando con el teclado. */
.fp-noticia:hover .fp-noticia__fecha,
.fp-noticia:focus-visible .fp-noticia__fecha,
.fp-noticia:hover .fp-noticia__titulo,
.fp-noticia:focus-visible .fp-noticia__titulo {
	color: var(--wp--preset--color--blanco);
}

.fp-noticia:hover .fp-enlace-flecha,
.fp-noticia:focus-visible .fp-enlace-flecha {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* -------------------------------------------------------------------------
   4. Ficha individual
   ---------------------------------------------------------------------- */

.fp-ficha__datos dt {
	font-size: var(--wp--preset--font-size--etiqueta);
	text-transform: uppercase;
	opacity: 0.7;
	margin-top: var(--wp--preset--spacing--16);
}

.fp-ficha__datos dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	text-transform: uppercase;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   5. Utilidades
   ---------------------------------------------------------------------- */

.fp-caps {
	text-transform: uppercase;
	letter-spacing: -0.03em;
}

/* Texto que solo existe para lectores de pantalla: el h1 de exposiciones y
   las etiquetas de las flechas del carrusel. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Un titular oculto no ocupa alto, pero WordPress le da igualmente el hueco
   entre bloques al hermano que va detras: la pagina arrancaba 48 px mas abajo
   que las que si llevan titular a la vista (museo y exposiciones contra fondos
   o prensa). El `:root` esta para ganarle al selector del layout, que tambien
   lo lleva; sin el, empatan y decide el orden de carga. */
:root .screen-reader-text + * {
	margin-block-start: 0;
}

/* La flecha es un SVG, no el caracter "→": Helvetica LT Narrow no trae el
   glifo, y el que ponia el sistema quedaba 0,115 em por debajo del centro del
   circulo —con una desviacion distinta en cada ordenador—. Ver fp_flecha(). */
/* 0,95 em deja el trazo de unos 16 px en el circulo de 43, que es lo que mide
   la flecha en el Figma. */
.fp-flecha {
	display: block;
	width: 0.95em;
	height: 0.95em;
	overflow: visible;
}

.fp-flecha--izquierda {
	transform: scaleX(-1);
}

.fp-enlace-flecha {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid currentColor;
	border-radius: var(--wp--custom--radio-pildora);
	text-decoration: none;
	flex-shrink: 0;
}

.fp-enlace-flecha:hover {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* -------------------------------------------------------------------------
   6. Prensa: contacto para medios y listado de recortes
   ---------------------------------------------------------------------- */

/* El texto bajo el titular va en minusculas, como el de contacto. La plantilla
   del tema ya no lleva `fp-caps`, pero la copia guardada desde el editor del
   sitio (tabla `wp_posts`, `archive-prensa`) si, y manda sobre el archivo. */
.fp-prensa__intro .fp-caps {
	text-transform: none;
}

.fp-formulario {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

.fp-formulario__rotulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--dato);
}

.fp-formulario__campos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.fp-formulario__lista {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--12);
}

.fp-formulario__campo {
	margin: 0;
}

.fp-formulario input,
.fp-formulario textarea {
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--wp--preset--color--negro);
	border-radius: 0;
	background: transparent;
	padding: var(--wp--preset--spacing--12);
	font: inherit;
	font-size: var(--wp--preset--font-size--dato);
	color: inherit;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking);
}

.fp-formulario textarea {
	resize: vertical;
}

/* En Contacto el mensaje es un area de texto de verdad y el boton va a todo
   el ancho. */
.fp-pagina-contacto .fp-formulario textarea {
	min-height: 9rem;
}

.fp-pagina-contacto .fp-boton-rojo {
	align-self: stretch;
}

.fp-formulario__privacidad {
	margin: 0;
	font-size: var(--wp--preset--font-size--dato);
}

.fp-formulario__privacidad label {
	display: flex;
	align-items: flex-start;
	cursor: pointer;
}

/* La casilla es la misma que la de los filtros del catalogo (.fp-filtros__marca):
   cuadrado de 16 px con borde negro de 2 px, transparente y, marcada, con el
   relleno blanco y el borde negro. */
.fp-formulario__privacidad label {
	gap: var(--wp--preset--spacing--8);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking);
}

.fp-formulario__privacidad input[type="checkbox"] {
	appearance: none;
	flex: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--wp--preset--color--negro);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.fp-formulario__privacidad input[type="checkbox"]:checked {
	background: var(--wp--preset--color--blanco);
}

.fp-formulario__privacidad input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--negro);
	outline-offset: 2px;
}

/* El color del enlace lo pone la regla global de `p a` (blanco). */
.fp-formulario .fp-formulario__privacidad a {
	text-decoration: none;
}

.fp-formulario ::placeholder {
	color: inherit;
	opacity: 1;
}

.fp-formulario [aria-invalid="true"] {
	border-width: 2px;
	border-color: var(--wp--preset--color--rojo);
}

/* Trampa antispam: fuera de pantalla, no oculta con display:none para que
   los robots que lo comprueban la sigan rellenando. */
.fp-formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fp-formulario__aviso {
	margin: 0;
	border: 2px solid var(--wp--preset--color--negro);
	padding: var(--wp--preset--spacing--12);
	font-size: var(--wp--preset--font-size--dato);
}

.fp-formulario__aviso p {
	margin: 0;
}

.fp-formulario__aviso--error {
	border-color: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--rojo);
}

.fp-boton-rojo {
	align-self: flex-start;
	min-height: 54px;
	border: 2px solid var(--wp--preset--color--negro);
	border-radius: var(--wp--custom--radio-pildora);
	background: transparent;
	padding-inline: var(--wp--preset--spacing--16);
	font: inherit;
	font-size: 24px;
	color: var(--wp--preset--color--negro);
	cursor: pointer;
}

/* Todos los botones de la web miden lo mismo: 54px de alto, 24px de letra y
   el mismo relleno ("Consulta los fondos" de la portada y "Contactar"):
   fondo transparente con borde y, al pasar el raton, negro con texto blanco. */
.wp-block-buttons .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 54px;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--16);
	font-family: inherit;
	font-size: 24px;
	line-height: normal;
}

.fp-boton-rojo:hover,
.fp-boton-rojo:focus-visible {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* Listado de apariciones en medios (no esta en el Figma: solo sale si hay
   recortes publicados). */
.fp-prensa-lista {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--wp--preset--color--negro);
}

.fp-prensa-fila {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--24);
	border-bottom: 1px solid var(--wp--preset--color--negro);
	padding-block: var(--wp--preset--spacing--12);
	font-size: var(--wp--preset--font-size--menu);
	text-decoration: none;
}

/* Al pasar por encima de la fila, el titular y su apunte se ponen en blanco. El
   foco va junto al hover para que tambien se vea navegando con el teclado.
   El apunte necesita ademas recuperar la opacidad completa: en reposo va al 70 %
   y un blanco al 70 % sobre el azul se ve gris, no blanco. */
.fp-prensa-fila:hover .fp-prensa-fila__titulo,
.fp-prensa-fila:focus-visible .fp-prensa-fila__titulo,
.fp-prensa-fila:hover .fp-prensa-fila__apunte,
.fp-prensa-fila:focus-visible .fp-prensa-fila__apunte {
	color: var(--wp--preset--color--blanco);
	opacity: 1;
}

.fp-prensa-fila__medio {
	flex: 0 0 25%;
}

.fp-prensa-fila__texto {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fp-prensa-fila__titulo {
	font-weight: 400;
}

/* Linea propia bajo el titular: no es del medio, asi que va mas pequena y
   atenuada, y se queda negra aunque el titular pase a blanco. */
.fp-prensa-fila__apunte {
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 400;
	opacity: 0.7;
}

.fp-prensa-fila__fecha {
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--dato);
}

/* -------------------------------------------------------------------------
   7. Exposiciones
   ---------------------------------------------------------------------- */

/* Cintas y tarjetas se apilan con 24 px; las cintas abren seccion, asi que
   llevan otros 24 px encima (48 en total, como en el Figma). */
.fp-expos {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.fp-expos .fp-marquesina,
.fp-expos__rotulo {
	margin-top: var(--wp--preset--spacing--24);
}

/* El archivo no lleva cinta: solo un titulo centrado, al tamano del h1. */
.fp-expos__rotulo {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	text-align: center;
}

.fp-expos > .fp-marquesina:first-child {
	margin-top: 0;
}

/* El bloque va a ancho completo para que las cintas lleguen al borde de la
   ventana, como en el Figma; las tarjetas se recentran a los 958 px del
   contenido, con el mismo sangrado lateral que la cabecera. */
.fp-expos > .fp-expo-tarjeta,
.fp-expos > .fp-expos__rotulo,
.fp-expos > .fp-expos__archivo {
	width: min(
		100% - 2 * var(--wp--preset--spacing--24),
		var(--wp--style--global--content-size, 958px)
	);
	margin-inline: auto;
}

.fp-expos__archivo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--24);
}

/* --- La tarjeta ------------------------------------------------------- */

.fp-expo-tarjeta {
	position: relative;
	display: flex;
	border: 1px solid var(--wp--preset--color--negro);
}

/* La caja entera lleva a la ficha, pero el enlace cuelga del titulo y se
   estira con un pseudoelemento: envolver la tarjeta en un <a> metería las
   flechas del carrusel dentro de un enlace, que no es HTML valido ni
   funciona. Las flechas van en z-index 2, por encima de este. */
.fp-expo-tarjeta__enlace {
	color: inherit;
	text-decoration: none;
}

.fp-expo-tarjeta__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fp-expo-tarjeta:hover .fp-enlace-flecha,
.fp-expo-tarjeta:focus-within .fp-enlace-flecha {
	background: var(--wp--preset--color--negro);
	/* El borde es `currentColor` y el texto pasa a blanco: sin fijarlo aqui, la
	   flecha se queda con un filo blanco alrededor del negro. */
	border-color: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

.fp-expo-tarjeta--rojo { background: var(--wp--preset--color--rojo); }
.fp-expo-tarjeta--verde { background: var(--wp--preset--color--verde); }

/* Rail de la fecha: 26 px de ancho y el texto de abajo arriba. El filete
   del Figma esta en el borde inferior del texto girado, que una vez girado
   cae a la derecha. */
.fp-expo-tarjeta__fecha {
	flex: 0 0 26px;
	display: grid;
	place-items: center;
	margin: 0;
	overflow: hidden;
	border-right: 1px solid var(--wp--preset--color--negro);
	font-size: var(--wp--preset--font-size--dato);
	font-weight: 700;
}

.fp-expo-tarjeta__fecha span {
	writing-mode: vertical-rl;
	rotate: 180deg;
	white-space: nowrap;
}

.fp-expo-tarjeta__cuerpo {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--12);
}

.fp-expo-tarjeta__rotulo,
.fp-expo-tarjeta__lugar {
	margin: 0;
	font-size: var(--wp--preset--font-size--dato);
	font-weight: 700;
}

.fp-expo-tarjeta__titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: normal;
}

.fp-expo-tarjeta__pie {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--12);
}

/* La flecha de la tarjeta es mayor que la del catalogo: 43 px en el Figma. */
.fp-expo-tarjeta__pie .fp-enlace-flecha {
	width: 43px;
	height: 43px;
}

/* La imagen va recortada en ovalo, no en rectangulo. */
.fp-expo-tarjeta__imagen {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radio-pildora);
	background: var(--wp--preset--color--crema);
}

.fp-expo-tarjeta__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Destacadas: rotulo y titulo | imagen | lugar y flecha ------------ */

.fp-expo-tarjeta--destacada .fp-expo-tarjeta__cuerpo {
	align-items: center;
	gap: var(--wp--preset--spacing--24);
	text-align: center;
}

.fp-expo-tarjeta--destacada .fp-expo-tarjeta__texto,
.fp-expo-tarjeta--destacada .fp-expo-tarjeta__pie {
	flex: 1 1 0;
	min-width: 0;
}

.fp-expo-tarjeta--destacada .fp-expo-tarjeta__imagen {
	flex: 0 1 603px;
	aspect-ratio: 603 / 339;
}

/* --- Archivo: titulo sobre la imagen y lugar debajo -------------------- */

.fp-expo-tarjeta--pasada .fp-expo-tarjeta__cuerpo {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	text-align: center;
}

.fp-expo-tarjeta--pasada .fp-expo-tarjeta__imagen {
	width: 100%;
	aspect-ratio: 415 / 273;
}

/* --- Carrusel de la tarjeta ------------------------------------------- */

/* El desplazamiento es del navegador: sin JavaScript la pista se sigue
   arrastrando con el dedo o el trackpad, solo se quedan las flechas quietas. */
.fp-carrusel__pista {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.fp-carrusel__pista::-webkit-scrollbar {
	display: none;
}

.fp-carrusel__diapo {
	flex: 0 0 100%;
	height: 100%;
	scroll-snap-align: center;
}

.fp-carrusel__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border: 0;
	border-radius: var(--wp--custom--radio-pildora);
	background: var(--wp--preset--color--negro);
	padding: 0;
	font: inherit;
	font-size: 23px;
	line-height: 1;
	color: var(--wp--preset--color--blanco);
	cursor: pointer;
}

.fp-carrusel__flecha--atras { left: var(--wp--preset--spacing--24); }
.fp-carrusel__flecha--adelante { right: var(--wp--preset--spacing--24); }

.fp-carrusel__flecha:not([disabled]):hover,
.fp-carrusel__flecha:not([disabled]):focus-visible {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--negro);
}

.fp-carrusel__flecha[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* --- La tarjeta de la portada ----------------------------------------- */

/* Frame 1:428 del Figma. Es otra pieza que la tarjeta de /exposiciones/: mas
   pequena (279 px), sin rail de fecha, y el pie reparte fecha, lugar y flecha
   en una sola fila. Por eso tiene clases propias (.fp-expo*) y no comparte
   CSS con .fp-expo-tarjeta*. Las dos variantes del diseno, proxima y ultima,
   van en rojo: el estado solo cambia que exposicion se consulta. */
/* Las dos tarjetas ocupan el ancho del contenido, con la misma calle de 24 px
   que la rejilla de /exposiciones/: asi las dos paginas tienen tarjetas del
   mismo tamano (467 px). En el Figma la banda mide 580 px, pero a ese ancho se
   quedan diminutas al lado del archivo.
   Se selecciona por contenido y no por una clase del patron porque la plantilla
   de portada esta personalizada en la base de datos: ahi el patron ya esta
   expandido y lo que se escriba en patterns/ no la toca. */
.wp-block-columns:has(> .wp-block-column > .fp-expo) {
	gap: var(--wp--preset--spacing--24);
}

/* Si no hay exposicion que poner en una columna, el bloque no pinta nada y
   quedaria media fila en blanco. Se esconde la columna vacia y la que queda
   se estira sola, porque las columnas de WordPress crecen desde cero. */
.wp-block-columns:has(> .wp-block-column > .fp-expo) > .wp-block-column:not(:has(> .fp-expo)) {
	display: none;
}

/* -------------------------------------------------------------------------
   8. Ficha de exposicion
   ---------------------------------------------------------------------- */

/* No hay frame de Figma para esta pagina. Va a una columna y, a proposito, no
   se parece a la ficha de disco: alli mandan los datos y aqui manda la imagen
   con el texto. El lenguaje del sitio si se mantiene: ovalo, mayusculas,
   tracking cerrado y el boton rojo de prensa. */
.fp-ficha-expo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.fp-ficha-expo__estado {
	margin: 0;
	font-size: var(--wp--preset--font-size--dato);
	font-weight: 700;
}

/* La imagen grande, con el mismo recorte en ovalo que las tarjetas. */
.fp-ficha-expo__medios {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radio-pildora);
	background: var(--wp--preset--color--crema);
}

.fp-ficha-expo__medios img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cartela: los tres datos en fila, con la etiqueta pequena encima. Es lo que
   lleva una pared de museo al lado de la pieza. */
.fp-ficha-expo__cartela {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--48);
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--negro);
	border-bottom: 1px solid var(--wp--preset--color--negro);
	padding-block: var(--wp--preset--spacing--16);
}

.fp-ficha-expo__cartela dt {
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 700;
	opacity: 0.7;
}

.fp-ficha-expo__cartela dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

/* El texto explicativo no va a los 958 px: a ese ancho, a 24 px, salen lineas
   de mas de 90 caracteres y cuesta seguirlas. */
.fp-ficha-expo__texto {
	max-width: 42em;
	font-size: var(--wp--preset--font-size--base);
}

.fp-ficha-expo__texto > :first-child { margin-top: 0; }
.fp-ficha-expo__texto > :last-child { margin-bottom: 0; }

.fp-ficha-expo__acciones {
	display: flex;
}

/* El boton de prensa es un <button>; aqui es un enlace y necesita el reparto
   propio de una caja en linea. */
a.fp-boton-rojo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   9. Responsive (el Figma solo cubre escritorio; esto es una extrapolacion)
   ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.fp-rejilla { grid-template-columns: repeat(2, 1fr); }

	.fp-tira-fondos .fp-disco {
		flex-basis: calc((100cqw - 10px - var(--wp--preset--spacing--96)) / 2);
	}
}

/* Las destacadas dejan de ser una fila de tres columnas de 130 px y se apilan;
   el archivo pasa a una sola columna. */
@media (max-width: 900px) {
	.fp-expos__archivo { grid-template-columns: 1fr; }

	.fp-expo-tarjeta--destacada .fp-expo-tarjeta__cuerpo {
		flex-direction: column;
		gap: var(--wp--preset--spacing--12);
	}

	.fp-expo-tarjeta--destacada .fp-expo-tarjeta__texto,
	.fp-expo-tarjeta--destacada .fp-expo-tarjeta__pie {
		flex: 0 0 auto;
		width: 100%;
	}

	.fp-expo-tarjeta--destacada .fp-expo-tarjeta__imagen {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 415 / 273;
	}
}

@media (max-width: 560px) {
	.fp-rejilla { grid-template-columns: 1fr; }

	.fp-tira-fondos .fp-disco {
		flex-basis: calc(100cqw - 10px);
	}
	.fp-filtros { font-size: 11px; }
}

/* Dos circulos de 62 px se comen una imagen estrecha. */
@media (max-width: 560px) {
	.fp-carrusel__flecha {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}

	.fp-carrusel__flecha--atras { left: var(--wp--preset--spacing--8); }
	.fp-carrusel__flecha--adelante { right: var(--wp--preset--spacing--8); }
}

@media (max-width: 560px) {
	.fp-prensa-fila {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--8);
	}

	.fp-prensa-fila__medio,
	.fp-prensa-fila__titulo {
		flex: 1 0 100%;
	}
}

/* -------------------------------------------------------------------------
   10. Cabecera y pie a sangre
   ---------------------------------------------------------------------- */

/* Cabecera y pie van fuera del contenedor con padding global (ese solo lo
   lleva <main>), asi que basta con dejarlos sin padding propio para que el
   primer y el ultimo enlace queden pegados al borde de la ventana. */
.fp-borde-a-borde {
	padding: 0;
}

/* La seccion que se esta viendo, en blanco. El `aria-current` lo pone
   inc/bloques.php: los elementos del menu son enlaces personalizados y
   WordPress no los marca solo.
   El selector es largo a proposito: WordPress fija el color del menu con
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item`,
   tres clases, y hay que pasar de ahi sin recurrir a !important. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content[aria-current="page"],
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item[aria-current="page"] {
	color: var(--wp--preset--color--blanco);
}

/* El menu movil se despliega en una capa propia: ahi el texto si necesita
   respirar o queda cortado contra el borde. */
.fp-borde-a-borde .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--24);
}

/* -------------------------------------------------------------------------
   Indice de interpretes (vista de lista)

   El Figma no lista discos aqui, sino interpretes con su numero de fondos, a
   48 px y sin aire entre lineas: 57 px de alto cada una, que es el line-height
   normal de esta fuente. Se lee como un listado de cartelera.
   ---------------------------------------------------------------------- */

/* Los nombres van seguidos, llenando cada linea de lado a lado, en vez de uno
   por fila. Se separan solo en horizontal: el interlineado ya da el aire
   vertical. */
.fp-indice {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--wp--preset--spacing--24);
	margin: var(--wp--preset--spacing--48) 0 0;
	padding: 0;
	list-style: none;
}

.fp-indice__linea {
	margin: 0;
}

.fp-indice__enlace {
	display: block;
	color: inherit;
	font-size: var(--wp--preset--font-size--marquesina);
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	text-decoration: none;
	text-wrap: balance;
}

/* En blanco, como el resto de los hovers del catalogo: las letras del A-Z y
   las casillas de formato. */
.fp-indice__enlace:hover,
.fp-indice__enlace:focus-visible {
	color: var(--wp--preset--color--blanco);
}

.fp-indice--vacio {
	margin-top: var(--wp--preset--spacing--48);
	font-size: var(--wp--preset--font-size--base);
}

@media (max-width: 781px) {
	.fp-indice__enlace {
		font-size: var(--wp--preset--font-size--titulo);
	}
}

/* -------------------------------------------------------------------------
   11. Pagina "El museo"

   Frame «El museo» del Figma. Las medidas raras del diseno (huecos de 20 y de
   40 px) se redondean a la escala del tema (24 y 48): son las dos unicas del
   archivo que se salen de 8 · 16 · 24 · 32 · 48 · 96.
   ---------------------------------------------------------------------- */

/* El contenido de esta pagina va a ancho de ventana, no a los 958 px del resto
   del sitio, y **sin sangrado lateral**: todo enganchado a los bordes, como la
   cabecera y el pie. Basta con redefinir aqui la variable que usa el layout
   "constrained" de WordPress y los hijos pasan a ocupar la ventana entera. */
/* El ancho de contenido del tema (958 px de theme.json), guardado aparte: en
   esta pagina `.fp-museo` pisa la variable original con 100 %, asi que quien
   quiera el ancho de antes ya no puede leerla. Aqui se resuelve en `:root`,
   donde todavia vale lo que dice theme.json. */
:root {
	--fp-ancho-contenido: var(--wp--style--global--content-size);
}

.fp-museo {
	--wp--style--global--content-size: 100%;
}

/* El rotulo del equipo va centrado por diseno del bloque; en esta pagina, a la
   izquierda y a ancho de ventana. */
.fp-museo .fp-equipo__rotulo {
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
	text-align: start;
}

/* El bloque del equipo reparte su aire con `gap`, que aqui dejaria 84 px entre
   el rotulo y las fichas. Se iguala a los 36 del resto de la pagina. */
.fp-museo .fp-equipo {
	gap: 0;
}

/* Degradado de fondo: azul arriba, rojo en medio y verde abajo, a lo alto de
   toda la pagina. Va en `.wp-site-blocks` y no en el <body>: el fondo del body
   se propaga al lienzo del navegador, que lo dimensiona contra la ventana y no
   contra el contenido. `.wp-site-blocks` envuelve cabecera, cuerpo y pie, asi
   que su alto es exactamente el de la pagina.

   De momento en el museo, prensa, exposiciones y contacto. Para llevarlo al resto del sitio
   basta con quitar las clases de pagina del selector, pero ojo con la portada: el video de
   fondo va debajo de `.wp-site-blocks` y un fondo opaco lo taparia. */
.fp-pagina-el-museo .wp-site-blocks,
.post-type-archive-prensa .wp-site-blocks,
.post-type-archive-exposicion .wp-site-blocks,
.fp-pagina-contacto .wp-site-blocks {
	background: var(--wp--preset--gradient--azul-rojo-verde);
}

/* El pie deja de pintar su propio verde y lo coge del degradado, que ahi abajo
   ya esta en verde: asi no hay costura entre los dos. El pie es una plantilla
   compartida, de modo que solo se le quita el fondo en esta pagina.

   El `!important` no es pereza: WordPress declara las clases de color de bloque
   con `!important` (`.has-verde-background-color{...!important}`), asi que por
   especificidad no hay manera de ganarles. La alternativa seria un filtro de
   `render_block` que le quite la clase al pie, que es mucho andamio para esto. */
.fp-pagina-el-museo footer.wp-block-group.has-verde-background-color,
.post-type-archive-prensa footer.wp-block-group.has-verde-background-color,
.post-type-archive-exposicion footer.wp-block-group.has-verde-background-color,
.fp-pagina-contacto footer.wp-block-group.has-verde-background-color {
	background-color: transparent !important;
}

/* --- Areas tematicas -------------------------------------------------- */

/* Es la unica seccion de la pagina que no va a ancho de ventana: se mete en la
   columna de contenido del tema. A sangre, las ruedas quedaban partidas contra
   el borde. */
.fp-museo .fp-areas {
	width: min(
		100% - 2 * var(--wp--preset--spacing--24),
		var(--fp-ancho-contenido, 958px)
	);
	margin-inline: auto;
}

/* Tres columnas iguales y centradas en vertical. La flor cambia de columna en
   cada fila, asi que el orden lo pone el patron y aqui no se toca. */
/* La fila ocupa media ventana y se arrima a un lado o al otro, alternando. Lo
   que se mueve es la caja -- el texto de dentro sigue alineado a la izquierda.
   El lado lo pone el patron como clase y no un `:nth-child`, que aqui contaria
   tambien el titular de la seccion. */
/* Dos columnas a todo el ancho de la seccion. El zigzag ya no lo hace la fila
   arrimandose a un lado, sino las columnas cambiando de sitio: en las impares
   la rueda va a la izquierda, en las pares a la derecha.

   El marcado siempre lleva el rotulo antes que el texto y el cambio se hace con
   `order`, para que un lector de pantalla lea el titulo antes que su
   descripcion aunque en pantalla aparezca a la derecha. */
.fp-area {
	align-items: center;
}

.fp-area--rueda-derecha > .fp-area__rueda {
	order: 2;
}

/* La flor va detras del rotulo, no en una columna propia. Se pone desde aqui y
   no como <img> del contenido porque es decoracion: asi no le cuenta nada a un
   lector de pantalla. La proporcion de la caja es la del SVG, para que
   `contain` lo encaje justo y el texto quede centrado encima. */
.fp-area__rotulo {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 273.915 / 260.849;
	text-wrap: balance;
}

/* La flor vive en un pseudoelemento y no en el fondo del rotulo porque un
   fondo no se puede girar por su cuenta: hace falta una caja. El `z-index`
   negativo la deja debajo del texto -- sin el, al estar posicionada, taparia
   el rotulo. */
.fp-area__rotulo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/img/flor.svg") center / contain no-repeat;
}

/* Gira despacio, y en sentido contrario segun el lado de la fila: las impares
   (a la derecha) hacia la derecha, las pares (a la izquierda) hacia la
   izquierda. La flor tiene 16 petalos, asi que una vuelta entera de 90 s se
   lee como un balanceo continuo y no como un aspa. */
@media (prefers-reduced-motion: no-preference) {
	.fp-area__rotulo::before {
		animation: fp-girar 90s linear infinite;
	}

	.fp-area--izquierda .fp-area__rotulo::before {
		animation-direction: reverse;
	}
}

@keyframes fp-girar {
	to { rotate: 1turn; }
}

/* --- La creadora ------------------------------------------------------ */

/* Mientras la pagina no tenga imagen destacada, el bloque no pinta nada y la
   columna se queda vacia ocupando su 28 %: se quita para que el texto use todo
   el ancho. `:empty` no vale, porque la columna trae los saltos de linea de la
   plantilla. */
.fp-creadora .wp-block-column:not(:has(*)) {
	display: none;
}

/* Mismo tratamiento que los retratos del equipo. */
.fp-creadora__foto {
	width: fit-content;
}

.fp-creadora__foto img {
	display: block;
	width: 100%;
	/* La columna es un 28 %, que a ancho de ventana pasa de los 260 px que mide
	   en el Figma. El retrato se queda a su tamano y pegado al texto. */
	max-width: 260px;
	object-fit: cover;
	mix-blend-mode: multiply;
}

/* --- El equipo -------------------------------------------------------- */

/* La seccion va a ancho de ventana: las tarjetas reparten todo lo que haya. */
.fp-equipo {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--48);
}

.fp-equipo__rotulo {
	width: min(
		100% - 2 * var(--wp--preset--spacing--24),
		var(--wp--style--global--content-size, 958px)
	);
	margin: 0 auto;
	text-align: center;
}

/* Las tarjetas llenan el ancho que haya: `auto-fit` mete en cada fila las que
   quepan a 260 px como minimo, el `1fr` las estira para repartir lo que sobra y
   las que no caben bajan solas a la siguiente. Sin JavaScript ni media queries:
   el reparto depende del ancho disponible, no de un punto de corte. */
.fp-equipo__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fp-equipo__tarjeta {
	margin: 0;
}

/* Los retratos son tramas en blanco y negro que se funden con el fondo: con
   `multiply` los puntos blancos dejan pasar lo que haya detras y los negros se
   quedan. La caja no lleva fondo propio ni `isolation`, justamente para que la
   mezcla llegue hasta el degradado de la pagina. */
.fp-equipo__foto {
	aspect-ratio: 260 / 338;
	margin-bottom: var(--wp--preset--spacing--8);
	overflow: hidden;
}

.fp-equipo__imagen {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
}

/* Colaborador sin foto todavia: se reserva el hueco con un filete para que la
   rejilla no se lea como una fila de texto suelto. Al poner la destacada
   desaparece solo. */
.fp-equipo__foto--vacia {
	border: 2px solid var(--wp--preset--color--negro);
}

.fp-equipo__nombre {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: normal;
}

.fp-equipo__rol {
	margin: 0;
	font-size: var(--wp--preset--font-size--dato);
	font-weight: 700;
	line-height: normal;
}

/* --- Responsive (extrapolacion: el Figma solo cubre escritorio) -------- */

@media (max-width: 781px) {
	/* Aqui media ventana son menos de 200 px: la seccion vuelve a ancho
	   completo, como el resto de la pagina, y las filas con ella. */
	.fp-museo .fp-areas {
		width: 100%;
	}

	/* A ancho de movil la flor detras del rotulo mide lo que mide la pantalla:
	   se queda solo en escritorio y el rotulo vuelve a ser un titular normal. */
	.fp-area__rotulo {
		display: block;
		aspect-ratio: auto;
	}

	.fp-area__rotulo::before {
		display: none;
	}

	/* Media ventana aqui son menos de 200 px: el zigzag se deja para pantallas
	   donde haya sitio y las filas vuelven a ancho completo. */
	.fp-area {
		max-width: none;
	}
}

/* El core fuerza `justify-content: center` en `.wp-block-social-links.aligncenter`
   y gana al ajuste del bloque; sin ancho completo tampoco habria hueco que repartir. */
footer .wp-block-social-links.aligncenter {
	justify-content: space-between;
	width: 100%;
}

/* Core escala el icono un 10 % al pasar el raton. Con el ultimo icono pegado al
   borde de la ventana (sin sangrado lateral) el escalado se sale y aparece scroll. */
footer .wp-block-social-links .wp-social-link:hover {
	transform: none;
}

/* El menu pone `color: inherit` a sus enlaces y le gana al hover global de
   `theme.json`, asi que el blanco se repite aqui. */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blanco);
}

/* Los enlaces de texto dentro de un parrafo van siempre en blanco, tambien al
   pasar el raton, en toda la web (parrafos del editor y de los bloques propios).
   Quedan fuera los botones y las flechas, que llevan su propio color. */
p a:not(.wp-element-button):not(.fp-enlace-flecha),
p a:not(.wp-element-button):not(.fp-enlace-flecha):hover {
	color: var(--wp--preset--color--blanco);
}

/* Excepcion: los enlaces legales del pie (aviso legal, privacidad, cookies) van
   en negro y pasan a blanco al pasar el raton. */
footer p a:not(.wp-element-button):not(.fp-enlace-flecha) {
	color: var(--wp--preset--color--negro);
}

footer p a:not(.wp-element-button):not(.fp-enlace-flecha):hover {
	color: var(--wp--preset--color--blanco);
}

/* Los iconos de redes del pie son negros y pasan a blanco en hover. */
footer .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover {
	color: var(--wp--preset--color--blanco);
}

/* Aviso de cookies: franja pegada al borde inferior, sin sangrado lateral. */
.fp-cookies {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	/* Cuerpo de dato (16 px) para que el texto y los botones quepan en una linea. */
	font-size: var(--wp--preset--font-size--dato);
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

.fp-cookies[hidden] {
	display: none;
}

.fp-cookies__texto {
	flex: 1 1 auto;
	margin: 0;
}

.fp-cookies__texto a {
	color: inherit;
}

.fp-cookies__botones {
	display: flex;
	gap: 0.5rem;
}

.fp-cookies__boton {
	font: inherit;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--negro);
	border: 1px solid var(--wp--preset--color--blanco);
	cursor: pointer;
}

.fp-cookies__boton:hover,
.fp-cookies__boton:focus-visible {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
}

/* El aviso de cookies va sobre negro: su enlace es rojo, tambien en hover, y no
   entra en la regla general de enlaces blancos. */
.fp-cookies p a:not(.wp-element-button):not(.fp-enlace-flecha),
.fp-cookies p a:not(.wp-element-button):not(.fp-enlace-flecha):hover {
	color: var(--wp--preset--color--rojo);
}

/* --- Pie: proyecto y apoyos ---------------------------------------------- */

/* Franja a todo el ancho de la ventana, sin sangrado lateral: el proyecto
   y los apoyos en una columna centrada, uno encima de otro. No lleva
   fondo propio: es verde porque lo es el pie, y en las paginas donde el pie se
   deja transparente para el degradado, sigue al degradado sin costura. */
.fp-apoyos {
	gap: var(--wp--preset--spacing--48);
	/* El mismo hueco por arriba que por abajo: los 48 px del `blockGap` del pie
	   que el enlace legal ya lleva por debajo, para que no quede pegada a los
	   iconos de redes. */
	margin-block: var(--wp--preset--spacing--48) 0;
}

/* Todo alineado arriba del contenedor: los dos bloques y los logos de apoyo
   arrancan en la misma linea. El selector doble le gana al `align-items` que
   genera el layout de WordPress. */
.wp-block-group.fp-apoyos,
.wp-block-group.fp-apoyos__logos {
	align-items: flex-start;
}

/* Una sola columna centrada: «Un proyecto de» y su logo encima, «Con el apoyo
   de» y los suyos debajo. */
.wp-block-group.fp-apoyos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.wp-block-group.fp-apoyos__logos {
	justify-content: center;
}

.fp-apoyos__bloque {
	text-align: center;
}

.fp-apoyos__bloque .wp-block-image,
.fp-apoyos__bloque .wp-block-image img {
	margin-inline: auto;
}

.fp-apoyos__bloque {
		text-align: center;
	}
}

.fp-apoyos__bloque {
	margin: 0;
}

.fp-apoyos__bloque--apoyo {
	flex: 0 1 auto;
}

.fp-apoyos__bloque p {
	margin: 0;
}

.fp-apoyos__logos {
	gap: var(--wp--preset--spacing--48);
}

.fp-apoyos .wp-block-image {
	margin: 0;
}

.fp-apoyos__logo img {
	display: block;
	width: auto;
	/* Crece con la ventana: asi los cuatro apoyos caben en una fila sin
	   salirse por la derecha ni partirse en dos lineas. */
	height: clamp(20px, 2.2vw, 36px);
	max-width: 100%;
}

.fp-apoyos__logo--proyecto img {
	height: clamp(48px, 5vw, 72px);
}