/**
 * Pulse — Secções / Blocos · v1.3.0
 * ----------------------------------------------------------------------------
 * Tema ESCURO cinematográfico (estilo rimac-technology.com): fundo quase-preto,
 * secções full-bleed, tipografia grande, cartões "glass", hero com vídeo.
 *
 * NOTAS DE ENGENHARIA
 * - Todas as classes do render PHP foram MANTIDAS — só re-estilizadas.
 * - Especificidade deliberadamente alta (`section.pulse-sec .classe`) para
 *   vencer o main.css do tema sem usar seletores globais (nada fora de
 *   .pulse-sec é tocado, exceto o body:has() abaixo, que só dispara em
 *   páginas que contêm secções Pulse).
 * - Full-bleed sem scroll horizontal: 100vw inclui a scrollbar, por isso
 *   cortamos o excesso com overflow-x: clip no body (scoped via :has()).
 * - O ficheiro é servido com ?ver=filemtime() → cada alteração fura a cache.
 *
 * SISTEMA DE BREAKPOINTS (v1.3 — unificado, era ad-hoc 520/540/560/680/760/860/900)
 *   ≤380px    micro-telemóvel: padding mínimo, títulos comprimidos
 *   ≤480px    telemóvel pequeno: padding compacto, botões/pills a caber, alvos ≥44px
 *   ≤640px    grelhas → 1 coluna (cartões, notícias, valores, colunas de marca)
 *   ≤820px    telemóvel/tablet-portrait: media+acordeão empilham · SCROLL-SNAP ativo
 *   ≤1024px   tablet: grelhas de 3–4 colunas → 2 colunas
 *   1025–1679 laptop/desktop: layout cheio (base, sem media query)
 *   ≥1680px   desktop largo: container 96rem
 *   ≥1920px   full-hd+: container 104rem, tipografia base sobe ligeiramente
 *   ≥2560px   ultra-wide: container 118rem, gaps maiores
 * A tipografia é fluida (clamp com componente vw) de 320px a ~2560px; títulos
 * multiplicam SEMPRE por var(--text-scale, 1) dentro de calc().
 */

/* ============================================================================
 * PÁGINA — só quando existem secções Pulse
 * ========================================================================== */
body:has(.pulse-sec) {
	background: #060613;
	overflow-x: clip; /* corta o excesso do truque 100vw (largura da scrollbar) */
}
.pulse-blocks-page {
	background: #060613;
	overflow-x: clip;
}

/* ============================================================================
 * HERO COLADO AO TOPO
 * O tema (content.php) mete o título "Início" (h1.entry-title) e wrappers
 * acima do conteúdo. Em páginas com um Hero Pulse, escondemos o título e
 * zeramos o espaço acima → o hero fica no topo, com a nav fixa por cima.
 * (Scoped via :has() → não afeta o resto do site.)
 * ========================================================================== */
body:has(.pulse-sec--hero) .default-content > .container-fluid > .row > .col-lg-8 > header,
body:has(.pulse-sec--hero) .entry-title { display: none !important; }
body:has(.pulse-sec--hero) { padding-top: 0 !important; }
body:has(.pulse-sec--hero) main#page,
body:has(.pulse-sec--hero) .page-body,
body:has(.pulse-sec--hero) .pulse-blocks-page,
body:has(.pulse-sec--hero) .default-content,
body:has(.pulse-sec--hero) .default-content > .container-fluid,
body:has(.pulse-sec--hero) .default-content .row,
body:has(.pulse-sec--hero) .default-content .col-lg-8,
body:has(.pulse-sec--hero) .entry-content { padding-top: 0 !important; margin-top: 0 !important; }
body:has(.pulse-sec--hero) .entry-content > :first-child,
body:has(.pulse-sec--hero) .pulse-blocks-page > :first-child { margin-top: 0 !important; }
/* <p> vazios do wpautop antes/entre secções criariam uma faixa no topo. */
body:has(.pulse-sec--hero) .entry-content > p:empty { display: none !important; }
/* O tema dá margin-block ao .alignfull dentro de .entry-content — o hero
   tem de encostar a y=0 mesmo que não seja o :first-child literal. */
body:has(.pulse-sec--hero) .pulse-sec--hero { margin-top: 0 !important; }
/* Secções Pulse coladas entre si (sem faixas de fundo entre .alignfull). */
body:has(.pulse-sec) .entry-content > section.pulse-sec,
.pulse-blocks-page section.pulse-sec { margin-block: 0 !important; }
/* Nav fixa transparente por cima do hero (estilo Rimac) */
body:has(.pulse-sec--hero) .site-header { background: transparent !important; box-shadow: none !important; border: 0 !important; }

/* ============================================================================
 * SECÇÃO BASE — full-bleed + tokens
 * ========================================================================== */
section.pulse-sec,
.pulse-sec {
	--bg:      #060613;
	--bg2:     #0b0b20;
	--bg3:     #101028;
	--ink:     #eef0fb;
	--muted:   rgba(238, 240, 251, .62);
	--head:    #ffffff;
	--eyebrow: #99a0f5;
	--accent:  #4c56e0;
	--line:    rgba(255, 255, 255, .10);
	--line-2:  rgba(255, 255, 255, .30);
	--glass:   rgba(255, 255, 255, .045);
	--glass-2: rgba(255, 255, 255, .09);
	--pill:    999px;
	--soft-r:  18px;
	--ease:    cubic-bezier(.2, .7, .2, 1);
	--maxw:    84rem;

	/* Ritmo responsivo (fluido 320→2560; overrides nos breakpoints no fim) */
	--pad-x:   clamp(1.125rem, .25rem + 4vw, 4.5rem);   /* padding lateral do container */
	--gap:     clamp(1rem, .7rem + .9vw, 1.7rem);       /* gap padrão de grelhas */
	--gap-lg:  clamp(2rem, .9rem + 3.4vw, 5.5rem);      /* gap de splits texto+imagem */

	/* Full-bleed: sai da coluna do tema e ocupa o viewport inteiro. */
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);

	box-sizing: border-box;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--pulse-font-sans, "Questrial", system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
	padding-block: clamp(3.25rem, 2.25rem + 5vw, 7rem);
	overflow: hidden;
}

/* Alinhamentos do editor (alignfull/alignwide) não podem re-encaixotar. */
section.pulse-sec.alignfull,
section.pulse-sec.alignwide {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

section.pulse-sec *,
section.pulse-sec *::before,
section.pulse-sec *::after { box-sizing: border-box; }

/* Neutraliza estilos globais de imagem do tema (círculos, sombras, molduras). */
section.pulse-sec img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
	border-radius: 0;
	clip-path: none;
	box-shadow: none;
}

.pulse-sec .pulse-sec__container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}
.pulse-sec .pulse-sec__container--narrow { max-width: 56rem; }

/* ---- Anti-overflow: itens de grelha nunca forçam scroll horizontal ---- */
.pulse-sec .pulse-media > *,
.pulse-sec .pulse-cards > *,
.pulse-sec .pulse-news > *,
.pulse-sec .pulse-values > *,
.pulse-sec .pulse-pills > *,
.pulse-sec .pulse-brand__cols > *,
.pulse-sec .pulse-acc__inner--has-img > * { min-width: 0; }

/* ---- Tipografia ---- */
/* --pap-t-e/-eb/-lh/-maxw: multiplicadores do Sistema de Aparência
   (aparencia.php), inline no elemento; sem eles, 1/valor de sempre. */
.pulse-sec .pulse-sec__heading {
	color: var(--head);
	font-family: inherit;
	font-size: calc(clamp(1.9rem, 1.38rem + 2.6vw, 4rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	line-height: calc(1.04 * var(--pap-t-lh, 1));
	font-weight: 400;
	letter-spacing: -.02em;
	margin: 0 0 clamp(1.4rem, 1rem + 1.8vw, 2.5rem);
	max-width: var(--pap-t-maxw, 26ch);
	text-wrap: balance;
	overflow-wrap: break-word;
}
.pulse-sec .pulse-sec__label {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	font-size: calc(clamp(.72rem, .68rem + .22vw, .95rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: .22em;
	color: var(--eyebrow);
	margin: 0 0 clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
}
.pulse-sec .pulse-sec__label::before {
	content: "";
	width: 2.4rem;
	height: 1px;
	background: currentColor;
	opacity: .8;
}

.pulse-sec .pulse-sec__prose {
	font-size: calc(clamp(1rem, .93rem + .35vw, 1.3rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	line-height: calc(1.75 * var(--pap-t-lh, 1));
	color: var(--muted);
	max-width: var(--pap-t-maxw, 65ch);
}
.pulse-sec .pulse-sec__prose > :first-child { margin-top: 0; }
.pulse-sec .pulse-sec__prose > :last-child { margin-bottom: 0; }
.pulse-sec .pulse-sec__prose p { margin: 0 0 1em; color: inherit; }
.pulse-sec .pulse-sec__prose ul,
.pulse-sec .pulse-sec__prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.pulse-sec .pulse-sec__prose li { margin: 0 0 .4em; }
.pulse-sec .pulse-sec__prose li::marker { color: var(--eyebrow); }
.pulse-sec .pulse-sec__prose a { color: #b9bdfa; text-decoration: underline; text-underline-offset: 3px; }
.pulse-sec .pulse-sec__prose a:hover { color: #fff; }
.pulse-sec .pulse-sec__prose strong { color: var(--ink); }
.pulse-sec .pulse-sec__prose h3,
.pulse-sec .pulse-sec__prose h4 { color: var(--head); font-weight: 400; letter-spacing: -.01em; margin: 1.4em 0 .5em; }

.pulse-sec ::selection { background: rgba(76, 86, 224, .55); color: #fff; }
.pulse-sec :focus-visible { outline: 2px solid var(--eyebrow); outline-offset: 3px; }

/* ============================================================================
 * HERO — cinematográfico, altura de ecrã, vídeo/imagem de fundo
 * BUGFIX: era `.pulse-sec--hero` (0,1,0) e perdia para o padding-block da base
 * `section.pulse-sec` (0,1,1) → o hero ficava com ~104px de padding no topo
 * (a "margem" escura vista no site). `section.pulse-sec.pulse-sec--hero`
 * (0,2,1) ganha à base em qualquer espaçamento (sm/md/lg).
 * ========================================================================== */
section.pulse-sec.pulse-sec--hero,
.pulse-sec--hero {
	padding: 0 !important;
	background: #04040d;
	/* Alturas do campo "Altura": por defeito o hero preenche o ecrã à chegada
	   (100svh). "Natural" repõe o comportamento antigo — o PHP emite
	   --hero-min-h:var(--hero-h-natural) inline no wrapper. As duas variáveis
	   vivem AQUI (na secção) para o var() inline resolver no próprio elemento. */
	--hero-h-full: 100svh;
	--hero-h-natural: clamp(540px, 96svh, 1040px);
}
/* Fallback vh — dupla declaração não serve para custom properties (a última
   ganha sempre, sem validação de unidade), por isso é via @supports. */
@supports not (height: 100svh) {
	section.pulse-sec.pulse-sec--hero,
	.pulse-sec--hero {
		--hero-h-full: 100vh;
		--hero-h-natural: clamp(540px, 96vh, 1040px);
	}
}

.pulse-sec .pulse-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: var(--hero-min-h, var(--hero-h-full, 100vh));
	display: flex;
	align-items: flex-end;
	background: #04040d;
}
/* O <picture> do render flexível não tem classe — cobre os dois markups. */
.pulse-sec .pulse-hero picture,
.pulse-sec .pulse-hero .pulse-hero__media,
.pulse-sec .pulse-hero .pulse-hero__video,
.pulse-sec .pulse-hero img.pulse-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	border-radius: 0 !important;
	clip-path: none !important;
}
/* Gradação cinematográfica — aplica-se mesmo sem o elemento .pulse-hero__scrim */
.pulse-sec .pulse-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(4, 4, 13, .42) 0%,
		rgba(4, 4, 13, 0) 22%,
		rgba(4, 4, 13, 0) 56%,
		rgba(4, 4, 13, .72) 100%
	);
}
.pulse-sec .pulse-hero .pulse-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(120% 90% at 72% 18%, rgba(76, 86, 224, .16), transparent 62%);
}
.pulse-sec .pulse-hero .pulse-hero__overlay {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding: clamp(1.75rem, 1.2rem + 2.5vw, 4rem) var(--pad-x) clamp(2.25rem, 1.5rem + 3.5vw, 5rem);
}
.pulse-sec .pulse-hero .pulse-hero__title {
	color: #fff;
	margin: 0;
	/* --hero-text-w (campo "Largura do texto"): % da largura útil para o bloco
	   título+subtexto; sem valor, mantém as larguras em ch de sempre. */
	max-width: var(--hero-text-w, 15ch);
	font-family: inherit;
	/* --hero-title-scale multiplica o clamp fluido (como o --text-scale) — o
	   tamanho continua responsivo, só muda a escala. */
	font-size: calc(clamp(2.4rem, 1.44rem + 4.8vw, 7.25rem) * var(--text-scale, 1) * var(--hero-title-scale, 1));
	/* --pap-t-lh (Sistema de Aparência, FASE 2A): multiplica a altura de linha. */
	line-height: calc(.98 * var(--pap-t-lh, 1));
	font-weight: 400;
	letter-spacing: -.03em;
	text-wrap: balance;
	overflow-wrap: break-word;
	text-shadow: 0 2px 50px rgba(0, 0, 0, .55);
	animation: pulse-rise .9s var(--ease) both;
}
@keyframes pulse-rise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}

/* Subtexto do hero — lead mais leve por baixo do título. Cores FIXAS (não
   tokens): o hero mantém o tratamento escuro também no tema claro (AUDIT),
   e --muted no claro vira tinta escura — ilegível sobre foto/vídeo. */
.pulse-sec .pulse-hero .pulse-hero__subtitle {
	margin: 0;
	max-width: var(--hero-text-w, 46ch);
	font-family: inherit;
	font-size: calc(clamp(1.02rem, .92rem + .5vw, 1.4rem) * var(--text-scale, 1) * var(--hero-sub-scale, 1));
	line-height: calc(1.6 * var(--pap-t-lh, 1));
	font-weight: 400;
	color: rgba(238, 240, 251, .82);
	text-wrap: pretty;
	overflow-wrap: break-word;
	text-shadow: 0 1px 28px rgba(0, 0, 0, .6);
	animation: pulse-rise .9s .18s var(--ease) both; /* entra logo a seguir ao título */
}
/* Separação título/subtexto: o traço accent — a assinatura das secções Pulse
   (cf. .pulse-sec__label::before) — a desvanecer para a direita. Fica no
   ::before do subtexto: sem subtexto não há traço nem espaço extra. */
.pulse-sec .pulse-hero .pulse-hero__subtitle::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	border-radius: 999px;
	/* --hero-rule (campo "Cor do traço"): desvanece para transparente — os
	   gradientes interpolam em alfa pré-multiplicado, sem passagem por cinza. */
	background: linear-gradient(90deg, var(--hero-rule, #99a0f5), transparent);
	/* --hero-gap (campo "Espaço título–subtexto"): multiplica os dois respiros
	   fluidos à volta do traço; 1 (ou sem valor) = atual. */
	margin: calc(clamp(1.05rem, .75rem + 1.4vw, 1.9rem) * var(--hero-gap, 1)) 0 calc(clamp(.85rem, .65rem + .9vw, 1.3rem) * var(--hero-gap, 1));
}
/* Alinhamento ao centro (controlo "Alinhamento"): título, subtexto e traço
   acompanham. NOTA: precisa do .pulse-hero no meio — com menos um seletor de
   classe estas regras perdiam para a base (0,3,x) e ficavam mortas. */
.pulse-sec--align-center .pulse-hero .pulse-hero__title,
.pulse-sec--align-center .pulse-hero .pulse-hero__subtitle { margin-inline: auto; }
.pulse-sec--align-center .pulse-hero .pulse-hero__subtitle::before {
	margin-inline: auto;
	background: linear-gradient(90deg, transparent, var(--hero-rule, #99a0f5), transparent);
}
/* Com subtexto o bloco de texto é mais alto — o degradê de baixo começa mais
   cedo e escurece um pouco mais, para a legibilidade sobre a foto/vídeo. */
.pulse-sec .pulse-hero:has(.pulse-hero__subtitle)::after {
	background: linear-gradient(
		180deg,
		rgba(4, 4, 13, .42) 0%,
		rgba(4, 4, 13, 0) 22%,
		rgba(4, 4, 13, 0) 46%,
		rgba(4, 4, 13, .8) 100%
	);
}

/* Placeholder do hero (editor/inserter, sem média): passa a fundo absoluto —
   gradiente da marca por trás do overlay, com a dica centrada quando existe. */
.pulse-sec .pulse-hero .pulse-hero__placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	text-align: center;
	color: rgba(238, 240, 251, .5);
	background:
		radial-gradient(120% 90% at 72% 18%, rgba(76, 86, 224, .3), transparent 62%),
		linear-gradient(160deg, #0b0b20 0%, #04040d 72%);
}

/* ============================================================================
 * TEXTO + IMAGEM — inclui a correção da "imagem em círculo" vinda do tema
 * ========================================================================== */
.pulse-sec .pulse-media {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: var(--gap-lg);
	align-items: center;
}
.pulse-sec .pulse-media__img { position: relative; }
/* !important cirúrgico: o main.css do tema estava a transformar esta imagem
   num círculo com fundo cinzento. Só afeta imagens DENTRO de .pulse-media__img. */
.pulse-sec .pulse-media__img img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
	border-radius: var(--soft-r) !important;
	clip-path: none !important;
	object-fit: cover;
	border: 1px solid var(--line);
	background: transparent !important;
	filter: none !important;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .85);
}
.pulse-sec .pulse-media--img-left .pulse-media__text { order: 2; }
/* Placeholder de imagem (editor/inserter, sem attachment) — caixa glass
   tracejada em vez do antigo retângulo cinzento (#ecebf6) fora da paleta. */
.pulse-sec .pulse-media__ph {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: linear-gradient(160deg, var(--glass-2), var(--glass));
	border: 1px dashed var(--line-2);
	border-radius: var(--soft-r);
	color: var(--muted);
	font-size: .8rem;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ============================================================================
 * CARTÕES (serviços) — glass + hover com zoom
 * ========================================================================== */
.pulse-sec .pulse-cards {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(3, 1fr);
}
.pulse-sec .pulse-cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pulse-sec .pulse-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }

.pulse-sec .pulse-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--ink);
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: var(--soft-r);
	overflow: hidden;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.pulse-sec a.pulse-card:hover {
	transform: translateY(-8px);
	border-color: var(--line-2);
	background: var(--glass-2);
}
.pulse-sec .pulse-card .pulse-card__img,
.pulse-sec .pulse-card img.pulse-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.pulse-sec a.pulse-card:hover .pulse-card__img { transform: scale(1.045); }
.pulse-sec .pulse-card__title {
	padding: clamp(1.05rem, .9rem + .7vw, 1.4rem) clamp(1.1rem, .9rem + .9vw, 1.6rem);
	font-size: calc(clamp(1.1rem, .98rem + .55vw, 1.5rem) * var(--text-scale, 1));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	overflow-wrap: break-word;
}
.pulse-sec a.pulse-card .pulse-card__title::after {
	content: "\2192";
	color: var(--eyebrow);
	transition: transform .3s var(--ease);
}
.pulse-sec a.pulse-card:hover .pulse-card__title::after { transform: translateX(6px); }

/* ============================================================================
 * DOWNLOADS — cartões de documento (não pills soltos)
 * ========================================================================== */
.pulse-sec .pulse-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
	gap: 1rem;
}
.pulse-sec .pulse-pills li { margin: 0; }
.pulse-sec a.pulse-pill {
	display: flex;
	align-items: center;
	gap: 1.05rem;
	min-height: 4.6rem;
	background: var(--glass);
	color: #fff !important;
	border: 1px solid var(--line);
	border-radius: var(--soft-r);
	padding: 1.1rem 1.35rem;
	text-decoration: none !important;
	font-size: clamp(.98rem, .94rem + .25vw, 1.12rem);
	line-height: 1.3;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.pulse-sec a.pulse-pill::before {
	content: "\2193";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 12px;
	background: var(--accent);
	color: #fff;
	font-size: 1.15rem;
	box-shadow: 0 10px 26px -10px rgba(76, 86, 224, .8);
	transition: transform .3s var(--ease);
}
.pulse-sec a.pulse-pill:hover {
	transform: translateY(-4px);
	border-color: var(--line-2);
	background: var(--glass-2);
}
.pulse-sec a.pulse-pill:hover::before { transform: translateY(3px); }

/* ============================================================================
 * CTA — botão forte
 * ========================================================================== */
.pulse-sec--cta .pulse-sec__container { max-width: 58rem; }
.pulse-sec .pulse-cta { text-align: center; }
/* --pap-t-e/-eb/-lh/-maxw: multiplicadores do Sistema de Aparência (FASE 2A). */
.pulse-sec .pulse-cta__heading {
	color: var(--head);
	font-family: inherit;
	font-size: calc(clamp(1.9rem, 1.38rem + 2.6vw, 4rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: calc(1.05 * var(--pap-t-lh, 1));
	margin: 0 0 1rem;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.pulse-sec .pulse-cta__text {
	color: var(--muted);
	font-size: calc(clamp(1.05rem, .95rem + .5vw, 1.4rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	margin: 0 auto 2.5rem;
	max-width: var(--pap-t-maxw, 44rem);
	line-height: calc(1.65 * var(--pap-t-lh, 1));
}
.pulse-sec a.pulse-cta__btn,
.pulse-sec span.pulse-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .85rem;
	min-height: 3.25rem;
	background: #fff;
	color: #060613 !important;
	font-size: clamp(1rem, .95rem + .3vw, 1.3rem);
	text-decoration: none !important;
	border-radius: var(--pill);
	padding: 1.1rem 2.7rem;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
	box-shadow: 0 18px 50px -16px rgba(255, 255, 255, .35);
}
.pulse-sec a.pulse-cta__btn::after {
	content: "\2192";
	transition: transform .3s var(--ease);
}
.pulse-sec a.pulse-cta__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 60px -16px rgba(255, 255, 255, .5);
}
.pulse-sec a.pulse-cta__btn:hover::after { transform: translateX(5px); }

/* ============================================================================
 * BLOCOS DE CONTEÚDO — acordeão
 * ========================================================================== */
.pulse-sec .pulse-acc { list-style: none; margin: 0; padding: 0; }
.pulse-sec .pulse-acc__item { border-top: 1px solid var(--line); }
.pulse-sec .pulse-acc__item:last-child { border-bottom: 1px solid var(--line); }
.pulse-sec .pulse-acc__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 3rem;
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	text-align: left;
	color: #fff;
	/* --pap-t-e/-eb: multiplicadores do Sistema de Aparência (FASE 2B). */
	font-size: calc(clamp(1.15rem, .98rem + .8vw, 1.8rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	letter-spacing: -.01em;
	padding: clamp(1.1rem, .9rem + 1vw, 1.7rem) 0;
	transition: color .2s var(--ease);
}
.pulse-sec .pulse-acc__trigger:hover { color: var(--eyebrow); }
.pulse-sec .pulse-acc__icon {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	border: 1px solid var(--line-2);
	font-size: 1.1em;
	transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.pulse-sec .pulse-acc__item.is-open .pulse-acc__icon {
	transform: rotate(45deg);
	background: #fff;
	color: #060613;
	border-color: #fff;
}
.pulse-sec .pulse-acc__body {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height .45s var(--ease), opacity .3s ease;
}
.pulse-sec .pulse-acc--editor .pulse-acc__body { max-height: none; opacity: 1; }
.pulse-sec .pulse-acc__inner { padding: 0 0 clamp(1.4rem, 1rem + 1.8vw, 2.5rem); }
.pulse-sec .pulse-acc__inner--has-img {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	align-items: start;
}
.pulse-sec .pulse-acc__img img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;   /* formato controlado — não estica com imagens verticais */
	object-fit: cover !important;
	max-height: 24rem !important;
	border-radius: var(--soft-r) !important;
	clip-path: none !important;
	border: 1px solid var(--line);
}
.pulse-sec .pulse-acc__img { align-self: start; }

/* ============================================================================
 * VALORES — cartões glass
 * ========================================================================== */
.pulse-sec .pulse-values {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gap);
}
.pulse-sec .pulse-value {
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: var(--soft-r);
	padding: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem) clamp(1.2rem, 1rem + .9vw, 1.65rem);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: border-color .3s var(--ease), background .3s var(--ease);
}
.pulse-sec .pulse-value:hover { border-color: var(--line-2); background: var(--glass-2); }
.pulse-sec .pulse-value__title { color: #fff; font-size: calc(clamp(1.1rem, .98rem + .55vw, 1.45rem) * var(--text-scale, 1)); margin: 0 0 .6rem; overflow-wrap: break-word; }
/* --pap-t-e/-eb/-lh: multiplicadores do Sistema de Aparência (FASE 2A). */
.pulse-sec .pulse-value__text { color: var(--muted); margin: 0; line-height: calc(1.6 * var(--pap-t-lh, 1)); font-size: calc(clamp(.95rem, .9rem + .25vw, 1.08rem) * var(--pap-t-e, 1) * var(--pap-t-eb, 1)); }

/* ============================================================================
 * LOGÓTIPOS
 * ========================================================================== */
.pulse-sec .pulse-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.5rem, .75rem + 3.5vw, 4.5rem);
}
.pulse-sec .pulse-logo { display: inline-flex; text-decoration: none; }
.pulse-sec .pulse-logo .pulse-logo__img,
.pulse-sec img.pulse-logo__img {
	max-height: 52px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .6;
	transition: opacity .3s var(--ease);
}
.pulse-sec .pulse-logo:hover .pulse-logo__img { opacity: 1; }
/* Caixa-fantasma (editor/inserter, fila sem logótipo) — só emitida em preview. */
.pulse-sec .pulse-logo.pulse-logo--ph {
	width: clamp(88px, 10vw, 132px);
	height: 44px;
	border: 1px dashed var(--line-2);
	border-radius: 8px;
	background: var(--glass);
}

/* ============================================================================
 * MARCAS REPRESENTADAS — ficha em cartão glass
 * ========================================================================== */
.pulse-sec .pulse-brands { display: grid; gap: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); }
.pulse-sec .pulse-brand {
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: var(--soft-r);
	padding: clamp(1.4rem, 1rem + 2vw, 3rem);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.pulse-sec .pulse-brand img.pulse-brand__logo {
	max-height: 46px;
	width: auto;
	margin: 0 0 1.4rem;
	filter: brightness(0) invert(1);
	opacity: .92;
}
.pulse-sec .pulse-brand__tagline {
	color: #fff;
	font-family: inherit;
	font-size: calc(clamp(1.35rem, 1.05rem + 1.5vw, 2.3rem) * var(--text-scale, 1));
	font-weight: 400;
	letter-spacing: -.015em;
	margin: 0 0 .35rem;
	overflow-wrap: break-word;
}
.pulse-sec .pulse-brand__subtitle {
	color: var(--eyebrow);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .82rem;
	margin: 0 0 1.2rem;
}
.pulse-sec .pulse-brand__desc { color: var(--muted); margin: 0 0 1.4rem; line-height: 1.7; max-width: 70ch; }
.pulse-sec .pulse-brand__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.25rem, .9rem + 1.8vw, 2.5rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--line);
}
.pulse-sec a.pulse-brand__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	min-height: 2.75rem;
	margin-top: 1.6rem;
	background: #fff;
	color: #060613 !important;
	text-decoration: none !important;
	border-radius: var(--pill);
	padding: .8rem 2rem;
	transition: transform .22s var(--ease), box-shadow .22s var(--ease);
	box-shadow: 0 14px 36px -14px rgba(255, 255, 255, .3);
}
.pulse-sec a.pulse-brand__cta::after { content: "\2192"; transition: transform .3s var(--ease); }
.pulse-sec a.pulse-brand__cta:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(255, 255, 255, .45); }
.pulse-sec a.pulse-brand__cta:hover::after { transform: translateX(4px); }

/* ============================================================================
 * NOTÍCIAS — cartões
 * ========================================================================== */
.pulse-sec .pulse-news {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
.pulse-sec a.pulse-news__item {
	text-decoration: none !important;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: var(--soft-r);
	overflow: hidden;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.pulse-sec a.pulse-news__item:hover { transform: translateY(-8px); border-color: var(--line-2); }
.pulse-sec .pulse-news__item .pulse-news__img,
.pulse-sec .pulse-news__item img.pulse-news__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.pulse-sec a.pulse-news__item:hover .pulse-news__img { transform: scale(1.04); }
.pulse-sec .pulse-news__date {
	color: var(--eyebrow);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	padding: 1.15rem 1.35rem 0;
}
.pulse-sec .pulse-news__title {
	color: #fff;
	font-family: inherit;
	font-size: calc(clamp(1.08rem, .98rem + .5vw, 1.4rem) * var(--text-scale, 1));
	font-weight: 400;
	letter-spacing: -.01em;
	margin: 0;
	padding: .55rem 1.35rem 1.45rem;
	line-height: 1.32;
	overflow-wrap: break-word;
}
.pulse-sec a.pulse-news__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	min-height: 2.75rem;
	margin-top: 2.5rem;
	background: #fff;
	color: #060613 !important;
	text-decoration: none !important;
	border-radius: var(--pill);
	padding: .95rem 2.3rem;
	font-size: 1.05rem;
	transition: transform .22s var(--ease), box-shadow .22s var(--ease);
	box-shadow: 0 14px 40px -16px rgba(255, 255, 255, .3);
}
.pulse-sec a.pulse-news__more::after { content: "\2192"; transition: transform .3s var(--ease); }
.pulse-sec a.pulse-news__more:hover { transform: translateY(-3px); box-shadow: 0 20px 48px -16px rgba(255, 255, 255, .45); }
.pulse-sec a.pulse-news__more:hover::after { transform: translateX(4px); }

/* ============================================================================
 * CARTÕES DE NAVEGAÇÃO — retratos escalonados com colchete em L
 * 3 cartões verticais (3:4); escada via nth-child com margin-top em múltiplos
 * de --nav-step (o padrão 3n+1/3n+2/3n+3 repete em filas de 3). O passo é
 * controlado no editor (--step-none/sm/md/lg) e a direção com --right
 * (cartão mais alto à direita). Assinatura: linhas finas desenhadas só com
 * bordas do elemento .pulse-navcard__bracket + um ponto (::before) SÓ nos
 * cartões de vídeo. As linhas derivam dos cantos início/fim escolhidos no
 * editor (dot_from/dot_to — a MESMA fonte de verdade do percurso da bola):
 * o PHP traduz o par de cantos em arestas e emite pulse-navcard__bracket--*
 * quando foge do default bl→tr (L de sempre: fundo + direita, canto
 * arredondado). No hover as linhas estendem-se/sobem e acendem no tom do
 * eyebrow; a imagem faz zoom subtil e o cartão aproxima-se (sobe + cresce,
 * por cima dos vizinhos). Nos cartões de vídeo o ponto viaja pelas linhas
 * (cantos e duração à escolha do editor — --nav-dot-anim/--nav-dot-dur/
 * --nav-dot-x/y inline no PHP) e o vídeo só arranca quando o percurso
 * termina (sections.js espera data-nav-delay segundos). A zona visível da
 * média vem de --nav-pos (object-position, campo "Zona visível" no editor).
 * ========================================================================== */
.pulse-sec .pulse-navcards {
	--nav-step: clamp(2.75rem, 1.4rem + 3.4vw, 5.5rem); /* passo "Normal" da escada */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, .9rem + 1.8vw, 2.5rem);
	align-items: start;
}
.pulse-sec .pulse-navcards > * { min-width: 0; }
.pulse-sec .pulse-navcards > :nth-child(3n+2) { margin-top: var(--nav-step); }
.pulse-sec .pulse-navcards > :nth-child(3n+3) { margin-top: calc(var(--nav-step) * 2); }

/* Espaçamento vertical da escada (stagger_step) — só redefinem --nav-step. */
.pulse-sec .pulse-navcards--step-none { --nav-step: 0rem; }
.pulse-sec .pulse-navcards--step-sm { --nav-step: clamp(1.35rem, .95rem + 1.5vw, 2.75rem); }
.pulse-sec .pulse-navcards--step-md { --nav-step: clamp(2.75rem, 1.4rem + 3.4vw, 5.5rem); }
.pulse-sec .pulse-navcards--step-lg { --nav-step: clamp(4.5rem, 2.2rem + 5.6vw, 9rem); }

/* Escada invertida (stagger_dir = right): o mais alto fica à direita.
   A seguir às regras base para vencer no empate de especificidade. */
.pulse-sec .pulse-navcards--right > :nth-child(3n+1) { margin-top: calc(var(--nav-step) * 2); }
.pulse-sec .pulse-navcards--right > :nth-child(3n+2) { margin-top: var(--nav-step); }
.pulse-sec .pulse-navcards--right > :nth-child(3n+3) { margin-top: 0; }

.pulse-sec .pulse-navcard {
	--nav-inset: clamp(1.1rem, .95rem + .7vw, 1.6rem); /* margem interna partilhada por colchete e etiqueta */
	position: relative;
	isolation: isolate;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--soft-r);
	overflow: hidden;
	background: var(--bg3);
	border: 1px solid var(--line);
	color: #fff;
	text-decoration: none !important;
	transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
/* Hover: o cartão aproxima-se (sobe + cresce) e passa para cima dos vizinhos. */
.pulse-sec a.pulse-navcard:hover {
	transform: translateY(-10px) scale(1.035);
	z-index: 3;
	border-color: var(--line-2);
	box-shadow: 0 48px 100px -40px rgba(0, 0, 0, .9);
}

/* Imagem full-bleed (cobre o cartão; !important vence estilos do tema). */
.pulse-sec .pulse-navcard img.pulse-navcard__img,
.pulse-sec .pulse-navcard .pulse-navcard__img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	object-position: var(--nav-pos, 50% 50%); /* zona visível (media_pos, inline no PHP) */
	z-index: 0;
	border-radius: 0 !important;
	clip-path: none !important;
	filter: none !important;
	box-shadow: none !important;
	transition: transform .7s var(--ease);
}
.pulse-sec a.pulse-navcard:hover .pulse-navcard__img { transform: scale(1.05); }
.pulse-sec .pulse-navcard .pulse-navcard__img--empty {
	background: linear-gradient(160deg, var(--bg3), var(--bg2));
}

/* Degradê escuro no fundo — garante a leitura da etiqueta. */
.pulse-sec .pulse-navcard .pulse-navcard__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(6, 6, 19, .08) 0%,
		rgba(6, 6, 19, 0) 38%,
		rgba(6, 6, 19, .82) 100%
	);
}

/* Colchete: caixa única (inset nas laterais/fundo, topo a 30% → 18% no
   hover) cujas BORDAS desenham as linhas do cartão. Default = percurso
   bl→tr: borda inferior + direita com canto arredondado (o L de sempre). */
.pulse-sec .pulse-navcard .pulse-navcard__bracket {
	position: absolute;
	z-index: 2;
	pointer-events: none;
	left: var(--nav-inset);
	right: var(--nav-inset);
	bottom: var(--nav-inset);
	top: 30%;
	border-right: 1px solid rgba(255, 255, 255, .6);
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	border-bottom-right-radius: 12px;
	transition: top .45s var(--ease), border-color .45s var(--ease);
}
/* Geometrias alternativas — as linhas acompanham o percurso escolhido
   (dot_from/dot_to; classe emitida pelo PHP a partir da mesma matriz dos
   keyframes pulse-nav-dot-*). Sufixo de 1 letra = cantos vizinhos → só essa
   aresta (b/t/l/r = fundo/topo/esquerda/direita). Sufixo de 2 letras =
   cantos opostos → as 2 arestas que se encontram no canto de VIRAGEM dos
   keyframes (bl→tr vira em br = fundo + direita = o default, sem classe).
   Mesma caixa em todas → a bola anda sempre em cima das linhas. */
.pulse-sec .pulse-navcard .pulse-navcard__bracket--b { border-right: 0; border-bottom-right-radius: 0; }
.pulse-sec .pulse-navcard .pulse-navcard__bracket--r { border-bottom: 0; border-bottom-right-radius: 0; }
.pulse-sec .pulse-navcard .pulse-navcard__bracket--t {
	border-right: 0;
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-top: 1px solid rgba(255, 255, 255, .6);
}
.pulse-sec .pulse-navcard .pulse-navcard__bracket--l {
	border-right: 0;
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-left: 1px solid rgba(255, 255, 255, .6);
}
.pulse-sec .pulse-navcard .pulse-navcard__bracket--bl {
	border-right: 0;
	border-bottom-right-radius: 0;
	border-left: 1px solid rgba(255, 255, 255, .6);
	border-bottom-left-radius: 12px;
}
.pulse-sec .pulse-navcard .pulse-navcard__bracket--tr {
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-top: 1px solid rgba(255, 255, 255, .6);
	border-top-right-radius: 12px;
}
.pulse-sec .pulse-navcard .pulse-navcard__bracket--tl {
	border-right: 0;
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-top: 1px solid rgba(255, 255, 255, .6);
	border-left: 1px solid rgba(255, 255, 255, .6);
	border-top-left-radius: 12px;
}
/* O ponto (a "bola") no início da linha — SÓ nos cartões de VÍDEO: é o
   sinal de arranque do vídeo; num cartão de imagem parecia um "loading" sem
   nada para carregar, por isso não existe. Repousa no canto onde o percurso
   começa (--nav-dot-x/y, inline no PHP quando o editor muda o canto;
   default = canto inferior esquerdo, como sempre). */
.pulse-sec .pulse-navcard--video .pulse-navcard__bracket::before {
	content: "";
	position: absolute;
	left: var(--nav-dot-x, 0);
	bottom: var(--nav-dot-y, -3px); /* centra o ponto de 5px na linha de 1px */
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
/* Geometrias com a linha ESQUERDA: os keyframes usam left:0 (calibrado para
   quando esse lado não tinha borda) — o deslize de -3px centra a bola de 5px
   na borda esquerda de 1px, como já fica nas outras três linhas. */
.pulse-sec .pulse-navcard--video .pulse-navcard__bracket--l::before,
.pulse-sec .pulse-navcard--video .pulse-navcard__bracket--bl::before,
.pulse-sec .pulse-navcard--video .pulse-navcard__bracket--tl::before {
	margin-left: -3px;
}
.pulse-sec a.pulse-navcard:hover .pulse-navcard__bracket {
	top: 18%; /* a linha vertical estende-se para cima */
	border-color: var(--eyebrow);
}

/* Cartão de vídeo — o <video> cobre como a imagem; parado mostra o poster. */
.pulse-sec .pulse-navcard video.pulse-navcard__video { object-fit: cover; }

/* No cartão de vídeo, o ponto viaja pelo colchete — e o vídeo só arranca
   quando ele chega ao fim (sections.js espera data-nav-delay = a mesma
   duração). Percurso padrão: canto inferior esquerdo → superior direito,
   pela linha de baixo e a subir pela direita. O editor pode trocar os
   cantos (--nav-dot-anim escolhe os keyframes abaixo) e a duração
   (--nav-dot-dur), ambos inline no PHP. Keyframes em % do colchete →
   acompanham qualquer tamanho de cartão. (Ao sair do hover a animação cai,
   o ponto volta ao início e o JS cancela o arranque do vídeo.) */
@keyframes pulse-nav-dot-travel {
	0%   { left: 0;                bottom: -3px; }
	55%  { left: calc(100% - 2px); bottom: -3px; }
	100% { left: calc(100% - 2px); bottom: calc(100% - 2px); }
}
/* Percursos alternativos (dot_from/dot_to no editor). Nomes: pulse-nav-dot-
   <início>-<fim> com bl/br/tl/tr = inferior-esq/inferior-dir/superior-esq/
   superior-dir. Cantos adjacentes: um segmento direto. Cantos opostos:
   primeiro na horizontal, vira aos 55% — o mesmo ritmo do percurso padrão
   (bl→tr) acima. */
@keyframes pulse-nav-dot-bl-br {
	0%   { left: 0;                bottom: -3px; }
	100% { left: calc(100% - 2px); bottom: -3px; }
}
@keyframes pulse-nav-dot-bl-tl {
	0%   { left: 0; bottom: -3px; }
	100% { left: 0; bottom: calc(100% - 2px); }
}
@keyframes pulse-nav-dot-br-bl {
	0%   { left: calc(100% - 2px); bottom: -3px; }
	100% { left: 0;                bottom: -3px; }
}
@keyframes pulse-nav-dot-br-tr {
	0%   { left: calc(100% - 2px); bottom: -3px; }
	100% { left: calc(100% - 2px); bottom: calc(100% - 2px); }
}
@keyframes pulse-nav-dot-br-tl {
	0%   { left: calc(100% - 2px); bottom: -3px; }
	55%  { left: 0;                bottom: -3px; }
	100% { left: 0;                bottom: calc(100% - 2px); }
}
@keyframes pulse-nav-dot-tl-tr {
	0%   { left: 0;                bottom: calc(100% - 2px); }
	100% { left: calc(100% - 2px); bottom: calc(100% - 2px); }
}
@keyframes pulse-nav-dot-tl-bl {
	0%   { left: 0; bottom: calc(100% - 2px); }
	100% { left: 0; bottom: -3px; }
}
@keyframes pulse-nav-dot-tl-br {
	0%   { left: 0;                bottom: calc(100% - 2px); }
	55%  { left: calc(100% - 2px); bottom: calc(100% - 2px); }
	100% { left: calc(100% - 2px); bottom: -3px; }
}
@keyframes pulse-nav-dot-tr-tl {
	0%   { left: calc(100% - 2px); bottom: calc(100% - 2px); }
	100% { left: 0;                bottom: calc(100% - 2px); }
}
@keyframes pulse-nav-dot-tr-br {
	0%   { left: calc(100% - 2px); bottom: calc(100% - 2px); }
	100% { left: calc(100% - 2px); bottom: -3px; }
}
@keyframes pulse-nav-dot-tr-bl {
	0%   { left: calc(100% - 2px); bottom: calc(100% - 2px); }
	55%  { left: 0;                bottom: calc(100% - 2px); }
	100% { left: 0;                bottom: -3px; }
}
.pulse-sec .pulse-navcard--video:hover .pulse-navcard__bracket::before,
.pulse-sec .pulse-navcard--video:focus-within .pulse-navcard__bracket::before {
	animation: var(--nav-dot-anim, pulse-nav-dot-travel) var(--nav-dot-dur, .5s) var(--ease) forwards;
	background: var(--eyebrow);
	box-shadow: 0 0 12px rgba(153, 160, 245, .9);
}

/* Toque / sem hover: o cartão "ativo" (visível no ecrã) recebe .is-inview via
   JS (IntersectionObserver, sections.js) e mostra o mesmo destaque do hover —
   o colchete acende/estende, a imagem faz zoom e, nos cartões de vídeo, o
   ponto viaja pela linha (o vídeo arranca no JS). */
.pulse-sec .pulse-navcard.is-inview .pulse-navcard__bracket { top: 18%; border-color: var(--eyebrow); }
.pulse-sec .pulse-navcard.is-inview .pulse-navcard__img { transform: scale(1.04); }
.pulse-sec .pulse-navcard--video.is-inview .pulse-navcard__bracket::before {
	animation: var(--nav-dot-anim, pulse-nav-dot-travel) var(--nav-dot-dur, .5s) var(--ease) forwards;
	background: var(--eyebrow);
	box-shadow: 0 0 12px rgba(153, 160, 245, .9);
}

/* Etiqueta — branca, maiúsculas, pousada sobre a linha do colchete. */
.pulse-sec .pulse-navcard .pulse-navcard__meta {
	position: absolute;
	z-index: 2;
	left: var(--nav-inset);
	right: var(--nav-inset);
	bottom: calc(var(--nav-inset) + .85rem);
	display: flex;
	flex-direction: column;
	gap: .3rem;
	pointer-events: none;
}
.pulse-sec .pulse-navcard .pulse-navcard__label {
	color: #fff;
	font-size: calc(clamp(.82rem, .76rem + .3vw, 1rem) * var(--text-scale, 1));
	text-transform: uppercase;
	letter-spacing: .18em;
	line-height: 1.35;
	overflow-wrap: break-word;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .6);
}
.pulse-sec .pulse-navcard .pulse-navcard__sublabel {
	color: rgba(255, 255, 255, .66);
	font-size: calc(clamp(.74rem, .7rem + .2vw, .88rem) * var(--text-scale, 1));
	letter-spacing: .05em;
	line-height: 1.45;
	overflow-wrap: break-word;
}

/* ============================================================================
 * COMPOSIÇÃO DOS CARTÕES DE NAVEGAÇÃO — texto nos cantos vazios da escada
 * O wrapper .pulse-navcomp só existe quando há intro/botão/texto de fundo
 * (sem eles o markup antigo sai intacto). É um grid de 3 colunas e o
 * .pulse-navcards passa a display:contents → os cartões viram itens diretos
 * do grid, colocados por grid-area. A escada por margens é anulada aqui:
 * passa a vir das LINHAS do grid (c1 no topo, c2 desce 1 linha) e o 3.º
 * nível vem de um degrau extra (margin-top) no cartão mais baixo.
 * O stagger_step continua a mandar via --nav-step (lido com :has()).
 * --dir-left  (= print): intro em cima à DIREITA, fundo em baixo à ESQUERDA.
 * --dir-right (espelho): intro em cima à ESQUERDA, fundo em baixo à DIREITA.
 * ========================================================================== */
.pulse-sec .pulse-navcomp {
	--nav-step: clamp(2.75rem, 1.4rem + 3.4vw, 5.5rem); /* espelha o passo "md" */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(1.25rem, .9rem + 1.8vw, 2.5rem);
	row-gap: 0;
	align-items: start;
}
.pulse-sec .pulse-navcomp > * { min-width: 0; }
/* O passo do wrapper segue o stagger_step escolhido no editor. */
.pulse-sec .pulse-navcomp:has(.pulse-navcards--step-none) { --nav-step: 0rem; }
.pulse-sec .pulse-navcomp:has(.pulse-navcards--step-sm) { --nav-step: clamp(1.35rem, .95rem + 1.5vw, 2.75rem); }
.pulse-sec .pulse-navcomp:has(.pulse-navcards--step-lg) { --nav-step: clamp(4.5rem, 2.2rem + 5.6vw, 9rem); }

/* Cartões viram itens diretos do grid da composição. */
.pulse-sec .pulse-navcomp > .pulse-navcards { display: contents; }
/* Em composição, a escada por margens é anulada (vem das linhas do grid). */
.pulse-sec .pulse-navcomp .pulse-navcards > * { margin-top: 0; }
/* Mapa 1.º/2.º/3.º cartão → áreas c1/c2/c3 (igual nas duas direções). */
.pulse-sec .pulse-navcomp .pulse-navcards > :nth-child(1) { grid-area: c1; }
.pulse-sec .pulse-navcomp .pulse-navcards > :nth-child(2) { grid-area: c2; }
.pulse-sec .pulse-navcomp .pulse-navcards > :nth-child(3) { grid-area: c3; }

/* Direção esquerda (= print): c1 mais alto. */
.pulse-sec .pulse-navcomp--dir-left {
	grid-template-areas:
		"c1   intro intro"
		"c1   c2    c3"
		"foot c2    c3";
	grid-template-rows: minmax(var(--nav-step), auto) auto minmax(var(--nav-step), auto);
}
/* O cartão mais baixo leva um degrau extra → 3 níveis distintos (0/1/2×). */
.pulse-sec .pulse-navcomp--dir-left .pulse-navcards > :nth-child(3) { margin-top: var(--nav-step); }

/* Direção direita (espelho): c3 mais alto. */
.pulse-sec .pulse-navcomp--dir-right {
	grid-template-areas:
		"intro intro c3"
		"c1    c2    c3"
		"c1    c2    foot";
	grid-template-rows: minmax(var(--nav-step), auto) auto minmax(var(--nav-step), auto);
}
.pulse-sec .pulse-navcomp--dir-right .pulse-navcards > :nth-child(1) { margin-top: var(--nav-step); }

/* Intro — canto de cima, do lado oposto à escada. */
.pulse-sec .pulse-navcomp__intro {
	grid-area: intro;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.pulse-sec .pulse-navcomp--dir-left .pulse-navcomp__intro { align-items: flex-end; text-align: right; }
.pulse-sec .pulse-navcomp--dir-right .pulse-navcomp__intro { align-items: flex-start; text-align: left; }

/* Fundo — canto de baixo, do lado da escada; assenta na base dos cartões. */
.pulse-sec .pulse-navcomp__foot {
	grid-area: foot;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
.pulse-sec .pulse-navcomp--dir-left .pulse-navcomp__foot { align-items: flex-start; text-align: left; }
.pulse-sec .pulse-navcomp--dir-right .pulse-navcomp__foot { align-items: flex-end; text-align: right; }

/* Texto corrido dos cantos — largura de leitura curta, tom suave. */
.pulse-sec .pulse-navcomp__prose {
	color: var(--muted);
	font-size: calc(clamp(.95rem, .9rem + .3vw, 1.15rem) * var(--text-scale, 1));
	line-height: 1.6;
	max-width: 38ch;
}
.pulse-sec .pulse-navcomp__prose p { margin: 0 0 1em; color: inherit; }
.pulse-sec .pulse-navcomp__prose > :first-child { margin-top: 0; }
.pulse-sec .pulse-navcomp__prose > :last-child { margin-bottom: 0; }
.pulse-sec .pulse-navcomp__prose a { color: #b9bdfa; text-decoration: underline; text-underline-offset: 3px; }
.pulse-sec .pulse-navcomp__prose a:hover { color: #fff; }
.pulse-sec .pulse-navcomp__prose strong { color: var(--ink); }

/* Botão-pílula fino (outline) do canto de cima. */
.pulse-sec a.pulse-navcomp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 2.4rem;
	padding: .5rem 1.5rem;
	border: 1px solid var(--line-2);
	border-radius: var(--pill);
	background: transparent;
	color: #fff !important;
	text-decoration: none !important;
	font-size: calc(clamp(.85rem, .8rem + .2vw, .98rem) * var(--text-scale, 1));
	letter-spacing: .04em;
	transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.pulse-sec a.pulse-navcomp__btn:hover {
	border-color: var(--eyebrow);
	color: var(--eyebrow) !important;
	background: var(--glass);
}

/* Motivo de 3 pontinhos verticais — eco do ponto do colchete dos cartões.
   Um só span: o próprio é o 1.º ponto; os outros 2 são box-shadows. */
.pulse-sec .pulse-navcomp__dots {
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 0 0 rgba(255, 255, 255, .55), 0 20px 0 0 rgba(255, 255, 255, .25);
	margin-bottom: 20px; /* reserva o espaço dos 2 pontos-sombra */
}

/* ============================================================================
 * CONTROLOS DE ASPETO (fundo / espaçamento / alinhamento)
 * ========================================================================== */
section.pulse-sec.pulse-sec--space-sm { padding-block: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
section.pulse-sec.pulse-sec--space-lg { padding-block: clamp(4.5rem, 2.9rem + 7vw, 10rem); }
section.pulse-sec--hero.pulse-sec--space-sm,
section.pulse-sec--hero.pulse-sec--space-lg { padding-block: 0; }

/* Tamanho do texto (md = 1, default). Diferenças reforçadas para serem
   visíveis nos títulos (heading/hero/cta multiplicam por --text-scale).
   O "Tamanho manual (%)" escreve --text-scale inline na <section> e,
   por ser inline, ganha sempre a estas classes. */
.pulse-sec--text-sm { --text-scale: .85; }
.pulse-sec--text-lg { --text-scale: 1.2; }
.pulse-sec--text-xl { --text-scale: 1.45; }

.pulse-sec--align-center { text-align: center; }
.pulse-sec--align-center .pulse-sec__heading { margin-inline: auto; }
.pulse-sec--align-center .pulse-sec__label { justify-content: center; }
.pulse-sec--align-center .pulse-sec__prose { margin-inline: auto; }
.pulse-sec--align-center .pulse-logos { justify-content: center; }

section.pulse-sec.pulse-sec--bg-dark { background: var(--bg2); }
section.pulse-sec.pulse-sec--bg-soft { background: var(--bg3); }
section.pulse-sec.pulse-sec--bg-light { background: #f5f5fb; }
.pulse-sec--bg-light .pulse-sec__heading,
.pulse-sec--bg-light .pulse-cta__heading,
.pulse-sec--bg-light .pulse-value__title,
.pulse-sec--bg-light .pulse-news__title,
.pulse-sec--bg-light .pulse-acc__trigger,
.pulse-sec--bg-light .pulse-brand__tagline,
.pulse-sec--bg-light .pulse-card__title { color: #10102e; }
.pulse-sec--bg-light .pulse-sec__prose,
.pulse-sec--bg-light .pulse-cta__text,
.pulse-sec--bg-light .pulse-value__text,
.pulse-sec--bg-light .pulse-brand__desc { color: #4a4a63; }
.pulse-sec--bg-light .pulse-sec__label,
.pulse-sec--bg-light .pulse-news__date { color: var(--accent); }
section.pulse-sec.pulse-sec--bg-light .pulse-card,
section.pulse-sec.pulse-sec--bg-light .pulse-news__item,
section.pulse-sec.pulse-sec--bg-light .pulse-brand,
section.pulse-sec.pulse-sec--bg-light .pulse-value,
section.pulse-sec.pulse-sec--bg-light a.pulse-pill {
	background: #ffffff;
	border-color: rgba(16, 16, 46, .12);
	color: #10102e !important;
	box-shadow: 0 18px 44px -24px rgba(16, 16, 46, .18);
}
.pulse-sec--bg-light .pulse-logo__img,
.pulse-sec--bg-light .pulse-brand__logo { filter: none !important; opacity: .85; }
section.pulse-sec.pulse-sec--bg-light a.pulse-cta__btn,
section.pulse-sec.pulse-sec--bg-light a.pulse-news__more,
section.pulse-sec.pulse-sec--bg-light a.pulse-brand__cta {
	background: #10102e;
	color: #fff !important;
	box-shadow: 0 18px 44px -18px rgba(16, 16, 46, .5);
}

/* ============================================================================
 * RESPONSIVO — TABLET (≤1024px): grelhas de 3–4 colunas passam a 2
 * ========================================================================== */
@media (max-width: 1024px) {
	.pulse-sec .pulse-cards,
	.pulse-sec .pulse-cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
	.pulse-sec .pulse-news { grid-template-columns: repeat(2, 1fr); }
	.pulse-sec .pulse-values { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
 * RESPONSIVO — TELEMÓVEL / TABLET-PORTRAIT (≤820px): splits empilham
 * (mesmo limiar do scroll-snap → um só "modo mobile" coerente)
 * ========================================================================== */
@media (max-width: 820px) {
	.pulse-sec .pulse-media {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
	}
	.pulse-sec .pulse-media--img-left .pulse-media__text { order: 0; }
	.pulse-sec .pulse-acc__inner--has-img { grid-template-columns: 1fr; }

	/* Cartões de navegação → CARROSSEL horizontal (swipe) em vez de pilha:
	   assim a secção continua a caber num ecrã (o scroll-snap vertical mantém
	   "1 secção = 1 ecrã"). Cada cartão ocupa ~80% e o seguinte "espreita" à
	   direita. Sem escada. O vídeo arranca quando o cartão fica no ecrã
	   (sections.js, IntersectionObserver → .is-inview). */
	.pulse-sec .pulse-navcards {
		display: flex;
		grid-template-columns: none;
		align-items: flex-start;
		gap: clamp(.85rem, .4rem + 2vw, 1.35rem);
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: .35rem;
	}
	.pulse-sec .pulse-navcards::-webkit-scrollbar { display: none; }
	.pulse-sec .pulse-navcards > * { margin-top: 0 !important; } /* anula a escada */
	.pulse-sec .pulse-navcard {
		flex: 0 0 min(80%, 20rem);
		scroll-snap-align: start;
		width: auto;
		margin-inline: 0;
	}

	/* Composição dos cartões de navegação: empilha intro → carrossel → fundo,
	   tudo full-width e alinhado à esquerda, independente da direção. */
	.pulse-sec .pulse-navcomp {
		display: flex;
		flex-direction: column;
		gap: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
	}
	/* Reverte o display:contents do desktop → reativa o carrossel (flex acima). */
	.pulse-sec .pulse-navcomp > .pulse-navcards { display: flex; }
	.pulse-sec .pulse-navcomp .pulse-navcomp__intro,
	.pulse-sec .pulse-navcomp .pulse-navcomp__foot {
		align-self: stretch;
		align-items: flex-start;
		text-align: left;
		padding: 0;
	}
}

/* ============================================================================
 * RESPONSIVO — TELEMÓVEL (≤640px): tudo a 1 coluna
 * ========================================================================== */
@media (max-width: 640px) {
	.pulse-sec .pulse-cards,
	.pulse-sec .pulse-cards--cols-2,
	.pulse-sec .pulse-cards--cols-4 { grid-template-columns: 1fr; }
	.pulse-sec .pulse-news { grid-template-columns: 1fr; }
	.pulse-sec .pulse-values { grid-template-columns: 1fr; }
	.pulse-sec .pulse-brand__cols { grid-template-columns: 1fr; }
}

/* ============================================================================
 * RESPONSIVO — TELEMÓVEL PEQUENO (≤480px): compacto, alvos de toque ≥44px
 * ========================================================================== */
@media (max-width: 480px) {
	section.pulse-sec,
	.pulse-sec {
		--pad-x: clamp(1rem, .35rem + 3.5vw, 1.45rem);
		--soft-r: 14px;
	}
	.pulse-sec .pulse-sec__label { letter-spacing: .18em; }
	.pulse-sec .pulse-sec__label::before { width: 1.6rem; }

	.pulse-sec a.pulse-pill {
		gap: .9rem;
		min-height: 3.75rem; /* ≥44px de alvo, mais compacto que desktop */
		padding: .95rem 1.05rem;
	}
	.pulse-sec a.pulse-pill::before { width: 2.4rem; height: 2.4rem; }

	.pulse-sec a.pulse-cta__btn,
	.pulse-sec span.pulse-cta__btn {
		width: min(100%, 22rem);
		padding: 1rem 1.75rem;
	}
	.pulse-sec a.pulse-news__more,
	.pulse-sec a.pulse-brand__cta { padding: .85rem 1.7rem; }

	.pulse-sec .pulse-news__date { padding: 1rem 1.1rem 0; }
	.pulse-sec .pulse-news__title { padding: .5rem 1.1rem 1.25rem; }

	.pulse-sec .pulse-logos { gap: 1.25rem 1.75rem; }
	.pulse-sec .pulse-logo .pulse-logo__img,
	.pulse-sec img.pulse-logo__img { max-height: 40px; }
	.pulse-sec .pulse-brand img.pulse-brand__logo { max-height: 38px; }

	.pulse-sec .pulse-navcard { --nav-inset: 1rem; }
	.pulse-sec .pulse-navcard .pulse-navcard__label { letter-spacing: .14em; }
}

/* ============================================================================
 * RESPONSIVO — MICRO (≤380px): últimos ajustes de título/padding
 * ========================================================================== */
@media (max-width: 380px) {
	.pulse-sec .pulse-hero .pulse-hero__title {
		font-size: calc(clamp(2rem, 1.2rem + 4.5vw, 2.35rem) * var(--text-scale, 1) * var(--hero-title-scale, 1));
	}
	.pulse-sec .pulse-sec__heading,
	.pulse-sec .pulse-cta__heading {
		font-size: calc(clamp(1.65rem, 1.25rem + 2.2vw, 1.85rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	}
	.pulse-sec .pulse-pills { grid-template-columns: 1fr; }
}

/* ============================================================================
 * RESPONSIVO — DESKTOP LARGO (≥1680px): o conteúdo respira mais
 * ========================================================================== */
@media (min-width: 1680px) {
	section.pulse-sec,
	.pulse-sec {
		--maxw: 96rem;
		--pad-x: 5rem;
	}
	.pulse-sec .pulse-sec__container--narrow { max-width: 62rem; }
	.pulse-sec--cta .pulse-sec__container { max-width: 64rem; }
}

/* ============================================================================
 * RESPONSIVO — FULL-HD+ (≥1920px): container maior + tipografia sobe suave
 * (o corpo mantém max-width em ch → linhas continuam legíveis)
 * ========================================================================== */
@media (min-width: 1920px) {
	section.pulse-sec,
	.pulse-sec {
		--maxw: 104rem;
		--pad-x: 5.5rem;
	}
	/* Altura "Natural" respira mais em ecrãs grandes; "Ecrã inteiro" (o novo
	   predefinido) já é 100svh e não precisa de ajuste aqui. */
	section.pulse-sec.pulse-sec--hero,
	.pulse-sec--hero { --hero-h-natural: clamp(600px, 96svh, 1240px); }
	@supports not (height: 100svh) {
		section.pulse-sec.pulse-sec--hero,
		.pulse-sec--hero { --hero-h-natural: clamp(600px, 96vh, 1240px); }
	}
	.pulse-sec .pulse-hero .pulse-hero__title {
		font-size: calc(clamp(7.25rem, 5.65rem + 1.35vw, 8rem) * var(--text-scale, 1) * var(--hero-title-scale, 1));
	}
	.pulse-sec .pulse-hero .pulse-hero__subtitle {
		font-size: calc(1.5rem * var(--text-scale, 1) * var(--hero-sub-scale, 1));
	}
	.pulse-sec .pulse-sec__heading,
	.pulse-sec .pulse-cta__heading {
		font-size: calc(clamp(4rem, 3rem + 1vw, 4.6rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	}
	.pulse-sec .pulse-sec__prose {
		font-size: calc(clamp(1.3rem, 1.14rem + .14vw, 1.42rem) * var(--text-scale, 1) * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	}
	.pulse-sec .pulse-logo .pulse-logo__img,
	.pulse-sec img.pulse-logo__img { max-height: 60px; }
}

/* ============================================================================
 * RESPONSIVO — ULTRA-WIDE (≥2560px): container e gaps no máximo
 * ========================================================================== */
@media (min-width: 2560px) {
	section.pulse-sec,
	.pulse-sec {
		--maxw: 118rem;
		--pad-x: 6rem;
		--gap: 2rem;
	}
}

/* ============================================================================
 * TELEMÓVEL — cada secção ocupa o ecrã e "salta" para a seguinte (scroll-snap)
 * ========================================================================== */
@media (max-width: 820px) {
	html:has(.pulse-sec) {
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
	}

	body:has(.pulse-sec) .pulse-sec {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Secções normais: ecrã inteiro, conteúdo centrado verticalmente.
	   `safe center` → quando o conteúdo é MAIS ALTO que o ecrã (acordeão
	   aberto, muitos cartões) alinha ao início em vez de cortar o topo;
	   browsers antigos ignoram a 2.ª linha e mantêm `center`. */
	body:has(.pulse-sec) .pulse-sec:not(.pulse-sec--hero) {
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		justify-content: safe center;
	}

	/* Hero: ecrã inteiro SEMPRE no telemóvel — o scroll-snap precisa de ecrã
	   cheio, por isso a Altura "Natural" (--hero-min-h) não se aplica aqui. */
	body:has(.pulse-sec) .pulse-sec--hero,
	body:has(.pulse-sec) .pulse-sec--hero .pulse-hero {
		min-height: 100svh;
	}

	/* Fallback para browsers sem svh */
	@supports not (height: 100svh) {
		body:has(.pulse-sec) .pulse-sec:not(.pulse-sec--hero),
		body:has(.pulse-sec) .pulse-sec--hero,
		body:has(.pulse-sec) .pulse-sec--hero .pulse-hero { min-height: 100vh; }
	}
}

/* ============================================================================
 * ACESSIBILIDADE — movimento reduzido
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html:has(.pulse-sec) { scroll-behavior: auto; }
	.pulse-sec *,
	.pulse-sec *::before,
	.pulse-sec *::after {
		transition: none !important;
		animation: none !important;
	}
	/* Cartões de navegação: sem subir/crescer no hover — fica só a mudança
	   de borda/sombra. (O ponto também não viaja: animation none acima.) */
	.pulse-sec a.pulse-navcard:hover { transform: none; }
}

/* ============================================================================
 * KPIs — números de destaque com rótulo (bloco acf/pulse-kpis).
 * Usa os tokens da secção (--head/--muted/--eyebrow/--line) → o tema claro
 * (html.pulse-claro) muda as cores automaticamente.
 *
 * Estética: células editoriais com régua fina no topo e segmento accent
 * (eco do traço do .pulse-sec__label), reveal em cascata (sections.js dá
 * .pulse-kpis--js + .is-inview; o atraso vem de --kpi-i, inline no PHP)
 * e contagem animada dos valores ([data-kpi-valor]).
 *
 * Imagem OPCIONAL (campo "Imagem"): .pulse-kpis-split põe a grelha ao lado
 * da imagem (esquerda/direita); a imagem estica à altura da grelha.
 * ========================================================================== */
.pulse-sec .pulse-kpis {
	display: grid;
	gap: clamp(1.75rem, 1.2rem + 2.2vw, 3rem) clamp(1.5rem, 1rem + 2.5vw, 3rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pulse-sec .pulse-kpis--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pulse-sec .pulse-kpis--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Célula: régua fina no topo com segmento accent — o mesmo motivo do traço
   do .pulse-sec__label. No hover o segmento estica (subtil, como os irmãos;
   com "movimento reduzido" o bloco de acessibilidade acima anula a transição). */
.pulse-sec .pulse-kpi {
	position: relative;
	min-width: 0;
	border-top: 1px solid var(--line);
	padding-top: clamp(0.9rem, 0.7rem + 0.8vw, 1.35rem);
}
.pulse-sec .pulse-kpi::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 2.4rem;
	height: 1px;
	background: var(--eyebrow);
	transition: width 0.45s var(--ease);
}
.pulse-sec .pulse-kpi:hover::before { width: 4.5rem; }

.pulse-sec .pulse-kpi__num {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.08em;
	/* --pap-kpi-e: "Tamanho dos números" do Sistema de Aparência (FASE 2B). */
	font-size: calc(clamp(2.2rem, 1.6rem + 3vw, 3.8rem) * var(--text-scale, 1) * var(--pap-kpi-e, 1));
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--head, #ffffff);
	font-variant-numeric: tabular-nums; /* dígitos estáveis durante a contagem */
}
.pulse-sec .pulse-kpi__fix {
	font-size: 0.55em;
	color: var(--eyebrow, #99a0f5);
}
.pulse-sec .pulse-kpi__label {
	margin: 0.65rem 0 0;
	max-width: 16rem;
	font-size: clamp(0.92rem, 0.88rem + 0.22vw, 1.06rem);
	line-height: 1.55;
	color: var(--muted, rgba(238, 240, 251, 0.62));
}

/* Reveal em cascata — .pulse-kpis--js só é adicionada com JS + IO e SEM
   "movimento reduzido" (sections.js): sem eles, nada fica escondido. */
.pulse-sec .pulse-kpis--js .pulse-kpi {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.6s var(--ease) calc(var(--kpi-i, 0) * 90ms),
		transform 0.6s var(--ease) calc(var(--kpi-i, 0) * 90ms);
}
.pulse-sec .pulse-kpis--js.is-inview .pulse-kpi {
	opacity: 1;
	transform: none;
}

/* Alinhamento ao centro (controlo "Alinhamento" da secção). */
.pulse-sec--align-center .pulse-kpi__num { justify-content: center; }
.pulse-sec--align-center .pulse-kpi__label { margin-inline: auto; }
.pulse-sec--align-center .pulse-kpi::before { left: 50%; transform: translateX(-50%); }

/* Preset "Fundo claro" (--bg-light é fixo, não muda com os tokens):
   tinta escura nos números — antes ficavam brancos sobre #f5f5fb. */
.pulse-sec--bg-light .pulse-kpi { border-top-color: rgba(16, 16, 46, 0.14); }
.pulse-sec--bg-light .pulse-kpi::before { background: var(--accent); }
.pulse-sec--bg-light .pulse-kpi__num { color: #10102e; }
.pulse-sec--bg-light .pulse-kpi__fix { color: var(--accent); }
.pulse-sec--bg-light .pulse-kpi__label { color: #4a4a63; }

/* ---- Imagem opcional: split imagem + grelha ----------------------------
   DOM fixo (grelha primeiro, imagem depois — leitores de ecrã leem os
   números primeiro); "Esquerda" troca só a ordem VISUAL, como o
   .pulse-media--img-left do bloco Texto+Imagem. */
.pulse-sec .pulse-kpis-split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr; /* grelha | imagem */
	gap: var(--gap-lg);
	align-items: center;
}
.pulse-sec .pulse-kpis-split > * { min-width: 0; }
.pulse-sec .pulse-kpis-split--img-left { grid-template-columns: 0.9fr 1.1fr; /* imagem | grelha */ }
.pulse-sec .pulse-kpis-split--img-left .pulse-kpis { order: 2; }

/* Em meia largura, 4 colunas viram 2×2 e os números encolhem um ponto. */
.pulse-sec .pulse-kpis-split .pulse-kpis--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pulse-sec .pulse-kpis-split .pulse-kpi__num {
	font-size: calc(clamp(2rem, 1.5rem + 2.2vw, 3.2rem) * var(--text-scale, 1) * var(--pap-kpi-e, 1));
}

/* A imagem estica à altura da grelha (img absoluta em cover; os cantos e a
   moldura vivem no wrapper) — mesma moldura/sombra do bloco Texto+Imagem.
   No tema claro a sombra aclara via AUDIT no tema.css. */
.pulse-sec .pulse-kpis-media {
	position: relative;
	align-self: stretch;
	min-height: clamp(16rem, 10rem + 14vw, 24rem);
	border-radius: var(--soft-r);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
}
/* !important cirúrgico como no Texto+Imagem: o main.css do tema redesenha
   imagens (círculo/moldura); só afeta imagens DENTRO de .pulse-kpis-media. */
.pulse-sec .pulse-kpis-media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	border-radius: 0 !important;
	clip-path: none !important;
	border: 0 !important;
	background: transparent !important;
	filter: none !important;
	box-shadow: none !important;
}

/* Tablet (≤1024px): meia largura só dá para 2 colunas de indicadores. */
@media (max-width: 1024px) {
	.pulse-sec .pulse-kpis-split .pulse-kpis,
	.pulse-sec .pulse-kpis-split .pulse-kpis--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Telemóvel/tablet-portrait (≤820px): 2 colunas (KPIs são curtos, 2 lado a
   lado leem bem); o split empilha com os números PRIMEIRO e a imagem em
   faixa 16/9 de altura contida — a secção continua a caber num ecrã com o
   scroll-snap "1 secção = 1 ecrã". */
@media (max-width: 820px) {
	.pulse-sec .pulse-kpis,
	.pulse-sec .pulse-kpis--cols-2,
	.pulse-sec .pulse-kpis--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pulse-sec .pulse-kpis-split {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);
	}
	.pulse-sec .pulse-kpis-split--img-left .pulse-kpis { order: 0; }
	.pulse-sec .pulse-kpis-media {
		align-self: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
		max-height: 32vh;  /* fallback */
		max-height: 32svh; /* deixa sempre espaço aos números no ecrã snapado */
	}
}

/* ============================================================================
 * NAVBAR — 2 navbars editáveis, à escolha por página (campo "Estilo da
 * navbar" no editor): "À direita" (padrão), "Centrada" ou "Ambas".
 *
 * Duas navbars EDITÁVEIS (Aparência → Menus → Localizações):
 *   · "Header" (do tema)          → navbar à direita (padrão, como hoje);
 *   · "Pulse — Navbar centrada"   → navbar centrada, com menu próprio.
 *
 * "Centrada" (body.pulse-nav-centrada): o plugin troca o menu do header pelo
 * da localização nova (wp_nav_menu_args) e este CSS centra-o no ESPAÇO
 * DISPONÍVEL à direita do logótipo — robusto em qualquer largura (nunca
 * sobrepõe o logo, mesmo com menus compridos).
 *
 * "Ambas" (body.pulse-nav-ambas): o menu centrado (ul.pulse-menu-centrado) é
 * injetado antes do menu Header no mesmo <nav> → logo | centrado | direita.
 * Abaixo de 1200px não há largura para os dois lado a lado, por isso
 * EMPILHAM: menu centrado numa linha (principal) e menu Header noutra por
 * baixo (secundário, mais pequeno), ambos centrados no espaço à direita
 * do logo — hierarquia clara em vez de dois menus espremidos.
 *
 * DEGRADAÇÃO FLUIDA (≥768px): gaps e tipografia em clamp() com componente
 * vw, contínuos dos 768px ao ultra-wide — os máximos dos clamp assumem o
 * papel do breakpoint ≥2560px usado nas secções, sem saltos bruscos.
 *
 * O modo padrão (sem classe no <body>) fica INTOCADO e o menu mobile
 * (≤767px, overlay próprio) não é afetado — só a navbar de desktop.
 * ========================================================================== */

/* ---- Variáveis fluidas (só nos modos do plugin, só ≥768px) ------------- */

@media (min-width: 768px) {
	body.pulse-nav-centrada,
	body.pulse-nav-ambas {
		/* Gap entre itens de um menu com a linha só para ele:
		   1.25rem perto de 768px → ~3rem a 1400px → 5rem em ultra-wide. */
		--pulse-nav-gap: clamp(1.25rem, 5vw - 1.5rem, 5rem);
		/* Gap entre itens quando os DOIS menus partilham a linha
		   (mais contido, para os dois grupos caberem lado a lado). */
		--pulse-nav-gap-duplo: clamp(1.25rem, 3.5vw - 1.25rem, 3.5rem);
		/* Gap ENTRE os dois menus — sempre maior que o gap entre itens,
		   para cada grupo se ler como um bloco distinto. */
		--pulse-nav-gap-menus: clamp(2.5rem, 8vw - 4rem, 7rem);
		/* Tipografia dos links: 15px perto de 768px → 18px (máximo do tema)
		   a partir de ~1460px — o menu comprido cabe numa linha mais cedo. */
		--pulse-nav-fs: clamp(0.9375rem, 0.35rem + 0.85vw, 1.125rem);
	}
}

/* ---- Centrada ---------------------------------------------------------- */

/* Classe duplicada = especificidade acima do utilitário Bootstrap
   .justify-content-lg-end (que também usa !important). */
body.pulse-nav-centrada .site-header-nav.site-header-nav {
	justify-content: center !important;
}

/* E, se os itens quebrarem em 2 linhas, cada linha também centra. */
body.pulse-nav-centrada .site-header-menu {
	justify-content: center;
}

/* Gaps e tipografia fluidos; linhas mais juntas do que no tema (0.75rem)
   para, quando o menu quebra, as linhas centradas se lerem como UM bloco. */
@media (min-width: 768px) {
	body.pulse-nav-centrada .site-header-menu {
		column-gap: var(--pulse-nav-gap);
		row-gap: 0.625rem;
	}

	body.pulse-nav-centrada .site-header-menu a {
		font-size: var(--pulse-nav-fs);
	}
}

/* ---- Ambas: logo | menu centrado | menu Header à direita --------------- */

/* O menu centrado estica e ocupa o espaço entre o logo e o menu da direita;
   os seus itens centram-se dentro desse espaço. min-width: 0 deixa-o
   encolher (os itens quebram de forma controlada) em vez de empurrar o
   menu da direita para fora. */
body.pulse-nav-ambas .site-header-menu.pulse-menu-centrado {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

/* O menu Header fica como hoje: encostado à direita, largura do conteúdo. */
body.pulse-nav-ambas .site-header-menu:not(.pulse-menu-centrado) {
	flex: 0 1 auto;
}

/* Lado a lado (≥1200px): respiro fluido entre os menus e entre itens. */
@media (min-width: 1200px) {
	body.pulse-nav-ambas .site-header-nav.site-header-nav {
		column-gap: var(--pulse-nav-gap-menus);
	}

	body.pulse-nav-ambas .site-header-menu {
		column-gap: var(--pulse-nav-gap-duplo);
		row-gap: 0.625rem;
	}

	body.pulse-nav-ambas .site-header-menu a {
		font-size: var(--pulse-nav-fs);
	}
}

/* Empilhados (768–1199px): cada menu ocupa a sua própria linha, ambos
   centrados no espaço à direita do logo → eixo vertical coerente. O row
   do header (align-items-center) mantém o bloco alinhado com o logótipo. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	body.pulse-nav-ambas .site-header-nav.site-header-nav {
		flex-wrap: wrap;
		row-gap: 0.75rem;
	}

	body.pulse-nav-ambas .site-header-menu.pulse-menu-centrado,
	body.pulse-nav-ambas .site-header-menu:not(.pulse-menu-centrado) {
		flex: 0 0 100%;
		justify-content: center;
		column-gap: var(--pulse-nav-gap);
		row-gap: 0.5rem;
	}

	/* Linha principal (menu centrado): tipografia fluida normal. */
	body.pulse-nav-ambas .site-header-menu.pulse-menu-centrado a {
		font-size: var(--pulse-nav-fs);
	}

	/* Linha secundária (menu Header): 87.5% da principal — hierarquia
	   clara, mantendo a mesma curva fluida. */
	body.pulse-nav-ambas .site-header-menu:not(.pulse-menu-centrado) a {
		font-size: calc(var(--pulse-nav-fs) * 0.875);
	}
}