/* ==========================================================================
   UENP Programas e Projetos — fundação
   Tokens, reset, tipografia, utilitários e animações.
   ========================================================================== */

:root {
	/* Marca ------------------------------------------------------------- */
	--u-navy: #152875;
	--u-navy-900: #0b1440;
	--u-navy-800: #101d5c;
	--u-navy-700: #1b3390;
	--u-navy-600: #2440ad;
	--u-blue-500: #3358d4;
	--u-blue-400: #5b7ce8;
	--u-blue-200: #b7c6f5;
	--u-blue-100: #dde4fb;
	--u-blue-50: #eef2fe;

	--u-gold: #e0a32e;
	--u-gold-dark: #b57d13;

	/* Destaque da seção (sobrescrito por inc/branding.php) --------------- */
	--u-accent: #152875;
	--u-accent-dark: #0b1440;
	--u-accent-soft: #eef2fe;

	/* Neutros ------------------------------------------------------------ */
	--u-ink: #131735;
	--u-ink-2: #3c4262;
	--u-muted: #666d8c;
	--u-muted-2: #8b91ab;
	--u-line: #e2e6f2;
	--u-line-2: #eef0f7;
	--u-bg: #ffffff;
	--u-bg-soft: #f6f8fd;
	--u-bg-tint: #eff3fc;

	/* Tipografia --------------------------------------------------------- */
	--u-font-head: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--u-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--u-fs-xs: 0.75rem;
	--u-fs-sm: 0.8438rem;
	--u-fs-base: 1rem;
	--u-fs-md: 1.0625rem;
	--u-fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
	--u-fs-xl: clamp(1.375rem, 0.9vw + 1.16rem, 1.75rem);
	--u-fs-2xl: clamp(1.75rem, 1.8vw + 1.33rem, 2.5rem);
	--u-fs-3xl: clamp(2.25rem, 3.4vw + 1.45rem, 3.75rem);

	/* Espaçamento -------------------------------------------------------- */
	--u-gap: 1.5rem;
	--u-section: clamp(3.5rem, 6vw, 6.5rem);
	--u-container: 1240px;
	--u-container-pad: clamp(1.125rem, 4vw, 2.5rem);

	/* Formas ------------------------------------------------------------- */
	--u-r-sm: 8px;
	--u-r: 14px;
	--u-r-lg: 20px;
	--u-r-xl: 28px;
	--u-r-pill: 999px;

	--u-shadow-sm: 0 1px 2px rgba(19, 23, 53, 0.06), 0 2px 8px rgba(19, 23, 53, 0.04);
	--u-shadow: 0 4px 12px rgba(19, 23, 53, 0.07), 0 12px 32px rgba(19, 23, 53, 0.06);
	--u-shadow-lg: 0 10px 24px rgba(19, 23, 53, 0.1), 0 28px 64px rgba(19, 23, 53, 0.11);
	--u-shadow-navy: 0 18px 48px rgba(21, 40, 117, 0.28);

	/* Movimento ---------------------------------------------------------- */
	--u-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--u-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--u-t-fast: 160ms;
	--u-t: 260ms;
	--u-t-slow: 520ms;

	--u-header-h: 76px;
	--u-topbar-h: 40px;
}

/* --------------------------------------------------------------- Reset --- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--u-header-h) + 24px);
}

body {
	margin: 0;
	background: var(--u-bg);
	color: var(--u-ink-2);
	font-family: var(--u-font-body);
	font-size: var(--u-fs-md);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.is-locked {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--u-font-head);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.018em;
	color: var(--u-ink);
	text-wrap: balance;
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--u-navy-700);
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.18em;
	transition: color var(--u-t-fast) var(--u-ease), text-decoration-color var(--u-t-fast) var(--u-ease);
}

a:hover {
	color: var(--u-accent);
	text-decoration-color: currentColor;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
	display: block;
}

ul, ol {
	padding-left: 1.25rem;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

figure {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--u-line);
	margin: 2.5rem 0;
}

::selection {
	background: var(--u-navy);
	color: #fff;
}

/* ------------------------------------------------------- Acessibilidade --- */

.u-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.u-skip {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	transform: translateY(-160%);
	padding: 0.75rem 1.25rem;
	background: var(--u-navy);
	color: #fff;
	border-radius: var(--u-r-sm);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--u-shadow-lg);
	transition: transform var(--u-t) var(--u-ease-out);
}

.u-skip:focus {
	transform: translateY(0);
	color: #fff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--u-blue-400);
	outline-offset: 2px;
	border-radius: 4px;
}

main:focus {
	outline: none;
}

/* ------------------------------------------------------------- Layout ----- */

.u-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.u-main {
	flex: 1 0 auto;
}

.u-container {
	width: 100%;
	max-width: var(--u-container);
	margin-inline: auto;
	padding-inline: var(--u-container-pad);
}

.u-icon {
	flex: none;
	display: block;
}

/* --------------------------------------------------------- Tipografia ----- */

.u-h2 {
	font-size: var(--u-fs-2xl);
	font-weight: 800;
	color: var(--u-ink);
}

.u-h2--center {
	text-align: center;
}

.u-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.75rem;
	font-family: var(--u-font-head);
	font-size: var(--u-fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--u-accent);
}

.u-eyebrow--center {
	justify-content: center;
	width: 100%;
}

.u-eyebrow__line {
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.55;
}

/* ------------------------------------------------------------ Animação ---- */

@keyframes u-fade-up {
	from { opacity: 0; transform: translate3d(0, 18px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes u-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes u-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(0, -22px, 0) scale(1.04); }
}

@keyframes u-pulse {
	0%   { transform: scale(1); opacity: 1; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

@keyframes u-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes u-scroll-dot {
	0%   { transform: translateY(0); opacity: 0; }
	28%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { transform: translateY(13px); opacity: 0; }
}

@keyframes u-sheen {
	from { transform: translateX(-120%) skewX(-18deg); }
	to   { transform: translateX(320%) skewX(-18deg); }
}

/* Entrada imediata (herói) */
.u-anim {
	animation: u-fade-up 760ms var(--u-ease-out) both;
	animation-delay: var(--d, 0ms);
}

/* Entrada por rolagem (IntersectionObserver em main.js).
   O estado inicial só é aplicado quando o JS está ativo — sem JS, nada
   pode ficar invisível. */
.js [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition:
		opacity 720ms var(--u-ease-out),
		transform 720ms var(--u-ease-out);
	transition-delay: var(--rd, 0ms);
	will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal],
	.u-anim {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ------------------------------------------------------------ Impressão --- */

@media print {
	.u-topbar,
	.u-header,
	.u-drawer,
	.u-searchpanel,
	.u-footer,
	.u-totop,
	.u-progress,
	.u-page__aside,
	.u-hero__bg {
		display: none !important;
	}

	body {
		color: #000;
		font-size: 12pt;
	}

	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
}