/**
 * mwm-por-que--descubre: sección apilada (kicker + intro, imágenes, cuerpo, grid beneficios).
 * Alineado con Figma: filas con separación vertical ~100px, gutters en fila de medios.
 */

/* Mismo ancho que mwm-por-que (layout constrained + contentSize del theme). */
.mwm-por-que--descubre.alignfull > .wp-block-columns,
.editor-styles-wrapper .mwm-por-que--descubre.alignfull > .wp-block-columns {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1296px);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Figma 6501:21197 — items-start: misma línea superior en las dos fotos (no center). */
.mwm-por-que--descubre .mwm-por-que__media-row.wp-block-columns {
	align-items: flex-start;
}

.mwm-por-que--descubre .mwm-por-que__media-row > .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 0;
}

/*
 * Figma 6501:21199 / 21201 — 16:9, object-cover, radio 12px.
 * Grande: ancho máx. 636px (marco 636×357).
 */
.mwm-por-que--descubre .mwm-por-que__media-row figure.wp-block-image {
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 16 / 9;
}

.mwm-por-que--descubre .mwm-por-que__media-row figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mwm-por-que--descubre .mwm-por-que__media-row > .wp-block-column:first-child figure.wp-block-image {
	width: 100%;
}

.mwm-por-que--descubre .mwm-por-que__media-row > .wp-block-column:last-child figure.wp-block-image {
	width: 100%;
	max-width: 636px;
}

@media (min-width: 783px) {

	.mwm-por-que--descubre .mwm-por-que__media-row > .wp-block-column:first-child {
		padding-right: 110px;
		box-sizing: border-box;
	}

	.mwm-por-que--descubre .mwm-por-que__media-row > .wp-block-column:last-child {
		padding-right: 220px;
		box-sizing: border-box;
	}
}

.mwm-por-que--descubre p.mwm-por-que__sublead,
.editor-styles-wrapper .mwm-por-que--descubre p.mwm-por-que__sublead {
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 20px !important;
	font-weight: 400;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	color: var(--wp--preset--color--foreground);
}

/* Figma 6501:21217 — celdas p-[20px]; líneas horizontales alineadas al padding */
.mwm-por-que--descubre .mwm-benefits-grid__card::before {
	left: 20px;
	right: 20px;
}

/* Ritmo vertical explícito (100px entre filas) si el layout constrained no aplica gap */
.mwm-por-que--descubre.alignfull.mwm-por-que {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 100px;
}

/* Filas 3–4: columna kicker vacía sin offset superior del patrón base */
.mwm-por-que--descubre > .wp-block-columns:nth-child(n + 3) > .wp-block-column:first-child {
	padding-top: 0;
}

/*
 * Galería: fotos editoriales (historia-image) en la rejilla mwm-por-que.
 * Segunda foto en col. 416px; primera en col. fluida — mismos tamaños que mwm-historia.
 */
.mwm-por-que--descubre .historia-row.wp-block-columns {
	gap: 24px;
	align-items: center;
}

.mwm-por-que--descubre .historia-row > .wp-block-column:first-child {
	flex-basis: 416px;
	flex-grow: 0;
	flex-shrink: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.mwm-por-que--descubre .historia-row > .wp-block-column:last-child {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: clamp(0px, 12vw, 220px);
}

.mwm-por-que--descubre .historia-image--big img {
	display: block;
	max-width: 636px;
	width: 100%;
	height: auto;
}

.mwm-por-que--descubre .historia-image--small img {
	display: block;
	max-width: 306px;
	width: 100%;
	height: auto;
}

@media (max-width: 782px) {

	.mwm-por-que--descubre .mwm-por-que__media-row > .wp-block-column:first-child,
	.mwm-por-que--descubre .mwm-por-que__media-row > .wp-block-column:last-child {
		padding-right: 0;
	}
}