/* ==========================================================================
   Header unificado — mesmo menu e mesma animação de "encolher" (pill-collapse)
   em TODAS as páginas (tema e páginas do zip). Cores literais para funcionar
   independente do arquivo de tokens carregado na página.
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 20px clamp(16px, 4vw, 48px) 0;
	transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.header-inner {
	/* px nos dois estados (topo e compacto) para o max-width transicionar
	   suave — %↔px não interpola e trava a animação de encolher. */
	max-width: 1760px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 12px 12px 20px;
	border-radius: 10px;
	transition: max-width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.5s ease, backdrop-filter 0.5s ease, padding 0.5s ease;
}
/* ao sair da hero: a barra encolhe e centraliza (elementos se juntam) */
.site-header.is-compact { padding-top: 12px; }
.site-header.is-compact .header-inner { max-width: 1000px; }

.site-header .brand { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; transition: opacity 0.25s ease; }
.site-header .brand:hover { opacity: 0.82; }
.site-header .brand img {
	height: 30px;
	width: auto;
	transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.is-compact .brand img { height: 26px; }

/* Logo claro/escuro conforme a seção atrás do header.
   O claro (branco) vale sobre fundos escuros; o escuro entra sobre seções claras.
   O escuro fica sobreposto ao claro e só aparece quando .on-light está ativo. */
.site-header .brand-logo { display: block; transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
.site-header .brand-logo--dark {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
}
.site-header.on-light .brand-logo--light { opacity: 0; }
.site-header.on-light .brand-logo--dark { opacity: 1; }

/* Menu mobile aberto cobre a tela com fundo escuro — força o logo branco
   mesmo que a seção atrás fosse clara (senão o logo escuro somia no overlay). */
body.menu-open .site-header .brand-logo--light { opacity: 1; }
body.menu-open .site-header .brand-logo--dark { opacity: 0; }

.nav-pill {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px;
	border: 1px solid rgba(241, 243, 249, 0.14);
	border-radius: 999px;
	background: rgba(2, 6, 24, 0.30);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.nav-pill a {
	padding: 10px 20px;
	font-family: "Inter", -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: rgba(241, 243, 249, 0.72);
	border-radius: 999px;
	transition: color 0.25s ease, background-color 0.25s ease;
}
.nav-pill a:hover,
.nav-pill a[aria-current] { color: #f1f3f9; background: rgba(241, 243, 249, 0.06); }

/* --- Dropdown de Serviços (hover) --- */
.nav-has-dropdown { position: relative; display: inline-flex; }
/* seta que indica o dropdown */
.nav-has-dropdown > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	opacity: 0.55;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.nav-has-dropdown:hover > a::after { transform: rotate(225deg) translateY(2px); opacity: 1; }
/* ponte invisível: mantém o hover ao descer para o painel */
.nav-has-dropdown::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 16px;
}
.nav-dropdown {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 232px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: rgba(2, 6, 24, 0.92);
	border: 1px solid rgba(241, 243, 249, 0.12);
	border-radius: 14px;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 24px 50px rgba(2, 6, 24, 0.55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.25s;
	z-index: 101;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
	display: block;
	padding: 11px 14px;
	border-radius: 9px;
	font-family: "Inter", -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: rgba(241, 243, 249, 0.72);
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease, padding-left 0.25s ease;
}
.nav-dropdown a:hover {
	color: #f1f3f9;
	background: rgba(241, 243, 249, 0.06);
	padding-left: 18px;
}
/* barrinha-ouro no item ativo do dropdown */
.nav-dropdown a::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold-1, #dd9318);
	margin-right: 10px;
	vertical-align: middle;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.nav-dropdown a:hover::before { opacity: 1; }

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	padding: 13px 26px;
	border: 1px solid rgba(212, 146, 36, 0.7);
	color: #f1f3f9;
	font-family: "Inter", -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	/* mesmo liquid glass do menu (.nav-pill): vidro navy translúcido + blur */
	background: rgba(2, 6, 24, 0.30);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	transition: border-color 0.3s ease, transform 0.3s ease,
		background-color 0.3s ease, color 0.3s ease;
}
.header-cta:hover { border-color: #d49224; transform: translateY(-2px); }

/* --- CTA escurece junto com a logo sobre seções claras (.on-light) --- */
.site-header.on-light .header-cta {
	color: #0b1020;
	border-color: rgba(176, 116, 20, 0.85);
	background: rgba(241, 243, 249, 0.30);
}
.site-header.on-light .header-cta:hover { border-color: #a06814; }

.nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(241, 243, 249, 0.2);
	border-radius: 8px;
	position: relative;
	flex-shrink: 0;
	background: rgba(2, 6, 24, 0.3);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}
.nav-toggle span {
	position: absolute;
	left: 13px;
	right: 13px;
	height: 1.5px;
	background: #f1f3f9;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { bottom: 18px; }
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* --- overlay do menu mobile --- */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(2, 6, 24, 0.98);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: clamp(24px, 5vw, 60px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu > * { opacity: 0; }
body.menu-open .mobile-menu > * { animation: menuItemIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes menuItemIn {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}
body.menu-open .mobile-menu > *:nth-child(1) { animation-delay: 0.10s; }
body.menu-open .mobile-menu > *:nth-child(2) { animation-delay: 0.16s; }
body.menu-open .mobile-menu > *:nth-child(3) { animation-delay: 0.22s; }
body.menu-open .mobile-menu > *:nth-child(4) { animation-delay: 0.28s; }
body.menu-open .mobile-menu > *:nth-child(5) { animation-delay: 0.36s; }
body.menu-open .mobile-menu > *:nth-child(6) { animation-delay: 0.44s; }
.mobile-menu a {
	font-family: "Inter", -apple-system, sans-serif;
	font-weight: 600;
	font-size: clamp(30px, 9vw, 48px);
	letter-spacing: -0.03em;
	padding: 12px 0;
	color: #f1f3f9;
	transition: color 0.25s ease;
}
.mobile-menu a:hover { color: #d49224; }
.mobile-menu .btn { margin-top: 24px; width: min(340px, 100%); justify-content: center; }
.mobile-menu .btn .arrow { width: 22px; height: 22px; flex-shrink: 0; }
.mobile-menu .menu-contact { margin-top: 30px; display: flex; gap: 14px; }
.mobile-menu .menu-contact a {
	width: 46px;
	height: 46px;
	padding: 0;
	display: grid;
	place-items: center;
	border: 1px solid rgba(241, 243, 249, 0.2);
	border-radius: 8px;
}
.mobile-menu .menu-contact img { width: 20px; }

@media (max-width: 900px) {
	.nav-pill, .header-cta { display: none; }
	.nav-toggle { display: block; }
	.site-header.is-compact .header-inner { max-width: 100%; }
}