/* =========================================================================
   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; } }

/* =========================================================================
   Listado de áreas legales (plantilla page-areas-legales.php):
   tarjetas con icono, título enlazable, extracto y enlace "Saber más".
   ========================================================================= */
.area-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap);
}
.area-detail-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: clamp(24px, 3vw, 34px);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.area-detail-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}
.area-detail-card__icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	background: var(--sky);
	color: var(--blue);
	display: grid; place-items: center;
	margin-bottom: 16px;
}
.area-detail-card__icon svg { width: 24px; height: 24px; }
.area-detail-card h3 { font-size: 1.25rem; margin: 0 0 10px; }
.area-detail-card h3 a { color: var(--navy); }
.area-detail-card h3 a:hover { color: var(--blue); }
.area-detail-card p { color: var(--muted); margin: 0 0 18px; flex: 1; }
.area-detail-card .link-strong { margin-top: auto; }

@media (max-width: 760px) { .area-detail-grid { grid-template-columns: 1fr; } }