/**
 * Urra Core — Pilares widget styles.
 *
 * Sección centrada con H2 + subtítulo y grid de tarjetas con icono.
 * Estilos aislados bajo `.uc-pi-wrap`.
 */

.elementor-widget-uc_pillars > .elementor-widget-container {
	overflow: visible;
}

.uc-pi-wrap {
	--pi-col-d: 3;
	--pi-col-t: 2;
	--pi-col-m: 1;
	--pi-heading-color: #1a1a1a;
	--pi-accent-color: #009966;
	--pi-heading-size: 40px;
	--pi-subtitle-color: rgba(31, 41, 55, 0.65);
	--pi-subtitle-size: 16px;
	--pi-card-title-color: #1a1a1a;
	--pi-card-title-size: 20px;
	--pi-card-desc-color: rgba(31, 41, 55, 0.65);
	--pi-card-desc-size: 16px;
	--pi-card-desc-size-mobile: 14px;
	--pi-icon-color: #009966;
	--pi-icon-size: 32px;
	--pi-shape-size: 72px;
	--pi-shape-radius: 16px;
	--pi-cards-gap: 32px;
	--pi-header-gap: 48px;
	--pi-card-gap: 16px;

	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

.uc-pi-wrap,
.uc-pi-wrap *,
.uc-pi-wrap *::before,
.uc-pi-wrap *::after {
	box-sizing: border-box;
}

/* ── Encabezado ─────────────────────────────────────────────────── */

.uc-pi-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 720px;
	margin: 0 0 var(--pi-header-gap);
	padding: 0;
}

.uc-pi__heading {
	margin: 0;
	padding: 0;
	color: var(--pi-heading-color) !important;
	font-size: var(--pi-heading-size);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.uc-pi-wrap .uc-pi__heading .uc-pi__heading-accent,
.uc-pi-wrap .uc-pi__heading > .uc-pi__heading-accent {
	color: var(--pi-accent-color) !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	font-variant: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	background: transparent !important;
	-webkit-text-fill-color: currentColor;
}

.uc-pi__subtitle {
	margin: 0;
	padding: 0;
	color: var(--pi-subtitle-color) !important;
	font-size: var(--pi-subtitle-size);
	font-weight: 400;
	line-height: 1.55;
}

/* ── Grid ───────────────────────────────────────────────────────── */

.uc-pi-grid {
	display: grid;
	grid-template-columns: repeat(var(--pi-col-d), minmax(0, 1fr));
	gap: var(--pi-cards-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Tarjeta ────────────────────────────────────────────────────── */

.uc-pi-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pi-card-gap);
	margin: 0;
	padding: 0;
	text-align: center;
}

.uc-pi-shape {
	display: inline-flex;
	flex: 0 0 var(--pi-shape-size);
	align-items: center;
	justify-content: center;
	width: var(--pi-shape-size);
	height: var(--pi-shape-size);
	border-radius: var(--pi-shape-radius);
}

.uc-pi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pi-icon-size);
	height: var(--pi-icon-size);
	line-height: 1;
}

.uc-pi-icon svg,
.uc-pi-icon i {
	display: block;
	width: var(--pi-icon-size) !important;
	height: var(--pi-icon-size) !important;
	max-width: var(--pi-icon-size) !important;
	max-height: var(--pi-icon-size) !important;
	font-size: var(--pi-icon-size) !important;
	line-height: 1 !important;
}

/* Modo tinte: un solo color para iconos de fuente o SVG monocromáticos. */
.uc-pi-wrap--icon-tint .uc-pi-shape {
	color: var(--pi-icon-color);
}

.uc-pi-wrap--icon-tint .uc-pi-icon {
	color: inherit;
}

.uc-pi-wrap--icon-tint .uc-pi-icon svg,
.uc-pi-wrap--icon-tint .uc-pi-icon i {
	color: inherit;
}

.uc-pi-wrap--icon-tint .uc-pi-icon svg path,
.uc-pi-wrap--icon-tint .uc-pi-icon svg circle,
.uc-pi-wrap--icon-tint .uc-pi-icon svg rect,
.uc-pi-wrap--icon-tint .uc-pi-icon svg polygon,
.uc-pi-wrap--icon-tint .uc-pi-icon svg line,
.uc-pi-wrap--icon-tint .uc-pi-icon svg polyline {
	fill: currentColor;
	stroke: currentColor;
}

.uc-pi-card__title {
	margin: 0;
	padding: 0;
	color: var(--pi-card-title-color) !important;
	font-size: var(--pi-card-title-size);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.uc-pi-card__desc {
	margin: 0;
	padding: 0;
	color: var(--pi-card-desc-color) !important;
	font-size: var(--pi-card-desc-size);
	font-weight: 400;
	line-height: 1.55;
}

/* ── Placeholder (editor) ───────────────────────────────────────── */

.uc-pi-wrap.uc-pi-wrap--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	color: rgba(31, 41, 55, 0.65);
	font-size: 14px;
	text-align: center;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.uc-pi-grid {
		grid-template-columns: repeat(var(--pi-col-t), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.uc-pi-wrap {
		--pi-header-gap: 32px;
	}

	.uc-pi-header {
		max-width: 100%;
	}

	.uc-pi__heading {
		font-size: clamp(1.5rem, 6vw, var(--pi-heading-size));
	}

	.uc-pi-grid {
		grid-template-columns: repeat(var(--pi-col-m), minmax(0, 1fr));
		gap: 28px;
	}

	.uc-pi-card__desc {
		font-size: var(--pi-card-desc-size-mobile);
	}
}