/* contratoimovel.com
   Contrato em docs/design-system.md. Valor solto no markup e bug. */

:root {
	--c-primary: #0b57d0;
	--c-primary-strong: #0842a0;
	--c-primary-soft: #e8f0fe;
	--c-primary-softer: #f4f8ff;
	--c-navy: #232733;
	--c-navy-soft: #343949;
	--c-accent: #1f5d57;
	--c-ink: #1b1f2a;
	--c-ink-soft: #4a5162;
	--c-ink-muted: #79808f;
	--c-surface: #ffffff;
	--c-canvas: #f6f7fb;
	--c-canvas-deep: #e9eaef;
	--c-line: #d8dce4;
	--c-line-soft: #eceef3;
	--c-danger: #b3261e;

	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
	--sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

	--fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px;
	--fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;

	--r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px;

	--sh-1: 0 1px 2px rgba(27, 31, 42, .06), 0 2px 8px rgba(27, 31, 42, .05);
	--sh-2: 0 12px 32px rgba(27, 31, 42, .16);

	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--topbar-h: 56px;
}

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

body {
	margin: 0;
	background: var(--c-canvas);
	color: var(--c-ink-soft);
	font: 400 var(--fs-base)/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--c-ink); margin: 0; line-height: 1.25; }
h1 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3 { font-size: var(--fs-base); font-weight: 600; }
p { margin: 0 0 var(--sp-4); }
a { color: var(--c-primary); }

.container { width: min(1180px, 100% - var(--sp-10)); margin-inline: auto; }
.hidden { display: none !important; }
.icon { display: block; flex: none; }

/* O sprite inline precisa de display:none explícito. SVG sem width/height cai
   no tamanho padrão de elemento substituído (300x150) e abre um buraco branco
   no topo da página; o atributo `hidden` sozinho não garantiu isso. */
.sprite { display: none; }

/* Grade compartilhada do wizard. A marca, a barra do modelo e o formulário
   usam .pane + .pane__inner, então as três nascem exatamente na mesma borda
   esquerda em qualquer largura. Mudar o número aqui move as três juntas. */
/* width:100% não é enfeite: dentro da .topbar, que é flex, o grid encolheria
   até o conteúdo e as colunas deixariam de bater com as do wizard. */
.split { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); width: 100%; }
.pane { padding-inline: var(--sp-8); }
.pane__inner { max-width: 420px; margin-inline: auto; }

/* ---------- barra do topo ---------- */

.topbar {
	height: var(--topbar-h);
	background: var(--c-navy);
	display: flex;
	align-items: center;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--c-surface);
	font-size: var(--fs-lg);
	text-decoration: none;
	letter-spacing: -.01em;
}
.brand__mark { width: 22px; height: 22px; display: block; }
.brand__word { display: inline-flex; gap: var(--sp-1); }
.brand__strong { font-weight: 700; }
.brand__light { font-weight: 400; color: #aeb4c2; }

/* ---------- hero ---------- */

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sp-16);
	align-items: center;
	padding: var(--sp-16) 0;
}
.hero__lead { margin: var(--sp-5) 0 var(--sp-6); color: var(--c-ink-soft); }
.hero__label {
	display: block;
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-3);
	color: var(--c-ink-muted);
	font-size: var(--fs-sm);
}

.choice {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	margin-bottom: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface);
	color: var(--c-ink);
	font: 400 var(--fs-base)/1.4 var(--font);
	text-align: left;
	cursor: pointer;
}
.choice:hover { border-color: var(--c-ink-muted); }
.choice--on {
	border-color: var(--c-primary);
	background: var(--c-primary-soft);
	font-weight: 600;
}
.choice__dot {
	flex: none;
	width: 18px; height: 18px;
	border: 2px solid var(--c-ink-muted);
	border-radius: 50%;
}
.choice--on .choice__dot {
	border-color: var(--c-primary);
	box-shadow: inset 0 0 0 4px var(--c-surface), inset 0 0 0 10px var(--c-primary);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-6);
	border: 0;
	border-radius: var(--r-md);
	background: var(--c-line-soft);
	color: var(--c-ink);
	font: 600 var(--fs-base)/1 var(--font);
	text-decoration: none;
	cursor: pointer;
}
.btn--primary { background: var(--c-primary); color: var(--c-surface); }
.btn--primary:hover { background: var(--c-primary-strong); }
.btn--primary:disabled { background: var(--c-line); color: var(--c-ink-muted); cursor: not-allowed; }
/* Texto centralizado com a seta ancorada na direita: com space-between o
   rótulo cola na borda esquerda e o botão perde o eixo. */
.btn--block { position: relative; width: 100%; }
.btn--block .btn__chevron { position: absolute; right: var(--sp-5); }
.btn--ghost { background: transparent; color: var(--c-ink-soft); }
.btn__chevron { flex: none; }

/* ---------- papel do documento na home ---------- */

.paper {
	position: relative;
	overflow: hidden; /* o canto arredondado recorta a dobra, senão ela vaza */
	border-radius: var(--r-xl);
	background: var(--c-navy);
	padding: var(--sp-3);
	box-shadow: var(--sh-2);
}
/* A dobra de canto do concorrente some aqui de propósito: o triângulo brigava
   com o raio de 22px e sobrava um arco sujo. Volta quando for com clip-path. */
.paper__page {
	border-radius: var(--r-md) var(--r-md) 0 0;
	background: var(--c-surface);
	padding: var(--sp-6);
	font-size: var(--fs-xs);
	color: var(--c-ink-soft);
	/* Corta com degradê: o papel precisa parecer que continua, senão vira um
	   bloco de texto curto em vez de um documento. */
	max-height: 320px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(#000 72%, transparent);
	mask-image: linear-gradient(#000 72%, transparent);
}
.paper__title {
	margin-bottom: var(--sp-4);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-align: center;
}
.paper__strip {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	color: var(--c-surface);
}
/* Word e PDF sobrepostos, do jeito que o mercado inteiro desenha "sai nos dois
   formatos". É o sinal que responde "o que eu levo?" antes de qualquer texto. */
.filetypes { display: flex; align-items: center; }
.filetypes .icon { width: 44px; height: 44px; }
.filetypes .icon + .icon { margin-left: -12px; }
.paper__name { display: block; font-weight: 600; font-size: var(--fs-lg); }
.paper__meta { display: block; margin-top: var(--sp-1); color: #aeb4c2; font-size: var(--fs-sm); }

/* O papel inteiro é o botão: no concorrente ele leva pro formulário, e é o
   segundo alvo de clique mais óbvio da página depois do CTA. */
a.paper { display: block; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.paper:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(27, 31, 42, .22); }

/* ---------- bloco escuro "como funciona" ---------- */

.steps {
	border-radius: var(--r-lg);
	background: var(--c-navy);
	padding: var(--sp-6);
	box-shadow: var(--sh-2);
}
.steps > h2 { color: var(--c-surface); margin-bottom: var(--sp-5); }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.steps__item {
	display: flex;
	gap: var(--sp-4);
	border-radius: var(--r-md);
	background: var(--c-navy-soft);
	padding: var(--sp-4);
}
.steps__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--r-sm);
	background: var(--c-accent);
	color: var(--c-surface);
}
.steps__item h3 { color: var(--c-surface); }
.steps__item p { margin: var(--sp-1) 0 0; color: #b6bcc9; font-size: var(--fs-sm); }

/* ---------- artigo ---------- */

.article { max-width: 720px; margin: var(--sp-16) auto; }
.article h2 { margin: var(--sp-10) 0 var(--sp-4); }
.article ul { padding-left: var(--sp-5); }
.article li { margin-bottom: var(--sp-2); }

/* ---------- wizard ---------- */

.wizard__bar { border-bottom: 1px solid var(--c-line-soft); background: var(--c-surface); }
.wizard__bar .pane__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding-block: var(--sp-3);
}
.wizard__name { color: var(--c-ink); font-size: var(--fs-sm); }
.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	border: 0;
	border-radius: 999px;
	background: var(--c-primary-soft);
	padding: var(--sp-1) var(--sp-3);
	color: var(--c-primary-strong);
	font: 600 var(--fs-xs)/1.8 var(--font);
	cursor: pointer;
}
.progress { height: 3px; background: var(--c-line-soft); }
.progress__fill {
	width: var(--progress, 0%);
	height: 100%;
	background: var(--c-primary);
	transition: width .25s ease;
}

.wizard {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	min-height: calc(100vh - var(--topbar-h) - 52px);
}
.wizard__form { background: var(--c-surface); padding-block: var(--sp-12); }
.wizard__question { margin-bottom: var(--sp-8); }

.field { margin-bottom: var(--sp-5); }
.field__label {
	display: block;
	margin-bottom: var(--sp-2);
	color: var(--c-ink);
	font-size: var(--fs-sm);
	font-weight: 600;
}
.field__input, .field__select {
	width: 100%;
	height: 44px;
	border: 1px solid var(--c-line);
	border-radius: var(--r-sm);
	background: var(--c-surface);
	padding: 0 var(--sp-3);
	color: var(--c-ink);
	font: 400 var(--fs-base)/1 var(--font);
}
/* Seta própria no select: a nativa muda de desenho em cada sistema e é a única
   peça da tela que não obedecia ao design. */
.field__select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: var(--sp-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2379808f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
}
.field__input::placeholder { color: var(--c-ink-muted); }
.field__input:focus, .field__select:focus {
	outline: 0;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.field__input--invalid { border-color: var(--c-danger); }
.field__hint { margin: var(--sp-2) 0 0; color: var(--c-ink-muted); font-size: var(--fs-xs); }
.field__error { margin: var(--sp-2) 0 0; color: var(--c-danger); font-size: var(--fs-xs); }
.field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

.wizard__actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-8); }

/* ---------- pre-visualizacao do documento ---------- */

.preview {
	background: var(--c-canvas-deep);
	padding: var(--sp-8);
	overflow-y: auto;
	max-height: calc(100vh - var(--topbar-h) - 52px);
}
.doc {
	max-width: 680px;
	margin-inline: auto;
	border-radius: var(--r-sm);
	background: var(--c-surface);
	padding: var(--sp-12) var(--sp-10);
	color: var(--c-ink-soft);
	font-size: var(--fs-sm);
	line-height: 1.7;
	box-shadow: var(--sh-1);
	/* A prévia mostra o contrato inteiro de propósito, então ela não pode ser
	   selecionável: sem isso o visitante copia o texto da tela e não paga.
	   O JS ainda bloqueia copiar e o menu do botão direito. */
	-webkit-user-select: none;
	user-select: none;
}
.doc__title {
	margin-bottom: var(--sp-8);
	color: var(--c-ink);
	font-size: var(--fs-base);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}
.doc h3 {
	margin: var(--sp-6) 0 var(--sp-2);
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
}
.doc p { margin: 0 0 var(--sp-3); }
.doc__blank { color: var(--c-ink-muted); letter-spacing: .04em; }
.doc__value { color: var(--c-ink); font-weight: 600; }
.doc__live {
	border-radius: var(--r-sm);
	background: var(--c-primary-softer);
	box-shadow: 0 0 0 4px var(--c-primary-softer);
	transition: background .4s ease, box-shadow .4s ease;
}

/* ---------- rodapé ---------- */

.site-footer {
	margin-top: var(--sp-16);
	background: var(--c-navy);
	padding: var(--sp-12) 0 var(--sp-8);
	color: #b6bcc9;
	font-size: var(--fs-sm);
}
.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--sp-8);
	padding-bottom: var(--sp-8);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-footer__note { max-width: 46ch; margin: var(--sp-4) 0 0; }
.site-footer__links { display: grid; gap: var(--sp-3); align-content: start; }
.site-footer__links a { color: var(--c-surface); text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__legal { margin: var(--sp-6) 0 0; color: #79808f; font-size: var(--fs-xs); }

/* ---------- checkout ---------- */

.checkout-head {
	background: var(--c-navy);
	padding: var(--sp-12) 0 var(--sp-16);
	text-align: center;
	color: #b6bcc9;
}
.checkout-head h1 { color: var(--c-surface); font-size: var(--fs-2xl); }
.checkout-head p { margin: var(--sp-3) 0 0; }
.checkout-head__seal {
	display: grid;
	place-items: center;
	width: 64px; height: 64px;
	margin: 0 auto var(--sp-6);
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-primary);
}
.checkout-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--sp-6);
	margin-top: calc(var(--sp-12) * -1);
}
.methods { align-self: start; border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-1); overflow: hidden; }
.method {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--c-line-soft);
	background: var(--c-surface);
	padding: var(--sp-5) var(--sp-6);
	color: var(--c-ink);
	font: 600 var(--fs-base)/1 var(--font);
	text-align: left;
	cursor: pointer;
}
.method:last-child { border-bottom: 0; }
.method:hover { background: var(--c-primary-softer); }
.method:disabled { color: var(--c-ink-muted); cursor: not-allowed; }
.method__icon {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--c-primary-soft);
	color: var(--c-primary);
}
.method__grow { flex: 1; }
.method__note { display: block; margin-top: var(--sp-1); color: var(--c-ink-muted); font-size: var(--fs-xs); font-weight: 400; }

.summary { border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-1); align-self: start; }
.summary__body { padding: var(--sp-6); border-bottom: 1px solid var(--c-line-soft); }
.summary__title { color: var(--c-ink); font-size: var(--fs-base); font-weight: 700; }
.summary__note { margin: var(--sp-3) 0 0; color: var(--c-ink-muted); font-size: var(--fs-sm); }
.summary__price { display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-5) var(--sp-6); }
.summary__price strong { color: var(--c-ink); font-size: var(--fs-xl); }
.trust { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
.trust__item { display: flex; align-items: center; gap: var(--sp-3); color: var(--c-ink-soft); font-size: var(--fs-sm); }
.trust__item .icon { color: var(--c-primary); }

/* ---------- responsivo ---------- */

@media (max-width: 900px) {
	.hero { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-10) 0; }
	.steps__grid { grid-template-columns: 1fr; }
	.wizard, .split, .checkout-grid, .site-footer__top { grid-template-columns: 1fr; }
	.pane { padding-inline: var(--sp-5); }
	.pane__inner { max-width: none; }
	.wizard__form { padding-block: var(--sp-8); }
	.preview { max-height: none; padding: var(--sp-5); }
	.doc { padding: var(--sp-8) var(--sp-5); }
	.checkout-grid { margin-top: calc(var(--sp-8) * -1); }
	h1 { font-size: var(--fs-2xl); }
}

/* Bloco de assinatura do documento. Espaçado de propósito: o arquivo é
   impresso e assinado à mão, e linha colada não dá espaço pra caneta. */
.doc__signatures { margin-top: var(--sp-12); }
.doc__sign { margin-bottom: var(--sp-10); line-height: 1.5; }