/**
 * ELS Menu Website
 * Medidas tiradas do Figma (Menus desktop e Menus mobile).
 * Os valores que o Elementor controla ficam sobrescritos pelos seletores do widget.
 */

/* ============ SECAO E BARRA ============ */
.els-hdr {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	position: relative;
	z-index: 50;
	/* sem cor de fundo: o header e usado sobre paginas claras e escuras.
	   Quem tem fundo proprio e a barra branca. */
	background-color: transparent;
	padding: 16px 24px;
}

.els-hdr__bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: 1320px;
	min-height: 80px;
	background-color: #fff;
	border-radius: 10px;
	padding: 0 10px 0 20px;
	box-shadow: 0 4px 30px rgba(16, 24, 40, .10);
}

.els-hdr__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
	text-decoration: none;
}

.els-hdr__logo img,
.els-mobile__logo img {
	display: block;
	width: 132px;
	height: auto;
}

.els-hdr__logo-fallback {
	font: 700 18px/1.2 Urbanist, sans-serif;
	color: #286191;
}

/* ============ NAVEGACAO ============ */
.els-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	flex: 0 1 auto;
	min-width: 0;
}

.els-nav__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	position: relative;
	white-space: nowrap;
}

.els-nav__item--has-drop { cursor: pointer; }

.els-nav__link {
	font: 700 14px/1.4 Urbanist, sans-serif;
	color: #475467;
	text-transform: uppercase;
	letter-spacing: .3px;
	text-decoration: none;
	transition: color .2s ease;
	white-space: nowrap;
}

/* A seta aponta para BAIXO em repouso e gira para CIMA quando o menu abre. */
.els-nav__item .els-chev {
	color: currentColor;
	rotate: 0deg;
	transition: rotate .2s ease;
	flex: 0 0 auto;
}

/* a classe vai no proprio icone: seletor descendente com atributo nao
   invalida de forma confiavel em todos os motores. */
.els-nav__item .els-chev.is-open { rotate: 180deg !important; }
.els-nav__item[data-open="true"] .els-nav__link,
.els-nav__item:hover .els-nav__link { color: #286191; }

/* ============ BOTOES ============ */
.els-hdr__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.els-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 14px/1 Urbanist, sans-serif;
	text-transform: uppercase;
	letter-spacing: .3px;
	text-decoration: none;
	border-radius: 5px;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
	border: 1px solid transparent;
}

/**
 * O "Take Level Test" da barra. A borda e Primary/900, como pedem os 33
 * cabecalhos do Website V3 DEVs - no V2 era Neutral/300 e ficava quase
 * invisivel sobre o branco.
 */
.els-btn--ghost {
	background-color: #fff;
	color: #101828;
	border-color: #286191;
	padding: 16px 24px;
	min-height: 50px;
}

/**
 * Dentro do painel aberto o mesmo botao tem borda propria, #DBE4F0, e assim
 * esta em todas as versoes do desenho - V2, revisao do cliente e V3. Ali o
 * botao nao disputa atencao com nada, entao nao precisa da borda forte.
 *
 * Precisa de !important, como o hover aqui ao lado: o controlo de cor do
 * Elementor gera `.elementor-32 .elementor-element.elementor-element-X
 * .els-btn--ghost`, quatro classes, e nenhuma combinacao honesta de
 * seletores meus chega la sem repetir classes. Em troca, este botao deixa
 * de responder ao controlo "Secondary: border" do painel - de proposito:
 * a barra e o painel tem tons proprios no desenho e nao se seguem.
 */
.els-mobile__actions .els-btn.els-btn--ghost {
	border-color: #DBE4F0 !important;
}

/* Hover derivado da escala Primary do Design System V2:
   fundo Primary/50, borda Primary/100 e texto Primary/900.
   Precisa de !important porque o controle de cor do Elementor gera
   `.elementor-element-X .els-btn--ghost`, mesma especificidade do :hover,
   e o CSS dele carrega depois do CSS do plugin. */
.els-btn--ghost:hover,
.els-btn--ghost:focus-visible {
	background-color: #EAF2FB !important;
	border-color: #B5D5F0 !important;
	color: #286191 !important;
}

.els-btn--solid {
	background-color: #101828;
	color: #fff;
	gap: 12px;
	/**
	 * No Figma os dois botoes da barra medem 50px e este tem padding 6 com um
	 * badge de 38: 6+38+6 = 50. Mas la a borda de 1px e um stroke que nao
	 * consome altura do frame, e aqui com box-sizing: border-box consome.
	 * Ficava 6+38+6+2 = 52, dois a mais que o Take Level Test.
	 * O padding baixa para 5 (mais 1 de borda = os 6 do desenho) e o badge
	 * passa a caber exactamente nos 50.
	 */
	padding: 5px 5px 5px 15px;
	min-height: 50px;
}

/**
 * Padrao de hover do site, o mesmo do els-cta.css:
 * nos botoes COM badge o fundo fica parado e quem responde e o badge, que
 * clareia um degrau, mais a seta, que gira 45deg e fica reta.
 *
 * O Book Now tinha um !important que trocava o fundo de Neutral/900 para
 * Primary/900. Foi tirado de proposito: era a unica coisa que fazia o botao
 * do header se comportar diferente do "Find your course" da pagina.
 *
 * O Take Level Test nao tem badge, entao ali o fundo continua a responder:
 * sem isso ficava sem qualquer reaccao ao mouse.
 */
.els-btn--solid:hover .els-btn__badge,
.els-btn--solid:focus-visible .els-btn__badge { background-color: #E4B169 !important; }


.els-btn:active { transform: translateY(1px); }

/* o mesmo vale para os botoes dentro do menu mobile */
.els-mobile__actions .els-btn--solid:hover .els-btn__badge { background-color: #E4B169 !important; }
.els-mobile__actions .els-btn--ghost:hover { background-color: #EAF2FB !important; border-color: #B5D5F0 !important; color: #286191 !important; }

/* garantia de que os dois botoes da barra nunca divergem em altura */
.els-hdr__actions .els-btn {
	min-height: 50px;
	box-sizing: border-box;
}

.els-btn__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 5px;
	background-color: #FFCC7F;
	color: #101828;
	flex: 0 0 auto;
}

.els-btn__badge--dark { background-color: #101828; color: #B5D5F0; }
.els-btn__badge { transition: background-color .2s ease; }
.els-mega__cta:hover .els-btn__badge--dark { background-color: #286191; }

/* No hover a seta sai da diagonal e fica reta para a direita.
   Gira so o icone: a caixa do badge nao se mexe. */
.els-btn__badge svg {
	rotate: 0deg;
	transition: rotate .25s ease;
}

.els-btn:hover .els-btn__badge svg,
.els-btn:focus-visible .els-btn__badge svg,
.els-mega__cta:hover .els-btn__badge svg {
	rotate: 45deg;
}

/* ============ HAMBURGUER ============ */
.els-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	padding: 0 !important;
	flex: 0 0 auto;
	-webkit-appearance: none;
	appearance: none;
}

.els-burger:hover span { background-color: #286191; }

.els-burger span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background-color: #286191;
}

/* ============ MEGA MENU ============ */
.els-mega,
.els-drop {
	position: absolute;
	top: calc(100% - 8px);
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(15, 23, 41, .14), 0 2px 6px rgba(15, 23, 41, .06);
	overflow: hidden;
	z-index: 60;
	display: none;
}

.els-mega[data-open="true"],
.els-drop[data-open="true"] { display: flex; }

.els-mega {
	left: 24px;
	right: 24px;
	max-width: 1320px;
	margin-inline: auto;
	flex-direction: column;
}

.els-mega__grid {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	padding: 32px 40px;
}

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

.els-mega__cat {
	font: 700 14px/16px Urbanist, sans-serif;
	color: #98A2B3;
	text-transform: uppercase;
	letter-spacing: .6px;
	margin: 0;
}

/* Os itens tem 10px 12px de padding para o pill de hover ter respiro, mas
   isso empurrava o texto deles 12px para dentro e desalinhava do titulo da
   coluna, que nao tem padding. No Figma os dois nascem no mesmo x.
   A margem negativa devolve o texto a borda da coluna e deixa o pill sangrar
   para fora, que e onde ha espaco de sobra entre as colunas. */
.els-mega__items {
	margin-inline: -12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* item de menu (usado no mega e na lista simples) */
.els-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none;
	transition: background-color .18s ease;
}

.els-item:hover { background-color: #F4F8FD; }

.els-item__title {
	font: 600 16px/24px Urbanist, sans-serif;
	color: #101828;
	transition: color .18s ease;
}

.els-item__sub {
	font: 400 14px/20px Urbanist, sans-serif;
	color: #475467;
}

.els-item:hover .els-item__title { color: #286191; }

/* rodape do mega menu */
.els-mega__foot {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 40px;
	background-color: #EAF2FB;
	border-top: 1px solid #D9E3F2;
}

.els-mega__foot-left {
	display: flex;
	align-items: center;
	gap: 6px;
	font: 400 14px/20px Urbanist, sans-serif;
	color: #286191;
}

/* todo o rodape do mega menu fica em 14px: o <a> herdava tamanho do tema */
.els-mega__foot-left a {
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #101828;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.els-mega__foot-left span { font-size: 14px; line-height: 20px; }

/* Dois niveis de classe de proposito: o Global Kit do Elementor pinta todo
   <a> com .elementor-kit-5 a (especificidade 0,2,0) usando a cor de destaque,
   e um seletor de classe unica perde para ele. Os outros links do rodape
   escapam porque ja sao .els-mega__foot-left a, que empata e ganha por ordem. */
.els-mega__foot .els-mega__cta,
.els-mega__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: Urbanist, sans-serif;
	font-size: 14px !important;
	line-height: 20px;
	font-weight: 600;
	color: #101828;
	text-decoration: none;
	white-space: nowrap;
}

.els-mega__cta span,
.els-mega__foot-left span,
.els-mega__foot-left a { font-size: 14px !important; }

.els-mega__foot .els-mega__cta:hover,
.els-mega__cta:hover { color: #286191; }

/* lista simples (Resources) */
.els-drop {
	left: auto;
	width: 352px;
	padding: 8px;
	flex-direction: column;
}

.els-drop .els-item { padding: 12px 16px; }

/* ============ OVERLAY MOBILE ============ */
.els-mobile {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-color: #F4F8FD;
	flex-direction: column;
	align-items: center;
	/* o padding lateral e o superior vem do controle da seccao, para a barra
	   aberta cair exatamente sobre a barra fechada */
	padding: 16px 24px 40px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
}

.els-mobile[data-open="true"] { display: flex; }
body.els-menu-open { overflow: hidden; }

/* A barra do menu aberto usa as MESMAS medidas da barra fechada, para o
   header nao mudar de lugar quando o menu abre. */
.els-mobile__bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	min-height: 80px;
	background: #fff;
	border-radius: 10px;
	padding: 0 10px 0 20px;
	box-shadow: 0 4px 30px rgba(16, 24, 40, .10);
	flex: 0 0 auto;
}

.els-mobile__logo { display: inline-flex; align-items: center; line-height: 0; }
.els-mobile__logo img { width: 132px; }

/* Com o menu aberto a barra fica so com a logo e o X: os botoes vivem no
   rodape do menu, como no Figma. A area existe para manter o alinhamento. */
.els-mobile__bar-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.els-mobile__bar-actions .els-btn { display: none; }
.els-mobile__bar-actions .els-btn--ghost { padding: 12px 18px; }
.els-mobile__bar-actions .els-btn--solid { min-height: 44px; padding: 4px 4px 4px 14px; }
.els-mobile__bar-actions .els-btn--solid .els-btn__badge { width: 36px; height: 36px; }

.els-mobile__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: #286191;
	cursor: pointer;
	padding: 0 !important;
	flex: 0 0 auto;
	-webkit-appearance: none;
	appearance: none;
}

.els-mobile__nav,
.els-mobile__actions,
.els-mobile__contact {
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
}

.els-mobile__nav {
	display: flex;
	flex-direction: column;
	padding: 18px 4px 0;
}

.els-macc {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #DBE4F0;
}

/* A linha do accordion e um <button>. O tema pinta <button> com fundo proprio
   (e um rosa no estado ativo), entao o reset precisa ser explicito. */
.els-macc__row,
.els-macc__row:hover,
.els-macc__row:focus,
.els-macc__row:active,
.els-macc__row[aria-expanded="true"] {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 0;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	width: 100%;
	color: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.els-macc__label {
	font: 600 20px/30px Urbanist, sans-serif;
	color: #101828;
	transition: color .2s ease;
}

.els-macc__row .els-chev {
	color: #98A2B3;
	rotate: 0deg;
	transition: rotate .25s ease;
	flex: 0 0 auto;
}

.els-macc .els-chev.is-open { rotate: 180deg !important; color: #286191; }
.els-macc[data-open="true"] .els-macc__label { color: #286191; }

.els-macc__panel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	padding-left: 16px;
	margin-left: 4px;
	border-left: 1px solid #CFE0F2;
	transition: max-height .3s ease, opacity .25s ease, margin-bottom .3s ease;
	margin-bottom: 0;
}

.els-macc[data-open="true"] .els-macc__panel {
	max-height: 1200px;
	opacity: 1;
	margin-bottom: 20px;
}

.els-macc__panel a {
	font: 400 16px/22px Urbanist, sans-serif;
	color: #475467;
	text-decoration: none;
	padding: 11px 0;
	transition: color .18s ease;
}

.els-macc__panel a:hover { color: #286191; }

.els-mobile__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 4px 0;
}

.els-btn--block {
	width: 100%;
	min-height: 54px;
	font-size: 15px;
}

.els-btn--block.els-btn--solid {
	justify-content: space-between;
	padding: 6px 6px 6px 20px;
}

.els-btn--block.els-btn--solid .els-btn__badge { width: 42px; height: 42px; }
.els-btn--block.els-btn--ghost { border-color: #DBE4F0; padding: 6px 20px; }

.els-mobile__contact {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px 4px 0;
	margin-top: 26px;
	border-top: 1px solid #DBE4F0;
}

.els-mcontact {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.els-mcontact img { width: 20px; height: 20px; flex: 0 0 auto; }

.els-mcontact span {
	font: 400 15px/22px Urbanist, sans-serif;
	color: #475467;
}

/* ============ ACESSIBILIDADE ============ */
.els-nav__link:focus-visible,
.els-btn:focus-visible,
.els-item:focus-visible,
.els-macc__row:focus-visible,
.els-burger:focus-visible,
.els-mobile__close:focus-visible {
	outline: 2px solid #286191;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-chev, .els-macc__panel, .els-btn, .els-item, .els-btn__badge,
	.els-btn__badge svg { transition: none !important; }
	.els-btn:active { transform: none; }
}

/* ================================ AJUSTES DE TELEMOVEL ================================ */

@media (max-width: 767px) {

	/**
	 * Os dois botoes do menu aberto ganham um ponto de tamanho.
	 *
	 * O widget poe 12px em todos os botoes no telemovel, o que serve a barra
	 * mas fica pequeno nos dois botoes largos do fundo do menu, que sao o
	 * destino de quem abriu o menu. A regra tem mais classes do que a do
	 * widget de proposito: e a unica forma de ganhar sem tocar na barra.
	 */
	.els-mobile .els-mobile__actions .els-btn.els-btn--block.els-btn--block {
		font-size: 15px;
	}

	/**
	 * O botao da barra flutuante fica mais baixo.
	 *
	 * A altura vinha do `min-height` e nao do espacamento: com 50 de altura
	 * dentro de uma barra de 70, o botao enchia-a quase toda.
	 */
	.els-hdr .els-hdr__actions .els-btn--solid {
		min-height: 42px;
		padding-top: 4px;
		padding-bottom: 4px;
	}
}

/* ------------------------------------------------------------------ */
/* Header que se esconde ao descer                                     */
/* ------------------------------------------------------------------ */

/**
 * Quem fixa o header no topo e o sticky do Elementor. O els-menu.js poe a
 * classe els-hdr-fora no mesmo elemento quando a pagina desce, e tira-a
 * assim que se sobe.
 */
.elementor-location-header [data-settings*="sticky"] {
	transition: transform .32s ease;
}

.elementor-location-header [data-settings*="sticky"].els-hdr-fora {
	transform: translateY(-100%);
}

/*
 * Com o menu do telemovel aberto o header nao pode ter transform nenhum. O
 * overlay (.els-mobile, position: fixed) vive dentro dele, e um transform num
 * pai faz desse pai a caixa do fixed: o menu aberto encolhia para os 94px da
 * barra, com o X fora do ecra quando a barra ja ia a sair, e a pagina ficava
 * presa (body.els-menu-open corta o scroll). Bastava rolar um pouco no topo,
 * ou o "elastico" do iPhone, para o els-menu.js escrever o translateY - era o
 * "menu preso" do Firefox no iPhone (outubro, pos-lancamento). Sem transicao,
 * senao durante 0,32s o transform ainda existia.
 */
body.els-menu-open .elementor-location-header [data-settings*="sticky"] {
	transform: none !important;
	transition: none !important;
	/* acima do banner do Complianz (99999): antes de a pessoa responder, ele
	   tapava "More", os idiomas, Take Level Test e Book Now do menu aberto */
	z-index: 100000 !important;
}

/* o chat do HubSpot esta no z-index maximo e nao ha como passar por cima:
   espera enquanto o menu esta aberto, como espera pelo banner (els-base.css) */
body.els-menu-open #hubspot-messages-iframe-container {
	visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.elementor-location-header [data-settings*="sticky"] { transition: none; }
}

/* ============ SELETOR DE IDIOMAS ============
   includes/idiomas.php; desenho no Figma, pagina "Website Menu".

   Duas variantes com o mesmo HTML:
     .els-lang--barra  desktop, na barra: bandeira + sigla, lista de siglas por baixo
     .els-lang--menu   telemovel e tablet, dentro do menu aberto: bandeira + nome

   Cores e medidas do desenho (DESKTOP-LANGUAGE e btn/L/Language): fundo
   #eaf2fb, raio 5, bandeira redonda de 18, folga de 6. A letra e a dos botoes
   ao lado no site (Urbanist 700 14px), para a barra ficar toda igual. */
.els-lang {
	position: relative;
	flex: 0 0 auto;
}

/* duas classes: o Elementor tem `.elementor img { height: auto; border-radius: 0 }` */
.els-lang .els-lang__flag {
	display: block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	object-fit: cover;
	border-radius: 50%;
}

.els-lang__chev {
	flex: 0 0 auto;
	transition: rotate .2s ease;
}

.els-lang.is-open .els-lang__chev { rotate: 180deg; }

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

.els-lang__lista li { margin: 0; }

/* o botao e os itens da lista sao a mesma pastilha.
   Tres classes: o Global Kit tem `.elementor-kit-5 button` e o tema pinta <button> e <a>. */
.els-lang.els-lang--barra .els-lang__btn,
.els-lang.els-lang--barra .els-lang__lista a,
.els-lang.els-lang--menu .els-lang__btn,
.els-lang.els-lang--menu .els-lang__lista a {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	margin: 0;
	border-radius: 5px;
	background-color: #eaf2fb;
	color: #101828;
	font: 700 14px/16px Urbanist, sans-serif;
	letter-spacing: .3px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ---------------------------------------------------------------- na barra */

.els-lang.els-lang--barra .els-lang__btn,
.els-lang.els-lang--barra .els-lang__lista a {
	min-height: 50px;
	padding: 12px 16px;
	border: 0;
}

.els-lang.els-lang--barra .els-lang__btn:hover,
.els-lang.els-lang--barra .els-lang__btn:focus-visible,
.els-lang.els-lang--barra.is-open .els-lang__btn,
.els-lang.els-lang--barra .els-lang__lista a:hover,
.els-lang.els-lang--barra .els-lang__lista a:focus-visible {
	background-color: #dbe9f8;
	color: #286191;
	outline: none;
}

/* a lista: um cartao branco centrado por baixo do botao, com os outros idiomas */
.els-lang--barra .els-lang__lista {
	position: absolute;
	z-index: 30;
	top: calc(100% + 10px);
	left: 50%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/*
	 * A largura e a do conteudo, dita por extenso. Sem isto cada motor faz a
	 * conta a sua maneira para uma caixa absoluta com `left: 50%`: no Chrome
	 * dava certo, no Firefox e no Safari o cartao saia mais estreito do que as
	 * pastilhas e a sigla ficava cortada na margem direita.
	 */
	width: -webkit-max-content;
	width: max-content;
	/* nunca menos do que os 96px do desenho, onde cabem a bandeira e duas letras */
	min-width: 96px;
	min-width: max(96px, 100%);
	box-sizing: border-box;
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(15, 23, 41, .06), 0 12px 32px -4px rgba(15, 23, 41, .14);
	/* fechada: fora do caminho do rato e do teclado, e sem saltar ao abrir */
	visibility: hidden;
	opacity: 0;
	translate: -50% -6px;
	transition: opacity .16s ease, translate .16s ease, visibility 0s linear .16s;
}

.els-lang--barra.is-open .els-lang__lista {
	visibility: visible;
	opacity: 1;
	translate: -50% 0;
	transition: opacity .16s ease, translate .16s ease;
}

/* cada pastilha tem a largura do cartao e nunca encolhe abaixo do seu texto */
.els-lang.els-lang--barra .els-lang__lista a {
	width: 100%;
	min-width: -webkit-max-content;
	min-width: max-content;
}

.els-lang .els-lang__lista a > span,
.els-lang .els-lang__btn > .els-lang__cod {
	flex: 0 0 auto;
}

/* o idioma em uso ja esta no botao: nao se repete na lista */
.els-lang--barra .els-lang__lista li:has(> a.gt-current-lang) { display: none; }

/* -------------------------------------------------------- no menu aberto */

.els-lang--menu { width: 100%; }

.els-lang.els-lang--menu .els-lang__btn,
.els-lang.els-lang--menu .els-lang__lista a {
	justify-content: center;
	width: 100%;
	min-height: 54px;
	padding: 6px 20px;
	border: 1px solid #dbe4f0;
}

.els-lang.els-lang--menu .els-lang__btn:hover,
.els-lang.els-lang--menu .els-lang__lista a:hover {
	border-color: #b5d5f0;
	color: #286191;
}

/* aberto, o botao da lugar ao cartao com todos os idiomas, o que esta em uso primeiro */
.els-lang--menu .els-lang__lista {
	display: none;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(15, 23, 41, .06), 0 12px 32px -4px rgba(15, 23, 41, .14);
}

/* o idioma em uso fica no topo da lista, apagado e com a seta para cima: e ele
   que fecha a lista (desenho "MOBILE - dropdown/LanguageOpen") */
.els-lang.els-lang--menu .els-lang__lista a.gt-current-lang {
	opacity: .5;
}

.els-lang.els-lang--menu .els-lang__lista a.gt-current-lang::after {
	content: "";
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.els-lang--menu.is-open .els-lang__btn { display: none; }
.els-lang--menu.is-open .els-lang__lista { display: flex; }
.els-lang--menu .els-lang__lista li:has(> a.gt-current-lang) { order: -1; }

/* ------------------------------------------------------- a barra a encolher */

/* abaixo de 1440 a navegacao e os botoes ja enchem a barra: fica so a bandeira */
@media (max-width: 1439px) {
	.els-lang--barra .els-lang__btn .els-lang__cod { display: none; }
	.els-lang.els-lang--barra .els-lang__btn { padding: 12px; }
}

/* com o seletor na barra, a navegacao e os dois botoes so cabem a partir de 1280:
   entre o hamburguer e ai sai o botao secundario, como ja saia ate 1199 */
@media (min-width: 1025px) and (max-width: 1279px) {
	.els-hdr .els-hdr__actions .els-lang ~ .els-btn--ghost { display: none; }
}

/* logo acima do hamburguer (1025 a 1099) a barra e a mais apertada de todas:
   a navegacao junta-se e o Book Now perde a etiqueta, como no telemovel */
@media (min-width: 1025px) and (max-width: 1099px) {
	.els-hdr .els-nav { gap: 16px; }
	.els-hdr .els-hdr__actions .els-lang ~ .els-btn--solid .els-btn__badge { display: none; }
	.els-hdr .els-hdr__actions .els-lang ~ .els-btn--solid { padding-inline: 18px; gap: 0; }
}

/* e nos primeiros 35px dessa faixa ainda faltava espaco em ingles */
@media (min-width: 1025px) and (max-width: 1059px) {
	.els-hdr .els-nav { gap: 10px; }
	.els-lang--barra .els-lang__chev { display: none; }
}

/* com a pagina traduzida (o GTranslate muda o `lang` do <html>) os itens da
   navegacao ficam mais compridos: apertam-se um pouco para continuarem a caber */
html[lang]:not([lang^="en"]) .els-hdr .els-nav { gap: 16px; }
html[lang]:not([lang^="en"]) .els-hdr .els-nav__link { letter-spacing: 0; }

/* o Google Translate poe uma barra no topo e empurra o <body>; aqui nao */
body > .skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }

/* ------------------------------- navegadores sem rotate/translate soltos */
/* Chrome < 104: as setas abertas nao viravam e a lista de idiomas saia do
   sitio. O mesmo em `transform`, so para esses navegadores. */
@supports not (rotate: 0deg) {
	.els-nav__item .els-chev.is-open,
	.els-macc .els-chev.is-open,
	.els-lang.is-open .els-lang__chev {
		transform: rotate(180deg);
	}
	.els-lang--barra .els-lang__lista {
		transform: translate(-50%, -6px);
	}
	.els-lang--barra.is-open .els-lang__lista {
		transform: translate(-50%, 0);
	}
}