/* =========================================================
   Section: calculadora_teaser (interactive mini)
   ========================================================= */

.calculadora-teaser__card {
	position: relative;
	background:
		radial-gradient(70% 80% at 100% 0%, rgba(46, 90, 69, 0.12) 0%, transparent 60%),
		var(--color-bg-subtle);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	padding: clamp(var(--space-5), 4vw, var(--space-8));
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: center;
}
@media (max-width: 900px) {
	.calculadora-teaser__card { grid-template-columns: 1fr; }
}

.calculadora-teaser__copy { max-width: 32rem; }
.calculadora-teaser__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brand-primary);
	margin: 0 0 var(--space-3);
}
.calculadora-teaser__title {
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	font-weight: 500;
	color: var(--color-ink-primary);
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0 0 var(--space-3);
	max-width: 18ch;
}
.calculadora-teaser__body {
	font-size: var(--fs-body-l);
	color: var(--color-ink-secondary);
	margin: 0 0 var(--space-4);
	max-width: 46ch;
}
.calculadora-teaser__bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-5);
	display: grid;
	gap: 8px;
}
.calculadora-teaser__bullets li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-body-s);
	color: var(--color-ink-secondary);
	margin: 0;
}
.calculadora-teaser__bullets svg { color: var(--color-brand-primary); flex: 0 0 auto; }

/* ---------- Mini calc form ---------- */
.calc-mini {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: var(--space-5);
	display: grid;
	gap: var(--space-4);
	box-shadow: var(--shadow-sm);
}

.calc-mini__field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.calc-mini__field-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-3);
}
.calc-mini__label {
	font-size: var(--fs-body-s);
	font-weight: 600;
	color: var(--color-ink-primary);
	letter-spacing: 0.01em;
}
.calc-mini__output {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-brand-primary);
	letter-spacing: -0.005em;
}

/* Range slider */
.calc-mini__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--color-bg-subtle);
	outline: none;
	cursor: pointer;
}
.calc-mini__range:focus-visible { box-shadow: var(--shadow-focus); }
.calc-mini__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--color-brand-primary);
	border: 3px solid var(--color-bg-surface);
	box-shadow: var(--shadow-md);
	cursor: grab;
	transition: transform var(--duration-fast) var(--easing-default);
}
.calc-mini__range::-webkit-slider-thumb:active { transform: scale(1.1); cursor: grabbing; }
.calc-mini__range::-moz-range-thumb {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--color-brand-primary);
	border: 3px solid var(--color-bg-surface);
	box-shadow: var(--shadow-md);
	cursor: grab;
}
.calc-mini__helper {
	display: flex;
	justify-content: space-between;
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--color-ink-muted);
}

/* Segmented control */
.calc-mini__segments {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	background: var(--color-bg-subtle);
	padding: 4px;
	border-radius: var(--radius-sm);
}
.calc-mini__segment {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: calc(var(--radius-sm) - 2px);
	font-size: var(--fs-body-s);
	font-weight: 500;
	color: var(--color-ink-secondary);
	cursor: pointer;
	transition: background var(--duration-fast) var(--easing-default),
	            color var(--duration-fast) var(--easing-default);
}
.calc-mini__segment input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0; pointer-events: none;
}
.calc-mini__segment:hover { color: var(--color-ink-primary); }
.calc-mini__segment:has(input:checked),
.calc-mini__segment input:checked + span {
	background: var(--color-bg-surface);
	color: var(--color-ink-primary);
	font-weight: 600;
	box-shadow: var(--shadow-sm);
}
.calc-mini__segment span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--radius-sm) - 2px);
	transition: background var(--duration-fast) var(--easing-default);
}
.calc-mini__segment input:focus-visible + span {
	box-shadow: var(--shadow-focus);
}

/* Result panel */
.calc-mini__result {
	background: var(--color-bg-inverse);
	color: var(--color-ink-inverse);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	display: grid;
	gap: 6px;
}
.calc-mini__result-head .u-fs-label {
	color: rgba(250, 244, 232, 0.55);
}
.calc-mini__result-figure {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.calc-mini__result-value {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 500;
	color: var(--color-bg-base);
	letter-spacing: -0.02em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: color var(--duration-fast) var(--easing-default);
}
.calc-mini__result-unit {
	font-size: var(--fs-body);
	color: rgba(250, 244, 232, 0.72);
}
.calc-mini__result-sub {
	margin: 0;
	font-size: var(--fs-body-s);
	color: rgba(250, 244, 232, 0.78);
}
.calc-mini__result-sub strong {
	color: var(--color-accent-soft);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Result tween highlight */
.calc-mini__result.is-updated .calc-mini__result-value {
	color: var(--color-accent-soft);
}
