/*********************************************
** Header
**
** Ele é fixo e vive por cima do conteúdo. Como quase toda página do tema
** abre com um bloco escuro (o .surfaceInk dos templates), o header nasce
** transparente dentro desse bloco - sem barra, sem borda, só o conteúdo
** dele em cima do banner - e vai se montando conforme a página rola.
**
** São dois estados, ligados pelo scripts.js e independentes um do outro:
**
**   .sobreEscuro  -> o que está atrás dele é o bloco escuro (texto claro)
**   .compacto     -> a página saiu do topo, então a pílula de vidro aparece
**
** É por isso que a pílula nasce escura enquanto o banner ainda está atrás
** dela e vira clara quando o banner termina: a cor vem do .sobreEscuro e a
** presença vem do .compacto.
**
** Quem reserva o espaço do header nas páginas de bloco escuro é o padding
** de cima do próprio bloco (via --topoBlocoInicial, no geral.css). Nas
** outras - hoje só a 404 - quem abre o espaço é o body, aqui embaixo.
*********************************************/

body {
	padding-top: var(--alturaHeader);
}

/* Nessas o bloco escuro passa por baixo do header, então o body não
   reserva nada. */

body.headerSobreposto {
	padding-top: 0;
}

/* Enquanto a gaveta do menu mobile está aberta a página não rola atrás dela */

body.menuAberto {
	overflow: hidden;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	padding-top: 0;
	border-bottom: solid 1px rgba(63, 34, 114, 0.1);
	transition: padding-top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s linear;
}

/* Em cima do bloco escuro a linha é clara, senão ela some no fundo */

#header.sobreEscuro {
	border-bottom-color: rgba(250, 249, 253, 0.16);
}

/* Compacto: a barra desgruda do topo e vira uma pílula flutuante, e aí a
   linha sai - a pílula já tem a borda dela, e um risco atravessando a tela
   por trás de uma peça que flutua não faria sentido */

#header.compacto {
	padding-top: 10px;
	border-bottom-color: transparent;
}

#header .barraHeader {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--alturaHeader);
	padding: 0;
	transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Compacto o conteúdo entra um pouco: junto com o transbordo da pílula
   (o -14px do .vidroHeader), dá 28px entre o logo e a borda arredondada
   dela - com menos que isso o logo fica encostado na curva.

   Fora do estado compacto o padding volta a zero, e aí o logo do header
   fica alinhado com o texto do banner que está embaixo dele. */

#header.compacto .barraHeader {
	height: var(--alturaHeaderCompacto);
	padding: 0 14px;
}

/* O logo, o menu e as ações ficam por cima da pílula */

#header .barraHeader > .logo,
#header .barraHeader > .menuPrincipal,
#header .barraHeader > .boxAcoes,
#header .barraHeader > #botaoMenuMobile {
	position: relative;
	z-index: 1;
}

/*********************************************
** Pílula de Vidro (o fundo da barra)
**
** Ela é uma camada à parte, e não o fundo do .barraHeader, por dois
** motivos: o backdrop-filter de um elemento vira "tela" para os filhos
** fixed dele (a gaveta do menu mobile ficaria presa dentro da barra), e
** assim dá para o fundo transbordar um pouco para os lados sem empurrar
** o conteúdo para dentro - com a pílula um pouco maior que a barra, o
** logo do header continua alinhado com o texto do banner que está embaixo
** dele, e mesmo assim sobra respiro entre ele e a borda da pílula.
*********************************************/

#header .vidroHeader {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -14px;
	right: -14px;
	z-index: 0;
	border-radius: 9999px;
	border: solid 1px transparent;
	opacity: 0;
	pointer-events: none;
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	backdrop-filter: blur(20px) saturate(1.4);
	transition: opacity 0.35s linear, background-color 0.4s linear,
		border-color 0.4s linear, box-shadow 0.4s linear;
}

/* Pílula clara (o conteúdo atrás dela é claro) */

#header .vidroHeader {
	background: rgba(255, 255, 255, 0.75);
	border-color: rgba(63, 34, 114, 0.09);
	box-shadow: 0 14px 34px -22px rgba(63, 34, 114, 0.65);
}

/* Pílula escura (ainda em cima do bloco escuro) */

#header.sobreEscuro .vidroHeader {
	background: rgba(37, 11, 76, 0.5);
	border-color: rgba(250, 249, 253, 0.14);
	box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.9);
}

/* Fora do estado compacto a pílula fica em opacity 0, e aí o navegador não
   desenha nem o desfoque dela: é isso que deixa o header realmente limpo
   em cima do banner */

#header.compacto .vidroHeader {
	opacity: 1;
}

/*********************************************
** Logo (permuta.aí)
*********************************************/

#header .logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

#header .logo .textoLogo {
	font-size: 24px;
	line-height: 30px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--primary);
	transition: color 0.4s linear;
}

/* O ".aí" sai no gradiente da marca, o mesmo do .textoGradiente */

#header .logo .textoLogo span {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: transparent;
	background: var(--gradienteAccent);
	-webkit-background-clip: text;
	background-clip: text;
}

#header.sobreEscuro .logo .textoLogo {
	color: var(--primary-foreground);
}

/*********************************************
** Menu Principal
*********************************************/

#header .menuPrincipal {
	position: relative;
	display: flex;
	align-items: center;
}

#header .menuPrincipal .topoMenuMobile,
#header .menuPrincipal .acoesMobile {
	display: none;
}

#header .menuPrincipal ul.menu {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0;
	margin: 0;
}

#header .menuPrincipal ul.menu li {
	list-style: none;
	position: relative;
}

/* O z-index deixa o link na frente da pílula que desliza atrás dele */

#header .menuPrincipal ul.menu li a {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: 9999px;
	padding: 9px 15px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--muted-foreground);
	transition: color 0.3s linear;
}

#header .menuPrincipal ul.menu li a:hover,
#header .menuPrincipal ul.menu li.current-menu-item > a,
#header .menuPrincipal ul.menu li.current-menu-ancestor > a {
	color: var(--primary);
}

#header .menuPrincipal ul.menu li.current-menu-item > a,
#header .menuPrincipal ul.menu li.current-menu-ancestor > a {
	font-weight: 600;
}

/* Sobre o bloco escuro o menu inteiro clareia */

#header.sobreEscuro .menuPrincipal ul.menu li a {
	color: rgba(250, 249, 253, 0.72);
}

#header.sobreEscuro .menuPrincipal ul.menu li a:hover,
#header.sobreEscuro .menuPrincipal ul.menu li.current-menu-item > a,
#header.sobreEscuro .menuPrincipal ul.menu li.current-menu-ancestor > a {
	color: var(--primary-foreground);
}

/*********************************************
** Indicador do Menu (a pílula que desliza entre os itens)
**
** Ela fica atrás do item onde o mouse está e volta para a página aberta
** quando o mouse sai do menu. O JS só mede e move: a suavidade toda vem
** das transitions daqui.
**
** Os links de âncora são limpos do "item ativo" lá no PHP
** (limpaMenuAtivoAncora), então em cada página só um item tem para onde a
** pílula voltar.
*********************************************/

#header .indicadorMenu {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 0;
	width: 0;
	height: 38px;
	border-radius: 9999px;
	background: var(--secondary);
	opacity: 0;
	pointer-events: none;
	transform: translate(0, -50%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.25s linear,
		background-color 0.4s linear;
}

#header.sobreEscuro .indicadorMenu {
	background: rgba(250, 249, 253, 0.14);
}

#header .indicadorMenu.visivel {
	opacity: 1;
}

/* Usada pelo JS no primeiro posicionamento e no resize, para a pílula
   aparecer já no lugar em vez de deslizar da esquerda */

#header .indicadorMenu.semTransicao {
	transition: none;
}


/*********************************************
** Submenu (o dropdown das categorias)
**
** No desktop o submenu é um cartão que abre embaixo do item. Ele é sempre
** claro, inclusive com o header no estado escuro: é uma caixa que abre por
** cima da página, e não um pedaço da barra.
**
** A abertura tem duas camadas de movimento, e é daí que vem o ar de coisa
** montada: primeiro o cartão sobe e cresce um tiquinho, e só então os itens
** entram em escada por dentro dele. Fechando, a escada não vale - os atrasos
** moram só nas regras de aberto -, então tudo some junto e a saída não fica
** arrastada.
**
** Quem abre é o :hover e o :focus-within, para o dropdown também funcionar
** para quem chega pelo Tab. O Esc fecha (ver scripts.js, que põe o
** .semSubmenu aqui embaixo).
**
** Tudo isto é só de 1024px para cima: abaixo disso o menu vira gaveta e o
** submenu vira acordeão, lá no fim do arquivo.
*********************************************/

@media only screen and (min-width: 1024px) {

	/* A setinha ao lado do item que tem submenu */

	#header .menuPrincipal ul.menu .setaSubmenu {
		position: relative;
		top: -1px;
		display: inline-block;
		margin-left: 6px;
		font-size: 9px;
		vertical-align: middle;
		opacity: 0.65;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s linear;
	}

	#header .menuPrincipal ul.menu li:hover > a .setaSubmenu,
	#header .menuPrincipal ul.menu li:focus-within > a .setaSubmenu {
		opacity: 1;
		transform: rotate(180deg);
	}

	/* O cartão */

	#header .menuPrincipal ul.menu ul {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: 252px;
		background: rgba(255, 255, 255, 0.96);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border: solid 1px rgba(63, 34, 114, 0.08);
		border-radius: var(--radius);
		box-shadow: 0 24px 50px -30px rgba(63, 34, 114, 0.7);
		padding: 8px;
		margin: 14px 0 0 0;
		transform: translateX(-50%) translateY(12px) scale(0.97);
		transform-origin: 50% 0;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.26s ease-out,
			transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0.34s;
	}

	/* A ponte que cobre os 14px entre o item e o cartão. Sem ela o ponteiro
	   "cai" no vão no meio do caminho, o :hover do item acaba e o cartão
	   fecha na cara de quem estava indo usá-lo. */

	#header .menuPrincipal ul.menu ul::before {
		content: "";
		position: absolute;
		top: -14px;
		left: 0;
		right: 0;
		height: 14px;
	}

	#header .menuPrincipal ul.menu li:hover > ul,
	#header .menuPrincipal ul.menu li:focus-within > ul {
		visibility: visible;
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}

	/* Os itens de dentro, em escada */

	#header .menuPrincipal ul.menu ul li {
		width: 100%;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.24s linear, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
	}

	#header .menuPrincipal ul.menu li:hover > ul > li,
	#header .menuPrincipal ul.menu li:focus-within > ul > li {
		opacity: 1;
		transform: translateY(0);
	}

	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(1),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(1) { transition-delay: 0.06s; }
	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(2),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(2) { transition-delay: 0.09s; }
	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(3),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(3) { transition-delay: 0.12s; }
	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(4),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(4) { transition-delay: 0.15s; }
	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(5),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(5) { transition-delay: 0.18s; }
	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(6),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(6) { transition-delay: 0.21s; }
	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(7),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(7) { transition-delay: 0.24s; }
	#header .menuPrincipal ul.menu li:hover > ul > li:nth-child(n + 8),
	#header .menuPrincipal ul.menu li:focus-within > ul > li:nth-child(n + 8) { transition-delay: 0.27s; }

	#header .menuPrincipal ul.menu ul li a,
	#header.sobreEscuro .menuPrincipal ul.menu ul li a {
		display: block;
		width: 100%;
		border-radius: 10px;
		padding: 9px 14px;
		font-size: 13px;
		font-weight: 500;
		color: var(--muted-foreground);
		transition: color 0.2s linear, background-color 0.2s linear,
			transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
	}

	#header .menuPrincipal ul.menu ul li a:hover,
	#header.sobreEscuro .menuPrincipal ul.menu ul li a:hover {
		background: var(--secondary);
		color: var(--primary);
		transform: translateX(3px);
	}

	/* A categoria que está aberta fica marcada dentro da lista */

	#header .menuPrincipal ul.menu ul li.current-menu-item > a,
	#header.sobreEscuro .menuPrincipal ul.menu ul li.current-menu-item > a {
		background: var(--secondary);
		color: var(--accentTexto);
		font-weight: 600;
	}

	/* O Esc põe esta classe no item (scripts.js) para o cartão fechar mesmo
	   com o foco de volta no link de cima, que sozinho já segura o
	   :focus-within. Ela sai no primeiro mouseleave ou focusout. */

	#header .menuPrincipal ul.menu li.semSubmenu > ul {
		visibility: hidden;
		opacity: 0;
		transform: translateX(-50%) translateY(12px) scale(0.97);
	}

	#header .menuPrincipal ul.menu li.semSubmenu > ul > li {
		opacity: 0;
		transform: translateY(-6px);
		transition-delay: 0s;
	}

	#header .menuPrincipal ul.menu li.semSubmenu > a .setaSubmenu {
		transform: none;
	}

}

/* O botão do acordeão só existe dentro da gaveta do celular */

#header .menuPrincipal .abreSubmenu {
	display: none;
}

/*********************************************
** Ações (Entrar / Cadastre-se)
*********************************************/

#header .boxAcoes {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* O Entrar é um botão vazado de verdade, e não um link solto: ele é a outra
   metade da dupla de ações, e sem contorno sumia ao lado do CTA. A altura
   fecha com a do CTA (10 + 20 + 10 + 1px de borda dos dois lados = 42px). */

#header .boxAcoes .linkEntrar,
#header .menuPrincipal .acoesMobile .linkEntrar {
	border: solid 1px rgba(63, 34, 114, 0.14);
	border-radius: 9999px;
	background: var(--secondary);
	padding: 10px 18px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--primary);
	transition: background-color 0.25s linear, border-color 0.25s linear,
		color 0.25s linear, transform 0.2s linear;
}

/* No hover ele inverte e fica sólido - é o mesmo scale do .botao, para os
   dois responderem igual quando o mouse passa */

#header .boxAcoes .linkEntrar:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
	transform: scale(1.03);
}

#header.sobreEscuro .boxAcoes .linkEntrar {
	background: rgba(250, 249, 253, 0.12);
	border-color: rgba(250, 249, 253, 0.3);
	color: var(--primary-foreground);
}

#header.sobreEscuro .boxAcoes .linkEntrar:hover {
	background: rgba(250, 249, 253, 0.22);
	border-color: rgba(250, 249, 253, 0.5);
	color: var(--primary-foreground);
}

/* O botão do header é menor que o padrão e usa o gradiente da marca */

/* O gradiente aqui é o --gradienteAccentAA, e não o --gradienteAccent: o
   original tem 2,7:1 contra o texto claro do botão na ponta laranja, o que
   reprova no contraste. A sombra continua com a cor vibrante - ela é só luz
   embaixo do botão, não carrega texto. */

#header .botao.accent {
	position: relative;
	overflow: hidden;
	padding: 11px 22px;
	background: var(--gradienteAccentAA);
	box-shadow: 0 12px 26px -14px rgba(254, 42, 103, 1);
}

#header .botao.accent i {
	font-size: 12px;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

#header .botao.accent:hover i {
	transform: translateX(3px);
}

/* Brilho que atravessa o botão no hover */

#header .botao.accent::after {
	content: "";
	position: absolute;
	top: 0;
	left: -70%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
}

#header .botao.accent:hover::after {
	left: 130%;
	transition: left 0.7s ease;
}

/*********************************************
** Botão do Menu Mobile
*********************************************/

#header #botaoMenuMobile {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: solid 1px rgba(63, 34, 114, 0.12);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.7);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 0;
	color: var(--primary);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s linear, border-color 0.25s linear,
		color 0.25s linear, transform 0.2s linear;
}

#header #botaoMenuMobile:active {
	transform: scale(0.94);
}

#header.sobreEscuro #botaoMenuMobile {
	border-color: rgba(250, 249, 253, 0.22);
	background: rgba(250, 249, 253, 0.12);
	color: var(--primary-foreground);
}

/*********************************************
** Véu atrás da gaveta do menu mobile
*********************************************/

#fundoMenuMobile {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 98;
	background: rgba(30, 15, 59, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s linear, visibility 0.35s;
}

#fundoMenuMobile.ativo {
	opacity: 1;
	visibility: visible;
}

/* O atalho de teclado (.pulaConteudo) mora no css/geral.css, e não aqui: ele
   é o primeiro link de toda página, então o desenho dele fica junto do que
   vale para o site inteiro. */

/*********************************************
** Progresso da Leitura (só nas matérias)
*********************************************/

.progressoLeitura {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 60;
	pointer-events: none;
}

.progressoLeitura span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gradienteAccent);
	box-shadow: 0 0 14px rgba(254, 42, 103, 0.65);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

/*********************************************
** Foco visível
**
** O anel do teclado dentro do header é feito com box-shadow, e não com
** outline, porque tudo aqui é pílula - o outline não acompanha a curva.
**
** É um anel próprio, e não o do geral.css, porque o header vive em dois
** estados (transparente por cima do bloco escuro e claro depois de rolar) e o
** rosa cheio é a única cor que se separa dos dois: 4,7:1 contra o roxo escuro
** e 3,7:1 contra o branco, e o mínimo para indicador de foco é 3:1.
**
** Ele nasceu de um tempo em que o geral.css apagava o outline de tudo com
** !important; hoje o geral.css tem um :focus-visible de verdade, e este aqui
** continua porque o header precisa da versão que funciona nos dois fundos.
*********************************************/

#header .barraHeader a:focus-visible,
#header .barraHeader button:focus-visible {
	box-shadow: 0 0 0 3px #FE2A67;
}

/* Entre 1024px e 1150px o menu fica mais apertado para não estourar a linha */

@media only screen and (min-width: 1024px) and (max-width: 1150px) {

	#header .barraHeader {
		gap: 12px;
	}

	#header .menuPrincipal ul.menu li a {
		padding: 9px 10px;
		font-size: 13px;
	}

	#header .boxAcoes .linkEntrar {
		padding: 10px 12px;
	}

	#header .botao.accent {
		padding: 11px 16px;
	}

}

/*********************************************
** Celular: a barra encolhe abaixo de 768px
*********************************************/

@media only screen and (max-width: 767px) {

	#header .vidroHeader {
		left: -6px;
		right: -6px;
	}

	#header.compacto {
		padding-top: 8px;
	}

	#header .logo .textoLogo {
		font-size: 21px;
		line-height: 26px;
	}

}

/*********************************************
** Gaveta lateral: abaixo de 1024px o menu inteiro vira hambúrguer
**
** O corte é em 1024px, e não em 768px, por medida mesmo: com seis itens no
** menu e dois botões do lado, a linha só fecha a partir dessa largura. Abaixo
** dela o menu ficava espremido e o "Cadastre-se grátis" saía pela direita.
**
** Quem mexer nesse número precisa mexer junto no menuEhDesktop() do
** scripts.js, que é quem decide se a pílula do indicador aparece.
*********************************************/

@media only screen and (max-width: 1023px) {

	/* Esconde as ações e o indicador do desktop */

	#header .boxAcoes,
	#header .indicadorMenu {
		display: none;
	}

	#header #botaoMenuMobile {
		display: flex;
	}

	/* A gaveta fica sempre montada e só desliza para dentro da tela: é o
	   que dá o movimento na entrada e na saída (com display:none ela
	   apareceria de uma vez).

	   O seletor repete o .barraHeader porque a regra que joga o conteúdo
	   para cima da pílula, lá em cima, é mais específica que um
	   "#header .menuPrincipal" - sem isso ela ganharia aqui e a gaveta
	   ficaria parada dentro da barra. */

	#header .barraHeader > .menuPrincipal {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: 88%;
		max-width: 340px;
		z-index: 99;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		background: var(--card);
		padding: 22px 22px 32px 22px;
		overflow-y: auto;
		box-shadow: -20px 0 60px -30px rgba(30, 15, 59, 0.8);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
	}

	#header .barraHeader > .menuPrincipal.active {
		transform: translateX(0);
		visibility: visible;
	}

	/* Um brilho bem de leve no topo da gaveta, para ela não ser um retângulo
	   branco chapado */

	#header .menuPrincipal::before {
		content: "";
		position: absolute;
		top: -60px;
		right: -40px;
		width: 220px;
		height: 220px;
		border-radius: 9999px;
		background: radial-gradient(circle, rgba(254, 42, 103, 0.14) 0%, transparent 70%);
		pointer-events: none;
	}

	/* Topo da gaveta: logo + fechar */

	#header .menuPrincipal .topoMenuMobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-bottom: solid 1px var(--border);
		padding-bottom: 18px;
	}

	#header .menuPrincipal .topoMenuMobile .logo .textoLogo {
		color: var(--primary);
	}

	#header .menuPrincipal #fechaMenuMobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		flex-shrink: 0;
		border: solid 1px var(--border);
		border-radius: 9999px;
		background: none;
		padding: 0;
		font-size: 16px;
		color: var(--primary);
		cursor: pointer;
		transition: background-color 0.2s linear;
	}

	#header .menuPrincipal #fechaMenuMobile:hover {
		background: var(--secondary);
	}

	#header .menuPrincipal ul.menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		margin-top: 18px;
	}

	#header .menuPrincipal ul.menu li {
		width: 100%;
	}

	#header .menuPrincipal ul.menu li a,
	#header.sobreEscuro .menuPrincipal ul.menu li a {
		display: block;
		width: 100%;
		border-radius: 12px;
		padding: 13px 14px;
		font-size: 15px;
		font-weight: 500;
		color: var(--primary);
	}

	#header .menuPrincipal ul.menu li a:hover,
	#header.sobreEscuro .menuPrincipal ul.menu li a:hover {
		background: var(--secondary);
	}

	#header .menuPrincipal ul.menu li.current-menu-item > a,
	#header .menuPrincipal ul.menu li.current-menu-ancestor > a,
	#header.sobreEscuro .menuPrincipal ul.menu li.current-menu-item > a,
	#header.sobreEscuro .menuPrincipal ul.menu li.current-menu-ancestor > a {
		background: var(--secondary);
		color: var(--accentTexto);
	}

	/* Os itens entram em escada quando a gaveta abre */

	#header .menuPrincipal ul.menu > li,
	#header .menuPrincipal .acoesMobile {
		opacity: 0;
		transform: translateX(18px);
		transition: opacity 0.35s linear, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	#header .menuPrincipal.active ul.menu > li,
	#header .menuPrincipal.active .acoesMobile {
		opacity: 1;
		transform: translateX(0);
	}

	#header .menuPrincipal.active ul.menu > li:nth-child(1) { transition-delay: 0.10s; }
	#header .menuPrincipal.active ul.menu > li:nth-child(2) { transition-delay: 0.15s; }
	#header .menuPrincipal.active ul.menu > li:nth-child(3) { transition-delay: 0.20s; }
	#header .menuPrincipal.active ul.menu > li:nth-child(4) { transition-delay: 0.25s; }
	#header .menuPrincipal.active ul.menu > li:nth-child(5) { transition-delay: 0.30s; }
	#header .menuPrincipal.active ul.menu > li:nth-child(6) { transition-delay: 0.35s; }
	#header .menuPrincipal.active ul.menu > li:nth-child(n + 7) { transition-delay: 0.40s; }
	#header .menuPrincipal.active .acoesMobile { transition-delay: 0.45s; }

	/*****
	** Submenu dentro da gaveta: aqui ele é acordeão, não cartão flutuante
	**
	** A lista abre pela altura, e a altura de abertura é medida na hora pelo
	** scripts.js e escrita em --alturaSubmenu. Um max-height chutado abriria
	** rápido demais uma lista curta (a transição "sobra" e o movimento some)
	** e cortaria uma lista longa - e a lista de categorias cresce sozinha
	** conforme o blog ganha categorias novas.
	*****/

	#header .menuPrincipal ul.menu li.menu-item-has-children > a {
		padding-right: 54px;
	}

	/* Aqui quem gira é a seta do botão, então a de dentro do link sai */

	#header .menuPrincipal ul.menu .setaSubmenu {
		display: none;
	}

	#header .menuPrincipal .abreSubmenu {
		position: absolute;
		top: 3px;
		right: 4px;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 12px;
		background: none;
		padding: 0;
		font-size: 12px;
		color: var(--muted-foreground);
		cursor: pointer;
		transition: background-color 0.25s linear, color 0.25s linear;
	}

	#header .menuPrincipal .abreSubmenu i {
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	#header .menuPrincipal ul.menu li.submenuAberto > .abreSubmenu {
		background: var(--secondary);
		color: var(--primary);
	}

	#header .menuPrincipal ul.menu li.submenuAberto > .abreSubmenu i {
		transform: rotate(180deg);
	}

	/* A linha da esquerda é o que amarra a lista ao item de cima - sem ela
	   as categorias ficam soltas no meio dos outros itens do menu */

	#header .menuPrincipal ul.menu ul {
		position: relative;
		top: 0;
		left: 0;
		width: auto;
		transform: none;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 0;
		border-left: solid 1px var(--border);
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0 8px;
		margin: 0 0 0 18px;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.3s linear,
			margin-bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0.4s;
	}

	#header .menuPrincipal ul.menu li.submenuAberto > ul {
		max-height: var(--alturaSubmenu, 600px);
		margin-bottom: 6px;
		visibility: visible;
		opacity: 1;
	}

	/* Os itens entram em escada, como os do menu de cima quando a gaveta abre */

	#header .menuPrincipal ul.menu ul li {
		opacity: 0;
		transform: translateX(12px);
		transition: opacity 0.3s linear, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	#header .menuPrincipal ul.menu li.submenuAberto > ul > li {
		opacity: 1;
		transform: translateX(0);
	}

	#header .menuPrincipal ul.menu li.submenuAberto > ul > li:nth-child(1) { transition-delay: 0.08s; }
	#header .menuPrincipal ul.menu li.submenuAberto > ul > li:nth-child(2) { transition-delay: 0.12s; }
	#header .menuPrincipal ul.menu li.submenuAberto > ul > li:nth-child(3) { transition-delay: 0.16s; }
	#header .menuPrincipal ul.menu li.submenuAberto > ul > li:nth-child(4) { transition-delay: 0.20s; }
	#header .menuPrincipal ul.menu li.submenuAberto > ul > li:nth-child(5) { transition-delay: 0.24s; }
	#header .menuPrincipal ul.menu li.submenuAberto > ul > li:nth-child(6) { transition-delay: 0.28s; }
	#header .menuPrincipal ul.menu li.submenuAberto > ul > li:nth-child(n + 7) { transition-delay: 0.32s; }

	#header .menuPrincipal ul.menu ul li a,
	#header.sobreEscuro .menuPrincipal ul.menu ul li a {
		padding: 10px 14px;
		font-size: 13px;
		color: var(--muted-foreground);
	}

	#header .menuPrincipal ul.menu ul li.current-menu-item > a,
	#header.sobreEscuro .menuPrincipal ul.menu ul li.current-menu-item > a {
		background: var(--secondary);
		color: var(--accentTexto);
	}

	/* Ações no rodapé da gaveta */

	#header .menuPrincipal .acoesMobile {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-top: 26px;
	}

	#header .menuPrincipal .acoesMobile .linkEntrar {
		text-align: center;
	}

	#header .menuPrincipal .acoesMobile .botao {
		width: 100%;
	}

}

/*********************************************
** Quem pediu menos animação no sistema
*********************************************/

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

	#header,
	#header .barraHeader,
	#header .vidroHeader,
	#header .menuPrincipal,
	#header .botao.accent i {
		transition-duration: 0.01ms;
	}

	#header .indicadorMenu {
		transition: opacity 0.25s linear;
	}

	#header .botao.accent::after {
		display: none;
	}

	#header .menuPrincipal ul.menu > li,
	#header .menuPrincipal .acoesMobile {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* O submenu continua abrindo e fechando, mas sem escada e sem o cartão
	   crescendo: aparece e some, e nada mais. A altura do acordeão fica no
	   0.01ms junto com o resto - ele precisa continuar sendo uma mudança de
	   max-height, senão não haveria o que mostrar. */

	#header .menuPrincipal ul.menu ul,
	#header .menuPrincipal ul.menu ul li,
	#header .menuPrincipal ul.menu .setaSubmenu,
	#header .menuPrincipal .abreSubmenu i {
		transition-duration: 0.01ms;
		transition-delay: 0s;
	}

}

/* As duas medidas juntas: o cartão do submenu só existe no desktop, e essas
   regras precisam vir depois das do celular para não desmontar o acordeão -
   por isso elas ficam aqui fora, e não no bloco de cima. */

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {

	#header .menuPrincipal ul.menu ul,
	#header .menuPrincipal ul.menu li:hover > ul,
	#header .menuPrincipal ul.menu li:focus-within > ul,
	#header .menuPrincipal ul.menu li.semSubmenu > ul {
		transform: translateX(-50%);
	}

	#header .menuPrincipal ul.menu ul li {
		transform: none;
	}

}