/* =========================================================================
   GRUPO UNEED — componentes de base
   ====================================================================== */

/* --- Botões -------------------------------------------------------------
   Raio pequeno, não pílula. No padrão do grupo o botão é retangular
   arredondado — pílula deixa a interface macia demais para o registro. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); color: #fff; }

.btn--ghost {
	background: transparent;
	border-color: color-mix(in srgb, var(--text) 18%, transparent);
	color: var(--text);
}

.btn--ghost:hover {
	border-color: var(--brand);
	color: var(--text);
	background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.btn--lg { padding: var(--sp-4) var(--sp-8); }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--sp-6);
}

/* --- Cabeçalho ----------------------------------------------------------
   Sem borda até rolar. O padrão do grupo abre com o header dissolvido na
   arte do hero; a linha só aparece quando o conteúdo passa por baixo. */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out),
		backdrop-filter var(--dur-base) var(--ease-out);
}

.site-header[data-scrolled="true"] {
	border-bottom-color: var(--line);
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(16px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	min-height: 76px;
}

.site-brand { flex: none; display: inline-flex; }
.site-brand img, .site-brand svg { height: 26px; width: auto; }

.site-brand__text {
	font-family: var(--ff-display);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: var(--fs-sm);
}

.nav-principal { margin-left: auto; }

.nav-principal ul {
	display: flex;
	align-items: center;
	gap: var(--sp-7, 1.75rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-principal a {
	color: var(--text);
	text-decoration: none;
	font-size: var(--fs-sm);
	font-weight: 500;
	opacity: .82;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.nav-principal a:hover { opacity: 1; color: var(--text); }
.nav-principal .current-menu-item > a { opacity: 1; color: var(--brand-soft); }

.site-header__cta { flex: none; }

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: var(--sp-2);
	color: var(--text);
}

/* O CTA do topo tem gêmeo dentro do menu mobile; só um aparece por vez. */
.nav-principal__cta { display: none; }

@media (max-width: 1023px) {
	.nav-toggle { display: inline-flex; margin-left: auto; }
	.site-header__cta { display: none; }
	.nav-principal__cta { display: flex; margin-top: var(--sp-4); }

	.nav-principal {
		position: fixed;
		inset: 76px 0 auto;
		/* Menu longo em telefone deitado precisa rolar, senão os últimos
		   itens ficam fora da tela e sem como alcançar. */
		max-height: calc(100dvh - 76px);
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		padding: var(--sp-6) var(--gutter);
		display: none;
	}

	.nav-principal[data-open="true"] { display: block; }

	.nav-principal ul {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-4);
	}
}

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

.site-footer {
	position: relative;
	background: var(--bg);
	border-top: 1px solid var(--line);
	padding-block: var(--sp-20) 0;
	margin-top: var(--sp-section);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
}

@media (min-width: 601px) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	/* A coluna da marca é mais larga: acomoda a descrição sem quebrar em
	   linhas de duas palavras. */
	.site-footer__grid {
		grid-template-columns: 1.5fr repeat(3, 1fr);
		gap: var(--sp-12);
	}
}

/* --- Coluna da marca ------------------------------------------------------ */

.site-footer__logo { height: 30px; width: auto; }

.site-footer__desc {
	margin-top: var(--sp-6);
	max-width: 30rem;
	font-size: var(--fs-xs);
	color: var(--text-subtle);
	line-height: 1.7;
}

.site-footer__redes {
	display: flex;
	gap: var(--sp-2);
	list-style: none;
	margin: var(--sp-8) 0 0;
	padding: 0;
}

/* 44px: mínimo recomendado para alvo de toque. Um ícone de 18px numa
   caixa de 36px erra com frequência em tela pequena. */
.site-footer__redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	color: var(--text-muted);
	transition:
		border-color var(--dur-fast) var(--ease-out),
		background-color var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

.site-footer__redes a:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.site-footer__portal {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-6);
	padding: var(--sp-3) var(--sp-5);
	border: 1px solid var(--line);
	color: var(--text) !important;
	font-size: var(--fs-xs);
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--dur-fast) var(--ease-out);
}

.site-footer__portal:hover { border-color: var(--brand); }

/* --- Colunas de link -------------------------------------------------------
   Título com régua embaixo, como na referência: separa o rótulo da lista
   sem precisar de espaço vertical extra. */

.site-footer__col h2 {
	font-family: var(--ff-body);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
	padding-bottom: var(--sp-3);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--sp-3); }

.site-footer a {
	color: var(--text-muted);
	text-decoration: none;
	font-size: var(--fs-xs);
	line-height: 1.5;
	transition: color var(--dur-fast) var(--ease-out);
}

.site-footer a:hover { color: var(--text); }

/* --- Barra legal ------------------------------------------------------------ */

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-8);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--sp-16);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	color: var(--text-subtle);
}

.site-footer__legal p { margin: 0; }

.site-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
}

.site-footer__legal-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
}

.site-footer__legal-links li + li { margin-top: 0; }

@media (max-width: 820px) {
	.site-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* --- WORDMARK GIGANTE ---------------------------------------------------
   ELEMENTO DE ASSINATURA DO PADRÃO.

   A marca em corpo enorme, vazada, cortada pela base da página. Fecha o
   documento como uma assinatura fecha uma carta — não é decoração, é o
   último elemento que o visitante vê.

   overflow:hidden + margin negativo produzem o corte. A altura fixa
   impede que o texto empurre o layout. */

.wordmark {
	display: block;
	overflow: hidden;
	margin-top: var(--sp-16);
	height: clamp(70px, 11vw, 170px);
	pointer-events: none;
	user-select: none;
}

.wordmark__texto {
	display: block;
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(5rem, 17.5vw, 17rem);
	font-weight: 700;
	line-height: .82;
	letter-spacing: .06em;
	text-align: center;
	white-space: nowrap;

	/* Vazado: contorno sem preenchimento. */
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--text) 20%, transparent);
	text-stroke: 1px color-mix(in srgb, var(--text) 20%, transparent);
}

/* Navegador sem suporte a text-stroke recebe versão preenchida em baixa
   opacidade — mesma intenção visual, sem quebrar. */
@supports not (-webkit-text-stroke: 1px black) {
	.wordmark__texto {
		color: color-mix(in srgb, var(--text) 9%, transparent);
		-webkit-text-stroke: 0;
	}
}

/* --- Assinatura com logotipo -------------------------------------------
   Variante usada quando existe arquivo de logo. Mesma ideia do wordmark
   vazado — marca em corpo grande, cortada pela base — mas com o lettering
   real em vez de aproximação tipográfica.

   A opacidade baixa é o que impede a assinatura de competir com o
   conteúdo do rodapé logo acima. */

.wordmark--logo {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: clamp(60px, 9vw, 130px);
	padding-inline: var(--gutter);
}

.wordmark--logo img {
	width: min(1000px, 88%);
	height: auto;
	opacity: .1;
}

@media (max-width: 600px) {
	.wordmark--logo { height: clamp(40px, 12vw, 70px); }
	.wordmark--logo img { width: 92%; }
}

/* --- Breadcrumb ---------------------------------------------------------- */

.breadcrumb { padding-block: var(--sp-8) 0; }

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--fs-xs);
	color: var(--text-subtle);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "/";
	margin-right: var(--sp-2);
	color: var(--line);
}

.breadcrumb a { color: var(--text-subtle); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-soft); }

/* --- Reveal --------------------------------------------------------------- */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }