/* =========================
   GLOBAL.CSS
   Base + layout comum + componentes
   (CASCA do projeto)
========================= */

/* =========================
   RESET — CASCA ABSOLUTA
   Garante comportamento previsível
   caso estilos específicos sejam removidos
========================= */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* =========================
   BASE — CASCA DE LEITURA
   Tipografia, cores e fundo padrão
   Fallback visual global do projeto
========================= */
body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: rgb(22, 29, 63);
	color: #e5e7eb;
	line-height: 1.6;
}

/* =========================
   LINKS — CASCA DE SEGURANÇA
   Cor padrão caso nenhuma regra
   mais específica sobrescreva
========================= */
a {
	color: #e5e7eb; /* fallback de cor */
	text-decoration: none;
}

/* =========================
   LAYOUT — CASCA DE CONTEÚDO
   Container limitador de largura
   Controla bordas vazias da página
========================= */
.container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
}

/* =========================
   HEADER — CASCA GLOBAL
   Comportamento base do header
   (fixo, altura, fundo)
========================= */
header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	width: 100%;
	height: 72px;
	padding-top: 5px;

	background: rgba(18, 25, 60, 0.85);
	backdrop-filter: blur(10px);

	display: flex;
	align-items: center;
}

/* =========================
   MAIN — AJUSTE DE CONTEXTO
   Espaço necessário SOMENTE
   porque o header é fixo
========================= */
main {
	padding-top: 30px; /* fallback caso header permaneça fixed */
}

/* =========================
   HEADER .container — CASCA
   Layout interno do header
   (alinhamento logo / nav)
========================= */
header .container {
	max-width: 1440px;
	margin: 0 auto;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0 48px;
}

body {
	overflow-x: hidden;
}


/* =========================
   LOGO — CASCA DE LAYOUT
   Container controla alinhamento
========================= */
.logo {
	display: flex;
	align-items: center;
}

/* =========================
   LOGO IMG — CASCA VISUAL
   Controla tamanho do asset
   sem interferir no layout
========================= */
.headerLogo {
	height: 42px;
	width: auto;
	filter: drop-shadow(0 4px 12px rgba(56, 189, 248, 0.25));
}

/* =========================
   NAV LINKS — CASCA DE NAVEGAÇÃO
   Só se aplica se NÃO houver
   botão ou classe mais específica
========================= */
nav a {
	font-weight: 500;
	font-size: 0.95rem;
	padding: 8px 14px;
	border-radius: 6px;
	transition: background 0.2s ease;
}

/* =========================
   BOTÕES — COMPONENTES GLOBAIS
   Sobrescrevem links e nav a
========================= */
.btn-primary,
.btn-sencundary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: 22px;
	padding: 15px 32px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1.1rem;

	color: #0b0f1a;
	background: linear-gradient(90deg, #4ade80, #38bdf8);
	box-shadow: 0 10px 30px rgba(56, 189, 248, 0.15);
	text-decoration: none;
}

/* =========================
   HEADER BUTTON — ESPECÍFICO
   Ajuste óptico exclusivo
   quando botão está no header
========================= */
header nav .btn-primary {
	margin-top: 0;
	padding: 10px 18px;
	font-size: 0.95rem;
	transform: translateY(-1px);
}

/* =========================
   BOTÕES — INTERAÇÕES
   Hover / Active / Focus
   Sobrescrevem estado base
========================= */
.btn-primary:hover,
.btn-sencundary:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.btn-primary:active,
.btn-sencundary:active {
	transform: scale(0.97);
	box-shadow: 0 5px 15px rgba(56, 189, 248, 0.2);
}

.btn-primary:focus-visible,
.btn-sencundary:focus-visible {
	outline: 3px solid rgba(59, 130, 246, 0.45);
	outline-offset: 3px;
}

/* =========================
   FOOTER — CASCA GLOBAL
   Rodapé padrão do projeto
========================= */
footer {
	text-align: center;
	padding: 44px 40px;
	color: #94a3b8;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================
   FOOTER LOGO — CASCA VISUAL
========================= */
.footerLogo {
	height: 90px;
	margin-bottom: 12px;
	opacity: 0.85;
}

/* =========================
   RESPONSIVO — CASCA GLOBAL
   Só ajustes estruturais
   (não específicos de páginas)
========================= */
@media (max-width: 900px) {
	.container {
		padding: 0 20px;
	}
}