/* =========================================================
   Header + mega menu — partilhado por todos os templates
   autónomos (ver template-parts/site-header.php).

   Cada var(--x) abaixo tem um valor de recurso (2º argumento de
   var()) igual ao token "canónico" usado em front-page.php —
   corrigido 2026-08-27: cerca de 18 templates (páginas de
   serviço como page-registo-alojamento-local.php,
   page-consultoria-juridica-financeira.php, etc.) nunca
   definiram estes tokens no seu próprio <style> inline, o que
   fazia os separadores em grelha do mega menu (--c-border-card,
   truque de "gap"+background em .hub-dd__grid) desaparecerem
   sempre que o dropdown era reaberto numa dessas páginas — o
   header deixa de depender da página anfitriã definir nada; os
   fallbacks só entram em jogo quando o token não existe, nunca
   substituem um valor que a página já defina.
   ========================================================= */

.header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--c-white-96, rgba(255, 255, 255, 0.96));
	-webkit-backdrop-filter: blur(6.3px);
	backdrop-filter: blur(6.3px);
	border-bottom: 1px solid var(--c-border-header, rgba(10, 45, 77, 0.08));
	box-shadow: var(--sh-header, 0 7.2px 27px rgba(10, 45, 77, 0.07));
}

/* Leaflet dá aos seus panes/controlos z-index de 400 a 1000 (ver
   assets/vendor/leaflet/leaflet.css). Sem um contexto de empilhamento
   próprio, esses valores vivem no contexto raiz da página e ficam por
   cima do header fixo (z-index: 60) e do mega menu — o mapa tapava o
   dropdown ao abri-lo sobre uma ferramenta com mapa (taxa turística,
   índice de risco, zonas de contenção, PDM, RNAL, investimentos...).
   position + z-index: 0 confina o mapa inteiro ao seu próprio contexto,
   sempre abaixo do header. Corrige todas as ferramentas de uma vez. */
.leaflet-container {
	position: relative;
	z-index: 0;
}

.header__bar {
	display: grid;
	grid-template-columns: 195.72px minmax(0, 1fr) auto;
	gap: 21.6px;
	align-items: center;
	height: 70.2px;
	width: 100%;
	max-width: var(--page-max, 1296px);
	margin-inline: auto;
	padding-inline: var(--page-pad, 54px);
}

.header__logo { display: flex; align-items: center; height: 39.6px; }
.header__logo-img { width: 195.72px; height: 39.6px; }
.header__nav-list { display: flex; align-items: center; justify-content: center; gap: 44px; }
.header__area { white-space: nowrap; flex-shrink: 0; font-weight: 700; }

.btn-gradient {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 43.2px;
	padding: 13.5px 21.6px;
	border: 0;
	border-radius: var(--radius-md, 7.2px);
	background-image: var(--grad-cta, linear-gradient(135deg, #007ed4 0%, #008bbd 100%));
	color: var(--c-white, #ffffff);
	font-size: var(--fs-15, 13.5px);
	font-weight: 600;
	line-height: 13.5px;
	cursor: pointer;
	filter: drop-shadow(var(--sh-cta, 0 10.8px 10.8px rgba(0, 153, 204, 0.22)));
}

.header__nav-link { font-size: var(--fs-16, 14.4px); font-weight: 700; line-height: 14.4px; color: var(--c-nav, #122945); white-space: nowrap; }
.header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 12.6px; height: 43.2px; }

.header__search,
.header__menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 37.8px;
	height: 37.8px;
	padding: 0;
	border: 0;
	border-radius: 18.9px;
	background: transparent;
	cursor: pointer;
}

.header__search-wrap { position: relative; }
.header__search[aria-expanded="true"] { background: var(--c-band, #eef5f9); }

.header__search-form {
	position: absolute;
	top: calc(100% + 10.8px);
	right: 0;
	display: flex;
	align-items: center;
	gap: 7.2px;
	width: 288px;
	max-width: calc(100vw - 43.2px);
	padding: 7.2px 7.2px 7.2px 16.2px;
	background: var(--c-white, #ffffff);
	border: 1px solid var(--c-border-header, rgba(10, 45, 77, 0.08));
	border-radius: 12.6px;
	box-shadow: 0 18px 36px rgba(10, 45, 77, 0.16);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6.3px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 70;
}

.header__search-form.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.header__search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: var(--fs-15, 13.5px); color: var(--c-ink, #0a2d4d); }
.header__search-input::placeholder { color: var(--c-crumb-mid, #778390); }

.header__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32.4px;
	height: 32.4px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 9.9px;
	background: var(--c-blue, #008bbd);
	cursor: pointer;
}

.header__menu-toggle { display: none; }

.header__menu-bars,
.header__menu-bars::before,
.header__menu-bars::after {
	display: block;
	width: 18px;
	height: 1.8px;
	border-radius: 1.8px;
	background: var(--c-ink, #0a2d4d);
	transition: transform 0.28s ease, opacity 0.28s ease;
}

.header__menu-bars { position: relative; }
.header__menu-bars::before,
.header__menu-bars::after { content: ""; position: absolute; left: 0; }
.header__menu-bars::before { top: -5.4px; }
.header__menu-bars::after { top: 5.4px; }

.header__menu-toggle[aria-expanded="true"] .header__menu-bars { background: transparent; }
.header__menu-toggle[aria-expanded="true"] .header__menu-bars::before { transform: translateY(5.4px) rotate(45deg); }
.header__menu-toggle[aria-expanded="true"] .header__menu-bars::after { transform: translateY(-5.4px) rotate(-45deg); }

/* position:relative fica no <nav> (não em cada <li>) para que TODOS os
   painéis (mega-menu, mega-menu--artigos, --solucoes, --ferramentas) se
   posicionem sempre relativos ao mesmo ponto de referência — caso
   contrário cada painel ficava centrado sob o SEU próprio gatilho e
   "saltava" de posição consoante a categoria em cima da qual se passa o
   rato. */
.header__nav { position: relative; }
.header__nav-item { position: static; }
.js-mega-trigger { position: relative; }
.js-mega-trigger[aria-expanded="true"] { color: var(--c-blue, #008bbd); }

.js-mega-trigger[aria-expanded="true"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8.1px;
	height: 2.25px;
	border-radius: 2.25px;
	background: var(--c-blue, #008bbd);
}

.mega-menu {
	--mega-border: rgba(10, 45, 77, 0.09);
	--mega-muted: #64748b;

	position: absolute;
	top: calc(100% + 21.6px);
	left: 50%;
	width: 960px;
	max-width: calc(100vw - 43.2px);
	height: 540.2px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transform: translateX(-50%) translateY(-6px);
	background: var(--c-white, #ffffff);
	border-radius: var(--radius-lg, 12.6px);
	box-shadow: 0 24px 48px rgba(10, 45, 77, 0.18);
	padding: 0 25.2px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 55;
}

.mega-menu.is-open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* =========================================================
   Dropdown "Sobre nós" — grelha 2x2 institucional em estilo
   "bento" (mesma família visual do Ferramentas: node 34:360),
   preenche sempre a altura toda do painel (ver .hub-dd__grid).
   ========================================================= */

.mega-menu--hub {
	width: 960px;
	max-width: calc(100vw - 43.2px);
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(-6px);
}

.mega-menu--hub.is-open { transform: translateX(-50%) translateY(0); }

.hub-dd__grid {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 1px;
	background: var(--c-border-card, rgba(10, 45, 77, 0.09));
}

.hub-dd__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8.1px;
	padding: 28.8px;
	background: var(--c-white, #ffffff);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease;
}

.hub-dd__card:hover { background: var(--c-blue-soft, #e6f4fa); }

.hub-dd__card-icon {
	display: grid;
	place-items: center;
	width: 39.6px;
	height: 39.6px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-blue-soft, #e6f4fa);
	transition: background-color 0.15s ease;
}

.hub-dd__card:hover .hub-dd__card-icon { background: var(--c-white, #ffffff); }

.hub-dd__card-title { font-size: 14.4px; font-weight: 700; color: var(--c-ink, #0a2d4d); }
.hub-dd__card-text { font-size: var(--fs-13, 11.7px); line-height: 1.4; color: var(--c-body, #536373); }

/* =========================================================
   Dropdown genérico "feed" (categorias de artigos ainda sem
   template dedicado, ex: Serviços; também usado pelo estado
   vazio do dropdown "Notícias" quando a categoria não tem
   posts): grelha de cartões (reaproveita .artigos-dd__card) +
   banner, ou um estado vazio ilustrado. Ambos ocupam sempre a
   altura toda do painel.
   ========================================================= */

.mega-menu--feed {
	width: 960px;
	max-width: calc(100vw - 43.2px);
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(-6px);
}

.mega-menu--feed.is-open { transform: translateX(-50%) translateY(0); }

.mega-menu__cards-wrap { flex: 1 1 auto; display: flex; align-items: center; padding: 28.8px; }
.mega-menu__cards-wrap .artigos-dd__cards { width: 100%; flex-wrap: wrap; row-gap: 21.6px; }

.mega-menu__empty-state {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12.6px;
	padding: 28.8px;
	text-align: center;
}

.mega-menu__empty-icon {
	display: grid;
	place-items: center;
	width: 50.4px;
	height: 50.4px;
	border-radius: 50%;
	background: var(--c-blue-soft, #e6f4fa);
}

.mega-menu__empty-title { font-size: 15.3px; font-weight: 800; color: var(--c-ink, #0a2d4d); }

.mega-menu__empty-text {
	max-width: 320px;
	font-size: var(--fs-13, 11.7px);
	line-height: 1.5;
	color: var(--c-body, #536373);
}

.mega-menu__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 7.2px;
	margin-top: 3.6px;
	padding: 10.8px 19.8px;
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-blue, #008bbd);
	color: var(--c-white, #ffffff);
	font-size: var(--fs-13, 11.7px);
	font-weight: 700;
	transition: background-color 0.15s ease;
}

.mega-menu__empty-cta:hover { background: var(--c-blue-700, #007caf); }

/* =========================================================
   Dropdown "Artigos" (Template C — separadores por tema,
   card em destaque + lista, adaptado do design escolhido
   no Figma: https://figma.com/design/sSJvteOowg54WYpMAWDKHc
   node 11:164 "template-c-wrapper").
   ========================================================= */

.mega-menu--artigos {
	width: 960px;
	max-width: calc(100vw - 43.2px);
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(-6px);
}

.mega-menu--artigos.is-open { transform: translateX(-50%) translateY(0); }

.artigos-dd__tabs {
	display: flex;
	align-items: center;
	gap: 28.8px;
	height: 57.6px;
	padding-inline: 36px;
	border-bottom: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	overflow-x: auto;
}

.artigos-dd__tab {
	position: relative;
	flex-shrink: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--fs-14, 12.6px);
	font-weight: 600;
	color: var(--c-body-alt, #546273);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}

.artigos-dd__tab:hover { color: var(--c-ink, #0a2d4d); }

.artigos-dd__tab.is-active { color: var(--c-blue, #008bbd); font-weight: 700; }

.artigos-dd__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2.7px;
	border-radius: 2.7px 2.7px 0 0;
	background: var(--c-blue, #008bbd);
}

.artigos-dd__panels { flex: 1 1 auto; display: flex; flex-direction: column; }
.artigos-dd__panel { display: none; padding: 21.6px 28.8px 18px; }
.artigos-dd__panel.is-active { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

.artigos-dd__empty {
	padding-block: 21.6px;
	text-align: center;
	font-size: var(--fs-14, 12.6px);
	color: var(--c-muted, #657485);
}

.artigos-dd__cards { display: flex; flex-wrap: wrap; gap: 14.4px; align-items: flex-start; justify-content: center; }

/* Separador com um único artigo: em vez de um thumbnail pequeno perdido
   no meio do painel, mostra-se como cartão "destaque" maior (imagem e
   texto maiores), preenchendo a altura disponível do painel. */
.artigos-dd__card--feature { flex: 0 1 480px; }
.artigos-dd__card--feature .artigos-dd__card-media { height: 234px; }
.artigos-dd__card--feature .artigos-dd__card-eyebrow { font-size: 10.8px; }
.artigos-dd__card--feature .artigos-dd__card-title { font-size: 18px; line-height: 1.35; }

.artigos-dd__card--feature .artigos-dd__card-text {
	font-size: 12.6px;
	line-height: 1.5;
	-webkit-line-clamp: 3;
}

.artigos-dd__card {
	display: flex;
	flex-direction: column;
	gap: 3.6px;
	flex: 0 1 calc(25% - 10.8px);
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.artigos-dd__card-media {
	display: block;
	width: 100%;
	height: 81px;
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-blue-soft, #e6f4fa);
	overflow: hidden;
	margin-bottom: 5.4px;
}

.artigos-dd__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.artigos-dd__card:hover .artigos-dd__card-media img { transform: scale(1.06); }

.artigos-dd__card-eyebrow {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--c-blue, #008bbd);
}

.artigos-dd__card-title {
	font-size: 11.7px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-ink, #0a2d4d);
	transition: color 0.15s ease;
}

.artigos-dd__card:hover .artigos-dd__card-title { color: var(--c-blue, #008bbd); }

.artigos-dd__card-text {
	font-size: 10.8px;
	line-height: 1.4;
	color: var(--c-body, #536373);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.artigos-dd__banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14.4px;
	padding: 12.6px 28.8px;
	background: rgba(0, 139, 189, 0.05);
	border-top: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
}

.artigos-dd__banner-text { display: flex; align-items: center; gap: 10.8px; min-width: 0; }

.artigos-dd__banner-tag {
	flex-shrink: 0;
	padding: 3.6px 7.2px;
	border-radius: 3.6px;
	background: var(--c-blue, #008bbd);
	color: var(--c-white, #ffffff);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.artigos-dd__banner-text p {
	font-size: 11.7px;
	font-weight: 700;
	color: var(--c-ink, #0a2d4d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.artigos-dd__banner-link {
	display: inline-flex;
	align-items: center;
	gap: 7.2px;
	flex-shrink: 0;
	font-size: var(--fs-14, 12.6px);
	font-weight: 700;
	color: var(--c-blue, #008bbd);
	text-decoration: underline;
	text-underline-offset: 2.7px;
}

/* =========================================================
   Dropdown "Soluções" (Two-Tier — faixa com os 5 serviços,
   lista de "mais populares" + destaque promocional), adaptado
   do design escolhido no Figma: node 17:141 "template-i-wrapper"
   do mesmo ficheiro do dropdown "Artigos".
   ========================================================= */

.mega-menu--solucoes {
	width: 960px;
	max-width: calc(100vw - 43.2px);
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(-6px);
}

.mega-menu--solucoes.is-open { transform: translateX(-50%) translateY(0); }

.solucoes-dd__top {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	padding: 21.6px 25.2px;
	border-bottom: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
}

.solucoes-dd__top-item {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 calc(33.33% - 6px);
	min-width: 0;
	padding: 10.8px;
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	border-radius: var(--radius-md, 7.2px);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.solucoes-dd__top-item:hover { border-color: var(--c-blue, #008bbd); box-shadow: 0 7.2px 14.4px rgba(0, 139, 189, 0.12); }

.solucoes-dd__top-icon {
	display: grid;
	place-items: center;
	width: 39.6px;
	height: 39.6px;
	flex-shrink: 0;
	border-radius: var(--radius-sm, 4.5px);
	background: var(--c-blue-soft, #e6f4fa);
}

.solucoes-dd__top-text { display: flex; flex-direction: column; gap: 1.8px; min-width: 0; }

.solucoes-dd__top-title {
	font-size: 12.6px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-ink, #0a2d4d);
}

.solucoes-dd__top-subtitle {
	font-size: 9.9px;
	color: var(--c-muted, #657485);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.solucoes-dd__split { flex: 1 1 auto; display: flex; align-items: stretch; }

.solucoes-dd__popular { flex: 1 1 auto; min-width: 0; padding: 25.2px; display: flex; flex-direction: column; }

.solucoes-dd__popular-eyebrow {
	font-size: 9.9px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-muted, #657485);
	margin-bottom: 12.6px;
}

.solucoes-dd__popular-rows { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 14.4px; }

.solucoes-dd__popular-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12.6px;
	padding: 16.2px 18px;
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	border-radius: var(--radius-md, 7.2px);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.solucoes-dd__popular-row:hover { border-color: var(--c-blue, #008bbd); box-shadow: 0 7.2px 14.4px rgba(0, 139, 189, 0.12); }

.solucoes-dd__popular-left { display: flex; align-items: center; gap: 12.6px; min-width: 0; }

.solucoes-dd__popular-icon {
	display: grid;
	place-items: center;
	width: 32.4px;
	height: 32.4px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-blue-soft, #e6f4fa);
}

.solucoes-dd__popular-left span:last-child {
	font-size: 12.6px;
	font-weight: 700;
	color: var(--c-ink, #0a2d4d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.solucoes-dd__promo {
	flex: 0 0 270px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 14.4px;
	padding: 25.2px;
	background: var(--c-blue-soft, #e6f4fa);
	border-left: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
}

.solucoes-dd__promo-icon {
	display: grid;
	place-items: center;
	width: 43.2px;
	height: 43.2px;
	border-radius: 50%;
	background: var(--c-white, #ffffff);
}

.solucoes-dd__promo-badge {
	display: inline-flex;
	padding: 3.6px 9.9px;
	border-radius: 100px;
	background: rgba(0, 139, 189, 0.12);
	color: var(--c-blue, #008bbd);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.solucoes-dd__promo-text { display: flex; flex-direction: column; gap: 9px; }
.solucoes-dd__promo-title { font-size: 16.2px; font-weight: 800; line-height: 1.35; color: var(--c-ink, #0a2d4d); }
.solucoes-dd__promo-desc { font-size: var(--fs-13, 11.7px); line-height: 1.5; color: var(--c-body, #536373); }

.solucoes-dd__promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 7.2px;
	padding: 12.6px 19.8px;
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-blue, #008bbd);
	color: var(--c-white, #ffffff);
	font-size: var(--fs-13, 11.7px);
	font-weight: 700;
	transition: background-color 0.15s ease;
}

.solucoes-dd__promo-cta:hover { background: var(--c-blue-700, #007caf); }

/* =========================================================
   Dropdown "Investir" — design próprio (não partilha classes com
   os outros): painel-vitrine com foto + overlay escuro à esquerda,
   grelha 2x2 de ferramentas + pills de distritos à direita.
   ========================================================= */

.mega-menu--investir {
	width: 900px;
	max-width: calc(100vw - 43.2px);
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(-6px);
}

.mega-menu--investir.is-open { transform: translateX(-50%) translateY(0); }

.mega-menu--investir { flex-direction: row; }

/* --- Painel-vitrine (esquerda) --- */
.investir-dd__showcase {
	position: relative;
	flex: 0 0 322px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 12.6px;
	padding: 28.8px 25.2px;
	text-decoration: none;
	color: var(--c-white, #ffffff);
	background-image: linear-gradient(180deg, rgba(10, 45, 77, 0.12) 0%, rgba(10, 45, 77, 0.5) 40%, rgba(8, 30, 52, 0.94) 100%), var(--investir-dd-img);
	background-size: cover;
	background-position: center 48%;
}

.investir-dd__showcase-eyebrow {
	font-size: 9.9px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.investir-dd__showcase-title {
	font-size: 19.8px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.2px;
}

.investir-dd__showcase-stats { display: flex; flex-direction: column; gap: 7.2px; margin-top: 1.8px; }

.investir-dd__showcase-stat {
	display: flex;
	align-items: flex-start;
	gap: 7.2px;
	font-size: var(--fs-13, 11.7px);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.9);
}

.investir-dd__showcase-stat svg { flex-shrink: 0; margin-top: 1.8px; color: #5cc8e6; }

.investir-dd__showcase-cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 7.2px;
	margin-top: 5.4px;
	padding: 10.8px 18px;
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-white, #ffffff);
	color: var(--c-ink, #0a2d4d);
	font-size: var(--fs-13, 11.7px);
	font-weight: 800;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.investir-dd__showcase:hover .investir-dd__showcase-cta { background: var(--c-blue, #008bbd); color: var(--c-white, #ffffff); }

/* --- Coluna direita ---
   justify-content: flex-start (não center) — mesmo padrão dos outros
   dropdowns (ex: .ferramentas-dd__top/__grid, ambos ancorados ao topo):
   o painel inteiro tem sempre a altura fixa de .mega-menu (540.2px) para
   não saltar entre menus, mas o conteúdo desta coluna é mais curto que
   as outras, e com justify-content:center isso deixava uma faixa em
   branco igual em cima E em baixo — parecia um espaço vazio "a mais"
   por cima do título "Ferramentas de investidor" em vez de um respiro
   de padding normal. */
.investir-dd__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 25.2px;
	padding: 30.6px;
}

.investir-dd__label {
	font-size: 9.9px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-muted, #657485);
	margin-bottom: 14.4px;
}

.investir-dd__tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12.6px; }

.investir-dd__tool {
	display: flex;
	align-items: center;
	gap: 11.7px;
	min-width: 0;
	padding: 15.3px 14.4px;
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	border-radius: var(--radius-md, 7.2px);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.investir-dd__tool:hover { border-color: var(--c-blue, #008bbd); box-shadow: 0 7.2px 14.4px rgba(0, 139, 189, 0.12); }

.investir-dd__tool-icon {
	display: grid;
	place-items: center;
	width: 32.4px;
	height: 32.4px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-blue-soft, #e6f4fa);
}

.investir-dd__tool-text { display: flex; flex-direction: column; gap: 1.8px; min-width: 0; }

.investir-dd__tool-title {
	font-size: 12.6px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-ink, #0a2d4d);
}

.investir-dd__tool-subtitle {
	font-size: 9.9px;
	color: var(--c-muted, #657485);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.investir-dd__divider { height: 1px; background: var(--c-border-card, rgba(10, 45, 77, 0.09)); }

.investir-dd__regions { display: flex; flex-wrap: wrap; gap: 9.9px; }

.investir-dd__region {
	display: inline-flex;
	align-items: center;
	gap: 5.4px;
	padding: 9px 14.4px;
	border-radius: 100px;
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	font-size: var(--fs-13, 11.7px);
	font-weight: 700;
	color: var(--c-ink, #0a2d4d);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.investir-dd__region svg { color: var(--c-blue, #008bbd); transition: color 0.15s ease; }

.investir-dd__region:hover {
	background: var(--c-blue, #008bbd);
	border-color: var(--c-blue, #008bbd);
	color: var(--c-white, #ffffff);
}

.investir-dd__region:hover svg { color: var(--c-white, #ffffff); }

/* =========================================================
   Dropdown "Ferramentas" — adaptado do Figma: node 34:360
   "template-6-wrapper" (Variação 6, "Compact Mosaic Grid"),
   mesmo ficheiro do dropdown "Artigos"/"Soluções". Faixa de
   destaques em círculo + grelha de duas colunas (cartão
   promocional claro + lista de acesso rápido em cartões).
   ========================================================= */

.mega-menu--ferramentas {
	width: 960px;
	max-width: calc(100vw - 43.2px);
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(-6px);
}

.mega-menu--ferramentas.is-open { transform: translateX(-50%) translateY(0); }

.ferramentas-dd__top {
	display: flex;
	flex-wrap: wrap;
	gap: 14.4px;
	padding: 21.6px 28.8px;
	border-bottom: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
}

.ferramentas-dd__top-item {
	display: flex;
	align-items: center;
	gap: 10.8px;
	flex: 1 1 calc(33.33% - 9.6px);
	min-width: 0;
	padding: 14.4px;
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	border-radius: var(--radius-md, 7.2px);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ferramentas-dd__top-item:hover { border-color: var(--c-blue, #008bbd); box-shadow: 0 7.2px 14.4px rgba(0, 139, 189, 0.12); }

.ferramentas-dd__top-icon {
	display: grid;
	place-items: center;
	width: 32.4px;
	height: 32.4px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-blue-soft, #e6f4fa);
}

.ferramentas-dd__top-text { display: flex; flex-direction: column; gap: 1.8px; min-width: 0; }

.ferramentas-dd__top-title {
	font-size: 12.6px;
	font-weight: 700;
	color: var(--c-ink, #0a2d4d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ferramentas-dd__top-subtitle {
	font-size: 9.9px;
	color: var(--c-muted, #657485);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ferramentas-dd__grid {
	display: flex;
	align-items: stretch;
	gap: 21.6px;
	padding: 28.8px;
}

.ferramentas-dd__promo-card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16.2px;
	padding: 25.2px;
	background: var(--c-blue-soft, #e6f4fa);
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	border-radius: 10.8px;
}

.ferramentas-dd__promo-card-badge {
	display: inline-flex;
	padding: 3.6px 9.9px;
	border-radius: 100px;
	background: rgba(0, 139, 189, 0.12);
	color: var(--c-blue, #008bbd);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.ferramentas-dd__promo-card-text { display: flex; flex-direction: column; gap: 9.9px; }
.ferramentas-dd__promo-card-title { font-size: 16.2px; font-weight: 800; line-height: 1.3; color: var(--c-ink, #0a2d4d); }
.ferramentas-dd__promo-card-desc { font-size: var(--fs-13, 11.7px); line-height: 1.5; color: var(--c-body, #536373); }

.ferramentas-dd__promo-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 7.2px;
	padding: 10.8px 19.8px;
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-blue, #008bbd);
	color: var(--c-white, #ffffff);
	font-size: var(--fs-13, 11.7px);
	font-weight: 700;
	transition: background-color 0.15s ease;
}

.ferramentas-dd__promo-card-cta:hover { background: var(--c-blue-700, #007caf); }

.ferramentas-dd__quick {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10.8px;
}

.ferramentas-dd__quick-eyebrow {
	font-size: 9.9px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--c-muted, #657485);
}

.ferramentas-dd__quick-list { display: flex; flex-direction: column; gap: 10.8px; }

.ferramentas-dd__quick-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10.8px;
	padding: 14.4px 16.2px;
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-white, #ffffff);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ferramentas-dd__quick-card:hover { border-color: var(--c-blue, #008bbd); box-shadow: 0 7.2px 14.4px rgba(0, 139, 189, 0.12); }

.ferramentas-dd__quick-left { display: flex; align-items: center; gap: 10.8px; min-width: 0; }

.ferramentas-dd__quick-icon { display: grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; }

.ferramentas-dd__quick-left span:last-child {
	font-size: var(--fs-13, 11.7px);
	font-weight: 700;
	color: var(--c-ink, #0a2d4d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.15s ease;
}

.ferramentas-dd__quick-card:hover .ferramentas-dd__quick-left span:last-child { color: var(--c-blue, #008bbd); }

/* =========================================================
   Dropdown "Notícias" — estrutura original (Figma node 47:126):
   lista de 4-6 notícias à esquerda + painel promo azul à direita.
   As caixas de imagem dos cartões originais foram trocadas por uma
   lista text-only porque a maioria das notícias não tem imagem de
   destaque e as caixas vazias deixavam faixas brancas (2026-08-27).
   ========================================================= */

.mega-menu--noticias {
	width: 960px;
	max-width: calc(100vw - 43.2px);
	padding: 0;
	overflow: hidden;
	transform: translateX(-50%) translateY(-6px);
}

.mega-menu--noticias.is-open { transform: translateX(-50%) translateY(0); }

.noticias-dd__grid { flex: 1 1 auto; display: flex; align-items: stretch; gap: 21.6px; padding: 28.8px; min-height: 0; }

/* Lista de notícias (esquerda) — grelha de 2 colunas que preenche sempre a
   altura toda do painel (grid-auto-rows: 1fr), por isso nunca sobra faixa
   branca por baixo, tenha 4 ou 6 notícias. Text-only de propósito: a maioria
   das notícias não tem imagem de destaque (bug da faixa branca, 2026-08-27). */
.noticias-dd__list {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 10.8px;
}

.noticias-dd__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5.4px;
	min-width: 0;
	padding: 14.4px 16.2px;
	border-radius: 9px;
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.noticias-dd__item:hover {
	background: var(--c-blue-soft, #e6f4fa);
	border-color: transparent;
}

.noticias-dd__item-eyebrow {
	font-size: 9.9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--c-blue, #008bbd);
}

.noticias-dd__item-title {
	font-size: var(--fs-14, 12.6px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-ink, #0a2d4d);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.noticias-dd__item-text {
	font-size: var(--fs-13, 11.7px);
	line-height: 1.4;
	color: var(--c-body, #536373);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.noticias-dd__promo {
	flex: 0 0 264px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: 21.6px;
	background: var(--c-blue-soft, #e6f4fa);
	border: 1px solid var(--c-border-card, rgba(10, 45, 77, 0.09));
	border-radius: 9px;
}

.noticias-dd__promo-top { display: flex; flex-direction: column; gap: 9px; }

.noticias-dd__promo-list {
	list-style: none;
	margin: 3.6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7.2px;
}

.noticias-dd__promo-list li {
	position: relative;
	padding-left: 18px;
	font-size: var(--fs-13, 11.7px);
	line-height: 1.35;
	color: var(--c-body, #536373);
}

.noticias-dd__promo-list li::before {
	content: "";
	position: absolute;
	left: 3.6px;
	top: 5.4px;
	width: 5.4px;
	height: 5.4px;
	border-radius: 50%;
	background: var(--c-blue, #008bbd);
}

.noticias-dd__promo-badge {
	align-self: flex-start;
	padding: 3.6px 9.9px;
	border-radius: 100px;
	background: var(--c-white, #ffffff);
	color: var(--c-blue, #008bbd);
	font-size: 9.9px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.noticias-dd__promo-title { font-size: 16.2px; font-weight: 800; line-height: 1.3; color: var(--c-ink, #0a2d4d); }
.noticias-dd__promo-text { font-size: var(--fs-13, 11.7px); line-height: 1.4; color: var(--c-body, #536373); }

.noticias-dd__promo-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9.9px 18px;
	border-radius: var(--radius-md, 7.2px);
	background: var(--c-blue, #008bbd);
	color: var(--c-white, #ffffff);
	font-size: var(--fs-13, 11.7px);
	font-weight: 700;
	text-align: center;
	transition: background-color 0.15s ease;
}

.noticias-dd__promo-cta:hover { background: var(--c-blue-700, #007caf); }

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 1420px) {
	.header__bar { grid-template-columns: 195.72px minmax(0, 1fr) auto; gap: 18px; }
	.header__nav-list { gap: 21.6px; }
	.header__nav-link { font-size: var(--fs-14, 12.6px); }

	/* Painel mais estreito para caber sem sair do ecrã em portáteis mais
	   estreitos (confirmado ~1090px) — todos os dropdowns partilham o
	   mesmo ponto de centragem (ver .header__nav acima) e a mesma largura
	   (ver .mega-menu acima), por isso todos precisam do mesmo ajuste. */
	.mega-menu { width: 720px; }
	.mega-menu--artigos { width: 720px; }

	.mega-menu--solucoes { width: 720px; }
	.solucoes-dd__top { flex-wrap: wrap; }
	.solucoes-dd__top-item { flex: 1 1 calc(33.33% - 6px); }

	.mega-menu--investir { width: 720px; }
	.investir-dd__showcase { flex-basis: 258px; }
	.investir-dd__main { gap: 19.8px; padding: 25.2px; }
	.investir-dd__tool { padding: 12.6px; }

	.mega-menu--ferramentas { width: 720px; }
	.ferramentas-dd__top { flex-wrap: wrap; }
	.ferramentas-dd__top-item { flex: 1 1 calc(33.33% - 9.6px); }

	.mega-menu--noticias { width: 720px; }
	.noticias-dd__promo { flex-basis: 224px; }
}

@media (max-width: 1024px) {
	.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 14.4px; }
	.header__menu-toggle { display: inline-flex; }
	.header__area { display: none; }

	.header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		background: var(--c-white, #ffffff);
		border-bottom: 1px solid var(--c-border-header, rgba(10, 45, 77, 0.08));
		box-shadow: var(--sh-header, 0 7.2px 27px rgba(10, 45, 77, 0.07));
		transition: max-height 0.34s ease, opacity 0.24s ease;
	}

	.header__nav--open { max-height: 378px; opacity: 1; }
	.header__nav-list { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 7.2px var(--page-pad, 54px) 18px; }
	.header__nav-link { display: block; padding: 12.6px 0; border-bottom: 1px solid var(--c-border-header, rgba(10, 45, 77, 0.08)); }
	.header__actions { gap: 7.2px; height: auto; }

	.mega-menu { display: none; }
}

/* =========================================================
   Rodapé — acrescentada a coluna "Sobre Nós" (2026-09-06), a
   espelhar o dropdown "Sobre nós" do header. Passaram a ser 5
   colunas + marca; o layout flex original (.footer__col com
   flex-shrink: 0, 185px fixos) transbordava ou quebrava feio.

   Só no desktop (> 1024px, onde o layout original é 1 linha) a
   .footer__top passa a grid de 6 colunas do tamanho do seu
   conteúdo, distribuídas com justify-content: space-between — a
   marca encosta à margem esquerda, "Sobre Nós" à direita, e o
   espaço que sobra fica repartido em intervalos IGUAIS entre
   todas (pedido do utilizador, 2026-09-06: o rodapé tem de
   ficar simétrico às margens e com espaçamentos uniformes).
   Abaixo de 1024px continua a valer o flex "2 por linha" já
   definido nos templates.

   Regra aqui (não nos 35 <style> inline de cada template)
   porque site-header.css carrega em todas as páginas com
   rodapé e é aplicado DEPOIS do <style> inline — mesmo padrão
   do bug de tokens do header e do fix do z-index do Leaflet.
   ========================================================= */

/* O <style> inline tem justify-content: center. Com 4 colunas
   (par) as linhas ficavam sempre cheias; com 5 (ímpar) a última
   coluna fica sozinha na sua linha e, centrada, aparecia no meio
   em vez de encostada à esquerda no layout "2 por linha"
   (<= 1024px). No desktop a regra abaixo repõe o space-between. */
.footer__top { justify-content: flex-start; }

@media (min-width: 1025px) {
	.footer__top {
		display: grid;
		/* Colunas do tamanho do conteúdo (não 1fr — com 1fr o
		   espaço livre é comido pelas colunas e o space-between
		   não teria nada para distribuir). */
		grid-template-columns: repeat(6, max-content);
		justify-content: space-between;
		align-items: start;
		column-gap: 0;
		row-gap: 0;
	}

	.footer__brand {
		width: auto;
		max-width: 280px;
	}

	.footer__col {
		width: auto;
	}
}

/* =========================================================
   Tipografia — Sora nos títulos, em todo o site (2026-09-12).
   Direção aprovada: "B · Direto" (ref. lodgify.com) sobre a
   base atual em Inter.

   Regra aqui (não nos ~35 <style> inline) pelo mesmo motivo do
   fix de z-index do Leaflet e do rodapé a 5 colunas: nenhum
   template define font-family/letter-spacing nos seus próprios
   seletores de título (só font-size/font-weight), por isso um
   seletor de elemento simples ganha a cascata sem precisar de
   !important nem de tocar em cada ficheiro. font-size e
   font-weight continuam a cargo de cada template — cada um tem
   colunas/larguras fixas próprias que precisam de olho em
   browser antes de mexer no tamanho (só a homepage foi afinada
   até agora, ver front-page.php).
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Sora', var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	letter-spacing: -0.02em;
}