/* ==========================================================================
   CM Digital — Sección 08: Por Qué CM Digital
   ========================================================================== */

.why-cm {
	background: var(--bg-primary);
}

.why-cm__layout {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-2xl);
}

.why-cm__intro {
	max-width: 640px;
}

.why-cm__subcopy {
	font-size: var(--fs-body);
	color: var(--text-secondary);
	line-height: var(--lh-body);
	margin-top: var(--space-sm);
}

.why-cm__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-md);
}

/* Thin connector ticks between modules — a restrained stand-in for four
   separate bordered cards. */
.why-cm__module {
	position: relative;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--border);
}

.why-cm__module::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 32px;
	height: 1px;
	background: var(--accent-400);
}

.why-cm__module-number {
	display: block;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	color: var(--accent-300);
	margin-bottom: var(--space-sm);
}

.why-cm__module-title {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
	text-transform: uppercase;
	margin-bottom: var(--space-2xs);
	max-width: 24ch;
}

.why-cm__module-desc {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	max-width: 42ch;
}

/* Staggered reveal */

.why-cm__layout.reveal-armed .why-cm__module {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-cm__layout.reveal-armed.is-visible .why-cm__module {
	opacity: 1;
	transform: none;
}

.why-cm__layout.reveal-armed.is-visible .why-cm__module:nth-child(1) {
	transition-delay: 0.1s;
}
.why-cm__layout.reveal-armed.is-visible .why-cm__module:nth-child(2) {
	transition-delay: 0.22s;
}
.why-cm__layout.reveal-armed.is-visible .why-cm__module:nth-child(3) {
	transition-delay: 0.34s;
}
.why-cm__layout.reveal-armed.is-visible .why-cm__module:nth-child(4) {
	transition-delay: 0.46s;
}

@media (min-width: 900px) {
	.why-cm__layout {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--space-3xl);
	}

	.why-cm__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-2xl) var(--space-xl);
	}

	/* The vertical seam between columns, crossing the horizontal ones from
	   each module's top border — together they read as a connected grid. */
	.why-cm__grid::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background: var(--border);
		transform: translateX(calc(var(--space-xl) / -2));
	}
}