/* =============================================================================
   2PX Indicadores Widget
   ============================================================================= */

/* ── Container ──────────────────────────────────────────────────────────────── */

.twopx-indicadores {
	display: flex;
	flex-direction: column;
}

/* ── Items wrapper ───────────────────────────────────────────────────────────── */

.twopx-indicadores__items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}

.twopx-indicadores__items--horizontal {
	flex-direction: row;
	justify-content: center;
}

.twopx-indicadores__items--vertical {
	flex-direction: column;
	align-items: stretch;
}

/* ── Alignment helpers ──────────────────────────────────────────────────────── */

.twopx-indicadores--align-left .twopx-indicadores__item {
	text-align: left;
}

.twopx-indicadores--align-center .twopx-indicadores__item {
	text-align: center;
}

.twopx-indicadores--align-right .twopx-indicadores__item {
	text-align: right;
}

/* ── Item ───────────────────────────────────────────────────────────────────── */

.twopx-indicadores__item {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* ── Number row (prefix + value + suffix) ───────────────────────────────────── */

.twopx-indicadores__number {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	line-height: 1;
}

.twopx-indicadores--align-left   .twopx-indicadores__number { justify-content: flex-start; }
.twopx-indicadores--align-center .twopx-indicadores__number { justify-content: center; }
.twopx-indicadores--align-right  .twopx-indicadores__number { justify-content: flex-end; }

.twopx-indicadores__prefix,
.twopx-indicadores__value,
.twopx-indicadores__suffix {
	display: inline-block;
	color: #ffffff;
	font-weight: 700;
}

.twopx-indicadores__value {
	font-size: 3rem;
}

.twopx-indicadores__prefix,
.twopx-indicadores__suffix {
	font-size: 2.25rem;
}

/* ── Label ──────────────────────────────────────────────────────────────────── */

.twopx-indicadores__label {
	margin-top: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8a9bbf;
}

/* ── Divider ────────────────────────────────────────────────────────────────── */

.twopx-indicadores__divider {
	flex-shrink: 0;
	background-color: #c0392b;
}

.twopx-indicadores__items--horizontal .twopx-indicadores__divider {
	width: 2px;
	height: 60px;
	align-self: center;
}

.twopx-indicadores__items--vertical .twopx-indicadores__divider {
	height: 2px;
	width: 60px;
	align-self: center;
}

/* ── Hero Block ─────────────────────────────────────────────────────────────── */

.twopx-indicadores__hero {
	width: 100%;
	flex-shrink: 0;
	margin-bottom: 48px;
}

.twopx-indicadores__hero-eyebrow {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 10px;
}

/* ── Hero comparison row ────────────────────────────────────────────────────── */

.twopx-indicadores__hero-comparison {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* ── Hero side (before / after) ─────────────────────────────────────────────── */

.twopx-indicadores__hero-side {
	display: flex;
	flex-direction: column;
}

.twopx-indicadores__hero-side-label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
	margin-bottom: 4px;
}

/* ── Hero value row (prefix + number + suffix) ──────────────────────────────── */

.twopx-indicadores__hero-value {
	display: flex;
	align-items: baseline;
	line-height: 1;
}

.twopx-indicadores__hero-number {
	font-size: 8rem;
	font-weight: 900;
	line-height: 1;
}

.twopx-indicadores__hero-prefix,
.twopx-indicadores__hero-suffix {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
}

/* Default colors — overridden by Elementor style controls */
.twopx-indicadores__hero-number--before  { color: #f5f0e8; }
.twopx-indicadores__hero-prefix--before,
.twopx-indicadores__hero-suffix--before  { color: #7a6a58; }

.twopx-indicadores__hero-number--after   { color: #c0392b; }
.twopx-indicadores__hero-prefix--after,
.twopx-indicadores__hero-suffix--after   { color: #9b3a2a; }

/* ── Hero arrow ─────────────────────────────────────────────────────────────── */

.twopx-indicadores__hero-arrow {
	font-size: 2rem;
	color: #c0392b;
	flex-shrink: 0;
	line-height: 1;
	/* Nudge down so it aligns with the optical center of the large numbers */
	margin-top: 2.5rem;
}

/* ── Hero description ───────────────────────────────────────────────────────── */

.twopx-indicadores__hero-description {
	margin-top: 32px;
	font-size: 1rem;
	line-height: 1.65;
	color: #8a9bbf;
	max-width: 600px;
}

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

@media (max-width: 767px) {
	.twopx-indicadores__items--horizontal {
		flex-direction: column;
	}

	.twopx-indicadores__items--horizontal .twopx-indicadores__divider {
		width: 60px;
		height: 2px;
	}

	.twopx-indicadores__item {
		align-items: center;
	}

	.twopx-indicadores--align-left .twopx-indicadores__item {
		align-items: flex-start;
	}

	.twopx-indicadores--align-right .twopx-indicadores__item {
		align-items: flex-end;
	}

	/* Hero responsive */
	.twopx-indicadores__hero-number {
		font-size: 5rem;
	}

	.twopx-indicadores__hero-prefix,
	.twopx-indicadores__hero-suffix {
		font-size: 2.25rem;
	}

	.twopx-indicadores__hero-comparison {
		gap: 20px;
	}

	.twopx-indicadores__hero-arrow {
		font-size: 1.5rem;
		margin-top: 1.5rem;
	}
}