/* =========================================================================
   PURAFORZA — Design System
   Tokens, componentes e utilitários para usar no Gutenberg/Blocksy.
   ========================================================================= */

:root {
	--pf-navy: #0C2B3B;
	--pf-navy-deep: #081D29;
	--pf-ink: #0B0B0C;
	--pf-white: #FFFFFF;
	--pf-grey-50: #F7F7F6;
	--pf-grey-100: #EFEFED;
	--pf-grey-400: #9AA3A8;
	--pf-grey-600: #5C6B72;

	--pf-display: 'Cinzel', serif;
	--pf-body: 'Manrope', system-ui, sans-serif;

	--pf-ease: cubic-bezier(.22, .61, .36, 1);
	--pf-dur: .6s;
	--pf-radius: 2px;
	--pf-max: 1240px;
}

/* ------------------------------------------------------------------ */
/* Tipografia base                                                     */
/* ------------------------------------------------------------------ */
body { font-family: var(--pf-body); color: var(--pf-ink); }

.pf-eyebrow {
	font-family: var(--pf-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--pf-grey-600);
	margin: 0 0 1rem;
}

h1.pf-display, h2.pf-display, .pf-display {
	font-family: var(--pf-display);
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.12;
	color: var(--pf-navy);
	margin: 0 0 1.25rem;
}
h2.pf-display { font-size: clamp(1.9rem, 4vw, 2.9rem); }

.pf-lead { font-size: 1.1rem; font-weight: 300; line-height: 1.75; color: var(--pf-grey-600); max-width: 62ch; }

/* Secção com respiro generoso — aplicar ao bloco Grupo no Gutenberg   */
.pf-section { padding: clamp(4.5rem, 9vw, 8.5rem) 1.5rem; }
.pf-section > .pf-inner, .pf-inner { max-width: var(--pf-max); margin-inline: auto; }
.pf-section--grey { background: var(--pf-grey-50); }
.pf-section--navy { background: var(--pf-navy); color: var(--pf-white); }
.pf-section--navy .pf-display, .pf-section--navy .pf-eyebrow { color: var(--pf-white); }
.pf-section--navy .pf-eyebrow { color: var(--pf-grey-400); }

/* ------------------------------------------------------------------ */
/* Botões                                                              */
/* Nota: no bloco Botão do Gutenberg quem pinta é o <a> interior       */
/* (.wp-block-button__link); o wrapper fica neutro.                    */
/* ------------------------------------------------------------------ */
.wp-block-button.pf-btn { background: transparent; border: 0; padding: 0; }

.pf-btn .wp-block-button__link,
button.pf-btn,
a.pf-btn:not(.wp-block-button) {
	display: inline-block;
	font-family: var(--pf-body);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1rem 2.2rem;
	border: 1px solid var(--pf-navy);
	border-radius: var(--pf-radius);
	cursor: pointer;
	transition: background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease), border-color var(--pf-dur) var(--pf-ease);
}

.pf-btn--solid .wp-block-button__link,
button.pf-btn--solid,
a.pf-btn--solid:not(.wp-block-button) {
	background: var(--pf-navy) !important;
	color: var(--pf-white) !important;
	border-color: var(--pf-navy) !important;
}
.pf-btn--solid .wp-block-button__link:hover,
button.pf-btn--solid:hover,
a.pf-btn--solid:not(.wp-block-button):hover {
	background: var(--pf-navy-deep) !important;
	color: var(--pf-white) !important;
}

.pf-btn--ghost .wp-block-button__link,
button.pf-btn--ghost,
a.pf-btn--ghost:not(.wp-block-button) {
	background: transparent !important;
	color: var(--pf-navy) !important;
	border-color: var(--pf-navy) !important;
}
.pf-btn--ghost .wp-block-button__link:hover,
button.pf-btn--ghost:hover,
a.pf-btn--ghost:not(.wp-block-button):hover {
	background: var(--pf-navy) !important;
	color: var(--pf-white) !important;
}

/* Variante ghost sobre fundos escuros */
.pf-on-dark.pf-btn--ghost .wp-block-button__link,
.pf-section--navy .pf-btn--ghost .wp-block-button__link,
.pf-on-dark .pf-btn--ghost .wp-block-button__link {
	color: var(--pf-white) !important;
	border-color: var(--pf-white) !important;
}
.pf-on-dark.pf-btn--ghost .wp-block-button__link:hover,
.pf-section--navy .pf-btn--ghost .wp-block-button__link:hover,
.pf-on-dark .pf-btn--ghost .wp-block-button__link:hover {
	background: var(--pf-white) !important;
	color: var(--pf-navy) !important;
}

/* ------------------------------------------------------------------ */
/* Counters do hero (blocos Spectra/UAGB)                              */
/* ------------------------------------------------------------------ */
.wp-block-uagb-counter { text-align: right; }
.wp-block-uagb-counter .wp-block-uagb-counter__number {
	font-family: var(--pf-display);
	font-weight: 600;
	font-size: clamp(2.2rem, 3.4vw, 3.2rem);
	line-height: 1;
	letter-spacing: .03em;
	color: var(--pf-white);
}
.wp-block-uagb-counter .wp-block-uagb-counter__title {
	font-family: var(--pf-body);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	margin-top: .65rem;
}
.wp-block-uagb-counter .wp-block-uagb-counter__title::before {
	content: '';
	display: block;
	width: 34px;
	height: 1px;
	background: rgba(255, 255, 255, .45);
	margin: 0 0 .6rem auto;
}
.wp-block-uagb-counter + .wp-block-uagb-counter { margin-top: 2.6rem; }

/* ------------------------------------------------------------------ */
/* Header — transparente sobre o hero, sólido no scroll                */
/* Ativa "Transparent header" no Blocksy para a página inicial.        */
/* ------------------------------------------------------------------ */
header#header .ct-container,
.ct-header { transition: background-color .45s var(--pf-ease), box-shadow .45s var(--pf-ease); }

.pf-header-solid header#header [data-row],
.pf-header-solid .ct-header {
	background-color: rgba(8, 16, 22, .96) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.pf-header-solid header#header { backdrop-filter: blur(8px); }

/* ------------------------------------------------------------------ */
/* Hero (aplicar ao bloco Capa: classe pf-hero)                        */
/* ------------------------------------------------------------------ */
.pf-hero { min-height: 100svh; display: flex; align-items: center; }
.pf-hero__title {
	font-family: var(--pf-display);
	font-size: clamp(3rem, 9vw, 7rem);
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--pf-white);
	line-height: 1;
	margin: 0 0 1.5rem;
}
.pf-hero__tagline {
	font-size: clamp(1rem, 2vw, 1.35rem);
	font-weight: 300;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pf-white);
	margin: 0 0 .75rem;
}
.pf-hero__sub { color: rgba(255,255,255,.75); font-weight: 300; max-width: 46ch; margin: 0 0 2.25rem; }

/* Indicadores verticais no lado direito do hero                       */
.pf-stats { display: flex; flex-direction: column; gap: 2.25rem; text-align: right; }
.pf-stat__num { font-family: var(--pf-display); font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--pf-white); line-height: 1; display: block; }
.pf-stat__label { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.65); }

/* ------------------------------------------------------------------ */
/* Grelha e cartões de viaturas                                        */
/* ------------------------------------------------------------------ */
.pf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2.5rem;
	max-width: var(--pf-max);
	margin-inline: auto;
}

.pf-card { background: var(--pf-white); border: 1px solid var(--pf-grey-100); transition: box-shadow .5s var(--pf-ease), transform .5s var(--pf-ease); }
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -28px rgba(12, 43, 59, .35); }
.pf-card__link { display: block; text-decoration: none; color: inherit; }
.pf-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--pf-grey-100); }
.pf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--pf-ease); }
.pf-card__link:hover .pf-card__media img { transform: scale(1.045); }
.pf-card__body { padding: 1.5rem 1.6rem 1.9rem; }
.pf-card__brand { font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--pf-grey-600); }
.pf-card__title { font-family: var(--pf-display); font-size: 1.35rem; font-weight: 600; color: var(--pf-navy); margin: .4rem 0 .5rem; }
.pf-card__meta { font-size: .92rem; color: var(--pf-grey-600); margin: 0 0 .75rem; }
.pf-card__price { font-size: 1.15rem; font-weight: 700; color: var(--pf-ink); margin: 0 0 1rem; }
.pf-card__cta {
	font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: var(--pf-navy); border-bottom: 1px solid currentColor; padding-bottom: 2px;
	transition: opacity .3s var(--pf-ease);
}
.pf-card__link:hover .pf-card__cta { opacity: .55; }

/* Slider (home) — scroll-snap nativo + botões                          */
.pf-slider { position: relative; max-width: var(--pf-max); margin-inline: auto; }
.pf-slider__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 380px);
	gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem;
	scrollbar-width: none;
}
.pf-slider__track::-webkit-scrollbar { display: none; }
.pf-slider__track .pf-card { scroll-snap-align: center; }
.pf-slider__nav {
	position: absolute; top: 38%; z-index: 2;
	width: 3rem; height: 3rem; border-radius: 50%;
	border: 1px solid var(--pf-grey-400); background: var(--pf-white); color: var(--pf-navy);
	font-size: 1.4rem; line-height: 1; cursor: pointer;
	transition: background .3s var(--pf-ease), color .3s var(--pf-ease);
}
.pf-slider__nav:hover { background: var(--pf-navy); color: var(--pf-white); }
.pf-slider__nav--prev { left: -1rem; }
.pf-slider__nav--next { right: -1rem; }
@media (max-width: 782px) { .pf-slider__nav { display: none; } }

/* Quando as viaturas cabem todas no ecrã: centra e esconde as setas       */
.pf-slider--static .pf-slider__track { justify-content: center; }
.pf-slider--static .pf-slider__nav { display: none; }

/* ------------------------------------------------------------------ */
/* Colunas com divisórias hairline (secção "Porquê importar?")          */
/* Aplicar classe pf-divided ao bloco Colunas sobre fundo escuro        */
/* ------------------------------------------------------------------ */
.pf-divided { gap: 0 !important; }
.pf-divided .wp-block-column {
	padding: .25rem clamp(1.75rem, 3.5vw, 3.25rem);
	border-left: 1px solid rgba(255, 255, 255, .25);
	flex-basis: 0;
	flex-grow: 1;
}
.pf-divided .wp-block-column:first-child { border-left: 0; padding-left: 0; }
.pf-divided h3 {
	font-family: var(--pf-body);
	font-style: italic;
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: .01em;
	color: var(--pf-white);
	margin: 0 0 1.75rem;
}
.pf-divided ul { list-style: none; padding: 0; margin: 0; }
.pf-divided li, .pf-divided p { color: rgba(255, 255, 255, .88); font-weight: 300; font-size: 1.05rem; line-height: 1.65; }
.pf-divided li { margin-bottom: 1.5rem; }
.pf-divided li:last-child { margin-bottom: 0; }
@media (max-width: 782px) {
	.pf-divided .wp-block-column {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .25);
		padding: 2rem 0;
	}
	.pf-divided .wp-block-column:first-child { border-top: 0; padding-top: 0; }
}

/* Subtítulo itálico sobre fundo escuro (mockup)                        */
.pf-sub-italic { font-style: italic; font-weight: 300; font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,255,255,.85); }

/* Altura contida da secção "Porquê importar?"                          */
.pf-porque {
	min-height: 0 !important;
	padding-top: clamp(4rem, 7vw, 6.5rem);
	padding-bottom: clamp(4rem, 7vw, 6.5rem);
}

/* Ícones sobre cada motivo (usar bloco HTML com SVG)                   */
.pf-divided__icon { color: #C9A96A; margin-bottom: 1.4rem; }
.pf-divided__icon svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------ */
/* Botão voltar ao topo — cavalo PuraForza                              */
/* ------------------------------------------------------------------ */
.pf-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 90;
	width: 60px;
	height: 60px;
	padding: 0;
	border-radius: 50%;
	background: var(--pf-white);
	border: 1px solid var(--pf-grey-100);
	box-shadow: 0 14px 34px -14px rgba(12, 43, 59, .45);
	cursor: pointer;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .45s var(--pf-ease), transform .45s var(--pf-ease), visibility .45s;
}
.pf-top--show { opacity: 1; visibility: visible; transform: none; }
.pf-top:hover { transform: translateY(-4px); }
.pf-top__horse {
	position: absolute;
	inset: 5px;
	background: url('../img/horse.jpg') no-repeat center 28% / 135%;
	border-radius: 50%;
}
@keyframes pf-gallop {
	0%   { transform: translateY(0); }
	48%  { transform: translateY(-130%); }
	52%  { transform: translateY(130%); }
	100% { transform: translateY(0); }
}
.pf-top--run .pf-top__horse { animation: pf-gallop .85s var(--pf-ease); }
@media (prefers-reduced-motion: reduce) { .pf-top--run .pf-top__horse { animation: none; } }

/* ------------------------------------------------------------------ */
/* Sheen: varrimento de luz subtil (aplicar classe pf-sheen ao hero)    */
/* ------------------------------------------------------------------ */
.pf-sheen { position: relative; overflow: hidden; }
.pf-sheen::after {
	content: '';
	position: absolute;
	top: -60%;
	left: 0;
	width: 34%;
	height: 220%;
	background: linear-gradient(78deg, transparent 0%, rgba(255,255,255,.045) 42%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.045) 58%, transparent 100%);
	transform: translateX(-160%) rotate(0.001deg);
	animation: pf-sheen 9s var(--pf-ease) infinite;
	pointer-events: none;
}
@keyframes pf-sheen {
	0%, 55%  { transform: translateX(-160%); }
	85%, 100% { transform: translateX(460%); }
}
@media (prefers-reduced-motion: reduce) { .pf-sheen::after { display: none; } }

/* ------------------------------------------------------------------ */
/* Footer Blocksy — navy com o cavalo em blend à direita                */
/* ------------------------------------------------------------------ */
footer.ct-footer, [data-footer] footer, .site-footer {
	background-color: var(--pf-navy) !important;
	background-image: url('../img/horse.jpg');
	background-repeat: no-repeat;
	background-position: right -60px center;
	background-size: auto 120%;
	background-blend-mode: multiply;
}
@media (max-width: 782px) {
	footer.ct-footer, [data-footer] footer, .site-footer { background-size: auto 60%; background-position: right -40px bottom; }
}

/* ------------------------------------------------------------------ */
/* Cartões translúcidos "Porquê importar?" (sobre imagem escura)        */
/* Aplicar classe pf-glass a cada Coluna do Gutenberg                   */
/* ------------------------------------------------------------------ */
.pf-glass {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	backdrop-filter: blur(6px);
	border-radius: var(--pf-radius);
	padding: 2.25rem 1.9rem;
	color: var(--pf-white);
}
.pf-glass h3 { font-family: var(--pf-display); font-weight: 600; letter-spacing: .04em; color: var(--pf-white); margin: 0 0 .9rem; }
.pf-glass p, .pf-glass li { color: rgba(255,255,255,.82); font-weight: 300; }

/* ------------------------------------------------------------------ */
/* Página de detalhe da viatura                                        */
/* ------------------------------------------------------------------ */
.pf-single { padding: clamp(6.5rem, 10vw, 9rem) 1.5rem clamp(4rem, 7vw, 6rem); background: var(--pf-white); }
.pf-single__inner { max-width: var(--pf-max); margin-inline: auto; }
.pf-single__back a { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--pf-grey-600); }
.pf-single__back { margin-bottom: 2rem; }
.pf-single__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .pf-single__layout { grid-template-columns: 1fr; } }

.pf-gallery__main { margin: 0; aspect-ratio: 4 / 3; background: var(--pf-grey-100); overflow: hidden; }
.pf-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pf-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .6rem; margin-top: .6rem; }
.pf-gallery__thumb { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; }
.pf-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-gallery__thumb.is-active { border-color: var(--pf-navy); }

.pf-summary__brand { font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--pf-grey-600); }
.pf-summary__title { font-family: var(--pf-display); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; color: var(--pf-navy); margin: .5rem 0 1rem; }
.pf-summary__price { font-size: 1.7rem; font-weight: 700; margin: 0 0 1.75rem; }

.pf-specs { margin: 0 0 2rem; }
.pf-specs__row { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--pf-grey-100); }
.pf-specs__row dt { color: var(--pf-grey-600); font-weight: 400; }
.pf-specs__row dd { margin: 0; font-weight: 600; text-align: right; }

.pf-summary__actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.pf-single__description { margin-top: clamp(3rem, 6vw, 5rem); max-width: 72ch; }
.pf-single__description h2 { font-family: var(--pf-display); color: var(--pf-navy); }

/* ------------------------------------------------------------------ */
/* Formulário (estilo sublinhado do mockup)                            */
/* ------------------------------------------------------------------ */
.pf-form { max-width: 680px; }
.pf-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 640px) { .pf-form__row { grid-template-columns: 1fr; } }
.pf-form__field { margin: 0 0 1.9rem; }
.pf-form__field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pf-grey-600); margin-bottom: .45rem; }
.pf-form__field input,
.pf-form__field textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--pf-grey-400);
	border-radius: 0;
	background: transparent;
	padding: .55rem 0;
	font: inherit;
	color: var(--pf-ink);
	transition: border-color .3s var(--pf-ease);
}
.pf-form__field input:focus,
.pf-form__field textarea:focus { outline: none; border-bottom-color: var(--pf-navy); border-bottom-width: 2px; }
.pf-form__hp { position: absolute !important; left: -9999px !important; }
.pf-form__notice { padding: .9rem 1.1rem; border-radius: var(--pf-radius); font-size: .95rem; }
.pf-form__notice--ok { background: #EDF6EF; color: #1F5B33; }
.pf-form__notice--err { background: #FBEDED; color: #7A2222; }

.pf-empty { color: var(--pf-grey-600); font-weight: 300; }

/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Efeito "eco" da tagline (Recentes importações)                      */
/* Usar bloco HTML: <p class="pf-echo" data-text="...">...</p>         */
/* ------------------------------------------------------------------ */
.pf-echo {
	position: relative;
	text-align: center;
	font-style: italic;
	font-size: clamp(1.05rem, 2.2vw, 1.45rem);
	color: var(--pf-ink);
	margin: .25rem 0 3rem;
	z-index: 1;
}
.pf-echo::before,
.pf-echo::after {
	content: attr(data-text);
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	pointer-events: none;
	user-select: none;
}
.pf-echo::before { transform: translateY(-1.15em) scale(1.02); opacity: .22; }
.pf-echo::after  { transform: translateY(1.15em) scale(1.02); opacity: .12; }

/* ------------------------------------------------------------------ */
/* Testemunhos (secção Feedback) — cartões premium                     */
/* Cada cartão é um bloco Capa com foto da viatura + classe pf-quote   */
/* ------------------------------------------------------------------ */
.pf-quote {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	min-height: 420px;
	border: 1px solid rgba(255, 255, 255, .10);
	transition: transform .6s var(--pf-ease), box-shadow .6s var(--pf-ease);
	isolation: isolate;
}
.pf-quote:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); }

/* Funciona como bloco Capa (com foto) ou como Coluna simples (sem foto) */
.pf-quote.wp-block-cover { padding: 0; }
.pf-quote .wp-block-cover__inner-container,
.pf-quote.wp-block-column {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: inherit;
	padding: 2.75rem 2.25rem 2.25rem;
}
.pf-quote.wp-block-column { background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }

/* Aspas decorativas em Cinzel */
.pf-quote .wp-block-cover__inner-container::before,
.pf-quote.wp-block-column::before {
	content: '\201C';
	font-family: var(--pf-display);
	font-size: 4.5rem;
	line-height: .6;
	color: rgba(255, 255, 255, .28);
	display: block;
	margin-bottom: 1.1rem;
}

.pf-quote p {
	font-size: 1.12rem;
	font-weight: 300;
	line-height: 1.85;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 1rem;
}

.pf-quote__author {
	margin-top: auto !important;
	font-size: .78rem !important;
	font-weight: 600 !important;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pf-white) !important;
	display: flex;
	align-items: center;
	gap: .9rem;
}
.pf-quote__author::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: rgba(255, 255, 255, .55);
}

@media (prefers-reduced-motion: reduce) { .pf-quote, .pf-quote:hover { transform: none; transition: none; } }

/* Animações de entrada (reveal on scroll)                             */
/* Aplicar a classe pf-reveal a qualquer bloco no Gutenberg.           */
/* ------------------------------------------------------------------ */
.pf-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--pf-ease), transform .8s var(--pf-ease); }
.pf-reveal.pf-in { opacity: 1; transform: none; }

/* Stagger automático dentro de grelhas                                 */
.pf-grid .pf-reveal:nth-child(2), .pf-slider .pf-reveal:nth-child(2) { transition-delay: .1s; }
.pf-grid .pf-reveal:nth-child(3), .pf-slider .pf-reveal:nth-child(3) { transition-delay: .2s; }
.pf-grid .pf-reveal:nth-child(4) { transition-delay: .3s; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.pf-reveal { opacity: 1; transform: none; transition: none; }
	.pf-card__media img, .pf-btn { transition: none; }
}

/* Ações do hero (botões) */
.pf-hero__actions { margin-top: 2.1rem; gap: 1rem; }

/* Grelha do formulário (campos half/full) */
.pf-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.pf-form__field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .pf-form__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* Página Pedir Orçamento — cartão do formulário + lista de contactos */
/* ------------------------------------------------------------------ */
.pf-form-card {
	background: var(--pf-white);
	border: 1px solid var(--pf-grey-100);
	border-radius: var(--pf-radius);
	padding: clamp(2rem, 4vw, 3.25rem);
	box-shadow: 0 30px 60px -40px rgba(12, 43, 59, .25);
}
.pf-form-card .pf-form { max-width: none; }

.pf-contact-list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.pf-contact-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--pf-grey-100);
}
.pf-contact-list li:last-child { border-bottom: 1px solid var(--pf-grey-100); }
.pf-contact-list .pf-contact-list__label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pf-grey-600);
	white-space: nowrap;
}
.pf-contact-list a, .pf-contact-list span:not(.pf-contact-list__label) {
	color: var(--pf-ink);
	text-decoration: none;
	font-weight: 500;
}
.pf-contact-list a:hover { color: var(--pf-navy); }

.pf-note { font-size: .9rem; color: var(--pf-grey-600); font-weight: 300; margin-top: 1.5rem; }

/* ------------------------------------------------------------------ */
/* Pedir Orçamento v3 — imagem full-height com painel de contactos     */
/* ------------------------------------------------------------------ */
.pf-orc-media {
	position: relative;
	height: 100%;
	min-height: 540px;
	border-radius: var(--pf-radius);
	overflow: hidden;
	margin: 0;
}
.pf-orc-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pf-orc-media__panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 4.5rem 2.25rem 1.9rem;
	background: linear-gradient(180deg, transparent 0%, rgba(8, 16, 22, .55) 35%, rgba(8, 16, 22, .92) 100%);
}
.pf-contact-list--dark { margin-top: 0; }
.pf-contact-list--dark li { border-color: rgba(255, 255, 255, .16); }
.pf-contact-list--dark li:last-child { border-bottom: 0; padding-bottom: .25rem; }
.pf-contact-list--dark .pf-contact-list__label { color: rgba(255, 255, 255, .55); }
.pf-contact-list--dark a,
.pf-contact-list--dark span:not(.pf-contact-list__label) { color: var(--pf-white); }
.pf-contact-list--dark a:hover { color: rgba(255, 255, 255, .75); }
@media (max-width: 900px) { .pf-orc-media { min-height: 420px; height: auto; } }

/* Título H1 em Cinzel com escala própria (páginas interiores)          */
h1.pf-display { font-size: clamp(2.1rem, 4.2vw, 3.3rem); }

/* Campos do formulário: reforço contra os estilos de input do tema     */
.pf-form .pf-form__field input,
.pf-form .pf-form__field textarea {
	border: 0 !important;
	border-bottom: 1px solid var(--pf-grey-400) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: .55rem 0 !important;
}
.pf-form .pf-form__field input:focus,
.pf-form .pf-form__field textarea:focus {
	outline: none !important;
	border-bottom: 2px solid var(--pf-navy) !important;
}

/* ------------------------------------------------------------------ */
/* Footer — refinamento premium (alinha com a grelha do site)          */
/* ------------------------------------------------------------------ */
.ct-footer .ct-container-fluid {
	padding-inline: clamp(1.5rem, 4vw, 4.5rem);
}
.ct-footer [data-row="top"]    { padding: 2.75rem 0 1.6rem; }
.ct-footer [data-row="middle"] { padding: 2.75rem 0 3.25rem; }
.ct-footer [data-row="bottom"] { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.3rem 0; }
.ct-footer [data-row="bottom"] .ct-container-fluid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.ct-footer .ct-footer-copyright p { margin: 0; color: rgba(255, 255, 255, .55); font-size: .85rem; }

/* Ícones sociais: círculos hairline brancos */
.ct-footer .ct-social-box { display: flex; gap: .8rem; }
.ct-footer .ct-social-box a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	transition: border-color .4s var(--pf-ease), background .4s var(--pf-ease);
}
.ct-footer .ct-social-box a:hover { border-color: var(--pf-white); background: rgba(255, 255, 255, .08); }
.ct-footer .ct-social-box svg { fill: var(--pf-white) !important; width: 15px; height: 15px; }

/* Cavalo: em ecrãs estreitos esconde-se para não esmagar o conteúdo   */
@media (max-width: 1100px) {
	footer.ct-footer { background-image: none; }
}

/* Footer: escala tipográfica contida nos widgets                       */
.ct-footer .ct-widget p,
.ct-footer .ct-widget a,
.ct-footer .ct-widget li {
	font-size: .95rem !important;
	line-height: 2 !important;
}
.ct-footer .ct-widget h4 { font-size: .74rem !important; }

/* Footer: escala tipográfica própria (mais contida que o corpo do site) */
.ct-footer [data-row="middle"] p,
.ct-footer [data-row="middle"] a,
.ct-footer [data-row="middle"] li {
	font-size: .95rem;
}
.ct-footer [data-row="middle"] h4 { margin-bottom: .9rem !important; }

/* ------------------------------------------------------------------ */
/* Header nas páginas interiores: sempre escuro (a home mantém o        */
/* transparente com transição no scroll)                                */
/* ------------------------------------------------------------------ */
body:not(.home) header#header [data-row],
body:not(.home) .ct-header {
	background-color: rgba(8, 16, 22, .97) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

/* Mapa (página Contactos) — tratamento monocromático premium           */
.pf-map { border-radius: var(--pf-radius); overflow: hidden; line-height: 0; }
.pf-map iframe {
	width: 100%;
	height: 440px;
	border: 0;
	filter: grayscale(1) contrast(1.04);
	transition: filter .6s var(--pf-ease);
}
.pf-map:hover iframe { filter: grayscale(0); }

/* ------------------------------------------------------------------ */
/* Header sólido nas páginas interiores (fallback à prova de config)   */
/* Na home o header fica transparente e escurece no scroll (JS).       */
/* ------------------------------------------------------------------ */
body:not(.home) #header [data-row],
body:not(.home) .ct-header {
	background-color: rgba(8, 16, 22, .97) !important;
}

/* Âncoras da página Serviços: compensa o header fixo no scroll        */
.pf-section[id] { scroll-margin-top: 96px; }

/* Lista de contactos em tamanho grande (página Contactos)             */
.pf-contact-list--xl li { padding: 1.35rem 0; }
.pf-contact-list--xl a,
.pf-contact-list--xl span:not(.pf-contact-list__label) {
	font-size: clamp(1.1rem, 1.8vw, 1.45rem);
	font-weight: 300;
}

/* Mapa (iframe Google Maps) em tons de cinza premium                  */
.pf-map { border-radius: var(--pf-radius); overflow: hidden; border: 1px solid var(--pf-grey-100); }
.pf-map iframe { display: block; width: 100%; height: 440px; border: 0; filter: grayscale(1) contrast(1.04); }

/* ------------------------------------------------------------------ */
/* Porquê Importar — afinação do ritmo vertical                        */
/* ------------------------------------------------------------------ */
.pf-porque { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }

/* Anula as margens que o tema injeta entre blocos dentro das colunas  */
.pf-divided .wp-block-column > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.pf-divided .pf-divided__icon { margin-bottom: 1.1rem !important; }
.pf-divided h3 { margin-bottom: 1.5rem !important; }
.pf-divided svg { width: 38px; height: 38px; }

/* Encurta o respiro entre o subtítulo e as colunas e antes do botão   */
.pf-porque .wp-block-spacer { height: 40px !important; }

/* Filetes verticais só a partir dos títulos (alinha com o mockup)     */
.pf-divided .wp-block-column { padding-top: .25rem; padding-bottom: .25rem; }

/* ------------------------------------------------------------------ */
/* Menu do header — tipografia, altura e hover premium                 */
/* ------------------------------------------------------------------ */

/* Altura da barra */
#header [data-row="middle"] .ct-container,
#header [data-row="middle"] .ct-container-fluid { min-height: 88px; }

/* Itens de topo: maiores, brancos, sem azul do tema */
#header .ct-menu-link,
#header [data-id="menu"] > ul > li > a {
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--pf-white) !important;
	position: relative;
}

/* Hover/ativo: filete que cresce a partir da esquerda */
#header [data-id="menu"] > ul > li > a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 4px;
	width: 100%;
	height: 1px;
	background: var(--pf-white);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s var(--pf-ease);
}
#header [data-id="menu"] > ul > li > a:hover::after,
#header [data-id="menu"] > ul > li.current-menu-item > a::after,
#header [data-id="menu"] > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }
#header [data-id="menu"] > ul > li > a:hover { color: var(--pf-white) !important; }

/* Dropdown: legível e consistente com a marca */
#header [data-id="menu"] .sub-menu {
	background: rgba(8, 16, 22, .98) !important;
	border: 1px solid rgba(255, 255, 255, .08);
	padding: .4rem 0;
}
#header [data-id="menu"] .sub-menu a {
	color: rgba(255, 255, 255, .85) !important;
	font-size: .85rem;
	font-weight: 500;
	letter-spacing: .1em;
	padding-top: .7rem;
	padding-bottom: .7rem;
	transition: color .3s var(--pf-ease), background .3s var(--pf-ease), padding-left .3s var(--pf-ease);
}
#header [data-id="menu"] .sub-menu a:hover {
	color: var(--pf-white) !important;
	background: rgba(255, 255, 255, .06);
	padding-left: 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
	#header [data-id="menu"] > ul > li > a::after { transition: none; }
}

/* ------------------------------------------------------------------ */
/* Detalhe da viatura v2 — cabeçalho, ações, specs, relacionadas       */
/* ------------------------------------------------------------------ */
.pf-single__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 1.25rem;
}
.pf-single__head .pf-summary__title { margin-bottom: 0; }
.pf-single__head-price .pf-summary__price {
	font-family: var(--pf-display);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	color: var(--pf-navy);
	margin: 0;
}
.pf-single__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	padding-bottom: 1.9rem;
	margin-bottom: 2.25rem;
	border-bottom: 1px solid var(--pf-grey-100);
}
.pf-single__actions .pf-btn { padding: .8rem 1.6rem; font-size: .78rem; }
.pf-single__actions .pf-btn.pf-copied { background: var(--pf-navy) !important; color: var(--pf-white) !important; }

.pf-specs__heading {
	font-family: var(--pf-body);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--pf-grey-600);
	margin: 0 0 .75rem;
}
.pf-specs__row dt { font-size: .95rem; }
.pf-specs__row dd { font-size: .98rem; font-weight: 600; color: var(--pf-ink); }

.pf-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.pf-single__related { margin-top: clamp(4rem, 7vw, 6rem); }
.pf-single__related h2 { margin-bottom: 2rem; }

/* Menu: reforço contra cores do Customizer (fallback lato) */
#header .menu-container a,
#header .menu-container a:visited { color: var(--pf-white) !important; }
#header .menu-container a:hover,
#header .menu-container .current-menu-item > a,
#header .menu-container .current-menu-ancestor > a,
#header .menu-container [aria-current="page"] { color: var(--pf-white) !important; }
#header [data-row="middle"] { --height: 88px; }

/* Detalhe v2.1: ações na coluna lateral + descrição sem imagens repetidas */
.pf-summary .pf-summary__actions { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.pf-summary .pf-summary__actions .pf-btn { padding: .85rem 1.5rem; font-size: .78rem; }
.pf-single__description img { display: none; }

/* Porquê Importar: ícones centrados e maiores; título e listas centrados com eles */
.pf-divided .pf-divided__icon { text-align: center; margin-bottom: 1.35rem !important; }
.pf-divided .pf-divided__icon svg,
.pf-divided svg { width: 52px; height: 52px; stroke-width: 1.25; }
.pf-divided h3 { text-align: center; }

/* Linha de topo do header: contentor fluido para os ícones sociais
   alinharem à direita com o resto da barra                            */
#header [data-row="top"] .ct-container {
	max-width: 100%;
	padding-inline: var(--container-edge-spacing, 25px);
}
#header [data-row="top"] [data-column="end"] { margin-left: auto; }
#header [data-row="top"] .ct-social-box { justify-content: flex-end; }

/* Formulários: força a cor do texto digitado (o tema estava a impor branco) */
.pf-form .pf-form__field input,
.pf-form .pf-form__field textarea {
	color: var(--pf-ink) !important;
	caret-color: var(--pf-navy);
	-webkit-text-fill-color: var(--pf-ink);
}
.pf-form .pf-form__field input::placeholder,
.pf-form .pf-form__field textarea::placeholder {
	color: var(--pf-grey-400) !important;
	-webkit-text-fill-color: var(--pf-grey-400);
	opacity: 1;
}
/* Autofill do Chrome (fundo amarelo/texto claro) */
.pf-form .pf-form__field input:-webkit-autofill {
	-webkit-text-fill-color: var(--pf-ink);
	transition: background-color 9999s ease-in-out 0s;
}

/* ------------------------------------------------------------------ */
/* Slider em leque (Recentes Importações)                              */
/* ------------------------------------------------------------------ */
.pf-slider__track {
	gap: 1.25rem;
	padding: 2.25rem .5rem 3.25rem;
	align-items: flex-start;
}
.pf-slider .pf-card {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--pf-grey-100);
	box-shadow: 0 24px 48px -28px rgba(12, 43, 59, .35);
	transform-origin: center bottom;
	will-change: transform, filter;
	position: relative;
}
.pf-slider .pf-card:hover { transform: none; } /* o leque controla o transform */
@media (prefers-reduced-motion: reduce) {
	.pf-slider .pf-card { transform: none !important; filter: none !important; }
}

/* Leque v2: cartões direitos, arco só por escala, centrados verticalmente */
.pf-slider__track { align-items: center; padding: 2.75rem .5rem 2.75rem; }
.pf-slider .pf-card { transform-origin: center center; }

/* ================================================================== */
/* v1.4.1 — 3D reforçado + setas slider + responsividade              */
/* ================================================================== */

/* 3D reveal mais percetível e sem depender só de translateZ */
.pf-3d .pf-reveal {
	opacity: 0;
	transform: perspective(1200px) translateY(46px) rotateX(7deg) scale(.97);
	transform-origin: center top;
	transition: opacity 1s var(--pf-ease), transform 1.1s var(--pf-ease);
}
.pf-3d .pf-reveal.pf-in { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0) scale(1); }

/* Cartões da grelha entram com um tilt 3D em cascata */
.pf-3d .pf-grid .pf-reveal { transform: perspective(1200px) translateY(50px) rotateX(9deg) scale(.96); }

/* Setas do slider — sempre visíveis, círculos consistentes */
.pf-slider { position: relative; }
.pf-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 200;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--pf-grey-400);
	background: rgba(255,255,255,.92);
	color: var(--pf-navy);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 10px 30px -12px rgba(12,43,59,.4);
	transition: background .3s var(--pf-ease), color .3s var(--pf-ease), transform .3s var(--pf-ease);
}
.pf-slider__nav:hover { background: var(--pf-navy); color: #fff; }
.pf-slider__nav--prev { left: -8px; }
.pf-slider__nav--next { right: -8px; }
.pf-slider--static .pf-slider__nav { display: none !important; }
@media (max-width: 600px) {
	.pf-slider__nav { width: 44px; height: 44px; font-size: 1.25rem; }
	.pf-slider__nav--prev { left: 2px; }
	.pf-slider__nav--next { right: 2px; }
}

/* ---------- Responsividade geral ---------- */

/* Logo/nome dentro do HERO escondido em ecrãs pequenos (fica o do header) */
@media (max-width: 782px) {
	.pf-hero__title,
	.pf-hero .pf-hero__title { display: none; }
}

/* Hero: alturas e tipografia adaptadas a mobile */
@media (max-width: 782px) {
	.pf-hero { min-height: 82svh; }
	.pf-hero__tagline { font-size: 1rem; letter-spacing: .08em; }
	.pf-stats { flex-direction: row; gap: 1.5rem; justify-content: flex-start; flex-wrap: wrap; }
	.wp-block-uagb-counter { text-align: left; }
	.wp-block-uagb-counter .wp-block-uagb-counter__title::before { margin-left: 0; }
}

/* Secções: menos padding lateral e vertical no telemóvel */
@media (max-width: 600px) {
	.pf-section { padding: 3.25rem 1.15rem; }
	.pf-inner { padding-inline: 0; }
	h2.pf-display { font-size: clamp(1.6rem, 7vw, 2.1rem); }
	.pf-lead { font-size: 1rem; }
}

/* Colunas do "Porquê importar" empilham com filete horizontal */
@media (max-width: 782px) {
	.pf-porque { min-height: 0 !important; }
	.pf-divided { flex-direction: column; }
}

/* Página de orçamento / contactos: colunas empilham cedo */
@media (max-width: 900px) {
	.pf-orc-media { margin-bottom: 2rem; }
}

/* Detalhe da viatura: layout de coluna única em tablet/mobile */
@media (max-width: 900px) {
	.pf-single__head { flex-direction: column; align-items: flex-start; gap: .75rem; }
	.pf-summary { margin-top: 2rem; }
}

/* Cartões: garantir imagens nunca cortadas em telas estreitas */
@media (max-width: 480px) {
	.pf-card__media { aspect-ratio: 16 / 11; }
	.pf-summary__actions .pf-btn,
	.pf-single__actions .pf-btn { flex: 1 1 auto; text-align: center; }
}

/* Reduce-motion e mobile: sem 3D (já garantido no JS, reforço aqui) */
@media (prefers-reduced-motion: reduce) {
	.pf-3d .pf-reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ */
/* Mobile: esconder o "PURAFORZA" gigante do hero (fica o do header)   */
/* Alvo: o bloco advanced-heading do Spectra dentro do 1º container    */
/* ------------------------------------------------------------------ */
@media (max-width: 782px) {
	.home .uagb-is-root-container:first-of-type .wp-block-uagb-advanced-heading:first-of-type .uagb-heading-text,
	.home .uagb-is-root-container:first-of-type h1.uagb-heading-text,
	.home .uagb-is-root-container:first-of-type h2.uagb-heading-text:first-child,
	.pf-hero__title,
	.pf-hide-mobile { display: none !important; }
}

/* ================================================================== */
/* v1.4.4 — 3D efetivo, logo do hero em mobile, setas sempre visíveis */
/* ================================================================== */

/* Elementos já visíveis no carregamento: aparecem sem animação        */
.pf-3d .pf-reveal.pf-instant,
.pf-reveal.pf-instant {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* 3D mais evidente para os que entram por scroll                      */
.pf-3d .pf-reveal:not(.pf-instant) {
	opacity: 0;
	transform: perspective(1000px) translateY(60px) rotateX(12deg) scale(.94);
	transform-origin: center top;
	transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.pf-3d .pf-reveal:not(.pf-instant).pf-in {
	opacity: 1;
	transform: perspective(1000px) translateY(0) rotateX(0) scale(1);
}

/* Logo/nome do hero escondido em mobile — bloco Spectra por ID        */
@media (max-width: 782px) {
	.uagb-block-6eeabd2b,
	.uagb-block-6eeabd2b .uagb-heading-text { display: none !important; }
}

/* Setas do slider: visíveis também em desktop                         */
.pf-slider__nav { display: flex !important; }
.pf-slider--static .pf-slider__nav { display: flex !important; }