/*
 * Blog de Matarile: listado (home.php / archive.php) y artículo (single.php).
 *
 * Misma línea que la página de contenido: fondo negro, texto en Heimat Mono
 * y titulares en Heimat Sans. Se carga solo en las vistas del blog desde
 * matarile_blog_styles() en functions.php.
 */

.blog-pagina {
	--tinta: #f5f5f5;
	--tinta-suave: #c9c9c9;
	--tinta-tenue: #8f8f8f;
	--linea: rgba(255, 255, 255, .14);
	--caja: #111;
	--acento: #e9c46a;
	color: var(--tinta);
	background: #000;
	min-height: 100vh;
	padding: 0 20px 72px;
}

body.blog, body.single-post, body.archive, body.search { background: #000; margin: 0; }

.blog-pagina a { color: inherit; }

/* ---------- Navegación (misma que la página de contenido) ---------- */

.blog__nav {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	justify-content: center;
	border-bottom: 1px solid var(--linea);
}

.blog__nav a {
	color: var(--tinta-suave);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding-bottom: 12px;
}

.blog__nav a:hover,
.blog__nav a:focus { color: #fff; }

.blog__nav a[aria-current="page"] { color: #fff; border-bottom: 2px solid #fff; }

/* ---------- Cabecera del listado ---------- */

.blog-cabecera {
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 0 40px;
	text-align: center;
}

.blog-cabecera__antetitulo {
	margin: 0 0 14px;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--acento);
}

.blog-cabecera h1 {
	font-family: 'Heimat Sans', 'Heimat Mono', sans-serif;
	font-weight: 800;
	font-size: clamp(34px, 7vw, 72px);
	line-height: 1.02;
	margin: 0 0 18px;
	color: #fff;
}

.blog-cabecera__intro {
	max-width: 620px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.7;
	color: var(--tinta-suave);
}

/* ---------- Rejilla de artículos ---------- */

.blog-rejilla {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--caja);
	border: 1px solid var(--linea);
	border-radius: 20px;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.25, .46, .45, .94), border-color .3s ease;
}

.tarjeta:hover,
.tarjeta:focus-within {
	transform: translateY(-4px);
	border-color: rgba(255, 255, 255, .32);
}

.tarjeta__imagen {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #1a1a1a;
}

.tarjeta__imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}

.tarjeta:hover .tarjeta__imagen img { transform: scale(1.04); }

/* Sin imagen destacada: bloque tipográfico con el logo, nunca una foto
   que no corresponda al artículo. */
.tarjeta__imagen--vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 30% 20%, #2a2a2a 0%, #111 70%);
}

.tarjeta__imagen--vacia img {
	width: 46%;
	height: auto;
	object-fit: contain;
	opacity: .85;
}

.tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 26px;
}

.tarjeta__meta,
.articulo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 12px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tinta-tenue);
}

.tarjeta__categoria,
.articulo__categoria { color: var(--acento); text-decoration: none; }

.tarjeta__titulo {
	font-family: 'Heimat Sans', 'Heimat Mono', sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 12px;
}

/* Toda la tarjeta es clicable, pero el enlace real es el del título. */
.tarjeta__titulo a { color: #fff; text-decoration: none; }

.tarjeta__titulo a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.tarjeta__titulo a:focus-visible { outline: none; }
.tarjeta:has(.tarjeta__titulo a:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }

.tarjeta__extracto {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--tinta-suave);
}

.tarjeta__leer {
	margin-top: auto;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
}

/* El primer artículo del listado ocupa todo el ancho en escritorio. */
@media (min-width: 900px) {
	.tarjeta--destacada {
		grid-column: 1 / -1;
		flex-direction: row;
	}

	.tarjeta--destacada .tarjeta__imagen {
		flex: 0 0 58%;
		aspect-ratio: auto;
		min-height: 380px;
	}

	.tarjeta--destacada .tarjeta__cuerpo {
		justify-content: center;
		padding: 40px 44px;
	}

	.tarjeta--destacada .tarjeta__titulo { font-size: clamp(26px, 2.6vw, 36px); }
	.tarjeta--destacada .tarjeta__extracto { font-size: 16px; }
	.tarjeta--destacada .tarjeta__leer { margin-top: 8px; }
}

.blog-vacio {
	max-width: 620px;
	margin: 0 auto;
	padding: 40px 0;
	text-align: center;
	color: var(--tinta-suave);
}

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

.blog-paginacion {
	max-width: 1100px;
	margin: 48px auto 0;
}

.blog-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.blog-paginacion .page-numbers {
	min-width: 44px;
	padding: 10px 14px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	text-align: center;
	text-decoration: none;
	color: var(--tinta-suave);
}

.blog-paginacion .page-numbers.current,
.blog-paginacion a.page-numbers:hover { color: #000; background: #fff; border-color: #fff; }

/* ---------- Artículo ---------- */

.articulo {
	max-width: 1100px;
	margin: 0 auto;
}

.migas {
	max-width: 720px;
	margin: 28px auto 0;
	font-size: 13px;
	color: var(--tinta-tenue);
}

.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a:hover { color: #fff; }

.articulo__cabecera {
	max-width: 820px;
	margin: 0 auto;
	padding: 36px 0 32px;
	text-align: center;
}

.articulo__cabecera .articulo__meta { justify-content: center; }

.articulo__titulo {
	font-family: 'Heimat Sans', 'Heimat Mono', sans-serif;
	font-weight: 800;
	font-size: clamp(30px, 5.4vw, 54px);
	line-height: 1.08;
	margin: 0 0 20px;
	color: #fff;
}

.articulo__entradilla {
	max-width: 640px;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.65;
	color: var(--tinta-suave);
}

.articulo__imagen {
	margin: 0 auto 48px;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #1a1a1a;
}

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

/* Cuerpo del artículo: mismo tratamiento que .pagina__cuerpo, ampliado. */
.articulo__contenido {
	max-width: 720px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.75;
	color: var(--tinta-suave);
}

.articulo__contenido > *:first-child { margin-top: 0; }

.articulo__contenido h2,
.articulo__contenido h3 {
	font-family: 'Heimat Sans', 'Heimat Mono', sans-serif;
	font-weight: 800;
	letter-spacing: .01em;
	color: #fff;
	scroll-margin-top: 24px;
}

.articulo__contenido h2 {
	font-size: clamp(23px, 3.2vw, 30px);
	line-height: 1.2;
	margin: 56px 0 16px;
	padding-top: 28px;
	border-top: 1px solid var(--linea);
}

.articulo__contenido h3 { font-size: 19px; line-height: 1.3; margin: 32px 0 10px; }

.articulo__contenido p { margin: 0 0 20px; }
.articulo__contenido strong { color: #fff; font-weight: 400; }
.articulo__contenido em { font-style: italic; }

.articulo__contenido a {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--acento);
	text-underline-offset: 3px;
}

.articulo__contenido a:hover { color: var(--acento); }

.articulo__contenido ul,
.articulo__contenido ol { margin: 0 0 24px; padding-left: 24px; }

.articulo__contenido li { margin-bottom: 10px; padding-left: 4px; }
.articulo__contenido ul li::marker { color: var(--acento); }

.articulo__contenido ol { counter-reset: paso; list-style: none; padding-left: 0; }

.articulo__contenido ol li {
	counter-increment: paso;
	position: relative;
	padding-left: 48px;
	margin-bottom: 16px;
}

.articulo__contenido ol li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: 1px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--acento);
	color: var(--acento);
	font-size: 14px;
	line-height: 30px;
	text-align: center;
}

.articulo__contenido table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}

.articulo__contenido th,
.articulo__contenido td {
	text-align: left;
	vertical-align: top;
	padding: 12px 14px;
	border-bottom: 1px solid var(--linea);
}

.articulo__contenido thead th {
	color: #fff;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom-color: rgba(255, 255, 255, .4);
}

.articulo__contenido tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .03); }

.articulo__contenido img { max-width: 100%; height: auto; border-radius: 14px; }

.articulo__contenido figure { margin: 0 0 28px; }

.articulo__contenido figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--tinta-tenue);
	text-align: center;
}

/* Preguntas frecuentes: matarile_marcar_faq() envuelve cada pregunta en
   un bloque .faq__item. */
.articulo__contenido .faq__item {
	margin: 0 0 12px;
	padding: 18px 22px;
	background: var(--caja);
	border: 1px solid var(--linea);
	border-radius: 14px;
}

.articulo__contenido .faq__item h3 { margin: 0 0 8px; font-size: 17px; }
.articulo__contenido .faq__item p:last-child { margin-bottom: 0; }

/* ---------- Bloque final: llamada a la acción ---------- */

.articulo-cta {
	max-width: 720px;
	margin: 56px auto 0;
	padding: 32px;
	border-radius: 20px;
	background:
		linear-gradient(135deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .85) 100%),
		url('/wp-content/uploads/2026/02/Interior-Matarile-800w.webp') center / cover no-repeat;
	border: 1px solid var(--linea);
	text-align: center;
}

.articulo-cta__titulo {
	font-family: 'Heimat Sans', 'Heimat Mono', sans-serif;
	font-weight: 800;
	font-size: clamp(22px, 3vw, 28px);
	margin: 0 0 10px;
	color: #fff;
}

.articulo-cta p { margin: 0 0 22px; color: var(--tinta-suave); }

.articulo-cta__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.boton {
	display: inline-block;
	padding: 13px 24px;
	border-radius: 999px;
	border: 1px solid #fff;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background .3s ease, color .3s ease;
}

.boton--lleno { background: #fff; color: #000 !important; }
.boton--lleno:hover { background: var(--acento); border-color: var(--acento); }
.boton--borde { color: #fff; }
.boton--borde:hover { background: #fff; color: #000; }

/* ---------- Más artículos ---------- */

.relacionados {
	max-width: 1100px;
	margin: 72px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--linea);
}

.relacionados__titulo {
	font-family: 'Heimat Sans', 'Heimat Mono', sans-serif;
	font-weight: 800;
	font-size: 24px;
	margin: 0 0 24px;
	color: #fff;
}

.volver {
	display: block;
	max-width: 720px;
	margin: 40px auto 0;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--tinta-suave);
	text-decoration: none;
}

.volver:hover { color: #fff; }

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

@media (max-width: 600px) {
	.blog-pagina { padding: 0 16px 56px; }
	.blog__nav { gap: 16px; }
	.blog__nav a { font-size: 13px; }
	.blog-cabecera { padding: 40px 0 28px; }
	.blog-rejilla { grid-template-columns: 1fr; gap: 18px; }
	.articulo__imagen { border-radius: 14px; margin-bottom: 36px; aspect-ratio: 4 / 3; }
	.articulo__contenido { font-size: 16px; }
	.articulo__contenido th,
	.articulo__contenido td { padding: 10px 8px; }
	.articulo-cta { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.tarjeta,
	.tarjeta__imagen img { transition: none; }
	.tarjeta:hover { transform: none; }
}