/* ============================================================================
 * PÓS-GRADUAÇÃO — LANDING (/pos-graduacao/) — TEMA "Histórias e Áreas"
 * Reproduz o protótipo escuro (Student Stories) na página real. As views
 * (áreas, coordenadores) continuam vindo do Toolset; este CSS só veste a
 * estrutura. A faixa de coordenadores preserva os IDs/medidas que o
 * page-pos.js exige (coordTrack/coordGroup, alturas).
 *
 * ATIVAR: trocar a versão do <link> no template para css/page-pos.css?v=46
 * ============================================================================ */

/* ----------------------------------------------------------------------------
   TOKENS — paleta escura, aplicada a todas as seções da landing.
   --------------------------------------------------------------------------- */
#sessao-hero-historias,
#sessao-oque-estudar,
#sessao-objetivos-pos,
#sessao-professores-pos,
#sessao-depoimento-pos {
	--bg: #1c1a18;
	--bg-2: #161412;
	--ink: #f3efe6;
	--muted: #b7ae9d;
	--gold: #d4a738;
	--gold-soft: #e8c875;
	--line: #3a352f;
	--panel: #262220;
	--overlay: rgba(12, 10, 8, .86);
	--serif-display: 'Source Serif 4', Georgia, serif;
	--serif-body: 'Inter', sans-serif;
	--caps: 'Bebas Neue', Impact, sans-serif;
	--transicao: 300ms ease;
}

/* calha comum: conteúdo centralizado em 1180px */
#sessao-hero-historias .container,
#sessao-oque-estudar .container,
#sessao-objetivos-pos .container,
#sessao-depoimento-pos .container {
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 56px);
	padding-right: clamp(20px, 5vw, 56px)
}

/* scroll reveal (page-pos.js adiciona .is-visible) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease }
.reveal.is-visible { opacity: 1; transform: none }
.reveal[data-d="1"] { transition-delay: .08s }
.reveal[data-d="2"] { transition-delay: .16s }
.reveal[data-d="3"] { transition-delay: .24s }
.reveal[data-d="4"] { transition-delay: .32s }

/* ============================================================================
   SEÇÃO 1 — HERO "HISTÓRIAS DE QUEM VIVEU" (mosaico de 4 destaques fixos)
   ========================================================================== */
#sessao-hero-historias { background: var(--bg); padding: 56px 0 80px }

#sessao-hero-historias .hist-breadcrumb {
	font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 16px; font-family: var(--serif-body)
}
#sessao-hero-historias .hist-breadcrumb b { color: var(--ink); font-weight: 600 }

#sessao-hero-historias .hist-title { display: flex; align-items: center; gap: 16px; margin-bottom: 10px }
#sessao-hero-historias .hist-title .shield {
	width: 34px; height: 42px; flex: none; background: var(--gold);
	clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); opacity: .9
}
#sessao-hero-historias .hist-title h1 {
	font-family: var(--serif-display); font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; letter-spacing: -.01em;
	color: var(--ink); background: var(--panel); padding: 8px 22px; border-radius: 3px;
	margin: 0; text-transform: none
}
#sessao-hero-historias .hist-subtitle {
	font-size: .8rem; color: var(--muted); margin: 18px 0 0 50px; font-family: var(--serif-body)
}
#sessao-hero-historias .hist-subtitle b { display: block; color: var(--ink); font-weight: 600; letter-spacing: .04em; margin-bottom: 4px }

#sessao-hero-historias .hist-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 34px); margin-top: 36px; align-items: start
}
#sessao-hero-historias .hist-col { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px) }

#sessao-hero-historias .hist-story {
	position: relative; display: block; overflow: hidden; background: var(--bg-2); border-radius: 2px; text-decoration: none
}
#sessao-hero-historias .hist-story .img-wrap { position: relative; overflow: hidden }
#sessao-hero-historias .hist-story img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1)
}
#sessao-hero-historias .hist-story:hover img { transform: scale(1.05) }
#sessao-hero-historias .hist-story .cap {
	position: absolute; left: 0; bottom: 0; right: 18%; background: var(--overlay); padding: 20px 22px
}
#sessao-hero-historias .hist-story .cap h3 {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.22rem; line-height: 1.18; color: #fff; margin: 0
}
#sessao-hero-historias .hist-story .cap .by {
	margin-top: 10px; font-family: var(--serif-display); font-weight: 600; font-size: .82rem; color: #fff
}
#sessao-hero-historias .hist-story .cap .by em { color: var(--gold-soft); font-style: normal }
#sessao-hero-historias .hist-story::after {
	content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 0;
	background: var(--gold); transition: height .45s ease
}
#sessao-hero-historias .hist-story:hover::after { height: 100% }
#sessao-hero-historias .hist-story.tall .img-wrap { aspect-ratio: 4/5 }
#sessao-hero-historias .hist-story.wide .img-wrap { aspect-ratio: 4/3 }
#sessao-hero-historias .hist-story.big  .img-wrap { aspect-ratio: 3/4 }
#sessao-hero-historias .hist-story.med  .img-wrap { aspect-ratio: 4/3 }

@media (max-width: 820px) {
	#sessao-hero-historias .hist-grid { grid-template-columns: 1fr }
	#sessao-hero-historias .hist-story .cap { right: 0 }
	#sessao-hero-historias .hist-title h1 { font-size: 27px }
	#sessao-hero-historias .hist-subtitle { margin-left: 0 }
}

/* ============================================================================
   SEÇÃO 2 — ÁREAS DE FORMAÇÃO (grid "All Stories" + filtro)
   ========================================================================== */
#sessao-oque-estudar {
	background: var(--bg);
	padding: 40px 0 100px !important;
	border-top: 1px solid var(--line)
}

#sessao-oque-estudar .areas-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; margin-bottom: 38px; flex-wrap: wrap
}
#sessao-oque-estudar .areas-bar .areas-title { display: flex; align-items: center; gap: 14px }
#sessao-oque-estudar .areas-bar .areas-title .ic { color: var(--gold); font-size: 1.4rem }
#sessao-oque-estudar .areas-bar .areas-title .section-rule {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 4px; font-weight: 400
}
#sessao-oque-estudar .areas-bar .areas-title h2 {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); margin: 0
}

#sessao-oque-estudar .filter { position: relative }
#sessao-oque-estudar .filter button {
	background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
	padding: 12px 18px; min-width: 230px; display: flex; align-items: center; justify-content: space-between;
	gap: 14px; cursor: pointer; font-family: var(--serif-body); font-size: .95rem
}
#sessao-oque-estudar .filter button .plus { color: var(--gold); font-size: 1.2rem; line-height: 1; transition: transform .3s }
#sessao-oque-estudar .filter.open button .plus { transform: rotate(45deg) }
#sessao-oque-estudar .filter ul {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel);
	border: 1px solid var(--line); border-radius: 4px; list-style: none; padding: 6px;
	display: none; z-index: 5; max-height: 280px; overflow: auto
}
#sessao-oque-estudar .filter.open ul { display: block }
#sessao-oque-estudar .filter li { padding: 10px 14px; border-radius: 3px; cursor: pointer; font-size: .92rem; font-family: var(--serif-body) }
#sessao-oque-estudar .filter li:hover { background: var(--bg-2) }
#sessao-oque-estudar .filter li.sel { color: var(--gold) }

#sessao-oque-estudar .cards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px)
}
#sessao-oque-estudar .card { display: block; cursor: pointer; text-decoration: none }
#sessao-oque-estudar .card .img-wrap {
	position: relative; aspect-ratio: 16/11; overflow: hidden; border-radius: 2px; background: var(--bg-2)
}
#sessao-oque-estudar .card img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1); filter: brightness(.92)
}
#sessao-oque-estudar .card:hover img { transform: scale(1.05); filter: brightness(1) }
#sessao-oque-estudar .card .tag {
	position: absolute; top: 12px; left: 12px; background: var(--overlay); color: var(--gold-soft);
	font-family: var(--caps); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 40px; font-weight: 600
}
#sessao-oque-estudar .card h3 {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.18rem; line-height: 1.2;
	margin: 16px 0 0; color: var(--ink); transition: color .25s
}
#sessao-oque-estudar .card:hover h3 { color: var(--gold-soft) }
#sessao-oque-estudar .card .by {
	font-family: var(--serif-display); font-weight: 600; font-size: .82rem; color: var(--muted); margin-top: 8px
}
#sessao-oque-estudar .card.hide { display: none }

/* ----------------------------------------------------------------------------
   BLINDAGEM contra regras legadas do tema (Bootstrap .card e afins).
   O style.css pinta .card de branco e força cores; aqui anulamos isso com
   seletores fortes para o tema escuro prevalecer sem depender da ordem.
   --------------------------------------------------------------------------- */
#sessao-oque-estudar .cards .card,
#sessao-oque-estudar a.card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--ink) !important
}
/* a "caixa branca" vinha de .card-body/.card etc. — garantimos fundo escuro
   no bloco de texto abaixo da imagem (h3 + descrição). */
#sessao-oque-estudar .cards .card > h3,
#sessao-oque-estudar .cards .card > .by {
	background: var(--bg) !important
}
#sessao-oque-estudar .cards .card .img-wrap {
	background: var(--bg-2) !important;
	border-radius: 2px !important
}
/* nome da área SEMPRE claro (vinha branco-sobre-branco) */
#sessao-oque-estudar .cards .card h3,
#sessao-oque-estudar .cards .card .nome {
	color: var(--ink) !important;
	-webkit-text-fill-color: var(--ink) !important;
	text-shadow: none !important;
	opacity: 1 !important
}
#sessao-oque-estudar .cards .card:hover h3 { color: var(--gold-soft) !important; -webkit-text-fill-color: var(--gold-soft) !important }
#sessao-oque-estudar .cards .card .by { color: var(--muted) !important; opacity: 1 !important }
/* tag dourada sempre visível */
#sessao-oque-estudar .cards .card .tag {
	color: var(--gold-soft) !important;
	background: var(--overlay) !important;
	-webkit-text-fill-color: var(--gold-soft) !important
}

/* dropdown do filtro: opaco e por cima de tudo (evita itens transparecendo) */
#sessao-oque-estudar .filter ul {
	background: var(--panel) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
	z-index: 50 !important
}
#sessao-oque-estudar .filter li { color: var(--ink) !important; background: transparent !important }
#sessao-oque-estudar .filter li:hover { background: var(--bg-2) !important }
#sessao-oque-estudar .filter li.sel { color: var(--gold) !important }
#sessao-oque-estudar .filter button { color: var(--ink) !important }

@media (max-width: 880px) { #sessao-oque-estudar .cards { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { #sessao-oque-estudar .cards { grid-template-columns: 1fr } }

/* ============================================================================
   SEÇÃO 3 — POR QUE FAZER PÓS (vídeo + lista de razões)
   ========================================================================== */
#sessao-objetivos-pos {
	background: var(--bg-2);
	padding: clamp(60px, 8vw, 110px) 0 !important;
	border-top: 1px solid var(--line)
}

.pq-top {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px);
	align-items: start; margin: 0 0 clamp(40px, 5vw, 64px)
}
.pq-top .title-oque-estudar {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.08; letter-spacing: -.01em; color: var(--ink); text-transform: none; margin: 0
}
.pq-top .title-oque-estudar em { font-style: italic; color: var(--gold); font-weight: 500 }
.pq-top .lead { color: var(--muted); font-weight: 300; font-size: 1.08rem; max-width: 42ch; font-family: var(--serif-body); margin: 0 0 24px }

.pq-cta { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink) }
.pq-cta .circ {
	width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: #1c1a18;
	display: grid; place-items: center; font-size: 20px; flex: none; transition: var(--transicao)
}
.pq-cta:hover .circ { transform: translateX(6px) }
.pq-cta span:last-child { font-family: var(--caps); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase }

.pq-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start }
.pq-foto { position: relative; aspect-ratio: 1/1; background: #000; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); min-height: 0 }
.pq-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.6); transition: var(--transicao) }
.pq-foto .pq-video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; filter: brightness(.7) }
.pq-foto:hover img { transform: scale(1.03) }
.pq-foto .pq-play {
	position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
	background: rgba(212, 167, 56, .92); color: #1c1a18; display: grid; place-items: center;
	font-size: 1.6rem; pointer-events: none
}

.pq-lista { display: flex; flex-direction: column }
.objetivos-pos-graduacao {
	display: grid; grid-template-columns: 1fr 56px; gap: 18px; padding: 22px 0;
	border-top: 1px solid var(--line); align-items: start; transition: var(--transicao); margin: 0
}
.objetivos-pos-graduacao:first-child { border-top: 0; padding-top: 0 }
.objetivos-pos-graduacao:last-child { border-bottom: 0 }
.objetivos-pos-graduacao .corpo { min-width: 0 }
.objetivos-pos-graduacao p:not(.informacoes-objetivos-pos) {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.15rem; color: var(--ink);
	margin: 0 0 8px; line-height: 1.15; letter-spacing: -.01em
}
.objetivos-pos-graduacao .informacoes-objetivos-pos {
	font-family: var(--serif-body); font-size: .94rem; line-height: 1.5; color: var(--muted); font-weight: 300; margin: 0
}
.objetivos-pos-graduacao .thumb {
	width: 56px; height: 56px; border-radius: 14px; object-fit: cover; align-self: start;
	background: var(--panel); border: 1px solid var(--line); padding: 0;
	filter: grayscale(100%) brightness(1.4); transition: var(--transicao)
}
.objetivos-pos-graduacao:hover .thumb { filter: grayscale(0) brightness(1) }
.objetivos-pos-graduacao img:not(.thumb) { display: none }

@media (max-width: 820px) {
	.pq-top { grid-template-columns: 1fr; gap: 28px }
	.pq-body { grid-template-columns: 1fr; gap: 28px }
	.pq-foto { aspect-ratio: 16/10 }
}

/* ============================================================================
   SEÇÃO 4 — COORDENADORES (texto fixo à esquerda + esteira à direita)
   Layout em 2 colunas: a coluna de texto NÃO rola; a esteira (à direita)
   rola sozinha. IDS/medidas da esteira preservados para o page-pos.js.
   ========================================================================== */
#sessao-professores-pos {
	background: var(--bg);
	border-top: 1px solid var(--line);
	padding: clamp(50px, 7vw, 90px) 0;
	overflow: hidden; position: relative
}

/* grid: coluna de texto (fixa) + coluna da esteira */
.coord-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp(24px, 4vw, 50px);
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 56px)
}

/* coluna de texto fixa (não rola) */
.coord-fixed { align-self: center }
.coord-fixed .professores-eyebrow {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .18em; color: var(--gold);
	text-transform: uppercase; display: block; margin-bottom: 14px
}
.coord-fixed .title-professores-pos {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem);
	color: var(--ink); letter-spacing: -.01em; line-height: 1.1; margin: 0 0 16px
}
.coord-fixed .title-profissionais-destacam {
	font-family: var(--serif-body); font-size: 1rem; line-height: 1.6; color: var(--muted);
	text-transform: none; font-weight: 300; margin: 0
}

/* esteira: ocupa a coluna direita e "vaza" até a borda da tela */
.coord-stage {
	position: relative; display: flex; align-items: center; overflow: hidden; height: 320px
}
.coord-track {
	display: flex; flex-wrap: nowrap; align-items: center; height: 320px; cursor: grab;
	touch-action: pan-y; will-change: transform; padding-left: 0
}
.coord-track.dragging { cursor: grabbing }
.coord-track img { -webkit-user-drag: none; user-drag: none }
.coord-group { display: flex; flex-wrap: nowrap; align-items: center; height: 320px; flex: 0 0 auto }
.coord-group > * { margin-right: 26px }

/* cards de coordenador (menores, como no protótipo) */
.coord-card { flex: 0 0 200px; width: 200px; display: flex; flex-direction: column; user-select: none }
.coord-card .foto { width: 200px; height: 240px; overflow: hidden; background: var(--bg-2); border-radius: 2px }
.coord-card .foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.4); transition: filter .5s, transform .8s }
.coord-card:hover .foto img { filter: grayscale(0); transform: scale(1.04) }
.coord-card .curso {
	font-family: var(--caps); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--gold); margin: 14px 0 4px
}
.coord-card .nome { font-family: var(--serif-display); font-weight: 700; font-size: 1.12rem; color: var(--ink) }

@media (max-width: 760px) {
	.coord-layout { grid-template-columns: 1fr; gap: 24px; padding-right: clamp(20px, 5vw, 56px) }
	.coord-stage { height: auto }
	.coord-track { height: auto }
	.coord-group { height: auto; align-items: stretch }
	.coord-card { flex: 0 0 60vw; width: 60vw }
	.coord-card .foto { width: 100%; height: 70vw }
}

/* ============================================================================
   SEÇÃO 5 — DEPOIMENTOS (8 cards)
   ========================================================================== */
#sessao-depoimento-pos {
	background: var(--bg-2);
	padding: clamp(55px, 7vw, 100px) 0 !important;
	border-top: 1px solid var(--line)
}
.depo-head { margin-bottom: 42px }
.depo-head .depo-eyebrow {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
	color: var(--gold); display: block; margin-bottom: 14px
}
.depo-head .depo-titulo {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	color: var(--ink); margin: 0
}
.depo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px }
.depo-card {
	background: #0e0c0a; padding: 30px 26px; display: flex; flex-direction: column;
	min-height: 320px; border-top: 3px solid var(--gold); border-radius: 2px
}
.depo-card .aspas { margin: 0 0 22px }
.depo-card .aspas::before {
	content: '\201C'; font-family: var(--serif-display); font-size: 2.8rem; color: var(--gold);
	line-height: .4; display: block; height: 26px
}
.depo-card .texto {
	font-family: var(--serif-display); font-weight: 500; font-style: italic; font-size: 1.1rem;
	line-height: 1.42; color: var(--ink); margin: 0 0 auto
}
.depo-card .nome {
	font-family: var(--serif-body); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	font-size: .8rem; color: var(--gold); margin: 24px 0 6px
}
.depo-card .cargo { font-family: var(--serif-body); font-size: .84rem; color: var(--muted); font-weight: 300; line-height: 1.5; margin: 0 }

@media (max-width: 980px) { .depo-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px) { .depo-grid { grid-template-columns: 1fr } }

/* ============================================================================
 * LISTAGEM DE CURSOS (page-pos-graduacao.php) — FILTROS NO TOPO
 * Tela de cursos com cabeçalho + busca + filtros horizontais (pílulas) e
 * grid full-width de cards. Mesma paleta da landing. Lógica PHP intacta.
 * ========================================================================== */

#conteudo.pagina-pos-graduacao {
	--bg: #1c1a18;
	--bg-2: #161412;
	--ink: #f3efe6;
	--muted: #b7ae9d;
	--gold: #d4a738;
	--gold-soft: #e8c875;
	--line: #3a352f;
	--panel: #262220;
	--overlay: rgba(12, 10, 8, .86);
	--serif-display: 'Source Serif 4', Georgia, serif;
	--serif-body: 'Inter', sans-serif;
	--caps: 'Bebas Neue', Impact, sans-serif;
	--transicao: 300ms ease;
	background: var(--bg) !important;
	padding: 56px 0 90px
}
#conteudo.pagina-pos-graduacao .container { max-width: 1180px }

/* ---- CABEÇALHO + BUSCA (topo) ------------------------------------------- */
#conteudo.pagina-pos-graduacao .lista-topo {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 30px; flex-wrap: wrap; margin-bottom: 36px
}
#conteudo.pagina-pos-graduacao .lista-eyebrow {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--gold); display: block; margin-bottom: 10px
}
#conteudo.pagina-pos-graduacao .lista-titulo {
	font-family: var(--serif-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1; letter-spacing: -.01em; color: var(--ink) !important; margin: 0; text-transform: none !important
}
/* busca: campo transparente com sublinhado dourado no foco */
#conteudo.pagina-pos-graduacao .busca-box { position: relative; min-width: 300px; flex: 1; max-width: 420px }
#conteudo.pagina-pos-graduacao .busca-box .ico {
	position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--gold)
}
#conteudo.pagina-pos-graduacao .inputbtnBusca,
#conteudo.pagina-pos-graduacao input.inputbtnBusca {
	width: 100%;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 0 12px 28px;
	font-family: var(--serif-display);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--ink) !important;
	outline: none
}
#conteudo.pagina-pos-graduacao .inputbtnBusca:focus { border-bottom-color: var(--gold) !important; box-shadow: none !important }
#conteudo.pagina-pos-graduacao .inputbtnBusca::placeholder { color: #7a7264 }

/* ---- FILTROS EM PÍLULAS (topo) ------------------------------------------ */
#conteudo.pagina-pos-graduacao .filtros-grupo { margin-bottom: 18px }
#conteudo.pagina-pos-graduacao .filtros-label {
	font-family: var(--caps); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--muted); display: block; margin-bottom: 10px
}
#conteudo.pagina-pos-graduacao .filtros { display: flex; flex-wrap: wrap; gap: 8px }
#conteudo.pagina-pos-graduacao .pill,
#conteudo.pagina-pos-graduacao a.pill {
	font-family: var(--caps);
	font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
	padding: 8px 16px;
	border: 1px solid var(--line);
	background: transparent !important;
	color: var(--ink) !important;
	border-radius: 40px;
	cursor: pointer;
	transition: var(--transicao);
	text-decoration: none !important;
	white-space: nowrap;
	line-height: 1.3
}
#conteudo.pagina-pos-graduacao a.pill:hover {
	border-color: var(--gold); color: var(--gold-soft) !important; text-decoration: none !important
}
/* pílula ativa: fundo dourado + texto escuro */
#conteudo.pagina-pos-graduacao a.pill.ativo {
	background: var(--gold) !important; color: #1c1a18 !important; border-color: var(--gold)
}

#conteudo.pagina-pos-graduacao .lista-rule { height: 1px; background: var(--line); margin: 28px 0 40px }

/* ---- GRID FULL-WIDTH DE CARDS ------------------------------------------- */
#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 36px)
}
#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos::before,
#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos::after { content: none !important; display: none !important }

#conteudo.pagina-pos-graduacao .card.curso {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important
}
#conteudo.pagina-pos-graduacao .card.curso .infocurso { height: 100% }
#conteudo.pagina-pos-graduacao .card.curso a.tagueamento { text-decoration: none !important; display: block }

#conteudo.pagina-pos-graduacao .card.curso figure {
	margin: 0; position: relative; overflow: hidden; border-radius: 2px;
	aspect-ratio: 16/11; background: var(--bg-2)
}
#conteudo.pagina-pos-graduacao .card.curso figure img,
#conteudo.pagina-pos-graduacao .card.curso .card-img {
	width: 100% !important; height: 100% !important; object-fit: cover; display: block;
	filter: brightness(.92); transition: transform .8s cubic-bezier(.2, .7, .2, 1)
}
#conteudo.pagina-pos-graduacao .card.curso:hover figure img { transform: scale(1.05); filter: brightness(1) }

/* overlay vira bloco de texto abaixo da imagem */
#conteudo.pagina-pos-graduacao .card.curso .card-img-overlay {
	position: static !important;
	padding: 14px 0 0 !important;
	background: transparent !important;
	display: block !important
}
#conteudo.pagina-pos-graduacao .card.curso .card-body { padding: 0 !important; background: transparent !important }
#conteudo.pagina-pos-graduacao .card.curso .card-body h6.card-title {
	font-family: var(--caps); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--gold) !important; margin: 0 0 6px; font-weight: 400
}
#conteudo.pagina-pos-graduacao .card.curso .card-body h5.card-title {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.18rem; line-height: 1.22;
	color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
	margin: 0 0 14px; text-shadow: none !important
}
#conteudo.pagina-pos-graduacao .card.curso:hover h5.card-title { color: var(--gold-soft) !important; -webkit-text-fill-color: var(--gold-soft) !important }
#conteudo.pagina-pos-graduacao .card.curso br { display: none }

/* botão "Saiba mais!" — pílula dourada vazada */
#conteudo.pagina-pos-graduacao .card.curso .text-center { text-align: left !important }
#conteudo.pagina-pos-graduacao .card.curso .btn-tipo1,
#conteudo.pagina-pos-graduacao .card.curso .btn.btn-success {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent !important;
	border: 1px solid var(--gold) !important;
	color: var(--gold) !important;
	font-family: var(--caps); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
	padding: 9px 18px !important; border-radius: 40px !important;
	box-shadow: none !important; transition: var(--transicao)
}
#conteudo.pagina-pos-graduacao .card.curso:hover .btn-tipo1,
#conteudo.pagina-pos-graduacao .card.curso:hover .btn.btn-success {
	background: var(--gold) !important; color: #1c1a18 !important
}

/* estado vazio */
#conteudo.pagina-pos-graduacao .lista-vazia { padding: 40px 0 }
#conteudo.pagina-pos-graduacao .lista-vazia h1 { font-family: var(--serif-display); font-weight: 700; color: var(--ink) !important }
#conteudo.pagina-pos-graduacao .lista-vazia p { color: var(--muted) }

/* ---- RESPONSIVO --------------------------------------------------------- */
@media (max-width: 991px) {
	#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos { grid-template-columns: repeat(2, 1fr) }
	#conteudo.pagina-pos-graduacao .lista-topo { flex-direction: column; align-items: stretch }
	#conteudo.pagina-pos-graduacao .busca-box { max-width: none }
}
@media (max-width: 575px) {
	#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos { grid-template-columns: 1fr }
}

/* ============================================================================
 * BLINDAGEM FORTE — LISTAGEM (vence regras de ID do style.css do tema)
 * O style.css usa seletores com ID (ex.: #conteudo.pagina-institucional ...)
 * que ganhavam dos nossos. Aqui elevamos a especificidade ao mesmo nível
 * (ID duplo / ID + classe + tag) e forçamos cor/estrutura do tema escuro.
 * ========================================================================== */

/* fundo escuro real (vencendo #conteudo.pagina-institucional do tema) */
section#conteudo.pagina-institucional.pagina-pos-graduacao,
#conteudo.pagina-institucional.pagina-pos-graduacao {
	background: #1c1a18 !important;
	color: #f3efe6 !important
}

/* cabeçalho */
#conteudo.pagina-institucional.pagina-pos-graduacao .lista-eyebrow { color: #d4a738 !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .lista-titulo {
	color: #f3efe6 !important; -webkit-text-fill-color: #f3efe6 !important;
	font-family: 'Source Serif 4', Georgia, serif !important; font-size: clamp(2rem,4vw,3rem) !important;
	font-weight: 800 !important; text-transform: none !important
}

/* busca: caixa transparente, texto claro (matando o input azul do tema) */
#conteudo.pagina-institucional.pagina-pos-graduacao .busca-box { max-width: 420px }
#conteudo.pagina-institucional.pagina-pos-graduacao input.inputbtnBusca,
#conteudo.pagina-institucional.pagina-pos-graduacao .busca-box input {
	background: transparent !important; border: 0 !important;
	border-bottom: 1px solid #3a352f !important; border-radius: 0 !important;
	box-shadow: none !important; color: #f3efe6 !important; padding: 12px 0 12px 28px !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .busca-box .ico { color: #d4a738 !important; left: 2px }

/* FILTROS: forçar virar pílulas (o tema deixava como link azul) */
#conteudo.pagina-institucional.pagina-pos-graduacao .filtros { display: flex !important; flex-wrap: wrap !important; gap: 8px !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .filtros-label { color: #b7ae9d !important; display: block !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .filtros a.pill,
#conteudo.pagina-institucional.pagina-pos-graduacao a.pill {
	display: inline-block !important;
	font-family: 'Bebas Neue', Impact, sans-serif !important;
	font-size: .8rem !important; letter-spacing: .08em !important; text-transform: uppercase !important;
	padding: 8px 16px !important;
	border: 1px solid #3a352f !important;
	background: transparent !important;
	color: #f3efe6 !important;
	-webkit-text-fill-color: #f3efe6 !important;
	border-radius: 40px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1.3 !important;
	margin: 0 !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao a.pill:hover {
	border-color: #d4a738 !important; color: #e8c875 !important; -webkit-text-fill-color: #e8c875 !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao a.pill.ativo {
	background: #d4a738 !important; color: #1c1a18 !important; -webkit-text-fill-color: #1c1a18 !important; border-color: #d4a738 !important
}

#conteudo.pagina-institucional.pagina-pos-graduacao .lista-rule { height: 1px !important; background: #3a352f !important }

/* GRID: forçar grade e matar o float/sobreposição do tema */
#conteudo.pagina-institucional.pagina-pos-graduacao .tabela-cursos {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 34px !important;
	float: none !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso {
	float: none !important; width: auto !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important
}
/* a imagem dentro de figure com altura controlada (mata o overlay sobreposto) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso figure {
	margin: 0 !important; position: relative !important; overflow: hidden !important;
	aspect-ratio: 16/11 !important; background: #161412 !important; border-radius: 2px !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso figure img,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-img {
	width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important
}
/* overlay deixa de ser absoluto: vira bloco de texto abaixo */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-img-overlay {
	position: static !important; padding: 14px 0 0 !important; background: transparent !important;
	display: block !important; inset: auto !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body { padding: 0 !important; background: transparent !important }
/* modalidade: tag dourada (mata o fundo ciano) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body h6.card-title {
	background: transparent !important;
	color: #d4a738 !important; -webkit-text-fill-color: #d4a738 !important;
	font-family: 'Bebas Neue', Impact, sans-serif !important;
	font-size: .68rem !important; letter-spacing: .14em !important; text-transform: uppercase !important;
	margin: 0 0 6px !important; padding: 0 !important
}
/* título do curso claro */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body h5.card-title {
	background: transparent !important;
	color: #f3efe6 !important; -webkit-text-fill-color: #f3efe6 !important;
	font-family: 'Source Serif 4', Georgia, serif !important; font-weight: 700 !important;
	font-size: 1.18rem !important; line-height: 1.22 !important; margin: 0 0 14px !important; padding: 0 !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso br { display: none !important }
/* botão dourado vazado */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .text-center { text-align: left !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .btn-tipo1,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .btn.btn-success {
	display: inline-flex !important; align-items: center !important;
	background: transparent !important; border: 1px solid #d4a738 !important;
	color: #d4a738 !important; -webkit-text-fill-color: #d4a738 !important;
	font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: .78rem !important;
	letter-spacing: .1em !important; text-transform: uppercase !important;
	padding: 9px 18px !important; border-radius: 40px !important; box-shadow: none !important;
	width: auto !important; height: auto !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso:hover .btn-tipo1,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso:hover .btn.btn-success {
	background: #d4a738 !important; color: #1c1a18 !important; -webkit-text-fill-color: #1c1a18 !important
}

@media (max-width: 991px) {
	#conteudo.pagina-institucional.pagina-pos-graduacao .tabela-cursos { grid-template-columns: repeat(2, 1fr) !important }
}
@media (max-width: 575px) {
	#conteudo.pagina-institucional.pagina-pos-graduacao .tabela-cursos { grid-template-columns: 1fr !important }
}


/* ============================================================================
 * PÓS-GRADUAÇÃO — LANDING (/pos-graduacao/) — TEMA "Histórias e Áreas"
 * Reproduz o protótipo escuro (Student Stories) na página real. As views
 * (áreas, coordenadores) continuam vindo do Toolset; este CSS só veste a
 * estrutura. A faixa de coordenadores preserva os IDs/medidas que o
 * page-pos.js exige (coordTrack/coordGroup, alturas).
 *
 * ATIVAR: trocar a versão do <link> no template para css/page-pos.css?v=47
 * ============================================================================ */

/* ----------------------------------------------------------------------------
   TOKENS — paleta escura, aplicada a todas as seções da landing.
   --------------------------------------------------------------------------- */
#sessao-hero-historias,
#sessao-oque-estudar,
#sessao-objetivos-pos,
#sessao-professores-pos,
#sessao-depoimento-pos {
	--bg: #1c1a18;
	--bg-2: #161412;
	--ink: #f3efe6;
	--muted: #b7ae9d;
	--gold: #d4a738;
	--gold-soft: #e8c875;
	--line: #3a352f;
	--panel: #262220;
	--overlay: rgba(12, 10, 8, .86);
	--serif-display: 'Source Serif 4', Georgia, serif;
	--serif-body: 'Inter', sans-serif;
	--caps: 'Bebas Neue', Impact, sans-serif;
	--transicao: 300ms ease;
}

/* calha comum: conteúdo centralizado em 1180px */
#sessao-hero-historias .container,
#sessao-oque-estudar .container,
#sessao-objetivos-pos .container,
#sessao-depoimento-pos .container {
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 56px);
	padding-right: clamp(20px, 5vw, 56px)
}

/* scroll reveal (page-pos.js adiciona .is-visible) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease }
.reveal.is-visible { opacity: 1; transform: none }
.reveal[data-d="1"] { transition-delay: .08s }
.reveal[data-d="2"] { transition-delay: .16s }
.reveal[data-d="3"] { transition-delay: .24s }
.reveal[data-d="4"] { transition-delay: .32s }

/* ============================================================================
   SEÇÃO 1 — HERO "HISTÓRIAS DE QUEM VIVEU" (mosaico de 4 destaques fixos)
   ========================================================================== */
#sessao-hero-historias { background: var(--bg); padding: 56px 0 80px }

#sessao-hero-historias .hist-breadcrumb {
	font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 16px; font-family: var(--serif-body)
}
#sessao-hero-historias .hist-breadcrumb b { color: var(--ink); font-weight: 600 }

#sessao-hero-historias .hist-title { display: flex; align-items: center; gap: 16px; margin-bottom: 10px }
#sessao-hero-historias .hist-title .shield {
	width: 34px; height: 42px; flex: none; background: var(--gold);
	clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); opacity: .9
}
#sessao-hero-historias .hist-title h1 {
	font-family: var(--serif-display); font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; letter-spacing: -.01em;
	color: var(--ink); background: var(--panel); padding: 8px 22px; border-radius: 3px;
	margin: 0; text-transform: none
}
#sessao-hero-historias .hist-subtitle {
	font-size: .8rem; color: var(--muted); margin: 18px 0 0 50px; font-family: var(--serif-body)
}
#sessao-hero-historias .hist-subtitle b { display: block; color: var(--ink); font-weight: 600; letter-spacing: .04em; margin-bottom: 4px }

#sessao-hero-historias .hist-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 34px); margin-top: 36px; align-items: start
}
#sessao-hero-historias .hist-col { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px) }

#sessao-hero-historias .hist-story {
	position: relative; display: block; overflow: hidden; background: var(--bg-2); border-radius: 2px; text-decoration: none
}
#sessao-hero-historias .hist-story .img-wrap { position: relative; overflow: hidden }
#sessao-hero-historias .hist-story img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1)
}
#sessao-hero-historias .hist-story:hover img { transform: scale(1.05) }
#sessao-hero-historias .hist-story .cap {
	position: absolute; left: 0; bottom: 0; right: 18%; background: var(--overlay); padding: 20px 22px
}
#sessao-hero-historias .hist-story .cap h3 {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.22rem; line-height: 1.18; color: #fff; margin: 0
}
#sessao-hero-historias .hist-story .cap .by {
	margin-top: 10px; font-family: var(--serif-display); font-weight: 600; font-size: .82rem; color: #fff
}
#sessao-hero-historias .hist-story .cap .by em { color: var(--gold-soft); font-style: normal }
#sessao-hero-historias .hist-story::after {
	content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 0;
	background: var(--gold); transition: height .45s ease
}
#sessao-hero-historias .hist-story:hover::after { height: 100% }
#sessao-hero-historias .hist-story.tall .img-wrap { aspect-ratio: 4/5 }
#sessao-hero-historias .hist-story.wide .img-wrap { aspect-ratio: 4/3 }
#sessao-hero-historias .hist-story.big  .img-wrap { aspect-ratio: 3/4 }
#sessao-hero-historias .hist-story.med  .img-wrap { aspect-ratio: 4/3 }

@media (max-width: 820px) {
	#sessao-hero-historias .hist-grid { grid-template-columns: 1fr }
	#sessao-hero-historias .hist-story .cap { right: 0 }
	#sessao-hero-historias .hist-title h1 { font-size: 27px }
	#sessao-hero-historias .hist-subtitle { margin-left: 0 }
}

/* ============================================================================
   SEÇÃO 2 — ÁREAS DE FORMAÇÃO (grid "All Stories" + filtro)
   ========================================================================== */
#sessao-oque-estudar {
	background: var(--bg);
	padding: 40px 0 100px !important;
	border-top: 1px solid var(--line)
}

#sessao-oque-estudar .areas-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; margin-bottom: 38px; flex-wrap: wrap
}
#sessao-oque-estudar .areas-bar .areas-title { display: flex; align-items: center; gap: 14px }
#sessao-oque-estudar .areas-bar .areas-title .ic { color: var(--gold); font-size: 1.4rem }
#sessao-oque-estudar .areas-bar .areas-title .section-rule {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 4px; font-weight: 400
}
#sessao-oque-estudar .areas-bar .areas-title h2 {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); margin: 0
}

#sessao-oque-estudar .filter { position: relative }
#sessao-oque-estudar .filter button {
	background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
	padding: 12px 18px; min-width: 230px; display: flex; align-items: center; justify-content: space-between;
	gap: 14px; cursor: pointer; font-family: var(--serif-body); font-size: .95rem
}
#sessao-oque-estudar .filter button .plus { color: var(--gold); font-size: 1.2rem; line-height: 1; transition: transform .3s }
#sessao-oque-estudar .filter.open button .plus { transform: rotate(45deg) }
#sessao-oque-estudar .filter ul {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel);
	border: 1px solid var(--line); border-radius: 4px; list-style: none; padding: 6px;
	display: none; z-index: 5; max-height: 280px; overflow: auto
}
#sessao-oque-estudar .filter.open ul { display: block }
#sessao-oque-estudar .filter li { padding: 10px 14px; border-radius: 3px; cursor: pointer; font-size: .92rem; font-family: var(--serif-body) }
#sessao-oque-estudar .filter li:hover { background: var(--bg-2) }
#sessao-oque-estudar .filter li.sel { color: var(--gold) }

#sessao-oque-estudar .cards {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px)
}
#sessao-oque-estudar .card { display: block; cursor: pointer; text-decoration: none }
#sessao-oque-estudar .card .img-wrap {
	position: relative; aspect-ratio: 16/11; overflow: hidden; border-radius: 2px; background: var(--bg-2)
}
#sessao-oque-estudar .card img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s cubic-bezier(.2, .7, .2, 1); filter: brightness(.92)
}
#sessao-oque-estudar .card:hover img { transform: scale(1.05); filter: brightness(1) }
#sessao-oque-estudar .card .tag {
	position: absolute; top: 12px; left: 12px; background: var(--overlay); color: var(--gold-soft);
	font-family: var(--caps); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 40px; font-weight: 600
}
#sessao-oque-estudar .card h3 {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.18rem; line-height: 1.2;
	margin: 16px 0 0; color: var(--ink); transition: color .25s
}
#sessao-oque-estudar .card:hover h3 { color: var(--gold-soft) }
#sessao-oque-estudar .card .by {
	font-family: var(--serif-display); font-weight: 600; font-size: .82rem; color: var(--muted); margin-top: 8px
}
#sessao-oque-estudar .card.hide { display: none }

/* ----------------------------------------------------------------------------
   BLINDAGEM contra regras legadas do tema (Bootstrap .card e afins).
   O style.css pinta .card de branco e força cores; aqui anulamos isso com
   seletores fortes para o tema escuro prevalecer sem depender da ordem.
   --------------------------------------------------------------------------- */
#sessao-oque-estudar .cards .card,
#sessao-oque-estudar a.card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--ink) !important
}
/* a "caixa branca" vinha de .card-body/.card etc. — garantimos fundo escuro
   no bloco de texto abaixo da imagem (h3 + descrição). */
#sessao-oque-estudar .cards .card > h3,
#sessao-oque-estudar .cards .card > .by {
	background: var(--bg) !important
}
#sessao-oque-estudar .cards .card .img-wrap {
	background: var(--bg-2) !important;
	border-radius: 2px !important
}
/* nome da área SEMPRE claro (vinha branco-sobre-branco) */
#sessao-oque-estudar .cards .card h3,
#sessao-oque-estudar .cards .card .nome {
	color: var(--ink) !important;
	-webkit-text-fill-color: var(--ink) !important;
	text-shadow: none !important;
	opacity: 1 !important
}
#sessao-oque-estudar .cards .card:hover h3 { color: var(--gold-soft) !important; -webkit-text-fill-color: var(--gold-soft) !important }
#sessao-oque-estudar .cards .card .by { color: var(--muted) !important; opacity: 1 !important }
/* tag dourada sempre visível */
#sessao-oque-estudar .cards .card .tag {
	color: var(--gold-soft) !important;
	background: var(--overlay) !important;
	-webkit-text-fill-color: var(--gold-soft) !important
}

/* dropdown do filtro: opaco e por cima de tudo (evita itens transparecendo) */
#sessao-oque-estudar .filter ul {
	background: var(--panel) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
	z-index: 50 !important
}
#sessao-oque-estudar .filter li { color: var(--ink) !important; background: transparent !important }
#sessao-oque-estudar .filter li:hover { background: var(--bg-2) !important }
#sessao-oque-estudar .filter li.sel { color: var(--gold) !important }
#sessao-oque-estudar .filter button { color: var(--ink) !important }

@media (max-width: 880px) { #sessao-oque-estudar .cards { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 560px) { #sessao-oque-estudar .cards { grid-template-columns: 1fr } }

/* ============================================================================
   SEÇÃO 3 — POR QUE FAZER PÓS (vídeo + lista de razões)
   ========================================================================== */
#sessao-objetivos-pos {
	background: var(--bg-2);
	padding: clamp(60px, 8vw, 110px) 0 !important;
	border-top: 1px solid var(--line)
}

.pq-top {
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px);
	align-items: start; margin: 0 0 clamp(40px, 5vw, 64px)
}
.pq-top .title-oque-estudar {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	line-height: 1.08; letter-spacing: -.01em; color: var(--ink); text-transform: none; margin: 0
}
.pq-top .title-oque-estudar em { font-style: italic; color: var(--gold); font-weight: 500 }
.pq-top .lead { color: var(--muted); font-weight: 300; font-size: 1.08rem; max-width: 42ch; font-family: var(--serif-body); margin: 0 0 24px }

.pq-cta { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink) }
.pq-cta .circ {
	width: 52px; height: 52px; border-radius: 50%; background: var(--gold); color: #1c1a18;
	display: grid; place-items: center; font-size: 20px; flex: none; transition: var(--transicao)
}
.pq-cta:hover .circ { transform: translateX(6px) }
.pq-cta span:last-child { font-family: var(--caps); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase }

.pq-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start }
.pq-foto { position: relative; aspect-ratio: 1/1; background: #000; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); min-height: 0 }
.pq-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.6); transition: var(--transicao) }
.pq-foto .pq-video { width: 100%; height: 100%; object-fit: cover; background: #000; display: block; filter: brightness(.7) }
.pq-foto:hover img { transform: scale(1.03) }
.pq-foto .pq-play {
	position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
	background: rgba(212, 167, 56, .92); color: #1c1a18; display: grid; place-items: center;
	font-size: 1.6rem; pointer-events: none
}

.pq-lista { display: flex; flex-direction: column }
.objetivos-pos-graduacao {
	display: grid; grid-template-columns: 1fr 56px; gap: 18px; padding: 22px 0;
	border-top: 1px solid var(--line); align-items: start; transition: var(--transicao); margin: 0
}
.objetivos-pos-graduacao:first-child { border-top: 0; padding-top: 0 }
.objetivos-pos-graduacao:last-child { border-bottom: 0 }
.objetivos-pos-graduacao .corpo { min-width: 0 }
.objetivos-pos-graduacao p:not(.informacoes-objetivos-pos) {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.15rem; color: var(--ink);
	margin: 0 0 8px; line-height: 1.15; letter-spacing: -.01em
}
.objetivos-pos-graduacao .informacoes-objetivos-pos {
	font-family: var(--serif-body); font-size: .94rem; line-height: 1.5; color: var(--muted); font-weight: 300; margin: 0
}
.objetivos-pos-graduacao .thumb {
	width: 56px; height: 56px; border-radius: 14px; object-fit: cover; align-self: start;
	background: var(--panel); border: 1px solid var(--line); padding: 0;
	filter: grayscale(100%) brightness(1.4); transition: var(--transicao)
}
.objetivos-pos-graduacao:hover .thumb { filter: grayscale(0) brightness(1) }
.objetivos-pos-graduacao img:not(.thumb) { display: none }

@media (max-width: 820px) {
	.pq-top { grid-template-columns: 1fr; gap: 28px }
	.pq-body { grid-template-columns: 1fr; gap: 28px }
	.pq-foto { aspect-ratio: 16/10 }
}

/* ============================================================================
   SEÇÃO 4 — COORDENADORES (texto fixo à esquerda + esteira à direita)
   Layout em 2 colunas: a coluna de texto NÃO rola; a esteira (à direita)
   rola sozinha. IDS/medidas da esteira preservados para o page-pos.js.
   ========================================================================== */
#sessao-professores-pos {
	background: var(--bg);
	border-top: 1px solid var(--line);
	padding: clamp(50px, 7vw, 90px) 0;
	overflow: hidden; position: relative
}

/* grid: coluna de texto (fixa) + coluna da esteira */
.coord-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp(24px, 4vw, 50px);
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 56px)
}

/* coluna de texto fixa (não rola) */
.coord-fixed { align-self: center }
.coord-fixed .professores-eyebrow {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .18em; color: var(--gold);
	text-transform: uppercase; display: block; margin-bottom: 14px
}
.coord-fixed .title-professores-pos {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.3rem);
	color: var(--ink); letter-spacing: -.01em; line-height: 1.1; margin: 0 0 16px
}
.coord-fixed .title-profissionais-destacam {
	font-family: var(--serif-body); font-size: 1rem; line-height: 1.6; color: var(--muted);
	text-transform: none; font-weight: 300; margin: 0
}

/* esteira: ocupa a coluna direita e "vaza" até a borda da tela */
.coord-stage {
	position: relative; display: flex; align-items: center; overflow: hidden; height: 320px
}
.coord-track {
	display: flex; flex-wrap: nowrap; align-items: center; height: 320px; cursor: grab;
	touch-action: pan-y; will-change: transform; padding-left: 0
}
.coord-track.dragging { cursor: grabbing }
.coord-track img { -webkit-user-drag: none; user-drag: none }
.coord-group { display: flex; flex-wrap: nowrap; align-items: center; height: 320px; flex: 0 0 auto }
.coord-group > * { margin-right: 26px }

/* cards de coordenador (menores, como no protótipo) */
.coord-card { flex: 0 0 200px; width: 200px; display: flex; flex-direction: column; user-select: none }
.coord-card .foto { width: 200px; height: 240px; overflow: hidden; background: var(--bg-2); border-radius: 2px }
.coord-card .foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.4); transition: filter .5s, transform .8s }
.coord-card:hover .foto img { filter: grayscale(0); transform: scale(1.04) }
.coord-card .curso {
	font-family: var(--caps); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--gold); margin: 14px 0 4px
}
.coord-card .nome { font-family: var(--serif-display); font-weight: 700; font-size: 1.12rem; color: var(--ink) }

@media (max-width: 760px) {
	.coord-layout { grid-template-columns: 1fr; gap: 24px; padding-right: clamp(20px, 5vw, 56px) }
	.coord-stage { height: auto }
	.coord-track { height: auto }
	.coord-group { height: auto; align-items: stretch }
	.coord-card { flex: 0 0 60vw; width: 60vw }
	.coord-card .foto { width: 100%; height: 70vw }
}

/* ============================================================================
   SEÇÃO 5 — DEPOIMENTOS (8 cards)
   ========================================================================== */
#sessao-depoimento-pos {
	background: var(--bg-2);
	padding: clamp(55px, 7vw, 100px) 0 !important;
	border-top: 1px solid var(--line)
}
.depo-head { margin-bottom: 42px }
.depo-head .depo-eyebrow {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
	color: var(--gold); display: block; margin-bottom: 14px
}
.depo-head .depo-titulo {
	font-family: var(--serif-display); font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	color: var(--ink); margin: 0
}
.depo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px }
.depo-card {
	background: #0e0c0a; padding: 30px 26px; display: flex; flex-direction: column;
	min-height: 320px; border-top: 3px solid var(--gold); border-radius: 2px
}
.depo-card .aspas { margin: 0 0 22px }
.depo-card .aspas::before {
	content: '\201C'; font-family: var(--serif-display); font-size: 2.8rem; color: var(--gold);
	line-height: .4; display: block; height: 26px
}
.depo-card .texto {
	font-family: var(--serif-display); font-weight: 500; font-style: italic; font-size: 1.1rem;
	line-height: 1.42; color: var(--ink); margin: 0 0 auto
}
.depo-card .nome {
	font-family: var(--serif-body); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
	font-size: .8rem; color: var(--gold); margin: 24px 0 6px
}
.depo-card .cargo { font-family: var(--serif-body); font-size: .84rem; color: var(--muted); font-weight: 300; line-height: 1.5; margin: 0 }

@media (max-width: 980px) { .depo-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px) { .depo-grid { grid-template-columns: 1fr } }

/* ============================================================================
 * LISTAGEM DE CURSOS (page-pos-graduacao.php) — FILTROS NO TOPO
 * Tela de cursos com cabeçalho + busca + filtros horizontais (pílulas) e
 * grid full-width de cards. Mesma paleta da landing. Lógica PHP intacta.
 * ========================================================================== */

#conteudo.pagina-pos-graduacao {
	--bg: #1c1a18;
	--bg-2: #161412;
	--ink: #f3efe6;
	--muted: #b7ae9d;
	--gold: #d4a738;
	--gold-soft: #e8c875;
	--line: #3a352f;
	--panel: #262220;
	--overlay: rgba(12, 10, 8, .86);
	--serif-display: 'Source Serif 4', Georgia, serif;
	--serif-body: 'Inter', sans-serif;
	--caps: 'Bebas Neue', Impact, sans-serif;
	--transicao: 300ms ease;
	background: var(--bg) !important;
	padding: 56px 0 90px
}
#conteudo.pagina-pos-graduacao .container { max-width: 1180px }

/* ---- CABEÇALHO + BUSCA (topo) ------------------------------------------- */
#conteudo.pagina-pos-graduacao .lista-topo {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 30px; flex-wrap: wrap; margin-bottom: 36px
}
#conteudo.pagina-pos-graduacao .lista-eyebrow {
	font-family: var(--caps); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
	color: var(--gold); display: block; margin-bottom: 10px
}
#conteudo.pagina-pos-graduacao .lista-titulo {
	font-family: var(--serif-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1; letter-spacing: -.01em; color: var(--ink) !important; margin: 0; text-transform: none !important
}
/* busca: campo transparente com sublinhado dourado no foco */
#conteudo.pagina-pos-graduacao .busca-box { position: relative; min-width: 300px; flex: 1; max-width: 420px }
#conteudo.pagina-pos-graduacao .busca-box .ico {
	position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--gold)
}
#conteudo.pagina-pos-graduacao .inputbtnBusca,
#conteudo.pagina-pos-graduacao input.inputbtnBusca {
	width: 100%;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 0 12px 28px;
	font-family: var(--serif-display);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--ink) !important;
	outline: none
}
#conteudo.pagina-pos-graduacao .inputbtnBusca:focus { border-bottom-color: var(--gold) !important; box-shadow: none !important }
#conteudo.pagina-pos-graduacao .inputbtnBusca::placeholder { color: #7a7264 }

/* ---- FILTROS EM PÍLULAS (topo) ------------------------------------------ */
#conteudo.pagina-pos-graduacao .filtros-grupo { margin-bottom: 18px }
#conteudo.pagina-pos-graduacao .filtros-label {
	font-family: var(--caps); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--muted); display: block; margin-bottom: 10px
}
#conteudo.pagina-pos-graduacao .filtros { display: flex; flex-wrap: wrap; gap: 8px }
#conteudo.pagina-pos-graduacao .pill,
#conteudo.pagina-pos-graduacao a.pill {
	font-family: var(--caps);
	font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
	padding: 8px 16px;
	border: 1px solid var(--line);
	background: transparent !important;
	color: var(--ink) !important;
	border-radius: 40px;
	cursor: pointer;
	transition: var(--transicao);
	text-decoration: none !important;
	white-space: nowrap;
	line-height: 1.3
}
#conteudo.pagina-pos-graduacao a.pill:hover {
	border-color: var(--gold); color: var(--gold-soft) !important; text-decoration: none !important
}
/* pílula ativa: fundo dourado + texto escuro */
#conteudo.pagina-pos-graduacao a.pill.ativo {
	background: var(--gold) !important; color: #1c1a18 !important; border-color: var(--gold)
}

#conteudo.pagina-pos-graduacao .lista-rule { height: 1px; background: var(--line); margin: 28px 0 40px }

/* ---- GRID FULL-WIDTH DE CARDS ------------------------------------------- */
#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 36px)
}
#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos::before,
#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos::after { content: none !important; display: none !important }

#conteudo.pagina-pos-graduacao .card.curso {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important
}
#conteudo.pagina-pos-graduacao .card.curso .infocurso { height: 100% }
#conteudo.pagina-pos-graduacao .card.curso a.tagueamento { text-decoration: none !important; display: block }

#conteudo.pagina-pos-graduacao .card.curso figure {
	margin: 0; position: relative; overflow: hidden; border-radius: 2px;
	aspect-ratio: 16/11; background: var(--bg-2)
}
#conteudo.pagina-pos-graduacao .card.curso figure img,
#conteudo.pagina-pos-graduacao .card.curso .card-img {
	width: 100% !important; height: 100% !important; object-fit: cover; display: block;
	filter: brightness(.92); transition: transform .8s cubic-bezier(.2, .7, .2, 1)
}
#conteudo.pagina-pos-graduacao .card.curso:hover figure img { transform: scale(1.05); filter: brightness(1) }

/* overlay vira bloco de texto abaixo da imagem */
#conteudo.pagina-pos-graduacao .card.curso .card-img-overlay {
	position: static !important;
	padding: 14px 0 0 !important;
	background: transparent !important;
	display: block !important
}
#conteudo.pagina-pos-graduacao .card.curso .card-body { padding: 0 !important; background: transparent !important }
#conteudo.pagina-pos-graduacao .card.curso .card-body h6.card-title {
	font-family: var(--caps); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--gold) !important; margin: 0 0 6px; font-weight: 400
}
#conteudo.pagina-pos-graduacao .card.curso .card-body h5.card-title {
	font-family: var(--serif-display); font-weight: 700; font-size: 1.18rem; line-height: 1.22;
	color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important;
	margin: 0 0 14px; text-shadow: none !important
}
#conteudo.pagina-pos-graduacao .card.curso:hover h5.card-title { color: var(--gold-soft) !important; -webkit-text-fill-color: var(--gold-soft) !important }
#conteudo.pagina-pos-graduacao .card.curso br { display: none }

/* botão "Saiba mais!" — pílula dourada vazada */
#conteudo.pagina-pos-graduacao .card.curso .text-center { text-align: left !important }
#conteudo.pagina-pos-graduacao .card.curso .btn-tipo1,
#conteudo.pagina-pos-graduacao .card.curso .btn.btn-success {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent !important;
	border: 1px solid var(--gold) !important;
	color: var(--gold) !important;
	font-family: var(--caps); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
	padding: 9px 18px !important; border-radius: 40px !important;
	box-shadow: none !important; transition: var(--transicao)
}
#conteudo.pagina-pos-graduacao .card.curso:hover .btn-tipo1,
#conteudo.pagina-pos-graduacao .card.curso:hover .btn.btn-success {
	background: var(--gold) !important; color: #1c1a18 !important
}

/* estado vazio */
#conteudo.pagina-pos-graduacao .lista-vazia { padding: 40px 0 }
#conteudo.pagina-pos-graduacao .lista-vazia h1 { font-family: var(--serif-display); font-weight: 700; color: var(--ink) !important }
#conteudo.pagina-pos-graduacao .lista-vazia p { color: var(--muted) }

/* ---- RESPONSIVO --------------------------------------------------------- */
@media (max-width: 991px) {
	#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos { grid-template-columns: repeat(2, 1fr) }
	#conteudo.pagina-pos-graduacao .lista-topo { flex-direction: column; align-items: stretch }
	#conteudo.pagina-pos-graduacao .busca-box { max-width: none }
}
@media (max-width: 575px) {
	#conteudo.pagina-pos-graduacao #cursos-lista .tabela-cursos { grid-template-columns: 1fr }
}

/* ============================================================================
 * BLINDAGEM FORTE — LISTAGEM (vence regras de ID do style.css do tema)
 * O style.css usa seletores com ID (ex.: #conteudo.pagina-institucional ...)
 * que ganhavam dos nossos. Aqui elevamos a especificidade ao mesmo nível
 * (ID duplo / ID + classe + tag) e forçamos cor/estrutura do tema escuro.
 * ========================================================================== */

/* fundo escuro real (vencendo #conteudo.pagina-institucional do tema) */
section#conteudo.pagina-institucional.pagina-pos-graduacao,
#conteudo.pagina-institucional.pagina-pos-graduacao {
	background: #1c1a18 !important;
	color: #f3efe6 !important
}

/* cabeçalho */
#conteudo.pagina-institucional.pagina-pos-graduacao .lista-eyebrow { color: #d4a738 !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .lista-titulo {
	color: #f3efe6 !important; -webkit-text-fill-color: #f3efe6 !important;
	font-family: 'Source Serif 4', Georgia, serif !important; font-size: clamp(2rem,4vw,3rem) !important;
	font-weight: 800 !important; text-transform: none !important
}

/* busca: caixa transparente, texto claro (matando o input azul do tema) */
#conteudo.pagina-institucional.pagina-pos-graduacao .busca-box { max-width: 420px }
#conteudo.pagina-institucional.pagina-pos-graduacao input.inputbtnBusca,
#conteudo.pagina-institucional.pagina-pos-graduacao .busca-box input {
	background: transparent !important; border: 0 !important;
	border-bottom: 1px solid #3a352f !important; border-radius: 0 !important;
	box-shadow: none !important; color: #f3efe6 !important; padding: 12px 0 12px 28px !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .busca-box .ico { color: #d4a738 !important; left: 2px }

/* FILTROS: forçar virar pílulas (o tema deixava como link azul) */
#conteudo.pagina-institucional.pagina-pos-graduacao .filtros { display: flex !important; flex-wrap: wrap !important; gap: 8px !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .filtros-label { color: #b7ae9d !important; display: block !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .filtros a.pill,
#conteudo.pagina-institucional.pagina-pos-graduacao a.pill {
	display: inline-block !important;
	font-family: 'Bebas Neue', Impact, sans-serif !important;
	font-size: .8rem !important; letter-spacing: .08em !important; text-transform: uppercase !important;
	padding: 8px 16px !important;
	border: 1px solid #3a352f !important;
	background: transparent !important;
	color: #f3efe6 !important;
	-webkit-text-fill-color: #f3efe6 !important;
	border-radius: 40px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1.3 !important;
	margin: 0 !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao a.pill:hover {
	border-color: #d4a738 !important; color: #e8c875 !important; -webkit-text-fill-color: #e8c875 !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao a.pill.ativo {
	background: #d4a738 !important; color: #1c1a18 !important; -webkit-text-fill-color: #1c1a18 !important; border-color: #d4a738 !important
}

#conteudo.pagina-institucional.pagina-pos-graduacao .lista-rule { height: 1px !important; background: #3a352f !important }

/* GRID: forçar grade e matar o float/sobreposição do tema */
#conteudo.pagina-institucional.pagina-pos-graduacao .tabela-cursos {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 34px !important;
	float: none !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso {
	float: none !important; width: auto !important; max-width: none !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important
}
/* a imagem dentro de figure com altura controlada (mata o overlay sobreposto) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso figure {
	margin: 0 !important; position: relative !important; overflow: hidden !important;
	aspect-ratio: 16/11 !important; background: #161412 !important; border-radius: 2px !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso figure img,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-img {
	width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important
}
/* overlay deixa de ser absoluto: vira bloco de texto abaixo */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-img-overlay {
	position: static !important; padding: 14px 0 0 !important; background: transparent !important;
	display: block !important; inset: auto !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body { padding: 0 !important; background: transparent !important }
/* modalidade: tag dourada (mata o fundo ciano) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body h6.card-title {
	background: transparent !important;
	color: #d4a738 !important; -webkit-text-fill-color: #d4a738 !important;
	font-family: 'Bebas Neue', Impact, sans-serif !important;
	font-size: .68rem !important; letter-spacing: .14em !important; text-transform: uppercase !important;
	margin: 0 0 6px !important; padding: 0 !important
}
/* título do curso claro */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body h5.card-title {
	background: transparent !important;
	color: #f3efe6 !important; -webkit-text-fill-color: #f3efe6 !important;
	font-family: 'Source Serif 4', Georgia, serif !important; font-weight: 700 !important;
	font-size: 1.18rem !important; line-height: 1.22 !important; margin: 0 0 14px !important; padding: 0 !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso br { display: none !important }
/* botão dourado vazado */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .text-center { text-align: left !important }
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .btn-tipo1,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .btn.btn-success {
	display: inline-flex !important; align-items: center !important;
	background: transparent !important; border: 1px solid #d4a738 !important;
	color: #d4a738 !important; -webkit-text-fill-color: #d4a738 !important;
	font-family: 'Bebas Neue', Impact, sans-serif !important; font-size: .78rem !important;
	letter-spacing: .1em !important; text-transform: uppercase !important;
	padding: 9px 18px !important; border-radius: 40px !important; box-shadow: none !important;
	width: auto !important; height: auto !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso:hover .btn-tipo1,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso:hover .btn.btn-success {
	background: #d4a738 !important; color: #1c1a18 !important; -webkit-text-fill-color: #1c1a18 !important
}

@media (max-width: 991px) {
	#conteudo.pagina-institucional.pagina-pos-graduacao .tabela-cursos { grid-template-columns: repeat(2, 1fr) !important }
}
@media (max-width: 575px) {
	#conteudo.pagina-institucional.pagina-pos-graduacao .tabela-cursos { grid-template-columns: 1fr !important }
}

/* ============================================================================
 * CORREÇÃO (v47) — card de curso: faixa branca embaixo + título invisível
 * O bloco de texto abaixo da imagem vinha com fundo branco (de .card/.card-body
 * do tema) e o título quase sumia. Forçamos o bloco a ficar escuro e o título
 * claro. A imagem agora ocupa só a parte de cima, texto embaixo no escuro.
 * ========================================================================== */

/* o card inteiro e o bloco de texto: fundo escuro (mata o branco do tema) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .infocurso,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-img-overlay,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body {
	background: #1c1a18 !important
}

/* bloco de texto embaixo: respiro interno e separado da imagem */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-img-overlay {
	position: static !important;
	inset: auto !important;
	padding: 16px 18px 20px !important;
	display: block !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body {
	padding: 0 !important
}

/* título do curso: claro e legível (estava claro sobre branco) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body h5.card-title {
	color: #f3efe6 !important;
	-webkit-text-fill-color: #f3efe6 !important;
	opacity: 1 !important;
	font-style: normal !important
}
/* tag de modalidade dourada (mantém) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-body h6.card-title {
	color: #d4a738 !important;
	-webkit-text-fill-color: #d4a738 !important;
	opacity: 1 !important
}

/* imagem: ocupa a parte de cima, fundo escuro enquanto carrega (não branco) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso figure {
	margin: 0 !important;
	aspect-ratio: 16/11 !important;
	background: #161412 !important;
	overflow: hidden !important;
	border-radius: 0 !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso figure img,
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso .card-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	opacity: 1 !important
}

/* borda sutil dourada no card todo (opcional, dá acabamento) */
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso {
	border: 1px solid #3a352f !important;
	border-radius: 2px !important;
	overflow: hidden !important
}
#conteudo.pagina-institucional.pagina-pos-graduacao .card.curso:hover {
	border-color: #d4a738 !important
}