.mcci-editorial,
.estudio {
	padding: clamp(5rem, 10vw, 9rem) 0;
}
.mcci-editorial--theme-light       { background: var(--c-bg-1); }
.mcci-editorial--theme-cream       { background: var(--c-bg-2); }
.mcci-editorial--theme-dark        { background: var(--c-dark); color: var(--c-inverse); }
.mcci-editorial--theme-dark .section-title { color: var(--c-inverse); }
.mcci-editorial--theme-dark .section-intro { color: rgba(245,243,238,0.65); }

.mcci-editorial-inner {
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 clamp(1.5rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: center;
}
.mcci-editorial--img-right .mcci-editorial-inner {
	grid-template-areas: "content image";
}
.mcci-editorial--img-left .mcci-editorial-inner {
	grid-template-areas: "image content";
	grid-template-columns: 1fr 1.1fr;
}
.mcci-editorial-image, .estudio-image {
	grid-area: image;
	aspect-ratio: var(--mcci-editorial-ratio, 4/5);
	overflow: hidden;
	background: #1a1d22;
}
.mcci-editorial-content, .estudio-content {
	grid-area: content;
}
.mcci-editorial-content .section-intro,
.estudio-content .section-intro { margin-bottom: 2rem; }

.mcci-editorial--hover .mcci-editorial-image img {
	transition: transform 1.4s var(--ease);
}
/* will-change sólo en dispositivos con hover real (desktop). En mobile crea
 * compositing layers permanentes sin beneficio (no hay :hover en touch). */
@media (hover: hover) and (pointer: fine) {
	.mcci-editorial--hover .mcci-editorial-image img { will-change: transform; }
}
.mcci-editorial--hover .mcci-editorial-image:hover img { transform: scale(1.04); }

@media (max-width: 1024px) {
	.mcci-editorial-inner,
	.mcci-editorial--img-left .mcci-editorial-inner,
	.mcci-editorial--img-right .mcci-editorial-inner {
		grid-template-columns: 1fr;
		grid-template-areas: "image" "content";
	}
	.mcci-editorial-image, .estudio-image { max-height: 460px; }
}