/* ============================================================================
 * PULSE — CONTACTOS (bloco pulse-contactos + modal do formulário CF7)
 * ----------------------------------------------------------------------------
 * · Cartões scoped a .pulse-sec — herdam os tokens locais (--ink/--muted/
 *   --glass/--line/--soft-r/…) do sections.css, que o tema.css redefine no
 *   tema claro (html.pulse-claro). Carrega DEPOIS do sections.css
 *   (dependência do handle) — mesma cascata.
 * · O MODAL vive em <body> (o contactos.js move-o para lá, fora de
 *   antepassados com transform) — fora do escopo .pulse-sec, por isso define
 *   os SEUS tokens --cm-* aqui, com o par claro em html.pulse-claro.
 * · Estética: cartões da casa (vagas/valores) — glass, borda fina, hover de
 *   elevação subtil, cantos --soft-r; botão forte em pílula (inverte no claro).
 * ========================================================================== */

/* Tokens do botão forte (mesma mecânica do recrutamento.css): no escuro é
 * branco com tinta escura; no claro inverte para tinta navy com texto branco. */
section.pulse-sec.pulse-sec--contactos {
	--ct-btn-bg: #ffffff;
	--ct-btn-ink: #060613;
}

html.pulse-claro section.pulse-sec.pulse-sec--contactos {
	--ct-btn-bg: var(--ink);
	--ct-btn-ink: #ffffff;
}

/* ---- Intro (o .pulse-sec__prose não traz respiro inferior) ---------------- */
.pulse-sec .pulse-contactos__intro {
	margin-bottom: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
}

/* ============================================================================
 * GRELHA DE CARTÕES DE CONTACTO
 * ========================================================================== */
.pulse-sec ul.pulse-contactos__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
	gap: var(--gap);
}

/* v1.245: colunas FIXAS da grelha — classe do render (campo "Colunas dos
 * cartões"; sem escolha não sai classe nenhuma → byte-igual). Mesma
 * especificidade da base (0,2,1) — ganham por vir DEPOIS; o responsivo no fim
 * do ficheiro volta a empilhar (3/4 → 2 → 1) nos ecrãs estreitos. */
.pulse-sec ul.pulse-contactos__grid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.pulse-sec ul.pulse-contactos__grid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.pulse-sec ul.pulse-contactos__grid--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.pulse-sec .pulse-contactos__cel {
	display: flex;
	min-width: 0;
}

.pulse-sec .pulse-contacto {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	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);
	color: var(--ink);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.pulse-sec a.pulse-contacto {
	text-decoration: none !important;
	transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}

.pulse-sec a.pulse-contacto:hover {
	transform: translateY(-6px);
	border-color: var(--line-2);
	background: var(--glass-2);
}

/* Ícone num disco fino — eco do traço/segmento accent da casa. */
.pulse-sec .pulse-contacto__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--eyebrow);
	background: var(--glass);
	margin-bottom: .45rem;
	transition: border-color .35s var(--ease);
}

.pulse-sec a.pulse-contacto:hover .pulse-contacto__icone {
	border-color: var(--line-2);
}

.pulse-sec .pulse-contacto__icone .pulse-contacto__svg {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
}

.pulse-sec .pulse-contacto__rotulo {
	color: var(--eyebrow);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .16em;
}

.pulse-sec .pulse-contacto__valor {
	color: var(--head);
	font-size: calc(clamp(1.05rem, .98rem + .4vw, 1.3rem) * var(--text-scale, 1));
	line-height: 1.35;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.pulse-sec .pulse-contacto__nota {
	color: var(--muted);
	font-size: .88rem;
	line-height: 1.5;
}

/* Affordance de link: setinha ↗ discreta a seguir ao valor (só em cartões-link). */
.pulse-sec a.pulse-contacto .pulse-contacto__valor::after {
	content: "\2197";
	font-size: .72em;
	margin-left: .4em;
	color: var(--eyebrow);
	display: inline-block;
	transition: transform .3s var(--ease);
}

.pulse-sec a.pulse-contacto:hover .pulse-contacto__valor::after {
	transform: translate(2px, -2px);
}

/* ============================================================================
 * AÇÃO — botão que abre o modal (+ aviso only-editor sem formulário)
 * ========================================================================== */
.pulse-sec .pulse-contactos__acao {
	margin-top: clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
}

.pulse-sec button.pulse-contactos__btn,
.pulse-sec span.pulse-contactos__btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .7rem;
	min-height: 2.75rem;
	background: var(--ct-btn-bg);
	color: var(--ct-btn-ink);
	border: 0;
	border-radius: var(--pill);
	padding: .95rem 2.3rem;
	font: inherit;
	font-size: 1.05rem;
	cursor: pointer;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.pulse-sec span.pulse-contactos__btn {
	cursor: default;
}

.pulse-sec .pulse-contactos__btn::after {
	content: "\2192";
	transition: transform .3s var(--ease);
}

.pulse-sec button.pulse-contactos__btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 48px -16px rgba(0, 0, 0, .45);
}

.pulse-sec button.pulse-contactos__btn:hover::after {
	transform: translateX(4px);
}

.pulse-sec button.pulse-contactos__btn:focus-visible {
	outline: 2px solid var(--eyebrow);
	outline-offset: 3px;
}

/* O display:inline-flex acima ganharia ao [hidden] do UA — repõe o escondido
   (o botão nasce hidden e só o contactos.js o revela, com o modal pronto). */
.pulse-sec .pulse-contactos__btn[hidden] {
	display: none !important;
}

/* v1.79.1: RECONCILIAÇÃO com o builder "Botão — aparência" (pap-btn).
   As regras genéricas do pap-btn (aparencia.css) são todas para `a.pap-btn`;
   este botão é <button>/<span>, por isso NENHUMA lhe pegava — as vars
   --pap-btn-* eram emitidas mas ninguém as lia.
   CADA propriedade só entra quando o painel a definiu MESMO — deteta-se a var no
   style inline (`[style*="--pap-btn-x"]`, o mesmo truque do [style*="background:"]
   usado noutras partes da casa). Isto é ESSENCIAL: se a regra fosse
   incondicional (v1.79), uma só escolha no painel — p.ex. a cor do texto —
   arrastava o FUNDO e a BORDA para o padrão do tema e o botão deixava de
   acompanhar as Definições do Tema (o global). Assim, o per-bloco sobrepõe só o
   que escolheste; o resto continua a vir do Global. O atributo eleva a
   especificidade a 0,4,1 → ganha ao Global (0,2,1). Sem escolhas, byte-igual. */
.pulse-sec button.pulse-contactos__btn.pap-btn[style*="--pap-btn-bg"],
.pulse-sec span.pulse-contactos__btn.pap-btn[style*="--pap-btn-bg"] {
	background: var(--pap-btn-bg);
}

.pulse-sec button.pulse-contactos__btn.pap-btn[style*="--pap-btn-cor"],
.pulse-sec span.pulse-contactos__btn.pap-btn[style*="--pap-btn-cor"] {
	color: var(--pap-btn-cor);
}

.pulse-sec button.pulse-contactos__btn.pap-btn[style*="--pap-btn-bd"],
.pulse-sec span.pulse-contactos__btn.pap-btn[style*="--pap-btn-bd"] {
	border: var(--pap-btn-bd);
}

.pulse-sec button.pulse-contactos__btn.pap-btn[style*="--pap-btn-r"],
.pulse-sec span.pulse-contactos__btn.pap-btn[style*="--pap-btn-r"] {
	border-radius: var(--pap-btn-r);
}

.pulse-sec button.pulse-contactos__btn.pap-btn[style*="--pap-btn-sh"],
.pulse-sec span.pulse-contactos__btn.pap-btn[style*="--pap-btn-sh"] {
	box-shadow: var(--pap-btn-sh);
}

.pulse-sec button.pulse-contactos__btn.pap-btn[style*="--pap-btn-hbg"]:hover {
	background: var(--pap-btn-hbg);
}

.pulse-sec button.pulse-contactos__btn.pap-btn[style*="--pap-btn-hcor"]:hover {
	color: var(--pap-btn-hcor);
}

/* Tamanho, largura, ícone e efeitos de rato — os modificadores do pap-btn são
   `a.pap-btn--*` (só <a>), por isso também não pegavam aqui. Mesmos valores do
   aparencia.css, agora a alcançar o <button>/<span>. */
.pulse-sec button.pulse-contactos__btn.pap-btn--s,
.pulse-sec span.pulse-contactos__btn.pap-btn--s {
	padding: .7rem 1.6rem;
	font-size: calc(.9rem * var(--text-scale, 1));
}

.pulse-sec button.pulse-contactos__btn.pap-btn--l,
.pulse-sec span.pulse-contactos__btn.pap-btn--l {
	padding: 1.25rem 3rem;
	font-size: calc(1.12rem * var(--text-scale, 1));
}

.pulse-sec button.pulse-contactos__btn.pap-btn--full,
.pulse-sec span.pulse-contactos__btn.pap-btn--full {
	width: 100%;
}

.pulse-sec .pulse-contactos__btn.pap-btn .pap-btn__icone {
	width: 1.05em;
	height: 1.05em;
	flex: none;
}

.pulse-sec button.pulse-contactos__btn.pap-btn-hv-elevar:hover {
	transform: translateY(-4px);
}

.pulse-sec button.pulse-contactos__btn.pap-btn-hv-escurecer:hover {
	filter: brightness(.86);
}

.pulse-sec button.pulse-contactos__btn.pap-btn-hv-inverter:hover {
	background: var(--pap-btn-cor, var(--ct-btn-ink));
	color: var(--pap-btn-bg, var(--ct-btn-bg));
}

.pulse-sec .pulse-contactos__aviso {
	margin: 0;
	color: var(--muted);
	font-size: .9rem;
	border: 1px dashed var(--line-2);
	border-radius: var(--soft-r);
	padding: .8rem 1.1rem;
}

/* ============================================================================
 * MODAL — .pulse-cmodal (vive em <body>, tokens próprios claro/escuro)
 * ========================================================================== */
.pulse-cmodal {
	--cm-scrim: rgba(4, 4, 16, .66);
	--cm-bg: #0d0d24;
	--cm-head: #ffffff;
	--cm-ink: #eef0fb;
	--cm-muted: rgba(238, 240, 251, .62);
	--cm-eyebrow: #99a0f5;
	--cm-line: rgba(255, 255, 255, .12);
	--cm-line-2: rgba(255, 255, 255, .3);
	--cm-glass: rgba(255, 255, 255, .05);
	--cm-glass-2: rgba(255, 255, 255, .09);
	--cm-btn-bg: #ffffff;
	--cm-btn-ink: #060613;
	--cm-erro: #ff9d97;
	--cm-ease: cubic-bezier(.2, .7, .2, 1);

	position: fixed;
	inset: 0;
	z-index: 9500;
	/* acima do painel da navbar (9400) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(.9rem, 3vw, 2rem);
	font-family: var(--pulse-font-sans, "Questrial", system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.pulse-cmodal[hidden] {
	display: none;
}

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

/* Tema claro — paleta espelhada do tema.css (tinta navy sobre lilás-claro). */
html.pulse-claro .pulse-cmodal {
	--cm-scrim: rgba(22, 22, 92, .5);
	--cm-bg: #f4f5fb;
	--cm-head: #10104a;
	--cm-ink: #16165c;
	--cm-muted: rgba(22, 22, 92, .72);
	--cm-line: rgba(22, 22, 92, .16);
	--cm-line-2: rgba(22, 22, 92, .34);
	--cm-glass: rgba(22, 22, 92, .05);
	--cm-glass-2: rgba(22, 22, 92, .09);
	--cm-btn-bg: #16165c;
	--cm-btn-ink: #ffffff;
	--cm-erro: #b3261e;
}

.pulse-cmodal__scrim {
	position: absolute;
	inset: 0;
	background: var(--cm-scrim);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .26s var(--cm-ease);
}

.pulse-cmodal__painel {
	position: relative;
	width: min(40rem, 100%);
	max-height: 86vh;
	max-height: 86svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--cm-bg);
	color: var(--cm-ink);
	border: 1px solid var(--cm-line);
	border-radius: 18px;
	/* --soft-r da casa */
	padding: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem);
	box-shadow: 0 48px 110px -32px rgba(0, 0, 0, .65);
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .26s var(--cm-ease), transform .26s var(--cm-ease);
}

/* .is-open é posto pelo contactos.js num requestAnimationFrame após remover
   o hidden — é isso que faz a transição de entrada correr. */
.pulse-cmodal.is-open .pulse-cmodal__scrim {
	opacity: 1;
}

.pulse-cmodal.is-open .pulse-cmodal__painel {
	opacity: 1;
	transform: none;
}

.pulse-cmodal__fechar {
	position: absolute;
	top: .9rem;
	right: .9rem;
	width: 2.5rem;
	height: 2.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	background: var(--cm-glass);
	border: 1px solid var(--cm-line);
	border-radius: 50%;
	color: var(--cm-ink);
	cursor: pointer;
	padding: 0;
	transition: border-color .3s var(--cm-ease), background .3s var(--cm-ease);
}

.pulse-cmodal__fechar:hover {
	border-color: var(--cm-line-2);
	background: var(--cm-glass-2);
}

.pulse-cmodal__fechar:focus-visible {
	outline: 2px solid var(--cm-eyebrow);
	outline-offset: 3px;
}

.pulse-cmodal__fechar svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

.pulse-cmodal__titulo {
	margin: 0 0 .55rem;
	padding-right: 3rem;
	/* não colide com o botão de fechar */
	color: var(--cm-head);
	font-family: inherit;
	font-weight: 400;
	font-size: clamp(1.45rem, 1.2rem + 1.2vw, 2rem);
	letter-spacing: -.02em;
	line-height: 1.1;
}

.pulse-cmodal__texto {
	margin: 0 0 1.4rem;
	color: var(--cm-muted);
	line-height: 1.6;
	max-width: 46ch;
}

/* Sem texto de apoio, o formulário precisa do mesmo respiro. */
.pulse-cmodal__titulo+.pulse-cmodal__form {
	margin-top: 1.4rem;
}

/* ---- Formulário CF7 dentro do modal (receita da casa, tokens --cm-*) ------ */
.pulse-cmodal__form .wpcf7-form {
	display: grid;
	gap: 1.05rem;
}

.pulse-cmodal__form .wpcf7-form>p {
	margin: 0;
}

.pulse-cmodal__form label {
	display: block;
	color: var(--cm-muted);
	font-size: .92rem;
}

.pulse-cmodal__form .wpcf7-form-control-wrap {
	display: block;
	margin-top: .35rem;
}

.pulse-cmodal__form input[type="text"],
.pulse-cmodal__form input[type="email"],
.pulse-cmodal__form input[type="tel"],
.pulse-cmodal__form input[type="url"],
.pulse-cmodal__form input[type="number"],
.pulse-cmodal__form select,
.pulse-cmodal__form textarea {
	width: 100%;
	background: var(--cm-glass);
	border: 1px solid var(--cm-line);
	border-radius: 12px;
	color: var(--cm-ink);
	padding: .8rem 1rem;
	font: inherit;
	font-size: 1rem;
	transition: border-color .3s var(--cm-ease), background .3s var(--cm-ease), box-shadow .3s var(--cm-ease);
}

.pulse-cmodal__form input::placeholder,
.pulse-cmodal__form textarea::placeholder {
	color: var(--cm-muted);
}

.pulse-cmodal__form input[type="text"]:focus,
.pulse-cmodal__form input[type="email"]:focus,
.pulse-cmodal__form input[type="tel"]:focus,
.pulse-cmodal__form input[type="url"]:focus,
.pulse-cmodal__form input[type="number"]:focus,
.pulse-cmodal__form select:focus,
.pulse-cmodal__form textarea:focus {
	border-color: var(--cm-line-2);
	background: var(--cm-glass-2);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(153, 160, 245, .28);
	/* anel de foco acessível */
}

.pulse-cmodal__form textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.pulse-cmodal__form input[type="checkbox"] {
	width: auto;
}

/* Upload (se o formulário escolhido tiver ficheiro) */
.pulse-cmodal__form input[type="file"] {
	width: 100%;
	color: var(--cm-muted);
	font-size: .95rem;
	padding: .55rem 0;
}

.pulse-cmodal__form input[type="file"]::file-selector-button {
	background: var(--cm-glass-2);
	border: 1px solid var(--cm-line);
	color: var(--cm-ink);
	border-radius: 999px;
	padding: .5rem 1.15rem;
	margin-right: .9rem;
	font: inherit;
	font-size: .95rem;
	cursor: pointer;
	transition: border-color .3s var(--cm-ease);
}

.pulse-cmodal__form input[type="file"]::file-selector-button:hover {
	border-color: var(--cm-line-2);
}

/* v1.263: o botão e o nome desenhados pelo plugin (cf7-ficheiro.php), no
   idioma da página — o mesmo aspeto do ::file-selector-button acima. */
.pulse-cmodal__form .pulse-fich__btn {
	background: var(--cm-glass-2);
	border: 1px solid var(--cm-line);
	color: var(--cm-ink);
	border-radius: 999px;
	padding: .5rem 1.15rem;
	font-size: .95rem;
	transition: border-color .3s var(--cm-ease);
}

.pulse-cmodal__form .pulse-fich:hover .pulse-fich__btn {
	border-color: var(--cm-line-2);
}

.pulse-cmodal__form .pulse-fich__nome {
	color: var(--cm-muted);
	opacity: 1;
}

.pulse-cmodal__form .pulse-fich__nome:not(.is-vazio) {
	color: var(--cm-ink);
}

/* Submeter — botão forte da casa (inverte no claro via tokens) */
.pulse-cmodal__form input.wpcf7-submit {
	justify-self: start;
	appearance: none;
	-webkit-appearance: none;
	background: var(--cm-btn-bg);
	color: var(--cm-btn-ink);
	border: 0;
	border-radius: 999px;
	min-height: 2.75rem;
	padding: .95rem 2.3rem;
	font: inherit;
	font-size: 1.05rem;
	cursor: pointer;
	transition: transform .3s var(--cm-ease), box-shadow .3s var(--cm-ease);
}

.pulse-cmodal__form input.wpcf7-submit:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 48px -16px rgba(0, 0, 0, .45);
}

.pulse-cmodal__form input.wpcf7-submit:focus-visible {
	outline: 2px solid var(--cm-eyebrow);
	outline-offset: 3px;
}

.pulse-cmodal__form .wpcf7-spinner {
	margin-left: .8rem;
}

/* Validação + resposta do CF7 */
.pulse-cmodal__form .wpcf7-not-valid-tip {
	color: var(--cm-erro);
	font-size: .85rem;
	margin-top: .3rem;
}

.pulse-cmodal__form .wpcf7-response-output {
	border: 1px solid var(--cm-line-2) !important;
	border-radius: 12px;
	padding: .9rem 1.15rem !important;
	margin: 0 !important;
	color: var(--cm-ink);
}

.pulse-cmodal__form .wpcf7-form.invalid .wpcf7-response-output,
.pulse-cmodal__form .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--cm-erro) !important;
	color: var(--cm-erro);
}

/* Bloqueia o scroll da página com o modal aberto (padrão do pulse-drawer). */
html.pulse-cmodal-lock {
	overflow: hidden;
}

/* ============================================================================
 * RESPONSIVO — os cartões empilham; o painel do modal aproveita o ecrã
 * (≤820px a página tem scroll-snap "1 secção = 1 ecrã": o `safe center` do
 * sections.css já alinha ao início quando os cartões excedem a altura)
 * ========================================================================== */
/* v1.245: as colunas FIXAS 3/4 apertavam demais no tablet — caem para 2 antes
 * de empilhar (a automática já o faz sozinha pelo minmax). */
@media (max-width: 1024px) {

	.pulse-sec ul.pulse-contactos__grid--cols-3,
	.pulse-sec ul.pulse-contactos__grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	/* v1.245: os modificadores --cols-* têm a mesma especificidade e vêm depois
	   da base — sem os repetir aqui, uma grelha fixa nunca empilhava no
	   telemóvel. */
	.pulse-sec ul.pulse-contactos__grid,
	.pulse-sec ul.pulse-contactos__grid--cols-2,
	.pulse-sec ul.pulse-contactos__grid--cols-3,
	.pulse-sec ul.pulse-contactos__grid--cols-4 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.pulse-cmodal {
		padding: .6rem;
	}

	.pulse-cmodal__painel {
		padding: 1.4rem 1.15rem;
		max-height: 92vh;
		max-height: 92svh;
	}

	.pulse-sec button.pulse-contactos__btn,
	.pulse-sec span.pulse-contactos__btn {
		width: min(100%, 22rem);
	}
}

/* ============================================================================
 * ACESSIBILIDADE — movimento reduzido (o modal vive fora de .pulse-sec, logo
 * o bloco global do sections.css não lhe chega — regras próprias)
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.pulse-cmodal__scrim,
	.pulse-cmodal__painel,
	.pulse-cmodal__fechar,
	.pulse-cmodal__form input.wpcf7-submit {
		transition: none;
	}

	.pulse-cmodal__form input.wpcf7-submit:hover {
		transform: none;
	}
}