/* =========================================================================
   areas.css — "Una red especializada": grid de áreas legales como pastillas
   enlazables + CTAs. Reutilizable en la página de áreas legales.
   ========================================================================= */

.areas { background: var(--soft); }

.areas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 8px;
}

.area-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	color: var(--ink);
	font-weight: var(--fw-medium);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.area-chip:hover {
	border-color: var(--blue);
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
	color: var(--ink);
}
.area-chip__icon {
	width: 34px; height: 34px;
	flex: 0 0 34px;
	border-radius: 9px;
	background: var(--sky);
	color: var(--blue);
	display: grid;
	place-items: center;
}
.area-chip__icon svg { width: 18px; height: 18px; }

.areas__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

@media (max-width: 900px) { .areas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .areas__grid { grid-template-columns: 1fr; } }