/* ============================================================
   Rúben Marques — Climatização · página Serviços (hub)

   Quatro andares, e nenhum deles come o ecrã sozinho:
     1. faixa de topo — banda de foto de ~520 px com a migalha e o título
     2. tira das marcas — o selo que vivia dentro do hero antigo
     3. os quatro — cartões de foto, nome por cima, corpo que abre ao passar
     4. fecho no céu — o mesmo balcão do /sobre, com a copy e os contactos

   A máquina (a explosão presa ao scroll) saiu desta página: um hero de ecrã
   inteiro entre o clique em "Serviços" e os serviços é um ecrã a mais.
   ============================================================ */

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

/* a navbar está sempre acesa nesta página (js/servicos.js) */
.nav--solida .nav-links a.e-atual{
  text-decoration:underline; text-underline-offset:6px;
  text-decoration-thickness:1px; color:var(--azul); opacity:1;
}

/* a mesma goteira do hero (.fs-hero-inner): sem isto o título da secção começava
   24px mais para dentro do que o H1 mesmo por cima dele, e via-se */
.sv-inner{ width:min(92vw,1180px); margin:0 auto; }

/* ============ 1 · hero ============
   A anatomia é a do /sobre (css/sobre.css, .sb-hero) e a da home: ecrã inteiro,
   tudo CENTRADO, uma só palavra. Sem migalha e sem lede — isso era importado da
   Nura e não é a maneira desta casa. O selo das marcas fica onde sempre esteve
   nesta página: canto inferior esquerdo, na goteira do conteúdo. */
/* ⚠️ 27-ago-2026, ordem dele: «estes heros não têm grande prioridade. Só o hero um
   (a home) é que deve ocupar esse espaço todo.» Modelo: o /servicos da Nura — a foto
   acaba antes do fim do ecrã e a faixa (lá as zonas, aqui as marcas) fica logo a seguir,
   numa banda própria. Assim vê-se que a página continua sem ser preciso rolar às cegas.
   ⚠️ SEGUNDA PASSAGEM, mesmo dia. À primeira pus 70svh e ele viu ao vivo: «isto tá buéda
   curto, caralho. A foto vai até onde vai no Nura, e é ali que devia estar o "instalamos as
   seguintes marcas".» Fui medir o modelo em vez de continuar a adivinhar: na Nura a foto
   ocupa ~88% do ecrã e a faixa das zonas fica a ESPREITAR no fundo, não numa banda inteira
   abaixo da dobra. Daí a conta ser explícita — o ecrã menos a altura da faixa (61px) e uma
   fresta. O clamp em px é só a rede para ecrãs absurdos; quem manda é o `calc`. */
.sv-hero{
  position:relative; z-index:1;
  min-height:clamp(470px, calc(100svh - 78px), 980px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:#fff;
  /* mais folga em baixo do que em cima: levanta o título o suficiente para a
     prateleira da foto lhe passar por baixo dos descendentes, e não através */
  padding:130px 24px 176px;
  overflow:hidden;
}
.sv-hero-fundo{ position:absolute; inset:0; overflow:hidden; background:var(--tinta); }
.sv-hero-fundo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 34%;
}
/* o mesmo véu do /sobre: radial ao centro para segurar o título, e uma base para
   o selo das marcas em baixo à esquerda */
.sv-hero-fundo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 86% 70% at 50% 48%, rgba(7,20,32,.70), rgba(7,20,32,.46) 52%, rgba(7,20,32,.30) 80%),
    linear-gradient(0deg, rgba(7,20,32,.52), rgba(7,20,32,.26) 62%, rgba(7,20,32,.34));
}
.sv-hero-inner{
  position:relative;
  width:min(100%,980px);
  display:flex; flex-direction:column; align-items:center;
}
.sv-hero-tit{
  font-size:clamp(52px,7.6vw,110px);
  font-weight:600;
  line-height:1.0;
  letter-spacing:-.035em;
  text-shadow:var(--sombra-texto);
}
/* o selo herda a posição de .marcas-selo (site.css); aqui só se acende, porque
   lá ele nasce invisível à espera do JS da secção do equipamento, que aqui não há */
/* A faixa das marcas saiu de DENTRO da fotografia e passou a banda própria por baixo do
   hero (27-ago). Deixa de depender do scrim para se ler, e é o que dá a entender que a
   página continua. Sobrepõe o `position:absolute` do .marcas-selo do site.css. */
.sv-selo{
  position:static; opacity:1; transform:none; pointer-events:auto;
  flex-direction:row; align-items:center; justify-content:center;
  gap:clamp(14px,2.4vw,26px);
  width:100%; padding:clamp(16px,2.3vh,24px) 24px;
  background:var(--nuvem);
  border-bottom:1px solid var(--hairline);
}
.sv-selo .marcas-selo-txt{ color:var(--tinta-60); text-shadow:none; }
.sv-selo .selo-logo{ color:var(--tinta); opacity:.82; }
@media (max-width:640px){
  .sv-selo{ flex-direction:column; gap:9px; text-align:center; }
}

/* ============ 3 · os quatro ============ */
/* O nome `.sv-cinco` (e o id `cincoTitulo` no HTML) é histórico: eram cinco cartões
   até a manutenção e a reparação se fundirem. Fica como está para não trocar nomes de
   classe a meio de duas sessões a mexer no mesmo site. */
/* ⚠️ `position:relative; z-index:1` NÃO É DECORAÇÃO — é a mesma regra da .sec-faq no
   site.css. Esta é a secção IMEDIATAMENTE antes do fecho no céu: sem posicionamento,
   uma camada de céu por baixo pinta-lhe por cima e os cartões desaparecem à vista,
   com os estilos computados todos certos. Fica garantido dos dois lados. */
.sv-cinco{ position:relative; z-index:1; padding:var(--respiro) 0 calc(var(--respiro) * .9); }
/* o título da secção ao centro, para o hero centrado não cair num título
   encostado à esquerda logo a seguir */
.sv-cinco-cab{ text-align:center; }
.sv-cinco-cab h2{
  font-size:var(--t-titulo);
  font-weight:600;
  line-height:1.02;
  letter-spacing:var(--ls-titulo);
}

/* Eram cinco em seis colunas (dois largos em cima, três estreitos em baixo). Com a
   manutenção e a reparação fundidas sobram QUATRO, e quatro em seis colunas deixavam
   um buraco na fila de baixo. Duas colunas, dois por fila: nenhum cartão fica órfão e
   todos ficam com a largura dos largos de antes, que era a boa. */
.sv-grelha{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(30px,4.4vh,48px);
}
/* 🚨 27-ago-2026, ao vivo no telemóvel dele: «o layout dos serviços está muito mal, e com
   descrições bué grandes… não é preciso descrever manutenção, reparação e limpeza. É só meter
   o título, mais nada… dá um scroll bué grande para uma página que é suposto ser minúscula.»
   Saíram do HTML a descrição, o «Ver X →» e o «+» do canto (o cartão inteiro já era um `<a>`,
   portanto o «Ver X →» era um link dentro de um link a dizer a mesma coisa, e o «+» prometia
   uma expansão que já não existe).
   Sem esse conteúdo, 478px de cartão eram 300px de fotografia vazia por baixo de um título.
   Fica a altura de um cartão que mostra uma fotografia e um nome. */
.sv-cartao{
  position:relative;
  min-height:clamp(200px,27vh,280px);
  border-radius:clamp(14px,1.3vw,18px);
  overflow:hidden;
  background:var(--tinta);
  text-decoration:none;
  color:#fff;
  display:block;
  isolation:isolate;
  box-shadow:0 18px 46px -32px rgba(18,36,48,.5);
}

.sv-cartao-foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.sv-cartao:hover .sv-cartao-foto,
.sv-cartao:focus-visible .sv-cartao-foto{ transform:scale(1.045); }
.sv-cartao-veu{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(12,26,36,0) 34%,
    rgba(12,26,36,.30) 58%,
    rgba(12,26,36,.80) 100%);
  transition:background .55s var(--ease);
}
.sv-cartao:hover .sv-cartao-veu,
.sv-cartao:focus-visible .sv-cartao-veu{
  background:linear-gradient(180deg,
    rgba(12,26,36,.10) 20%,
    rgba(12,26,36,.48) 52%,
    rgba(12,26,36,.90) 100%);
}

.sv-cartao-corpo{
  position:absolute; z-index:2;
  left:0; right:0; bottom:0;
  /* folga à direita: o nome e o CTA nunca chegam ao sinal do canto */
  padding:clamp(18px,1.9vw,26px);
  padding-right:clamp(62px,5vw,76px);
  display:block;
}
.sv-cartao-nome{
  margin:0;
  font-size:clamp(20px,1.85vw,27px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.12;
  max-width:16ch;
  text-shadow:0 1px 18px rgba(10,25,45,.5);
}

/* o corpo abre-se ao passar: linhas de grelha de 0fr a 1fr, sem medir nada */
.sv-cartao-mais{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease);
}
.sv-cartao-caixa{ min-height:0; overflow:hidden; display:block; }
/* `:focus-within` é por causa do cartão duplo: os alvos dele são dois links DENTRO do
   corpo, e o corpo está fechado. Sem isto, quem anda de tabulador punha o foco numa
   pílula invisível e não fazia ideia de onde estava. */
.sv-cartao:hover .sv-cartao-mais,
.sv-cartao:focus-visible .sv-cartao-mais,
.sv-cartao:focus-within .sv-cartao-mais{ grid-template-rows:1fr; }

.sv-cartao-desc{
  display:block;
  padding-top:11px;
  max-width:40ch;
  font-size:var(--t-corpo-lg);
  line-height:1.5;
  color:rgba(255,255,255,.86);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.sv-cartao-cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font-size:var(--t-corpo-lg); font-weight:600;
  color:#fff;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease) .05s, transform .5s var(--ease) .05s;
}
.sv-cartao-cta i{ font-style:normal; transition:transform .4s var(--ease); }
.sv-cartao:hover .sv-cartao-desc,
.sv-cartao:hover .sv-cartao-cta,
.sv-cartao:hover .sv-cartao-portas,
.sv-cartao:focus-visible .sv-cartao-desc,
.sv-cartao:focus-visible .sv-cartao-cta,
.sv-cartao:focus-within .sv-cartao-desc,
.sv-cartao:focus-within .sv-cartao-portas{
  opacity:1; transform:none;
  transition-delay:.14s,.14s;
}
.sv-cartao:hover .sv-cartao-cta i{ transform:translateX(5px); }

/* ⚠️ 27-ago: com a descrição e o «Ver X →» fora, os outros três cartões passaram a ser um
   link inteiro e este é o único que guarda controlos. Se as portas só aparecessem no hover,
   três cartões clicavam e este parecia morto até lhe passarem o rato por cima. Ficam sempre
   à vista, nos dois tamanhos. */
.sv-cartao--duplo .sv-cartao-portas{ opacity:1; transform:none; }

/* ---- o cartão de duas portas (manutenção + reparação) ----
   Os outros três são um <a> inteiro e o CTA é só texto a dizer para onde vão. Este não
   pode ser: são dois destinos. Então o alvo deixa de ser o cartão e passa a ser a
   pílula — e desenha-se como pílula, contornada, para se ler como alvo e não como
   legenda. É a diferença que justifica o cartão ter duas saídas em vez de uma. */
.sv-cartao-portas{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:15px;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease) .05s, transform .5s var(--ease) .05s;
}
.sv-cartao-porta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  font-size:var(--t-corpo-lg); font-weight:600;
  color:#fff; text-decoration:none;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(6px);
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.sv-cartao-porta i{ font-style:normal; transition:transform .35s var(--ease); }
.sv-cartao-porta:hover{ background:rgba(255,255,255,.22); border-color:#fff; }
.sv-cartao-porta:hover i{ transform:translateX(4px); }
.sv-cartao-porta:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:3px; }
/* Nota: o véu deste cartão SÓ muda no telemóvel (ver a media query lá em baixo). No
   PC ele está fechado em repouso e só o nome se lê, e o véu de hover já dá 10,5:1
   medidos no texto e 16:1 nas pílulas. Reforçá-lo aqui só escurecia a foto na grelha
   parada e fazia o cartão destoar dos três irmãos. */

/* o sinal de mais, no canto — diz que há mais ali dentro antes de se lá tocar */
.sv-cartao-sinal{
  position:absolute; z-index:3;
  right:clamp(16px,1.7vw,24px);
  bottom:clamp(18px,1.9vw,26px);
  width:34px; height:34px;
  border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(6px);
  transition:transform .5s var(--ease), background .4s var(--ease), opacity .4s var(--ease);
}
.sv-cartao-sinal svg{ width:15px; height:15px; display:block; }
.sv-cartao:hover .sv-cartao-sinal,
.sv-cartao:focus-visible .sv-cartao-sinal{
  transform:rotate(45deg);
  background:rgba(255,255,255,.2);
}
/* No cartão duplo o «+» NÃO roda. Nos outros a rotação para «×» é a promessa de que
   o cartão inteiro é um botão; aqui quem leva a lado nenhum é o cartão — quem abre
   são as duas pílulas. Um «×» ao lado delas prometia um fecho que não existe.
   Tem de vir DEPOIS da regra de cima: a especificidade é a mesma e ganha a última. */
.sv-cartao--duplo:hover .sv-cartao-sinal,
.sv-cartao--duplo:focus-within .sv-cartao-sinal{ transform:none; }
.sv-cartao:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:3px; }

/* entrada: os cartões sobem quando a grelha chega ao ecrã */
.sv-grelha:not(.revelada) .sv-cartao{ opacity:0; transform:translateY(26px); }
.sv-grelha.revelada .sv-cartao{
  opacity:1; transform:none;
  transition:opacity .72s var(--ease), transform .72s var(--salto);
  transition-delay:calc(var(--i,0) * .085s);
}

/* ============ 4 · fecho no céu ============
   Substitui a placa laranja com o formulário do Clima (27-ago-2026). O esqueleto
   (.sec-final e .fim-wrap) vem do site.css, que esta página já carrega. O resto é
   CÓPIA das regras .sb-final-* do css/sobre.css: o fecho é o mesmo balcão, mas o
   sobre.css só é carregado pelo /sobre e não se toca nele a partir daqui. Se um dia
   se mexer lá na escala do título ou no espaçamento, mexe-se aqui também. */

/* A camada do céu. z-index explícito nos três andares porque tanto isto como o
   `.sec-final::before` (o véu radial do site.css) são absolutos: sem números, quem
   ganha é a ordem no HTML e o vídeo tapava o véu que segura o texto branco. */
.sv-fim-ceu{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  /* o chão, enquanto o poster não chega: a média do próprio céu em três cores.
     É o mesmo gradiente do nome do rodapé (.mf-ceu, site.css), medido de lá. */
  background:linear-gradient(180deg,#4ea0d1 0%,#b3bed0 46%,#b3bdcc 100%);
}
.sv-fim::before{ z-index:1; }
.sv-fim-wrap{ z-index:2; }

.sv-fim-wrap h2{
  font-size:clamp(30px,3.8vw,50px);
  font-weight:600; line-height:1.06; letter-spacing:var(--ls-titulo);
  text-shadow:var(--sombra-texto);
}
.sv-fim-sub{
  font-size:clamp(15px,1.35vw,18px);
  opacity:.94;
  text-shadow:var(--sombra-texto);
}
.sv-fim-acoes{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center;
}
.sv-fim-tel{
  color:#fff; text-decoration:none;
  font-size:var(--t-corpo-lg);
  text-shadow:var(--sombra-texto);
}
.sv-fim-tel strong{ font-weight:600; }
@media (hover:hover) and (pointer:fine){
  .sv-fim-tel:hover strong{ text-decoration:underline; text-underline-offset:5px; }
}

/* ============ banda das tipologias ============
   Por baixo da grelha, dentro da mesma `.sv-cinco`. Fica DENTRO e não numa secção
   própria por uma razão prática: qualquer secção sem posicionamento nesta página é
   engolida pelo degradê da folha (ver a nota da `.sv-cinco` no css/site.css). A
   aparência da pastilha é a `.fs-outro` do css/ficha.css, que esta página já carrega;
   aqui só entra o espaçamento e o rótulo. */
.sv-tipos{ margin-top:clamp(34px,4.4vw,54px); }
.sv-tipos-rotulo{
  font-size:15px; font-weight:600; color:var(--tinta-60);
  text-align:center; margin:0 0 18px;
}
/* 🔴 A grelha é PRÓPRIA e não a de três colunas do ficha.css. Com seis tipologias as três
   colunas davam duas linhas certas; com dez davam 3+3+3+1 e um órfão sozinho na última
   linha. O `auto-fit` conta sozinho: a 1180px dá cinco por linha (duas linhas certas com
   dez) e continua a fechar bem se amanhã forem oito ou doze — que é o que vai acontecer,
   porque o teto de páginas caiu a 29-ago-2026 por decisão dele. Um número fixo aqui
   parte-se à próxima tipologia, tal como já se partiu no rodapé. */
.sv-tipos .fs-outros-lista{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(10px,1.2vw,14px);
}
.sv-tipos .fs-outro{ padding:14px 16px; font-size:14.5px; }

/* ============ telemóvel ============ */
@media (max-width:860px){
  /* A `.fs-outros-lista` cai para UMA coluna no ficha.css, o que aqui daria seis
     pastilhas empilhadas numa página que é suposto ser curta — o mesmo problema que
     levou a grelha dos cartões ao dois-por-dois. Ficam duas colunas, pela mesma razão.
     A seta some: a meia largura roubava espaço ao rótulo, e «Armazéns e indústria»
     precisa dele todo. */
  .sv-tipos{ margin-top:26px; }
  .sv-tipos .fs-outros-lista{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sv-tipos .fs-outro{ padding:13px 14px; font-size:13.5px; justify-content:flex-start; }
  .sv-tipos .fs-outro::after{ content:none; }
  /* a goteira do hero no telemóvel é 22px (ficha.css): igualar, senão o título
     da secção desalinha 7px do H1 que está mesmo por cima */
  .sv-inner{ width:auto; padding:0 22px; }
  /* o hero é o das fichas: a altura e as goteiras são de lá (ficha.css) */
  .sv-marcas{ margin-top:22px; gap:9px; }
  .sv-marcas .selo-mitsubishi svg{ width:78px; }
  .sv-marcas .selo-daikin svg{ width:66px; }

  .sv-cinco-cab h2{ font-size:var(--t-titulo-mob); }
  /* o <br> FICA: escondido, as duas metades colavam-se em «frentes,a mesma» */
  /* 🚨 28-ago-2026, ordem dele: «mete o design da página de serviços no mobile igual ao
     desktop. Em vez de ser um scroll longo, é mesmo um dois por dois.»
     Uma coluna eram quatro cartões empilhados = 796px de grelha só para quatro nomes, numa
     página que é suposto ser curta. Passam a DOIS POR DOIS, a mesma leitura do PC: os quatro
     serviços cabem num ecrã e vê-se a escolha toda de uma vez, sem rolar às cegas.
     O corpo de cada cartão continua sempre aberto: num ecrã de toque não há "passar por
     cima", e obrigar a dois toques por serviço é pior. */
  .sv-grelha{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  /* mesma ordem de 27-ago: só o título. A meia largura o cartão deixa de ser uma banda
     deitada e passa a retrato — a altura acompanha a coluna (~58vw ≈ 1,35× a largura),
     senão ficavam quatro selos achatados. E TODOS com a mesma altura, incluindo o duplo:
     é o que faz a grelha ler-se como grelha e não como quatro caixas soltas. */
  .sv-cartao{ min-height:clamp(200px,58vw,260px); }
  .sv-cartao-mais{ grid-template-rows:1fr; }
  .sv-cartao-desc,
  .sv-cartao-cta,
  .sv-cartao-portas{ opacity:1; transform:none; }
  /* 🔴 29-ago-2026: a descrição que voltou aos cartões é para o rato. Aqui em cima o corpo
     fica aberto (é o que deixa as portas do cartão duplo alcançáveis sem hover), e com o
     `.sv-cartao-corpo` ancorado em baixo o texto crescia para CIMA e saía pelo topo do
     cartão — apanhado a 375px, «...causa» e «...volta ao mesmo» cortados a meio. No
     telemóvel fica só o nome, como estava antes de tudo isto. */
  .sv-cartao-desc{ display:none; }
  /* a caixa de texto encolheu para metade: a goteira de 26px e o nome a 20px+ deixavam
     «Instalação de ar condicionado» em cinco linhas coladas à borda */
  .sv-cartao-corpo{ padding:10px; padding-right:10px; }
  .sv-cartao-nome{ max-width:none; font-size:clamp(14.5px,4.1vw,18px); line-height:1.16; }
  .sv-cartao-veu{
    background:linear-gradient(180deg,
      rgba(12,26,36,.06) 18%,
      rgba(12,26,36,.44) 48%,
      rgba(12,26,36,.9) 100%);
  }
  /* ---- o cartão de duas portas, a meia largura ----
     Lado a lado as duas pílulas não cabem numa coluna de ~160px, e as duas são o ÚNICO
     caminho para a /manutencao e a /reparacao a partir desta página. Empilham, ocupam a
     largura toda do cartão e o «→» sai: numa pílula que já é do tamanho da coluna, a seta
     não diz nada de novo e é ela que empurra o rótulo para uma segunda linha. */
  .sv-cartao--duplo .sv-cartao-portas{ flex-direction:column; flex-wrap:nowrap; gap:6px; margin-top:9px; }
  .sv-cartao--duplo .sv-cartao-porta{
    width:100%;
    padding:8px 9px;
    /* medido, não estimado: a 375px o rótulo mais longo («Manutenção e limpeza») dá 115px
       de texto para 123px de caixa. A 12px dava 121 e partia-se em duas linhas — e uma
       pílula de duas linhas deixa de se ler como botão. */
    font-size:clamp(11px,3.05vw,13px);
  }
  .sv-cartao--duplo .sv-cartao-porta i{ display:none; }
  /* ⚠️ VÉU PRÓPRIO DO DUPLO, e não é gosto — é MEDIDO, e só aqui. No telemóvel o corpo
     está sempre aberto e este cartão leva o texto dos dois serviços mais duas pílulas:
     o bloco sobe para dentro da parede branca da foto, que é a mais clara das quatro.
     Com o véu comum, o branco a 15px dava 2,0:1 no percentil 5 (os irmãos davam 4,1 e
     4,9) e o nome 1,6:1. Com este: 6,3:1 e 4,5:1. Medido com o texto escondido para ler
     o fundo por trás dele, não estimado a olho.
     28-ago, REMEDIDO depois do dois por dois (percentil 95 do pixel mais claro por trás de
     cada texto, a 375px): nome 6,80:1 · pílulas 10,29:1 e 11,64:1. Melhorou, porque o texto
     desceu para a faixa escura do véu — mas é o véu que o segura. Os irmãos, para
     comparar: 12,12 · 12,96 · 9,09. */
  .sv-cartao--duplo .sv-cartao-veu{
    background:linear-gradient(180deg,
      rgba(12,26,36,0) 8%,
      rgba(12,26,36,.34) 26%,
      rgba(12,26,36,.72) 46%,
      rgba(12,26,36,.90) 72%,
      rgba(12,26,36,.94) 100%);
  }
  .sv-cartao-sinal{ display:none; }

  /* como no /sobre: os dois contactos em coluna, senão «ou liga: 915 100 172»
     ficava colado ao botão a meia largura */
  .sv-fim-acoes{ flex-direction:column; gap:16px; }
}

/* ============ ecrãs muito estreitos (320px) ============
   Visto a 320px: a coluna cai para 133px e o rótulo mais longo da pílula parte-se em duas
   linhas — 2 pílulas de 51px num cartão de 200px não deixam respirar o nome. Aperta-se a
   goteira e a calha, e volta a caber numa linha. A goteira só desalinharia de alguma coisa
   se o título da secção fosse à esquerda; é centrado, tal como o H1 do hero. */
@media (max-width:360px){
  .sv-cinco .sv-inner{ padding:0 16px; }
  .sv-grelha{ gap:8px; }
  .sv-cartao-corpo{ padding:8px; padding-right:8px; }
  .sv-cartao--duplo .sv-cartao-porta{ padding:8px 7px; font-size:10.5px; }
}

/* ============ hover: a descrição abre (29-ago-2026) ============
   Segunda tentativa. À primeira transformei estas grelhas em seis colunas lado a lado com o
   nome na vertical, copiado do leque da home, e ele vetou ao vivo: «era para deixares como
   estava, mas dares interatividade com o hover para expandir, e meter uma descrição quando
   expandisse — não era para meteres o texto vertical».
   Fica então a grelha como sempre foi, o nome sempre na horizontal, e o que o rato faz é
   abrir uma descrição curta por baixo do título. A mecânica (`grid-template-rows:0fr` que
   passa a `1fr`) já estava escrita neste ficheiro desde que os cartões tinham corpo — só
   voltou a haver conteúdo para ela abrir. */
/* Fora do rato não existe: num ecrã de toque não há «passar por cima», e sem esta regra o
   `.fs-neg-abre` era um span normal e a descrição saía impressa por cima do nome (visto a
   375px, os dois textos um em cima do outro). Ele foi explícito: «no telemóvel podes deixar
   exatamente assim, o três por dois e clicável apenas, sem hover». */
.fs-neg-abre{ display:none; }

@media (hover:hover) and (pointer:fine){
  /* ---- os negócios: descrição + «Ver mais», como nos cartões de serviço ---- */
  .fs-neg-desc{
    display:block;
    padding-top:6px;
    font-size:12.5px; line-height:1.4;
    color:rgba(255,255,255,.86);
    opacity:0; transform:translateY(4px);
    transition:opacity .28s ease, transform .28s var(--ease);
  }
  .fs-neg-cta{
    display:block;
    padding-top:7px;
    font-size:12px; font-weight:600;
    color:#fff;
    opacity:0; transform:translateY(4px);
    transition:opacity .28s ease, transform .28s var(--ease);
  }
  .fs-neg-abre{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .5s var(--ease);
  }
  .fs-neg-abre > span{ min-height:0; overflow:hidden; display:block; }
  .fs-neg:hover .fs-neg-abre,
  .fs-neg:focus-visible .fs-neg-abre{ grid-template-rows:1fr; }
  .fs-neg:hover .fs-neg-desc,
  .fs-neg:hover .fs-neg-cta,
  .fs-neg:focus-visible .fs-neg-desc,
  .fs-neg:focus-visible .fs-neg-cta{
    opacity:1; transform:none;
    transition-delay:.12s;
  }
  /* o véu do cartão escurece mais quando abre, para a descrição ter onde assentar */
  .fs-neg:hover::after,
  .fs-neg:focus-visible::after{
    background:linear-gradient(180deg, rgba(9,24,42,.10) 20%, rgba(9,24,42,.52) 52%, rgba(9,24,42,.88) 100%);
  }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  /* quem pediu menos movimento vê a descrição sempre aberta, em vez de nunca a ver */
  .sv-cartao-mais,
  .fs-neg-abre{ grid-template-rows:1fr; }
  .sv-cartao-desc,
  .sv-cartao-cta,
  .fs-neg-desc,
  .fs-neg-cta{ opacity:1; transform:none; transition:none; }
  .sv-grelha:not(.revelada) .sv-cartao{ opacity:1; transform:none; }
  .sv-cartao-foto,
  .sv-cartao-veu,
  .sv-cartao-mais,
  .sv-cartao-sinal,
  .sv-cartao-portas,
  .sv-cartao-porta{ transition:none; }
  .sv-cartao:hover .sv-cartao-foto{ transform:none; }
}

/* ============ os negócios dentro da .sv-inner ============
   🔴 DESALINHAMENTO DE 24px, apanhado a olhar para a página a 1440 (30-ago-2026).
   O `.fs-negocios` traz `padding:… 24px 0` do css/ficha.css, e ali está certo: nas
   fichas é uma secção de topo, que precisa de margem própria. Aqui em baixo já
   vive DENTRO da `.sv-inner`, que é quem manda na largura da página — e o padding
   somava-se, deixando o título e os dez cartões a começar em x=154 enquanto a
   grelha dos serviços e a faixa dos complementos começam em x=130.
   São três grelhas empilhadas e a terceira estava indentada. Só o padding
   horizontal cai: o de cima é o respiro que separa as duas perguntas. */
.sv-inner > .fs-negocios{ padding-left:0; padding-right:0; }