/**
 * Tema AMS 360 — direção "Golo aos 90".
 *
 * Preto, latão e Montserrat pesada em caixa alta: a linguagem do cartaz de
 * jogo que a AMS produz todas as semanas, trazida para o site.
 */

:root {
	--tinta: #0b0b0c;
	--carvao: #131316;
	--carvao-2: #1b1b1f;
	--linha: rgba(240, 236, 225, 0.13);
	--osso: #f0ece1;
	--fumo: #8f8a7d;
	--latao: #c8922f;
	--latao-claro: #eab94f;

	--largura: 1200px;
	--largura-texto: 68ch;
	--raio: 4px;

	--fonte: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	margin: 0;
	background: var(--tinta);
	color: var(--osso);
	font-family: var(--fonte);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

::selection { background: var(--latao); color: var(--tinta); }

:focus-visible {
	outline: 2px solid var(--latao-claro);
	outline-offset: 3px;
}

/* ── Tipografia ───────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
	margin: 0 0 14px;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.018em;
	text-transform: uppercase;
	text-wrap: balance;
}

h1 { font-size: clamp(38px, 6.4vw, 84px); }
h2 { font-size: clamp(28px, 4vw, 52px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: 18px; letter-spacing: -0.01em; }

p { margin: 0 0 16px; }

.sobretitulo {
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--latao);
}

.texto-suave { color: var(--fumo); }

.container {
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0 22px;
}

.seccao { padding: clamp(56px, 8vw, 104px) 0; }

.seccao--linha { border-top: 1px solid var(--linha); }

/**
 * Secção logo a seguir a uma capa com imagem.
 *
 * A capa já traz margem por baixo do texto dela, e a margem cheia da secção
 * somava-se a essa — ficavam quase 80px de nada entre o resumo e a primeira
 * linha do artigo.
 */
.seccao--apos-capa { padding-top: clamp(12px, 1.3vw, 20px); }

.seccao__cabecalho {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 30px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.seccao__cabecalho p {
	max-width: 52ch;
	margin: 6px 0 0;
	color: var(--fumo);
}

/* Link de salto: escondido até alguém navegar pelo teclado.
   Existe para não obrigar quem não usa rato a passar por todo o menu antes
   de chegar ao conteúdo. Quando aparece, deve parecer intencional. */
.saltar {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 13px 22px;
	background: var(--latao);
	color: var(--tinta);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0 0 var(--raio) 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.saltar:focus {
	left: 0;
	top: 0;
	outline: 2px solid var(--osso);
	outline-offset: -4px;
}

/* Com a barra do WordPress à frente, desce o suficiente para não ficar por baixo. */
body.admin-bar .saltar:focus { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .saltar:focus { top: 46px; }
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ── Botões ───────────────────────────────────────────────────────────── */

.botao {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	background: var(--latao);
	color: var(--tinta);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--latao);
	border-radius: var(--raio);
	transition: background 0.16s ease, color 0.16s ease;
}

.botao:hover { background: var(--latao-claro); border-color: var(--latao-claro); }

.botao--vazio {
	background: transparent;
	color: var(--osso);
	border-color: var(--linha);
}

.botao--vazio:hover { background: rgba(240, 236, 225, 0.08); color: var(--osso); border-color: var(--osso); }

.botao--pequeno { padding: 10px 18px; font-size: 12px; }

/* ── Cabeçalho ────────────────────────────────────────────────────────── */

.cabecalho {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(11, 11, 12, 0.86);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--linha);
}

body.admin-bar .cabecalho { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .cabecalho { top: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar .cabecalho { top: 0; }
}

.cabecalho__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	min-height: 76px;
}

.marca {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex: 0 0 auto;
	color: var(--osso);
	text-decoration: none;
	white-space: nowrap;
}

.marca__simbolo {
	display: block;
	width: auto;
	height: 40px;
}

.marca__nome {
	display: grid;
	gap: 1px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.marca__nome small {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--fumo);
}

.custom-logo { max-height: 46px; width: auto; }

.nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nav__lista {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__lista a {
	display: block;
	padding: 9px 13px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--fumo);
	text-decoration: none;
	border-radius: var(--raio);
	transition: color 0.14s ease, background 0.14s ease;
}

.nav__lista a:hover,
.nav__lista .current-menu-item > a,
.nav__lista .current_page_item > a {
	color: var(--osso);
	background: rgba(240, 236, 225, 0.07);
}

.nav__lista li { position: relative; }

.nav__lista .sub-menu {
	display: none;
	position: absolute;
	left: 0;
	min-width: 210px;
	padding: 6px;
	margin: 0;
	list-style: none;
	background: var(--carvao);
	border: 1px solid var(--linha);
	border-radius: 8px;
}

.nav__lista li:hover > .sub-menu,
.nav__lista li:focus-within > .sub-menu { display: block; }

.menu-botao {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	cursor: pointer;
}

.menu-botao__barra,
.menu-botao__barra::before,
.menu-botao__barra::after {
	content: "";
	position: absolute;
	left: 12px;
	width: 18px;
	height: 2px;
	background: var(--osso);
}

.menu-botao__barra { top: 21px; }
.menu-botao__barra::before { top: -6px; left: 0; }
.menu-botao__barra::after { top: 6px; left: 0; }

@media (max-width: 1040px) {
	.menu-botao { display: block; }

	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 18px 22px 24px;
		background: var(--carvao);
		border-bottom: 1px solid var(--linha);
	}

	.nav.aberto { display: flex; }
	.nav__lista { flex-direction: column; align-items: stretch; }
	.nav__lista a { padding: 11px 12px; font-size: 13px; }
	.nav__lista .sub-menu { position: static; display: block; border: 0; padding-left: 12px; background: transparent; }
	.cabecalho__acoes { display: flex; flex-direction: column; gap: 8px; }
}

.cabecalho__acoes {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ── Herói com vídeo ──────────────────────────────────────────────────── */

.heroi {
	position: relative;
	display: flex;
	/**
	 * Centrado, não encostado ao fundo.
	 *
	 * Com os parceiros no fim, o bloco encostado ao fundo empurrava o título
	 * para baixo e mandava os logótipos para fora do ecrã. Centrado, o título
	 * sobe e a prova de confiança fica visível sem ter de rolar.
	 */
	align-items: center;
	min-height: clamp(600px, 86vh, 900px);
	overflow: hidden;
	border-bottom: 1px solid var(--linha);
}

.heroi__fundo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--carvao);
}

.heroi__fundo video,
.heroi__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Duas camadas: uma escurece o vídeo todo, outra puxa o canto do texto. */
.heroi__veu {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(11, 11, 12, 0.97) 4%, rgba(11, 11, 12, 0.68) 46%, rgba(11, 11, 12, 0.82) 100%),
		linear-gradient(to right, rgba(11, 11, 12, 0.92) 0%, rgba(11, 11, 12, 0.38) 62%, transparent 100%);
}

.heroi__conteudo {
	position: relative;
	z-index: 1;
	width: 100%;
	/* Um pouco mais em cima do que em baixo: puxa o conjunto para cima. */
	padding: 96px 0 48px;
}

.heroi__titulo {
	margin: 0;
	max-width: 15ch;
	font-size: clamp(46px, 8.6vw, 122px);
	line-height: 0.9;
	letter-spacing: -0.03em;
}

.heroi__titulo em {
	display: block;
	font-style: normal;
	color: var(--latao);
}

.heroi__texto {
	max-width: 46ch;
	margin: 26px 0 0;
	font-size: clamp(16px, 1.5vw, 19px);
	color: #d3cec1;
}

.heroi__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	/* Ar entre a frase e as etiquetas: coladas, liam-se como uma coisa só. */
	margin-top: clamp(32px, 3.5vw, 44px);
	padding: 0;
	list-style: none;
}

.heroi__etiquetas li {
	padding: 7px 15px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--latao-claro);
	border: 1px solid rgba(200, 146, 47, 0.45);
	border-radius: 999px;
}

.heroi__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* Parceiros de renome no topo: uma prova de confiança, não uma secção. */
.heroi__parceiros {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--linha);
	max-width: 520px;
}
.heroi__parceiros-titulo {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fumo);
}
.heroi__parceiros-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(22px, 3.5vw, 40px);
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.heroi__parceiros-lista li { line-height: 0; }
.heroi__parceiros-lista img {
	max-height: 30px;
	width: auto;
	object-fit: contain;
	/**
	 * Discretos de propósito: não competem com o título nem com os botões.
	 * Mas discreto não pode ser invisível — logótipos escuros e de traço fino
	 * já chegam cá com pouca tinta, e não aguentam mais do que isto.
	 */
	filter: grayscale(1) brightness(1.9);
	opacity: 0.72;
}

@media (max-width: 640px) {
	.heroi__parceiros { max-width: none; }
	.heroi__parceiros-lista img { max-height: 24px; }
}

.heroi__som {
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: rgba(11, 11, 12, 0.7);
	color: var(--osso);
	border: 1px solid var(--linha);
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
}

.heroi__som:hover { background: var(--latao); color: var(--tinta); }
/**
 * Sem isto, o `display: grid` acima ganhava ao atributo `hidden` e o botão
 * aparecia sempre — mesmo quando o vídeo não está a tocar e não há nada para
 * pausar. Era o que acontecia em telemóvel.
 */
.heroi__som[hidden] { display: none; }

/* ── Perguntas frequentes ─────────────────────────────────────────────── */

.faq {
	display: flex;
	flex-direction: column;
	max-width: var(--largura-texto);
	border-top: 1px solid var(--linha);
}
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__item summary {
	padding: 18px 0;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: baseline;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: "+";
	color: var(--latao-claro);
	font-size: 20px;
	line-height: 1;
	flex: none;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:hover { color: var(--latao-claro); }
.faq__item summary:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; }
.faq__item p {
	margin: 0 0 20px;
	max-width: 62ch;
	color: var(--fumo);
}

/* ── Equipa ───────────────────────────────────────────────────────────── */

/* A fotografia de todos juntos, antes dos retratos. */
.equipa-grupo {
	margin: 0 0 clamp(30px, 4vw, 52px);
	overflow: hidden;
	border-radius: var(--raio);
	border: 1px solid var(--linha);
	line-height: 0;
}
.equipa-grupo img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/**
 * Três colunas, não quantas couberem.
 *
 * A equipa são cinco ou seis pessoas. Com colunas automáticas cabiam cinco
 * retratos estreitos numa fila só, e a sexta pessoa ficava sozinha na linha de
 * baixo. Com três, seis fazem duas filas certas e cinco fazem três mais duas —
 * que se lê como uma equipa e não como uma sobra.
 */
.equipa {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 38px);
}

@media (max-width: 900px) {
	.equipa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
	.equipa { grid-template-columns: 1fr; }
}
.equipa__pessoa { min-width: 0; }
.equipa__retrato {
	position: relative;
	/* Retrato, não quadrado: é o enquadramento natural de uma pessoa. */
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--carvao-2);
	border: 1px solid var(--linha);
}
.equipa__retrato img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/**
	 * A cores, sempre.
	 *
	 * Já esteve a preto e branco a ganhar cor ao passar o rato. Ficava com ar
	 * de memorial — retratos dessaturados lêem-se como homenagem a quem já cá
	 * não está, e isto é uma equipa a trabalhar.
	 */
	transition: transform 0.4s ease;
}
.equipa__pessoa:hover .equipa__retrato img { transform: scale(1.03); }
.equipa__sem-foto {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 44px;
	font-weight: 800;
	color: #39404e;
}
.equipa__pessoa h3 {
	margin: 16px 0 0;
	font-size: 17px;
}
.equipa__funcao {
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--latao-claro);
}
.equipa__sobre {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--fumo);
}

@media (prefers-reduced-motion: reduce) {
	.equipa__retrato img { transition: none; }
	.equipa__pessoa:hover .equipa__retrato img { transform: none; }
}

/* ── Números ──────────────────────────────────────────────────────────── */

.numeros {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-block: 1px solid var(--linha);
}

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

.numeros__item {
	padding: clamp(24px, 3.4vw, 40px) 14px;
	border-right: 1px solid var(--linha);
	text-align: center;
}

.numeros__item:last-child { border-right: 0; }

@media (max-width: 760px) {
	.numeros__item:nth-child(2n) { border-right: 0; }
	.numeros__item:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
}

.numeros__valor {
	display: block;
	font-size: clamp(32px, 4.6vw, 58px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.numeros__etiqueta {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fumo);
}

/* ── Serviços ─────────────────────────────────────────────────────────── */

/* Flex e não grelha: assim a última fila estica para encher a largura em vez
   de deixar buracos quando o número de serviços não é múltiplo das colunas. */
.servicos {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.servico {
	display: flex;
	flex: 1 1 300px;
	flex-direction: column;
	gap: 10px;
	padding: 30px 26px 34px;
	background: var(--tinta);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.servico:hover {
	background: var(--carvao);
	border-color: rgba(200, 146, 47, 0.5);
}

.servico__numero {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--latao);
	font-variant-numeric: tabular-nums;
}

.servico h3 { margin: 0; font-size: 21px; }

.servico p {
	margin: 0;
	font-size: 15px;
	color: var(--fumo);
	line-height: 1.55;
}

.servico__seta {
	margin-top: auto;
	padding-top: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--latao);
}

/* ── Trabalhos ────────────────────────────────────────────────────────── */

.trabalhos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

@media (max-width: 1000px) { .trabalhos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .trabalhos { grid-template-columns: 1fr; } }

/* Um trabalho em destaque ocupa duas colunas e manda na grelha. */
.trabalho--destaque { grid-column: span 2; }

@media (max-width: 640px) { .trabalho--destaque { grid-column: span 1; } }

.trabalho {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--carvao);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.trabalho:hover { border-color: rgba(200, 146, 47, 0.6); transform: translateY(-3px); }

.trabalho__capa {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--carvao-2);
}

.trabalho--destaque .trabalho__capa { aspect-ratio: 16 / 9; }

.trabalho__capa img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.trabalho:hover .trabalho__capa img { transform: scale(1.04); }

.trabalho__sem-capa {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.3em;
	color: #33333a;
}

.trabalho__corpo {
	position: relative;
	padding: 20px 22px 24px;
}

.trabalho__categoria {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--latao);
}

.trabalho h3 {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.9vw, 23px);
}

.trabalho__resumo {
	margin: 0;
	font-size: 14px;
	color: var(--fumo);
	line-height: 1.5;
}

.trabalho__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 14px;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--fumo);
}

/* ── Parceiros ────────────────────────────────────────────────────────── */

.parceiros {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.parceiros--parados {
	justify-content: center;
}

/* ── Fita de parceiros ────────────────────────────────────────────────── */

.parceiros-fita {
	overflow: hidden;
	/* Esbate as pontas, para os logótipos entrarem e saírem em vez de serem
	   cortados a direito na margem. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.parceiros-fita__pista {
	display: flex;
	width: max-content;
	gap: 12px;
	animation: parceiros-desliza var(--parceiros-duracao, 30s) linear infinite;
}

.parceiros-fita__copia {
	display: flex;
	gap: 12px;
}

.parceiros-fita:hover .parceiros-fita__pista,
.parceiros-fita:focus-within .parceiros-fita__pista {
	animation-play-state: paused;
}

.parceiros-fita .parceiro {
	flex: 0 0 190px;
}

/*
 * A pista é [logótipos, cópia dos logótipos]. Para o ciclo fechar sem salto,
 * anda-se exatamente do início do primeiro ao início da cópia.
 *
 * Largura da pista: 2·(N·L) + 2·(N-1)·12 + 12 — o último 12 é o espaço entre
 * o grupo e a cópia. Metade disso fica 6px aquém da distância que interessa,
 * daí o `- 6px`.
 */
@keyframes parceiros-desliza {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 6px)); }
}

/* Sem animação: passa a uma faixa que se arrasta à mão. */
@media (prefers-reduced-motion: reduce) {
	.parceiros-fita {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.parceiros-fita__pista {
		animation: none;
	}

	.parceiros-fita__copia {
		display: none;
	}

	.parceiros-fita .parceiro {
		scroll-snap-align: center;
	}
}

.parceiro {
	display: grid;
	flex: 1 1 160px;
	place-items: center;
	min-height: 118px;
	padding: 20px;
	background: var(--tinta);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.parceiro:hover {
	background: var(--carvao);
	border-color: rgba(200, 146, 47, 0.4);
}

.parceiro img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1) brightness(1.7);
	opacity: 0.75;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.parceiro:hover img { filter: none; opacity: 1; }

.parceiro__nome {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fumo);
	text-align: center;
}

/* ── Testemunhos ──────────────────────────────────────────────────────── */

.testemunhos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.testemunho {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 30px 28px;
	background: var(--carvao);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
}

.testemunho__frase {
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
}

.testemunho__frase::before {
	content: "“";
	display: block;
	margin-bottom: -12px;
	font-size: 52px;
	font-weight: 900;
	line-height: 1;
	color: var(--latao);
}

.testemunho__autor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

.testemunho__autor img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

.testemunho__nome {
	display: block;
	font-size: 14px;
	font-weight: 700;
}

.testemunho__cargo {
	display: block;
	font-size: 12px;
	color: var(--fumo);
}

/* ── Chamada final ────────────────────────────────────────────────────── */

.chamada {
	position: relative;
	padding: clamp(56px, 8vw, 110px) 0;
	text-align: center;
	background:
		radial-gradient(900px 380px at 50% 0%, rgba(200, 146, 47, 0.16), transparent 70%),
		var(--carvao);
	border-top: 1px solid var(--linha);
}

.chamada p {
	max-width: 54ch;
	margin: 0 auto 26px;
	color: var(--fumo);
	font-size: 18px;
}

/* ── Páginas interiores ───────────────────────────────────────────────── */

.pagina__cabecalho {
	padding: clamp(52px, 7vw, 92px) 0 0;
}

.pagina__cabecalho p {
	max-width: 58ch;
	margin: 12px 0 0;
	color: var(--fumo);
	font-size: 18px;
}

.migalhas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fumo);
}

.migalhas a { text-decoration: none; }
.migalhas a:hover { color: var(--latao); }

.texto-longo {
	max-width: var(--largura-texto);
	font-size: 17px;
}

.texto-longo h2 { margin-top: 44px; font-size: clamp(24px, 2.6vw, 32px); }
.texto-longo h3 { margin-top: 32px; }
.texto-longo a { color: var(--latao-claro); }
.texto-longo img { border-radius: var(--raio); margin: 24px 0; }
.texto-longo ul, .texto-longo ol { padding-left: 20px; }
.texto-longo li { margin-bottom: 8px; }

.texto-longo blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--latao);
	color: var(--fumo);
	font-size: 20px;
}

/* ── Trabalho individual ──────────────────────────────────────────────── */

.capa {
	position: relative;
	min-height: clamp(340px, 52vh, 560px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-bottom: 1px solid var(--linha);
}

.capa__fundo {
	position: absolute;
	inset: 0;
	background: var(--carvao-2);
}

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

.capa__veu {
	position: absolute;
	inset: 0;
	/**
	 * Dá para ver a fotografia em cima e escurece até ao fim, para o texto
	 * assentar e para a capa se fundir com a página. O topo era mais escuro do
	 * que o meio, o que tapava justamente a parte da imagem que se via.
	 */
	background: linear-gradient(to top, rgba(11, 11, 12, 0.97) 4%, rgba(11, 11, 12, 0.62) 46%, rgba(11, 11, 12, 0.34) 100%);
}

.capa__conteudo {
	position: relative;
	width: 100%;
	/**
	 * A margem de cima é o que deixa a fotografia respirar antes do texto
	 * começar. Com pouca, o título ocupava a capa toda e a imagem ficava
	 * escondida atrás dele.
	 */
	padding: clamp(150px, 22vh, 220px) 0 30px;
}

.ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	margin: 0;
	background: var(--linha);
	border-block: 1px solid var(--linha);
}

.ficha > div {
	padding: 20px 22px 22px;
	background: var(--tinta);
}

.ficha dt {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fumo);
}

.ficha dd {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.resultados {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.resultados li {
	padding: 24px 22px;
	background: var(--carvao);
	border-left: 3px solid var(--latao);
	border-radius: 0 var(--raio) var(--raio) 0;
}

.resultados strong {
	display: block;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.resultados span {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fumo);
}

.galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}

.galeria a {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--carvao-2);
}

.galeria img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.galeria a:hover img { transform: scale(1.05); }

.video-externo {
	position: relative;
	border-radius: var(--raio);
	overflow: hidden;
	background: #000;
}

.video-externo iframe,
.video-externo video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ── Blog ─────────────────────────────────────────────────────────────── */

.artigos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
}

.artigo {
	display: flex;
	flex-direction: column;
	background: var(--carvao);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.artigo:hover { border-color: rgba(200, 146, 47, 0.55); }

.artigo__capa {
	aspect-ratio: 16 / 10;
	background: var(--carvao-2);
}

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

.artigo__corpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 22px 26px;
}

.artigo__data {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--latao);
}

.artigo h3 { margin: 0; font-size: 20px; }

.artigo h3 a { text-decoration: none; }

.artigo p {
	margin: 0;
	font-size: 14px;
	color: var(--fumo);
	line-height: 1.55;
}

.artigo__meta {
	margin-top: auto;
	padding-top: 12px;
	font-size: 12px;
	color: var(--fumo);
}

/* ── Contactos ────────────────────────────────────────────────────────── */

.contactos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.contacto-cartao {
	padding: 26px 24px 30px;
	background: var(--carvao);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
}

.contacto-cartao dt {
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--latao);
}

.contacto-cartao dd {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.contacto-cartao a { text-decoration: none; }
.contacto-cartao a:hover { color: var(--latao-claro); }

/* ── Instagram ────────────────────────────────────────────────────────── */

.instagram__grelha {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 900px) { .instagram__grelha { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .instagram__grelha { grid-template-columns: repeat(2, 1fr); } }

.instagram__grelha a {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--carvao-2);
}

.instagram__grelha img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease, opacity 0.2s ease;
	opacity: 0.9;
}

.instagram__grelha a:hover img { transform: scale(1.06); opacity: 1; }

.instagram__marca {
	position: absolute;
	top: 8px;
	right: 10px;
	font-size: 13px;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ── Formulário de contacto ───────────────────────────────────────────── */

.contacto-formulario { margin-top: 52px; }

.ams-formulario {
	max-width: 760px;
	margin-top: 22px;
}

.ams-formulario__grelha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 4px 18px;
}

.ams-formulario label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fumo);
}

.ams-formulario input[type="text"],
.ams-formulario input[type="email"],
.ams-formulario input[type="tel"],
.ams-formulario select,
.ams-formulario textarea {
	width: 100%;
	padding: 13px 15px;
	color: var(--osso);
	background: var(--carvao);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	font: inherit;
	font-size: 16px;
}

.ams-formulario textarea { resize: vertical; }

.ams-formulario input:focus,
.ams-formulario select:focus,
.ams-formulario textarea:focus {
	outline: 2px solid var(--latao);
	outline-offset: 1px;
	border-color: var(--latao);
}

.ams-formulario__consentimento label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fumo);
	line-height: 1.5;
}

.ams-formulario__consentimento input { margin-top: 3px; }

.ams-formulario__aviso {
	padding: 14px 18px;
	margin-bottom: 20px;
	border-radius: var(--raio);
	border: 1px solid var(--linha);
	font-size: 15px;
}

.ams-formulario__aviso--ok {
	border-color: rgba(22, 163, 74, 0.5);
	background: rgba(22, 163, 74, 0.12);
}

.ams-formulario__aviso--erro {
	border-color: rgba(220, 38, 38, 0.5);
	background: rgba(220, 38, 38, 0.12);
}

/* Campo isco: escondido de pessoas, visível para robôs. */
.ams-isco {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Estados vazios e paginação ───────────────────────────────────────── */

.vazio {
	padding: 60px 24px;
	text-align: center;
	background: var(--carvao);
	border: 1px dashed var(--linha);
	border-radius: var(--raio);
}

.vazio p { color: var(--fumo); }

.nav-links,
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 36px;
}

.nav-links .page-numbers {
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fumo);
	text-decoration: none;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
}

.nav-links .page-numbers:hover { color: var(--osso); }

.nav-links .page-numbers.current {
	background: var(--latao);
	color: var(--tinta);
	border-color: var(--latao);
}

/* ── Rodapé ───────────────────────────────────────────────────────────── */

.rodape {
	padding: clamp(48px, 6vw, 76px) 0 28px;
	background: #08080a;
	border-top: 1px solid var(--linha);
	font-size: 15px;
}

.rodape__topo {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: 36px;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--linha);
}

@media (max-width: 820px) {
	.rodape__topo { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 520px) {
	.rodape__topo { grid-template-columns: 1fr; }
}

.rodape__sobre p {
	max-width: 38ch;
	color: var(--fumo);
	margin-top: 14px;
}

.rodape h4 {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--fumo);
}

.rodape ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.rodape a {
	color: var(--osso);
	text-decoration: none;
	font-size: 14px;
}

.rodape a:hover { color: var(--latao); }

.rodape__base {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-top: 22px;
	font-size: 13px;
	color: var(--fumo);
}

.rodape__base ul { display: flex; gap: 16px; }

/* ── Lightbox da galeria ──────────────────────────────────────────────── */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 40px 20px;
	background: rgba(6, 6, 7, 0.96);
}

.lightbox[hidden] { display: none; }

.lightbox img {
	max-width: min(1200px, 92vw);
	max-height: 84vh;
	object-fit: contain;
	border-radius: var(--raio);
}

.lightbox button {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	font-size: 24px;
	color: var(--osso);
	background: rgba(240, 236, 225, 0.1);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.lightbox button:hover { background: var(--latao); color: var(--tinta); }

.lightbox__fechar { position: absolute; top: 20px; right: 20px; }

@media (max-width: 600px) {
	.lightbox__anterior { position: absolute; bottom: 24px; left: 24px; }
	.lightbox__seguinte { position: absolute; bottom: 24px; right: 24px; }
}

/* ── Estúdio ──────────────────────────────────────────────────────────── */

.estudio__grelha {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

@media (max-width: 900px) {
	.estudio__grelha { grid-template-columns: 1fr; gap: 28px; }
}

.estudio__texto p { max-width: 52ch; }

.estudio__cartoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 26px;
}

.estudio__cartao {
	padding: 22px 20px 24px;
	background: var(--carvao);
	border: 1px solid var(--linha);
	border-left: 3px solid var(--latao);
	border-radius: 0 var(--raio) var(--raio) 0;
}

.estudio__cartao h3 { margin: 0 0 8px; font-size: 17px; }

.estudio__cartao p {
	margin: 0;
	font-size: 14px;
	color: var(--fumo);
	line-height: 1.55;
}

.estudio__imagem {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--carvao-2);
}

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

/* Slideshow do estúdio: só existe a partir da segunda fotografia. */
.estudio__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 900ms ease;
}
.estudio__imagem--alterna .estudio__slide { pointer-events: none; }
.estudio__slide.e-ativo { opacity: 1; }
.estudio__slide img { display: block; }

.estudio__pontos {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 2;
	padding: 7px 10px;
	border-radius: 999px;
	/* Fundo próprio: os pontos têm de se ver tanto sobre foto clara como escura. */
	background: rgba(11, 11, 12, 0.45);
	backdrop-filter: blur(6px);
}
.estudio__ponto {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(240, 236, 225, 0.45);
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}
.estudio__ponto:hover { background: rgba(240, 236, 225, 0.75); }
.estudio__ponto.e-ativo { background: var(--latao-claro); transform: scale(1.35); }
.estudio__ponto:focus-visible { outline: 2px solid var(--osso); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.estudio__slide { transition: none; }
	.estudio__ponto { transition: none; }
}

.estudio__sem-imagem {
	display: grid;
	place-items: center;
	height: 100%;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #39404e;
}

/* ── Landing pages ────────────────────────────────────────────────────── */

.landing__topo {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid var(--linha);
	background: rgba(11, 11, 12, 0.9);
}

.landing__topo-interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 68px;
}

.landing__telefone {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--latao-claro);
}

.landing__heroi {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 70vh, 720px);
	overflow: hidden;
	border-bottom: 1px solid var(--linha);
}

.landing__fundo {
	position: absolute;
	inset: 0;
	background: var(--carvao);
}

.landing__fundo video,
.landing__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.landing__heroi-conteudo {
	position: relative;
	z-index: 1;
	padding: 60px 22px;
}

.landing__heroi h1 { max-width: 18ch; }

.landing__lead {
	max-width: 52ch;
	margin: 20px 0 30px;
	font-size: clamp(17px, 1.6vw, 21px);
	color: #d3cec1;
}

.landing__rodape {
	padding: 26px 0;
	background: #08080a;
	border-top: 1px solid var(--linha);
	font-size: 13px;
	color: var(--fumo);
}

.landing__rodape-interior {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	justify-content: space-between;
}

.landing__rodape p { margin: 0; }
.landing__rodape a { color: var(--fumo); text-decoration: none; }
.landing__rodape a:hover { color: var(--latao); }

/* ── Animações de entrada ─────────────────────────────────────────────────
   As regras só valem dentro de `.ams-anima`, classe posta no <head> quando
   o sistema não pede movimento reduzido. Sem ela, e sem JavaScript, o texto
   fica visível como sempre esteve. Nada aqui pode esconder conteúdo. */

.ams-anima [data-anima] {
	will-change: transform, opacity;
}

/* Palavras: a de fora corta, a de dentro sobe de baixo.
   O padding evita que as barrigas do g e do p sejam cortadas. */
.ams-anima .palavra {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	vertical-align: bottom;
}

.ams-anima .palavra__interior {
	display: inline-block;
	transform: translateY(105%);
	transition:
		transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1);
	opacity: 0;
	transition-delay: calc(var(--ordem, 0) * 0.055s);
}

.ams-anima [data-anima="palavras"].e-visivel .palavra__interior {
	transform: translateY(0);
	opacity: 1;
}

/* Blocos que sobem inteiros. */
.ams-anima [data-anima="subir"],
.ams-anima [data-anima="cascata"] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		transform 0.66s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.66s cubic-bezier(0.16, 1, 0.3, 1);
}

.ams-anima [data-anima="cascata"] {
	transition-delay: calc(var(--ordem, 0) * 0.075s);
}

.ams-anima [data-anima="subir"].e-visivel,
.ams-anima [data-anima="cascata"].e-visivel {
	opacity: 1;
	transform: none;
}

/* O topo entra em sequência: sobretítulo, título, e só depois o resto.
   As últimas palavras do título acabam de subir por volta dos 0,88s, por isso
   o texto de apoio só arranca a seguir. Quem manda na entrada é a manchete. */
.ams-anima .heroi .sobretitulo { transition-delay: 0.05s; }
.ams-anima .heroi__texto { transition-delay: 0.58s; }
.ams-anima .heroi__etiquetas { transition-delay: 0.7s; }
.ams-anima .heroi__acoes { transition-delay: 0.82s; }

/* Depois de entrar, larga-se o `will-change` para não prender camadas. */
.ams-anima [data-anima].e-visivel {
	will-change: auto;
}

/* Cinto de segurança em CSS, para o caso de o JavaScript parar a meio: ao fim
   de cinco segundos aparece tudo, incluindo as palavras dos títulos. Sem isto,
   uma falha do script deixava a manchete invisível. */
@keyframes ams-garantir-visivel {
	to { opacity: 1; transform: none; }
}

.ams-anima [data-anima="subir"],
.ams-anima [data-anima="cascata"],
.ams-anima [data-anima="palavras"] .palavra__interior {
	animation: ams-garantir-visivel 0.01s linear 5s forwards;
}

.ams-anima [data-anima].e-visivel,
.ams-anima [data-anima].e-visivel .palavra__interior {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.ams-anima [data-anima],
	.ams-anima [data-anima="subir"],
	.ams-anima [data-anima="cascata"],
	.ams-anima .palavra__interior {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ─────────────────────────────────────────── Invólucro da área de cliente */

.portal-envolvente {
	min-height: 70vh;
	padding: 28px 20px 0;
}

.portal-rodape {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: space-between;
	max-width: var(--largura);
	margin: 40px auto 0;
	padding: 20px;
	border-top: 1px solid var(--linha);
	color: var(--fumo);
	font-size: 13px;
}

.portal-rodape p {
	margin: 0;
}

.portal-rodape nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
}

.portal-rodape a {
	color: var(--fumo);
	text-decoration: none;
}

.portal-rodape a:hover,
.portal-rodape a:focus-visible {
	color: var(--latao-claro);
	text-decoration: underline;
}

.portal-rodape ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 600px) {
	.portal-envolvente {
		padding: 18px 14px 0;
	}

	.portal-rodape {
		justify-content: flex-start;
	}
}

/* ─────────────────────────────────── Galeria de exemplos num serviço */

.servico-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.servico-galeria__item {
	display: block;
	overflow: hidden;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	/* A imagem cresce, a moldura não — senão a grelha dança ao passar o rato. */
	line-height: 0;
}

.servico-galeria__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.servico-galeria__item:hover img,
.servico-galeria__item:focus-visible img {
	transform: scale(1.04);
	opacity: 0.9;
}

@media (max-width: 600px) {
	.servico-galeria {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

/* ───────────────────────────────────────────── Seletor de idioma */

.seletor-idioma {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	overflow: hidden;
}

.seletor-idioma__opcao {
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--fumo);
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
}

.seletor-idioma__opcao:hover,
.seletor-idioma__opcao:focus-visible {
	color: var(--osso);
}

.seletor-idioma__opcao.is-ativo {
	color: var(--tinta);
	background: var(--latao);
}

@media (max-width: 980px) {
	.cabecalho__acoes {
		gap: 12px;
	}
}

/* ── Página de lançamento ─────────────────────────────────────────────────
 *
 * Segue o topo da página inicial — mesmo vídeo, mesmo véu, mesma tipografia —
 * mas com o conteúdo centrado em vez de encostado à esquerda. Sem menu nem
 * rodapé a competir, o eixo central é o que sobra e é o que equilibra.
 */

.lancamento__ecra {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: var(--tinta);
}

.lancamento__fundo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--carvao);
}

.lancamento__fundo video,
.lancamento__fundo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Escurece a partir do centro, e não de um dos lados como no topo do site:
 * aqui o texto está no meio e é para lá que o olho tem de ir.
 *
 * As duas camadas somam-se — 0,6 por cima de 0,4 dá 0,76 no centro, um pouco
 * menos do que o topo da página inicial. A primeira versão levava as duas a
 * quase 0,9 e a fotografia desaparecia por completo: ficava um retângulo preto
 * a fingir de vídeo.
 */
.lancamento__veu {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(11, 11, 12, 0.6) 0%, rgba(11, 11, 12, 0.9) 80%),
		linear-gradient(to bottom, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.4) 45%, rgba(11, 11, 12, 0.8) 100%);
}

.lancamento__conteudo {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 56px 0;
	text-align: center;
}

.lancamento__marca {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 40px;
}

.lancamento__marca img { display: block; }

.lancamento .sobretitulo { justify-content: center; }

.lancamento__titulo {
	margin: 0 auto;
	max-width: 16ch;
	font-size: clamp(38px, 6.6vw, 88px);
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.lancamento__titulo em {
	display: block;
	font-style: normal;
	color: var(--latao);
}

.lancamento__texto {
	margin: 20px auto 0;
	max-width: 52ch;
	color: var(--fumo);
	font-size: 17px;
	line-height: 1.6;
}

/* ── A contagem ──────────────────────────────────────────────────────────
 *
 * `tabular-nums` não é um pormenor: sem ele, os algarismos têm larguras
 * diferentes e a linha inteira dança a cada segundo que passa.
 */

.contagem {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 44px 0 0;
}

.contagem__bloco {
	min-width: 104px;
	padding: 20px 14px 16px;
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	background: rgba(19, 19, 22, 0.55);
	backdrop-filter: blur(6px);
}

.contagem__valor {
	display: block;
	color: var(--osso);
	font-size: clamp(34px, 5.4vw, 58px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.contagem__bloco:first-child .contagem__valor { color: var(--latao-claro); }

.contagem__rotulo {
	display: block;
	margin-top: 8px;
	color: var(--fumo);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lancamento__data {
	margin: 20px 0 0;
	color: var(--osso);
	font-size: 15px;
}

/* ── O que fica no ecrã para além da contagem ───────────────────────────── */

.lancamento__contactos {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--linha);
}

.lancamento__contactos-titulo {
	display: block;
	margin-bottom: 14px;
	color: var(--fumo);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lancamento__contactos ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lancamento__contactos a {
	color: var(--osso);
	font-size: 15px;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.lancamento__contactos a:hover,
.lancamento__contactos a:focus-visible {
	color: var(--latao-claro);
	border-bottom-color: var(--latao);
}

.lancamento__portal {
	margin: 36px 0 0;
	font-size: 13px;
}

.lancamento__portal a {
	color: var(--fumo);
	text-decoration: none;
	border-bottom: 1px solid var(--linha);
}

.lancamento__portal a:hover,
.lancamento__portal a:focus-visible { color: var(--osso); }

@media (max-width: 640px) {
	.lancamento__conteudo { padding: 40px 0; }
	.lancamento__marca { margin-bottom: 28px; }
	.contagem { gap: 8px; margin-top: 32px; }

	/* Quatro blocos numa linha só cabem se cada um deixar de ter largura mínima. */
	.contagem__bloco {
		flex: 1 1 0;
		min-width: 0;
		padding: 14px 4px 12px;
	}

	.contagem__rotulo { font-size: 9px; letter-spacing: 0.1em; }
	.lancamento__contactos { margin-top: 36px; }
	.lancamento__contactos ul { gap: 8px 18px; }
}

/* ------------------------------------------- Blocos de imagem das landing pages */

.landing__bloco-imagem {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--raio);
	background: var(--carvao-2);
}

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

.landing__bloco + .landing__bloco { margin-top: clamp(40px, 5vw, 64px); }

/* A imagem passa para a esquerda nos blocos pares. Em telemóvel a ordem é
   sempre a mesma — texto primeiro — senão lia-se uma imagem sem contexto. */
.landing__bloco--alterna .estudio__texto { order: 2; }

/**
 * Ritmo mais apertado nas landing pages.
 *
 * O espaço das secções do site foi pensado para páginas com secções grandes e
 * poucas. Numa landing são muitas e curtas, e o espaço de baixo de uma somava-se
 * ao de cima da seguinte: 160px de nada entre dois blocos de meia dúzia de
 * linhas.
 */
.landing .seccao { padding-block: clamp(32px, 4vw, 56px); }

.landing .texto-longo h2:first-child { margin-top: 0; }

@media (max-width: 900px) {
	.landing__bloco--alterna .estudio__texto { order: 0; }
}