/* ============================================================
   HEADER — Plano de Parto
   Barra branca em fluxo normal, ACIMA da hero (já não por cima).

   • Telemóvel e tablet (< 1025px): hambúrguer + painel lateral,
     com a animação GSAP intacta.
   • Desktop (>= 1025px): menu horizontal, logo à esquerda,
     lupa no extremo direito, submenu em vidro fosco no hover.

   NOTA: a hero já não precisa de `position: relative` para o
   header — ele deixou de ser `position: absolute`.
   ============================================================ */

.pd-header {
	position: relative;
	z-index: 999;
	width: 100%;
	background: var(--pd-header-bg-color, #fff);
	border: 0;
	border-bottom: 1px solid var(--pd-header-border, rgba(6, 73, 63, .12));
	box-shadow: none;
	font-family: var(--pd-font-sans);

	/* ---- Os quatro valores que controlam a cor da barra ---- */
	--pd-header-bg-color: #fff;
	--pd-header-border: rgba(6, 73, 63, .12);
	--pd-header-ink: var(--pd-color-green, #06493f);
	/* texto e ícones */
	--pd-logo-color: var(--pd-color-green, #06493f);
	/* logótipo */
	--pd-search-color: var(--pd-color-green, #06493f);
	/* lupa */
	--pd-search-color-hover: var(--pd-color-action, #2f6b4f);

	/* Arredondamento do realce no hover dos itens do menu.
	   9px = rectângulo de cantos suaves. 999px faria uma cápsula. */
	--pd-nav-pill-radius: 9px;
}

/* Se quiseres a barra colada ao topo ao fazer scroll, troca por:
   .pd-header { position: sticky; top: 0; } */

.pd-header,
.pd-header-inner,
.pd-nav,
.pd-nav>ul,
.pd-nav>ul>li {
	overflow: visible;
}

.pd-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 96px;
	box-sizing: border-box;
}

/* Especificidade a mais de propósito: garante que a altura ganha ao
   `padding` abreviado do .pd-container, seja qual for a ordem em que
   os ficheiros são carregados. */
.pd-header .pd-header-inner {
	padding-top: 14px;
	padding-bottom: 14px;
}

.pd-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Logo ----------
   O SVG usa fill="currentColor", por isso a cor vem daqui. */

.pd-logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
	color: var(--pd-logo-color, #06493f);
}

.pd-logo img,
.pd-logo svg {
	display: block;
	width: 175px;
	height: auto;
	max-width: 100%;
}

/* ---------- Alinhamento com o conteúdo da página ----------
   O .pd-header-inner leva também a classe .pd-container, a mesma que a
   hero usa. Largura máxima e margens laterais vêm de lá, por isso a logo
   alinha com o texto da hero em QUALQUER largura de ecrã, sem números
   repetidos aqui. Só a altura é definida neste ficheiro.

   Por isso não se mexe no padding horizontal do .pd-header-inner em
   lado nenhum — nem nas media queries. */

/* ---------- Ações do header: hambúrguer + lupa ----------
   O antigo "Home" saiu (já é o primeiro item do menu) e nenhum dos
   botões tem rótulo, por isso alinham pelo centro da barra. */

.pd-header-actions {
	position: relative;
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 0 0 auto;
}

.pd-header-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	margin: 0;
	padding: 4px 2px;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--pd-header-ink, #06493f);
	font-family: var(--pd-font-sans);
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: opacity 180ms ease, color 200ms ease, transform 180ms ease;
}

.pd-header-action:hover,
.pd-header-action:focus,
.pd-header-action:active {
	color: var(--pd-search-color-hover, #2f6b4f);
	opacity: 1;
	transform: translateY(-1px);
}

.pd-header-action:focus-visible {
	outline: 2px solid rgba(6, 73, 63, .45);
	outline-offset: 4px;
	border-radius: 6px;
}

.pd-header-action-icon {
	display: block;
	width: 30px;
	height: 30px;
}

.pd-header-action-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}


/* ---------- Hamburguer (tablet e telemóvel) ----------
   Três barras desenhadas em CSS, que se cruzam num × quando o painel
   abre. O estado vem do aria-expanded que o JS já mantém, por isso não
   é preciso classe nenhuma nova. No desktop o botão está escondido. */

.pd-menu-toggle {
	width: 44px;
	height: 44px;
	padding: 0;
	gap: 0;
	align-items: center;
	justify-content: center;
}

.pd-burger {
	position: relative;
	display: block;
	width: 26px;
	height: 16px;
	flex: 0 0 auto;
}

.pd-burger-bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition:
		top 300ms cubic-bezier(.16, 1, .3, 1),
		transform 380ms cubic-bezier(.16, 1, .3, 1),
		opacity 180ms ease;
}

.pd-burger-bar:nth-child(1) {
	top: 0;
}

.pd-burger-bar:nth-child(2) {
	top: 7px;
}

.pd-burger-bar:nth-child(3) {
	top: 14px;
}

/* A barra do meio recolhe para o centro em vez de desaparecer de
   repente — assim o × parece formar-se a partir dela. */
.pd-menu-toggle[aria-expanded="true"] .pd-burger-bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(.3);
}

.pd-menu-toggle[aria-expanded="true"] .pd-burger-bar:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}

.pd-menu-toggle[aria-expanded="true"] .pd-burger-bar:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* ---------- Lupa: cor própria, sempre no extremo direito ---------- */

.pd-header .pd-header-actions .pd-search-toggle {
	margin-left: auto;
	color: var(--pd-search-color, #06493f);
}

.pd-header .pd-header-actions .pd-search-toggle:hover,
.pd-header .pd-header-actions .pd-search-toggle:focus,
.pd-header .pd-header-actions .pd-search-toggle:active {
	color: var(--pd-search-color-hover, #2f6b4f);
	opacity: 1;
}

/* ---------- Pesquisa ---------- */

/* A lupa e os restantes ícones apagam-se quando a pesquisa abre. */
.pd-header.pd-search-open .pd-header-action {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-2px);
	transition: opacity 220ms ease, transform 260ms ease;
}

.pd-header-search-form {
	position: absolute;
	z-index: 5;
	top: 50%;
	right: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 0;
	padding: 0 2px 9px;
	border: 0;
	border-bottom: 1px solid rgba(6, 73, 63, .3);
	background: transparent;
	box-shadow: none;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transform: translateY(-50%);
	transition:
		width 520ms cubic-bezier(.16, 1, .3, 1),
		opacity 240ms ease,
		border-color 240ms ease,
		visibility 0s linear 520ms;
}

.pd-header.pd-search-open .pd-header-search-form {
	width: min(400px, 64vw);
	opacity: 1;
	visibility: visible;
	transition:
		width 520ms cubic-bezier(.16, 1, .3, 1),
		opacity 200ms ease 60ms,
		border-color 240ms ease,
		visibility 0s linear 0s;
}

.pd-header-search-form:focus-within {
	border-bottom-color: var(--pd-color-green, #06493f);
}

.pd-header-search-form input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--pd-color-green, #06493f);
	font: 400 17px/1 var(--pd-font-sans);
	letter-spacing: .01em;
	-webkit-appearance: none;
	appearance: none;
}

.pd-header-search-form input[type="search"]::placeholder {
	color: rgba(6, 73, 63, .45);
}

.pd-header-search-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.pd-header-search-form .pd-search-submit {
	display: flex;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--pd-search-color, #06493f) !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	opacity: .85;
	transition: opacity 200ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.pd-header-search-form .pd-search-submit:hover {
	opacity: 1;
	transform: scale(1.08);
}

.pd-header-search-form .pd-search-submit:focus-visible {
	outline: 2px solid rgba(6, 73, 63, .5);
	outline-offset: 4px;
}

.pd-header-search-form .pd-search-submit svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Sugestões da pesquisa ---------- */

.pd-header-search-results {
	position: absolute;
	z-index: 20;
	top: calc(100% + 14px);
	right: 0;
	width: min(400px, 64vw);
	max-height: min(58vh, 430px);
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid rgba(6, 73, 63, .08);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 48px rgba(6, 73, 63, .18);
	text-align: left;
	animation: pd-search-in 260ms cubic-bezier(.16, 1, .3, 1);
}

.pd-header-search-results[hidden] {
	display: none;
}

@keyframes pd-search-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.pd-search-result {
	display: block;
	padding: 11px 14px;
	border-radius: 11px;
	color: inherit;
	text-decoration: none;
	transition: background-color 140ms ease;
}

.pd-search-result:hover,
.pd-search-result.is-active {
	background: #eef4ee;
}

.pd-search-result-section {
	display: block;
	margin-bottom: 4px;
	color: var(--pd-color-action, #2f6b4f);
	font-family: var(--pd-font-sans);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.pd-search-result-title {
	display: block;
	color: var(--pd-color-green, #06493f);
	font-family: var(--pd-font-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

.pd-search-result-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-top: 4px;
	overflow: hidden;
	color: #5d6d62;
	font-family: var(--pd-font-sans);
	font-size: 12.5px;
	line-height: 1.5;
}

.pd-header-search-results mark {
	padding: 0 1px;
	border-radius: 3px;
	background: rgba(243, 155, 36, .3);
	color: inherit;
}

.pd-search-message {
	padding: 15px 14px;
	color: #5d6d62;
	font-family: var(--pd-font-sans);
	font-size: 13px;
}

/* ============================================================
   PAINEL DE MENU — versão GSAP (tablet e telemóvel)
   ------------------------------------------------------------
   O painel é revelado da direita para a esquerda (clip-path) e
   os links sobem dentro de máscaras. A mesma linguagem é usada
   no submenu ("Você e a sua gravidez").

   Quem anima é o GSAP. As regras com transição existem só como
   reserva: quando o GSAP carrega, o JS põe `pd-gsap` no <html>
   e essas transições são desligadas.

   A partir dos 1025px este painel deixa de ser usado — ver a
   secção "MENU HORIZONTAL (DESKTOP)" no fim do ficheiro.
   ============================================================ */

html.pd-mobile-menu-lock,
body.pd-mobile-menu-lock {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/*
 * Acima de 768px a página encolhe para o lado em vez de ficar tapada
 * pelo painel — é assim que o header e os ícones continuam à vista.
 */
@media (min-width: 769px) {
	html {
		transition: padding-right 900ms cubic-bezier(.16, 1, .3, 1);
	}

	html.pd-gsap {
		transition: none;
	}

	html.pd-mobile-menu-lock {
		padding-right: min(72vw, 430px);
	}
}

/* ---------- Caixa exterior ---------- */

.pd-header .pd-nav {
	position: fixed;
	z-index: 10000;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	display: block;
	width: min(72vw, 430px);
	max-width: calc(100% - 64px);
	height: 100vh;
	height: 100dvh;
	margin: 0;
	padding: 0;
	overflow: visible;
	color: var(--pd-color-green, #06493f);
	background: transparent;
	border: 0;
	box-shadow: none;
	box-sizing: border-box;
	pointer-events: none;
	visibility: hidden;
}

.pd-header.pd-mobile-menu-open .pd-nav {
	pointer-events: auto;
	visibility: visible;
}

/* ---------- A folha (é esta que é revelada) ---------- */

.pd-header .pd-nav .pd-nav-sheet {
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	background: var(--pd-nav-paper, #dfeadd);
	box-sizing: border-box;
	clip-path: inset(0 0 0 100%);
	transition: clip-path 760ms cubic-bezier(.16, 1, .3, 1);
}

.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-sheet {
	clip-path: inset(0 0 0 0%);
}

html.pd-gsap .pd-header .pd-nav .pd-nav-sheet {
	transition: none;
}

/* Fio de luz no rebordo esquerdo, a marcar o corte. */
.pd-header .pd-nav .pd-nav-sheet::before {
	content: "";
	position: absolute;
	z-index: 4;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(6, 73, 63, .14) 42%, rgba(255, 255, 255, .5) 100%);
	pointer-events: none;
}

/* Camada interior — leva o deslize de paralaxe. */
.pd-header .pd-nav .pd-nav-shift {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: column;
	box-sizing: border-box;
	padding: calc(30px + env(safe-area-inset-top, 0px)) 0 calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ---------- Topo do painel ---------- */

.pd-header .pd-nav .pd-nav-head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 clamp(26px, 8%, 44px) 22px;
}

.pd-header .pd-nav .pd-nav-eyebrow {
	display: block;
	color: rgba(6, 73, 63, .5);
	font-family: var(--pd-font-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
}

/* Botão de fechar (×) */

.pd-header .pd-nav .pd-nav-close {
	position: relative;
	display: flex;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0 !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(6, 73, 63, .16) !important;
	border-radius: 999px !important;
	color: var(--pd-color-green, #06493f);
	background: rgba(255, 255, 255, .34) !important;
	box-shadow: none !important;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 240ms ease, border-color 240ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.pd-header .pd-nav .pd-nav-close:hover,
.pd-header .pd-nav .pd-nav-close:focus {
	border-color: rgba(6, 73, 63, .34) !important;
	background: rgba(255, 255, 255, .7) !important;
	transform: rotate(90deg);
}

.pd-header .pd-nav .pd-nav-close:focus-visible {
	outline: 2px solid rgba(6, 73, 63, .46);
	outline-offset: 4px;
}

.pd-header .pd-nav .pd-nav-close-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 1.4px;
	background: currentColor;
	border-radius: 2px;
}

.pd-header .pd-nav .pd-nav-close-bar:nth-child(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.pd-header .pd-nav .pd-nav-close-bar:nth-child(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Palco: os dois níveis vivem aqui ---------- */

.pd-header .pd-nav .pd-nav-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.pd-header .pd-nav .pd-nav-layer {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 10px clamp(26px, 8%, 44px);
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Com um submenu à vista, o primeiro nível recua e apaga-se. */
.pd-header .pd-nav .pd-nav-layer--root {
	z-index: 1;
	transform: translateX(0);
	opacity: 1;
	transition: transform 520ms cubic-bezier(.45, 0, .2, 1), opacity 360ms ease;
}

.pd-header.pd-mobile-submenu-view .pd-nav .pd-nav-layer--root {
	pointer-events: none;
	transform: translateX(-54px);
	opacity: 0;
}

html.pd-gsap .pd-header .pd-nav .pd-nav-layer--root {
	transition: none;
}

/* ---------- Listas ---------- */

.pd-header .pd-nav .pd-nav-list {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pd-header .pd-nav .pd-nav-item {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Filete entre os itens — entra a crescer da esquerda. */
.pd-header .pd-nav .pd-nav-rule {
	display: block;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, rgba(6, 73, 63, .17) 0%, rgba(6, 73, 63, .04) 72%, rgba(6, 73, 63, 0) 100%);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform 620ms cubic-bezier(.16, 1, .3, 1) 260ms;
}

.pd-header .pd-nav .pd-nav-item:first-child>.pd-nav-rule {
	display: none;
}

.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-rule {
	transform: scaleX(1);
}

html.pd-gsap .pd-header .pd-nav .pd-nav-rule {
	transition: none;
}

/* A máscara: o link sobe de dentro dela. */
.pd-header .pd-nav .pd-nav-mask {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	padding: 1px 0;
}

/* ---------- Os links ---------- */

.pd-header .pd-nav .pd-nav-link {
	position: relative;
	display: flex;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 0 !important;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--pd-color-green, #06493f);
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--pd-font-serif) !important;
	font-size: clamp(21px, 2.1vw, 27px) !important;
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -.3px;
	text-align: left;
	text-decoration: none;
	text-transform: none !important;
	white-space: normal;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	transform: translateY(115%);
	opacity: 0;
	transition:
		transform 700ms cubic-bezier(.16, 1, .3, 1),
		opacity 480ms ease,
		color 220ms ease;
}

.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-link {
	transform: translateY(0);
	opacity: 1;
}

html.pd-gsap .pd-header .pd-nav .pd-nav-link {
	transition: color 220ms ease;
}

/* Reserva sem GSAP: escalonamento dos links do primeiro nível. */
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(1) .pd-nav-link { transition-delay: 220ms, 220ms, 0ms; }
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(2) .pd-nav-link { transition-delay: 285ms, 285ms, 0ms; }
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(3) .pd-nav-link { transition-delay: 350ms, 350ms, 0ms; }
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(4) .pd-nav-link { transition-delay: 415ms, 415ms, 0ms; }
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(5) .pd-nav-link { transition-delay: 480ms, 480ms, 0ms; }
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(6) .pd-nav-link { transition-delay: 545ms, 545ms, 0ms; }
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(7) .pd-nav-link { transition-delay: 610ms, 610ms, 0ms; }
.pd-header.pd-mobile-menu-open .pd-nav .pd-nav-layer--root .pd-nav-item:nth-child(n+8) .pd-nav-link { transition-delay: 675ms, 675ms, 0ms; }

html.pd-gsap .pd-header .pd-nav .pd-nav-link { transition-delay: 0ms !important; }

/* O sublinhado que corre por baixo do texto no hover. */
.pd-header .pd-nav .pd-nav-text {
	position: relative;
	display: inline-block;
}

.pd-header .pd-nav .pd-nav-text::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 1px;
	background: currentColor;
	opacity: .55;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 460ms cubic-bezier(.16, 1, .3, 1);
}

.pd-header .pd-nav .pd-nav-link:hover .pd-nav-text::after,
.pd-header .pd-nav .pd-nav-link:focus-visible .pd-nav-text::after,
.pd-header .pd-nav .pd-submenu-open>.pd-nav-mask>.pd-nav-link .pd-nav-text::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.pd-header .pd-nav .pd-nav-link:hover,
.pd-header .pd-nav .pd-nav-link:focus {
	color: #2c5a3c;
	background: transparent !important;
}

.pd-header .pd-nav .pd-nav-link:focus-visible {
	outline: 2px solid rgba(6, 73, 63, .4);
	outline-offset: 6px;
}

/* O ícone de seta dos itens com submenu.
   O SVG aponta para baixo; no painel lateral roda para a direita, que é
   o sentido em que o menu abre. Depois de rotate(-90deg) o eixo Y local
   passa a apontar para a direita do ecrã — daí o translateY no hover. */
.pd-header .pd-nav .pd-nav-chevron {
	display: inline-flex;
	width: 12px;
	height: 12px;
	margin-left: 9px;
	align-items: center;
	justify-content: center;
	color: #2c5a3c;
	line-height: 1;
	opacity: .45;
	transform: rotate(-90deg);
	transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity 240ms ease;
}

.pd-header .pd-nav .pd-nav-chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pd-header .pd-nav .pd-nav-link:hover .pd-nav-chevron,
.pd-header .pd-nav .pd-nav-link:focus .pd-nav-chevron {
	opacity: 1;
	transform: rotate(-90deg) translateY(6px);
}

/* ---------- Segundo nível ---------- */

.pd-header .pd-nav .pd-nav-layer--sub {
	z-index: 3;
	/* Exactamente o mesmo papel da folha — assim não se vê a emenda. */
	background: var(--pd-nav-paper, #dfeadd);
	visibility: hidden;
	pointer-events: none;
	clip-path: inset(0 0 0 100%);
	transition: clip-path 640ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 640ms;
}

.pd-header .pd-nav .pd-nav-layer--sub.is-open {
	visibility: visible;
	pointer-events: auto;
	clip-path: inset(0 0 0 0%);
	transition: clip-path 640ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s;
}

html.pd-gsap .pd-header .pd-nav .pd-nav-layer--sub {
	transition: none;
}

/* Camada interior do submenu — leva o mesmo deslize de paralaxe. */
.pd-header .pd-nav .pd-nav-subshift {
	display: block;
	width: 100%;
}

.pd-header .pd-nav .pd-nav-sub-head {
	display: block;
	margin: 0 0 18px;
	flex: 0 0 auto;
}

.pd-header .pd-nav .pd-nav-sub-title {
	display: block;
	padding-bottom: 14px;
	color: rgba(6, 73, 63, .52);
	font-family: var(--pd-font-sans);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.pd-header .pd-nav .pd-mobile-submenu-back {
	display: inline-flex;
	width: auto;
	min-height: 34px;
	margin: 0 0 4px;
	padding: 0 !important;
	align-items: center;
	gap: 8px;
	border: 0 !important;
	border-radius: 0 !important;
	color: rgba(6, 73, 63, .78);
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--pd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color 220ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.pd-header .pd-nav .pd-mobile-submenu-back:hover,
.pd-header .pd-nav .pd-mobile-submenu-back:focus {
	color: var(--pd-color-green, #06493f);
	background: transparent !important;
	transform: translateX(-5px);
}

.pd-header .pd-nav .pd-mobile-submenu-back:focus-visible {
	outline: 2px solid rgba(6, 73, 63, .4);
	outline-offset: 5px;
}

.pd-header .pd-nav .pd-nav-list--sub .pd-nav-link {
	min-height: 46px;
	font-size: clamp(18px, 1.7vw, 22px) !important;
}

/* Reserva sem GSAP para os links do submenu. */
.pd-header .pd-nav .pd-nav-layer--sub.is-open .pd-nav-link {
	transform: translateY(0);
	opacity: 1;
}

.pd-header .pd-nav .pd-nav-layer--sub.is-open .pd-nav-item:nth-child(1) .pd-nav-link { transition-delay: 200ms, 200ms, 0ms; }
.pd-header .pd-nav .pd-nav-layer--sub.is-open .pd-nav-item:nth-child(2) .pd-nav-link { transition-delay: 255ms, 255ms, 0ms; }
.pd-header .pd-nav .pd-nav-layer--sub.is-open .pd-nav-item:nth-child(3) .pd-nav-link { transition-delay: 310ms, 310ms, 0ms; }
.pd-header .pd-nav .pd-nav-layer--sub.is-open .pd-nav-item:nth-child(4) .pd-nav-link { transition-delay: 365ms, 365ms, 0ms; }
.pd-header .pd-nav .pd-nav-layer--sub.is-open .pd-nav-item:nth-child(5) .pd-nav-link { transition-delay: 420ms, 420ms, 0ms; }
.pd-header .pd-nav .pd-nav-layer--sub.is-open .pd-nav-item:nth-child(n+6) .pd-nav-link { transition-delay: 475ms, 475ms, 0ms; }

/* ---------- Rodapé do painel ---------- */

.pd-header .pd-nav .pd-nav-foot {
	display: block;
	flex: 0 0 auto;
	padding: 22px clamp(26px, 8%, 44px) 0;
}

.pd-header .pd-nav .pd-nav-foot-inner {
	display: block;
	padding-top: 18px;
	border-top: 1px solid rgba(6, 73, 63, .14);
}

.pd-header .pd-nav .pd-nav-foot-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(6, 73, 63, .8);
	background: transparent !important;
	font-family: var(--pd-font-sans) !important;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: .16em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 220ms ease, gap 320ms cubic-bezier(.16, 1, .3, 1);
}

.pd-header .pd-nav .pd-nav-foot-link:hover,
.pd-header .pd-nav .pd-nav-foot-link:focus {
	color: var(--pd-color-green, #06493f);
	gap: 15px;
}

.pd-header .pd-nav .pd-nav-foot-link:focus-visible {
	outline: 2px solid rgba(6, 73, 63, .4);
	outline-offset: 5px;
}

/* ---------- Véu por trás do painel ---------- */

.pd-nav-overlay {
	position: fixed;
	z-index: 9999;
	inset: 0;
	background: rgba(6, 73, 63, .28);
	opacity: 0;
	transition: opacity 520ms ease;
}

@media (min-width: 769px) {
	.pd-nav-overlay {
		background: rgba(6, 73, 63, .06);
	}
}

.pd-nav-overlay[hidden] {
	display: none;
}

.pd-header.pd-mobile-menu-open .pd-nav-overlay {
	opacity: 1;
}

html.pd-gsap .pd-nav-overlay {
	transition: none;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1024px) {
	.pd-header .pd-header-inner {
		min-height: 72px;
		padding-top: 10px;
		padding-bottom: 10px;
		gap: 14px;
	}

	.pd-logo img,
	.pd-logo svg {
		width: 145px;
	}

	.pd-header-actions {
		gap: 22px;
	}

	.pd-header-action-icon {
		width: 28px;
		height: 28px;
	}

	.pd-header-search {
		padding: 0 20px 14px;
	}

	/* A barra cresce sempre a partir do zero; aqui só se limita o destino,
	   para nunca chegar ao pé da logótipo. */
	.pd-header.pd-search-open .pd-header-search-form {
		width: min(320px, calc(100vw - 205px));
	}
}

@media (max-width: 768px) {
	.pd-header .pd-nav {
		width: min(86vw, 430px);
		max-width: calc(100% - 42px);
	}

	.pd-header.pd-search-open .pd-header-search-form {
		width: min(360px, calc(100vw - 195px));
		padding-bottom: 7px;
	}

	.pd-header-search-form input[type="search"] {
		height: 28px;
		font-size: 15px;
	}

	.pd-header-search-form .pd-search-submit {
		width: 22px;
		height: 22px;
	}

	.pd-header-search-form {
		gap: 8px;
	}

	.pd-header-search-results {
		top: calc(100% + 12px);
		width: min(380px, calc(100vw - 40px));
		border-radius: 14px;
	}
}

/*
 * Abaixo dos 600px a logótipo fica sempre à vista e a barra ocupa apenas
 * o espaço que sobra à direita dela, com folga.
 */
@media (max-width: 600px) {
	/* Os ícones maiores são só para desktop e tablet. */
	.pd-header-action-icon {
		width: 26px;
		height: 26px;
	}

	.pd-header.pd-search-open .pd-header-search-form {
		width: min(230px, calc(100vw - 190px));
	}

	.pd-header-search-results {
		width: min(330px, calc(100vw - 40px));
	}
}

@media (max-width: 420px) {
	.pd-logo img,
	.pd-logo svg {
		width: 125px;
	}

	.pd-header-actions {
		gap: 16px;
	}

	.pd-header .pd-nav {
		width: 90vw;
		max-width: calc(100% - 28px);
	}

	.pd-header .pd-nav .pd-nav-layer {
		padding: 8px 24px;
	}

	.pd-header .pd-nav .pd-nav-head {
		padding: 0 24px 16px;
	}

	.pd-header .pd-nav .pd-nav-foot {
		padding: 18px 24px 0;
	}

	.pd-header .pd-nav .pd-nav-link {
		min-height: 46px;
		font-size: clamp(19px, 5.6vw, 23px) !important;
	}

	.pd-header .pd-nav .pd-nav-list--sub .pd-nav-link {
		min-height: 42px;
		font-size: clamp(17px, 5vw, 20px) !important;
	}

	.pd-header-search {
		padding: 0 16px 12px;
	}

	.pd-header.pd-search-open .pd-header-search-form {
		width: min(200px, calc(100vw - 190px));
	}

	.pd-header-search-form input[type="search"] {
		height: 26px;
		font-size: 14px;
	}

	.pd-header-search-form .pd-search-submit {
		width: 20px;
		height: 20px;
	}

	.pd-header-search-results {
		width: calc(100vw - 32px);
	}
}

/* ============================================================
   MENU HORIZONTAL (DESKTOP, >= 1025px)
   ------------------------------------------------------------
   A partir daqui o painel lateral desaparece e o mesmo markup
   passa a ser uma barra: logo à esquerda, menu ao centro-direita,
   lupa no extremo direito.

   O submenu abre ao passar o rato, num painel de vidro fosco.
   Como no markup o `.pd-nav-layer--sub` é irmão do `--root` (e
   não filho do <li>), o alinhamento horizontal vem do JS através
   da variável `--pd-sub-left`. Sem o JS, o painel encosta à
   esquerda do menu — funciona na mesma, só não fica alinhado.
   ============================================================ */

@media (min-width: 1025px) {

	/* ---- A barra ---- */

	/* A barra branca ocupa a largura toda; o conteúdo fica dentro do
	   .pd-container. Como o <nav> já vive dentro do .pd-header-inner,
	   basta pô-lo a distribuir: logo | menu ........ lupa. */
	.pd-header .pd-header-inner {
		justify-content: flex-start;
		gap: 26px;
	}

	.pd-header .pd-nav {
		margin-left: auto;
	}

	.pd-header .pd-header-actions {
		align-items: center;
		gap: 0;
	}

	/* O hambúrguer sai: no desktop o menu está todo à vista. */
	.pd-header .pd-header-actions>.pd-header-action:not(.pd-search-toggle) {
		display: none;
	}

	/* Sem rótulo por baixo, a lupa alinha pelo centro da linha do menu.
	   O padding a zero tira o desvio óptico para dentro que fazia a lupa
	   parecer mais afastada da margem direita do que a logo da esquerda. */
	.pd-header .pd-header-actions .pd-search-toggle {
		align-self: center;
		margin-left: 0;
		padding: 0;
		/* O viewBox da lupa é "-10 -10 92 92" para um desenho de 68×68,
		   ou seja tem ~15% de folga interior à direita. Sem esta
		   compensação a lupa parece mais afastada da margem do que a
		   logo está da dela. */
		margin-right: -4px;
	}

	.pd-header .pd-header-action-icon {
		width: 26px;
		height: 26px;
	}

	/* Com a pesquisa aberta, o menu apaga-se para a barra não se cruzar. */
	.pd-header.pd-search-open .pd-nav {
		opacity: 0;
		pointer-events: none;
		transition: opacity 220ms ease;
	}

	/* ---- Desmontar o painel lateral ---- */

	.pd-header .pd-nav {
		position: static;
		z-index: auto;
		width: auto;
		max-width: none;
		height: auto;
		background: transparent;
		pointer-events: auto;
		visibility: visible;
		overflow: visible;
		transition: opacity 220ms ease;
	}

	.pd-header .pd-nav .pd-nav-sheet {
		display: block;
		height: auto;
		overflow: visible;
		background: transparent;
		clip-path: none !important;
		transition: none;
	}

	.pd-header .pd-nav .pd-nav-sheet::before {
		display: none;
	}

	.pd-header .pd-nav .pd-nav-shift {
		display: block;
		height: auto;
		padding: 0;
	}

	/* Cabeçalho ("MENU" + ×) e rodapé do painel não existem na barra. */
	.pd-header .pd-nav .pd-nav-head,
	.pd-header .pd-nav .pd-nav-foot,
	.pd-header .pd-nav .pd-nav-sub-head {
		display: none;
	}

	.pd-header .pd-nav .pd-nav-stage {
		position: relative;
		flex: none;
		min-height: 0;
		overflow: visible;
	}

	.pd-header .pd-nav .pd-nav-layer--root {
		position: static;
		display: block;
		padding: 0;
		overflow: visible;
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto;
		transition: none;
	}

	/* ---- A lista passa a linha ---- */

	/* Só o PRIMEIRO nível passa a linha. A lista do submenu fica
	   empilhada, um item por linha. */
	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-list {
		display: flex;
		align-items: center;
		gap: 2px;
		width: auto;
	}

	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-item {
		width: auto;
		flex: 0 0 auto;
	}

	.pd-header .pd-nav .pd-nav-list--sub {
		display: block;
		width: 100%;
	}

	.pd-header .pd-nav .pd-nav-list--sub .pd-nav-item {
		display: block;
		width: 100%;
	}

	.pd-header .pd-nav .pd-nav-rule {
		display: none;
	}

	.pd-header .pd-nav .pd-nav-mask {
		width: auto;
		padding: 0;
		overflow: visible;
	}

	/* ---- Os itens da barra ---- */

	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-link {
		width: auto;
		min-height: 0;
		padding: 11px 18px !important;
		border-radius: var(--pd-nav-pill-radius, 9px) !important;
		color: rgba(6, 73, 63, .86);
		font-family: var(--pd-font-sans) !important;
		font-size: 17px !important;
		font-weight: 500;
		line-height: 1.2;
		letter-spacing: 0;
		white-space: nowrap;
		transform: none !important;
		opacity: 1 !important;
		/* !important porque `html.pd-gsap .pd-nav-link` tem especificidade
		   (0,4,1) e, sem isto, apaga a transição do fundo no hover. */
		transition: background-color 220ms ease, color 220ms ease !important;
		transition-delay: 0ms !important;
	}


	/* A pílula: fundo arredondado no item sob o rato, que se mantém
	   enquanto o submenu estiver aberto. */
	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-link:hover,
	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-link:focus-visible,
	.pd-header .pd-nav .pd-nav-item.is-desktop-open>.pd-nav-mask>.pd-nav-link {
		color: var(--pd-color-green, #06493f);
		background: rgba(6, 73, 63, .07) !important;
	}

	/* Na barra a pílula substitui o sublinhado. */
	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-text::after {
		display: none;
	}

	/* O » aponta para baixo, como um caret. */
	/* Na barra a seta aponta para baixo: desce ao entrar o rato,
	   sobe outra vez ao sair. */
	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-chevron {
		width: 13px;
		height: 13px;
		margin-left: 8px;
		color: currentColor;
		opacity: .6;
		transform: rotate(0deg) translateY(0);
		transition: opacity 240ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1) !important;
	}

	.pd-header .pd-nav .pd-nav-item.has-submenu:hover .pd-nav-chevron,
	.pd-header .pd-nav .pd-nav-layer--root .pd-nav-link:focus-visible .pd-nav-chevron,
	.pd-header .pd-nav .pd-nav-item.is-desktop-open>.pd-nav-mask>.pd-nav-link .pd-nav-chevron {
		opacity: 1;
		transform: rotate(0deg) translateY(4px);
	}

	/* ---- O painel de vidro fosco ---- */

	.pd-header .pd-nav .pd-nav-layer--sub {
		position: absolute;
		inset: auto;
		top: calc(100% + 14px);
		left: var(--pd-sub-left, 0px);
		z-index: 30;
		display: block;
		width: max-content;
		min-width: 232px;
		max-width: 320px;
		max-height: min(66vh, 460px);
		padding: 10px;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid rgba(255, 255, 255, .6);
		border-radius: 18px;
		background: rgba(252, 253, 252, .72);
		-webkit-backdrop-filter: blur(22px) saturate(180%);
		backdrop-filter: blur(22px) saturate(180%);
		box-shadow:
			0 2px 6px rgba(6, 73, 63, .06),
			0 24px 60px rgba(6, 73, 63, .20);
		clip-path: none !important;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-8px) scale(.98);
		transform-origin: 20% 0;
		/* !important porque `html.pd-gsap .pd-nav-layer--sub { transition: none }`
		   tem especificidade (0,4,1) e, sem isto, o painel aparece de repente,
		   sem o esbatimento. */
		transition:
			opacity 240ms ease,
			transform 360ms cubic-bezier(.16, 1, .3, 1),
			visibility 0s linear 360ms !important;
	}

	/* Sem suporte a backdrop-filter (Firefox antigo), cai para opaco
	   em vez de ficar um retângulo translúcido ilegível. */
	@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		.pd-header .pd-nav .pd-nav-layer--sub {
			background: #fbfdfb;
		}
	}

	/* A ponte de hover: uma faixa invisível a cobrir o intervalo entre o
	   item e o painel, para o submenu não fechar a meio do percurso. */
	.pd-header .pd-nav .pd-nav-layer--sub::before {
		content: "";
		position: absolute;
		top: -18px;
		right: 0;
		left: 0;
		height: 18px;
	}

	/* Aberto por JS (preferido) ou, sem JS, por :has() no hover/foco.
	   O :has() só distingue um submenu; o JS trata de vários. */
	.pd-header .pd-nav .pd-nav-layer--sub.is-desktop-open,
	.pd-header .pd-nav .pd-nav-stage:has(.pd-nav-item.has-submenu:hover) .pd-nav-layer--sub,
	.pd-header .pd-nav .pd-nav-stage:has(.pd-submenu-trigger:focus-visible) .pd-nav-layer--sub,
	.pd-header .pd-nav .pd-nav-layer--sub:hover,
	.pd-header .pd-nav .pd-nav-layer--sub:focus-within {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0) scale(1);
		transition:
			opacity 220ms ease,
			transform 380ms cubic-bezier(.16, 1, .3, 1),
			visibility 0s linear 0s !important;
	}

	/* O `is-open` é do drawer; na barra não deve fazer nada. */
	.pd-header .pd-nav .pd-nav-layer--sub.is-open {
		clip-path: none !important;
	}

	/* A esbatida para o fundo do painel — o que lhe dá o ar flutuante. */
	.pd-header .pd-nav .pd-nav-layer--sub .pd-nav-list--sub {
		-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0, 0, 0, .35) 100%);
		mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0, 0, 0, .35) 100%);
	}

	.pd-header .pd-nav .pd-nav-layer--sub .pd-nav-list--sub .pd-nav-link {
		display: block;
		width: 100%;
		min-height: 0;
		padding: 12px 14px !important;
		border-radius: var(--pd-nav-pill-radius, 9px) !important;
		color: var(--pd-color-green, #06493f);
		font-family: var(--pd-font-sans) !important;
		font-size: 16px !important;
		font-weight: 500;
		line-height: 1.3;
		letter-spacing: 0;
		white-space: normal;
		transform: none !important;
		opacity: 1 !important;
		transition: background-color 160ms ease, color 160ms ease;
		transition-delay: 0ms !important;
	}

	.pd-header .pd-nav .pd-nav-layer--sub .pd-nav-list--sub .pd-nav-link:hover,
	.pd-header .pd-nav .pd-nav-layer--sub .pd-nav-list--sub .pd-nav-link:focus-visible {
		color: var(--pd-color-green, #06493f);
		background: rgba(6, 73, 63, .07) !important;
	}

	.pd-header .pd-nav .pd-nav-layer--sub .pd-nav-text::after {
		display: none;
	}

	/* ---- Segurança: o drawer nunca se abre no desktop ----
	   Evita ficar um painel lateral preso por cima da barra quando
	   a janela é redimensionada com o menu aberto. */

	html.pd-mobile-menu-lock,
	body.pd-mobile-menu-lock {
		overflow: visible !important;
	}

	html.pd-mobile-menu-lock {
		padding-right: 0 !important;
	}

	.pd-nav-overlay {
		display: none !important;
	}

	.pd-header.pd-mobile-submenu-view .pd-nav .pd-nav-layer--root {
		pointer-events: auto;
		transform: none !important;
		opacity: 1 !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	html,
	.pd-header-action,
	.pd-header .pd-nav,
	.pd-header .pd-nav .pd-nav-sheet,
	.pd-header .pd-nav .pd-nav-close,
	.pd-header .pd-nav .pd-nav-rule,
	.pd-header .pd-nav .pd-nav-link,
	.pd-header .pd-nav .pd-nav-text::after,
	.pd-header .pd-nav .pd-nav-chevron,
	.pd-header .pd-nav .pd-nav-layer--sub,
	.pd-header .pd-nav .pd-mobile-submenu-back,
	.pd-header .pd-nav .pd-nav-foot-link,
	.pd-burger-bar,
	.pd-nav-overlay {
		transition: none !important;
		animation: none !important;
		transition-delay: 0ms !important;
	}
}