/**
 * Pulse — Sistema de Aparência (FASE 1) · consome as variáveis --pap-*
 * ----------------------------------------------------------------------------
 * Carrega DEPOIS do sections.css (dependência no enqueue): as regras aqui têm
 * a MESMA especificidade das originais e ganham pela ordem. Todos os var()
 * têm fallback = aspeto atual → um elemento com .pap-media mas sem variáveis
 * definidas rende pixel-igual ao de sempre.
 *
 * Emitido pelo PHP (aparencia.php · pulse_ap_style):
 *   .pap-media  --pap-m-ratio/-fit/-pos/-r/-bw/-bc/-sh/-bg/-filter/-ov/--pap-hv-z
 *   tipografia  --pap-t-e/-eb/-mob/-lh/-maxw (consumidas no sections.css)
 *   .pap-btn    --pap-btn-r/-cor/-bg/-bd/-sh/-hbg/-hcor
 *   contentor   --pap-ctn-bga + classes pap-bga/pap-has-video/pap-in-*
 */

/* ============================================================================
 * MÉDIA (imagem/vídeo) — wrapper .pap-media
 * As 4 propriedades com !important espelham (e vencem, por ordem) os
 * !important cirúrgicos do sections.css (.pulse-media__img img).
 * ========================================================================== */
.pulse-sec .pap-media img,
.pulse-sec .pap-media video {
	aspect-ratio: var(--pap-m-ratio, auto) !important;
	border-radius: var(--pap-m-r, var(--soft-r)) !important;
	filter: var(--pap-m-filter, none) !important;
	background: var(--pap-m-bg, transparent) !important;
	object-fit: var(--pap-m-fit, cover);
	object-position: var(--pap-m-pos, 50% 50%);
	border: var(--pap-m-bw, 1px) solid var(--pap-m-bc, var(--line));
	box-shadow: var(--pap-m-sh, 0 40px 90px -40px rgba(0, 0, 0, .85));
	width: 100%;
	height: auto !important;
}
/* Com proporção definida, a altura segue o aspect-ratio (o auto de cima). */

/* Vídeo avulso (helper pulse_ap_video_html) fora de .pap-media: base neutra. */
.pulse-sec video.pap-video {
	display: block;
	max-width: 100%;
}

/* Véu de cor por cima da média (classe pap-ov + --pap-m-ov). */
.pulse-sec .pap-ov { position: relative; }
.pulse-sec .pap-ov::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pap-m-ov, transparent);
	border-radius: var(--pap-m-r, var(--soft-r));
	pointer-events: none;
}

/* Legenda e link (helper pulse_ap_imagem_html). */
.pulse-sec .pap-figura { margin: 0; }
.pulse-sec .pap-figura .pap-legenda {
	margin-top: .6rem;
	font-size: calc(clamp(.82rem, .78rem + .2vw, .95rem) * var(--text-scale, 1));
	line-height: 1.5;
	color: var(--muted);
}
.pulse-sec a.pap-img-link { display: block; }

/* Efeitos ao passar o rato (o bloco reduced-motion do sections.css anula
   todas as transições dentro de .pulse-sec — nada mexe para quem não quer). */
.pulse-sec .pap-hv-zoom { overflow: hidden; border-radius: var(--pap-m-r, var(--soft-r)); }
.pulse-sec .pap-hv-zoom img,
.pulse-sec .pap-hv-zoom video { transition: transform .6s var(--ease); }
.pulse-sec .pap-hv-zoom:hover img,
.pulse-sec .pap-hv-zoom:hover video { transform: scale(var(--pap-hv-z, 1.06)); }

.pulse-sec .pap-hv-brilho img,
.pulse-sec .pap-hv-brilho video { transition: filter .45s var(--ease); }
.pulse-sec .pap-hv-brilho:hover img,
.pulse-sec .pap-hv-brilho:hover video { filter: var(--pap-m-filter, none) brightness(1.12) !important; }

.pulse-sec .pap-hv-elevar { transition: transform .45s var(--ease); }
.pulse-sec .pap-hv-elevar:hover { transform: translateY(-8px); }

/* ============================================================================
 * TIPOGRAFIA — multiplicadores consumidos no sections.css; aqui só o ajuste
 * mobile (--pap-t-mob → --pap-t-eb ≤820px) e as classes de listas/links.
 * As vars ficam INLINE no elemento; --pap-t-eb nunca é inline → esta regra
 * de folha aplica-se sem conflito.
 * ========================================================================== */
@media (max-width: 820px) {
	.pulse-sec .pulse-sec__heading,
	.pulse-sec .pulse-sec__prose,
	.pulse-sec .pulse-sec__label,
	.pulse-sec .pulse-cta__heading,
	.pulse-sec .pulse-cta__text,
	.pulse-sec .pulse-value__text { --pap-t-eb: var(--pap-t-mob, 1); }
}

.pulse-sec .pulse-sec__prose.pap-li-tinta li::marker { color: currentColor; }
.pulse-sec .pulse-sec__prose.pap-li-sem ul { list-style: none; padding-left: 0; }
.pulse-sec .pulse-sec__prose.pap-lk-discreto a { text-decoration: none; }
.pulse-sec .pulse-sec__prose.pap-lk-discreto a:hover { text-decoration: underline; }

/* ============================================================================
 * BOTÃO — .pap-btn (autónomo, com o ADN do .pulse-cta__btn; os fallbacks
 * reproduzem esse aspeto). Blocos com botão próprio recebem só vars/classes.
 * ========================================================================== */
.pulse-sec a.pap-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	padding: 1.05rem 2.4rem;
	border-radius: var(--pap-btn-r, var(--pill));
	background: var(--pap-btn-bg, #fff);
	color: var(--pap-btn-cor, #0b0b20);
	border: var(--pap-btn-bd, 0);
	box-shadow: var(--pap-btn-sh, 0 18px 44px -18px rgba(0, 0, 0, .55));
	font-family: inherit;
	font-size: calc(1rem * var(--text-scale, 1));
	line-height: 1.1;
	text-decoration: none;
	transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.pulse-sec a.pap-btn:hover {
	background: var(--pap-btn-hbg, var(--pap-btn-bg, #fff));
	color: var(--pap-btn-hcor, var(--pap-btn-cor, #0b0b20));
}

/* ---- FASE 2A: fallbacks contextuais — botões que JÁ existiam adotam o
   builder mantendo o seu ADN (só muda o que o editor escolher). Ficam ANTES
   dos modificadores --s/--l para os tamanhos continuarem a ganhar. ---- */

/* CTA (.pulse-cta__btn): o !important da cor no sections.css obriga a repor
   a cor aqui também com !important (mais específico → var ganha). */
.pulse-sec a.pulse-cta__btn.pap-btn {
	gap: .85rem;
	padding: 1.1rem 2.7rem;
	font-size: clamp(1rem, .95rem + .3vw, 1.3rem);
	line-height: normal;
	color: var(--pap-btn-cor, #060613) !important;
	box-shadow: var(--pap-btn-sh, 0 18px 50px -16px rgba(255, 255, 255, .35));
}
.pulse-sec a.pulse-cta__btn.pap-btn:hover {
	color: var(--pap-btn-hcor, var(--pap-btn-cor, #060613)) !important;
	box-shadow: var(--pap-btn-sh, 0 26px 60px -16px rgba(255, 255, 255, .5));
}

/* Downloads (.pulse-pill): pill glass com seta ::before — dimensões da grelha
   intocadas; cores/cantos/borda/sombra/hover vêm das vars. */
.pulse-sec a.pulse-pill.pap-btn {
	display: flex;
	justify-content: flex-start;
	gap: 1.05rem;
	padding: 1.1rem 1.35rem;
	border-radius: var(--pap-btn-r, var(--soft-r));
	background: var(--pap-btn-bg, var(--glass));
	color: var(--pap-btn-cor, #fff) !important;
	border: var(--pap-btn-bd, 1px solid var(--line));
	box-shadow: var(--pap-btn-sh, none);
	font-size: clamp(.98rem, .94rem + .25vw, 1.12rem);
	line-height: 1.3;
	transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.pulse-sec a.pulse-pill.pap-btn:hover {
	background: var(--pap-btn-hbg, var(--pap-btn-bg, var(--glass-2)));
	color: var(--pap-btn-hcor, var(--pap-btn-cor, #fff)) !important;
}

.pulse-sec a.pap-btn.pap-btn--s { padding: .7rem 1.6rem; font-size: calc(.9rem * var(--text-scale, 1)); }
.pulse-sec a.pap-btn.pap-btn--l { padding: 1.25rem 3rem; font-size: calc(1.12rem * var(--text-scale, 1)); }
.pulse-sec a.pap-btn.pap-btn--full { width: 100%; }
.pulse-sec .pap-btn .pap-btn__icone { width: 1.05em; height: 1.05em; flex: none; }
.pulse-sec a.pap-btn.pap-btn-hv-elevar:hover { transform: translateY(-4px); }
.pulse-sec a.pap-btn.pap-btn-hv-escurecer:hover { filter: brightness(.86); }
.pulse-sec a.pap-btn.pap-btn-hv-inverter:hover {
	background: var(--pap-btn-cor, #0b0b20);
	color: var(--pap-btn-bg, #fff);
}
/* Inverter nos botões com cor !important própria (CTA/pills): repõe a troca. */
.pulse-sec a.pulse-cta__btn.pap-btn.pap-btn-hv-inverter:hover {
	background: var(--pap-btn-cor, #060613);
	color: var(--pap-btn-bg, #fff) !important;
}
.pulse-sec a.pulse-pill.pap-btn.pap-btn-hv-inverter:hover {
	background: var(--pap-btn-cor, #fff);
	color: var(--pap-btn-bg, var(--glass)) !important;
}

/* ============================================================================
 * CONTENTOR — opacidade do fundo e vídeo de fundo
 * ========================================================================== */
/* Cor de fundo com transparência: o inline background:<cor> do render legado
   ganharia (vem depois no style) — a classe+var com !important resolve. */
section.pulse-sec.pap-bga { background: var(--pap-ctn-bga) !important; }

section.pulse-sec.pap-has-video {
	position: relative;
	isolation: isolate;
}
section.pulse-sec.pap-has-video .pap-ctn-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	pointer-events: none;
}

/* ============================================================================
 * ANIMAÇÕES DE ENTRADA — progressivas e seguras (padrão do reveal dos KPIs):
 * .pap-anim (estado escondido) só é adicionada PELO JS (sections.js), com
 * IntersectionObserver disponível e sem "movimento reduzido". Sem JS nada
 * fica escondido. .pap-vis revela quando o elemento entra no ecrã.
 * ========================================================================== */
.pulse-sec .pap-anim,
section.pulse-sec.pap-anim {
	opacity: 0;
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.pulse-sec .pap-anim.pap-in-rise,
section.pulse-sec.pap-anim.pap-in-rise { transform: translateY(18px); }
.pulse-sec .pap-anim.pap-in-zoom,
section.pulse-sec.pap-anim.pap-in-zoom { transform: scale(.94); }
.pulse-sec .pap-anim.pap-vis,
section.pulse-sec.pap-anim.pap-vis {
	opacity: 1;
	transform: none;
}

/* Cinto e suspensórios: mesmo que a classe chegue a existir com movimento
   reduzido, nada fica invisível. */
@media (prefers-reduced-motion: reduce) {
	.pulse-sec .pap-anim,
	section.pulse-sec.pap-anim {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================================================
 * AUDIT — tema claro (html.pulse-claro): o fallback da sombra da média
 * acompanha o AUDIT do tema.css (rgba de tinta, mais leve). Uma sombra
 * escolhida pelo editor (--pap-m-sh) mantém-se igual nos dois temas.
 * ========================================================================== */
html.pulse-claro .pulse-sec .pap-media img,
html.pulse-claro .pulse-sec .pap-media video {
	box-shadow: var(--pap-m-sh, 0 40px 90px -40px rgba(22, 22, 92, .28));
}

/* ============================================================================
 * FASE 2A — fallbacks contextuais por bloco. O .pap-media genérico assume o
 * ADN da média "solta" (moldura, sombra, altura auto); nos contextos abaixo
 * os fallbacks são repostos para o aspeto atual DESSE bloco. Fica DEPOIS do
 * AUDIT para ganhar os desempates de ordem (ex.: sombra do tema claro).
 * ========================================================================== */

/* HERO — média de fundo: o render marca o <picture> (imagem) ou o próprio
   <video>. Fundo full-bleed → sem moldura/sombra, altura total; filtros e
   opacidade (inline) aplicam-se por cima do aspeto de sempre. */
.pulse-sec .pulse-hero picture.pap-media img,
html.pulse-claro .pulse-sec .pulse-hero picture.pap-media img,
.pulse-sec .pulse-hero video.pap-media {
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	border: 0;
	box-shadow: none;
	height: 100% !important;
	filter: var(--pap-m-filter, none) !important;
	background: transparent !important;
}

/* CARTÕES (grelha) — wrapper .pulse-card__media (só existe com aparência
   definida). Fallbacks = aspeto atual do cartão: proporção 4:3, sem moldura
   própria na imagem (o cartão já tem raio+borda+clip). Recorte/zona voltam
   a ganhar ao object-fit fixo do sections.css. */
.pulse-sec .pulse-card .pulse-card__media { display: block; }
.pulse-sec .pulse-card .pap-media img,
html.pulse-claro .pulse-sec .pulse-card .pap-media img {
	aspect-ratio: var(--pap-m-ratio, 4 / 3) !important;
	border-radius: 0 !important;
	border: 0;
	box-shadow: none;
	object-fit: var(--pap-m-fit, cover);
	object-position: var(--pap-m-pos, 50% 50%);
}
/* O véu acompanha a imagem quadrada do cartão (sem cantos herdados). */
.pulse-sec .pulse-card .pap-ov::after { border-radius: 0; }

/* CONTENTOR — "Largura do conteúdo" em secções com teto próprio (Texto usa o
   container estreito; CTA tem teto de 58rem): quando o emissor escreve --maxw
   na secção, o teto cede à escolha do editor. */
.pulse-sec[style*="--maxw:"] .pulse-sec__container--narrow,
.pulse-sec--cta[style*="--maxw:"] .pulse-sec__container { max-width: var(--maxw); }

/* ============================================================================
 * FASE 2B — fallbacks contextuais dos 6 blocos restantes (logos, marcas,
 * notícias, blocos de conteúdo, cartões de navegação, KPIs). Mesmo princípio
 * da FASE 2A: cada contexto repõe o ADN do bloco e deixa as vars --pap-*
 * mandarem só no que o editor escolher.
 * ========================================================================== */

/* LOGÓTIPOS — a fila mascara os logos a branco (tema escuro) ou a tinta
   (tema claro). Os FILTROS do editor compõem-se no wrapper .pulse-logo (por
   cima da máscara), e a máscara do <img> é reafirmada para o .pap-media
   genérico não a substituir; moldura/sombra/largura genéricas são repostas
   a zero (o logo é um recorte transparente). */
.pulse-sec .pulse-logo.pap-media { filter: var(--pap-m-filter, none); }
.pulse-sec .pulse-logo.pap-media img.pulse-logo__img,
html.pulse-claro .pulse-sec .pulse-logo.pap-media img.pulse-logo__img {
	width: auto;
	height: auto !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	border: 0;
	box-shadow: none;
	background: transparent !important;
	object-fit: contain;
}
.pulse-sec .pulse-logo.pap-media img.pulse-logo__img { filter: brightness(0) invert(1) !important; }
/* Tema claro: silhueta escura, como no tema.css (que este seletor vence). */
html.pulse-claro .pulse-sec .pulse-logo.pap-media img.pulse-logo__img { filter: brightness(0) !important; }
/* Preset "Fundo claro": logos em cores originais, como no preset da casa. */
.pulse-sec--bg-light .pulse-logo.pap-media img.pulse-logo__img { filter: none !important; }

/* MARCAS — logótipo da marca: wrapper .pulse-brand__media (só existe com
   aparência definida), com a mesma composição de filtros dos logótipos. */
.pulse-sec .pulse-brand__media { display: block; filter: var(--pap-m-filter, none); }
.pulse-sec .pulse-brand__media img.pulse-brand__logo,
html.pulse-claro .pulse-sec .pulse-brand__media img.pulse-brand__logo {
	width: auto;
	height: auto !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	border: 0;
	box-shadow: none;
	background: transparent !important;
	object-fit: contain;
}
.pulse-sec .pulse-brand__media img.pulse-brand__logo { filter: brightness(0) invert(1) !important; }
html.pulse-claro .pulse-sec .pulse-brand__media img.pulse-brand__logo { filter: brightness(0) !important; }
.pulse-sec--bg-light .pulse-brand__media img.pulse-brand__logo { filter: none !important; }

/* MARCAS — descrição (.pulse-brand__desc): multiplicadores de tipografia
   (não tem clamp próprio → multiplica o tamanho herdado). Fallbacks = atual. */
.pulse-sec .pulse-brand__desc {
	font-size: calc(1em * var(--pap-t-e, 1) * var(--pap-t-eb, 1));
	line-height: calc(1.7 * var(--pap-t-lh, 1));
	max-width: var(--pap-t-maxw, 70ch);
}

/* MARCAS — CTA "Ver mais" (.pulse-brand__cta): ADN atual como fallback;
   dimensões/tipografia herdadas ficam como estavam. (No tema claro, o
   tema.css continua a ganhar — o mesmo desempate aceite na FASE 2A para o
   CTA e as pills.) */
.pulse-sec a.pulse-brand__cta.pap-btn {
	gap: .7rem;
	padding: .8rem 2rem;
	font-size: inherit;
	line-height: normal;
	border-radius: var(--pap-btn-r, var(--pill));
	background: var(--pap-btn-bg, #fff);
	color: var(--pap-btn-cor, #060613) !important;
	border: var(--pap-btn-bd, 0);
	box-shadow: var(--pap-btn-sh, 0 14px 36px -14px rgba(255, 255, 255, .3));
	transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.pulse-sec a.pulse-brand__cta.pap-btn:hover {
	background: var(--pap-btn-hbg, var(--pap-btn-bg, #fff));
	color: var(--pap-btn-hcor, var(--pap-btn-cor, #060613)) !important;
	box-shadow: var(--pap-btn-sh, 0 20px 44px -14px rgba(255, 255, 255, .45));
}
.pulse-sec a.pulse-brand__cta.pap-btn.pap-btn-hv-inverter:hover {
	background: var(--pap-btn-cor, #060613);
	color: var(--pap-btn-bg, #fff) !important;
}

/* NOTÍCIAS — thumbnail: wrapper .pulse-news__media (só existe com aparência
   definida). Fallbacks = aspeto atual do cartão (16:10, sem moldura própria —
   o cartão já tem borda+raio+clip); recorte/zona/proporção voltam às vars. */
.pulse-sec .pulse-news__item .pulse-news__media { display: block; }
.pulse-sec .pulse-news__item .pap-media img.pulse-news__img,
html.pulse-claro .pulse-sec .pulse-news__item .pap-media img.pulse-news__img {
	width: 100%;
	height: auto !important;
	aspect-ratio: var(--pap-m-ratio, 16 / 10) !important;
	border-radius: 0 !important;
	border: 0;
	box-shadow: none;
	object-fit: var(--pap-m-fit, cover);
	object-position: var(--pap-m-pos, 50% 50%);
}
/* O véu acompanha a imagem do cartão (sem cantos herdados). */
.pulse-sec .pulse-news__item .pap-ov::after { border-radius: 0; }

/* NOTÍCIAS — botão "Ver mais" (.pulse-news__more): ADN atual como fallback. */
.pulse-sec a.pulse-news__more.pap-btn {
	gap: .7rem;
	padding: .95rem 2.3rem;
	font-size: 1.05rem;
	line-height: normal;
	border-radius: var(--pap-btn-r, var(--pill));
	background: var(--pap-btn-bg, #fff);
	color: var(--pap-btn-cor, #060613) !important;
	border: var(--pap-btn-bd, 0);
	box-shadow: var(--pap-btn-sh, 0 14px 40px -16px rgba(255, 255, 255, .3));
	transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.pulse-sec a.pulse-news__more.pap-btn:hover {
	background: var(--pap-btn-hbg, var(--pap-btn-bg, #fff));
	color: var(--pap-btn-hcor, var(--pap-btn-cor, #060613)) !important;
	box-shadow: var(--pap-btn-sh, 0 20px 48px -16px rgba(255, 255, 255, .45));
}
.pulse-sec a.pulse-news__more.pap-btn.pap-btn-hv-inverter:hover {
	background: var(--pap-btn-cor, #060613);
	color: var(--pap-btn-bg, #fff) !important;
}

/* BLOCOS DE CONTEÚDO — imagem do painel (.pulse-acc__img): fallbacks =
   aspeto atual (4:3, cantos suaves, linha fina, sem sombra); o object-fit
   ganha !important para o "Conter" do editor furar o cover fixo da casa. */
.pulse-sec .pulse-acc__img.pap-media img,
html.pulse-claro .pulse-sec .pulse-acc__img.pap-media img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: var(--pap-m-ratio, 4 / 3) !important;
	border-radius: var(--pap-m-r, var(--soft-r)) !important;
	border: var(--pap-m-bw, 1px) solid var(--pap-m-bc, var(--line));
	box-shadow: var(--pap-m-sh, none);
	object-fit: var(--pap-m-fit, cover) !important;
	object-position: var(--pap-m-pos, 50% 50%);
}

/* CARTÕES DE NAVEGAÇÃO — só FILTROS: a classe pap-media vai no próprio
   img/video e esta regra (mais específica) fura o filter:none !important
   da casa. Tudo o resto do cartão fica intocado. */
.pulse-sec .pulse-navcard .pulse-navcard__img.pap-media {
	filter: var(--pap-m-filter, none) !important;
}

/* KPIs — campos próprios dos números (vars --pap-kpi-* na secção, só quando
   diferem do default). Os seletores por atributo só se aplicam COM a var
   escrita → sem escolhas, os defaults (incl. o preset "Fundo claro") mandam. */
.pulse-sec[style*="--pap-kpi-cor"] .pulse-kpi__num { color: var(--pap-kpi-cor); }
.pulse-sec[style*="--pap-kpi-seg"] .pulse-kpi::before { background: var(--pap-kpi-seg); }

/* Ajuste mobile da tipografia (--pap-t-mob → --pap-t-eb) nos novos alvos. */
@media (max-width: 820px) {
	.pulse-sec .pulse-acc__trigger,
	.pulse-sec .pulse-brand__desc { --pap-t-eb: var(--pap-t-mob, 1); }
}
