/* ============================================================
   Rúben Marques — Climatização · página Sobre nós
   Ritmo: hero fundido (cobertura + percurso + prova) → método →
   FAQ → céu. Reutiliza o kit do site.
   ============================================================ */

/* fundo azul-céu para o fecho da página, por baixo da folha */
.sb-body{
  background:linear-gradient(180deg,#3f82c4 0%,#6ea9db 46%,#a9d0ee 100%);
  min-height:100svh;
}

.sb-body .ceu{
  transform:none;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
.sb-body.pronto .ceu{ opacity:1; }

/* ---------- navbar sobre o filme ---------- */
.nav.nav--ceu{
  opacity:1; pointer-events:auto;
  color:#fff;
  background:transparent;
  box-shadow:none;
}
.nav--ceu .nav-marca{ opacity:1; pointer-events:auto; color:#fff; }
.nav--ceu .nav-marca .marca-nome,
.nav--ceu .nav-marca .marca-rm{ filter:drop-shadow(0 1px 12px rgba(15,35,65,.45)); }
.nav--ceu .nav-links a,
.nav--ceu .nav-tel{
  color:#fff;
  text-shadow:0 1px 12px rgba(15,35,65,.45);
}
.nav--ceu .nav-links a.e-atual{
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
  opacity:1;
}
.nav--solida .nav-links a.e-atual{
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
  color:var(--azul);
  opacity:1;
}

/* ---------- hero fundido ---------- */
/* ⚠️ 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.» Mesmo valor da /servicos (.sv-hero):
   ~620px/69% em desktop, ~568px/70% no telemóvel. O que fica logo por baixo é a folha
   clara (--nuvem) com o cartão da ficha a espreitar, e é isso que diz que a página
   continua sem ser preciso rolar às cegas. O clamp serve as três larguras, por isso
   o bloco do telemóvel já não repete a altura.
   z-index:1 + position:relative FICAM: sem eles o hero pintava por baixo do .ceu
   (fixed, z-index:0) e desaparecia à vista. */
/* ⚠️ SEGUNDA PASSAGEM, 27-ago-2026. À primeira ficou em 70svh e ele viu ao vivo: «o "sobre
   nós" também tá levemente pequeno demais. O hero deve estar grande o suficiente para que o
   cartão laranja NÃO se veja no primeiro ecrã.»
   É esse o critério, e é ele que dá a conta. Medido a 1366×643: a ficha começa onde o hero
   acaba e o cartão laranja arranca 74px depois (o padding de topo da secção). Com o ecrã
   menos 56px, o cartão cai sempre para lá da dobra com ~18px de folga, e o que espreita é a
   faixa clara da ficha — que é o que diz «há mais» sem entregar o cartão.
   ⚠️ Se mexeres no padding de topo da .sb-ficha, esta conta muda. Mede outra vez. */
.sb-hero{
  position:relative;
  z-index:1;
  min-height:clamp(470px, calc(100svh - 56px), 980px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:130px 24px 82px;
}
.sb-hero-fundo{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--tinta);
}
.sb-hero-fundo video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
.sb-hero-fundo video.acesa{ opacity:1; }
.sb-hero-fundo::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 64% at 50% 50%, rgba(7,20,32,.5), rgba(7,20,32,.24) 54%, rgba(7,20,32,.08) 78%),
    linear-gradient(0deg, rgba(7,20,32,.44), rgba(7,20,32,.12) 62%, rgba(7,20,32,.2));
}
.sb-folha > .folha-orla{ display:none; }

.sb-hero-inner{
  position:relative;
  width:min(100%,980px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.sb-titulo{
  font-size:clamp(42px,5vw,68px);
  font-weight:600;
  line-height:1.01;
  letter-spacing:-.027em;
  text-wrap:balance;
  text-shadow:var(--sombra-texto);
}
.sb-titulo-principal,
.sb-titulo-linha{ display:block; }
.sb-titulo-linha{
  margin-top:.08em;
  font-size:.92em;
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.02em;
}
.sb-titulo-linha strong{
  color:#f28a57;
  font:inherit;
}

.sb-ano-linha{
  margin-top:clamp(24px,3.4vh,34px);
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.5;
  color:rgba(255,255,255,.76);
  text-shadow:0 1px 14px rgba(4,18,31,.44);
}
.sb-valores-hero{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(10px,2.2vw,30px);
  margin-top:clamp(12px,2vh,20px);
}
.hv{
  position:relative;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-size:clamp(18px,2.4vw,31px);
  font-weight:500;
  letter-spacing:-.01em;
  color:#fff;
  opacity:.88;
  padding:6px 4px 10px;
  transition:opacity .2s var(--ease);
  text-shadow:0 1px 14px rgba(4,18,31,.44);
}
.hv::after{
  content:'';
  position:absolute;
  left:4px;
  right:4px;
  bottom:2px;
  height:2px;
  border-radius:2px;
  background:var(--quente);
  opacity:0;
  transition:opacity .2s var(--ease);
}
.sb-val-desc{
  min-height:2.6em;
  margin-top:clamp(6px,1vw,12px);
  max-width:54ch;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.5;
  color:rgba(255,255,255,.72);
  opacity:0;
  transition:opacity .2s var(--ease);
  text-shadow:0 1px 14px rgba(4,18,31,.44);
}
.sb-val-desc.visivel{ opacity:1; }

.sb-hero-nota{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:7px 10px;
  margin-top:clamp(12px,2vh,20px);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  line-height:1.3;
  text-shadow:0 1px 14px rgba(4,18,31,.48);
}
.sb-hero-nota strong{
  font-size:20px;
  font-weight:650;
  letter-spacing:-.02em;
}
.sb-hero-nota small{
  font:inherit;
  margin-left:.2em;
  color:rgba(255,255,255,.68);
}
.sb-hero-estrelas{
  color:#f28a57;
  font-size:15px;
  letter-spacing:.08em;
}

/* entrada do hero: título → valores → prova */
[data-entra]{ opacity:0; transform:translateY(18px); }
.sb-body.pronto [data-entra]{
  animation:sb-entra .8s var(--ease) both;
  animation-delay:calc(var(--i,0) * .12s + .2s);
}
@keyframes sb-entra{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

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

/* O metodo desta pagina passou a usar os cartoes da home (.sec-metodo--passos),
   com o CSS todo em site.css. Saiu daqui o bloco que forcava o fio vertical em
   todos os tamanhos — 27-ago-2026, a timeline de fio esta vetada. */

/* ---------- FAQ · perguntas diretas ---------- */
.sb-faq .sec-inner{ width:min(92%,820px); }
.sb-faq-lista{
  margin-top:clamp(34px,4vw,46px);
  border-top:1px solid var(--hairline);
}
.sb-faq-item{ border-bottom:1px solid var(--hairline); }
.sb-faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:21px 2px;
  background:none; border:none; cursor:pointer;
  font-family:inherit; text-align:left;
  font-size:clamp(16px,1.35vw,18.5px);
  font-weight:600; letter-spacing:-.01em;
  color:var(--tinta);
}
.sb-faq-mais{
  position:relative;
  width:16px; height:16px; flex:0 0 auto;
  transition:transform .4s var(--ease);
}
.sb-faq-mais::before, .sb-faq-mais::after{
  content:'';
  position:absolute; left:0; top:7px;
  width:16px; height:2px; border-radius:2px;
  background:var(--azul);
}
.sb-faq-mais::after{ transform:rotate(90deg); }
.sb-faq-item.aberto .sb-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. */
.sb-faq-corpo{
  display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows .45s var(--ease), visibility 0s linear .45s;
}
.sb-faq-item.aberto .sb-faq-corpo{ grid-template-rows:1fr; visibility:visible; transition-delay:0s; }
.sb-faq-txt{ overflow:hidden; }
.sb-faq-txt p{
  padding:0 2px 22px;
  font-size:15.5px; line-height:1.66;
  color:var(--tinta-60);
  max-width:60ch;
}

/* ---------- fecho no céu ---------- */
.sb-final-wrap h2{
  font-size:clamp(30px,3.8vw,50px);
  font-weight:600; line-height:1.06; letter-spacing:-.02em;
  text-shadow:var(--sombra-texto);
}
.sb-final-sub{
  font-size:clamp(15px,1.35vw,18px);
  opacity:.94;
  text-shadow:var(--sombra-texto);
}
.sb-final-acoes{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center;
}
.sb-final-tel{
  color:#fff; text-decoration:none;
  font-size:15px;
  text-shadow:var(--sombra-texto);
}
.sb-final-tel strong{ font-weight:600; }
.sb-final [data-rev]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0s);
}
.sb-final.revelada [data-rev]{ opacity:1; transform:none; }

/* ---------- hover só onde há rato ---------- */
@media (hover:hover) and (pointer:fine){
  .sb-final-tel:hover strong{ text-decoration:underline; text-underline-offset:5px; }
  .sb-faq-q:hover .sb-faq-mais::before,
  .sb-faq-q:hover .sb-faq-mais::after{ background:var(--azul-escuro); }
  .hv:hover,
  .hv:focus-visible{ opacity:1; }
  .hv:hover::after,
  .hv:focus-visible::after{ opacity:1; }
  .sb-hero-nota:hover strong{ text-decoration:underline; text-underline-offset:4px; }
}

/* ---------- telemóvel ---------- */
@media (max-width:860px){
  /* ⚠️ No telemóvel a ficha tem menos padding de topo (57px contra 74px), portanto a conta
     do desktop deixava o cartão laranja a UM PÍXEL da dobra — passava, mas por sorte, e
     qualquer mudança de tipo o punha à vista. Aqui a folga é maior e a fresta menor: o cartão
     fica 27px abaixo da dobra, medido a 375×812. */
  .sb-hero{
    min-height:calc(100svh - 30px);
    padding:110px 20px 62px;
  }
  .sb-hero-fundo::after{
    background:
      radial-gradient(ellipse 100% 66% at 50% 50%, rgba(7,20,32,.5), rgba(7,20,32,.18) 70%),
      linear-gradient(0deg, rgba(7,20,32,.58), rgba(7,20,32,.16) 65%, rgba(7,20,32,.24));
  }
  .sb-titulo{
    font-size:clamp(37px,10.8vw,48px);
    line-height:1;
  }
  .sb-titulo-linha{ font-size:.92em; margin-top:.1em; }
  .sb-ano-linha{
    max-width:28ch;
    margin-top:24px;
    font-size:15.5px;
  }
  .sb-valores-hero{
    flex-direction:column;
    gap:2px;
    margin-top:12px;
  }
  .hv{ font-size:clamp(22px,6vw,30px); padding-block:4px 8px; }
  .sb-val-desc{ min-height:3em; margin-top:6px; font-size:14.5px; }
  .sb-hero-nota{ font-size:13px; }
  .sb-hero-nota > span:last-child{ white-space:nowrap; }
  .sb-hero-nota strong{ font-size:18px; }

  .sb-final-acoes{ flex-direction:column; gap:16px; }
}

@media (max-width:860px) and (max-height:700px){
  .sb-hero{ padding-top:92px; padding-bottom:30px; }
  .sb-titulo{ font-size:clamp(34px,10vw,42px); }
  .sb-ano-linha{ margin-top:16px; }
  .sb-valores-hero{ margin-top:6px; gap:0; }
  .hv{ font-size:clamp(20px,5.5vw,26px); padding-block:2px 6px; }
  .sb-val-desc{ min-height:2.7em; margin-top:3px; }
  .sb-hero-nota{ margin-top:7px; }
}

/* ---------- sem movimento ---------- */
@media (prefers-reduced-motion: reduce){
  [data-entra]{ opacity:1; transform:none; }
  .sb-body.pronto [data-entra]{ animation:none; }
  .sb-body .ceu{ opacity:1; transition:none; }
  .sb-hero-fundo video{ transition:none; }
  .sb-rev [data-rev], .sb-final [data-rev]{
    opacity:1; transform:none; transition:none;
  }
  .sb-faq-corpo{ transition:none; }
  .sb-faq-mais{ transition:none; }
}

/* ============================================================
   QUEM SÃO — a primeira secção depois do hero.
   Cartão laranja a segurar o texto; a ficha de factos ao lado, sem caixa.
   ESCALA: o título usa o mesmo clamp do .sb-titulo (o hero desta página).
   Não é uma secção de corpo, é a segunda voz mais alta da página.
   COR: o cartão usa --quente-fundo (#C4522A) e não o --quente da marca.
   Branco sobre #D95F33 dá 3,7:1 e chumba o corpo de texto em AA; o mesmo
   laranja um passo mais escuro dá 4,6:1 e passa. O --quente vivo fica onde
   sempre esteve, nos acentos (o filete do link, o botão da navbar).
   ============================================================ */
.sb-ficha{ padding:clamp(74px,9.5vh,116px) 0 clamp(66px,8.5vh,104px); }
.sf-inner{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);
  gap:clamp(40px,5vw,86px);
  /* start, não center: a ficha é um objecto leve ao lado de um bloco pesado.
     Espalhada pela altura do cartão ficavam 180px entre linhas e lia-se a
     inacabado. Encostada ao topo, o primeiro filete e o topo do cartão fazem
     uma linha única a atravessar a página, e o ar sobra em baixo. */
  align-items:start;
}

/* ---- o cartao ---- */
.sf-cartao{
  --quente-fundo:#C4522A;
  background:var(--quente-fundo);
  color:#fff;
  border-radius:clamp(18px,1.7vw,24px);
  padding:clamp(30px,3.4vw,48px) clamp(26px,3vw,44px) clamp(28px,3.2vw,44px);
}
.sf-tit{
  margin:0;
  font-size:var(--t-titulo);   /* a escala de título de secção do site, não a do hero */
  font-weight:600;
  line-height:1.01;
  letter-spacing:-.028em;
  color:#fff;
  max-width:15ch;
  text-wrap:balance;
}
.sf-p{
  margin:clamp(18px,2vw,26px) 0 0;
  font-size:var(--t-lede);
  line-height:1.6;
  /* branco puro, não 90%: sobre o #C4522A o branco dá 4,58:1 e passa AA;
     a 90% cai para 4,02:1 e chumba. Medido, não estimado. */
  color:#fff;
  max-width:52ch;
}
.sf-p + .sf-p{ margin-top:clamp(14px,1.4vw,20px); font-weight:500; color:#fff; }
.sf-link{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:clamp(22px,2.4vw,30px);
  font-size:var(--t-corpo-lg); font-weight:600;
  letter-spacing:-.012em; color:#fff;
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1.5px solid rgba(255,255,255,.55);
}
.sf-link span{ transition:transform .5s var(--ease); }
.sf-link:hover{ border-bottom-color:#fff; }
.sf-link:hover span{ transform:translateX(5px); }

/* ---- a ficha: o filete é que faz a leitura, não a caixa ---- */
/* Frases, uma por filete — e a coluna estica-se à altura do cartão ao lado:
   as cinco linhas repartem o espaço em vez de acabarem a meio dele. */
.sf-lista{
  margin:0; padding:0; list-style:none;
  align-self:stretch;
  display:flex; flex-direction:column; justify-content:space-between;
}
.sf-linha{
  display:flex; align-items:center;
  flex:1;
  padding:clamp(16px,1.8vw,23px) 0;
  border-top:1px solid var(--hairline);
  font-size:clamp(17px,1.35vw,19.5px);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--tinta);
  text-wrap:balance;
}
.sf-linha:last-child{ border-bottom:1px solid var(--hairline); }

/* ============================================================
   EQUIPAMENTO — a saída da vitrina (só nesta página)
   O palco do equipamento vem inteiro do site.css e é partilhado com a home;
   aqui só se lhe acrescenta a saída para os serviços, sem tocar em nada do
   que é comum. Por isso a classe é própria e todo o CSS vive neste ficheiro.

   ONDE: em desktop vai ao canto inferior direito, na goteira simétrica à do
   selo das marcas e assente na mesma linha de base. Fecha a composição (o
   canto estava vazio) e mantém-se longe da faixa das marcas. Não vai por
   baixo do título porque aí não sobram 10px entre a base da frase e o topo
   do fotograma, e as peças passam-lhe por cima ao abrirem.

   NO TELEMÓVEL trocam-se as voltas: em baixo à direita mora a bola do Clima
   (fixed) e à esquerda a faixa das marcas, e entre as duas não cabe nada. Lá
   o link sobe para o vazio entre o título e a máquina, encostado à mesma
   goteira de 18px da frase, que é onde se lê como a saída daquela afirmação.

   A OPACIDADE é do JS (js/sobre.js), como a do selo: entra com a última
   palavra da frase, um pouco antes das marcas. Aqui fica a 1 de propósito —
   se o JS não correr, uma saída de navegação tem de aparecer na mesma.
   ============================================================ */
.sb-eq-saida{
  position:absolute; z-index:3;
  right:max(4vw,calc((100vw - 1180px) / 2));
  bottom:clamp(20px,3.4vh,38px);
  display:inline-flex; align-items:center; gap:9px;
  font-size:var(--t-corpo-lg); font-weight:600;
  letter-spacing:-.012em;
  color:var(--tinta);
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1.5px solid rgba(18,36,48,.34);
  will-change:opacity, transform;
}
.sb-eq-saida span{ transition:transform .5s var(--ease); }

@media (hover:hover) and (pointer:fine){
  .sb-eq-saida:hover{ border-bottom-color:var(--tinta); }
  .sb-eq-saida:hover span{ transform:translateX(5px); }
}

@media (max-width:860px){
  .sb-eq-saida{
    right:auto; bottom:auto;
    left:18px;
    /* o topo da frase é 72px (site.css) e ela ocupa três linhas no telemóvel;
       196px deixa-a respirar e fica acima do fotograma em todos os ecrãs que
       medi (375×812, 375×667 e 600×900) */
    top:196px;
  }
}

/* Sem movimento o palco vira uma coluna em fluxo (site.css) e cresce em altura, MAS o
   selo das marcas continua absoluto, ancorado ao fundo. Tentei pôr a saída no fluxo e ela
   caiu exatamente em cima do selo — vi-o renderizado, o «INSTALAMOS AS SEGUINTES MARCAS»
   passava por cima do link. Fica absoluta como está, que é o que respeita o canto do selo.
   Aqui só se desliga o movimento; a opacidade quem a repõe é o js/sobre.js. */
@media (prefers-reduced-motion: reduce){
  .sb-eq-saida{ opacity:1; transform:none; will-change:auto; }
  .sb-eq-saida span{ transition:none; }
}
/* No telemóvel sem movimento o palco cresce muito e o `top:196px` deixava o link a pairar
   ACIMA do título, solto no meio do branco. Aqui larga-se o posicionamento à mão: em fluxo,
   logo a seguir à frase (é essa a sua posição no HTML), que é onde ele já vive no telemóvel
   com movimento. Este bloco tem de ficar DEPOIS dos outros dois para os ganhar. */
@media (max-width:860px) and (prefers-reduced-motion: reduce){
  .sb-eq-saida{
    position:relative; z-index:auto;
    left:auto; top:auto; right:auto; bottom:auto;
    align-self:flex-start;
    margin-top:clamp(16px,2.2vh,24px);
  }
}

@media (max-width:860px){
  .sb-ficha{ padding:clamp(52px,7vh,80px) 0 clamp(46px,6.5vh,72px); }
  .sf-inner{ grid-template-columns:1fr; gap:clamp(28px,5vh,40px); }
  .sf-cartao{ padding:clamp(28px,7vw,38px) clamp(24px,6vw,32px) clamp(28px,7vw,36px); }
  .sf-tit{ max-width:100%; font-size:clamp(32px,8.6vw,44px); }
  .sf-p{ max-width:100%; }
}

/* ============================================================
   A BANDA DAS MARCAS — 27-ago-2026
   ============================================================
   Ordem dele: «apaga a secção do AVAC». A `.sec-equipamento` saiu inteira (era a segunda das
   duas cópias da home que ele apanhou), mas o selo das marcas vivia enterrado lá dentro e
   havia uma ordem antiga por cumprir: «mete até aqui e depois deixas a cena das marcas que
   escrevemos. E faz o mesmo para o Sobre nós.»
   É a mesma banda da /servicos (`.sv-selo`), pela mesma razão: logo a seguir ao hero, em
   fundo claro, visível sem rolar, e a dar a entender que a página continua.
   ⚠️ O `position:static; opacity:1; transform:none` NÃO é decoração. O `.marcas-selo` do
   site.css nasce `position:absolute` e invisível, à espera do JS do palco preso ao scroll —
   palco que aqui já não existe. Sem estas três linhas o selo ficava para sempre a zero. */
.sb-selo{
  /* 🚨 `position:relative; z-index:1` NÃO É DECORAÇÃO. Sem isto a camada do céu (`.ceu`,
     `position:fixed; z-index:0`) pinta POR CIMA desta banda: o fundo `--nuvem` desaparecia e
     o texto cinzento ficava sobre a fotografia, ilegível. É a mesma armadilha que já apanhou
     a `.sec-faq` e a `.sv-cinco` — qualquer secção sem posicionamento é engolida.
     Visto a olhar, não deduzido. */
  position:relative; z-index:1;
  display:flex; 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);
}
.sb-selo .marcas-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);
}
.sb-selo .marcas-selo-txt{ color:var(--tinta-60); text-shadow:none; }
.sb-selo .selo-logo{ color:var(--tinta); opacity:.82; }
@media (max-width:640px){
  .sb-selo .marcas-selo{ flex-direction:column; gap:9px; text-align:center; }
}

/* ============================================================
   O MÉTODO — «a lista despida» · 28-ago-2026
   ============================================================
   Escolha dele na prancha /decisao-metodo: «a 1».
   O que estava aqui eram os mesmos cartões da home, com as mesmas fotografias. A queixa que
   abriu isto foi: «a secção do método e a do AVAC não me estão a agradar porque são uma cópia
   do que já está na home». A cura não é trocar o texto, é trocar a FORMA — e a forma mais
   distante de um cartão com fotografia é uma lista sem fotografia nenhuma.
   O idioma é o da `.sf-lista` logo acima (afirmações separadas por filete), em escala maior,
   portanto pertence a esta página em vez de ser emprestado da outra.
   🚫 Não é a timeline de fio vertical, que está vetada: sem fio, sem pontos, sem nada a ligar
   os três passos. */
.sb-passos-sec{ padding:var(--respiro) 0; }
.sb-passos-cab h2{
  font-size:var(--t-titulo); font-weight:600;
  line-height:1.02; letter-spacing:var(--ls-titulo);
}
.sb-passos-cab p{ margin-top:10px; color:var(--tinta-60); font-size:var(--t-lede); }
.sb-passos{
  list-style:none; padding-left:0; margin:clamp(28px,4vw,44px) 0 0;
  border-top:1px solid var(--hairline);
}
.sb-passo{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(20px,4vw,64px); align-items:start;
  padding:clamp(26px,3.4vw,40px) 0;
  border-bottom:1px solid var(--hairline);
}
.sb-passo-num{
  font-size:clamp(38px,5vw,68px); font-weight:600; line-height:.9;
  letter-spacing:-.04em; color:var(--quente);
  /* tabular-nums para o «01», o «02» e o «03» ocuparem exactamente a mesma largura: sem isto
     o «1» é mais estreito e as três colunas de texto ficavam desalinhadas entre si */
  font-variant-numeric:tabular-nums;
}
.sb-passo-tit{ font-size:var(--t-citacao); font-weight:600; letter-spacing:-.015em; }
.sb-passo-desc{
  margin-top:8px; color:var(--tinta-60);
  font-size:var(--t-corpo-lg); line-height:1.55; max-width:56ch;
}
/* a entrada: quem põe `.acesa` é o js/sobre.js, ao entrarem no ecrã */
.sb-passo{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .6s var(--ease); }
.sb-passo.acesa{ opacity:1; transform:none; }
@media (max-width:640px){
  .sb-passo{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
  .sb-passo-num{ font-size:32px; }
  .sb-passos-cab h2{ font-size:var(--t-titulo-mob); }
}
@media (prefers-reduced-motion: reduce){
  /* ⚠️ só a transição; o `transform` fica, senão a linha aparecia já no sítio antes do JS */
  .sb-passo{ transition:opacity .3s ease; }
}

/* ============================================================
   MANUTENÇÃO — «o confronto». Escolha dele a 29-ago-2026, da prancha
   `decisao-manutencao.html`: «gosto mais desta», a variação C.

   PORQUE EXISTE: a página falava de instalar e calava-se sobre o que
   acontece depois. O ângulo é o que não está em mais lado nenhum do
   site — não é o que se faz (isso vive na /servicos/manutencao-ar-
   condicionado, com «O que fica feito» e «Como trabalhamos»), é o que
   custa não fazer e de quanto em quanto tempo.

   A FORMA: duas colunas frente a frente separadas por filete VERTICAL.
   A página só tem filetes horizontais (a `.sf-lista` e os `.sb-passo`),
   por isso esta secção não se lê como emprestada das outras. Sem laranja
   no corpo de propósito: o «01 02 03» do método está a um scroll de
   distância e dois laranjas grandes seguidos rimavam.
   🚫 Não é timeline nem linha do tempo: não há fio nem pontos.

   ⚠️ PENDENTES assinalados no HTML: os intervalos (1x/2x por ano) são a
   norma dos manuais e esperam confirmação do Rúben. E não há percentagem
   de poupança nenhuma — alegação de eficácia sem fonte não entra.
   ============================================================ */
.sb-manut-cab{ max-width:60ch; }
.sb-manut h2{
  font-size:var(--t-titulo); font-weight:600;
  line-height:1.02; letter-spacing:var(--ls-titulo);
  margin:0; text-wrap:balance;
}
.sb-manut-lede{
  margin:14px 0 0; color:var(--tinta-60);
  font-size:var(--t-lede); line-height:1.6; max-width:56ch;
}

/* ---- causa → consequência ----
   ⚠️ 29-ago-2026: isto ERA «sem revisão» contra «com revisão», duas listas
   independentes lado a lado. Ordem dele, a ver a página no ar: «em vez de ser
   sem revisão versus com revisão, mete o que acontece sem manutenção e depois
   consequência». A diferença não é de palavras, é de estrutura: antes as duas
   colunas não tinham relação linha a linha (a linha 2 da direita ocupava duas
   linhas e a da esquerda uma, e ninguém as lia como um par). Agora cada linha é
   UM par, e as duas metades ficam obrigatoriamente à mesma altura. */
.sb-manut-pares{ position:relative; margin:clamp(30px,3.6vw,46px) 0 0; }
/* o filete vertical é UM só, do princípio ao fim, e não o border de cada célula:
   por linha ficava picotado, com um vão em cada mudança de par */
.sb-manut-pares::before{
  content:''; position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:var(--hairline);
}
.sb-manut-cabs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,70px); }
.sb-manut-tit{
  margin:0 0 clamp(16px,1.8vw,22px); font-size:var(--t-selo);
  letter-spacing:var(--ls-alta); text-transform:uppercase; color:rgba(18,36,48,.5);
}
/* o único laranja da secção: o lado que dói */
.sb-manut-tit--efeito{ color:var(--quente); }
.sb-manut-lista{ margin:0; }
.sb-manut-par{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,70px);
  padding:clamp(13px,1.5vw,17px) 0; border-top:1px solid var(--hairline);
}
.sb-manut-par:last-child{ border-bottom:1px solid var(--hairline); }
.sb-manut-causa,
.sb-manut-efeito{ margin:0; font-size:var(--t-corpo-lg); line-height:1.5; }
/* a hierarquia entre as duas metades é de PESO e de cor, não de caixa */
.sb-manut-causa{ color:var(--tinta-60); }
.sb-manut-efeito{ color:var(--tinta); font-weight:500; }
/* o PS do terceiro par: a única linha da secção que fala à pessoa em vez de
   descrever a máquina. Bloco próprio para não se colar ao fim do parágrafo,
   e a laranja porque é onde se pede a ação. */
.sb-manut-ps{
  display:block; margin-top:clamp(8px,.9vw,11px);
  color:var(--quente); font-weight:600;
  letter-spacing:var(--ls-apertado);
}

/* ---- a faixa: fotografia + o ritmo ---- */
.sb-manut-faixa{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(26px,3.4vw,52px); align-items:center;
  margin-top:clamp(34px,4vw,54px);
}
.sb-manut-foto{ margin:0; border-radius:clamp(18px,1.7vw,24px); overflow:hidden; background:#dfe6ec; aspect-ratio:16/9; }
.sb-manut-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* a ressalva de honestidade fica JUNTO da imagem, não no rodapé: a foto é
   stock e a secção não pode deixar acreditar que aquele quarto é obra dele */
.sb-manut-cred{
  margin:9px 2px 0; font-size:var(--t-legenda);
  color:rgba(18,36,48,.5); letter-spacing:var(--ls-solto);
}
.sb-manut-ritmo p{
  margin:0 0 12px; font-size:var(--t-citacao); font-weight:600;
  letter-spacing:var(--ls-apertado); line-height:1.25; text-wrap:balance;
}
.sb-manut-ritmo p b{ color:var(--quente); font-weight:600; }
.sb-manut-nota{ margin:0; color:var(--tinta-60); font-size:var(--t-corpo-lg); line-height:1.55; max-width:46ch; }

@media (max-width:900px){
  .sb-manut h2{ font-size:var(--t-titulo-mob); }
  /* em coluna única o par empilha-se: a causa e, por baixo, a consequência.
     O filete vertical sai (não separa nada quando não há duas colunas) e o
     rótulo «Consequência» passa a viver DENTRO de cada par — sem ele, a segunda
     frase lia-se como mais uma linha da lista e o par desfazia-se. */
  .sb-manut-pares::before{ display:none; }
  .sb-manut-cabs{ grid-template-columns:1fr; gap:0; }
  .sb-manut-cabs > :last-child{ display:none; }
  .sb-manut-par{ grid-template-columns:1fr; gap:9px; padding:clamp(16px,4vw,20px) 0; }
  .sb-manut-efeito::before{
    content:'Consequência'; display:block; margin-bottom:3px;
    font-size:var(--t-selo); font-weight:600; letter-spacing:var(--ls-alta);
    text-transform:uppercase; color:var(--quente);
  }
  .sb-manut-faixa{ grid-template-columns:1fr; gap:22px; }
  .sb-manut-ritmo p{ font-size:var(--t-citacao-mob); }
}