/* =========================================================================
   Página de curso — padrão do Grupo UNEED.
   ====================================================================== */

/* --- Hero com formulário ------------------------------------------------ */

.hero-curso {
	position: relative;
	padding-block: clamp(3.5rem, 2.5rem + 5vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem);
	overflow: hidden;
	scroll-margin-top: 90px;
}

/* --- Fundo com imagem desfocada -------------------------------------------
   A <img> vem em 480px e é ampliada até cobrir. Ver a nota em
   inc/setup.php: `filter: blur()` processa cada pixel, então desfocar uma
   imagem pequena e ampliar custa uma fração de desfocar a grande — e o
   desfoque apaga os artefatos da ampliação. */

.hero-curso__fundo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero-curso__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* A escala compensa a borda transparente que o desfoque cria: sem
	   ela, aparece uma faixa clara nas quatro bordas do bloco. */
	transform: scale(1.15);
	transform-origin: center;
}

.hero-curso__fundo--suave img { filter: blur(14px) saturate(1.1); }
.hero-curso__fundo--medio img { filter: blur(30px) saturate(1.15); }
.hero-curso__fundo--forte img { filter: blur(56px) saturate(1.25); }

/* Véu por cima da imagem.
   Aqui ele é necessário — diferente do hero da home, onde a arte é
   controlada e discreta. Foto arbitrária pode ter área clara em qualquer
   lugar, e o título precisa ser legível independentemente de qual imagem
   o editor subir. */
.hero-curso__fundo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(105deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 55%, color-mix(in srgb, var(--bg) 78%, transparent) 100%),
		linear-gradient(180deg, transparent 40%, var(--bg) 98%);
}

/* --- Brilho alternativo, sem imagem ---------------------------------------- */

.hero-curso__brilho {
	position: absolute;
	inset: -20% -10% auto;
	height: 120%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(55% 60% at 22% 30%, color-mix(in srgb, var(--arte-1) 26%, transparent), transparent 70%),
		radial-gradient(50% 50% at 68% 20%, color-mix(in srgb, var(--arte-2) 18%, transparent), transparent 68%);
}

.hero-curso__conteudo { position: relative; z-index: 2; }

.hero-curso__grid {
	display: grid;
	gap: var(--sp-10);
	grid-template-columns: 1fr;
	align-items: start;
}

.badge {
	display: inline-block;
	padding: var(--sp-2) var(--sp-4);
	margin-bottom: var(--sp-6);
	background: var(--brand);
	color: #fff;
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	text-decoration: none;
}

.badge:hover { background: var(--brand-hover); color: #fff; }

.hero-curso__titulo {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
	max-width: 20ch;
	margin-bottom: var(--sp-6);
}

.hero-curso__resumo {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: 1.75;
	max-width: 52ch;
}

.hero-curso__ementa { margin-top: var(--sp-8); }

/* Painel do formulário — TRANSPARENTE.
   O tema não estiliza o embed do RD, então a aparência do formulário
   (cor de campo, de rótulo e de botão) é definida no construtor do RD
   Station. Com o painel transparente, é de lá que vem tudo.

   Se o texto do formulário ficar ilegível sobre o fundo escuro, o ajuste
   é no RD, não aqui — o tema deixou de impor cor de propósito. */
.hero-curso__form {
	background: transparent;
	border: 1px solid var(--line);
	padding: var(--sp-6);
	min-height: 380px;
}

@media (min-width: 1024px) {
	.hero-curso__grid {
		grid-template-columns: 1.05fr .95fr;
		gap: var(--sp-16);
	}
}

/* --- Barra de dados ------------------------------------------------------
   Divisórias verticais entre atributos do mesmo objeto. Card por item
   sugeriria independência que não existe. */

/* Fundo igual ao do site; as réguas em cima e embaixo já delimitam a
   faixa. Fundo próprio criaria uma listra logo abaixo do hero. */
.dados-curso {
	border-block: 1px solid var(--line);
}

.dados-curso__faixa {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	margin: 0;
}

.dados-curso__item {
	padding: var(--sp-8) var(--sp-6);
	border-left: 1px solid var(--line);
}

.dados-curso__item:first-child { border-left: 0; }

.dados-curso__rotulo {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-subtle);
	margin-bottom: var(--sp-3);
}

.dados-curso__valor {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: var(--fw-display-forte);
	line-height: 1.1;
	letter-spacing: var(--ls-tight);
}

.dados-curso__nota {
	display: block;
	margin-top: var(--sp-2);
	font-family: var(--ff-body);
	font-size: var(--fs-xs);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--text-subtle);
}

@media (max-width: 820px) {
	.dados-curso__item {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding: var(--sp-5) 0;
	}
	.dados-curso__item:first-child { border-top: 0; }
}

/* --- Marquee -------------------------------------------------------------
   Régua viva entre blocos. A trilha tem duas cópias do conteúdo e desliza
   exatamente 50%: quando a primeira sai, a segunda ocupou o lugar dela e
   o loop não tem emenda. */

.marquee {
	overflow: hidden;
	border-block: 1px solid var(--line);
	padding-block: var(--sp-4);
	user-select: none;
}

.marquee__trilha {
	display: flex;
	width: max-content;
	animation: ua-marquee 42s linear infinite;
}

.marquee__grupo {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	padding-right: var(--sp-6);
}

.marquee__item {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-subtle);
	white-space: nowrap;
}

.marquee__ponto { color: var(--brand); }

@keyframes ua-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.marquee__trilha { animation: none; }
}

/* --- Módulos ------------------------------------------------------------- */

.modulos__lista { display: flex; flex-direction: column; gap: var(--sp-2); }

.modulos__item {
	background: var(--surface);
	border: 1px solid var(--line);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-out);
}

.modulos__item:has(.modulos__gatilho[aria-expanded="true"]) { border-color: var(--brand); }

.modulos__cabecalho { margin: 0; font-size: inherit; }

.modulos__gatilho {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	width: 100%;
	padding: var(--sp-6) var(--sp-8);
	background: none;
	border: 0;
	text-align: left;
	color: var(--text);
}

.modulos__gatilho--estatico { cursor: default; }

.modulos__numero {
	font-family: var(--ff-mono);
	font-size: var(--fs-sm);
	color: var(--brand);
	flex: none;
}

/* Corpo maior que o padrão de interface: o nome do módulo é o conteúdo
   principal desta seção, não um rótulo. Antes ficava em fs-sm e sobrava
   metade da largura da linha sem uso. */
.modulos__nome {
	flex: 1;
	font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.4;
}

.modulos__horas {
	font-size: var(--fs-xs);
	color: var(--text-subtle);
	flex: none;
}

.modulos__seta {
	flex: none;
	color: var(--text-subtle);
	transition: transform var(--dur-base) var(--ease-out);
}

.modulos__gatilho[aria-expanded="true"] .modulos__seta { transform: rotate(180deg); }

/* A ementa alinha com o nome do módulo, não com a borda do card — o
   recuo à esquerda compensa a coluna do número. A medida máxima em rem
   mantém a linha legível sem deixar metade do card vazio. */
.modulos__painel {
	padding: 0 var(--sp-8) var(--sp-7, 1.75rem) calc(var(--sp-8) + 2.75rem);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: 1.75;
	max-width: 68rem;
}

/* --- Aprendizados / personas --------------------------------------------- */

.learnings__grid,
.personas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.learnings__item {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: var(--fs-sm);
}

.learnings__icone { color: var(--brand-accent); margin-top: 2px; }

.personas__card {
	padding: var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
}

.personas__icone { color: var(--brand-soft); margin-bottom: var(--sp-4); }
.personas__card h3 { margin-bottom: var(--sp-2); }
.personas__card p { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* --- Carrossel ------------------------------------------------------------
   Scroll nativo com snap. As setas só empurram o scrollLeft; sem JS, o
   arraste, o teclado e o trackpad continuam funcionando. */

/* A altura da foto é declarada AQUI, no ancestral comum, porque tanto o
   card quanto as setas precisam dela — e variável CSS herda para baixo,
   nunca para os lados. Declarada no card, a seta não a enxergaria. */
.carrossel {
	position: relative;
	--docente-foto-h: clamp(300px, 26vw, 340px);
	--carrossel-seta-y: calc(var(--docente-foto-h) / 2);
}

.carrossel__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(300px, 78vw);
	gap: var(--sp-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	padding-bottom: var(--sp-2);
	align-items: start;

	/* Barra oculta: a navegação é pelas setas e pelo arraste. */
	scrollbar-width: none;
}

.carrossel__pista::-webkit-scrollbar { display: none; }

/* --- Setas ----------------------------------------------------------------
   A posição vertical vem de --carrossel-seta-y, definida por cada
   carrossel. No de professores ela aponta para o centro da FOTO — não do
   card, que incluiria o texto e deixaria a seta baixa demais. Nos demais,
   o centro da pista serve. */

.carrossel__seta {
	position: absolute;
	top: var(--carrossel-seta-y, 50%);
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: blur(8px);
	border: 1px solid var(--line);
	color: var(--text);
	transition:
		background-color var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out),
		opacity var(--dur-fast) var(--ease-out);
}

.carrossel__seta--anterior { left: calc(var(--gutter) * -1 + 8px); }
.carrossel__seta--proximo  { right: calc(var(--gutter) * -1 + 8px); }

.carrossel__seta:hover:not(:disabled) {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.carrossel__seta:disabled { opacity: 0; pointer-events: none; }

@media (max-width: 1023px) {
	.carrossel__seta--anterior { left: 4px; }
	.carrossel__seta--proximo  { right: 4px; }
}

/* --- Card de professor ------------------------------------------------------
   Sem moldura: a foto sangra e o texto assenta no fundo da página. Caixa em
   volta competiria com a foto, que é o elemento de maior peso do card. */

.docente {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.docente__foto {
	position: relative;
	height: var(--docente-foto-h);
	overflow: hidden;
	background: var(--surface-2);
	margin-bottom: var(--sp-5);
}

.docente__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Enquadra pelo topo: recorte pela base preserva o rosto. */
	object-position: center top;
}

.docente__inicial {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--ff-display);
	font-size: 4rem;
	font-weight: var(--fw-display-forte);
	color: var(--brand);
	opacity: .5;
}

.docente__papel {
	position: absolute;
	top: 0;
	left: 0;
	padding: var(--sp-2) var(--sp-4);
	background: var(--brand);
	color: #fff;
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

/* --- Nome + LinkedIn ---------------------------------------------------- */

.docente__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.docente__nome {
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: var(--fw-display-forte);
}

/* Selo sólido na cor da marca, quadrado — mesmo tratamento dos blocos de
   ícone nos cards de frente. */
/* 36px de caixa visível, mas a área clicável chega a 44px pelo ::after —
   ícone pequeno em tela de toque erra com frequência, e aumentar só o
   quadrado colorido desequilibraria o card. */
.docente__li {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: var(--brand);
	color: #fff;
	transition: background-color var(--dur-fast) var(--ease-out);
}

.docente__li::after {
	content: "";
	position: absolute;
	inset: -4px;
}

.docente__li:hover { background: var(--brand-hover); color: #fff; }

/* --- Credenciais -------------------------------------------------------
   Versalete, duas linhas no máximo. É a linha de cargos separada por
   barras — costuma ser longa demais para caber inteira, e o corte com
   reticências é preferível a empurrar o resto do card para baixo. O texto
   completo fica no atributo title. */

.docente__credenciais {
	font-size: var(--fs-label);
	line-height: 1.5;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-subtle);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line);

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- Bio ---------------------------------------------------------------- */

.docente__bio {
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--text-muted);
	margin-bottom: var(--sp-4);

	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Com o currículo aberto, a bio deixa de ser cortada. */
.docente:has(.docente__link[aria-expanded="true"]) .docente__bio {
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

/* --- Link do currículo --------------------------------------------------- */

.docente__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0;
	background: none;
	border: 0;
	color: var(--brand);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-align: left;
}

.docente__link:hover { color: var(--brand-soft); }
.docente__link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.docente__link:hover .icon { transform: translate(2px, -2px); }

.docente__link-fechar { display: none; }
.docente__link[aria-expanded="true"] .docente__link-abrir { display: none; }
.docente__link[aria-expanded="true"] .docente__link-fechar { display: inline; }
.docente__link[aria-expanded="true"] .icon { transform: rotate(135deg); }

.docente__completo {
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	line-height: 1.7;
	color: var(--text-muted);
}

.docente__completo p + p { margin-top: var(--sp-3); }

/* --- Refresh --------------------------------------------------------------
   Sem moldura: o bloco assenta direto no fundo. O símbolo domina a metade
   direita e é o elemento de maior peso — caixa em volta o achataria.

   Artes em laranja fixo: o Refresh tem identidade própria, separada da
   marca hospedeira, e por isso não passa pela máscara de cor do tema. */

.refresh__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
	align-items: center;
}

/* --- Logotipo como cabeçalho --------------------------------------------
   É um <h2> de verdade, com a imagem dentro. Zera os estilos de título
   para não interferir no lockup. */

.refresh__marca {
	margin: 0 0 var(--sp-8);
	font-size: 0;
	line-height: 0;
}

.refresh__marca img {
	height: clamp(52px, 5.5vw, 76px);
	width: auto;
}

.refresh__marca-texto {
	font-family: var(--ff-display);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	font-weight: var(--fw-display-forte);
	letter-spacing: var(--ls-tight);
	text-transform: uppercase;
	line-height: 1;
}

.refresh__texto p {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: 1.75;
	max-width: 46ch;
}

.refresh__texto p + p { margin-top: var(--sp-5); }

/* O destaque é o argumento comercial da seção — os 5 anos sem custo. */
.refresh__texto strong { color: var(--text); font-weight: 600; }

/* --- Símbolo --------------------------------------------------------------
   Sangra além da coluna de propósito: na referência ele extrapola o
   alinhamento e é isso que lhe dá presença. O overflow-x do body já
   impede barra de rolagem horizontal. */

.refresh__simbolo {
	justify-self: center;
	max-width: min(420px, 82vw);
	line-height: 0;
}

.refresh__simbolo img { width: 100%; height: auto; }

@media (min-width: 1024px) {
	.refresh__grid {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
		gap: var(--sp-10);
	}

	.refresh__simbolo {
		justify-self: end;
		max-width: none;
		/* 108% em vez de 118%: a sangria continua, mas cabe dentro do
		   container sem depender do corte do body. */
		width: 108%;
		margin-right: -6%;
	}
}

/* --- Plataforma ------------------------------------------------------------
   Mockups ao fundo, título por cima, grade de recursos, sistemas. O arco
   luminoso fecha o bloco por baixo. */

/* Sem overflow:hidden.
   A versão anterior cortava o arco na borda da seção — ele terminava numa
   linha reta no meio da tela. O arco é uma forma luminosa que precisa
   desvanecer para fora do bloco.

   O custo de tirar o recorte é o arco poder invadir a seção seguinte;
   controlamos isso com a posição e a altura dele, não com corte. */
.plataforma {
	position: relative;
	padding-block: 0 calc(var(--sp-section) + 6vw);
	text-align: center;
	/* Isola o z-index: o arco não sobe para cima do que vem depois. */
	isolation: isolate;
}

/* Os celulares sangram pelo topo e são cobertos por um degradê que os
   funde ao fundo — sem isso o recorte da imagem aparece como uma borda
   reta no meio da página. */
.plataforma__mockups {
	position: relative;
	margin-inline: auto;
	max-width: 1200px;
	pointer-events: none;
}

.plataforma__mockups img { width: 100%; height: auto; display: block; }

.plataforma__mockups::after {
	content: "";
	position: absolute;
	inset: 40% 0 -1px;
	background: linear-gradient(180deg, transparent 0%, var(--bg) 78%);
}

/* Arco luminoso: a forma vem do alpha do PNG, a cor vem da marca. */
.plataforma__arco {
	position: absolute;
	left: 50%;
	/* Ancorado para caber inteiro dentro do padding inferior da seção. */
	bottom: 0;
	translate: -50% 0;
	/* Nunca além da viewport: 124vw dependia do corte do body para não
	   gerar rolagem lateral, e apoiar layout em corte de emergência é
	   convite a bug em navegador que trate `clip` de outro jeito. */
	width: min(1100px, 100vw);
	aspect-ratio: 1200 / 673;
	background: var(--brand);
	opacity: .85;
	-webkit-mask-image: url("../../img/plataforma/arco-mascara.webp");
	mask-image: url("../../img/plataforma/arco-mascara.webp");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
	z-index: 0;
}

.plataforma__conteudo {
	position: relative;
	z-index: 1;
	/* Puxa o texto para cima dos mockups. */
	margin-top: clamp(-14rem, -12vw, -7rem);
}

.plataforma__titulo { text-shadow: 0 2px 24px var(--bg); }

.plataforma .bloco-head { margin-bottom: var(--sp-10); }

/* Grade de recursos em painel único com divisórias — não cards soltos. */
.plataforma__grid {
	display: grid;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 780px;
	border: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 82%, transparent);
	backdrop-filter: blur(6px);
	text-align: left;
}

.plataforma__item {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	padding: var(--sp-5);
	border-top: 1px solid var(--line);
}

.plataforma__item:first-child { border-top: 0; }

.plataforma__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	background: color-mix(in srgb, var(--brand) 22%, transparent);
	color: var(--brand-soft);
}

.plataforma__item strong { display: block; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.plataforma__item span { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.55; }

@media (min-width: 601px) {
	.plataforma__grid { grid-template-columns: 1fr 1fr; }
	.plataforma__item:nth-child(2) { border-top: 0; }
	.plataforma__item:nth-child(even) { border-left: 1px solid var(--line); }
}

/* --- Sistemas suportados ------------------------------------------------- */

.plataforma__sistemas { margin-top: var(--sp-10); }

.plataforma__sistemas-titulo {
	font-size: var(--fs-xs);
	color: var(--text-subtle);
	margin-bottom: var(--sp-5);
}

.plataforma__so {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-6) var(--sp-10);
}

.plataforma__so-grupo {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

/* Divisória entre os grupos, só no desktop. */
.plataforma__so-grupo + .plataforma__so-grupo { position: relative; }

@media (min-width: 601px) {
	.plataforma__so-grupo + .plataforma__so-grupo::before {
		content: "";
		position: absolute;
		left: calc(var(--sp-10) / -2);
		top: 50%;
		translate: 0 -50%;
		width: 1px;
		height: 20px;
		background: var(--line);
	}
}

.plataforma__so-rotulo {
	font-size: var(--fs-xs);
	color: var(--text-subtle);
}

.plataforma__so-icone {
	height: 20px;
	width: auto;
	opacity: .85;
	transition: opacity var(--dur-fast) var(--ease-out);
}

.plataforma__so-icone:hover { opacity: 1; }

@media (max-width: 820px) {
	.plataforma__conteudo { margin-top: clamp(-6rem, -14vw, -3rem); }
}

/* --- Depoimentos ----------------------------------------------------------- */

.depoimentos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--sp-5);
}

.depoimento {
	position: relative;
	margin: 0;
	padding: var(--sp-8) var(--sp-6) var(--sp-6);
	background: var(--surface);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

/* Aspas em corpo grande como elemento gráfico, no canto do card. */
.depoimento__aspas {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-5);
	font-family: var(--ff-display);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--brand);
	opacity: .35;
}

.depoimento blockquote { margin: 0; position: relative; z-index: 1; }

.depoimento blockquote p {
	margin: 0;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.depoimento__autor { margin-top: auto; font-size: var(--fs-xs); }
.depoimento__autor strong { color: var(--text); }
.depoimento__autor span { display: block; color: var(--text-subtle); }

/* --- FAQ -------------------------------------------------------------------- */

/* Largura cheia do container, igual às demais seções. */
.faq__lista {
	display: flex;
	flex-direction: column;
}

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__pergunta { margin: 0; font-size: inherit; }

.faq__gatilho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-6);
	width: 100%;
	padding: var(--sp-6) 0;
	background: none;
	border: 0;
	text-align: left;
	color: var(--text);
	font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
	font-weight: 500;
	line-height: 1.4;
}

.faq__seta {
	flex: none;
	color: var(--brand);
	transition: transform var(--dur-base) var(--ease-out);
}

.faq__gatilho[aria-expanded="true"] .faq__seta { transform: rotate(180deg); }

/* Medida em rem, não em ch: `ch` aqui é relativo à fonte do próprio
   bloco e produziria largura imprevisível ao mudar o corpo do texto. */
.faq__resposta {
	padding-bottom: var(--sp-6);
	color: var(--text-muted);
	font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
	line-height: 1.8;
	max-width: 62rem;
}

/* --- CTA de fechamento ------------------------------------------------------- */

/* Largura total do container, como as demais seções. A caixa estreita
   fazia o bloco recuar em relação ao resto da página e quebrava o
   alinhamento da coluna. */
.cta-curso__caixa {
	text-align: center;
	padding: var(--sp-16) var(--sp-8);
	border: 1px solid var(--line);
	background:
		radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 65%),
		var(--surface);
}

.cta-curso__valor { margin-bottom: var(--sp-3); }

.cta-curso__prefixo {
	display: block;
	font-size: var(--fs-sm);
	color: var(--text-subtle);
	margin-bottom: var(--sp-2);
}

.cta-curso__valor strong {
	font-family: var(--ff-display);
	font-size: clamp(2.5rem, 1.8rem + 3vw, 3.5rem);
	font-weight: var(--fw-display-forte);
	letter-spacing: var(--ls-tight);
}

.cta-curso__titulo { margin-bottom: var(--sp-5); }

.cta-curso__obs {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-8);
	max-width: 46ch;
	margin-inline: auto;
}

/* --- Cards de curso ---------------------------------------------------------- */

.cards-cursos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--sp-6);
}

/* --- Pistas de carrossel ---------------------------------------------------
   Cursos e depoimentos usam a mesma mecânica do carrossel de professores:
   scroll nativo com snap, setas apenas empurrando o scrollLeft. Como o
   card tem altura variável, a seta se alinha ao centro da pista. */

.cards-cursos__pista,
.depoimentos__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(340px, 82vw);
	gap: var(--sp-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sp-2);
	align-items: stretch;
	scrollbar-width: none;
}

.cards-cursos__pista::-webkit-scrollbar,
.depoimentos__pista::-webkit-scrollbar { display: none; }

.cards-cursos__pista > *,
.depoimentos__pista > * { scroll-snap-align: start; }

/* O card de curso é `position: relative` para a âncora estendida; dentro
   da pista precisa ocupar a altura toda da célula. */
.cards-cursos__pista .card-curso,
.depoimentos__pista .depoimento { height: 100%; }

.cards-cursos__rodape { margin-top: var(--sp-10); text-align: center; }

.card-curso {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	overflow: hidden;
	transition:
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.card-curso:hover { border-color: var(--brand); transform: translateY(-3px); }
.card-curso:has(a:focus-visible) { outline: 2px solid var(--brand-accent); outline-offset: 3px; }

.card-curso__capa {
	position: relative;
	overflow: hidden;
}

.card-curso__capa img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card-curso__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-6);
	flex: 1;
}

.card-curso__area {
	font-family: var(--ff-mono);
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--cor-area, var(--brand-soft));
	margin: 0;
}

.card-curso__titulo { font-size: var(--fs-h3); margin: 0; }
.card-curso__titulo a { color: var(--text); text-decoration: none; }
.card-curso__titulo a::after { content: ""; position: absolute; inset: 0; }
.card-curso__titulo a:focus-visible { outline: none; }

.card-curso__resumo { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

.card-curso__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	list-style: none;
	padding: var(--sp-4) 0 0;
	margin: auto 0 0;
	border-top: 1px solid var(--line);
	font-size: var(--fs-xs);
	color: var(--text-subtle);
}

.card-curso__meta li { display: flex; align-items: center; gap: var(--sp-2); }

/* --- Barra de confiança -------------------------------------------------------- */

.trust-bar { padding-block: var(--sp-8); border-block: 1px solid var(--line); }

.trust-bar__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-10);
	list-style: none;
	margin: 0;
	padding: 0;
}

.trust-bar__item img { max-height: 62px; width: auto; opacity: .85; }

/* --- CTA fixo no mobile --------------------------------------------------------- */

.cta-sticky {
	position: fixed;
	inset: auto 0 0;
	z-index: var(--z-sticky);
	background: color-mix(in srgb, var(--surface-2) 96%, transparent);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--line);
	transform: translateY(100%);
	transition: transform var(--dur-base) var(--ease-out);
}

.cta-sticky.is-visible { transform: none; }

.cta-sticky__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3) var(--gutter);
}

.cta-sticky__info { flex: 1; min-width: 0; }

.cta-sticky__info strong {
	display: block;
	font-size: var(--fs-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cta-sticky__info span { font-size: var(--fs-xs); color: var(--text-subtle); }

@media (min-width: 1024px) { .cta-sticky { display: none; } }

/* --- Sobre o curso --------------------------------------------------------------- */

.sobre-curso__texto {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	line-height: 1.8;
}

/* --- Ajustes de tela pequena -------------------------------------------- */

@media (max-width: 820px) {
	/* O acordeão perdia metade da largura útil em padding lateral. */
	.modulos__gatilho { padding: var(--sp-5); gap: var(--sp-4); }
	.modulos__painel { padding: 0 var(--sp-5) var(--sp-5) calc(var(--sp-5) + 2.25rem); }

	.faq__gatilho { padding: var(--sp-5) 0; gap: var(--sp-4); }

	/* O símbolo do Refresh vinha do desktop com 118% de largura e margem
	   negativa; em coluna única isso vazava para fora da tela. */
	.refresh__simbolo { width: auto; margin-right: 0; max-width: min(320px, 72vw); }

	.cta-curso__caixa { padding: var(--sp-12) var(--sp-6); }
}

@media (max-width: 600px) {
	.hero-curso__form { padding: var(--sp-5); min-height: 340px; }
	.hero-curso__titulo { max-width: none; }
	.hero-curso__ementa { width: 100%; }

	.modulos__gatilho { padding: var(--sp-4); }
	.modulos__painel { padding: 0 var(--sp-4) var(--sp-5) var(--sp-4); }

	/* A ementa deixa de recuar sob o número: em 343px, o recuo de 2,25rem
	   custava um sexto da linha e produzia texto em coluna estreita. */
	.modulos__horas { display: none; }

	.trust-bar__lista { gap: var(--sp-6); }
	.trust-bar__item img { max-height: 46px; }

	.docente { --docente-foto-h: 260px; }
	.carrossel__pista { grid-auto-columns: min(260px, 76vw); }
	.cards-cursos__pista, .depoimentos__pista { grid-auto-columns: min(290px, 82vw); }
}

/* --- Telefone deitado -----------------------------------------------------
   Altura útil de ~340px. Blocos com padding vertical generoso viram
   rolagem infinita; o hero e o CTA encolhem. */

@media (max-height: 460px) and (orientation: landscape) {
	.hero-curso { padding-block: var(--sp-10) var(--sp-8); }
	.cta-curso__caixa { padding-block: var(--sp-10); }
	.cta-sticky { display: none; }
}