/* ==========================================================================
   BASE — reset, tokens de design, tipografia e utilitarios
   Toda cor, espacamento e fonte do site sai daqui. Alterar um token muda
   o site inteiro de forma consistente.
   ========================================================================== */

:root {
	/* ---- Paleta da marca (extraida do logotipo oficial) ---- */
	--cor-azul-profundo: #00486c;
	--cor-teal: #006c60;
	--cor-verde: #48a860;
	--cor-lima: #a8d860;
	--cor-lima-clara: #ccf0b4;

	/* ---- Neutros ---- */
	--cor-preto: #000000;
	--cor-grafite: #0b1b24;
	--cor-cinza: #6b7c85;
	--cor-cinza-claro: #f2f4f5;
	/* Fundo das secoes que usam ilustracao em relevo: precisa ser igual ao
	   fundo do proprio arquivo, senao aparecem as bordas retas do PNG. */
	--cor-superficie: #ececec;
	--cor-branco: #ffffff;

	/* ---- Papeis semanticos ---- */
	--cor-texto: var(--cor-grafite);
	--cor-texto-suave: var(--cor-cinza);
	--cor-texto-invertido: var(--cor-branco);
	--cor-destaque: var(--cor-lima);
	--cor-fundo: var(--cor-branco);
	--cor-fundo-escuro: var(--cor-preto);
	--cor-foco: var(--cor-lima);

	/* ---- Tipografia ----
	   Titulos e numeros: Instrument Sans. Textos corridos: Inter.
	   Os fallbacks sao fontes de sistema com metricas parecidas, para o
	   layout nao saltar enquanto a webfont carrega. */
	--fonte-titulo: "Instrument Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	--fonte-texto: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	--fonte-numeros: var(--fonte-titulo);

	/* ---- Pesos ----
	   Ambas sao fontes variaveis, entao qualquer valor intermediario
	   tambem funciona (por exemplo font-weight: 350).

	   ATENCAO aos intervalos reais de cada familia:
	   Inter ............ 100 a 900 (todos os tokens abaixo valem)
	   Instrument Sans .. 400 a 700 apenas

	   Usar 100/200/300 em um titulo (Instrument Sans) nao deixa o texto
	   mais leve: o navegador cai no 400 ou sintetiza um traco ruim.
	   Para texto fino de verdade, use Inter. */
	--peso-thin: 100;
	--peso-extralight: 200;
	--peso-light: 300;
	--peso-regular: 400;
	--peso-medio: 500;
	--peso-semibold: 600;
	--peso-bold: 700;
	--peso-extrabold: 800;
	--peso-black: 900;

	/* Escala fluida: cresce com a viewport sem media query */
	--texto-xs: 0.75rem;      /* 12px */
	--texto-sm: 0.8125rem;    /* 13px */
	--texto-base: 1rem;       /* 16px */
	--texto-lg: clamp(1.125rem, 0.4vw + 1rem, 1.375rem);
	--texto-xl: clamp(1.5rem, 1vw + 1.1rem, 2rem);
	--titulo-hero: clamp(1.875rem, 2.6vw + 0.75rem, 3rem);
	/* Titulo padrao das secoes internas: todas usam estes tres valores,
	   para o ritmo tipografico ser o mesmo do topo ao rodape. */
	--titulo-secao: clamp(1.75rem, 2.4vw + 0.75rem, 2.75rem);
	--titulo-secao-altura: 1.15;
	--titulo-secao-tracking: -0.02em;

	/* ---- Layout ---- */
	--largura-maxima: 1456px;
	/* Margem lateral padrao do CONTEUDO. Medida no Figma: a barra do menu
	   comeca em X=50 num frame de 1456px, ou seja 3.43% da largura.
	   Vale para cabecalho, rodape e qualquer secao futura via .container.
	   Imagens de fundo continuam full-bleed. */
	--respiro-lateral: clamp(1.25rem, 3.43vw, 3.125rem);
	/* Recuo extra do texto dentro de secoes com imagem de fundo:
	   no layout o titulo do hero comeca a ~7.3% da borda. */
	--respiro-conteudo-hero: clamp(1.5rem, 3.9vw, 4.25rem);
	/* Recuo interno usado pelas secoes de conteudo. Fica separado do
	   --respiro-lateral para poder ser cancelado quando algum elemento
	   precisa sangrar ate a borda da tela. */
	--respiro-secao: calc(var(--respiro-lateral) + clamp(0.5rem, 2vw, 2rem));
	--raio-pilula: 999px;
	--raio-padrao: 16px;

	/* ---- Motion ---- */
	--transicao-rapida: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--transicao-media: 320ms cubic-bezier(0.4, 0, 0.2, 1);
	--transicao-suave: 700ms cubic-bezier(0.16, 1, 0.3, 1);

	/* ---- Camadas ---- */
	--z-cabecalho: 900;
	--z-menu-mobile: 950;
}

/* ==========================================================================
   Reset enxuto
   ========================================================================== */

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

* {
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Compensa o cabecalho fixo quando o usuario clica numa ancora */
	scroll-padding-top: 120px;
}

body {
	background-color: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: var(--fonte-texto);
	font-size: var(--texto-base);
	font-weight: var(--peso-regular);
	line-height: 1.6;
	min-height: 100vh;
	/* Impede rolagem lateral das secoes que sangram alem da tela.
	   Fallback para navegadores sem overflow: clip. */
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* overflow-x: hidden no body faz dele o contexto de rolagem da pagina em
   varios navegadores — e ai position: fixed passa a se comportar como
   absolute, fazendo o cabecalho rolar junto. O clip recorta igual, mas sem
   criar contexto de rolagem, entao o cabecalho continua fixo. */
@supports (overflow: clip) {
	body {
		overflow-x: clip;
	}
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* O <picture> e so um involucro para escolher o arquivo — nao deve criar
   uma caixa propria. Com display: contents ele sai da arvore de layout e o
   <img> passa a dimensionar direto contra o container da secao; caso
   contrario, um height: 100% no <img> mediria a altura do <picture>, que e
   automatica, e a imagem encolheria. */
picture {
	display: contents;
}

/* Consequencia do display: contents — os filhos do <picture> passam a ser
   itens do layout do pai, e cada <source> ocuparia uma celula em grid ou
   flex, empurrando a imagem de lugar. Eles nao renderizam nada, entao saem
   do fluxo de forma explicita. */
picture > source {
	display: none;
}

ul,
ol {
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
}

h1,
h2,
h3,
h4 {
	font-family: var(--fonte-titulo);
	font-weight: var(--peso-bold);
	line-height: 1.18;
	text-wrap: balance;
}

/* Numeros em destaque (indicadores, estatisticas) usam a fonte dos titulos,
   com algarismos de largura fixa para nao dancarem quando animados. */
.numero-destaque {
	font-family: var(--fonte-numeros);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

address {
	font-style: normal;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--largura-maxima);
	margin-inline: auto;
	padding-inline: var(--respiro-lateral);
}

.conteudo-principal--interno {
	padding-block: clamp(7rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem);
}

/* ==========================================================================
   Acessibilidade
   ========================================================================== */

/* Link que aparece ao dar Tab, permitindo pular a navegacao */
.pular-para-conteudo {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	background-color: var(--cor-lima);
	color: var(--cor-grafite);
	border-radius: var(--raio-pilula);
	font-size: var(--texto-sm);
	font-weight: var(--peso-semibold);
	transition: top var(--transicao-rapida);
}

.pular-para-conteudo:focus {
	top: 1rem;
}

:focus-visible {
	outline: 2px solid var(--cor-foco);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Visivel apenas para leitores de tela */
.apenas-leitor-tela {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Animacoes de entrada
   Elementos com .anima-entrada comecam invisiveis e sobem levemente.
   O JS adiciona .esta-visivel quando entram na viewport.
   ========================================================================== */

.anima-entrada {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--transicao-suave),
		transform var(--transicao-suave);
	transition-delay: var(--atraso-anima, 0ms);
	will-change: opacity, transform;
}

.anima-entrada.esta-visivel {
	opacity: 1;
	transform: none;
}

/* Respeita quem pediu menos movimento no sistema operacional */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

	.anima-entrada {
		opacity: 1;
		transform: none;
	}
}