/**
 * Landing "Portas e Portões" — Modernist suavizado.
 *
 * Mantém-se do sistema original: Archivo, vermelho #ec3013 como marca,
 * tudo alinhado à esquerda, hierarquia tipográfica forte.
 *
 * Suavizado por decisão de design (afasta-se do pacote Claude Design):
 *   - cantos ligeiramente arredondados em vez de zero raio;
 *   - elevação subtil nos cartões em vez de bordas de 2px;
 *   - fotografia a cores em vez de preto e branco forçado;
 *   - segunda cor (azul-aço) a dar um polo à paleta;
 *   - ritmo de fundos alternados em vez de um campo de papel único.
 *
 * Especificidade: as regras base vivem em :where() para que os componentes
 * possam sobrepor-se sem !important. Já quebrou o título do hero, as
 * etiquetas dos botões e os links do rodapé — não baixar a guarda.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
.bc-landing {
	/* neutros quentes */
	--bc-white: #ffffff;
	--bc-bg: #f7f5f3;
	--bc-surface: #efebe7;
	--bc-text: #1c1a19;
	--bc-muted: #6b6461;
	--bc-soft: #8d8783;
	--bc-footer: #211f1e;

	/* marca */
	--bc-accent: #ec3013;
	--bc-accent-600: #d4270c;
	--bc-accent-700: #a81c00;
	--bc-accent-soft: rgba(236, 48, 19, 0.08);

	/* segunda cor — azul-aço */
	--bc-steel: #1f4e6b;
	--bc-steel-700: #163a50;
	--bc-steel-soft: rgba(31, 78, 107, 0.08);

	--bc-divider: rgba(28, 26, 25, 0.12);
	--bc-divider-strong: rgba(28, 26, 25, 0.22);

	--bc-radius-sm: 6px;
	--bc-radius: 12px;
	--bc-radius-lg: 20px;
	--bc-radius-pill: 999px;

	--bc-shadow-sm: 0 1px 2px rgba(28, 26, 25, 0.05), 0 1px 3px rgba(28, 26, 25, 0.04);
	--bc-shadow: 0 2px 4px rgba(28, 26, 25, 0.04), 0 8px 24px rgba(28, 26, 25, 0.07);
	--bc-shadow-lg: 0 4px 8px rgba(28, 26, 25, 0.05), 0 18px 44px rgba(28, 26, 25, 0.11);

	--bc-font: 'Archivo', system-ui, sans-serif;
	--bc-heading-weight: 800;

	--bc-leading: 28px; /* unidade de ritmo */
	--bc-half: 14px;
	--bc-edge: clamp(20px, 5vw, 72px);
	--bc-measure: 58ch;
	--bc-max: 1200px;
	--bc-section: clamp(48px, 5vw, 68px);

	--bc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	background: var(--bc-bg);
	color: var(--bc-text);
	font-family: var(--bc-font);
	font-size: 17px;
	line-height: var(--bc-leading);
}

/* Paleta global do Kadence apontada aos tokens. Este ficheiro só carrega
   no template da landing, por isso não afeta o resto do site. */
:root {
	--global-palette1: #ec3013;
	--global-palette2: #d4270c;
	--global-palette3: #1c1a19;
	--global-palette4: #454140;
	--global-palette5: #6b6461;
	--global-palette6: #d9d3cd;
	--global-palette7: #efebe7;
	--global-palette8: #f7f5f3;
	--global-palette9: #ffffff;
	--global-content-width: 1200px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
.bc-landing *,
.bc-landing *::before,
.bc-landing *::after {
	box-sizing: border-box;
}

.bc-landing :where(h1, h2, h3, h5) {
	font-family: var(--bc-font);
	font-weight: var(--bc-heading-weight);
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-align: left;
	color: var(--bc-text);
}

.bc-landing p {
	max-width: var(--bc-measure);
}

/* Os botões são <a> mas trazem cor própria — ficam de fora desta regra.
   O :where() mantém a especificidade em (0,1,0) para que os contextos
   com cor própria (rodapé escuro, formulário) se sobreponham. */
.bc-landing :where(a:not(.bc-btn)) {
	color: var(--bc-accent-700);
	text-decoration: none;
	transition: color 160ms var(--bc-ease);
}

.bc-landing :where(a:not(.bc-btn)):hover {
	color: var(--bc-accent);
}

.bc-landing ::selection {
	background: rgba(236, 48, 19, 0.16);
}

/* Sem border-radius aqui: alteraria a forma do próprio elemento ao receber
   foco (o rodapé escuro arredondava-se). O outline já segue o raio existente. */
.bc-landing :focus-visible {
	outline: 2px solid var(--bc-accent);
	outline-offset: 3px;
}

.bc-container {
	max-width: var(--bc-max);
	margin: 0 auto;
	padding: 0 var(--bc-edge);
}

/* ==========================================================================
   3. RITMO DE SECÇÕES
   O fundo é o separador. Hairline só onde duas secções da mesma cor se tocam.
   ========================================================================== */
.bc-stats,
.bc-services,
.bc-team {
	background: var(--bc-bg);
	padding: var(--bc-section) 0;
}

.bc-portfolio,
.bc-testimonials {
	background: var(--bc-surface);
	padding: var(--bc-section) 0;
}

.bc-services,
.bc-team,
.bc-testimonials {
	border-top: 1px solid var(--bc-divider);
}

/* ==========================================================================
   4. TÍTULOS DE SECÇÃO
   ========================================================================== */
.bc-section-title {
	font-size: clamp(27px, 2.9vw, 34px);
	line-height: 1.18;
	margin: 0 0 calc(var(--bc-section) * 0.55);
	max-width: 26ch;
}

.bc-kicker {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--bc-accent-700);
	background: var(--bc-accent-soft);
	padding: 7px 12px;
	border-radius: var(--bc-radius-pill);
	margin: 0 0 18px;
}

.bc-section-title a {
	color: var(--bc-accent);
}

.bc-section-title a:hover {
	color: var(--bc-accent-600);
}

/* ==========================================================================
   5. BOTÕES
   Etiquetas continuam à esquerda; ganham raio e elevação ao hover.
   ========================================================================== */
.bc-landing .bc-btn {
	display: inline-block;
	font-family: var(--bc-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 15px 22px;
	border: 1px solid var(--bc-accent);
	border-radius: var(--bc-radius-sm);
	background: var(--bc-accent);
	color: #fff;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--bc-shadow-sm);
	transition: background 160ms var(--bc-ease), border-color 160ms var(--bc-ease),
		color 160ms var(--bc-ease), box-shadow 200ms var(--bc-ease), transform 200ms var(--bc-ease);
}

.bc-landing .bc-btn--primary:hover,
.bc-landing .bc-btn--primary:focus-visible {
	background: var(--bc-accent-600);
	border-color: var(--bc-accent-600);
	color: #fff;
	box-shadow: var(--bc-shadow);
	transform: translateY(-2px);
}

.bc-landing .bc-btn strong {
	font-weight: 700;
}

.bc-landing .bc-btn--outline {
	background: transparent;
	border-color: var(--bc-divider-strong);
	color: var(--bc-text);
	box-shadow: none;
}

.bc-landing .bc-btn--outline:hover,
.bc-landing .bc-btn--outline:focus-visible {
	background: var(--bc-accent-soft);
	border-color: var(--bc-accent);
	color: var(--bc-accent-700);
	transform: translateY(-2px);
}

/* ==========================================================================
   6. ETIQUETAS
   ========================================================================== */
.bc-badge {
	display: inline-block;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 9px 14px;
	border: 1px solid currentColor;
	border-radius: var(--bc-radius-pill);
}

/* ==========================================================================
   7. HERO
   Scrim em gradiente em vez de véu chapado — deixa a cor da foto respirar.
   ========================================================================== */
.bc-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 600px;
	padding: calc(var(--bc-section) * 1.25) 0;
	background-color: #14120f;
	color: #fff;
	overflow: hidden;
}

/* fotografia a cores — chega por --bc-hero-photo (Personalizar → Hero) */
.bc-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--bc-hero-photo, none);
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

/* Scrim: denso onde assenta o texto, aberto no canto oposto. A segunda
   camada (de baixo para cima) é a que assenta o texto e mantém-se sempre.
   A intensidade escolhe-se em Landing Page → Hero, porque o fundo tanto
   pode ser uma fotografia escura como um logótipo claro. */
.bc-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(12, 11, 10, 0.95) 0%, rgba(12, 11, 10, 0.86) 42%, rgba(12, 11, 10, 0.5) 74%, rgba(12, 11, 10, 0.34) 100%),
		linear-gradient(to top, rgba(12, 11, 10, 0.5) 0%, rgba(12, 11, 10, 0) 45%);
	pointer-events: none;
}

/* leve — a imagem respira, para fotografias já escuras */
.bc-hero--scrim-leve::after {
	background:
		linear-gradient(100deg, rgba(12, 11, 10, 0.88) 0%, rgba(12, 11, 10, 0.68) 40%, rgba(12, 11, 10, 0.26) 74%, rgba(12, 11, 10, 0.12) 100%),
		linear-gradient(to top, rgba(12, 11, 10, 0.45) 0%, rgba(12, 11, 10, 0) 45%);
}

/* nenhum — a imagem fica intacta. Como o texto do topo é branco fixo,
   a legibilidade passa a ser garantida por uma sombra larga e suave:
   sobre zonas escuras não se vê, sobre zonas claras é o que impede o
   título de desaparecer. Nada é sobreposto à imagem. */
.bc-hero--scrim-nenhum::after {
	background: none;
}

.bc-hero--scrim-nenhum .bc-hero__title {
	text-shadow: 0 2px 18px rgba(12, 11, 10, 0.7), 0 1px 4px rgba(12, 11, 10, 0.5);
}

/* O parágrafo é pequeno e de peso normal: uma sombra larga não o salva
   sobre fundo claro. Precisa de um halo cerrado, em camadas curtas. */
.bc-hero--scrim-nenhum .bc-hero__text,
.bc-hero--scrim-nenhum .bc-badge {
	text-shadow:
		0 0 3px rgba(12, 11, 10, 0.95),
		0 0 8px rgba(12, 11, 10, 0.9),
		0 1px 16px rgba(12, 11, 10, 0.8);
}

/* o botão contornado perde o fundo do scrim — ganha o seu próprio véu */
.bc-hero--scrim-nenhum .bc-badge,
.bc-hero--scrim-nenhum .bc-btn--outline {
	background: rgba(12, 11, 10, 0.3);
}

/* forte — quase uniforme, para logótipos e imagens claras em que o
   gradiente inclinado deixava metade do grafismo a competir com o texto */
.bc-hero--scrim-forte::after {
	background:
		linear-gradient(100deg, rgba(12, 11, 10, 0.95) 0%, rgba(12, 11, 10, 0.92) 45%, rgba(12, 11, 10, 0.86) 100%),
		linear-gradient(to top, rgba(12, 11, 10, 0.5) 0%, rgba(12, 11, 10, 0) 45%);
}

.bc-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.bc-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--bc-leading);
	width: 100%;
}

.bc-hero__title {
	font-size: clamp(42px, 6.4vw, 88px);
	letter-spacing: -0.03em;
	line-height: 1.03;
	margin: 0;
	color: #fff;
	max-width: 17ch;
}

.bc-hero__text {
	font-size: 18px;
	line-height: 30px;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	max-width: 50ch;
}

.bc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bc-half);
	margin-top: var(--bc-half);
}

.bc-hero .bc-badge {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
}

.bc-hero .bc-btn--outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(6px);
}

.bc-hero .bc-btn--outline:hover,
.bc-hero .bc-btn--outline:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
}

@media (max-width: 780px) {
	.bc-hero {
		min-height: 520px;
	}
}

/* ==========================================================================
   8. BARRA DE URGÊNCIAS
   ========================================================================== */
.bc-urgency {
	background: var(--bc-accent);
	color: #fff;
	padding: 22px 0;
}

.bc-urgency__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bc-half) var(--bc-leading);
}

.bc-urgency__lead {
	font-family: var(--bc-font);
	font-weight: var(--bc-heading-weight);
	font-size: 21px;
	line-height: var(--bc-leading);
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	max-width: none;
}

.bc-urgency__meta {
	font-size: 13px;
	line-height: var(--bc-leading);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
	margin: 0;
	max-width: none;
}

.bc-landing .bc-urgency a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* ==========================================================================
   9. NÚMEROS
   ========================================================================== */
.bc-stats {
	padding: calc(var(--bc-section) * 0.72) 0;
}

.bc-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 30px 28px;
}

.bc-stat__num {
	font-family: var(--bc-font);
	font-weight: var(--bc-heading-weight);
	font-size: clamp(32px, 3.1vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--bc-accent);
	margin: 0;
	padding-bottom: var(--bc-half);
	border-bottom: 2px solid var(--bc-accent-soft);
	max-width: none;
}

.bc-stat__label {
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bc-muted);
	margin: var(--bc-half) 0 0;
	max-width: none;
}

/* ==========================================================================
   10. SERVIÇOS — cartões brancos elevados
   O número de cartões passou a ser livre (vêm do menu Serviços), por isso as
   quatro colunas fixas deram lugar a colunas automáticas. O mínimo é 230px e
   não 260px: com 260 os quatro cartões do arranque não cabiam nos 1056px
   úteis e o quarto caía sozinho para a linha de baixo — 4×230 + 3×32 = 1016,
   cabe.

   auto-fill e não auto-fit: com auto-fit as colunas vazias colapsam, e um
   serviço sozinho — ou o último de uma linha incompleta — esticava-se de
   ponta a ponta. Assim a largura do cartão é sempre a mesma, haja 1 ou 9.
   ========================================================================== */
.bc-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: clamp(20px, 2.4vw, 32px);
	counter-reset: bc-service;
}

@media (max-width: 560px) {
	.bc-services__grid {
		grid-template-columns: 1fr;
	}
}

.bc-services__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--bc-leading);
	border: 1px dashed var(--bc-divider);
	border-radius: var(--bc-radius);
	color: var(--bc-muted);
	font-size: 15px;
}

.bc-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bc-white);
	border: 1px solid var(--bc-divider);
	border-radius: var(--bc-radius);
	box-shadow: var(--bc-shadow-sm);
	overflow: hidden;
	counter-increment: bc-service;
	/* O respiro de baixo vive no cartão e não no texto: a descrição é opcional
	   e, sem ela, o título ficava colado ao rebordo. */
	padding-bottom: var(--bc-leading);
	transition: box-shadow 260ms var(--bc-ease), transform 260ms var(--bc-ease);
}

.bc-service-card:hover {
	box-shadow: var(--bc-shadow-lg);
	transform: translateY(-4px);
}

.bc-service-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.bc-service-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms var(--bc-ease);
}

.bc-service-card:hover .bc-service-card__image img {
	transform: scale(1.04);
}

.bc-service-card__title {
	font-size: 19px;
	line-height: 26px;
	margin: 0;
	padding: var(--bc-leading) clamp(16px, 1.8vw, 22px) 0;
}

/* numeração 01–04 como pastilha de acento */
.bc-service-card__title::before {
	content: counter(bc-service, decimal-leading-zero);
	/* flex (não inline-flex) para ficar em linha própria, acima do título */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-bottom: var(--bc-half);
	font-size: 12px;
	font-feature-settings: 'tnum' 1;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--bc-accent);
	border-radius: var(--bc-radius-pill);
}

.bc-service-card__text {
	font-size: 15px;
	line-height: 25px;
	color: var(--bc-muted);
	margin: var(--bc-half) 0 0;
	padding: 0 clamp(16px, 1.8vw, 22px);
	max-width: none;
}

/* Corte da descrição.
   Os textos do cliente vão a 26 linhas e a grelha estica todos os cartões ao
   mais alto — davam 1000px de altura, mais do que um ecrã. A classe é posta
   pelo JavaScript e só quando o texto passa mesmo do limite, para que sem JS
   fique tudo visível em vez de truncado sem forma de abrir. */
/* O corte é garantido pelo max-height e não pelo line-clamp.
   O parágrafo é filho directo do cartão, que é flex; a especificação obriga a
   "blockificar" o display dos flex items, e o -webkit-box acaba calculado como
   flow-root — o line-clamp fica sem efeito e o texto saía inteiro na mesma.
   O max-height em unidades lh corta na linha certa aconteça o que acontecer; o
   line-clamp fica declarado à mesma, porque onde é respeitado acrescenta as
   reticências e porque é dele que o JavaScript lê o limite. */
.bc-landing .bc-service-card__text.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	max-height: 6lh;
	overflow: hidden;
}

/* z-index acima do .bc-service-card__open, senão fica por baixo dele e o
   clique abria a galeria em vez de expandir o texto. */
.bc-landing .bc-service-card__more,
.bc-landing .bc-service-card__more:hover,
.bc-landing .bc-service-card__more:focus,
.bc-landing .bc-service-card__more:active {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	/* margin-top:auto encosta o botão ao fundo do cartão. Sem isto seguia o
	   texto, e como os títulos ocupam uma ou duas linhas conforme o nome do
	   serviço, os botões ficavam a alturas diferentes de cartão para cartão.
	   A grelha já estica todos à mesma altura, portanto encostados ao fundo
	   ficam alinhados entre si. */
	margin: auto 0 0;
	padding: 10px clamp(16px, 1.8vw, 22px) 0;
	appearance: none;
	background: none;
	border: 0;
	box-shadow: none;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Tom mais escuro que o --bc-accent: o acento puro sobre branco dá 4.2:1 e
	   fica abaixo do mínimo de 4.5 exigido a texto pequeno. Este dá 5.9:1. */
	color: #c22a10;
	cursor: pointer;
}

.bc-service-card__more:focus-visible {
	outline: 2px solid var(--bc-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Botão que abre a galeria: cobre o cartão inteiro em vez de o embrulhar,
   porque um <button> não pode conter o <h3> do serviço. Fica invisível — o
   que se vê é o cartão — mas é focável e tem rótulo para leitores de ecrã.

   Como no .bc-carousel__nav: prefixo .bc-landing e :focus/:hover/:active
   explícitos, senão o button:focus do Kadence (0,1,1) pintava o cartão
   inteiro de vermelho. E aqui dava sempre, porque o JS devolve-lhe o foco
   ao fechar a galeria. */
.bc-landing .bc-service-card__open,
.bc-landing .bc-service-card__open:hover,
.bc-landing .bc-service-card__open:focus,
.bc-landing .bc-service-card__open:active {
	position: absolute;
	inset: 0;
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	box-shadow: none;
	color: inherit;
	z-index: 1;
	border-radius: var(--bc-radius);
}

.bc-service-card__open:focus-visible {
	outline: 3px solid var(--bc-accent);
	outline-offset: 2px;
}

/* Com galeria o cartão levanta também quando o foco chega pelo teclado,
   para o estado ser o mesmo do rato. */
.bc-service-card:has(.bc-service-card__open:focus-visible) {
	box-shadow: var(--bc-shadow-lg);
	transform: translateY(-4px);
}

/* Caixa de consentimento. Alinhada ao topo e não ao centro, para o quadrado
   ficar junto à primeira linha quando o texto passa a duas em telemóvel. */
.bc-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: var(--bc-leading);
}

.bc-form__consent input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--bc-accent);
	cursor: pointer;
}

.bc-form__consent label {
	font-size: 14px;
	line-height: 21px;
	cursor: pointer;
}

.bc-form__consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bc-footer-legal {
	margin: var(--bc-leading) 0 0;
	font-size: 13px;
}

.bc-footer-legal a {
	color: var(--bc-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   11. FORMULÁRIO — painel azul-aço
   O segundo polo da paleta, e o contraste que separa a metade de cima
   da metade de baixo da página.
   ========================================================================== */
.bc-booking {
	background: var(--bc-steel);
	color: #fff;
	padding: var(--bc-section) 0;
}

.bc-booking .bc-section-title {
	color: #fff;
}

.bc-landing .bc-booking .bc-section-title a {
	color: #ffd9d2;
}

.bc-landing .bc-booking .bc-section-title a:hover {
	color: #fff;
}

.bc-form {
	max-width: 940px;
}

.bc-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--bc-leading) clamp(16px, 2vw, 28px);
}

.bc-form__row--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bc-form__field {
	margin-bottom: var(--bc-leading);
}

.bc-form__row .bc-form__field {
	margin-bottom: 0;
}

.bc-form__row + .bc-form__row,
.bc-form__row + .bc-form__field {
	margin-top: var(--bc-leading);
}

.bc-form label {
	display: block;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 10px;
}

.bc-form input[type='text'],
.bc-form input[type='email'],
.bc-form select,
.bc-form textarea {
	width: 100%;
	font-family: var(--bc-font);
	font-size: 15.5px;
	line-height: var(--bc-leading);
	color: var(--bc-text);
	background: var(--bc-white);
	border: 1px solid transparent;
	border-radius: var(--bc-radius-sm);
	padding: 12px 14px;
	transition: border-color 160ms var(--bc-ease), box-shadow 160ms var(--bc-ease);
}

.bc-form input:focus,
.bc-form select:focus,
.bc-form textarea:focus {
	border-color: var(--bc-accent);
	box-shadow: 0 0 0 4px rgba(236, 48, 19, 0.25);
	outline: none;
}

.bc-form ::placeholder {
	color: var(--bc-soft);
}

.bc-form textarea {
	resize: vertical;
	min-height: 120px;
}

.bc-form__submit {
	margin-top: var(--bc-leading);
}

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

.bc-form-message {
	font-size: 15px;
	line-height: var(--bc-leading);
	padding: 16px 20px;
	margin: 0 0 var(--bc-leading);
	border-radius: var(--bc-radius-sm);
	border-left: 3px solid currentColor;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	max-width: 940px;
}

.bc-form-message--error {
	color: #ffb4a5;
}

@media (max-width: 780px) {
	.bc-form__row,
	.bc-form__row--three {
		grid-template-columns: 1fr;
	}

	.bc-form__row .bc-form__field + .bc-form__field {
		margin-top: var(--bc-leading);
	}
}

/* ==========================================================================
   12. EQUIPA
   ========================================================================== */
.bc-team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.bc-team-member__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--bc-radius);
	overflow: hidden;
	box-shadow: var(--bc-shadow-sm);
	transition: box-shadow 260ms var(--bc-ease), transform 260ms var(--bc-ease);
}

.bc-team-member:hover .bc-team-member__photo {
	box-shadow: var(--bc-shadow-lg);
	transform: translateY(-4px);
}

.bc-team-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bc-team-member__name {
	font-size: 19px;
	line-height: 26px;
	margin: var(--bc-leading) 0 0;
}

.bc-team-member__role {
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-muted);
	margin: 8px 0 0;
	max-width: none;
}

/* ==========================================================================
   14. CARROSSÉIS
   .bc-carousel__track continua a ser um flex scrollável, como o JS espera.
   ========================================================================== */
.bc-carousel {
	position: relative;
}

.bc-carousel__track {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: var(--bc-half);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bc-carousel__track::-webkit-scrollbar {
	display: none;
}

.bc-carousel__slide {
	position: relative;
	flex: 0 0 calc(33.333% - 20px);
	aspect-ratio: 4 / 3;
	border-radius: var(--bc-radius);
	overflow: hidden;
	box-shadow: var(--bc-shadow-sm);
	scroll-snap-align: start;
	transition: box-shadow 260ms var(--bc-ease), transform 260ms var(--bc-ease);
}

.bc-carousel__slide:hover {
	box-shadow: var(--bc-shadow-lg);
	transform: translateY(-4px);
}

.bc-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* O Kadence pinta todos os <button> com o vermelho da paleta e tem regras
   button:hover / button:focus com especificidade (0,1,1). Daí o prefixo
   .bc-landing aqui — e o :focus explícito, senão a seta fica vermelha
   depois de clicada. */
.bc-landing .bc-carousel__nav,
.bc-landing .bc-carousel__nav:focus {
	position: absolute;
	top: -64px;
	width: 44px;
	height: 44px;
	background: var(--bc-white);
	border: 1px solid var(--bc-divider);
	border-radius: var(--bc-radius-pill);
	color: var(--bc-text);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--bc-shadow-sm);
	transition: background 160ms var(--bc-ease), color 160ms var(--bc-ease),
		border-color 160ms var(--bc-ease), box-shadow 200ms var(--bc-ease);
}

.bc-landing .bc-carousel__nav:hover {
	background: var(--bc-accent);
	border-color: var(--bc-accent);
	color: #fff;
	box-shadow: var(--bc-shadow);
}

/* Em ecrãs estreitos o título da secção ocupa a largura toda e passava
   por baixo das setas — reserva-se o canto superior direito para elas.
   As setas ocupam 100px (44 + 12 de intervalo + 44) a partir da direita. */
@media (max-width: 780px) {
	.bc-portfolio .bc-section-title,
	.bc-testimonials .bc-section-title {
		padding-right: 108px;
	}
}

.bc-carousel__nav--prev {
	right: 56px;
}

.bc-carousel__nav--next {
	right: 0;
}

@media (max-width: 980px) {
	.bc-carousel__slide {
		flex: 0 0 calc(50% - 14px);
	}
}

@media (max-width: 640px) {
	.bc-carousel__slide {
		flex: 0 0 100%;
	}
}

/* ==========================================================================
   14b. TRABALHOS REALIZADOS
   Cada cartão é um <button> que abre a galeria sobreposta.
   ========================================================================== */
/* Mesmo caso do .bc-carousel__nav: sem o :focus explícito e o prefixo
   .bc-landing, o button:focus do Kadence (0,1,1) pintava o trabalho de
   vermelho — e dava sempre, porque o JS devolve o foco ao cartão quando a
   galeria fecha. */
.bc-landing .bc-work,
.bc-landing .bc-work:hover,
.bc-landing .bc-work:focus,
.bc-landing .bc-work:active {
	flex: 0 0 calc(33.333% - 20px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.bc-work[disabled] {
	cursor: default;
}

.bc-work__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--bc-radius);
	overflow: hidden;
	box-shadow: var(--bc-shadow-sm);
	transition: box-shadow 260ms var(--bc-ease), transform 260ms var(--bc-ease);
}

.bc-work:not([disabled]):hover .bc-work__media,
.bc-work:focus-visible .bc-work__media {
	box-shadow: var(--bc-shadow-lg);
	transform: translateY(-4px);
}

.bc-work__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms var(--bc-ease);
}

.bc-work:not([disabled]):hover .bc-work__media img {
	transform: scale(1.04);
}

.bc-work__media .bc-ph {
	width: 100%;
	height: 100%;
}

/* contador de ficheiros, quando o trabalho ou o serviço tem mais do que um */
.bc-work__count,
.bc-service-card__count {
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(12, 11, 10, 0.72);
	backdrop-filter: blur(6px);
	padding: 6px 10px;
	border-radius: var(--bc-radius-pill);
}

.bc-work__title {
	display: block;
	font-family: var(--bc-font);
	font-weight: var(--bc-heading-weight);
	font-size: 17px;
	line-height: 24px;
	letter-spacing: -0.015em;
	color: var(--bc-text);
	margin-top: var(--bc-half);
}

.bc-work__caption {
	display: block;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bc-muted);
	margin-top: 6px;
}

@media (max-width: 980px) {
	.bc-work {
		flex: 0 0 calc(50% - 14px);
	}
}

@media (max-width: 640px) {
	.bc-work {
		flex: 0 0 100%;
	}
}

/* ==========================================================================
   14c. GALERIA SOBREPOSTA
   ========================================================================== */
.bc-lightbox[hidden] {
	display: none;
}

.bc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
}

.bc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 11, 10, 0.88);
	backdrop-filter: blur(8px);
}

.bc-lightbox__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1100px, 100%);
	max-height: 100%;
	background: var(--bc-white);
	border-radius: var(--bc-radius-lg);
	overflow: hidden;
	box-shadow: var(--bc-shadow-lg);
}

/* Também aqui: é focado por código ao abrir a galeria, e sem o :focus
   explícito o button:focus do Kadence pintava-o de vermelho. */
.bc-landing .bc-lightbox__close,
.bc-landing .bc-lightbox__close:focus {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	/*
	 * O padding:0 não é decoração, é o que faz dele um círculo. O Kadence põe
	 * padding:0.4em 1em em todos os <button> e o padding não comprime: com a
	 * fonte a 24px eram 48px só de padding horizontal, mais do que os 40 de
	 * largura declarados, e saía um oval de 48×40. As setas escapavam ao mesmo
	 * problema por terem a fonte a 15px.
	 */
	padding: 0;
	line-height: 1;
	color: #fff;
	background: rgba(12, 11, 10, 0.62);
	/* Contorno ténue e desfoque, como em .bc-work__count: é o que o separa da
	   fotografia, seja ela clara ou escura. */
	border: 1px solid rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: var(--bc-radius-pill);
	cursor: pointer;
	transition: background 160ms var(--bc-ease), transform 160ms var(--bc-ease);
}

.bc-landing .bc-lightbox__close svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Escurece em vez de ficar laranja: o acento a cobrir o botão inteiro era o que
   o fazia saltar à vista por cima da fotografia. O acento fica para o foco. */
.bc-landing .bc-lightbox__close:hover {
	background: rgba(12, 11, 10, 0.88);
	transform: scale(1.06);
}

.bc-landing .bc-lightbox__close:focus-visible {
	outline: 3px solid var(--bc-accent);
	outline-offset: 2px;
}

/* dentro da barra os botões ficam no fluxo, não absolutos */
.bc-landing .bc-lightbox__nav .bc-carousel__nav,
.bc-landing .bc-lightbox__nav .bc-carousel__nav:focus {
	position: static;
}

/* Altura explícita, e não flex:1.
   Com a altura vinda do flex, o max-height:100% da imagem não resolvia — uma
   percentagem precisa de altura definida no pai, e a de um flex item não é.
   A imagem transbordava e o painel cortava-lha. Fixada aqui, a divisão entre
   fotografia e texto passa a ser previsível e a imagem cabe sempre. */
.bc-lightbox__stage {
	flex: 0 0 auto;
	height: min(50vh, 520px);
	background: #14120f;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* O display:flex acima ganha ao hidden, e o palco preto continuava a aparecer
   nos serviços sem fotografia. */
.bc-lightbox__stage[hidden] {
	display: none;
}

/* max-height em percentagem do palco, e não em vh.
   Medida em vh, a imagem não sabia quanto espaço a barra estava a ocupar: com
   a descrição do serviço lá dentro a barra cresceu, o palco encolheu, e a
   imagem passou a transbordar e a ser cortada pelo painel — 127px perdidos num
   ecrã de 800. Contra o palco, encolhe com ele. */
.bc-lightbox__stage img,
.bc-lightbox__stage video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* As setas saem do fluxo para o texto poder ficar centrado no painel: com
   elas a ocupar espaço à direita, um bloco "centrado" ficava sempre desviado
   para a esquerda. */
.bc-lightbox__bar {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bc-leading);
	padding: 18px clamp(16px, 2vw, 26px);
	border-top: 1px solid var(--bc-divider);
}

.bc-lightbox__title {
	font-family: var(--bc-font);
	font-weight: var(--bc-heading-weight);
	font-size: 17px;
	line-height: 24px;
	letter-spacing: -0.015em;
	color: var(--bc-text);
	margin: 0;
	max-width: none;
}

.bc-lightbox__caption {
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bc-muted);
	margin: 6px 0 0;
	max-width: none;
}

.bc-lightbox__caption:empty {
	display: none;
}

/* Descrição completa do serviço.
   A barra é estreita em altura por causa da fotografia, por isso o texto tem
   scroll próprio em vez de empurrar o painel para fora do ecrã. */
.bc-lightbox__desc {
	font-size: 15px;
	line-height: 25px;
	color: var(--bc-muted);
	margin: 10px 0 0;
	max-width: 68ch;
	/* Folga para as descrições longas do cliente caberem sem scroll na maioria
	   dos casos; o palco cedeu altura para isto. */
	max-height: min(32vh, 300px);
	overflow-y: auto;
	overscroll-behavior: contain;
	white-space: pre-line;
	/* espaço para a barra de scroll não colar às letras */
	padding-right: 10px;
	/* Barra de scroll fina e com a cor de acento, sempre visível: é o sinal
	   mais directo de que o texto continua. */
	scrollbar-width: thin;
	scrollbar-color: var(--bc-accent) rgba(28, 26, 25, 0.08);
}

.bc-lightbox__desc:empty {
	display: none;
}

/* Quando ainda há texto por ler, a última linha esbate-se em vez de ficar
   cortada a meio — assim lê-se como "continua" e não como defeito. O JS tira
   a classe ao chegar ao fim, para a última linha não ficar desbotada. */
.bc-lightbox__desc.has-more {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}

/* Bloco centrado no painel. O parágrafo em si fica alinhado à esquerda de
   propósito: dez linhas centradas dão um bordo esquerdo serrilhado e custam a
   ler. Centrado é o bloco e o título. */
.bc-lightbox__info {
	min-width: 0;
	max-width: 68ch;
	margin: 0 auto;
	text-align: center;
	/* espaço para as setas, para o texto não passar por baixo delas */
	padding: 0 clamp(64px, 9vw, 130px);
}

.bc-lightbox__desc {
	text-align: left;
}

/* Aviso escrito, além do esbatimento e da barra de scroll: só aparece
   enquanto houver texto por ler. */
.bc-lightbox__hint {
	display: none;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-accent);
}

.bc-lightbox__desc.has-more ~ .bc-lightbox__hint {
	display: block;
}

/* Sem fotografias a janela é só texto: sem o palco preto, e com o painel a
   encolher para o tamanho do conteúdo em vez de ficar uma caixa vazia. */
.bc-lightbox--text-only .bc-lightbox__panel {
	width: min(680px, 100%);
}

.bc-lightbox--text-only .bc-lightbox__bar {
	border-top: 0;
}

.bc-lightbox--text-only .bc-lightbox__desc {
	max-height: min(60vh, 520px);
}

.bc-lightbox__nav {
	position: absolute;
	right: clamp(16px, 2vw, 26px);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.bc-lightbox__counter {
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--bc-muted);
	min-width: 52px;
	text-align: center;
}

@media (max-width: 640px) {
	.bc-lightbox__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--bc-half);
	}

	/* Em coluna a barra passa a ocupar a largura toda, e as setas voltam ao
	   fluxo, por baixo do texto, em vez de sobrepostas a ele. */
	.bc-lightbox__info,
	.bc-lightbox__nav {
		width: 100%;
	}

	.bc-lightbox__info {
		max-width: none;
		margin: 0;
		padding: 0;
		text-align: left;
	}

	.bc-lightbox__nav {
		position: static;
		transform: none;
		justify-content: space-between;
	}

	/* A fotografia já leva metade do ecrã; ao texto chega-lhe menos altura,
	   com scroll próprio. Sem fotografia pode respirar. */
	.bc-lightbox__desc {
		font-size: 14px;
		line-height: 23px;
		max-height: 30vh;
		padding-right: 8px;
	}

	.bc-lightbox--text-only .bc-lightbox__desc {
		max-height: 62vh;
	}

	/* Menos altura para a fotografia, mais para o texto. */
	.bc-lightbox__stage {
		height: 38vh;
	}
}

/* ==========================================================================
   15. AVALIAÇÕES
   ========================================================================== */
.bc-testimonial {
	flex: 0 0 calc(33.333% - 20px);
	scroll-snap-align: start;
	background: var(--bc-white);
	border: 1px solid var(--bc-divider);
	border-radius: var(--bc-radius);
	box-shadow: var(--bc-shadow-sm);
	padding: 30px;
	text-align: left;
	transition: box-shadow 260ms var(--bc-ease), transform 260ms var(--bc-ease);
}

.bc-testimonial:hover {
	box-shadow: var(--bc-shadow-lg);
	transform: translateY(-4px);
}

.bc-testimonial__stars {
	color: var(--bc-accent);
	font-size: 15px;
	letter-spacing: 0.2em;
	line-height: 1;
}

.bc-testimonial__text {
	font-family: var(--bc-font);
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.015em;
	margin: var(--bc-leading) 0 0;
	max-width: 32ch;
}

.bc-testimonial__author {
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bc-muted);
	margin: var(--bc-leading) 0 0;
	max-width: none;
}

@media (max-width: 980px) {
	.bc-testimonial {
		flex: 0 0 calc(50% - 14px);
	}
}

@media (max-width: 640px) {
	.bc-testimonial {
		flex: 0 0 100%;
	}
}

/* ==========================================================================
   16. RODAPÉ DE CONTACTOS
   ========================================================================== */
.bc-footer-contact {
	background: var(--bc-footer);
	color: rgba(255, 255, 255, 0.72);
	padding: var(--bc-section) 0;
	font-size: 15px;
	line-height: var(--bc-leading);
}

.bc-footer-contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.bc-footer-contact h5 {
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 var(--bc-leading);
	padding-bottom: var(--bc-half);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.bc-footer-contact p {
	margin: 0;
	max-width: 38ch;
}

.bc-landing .bc-footer-contact a {
	color: #ff9783;
}

.bc-landing .bc-footer-contact a:hover {
	color: #fff;
}

.bc-contact-list {
	list-style: none;
	margin: var(--bc-leading) 0 0;
	padding: 0;
}

/* Cada contacto é um ícone + valor na mesma linha. O ícone alinha pelo
   topo da primeira linha de texto, para moradas de duas linhas não o
   deixarem a boiar a meio. */
.bc-contact-list li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	align-items: start;
	column-gap: 12px;
	row-gap: 2px;
}

.bc-contact-list li + li {
	margin-top: 14px;
}

.bc-contact-list__icon {
	width: 17px;
	height: 17px;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.42);
	flex: 0 0 auto;
}

/* nota discreta a seguir ao número de urgências, na coluna do texto */
.bc-contact-list__note {
	grid-column: 2;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.bc-landing .bc-footer-contact .bc-btn--outline {
	margin-top: var(--bc-leading);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.bc-landing .bc-footer-contact .bc-btn--outline:hover,
.bc-landing .bc-footer-contact .bc-btn--outline:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: #fff;
	color: #fff;
}

/* ==========================================================================
   17. PLACEHOLDERS
   Enquanto não há fotografias, estes blocos têm de ler como "arte por
   definir" e não como imagem partida. São 21 no total.
   ========================================================================== */
.bc-ph {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 10px;
	padding: 18px;
	background:
		linear-gradient(135deg, #efebe7 0%, #e5dfd9 52%, #dcd5cd 100%);
	border: 1px dashed rgba(28, 26, 25, 0.16);
	color: var(--bc-soft);
}

.bc-ph__icon {
	display: block;
	width: 26px;
	height: 26px;
	opacity: 0.5;
}

.bc-ph__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.bc-ph__label {
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
}

/* o placeholder não levanta ao hover — não há nada para revelar */
.bc-service-card__image.bc-ph,
.bc-carousel__slide.bc-ph,
.bc-team-member__photo.bc-ph {
	box-shadow: none;
}

.bc-carousel__slide.bc-ph:hover {
	transform: none;
	box-shadow: none;
}

/* ==========================================================================
   18. MOVIMENTO
   O JS acrescenta .bc-reveal só depois de arrancar, para que sem JS
   (ou com movimento reduzido) tudo fique visível por omissão.
   ========================================================================== */
.bc-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 620ms var(--bc-ease), transform 620ms var(--bc-ease);
}

.bc-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.bc-landing *,
	.bc-carousel__track {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.bc-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   19. TELEMÓVEL — compactação
   A 390px a página media 10794px (~28 ecrãs). As grelhas de uma coluna com
   imagens 4/3 e 3/4 é que esticavam tudo: aqui passam a duas colunas e a
   proporções mais baixas, e os cartões de serviço ficam horizontais.
   ========================================================================== */
@media (max-width: 600px) {
	.bc-landing {
		--bc-section: 44px;
	}

	/* hero */
	.bc-hero {
		min-height: 0;
		padding: 52px 0 60px;
	}

	.bc-hero__inner {
		gap: 18px;
	}

	.bc-hero__title {
		font-size: 34px;
		line-height: 1.08;
	}

	.bc-hero__text {
		font-size: 16px;
		line-height: 26px;
	}

	.bc-hero__actions {
		margin-top: 4px;
		gap: 10px;
	}

	/* títulos de secção */
	.bc-section-title {
		font-size: 26px;
		margin-bottom: 26px;
	}

	.bc-kicker {
		margin-bottom: 16px;
	}

	/* números: 2×2 em vez de uma coluna esticada */
	.bc-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 18px;
	}

	.bc-stat__num {
		font-size: 30px;
		padding-bottom: 10px;
	}

	.bc-stat__label {
		font-size: 11px;
		line-height: 16px;
		letter-spacing: 0.05em;
		margin-top: 10px;
	}

	/* Serviços: imagem em cima, à largura toda.
	   Era um cartão horizontal com uma coluna de 104px para a imagem, que
	   funcionava com as descrições curtas de origem (~30 palavras). Com os
	   textos reais do cliente (60 a 90) a coluna de texto passa dos 500px e a
	   imagem, que atravessava as duas linhas, esticava-se numa tira de 104px
	   de largura por 540 de altura. Empilhado, a fotografia volta a ler-se
	   como fotografia. 16:9 e não 4:3 para o cartão não crescer de mais. */
	.bc-services__grid {
		gap: 12px;
	}

	.bc-service-card__image {
		aspect-ratio: 16 / 9;
	}

	.bc-landing .bc-service-card__text.is-clamped {
		-webkit-line-clamp: 5;
		line-clamp: 5;
		max-height: 5lh;
	}

	.bc-service-card__title {
		padding: 16px 16px 0;
		font-size: 17px;
		line-height: 23px;
	}

	.bc-service-card__title::before {
		width: 26px;
		height: 26px;
		margin-bottom: 10px;
	}

	.bc-service-card__text {
		padding: 0 16px 16px;
		margin-top: 8px;
		font-size: 14px;
		line-height: 22px;
	}

	/* equipa e galeria: duas colunas */
	.bc-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.bc-team-member__photo {
		aspect-ratio: 1 / 1;
	}

	.bc-team-member__name {
		font-size: 16px;
		line-height: 22px;
		margin-top: 14px;
	}

	.bc-team-member__photo .bc-ph {
		padding: 10px;
	}

	/* formulário mais apertado */
	.bc-form__row {
		gap: 18px;
	}

	.bc-form__field {
		margin-bottom: 18px;
	}

	.bc-form__row + .bc-form__row,
	.bc-form__row + .bc-form__field,
	.bc-form__row .bc-form__field + .bc-form__field {
		margin-top: 18px;
	}

	.bc-form textarea {
		min-height: 96px;
	}

	/* avaliações */
	.bc-testimonial {
		padding: 22px;
	}

	.bc-testimonial__text {
		font-size: 16px;
		line-height: 25px;
		margin-top: 18px;
	}

	/* rodapé */
	.bc-footer-contact__grid {
		gap: 30px;
	}
}

/* ==========================================================================
   20. CABEÇALHO E RODAPÉ DO KADENCE
   Só se aplicam nesta página — o ficheiro não carrega noutros templates.
   ========================================================================== */
body {
	background: #f7f5f3;
}

/* cabeçalho fixo que ganha desfoque e sombra ao descer */
body #masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(247, 245, 243, 0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--bc-divider, rgba(28, 26, 25, 0.12));
	box-shadow: none;
	transition: box-shadow 260ms ease, background 260ms ease;
}

body.bc-scrolled #masthead {
	background: rgba(247, 245, 243, 0.94);
	box-shadow: 0 1px 3px rgba(28, 26, 25, 0.06), 0 8px 28px rgba(28, 26, 25, 0.07);
}

body #masthead .site-main-header-inner-wrap {
	transition: min-height 260ms ease;
}

body.bc-scrolled #masthead .site-main-header-inner-wrap {
	min-height: 66px;
}

.site-branding .site-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.02em;
	color: #1c1a19;
}

.header-navigation .menu-item > a {
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 15px;
	color: #1c1a19;
	white-space: nowrap;
	transition: color 160ms ease;
}

.header-navigation .menu-item > a:hover,
.header-navigation .current-menu-item > a {
	color: #ec3013;
}

/* No telemóvel o botão do header parte em duas linhas ao lado do logo.
   Kadence gera "#main-header .header-button" (1,0,1) — daqui vai (1,0,2). */
@media (max-width: 600px) {
	body #main-header .header-button {
		font-size: 13px;
		padding: 10px 13px;
		margin-left: 12px;
	}

	.site-branding .site-title {
		font-size: 17px;
	}
}

.site-footer {
	background: #f7f5f3;
	border-top: 1px solid rgba(28, 26, 25, 0.12);
	color: #6b6461;
	font-family: 'Archivo', system-ui, sans-serif;
	font-size: 13px;
	line-height: 28px;
}

.site-footer a {
	color: #a81c00;
	text-decoration: none;
}

.site-footer a:hover {
	color: #ec3013;
}