/* ============================================================
   Mira Más Arriba — Blog
   Hereda variables y base de servicios.css
   ============================================================ */

/* ------------------------------------------------------------
   Cabecera del blog (índice + archivos)
   ------------------------------------------------------------ */
.mma-blog-hero {
	padding: 9rem var(--mma-pad-x) 4rem;
	background:
		radial-gradient(ellipse 600px 350px at 80% 20%, rgba(233, 198, 142, 0.4), transparent 60%),
		radial-gradient(ellipse 500px 300px at 10% 90%, rgba(198, 107, 78, 0.08), transparent 60%),
		var(--mma-paper);
	border-bottom: 1px solid var(--mma-border-soft);
	position: relative;
	overflow: hidden;
}
.mma-blog-hero__inner {
	max-width: var(--mma-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: end;
}
@media (min-width: 800px) {
	.mma-blog-hero__inner {
		grid-template-columns: 1.6fr 1fr;
		gap: 4rem;
	}
}
.mma-blog-hero__title {
	font-family: var(--mma-display);
	font-weight: 400;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mma-ink);
	margin: 0;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.mma-blog-hero__title em {
	font-style: italic;
	color: var(--mma-clay);
	font-variation-settings: "opsz" 144, "SOFT" 100;
}
.mma-blog-hero__lede {
	font-family: var(--mma-body);
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--mma-ink-2);
	margin: 1.25rem 0 0;
	max-width: 540px;
}
.mma-blog-hero__meta {
	font-family: var(--mma-body);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mma-clay);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 1.5rem;
}
.mma-blog-hero__meta::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--mma-clay);
}

/* ------------------------------------------------------------
   Listado de posts (cards)
   ------------------------------------------------------------ */
.mma-blog {
	background: var(--mma-paper);
	padding: clamp(3.5rem, 7vw, 6rem) var(--mma-pad-x);
}
.mma-blog__container {
	max-width: var(--mma-max);
	margin: 0 auto;
}

.mma-posts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}
@media (min-width: 700px) { .mma-posts { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 1000px) { .mma-posts { grid-template-columns: 1fr 1fr 1fr; gap: 2.25rem; } }

.mma-post-card {
	background: var(--mma-ivory);
	border-radius: var(--mma-r-lg);
	border: 1px solid var(--mma-border-soft);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.4s cubic-bezier(.2,.7,.2,1);
	box-shadow: var(--mma-shadow);
}
.mma-post-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--mma-shadow-lg);
	border-color: rgba(198, 107, 78, 0.3);
}

.mma-post-card__media {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: linear-gradient(135deg, var(--mma-honey), var(--mma-clay-soft));
}
.mma-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.mma-post-card:hover .mma-post-card__media img { transform: scale(1.05); }

.mma-post-card__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(250, 245, 236, 0.85);
}
.mma-post-card__media-fallback svg { width: 40%; height: 40%; opacity: 0.6; }

.mma-post-card__body {
	padding: 1.75rem 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.mma-post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
	font-family: var(--mma-body);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	color: var(--mma-ink-3);
}
.mma-post-card__cat {
	color: var(--mma-clay);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.72rem;
}
.mma-post-card__dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--mma-ink-3);
	opacity: 0.5;
}

.mma-post-card__title {
	font-family: var(--mma-display);
	font-weight: 500;
	font-size: 1.55rem;
	line-height: 1.15;
	color: var(--mma-ink);
	margin: 0 0 0.85rem;
	letter-spacing: -0.01em;
	font-variation-settings: "opsz" 144, "SOFT" 60;
}
.mma-post-card__title a {
	color: inherit;
	transition: color 0.3s ease;
}
.mma-post-card:hover .mma-post-card__title a,
.mma-post-card__title a:hover { color: var(--mma-clay); }

.mma-post-card__excerpt {
	font-size: 0.97rem;
	line-height: 1.65;
	color: var(--mma-ink-2);
	margin: 0 0 1.5rem;
	flex-grow: 1;
}

.mma-post-card__more {
	font-family: var(--mma-body);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--mma-clay);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	letter-spacing: 0.02em;
	margin-top: auto;
}
.mma-post-card__more svg { transition: transform 0.3s ease; }
.mma-post-card:hover .mma-post-card__more svg { transform: translateX(4px); }

/* Post destacado (primero del listado) */
.mma-post-card--featured {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}
@media (min-width: 800px) {
	.mma-post-card--featured { grid-template-columns: 1.2fr 1fr; }
}
.mma-post-card--featured .mma-post-card__media { aspect-ratio: auto; min-height: 320px; }
.mma-post-card--featured .mma-post-card__body { padding: 2.5rem 2.5rem 2.75rem; justify-content: center; }
.mma-post-card--featured .mma-post-card__title { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.4rem); }
.mma-post-card--featured .mma-post-card__excerpt { font-size: 1.05rem; }

/* ------------------------------------------------------------
   Paginación
   ------------------------------------------------------------ */
.mma-pagination {
	margin-top: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.mma-pagination a,
.mma-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 1rem;
	font-family: var(--mma-body);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--mma-ink-2);
	background: var(--mma-ivory);
	border: 1px solid var(--mma-border-soft);
	border-radius: var(--mma-r-full);
	transition: all 0.25s ease;
	text-decoration: none;
}
.mma-pagination a:hover {
	background: var(--mma-clay);
	color: var(--mma-paper);
	border-color: var(--mma-clay);
}
.mma-pagination .current {
	background: var(--mma-clay);
	color: var(--mma-paper);
	border-color: var(--mma-clay);
}
.mma-pagination .dots {
	background: transparent;
	border: none;
	min-width: auto;
	padding: 0 0.5rem;
}

/* ------------------------------------------------------------
   Single post — lectura editorial
   ------------------------------------------------------------ */
.mma-single {
	background: var(--mma-paper);
}

.mma-single__hero {
	padding: 8rem var(--mma-pad-x) 3rem;
	background:
		radial-gradient(ellipse 600px 400px at 75% 25%, rgba(233, 198, 142, 0.35), transparent 60%),
		var(--mma-paper);
	position: relative;
}
.mma-single__hero-inner {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.mma-single__back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--mma-clay);
	font-family: var(--mma-body);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: 2rem;
	text-decoration: none;
	transition: color 0.25s ease;
}
.mma-single__back:hover { color: var(--mma-clay-dark); }
.mma-single__back svg { transition: transform 0.3s ease; }
.mma-single__back:hover svg { transform: translateX(-3px); }

.mma-single__meta {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 1.5rem;
	font-family: var(--mma-body);
	font-size: 0.82rem;
	color: var(--mma-ink-3);
}
.mma-single__cat {
	color: var(--mma-clay);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.75rem;
}
.mma-single__cat a { color: inherit; }
.mma-single__cat a:hover { color: var(--mma-clay-dark); }

.mma-single__title {
	font-family: var(--mma-display);
	font-weight: 400;
	font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--mma-ink);
	margin: 0 0 1.5rem;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}

.mma-single__readtime {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mma-body);
	font-size: 0.85rem;
	color: var(--mma-ink-3);
}
.mma-single__readtime svg { color: var(--mma-clay); }

.mma-single__featured {
	max-width: 1100px;
	margin: 3rem auto 0;
	padding: 0 var(--mma-pad-x);
}
.mma-single__featured img {
	width: 100%;
	height: auto;
	border-radius: var(--mma-r-lg);
	box-shadow: var(--mma-shadow-lg);
}

.mma-prose {
	max-width: 760px;
	margin: 0 auto;
	padding: 4rem var(--mma-pad-x) 5rem;
	font-family: var(--mma-body);
	font-size: 1.1rem;
	line-height: 1.85;
	color: var(--mma-ink-2);
	text-align: left;
}

.mma-prose > * + * { margin-top: 1.4rem; }
.mma-prose > p + p { margin-top: 1.1rem; }

.mma-prose p {
	margin: 0;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.mma-prose p:empty { display: none; }
.mma-prose br + br { display: none; }

.mma-prose strong { color: var(--mma-ink); font-weight: 600; }
.mma-prose em { font-style: italic; }

.mma-prose a {
	color: var(--mma-clay);
	border-bottom: 1.5px solid rgba(198, 107, 78, 0.4);
	transition: border-color 0.3s ease;
}
.mma-prose a:hover { border-bottom-color: var(--mma-clay); }

.mma-prose h2,
.mma-prose h3,
.mma-prose h4 {
	font-family: var(--mma-display);
	font-weight: 500;
	color: var(--mma-ink);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin-top: 3rem;
	font-variation-settings: "opsz" 144, "SOFT" 60;
}
.mma-prose h2 {
	font-size: 2rem;
	margin-top: 3.5rem;
}
.mma-prose h2::before {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	background: var(--mma-clay);
	margin-bottom: 1.25rem;
}
.mma-prose h3 { font-size: 1.5rem; }
.mma-prose h4 { font-size: 1.2rem; }

.mma-prose blockquote {
	border-left: 3px solid var(--mma-clay);
	padding: 0.5rem 0 0.5rem 1.75rem;
	margin: 2rem 0;
	font-family: var(--mma-display);
	font-style: italic;
	font-size: 1.4rem;
	line-height: 1.5;
	color: var(--mma-ink);
	font-variation-settings: "opsz" 144, "SOFT" 100;
}
.mma-prose blockquote p { margin: 0; }

.mma-prose ul,
.mma-prose ol {
	padding-left: 1.5rem;
	margin: 1.5rem 0;
}
.mma-prose ul li,
.mma-prose ol li { margin-bottom: 0.65rem; line-height: 1.75; }

.mma-prose ul li::marker { color: var(--mma-clay); }
.mma-prose ol li::marker { color: var(--mma-clay); font-weight: 600; }

/* === Imágenes y figures — siempre centradas, sin floats antiguos === */
.mma-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--mma-r);
}

/* Cualquier alineamiento del editor clásico → siempre centrado para coherencia */
.mma-prose .alignleft,
.mma-prose .alignright,
.mma-prose .aligncenter,
.mma-prose .alignnone,
.mma-prose img.alignleft,
.mma-prose img.alignright,
.mma-prose img.aligncenter,
.mma-prose img.alignnone {
	float: none !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
	clear: both;
}

/* <p> que sólo envuelve una imagen → tratar como bloque imagen */
.mma-prose p:has(> img:only-child),
.mma-prose p:has(> a:only-child > img:only-child) {
	margin-top: 2.5rem;
	margin-bottom: 0;
	text-align: center;
}
.mma-prose p:has(> img:only-child) + p:not(:empty),
.mma-prose p:has(> a:only-child > img:only-child) + p:not(:empty) {
	margin-top: 2.5rem;
}

/* Figures de Gutenberg (wp-block-image) */
.mma-prose figure,
.mma-prose .wp-block-image {
	margin: 2.5rem auto;
	text-align: center;
	max-width: 100%;
}
.mma-prose figure img,
.mma-prose .wp-block-image img {
	display: block;
	margin: 0 auto;
	border-radius: var(--mma-r);
}
.mma-prose figure.alignleft,
.mma-prose figure.alignright,
.mma-prose .wp-block-image.alignleft,
.mma-prose .wp-block-image.alignright {
	float: none;
	margin: 2.5rem auto;
}

/* Tamaños wide/full de Gutenberg respetando el ancho del prose */
.mma-prose .alignwide,
.mma-prose .wp-block-image.alignwide {
	margin-left: calc(50% - 50vw + var(--mma-pad-x));
	margin-right: calc(50% - 50vw + var(--mma-pad-x));
	max-width: calc(100vw - 2 * var(--mma-pad-x));
	width: auto;
}
.mma-prose .alignfull,
.mma-prose .wp-block-image.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
	border-radius: 0;
}
.mma-prose .alignfull img,
.mma-prose .wp-block-image.alignfull img { border-radius: 0; }

.mma-prose figcaption,
.mma-prose .wp-element-caption {
	font-family: var(--mma-body);
	font-style: italic;
	font-size: 0.9rem;
	color: var(--mma-ink-3);
	text-align: center;
	margin-top: 0.85rem;
	line-height: 1.5;
}

/* Galerías Gutenberg */
.mma-prose .wp-block-gallery {
	display: grid !important;
	gap: 0.85rem;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 2.5rem 0;
	padding: 0;
	list-style: none;
}
.mma-prose .wp-block-gallery .wp-block-image,
.mma-prose .wp-block-gallery figure {
	margin: 0;
}
.mma-prose .wp-block-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	border-radius: var(--mma-r-sm);
}

/* WP a veces envuelve imágenes con tamaños fijos en el atributo width/height del HTML.
   Forzamos que se adapten al contenedor. */
.mma-prose img[width],
.mma-prose img[height] { width: auto; height: auto; }

.mma-prose hr {
	border: none;
	margin: 3rem auto;
	width: 80px;
	text-align: center;
	height: 2px;
	background: var(--mma-clay);
	opacity: 0.4;
	border-radius: 2px;
}

.mma-prose code {
	background: var(--mma-paper-2);
	padding: 0.2em 0.5em;
	border-radius: 4px;
	font-size: 0.92em;
	color: var(--mma-clay-dark);
	font-family: ui-monospace, "SF Mono", monospace;
}

.mma-prose pre {
	background: var(--mma-night);
	color: var(--mma-paper);
	padding: 1.5rem;
	border-radius: var(--mma-r);
	overflow-x: auto;
}
.mma-prose pre code {
	background: transparent;
	color: inherit;
	padding: 0;
}

/* Footer del single: tags + share + nav */
.mma-single__footer {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--mma-pad-x) 4rem;
}

.mma-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--mma-border);
	margin-bottom: 3rem;
}
.mma-single__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.95rem;
	background: var(--mma-paper-2);
	color: var(--mma-ink-2);
	border-radius: var(--mma-r-full);
	font-size: 0.83rem;
	font-weight: 500;
	transition: all 0.25s ease;
}
.mma-single__tag:hover {
	background: var(--mma-clay);
	color: var(--mma-paper);
}
.mma-single__tag svg { color: var(--mma-clay); }
.mma-single__tag:hover svg { color: currentColor; }

.mma-single__nav {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 3rem;
}
@media (min-width: 700px) { .mma-single__nav { grid-template-columns: 1fr 1fr; } }

.mma-single__nav a {
	display: block;
	padding: 1.5rem 1.75rem;
	background: var(--mma-ivory);
	border-radius: var(--mma-r);
	border: 1px solid var(--mma-border-soft);
	transition: all 0.3s ease;
	text-decoration: none;
}
.mma-single__nav a:hover {
	border-color: var(--mma-clay-soft);
	transform: translateY(-3px);
	box-shadow: var(--mma-shadow);
}
.mma-single__nav-label {
	display: block;
	font-family: var(--mma-body);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mma-clay);
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.mma-single__nav-title {
	font-family: var(--mma-display);
	font-size: 1.15rem;
	color: var(--mma-ink);
	line-height: 1.3;
	font-weight: 500;
	font-variation-settings: "opsz" 144, "SOFT" 60;
}
.mma-single__nav a:last-child { text-align: right; }

/* CTA al final del post */
.mma-single__cta {
	background: linear-gradient(135deg, #FAEBE2, #FFE7DA);
	border-radius: var(--mma-r-lg);
	padding: 2.5rem 2rem;
	text-align: center;
	margin-bottom: 4rem;
}
@media (min-width: 600px) { .mma-single__cta { padding: 3rem 2.5rem; } }
.mma-single__cta h3 {
	font-family: var(--mma-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 1rem + 1.2vw, 1.85rem);
	color: var(--mma-ink);
	margin: 0 0 0.85rem;
	line-height: 1.2;
	font-variation-settings: "opsz" 144, "SOFT" 60;
}
.mma-single__cta h3 em {
	font-style: italic;
	color: var(--mma-clay);
	font-variation-settings: "opsz" 144, "SOFT" 100;
}
.mma-single__cta p {
	margin: 0 0 1.5rem;
	color: var(--mma-ink-2);
	font-size: 1rem;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

/* Posts relacionados */
.mma-related {
	background: var(--mma-paper-2);
	padding: clamp(3.5rem, 7vw, 6rem) var(--mma-pad-x);
	border-top: 1px solid var(--mma-border-soft);
}
.mma-related__head {
	max-width: var(--mma-max);
	margin: 0 auto 3rem;
	text-align: center;
}
.mma-related__head h2 {
	font-family: var(--mma-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
	color: var(--mma-ink);
	margin: 0;
	line-height: 1.1;
	font-variation-settings: "opsz" 144, "SOFT" 50;
}
.mma-related__head h2 em {
	font-style: italic;
	color: var(--mma-clay);
	font-variation-settings: "opsz" 144, "SOFT" 100;
}
.mma-related__grid {
	max-width: var(--mma-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 700px) { .mma-related__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .mma-related__grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Empty state */
.mma-empty {
	text-align: center;
	padding: 4rem 2rem;
	max-width: 600px;
	margin: 0 auto;
}
.mma-empty h2 {
	font-family: var(--mma-display);
	font-weight: 400;
	font-size: 2rem;
	color: var(--mma-ink);
	margin: 0 0 1rem;
	font-variation-settings: "opsz" 144, "SOFT" 60;
}
.mma-empty p {
	color: var(--mma-ink-2);
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0 0 2rem;
}

/* Responsive ajustes blog */
@media (max-width: 600px) {
	.mma-blog-hero { padding: 7rem var(--mma-pad-x) 3rem; }
	.mma-blog { padding-top: 3rem; padding-bottom: 4rem; }
	.mma-prose { padding-top: 3rem; padding-bottom: 4rem; font-size: 1.05rem; }
	.mma-single__hero { padding-top: 7rem; }
	.mma-related { padding-top: 4rem; padding-bottom: 4rem; }
}