/*
 * NAVASTA — os formulários.
 *
 * Desenho do formulário de contacto igual à imagem que o Manuel mandou a
 * 18/09: fundo preto, caixa exterior com contorno branco, cada campo numa
 * caixa com contorno, rótulos por cima com asterisco, Email e WhatsApp lado a
 * lado, botão ENVIAR branco à esquerda.
 *
 * ⚠️ Os cantos são os 12px da marca, e NÃO os da imagem, que são mais
 * redondos. Decisão do Manuel: a mesma regra dos cantos quase direitos em
 * tudo. Está numa variável (--nvs-f-raio) para se mudar num sítio só.
 */

/* ---------------------------------------------------------------
   As bandeiras
   ---------------------------------------------------------------
   O Windows não tem os desenhos das bandeiras e mostra as duas letras do país
   (PT em vez de 🇵🇹). Este tipo de letra tem só as bandeiras e vai à frente do
   Space Grotesk: o que não for bandeira atravessa e sai no tipo de letra
   normal. O unicode-range faz com que o browser só o descarregue se houver
   uma bandeira na página.

   Vive dentro do plugin de propósito, e nunca num serviço externo: um tipo de
   letra pedido a terceiros manda-lhes o IP de cada visitante.

   Licença: código MIT (TalkJS), desenhos CC-BY 4.0 (Twemoji). Ver
   assets/fonts/LICENCA-bandeiras.md.
   --------------------------------------------------------------- */

@font-face {
	font-family: 'Navasta Bandeiras';
	src: url('../fonts/bandeiras.woff2') format('woff2');
	unicode-range: U+1F1E6-1F1FF;
	font-display: swap;
}

.nvs-form {
	--nvs-f-texto: #ffffff;
	--nvs-f-apoio: #b4b4b4;          /* 10,7 de contraste sobre o preto */
	--nvs-f-exemplo: #8a8a8a;        /* 5,9 — texto de exemplo nas caixas */
	--nvs-f-fundo: #000000;
	--nvs-f-borda: #ffffff;
	--nvs-f-erro: #ff9b8a;           /* 10,3 sobre o preto */
	--nvs-f-raio: 12px;              /* a regra da marca, igual ao menu */

	/* Botão, opção escolhida, e o que vai escrito por cima deles. */
	--nvs-f-destaque: #ffffff;
	--nvs-f-sobre-destaque: #000000;
	--nvs-f-foco: #ffffff;
	--nvs-f-linha-fraca: rgba(255, 255, 255, 0.22);
	--nvs-f-linha-media: rgba(255, 255, 255, 0.5);
	--nvs-f-lista-fundo: #111111;    /* a lista aberta dos países */

	--nvs-f-1: 8px;
	--nvs-f-2: 16px;
	--nvs-f-3: 24px;
	--nvs-f-4: 32px;
	--nvs-f-5: 40px;

	font-family: 'Navasta Bandeiras', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: var(--nvs-f-5) var(--nvs-f-5) var(--nvs-f-4);
	background: var(--nvs-f-fundo);
	border: 1px solid var(--nvs-f-borda);
	border-radius: var(--nvs-f-raio);
	color: var(--nvs-f-texto);
	-webkit-tap-highlight-color: transparent;
}

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

/* ---------------------------------------------------------------
   Versão de página inteira — branca, texto preto
   ---------------------------------------------------------------
   Para o orçamento e o briefing, por decisão do Manuel a 22/09: ocupam a
   página toda, fundo branco e texto preto, sem a caixa preta do contacto.
   Só mudam as variáveis; o desenho dos campos é o mesmo.

   Contrastes medidos sobre o branco: texto 18,9 · apoio (#555) 7,5 ·
   exemplo (#6b6b6b) 5,3 · erro (#b3261e) 6,6. Tudo acima do mínimo legal.
   --------------------------------------------------------------- */

.nvs-form.nvs-form--pagina {
	--nvs-f-texto: #111111;
	--nvs-f-apoio: #555555;
	--nvs-f-exemplo: #6b6b6b;
	--nvs-f-fundo: #ffffff;
	--nvs-f-borda: #111111;
	--nvs-f-erro: #b3261e;
	--nvs-f-destaque: #111111;
	--nvs-f-sobre-destaque: #ffffff;
	--nvs-f-foco: #111111;
	--nvs-f-linha-fraca: rgba(0, 0, 0, 0.14);
	--nvs-f-linha-media: rgba(0, 0, 0, 0.4);
	--nvs-f-lista-fundo: #ffffff;

	max-width: none;
	width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 72px 24px 96px;
	border: 0;
	border-radius: 0;
}

/* O conteúdo não se estica pela página toda: uma coluna confortável de ler,
   ao centro. */
.nvs-form--pagina .nvs-form__form {
	max-width: 760px;
	margin: 0 auto;
}

.nvs-form--pagina .nvs-form__seta {
	border-top-color: var(--nvs-f-texto);
}

/* Texto só para leitores de ecrã. Vive aqui, e não só no menu.css: a página
   do formulário pode não ter menu, e aí o CSS do menu não é carregado. */
.nvs-form__so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------
   Grupos, linhas e rótulos
   --------------------------------------------------------------- */

.nvs-form__grupo {
	min-width: 0;
	margin: 0 0 var(--nvs-f-5);
	padding: 0;
	border: 0;
}

.nvs-form__linha {
	display: grid;
	gap: var(--nvs-f-3);
}

.nvs-form__linha--metades {
	grid-template-columns: 1fr 1fr;
	gap: var(--nvs-f-2);
}

/* Email mais largo do que o telefone, na proporção da imagem (≈ 1,4 : 1). */
.nvs-form__linha--email-telefone {
	grid-template-columns: 1.4fr 1fr;
	gap: var(--nvs-f-4);
}

.nvs-form__linha--email-telefone .nvs-form__grupo {
	margin-bottom: var(--nvs-f-5);
}

.nvs-form__etiqueta {
	display: block;
	float: none;          /* um <legend> flutua em alguns browsers */
	width: 100%;
	margin: 0 0 var(--nvs-f-2);
	padding: 0;
	color: var(--nvs-f-texto);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.nvs-form__obrigatorio {
	margin-left: 6px;
	font-size: 13px;
	vertical-align: 2px;
}

/* ---------------------------------------------------------------
   As caixas
   --------------------------------------------------------------- */

.nvs-form__caixa {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 16px;
	background: var(--nvs-f-fundo);
	color: var(--nvs-f-texto);
	font: inherit;
	font-size: 16px;      /* 16px evita que o telemóvel dê zoom ao tocar */
	line-height: 1.4;
	border: 1px solid var(--nvs-f-borda);
	border-radius: var(--nvs-f-raio);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/*
 * O preenchimento automático do Chrome pinta os campos de azul-claro e muda a
 * cor da letra — viu-se nas imagens do Manuel. Não se tira com background:
 * o Chrome ignora-o. Pinta-se por cima com uma sombra por dentro, da cor do
 * fundo, e força-se a cor do texto.
 */
.nvs-form input:-webkit-autofill,
.nvs-form input:-webkit-autofill:hover,
.nvs-form input:-webkit-autofill:focus,
.nvs-form textarea:-webkit-autofill,
.nvs-form select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--nvs-f-fundo) inset;
	box-shadow: 0 0 0 1000px var(--nvs-f-fundo) inset;
	-webkit-text-fill-color: var(--nvs-f-texto);
	caret-color: var(--nvs-f-texto);
	transition: background-color 9999s ease-in-out 0s;
}

.nvs-form__caixa::placeholder,
.nvs-form__telefone-numero::placeholder {
	color: var(--nvs-f-exemplo);
	opacity: 1;
}

/*
 * Blindagem das caixas. O tema tem regras como input[type="email"] { … }, que
 * pesam mais do que uma classe sozinha — no ensaio, com essas regras ligadas,
 * as caixas ficaram azul-claro e com contorno cinzento. Com duas classes, o
 * desenho é sempre o nosso.
 */
.nvs-form .nvs-form__caixa {
	background: var(--nvs-f-fundo);
	color: var(--nvs-f-texto);
	border: 1px solid var(--nvs-f-borda);
	border-radius: var(--nvs-f-raio);
}

.nvs-form .nvs-form__grupo--erro .nvs-form__caixa {
	border-color: var(--nvs-f-erro);
}

/* Foco: um segundo contorno por dentro, para não mexer no tamanho. */
.nvs-form__caixa:focus,
.nvs-form__telefone:focus-within {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--nvs-f-borda);
}

.nvs-form__area {
	min-height: 240px;
	resize: vertical;
}

/* ---------------------------------------------------------------
   O telefone: bandeira + seta + número, tudo dentro de uma caixa
   --------------------------------------------------------------- */

.nvs-form__telefone {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--nvs-f-1);
	padding: 0 16px 0 0;
}

.nvs-form__pais-vista {
	display: none;        /* só aparece com JavaScript — ver .nvs-js */
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding-left: 16px;
	pointer-events: none;
}

.nvs-form__bandeira {
	font-size: 20px;
	line-height: 1;
}

.nvs-form__seta {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--nvs-f-apoio);
}

/* Sem JavaScript: o <select> vê-se e usa-se como um campo normal. */
.nvs-form__pais {
	flex: 0 0 auto;
	max-width: 46%;
	min-height: 46px;
	padding: 0 8px 0 16px;
	background: transparent;
	color: var(--nvs-f-texto);
	font: inherit;
	font-size: 15px;
	border: 0;
	border-right: 1px solid var(--nvs-f-linha-fraca);
	border-radius: 0;
	cursor: pointer;
}

.nvs-form__pais option,
.nvs-form__pais optgroup {
	background: var(--nvs-f-lista-fundo);
	color: var(--nvs-f-texto);
}

/*
 * O número dentro da caixa do telefone não tem caixa própria. Nas imagens do
 * Manuel aparecia uma caixa dentro da caixa: o preenchimento automático, e as
 * regras de input do tema, davam-lhe contorno e fundo. Blindado com duas
 * classes.
 */
.nvs-form .nvs-form__telefone .nvs-form__telefone-numero,
.nvs-form .nvs-form__telefone .nvs-form__telefone-numero:focus {
	border: 0;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
}

.nvs-form .nvs-form__telefone .nvs-form__telefone-numero:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--nvs-f-fundo) inset;
	box-shadow: 0 0 0 1000px var(--nvs-f-fundo) inset;
}

.nvs-form__telefone-numero {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 0 0 0 4px;
	background: transparent;
	color: var(--nvs-f-texto);
	font: inherit;
	font-size: 16px;
	border: 0;
	outline: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Com JavaScript: a bandeira desenhada por nós aparece, e o <select> fica
 * transparente por cima dela, do mesmo tamanho. Quem vê, vê a bandeira; quem
 * toca ou usa o teclado, está no <select> verdadeiro — com a lista do sistema
 * e tudo o que isso traz de acessibilidade.
 */
.nvs-js .nvs-form__pais-vista {
	display: inline-flex;
}

.nvs-js .nvs-form__pais {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 64px;
	max-width: none;
	min-height: 0;
	padding: 0;
	opacity: 0;
	border: 0;
	z-index: 1;
}

/* ---------------------------------------------------------------
   Consentimento
   --------------------------------------------------------------- */

.nvs-form__grupo--consentimento {
	margin-bottom: var(--nvs-f-4);
}

.nvs-form__consentimento {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--nvs-f-apoio);
	font-size: 14px;
	line-height: 1.6;
	cursor: pointer;
}

.nvs-form__consentimento input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--nvs-f-destaque);
	cursor: pointer;
}

.nvs-form__consentimento a {
	color: var(--nvs-f-texto);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   Erros
   --------------------------------------------------------------- */

.nvs-form__erro,
.nvs-form__erro-geral {
	margin: var(--nvs-f-1) 0 0;
	color: var(--nvs-f-erro);
	font-size: 14px;
	line-height: 1.5;
}

.nvs-form__erro-geral {
	margin: 0 0 var(--nvs-f-4);
	padding: var(--nvs-f-2);
	border: 1px solid var(--nvs-f-erro);
	border-radius: var(--nvs-f-raio);
}

.nvs-form__grupo--erro .nvs-form__caixa {
	border-color: var(--nvs-f-erro);
}

.nvs-form__grupo--erro > .nvs-form__etiqueta {
	color: var(--nvs-f-erro);
}

/* ---------------------------------------------------------------
   Botão — branco, à esquerda, do tamanho do texto
   --------------------------------------------------------------- */

.nvs-form__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 136px;
	min-height: 48px;
	padding: 12px 40px;
	background: var(--nvs-f-destaque);
	color: var(--nvs-f-sobre-destaque);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	border: 0;
	border-radius: var(--nvs-f-raio);
	cursor: pointer;
	transition: transform 0.18s ease, filter 0.18s ease;
}

/*
 * Os botões, blindados em todos os estados.
 *
 * O Manuel viu o ENVIAR ficar azul ao passar o rato: é o CSS de botões do
 * tema ou do Elementor, que tem regras para button:hover mais fortes do que
 * uma classe só. Aqui os seletores levam duas classes e cobrem hover, focus e
 * active — a mesma lição do menu.
 *
 * Ao passar o rato: fundo branco, contorno e texto na cor do texto. Na versão
 * branca (página) isso é branco com contorno e letra pretos, que é o que ele
 * pediu; no contacto preto, é o próprio botão branco com contorno.
 */
.nvs-form .nvs-form__botao,
.nvs-form .nvs-form__botao:visited {
	background: var(--nvs-f-destaque);
	background-image: none;
	color: var(--nvs-f-sobre-destaque);
	border: 1px solid var(--nvs-f-destaque);
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
}

/*
 * Aqui as cores levam !important, e é de propósito: não se sabe se o CSS de
 * botões do tema usa !important no :hover, e se usar, nenhum seletor nosso
 * ganha sem ele. É só nas cores do estado de passar o rato — o sítio exato
 * onde o azul aparecia.
 */
.nvs-form .nvs-form__botao:hover,
.nvs-form .nvs-form__botao:focus,
.nvs-form .nvs-form__botao:active {
	background: var(--nvs-f-fundo) !important;
	background-image: none !important;
	color: var(--nvs-f-texto) !important;
	border-color: var(--nvs-f-texto) !important;
	box-shadow: none;
	filter: none;
	transform: translateY(-1px);
}

/* O botão de contorno (ANTERIOR) ao contrário: acende ao passar o rato. */
.nvs-form .nvs-form__botao--contorno {
	background: transparent;
	color: var(--nvs-f-texto);
	border-color: var(--nvs-f-texto);
}

.nvs-form .nvs-form__botao--contorno:hover,
.nvs-form .nvs-form__botao--contorno:focus,
.nvs-form .nvs-form__botao--contorno:active {
	background: var(--nvs-f-destaque) !important;
	color: var(--nvs-f-sobre-destaque) !important;
	border-color: var(--nvs-f-destaque) !important;
}

.nvs-form__botao[disabled] {
	opacity: 0.6;
	cursor: progress;
	transform: none;
}

.nvs-form a:focus-visible,
.nvs-form button:focus-visible,
.nvs-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--nvs-f-foco);
	outline-offset: 3px;
}

/* O foco do <select> transparente vê-se na caixa inteira do telefone. */
.nvs-js .nvs-form__pais:focus-visible + .nvs-form__telefone-numero,
.nvs-form__telefone:has(.nvs-form__pais:focus-visible) {
	box-shadow: inset 0 0 0 1px var(--nvs-f-borda);
}

/*
 * O atributo hidden tem de ganhar sempre. Sem isto, qualquer regra com
 * display (os botões são inline-flex) fazia aparecer o que o JavaScript
 * escondeu — e ficavam os três botões dos passos visíveis ao mesmo tempo.
 */
.nvs-form [hidden] {
	display: none !important;
}

.nvs-form__opcional {
	margin-left: 8px;
	color: var(--nvs-f-exemplo);
	font-size: 13px;
	font-weight: 400;
}

.nvs-form__nota {
	margin: 12px 0 0;
	color: var(--nvs-f-apoio);
	font-size: 14px;
	line-height: 1.5;
}

.nvs-form__area--curta {
	min-height: 120px;
}

.nvs-form__caixa--depois {
	margin-top: 12px;
}

/* ---------------------------------------------------------------
   Formulário de passos (orçamento)
   --------------------------------------------------------------- */

.nvs-form--passos {
	max-width: 760px;
}

.nvs-form__passo-num {
	margin: 0 0 4px;
	color: var(--nvs-f-exemplo);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.nvs-form__passo-titulo {
	margin: 0 0 var(--nvs-f-4);
	color: var(--nvs-f-texto);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

.nvs-form__passo-titulo:focus {
	outline: none;
}

/* Sem JavaScript: os passos seguem-se, separados por uma linha. */
.nvs-form__passo + .nvs-form__passo {
	margin-top: var(--nvs-f-2);
	padding-top: var(--nvs-f-5);
	border-top: 1px solid var(--nvs-f-linha-fraca);
}

.nvs-com-passos .nvs-form__passo + .nvs-form__passo {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* A barra de progresso só existe com JavaScript. */
.nvs-form__progresso {
	display: none;
	gap: 6px;
	margin: 0 0 var(--nvs-f-5);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.nvs-com-passos .nvs-form__progresso {
	display: flex;
}

.nvs-form__progresso li {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 10px 0 0;
	color: var(--nvs-f-exemplo);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	border-top: 2px solid var(--nvs-f-linha-fraca);
	list-style: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nvs-form__progresso li span {
	margin-right: 4px;
}

.nvs-form__progresso li.nvs-feito {
	color: var(--nvs-f-apoio);
	border-top-color: var(--nvs-f-linha-media);
}

.nvs-form__progresso li.nvs-atual {
	color: var(--nvs-f-texto);
	border-top-color: var(--nvs-f-destaque);
}

/* Sem JavaScript, os botões de passo não fazem nada: escondem-se, e fica só
   o de enviar. */
.nvs-form__navegacao {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: var(--nvs-f-2);
}

.nvs-form [data-nvs-anterior],
.nvs-form [data-nvs-seguinte] {
	display: none;
}

.nvs-com-passos [data-nvs-anterior],
.nvs-com-passos [data-nvs-seguinte] {
	display: inline-flex;
}



/* ---------------------------------------------------------------
   Opções desenhadas como botões (materiais, extras, reunião)
   ---------------------------------------------------------------
   A caixa ou a bola verdadeira continua lá, escondida só à vista: funciona
   com teclado, com leitor de ecrã e sem JavaScript. O que se vê é a etiqueta,
   que se acende quando está escolhida.
   --------------------------------------------------------------- */

.nvs-form__opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nvs-form__opcao {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.nvs-form__opcao input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.nvs-form__opcao span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	color: var(--nvs-f-texto);
	font-size: 15px;
	line-height: 1.3;
	border: 1px solid var(--nvs-f-linha-media);
	border-radius: var(--nvs-f-raio);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nvs-form__opcao:hover span {
	border-color: var(--nvs-f-destaque);
}

.nvs-form__opcao input:checked + span {
	background: var(--nvs-f-destaque);
	color: var(--nvs-f-sobre-destaque);
	border-color: var(--nvs-f-destaque);
}

.nvs-form__opcao input:focus-visible + span {
	outline: 2px solid var(--nvs-f-foco);
	outline-offset: 3px;
}

/* Os dias: dez botões iguais, em grelha, para não ficarem aos solavancos. */
.nvs-form__opcoes--dias {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.nvs-form__opcoes--dias .nvs-form__opcao span {
	justify-content: center;
	width: 100%;
	padding: 10px 6px;
	font-size: 14px;
	text-align: center;
}

.nvs-form__opcoes--dias .nvs-form__opcao {
	display: flex;
}

.nvs-form__grupo--erro .nvs-form__opcao span {
	border-color: var(--nvs-f-erro);
}

.nvs-form__ramo {
	margin: 0;
}

/* ---------------------------------------------------------------
   O calendário da reunião
   ---------------------------------------------------------------
   Sem JavaScript, os meses aparecem um por baixo do outro e as setas não se
   veem. Com JavaScript (.nvs-com-passos), vê-se um mês de cada vez.
   --------------------------------------------------------------- */

.nvs-cal {
	max-width: 420px;
}

.nvs-cal__mes + .nvs-cal__mes {
	margin-top: var(--nvs-f-4);
}

.nvs-com-passos .nvs-cal__mes + .nvs-cal__mes {
	margin-top: 0;
}

.nvs-cal__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
}

.nvs-cal__titulo {
	margin: 0;
	color: var(--nvs-f-texto);
	font-size: 17px;
	font-weight: 600;
	text-transform: capitalize;
}

.nvs-cal__seta {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	color: var(--nvs-f-texto);
	font: inherit;
	font-size: 26px;
	line-height: 1;
	border: 1px solid var(--nvs-f-linha-media);
	border-radius: var(--nvs-f-raio);
	cursor: pointer;
}

.nvs-com-passos .nvs-cal__seta {
	display: inline-flex;
}

.nvs-cal__seta:disabled {
	opacity: 0.25;
	cursor: default;
}

.nvs-cal__seta:focus-visible {
	outline: 2px solid var(--nvs-f-foco);
	outline-offset: 2px;
}

.nvs-cal__semana,
.nvs-cal__dias {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

.nvs-cal__semana {
	margin-bottom: 6px;
}

.nvs-cal__semana span {
	color: var(--nvs-f-apoio);
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.nvs-cal__dia {
	position: relative;
	display: block;
}

.nvs-cal__dia input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.nvs-cal__dia span {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-width: 0;
	color: var(--nvs-f-texto);
	font-size: 15px;
	font-weight: 500;
	border: 1px solid var(--nvs-f-linha-media);
	border-radius: var(--nvs-f-raio);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nvs-cal__dia:hover span {
	border-color: var(--nvs-f-destaque);
}

.nvs-cal__dia input:checked + span {
	background: var(--nvs-f-destaque);
	color: var(--nvs-f-sobre-destaque);
	border-color: var(--nvs-f-destaque);
}

.nvs-cal__dia input:focus-visible + span {
	outline: 2px solid var(--nvs-f-foco);
	outline-offset: 2px;
}

/* Dias que não se escolhem: fins de semana, passados, fora do prazo. */
.nvs-cal__dia--fora span {
	color: var(--nvs-f-exemplo);
	border-color: transparent;
	text-decoration: line-through;
	opacity: 0.55;
	cursor: default;
}

/* Um dia com as horas todas ocupadas (reuniões, bloqueios, Google). */
.nvs-cal__dia--cheio span {
	color: var(--nvs-f-exemplo);
	border-style: dashed;
	text-decoration: line-through;
	opacity: 0.55;
	cursor: not-allowed;
}

/* Uma hora já ocupada: fica à vista, riscada, para a pessoa perceber porque
   não a pode escolher, em vez de a hora simplesmente desaparecer. */
.nvs-form .nvs-form__opcao--ocupada span {
	color: var(--nvs-f-exemplo);
	border-style: dashed;
	text-decoration: line-through;
	opacity: 0.55;
	cursor: not-allowed;
}

.nvs-form .nvs-form__opcao--ocupada:hover span {
	border-color: var(--nvs-f-linha-media);
}

/* ---------------------------------------------------------------
   As horas
   --------------------------------------------------------------- */

.nvs-horas__periodo {
	margin: 16px 0 8px;
	color: var(--nvs-f-apoio);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nvs-horas__periodo:first-of-type {
	margin-top: 0;
}

.nvs-form__opcoes--horas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
}

.nvs-form__opcoes--horas .nvs-form__opcao {
	display: flex;
}

.nvs-form__opcoes--horas .nvs-form__opcao span {
	justify-content: center;
	width: 100%;
	padding: 10px 4px;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Ecrã de sucesso
   --------------------------------------------------------------- */

.nvs-form--feito {
	text-align: center;
}

/* Na versão de página, a mensagem fica ao centro da página toda — também na
   vertical. Pedido do Manuel a 22/09: estava encostada ao topo. */
.nvs-form.nvs-form--feito.nvs-form--pagina {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	padding-top: 72px;
	padding-bottom: 72px;   /* igual em cima e em baixo, para ficar mesmo ao centro */
}

.nvs-form--pagina .nvs-form__feito-titulo {
	font-size: 32px;
}

.nvs-form--pagina .nvs-form__feito-texto {
	max-width: 520px;
	font-size: 17px;
}

.nvs-form__feito-titulo {
	margin: 0 0 var(--nvs-f-2);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.nvs-form__feito-texto {
	margin: 0;
	color: var(--nvs-f-apoio);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------
   O título e a introdução da página (orçamento e briefing)
   ---------------------------------------------------------------
   Vivem dentro do shortcode de propósito: assim desaparecem com o
   formulário quando o pedido é enviado. Em widgets do Elementor ficavam no
   ecrã por cima da mensagem de "pedido enviado".
   --------------------------------------------------------------- */

/* O título pode ser mais largo do que o formulário — no site ocupa quase a
   largura toda. O texto por baixo fica na largura de leitura. */
.nvs-form__topo {
	max-width: 940px;
	margin: 0 auto var(--nvs-f-5);
}

.nvs-form__intro {
	max-width: 760px;
	margin: 0 auto;
}

.nvs-form__titulo {
	margin: 0 0 var(--nvs-f-4);
	color: var(--nvs-f-texto);
	font-size: clamp(26px, 3.4vw, 42px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: uppercase;
}

.nvs-form__titulo span {
	display: block;
}

.nvs-form__intro {
	color: var(--nvs-f-texto);
	font-size: 17px;
	line-height: 1.6;
}

.nvs-form .nvs-form__intro p {
	margin: 0 0 12px;
}

.nvs-form .nvs-form__intro p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Briefing
   ---------------------------------------------------------------
   O briefing usa tudo o que o orçamento já tinha. O que vem aqui é só o
   que ele tem a mais: a introdução de cada passo, as explicações por baixo
   das perguntas, as classes sociais em lista, os ficheiros e o resumo.
   --------------------------------------------------------------- */

.nvs-form__passo-intro {
	margin: calc(-1 * var(--nvs-f-2)) 0 var(--nvs-f-4);
	color: var(--nvs-f-apoio);
	font-size: 16px;
	line-height: 1.5;
}

.nvs-form__subtitulo {
	margin: var(--nvs-f-5) 0 var(--nvs-f-3);
	padding-top: var(--nvs-f-3);
	color: var(--nvs-f-texto);
	font-size: 18px;
	font-weight: 600;
	border-top: 1px solid var(--nvs-f-linha-fraca);
}

/* A explicação por baixo da pergunta (tagline, slogan, limites). */
.nvs-form__ajuda {
	margin: -4px 0 10px;
	color: var(--nvs-f-apoio);
	font-size: 14px;
	line-height: 1.45;
}

/* As classes sociais: uma por linha, bola à esquerda, nome e descrição. */
.nvs-form__opcoes--lista {
	flex-direction: column;
}

.nvs-form .nvs-form__opcao--lista {
	display: flex;
}

.nvs-form .nvs-form__opcao--lista span {
	position: relative;
	display: block;
	width: 100%;
	padding: 14px 16px 14px 48px;
}

/* A bola desenhada. A verdadeira está escondida à vista, como nas outras. */
.nvs-form .nvs-form__opcao--lista span::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 16px;
	width: 18px;
	height: 18px;
	border: 1px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
}

.nvs-form .nvs-form__opcao--lista input:checked + span::before {
	border-width: 5px;
}

.nvs-form .nvs-form__opcao--lista strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 600;
}

.nvs-form .nvs-form__opcao--lista em {
	display: block;
	font-style: normal;
	font-size: 14px;
	line-height: 1.45;
	opacity: 0.8;
}

/* Os ficheiros de referência. */
.nvs-ficheiros__escolher {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

/* Sem JavaScript vê-se o botão normal do browser, que diz que ficheiros foram
   escolhidos. Com JavaScript (nvs-js), a lista é nossa: o botão verdadeiro
   fica por cima, invisível — é ele que recebe o clique e o teclado — e o que
   se vê é o nosso. */
.nvs-ficheiros__botao {
	display: none !important;
}

.nvs-js .nvs-ficheiros__botao {
	display: inline-flex !important;
}

.nvs-js .nvs-ficheiros__escolher input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.nvs-ficheiros__botao {
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	color: var(--nvs-f-texto);
	font-size: 15px;
	font-weight: 600;
	border: 1px dashed var(--nvs-f-linha-media);
	border-radius: var(--nvs-f-raio);
}

.nvs-ficheiros__escolher:hover .nvs-ficheiros__botao {
	border-color: var(--nvs-f-destaque);
}

.nvs-ficheiros__escolher input:focus-visible + .nvs-ficheiros__botao {
	outline: 2px solid var(--nvs-f-foco);
	outline-offset: 3px;
}

.nvs-form .nvs-ficheiros__lista {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.nvs-form .nvs-ficheiros__lista li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--nvs-f-linha-fraca);
	list-style: none;
}

.nvs-ficheiros__nome {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 15px;
}

.nvs-ficheiros__tamanho {
	flex: 0 0 auto;
	color: var(--nvs-f-apoio);
	font-size: 13px;
}

/*
 * Os botões pequenos (Tirar, Editar): parecem ligações sublinhadas. Blindados
 * como os outros botões — o tema tem regras para <button> e pinta-os.
 */
.nvs-form .nvs-ficheiros__tirar,
.nvs-form .nvs-resumo__editar,
.nvs-form .nvs-ficheiros__tirar:hover,
.nvs-form .nvs-resumo__editar:hover,
.nvs-form .nvs-ficheiros__tirar:focus,
.nvs-form .nvs-resumo__editar:focus,
.nvs-form .nvs-ficheiros__tirar:active,
.nvs-form .nvs-resumo__editar:active {
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
	padding: 0 4px;
	background: transparent !important;
	background-image: none !important;
	color: var(--nvs-f-texto) !important;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	cursor: pointer;
}

.nvs-form .nvs-ficheiros__tirar:hover,
.nvs-form .nvs-resumo__editar:hover {
	text-decoration-thickness: 2px;
}

/* O resumo do último passo. */
.nvs-resumo__passo {
	margin: 0 0 var(--nvs-f-3);
	padding: var(--nvs-f-2) var(--nvs-f-3);
	border: 1px solid var(--nvs-f-linha-fraca);
	border-radius: var(--nvs-f-raio);
}

.nvs-resumo__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.nvs-form .nvs-resumo__topo h4 {
	margin: 0;
	color: var(--nvs-f-texto);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.nvs-form .nvs-resumo dl {
	margin: 8px 0 0;
}

.nvs-form .nvs-resumo dt {
	margin: 12px 0 2px;
	color: var(--nvs-f-apoio);
	font-size: 13px;
	font-weight: 500;
}

.nvs-form .nvs-resumo dd {
	margin: 0;
	color: var(--nvs-f-texto);
	font-size: 15px;
	line-height: 1.5;
	white-space: pre-line;          /* as respostas longas mantêm as linhas */
	overflow-wrap: anywhere;        /* um link comprido não sai da caixa */
}

.nvs-form .nvs-resumo dd.nvs-resumo__vazio {
	color: var(--nvs-f-exemplo);
	font-style: italic;
}

/* ---------------------------------------------------------------
   Telemóvel e tablet estreito
   --------------------------------------------------------------- */

@media (max-width: 640px) {

	.nvs-form {
		padding: var(--nvs-f-4) var(--nvs-f-3) var(--nvs-f-3);
	}

	/* Email e telefone passam um por baixo do outro: lado a lado, num
	   telemóvel, cada caixa ficava com meia dúzia de letras de largura. */
	.nvs-form__linha--email-telefone {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.nvs-form__grupo,
	.nvs-form__linha--email-telefone .nvs-form__grupo {
		margin-bottom: var(--nvs-f-4);
	}

	.nvs-form__area {
		min-height: 180px;
	}

	.nvs-form__botao {
		width: 100%;      /* no telemóvel, o polegar agradece */
	}

	.nvs-form__navegacao {
		flex-direction: column-reverse;   /* Seguinte em cima, Anterior em baixo */
	}

	.nvs-form__passo-titulo {
		font-size: 22px;
	}

	/* Na barra de progresso, no telemóvel, ficam só os números. */
	.nvs-form__progresso li {
		font-size: 0;
	}

	.nvs-form__progresso li span {
		margin: 0;
		font-size: 12px;
	}

	.nvs-form__opcoes--dias {
		grid-template-columns: repeat(2, 1fr);
	}

	.nvs-form.nvs-form--pagina {
		padding: 40px 16px 64px;
	}

	.nvs-resumo__passo {
		padding: var(--nvs-f-2);
	}

	.nvs-cal__semana,
	.nvs-cal__dias {
		gap: 4px;
	}

	/*
	 * No telemóvel o dia deixa de ser quadrado: 44px de altura (o alvo de
	 * toque mínimo) e a largura que a coluna der. Um quadrado de 44px obrigava
	 * a largura, e a linha de sete dias saía do formulário — aconteceu.
	 */
	.nvs-cal__dia span {
		aspect-ratio: auto;
		height: 44px;
	}
}

@media (max-width: 380px) {

	/* Primeiro e último nome lado a lado deixam de caber. */
	.nvs-form__linha--metades {
		grid-template-columns: 1fr;
		gap: var(--nvs-f-2);
	}
}

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

	.nvs-form *,
	.nvs-form *::before,
	.nvs-form *::after {
		transition-duration: 0.001ms !important;
	}
}