/* =============================================================
   Página de Curso — Modernização (Fase 4b, wireframe 903e4f0e)
   Injetado no topo da coluna principal via hook
   thim_lp_before_single_course_summary. Reaproveita tokens CEAD.
   ============================================================= */

.cead-curso__breadcrumb,
.cead-curso__hero,
.cead-curso__meta,
.cead-curso__learn-slot,
.cead-curso__curriculum-wrap,
.cead-curso__certs-wrap {
	font-family: var(--cead-font);
}

/* ---------- Hero nativo do tema (bloco navy: h1 + excerpt + professor/
   categorias/revisão) sai de cena — substituído pelo hero CEAD abaixo,
   no padrão do wireframe (título + descrição curta em fundo branco) ---------- */
body.single-lp_course .course-info-top {
	display: none;
}
/* O tema puxava a sidebar 200px pra cima pra sobrepor o hero navy
   (.sticky-sidebar{margin-top:-200px}) — sem o hero, ela invadia o
   header do site */
body.single-lp_course .sticky-sidebar {
	margin-top: 0 !important;
}
/* O theiaStickySidebar (plugin JS do tema) tem um bug de transição ao
   inverter o sentido do scroll — o card ficava alguns px curto do
   necessário bem na hora que o navbar reaparece (ver JS). position:sticky
   nativo do CSS foi tentado no lugar, mas o `body` do site tem
   overflow-x:clip sem overflow-y — por spec isso faz o overflow-y computar
   pra "auto" sozinho, o que transforma o body num scroll container e
   quebra sticky (ver histórico no JS). Forçar overflow-y não-visible no
   body pra "corrigir" isso quebra o scroll da página inteira (é o body
   que propaga o comportamento de scroll pro viewport aqui — mexer
   sitewide é arriscado demais). Fix final: sticky 100% JS, controlado por
   nós (v2 13/07: só fluxo natural ou fixed com leituras ao vivo — sem
   position:absolute, ver JS), sem depender de position:sticky nem da
   state machine do plugin do tema. */

/* ---------- Hero CEAD — título + descrição curta ---------- */
.cead-curso__hero {
	margin: 0 0 var(--cead-space-4);
}
.cead-curso__title {
	font-family: var(--cead-font);
	font-size: var(--cead-text-3xl);
	font-weight: var(--cead-font-bold);
	color: var(--cead-text);
	line-height: var(--cead-leading-tight);
	margin: 0 0 var(--cead-space-3);
}
.cead-curso__subtitle {
	font-size: var(--cead-text-base);
	color: var(--cead-text-soft);
	line-height: var(--cead-leading-relaxed);
	max-width: 62ch;
	margin: 0;
}

/* ---------- Breadcrumb ---------- */
.cead-curso__breadcrumb {
	font-size: var(--cead-text-sm);
	color: var(--cead-text-soft);
	margin: 0 0 var(--cead-space-3);
}
.cead-curso__breadcrumb a {
	color: var(--cead-text-soft);
	text-decoration: none;
}
.cead-curso__breadcrumb a:hover {
	color: var(--cead-green);
}
.cead-curso__breadcrumb .sep {
	margin: 0 var(--cead-space-2);
}
.cead-curso__breadcrumb .cur {
	color: var(--cead-text);
	font-weight: var(--cead-font-semibold);
}

/* ---------- Meta row ---------- */
.cead-curso__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cead-space-4);
	margin: 0 0 var(--cead-space-6);
	padding-bottom: var(--cead-space-5);
	border-bottom: 1px solid var(--cead-border);
	font-size: var(--cead-text-sm);
	color: var(--cead-text-soft);
}
.cead-curso__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cead-curso__meta svg {
	color: var(--cead-green);
	flex: none;
}

/* ---------- "O que você vai aprender" (movido via JS pro slot) ---------- */
.cead-curso__learn-slot:empty {
	display: none;
}
.cead-curso__learn-slot {
	margin-bottom: var(--cead-space-8);
}
/* Wireframe: a lista de aprendizado aparece direto sob a meta row, sem
   heading — o h3 vem junto no move (é o nó real do post_content) e fica
   oculto aqui */
.cead-curso__learn-slot h3 {
	display: none;
}
.cead-curso__learn-slot ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cead-space-2) var(--cead-space-6);
}
.cead-curso__learn-slot li {
	display: flex;
	align-items: flex-start;
	gap: var(--cead-space-2);
	font-size: var(--cead-text-sm);
	color: var(--cead-text);
	line-height: var(--cead-leading-snug);
}
.cead-curso__learn-slot li::before {
	content: "\2713";
	color: var(--cead-green);
	font-weight: var(--cead-font-bold);
	flex: none;
	margin-top: 1px;
}

/* Variante "tópicos com descrição" (piloto 16/07/2026). v1 usava cards com
   borda/padding (título em bloco próprio) — Hugo reportou espaço vertical
   demais no mobile. v2 (mesmo dia): sem card, marcador numerado redondo +
   texto corrido (título inline, não bloco) — cada tópico vira 1 linha
   compacta, empilha bem mais apertado. */
.cead-curso__learn-slot ul.cead-topics-list {
	grid-template-columns: 1fr;
	gap: var(--cead-space-3);
	counter-reset: cead-topic;
}
@media (min-width: 768px) {
	.cead-curso__learn-slot ul.cead-topics-list {
		grid-template-columns: 1fr 1fr;
		gap: var(--cead-space-3) var(--cead-space-6);
	}
}
.cead-curso__learn-slot ul.cead-topics-list li {
	counter-increment: cead-topic;
	position: relative;
	padding: 0 0 0 34px;
	min-height: 24px;
	background: none;
	border: none;
	font-size: var(--cead-text-sm);
	line-height: var(--cead-leading-relaxed);
	color: var(--cead-text-soft);
}
/* position:absolute (não flex): título+descrição seguem em fluxo normal de
   texto, quebrando linha naturalmente sob o padding-left — um <li> flex
   transformava <strong> e o texto seguinte em 2 flex items separados, cada
   um espremendo (flex-shrink) de forma independente, e o número ficava por
   cima do título quebrado (bug visto no v2, corrigido no mesmo dia) */
.cead-curso__learn-slot ul.cead-topics-list li::before {
	content: counter(cead-topic);
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--cead-green-light);
	color: var(--cead-green);
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}
.cead-curso__learn-slot ul.cead-topics-list li strong {
	display: inline;
	font-size: var(--cead-text-sm);
	color: var(--cead-text);
}

/* ---------- Títulos de seção reaproveitados (font-family explícita —
   o tema aplica serif slab em qualquer h2/h3) ---------- */
.cead-curso__sectiontitle {
	font-family: var(--cead-font) !important;
	font-size: var(--cead-text-lg);
	font-weight: var(--cead-font-bold);
	color: var(--cead-text);
	margin: 0 0 var(--cead-space-3);
}
.cead-curso__sectionsub {
	font-size: var(--cead-text-sm);
	color: var(--cead-text-soft);
	margin: 0 0 var(--cead-space-4);
}

/* ---------- Currículo em accordion (dados reais LP) — tipografia e
   espaçamentos do wireframe; font-family forçada em tudo (o tema vaza
   serif slab pros títulos de seção) ---------- */
.cead-curso__curriculum-wrap {
	margin-bottom: var(--cead-space-8);
}
.cead-curso__curriculum-wrap .lp-course-curriculum,
.cead-curso__curriculum-wrap .lp-course-curriculum * {
	font-family: var(--cead-font) !important;
}
/* Exceção: os glyphs do LP são icon font — o forçamento acima os quebrava
   em quadradinhos (chevron do módulo) */
.cead-curso__curriculum-wrap .lp-course-curriculum i[class*="lp-icon"],
.cead-curso__curriculum-wrap .lp-course-curriculum i[class*="lp-icon"]::before,
.cead-curso__curriculum-wrap .lp-course-curriculum .course-item-ico::before {
	font-family: "lp-icon" !important;
}
.cead-curso__curriculum-wrap .lp-course-curriculum__title {
	display: none; /* já temos nosso próprio "Conteúdo do curso" acima */
}
.cead-curso__curriculum-wrap .lp-course-curriculum {
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-lg);
	overflow: hidden;
}
.cead-curso__curriculum-wrap .course-curriculum-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--cead-space-3) var(--cead-space-4) !important;
	margin: 0 !important;
	background: var(--cead-surface);
	font-size: var(--cead-text-sm);
	color: var(--cead-text-soft);
	list-style: none;
	border-bottom: 1px solid var(--cead-border);
}
.cead-curso__curriculum-wrap .course-curriculum-info__left {
	display: flex;
	flex-wrap: nowrap !important;
	gap: var(--cead-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
/* O tema aplica display:flex + column nesses li's genericamente (layout
   ícone-em-cima-do-texto usado em outros contextos) — força linha única
   com o texto, senão o separador quebra pra baixo em linha própria */
.cead-curso__curriculum-wrap .course-curriculum-info__left li {
	list-style: none;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	white-space: nowrap;
	gap: 0 !important; /* a LP declara gap:8px neste li (learnpress.min.css) */
}
/* A LP imprime separadores próprios nos li's — anulados. O "•" entre os
   itens (achado 16/07/2026: como texto real via JS, não ::after — um
   pseudo-elemento gerado dentro de um li flex nesse contexto duplicava
   visualmente numa 2ª linha fantasma abaixo do texto, bug de arredondamento
   sub-pixel do Chromium com a caixa gerada de 4x4px; não reproduzível 100%
   das vezes, então nem "gap:0" sozinho é garantia — eliminar o pseudo-
   elemento de vez resolve por construção). Ver rewriteCount() em
   cead-course-modern.js. */
.cead-curso__curriculum-wrap .course-curriculum-info__left li::before,
.cead-curso__curriculum-wrap .course-curriculum-info__left li::after {
	content: none !important;
}
.cead-curso__curriculum-wrap .course-toggle-all-sections {
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-semibold);
	color: var(--cead-blue) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	background: none;
	border: none;
}
.cead-curso__curriculum-wrap .course-section + .course-section {
	border-top: 1px solid var(--cead-border);
}
/* Zera margens/paddings herdados do tema na cadeia do accordion — sem isso
   o título do módulo encostava na borda esquerda do card (print 11/07) */
.cead-curso__curriculum-wrap .course-curriculum,
.cead-curso__curriculum-wrap .course-sections,
.cead-curso__curriculum-wrap .course-section,
.cead-curso__curriculum-wrap .course-section__items {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Cabeçalho do módulo — wireframe: título à esquerda, "N aulas" + chevron
   à direita (nativo traz o chevron à ESQUERDA e a contagem como pill) */
.cead-curso__curriculum-wrap .course-section-header {
	display: flex !important;
	align-items: center;
	padding: var(--cead-space-3) var(--cead-space-4) !important;
	margin: 0 !important;
	cursor: pointer;
	gap: var(--cead-space-3);
	min-height: 0 !important;
}
.cead-curso__curriculum-wrap .course-section-header .section-toggle {
	order: 3;
	color: var(--cead-text-soft);
	flex: none;
}
.cead-curso__curriculum-wrap .course-section-header .course-section-info {
	order: 1;
	flex: 1;
	min-width: 0;
}
.cead-curso__curriculum-wrap .course-section-header .section-count-items {
	order: 2;
	flex: none;
}
.cead-curso__curriculum-wrap .course-section__title {
	font-size: var(--cead-text-base) !important;
	font-weight: var(--cead-font-bold) !important;
	color: var(--cead-text) !important;
	line-height: var(--cead-leading-snug) !important;
	text-transform: none !important; /* tema forçava CAIXA ALTA */
	letter-spacing: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.cead-curso__curriculum-wrap .section-count-items {
	font-size: var(--cead-text-sm) !important;
	font-weight: var(--cead-font-medium) !important;
	color: var(--cead-text-soft) !important; /* tema pinta de verde */
	white-space: nowrap;
	background: none !important;
	border: none !important;
	padding: 0 !important;
}
.cead-curso__curriculum-wrap .course-section__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cead-curso__curriculum-wrap .course-item {
	list-style: none;
	border-top: 1px solid var(--cead-border);
}
.cead-curso__curriculum-wrap .course-item__link {
	display: flex !important;
	align-items: center;
	gap: var(--cead-space-2);
	padding: var(--cead-space-2) var(--cead-space-4) var(--cead-space-2) var(--cead-space-8) !important;
	margin: 0 !important;
	min-height: 0 !important;
	text-decoration: none !important;
	font-size: var(--cead-text-sm);
	color: var(--cead-text) !important;
	line-height: var(--cead-leading-snug) !important;
}
.cead-curso__curriculum-wrap .course-item__info,
.cead-curso__curriculum-wrap .course-item__content,
.cead-curso__curriculum-wrap .course-item__left,
.cead-curso__curriculum-wrap .course-item__status {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}
.cead-curso__curriculum-wrap .course-item__content {
	flex: 1;
	min-width: 0;
}
.cead-curso__curriculum-wrap .course-item-ico {
	flex: none;
	color: var(--cead-text-soft);
	width: 16px;
	height: 16px;
}
.cead-curso__curriculum-wrap .course-item-title {
	flex: 1;
	font-size: var(--cead-text-sm) !important;
	font-weight: var(--cead-font-regular) !important;
	color: var(--cead-text) !important;
}
.cead-curso__curriculum-wrap .course-item__right {
	flex: none;
	margin: 0 !important;
	padding: 0 !important;
}
.cead-curso__curriculum-wrap .course-item__right .duration {
	font-size: var(--cead-text-xs);
	color: var(--cead-text-soft);
	white-space: nowrap;
}
.cead-curso__curriculum-wrap .lp-course-curriculum .course-item::before {
	display: none; /* barra lateral nativa da LP, sem uso fora do overlay de aula */
}

/* Status dos itens — wireframe não mostra cadeado; visitante entende o
   bloqueio ao clicar (fluxo nativo, matrícula grátis e instantânea).
   !important: o learnpress.css imprime depois deste arquivo e empata em
   especificidade (confirmado via computed style — regras sem !important
   perdiam a cascata) */
.cead-curso__curriculum-wrap .course-item__status .course-item-ico.locked {
	display: none !important;
}

/* Ícones discretos como no wireframe: chevron e ícone de tipo da aula
   em cinza suave (tema pinta ambos de verde) */
.cead-curso__curriculum-wrap .section-toggle i {
	color: var(--cead-text-soft) !important;
	font-size: 14px !important;
}
.cead-curso__curriculum-wrap .course-item__info .course-item-ico::before {
	color: var(--cead-text-soft) !important;
}

/* "Vida útil" (rótulo nativo de acesso vitalício) não existe no wireframe */
.cead-curso__curriculum-wrap .course-curriculum-info__left li.course-duration {
	display: none !important;
}

/* ---------- Cards de certificado ---------- */
.cead-curso__certs-wrap {
	margin-bottom: var(--cead-space-8);
}
/* Lateral-centro-lateral equidistantes: padding do container = gap entre os
   cards (feedback 14/07 — antes o max-width:480px centralizado deixava a
   margem lateral bem maior que o vão entre os 2 cards) */
.cead-curso__certs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cead-space-4);
	padding: 0 var(--cead-space-4);
}
/* Card com a imagem do MODELO REAL do certificado no topo (mesmas imagens
   genéricas de /novo-sistema-de-certificados/), corpo com benefícios e CTA.
   Reduzido e simplificado (feedback 13/07 — menor e mais direto) */
.certcard {
	border-radius: var(--cead-radius-lg);
	border: 1px solid var(--cead-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	box-shadow: var(--cead-shadow-md);
}
.certcard__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 600 / 440; /* modelos têm proporções levemente diferentes
	                            (444 vs 436) — normaliza pra alinhar os corpos */
	object-fit: cover;
	border-bottom: 1px solid var(--cead-border);
	background: var(--cead-white);
}
.certcard__body {
	display: flex;
	flex-direction: column;
	gap: var(--cead-space-2);
	padding: var(--cead-space-3);
	flex: 1;
}
.certcard__body .cead-badge {
	align-self: flex-start;
}
.certcard .price {
	font-family: var(--cead-font);
	font-size: var(--cead-text-lg);
	font-weight: var(--cead-font-bold);
	color: var(--cead-text);
}
.certcard .price small {
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-medium);
	color: var(--cead-text-soft);
}
.certcard ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cead-space-1);
	font-size: var(--cead-text-xs);
	color: var(--cead-text-soft);
	flex: 1;
}
.certcard ul li {
	margin: 0;
}
.certcard ul li::before {
	content: "\2713 ";
	color: var(--cead-green);
}
.certcard a.cead-btn {
	padding: 0.5rem 0.9rem;
	font-size: var(--cead-text-xs);
}

/* =============================================================
   Card lateral — modelo do wireframe (thumbnail com play, eyebrow,
   CTA verde, características com chips, "Já domina o assunto?").
   O form de matrícula nativo da LP continua por baixo — só a casca
   visual muda.
   ============================================================= */
body.single-lp_course .sticky-sidebar .course_right {
	font-family: var(--cead-font);
	background: var(--cead-white);
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-lg);
	overflow: hidden;
	box-shadow: var(--cead-shadow-md);
	padding-bottom: var(--cead-space-5);
	/* Respiro pequeno no mobile, onde o card fica em fluxo normal logo
	   abaixo do navbar (sem sticky — ver JS, isDesktopSidebarLayout) */
	margin-top: var(--cead-space-2);
}
/* Acima de 992px o card vira sticky (JS) e precisa do respiro maior pra
   não encostar direto na borda superior ao grudar no topo do scroll —
   o JS sobrescreve esse valor via inline style em tempo real, isto aqui
   é só o valor inicial antes do primeiro measureSticky() rodar */
@media (min-width: 992px) {
	body.single-lp_course .sticky-sidebar .course_right {
		margin-top: var(--cead-space-5);
	}
}

/* Thumbnail full-bleed no topo (sem overlay de play — prévia removida,
   matrícula é grátis e instantânea) */
body.single-lp_course .course_right .course-thumbnail {
	position: relative;
	margin: 0;
}
body.single-lp_course .course_right .course-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bloco de pagamento: eyebrow + botão nativo reskinado */
body.single-lp_course .course_right .course-payment {
	display: block;
	float: none;
	padding: var(--cead-space-5) var(--cead-space-5) 0;
	margin: 0;
}
body.single-lp_course .course_right .cead-curso__eyebrow {
	font-size: var(--cead-text-xs);
	font-weight: var(--cead-font-bold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cead-green);
	margin-bottom: var(--cead-space-3);
}
body.single-lp_course .course_right .course-price {
	display: none; /* o "Grátis" grande — a informação já está no eyebrow */
}
/* O botão "Continuar" (aluno já matriculado) vem em <a><button>, não <form>,
   e sem a largura total do wireframe — força bloco full-width nos dois casos */
body.single-lp_course .course_right .lp-course-buttons {
	display: block !important;
}
body.single-lp_course .course_right .lp-course-buttons form {
	margin: 0;
}
body.single-lp_course .course_right .lp-course-buttons a {
	display: block;
	text-decoration: none !important;
}
body.single-lp_course .course_right .lp-course-buttons .lp-button {
	display: block !important;
	width: 100% !important;
	padding: 0.85rem 1rem;
	background: var(--cead-green) !important;
	color: var(--cead-text-white) !important;
	font-family: var(--cead-font) !important;
	font-size: var(--cead-text-sm) !important;
	font-weight: var(--cead-font-bold) !important;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: none !important;
	border-radius: var(--cead-radius-md) !important;
	cursor: pointer;
}
body.single-lp_course .course_right .lp-course-buttons .lp-button:hover {
	background: var(--cead-green-hover) !important;
}

/* Características do curso — chips verdes + "valor em negrito, rótulo
   suave" (flex order inverte valor/rótulo do markup nativo) */
body.single-lp_course .course_right .thim-course-info {
	padding: var(--cead-space-5) var(--cead-space-5) 0;
	margin: 0;
}
body.single-lp_course .course_right .thim-course-info .title {
	font-family: var(--cead-font) !important;
	font-size: var(--cead-text-sm) !important;
	font-weight: var(--cead-font-bold) !important;
	color: var(--cead-text) !important;
	margin: 0 0 var(--cead-space-3);
}
body.single-lp_course .course_right .thim-course-info ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cead-space-3);
}
body.single-lp_course .course_right .thim-course-info li {
	display: flex;
	align-items: center;
	gap: var(--cead-space-3);
	font-size: var(--cead-text-sm);
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.single-lp_course .course_right .thim-course-info li i {
	order: 1;
	flex: none;
	width: 26px;
	height: 26px;
	background: none;
	color: var(--cead-green) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}
body.single-lp_course .course_right .thim-course-info li .value {
	order: 2;
	font-weight: var(--cead-font-bold);
	color: var(--cead-text);
	float: none !important;
}
body.single-lp_course .course_right .thim-course-info li .label {
	order: 3;
	color: var(--cead-text-soft);
	font-weight: var(--cead-font-regular);
}
/* Tema anexa ":" ao rótulo via pseudo-elemento — não existe no wireframe */
body.single-lp_course .course_right .thim-course-info li .label::after,
body.single-lp_course .course_right .thim-course-info li .label::before {
	content: none !important;
}
/* Itens que o wireframe não mostra (Questionário 0, Nível, Avaliações) */
body.single-lp_course .course_right .thim-course-info li.quizzes-feature,
body.single-lp_course .course_right .thim-course-info li.skill-feature,
body.single-lp_course .course_right .thim-course-info li.assessments-feature {
	display: none;
}

/* Texto dos tipos (Exclusivo/Premium) sem fundo — cor já diferencia o tier,
   no badge de cada card em "Emita seu certificado" */
.certcard .cead-badge {
	background: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Social share nativo (círculos fb/x) fora do card — wireframe não tem */
body.single-lp_course .course_right .social_share {
	display: none;
}

/* A barra sticky inferior do tema reusa o hook thim_single_course_payment —
   o eyebrow não deve aparecer lá */
body.single-lp_course .thim-course-landing-button .cead-curso__eyebrow {
	display: none;
}

/* =============================================================
   "VISÃO GERAL" — a caixa com borda e o rótulo saem; o conteúdo
   (Sobre o curso, certificados com lightbox) flui como seção plana,
   padrão wireframe. Tipografia alinhada ao design system.
   ============================================================= */
body.single-lp_course #tab-overview {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-bottom: var(--cead-space-8);
	background: transparent !important;
}
body.single-lp_course #tab-overview > h2.title,
body.single-lp_course #tab-overview > .sc_heading {
	display: none; /* rótulo "Visão geral" */
}
body.single-lp_course #tab-overview h2,
body.single-lp_course #tab-overview h3 {
	font-family: var(--cead-font) !important;
	font-size: var(--cead-text-lg) !important;
	font-weight: var(--cead-font-bold) !important;
	color: var(--cead-text) !important;
	line-height: var(--cead-leading-snug);
	margin: 0 0 var(--cead-space-3) !important;
}
/* Tema zera margin/padding globalmente (* { margin:0 }) — sem isso os
   parágrafos ficam colados uns nos outros, sem respiro (achado 16/07/2026) */
body.single-lp_course #tab-overview p {
	font-family: var(--cead-font);
	font-size: var(--cead-text-sm);
	color: var(--cead-text);
	line-height: var(--cead-leading-relaxed);
	margin: 0 0 var(--cead-space-4) !important;
}
body.single-lp_course #tab-overview p:last-child {
	margin-bottom: 0 !important;
}
body.single-lp_course #tab-overview ul,
body.single-lp_course #tab-overview ol {
	margin: 0 0 var(--cead-space-4) !important;
	padding-left: var(--cead-space-5) !important;
}
body.single-lp_course #tab-overview li {
	font-family: var(--cead-font);
	font-size: var(--cead-text-sm);
	color: var(--cead-text);
	line-height: var(--cead-leading-relaxed);
	margin-bottom: var(--cead-space-2) !important;
}
body.single-lp_course #tab-overview h2,
body.single-lp_course #tab-overview h3 {
	margin-top: var(--cead-space-6) !important;
}
body.single-lp_course #tab-overview > *:first-child {
	margin-top: 0 !important;
}

/* =============================================================
   "Sobre o Certificado" — modelos disponíveis no curso (apresentação,
   achado 16/07/2026: diferente da Seção "Emita seu certificado", que é o
   fluxo de solicitação/pagamento). Texto já existe no post_content de
   354 cursos; o JS (cead-course-modern.js) move os nós existentes pra
   este wrapper e troca style inline por classe — nada é reescrito no
   banco.
   ============================================================= */
.cead-certmodels {
	margin: var(--cead-space-6) 0;
	padding: var(--cead-space-5);
	background: var(--cead-surface);
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-lg);
}
body.single-lp_course #tab-overview .cead-certmodels.cead-certmodels h3.cead-certmodels__title {
	margin-top: 0 !important;
	font-size: var(--cead-text-lg) !important;
}
.cead-certmodels__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--cead-space-4);
	margin: var(--cead-space-4) 0 !important;
}
@media (max-width: 767px) {
	.cead-certmodels__row {
		grid-template-columns: 1fr;
	}
}
.cead-certmodel {
	display: flex;
	flex-direction: column;
	gap: var(--cead-space-2);
	padding: var(--cead-space-3);
	background: var(--cead-white);
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-md);
	text-align: center;
}
.cead-certmodel img.cead-cert-model-img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	border-radius: var(--cead-radius-sm);
	border: 1px solid var(--cead-border);
	cursor: zoom-in;
	margin: 0 0 var(--cead-space-1) !important;
}
.cead-certmodel .cead-badge {
	align-self: center;
	margin-bottom: var(--cead-space-1);
}
.cead-certmodel p {
	margin: 0 !important;
	font-size: var(--cead-text-xs) !important;
	color: var(--cead-text-soft) !important;
	line-height: var(--cead-leading-relaxed) !important;
}

/* ---------- Aulas sem vídeo: rótulo "Leitura" (injetado via JS) ---------- */
.cead-curso__curriculum-wrap .duration.cead-reading {
	font-style: italic;
}

/* =============================================================
   "Você pode gostar" — cards verticais do design system (mesmo
   componente da home/categorias, .cead-vcard), grid simples sem
   carrossel (só 5 cursos, não precisa de drag/paginação)
   ============================================================= */
.cead-curso__related-wrap {
	margin-bottom: var(--cead-space-8);
}
/* Carrossel — 4 cards visíveis no desktop, 2 no mobile, troca automática
   a cada 3s (JS: cead-course-modern.js). Viewport recorta, track desliza
   via transform. */
.cead-curso__related-viewport {
	overflow: hidden;
}
.cead-curso__related-track {
	display: flex;
	gap: var(--cead-space-4);
	transition: transform 0.5s ease;
}
.cead-curso__related-track > * {
	flex: 0 0 calc((100% - var(--cead-space-4) * 3) / 4);
	min-width: 0;
}
@media (max-width: 991px) {
	.cead-curso__related-track > * {
		flex: 0 0 calc((100% - var(--cead-space-4)) / 2);
	}
}

/* =============================================================
   "Comentários" (avaliações nativas da LP) — resumo + barras de
   distribuição por estrela, tipografia e cores do design system
   ============================================================= */
body.single-lp_course #tab-reviews .item-title {
	font-family: var(--cead-font) !important;
	font-size: var(--cead-text-lg) !important;
	font-weight: var(--cead-font-bold) !important;
	color: var(--cead-text) !important;
	margin: 0 0 var(--cead-space-3) !important;
}
body.single-lp_course #tab-reviews .course-rate {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cead-space-8);
	padding: var(--cead-space-6);
	background: var(--cead-surface);
	border: 1px solid var(--cead-border);
	border-radius: var(--cead-radius-lg);
}
body.single-lp_course #tab-reviews .course-rate__summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cead-space-2);
	flex: none;
	min-width: 140px;
	padding-right: var(--cead-space-8);
	border-right: 1px solid var(--cead-border);
}
body.single-lp_course #tab-reviews .course-rate__summary-value {
	font-family: var(--cead-font) !important;
	font-size: var(--cead-text-4xl) !important;
	font-weight: var(--cead-font-bold) !important;
	color: var(--cead-text) !important;
	line-height: 1;
}
body.single-lp_course #tab-reviews .course-rate__summary-text {
	font-family: var(--cead-font);
	font-size: var(--cead-text-sm);
	color: var(--cead-text-soft);
}
/* Estrela = <em class="far"> (contorno, base) + <em class="fas" style="width:X%">
   (preenchida, sobreposta e recortada pelo width inline nativo) */
body.single-lp_course #tab-reviews .review-star {
	position: relative;
	display: inline-flex;
}
body.single-lp_course #tab-reviews .review-star em.far,
body.single-lp_course #tab-reviews .course-rate__details-row em.far {
	color: var(--cead-border);
}
body.single-lp_course #tab-reviews .review-star em.fas {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--cead-amber);
}
body.single-lp_course #tab-reviews .review-star svg,
body.single-lp_course #tab-reviews .course-rate__details-row em.lp-review-svg-star svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}
body.single-lp_course #tab-reviews .course-rate__details {
	flex: 1;
	min-width: 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--cead-space-2);
}
body.single-lp_course #tab-reviews .course-rate__details-row {
	display: flex;
	align-items: center;
	gap: var(--cead-space-2);
	font-family: var(--cead-font);
	font-size: var(--cead-text-xs);
	color: var(--cead-text-soft);
}
body.single-lp_course #tab-reviews .course-rate__details-row-star {
	width: 10px;
	text-align: right;
	font-weight: var(--cead-font-semibold);
	color: var(--cead-text);
}
body.single-lp_course #tab-reviews .course-rate__details-row em.lp-review-svg-star {
	flex: none;
	color: var(--cead-amber);
}
body.single-lp_course #tab-reviews .course-rate__details-row-value {
	position: relative;
	flex: 1;
	height: 8px;
	border-radius: var(--cead-radius-pill);
	background: var(--cead-border);
	overflow: hidden;
}
body.single-lp_course #tab-reviews .course-rate__details-row-value .rating-gray {
	display: none; /* o fundo cinza já vem do wrapper acima */
}
body.single-lp_course #tab-reviews .course-rate__details-row-value .rating {
	position: absolute;
	inset: 0;
	background: var(--cead-amber);
	border-radius: var(--cead-radius-pill);
}
body.single-lp_course #tab-reviews .rating-count {
	width: 20px;
	text-align: right;
}
/* Botão "Escreva uma avaliação" (só visível pra aluno logado/matriculado) */
body.single-lp_course #tab-reviews .lp-button,
body.single-lp_course #tab-reviews button.button {
	background: var(--cead-green) !important;
	color: var(--cead-text-white) !important;
	font-family: var(--cead-font) !important;
	font-weight: var(--cead-font-bold) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: none !important;
	border-radius: var(--cead-radius-md) !important;
	padding: var(--cead-btn-py) var(--cead-btn-px);
	margin-top: var(--cead-space-4);
	cursor: pointer;
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
	.cead-curso__learn-slot ul {
		grid-template-columns: 1fr;
	}
	.cead-curso__certs {
		grid-template-columns: 1fr;
	}
	.cead-curso__meta {
		gap: var(--cead-space-3);
	}
}