/**
 * Os tres blocos da pagina Course Prices 2026.
 *
 * Medidas do frame 783:11794. A moldura da seccao nao esta aqui - o
 * espacamento de cima e de baixo e a cor de fundo vivem no contentor pai,
 * como no resto do site.
 */

/* ------------------------------------------------ o cabecalho dos tres */

.els-pr__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.els-pr__head .els-pr__titulo,
.els-pr__titulo {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.17;
	letter-spacing: -.01em;
	color: #101828;
}

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

/* ==================================== 03 · Work out your total ======== */

/**
 * O cartao dos controlos nao acompanha a altura do painel escuro.
 *
 * No Figma sao 424 contra 654: sao dois blocos lado a lado, nao duas metades
 * da mesma caixa. Dai o `flex-start`.
 */
.els-calc {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.els-calc__controlos {
	flex: 1 1 860px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background-color: #ffffff;
}

.els-calc__campo {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.els-calc__campo label {
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #101828;
}

.els-calc__stepper {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 8px;
	border: 1px solid #e4e7ec;
	border-radius: 8px;
	background-color: #f7f9fc;
}

.els-calc .els-calc__passo {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background-color: transparent;
	color: #101828;
	cursor: pointer;
	transition: background-color .18s ease;
}
.els-calc .els-calc__passo:hover { background-color: #eaf2fb; }
.els-calc .els-calc__passo[disabled] { opacity: .35; cursor: not-allowed; }

/* o contador e um campo de numero: quem quiser escrever 17 nao precisa de
   carregar dezassete vezes. As setas nativas saem, ja ha dois botoes */
.els-calc .els-calc__semanas {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background-color: transparent;
	text-align: center;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	color: #101828;
	appearance: textfield;
	-moz-appearance: textfield;
}
.els-calc .els-calc__semanas::-webkit-outer-spin-button,
.els-calc .els-calc__semanas::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.els-calc__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.21;
	color: #475467;
	cursor: pointer;
}
.els-calc__check input {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: #286191;
}

/* ------------------------------------------------------ o painel escuro */

.els-calc__estimativa {
	flex: 0 0 436px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 32px;
	border-radius: 12px;
	background-color: #101828;
}

.els-calc .els-calc__etiqueta,
.els-calc__etiqueta {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #b5d5f0;
}

.els-calc__linhas {
	list-style: none;
	margin: 0;
	padding: 18px 0 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.els-calc__linhas li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
}

.els-calc__linhas li b {
	flex: 1 1 auto;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.21;
	color: #ffffff;
}

.els-calc__linhas li i {
	flex: 0 0 auto;
	font-family: Urbanist, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	color: #ffffff;
	font-variant-numeric: tabular-nums;
}

.els-calc__linhas li.is-total {
	margin-top: 6px;
	padding: 16px 0 0;
	border-top: 1px solid #475467;
}
.els-calc__linhas li.is-total b { font-family: Urbanist, sans-serif; font-weight: 600; }
.els-calc__linhas li.is-total i { font-size: 32px; font-weight: 600; line-height: 1.25; }

.els-calc__pe {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.els-calc__aviso {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1.71;
	color: #e4e7ec;
}

.els-calc__envio {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.els-calc__campo--claro label {
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #b5d5f0;
}

.els-calc .els-calc__email {
	width: 100%;
	box-sizing: border-box;
	height: 49px;
	padding: 15px 16px;
	border: 0;
	border-radius: 5px;
	background-color: #ffffff;
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.21;
	color: #101828;
}
.els-calc .els-calc__email::placeholder { color: #98a2b3; }

.els-calc__erro {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #fda29b;
}

.els-calc .els-calc__enviar {
	width: 100%;
	justify-content: space-between;
}

.els-calc__nota {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #98a2b3;
}

.els-calc__obrigado {
	margin: 0;
	padding: 24px 0;
	font-family: Urbanist, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: #ffffff;
}

/* ==================================== 04 · Compare everything ========= */

.els-comp {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.els-comp__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.els-comp .els-comp__filtro {
	height: 46px;
	padding: 10px 16px 10px 18px;
	border: 1px solid #e4e7ec;
	border-radius: 5px;
	background-color: #ffffff;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #475467;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.els-comp .els-comp__filtro:hover { border-color: #b5d5f0; color: #101828; }
.els-comp .els-comp__filtro.is-activo {
	border-color: #7cb1e5;
	background-color: #7cb1e5;
	color: #101828;
}

.els-comp__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.els-comp__linha {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 18px 22px 18px 28px;
	border: 1px solid #e4e7ec;
	border-radius: 14px;
	background-color: #ffffff;
}
.els-comp__linha[hidden] { display: none; }

.els-comp__curso {
	flex: 1 1 508px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.els-comp .els-comp__nome,
.els-comp__nome {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.42;
	color: #101828;
}

.els-comp__chip,
.els-plist__chip {
	padding: 4px 10px;
	border-radius: 999px;
	background-color: #f2f4f7;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #101828;
}

.els-comp__factos {
	flex: 0 0 600px;
	display: flex;
	gap: 10px;
}

.els-comp__facto {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 16px;
	border-radius: 10px;
	background-color: #f7f9fc;
}
.els-comp__facto:nth-child(1) { flex: 1 1 230px; }
.els-comp__facto:nth-child(2) { flex: 1 1 150px; }
.els-comp__facto:nth-child(3) { flex: 1 1 200px; }

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

.els-comp__facto-valor {
	font-family: Urbanist, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.44;
	color: #101828;
}

.els-comp .els-comp__ver { flex: 0 0 auto; }

.els-comp__vazio {
	margin: 0;
	padding: 32px 0;
	font-family: Inter, sans-serif;
	font-size: 16px;
	color: #475467;
}

/* ==================================== 05 · 2026 price list =========== */

.els-plist {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.els-plist__linhas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.els-plist__linha {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 22px 28px;
	border: 1px solid #e4e7ec;
	border-radius: 14px;
	background-color: #ffffff;
}

.els-plist__curso {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.els-plist .els-plist__nome,
.els-plist__nome {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.33;
	color: #101828;
}

.els-plist__precos {
	flex: 1 1 auto;
	display: flex;
	gap: 12px;
}

.els-plist__preco {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 10px;
	background-color: #f7f9fc;
}

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

.els-plist__preco-valor {
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.33;
	color: #101828;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- os paineis */

.els-plist__paineis {
	display: flex;
	gap: 20px;
}

.els-plist__painel {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px;
	border: 1px solid #e4e7ec;
	border-radius: 12px;
	background-color: #ffffff;
}

.els-plist__painel-topo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.els-plist__icone {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background-color: #eaf2fb;
	color: #286191;
	font-size: 17px;
}
.els-plist__icone svg { width: 18px; height: 18px; fill: currentColor; }

.els-plist .els-plist__painel-titulo,
.els-plist__painel-titulo {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.33;
	color: #101828;
}

.els-plist__nota {
	margin: 0;
	font-family: Inter, sans-serif;
	font-size: 14px;
	line-height: 1.21;
	color: #475467;
}

.els-plist__itens {
	list-style: none;
	margin: 0;
	padding: 0;
}

.els-plist__itens li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid #e4e7ec;
}
.els-plist__itens li:last-child { border-bottom: 0; padding-bottom: 0; }

.els-plist__item-rotulo {
	font-family: Inter, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #475467;
}

.els-plist__item-valor {
	flex: 0 0 auto;
	font-family: Urbanist, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.44;
	color: #101828;
	text-align: right;
}

/* o painel cresce ate ao fundo e o link fica sempre encostado la */
.els-plist__link {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #101828;
	text-decoration: none;
}

.els-plist__seta {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e4e7ec;
	border-radius: 5px;
	background-color: #ffffff;
	transition: background-color .18s ease, border-color .18s ease;
}
.els-plist__seta svg {
	display: block;
	color: #101828;
	rotate: 0deg;
	transition: rotate .25s ease;
}
.els-plist__link:hover .els-plist__seta { border-color: #b5d5f0; background-color: #eaf2fb; }
.els-plist__link:hover .els-plist__seta svg { rotate: 45deg; }

/* ============================================ tablet e portateis ===== */

/**
 * Entre os 768 e os 1200 as linhas deixam de caber lado a lado.
 *
 * O bloco dos tres dados pedia 600px fixos e nao encolhia: a 850 a coluna do
 * nome ficava com zero de largura e o titulo transbordava por cima dela. Aqui
 * o cartao passa a empilhar - nome em cima, dados no meio, botao em baixo -
 * que e o mesmo arranjo do telemovel, so que com mais folga.
 */
@media (max-width: 1199px) {

	.els-comp__linha,
	.els-plist__linha {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px 22px;
	}

	/* o nome e o numero de horas dividem a primeira linha */
	.els-comp__curso,
	.els-plist__curso {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	/* os dados repartem a linha e quebram em vez de esmagar o resto */
	.els-comp__factos {
		flex: 0 0 auto;
		flex-wrap: wrap;
		gap: 10px;
	}
	.els-comp__facto:nth-child(1),
	.els-comp__facto:nth-child(2),
	.els-comp__facto:nth-child(3) { flex: 1 1 150px; min-width: 0; }

	.els-comp .els-comp__ver { width: 100%; justify-content: space-between; }

	.els-plist__precos { flex-wrap: wrap; gap: 10px; }
	.els-plist__preco { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); }

	.els-plist__paineis { flex-wrap: wrap; gap: 16px; }
	.els-plist__painel { flex: 1 1 300px; }
}

/* ------------------------------------------------- a calculadora ----- */

/**
 * O painel da estimativa pede 436 fixos, e o cartao dos controlos precisa de
 * espaco para os campos. Abaixo dos 1024 deixa de haver os dois, e passam um
 * debaixo do outro.
 */
@media (max-width: 1024px) {

	.els-calc { flex-direction: column; gap: 20px; }

	.els-calc__controlos,
	.els-calc__estimativa {
		flex: 1 1 auto;
		width: 100%;
		box-sizing: border-box;
	}
}

/* ================================================ ecras pequenos ===== */

/**
 * Medidas dos frames moveis (783:23770, 783:23836, 783:24010), a 402.
 *
 * A regra e a mesma nos tres blocos: o que estava lado a lado passa a ficar
 * um debaixo do outro, e os quadrados de dados repartem a linha entre si.
 */
@media (max-width: 767px) {

	.els-pr__head { gap: 12px; margin-bottom: 18px; }
	.els-pr .els-pr__titulo,
	.els-pr__titulo { font-size: 30px; line-height: 1.2; }
	.els-pr__lede { font-size: 15px; line-height: 1.47; }

	/* --------------------------------------------------- a calculadora */

	.els-calc__controlos { gap: 16px; padding: 22px 20px; }
	.els-calc__estimativa { padding: 22px 20px; }
	.els-calc__campo label { font-size: 15px; }
	.els-calc .els-calc__semanas { font-size: 20px; }
	.els-calc__check { font-size: 15px; }

	.els-calc .els-calc__etiqueta { font-size: 15px; }
	.els-calc__linhas { gap: 10px; padding: 18px 0 16px; }
	.els-calc__linhas li b,
	.els-calc__linhas li i { font-size: 15px; }
	.els-calc__linhas li.is-total i { font-size: 26px; }
	.els-calc__pe { gap: 18px; }
	.els-calc .els-calc__enviar { font-size: 14px; }

	/* ------------------------------------------------------- comparar */

	.els-comp { gap: 18px; }
	.els-comp__linha,
	.els-plist__linha { gap: 14px; padding: 18px; }
	.els-comp .els-comp__filtro {
		height: 44px;
		padding: 10px 12px;
		font-size: 13px;
	}

	.els-comp .els-comp__nome,
	.els-plist .els-plist__nome { font-size: 20px; line-height: 1.3; }

	/**
	 * O numero de horas nunca parte.
	 *
	 * "26 hrs" em duas linhas fica com ar de erro. A etiqueta segura-se numa
	 * linha e o nome do curso cede o espaco que ela precisar - dai o
	 * `min-width: 0`, sem o qual um titulo comprido nao encolhe.
	 */
	.els-comp__chip,
	.els-plist__chip {
		flex: 0 0 auto;
		font-size: 12px;
		white-space: nowrap;
	}

	.els-comp .els-comp__nome,
	.els-plist .els-plist__nome {
		flex: 1 1 auto;
		min-width: 0;
	}

	/**
	 * A etiqueta encosta ao topo.
	 *
	 * Com o nome do curso a partir em duas linhas, uma etiqueta centrada ficava
	 * a meio da altura do titulo e sem relacao com nada. Encostada ao topo
	 * alinha com a primeira linha, que e onde o olho a procura. Os 2px sao a
	 * diferenca entre a altura da linha do titulo e a da etiqueta.
	 */
	.els-comp__curso,
	.els-plist__curso { align-items: flex-start; }
	.els-comp__chip,
	.els-plist__chip { margin-top: 2px; }

	/* no telemovel os tres voltam a caber lado a lado, como no Figma */
	.els-comp__facto:nth-child(1),
	.els-comp__facto:nth-child(2),
	.els-comp__facto:nth-child(3) { flex: 1 1 0; min-width: 0; }
	/* mais ar em cima e em baixo; a largura fica, para o texto nao partir mais */
	.els-comp__facto { padding: 14px 10px; gap: 5px; }
	.els-comp__facto-rotulo { font-size: 10px; }
	.els-comp__facto-valor { font-size: 14px; line-height: 1.3; }

	/* --------------------------------------------------- lista de precos */

	.els-plist { gap: 18px; }
	.els-plist__preco { padding: 14px 12px; gap: 5px; }
	.els-plist__preco-rotulo { font-size: 10px; }
	.els-plist__preco-valor { font-size: 16px; line-height: 1.375; }

	.els-plist__paineis { flex-direction: column; gap: 12px; }
	.els-plist__painel { padding: 22px 20px; gap: 16px; }
	.els-plist .els-plist__painel-titulo { font-size: 20px; line-height: 1.3; }
}

/* ====================== 06 · o que esta incluido, no telemovel ======== */

/**
 * No telemovel o botao vai para o fim, depois da lista.
 *
 * No ecra grande o botao vive na coluna do texto, por baixo do titulo. No
 * telemovel as duas colunas empilham e ele ficava a meio, entre o titulo e a
 * lista - o Figma poe-no no fim.
 *
 * `display: contents` dissolve a coluna que o segura: os filhos dela passam a
 * ser filhos directos da fila, e ai um `order` no botao ja o manda para o fim.
 * A coluna e apanhada pelo botao que tem dentro, sem precisar de classe.
 */
@media (max-width: 767px) {

	.e-con:has(> .els-inc__cta) { display: contents; }
	.els-inc__cta { order: 3; }
}