/**
 * Seccoes da pagina de curso.
 *
 * Cada widget desenha a sua propria seccao de largura total, com o fundo e o
 * padding que o Figma lhe da, e um bloco interno de 1320. Assim o template do
 * Theme Builder e so uma pilha de widgets, sem containers a configurar, e a
 * mesma seccao larga-se noutra pagina sem trazer nada atras.
 *
 * O padding lateral e 24 e nao os 60 do canvas de 1440, para acompanhar o resto
 * do site: o bloco de 1320 sobrevive ate aos 1368 em vez de so ate aos 1440.
 *
 * Escala responsiva, a mesma da Home:
 *   vertical da seccao   104 -> 70 (tablet) -> 56 (telemovel)
 *   lateral              24  -> 24          -> 20
 *   H1 54/62, H2 42/50, titulo de card 24/32, corpo 16/24, eyebrow 14/17
 *   no telemovel         36/42,   30/36,     20/26,        15/22,        12/16
 */

/* O invólucro do widget precisa de largura propria: as seccoes do Elementor
   centram os filhos e o bloco mediria-se pelo conteudo. */
.elementor-widget-els_course_hero,
.elementor-widget-els_course_details,
.elementor-widget-els_course_overview,
.elementor-widget-els_course_options,
.elementor-widget-els_course_included,
.elementor-widget-els_course_faqs,
.elementor-widget-els_accommodation,
.elementor-widget-els_two_ways {
	align-self: stretch;
	width: 100%;
}

.els-course {
	width: 100%;
	padding: 104px 24px;
	box-sizing: border-box;
}

/**
 * A seccao sem moldura.
 *
 * O widget continua a desenhar o cabecalho e o conteudo, mas larga o que faz
 * dele uma seccao: o espacamento, o fundo e o bloco de 1320. Isso passa a vir
 * do contentor a volta, que e onde vive em todo o site. A classe `.els-course`
 * fica, porque e ela que da a tipografia aos titulos.
 */
/**
 * A classe vem dobrada, e nao por capricho.
 *
 * Mais abaixo ha `.els-course { padding-block: 70px }` no tablet e
 * `.els-course { padding: 56px 20px }` no telemovel. Com um peso so, e vindo
 * antes, esta regra perdia para elas e a seccao voltava a ter espacamento
 * proprio nesses ecras - somado ao do contentor. Com o peso de duas classes
 * ganha em qualquer ordem, e o `padding-block` fecha as que so mexem nesse.
 */
.els-course.els-course--sem-moldura {
	padding: 0;
	padding-block: 0;
	background-color: transparent;
}
.els-course.els-course--sem-moldura > .els-course__bloco { max-width: none; }

.els-course__bloco {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ------------------------------------------------------------- comuns */

/* Sem depender do `.els-course`: quando a seccao passa a contentor nativo esse
   antepassado deixa de existir, e o pre-titulo ficava com o tamanho do corpo. */
.elementor .els-course__eyebrow,
.els-course .els-course__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #475467;
}

/**
 * O ponto do eyebrow quando ele e um elemento nativo do V4.
 *
 * O `e-paragraph` nao aceita filhos, portanto nao ha onde pendurar o span do
 * ponto. Aqui ele vem do proprio paragrafo, com o mesmo desenho: quadrado de
 * 6px com raio 1, nao redondo.
 */


/**
 * Nos cursos com logotipo o pre-titulo sai: a marca ja diz o que ele diria, e
 * os dois juntos empilhavam-se por cima do titulo. O logotipo e irmao dele na
 * mesma coluna, por isso o seletor de irmaos chega, e nao depende de nenhuma
 * condicao do Elementor.
 */
.elementor img.els-course-hero__logo[src] ~ .els-eyebrow--ponto,
img.els-course-hero__logo[src] ~ .els-eyebrow--ponto { display: none; }

@media (max-width: 767px) {
	/* o tamanho nao desce: 14 em todos os ecras */
	.elementor .els-eyebrow--ponto,
	.els-eyebrow--ponto { gap: 8px; }

	.elementor .els-eyebrow--claro,
	.els-eyebrow--claro { color: #cfe6f5; }
}

.els-course__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	/* quadrado, nao redondo: no Figma e um rectangulo de 6x6 com raio 1 */
	border-radius: 1px;
	background-color: #286191;
}

.els-course .els-course__h {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.19;
	letter-spacing: -0.01em;
	color: #101828;
	text-wrap: balance;
}

.els-course .els-course__intro {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
}

.els-course__cabeca {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.els-course .els-acc__foto {
	border-radius: 5px;
}

/* ---------------------------------------------------- 03 Course details */

.els-course-details {
	background-color: #f2f4f7;
	padding-block: 72px;
}

.els-course-details__grelha {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.els-course-details__celula {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 92px;
	justify-content: center;
	padding: 20px 21px;
	box-sizing: border-box;
	background-color: #ffffff;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
}

.els-course-details__rotulo {
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #475467;
}

/* o azul e o estado de hover de qualquer celula; em repouso sao todas brancas.
   So em ecras com rato: no toque o :hover fica preso na ultima celula tocada. */
.els-course-details__celula,
.els-course-details__rotulo,
.els-course-details__valor {
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

@media (hover: hover) {
	.els-course-details__celula:hover {
		background-color: #286191;
		border-color: #286191;
	}

	.els-course-details__celula:hover .els-course-details__rotulo { color: #eaf2fb; }
	.els-course-details__celula:hover .els-course-details__valor  { color: #ffffff; }
}

/* o logo abre a seccao nos cursos que entram por um programa com marca.
   Tres classes: o tema poe `width: 100%` em `img` e o logo saia esticado a
   largura da coluna, 560 por 57, achatado. */
/* Nos cursos sem logo a imagem dinamica sai sem `src`: um <img> vazio que o
   browser desenha na mesma. Esconde-se aqui em vez de por condicao, porque a
   condicao no elemento impedia a propria imagem de resolver. */
.els-course-hero__logo:not([src]) { display: none !important; }

.els-course .els-course-hero__titulo .els-course-hero__logo,
.els-course-hero__logo {
	display: block;
	width: auto;
	max-width: 222px;
	height: auto;
	max-height: 57px;
	object-fit: contain;
	object-position: left center;
}

.els-course-hero__stats {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

.els-course-hero__stats li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/**
 * A linha discreta entre os numeros.
 *
 * No Figma nao ha nenhum no de divisor: sao os proprios blocos, do segundo em
 * diante, que levam uma borda a esquerda com 32px de folga de cada lado. Por
 * isso o gap da lista e zero e o espaco vem do padding e da margem.
 */
.els-course-hero__stats li + li {
	margin-left: 32px;
	padding-left: 32px;
	border-left: 1px solid #d0d5dd;
}

/**
 * Quatro numeros nao cabem numa linha (Internships tem a taxa de colocacao a
 * mais). O quarto caia sozinho para a linha de baixo, com a borda e a margem a
 * empurra-lo para dentro: era o "broken headings" da revisao de outubro. Com
 * quatro, ficam dois por linha. O `!important` e por causa do controlo de
 * espaco do widget, que escreve a margem com o seletor do Elementor.
 */
@media (min-width: 768px) {
	.els-course-hero__stats:has(> li:nth-child(4)) {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		row-gap: 22px;
	}

	.els-course-hero__stats:has(> li:nth-child(4)) li:nth-child(odd) {
		margin-left: 0 !important;
		padding-left: 0 !important;
		border-left: 0;
	}
}

.els-course-hero__stat-valor {
	font-family: Urbanist, sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.25;
	color: #101828;
}

.els-course-hero__stat-rotulo {
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #475467;
}

.els-course-details__valor {
	font-family: Urbanist, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #286191;
}

/* --------------------------------------------------------- 04 Overview */

/* ----------------------------------------------------- 05 Your options */

.els-course-options { background-color: #c1e1f0; }
.els-course-options .els-course__bloco { gap: 44px; }

.els-course-options__grelha {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 12px;
}

.els-course-option {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 28px;
	background-color: #ffffff;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
}

.els-course-option__topo {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: wrap;
}

.els-course-option__badge {
	padding: 5px 12px;
	border-radius: 999px;
	background-color: #eaf2fb;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #286191;
}

.els-course-option__preco {
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #101828;
}

/* tres classes: o Global Kit tem `.elementor-kit-5 h3` a 24px fixos */
.els-course .els-course-option .els-course-option__titulo,
.els-course-option__titulo {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.33;
	color: #101828;
}

.els-course .els-course-option__meta {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #475467;
}

.els-course .els-course-option__texto {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
	flex: 1 1 auto;
}

.els-course-option__acao { margin-top: auto; }

/* -------------------------------------------- 06 Included in the price */

.els-course-included {
	background-color: #286191;
	padding-block: 96px;
}

.els-course-included__linha {
	flex-direction: row;
	/* os dois lados centram-se um contra o outro, como no Figma */
	align-items: center;
	gap: 80px;
}

.els-course-included__acao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.els-course-included__copy {
	flex: 1 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.els-course-included .els-course__eyebrow { color: #b5d5f0; }
.els-course-included .els-course__dot { background-color: #b5d5f0; }
.els-course-included .els-course__h { color: #ffffff; }

.els-course-included__lista {
	flex: 1 1 620px;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 32px;
	align-content: start;
}

.els-course-included__lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #ffffff;
}

.els-course-included__lista svg {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	margin-top: 1px;
	color: #7cb1e5;
}

/* -------------------------------------------------------- 07 Questions */

.els-course-faqs { background-color: #f7f9fc; }

.els-course-faqs__linha {
	flex-direction: row;
	align-items: flex-start;
	gap: 80px;
}

.els-course-faqs__cabeca {
	flex: 0 1 440px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: sticky;
	top: 140px;
}

.els-course-faqs__lista {
	flex: 1 1 800px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.els-course-faq {
	background-color: #ffffff;
	border-radius: 10px;
	/* O ar do cartao (26 em cima e em baixo, 28 a esquerda, 24 a direita) vive
	   no botao e na resposta, nao aqui. Com o padding na caixa, so o miolo era
	   clicavel e as margens nao abriam a pergunta (QA do design, 15/09). */
	padding: 0;
}

.els-course-faq__cabecalho { margin: 0; }

/* tres classes: o tema pinta <button> por conta propria e o Global Kit
   tem `.elementor-kit-5 button { color: #ffffff }` */
.els-course .els-course-faq .els-course-faq__botao,
.els-course-faq__botao {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	/* 28 a esquerda e 24 a direita: o lado direito e mais curto porque e la
	   que fica o sinal de abrir, que ja tem ar a volta */
	padding: 26px 24px 26px 28px;
	border: 0;
	background: none !important;
	text-align: left;
	cursor: pointer;
	color: #101828;
}

.els-course-faq .els-course-faq__pergunta,
.els-course-faq__pergunta {
	/* sem isto o texto nao encolhe e empurra o toggle para fora do card */
	min-width: 0;
	overflow-wrap: anywhere;
	/* o <button> traz `white-space: nowrap` herdado, e com ele o
	   `overflow-wrap` nao chega a partir nada: a pergunta ficava numa linha so
	   e passava por baixo do sinal de mais. */
	white-space: normal;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.33;
	color: #101828;
}

.els-course-faq__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 5px;
	background-color: #f2f4f7;
	transition: background-color .2s ease;
}

/* o mais e o menos sao dois tracos; ao abrir, o vertical desaparece */
.els-course-faq__toggle::before,
.els-course-faq__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	border-radius: 2px;
	background-color: #101828;
	transition: rotate .25s ease, opacity .25s ease, background-color .2s ease;
}

.els-course-faq__toggle::after { rotate: 90deg; }

.els-course-faq.is-open .els-course-faq__toggle { background-color: #286191; }
.els-course-faq.is-open .els-course-faq__toggle::before,
.els-course-faq.is-open .els-course-faq__toggle::after { background-color: #ffffff; }
.els-course-faq.is-open .els-course-faq__toggle::after { rotate: 0deg; opacity: 0; }

/* Aberta, a pergunta perde o ar de baixo, que passa a ser o da resposta:
   assim o desenho fica igual ao de antes nos dois estados. */
.els-course .els-course-faq.is-open .els-course-faq__botao,
.els-course-faq.is-open .els-course-faq__botao {
	padding-bottom: 0;
}

.els-course-faq__resposta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 24px 26px 28px;
}

/**
 * O `hidden` do HTML e so `display: none` na folha do navegador, sem
 * especificidade: qualquer `display` nosso o atropela. Sem esta linha as
 * respostas ficavam todas abertas e o acordeao nao fechava nada.
 */
.els-course-faq__resposta[hidden] {
	display: none;
}

/**
 * A linha entre a pergunta e a resposta.
 *
 * O selector leva `.elementor` a frente de proposito: o Elementor traz
 * `.elementor hr { background-color: transparent }`, que com uma classe e um
 * tipo vencia esta regra. A linha existia, com um pixel de altura, mas
 * invisivel - em todas as paginas que usam este acordeao.
 */
.elementor .els-course-faq__rule,
.els-course .els-course-faq__rule,
.els-course-faq__rule {
	height: 1px;
	border: 0;
	margin: 0;
	background-color: #e4e7ec;
}

.els-course-faq__resposta p {
	margin: 0 0 12px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
}

.els-course-faq__resposta p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- responsivo */

@media (max-width: 1024px) {
	.els-course { padding-block: 70px; }
	.els-course-details { padding-block: 56px; }
	.els-course-included { padding-block: 70px; }
	.els-course-included__linha,
	.els-course-faqs__linha { gap: 44px; }

	.els-course-details__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.els-course-faqs__cabeca { position: static; }
	.els-course .els-course__h { font-size: 34px; }
}

@media (max-width: 767px) {
	.els-course { padding: 56px 20px; }
	.els-course-details,
	.els-course-included { padding-block: 56px; }

	.els-course__bloco { gap: 24px; }
	.els-course-options .els-course__bloco { gap: 24px; }

	.els-course-hero__linha,
	.els-course-included__linha,
	.els-course-faqs__linha {
		flex-direction: column;
		gap: 24px;
		align-items: stretch;
	}

	/* Sem isto o flex-basis em px, que numa linha e largura, vira ALTURA ao
	   virar coluna: a lista do Included ficava com 620px fixos e sobrava meio
	   ecra de azul vazio por baixo do ultimo item. */
	.els-course-hero__titulo,
	.els-course-hero__copy,
	.els-course-included__copy,
	.els-course-included__lista,
	.els-course-faqs__cabeca,
	.els-course-faqs__lista { flex: 0 1 auto; }

	/* o frame 783:26248 aperta mais estes dois que os das outras seccoes:
	   18 entre o pre-titulo e o titulo, 22 dai ate ao acordeao */
	.els-course-faqs__cabeca { gap: 18px; }
	.els-course-faqs__linha { gap: 22px; }

	/**
	 * No telemovel os botoes vao para o fim, depois da lista.
	 *
	 * No desktop ficam do lado esquerdo, junto ao titulo; no frame a 402 estao
	 * no fundo da seccao, a seguir a tudo o que se recebe. Resolve-se com
	 * `order`, sem mexer no HTML.
	 */
	/**
	 * Overview: o cabecalho vem antes da foto.
	 *
	 * No frame a 402 a ordem e eyebrow, titulo, foto, texto. Na arvore a foto e
	 * a primeira, porque no desktop fica a esquerda. Como o eyebrow e o titulo
	 * vivem dentro da coluna de texto, o `order` sozinho nao lhes chega: a
	 * coluna passa a `display: contents` e os filhos sobem para o mesmo
	 * contentor da foto.
	 */

	/* Os botoes vivem dentro da coluna de texto, portanto o `order` sozinho nao
	   os alcanca: a coluna deixa de gerar caixa e os seus filhos sobem para o
	   mesmo contentor da lista, onde a ordem ja se manda. */
	.els-course-included__copy { display: contents; }
	.els-course-included .els-course__eyebrow { order: 1; }
	.els-course-included .els-course__h       { order: 2; }
	.els-course-included__lista               { order: 3; }
	.els-course-included__acao                { order: 4; margin-top: 8px; }

	.els-course-included__acao {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.els-course-included__acao .els-cta { width: 100%; }
	.els-course-included__acao .els-cta--badge { justify-content: space-between; }
	.els-course-included__acao .els-cta:not(.els-cta--badge) { justify-content: center; }
	.els-course .els-course__h { font-size: 30px; line-height: 1.2; }
	.els-course .els-course__eyebrow { font-size: 12px; }
	.els-course .els-course__intro,
	.els-course .els-course-hero__lead,
	.els-course .els-course-option__texto,
	.els-course-included__lista li,
	.els-course-faq__resposta p { font-size: 15px; line-height: 1.47; }

	.els-course .els-course-hero__titulo .els-course-hero__logo,
	.els-course-hero__logo { max-width: 170px; max-height: 44px; }
	.els-course-hero__stats { gap: 24px; }
	.els-course-hero__stat-valor { font-size: 26px; }
	.els-course-hero__stat-rotulo { font-size: 12px; }

	.els-course-details__grelha { gap: 12px; }
	.els-course-details__celula { min-height: 0; padding: 16px 18px; }

	.els-course-options__grelha { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.els-course-option { padding: 20px; gap: 16px; }
	.els-course .els-course-option .els-course-option__titulo,
	.els-course-option__titulo { font-size: 20px; line-height: 1.3; }
	.els-course-option__acao .els-cta { width: 100%; justify-content: space-between; }

	.els-course-included__lista { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.els-course-included__acao .els-cta { width: 100%; justify-content: space-between; }

	/* no telemovel o cartao aperta para 18 a toda a volta (783:26248); o ar
	   vive no botao e na resposta, como no desktop */
	.els-course .els-course-faq .els-course-faq__botao,
	.els-course-faq__botao { padding: 18px; }
	.els-course .els-course-faq.is-open .els-course-faq__botao,
	.els-course-faq.is-open .els-course-faq__botao { padding-bottom: 0; }
	.els-course-faq__resposta { padding: 16px 18px 18px; }
	/* duas classes, para igualar a regra base: la em cima o seletor teve de
	   subir por causa do `white-space`, e com uma so esta perdia. */
	.els-course-faq .els-course-faq__pergunta { font-size: 17px; line-height: 1.35; }
	.els-course-faq__botao { gap: 12px; }
	.els-course-faq__toggle { width: 34px; height: 34px; }
}

/* ================================================ telemovel, frames a 402 */

@media (max-width: 767px) {
	/**
	 * Medidas tiradas dos frames "General English Courses" e "Erasmus+" a 402.
	 *
	 * O padding vertical muda de seccao para seccao no desenho: 36 no hero
	 * (mais o que o header flutuante ocupa), 48 nos detalhes, 56 na maioria e
	 * 40 nos related courses.
	 */
	.els-course-details { padding-block: 48px; }

	/**
	 * Os numeros passam a vir antes dos botoes.
	 *
	 * No desktop ficam por baixo, no telemovel por cima: e a informacao que
	 * decide, e a seguir vem a accao. Resolve-se com `order`, sem mexer no HTML.
	 */
	.els-course-hero__stats { order: 1; margin-top: 0; }

	/* tres colunas espalhadas pela largura, como no frame */
	.els-course-hero__stats {
		gap: 0;
		justify-content: space-between;
		flex-wrap: nowrap;
	}
	.els-course-hero__stats li + li { margin-left: 14px; padding-left: 14px; }
	.els-course-hero__stats li { flex: 0 1 auto; min-width: 0; }
	.els-course-hero__stat-valor { font-size: 26px; line-height: 1.23; }
	.els-course-hero__stat-rotulo { font-size: 11px; line-height: 1.36; }

	/**
	 * O segundo botao e centrado e sem badge no desenho mobile. Como fica sem
	 * nada a responder ao toque, o fundo passa a ser ele a reagir, que e a
	 * excepcao ja combinada para os botoes sem badge.
	 */

	/* a foto do hero tem 362x240 no frame */

	/* os detalhes ficam a dois, nao a um */
	.els-course-details__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.els-course-details__celula { min-height: 65px; padding: 12px 14px; gap: 2px; }
	.els-course-details__rotulo { font-size: 12px; }
	.els-course-details__valor { font-size: 18px; line-height: 1.28; }

	/* o eyebrow acompanha a escala do telemovel */
	.els-course .els-course__eyebrow { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-acc__card,
	.els-acc__card * ,
	.els-course-faq__toggle,
	.els-course-faq__toggle::before,
	.els-course-faq__toggle::after { transition: none; }
}

/* ==================================================== Accommodation options */

.els-acc {
	background-color: #eaf2fb;
	/* referencia para a largura do card no carrossel do telemovel */
	container-type: inline-size;
}

/**
 * A mesma seccao sem moldura, quando o fundo e o espacamento vivem no
 * contentor pai. O `.els-acc` fica, porque e a referencia de largura do
 * carrossel; o que sai e o padding, o fundo e a largura maxima.
 */
.els-acc.els-acc--nu {
	background-color: transparent;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 44px;
}

/* os controlos so tem funcao no telemovel; aqui a grelha mostra tudo.
   Duas classes porque `.els-slider__nav` vem de um ficheiro carregado depois. */
.els-acc .els-acc__nav { display: none; }
.els-acc .els-course__bloco { gap: 44px; }

.els-acc__grelha {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.els-acc__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 14px;
	background-color: #ffffff;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
	transition: background-color .25s ease, border-color .25s ease;
}

.els-acc__card .els-acc__titulo,
.els-acc__card .els-acc__texto,
.els-acc__card .els-acc__meta,
.els-acc__card .els-acc__preco,
.els-acc__card .els-acc__preco span {
	transition: color .25s ease;
}

/**
 * O escuro e o estado de hover, nao um card escolhido.
 *
 * Todos comecam claros e escurecem quando o rato la esta, o que da a mesma
 * leitura do desenho sem eleger um deles a partida.
 */
/**
 * O escuro comeca no primeiro cartao e segue o rato.
 *
 * Sem ninguem em cima, e o primeiro que o leva - a seccao nunca aparece toda
 * apagada. Assim que o rato entra num cartao qualquer, o `:not(:has())` deixa
 * de valer para o primeiro e o escuro passa para aquele; ao sair, volta.
 * Num ecra de toque nao ha hover e o primeiro fica escuro, que e o que se quer.
 */
.els-acc__card:hover,
.els-acc__card:focus-within,
.els-acc__grelha:not(:has(.els-acc__card:hover)) .els-acc__card:first-child {
	background-color: #101828;
	border-color: #101828;
}

/* a foto e o palco: a etiqueta e a seta ficam por cima dela, como no Figma */
.els-acc__media {
	position: relative;
	line-height: 0;
}

.els-acc__foto {
	width: 100%;
	aspect-ratio: 401 / 266;
	object-fit: cover;
	border-radius: 5px;
	display: block;
}

.els-acc__seta {
	position: absolute;
	right: 11px;
	bottom: 11px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background-color: #ffffff;
	color: #101828;
	transition: background-color .25s ease, scale .25s ease;
}

.els-acc__seta svg {
	width: 10px;
	height: 10px;
	rotate: 0deg;
	transition: rotate .25s ease;
}

/* mesmo padrao do resto do site: no hover a seta fica reta */
/* a seta so gira com o rato mesmo em cima; por omissao fica direita */
.els-acc__card:hover .els-acc__seta svg,
.els-acc__seta:focus-visible svg { rotate: 45deg; }
.els-acc__card:hover .els-acc__seta,
.els-acc__grelha:not(:has(.els-acc__card:hover)) .els-acc__card:first-child .els-acc__seta { background-color: #b5d5f0; color: #101828; }

.els-acc__corpo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 14px 14px;
	flex: 1 1 auto;
}

.els-acc__badge {
	position: absolute;
	top: 11px;
	right: 11px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background-color: #eaf2fb;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #286191;
}

/* tres classes: o Global Kit tem `.elementor-kit-5 h3` a 24px fixos */
.els-acc .els-acc__card .els-acc__titulo,
.els-acc__titulo {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.33;
	color: #101828;
}

.els-acc .els-acc__texto {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
	flex: 1 1 auto;
}

.els-acc .els-acc__meta {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #286191;
}

.els-acc .els-acc__preco {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: #101828;
}

.els-acc__card:hover .els-acc__titulo,
.els-acc__card:focus-within .els-acc__titulo,
.els-acc__grelha:not(:has(.els-acc__card:hover)) .els-acc__card:first-child .els-acc__titulo { color: #ffffff; }
.els-acc__card:hover .els-acc__texto,
.els-acc__card:focus-within .els-acc__texto,
.els-acc__grelha:not(:has(.els-acc__card:hover)) .els-acc__card:first-child .els-acc__texto { color: #d0d5dd; }
.els-acc__card:hover .els-acc__meta,
.els-acc__card:focus-within .els-acc__meta,
.els-acc__grelha:not(:has(.els-acc__card:hover)) .els-acc__card:first-child .els-acc__meta { color: #b5d5f0; }
.els-acc__card:hover .els-acc__preco,
.els-acc__card:focus-within .els-acc__preco,
.els-acc__grelha:not(:has(.els-acc__card:hover)) .els-acc__card:first-child .els-acc__preco { color: #ffffff; }
.els-acc__card:hover .els-acc__preco span,
.els-acc__card:focus-within .els-acc__preco span,
.els-acc__grelha:not(:has(.els-acc__card:hover)) .els-acc__card:first-child .els-acc__preco span { color: #d0d5dd; }

.els-acc__preco span {
	font-family: Inter, sans-serif;
	font-size: 16px;
	color: #d0d5dd;
}

.els-acc__preco strong {
	font-family: Urbanist, sans-serif;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
}

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

@media (max-width: 767px) {
	.els-acc .els-course__bloco { gap: 24px; }
	.els-acc__grelha { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.els-acc__corpo { padding: 4px 10px 10px; gap: 10px; }
	.els-acc .els-acc__card .els-acc__titulo,
	.els-acc__titulo { font-size: 20px; line-height: 1.3; }
	.els-acc .els-acc__texto,
	.els-acc .els-acc__meta { font-size: 15px; line-height: 1.47; }
	.els-acc__preco strong { font-size: 28px; }
}

/**
 * Alojamento em carrossel no telemovel, como as outras seccoes de cards.
 *
 * Fica no fim do ficheiro de proposito: a grelha e redefinida mais acima e
 * qualquer regra posterior com o mesmo peso ganhava a esta.
 *
 * A grelha e ao mesmo tempo a caixa que rola e a que segura os cards, que e o
 * que o motor do slider ja sabe fazer desde o blog. Sangra pela direita para
 * se perceber que ha mais.
 */
@media (max-width: 1024px) {
	.els-acc__grelha {
		display: flex;
		width: auto;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-ms-overflow-style: none;
		margin-right: calc(50% - 50vw);
		padding-right: 20px;
		gap: 12px;
	}
	.els-acc__grelha::-webkit-scrollbar { display: none; }

	.els-acc__grelha > li {
		flex: 0 0 auto;
		/* dois por vista, com o terceiro a espreitar: em grelha ficava sozinho
		   numa segunda linha. Mesma conta do carrossel dos cursos. */
		width: clamp(260px, calc((100vw - 96px) / 2), 520px);
		width: clamp(260px, calc((100cqw - 16px) / 2), 520px);
		scroll-snap-align: start;
	}
	.els-acc__grelha > li > .els-acc__card { height: 100%; }

	.els-acc .els-acc__nav {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}
	/* os pontos so acendem abaixo dos 768 por defeito; sem eles o
	   space-between fica com um filho so e encosta as setas a esquerda */
	.els-acc .els-acc__nav .els-slider__dots { display: flex; }
}

@media (max-width: 767px) {
	/* no telemovel so cabe um de cada vez */
	.els-acc__grelha > li { width: clamp(240px, calc(100vw - 102px), 300px); width: clamp(240px, calc(100cqw - 62px), 300px); }
}

/* Texto rico vindo de um campo (widget ELS Field Text). */
.els-field-text > * + * { margin-top: 18px; }
.els-field-text p:last-child { margin-bottom: 0; }
.els-field-text a { text-decoration: underline; }

/* =========================================================================
   Seccoes montadas com elementos V4 nativos.

   Overview, Your options e Included in the price deixaram de ser um widget
   inteiro: titulo, eyebrow, texto, imagem e botoes sao elementos do editor com
   tags dinamicas, e so a grelha, a lista e o texto rico continuam widgets.
   Estas regras dao a essas pecas o que os props do V4 nao alcancam.
   ========================================================================= */

/* O tema pinta `.elementor img { border-radius: 0 }` com (0,1,1), que ganha a
   uma classe sozinha: dai o `.elementor` a frente. E a altura tem de ser
   imposta, porque um `max-height` sobre uma imagem larga nunca prende. */
.elementor .els-sec-foto,
.els-sec-foto {
	width: 100%;
	height: 390px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

/* O eyebrow claro, para os fundos escuros. Vem depois do `--ponto` porque
   ambos tem a mesma especificidade: quem decide e a ordem. */

/* A lista de incluidos e a grelha de opcoes ficam agora dentro do involucro
   do widget, que e quem tem de ocupar a coluna toda. */
.elementor-widget-els_course_included,
.elementor-widget-els_course_options,
.elementor-widget-els_field_text { width: 100%; }

/**
 * Topo do curso no telemovel: os botoes vao para depois dos numeros.
 *
 * No desenho a 402 a ordem e texto, numeros, botoes, foto. Resolve-se com
 * `order` dentro da coluna da direita, sem mexer na ordem do HTML, que no
 * computador esta certa. Fica no fim do ficheiro porque uma media query nao
 * acrescenta especificidade: e a ordem que decide.
 */
@media (max-width: 767px) {
	.els-hero-acoes { order: 2; margin-block: 8px; }
	.els-hero-copy .elementor-widget-els_course_stats { order: 1; }
}

/* O cabecalho das Questions acompanha a leitura do acordeao, como na versao
   anterior da seccao. Abaixo de 1024 nao ha altura que chegue e fica quieto. */
.els-faq-cabeca { position: sticky; top: 140px; }

@media (max-width: 1024px) {
	.els-faq-cabeca { position: static; }
}

/**
 * Overview e Included no telemovel: a ordem do desenho a 402.
 *
 * Overview mostra eyebrow, titulo, foto e so depois o texto; Included mostra
 * eyebrow, titulo, lista e os botoes no fim. Em ambos os casos as pecas a
 * reordenar estao dentro da coluna de texto, e o `order` nao atravessa
 * contentores. A coluna deixa de gerar caixa com `display: contents` e os
 * filhos sobem para a linha, onde a ordem ja se manda.
 */
@media (max-width: 767px) {
	/* O `!important` e preciso: o contentor traz `.e-con.e-flexbox-base` do
	   proprio Elementor, que ja e (0,2,0) e vem depois na folha. Subir mais a
	   especificidade obrigaria a apoiar-me nesses nomes internos. */
	.els-ov-linha .els-ov-copy { display: contents !important; }
	.els-ov-linha .els-eyebrow--ponto { order: 1; }
	.els-ov-linha .els-sec-h          { order: 2; }
	.els-ov-media                     { order: 3; }
	.els-ov-linha .elementor-widget-els_field_text { order: 4; }

	.els-inc-linha .els-inc-copy { display: contents !important; }
	.els-inc-linha .els-eyebrow--ponto { order: 1; }
	.els-inc-linha .els-sec-h          { order: 2; }
	.els-inc-lista { order: 3; }
	.els-sec-acoes { order: 4; margin-top: 8px; }

	.elementor .els-sec-foto,
	.els-sec-foto { height: auto; }

	.els-course-included__lista { grid-template-columns: minmax(0, 1fr); }
}

/**
 * A cabeca das FAQs quando e construida na pagina, fora do widget.
 *
 * O widget so desenha a cabeca no modo `full`; numa pagina o pre-titulo e o
 * titulo sao elementos do Elementor, como em todas as outras seccoes. Esta
 * classe devolve-lhes o que o widget lhes dava: ficarem a vista enquanto se
 * percorre a lista de perguntas ao lado.
 */
@media (min-width: 1025px) {
	.els-faq-cabeca {
		position: sticky;
		top: 140px;
	}
}


/* ------------------------------------------- navegadores sem :has() */
/* Ver o mesmo bloco em els-slider.css. */
.els-sem-has .els-acc__card:hover,
.els-sem-has .els-acc__grelha:not(.els-com-hover) .els-acc__card:first-child {
	background-color: #101828;
	border-color: #101828;
}
.els-sem-has .els-acc__card:hover .els-acc__seta,
.els-sem-has .els-acc__grelha:not(.els-com-hover) .els-acc__card:first-child .els-acc__seta { background-color: #b5d5f0; color: #101828; }
.els-sem-has .els-acc__card:hover .els-acc__titulo,
.els-sem-has .els-acc__card:hover .els-acc__preco,
.els-sem-has .els-acc__grelha:not(.els-com-hover) .els-acc__card:first-child .els-acc__titulo,
.els-sem-has .els-acc__grelha:not(.els-com-hover) .els-acc__card:first-child .els-acc__preco { color: #ffffff; }
.els-sem-has .els-acc__card:hover .els-acc__texto,
.els-sem-has .els-acc__card:hover .els-acc__preco span,
.els-sem-has .els-acc__grelha:not(.els-com-hover) .els-acc__card:first-child .els-acc__texto,
.els-sem-has .els-acc__grelha:not(.els-com-hover) .els-acc__card:first-child .els-acc__preco span { color: #d0d5dd; }
.els-sem-has .els-acc__card:hover .els-acc__meta,
.els-sem-has .els-acc__grelha:not(.els-com-hover) .els-acc__card:first-child .els-acc__meta { color: #b5d5f0; }