/*
	Global.css: estilos compartilhados por todas as páginas
	- Variáveis de cor (nomes amigáveis)
	- Resets e tipografia
	- Helpers de layout (container)
	- Estilos comuns da topbar e header
*/

:root {
	/* Paleta institucional */
	--color-primary: #0c295d; /* era clr-itp-primary */
    --color-blue-800: #0c174c; /* nova cor para complementar o gradiente */
    --color-blue-700: #121f65; /* nova cor para complementar o gradiente */
    --color-blue-600: #54a6cc;
    --color-blue-500: #58c9fd;
	--color-gray-200: #c0c1ca; /* era clr-itp-1 */
	--color-navy-900: #09215b; /* era clr-itp-2 */
	--color-accent-red: #dc3d2e; /* era clr-itp-3 */
	--color-blue-600: #3d6296; /* era clr-itp-4 */
	--color-teal-700: #0c5c7c; /* era clr-itp-5 */
	--color-teal-300: #6d9caf; /* era clr-itp-6 */
	--color-slate-700: #4a577b; /* era clr-itp-7 */
	--color-slate-400: #7c88ac; /* era clr-itp-8 */
	--color-neutral-900: #303030; /* era clr-itp-9 */
	--color-salmon: #e4685c; /* era clr-itp-10 */

	/* Extras úteis */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-whatsapp: #25d366; /* cor de marca do WhatsApp */

		/* Layout vars */
		--header-min-h: 64px;
		--logo-width: 180px;   /* largura reservada p/ grid não quebrar */
		--logo-size: 240px;     /* altura real do logo */
		--logo-overlap-top: 120px; /* quanto o logo sobe sobre a topbar */
}

/* Reset e base */
* { box-sizing: border-box; }
html {
	height: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 100px; /* Compensa altura do header */
}
body { height: 100%; }
body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: var(--color-neutral-900);
	background: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html { overflow-x: clip; }

/* Seleção de texto com identidade visual */
::selection { background: var(--color-blue-500); color: var(--color-white); }
::-moz-selection { background: var(--color-blue-500); color: var(--color-white); }

/* Scrollbar fina e moderna */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f4fb; }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--color-blue-500), var(--color-primary));
	border-radius: 10px;
	border: 2px solid #f1f4fb;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Animações utilitárias */
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
@keyframes shine {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}
@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(88, 201, 253, 0.55); }
	50% { box-shadow: 0 0 0 14px rgba(88, 201, 253, 0); }
}

/* Reveal on scroll (controlado via Global.js) */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal[data-delay="100"] { transition-delay: .1s; }
.reveal[data-delay="200"] { transition-delay: .2s; }
.reveal[data-delay="300"] { transition-delay: .3s; }
.reveal[data-delay="400"] { transition-delay: .4s; }
.reveal[data-delay="500"] { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	html { scroll-behavior: auto; }
}

/* Foco acessível */
a:focus-visible, button:focus-visible, input:focus-visible {
	outline: 2px solid var(--color-blue-500);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Botão voltar ao topo */
.back-to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background: linear-gradient(135deg, var(--color-blue-500), var(--color-primary));
	color: var(--color-white);
	font-size: 16px;
	box-shadow: 0 10px 24px rgba(12, 41, 93, 0.35);
	opacity: 0;
	transform: translateY(20px) scale(.9);
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease, box-shadow .25s ease;
	z-index: 50;
}
.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.back-to-top:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 14px 28px rgba(12, 41, 93, 0.45);
}

/* Helpers */
.container { width: min(1200px, 96%); margin: 0 auto; }

/* Topbar (acima do header) */
.topbar {
	background: var(--color-white);
	color: var(--color-blue-700); /* textos na cor primária */
	border-bottom: 1px solid rgba(0,0,0,0.06);
	font-size: 14px;
    font-weight: 500;
	position: relative;
	z-index: 1; /* logo vai sobrepor */
}
.topbar__wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 20px 0;
	align-items: center;
}
.topbar__center {
	display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap;
}
.topbar__item { display: inline-flex; align-items: center; gap: 8px; transition: transform .25s ease, color .25s ease; }
.topbar__item i { color: var(--color-blue-700); opacity: .95; transition: transform .25s ease; }
.topbar a.topbar__item { text-decoration: none; color: inherit; }
.topbar a.topbar__item:hover { text-decoration: none; color: var(--color-primary); transform: translateY(-1px); }
.topbar a.topbar__item:hover i { transform: scale(1.1); }
/* Ícone do Whats com background circular */
.topbar__item i.fa-whatsapp {
	background: var(--color-whatsapp);
	color: var(--color-white);
	border-radius: 999px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.topbar__divider { opacity: .5; }
.topbar__right { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.topbar__social {
	color: var(--color-blue-700);
	font-size: 18px;
	opacity: .9;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	transition: all .3s ease;
}
.topbar__social:hover {
	opacity: 1;
	color: var(--color-white);
	background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
	transform: translateY(-2px) rotate(8deg);
	box-shadow: 0 6px 14px rgba(221, 42, 123, .35);
}

/* Header: estilos específicos foram movidos para header.css */

/* Responsivo: ajustes da topbar em mobile */
@media (max-width: 900px) {
	.topbar__wrap {
		grid-template-columns: 1fr auto;
		gap: 10px;
		padding: 10px 0;
	}
	
	.topbar__center {
		flex-direction: column;
		align-items: center;
		gap: 6px;
		font-size: 13px;
	}
	
	.topbar__right {
		align-self: flex-start;
		padding-top: 4px;
	}
	
	.topbar__divider {
		display: none;
	}
}

@media (max-width: 640px) {
	.topbar {
		font-size: 12px;
	}
	
	.topbar__center {
		font-size: 10px;
	}
	
	.topbar__item i.fa-whatsapp {
		width: 18px;
		height: 18px;
		font-size: 12px;
	}
}