/**
 * As pecas soltas que qualquer pagina usa.
 *
 * O pre-titulo com o quadradinho aparece em seccoes construidas com elementos
 * do Elementor, onde nao ha widget nenhum a puxar a folha dos cursos. Vivia la
 * dentro e por isso desaparecia nas paginas sem widget de curso - foi o que
 * aconteceu nas ofertas especiais. Esta folha e carregada sempre.
 */

/**
 * O pre-titulo.
 *
 * Regras do site, nao decisoes de cada elemento: Urbanist bold 14/17, cinzento
 * #475467 e SEMPRE em maiusculas, mesmo quando o Figma os traz em minusculas.
 *
 * Vive aqui e nao nos props do V4 por duas razoes. A primeira e que e um
 * padrao: muda num sitio e muda em todo o lado. A segunda e pratica - os props
 * que eu tinha posto nestes elementos desapareceram quando o editor regravou a
 * pagina, e os pre-titulos ficaram a 15px regular. Duas classes no seletor
 * para ganhar a um estilo local que o editor volte a criar.
 */
.elementor .els-eyebrow--ponto,
.els-eyebrow--ponto {
	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;
}

/* Sobre fundo escuro, como o Included in the price: branco no computador e
   um azul muito claro no telemovel, como no Figma. */
.elementor .els-eyebrow--claro,
.els-eyebrow--claro { color: #ffffff; }

/*
 * O quadradinho e mais claro no computador do que no telemovel - e o que os
 * frames pedem, todos eles: #7CB1E5 no desktop, #286191 abaixo dos 767, onde
 * o ecra e mais pequeno e o ponto precisa de mais contraste para se ver.
 */
.els-eyebrow--ponto::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background-color: #7cb1e5;
}

@media (max-width: 767px) {
	.els-eyebrow--ponto::before { background-color: #286191; }
}

.els-eyebrow--claro::before { background-color: #b5d5f0; }

/* Sem texto nao se desenha so o ponto. */
.elementor .els-eyebrow--ponto:empty,
.els-eyebrow--ponto:empty { display: none; }

/**
 * Os numeros do topo de uma pagina, separados por um filete.
 *
 * O filete vive aqui e nao nas propriedades do elemento porque o V4 so aceita
 * uma largura de borda igual nos quatro lados: pedir 1px so a esquerda dava
 * uma moldura completa a toda a volta. Com `+` o primeiro nao leva filete
 * nenhum, que e o que se quer.
 */
/**
 * Os numeros do topo, separados por um filete.
 *
 * So o filete vive aqui, e de proposito: o V4 nao sabe pedir uma borda de um
 * lado so - pedir 1px a esquerda da uma moldura a toda a volta - e por isso
 * tem de ser CSS.
 *
 * O espacamento fica nas propriedades de cada caixa, no painel. Ja esteve
 * aqui, com o peso de duas classes para vencer os 10px por omissao do
 * Elementor, e o efeito colateral foi mau: quem mexesse no espacamento pelo
 * painel nao via diferenca nenhuma, porque esta folha ganhava sempre.
 */
.els-hero-stat + .els-hero-stat { border-left: 1px solid #e4e7ec; }

.els-hero-stat-rotulo {
	margin: 0;
	font-family: Urbanist, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.35;
	color: #475467;
}


/**
 * O paragrafo de abertura da Check Availability.
 *
 * No desktop este texto vive dentro do painel escuro do formulario; no
 * telemovel o Figma tira-o de la e poe-no logo por baixo do titulo da pagina.
 * E o mesmo texto, so muda de sitio - por isso existe nos dois lados e cada
 * ecra mostra o seu.
 */
.els-lede-movel { display: none; }

@media (max-width: 767px) {
	.els-lede-movel {
		display: block;
		margin: 0;
		font-family: Inter, sans-serif;
		font-size: 15px;
		font-weight: 300;
		line-height: 1.47;
		color: #101828;
	}
}

/**
 * O video da abertura, no widget de video do Elementor.
 *
 * O widget trata do YouTube, da imagem de capa e de so carregar o leitor ao
 * clique. Falta-lhe tres coisas para bater com o frame 783:13937: a proporcao
 * (1320x420 nao esta na lista dele, e no telemovel o recorte e mais alto), o
 * veu escuro por cima da foto, e o play como circulo branco em vez de um
 * simbolo solto.
 */
.els-video-cover .elementor-wrapper {
	--video-aspect-ratio: 3.142857; /* 1320 / 420 */
	border-radius: 10px;
	overflow: hidden;
}

.els-video-cover .elementor-custom-embed-image-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(16, 24, 40, .5);
}

.els-video-cover .elementor-custom-embed-play {
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: 999px;
	background-color: #ffffff;
	transition: scale .25s ease;
}

.els-video-cover .elementor-custom-embed-play i,
.els-video-cover .elementor-custom-embed-play svg {
	color: #101828;
	fill: #101828;
	/* o triangulo do play e visualmente pesado a esquerda: desloca-se um pouco
	   para a direita para ficar centrado ao olho e nao a regua */
	margin-left: 3px;
	text-shadow: none;
	filter: none;
}

.els-video-cover .elementor-custom-embed-image-overlay:hover .elementor-custom-embed-play { scale: 1.06; }

@media (max-width: 767px) {
	.els-video-cover .elementor-wrapper {
		--video-aspect-ratio: 1.573913; /* 362 / 230 */
	}

	.els-video-cover .elementor-custom-embed-play {
		width: 56px;
		height: 56px;
	}
}

/**
 * Uma fotografia larga que se recorta sozinha.
 *
 * A moldura manda na proporcao, nao o ficheiro: 1320x420 no computador e mais
 * alta no telemovel, como os frames pedem. Assim a mesma foto serve os dois
 * ecras e trocar a imagem no painel nao muda a altura da seccao.
 */
.els-foto-capa {
	display: block;
	aspect-ratio: 1320 / 420;
	border-radius: 10px;
	overflow: hidden;
}

.els-foto-capa img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 767px) {
	.els-foto-capa { aspect-ratio: 362 / 230; }
}

/**
 * A galeria de fotografias, no widget do Elementor.
 *
 * Ele trata das colunas, do lightbox e do espacamento. Falta-lhe so garantir
 * que todas as celulas tem a mesma forma - as fotografias vem da maquina com
 * proporcoes diferentes e sem isto a grelha ficava aos degraus.
 */
.els-galeria .gallery-item img {
	width: 100%;
	height: auto;
	aspect-ratio: 318 / 239;
	object-fit: cover;
	display: block;
}

/*
 * O numero de colunas do widget nao muda por ecra - `gallery_columns` nao e um
 * controlo responsivo - e a folha do Elementor manda tudo para 100% abaixo dos
 * 1024. Os frames pedem quatro colunas no computador e duas no telemovel.
 */
@media (max-width: 1024px) {
	.els-galeria .elementor-image-gallery .gallery-item { width: 33.3333%; }
}

@media (max-width: 767px) {
	.els-galeria .elementor-image-gallery .gallery-item { width: 50%; }

	/* o espacamento tambem nao muda por ecra; no frame movel e 10 */
	.els-galeria .gallery-item { padding: 0 10px 10px 0 !important; }
	.els-galeria .gallery { margin: 0 -10px -10px 0 !important; }
}

/*
 * A fotografia dos cartoes de "Where to go next": 376x176 no frame.
 *
 * O `e-image` do V4 poe a classe no proprio `<img>`, nao num invólucro, por
 * isso o recorte tem de estar aqui - com a regra so no filho, as fotografias
 * saiam esticadas.
 */
.els-card-foto,
.els-card-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 376 / 176;
	object-fit: cover;
	border-radius: 10px;
}

/**
 * A caixa dos icones dos cartoes.
 *
 * No frame o icone de 24 vive dentro de um quadrado de 46 em #EAF2FB com raio
 * 5. Antes a caixa vinha desenhada dentro do proprio ficheiro; agora o icone e
 * so o simbolo, e a caixa e daqui - assim troca-se o icone sem refazer a arte.
 */
/*
 * A largura vem das definicoes do proprio widget, nao daqui: o Elementor
 * escreve-a por elemento e uma classe nunca lhe ganharia sem !important.
 * Aqui fica so a caixa.
 */
.els-icone-caixa img {
	height: 46px;
	padding: 11px;
	box-sizing: border-box;
	background-color: #eaf2fb;
	border-radius: 5px;
}

/* a fotografia que acompanha um bloco de texto: 810x400 no frame */
.els-foto-bloco img {
	display: block;
	width: 100%;
	aspect-ratio: 810 / 400;
	object-fit: cover;
	border-radius: 10px;
}

/**
 * O visto dos checkboxes.
 *
 * Vive aqui e nao em els-form.css porque o formulario de reserva tambem o usa
 * e nao carrega essa folha: no Book Now os checkboxes saiam nativos (QA, 15/09).
 *
 * O quadrado nativo muda de sistema para sistema e nunca combina com o resto.
 * Este e desenhado no proprio input - assim continua a ser um checkbox a
 * serio, com foco e teclado, so que com a cara do site.
 */
.els-check {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	background-color: #ffffff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease;
}

.els-check:hover { border-color: #7cb1e5; }

.els-check:checked {
	border-color: #286191;
	background-color: #286191;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.5 6.2 4.4 9 10.5 3' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.els-check:focus-visible {
	outline: 2px solid #7cb1e5;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Icone em SVG dentro de cartao                                       */
/* ------------------------------------------------------------------ */

/**
 * O desenho entra dentro da pagina (ver includes/svg-support.php), por isso a
 * caixa azul e a cor do traco sao CSS - e so assim podem mudar no hover do
 * cartao. Medidas do Figma: caixa de 46, desenho de 24.
 */
.els-icone svg {
	display: block;
	box-sizing: content-box;
	width: 24px;
	height: 24px;
	padding: 11px;
	border-radius: 5px;
	background-color: #eaf2fb;
	transition: background-color .25s ease;
}

.els-icone svg [stroke] {
	stroke: #286191;
	transition: stroke .25s ease;
}

.els-cartao-icone:hover .els-icone svg { background-color: #286191; }

.els-cartao-icone:hover .els-icone svg [stroke] { stroke: #ffffff; }

@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-icone svg,
	.els-icone svg [stroke] { transition: none; }
}

/* ------------------------------------------------- banner de cookies e chat
   No telemovel o banner do Complianz ocupa a largura toda e o balao do chat do
   HubSpot ficava por cima do ultimo botao. Enquanto o banner esta aberto o chat
   espera; volta assim que a pessoa responde. */
@media (max-width: 767px) {
	body:has(.cmplz-cookiebanner.cmplz-show) #hubspot-messages-iframe-container {
		visibility: hidden !important;
	}
}