/*
Theme Name: Mundo Almacén Child
Template: generatepress
Description: Tema hijo de GeneratePress para Mundo Almacén.
Version: 0.3.0
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;
}

/*
 * 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;
}

.ma-hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
	background: #eef0f2;
}

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

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

.ma-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		#24242b 0%,
		#24242b 26%,
		rgba(36, 36, 43, 0.82) 42%,
		rgba(36, 36, 43, 0.32) 60%,
		rgba(36, 36, 43, 0) 78%
	);
}

.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: #ffffff;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.15;
	max-width: 620px;
	margin: 0;
}

@media (max-width: 768px) {
	.ma-hero {
		min-height: 440px;
	}

	.ma-hero__inner {
		padding: 60px 24px;
	}

	.ma-hero__scrim {
		background: linear-gradient(
			90deg,
			#24242b 0%,
			#24242b 55%,
			rgba(36, 36, 43, 0.75) 75%,
			rgba(36, 36, 43, 0.45) 100%
		);
	}
}

/* ---------- 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%;
}

.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);
}

/* Í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;
	}
}

/* ---------- 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;
}

/* Í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;
	}
}