/* ==========================================================================
   CABECALHO — barra flutuante (pilula) sobre o hero
   Estados:
   .cabecalho-site            -> topo da pagina, fundo translucido
   .cabecalho-site.esta-rolado -> apos rolar, fundo escuro e mais compacto
   .cabecalho-site.menu-aberto -> menu mobile visivel
   ========================================================================== */

/* --------------------------------------------------------------------------
   Calibragem do vidro
   Ajuste estes tres valores para achar o ponto exato (da pra testar ao vivo
   no DevTools, em .cabecalho-site__barra):

   --vidro-branco   -> quanto de leitoso. Mais alto = mais opaco.
   --vidro-desfoque -> quanto o fundo e borrado. Valores altos apagam o
                       desenho do banner e a barra parece solida.
   --vidro-saturacao-> realce de cor do fundo. Acima de ~130% comeca a
                       clarear demais as areas ja claras.
   -------------------------------------------------------------------------- */

.cabecalho-site {
	--vidro-branco: 0.14;
	--vidro-desfoque: 12px;
	--vidro-saturacao: 120%;

	/* --------------------------------------------------------------------
	   Medidas da barra, tiradas do Figma (frame de 1456px):
	   altura 59 · logo 86.9x43 · icone 32x31
	   borda esquerda -> logo: 50 · icone -> borda direita: 62
	   As folgas verticais (8 no logo, 14 no icone) saem da conta:
	   43 + 8 + 8 = 59 e 31 + 14 + 14 = 59.
	   -------------------------------------------------------------------- */
	--barra-altura-logo: clamp(1.75rem, 2.95vw, 2.6875rem); /* 28 a 43px */
	--barra-respiro-vertical: clamp(0.375rem, 0.55vw, 0.5rem); /* ate 8px */
	--barra-respiro-direito: clamp(1rem, 4.26vw, 3.875rem); /* ate 62px */

	/* --------------------------------------------------------------------
	   Espacamentos do menu, medidos no Figma:
	   logo -> primeiro item ......... 112
	   entre itens do mesmo grupo .... 44 a 51
	   entre grupos .................. 157 a 162
	   -------------------------------------------------------------------- */
	--menu-recuo-logo: clamp(1rem, 5.5vw, 7rem); /* ate 112px */
	--menu-espaco-item: clamp(1rem, 3.3vw, 3rem); /* ate 48px */
	--menu-espaco-grupo: clamp(1.5rem, 8.5vw, 10rem); /* ate 160px */
	--barra-espaco-icones: clamp(1.25rem, 4.2vw, 3.8125rem); /* ate 61px */
}

/* Distancia do topo medida no Figma: Y=34 num frame de 1456px */
.cabecalho-site {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-cabecalho);
	padding-block: clamp(1rem, 2.33vw, 2.125rem);
	transition: padding-block var(--transicao-media);
}

.cabecalho-site.esta-rolado {
	padding-block: 0.625rem;
}

/* A barra define a margem lateral do site: no Figma ela comeca em X=50
   num frame de 1456px, exatamente o valor de --respiro-lateral. */
.cabecalho-site__container {
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	padding-inline: var(--respiro-lateral);
}

.cabecalho-site__barra {
	position: relative;
	display: flex;
	align-items: center;
	/* Sem gap: cada bloco declara a propria margem, para os espacamentos
	   baterem com as medidas do layout sem somas escondidas. */
	gap: 0;
	/* O logotipo (43px) e o elemento mais alto e define a altura da barra */
	padding:
		var(--barra-respiro-vertical)
		var(--barra-respiro-direito)
		var(--barra-respiro-vertical)
		var(--respiro-lateral);
	border-radius: var(--raio-pilula);
	/* O efeito "Vidro" do Figma refrata o fundo mantendo-o legivel. Um
	   backdrop-filter com blur alto faz o oposto: apaga o desenho e a barra
	   vira uma mancha. Por isso o desfoque aqui e baixo. */
	background-color: rgba(255, 255, 255, var(--vidro-branco));
	backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
	-webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-saturacao));
	color: var(--cor-texto-invertido);
	/* Espessura do vidro: luz no topo, sombra sutil na base */
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.25),
		inset 0 -1px 1px rgba(0, 0, 0, 0.05);
	transition:
		background-color var(--transicao-media),
		box-shadow var(--transicao-media);
}

/* --------------------------------------------------------------------------
   Borda com brilho (edge highlight)
   A borda nao tem opacidade uniforme: acende nas extremidades e quase some
   no meio, como o reflexo numa peca de vidro.

   border-image nao respeita border-radius, entao pintamos um retangulo
   arredondado com o gradiente e removemos o miolo por mascara — sobra
   exatamente 1px de contorno.
   -------------------------------------------------------------------------- */

.cabecalho-site__barra::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	padding: 1px; /* espessura da borda */
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.35) 12%,
		rgba(255, 255, 255, 0.08) 34%,
		rgba(255, 255, 255, 0.05) 62%,
		rgba(255, 255, 255, 0.42) 86%,
		rgba(255, 255, 255, 0.9) 100%
	);
	/* content-box = area interna; a composicao xor remove essa area,
	   deixando visivel so o anel do padding */
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	transition: opacity var(--transicao-media);
}

/* Os filhos precisam ficar acima do anel */
.cabecalho-site__barra > * {
	position: relative;
	z-index: 2;
}

.cabecalho-site.esta-rolado .cabecalho-site__barra {
	background-color: rgba(4, 24, 28, 0.55);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.14),
		0 12px 32px rgba(0, 0, 0, 0.28);
}

/* Com fundo escuro o reflexo perde forca: reduzimos o brilho */
.cabecalho-site.esta-rolado .cabecalho-site__barra::before {
	opacity: 0.45;
}

/* Paginas internas nao tem hero: a barra precisa de contraste desde o inicio */
.pagina-sem-hero .cabecalho-site__barra {
	background-color: rgba(4, 24, 28, 0.78);
}

.pagina-sem-hero .cabecalho-site__barra::before {
	opacity: 0.45;
}

/* Navegadores sem suporte a mascara: borda simples, sem quebrar o layout */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
	.cabecalho-site__barra {
		border: 1px solid rgba(255, 255, 255, 0.28);
	}

	.cabecalho-site__barra::before {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Logotipo
   -------------------------------------------------------------------------- */

.cabecalho-site__marca {
	flex-shrink: 0;
	line-height: 0;
}

/* 43px de altura no layout. A largura acompanha sozinha: o arquivo tem
   174x86 e o Figma 86.9x43 — mesma proporcao (2.02). */
.cabecalho-site__logo,
.cabecalho-site__marca .custom-logo {
	width: auto;
	height: var(--barra-altura-logo);
	transition: opacity var(--transicao-rapida);
}

.cabecalho-site__marca a:hover .cabecalho-site__logo,
.cabecalho-site__marca a:hover .custom-logo {
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Menu principal
   -------------------------------------------------------------------------- */

/* No layout os itens nao sao distribuidos por igual: os tres institucionais
   ficam agrupados e "Area do cliente" e "Contato" aparecem destacados, bem
   afastados. O agrupamento vem de inc/navegacao.php, que marca o primeiro
   item de cada grupo com --novo-grupo.

   O nav ocupa apenas a largura do conteudo e o margin-right: auto joga a
   sobra para o lado dos icones — assim o ultimo item nunca encosta neles,
   e o espaco excedente e o primeiro a sumir quando a tela encolhe. */
.navegacao-principal {
	flex: 0 1 auto;
	min-width: 0;
	margin-left: var(--menu-recuo-logo);
	margin-right: auto;
}

.menu-principal {
	display: flex;
	align-items: center;
	gap: var(--menu-espaco-item);
}

/* Abre o respiro maior na troca de grupo. Desconta o gap que o flex ja
   aplicou, para o espaco final ser exatamente --menu-espaco-grupo. */
.menu-principal__item--novo-grupo {
	margin-left: calc(var(--menu-espaco-grupo) - var(--menu-espaco-item));
}

.menu-principal__link,
.menu-principal a {
	position: relative;
	display: inline-block;
	/* Alem do respiro visual, aumenta a area clicavel do link */
	padding-block: 0.625rem;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--fonte-texto);
	font-size: clamp(0.6875rem, 0.75vw, 0.8125rem);
	font-weight: var(--peso-semibold);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--transicao-rapida);
}

/* Sublinhado que cresce do centro no hover */
.menu-principal a::after {
	content: "";
	position: absolute;
	left: 50%;
	/* Acompanha o padding para nao descolar do texto */
	bottom: 0.375rem;
	width: 0;
	height: 1px;
	background-color: var(--cor-destaque);
	transform: translateX(-50%);
	transition: width var(--transicao-media);
}

.menu-principal a:hover,
.menu-principal a:focus-visible,
.menu-principal .current-menu-item > a,
.menu-principal .current_page_item > a {
	color: var(--cor-destaque);
}

.menu-principal a:hover::after,
.menu-principal a:focus-visible::after,
.menu-principal .current-menu-item > a::after {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Icones sociais do cabecalho
   -------------------------------------------------------------------------- */

/* Distancia minima ate o ultimo item do menu: 61px no layout.
   Some ao espaco que o margin-right: auto do nav ja produz. */
.redes-sociais--cabecalho {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	margin-left: var(--barra-espaco-icones);
}

.redes-sociais--cabecalho .redes-sociais__link {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--cor-branco);
	transition:
		background-color var(--transicao-rapida),
		transform var(--transicao-rapida);
}

.redes-sociais--cabecalho .redes-sociais__link:hover,
.redes-sociais--cabecalho .redes-sociais__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.45);
	transform: translateY(-2px);
}

.redes-sociais--cabecalho .icone {
	width: 1rem;
	height: 1rem;
}

/* --------------------------------------------------------------------------
   Botao hamburguer (somente mobile)
   -------------------------------------------------------------------------- */

.botao-menu {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0.5rem;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	flex-shrink: 0;
}

.botao-menu__traco {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: var(--cor-branco);
	transition:
		transform var(--transicao-media),
		opacity var(--transicao-rapida);
}

.cabecalho-site.menu-aberto .botao-menu__traco:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.cabecalho-site.menu-aberto .botao-menu__traco:nth-child(2) {
	opacity: 0;
}

.cabecalho-site.menu-aberto .botao-menu__traco:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1100px) {
	.cabecalho-site {
		/* Espacos comprimidos: abaixo desta largura os valores do layout
		   nao cabem sem encostar o menu nos icones. */
		--menu-recuo-logo: 1.5rem;
		--menu-espaco-item: 1.125rem;
		--menu-espaco-grupo: 2.5rem;
		--barra-espaco-icones: 1.5rem;
	}

	.cabecalho-site__barra {
		padding-left: 1.125rem;
	}
}

@media (max-width: 900px) {
	.cabecalho-site {
		/* Barra bem mais baixa que no desktop: 37px contra 59px */
		--barra-altura-logo: 1.375rem;
		--barra-respiro-vertical: 0.4375rem;

		/* No celular o cabecalho nao acompanha a rolagem: fica ancorado no
		   topo da pagina e sai da tela junto com o conteudo. Em tela pequena
		   uma barra fixa come area util de leitura. */
		position: absolute;
		padding-block: 0.875rem;
	}

	/* Sem rolagem acompanhando, o estado "rolado" perde sentido */
	.cabecalho-site.esta-rolado {
		padding-block: 0.875rem;
	}

	.cabecalho-site.esta-rolado .cabecalho-site__barra {
		background-color: rgba(255, 255, 255, var(--vidro-branco));
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
	}

	.cabecalho-site.esta-rolado .cabecalho-site__barra::before {
		opacity: 1;
	}

	.cabecalho-site__container {
		padding-inline: 1.25rem;
	}

	.cabecalho-site__barra {
		justify-content: space-between;
		padding: var(--barra-respiro-vertical) 1rem;
	}

	/* Sem circulo de fundo no celular, so os tracos */
	.botao-menu {
		display: flex;
		width: 1.5rem;
		height: 1.5rem;
		padding: 0;
		gap: 4px;
		background-color: transparent;
		margin-left: 0.5rem;
	}

	.botao-menu__traco {
		height: 1.5px;
	}

	.cabecalho-site.menu-aberto .botao-menu__traco:nth-child(1) {
		transform: translateY(5.5px) rotate(45deg);
	}

	.cabecalho-site.menu-aberto .botao-menu__traco:nth-child(3) {
		transform: translateY(-5.5px) rotate(-45deg);
	}

	/* Com o menu virando painel, a barra so tem logo, icones e o botao:
	   os icones voltam a ser empurrados para a direita. */
	.redes-sociais--cabecalho {
		margin-left: auto;
	}

	/* No painel vertical o agrupamento nao faz sentido: todos os itens
	   ficam empilhados com o mesmo respiro. */
	.menu-principal__item--novo-grupo {
		margin-left: 0;
	}

	/* O menu vira um painel abaixo da barra */
	.navegacao-principal {
		flex: 0 0 auto;
		margin-left: 0;
		position: absolute;
		top: calc(100% + 0.75rem);
		left: var(--respiro-lateral);
		right: var(--respiro-lateral);
		margin-inline: 0;
		padding: 1.25rem 1.5rem;
		border: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: var(--raio-padrao);
		/* Medidas do Figma: preenchimento FFFFFF a 20%, raio 16, efeito
		   Vidro. O desfoque e proprio do painel e bem maior que o da barra:
		   ali o banner precisa continuar legivel atras, aqui o conteudo da
		   pagina precisa se dissolver para o menu se ler. */
		background-color: rgba(255, 255, 255, 0.2);
		/* Camada escura por cima do branco: sobre as areas claras do banner
		   os 20% do layout deixavam o texto branco quase ilegivel. */
		background-image: linear-gradient(
			180deg,
			rgba(0, 22, 18, 0.3) 0%,
			rgba(0, 22, 18, 0.16) 100%
		);
		backdrop-filter: blur(90px) saturate(150%);
		-webkit-backdrop-filter: blur(90px) saturate(150%);
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition:
			opacity var(--transicao-media),
			transform var(--transicao-media),
			visibility var(--transicao-media);
	}

	.cabecalho-site.menu-aberto .navegacao-principal {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* No layout mobile os itens ficam alinhados a direita */
	.menu-principal {
		flex-direction: column;
		align-items: flex-end;
		gap: 0.875rem;
		text-align: right;
	}

	.menu-principal a {
		font-size: 0.8125rem;
		letter-spacing: 0.02em;
		text-transform: none;
	}

	/* O sublinhado de hover nao cabe no painel vertical */
	.menu-principal a::after {
		display: none;
	}

	/* "Area do cliente" aparece destacada no layout */
	.menu-principal__item--novo-grupo a {
		color: var(--cor-branco);
		font-weight: var(--peso-semibold);
	}

	.redes-sociais--cabecalho {
		margin-left: auto;
	}
}

@media (max-width: 600px) {
	/* Em telas pequenas, contato fica so no rodape para nao apertar a barra */
	.redes-sociais--cabecalho {
		display: none;
	}
}