/* =========================================================================
   Lamai — hoja de estilos del theme
   Blanco y negro, tipografía P22 Underground, protagonismo de la fotografía.
   Orden: variables · base · accesibilidad · cabecera · portada · hero ·
   composición de contenido · La Modernista · Creaciones · Contacto · pie.
   ========================================================================= */

/* --- Variables ---------------------------------------------------------- */

:root {
	--tinta: #111111;
	--tinta-suave: #5c5c5c;
	--papel: #ffffff;
	--linea: #e3e3e3;

	--tipo: "p22-underground", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--peso-ligero: 300;
	--peso-fuerte: 600;

	--margen: clamp(1.25rem, 5vw, 5rem);
	--ancho-maximo: 1440px;
	--ancho-lectura: 34rem;

	--alto-cabecera: 5.5rem;
	--ritmo: clamp(3rem, 8vw, 8rem);

	/* Botón de pausa de la portada. El claim se alinea con su centro. */
	--pausa-abajo: 2rem;
	--pausa-tamano: 2.75rem;

	--curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 991.98px) {
	:root {
		--alto-cabecera: 4.25rem;
	}
}

/* En pantallas grandes la cabecera crece para que quepa la marca holgada. */
@media (min-width: 1400px) {
	:root {
		--alto-cabecera: 6.5rem;
	}
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--tipo);
	font-weight: var(--peso-ligero);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.25em;
}

.seccion__cuerpo a:not(.boton),
.pagina-simple__cuerpo a:not(.boton),
.entradilla-larga a:not(.boton) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

h1, h2, h3, h4 {
	font-weight: var(--peso-ligero);
	line-height: 1.12;
	margin: 0;
	letter-spacing: 0.01em;
}

p {
	margin: 0 0 1.4em;
}

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

.contenido {
	display: block;
	position: relative;
}

p + h3, ol + h3, ul+h3, figure + h3 {margin-top:3rem !important;}

/*
 * Sangría de las listas, solo en el cuerpo de texto editable. Va acotada a
 * esos contenedores para no desplazar las listas que el theme usa como
 * rejillas (el mosaico de carteles, el listado de ferias, los menús), que no
 * son listas de lectura y deben alinearse con el resto del contenido.
 */
.seccion__cuerpo ul,
.seccion__cuerpo ol,
.pagina-simple__cuerpo ul,
.pagina-simple__cuerpo ol,
.sala__texto ul,
.sala__texto ol,
.creaciones__texto ul,
.creaciones__texto ol,
.contacto__texto ul,
.contacto__texto ol,
.ferias__texto ul,
.ferias__texto ol {
	margin-left: 15px;
}

/* El listado de reserva vive dentro del cuerpo pero es una rejilla, no texto. */
.pagina-simple__cuerpo .listado {
	margin-left: 0;
}

/* --- Accesibilidad ------------------------------------------------------ */

.saltar-al-contenido {
	position: absolute;
	top: -100vh;
	left: var(--margen);
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--tinta);
	color: var(--papel);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.saltar-al-contenido:focus {
	top: 1rem;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Cabecera ----------------------------------------------------------- */

.cabecera {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: var(--alto-cabecera);
	color: var(--tinta);
	background: var(--papel);
	transition: background 0.5s var(--curva), color 0.5s var(--curva);
}

/* Sobre la fotografía de apertura la cabecera es transparente y en negativo. */
.con-hero .cabecera {
	background: transparent;
	color: var(--papel);
}

.con-hero .cabecera.es-solida {
	background: var(--papel);
	color: var(--tinta);
}

.cabecera__barra {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	height: 100%;
	padding: 0 var(--margen);
}

.cabecera__marca {
	grid-column: 2;
	justify-self: center;
}

.marca {
	display: inline-block;
}

.marca__logo {
	width: auto;
	height: clamp(2rem, 2.8vw, 4rem);
	object-fit: contain;
}

.con-hero .cabecera:not(.es-solida) .marca__logo {
	filter: invert(1) brightness(2);
}

.marca__texto {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: var(--peso-fuerte);
	letter-spacing: 0.32em;
	text-transform: uppercase;
}

.cabecera__lado--izq {
	grid-column: 1;
	justify-self: start;
}

.cabecera__lado--der {
	grid-column: 3;
	justify-self: end;
}

.cabecera__abrir {
	display: none;
	grid-column: 1;
	justify-self: start;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.cabecera__abrir-icono,
.cabecera__abrir-icono::before,
.cabecera__abrir-icono::after {
	display: block;
	width: 1.5rem;
	height: 1px;
	background: currentColor;
	transition: transform 0.3s var(--curva);
}

.cabecera__abrir-icono {
	margin: 0 auto;
	position: relative;
}

.cabecera__abrir-icono::before,
.cabecera__abrir-icono::after {
	content: "";
	position: absolute;
	left: 0;
}

.cabecera__abrir-icono::before {
	top: -6px;
}

.cabecera__abrir-icono::after {
	top: 6px;
}

@media (max-width: 991.98px) {
	.cabecera__abrir {
		display: block;
	}

	.cabecera__lado {
		display: none;
	}
}

/* --- Menús -------------------------------------------------------------- */

.menu-lamai {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: clamp(1rem, 2.5vw, 2.5rem);
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.menu-lamai--vertical {
	flex-direction: column;
	gap: 1.25rem;
	font-size: 1rem;
}

.menu-lamai a {
	position: relative;
	padding-bottom: 0.25rem;
}

.menu-lamai a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--curva);
}

.menu-lamai a:hover::after,
.menu-lamai a:focus-visible::after,
.menu-lamai .current-menu-item > a::after {
	transform: scaleX(1);
}

/* Secciones descritas pero todavía no activas. */
.menu-lamai__proximamente {
	opacity: 0.4;
	cursor: default;
}

.menu-movil {
	width: min(22rem, 85vw);
	background: var(--papel);
	color: var(--tinta);
}

.menu-movil .offcanvas-header {
	justify-content: flex-end;
	padding: 1rem var(--margen);
}

.menu-movil__cerrar {
	border: 0;
	background: none;
	font-size: 2rem;
	line-height: 1;
	color: inherit;
	cursor: pointer;
}

.menu-movil .offcanvas-body {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: 1rem var(--margen) 3rem;
}

/* --- Portada ------------------------------------------------------------ */

.portada {
	position: relative;
	height: 100svh;
	min-height: 32rem;
	overflow: hidden;
	background: var(--tinta);
}

.portada__fotos,
.portada__foto {
	position: absolute;
	inset: 0;
}

.portada__foto {
	margin: 0;
	opacity: 0;
	transition: opacity 1.6s var(--curva);
}

.portada__foto.es-activa {
	opacity: 1;
}

.portada__foto--vacia {
	background: #d8d8d8;
	opacity: 1;
}

.portada__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portada__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0.38) 100%);
}

/*
 * El claim baja al pie de la portada y comparte eje con el botón de pausa:
 * el bloque se ancla por su borde inferior en el centro del botón y luego se
 * desplaza la mitad de su propia altura, con lo que los dos centros coinciden
 * sea cual sea el número de líneas del claim. Las medidas del botón salen de
 * variables para que la alineación siga siendo cierta si el botón cambia.
 */
.portada__claim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--pausa-abajo) + var(--pausa-tamano) / 2);
	transform: translateY(50%);
	display: grid;
	justify-items: center;
	padding: 0 calc(var(--margen) + var(--pausa-tamano) + 1rem);
	text-align: center;
}

/* Mismo tamaño y estilos que .l-destacada; solo cambian el color y la sombra,
   que ahí no hace falta y aquí sostiene la legibilidad sobre la fotografía. */
.portada__claim-texto {
	max-width: 24em;
	color: var(--papel);
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-wrap: balance;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.portada__pausa {
	position: absolute;
	right: var(--margen);
	bottom: var(--pausa-abajo);
	width: var(--pausa-tamano);
	height: var(--pausa-tamano);
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: var(--papel);
	cursor: pointer;
}

.portada__pausa-icono {
	width: 10px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.portada__pausa[aria-pressed="true"] .portada__pausa-icono {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 10px solid currentColor;
	border-right: 0;
}

/* --- Hero de sección ---------------------------------------------------- */

/*
 * Ojo con el apilamiento: .hero NO puede llevar z-index propio. Si lo lleva,
 * crea un contexto de apilamiento y el titular (que debe pintarse por encima
 * del contenido) queda atrapado por debajo. Cada hijo declara el suyo y todos
 * conviven con .seccion (z-index 2) en el contexto raíz.
 */
.hero {
	position: relative;
	height: 100svh;
	min-height: 30rem;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: #d8d8d8;
}

.hero__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.45) 100%);
}

.hero__titulo {
	position: absolute;
	z-index: 3;
	left: var(--margen);
	right: var(--margen);
	bottom: 14vh;
	margin: 0;
	color: var(--papel);
	font-size: clamp(2.5rem, 7vw, 6rem);
	font-weight: var(--peso-ligero);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hero__flecha {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 3.5vh;
	transform: translateX(-50%);
	color: var(--papel);
}

.hero__flecha-icono {
	width: 1.25rem;
	height: 2.25rem;
	animation: lamai-flecha 2.4s var(--curva) infinite;
}

@keyframes lamai-flecha {
	0%, 100% { transform: translateY(0); opacity: 0.55; }
	50% { transform: translateY(0.5rem); opacity: 1; }
}

/*
 * Con JavaScript activo el hero se vuelve dinámico: la foto queda fija y se
 * funde mientras el titular sube y pasa a positivo sobre el contenido.
 * Las variables --hero-opacidad, --hero-titulo-top y --hero-titulo-tinta las
 * calcula assets/js/lamai.js en cada scroll.
 */
.hero.es-dinamico .hero__media {
	position: fixed;
	opacity: var(--hero-opacidad, 1);
	will-change: opacity;
}

.hero.es-dinamico .hero__titulo {
	position: fixed;
	top: var(--hero-titulo-top, 60vh);
	bottom: auto;
	color: rgb(var(--hero-titulo-tinta, 255 255 255));
	z-index: 3;
	will-change: top, color;
}

.hero.es-dinamico .hero__flecha {
	position: fixed;
	opacity: var(--hero-opacidad, 1);
}

.hero.es-fundido .hero__flecha {
	visibility: hidden;
}

/* --- Contenido de sección ----------------------------------------------- */

.seccion,
.sala,
.creaciones,
.contacto,
.ferias,
.pagina-simple {
	position: relative;
	z-index: 2;
	background: var(--papel);
}

.seccion__cuerpo,
.sala,
.creaciones,
.contacto,
.ferias,
.pagina-simple {
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: 0 var(--margen);
}

.seccion__cuerpo {
	/* JavaScript ajusta --espacio-titular al alto real del titular. */
	padding-top: var(--espacio-titular, 9rem);
	padding-bottom: var(--ritmo);
}

.sala,
.creaciones,
.contacto,
.ferias,
.pagina-simple {
	padding-top: calc(var(--alto-cabecera) + var(--ritmo));
	padding-bottom: var(--ritmo);
}

/* Clases de composición para el contenido editable.
   Están documentadas en docs/clases-de-contenido.md */

.l-dos,
.l-tres {
	display: grid;
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-bottom: var(--ritmo);
	align-items: start;
}

.l-dos { grid-template-columns: 1fr 1fr; }
.l-tres { grid-template-columns: repeat(3, 1fr); }

.l-dos--estrecha-ancha { grid-template-columns: 1fr 1.6fr; }
.l-dos--ancha-estrecha { grid-template-columns: 1.6fr 1fr; }

@media (max-width: 767.98px) {
	.l-dos,
	.l-tres,
	.l-dos--estrecha-ancha,
	.l-dos--ancha-estrecha {
		grid-template-columns: 1fr;
	}
}

.l-texto {
	max-width: var(--ancho-lectura);
}

.l-figura {
	margin: 0 0 1.5rem;
}

/*
 * Desplaza verticalmente una columna para romper la retícula.
 * Van DESPUÉS de .l-figura a propósito: el reset de márgenes de la figura
 * lleva margin-top y, si estas reglas fuesen antes, lo anularía y el
 * desplazamiento no se vería en las fotos.
 */
.l-baja { margin-top: clamp(2rem, 8vw, 7rem); }
.l-sube { margin-top: clamp(-7rem, -8vw, -2rem); }

@media (max-width: 767.98px) {
	.l-baja,
	.l-sube { margin-top: 0; }
}

.l-figura figcaption,
.wp-caption-text,
.wp-element-caption {
	margin-top: 0.6rem;
	color: var(--tinta-suave);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

/*
 * Imagen grande a todo el ancho de la ventana.
 * Se sale de la columna con márgenes negativos, NO con transform: las
 * animaciones de entrada usan transform y lo sobrescribirían.
 */
.l-ancha {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: var(--ritmo);
}

.l-ancha img {
	width: 100%;
}

/* Imagen grande centrada, sin llegar al borde. */
.l-centrada {
	max-width: 62rem;
	margin: 0 auto var(--ritmo);
}

/* Frase destacada. */
.l-destacada {
	max-width: 24em;
	margin: var(--ritmo) auto;
	text-align: center;
	font-size: clamp(1.5rem, 3.2vw, 2.5rem);
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

/*
 * Los titulares del cuerpo de texto van en caja alta, en DemiBold y al mismo
 * cuerpo que el texto: titulan el párrafo sin competir con el H1 de la página.
 * Se limita a los contenedores de contenido editable para no pisar a
 * .separador ni al titular de la exposición en cartel, que son otros H2.
 */
.seccion__cuerpo h2,
.pagina-simple__cuerpo h2,
.sala__texto h2,
.creaciones__texto h2,
.contacto__texto h2,
.ferias__texto h2 {
	/*
	 * Al tener el mismo cuerpo que el texto, el titular necesita más aire
	 * arriba que abajo para leerse como cabecera de lo que viene y no como
	 * cierre de lo anterior.
	 */
	margin: 2.75rem 0 1rem;
	font-size: inherit;
	font-weight: var(--peso-fuerte);
	text-transform: uppercase;
}

/*
 * Sin aire arriba cuando el titular abre una columna o el propio contenido:
 * ahí el margen descuadraría la retícula o dejaría un hueco al empezar.
 */
.l-dos > * > h2:first-child,
.l-tres > * > h2:first-child,
.seccion__cuerpo > h2:first-child,
.pagina-simple__cuerpo > h2:first-child,
.sala__texto > h2:first-child,
.creaciones__texto > h2:first-child,
.contacto__texto > h2:first-child,
.ferias__texto > h2:first-child {
	margin-top: 0;
}

.seccion__cuerpo h3,
.pagina-simple__cuerpo h3 {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	font-weight: var(--peso-fuerte);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.entradilla-larga,
.texto-largo {
	max-width: var(--ancho-lectura);
}

/*
 * La entradilla abre la página y necesita separarse de lo que viene detrás.
 * El margen funciona igual cuando la clase va en un <p> suelto (sustituye a
 * su margen normal) que cuando envuelve varios párrafos: ahí el margen del
 * último párrafo se colapsa con este y manda el mayor de los dos.
 */
.entradilla-larga {
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

/* --- La Modernista ------------------------------------------------------ */

.sala__titulo,
.creaciones__titulo,
.contacto__titulo,
.ferias__titulo,
.pagina-simple__titulo {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

.sala__logo {
	width: clamp(5rem, 8vw, 7rem);
	height: auto;
	margin-bottom: 2.5rem;
}

.sala__direccion {
	margin-top: 2rem;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.expo-actual {
	margin: var(--ritmo) 0;
}

.expo-actual__banner {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #eee;
}

.expo-actual__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.expo-actual__datos {
	display: grid;
	gap: 0.35rem;
	margin-top: 1.5rem;
}

.expo-actual__etiqueta {
	margin: 0;
	font-size: 0.75rem;
	font-weight: var(--peso-fuerte);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.expo-actual__titulo {
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

.expo-actual__artista,
.expo-actual__fechas {
	margin: 0;
	color: var(--tinta-suave);
}

.expo-actual__descripcion {
	margin: 0.75rem 0 0;
	color: var(--tinta-suave);
}

/*
 * En pantallas grandes la descripción no pasa de un tercio del ancho de la
 * ventana. El tope en rem evita además líneas larguísimas en monitores muy
 * anchos, donde un tercio ya son casi cien caracteres por línea.
 */
@media (min-width: 992px) {
	.expo-actual__descripcion {
		max-width: min(33vw, 38rem);
	}
}

.separador {
	margin: var(--ritmo) 0 2.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--linea);
	font-size: 0.8125rem;
	font-weight: var(--peso-fuerte);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.mosaico {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 2rem);
	list-style: none;
}

.cartel {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #eee;
    border: 1px solid var(--linea);
}

.cartel__imagen {
	width: 100%;
	aspect-ratio: 3 / 4.2;
	object-fit: cover;
	transition: transform 0.8s var(--curva);
}

.cartel__datos {
	display: grid;
	gap: 0.2rem;
	padding: 1rem 0 0;
	font-size: 0.875rem;
}

/*
 * En móvil el mosaico se queda solo con los carteles. Los datos se ocultan a
 * la vista pero siguen ahí para los lectores de pantalla: con display:none
 * quien navegue con uno se quedaría sin saber de qué exposición es cada
 * cartel, y no hay otro sitio donde se cuente.
 */
@media (max-width: 767.98px) {
	.cartel__datos {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

.cartel__titulo {
	font-weight: var(--peso-fuerte);
}

.cartel__artista,
.cartel__fechas {
	color: var(--tinta-suave);
}

/* En escritorio los datos aparecen sobre el cartel al pasar el ratón
   o al llegar con el teclado. */
@media (hover: hover) and (min-width: 768px) {
	.cartel__datos {
		position: absolute;
		inset: 0;
		align-content: center;
		justify-items: center;
		padding: 1.5rem;
		background: rgba(17, 17, 17, 0.82);
		color: var(--papel);
		text-align: center;
		opacity: 0;
		transition: opacity 0.5s var(--curva);
	}

	.cartel__datos .cartel__artista,
	.cartel__datos .cartel__fechas {
		color: rgba(255, 255, 255, 0.78);
	}

	.cartel:hover .cartel__datos,
	.cartel:focus .cartel__datos,
	.cartel:focus-within .cartel__datos {
		opacity: 1;
	}

	.cartel:hover .cartel__imagen {
		transform: scale(1.04);
	}
}

/* --- Creaciones --------------------------------------------------------- */

.rejilla-categorias {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	gap: clamp(1rem, 2.5vw, 2.5rem);
	list-style: none;
	margin: var(--ritmo) 0;
}

.categoria {
	display: block;
}

.categoria__foto {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #eee;
}

.categoria__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--curva);
}

.categoria:hover .categoria__imagen {
	transform: scale(1.04);
}

.categoria__nombre {
	display: block;
	margin-top: 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.creaciones__acceso {
	text-align: center;
}

.boton {
	display: inline-block;
	padding: 0.9rem 2.25rem;
	border: 1px solid var(--tinta);
	background: var(--tinta);
	color: var(--papel);
	font-family: inherit;
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.4s var(--curva), color 0.4s var(--curva);
}

.boton:hover,
.boton:focus-visible {
	background: var(--papel);
	color: var(--tinta);
}

.boton--claro {
	background: transparent;
	color: var(--tinta);
}

.boton--claro:hover,
.boton--claro:focus-visible {
	background: var(--tinta);
	color: var(--papel);
}

/* --- Ferias ------------------------------------------------------------- */

.listado-ferias {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	list-style: none;
	margin-bottom: var(--ritmo);
}

.feria__foto {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #eee;
	margin-bottom: 1.25rem;
}

.feria__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feria__nombre {
	margin: 0 0 0.5rem;
	font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.feria__localidad,
.feria__fechas {
	margin: 0 0 0.25rem;
	color: var(--tinta-suave);
	font-size: 0.875rem;
}

.feria__localidad {
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.feria__enlace {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.feria__enlace a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Las ferias pasadas se muestran con menos peso visual. */
.feria--pasada {
	opacity: 0.68;
}

.feria--pasada:hover,
.feria--pasada:focus-within {
	opacity: 1;
}

/* --- Contacto ----------------------------------------------------------- */

.contacto__columnas {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	margin: var(--ritmo) 0;
	align-items: start;
}

@media (max-width: 767.98px) {
	.contacto__columnas {
		grid-template-columns: 1fr;
	}
}

.contacto__subtitulo {
	margin-bottom: 1.5rem;
	font-size: 0.8125rem;
	font-weight: var(--peso-fuerte);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.contacto__direccion {
	font-style: normal;
	margin-bottom: 1.4em;
}

.mapa {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #f2f2f2;
	border: 1px solid var(--linea);
}

.mapa__alternativa {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}

.mapa__alternativa a {
	text-decoration: underline;
}

.mapa iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.formulario {
	max-width: 38rem;
}

.formulario__campo {
	display: grid;
	gap: 0.5rem;
	margin-bottom: 1.75rem;
}

.formulario__campo label {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.formulario__opcional {
	text-transform: none;
	letter-spacing: 0.04em;
	color: var(--tinta-suave);
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario input[type="tel"],
.formulario textarea {
	width: 100%;
	padding: 0.65rem 0;
	border: 0;
	border-bottom: 1px solid var(--tinta);
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
	border-radius: 0;
}

.formulario textarea {
	resize: vertical;
}

.formulario input:focus,
.formulario textarea:focus {
	outline: none;
	border-bottom-width: 2px;
}

.formulario input:focus-visible,
.formulario textarea:focus-visible {
	outline: 2px solid var(--tinta);
	outline-offset: 4px;
}

.formulario__campo--acepto {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.75rem;
}

.formulario__campo--acepto label {
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: none;
	line-height: 1.5;
}

.formulario__campo--acepto input {
	margin-top: 0.3rem;
	width: 1rem;
	height: 1rem;
	accent-color: var(--tinta);
}

.formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulario__nota {
	margin-top: 1rem;
	color: var(--tinta-suave);
	font-size: 0.8125rem;
}

.formulario__aviso {
	padding: 1rem 1.25rem;
	margin-bottom: 2rem;
	border-left: 2px solid var(--tinta);
	background: #f6f6f6;
}

/*
 * El JavaScript le lleva el foco para que los lectores de pantalla lo
 * anuncien, pero no es un control al que se haya llegado tabulando: el propio
 * aviso ya es la señal visible, así que no necesita contorno de foco.
 */
.formulario__aviso:focus,
.formulario__aviso:focus-visible {
	outline: none;
}

.formulario__aviso--error {
	border-left-color: #a11919;
	color: #6f1212;
	background: #fbf2f2;
}

/* Cuando el mensaje se queda solo, sin formulario debajo, gana presencia. */
.formulario__aviso--solo {
	max-width: 34rem;
	margin-bottom: 0;
	padding: 1.75rem 2rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
}

/* --- Página simple ------------------------------------------------------ */

.pagina-simple--centrada {
	text-align: center;
	min-height: 60svh;
}

.pagina-simple--centrada .texto-largo {
	margin: 0 auto;
}

.listado {
	list-style: none;
}

.listado__pieza {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--linea);
}

/* --- Pie ---------------------------------------------------------------- */

.pie {
	position: relative;
	z-index: 2;
	background: var(--papel);
	border-top: 1px solid var(--linea);
	padding: var(--ritmo) 0 3rem;
}

.pie__interior {
	max-width: var(--ancho-maximo);
	margin: 0 auto;
	padding: 0 var(--margen);
	text-align: center;
}

.pie__navegacion .menu-lamai {
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.pie__kit {
	margin-top: 3.5rem;
	display: grid;
	justify-items: center;
	gap: 1rem;
}

.pie__kit-financiacion {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--tinta-suave);
}

.pie__kit-logos {
	max-width: min(30rem, 100%);
	height: auto;
}

.pie__kit-accesibilidad {
	max-width: 52rem;
	margin: 0;
	color: var(--tinta-suave);
	font-size: 0.6875rem;
	line-height: 1.6;
}

.pie__copyright {
	margin: 3rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--tinta-suave);
}

/* --- Animaciones de entrada --------------------------------------------- */

/*
 * Solo se ocultan si hay JavaScript, para que sin él el contenido siga
 * siendo visible.
 */
.js .anima,
.js .seccion__cuerpo > *,
.js .l-dos > *,
.js .l-tres > * {
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
}

.js .anima.es-visible,
.js .seccion__cuerpo > .es-visible,
.js .l-dos > .es-visible,
.js .l-tres > .es-visible {
	opacity: 1;
	transform: none;
}

/* --- Preferencia de movimiento reducido --------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.js .anima,
	.js .seccion__cuerpo > *,
	.js .l-dos > *,
	.js .l-tres > * {
		opacity: 1;
		transform: none;
	}

	.hero.es-dinamico .hero__media,
	.hero.es-dinamico .hero__titulo,
	.hero.es-dinamico .hero__flecha {
		position: absolute;
	}

	.hero.es-dinamico .hero__media {
		opacity: 1;
	}

	.hero.es-dinamico .hero__titulo {
		top: auto;
		bottom: 14vh;
		color: var(--papel);
	}
}

/* --- Impresión ---------------------------------------------------------- */

@media print {
	.cabecera,
	.hero__flecha,
	.portada__pausa,
	.menu-movil {
		display: none !important;
	}

	body {
		color: #000;
	}

	/*
	 * Al imprimir no hay scroll que dispare las apariciones: si no se fuerza,
	 * todo lo que está por debajo del primer pantallazo sale en blanco.
	 */
	.js .anima,
	.js .seccion__cuerpo > *,
	.js .l-dos > *,
	.js .l-tres > * {
		opacity: 1 !important;
		transform: none !important;
	}

	/* La foto de apertura no debe ocupar una página entera en papel. */
	.hero {
		height: auto;
		min-height: 0;
	}

	.hero.es-dinamico .hero__media,
	.hero.es-dinamico .hero__titulo {
		position: static;
		opacity: 1;
		color: #000;
	}
}