/*
Theme Name: Mundo Almacén Child
Template: generatepress
Description: Tema hijo de GeneratePress para Mundo Almacén.
Version: 0.5.3
Text Domain: mundoalmacen-child
*/

/*
 * Tipografía del menú principal: Inter, weight 600 — misma familia y peso
 * que usa el menú de navegación de odoo.com. Autoalojada (no vía Google
 * Fonts CDN) para evitar la petición a un tercero desde el navegador del
 * visitante (RGPD) y para no depender de la disponibilidad de fonts.gstatic.com.
 * Subset "latin" (v20): cubre todos los caracteres del español (incl. ñ, á, ¿, ¡).
 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

.main-navigation .menu-item > a {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
}

/*
 * Sección activa subrayada (comportamiento de yunbitsoftware.com): se marca
 * tanto el propio item como su ancestro cuando se navega a una página hija.
 */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/*
 * Logo/icono de cabecera: sin esta regla, el icono subido desde el
 * Personalizador se muestra a su tamaño nativo (512x512) porque GeneratePress
 * no limita `.header-image` salvo que se fije "logo_width" en sus opciones.
 * 60px coincide con el line-height real de los enlaces del menú principal
 * (.main-nav ul li a), que es la altura efectiva de toda la barra.
 */
.site-header .header-image {
	height: 60px;
	width: auto;
}

/*
 * Tipografía de titulares (portada, pie): Poppins, weight 700 — serio pero
 * amigable, distinta de Inter (que se reserva para el menú). Autoalojada
 * en fonts/poppins-v24-latin-700.woff2 por el mismo motivo que Inter arriba
 * (RGPD, sin depender de fonts.gstatic.com en tiempo de ejecución).
 */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/poppins-v24-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+FEFF, U+FFFD;
}

.ma-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---------- Portada: hero ---------- */

.ma-home .site-main {
	background: #ffffff;
}

/*
 * El hero tiene dos modos, y cuál aplica no es una preferencia estética sino
 * geometría de la propia ilustración:
 *
 * hero-home.png mide 2401x1024 y su contenido gráfico (estanterías, robots,
 * operario) empieza en x=1372, es decir al 57% del ancho — el 43% izquierdo es
 * fondo limpio, y es ahí donde va el título. Como la imagen se recorta con
 * object-fit:cover anclada a la derecha, cuanto más estrecha es la caja menos
 * fondo limpio queda a la vista, hasta que desaparece del todo y el texto cae
 * encima de los dibujos.
 *
 * La cuenta: con una caja de ancho W y alto H, se ve una franja de la imagen de
 * W*1024/H px de ancho, pegada a la derecha. Para que la mitad izquierda de la
 * caja siga siendo fondo limpio hace falta W/H >= ~2,1. De ahí salen las dos
 * reglas de abajo: mantener esa proporción mientras se pueda (modo superpuesto)
 * y, cuando ya no da, apilar imagen y texto (modo apilado, < 900px).
 */
.ma-hero {
	position: relative;
	overflow: hidden;
	/*
	 * Altura ligada al ancho para no bajar de la proporción 2,1 que mantiene
	 * limpia la mitad izquierda. El tope de 560px conserva el hero de
	 * escritorio tal cual estaba: a partir de ~1176px de ventana el clamp ya
	 * devuelve 560 y nada cambia respecto al diseño anterior.
	 */
	height: clamp(400px, 47.6vw, 560px);
	display: flex;
	align-items: center;
	background: #eef0f2;
}

.ma-hero__art {
	position: absolute;
	inset: 0;
}

.ma-hero__art svg,
.ma-hero__art img {
	width: 100%;
	height: 100%;
	display: block;
}

/*
 * object-fit:cover (en vez del stretch que basta para el SVG plano) porque
 * hero-home.png tiene una proporción propia (2401x1024) que no coincide con
 * la caja del hero en todos los anchos de pantalla — así se recorta sin
 * deformar personas/cajas. object-position a la derecha porque el diseño
 * de la imagen deja la escena cargada en ese lado (para no tapar el texto,
 * que se superpone por la izquierda).
 */
.ma-hero__art img {
	object-fit: cover;
	object-position: right center;
}

/*
 * Prueba: sin degradado oscuro — la imagen ya deja despejada la mitad
 * izquierda de por sí, y el título pasa a azul de marca (ver
 * .ma-hero__title) en vez de blanco, que dependía del degradado para
 * tener contraste. .ma-hero__scrim se deja vacío (no se borra el div
 * del PHP) por si hay que volver atrás.
 */
.ma-hero__scrim {
	position: absolute;
	inset: 0;
}

.ma-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 40px;
}

.ma-hero__title {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	color: #004164;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.15;
	/*
	 * La mitad izquierda, que es justo la parte de la ilustración que queda
	 * despejada.
	 *
	 * El límite va en vw y no en %: el % sería relativo a .ma-hero__inner, que
	 * lleva 40px de padding a cada lado, así que "50%" ahí dentro es bastante
	 * menos del 50% real del hero y estrecharía el título en escritorio,
	 * cambiando dónde parte las líneas. Con 52vw el tope de 620px sigue
	 * mandando de 1200px de ventana para arriba —el diseño de escritorio queda
	 * exactamente igual que antes— y por debajo entra en juego la mitad de
	 * pantalla, que es lo que hace falta para no pisar la ilustración.
	 */
	max-width: min(620px, 52vw);
	margin: 0;
}

/*
 * Modo apilado. Por debajo de 900px la franja visible de la ilustración ya no
 * deja medio lienzo limpio (ver la cuenta en .ma-hero), así que en vez de
 * encajar el texto encima de los dibujos se separan: la imagen arriba —seguida
 * anclada a la derecha, que es donde está el contenido gráfico— y el título
 * debajo, sobre el mismo azul claro del fondo de la ilustración para que el
 * conjunto siga leyéndose como una sola pieza.
 */
@media (max-width: 899px) {
	.ma-hero {
		display: block;
		height: auto;
		background: #eff9ff;
	}

	.ma-hero__art {
		position: static;
		/*
		 * El alto manda sobre cuánta imagen se ve: al estar anclada a la
		 * derecha, una caja baja y ancha acaba enseñando también el fondo
		 * vacío de la izquierda (a 768px llegaba a ser la mitad de la banda).
		 * Con ~88vw el recorte se ciñe a la escena —estanterías, robots y
		 * operario— y esta se lee bien en un móvil.
		 *
		 * El tope de 520px es lo que evita que en tablet el hero se coma la
		 * pantalla: a 390px de ancho la banda queda en 343px y el hero entero
		 * en 540px, así que sigue entrando de una vez en un móvil normal.
		 */
		height: clamp(300px, 88vw, 520px);
	}

	.ma-hero__inner {
		padding: 28px 24px 40px;
		max-width: none;
	}

	.ma-hero__title {
		max-width: none;
		font-size: clamp(1.75rem, 6.2vw, 2.5rem);
	}
}

/* ---------- Portada: "Tu solución empieza aquí" ---------- */

.ma-categories {
	padding: 80px 0;
	background: #ffffff;
}

.ma-categories__title {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	text-align: center;
	color: var(--contrast);
	margin: 0 0 48px;
}

.ma-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.ma-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 32px 28px;
	background: #ffffff;
	border: 1px solid #eceef0;
	border-radius: 8px;
	color: var(--contrast);
	text-decoration: none !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ma-card:hover,
.ma-card:focus {
	box-shadow: 0 12px 28px rgba(20, 20, 30, 0.08);
	transform: translateY(-2px);
	border-color: #dde1e5;
}

.ma-card__icon {
	width: 44px;
	height: 44px;
	color: var(--accent);
}

.ma-card__icon svg {
	width: 100%;
	height: 100%;
}

.ma-card__title {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--contrast);
}

.ma-card__desc {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--contrast-2);
}

@media (max-width: 1024px) {
	.ma-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ma-categories {
		padding: 56px 0;
	}

	.ma-categories__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Pie de página (sitewide, ver functions.php) ---------- */

.ma-footer {
	background: #ffffff;
	border-top: 1px solid #eceef0;
	color: var(--contrast-2);
}

.ma-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 40px 32px;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}

.ma-footer__brand-name {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--contrast);
	margin: 0 0 10px;
}

.ma-footer__desc {
	font-size: 0.92rem;
	line-height: 1.6;
	max-width: 360px;
	margin: 0 0 14px;
}

.ma-footer__email a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.ma-footer__col-title {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--contrast);
	margin: 0 0 14px;
}

.ma-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ma-footer__col a {
	color: var(--contrast-2);
	text-decoration: none;
	font-size: 0.92rem;
}

.ma-footer__col a:hover {
	color: var(--accent);
}

.ma-footer__bottom {
	border-top: 1px solid #eceef0;
	padding: 18px 40px;
	text-align: center;
	font-size: 0.82rem;
	color: var(--contrast-3);
}

@media (max-width: 768px) {
	.ma-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px 24px 24px;
	}

	.ma-footer__bottom {
		padding: 16px 24px;
	}
}

/* Título "Glosario" del archivo (/glosario/) y enlace de vuelta en cada ficha */

.ma-glosario-heading {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
}

.ma-glosario-heading__icon {
	display: inline-flex;
	width: 1.4em;
	height: 1.4em;
	color: var(--accent);
	flex-shrink: 0;
}

.ma-glosario-heading__icon svg {
	width: 100%;
	height: 100%;
}

/*
 * Fila del título de /glosario/, /directorio/ y /blog/: el icono pequeño
 * de trazo simple + texto de siempre (.ma-glosario-heading, sin cambios)
 * a la izquierda, y la ilustración nueva (mismo estilo isométrico y
 * paleta que el hero de portada, generada con la API de imágenes de
 * OpenAI — ver mcp-server/generar-iconos-titulo.mjs) más grande a la
 * derecha.
 */
.ma-heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.ma-heading-image {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
}

.ma-glosario-back {
	margin: 0 0 16px;
}

.ma-glosario-back a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--contrast);
	text-decoration: none;
}

.ma-glosario-back a:hover {
	color: var(--accent);
}

/*
 * Término en negrita y definición en gris (prueba, referencia:
 * documentodeca.es — h2 a font-weight:900, párrafo en gris #5d655d).
 * GeneratePress fuerza font-weight:400 en TODOS los h1/h2 del sitio por
 * defecto, así que sin esto no se ve en negrita aunque sea un heading.
 * Se usa 900 (no 700) para igualar el trazo grueso del ejemplo. El gris
 * reutiliza --contrast-2 (#575760), el mismo tono que ya usa el resto
 * del sitio y casi idéntico al de la referencia — no se importa un
 * color nuevo. La definición lleva además font-weight:500 (medium):
 * ni el 400 por defecto ni un 700 en negrita, un punto intermedio a
 * petición expresa tras comparar con el ejemplo.
 *
 * Tres contextos, misma clase .entry-title/.entry-content pero heading
 * distinto: la ficha individual de un término (body.single-glosario,
 * <h1>, 42px por defecto), la ficha individual de una empresa del
 * directorio (body.single-empresa, también <h1> 42px — misma estética
 * a petición expresa, para que término y empresa se vean igual) y el
 * archivo /glosario/ con todos los términos listados
 * (body.post-type-archive-glosario, <h2> por cada término, 35px por
 * defecto) — es la vista que se usó para comparar con el ejemplo.
 * Cada título lleva su propio font-size porque el tamaño base de
 * partida es distinto entre h1 y h2 (el archivo de empresas,
 * archive-empresa.php, no usa entry-title/entry-content — es un grid
 * de tarjetas con su propio diseño, no aplica aquí).
 *
 * Título y definición reducidos un 10% sobre el tamaño por defecto de
 * GeneratePress (a petición expresa): h1 42px->37.8px, h2 35px->31.5px,
 * texto de definición (heredado del body, 17px) -> 15.3px.
 */
body.single-glosario .entry-title,
body.single-empresa .entry-title {
	font-weight: 900;
	font-size: 37.8px;
}

body.post-type-archive-glosario .entry-title {
	font-weight: 900;
	font-size: 31.5px;
}

body.single-glosario .entry-content,
body.single-glosario .entry-content p,
body.single-empresa .entry-content,
body.single-empresa .entry-content p,
body.post-type-archive-glosario .entry-content,
body.post-type-archive-glosario .entry-content p {
	color: var(--contrast-2);
	font-weight: 500;
	font-size: 15.3px;
}

/* Índice alfabético A-Z del glosario (barra lateral de /glosario/) */

.ma-glosario-az {
	margin-top: 20px;
}

.ma-glosario-az ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ma-glosario-az li {
	margin: 0;
}

.ma-glosario-az a,
.ma-glosario-az__inactiva {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 4px;
	line-height: 1;
}

.ma-glosario-az a {
	background-color: var(--base-2);
	color: var(--contrast);
	text-decoration: none;
}

.ma-glosario-az a:hover,
.ma-glosario-az a:focus {
	background-color: var(--accent);
	color: #ffffff;
}

.ma-glosario-az__inactiva {
	color: var(--contrast-3);
}

/*
 * Buscador + índice A-Z flotante en /glosario/ al hacer scroll por el
 * listado. Solo en el layout de dos columnas de escritorio/tablet ancho
 * (GeneratePress apila la barra lateral debajo del contenido por debajo de
 * 769px, ver assets/css/mobile.css del tema padre — con sticky ahí no
 * tendría sentido, no comparte scroll con ninguna columna de al lado).
 *
 * No hay cabecera sticky en este sitio (comprobado: "Sticky navigation" no
 * está activado) ni ningún ancestro con overflow distinto de visible, así
 * que top:20px no necesita compensar nada extra.
 *
 * .inside-right-sidebar (de GeneratePress) es un bloque normal sin altura
 * propia, aunque su padre #right-sidebar sí se estira en flexbox a la
 * altura del listado — sin min-height:100% aquí, el buscador se
 * despegaría casi al instante en vez de acompañar el scroll.
 */
@media (min-width: 769px) {
	body.post-type-archive-glosario .inside-right-sidebar,
	body.post-type-archive-empresa .inside-right-sidebar {
		min-height: 100%;
	}

	#glosario-buscar-az,
	#directorio-buscar-categorias {
		position: sticky;
		top: 20px;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
	}
}

/*
 * Por debajo de 769px, GeneratePress apila site-content en columna y el
 * buscador + índice (letras/especialidades/categorías) queda debajo de
 * todo el listado — hay que bajar mucho para encontrarlo. Se adelanta al
 * principio con flexbox order (sin tocar el HTML): #primary y #right-sidebar
 * son hermanos directos dentro de #content, así que basta con darle al
 * sidebar un order menor que el 0 que trae por defecto en ese breakpoint.
 * Solo en las páginas donde el sidebar es justo eso (buscar + índice), no
 * en fichas/entradas individuales con los widgets normales.
 */
@media (max-width: 768px) {
	body.post-type-archive-glosario #right-sidebar,
	body.post-type-archive-empresa #right-sidebar,
	body.blog #right-sidebar {
		order: -1;
	}
}

/* ---------- Directorio de proveedores (/directorio/) ---------- */

.ma-directorio-categoria {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--contrast-2);
	border-bottom: 1px solid #eceef0;
	padding-bottom: 8px;
	margin: 40px 0 16px;
}

.ma-directorio-categoria:first-child {
	margin-top: 0;
}

.ma-directorio-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid #eceef0;
	border-radius: 8px;
	margin-bottom: 12px;
	color: var(--contrast);
	background: #ffffff;
}

.ma-directorio-card--link {
	text-decoration: none !important;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ma-directorio-card--link:hover,
.ma-directorio-card--link:focus {
	box-shadow: 0 8px 20px rgba(20, 20, 30, 0.08);
	border-color: #dde1e5;
}

.ma-directorio-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	color: var(--accent);
}

.ma-directorio-card__logo svg {
	width: 100%;
	height: 100%;
}

.ma-directorio-card__logo-img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.ma-directorio-card__texto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ma-directorio-card__nombre {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--contrast);
}

.ma-directorio-card__resumen {
	display: block;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--contrast-2);
}

.ma-directorio-card__resumen p {
	margin: 0;
}

/* Contenedor de empresas ocultas (más allá de las 3 primeras de cada
   categoría) y botón "Ver las N restantes" / "Ver menos". El atributo
   HTML `hidden` ya aplica display:none por defecto del navegador; la
   regla de abajo es un refuerzo defensivo por si algún día este
   contenedor recibe una propiedad display propia que lo pisara. */

.ma-directorio-ocultas[hidden] {
	display: none;
}

.ma-directorio-ver-mas {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 8px 16px;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: transparent;
	color: var(--accent);
	font-family: 'Inter', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ma-directorio-ver-mas:hover,
.ma-directorio-ver-mas:focus {
	background-color: var(--accent);
	color: #ffffff;
}

.ma-directorio-ver-mas.is-expanded::after {
	content: '\2191';
}

.ma-directorio-ver-mas:not(.is-expanded)::after {
	content: '\2193';
}

/* Índice de categorías en la barra lateral: mismo look que .ma-glosario-az
   pero en lista vertical de texto (los nombres de categoría son largos,
   no encajan en una rejilla de casillas cuadradas como las letras). */

.ma-directorio-categorias ul {
	display: block;
}

.ma-directorio-categorias li {
	margin-bottom: 4px;
}

.ma-directorio-categorias a,
.ma-directorio-categorias .ma-glosario-az__inactiva {
	display: block;
	width: auto;
	height: auto;
	padding: 6px 10px;
	text-align: left;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 4px;
}

/* ---------- Blog (/blog/): rejilla de 3 columnas ---------- */

.ma-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-top: 8px;
}

.ma-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid #eceef0;
	border-radius: 8px;
	background: #ffffff;
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.ma-blog-card:hover {
	box-shadow: 0 12px 28px rgba(20, 20, 30, 0.08);
	border-color: #dde1e5;
}

.ma-blog-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--base);
	overflow: hidden;
}

.ma-blog-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-blog-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--contrast-3);
	padding: 30%;
}

.ma-blog-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.ma-blog-card__fecha {
	font-size: 0.78rem;
	color: var(--contrast-3);
}

.ma-blog-card__titulo {
	margin: 0;
	font-family: 'Poppins', 'Inter', sans-serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.ma-blog-card__titulo a {
	color: var(--contrast);
	text-decoration: none !important;
}

/* "Stretched link": toda la tarjeta es clicable, aunque el <a> real solo
   envuelve el título (mejor para accesibilidad que anidar un enlace
   alrededor de toda la tarjeta). */
.ma-blog-card__stretched-link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.ma-blog-card__extracto {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--contrast-2);
}

@media (max-width: 1024px) {
	.ma-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.ma-blog-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * ============================================================
 * PRUEBA (revertible), v2 — ampliada a todo el texto de la web.
 * Azul de marca #004164 en títulos, gris --contrast-2 (#575760, ya
 * existente) en texto descriptivo. Documentado en docs/style-guide.md
 * a partir del icono/logo.
 *
 * Sustituye al bloque anterior (que solo cubría sitios puntuales:
 * barra superior, categorías, glosario, empresas) por un cambio
 * sistémico: casi todo el texto "título" del tema ya usaba la
 * variable --contrast para su color (10 sitios distintos: tarjetas de
 * categoría y de blog, nombres de empresa del directorio, marca del
 * pie de página, entry-title de glosario/empresa vía la regla de
 * GeneratePress ".entry-title a{color:var(--contrast)}", etc.), así
 * que redefinir --contrast aquí los pone azules a todos de una vez,
 * en vez de listarlos uno a uno. Efecto secundario esperado y
 * correcto: también afecta a sitios no pedidos explícitamente antes
 * pero que son igualmente "títulos" (tarjetas del blog, nombres de
 * empresa en las tarjetas del directorio, títulos del pie de página,
 * enlaces "← Volver" del glosario) — es justo lo que pide "todo el
 * texto de la web".
 *
 * Comprobado antes de aplicarlo que --contrast en este tema SOLO se
 * usa para color de texto (10 usos, todos "color: var(--contrast)"),
 * nunca para fondos ni bordes, así que no hay riesgo de que el azul
 * se cuele en sitios inesperados. Único fondo oscuro del sitio es el
 * hero de portada (.ma-hero__title), que fija su propio color:#fff
 * con una clase más específica que gana igualmente sobre --contrast.
 *
 * El texto descriptivo (<p> sin clase propia — contenido de entradas
 * de blog, páginas normales como Aviso legal/Privacidad/Cookies, o
 * cualquier página futura) no tenía un gris por defecto: solo lo
 * tenían los sitios que ya usaban --contrast-2 explícitamente
 * (tarjetas, definiciones de glosario/empresa). La regla `p` de abajo
 * cubre el resto con especificidad baja (una sola etiqueta), así que
 * cualquier descripción más específica que ya tuviera su propio color
 * (tarjetas, botones) sigue ganando sin cambios.
 *
 * CÓMO REVERTIR: `git revert <hash de este commit>`, o borrar este
 * bloque completo (las dos líneas de variables + la regla `p`) y
 * redesplegar — no se ha tocado ninguna otra regla del fichero.
 * ============================================================
 */
:root {
	--contrast: #004164;
}

.main-title a,
.ma-directorio-categoria {
	color: #004164;
}

p {
	color: var(--contrast-2);
}

/*
 * Insignia de versión (esquina inferior derecha, todas las páginas) — ver
 * mundoalmacen_child_version_badge() en functions.php. Discreta a
 * propósito: gris claro, sin fondo, tamaño pequeño — solo para
 * comprobar de un vistazo qué versión hay desplegada, no es un elemento
 * de marca ni debe llamar la atención.
 */
.ma-version-badge {
	position: fixed;
	right: 8px;
	bottom: 6px;
	z-index: 9999;
	font-family: 'Inter', sans-serif;
	font-size: 0.7rem;
	color: var(--contrast-3);
	opacity: 0.6;
	pointer-events: none;
	user-select: none;
}

/*
 * Insignia "Actualizado" junto a la fecha de una entrada del blog (ver
 * mundoalmacen_child_updated_badge() en functions.php). No lleva fecha:
 * solo indica que la pieza se ha revisado desde su publicación.
 */
.ma-updated-badge {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.1em 0.6em;
	border-radius: 3px;
	background-color: #50AA32;
	color: #fff;
	font-size: 0.85em;
	font-weight: 600;
	vertical-align: middle;
}