/**
 * Header e rodapé do site.
 *
 * Os breakpoints são os mesmos do Elementor e do Starter Celado, que neste
 * projeto coincidem:
 *   até 767   celular retrato
 *   768–880   celular paisagem
 *   881–1024  tablet retrato
 *   1025–1200 tablet paisagem
 *   1201–1366 notebook
 *   1367–2399 desktop
 *   2400+     wide
 *
 * Largura e respiro vêm do Starter Celado (--largurautil, --espacosessao).
 */

/* --------------------------------------------------------------------------
   Base do documento
   -------------------------------------------------------------------------- */

body {
	background-color: var(--sn-bg);
	color: var(--sn-ink);
	font-family: var(--sn-font-body);
	font-size: var(--sn-fs-body);
	line-height: var(--sn-lh-normal);
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.sn-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	border-block-end: 1px solid transparent;
	transition: border-color var(--sn-dur-base) var(--sn-ease);
}

/* Ganha corpo só depois que a página rola, para não competir com o hero.

   O fundo e o desfoque moram neste ::before, e não no próprio .sn-header,
   por um motivo técnico: um elemento com backdrop-filter vira bloco
   contentor para os descendentes position:fixed. Como o painel do menu
   mobile é filho do header, aplicar o filtro no header fazia o inset:0 do
   painel passar a valer em relação a ele — aberto com a página rolada, o
   painel colapsava de 797px para 76px de altura e parecia abrir sem fundo.
   No pseudo-elemento o efeito visual é o mesmo e o header não cria bloco
   contentor. */
.sn-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(26, 26, 26, 0.88);
	opacity: 0;
	transition: opacity var(--sn-dur-base) var(--sn-ease);
}

.sn-header.is-solido::before {
	opacity: 1;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.sn-header.is-solido {
	border-block-end-color: var(--sn-border);
}

/* Fica acima do ::before do fundo, que é posicionado e por isso pintaria
   sobre o conteúdo do header. Só z-index e position: nada de transform ou
   filtro aqui, que voltariam a criar bloco contentor para o painel fixo. */
.sn-header__interno {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: min(var(--largurautil, 1100px), 92vw);
	margin-inline: auto;
	padding-block: 1.25rem;
}

.sn-header__marca {
	display: block;
	flex-shrink: 0;
	color: var(--sn-ink);
	text-decoration: none;
}

.sn-header__logo {
	display: block;
	width: auto;
	height: 30px;
	transition: color var(--sn-dur-fast) var(--sn-ease);
}

.sn-header__marca:hover .sn-header__logo {
	color: var(--sn-accent);
}

.sn-header__logo--texto {
	font-family: var(--sn-font-display);
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Navegação
   -------------------------------------------------------------------------- */

.sn-nav__lista {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-nav__link {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 0.35rem;
	font-family: var(--sn-font-body);
	font-size: 0.9375rem;
	color: var(--sn-ink);
	text-decoration: none;
	transition: color var(--sn-dur-fast) var(--sn-ease);
}

/* A numeração dá o tom técnico e editorial; some quando o espaço aperta. */
.sn-nav__num {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	color: var(--sn-accent);
	opacity: 0.65;
	transition: opacity var(--sn-dur-fast) var(--sn-ease);
}

.sn-nav__link::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	width: 0;
	height: 1px;
	background-color: var(--sn-accent);
	transition: width var(--sn-dur-base) var(--sn-ease);
}

.sn-nav__link:hover,
.sn-nav__link:focus-visible {
	color: var(--sn-accent);
}

.sn-nav__link:hover .sn-nav__num,
.sn-nav__link:focus-visible .sn-nav__num {
	opacity: 1;
}

.sn-nav__link:hover::after,
.sn-nav__link:focus-visible::after,
.sn-nav__link.is-atual::after {
	width: 100%;
}

.sn-nav__link.is-atual {
	color: var(--sn-accent);
}

/* Botão do menu: só existe abaixo de 1025px. */
.sn-header__alternar {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--sn-border-strong);
	border-radius: var(--sn-radius);
	background: none;
	color: var(--sn-ink);
	cursor: pointer;
}

/* O reset.css do Hello Elementor pinta QUALQUER <button> de #cc3366 no
   :hover e no :focus. Como `button:focus` (0,1,1) tem mais especificidade
   que `.sn-header__alternar` (0,1,0), o `background: none` de cima perdia:
   ao tocar no botão ele ficava rosa — e continuava rosa depois de fechar o
   menu, porque o foco permanece nele. Estas regras (0,2,0) devolvem o
   controle ao tema. */
.sn-header__alternar:hover,
.sn-header__alternar:focus,
.sn-header__alternar:focus-visible,
.sn-header__alternar:active {
	background-color: transparent;
	color: var(--sn-ink);
	border-color: var(--sn-accent);
}

/* Foco por toque ou clique não desenha anel; por teclado, sim. */
.sn-header__alternar:focus { outline: none; }

.sn-header__alternar:focus-visible {
	outline: 2px solid var(--sn-accent);
	outline-offset: 2px;
}

.sn-header__hamburguer,
.sn-header__hamburguer::before,
.sn-header__hamburguer::after {
	display: block;
	width: 18px;
	height: 1px;
	margin-inline: auto;
	background-color: var(--sn-ink);
	transition: transform var(--sn-dur-fast) var(--sn-ease),
	            opacity var(--sn-dur-fast) var(--sn-ease);
}

.sn-header__hamburguer::before,
.sn-header__hamburguer::after {
	content: "";
	position: relative;
}

.sn-header__hamburguer::before { top: -5px; }
.sn-header__hamburguer::after { top: 4px; }

[aria-expanded="true"] .sn-header__hamburguer {
	background-color: transparent;
}

[aria-expanded="true"] .sn-header__hamburguer::before {
	transform: translateY(5px) rotate(45deg);
}

[aria-expanded="true"] .sn-header__hamburguer::after {
	transform: translateY(-4px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.sn-footer {
	padding-block-start: calc(var(--espacosessao, 200px) * 0.5);
	/* Mesma razão da faixa de marcas: translúcido para o ambiente do fundo
	   continuar visível em vez de terminar num bloco chapado. */
	background-color: rgba(20, 20, 20, 0.72);
	border-block-start: 1px solid var(--sn-border);
}

.sn-footer__interno {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 3rem 2.5rem;
	width: min(var(--largurautil, 1100px), 92vw);
	margin-inline: auto;
	padding-block-end: 4rem;
}

.sn-footer__logo {
	display: block;
	width: auto;
	max-width: 220px;
	height: 34px;
	margin-block-end: 1.5rem;
	color: var(--sn-ink);
}

.sn-footer__tagline {
	max-width: 34ch;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--sn-ink-muted);
}

.sn-footer__titulo {
	margin: 0 0 1.25rem;
	font-family: var(--sn-font-body);
	font-size: 0.75rem;
	font-weight: var(--sn-fw-normal);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sn-accent);
}

.sn-footer__lista {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-footer__link {
	font-size: 0.9375rem;
	color: var(--sn-ink-muted);
	text-decoration: none;
	transition: color var(--sn-dur-fast) var(--sn-ease);
}

.sn-footer__link:hover,
.sn-footer__link:focus-visible {
	color: var(--sn-ink);
}

.sn-footer__link--todos {
	color: var(--sn-accent);
}

/* Marca sem URL oficial: aparece na lista, mas não finge ser link. */
.sn-footer__link--inerte {
	color: var(--sn-ink-faint);
	cursor: default;
}

.sn-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	width: min(var(--largurautil, 1100px), 92vw);
	margin-inline: auto;
	padding-block: 1.75rem;
	border-block-start: 1px solid var(--sn-border);
}

.sn-footer__copy {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sn-ink-faint);
}

.sn-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sn-footer__legal .sn-footer__link {
	font-size: 0.8125rem;
}

/* Assinatura de quem desenvolveu o site: linha própria, abaixo da faixa final.
   O SVG usa currentColor, então a cor sai daqui e o hover é só uma troca de
   cor — sem segundo arquivo. */
.sn-footer__autoria {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: min(var(--largurautil, 1100px), 92vw);
	margin-inline: auto;
	padding-block-end: 1.75rem;
}

.sn-footer__autoria-texto {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sn-ink-faint);
}

.sn-footer__autoria-marca {
	display: inline-flex;
	color: var(--sn-ink-faint);
	transition: color 0.3s ease, transform 0.3s ease;
}

.sn-footer__autoria-marca:hover,
.sn-footer__autoria-marca:focus-visible {
	color: var(--sn-ink);
	transform: scale(1.05);
}

.sn-footer__autoria-logo {
	display: block;
	width: auto;
	height: 18px;
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Wide — 2400px e acima */
@media (min-width: 2400px) {
	.sn-header__logo { height: 38px; }
	.sn-nav__lista { gap: 3rem; }
	.sn-nav__link { font-size: 1.0625rem; }
	.sn-footer__logo { height: 42px; max-width: 280px; }
}

/* Notebook — até 1366 */
@media (max-width: 1366px) {
	.sn-nav__lista { gap: 1.75rem; }
}

/* Tablet paisagem — até 1200 */
@media (max-width: 1200px) {
	.sn-nav__num { display: none; }
	.sn-nav__lista { gap: 1.5rem; }
	.sn-footer__interno {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: 2.5rem 2rem;
	}
}

/* Tablet retrato e abaixo — até 1024: o menu vira painel */
@media (max-width: 1024px) {
	.sn-header__alternar {
		display: grid;
		place-items: center;
	}

	/* O painel é fixo e cobre a tela inteira — inclusive a faixa do header.
	   Marca e botão precisam de um degrau de empilhamento acima dele, senão o
	   painel aberto tapa o próprio botão que o fecha (o "X" fica embaixo do
	   fundo e não recebe o toque). */
	.sn-header__marca,
	.sn-header__alternar {
		position: relative;
		z-index: 2;
	}

	.sn-nav {
		position: fixed;
		inset: 0;
		z-index: -1;
		display: grid;
		place-items: center;
		background-color: var(--sn-bg);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--sn-dur-base) var(--sn-ease),
		            visibility var(--sn-dur-base) var(--sn-ease);
	}

	.sn-nav.is-aberto {
		z-index: 1;
		opacity: 1;
		visibility: visible;
	}

	.sn-nav__lista {
		flex-direction: column;
		gap: 2rem;
		text-align: center;
	}

	.sn-nav__num { display: inline; }

	.sn-nav__link {
		flex-direction: column;
		gap: 0.35rem;
		font-family: var(--sn-font-display);
		font-size: 1.75rem;
		font-weight: var(--sn-fw-light);
	}

	.sn-nav__link::after { display: none; }

	.sn-footer__interno {
		grid-template-columns: 1fr 1fr;
		gap: 3rem 2rem;
	}

	.sn-footer__coluna--marca { grid-column: 1 / -1; }
}

/* Celular paisagem — até 880 */
@media (max-width: 880px) {
	.sn-header__interno { padding-block: 1rem; }
	.sn-header__logo { height: 26px; }
	.sn-nav__link { font-size: 1.5rem; }
}

/* Celular retrato — até 767 */
@media (max-width: 767px) {
	.sn-footer__interno {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		padding-block-end: 3rem;
	}

	.sn-footer__base {
		flex-direction: column;
		align-items: flex-start;
	}

	.sn-footer__legal { gap: 1rem; }
	.sn-footer__logo { height: 30px; }
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sn-header,
	.sn-header::before,
	.sn-nav,
	.sn-nav__link,
	.sn-nav__link::after,
	.sn-nav__num,
	.sn-footer__link,
	.sn-footer__autoria-marca,
	.sn-header__logo,
	.sn-header__hamburguer,
	.sn-header__hamburguer::before,
	.sn-header__hamburguer::after {
		transition: none;
	}

	/* Sem movimento: a marca do rodapé troca de cor, mas não cresce. */
	.sn-footer__autoria-marca:hover,
	.sn-footer__autoria-marca:focus-visible {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Recuo para o header fixo
   -------------------------------------------------------------------------- */

/* Na home o hero ocupa a tela inteira e o header flutua transparente por
   cima, então não há recuo. Nas demais páginas o header passaria por cima do
   primeiro bloco de conteúdo.

   O :not() exclui os wrappers do Theme Builder: com o header e o rodapé
   montados no Elementor, eles também são .elementor na página, e sem isto o
   recuo cairia dentro do próprio header em vez de no conteúdo.

   O valor sai de --sn-offset-topo quando o widget S&N · Header está em uso
   (é o controle "Recuo do conteúdo abaixo do header"); os 9rem são o padrão
   de quem não mexeu em nada.

   O recuo NÃO diminui no celular, e isso é de propósito: o header do celular
   é mais alto que o do desktop (77px contra 70px — o logo encolhe, mas o
   respiro vertical não). Antes o mobile caía para 7rem e sobravam 35px entre
   o header e o primeiro texto, o que deixava o conteúdo colado nele. */
.sn-sem-hero .elementor:not(.elementor-location-header):not(.elementor-location-footer) > *:first-child {
	padding-block-start: var(--sn-offset-topo, 9rem);
}

/* Âncoras internas (#diretoria, por exemplo) não podem parar debaixo do
   header fixo. */
html {
	scroll-padding-block-start: 6rem;
}

@media (max-width: 880px) {
	/* Header mais alto no celular, então a âncora precisa parar mais abaixo,
	   não mais acima: 5rem (80px) deixava o alvo encostado nos 77px do
	   header. */
	html { scroll-padding-block-start: 6.5rem; }
}

/* --------------------------------------------------------------------------
   Header e rodapé montados no Elementor
   -------------------------------------------------------------------------- */

/* Os widgets S&N · Header e S&N · Rodapé desenham a barra inteira, incluindo
   a própria largura e o próprio respiro. O contêiner do Elementor em volta
   precisa sair da frente, senão soma um limite de largura por cima. */
.elementor-location-header .elementor-widget-sn-header,
.elementor-location-footer .elementor-widget-sn-footer {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Header não fixo: sobe junto com a página (controle "Fixo no topo"). */
.sn-header--estatico {
	position: relative;
}

/* --------------------------------------------------------------------------
   Redes sociais do rodapé
   -------------------------------------------------------------------------- */

/* Lista horizontal, só renderizada quando há endereço cadastrado — rede sem
   URL não vira ícone morto. */
.sn-footer__redes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.sn-footer__rede {
	font-size: 0.875rem;
	color: var(--sn-ink-muted);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: color var(--sn-dur-fast) var(--sn-ease),
	            border-color var(--sn-dur-fast) var(--sn-ease);
}

.sn-footer__rede:hover,
.sn-footer__rede:focus-visible {
	color: var(--sn-accent);
	border-block-end-color: var(--sn-accent);
}

@media (prefers-reduced-motion: reduce) {
	.sn-footer__rede { transition: none; }
}