/* ==========================================================================
   20 · LAYOUT — contenedores, ritmo de sección, rejillas
   --------------------------------------------------------------------------
   PUNTOS DE RUPTURA del proyecto. Solo estos tres, mobile-first:
       640px   →  tablet pequeña   (2 columnas)
       768px   →  tablet / nav de escritorio
      1024px   →  escritorio       (3-4 columnas)
   El tema anterior mezclaba 400/640/700/720/768/1024 sin criterio. Aquí no
   se añade un punto de ruptura nuevo sin anotarlo en docs/DECISIONS.md.
   ========================================================================== */

/* ── Contenedores ──────────────────────────────────────────────────────── */

.container {
	width: 100%;
	max-width: var(--w-container);
	margin-inline: auto;
	padding-inline: var(--space-3);
}

.container--prose {
	max-width: var(--w-prose);
}

.container--narrow {
	max-width: var(--w-narrow);
}

/* Columna de lectura centrada (decisión 060). Se limita a los hijos y no al
   contenedor para que los 800px sean de texto: en `.container--prose` el ancho
   incluye los márgenes laterales. */
.container--article > * {
	max-width: var(--w-article);
	margin-inline: auto;
}

@media (min-width: 768px) {
	.container {
		padding-inline: var(--space-4);
	}
}

/* ── Ritmo vertical de sección ─────────────────────────────────────────────
   Norma de marca: separación mínima entre secciones de 60px. El escalón de
   la rejilla que la cumple es 64px (--space-6); en escritorio sube a 96px.
   ────────────────────────────────────────────────────────────────────────── */

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

.section--tight {
	padding-block: var(--space-5);
}

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

/* Sección hundida: un escalón por debajo del fondo de la página, para alternar
   el ritmo en una portada o una landing largas. Usa el alias, así que en claro
   es Mint Mid y en oscuro Dark Canopy sin una sola regla condicional.
   Las tarjetas de dentro NO llevan .is-solid: su fondo translúcido se apoya
   justo en este escalón para despegarse del fondo. */
.section--sunken {
	background-color: var(--c-bg-sunken);
}

@media (min-width: 768px) {
	.section {
		padding-block: var(--space-7);
	}

	.section--tight {
		padding-block: var(--space-6);
	}

	.section--loose {
		padding-block: var(--space-8);
	}
}

/* Van DESPUÉS de la media query a propósito: con la misma especificidad, la
   que se declara más tarde gana. Antes estaban arriba y, desde 768px, el
   `padding-block` de .section--tight les pisaba el cero. */
.section--flush-top {
	padding-block-start: 0;
}

.section--flush-bottom {
	padding-block-end: 0;
}

/* Las secciones necesitan contexto de apilamiento propio: los orbes
   difuminados de 41-effects.css se posicionan en absoluto dentro de ellas. */
.section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* ── Cabecera de sección ───────────────────────────────────────────────── */

.section__head {
	max-width: var(--w-prose);
	margin-block-end: var(--space-5);
}

.section__head--center {
	margin-inline: auto;
	text-align: center;
}

.section__title {
	font-size: var(--fs-h2);
}

.section__head > .eyebrow--milestone {
	margin-block-end: var(--space-2);
}

.section__lead {
	margin-block-start: var(--space-2);
	color: var(--c-muted);
	font-size: var(--fs-lead);
}

/* Barra de acento vertical del manual de marca: 6×26px, radio 3, degradado
   Emerald → Ember. Se coloca como pseudo-elemento del título, fuera del flujo:
   así el título puede llevar un .gradient-text dentro sin partirse en columnas.
   Los 26px son los del H2. En un H1 crece con el título, en la misma proporción,
   o se queda en una marca diminuta junto a dos líneas de 56px. */
.section__title--barred {
	position: relative;
	padding-inline-start: calc(6px + var(--space-2));
}

.section__title--barred::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 6px;
	height: max(26px, 0.76em);
	border-radius: 3px;
	background: linear-gradient(to bottom, var(--c-emerald), var(--c-ember));
	transform: translateY(-50%);
}

/* ── Rejillas ──────────────────────────────────────────────────────────── */

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

@media (min-width: 768px) {
	.grid {
		gap: var(--space-4);
	}
}

.grid--2,
.grid--3,
.grid--4 {
	grid-template-columns: 1fr;
}

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

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

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

/* Rejilla que se adapta sola. Útil cuando el número de elementos lo decide
   el contenido (herramientas, programas) y no queremos huecos raros. */
.grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* ── Utilidades de flujo ───────────────────────────────────────────────── */

/* Ritmo vertical entre hermanos, sin tocar el primero ni el último. */
.flow > * + * {
	margin-block-start: var(--space-3);
}

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

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

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.cluster--center {
	justify-content: center;
}

/* ── Separador de secciones ────────────────────────────────────────────────
   Filete de 1px con degradado que se desvanece en los extremos. En el tema
   anterior era un <div> con estilo inline repetido decenas de veces.
   ────────────────────────────────────────────────────────────────────────── */

.rule {
	height: 1px;
	border: 0;
	background: linear-gradient(
		to right,
		transparent,
		var(--c-forest),
		var(--c-ember),
		transparent
	);
	opacity: 0.5;
}

/* ── Ayudas de visibilidad ─────────────────────────────────────────────────
   Estas clases SOLO saben ocultar. Nunca declaran un `display` visible.
   El motivo: `display: initial` equivale a `display: inline`, así que una
   utilidad «mostrar» aplastaría el flex o el grid que el componente ya tenía.
   Al ocultar únicamente, fuera del punto de ruptura la regla no existe y
   manda el display propio del componente.

   `!important` está justificado: una utilidad de visibilidad debe ganar
   siempre, o no sirve para nada.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.hide-mobile {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.hide-desktop {
		display: none !important;
	}
}