/* =========================================================================
   ESTAVILLO — Layout
   Contenedores, secciones y grillas. Scopeado bajo .es-page.
   ========================================================================= */

.es-container {
	max-width: var(--es-max-w);
	margin: 0 auto;
	padding-left: var(--es-pad-x);
	padding-right: var(--es-pad-x);
}

.es-section {
	padding-top: var(--es-section-y);
	padding-bottom: var(--es-section-y);
	border-bottom: 1px solid var(--es-line);
}

/* sección sobre bloque de contraste (más oscura que el papel) */
.es-section--block {
	background: var(--es-block);
	border-bottom-color: var(--es-block-line);
}

/* ---------- header de sección: nº + label mono + acción opcional ---------- */

.es-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: clamp(36px, 4vw, 52px);
}

.es-section-head__title {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.es-section-head__num {
	font-family: var(--es-mono);
	font-size: 12px;
	color: var(--es-accent);
}

/* ---------- grillas ---------- */

.es-grid {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

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

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

@media (max-width: 1023px) {
	.es-grid--3 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 680px) {
	.es-grid--3,
	.es-grid--2 {
		grid-template-columns: 1fr;
	}
}