/* ==========================================================================
   Páginas internas — Rejilla de áreas/servicios.
   Cabecera a 2 cols + grid de tarjetas. Las tarjetas reutilizan el componente
   `.card` (ver components/cards.css); aquí solo el layout y el modificador
   `.card--area` (padding más contenido y H3 menor para 3 columnas).
   ========================================================================== */

.page-areas {
	padding: var(--space-9) 0;
	background: var(--color-cream);
}

@media (min-width: 960px) {
	.page-areas {
		padding: var(--space-10) 0;
	}
}

.page-areas__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: end;
	margin-bottom: var(--space-8);
}

@media (min-width: 720px) {
	.page-areas__head {
		grid-template-columns: 1.2fr 1fr;
		gap: var(--space-7);
	}
}

.page-areas__eyebrow {
	margin-bottom: 18px;
}

.page-areas__title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--fz-h2-section);
	line-height: 1.1;
	color: var(--color-navy);
	letter-spacing: var(--ls-heading);
	margin: 0;
}

.page-areas__title em {
	font-style: italic;
	color: var(--color-gold);
	font-weight: 400;
}

.page-areas__intro {
	color: var(--color-text-muted);
	font-size: var(--fz-body);
	line-height: var(--lh-long);
}

.page-areas__intro p {
	color: inherit;
	margin: 0;
}

.page-areas__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 640px) {
	.page-areas__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.page-areas__grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* Modificador de .card para el contexto de áreas: más compacto. */
.card--area {
	padding: var(--space-6);
	gap: var(--space-3);
}

.card--area .card__title {
	font-size: 23px;
	font-weight: 500;
}