/* =====================================================================
   CONTATO , o hub de setores e o formulário que se adapta a cada um.
   Arquivo próprio (regra da casa: CSS novo não entra em style.css nem em
   componentes.css, que são compartilhados). O enfileiramento fica com o
   dono; o trecho exato está no relatório da entrega.

   Só usa os tokens de :root do style.css (CONTRATO §7). Nenhuma cor
   literal mora aqui , literal espalhado é como dois temas divergem.

   A PARTE MAIS IMPORTANTE DESTE ARQUIVO está na seção 3: é o CSS que
   troca os campos do setor SEM JAVASCRIPT. Leia o comentário de lá antes
   de mexer na ordem das regras , a ordem é o mecanismo.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Cabeçalho da página
   ------------------------------------------------------------------ */

.ng-contato-cabecalho {
	padding-block: clamp(56px, 9vw, 104px) clamp(20px, 3vw, 36px);
	text-align: center;
}

.ng-contato-cabecalho__interno { max-width: 760px; margin-inline: auto; }
.ng-contato-cabecalho .ng-kicker { justify-content: center; }
.ng-contato-cabecalho .ng-kicker::before { display: none; }
.ng-contato-cabecalho h1 { margin-top: 14px; }

.ng-contato-cabecalho__lead {
	margin-top: 18px;
	color: var(--ng-tinta-fraca);
	font-size: clamp(1rem, .94rem + .35vw, 1.15rem);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------
   2. A LISTA DE SETORES (pedido do dono: era uma grade de 4 cartões
      grandes , "está meio feio" , e virou um campo de seleção só)

   É um <select> DE VERDADE, não uma lista falsa de <div>: dá navegação
   por teclado, leitura correta em leitor de tela ("caixa de combinação,
   Press, 3 de 4") e , o que mais importa aqui , manda o valor escolhido
   no POST sem uma linha de JavaScript.

   O `appearance:none` troca só a pintura; o comportamento continua o
   nativo do sistema (no celular, inclusive, vira a roda nativa).
   ------------------------------------------------------------------ */

.ng-contato-setores {
	position: relative; /* referência das âncoras absolutas logo abaixo */
	margin: 0 0 clamp(22px, 3vw, 32px);
	min-width: 0;
}

/* Alvo das âncoras antigas (/contato#imprensa): <option> não pode receber id,
   então quem carrega o id é este marcador. Tirá-lo do fluxo com
   "position:absolute" não é enfeite , o campo é um flex com "gap", e um filho
   de altura zero em fluxo normal ainda consumiria um gap cada (4 âncoras =
   24px de buraco em branco no meio do formulário). */
.ng-contato-setores__ancora {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	scroll-margin-top: calc(var(--ng-nav-altura) + 24px);
}

/* A seta mora no invólucro do <select> (e não no campo inteiro) porque só
   aqui a referência vertical é o próprio campo , o rótulo em cima e a linha
   de destino embaixo mudam de altura conforme o idioma. */
.ng-contato-setores__caixa {
	position: relative;
	display: block;
	width: 100%;
	max-width: 420px;
}

.ng-contato-setores__caixa::after {
	content: "";
	position: absolute;
	right: 17px;
	top: 50%;
	width: 11px;
	height: 11px;
	transform: translateY(-50%);
	color: var(--ng-tinta-fraca);
	background: currentColor;
	clip-path: polygon(0 25%, 50% 70%, 100% 25%, 100% 45%, 50% 90%, 0 45%);
	pointer-events: none;
}

.ng-contato-setores__lista {
	display: block;
	width: 100%;
	padding: 13px 44px 13px 16px;
	color: var(--ng-tinta);
	background-color: var(--ng-fundo);
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-sm);
	font-family: var(--ng-corpo);
	font-size: .96rem;
	line-height: 1.3;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--ng-transicao), box-shadow var(--ng-transicao);
}

.ng-contato-setores__lista:hover { border-color: var(--ng-destaque-2); }

.ng-contato-setores__lista:focus,
.ng-contato-setores__lista:focus-visible {
	outline: none;
	border-color: var(--ng-destaque);
	box-shadow: var(--ng-sombra-foco);
}

/* A lista ABERTA é desenhada pelo sistema, não pela página: sem estas duas
   linhas o menu sai branco no Windows dentro de um site escuro. */
.ng-contato-setores__lista option {
	color: var(--ng-tinta);
	background: var(--ng-fundo-2);
}

/* Para onde a mensagem vai ("o e-mail é roteado automaticamente" não pode
   virar caixa-preta). As quatro linhas estão no HTML e só a do setor
   escolhido aparece , mesmo mecanismo de duas camadas da seção 3. */
.ng-contato-setores__destinos { margin-top: 2px; }
.ng-contato-setores__destino { display: none; }
.ng-contato-setores__resumo,
.ng-contato-setores__para { display: block; }
.ng-contato-setores__para { margin-top: 2px; }
.ng-contato-setores__para strong { color: var(--ng-destaque); font-weight: 600; }

.ng-contato-form[data-setor-ativo="geral"]     .ng-contato-setores__destino[data-setor="geral"],
.ng-contato-form[data-setor-ativo="criadores"] .ng-contato-setores__destino[data-setor="criadores"],
.ng-contato-form[data-setor-ativo="imprensa"]  .ng-contato-setores__destino[data-setor="imprensa"],
.ng-contato-form[data-setor-ativo="pitch"]     .ng-contato-setores__destino[data-setor="pitch"] {
	display: block;
}

@supports selector(:has(*)) {
	.ng-contato-form[data-setor-ativo] .ng-contato-setores__destino[data-setor] { display: none; }

	.ng-contato-form:has(option[value="geral"]:checked)     .ng-contato-setores__destino[data-setor="geral"],
	.ng-contato-form:has(option[value="criadores"]:checked) .ng-contato-setores__destino[data-setor="criadores"],
	.ng-contato-form:has(option[value="imprensa"]:checked)  .ng-contato-setores__destino[data-setor="imprensa"],
	.ng-contato-form:has(option[value="pitch"]:checked)     .ng-contato-setores__destino[data-setor="pitch"] {
		display: block;
	}
}

/* ---------------------------------------------------------------------
   3. OS CAMPOS DO SETOR , a troca sem JavaScript

   São DUAS camadas, e a ordem entre elas é o mecanismo:

   (a) `[data-setor-ativo]` , o setor que o SERVIDOR já sabe (veio de
       ?setor= ou do POST). Funciona em qualquer navegador, sem :has() e
       sem JS: a página nasce mostrando só os campos certos.

   (b) o bloco `@supports selector(:has(*))` , a troca AO VIVO quando a
       pessoa escolhe outro item na lista, ainda sem uma linha de
       JavaScript. `option:checked` acompanha a escolha do usuário, não
       só o `selected` que veio do servidor. Vem depois e tem
       especificidade maior , (0,6,1) contra (0,4,0), contados: o :has()
       vale pelo argumento mais específico que carrega dentro ,, então
       vence (a) quando os dois discordam, que é exatamente o caso de
       "escolheu outro setor e o atributo do servidor ficou velho".

   Navegador sem :has() e sem JS fica na camada (a): o formulário segue
   inteiro e utilizável (todo campo de setor é opcional), só não troca
   sozinho , e o JS da seção final cobre esse caso atualizando (a).
   ------------------------------------------------------------------ */

.ng-contato-form[data-setor-ativo] .ng-contato-extra { display: none; }

.ng-contato-form[data-setor-ativo="geral"]     .ng-contato-extra[data-setor="geral"],
.ng-contato-form[data-setor-ativo="criadores"] .ng-contato-extra[data-setor="criadores"],
.ng-contato-form[data-setor-ativo="imprensa"]  .ng-contato-extra[data-setor="imprensa"],
.ng-contato-form[data-setor-ativo="pitch"]     .ng-contato-extra[data-setor="pitch"] {
	display: grid;
}

@supports selector(:has(*)) {
	.ng-contato-form[data-setor-ativo] .ng-contato-extra[data-setor] { display: none; }

	.ng-contato-form[data-setor-ativo]:has(option[value="geral"]:checked)     .ng-contato-extra[data-setor="geral"],
	.ng-contato-form[data-setor-ativo]:has(option[value="criadores"]:checked) .ng-contato-extra[data-setor="criadores"],
	.ng-contato-form[data-setor-ativo]:has(option[value="imprensa"]:checked)  .ng-contato-extra[data-setor="imprensa"],
	.ng-contato-form[data-setor-ativo]:has(option[value="pitch"]:checked)     .ng-contato-extra[data-setor="pitch"] {
		display: grid;
	}
}

/* ---------------------------------------------------------------------
   4. O formulário
   ------------------------------------------------------------------ */

.ng-contato-bloco {
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio-lg);
	padding: clamp(22px, 4vw, 40px);
}

.ng-contato-form { display: block; }

.ng-contato-grade,
.ng-contato-extra {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.ng-contato-extra { margin-top: 16px; }

@media (min-width: 720px) {
	.ng-contato-grade,
	.ng-contato-extra { grid-template-columns: 1fr 1fr; }
}

/* Respiro entre os blocos do formulário. Vale mesmo com os campos de setor
   escondidos: o seletor `+` olha a ordem no HTML, não o display. */
.ng-contato-grade + .ng-contato-grade,
.ng-contato-extra + .ng-contato-grade { margin-top: 16px; }

.ng-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ng-campo--largo { grid-column: 1 / -1; }

/* O grupo de caixas de marcar é um <fieldset> (é o elemento certo para um
   conjunto de opções com um rótulo só). Precisa do reset e do min-width:0,
   senão o Chromium ignora o flex/grid de dentro dele. */
fieldset.ng-campo { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.ng-campo > legend { padding: 0; float: none; }

.ng-campo > label,
.ng-campo__rotulo {
	font-size: .82rem;
	font-weight: 600;
	color: var(--ng-tinta);
	letter-spacing: .02em;
}

.ng-campo__obrigatorio { color: var(--ng-alerta); }

.ng-campo__dica {
	margin: 0;
	color: var(--ng-tinta-fraca);
	font-size: .78rem;
	line-height: 1.45;
}

.ng-campo input[type="text"],
.ng-campo input[type="email"],
.ng-campo textarea {
	width: 100%;
	padding: 13px 16px;
	color: var(--ng-tinta);
	background: var(--ng-fundo);
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-sm);
	font-family: var(--ng-corpo);
	font-size: .96rem;
	transition: border-color var(--ng-transicao), box-shadow var(--ng-transicao);
}

.ng-campo input::placeholder,
.ng-campo textarea::placeholder { color: var(--ng-tinta-fraca); }

.ng-campo input:focus,
.ng-campo textarea:focus {
	outline: none;
	border-color: var(--ng-destaque);
	box-shadow: var(--ng-sombra-foco);
}

.ng-campo textarea { resize: vertical; min-height: 150px; }

/* Campo reprovado: borda vermelha E texto de erro. Cor sozinha não
   comunica nada para quem não a enxerga (WCAG 1.4.1). */
.ng-campo input[aria-invalid="true"],
.ng-campo textarea[aria-invalid="true"] { border-color: var(--ng-alerta); }

.ng-campo__erro {
	margin: 0;
	color: var(--ng-alerta);
	font-size: .82rem;
	font-weight: 500;
}

/* Caixas de marcar (plataformas pretendidas) */
.ng-campo__caixas { display: flex; flex-wrap: wrap; gap: 10px; }

.ng-caixa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	background: var(--ng-fundo);
	border: 1px solid var(--ng-borda-forte);
	border-radius: var(--ng-raio-pill);
	color: var(--ng-tinta);
	font-size: .88rem;
	cursor: pointer;
	transition: border-color var(--ng-transicao), color var(--ng-transicao);
}

.ng-caixa:hover { border-color: var(--ng-destaque-2); }

.ng-caixa input {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 2px solid var(--ng-borda-forte);
	border-radius: 4px;
	cursor: pointer;
	transition: background var(--ng-transicao), border-color var(--ng-transicao);
}

.ng-caixa input:checked { background: var(--ng-destaque); border-color: var(--ng-destaque); }
.ng-caixa input:focus-visible { outline: none; box-shadow: var(--ng-sombra-foco); }

@supports selector(:has(*)) {
	.ng-caixa:has(input:checked) { border-color: var(--ng-destaque); color: var(--ng-branco); }
}

/* Honeypot: fora da tela, nunca display:none , campo com display:none é
   ignorado por parte dos robôs, e é justamente ele que a gente quer que
   seja preenchido. */
.ng-contato-mel {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ng-contato-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--ng-borda);
}

.ng-contato-rodape__nota {
	flex: 1 1 240px;
	margin: 0;
	color: var(--ng-tinta-fraca);
	font-size: .82rem;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
   5. Avisos (sucesso e erro)
   ------------------------------------------------------------------ */

.ng-contato-aviso {
	display: flex;
	gap: 12px;
	padding: 16px 18px;
	margin-bottom: 22px;
	border: 1px solid var(--ng-borda-forte);
	border-left-width: 4px;
	border-radius: var(--ng-raio-sm);
	background: var(--ng-fundo);
	scroll-margin-top: calc(var(--ng-nav-altura) + 20px);
}

.ng-contato-aviso svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.ng-contato-aviso p { margin: 0; line-height: 1.6; }
.ng-contato-aviso--ok { border-left-color: var(--ng-ok); }
.ng-contato-aviso--ok svg { color: var(--ng-ok); }
.ng-contato-aviso--erro { border-left-color: var(--ng-alerta); }
.ng-contato-aviso--erro svg { color: var(--ng-alerta); }

/* O seletor traz o `p` de propósito: `.ng-contato-aviso p { margin:0 }` acima é
   mais específico que uma classe sozinha, e sem isto a margem não sairia. É a
   alternativa ao !important, que numa folha nova não tem por que existir. */
.ng-contato-aviso p.ng-contato-aviso__titulo {
	font-family: var(--ng-titulo);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--ng-branco);
	margin-bottom: 4px;
}

.ng-contato-aviso__lista { margin: 8px 0 0; padding-left: 18px; }
.ng-contato-aviso__lista li { margin-top: 2px; }
.ng-contato-aviso__lista a { color: var(--ng-alerta); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------
   6. Coluna lateral , escrever direto, sem formulário
   ------------------------------------------------------------------ */

.ng-contato-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 3.5vw, 40px);
	align-items: start;
}

@media (min-width: 1000px) {
	.ng-contato-layout { grid-template-columns: minmax(0, 1fr) 300px; }
	.ng-contato-direto { position: sticky; top: calc(var(--ng-nav-altura) + 24px); }
}

.ng-contato-direto__titulo {
	font-family: var(--ng-titulo);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ng-branco);
	margin: 0 0 6px;
}

.ng-contato-direto__texto { margin: 0 0 16px; color: var(--ng-tinta-fraca); font-size: .87rem; line-height: 1.6; }
.ng-contato-direto__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.ng-contato-direto__item {
	padding: 12px 14px;
	background: var(--ng-fundo-2);
	border: 1px solid var(--ng-borda);
	border-radius: var(--ng-raio-sm);
}

.ng-contato-direto__setor { display: block; font-size: .76rem; color: var(--ng-tinta-fraca); letter-spacing: .04em; text-transform: uppercase; }
.ng-contato-direto__email { display: inline-block; margin-top: 4px; color: var(--ng-destaque); font-size: .9rem; word-break: break-word; }
.ng-contato-direto__email:hover { color: var(--ng-destaque-2); }

/* ---------------------------------------------------------------------
   7. Movimento reduzido , respeita a preferência do sistema
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	/* Quem tem transição nesta folha: a lista de setores (seção 2), a caixa de
	   consentimento e os campos. Os dois cartões de setor que moravam aqui
	   saíram junto com o desenho antigo , e, enquanto só o nome deles ficou, a
	   LISTA que os substituiu seguia animando para quem pede movimento
	   reduzido. Seletor morto não dá erro: some do CSS e leva junto a regra
	   que ele deveria estar aplicando. */
	.ng-contato-setores__lista,
	.ng-caixa,
	.ng-caixa input,
	.ng-campo input,
	.ng-campo textarea { transition: none; }
}