/*
 * Página de contato.
 *
 * Formulário longo trava o dedo de quem preenche, então a página inteira é
 * desenhada para reduzir dúvida: o topo diz o que acontece depois de enviar,
 * os campos vêm em pares para a coluna não virar um corredor de 9 caixas, e a
 * lateral oferece a saída rápida para quem não quer preencher nada.
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 */

/* --------------------------------------------------------------------------
 * Topo
 * ----------------------------------------------------------------------- */

.vlr-form-topo {
	padding-block: clamp(48px, 7vw, 88px);
}

.vlr-form-topo__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
	gap: var(--vlr-e6) var(--vlr-e8);
	align-items: end;
}

/*
 * 17ch, não 14ch, e o número é medido.
 *
 * O título passou a ser o do §24 — "Conte o que você precisa construir", dez
 * caracteres mais longo que o anterior. Com 14ch ele saía em quatro linhas de
 * Amberly Black, e a partir da quarta a fonte para de ser lida como frase e
 * passa a ser vista como bloco. É o mesmo limite já documentado em
 * `.vlr-topo-pagina h1`, e vale repetir o valor para as duas páginas
 * quebrarem igual.
 */
.vlr-form-topo h1 {
	margin-block: var(--vlr-e3) var(--vlr-e4);
	max-width: 17ch;
}

.vlr-form-topo__sub {
	font-size: clamp(1rem, 1.8vw, 1.14rem);
	line-height: 1.55;
	max-width: 52ch;
	color: rgb(255 255 255 / 86%);
	margin: 0;
}

/*
 * As três promessas.
 *
 * Não é enfeite: é a resposta às três perguntas que quem preenche formulário
 * faz em silêncio — quando respondem, quem responde, e se vão me empurrar algo.
 */
.vlr-promessas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--vlr-e4);
}

.vlr-promessas li {
	display: grid;
	gap: 2px;
	padding-left: var(--vlr-e4);
	border-left: 2px solid rgb(255 255 255 / 30%);
}

.vlr-promessas b {
	font-family: var(--vlr-marca);
	font-weight: 900;
	font-size: 1.05rem;
	line-height: 1.2;
}

.vlr-promessas span {
	font-size: 0.9rem;
	color: rgb(255 255 255 / 76%);
}

/* --------------------------------------------------------------------------
 * Recado do envio
 * ----------------------------------------------------------------------- */

.vlr-recado {
	border-radius: var(--vlr-raio);
	padding: var(--vlr-e4) var(--vlr-e5);
	margin-bottom: var(--vlr-e6);
	border-left: 4px solid;

	/*
	 * O envio volta com #contato na URL e o navegador salta para cá. Sem esta
	 * folga o recado para debaixo do cabeçalho fixo, e quem enviou não vê a
	 * confirmação — acha que o formulário engoliu os dados e manda de novo.
	 */
	scroll-margin-top: 84px;
}

/*
 * O recado recebe foco (tabindex="-1") para o leitor de tela anunciar o
 * resultado. O anel padrão do navegador em cima de uma caixa larga fica
 * pesado, então ele vira um contorno na própria cor do recado.
 */
.vlr-recado:focus {
	outline: none;
}

.vlr-recado:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.vlr-recado p {
	margin: 0;
	max-width: 62ch;
}

/*
 * O atalho para o campo que errou.
 *
 * Herda a cor do recado em vez de virar roxo: dentro de uma caixa de erro, um
 * link na cor da marca lê como oferta, não como correção. O sublinhado fica,
 * porque aqui a cor sozinha não pode carregar a informação de que é clicável.
 */
.vlr-recado__atalho {
	margin-block-start: var(--vlr-e2);
	font-size: 0.92rem;
	font-weight: 600;
}

.vlr-recado__atalho a {
	color: inherit;
}

.vlr-recado--ok {
	background: #edf5f3;
	border-color: var(--vlr-verde);
	color: #2c5f56;
}

.vlr-recado--erro {
	background: #fdf1e7;
	border-color: var(--vlr-laranja);
	color: #8f4614;
}

/* --------------------------------------------------------------------------
 * Grade da página
 * ----------------------------------------------------------------------- */

.vlr-form-grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: var(--vlr-e7) var(--vlr-e8);
	align-items: start;
}

/* --------------------------------------------------------------------------
 * Campos
 * ----------------------------------------------------------------------- */

.vlr-form {
	display: grid;
	gap: var(--vlr-e5);
}

/* --------------------------------------------------------------------------
 * Grupos
 *
 * Nove campos numa coluna só não têm onde a pessoa descansar, e o §24 mistura
 * três assuntos: quem é você, o que você quer, quanto e quando. O fieldset é
 * o elemento certo por semântica — o leitor de tela anuncia a legenda ao
 * entrar em cada grupo, então a pergunta "por que estão perguntando isso" já
 * vem respondida antes do primeiro campo.
 *
 * O `border: 0` é obrigatório: o navegador desenha uma moldura própria em
 * fieldset, e ela não combina com nenhuma outra borda do site.
 * ----------------------------------------------------------------------- */

.vlr-form .vlr-grupo {
	display: grid;
	gap: var(--vlr-e5);
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

/* Do segundo grupo em diante, uma régua fina marca a virada de assunto. */
.vlr-form .vlr-grupo + .vlr-grupo {
	padding-block-start: var(--vlr-e6);
	border-block-start: 1px solid var(--vlr-borda);
}

/*
 * A legenda usa o mesmo mono em caixa alta dos rótulos do resto do site, para
 * o formulário não parecer bloco importado de outro projeto. Não usa a classe
 * `.vlr-dado` porque legend não aceita display de grade em todos os
 * navegadores e precisa das próprias regras.
 */
.vlr-form .vlr-grupo__nome {
	padding: 0;
	font-family: var(--vlr-dado);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
}

/* -------------------------------------------------------------------------
 * O ANEL DE PROGRESSO — o único gesto de movimento desta página
 *
 * O resto do site entra por rolagem. Aqui não, e é decisão, não esquecimento:
 * quem chega no formulário veio preencher. Campo que aparece atrasa quem
 * digita, e campo que se move enquanto se tenta clicar atrapalha de verdade
 * quem usa teclado ou tem tremor.
 *
 * Então o movimento aqui responde à PESSOA e não à rolagem: o número do grupo
 * é um anel que preenche conforme os campos daquele grupo são respondidos.
 * Mostra quanto falta sem escrever "faltam 2 campos" em lugar nenhum.
 *
 * A conta e o porquê de contar campo opcional estão em formulario.js.
 *
 * O numeral sai de um contador CSS, então a ordem se mantém sozinha se um
 * grupo for inserido ou removido do template.
 * ------------------------------------------------------------------------- */

.vlr-form {
	counter-reset: vlr-grupo;
}

.vlr-form .vlr-grupo {
	counter-increment: vlr-grupo;
}

.vlr-form .vlr-grupo__nome::before {
	content: counter(vlr-grupo, decimal-leading-zero);

	/*
	 * `inline-flex` e não `flex`: legend é elemento de layout teimoso, e
	 * qualquer display de bloco aqui quebra o alinhamento do texto ao lado em
	 * parte dos navegadores. Em linha, o selo se comporta como uma letra
	 * grande e o texto continua ao lado sem gambiarra de posicionamento.
	 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 26px;
	block-size: 26px;
	margin-inline-end: 10px;
	vertical-align: middle;
	border-radius: 50%;
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	color: var(--vlr-tinta-fraca);

	/*
	 * O anel é um cone que vai até `--vlr-feito`, com o miolo tampado por cima.
	 * Duas camadas numa propriedade só: sem elemento extra, sem SVG, e o
	 * navegador repinta só este círculo de 26px quando a variável muda.
	 *
	 * O `--vlr-feito` nasce em 0% aqui e não no JS de propósito: sem script o
	 * selo fica um número em anel vazio, que continua legível e correto.
	 */
	--vlr-feito: 0%;

	background:
		radial-gradient(closest-side, var(--vlr-papel) 0 74%, transparent 76%),
		conic-gradient(var(--vlr-roxo) var(--vlr-feito), var(--vlr-borda) 0);
	transition: background 260ms var(--vlr-curva), color 260ms var(--vlr-curva);
}

/*
 * Grupo inteiro respondido: o selo enche e inverte. É o único momento em que a
 * cor de marca aparece cheia no formulário, então ela marca conclusão e nada
 * mais — não briga com o botão de enviar, que continua sendo o único destino.
 */
.vlr-form .vlr-grupo[data-feito="tudo"] .vlr-grupo__nome::before {
	background: var(--vlr-roxo);
	color: #fff;
}

.vlr-form .vlr-grupo[data-feito="tudo"] .vlr-grupo__nome {
	color: var(--vlr-tinta);
}

@media (prefers-reduced-motion: reduce) {

	/* O anel continua: ele é informação, não enfeite. O que sai é a passagem
	   suave entre um valor e outro. */
	.vlr-form .vlr-grupo__nome::before {
		transition: none;
	}
}

.vlr-campo-par {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--vlr-e5);

	/*
	 * `start` e não o `stretch` padrão: quando um dos dois campos ganha a
	 * mensagem de erro embaixo, a fileira fica mais alta e o campo vizinho
	 * esticava junto. O e-mail errado aparecia com 40px de altura e o WhatsApp
	 * ao lado com 54px, desalinhados — parecia que o formulário tinha quebrado
	 * junto com a validação.
	 */
	align-items: start;
}

.vlr-campo {
	display: grid;
	gap: 6px;
}

.vlr-campo label {
	font-weight: 600;
	font-size: 0.95rem;
	display: flex;
	align-items: baseline;
	gap: var(--vlr-e2);
}

.vlr-campo__opcional {
	font-family: var(--vlr-dado);
	font-size: 0.62rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--vlr-tinta-fraca);
	font-weight: 500;
}

.vlr-campo input,
.vlr-campo select,
.vlr-campo textarea {
	font-family: var(--vlr-corpo);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--vlr-tinta);
	background: var(--vlr-papel);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	padding: 12px 14px;
	width: 100%;
	transition: border-color var(--vlr-rapido) var(--vlr-curva), box-shadow var(--vlr-rapido) var(--vlr-curva);
}

.vlr-campo textarea {
	resize: vertical;
	min-height: 120px;
}

/*
 * A seta do select é desenhada aqui porque a nativa muda de forma em cada
 * sistema, e um formulário com um controle destoando dos outros passa a
 * sensação de página remendada.
 */
.vlr-campo select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236B6478'%3E%3Cpath d='M5 8l5 5 5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 38px;
	cursor: pointer;
}

.vlr-campo input:focus,
.vlr-campo select:focus,
.vlr-campo textarea:focus {
	outline: none;
	border-color: var(--vlr-roxo);
	box-shadow: 0 0 0 3px rgb(89 39 132 / 14%);
}

.vlr-campo input:focus-visible,
.vlr-campo select:focus-visible,
.vlr-campo textarea:focus-visible {
	outline: 2px solid var(--vlr-roxo);
	outline-offset: 1px;
}

.vlr-campo__ajuda {
	font-size: 0.86rem;
	color: var(--vlr-tinta-fraca);
	margin: 0;
	max-width: none;
}

/*
 * Erro no campo, não só no topo.
 *
 * Um alerta dizendo "esse e-mail não parece válido" acima de nove campos ainda
 * deixa a pessoa procurando qual deles é. Aqui a mensagem fica embaixo do
 * campo e o `aria-describedby` do input aponta para ela, então o leitor de
 * tela lê a correção junto com o rótulo.
 *
 * A cor é a mesma do recado de erro, e não o laranja da marca: o laranja é cor
 * de área e dá 2,63:1 sobre branco.
 */
.vlr-campo__erro {
	margin: 0;
	max-width: 62ch;
	font-size: 0.88rem;
	font-weight: 600;
	color: #8f4614;
}

/* A borda confirma o que a mensagem diz. Cor sozinha nunca é o único sinal. */
.vlr-campo input[aria-invalid="true"],
.vlr-campo select[aria-invalid="true"],
.vlr-campo textarea[aria-invalid="true"] {
	border-color: var(--vlr-laranja);
	box-shadow: 0 0 0 3px rgb(238 132 56 / 18%);
}

/*
 * A armadilha do antispam. Fora da tela sem display:none, porque campo com
 * display:none alguns robôs sabem ignorar.
 */
.vlr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
 * Aceite
 * ----------------------------------------------------------------------- */

.vlr-aceite {
	display: flex;
	align-items: flex-start;
	gap: var(--vlr-e3);
	padding: var(--vlr-e4);
	background: var(--vlr-superficie);
	border-radius: var(--vlr-raio);
}

/* O aceite recusado ganha a mesma barra do recado de erro. */
.vlr-aceite--erro {
	border-left: 4px solid var(--vlr-laranja);
	background: #fdf1e7;
}

.vlr-aceite input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	flex: none;
	accent-color: var(--vlr-roxo);
	cursor: pointer;
}

.vlr-aceite label {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--vlr-tinta-fraca);
	cursor: pointer;
}

.vlr-aceite a {
	color: var(--vlr-roxo);
}

.vlr-btn--enviar {
	justify-content: center;
	padding-inline: var(--vlr-e7);
	font-size: 1rem;
	justify-self: start;
}

.vlr-form__nota {
	font-size: 0.84rem;
	color: var(--vlr-tinta-fraca);
	margin: 0;
	max-width: 56ch;
}

/* --------------------------------------------------------------------------
 * Lateral
 * ----------------------------------------------------------------------- */

/*
 * A lateral acompanha a rolagem, e o `top` tem que contar a pílula do
 * cabeçalho.
 *
 * Com 32px o cartão do WhatsApp parava atrás do cabeçalho fixo, que tem 68px
 * de altura. O botão continuava
 * clicável no meio dele e invisível na borda de cima, e um botão meio
 * escondido lê como bug de layout.
 */
.vlr-form-lado {
	display: grid;
	gap: var(--vlr-e4);
	position: sticky;
	top: calc(68px + var(--vlr-e4));
}

.vlr-lado-cartao {
	background: var(--vlr-papel);
	border: 1px solid var(--vlr-borda);
	border-radius: var(--vlr-raio);
	padding: var(--vlr-e5);
	display: grid;
	gap: var(--vlr-e3);
	justify-items: start;
}

.vlr-lado-cartao--discreto {
	background: var(--vlr-superficie);
}

.vlr-lado-cartao h2 {
	font-size: 1.1rem;
	line-height: 1.2;
	margin: 0;
}

.vlr-lado-cartao p {
	font-size: 0.94rem;
	line-height: 1.5;
	margin: 0;
	max-width: none;
	color: var(--vlr-tinta-fraca);
}

.vlr-form-lado__email {
	font-size: 0.9rem;
	color: var(--vlr-tinta-fraca);
	margin: 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
 * Telas estreitas
 * ----------------------------------------------------------------------- */

@media (max-width: 56.25rem) {
	.vlr-form-topo__grade,
	.vlr-form-grade {
		grid-template-columns: 1fr;
	}

	.vlr-form-lado {
		position: static;
	}

	.vlr-promessas {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

@media (max-width: 40rem) {
	.vlr-btn--enviar {
		justify-self: stretch;
	}
}


/* --------------------------------------------------------------------------
 * O BLOCO DE CONSENTIMENTO precisa de 24px de alvo
 *
 * A caixa de marcar tem 18x18, e o rótulo associado tinha 22px de altura. Como
 * clicar no rótulo marca a caixa, o alvo real é o rótulo — e 22 continua abaixo
 * dos 24 que a WCAG 2.5.8 pede.
 *
 * É o controle mais caro de errar do formulário inteiro: sem ele marcado, o
 * envio é recusado. Errar o clique aqui é a pessoa achar que enviou e não ter
 * enviado.
 *
 * O link da política, dentro do mesmo bloco, ganha o mesmo piso pela mesma
 * razão: ele é o único caminho para o texto que a pessoa está aceitando.
 * ----------------------------------------------------------------------- */

.vlr-aceite label,
.vlr-aceite a {
	display: inline-block;
	min-block-size: 24px;
	align-content: center;
}

/* A caixa acompanha o rótulo em vez de ficar colada no topo dele, agora que a
   linha ficou mais alta. */
.vlr-aceite input[type="checkbox"] {
	align-self: center;
}