/*
Theme Name: Malanga Blue
Theme URI: https://malanga.blue/
Author: Rafael Muñoz
Author URI: https://malanga.blue/
Description: Tema de bloques para una red de historias en WordPress Multisite. Cada sitio es un mundo: portada a pantalla completa con imagen o vídeo, secciones libres (textos, retratos, imágenes a todo el ancho, vídeos) y un tono propio. El sitio principal es la cartelera que lleva a todos los mundos. Todo se ajusta en Apariencia → Malanga Blue.
Version: 2.6.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: malanga-blue
Tags: blog, portfolio, full-site-editing, custom-colors, featured-images, translation-ready
*/

/* ------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------ */

:root {
	--mb-papel: var(--wp--preset--color--base);
	--mb-sombra: var(--wp--preset--color--surface);
	--mb-linea: var(--wp--preset--color--line);
	--mb-tinta: var(--wp--preset--color--contrast);
	--mb-suave: var(--wp--preset--color--muted);
	--mb-tono: var(--wp--preset--color--accent);
	--mb-tono-claro: var(--wp--preset--color--accent-bright);
	--mb-fondo: var(--wp--preset--color--deep);
	--mb-fondo-2: var(--wp--preset--color--deep-2);
	--mb-sobre-fondo: var(--wp--preset--color--on-deep);
	--mb-display: var(--wp--preset--font-family--display);
	--mb-ui: var(--wp--preset--font-family--ui);
	--mb-borde: clamp(1.25rem, 4vw, 3.5rem);
	--mb-ancho-max: 96rem;
	--mb-margen: max(var(--mb-borde), calc((100vw - var(--mb-ancho-max)) / 2 + var(--mb-borde)));
	--mb-lomo: 0rem;
	--mb-barra: var(--wp-admin--admin-bar--height, 0px);
	--mb-curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mb-barra) + 5rem);
	-webkit-text-size-adjust: 100%;
}

body {
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

::selection {
	background: var(--mb-tono);
	color: var(--mb-papel);
}

:focus-visible {
	outline: 2px solid var(--mb-tono);
	outline-offset: 3px;
	border-radius: 2px;
}

img,
video {
	max-width: 100%;
	height: auto;
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

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

main.mb-principal > * {
	margin-block-start: 0;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* El mismo contenedor para cabecera, portada, secciones y pie: todo queda alineado en cualquier pantalla. */
.mb-ancho,
.mb-cabecera {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--mb-ancho-max);
	margin-inline: auto !important;
	padding-inline: var(--mb-borde);
}

/* ------------------------------------------------------------------
   2. Barra de lectura
   ------------------------------------------------------------------ */

.mb-progreso {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.single .mb-progreso {
		display: block;
		position: fixed;
		z-index: 70;
		top: var(--mb-barra);
		left: 0;
		right: 0;
		height: 3px;
		background: var(--mb-tono);
		transform-origin: 0 50%;
		animation: mb-progreso linear both;
		animation-timeline: scroll(root block);
	}

	@keyframes mb-progreso {
		from {
			transform: scaleX(0);
		}
		to {
			transform: scaleX(1);
		}
	}
}

/* ------------------------------------------------------------------
   3. Cabecera
   ------------------------------------------------------------------ */

.wp-site-blocks > header {
	--mb-cab-tinta: var(--mb-tinta);
	position: sticky;
	top: var(--mb-barra);
	z-index: 50;
	color: var(--mb-cab-tinta);
	border-bottom: 1px solid var(--mb-linea);
	transition: color 0.3s, border-color 0.3s;
}

/* El desenfoque va en un pseudoelemento para no encerrar el menú móvil dentro de la cabecera. */
.wp-site-blocks > header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in oklab, var(--mb-papel) 88%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	transition: opacity 0.3s;
}

/* Sobre una portada con imagen o vídeo, la cabecera es transparente hasta que se baja. */
.mb-hero-medio .wp-site-blocks > header {
	position: fixed;
	left: 0;
	right: 0;
}

.mb-hero-medio:not(.mb-desplazado) .wp-site-blocks > header {
	--mb-cab-tinta: #fff;
	border-bottom-color: transparent;
}

.mb-hero-medio:not(.mb-desplazado) .wp-site-blocks > header::before {
	opacity: 0;
}

.mb-cabecera {
	padding-block: 0.85rem;
	gap: 1rem;
}

.mb-cabecera .wp-block-site-title {
	margin: 0;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mb-cabecera .wp-block-site-title a,
.mb-cabecera .wp-block-navigation a,
.mb-cabecera .wp-block-navigation__responsive-container-open {
	color: var(--mb-cab-tinta);
}

/* Logo de la casa (sitio principal) y gato pequeño (en cada mundo) */
.mb-cabecera__casa {
	gap: 0.85rem;
	min-width: 0;
}

.mb-logo,
.mb-marca {
	display: block;
	flex: none;
	line-height: 0;
}

.mb-logo img {
	display: block;
	width: auto;
	height: 3.75rem;
}

.mb-marca img {
	display: block;
	width: auto;
	height: var(--mb-gato-alto);
}

/* En cada mundo, la línea sobre la que se asoma el gato sigue bajo el título y se afina hasta desaparecer. */
.mb-cabecera__casa--mundo {
	--mb-gato-alto: 3rem;
	--mb-marca-color: #022a82;
	position: relative;
	align-items: flex-end;
	gap: 0;
	margin-right: 1.5rem;
}

.mb-cabecera__casa--mundo .wp-block-site-title {
	margin-left: 0.7rem;
	padding-bottom: calc(var(--mb-gato-alto) * 0.17);
	line-height: 1.1;
}

.mb-cabecera__casa--mundo::after {
	content: "";
	position: absolute;
	left: calc(var(--mb-gato-alto) * 780 / 409 - 1px);
	right: -1.5rem;
	bottom: calc(var(--mb-gato-alto) * 3 / 409);
	height: calc(var(--mb-gato-alto) * 20 / 409);
	background: var(--mb-marca-color);
	clip-path: polygon(0 0, 100% 46%, 100% 54%, 0 100%);
	pointer-events: none;
}

.mb-hero-medio:not(.mb-desplazado) .mb-cabecera__casa--mundo {
	--mb-marca-color: #fff;
}

/* Sobre la portada, el logo pasa a blanco. */
.mb-hero-medio:not(.mb-desplazado) .mb-logo img,
.mb-hero-medio:not(.mb-desplazado) .mb-marca img {
	filter: brightness(0) invert(1);
}

@media (max-width: 40rem) {
	.mb-logo img {
		height: 3rem;
	}

	.mb-cabecera__casa--mundo {
		--mb-gato-alto: 2.3rem;
		margin-right: 0.75rem;
	}

	.mb-cabecera__casa--mundo::after {
		right: -0.75rem;
	}

	.mb-cabecera__casa--mundo .wp-block-site-title {
		margin-left: 0.5rem;
	}

	.mb-cabecera .wp-block-site-title {
		font-size: 1.125rem;
	}

	.mb-cabecera,
	.mb-cabecera__nav {
		gap: 0.6rem;
	}
}

.mb-cabecera__nav {
	gap: 0.5rem 1.5rem;
	flex-shrink: 0;
}

.mb-cabecera .wp-block-navigation {
	gap: 0.25rem 1.75rem;
}

.mb-cabecera .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
	transition: background-size 0.25s var(--mb-curva);
}

.mb-cabecera .wp-block-navigation .wp-block-navigation-item__content:hover {
	background-size: 100% 2px;
}

.mb-cabecera .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mb-fondo);
	color: var(--mb-sobre-fondo);
	padding: 1.5rem var(--mb-borde);
}

.mb-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--mb-sobre-fondo);
	font-family: var(--mb-display);
	font-size: 2rem;
	font-weight: 400;
}

.mb-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 3rem;
	align-items: flex-start;
}

.mb-cabecera .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: 1rem;
}

.mb-historias__boton {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: var(--mb-cab-tinta);
	font: 600 0.9375rem/1.2 var(--mb-ui);
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.mb-historias__boton::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.2rem;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	rotate: 45deg;
}

.mb-historias__boton:hover {
	background: var(--mb-cab-tinta);
	color: var(--mb-papel);
}

.mb-hero-medio:not(.mb-desplazado) .mb-historias__boton:hover {
	color: #000;
}

.mb-historias__panel {
	position: fixed;
	inset: calc(var(--mb-barra) + 4.25rem) max(var(--mb-borde), calc((100vw - var(--mb-ancho-max)) / 2 + var(--mb-borde))) auto auto;
	margin: 0;
	width: min(24rem, calc(100vw - 2 * var(--mb-borde)));
	max-height: calc(100vh - var(--mb-barra) - 6rem);
	overflow-y: auto;
	padding: 0.6rem;
	border: 0;
	border-radius: 10px;
	background: var(--mb-papel);
	color: var(--mb-tinta);
	box-shadow: 0 0 0 1px var(--mb-linea), 0 1.5rem 3.5rem -1rem rgb(0 0 0 / 0.45);
	opacity: 0;
	translate: 0 -0.5rem;
	transition: opacity 0.2s, translate 0.25s var(--mb-curva), display 0.25s allow-discrete, overlay 0.25s allow-discrete;
}

.mb-historias__panel:popover-open {
	opacity: 1;
	translate: 0 0;
}

@starting-style {
	.mb-historias__panel:popover-open {
		opacity: 0;
		translate: 0 -0.5rem;
	}
}

.mb-historias__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-historias__lista a {
	display: grid;
	grid-template-columns: 3rem 1fr;
	column-gap: 0.9rem;
	align-items: center;
	padding: 0.5rem;
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
}

.mb-historias__lista a:hover,
.mb-historias__lista a[aria-current] {
	background: var(--mb-sombra);
}

.mb-historias__mini {
	grid-row: span 2;
	width: 3rem;
	height: 3rem;
	overflow: hidden;
	border-radius: 4px;
	background: oklch(40% var(--cartel-c) var(--cartel-h));
}

.mb-historias__mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-historias__nombre {
	align-self: end;
	font: 500 1.125rem/1.2 var(--mb-display);
}

.mb-historias__nombre:only-of-type,
.mb-historias__lista a > .mb-historias__nombre:last-child {
	grid-row: span 2;
	align-self: center;
}

.mb-historias__lema {
	align-self: start;
	font: 400 0.8125rem/1.3 var(--mb-ui);
	color: var(--mb-suave);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------------------
   4. Portada (hero)
   ------------------------------------------------------------------ */

.mb-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	padding-block: clamp(4rem, 12vw, 9rem) clamp(2.5rem, 6vw, 5rem);
	border-bottom: 1px solid var(--mb-linea);
}

.mb-hero--medio {
	min-height: calc(100svh - var(--mb-barra));
	padding-block: 8rem clamp(2.5rem, 7vh, 5.5rem);
	border-bottom: 0;
	background: var(--mb-fondo);
	color: #fff;
	overflow: hidden;
}

.mb-hero__fondo,
.mb-hero__fondo img,
.mb-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mb-hero__video {
	opacity: 0;
	transition: opacity 0.8s;
}

.mb-hero__video.es-visible {
	opacity: 1;
}

/* Velo para que el título se lea sobre cualquier imagen. */
.mb-hero__fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0.25) 45%, transparent 70%),
		linear-gradient(to bottom, rgb(0 0 0 / 0.45), transparent 22%);
}

.mb-hero__texto {
	position: relative;
}

.mb-hero__sello {
	margin: 0 0 1rem;
	font: 600 0.9375rem/1.2 var(--mb-ui);
	color: var(--mb-tono);
}

.mb-hero--medio .mb-hero__sello {
	color: #fff;
	opacity: 0.85;
}

.mb-hero__titulo {
	max-width: 14ch;
	margin: 0;
	font-family: var(--mb-display);
	font-size: clamp(3rem, 10.5vw, 10rem);
	font-weight: 380;
	line-height: 0.92;
	letter-spacing: -0.035em;
	color: inherit;
	text-wrap: balance;
}

.mb-hero__lema {
	max-width: 40rem;
	margin: 1.5rem 0 0;
	font-family: var(--mb-display);
	font-size: clamp(1.25rem, 2.4vw, 2rem);
	font-style: italic;
	font-weight: 380;
	line-height: 1.25;
	color: var(--mb-suave);
}

.mb-hero--medio .mb-hero__lema {
	color: rgb(255 255 255 / 0.88);
}

.mb-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

/* El único movimiento automático de la página: el título entra al cargar. */
@media (prefers-reduced-motion: no-preference) {
	.mb-hero__sello,
	.mb-hero__titulo,
	.mb-hero__lema,
	.mb-hero__acciones {
		animation: mb-subir 1s var(--mb-curva) both;
	}

	.mb-hero__lema {
		animation-delay: 0.1s;
	}

	.mb-hero__acciones {
		animation-delay: 0.2s;
	}

	@keyframes mb-subir {
		from {
			opacity: 0;
			translate: 0 1.5rem;
		}
	}
}

/* ------------------------------------------------------------------
   5. Botones
   ------------------------------------------------------------------ */

.mb-boton {
	display: inline-flex;
	align-items: center;
	padding: 0.9rem 1.7rem;
	border: 1.5px solid var(--mb-tono);
	border-radius: 999px;
	background: var(--mb-tono);
	color: var(--mb-papel);
	font: 600 1rem/1.2 var(--mb-ui);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.mb-boton:hover {
	background: var(--mb-tinta);
	border-color: var(--mb-tinta);
	color: var(--mb-papel);
}

.mb-boton--linea {
	background: transparent;
	color: var(--mb-tono);
}

.mb-hero--medio .mb-boton {
	background: #fff;
	border-color: #fff;
	color: #000;
}

.mb-hero--medio .mb-boton:hover {
	background: var(--mb-tono-claro);
	border-color: var(--mb-tono-claro);
}

.mb-hero--medio .mb-boton--linea {
	background: rgb(0 0 0 / 0.2);
	border-color: rgb(255 255 255 / 0.7);
	color: #fff;
}

.mb-hero--medio .mb-boton--linea:hover {
	background: #fff;
	border-color: #fff;
	color: #000;
}

.mb-hero--medio :focus-visible,
.mb-seccion--videos :focus-visible {
	outline-color: #fff;
}

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s, color 0.2s;
}

/* ------------------------------------------------------------------
   6. Secciones y tarjetas
   ------------------------------------------------------------------ */

.mb-seccion {
	padding-block: var(--wp--preset--spacing--60);
}

.mb-seccion + .mb-seccion:not(.mb-seccion--videos) {
	padding-top: 0;
}

.mb-seccion--videos + .mb-seccion {
	padding-top: var(--wp--preset--spacing--60) !important;
}

.mb-seccion__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

.mb-seccion__titulo {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 400;
	letter-spacing: -0.02em;
}

.mb-seccion__mas {
	font: 500 1rem/1.3 var(--mb-ui);
}

.mb-lista,
.mb-cartelera {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-tarjeta {
	position: relative;
	min-width: 0;
}

.mb-tarjeta__imagen {
	display: block;
	overflow: hidden;
	background: var(--mb-sombra);
}

.mb-tarjeta__imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.7s var(--mb-curva);
}

.mb-tarjeta:hover .mb-tarjeta__imagen img {
	scale: 1.035;
}

.mb-tarjeta__titulo {
	margin: 0;
}

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

/* Toda la tarjeta es el enlace. */
.mb-tarjeta__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mb-tarjeta__fecha {
	display: block;
	font: 400 0.875rem/1.3 var(--mb-ui);
	color: var(--mb-suave);
}

.mb-tarjeta__extracto {
	display: -webkit-box;
	margin: 0.6rem 0 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--mb-suave);
}

/* Textos y archivo */
.mb-lista--textos,
.mb-lista--archivo {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 3.25rem 2.25rem;
}

.mb-lista--textos .mb-tarjeta__imagen,
.mb-lista--archivo .mb-tarjeta__imagen {
	aspect-ratio: 3 / 2;
	margin-bottom: 1.1rem;
	border-radius: 3px;
}

.mb-lista--textos .mb-tarjeta--sin-imagen .mb-tarjeta__imagen,
.mb-lista--archivo .mb-tarjeta--sin-imagen .mb-tarjeta__imagen {
	display: none;
}

.mb-lista--textos .mb-tarjeta--sin-imagen,
.mb-lista--archivo .mb-tarjeta--sin-imagen {
	padding-top: 1.1rem;
	border-top: 1px solid var(--mb-linea);
}

.mb-lista--textos .mb-tarjeta--sin-imagen .mb-tarjeta__extracto,
.mb-lista--archivo .mb-tarjeta--sin-imagen .mb-tarjeta__extracto {
	-webkit-line-clamp: 7;
	line-clamp: 7;
}

.mb-lista--textos .mb-tarjeta__titulo,
.mb-lista--archivo .mb-tarjeta__titulo {
	margin-top: 0.4rem;
	font-size: 1.5rem;
	line-height: 1.15;
}

.mb-tarjeta__titulo a:hover {
	color: var(--mb-tono);
}

/* Retratos */
.mb-lista--retratos {
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 15rem), 1fr));
	gap: 2.5rem 1.5rem;
}

.mb-lista--retratos .mb-tarjeta__imagen {
	aspect-ratio: 3 / 4;
	margin-bottom: 1rem;
	border-radius: 3px;
}

.mb-lista--retratos .mb-tarjeta--sin-imagen .mb-tarjeta__imagen {
	background: var(--mb-fondo-2);
}

.mb-lista--retratos .mb-tarjeta__titulo {
	font-size: 1.625rem;
	line-height: 1.1;
}

.mb-lista--retratos .mb-tarjeta__extracto {
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: 1rem;
}

/* Imágenes a todo el ancho: de borde a borde, en cualquier pantalla */
.mb-lista--panoramica {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: 3px;
}

.mb-lista--panoramica .mb-tarjeta__imagen {
	aspect-ratio: 3 / 2;
}

.mb-lista--panoramica .mb-tarjeta--sin-imagen .mb-tarjeta__imagen {
	background: var(--mb-fondo-2);
}

.mb-lista--panoramica .mb-tarjeta__texto {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3rem 1.25rem 1rem;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.75));
	color: #fff;
	pointer-events: none;
}

.mb-lista--panoramica .mb-tarjeta__titulo {
	font: 500 1.0625rem/1.25 var(--mb-ui);
	letter-spacing: 0;
}

.mb-lista--panoramica .mb-tarjeta__titulo a {
	color: #fff;
	pointer-events: auto;
}

@media (hover: hover) {
	.mb-lista--panoramica .mb-tarjeta:not(.mb-tarjeta--sin-imagen) .mb-tarjeta__texto {
		opacity: 0;
		transition: opacity 0.25s;
	}

	.mb-lista--panoramica .mb-tarjeta:hover .mb-tarjeta__texto,
	.mb-lista--panoramica .mb-tarjeta:focus-within .mb-tarjeta__texto {
		opacity: 1;
	}
}

/* Vídeos */
.mb-seccion--videos {
	background: var(--mb-fondo);
	color: var(--mb-sobre-fondo);
}

.mb-seccion--videos .mb-seccion__titulo,
.mb-seccion--videos .mb-tarjeta__titulo {
	color: inherit;
}

.mb-seccion--videos .mb-seccion__mas {
	color: var(--mb-tono-claro);
}

.mb-seccion--videos .mb-tarjeta__titulo a:hover {
	color: var(--mb-tono-claro);
}

.mb-lista--videos {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: 2.5rem 1.5rem;
}

.mb-lista--videos .mb-tarjeta__imagen {
	position: relative;
	aspect-ratio: 16 / 9;
	margin-bottom: 1rem;
	border-radius: 4px;
	background: var(--mb-fondo-2);
}

.mb-lista--videos .mb-tarjeta__imagen::after {
	content: "";
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M19 15v18l15-9z' fill='%23111'/%3E%3C/svg%3E") center / cover;
	box-shadow: 0 0.5rem 1.25rem -0.25rem rgb(0 0 0 / 0.6);
	transition: scale 0.3s var(--mb-curva);
}

.mb-lista--videos .mb-tarjeta:hover .mb-tarjeta__imagen::after {
	scale: 1.1;
}

.mb-lista--videos .mb-tarjeta__titulo {
	font-size: 1.375rem;
	line-height: 1.2;
}

/* Cartelera */
.mb-cartelera {
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 16rem), 1fr));
	gap: 1.25rem;
}

.mb-cartel a {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 4px;
	background: oklch(30% calc(var(--cartel-c) * 0.6) var(--cartel-h));
	color: #fff;
	text-decoration: none;
}

.mb-cartel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.8s var(--mb-curva);
}

.mb-cartel a:hover img {
	scale: 1.04;
}

.mb-cartel__texto {
	position: absolute;
	inset: auto 0 0 0;
	display: grid;
	gap: 0.35rem;
	padding: 5rem 1.25rem 1.25rem;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.82));
}

.mb-cartel--sin-imagen .mb-cartel__texto {
	inset: 0;
	align-content: end;
	background: linear-gradient(160deg, oklch(46% var(--cartel-c) var(--cartel-h)), oklch(20% calc(var(--cartel-c) * 0.5) var(--cartel-h)));
}

.mb-cartel__titulo {
	font: 420 clamp(1.5rem, 2.4vw, 2.25rem)/1.02 var(--mb-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.mb-cartel__lema {
	font: 400 0.9375rem/1.3 var(--mb-ui);
	opacity: 0.88;
}

/* Páginas del archivo */
.mb-paginas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--mb-linea);
	font: 500 1rem/1 var(--mb-ui);
}

.mb-paginas .page-numbers {
	min-width: 2.5rem;
	padding: 0.75rem 0.8rem;
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--mb-tinta);
	text-align: center;
	text-decoration: none;
}

.mb-paginas a.page-numbers:hover {
	background: var(--mb-sombra);
}

.mb-paginas .page-numbers.current {
	background: var(--mb-tinta);
	color: var(--mb-papel);
}

.mb-archivo__cabeza {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}

.mb-archivo__cabeza > * {
	margin-block: 0;
}

.mb-archivo__cabeza .wp-block-query-title {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	font-weight: 400;
	letter-spacing: -0.025em;
}

.mb-archivo__cabeza .wp-block-term-description {
	max-width: 42rem;
	margin-top: 1rem;
	color: var(--mb-suave);
}

.mb-archivo__cabeza .wp-block-search {
	max-width: 36rem;
	margin-top: 1.5rem;
}

.mb-archivo {
	padding-bottom: var(--wp--preset--spacing--60);
}

.mb-vacio {
	color: var(--mb-suave);
}

   7. Vídeo dentro de la página
   ------------------------------------------------------------------ */

.mb-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: radial-gradient(120% 140% at 0% 100%, color-mix(in oklab, var(--mb-tono) 55%, var(--mb-fondo-2)), var(--mb-fondo-2) 60%) center / cover no-repeat;
}

.mb-video video,
.mb-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.wp-block-embed__wrapper > .mb-video {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.wp-block-embed:not(.wp-has-aspect-ratio) .wp-block-embed__wrapper > .mb-video {
	position: relative;
	aspect-ratio: 16 / 9;
}

.mb-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	padding: 1.5rem;
	border: 0;
	background: rgb(0 0 0 / 0.38);
	color: #fff;
	font: 600 1.0625rem/1.3 var(--mb-ui);
	cursor: pointer;
	transition: background-color 0.25s;
}

.mb-video__play:hover {
	background: rgb(0 0 0 / 0.2);
}

.mb-video__icono {
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M19 15v18l15-9z' fill='%23111'/%3E%3C/svg%3E") center / cover;
	box-shadow: 0 0.75rem 2rem -0.5rem rgb(0 0 0 / 0.6);
	transition: scale 0.3s var(--mb-curva);
}

.mb-video__play:hover .mb-video__icono {
	scale: 1.08;
}

.mb-video__aviso {
	font-size: 0.8125rem;
	font-weight: 400;
	opacity: 0.85;
}

/* ------------------------------------------------------------------
   8. Texto y página
   ------------------------------------------------------------------ */

.mb-articulo__cabeza {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}

.mb-articulo__cabeza > * {
	margin-block: 0;
}

.mb-articulo__cabeza .wp-block-post-title,
.mb-articulo__cabeza h1 {
	font-size: clamp(2.25rem, 6vw, 4.25rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

.mb-articulo__cabeza .wp-block-post-terms {
	margin-bottom: 1rem;
}

.mb-articulo__cabeza .wp-block-post-terms a {
	color: var(--mb-tono);
	font-weight: 600;
	text-decoration: none;
}

.mb-articulo__cabeza .wp-block-post-terms a:hover {
	text-decoration: underline;
}

.mb-articulo__cabeza .wp-block-post-date {
	margin-top: 1.25rem;
}

.mb-articulo__cabeza p {
	margin-top: 1.25rem;
}

.mb-articulo__cabeza .wp-block-search {
	margin-top: 2rem;
}

.mb-articulo .entry-content {
	padding-bottom: var(--wp--preset--spacing--60);
	hanging-punctuation: first;
}

.mb-pagina-ancha .entry-content {
	padding-block: var(--wp--preset--spacing--60);
}

.entry-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-content a:hover {
	text-decoration-thickness: 2px;
}

.entry-content h2 {
	margin-top: 2.5em;
}

.entry-content h3,
.entry-content h4 {
	margin-top: 2em;
}

.entry-content .wp-block-image img,
.entry-content .wp-block-video video {
	border-radius: 3px;
}

.entry-content .wp-block-image.alignfull img,
.entry-content .wp-block-cover.alignfull {
	border-radius: 0;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 2px;
}

.entry-content .wp-block-gallery,
.entry-content .wp-block-image,
.entry-content .wp-block-video,
.entry-content .wp-block-embed {
	margin-block: 2.5rem;
}

.entry-content hr.wp-block-separator {
	margin-block: 3rem;
	border: 0;
	border-top: 1px solid var(--mb-linea);
}

.mb-articulo__pie {
	padding-bottom: var(--wp--preset--spacing--60);
}

.mb-articulo__pie > * {
	margin-block: 0;
}

.mb-etiquetas a {
	display: inline-block;
	margin: 0 0.15rem 0.4rem 0;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--mb-linea);
	border-radius: 999px;
	color: var(--mb-suave);
	text-decoration: none;
}

.mb-etiquetas a:hover {
	border-color: var(--mb-tinta);
	color: var(--mb-tinta);
}

.mb-etiquetas .wp-block-post-terms__separator {
	display: none;
}

.mb-compra {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin-top: 2.5rem !important;
	padding: 1.75rem;
	border-radius: 8px;
	background: var(--mb-sombra);
}

.mb-compra__titulo {
	margin: 0;
	font: 420 1.75rem/1.1 var(--mb-display);
	letter-spacing: -0.015em;
}

.mb-compra__lema {
	margin: 0.4rem 0 0;
	font-size: 1.0625rem;
	color: var(--mb-suave);
}

.mb-vecinos {
	margin-top: 3rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--mb-linea);
	gap: 2rem;
}

.mb-vecinos .wp-block-post-navigation-link {
	flex: 1;
	max-width: 46%;
}

.mb-vecinos .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.mb-vecinos .wp-block-post-navigation-link a {
	color: var(--mb-tinta);
	text-decoration: none;
}

.mb-vecinos .wp-block-post-navigation-link a:hover {
	color: var(--mb-tono);
}

.mb-vecinos .post-navigation-link__label {
	display: block;
	margin-bottom: 0.3rem;
	font: 500 0.875rem/1.3 var(--mb-ui);
	color: var(--mb-suave);
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 1.5rem;
	border-top: 1px solid var(--mb-linea);
}

.wp-block-query-pagination a {
	color: var(--mb-tinta);
	text-decoration: none;
}

.wp-block-query-pagination a:hover {
	color: var(--mb-tono);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.35rem 0.5rem;
	border-radius: 999px;
	text-align: center;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--mb-tinta);
	color: var(--mb-papel);
}

.mb-vacio {
	color: var(--mb-suave);
}

/* ------------------------------------------------------------------
   9. Formularios y comentarios
   ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
.wp-block-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	border: 1px solid var(--mb-linea);
	border-radius: 6px;
	background: var(--mb-papel);
	color: var(--mb-tinta);
	font: 400 1rem/1.4 var(--mb-ui);
}

input:focus,
textarea:focus,
.wp-block-search__input:focus {
	border-color: var(--mb-tono);
	outline: 2px solid color-mix(in oklab, var(--mb-tono) 30%, transparent);
	outline-offset: 0;
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

.wp-block-search__button {
	margin: 0;
	white-space: nowrap;
}

.mb-comentarios {
	margin-top: 3.5rem !important;
}

.mb-comentarios .wp-block-comments-title,
.mb-comentarios .comment-reply-title {
	font-size: 1.75rem;
	font-weight: 420;
}

.mb-comentarios .wp-block-comment-template {
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.mb-comentarios .wp-block-comment-template ol {
	margin: 0;
	padding-left: 1.5rem;
	border-left: 1px solid var(--mb-linea);
	list-style: none;
}

.mb-comentario {
	padding-block: 1.25rem;
	border-top: 1px solid var(--mb-linea);
}

.mb-comentario > * {
	margin-block: 0.4rem 0;
}

.mb-comentario .wp-block-comment-author-name {
	font: 600 1rem/1.3 var(--mb-ui);
}

.mb-comentario .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}

.mb-comentario .wp-block-comment-date,
.mb-comentario .wp-block-comment-reply-link {
	font: 400 0.875rem/1.3 var(--mb-ui);
}

.mb-comentario .wp-block-comment-date a {
	color: var(--mb-suave);
	text-decoration: none;
}

.mb-comentario .wp-block-comment-content {
	font-size: 1.0625rem;
}

.comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font: 500 0.9375rem/1.3 var(--mb-ui);
}

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

.comment-notes,
.logged-in-as {
	font: 400 0.9375rem/1.4 var(--mb-ui);
	color: var(--mb-suave);
}

/* ------------------------------------------------------------------
/* ------------------------------------------------------------------
   Galerías a todo el ancho dentro de un texto
   ------------------------------------------------------------------ */

.entry-content > .wp-block-gallery,
.entry-content > .gallery {
	max-width: none !important;
	margin-inline: calc(-1 * var(--mb-borde)) !important;
}

.entry-content > .wp-block-gallery.has-nested-images {
	gap: 3px;
}

.entry-content > .wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 0;
}

/* Galerías clásicas ([gallery]) de las entradas antiguas */
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(50%, 18rem), 1fr));
	gap: 3px;
}

.entry-content .gallery br {
	display: none;
}

.entry-content .gallery-item {
	position: relative;
	float: none;
	width: auto !important;
	margin: 0;
}

.entry-content .gallery-item img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 0 !important;
}

.entry-content .gallery-caption {
	position: absolute;
	inset: auto 0 0 0;
	margin: 0;
	padding: 2rem 0.9rem 0.7rem;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
	color: #fff;
	font: 400 0.875rem/1.3 var(--mb-ui);
}

/* Puertas de entrada al final de un texto */
.mb-compra {
	justify-content: space-between;
	flex-wrap: wrap;
}

.mb-compra__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

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

.mb-pie {
	padding-block: var(--wp--preset--spacing--60) 2rem;
	background: var(--mb-sombra);
	border-top: 1px solid var(--mb-linea);
}

.mb-pie > * {
	margin-block: 0;
}

.mb-pie-mundos {
	box-sizing: border-box;
	max-width: var(--mb-ancho-max);
	margin-inline: auto;
	padding-inline: var(--mb-borde);
	padding-bottom: var(--wp--preset--spacing--50);
}

.mb-pie-mundos__titulo {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 400;
}

.mb-pie-mundos .mb-cartelera {
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 11rem), 1fr));
	gap: 0.9rem;
}

.mb-pie-mundos .mb-cartel__titulo {
	font-size: 1.375rem;
}

.mb-pie-mundos .mb-cartel__lema {
	display: none;
}

.mb-pie-mundos .mb-cartel__texto {
	padding: 3rem 0.9rem 0.9rem;
}

.mb-pie__base {
	gap: 1rem 2rem;
	font: 400 0.9375rem/1.4 var(--mb-ui);
	color: var(--mb-suave);
}

.mb-pie__base {
	align-items: flex-end;
}

.mb-sello {
	display: block;
	flex: 1 0 100%;
	margin-bottom: 0.75rem;
	line-height: 0;
}

.mb-sello img {
	display: block;
	width: auto;
	height: 4.5rem;
}

.mb-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 0;
}

.mb-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mb-pie__base a {
	color: var(--mb-tinta);
	font-weight: 500;
	text-decoration: none;
}

.mb-pie__base a:hover {
	color: var(--mb-tono);
	text-decoration: underline;
}

   Transiciones entre páginas y movimiento reducido
   ------------------------------------------------------------------ */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.22s;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* ------------------------------------------------------------------

/* ------------------------------------------------------------------
   Carrusel de historias: una sola fila, de borde a borde
   ------------------------------------------------------------------ */

.mb-carrusel {
	position: relative;
}

.mb-carrusel .mb-cartelera {
	display: flex;
	gap: 1rem;
	padding-inline: var(--mb-margen);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--mb-margen);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.mb-carrusel .mb-cartelera::-webkit-scrollbar {
	display: none;
}

.mb-carrusel .mb-cartel {
	flex: 0 0 clamp(11rem, 21vw, 18rem);
	scroll-snap-align: start;
}

.mb-carrusel__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-top: -1.625rem;
	border: 1px solid var(--mb-linea);
	border-radius: 50%;
	background: var(--mb-papel);
	color: var(--mb-tinta);
	box-shadow: 0 0.5rem 1.5rem -0.5rem rgb(0 0 0 / 0.45);
	cursor: pointer;
	transition: scale 0.2s var(--mb-curva), background-color 0.2s;
}

.mb-carrusel__flecha[hidden] {
	display: none;
}

.mb-carrusel__flecha:hover {
	scale: 1.08;
}

.mb-carrusel__flecha::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
}

.mb-carrusel__flecha--ant {
	left: max(0.75rem, calc(var(--mb-margen) - 1.625rem));
}

.mb-carrusel__flecha--ant::before {
	rotate: 135deg;
	translate: 0.15rem 0;
}

.mb-carrusel__flecha--sig {
	right: max(0.75rem, calc(var(--mb-margen) - 1.625rem));
}

.mb-carrusel__flecha--sig::before {
	rotate: -45deg;
	translate: -0.15rem 0;
}

.mb-pie-mundos {
	max-width: none;
	padding-inline: 0;
}

.mb-pie-mundos__titulo {
	padding-inline: var(--mb-margen);
}

.mb-pie-mundos .mb-carrusel .mb-cartel {
	flex-basis: clamp(8rem, 13vw, 11rem);
}

.mb-pie-mundos .mb-carrusel .mb-cartelera {
	gap: 0.75rem;
}

/* ------------------------------------------------------------------
   Portada: título, cuenta atrás y botón de vídeo en la misma línea
   ------------------------------------------------------------------ */

.mb-hero__base {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-items: last baseline;
	justify-content: space-between;
	gap: 1.75rem 2.5rem;
}

.mb-hero__texto {
	flex: 1 1 22rem;
	min-width: 0;
}

.mb-hero__esquina {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.mb-cuenta {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	min-height: 3.5rem;
	box-sizing: border-box;
	padding: 0.55rem 1.3rem 0.6rem 1.1rem;
	border: 1px solid var(--mb-linea);
	border-radius: 999px;
	background: var(--mb-papel);
	color: var(--mb-tinta);
	font-family: var(--mb-ui);
	text-decoration: none;
}

.mb-hero--medio .mb-cuenta {
	border-color: rgb(255 255 255 / 0.6);
	background: rgb(0 0 0 / 0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
}

a.mb-cuenta:hover {
	border-color: currentColor;
}

.mb-cuenta__n {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: lining-nums tabular-nums;
}

.mb-cuenta__texto {
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.15;
}

.mb-hero__pausa {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.4) linear-gradient(90deg, #fff 0 30%, transparent 30% 70%, #fff 70%) center / 0.8rem 1rem no-repeat;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mb-hero__pausa[hidden] {
	display: none;
}

.mb-hero__pausa:hover {
	background-color: rgb(0 0 0 / 0.7);
}

.mb-hero__pausa.es-parado {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M19 14v20l16-10z' fill='%23fff'/%3E%3C/svg%3E");
	background-size: 2.6rem;
}

/* ------------------------------------------------------------------
   Portada con vídeo: uno apaisado y otro vertical, siempre enteros
   ------------------------------------------------------------------ */

.mb-hero--video {
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: var(--mb-hero-ratio, 16 / 9);
	min-height: 0;
	max-height: calc(100svh - var(--mb-barra));
}

.mb-hero--video .mb-hero__video {
	object-fit: contain;
}

@media (orientation: portrait) {
	.mb-hero--video {
		aspect-ratio: var(--mb-hero-ratio-v, var(--mb-hero-ratio, 16 / 9));
	}
}

/* Pantalla estrecha y sin vídeo vertical: el vídeo apaisado va arriba, entero, y el título debajo. */
@media (max-width: 48rem) and (orientation: portrait) {
	.mb-hero--video:not(.mb-hero--con-vertical) {
		display: block;
		aspect-ratio: auto;
		max-height: none;
		padding: 0;
	}

	.mb-hero--video:not(.mb-hero--con-vertical) .mb-hero__fondo {
		position: relative;
		inset: auto;
		height: auto;
		aspect-ratio: var(--mb-hero-ratio, 16 / 9);
	}

	.mb-hero--video:not(.mb-hero--con-vertical) .mb-hero__fondo::after {
		background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent 35%);
	}

	.mb-hero--video:not(.mb-hero--con-vertical) .mb-hero__base {
		padding-block: 1.75rem 2rem;
	}
}

@media (max-width: 48rem) {
	.mb-cuenta__n {
		font-size: 1.5rem;
	}

	.mb-cuenta__texto {
		font-size: 1rem;
	}

	.mb-cuenta,
	.mb-hero__pausa {
		min-height: 3rem;
		height: auto;
	}

	.mb-hero__pausa {
		width: 3rem;
		height: 3rem;
	}

	.mb-hero__esquina {
		margin-bottom: 0;
	}
}

.mb-aviso {
	padding: 0.75rem 1rem;
	border: 1px dashed var(--mb-linea);
	font: 400 0.9375rem/1.4 var(--mb-ui);
	color: var(--mb-suave);
}

/* ------------------------------------------------------------------
   Imagen destacada de un texto
   ------------------------------------------------------------------ */

.mb-destacada {
	margin-block: 0 var(--wp--preset--spacing--50) !important;
}

.mb-destacada img {
	display: block;
	width: 100%;
	max-height: 82vh;
	object-fit: cover;
	border-radius: 3px;
}

/* ------------------------------------------------------------------
   Visor de imágenes: anterior, siguiente y cerrar
   ------------------------------------------------------------------ */

.entry-content a.mb-ampliable,
.entry-content img.mb-ampliable {
	cursor: zoom-in;
}

.mb-visor {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(8 8 10 / 0.97);
	color: #fff;
	overflow: hidden;
}

.mb-visor::backdrop {
	background: #000;
}

.mb-visor__imagen {
	position: absolute;
	inset: 3.75rem 0 3.5rem;
	display: grid;
	place-items: center;
	margin: 0;
}

.mb-visor__imagen img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.mb-visor__pie {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 0.9rem var(--mb-borde) 1.1rem;
	font: 400 0.9375rem/1.3 var(--mb-ui);
}

.mb-visor__cuenta {
	flex: none;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.mb-visor button {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.12);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s;
}

.mb-visor button:hover {
	background: rgb(255 255 255 / 0.28);
}

.mb-visor button:focus-visible {
	outline-color: #fff;
}

.mb-visor button[hidden] {
	display: none;
}

.mb-visor__cerrar {
	top: 0.5rem;
	right: 0.75rem;
}

.mb-visor__cerrar::before,
.mb-visor__cerrar::after {
	content: "";
	position: absolute;
	width: 1.3rem;
	height: 2px;
	background: currentColor;
	rotate: 45deg;
}

.mb-visor__cerrar::after {
	rotate: -45deg;
}

.mb-visor__ant,
.mb-visor__sig {
	top: 50%;
	margin-top: -1.625rem;
}

.mb-visor__ant {
	left: 0.75rem;
}

.mb-visor__sig {
	right: 0.75rem;
}

.mb-visor__ant::before,
.mb-visor__sig::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	rotate: 135deg;
	translate: 0.15rem 0;
}

.mb-visor__sig::before {
	rotate: -45deg;
	translate: -0.15rem 0;
}

/* ------------------------------------------------------------------
   Móvil e impresión
   ------------------------------------------------------------------ */

@media (max-width: 40rem) {
	.mb-compra {
		flex-direction: column;
		align-items: flex-start;
	}

	.mb-vecinos {
		flex-direction: column;
	}

	.mb-vecinos .wp-block-post-navigation-link {
		max-width: none;
	}

	.mb-vecinos .post-navigation-link-next {
		margin-left: 0;
		text-align: left;
	}

	.mb-historias__boton {
		padding-inline: 0.8rem;
	}

	.mb-cartelera {
		gap: 0.75rem;
	}

	.mb-lista--retratos {
		gap: 2rem 0.9rem;
	}
}

@media print {
	.mb-progreso,
	.wp-site-blocks > header,
	.mb-pie,
	.mb-compra,
	.mb-vecinos,
	.mb-comentarios {
		display: none !important;
	}
}