/**
 * Fundação visual compartilhada por todas as páginas institucionais
 * construídas em código próprio (sem Elementor). Cores, tipografia,
 * container e botões — o vocabulário comum que qualquer nova página
 * institucional deste site deve reaproveitar.
 *
 * @package IDEP_Paginas_Institucionais
 */

:root {
	--idep-pi-roxo: #6b5095;
	--idep-pi-rosa: #e359a1;
	--idep-pi-laranja: #fcaf26;
	--idep-pi-verde: #37b550;
	--idep-pi-ciano: #1bb7d9;
	--idep-pi-fundo: #f6f7fd;
	--idep-pi-texto: #58595b;
	--idep-pi-texto-suave: #76767f;
	--idep-pi-branco: #ffffff;
	--idep-pi-fonte-titulo: 'Gabarito', sans-serif;
	--idep-pi-fonte-texto: 'Red Hat Text', sans-serif;
}

.idep-pi-page {
	background: var(--idep-pi-fundo);
	color: var(--idep-pi-texto);
	font-family: var(--idep-pi-fonte-texto);
	overflow-x: hidden;
}

.idep-pi-page * {
	box-sizing: border-box;
}

.idep-pi-container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	z-index: 1;
}

.idep-pi-page section {
	padding: 64px 0;
}

.idep-pi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--idep-pi-fonte-texto);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--idep-pi-roxo);
	background: rgba(107, 80, 149, 0.1);
	padding: 7px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.idep-pi-eyebrow--claro {
	color: var(--idep-pi-branco);
	background: rgba(255, 255, 255, 0.18);
}

.idep-pi-page h1,
.idep-pi-page h2,
.idep-pi-page h3 {
	font-family: var(--idep-pi-fonte-titulo);
	color: var(--idep-pi-texto);
	margin: 0 0 16px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.idep-pi-page h2 {
	font-size: clamp(1.9rem, 4vw, 2.7rem);
	font-weight: 800;
}

.idep-pi-page p {
	margin: 0 0 16px;
	line-height: 1.6;
}

.idep-pi-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
}

/* Botão principal, "pill", nas cores da marca — usar a classe de cor
 * junto (ex.: "idep-pi-botao idep-pi-botao--rosa"). */
.idep-pi-botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--idep-pi-fonte-texto);
	font-size: 15px;
	font-weight: 700;
	padding: 13px 26px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.idep-pi-botao:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 12px 24px -10px rgba(88, 60, 130, 0.35);
	text-decoration: none;
}

/* Indicador de foco visível para navegação por teclado. Usa um anel
 * duplo (branco + roxo) em vez de "outline: 1px solid" numa única cor:
 * assim o foco continua bem visível não importa se o botão está sobre
 * um fundo claro, escuro ou colorido (verde, roxo, laranja...) — uma
 * única cor de contorno ficaria invisível em algum desses fundos. */
.idep-pi-botao:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--idep-pi-branco), 0 0 0 6px var(--idep-pi-roxo);
}

.idep-pi-botao--rosa {
	background: var(--idep-pi-rosa);
	color: var(--idep-pi-branco);
}

.idep-pi-botao--laranja {
	background: var(--idep-pi-laranja);
	color: var(--idep-pi-texto);
}

.idep-pi-botao--roxo {
	background: var(--idep-pi-roxo);
	color: var(--idep-pi-branco);
}

.idep-pi-botao--branco {
	background: var(--idep-pi-branco);
	color: var(--idep-pi-roxo);
}

.idep-pi-link-seta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--idep-pi-fonte-texto);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.idep-pi-link-seta .idep-pi-icon {
	width: 1.3em;
	height: 1.3em;
	transition: transform 0.2s ease;
}

.idep-pi-link-seta:hover .idep-pi-icon {
	transform: translateX(4px);
}

/* Mesmo anel de foco duplo dos botões, aplicado aos links "saiba mais"
 * — sem isso, quem navega só pelo teclado não tinha nenhum indício
 * visual de qual link estava selecionado. */
.idep-pi-link-seta:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: 0 0 0 3px var(--idep-pi-branco), 0 0 0 6px var(--idep-pi-roxo);
}

.idep-pi-cor-roxo { color: var(--idep-pi-roxo); }
.idep-pi-cor-rosa { color: var(--idep-pi-rosa); }
.idep-pi-cor-laranja { color: var(--idep-pi-laranja); }
.idep-pi-cor-verde { color: var(--idep-pi-verde); }
.idep-pi-cor-ciano { color: var(--idep-pi-ciano); }

/* Selo circular colorido para ícones (cartões, estatísticas etc.) —
 * cada cartão fica com o ícone "encaixado" num círculo na sua cor, em
 * vez do ícone solto — dá mais unidade visual a listas de cartões. */
.idep-pi-badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	flex-shrink: 0;
}

.idep-pi-badge .idep-pi-icon {
	width: 26px;
	height: 26px;
}

.idep-pi-badge--roxo { background: rgba(107, 80, 149, 0.13); color: var(--idep-pi-roxo); }
.idep-pi-badge--rosa { background: rgba(227, 89, 161, 0.13); color: var(--idep-pi-rosa); }
.idep-pi-badge--laranja { background: rgba(252, 175, 38, 0.18); color: var(--idep-pi-laranja); }
.idep-pi-badge--verde { background: rgba(55, 181, 80, 0.14); color: var(--idep-pi-verde); }
.idep-pi-badge--ciano { background: rgba(27, 183, 217, 0.14); color: var(--idep-pi-ciano); }

/* Sombra suave padrão para cartões brancos sobre fundos com textura —
 * sem ela os cartões "somem" dentro do fundo claro da página. */
.idep-pi-sombra {
	box-shadow: 0 16px 40px -12px rgba(88, 60, 130, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.idep-pi-sombra:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 44px -14px rgba(88, 60, 130, 0.26);
}

/* Tarja: filete colorido no topo de um cartão, indicando a que
 * categoria/cor ele pertence — mesma linguagem em qualquer cartão do
 * site (estatística, dimensão, projeto...). */
.idep-pi-tarja {
	position: relative;
	overflow: hidden;
}

.idep-pi-tarja::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
}

.idep-pi-tarja--roxo::before { background: var(--idep-pi-roxo); }
.idep-pi-tarja--rosa::before { background: var(--idep-pi-rosa); }
.idep-pi-tarja--laranja::before { background: var(--idep-pi-laranja); }
.idep-pi-tarja--verde::before { background: var(--idep-pi-verde); }
.idep-pi-tarja--ciano::before { background: var(--idep-pi-ciano); }

/* Fileira de pontinhos coloridos — o pequeno motivo das "5 cores do
 * idep" reaproveitado como assinatura visual da página. */
.idep-pi-pontos {
	display: inline-flex;
	gap: 6px;
	margin-bottom: 14px;
}

.idep-pi-ponto {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.idep-pi-ponto--roxo { background: var(--idep-pi-roxo); }
.idep-pi-ponto--rosa { background: var(--idep-pi-rosa); }
.idep-pi-ponto--laranja { background: var(--idep-pi-laranja); }
.idep-pi-ponto--verde { background: var(--idep-pi-verde); }
.idep-pi-ponto--ciano { background: var(--idep-pi-ciano); }

/* Onda decorativa entre seções de cores diferentes — ver
 * idep_pi_onda() em inc/icons.php. A seção que a contém precisa de
 * "position: relative" e de padding-bottom extra para o texto não
 * ficar por baixo dela. */
.idep-pi-onda {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 44px;
	display: block;
	pointer-events: none;
}

@media (min-width: 700px) {
	.idep-pi-onda {
		height: 72px;
	}
}

/* Revelação suave ao rolar a página — aplicada via JS
 * (assets/interacoes.js) a qualquer elemento com [data-idep-reveal].
 * Sem JS, o elemento simplesmente aparece normal desde o início: a
 * classe que o esconde só é adicionada pelo próprio script. */
.idep-pi-reveal-init {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.idep-pi-reveal-init.idep-pi-reveal-in {
	opacity: 1;
	transform: none;
}

.idep-pi-reveal-atraso-1 { transition-delay: 0.08s; }
.idep-pi-reveal-atraso-2 { transition-delay: 0.16s; }
.idep-pi-reveal-atraso-3 { transition-delay: 0.24s; }
.idep-pi-reveal-atraso-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
	.idep-pi-reveal-init,
	.idep-pi-sombra,
	.idep-pi-botao,
	.idep-pi-link-seta .idep-pi-icon {
		transition: none !important;
	}
}