/* ============================================================
   03 · LAYOUT — Secciones, ritmo de fondos y flujo.
   ============================================================ */

.cm-section {
	padding-block: var(--cm-section-y);
}

.cm-section--tight {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.cm-section--surface {
	background: var(--cm-color-surface);
}

.cm-section--alt {
	background: var(--cm-color-surface-alt);
}

.cm-section--dark {
	background: var(--cm-color-bg);
	color: var(--cm-color-text);
}

/* Ritmo: nunca dos secciones oscuras seguidas (doc 02 §2). */

.cm-flow > * + * {
	margin-block-start: var(--cm-space-24);
}

.cm-grid {
	display: grid;
	gap: var(--cm-space-24);
}

.cm-grid--2 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cm-grid--3 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cm-grid--4 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.cm-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cm-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cm-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Reveal de sección (doc 03 §4.1): solo con JS progressive enhancement. */
.cm-reveal {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.cm-js .cm-reveal:not(.is-visible) {
		opacity: 0;
		transform: translateY(14px);
	}

	.cm-js .cm-reveal {
		transition: opacity var(--cm-dur-reveal) var(--cm-ease-decelerate),
			transform var(--cm-dur-reveal) var(--cm-ease-decelerate);
	}
}