/* ==========================================================================
   VIDROTECK — protótipo industrial
   Fontes alojadas no próprio servidor. Sem CDN, sem bibliotecas.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes */
@font-face {
	font-family: 'Poppins';
	src: url('/assets/fontes/poppins-400.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/assets/fontes/poppins-600.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('/assets/fontes/poppins-700.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Source Serif 4';
	src: url('/assets/fontes/source-serif-600.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}

:root {
	--amarelo:       #F0A32A;
	--amarelo-claro: #FFB84D;
	--amarelo-escuro:#8F5D0C;

	--preto:   #101114;
	--preto-2: #17181C;
	--preto-3: #22252B;

	--tinta:   #14161A;
	--tinta-2: #454D58;
	--tinta-3: #5E6773;

	--linha:   #E1E6EB;
	--cinza:   #F4F6F8;
	--branco:  #FFFFFF;

	--fonte:  'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--serif:  'Source Serif 4', Georgia, serif;

	--largura: 1200px;
	/* Gramática de movimento: uma curva de saída, três durações.
	   Feedback imediato, estado curto, e o momento focal mais longo. */
	--t: 180ms ease;
	--t-feedback: 140ms;
	--t-estado: 300ms;
	--t-focal: 620ms;
	--saida: cubic-bezier(.16, 1, .3, 1);
}

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

body {
	margin: 0;
	font-family: var(--fonte);
	font-size: 16px;
	line-height: 1.7;
	color: var(--tinta-2);
	background: var(--branco);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .55rem; font-weight: 600; line-height: 1.16; color: var(--tinta); letter-spacing: -.025em; }
h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.9rem); font-weight: 700; line-height: 1.06; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; }
h3 { font-size: 1.18rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1rem; }
a  { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ------------------------------------------ superfícies do próprio browser */
::selection { background: var(--amarelo); color: var(--preto); text-shadow: none; }
:root { caret-color: var(--amarelo); scrollbar-color: var(--tinta-3) var(--cinza); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cinza); }
::-webkit-scrollbar-thumb { background: var(--tinta-3); border: 3px solid var(--cinza); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-2); }

:focus-visible {
	outline: 2px solid var(--amarelo);
	outline-offset: 3px;
}
.secao--escura :focus-visible, .heroi :focus-visible, .cabecalho :focus-visible, .rodape :focus-visible {
	outline-color: var(--amarelo-claro);
}

.prosa a, .rodape a[href^="mailto"], .rodape__agartha, .barra-topo a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.prosa a:hover, .rodape a[href^="mailto"]:hover, .rodape__agartha:hover, .barra-topo a:hover { text-decoration-color: var(--amarelo); }

/* Dados numéricos alinham em coluna */
.contador b, .categoria span, .produto__ref, .especificacoes td { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--largura); margin-inline: auto; }

/* A goteira lateral vive nas secções, não no invólucro: é a secção que tem
   fundo próprio, e é dela que o conteúdo tem de se afastar. */
.barra-topo, .cabecalho, .heroi, .secao, .chamada, .rodape {
	padding-inline: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.sr { position: absolute!important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---------------------------------------------------------------- botões */
.btn {
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .95rem 1.7rem;
	font-size: .88rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
	border: 2px solid transparent;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.btn svg { flex: none; }
.btn--amarelo { background: var(--amarelo); color: var(--preto); }
.btn--amarelo:hover { background: var(--amarelo-claro); }
.btn--escuro { background: var(--preto); color: var(--branco); }
.btn--escuro:hover { background: var(--preto-3); }
.btn--linha { border-color: rgba(255,255,255,.4); color: var(--branco); }
.btn--linha:hover { border-color: var(--amarelo); color: var(--amarelo); background: rgba(240,163,42,.08); }
.btn--linha-escura { border-color: var(--linha); color: var(--tinta); }
.btn--linha-escura:hover { border-color: var(--amarelo); color: var(--amarelo-escuro); background: rgba(240,163,42,.06); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Ligação de texto com seta desenhada */
.ligacao { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta); }
.ligacao svg { transition: transform var(--t); }
.ligacao:hover { color: var(--amarelo-escuro); }
.ligacao:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------- cabeçalho */
.barra-topo { background: var(--preto-2); color: rgba(255,255,255,.7); font-size: .78rem; }
.barra-topo .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: center; min-height: 42px; }
.barra-topo a:hover { color: var(--amarelo); }
.barra-topo__dir { margin-left: auto; }
.barra-topo__dir a { display: inline-flex; align-items: center; text-decoration: none; }
.barra-topo__dir a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.barra-topo__dir a:hover span { text-decoration-color: var(--amarelo); }
.barra-topo svg { display: inline-block; vertical-align: -2px; margin-right: .4rem; opacity: .65; }

.cabecalho { position: sticky; top: 0; z-index: 40; background: var(--preto); }
.cabecalho .wrap { display: flex; align-items: center; gap: 2rem; min-height: 82px; }

.logo { display: flex; align-items: center; gap: .65rem; flex: none; }
.logo svg { width: 38px; height: 38px; }
.logo b { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; color: var(--branco); }

.menu { margin-left: auto; display: flex; gap: 2rem; }
.menu > li > a {
	display: block; padding: 1.6rem 0;
	font-size: .87rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
	color: rgba(255,255,255,.8);
	border-bottom: 3px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.menu > li > a:hover, .menu > li.activo > a { color: var(--amarelo); border-bottom-color: var(--amarelo); }

.burger { display: none; margin-left: auto; padding: .6rem; background: none; border: 1px solid rgba(255,255,255,.28); color: #fff; }
.burger:hover { border-color: var(--amarelo); color: var(--amarelo); }

/* ------------------------------------------------------------------ herói */
.heroi { position: relative; padding-block: clamp(4rem, 3rem + 7vw, 8rem) 0; background: var(--preto); color: var(--branco); overflow: hidden; }

/* Filmagem a cheio. O poster já mostra a imagem real antes de o vídeo chegar,
   e fica como imagem fixa em telemóvel, movimento reduzido ou poupança de
   dados, casos em que os 2 MB nem são descarregados. */
.heroi__video {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* Camada de escurecimento sobre a filmagem. Forte à esquerda, onde assenta o
   texto, e a abrir à direita para se ver a máquina a trabalhar. */
.heroi__fundo {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(100deg, rgba(16,17,20,.95) 0%, rgba(16,17,20,.88) 36%, rgba(16,17,20,.64) 68%, rgba(16,17,20,.46) 100%),
		radial-gradient(48% 62% at 82% 42%, rgba(240,163,42,.13) 0%, transparent 72%);
}
.heroi .wrap { position: relative; z-index: 2; }
.heroi__conteudo { max-width: 700px; padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
.heroi h1 { color: var(--branco); margin-bottom: 1.4rem; }
.heroi h1 span { color: var(--amarelo); }
.heroi p { font-size: 1.08rem; color: rgba(255,255,255,.74); max-width: 65ch; margin-bottom: 2.2rem; }
.heroi__acoes { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Faixa de indicadores — é aqui que vive o único momento de movimento */
.tiras { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: rgba(255,255,255,.13); }
.tiras::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
	background: var(--amarelo); transform-origin: left; z-index: 3;
}
.tira { padding: 1.5rem 1.6rem; background: var(--preto); }
.tira svg { color: var(--amarelo); margin-bottom: .7rem; }
.tira__t { color: var(--branco); margin: 0 0 .15rem; font-size: .98rem; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.tira p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); }

/*
 * MOMENTO FOCAL, um só em toda a página.
 * O vidro corta-se com um risco e separa-se limpo ao longo dele. O filete
 * âmbar percorre a faixa como a roda de corte percorre a chapa, e cada peça
 * revela-se pelo risco, não por desvanecimento. É a operação que estas
 * máquinas fazem, e é a razão por que este movimento pertence a este site.
 * O estado por omissão é o estado final: sem JavaScript está tudo visível.
 */
.movimento .tiras::before { transform: scaleX(0); }
.movimento .tiras.entrou::before { transform: scaleX(1); transition: transform 760ms var(--saida) 80ms; }
.movimento .tiras.entrou .tira { animation: separar var(--t-focal) var(--saida) both; }
.movimento .tiras.entrou .tira:nth-child(1) { animation-delay: 150ms; }
.movimento .tiras.entrou .tira:nth-child(2) { animation-delay: 235ms; }
.movimento .tiras.entrou .tira:nth-child(3) { animation-delay: 320ms; }
.movimento .tiras.entrou .tira:nth-child(4) { animation-delay: 405ms; }
@keyframes separar {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0); }
}

/* Escada de apoio, só onde há de facto uma lista a aparecer como lista.
   Atraso total limitado a 300ms: passados seis irmãos, entram juntos. */
.movimento [data-lista] > * { opacity: 0; }
/* O estado final é declarado, não deixado à animação: se ela não correr —
   separador em segundo plano, motor a estrangular, script a falhar depois de
   marcar .visivel — o elemento fica visível de qualquer maneira. Durante o
   atraso da escada a animação sobrepõe-se e mantém o arranque a zero. */
.movimento [data-lista].visivel > * { opacity: 1; animation: entrar-lista var(--t-estado) var(--saida) both; }
.movimento [data-lista].visivel > *:nth-child(2) { animation-delay: 60ms; }
.movimento [data-lista].visivel > *:nth-child(3) { animation-delay: 120ms; }
.movimento [data-lista].visivel > *:nth-child(4) { animation-delay: 180ms; }
.movimento [data-lista].visivel > *:nth-child(5) { animation-delay: 240ms; }
.movimento [data-lista].visivel > *:nth-child(n+6) { animation-delay: 300ms; }
@keyframes entrar-lista {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- secções */
.secao { padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(1.25rem, 1rem + 1vw, 2rem); }
.secao--cinza { background: var(--cinza); }
.secao--escura { background: var(--preto); color: rgba(255,255,255,.7); }
.secao--escura h2, .secao--escura h3, .secao--escura h4 { color: var(--branco); }

.cabeca { max-width: 640px; margin-bottom: 3rem; }
.cabeca--centro { margin-inline: auto; text-align: center; }
.cabeca p { margin-bottom: 0; font-size: 1.02rem; max-width: 68ch; }
.cabeca--centro p { margin-inline: auto; }

/* ------------------------------------------------------------------ grelhas */
.grelha { display: grid; gap: 1.6rem; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g6 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Marcador de fotografia, declarado como tal */
.foto {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(150deg, #262A31 0%, #16181C 100%);
	overflow: hidden;
	display: grid; place-items: center;
}
.foto::before {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(125deg, rgba(255,255,255,.035) 0 18px, transparent 18px 40px);
}
.foto::after {
	content: attr(data-legenda);
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: .55rem .9rem;
	font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
	color: rgba(255,255,255,.5);
	background: linear-gradient(transparent, rgba(0,0,0,.65));
}
.foto svg { width: 40px; height: 40px; color: rgba(240,163,42,.5); }

/* ----------------------------------------------------------------- serviços
   Um serviço principal em largura total e dois de apoio abaixo: evita a
   fileira de três cartões iguais, que é o contentor preguiçoso. */
.servicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.servico { background: var(--branco); border: 1px solid var(--linha); transition: border-color var(--t), box-shadow var(--t); }
.secao--cinza .servico { border-color: transparent; }
.servico:hover { border-color: var(--amarelo); box-shadow: 0 14px 34px rgba(20,22,26,.10); }
.servico__corpo { padding: 1.8rem; }
.servico p { font-size: .94rem; }
.servico h3 { font-size: 1.3rem; }

.servico--principal { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.servico--principal .foto { aspect-ratio: auto; height: 100%; min-height: 280px; }
.servico--principal .servico__corpo { padding: clamp(1.8rem, 1rem + 2vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.servico--principal h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.servico--principal p { font-size: 1rem; max-width: 46ch; }

/* --------------------------------------------------------------- categorias */
.categoria { display: block; padding: 1.5rem 1.2rem; text-align: center; background: var(--branco); border: 1px solid var(--linha); transition: border-color var(--t), background var(--t); }
.categoria:hover { border-color: var(--amarelo); background: #FFFCF6; }
.categoria svg { margin: 0 auto .8rem; color: var(--amarelo-escuro); }
.categoria b { display: block; font-size: .94rem; font-weight: 600; color: var(--tinta); }
.categoria span { font-size: .76rem; color: var(--tinta-3); }

/* ------------------------------------------------------------------- sobre */
.duas-colunas { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.lista-visto { margin: 1.5rem 0 2rem; display: grid; gap: .75rem; }
.lista-visto li { display: flex; gap: .7rem; font-size: .96rem; }
.lista-visto svg { flex: none; margin-top: .4rem; color: var(--amarelo-escuro); }

.montagem { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.montagem .foto:first-child { grid-row: span 2; aspect-ratio: auto; }

/* -------------------------------------------------------------- contadores */
.contadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 2rem; }
.contador b { display: block; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 700; line-height: 1; color: var(--amarelo); letter-spacing: -.035em; }
.contador span { display: block; margin-top: .5rem; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.62); }

/* ----------------------------------------------------------------- produtos */
.produto { background: var(--branco); border: 1px solid var(--linha); display: flex; flex-direction: column; transition: border-color var(--t), box-shadow var(--t); }
.produto:hover { border-color: var(--amarelo); box-shadow: 0 14px 34px rgba(20,22,26,.10); }
.produto__corpo { padding: 1.35rem; flex: 1; display: flex; flex-direction: column; }
.produto__marca { font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--amarelo-escuro); margin-bottom: .35rem; }
.produto h3 { font-size: 1.04rem; margin-bottom: .3rem; }
.produto__ref { font-size: .8rem; color: var(--tinta-3); margin-bottom: .8rem; }
.produto__rodape { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--linha); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.selo { padding: .24rem .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.selo--novo { background: #E3F1E7; color: #17612D; }
.selo--usado { background: #FBEDD5; color: #7A4E0C; }

/* ------------------------------------------------------------------ marcas */
.marcas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--linha); }
.marca-cel { display: grid; place-items: center; min-height: 96px; background: var(--branco); font-size: 1.05rem; font-weight: 600; color: var(--tinta-3); letter-spacing: .03em; transition: color var(--t), background var(--t); }
.marca-cel:hover { color: var(--amarelo-escuro); background: var(--cinza); }

/* Logótipo em cor única. A imagem entra como recorte e a cor vem daqui, o que
   põe marcas de paletas muito diferentes — branco, preto e azul, branco e
   laranja — a ler como um conjunto em vez de uma fila de manchas.

   Sem suporte de máscara fica o logótipo nas cores do próprio ficheiro: pior
   de ver, mas legível, que é o que interessa nas máquinas antigas de
   escritório onde este site é consultado. */
.marca-cel__logo {
	width: min(74%, 180px); height: var(--alt, 30px);
	background: var(--logo) center / contain no-repeat;
}
@supports (mask-image: url("#m")) or (-webkit-mask-image: url("#m")) {
	.marca-cel__logo {
		background: var(--tinta-3);
		-webkit-mask: var(--logo) center / contain no-repeat;
		        mask: var(--logo) center / contain no-repeat;
		transition: background-color var(--t);
	}
	.marca-cel:hover .marca-cel__logo { background-color: var(--amarelo-escuro); }
}

/* ------------------------------------------------------------------ equipa */
.pessoa { text-align: center; }
.pessoa__avatar {
	width: 116px; height: 116px; margin: 0 auto 1.1rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--amarelo), #C9821A);
	color: var(--preto);
	font-size: 2rem; font-weight: 700; letter-spacing: -.02em;
}
.pessoa h3 { margin-bottom: .1rem; font-size: 1rem; }
.pessoa span { font-size: .84rem; color: var(--tinta-3); }

/* -------------------------------------------------------------- testemunhos */
.testemunho { padding: 1.9rem; background: var(--branco); border: 1px solid var(--linha); }
.testemunho__aspas { font-family: var(--serif); font-size: 3rem; line-height: .55; color: var(--amarelo-escuro); }
.testemunho p { font-size: .96rem; font-style: italic; color: var(--tinta-2); }
.testemunho__quem { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linha); }
.testemunho__quem i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cinza); color: var(--tinta-3); font-style: normal; font-weight: 700; font-size: .88rem; }
.testemunho__quem b { display: block; font-size: .92rem; color: var(--tinta); }
.testemunho__quem span { font-size: .8rem; color: var(--tinta-3); }

/* --------------------------------------------------------------- chamada */
/* Fecho da página: é o momento de conversão, por isso tem massa própria em
   vez de ser uma tira, e oferece as duas vias — formulário ou contacto
   directo, que é o que um gerente costuma preferir. */
.chamada { background: var(--preto); padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
.chamada .wrap { display: grid; justify-items: center; }

.chamada__conjunto { position: relative; width: min(100%, 520px); }

.chamada__card {
	padding: clamp(2.2rem, 1.6rem + 2vw, 3.2rem) clamp(1.6rem, 1rem + 2vw, 2.6rem) clamp(1.9rem, 1.4rem + 1.5vw, 2.4rem);
	text-align: center;
	background: var(--branco);
	/* Canto chanfrado: é assim que se corta uma chapa quando o canto vivo
	   estorva. O corte deixa ver o fundo escuro por trás. */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

/* O risco âmbar assenta exactamente sobre a aresta cortada. Fica fora do
   card porque o clip-path do card recortaria qualquer filho. */
.chamada__corte {
	position: absolute; right: -7px; bottom: 14px;
	width: 44px; height: 2px;
	background: var(--amarelo);
	transform: rotate(-45deg);
}
.movimento .chamada__corte { transform: rotate(-45deg) scaleX(0); transform-origin: right center; }
.movimento .chamada__conjunto.visivel .chamada__corte {
	transform: rotate(-45deg) scaleX(1);
	transition: transform 520ms var(--saida) 140ms;
}

.chamada__card h2 { margin: 0 0 1.3rem; color: var(--tinta); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); letter-spacing: -.032em; }
.chamada__regua { height: 1px; margin: 0 0 1.6rem; background: var(--linha); }
.chamada__card .btn { width: 100%; justify-content: center; }

/* O pedido abre no clique. É um <details> e não JavaScript: sem script abre à
   mesma, que é o mesmo contrato do resto do site. O <summary> leva as classes
   do botão e perde o triângulo que os navegadores lhe põem à frente. */
.chamada__pedido > summary { cursor: pointer; list-style: none; }
.chamada__pedido > summary::-webkit-details-marker { display: none; }
.chamada__pedido > summary::marker { content: ""; }

/* Aberto, o botão deixa de ser o âmbar: esse lugar passa a ser do «Enviar
   pedido» lá dentro. Dois botões cheios empilhados não dizem qual é o que
   conta. Continua a ser clicável, para se poder fechar. */
.chamada__pedido[open] > summary { background: none; color: var(--tinta-2); border-color: var(--linha); }
.chamada__pedido[open] > summary:hover { border-color: var(--amarelo); color: var(--amarelo-escuro); }

/* O cartão é centrado; o formulário lá dentro não pode ser. Um campo com o
   rótulo ao meio lê-se mal, e é dos sinais mais reconhecíveis de um bloco que
   foi encaixado onde calhou. */
.chamada__form { margin-top: 1.5rem; text-align: left; }
.movimento .chamada__pedido[open] .chamada__form { animation: entrar-lista var(--t-estado) var(--saida) both; }

.chamada__email {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	margin-top: 1rem;
	font-size: .92rem; font-weight: 600; color: var(--tinta-2);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
	text-decoration-color: rgba(69,77,88,.35);
	transition: color var(--t), text-decoration-color var(--t);
}
.chamada__email:hover { color: var(--tinta); text-decoration-color: var(--amarelo); }

/* ---------------------------------------------------------------- rodapé */
.rodape { background: var(--preto); color: rgba(255,255,255,.62); font-size: .92rem; padding-block-start: clamp(3rem, 2rem + 3vw, 4.5rem); }
.rodape__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 2.5rem; padding-bottom: 3rem; }
.rodape h3 { color: var(--branco); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1.1rem; }
.rodape li { margin-bottom: .55rem; }
.rodape a:hover { color: var(--amarelo); }
/* A morada é um <address>, que o navegador põe em itálico por omissão — aqui
   é informação de contacto, não citação. */
.rodape address { font-style: normal; margin-top: 1rem; line-height: 1.75; }
.rodape__logo { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.rodape__logo svg { width: 34px; height: 34px; }
.rodape__logo b { font-family: var(--serif); font-size: 1.3rem; color: var(--branco); }
.rodape__fim { border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0; font-size: .82rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.rodape__fim p { margin: 0; }
/* A assinatura é o único link do rodapé que sai do site, e num rodapé onde
   tudo é cinzento igual ninguém adivinha que se pode clicar. Leva a cor da
   marca — 9:1 de contraste sobre o preto — e o sublinhado do resto do site,
   para não depender só da cor. */
.rodape__agartha { color: var(--amarelo); }
.rodape__agartha:hover { color: var(--amarelo-claro); }

/* ------------------------------------------------------------- responsivo */
@media (max-width: 900px) {
	.duas-colunas, .servicos { grid-template-columns: 1fr; }
	.servico--principal { grid-template-columns: 1fr; }
	.servico--principal .servico__corpo { padding-top: 1.8rem; }
	.servico--principal .foto { min-height: 220px; }
	.menu { display: none; }
	.burger { display: block; }
	.cabecalho .btn { display: none; }
	.menu.aberto {
		display: flex; flex-direction: column; gap: 0;
		position: absolute; top: 100%; left: 0; right: 0;
		padding: .5rem clamp(1.25rem, 1rem + 1vw, 2rem) 1.25rem;
		background: var(--preto-2);
	}
	.menu.aberto > li > a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}
@media (max-width: 820px) {
	.chamada .wrap { grid-template-columns: 1fr; }
	.chamada__acoes { border-left: 0; padding-left: 0; border-top: 1px solid rgba(16,17,20,.24); padding-top: 1.75rem; align-items: flex-start; }
	.chamada__acoes .btn { align-self: stretch; }
}
@media (max-width: 560px) {
	.heroi__acoes .btn, .chamada .btn { width: 100%; justify-content: center; }
	.montagem { grid-template-columns: 1fr; }
	.montagem .foto:first-child { grid-row: auto; aspect-ratio: 4/3; }
}
/* Movimento reduzido: sai o deslocamento espacial, fica a opacidade e o
   feedback de estado, que continuam a transmitir significado. */
@media (prefers-reduced-motion: reduce) {
	.movimento .tiras::before { transform: scaleX(1); transition: none; }
	.movimento .tiras.entrou .tira { animation: none; clip-path: none; }
	.movimento [data-lista] > *, .movimento [data-lista].visivel > * { opacity: 1; animation: none; transform: none; }
	.ligacao:hover svg { transform: none; }
}

/* ==========================================================================
   CATÁLOGO
   Acrescentado a 16/09/2026, quando os produtos passaram do painel para a
   frente do site. Segue a gramática do resto: uma cor de acento, arestas
   vivas, movimento só onde significa alguma coisa.
   ========================================================================== */

/* -------------------------------------------- menu de categorias (submenu) */
.menu > li { position: relative; }
.menu .tem-submenu > a { padding-right: 1.3rem; }

.menu__seta {
	position: absolute; top: 50%; right: -.25rem; transform: translateY(-50%);
	display: grid; place-items: center;
	padding: .35rem; background: none; border: 0; cursor: pointer;
	color: rgba(255,255,255,.8);
	transition: color var(--t), transform var(--t);
}
.menu__seta:hover { color: var(--amarelo); }
.tem-submenu:hover .menu__seta, .tem-submenu.aberto .menu__seta { color: var(--amarelo); }

.submenu {
	position: absolute; top: 100%; left: -1.1rem; z-index: 50;
	min-width: 268px; padding: .45rem 0;
	background: var(--preto-2);
	border-top: 3px solid var(--amarelo);
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
	/* Fechado por omissão, e invisível ao teclado enquanto o estiver. */
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--t-estado) var(--saida), transform var(--t-estado) var(--saida), visibility var(--t-estado);
}
.tem-submenu:hover .submenu,
.tem-submenu:focus-within .submenu,
.tem-submenu.aberto .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu a {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: .5rem 1.2rem;
	font-size: .86rem; color: rgba(255,255,255,.78);
	transition: background var(--t), color var(--t);
}
.submenu a:hover { background: rgba(240,163,42,.1); color: var(--amarelo); }
.submenu__conta { font-size: .76rem; color: rgba(255,255,255,.38); font-variant-numeric: tabular-nums; }
.submenu__todos { margin-bottom: .3rem; padding-bottom: .3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.submenu__todos a { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amarelo); }
.submenu__filhas a { padding-left: 2.2rem; font-size: .8rem; color: rgba(255,255,255,.55); }

/* --------------------------------------------------------------- migalhas */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .8rem; color: var(--tinta-3); }
.migalhas a { color: var(--tinta-3); }
.migalhas a:hover { color: var(--amarelo-escuro); }
.migalhas svg { opacity: .45; flex: none; }
.migalhas [aria-current] { color: var(--tinta); }

/* --------------------------------------------------- cabeçalho de página */
.pagina-cabeca {
	background: var(--cinza);
	border-bottom: 1px solid var(--linha);
	padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.25rem, 1rem + 1vw, 2rem);
}
.pagina-cabeca h1 { font-size: clamp(1.8rem, 1.35rem + 2vw, 2.5rem); margin: .7rem 0 .45rem; }
.pagina-cabeca p { max-width: 68ch; margin: 0; color: var(--tinta-2); }

/* ------------------------------------------------------ grelha da página */
.catalogo { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 2vw, 2.75rem); align-items: start; }

/* ---------------------------------------------------------------- filtros */
.filtros { position: sticky; top: 100px; background: var(--branco); border: 1px solid var(--linha); }
.filtros__grupo { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--linha); }
.filtros__grupo:last-child { border-bottom: 0; }
.filtros h2 { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: .85rem; }
.filtros li { margin-bottom: .42rem; }
.filtros li:last-child { margin-bottom: 0; }
.filtros__grupo > ul > li > a { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .9rem; color: var(--tinta-2); transition: color var(--t); }
.filtros a:hover { color: var(--amarelo-escuro); }
.filtros .activo > a { color: var(--amarelo-escuro); font-weight: 600; }
.filtros__conta { font-size: .78rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.filtros__filhas { margin: .4rem 0 .65rem .15rem; padding-left: .8rem; border-left: 1px solid var(--linha); }
.filtros__filhas a { font-size: .84rem; color: var(--tinta-3); }

.procura { display: flex; }
.procura input {
	flex: 1; min-width: 0; padding: .6rem .7rem;
	font: inherit; font-size: .88rem;
	background: var(--branco); border: 1px solid var(--linha); border-right: 0;
}
.procura button { flex: none; display: grid; place-items: center; padding: 0 .8rem; background: var(--preto); color: var(--branco); border: 0; cursor: pointer; transition: background var(--t), color var(--t); }
.procura button:hover { background: var(--amarelo); color: var(--preto); }

/* ------------------------------------------------------------- resultados */
.barra-resultados { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .9rem; padding-bottom: 1rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--linha); }
.barra-resultados p { margin: 0; font-size: .88rem; color: var(--tinta-3); }
.barra-resultados strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 1.6rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .3rem .3rem .65rem; font-size: .78rem; color: var(--tinta-2); background: var(--cinza); border: 1px solid var(--linha); }
.chip a { display: grid; place-items: center; padding: .15rem; color: var(--tinta-3); }
.chip a:hover { color: var(--amarelo-escuro); }

.paginacao { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: 2.5rem; }
.paginacao a, .paginacao span { min-width: 42px; padding: .5rem .55rem; text-align: center; font-size: .88rem; font-variant-numeric: tabular-nums; color: var(--tinta-2); border: 1px solid var(--linha); transition: border-color var(--t), color var(--t); }
.paginacao a:hover { border-color: var(--amarelo); color: var(--amarelo-escuro); }
.paginacao .actual { background: var(--preto); border-color: var(--preto); color: var(--branco); }
.paginacao .vazia { border-color: transparent; color: var(--tinta-3); }

/* Estado vazio: diz o que fazer a seguir, e nao so que nao ha nada. */
.vazio { padding: clamp(2rem, 1.5rem + 2vw, 3.25rem); text-align: center; background: var(--cinza); border: 1px dashed var(--linha); }
.vazio h2 { font-size: 1.2rem; margin-bottom: .55rem; }
.vazio p { max-width: 54ch; margin: 0 auto 1.4rem; color: var(--tinta-3); }

/* ------------------------------------------------------ cartão de produto */
.produto__ligacao-foto { display: block; }
.produto h3 a { color: inherit; transition: color var(--t); }
.produto h3 a:hover { color: var(--amarelo-escuro); }
.produto:hover { border-color: var(--amarelo); box-shadow: 0 10px 28px rgba(16,17,20,.07); }

/* Fotografia verdadeira: sai a trama e a legenda do marcador. */
.foto--cheia { background: var(--cinza); }
.foto--cheia::before, .foto--cheia::after { content: none; }
.foto--cheia img { display: block; width: 100%; height: 100%; object-fit: cover; }

.selo--recondicionado { background: #E6EFF6; color: #12496E; }

/* ------------------------------------------------------- ficha de produto */
.ficha { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); align-items: start; }
.ficha h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); margin-bottom: .6rem; }
.ficha__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.ficha__marca { font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--amarelo-escuro); }
.ficha__resumo { font-size: 1.05rem; color: var(--tinta-2); }
.ficha__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linha); }

.galeria__miniaturas { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: .6rem; margin-top: .6rem; }
.galeria__miniaturas button { padding: 0; aspect-ratio: 4/3; overflow: hidden; background: none; border: 1px solid var(--linha); cursor: pointer; transition: border-color var(--t); }
.galeria__miniaturas button:hover { border-color: var(--amarelo); }
.galeria__miniaturas button[aria-current="true"] { border-color: var(--amarelo); }
.galeria__miniaturas img { display: block; width: 100%; height: 100%; object-fit: cover; }

.especificacoes { width: 100%; border-collapse: collapse; margin: 1.6rem 0 0; }
.especificacoes th, .especificacoes td { padding: .7rem .9rem; text-align: left; font-size: .92rem; vertical-align: top; border-bottom: 1px solid var(--linha); }
.especificacoes th { width: 38%; font-weight: 600; color: var(--tinta-2); background: var(--cinza); }
.especificacoes tr:first-child th, .especificacoes tr:first-child td { border-top: 1px solid var(--linha); }

@media (max-width: 1000px) {
	.catalogo { grid-template-columns: 1fr; }
	.filtros { position: static; }
	.ficha { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	/* No telemovel o menu e uma coluna e nao ha hover: o submenu so abre pelo
	   botao, e por isso o hover e o focus-within saem de cena aqui. */
	.menu .submenu {
		position: static; display: none;
		min-width: 0; padding: .2rem 0 .7rem;
		background: transparent; border-top: 0; box-shadow: none;
		opacity: 1; visibility: visible; transform: none; transition: none;
	}
	.menu .tem-submenu:hover .submenu, .menu .tem-submenu:focus-within .submenu { display: none; }
	.menu .tem-submenu.aberto .submenu { display: block; }
	.menu__seta { right: 0; padding: .85rem .5rem; }
	.tem-submenu.aberto .menu__seta { transform: translateY(-50%) rotate(180deg); }
	.submenu a { padding-left: 0; }
	.submenu__filhas a { padding-left: 1rem; }
}

/* ==========================================================================
   PEDIDO DE ORÇAMENTO
   Acrescentado a 17/09/2026. Sem preços no site, este formulário é o fim de
   todo o percurso: é aqui que uma visita se torna contacto comercial.
   ========================================================================== */

.aviso { background: #1C2B1F; color: #BFE6C6; border-bottom: 3px solid #4C9A5F; }
.aviso .wrap { display: flex; align-items: center; gap: .7rem; padding-block: .85rem; }
.aviso p { margin: 0; font-size: .92rem; font-weight: 500; }
.aviso svg { flex: none; }
.aviso--erro { background: #2B1C1C; color: #F0C2C2; border-bottom-color: #B4483F; }

.orcamento { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 1rem + 2.5vw, 3.25rem); align-items: start; }
.orcamento__intro h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: .7rem; }
.orcamento__intro p { color: var(--tinta-2); }

/* A máquina a que o pedido diz respeito, dita antes de se escrever qualquer
   coisa: ninguém deve ter de subir a página para confirmar o que está a pedir. */
.orcamento__maquina { display: flex; flex-direction: column; gap: .15rem; margin: 1.4rem 0; padding: .9rem 1.1rem; background: var(--branco); border-left: 3px solid var(--amarelo); }
.orcamento__maquina span { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.orcamento__maquina b { font-size: 1.02rem; color: var(--tinta); }
.orcamento__alternativa { font-size: .9rem; }

.orcamento__form { background: var(--branco); border: 1px solid var(--linha); padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.form-orcamento .campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1.1rem; }
.form-orcamento .campo { margin-bottom: 1.1rem; }
.form-orcamento label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 600; color: var(--tinta); }
.form-orcamento input[type="text"], .form-orcamento input[type="email"], .form-orcamento input[type="tel"], .form-orcamento textarea {
	width: 100%; padding: .7rem .8rem;
	font: inherit; font-size: .94rem; color: var(--tinta);
	background: var(--branco); border: 1px solid var(--linha);
	transition: border-color var(--t);
}
.form-orcamento input:focus, .form-orcamento textarea:focus { border-color: var(--amarelo); }
.form-orcamento textarea { resize: vertical; min-height: 120px; }
.form-orcamento [aria-invalid="true"] { border-color: #B4483F; }

.form-orcamento .campo--caixa label { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .86rem; color: var(--tinta-2); line-height: 1.5; }
.form-orcamento .campo--caixa input { flex: none; margin-top: .15rem; width: 17px; height: 17px; accent-color: var(--amarelo); }

.form-orcamento .erro { margin: .35rem 0 0; font-size: .82rem; color: #B4483F; }
.form-orcamento .erro--geral { margin: 0 0 1.2rem; padding: .8rem 1rem; background: #FDF2F1; border: 1px solid #F0C2C2; }

/* Armadilha de mel: fora do ecrã, fora do teclado, fora dos leitores de ecrã.
   `display: none` seria pior — há robôs que ignoram campos escondidos assim. */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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