/*!
Theme Name: PH Eventos
Theme URI: https://pheventos.eu
Author: Pascoal Soares
Author URI: https://pheventos.eu
Description: Tema custom da PH Eventos — DJ e organização de eventos em Vila Nova de Gaia. Substitui BeTheme + WPBakery por uma stack vanilla focada em performance (PageSpeed Insights ≥ 90 mobile e desktop). Sem frameworks, sem page builders, sem jQuery.
Version: 0.40.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pheventos
Domain Path: /languages
Tags: dark, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   Fontes self-hosted (v0.16.0) — WOFF2 latin subset (gwfh)
   font-display: swap → fallback (Georgia/system) até carregar (evita FOIT)
   ============================================================ */

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-display/playfair-display-v40-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/playfair-display/playfair-display-v40-latin-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/playfair-display/playfair-display-v40-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/playfair-display/playfair-display-v40-latin-700italic.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/inter/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('assets/fonts/inter/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/inter/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/inter/inter-v20-latin-700.woff2') format('woff2');
}

/* ------------------------------------------------------------------
   Fontes de fallback com métricas ajustadas (v0.39.25)

   `font-display: swap` tem período de bloqueio ZERO: o texto pinta já na fonte
   do sistema e troca quando a WOFF2 chega. Se a fonte do sistema ocupar espaço
   diferente, essa troca desloca o layout — era a origem do CLS do hero (0,243).
   Pré-carregar as fontes só disfarçava: quando removemos o CSS render-blocking
   dos plugins, a página passou a pintar a 0,4s (em vez de ~1,3s), as fontes já
   não chegavam a tempo, e o shift voltou.

   Solução: declarar a fonte do sistema com as métricas da fonte real. A Georgia
   passa a ocupar exactamente o mesmo espaço que a Playfair, e a Arial o da Inter
   — a troca deixa de deslocar seja o que for, chegue a WOFF2 quando chegar.

   Valores medidos com fontTools sobre as próprias WOFF2 (a-z, A-Z, espaço):
   ver scratchpad/font_metrics2.py. NÃO editar à mão — recalcular se as fontes
   mudarem. O xAvgCharWidth do OS/2 da Georgia mente (0,44 vs 0,58 real), por
   isso a largura é medida glifo a glifo.
   ------------------------------------------------------------------ */
@font-face {
	font-family: 'PH Playfair Fallback';
	src: local('Georgia');
	size-adjust: 97.60%;
	ascent-override: 110.87%;
	descent-override: 25.72%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'PH Inter Fallback';
	src: local('Arial');
	size-adjust: 104.33%;
	ascent-override: 92.85%;
	descent-override: 23.12%;
	line-gap-override: 0%;
}

/* ============================================================
   Design tokens — PH Eventos
   ============================================================ */
:root {
	/* Paleta dark (sem fundo branco em lado nenhum) */
	--ph-bg: #0F0F0F;
	--ph-surface: #2a2a2a;
	--ph-text: #F5F5F0;
	--ph-text-muted: #B4B2A9;
	--ph-accent: #D4AF37;
	--ph-border: rgba(212, 175, 55, 0.15);

	/* Tipografia — ver as fontes de fallback com métricas ajustadas mais abaixo.
	   Têm de vir logo a seguir à fonte real: são elas que seguram o layout até a
	   WOFF2 chegar, e por isso a troca não desloca nada (CLS 0). */
	--ph-font-heading: "Playfair Display", "PH Playfair Fallback", Georgia, "Times New Roman", serif;
	--ph-font-body: "Inter", "PH Inter Fallback", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* Escala fluida */
	--ph-fs-base: 1rem;
	--ph-fs-sm: 0.875rem;
	--ph-fs-lg: 1.125rem;
	--ph-fs-h1: clamp(2rem, 5vw, 3.5rem);
	--ph-fs-h2: clamp(1.5rem, 3.5vw, 2.5rem);
	--ph-fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);

	/* Detalhes */
	--ph-tracking-detail: 0.12em;
	--ph-line-body: 1.6;
	--ph-line-heading: 1.2;

	/* Layout */
	--ph-container: 1200px;
	--ph-gutter: clamp(1rem, 3vw, 2rem);
}

/* ============================================================
   Reset mínimo + base
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ph-bg);
	color: var(--ph-text);
	font-family: var(--ph-font-body);
	font-size: var(--ph-fs-base);
	line-height: var(--ph-line-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--ph-accent);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ph-font-heading);
	line-height: var(--ph-line-heading);
	margin: 0 0 0.5em;
}

/* ============================================================
   Hero — non-critical
   (above-the-fold layout vive em inc/critical-css.php para LCP)
   ============================================================ */
.ph-cta {
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ph-cta:hover {
	background: var(--ph-bg);
	color: var(--ph-accent);
	text-decoration: none;
}

.ph-cta:focus-visible {
	background: var(--ph-bg);
	color: var(--ph-accent);
	outline: 2px solid var(--ph-accent);
	outline-offset: 2px;
	text-decoration: none;
}

/* ============================================================
   Header — non-critical (hover/focus + underline animado)
   ============================================================ */
.ph-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--ph-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.ph-menu a:hover,
.ph-menu a:focus-visible {
	color: var(--ph-accent);
}

.ph-menu a:hover::after,
.ph-menu a:focus-visible::after {
	transform: scaleX(1);
}

.ph-lang {
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.ph-lang:hover,
.ph-lang:focus-visible {
	opacity: 1;
}

.ph-burger:focus-visible,
.ph-nav-panel__close:focus-visible {
	outline: 2px solid var(--ph-accent);
	outline-offset: 2px;
}

/* Skip link — visível só com foco de teclado. */
.ph-skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ph-skip-link.screen-reader-text:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	z-index: 200;
	padding: 0.75rem 1rem;
	background: var(--ph-bg);
	color: var(--ph-accent);
	outline: 2px solid var(--ph-accent);
}

/* Utilitário genérico — esconde visualmente, mantém para leitores de ecrã. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Trust bar — below-the-fold (v0.4.4)
   5 indicadores de credibilidade sobre var(--ph-surface).
   ============================================================ */
.ph-trust {
	background: var(--ph-surface);
	border-top: 1px solid var(--ph-border);
	border-bottom: 1px solid var(--ph-border);
	padding: clamp(3rem, 6vw, 5rem) var(--ph-gutter);
}

.ph-trust__list {
	max-width: var(--ph-container);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.ph-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
}

/* Separadores verticais subtis — só desktop. */
.ph-trust__item + .ph-trust__item {
	border-left: 1px solid var(--ph-border);
}

.ph-trust__icon {
	color: var(--ph-accent);
}

.ph-trust__number {
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	color: var(--ph-accent);
}

.ph-trust__label {
	font-family: var(--ph-font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ph-text-muted);
}

.ph-trust__sublabel {
	margin-top: 0.25rem;
	font-family: var(--ph-font-body);
	font-size: 0.7rem;
	font-style: italic;
	color: var(--ph-text-muted);
}

/* Tablet: 2×2 (4 indicadores). */
@media (min-width: 768px) and (max-width: 1023px) {
	.ph-trust__list {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(2rem, 5vw, 3rem) 0;
	}

	/* Sem separadores verticais fora do desktop. */
	.ph-trust__item + .ph-trust__item {
		border-left: 0;
	}
}

@media (max-width: 767px) {
	.ph-trust__list {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 6vw, 3rem) 0;
	}

	.ph-trust__item {
		grid-column: auto;
	}

	.ph-trust__item + .ph-trust__item {
		border-left: 0;
	}
}

/* ============================================================
   Serviços principais — below-the-fold (v0.4.0)
   4 cards clicáveis sobre var(--ph-bg).
   ============================================================ */
.ph-servicos {
	background: var(--ph-bg);
	padding: clamp(3.5rem, 8vw, 6rem) var(--ph-gutter);
}

.ph-servicos__head {
	max-width: var(--ph-container);
	margin: 0 auto clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}

.ph-servicos__title {
	margin: 0;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: var(--ph-fs-h2);
	color: var(--ph-text);
}

.ph-servicos__title .ph-servicos__em {
	font-style: italic;
	color: var(--ph-accent);
}

.ph-servicos__sub {
	margin: 0.75rem 0 0;
	font-family: var(--ph-font-body);
	font-size: var(--ph-fs-lg);
	color: var(--ph-text-muted);
}

.ph-servicos__grid {
	max-width: var(--ph-container);
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

.ph-servico-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 460px;
	padding: 2rem 1.5rem;
	overflow: hidden;
	border: 1px solid var(--ph-border);
	text-decoration: none;
	transition: transform 0.4s ease;
}

.ph-servico-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.ph-servico-card__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(15, 15, 15, 0.5) 0%, rgba(15, 15, 15, 0.95) 100%);
	transition: opacity 0.4s ease;
}

.ph-servico-card__num {
	position: absolute;
	top: 1rem;
	left: 1.5rem;
	z-index: 2;
	font-family: var(--ph-font-heading);
	font-style: italic;
	font-size: 3rem;
	line-height: 1;
	color: var(--ph-accent);
	opacity: 0.5;
}

.ph-servico-card__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

.ph-servico-card__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
}

.ph-servico-card__icon svg {
	width: 24px;
	height: 24px;
	display: block;
	stroke: var(--ph-accent);
	stroke-width: 1.5;
	fill: none;
}

.ph-servico-card__name {
	min-height: 1.8em;
	margin: 1rem 0 0.75rem 0;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--ph-text);
}

.ph-servico-card__desc {
	min-height: 6rem;
	max-height: none;
	margin: 0;
	font-family: var(--ph-font-body);
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--ph-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ph-servico-card__cta {
	position: relative;
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--ph-font-body);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ph-accent);
}

/* Sublinhado animado do CTA — revela no hover/focus do card. */
.ph-servico-card__cta::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: var(--ph-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.ph-servico-card__link:hover {
	transform: scale(1.02);
}

.ph-servico-card__link:hover::before {
	opacity: 0.78;
}

.ph-servico-card__link:hover .ph-servico-card__cta::after,
.ph-servico-card__link:focus-visible .ph-servico-card__cta::after {
	transform: scaleX(1);
}

.ph-servico-card__link:focus-visible {
	outline: 2px solid var(--ph-accent);
	outline-offset: 2px;
}

@media (max-width: 1023px) {
	.ph-servicos__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.ph-servicos__grid {
		grid-template-columns: 1fr;
	}

	/* 1 coluna: cards mais altos (retrato) para preencher melhor o ecrã. */
	.ph-servico-card__link {
		min-height: 0;
		aspect-ratio: 3 / 4;
		padding: 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-servico-card__link,
	.ph-servico-card__link::before,
	.ph-servico-card__cta::after {
		transition: none;
	}

	.ph-servico-card__link:hover {
		transform: none;
	}
}

/* ============================================================
   Animações de entrada (v0.4.3)
   Decorativas e GPU-accelerated — zero impacto no LCP.
   ============================================================ */

/* 1. Spotlight breath no Hero — entre a imagem (z0) e o overlay (z2). */
.ph-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(circle at 20% 25%, rgba(212, 175, 55, 0.15), transparent 50%);
	transform-origin: 20% 25%;
	animation: ph-spotlight-breath 14s ease-in-out infinite alternate;
}

@keyframes ph-spotlight-breath {
	0% {
		transform: scale(1) translate(0, 0);
		opacity: 0.5;
	}
	100% {
		transform: scale(1.15) translate(2%, -1%);
		opacity: 0.8;
	}
}

/* 2. Glow subtil no "anos" (Playfair italic dourado). */
.ph-hero__em {
	animation: ph-glow-pulse 5s ease-in-out infinite alternate;
}

@keyframes ph-glow-pulse {
	0% {
		text-shadow: 0 0 12px rgba(212, 175, 55, 0.4), 0 0 24px rgba(212, 175, 55, 0.2);
	}
	100% {
		text-shadow: 0 0 18px rgba(212, 175, 55, 0.6), 0 0 36px rgba(212, 175, 55, 0.3);
	}
}

/* 4. Scroll reveal — estado inicial; .ph-reveal--visible (via JS) anima para visível. */
.ph-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ph-reveal--visible {
	opacity: 1;
	transform: translateY(0);
}

/* Sem JS: não esconder conteúdo (fallback de segurança). */
@media (scripting: none) {
	.ph-reveal {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-hero::after {
		animation: none;
	}

	.ph-hero__em {
		animation: none;
	}

	.ph-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   Como funciona — below-the-fold (v0.5.0)
   3 passos para contratar sobre var(--ph-bg).
   ============================================================ */
.ph-como-funciona {
	background: var(--ph-bg);
	padding: clamp(4rem, 8vw, 7rem) var(--ph-gutter);
}

.ph-como-funciona__inner {
	max-width: var(--ph-container);
	margin: 0 auto;
}

.ph-como-funciona__header {
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ph-como-funciona__header h2 {
	margin: 0;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3rem);
	color: var(--ph-text);
}

.ph-como-funciona__header p {
	margin: 0.5rem 0 0;
	font-family: var(--ph-font-body);
	font-style: italic;
	font-size: 1rem;
	color: var(--ph-text-muted);
}

.ph-como-funciona__steps {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
}

.ph-step {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 0 1rem;
}

.ph-step__num {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--ph-font-heading);
	font-style: italic;
	font-size: clamp(2.5rem, 4vw, 3.5rem);
	line-height: 1;
	color: var(--ph-accent);
	opacity: 0.4;
}

.ph-step__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 1.5rem;
	border: 1px solid var(--ph-border);
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.05);
	color: var(--ph-accent);
}

.ph-step__title {
	min-height: 1.8em;
	margin: 0 0 1rem;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--ph-text);
}

.ph-step__desc {
	max-width: 32ch;
	margin: 0 auto;
	font-family: var(--ph-font-body);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ph-text-muted);
}

/* Linha conectora horizontal — só desktop, à altura dos numerais/ícones. */
@media (min-width: 1024px) {
	.ph-como-funciona__steps::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 30%;
		left: 15%;
		right: 15%;
		height: 1px;
		background: linear-gradient(to right, transparent 0%, var(--ph-border) 20%, var(--ph-border) 80%, transparent 100%);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ph-step {
		padding: 0 0.5rem;
	}

	.ph-step__title {
		font-size: 1.25rem;
	}

	.ph-step__desc {
		font-size: 0.875rem;
	}
}

@media (max-width: 767px) {
	.ph-como-funciona__steps {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   Serviços Extras — below-the-fold (v0.6.0)
   Grelha plana 4x3 de cards compactos sobre var(--ph-bg).
   ============================================================ */
.ph-extras {
	background: var(--ph-bg);
	padding: clamp(4rem, 8vw, 7rem) var(--ph-gutter);
}

.ph-extras__inner {
	max-width: var(--ph-container);
	margin: 0 auto;
}

.ph-extras__header {
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ph-extras__title {
	margin: 0;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: var(--ph-fs-h2);
	color: var(--ph-text);
}

.ph-extras__title .ph-extras__em {
	font-style: italic;
	color: var(--ph-accent);
}

.ph-extras__sub {
	margin: 0.75rem auto 0;
	max-width: 600px;
	font-family: var(--ph-font-body);
	font-size: var(--ph-fs-lg);
	color: var(--ph-text-muted);
}

.ph-extras__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

.ph-extra-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 200px;
	padding: 1.5rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--ph-border);
	border-radius: 4px;
	text-decoration: none;
	transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.ph-extra-card__link:hover {
	border-color: rgba(212, 175, 55, 0.4);
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-2px);
}

.ph-extra-card__link:focus-visible {
	outline: 2px solid var(--ph-accent);
	outline-offset: 2px;
}

.ph-extra-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 1rem;
	border: 1px solid var(--ph-border);
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.05);
	color: var(--ph-accent);
}

.ph-extra-card__name {
	margin: 0 0 0.5rem;
	font-family: var(--ph-font-body);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ph-text);
}

.ph-extra-card__desc {
	margin: 0;
	font-family: var(--ph-font-body);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--ph-text-muted);
}

/* Card destaque — Pistolas CO2 LED. */
.ph-extra-card__link--featured {
	border-color: rgba(212, 175, 55, 0.4);
	background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.ph-extra-card__link--featured .ph-extra-card__icon {
	filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
}

.ph-extra-card__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.25rem 0.6rem;
	background: var(--ph-accent);
	color: var(--ph-bg);
	font-family: var(--ph-font-body);
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: 2px;
}

/* CTA global da secção. */
.ph-extras__cta {
	text-align: center;
	margin-top: clamp(3rem, 5vw, 4rem);
}

.ph-extras__cta p {
	max-width: 600px;
	margin: 0 auto 1.5rem;
	font-family: var(--ph-font-body);
	font-size: 1rem;
	color: var(--ph-text-muted);
}

.ph-extras__cta .ph-cta {
	margin-top: 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ph-extras__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.ph-extras__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-extra-card__link {
		transition: border-color 0.3s ease, background-color 0.3s ease;
	}

	.ph-extra-card__link:hover {
		transform: none;
	}
}

/* ============================================================
   Header — layout completo (v0.7.0)
   O critical CSS (inc/critical-css.php) duplica este subset só na homepage,
   para o LCP. Aqui garante-se o header em TODAS as páginas. Homepage: overlay
   absolute sobre o Hero. Páginas internas: variante --solid (relative + bg),
   para não tapar o conteúdo (risco identificado na v0.3.0).
   ============================================================ */
.ph-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	padding: 1.5rem 2rem;
}

.ph-header--solid {
	position: relative;
	background: var(--ph-bg);
	border-bottom: 1px solid var(--ph-border);
}

.ph-header__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.ph-header__logo {
	display: inline-flex;
	flex-shrink: 0;
}

.ph-header__logo img {
	display: block;
	width: 140px;
	height: auto;
}

.ph-nav-panel {
	display: flex;
	align-items: center;
}

.ph-nav-panel__close {
	display: none;
}

.ph-burger {
	display: none;
	background: none;
	border: 0;
	padding: 0.5rem;
	margin: 0;
	color: var(--ph-text);
	cursor: pointer;
	line-height: 0;
}

.ph-menu {
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ph-menu a {
	display: inline-block;
	font-family: var(--ph-font-body);
	font-weight: 500;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ph-text-muted);
	text-decoration: none;
	padding: 0.25rem 0;
	position: relative;
}

.ph-langs {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.ph-lang {
	display: inline-flex;
	line-height: 0;
}

.ph-lang__flag {
	width: 24px;
	height: auto;
	display: block;
	border-radius: 2px;
}

@media (max-width: 768px) {
	.ph-header {
		padding: 1rem 1.5rem;
	}

	.ph-header__logo img {
		width: 110px;
	}

	.ph-burger {
		display: inline-flex;
		margin-left: auto;
	}

	.ph-nav-panel {
		display: none;
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		background: var(--ph-bg);
		z-index: 100;
		padding: 2rem;
	}

	.ph-nav-panel.is-open {
		display: flex;
	}

	.ph-nav-panel__close {
		display: inline-flex;
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		background: none;
		border: 0;
		padding: 0.5rem;
		color: var(--ph-text);
		cursor: pointer;
		line-height: 0;
	}

	.ph-nav-panel .ph-menu {
		flex-direction: column;
		gap: 2rem;
		text-align: center;
	}

	.ph-nav-panel .ph-menu a {
		font-size: 1.5rem;
	}
}

/* ============================================================
   Portfolio — grid uniforme below-the-fold (v0.7.1)
   Galeria de 12 cards sobre var(--ph-bg). CSS Grid uniforme
   (4/3/2 colunas conforme breakpoint), todos os cards aspect-ratio 4/5.
   ============================================================ */
.ph-portfolio {
	background: var(--ph-bg);
	padding: clamp(4rem, 8vw, 7rem) var(--ph-gutter);
}

.ph-portfolio__inner {
	max-width: var(--ph-container);
	margin: 0 auto;
}

.ph-portfolio__header {
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ph-portfolio__title {
	margin: 0;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: var(--ph-fs-h2);
	color: var(--ph-text);
}

.ph-portfolio__sub {
	margin: 0.75rem auto 0;
	max-width: 600px;
	font-family: var(--ph-font-body);
	font-size: var(--ph-fs-lg);
	color: var(--ph-text-muted);
}

.ph-portfolio__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

.ph-portfolio-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
}

.ph-portfolio-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.ph-portfolio-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(15, 15, 15, 0.95) 0%, rgba(15, 15, 15, 0.4) 50%, transparent 100%);
	opacity: 0.85;
	transition: opacity 0.3s ease;
}

.ph-portfolio-card__badge {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 0.5rem;
	padding: 0.25rem 0.75rem;
	background: var(--ph-accent);
	color: var(--ph-bg);
	font-family: var(--ph-font-body);
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	border-radius: 2px;
}

.ph-portfolio-card__title {
	font-family: var(--ph-font-heading);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--ph-text);
}

.ph-portfolio-card__location {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--ph-font-body);
	font-size: 0.8rem;
	font-style: italic;
	color: var(--ph-text-muted);
}

.ph-portfolio-card:hover .ph-portfolio-card__overlay {
	opacity: 0.65;
}

.ph-portfolio-card:hover .ph-portfolio-card__img {
	transform: scale(1.05);
}

.ph-portfolio-card:focus-visible {
	outline: 2px solid var(--ph-accent);
	outline-offset: 2px;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ph-portfolio__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 767px) {
	.ph-portfolio__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ph-portfolio-card__img {
		transition: none;
	}

	.ph-portfolio-card:hover .ph-portfolio-card__img {
		transform: none;
	}
}

/* ============================================================
   Testemunhos — prova social bilíngue (v0.7.0)
   5 cards sobre var(--ph-surface). Flex: 3 na 1.ª linha, 2 centrados na 2.ª.
   ============================================================ */
.ph-testemunhos {
	background: var(--ph-surface);
	padding: clamp(4rem, 8vw, 7rem) var(--ph-gutter);
}

.ph-testemunhos__inner {
	max-width: var(--ph-container);
	margin: 0 auto;
}

.ph-testemunhos__header {
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.ph-testemunhos__title {
	margin: 0;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: var(--ph-fs-h2);
	color: var(--ph-text);
}

.ph-testemunhos__sub {
	margin: 0.75rem auto 0;
	max-width: 600px;
	font-family: var(--ph-font-body);
	font-size: var(--ph-fs-lg);
	color: var(--ph-text-muted);
}

.ph-testemunhos__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.ph-testemunho {
	flex: 0 1 calc(33.333% - 1rem);
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--ph-border);
	border-radius: 4px;
}

.ph-testemunho__quote {
	position: absolute;
	top: -0.5rem;
	left: 1rem;
	font-family: var(--ph-font-heading);
	font-style: italic;
	font-weight: 400;
	font-size: 6rem;
	line-height: 1;
	color: var(--ph-accent);
	opacity: 0.3;
	pointer-events: none;
}

.ph-testemunho__body {
	position: relative;
	z-index: 1;
	min-height: 8rem;
	margin: 0 0 1.5rem;
	font-family: var(--ph-font-body);
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ph-text);
}

.ph-testemunho__author {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--ph-border);
}

.ph-testemunho__stars {
	margin-bottom: 0.5rem;
	font-size: 1rem;
	letter-spacing: 0.1em;
	color: var(--ph-accent);
}

.ph-testemunho__name {
	font-family: var(--ph-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ph-text);
}

.ph-testemunho__location {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
	font-family: var(--ph-font-body);
	font-size: 0.8rem;
	color: var(--ph-text-muted);
}

.ph-testemunho__flag {
	flex-shrink: 0;
	border-radius: 1px;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ph-testemunho {
		flex: 0 1 calc(50% - 0.75rem);
	}
}

@media (max-width: 767px) {
	.ph-testemunho {
		flex: 0 1 100%;
	}
}

/* ============================================================
   CTA Final — última conversão (v0.7.0)
   Full-width cinematográfico sobre var(--ph-bg) + gradient dourado subtil.
   ============================================================ */
.ph-cta-final {
	position: relative;
	overflow: hidden;
	background: var(--ph-bg);
	padding: clamp(5rem, 10vw, 8rem) var(--ph-gutter);
}

.ph-cta-final::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 75% 30%, rgba(212, 175, 55, 0.1), transparent 50%);
}

.ph-cta-final__inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.ph-cta-final__title {
	margin: 0 0 1.5rem;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1.1;
	color: var(--ph-text);
}

.ph-cta-final__em {
	font-style: italic;
	color: var(--ph-accent);
	animation: ph-glow-pulse 5s ease-in-out infinite alternate;
}

.ph-cta-final__subtitle {
	max-width: 500px;
	margin: 0 auto 3rem;
	font-family: var(--ph-font-body);
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--ph-text-muted);
}

.ph-cta-final__buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.ph-cta--ghost {
	background: transparent;
	color: var(--ph-text);
	border: 2px solid var(--ph-text-muted);
	padding: 1.2rem 2.5rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ph-cta--ghost:hover,
.ph-cta--ghost:focus-visible {
	background: transparent;
	border-color: var(--ph-accent);
	color: var(--ph-accent);
}

@media (prefers-reduced-motion: reduce) {
	.ph-cta-final__em {
		animation: none;
	}
}

/* ============================================================
   Footer rico — 4 colunas + bottom bar (v0.7.0)
   Background #050608 (mais escuro que --ph-bg) para "fechar" a página.
   ============================================================ */
.ph-footer {
	background: #050608;
	color: var(--ph-text-muted);
	padding: clamp(4rem, 8vw, 6rem) 0 0;
}

.ph-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
}

.ph-footer__col--brand {
	max-width: 320px;
}

.ph-footer__logo {
	display: inline-flex;
}

.ph-footer__logo img {
	width: 125px;
	height: auto;
}

.ph-footer__tagline {
	margin: 1rem 0 0.5rem;
	font-family: var(--ph-font-body);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--ph-text-muted);
}

.ph-footer__address {
	margin: 0;
	font-family: var(--ph-font-body);
	font-size: 0.85rem;
	color: var(--ph-text-muted);
}

.ph-footer__note {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--ph-font-body);
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--ph-text-muted);
	opacity: 0.7;
}

.ph-footer__title {
	margin: 0 0 1.5rem;
	font-family: var(--ph-font-heading);
	font-weight: 400;
	font-size: 1.1rem;
	color: var(--ph-text);
}

.ph-footer__links,
.ph-footer__contacts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-footer__links li,
.ph-footer__contacts li {
	margin-bottom: 0.5rem;
}

.ph-footer__links a,
.ph-footer__contacts a {
	font-family: var(--ph-font-body);
	font-size: 0.9rem;
	color: var(--ph-text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.ph-footer__links a:hover,
.ph-footer__links a:focus-visible,
.ph-footer__contacts a:hover,
.ph-footer__contacts a:focus-visible {
	color: var(--ph-accent);
	text-decoration: none;
}

.ph-footer__social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1rem;
}

.ph-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ph-border);
	border-radius: 50%;
	color: var(--ph-text-muted);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.ph-footer__social-link:hover,
.ph-footer__social-link:focus-visible {
	border-color: var(--ph-accent);
	color: var(--ph-accent);
}

.ph-footer__bottom {
	margin-top: clamp(3rem, 6vw, 4rem);
	border-top: 1px solid var(--ph-border);
	padding: 1.5rem var(--ph-gutter);
	text-align: center;
}

.ph-footer__copy {
	max-width: var(--ph-container);
	margin: 0 auto;
	font-family: var(--ph-font-body);
	font-size: 0.8rem;
	color: var(--ph-text-muted);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ph-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.ph-footer__inner {
		grid-template-columns: 1fr;
	}

	.ph-footer__col--brand {
		max-width: none;
	}
}

/* ============================================================
   Página /contacto/
   ============================================================ */
.ph-page--contacto { background: var(--ph-bg); color: var(--ph-text); }

/* Wrapper centrado (convenção do tema: max-width var --ph-container + gutter) */
.ph-container {
    max-width: var(--ph-container);
    margin: 0 auto;
    padding: 0 var(--ph-gutter);
}

.ph-contacto-hero {
    padding: 120px 0 60px;
    text-align: center;
    border-bottom: 1px solid var(--ph-border);
}
.ph-contacto-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin: 0 0 16px;
}
.ph-contacto-hero__sub {
    max-width: 580px;
    margin: 0 auto;
    color: var(--ph-text-muted);
    font-size: 1.1rem;
}

.ph-contacto-body { padding: 60px 0 120px; }
.ph-contacto-body__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
}
@media (max-width: 880px) {
    .ph-contacto-body__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Sidebar info */
.ph-contacto-info { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 24px; }
.ph-contacto-info li { color: var(--ph-text); line-height: 1.6; }
.ph-contacto-info strong { color: var(--ph-accent); font-size: 0.9rem; letter-spacing: 0.5px; }
.ph-contacto-info a { color: var(--ph-text); text-decoration: none; border-bottom: 1px solid var(--ph-border); }
.ph-contacto-info a:hover { color: var(--ph-accent); border-color: var(--ph-accent); }
.ph-contacto-info small { display: block; margin-top: 4px; color: var(--ph-text-muted); font-size: 0.8rem; }
.ph-contacto-info__hours { color: var(--ph-text-muted); font-size: 0.9rem; font-style: italic; }

/* Form */
.ph-form { display: flex; flex-direction: column; gap: 20px; }
/* O atributo hidden do HTML perde para qualquer regra de display (as linhas do
   form são flex) — sem isto, o campo "Número da encomenda" aparecia logo,
   antes de se escolher o tipo de pedido. v0.39.19 */
[hidden] { display: none !important; }

.ph-form__row { display: flex; flex-direction: column; gap: 8px; }
.ph-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .ph-form__grid { grid-template-columns: 1fr; } }

.ph-form label { font-size: 0.9rem; color: var(--ph-text-muted); font-weight: 500; }
.ph-form input[type="text"],
.ph-form input[type="email"],
.ph-form input[type="tel"],
.ph-form input[type="number"],
.ph-form input[type="date"],
.ph-form select,
.ph-form textarea {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    color: var(--ph-text);
    padding: 14px 16px;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}
.ph-form input:focus, .ph-form select:focus, .ph-form textarea:focus {
    outline: none;
    border-color: var(--ph-accent);
}
.ph-form textarea { resize: vertical; min-height: 120px; }
.ph-req { color: var(--ph-accent); }

.ph-form__check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ph-text);
    cursor: pointer;
    font-size: 0.95rem;
}
.ph-form__check input { margin-top: 3px; flex-shrink: 0; }

.ph-form__submit {
    align-self: flex-start;
    margin-top: 8px;
    padding: 16px 36px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
}

.ph-form__note { color: var(--ph-text-muted); font-size: 0.85rem; margin: 0; }

.ph-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Success / errors */
.ph-form-success {
    background: var(--ph-surface);
    border-left: 4px solid var(--ph-accent);
    padding: 32px;
    border-radius: 4px;
}
.ph-form-success h2 {
    margin: 0 0 12px;
    color: var(--ph-accent);
    font-family: 'Playfair Display', Georgia, serif;
}
.ph-form-success p { margin: 0; color: var(--ph-text); }

.ph-form-errors {
    background: rgba(220, 53, 69, 0.1);
    border-left: 4px solid #dc3545;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 4px;
    color: var(--ph-text);
}
.ph-form-errors ul { margin: 8px 0 0 20px; padding: 0; }

/* ============================================================
   Página /sobre/
   ============================================================ */
.ph-page--sobre { background: var(--ph-bg); color: var(--ph-text); }

.ph-sobre-hero {
    padding: 120px 0 60px;
    text-align: center;
    border-bottom: 1px solid var(--ph-border);
}
.ph-sobre-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin: 0 0 16px;
    line-height: 1.1;
}
.ph-sobre-hero h1 em {
    color: var(--ph-accent);
    font-style: italic;
}
.ph-sobre-hero__sub {
    max-width: 700px;
    margin: 0 auto;
    color: var(--ph-text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
}

.ph-sobre-historia {
    padding: 80px 0;
    border-bottom: 1px solid var(--ph-border);
}
.ph-sobre-historia h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin: 0 0 40px;
}
.ph-sobre-historia p {
    max-width: 780px;
    margin: 0 auto 24px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ph-text);
}
.ph-sobre-historia p:last-child { margin-bottom: 0; }
.ph-sobre-historia strong { color: var(--ph-accent); font-weight: 600; }

.ph-sobre-pilares {
    padding: 80px 0;
    border-bottom: 1px solid var(--ph-border);
}
.ph-sobre-pilares h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin: 0 0 50px;
}
.ph-sobre-pilares__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
@media (max-width: 980px) { .ph-sobre-pilares__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ph-sobre-pilares__grid { grid-template-columns: 1fr; } }

.ph-pilar {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: 6px;
    padding: 32px 24px;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ph-pilar:hover {
    border-color: var(--ph-accent);
    transform: translateY(-2px);
}
.ph-pilar__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    color: var(--ph-accent);
}
.ph-pilar__icon svg { width: 100%; height: 100%; }
.ph-pilar h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    margin: 0 0 12px;
    color: var(--ph-text);
}
.ph-pilar p {
    margin: 0;
    color: var(--ph-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.ph-sobre-cta {
    padding: 100px 0;
    text-align: center;
}
.ph-sobre-cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 16px;
}
.ph-sobre-cta p {
    color: var(--ph-text-muted);
    font-size: 1.1rem;
    margin: 0 0 32px;
}

/* ============================================================
   Página /portfolio/  (v0.13.0)
   Cards reutilizam .ph-portfolio-card* (definidos na secção da
   homepage). Aqui só o hero, o grid 3-col da página, e o CTA.
   ============================================================ */
.ph-page--portfolio { background: var(--ph-bg); color: var(--ph-text); }

.ph-portfolio-hero {
    padding: 120px 0 60px;
    text-align: center;
    border-bottom: 1px solid var(--ph-border);
}
.ph-portfolio-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin: 0 0 16px;
}
.ph-portfolio-hero__sub {
    max-width: 700px;
    margin: 0 auto;
    color: var(--ph-text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
}
.ph-portfolio-hero__sub strong { color: var(--ph-accent); font-weight: 600; }

.ph-portfolio-grid-section { padding: 80px 0; border-bottom: 1px solid var(--ph-border); }

/* Heading de cada grid (Casamentos / Empresas) — separa as duas categorias. */
.ph-portfolio-grid__heading {
    font-family: var(--ph-font-heading);
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 44px;
    padding-bottom: 16px;
    position: relative;
}
.ph-portfolio-grid__heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    background: var(--ph-accent);
    border-radius: 2px;
}

/* Na página dedicada: grid 3-col (cards maiores que os 4-col da homepage). */
.ph-portfolio-grid--page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 980px) {
    .ph-portfolio-grid--page { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ph-portfolio-grid--page { grid-template-columns: 1fr; }
}

.ph-portfolio-cta {
    padding: 100px 0;
    text-align: center;
}
.ph-portfolio-cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 16px;
}
.ph-portfolio-cta p {
    color: var(--ph-text-muted);
    font-size: 1.1rem;
    margin: 0 0 32px;
}

/* ============================================================
   Página /extras/  (v0.14.0)
   Cards reutilizam .ph-extra-card* (definidos na secção da homepage).
   Aqui só o hero, o grid 3-col da página, e o CTA.
   ============================================================ */
.ph-page--extras { background: var(--ph-bg); color: var(--ph-text); }

.ph-extras-hero {
    padding: 120px 0 60px;
    text-align: center;
    border-bottom: 1px solid var(--ph-border);
}
.ph-extras-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin: 0 0 16px;
    line-height: 1.1;
}
.ph-extras-hero h1 em { color: var(--ph-accent); font-style: italic; }
.ph-extras-hero__sub {
    max-width: 700px;
    margin: 0 auto;
    color: var(--ph-text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
}
.ph-extras-hero__sub strong { color: var(--ph-accent); font-weight: 600; }

.ph-extras-grid-section { padding: 80px 0; border-bottom: 1px solid var(--ph-border); }

/* Na página dedicada: grid 3-col (cards maiores e mais legíveis que os 4-col
   da homepage). É um <ul> → repor reset de lista. */
.ph-extras-grid--page {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 980px) { .ph-extras-grid--page { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ph-extras-grid--page { grid-template-columns: 1fr; } }

.ph-extras-cta {
    padding: 100px 0;
    text-align: center;
}
.ph-extras-cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 16px;
}
.ph-extras-cta p {
    color: var(--ph-text-muted);
    font-size: 1.1rem;
    margin: 0 0 32px;
}

/* ============================================================
   Páginas de serviços (/casamentos/, /empresas/, /privados/, /aluguer-som-luz/)
   v0.15.0 — template visual partilhado. Os pilares reutilizam .ph-pilar
   (definido em v0.12.0 para a /sobre/) — não duplicar aqui.
   ============================================================ */
.ph-page--servico { background: var(--ph-bg); color: var(--ph-text); }

.ph-servico-hero {
    padding: 120px 0 60px;
    text-align: center;
    border-bottom: 1px solid var(--ph-border);
}
.ph-servico-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin: 0 0 16px;
    line-height: 1.1;
}
.ph-servico-hero h1 em { color: var(--ph-accent); font-style: italic; }
.ph-servico-hero__sub {
    max-width: 720px;
    margin: 0 auto;
    color: var(--ph-text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
}

.ph-servico-intro {
    padding: 60px 0;
    border-bottom: 1px solid var(--ph-border);
}
.ph-servico-intro p {
    max-width: 780px;
    margin: 0 auto 20px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ph-text);
}
.ph-servico-intro p:last-child { margin-bottom: 0; }
.ph-servico-intro strong { color: var(--ph-accent); font-weight: 600; }

/* Bloco "Onde atuamos" (serviço → distritos) — v0.30.1 */
.ph-servico-distritos { padding: 48px 0; border-bottom: 1px solid var(--ph-border); }
.ph-servico-distritos h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ph-accent);
    margin-bottom: 10px;
}
.ph-servico-distritos p { color: var(--ph-text-muted); margin-bottom: 18px; }
.ph-servico-distritos-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ph-servico-distritos-lista a {
    color: var(--ph-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ph-servico-distritos-lista a:hover { color: var(--ph-accent); }

/* Breadcrumbs (site-wide, fora da home) — v0.30.1 */
.ph-breadcrumbs { padding: 14px 0; font-size: 0.875rem; color: var(--ph-text-muted); border-bottom: 1px solid var(--ph-border); }
.ph-breadcrumbs a { color: var(--ph-text-muted); text-decoration: none; }
.ph-breadcrumbs a:hover { color: var(--ph-accent); text-decoration: underline; }
.ph-breadcrumbs .ph-breadcrumbs__sep { color: var(--ph-border); padding: 0 2px; }
.ph-breadcrumbs [aria-current="page"] { color: var(--ph-text); }

/* Descrição SEO da categoria de produto — v0.30.1 */
.ph-cat-seo { color: var(--ph-text-muted); max-width: 780px; margin: 0 auto 24px; line-height: 1.6; }

/* Páginas legais (termos, privacidade, portes) — dark theme — v0.31.0 */
.ph-legal { max-width: 900px; margin: 40px auto; padding: 0 20px; color: var(--ph-text); line-height: 1.7; }
.ph-legal h1 { color: var(--ph-text); font-family: 'Playfair Display', Georgia, serif; margin-bottom: 24px; }
.ph-legal h2 { color: var(--ph-accent); font-family: 'Playfair Display', Georgia, serif; margin-top: 40px; margin-bottom: 16px; }
.ph-legal h3 { color: var(--ph-text); margin-top: 24px; margin-bottom: 12px; }
.ph-legal p, .ph-legal li { color: var(--ph-text); }
.ph-legal ul { padding-left: 20px; }
.ph-legal li { margin-bottom: 8px; }
.ph-legal a { color: var(--ph-accent); }
.ph-legal-table { width: 100%; border-collapse: collapse; margin: 20px 0 30px; background: var(--ph-surface); }
.ph-legal-table th { background: var(--ph-accent); color: var(--ph-bg); padding: 12px 16px; text-align: left; font-weight: 600; border: 1px solid var(--ph-border); }
.ph-legal-table td { padding: 12px 16px; border: 1px solid var(--ph-border); color: var(--ph-text); }
.ph-legal-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.ph-legal-note { padding: 16px 20px; background: rgba(212, 175, 55, 0.08); border-left: 3px solid var(--ph-accent); border-radius: 4px; margin: 20px 0; }
@media (max-width: 640px) { .ph-legal-table { display: block; overflow-x: auto; white-space: nowrap; } }

/* Links legais no rodapé — v0.31.0 */
.ph-footer__legal { margin-top: 8px; font-size: 0.8125rem; }
.ph-footer__legal a { color: var(--ph-text-muted); text-decoration: none; }
.ph-footer__legal a:hover { color: var(--ph-accent); text-decoration: underline; }
.ph-footer__legal .sep { color: var(--ph-border); padding: 0 8px; }

.ph-servico-pilares { padding: 80px 0; border-bottom: 1px solid var(--ph-border); }
.ph-servico-pilares h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin: 0 0 50px;
}
.ph-servico-pilares__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 980px) { .ph-servico-pilares__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ph-servico-pilares__grid { grid-template-columns: 1fr; } }

/* Packs (só Casamentos) */
.ph-servico-packs { padding: 80px 0; border-bottom: 1px solid var(--ph-border); }
.ph-servico-packs h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin: 0 0 24px;
}

/* CTA (mesmo padrão da /sobre/) */
.ph-servico-cta { padding: 100px 0; text-align: center; }
.ph-servico-cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 16px;
}
.ph-servico-cta p {
    color: var(--ph-text-muted);
    font-size: 1.1rem;
    margin: 0 0 32px;
}

/* ============================================================
   Páginas de serviços — Packs detalhados + Tabela de preços (v0.15.1)
   ============================================================ */

/* Pack cards */
.ph-servico-packs__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 16px; /* espaço para os badges flutuantes (top:-10px) não cortarem na borda da secção */
}
@media (max-width: 980px) { .ph-servico-packs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ph-servico-packs__grid { grid-template-columns: 1fr; } }

/* Grid de packs com 1 só item (centrado, max-width) — /batizados/ */
.ph-servico-packs__grid--single {
    grid-template-columns: minmax(0, 360px) !important;
    justify-content: center;
}

/* Pack card — layout */
.ph-pack {
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    /* sem overflow:hidden — badge flutuante (top:-10px) precisa de transbordar.
       Cantos arredondados preservados via border-radius no header/footer abaixo. */
    position: relative;
    padding: 0;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ph-pack:hover { transform: translateY(-2px); border-color: var(--ph-accent); }

/* Header colorido (topo) */
.ph-pack__header {
    padding: 24px 20px 18px;
    text-align: center;
    border-bottom: 1px solid var(--ph-border);
    border-radius: 6px 6px 0 0; /* canto top arredondado (substitui overflow:hidden removido) */
}
.ph-pack__header--gray  { background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); }
.ph-pack__header--green { background: linear-gradient(180deg, #1f5d3a 0%, #144028 100%); }
.ph-pack__header--blue  { background: linear-gradient(180deg, #1f3d5d 0%, #142d44 100%); }
.ph-pack__header--gold  { background: linear-gradient(180deg, #c89640 0%, #8a6420 100%); }

.ph-pack__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    margin: 0 0 6px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.ph-pack__price-from {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    margin: 0;
}
.ph-pack__price-from strong { color: #fff; font-weight: 700; }

/* Badge flutuante sobre a borda top do card (header livre) */
.ph-pack__corner-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    padding: 5px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 14px;
    z-index: 3;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    line-height: 1;
    white-space: nowrap;
}
.ph-pack__corner-badge--novo {
    background: linear-gradient(135deg, #d4af37 0%, #b8941e 100%);
    color: #1a1a1a;
}
.ph-pack__corner-badge--recomendado {
    background: linear-gradient(135deg, #c8472f 0%, #a83520 100%);
    color: #fff;
}

/* Corpo (com padding interno) */
.ph-pack__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.ph-pack__desc {
    color: var(--ph-text);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 16px;
}

/* Lista de extras */
.ph-pack__extras {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--ph-border);
    padding-top: 14px;
}
.ph-pack__extras--full li {
    padding: 4px 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--ph-text);
    position: relative;
    padding-left: 16px;
}
.ph-pack__extras--full li::before {
    content: "✓";
    color: var(--ph-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 0.85rem;
}
.ph-pack__extras--full li.ph-pack__extra--bonus { color: var(--ph-accent); font-weight: 600; }
.ph-pack__extras--full li.ph-pack__extra--bonus::before { content: "✦"; color: var(--ph-accent); }

/* Footer tag (em baixo do card) */
.ph-pack__footer {
    padding: 14px 20px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    border-radius: 0 0 6px 6px; /* canto bottom arredondado (substitui overflow:hidden removido) */
    text-transform: uppercase;
    color: #fff;
    border-top: 1px solid var(--ph-border);
}
.ph-pack__footer--gray  { background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%); }
.ph-pack__footer--green { background: linear-gradient(180deg, #1f5d3a 0%, #144028 100%); }
.ph-pack__footer--blue  { background: linear-gradient(180deg, #1f3d5d 0%, #142d44 100%); }
.ph-pack__footer--gold  { background: linear-gradient(180deg, #c89640 0%, #8a6420 100%); color: #1a1a1a; }

/* Tabela de preços */
.ph-servico-precos { padding: 80px 0; border-bottom: 1px solid var(--ph-border); }
.ph-servico-precos h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin: 0 0 16px;
}
.ph-servico-precos__intro {
    text-align: center;
    color: var(--ph-text-muted);
    margin: 0 0 40px;
    font-size: 1.05rem;
}
.ph-servico-precos__aviso {
    text-align: center;
    color: var(--ph-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin: 16px 0 24px;
}

.ph-servico-precos__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
}
.ph-servico-precos__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: var(--ph-surface);
    border-radius: 6px;
    overflow: hidden;
}
.ph-servico-precos__table th,
.ph-servico-precos__table td {
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--ph-border);
}
.ph-servico-precos__table thead th {
    background: rgba(212, 175, 55, 0.1);
    color: var(--ph-accent);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
}
.ph-servico-precos__table tbody tr:last-child th,
.ph-servico-precos__table tbody tr:last-child td { border-bottom: none; }
.ph-servico-precos__table .ph-td-region { font-weight: 600; color: var(--ph-text); }
.ph-servico-precos__table .ph-td-districts { color: var(--ph-text-muted); font-size: 0.9rem; }
.ph-servico-precos__table .ph-td-preco {
    color: var(--ph-accent);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}
.ph-servico-precos__table tbody tr:hover { background: rgba(212, 175, 55, 0.04); }

.ph-servico-precos__notes {
    margin-top: 24px;
    color: var(--ph-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.ph-servico-precos__notes p { margin: 6px 0; }
.ph-servico-precos__notes sup { color: var(--ph-accent); }

/* Página /batizados/ — Extras opcionais */
.ph-servico-extras {
    padding: 80px 0;
    border-bottom: 1px solid var(--ph-border);
}
.ph-servico-extras h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    text-align: center;
    margin: 0 0 16px;
}
.ph-servico-extras__intro {
    text-align: center;
    color: var(--ph-text-muted);
    margin: 0 0 40px;
    font-size: 1.05rem;
}
.ph-servico-extras__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.ph-servico-extras__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-left: 3px solid var(--ph-accent);
    border-radius: 4px;
    margin-bottom: 16px;
}
.ph-servico-extras__main { flex: 1; }
.ph-servico-extras__name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    margin: 0 0 6px;
    color: var(--ph-text);
}
.ph-servico-extras__desc {
    margin: 0;
    color: var(--ph-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}
.ph-servico-extras__price {
    font-size: 1.4rem;
    white-space: nowrap;
}
.ph-servico-extras__price strong {
    color: var(--ph-accent);
    font-weight: 700;
}
.ph-servico-extras__note {
    text-align: center;
    color: var(--ph-text-muted);
    margin: 16px 0 0;
}
@media (max-width: 560px) {
    .ph-servico-extras__item { flex-direction: column; align-items: flex-start; padding: 20px; }
    .ph-servico-extras__price { align-self: flex-end; }
}

/* Notas finais (movidas das individuais para depois dos extras) */
.ph-servico-notas-finais {
    padding: 32px 0 60px;
    background: var(--ph-bg);
}
.ph-servico-notas-finais p {
    max-width: 900px;
    margin: 8px auto;
    color: var(--ph-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    text-align: left;
}
.ph-servico-notas-finais sup {
    color: var(--ph-accent);
    font-weight: 700;
}
.ph-servico-notas-finais strong {
    color: var(--ph-text);
}

/* sup no header da tabela */
.ph-servico-precos__table thead th sup {
    color: var(--ph-accent);
    font-size: 0.65em;
    margin-left: 1px;
}

/* sup no preço do extra */
.ph-servico-extras__price sup {
    color: var(--ph-accent);
    font-size: 0.55em;
    vertical-align: super;
    font-weight: 700;
    margin-left: 2px;
}

/* ============================================================
   Navigation submenu — desktop dropdown + mobile accordion (v0.15.3)
   Breakpoints alinhados ao hamburger real do tema: desktop >=769px,
   painel mobile <=768px (NÃO 900, que partiria a faixa 769-900px).
   ============================================================ */

/* Parent item: position:relative para ancorar o dropdown absolute. */
.ph-nav__item--has-submenu { position: relative; }

.ph-nav__chevron {
    margin-left: 4px;
    transition: transform 0.2s ease;
    vertical-align: -1px;
}

/* === Desktop dropdown (hover + focus-within) === */
@media (min-width: 769px) {
    .ph-nav__submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        min-width: 220px;
        background: var(--ph-bg);
        border: 1px solid var(--ph-border);
        border-radius: 4px;
        padding: 8px 0;
        list-style: none;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        z-index: 100;
    }
    .ph-nav__item--has-submenu:hover > .ph-nav__submenu,
    .ph-nav__item--has-submenu:focus-within > .ph-nav__submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
    }
    .ph-nav__item--has-submenu:hover > .ph-nav__link .ph-nav__chevron,
    .ph-nav__item--has-submenu:focus-within > .ph-nav__link .ph-nav__chevron {
        transform: rotate(180deg);
    }
    .ph-nav__submenu li { margin: 0; }
    .ph-nav__submenu a {
        display: block;
        padding: 10px 20px;
        color: var(--ph-text);
        text-decoration: none;
        font-size: 0.95rem;
        text-transform: none;
        letter-spacing: normal;
        white-space: nowrap;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .ph-nav__submenu a:hover,
    .ph-nav__submenu a:focus {
        background: var(--ph-surface);
        color: var(--ph-accent);
    }
}

/* === Mobile (painel do hamburger) — acordeão === */
@media (max-width: 768px) {
    .ph-nav__submenu {
        list-style: none;
        margin: 0;
        padding: 0 0 0 16px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .ph-nav__item--has-submenu.is-open > .ph-nav__submenu { max-height: 500px; }
    .ph-nav__item--has-submenu.is-open > .ph-nav__link .ph-nav__chevron {
        transform: rotate(180deg);
    }
    .ph-nav__submenu li { margin: 0; }
    /* Scoped a .ph-nav-panel para vencer .ph-nav-panel .ph-menu a (1.5rem). */
    .ph-nav-panel .ph-nav__submenu a {
        display: block;
        padding: 12px 16px;
        color: var(--ph-text-muted);
        text-decoration: none;
        font-size: 0.95rem;
        text-transform: none;
        letter-spacing: normal;
        border-left: 2px solid var(--ph-border);
    }
    .ph-nav-panel .ph-nav__submenu a:hover,
    .ph-nav-panel .ph-nav__submenu a:focus {
        color: var(--ph-accent);
        border-color: var(--ph-accent);
    }
}

/* ============================================================
   Instagram — ícone no header + CTAs na /portfolio/ (v0.18.0)
   ============================================================ */

.ph-header__instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    color: var(--ph-text);
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.ph-header__instagram:hover {
    color: var(--ph-accent);
    background: rgba(212, 175, 55, 0.1);
    transform: scale(1.08);
}
@media (max-width: 768px) {
    .ph-header__instagram { margin-right: 8px; }
}

/* Banner Instagram no topo da /portfolio/ */
.ph-portfolio-ig-banner {
    padding: 32px 0;
    border-bottom: 1px solid var(--ph-border);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
}
.ph-portfolio-ig-banner__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}
.ph-portfolio-ig-banner__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ph-accent);
    background: rgba(212, 175, 55, 0.1);
    border-radius: 50%;
}
.ph-portfolio-ig-banner__body { flex: 1; }
.ph-portfolio-ig-banner__body h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.4rem;
    margin: 0 0 6px;
    color: var(--ph-text);
}
.ph-portfolio-ig-banner__body p {
    margin: 0;
    color: var(--ph-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}
.ph-portfolio-ig-banner__body strong { color: var(--ph-accent); }
.ph-portfolio-ig-banner__cta { white-space: nowrap; }

@media (max-width: 720px) {
    .ph-portfolio-ig-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .ph-portfolio-ig-banner__cta { width: 100%; }
}

/* Secção CTA Instagram (fim da /portfolio/, antes do CTA principal) */
.ph-portfolio-ig-cta {
    padding: 80px 0;
    text-align: center;
    border-bottom: 1px solid var(--ph-border);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.04) 0%, transparent 100%);
}
.ph-portfolio-ig-cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: 0 0 12px;
}
.ph-portfolio-ig-cta p {
    color: var(--ph-text-muted);
    font-size: 1.05rem;
    margin: 0 0 28px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   v0.19.0: Portfolio com logos reais — escopo SÓ na /portfolio/
   ============================================================ */
.ph-portfolio-grid--page {
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
@media (max-width: 1100px) { .ph-portfolio-grid--page { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 600px)  { .ph-portfolio-grid--page { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.ph-portfolio-grid--page .ph-portfolio-card {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--ph-border);
    border-radius: 6px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.ph-portfolio-grid--page .ph-portfolio-card:hover {
    transform: translateY(-2px);
    border-color: var(--ph-accent);
}
.ph-portfolio-grid--page .ph-portfolio-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: 0.85;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.ph-portfolio-grid--page .ph-portfolio-card:hover img {
    filter: none;
    opacity: 1;
}
.ph-portfolio-grid--page .ph-portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15,15,15,0.92) 0%, rgba(15,15,15,0) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #fff;
}
.ph-portfolio-grid--page .ph-portfolio-card:hover .ph-portfolio-card__overlay {
    opacity: 1;
}
.ph-portfolio-grid--page .ph-portfolio-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.85rem;
    margin: 0 0 2px;
    color: #fff;
}
.ph-portfolio-grid--page .ph-portfolio-card__local {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.8);
    margin: 0;
    line-height: 1.3;
}

/* ============================================================
   v0.19.1: Homepage portfolio — 6 logos curados (fundo branco)
   Mesmo look da /portfolio/, escopo isolado em .ph-portfolio__grid.
   Regras no fim do ficheiro → sobrepõem as antigas (4col, cards 4/5).
   ============================================================ */
.ph-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cols na home (vs 6 na /portfolio/) */
    gap: 20px;
}
@media (max-width: 900px) { .ph-portfolio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ph-portfolio__grid { grid-template-columns: 1fr; } }

.ph-portfolio__grid .ph-portfolio-card {
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid var(--ph-border);
    border-radius: 6px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.ph-portfolio__grid .ph-portfolio-card:hover {
    transform: translateY(-2px);
    border-color: var(--ph-accent);
}
.ph-portfolio__grid .ph-portfolio-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: 0.85;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.ph-portfolio__grid .ph-portfolio-card:hover img {
    filter: none;
    opacity: 1;
}
.ph-portfolio__grid .ph-portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(15,15,15,0.92) 0%, rgba(15,15,15,0) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #fff;
}
.ph-portfolio__grid .ph-portfolio-card:hover .ph-portfolio-card__overlay { opacity: 1; }
.ph-portfolio__grid .ph-portfolio-card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    margin: 0 0 4px;
    color: #fff;
}
.ph-portfolio__grid .ph-portfolio-card__local {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    margin: 0;
    line-height: 1.3;
}

/* CTA "Ver todos" (estilo ghost já definido em .ph-cta--ghost acima) */
.ph-portfolio__home-cta {
    text-align: center;
    margin-top: 32px;
}

/* ============================================================
   v0.20.1: Variante dark para logos com letras brancas
   (Santo Estêvão, Mata, Boiça) — fundo escuro p/ contraste.
   Aplica-se aos dois contextos (home + /portfolio/).
   Última linha de 27 (3 cards) fica alinhada à esquerda — design choice.
   ============================================================ */
.ph-portfolio-grid--page .ph-portfolio-card--dark,
.ph-portfolio__grid .ph-portfolio-card--dark {
    background: #1a1a1a;
}
.ph-portfolio-grid--page .ph-portfolio-card--dark img,
.ph-portfolio__grid .ph-portfolio-card--dark img {
    filter: grayscale(20%) brightness(1.05);
}
.ph-portfolio-grid--page .ph-portfolio-card--dark:hover img,
.ph-portfolio__grid .ph-portfolio-card--dark:hover img {
    filter: brightness(1.1);
}


/* === WooCommerce wrapper (v0.28.1) === */
.ph-main--wc{padding:120px 0 80px;min-height:60vh;background:#0F0F0F;color:#fff}
.ph-main--wc .ph-container{max-width:1280px;margin:0 auto;padding:0 24px}
.ph-main--wc h1.page-title,.ph-main--wc h1.entry-title{font-family:"Playfair Display",serif;font-size:48px;color:#fff;margin-bottom:24px}
.ph-main--wc .woocommerce-breadcrumb{color:#888;font-size:14px;margin-bottom:24px}
.ph-main--wc .woocommerce-breadcrumb a{color:#D4AF37;text-decoration:none}
.ph-main--wc .woocommerce-info,.ph-main--wc .woocommerce-message{background:#1a1a1a;border-left:3px solid #D4AF37;color:#fff;padding:16px 20px}
.ph-main--wc .woocommerce-info a,.ph-main--wc .woocommerce-message a{color:#D4AF37}
.ph-main--wc ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px;padding:0;list-style:none}
.ph-main--wc ul.products li.product{background:#1a1a1a;border-radius:12px;padding:16px;text-align:center}
.ph-main--wc ul.products li.product .price{color:#D4AF37;font-weight:600;font-size:18px}
.ph-main--wc .button{background:#D4AF37 !important;color:#0F0F0F !important;border:none !important;padding:12px 24px !important;font-weight:600 !important;border-radius:6px !important}
.ph-main--wc .button:hover{background:#b8941f !important}


/* === WC grid override (v0.28.1a) === */
.ph-main--wc ul.products{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:24px !important}
.ph-main--wc ul.products li.product{float:none !important;width:auto !important;margin:0 !important;clear:none !important;list-style:none !important}
.ph-main--wc ul.products li.product::before,.ph-main--wc ul.products li.product::after{display:none !important}
.ph-main--wc ul.products::before,.ph-main--wc ul.products::after{display:none !important;content:none !important}
@media (max-width:1024px){.ph-main--wc ul.products{grid-template-columns:repeat(3,1fr) !important}}
@media (max-width:640px){.ph-main--wc ul.products{grid-template-columns:repeat(2,1fr) !important}}


/* === WC My Account (v0.28.1b) === */
.woocommerce-form-login,.woocommerce-form-register{max-width:480px;margin:0 auto;padding:32px;background:#1a1a1a;border-radius:12px}
.woocommerce-form-login p,.woocommerce-form-register p{margin-bottom:16px}
.woocommerce-form-login label,.woocommerce-form-register label{display:block;color:#ccc;font-size:14px;margin-bottom:6px}
.woocommerce-form-login input[type=text],.woocommerce-form-login input[type=password],.woocommerce-form-login input[type=email],.woocommerce-form-register input[type=text],.woocommerce-form-register input[type=password],.woocommerce-form-register input[type=email]{width:100%;padding:10px 14px;background:#2a2a2a;border:1px solid #444;border-radius:6px;color:#fff;font-size:14px}
.woocommerce-form-login input:focus,.woocommerce-form-register input:focus{border-color:#D4AF37;outline:none}
.woocommerce-form-login .lost_password{margin-top:12px;text-align:center}
.woocommerce-form-login .lost_password a{color:#D4AF37;font-size:14px}
.u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:1024px;margin:0 auto}
@media (max-width:768px){.u-columns.col2-set{grid-template-columns:1fr}}
.woocommerce-MyAccount-navigation{max-width:220px}
.woocommerce-MyAccount-content{max-width:900px}
.woocommerce-account .woocommerce{display:grid;grid-template-columns:220px 1fr;gap:32px;max-width:1200px;margin:0 auto}
@media (max-width:768px){.woocommerce-account .woocommerce{grid-template-columns:1fr}}


/* === Header socials (v0.28.1b) === */
.ph-header__socials{display:flex;align-items:center;gap:14px}
.ph-header__socials .ph-social-icon{display:inline-flex;align-items:center;justify-content:center;color:#e6e6e6;transition:color 0.2s ease,transform 0.2s ease}
.ph-header__socials .ph-social-icon:hover{color:#D4AF37;transform:translateY(-1px)}
.ph-header__socials .ph-social-icon img{width:20px;height:20px;display:block;filter:brightness(0) invert(1)}
.ph-header__socials .ph-social-icon:hover img{filter:brightness(0) invert(80%) sepia(30%) saturate(600%) hue-rotate(15deg)}

/* Área de toque mínima de 24x24 (v0.39.24): o <a> media 20x20 = alvos pequenos
   e colados no telemóvel (a11y mobile 96 -> 100). O ícone mantém-se a 20px; só
   a zona clicável cresce, por isso o visual não muda. */
.ph-header__socials .ph-social-icon,
.ph-header__cart{min-width:24px;min-height:24px}


/* === Header cart (v0.28.1c) === */
.ph-header__cart{position:relative;display:inline-flex;align-items:center;justify-content:center;color:#e6e6e6;transition:color 0.2s ease,transform 0.2s ease;margin-right:14px}
.ph-header__cart:hover{color:#D4AF37;transform:translateY(-1px)}
.ph-header__cart img{width:20px;height:20px;display:block;filter:brightness(0) invert(1)}
.ph-header__cart:hover img{filter:brightness(0) invert(80%) sepia(30%) saturate(600%) hue-rotate(15deg)}
.ph-header__cart-count{position:absolute;top:-6px;right:-8px;background:#D4AF37;color:#0F0F0F;font-size:11px;font-weight:700;line-height:1;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;pointer-events:none}


/* === Header reorder + polish (v0.28.1c) === */
/* Ordem visual desejada: Contacto | cart | bandeira | sociais */
.ph-header__cart{order:1}
.ph-langs{order:2}
.ph-header__socials{order:3}

/* Badge escondido com atributo hidden */
.ph-header__cart-count[hidden]{display:none}

/* Cards servicos: a grid ja iguala a altura das <li>. Basta o link encher a li
   (display:flex na li -> align-items:stretch estica o link no vertical) e o
   justify-content:flex-end que o link ja tem encosta o conteudo ao fundo.
   Resultado: todos os "VER DETALHES" na mesma linha, sem hacks por card. */
.ph-servico-card{display:flex}
.ph-servico-card__link{flex:1}

/* Nomes alinhados entre cards: no layout 5-col (>=1024px) a desc reserva sempre
   a altura maxima do line-clamp (6 linhas = 6 * 0.9rem * 1.5 = 8.1rem), por isso
   todas as descricoes ocupam o mesmo espaco e o nome (Batizados, Empresas, ...)
   fica no mesmo nivel. O espaco extra das descricoes curtas cai entre a desc e o
   VER DETALHES. Length-independent: nenhuma desc passa das 6 linhas (line-clamp). */
@media (min-width: 1024px) {
	.ph-servico-card__desc{min-height:8.1rem}
	/* "Aluguer Som & Luz" enrola para 2 linhas no 5-col; os outros nomes tem 1.
	   Reservar 2 linhas (2 * 1.2 line-height = 2.4em) faz os nomes de 1 linha
	   alinharem pela 1a linha do Aluguer -> todos os nomes ao mesmo nivel. */
	.ph-servico-card__name{min-height:2.4em}
}

/* WC: esconder "Ver carrinho" que aparece a seguir a "Adicionar" */
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart{display:none !important}


/* === Header layout fix (v0.28.1c) === */
/* Objectivo: [logo] <---> [menu][cart][langs] <---> [sociais] */
/* Aplicar apenas em desktop (>=900px) para não partir mobile */
@media (min-width: 900px) {
    .ph-header__inner{justify-content:flex-start !important;gap:16px !important}
    #ph-nav-panel{margin-left:auto !important}
    .ph-header__socials{margin-left:auto !important}
}



/* === WC single product polish v2 (v0.28.1d) === */

/* Imagem placeholder mais pequena */
.woocommerce-product-gallery{max-width:400px !important}
.woocommerce-product-gallery img{max-height:400px !important;object-fit:contain}

/* Dropdown Cores: legivel + ESTREITO (180px) */
.variations select,
.variations td.value select{
    color:#F5F5F5 !important;
    background:#1A1A1A !important;
    border:1px solid #D4AF37 !important;
    padding:8px 12px !important;
    font-size:15px !important;
    min-height:38px !important;
    max-width:180px !important;
    width:180px !important;
    cursor:pointer;
    border-radius:2px;
}
.variations select option{
    background:#1A1A1A;
    color:#F5F5F5;
    padding:6px;
}
.variations th.label{
    color:#D4AF37;
    font-weight:600;
    padding-right:16px;
    vertical-align:middle;
}

/* Quantidade + Adicionar na MESMA linha (inline) */
form.cart{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex-wrap:wrap;
}
form.cart .quantity{
    display:inline-flex !important;
    margin:0 !important;
}
form.cart .quantity input.qty{
    width:70px !important;
    height:44px !important;
    background:#1A1A1A !important;
    color:#F5F5F5 !important;
    border:1px solid #D4AF37 !important;
    padding:0 8px !important;
    text-align:center;
    font-size:16px !important;
}
form.cart .single_add_to_cart_button{
    margin:0 !important;
    padding:10px 22px !important;
    height:44px;
    line-height:1;
}

/* Preco variacao dourado */
.woocommerce-variation-price .price{
    color:#D4AF37 !important;
    font-size:1.4rem;
}
.woocommerce-variation-availability{
    color:#D4AF37;
    font-weight:500;
}

/* Z-INDEX: submenu do header por CIMA da lupa WC gallery */
.ph-nav-panel,
#ph-nav-panel{
    z-index:99999 !important;
    position:relative;
}
.ph-nav-panel .sub-menu,
#ph-nav-panel .sub-menu{
    z-index:99999 !important;
}
.ph-header{
    z-index:9999;
    position:relative;
}
.woocommerce-product-gallery__trigger{
    z-index:9998 !important;
}

/* ============================================================
   Páginas de distrito (SEO local) — /lisboa/, /setubal/, ... (v0.28.4)
   Hero above-the-fold em inc/critical-css.php (.ph-distrito-hero*).
   Aqui: intro, grid de serviços, portfolio filtrado e CTA final.
   ============================================================ */

.ph-distrito-intro {
    padding: 72px 0 8px;
}
.ph-distrito-intro .ph-container {
    max-width: 820px;
}
.ph-distrito-intro p {
    font-size: 1.075rem;
    line-height: 1.75;
    color: var(--ph-text-muted);
    margin: 0 0 1.35rem;
}
.ph-distrito-intro strong {
    color: var(--ph-text);
    font-weight: 600;
}
.ph-distrito-intro__cidades {
    margin-top: 2rem !important;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ph-border);
    font-size: 0.95rem !important;
}
.ph-distrito-intro__cidades strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ph-accent);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
}

/* SEO local (v0.32.0): info + preços + cidades + FAQ */
.ph-distrito-seo-info,
.ph-distrito-precos,
.ph-distrito-cidades {
    padding: 32px 0;
}
.ph-distrito-seo-info .ph-container,
.ph-distrito-precos .ph-container,
.ph-distrito-cidades .ph-container,
.ph-distrito-faq .ph-container {
    max-width: 820px;
}
.ph-distrito-seo-info p,
.ph-distrito-precos p,
.ph-distrito-cidades p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ph-text-muted);
    margin: 0 0 1.2rem;
}
.ph-distrito-seo-info strong,
.ph-distrito-precos strong,
.ph-distrito-cidades strong {
    color: var(--ph-text);
    font-weight: 600;
}
.ph-distrito-precos a,
.ph-distrito-cidades a {
    color: var(--ph-accent);
    text-decoration: none;
    font-weight: 600;
}
.ph-distrito-precos a:hover,
.ph-distrito-cidades a:hover {
    text-decoration: underline;
}
.ph-distrito-precos > .ph-container > h2 {
    font-family: var(--ph-font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0 0 20px;
}
.ph-distrito-cidades {
    border-top: 1px solid var(--ph-border);
}

/* FAQ — acordeão nativo <details>, sem JS */
.ph-distrito-faq {
    padding: 48px 0 8px;
}
.ph-distrito-faq > .ph-container > h2 {
    font-family: var(--ph-font-heading);
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 36px;
}
.ph-faq-item {
    border: 1px solid var(--ph-border);
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--ph-surface);
    overflow: hidden;
}
.ph-faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 22px;
    font-weight: 600;
    color: var(--ph-text);
    font-size: 1.05rem;
    position: relative;
    padding-right: 48px;
}
.ph-faq-item summary::-webkit-details-marker {
    display: none;
}
.ph-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ph-accent);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
.ph-faq-item[open] summary::after {
    content: "−";
}
.ph-faq-item summary:hover {
    color: var(--ph-accent);
}
.ph-faq-item__a {
    padding: 0 22px 18px;
}
.ph-faq-item__a p {
    margin: 0;
    color: var(--ph-text-muted);
    line-height: 1.7;
}

/* Cidades do distrito (cross-link hierárquico /distrito/cidade/) */
.ph-distrito-cidades-links {
    padding: 8px 0 40px;
}
.ph-distrito-cidades-links .ph-container {
    max-width: 820px;
}
.ph-distrito-cidades-links h2 {
    font-family: var(--ph-font-heading);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 700;
    margin: 0 0 18px;
}
.ph-distrito-cidades-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
}
.ph-distrito-cidades-links__list a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--ph-border);
    border-radius: 999px;
    color: var(--ph-text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ph-distrito-cidades-links__list a:hover {
    border-color: var(--ph-accent);
    color: var(--ph-accent);
}
.ph-cidade-parent {
    margin-top: 1.5rem !important;
}
.ph-cidade-parent a {
    color: var(--ph-accent);
    text-decoration: none;
    font-weight: 600;
}
.ph-cidade-parent a:hover {
    text-decoration: underline;
}

/* Hub francophone (bloco na home /fr/ — só blog FR) */
.ph-hub-francophone {
    padding: 72px 0;
    background: var(--ph-surface);
    border-top: 1px solid var(--ph-border);
    border-bottom: 1px solid var(--ph-border);
}
.ph-hub-francophone .ph-container {
    max-width: 860px;
}
.ph-hub-francophone h2 {
    font-family: var(--ph-font-heading);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 32px;
    color: var(--ph-text);
}
.ph-hub-francophone__intro p {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ph-text-muted);
    margin: 0 0 1.2rem;
}
.ph-hub-francophone__intro strong {
    color: var(--ph-text);
    font-weight: 600;
}
.ph-hub-francophone__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin: 28px 0;
}
.ph-hub-francophone__chips a,
.ph-hub-francophone__chips span {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--ph-border);
    border-radius: 999px;
    font-size: 0.95rem;
}
.ph-hub-francophone__chips a {
    color: var(--ph-text);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ph-hub-francophone__chips a:hover {
    border-color: var(--ph-accent);
    color: var(--ph-accent);
}
.ph-hub-francophone__chips span {
    color: var(--ph-text-muted);
}
.ph-hub-francophone__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

/* Página dedicada /fr/dj-portugais-francais/ */
.ph-hub-page {
    padding: 56px 0 72px;
}
.ph-hub-page .ph-container {
    max-width: 820px;
}
.ph-hub-page h1 {
    font-family: var(--ph-font-heading);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--ph-text);
}
.ph-hub-page h2 {
    font-family: var(--ph-font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin: 40px 0 16px;
    color: var(--ph-text);
}
.ph-hub-page p,
.ph-hub-page li {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ph-text-muted);
}
.ph-hub-page p {
    margin: 0 0 1.2rem;
}
.ph-hub-page__lead {
    font-size: 1.15rem !important;
    color: var(--ph-text) !important;
}
.ph-hub-page ul {
    margin: 0 0 1.4rem;
    padding-left: 1.3rem;
}
.ph-hub-page li {
    margin-bottom: 0.6rem;
}
.ph-hub-page strong {
    color: var(--ph-text);
    font-weight: 600;
}
.ph-hub-page a {
    color: var(--ph-accent);
    text-decoration: none;
    font-weight: 600;
}
.ph-hub-page a:hover {
    text-decoration: underline;
}
.ph-hub-page .ph-faq-item {
    margin-top: 12px;
}
.ph-hub-page__cta {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--ph-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.ph-hub-page__cta p {
    width: 100%;
    margin: 0 0 8px;
    color: var(--ph-text);
}
.ph-hub-page__cta .ph-cta {
    text-decoration: none;
}

/* Grid de serviços (6 cards navegáveis) */
.ph-distrito-servicos {
    padding: 64px 0 72px;
}
.ph-distrito-servicos > .ph-container > h2,
.ph-distrito-portfolio > .ph-container > h2 {
    font-family: var(--ph-font-heading);
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin: 0 0 44px;
}
.ph-distrito-servicos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .ph-distrito-servicos__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ph-distrito-servicos__grid { grid-template-columns: 1fr; } }

.ph-distrito-servico {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: 4px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ph-distrito-servico:hover {
    border-color: var(--ph-accent);
    transform: translateY(-3px);
}
.ph-distrito-servico h3 {
    font-family: var(--ph-font-heading);
    font-size: 1.35rem;
    margin: 0 0 12px;
    color: var(--ph-text);
}
.ph-distrito-servico p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ph-text-muted);
    margin: 0 0 18px;
    flex: 1;
}
.ph-distrito-servico__link {
    align-self: flex-start;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ph-accent);
    text-decoration: none;
}
.ph-distrito-servico__link:hover { text-decoration: underline; }

/* Portfolio filtrado por distrito (reutiliza .ph-portfolio-grid--page + cards) */
.ph-distrito-portfolio {
    padding: 8px 0 80px;
    border-top: 1px solid var(--ph-border);
    padding-top: 72px;
}

/* CTA final */
.ph-distrito-cta {
    padding: 96px 0;
    text-align: center;
    border-top: 1px solid var(--ph-border);
}
.ph-distrito-cta h2 {
    font-family: var(--ph-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 16px;
}
.ph-distrito-cta p {
    color: var(--ph-text-muted);
    font-size: 1.1rem;
    max-width: 620px;
    margin: 0 auto 32px;
}

/* ============================================================
   v0.38.0 — Extras: páginas individuais + rotação geo + índice
   ============================================================ */

/* Rotação de extras nas páginas geo (distrito/cidade) */
.ph-geo-extras { padding: 40px 0; border-top: 1px solid var(--ph-border); }
.ph-geo-extras h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ph-accent);
    margin-bottom: 16px;
}
.ph-geo-extras__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.ph-geo-extras__item a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--ph-border);
    border-radius: 999px;
    color: var(--ph-text);
    text-decoration: none;
    background: var(--ph-surface);
    transition: border-color .2s, color .2s;
}
.ph-geo-extras__item a:hover { border-color: var(--ph-accent); color: var(--ph-accent); }
.ph-geo-extras__all a { color: var(--ph-accent); text-decoration: underline; text-underline-offset: 3px; }

/* Página individual de extra */
.ph-extra-hero { padding: 64px 0 40px; border-bottom: 1px solid var(--ph-border); }
.ph-extra-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ph-text);
    margin-bottom: 18px;
}
.ph-extra-hero__desc { color: var(--ph-text-muted); max-width: 720px; }
.ph-extra-hero__desc p { margin-bottom: 14px; }
.ph-extra-hero__desc strong { color: var(--ph-text); }
.ph-extra-hero .ph-cta { margin-top: 24px; }

.ph-extra-aplicar { padding: 44px 0; border-bottom: 1px solid var(--ph-border); }
.ph-extra-aplicar > .ph-container > h2,
.ph-extra-faq > .ph-container > h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ph-accent);
    margin-bottom: 22px;
}
.ph-extra-aplicar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 22px;
}
.ph-extra-aplicar__item h3 { margin-bottom: 6px; }
.ph-extra-aplicar__item h3 a {
    color: var(--ph-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.ph-extra-aplicar__item h3 a:hover { border-bottom-color: var(--ph-accent); }
.ph-extra-aplicar__item p { color: var(--ph-text-muted); }

/* Secção GEO "<Extra> em todo o país" */
.ph-extra-geo { padding: 44px 0; border-bottom: 1px solid var(--ph-border); }
.ph-extra-geo > .ph-container > h2 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ph-accent);
    margin-bottom: 22px;
}
.ph-extra-geo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 28px;
}
.ph-extra-geo__col h3 {
    color: var(--ph-text);
    font-size: var(--ph-fs-base);
    margin-bottom: 4px;
}
.ph-extra-geo__col p { color: var(--ph-text-muted); font-size: var(--ph-fs-sm); }
.ph-extra-geo__fecho { color: var(--ph-text-muted); margin-top: 22px; font-style: italic; }

.ph-extra-faq { padding: 44px 0; border-bottom: 1px solid var(--ph-border); }
.ph-extra-todos { padding: 32px 0; }
.ph-extra-todos__link { color: var(--ph-accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Índice /extras/ — títulos de categoria */
.ph-extras-cat-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--ph-accent);
    margin: 36px 0 18px;
}
.ph-extras-cat-title:first-of-type { margin-top: 8px; }

/* Feed do Instagram dentro do banner do portfólio (v0.39.20) */
.ph-portfolio-ig-banner__feed { margin-top: 2rem; }


/* ============================================================
   Livre resolução — botão de rescisão (v0.40.0)
   Obrigação legal: Diretiva (UE) 2023/2673, em vigor desde 19/06/2026.
   ============================================================ */
.ph-lr {
	background: var(--ph-bg);
	padding: clamp(4rem, 10vw, 7rem) var(--ph-gutter) clamp(3rem, 8vw, 5rem);
}

.ph-lr__inner {
	max-width: 640px;
	margin: 0 auto;
}

.ph-lr__titulo {
	font-family: var(--ph-font-heading);
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
	margin: 0 0 1.5rem;
	color: var(--ph-text);
}

.ph-lr__intro,
.ph-lr__nota {
	color: var(--ph-text-muted);
	line-height: 1.65;
}

.ph-lr__nota {
	margin-top: 2rem;
	font-size: 0.85rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ph-border);
}

.ph-lr__erro {
	margin: 1.5rem 0;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid #c0392b;
	background: var(--ph-surface);
	color: var(--ph-text);
}

.ph-lr__form {
	margin-top: 2rem;
}

.ph-lr__resumo {
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.75rem;
	background: var(--ph-surface);
	border-left: 3px solid var(--ph-accent);
}

.ph-lr__resumo p {
	margin: 0 0 0.4rem;
	color: var(--ph-text);
}

.ph-lr__resumo p:last-child {
	margin-bottom: 0;
}

.ph-lr__resumo strong {
	color: var(--ph-text-muted);
	font-weight: 500;
	margin-right: 0.35rem;
}

.ph-lr__campo {
	margin-bottom: 1.5rem;
}

.ph-lr__campo label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
	color: var(--ph-text);
}

.ph-lr__campo input,
.ph-lr__campo textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	color: var(--ph-text);
	font-family: var(--ph-font-body);
	font-size: 1rem;
	border-radius: 0;
}

.ph-lr__campo input:focus,
.ph-lr__campo textarea:focus {
	outline: 2px solid var(--ph-accent);
	outline-offset: 1px;
}

.ph-lr__campo small {
	display: block;
	margin-top: 0.35rem;
	color: var(--ph-text-muted);
	font-size: 0.8rem;
}

/* Estilo completo, não herdado: os estilos base de .ph-cta vivem no critical CSS
   da HOMEPAGE, e esta página usa o das internas — o <button> saía sem estilo. */
.ph-lr__confirmar {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 1.2rem 2.5rem;
	background: var(--ph-accent);
	color: var(--ph-bg);
	font-family: var(--ph-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: var(--ph-tracking-detail);
	text-transform: uppercase;
	border: 2px solid var(--ph-accent);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ph-lr__confirmar:hover,
.ph-lr__confirmar:focus-visible {
	background: var(--ph-bg);
	color: var(--ph-accent);
}

.ph-lr__ok h2 {
	font-family: var(--ph-font-heading);
	color: var(--ph-accent);
	margin: 0 0 1rem;
}

.ph-lr__ok p {
	color: var(--ph-text-muted);
	line-height: 1.65;
}

/* Link nas encomendas / detalhe da encomenda. */
.ph-lr-inline {
	margin-top: 1.25rem;
}

.ph-lr-link {
	color: var(--ph-accent);
	font-weight: 600;
}