/* ============================================================
   Rúben Marques — Climatização · fichas de serviço
   (servicos/*.html) — breves, claras, fotográficas.
   ============================================================ */

.fs-body{ background:var(--nuvem); }

/* ---------- navbar: branca sobre a foto do hero, sólida ao rolar ---------- */
.fs-body .nav{ opacity:1; pointer-events:auto; color:#fff; }
/* o selo é sempre visível aqui (não espera pelo scroll como na home), mas o BRANCO
   só vale enquanto a barra está por cima da foto — em .nav--solida o fundo é claro
   e o branco desaparecia (selo + nome invisíveis a partir do 1.º scroll). */
.fs-body .nav .nav-marca{ opacity:1; pointer-events:auto; }
.fs-body .nav:not(.nav--solida) .nav-marca{ color:#fff; }
.fs-body .nav--solida .nav-marca{ color:var(--tinta); }
.fs-body .nav:not(.nav--solida) .nav-nome,
.fs-body .nav:not(.nav--solida) .nav-links a,
.fs-body .nav:not(.nav--solida) .nav-tel{
  color:#fff;
  text-shadow:0 1px 12px rgba(15,35,65,.45);
}
.fs-body .nav--solida{ color:var(--tinta); }
.fs-body .nav:not(.nav--solida) .nav-links a.e-atual{
  text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px;
}
.fs-body .nav--solida .nav-links a.e-atual{
  text-decoration:underline; text-underline-offset:6px;
  text-decoration-thickness:1px; color:var(--azul); opacity:1;
}

/* ---------- hero: a foto do serviço ---------- */
.fs-hero{
  position:relative;
  min-height:72svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.fs-hero-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* ⚠️ REFORÇADO a 16-ago-2026, por MEDIÇÃO e não a olho. As heros das 4 fichas
   passaram de imagens geradas (escuras, contrastadas) para fotografia real de
   stock, que é muito mais CLARA — e o scrim antigo, calibrado às outras, deixava
   o H1 branco entre 1,43 e 2,71:1. Falhava até o mínimo de 3:1 do texto grande.
   O gradiente de baixo passa a arrancar mais cedo e a fechar mais escuro; medido
   outra vez depois, nas 4 fichas × desktop e telemóvel, com o H1 escondido para
   ler o fundo por trás dele (medir a caixa com o texto dentro dá sempre 1,0). */
.fs-hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,34,60,.44) 0%, rgba(14,34,60,.1) 32%, rgba(14,34,60,0) 48%),
    linear-gradient(180deg, rgba(14,34,60,0) 12%, rgba(14,34,60,.60) 42%, rgba(14,34,60,.88) 64%, rgba(14,34,60,.94) 100%);
}

/* ---------- páginas de zona: o céu da home em vez da foto do serviço ----------
   O que pinta primeiro é o poster, como .fs-hero-img — é ele o LCP. O vídeo entra por
   cima depois do load (js/ceu-hero.js) e revela-se com um fade; enquanto não tocar,
   fica transparente e vê-se o poster por baixo. Sem salto, sem frame preto. */
.fs-hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s var(--ease);
}
.fs-hero-video.a-tocar{ opacity:1; }
/* O céu é muito mais claro do que as fotos de obra: com o scrim das fichas, o texto
   branco perdia a base. Aqui o fundo escurece mais e mais cedo, sem tapar as nuvens
   do topo — que são o que a marca quer que se veja. */
.fs-hero--ceu .fs-hero-scrim{
  background:
    linear-gradient(180deg, rgba(14,34,60,.30) 0%, rgba(14,34,60,.06) 30%, rgba(14,34,60,0) 46%),
    linear-gradient(180deg, rgba(14,34,60,0) 26%, rgba(14,34,60,.38) 58%, rgba(14,34,60,.74) 100%);
}
/* 🔴 O céu + o texto AO CENTRO (28-ago-2026, medido). Quando o hero da zona passou
   a centrado, o texto saiu da faixa de baixo — onde o gradiente acima chega a 0,74 —
   para o meio do ecrã, onde estava a 0,38 sobre nuvem branca. Resultado medido, com
   o texto escondido e lendo o pixel mais claro por trás: **H1 a 1,80:1** em desktop
   e mobile, pior do que o defeito de 16-ago (1,43–2,71) que motivou este ficheiro.
   O céu é o fundo mais claro do site (pior pixel rgb(193,194,186)): para o H1 branco
   passar 3:1 o fundo tem de descer abaixo de ~149, e para o lede passar 4,5:1 abaixo
   de ~118. Daí um radial centrado no texto, que escurece onde é preciso e deixa as
   nuvens do topo — que é o que a marca quer que se veja — quase intactas.
   ⚠️ Vale só para --zona + --ceu juntos; o --ceu sozinho mantém a calibração antiga. */
/* 🚫 28-ago-2026, FIM DA TARDE — O VÉU DA PÁGINA DE ZONA SAIU, POR ORDEM DELE.
   «Tira o véu do hero das páginas de localização.» É a regra da casa desde 20-ago
   («o hero tem de ficar sem véu. Zero véu.») e a home nunca teve véu nenhum — quem o
   tinha era a ficha de serviço, e a página de zona herdou-o por copiar-lhe a cromagem.

   ⚠️ QUEM VIER A SEGUIR, NÃO O VOLTE A PÔR SEM FALAR COM ELE. O radial que estava aqui
   foi calibrado por medição e resolvia um problema real (H1 a 1,80:1 sobre a nuvem
   branca, contra os 3:1 mínimos). Tirá-lo é decisão dele, com o número em cima da mesa:
   sem véu, quem segura o texto passa a ser o ENQUADRAMENTO do céu mais a sombra densa,
   e isso é uma propriedade do ficheiro de imagem, não do CSS. Trocar o céu obriga a
   medir outra vez.

   O elemento `.fs-hero-scrim` deixou de ser emitido no markup da zona
   (scripts/zonas.mjs). A regra fica aqui só como registo; a das --tipologia, logo
   abaixo, continua viva e é outra decisão. */
.fs-hero-inner{
  position:relative; z-index:1;
  width:min(92vw,1180px);
  margin:0 auto;
  padding:150px 0 clamp(40px,6vh,64px);
}
.fs-migalha{
  font-size:14.5px; font-weight:600;
  letter-spacing:.01em;
  opacity:.92;
  margin-bottom:14px;
}
.fs-migalha a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);
  padding-bottom:1px;
}
.fs-migalha a:hover{ border-bottom-color:#fff; }
.fs-migalha span{ opacity:.75; }
.fs-hero h1{
  font-size:clamp(34px,4.2vw,58px);
  font-weight:600;
  line-height:1.0;
  letter-spacing:-.03em;
  text-wrap:balance;
  max-width:16ch;
  text-shadow:var(--sombra-texto);
}
.fs-lede{
  margin-top:14px;
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.5;
  max-width:52ch;
  /* ⚠️ era opacity:.95 — sobre as heros novas (stock claro) isso custava contraste
     num texto de 15–19px, que precisa de 4,5:1 e não dos 3:1 do título. Branco puro
     e o resto resolve-se no véu, não a apagar o texto. */
  text-shadow:0 1px 14px rgba(15,35,65,.55);
}
.fs-acoes{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:26px;
}
.fs-tel{ color:#fff; font-size:15.5px; text-decoration:none; opacity:.92; }
.fs-tel strong{ font-weight:600; }
.fs-tel:hover{ opacity:1; }

/* entrada do hero em cascata */
[data-entra]{ opacity:0; transform:translateY(18px); }
.fs-body.pronto [data-entra]{
  animation:fs-entra .8s var(--ease) both;
  animation-delay:calc(var(--i,0) * .12s + .15s);
}
@keyframes fs-entra{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ---------- reveals das secções ---------- */
.fs-rev [data-rev]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0s);
}
.fs-rev.revelada [data-rev]{ opacity:1; transform:none; }

/* ---------- corpo comum ---------- */
.fs-sec{
  padding:clamp(56px,8vh,96px) 24px 0;
}
/* 🔴 29-ago — O AR ANTES DAS BANDAS DE LARGURA INTEIRA. Queixa dele com o ecrã à frente:
   «o texto está muito perto da próxima secção, quase colado. Tens de dar um bocado de ar.»
   Tinha razão e a causa é estrutural: a `.fs-sec` tem `padding-bottom:0` de propósito —
   quem faz o intervalo é o `padding-top` da secção seguinte. Isso funciona entre duas
   `.fs-sec`, e falha exactamente quando a seguinte é uma banda a sangrar (a calculadora de
   BTU, a prova azul), porque essas trazem o fundo consigo e o intervalo deixa de existir:
   a última linha de texto encosta ao azul sem um pixel entre as duas.
   Aqui o ar é dado por quem vem a seguir, e não pela `.fs-sec` — assim vale para qualquer
   ordem em que estas secções sejam postas, que é o que já mudou duas vezes esta semana.

   ⚠️ E é por SECÇÃO e não por PAR: à primeira escrevi `.fs-sec + .sec-btu` e companhia, e
   deixei de fora o caso que estava mesmo no ecrã dele — a `.fs-negocios` seguida da banda
   dos BTU, porque a `.fs-negocios` não é uma `.fs-sec`. Uma lista de pares tem de crescer
   de cada vez que nasce uma secção; a banda pedir o seu próprio ar não tem esse problema. */
.fs-body .folha .sec-btu{ margin-top:clamp(48px,7vh,84px); }

/* 🔴 29-ago, FIM DO DIA — O RESPIRO DA HOME NAS PÁGINAS DE ZONA E NAS CÉLULAS.
   Ordem dele: «o maior problema é a falta de ar. A home sabe muito bem de consumir porque
   tem imenso ar e permite respirar. Quero o mesmo aqui.»
   Não era impressão — está medido. A home dá a TODAS as secções `--respiro`, que é
   clamp(76px,9vw,128px), em cima e em baixo: 256px entre duas secções num ecrã de 1440.
   A `.fs-sec` das fichas dá clamp(56px,8vh,96px) em cima e ZERO em baixo: 72px. É três
   vezes e meia menos ar, e é por isso que estas páginas se leem apertadas ao lado da home.

   ⚠️ O gancho é `.folha`, e não `.fs-sec`. As dezasseis fichas de serviço não a têm — só
   as 24 zonas e as 108 células — e as fichas são a via de outra sessão. Mexer na `.fs-sec`
   toda mudaria páginas que não são minhas para mexer.

   O `padding-bottom` deixa de ser zero: com ele, o intervalo passa a existir mesmo quando
   a secção seguinte traz o fundo consigo (a banda azul dos BTU, a prova), que era o
   problema do «texto colado» de manhã. A regra do `.sec-btu` acima fica como reforço para
   o caso de a ordem voltar a mudar. */
.fs-body .folha .fs-sec{
  padding-top:var(--respiro);
  padding-bottom:var(--respiro);
}
/* as bandas a sangrar (BTU, prova, negócios, sobre) trazem o seu próprio fundo e por isso
   o respiro delas é INTERNO — senão somava-se ao das vizinhas e abria um vazio ao dobro. */
.fs-body .folha .fs-negocios{
  padding-top:var(--respiro);
  padding-bottom:var(--respiro);
}
.fs-sec .sec-inner{ max-width:1180px; margin:0 auto; }
.fs-sec h2{
  font-size:clamp(24px,2.6vw,34px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
}

/* o que fica feito */
.fs-inclui-lista{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 clamp(28px,4vw,56px);
  margin-top:clamp(20px,3vh,32px);
}
.fs-inclui-lista li{
  border-top:1px solid var(--hairline);
  padding:18px 0 20px;
}
/* O `h4` entrou a 29-ago e é SÓ estrutura, não desenho: nas páginas de zona os títulos
   dos itens de terreno («O prédio antigo não tem por onde passar») são cabeçalhos a
   sério, e estavam em <strong>. Um <strong> é ênfase visual e não conta como cabeçalho
   — nem para a Google nem para quem navega com leitor de ecrã por títulos. Passaram a
   <h4> com exactamente o mesmo aspeto. Nas fichas de serviço continua <strong>. */
.fs-inclui-lista strong,
.fs-inclui-lista h4{
  display:block;
  font-weight:600;
  font-size:17px;
  margin-bottom:4px;
}
.fs-inclui-lista p{
  color:var(--tinta-60);
  font-size:15.5px;
  line-height:1.5;
  max-width:46ch;
}

/* como trabalhamos */
.fs-passos-lista{
  list-style:none;
  counter-reset:passo;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(20px,3vh,32px);
}
.fs-passos-lista li{
  counter-increment:passo;
  border-top:1px solid var(--hairline);
  padding-top:16px;
}
.fs-passos-lista li::before{
  content:'0' counter(passo);
  display:block;
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;
  color:var(--azul);
  margin-bottom:8px;
}
.fs-passos-lista h3{
  font-size:17px; font-weight:600;
  margin-bottom:4px;
}
.fs-passos-lista p{
  color:var(--tinta-60);
  font-size:15px;
  line-height:1.5;
}

/* prova: tinta, a review + as marcas */
.fs-prova{
  margin-top:clamp(64px,9vh,110px);
  background:var(--tinta);
  color:var(--nuvem);
  padding:clamp(56px,8vh,92px) 24px;
}
.fs-prova .sec-inner{
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.fs-prova blockquote{
  border:0; margin:0;
  font-size:clamp(19px,2vw,25px);
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.fs-prova figcaption{
  margin-top:14px;
  font-size:15px;
  color:rgba(247,250,252,.72);
}
.fs-prova-estrelas{
  color:var(--quente);
  letter-spacing:3px;
  font-size:15px;
  margin-bottom:12px;
  display:block;
}
.fs-prova-dados{
  display:flex; flex-direction:column; gap:22px;
  border-left:1px solid rgba(247,250,252,.16);
  padding-left:clamp(24px,3vw,48px);
}
.fs-prova-num strong{
  display:block;
  font-size:clamp(30px,3vw,40px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1;
}
.fs-prova-num span{ color:rgba(247,250,252,.72); font-size:15px; }
.fs-prova-marcas p{
  font-size:14.5px;
  color:rgba(247,250,252,.72);
  margin-bottom:12px;
}
.fs-prova-marcas .fs-logos{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
/* ⚠️ as classes .marca do site.css nascem com opacity:0 acopladas ao reveal do Sobre da home */
.fs-prova .marca{ opacity:1; transform:none; color:rgba(247,250,252,.82); display:inline-flex; }
.fs-prova .marca svg{ fill:currentColor; }
.fs-prova .marca-mitsubishi svg{ height:26px; width:auto; }
.fs-prova .marca-daikin svg{ height:17px; width:auto; }

/* ---------- a secção azul das ZONAS: título, valores, avaliação e chapas ----------
   29-ago-2026, ordem dele. Era só a avaliação e os dois números; passou a ter três
   andares. O `--zona` devolve o `.sec-inner` a bloco: na prova das fichas ele é uma
   grelha de duas colunas, e com o título e os valores lá dentro estes viravam células. */
.fs-prova--zona .sec-inner{ display:block; }
.fs-prova-tit{
  font-size:clamp(24px,2.6vw,34px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.1;
  text-wrap:balance;
  max-width:24ch;
}
/* os três valores. Aqui são AFIRMAÇÕES e não botões: no /sobre a pessoa carrega para ver a
   descrição, o que ali faz sentido porque é o hero e o espaço é curto. No meio de uma
   página de zona, um widget a pedir cliques para revelar uma linha de texto é atrito a
   troco de nada — e obrigava a JS novo. Ficam os três abertos, lado a lado. */
.fs-prova-valores{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(20px,3vw,44px);
  margin-top:clamp(28px,4vh,44px);
}
.fs-prova-val h3{
  font-size:var(--t-destaque);
  font-weight:600;
  letter-spacing:-.01em;
  padding-bottom:10px;
  border-bottom:1px solid rgba(247,250,252,.22);
}
.fs-prova-val p{
  margin-top:12px;
  font-size:var(--t-corpo-lg);
  line-height:1.55;
  color:rgba(247,250,252,.76);
}
.fs-prova-duas{
  margin-top:clamp(40px,6vh,64px);
  padding-top:clamp(32px,4vh,48px);
  border-top:1px solid rgba(247,250,252,.16);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
/* os números descem para dentro da figura: em coluna própria disputavam o espaço com as
   chapas e a secção passava a ter três colunas de peso igual, que não tem hierarquia. */
.fs-prova--zona .fs-prova-dados{
  border-left:0; padding-left:0;
  margin-top:clamp(26px,4vh,38px);
  flex-direction:row; gap:clamp(28px,4vw,52px); flex-wrap:wrap;
}
/* as chapas do /sobre. No /sobre são filetes claros sobre creme; aqui invertem-se para o
   azul e é só isso que muda — a forma (uma frase por linha, filete entre elas) é a mesma,
   e é de propósito: quem vem do /sobre reconhece-as. */
.fs-prova-chapas{ list-style:none; }
.fs-prova-chapas li{
  border-top:1px solid rgba(247,250,252,.16);
  padding:16px 0;
  font-size:var(--t-corpo-lg);
  font-weight:500;
  line-height:1.5;
}
.fs-prova-chapas li:last-child{ border-bottom:1px solid rgba(247,250,252,.16); }

/* ---------- os negócios: dez tipos de espaço, cartão com o nome lá dentro ----------
   O nome vive SOBRE a fotografia e não por baixo — pedido dele para o menu («temos os
   cartões com a escrita lá dentro. Gostava que fizesses o mesmo para as soluções para
   negócios») e a mesma razão vale aqui: com o nome fora, dez cartões viram uma grelha de
   dez legendas e a fotografia passa a decoração. O degradê é o que garante o contraste —
   as fotos são de espaços claros e o branco sozinho não aguentava. */
.fs-negocios .sec-inner{ max-width:1180px; margin:0 auto; }
.fs-negocios{ padding:clamp(56px,8vh,96px) 24px 0; }
.fs-negocios h2{
  font-size:clamp(24px,2.6vw,34px);
  font-weight:600; letter-spacing:-.02em; line-height:1.1;
}
.fs-neg-lede{
  margin-top:14px;
  max-width:62ch;
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--tinta-60);
}
.fs-neg-lista{
  margin-top:clamp(26px,4vh,40px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(12px,1.4vw,18px);
}
.fs-neg{
  position:relative;
  display:block;
  aspect-ratio:3/2;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  background:#0d2138;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s;
}
.fs-neg img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.fs-neg::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,24,42,0) 34%, rgba(9,24,42,.74) 100%);
}
/* 🔴 29-ago-2026 — era `.fs-neg span` e passou a `.fs-neg > span`. Enquanto o cartão só
   tinha o nome dava no mesmo; no dia em que o hover passou a abrir uma descrição por baixo
   do título, este seletor apanhou TODOS os spans lá dentro e pôs cada um em
   `position:absolute; left:14px; right:14px`. Resultado: a descrição deixava de estar
   dentro do nome, ia parar por cima dele (visível no telemóvel, os dois textos sobrepostos)
   e no PC ficava numa coluna de 128px — quatro linhas, 79px de altura, cortadas pelo
   `overflow:hidden` do cartão. O `>` prende a regra ao rótulo, que é o que ela sempre quis. */
.fs-neg > span{
  position:absolute; left:14px; right:14px; bottom:12px;
  z-index:1;
  color:#fff;
  font-size:var(--t-corpo);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.005em;
  text-shadow:0 1px 3px rgba(8,20,38,.5);
}
@media (hover:hover){
  .fs-neg:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(10,25,45,.55); }
  .fs-neg:hover img{ transform:scale(1.05); }
}
.fs-neg:focus-visible{ outline:2px solid var(--quente); outline-offset:3px; }

/* perguntas diretas — lista à esquerda, CTA + contacto à direita */
.fs-faq-duas{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
  margin-top:clamp(18px,2.6vh,28px);
}
.fs-faq-lista{
  border-top:1px solid var(--hairline);
}
.fs-faq-cta{
  border-top:1px solid var(--hairline);
  padding-top:24px;
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.fs-faq-cta p{
  color:var(--tinta-60);
  font-size:15.5px;
  line-height:1.5;
  max-width:34ch;
}
.fs-faq-tel{ color:var(--tinta-60); font-size:15.5px; text-decoration:none; }
.fs-faq-tel strong{ font-weight:600; color:var(--tinta); }
.fs-faq-tel:hover{ color:var(--tinta); }
.fs-faq-item{ border-bottom:1px solid var(--hairline); }
.fs-faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  background:none; border:0; cursor:pointer;
  text-align:left;
  padding:18px 2px;
  font:inherit; font-weight:600; font-size:16.5px;
  color:var(--tinta);
}
.fs-faq-mais{
  position:relative;
  width:16px; height:16px; flex:0 0 auto;
  transition:transform .4s var(--ease);
}
.fs-faq-mais::before, .fs-faq-mais::after{
  content:'';
  position:absolute; left:0; top:7px;
  width:16px; height:2px;
  background:var(--azul);
}
.fs-faq-mais::after{ transform:rotate(90deg); }
.fs-faq-item.aberto .fs-faq-mais{ transform:rotate(45deg); }
/* ⚠️ `grid-template-rows:0fr` esconde À VISTA mas NÃO tira da ordem de tabulação: os links
   dentro de respostas FECHADAS continuavam a apanhar o teclado — paragens invisíveis (WCAG
   2.4.7). `visibility:hidden` tira-os; o atraso deixa a animação de fecho ver-se. */
.fs-faq-corpo{
  display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows .45s var(--ease), visibility 0s linear .45s;
}
.fs-faq-item.aberto .fs-faq-corpo{ grid-template-rows:1fr; visibility:visible; transition-delay:0s; }
.fs-faq-txt{ overflow:hidden; }
.fs-faq-txt p{
  color:var(--tinta-60);
  font-size:15.5px;
  line-height:1.6;
  max-width:68ch;
  padding:0 2px 20px;
}

/* malha interna: os outros serviços — última secção antes do rodapé */
.fs-outros{
  padding-top:clamp(48px,7vh,80px);
  padding-bottom:clamp(84px,11vh,130px);
}
.fs-outros-nota{
  font-size:15px; color:var(--tinta-60);
  margin-bottom:16px;
}
/* segundo grupo (guias) — sem isto o rótulo cola-se aos cartões de cima */
.fs-outros-guias{ margin-top:clamp(28px,3.6vw,40px); }
.fs-outros-lista{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
}
/* A lista densa — os concelhos irmãos nas páginas de zona (ver o comentário no
   scripts/zonas.mjs). Dezassete cartões de largura inteira eram o maior bloco da página;
   à largura do nome cabem quatro por linha e a seta sai, que numa pastilha destas era
   dezassete setas a dizer o mesmo. A pastilha continua a ser a mesma `.fs-outro`. */
.fs-outros-lista--denso{
  display:flex; flex-wrap:wrap;
  gap:10px;
}
.fs-outros-lista--denso .fs-outro{
  padding:11px 16px;
  font-size:15px;
  border-radius:999px;
}
.fs-outros-lista--denso .fs-outro::after{ content:none; }
.fs-outro{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:16px 18px;
  text-decoration:none;
  color:var(--tinta);
  font-weight:600;
  font-size:15.5px;
  background:#fff;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.fs-outro::after{
  content:'→';
  color:var(--azul);
  transition:transform .4s var(--ease);
}
.fs-outro:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(18,36,48,.1);
}
.fs-outro:hover::after{ transform:translateX(4px); }

/* ---------- a pastilha que leva ao índice das zonas ----------
   🔴 29-ago-2026. As vinte e quatro zonas passaram a oito mais esta (ver blocoZonas() no
   scripts/zonas.mjs). Ela tem de se ler como OUTRA coisa: as oito são destinos, esta é a
   porta para o resto. Sem diferença nenhuma, lê-se como o nono concelho — e a pessoa
   procura «Ver todas as zonas» no mapa.

   A distinção é sóbria de propósito: fundo do papel em vez de branco, contorno sem
   preenchimento. Nada de cor de marca aqui — isto é navegação de rodapé, não um CTA, e
   pintá-la de laranja punha-a a competir com o «Pedir orçamento» que está logo acima. */
.fs-outro--hub{
  background:transparent;
  border-style:dashed;
  color:var(--tinta-60);
}
.fs-outro--hub:hover{ color:var(--tinta); border-style:solid; }

/* ---------- o hero da página de zona ----------
   Segue o molde da CASA (home, /servicos, /sobre): fotografia de fundo e a tipografia
   CENTRADA ao meio, com o CTA no meio. Não o da ficha de serviço, que é encostado em
   baixo à esquerda e leva migalha. Ordem dele a 28-ago, a olhar para a página:
   «isto tu copiaste do Nura… o nosso site tem outro estilo de heroes».

   🔴 O `padding` tem mais folga em BAIXO do que em cima, e não é gosto: é o que impede
   a `.folha-orla` (88px de degradê branco, css/site.css) de passar por cima do CTA. Era
   o defeito que ele viu primeiro, «as nuvens estão em cima do CTA». A `.sv-hero` já usa
   e explica o mesmo truque. */
.fs-hero--zona{
  align-items:center; justify-content:center;
  text-align:center;
  min-height:clamp(470px, calc(100svh - 78px), 980px);
}
/* 🔴 A tipologia é MAIS BAIXA que a zona de propósito, e não é gosto: ordem dele a
   28-ago, a olhar para a de armazéns — «o hero tá muito grande; no Sobre nós e nos
   Serviços está levemente cortado, é isso que eu quero». O ponto não é a altura em
   si (o hero da zona e o dos serviços medem os mesmos 822px em 1440×900): é que ali
   se vê qualquer coisa a espreitar no fundo do ecrã, e aqui não se via nada — só
   uma faixa branca lisa. Cortar 100px deixa o título da secção seguinte assomar, que
   é o que diz ao visitante que a página continua. */
.fs-hero--tipologia{
  align-items:center; justify-content:center;
  text-align:center;
  min-height:clamp(440px, calc(100svh - 180px), 880px);
}
.fs-hero--zona .fs-hero-inner,
.fs-hero--tipologia .fs-hero-inner{
  width:min(100%,900px);
  display:flex; flex-direction:column; align-items:center;
  padding:130px 24px 176px;
}
.fs-hero--zona h1,
.fs-hero--tipologia h1{
  font-size:clamp(38px,5.4vw,80px);
  letter-spacing:-.035em;
  max-width:18ch;
}
.fs-hero--zona .fs-lede,
.fs-hero--tipologia .fs-lede{
  margin-top:16px;
  max-width:44ch;
}
.fs-hero--zona .fs-acoes,
.fs-hero--tipologia .fs-acoes{ justify-content:center; margin-top:30px; }

/* O campo aberto no hero da zona (29-ago) — o CTA da home, aqui dentro.
   O `.fs-acoes` é uma linha; com o formulário passa a coluna, senão o campo de 520px e o
   «ou liga» disputavam a mesma linha e o telefone caía sozinho para a direita.
   As `.hero-pedido*` vêm todas do css/site.css: aqui só se arruma o invólucro. */
/* ⚠️ BLOCO e não flex, e a razão é medida: dentro de um flex em COLUNA a `100%` do
   `.hero-pedido` (width:min(100%,520px), do site.css) resolve contra a LINHA do flex e não
   contra o hero. Em coluna encolhia para o texto — 379px onde a home tem 520; a fixar em
   `520px` o telemóvel passava a ter a linha a 520 e o campo saía do ecrã (x:-72).
   Em bloco, a percentagem volta a ser a do contentor e a mesma regra serve os dois. */
/* o `align-self` é o segundo meio desta correcção: o `.fs-hero-inner` é ele próprio um flex
   em coluna centrado, e sem isto o bloco continuava a ser um item a encolher para o texto. */
.fs-hero--zona .fs-acoes--pedido{ display:block; text-align:center; align-self:stretch; }
.fs-hero--zona .fs-acoes--pedido .hero-pedido{ margin:0 auto; }
.fs-hero--zona .fs-acoes--pedido .fs-tel{ display:inline-block; margin-top:20px; }
.fs-hero--zona .hero-pedido-rot{ text-align:center; }

/* ---------- zona SEM VÉU: quem segura o texto é a sombra ----------
   Só `--zona`. A tipologia continua com scrim (é foto de espaço, outra decisão) e não
   pode apanhar esta sombra: sobre um radial a .78 ficava borrada.

   Duas sombras por linha, e as duas fazem trabalho diferente: a curta e opaca é o
   contorno que separa a letra da nuvem branca; a longa e difusa é a mancha que baixa
   o fundo À VOLTA do glifo. Sem véu, é isto mais o enquadramento do céu que sustentam
   a leitura — nada disto se mede no CSS, mede-se na página renderizada. */
.fs-hero--zona h1{
  text-shadow:
    0 1px 2px rgba(10,26,48,.62),
    0 2px 18px rgba(10,26,48,.72),
    0 6px 46px rgba(10,26,48,.58);
}
.fs-hero--zona .fs-lede,
.fs-hero--zona .fs-hero-nota{
  text-shadow:
    0 1px 2px rgba(10,26,48,.70),
    0 2px 14px rgba(10,26,48,.78),
    0 4px 32px rgba(10,26,48,.60);
}
.fs-hero--zona .fs-tel{
  text-shadow:
    0 1px 2px rgba(10,26,48,.70),
    0 2px 14px rgba(10,26,48,.78);
}

/* ---------- páginas de tipologia: a foto do ESPAÇO, centrada ----------
   Herdam a composição da página de zona (é a mesma família: porta de entrada, não
   ficha interna). O que muda é o scrim, e por uma razão medida: na zona o fundo é
   o céu e o texto assenta na parte de baixo; aqui o fundo é a fotografia do espaço
   — que é o que IDENTIFICA a tipologia — e o texto está a MEIO. O scrim das fichas
   (0,94 no rodapé, 0,60 a meio) tapava a foto inteira e deixava um azul lavado que
   não é nem a foto nem o céu.
   🔴 Por isso o escuro aqui é RADIAL, concentrado onde o texto vive: a foto respira
   nos cantos e o H1 mantém a base. Trocar a foto obriga a re-medir o contraste.

   🔴 29-ago-2026, com as fotos de escritório, ginásio e restaurante já montadas: o
   radial estava a 122%×84%, ou seja cobria o ecrã quase todo, e isso não se via
   enquanto as três primeiras fotos eram industriais e frias — o escuro assentava-lhes
   bem. Nestas três não: o sol e a madeira do restaurante, a parede amarela do ginásio
   e o split branco do escritório saíam todos cinzentos. O que ficava não era «foto com
   véu», era «foto sem cor», e a fotografia é o que IDENTIFICA a tipologia.
   A correcção é APERTAR o radial, não aliviá-lo: o centro fica igual (é ele que segura
   o contraste do H1 e da lede), e a queda passa a ser mais curta, para o terço de fora
   da imagem manter a cor. Aliviar o centro era o instinto errado — quem está encostado
   ao mínimo é a LEDE (4,81:1 no telemóvel do alojamento local, mínimo 4,5), não o H1.
   Medido nas seis páginas com o scripts/_olhos-contraste.cjs. */
.fs-hero--tipologia .fs-hero-scrim{
  background:
    linear-gradient(180deg, rgba(14,34,60,.32) 0%, rgba(14,34,60,.11) 26%, rgba(14,34,60,0) 44%),
    radial-gradient(84% 64% at 50% 50%, rgba(14,34,60,.80) 0%, rgba(14,34,60,.68) 40%, rgba(14,34,60,.36) 68%, rgba(14,34,60,.10) 88%, rgba(14,34,60,0) 100%),
    linear-gradient(180deg, rgba(14,34,60,0) 58%, rgba(14,34,60,.34) 86%, rgba(14,34,60,.52) 100%);
}
/* a linha pequena por baixo do CTA, como na home */
.fs-hero-nota{
  margin-top:22px;
  font-size:14px;
  opacity:.86;
  text-shadow:0 1px 14px rgba(15,35,65,.55);
}
@media (max-width:860px){
  .fs-hero--zona,
  .fs-hero--tipologia{ min-height:clamp(440px, calc(100svh - 64px), 860px); }
  .fs-hero--zona .fs-hero-inner,
  .fs-hero--tipologia .fs-hero-inner{ padding:120px 22px 132px; }

  /* 🔴 AS VOZES NO TELEMÓVEL — a caixa é irmã do miolo, e num flex em linha isso
     partia-a. Medido a 29-ago: 162px de largura encostada ao x=0, ao lado do texto,
     em vez dos 340 que tem no desktop. O site.css já manda `position:static` aqui
     (a regra da home), mas a home também troca o `.hero` para coluna — e a zona é
     `.fs-hero`, que essa regra não apanha. Faltava esta metade.
     A margem de baixo não é folga: é o que mantém as avaliações fora dos 88px de
     degradê branco da `.folha-orla`, que é o mesmo defeito das nuvens em cima do CTA
     que ele apanhou a 28-ago. */
  .fs-hero--zona{ flex-direction:column; justify-content:center; }
  .fs-hero--zona .fs-hero-inner{ padding-bottom:26px; order:1; }
  /* ⚠️ `order` e não trocar a ordem no HTML: no desktop a caixa é ABSOLUTA e a posição
     dela no DOM é indiferente, mas tem de vir antes do miolo para não apanhar o
     `z-index` do texto. Em coluna, sem isto, as avaliações nasciam no topo do hero,
     por baixo da navbar e por cima do H1 — medido: y=0. */
  .fs-hero--zona .hero-vozes{
    position:static; transform:none;
    right:auto; left:auto; top:auto;
    order:2;
    width:100%; margin:0 0 clamp(104px,13svh,132px);
  }
  .fs-hero--zona h1,
  .fs-hero--tipologia h1{ font-size:clamp(32px,8.4vw,42px); }

  /* 🔴 O radial ABRE no telemóvel, e não é inconsistência. Um ecrã de 375 é estreito e
     alto: a mesma elipse de 84%×64% cobre proporcionalmente muito menos do bloco de
     texto, que aqui ocupa quase toda a altura. Medido a 29-ago com o radial apertado:
     H1 do escritório a 3,00, lede do ginásio a 3,68, nota do restaurante a 4,12 — os
     mínimos são 3 e 4,5. Abrir aqui não desfaz o que se ganhou no PC porque o
     «respirar nos cantos» só existe no ecrã grande: no telemóvel o `cover` já corta a
     fotografia ao meio e os cantos que se estavam a salvar nem sequer aparecem.
     ⚠️ Os valores são os do scrim ORIGINAL, o que estava em vigor antes de 29-ago em
     todos os tamanhos. Não são um palpite novo: já tinham sido medidos e passavam à
     folgada no telemóvel. A primeira tentativa de correcção aqui foi 152%×80% a 0,84 e
     mandou o H1 do escritório para 8,29:1 — passa, mas é véu a mais, e véu a mais neste
     hero é exactamente o defeito que se estava a corrigir do outro lado. */
  .fs-hero--tipologia .fs-hero-scrim{
    background:
      linear-gradient(180deg, rgba(14,34,60,.34) 0%, rgba(14,34,60,.12) 26%, rgba(14,34,60,0) 44%),
      radial-gradient(122% 84% at 50% 54%, rgba(14,34,60,.78) 0%, rgba(14,34,60,.58) 46%, rgba(14,34,60,.24) 74%, rgba(14,34,60,.06) 92%),
      linear-gradient(180deg, rgba(14,34,60,0) 56%, rgba(14,34,60,.42) 86%, rgba(14,34,60,.62) 100%);
  }
}

/* ---------- o fecho «De que serviço precisas?» nas páginas de zona ----------
   A secção vem lida da home (scripts/zonas.mjs) e o texto dela é BRANCO. Na home isso
   funciona porque ela vive fora do `<main>`, com o `#ceu` fixo por trás. A página de
   zona não tem esse céu fixo — o céu dela está preso ao hero, lá em cima.
   🔴 Sem esta regra, o «De que serviço precisas?» é branco sobre branco. Não é teoria:
   foi assim que saiu da primeira geração, e via-se um título fantasma e dois ícones de
   contacto cinzentos a boiar. O poster é o mesmo do hero — já está em cache, não custa
   pedido nenhum. O `::before` da própria secção (radial escuro, site.css) continua a
   fazer o resto do contraste. */
.fs-body .sec-final{
  /* 🚫 ZERO VÉU — ordem dele a 29-ago: «a secção de CTA tem um véu e é uma foto, não é o
     vídeo». Aqui esteve um degradê escuro de quatro paragens, e era mesmo um véu.
     O que segura o contraste é o ENQUADRAMENTO, que é a regra da casa desde 20-ago:
     ⚠️ `50% 8%` e NÃO `center`. Com `center` o recorte cai em cheio no mar de nuvens —
     que é branco — e o título branco desaparecia. O fundo estava lá (medido: a imagem
     carregava, rgb(18,48,79) por baixo); o que faltava era o PEDAÇO de fundo certo.
     A 8% apanha-se o azul fundo do topo do céu, que é onde o branco se lê sozinho.
     Isto é o POSTER, e é só o fallback: quem pinta por cima é o <video> abaixo. */
  background-image:url('/assets/ceu-A-poster.jpg');
  background-position:50% 8%;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#12304f;
  overflow:hidden;
}
/* o céu do fecho, irmão do do hero (ver o comentário no scripts/zonas.mjs).
   `object-position` igual ao `background-position` de cima — se os dois divergirem, a
   secção salta de enquadramento no instante em que o vídeo entra. */
.fs-body .sec-final > .fs-ceu-fecho{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 8%;
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.fs-body .sec-final > .fs-ceu-fecho.a-tocar{ opacity:1; }
/* o ::before do site.css (o radial suave da home) tem de ficar POR CIMA do vídeo —
   sem isto o vídeo entrava e apagava-o, e é ele que assenta o miolo. */
.fs-body .sec-final::before{ z-index:1; }
.fs-body .sec-final .fim-wrap{ position:relative; z-index:2; }

/* ---------- «X, em concreto» · o conteúdo próprio da página de zona ----------
   Nasceu a 28-ago-2026 com o molde das páginas de localização (scripts/zonas.mjs).
   O ponto memorável da página são OS NOMES DOS SÍTIOS, em grande: quem é de Bucelas vê
   «Bucelas» escrito. Por isso a malha de nomes é o único sítio da ficha onde o corpo
   sobe a tamanho de citação — é ali que o olho tem de parar. */
.fs-zona-lede{
  font-size:var(--t-lede);
  line-height:1.55;
  color:var(--tinta-60);
  max-width:60ch;
  margin-top:clamp(14px,2vh,20px);
}
/* `auto-fit` e não um número fixo: o número de eixos MUDA de concelho para concelho,
   e é isso que impede as páginas de zona de parecerem a mesma. Lisboa leva três (o
   centro antigo, as avenidas, o rio e o norte), Loures, Odivelas e Sintra levam dois,
   a Amadora leva UM, porque é pequena e contínua e inventar-lhe eixos era render o
   molde em vez de descrever o sítio. Com um eixo só, ocupa a largura toda. */
.fs-zona-malha{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:clamp(28px,3.4vw,48px);
  margin-top:clamp(26px,4vh,40px);
}
.fs-zona-eixo{
  border-top:1px solid var(--hairline);
  padding-top:16px;
}
.fs-zona-eixo h3{
  font-size:14px; font-weight:600;
  letter-spacing:.06em;
  color:var(--azul);
  margin-bottom:6px;
}
.fs-zona-nota{
  font-size:14.5px;
  color:var(--tinta-60);
  margin-bottom:14px;
}
.fs-zona-nomes{
  font-size:clamp(18px,1.75vw,24px);
  font-weight:600;
  line-height:1.4;
  letter-spacing:var(--ls-apertado);
  /* quebra pelo nome inteiro: «Santa Iria de Azóia» partido ao meio lê-se como erro */
  text-wrap:pretty;
}
.fs-zona-nomes span{ white-space:nowrap; }
.fs-zona-nomes i{
  font-style:normal;
  color:var(--azul);
  /* só à esquerda: o ponto pertence ao nome que o precede, e o ar do outro lado vem do
     espaço entre spans — que é onde a linha pode quebrar */
  margin:0 0 0 .34em;
  opacity:.7;
}
.fs-zona-sub{
  font-size:clamp(19px,1.9vw,24px);
  font-weight:600;
  letter-spacing:var(--ls-apertado);
  line-height:1.15;
  margin-top:clamp(40px,6vh,64px);
}
/* três itens numa grelha de dois deixava o terceiro órfão — o mesmo defeito que os
   cartões de serviço tinham ao telemóvel. Aqui a grelha é de três. */
.fs-zona-terreno{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(24px,3vw,44px); }
.fs-zona-terreno p{ max-width:38ch; }
/* a resposta dele, quando chegar: uma linha só, com peso */
.fs-zona-linha{
  margin-top:clamp(28px,4vh,40px);
  font-size:var(--t-lede);
  line-height:1.55;
  max-width:62ch;
}
.fs-zona-obra{
  margin-top:clamp(20px,3vh,28px);
  padding-left:18px;
  border-left:2px solid var(--azul);
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--tinta-60);
  max-width:62ch;
}

/* ---------- mobile ---------- */
@media (max-width:860px){
  .fs-zona-malha{ grid-template-columns:1fr; gap:26px; }
  .fs-zona-terreno{ grid-template-columns:1fr; gap:0; }
  .fs-zona-terreno p{ max-width:none; }
  .fs-zona-nomes{ font-size:clamp(17px,4.8vw,21px); }
  .fs-hero{ min-height:66svh; }
  .fs-hero-inner{ width:auto; padding:130px 22px 36px; }
  .fs-hero h1{ font-size:clamp(30px,8vw,38px); }
  .fs-sec{ padding:48px 18px 0; }
  /* 30-ago-2026 — em mobile, os pontos do primeiro bloco mantêm a grelha de
     duas colunas do desktop. Isto aplica-se tanto às páginas gerais de serviço
     como às páginas de serviço + localidade: em coluna única a lista ocupava
     quase um ecrã inteiro antes de chegar à secção seguinte. */
  .fs-inclui-lista{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    column-gap:18px;
  }
  .fs-body .fs-inclui-lista li{
    padding:15px 0 17px;
  }
  .fs-body .fs-inclui-lista strong,
  .fs-body .fs-inclui-lista h4{
    font-size:15.5px;
    line-height:1.25;
    margin-bottom:6px;
  }
  .fs-body .fs-inclui-lista p{
    font-size:13.5px;
    line-height:1.43;
  }
  .fs-passos-lista{ grid-template-columns:1fr; gap:18px; }
  .fs-faq-duas{ grid-template-columns:1fr; gap:26px; }
  /* a lista acima já fecha com hairline — sem segundo traço no CTA */
  .fs-faq-cta{ border-top:0; padding-top:0; }
  .fs-prova{ margin-top:56px; padding:52px 18px; }
  .fs-prova .sec-inner{ grid-template-columns:1fr; gap:32px; }
  /* a secção azul das zonas: tudo em coluna. Os valores deixam de ser grelha — a
     `minmax(220px,1fr)` num ecrã de 375 dava uma coluna na mesma, mas com o `gap` a
     abrir buracos onde não há nada ao lado. */
  .fs-prova-valores{ grid-template-columns:1fr; gap:26px; margin-top:30px; }
  .fs-prova-duas{ grid-template-columns:1fr; gap:32px; margin-top:34px; padding-top:30px; }
  .fs-prova--zona .fs-prova-dados{ gap:32px; }
  .fs-negocios{ padding:48px 18px 0; }
  /* dois por linha e não `auto-fill`: a 375px o `minmax(190px,1fr)` cabia duas vezes por
     um triz e a fotografia ficava a 170px de largo, que é miniatura e não cartão. */
  .fs-neg-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:24px; }
  .fs-neg > span{ left:10px; right:10px; bottom:9px; font-size:13px; }
  /* 🔴 O fecho no telemóvel: medido, não estimado. O H2 começa a 170px e o `.folha-fim`
     — o gradiente branco que fecha a folha — só acaba a 206px: 36px de sobreposição, e o
     «De que serviço precisas?» a branco caía em cheio no horizonte claro do céu. No
     desktop a sobreposição são 4px e não se nota; é por isso que a correcção é SÓ aqui.
     Sem véu (ver acima), quem corrige é o recorte: desce-se, para o título ficar no azul.
     O vídeo tem de descer com ele, senão a secção salta quando o vídeo entra. */
  .fs-body .sec-final{ background-position:50% 2%; }
  .fs-body .sec-final > .fs-ceu-fecho{ object-position:50% 2%; }
  .fs-prova-dados{
    border-left:0; padding-left:0;
    border-top:1px solid rgba(247,250,252,.16);
    padding-top:24px;
    flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap;
  }
  .fs-outros-lista{ grid-template-columns:1fr; }
  .fs-outros{ padding-bottom:92px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-entra]{ opacity:1; transform:none; }
  .fs-rev [data-rev]{ opacity:1; transform:none; transition:none; }
}


/* ---------- passos: seis em vez de quatro ----------
   🔴 29-ago-2026. A grelha base é de QUATRO colunas e serve as fichas que têm quatro
   passos. Na instalação passaram a SEIS (decisão dele, a olhar para a página: menos
   texto por passo e mais passos), e seis a quatro colunas dá 4+2 — metade da segunda
   linha fica vazia à direita do último, e lê-se como se faltasse ali qualquer coisa.
   Três colunas resolvem sem tocar nas páginas de quatro passos, que continuam com a
   regra de cima. Não se usa auto-fit: com minmax largo os seis voltariam a 4+2 em
   ecrãs largos, e o que se quer aqui é 3+3 sempre. */
.fs-passos-lista--seis{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:1080px){
  .fs-passos-lista--seis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  .fs-passos-lista--seis{ grid-template-columns:1fr; }
}

/* ---------- as marcas dentro da prova rica ----------
   🔴 29-ago-2026. Ao trazer a prova rica da /ar-condicionado-moita para a ficha de
   serviço, o bloco das marcas (que na Moita não existe) ficou logo a seguir aos números
   5,0 / 2011 sem folga nenhuma: «Vendemos, instalamos e mantemos as principais marcas.»
   encostava à linha «ano de fundação» e lia-se como legenda dos números, que é o que
   NÃO é. O filete por cima separa-o do que vem antes sem o mandar para outra coluna. */
.fs-prova--zona .fs-prova-marcas{
  margin-top:clamp(26px,3.6vh,38px);
  padding-top:clamp(18px,2.4vh,24px);
  border-top:1px solid rgba(247,250,252,.16);
}


/* ---------- chão da FAQ quando o fecho vem logo a seguir ----------
   🔴 29-ago-2026. A .fs-sec não tem padding-bottom (o rail que vinha depois trazia o
   seu). Com o fecho no céu a entrar entre a FAQ e o rail, a última pergunta passou a
   encostar ao céu sem folga nenhuma — «acaba repentinamente a meio». O :has() só age
   quando a secção seguinte é mesmo o fecho, para não abrir buraco nas fichas que não
   têm um. */
#faq:has(+ .sec-final){ padding-bottom:clamp(56px,7vh,88px); }


/* ---------- a passagem do céu para a secção seguinte ----------
   🔴 29-ago-2026, ao vivo: «falta aqui a transição entre nuvens que nós temos nestas
   secções — temos, por exemplo, no hero». Tinha razão e a comparação é exata: no hero da
   home a passagem existe SEM CSS nenhum, porque o enquadramento põe nuvens brancas em
   baixo e a secção seguinte é branca; funde-se sozinha. No fecho o enquadramento é outro
   (fica no azul do topo, para o título branco se segurar) e a aresta aparece a direito.

   ⚠️ Há um VETO de 27-ago no site.css contra degradês de entrada e saída — mas é noutro
   caso e não se aplica aqui. Lá a secção é uma PLACA ESCURA entre duas secções claras, e
   qualquer rampa entre quase-preto e quase-branco lê-se como borrão; o próprio veto diz
   que a aresta limpa é o que dá peso à placa. Aqui os dois lados são CLAROS — céu contra
   #F7FAFC — e a rampa não tem contraste para borratar. É o mesmo desenho do hero, feito
   à mão porque o enquadramento não o dá de graça.

   Fica em ::after e não no ::before, que já está ocupado pelo radial. z-index 1 mete-o
   por cima do vídeo e por baixo do .fim-wrap (z-index 2), para não lavar o texto. */
.fs-body .sec-final::after{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  /* DUAS rampas na mesma camada: a de cima e a de baixo. A de cima é mais curta (15%
     contra 22%) porque o título vive mais perto do topo da placa do que do fundo — a
     18% já começava a lavar-lhe o cimo das letras. A de baixo pode ser mais generosa:
     por baixo dela só há nuvem. */
  background:
    linear-gradient(180deg, #F7FAFC 0%, rgba(247,250,252,.50) 44%, rgba(247,250,252,0) 100%) top/100% 15% no-repeat,
    linear-gradient(180deg, rgba(247,250,252,0) 0%, rgba(247,250,252,.55) 58%, #F7FAFC 100%) bottom/100% 22% no-repeat;
}
.fs-body .sec-final{ isolation:isolate; }
.fs-body .fim-wrap{ position:relative; z-index:2; }


/* ---------- cartões de negócio: a gaveta que abre no hover ----------
   🔴 29-ago-2026, ordem dele: «mete a interatividade como está na página de serviços
   geral». É o mesmo mecanismo dos .sv-cartao do servicos.css — grid-template-rows de
   0fr para 1fr, que anima uma altura desconhecida sem se saber quanto ela é.

   ⚠️ Só abre onde há RATO. Em ecrã tátil não existe hover: ou a gaveta ficava sempre
   aberta — e a duas colunas o cartão tem ~170px de largura, onde a frase não cabe sem
   empurrar o nome para fora — ou ficava morta e escondia texto que ninguém alcança.
   Em touch fica só o nome, que é o que o dedo precisa de ler antes de tocar. */
.fs-neg-txt{
  position:absolute; left:14px; right:14px; bottom:12px; z-index:1;
  color:#fff; line-height:1.25; letter-spacing:-.01em;
}
.fs-neg-txt strong{
  display:block;
  font-size:var(--t-corpo); font-weight:600;
}
.fs-neg-mais{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.fs-neg-caixa{ min-height:0; overflow:hidden; display:block; }
.fs-neg-desc{
  display:block; padding-top:5px;
  font-size:12.5px; font-weight:400; line-height:1.35;
  opacity:.9;
}
@media (hover:hover) and (pointer:fine){
  .fs-neg:hover .fs-neg-mais,
  .fs-neg:focus-visible .fs-neg-mais{ grid-template-rows:1fr; }
  /* o véu fecha mais quando a gaveta abre, senão a frase nasce sobre a parte clara
     da foto — que é onde ela cai em metade das dez. */
  .fs-neg:hover::after{
    background:linear-gradient(180deg, rgba(9,24,42,0) 20%, rgba(9,24,42,.86) 100%);
  }
}
@media (max-width:860px){
  .fs-neg-txt{ left:10px; right:10px; bottom:9px; }
  .fs-neg-txt strong{ font-size:13px; }
}


/* ---------- as duas listas ganham vida ao passar o rato ----------
   🔴 29-ago-2026, pedido dele: «quando se dá hover numa, elas ficam com um fundo
   diferente — dá mais interatividade à página. Também no método».

   ⚠️ SEGUNDA versão. A primeira alargava o próprio <li> com margin-inline:-16px para a
   placa branca respirar para lá do texto — e desalinhou a página toda: o traço de cada
   bloco passou a começar 16px à esquerda da coluna de texto, fora de esquadria com o
   título da secção seguinte. Via-se logo na primeira captura.
   A placa passa a ser um ::after ABSOLUTO, que se estende para os lados sem tocar na
   caixa do <li>. O layout fica exatamente onde estava; o que cresce é só o fundo.

   O traço acende no azul da marca e o parágrafo escurece de tinta-60 para tinta cheia —
   é o que faz o bloco parecer que se aproximou, sem nada mudar de sítio.

   ⚠️ Nada de translate nem de escala: estes blocos vivem em grelha encostada e qualquer
   deslocação empurra o vizinho ou descola o traço da linha dos outros. O que se move é
   a COR.
   ⚠️ Só com rato. Em touch o :hover fica preso depois do toque e lê-se como um estado
   selecionado que ninguém pediu. */
/* 🔴 29-ago-2026 — a `.fs-etapa` entrou nesta lista. As fichas trocaram o método pelo
   componente das páginas de concelho (ordem dele, com a /ar-condicionado-lisboa à
   frente: «quero método assim»), e o componente novo chegava SEM hover — a ficha
   perdia interatividade que já lá tinha. Estende-se a regra em vez de a copiar: dois
   blocos iguais com prefixos diferentes divergem à terceira alteração.
   ⚠️ O `.fs-etapa-num` fica de fora do efeito de crescer. No método antigo o número era
   uma etiqueta de 14px e crescer um ponto não movia nada; aqui tem até 44px e qualquer
   mudança de corpo empurra o título que está por baixo. */
@media (hover:hover) and (pointer:fine){
  .fs-inclui-lista li,
  .fs-passos-lista li,
  .fs-etapa{
    position:relative;
    transition:border-top-color .45s var(--ease);
  }
  .fs-inclui-lista li::after,
  .fs-passos-lista li::after,
  .fs-etapa::after{
    content:'';
    position:absolute;
    inset:0 -16px -6px;
    z-index:-1;
    border-radius:2px 2px 12px 12px;
    background:transparent;
    box-shadow:0 0 0 0 rgba(10,25,45,0);
    transition:background .45s var(--ease), box-shadow .45s var(--ease);
  }
  .fs-inclui-lista li:hover::after,
  .fs-passos-lista li:hover::after,
  .fs-etapa:hover::after{
    background:#fff;
    box-shadow:0 16px 34px -26px rgba(10,25,45,.55);
  }
  .fs-inclui-lista li:hover,
  .fs-passos-lista li:hover,
  .fs-etapa:hover{ border-top-color:var(--azul); }
  .fs-inclui-lista li p,
  .fs-passos-lista li p,
  .fs-etapa p{ transition:color .45s var(--ease); }
  .fs-inclui-lista li:hover p,
  .fs-passos-lista li:hover p,
  .fs-etapa:hover p{ color:var(--tinta); }
  /* o número do passo cresce um ponto: diz qual dos seis está a ser lido. */
  .fs-passos-lista li::before{ transition:font-size .45s var(--ease), letter-spacing .45s var(--ease); }
  .fs-passos-lista li:hover::before{ font-size:15px; letter-spacing:.1em; }
}

/* ============================================================
   MÉTODO — as três etapas, nas páginas de zona.
   Pedido dele a 29-ago: «falta uma secção de método rápida aqui, só com as 3 etapas».
   A palavra que manda é RÁPIDA, e é ela que decide a forma: TRÊS COLUNAS e não a lista
   empilhada da /sobre. A página de zona já é uma escada de blocos altos — serviços,
   prova, negócios, freguesias, FAQ —, e mais uma torre de três andares lia-se como
   obrigação. Lado a lado, as três etapas vêem-se de uma vez e o método deixa de ser
   uma leitura para ser um relance, que é o que ele pediu.

   ⚠️ Classes `fs-etapa*` e não `fs-passo*`: o ficha.css já tem uma `.fs-passos-lista`,
   que é outra coisa (a lista numerada das fichas de serviço). Dois componentes com o
   mesmo prefixo é uma armadilha à espera de quem vier a seguir.

   As palavras vivem no sobre.html e são lidas na geração — ver metodoDoSobre() no
   scripts/zonas.mjs. Aqui NÃO há texto nenhum, de propósito. */
.fs-etapas{
  list-style:none; padding-left:0;
  margin:clamp(28px,4vw,44px) 0 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,38px);
}
.fs-etapa{
  padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--hairline);
}
.fs-etapa-num{
  display:block;
  font-size:clamp(30px,3.2vw,44px); font-weight:600; line-height:.9;
  letter-spacing:-.04em; color:var(--quente);
  /* tabular-nums para o «01», o «02» e o «03» ocuparem a mesma largura — sem isto o «1»
     é mais estreito e os três títulos por baixo ficam desalinhados entre si. */
  font-variant-numeric:tabular-nums;
  margin-bottom:clamp(10px,1.2vw,16px);
}
.fs-etapa-tit{ font-size:var(--t-citacao); font-weight:600; letter-spacing:-.015em; }
.fs-etapa-desc{
  margin-top:7px; color:var(--tinta-60);
  font-size:var(--t-corpo); line-height:1.55;
}
@media (max-width:860px){
  /* a duas não cabe sem partir os títulos a meio; passa a empilhar, e aí o número volta
     a ficar ao lado do texto para a coluna não crescer de altura sem necessidade. */
  .fs-etapas{ grid-template-columns:1fr; gap:0; }
  .fs-etapa{
    display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;
    padding:18px 0; border-top:0; border-bottom:1px solid var(--hairline);
  }
  .fs-etapa-num{ font-size:26px; margin-bottom:0; }
}


/* ---------- método com TRÊS passos ----------
   🔴 29-ago-2026. A grelha base é repeat(4) porque as fichas antigas tinham quatro
   passos. Ao passar a instalação para três (ordem dele, para bater certo com a home),
   os três ocupavam 3 de 4 colunas e ficava um quarto de largura vazio à direita —
   lia-se como se faltasse lá alguma coisa. Existe já uma variante --seis; esta é a
   irmã. Quem escrever uma ficha nova com três passos põe a classe e não pensa mais. */
.fs-passos-lista--tres{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width:860px){
  .fs-passos-lista--tres{ grid-template-columns:1fr; }
}

/* ============================================================
   /zonas — o hub dos concelhos.
   A única secção que o site que está em primeiro lugar em Lisboa tinha e nós não.

   ⚠️ É UM ÍNDICE, e a forma tem de o dizer. Nada de cartões com fotografia: 24 fotos de
   céu iguais não informam ninguém e transformavam a página mais leve do site na mais
   pesada. O que a pessoa quer aqui é encontrar o nome dela e clicar — por isso são
   nomes grandes, em colunas, com a seta a aparecer no hover. */
.hz-folha > .folha-orla{
  height:clamp(92px,10vw,138px);
  top:clamp(-138px,-10vw,-92px);
}
.hz-nacional{
  border-bottom:1px solid var(--hairline);
}
.hz-nacional-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  align-items:end;
  gap:clamp(36px,7vw,112px);
}
.fs-sec .hz-nacional-grid > h2{
  max-width:10ch;
  font-size:clamp(50px,7.6vw,112px);
  line-height:.91;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.hz-nacional-corpo{
  padding-bottom:clamp(4px,1.2vw,16px);
}
.hz-nacional-corpo p{
  max-width:35ch;
  color:var(--tinta-60);
  font-size:clamp(18px,1.6vw,23px);
  line-height:1.48;
}
.hz-nacional-tel{
  display:inline-block;
  margin-top:clamp(24px,3vw,38px);
  color:var(--tinta);
  font-size:var(--t-corpo);
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  transition:color .22s var(--ease);
}
.hz-nacional-tel:hover,
.hz-nacional-tel:focus-visible{ color:var(--quente); }
.hz-indice-cab{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  align-items:end;
  gap:clamp(28px,6vw,92px);
  padding-bottom:clamp(12px,2vw,24px);
}
.fs-sec .hz-indice-cab h2{
  font-size:clamp(34px,4.6vw,64px);
  line-height:1;
  letter-spacing:-.045em;
}
.hz-indice-cab p{
  max-width:43ch;
  color:var(--tinta-60);
  font-size:var(--t-corpo);
  line-height:1.55;
}
.fs-zonas-hub .hz-grupo{ margin-top:clamp(38px,5vh,64px); }
.fs-zonas-hub .hz-grupo:first-of-type{ margin-top:clamp(18px,2.4vh,28px); }
.hz-grupo-cab h2{
  font-size:var(--t-citacao); font-weight:600; letter-spacing:-.02em;
}
.hz-grupo-cab p{
  margin-top:6px; color:var(--tinta-60); font-size:var(--t-corpo);
}
.hz-lista{
  list-style:none; padding-left:0;
  margin:clamp(16px,2vw,22px) 0 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(18px,2.2vw,32px);
  border-top:1px solid var(--hairline);
}
.hz-zona{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:clamp(13px,1.5vw,17px) 0;
  border-bottom:1px solid var(--hairline);
  text-decoration:none; color:var(--tinta);
  transition:color .25s var(--ease);
}
.hz-nome{ font-size:var(--t-corpo-lg); font-weight:600; letter-spacing:-.01em; }
.hz-seta{
  /* a seta não entra por translate: com 24 delas a deslizar ao mesmo tempo numa lista
     densa, o efeito é ruído. Aparece e fica, que é o que uma lista pede. */
  opacity:0; color:var(--quente);
  transition:opacity .25s var(--ease);
}
.hz-zona:hover{ color:var(--quente); }
.hz-zona:hover .hz-seta,
.hz-zona:focus-visible .hz-seta{ opacity:1; }
@media (max-width:1040px){ .hz-lista{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .hz-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px){
  .hz-nacional-grid,
  .hz-indice-cab{ grid-template-columns:1fr; align-items:start; }
  .fs-sec .hz-nacional-grid > h2{ max-width:8.5ch; font-size:clamp(50px,15vw,72px); }
  .hz-nacional-corpo p{ max-width:31ch; }
  .hz-indice-cab{ gap:18px; }
}
@media (max-width:460px){
  .hz-lista{ grid-template-columns:1fr; }
  /* a uma coluna a seta deixa de precisar de hover: no telemóvel não há hover nenhum,
     e sem ela a linha fica um nome solto sem sinal de que é clicável. */
  .hz-seta{ opacity:.55; }
}

/* O título do «sobre nós» nas páginas de zona e nas células.
   Na home a frase tem comprimento fixo e um `<br>` a dividi-la em duas linhas medidas.
   Aqui acaba no nome do concelho, que muda de 5 a 20 caracteres, e a quebra fixa deixava
   órfãs («Xira.» sozinha na quarta linha, visto a 1440). A quebra saiu no gerador; quem
   equilibra passa a ser o browser, que faz a conta para cada nome. */
.fs-body .folha .sobre-dizer h2{ text-wrap:balance; }

/* ── o ar do telemóvel (medido a 375, 29-ago) ────────────────────────────────
   O ar VERTICAL já está igual ao da home e não se mexe: o `--respiro` é
   `clamp(76px,9vw,128px)` e a 375px o `9vw` dá 34px, portanto pinga no mínimo —
   76px em cima e em baixo, nas duas páginas. Abrir mais só compra scroll.

   O que faltava era ar LATERAL, e o efeito é o contrário do que parece: as
   secções da ficha levam `padding:… 18px` por cima do `.sec-inner`, e a home não
   leva nenhum. Dá uma coluna de 312px contra os 345px da home — 33px a menos,
   que é mais linhas partidas e portanto MAIS scroll, não menos. Alinhar as duas
   margens dá ar e encurta a página ao mesmo tempo.

   Só dentro de `.folha` — as 16 fichas de serviço são outra pista e ficam como
   estão. E só até 860, que é onde o `padding` lateral entra. */
@media (max-width:860px){
  .fs-body .folha .fs-sec,
  .fs-body .folha .fs-negocios{ padding-left:0; padding-right:0; }
  .fs-body .folha .fs-sec > .sec-inner,
  .fs-body .folha .fs-negocios > .sec-inner{ width:min(92%,1180px); margin-inline:auto; }
  /* a `.fs-prova` tem fundo próprio: aí o padding é a moldura da chapa e mantém-se */

  /* A lista do «o que faz» mantém também aqui a grelha compacta de duas colunas. */
  .fs-body .folha .fs-inclui-lista{ row-gap:0; }

  /* A chapa de hover sangra `-16px` para cada lado do item (ver a regra lá em baixo, no
     bloco `@media (hover:hover)`). Enquanto a secção tinha 18px de padding lateral havia
     onde sangrar; agora que a margem é a da home — 15px — os 16px passam 1px e o
     documento fica com 376px de largura.

     🔴 Num TELEMÓVEL isto nunca aparece: o `(hover:hover) and (pointer:fine)` não casa.
     Aparece numa janela de PC estreitada abaixo de 860, que é um ecrã real e é também
     como eu estava a medir — o Playwright a 375 sem `hasTouch` continua a ser ponteiro
     fino, e foi assim que o defeito se mostrou. Testar «mobile» sem emular toque dá
     hover onde não há; a emulação passou a levar `isMobile`+`hasTouch`.

     12px cabem nos 15 e o efeito mantém-se. Clipar a secção não servia: matava a sombra,
     que é justamente o que a chapa faz. */
  .fs-body .folha .fs-inclui-lista li::after{ inset:0 -12px -6px; }
}