/**
 * FU Agenda — estilos
 *
 * Tokens tomados del Figma «Fundación Unicaja · UI Design» (sección Agenda).
 * Todo va prefijado con .fu-agenda para no chocar con Elementor ni con el tema.
 */

.fu-agenda {
	/* Color */
	--fu-ink: #18252D;            /* blue/200 */
	--fu-ink-soft: #5C6A72;
	--fu-ink-mute: #8D989E;
	--fu-cal-mute: #A0A6A6;   /* día sin eventos */
	--fu-cal-head: #767E80;   /* iniciales L M X J V S D */
	--fu-white: #FFFFFF;          /* grey/100 */
	--fu-bg: #FBFCF7;             /* yellow/100 */
	--fu-bg-soft: #F6F8F1;        /* yellow/200 */
	--fu-band: #EEF2E4;           /* yellow/400 */
	--fu-line: #D9D9D9;           /* grey/200 */
	--fu-line-soft: #E8E8E4;
	--fu-accent: #F4DF87;         /* yellow/500 */

	/* Tipografía */
	--fu-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fu-h-xl: 4.75rem;                       /* 76 — marco de 1440 */
	--fu-h-m: clamp(1.5rem, 3vw, 2rem);       /* 32 */
	--fu-h-s: 1.625rem;                       /* 26 */
	--fu-h-xs: 1.25rem;                       /* 20 */
	--fu-p1: 1rem;                            /* 16 */
	--fu-p2: 0.875rem;                        /* 14 */
	--fu-label: 0.875rem;                     /* 14 */

	/* Interletraje: el tema inyecta -0.5px a todo, y en el Figma sólo lo llevan
	   los títulos y el texto p2. Chips y etiquetas tienen su propio valor. */
	--fu-ls-h: -0.5px;      /* Heading M y S */
	--fu-ls-hxs: 0;         /* Heading XS */
	--fu-ls-p1: -0.1px;     /* Text p1 */
	--fu-ls-p2: -0.5px;     /* Text p2 */
	--fu-ls-label: 0.4px;   /* Other/Label */
	--fu-ls-chip: 0;        /* Other/Chip */

	/* Medidas */
	--fu-gutter: 80px;
	--fu-pad-block: 64px;
	--fu-side-col: 400px;
	--fu-side-height: 472px;
	--fu-radius: 16px;
	--fu-radius-sm: 10px;
	--fu-gap: 32px;

	font-family: var(--fu-font);
	color: var(--fu-ink);
	/* QA de diseño 17/09: el fondo de la página es yellow/200, no yellow/100.
	   Las tarjetas del calendario y del panel del día sí son yellow/100, y es ese
	   contraste el que las hace leerse como cajas. */
	background: var(--fu-bg-soft);
	-webkit-font-smoothing: antialiased;
}

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

/* ------------------------------------------------------------------ Reset --
   El plugin vive dentro de un tema y de Elementor, que traen sus propios
   estilos para tablas, listas, botones y enlaces. Aislamos el componente.

   Va todo dentro de :where() para que la especificidad se quede en 0,1,0:
   así gana a las reglas de elemento del tema (table, th, td, ul, button…)
   pero las clases del propio plugin, declaradas más abajo, siguen mandando. */

.fu-agenda :where(table) {
	inline-size: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
	font-size: inherit;
}

.fu-agenda :where(caption, thead, tbody, tfoot, tr, th, td) {
	border: 0;
	background: none;
	padding: 0;
	font-weight: inherit;
	text-align: inherit;
	vertical-align: middle;
}

.fu-agenda :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fu-agenda :where(li) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fu-agenda :where(li)::marker {
	content: "";
}

.fu-agenda :where(p, figure, blockquote) {
	margin: 0;
}

.fu-agenda :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.fu-agenda :where(a) {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	background: none;
}

.fu-agenda :where(button) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: inherit;
	text-transform: none;
	letter-spacing: inherit;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.fu-agenda :where(fieldset) {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.fu-agenda :where(legend) {
	margin: 0;
	padding: 0;
	float: none;
}

.fu-agenda :where(img) {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 0;
	box-shadow: none;
}

.fu-agenda :where(svg) {
	display: block;
}

.fu-agenda :where(input[type="checkbox"]) {
	margin: 0;
}

.fu-agenda :where(form) {
	margin: 0;
}

.fu-agenda__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--fu-gutter);
}

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

.fu-agenda-icon {
	flex: none;
}

/* Varios controles son enlaces reales para que funcionen sin JavaScript. */
.fu-agenda a.fu-chip,
.fu-agenda a.fu-btn,
.fu-agenda a.fu-cal__nav,
.fu-agenda a.fu-cal__day,
.fu-agenda a.fu-pager__step,
.fu-agenda a.fu-pager__page,
.fu-agenda a.fu-filters__clear {
	text-decoration: none;
}

/* El reset general usa :where() (especificidad 0,1,0) y no basta contra el
   reset.css del tema, que trae reglas más específicas para tablas:
     table td, table th                          → 0,0,2  (borde de 1px)
     table tbody > tr:nth-child(2n+1) > td       → 0,1,2  (filas rayadas)
   El calendario es una tabla de verdad (es una rejilla de fechas), así que lo
   defendemos con selectores de 0,2,3. Para el borde hace falta además
   !important: hay una regla en una hoja de otro origen (no legible desde el
   navegador) que lo impone y que ni la especificidad ni cambiar
   border-collapse consiguen desbancar. Va acotado a .fu-cal__grid, así que no
   afecta a ninguna otra tabla de la página. */

.fu-agenda .fu-cal__grid,
.fu-agenda .fu-cal__grid > thead,
.fu-agenda .fu-cal__grid > tbody,
.fu-agenda .fu-cal__grid > thead > tr,
.fu-agenda .fu-cal__grid > tbody > tr,
.fu-agenda .fu-cal__grid > thead > tr > th,
.fu-agenda .fu-cal__grid > tbody > tr > td {
	border: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	line-height: inherit;
	vertical-align: middle;
}

.fu-agenda .fu-cal__grid > thead > tr > th {
	padding: 8px 0 12px;
}

.fu-agenda .fu-cal__grid > tbody > tr > td {
	padding: 2px;
}

/* --------------------------------------------------------- Fondo a sangre -- */

/* El fondo de la banda llega de borde a borde de la ventana, pero el contenido
   sigue limitado a 1440px. Útil cuando el contenedor de Elementor va «boxed».
   Se activa con el atributo ancho_completo="si". */

.fu-agenda--sangre .fu-agenda__calendar-band,
.fu-agenda--sangre .fu-agenda__listing {
	/* La banda se estira hasta los bordes de la ventana. No le ponemos padding:
	   de centrar y limitar el contenido ya se encarga .fu-agenda__inner. */
	margin-inline: calc(50% - 50vw);
}

/* 100vw incluye la barra de desplazamiento, así que recortamos el sobrante.
   Sólo por encima del breakpoint móvil: ahí el panel de filtros va en
   position:fixed y un contexto de recorte se lo comería. */
@media (min-width: 641px) {
	.fu-agenda--sangre {
		overflow-x: clip;
	}
}

/* ---------------------------------------------------------------- Hero -- */

/* Cabecera del Figma: el titular en mayúsculas y, 6 px por debajo, una línea
   que ocupa todo el ancho del contenido. El tamaño del texto cambia por marco:
   76 px a 1440, 48 a 768 y 31 a 375. */

.fu-agenda__hero {
	max-inline-size: 1440px;
	margin-inline: auto;
	margin-block-end: 40px;
	padding: 56px var(--fu-gutter) 0;
}

.fu-agenda__title {
	font-size: var(--fu-h-xl);
	font-weight: 400;          /* Manrope Regular */
	line-height: 1;
	letter-spacing: var(--fu-ls-h);
	margin: 0;
	text-transform: uppercase;
	color: var(--fu-ink);
}

.fu-agenda__hero::after {
	content: "";
	display: block;
	block-size: 1px;
	margin-block-start: 6px;
	background: var(--fu-ink);
}

/* ------------------------------------------------------ Banda calendario -- */

.fu-agenda__calendar-band {
	background: var(--fu-band);
	padding-block: 56px;
}

.fu-agenda__section-title {
	font-size: var(--fu-h-m);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.5px;
	margin: 0;
}

.fu-agenda__section-lead {
	font-size: var(--fu-p1);
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	color: var(--fu-ink-soft);
	margin: 8px 0 0;
}

.fu-agenda__calendar-slot,
.fu-agenda__day-slot {
	display: flex;
	min-inline-size: 0;
}

.fu-agenda__calendar-slot > *,
.fu-agenda__day-slot > * {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.fu-agenda__calendar-layout {
	display: grid;
	grid-template-columns: var(--fu-side-col) minmax(0, 1fr);
	gap: 40px;
	margin-top: 32px;
	align-items: stretch;
}

/* ------------------------------------------------------------ Calendario -- */

.fu-cal {
	display: flex;
	flex-direction: column;
	background: var(--fu-bg);
	border-radius: var(--fu-radius);
	padding: 20px;
	min-block-size: var(--fu-side-height);
}

.fu-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.fu-cal__title {
	font-size: 1.375rem;
	font-weight: 500;
	letter-spacing: var(--fu-ls-hxs);
	margin: 0;
}

.fu-cal__nav {
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	border: 1px solid var(--fu-ink);
	background: transparent;
	color: var(--fu-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.fu-cal__nav:hover,
.fu-cal__nav:focus-visible {
	background: var(--fu-ink);
	color: var(--fu-bg);
}

.fu-cal__grid {
	inline-size: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.fu-cal__grid th {
	font-size: var(--fu-p2);
	font-weight: 500;
	color: var(--fu-cal-head);
	padding: 8px 0 12px;
	text-align: center;
}

.fu-cal__cell {
	padding: 2px;
	text-align: center;
	vertical-align: middle;
	inline-size: 14.2857%;
}

/* Ojo con la especificidad de aquí abajo. El tema declara «.elementor-kit-9 a»
   con tamaño de letra propio (14 px, y 10 px por debajo de 768). Eso puntúa
   0,1,1 y le gana a una sola clase, así que todo elemento de la agenda que sea
   un enlace —los días del calendario, los chips de sede, la paginación— lleva
   el «.fu-agenda» delante para subir a 0,2,0 y quedarse con su tamaño. */

.fu-agenda .fu-cal__day {
	position: relative;
	inline-size: 44px;
	block-size: 44px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--fu-cal-mute);
	font: inherit;
	font-size: var(--fu-p1);
	font-size: var(--fu-p1);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fu-cal__day.is-active {
	color: var(--fu-ink);
	font-weight: 600;
}

.fu-cal__day.is-today {
	border-color: var(--fu-ink);
	color: var(--fu-ink);
}

.fu-cal__day:hover,
.fu-cal__day:focus-visible {
	background: rgba(24, 37, 45, .08);
	color: var(--fu-ink);
}

/* Los días sin eventos se pintan igual que en el Figma, pero no son enlaces:
   ni puntero, ni hover, ni foco de teclado. */
.fu-cal__day.is-empty {
	cursor: default;
	pointer-events: none;
}

.fu-cal__day.is-empty:hover {
	background: transparent;
	color: var(--fu-cal-mute);
}

.fu-cal__day.is-selected,
.fu-cal__day.is-selected:hover {
	background: var(--fu-ink);
	border-color: var(--fu-ink);
	color: var(--fu-white);
}

.fu-cal__num {
	line-height: 1;
}

.fu-cal__dot {
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: currentColor;
}

.fu-cal__day:not(.is-selected) .fu-cal__dot {
	background: var(--fu-ink);
}

.fu-cal__legend {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Empuja la leyenda al fondo de la tarjeta, como en el diseño. */
	margin: auto 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--fu-line-soft);
	font-size: var(--fu-p2);
	color: var(--fu-ink-soft);
}

.fu-cal__dot--legend {
	background: var(--fu-ink);
}

/* -------------------------------------------------------- Panel del día -- */

.fu-day {
	display: flex;
	flex-direction: column;
	background: var(--fu-bg);
	border-radius: var(--fu-radius);
	padding: 32px;
	/* En el Figma las dos tarjetas miden 472 px de alto en escritorio, tablet y
	   móvil. Si hay más eventos de los que caben, la lista hace scroll en vez de
	   estirar el bloque. */
	min-block-size: var(--fu-side-height);
	max-block-size: var(--fu-side-height);
}

.fu-day__title {
	font-size: 1.1875rem;      /* 19 */
	font-weight: 500;
	letter-spacing: -0.5px;
	margin: 0;
}

.fu-day__count {
	font-size: var(--fu-p1);
	letter-spacing: var(--fu-ls-p1);
	color: var(--fu-ink-soft);
	margin: 4px 0 24px;
}

.fu-day__empty {
	font-size: var(--fu-p1);
	color: var(--fu-ink-soft);
	margin: 0;
	padding-block: 24px;
	border-top: 1px solid var(--fu-line-soft);
}

.fu-day__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-block-size: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.fu-day__list::-webkit-scrollbar {
	inline-size: 6px;
}

.fu-day__list::-webkit-scrollbar-thumb {
	background: var(--fu-line);
	border-radius: 999px;
}

.fu-day__item + .fu-day__item {
	border-top: 1px solid var(--fu-line-soft);
}

.fu-day__item:last-child {
	border-bottom: 1px solid var(--fu-line-soft);
}

.fu-day__link {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 24px;
	align-items: start;
	gap: 16px;
	padding-block: 20px;
	text-decoration: none;
	color: inherit;
}

.fu-day__link:hover .fu-day__event-title,
.fu-day__link:focus-visible .fu-day__event-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fu-day__time {
	font-size: var(--fu-p1);
	font-weight: 500;
	letter-spacing: var(--fu-ls-p1);
	white-space: nowrap;
}

.fu-day__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-inline-size: 0;
}

.fu-day__cycle {
	font-size: var(--fu-p2);
	color: var(--fu-ink-soft);
}

.fu-day__event-title {
	font-size: 1.0625rem;      /* 17 */
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: var(--fu-ls-hxs);
	/* El Figma lo limita a dos líneas: con 1.400 eventos hay títulos larguísimos
	   y sin tope descuadran la altura fija de la tarjeta. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fu-day__venue,
.fu-card__venue {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	color: var(--fu-ink-soft);
	/* Una sola línea: el nombre del centro más la ciudad se va de madre en los
	   centros con nombre largo. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fu-day__arrow {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 2px;
	transition: transform .18s ease;
}

.fu-day__link:hover .fu-day__arrow {
	transform: translateX(3px);
}

.fu-day__cancelled,
.fu-card__cancelled {
	align-self: flex-start;
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #A3342B;
}

.fu-day__item.is-cancelled .fu-day__event-title,
.fu-card.is-cancelled .fu-card__title {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* ---------------------------------------------------------- Listado head -- */

.fu-agenda__listing {
	padding-block: var(--fu-pad-block) 96px;
}

/* Cuando cada bloque va en su propio shortcode, cada uno trae su respiración
   y ninguno depende de que el otro esté presente. */
.fu-agenda--calendario .fu-agenda__calendar-band {
	padding-block: 56px;
}

.fu-agenda--listado .fu-agenda__listing {
	padding-block: var(--fu-pad-block);
}

.fu-agenda__listing-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.fu-agenda__listing-tools {
	display: flex;
	align-items: center;
	gap: 24px;
	position: relative;
}

.fu-agenda__count {
	font-size: var(--fu-p2);
	font-weight: 400;
	letter-spacing: var(--fu-ls-p2);
	color: var(--fu-ink-soft);
	margin: 0;
	white-space: nowrap;
}

/* El total («78 eventos») va a 22 px, que es Other/Data del Figma. La palabra
   «Mostrando» que lo precede se queda pequeña, como en el diseño. */
.fu-agenda__count strong {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--fu-ink);
}

.fu-agenda__count strong {
	color: var(--fu-ink);
	font-weight: 700;
}

/* ----------------------------------------------------------------- Chips -- */

.fu-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--fu-label);
	font-weight: 500;
	letter-spacing: var(--fu-ls-chip);
	line-height: 1.2;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.fu-chip--categoria {
	background: var(--fu-chip-bg, var(--fu-band));
	color: var(--fu-ink);
	padding: 5px 12px;
	font-weight: 500;
	cursor: default;
}

.fu-agenda .fu-chip--sede {
	background: transparent;
	border-color: var(--fu-ink);
	color: var(--fu-ink);
	padding: 9px 18px;
	font-size: var(--fu-p1);
	letter-spacing: var(--fu-ls-p1);
	font-weight: 500;
}

.fu-chip--sede:hover,
.fu-chip--sede:focus-visible {
	background: rgba(24, 37, 45, .08);
}

.fu-chip--sede.is-active {
	background: var(--fu-ink);
	border-color: var(--fu-ink);
	color: var(--fu-white);
}

.fu-chip--applied {
	background: var(--fu-white);
	border-color: var(--fu-line);
	color: var(--fu-ink);
	padding: 7px 12px;
	font-weight: 500;
}

.fu-chip--applied:hover {
	border-color: var(--fu-ink);
}

.fu-sedes {
	margin-top: 32px;
}

.fu-sedes__label {
	font-size: var(--fu-label);
	font-weight: 600;
	letter-spacing: var(--fu-ls-label);
	text-transform: uppercase;
	color: var(--fu-ink-soft);
	margin: 0 0 12px;
}

.fu-sedes__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------- Botones -- */

.fu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	border: 1px solid transparent;
	padding: 12px 24px;
	font-family: inherit;
	font-size: var(--fu-p2);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, opacity .16s ease;
}

.fu-btn--dark {
	background: var(--fu-ink);
	color: var(--fu-white);
}

.fu-btn--dark:hover,
.fu-btn--dark:focus-visible {
	background: #24373F;
}

/* --------------------------------------------------------------- Filtros -- */

/* El panel se ancla a la fila de herramientas, no al botón, para que ocupe
   todo el ancho del contenido como en el diseño. */
.fu-filters {
	position: static;
}

.fu-filters__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-inline-size: 250px;
	padding: 12px 18px;
	border-radius: 999px;
	border: 1px solid var(--fu-line);
	background: var(--fu-white);
	color: var(--fu-ink);
	font-family: inherit;
	font-size: var(--fu-p2);
	font-weight: 600;
	letter-spacing: var(--fu-ls-chip);
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.fu-filters__toggle:hover {
	border-color: var(--fu-ink);
}

.fu-filters__toggle[aria-expanded="true"],
.fu-filters__toggle.has-filters {
	background: var(--fu-ink);
	border-color: var(--fu-ink);
	color: var(--fu-white);
}

.fu-filters__badge,
.fu-select__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 20px;
	block-size: 20px;
	padding-inline: 6px;
	border-radius: 999px;
	background: var(--fu-white);
	color: var(--fu-ink);
	font-size: 0.75rem;
	font-weight: 700;
}

.fu-select__badge {
	background: var(--fu-ink);
	color: var(--fu-white);
}

.fu-filters__chevron {
	display: inline-flex;
	transition: transform .18s ease;
}

.fu-filters__toggle[aria-expanded="true"] .fu-filters__chevron {
	transform: rotate(180deg);
}

.fu-filters__panel {
	position: absolute;
	z-index: 30;
	inset-inline-end: 0;
	inset-block-start: calc(100% + 12px);
	inline-size: min(1120px, calc(100vw - 2 * var(--fu-gutter)));
	background: var(--fu-white);
	border: 1px solid var(--fu-line);
	border-radius: var(--fu-radius);
	padding: 24px;
	box-shadow: 0 18px 40px rgba(24, 37, 45, .10);
}

.fu-filters__panel[hidden] {
	display: none;
}

form.fu-filters__panel {
	margin: 0;
}

.fu-filters__applied-label,
.fu-filters__group-label {
	font-size: var(--fu-label);
	font-weight: 600;
	letter-spacing: var(--fu-ls-label);
	text-transform: uppercase;
	color: var(--fu-ink-soft);
	margin: 0 0 10px;
}

.fu-filters__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
}

.fu-filters__groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.fu-filters__group {
	position: relative;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.fu-filters__group > legend {
	padding: 0;
}

.fu-select__trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	inline-size: 100%;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var(--fu-line);
	background: var(--fu-white);
	color: var(--fu-ink);
	font-family: inherit;
	font-size: var(--fu-p2);
	font-weight: 500;
	letter-spacing: var(--fu-ls-chip);
	cursor: pointer;
	text-align: start;
}

.fu-select__trigger > span:first-child {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fu-select__trigger:hover,
.fu-select__trigger.has-value {
	border-color: var(--fu-ink);
}

.fu-select__trigger[aria-expanded="true"] .fu-agenda-icon--chevron {
	transform: rotate(180deg);
}

.fu-select__list {
	position: absolute;
	z-index: 5;
	inset-inline: 0;
	inset-block-start: calc(100% + 6px);
	max-block-size: 280px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: var(--fu-white);
	border: 1px solid var(--fu-line);
	border-radius: var(--fu-radius-sm);
	box-shadow: 0 12px 28px rgba(24, 37, 45, .12);
}

.fu-select__list[hidden] {
	display: none;
}

.fu-select__option label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: var(--fu-p2);
	cursor: pointer;
}

.fu-select__option label:hover {
	background: var(--fu-bg-soft);
}

.fu-select__option input {
	inline-size: 16px;
	block-size: 16px;
	accent-color: var(--fu-ink);
	flex: none;
}

.fu-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--fu-line-soft);
}

.fu-filters__clear {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 6px 0;
	font-family: inherit;
	font-size: var(--fu-p2);
	color: var(--fu-ink-soft);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fu-filters__clear:hover:not(:disabled) {
	color: var(--fu-ink);
}

.fu-filters__clear:disabled,
.fu-filters__clear.is-disabled {
	opacity: .4;
	cursor: default;
	text-decoration: none;
	pointer-events: none;
}

/* --------------------------------------------------------------- Rejilla -- */

.fu-agenda__results {
	margin-top: 32px;
	transition: opacity .2s ease;
}

.fu-agenda.is-loading .fu-agenda__results,
.fu-agenda__calendar-layout.is-loading {
	opacity: .45;
	pointer-events: none;
}

.fu-agenda__calendar-layout {
	transition: opacity .2s ease;
}

.fu-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--fu-gap);
	margin: 0;
	padding: 0;
}

.fu-grid__item {
	display: flex;
}

.fu-card {
	inline-size: 100%;
	max-inline-size: 406px;
	background: var(--fu-white);
	border-radius: var(--fu-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.fu-card:hover {
	box-shadow: 0 14px 32px rgba(24, 37, 45, .12);
	transform: translateY(-2px);
}

.fu-card__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	text-decoration: none;
	color: inherit;
}

.fu-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--fu-bg-soft);
}

.fu-card__media img,
.fu-card__placeholder {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

.fu-card__placeholder {
	background: linear-gradient(135deg, var(--fu-band), var(--fu-bg-soft));
}

.fu-card:hover .fu-card__media img {
	transform: scale(1.04);
}

.fu-card__featured {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--fu-accent);
	color: var(--fu-ink);
	font-size: var(--fu-label);
	font-weight: 600;
}

.fu-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 16px 16px 20px;
}

.fu-card__date {
	/* Las abreviaturas ya vienen en mayúsculas desde PHP: no forzamos
	   text-transform para que la «h» de «21:00 h» siga en minúscula. */
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .3px;
	color: var(--fu-ink);
}

.fu-card__title {
	font-size: var(--fu-h-xs);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--fu-ls-hxs);
	color: var(--fu-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fu-card__link:hover .fu-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------ Sin eventos -- */

.fu-agenda__empty {
	text-align: center;
	padding: 64px 24px;
	background: var(--fu-white);
	border: 1px dashed var(--fu-line);
	border-radius: var(--fu-radius);
}

.fu-agenda__empty-title {
	font-size: var(--fu-h-xs);
	font-weight: 500;
	margin: 0 0 8px;
}

.fu-agenda__empty-text {
	font-size: var(--fu-p2);
	color: var(--fu-ink-soft);
	margin: 0 0 20px;
}

/* ------------------------------------------------------------ Paginación -- */

.fu-pager {
	margin-top: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.fu-pager__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.fu-pager__pages {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}

.fu-agenda .fu-pager__step,
.fu-agenda .fu-pager__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-inline-size: 40px;
	block-size: 40px;
	padding-inline: 14px;
	border-radius: 999px;
	border: 1px solid var(--fu-ink);
	background: var(--fu-bg);
	color: var(--fu-ink);
	font-family: inherit;
	font-size: var(--fu-p1);
	letter-spacing: var(--fu-ls-p1);
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.fu-pager__page {
	padding-inline: 0;
}

.fu-pager__step:hover:not(:disabled),
.fu-pager__page:hover:not(.is-current) {
	border-color: var(--fu-ink);
	background: rgba(24, 37, 45, .06);
}

.fu-pager__page.is-current {
	background: var(--fu-ink);
	border-color: var(--fu-ink);
	color: var(--fu-white);
	font-weight: 600;
}

.fu-pager__step:disabled,
.fu-pager__step.is-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.fu-pager__gap {
	padding-inline: 6px;
	color: var(--fu-ink-mute);
}

.fu-pager__compacto {
	display: none;
	font-size: var(--fu-p1);
	font-weight: 600;
	margin: 0;
}

.fu-pager__summary {
	font-size: var(--fu-p1);
	letter-spacing: var(--fu-ls-p1);
	color: var(--fu-ink-soft);
	margin: 0;
}

/* --------------------------------------------------------------- Tablet -- */

/* Referencia del Figma: marco de 768 px, gutter 64, calendario y panel del día
   APILADOS y los dos a ancho completo (640), 472 px de alto cada uno y 28 de
   separación. Rejilla de 2 columnas con 32 de hueco. */

@media (max-width: 1000px) {
	.fu-agenda {
		--fu-gutter: 64px;
		--fu-pad-block: 48px;
		--fu-h-xl: 3rem;          /* 48 — marco de 768 */
	}

	.fu-agenda__hero {
		padding-block-start: 56px;
	}

	.fu-agenda__calendar-band {
		padding-block: 48px;
	}

	.fu-agenda__calendar-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.fu-cal,
	.fu-day {
		max-inline-size: none;
	}

	.fu-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fu-card {
		max-inline-size: none;
	}

	.fu-filters__panel {
		inline-size: min(720px, calc(100vw - 2 * var(--fu-gutter)));
	}

	.fu-filters__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- Móvil -- */

/* Referencia del Figma: marco de 375 px, gutter 24, contenido 327. El calendario
   y el panel del día siguen a 472 px de alto. La paginación cambia de formato. */

@media (max-width: 640px) {
	.fu-agenda {
		--fu-gutter: 24px;
		--fu-pad-block: 40px;
		--fu-gap: 16px;
		--fu-h-xl: 1.9375rem;     /* 31 — marco de 375 */
	}

	.fu-agenda__hero {
		margin-block-end: 32px;
		padding-block-start: 40px;
	}

	.fu-agenda__calendar-band {
		padding-block: 40px;
	}

	.fu-cal,
	.fu-day {
		padding: 20px;
	}

	.fu-agenda .fu-cal__day {
		inline-size: 40px;
		block-size: 40px;
		font-size: var(--fu-p2);
	}

	.fu-cal__nav {
		inline-size: 40px;
		block-size: 40px;
	}

	.fu-cal__title {
		font-size: var(--fu-h-xs);
	}

	/* Fila del día: la hora pasa arriba y el contenido ocupa todo el ancho. */
	.fu-day__link {
		grid-template-columns: minmax(0, 1fr) 20px;
		gap: 8px 12px;
		padding-block: 16px;
	}

	.fu-day__time {
		grid-column: 1 / -1;
		font-size: var(--fu-p2);
		color: var(--fu-ink-soft);
	}

	.fu-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fu-agenda__listing-head {
		flex-direction: column;
		align-items: stretch;
	}

	.fu-agenda__listing-tools {
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
	}

	.fu-agenda__count {
		white-space: normal;
	}

	.fu-filters__panel {
		position: fixed;
		inset: auto 0 0 0;
		inline-size: 100%;
		max-block-size: 85vh;
		overflow-y: auto;
		border-radius: var(--fu-radius) var(--fu-radius) 0 0;
		box-shadow: 0 -12px 40px rgba(24, 37, 45, .18);
	}

	.fu-filters__groups {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Antes esto hacía scroll lateral en móvil. El QA de diseño lo marca como
	   «sin scroll lateral», así que los chips se envuelven en todos los tamaños. */
	.fu-sedes__list {
		flex-wrap: wrap;
	}

	.fu-chip--sede {
		white-space: nowrap;
	}

	/* Paginación móvil del Figma: el resumen arriba, y debajo dos flechas
	   circulares con «Página X de Y» en medio, sin la lista de números. */
	.fu-pager {
		gap: 16px;
	}

	.fu-pager__summary {
		order: -1;
	}

	.fu-pager__nav {
		inline-size: 100%;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.fu-pager__pages {
		display: none;
	}

	.fu-pager__compacto {
		display: block;
	}

	.fu-pager__step {
		inline-size: 44px;
		min-inline-size: 44px;
		block-size: 44px;
		padding-inline: 0;
		border-radius: 50%;
	}

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

/* ------------------------------------------------------- Móviles pequeños -- */

@media (max-width: 360px) {
	.fu-agenda {
		--fu-gutter: 16px;
	}

	.fu-cal,
	.fu-day {
		padding: 16px;
	}

	.fu-agenda .fu-cal__day {
		inline-size: 36px;
		block-size: 36px;
	}
}

/* ---------------------------------------------------- Foco y movimiento -- */

.fu-agenda :focus-visible {
	outline: 2px solid var(--fu-ink);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.fu-agenda *,
	.fu-agenda *::before,
	.fu-agenda *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* =========================================================================
   FICHA DE EVENTO  ·  [fu_agenda_evento]
   Figma: «Ficha de evento · una fecha» (2483:1580) y
          «Ficha de evento · larga duración» (2591:24634).
   Marco de 1440: gutter 80, cuerpo 1280 = lectura 816 + rail 400, gap 64.
   ========================================================================= */

.fu-ficha {
	--fu-lectura: 816px;
	--fu-rail: 400px;
	--fu-cuerpo-gap: 64px;

	padding-block: 40px 96px;

	/* A diferencia de la agenda, la ficha no pinta banda de color: se apoya en el
	   fondo de la página, que es lo que hace que el bloque de datos (yellow/100)
	   se lea como una caja, igual que en el Figma. */
	background: transparent;
}

.fu-ficha .fu-agenda__inner {
	display: flex;
	flex-direction: column;
}

.fu-ficha.fu-agenda--sangre {
	margin-inline: calc(50% - 50vw);
}

/* ------------------------------------------------------------- Migas -- */

.fu-ficha__migas {
	margin-block-end: 40px;
}

.fu-agenda a.fu-ficha__volver {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--fu-ink);
	font-size: var(--fu-label);
	font-weight: 600;
	letter-spacing: var(--fu-ls-label);
	line-height: 1.3;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fu-agenda a.fu-ficha__volver:hover {
	opacity: .7;
}

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

.fu-ficha__cabecera {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-block-end: 16px;
	border-block-end: 1px solid var(--fu-ink);
	margin-block-end: 40px;
}

.fu-ficha__etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
}

.fu-chip--cancelado {
	background: transparent;
	border-color: var(--fu-ink);
	color: var(--fu-ink);
	padding: 4px 11px;
	cursor: default;
}

.fu-ficha__titular {
	margin: 0;
	font-family: var(--fu-font);
	font-size: clamp(2rem, 3.4vw, 3rem); /* 48 en 1440, 31 en móvil */
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: var(--fu-ls-h);
	color: var(--fu-ink);
	text-wrap: balance;
}

/* ------------------------------------------------------------ Cuerpo -- */

.fu-ficha__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, var(--fu-lectura)) var(--fu-rail);
	gap: var(--fu-cuerpo-gap);
	align-items: start;
}

.fu-ficha__lectura {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

/* El rail acompaña al scroll. El desplazamiento superior no puede ser un número
   fijo: encima hay la cabecera fija del sitio y, con sesión iniciada, la barra de
   administración. El JavaScript mide lo que haya pegado arriba y escribe
   --fu-sticky-top; el 24px es sólo el valor de respaldo si no hay JavaScript. */
.fu-ficha__rail {
	position: sticky;
	top: calc(var(--fu-sticky-top, 0px) + 24px);
}

.fu-ficha__imagen {
	margin: 0 0 32px;
	border-radius: var(--fu-radius);
	overflow: hidden;
	background: var(--fu-bg-soft);
	aspect-ratio: 816 / 492;
}

.fu-ficha__imagen img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------- Descripción -- */

.fu-ficha__descripcion {
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	color: var(--fu-ink);
}

.fu-ficha__descripcion > :first-child {
	margin-block-start: 0;
}

.fu-ficha__descripcion > :last-child {
	margin-block-end: 0;
}

.fu-ficha__descripcion p {
	margin: 0 0 22px;
}

.fu-ficha__descripcion h2,
.fu-ficha__descripcion h3,
.fu-ficha__descripcion h4 {
	margin: 32px 0 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--fu-ls-h);
	color: var(--fu-ink);
}

.fu-ficha__descripcion h2 {
	font-size: 1.9375rem; /* 31 */
}

.fu-ficha__descripcion h3 {
	font-size: 1.625rem;
}

.fu-ficha__descripcion h4 {
	font-size: 1.25rem;
	font-weight: 600;
}

.fu-ficha__descripcion ul,
.fu-ficha__descripcion ol {
	margin: 0 0 22px;
	padding-inline-start: 1.25em;
	list-style: revert;
}

.fu-ficha__descripcion li {
	margin-block-end: 6px;
}

.fu-ficha__descripcion a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fu-ficha__descripcion img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--fu-radius-sm);
}

.fu-ficha__descripcion strong,
.fu-ficha__descripcion b {
	font-weight: 700;
}

/* ------------------------------------------------------------ Líneas -- */

.fu-ficha__linea {
	block-size: 1px;
	background: var(--fu-line);
	margin-block: 32px;
}

/* --------------------------------------------------- Bloque de datos -- */

.fu-ficha__datos {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px;
	border-radius: var(--fu-radius);
	background: var(--fu-bg);
}

.fu-datos {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.fu-datos dt,
.fu-datos dd {
	margin: 0;
}

.fu-datos__etiqueta {
	font-size: var(--fu-label);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--fu-ls-label);
	color: var(--fu-ink);
	opacity: .65;
}

.fu-datos__cuando {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--fu-ink);
}

.fu-datos__cuando .fu-datos__valor {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fu-datos__fecha {
	font-size: 2rem; /* Heading/M 32 */
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.fu-datos__hora {
	font-size: 1.375rem; /* Other/Data 22 */
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
}

.fu-datos__aviso {
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	opacity: .7;
}

.fu-datos__separador {
	block-size: 1px;
	background: var(--fu-line);
}

.fu-datos__fila {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	column-gap: 12px;
	row-gap: 3px;
	align-items: start;
	color: var(--fu-ink);
}

.fu-datos__icono {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 1px;
	color: var(--fu-ink);
}

.fu-datos__fila .fu-datos__etiqueta {
	grid-column: 2;
	grid-row: 1;
}

.fu-datos__fila .fu-datos__valor {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------- Reservar plaza -- */

.fu-agenda a.fu-ficha__reservar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: 100%;
	padding: 12px 20px;
	border: 1px solid var(--fu-ink);
	border-radius: 999px;
	background: var(--fu-white);
	color: var(--fu-ink);
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.fu-agenda a.fu-ficha__reservar:hover,
.fu-agenda a.fu-ficha__reservar:focus-visible {
	background: var(--fu-ink);
	color: var(--fu-white);
}

/* ----------------------------------------------------------- Galería -- */

.fu-galeria {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fu-galeria__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	border-radius: var(--fu-radius);
}

.fu-galeria__pista::-webkit-scrollbar {
	display: none;
}

.fu-galeria__item {
	margin: 0;
	scroll-snap-align: start;
	border-radius: var(--fu-radius);
	overflow: hidden;
	background: var(--fu-bg-soft);
	aspect-ratio: 811 / 420;
}

.fu-galeria__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.fu-galeria__controles {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.fu-galeria__contador {
	margin: 0;
	font-size: var(--fu-p2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--fu-ls-p2);
	color: var(--fu-ink);
	opacity: .7;
}

.fu-galeria__flechas {
	display: flex;
	gap: 16px;
}

.fu-agenda a.fu-galeria__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid var(--fu-ink);
	border-radius: 999px;
	color: var(--fu-ink);
	text-decoration: none;
	transition: background-color .16s ease, color .16s ease;
}

.fu-agenda a.fu-galeria__flecha:hover,
.fu-agenda a.fu-galeria__flecha:focus-visible {
	background: var(--fu-ink);
	color: var(--fu-white);
}

/* --------------------------------------------------------- Compartir -- */

.fu-ficha__compartir {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding-block: 16px;
}

.fu-agenda .fu-ficha__compartir-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fu-ink);
	font-family: inherit;
	font-size: 1.0625rem; /* 17 */
	font-weight: 500;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.fu-agenda .fu-ficha__compartir-boton:hover {
	opacity: .7;
}

/* ----------------------------------------------- Eventos relacionados -- */

.fu-relacionados {
	margin-block-start: 40px;
}

.fu-relacionados__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 24px;
}

.fu-relacionados__titulo {
	margin: 0;
	font-family: var(--fu-font);
	font-size: 1.9375rem; /* 31 */
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: var(--fu-ls-h);
	color: var(--fu-ink);
}

.fu-agenda a.fu-boton-linea {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 10px 20px;
	border: 1px solid var(--fu-ink);
	border-radius: 999px;
	color: var(--fu-ink);
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s ease, color .16s ease;
}

.fu-agenda a.fu-boton-linea:hover,
.fu-agenda a.fu-boton-linea:focus-visible {
	background: var(--fu-ink);
	color: var(--fu-white);
}

.fu-relacionados__linea {
	block-size: 1px;
	background: var(--fu-line);
	margin-block-end: 24px;
}

.fu-relacionados__rejilla {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

/* ------------------------------------------------------- Responsive -- */

/* 1000: el rail deja de caber al lado. Baja entero debajo del título, por
   delante de la descripción, que es lo que pide el Figma en móvil. */
@media (max-width: 1000px) {
	.fu-ficha {
		--fu-cuerpo-gap: 32px;
		padding-block: 32px 72px;
	}

	.fu-ficha__cuerpo {
		grid-template-columns: minmax(0, 1fr);
	}

	.fu-ficha__rail {
		position: static;
		order: -1;
		margin-block-end: 8px;
	}

	.fu-relacionados__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.fu-ficha {
		padding-block: 24px 56px;
	}

	.fu-ficha__migas {
		margin-block-end: 24px;
	}

	.fu-ficha__cabecera {
		margin-block-end: 28px;
	}

	.fu-ficha__imagen {
		margin-block-end: 24px;
		border-radius: var(--fu-radius-sm);
	}

	.fu-ficha__datos {
		padding: 20px;
	}

	.fu-datos__fecha {
		font-size: 1.625rem;
	}

	.fu-datos__hora {
		font-size: 1.25rem;
	}

	.fu-ficha__linea {
		margin-block: 24px;
	}

	.fu-galeria__item {
		border-radius: var(--fu-radius-sm);
	}

	.fu-relacionados__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}

	.fu-relacionados__cabecera {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 360px) {
	.fu-ficha__datos {
		padding: 16px;
	}

	.fu-agenda a.fu-galeria__flecha {
		inline-size: 40px;
		block-size: 40px;
	}
}

/* Flecha de mes desactivada: fuera de la ventana navegable no hay enlace, pero se
   deja el hueco para que la cabecera del calendario no se descoloque. */
.fu-cal__nav.is-disabled {
	opacity: .25;
	pointer-events: none;
	cursor: default;
}

/* --------------------------------------------------------------- Horario -- */

/* Sólo en los eventos de larga duración, y sólo si el campo está relleno.
   Figma: «Ficha de evento · larga duración», bloque Horario (2591:41790). */

.fu-horario {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-block-start: 32px;
}

.fu-horario__cabecera {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fu-horario__titulo {
	margin: 0;
	font-family: var(--fu-font);
	font-size: 1.9375rem; /* 31 */
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--fu-ls-h);
	color: var(--fu-ink);
}

.fu-horario__linea {
	block-size: 1px;
	background: var(--fu-line);
}

.fu-horario__tabla {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.fu-horario__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	padding-block: 14px;
	border-block-end: 1px solid var(--fu-line);
}

.fu-horario__fila:last-child {
	border-block-end: 0;
}

.fu-horario__tabla dt,
.fu-horario__tabla dd {
	margin: 0;
}

.fu-horario__dias {
	flex: 1 0 0;
	min-inline-size: 200px;
	max-inline-size: 280px;
	font-size: 1.0625rem; /* 17 */
	font-weight: 600;
	line-height: 1.3;
	color: var(--fu-ink);
}

.fu-horario__horas {
	flex: 1 0 0;
	min-inline-size: 220px;
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	color: var(--fu-ink);
}

/* Una línea sin separador es una nota suelta («Días sin actividad: …»): ocupa
   todo el ancho y no lleva raya, para que no parezca una fila más de la tabla. */
.fu-horario__fila--nota {
	border-block-end: 0;
	padding-block: 10px 0;
}

.fu-horario__nota {
	flex: 1 0 100%;
	font-size: var(--fu-p1);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: var(--fu-ls-p1);
	color: var(--fu-ink);
}

@media (max-width: 640px) {
	.fu-horario__titulo {
		font-size: 1.625rem;
	}

	.fu-horario__dias {
		flex-basis: 100%;
		max-inline-size: none;
		min-inline-size: 0;
	}

	.fu-horario__horas {
		min-inline-size: 0;
	}
}