*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/*
 * Base BEM del proyecto. Los bloques generados usan prefijo .mwm-{slug}.
 * Patrón medios+textos: <img> con object-fit, nunca background-image.
 */

.mwm-section {
	padding-block: var(--mwm-space-lg);
	padding-inline: var(--mwm-space-md);
}

.mwm-section__inner {
	margin-inline: auto;
	max-width: var(--mwm-content-width);
	width: 100%;
}

/* Patrón medios + textos */
.mwm-media-text {
	align-items: center;
	display: grid;
	gap: var(--mwm-space-md);
	grid-template-columns: 1fr 1fr;
}

.mwm-media-text__media {
	height: 100%;
	width: 100%;
}

.mwm-media-text__media img {
	border-radius: var(--mwm-radius-md);
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.mwm-media-text__title {
	color: var(--mwm-color-primary);
	font-family: var(--mwm-font-heading);
	font-size: var(--mwm-fs-h2);
	line-height: var(--mwm-lh-tight);
}

.mwm-media-text__body {
	color: var(--mwm-color-contrast);
	font-size: var(--mwm-fs-body);
	line-height: var(--mwm-lh-base);
}

/* CTA */
.mwm-button {
	background: var(--mwm-color-secondary);
	border-radius: var(--mwm-radius-sm);
	color: var(--mwm-color-base);
	display: inline-block;
	font-weight: 600;
	padding: var(--mwm-space-xs) var(--mwm-space-md);
	text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
	.mwm-media-text {
		grid-template-columns: 1fr;
	}
	.mwm-section {
		padding-block: var(--mwm-space-md);
		padding-inline: var(--mwm-space-sm);
	}
}

/* =========================================================
 * Bloques de encabezado (core/heading) h2 y h3 — global.
 * Estilo de marca: IBM Plex Serif 500, 40px/48px, dark #323233.
 * Texto en cursiva (core/italic -> <em>/<i>): dorado #BD8A4B.
 * Hexes literales del export (--Color_secundario / --Color_principal_textos).
 * ========================================================= */
h2.wp-block-heading,
h3.wp-block-heading {
	color: #323233;
	font-family: var(--mwm-font-display);
	font-size: 40px;
	font-style: normal;
	font-weight: 500;
	line-height: 48px; /* 120% */
}

h2.wp-block-heading :where(em, i),
h3.wp-block-heading :where(em, i) {
	color: #bd8a4b;
	font-style: italic;
}

/* =========================================================
 * Botones (core/button) — global.
 * Fondo dorado de marca #C4904E (--Color_principal), contenido
 * centrado, padding 8px 40px y gap 8px (icono + texto).
 * Texto oscuro #323233 para contraste (mismo criterio que el
 * botón primario de artss). Especificidad extra para ganar a
 * los estilos por defecto de core.
 * ========================================================= */
.wp-block-button .wp-block-button__link {
	align-items: center;
	background-color: #c4904e;
	color: #323233;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	padding: 8px 40px;
}

/* =========================================================
 * Core "Media & Text" (core/media-text) con el look del
 * export blocks/medio-texto: título serif + párrafo Inter,
 * separación de 40px e imagen a object-fit cover (~576px).
 * A sangre completa: la imagen llega al borde de la pantalla
 * (como en el export) mediante el truco vw, y el texto lleva
 * un inset (~168px) en su lado exterior. Funciona esté o no el
 * bloque en "ancho completo".
 * Color de marca #323233 literal (mismo criterio que el pie).
 * ========================================================= */
.wp-block-media-text {
	column-gap: clamp(2rem, 6vw, 104px);
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 40px);
	justify-content: flex-start;
	padding-block: clamp(2rem, 6vw, 80px);
	/* Inset del texto en su lado exterior; el interior lo separa el gap. */
	padding-inline: 0 clamp(1.5rem, 11.6vw, 168px);
}

/* Imagen a la derecha: el inset del texto pasa al lado contrario. */
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	padding-inline: clamp(1.5rem, 11.6vw, 168px) 0;
}

/* Apilado en móvil: gutter simétrico en el texto. */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		padding-block: clamp(1.5rem, 6vw, 2rem);
		padding-inline: clamp(1rem, 6vw, 1.5rem);
	}
}

.wp-block-media-text__content :where(h1, h2, h3, h4, h5, h6) {
	color: #323233;
	font-family: var(--mwm-font-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 500;
	line-height: 1.1;
	margin: 0;
}

.wp-block-media-text__content p {
	color: #323233;
	font-family: var(--mwm-font-body);
	font-size: var(--mwm-fs-body);
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.wp-block-media-text__media img {
	display: block;
	height: clamp(320px, 40vw, 576px);
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* =========================================================
 * Cabecera del theme (template part parts/header.html)
 * ========================================================= */
/* La etiqueta <header> (mwm-header-wrap) empieza en sticky. JS
 * (assets/js/header.js) la pasa a fixed en cuanto detecta scroll, para que
 * quede anclada arriba de forma fiable y añade el margin-top equivalente
 * al <main> siguiente para que el contenido no salte. */
.mwm-header-wrap {
	position: sticky;
	/* Respeta la admin bar de WP (variable nativa de core, 0px si no está logueado). */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 999;
}

.mwm-header-wrap.mwm-header-wrap--fixed {
	position: fixed;
	top: revert-rule;
	width: 100%;
	z-index: 999;
}

/* El flex/justify/wrap lo aporta el layout del bloque wp:group (is-layout-flex,
 * con especificidad :where() = 0), así que aquí solo fondo, padding y gap. */
.mwm-header {
	background: var(--mwm-color-base);
	box-sizing: border-box;
	gap: var(--mwm-space-md);
	padding: var(--mwm-space-sm);
	transition: box-shadow 0.2s ease;
	width: 100%;
}

/* Añadida por JS (assets/js/header.js) al hacer scroll. */
.mwm-header.mwm-header--scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.mwm-header__brand {
	align-items: center;
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.mwm-header__logo {
	display: block;
	height: auto;
	max-width: 100%;
	width: 160px;
}

/* Menú de WordPress (wp:navigation). */
.mwm-header .wp-block-navigation__container {
	gap: 2.5rem;
}

/* El panel móvil nativo aplica su propio "gap: inherit" con más
 * especificidad que la regla de arriba. Repetimos el selector con más peso
 * para ganar esa pelea; el espaciado entre enlaces lo dan ahora las líneas
 * divisorias (border-bottom) de cada enlace, no el gap. */
.mwm-header nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	padding: var(--mwm-space-sm);
}

.mwm-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--mwm-color-primary);
	font-family: var(--mwm-font-body);
	font-size: .75rem;
	font-weight: 400;
	line-height: 16px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.current-menu-item a{
	color: var(--mwm-color-secondary) !important;
}

.mwm-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.mwm-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--mwm-color-secondary);
}

.mwm-header__cta {
	align-items: center;
	background: var(--mwm-color-secondary);
	color: var(--mwm-color-base);
	display: inline-flex;
	flex-shrink: 0;
	font-family: var(--mwm-font-body);
	font-size: var(--mwm-fs-small);
	font-weight: 400;
	justify-content: center;
	line-height: 24px;
	padding: var(--mwm-space-xs) 2.5rem;
	text-decoration: none;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.mwm-header__cta:hover,
.mwm-header__cta:focus-visible {
	background: var(--mwm-color-primary);
}

@media (max-width: 1024px) {
	.mwm-header {
		padding: var(--mwm-space-sm) var(--mwm-space-md);
	}

	.mwm-header .wp-block-navigation__container {
		gap: var(--mwm-space-sm);
	}
}

/* CTA duplicado dentro de wp:navigation (parts/header.html), solo visible
 * dentro del panel del menú hamburguesa nativo. Oculto en el resto de anchos. */
.mwm-header__cta-item {
	display: none;
}

.mwm-header__cta-mobile .wp-block-button__link {
	align-items: center;
	background: var(--mwm-color-secondary);
	color: var(--mwm-color-base);
	display: inline-flex;
	font-family: var(--mwm-font-body);
	font-size: var(--mwm-fs-small);
	font-weight: 400;
	justify-content: center;
	line-height: 24px;
	padding: var(--mwm-space-xs) 2.5rem;
	text-decoration: none;
	transition: background 0.2s ease;
	white-space: nowrap;
	width: 100%;
}

.mwm-header__cta-mobile .wp-block-button__link:hover,
.mwm-header__cta-mobile .wp-block-button__link:focus-visible {
	background: var(--mwm-color-primary);
}

/* --------------------------------------------------------------
 * Rediseño visual del panel del menú móvil (overlay nativo de
 * core/navigation): botón de cerrar, fondo, animación de entrada,
 * enlaces y elementos extra (logo + redes sociales).
 * -------------------------------------------------------------- */
.mwm-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	display: flex;
	height: 44px;
	justify-content: center;
	margin: 20px 20px 0 0;
	width: 44px;
}

.mwm-header .wp-block-navigation__responsive-container-close svg {
	color: var(--mwm-color-primary);
	height: 26px;
	width: 26px;
}

.mwm-header .wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient(180deg, var(--mwm-color-base) 0%, var(--mwm-color-muted) 100%);
}

@media (max-width: 1023px) {
	.mwm-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: mwm-mobile-menu-in 0.3s ease-out;
	}
}

@keyframes mwm-mobile-menu-in {
	from {
		opacity: 0;
		transform: translateX(32px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mwm-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}

.mwm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.mwm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	border-bottom: 1px solid var(--mwm-color-secondary);
	display: block;
	font-size: .75rem;
	font-weight: 400;
	padding-block: var(--mwm-space-sm);
	text-align: left;
	width: 100%;
}

/* Logo pequeño y redes sociales: solo existen dentro del panel móvil. */
.mwm-header__mobile-brand,
.mwm-header__mobile-social {
	display: none;
}

.mwm-header .wp-block-navigation__responsive-container.is-menu-open .mwm-header__mobile-brand {
	display: block;
	margin-bottom: var(--mwm-space-sm);
}

.mwm-header__mobile-brand svg {
	height: auto;
	width: 120px;
}

.mwm-header .wp-block-navigation__responsive-container.is-menu-open .mwm-header__mobile-social {
	display: flex;
	margin-top: var(--mwm-space-md);
}

.mwm-header__mobile-social.wp-block-social-links {
	gap: var(--mwm-space-sm);
}

/* --------------------------------------------------------------
 * El breakpoint de colapso a "hamburguesa" de core/navigation viene
 * fijo en 600px y no es configurable desde el editor. Lo desplazamos
 * a 1024px reforzando las reglas nativas que lo controlan: el botón
 * de abrir el menú y el contenedor responsive (ver wp-includes/blocks/
 * navigation/style.css @media min-width:600px). Requiere !important
 * porque compite con esas reglas nativas en el mismo nivel de
 * especificidad.
 * -------------------------------------------------------------- */
@media (max-width: 1023px) {
	.mwm-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.mwm-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	/* CTA de la barra principal: desaparece cuando el menú colapsa a hamburguesa. */
	.mwm-header > .mwm-header__cta {
		display: none;
	}

	/* El duplicado solo se muestra dentro del contenido del panel; el propio
	 * core/navigation mantiene ese panel oculto hasta que se abre. */
	.mwm-header__cta-item {
		display: block;
		margin-top: var(--mwm-space-md);
	}
}

/* =========================================================
 * Pie del theme (template part parts/footer.html)
 * Fondo oscuro de marca #323233; verde WhatsApp #14ae5c (literales).
 * ========================================================= */
.mwm-footer {
	background: #323233;
	color: var(--mwm-color-base);
	font-family: var(--mwm-font-body);
}

.mwm-footer__main,
.mwm-footer__legal {
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	margin-inline: auto;
	max-width: var(--mwm-wide-width);
}

.mwm-footer__main {
	align-items: flex-start;
	gap: var(--mwm-space-lg);
	padding: 80px clamp(1.5rem, 11.6vw, 168px);
}

.mwm-footer__legal {
	align-items: center;
	gap: var(--mwm-space-md);
	padding: 16px clamp(1.5rem, 11.6vw, 168px);
}

.mwm-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 352px;
}

.mwm-footer__logo {
	max-width: 100%;
	width: 216px;
}

.mwm-footer__logo svg {
	display: block;
	height: auto;
	width: 100%;
}

.mwm-footer__contact {
	display: flex;
	flex-direction: column;
	font-style: normal;
	gap: 24px;
}

.mwm-footer__address,
.mwm-footer__reach {
	font-size: var(--mwm-fs-small);
	line-height: 24px;
	margin: 0;
}

.mwm-footer__reach a {
	color: inherit;
	text-decoration: none;
}

.mwm-footer__reach a:hover {
	text-decoration: underline;
}

.mwm-footer__social svg {
	display: block;
	height: 16px;
	width: auto;
}

.mwm-footer__aside {
	align-items: flex-start;
	display: flex;
	gap: 72px;
}

.mwm-footer__nav {
	display: flex;
	gap: 16px;
}

.mwm-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	min-width: 217px;
	padding: 0;
}

.mwm-footer__menu a {
	color: var(--mwm-color-base);
	display: inline-block;
	font-size: var(--mwm-fs-small);
	line-height: 24px;
	padding: 8px;
	text-decoration: none;
	text-transform: uppercase;
	transition: 0.3s;
}

.mwm-footer__menu a:hover {
	color: var(--mwm-color-secondary) !important;
}

.mwm-footer__menu--legal {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.mwm-footer__copyright {
	font-size: 12px;
	line-height: 16px;
	margin: 0;
}

@media (max-width: 1024px) {
	.mwm-footer__main {
		flex-direction: column;
		gap: var(--mwm-space-lg);
	}

	.mwm-footer__aside {
		justify-content: space-between;
		width: 100%;
		gap: 6px;
	}
}

@media (max-width: 768px) {
	.mwm-footer__nav {
		flex-wrap: wrap;
		gap: var(--mwm-space-md);
	}
	.mwm-footer__menu {
		min-width: 0;
	}
	
	.mwm-footer__legal {
		align-items: flex-start;
		flex-direction: column;
		gap: var(--mwm-space-sm);
	}

	.mwm-footer__aside{
		flex-direction: column;
	}
}

/* =========================================================
 * Plantilla de página "Legal" (templates/legal.html)
 * Título display serif (export blocks/Plantila legal/titulo-pagina)
 * + contenido con encabezados serif 32px y párrafos Inter 16px
 * (export blocks/Plantila legal/contenido). Columna 880px.
 * Dark de título #323233 y navy de contenido #051d2e literales
 * del export (mismo criterio que header/footer).
 * ========================================================= */
.mwm-legal {
	padding-block: clamp(3rem, 8vw, 120px) var(--mwm-space-lg);
}

.mwm-legal__title {
	color: #323233;
	font-family: var(--mwm-font-display);
	font-size: clamp(2.25rem, 5vw, 3.5rem); /* 56px */
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.14; /* 64/56 */
	margin: 0 0 clamp(2.5rem, 6vw, 68px);
}

/* Palabra en dorado dentro del título (mismo criterio que h2/h3: <em>/<i>). */
.mwm-legal__title :where(em, i) {
	color: #bd8a4b;
	font-style: normal;
}

/* Última palabra del título con color de texto secundario (ver mwm_legal_title_last_word en functions.php). */
.mwm-legal__title-last {
	color: var(--mwm-color-secondary);
}

.mwm-legal__content {
	box-sizing: border-box;
	padding: 0 1.25rem;
	margin-inline: auto;
}

.mwm-legal__content :where(p, li) {
	color: #051d2e;
	font-family: var(--mwm-font-body);
	font-size: var(--mwm-fs-body); /* 16px */
	font-weight: 400;
	line-height: 1.5; /* 24/16 */
	margin: 0;
}

.mwm-legal__content :where(h1, h2, h3, h4, h5, h6) {
	color: #051d2e;
	font-family: var(--mwm-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem); /* 32px */
	font-weight: 500;
	line-height: 1; /* 32/32 */
	margin: 0;
}

/* Ritmo vertical (blockGap del theme = 0) */
.mwm-legal__content > * + * {
	margin-top: 24px;
}

.mwm-legal__content > :where(h1, h2, h3, h4, h5, h6) {
	margin-top: clamp(2rem, 5vw, 48px);
}

/* Botones */
.mwm-btn{
	align-items: center;
	display: inline-flex;
	font-size: var(--mwm-fs-small);
	justify-content: center;
	line-height: 1.5rem;
	min-width: 8.75rem;
	padding: 0.5rem 1.5rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.2s ease-in-out;
}

.mwm-btn__primary{
	background-color: var(--mwm-color-secondary);
	border: 1px solid var(--mwm-color-secondary);
	color: var(--mwm-color-primary);
}

.mwm-btn__primary:hover, .mwm-btn__primary:focus-visible{
	background-color: var(--mwm-color-primary);
	color: var(--mwm-color-base);
}

.mwm-btn__outline{
	background-color: transparent;
	border: 1px solid var(--mwm-color-primary);
	color: var(--mwm-color-primary);
}

.mwm-btn__outline:hover, .mwm-btn__outline:focus-visible{
	background-color: transparent;
	border: 1px solid var(--mwm-color-secondary);
	color: var(--mwm-color-secondary);
}