/**
 * AI Business Simulator Builder — Design System (frontend).
 *
 * Estética SaaS premium (Stripe / Linear / Typeform / Vercel).
 * Totalmente isolado sob .absb-app — não interfere com o tema.
 * O contentor exterior é transparente: adapta-se a sites de fundo escuro.
 */

/* =====================================================================
 * 1. Tokens
 * ================================================================== */

.absb-app {
	/* Marca (injetada inline pelo PHP a partir das definições). */
	--absb-brand: #006aff;
	--absb-brand-600: #005de0;
	--absb-brand-700: #004cb8;
	--absb-brand-soft: rgba( 0, 106, 255, 0.08 );
	--absb-brand-ring: rgba( 0, 106, 255, 0.18 );

	/* Neutros. */
	--absb-ink: #0b1220;
	--absb-ink-2: #2c3444;
	--absb-muted: #667085;
	--absb-subtle: #98a2b3;
	--absb-line: #e7eaf0;
	--absb-line-2: #f1f3f7;
	--absb-surface: #ffffff;
	--absb-surface-2: #fafbfd;

	/* Forma. */
	--absb-radius: 24px;
	--absb-radius-md: 18px;
	--absb-radius-sm: 12px;

	/* Profundidade. */
	--absb-shadow-card: 0 1px 2px rgba( 11, 18, 32, 0.04 ), 0 12px 32px -12px rgba( 11, 18, 32, 0.18 ), 0 48px 96px -48px rgba( 11, 18, 32, 0.35 );
	--absb-shadow-soft: 0 1px 2px rgba( 11, 18, 32, 0.05 ), 0 6px 16px -8px rgba( 11, 18, 32, 0.12 );
	--absb-shadow-lift: 0 10px 24px -10px rgba( 11, 18, 32, 0.22 );

	/* Movimento. */
	--absb-ease: cubic-bezier( 0.32, 0.72, 0, 1 );
	--absb-fast: 180ms;
	--absb-base: 340ms;

	/* Tipografia. */
	--absb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	position: relative;
	display: block;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0;
	background: transparent;
	color: var( --absb-ink );
	font-family: var( --absb-font );
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: -0.011em;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-variant-numeric: tabular-nums;
}

.absb-app *,
.absb-app *::before,
.absb-app *::after {
	box-sizing: border-box;
}

.absb-app p {
	margin: 0;
}

.absb-app button {
	font-family: inherit;
}

/* =====================================================================
 * 2. Shell — o cartão branco premium
 * ================================================================== */

.absb-shell {
	position: relative;
	background: var( --absb-surface );
	border: 1px solid rgba( 255, 255, 255, 0.06 );
	border-radius: var( --absb-radius );
	box-shadow: var( --absb-shadow-card );
	overflow: hidden;
	isolation: isolate;
}

/* Halo subtil da marca no topo do cartão. */
.absb-shell::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 680px;
	height: 320px;
	background: radial-gradient( ellipse at center, var( --absb-brand-soft ), transparent 68% );
	transform: translate( -50%, -55% );
	pointer-events: none;
	z-index: 0;
}

.absb-shell > * {
	position: relative;
	z-index: 1;
}

/* =====================================================================
 * 3. Topbar (logótipo + progresso)
 * ================================================================== */

.absb-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 22px 40px;
	border-bottom: 1px solid var( --absb-line-2 );
}

.absb-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.absb-brand__logo {
	display: block;
	max-height: 34px;
	max-width: 190px;
	width: auto;
	height: auto;
}

.absb-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: var( --absb-brand );
	border-radius: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.absb-brand__name {
	font-size: 14.5px;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var( --absb-ink );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Progresso ---------------------------------------------------------- */

.absb-progress {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	max-width: 460px;
}

.absb-progress[hidden] {
	display: none;
}

.absb-progress__track {
	position: relative;
	flex: 1;
	height: 8px;
	background: var( --absb-line-2 );
	border-radius: 999px;
	overflow: hidden;
}

.absb-progress__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: linear-gradient( 90deg, var( --absb-brand ), var( --absb-brand-700 ) );
	border-radius: 999px;
	transition: width var( --absb-base ) var( --absb-ease );
}

/* Brilho que percorre a barra. */
.absb-progress__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.45 ), transparent );
	transform: translateX( -100% );
	animation: absb-sheen 2.4s var( --absb-ease ) infinite;
}

@keyframes absb-sheen {
	to {
		transform: translateX( 100% );
	}
}

.absb-progress__meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}

.absb-progress__step {
	font-size: 13px;
	font-weight: 600;
	color: var( --absb-muted );
}

.absb-progress__percent {
	min-width: 42px;
	font-size: 13px;
	font-weight: 700;
	color: var( --absb-brand );
	text-align: right;
}

/* =====================================================================
 * 4. Painéis
 * ================================================================== */

.absb-stage {
	position: relative;
	padding: 56px 40px 44px;
}

.absb-panel {
	opacity: 0;
	transform: translateY( 16px ) scale( 0.995 );
	transition: opacity var( --absb-base ) var( --absb-ease ), transform var( --absb-base ) var( --absb-ease );
}

.absb-panel.is-active {
	opacity: 1;
	transform: none;
}

.absb-panel.is-leaving {
	opacity: 0;
	transform: translateY( -12px );
}

.absb-panel[hidden] {
	display: none;
}

/* Entrada escalonada dos filhos. */
.absb-panel.is-active > * {
	animation: absb-rise var( --absb-base ) var( --absb-ease ) backwards;
}

.absb-panel.is-active > *:nth-child( 1 ) { animation-delay: 40ms; }
.absb-panel.is-active > *:nth-child( 2 ) { animation-delay: 90ms; }
.absb-panel.is-active > *:nth-child( 3 ) { animation-delay: 140ms; }
.absb-panel.is-active > *:nth-child( 4 ) { animation-delay: 190ms; }

@keyframes absb-rise {
	from {
		opacity: 0;
		transform: translateY( 14px );
	}
}

/* =====================================================================
 * 5. Tipografia
 * ================================================================== */

.absb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 7px 14px 7px 10px;
	background: var( --absb-brand-soft );
	border: 1px solid var( --absb-brand-ring );
	border-radius: 999px;
	color: var( --absb-brand-700 );
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: 0.01em;
}

.absb-eyebrow__dot {
	width: 7px;
	height: 7px;
	background: var( --absb-brand );
	border-radius: 50%;
	box-shadow: 0 0 0 4px var( --absb-brand-soft );
	animation: absb-pulse 2.2s var( --absb-ease ) infinite;
}

@keyframes absb-pulse {
	50% {
		opacity: 0.45;
		transform: scale( 0.82 );
	}
}

.absb-h1 {
	margin: 0 0 14px;
	font-size: clamp( 30px, 3.4vw, 46px );
	font-weight: 760;
	line-height: 1.08;
	letter-spacing: -0.032em;
	color: var( --absb-ink );
}

.absb-h2 {
	margin: 0 0 10px;
	font-size: clamp( 24px, 2.4vw, 34px );
	font-weight: 720;
	line-height: 1.16;
	letter-spacing: -0.028em;
	color: var( --absb-ink );
}

.absb-h3 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 680;
	letter-spacing: -0.018em;
	color: var( --absb-ink );
}

.absb-lead {
	max-width: 62ch;
	color: var( --absb-muted );
	font-size: 17px;
	line-height: 1.62;
}

.absb-lead p + p {
	margin-top: 10px;
}

.absb-section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var( --absb-subtle );
}

.absb-section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var( --absb-line );
}

/* =====================================================================
 * 6. Ecrã inicial
 * ================================================================== */

.absb-intro {
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 0.85fr );
	gap: 56px;
	align-items: center;
}

.absb-intro__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --absb-radius-md );
	box-shadow: var( --absb-shadow-lift );
}

.absb-intro__points {
	display: grid;
	gap: 12px;
	margin: 30px 0 34px;
	padding: 0;
	list-style: none;
}

.absb-intro__points li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var( --absb-ink-2 );
	font-size: 15.5px;
	font-weight: 520;
}

.absb-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: var( --absb-brand-soft );
	border-radius: 50%;
	color: var( --absb-brand );
	font-size: 13px;
	font-weight: 800;
}

.absb-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 26px;
	color: var( --absb-subtle );
	font-size: 13px;
}

.absb-trust span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

/* =====================================================================
 * 7. Perguntas e opções (escolha múltipla)
 * ================================================================== */

.absb-question {
	max-width: 1100px;
}

.absb-question + .absb-question {
	margin-top: 48px;
	padding-top: 44px;
	border-top: 1px solid var( --absb-line-2 );
}

.absb-question__counter {
	display: block;
	margin-bottom: 10px;
	color: var( --absb-brand );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.absb-question__help {
	margin: 0 0 28px;
	max-width: 62ch;
	color: var( --absb-muted );
	font-size: 15.5px;
}

/* Grelha de opções — cartões grandes, estilo Typeform. */
.absb-options {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 14px;
	margin-top: 26px;
}

.absb-options--single {
	grid-template-columns: minmax( 0, 1fr );
	max-width: 720px;
}

.absb-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	background: var( --absb-surface );
	border: 1.5px solid var( --absb-line );
	border-radius: var( --absb-radius-md );
	cursor: pointer;
	transition: border-color var( --absb-fast ) var( --absb-ease ),
		background var( --absb-fast ) var( --absb-ease ),
		transform var( --absb-fast ) var( --absb-ease ),
		box-shadow var( --absb-fast ) var( --absb-ease );
	user-select: none;
}

.absb-option:hover {
	border-color: var( --absb-brand );
	transform: translateY( -2px );
	box-shadow: var( --absb-shadow-lift );
}

.absb-option:active {
	transform: translateY( 0 );
}

.absb-option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.absb-option__key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	background: var( --absb-surface-2 );
	border: 1px solid var( --absb-line );
	border-radius: 9px;
	color: var( --absb-muted );
	font-size: 13px;
	font-weight: 700;
	transition: all var( --absb-fast ) var( --absb-ease );
}

.absb-option__label {
	flex: 1;
	min-width: 0;
	font-size: 16.5px;
	font-weight: 560;
	color: var( --absb-ink );
	letter-spacing: -0.015em;
}

.absb-option__tick {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border: 2px solid var( --absb-line );
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	opacity: 0;
	transform: scale( 0.6 );
	transition: all var( --absb-fast ) var( --absb-ease );
}

.absb-option--multi .absb-option__tick {
	border-radius: 8px;
}

.absb-option.is-selected {
	background: var( --absb-brand-soft );
	border-color: var( --absb-brand );
	box-shadow: 0 0 0 4px var( --absb-brand-ring );
}

.absb-option.is-selected .absb-option__key {
	background: var( --absb-brand );
	border-color: var( --absb-brand );
	color: #fff;
}

.absb-option.is-selected .absb-option__tick {
	background: var( --absb-brand );
	border-color: var( --absb-brand );
	opacity: 1;
	transform: scale( 1 );
}

.absb-option:focus-visible {
	outline: none;
	border-color: var( --absb-brand );
	box-shadow: 0 0 0 4px var( --absb-brand-ring );
}

/* =====================================================================
 * 8. Botões
 * ================================================================== */

.absb-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var( --absb-line-2 );
}

.absb-actions--start {
	justify-content: flex-start;
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.absb-actions__hint {
	color: var( --absb-subtle );
	font-size: 13px;
}

.absb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	background: none;
	border: 1px solid transparent;
	border-radius: 14px;
	color: inherit;
	font-size: 15.5px;
	font-weight: 620;
	line-height: 1;
	letter-spacing: -0.012em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: all var( --absb-fast ) var( --absb-ease );
}

.absb-btn--primary {
	background: var( --absb-brand );
	color: #fff;
	box-shadow: 0 1px 2px rgba( 11, 18, 32, 0.1 ), 0 8px 20px -8px var( --absb-brand );
}

.absb-btn--primary:hover {
	background: var( --absb-brand-600 );
	color: #fff;
	transform: translateY( -2px );
	box-shadow: 0 2px 4px rgba( 11, 18, 32, 0.1 ), 0 14px 28px -10px var( --absb-brand );
}

.absb-btn--primary:active {
	transform: translateY( 0 );
}

.absb-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.absb-btn--ghost {
	color: var( --absb-muted );
	border-color: var( --absb-line );
	background: var( --absb-surface );
}

.absb-btn--ghost:hover {
	color: var( --absb-ink );
	border-color: var( --absb-subtle );
	background: var( --absb-surface-2 );
}

.absb-btn--lg {
	padding: 18px 34px;
	font-size: 16.5px;
	border-radius: 16px;
}

.absb-btn__arrow {
	transition: transform var( --absb-fast ) var( --absb-ease );
}

.absb-btn:hover .absb-btn__arrow {
	transform: translateX( 3px );
}

.absb-btn.is-busy {
	pointer-events: none;
}

.absb-btn.is-busy .absb-btn__label {
	opacity: 0.75;
}

.absb-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: absb-spin 0.7s linear infinite;
}

@keyframes absb-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* =====================================================================
 * 9. Passo final — formulário
 * ================================================================== */

.absb-lead-layout {
	display: grid;
	grid-template-columns: minmax( 0, 0.92fr ) minmax( 0, 1.08fr );
	gap: 52px;
	align-items: start;
}

.absb-preview-card {
	padding: 32px;
	background: linear-gradient( 160deg, var( --absb-ink ) 0%, #131c30 100% );
	border-radius: var( --absb-radius-md );
	color: #fff;
	box-shadow: var( --absb-shadow-lift );
}

.absb-preview-card__label {
	display: block;
	margin-bottom: 10px;
	color: rgba( 255, 255, 255, 0.62 );
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.absb-preview-card__value {
	display: block;
	font-size: clamp( 38px, 4.2vw, 54px );
	font-weight: 780;
	line-height: 1.02;
	letter-spacing: -0.038em;
	color: #fff;
}

.absb-preview-card__sub {
	display: block;
	margin-top: 8px;
	color: rgba( 255, 255, 255, 0.66 );
	font-size: 14.5px;
}

.absb-preview-card__rows {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
}

.absb-preview-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	font-size: 14.5px;
}

.absb-preview-row span {
	color: rgba( 255, 255, 255, 0.6 );
}

.absb-preview-row strong {
	color: #fff;
	font-weight: 650;
}

.absb-preview-row.is-locked strong {
	color: transparent;
	text-shadow: 0 0 10px rgba( 255, 255, 255, 0.7 );
	user-select: none;
}

.absb-preview-card__note {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 20px;
	color: rgba( 255, 255, 255, 0.55 );
	font-size: 12.5px;
}

/* Formulário --------------------------------------------------------- */

.absb-form__pdf {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 22px 0 28px;
	padding: 18px 20px;
	background: var( --absb-brand-soft );
	border: 1px solid var( --absb-brand-ring );
	border-radius: var( --absb-radius-sm );
}

.absb-form__pdf-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	background: var( --absb-brand );
	border-radius: 10px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.absb-form__pdf strong {
	display: block;
	font-size: 15px;
	font-weight: 640;
	color: var( --absb-ink );
}

.absb-form__pdf p {
	margin-top: 2px;
	color: var( --absb-muted );
	font-size: 13.5px;
}

.absb-fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 18px;
}

.absb-field--full {
	grid-column: 1 / -1;
}

.absb-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --absb-ink-2 );
}

.absb-input {
	width: 100%;
	padding: 15px 16px;
	background: var( --absb-surface );
	border: 1.5px solid var( --absb-line );
	border-radius: var( --absb-radius-sm );
	color: var( --absb-ink );
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color var( --absb-fast ) var( --absb-ease ), box-shadow var( --absb-fast ) var( --absb-ease );
	-webkit-appearance: none;
	appearance: none;
}

.absb-input::placeholder {
	color: var( --absb-subtle );
}

.absb-input:focus {
	outline: none;
	border-color: var( --absb-brand );
	box-shadow: 0 0 0 4px var( --absb-brand-ring );
}

.absb-field.has-error .absb-input {
	border-color: #d92d20;
	box-shadow: 0 0 0 4px rgba( 217, 45, 32, 0.12 );
}

.absb-error {
	margin-top: 7px;
	color: #d92d20;
	font-size: 13px;
	font-weight: 550;
}

.absb-error[hidden] {
	display: none;
}

.absb-error--global {
	margin-top: 18px;
	padding: 14px 16px;
	background: #fef3f2;
	border: 1px solid #fecdca;
	border-radius: var( --absb-radius-sm );
}

.absb-consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 20px;
	color: var( --absb-muted );
	font-size: 13.5px;
	line-height: 1.5;
	cursor: pointer;
}

.absb-consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var( --absb-brand );
}

.absb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.absb-privacy {
	margin-top: 18px;
	color: var( --absb-subtle );
	font-size: 12.5px;
}

/* =====================================================================
 * 10. Resultado — KPI cards, gráficos, recomendações
 * ================================================================== */

.absb-result__head {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	gap: 32px;
	align-items: center;
	margin-bottom: 40px;
}

.absb-hero-value {
	display: block;
	font-size: clamp( 44px, 5.6vw, 76px );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.045em;
	background: linear-gradient( 135deg, var( --absb-ink ) 20%, var( --absb-brand ) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var( --absb-brand );
}

.absb-hero-sub {
	display: block;
	margin-top: 10px;
	color: var( --absb-muted );
	font-size: 16.5px;
}

/* KPI grid ----------------------------------------------------------- */

.absb-kpis {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 232px, 1fr ) );
	gap: 16px;
	margin-bottom: 44px;
}

.absb-kpi {
	position: relative;
	padding: 24px;
	background: var( --absb-surface );
	border: 1px solid var( --absb-line );
	border-radius: var( --absb-radius-md );
	box-shadow: var( --absb-shadow-soft );
	overflow: hidden;
	transition: transform var( --absb-fast ) var( --absb-ease ), box-shadow var( --absb-fast ) var( --absb-ease );
}

.absb-kpi:hover {
	transform: translateY( -3px );
	box-shadow: var( --absb-shadow-lift );
}

.absb-kpi::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var( --absb-line );
}

.absb-kpi--primary {
	background: linear-gradient( 160deg, var( --absb-ink ) 0%, #16203a 100% );
	border-color: transparent;
}

.absb-kpi--primary::after {
	background: var( --absb-brand );
}

.absb-kpi--accent::after {
	background: var( --absb-brand );
}

.absb-kpi__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 16px;
	background: var( --absb-brand-soft );
	border-radius: 11px;
	font-size: 17px;
	line-height: 1;
}

.absb-kpi--primary .absb-kpi__icon {
	background: rgba( 255, 255, 255, 0.1 );
}

.absb-kpi__label {
	display: block;
	margin-bottom: 8px;
	color: var( --absb-muted );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.absb-kpi--primary .absb-kpi__label {
	color: rgba( 255, 255, 255, 0.62 );
}

.absb-kpi__value {
	display: block;
	font-size: 30px;
	font-weight: 740;
	line-height: 1.08;
	letter-spacing: -0.032em;
	color: var( --absb-ink );
}

.absb-kpi--primary .absb-kpi__value {
	color: #fff;
}

.absb-kpi__hint {
	display: block;
	margin-top: 8px;
	color: var( --absb-subtle );
	font-size: 12.5px;
	line-height: 1.45;
}

.absb-kpi--primary .absb-kpi__hint {
	color: rgba( 255, 255, 255, 0.5 );
}

/* Gráficos ----------------------------------------------------------- */

.absb-charts {
	display: grid;
	grid-template-columns: minmax( 0, 0.84fr ) minmax( 0, 1.16fr );
	gap: 16px;
	margin-bottom: 44px;
}

.absb-chart-card {
	padding: 26px;
	background: var( --absb-surface );
	border: 1px solid var( --absb-line );
	border-radius: var( --absb-radius-md );
	box-shadow: var( --absb-shadow-soft );
}

.absb-chart-card__title {
	margin: 0 0 4px;
	font-size: 15.5px;
	font-weight: 660;
	letter-spacing: -0.015em;
	color: var( --absb-ink );
}

.absb-chart-card__sub {
	margin: 0 0 20px;
	color: var( --absb-muted );
	font-size: 13.5px;
}

.absb-chart {
	position: relative;
	width: 100%;
}

.absb-chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.absb-donut {
	display: flex;
	justify-content: center;
	padding: 4px 0 2px;
}

.absb-donut svg {
	max-width: 250px;
}

.absb-donut__center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	text-align: center;
	pointer-events: none;
}

.absb-donut__value {
	display: block;
	font-size: 27px;
	font-weight: 760;
	letter-spacing: -0.03em;
	color: var( --absb-ink );
	line-height: 1.05;
}

.absb-donut__label {
	display: block;
	margin-top: 3px;
	color: var( --absb-muted );
	font-size: 12px;
	font-weight: 600;
}

/* Barras */

.absb-bars {
	display: grid;
	gap: 20px;
	margin-top: 6px;
}

.absb-bar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 9px;
}

.absb-bar__label {
	color: var( --absb-muted );
	font-size: 13.5px;
}

.absb-bar__value {
	font-size: 15px;
	font-weight: 680;
	letter-spacing: -0.018em;
	color: var( --absb-ink );
}

.absb-bar.is-primary .absb-bar__value {
	color: var( --absb-brand );
}

.absb-bar__track {
	height: 12px;
	background: var( --absb-line-2 );
	border-radius: 999px;
	overflow: hidden;
}

.absb-bar__fill {
	width: 0;
	height: 100%;
	border-radius: 999px;
	transition: width 900ms var( --absb-ease );
}

/* Eixo do gráfico de área */

.absb-axis {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	color: var( --absb-subtle );
	font-size: 12px;
	font-weight: 550;
}

.absb-legend {
	display: grid;
	gap: 9px;
	margin-top: 22px;
}

.absb-legend__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
}

.absb-legend__swatch {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.absb-legend__name {
	flex: 1;
	min-width: 0;
	color: var( --absb-muted );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.absb-legend__value {
	font-weight: 650;
	color: var( --absb-ink );
}

/* Recomendações ------------------------------------------------------ */

.absb-block {
	margin-bottom: 40px;
}

.absb-block__lead {
	max-width: 74ch;
	margin-bottom: 22px;
	color: var( --absb-muted );
	font-size: 16px;
}

.absb-block__headline {
	max-width: 74ch;
	margin-bottom: 12px;
	color: var( --absb-brand-700 );
	font-size: 17px;
	font-weight: 640;
	letter-spacing: -0.015em;
}

.absb-solutions {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
	gap: 14px;
}

.absb-solution {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px;
	background: var( --absb-surface-2 );
	border: 1px solid var( --absb-line );
	border-radius: var( --absb-radius-md );
	transition: border-color var( --absb-fast ) var( --absb-ease ), background var( --absb-fast ) var( --absb-ease ), transform var( --absb-fast ) var( --absb-ease );
}

.absb-solution:hover {
	background: var( --absb-surface );
	border-color: var( --absb-brand );
	transform: translateY( -2px );
}

.absb-solution__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: var( --absb-surface );
	border: 1px solid var( --absb-line );
	border-radius: 11px;
	font-size: 17px;
}

.absb-solution strong {
	display: block;
	margin-bottom: 4px;
	font-size: 15.5px;
	font-weight: 640;
	letter-spacing: -0.015em;
	color: var( --absb-ink );
}

.absb-solution p {
	color: var( --absb-muted );
	font-size: 14px;
	line-height: 1.55;
}

/* Respostas ---------------------------------------------------------- */

.absb-answers {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
	gap: 0 40px;
	margin-bottom: 40px;
	padding: 26px 28px;
	background: var( --absb-surface-2 );
	border: 1px solid var( --absb-line );
	border-radius: var( --absb-radius-md );
}

.absb-answers__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 11px 0;
	border-bottom: 1px solid var( --absb-line );
	font-size: 14.5px;
}

.absb-answers__row dt {
	color: var( --absb-muted );
}

.absb-answers__row dd {
	margin: 0;
	font-weight: 640;
	color: var( --absb-ink );
	text-align: right;
}

/* CTA ---------------------------------------------------------------- */

.absb-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	padding: 34px 38px;
	background: linear-gradient( 135deg, var( --absb-brand ) 0%, var( --absb-brand-700 ) 100% );
	border-radius: var( --absb-radius-md );
	color: #fff;
	box-shadow: 0 14px 32px -14px var( --absb-brand );
}

.absb-cta__title {
	margin: 0 0 5px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.024em;
	color: #fff;
}

.absb-cta__text {
	max-width: 56ch;
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 15px;
}

.absb-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.absb-btn--onbrand {
	background: #fff;
	color: var( --absb-brand-700 );
	box-shadow: 0 6px 18px -8px rgba( 11, 18, 32, 0.5 );
}

.absb-btn--onbrand:hover {
	background: #fff;
	color: var( --absb-brand-700 );
	transform: translateY( -2px );
}

.absb-btn--outline-light {
	border-color: rgba( 255, 255, 255, 0.45 );
	color: #fff;
}

.absb-btn--outline-light:hover {
	background: rgba( 255, 255, 255, 0.12 );
	border-color: #fff;
	color: #fff;
}

.absb-thankyou {
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var( --absb-line-2 );
	color: var( --absb-muted );
	font-size: 15px;
}

/* =====================================================================
 * 11. Loading
 * ================================================================== */

.absb-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: rgba( 255, 255, 255, 0.94 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	border-radius: var( --absb-radius );
	z-index: 20;
}

.absb-loading[hidden] {
	display: none;
}

.absb-loading__orbit {
	position: relative;
	width: 46px;
	height: 46px;
}

.absb-loading__orbit::before,
.absb-loading__orbit::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid transparent;
	border-top-color: var( --absb-brand );
	border-radius: 50%;
	animation: absb-spin 0.9s var( --absb-ease ) infinite;
}

.absb-loading__orbit::after {
	inset: 8px;
	border-top-color: var( --absb-brand-ring );
	animation-duration: 1.3s;
	animation-direction: reverse;
}

.absb-loading__text {
	color: var( --absb-ink-2 );
	font-size: 15px;
	font-weight: 600;
}

.absb-loading__steps {
	display: grid;
	gap: 7px;
	color: var( --absb-subtle );
	font-size: 13px;
	text-align: center;
}

.absb-loading__steps span {
	opacity: 0.35;
	transition: opacity var( --absb-base ) var( --absb-ease );
}

.absb-loading__steps span.is-done {
	opacity: 1;
	color: var( --absb-brand );
	font-weight: 600;
}

/* =====================================================================
 * 12. Lista de simuladores
 * ================================================================== */

.absb-list {
	display: grid;
	gap: 20px;
	max-width: 1320px;
	margin: 0 auto;
	font-family: var( --absb-font, sans-serif );
}

.absb-list--cols-2 { grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); }
.absb-list--cols-3 { grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) ); }
.absb-list--cols-4 { grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) ); }

.absb-list__item {
	--absb-brand: #006aff;
	--absb-brand-600: #005de0;
	--absb-ease: cubic-bezier( 0.32, 0.72, 0, 1 );
	--absb-fast: 180ms;
	display: flex;
	flex-direction: column;
	padding: 26px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba( 11, 18, 32, 0.05 ), 0 16px 36px -20px rgba( 11, 18, 32, 0.3 );
}

.absb-list__media img {
	width: 100%;
	height: auto;
	margin-bottom: 16px;
	border-radius: 14px;
}

.absb-list__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 680;
	letter-spacing: -0.02em;
	color: #0b1220;
}

.absb-list__text {
	flex: 1;
	margin-bottom: 20px;
	color: #667085;
	font-size: 14.5px;
}

/* =====================================================================
 * 13. Aviso de administração
 * ================================================================== */

.absb-admin-notice {
	max-width: 1320px;
	margin: 0 auto;
	padding: 18px 22px;
	background: #fffaeb;
	border: 1px solid #fedf89;
	border-radius: 14px;
	color: #93370d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14.5px;
}

/* =====================================================================
 * 14. Responsivo
 * ================================================================== */

@media ( max-width: 1080px ) {
	.absb-intro,
	.absb-lead-layout {
		grid-template-columns: minmax( 0, 1fr );
		gap: 36px;
	}

	.absb-intro__media {
		order: -1;
	}

	.absb-charts {
		grid-template-columns: minmax( 0, 1fr );
	}

	.absb-result__head {
		grid-template-columns: minmax( 0, 1fr );
		gap: 20px;
	}
}

@media ( max-width: 782px ) {
	.absb-app {
		font-size: 15.5px;
	}

	.absb-shell {
		border-radius: 20px;
	}

	.absb-topbar {
		flex-wrap: wrap;
		gap: 14px;
		padding: 16px 20px;
	}

	.absb-progress {
		max-width: none;
		width: 100%;
	}

	.absb-stage {
		padding: 32px 20px 28px;
	}

	.absb-options {
		grid-template-columns: minmax( 0, 1fr );
	}

	.absb-option {
		padding: 17px 18px;
	}

	.absb-option__key {
		display: none;
	}

	.absb-fields {
		grid-template-columns: minmax( 0, 1fr );
	}

	.absb-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.absb-actions .absb-btn {
		width: 100%;
	}

	.absb-actions__hint {
		text-align: center;
	}

	.absb-cta {
		flex-direction: column;
		align-items: flex-start;
		padding: 26px 22px;
	}

	.absb-cta__actions {
		width: 100%;
	}

	.absb-cta .absb-btn {
		flex: 1;
	}

	.absb-answers {
		gap: 0;
		padding: 20px;
	}

	.absb-preview-card {
		padding: 24px;
	}
}

/* =====================================================================
 * 15. Acessibilidade / preferências
 * ================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.absb-app *,
	.absb-app *::before,
	.absb-app *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.absb-panel {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.absb-topbar,
	.absb-actions,
	.absb-cta__actions,
	.absb-loading {
		display: none !important;
	}

	.absb-shell {
		box-shadow: none;
		border: 1px solid #e7eaf0;
	}
}