/* ==========================================================================
   Processo Seletivo Pós — Ciclo
   Estilos isolados a esta página (Template Name: Processo Seletivo Pós —
   Ciclo). Não altera style.css/custom.css globais. Usa a grade
   container/row/col já existente no tema; define aqui só os componentes
   novos (hero, cards, chips, cronologia, stepper, avisos).

   Paleta institucional (não é a paleta padrão do restante do site):
   Azul IC   #005A9C
   Laranja IC #F58220
   ========================================================================== */

.psp-page {
	--psp-blue: #005A9C;
	--psp-blue-dark: #003D6B;
	--psp-orange: #F58220;
	--psp-ink: #1A1A1A;
	--psp-muted: #5B6470;
	--psp-border: #E1E6EC;
	/* Mesmo cinza do #main-footer do tema (#f9f9f9) — neutro, sem tingimento azulado. */
	--psp-bg-alt: #F9F9F9;
	/* Indicador de foco: fixo entre os dois esquemas de cor (acessibilidade,
	   não é uma escolha de marca) — não é sobrescrito por .psp-scheme-site. */
	--psp-focus: #F58220;
	overflow-x: hidden;
}

/* Esquema alternativo: azul-marinho e cinza, como no mockup original
   aprovado — em vez das cores institucionais Azul/Laranja IC. */
.psp-page.psp-scheme-site {
	--psp-blue: #14304D;
	--psp-blue-dark: #0A1B2E;
	--psp-orange: #444444;
	/* Títulos e texto de corpo também em azul-marinho (igual ao hero),
	   em vez do preto/cinza-escuro usado no esquema institucional. */
	--psp-ink: #14304D;
}

/* Independente do esquema acima: troca só o fundo do hero para
   azul-marinho (valor fixo, não a variável --psp-blue), mantendo azul e
   laranja institucionais em cards, chips, botões etc. no resto da página. */
.psp-page.psp-hero-navy .psp-hero {
	background-color: #14304D;
}

.psp-page section {
	padding: 56px 0;
}

.psp-page .psp-section-alt {
	background-color: var(--psp-bg-alt);
}

/* Foco visível — o reset do tema zera outline globalmente, então
   restauramos explicitamente dentro do escopo desta página. */
.psp-page a:focus-visible,
.psp-page button:focus-visible {
	outline: 3px solid var(--psp-focus);
	outline-offset: 2px;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.psp-hero {
	background-color: var(--psp-blue);
	color: #ffffff;
	padding: 48px 0 40px;
}

.psp-kicker {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #BFD9EE;
	margin-bottom: 12px;
}

.psp-hero-title {
	font-family: 'Frank Ruhl Libre', 'Times New Roman', Times, serif;
	font-weight: 900;
	font-size: 42px;
	line-height: 1.1;
	color: #ffffff;
	margin-bottom: 8px;
}

.psp-hero-subtitle {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #E7F0F8;
	margin-bottom: 20px;
}

.psp-badge {
	display: inline-block;
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--psp-blue-dark);
	background-color: #ffffff;
	border-radius: 999px;
	padding: 8px 18px;
	margin-bottom: 28px;
}

.psp-badge-muted {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.18);
}

.psp-badge-info {
	color: #7A3E00;
	background-color: #FCE3C6;
}

.psp-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 20px;
	margin-bottom: 28px;
}

.psp-hero-meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.psp-hero-meta-label {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #BFD9EE;
}

.psp-hero-meta-value {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
}

.psp-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.psp-final-actions {
	margin-top: 32px;
}

/* ── Botões ──────────────────────────────────────────────────────────── */

.psp-btn {
	display: inline-block;
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 6px;
	padding: 13px 26px;
	border: 2px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.psp-btn-outline {
	color: #ffffff;
	border-color: #ffffff;
	background-color: transparent;
}

.psp-btn-outline:hover {
	/* --psp-focus é fixo (laranja) nos dois esquemas de cor — o hover dos
	   botões outline do hero continua laranja mesmo no esquema azul-marinho/cinza. */
	background-color: var(--psp-focus);
	border-color: var(--psp-focus);
	color: #ffffff;
}

.psp-btn-outline-dark {
	color: var(--psp-blue);
	border-color: var(--psp-blue);
	background-color: transparent;
}

.psp-btn-outline-dark:hover {
	background-color: var(--psp-blue);
	color: #ffffff;
}

.psp-btn-fill {
	color: #ffffff;
	border-color: var(--psp-orange);
	background-color: var(--psp-orange);
}

.psp-btn-fill:hover {
	background-color: #D96E0F;
	border-color: #D96E0F;
}

/* ── Cabeçalhos de seção ─────────────────────────────────────────────── */

.psp-eyebrow {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--psp-orange);
	margin-bottom: 8px;
}

.psp-section-title {
	font-family: 'Frank Ruhl Libre', 'Times New Roman', Times, serif;
	font-weight: 900;
	font-size: 30px;
	color: var(--psp-ink);
	margin-bottom: 16px;
}

.psp-subheading {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--psp-ink);
	margin: 32px 0 16px;
}

.psp-lead,
.psp-richtext {
	font-size: 16px;
	line-height: 1.6;
	color: var(--psp-muted);
	max-width: 860px;
}

.psp-richtext p + p {
	margin-top: 12px;
}

.psp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--psp-blue);
	text-decoration: none;
}

.psp-link-arrow::after {
	content: '\2192';
	transition: transform 0.15s ease;
}

.psp-link-arrow:hover::after {
	transform: translateX(4px);
}

.psp-link-arrow:hover {
	text-decoration: underline;
}

/* ── Cards de programa (Mestrado / Doutorado) ───────────────────────── */

.psp-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 24px;
}

.psp-program-card {
	display: flex;
	flex-direction: column;
	border-top: 4px solid var(--psp-blue);
	background-color: #ffffff;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Empurra o CTA para a base do card, mesmo quando os dois cards da linha
   (.psp-grid-2, que já esticam para a mesma altura) têm listas de tamanhos
   diferentes — os links ficam alinhados horizontalmente. */
.psp-program-card > .psp-link-arrow {
	margin-top: auto;
}

.psp-program-card h3 {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--psp-ink);
	margin-bottom: 8px;
}

.psp-program-card p {
	font-size: 15px;
	color: var(--psp-muted);
	margin-bottom: 12px;
}

.psp-list-compact {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.psp-list-compact li {
	position: relative;
	padding-left: 17px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--psp-muted);
}

.psp-list-compact li + li {
	margin-top: 5px;
}

/* Chevron em vez de bolinha — ecoa a seta usada em .psp-link-arrow, dando
   uma sensação de progressão em vez de uma lista genérica. */
.psp-list-compact li::before {
	content: '\203A';
	position: absolute;
	left: 0;
	top: -1px;
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: var(--psp-blue);
}

/* ── Grid de destaques (3 colunas) ───────────────────────────────────── */

.psp-grid-3 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 8px;
}

.psp-highlight-card {
	background-color: #ffffff;
	border: 1px solid var(--psp-border);
	border-top: 3px solid var(--psp-orange);
	padding: 22px;
}

.psp-highlight-card h3,
.psp-highlight-card h4 {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--psp-ink);
	margin-bottom: 8px;
}

.psp-highlight-card p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--psp-muted);
}

/* ── Grid de 4 colunas (Bolsas e apoio) ─────────────────────────────────
   Mobile: 1 coluna. Tablet: 2. Desktop: 4 lado a lado — os quatro textos
   são curtos (uma frase cada), então cabem sem espremer a leitura; se
   ficasse apertado, a alternativa seria 2×2. */
.psp-grid-4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 28px;
	margin-bottom: 28px;
}

@media (min-width: 768px) {
	.psp-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.psp-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ── Áreas e linhas de pesquisa ──────────────────────────────────────── */

.psp-area-card {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border: 1px solid var(--psp-border);
	border-top: 3px solid var(--psp-blue);
	padding: 24px;
}

/* Faixa superior alternando azul/laranja — as três áreas não têm
   hierarquia entre si, então a variação só dá mais vida ao conjunto
   (mesma lógica usada nos cards de Bolsas). */
.psp-area-card:nth-child(even) {
	border-top-color: var(--psp-orange);
}

.psp-area-card h4 {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--psp-ink);
}

.psp-area-card-meta {
	font-size: 13px;
	color: var(--psp-muted);
	margin: 4px 0 14px;
}

.psp-area-card .psp-list-compact {
	margin-bottom: 20px;
}

/* Empurra o CTA para a base do card — mesmo padrão de .psp-program-card,
   para os três cards ficarem com os links alinhados quando lado a lado
   (.psp-grid-3 já estica os itens da mesma linha para a mesma altura). */
.psp-area-card > .psp-link-arrow {
	margin-top: auto;
}

/* ── Ambiente de pesquisa ────────────────────────────────────────────── */

.psp-ambiente-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

.psp-ambiente-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.psp-ambiente-text .psp-lead {
	margin-bottom: 20px;
}

/* ── Avisos ("Importante", "salvar inscrição") ──────────────────────── */

.psp-notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background-color: #ffffff;
	border: 1px solid var(--psp-border);
	border-left: 4px solid var(--psp-blue);
	padding: 16px 20px;
	margin: 24px 0;
	font-size: 14px;
	font-style: italic;
	color: var(--psp-ink);
}

.psp-notice strong {
	color: var(--psp-blue-dark);
	font-style: normal;
}

.psp-notice p {
	color: var(--psp-muted);
	margin: 0;
}

/* Variante com ícone (aviso "Importante" de Bolsas) — decorativo, não
   entra na árvore de acessibilidade (aria-hidden no SVG); o texto por si
   só já comunica o significado. */
.psp-notice--icon {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	margin: 32px 0;
	padding: 20px 24px;
}

.psp-notice-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--psp-blue);
}

/* ── Cronologia (datas do processo seletivo) ────────────────────────── */

.psp-timeline {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.psp-timeline-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 20px;
	background-color: #ffffff;
	border: 1px solid var(--psp-border);
	border-left: 4px solid var(--psp-orange);
}

.psp-timeline-item:nth-child(even) {
	border-left-color: var(--psp-blue);
}

.psp-timeline-label {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--psp-muted);
}

.psp-timeline-value {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--psp-ink);
}

/* ── Etapas da candidatura (stepper) ─────────────────────────────────── */

.psp-steps {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.psp-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.psp-step-number {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--psp-blue);
	color: #ffffff;
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 14px;
}

.psp-step:nth-child(even) .psp-step-number {
	background-color: var(--psp-orange);
}

.psp-step-body h4 {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--psp-ink);
	margin-bottom: 4px;
}

.psp-step-body p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--psp-muted);
	margin: 0;
}

.psp-step-body .psp-link-arrow {
	margin-top: 2px;
	font-size: 14px;
}

/* Compensa a ausência do link contextual nos passos 3/4, equilibrando com o espaçamento 1/2 e 2/3. */
.psp-steps > .psp-step:nth-child(3) {
	margin-bottom: 23px;
}

/* ── Documentos para inscrição ───────────────────────────────────────── */

.psp-docs-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 4px;
}

.psp-doc-item {
	padding: 16px 0;
	border-top: 1px solid var(--psp-border);
}

.psp-doc-item:first-child {
	border-top: none;
	padding-top: 0;
}

.psp-doc-item h4 {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--psp-ink);
	margin-bottom: 4px;
}

.psp-doc-item p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--psp-muted);
	margin: 0;
}

@media (min-width: 768px) {
	.psp-docs-grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}

	.psp-doc-item:nth-child(2) {
		border-top: none;
		padding-top: 0;
	}

	.psp-doc-item:nth-child(3),
	.psp-doc-item:nth-child(4) {
		border-top: 1px solid var(--psp-border);
	}
}

/* ── Alto contraste (toggle já existente no tema) ───────────────────── */

body.contrast .psp-hero {
	background-color: #000000;
}

body.contrast .psp-highlight-card,
body.contrast .psp-program-card,
body.contrast .psp-area-card,
body.contrast .psp-timeline-item,
body.contrast .psp-notice {
	border-color: #000000;
}

body.contrast .psp-btn-fill {
	background-color: #000000;
	border-color: #000000;
}

/* ── Responsivo ──────────────────────────────────────────────────────── */

@media (min-width: 768px) {
	.psp-hero-title {
		font-size: 52px;
	}

	.psp-grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.psp-grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.psp-ambiente-grid {
		grid-template-columns: 1.1fr 1fr;
	}
}

@media (min-width: 992px) {
	.psp-page section {
		padding: 72px 0;
	}

	.psp-hero {
		padding: 64px 0 56px;
	}
}

/* ==========================================================================
   v3 — Evolução visual (hierarquia, profundidade, ritmo)
   Escopado a .psp-evolved (campo ACF "Versão de layout"). Não altera a
   aparência das páginas com a versão original do template — reaproveita
   os componentes/classes já existentes acima, sem nova paleta, fonte ou
   dependência.
   ========================================================================== */

/* Elemento novo usado só nesta versão (placeholder visual de "Ambiente de
   pesquisa") fica oculto por padrão e só aparece dentro de .psp-evolved. */
.psp-ambiente-placeholder {
	display: none;
}

/* ── Ritmo de fundos por seção ───────────────────────────────────────────
   Pesquisa e Bolsas continuam usando .psp-section-alt (cinza institucional
   já existente). Ambiente ganha uma superfície própria e sutil para se
   diferenciar como "capítulo" da pesquisa; Processo Seletivo (a seção mais
   operacional) ganha um fundo levemente distinto para que o painel de
   datas/etapas "flutue" em branco sobre ele — não é alternância mecânica,
   é agrupamento por assunto. */

.psp-evolved .psp-section-ambiente {
	background-color: color-mix(in srgb, var(--psp-blue) 5%, #ffffff);
}

.psp-evolved .psp-section-final {
	background-color: #F3F6F9;
	border-top: 1px solid var(--psp-border);
}

/* ── Introdução editorial (Pós-Graduação) ────────────────────────────────
   Mantém parágrafos como texto corrido; só reforça a leitura. */

.psp-evolved .psp-section-pg .psp-section-title {
	margin-bottom: 36px;
}

.psp-section-title--lg {
	font-size: 36px;
	color: var(--psp-orange);
}

.psp-evolved .psp-section-pg .psp-richtext {
	font-size: 17px;
	line-height: 1.7;
}

/* Mais respiro acima e abaixo dos cards de Mestrado/Doutorado. */
.psp-evolved .psp-section-pg .psp-grid-2 {
	margin-top: 40px;
	margin-bottom: 16px;
}

/* ── Mestrado / Doutorado: maior presença visual ─────────────────────────
   Nível de destaque mais alto da página, junto do hero e do CTA de
   inscrição. Padding maior, faixa superior mais evidente, sombra suave. */

.psp-evolved .psp-program-card {
	padding: 32px 28px;
	border: 1px solid var(--psp-border);
	border-top: 6px solid var(--psp-blue);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}

.psp-evolved .psp-program-card--doutorado {
	border-top-color: var(--psp-orange);
}

.psp-evolved .psp-program-card h3 {
	font-size: 20px;
}

/* ── "O Programa em destaque": composição editorial, não cards ──────────
   Deliberadamente mais discreto que Mestrado/Doutorado acima: sem fundo,
   borda ou sombra — três colunas de texto com um traço linear sobre o
   título e divisores muito sutis entre elas (verticais no desktop,
   horizontais quando empilham no mobile). O traço e os divisores são
   puramente decorativos (::before / border), não entram na árvore de
   acessibilidade e não são a única forma de associar título e texto —
   a ordem do documento já faz isso. */

.psp-evolved .psp-section-pg .psp-grid-3 {
	margin-top: 20px;
	row-gap: 28px;
}

/* Mesmo tamanho do h3 dos cards de Mestrado/Doutorado (20px), para o título
   da seção não parecer pequeno perto deles. */
.psp-evolved .psp-section-pg .psp-subheading {
	font-size: 20px;
}

.psp-evolved .psp-section-pg .psp-highlight-card {
	background: none;
	border: none;
	padding: 0;
}

.psp-evolved .psp-section-pg .psp-highlight-card h4 {
	position: relative;
	padding-top: 16px;
	font-size: 17px;
}

.psp-evolved .psp-section-pg .psp-highlight-card h4::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 2px;
	background-color: var(--psp-blue);
}

.psp-evolved .psp-section-pg .psp-highlight-card p {
	font-size: 15px;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.psp-evolved .psp-section-pg .psp-grid-3 {
		column-gap: 44px;
	}

	.psp-evolved .psp-section-pg .psp-grid-3 > *:not(:first-child) {
		border-left: 1px solid var(--psp-border);
		padding-left: 28px;
	}
}

@media (max-width: 767px) {
	.psp-evolved .psp-section-pg .psp-grid-3 > *:not(:first-child) {
		border-top: 1px solid var(--psp-border);
		padding-top: 20px;
	}
}

/* ── Bolsas: peso intermediário ──────────────────────────────────────── */

.psp-evolved .psp-grid-4--bolsas .psp-highlight-card {
	border: 1px solid var(--psp-border);
	border-top: 3px solid var(--psp-blue);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	padding: 24px;
}

/* Faixa superior alternando azul/laranja institucionais — dá um pouco
   mais de vida aos 4 cards, já que aqui não há hierarquia entre eles
   (ao contrário de Mestrado/Doutorado, onde a cor tem significado). */
.psp-grid-4--bolsas .psp-highlight-card:nth-child(odd) {
	border-top-color: var(--psp-blue);
}

.psp-grid-4--bolsas .psp-highlight-card:nth-child(even) {
	border-top-color: var(--psp-orange);
}

/* ── Aviso "Importante" / "continuar depois": tratamento próprio ───────
   Superfície tintada em vez de branco com borda lateral — lê como
   informação relevante, não como alerta de erro (sem vermelho). */

.psp-evolved .psp-notice {
	background-color: color-mix(in srgb, var(--psp-blue) 6%, #ffffff);
	border: 1px solid color-mix(in srgb, var(--psp-blue) 16%, #ffffff);
	border-left: none;
	padding: 18px 22px;
}

/* ── Pesquisa no IC: peso intermediário para os cards de área ───────────
   Sombra suave só onde a página já usa sombra (modo evoluído) — mesma
   lógica aplicada aos cards de Bolsas. */

.psp-evolved .psp-section-pesquisa .psp-area-card {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* ── Ambiente de pesquisa: mais presença, preparado para receber imagem ──
   Sem foto real ainda: reserva o espaço com um padrão geométrico sutil em
   vez de deixar a coluna vazia. Puramente decorativo (aria-hidden). */

.psp-evolved .psp-ambiente-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	border-radius: 4px;
	border: 1px dashed color-mix(in srgb, var(--psp-blue) 30%, #ffffff);
	background-image: repeating-linear-gradient(
		135deg,
		color-mix(in srgb, var(--psp-blue) 6%, transparent) 0,
		color-mix(in srgb, var(--psp-blue) 6%, transparent) 10px,
		transparent 10px,
		transparent 20px
	);
}

.psp-ambiente-placeholder-label {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--psp-blue);
	background-color: #ffffff;
	padding: 6px 14px;
	border-radius: 999px;
}

/* ── Processo seletivo: painel operacional ──────────────────────────────
   Agrupa datas + etapas + aviso num único plano branco elevado sobre o
   fundo da seção — reforça que esta é a parte "prática" da página. */

.psp-process-panel {
	margin-top: 28px;
}

.psp-evolved .psp-process-panel {
	background-color: #ffffff;
	border: 1px solid var(--psp-border);
	padding: 32px 28px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Datas: de cards individuais para uma leitura rápida em linha, com marca
   lateral em vez de caixa fechada — mesma linguagem do meta do hero. */
.psp-evolved .psp-timeline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 28px;
}

.psp-evolved .psp-timeline-item {
	flex: 1 1 170px;
	padding: 0 0 0 16px;
	background: transparent;
	border: none;
	border-left: 3px solid var(--psp-blue);
}

.psp-evolved .psp-timeline-item:nth-child(even) {
	border-left-color: var(--psp-orange);
}

/* Etapas: linha vertical conectando os números, reforçando a sequência. */
.psp-evolved .psp-steps {
	position: relative;
}

.psp-evolved .psp-steps::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 4px;
	bottom: 4px;
	width: 2px;
	background-color: var(--psp-border);
}

.psp-evolved .psp-step-number {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	.psp-evolved .psp-program-card {
		padding: 22px 20px;
	}

	.psp-evolved .psp-process-panel {
		padding: 22px 18px;
	}

	.psp-evolved .psp-timeline {
		flex-direction: column;
		gap: 16px;
	}

	/* flex: 1 1 170px é para a leitura em linha (desktop); em coluna, a
	   base de 170px vira altura mínima e infla cada item com espaço vazio. */
	.psp-evolved .psp-timeline-item {
		flex: 1 1 auto;
	}

	.psp-evolved .psp-ambiente-placeholder {
		min-height: 160px;
	}
}

/* ── Vídeos institucionais ────────────────────────────────────────────── */

.psp-videos-grid {
	align-items: start;
	margin-top: 40px;
}

.psp-video-titulo {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--psp-ink);
	margin-top: 10px;
}

.psp-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background-color: #000000;
}

.psp-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ── Redes sociais ─────────────────────────────────────────────────────
   Mesma lógica visual de .psp-program-card (Mestrado/Doutorado): dois
   cards lado a lado, cada um com uma cor de destaque institucional
   diferente — sem cores de marca (rosa do Instagram, vermelho do
   YouTube), para manter a paleta azul/laranja do restante da página. */

.psp-social-grid {
	margin-top: 8px;
}

.psp-social-card {
	display: flex;
	flex-direction: column;
	border-top: 4px solid var(--psp-blue);
	background-color: #ffffff;
	padding: 22px 24px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.psp-social-card--youtube {
	border-top-color: var(--psp-orange);
}

.psp-social-icon-wrap {
	margin: 0 0 14px;
	line-height: 0;
}

.psp-social-icon {
	width: 44px;
	height: 44px;
}

/* Oculta visualmente mantendo acessível a leitores de tela — o nome da
   rede (campo ACF "título") deixa de aparecer na tela porque o logo já
   comunica isso visualmente, mas continua disponível via leitor de tela. */
.psp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.psp-social-card p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--psp-muted);
	margin-bottom: 12px;
}

/* Empurra o CTA para a base do card, como em .psp-program-card, para os
   links ficarem alinhados quando os dois cards têm textos de tamanhos
   diferentes (.psp-grid-2 já estica os itens da mesma linha). */
.psp-social-card > .psp-link-arrow {
	margin-top: auto;
}

body.contrast .psp-social-card {
	border-color: #000000;
}

/* ── Encerramento (dúvidas) ──────────────────────────────────────────── */

/* Especificidade extra (.psp-page + classe) para vencer ".psp-page section",
   que senão reaplicaria os 56/72px de padding vertical padrão das seções
   e devolveria o espaço em branco enorme antes do rodapé. */
.psp-page .psp-section-duvidas {
	padding: 56px 0 0;
	border-top: 1px solid var(--psp-border);
}

.psp-duvidas-title {
	font-family: 'Frank Ruhl Libre', 'Times New Roman', Times, serif;
	font-weight: 900;
	font-size: 22px;
	color: var(--psp-ink);
	margin-bottom: 8px;
}

.psp-duvidas-texto {
	font-size: 15px;
	line-height: 1.6;
	color: var(--psp-muted);
	max-width: 640px;
	margin-bottom: 16px;
}

.psp-duvidas-texto a {
	color: var(--psp-blue);
	font-weight: 700;
	text-decoration: underline;
}

.psp-duvidas-texto a:hover {
	color: var(--psp-orange);
}

.psp-duvidas-contatos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.psp-duvidas-contatos a {
	display: inline-block;
	padding: 6px 0;
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--psp-blue);
	text-decoration: none;
}

.psp-duvidas-contatos a:hover {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.psp-duvidas-contatos {
		flex-direction: column;
		gap: 2px;
	}

	.psp-duvidas-contatos a {
		padding: 10px 0;
	}
}

/* ── Fechamento (chamada final para candidatura) ──────────────────────
   Reaproveita o título compacto de .psp-duvidas-title e os botões/linha
   de ações já usados no hero e após "Documentos para inscrição" — sem
   linguagem visual nova. Fica entre os vídeos e "Ainda tem dúvidas?",
   por isso usa o padding padrão de seção (56/72px) dos dois lados —
   quem precisa do ajuste de padding-bottom por ficar colada no rodapé
   é a seção de dúvidas, logo abaixo. */
.psp-section-fechamento .psp-duvidas-title {
	margin-bottom: 20px;
}

/* ── Campo ACF "candidatura_azul_uniforme" ────────────────────────────
   Mantém bolinhas e divisores azuis, sem a alternância azul/laranja, no
   bloco "Como se candidatar". Controlado por página (campo ACF), não
   por ID fixo — funciona em qualquer página/ambiente sem manutenção. ── */
.psp-candidatura-azul .psp-step:nth-child(even) .psp-step-number {
	background-color: var(--psp-blue);
}

.psp-candidatura-azul.psp-evolved .psp-timeline-item:nth-child(even) {
	border-left-color: var(--psp-blue);
}

/* ── Campo ACF "titulos_sem_serifa" ────────────────────────────────────
   Títulos na fonte sem serifa do tema (Heebo), em vez da serifada
   padrão (Frank Ruhl Libre). Só troca a família da fonte — tamanho,
   peso e cor permanecem os mesmos. Controlado por página (campo ACF). */
.psp-titulos-sans .psp-hero-title,
.psp-titulos-sans .psp-section-title,
.psp-titulos-sans .psp-duvidas-title {
	font-family: 'Heebo', Arial, Helvetica, sans-serif;
}