/*
 * Secciones que comparten la portada y /interiorismo/ (fase B de «sin plantilla»): las dos fotos con
 * «Transformando espacios…» (`.mm-inspirado`) y «Nuestro proceso de diseño» con `centinela/pasos`
 * (`.mm-proceso`). Salieron de portada.css el 05-10 al rehacer /interiorismo/, que las repite tal
 * cual: una sola copia de cada regla, encolada en las dos páginas (functions.php).
 */

/* ── Sección 4: dos fotos + «Transformando espacios con un diseño interior inspirado» ────── */

/*
 * En Elementor: contenedor de 1.200 px con tres columnas (25 % + 25 % + 50 % con 40 px de margen,
 * que no caben y encogen a 290 + 290 + 580, como aquí con flex). El botón «GET QUOTE» y el botón de
 * vídeo que había en la columna del texto estaban ocultos en los TRES tamaños: no se convierten.
 * En tableta y móvil la primera foto se ocultaba, pero su columna vacía dejaba 20 px (sus
 * rellenos): se suman al padding de arriba.
 */
.mm-inspirado,
.mm-inspirado * {
	box-sizing: border-box;
}
/* :is() sube la especificidad por encima del margen que pone el núcleo a los hijos de un grupo. */
.mm-inspirado :is(h2, p, figure, .wp-block-group) {
	margin: 0;
}
.mm-inspirado .mm-inspirado__fila {
	display: flex;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 0;
}
.mm-inspirado .mm-inspirado__foto {
	display: flex;
	flex-direction: column;
	width: 25%;
	padding: 10px;
}
.mm-inspirado .mm-inspirado__foto figure {
	text-align: center;
}
.mm-inspirado .mm-inspirado__foto img {
	display: inline-block;
	width: 100%;
	height: auto;
	vertical-align: middle;
}
/* El «float» de Elementor: al pasar el ratón la foto sube 8 px. */
.mm-flota img {
	transition: transform 0.3s ease-out;
}
.mm-flota img:hover {
	transform: translateY(-8px);
}
.mm-inspirado .mm-inspirado__texto {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 50%;
	margin-left: 40px;
	padding: 10px;
}
.mm-inspirado h2.mm-inspirado__titulo {
	width: 100%;
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: -0.5px;
	color: #000;
}
.mm-inspirado p.mm-inspirado__parrafo {
	width: 99.165%;
	margin-bottom: 26px; /* 16 del párrafo + 10 del widget */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	color: #000;
}

@media (max-width: 1024px) {
	.mm-inspirado {
		padding: 0 10px;
	}
	.mm-inspirado .mm-inspirado__fila {
		flex-direction: column;
		padding: 40px 0 80px;
	}
	.mm-inspirado .mm-inspirado__foto--primera {
		display: none;
	}
	.mm-inspirado .mm-inspirado__foto,
	.mm-inspirado .mm-inspirado__texto {
		width: 100%;
	}
	.mm-inspirado .mm-inspirado__foto img {
		height: 500px;
		object-fit: cover;
	}
	.mm-inspirado .mm-inspirado__texto {
		margin: 20px 0 0;
	}
}

@media (max-width: 767px) {
	.mm-inspirado .mm-inspirado__fila {
		padding: 100px 0 80px;
	}
	.mm-inspirado .mm-inspirado__foto img {
		height: 300px;
	}
	.mm-inspirado h2.mm-inspirado__titulo {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
	.mm-inspirado p.mm-inspirado__parrafo {
		font-size: 16px;
	}
}

/* ── Sección 7: «Nuestro proceso de diseño» (pasos con tarjetas y fotos) ─────────────────── */

/*
 * En Elementor eran dos columnas con dos widgets de Unlimited Elements «sincronizados» por su mando
 * a distancia: un «Content Slider» (tarjetas negras con título y texto, y barras debajo) y un
 * «Justified Image Carousel» (fotos a 400 px de alto con los números 1-4 encima). Aquí es UN
 * bloque, centinela/pasos: cada paso lleva junto su título, su texto y su foto, y el título y el
 * párrafo de arriba son bloques del núcleo dentro de él. Cifras medidas en la VM el 30-09
 * (pruebas/estilos_de.py y cajas a 1366, 1024 y 390 px).
 * MEJORA: las barras y los números son botones (en la web, <div>), se manejan con el teclado, y el
 * paso automático tiene botón de pausa.
 */
.mm-proceso,
.mm-proceso * {
	box-sizing: border-box;
}
.mm-proceso {
	padding: 80px 0;
}
.mm-proceso .centinela-pasos {
	--centinela-pasos-hueco: 0;
	--centinela-pasos-relleno: 60px;
	max-width: 1200px;
	margin: 0 auto;
}
.mm-proceso .centinela-pasos__texto {
	padding: 10px;
}
/* La columna de las fotos acababa 28 px por debajo de ellas (los puntos de Owl, ocultos, y un
   margen negativo); la del texto, 10 px por debajo de las barras. Así las fotos quedan 18 px por
   encima del pie de las barras, como en la web. */
.mm-proceso .centinela-pasos__fotos {
	padding: 10px 10px 28px;
}
.mm-proceso .centinela-pasos__presentacion {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.mm-proceso .centinela-pasos__presentacion :is(h2, p) {
	margin: 0;
}
.mm-proceso h2.mm-proceso__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-proceso p.mm-proceso__texto {
	width: 91.724%;
	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-proceso .centinela-pasos__tarjetas {
	width: 93.103%;
}
/* !important: el título de cada paso es un <h3> (en la web, un <div>), y la regla de letra del tema
   pone con !important Georgia en todos los encabezados; en la web salía la letra sin serifa. */
.mm-proceso .centinela-pasos__titulo {
	padding: 0;
	font-family: Georgia, "Times New Roman", Times, serif !important;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: normal;
	text-transform: none;
}
.mm-proceso .centinela-pasos__descripcion {
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
}
.mm-proceso .centinela-pasos__numeros {
	right: 10px;
	bottom: 34.5px; /* 28 del pie de la columna + 6,5 que los números quedaban por encima del de la foto */
}
/* !important por la regla de letra del tema, que fuerza con !important la del sistema en todos los
   <button> (ver la sección 5). */
.mm-proceso .centinela-pasos__numero {
	font-family: Georgia, "Times New Roman", Times, serif !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
}

@media (max-width: 1024px) {
	.mm-proceso {
		padding: 80px 10px;
	}
	.mm-proceso .centinela-pasos {
		grid-template-columns: minmax(0, 1fr);
	}
	.mm-proceso .centinela-pasos__tarjetas {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.mm-proceso .centinela-pasos {
		--centinela-pasos-relleno: 30px;
	}
	.mm-proceso h2.mm-proceso__titulo {
		font-size: 24px;
		letter-spacing: -0.24px;
	}
	.mm-proceso p.mm-proceso__texto {
		width: 333px;
		max-width: 100%;
		font-size: 16px;
	}
	.mm-proceso .centinela-pasos__titulo {
		font-size: 22px;
	}
	.mm-proceso .centinela-pasos__numeros {
		bottom: 31.5px; /* en móvil, 3,5 px por encima del pie de la foto */
	}
}