/* Header institucional nas páginas Puzl Task.
   Cópia mínima das regras do style.css do tema (que é desativado nestes templates
   para preservar o CSS migrado do Vue). Se o header mudar lá, refletir aqui. */
.skip-link {
	position: absolute; left: -999px; top: 8px; z-index: 100;
	background: #232326; color: #fff; padding: .6rem 1rem; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

.site-header {
	position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
	width: min(1160px, calc(100% - 1.5rem));
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .5rem .6rem .5rem 1.1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 18px rgba(0, 0, 0, .14);
	color: #232326;
	z-index: 100;
}
.site-header .brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .brand-logo { display: block; height: 38px; width: auto; }
.site-header .site-nav { display: flex; align-items: center; gap: .25rem; }
.site-header .site-nav a {
	font-weight: 600; font-size: .95rem; text-decoration: none; color: #232326;
	padding: .5rem .8rem; border-radius: 999px;
}
.site-header .site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* elementos do tema institucional sem função aqui (dependem do JS/GSAP dele) */
.preloader, .cursor-dot, .cursor-ring { display: none !important; }

@media (max-width: 720px) {
	.site-header .site-nav a:not([href$="/contato/"]) { display: none; }
	.site-header .site-nav a[href$="/contato/"] { background: #F2B532; color: #232326; }
}