/*
Theme Name:        Movimiento Peronista Pergamino
Theme URI:
Author:            Julian Juan
Author URI:
Description:       Tema de bloques para el sitio institucional del Movimiento Peronista Pergamino. Paleta azul institucional con ámbar reservado para llamados a la acción, tipografía condensada en títulos y plantillas para noticias, convocatorias y páginas de la agrupación.
Requires at least: 6.6
Tested up to:      7.0
Requires PHP:      7.4
Version:           1.25.0
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       movimiento-peronista
Tags:              full-site-editing, block-patterns, blog, news, custom-colors, custom-menu, editor-style, one-column, wide-blocks
*/

/*
 * Todo el diseño vive en theme.json. Acá van sólo las reglas que theme.json
 * todavía no puede expresar.
 */

/* Salto al contenido: visible únicamente con foco de teclado. */
.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--azul-profundo);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	left: var(--wp--preset--spacing--30);
	padding: 0.75rem 1.25rem;
	position: fixed;
	text-decoration: underline;
	top: var(--wp--preset--spacing--30);
	z-index: 100000;
}

/* Foco visible en toda la interfaz: el celeste no se usa para texto, sí para señalizar. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--celeste);
	outline-offset: 2px;
}

/* El ámbar nunca ocupa fondos grandes: sólo botones y destacados chicos. */
.wp-block-button__link {
	text-decoration: none;
}

/* ── Barra del sitio ───────────────────────────────────────────────────── */

/*
 * La barra acompaña el scroll. No se puede declarar desde theme.json: el soporte
 * de posición del core sólo aplica a bloques que son raíz de la plantilla, y acá
 * el que tiene que quedar fijo es el <header> que envuelve la template part.
 */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 20;
}

/*
 * Con la barra fija, un salto a #actividades deja el encabezado de la sección debajo de
 * ella. El scroll-padding reserva su alto para todos los anclajes del sitio.
 */
html {
	scroll-padding-top: 5rem;
}

/* ── Portada ───────────────────────────────────────────────────────────── */

/*
 * El bloque cover sólo admite un número y una unidad, así que el alto acotado
 * del diseño (piso de 520px para que el título no se coma la pantalla en móvil,
 * techo de 760px para que no se estire en monitores altos) va acá. El
 * !important es necesario porque el cover escribe min-height inline, y ese
 * valor queda de fallback.
 *
 * El color de fondo es la capa de abajo de todo: el overlay del cover quedó
 * transparente para dejar ver el video, así que sin esto la portada sería
 * blanca cuando el video no carga o hay movimiento reducido.
 */
.mpp-hero {
	background-color: var(--wp--preset--color--azul-profundo);
	background-position: center;
	background-size: cover;
	min-height: min(clamp(520px, 78vh, 760px), 100vh) !important;
}

/*
 * El poster va de fondo del cover y no en el atributo `poster` del <video>: cualquier
 * atributo de más en ese elemento desincroniza el markup guardado y el editor marca el
 * bloque como no válido. Se ve mientras el mp4 baja, con movimiento reducido y si el video
 * falla.
 *
 * Las dos URLs —la chica por debajo de 600px— las emite `inc/cabecera.php` con la versión
 * del tema pegada, porque desde acá no se puede versionar y el CDN seguiría sirviendo el
 * poster anterior después de cambiarlo.
 */

/* El piso de 520px es más alto que un teléfono acostado: ahí manda la pantalla. */
@supports (height: 78svh) {
	.mpp-hero {
		min-height: min(clamp(520px, 78svh, 760px), 100svh) !important;
	}
}

/*
 * El tinte plano del cover (dimRatio) se reemplaza por el degradado horizontal
 * del diseño: casi opaco sobre el texto, casi transparente del lado derecho,
 * donde el video se tiene que ver. opacity:1 anula el 0.5 de has-background-dim,
 * y el color de fondo tiene que irse: es opaco y se pinta DEBAJO del degradado,
 * así que sin esto el video no se ve por más transparente que sea el gradiente.
 * Lleva !important porque las clases de color de preset del core también lo usan.
 */
.mpp-hero > .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(90deg, rgba(10, 62, 100, 0.97) 0%, rgba(10, 62, 100, 0.86) 45%, rgba(10, 62, 100, 0.45) 100%);
	opacity: 1;
}

/*
 * El degradado del diseño es horizontal porque el texto ocupa la mitad izquierda. En
 * pantalla angosta el texto ocupa todo el ancho, así que el degradado se da vuelta: oscuro
 * abajo, donde está el contenido, y claro arriba, donde se ve el video.
 */
@media (max-width: 899.98px) {
	.mpp-hero > .wp-block-cover__background {
		background-image: linear-gradient(180deg, rgba(10, 62, 100, 0.45) 0%, rgba(10, 62, 100, 0.82) 45%, rgba(10, 62, 100, 0.97) 100%);
	}
}

/* Aire del diseño: mucho arriba, menos abajo, y los laterales del sitio. */
.mpp-hero > .wp-block-cover__inner-container {
	padding: clamp(3rem, 9vw, 6.875rem) clamp(1rem, 4vw, 3.5rem) clamp(2.25rem, 5vw, 4rem);
}

/* Filete ámbar delante de la volanta. Es decoración: no va como bloque. */
.mpp-hero__volanta::before {
	background-color: var(--wp--preset--color--ambar);
	content: "";
	display: inline-block;
	height: 4px;
	margin-right: 0.875rem;
	vertical-align: middle;
	width: clamp(28px, 6vw, 64px);
}

/*
 * Medidas de línea del diseño: el título corta corto y la bajada no se estira.
 * El margin-inline lleva !important porque el core centra con !important todo
 * hijo del layout constrained que traiga max-width, y acá el texto va alineado
 * a la izquierda.
 */
.mpp-hero__consigna {
	margin-inline-end: auto !important;
	margin-inline-start: 0 !important;
	max-width: 16ch;
	text-wrap: balance;
}

.mpp-hero__bajada {
	margin-inline-end: auto !important;
	margin-inline-start: 0 !important;
	max-width: 52ch;
}

/*
 * Botones de la portada y de la barra en condensada: son los únicos que compiten
 * con títulos, y theme.json no distingue por sección. Los cuerpos y los padding
 * son los de la maqueta, en medidas fijas: no entran en la escala fluida del
 * tema, y la maqueta los usa a propósito distintos según dónde esté el botón —
 * el de la barra tiene que convivir con la navegación, los de la portada no.
 */
.mpp-barra .wp-block-button__link,
.mpp-hero .wp-block-button__link {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	text-transform: uppercase;
}

.mpp-barra .wp-block-button__link {
	font-size: 1.1875rem;
	letter-spacing: 0.04em;
	padding: 0.625rem 1.25rem;
}

.mpp-hero .wp-block-button__link {
	font-size: 1.375rem;
	letter-spacing: 0.05em;
	padding: 1rem 2.125rem;
}

/* El borde de 2px del botón fantasma se descuenta del padding. */
.mpp-hero .is-style-outline > .wp-block-button__link {
	padding: 0.875rem 2rem;
}

/*
 * Marca: la sigla y el nombre en tres líneas, separados por el filete ámbar.
 * El max-width fuerza el corte: cada palabra tiene 9 o 10 caracteres y dos no
 * entran juntas, así que cae una por línea sin depender de <br>.
 */
.mpp-marca .wp-block-site-title {
	border-left: 2px solid var(--wp--preset--color--ambar);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.12;
	max-width: 11ch;
	padding-left: 0.75rem;
}

/* ── Barra en celular ──────────────────────────────────────────────────── */

/*
 * 600px es el punto de corte del bloque de navegación, no uno del tema: por debajo pasa
 * solo al menú desplegable. De ahí para abajo la barra tiene que entrar en una línea, con
 * el lockup a la izquierda y el hamburguesa a la derecha.
 */
@media (max-width: 599.98px) {
	/*
	 * El botón no entra al lado del hamburguesa sin empujar el lockup a otra línea. La
	 * sección sigue a mano desde el menú, desde el pie y desde la portada.
	 */
	.mpp-barra .wp-block-buttons {
		display: none;
	}

	/*
	 * La franja de la próxima actividad se va del teléfono: en pantalla angosta ocupa tres
	 * líneas de ámbar entre la portada y la agenda, que está dos pantallazos más abajo y
	 * dice lo mismo con la fecha bien puesta.
	 */
	.mpp-aviso {
		display: none;
	}


	.mpp-barra__fila {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
	}

	.mpp-barra__acciones {
		flex: none;
	}

	.mpp-marca {
		min-width: 0;
	}

	.mpp-marca .custom-logo {
		height: auto;
		width: 88px;
	}

	.mpp-marca .wp-block-site-title {
		font-size: 0.8125rem;
		padding-left: 0.625rem;
	}

}


/* ── El menú desplegable ───────────────────────────────────────────────── */

/*
 * El core hereda la alineación de la barra —a la derecha— también dentro del overlay, y los
 * ítems quedaban apretados arriba a la derecha con la pantalla entera vacía. Acá se centran
 * y crecen: es un menú a pantalla completa, no una lista en una esquina.
 */
.mpp-barra .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	box-sizing: border-box;
	justify-content: center;
	/* Menos el padding del contenedor del overlay, o el contenido se pasa y aparece scroll. */
	min-height: calc(100svh - 2rem);
}

/* La alineación no la pone sólo el contenedor: el `ul` hereda la de la barra, a la derecha. */
.mpp-barra .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center;
	justify-content: center;
	width: 100%;
}

.mpp-barra .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.75rem;
	padding-block: 0.25rem;
}

/* ── Barra en tableta ──────────────────────────────────────────────────── */

/*
 * El bloque de navegación vuelve al menú horizontal a los 600px, pero las cuatro secciones
 * más el lockup y el botón no entran hasta cerca de los 800: entre medio, las acciones
 * caían a una segunda línea y la barra fija duplicaba su alto. Acá se sostiene el
 * hamburguesa hasta 782px revirtiendo las dos reglas con las que el core lo apaga. El
 * botón sí entra, y se queda.
 */
@media (max-width: 781.98px) {
	/*
	 * Las dos reglas con las que el core apaga el overlay a partir de 600px, revertidas. Y
	 * de paso el hamburguesa, que viene sin caja, toma el área táctil de 44px: con ella
	 * queda centrado con la sigla. El `display` va acá adentro y no suelto — suelto le gana
	 * al `display: none` del core y el botón aparecía también en escritorio.
	 */
	.mpp-barra .wp-block-navigation__responsive-container-open:not(.always-shown) {
		align-items: center;
		display: flex;
		height: 44px;
		justify-content: center;
		width: 44px;
	}

	.mpp-barra .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ── Portada en celular ────────────────────────────────────────────────── */

/*
 * El mismo corte que la barra: por debajo de 600px el contenido ocupa todo el ancho y las
 * medidas de la maqueta, pensadas para 1920, quedan grandes.
 */
@media (max-width: 599.98px) {
	/* 0.22em de espaciado parten la volanta en dos líneas en cualquier teléfono. */
	.mpp-hero__volanta {
		letter-spacing: 0.14em !important;
	}

	.mpp-hero__volanta::before {
		margin-right: 0.625rem;
	}

	/* Los dos llamados, uno debajo del otro y del mismo ancho: en una sola línea no entran,
	 * y con el ancho del texto quedan de tamaños distintos. */
	.mpp-hero .wp-block-button {
		max-width: 22rem;
		width: 100%;
	}

	.mpp-hero .wp-block-button__link {
		display: block;
		font-size: 1.125rem;
		padding: 0.875rem 1.25rem;
		text-align: center;
	}

	.mpp-hero .is-style-outline > .wp-block-button__link {
		padding: 0.75rem 1.125rem;
	}
}

/* ── Franja de próxima actividad ───────────────────────────────────────── */

/*
 * La portada y la franja son bandas a sangre: lo que viene después va pegado, sin el
 * blockGap que el flujo mete entre hermanos. Se anula para el hermano siguiente de cada
 * una, no sólo entre ellas dos, porque sin actividades próximas la franja no se renderiza
 * y la sección que sigue queda pegada a la portada igual.
 *
 * Gana sin !important porque la regla del core usa :where().
 */
.mpp-hero + *,
.mpp-aviso + * {
	margin-block-start: 0;
}

/*
 * Y entre dos secciones a sangre cualesquiera, por lo mismo: cada una trae su propio
 * fondo y su padding, así que el blockGap del flujo deja en el medio una franja del
 * color de la página. Se notó al sacar de la portada las dos secciones claras que
 * separaban "Lo que venimos haciendo" (azul profundo) de "Sumate" (azul MPP): quedó
 * una banda blanca entre los dos azules.
 */
.alignfull + .alignfull {
	margin-block-start: 0;
}

.mpp-aviso {
	background-color: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.14em;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

.mpp-aviso__interior {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-inline: auto;
	max-width: 1280px;
}

.mpp-aviso__etiqueta {
	font-weight: 600;
}

/* Cuadradito separador, como en la maqueta. */
.mpp-aviso__punto {
	background-color: currentColor;
	height: 6px;
	width: 6px;
}

.mpp-aviso__dato {
	flex: 1 1 auto;
}

/* ── Agenda de actividades ─────────────────────────────────────────────── */

/*
 * Estas tarjetas las arma render.php, no bloques: por eso el diseño vive entero acá y no
 * hay riesgo de romper la validación del editor.
 *
 * Dos colores de la maqueta no están entre los 8 tokens del tema: el borde de tarjeta
 * (#DCE4EA) y el texto secundario (#3B4A57). Van literales, como el #D6E9F5 de la bajada
 * de la portada.
 */
.mpp-agenda__encabezado {
	align-items: flex-end;
	border-bottom: 3px solid var(--wp--preset--color--azul-profundo);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--20);
}

.mpp-agenda__titulo {
	font-size: var(--wp--preset--font-size--titular-1);
	font-weight: 800;
	line-height: 0.95;
	margin: 0.25rem 0 0;
	text-transform: uppercase;
}

/* Es un botón porque abre el diálogo; se disfraza del enlace de la maqueta. */
.mpp-agenda__ver-todo {
	background: none;
	border: 0;
	color: var(--wp--preset--color--azul-mpp);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0;
	text-transform: uppercase;
}

.mpp-agenda__ver-todo:hover {
	color: #b96a16;
}

.mpp-agenda__grilla {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.mpp-agenda__vacio {
	color: #3b4a57;
	margin: 0;
}

.mpp-tarjeta {
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid #dce4ea;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-height: 260px;
	padding: var(--wp--preset--spacing--40);
	position: relative;
}

/*
 * La tarjeta entera abre la actividad, con el enlace del título estirado por encima, como
 * las filas de escritos y crónicas: el título solo daba 26px de alto para el dedo.
 */
.mpp-tarjeta__titulo a::after {
	content: "";
	inset: 0;
	position: absolute;
}

/* El botón de la tarjeta CTA queda por encima de cualquier enlace estirado. */
.mpp-tarjeta__boton {
	position: relative;
	z-index: 1;
}

.mpp-tarjeta:has(.mpp-tarjeta__titulo a):hover {
	border-color: var(--wp--preset--color--azul-profundo);
}

.mpp-tarjeta:not(.mpp-tarjeta--cta):hover {
	background-color: var(--wp--preset--color--gris-claro);
}

.mpp-tarjeta__fecha {
	align-items: baseline;
	color: var(--wp--preset--color--azul-profundo);
	display: flex;
	gap: 0.625rem;
	margin: 0;
}

.mpp-tarjeta__dia {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 0.8;
}

.mpp-tarjeta__mes {
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mpp-tarjeta__titulo {
	font-size: var(--wp--preset--font-size--titular-3);
	font-weight: 700;
	line-height: 1.02;
	margin: 0;
	text-transform: uppercase;
}

.mpp-tarjeta__titulo a {
	color: inherit;
	text-decoration: none;
}

.mpp-tarjeta__bajada {
	color: #3b4a57;
	flex: 1;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	margin: 0;
}

.mpp-tarjeta__lugar {
	color: var(--wp--preset--color--azul-mpp);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.mpp-tarjeta--cta {
	background-color: var(--wp--preset--color--azul-profundo);
	border-color: var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--blanco);
	justify-content: space-between;
}

.mpp-tarjeta__volanta {
	color: var(--wp--preset--color--celeste-claro);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.18em;
	margin: 0;
	text-transform: uppercase;
}

/* El color va explícito: theme.json pinta los títulos de azul MPP y heredar no alcanza. */
.mpp-tarjeta--cta .mpp-tarjeta__titulo {
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--titular-2);
	font-weight: 800;
	line-height: 0.98;
}

.mpp-tarjeta__boton {
	align-self: flex-start;
	background-color: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 0.75rem 1.375rem;
	text-decoration: none;
	text-transform: uppercase;
}

.mpp-tarjeta__boton:hover {
	background-color: var(--wp--preset--color--azul-mpp);
	color: var(--wp--preset--color--blanco);
}

/* ── Página de una actividad ───────────────────────────────────────────── */

.mpp-ficha {
	color: var(--wp--preset--color--celeste-claro);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

/* ── Lo que venimos haciendo ───────────────────────────────────────────── */

/*
 * Va sobre azul profundo, así que el encabezado usa el filete celeste en vez del azul
 * de la agenda: sobre el fondo oscuro, el azul profundo no se vería.
 */
.mpp-jornadas__encabezado {
	align-items: flex-end;
	border-bottom: 3px solid var(--wp--preset--color--celeste);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	margin-bottom: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
}

/*
 * Celeste claro y no ámbar: sobre azul profundo da 6,6:1 contra 3,8:1 del ámbar, y la regla
 * dura del manual reserva el ámbar para botón, filete y etiqueta de fecha. El ámbar queda
 * para el hover, donde el tamaño ya lo vuelve texto grande.
 */
.mpp-jornadas__ver-todas {
	color: var(--wp--preset--color--celeste-claro);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.mpp-jornadas__ver-todas:hover,
.mpp-jornadas__ver-todas:focus-visible {
	color: var(--wp--preset--color--ambar);
	text-decoration: underline;
}

.mpp-jornadas__titulo {
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--titular-1);
	font-weight: 800;
	line-height: 0.95;
	margin: 0;
	text-transform: uppercase;
}

.mpp-jornadas__bajada {
	color: #d6e9f5;
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 60ch;
}

/*
 * Columnas más anchas que las de la agenda: acá manda la foto, y con 320 de mínimo
 * entran tres a 1280px, que es lo que deja el default de seis jornadas en dos filas
 * parejas en vez de una de cuatro y otra de dos.
 */
.mpp-jornadas__grilla {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.mpp-jornada__enlace {
	color: inherit;
	display: block;
	text-decoration: none;
}

.mpp-jornada__imagen {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Sin foto queda el azul MPP: un hueco blanco rompería la grilla. */
.mpp-jornada__imagen--vacia {
	background-color: var(--wp--preset--color--azul-mpp);
}

.mpp-jornada__enlace:hover .mpp-jornada__imagen {
	opacity: 0.85;
}

.mpp-jornada__fecha {
	color: var(--wp--preset--color--celeste-claro);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.16em;
	margin: var(--wp--preset--spacing--20) 0 0;
	text-transform: uppercase;
}

.mpp-jornada__titulo {
	color: var(--wp--preset--color--blanco);
	font-size: var(--wp--preset--font-size--titular-3);
	font-weight: 700;
	line-height: 1.02;
	margin: 0.25rem 0 0;
	text-transform: uppercase;
}

.mpp-jornada__enlace:hover .mpp-jornada__titulo {
	color: var(--wp--preset--color--celeste-claro);
}

.mpp-jornada__bajada {
	color: #d6e9f5;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	margin: 0.5rem 0 0;
}

/* ── Calendario completo ───────────────────────────────────────────────── */

.mpp-calendario {
	background-color: var(--wp--preset--color--blanco);
	border: 3px solid var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--tinta);
	max-width: min(32rem, calc(100vw - 2rem));
	padding: var(--wp--preset--spacing--40);
	width: 100%;
}

.mpp-calendario::backdrop {
	background-color: rgba(10, 62, 100, 0.72);
}

.mpp-calendario__barra {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
}

.mpp-calendario__mes {
	flex: 1;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--titular-3);
	font-weight: 800;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
}

.mpp-calendario__paso,
.mpp-calendario__cerrar {
	background: none;
	border: 0;
	color: var(--wp--preset--color--azul-profundo);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--titular-3);
	line-height: 1;
	padding: 0.25rem 0.5rem;
}

.mpp-calendario__paso[disabled] {
	cursor: default;
	opacity: 0.3;
}

.mpp-calendario__tabla {
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--small);
	table-layout: fixed;
	width: 100%;
}

.mpp-calendario__tabla th {
	color: var(--wp--preset--color--azul-mpp);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 600;
	letter-spacing: 0.08em;
	padding-bottom: 0.5rem;
	text-transform: uppercase;
}

.mpp-calendario__tabla td {
	padding: 0.375rem 0;
	text-align: center;
}

/* Único uso del ámbar acá: marcar los días que tienen algo. */
.mpp-calendario__dia--activo {
	background-color: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--tinta);
	font-weight: 600;
}

.mpp-calendario__lista {
	border-top: 1px solid #dce4ea;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--30) 0 0;
}

.mpp-calendario__item {
	display: grid;
	gap: 0.125rem;
	margin-bottom: var(--wp--preset--spacing--30);
}

.mpp-calendario__item:last-child {
	margin-bottom: 0;
}

.mpp-calendario__cuando,
.mpp-calendario__lugar {
	color: var(--wp--preset--color--azul-mpp);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mpp-calendario__titulo {
	color: var(--wp--preset--color--azul-profundo);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--titular-3);
	font-weight: 700;
	line-height: 1.05;
	text-decoration: none;
	text-transform: uppercase;
}

/* Con movimiento reducido no se reproduce nada: queda el poster con el degradado. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover__video-background {
		display: none;
	}
}

/*
 * Entre header, main y footer no va separación: cada uno trae su propio fondo y
 * su padding. El gap de la raíz dejaba una franja blanca entre el header y la
 * portada. El blockGap del tema sigue valiendo dentro de cada sección.
 *
 * Gana por especificidad: la regla del core usa :where(), que no suma.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ── Sumate ────────────────────────────────────────────────────────────── */

/*
 * Tarjeta blanca sobre el azul de la sección, con los grises exactos de la maqueta:
 * #c3d0da el borde del campo, #f7f9fb su relleno y #4b5b68 la etiqueta. Al principio
 * se habían reemplazado por los de las tarjetas de la agenda (#dce4ea y #3b4a57) para
 * no sumar literales, pero el borde quedaba tan claro que los campos no se leían como
 * cajas y el formulario entero perdía forma.
 */
.mpp-sumate__bajada {
	max-width: 46ch;
}

.mpp-formulario {
	background-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	padding: clamp(1.5rem, 3vw, 2.375rem);
}

.mpp-formulario__campos {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
}

.mpp-formulario__campo {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	margin: 0;
}

.mpp-formulario__etiqueta {
	color: #4b5b68;
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* "(opcional)" es una aclaración, no una etiqueta: no va en versalitas espaciadas. */
.mpp-formulario__opcional {
	letter-spacing: 0;
	text-transform: none;
}

.mpp-formulario__entrada {
	background-color: #f7f9fb;
	border: 1px solid #c3d0da;
	box-sizing: border-box;
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--texto);
	font-size: 1rem;
	padding: 0.8125rem 0.875rem;
	width: 100%;
}

.mpp-formulario__area {
	resize: vertical;
}

.mpp-formulario__boton {
	background-color: var(--wp--preset--color--ambar);
	border: 0;
	color: var(--wp--preset--color--tinta);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	min-height: 56px;
	padding: 1rem;
	text-transform: uppercase;
}

.mpp-formulario__boton:hover {
	background-color: #b96a16;
}

.mpp-formulario__aviso {
	border-left: 4px solid var(--wp--preset--color--celeste);
	background-color: var(--wp--preset--color--gris-claro);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1.125rem;
	padding: 0.875rem 1rem;
}

.mpp-formulario__aviso--error {
	border-left-color: var(--wp--preset--color--ambar);
}

/*
 * Honeypot. No va con display:none ni con hidden: un bot que descarta lo oculto no
 * lo completaría y la trampa no serviría de nada. Fuera de la pantalla lo ve igual
 * que cualquier otro campo del formulario.
 */
.mpp-formulario__trampa {
	left: -9999px;
	position: absolute;
}

/* ── Lineamientos ──────────────────────────────────────────────────────── */

/*
 * El número lo pone un contador y no un bloque de contenido: así se renumera solo
 * cuando desde el editor se agrega, se saca o se reordena un lineamiento, que es lo
 * que va a pasar. Es un ordinal decorativo — el título de cada punto ya dice de qué
 * se trata — así que no hace falta que esté en el DOM como texto.
 */
.mpp-lineamientos {
	counter-reset: mpp-lineamiento;
}

.mpp-lineamiento {
	border-top: 1px solid var(--wp--preset--color--celeste);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--40);
}

/*
 * El numeral va en azul profundo como el día de las tarjetas de la agenda, no en
 * ámbar: sobre blanco el ámbar da 2,9:1 y no llega a AA ni como texto grande. El
 * ámbar entra abajo, de filete, que es uno de los tres usos que le deja el manual.
 */
.mpp-lineamiento::before {
	align-self: flex-start;
	border-bottom: 4px solid var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--azul-profundo);
	content: counter(mpp-lineamiento, decimal-leading-zero);
	counter-increment: mpp-lineamiento;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 0.8;
	padding-bottom: 0.5rem;
}

/*
 * La base de 20rem es la que decide el salto a móvil sin media query: mientras el
 * cuerpo entre, el número queda al lado; cuando no, baja solo arriba del título.
 */
.mpp-lineamiento__cuerpo {
	flex: 1 1 20rem;
	min-width: 0;
}

.mpp-lineamiento__cuerpo > :first-child {
	margin-block-start: 0;
}

.mpp-lineamiento__cuerpo > h3 {
	text-transform: uppercase;
}

/* La bajada de cada punto: la misma línea que la portada muestra en su tarjeta. */
.mpp-lineamiento__resumen {
	color: #3b4a57;
	font-size: var(--wp--preset--font-size--destacado);
	line-height: 1.5;
	margin-block-start: 0.5rem;
	max-width: 56ch;
	text-wrap: pretty;
}

/* ── Lineamientos en la portada ────────────────────────────────────────── */

/*
 * Copia la maqueta `lineamientos/Lineamientos MPP.dc.html`. A diferencia del resto de las
 * secciones, el filete del encabezado es azul profundo y no celeste, y el h2 va en tinta:
 * así lo dibuja la maqueta, y sobre blanco los dos leen mejor que el celeste.
 */
.mpp-lineamientos-seccion__encabezado {
	border-bottom: 3px solid var(--wp--preset--color--azul-profundo);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: var(--wp--preset--spacing--30);
}

/* La maqueta lo lleva a 68px y el token más grande del tema, `consigna`, topa en 76 pero
 * está reservado a la portada y al 404. Va como clamp literal, como el h2 de "Sumate". */
.mpp-lineamientos-seccion__titulo {
	font-size: clamp(2.25rem, 5.2vw, 4.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 0.92;
	margin: 0;
	max-width: 18ch;
	text-transform: uppercase;
}

.mpp-lineamientos-seccion__bajada {
	color: #3b4a57;
	font-size: var(--wp--preset--font-size--destacado);
	line-height: 1.5;
	margin: 0;
	max-width: 56ch;
	text-wrap: pretty;
}

/*
 * 270px de mínimo: con los siete puntos más la tarjeta del documento entran cuatro
 * columnas a 1280px, que es lo que deja las ocho tarjetas en dos filas parejas.
 */
.mpp-lineamientos-seccion__grilla {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
	margin-top: var(--wp--preset--spacing--30);
}

.mpp-lineamiento-breve {
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid #dce4ea;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	min-height: 250px;
	padding: 1.625rem 1.5rem 1.875rem;
	text-decoration: none;
}

.mpp-lineamiento-breve:hover,
.mpp-lineamiento-breve:focus-visible {
	background-color: var(--wp--preset--color--gris-claro);
	border-color: var(--wp--preset--color--azul-profundo);
}

.mpp-lineamiento-breve__fila {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.mpp-lineamiento-breve__numero {
	color: var(--wp--preset--color--azul-profundo);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 0.8;
}

/* El ámbar oscurecido y no el de la paleta: sobre blanco el `ambar` da 2,9:1, y acá la
 * flecha es el único elemento chico que lo usaría. */
.mpp-lineamiento-breve__flecha {
	color: #b96a16;
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: 0.875rem;
}

.mpp-lineamiento-breve__filete {
	background-color: var(--wp--preset--color--ambar);
	display: block;
	height: 4px;
	width: 2.125rem;
}

.mpp-lineamiento-breve__nombre {
	color: var(--wp--preset--color--azul-profundo);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.5625rem;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
}

.mpp-lineamiento-breve__resumen {
	color: #3b4a57;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-wrap: pretty;
}

/* ── La tarjeta destacada ──────────────────────────────────────────────── */

.mpp-lineamiento-breve--eje {
	background-color: var(--wp--preset--color--azul-profundo);
	border-color: var(--wp--preset--color--azul-profundo);
	color: var(--wp--preset--color--blanco);
}

.mpp-lineamiento-breve--eje:hover,
.mpp-lineamiento-breve--eje:focus-visible {
	background-color: var(--wp--preset--color--azul-mpp);
	border-color: var(--wp--preset--color--azul-mpp);
}

.mpp-lineamiento-breve--eje .mpp-lineamiento-breve__numero,
.mpp-lineamiento-breve--eje .mpp-lineamiento-breve__nombre {
	color: var(--wp--preset--color--blanco);
}

.mpp-lineamiento-breve--eje .mpp-lineamiento-breve__nombre {
	font-size: 1.8125rem;
	font-weight: 800;
	line-height: 1.02;
}

.mpp-lineamiento-breve--eje .mpp-lineamiento-breve__resumen {
	color: #d6e9f5;
}

/* La maqueta escribe la etiqueta en azul profundo sobre ámbar, que da 3,7:1 y no llega a
 * AA con estos 10,5px. Va en tinta, como los botones del tema. */
.mpp-lineamiento-breve__etiqueta {
	background-color: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: 0.65625rem;
	letter-spacing: 0.16em;
	padding: 4px 8px;
	text-transform: uppercase;
}

/* ── La tarjeta del documento ──────────────────────────────────────────── */

/*
 * La única tarjeta ámbar de la sección, y la que reemplaza al "ver todos" del encabezado.
 * Roza la regla del manual —el ámbar no ocupa fondos grandes—, pero es una de ocho celdas
 * y es el CTA de la sección, que es justo el uso que el manual le reserva.
 */
.mpp-lineamiento-breve--documento {
	background-color: var(--wp--preset--color--ambar);
	border-color: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--tinta);
}

.mpp-lineamiento-breve--documento .mpp-lineamiento-breve__nombre,
.mpp-lineamiento-breve--documento .mpp-lineamiento-breve__resumen,
.mpp-lineamiento-breve--documento .mpp-lineamiento-breve__flecha {
	color: inherit;
}

.mpp-lineamiento-breve--documento .mpp-lineamiento-breve__nombre {
	font-weight: 800;
}

.mpp-lineamiento-breve--documento .mpp-lineamiento-breve__etiqueta {
	background-color: transparent;
	font-size: 0.6875rem;
	padding: 0;
}

.mpp-lineamiento-breve--documento .mpp-lineamiento-breve__flecha {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 2.125rem;
	font-weight: 800;
	line-height: 0.8;
}

.mpp-lineamiento-breve--documento .mpp-lineamiento-breve__filete {
	background-color: var(--wp--preset--color--tinta);
}

/*
 * El hover de la maqueta oscurece el fondo a #B96A16 y pasa el texto a blanco, que da
 * 4,1:1 y deja el resumen de 15px por debajo de AA. En su lugar se subraya el título y la
 * flecha se corre, que se ve igual de vivo sin romper el contraste.
 */
.mpp-lineamiento-breve--documento:hover,
.mpp-lineamiento-breve--documento:focus-visible {
	background-color: var(--wp--preset--color--ambar);
	border-color: var(--wp--preset--color--tinta);
}

.mpp-lineamiento-breve--documento:hover .mpp-lineamiento-breve__nombre,
.mpp-lineamiento-breve--documento:focus-visible .mpp-lineamiento-breve__nombre {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mpp-lineamiento-breve--documento:hover .mpp-lineamiento-breve__flecha,
.mpp-lineamiento-breve--documento:focus-visible .mpp-lineamiento-breve__flecha {
	transform: translateX(0.25rem);
}

.mpp-lineamiento-breve__flecha {
	transition: transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.mpp-lineamiento-breve__flecha {
		transition: none;
	}
}

/* En el editor el bloque muestra sólo el encabezado editable y una nota. */
.mpp-lineamientos-seccion__nota {
	color: #3b4a57;
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* ── Escritos — el listado ─────────────────────────────────────────────── */

/*
 * Copia la maqueta `assets/Manual de identidad Peronista Pergamino(1)/Escritos MPP.dc.html`.
 * Vive en `templates/category-escritos.html` y no en `archive.html`, que sigue sirviendo al
 * resto de las categorías con su grilla de dos columnas.
 */
.mpp-listado__encabezado {
	border-bottom: 3px solid var(--wp--preset--color--azul-profundo);
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding-bottom: 1.5rem;
}

.mpp-listado__titulo {
	color: var(--wp--preset--color--azul-profundo);
	font-size: clamp(2.25rem, 5.2vw, 4.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 0.92;
	margin: 0;
	text-transform: uppercase;
}

.mpp-listado__bajada,
.mpp-listado__bajada > p {
	color: #3b4a57;
	font-size: var(--wp--preset--font-size--destacado);
	line-height: 1.5;
	margin: 0;
	max-width: 52ch;
}

/*
 * Toda la fila es el enlace del título, estirado con un ::after. Así el escrito se abre
 * tocando cualquier parte de la fila sin repetir el enlace tres veces para el teclado y el
 * lector de pantalla, que es lo que pasaría con el título, el extracto y el "leer" enlazados.
 */
/*
 * El aire entre fecha, título, extracto y "leer" lo pone esta grilla y no el `blockGap` del
 * grupo: style.css se encola antes que los estilos de layout del core pero se imprime
 * después, y con la misma especificidad el `margin: 0` de acá gana y deja el gap en nada.
 */
.mpp-escrito {
	border-bottom: 1px solid #dce4ea;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(1.625rem, 3.4vw, 2.375rem) 0;
	position: relative;
}

.mpp-escrito__titulo a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.mpp-escrito:hover {
	background-color: var(--wp--preset--color--gris-claro);
}

.mpp-escrito__fecha {
	color: var(--wp--preset--color--azul-mpp);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* El filete de la maqueta al lado de la fecha, sin un bloque vacío que lo dibuje. */
.mpp-escrito__fecha::after {
	background-color: var(--wp--preset--color--ambar);
	content: "";
	display: inline-block;
	height: 2px;
	margin-left: 0.75rem;
	vertical-align: middle;
	width: 1.5rem;
}

.mpp-escrito__titulo {
	font-size: clamp(1.875rem, 3.8vw, 2.875rem);
	font-weight: 800;
	line-height: 0.98;
	margin: 0;
	max-width: 22ch;
	text-transform: uppercase;
	text-wrap: balance;
}

.mpp-escrito__titulo a {
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
}

.mpp-escrito:hover .mpp-escrito__titulo a,
.mpp-escrito__titulo a:focus-visible {
	color: #b96a16;
}

.mpp-escrito__extracto,
.mpp-escrito__extracto > p {
	color: #3b4a57;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
	margin: 0;
	max-width: 60ch;
	text-wrap: pretty;
}

.mpp-escrito__leer {
	color: #b96a16;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
	text-transform: uppercase;
}

/* ── Actividades — el listado de crónicas ──────────────────────────────── */

/*
 * La misma fila que un escrito, con la foto a la izquierda: es lo que distingue a una
 * crónica de un texto. El aire entre los elementos va acá y no en el `blockGap` del grupo,
 * por lo mismo que en `.mpp-escrito`.
 */
.mpp-cronica {
	border-bottom: 1px solid #dce4ea;
	display: grid;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: minmax(0, 1fr);
	padding: clamp(1.625rem, 3.4vw, 2.375rem) 0;
	position: relative;
}

@media (min-width: 40rem) {
	.mpp-cronica {
		align-items: start;
		grid-template-columns: 20rem minmax(0, 1fr);
	}

	/* Una crónica sin imagen destacada no imprime el bloque, y sin esto su texto quedaría
	 * en la columna angosta de la foto. */
	.mpp-cronica:not(:has(.mpp-cronica__foto)) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mpp-cronica__foto {
	margin: 0;
}

.mpp-cronica__foto img {
	aspect-ratio: 16 / 10;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.mpp-cronica:hover {
	background-color: var(--wp--preset--color--gris-claro);
}

.mpp-cronica:hover .mpp-cronica__foto img {
	opacity: 0.9;
}

.mpp-cronica__texto {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: minmax(0, 1fr);
}

.mpp-cronica__fecha {
	color: var(--wp--preset--color--azul-mpp);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mpp-cronica__fecha::after {
	background-color: var(--wp--preset--color--ambar);
	content: "";
	display: inline-block;
	height: 2px;
	margin-left: 0.75rem;
	vertical-align: middle;
	width: 1.5rem;
}

/* Más chico que el de un escrito: acá el título comparte la fila con la foto. */
.mpp-cronica__titulo {
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 800;
	line-height: 1;
	margin: 0;
	max-width: 22ch;
	text-transform: uppercase;
	text-wrap: balance;
}

.mpp-cronica__titulo a {
	color: var(--wp--preset--color--azul-profundo);
	text-decoration: none;
}

.mpp-cronica__titulo a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.mpp-cronica:hover .mpp-cronica__titulo a,
.mpp-cronica__titulo a:focus-visible {
	color: #b96a16;
}

.mpp-cronica__extracto,
.mpp-cronica__extracto > p {
	color: #3b4a57;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.55;
	margin: 0;
	max-width: 60ch;
	text-wrap: pretty;
}

.mpp-cronica__leer {
	color: #b96a16;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin: 0;
	text-transform: uppercase;
}

/* ── El cierre de los listados ─────────────────────────────────────────── */

.mpp-cierre {
	margin-top: clamp(2rem, 4vw, 3.25rem);
	padding: clamp(1.625rem, 3.4vw, 2.5rem);
}

.mpp-cierre__texto {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	max-width: 46ch;
}

.mpp-cierre__titulo {
	color: var(--wp--preset--color--blanco);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 800;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.mpp-cierre__bajada {
	color: #d6e9f5;
	margin: 0;
}

/* Como en el resto del tema: 21px de la maqueta, pero en tinta y no en blanco, que sobre
 * ámbar da 2,8:1. */
.mpp-cierre .wp-block-button__link {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.3125rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	padding: 0.875rem 1.75rem;
	text-transform: uppercase;
}

.mpp-cierre .wp-block-button__link:hover,
.mpp-cierre .wp-block-button__link:focus-visible {
	background-color: #b96a16;
}

/* ── Pie de sitio ──────────────────────────────────────────────────────── */

/*
 * Copia la maqueta `assets/Manual de identidad Peronista Pergamino(1)/Footer MPP.dc.html`.
 * Los grises azulados del pie no están entre los 8 tokens y viven literales acá:
 * `#B9D7E9` el texto de presentación, `#7FB9D8` las etiquetas de columna y el celeste
 * claro al 28 % / 45 % los filetes y los bordes de las redes.
 */
.mpp-pie {
	border-top: 5px solid var(--wp--preset--color--ambar);
}

.mpp-pie__presentacion {
	align-items: center;
	border-bottom: 1px solid rgba(143, 208, 236, 0.28);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.mpp-pie__logo {
	flex: none;
	margin: 0;
}

.mpp-pie__logo img {
	display: block;
	height: auto;
	width: 132px;
}

/*
 * El logo del pie es vertical: a 132px de ancho mide 212 de alto y en el teléfono se come
 * media pantalla. La regla va acá y no con el resto del celular, más arriba: misma
 * especificidad, y la que queda última en el archivo es la que manda.
 */
@media (max-width: 599.98px) {
	.mpp-pie__logo img {
		width: 72px;
	}
}

.mpp-pie__lema {
	color: #b9d7e9;
	flex: 1 1 18.75rem;
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	line-height: 1.55;
	margin: 0;
	max-width: 46ch;
	text-wrap: pretty;
}

.mpp-pie__columnas {
	align-items: start;
	display: grid;
	gap: clamp(1.625rem, 3.5vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.mpp-pie__columna {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mpp-pie__etiqueta {
	border-bottom: 1px solid rgba(143, 208, 236, 0.28);
	color: #7fb9d8;
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	margin: 0;
	padding-bottom: 0.625rem;
	text-transform: uppercase;
}

/* El menú del pie es el mismo bloque de navegación que la barra, en vertical. */
.mpp-pie__menu .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.mpp-pie__menu .wp-block-navigation-item__content:hover,
.mpp-pie__menu .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--ambar);
}

.mpp-pie__direccion {
	color: var(--wp--preset--color--blanco);
	font-size: 0.96875rem;
	line-height: 1.6;
	margin: 0;
}

.mpp-pie__mail {
	align-self: flex-start;
	font-size: 0.84375rem;
	margin: 0;
}

.mpp-pie__mail a {
	border-bottom: 1px solid var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--blanco);
	padding-bottom: 2px;
	text-decoration: none;
}

.mpp-pie__mail a:hover,
.mpp-pie__mail a:focus-visible {
	color: var(--wp--preset--color--ambar);
}

/* Los cuadrados de 44px de la maqueta, que es además el área táctil mínima. */
.mpp-pie__redes {
	margin-top: 0.5rem;
}

/*
 * El color del icono va acá y no en el atributo `iconColor` del bloque: ese lo emite como
 * `style` en línea y no habría forma de cambiarlo en el hover sin un !important.
 */
.mpp-pie__redes .wp-block-social-link {
	border: 1px solid rgba(143, 208, 236, 0.45);
	border-radius: 0;
	color: var(--wp--preset--color--blanco);
	height: 44px;
	padding: 0;
	width: 44px;
}

/* La maqueta no agranda el icono al pasar por encima; el cuadrado se pinta de ámbar. */
.mpp-pie__redes .wp-block-social-link:hover {
	transform: none;
}

.mpp-pie__redes .wp-block-social-link-anchor {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	padding: 0;
	width: 100%;
}

.mpp-pie__redes .wp-block-social-link:hover,
.mpp-pie__redes .wp-block-social-link:focus-within {
	background-color: var(--wp--preset--color--ambar);
	border-color: var(--wp--preset--color--ambar);
}

.mpp-pie__redes .wp-block-social-link:hover,
.mpp-pie__redes .wp-block-social-link:focus-within {
	color: var(--wp--preset--color--tinta);
}

.mpp-pie__invitacion {
	color: #b9d7e9;
	font-size: 0.96875rem;
	line-height: 1.6;
	margin: 0;
	max-width: 30ch;
}

/* 20px y 44px de alto mínimo, como la maqueta; en tinta y no en blanco, que sobre ámbar
 * da 2,8:1. */
.mpp-pie .wp-block-button__link {
	align-items: center;
	display: flex;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	min-height: 44px;
	padding: 0.8125rem 1.5rem;
	text-transform: uppercase;
}

.mpp-pie .wp-block-button__link:hover,
.mpp-pie .wp-block-button__link:focus-visible {
	background-color: #b96a16;
}

/* ── Pie: la barra de cierre ───────────────────────────────────────────── */

.mpp-pie__barra {
	border-top: 1px solid rgba(143, 208, 236, 0.28);
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.mpp-pie__barra-contenido {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	justify-content: space-between;
	margin-inline: auto;
	max-width: 1280px;
	padding: 1rem 0;
}

.mpp-pie__copyright,
.mpp-pie__consigna {
	color: #7fb9d8;
	font-size: 0.71875rem;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

.mpp-pie__consigna {
	color: var(--wp--preset--color--celeste-claro);
}

/* ── Áreas táctiles ────────────────────────────────────────────────────── */

/*
 * Enlaces que son sólo texto y quedaban con menos de 24px de alto —el mínimo de la WCAG
 * 2.5.8—: se les da la caja con padding, sin cambiar cómo se ven. Los títulos de las filas
 * de escritos y crónicas no están acá: ahí el área es la fila entera, por el enlace
 * estirado.
 */
.mpp-pie__mail a,
.mpp-contacto a {
	display: inline-block;
	padding-block: 0.375rem;
}

.wp-block-post-navigation-link a {
	display: inline-block;
	padding-block: 0.625rem;
}

/*
 * Anterior y siguiente, uno a cada lado, también en el teléfono. Si la entrada es la
 * primera o la última, el bloque que falta no se renderiza: el margen automático mantiene
 * al que queda en su lado.
 */
.mpp-entrada-nav {
	align-items: center;
}

.mpp-entrada-nav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

/* El botón que abre el calendario y los "ver todas" de las secciones. */
.mpp-agenda__ver-todo,
.mpp-jornadas__ver-todas,
.mpp-lineamientos-seccion__ver-todos {
	display: inline-block;
	padding-block: 0.5rem;
}

/* Los títulos de los listados genéricos —búsqueda, index, archivo— quedaban en 24px justos
 * en pantallas angostas. Los de escritos y crónicas no: ahí el área es la fila entera. */
.wp-block-post-title:not([class*="mpp-"]) a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* La categoría de la cabecera de una entrada. */
.wp-block-post-terms a {
	display: inline-block;
	padding-block: 0.25rem;
}

/* ── Datos de contacto ─────────────────────────────────────────────────── */

/*
 * El color de enlace del tema es azul MPP, que es justo el fondo de "Sumate", y en el
 * pie el fondo es azul profundo, que le da 1,6:1. En los dos casos el enlace quedaría
 * invisible, así que hereda el color del texto de su sección y se distingue por el
 * subrayado, que ya viene de theme.json.
 */
.mpp-contacto a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.mpp-contacto a:hover,
.mpp-contacto a:focus-visible {
	color: var(--wp--preset--color--celeste-claro);
}

/* ── Escritos ──────────────────────────────────────────────────────────── */

/*
 * La firma de un escrito. Va como párrafo del cuerpo y no como campo propio: el autor no
 * es un usuario del sitio y no hace falta que sea un dato consultable (ver ADR-006).
 */
.mpp-firma {
	color: var(--wp--preset--color--azul-mpp);
	font-family: var(--wp--preset--font-family--apoyo);
	font-size: var(--wp--preset--font-size--etiqueta);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/*
 * El bloque verse de core es un <pre>: hereda la monoespaciada del navegador y el poema
 * queda con cara de listado de código. Lo único que se le pide es que conserve los saltos
 * de línea.
 */
.wp-block-verse {
	font-size: var(--wp--preset--font-size--destacado);
	line-height: 1.7;
}