/**
 * @layer layout — contenedor, grilla de 12 columnas, ritmo de secciones.
 */

@layer layout {
	.contenedor {
		width: 100%;
		max-width: var(--container-max);
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	@media (width >= 768px) {
		.contenedor {
			--gutter: 40px;
		}
	}

	/* El header es fixed (fuera del flujo, ver components/header.css) en
	   todas las páginas: acá se compensa con padding-top para que el
	   contenido no arranque tapado. En el home se saca ese padding porque el
	   hero está pensado para quedar debajo del header, que ahí es
	   transparente hasta que se scrollea. */
	#contenido {
		padding-top: var(--header-height);
	}

	body.home #contenido {
		padding-top: 0;
	}

	.grilla-12 {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: var(--space-5);
	}

	/* Secciones editoriales: 8 columnas centradas dentro de la grilla de 12. */
	.grilla-editorial {
		grid-column: 3 / span 8;
	}

	@media (width < 1024px) {
		.grilla-editorial {
			grid-column: 1 / -1;
		}
	}

	section {
		padding-block: var(--space-7);
	}

	@media (width >= 1024px) {
		section {
			padding-block: var(--space-7);
		}
	}
}