/* Identidade Arremate Legal.
Tokens copiados da LP do curso (lp-penhora-imovel-perfeita.html, escopo .alp),
para que o formulario e a pagina que leva ate ele leiam como a mesma marca.
Anton carrega os titulos, Archivo o resto - as duas do Google Fonts, porque
este projeto e servido pela Cloudflare e nao tem a restricao de peso que
justificaria embutir arquivo de fonte.
Espacamento so em uma direcao (margin-top), via owl selector: assim nenhuma
margem colapsa contra outra e o ritmo vertical e sempre previsivel. */
/* As fontes sao carregadas por no de cada pagina, e nao por @import
aqui: @import so dispara depois de este arquivo baixar, encadeando
HTML -> form.css -> googleapis -> gstatic. No , com preconnect, os dois
ultimos passos comecam junto com este arquivo. */
:root {
--marrom-950: #191b1d;
--marrom-900: #202325;
--marrom-850: #26292c;
--marrom-800: #2e3236;
--marrom-700: #40454a;
--laranja: #ff7a1a;
--laranja-claro: #ff914d;
--laranja-fundo: #e85d04;
--creme: #f6ecdf;
--creme-60: rgba(246, 236, 223, 0.62);
/* Era 0.28, que dava 2.34:1 sobre o marrom 950 - reprovado na WCAG AA, e este
e o tom do aviso de LGPD, do contador e dos rotulos de ajuda. Em 0.52 passa
de 4.5:1 sobre os dois fundos que existem aqui. Serve tambem de placeholder:
o valor digitado e creme puro, entao a diferenca continua obvia. */
--creme-52: rgba(246, 236, 223, 0.52);
--linha: rgba(246, 236, 223, 0.14);
--linha-forte: rgba(246, 236, 223, 0.3);
--verde: #10b981;
--vermelho: #ff6b52;
/* Tons derivados do laranja e do vermelho. Antes eram 14 rgba() crus espalhados
pelo arquivo, com oito alfas diferentes que ninguem distinguia a olho: mudar
--laranja nao mudava nenhum deles. Tres degraus bastam. */
--laranja-fill-suave: rgba(255, 122, 26, 0.1);
--laranja-fill: rgba(255, 122, 26, 0.14);
--laranja-borda: rgba(255, 122, 26, 0.45);
--vermelho-fill: rgba(255, 107, 82, 0.12);
--vermelho-borda: rgba(255, 107, 82, 0.45);
--titulo: 'Anton', 'Archivo Black', sans-serif;
--corpo: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--raio: 14px;
--folha: 760px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html {
background: var(--marrom-950);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--marrom-950);
color: var(--creme);
font-family: var(--corpo);
font-size: 16px;
line-height: 1.6;
/* aparece atras da folha quando ela nao ocupa a tela toda */
min-height: 100vh;
}
/* Link solto (fora de .instrucoes e fora de .botao). Sem isto o navegador usa o
azul padrao, que sobre fundo marrom fica ilegivel e fora da marca. Vem cedo no
arquivo de proposito: .botao e um e precisa vencer, o que ele faz por vir
depois com a mesma especificidade. */
a {
color: var(--laranja-claro);
text-decoration: underline;
text-underline-offset: 2px;
}
a:hover { color: var(--laranja); }
/* Par que nunca pode partir no meio: "e-mail" quebrando no hifen vira "por e-" /
"mail", e "R$ 0,00" vira "R$" / "0,00". Sao os dois casos que aparecem aqui. */
.junto { white-space: nowrap; }
/* Evita a ultima linha do paragrafo com uma palavra so. Nao da controle sobre
ONDE a quebra cai - para isso existe .junto -, mas resolve o resto sozinho. */
p { text-wrap: pretty; }
/* ===================== FOLHA ===================== */
.folha {
max-width: var(--folha);
margin: 0 auto;
padding: 40px 20px 96px;
}
.folha > * + * { margin-top: 40px; }
/* ===================== CABECALHO ===================== */
header { text-align: left; }
header > * + * { margin-top: 16px; }
/* O h1 e Anton em ate 3rem: com os mesmos 16px dos outros pares, a linha de apoio
encosta nele. Titulo grande pede respiro proporcional ao tamanho, nao o do
ritmo geral. */
header h1 + .subtitulo { margin-top: 20px; }
.marca {
height: 34px;
width: auto;
display: block;
}
/* Marca em texto, nao em imagem: uma logo de 40KB para um formulario que abre no
celular em rede ruim nao se paga, e Anton ja esta carregada para os titulos. */
.marca-txt {
margin: 0;
font-family: var(--titulo);
font-weight: 400;
font-size: 1.02rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--creme);
}
.marca-txt span { color: var(--laranja); }
h1 {
margin: 0;
font-family: var(--titulo);
font-weight: 400;
font-size: clamp(2rem, 7vw, 3rem);
line-height: 1.06;
letter-spacing: 0.005em;
color: var(--creme);
text-transform: uppercase;
}
h1 em {
font-style: normal;
color: var(--laranja);
}
.subtitulo {
margin: 0;
font-size: 1.05rem;
line-height: 1.55;
color: var(--creme-60);
max-width: 56ch;
}
/* ===================== INSTRUCOES ===================== */
.instrucoes {
background: var(--marrom-900);
border: 1px solid var(--linha);
border-radius: var(--raio);
padding: 22px 24px;
}
.instrucoes > * + * { margin-top: 12px; }
.instrucoes h2 {
margin: 0;
font-family: var(--corpo);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--laranja-claro);
}
.instrucoes ul {
margin: 0;
padding-left: 20px;
}
.instrucoes li {
font-size: 0.95rem;
line-height: 1.6;
color: var(--creme-60);
}
.instrucoes li + li { margin-top: 8px; }
.instrucoes strong { color: var(--creme); font-weight: 700; }
.instrucoes a {
color: var(--laranja-claro);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ===================== SECAO ===================== */
.secao {
border-top: 1px solid var(--linha);
padding-top: 34px;
}
.secao > * + * { margin-top: 26px; }
.secao h2 {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0;
font-family: var(--titulo);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.15;
letter-spacing: 0.01em;
color: var(--creme);
text-transform: uppercase;
}
.numero {
font-size: 0.95rem;
color: var(--laranja);
letter-spacing: 0.08em;
}
/* placar da secao, escrito pelo motor */
.secao-status {
margin-left: auto;
font-family: var(--corpo);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--creme-52);
white-space: nowrap;
}
.secao-status[data-completa] { color: var(--verde); }
/* ===================== CAMPO ===================== */
.campo > * + * { margin-top: 10px; }
.campo label {
display: block;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.45;
color: var(--creme);
}
/* selo visual, nao faz parte da pergunta (o motor remove antes de gravar) */
.pista {
font-weight: 400;
color: var(--creme-52);
}
.urgente {
display: inline-block;
margin-left: 8px;
padding: 3px 9px;
border-radius: 999px;
background: var(--laranja-fill);
border: 1px solid var(--laranja-borda);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--laranja-claro);
vertical-align: 2px;
}
.ajuda {
margin: 0;
font-size: 0.88rem;
line-height: 1.5;
color: var(--creme-52);
}
.ajuda--centro { text-align: center; }
.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo select,
.campo textarea {
display: block;
width: 100%;
/* 16px evita o zoom automatico do iOS ao focar o campo */
font-family: var(--corpo);
font-size: 16px;
line-height: 1.5;
color: var(--creme);
background: var(--marrom-900);
border: 1px solid var(--linha-forte);
border-radius: 10px;
padding: 13px 14px;
min-height: 48px;
transition: border-color 0.15s, background 0.15s;
appearance: none;
}
.campo textarea {
min-height: 96px;
resize: vertical;
overflow: hidden;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--creme-52); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
outline: 2px solid var(--laranja);
outline-offset: 1px;
border-color: var(--laranja);
background: var(--marrom-850);
}
/* ===================== OPCOES ===================== */
.opcoes {
display: grid;
gap: 8px;
}
.opcoes label {
display: flex;
align-items: flex-start;
gap: 11px;
/* alvo de toque com folga: 44px e o minimo, aqui sobra */
min-height: 48px;
padding: 12px 14px;
background: var(--marrom-900);
border: 1px solid var(--linha);
border-radius: 10px;
font-size: 0.98rem;
font-weight: 400;
line-height: 1.4;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.opcoes label:hover { border-color: var(--linha-forte); }
.opcoes input {
flex-shrink: 0;
width: 20px;
height: 20px;
margin: 1px 0 0 0;
accent-color: var(--laranja);
cursor: pointer;
}
.opcoes label:has(input:checked) {
border-color: var(--laranja);
background: var(--laranja-fill-suave);
}
.opcoes label:has(input:focus-visible) {
outline: 2px solid var(--laranja);
outline-offset: 1px;
}
.opcoes label:has(input:disabled) {
opacity: 0.42;
cursor: not-allowed;
}
/* ===================== MARCADORES ===================== */
/* Nao usados neste formulario - captacao de lead nao tem "nao sei" nem "nao se
aplica". Ficam no CSS porque o motor e o mesmo e um proximo formulario
(briefing, pesquisa) pode precisar deles sem mexer aqui. */
.marcadores {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
}
.marcadores label {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-size: 0.86rem;
font-weight: 400;
color: var(--creme-52);
cursor: pointer;
}
.campo.bloqueado input:not([data-naosei]):not([data-naoaplica]),
.campo.bloqueado textarea,
.campo.bloqueado select { opacity: 0.35; }
/* ===================== RETOMADA ===================== */
/* Sem a faixa lateral laranja de 3px que existia aqui: borda colorida grossa de
um lado so e o tique visual mais reconhecivel de interface gerada por IA, e
este bloco ja se destaca pela borda laranja inteira sobre o fundo do cartao. */
.retomar {
background: var(--marrom-900);
border: 1px solid var(--laranja-borda);
border-radius: var(--raio);
padding: 18px 20px;
}
.retomar > * + * { margin-top: 12px; }
.retomar p {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--creme-60);
}
.retomar strong { color: var(--creme); font-weight: 700; }
.retomar button {
font-family: var(--corpo);
font-size: 0.88rem;
font-weight: 700;
color: var(--marrom-950);
background: var(--laranja);
border: none;
border-radius: 8px;
min-height: 44px;
padding: 0 18px;
cursor: pointer;
}
/* ===================== ERRO ===================== */
[data-erro] {
margin: 0;
background: var(--vermelho-fill);
border: 1px solid var(--vermelho-borda);
border-radius: 10px;
padding: 14px 16px;
font-size: 0.95rem;
line-height: 1.55;
color: var(--vermelho);
}
/* O painel some por estar VAZIO, e nao por `hidden`. A diferenca importa para o
leitor de tela: elemento com `hidden` sai da arvore de acessibilidade, e uma
regiao aria-live que so entra na arvore no momento em que ganha texto costuma
nao ser anunciada. Vazio, ele continua na arvore o tempo todo, escutando. */
[data-erro]:empty { display: none; }
/* campo apontado pela validacao de obrigatorios */
.campo.faltando input,
.campo.faltando select,
.campo.faltando textarea,
.campo.faltando .opcoes label {
border-color: var(--vermelho);
}
/* Aviso de tratamento de dados: ultimo texto antes da barra fixa de envio.
Sem margem propria ele encosta na barra, porque dentro do