/**
 * 4ED Cursos — página nova do curso (0.3.0).
 *
 * Só layout: grade, espaços, acordeão. Cor, fonte, tamanhos, raios e sombras vêm do 4ED Core
 * (variáveis --4ed-*, classes .foured-tipo-* e .foured-ui-*, tons da área em .foured-area). Nenhuma cor ou fonte
 * da marca é definida aqui (decisão de 22/10): numa seção com .foured-escuro, tudo troca sozinho.
 *
 * Carregado depois do CSS de componentes do Core (dependência "foured-core").
 */

/* ------------------------------------------------------------------ Base das seções */

.foured-cursos {
	font-family: var(--4ed-fonte);
	color: var(--4ed-texto);
	box-sizing: border-box;
}

.foured-cursos *,
.foured-cursos *::before,
.foured-cursos *::after {
	box-sizing: inherit;
}

/* Margens previsíveis: o tema e o Elementor põem margens próprias em p, ul e h2. */
.foured-cursos p,
.foured-cursos ul,
.foured-cursos ol,
.foured-cursos figure,
.foured-cursos h2 {
	margin: 0;
}

.foured-cursos a:not(.foured-ui-botao) {
	color: var(--4ed-link);
}

/*
 * Proteção contra os estilos globais do Elementor (kit) e do tema (teste no clone, 24/10).
 * O kit aplica cor e fonte a todo h2 e a todo link com ".elementor-kit-N h2" e ".elementor-kit-N a", que pesam
 * mais que as classes do Core (.foured-tipo-secao, .foured-ui-botao). No clone, o título do programa ficou preto
 * sobre preto e o botão "Ver turmas e preços" ficou com o texto azul dos links. Aqui as mesmas regras do Core são
 * repetidas com peso maior, só dentro das seções do Cursos. Os valores continuam vindo das variáveis do Core.
 */
.foured-cursos h2.foured-cursos-titulo {
	color: inherit;
	font-family: var(--4ed-fonte);
	font-weight: var(--4ed-peso-forte);
	letter-spacing: normal;
	text-transform: none;
}

.foured-cursos h2.foured-tipo-secao {
	font-size: var(--4ed-tam-secao);
	line-height: var(--4ed-altura-secao);
}

.foured-cursos h2.foured-tipo-subsecao {
	font-size: var(--4ed-tam-subsecao);
	line-height: var(--4ed-altura-subsecao);
}

.foured-cursos a.foured-ui-botao,
.foured-cursos a.foured-ui-botao:hover,
.foured-cursos a.foured-ui-botao:visited,
.foured-cursos-pagina a.foured-ui-botao,
.foured-cursos-pagina a.foured-ui-botao:hover,
.foured-cursos-pagina a.foured-ui-botao:visited {
	color: var(--4ed-botao-texto);
	text-decoration: none;
}

/* Botão de contorno (0.3.4): texto na cor do texto da seção, como no Core; a regra acima o deixava preto no escuro. */
.foured-cursos a.foured-ui-botao--contorno,
.foured-cursos a.foured-ui-botao--contorno:hover,
.foured-cursos a.foured-ui-botao--contorno:visited {
	color: var(--4ed-texto);
}

.foured-cursos summary,
.foured-cursos li,
.foured-cursos figcaption {
	font-family: var(--4ed-fonte);
}

/*
 * Largura (teste no clone, 24/10): dentro do contêiner "Encaixotado" de 1300px do Elementor, as seções saíam com a
 * largura da janela (1512px), da borda esquerda até fora. O limite do contêiner estava certo; alguma regra do
 * Elementor ou do tema esticava o bloco do shortcode. Duas defesas:
 * 1. O bloco do Elementor que contém uma seção do Cursos fica preso à largura de quem o contém (:has, navegadores
 *    de 2023 em diante; nos mais antigos, vale só a defesa 2).
 * 2. A própria seção tem largura máxima de 1280px e se centraliza: alinha com o logo do cabeçalho (o contêiner do
 *    cabeçalho tem 1300px, mas o logo começa 10px para dentro). --4ed-largura-site, se o Core definir, vale no lugar.
 */
.elementor-widget:has(.foured-cursos),
.elementor-widget:has(.foured-cursos) > .elementor-widget-container,
.elementor-shortcode:has(.foured-cursos) {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	flex-basis: auto;
}

.e-con-inner:has(.foured-cursos),
.e-con:has(> .elementor-widget .foured-cursos) {
	min-width: 0;
}

.foured-cursos.foured-cursos-projeto,
.foured-cursos.foured-cursos-programa,
.foured-cursos.foured-cursos-grade,
.foured-cursos.foured-cursos-publico,
.foured-cursos.foured-cursos-depoimentos,
.foured-cursos.foured-cursos-formacao,
.foured-cursos.foured-cursos-vantagens,
.foured-cursos.foured-cursos-perguntas,
.foured-cursos.foured-cursos-relacionados {
	width: 100%;
	max-width: min(100%, var(--4ed-largura-site, 1280px));
	min-width: 0;
	margin-inline: auto;
	/*
	 * Espaço em cima e embaixo de cada seção: 48px no celular, crescendo com a tela até 112px no desktop (cerca de
	 * 100px numa tela de 1440). Era 72px, o do protótipo; aumentado em 24/10 para dar mais respiro. No clone, o
	 * preenchimento posto no Elementor não chegava às seções e elas ficavam quase coladas. Com o espaço aqui, deixe o
	 * preenchimento de cima e de baixo do contêiner em 0, para não somar. --4ed-espaco-secao, se o Core definir.
	 */
	padding-block: var(--4ed-espaco-secao, clamp(48px, 7vw, 112px));
}

/* Texto só para leitor de tela (ex.: o nome do módulo no link "Ver o curso"). */
.foured-cursos .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Cabeçalho de seção: rótulo em caixa alta, título e apoio, um embaixo do outro. */
.foured-cursos-cabecalho {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.foured-cursos-rotulo {
	color: var(--4ed-texto-2);
	font-weight: var(--4ed-peso-forte);
}

.foured-cursos-apoio {
	color: var(--4ed-texto-2);
}

/* Duas colunas (título à esquerda, conteúdo à direita) no desktop; uma embaixo da outra no celular. */
.foured-cursos-duas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 767px) {
	.foured-cursos-duas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ Topo: chamada e avaliações */

/*
 * O topo fica sobre o fundo na cor da área (seção do Elementor). Ali, texto e links herdam a cor da seção, que o
 * template escolhe para contrastar com a área (preto ou branco, como --4ed-area-texto). Com as cores do Core,
 * o link saía azul sobre verde (contraste baixo) e, no escuro, o texto ficava branco sobre a área clara.
 */
.foured-cursos.foured-cursos-chamada,
.foured-cursos.foured-cursos-avaliacoes {
	color: inherit;
}

.foured-cursos-avaliacoes a:not(.foured-ui-botao) {
	color: inherit;
	text-underline-offset: 3px;
}

.foured-cursos-avaliacoes__programa {
	font-weight: var(--4ed-peso-forte);
}

.foured-cursos-avaliacoes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* Estrelas na cor de aviso (âmbar escuro): passa no contraste de enfeite sobre fundo claro e escuro. */
.foured-cursos-estrelas {
	color: var(--4ed-aviso);
	letter-spacing: 2px;
}


/* ------------------------------------------------------------------ O que você vai criar */

.foured-cursos-projeto {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

@media (max-width: 767px) {
	.foured-cursos-projeto {
		grid-template-columns: minmax(0, 1fr);
	}
}

.foured-cursos-projeto__texto {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.foured-cursos-projeto__texto .foured-cursos-cabecalho {
	margin-bottom: 4px;
}

.foured-cursos-projeto__lado {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.foured-cursos-entregas__titulo {
	color: var(--4ed-texto-2);
	font-weight: var(--4ed-peso-forte);
	padding-bottom: 4px;
}

.foured-cursos-entregas ul {
	list-style: none;
	padding: 0;
}

.foured-cursos-entregas li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
}

.foured-cursos-entregas li + li {
	border-top: 1px solid var(--4ed-borda);
}

/* Check na cor forte da área (3:1 ou mais sobre o fundo, regra de ícone). */
.foured-cursos-check {
	flex-shrink: 0;
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.15em;
	color: var(--4ed-area-forte);
}

.foured-cursos-entregas__texto {
	flex: 1;
}

/* Etiqueta da aula: fundo no tom suave da área; texto na cor de texto (contraste garantido em qualquer área). */
.foured-cursos-etiqueta {
	flex-shrink: 0;
	align-self: center;
	white-space: nowrap;
	background: var(--4ed-area-suave);
	color: var(--4ed-texto);
	border-radius: var(--4ed-raio-pilula);
	padding: 3px 10px;
}

/* Imagens de projetos: grade de 2 colunas (1 imagem ocupa tudo). */
.foured-cursos-imagens {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.foured-cursos-imagens--1 {
	grid-template-columns: minmax(0, 1fr);
}

.foured-cursos-imagem img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--4ed-raio);
}

.foured-cursos-imagem figcaption {
	color: var(--4ed-texto-2);
	margin-top: 6px;
}

/* ------------------------------------------------------------------ Acordeão (programa e perguntas) */

.foured-cursos-acordeao__item {
	border-top: 1px solid var(--4ed-borda);
}

.foured-cursos-acordeao__item:last-child {
	border-bottom: 1px solid var(--4ed-borda);
}

/* Linha clicável inteira, com 48px de altura mínima (área de toque). */
.foured-cursos-acordeao__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
}

/* Tira o triângulo padrão do navegador (a seta do Core entra no lugar). */
.foured-cursos-acordeao__topo::-webkit-details-marker {
	display: none;
}

.foured-cursos-acordeao__topo:focus-visible {
	outline: 2px solid var(--4ed-foco);
	outline-offset: 2px;
	border-radius: var(--4ed-raio-pequeno);
}

.foured-cursos-acordeao__titulo {
	font-weight: var(--4ed-peso-medio);
}

.foured-cursos-aula-n {
	color: var(--4ed-texto-2);
	font-weight: var(--4ed-peso-forte);
	margin-right: 6px;
	white-space: nowrap;
}

.foured-cursos-acordeao__seta {
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
	/* Mesma curva e duração da abertura (pagina.js), para seta e conteúdo andarem juntos. */
	transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Ao fechar, o item continua aberto até o fim da animação (pagina.js): .is-fechando faz a seta voltar já no início. */
.foured-cursos-acordeao__item[open]:not(.is-fechando) .foured-cursos-acordeao__seta {
	transform: rotate(180deg);
}

/* Abrir e fechar com movimento: o assets/pagina.js anima a altura do corpo (curva bezier). Sem JavaScript, abre
   na hora, como antes. overflow escondido só durante a animação, para o texto não vazar. */
.foured-cursos-acordeao__item.is-animando .foured-cursos-acordeao__corpo {
	overflow: hidden;
}

.foured-cursos-acordeao__corpo {
	box-sizing: border-box; /* A altura conta o espaço de baixo: é a mesma medida que o pagina.js anima. */
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 18px;
	color: var(--4ed-texto-2);
}

.foured-cursos-acordeao__corpo strong {
	color: var(--4ed-texto);
}

@media (prefers-reduced-motion: reduce) {
	.foured-cursos-acordeao__seta {
		transition: none;
	}
}

/* ------------------------------------------------------------------ Grade da formação */

/*
 * Cada módulo é um item do acordeão (0.3.4): a linha fechada mostra ícone, número e nome, chamada e horas; aberta,
 * as aulas do módulo e o link para o curso avulso. A animação e a seta são as mesmas do programa (pagina.js).
 */
.foured-cursos-grade__topo {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto auto;
	gap: 16px;
	align-items: center;
}

.foured-cursos-grade__icone img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: var(--4ed-raio-pequeno);
	object-fit: cover;
}

.foured-cursos-grade__texto {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.foured-cursos-grade__texto .foured-tipo-legenda,
.foured-cursos-grade__horas {
	color: var(--4ed-texto-2);
}

/* Aulas e link alinhados com o texto do módulo (depois da coluna do ícone). */
.foured-cursos-grade__corpo {
	padding-left: 64px;
	gap: 12px;
}

.foured-cursos-grade__aulas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.foured-cursos-grade__avulso {
	margin: 0;
}

.foured-cursos .foured-cursos-grade__avulso a {
	font-weight: var(--4ed-peso-medio);
	white-space: nowrap;
}

/* No celular: ícone menor, horas embaixo do nome; aulas sem o recuo do ícone. */
@media (max-width: 767px) {
	.foured-cursos-grade__topo {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 12px;
	}

	.foured-cursos-grade__icone img {
		width: 40px;
		height: 40px;
	}

	.foured-cursos-grade__horas {
		grid-column: 2;
		grid-row: 2;
	}

	.foured-cursos-grade__topo .foured-cursos-acordeao__seta {
		grid-column: 3;
		grid-row: 1;
	}

	.foured-cursos-grade__corpo {
		padding-left: 0;
	}

	.foured-cursos .foured-cursos-grade__avulso a {
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ Faixa de vantagens (0.3.5) */

/* 3 por linha no computador, 2 no tablet, 1 no celular. Ícone à esquerda, título e texto ao lado. */
.foured-cursos-vantagens__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 40px;
}

.foured-cursos-vantagens__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.foured-cursos-vantagens__icone {
	flex: 0 0 auto;
	display: inline-flex;
	/* Tom forte da cor do curso, como o check das entregas (03/11); sem cor de área, o tom de apoio do texto. */
	color: var(--4ed-area-forte, var(--4ed-texto-2));
	font-size: 28px; /* O ícone do Core mede 1em. */
	line-height: 1;
	padding-top: 2px;
}

.foured-cursos-vantagens__texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.foured-cursos-vantagens__texto .foured-tipo-legenda {
	color: var(--4ed-texto-2);
}

@media (max-width: 1024px) {
	.foured-cursos-vantagens__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.foured-cursos-vantagens__lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* Na página inteira, a faixa é mais baixa que as seções (é um apoio entre o topo e as turmas). */
.foured-cursos-bloco--vantagens {
	padding-block: clamp(32px, 4vw, 56px);
}

/* ------------------------------------------------------------------ Faz parte da formação (0.3.4) */

.foured-cursos-formacao {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Cartão numa linha: ícone, texto e botão; no celular, o botão desce. */
/* Contorno em vez de fundo: o bloco já alterna fundo e superfície, e um cartão da mesma cor sumiria. */
.foured-cursos .foured-cursos-formacao__cartao {
	background: transparent;
	border: 1px solid var(--4ed-borda-forte);
}

.foured-cursos-formacao__cartao {
	display: flex;
	align-items: center;
	gap: 16px 20px;
	flex-wrap: wrap;
	padding: 20px 24px;
}

.foured-cursos-formacao__icone img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: var(--4ed-raio-pequeno);
	object-fit: cover;
}

.foured-cursos-formacao__texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 320px;
	min-width: 0;
}

.foured-cursos-formacao__texto p {
	margin: 0;
}

.foured-cursos-formacao__link {
	flex: 0 0 auto;
}

/* Na página inteira, a faixa da formação é só um cartão: menos espaço em volta que as seções. */
.foured-cursos-bloco--formacao {
	padding-block: clamp(32px, 4vw, 56px);
}

/* ------------------------------------------------------------------ Para quem é */

.foured-cursos-perfis {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.foured-cursos-perfis strong {
	display: block;
	font-weight: var(--4ed-peso-forte);
}

.foured-cursos-perfis__frase {
	color: var(--4ed-texto-2);
}

.foured-cursos-antes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.foured-cursos-antes__materiais {
	max-inline-size: none; /* O traço de cima vai até o fim do cartão (a classe de legenda limita a largura da linha). */
	color: var(--4ed-texto-2);
	border-top: 1px solid var(--4ed-borda);
	padding-top: 12px;
}

/* ------------------------------------------------------------------ Perguntas frequentes */

.foured-cursos-perguntas__lateral {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--4ed-texto-2);
}

.foured-cursos-perguntas__lateral p {
	margin: 0;
}

/* ------------------------------------------------------------------ Cursos que você pode gostar */

.foured-cursos-relacionados .foured-cursos-titulo {
	margin-bottom: 20px;
}

/* Grade que se ajusta: 5 por linha no desktop, 2 no celular, sem rolagem lateral. */
.foured-cursos-relacionados__lista {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(140px, 40vw), 1fr));
	gap: 14px;
}

.foured-cursos-relacionados__curso {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.foured-cursos a.foured-cursos-relacionados__curso {
	color: inherit;
}

.foured-cursos-relacionados__curso:hover .foured-tipo-legenda {
	text-decoration: underline;
}

.foured-cursos-relacionados__curso:focus-visible {
	outline: 2px solid var(--4ed-foco);
	outline-offset: 3px;
	border-radius: var(--4ed-raio);
}

/*
 * Ícone que cresce de leve ao passar o mouse (0.3.2), como na página antiga: o ícone inteiro (imagem e cantos)
 * cresce 2%, sem recorte, numa curva suave e mais lenta (0,45s, sai devagar e assenta devagar). A primeira versão
 * ampliava só a imagem por dentro da moldura, 5% e com a curva rápida do acordeão: ficou seca (24/10).
 * Sem movimento para quem pede menos movimento.
 */
.foured-cursos-relacionados__icone {
	display: block;
	transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.foured-cursos-relacionados__curso:hover .foured-cursos-relacionados__icone,
.foured-cursos-relacionados__curso:focus-visible .foured-cursos-relacionados__icone {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.foured-cursos-relacionados__icone {
		transition: none;
	}
}

/*
 * Celular: uma fileira que rola para o lado com o dedo, parando em cada curso (o "carrossel" sem script).
 * O último curso aparece cortado na borda, para mostrar que há mais.
 */
@media (max-width: 600px) {
	.foured-cursos-relacionados__lista {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 42%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	.foured-cursos-relacionados__lista::-webkit-scrollbar {
		display: none;
	}

	.foured-cursos-relacionados__lista > li {
		scroll-snap-align: start;
	}
}

/* O ícone do curso já é a imagem destacada, na cor da área: só ajusta tamanho e cantos. */
.foured-cursos-relacionados__icone img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--4ed-raio);
}

/* ------------------------------------------------------------------ Depoimentos (0.3.2) */

.foured-cursos-depoimentos {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.foured-cursos-depoimentos__resumo {
	margin: -8px 0 0;
	color: var(--4ed-texto-2);
}

/* Cartões em colunas que se ajustam: 3 no desktop, 1 no celular. */
.foured-cursos-depoimentos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 16px;
}

.foured-cursos-depoimentos__item {
	padding: 24px;
	display: flex;
}

.foured-cursos-depoimentos__item figure {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	margin: 0;
	width: 100%;
}

.foured-cursos-depoimentos__texto {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-style: normal;
}

/* O tema e o Elementor estilizam <blockquote> (borda, itálico, aspas grandes): aqui não. */
.foured-cursos .foured-cursos-depoimentos__texto::before,
.foured-cursos .foured-cursos-depoimentos__texto::after {
	content: none;
}

/*
 * O tema estiliza <figcaption> como legenda de imagem (itálico, cinza escuro): no clone, o nome e as iniciais
 * ficaram em itálico e quase invisíveis no fundo preto. Aqui voltam ao texto normal do Core.
 */
.foured-cursos figcaption.foured-cursos-depoimentos__quem,
.foured-cursos figcaption.foured-cursos-depoimentos__quem * {
	font-style: normal;
	color: var(--4ed-texto);
	opacity: 1;
}

.foured-cursos figcaption.foured-cursos-depoimentos__quem .foured-cursos-depoimentos__nota,
.foured-cursos figcaption.foured-cursos-depoimentos__quem .foured-cursos-depoimentos__nota * {
	color: var(--4ed-area-forte);
}

.foured-cursos-depoimentos__quem {
	margin: 0;
	text-align: left;
	font-size: inherit;
	display: flex;
	align-items: center;
	gap: 12px;
}

.foured-cursos-depoimentos__quem > span:last-child {
	display: flex;
	flex-direction: column;
}

/* Círculo com as iniciais, nos tons da área do curso (variáveis do Core em .foured-area). */
.foured-cursos-depoimentos__iniciais {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--4ed-area-suave);
	color: var(--4ed-texto);
	font-weight: var(--4ed-peso-forte);
	font-size: 15px;
}

.foured-cursos-depoimentos__nota {
	color: var(--4ed-area-forte);
	letter-spacing: 1px;
}

/* ------------------------------------------------------------------ Página inteira ([4ed_curso_pagina], 24/10) */

/*
 * Cada parte da página é um bloco de ponta a ponta (o fundo vai até a borda da janela) com o conteúdo na largura do
 * site. O espaço entre blocos é o mesmo em todas as telas e vem daqui, não do Elementor: o modelo só tem cabeçalho,
 * o shortcode e o rodapé. Os fundos alternam (fundo / superfície do Core), o topo usa a cor da área.
 */
.foured-cursos-pagina {
	width: 100%;
	min-width: 0;
	background: var(--4ed-fundo);
	color: var(--4ed-texto);
	font-family: var(--4ed-fonte);
}

/*
 * O widget do Elementor que contém a página fica com a largura toda de quem o contém. Para os fundos irem de ponta
 * a ponta, use o contêiner do modelo em "Largura total" e sem preenchimento (a página cuida da largura e do espaço).
 */
.elementor-widget:has(.foured-cursos-pagina),
.elementor-widget:has(.foured-cursos-pagina) > .elementor-widget-container,
.elementor-shortcode:has(.foured-cursos-pagina) {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.foured-cursos-bloco {
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--4ed-espaco-secao, clamp(48px, 7vw, 112px));
	padding-inline: var(--4ed-margem-site, clamp(16px, 4vw, 32px));
	background: var(--4ed-fundo);
	color: var(--4ed-texto);
}

.foured-cursos-bloco--fundo-superficie {
	background: var(--4ed-superficie);
}

.foured-cursos-bloco__largura {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--4ed-largura-site, 1280px);
	min-width: 0;
	margin-inline: auto;
}

/*
 * O contêiner do Elementor que leva a página inteira não põe espaço nenhum em volta (teste no clone, 24/10: sobrava
 * uma faixa preta entre o cabeçalho e o topo). A página já cuida do espaço; o contêiner e o widget ficam colados.
 * Só o contêiner que tem a página como filho direto (outros contêineres do modelo não mudam).
 */
.e-con:has(> .elementor-widget .foured-cursos-pagina),
.e-con:has(> .e-con-inner > .elementor-widget .foured-cursos-pagina),
.e-con-inner:has(> .elementor-widget .foured-cursos-pagina) {
	padding: 0 !important;
	margin-block: 0 !important;
	gap: 0 !important;
}

.elementor-widget:has(.foured-cursos-pagina) {
	margin: 0 !important;
}

/* Dentro de um bloco, a seção não põe largura nem espaço próprios (o bloco já pôs). */
.foured-cursos-bloco .foured-cursos.foured-cursos-projeto,
.foured-cursos-bloco .foured-cursos.foured-cursos-programa,
.foured-cursos-bloco .foured-cursos.foured-cursos-grade,
.foured-cursos-bloco .foured-cursos.foured-cursos-publico,
.foured-cursos-bloco .foured-cursos.foured-cursos-depoimentos,
.foured-cursos-bloco .foured-cursos.foured-cursos-formacao,
.foured-cursos-bloco .foured-cursos.foured-cursos-vantagens,
.foured-cursos-bloco .foured-cursos.foured-cursos-perguntas,
.foured-cursos-bloco .foured-cursos.foured-cursos-relacionados {
	max-width: none;
	padding-block: 0;
}

/*
 * Botão de largura toda (.foured-ui-botao--bloco) do Core: tem width 100% sem box-sizing, então o preenchimento
 * soma e ele passa da coluna (no celular, a página rolava para o lado). Defesa aqui até o Core corrigir.
 */
.foured-cursos-pagina .foured-ui-botao {
	box-sizing: border-box;
}

/* Âncora das turmas e do programa: deixa um respiro abaixo do cabeçalho fixo do site ao pular para lá. */
.foured-cursos-pagina [id] {
	scroll-margin-top: 96px;
}

/* Faixa e campos do 4ED Turmas na página escura: defesas para Turmas antes da 0.15.4 em Pagina::defesas_turmas(). */


/* ---------------- Topo */

.foured-cursos-topo {
	background: var(--4ed-area);
	color: var(--4ed-area-texto);
	padding-block: clamp(40px, 6vw, 80px);
}

.foured-cursos-topo__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.foured-cursos-topo__texto {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.foured-cursos-topo__linha {
	display: flex;
	align-items: center;
	gap: 12px;
}

.foured-cursos-topo__icone img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--4ed-raio-pequeno);
}

.foured-cursos-topo__migalhas {
	color: inherit;
	opacity: 0.8;
}

/* O kit do Elementor pinta todo h1; aqui o título fica com a cor do texto da área e a fonte do Core. */
.foured-cursos-topo h1.foured-cursos-topo__titulo {
	margin: 0;
	color: inherit;
	font-family: var(--4ed-fonte);
	font-weight: var(--4ed-peso-forte);
	font-size: var(--4ed-tam-pagina);
	line-height: var(--4ed-altura-pagina);
	letter-spacing: normal;
	text-transform: none;
}

.foured-cursos-topo .foured-cursos-chamada,
.foured-cursos-topo .foured-cursos-avaliacoes {
	color: inherit;
}

.foured-cursos-topo .foured-cursos-avaliacoes a:not(.foured-ui-botao) {
	color: inherit;
}

.foured-cursos-topo__card {
	min-width: 0;
}

@media (max-width: 900px) {
	.foured-cursos-topo__grade {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------- Reserva (curso sem a página nova) */

.foured-cursos-pagina--reserva .foured-cursos-bloco--descricao .foured-cursos {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}