@charset "UTF-8";
/* Capítulos partilhados — homepage (index.php) e Empresa (empresa.php).
   Uma ideia por capítulo, título ao centro, fundos a alternar branco/cinzento a
   toda a largura; botões; entrada única de cada .hp-revela (capitulos.js).
   Só tokens de theme.css. O que é só de uma página fica em home.css / empresa.css. */

.hm-btn {
	display: inline-block;
	padding: 12px 24px;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: #fff;
	color: var(--accent);
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
	transition: transform .1s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.hm-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.hm-btn:active { transform: scale(.97); }
.hm-btn--primario { border-color: var(--accent); background: var(--accent); color: #fff; }
.hm-btn--primario:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

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

/* ── capítulos: uma ideia por capítulo, título ao centro ── */
.hp-capitulos {
	max-width: var(--col);
	margin: 0 auto;
	padding: 0 var(--gutter);
	box-sizing: border-box;
}

.hp-cap {
	padding: 120px 0;               /* igual em cima e em baixo: a mudança de fundo
	                                   fica a meio do espaço entre capítulos */
}
/* ritmo dos fundos: branco · cinzento · branco · cinzento (a toda a largura,
   sem mexer na estrutura: sombra + recorte) */
.hp-cap--alt {
	box-shadow: 0 0 0 100vmax var(--bg-alt);
	clip-path: inset(0 -100vmax);
	background: var(--bg-alt);
}

.hp-cap-topo { margin-bottom: 48px; text-align: center; }
#div_centro .hp-etiqueta {
	margin: 0 0 12px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--accent);
}
.hp-cap-topo h2 {
	max-width: 20ch;
	margin: 0 auto;
	font-size: 2.5rem;              /* abaixo do H1 do topo (3rem) */
	line-height: 1.05;
	letter-spacing: -0.03em;
}
#div_centro .hp-cap-topo p { text-align: center !important; }
#div_centro .hp-apoio {
	max-width: 40ch;
	text-wrap: pretty;              /* sem palavra sozinha / partida na última linha */
	margin: 16px auto 0;
	font-size: 1.3125rem;
	line-height: 1.45;
	color: var(--ink-soft);
}

.hp-mini-cta {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 44px;
	margin-top: 24px;
	font-size: 1.0625rem;
	text-decoration: none;
}
@media (hover: hover) { .hp-mini-cta:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* entradas (uma vez, ao entrar no ecrã) — só com JS (classe em <html>) e
   sem "reduzir movimento"; sem JS fica tudo visível */
@media (prefers-reduced-motion: no-preference) {
	.hp-js .hp-revela {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .5s var(--ease), transform .5s var(--ease);
	}
	.hp-js .hp-revela + .hp-revela { transition-delay: 80ms; }
	.hp-js .hp-revela.hp-visto { opacity: 1; transform: none; }
	html { scroll-behavior: smooth; }
}
/* com "reduzir movimento": sem deslocação, só o esbater (mais curto) */
@media (prefers-reduced-motion: reduce) {
	.hp-js .hp-revela { opacity: 0; transition: opacity .2s ease; }
	.hp-js .hp-revela.hp-visto { opacity: 1; }
}

/* capítulo logo a seguir à abertura: o espaço de cima já vem da abertura */
.hp-cap--seguinte { padding-top: 0; }

/* ── barra da página (o "local nav" das páginas da Apple): fixa por baixo do menu,
   em vidro como a barra de capítulos da homepage — nome da página à esquerda,
   atalhos e a ação principal à direita. Só nas páginas interiores. ── */
.pg-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 900;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.pg-nav-in {
	display: flex;
	align-items: center;
	gap: 24px;
	max-width: var(--col);
	height: 52px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	box-sizing: border-box;
}
.pg-nav-nome {
	margin: 0;
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ink);
	white-space: nowrap;
}
.pg-nav-links {
	display: flex;
	gap: 4px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}
.pg-nav-links a {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 10px;
	font-size: 0.875rem;
	color: var(--ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s var(--ease);
}
@media (hover: hover) { .pg-nav-links a:hover { color: var(--ink); } }
.pg-nav-cta { flex: none; margin-left: auto; padding: 6px 16px; font-size: 0.875rem; }
.pg-nav-links + .pg-nav-cta { margin-left: 0; }
/* botão secundário com ícone na barra (ex.: Estúdio 3D no showroom) */
.pg-nav-3d {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 6px 14px;
	border-color: var(--accent);
	background: transparent;
	font-size: 0.875rem;
}
.pg-nav-3d svg { width: 16px; height: 16px; fill: currentColor; }
.pg-nav-3d + .pg-nav-cta { margin-left: 0; }
@media (hover: hover) { .pg-nav-3d:hover { background: rgba(10, 119, 189, 0.08); } }

/* campo de pesquisa (lupa + limpar) — Produtos (showroom.php) e Estúdio 3D */
.sr-search {
	position: relative;
	width: 100%;
}

.sr-search input {
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 44px;
	border: 1px solid var(--line);
	border-radius: 980px;
	background-color: var(--bg-alt);
	font-size: 1.0625rem;
	color: var(--ink);
	outline: none;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}

.sr-search input::-webkit-search-decoration,
.sr-search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.sr-search input:focus {
	border-color: var(--accent);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(10, 119, 189, 0.25);
}

.sr-search .sr-ico {
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	fill: var(--ink-soft);
	pointer-events: none;
}

.sr-search .sr-clear {
	position: absolute;
	right: 2px;
	top: 2px;
	width: 44px;   /* alvo de toque */
	height: 44px;
	display: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 1.3125rem;
	line-height: 1;
	color: var(--ink-soft);
	padding: 0;
}

.sr-search.has-value .sr-clear {
	display: block;
}

/* saltos por âncora não ficam por baixo de menu + barra da página */
html:has(.pg-nav) { scroll-padding-top: calc(var(--header-h) + 52px); }

/* ── abertura das páginas interiores: editorial, alinhada à esquerda (a homepage
   é que conta a história ao centro). Título grande à esquerda; à direita, se a
   página tiver, a peça própria dela (.pg-topo-lado: os números da Empresa, os
   atalhos de contacto). ── */
.pg-topo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	padding: 64px 0;
}
.pg-topo:has(.pg-topo-lado) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pg-topo h1 {
	max-width: 16ch;
	margin: 0;
	font-size: 3rem;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ink);
}
#div_centro .pg-topo .hp-apoio { margin: 16px 0 0; }

/* ── cartões de tipo de produto (Asas, Puxadores, …) — homepage e Produtos ── */
.hm-tipos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));   /* 2 ou 3 */
	gap: 16px;
}

.hm-tipo {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 24px;
	border-radius: 18px;
	background: var(--bg-alt);
	color: var(--ink);
	text-decoration: none;
	transition: transform .1s var(--ease);
}
.hm-tipo img { width: 100%; max-width: 360px; height: 200px; object-fit: contain; margin-bottom: 20px; }
.hm-tipo-nome { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.hm-tipo-cta { margin-top: 4px; font-size: 1.0625rem; color: var(--accent); }
.hm-tipo:active { transform: scale(.98); }

/* ── cartões de referência (homepage "Algumas referências", ficha "Outras …") ── */
.hm-refs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.hm-ref {
	display: flex;
	flex-direction: column;
	color: var(--ink);
	text-decoration: none;
	transition: transform .1s var(--ease);
}
.hm-ref:active { transform: scale(.98); }
.hm-ref-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 0;
	overflow: hidden;
	padding: 16px;
	border-radius: 12px;
	background: var(--bg-alt);
	box-sizing: border-box;
	position: relative;
}
.hm-ref-foto img { width: 100%; height: 100%; object-fit: contain; }
.hm-ref-nome { margin-top: 12px; font-size: 1.0625rem; font-weight: 600; }
.hm-ref-tipo { font-size: 0.875rem; color: var(--ink-soft); }
.hm-ref:hover .hm-ref-nome { color: var(--accent); }

/* selos "3D" (cubo da miniatura 3D da ficha) e "AR" nos cartões de referência —
   homepage e showroom; o pai tem de ter position: relative */
.hm-ref-selos {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	gap: 4px;
}
.hm-ref-selo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--pill);
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.hm-ref-selo svg { width: 14px; height: 14px; fill: currentColor; }

/* catálogo numa linha discreta (homepage) */
.hp-cat-linha {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
}
.hp-cat-linha img {
	display: block;
	width: 40px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.hp-cat-linha-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-cat-linha-titulo { font-size: 1.0625rem; font-weight: 600; }
.hp-cat-linha-meta { font-size: 0.875rem; color: var(--ink-soft); }
.hp-cat-linha-cta { font-size: 1.0625rem; color: var(--accent); white-space: nowrap; }
@media (hover: hover) { .hp-cat-linha:hover .hp-cat-linha-titulo { color: var(--accent); } }
.hp-cat-linha:active { opacity: .7; }
/* peças à medida: uma linha pequena por baixo do catálogo, sem destaque */
#div_centro .hp-cat-medida {
	margin: 16px 0 0;
	font-size: 0.875rem;
	color: var(--ink-soft);
	text-align: center !important;
}

/* ── cartões de notícia (homepage, Notícias): brancos sobre o cinzento do capítulo ── */
.hp-novas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;        /* com 1 ou 2 notícias ficam ao centro */
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hp-novas li { flex: 0 1 calc((100% - 32px) / 3); }
.hp-novas a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px;
	border-radius: 18px;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--ink);
	text-decoration: none;
	transition: transform .1s var(--ease);
}
.hp-novas a:active { transform: scale(.98); }
.hp-novas-data { font-size: 0.875rem; color: var(--ink-soft); }
.hp-novas-titulo {
	margin-top: 12px;
	font-size: 1.3125rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.hp-novas-texto { margin-top: 8px; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-soft); }
.hp-novas-ler { margin-top: auto; padding-top: 24px; font-size: 1.0625rem; color: var(--accent); }
@media (hover: hover) { .hp-novas a:hover .hp-novas-titulo { color: var(--accent); } }

/* ── palco escuro do 3D num só painel (Empresa, Produtos); o painel inteiro é o link ── */
.pg-palco {
	position: relative;
	display: block;
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
	padding: 72px 56px 88px;
	border-radius: 28px;
	box-sizing: border-box;
	background:
		radial-gradient(ellipse 60% 60% at 50% 55%, rgba(232, 194, 74, 0.14), transparent 70%),
		linear-gradient(180deg, #1b1b1e 0%, #0d0d0f 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	color: #fff;
	text-decoration: none;
	transition: transform .1s var(--ease);
}
.pg-palco:hover { color: #fff; }
.pg-palco:active { transform: scale(.99); }
.pg-palco img {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-6deg);
	filter: drop-shadow(0 32px 28px rgba(0, 0, 0, 0.55));
	transition: transform .35s var(--ease);
}
@media (hover: hover) { .pg-palco:hover img { transform: rotate(-4deg) scale(1.02); } }
.pg-palco-cta {
	position: absolute;
	left: 56px;
	bottom: 32px;
	font-size: 1.0625rem;
}
@media (hover: hover) { .pg-palco:hover .pg-palco-cta { text-decoration: underline; text-underline-offset: 3px; } }

/* versão compacta, ao lado do título (Produtos): texto em cima, peça, ação em baixo */
.pg-palco--mini {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 28px 28px 24px;
	border-radius: 18px;
}
.pg-palco--mini img { width: 100%; margin: 8px 0; }
.pg-palco--mini .pg-palco-cta { position: static; font-size: 0.875rem; }
.pg-palco-texto { display: flex; flex-direction: column; gap: 4px; }
.pg-palco-etiqueta { font-size: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.pg-palco-titulo { font-size: 1.3125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.pg-palco-ar { justify-content: flex-start; margin-top: 8px; font-size: 0.875rem; }

@media (max-width: 860px) {
	.hp-cap { padding: 72px 0; }
	.hp-cap--seguinte { padding-top: 0; }
	.pg-topo { padding: 48px 0; gap: 32px; }
	.pg-topo:has(.pg-topo-lado) { grid-template-columns: minmax(0, 1fr); }
	.pg-topo h1 { font-size: 2.5rem; }
	.pg-nav-links { display: none; }   /* no telemóvel fica o nome e a ação */
	.pg-nav-in .pg-nav-cta { margin-left: auto; }
	.pg-nav-in .pg-nav-3d + .pg-nav-cta { margin-left: 0; }
	.pg-palco.pg-palco--mini { padding: 24px; }
	.hp-novas li { flex-basis: 100%; }
	.hm-refs { grid-template-columns: 1fr 1fr; }
	.pg-palco { padding: 48px 24px 72px; }
	.pg-palco-cta { left: 24px; bottom: 24px; }
	.hp-cap-topo h2 { font-size: 2rem; }
}
@media (max-width: 560px) {
	.hp-cap-topo h2 { font-size: 1.75rem; }
	.pg-topo h1 { font-size: 2rem; }
	/* no telemóvel o Estúdio 3D fica só o cubo (alvo de 44px) */
	.pg-nav-3d { width: 44px; height: 44px; padding: 0; justify-content: center; }
	.pg-nav-3d span { display: none; }
	.hm-tipos { grid-template-columns: 1fr; }
	#div_centro .hp-apoio { font-size: 1.0625rem; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-btn:active, .hm-tipo:active, .hm-ref:active, .hp-novas a:active, .pg-palco:active { transform: none; opacity: .7; }
	.pg-palco img { transition: none; }
}