/* Ajustes do cliente (Figma "Ajustes Cliente", setembro de 2026).
 *
 * O site.css continua a ser o espelho do repositório original; tudo o que o
 * layout revisto mudou vive aqui, por cima dele. As medidas estão na base de
 * 1440px, como o resto do CSS: acima disso o <html> recebe zoom proporcional
 * (ver ferznunes-hello-child/functions.php), e em 1920px o resultado bate com
 * o frame do Figma.
 */

/* ---------------------------------------------------------
   Barra de topo: acima do banner, não por cima dele
   ---------------------------------------------------------
   No Figma a barra ocupa 10..86px e a fotografia começa em 92px (em 1920).
   Na base de 1440: barra de 8 a 64px e fotografia a partir de 69px. */

.topbar {
	padding: 8px 32px;
	min-height: 56px;
}

.topbar__logo {
	width: 172.5px;
	height: 39px;
}

.topbar__actions {
	gap: 14px;
}

.topbar__actions .topbar__flag {
	width: 31px;
	height: 22.5px;
	margin-right: 10px;
}

.topbar__actions .topbar__whatsapp {
	width: 20px;
	height: 20px;
}

.hero {
	padding-top: 69px;
}

.hero__visual {
	padding-top: 78px;
}

.hero--compact {
	height: 407px;
	padding-top: 70px;
}

.hero--compact .hero__visual {
	padding-top: 0;
}

/* ---------------------------------------------------------
   Respiros da Home, medidos contra o Figma em 1920px
   --------------------------------------------------------- */

/* A fotografia do Sobre encosta na faixa cinzenta do Processo (no Figma o
   bloco até passa 11px por baixo dela). Só na variante com fotografia
   simples: a página Sobre, com a fotografia larga, mantém o respiro. */
.sobre:has(.sobre__photo) {
	padding-bottom: 0;
}

/* Serviços com uma só fila de cartões: 146px acima e abaixo em 1920. */
.servicos {
	padding: 109px 0;
}

@media (max-width: 1024px) {
	.servicos {
		padding: 64px 0;
	}
}

/* ---------------------------------------------------------
   Hero em carrossel (home)
   ---------------------------------------------------------
   Os slides partilham a mesma célula de grid em vez de irem para
   position:absolute: a altura do conjunto passa a ser a do slide mais alto,
   o que no mobile (hero com altura automática) evita cortar o texto. */

.hero--carrossel .hero__slides {
	position: relative;
	display: grid;
	height: 100%;
}

.hero--carrossel .hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.hero--carrossel .hero__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease;
}

/* Sombreamento do banner. O design original subia um #1b1b1b sólido da base
   até 77% da altura, que apagava metade da fotografia. No Figma revisto a
   foto aparece inteira: só um véu leve por cima, um pouco mais escuro na
   base (logo e botões) e à esquerda (título). */
.hero:not(.hero--compact) .hero__visual::before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.42) 100%);
	mix-blend-mode: normal;
}

.hero:not(.hero--compact) .hero__visual::after {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 55%);
}

/* Com o véu mais leve, o texto passa a cair sobre partes claras da foto
   (céu, coletes): uma sombra difusa segura a leitura sem aparecer. */
.hero:not(.hero--compact) .hero__text,
.hero:not(.hero--compact) .hero__cta p {
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
}

/* Os slides seguintes usam h2 (um só h1 por página), com o mesmo desenho. */
.hero__text .hero__titulo {
	font-size: var(--fs-3xl);
	line-height: var(--lh-3xl);
	font-weight: 500;
}

.hero__dots {
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 5;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.45);
	transition: width 0.3s ease, background 0.3s ease;
}

.hero__dot.is-active {
	width: 24px;
	background: var(--white);
}

@media (prefers-reduced-motion: reduce) {
	.hero--carrossel .hero__slide,
	.hero--carrossel .hero__slide.is-active {
		transition: none;
	}
}

@media (max-width: 1024px) {
	.hero--carrossel .hero__slides {
		height: auto;
	}

	.hero__dots {
		position: static;
		justify-content: center;
		margin-top: 12px;
		transform: none;
	}

	.hero__dot {
		background: var(--stroke);
	}

	.hero__dot.is-active {
		background: var(--azul);
	}
}

/* ---------------------------------------------------------
   Depoimentos em faixa, com setas que funcionam
   ---------------------------------------------------------
   Mesmas três colunas do design, mas numa só fila que passa para o lado. */

.depoimentos--carrossel .quotes {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 48px) / 3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.depoimentos--carrossel .quotes::-webkit-scrollbar {
	display: none;
}

.depoimentos--carrossel .quote {
	scroll-snap-align: start;
}

.arrows button:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 1200px) {
	.depoimentos--carrossel .quotes {
		grid-auto-columns: calc((100% - 24px) / 2);
	}
}

@media (max-width: 760px) {
	.depoimentos--carrossel .quotes {
		grid-auto-columns: 86%;
	}
}

/* ---------------------------------------------------------
   Nosso time: uma fotografia inteira no lugar das três
   ---------------------------------------------------------
   Ocupa a largura do conteúdo com a altura aproximada da antiga fila de
   fotografias (542px na base de 1440), para a secção não mudar de ritmo. */

.time__equipa {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	background: #dbdbdb;
	aspect-ratio: 1360 / 600;
}

.time__equipa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 760px) {
	.time__equipa {
		aspect-ratio: 4 / 3;
	}
}

/* O único 100vw do design: com o zoom no <html>, vw deixa de corresponder à
   largura do layout. A percentagem da própria secção dá o mesmo resultado sem
   depender do viewport. */
.pfcar__track {
	padding: 0 max(40px, calc((100% - 1360px) / 2));
}

/* ---------------------------------------------------------
   Rodapé: endereço, ícones sociais sempre à vista, serviços maiores
   ---------------------------------------------------------
   No Figma (1920): coluna de contacto 595px, serviços 412px, intervalo 84px,
   valores a 30px, rótulos a 19px, itens de serviço a 30px com 32px entre si. */

.footer__cols {
	gap: 63px;
}

/* 469px e não os 446 da coluna do Figma: lá a caixa do endereço (625px em
   1920) já é mais larga que a coluna, e é isso que o deixa em duas linhas. */
.footer__contact {
	width: 469px;
	gap: 12px;
}

.footer__contact .block {
	gap: 14px;
}

.footer__contact .value {
	font-size: 22.5px;
	line-height: 1.3;
	font-style: normal;
}

.footer__services {
	width: 309px;
	gap: 24px;
}

.footer__services .label {
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--branco-concretiza);
}

.footer__services ul {
	gap: 24px;
}

.footer__services a {
	font-size: 22.5px;
	line-height: 1.2;
	font-weight: 500;
}

.socials a img {
	width: 48px;
	height: 48px;
}

@media (max-width: 760px) {
	.footer__contact,
	.footer__services {
		width: 100%;
	}

	.footer__contact .value,
	.footer__services a {
		font-size: 18px;
	}
}

@media (max-width: 1024px) {
	.topbar__logo {
		width: 138px;
		height: 31px;
	}

	.hero {
		padding-top: 66px;
	}

	.hero__visual {
		padding-top: 56px;
	}

	.hero--compact {
		height: 360px;
		padding-top: 66px;
	}
}

@media (max-width: 760px) {
	.topbar {
		padding: 10px 20px;
		min-height: 52px;
	}

	.topbar__actions .topbar__flag {
		margin-right: 4px;
	}

	.hero {
		padding-top: 64px;
	}

	.hero__visual {
		padding-top: 40px;
	}
}