/* ==========================================================================
   ESM Confeções — estilos do tema (mobile-first)
   Breakpoints: 640px (telemóvel grande), 768px (tablet), 1024px (desktop)
   ========================================================================== */

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arial com as métricas da Instrument Sans: o texto não salta quando a fonte chega.
   Valores calculados a partir dos ficheiros (largura média e ascendente/descendente). */
@font-face {
	font-family: "Instrument Sans Fallback";
	src: local("Arial"), local("ArialMT");
	size-adjust: 101.53%;
	ascent-override: 95.54%;
	descent-override: 24.62%;
	line-gap-override: 0%;
}

/* Cores animáveis: a zona de transição (.tz) muda de claro para escuro com uma transição CSS. */
@property --page-bg {
	syntax: "<color>";
	inherits: true;
	initial-value: #f7f6f3;
}

@property --page-fg {
	syntax: "<color>";
	inherits: true;
	initial-value: #111;
}

/* Tokens
   ========================================================================== */

:root {
	--light: #f7f6f3;
	--muted: #e9e7e2;
	--dark: #111;

	--page-bg: var(--light);
	--page-fg: var(--dark);

	--font: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Escala única de títulos (igual em todas as secções). */
	--h1: var(--h2); /* Títulos uniformes: o H1 só muda a semântica. */
	--h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	--h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);

	--gutter: clamp(1.25rem, 5.6vw, 5rem);
	--section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
	--gap: clamp(2rem, 1rem + 4vw, 4.6rem); /* Máximo = valor a 1440px (caixa do conteúdo). */
	--side: clamp(10rem, 16vw, 15rem);
	--header-h: 6.5rem;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Tons derivados da cor atual: seguem a mudança de fundo sem regras por secção. */
.site-main,
.site-header,
.site-footer,
.form-card,
.tz,
[data-theme] {
	--fg-2: color-mix(in srgb, var(--page-fg) 85%, var(--page-bg));
	--fg-3: color-mix(in srgb, var(--page-fg) 75%, var(--page-bg));
	--line: color-mix(in srgb, var(--page-fg) 20%, transparent);
}

/* Fundo único: todas as secções usam o claro da página.
   - .tz: a única zona de transição (Serviços, na página inicial).
     O JS põe .is-dark quando os Serviços entram no ecrã.
   - [data-theme="dark"]: bloco com fotografia de fundo (frase do Sobre). */
.tz {
	--page-bg: var(--light);
	--page-fg: var(--dark);

	background-color: var(--page-bg);
	color: var(--page-fg);
	transition: --page-bg 0.7s var(--ease), --page-fg 0.7s var(--ease);
}

.tz.is-dark,
[data-theme="dark"] {
	--page-bg: var(--dark);
	--page-fg: var(--light);
}

[data-theme="dark"] {
	background: var(--page-bg);
	color: var(--page-fg);
}

/* Base
   ========================================================================== */

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

body {
	margin: 0;
	background: var(--light);
	color: var(--dark);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.6;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

img {
	height: auto;
}

a {
	color: inherit;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

address {
	font-style: normal;
}

.site-main {
	overflow-x: clip;
	background-color: var(--page-bg);
	color: var(--page-fg);
}

.site-main:focus {
	outline: none;
}

/* Caixa de 1440px: acima desta largura o conteúdo deixa de crescer e fica centrado, tal como
   se vê num ecrã de 1440px. Os fundos (cores, passagem a escuro com o scroll, fotografia da
   frase) continuam a toda a largura, tal como o hero, o cabeçalho e o rodapé. */
.site-main .container:not(.hero__content) {
	max-width: 90rem;
	margin-inline: auto;
}

/* Sliders cortados nas margens da caixa, não do ecrã. Os Pilares não: os cartões em arco
   atravessam o ecrã todo e um corte a meio deixava a sombra deles com uma aresta escura. */
.container:has(.slider) {
	overflow-x: clip;
}

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

.skip-link {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--dark);
	color: var(--light);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* Tipografia
   ========================================================================== */

.h1,
.h2 {
	margin: 0;
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.h1 {
	font-size: var(--h1);
}

.h2 {
	font-size: var(--h2);
}

.h3 {
	margin: 0;
	font-size: var(--h3);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Máscaras do SplitText: com line-height apertado cortariam acentos (Ã, É) e cedilhas.
   A folga vertical é anulada pela margem, por isso o espaçamento das linhas não muda. */
[data-split] > div {
	padding-block: 0.18em;
	margin-block: -0.18em;
}

/* Quebras manuais só quando há espaço. */
@media (max-width: 639px) {
	.h1 br,
	.h2 br {
		display: none;
	}
}

/* Etiqueta: o único estilo de texto pequeno em maiúsculas (eyebrows, botões, rótulos, rodapé). */
.eyebrow,
.btn,
.link-underline,
.lang,
.field__label,
.site-footer__title {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eyebrow {
	margin: 0;
	line-height: 1.4;
}

/* Medida de leitura: 32rem ≈ 68 caracteres por linha em Instrument Sans a 16px. */
.lead {
	max-width: 32rem;
	margin: 0;
	color: var(--fg-2);
}

.muted {
	color: var(--fg-3);
}

small.muted {
	display: block;
	font-size: 0.8125rem;
}

.prose {
	max-width: 32rem;
	color: var(--fg-2);
}

.prose > :first-child {
	margin-top: 0;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose p {
	margin: 0 0 1em;
}

.prose a {
	text-underline-offset: 4px;
}

/* Layout
   ========================================================================== */

.container {
	width: 100%;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--section);
}

/* Sobre: secções claras seguidas partilham o fundo. Duas --section somadas (268px no desktop)
   separavam demais; uma e meia mantém o salto entre secções claramente maior do que o
   espaço entre o título e o conteúdo. */
.page-template-about .section + .section {
	padding-top: calc(var(--section) / 2);
}

/* Depois da fotografia dos fundadores (aresta dura a meia largura), o espaço inteiro:
   com meio, o título da Experiência ficava colado à imagem. */
.page-template-about .section:has(.family__media) + .section {
	padding-top: var(--section);
}

.section--top {
	padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
}

.section--clip {
	overflow: hidden;
}

.section--gap {
	margin-top: var(--section);
}

.section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.section__actions--center {
	justify-content: center;
}

.split {
	display: grid;
	gap: var(--gap);
}

@media (min-width: 1024px) {
	.split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.split--bottom {
		align-items: end;
	}

	/* Conteúdo sozinho na coluna da direita. */
	.split__end {
		grid-column: 2;
	}

	.indent,
	.section__actions--indent {
		margin-left: calc(var(--side) + 2.5rem);
	}
}

/* Cabeçalho de secção: etiqueta à esquerda, título deslocado na grelha */
.section-head {
	display: grid;
	gap: 1rem 2.5rem;
	margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.section-head__main {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 1024px) {
	.section-head {
		grid-template-columns: var(--side) minmax(0, 1fr);
	}

	.section-head__label {
		padding-top: 0.6em;
	}

	/* Sem etiqueta, o título mantém o recuo da coluna da etiqueta. */
	.section-head:not(.section-head--center) > .section-head__main:only-child {
		grid-column: 2;
	}
}

.section-head--center {
	justify-items: center;
	text-align: center;
	grid-template-columns: minmax(0, 1fr);
}

.section-head--center .lead {
	margin-inline: auto;
}

.section-head--center .section-head__label {
	padding-top: 0;
}

/* Media */
.media {
	overflow: hidden;
	background: var(--muted);
}

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

.media--landscape {
	aspect-ratio: 4 / 3;
}

/* Botões e ligações (preenchimento a subir no hover)
   ========================================================================== */

/* O preenchimento é o fundo do próprio botão (cresce de baixo para cima), e não um ::before com
   z-index -1: essa camada animada podia ficar por cima do texto e o botão ficava todo preto.
   O fundo pinta-se sempre por baixo do texto. */
.btn {
	--btn-fill: var(--page-fg);
	--btn-ink: var(--page-bg);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid currentColor;
	background: linear-gradient(var(--btn-fill), var(--btn-fill)) 50% 100% / 100% 0% no-repeat;
	color: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.45s var(--ease), border-color 0.45s var(--ease), background-size 0.45s var(--ease);
}

.btn:hover,
.btn:focus-visible {
	border-color: var(--btn-fill);
	background-size: 100% 100%;
	color: var(--btn-ink);
}

.btn--solid {
	--btn-fill: var(--fg-2);

	border-color: var(--page-fg);
	background-color: var(--page-fg);
	color: var(--page-bg);
}

.btn--solid:hover,
.btn--solid:focus-visible {
	color: var(--page-bg);
}

.btn--light {
	--btn-fill: #fff;
	--btn-ink: var(--dark);

	color: #fff;
}

.btn--surface {
	background-color: var(--light);
}

.btn--sm {
	min-height: 2.5rem;
	padding: 0 1.1rem;
}

.link-underline {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
}

.link-underline::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.55rem;
	left: 0;
	height: 1px;
	background: currentColor;
	transform-origin: 100% 50%;
	transition: transform 0.5s var(--ease);
}

.link-underline:hover::after {
	animation: esm-underline 0.8s var(--ease);
}

@keyframes esm-underline {
	0% {
		transform: scaleX(1);
		transform-origin: 100% 50%;
	}

	45% {
		transform: scaleX(0);
		transform-origin: 100% 50%;
	}

	46% {
		transform: scaleX(0);
		transform-origin: 0 50%;
	}

	100% {
		transform: scaleX(1);
		transform-origin: 0 50%;
	}
}

/* Cabeçalho do site: barra flutuante fixa (encolhe e esconde com o scroll via JS)
   ========================================================================== */

.site-header {
	--page-bg: var(--light);
	--page-fg: var(--dark);

	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 50;
	padding-top: clamp(0.75rem, 1.4vw, 1.25rem);
	pointer-events: none;
}

.site-header__inner {
	display: flex;
	justify-content: center;
	padding-inline: clamp(1rem, 2.8vw, 2.5rem);
}

.site-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	min-height: 3.75rem;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	background: var(--light);
	color: var(--dark);
	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
	pointer-events: auto;
}

/* Utilizadores com sessão: o header fica abaixo da barra de administração. */
.admin-bar .site-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .site-header {
		top: 32px;
	}
}

.site-header.is-hidden .site-header__bar {
	pointer-events: none;
}

.logo {
	position: relative;
	z-index: 2;
	display: inline-flex;
}

.logo__img {
	width: auto;
	height: 1.5rem;
}

.site-header__actions {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
}

.site-header__actions > .btn,
.site-header__lang {
	display: none;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}

/* Navegação: painel em ecrã inteiro no telemóvel/tablet */
.site-nav {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
	overflow-y: auto;
	background: var(--light);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}

.site-nav.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.35s var(--ease), visibility 0s;
}

.site-nav__list {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding-block: 0.35rem;
	font-size: var(--h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-decoration: none;
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 2px;
}

/* Fundo do menu móvel: botão Contacto à esquerda, seletor de idioma à direita. */
.site-nav__extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
}

.site-nav__extra .lang {
	order: 1;
}

.lang {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lang a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
	opacity: 0.6; /* 0.6 é o mínimo para 4.5:1 a 12px sobre o claro. */
}

.lang .current-lang a,
.lang a[aria-current],
.lang a:hover {
	opacity: 1;
}

/* PixelHunter Translate (pht_get_switcher): o plugin traz caixas, fundos e negrito; aqui fica
   igual às etiquetas do tema — "PT – EN", a língua atual em cheio e a outra esbatida. */
.lang.pht-switcher {
	font-size: 0.75rem;
	line-height: 1.4;
}

.lang .pht-switcher__list {
	gap: 0;
	max-width: none;
	overflow: visible;
}

.lang .pht-switcher__item {
	display: flex;
	align-items: center;
}

.lang .pht-switcher__item + .pht-switcher__item::before {
	content: "–";
	margin-inline: 0.6em;
	opacity: 0.5;
}

.lang .pht-switcher__item a,
.lang .pht-switcher__item a:hover,
.lang .pht-switcher__item a:focus-visible,
.lang .pht-switcher__item a[aria-current] {
	padding: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-weight: inherit;
}

html.nav-open {
	overflow: hidden;
}

@media (min-width: 640px) {
	.site-header__actions > .btn {
		display: inline-flex;
	}

	.site-nav__extra .btn {
		display: none;
	}
}

@media (min-width: 1024px) {
	.site-header__bar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		min-height: 4.375rem;
		/* Simétrica: o botão Contacto fica tão longe da ponta direita como o logótipo da esquerda. */
		padding: 0.75rem 2rem;
	}

	.site-nav {
		position: static;
		z-index: auto;
		flex-direction: row;
		padding: 0;
		overflow: visible;
		background: none;
		visibility: visible;
		opacity: 1;
		transition: none;
	}

	.site-nav__list {
		display: flex;
		gap: clamp(1.25rem, 2.5vw, 2.5rem);
	}

	.site-nav__list a {
		position: relative;
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0;
		font-size: 0.875rem;
		letter-spacing: normal;
		text-transform: none;
	}

	.site-nav__list a::after {
		content: "";
		position: absolute;
		right: 0;
		bottom: 0.6rem;
		left: 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: 100% 50%;
		transition: transform 0.45s var(--ease);
	}

	.site-nav__list a:hover::after,
	.site-nav__list .current-menu-item > a::after,
	.site-nav__list .current_page_item > a::after {
		transform: scaleX(1);
		transform-origin: 0 50%;
	}

	.site-nav__list .current-menu-item > a,
	.site-nav__list .current_page_item > a {
		text-decoration: none;
	}

	.site-nav__extra,
	.nav-toggle {
		display: none;
	}

	.site-header__lang {
		display: block;
	}
}

/* Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(36rem, 100svh, 62rem);
	overflow: hidden;
	background: var(--dark);
	color: #fff;
}

.hero--small {
	min-height: clamp(30rem, 80svh, 48rem);
}

.hero__media {
	position: absolute;
	inset: 0;
}

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

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.15) 55%, rgba(10, 10, 10, 0.3) 100%);
}

.hero__content {
	position: relative;
	display: grid;
	gap: 2rem;
	padding-top: calc(var(--header-h) + 2rem);
	padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hero__heading {
	display: grid;
	gap: 1rem;
}

.hero__aside {
	display: grid;
	justify-items: start;
	gap: 1.25rem;
	max-width: 26rem;
}

/* Texto claro sobre fotografia escura: mais entrelinha e um pouco de espaçamento. */
.hero__aside p {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.7;
	letter-spacing: 0.01em;
}

@media (min-width: 1024px) {
	.hero__content {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
		align-items: end;
	}
}

/* Sobre nós (Início)
   ========================================================================== */

/* Secção de apoio ao hero: título no tamanho de todos os H2 (o hero continua a mandar) e
   foto no formato dela (sem recorte) com o texto em baixo à direita. Mesmas colunas do .split (foto na margem do
   conteúdo, texto na coluna direita): alinha com os Serviços por baixo e com o Sobre. */
.about__body {
	display: grid;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

@media (min-width: 1024px) {
	.about__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
		gap: var(--gap);
	}
}

/* Cartões e sliders (Swiper)
   ========================================================================== */

.slider .swiper {
	overflow: visible;
}

.slider .swiper-slide {
	height: auto;
	transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}

/* Largura que o Swiper vai calcular, já antes de o JS correr: assim o arranque não muda
   a altura dos sliders nem empurra a página. (L - (slides - 1) × espaço) / slides, com os
   valores de initSliders() em main.js — se mudarem lá, mudam aqui. */
.slider .swiper-slide {
	width: calc((100% - 2.4px) / 1.15);
}

@media (min-width: 640px) {
	.slider .swiper-slide {
		width: calc((100% - 24px) / 2.2);
	}
}

@media (min-width: 1024px) {
	.slider .swiper-slide {
		width: calc((100% - 61.6px) / 3.2);
	}
}

/* Os slides inteiros à vista em destaque; só o que espreita cortado na ponta fica recuado.
   (Com o ativo, as últimas fotos nunca chegavam a destaque no desktop.) */
.slider .swiper-slide:not(.swiper-slide-fully-visible) {
	transform: scale(0.92);
}

.card {
	position: relative;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

.card__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #222;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--ease), filter 0.9s var(--ease);
}

.card:hover .card__media img {
	transform: scale(1.05);
}

.card--services .card__media img {
	filter: grayscale(1) contrast(1.05);
}

.swiper-slide-fully-visible .card--services .card__media img {
	filter: grayscale(0.35) contrast(1.05);
}

.card--looks .card__media {
	aspect-ratio: 466 / 660;
	background: var(--muted);
}

.card__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	gap: 0.35rem;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.75), rgba(10, 10, 10, 0));
	color: #fff;
}

.slider__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
}

.slider__btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	overflow: hidden;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: color 0.45s var(--ease), opacity 0.3s;
}

.slider__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--page-fg);
	transform: scale(0);
	transition: transform 0.45s var(--ease);
}

.slider__btn:hover {
	color: var(--page-bg);
}

.slider__btn:hover::before {
	transform: scale(1);
}

/* Seta posicionada: fica numa camada acima do preenchimento (no Safari podia ficar tapada). */
.slider__btn svg {
	position: relative;
}

.slider__btn.swiper-button-disabled {
	opacity: 0.3;
	pointer-events: none;
}

.slider__btn.swiper-button-lock,
.slider__pagination.swiper-pagination-lock {
	visibility: hidden;
}

/* Paginação em "pílula": o ponto ativo alonga-se. Alvo de toque com 24px. */
.slider__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex: 1;
	gap: 0.125rem;
}

.slider .swiper-pagination-bullet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 !important;
	border-radius: 0;
	background: none;
	color: inherit;
	opacity: 1;
	cursor: pointer;
	transition: width 0.5s var(--ease);
}

.slider .swiper-pagination-bullet::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.5; /* 3:1 (contraste de controlos) no claro e no escuro. */
	transition: width 0.5s var(--ease), opacity 0.5s var(--ease);
}

.slider .swiper-pagination-bullet-active {
	width: 2.5rem;
}

.slider .swiper-pagination-bullet-active::after {
	width: 1.75rem;
	opacity: 1;
}

/* Pilares (no desktop ficam fixos e os cartões passam em arco)
   ========================================================================== */

.pillars {
	display: grid;
	gap: 2rem;
	max-width: 72rem;
	margin-inline: auto;
}

.pillar {
	display: grid;
	gap: 1rem;
	align-content: start;
	padding: 0.875rem 0.875rem 1.75rem;
	background: #fff;
	color: var(--dark);
	box-shadow: 0 18px 40px rgba(17, 17, 17, 0.1);
	text-align: center;
}

.pillar__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--muted);
}

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

.pillar p {
	margin: 0;
	padding-inline: 0.5rem;
	color: var(--fg-2);
}

@media (min-width: 768px) {
	.pillars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1.25rem, 3vw, 2.5rem);
		padding-top: 1.5rem;
	}

	.pillars:not(.is-track) .pillar:nth-child(3n + 1) {
		transform: rotate(-3deg);
	}

	.pillars:not(.is-track) .pillar:nth-child(3n + 2) {
		transform: translateY(-1.5rem);
	}

	.pillars:not(.is-track) .pillar:nth-child(3n) {
		transform: rotate(3deg);
	}
}

/* Modo "pin" (ativado por JS no desktop): secção com a altura do ecrã e faixa horizontal de cartões. */
.is-pinned-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	padding-block: calc(var(--header-h) + 0.5rem) 2rem;
}

.is-pinned-section .section-head {
	margin-bottom: clamp(1rem, 3vh, 2.5rem);
}

.pillars.is-track {
	display: flex;
	gap: clamp(1.5rem, 3vw, 3rem);
	width: max-content;
	max-width: none;
	padding-top: 2rem;
	will-change: transform;
}

.pillars.is-track .pillar {
	width: clamp(16rem, 24vw, 22rem);
	transform-origin: 50% 100%;
}

/* Família / fundadores
   ========================================================================== */

.family__text {
	display: grid;
	gap: 1.5rem;
}

/* Numa metade de um .split (Fundadores, Carreiras), a etiqueta fica por cima do título, como na
   intro de Contactos: com a coluna lateral, o título recuava dentro de uma metade estreita. */
.split .section-head {
	grid-template-columns: minmax(0, 1fr);
}

.split .section-head__label {
	padding-top: 0;
}

.family__text .section-head {
	margin-bottom: 0;
}

.family__media {
	margin: 0;
}

.family__media img {
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
}

/* Cronologia (Sobre)
   Base (sem JS, tablet, telemóvel): lista vertical com uma linha que se desenha com o scroll.
   Desktop: variante "ano fixo" mais abaixo. */
.chronicle__list {
	--progress: 1;
	position: relative;
	display: grid;
	gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	margin: 0;
	padding: 0 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
	list-style: none;
}

/* Linha: fundo ténue e preenchimento conforme o scroll (--progress, via JS). */
.chronicle__list::before,
.chronicle__list::after {
	content: "";
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0;
	width: 1px;
	background: var(--line);
}

.chronicle__list::after {
	background: var(--page-fg);
	transform: scaleY(var(--progress));
	transform-origin: top;
}

/* Máscara do ano: com folga em baixo para a perna do "j" de "Hoje". */
.chronicle__year {
	display: block;
	margin-bottom: -0.15em;
	padding-bottom: 0.15em;
	overflow: clip;
	font-size: clamp(3.5rem, 2rem + 7vw, 7.5rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.chronicle__year > span {
	display: block;
}

.chronicle__body {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.chronicle__index {
	color: var(--fg-3);
}

.chronicle__text {
	max-width: 26rem;
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
	color: var(--fg-2);
}

.chronicle__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

@media (min-width: 1024px) {
	.chronicle__list,
	.chronicle__foot {
		margin-left: calc(var(--side) + 2.5rem);
	}
}

/* Variante "ano fixo" (Sobre): o JS põe .is-sticky no desktop. */
.chronicle__aside {
	display: none;
}

/* Cor por capítulo (Sobre): o primeiro claro, os seguintes num neutro suave. O JS põe
   data-tone no capítulo ativo e tira-o ao sair da cronologia (volta ao claro das vizinhas).
   Sem tom escuro: passar o ecrã inteiro a preto e logo de volta ao claro era um flash. */
.chronicle--sticky {
	background-color: var(--page-bg);
	color: var(--page-fg);
	transition: --page-bg 0.9s var(--ease), --page-fg 0.9s var(--ease);
}

.chronicle--sticky[data-tone="mid"] {
	--page-bg: var(--muted);
}

@media (min-width: 1024px) {
	.chronicle--sticky.is-sticky .chronicle__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--gap);
	}

	.chronicle--sticky.is-sticky .chronicle__aside {
		display: block;
	}

	/* Os anos ficam empilhados no mesmo sítio, fixos a meio do ecrã, à altura do capítulo ativo. */
	.chronicle__years {
		position: sticky;
		top: calc(50vh - 0.41em);
		display: grid;
		font-size: clamp(6rem, 1rem + 11vw, 10.9rem); /* Máximo a 1440px. */
	}

	.chronicle__years .chronicle__year {
		grid-area: 1 / 1;
		font-size: 1em;
		line-height: 0.82;
	}

	.chronicle--sticky.is-sticky .chronicle__list {
		margin-left: 0;
		gap: 0;
	}

	/* O ano de cada capítulo já está à esquerda. */
	.chronicle--sticky.is-sticky .chronicle__list .chronicle__year {
		display: none;
	}

	.chronicle--sticky.is-sticky .chronicle__item {
		display: grid;
		align-content: center;
		min-height: 55vh;
	}

	/* O último capítulo não precisa de altura para o capítulo seguinte: sem ela, não sobra
	   meio ecrã vazio antes da secção seguinte. */
	.chronicle--sticky.is-sticky .chronicle__item:last-child {
		min-height: 0;
	}

	/* Capítulos inativos esbatidos mas legíveis: 0.8 mantém 4.5:1 (texto terciário incluído)
	   também no fundo Linho. */
	.chronicle--sticky.is-sticky .chronicle__body {
		margin: 0;
		opacity: 0.8;
		transition: opacity 0.6s var(--ease);
	}

	.chronicle--sticky.is-sticky .chronicle__item.is-active .chronicle__body {
		opacity: 1;
	}
}

/* Mapa-mundo (Início): continentes em tom suave, pontos a pulsar e Lousada como origem
   ========================================================================== */

.reach__map {
	--dot: clamp(0.375rem, 0.3rem + 0.3vw, 0.5rem);

	position: relative;
	aspect-ratio: 1000 / 493; /* viewBox de world.svg */
}

/* Os continentes são uma máscara (SVG em cache, 6 KB) pintada com a cor da página; o degradê
   apaga as pontas do mapa, mas não os pontos. */
.reach__map::before {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--page-fg) 12%, var(--page-bg));
	mask:
		url("../img/world.svg") center / 100% 100% no-repeat,
		linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-composite: intersect;
}

/* Posição por left/top (e não transform): o GSAP escala os pontos à entrada. */
.reach__dot {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: var(--dot);
	height: var(--dot);
	margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
	border-radius: 50%;
	background: var(--page-fg);
}

/* Pulso: só transform e opacity (corre fora da thread principal). O JS põe .is-live quando o
   mapa está bem à vista e tira-o quando sai: cada entrada recomeça a onda. Uma onda por entrada,
   cada ponto logo depois de aparecer: acaba em menos de 5 s (WCAG 2.2.2). */
.reach__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--page-fg);
	opacity: 0;
}

.reach.is-live .reach__dot::after {
	animation: esm-pulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) calc(0.5s + var(--i, 0) * 0.1s) 1;
}

@keyframes esm-pulse {
	0% {
		transform: scale(1);
		opacity: 0.4;
	}

	100% {
		transform: scale(4.5);
		opacity: 0;
	}
}

.reach__dot--origin {
	--dot: clamp(0.625rem, 0.5rem + 0.4vw, 0.875rem);
}

/* Lousada: um anel fixo marca a origem; o pulso é mais largo. */
.reach__dot--origin::before {
	content: "";
	position: absolute;
	inset: -0.3rem;
	border: 1px solid var(--page-fg);
	border-radius: 50%;
}

.reach.is-live .reach__dot--origin::after {
	animation-duration: 3.2s;
}

/* Etiqueta no Atlântico, livre de outros pontos: por baixo no telemóvel (à esquerda tapava
   Nova Iorque, com o mapa estreito) e à esquerda do ponto a partir do tablet. */
.reach__label {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 50%;
	translate: -50% 0;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.reach__label {
		top: 50%;
		right: calc(100% + 0.9rem);
		left: auto;
		translate: 0 -50%;
	}
}

.reach .section-head {
	margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) 0 0;
}

/* Valores (Sobre)
   ========================================================================== */

.values {
	margin: 0;
	padding: 0;
	list-style: none;
}

.values__item {
	display: grid;
	gap: 0.6rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--line);
}

.values__item:last-child {
	border-bottom: 1px solid var(--line);
}

.values__item p {
	margin: 0;
	color: var(--fg-2);
}

/* Frase sobre imagem */
.statement {
	position: relative;
	padding-block: clamp(7rem, 4rem + 10vw, 12rem);
	overflow: hidden;
	background: var(--dark);
	color: #fff;
	text-align: center;
}

.statement__media {
	position: absolute;
	inset: -12% 0;
}

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

.statement__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.58);
}

.statement__content {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.5rem;
}

.statement .h2 {
	max-width: 62rem;
}

/* Frase longa: em maiúsculas no telemóvel eram 10 linhas; em minúsculas lê-se como citação. */
@media (max-width: 639px) {
	.statement .h2 {
		font-size: 1.5rem;
		line-height: 1.25;
		letter-spacing: 0;
		text-transform: none;
	}
}

/* CTA */
.cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}

.cta__text {
	display: grid;
	gap: 1rem;
	max-width: 52rem;
}

/* Portefólio
   ========================================================================== */

/* Um bloco por linha (Mulher, Homem): título grande sobre um filete, só fotografias. */
.looks-group + .looks-group {
	margin-top: var(--section);
}

.looks-group__head {
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

/* 2 colunas até ao desktop: com 4 peças por linha, 3 colunas deixavam uma sozinha. */
.looks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 2:3 e ancorado em cima: as fotos mais estreitas cortam em baixo, nunca a cabeça. */
.looks .card__media {
	aspect-ratio: 2 / 3;
}

.looks .card__media img {
	object-position: 50% 0;
}

@media (min-width: 1024px) {
	.looks {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* Contactos e formulários
   ========================================================================== */

.contact__intro {
	display: grid;
	align-content: start;
	gap: 1.5rem;
}

.details {
	display: grid;
	gap: 1.5rem 2rem;
	margin: 0.5rem 0 0;
}

.details__item {
	display: grid;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
}

.details dd {
	margin: 0;
}

@media (min-width: 640px) {
	.details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.form-card {
	--page-bg: #fff;
	--page-fg: var(--dark);

	display: grid;
	gap: 1.5rem;
	padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	background: #fff;
	color: var(--dark);
}

.form {
	position: relative;
	display: grid;
	justify-items: start;
	gap: 1.75rem;
	scroll-margin-top: 8rem;
}

.form__grid {
	display: grid;
	gap: 1.5rem 2rem;
	width: 100%;
}

@media (min-width: 640px) {
	.form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.field {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.field--full {
	grid-column: 1 / -1;
}

.field__input {
	width: 100%;
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: transparent;
	font-size: 1rem;
	transition: box-shadow 0.3s var(--ease);
}

.field__input:focus-visible {
	outline: none;
	box-shadow: 0 1px 0 currentColor;
}

textarea.field__input {
	resize: vertical;
}

select.field__input option {
	color: var(--dark);
}

.field__input--file {
	border-bottom-style: dashed;
	font-size: 0.875rem;
}

.field--check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.field--check input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.15rem 0 0;
	accent-color: var(--page-fg);
}

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

.form__notice {
	width: 100%;
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid currentColor;
}

.form__notice--error {
	font-weight: 500;
}

.vacancies {
	display: grid;
	gap: 0.75rem;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
}

/* Mapa */
.map {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(20rem, 34vw, 28rem);
	overflow: hidden;
	background-color: var(--muted);
	color: var(--dark);
}

.map__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.map__pin {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1rem;
	padding: 1rem;
	text-align: center;
}

.map__dot {
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--dark);
	box-shadow: 0 0 0 0.6rem rgba(17, 17, 17, 0.15);
}

.map__label {
	padding: 0.6rem 0.9rem;
	background: var(--dark);
	color: var(--light);
}

/* Local sem imagem: morada em tipografia grande */
.place {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	border-top: 1px solid var(--line);
}

.place__address {
	font-style: normal;
}

/* A quebra entre rua e código postal fica também no telemóvel. */
.place__address br {
	display: inline;
}

.place__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.place__coords {
	color: var(--fg-3);
	font-variant-numeric: tabular-nums;
}

/* Conteúdo genérico */
.entry + .entry {
	margin-top: 3rem;
}

.entry__title {
	margin-bottom: 2rem;
}

/* Páginas de texto (page.php): data e índice na coluna da etiqueta, título e texto na dos títulos
   ========================================================================== */

/* minmax(0, 1fr) nas duas grelhas: sem isto, a tabela (min-width) alargava as colunas e cortava
   o texto no telemóvel; assim só a tabela desliza. */
.doc,
.doc__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.doc {
	gap: 1.5rem 2.5rem;
}

.doc__main {
	gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.doc__toc {
	display: none;
}

@media (min-width: 1024px) {
	.doc {
		grid-template-columns: var(--side) minmax(0, 1fr);
	}

	/* À vista durante a leitura; o topo alinha com o do título, como nos cabeçalhos de secção. */
	.doc__aside {
		position: sticky;
		top: calc(var(--header-h) + 1.5rem);
		display: grid;
		align-self: start;
		gap: 2rem;
		padding-top: 0.6em;
	}

	.doc__toc {
		display: block;
	}
}

.doc__toc ol {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc__toc a {
	display: block;
	padding-block: 0.4rem;
	color: var(--fg-3);
	font-size: 0.875rem;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.3s var(--ease);
}

.doc__toc a:hover,
.doc__toc a:focus-visible {
	color: var(--page-fg);
}

/* Texto na medida de leitura (.prose); só as tabelas podem ir mais largas. */
.doc__body {
	max-width: none;
}

.doc__body > * {
	max-width: 32rem;
}

.doc__body h2 {
	margin: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) 0 1rem;
	color: var(--page-fg);
	font-size: var(--h3);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.doc__body h3 {
	margin: 2rem 0 0.5rem;
	color: var(--page-fg);
	font-size: 1rem;
	font-weight: 500;
}

.doc__body strong {
	color: var(--page-fg);
	font-weight: 600;
}

.doc__body ul,
.doc__body ol {
	margin: 0 0 1em;
	padding-left: 1.25em;
}

.doc__body li + li {
	margin-top: 0.4em;
}

.doc__body li::marker {
	color: var(--fg-3);
}

.doc__body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85em;
}

/* Tabela (p.ex. cookies): linhas finas como o resto do site; desliza na horizontal no telemóvel. */
.doc__body > .wp-block-table {
	max-width: 48rem;
	margin: 1.5rem 0;
	overflow-x: auto;
}

.doc__body .wp-block-table table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: 0.875rem;
	line-height: 1.5;
}

.doc__body .wp-block-table th,
.doc__body .wp-block-table td {
	padding: 0.85rem 1.25rem 0.85rem 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.doc__body .wp-block-table th {
	color: var(--page-fg);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.doc__body .wp-block-table thead {
	border-bottom: 0;
}

/* Rodapé
   ========================================================================== */

.site-footer {
	--page-bg: var(--muted);
	--page-fg: var(--dark);

	padding-top: 4.5rem;
	background: var(--muted);
	color: var(--dark);
	font-size: 0.875rem;
}

.site-footer__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 640px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Colunas com a largura do conteúdo e espaço igual entre elas, de margem a margem. */
@media (min-width: 1024px) {
	.site-footer__grid {
		display: flex;
		justify-content: space-between;
	}

	/* Linhas dos títulos das colunas com o mesmo comprimento. */
	.site-footer__col {
		min-width: 10rem;
	}
}

.site-footer__brand {
	display: grid;
	align-content: start;
	gap: 1.1rem;
}

.site-footer__brand p {
	margin: 0;
}

.site-footer__title {
	margin: 0 0 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--line);
}

.site-footer__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__list a {
	text-decoration: none;
}

.site-footer__list a:hover {
	text-decoration: underline;
}

.site-footer__address {
	margin-bottom: 0.75rem;
}

.social {
	display: flex;
	gap: 0.25rem;
	margin: 0 0 0 -0.75rem;
	padding: 0;
	list-style: none;
}

.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	transition: opacity 0.3s;
}

.social a:hover {
	opacity: 0.6;
}

/* Certificações (coluna da marca, por baixo das redes sociais): logótipos oficiais, sem alterar
   cores, todos à mesma altura. */
.certs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.certs img {
	width: auto;
	height: 3.5rem;
}

.certs__note {
	color: var(--fg-3);
	font-size: 0.75rem;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3.5rem;
	padding-block: 1.4rem 1.75rem;
	border-top: 1px solid var(--line);
	color: var(--fg-3);
	font-size: 0.75rem;
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__bottom a {
	text-decoration: none;
}

/* Cursor (só desktop com rato; criado por initCursor() em main.js)
   ========================================================================== */

/* O cursor do sistema fica sempre visível (quem usa cursores ampliados não o perde); este só
   acrescenta o disco "Arrastar" nos sliders.
   Sem mix-blend-mode: uma camada em "difference" por cima dos botões impedia o texto de ser
   redesenhado no hover (ficava preto sobre o preenchimento preto).
   Sem "scale" no próprio .cursor: somava-se ao transform do GSAP e puxava-o para o canto. */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	pointer-events: none;
	transition: opacity 0.3s var(--ease);
}

.cursor > * {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	translate: -50% -50%;
	scale: calc(var(--s, 1) * var(--press, 1));
	transition: scale 0.45s var(--ease), opacity 0.3s var(--ease);
}

/* Sliders: disco com "Arrastar". */
.cursor__label {
	--s: 0;

	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	background: var(--light);
	color: var(--dark);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cursor.is-drag .cursor__label {
	--s: 1;
}

.cursor.is-down {
	--press: 0.8;
}

.cursor.is-hidden,
.cursor.is-field {
	opacity: 0;
}

/* Animação: estado inicial enquanto o GSAP prepara a página
   ========================================================================== */

.motion-pending [data-reveal],
.motion-pending [data-split],
.motion-pending [data-pillar],
.motion-pending [data-reveal-img] {
	visibility: hidden;
}

/* Movimento reduzido: o JS já tira scroll suave, pins, parallax e títulos partidos (main.js);
   aqui saem o zoom das fotos e a escala dos slides. Cores e fades continuam. */
@media (prefers-reduced-motion: reduce) {
	.card:hover .card__media img,
	.slider .swiper-slide:not(.swiper-slide-fully-visible) {
		transform: none;
	}
}