/*
 * Portada sin Elementor (fase B). Cada sección es un grupo de bloques del núcleo con una clase
 * propia (mm-…); aquí va su aspecto, con las cifras MEDIDAS en la web de referencia con
 * pruebas/estilos_de.py a 1366, 1024 y 390 px, no copiadas del CSS de Elementor.
 *
 * Puntos de corte: los de Elementor (tableta ≤ 1024 px, móvil ≤ 767 px), para que la vista cambie
 * en los mismos anchos que antes.
 *
 * Los bloques del núcleo traen márgenes de su «layout» (:where(.is-layout-flow) > * { margin… }):
 * dentro de las secciones se anulan, porque las distancias ya van medidas aquí.
 */

.mm-heroe,
.mm-heroe * {
	box-sizing: border-box;
}
.mm-heroe :where(h1, h2, figure, .wp-block-buttons, .wp-block-group) {
	margin: 0;
}

/* ── Sección 1: cabecera grande con la foto ─────────────────────────────────────────────── */

/* Foto de fondo pegada arriba y a todo el ancho (la pone el bloque Grupo; aquí sólo la altura y
   el centrado vertical del contenido). */
.mm-heroe {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 629px;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #222;
}
.mm-heroe__fila {
	display: flex;
	width: 100%;
	max-width: 1800px;
	margin: 0 auto;
}
.mm-heroe__texto,
.mm-heroe__marca {
	display: flex;
	flex-wrap: wrap;
	width: 50%;
	min-height: 1px;
}
/* El texto, centrado en vertical en su mitad; la marca, abajo (así estaba en Elementor). */
.mm-heroe__texto {
	align-content: center;
	align-items: center;
	padding: 0;
}
.mm-heroe__texto > * {
	width: 100%;
}
.mm-heroe__marca {
	align-content: flex-end;
	align-items: flex-end;
	padding: 10px;
}

.mm-heroe h1.mm-heroe__titulo {
	width: calc(100% - 6px);
	margin: 0 0 20px 6px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.55);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 62px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -1.5px;
	color: #111;
	text-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
}
.mm-heroe h2.mm-heroe__subtitulo {
	margin: 0;
	padding: 0 0 10px 10px;
	background-color: rgba(255, 255, 255, 0.53);
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.2px;
	color: #4a4068;
}

/* Botón «¡Reserva tu Cita!»: blanco con texto negro; al pasar el ratón, negro con texto blanco
   (el efecto de cortina de Unlimited Elements se sustituye por una transición de color). */
/* Bloque (no flex, como lo deja el CSS de los bloques del núcleo): el botón queda como un único
   elemento en línea dentro de una línea de texto, como en Elementor. */
.mm-heroe .wp-block-buttons.mm-heroe__botones {
	display: block;
	margin-top: 0; /* medido: el subtítulo va pegado al botón en los tres anchos */
	text-align: center;
}
:is(.mm-heroe, .mm-dudas) .mm-boton-cita {
	display: block;
	margin: 0;
}
/* overflow:hidden no es para recortar: hace que la línea base del botón sea su borde inferior,
   como en Elementor (allí el texto va en un span con display:flex, y el enlace se queda sin líneas
   propias). Es lo que deja los 6-7 px de aire debajo del botón que había en la web. */
:is(.mm-heroe, .mm-dudas) .mm-boton-cita .wp-block-button__link {
	position: relative;
	display: inline-block;
	width: auto; /* el CSS del tema lo estiraba al 100 % al ser su envoltorio un bloque */
	overflow: hidden;
	padding: 15px 50px;
	border: 0;
	border-radius: 0;
	background-color: #fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.8;
	color: #000;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}
/* El cuadradito negro de 10 px en la esquina de abajo a la derecha: es lo que queda a la vista
   de la «cortina» del botón de Unlimited Elements cuando no se pasa el ratón. */
:is(.mm-heroe, .mm-dudas) .mm-boton-cita .wp-block-button__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 10px;
	height: 10px;
	background-color: #000;
}
:is(.mm-heroe, .mm-dudas) .mm-boton-cita .wp-block-button__link:hover,
:is(.mm-heroe, .mm-dudas) .mm-boton-cita .wp-block-button__link:focus-visible {
	background-color: #000;
	color: #fff;
}

.mm-heroe .mm-heroe__logo {
	width: 100%;
	margin: 25px 0 10px;
	text-align: center;
}
.mm-heroe .mm-heroe__logo img {
	display: inline-block;
	width: 737px;
	max-width: 73%;
	height: 415px;
	object-fit: contain;
	vertical-align: middle;
}

/* Tableta */
@media (max-width: 1024px) {
	.mm-heroe {
		min-height: 0;
	}
	.mm-heroe__fila {
		max-width: 1024px;
		flex-wrap: wrap;
		padding: 10px 0 0 20px;
	}
	.mm-heroe h1.mm-heroe__titulo {
		font-size: 42px;
	}
	.mm-heroe h2.mm-heroe__subtitulo {
		margin-bottom: 5px;
		font-size: 18px;
	}
	.mm-heroe .mm-heroe__logo img {
		width: 310px;
		height: 246px;
	}
}

/* Móvil: las dos mitades una encima de otra */
@media (max-width: 767px) {
	.mm-heroe {
		padding-top: 26px;
	}
	.mm-heroe__fila {
		max-width: 767px;
		padding: 0 15px;
	}
	.mm-heroe__texto,
	.mm-heroe__marca {
		width: 100%;
	}
	.mm-heroe h1.mm-heroe__titulo {
		width: 100%;
		margin: 0 0 10px;
		font-size: 38px;
		letter-spacing: -0.5px;
	}
	.mm-heroe h2.mm-heroe__subtitulo {
		padding: 0 0 10px;
		font-size: 16px;
		letter-spacing: 0;
	}
	:is(.mm-heroe, .mm-dudas) .mm-boton-cita .wp-block-button__link {
		font-size: 16px;
	}
	.mm-heroe .mm-heroe__logo img {
		width: 300px;
		height: 240px;
	}
}

/* ── Secciones 2 y 3: el slider de interiores y el recuadro negro encima ─────────────────── */

/*
 * En Elementor eran dos secciones: una vacía de 140 px con el recuadro en posición absoluta, que
 * caía ENCIMA del slider de la siguiente. Aquí es una sola, con el recuadro colocado sobre la foto
 * en el mismo sitio (66 px por debajo del borde de arriba del slider y a 958 px de la izquierda).
 * El slider es el bloque centinela/slider de CENTINELA.
 */
.mm-galeria {
	position: relative;
	box-sizing: border-box;
	max-width: 1600px;
	margin: 0 auto;
	padding: 150px 10px 60px;
}
.mm-galeria .mm-galeria__recuadro {
	position: absolute;
	z-index: 55;
	top: 216px;
	left: 958px;
	box-sizing: border-box;
	width: 22.51%;
	margin: 0;
	padding: 40px;
	background-color: #000;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 22px;
	line-height: 1.6;
	color: #fff;
}
.mm-galeria .mm-galeria__recuadro p {
	margin: 0 0 16px;
	color: inherit;
}

/* El slider: alto por pantalla (lo manda el tema, no el bloque), sin barra de desplazamiento a la
   vista y con la foto a todo el recuadro, recortada al centro como el fondo de antes.
   margin-top: 0 porque, al ser el segundo hijo del grupo, el núcleo le daba 24 px de «blockGap» y
   el slider arrancaba 24 px más abajo que en la web (medido: y=935 contra 911 a 1366 px). En móvil
   la separación la pone el margen del recuadro. */
.mm-galeria .centinela-slider {
	--centinela-slider-altura: 734px;
	margin-top: 0;
}
.mm-galeria .centinela-slider__pista {
	gap: 20px;
	scrollbar-width: none;
}
.mm-galeria .centinela-slider__pista::-webkit-scrollbar {
	display: none;
}
.mm-galeria .centinela-slider__imagen {
	object-position: 50% 50%;
}
/* El título de cada diapositiva, en un recuadro blanco abajo a la izquierda. Entra con un fundido
   después de la foto en cada cambio, como el retardo que tenía en Elementor (el fundido lo pone
   CENTINELA desde el 30-09; aquí sólo el aspecto). */
.mm-galeria .centinela-slider__texto {
	position: absolute;
	bottom: 0;
	left: 0;
	max-width: 641px;
	margin: 0;
	padding: 40px;
	background-color: #fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.6;
	color: #000;
}
/* La pausa del paso automático (accesibilidad: todo lo que se mueve solo se tiene que poder
   parar) se queda discreta, en la esquina. */
.mm-galeria .centinela-slider__pausa {
	width: 36px;
	height: 36px;
	opacity: 0.7;
}

@media (max-width: 1024px) {
	.mm-galeria {
		max-width: 1024px;
		padding: 142px 20px 50px;
	}
	/* MEJORA: en Elementor el recuadro medía 909 px desde x=558 y se salía de la pantalla (la página
	   se podía arrastrar de lado y el texto quedaba cortado). Aquí llega justo hasta el borde. */
	.mm-galeria .mm-galeria__recuadro {
		top: 216px;
		left: 558px;
		width: auto;
		right: 20px;
	}
	.mm-galeria .centinela-slider {
		--centinela-slider-altura: 569px;
	}
	.mm-galeria .centinela-slider__texto {
		max-width: 1000px;
		padding: 20px;
		font-size: 30px;
	}
}

@media (max-width: 767px) {
	.mm-galeria {
		padding: 10px 20px 50px;
	}
	/* En móvil el recuadro va encima del slider, en su sitio de la página (lo que hacía el tema hijo
	   desde el 29-09 con !important). */
	.mm-galeria .mm-galeria__recuadro {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		margin-bottom: 60px;
		font-size: 16px;
	}
	.mm-galeria .centinela-slider {
		--centinela-slider-altura: 465px;
	}
	.mm-galeria .centinela-slider__texto {
		font-size: 28px;
	}
}

/* ── Secciones 5 y 6: «Nuestra experiencia…» y el acordeón de imágenes ───────────────────── */

/*
 * En Elementor eran dos secciones: la cabecera (título, texto y unas flechas a la derecha) y debajo
 * el «Image Accordion» de Unlimited Elements. Aquí es un grupo con el título y el texto, y el bloque
 * centinela/acordeon, que trae sus flechas; el tema las coloca donde estaban (al pie de la cabecera,
 * a la derecha; en móvil, debajo del texto a la izquierda).
 * MEJORA: en la web, las flechas NO hacían nada (el «mando a distancia» no estaba conectado al
 * acordeón; medido el 30-09: siete pulsaciones, ningún cambio) y eran <div>, no botones.
 */
.mm-experiencia,
.mm-experiencia * {
	box-sizing: border-box;
}
.mm-experiencia :is(h2, p, .wp-block-group) {
	margin: 0;
}
.mm-experiencia .mm-experiencia__cabeza {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 30px; /* 20 del contenedor + 10 de la fila del texto */
}
.mm-experiencia h2.mm-experiencia__titulo {
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
	color: #000;
}
.mm-experiencia p.mm-experiencia__texto {
	width: 68.416%;
	margin-bottom: 10px; /* 16 del párrafo − 6 del widget */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	color: #000;
}

.mm-experiencia .centinela-acordeon {
	/* 60vh como en la web: el alto sigue a la ventana. */
	--centinela-acordeon-altura: 60vh;
	/* En la web el título del panel abierto quedaba 5 px por encima de su sitio. */
	--centinela-acordeon-subida: 5px;
	/* Sin el «blockGap» del núcleo (24 px por ser el segundo hijo del grupo). */
	margin-top: 0;
}
.mm-experiencia .centinela-acordeon__flechas {
	position: absolute;
	right: max(0px, calc((100% - 1200px) / 2));
	bottom: calc(100% + 30px);
}
.mm-experiencia .centinela-acordeon__anterior,
.mm-experiencia .centinela-acordeon__siguiente {
	width: 40px;
	height: 40px;
}
/* !important porque la regla de letra del tema (en línea, heredada del hijo de Shoptimizer) fuerza
   con !important la fuente del sistema en TODOS los <button>, y aquí el título es un botón (en la web
   era un <div> y se libraba): salía en Segoe UI, más gruesa. */
.mm-experiencia .centinela-acordeon__titulo {
	font-family: Georgia, "Times New Roman", Times, serif !important;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.8;
}
.mm-experiencia .centinela-acordeon__boton {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
}

@media (max-width: 1024px) {
	.mm-experiencia .mm-experiencia__cabeza {
		padding: 0 20px 30px;
	}
	.mm-experiencia h2.mm-experiencia__titulo {
		line-height: 1.6;
	}
	.mm-experiencia p.mm-experiencia__texto {
		width: 595px;
		max-width: 100%;
	}
	.mm-experiencia .centinela-acordeon {
		--centinela-acordeon-altura: 1000px;
	}
	.mm-experiencia .centinela-acordeon__flechas {
		right: 20px;
	}
}

@media (max-width: 767px) {
	/* Las flechas bajan a su propia línea, debajo del texto (40 px + 20 de separación). */
	.mm-experiencia .mm-experiencia__cabeza {
		padding-bottom: 90px; /* 40 de las flechas + 20 + 30; medido el 30-09: con 91 la sección bajaba 1 px */
	}
	.mm-experiencia h2.mm-experiencia__titulo {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
	.mm-experiencia p.mm-experiencia__texto {
		width: 306.842px;
		font-size: 16px;
	}
	.mm-experiencia .centinela-acordeon__flechas {
		right: auto;
		left: 20px;
	}
	.mm-experiencia .centinela-acordeon__titulo {
		font-size: 22px;
	}
	.mm-experiencia .centinela-acordeon__boton {
		font-size: 16px;
	}
}

/* ── Sección 8: «¡Escuche lo que dicen nuestros clientes!» (tres opiniones) ──────────────── */

/*
 * En Elementor: título, texto, un espaciador de 50 px y tres «Testimonial Card» de Unlimited
 * Elements (texto, nombre, localidad y la imagen de Google con estrellas). No se mueven, así que
 * son bloques del núcleo: un grupo por tarjeta con tres párrafos y una imagen.
 * MEJORA: la imagen de Google no tenía texto alternativo; ahora dice qué es.
 */
.mm-opiniones,
.mm-opiniones * {
	box-sizing: border-box;
}
.mm-opiniones :is(h2, p, figure, .wp-block-group) {
	margin: 0;
}
/* 1200 de caja con 15 de relleno a cada lado: el contenido mide 1170, como en la web. */
.mm-opiniones {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px 80px;
	text-align: center;
}
/* Caja a la medida del texto y centrada, como el título de Elementor («align-self: center»). */
.mm-opiniones h2.mm-opiniones__titulo {
	width: fit-content;
	margin: 0 auto;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
	color: #000;
}
/* 20 del hueco de la columna; debajo, 16 del párrafo + 20 + 50 del espaciador + 20. */
.mm-opiniones p.mm-opiniones__texto {
	width: 65.302%;
	margin: 20px auto 106px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	color: #000;
}
/* Cada tarjeta con su alto: en la web la tercera (más corta) no se estiraba. */
.mm-opiniones .mm-opiniones__tarjetas {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.mm-opiniones .mm-opiniones__tarjeta {
	flex: 1 1 0;
	min-width: 0;
	padding: 40px 40px 20px;
	background-color: #efefef;
}
.mm-opiniones p.mm-opiniones__cita {
	margin-top: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	color: #000;
}
.mm-opiniones p.mm-opiniones__nombre {
	margin-top: 20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.8;
	color: #000;
}
.mm-opiniones p.mm-opiniones__lugar {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	line-height: 1.8;
	color: #888;
}
/* En la web la imagen iba en una caja «inline-block»: queda sobre la línea base, con el aire de
   debajo que eso deja. Se reproduce igual. */
.mm-opiniones figure.mm-opiniones__google {
	display: inline-block;
	margin-top: 20px;
	vertical-align: baseline;
}
.mm-opiniones figure.mm-opiniones__google img {
	display: inline-block;
	vertical-align: baseline;
}

@media (max-width: 1024px) {
	.mm-opiniones {
		padding: 0 25px 80px;
	}
	.mm-opiniones p.mm-opiniones__texto {
		width: 648.107px;
		max-width: 100%;
	}
	/* Una debajo de otra: 10 px de hueco, y la del medio con 80 arriba y abajo. */
	.mm-opiniones .mm-opiniones__tarjetas {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.mm-opiniones .mm-opiniones__tarjeta:nth-child(2) {
		margin: 80px 0;
	}
}

@media (max-width: 767px) {
	.mm-opiniones h2.mm-opiniones__titulo {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
	.mm-opiniones p.mm-opiniones__texto {
		width: 298.94px;
		font-size: 16px;
	}
	.mm-opiniones :is(p.mm-opiniones__cita, p.mm-opiniones__nombre, p.mm-opiniones__lugar) {
		font-size: 16px;
	}
}

/* ── Sección 9: «¿Listo para transformar tu hogar?» (foto con capa oscura) ─────────────────── */

/*
 * En Elementor: un contenedor con la foto de fondo y una capa negra, un título y un texto. El botón
 * de vídeo y el botón con capa que llevaba estaban ocultos en los TRES tamaños: no se convierten.
 * Es el bloque Portada (core/cover) del núcleo: foto, capa y alto se cambian desde el editor.
 * Cifras medidas en la referencia (cajas a 1366, 1024 y 390 px, 04-10-2026).
 */
/* Caja: 1400 como mucho y 10 px a cada lado (el contenedor «boxed» de Elementor), y 10 arriba y
   abajo (su relleno). El alto, 70vh, lo lleva el propio bloque. */
.mm-listo.wp-block-cover {
	box-sizing: border-box;
	width: calc(100% - 20px);
	max-width: 1400px;
	margin: 10px auto;
}
/* La capa: 35 %. El núcleo redondea dimRatio 35 a la clase has-background-dim-40 (pinta al 40 %). */
.mm-listo .wp-block-cover__background.has-background-dim {
	opacity: 0.35;
}
/* Título y texto en columna, centrados, con 20 de hueco (el «gap» del contenedor de Elementor). */
.mm-listo .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.mm-listo .wp-block-cover__inner-container > * {
	margin: 0;
}
.mm-listo h2.mm-listo__titulo {
	width: fit-content;
	max-width: 100%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
	text-align: center;
	color: #fff;
}
/* El párrafo de Elementor dejaba sus 16 px de margen debajo: cuentan al centrar en vertical. */
.mm-listo p.mm-listo__texto {
	width: 50.603%;
	margin-bottom: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	text-align: center;
	color: #fff;
}

@media (max-width: 1024px) {
	.mm-listo.wp-block-cover {
		width: calc((100% - 20px) * 0.95);
	}
	.mm-listo p.mm-listo__texto {
		width: 519.628px;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.mm-listo.wp-block-cover {
		width: calc(100% - 20px);
	}
	.mm-listo h2.mm-listo__titulo {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
	.mm-listo p.mm-listo__texto {
		width: 282.363px;
		font-size: 16px;
	}
}

/* ── Sección 10: «Nuestros trabajos» (título, texto y el mosaico de fotos) ─────────────────── */

/*
 * En Elementor: un contenedor a todo el ancho con un título, un texto y el «Masonry & Justified
 * Gallery» de Unlimited Elements (10 fotos). Las fotos no hacían nada al pulsarlas ni al pasar el
 * ratón (`pointer-events: none` en cada ficha). Aquí: Título, Párrafo y una Galería del núcleo con
 * el estilo «Mosaico» del tema (css/mosaico.css + js/mosaico.js).
 * Cifras medidas en la referencia (cajas a 1366, 1024 y 390 px, 04-10-2026).
 */
/* Columna centrada con 20 de hueco; 80 arriba y 90 abajo, sin relleno a los lados en escritorio. */
.mm-trabajos {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 80px 0 90px;
}
.mm-trabajos > * {
	margin: 0;
}
.mm-trabajos h2.mm-trabajos__titulo {
	width: fit-content;
	max-width: 100%;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
	text-align: center;
	color: #000;
}
/* El párrafo de Elementor dejaba sus 16 px de margen debajo: se suman al hueco hasta las fotos. */
.mm-trabajos p.mm-trabajos__texto {
	width: 32%;
	margin-bottom: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	text-align: center;
	color: #000;
}
.mm-trabajos .wp-block-gallery.mm-trabajos__mosaico {
	align-self: stretch;
}

@media (max-width: 1024px) {
	.mm-trabajos {
		padding: 80px 10px;
	}
	.mm-trabajos p.mm-trabajos__texto {
		width: 571.446px;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.mm-trabajos h2.mm-trabajos__titulo {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
	.mm-trabajos p.mm-trabajos__texto {
		width: 301.015px;
		font-size: 16px;
	}
}

/* ── Sección 11: «Preguntas frecuentes» y «Refresque el aspecto de su hogar» ──────────────── */

/*
 * En Elementor: dos columnas en una caja de 1200 px. A la izquierda, título, texto y el «Material
 * Accordion» de Unlimited Elements (5 preguntas, la primera abierta, se cierra la abierta al abrir
 * otra); a la derecha, un recuadro negro con título, texto y un botón «Contactanos» que iba a
 * /contact-us/ (404). Aquí: Grupo ×3, Título, Párrafo, el Acordeón del NÚCLEO (con «autoclose») y
 * Botones; el botón reutiliza el de la cita de la sección 1 (`.mm-boton-cita`, arriba) y va a
 * /contacto/. El recuadro llevaba una foto de fondo que no existe (404 también en la copia): negro.
 * Cifras medidas en la referencia (estilos calculados y cajas a 1366, 1024 y 390 px, 04-10-2026).
 * El acordeón no admite clase propia (sin `customClassName`): se le alcanza por su grupo.
 */
.mm-dudas {
	box-sizing: border-box;
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 80px;
}
.mm-dudas > * {
	margin: 0;
}
.mm-dudas__preguntas,
.mm-dudas__contacto {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mm-dudas__preguntas > *,
.mm-dudas__contacto > * {
	margin: 0;
}
.mm-dudas__preguntas {
	flex: 0 0 579px;
	padding: 10px;
}
.mm-dudas__contacto {
	flex: 0 0 581px;
	margin-left: 40px;
	padding: 40px;
	justify-content: center;
	align-items: center;
	background-color: #000;
}
.mm-dudas h2 {
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.5px;
}
.mm-dudas__preguntas h2 {
	width: fit-content;
	max-width: 100%;
	line-height: 1;
	color: #000;
}
.mm-dudas__contacto h2 {
	width: 425px;
	max-width: 100%;
	line-height: 1.4;
	text-align: center;
	color: #fff;
}
/* Los dos párrafos de Elementor dejaban sus 16 px de margen debajo. */
.mm-dudas__preguntas > p {
	width: 93.75%;
	margin-bottom: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	color: #000;
}
.mm-dudas__contacto > p {
	width: 404px;
	max-width: 100%;
	margin-bottom: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	line-height: 1.8;
	text-align: center;
	color: #fff;
}
.mm-dudas__contacto .wp-block-buttons {
	justify-content: center;
}

/* El acordeón: cada pregunta separada 10 px (también debajo de la última); cerrada en #EFEFEF, la
   abierta en negro con un borde negro de 3 px y el icono en un cuadro blanco de 40 px. */
.mm-dudas__preguntas .wp-block-accordion {
	display: block;
}
.mm-dudas__preguntas .wp-block-accordion-item {
	margin: 0 0 10px;
	background-color: #efefef;
}
.mm-dudas__preguntas .wp-block-accordion-item.is-open {
	border: 3px solid #000;
	background-color: #000;
}
/* El núcleo separa la pregunta de su respuesta con el hueco de bloques del tema (23 px): fuera. */
.mm-dudas__preguntas .wp-block-accordion-item > * {
	margin: 0;
}
.mm-dudas__preguntas .wp-block-accordion-heading {
	margin: 0;
	padding: 0;
}
/* !important: la regla de letra del tema fuerza con !important Georgia en los h1-h6 y la fuente del
   sistema en TODOS los <button>; aquí el título es un <h3> con un botón dentro (en la web, un <div>). */
.mm-dudas__preguntas .wp-block-accordion-heading,
.mm-dudas__preguntas .wp-block-accordion-heading__toggle {
	font-family: Georgia, "Times New Roman", Times, serif !important;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.8;
	letter-spacing: normal;
}
.mm-dudas__preguntas .wp-block-accordion-heading__toggle {
	box-sizing: border-box;
	width: calc(100% - 2px);
	min-height: 70px;
	margin: 1px;
	padding: 15px 10px 15px 0;
	color: #000;
	text-align: left;
}
.mm-dudas__preguntas .is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	color: #fff;
}
.mm-dudas__preguntas .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}
.mm-dudas__preguntas .wp-block-accordion-heading__toggle-title {
	padding-left: 20px;
}
/* El «+» del núcleo se queda en el marcado (y para los lectores de pantalla está oculto); a la
   vista, un chevron: a la derecha cerrado, hacia abajo abierto (los de Font Awesome de la web). */
.mm-dudas__preguntas .wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	font-size: 0;
	transform: none !important;
}
.mm-dudas__preguntas .wp-block-accordion-heading__toggle-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid #000;
	border-bottom: 2.5px solid #000;
	transform: translate(-65%, -50%) rotate(-45deg);
}
.mm-dudas__preguntas .is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
	background-color: #fff;
}
.mm-dudas__preguntas .is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before {
	transform: translate(-50%, -70%) rotate(45deg);
}
.mm-dudas__preguntas .wp-block-accordion-panel {
	padding: 0 30px 30px 23px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	line-height: 1.8;
	color: #fff;
}
.mm-dudas__preguntas .wp-block-accordion-panel p {
	margin: 0 0 16px;
}

@media (max-width: 1024px) {
	.mm-dudas {
		flex-direction: column;
		align-items: center;
		padding: 0 10px 80px;
	}
	.mm-dudas__preguntas {
		flex: none;
		align-self: stretch;
	}
	.mm-dudas__contacto {
		flex: none;
		width: calc(100% - 30px);
		margin: 20px 0 0;
		padding: 80px 40px;
	}
	.mm-dudas__contacto h2 {
		width: 746px;
	}
	.mm-dudas__contacto > p {
		width: 708px;
	}
}

/* En la web las dos columnas iban 10 px a la derecha y el recuadro tocaba el borde: aquí, centradas. */
@media (max-width: 767px) {
	.mm-dudas h2 {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
	.mm-dudas__preguntas > p,
	.mm-dudas__contacto > p {
		font-size: 16px;
	}
	.mm-dudas__preguntas .wp-block-accordion-heading,
	.mm-dudas__preguntas .wp-block-accordion-heading__toggle,
	.mm-dudas__preguntas .wp-block-accordion-panel {
		font-size: 16px;
	}
	.mm-dudas__contacto {
		width: 100%;
	}
	.mm-dudas__contacto h2 {
		width: 238px;
	}
	.mm-dudas__contacto > p {
		width: 284px;
	}
}

/* ── Sección 12: «Consultanos lo que desees» (franja oscura con el logo) y 13: el aire del final ── */

/*
 * En Elementor: una sección a todo el ancho, fondo #222, dos columnas iguales. A la izquierda un
 * título, un <h3> VACÍO (sólo un espacio de anchura cero: hacía de separador) y el botón «Contacta»;
 * a la derecha un marco con bordes arriba y abajo y el logo saliéndose por arriba (márgenes
 * negativos). El <h3> vacío no se copia: un título vacío lo anuncian los lectores de pantalla; su
 * hueco va como margen del título. La sección 13 era un espaciador de 50 px con 10 de relleno
 * arriba y abajo: aquí, un Espaciador de 70.
 * Cifras medidas en la referencia (estilos calculados a 1366, 1024 y 390 px, 04-10-2026).
 */
.mm-consulta {
	box-sizing: border-box;
	margin: 0;
	padding: 70px 0;
	background-color: #222;
}
.mm-consulta > *,
.mm-consulta__fila > *,
.mm-consulta__texto > *,
.mm-consulta__marco > * {
	margin: 0;
}
.mm-consulta__fila {
	display: flex;
	max-width: 1800px;
	margin: 0 auto;
}
.mm-consulta__texto,
.mm-consulta__marco {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 50%;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	padding: 10px;
}
.mm-consulta__texto > * {
	flex: 0 0 100%;
}
/* El margen de abajo suma los 5 del título y el <h3> vacío de la web (10 + 31 + 25). */
.mm-consulta h2 {
	margin-bottom: 71px;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 50px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.8px;
	color: #fff;
}
.mm-consulta .mm-consulta__boton .wp-block-button__link {
	display: inline-block;
	padding: 22px 35px;
	border: 0;
	border-radius: 4px;
	background-color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	color: #000;
}
.mm-consulta .mm-consulta__boton .wp-block-button__link:hover,
.mm-consulta .mm-consulta__boton .wp-block-button__link:focus-visible {
	background-color: #000;
	color: #fff;
}
/* `.mm-consulta` delante: el marco es el último hijo y la regla del núcleo
   `:root :where(.is-layout-flow) > :last-child` (más peso que una clase sola) le quitaba el margen de abajo. */
.mm-consulta .mm-consulta__marco {
	flex-basis: calc(50% - 40px);
	margin: 0 20px;
	border: 5px solid rgba(255, 255, 255, 0.09);
}
.mm-consulta .mm-consulta__logo {
	flex: 0 0 100%;
	margin: -120px 0 -85px;
	text-align: center;
}
.mm-consulta .mm-consulta__logo img {
	display: inline-block;
	width: 237px;
	max-width: 100%;
	height: auto;
}
.mm-antes-del-pie {
	margin: 0;
}

@media (max-width: 1024px) {
	.mm-consulta {
		padding: 0 10px;
	}
	.mm-consulta__fila {
		max-width: 1024px;
	}
	.mm-consulta h2 {
		margin-bottom: 75px;
		font-size: 41px;
	}
	.mm-consulta .mm-consulta__marco {
		margin: 20px;
	}
	.mm-consulta .mm-consulta__logo {
		margin: -45px 0 -35px;
	}
	.mm-consulta .mm-consulta__logo img {
		max-width: 58%;
	}
}

@media (max-width: 767px) {
	.mm-consulta__fila {
		flex-direction: column;
	}
	.mm-consulta__texto,
	.mm-consulta__marco {
		flex: none;
	}
	/* Con `.mm-consulta__texto` delante: el título es el primer hijo y el núcleo
	   (`:root :where(.is-layout-flow) > :first-child`) le quitaba el margen de arriba. */
	.mm-consulta .mm-consulta__texto > h2 {
		margin-top: 20px;
		margin-bottom: 65px;
		font-size: 24px;
		letter-spacing: normal;
	}
	.mm-consulta .mm-consulta__boton {
		margin-bottom: 20px;
	}
	.mm-consulta .mm-consulta__boton .wp-block-button__link {
		padding: 15px;
		font-size: 14px;
	}
	.mm-consulta .mm-consulta__marco {
		margin: 0 10px 20px;
	}
	.mm-consulta .mm-consulta__logo {
		margin: -30px 0 -10px;
	}
	.mm-consulta .mm-consulta__logo img {
		width: 160px;
		max-width: none;
	}
}