/*
Theme Name: Muduex
Theme URI: https://muduex.com
Description: Tema de bloques independiente para el portal vecinal de Muduex, con estilo iOS: letra del sistema, tarjetas y listas agrupadas, acento granate y modo oscuro automático. Texto de 18 px como mínimo, contraste AA y objetivos de 48 px.
Author: Muduex.com
Version: 1.7.0
Requires at least: 6.8
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: muduex
*/

/* ==========================================================================
   1. Tokens (spec §6.1). theme.json's palette points at these variables, so
      blocks, patterns and this file all switch with the theme. The theme is
      data-tema («claro»/«oscuro») on <html>, set before the first paint by
      the inline <head> script (muduex-core Tema): by the Sun of Muduex or the
      visitor's choice, never by the system. Every dark rule hangs on
      :root[data-tema="oscuro"], itself (0,2,0); the override of
      .muduex-fondo-agrupado wraps that prefix in :where(), so it keeps the
      weight it had under the old media query. Print is
      always light: the dark tokens only apply on screen.
   ========================================================================== */

:root {
	color-scheme: light;
	--muduex-fondo: #ffffff;
	--muduex-fondo-agrupado: #f2f2f7;
	--muduex-tarjeta: #f2f2f7; /* on the reading background */
	--muduex-texto: #1d1d1f; /* 16.8:1 on #FFF */
	--muduex-texto-secundario: #636366; /* 6.0:1 on #FFF, 5.4:1 on #F2F2F7 */
	--muduex-acento: #8a1c1c; /* 9.3:1 on #FFF */
	--muduex-acento-contraste: #ffffff; /* 9.3:1 on the accent */
	--muduex-separador: #d1d1d6; /* decorative */
	--muduex-borde-campo: #8e8e93; /* 3.3:1 on #FFF (WCAG 1.4.11) */
	--muduex-tinte: color-mix(in srgb, var(--muduex-acento) 10%, transparent);
	--muduex-barra: color-mix(in srgb, var(--muduex-fondo) 96%, transparent); /* >= 95 %: the grey «no oficial» line holds 4.9:1 over black */
	--muduex-barra-solida: var(--muduex-fondo); /* opaque strip behind the «no oficial» line */
	--muduex-pestanas: color-mix(in srgb, var(--muduex-fondo) 96%, transparent); /* >= 95 %: grey labels hold 4.5:1 over black */
	/* Severity, the same in light and dark (AEMET levels, road pills): red
	   5.9:1, orange 8.3:1, yellow 12.1:1 with their text. */
	--muduex-peligro: #c0261d;
	--muduex-peligro-texto: #fff;
	--muduex-alerta: #ff9f0a;
	--muduex-alerta-texto: #1c1c1e;
	--muduex-precaucion: #ffd60a;
	--muduex-precaucion-texto: #1c1c1e;
	--muduex-radio: 14px;
	--muduex-radio-widget: 18px;
	--muduex-radio-control: 12px;
}

/* Grouped background (front page, Avisos, archives, search; also the footer):
   white cards on #F2F2F7. */
.muduex-fondo-agrupado {
	--muduex-tarjeta: #ffffff;
	--muduex-barra: color-mix(in srgb, var(--muduex-fondo-agrupado) 96%, transparent);
	--muduex-barra-solida: var(--muduex-fondo-agrupado);
	background-color: var(--muduex-fondo-agrupado);
}

@media screen {

	:root[data-tema="oscuro"] {
		color-scheme: dark;
	}

	:root[data-tema="oscuro"],
	:where(:root[data-tema="oscuro"]) .muduex-fondo-agrupado {
		--muduex-fondo: #000000;
		--muduex-fondo-agrupado: #000000;
		--muduex-tarjeta: #1c1c1e;
		--muduex-texto: #f5f5f7; /* 15.6:1 on #1C1C1E */
		--muduex-texto-secundario: #98989f; /* 5.9:1 on #1C1C1E */
		--muduex-acento: #ff8a80; /* 7.5:1 on #1C1C1E */
		--muduex-acento-contraste: #1c1c1e; /* 7.5:1 on the accent */
		--muduex-separador: #38383a;
		--muduex-borde-campo: #8e8e93; /* 5.2:1 on #1C1C1E */
	}
}

/* Without JavaScript (no data-tema) the colour tokens follow the system: the
   only rule left on the system preference, a copy of the block above. */
@media screen and (prefers-color-scheme: dark) {

	:root:not([data-tema]) {
		color-scheme: dark;
	}

	:root:not([data-tema]),
	:where(:root:not([data-tema])) .muduex-fondo-agrupado {
		--muduex-fondo: #000000;
		--muduex-fondo-agrupado: #000000;
		--muduex-tarjeta: #1c1c1e;
		--muduex-texto: #f5f5f7; /* 15.6:1 on #1C1C1E */
		--muduex-texto-secundario: #98989f; /* 5.9:1 on #1C1C1E */
		--muduex-acento: #ff8a80; /* 7.5:1 on #1C1C1E */
		--muduex-acento-contraste: #1c1c1e; /* 7.5:1 on the accent */
		--muduex-separador: #38383a;
		--muduex-borde-campo: #8e8e93; /* 5.2:1 on #1C1C1E */
	}
}

/* ==========================================================================
   1b. Paletas (spec 2026-11-02-portal-simple §16): data-paleta on <html>,
       set with data-tema by the head script (muduex-core Tema) before the
       first paint. «estandar» changes nothing. The colours are Okabe–Ito
       (Wong 2011) for «rojo-verde» and IBM Design's colour-blind-safe set
       for «azul-amarillo», darkened in linear RGB where text needs 4.5:1;
       the contrast table is in the spec and tests/js/paletas.test.cjs
       checks it. Forced colours override all of this.
       - rojo-verde (protanopia, deuteranopia): the accent turns blue (the
         dark red reads as near-black text), and the warning levels become a
         light-to-dark ramp, yellow / amber / rust.
       - azul-amarillo (tritanopia): red stays (its red-cyan axis is intact),
         so only the agenda categories change.
       Categories carry their colour inline (style="--cat"), so they are
       overridden with !important. Their dots also differ in shape, in every
       palette: colour is never the only cue.
   ========================================================================== */

html[data-paleta="rojo-verde"] {
	--muduex-acento: #005d93; /* 7.0:1 on #FFF, 6.3:1 on #F2F2F7 */
	--muduex-peligro: #863900; /* #FFF 8.1:1 */
	--muduex-alerta: #c78900; /* #1C1C1E 5.7:1 */
	--muduex-precaucion: #f0e442; /* #1C1C1E 12.9:1 */
}

@media screen {

	html[data-paleta="rojo-verde"][data-tema="oscuro"],
	:where(html[data-paleta="rojo-verde"][data-tema="oscuro"]) .muduex-fondo-agrupado {
		--muduex-acento: #56b4e9; /* 7.4:1 on #1C1C1E */
	}
}

html[data-paleta="rojo-verde"] :is([data-cat="fiestas"], [data-cats="fiestas"]) { --cat: #9a6900 !important; }
html[data-paleta="rojo-verde"] :is([data-cat="cultura"], [data-cats="cultura"]) { --cat: #0072b2 !important; }
html[data-paleta="rojo-verde"] :is([data-cat="deporte"], [data-cats="deporte"]) { --cat: #00835f !important; }
html[data-paleta="rojo-verde"] :is([data-cat="iglesia"], [data-cats="iglesia"]) { --cat: #1f4a61 !important; }
html[data-paleta="rojo-verde"] :is([data-cat="vecinos"], [data-cats="vecinos"]) { --cat: #4b470e !important; }
html[data-paleta="azul-amarillo"] :is([data-cat="fiestas"], [data-cats="fiestas"]) { --cat: #7c2b00 !important; }
html[data-paleta="azul-amarillo"] :is([data-cat="cultura"], [data-cats="cultura"]) { --cat: #4d6fc8 !important; }
html[data-paleta="azul-amarillo"] :is([data-cat="deporte"], [data-cats="deporte"]) { --cat: #9a6900 !important; }
html[data-paleta="azul-amarillo"] :is([data-cat="iglesia"], [data-cats="iglesia"]) { --cat: #463692 !important; }
html[data-paleta="azul-amarillo"] :is([data-cat="vecinos"], [data-cats="vecinos"]) { --cat: #d6257b !important; }

/* The shape of each category's dot (the pills, with the name, are the key):
   Fiestas ●, Cultura ■, Deporte ◆, Iglesia ▮, Vecinos ▬. All fit the 8 px
   box, so nothing moves. The chosen pill's tick (agenda) wins. */
:is(.muduex-punto[data-cats="cultura"], [data-cat="cultura"] .muduex-cat__punto),
:is(.muduex-punto[data-cats="deporte"], [data-cat="deporte"] .muduex-cat__punto) {
	border-radius: 1px;
}

:is(.muduex-punto[data-cats="deporte"], [data-cat="deporte"] .muduex-cat__punto) {
	transform: rotate(45deg) scale(0.85);
}

:is(.muduex-punto[data-cats="iglesia"], [data-cat="iglesia"] .muduex-cat__punto) {
	width: 4px;
	border-radius: 1px;
}

:is(.muduex-punto[data-cats="vecinos"], [data-cat="vecinos"] .muduex-cat__punto) {
	align-self: center;
	height: 4px;
	border-radius: 1px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

/* overflow-wrap: a word longer than its line («GuadalajaraDiario» at 320 px
   with the text at 200 %) breaks instead of widening the page. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
	overflow-wrap: break-word;
}

/* Links inside running text: thin underline. Lists, cards and buttons: none. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Focus ring: 3 px in the accent, 2 px offset, on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--muduex-acento);
	outline-offset: 2px;
}

/* Standalone links in main (not inside a sentence) are 48 px targets.
   Specificity (0,0,1) thanks to :where(): any component class (cards,
   widgets, buttons) sets its own box over this without excluding itself. */
:where(main) a:where(:not(p a)) {
	display: inline-block;
	max-width: 100%;
	min-height: 3rem;
	min-width: 3rem;
	padding-block: 0.45rem;
	box-sizing: border-box;
}

/* Only on phones and tablets / only on desktop (breakpoint 1024 px). */
@media (min-width: 1024px) {

	.muduex-solo-movil {
		display: none !important;
	}
}

@media (max-width: 1023.98px) {

	.muduex-solo-escritorio {
		display: none !important;
	}
}

/* ==========================================================================
   3. Header (spec §4.1–4.2): coat of arms + «Muduex» with «Portal vecinal
      no oficial» under the name, the desktop navigation, and the magnifier
      and the cog («Ajustes»). One row from 70rem; at 1024–1119 px the menu wraps
      onto a row of its own (blocks/menu/menu.css).
   ========================================================================== */

header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 20;
}

/* Up to 600 px WordPress lets the admin bar scroll away (position:
   absolute): the header sticks to the very top, with no gap for editors. */
@media screen and (max-width: 600px) {

	header.wp-block-template-part {
		top: 0;
	}
}

/* The header's height, for what must clear it (the anchors of
   blocks/indice): measured 49 px on phones and tablets, 113 px at
   1024–1119 px (two rows) and 57 px from 70rem; one pixel less, for its
   bottom border. The events calendar, blocks/agenda/lista.css,
   blocks/carreteras and blocks/tiempo set the same values on themselves. */
:root {
	--muduex-alto-cabecera: 48px;
}

@media (min-width: 1024px) and (max-width: 69.99rem) {

	:root {
		--muduex-alto-cabecera: 112px;
	}
}

@media (min-width: 70rem) {

	:root {
		--muduex-alto-cabecera: 56px;
	}
}

.muduex-barra {
	background-color: var(--muduex-barra);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--muduex-separador);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.muduex-barra {
		background-color: var(--muduex-fondo);
	}

	.muduex-fondo-agrupado .muduex-barra {
		background-color: var(--muduex-fondo-agrupado);
	}
}

@media (prefers-reduced-transparency: reduce) {

	.muduex-barra {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--muduex-fondo);
	}

	.muduex-fondo-agrupado .muduex-barra {
		background-color: var(--muduex-fondo-agrupado);
	}
}

.muduex-barra__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

/* Without the desktop navigation, a large text size moves the magnifier and
   the cog onto a second line (right-aligned) rather than off screen: their
   48 px targets grow with the text. */
@media (max-width: 63.99rem) {

	.muduex-barra__fila {
		flex-wrap: wrap;
	}

	.muduex-acciones {
		margin-left: auto;
	}
}

/* 320 px phones: a slightly narrower side padding gives the brand, the
   magnifier and the cog (48 px each) air with a large text size. */
@media (max-width: 22.49rem) {

	.muduex-barra.has-global-padding {
		padding-left: 12px; /* px: with a large text size the row needs every pixel */
		padding-right: 12px;
	}

	.muduex-barra__fila {
		column-gap: 0.25rem;
	}

	.muduex-marca {
		column-gap: 0.375rem;
	}
}

/* The layout's block gap would push the navigation 20 px down. */
.muduex-barra .muduex-barra__fila > * {
	margin-block: 0;
}

.muduex-marca {
	/* The coat of arms beside two lines: «Muduex» and, under it, «Portal
	   vecinal no oficial». The link (coat of arms and name, named «Muduex»)
	   spans both rows on a subgrid, so its 48 px target and its focus ring
	   take in the subtitle, which stays outside it: it is no part of the
	   link's name. A large text size shortens «Muduex» (…) and wraps the
	   subtitle before anything overflows, but never below the coat of arms
	   and «M…»: the link stays visible. */
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: center;
	column-gap: 0.5rem;
	min-width: 2.75rem;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.2;
}

.muduex-marca a {
	display: grid;
	grid-row: 1 / -1;
	grid-column: 1 / -1;
	grid-template-rows: subgrid;
	grid-template-columns: subgrid;
	min-height: 3rem;
	color: var(--muduex-texto);
	text-decoration: none;
}

.muduex-marca__nombre {
	grid-row: 1;
	grid-column: 2;
	align-self: end;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.muduex-marca__escudo {
	display: block;
	grid-row: 1 / -1;
	grid-column: 1;
	align-self: center;
	width: auto;
	height: 32px;
}

/* The grey subtitle sits straight on the bar, with no box of its own (a
   solid box looked lighter than the glass around it while scrolling): the
   bar is 96 % opaque, so even black content under it keeps the grey at
   4.9:1 (6.9:1 in the dark theme). Taps go through it to the brand link. */
.muduex-no-oficial {
	grid-row: 2;
	grid-column: 2;
	align-self: start;
	min-width: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--muduex-texto-secundario);
	pointer-events: none;
}

/* Header actions (pattern muduex/acciones): the magnifier and the cog. */
.muduex-acciones {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.5rem;
}

/* Phones: the magnifier and the cog side by side, 48 px each. */
@media (max-width: 39.99rem) {

	.muduex-acciones {
		gap: 0;
	}
}

@media (min-width: 1024px) {

	.muduex-marca__escudo {
		height: 40px;
	}

	.muduex-barra__fila {
		padding-block: 0.25rem;
	}

	/* The menu (muduex/menu, menu.css) gives way: the brand does not shrink
	   beside it, and its links wrap onto a second line before anything
	   scrolls sideways. */
	.muduex-barra__fila > .muduex-marca {
		flex-shrink: 0;
	}
}

/* One row (menu.css): a little less air between the brand, the menu and the
   actions, so the ten links fit beside them. */
@media (min-width: 70rem) {

	.muduex-barra__fila {
		column-gap: 0.75rem;
	}

	.muduex-acciones {
		gap: 0.25rem;
	}
}

/* ==========================================================================
   4. Footer, base: the text colour and the margins; the layout is in
      «Footer: útil y compacto», further down.
   ========================================================================== */

.muduex-pie {
	color: var(--muduex-texto);
}

.muduex-pie p {
	margin: 0;
}

.muduex-pie__nota {
	color: var(--muduex-texto-secundario);
}

/* Room at the end of the page for the cookies banner while it is open
   (muduex-core consentimiento.js sets the variable, and removes it on choose). */
html {
	padding-bottom: var(--reserva-cookies, 0);
}

@media print {

	html {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   4b. Tab bar and «Más» sheet (spec §4.1), phones and tablets only. The bar
       is 96 % opaque so the secondary-grey labels hold 4.5:1 over any content.
   ========================================================================== */

@media (max-width: 1023.98px) {

	body {
		padding-bottom: calc(3.75rem + 1px + env(safe-area-inset-bottom, 0px)); /* bar + its 1 px border */
	}
}

.muduex-pestanas {
	position: fixed;
	inset: auto 0 0;
	z-index: 30;
	display: flex;
	box-sizing: border-box;
	padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); /* landscape notch */
	background-color: var(--muduex-pestanas);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid var(--muduex-separador);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.muduex-pestanas {
		background-color: var(--muduex-fondo);
	}
}

@media (prefers-reduced-transparency: reduce) {

	.muduex-pestanas {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--muduex-fondo);
	}
}

.muduex-pestanas > a,
.muduex-pestanas > button {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	min-height: 3.75rem;
	margin: 0;
	padding: 0.25rem 0;
	box-sizing: border-box;
	border: 0;
	background: none;
	color: var(--muduex-texto-secundario);
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-decoration: none;
	cursor: pointer;
}

.muduex-pestanas svg {
	width: 26px;
	height: 26px;
	flex: none;
}

.muduex-pestanas span {
	max-width: 100%;
	white-space: nowrap;
}

/* «Mi Muduex» with a session: the initial of the name in an accent circle, the
   size of the icons. Hidden from assistive technology (the label is the name). */
.muduex-pestanas .muduex-pestanas__inicial {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--muduex-acento);
	color: var(--muduex-acento-contraste);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

@media (forced-colors: active) {

	.muduex-pestanas .muduex-pestanas__inicial {
		border: 1px solid CanvasText;
	}
}

/* «Servicios» stops fitting a fifth of the width below ~342 px: icons only
   there, the labels stay as the accessible names. */
@media (max-width: 341.98px) {

	.muduex-pestanas span:not(.muduex-pestanas__inicial) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

.muduex-pestanas [aria-current] {
	color: var(--muduex-acento);
}

.muduex-pestanas > :focus-visible {
	outline-offset: -4px;
}

/* «Volver arriba» (parts/footer.html, assets/js/arriba.js): a 48 px round
   button, bottom right, over the tab bar on phones. Shown (.is-visible) past
   one viewport of scroll; until then, and in print, out of sight and out of
   the tab order (visibility). Without JavaScript it keeps [hidden]. The ring
   fills with the share of the page scrolled: arriba.js sets the
   stroke-dashoffset of the circle, whose pathLength is 100. Below the tab
   bar (z-index 30) and the «Más» sheet (top layer). Colours from the tokens:
   the arrow and the ring in the accent, 8.5:1 on the light card and 7.5:1
   on the dark one (WCAG 1.4.11 asks 3:1). */
.muduex-arriba {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right, 0px));
	bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
	z-index: 25;
	display: block;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--muduex-tarjeta);
	box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
	color: var(--muduex-acento);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.75rem);
}

.muduex-arriba[hidden] {
	display: none;
}

.muduex-arriba.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (max-width: 1023.98px) {

	.muduex-arriba {
		bottom: calc(3.75rem + 1px + 1rem + env(safe-area-inset-bottom, 0px)); /* over the tab bar and its border */
	}
}

@media (min-width: 1024px) {

	.muduex-arriba {
		right: max(1.5rem, env(safe-area-inset-right, 0px));
		bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: no-preference) {

	.muduex-arriba {
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	.muduex-arriba.is-visible {
		transition-delay: 0s;
	}
}

.muduex-arriba__dibujo {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.muduex-arriba__pista {
	stroke: var(--muduex-separador);
}

/* From twelve o'clock, clockwise. */
.muduex-arriba__progreso {
	stroke: currentcolor;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transform: rotate(-90deg);
	transform-origin: 24px 24px;
}

.muduex-arriba__flecha {
	stroke: currentcolor;
}

:where(:root[data-tema="oscuro"]) .muduex-arriba {
	box-shadow: 0 0 0 1px var(--muduex-separador);
}

/* The focus target of the button: <main>, with tabindex="-1". The ring of
   the button showed where the focus was; the next Tab goes on from here. */
#wp--skip-link--target[tabindex="-1"]:focus {
	outline: none;
}

/* Windows High Contrast drops the shadow and the token colours. */
@media (forced-colors: active) {

	.muduex-arriba {
		border: 2px solid ButtonText;
		background-color: ButtonFace;
		color: ButtonText;
	}

	.muduex-arriba__pista {
		stroke: GrayText;
	}

	.muduex-arriba__progreso {
		stroke: Highlight;
	}
}

/* «Más» sheet: popover anchored to the bottom edge. */
.muduex-hoja {
	inset: auto 0 0;
	margin: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	max-height: 85dvh;
	overflow-y: auto;
	padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
	border: 0;
	border-top: 1px solid var(--muduex-separador);
	border-radius: 14px 14px 0 0;
	color: var(--muduex-texto);
	transition: transform 0.25s ease, opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
}

.muduex-hoja:popover-open {
	display: block;
	transform: none;
}

@starting-style {

	.muduex-hoja:popover-open {
		transform: translateY(100%);
	}
}

.muduex-hoja::backdrop {
	background-color: rgb(0 0 0 / 40%);
}

.muduex-hoja > * + * {
	margin-top: 1rem;
}

.muduex-hoja__tirador {
	width: 2.25rem;
	height: 5px;
	margin: 0 auto;
	border-radius: 3px;
	background-color: var(--muduex-separador);
}

.muduex-hoja__titulo {
	margin: 0.5rem 0 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.muduex-hoja .muduex-lista {
	margin-block: 1rem 0;
}

.muduex-hoja__cerrar {
	display: block;
	width: 100%;
	min-height: 3rem;
	border: 0;
	border-radius: var(--muduex-radio);
	background-color: var(--muduex-tarjeta);
	color: var(--muduex-acento);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	cursor: pointer;
}

/* «Instalar la app de Muduex» row of the sheet: an action, in the accent.
   Hidden when the site already runs as the installed app. */
.muduex-hoja .muduex-instalar > li > a {
	color: var(--muduex-acento);
	font-weight: 600;
}

@media (display-mode: standalone) {

	.muduex-instalar {
		display: none !important;
	}
}

/* ==========================================================================
   5. Components used by the templates and by later tasks.
   ========================================================================== */

/* Card: #F2F2F7 on the reading background, white on the grouped one. */
.muduex-tarjeta {
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
	padding: 1rem 1.25rem;
	color: var(--muduex-texto);
}

.muduex-tarjeta > :first-child {
	margin-top: 0;
}

.muduex-tarjeta > :last-child {
	margin-bottom: 0;
}

/* Uppercase label: 16 px semibold, the only exception to 18 px. */
.muduex-rotulo {
	margin: 0 0 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--muduex-texto-secundario);
}

/* Grouped list: rows (li > a) with hairline separators and a chevron. */
.muduex-lista,
.muduex-lista.wp-block-post-template {
	list-style: none;
	margin-inline: 0;
	margin-block-end: 0; /* the top margin is the layout's block gap */
	padding: 0 0 0 1rem;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
	overflow: hidden;
}

.muduex-lista > li {
	position: relative;
	margin: 0;
	padding: 0;
}

.muduex-lista > li + li {
	border-top: 1px solid var(--muduex-separador);
}

.muduex-lista > li > a {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	width: 100%;
	padding: 0.75rem 2.75rem 0.75rem 0;
	box-sizing: border-box;
	color: var(--muduex-texto);
	text-decoration: none;
}

.muduex-lista > li > a::after,
.muduex-lista--entradas > li::after {
	content: "";
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: -0.5625rem;
	background-color: var(--muduex-texto-secundario);
	-webkit-mask: url(assets/iconos/chevron.svg) center / contain no-repeat;
	mask: url(assets/iconos/chevron.svg) center / contain no-repeat;
	pointer-events: none;
}

/* Rows of posts (core/query): type label, title, date. The title link is
   stretched over the whole row so the row is one target. */
.muduex-lista--entradas > li {
	padding: 0.75rem 2.75rem 0.75rem 0;
}

.muduex-lista--entradas > li > * {
	margin: 0;
}

.muduex-lista--entradas .wp-block-post-title {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
}

/* The link keeps its own 48 px box (the a11y test measures the element). */
.muduex-lista--entradas .wp-block-post-title a {
	display: inline-block;
	min-height: 3rem;
	padding-block: 0.6rem;
	box-sizing: border-box;
	color: var(--muduex-texto);
	text-decoration: none;
}

.muduex-lista--entradas .wp-block-post-title a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.muduex-lista--entradas .wp-block-post-date {
	color: var(--muduex-texto-secundario);
	font-size: 1.125rem;
}

.muduex-lista--entradas .muduex-rotulo {
	margin-bottom: 0.125rem;
}

/* Secondary line under a post title: «{tipo_aviso} · {fecha}». */
.muduex-meta {
	color: var(--muduex-texto-secundario);
	font-size: 1.125rem;
}

.muduex-meta > * {
	margin: 0;
}

/* Widgets (front page): grid of cards, 2 columns on phones, 4 on desktop. */
.muduex-widgets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (min-width: 1024px) {

	.muduex-widgets {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.muduex-widget {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.25rem;
	min-height: 8.5rem;
	padding: 1rem;
	box-sizing: border-box;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio-widget);
	color: var(--muduex-texto);
	text-decoration: none;
}

.muduex-widget__rotulo {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--muduex-acento);
}

.muduex-widget__cifra {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.muduex-widget__texto {
	font-size: 1.125rem;
	line-height: 1.35;
	color: var(--muduex-texto-secundario);
}

/* «‹ Parent page» link at the top of a page. */
.muduex-volver {
	margin: 0 0 -0.5rem;
}

.muduex-volver a {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	min-width: 3rem;
	color: var(--muduex-acento);
	text-decoration: none;
}

/* Buttons: 50 px high, 12 px radius; filled accent, or accent tint. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 50px;
	min-width: 3rem;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.is-style-tinte .wp-element-button,
.wp-element-button.is-style-tinte,
.wp-block-button.is-style-tinte .wp-block-button__link {
	background-color: var(--muduex-tinte);
	color: var(--muduex-acento);
}

/* Pressed state: opacity 0.6 for 120 ms (cards, rows and buttons). */
.wp-element-button,
.wp-block-button__link,
.muduex-widget,
.muduex-lista > li > a {
	transition: opacity 120ms ease;
}

.wp-element-button:active,
.wp-block-button__link:active,
.muduex-widget:active,
.muduex-lista > li > a:active,
.muduex-lista--entradas > li:active {
	opacity: 0.6;
}

/* Fields and form buttons in main. */
main button,
main input[type="submit"] {
	min-height: 50px;
	min-width: 3rem;
	padding: 0.75rem 1.25rem;
	box-sizing: border-box;
	font: inherit;
	font-weight: 600;
	color: var(--muduex-acento-contraste);
	background-color: var(--muduex-acento);
	border: 0;
	border-radius: var(--muduex-radio-control);
	cursor: pointer;
}

main input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main textarea,
main select {
	min-height: 52px;
	max-width: 100%;
	padding: 0.625rem 0.875rem;
	box-sizing: border-box;
	font: inherit;
	color: var(--muduex-texto);
	background-color: var(--muduex-fondo);
	border: 1px solid var(--muduex-borde-campo);
	border-radius: var(--muduex-radio-control);
}

main input[type="checkbox"],
main input[type="radio"] {
	width: 1.5rem;
	height: 1.5rem;
	accent-color: var(--muduex-acento);
}

main label {
	display: block;
	font-weight: 600;
}

/* Search block: rounded field, button in the accent. */
.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__input {
	border-radius: var(--muduex-radio-control);
}

/* Query pagination: «Anteriores» / «Siguientes» as text buttons. */
.wp-block-query-pagination {
	margin-top: 1.25rem;
	gap: 0.5rem 1rem;
}

.wp-block-query-pagination a {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 0.25rem;
	color: var(--muduex-acento);
	font-weight: 600;
	text-decoration: none;
}

/* Images in pages: 14 px radius. */
main .wp-block-image img {
	border-radius: var(--muduex-radio);
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   The Events Calendar: its views read --tec-color-* from :root. Pointing the
   main ones at our tokens (on body, so they win over TEC's :root) keeps the
   agenda legible in dark mode. Full TEC restyle: spec §6.3, later task.
   ========================================================================== */

body {
	--tec-font-family-sans-serif: inherit;
	--tec-color-text-primary: var(--muduex-texto);
	--tec-color-text-primary-light: var(--muduex-texto-secundario);
	--tec-color-text-secondary: var(--muduex-texto-secundario);
	--tec-color-background: var(--muduex-fondo);
	--tec-color-background-secondary: var(--muduex-tarjeta);
	--tec-color-background-secondary-hover: var(--muduex-tarjeta);
	--tec-color-background-messages: var(--muduex-tarjeta);
	--tec-color-border-default: var(--muduex-separador);
	--tec-color-border-secondary: var(--muduex-separador);
	--tec-color-border-tertiary: var(--muduex-borde-campo);
	--tec-color-border-hover: var(--muduex-texto-secundario);
	--tec-color-border-active: var(--muduex-texto);
	--tec-color-accent-primary: var(--muduex-acento);
	--tec-color-accent-primary-hover: var(--muduex-acento);
	--tec-color-accent-primary-active: var(--muduex-acento);
	--tec-color-accent-primary-background: var(--muduex-tinte);
	--tec-color-accent-secondary: var(--muduex-texto);
	--tec-color-accent-secondary-hover: var(--muduex-texto);
	--tec-color-accent-secondary-active: var(--muduex-texto);
	--tec-color-icon-secondary: var(--muduex-texto-secundario);
	--tec-color-icon-primary: var(--muduex-texto-secundario);
	--tec-color-icon-primary-alt: var(--muduex-texto-secundario);
	--tec-color-icon-active: var(--muduex-texto);
	--tec-color-icon-focus: var(--muduex-acento);
	--tec-color-event-icon: var(--muduex-texto);
	--tec-color-event-icon-hover: var(--muduex-acento);
	--tec-color-link-accent-hover: var(--muduex-acento);
	/* TEC derives these on :root; redeclared so they follow the tokens. */
	--tec-color-text-events-title: var(--muduex-texto);
	--tec-color-text-event-title: var(--muduex-texto);
	--tec-color-text-event-date: var(--muduex-texto);
	--tec-color-text-secondary-event-date: var(--muduex-texto-secundario);
	--tec-color-link-primary: var(--muduex-texto);
	--tec-color-link-accent: var(--muduex-acento);
	--tec-color-button-primary: var(--muduex-acento);
	--tec-color-button-primary-hover: var(--muduex-acento);
	--tec-color-button-primary-active: var(--muduex-acento);
	--tec-color-button-primary-background: var(--muduex-tinte);
	--tec-color-button-secondary: var(--muduex-texto);
	--tec-color-button-secondary-hover: var(--muduex-texto);
	--tec-color-button-secondary-active: var(--muduex-texto);
	--tec-color-accent-primary-background-datepicker: var(--muduex-tinte);
	--tec-color-background-secondary-datepicker: var(--muduex-tarjeta);
}

/* ==========================================================================
   6. Existing muduex-core blocks and patterns. Kept working, moved onto the
      tokens; Tasks 4–5 restyle them.
   ========================================================================== */

/* Front page: urgent notice, widgets, ad and subscription cards (the
   sections and their titles: «Front-page sections» below). */

.muduex-aviso-urgente {
	position: relative;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
	border: 1px solid var(--muduex-acento);
	color: var(--muduex-texto);
}

.muduex-aviso-urgente__enlace {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-height: 3rem;
	padding: 1rem 1.25rem;
	box-sizing: border-box;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}

.muduex-aviso-urgente__rotulo,
.muduex-aviso-urgente__titulo {
	display: block;
}

.muduex-aviso-urgente__rotulo {
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--muduex-acento);
}

.muduex-aviso-urgente__titulo {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.muduex-aviso-urgente__enlace:active {
	opacity: 0.6;
}

.muduex-widgets.wp-block-group > * {
	margin: 0;
}

.muduex-widget--evento .muduex-widget__texto,
.muduex-widget .muduex-widget__cifra,
.muduex-widget .muduex-widget__texto {
	overflow-wrap: anywhere;
	min-width: 0;
}

.muduex-suscripcion {
	padding: 1.25rem;
}

.muduex-suscripcion .muduex-boletin {
	padding: 0;
	background: none;
}

/* Seeded section buttons (.muduex-botones): a grouped list of tinted rows with
   a chevron, instead of big filled blocks. The content stays the same. */
.muduex-botones {
	display: block;
	gap: 0;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
	overflow: hidden;
	margin-block: 1rem;
}

.muduex-botones .wp-block-button {
	margin: 0;
	display: block;
	width: 100%;
}

.muduex-botones .wp-block-button + .wp-block-button {
	border-top: 1px solid var(--muduex-separador);
}

.muduex-botones .wp-block-button__link {
	width: 100%;
	min-height: 3.5rem;
	justify-content: flex-start;
	padding: 0.75rem 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	text-align: left;
	color: var(--muduex-texto);
	background: none;
	border-radius: 0;
}

.muduex-botones .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	margin-left: auto;
	border-top: 2px solid var(--muduex-texto-secundario);
	border-right: 2px solid var(--muduex-texto-secundario);
	transform: rotate(45deg);
}

/* ==========================================================================
   Existing blocks (spec §6.2-6.4).
   ========================================================================== */

/* Forms: visible labels above 52 px fields, 50 px buttons, stacked. */
.muduex-boletin__form input[type="email"],
.muduex-boletin__form input[type="text"],
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea {
	width: 100%;
	max-width: 100%;
}

.comment-form textarea {
	min-height: 9rem;
}

.comment-form label {
	margin: 1rem 0 0.375rem;
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.comment-form .submit {
	margin-top: 1rem;
}

/* Comments list: rows with hairline separators, no bordered boxes. */
.wp-block-comments .wp-block-comment-template,
.comment-list {
	list-style: none;
	padding: 0;
}

.wp-block-comment-template > li,
.comment-list > li {
	padding-block: 1rem;
	border-top: 1px solid var(--muduex-separador);
}

/* Tables: card-like, hairline row separators. */
.wp-block-table table,
main table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.wp-block-table th,
.wp-block-table td,
main table th,
main table td {
	padding: 0.75rem 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--muduex-separador);
	text-align: left;
}

.wp-block-table thead th {
	color: var(--muduex-texto-secundario);
	font-weight: 600;
}

.muduex-verificado {
	font-size: max(1.125rem, 1em);
	color: var(--muduex-texto-secundario);
	margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   El tiempo: «cielo vivo» (spec §4.2–4.3, §6). The sky of right now as a
   gradient with CSS particles, white text and dark glass panels. The sky
   does not change in dark mode.

   Contrast: white text against the lightest colour of each scene's text zone
   (the bottom stop; glass panels only darken it):
     despejado-dia   #2a6fc0  5.08:1
     despejado-noche #24365f 11.88:1
     nuboso          #4a6890  5.72:1
     cubierto        #5d6878  5.65:1
     lluvia          #4f5d6e  6.72:1
     nieve           #56708c  5.13:1
     tormenta        #434a66  8.71:1 (6.0:1 at the peak of a lightning flash)
     niebla          #5a636d  6.10:1 (5.1:1 under a mist band)
   -------------------------------------------------------------------------- */

.muduex-cielo {
	--muduex-cielo-arriba: #1a56a0;
	--muduex-cielo-abajo: #2a6fc0;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--muduex-cielo-abajo);
	background-image: linear-gradient(180deg, var(--muduex-cielo-arriba) 0%, var(--muduex-cielo-abajo) 100%);
	color: #fff;
}

.muduex-cielo--despejado-dia {
	--muduex-cielo-arriba: #1a56a0;
	--muduex-cielo-abajo: #2a6fc0; /* 5.08:1 */
}

.muduex-cielo--despejado-noche {
	--muduex-cielo-arriba: #0b1636;
	--muduex-cielo-abajo: #24365f; /* 11.88:1 */
}

.muduex-cielo--nuboso {
	--muduex-cielo-arriba: #2f4d72;
	--muduex-cielo-abajo: #4a6890; /* 5.72:1 */
}

.muduex-cielo--cubierto {
	--muduex-cielo-arriba: #3d4653;
	--muduex-cielo-abajo: #5d6878; /* 5.65:1 */
}

.muduex-cielo--lluvia {
	--muduex-cielo-arriba: #263240;
	--muduex-cielo-abajo: #4f5d6e; /* 6.72:1 */
}

.muduex-cielo--nieve {
	--muduex-cielo-arriba: #3a4c63;
	--muduex-cielo-abajo: #56708c; /* 5.13:1 */
}

.muduex-cielo--tormenta {
	--muduex-cielo-arriba: #171a27;
	--muduex-cielo-abajo: #434a66; /* 8.71:1 */
}

.muduex-cielo--niebla {
	--muduex-cielo-arriba: #474f59;
	--muduex-cielo-abajo: #5a636d; /* 6.10:1 */
}

/* vivo.js pauses everything off screen or with the tab hidden. Custom
   properties inherit into the <use> copies of the icon sprite, so one
   variable reaches the icons too. */
.muduex-pausa {
	--muduex-juego: paused;
}

/* Glass: blurred where supported, a darker solid tint otherwise. */
.muduex-vidrio {
	margin: 0 0 0.75rem;
	padding: 0.875rem 1rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 18px;
	background-color: rgba(0, 0, 0, 0.28);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.muduex-vidrio {
		background-color: rgba(0, 0, 0, 0.16);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

@media (prefers-reduced-transparency: reduce) {

	.muduex-vidrio {
		background-color: rgba(0, 0, 0, 0.32);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

.muduex-vidrio__rotulo {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
}

/* Particles: positions and delays come from PHP (--x, --y, --d, --r). */
.muduex-particulas {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.muduex-particulas i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: block;
	animation-duration: var(--d);
	animation-delay: calc(var(--d) * var(--r) * -1);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: var(--muduex-juego, running);
	will-change: transform, opacity;
}

.muduex-cielo--lluvia .muduex-particulas i,
.muduex-cielo--tormenta .muduex-particulas i {
	width: 2px;
	height: 18px;
	border-radius: 1px;
	background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
	animation-name: muduex-caida;
	animation-duration: calc(var(--d) * 0.35);
}

.muduex-cielo--nieve .muduex-particulas i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	animation-name: muduex-copo;
	animation-duration: calc(var(--d) * 2);
}

.muduex-cielo--despejado-noche .muduex-particulas i {
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
	animation-name: muduex-parpadeo;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

.muduex-cielo--niebla .muduex-particulas i {
	left: calc(var(--x) - 60%);
	width: 120%;
	height: 3.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	filter: blur(10px);
	animation-name: muduex-deriva;
	animation-duration: calc(var(--d) * 5);
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

/* Lightning: two faint whole-sky flashes every few seconds (far below the
   three-flashes-a-second threshold). */
.muduex-cielo--tormenta .muduex-particulas .destello {
	inset: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: #fff;
	opacity: 0;
	animation-name: muduex-destello;
	animation-duration: calc(var(--d) * 3 + 4s);
}

@keyframes muduex-caida {

	from {
		transform: translate3d(0, -40px, 0) rotate(12deg);
		opacity: 0;
	}

	15% {
		opacity: 1;
	}

	to {
		transform: translate3d(-30px, 140px, 0) rotate(12deg);
		opacity: 0;
	}
}

@keyframes muduex-copo {

	from {
		transform: translate3d(0, -30px, 0) scale(var(--r));
		opacity: 0;
	}

	20% {
		opacity: 1;
	}

	50% {
		transform: translate3d(12px, 40px, 0) scale(var(--r));
	}

	to {
		transform: translate3d(-6px, 110px, 0) scale(var(--r));
		opacity: 0;
	}
}

@keyframes muduex-parpadeo {

	from {
		transform: scale(var(--r));
		opacity: 0.25;
	}

	to {
		transform: scale(calc(var(--r) + 0.4));
		opacity: 1;
	}
}

@keyframes muduex-deriva {

	from {
		transform: translate3d(-12%, 0, 0);
	}

	to {
		transform: translate3d(12%, 0, 0);
	}
}

@keyframes muduex-destello {

	0%,
	90%,
	93%,
	96%,
	100% {
		opacity: 0;
	}

	91.5% {
		opacity: 0.18;
	}

	94.5% {
		opacity: 0.12;
	}
}

/* Icons (Cielo sprite): sun turning, clouds drifting, drops and flakes
   falling, lightning and mist. */
.muduex-cielo svg {
	display: block;
	overflow: visible;
}

.muduex-cielo .muduex-luna {
	color: #f4f1de;
}

.muduex-i-rayos,
.muduex-i-nube,
.muduex-i-gota,
.muduex-i-copo,
.muduex-i-rayo,
.muduex-i-banda {
	transform-box: fill-box;
	transform-origin: center;
	animation-iteration-count: infinite;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-i-rayos {
	animation: muduex-giro 30s linear infinite;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-i-nube {
	animation: muduex-nube 7s ease-in-out infinite alternate;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-i-gota,
.muduex-i-copo {
	animation: muduex-gota 1.4s ease-in infinite;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-i-copo {
	animation-duration: 2.6s;
}

.muduex-i-gota:nth-of-type(2),
.muduex-i-copo:nth-of-type(2) {
	animation-delay: -0.5s;
}

.muduex-i-gota:nth-of-type(3),
.muduex-i-copo:nth-of-type(3) {
	animation-delay: -1s;
}

.muduex-i-rayo {
	animation: muduex-rayo 4s steps(1, end) infinite;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-i-banda {
	animation: muduex-banda 6s ease-in-out infinite alternate;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-i-banda:nth-child(even) {
	animation-direction: alternate-reverse;
}

@keyframes muduex-giro {

	to {
		transform: rotate(360deg);
	}
}

@keyframes muduex-nube {

	from {
		transform: translateX(-2px);
	}

	to {
		transform: translateX(3px);
	}
}

@keyframes muduex-gota {

	from {
		transform: translateY(-4px);
		opacity: 0;
	}

	30% {
		opacity: 1;
	}

	to {
		transform: translateY(6px);
		opacity: 0;
	}
}

@keyframes muduex-rayo {

	0%,
	100% {
		opacity: 1;
	}

	45% {
		opacity: 0.35;
	}

	50% {
		opacity: 1;
	}
}

@keyframes muduex-banda {

	from {
		transform: translateX(-4px);
	}

	to {
		transform: translateX(4px);
	}
}

/* Fade-in of cards (vivo.js adds .is-visible); only once vivo.js has set it
   up (.muduex-fundido on <html>, after it marked the cards already on screen)
   and with motion allowed, so nothing is ever hidden otherwise. */
@media (prefers-reduced-motion: no-preference) {

	.muduex-fundido .muduex-aparece {
		transition: opacity 400ms ease, transform 400ms ease;
	}

	.muduex-fundido .muduex-aparece:not(.is-visible) {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.muduex-particulas {
		display: none;
	}

	.muduex-cielo *,
	.muduex-i-rayos,
	.muduex-i-nube,
	.muduex-i-gota,
	.muduex-i-copo,
	.muduex-i-rayo,
	.muduex-i-banda,
	.muduex-aparece {
		animation: none !important;
	}

	.muduex-i-gota,
	.muduex-i-copo {
		opacity: 1;
	}
}

/* The /servicios/tiempo/ page. */
.muduex-tiempo {
	font-size: max(1.125rem, 1em);
}

.muduex-tiempo.muduex-cielo {
	margin-block: 1.5rem;
	padding: 1.375rem 1rem 1rem;
	border-radius: 26px;
	line-height: 1.35;
}

@media (min-width: 40rem) {

	.muduex-tiempo.muduex-cielo {
		padding: 2rem 1.75rem 1.5rem;
	}
}

/* Rain, snow and stars over the header; they fade out lower down. */
.muduex-tiempo > .muduex-particulas {
	bottom: auto;
	height: 32rem;
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}

.muduex-tiempo.muduex-cielo--tormenta > .muduex-particulas,
.muduex-tiempo.muduex-cielo--niebla > .muduex-particulas {
	height: auto;
	bottom: 0;
	-webkit-mask-image: none;
	mask-image: none;
}

.muduex-tiempo p {
	margin: 0;
}

.muduex-tiempo__cabecera {
	margin-bottom: 1rem;
}

.muduex-tiempo__lugar {
	font-weight: 600;
}

.muduex-tiempo__ahora {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.muduex-tiempo p.muduex-tiempo__grande {
	font-size: 6rem;
	font-weight: 200;
	line-height: 1;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}

.muduex-tiempo__cielo {
	font-size: 1.375rem;
	font-weight: 600;
}

.muduex-tiempo__mm {
	margin-top: 0.125rem;
}

/* «Hoy por franjas». */
.muduex-tiempo__horario {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

/* Four across from 30rem; two by two on phones, where «Madrugada» at 16 px
   does not fit a quarter of the panel. */
@media (max-width: 29.98rem) {

	.muduex-tiempo__horario {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}
}

.muduex-tiempo__horario li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0;
	border-radius: 12px;
}

.muduex-tiempo__horario li.is-ahora {
	background-color: rgba(255, 255, 255, 0.12);
}

.muduex-tiempo__franja {
	font-size: 1rem;
	font-weight: 600;
}

.muduex-tiempo__temp {
	font-size: 1.375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.muduex-tiempo__lluvia {
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.muduex-tiempo p.muduex-tiempo__fuente {
	margin-top: 1rem;
}

.muduex-cielo .muduex-tiempo__fuente,
.muduex-cielo .muduex-tiempo__fuente a {
	color: #fff;
}

.muduex-tiempo__fuente {
	color: var(--muduex-texto-secundario);
	margin-top: 1.5rem;
}

/* Front-page widget: the same sky behind the card. */
.muduex-widget--cielo {
	position: relative;
	padding: 0;
	overflow: hidden;
	background-color: var(--muduex-cielo-abajo, #2a6fc0);
}

.muduex-widget--cielo .muduex-cielo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.125rem;
	padding: 1rem;
	box-sizing: border-box;
	border-radius: inherit;
}

.muduex-cielo .muduex-widget__rotulo,
.muduex-cielo .muduex-widget__texto {
	color: #fff;
}

.muduex-cielo .muduex-widget__cifra {
	font-size: 2.75rem;
	font-weight: 200;
	letter-spacing: -0.04em;
	line-height: 1.05;
}

/* Stars only around the moon, in the top right corner: the label, the figure
   and the lines of text on the left and at the bottom stay on a clean sky. */
.muduex-widget--cielo .muduex-cielo--despejado-noche .muduex-particulas {
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 100% 0, #000 35%, transparent 100%);
	mask-image: radial-gradient(ellipse 75% 70% at 100% 0, #000 35%, transparent 100%);
}

.muduex-widget--cielo .muduex-cielo__icono {
	position: absolute;
	top: 2.5rem;
	right: 0.75rem;
}

.muduex-cielo .muduex-widget__texto {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

.muduex-widget__cielo {
	font-weight: 600;
}

@media print {

	.muduex-cielo {
		background: none !important;
		color: #000 !important;
	}

	.muduex-particulas,
	.muduex-cielo .muduex-icono,
	.muduex-cielo .muduex-cielo__icono {
		display: none !important;
	}

	.muduex-cielo .muduex-luna {
		color: #000;
	}

	.muduex-vidrio {
		border: 1pt solid #000;
		background: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		break-inside: avoid;
	}

	.muduex-vidrio__rotulo,
	.muduex-cielo .muduex-widget__rotulo,
	.muduex-cielo .muduex-widget__texto,
	.muduex-cielo .muduex-tiempo__fuente,
	.muduex-cielo .muduex-tiempo__fuente a {
		color: #000 !important;
	}

	.muduex-aparece {
		opacity: 1 !important;
		transform: none !important;
	}

	/* The sky icons stand still on paper, as with reduced motion. */
	.muduex-i-rayos,
	.muduex-i-nube,
	.muduex-i-gota,
	.muduex-i-copo,
	.muduex-i-rayo,
	.muduex-i-banda {
		animation: none !important;
	}

	.muduex-i-gota,
	.muduex-i-copo {
		opacity: 1;
	}
}

/* ==========================================================================
   Front-page header: the village under its sky (block cabecera-pueblo,
   spec §2). The sky is the weather scene (.muduex-cielo--<escena> above);
   the astro, the drawing, the particles, the veil and the text stack on it
   in that order; the veil behind the text is part of the background.

   White text on the scene with the veil (rgba(4,10,24) at 30 % → 16 % over
   the whole text block), worst case = the light end of each sky:
     despejado-dia   6.46:1     despejado-noche 13.20:1
     nuboso          7.16:1     cubierto         7.09:1
     lluvia          8.24:1     nieve            6.52:1
     tormenta       10.26:1 (6.72:1 at the peak of a lightning flash)
     niebla          7.59:1 (6.44:1 under a mist band)
   The drawing, the astro and the clouds live in a scene row under the text
   and are clipped to it, so none of them can sit behind the text.
   ========================================================================== */

.muduex-cabecera-pueblo {

	/* Day palette (clear sky): the hazy páramos, the ochre hill with its
	   olive groves, stone and lime walls and terracotta roofs. */
	--lejos: #a29fb2;
	--cerro-1: #b88f6c;
	--olivo: #6b6a3c;
	--cerro-2: #94694a;
	--casas: #efdcb9;
	--casas-2: #dfbb8a;
	--casas-sombra: #b48c66;
	--tejado: #c8643b;
	--tejado-2: #9c4426;
	--torre: #dcc19a;
	--ladrillo: #dba47c;
	--ladrillo-2: #b77b57;
	--piedra: #ece3cf;
	--piedra-2: #c4b79b;
	--ladrillo-3: #925c3e;
	--piedra-3: #9c8f74;
	--mamposteria: #908b83;
	--chapitel: #eceef2;
	--chapitel-2: #b9bfca;
	--vano: #2d201c;
	--campana: #a3823f;
	--campana-2: #7f6530;
	--reloj: #fbf8ee;
	--veleta: #4b4a55;
	--hueco: #3b2b26;
	--puerta: #6b4430;
	--ventana: #5a4a44;
	--ventana-luz: #ffd27a;
	--arbol: #45522f;
	--suelo: #7a6440;
	--camino: #c2ab88;
	--sombra: rgba(60, 30, 10, 0.16);
	--roca: rgba(176, 74, 46, 0.3);
	--muela-cresta: rgba(250, 244, 232, 0.6);
	--bandera: #da121a;
	--bandera-2: #fcdd09;
	--horizonte: rgba(255, 228, 190, 0.38);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	height: min(56vh, 480px);
	min-height: 280px;
	margin-block: 0 1.5rem;
	border-radius: 26px;
	color: #fff;
}

/* The sky of the scene with a warm glow on the horizon and, over it, the
   veil that keeps the text readable (darker at the top, where the text is).
   The veil is part of the background so the astro shines above it. */
.muduex-cabecera-pueblo.muduex-cielo {
	background-image:
		linear-gradient(180deg, rgba(4, 10, 24, 0.3) 0%, rgba(4, 10, 24, 0.16) 45%, rgba(4, 10, 24, 0) 68%),
		linear-gradient(0deg, var(--horizonte) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, var(--muduex-cielo-arriba) 0%, var(--muduex-cielo-abajo) 100%);
}

/* Grey skies: the same valley, duller. */
.muduex-cabecera-pueblo.muduex-cielo--nuboso,
.muduex-cabecera-pueblo.muduex-cielo--cubierto,
.muduex-cabecera-pueblo.muduex-cielo--lluvia,
.muduex-cabecera-pueblo.muduex-cielo--tormenta {
	--lejos: #7f8592;
	--cerro-1: #8f7c6b;
	--olivo: #4f5238;
	--cerro-2: #725c4a;
	--casas: #cdbda3;
	--casas-2: #bba386;
	--casas-sombra: #8f7b64;
	--tejado: #a05e43;
	--tejado-2: #7c4530;
	--torre: #c2b094;
	--ladrillo: #bb937a;
	--ladrillo-2: #96705a;
	--piedra: #d6cebd;
	--piedra-2: #ada38e;
	--ladrillo-3: #765541;
	--piedra-3: #8a806c;
	--mamposteria: #7f7b75;
	--bandera: #b52a2c;
	--bandera-2: #dcc240;
	--chapitel: #dcdfe4;
	--chapitel-2: #aab0ba;
	--ventana: #4a403c;
	--arbol: #363f2a;
	--suelo: #5e5038;
	--camino: #958873;
	--horizonte: rgba(220, 225, 232, 0.2);
}

.muduex-cabecera-pueblo.muduex-cielo--tormenta {
	--lejos: #5f6273;
	--cerro-1: #6d6262;
	--cerro-2: #554842;
	--suelo: #463c2d;
	--horizonte: rgba(200, 190, 220, 0.12);
}

/* Fog: the far slopes fade into it. */
.muduex-cabecera-pueblo.muduex-cielo--niebla {
	--lejos: #7c838c;
	--cerro-1: #858584;
	--olivo: #70736b;
	--cerro-2: #6f6862;
	--casas: #bdb3a4;
	--casas-2: #ada190;
	--casas-sombra: #8d8476;
	--tejado: #946a59;
	--tejado-2: #7a5747;
	--torre: #b5aa97;
	--ladrillo: #b39a87;
	--ladrillo-2: #937b6c;
	--piedra: #c9c2b5;
	--piedra-2: #a69e90;
	--ladrillo-3: #776256;
	--piedra-3: #888174;
	--mamposteria: #8a8781;
	--bandera: #a64a48;
	--bandera-2: #cdbb6a;
	--chapitel: #d2d5da;
	--chapitel-2: #b0b4bb;
	--arbol: #4d5447;
	--suelo: #5f594d;
	--camino: #8e887d;
	--horizonte: rgba(230, 234, 238, 0.3);
}

/* Snow on the slopes, the roofs and the fields. */
.muduex-cabecera-pueblo.muduex-cielo--nieve {
	--lejos: #b9c3d2;
	--cerro-1: #dfe5ec;
	--olivo: #8c96a2;
	--cerro-2: #eef2f6;
	--casas: #c7b49a;
	--casas-2: #b49f84;
	--casas-sombra: #8f7c66;
	--tejado: #f4f7fa;
	--tejado-2: #c9d2dc;
	--torre: #bba98f;
	--ladrillo: #c99a7c;
	--ladrillo-2: #a3765a;
	--piedra: #dcd3c1;
	--piedra-2: #b3a78f;
	--ladrillo-3: #7f5840;
	--piedra-3: #8f846e;
	--chapitel: #eef2f6;
	--chapitel-2: #c3ccd6;
	--arbol: #3d4a3f;
	--suelo: #f3f6f9;
	--camino: #c2cad5;
	--sombra: rgba(30, 40, 60, 0.14);
	--horizonte: rgba(235, 240, 248, 0.25);
}

/* Night: everything in blues, the windows waiting to be lit. */
.muduex-cabecera-pueblo.muduex-cabecera-pueblo--noche {
	--lejos: #2f3d68;
	--cerro-1: #243259;
	--olivo: #19244a;
	--cerro-2: #1b2648;
	--casas: #34405f;
	--casas-2: #2d3857;
	--casas-sombra: #212a46;
	--tejado: #2b2f4d;
	--tejado-2: #20233a;
	--torre: #37435f;
	--ladrillo: #5a5068;
	--ladrillo-2: #3f394f;
	--piedra: #5a6580;
	--piedra-2: #404a66;
	--ladrillo-3: #2b273b;
	--piedra-3: #2e3550;
	--mamposteria: #2f3550;
	--roca: rgba(120, 70, 110, 0.32);
	--muela-cresta: rgba(170, 185, 220, 0.35);
	--bandera: #7d2a3d;
	--bandera-2: #b59a3c;
	--chapitel: #b3bfd6;
	--chapitel-2: #8592b0;
	--vano: #f0b45e;
	--campana: #3b2c2a;
	--campana-2: #2c201f;
	--reloj: #e4e8f2;
	--veleta: #b3bfd6;
	--hueco: #0d1324;
	--puerta: #121a30;
	--ventana: #19213a;
	--arbol: #10172b;
	--suelo: #121b33;
	--camino: #27314d;
	--sombra: rgba(4, 8, 20, 0.28);
	--horizonte: rgba(110, 130, 200, 0.18);
}

/* Snow at night keeps a pale glow. */
.muduex-cabecera-pueblo.muduex-cabecera-pueblo--noche.muduex-cielo--nieve {
	--lejos: #4d5b7d;
	--cerro-1: #63718f;
	--cerro-2: #74829f;
	--tejado: #8494b0;
	--tejado-2: #6a7a98;
	--chapitel: #c3cde0;
	--chapitel-2: #95a2bd;
	--suelo: #7b89a5;
}

@media (min-width: 48rem) {

	.muduex-cabecera-pueblo {
		border-radius: 30px;
	}
}

/* The scene: everything drawn lives in the row under the text (a flex
   column: text `auto`, scene `1fr`), clipped to it, so at no height can the
   slopes, the astro or the clouds rise behind the text. It is a size
   container, so the drawing can scale to its height (cqh). */
.muduex-cabecera-pueblo__escena {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	container-type: size;
	pointer-events: none;
}

/* Layer 2: the astro (and the grey sky's clouds), behind the slopes. */
.muduex-cabecera-pueblo__cielo {
	position: absolute;
	inset: 0;
}

/* The arc: --x and --y (from Cabecera::astro, then vivo.js) are % of this
   box, and they place the centre of the astro: x from 10 to 90, y from 70
   (the horizon) up to 15 at the top of the arc. On phones the arc lives in
   the scene, which clips (it sits right under the text row). The astro is
   --astro wide (it shrinks with a short scene); on phones its halo and the
   Sun's glow reach about 0.42 of that beyond the disc, so the arc starts
   0.95 --astro below the scene's top: even at the top of the arc (centre
   at 15 %) nothing of the Sun, its halo or its glow is cut by that edge,
   nor rises behind the text. */
.muduex-cabecera-pueblo__arco {
	--astro: min(56px, 32cqh);
	position: absolute;
	top: calc(var(--astro) * 0.95);
	right: 0;
	bottom: 30%;
	left: 0;
}

/* From 48rem the text is a column on the left (sized to its content) and the
   scene stops clipping: the arc takes the sky to the right of the text, from
   24 px under the top of the header and 2rem from its right edge (so even at
   768 px the 72 px disc never leaves the header as it sets), and the drawing
   stays sized to the scene row. */
@media (min-width: 48rem) {

	.muduex-cabecera-pueblo__escena {
		position: static;
		overflow: visible;
	}

	.muduex-cabecera-pueblo__arco {
		--astro: 72px;
		top: 24px;
		right: 2rem;
		bottom: 25%;
		left: 27rem;
	}

	.muduex-astro__sol {
		box-shadow: 0 0 0 6px rgba(255, 220, 110, 0.18), 0 0 36px 10px rgba(255, 200, 80, 0.45);
	}
}

.muduex-astro {
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * 1%);
	width: var(--astro, 56px);
	height: var(--astro, 56px);
	transform: translate(-50%, -50%);
}

.muduex-astro[hidden] {
	display: none;
}

.muduex-astro__sol,
.muduex-astro .muduex-luna {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.muduex-astro__sol {
	border-radius: 50%;
	background: radial-gradient(circle at 40% 38%, #fffbe0 0%, #ffe46b 38%, #ffc83a 72%, #ffb21f 100%);
	/* In proportion to the disc, a glow within the halo on phones; the
	   72 px Sun of wider screens, which do not clip, keeps a wider one. */
	box-shadow: 0 0 0 calc(var(--astro, 56px) * 0.08) rgba(255, 220, 110, 0.18), 0 0 calc(var(--astro, 56px) * 0.3) calc(var(--astro, 56px) * 0.08) rgba(255, 200, 80, 0.45);
}

.muduex-astro__halo {
	position: absolute;
	inset: -90%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 226, 140, 0.42) 0%, rgba(255, 226, 140, 0.12) 38%, rgba(255, 226, 140, 0) 66%);
	animation: muduex-halo 9s ease-in-out infinite alternate;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-astro--luna .muduex-astro__halo {
	inset: -70%;
	background: radial-gradient(circle, rgba(220, 230, 255, 0.24) 0%, rgba(220, 230, 255, 0.06) 40%, rgba(220, 230, 255, 0) 66%);
}

.muduex-astro--luna .muduex-luna {
	color: #f6f2df;
}

/* A cloud drifts in front of the body under a grey sky. */
.muduex-astro__nube {
	position: absolute;
	top: 18%;
	left: -38%;
	width: 150%;
	opacity: 0.94;
	animation: muduex-nube-pasa 14s ease-in-out infinite alternate;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-astro__nube svg,
.muduex-cabecera-pueblo__nube svg {
	width: 100%;
	height: auto;
}

.muduex-cabecera-pueblo__nube {
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * 1%);
	width: calc(var(--t) * 7.5rem);
	opacity: 0.8;
	transform: translateX(-50%);
	animation: muduex-nube-cielo calc(26s + var(--n) * 7s) ease-in-out infinite alternate;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-cielo--lluvia .muduex-cabecera-pueblo__nube,
.muduex-cielo--tormenta .muduex-cabecera-pueblo__nube,
.muduex-cielo--lluvia .muduex-astro__nube,
.muduex-cielo--tormenta .muduex-astro__nube {
	filter: brightness(0.82);
}

/* Behind grey skies the body only glows through; in fog it is a pale disc. */
.muduex-cielo--cubierto .muduex-astro__sol,
.muduex-cielo--lluvia .muduex-astro__sol,
.muduex-cielo--nieve .muduex-astro__sol,
.muduex-cielo--tormenta .muduex-astro__sol,
.muduex-cielo--cubierto .muduex-astro .muduex-luna,
.muduex-cielo--lluvia .muduex-astro .muduex-luna,
.muduex-cielo--nieve .muduex-astro .muduex-luna,
.muduex-cielo--tormenta .muduex-astro .muduex-luna {
	opacity: 0.6;
}

.muduex-cielo--niebla .muduex-astro {
	opacity: 0.7;
	filter: saturate(0.15) brightness(1.15);
}

@keyframes muduex-halo {

	from {
		transform: scale(0.94);
		opacity: 0.85;
	}

	to {
		transform: scale(1.06);
		opacity: 1;
	}
}

@keyframes muduex-nube-pasa {

	from {
		transform: translateX(-10%);
	}

	to {
		transform: translateX(14%);
	}
}

@keyframes muduex-nube-cielo {

	from {
		transform: translateX(-62%);
	}

	to {
		transform: translateX(-38%);
	}
}

/* Layers 3–7: the drawing, anchored to the bottom of the scene and centred.
   Its scale is the smallest of:
   - the scene's width, or 858 px (×2.2), whichever is larger: phones zoom
     into the church and the houses around it, cropping the sides;
   - 318 % of the scene's height: the 92 units from the top of the páramos
     to the bottom fill at most 75 % of the scene, so on short screens the
     drawing shrinks (leaving a band of sky) instead of rising. The slopes run on beyond the viewBox on both sides
     to fill a wide scene when that happens. */
.muduex-cabecera-pueblo__dibujo {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: min(max(100cqw, 53.625rem), 318cqh);
	height: auto;
	aspect-ratio: 390 / 240;
	transform: translateX(-50%);
}

.muduex-cabecera-pueblo .niebla {
	display: none;
	fill: #fff;
	opacity: 0.42;
	filter: blur(3px);
}

.muduex-cielo--niebla .niebla {
	display: inline;
}

.muduex-cielo--niebla .niebla {
	animation: muduex-niebla 18s ease-in-out infinite alternate;
	animation-play-state: var(--muduex-juego, running);
}

@keyframes muduex-niebla {

	from {
		transform: translateX(-14px);
	}

	to {
		transform: translateX(14px);
	}
}

.muduex-cabecera-pueblo .ventana {
	fill: var(--ventana);
}

/* The arms in the flag dim a little at night, as its colours do. */
.muduex-cabecera-pueblo--noche .muduex-cabecera-pueblo__bandera image {
	filter: brightness(0.8);
}

/* At night the town hall's balcony and two windows are lit, and its clock
   keeps a pale glow. */
.muduex-cabecera-pueblo--noche .ayto__luz {
	fill: var(--ventana-luz);
	filter: drop-shadow(0 0 1px rgba(255, 196, 90, 0.8));
}

.muduex-cabecera-pueblo--noche .ayto__reloj {
	filter: drop-shadow(0 0 0.8px rgba(230, 236, 255, 0.8));
}

/* At night the belfry's arches glow softly, as when the bell is lit. */
.muduex-cabecera-pueblo--noche .torre__vano {
	filter: drop-shadow(0 0 1.2px rgba(255, 190, 100, 0.85));
}

/* The lit windows (render.php picks them by date). */
.muduex-cabecera-pueblo .ventana.is-encendida {
	fill: var(--ventana-luz);
	filter: drop-shadow(0 0 1.5px rgba(255, 196, 90, 0.9));
}

/* Rain, snow and stars over the village; stars only in the sky. */
.muduex-cabecera-pueblo__particulas {
	position: absolute;
	inset: 0;
	z-index: 3;
	isolation: isolate;
	pointer-events: none;
}

.muduex-cielo--despejado-noche .muduex-cabecera-pueblo__particulas {
	bottom: 45%;
}

/* The text column is as wide as its content (the title, and the motto from
   48rem), so the sky to its right is free for the astro and the clouds. */
.muduex-cabecera-pueblo__texto {
	position: relative;
	z-index: 5;
	flex: none;
	align-self: flex-start;
	padding: 1.5rem 1.25rem 0;
	text-shadow: 0 1px 14px rgba(4, 10, 24, 0.35);
}

@media (min-width: 48rem) {

	.muduex-cabecera-pueblo__texto {
		padding: 2.25rem 2.25rem 0;
	}
}

.muduex-cabecera-pueblo__titulo {
	margin: 0;
	font-size: clamp(40px, 15vw, 56px);
	white-space: nowrap;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.035em;
	color: #fff;
}

@media (min-width: 48rem) {

	.muduex-cabecera-pueblo__titulo {
		font-size: 72px;
	}
}

/* The flag of Muduex before the name: about the cap height, 3:2, centred on
   the capitals, with a light edge and a shadow so its red reads on any sky.
   It waves with an SVG filter (render.php), not CSS. */
.muduex-cabecera-pueblo .muduex-cabecera-pueblo__bandera {
	display: inline-block;
	overflow: visible;
	/* The cloth is 1.02em × 0.68em; the box adds the viewBox margin (1.5 of
	   30 units, 0.051em a side), taken back by the margins. */
	width: 1.122em;
	height: 0.782em;
	margin: -0.051em 0.109em -0.051em -0.051em;
	vertical-align: -0.041em;
	filter: drop-shadow(0 1px 2px rgba(4, 10, 24, 0.45));
}

/* Both flags (Bandera.php): still and flat with reduced motion. The filter
   that waves them is a presentation attribute, so CSS can drop it. */
@media (prefers-reduced-motion: reduce) {

	.muduex-bandera .muduex-bandera__tela {
		filter: none;
	}
}

.muduex-cabecera-pueblo__lema {
	margin: 0.5rem 0 0;
	font-size: max(1.125rem, 1em);
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

/* Phones (below 48rem): a compact header of 220 px, so «Hoy en Muduex» starts
   on the first screen. The title with its flag stays; the motto goes (it is
   in the footer); the scene fills the rest, about 165 px under the title.
   The drawing's own rule (318cqh) scales it to that, the slopes still under
   the text, and the tower whole in its centre; the clouds are drawn smaller.
   The height is fixed: nothing moves when the forecast arrives. On paper the
   header keeps its print rules (title and motto). */
@media screen and (max-width: 47.99rem) {

	.muduex-cabecera-pueblo {
		--muduex-titulo: clamp(36px, 11vw, 44px);
		height: 220px;
		min-height: 0;
	}

	.muduex-cabecera-pueblo__texto {
		padding: 0.875rem 1rem 0;
	}

	.muduex-cabecera-pueblo__titulo {
		font-size: var(--muduex-titulo);
	}

	.muduex-cabecera-pueblo__lema {
		display: none;
	}

	/* Smaller, and never left of 40 % of the arc's box: the grey sky's
	   left cloud (--x 14) would otherwise drift over the end of the title. */
	.muduex-cabecera-pueblo__nube {
		left: max(calc(var(--x) * 1%), 40%);
		width: calc(var(--t) * 4.5rem);
	}

	/* The strip under the title is mostly hills (the Alcarria's edge sits at
	   14 % of the scene's height, as the drawing scales with it), so an arc
	   inside it would keep the astro and the clouds always behind the slopes.
	   The scene stops clipping and the arc takes the free sky to the right
	   of the title: from just past its end (the 1rem of padding, the flag
	   and «Muduex», 4.75 times its font size, and 1.75rem of air, which the
	   cloud in front of a rising astro needs) to 1.25rem
	   from the edge, so the disc never leaves the header. Its box is set in
	   the scene's own units (the scene is 100cqh of a 220 px header): it
	   starts 12 px under the top of the header, and its horizon (70 %) falls
	   on the Alcarria's edge. The clouds share the arc's box, so they drift
	   in that same corner. */
	.muduex-cabecera-pueblo__escena {
		overflow: visible;
	}

	.muduex-cabecera-pueblo__arco {
		--astro: 34px;
		top: calc(100cqh - 208px);
		right: 1.25rem;
		bottom: auto;
		left: calc(2.75rem + 4.75 * var(--muduex-titulo));
		height: calc((208px - 86cqh) / 0.7);
	}

}

/* Reduced motion: all still and no particles (above); the astro keeps its
   place on the arc. */
@media (prefers-reduced-motion: reduce) {

	.muduex-cabecera-pueblo *,
	.muduex-cabecera-pueblo *::before,
	.muduex-cabecera-pueblo *::after {
		animation: none !important;
	}

	.muduex-cabecera-pueblo__particulas {
		display: none;
	}
}

/* Print: only the title and the motto. */
@media print {

	.muduex-cabecera-pueblo {
		display: block;
		height: auto;
		min-height: 0;
		margin: 0 0 12pt;
		border-radius: 0;
		background: none !important;
		color: #000 !important;
	}

	.muduex-cabecera-pueblo > :not(.muduex-cabecera-pueblo__texto),
	.muduex-cabecera-pueblo__bandera {
		display: none !important;
	}

	.muduex-cabecera-pueblo__texto {
		padding: 0;
		text-shadow: none;
	}

	.muduex-cabecera-pueblo__titulo,
	.muduex-cabecera-pueblo__lema {
		color: #000 !important;
	}
}

/* ==========================================================================
   Front-page poster of the next event (block proximo-evento, spec §5.1).
   White text on a maroon gradient that does not change in dark mode.
   Contrast of white text (worst point, under the moving glow): 5.5:1 on
   #b03024 + 14 % glow; 9.3:1 on #8a1c1c; >= 7.1:1 on the glass cells; the
   92 % white description >= 4.8:1.
   -------------------------------------------------------------------------- */

.muduex-widgets > .muduex-cartel {
	grid-column: span 2;
}

/* «Lo próximo»: the next event alone (the weather card moved to the top of
   «Hoy en Muduex», spec 2026-11-02-portal-simple §19), so the poster, or
   the plain «Ver eventos» card without one, takes the whole row on every
   width instead of leaving half of it empty. */
.muduex-widgets.muduex-widgets--proximo > * {
	grid-column: 1 / -1;
}

.muduex-cartel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 1.375rem;
	background-color: #8a1c1c;
	background-image: radial-gradient(120% 90% at 100% 0, #b03024 0, #8a1c1c 45%, #4a0d0d 100%);
	box-shadow: 0 12px 32px rgba(138, 28, 28, 0.3);
	color: #fff;
}

/* The glow drifting slowly across the poster. */
.muduex-cartel::before {
	content: "";
	position: absolute;
	top: -30%;
	left: -20%;
	z-index: -1;
	width: 80%;
	height: 90%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 140, 110, 0.14), rgba(255, 140, 110, 0));
	pointer-events: none;
	animation: muduex-brillo 16s ease-in-out infinite alternate;
	animation-play-state: var(--muduex-juego, running);
	will-change: transform;
}

.muduex-cartel [hidden] {
	display: none !important;
}

.muduex-cartel .muduex-cartel__rotulo {
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #fff;
}

.muduex-cartel__fecha {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-top: 0.25rem;
}

.muduex-cartel__dia {
	font-size: 4rem;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.muduex-cartel__cuando {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.muduex-cartel__semana {
	font-weight: 700;
}

.muduex-cartel__hora {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Countdown, the no-JS line and the «Ahora mismo» line share one glass box
   height, so the swap when vivo.js starts does not move anything. */
.muduex-cartel__cuenta {
	display: block;
	margin-block: 0.5rem 0.25rem;
}

.muduex-cartel__cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.muduex-cartel__celda,
.muduex-cartel__sinjs,
.muduex-cartel__estado {
	display: flex;
	box-sizing: border-box;
	min-height: 4.5rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	background-color: rgba(0, 0, 0, 0.22);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.muduex-cartel__celda,
	.muduex-cartel__sinjs,
	.muduex-cartel__estado {
		background-color: rgba(0, 0, 0, 0.16);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

.muduex-cartel__celda {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 0.25rem;
	text-align: center;
}

.muduex-cartel__cifra {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.muduex-cartel__unidad {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.muduex-cartel__sinjs,
.muduex-cartel__estado {
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.875rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.muduex-cartel__estado {
	margin-block: 0.5rem 0.25rem;
}

/* Live dot of «Ahora mismo»: a still dot and, behind it, a halo that grows
   and fades (transform and opacity only). */
.muduex-cartel__estado::before {
	content: "";
	flex: none;
	width: var(--muduex-punto);
	height: var(--muduex-punto);
	border-radius: 50%;
	background: #ffd60a;
}

/* The halo grows to 2.6 times the dot (muduex-latido), 0.8 dots beyond its
   edge: the gap is that plus a clear 0.375rem, whatever the dot size. */
.muduex-cartel__estado {
	--muduex-punto: 0.75rem;
	position: relative;
	gap: calc(var(--muduex-punto) * 0.8 + 0.375rem);
}

.muduex-cartel__estado::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.875rem;
	width: var(--muduex-punto);
	height: var(--muduex-punto);
	margin-top: calc(var(--muduex-punto) / -2);
	border-radius: 50%;
	background: rgba(255, 214, 10, 0.6);
	opacity: 0;
	pointer-events: none;
	animation: muduex-latido 1.6s ease-out infinite;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-js .muduex-cartel__sinjs,
html:not(.muduex-js) .muduex-cartel__cifras {
	display: none;
}

.muduex-cartel__titulo {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.muduex-cartel__descripcion {
	font-size: 1.125rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	overflow-wrap: anywhere;
}

.muduex-cartel__lugar {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.muduex-cartel__lugar::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.muduex-cartel--terminado {
	justify-content: center;
}

/* Fiestas: a garland of paper lanterns along the top and falling confetti. */
.muduex-cartel--fiestas {
	padding-top: 2.75rem;
}

.muduex-cartel__confeti::before {
	content: "";
	position: absolute;
	top: 6px;
	right: 0;
	left: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.35);
}

.muduex-cartel .farolillo {
	top: 6px;
	width: 16px;
	height: 22px;
	margin-left: -8px;
	border-top: 4px solid #3a0a0a;
	border-radius: 30% 30% 50% 50% / 20% 20% 60% 60%;
	background: hsl(calc(45 + var(--c) * 150) 95% 62%);
	box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.15), 0 0 10px hsl(calc(45 + var(--c) * 150) 95% 62% / 0.45);
	transform-origin: 50% -4px;
	animation-name: muduex-farolillo;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

.muduex-cartel .confeti {
	width: 7px;
	height: 11px;
	border-radius: 2px;
	background: hsl(calc(45 + var(--c) * 90) 95% 62%);
	opacity: 0;
	animation-name: muduex-confeti;
}

@keyframes muduex-brillo {

	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(70%, 45%, 0);
	}
}

@keyframes muduex-latido {

	from {
		transform: scale(1);
		opacity: 0.8;
	}

	to {
		transform: scale(2.6);
		opacity: 0;
	}
}

@keyframes muduex-farolillo {

	from {
		transform: rotate(-9deg);
	}

	to {
		transform: rotate(9deg);
	}
}

@keyframes muduex-confeti {

	from {
		transform: translate3d(0, -24px, 0) rotate(0deg);
		opacity: 0;
	}

	10% {
		opacity: 0.7;
	}

	85% {
		opacity: 0.7;
	}

	to {
		transform: translate3d(24px, 460px, 0) rotate(540deg);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.muduex-cartel::before {
		display: none;
	}

	.muduex-cartel__estado::after {
		display: none;
	}
}

@media print {

	.muduex-cartel {
		background: none !important;
		box-shadow: none !important;
		color: #000 !important;
	}

	.muduex-cartel::before,
	.muduex-cartel__estado::before,
	.muduex-cartel__estado::after,
	.muduex-cartel__lugar::before {
		display: none !important;
	}

	.muduex-cartel .muduex-cartel__rotulo,
	.muduex-cartel__descripcion {
		color: #000 !important;
	}

	.muduex-cartel__celda,
	.muduex-cartel__sinjs,
	.muduex-cartel__estado {
		border: 1pt solid #000;
		background: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}

/* ==========================================================================
   Programa de fiestas (block muduex/programa): a timeline per day. The start
   time big and tabular on the left with the duration under it, a decorative
   rail with a dot, and a card with the title and the full description.
   vivo.js marks the row in progress («Ahora», .is-ahora: the dot pulses) and
   the next one («Siguiente»).
   ========================================================================== */

.muduex-programa {
	margin-block: 1.5rem 2.5rem;
}

.muduex-programa__jornada + .muduex-programa__jornada {
	margin-top: 2.25rem;
}

.muduex-programa .muduex-programa__dia {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* Inside a page section ("nivel":3, /eventos/#san-diego) the day is an h3:
   the 22 px of the section's h3, under its 28 px h2. */
.muduex-programa h3.muduex-programa__dia {
	font-size: 1.375rem;
	letter-spacing: normal;
	line-height: 1.25;
}

.muduex-programa__num {
	color: var(--muduex-acento);
}

.muduex-programa__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.muduex-programa__fila {
	display: grid;
	grid-template-columns: 4.75rem 1.25rem minmax(0, 1fr);
	column-gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.muduex-programa__cuando {
	padding-top: 0.75rem;
	text-align: right;
}

.muduex-programa__cuando time {
	display: block;
	font-size: 1.75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.muduex-programa__cuando .muduex-programa__todo {
	font-size: 1.125rem;
	line-height: 1.25;
}

.muduex-programa__duracion {
	display: block;
	margin-top: 0.25rem;
	color: var(--muduex-texto-secundario);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.muduex-programa__rail {
	position: relative;
}

.muduex-programa__rail::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: color-mix(in srgb, var(--muduex-acento) 28%, transparent);
}

.muduex-programa__fila:first-child .muduex-programa__rail::before {
	top: 1.5rem;
}

.muduex-programa__fila:last-child .muduex-programa__rail::before {
	bottom: auto;
	height: 1.5rem;
}

.muduex-programa__fila:only-child .muduex-programa__rail::before {
	display: none;
}

.muduex-programa__punto {
	position: absolute;
	top: 1.125rem;
	left: 50%;
	width: 0.875rem;
	height: 0.875rem;
	margin-left: -0.4375rem;
	border-radius: 50%;
	background: var(--muduex-acento);
	box-shadow: 0 0 0 4px var(--muduex-fondo);
}

/* The pulse of the row in progress: a halo that only animates transform
   and opacity (the poster's muduex-latido). */
.muduex-programa__fila.is-ahora .muduex-programa__punto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--muduex-acento);
	opacity: 0;
	pointer-events: none;
	animation: muduex-latido 1.6s ease-out infinite;
	animation-play-state: var(--muduex-juego, running);
}

.muduex-programa__tarjeta {
	min-width: 0;
	margin: 0 0 0.875rem;
	padding: 0.75rem 1rem 1rem;
	border-radius: var(--muduex-radio);
	background: var(--muduex-tarjeta);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.05);
}

.muduex-programa__fila.is-ahora .muduex-programa__tarjeta {
	box-shadow: inset 0 0 0 2px var(--muduex-acento), 0 6px 18px rgba(0, 0, 0, 0.08);
}

.muduex-programa__marca {
	display: inline-block;
	margin: 0.25rem 0 0.125rem;
	padding: 0.0625rem 0.625rem;
	border-radius: 999px;
	background: var(--muduex-tinte);
	color: var(--muduex-acento);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

.muduex-programa__marca:empty {
	display: none;
}

.muduex-programa__fila.is-ahora .muduex-programa__marca {
	background: var(--muduex-acento);
	color: var(--muduex-acento-contraste);
}

.muduex-programa .muduex-programa__titulo {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* The title link keeps the 48 px target of standalone links in main (its own
   0.45rem padding, no negative margins), so it never overlaps the
   description; the card's top padding and the description's margin give
   that padding back, so the card does not grow. */
main .muduex-programa__tarjeta {
	padding-top: 0.3rem;
}

main .muduex-programa__tarjeta .muduex-programa__descripcion {
	margin-top: 0;
}

.muduex-programa__titulo a {
	color: var(--muduex-texto);
	text-decoration-color: color-mix(in srgb, var(--muduex-acento) 45%, transparent);
}

.muduex-programa__titulo a:hover {
	text-decoration-color: var(--muduex-acento);
}

.muduex-programa__descripcion {
	margin: 0.375rem 0 0;
	color: var(--muduex-texto-secundario);
	font-size: 1.125rem;
	line-height: 1.45;
}

@media (min-width: 600px) {

	.muduex-programa__fila {
		grid-template-columns: 7.75rem 1.5rem minmax(0, 1fr);
		column-gap: 0.75rem;
	}

	.muduex-programa__cuando time {
		font-size: 2.25rem;
	}

	.muduex-programa__punto {
		top: 1.375rem;
		width: 1rem;
		height: 1rem;
		margin-left: -0.5rem;
	}

	.muduex-programa__tarjeta {
		padding: 1rem 1.25rem 1.125rem;
	}

	/* 1rem minus the title link's own 0.45rem padding (see above). */
	main .muduex-programa__tarjeta {
		padding-top: 0.55rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.muduex-programa__fila.is-ahora .muduex-programa__punto::after {
		display: none;
	}
}

@media print {

	.muduex-programa__tarjeta {
		background: none !important;
		box-shadow: none !important;
		border: 1pt solid #000;
	}

	.muduex-programa__punto {
		background: #000 !important;
		box-shadow: none !important;
	}

	.muduex-programa__punto::after,
	.muduex-programa__rail::before {
		display: none !important;
	}

	.muduex-programa__num,
	.muduex-programa__duracion,
	.muduex-programa__descripcion,
	.muduex-programa__titulo a {
		color: #000 !important;
	}

	.muduex-programa__marca {
		display: none !important;
	}

	.muduex-programa__fila {
		break-inside: avoid;
	}
}

.muduex-boletin {
	position: relative;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
	padding: 1.5rem;
	font-size: 1.125rem;
}

.muduex-boletin__titulo {
	margin-top: 0;
}

.muduex-boletin__form input[type="email"],
.muduex-boletin__form input[type="text"] {
	width: 100%;
	max-width: 28rem;
}

.muduex-boletin__consentimiento label {
	display: inline;
	font-weight: 400;
}

.muduex-boletin__aviso--error {
	color: var(--muduex-acento);
}

.muduex-boletin__consentimiento input[type="checkbox"] {
	min-width: 1.5rem;
	margin-right: 0.5rem;
	vertical-align: middle;
}

/* Local network («Mi Muduex»): one centred card, 18 px text, 16 px labels, 52 px fields
   and 50 px buttons (main rules above), errors next to their field. */
.muduex-red__tarjeta {
	max-width: 32rem;
	margin-inline: auto;
	padding: 1.5rem;
	font-size: 1.125rem;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
}

.muduex-red__titulo {
	margin-top: 0;
}

.muduex-red__form label,
.muduex-red__form legend {
	font-size: 1rem;
	font-weight: 600;
}

.muduex-red__campo input {
	width: 100%;
	margin-top: 0.375rem;
}

.muduex-red__ayuda,
.muduex-red__nota {
	display: block;
	color: var(--muduex-texto-secundario);
	font-weight: 400;
}

.muduex-red__error {
	display: block;
	margin: 0.25rem 0 0;
	color: var(--muduex-acento);
	font-weight: 600;
}

.muduex-red__resumen {
	margin-bottom: 1.5rem;
	padding: 1rem;
	border-left: 4px solid var(--muduex-acento);
	background-color: var(--muduex-tinte);
	border-radius: var(--muduex-radio-control);
}

.muduex-red__resumen--status {
	border-left-color: var(--muduex-texto-secundario);
}

.muduex-red__resumen:focus {
	outline: 2px solid var(--muduex-acento);
	outline-offset: 2px;
}

.muduex-red__resumen > :first-child {
	margin-top: 0;
}

.muduex-red__resumen > :last-child {
	margin-bottom: 0;
}

.muduex-red__grupo {
	margin: 1rem 0;
	padding: 0;
	border: 0;
}

.muduex-red__opcion {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 48px;
	margin: 0;
}

.muduex-red__opcion input,
.muduex-red__consentimiento input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--muduex-acento);
}

.muduex-red__opcion label {
	flex: 1;
	padding-block: 0.75rem;
	font-size: 1.125rem;
	font-weight: 400;
	cursor: pointer;
}

.muduex-red__consentimiento {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.muduex-red__consentimiento input {
	margin-top: 0.125rem;
}

.muduex-red__consentimiento label {
	font-weight: 400;
}

.muduex-red__form button[type="submit"] {
	width: 100%;
	min-height: 50px;
}

.muduex-red__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.muduex-red__acciones a:not(.wp-element-button) {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
}

.muduex-red__salir {
	margin-top: 1rem;
}

.muduex-red__salir button {
	min-height: 48px;
}

.muduex-red__web {
	position: absolute;
	left: -9999px;
}

/* «Continuar con Google, Apple o Microsoft» (Red\Oidc): secondary buttons, one per row,
   under the main form; the panel's «Cuentas vinculadas» list. */
.muduex-red__oidc {
	margin-top: 1.5rem;
}

.muduex-red__oidc-form {
	display: grid;
	gap: 0.75rem;
}

.muduex-red__oidc-form button,
.muduex-red__cuentas button {
	color: var(--muduex-texto);
	background-color: var(--muduex-fondo);
	border: 1px solid var(--muduex-borde-campo);
}

.muduex-red__oidc-form button {
	width: 100%;
}

.muduex-red__oidc-form button:hover,
.muduex-red__cuentas button:hover {
	border-color: var(--muduex-texto);
}

.muduex-red__cuentas {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

/* The panel (/mi-muduex/ with a session): one card per section, in a column. */
.muduex-red-puerta {
	display: grid;
	gap: 1.25rem;
}

.muduex-red__seccion {
	box-sizing: border-box;
	width: 100%;
	max-width: 32rem;
	margin-inline: auto;
	padding: 1.5rem;
	font-size: 1.125rem;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
	scroll-margin-top: 7rem;
}

.muduex-red__seccion > :last-child {
	margin-bottom: 0;
}

.muduex-red__subtitulo {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.125rem;
}

.muduex-red__invitaciones {
	margin: 0;
	padding: 0;
	list-style: none;
}

.muduex-red__cuentas li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-block: 0.75rem;
}

.muduex-red__cuentas form {
	margin: 0;
}

.muduex-red__invitaciones > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--muduex-separador);
}

.muduex-red__para {
	flex: 1 1 100%;
	overflow-wrap: anywhere;
}

.muduex-red__invitaciones .muduex-red__nota {
	flex: 1 1 auto;
}

.muduex-red__anular button {
	min-height: 48px;
}

.muduex-red__nueva input {
	font-size: 1rem;
}

/* «Darme de baja»: the accent's own border, never mistaken for the main action. */
.muduex-red__form button.muduex-red__peligro {
	border: 2px solid var(--muduex-acento);
	background-color: var(--muduex-fondo);
	color: var(--muduex-acento);
}

.muduex-icono {
	font-size: 1.5rem;
	line-height: 1;
}

/* ==========================================================================
   The Events Calendar views (spec §6.3), CSS only. TEC renders its controls
   outside <main>, so the global «main button» rule never reaches them; its own
   selectors are very specific, hence the body prefix and the few !important.
   Exempt from 18 px: the weekday tag of the date column (calendar-style).
   ========================================================================== */

/* Search button and secondary buttons. */
body .tribe-common .tribe-common-c-btn.tribe-events-c-search__button,
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__button {
	min-height: 50px;
	padding: 0.75rem 1.25rem;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--muduex-acento-contraste);
	background-color: var(--muduex-acento);
	border-radius: var(--muduex-radio-control);
}

body .tribe-common .tribe-common-c-btn-border,
body .tribe-common .tribe-common-c-btn-border-small {
	min-height: 50px;
	font-weight: 600;
	color: var(--muduex-acento);
	background-color: var(--muduex-tinte);
	border: 0;
	border-radius: var(--muduex-radio-control);
}

/* «Hoy» (top bar on desktop, bottom navigation on phones): tinted button. */
body .tribe-events .tribe-events-c-top-bar__today-button,
body .tribe-events .tribe-events-c-nav__today {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	min-height: 3rem !important;
	padding: 0.5rem 1rem !important;
	box-sizing: border-box;
	font-size: 1.125rem !important;
	font-weight: 600;
	color: var(--muduex-acento) !important;
	background-color: var(--muduex-tinte) !important;
	border: 0 !important;
	border-radius: var(--muduex-radio-control);
}

body .tribe-events .tribe-events-c-top-bar__nav-link,
body .tribe-events .tribe-events-c-events-bar__search-button,
body .tribe-events .tribe-events-c-view-selector__button {
	font-size: 1.125rem !important;
	min-width: 3rem;
	min-height: 3rem;
}

/* Search bar and view selector: one card on tablets and desktop. On phones
   they stay transparent (TEC collapses them into icon buttons). */
body .tribe-events .tribe-events-c-search__input::placeholder {
	color: var(--muduex-texto-secundario);
	opacity: 1;
}

@media (min-width: 768px) {

	body .tribe-common.tribe-events .tribe-events-header__events-bar,
	body .tribe-common.tribe-events .tribe-events-c-events-bar__views,
	body .tribe-common.tribe-events .tribe-events-c-view-selector__content,
	body .tribe-common.tribe-events .tribe-events-c-events-bar__search-container,
	body .tribe-common.tribe-events .tribe-events-c-search__input-control {
		background-color: var(--muduex-tarjeta);
		color: var(--muduex-texto);
		border-radius: var(--muduex-radio-control);
	}

	body .tribe-common.tribe-events .tribe-events-header__events-bar {
		border-color: var(--muduex-borde-campo);
	}
}

/* On phones the view button (a 48 px target) is wider than the 29 px box TEC
   gives its wrapper: with the root gutter (16 px) it would poke out of the
   page, so the wrapper is as wide as the target. */
@media (max-width: 767.98px) {

	body .tribe-common.tribe-events .tribe-events-c-events-bar__views,
	body .tribe-common.tribe-events .tribe-events-c-view-selector {
		min-width: 3rem;
	}
}

body .tribe-common.tribe-events .tribe-events-c-search__input,
body .tribe-common.tribe-events .tribe-events-c-view-selector__list-item-link,
body .tribe-common.tribe-events .tribe-events-c-view-selector__list-item-text {
	color: var(--muduex-texto);
	font-size: 1.125rem;
}

/* Running text of the list view and the single event: at least 18 px. */
body .tribe-events .tribe-events-calendar-list__event-datetime,
body .tribe-events .tribe-events-calendar-list__event-venue-title,
body .tribe-events .tribe-events-calendar-list__event-venue-address,
body .tribe-events .tribe-events-calendar-list__event-description,
body .tribe-events .tribe-events-calendar-list__event-description p,
body .tribe-events .tribe-events-c-nav__prev,
body .tribe-events .tribe-events-c-nav__next,
body .tribe-events .tribe-events-c-nav__prev-label,
body .tribe-events .tribe-events-c-nav__next-label,
body .tribe-events .tribe-events-c-subscribe-dropdown__button-text,
body .tribe-events .tribe-events-c-subscribe-dropdown__list-item,
body .tribe-events-single,
body .tribe-events-single p,
body .tribe-events-single dd,
body .tribe-events-single dt,
body .tribe-events-single a {
	font-size: 1.125rem !important;
}

/* The Events Calendar prints its own page containers (no <main>): bring them
   to the same layout width as every other view (theme.json contentSize) and
   the same side gutter as the root padding. The calendar takes both from its
   grid variables; the single event's wrapper has its own #id rule. */
body .tribe-common {
	--tec-grid-gutter-page: var(--wp--style--root--padding-left, 1rem);
	--tec-grid-gutter-page-small: var(--wp--style--root--padding-left, 1rem);
	--tec-grid-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--style--root--padding-left, 1rem));
}

body #tribe-events-pg-template {
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--content-size) + 2 * var(--wp--style--root--padding-left, 1rem));
	padding-inline: var(--wp--style--root--padding-left, 1rem);
}

.tribe-events-single {
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
	padding: 1rem 1.25rem;
}

body .tribe-events .tribe-events-c-events-bar__search-button {
	font-size: 1.125rem !important;
}

body .tribe-events .tribe-events-calendar-list__event-title,
body .tribe-events .tribe-events-calendar-list__event-title-link {
	font-size: 1.25rem !important;
	line-height: 1.3;
}

body .tribe-events .tribe-events-c-events-bar__search-button svg,
body .tribe-events .tribe-events-c-events-bar__search-button svg path {
	fill: var(--muduex-texto);
}

/* Expanded panels on phones (search and view menu): card colour, never white. */
body .tribe-common.tribe-events .tribe-events-c-events-bar__search-container,
body .tribe-common.tribe-events .tribe-events-c-search__input-control,
body .tribe-common.tribe-events .tribe-events-c-view-selector__content {
	background-color: var(--muduex-tarjeta);
	color: var(--muduex-texto);
}

body .tribe-common.tribe-events .tribe-events-c-view-selector__content {
	border: 1px solid var(--muduex-separador);
	border-radius: var(--muduex-radio);
}

body .tribe-common.tribe-events .tribe-events-c-view-selector__list-item {
	min-height: 3rem;
}

body .tribe-common.tribe-events .tribe-events-c-view-selector__list-item-link {
	min-height: 3rem;
	display: flex;
	align-items: center;
	color: var(--muduex-texto);
}

body .tribe-common.tribe-events .tribe-events-c-view-selector__list-item-icon svg,
body .tribe-common.tribe-events .tribe-events-c-view-selector__list-item-icon svg path {
	fill: var(--muduex-texto-secundario);
}

body .tribe-common.tribe-events .tribe-events-c-search__input {
	min-height: 3rem;
}


/* Disabled «anterior(es)» / «siguiente(s)»: secondary text colour (TEC's grey
   measured 1.3:1 in light mode). */
body .tribe-events .tribe-events-c-nav__prev:disabled,
body .tribe-events .tribe-events-c-nav__next:disabled,
body .tribe-events .tribe-events-c-nav__prev:disabled .tribe-events-c-nav__prev-label,
body .tribe-events .tribe-events-c-nav__next:disabled .tribe-events-c-nav__next-label {
	color: var(--muduex-texto-secundario);
}

body .tribe-events .tribe-events-c-nav__prev:disabled svg path,
body .tribe-events .tribe-events-c-nav__next:disabled svg path {
	fill: var(--muduex-texto-secundario);
}

/* ==========================================================================
   Calendar sheet (spec §5.3), CSS only over TEC 6.18.2 classes.
   List: each event is a card with a sheet (accent band with the weekday,
   38 px day); the month comes from the sticky separator, because CSS cannot
   read it out of the markup. Single event: a 96 px sheet beside the date pill.
   ========================================================================== */

/* Height of the sticky header (measured: 49 px on phones and tablets;
   113 px from 1024 to 1119 px, with the menu on its own row; 57 px from
   70rem, all in one row). One pixel less, so the month tucks under its
   bottom border. The same three values live in blocks/agenda/lista.css and
   blocks/carreteras/carreteras.css. */
body .tribe-events,
body .tribe-events-single {
	--muduex-alto-cabecera: 48px;
	--muduex-bajo-cabecera: calc(var(--wp-admin--admin-bar--height, 0px) + var(--muduex-alto-cabecera));
}

@media (min-width: 1024px) and (max-width: 69.99rem) {

	body .tribe-events,
	body .tribe-events-single {
		--muduex-alto-cabecera: 112px;
	}
}

@media (min-width: 70rem) {

	body .tribe-events,
	body .tribe-events-single {
		--muduex-alto-cabecera: 56px;
	}
}

/* Up to 600 px the admin bar scrolls away and the header sticks at 0 (see
   section 3): no room for the bar under it. */
@media screen and (max-width: 600px) {

	body .tribe-events,
	body .tribe-events-single {
		--muduex-bajo-cabecera: var(--muduex-alto-cabecera);
	}
}

/* Month separators: big titles that stay under the header bar. */
body .tribe-common.tribe-events .tribe-events-calendar-list__month-separator {
	position: sticky;
	top: var(--muduex-bajo-cabecera);
	z-index: 1;
	margin: 1.5rem 0 0.75rem;
	padding: 0.5rem 0;
	background-color: var(--muduex-barra-solida);

	/* Wider than the cards, so their shadows do not peek out at the sides. */
	box-shadow: -1.5rem 0 0 var(--muduex-barra-solida), 1.5rem 0 0 var(--muduex-barra-solida);
}

body .tribe-events .tribe-events-calendar-list__month-separator::after {
	display: none;
}

body .tribe-events .tribe-events-calendar-list__month-separator h3 {
	margin: 0;
}

body .tribe-events .tribe-events-calendar-list__month-separator h3::first-letter {
	text-transform: uppercase;
}

body .tribe-events .tribe-events-calendar-list__month-separator-text {
	font-size: 1.625rem !important;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--muduex-texto);
}

/* Cards: the theme's soft shadow, sheet on the left, details on the right. */
body .tribe-common.tribe-events .tribe-events-calendar-list .tribe-events-calendar-list__event-row {
	gap: 0.875rem;
	align-items: flex-start;
	margin: 0 0 0.875rem;
	padding: 1rem;
	border-radius: var(--muduex-radio-widget);
	background-color: var(--muduex-tarjeta);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.05);

	/* Jumping to a card never leaves it under the bar and the month. */
	scroll-margin-top: calc(var(--muduex-bajo-cabecera) + 3.5rem);
}

body .tribe-common.tribe-events .tribe-events-calendar-list__event-row > .tribe-common-g-col,
body .tribe-common.tribe-events .tribe-events-calendar-list__event > .tribe-events-calendar-list__event-details {
	width: 100%;
	padding: 0;
}

body .tribe-common.tribe-events .tribe-events-calendar-list__event-wrapper {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

body .tribe-common.tribe-events .tribe-events-calendar-list__event {
	margin: 0;
}

/* The sheet. */
body .tribe-common.tribe-events .tribe-events-calendar-list__event-date-tag {
	flex: 0 0 74px;
	width: 74px;
	min-width: 74px;
}

body .tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
	height: auto;
	padding: 0;
	overflow: hidden;
	border-radius: var(--muduex-radio);
	background-color: var(--muduex-fondo);
	box-shadow: 0 0 0 1px var(--muduex-separador), 0 2px 8px rgba(0, 0, 0, 0.12);
}

body .tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	display: block;
	margin: 0;
	padding: 0.25rem 0;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muduex-acento-contraste);
	background-color: var(--muduex-acento);
}

body .tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
	display: block;
	padding: 0.375rem 0 0.5rem;
	font-size: 2.375rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--muduex-texto);
}

/* Time pill above the title (the title stays first in the markup). */
body .tribe-events .tribe-events-calendar-list__event-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body .tribe-events .tribe-events-calendar-list__event-datetime-wrapper {
	order: -1;
	margin: 0 0 0.5rem;
}

body .tribe-events .tribe-events-calendar-list__event-datetime {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-weight: 800;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
	color: var(--muduex-acento);
	background-color: var(--muduex-tinte);
}

body .tribe-events .tribe-events-calendar-list__event-title {
	margin: 0;
}

body .tribe-events .tribe-events-calendar-list__event-venue {
	margin-top: 0.375rem;
}

/* Description always visible (TEC hides it on phones), secondary text. */
body .tribe-common.tribe-events .tribe-events-calendar-list__event-description {
	display: block !important;
	visibility: visible;
	margin-top: 0.5rem;
}

body .tribe-events .tribe-events-calendar-list__event-description,
body .tribe-events .tribe-events-calendar-list__event-description p {
	margin-bottom: 0;
	line-height: 1.45;
	color: var(--muduex-texto-secundario);
}

/* Entrance: short (axe waits for finite animations), motion allowed only. */
@media (prefers-reduced-motion: no-preference) {

	body .tribe-events .tribe-events-calendar-list__event-row {
		animation: muduex-entra 320ms ease-out backwards;
	}
}

@keyframes muduex-entra {

	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* «Suscribirse» / «Añadir al calendario»: 48 px options, menu under the
   button (TEC places it at 42 px, over a 50 px button). */
body .tribe-events .tribe-events-c-subscribe-dropdown__list-item-link {
	display: flex;
	align-items: center;
	min-height: 3rem;
	box-sizing: border-box;
}

body.single-tribe_events .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__content {
	top: calc(100% + 0.25rem);
}

/* Single event. Back link, then the date row (sheet + pill), then the rest:
   with that order the sheet's place is known without touching templates. */
body .tribe-events-single {
	--muduex-hoja-arriba: 4.75rem; /* padding 1rem + back link 3rem + gap 0.75rem */
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 1rem 1.25rem 1.5rem;
}

body .tribe-events-single > * {
	order: 3;
}

body .tribe-events-single > .tribe-events-back {
	order: 1;
	display: flex;
	align-items: center;
	min-height: 3rem;
	margin: 0;
}

body .tribe-events-single > .tribe-events-back a {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	font-weight: 600;
	color: var(--muduex-acento);
	text-decoration: none;
}

body .tribe-events-single > .tribe-events-schedule {
	order: 2;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	margin: 0.75rem 0 1rem;
}

/* Room for the sheet only when there is a start date to draw it from. */
body .tribe-events-single:has(.tribe-events-start-date, .tribe-events-start-datetime) > .tribe-events-schedule {
	min-height: 6.5rem;
	padding-left: calc(96px + 1rem);
}

body .tribe-events-single > .tribe-events-schedule > * {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border-radius: 1.25rem;
	font-weight: 800;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	color: var(--muduex-acento);
	background-color: var(--muduex-tinte);
}

body .tribe-events-single > .tribe-events-schedule span {
	font-size: inherit !important;
}

body .tribe-events-single .tribe-events-single-event-title {
	margin: 0 0 1rem;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--muduex-texto);
}

/* The sheet is drawn from the start date of «Detalles» (title="2026-11-13"):
   TEC marks it .tribe-events-start-datetime on timed multi-day events and
   .tribe-events-start-date on one-day and all-day ones.
   ::before is the paper, ::after the day, clipped to its last two digits
   (right-to-left box two digits wide). Its ancestors must not be positioned
   or clip it. */
body .tribe-events-single > .type-tribe_events {
	display: flow-root;
	position: static;
	overflow: visible;
}

body .tribe-events-single .tribe-events-event-meta {
	position: static;
}

body .tribe-events-single .tribe-events-start-date::before,
body .tribe-events-single .tribe-events-start-datetime::before {
	content: "";
	position: absolute;
	top: var(--muduex-hoja-arriba);
	left: 1.25rem;
	width: 96px;
	height: 6.5rem;
	border-radius: 1.125rem;
	background:
		linear-gradient(var(--muduex-acento), var(--muduex-acento)) top / 100% 1.75rem no-repeat,
		var(--muduex-fondo);
	box-shadow: 0 0 0 1px var(--muduex-separador), 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* The day as decoration only: browsers without alternative text for content
   would read the whole ISO date aloud, so they get the bare sheet. */
body .tribe-events-single .tribe-events-start-date::after,
body .tribe-events-single .tribe-events-start-datetime::after {
	content: none;
}

@supports (content: "" / "") {

	body .tribe-events-single .tribe-events-start-date::after,
	body .tribe-events-single .tribe-events-start-datetime::after {
		content: attr(title) / "";
	}
}

body .tribe-events-single .tribe-events-start-date::after,
body .tribe-events-single .tribe-events-start-datetime::after {
	position: absolute;
	top: calc(var(--muduex-hoja-arriba) + 1.75rem + 0.625rem);
	left: calc(1.25rem + (96px - 2ch) / 2);
	width: 2ch;
	overflow: hidden;
	direction: rtl;
	white-space: nowrap;
	font-size: 3.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--muduex-texto);
}

/* With anchor positioning the sheet hangs from the date row itself, whatever
   the height of the back link above it (a «Todos los eventos» that wraps no
   longer leaves the sheet behind). Without it, the back link stays on one
   line so --muduex-hoja-arriba holds. */
@supports (anchor-name: --a) {

	body .tribe-events-single > .tribe-events-schedule {
		anchor-name: --muduex-fecha;
	}

	body .tribe-events-single .tribe-events-start-date::before,
	body .tribe-events-single .tribe-events-start-datetime::before {
		position-anchor: --muduex-fecha;
		top: anchor(top);
	}

	body .tribe-events-single .tribe-events-start-date::after,
	body .tribe-events-single .tribe-events-start-datetime::after {
		position-anchor: --muduex-fecha;
		top: calc(anchor(top) + 1.75rem + 0.625rem);
	}
}

@supports not (anchor-name: --a) {

	body .tribe-events-single > .tribe-events-back a {
		display: block;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 3rem;
	}
}

body .tribe-events-single .tribe-events-single-event-description,
body .tribe-events-single .tribe-events-single-event-description p {
	font-size: 1.25rem !important;
	line-height: 1.55;
}

/* «Detalles» and «Recinto»: running text, 18 px like the rest. */
body .tribe-events-single .tribe-events-meta-item,
body .tribe-events-single .tribe-events-meta-label,
body .tribe-events-single .tribe-events-meta-value,
body .tribe-events-single .tribe-events-abbr,
body .tribe-events-single .tribe-venue,
body .tribe-events-single .tribe-events-address,
body .tribe-events-single .tribe-address {
	font-size: 1.125rem !important;
	line-height: 1.45;
}

/* Phones: «Detalles» and «Recinto» one under the other; side by side
   (TEC's 140 px columns) the 18 px text and the map button wrap. */
@media (max-width: 29.98rem) {

	body .tribe-events-single .tribe-events-meta-group {
		flex-basis: 100%;
	}
}

/* Venue map link: the theme's tinted button. */
body .tribe-events-single .tribe-events-gmap {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	margin-top: 0.5rem;
	padding: 0.5rem 1rem;
	box-sizing: border-box;
	border-radius: var(--muduex-radio-control);
	font-weight: 600;
	text-decoration: none;
	color: var(--muduex-acento);
	background-color: var(--muduex-tinte);
}

@media print {

	body .tribe-common.tribe-events .tribe-events-calendar-list__month-separator {
		position: static;
		background: none;
		box-shadow: none;
	}

	body .tribe-common.tribe-events .tribe-events-calendar-list .tribe-events-calendar-list__event-row {
		break-inside: avoid;
		background: none;
		box-shadow: none;
		border: 1pt solid #000;
		animation: none;
	}

	body .tribe-events .tribe-events-calendar-list__event-date-tag-datetime {
		box-shadow: none;
		border: 1pt solid #000;
	}

	body .tribe-events .tribe-events-calendar-list__event-date-tag-weekday,
	body .tribe-events .tribe-events-calendar-list__event-datetime,
	body .tribe-events-single > .tribe-events-schedule > * {
		color: #000;
		background: none;
	}

	body .tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
		border-bottom: 1pt solid #000;
	}

	body .tribe-events-single {
		background: none;
	}

	/* No backgrounds on paper: the date pill says it all. */
	body .tribe-events-single .tribe-events-start-date::before,
	body .tribe-events-single .tribe-events-start-date::after,
	body .tribe-events-single .tribe-events-start-datetime::before,
	body .tribe-events-single .tribe-events-start-datetime::after {
		display: none;
	}

	body .tribe-events-single:has(.tribe-events-start-date, .tribe-events-start-datetime) > .tribe-events-schedule {
		min-height: 0;
		padding-left: 0;
	}
}

/* ==========================================================================
   Print (ROADMAP 1.13): phones and the San Diego programme for the notice
   board. Only the brand, the «no oficial» line, the content and the address
   of the up-to-date version go on paper.
   ========================================================================== */

.muduex-imprimir__boton {
	min-height: 48px;
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: 12px;
	background-color: var(--muduex-tinte);
	color: var(--muduex-acento);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.muduex-imprimir__pie {
	display: none;
}

@media print {

	@page {
		margin: 1.5cm 1.5cm 2.5cm;
	}

	:root {
		color-scheme: light;
	}

	body {
		padding-bottom: 0 !important;
		background: #fff !important;
		color: #000 !important;
		font-size: 12pt;
		line-height: 1.4;
	}

	.muduex-pestanas,
	.muduex-arriba,
	.muduex-hoja,
	.muduex-solo-escritorio,
	.muduex-engranaje,
	.muduex-boletin,
	.muduex-volver,
	.muduex-imprimir__boton,
	.muduex-pie {
		display: none !important;
	}

	header.wp-block-template-part {
		position: static;
	}

	.muduex-barra {
		background: none !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom: 1pt solid #000;
	}

	.muduex-no-oficial,
	.muduex-verificado {
		color: #000 !important;
	}

	a {
		color: #000 !important;
		text-decoration: none;
	}

	h1,
	h2,
	h3 {
		break-after: avoid;
	}

	li,
	tr,
	figure {
		break-inside: avoid;
	}

	img {
		max-width: 100%;
		max-height: 12cm;
		width: auto;
		height: auto;
	}

	/* The poster is for the screen: on paper it is a blank or an ink sink. */
	.entry-content:has(.muduex-imprimir) .wp-block-image {
		display: none;
	}

	/* The generic rule weighs (0,0,1) here too, so the components whose own
	   rule gives their links a 48 px box are named next to it. */
	:where(main) a:where(:not(p a)),
	main .muduex-lista > li > a,
	main .muduex-lista--entradas .wp-block-post-title a,
	main .wp-block-query-pagination a {
		display: inline;
		min-height: 0;
		min-width: 0;
		padding-block: 0;
	}

	/* A plain line under the intro: a fixed footer overlaps the last line. */
	.muduex-imprimir__pie {
		display: block;
		margin: 0;
		font-size: 10pt;
	}
}

/* Notices of the installable app (pwa.js): a page shown from the stored copy,
   and a form kept back because there is no connection. */
.muduex-copia,
.muduex-sin-red {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--muduex-acento);
	border-radius: var(--muduex-radio-control);
	background-color: var(--muduex-tarjeta);
	color: var(--muduex-texto);
	font-size: 1.125rem;
	line-height: 1.5;
}

/* ==========================================================================
   «Instalar la app» help page (muduex/instalar-app): device box, then the
   steps by device. pwa.js moves the visitor's device first.
   ========================================================================== */
.muduex-instalar-app {
	display: grid;
	gap: 2rem;
}

.muduex-instalar-app__caja {
	font-size: 1.125rem;
	border: 2px solid var(--muduex-acento);
}

.muduex-instalar-app__caja.is-instalada {
	border-color: var(--muduex-separador);
}

.muduex-instalar-app__aviso {
	margin: 0;
}

.muduex-instalar-app__boton {
	display: block;
	width: 100%;
	min-height: 3rem;
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--muduex-radio-control);
	background-color: var(--muduex-acento);
	color: var(--muduex-acento-contraste);
	font: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	cursor: pointer;
}

.muduex-instalar-app__boton[hidden] {
	display: none;
}

.muduex-instalar-app__secciones {
	display: grid;
	gap: 2rem;
}

.muduex-instalar-app__seccion h3 {
	margin: 0 0 0.75rem;
	font-size: 1.375rem;
	line-height: 1.3;
}

.muduex-instalar-app__pasos {
	counter-reset: paso;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--muduex-tarjeta);
	border-radius: var(--muduex-radio);
}

.muduex-instalar-app__pasos > li {
	counter-increment: paso;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	padding: 1rem;
	font-size: 1.125rem;
	line-height: 1.5;
}

.muduex-instalar-app__pasos > li + li {
	border-top: 1px solid var(--muduex-separador);
}

.muduex-instalar-app__pasos > li > span:last-child {
	padding-top: 0.6rem;
}

/* Tinted circle with the step icon and its number. */
.muduex-instalar-app__icono {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: var(--muduex-tinte);
	color: var(--muduex-acento);
}

.muduex-instalar-app__icono::after {
	content: counter(paso);
	position: absolute;
	right: -0.25rem;
	bottom: -0.25rem;
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.75rem;
	background-color: var(--muduex-acento);
	color: var(--muduex-acento-contraste);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5rem;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Novedades (block novedades). tipo «avisos»: the «Avisos» widget of the
   grid. tipo «mixto»: cards with the type as a label; events carry a 56 px
   calendar sheet like the agenda's.
   -------------------------------------------------------------------------- */
.muduex-widget--avisos {
	gap: 0.25rem;
}

.muduex-avisos__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.muduex-avisos__lista li + li {
	border-top: 1px solid var(--muduex-separador);
}

.muduex-avisos__lista a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 48px;
	padding: 0.375rem 0;
	box-sizing: border-box;
	color: var(--muduex-texto);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.muduex-avisos__titulo {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.muduex-avisos__lista time {
	font-size: 16px;
	line-height: 1.3;
	color: var(--muduex-texto-secundario);
}

.muduex-avisos__vacio {
	margin: 0;
	font-size: 18px;
	color: var(--muduex-texto-secundario);
}

.muduex-widget--avisos .muduex-avisos__todos {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 48px;
	margin-top: auto;
	font-size: 18px;
	font-weight: 600;
	color: var(--muduex-acento);
	text-decoration: none;
}

.muduex-novedades {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.muduex-novedades {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two per row: an odd last card takes the whole row. */
	.muduex-novedad:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.muduex-novedad__enlace {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	height: 100%;
	min-height: 72px;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border-radius: var(--muduex-radio-widget);
	background: var(--muduex-tarjeta);
	color: var(--muduex-texto);
	text-decoration: none;
}

.muduex-novedad__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
	overflow-wrap: anywhere;
}

.muduex-novedad__tipo {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--muduex-texto-secundario);
}

.muduex-novedad__tipo--acento {
	color: var(--muduex-acento);
}

.muduex-novedad__titulo {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.muduex-novedad__detalle {
	font-size: 16px;
	line-height: 1.35;
	color: var(--muduex-texto-secundario);
}

.muduex-novedad__detalle::first-letter {
	text-transform: uppercase;
}

/* The agenda's sheet at 56 px: accent band with the month, the day big. */
.muduex-novedad__hoja {
	display: flex;
	flex: 0 0 56px;
	flex-direction: column;
	width: 56px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--muduex-fondo);
	box-shadow: 0 0 0 1px var(--muduex-separador), 0 2px 6px rgba(0, 0, 0, 0.12);
	text-align: center;
}

.muduex-novedad__mes {
	padding: 0.125rem 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muduex-acento-contraste);
	background: var(--muduex-acento);
}

.muduex-novedad__dia {
	padding: 0.25rem 0 0.3125rem;
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--muduex-texto);
}

@media (prefers-reduced-motion: no-preference) {
	.muduex-novedad .muduex-novedad__enlace {
		transition: transform 0.15s ease, box-shadow 0.15s ease;
	}

	.muduex-novedad .muduex-novedad__enlace:hover,
	.muduex-novedad .muduex-novedad__enlace:focus-visible {
		transform: translateY(-2px);
	}
}

.muduex-novedad .muduex-novedad__enlace:hover,
.muduex-novedad .muduex-novedad__enlace:focus-visible {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

@media print {
	.muduex-novedad__enlace,
	.muduex-novedad__hoja {
		background: none;
		box-shadow: none;
		border: 1pt solid #000;
	}

	.muduex-novedad__mes {
		color: #000;
		background: none;
		border-bottom: 1pt solid #000;
	}
}

/* ==========================================================================
   Front-page sections (spec 2026-11-02-portal-simple §3.2): «Hoy en Muduex»
   (block hoy), «Secciones», «Lo próximo» and «Novedades», each with its h2
   (28 px, weight 800) and 2.5rem between them.
   ========================================================================== */

main > .muduex-seccion.wp-block-group,
main > .muduex-seccion + * {
	margin-block-start: 2.5rem;
}

.muduex-seccion > * + * {
	margin-block-start: 1rem;
}

.muduex-seccion .muduex-seccion__titulo {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

@media print {

	main > .muduex-seccion.wp-block-group {
		margin-block-start: 1.5rem;
		break-inside: auto;
	}

	.muduex-seccion .muduex-seccion__titulo {
		break-after: avoid;
	}
}

/* ==========================================================================
   Footer: «útil y compacto» (owner, 03/11/2026; spec 2026-11-02-portal-simple
   §20), redesigned the same day: the village at night is the footer at every
   width, the signature of the site's end. Three columns on desktop, each
   title level with its list: the brand («Muduex», the place and two quick
   calls), «Cómo llegar» (the consent map and the four directions buttons)
   and «Sobre el portal» (the legal pages, «Configurar cookies»); then the
   «no oficial» line with the town hall's electronic office next to it
   and the coat of arms' credit. No flag: the header has the
   escudo and the band has the tower. The eight sections are not repeated
   here: the header menu, the tabs and «Más» have them.

   Phones and tablets (below 1024 px): a shorter village strip (7.5rem; the
   slice keeps the tower in view down to 320 px) over the same band, one
   column, no map, the directions in a 2 × 2 grid and the legal links in a
   two-column grid of 44 px rows (one column when the text is large). The
   fixed tab bar is cleared by the body's bottom padding (section 4b) plus the
   footer's own.

   The band is night in both colour schemes. Contrast on its lightest stop
   (#1B2A52) / its darkest stop (#0E1530):
     #FFFFFF  links, «Muduex», credit links   14.0:1 / 18.0:1
     #D5DBEB  column titles, place, notice    10.1:1 / 13.0:1
     #FFD27A  focus ring (3 px)                9.8:1 / 12.6:1
   ========================================================================== */

/* Transition: from the grouped grey (black in dark mode) into the band. */
.muduex-pie-paisaje {
	display: block;
	width: 100%;
	height: 7.5rem;
	background: linear-gradient(180deg, var(--muduex-fondo-agrupado) 0%, color-mix(in srgb, var(--muduex-fondo-agrupado) 65%, #1c2848) 10%, color-mix(in srgb, var(--muduex-fondo-agrupado) 25%, #1c2848) 24%, #1c2848 44%, #1b2a52 100%);
}

.muduex-pie-paisaje svg {
	display: block;
	width: 100%;
	height: 100%;
}

.muduex-pie.muduex-fondo-agrupado {
	--muduex-texto: #fff;
	--muduex-texto-secundario: #d5dbeb;
	--muduex-separador: rgb(213 219 235 / 22%);
	--muduex-tarjeta: transparent;
	--muduex-acento: #ffd27a; /* the focus ring */
	padding-top: 1.25rem !important;
	background: linear-gradient(180deg, #1b2a52 0%, #0e1530 100%);
	color: var(--muduex-texto);
	color-scheme: dark;
}

.muduex-pie {
	--muduex-pie-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5.25 3.75h3.1l1.6 4.1-2.05 1.35a10.5 10.5 0 0 0 4.9 4.9l1.35-2.05 4.1 1.6v3.1a2 2 0 0 1-2.15 2A16.25 16.25 0 0 1 3.25 5.9a2 2 0 0 1 2-2.15Z'/%3E%3C/svg%3E");
	padding-bottom: 1.5rem !important; /* on top of the body's, which clears the tab bar */
}

.muduex-pie__columnas {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.muduex-pie .muduex-pie__columnas > * {
	margin: 0;
}

.muduex-pie .muduex-rotulo {
	margin-bottom: 0.25rem;
	padding-inline: 0;
}

.muduex-pie__marca {
	color: var(--muduex-texto-secundario);
	text-wrap: balance;
}

.muduex-pie .muduex-pie__marca > p + p {
	margin-top: 0.125rem;
}

.muduex-pie .muduex-pie__nombre {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--muduex-texto);
}

/* The quick calls (the same numbers as the buttons of /telefonos/): desktop. */
.muduex-pie .muduex-pie__llamar {
	display: none;
}

/* «Cómo llegar»: the map's box is desktop only (no Google request on phones);
   the four links are 48 px buttons in a 2 × 2 grid. */
.muduex-mapa__marco {
	display: none;
}

/* Two columns while 8.75rem each fit (320 px and up with the default text),
   one when the text is larger: «OpenStreetMap» never pushes its icon out. */
.muduex-mapa__llegar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.75rem), 1fr));
	gap: 0.5rem;
	margin: 0.375rem 0 0;
	padding: 0;
	list-style: none;
}

.muduex-mapa__app,
.muduex-pie .muduex-pie__llamar a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.125rem 0.375rem;
	box-sizing: border-box;
	height: 100%;
	min-height: 3rem;
	padding: 0.5rem 0.25rem;
	border: 1px solid color-mix(in srgb, var(--muduex-texto) 35%, transparent);
	border-radius: var(--muduex-radio-control);
	background: var(--muduex-tarjeta);
	color: var(--muduex-texto);
	font-size: 1.125rem;
	line-height: 1.2;
	overflow-wrap: anywhere;
	text-align: center;
	text-decoration: none;
}

.muduex-mapa__app:hover,
.muduex-pie .muduex-pie__llamar a:hover {
	text-decoration: underline;
}

.muduex-mapa__icono svg,
.muduex-pie__externo svg {
	display: block;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

.muduex-mapa__fuera {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* «Sobre el portal»: a grid of 44 px rows, two columns while 8.5rem each
   fit (320 px and up with the default text), one when the text is larger. */
.muduex-pie .muduex-lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
	gap: 0 0.5rem;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	overflow: visible;
}

.muduex-pie .muduex-lista > li + li {
	border-top: 0;
}

.muduex-pie .muduex-lista > li {
	display: flex;
	min-width: 0;
}

.muduex-pie .muduex-lista > li > a {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	min-height: 2.75rem;
	padding: 0.375rem 0;
	overflow-wrap: anywhere;
	font-size: 1.125rem;
	line-height: 1.3;
}

.muduex-pie .muduex-lista > li > a::after {
	content: none;
}

.muduex-pie .muduex-lista > li > a:hover {
	text-decoration: underline;
}

.muduex-pie a:focus-visible,
.muduex-pie button:focus-visible {
	outline: 3px solid var(--muduex-acento);
	outline-offset: 2px;
}

.muduex-pie .muduex-lista a:focus-visible {
	border-radius: 4px;
}

/* The «no oficial» line and the credit: «Escudo ⓘ» alone in its line is a
   standalone control, 48 px. */
.muduex-pie > .muduex-pie__nota {
	margin-top: 1rem !important;
	color: var(--muduex-texto-secundario);
}

.muduex-pie .muduex-pie__nota > * {
	margin: 0;
}

.muduex-pie .muduex-pie__nota .muduex-credito {
	min-width: 3rem;
	min-height: 3rem;
	margin-block: 0;
	justify-content: flex-start;
}

.muduex-pie__nota a {
	color: var(--muduex-texto);
	text-decoration: none;
}

/* The town hall's office, right after the notice: where the official
   business is. A standalone 48 px link. */
.muduex-pie .muduex-pie__sede a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 3rem;
}

.muduex-pie__sede .muduex-pie__externo svg {
	width: 1rem;
	height: 1rem;
}

.muduex-pie__nota a:hover {
	text-decoration: underline;
}

@media (min-width: 1024px) {

	.muduex-pie-paisaje {
		height: auto;
		aspect-ratio: 72 / 11;
		max-height: 16rem;
	}

	.muduex-pie.muduex-fondo-agrupado {
		padding-top: 2.5rem !important;
		padding-bottom: 2rem !important;
	}

	/* Titles and lists start on the same line in every column: no shared
	   rows, each column is its own block starting at the top. */
	.muduex-pie__columnas {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
		gap: 2rem;
		align-items: start;
	}

	.muduex-pie .muduex-pie__nombre {
		margin-bottom: 0.5rem;
		font-size: 2rem;
	}

	.muduex-pie .muduex-pie__llamar {
		display: grid;
		gap: 0.5rem;
		margin-top: 1rem;
		padding: 0;
		list-style: none;
	}

	.muduex-pie .muduex-pie__llamar a {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0.5rem;
		padding-inline: 0.75rem;
		background: none;
		text-align: left;
	}

	.muduex-pie .muduex-pie__llamar a::before {
		content: "";
		flex: none;
		width: 1.25rem;
		height: 1.25rem;
		background-color: currentcolor;
		forced-color-adjust: none;
		-webkit-mask: var(--muduex-pie-tel) center / contain no-repeat;
		mask: var(--muduex-pie-tel) center / contain no-repeat;
	}

	/* 112 filled, as on /telefonos/. #1B2A52 on white: 13.9:1. */
	.muduex-pie .muduex-pie__llamar a[href="tel:112"] {
		background: #fff;
		color: #1b2a52;
	}

	/* The map (muduex-core MapaPie). The box is the same with the placeholder
	   and with Google's iframe, which the consent script lays over it:
	   nothing moves when the map arrives. #D5DBEB on #16224A: 11.6:1. */
	.muduex-mapa__marco {
		position: relative;
		display: block;
		overflow: hidden;
		aspect-ratio: 2 / 1;
		border: 1px solid rgb(213 219 235 / 40%);
		border-radius: var(--muduex-radio);
		background:
			linear-gradient(rgb(213 219 235 / 8%) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
			linear-gradient(90deg, rgb(213 219 235 / 8%) 1px, transparent 1px) 0 0 / 1.5rem 1.5rem,
			#16224a;
	}

	.muduex-mapa__aviso {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.375rem;
		box-sizing: border-box;
		height: 100%;
		padding: 0.75rem;
		text-align: center;
		color: var(--muduex-texto-secundario);
	}

	.muduex-mapa__marco.is-cargado .muduex-mapa__aviso {
		visibility: hidden;
	}

	.muduex-mapa__pin svg {
		display: block;
		width: 1.75rem;
		height: 1.75rem;
		color: #ffd27a;
	}

	/* Outlined: the 112 call is the footer's only filled button. */
	.muduex-mapa__aceptar {
		min-height: 3rem;
		padding: 0.5rem 1.25rem;
		border: 1px solid rgb(255 255 255 / 70%);
		border-radius: 999px;
		background: transparent;
		color: #fff; /* 15.4:1 on #16224A */
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.muduex-mapa__aceptar[hidden] {
		display: none;
	}

	.muduex-mapa__aceptar:hover {
		background: rgb(255 255 255 / 8%);
		text-decoration: underline;
	}

	.muduex-mapa__iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.muduex-mapa__llegar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 0.5rem;
	}

	.muduex-mapa__app:hover {
		background: rgb(255 255 255 / 8%);
	}

	/* «Sobre el portal»: one 48 px link per row, as a list. */
	.muduex-pie .muduex-lista {
		display: block;
	}

	.muduex-pie .muduex-lista > li {
		display: block;
	}

	.muduex-pie .muduex-lista > li > a {
		display: inline-flex;
		width: auto;
		max-width: calc(100% + 0.75rem);
		min-height: 3rem;
		margin-inline: -0.375rem;
		padding: 0.5rem 0.375rem;
	}

	/* The bottom line: the notice with the town hall's office under it on
	   the left and the credit on the right, centred on both. */
	.muduex-pie > .muduex-pie__nota {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 0 2rem;
		margin-top: 2rem !important;
		padding-top: 1rem;
		border-top: 1px solid var(--muduex-separador);
	}

	.muduex-pie .muduex-pie__nota > :first-child,
	.muduex-pie .muduex-pie__nota > .muduex-pie__sede {
		grid-column: 1;
	}

	.muduex-pie .muduex-pie__nota > .muduex-pie__sede a {
		margin-inline: -0.375rem;
		padding-inline: 0.375rem;
	}

	.muduex-pie .muduex-pie__nota > :last-child:not(.muduex-pie__sede) {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

/* Stars twinkle and some windows go dark and light again, slowly. */
@media (prefers-reduced-motion: no-preference) {

	.muduex-pie-paisaje__estrellas circle {
		animation: muduex-titila 5s ease-in-out infinite alternate;
	}

	.muduex-pie-paisaje__estrellas circle:nth-child(3n + 1) {
		animation-duration: 6.5s;
		animation-delay: -1.7s;
	}

	.muduex-pie-paisaje__estrellas circle:nth-child(3n + 2) {
		animation-duration: 4.2s;
		animation-delay: -3.4s;
	}

	.muduex-pie-paisaje__ventanas rect:nth-child(odd) {
		animation: muduex-ventana 11s ease-in-out infinite;
	}

	.muduex-pie-paisaje__ventanas rect:nth-child(4n + 3) {
		animation-duration: 14s;
		animation-delay: -5s;
	}
}

@keyframes muduex-titila {

	from {
		opacity: 0.95;
	}

	to {
		opacity: 0.3;
	}
}

@keyframes muduex-ventana {

	0%,
	62%,
	100% {
		opacity: 1;
	}

	72%,
	86% {
		opacity: 0.2;
	}
}

/* The band itself (.muduex-pie) is already hidden by the print section. */
@media print {

	.muduex-pie-paisaje,
	.muduex-mapa__marco {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Sources and credits (muduex-core Creditos). Wherever a source or a credit
   used to be written, an ⓘ icon links to its entry of «Fuentes y créditos»;
   its accessible name and title carry the attribution, and print shows the
   attribution's text instead of the icon. A 24 px target (WCAG 2.5.8) that
   sits in a line of text; alone in its line it is a 48 px target, like the
   site's other standalone controls (.muduex-credito--48). The page's
   entries glow when targeted.
   -------------------------------------------------------------------------- */
.muduex-credito {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 24px;
	min-height: 24px;
	margin-block: -2px;
	padding: 0;
	border-radius: 50%;
	color: inherit;
	vertical-align: middle;
	text-decoration: none;
}

.muduex-credito::before,
.muduex-credito-muestra {
	content: "";
	display: inline-block;
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentcolor;
	-webkit-mask: url(assets/iconos/informacion.svg) center / contain no-repeat;
	mask: url(assets/iconos/informacion.svg) center / contain no-repeat;
}

.muduex-credito-muestra {
	vertical-align: -0.2em;
}

.muduex-credito:hover {
	color: var(--muduex-acento);
}

/* The glyph stays on the text's edge: the extra target goes to the right
   (never past the left edge, where an ancestor may clip the focus ring). */
.muduex-credito.muduex-credito--48 {
	justify-content: flex-start;
	min-width: 3rem;
	min-height: 3rem;
	margin-block: 0;
}

/* The attribution's text: on screen the accessible name already says it. */
.muduex-credito__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.muduex-credito-linea {
	margin: 0;
}

.muduex-creditos__seccion + .muduex-creditos__seccion {
	margin-top: 2.5rem;
}

.muduex-creditos__entrada {
	margin-top: 1.5rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid transparent;
	border-radius: 0 var(--muduex-radio-control) var(--muduex-radio-control) 0;
	scroll-margin-top: 6rem;
}

.muduex-creditos__entrada > h3 {
	margin-top: 0;
}

.muduex-creditos__entrada > p {
	margin: 0.5rem 0 0;
}

.muduex-creditos__entrada:target {
	border-left-color: var(--muduex-acento);
	background-color: var(--muduex-tinte);
}

@media (forced-colors: active) {

	.muduex-credito::before {
		background-color: LinkText;
		forced-color-adjust: none;
	}

	.muduex-credito-muestra {
		background-color: CanvasText;
		forced-color-adjust: none;
	}

	.muduex-creditos__entrada:target {
		border-left-color: Highlight;
	}
}

@media print {

	.muduex-credito,
	.muduex-credito.muduex-credito--48 {
		display: inline;
		min-width: 0;
		min-height: 0;
		margin: 0;
		color: #000;
	}

	.muduex-credito::before,
	.muduex-credito-muestra {
		display: none;
	}

	.muduex-credito__texto {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.muduex-credito__texto::after {
		content: ".";
	}

	.muduex-creditos__entrada:target {
		border-left-color: transparent;
		background: none;
	}
}

/* ==========================================================================
   Búsqueda (spec 2026-11-02-portal-simple §7.1): the magnifier, first of
   the header actions on every page and size, and its sheet (popover, so it
   opens without JavaScript), anchored to the top edge: the phone keyboard
   comes up from below. The results are styled by muduex/resultados.
   The cog («Ajustes», §16) beside it opens the same kind of sheet.
   ========================================================================== */

.muduex-lupa,
.muduex-engranaje {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 3rem;
	height: 3rem;
	margin: 0;
	padding: 0;
	border: 1px solid transparent; /* drawn in forced colours */
	border-radius: 50%;
	background: none;
	color: var(--muduex-texto);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.muduex-lupa .muduex-icono,
.muduex-engranaje .muduex-icono {
	width: 1.625rem;
	height: 1.625rem;
}

/* The cog needs ajustes.js: hidden without JavaScript (no data-tema, set by
   the head script before the first paint; not .muduex-js, vivo.js's). */
:root:not([data-tema]) .muduex-engranaje {
	display: none;
}

.muduex-hoja--arriba {
	inset: 0 0 auto;
	border-top: 0;
	border-bottom: 1px solid var(--muduex-separador);
	border-radius: 0 0 14px 14px;
	padding-top: max(1rem, env(safe-area-inset-top, 0px));
	background-color: var(--muduex-fondo-agrupado);
}

.muduex-hoja--arriba > * {
	max-width: 40rem;
	margin-inline: auto;
}

@starting-style {

	.muduex-hoja--arriba:popover-open {
		transform: translateY(-100%);
	}
}

/* The top sheets (search and «Ajustes») carry «Cerrar» in their header, by
   the title, like an iOS sheet's navigation bar: at 320 × 568 the «Ajustes»
   rows do not fit, and the sheet scrolls under the header, which stays put.
   A 48 px text button in the accent, without the bottom sheet's slab. */
.muduex-hoja__cabecera {
	position: sticky;
	top: calc(-1 * max(1rem, env(safe-area-inset-top, 0px)));
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: calc(-1 * max(1rem, env(safe-area-inset-top, 0px)));
	padding-top: max(1rem, env(safe-area-inset-top, 0px));
	background-color: var(--muduex-fondo-agrupado);
}

.muduex-hoja__cabecera .muduex-hoja__titulo {
	grid-column: 2;
	margin: 0;
}

.muduex-hoja__cabecera .muduex-hoja__cerrar {
	grid-column: 3;
	justify-self: end;
	width: auto;
	min-width: 3rem;
	padding: 0 0.5rem;
	margin-inline-end: -0.5rem;
	background-color: transparent;
	font-size: 1.0625rem;
}

/* «Ajustes»: two grouped lists of radios, each row a 48 px target with the
   name and, under it, a plain description. The list sits on the sheet's
   grouped background (white rows in light, #1C1C1E in dark). */
.muduex-ajustes__grupo {
	min-width: 0;
	margin-block: 1rem 0;
	padding: 0;
	border: 0;
}

.muduex-ajustes__grupo legend {
	padding: 0 1rem;
}

.muduex-ajustes__lista {
	border-radius: var(--muduex-radio);
	background-color: var(--muduex-tarjeta);
}

.muduex-ajustes__opcion {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 3rem;
	padding: 0.625rem 1rem;
	line-height: 1.3;
	cursor: pointer;
}

.muduex-ajustes__opcion + .muduex-ajustes__opcion {
	border-top: 1px solid var(--muduex-separador);
}

.muduex-ajustes__opcion input {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--muduex-acento);
}

.muduex-ajustes__opcion .muduex-icono {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
}

.muduex-ajustes__nombre {
	font-weight: 600;
}

.muduex-ajustes__nota {
	display: block;
	color: var(--muduex-texto-secundario);
}

/* Forced colours (Windows High Contrast) override the theme and the palette:
   the one-line note shows only then. */
.muduex-ajustes__forzados {
	display: none;
}

@media (forced-colors: active) {

	.muduex-ajustes__forzados {
		display: block;
	}
}

.muduex-ajustes__estado {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.muduex-buscar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.muduex-buscar label {
	flex: 1 1 100%;
	font-weight: 600;
}

.muduex-buscar input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: 3rem;
	padding: 0.625rem 0.875rem;
	box-sizing: border-box;
	border: 1px solid var(--muduex-borde-campo);
	border-radius: var(--muduex-radio-control);
	background-color: var(--muduex-fondo);
	color: var(--muduex-texto);
	font: inherit;
}

.muduex-buscar button {
	min-height: 3rem;
	cursor: pointer;
}

.muduex-buscar__ejemplos {
	margin-bottom: 0;
}

.muduex-buscar__sugerencias {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.muduex-hoja .muduex-buscar__sugerencias {
	margin-top: 0.5rem;
}

.muduex-buscar__sugerencias a {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1rem;
	box-sizing: border-box;
	border-radius: 1.5rem;
	background-color: var(--muduex-tarjeta);
	color: var(--muduex-acento);
	font-weight: 600;
	text-decoration: none;
}

@media print {

	.muduex-lupa {
		display: none !important;
	}
}

/* ==========================================================================
   Reading measure on the legal pages (body.muduex-lectura, functions.php):
   the container, title and margins keep the shared 68rem; only the running
   text (paragraphs and lists, also inside the credits' entries) stops at
   about 75 characters per line. WP centres the constrained blocks with
   !important auto margins, so the start margin is pinned to the title's edge.
   ========================================================================== */
.muduex-lectura .entry-content :is(p, ul, ol) {
	max-width: 40rem;
	margin-inline-start: 0 !important;
}