/* ============================================================
   COMPLEMENTOS — gravação e corte a laser · impressão 3D
   ============================================================
   Duas coisas vivem aqui: a FAIXA que entra por baixo dos serviços em todas as
   páginas que os têm, e o HERO DE VÍDEO das duas páginas próprias.

   🔴 UMA SÓ FORMA DE FAIXA, E É A DA HOME (30-ago-2026, ordem dele com o ecrã à
   frente: «se for isto, está horrível… mete igual à da secção na home»).

   O que estava antes: duas variantes, com os cartões do complemento sempre
   PERPENDICULARES aos do serviço por cima — paisagem na home (leque vertical),
   retrato na /servicos (grelha deitada). Em teoria distinguia as categorias.
   Na prática, visto na /servicos, a geometria não fechava: os cartões de serviço
   ocupam duas colunas de 580px e os complementos ficavam dois retratos de 320px
   encostados à esquerda, com um buraco de 500px à direita. Nada alinhava.

   Agora é sempre a forma da home: **duas colunas iguais, à largura toda, em
   paisagem**. Na /servicos os cartões de complemento passam a ter exactamente a
   mesma largura dos de serviço (580px), portanto as duas grelhas encaixam uma na
   outra. A distinção de categoria já não vem da forma — vem da altura (215 contra
   243px) e de a faixa não ter cabeçalho nenhum.

   ⚠️ As classes `--linha` e `--vert` continuam a ser escritas pelo gerador mas já
   NÃO mudam a forma. Não voltar a pendurar geometria nelas.
   ============================================================ */

/* ---------- 1 · a faixa ---------- */

.comp-faixa{
  padding-top:clamp(22px,2.6vw,32px);
  padding-bottom:clamp(44px,6vw,72px);
}
/* Colada aos serviços de propósito (ordem dele: «sem títulos ou descrições entre
   os dois»), por isso o respiro de cima é o mínimo que separa duas grelhas — não
   o respiro de uma secção.
   🔴 E o de BAIXO desaparece: medido a 1440 na /servicos, os 52px daqui somavam
   aos 128px de `padding-top` do «Também tratamos do seu negócio» e abriam 180px
   de branco a meio da página. Quem vem a seguir já traz o seu respiro; a faixa
   não tem de acrescentar outro. */
.leque + .comp-faixa,
.sv-grelha + .comp-faixa{
  padding-top:clamp(12px,1.5vw,18px);
  padding-bottom:0;
}

/* dentro da folha branca das zonas e células não precisa de tanto em baixo */
.fs-body .folha .comp-faixa{ padding-bottom:clamp(32px,4vw,52px); }

/* O rótulo «Acompanhamentos» (30-ago, ordem dele: «na página de serviços podes
   separar com um pequeno título»). É um H2 com o peso de um rótulo, não de um
   título de secção — os complementos são subordinados aos serviços e o tamanho
   tem de dizer isso antes de a pessoa ler a palavra.
   Vem do `.fs-outros-nota` («Também tratamos de:»), que é o rótulo que esta casa
   já usa para apresentar uma fila de cartões: 15px, tinta a 64%.
   🚫 NÃO em maiúsculas, não centrado e sem ponto nem tracinho à frente — era
   assim que ficava uma eyebrow com cheiro a template de IA.
   A margem de cima é o que separa o rótulo da grelha de serviços por cima:
   somada aos 12–18px de `padding-top` da faixa colada dá 30–50px, que é a
   distância a que se lê como grupo novo sem se ler como secção nova. */
.comp-rotulo{
  margin:clamp(18px,2.4vw,32px) 0 clamp(12px,1.3vw,16px);
  font-size:15px;
  font-weight:600;
  letter-spacing:var(--ls-solto);
  line-height:1.3;
  color:var(--tinta-60);
}

.comp-grelha{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);
}

/* 🔴 UM CARTÃO SÓ OCUPA A LINHA TODA. Nas duas páginas de complemento a faixa
   mostra só o OUTRO (uma faixa que se liga a si mesma é um link para a página
   onde já se está) — e um cartão numa grelha de duas colunas ficava com metade
   da largura e ~580px de branco à direita, a 1440. */
.comp-grelha--um{ grid-template-columns:1fr; }

.comp-cartao{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:clamp(14px,1.3vw,18px);
  background:var(--tinta);
  color:#fff;
  text-decoration:none;
  isolation:isolate;
  /* a mesma altura mínima dos cartões de serviço da /servicos (clamp 200–280),
     um degrau abaixo: o complemento alinha com eles sem os ofuscar. */
  min-height:clamp(180px,23vh,230px);
  box-shadow:0 18px 46px -32px rgba(18,36,48,.5);
}

.comp-cartao-foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* O véu é mais denso em BAIXO porque é lá que vive o texto, e estas duas
   fotografias são escuras em cima e claras na zona da faísca. Medido: sem o
   degrade inferior o nome caía para 2,8:1 sobre o laranja da chapa. */
.comp-cartao-veu{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to top,
    rgba(8,18,26,.88) 0%,
    rgba(8,18,26,.62) 34%,
    rgba(8,18,26,.20) 68%,
    rgba(8,18,26,.10) 100%);
}
.comp-cartao-corpo{
  position:relative; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  height:100%;
  padding:clamp(16px,1.7vw,22px);
  gap:6px;
}
/* 🔴 A TIPOGRAFIA É A MESMA DOS CARTÕES DE SERVIÇO, ao carácter (30-ago-2026,
   ordem dele a olhar para a /servicos: «a tipografia dos cartões dos complementos
   não é a mesma. corrige»).
   O que estava aqui: 17,5px a peso 400 com entrelinha 1,5, contra os 26,6px a
   peso 600 com entrelinha 1,12 do `.sv-cartao-nome` logo por cima. Não era um
   degrau — era outro tratamento, e lia-se como se as duas grelhas tivessem sido
   desenhadas por pessoas diferentes.
   Os valores vêm do `.sv-cartao-nome` / `.sv-cartao-desc` do css/servicos.css e
   copiam-se de lá; se um dia mudarem lá, mudam aqui.
   ⚠️ O que distingue o complemento do serviço NÃO é a letra: é a ALTURA do
   cartão (215 contra 243px) e a faixa não ter cabeçalho de secção. Não voltar a
   pendurar a distinção na tipografia. */
.comp-cartao-nome{
  margin:0;
  font-size:clamp(20px,1.85vw,27px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.12;
  color:#fff;
  text-shadow:0 1px 18px rgba(10,25,45,.5);
}
.comp-cartao-desc{
  margin:0;
  font-size:var(--t-corpo-lg);
  line-height:1.5;
  color:rgba(255,255,255,.86);
  max-width:40ch;
}
.comp-cartao-seta{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:4px;
  font-size:var(--t-rotulo);
  font-weight:600;
  color:#fff;
}
.comp-cartao-seta::after{
  content:'→';
  transition:transform .4s var(--ease, cubic-bezier(.22,.61,.36,1));
}

@media (hover:hover){
  .comp-cartao{ transition:transform .5s var(--ease, cubic-bezier(.22,.61,.36,1)), box-shadow .5s var(--ease, cubic-bezier(.22,.61,.36,1)); }
  .comp-cartao:hover{ transform:translateY(-3px); box-shadow:0 26px 60px -34px rgba(18,36,48,.62); }
  .comp-cartao:hover .comp-cartao-seta::after{ transform:translateX(4px); }
  .comp-cartao-foto{ transition:transform .7s var(--ease, cubic-bezier(.22,.61,.36,1)); }
  .comp-cartao:hover .comp-cartao-foto{ transform:scale(1.03); }
}
.comp-cartao:focus-visible{
  outline:2px solid var(--quente);
  outline-offset:3px;
}

/* ---------- 2 · o hero de vídeo das duas páginas ---------- */

/* 🔴 ECRÃ INTEIRO, ordem dele (30-ago-2026). O `.fs-hero` das fichas de serviço
   mede 648px; estas duas abrem com o vídeo a ocupar tudo.
   O `100dvh` é obrigatório no telemóvel: com `100vh`, a barra do browser que
   aparece e desaparece muda a altura a meio do scroll e o hero salta. O `100vh`
   fica como recurso para quem não conhece `dvh`. */
.fs-hero.comp-hero{
  min-height:100vh;
  min-height:100dvh;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* 🔴 O QUE O VÉU FAZIA E DEIXOU DE FAZER.
   Tirado o `.fs-hero-scrim` (ordem dele), ficaram a descoberto dois textos que
   NUNCA tiveram sombra própria no css/ficha.css porque nunca precisaram: o
   `.fs-tel` («ou liga: 915 100 172») e a `.fs-migalha`. Estão a `opacity:.92` e
   a branco puro — sobre o vídeo do 3D, que é claro na faixa onde eles caem,
   deixam de se ler. O comentário do `.fs-lede` no ficha.css diz-o por escrito:
   «o resto resolve-se no véu».
   Isto NÃO repõe véu nenhum: não se pinta nada por cima do vídeo. Só se põe
   sombra DEBAIXO das letras, que é trabalho de tipografia.
   ⚠️ Não substitui a decisão que está em aberto: o H1 do 3D continua a medir
   2,6–3,0:1 sobre o vídeo, e isso resolve-se com um scrim radial no canto do
   texto ou com um vídeo mais escuro. Está no PENDENTES.md. */
.comp-hero .fs-migalha,
.comp-hero .fs-tel{
  opacity:1;
  text-shadow:0 1px 3px rgba(8,20,38,.75), 0 1px 16px rgba(8,20,38,.6);
}
/* o H1 e o lede trazem sombras calibradas PARA TER véu por baixo. Sem ele,
   sobem um degrau. */
.comp-hero h1{
  text-shadow:0 2px 4px rgba(8,20,38,.5), 0 2px 30px rgba(8,20,38,.55);
}

.comp-hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  opacity:0;
  transition:opacity .9s var(--ease, cubic-bezier(.22,.61,.36,1));
}
.comp-hero-video.acesa{ opacity:1; }

/* ---------- 3 · telemóvel ---------- */

@media (max-width:860px){
  .comp-grelha{ grid-template-columns:1fr; }
  .comp-cartao{ min-height:clamp(150px,26vh,190px); }
  .comp-cartao-desc{ max-width:none; }

  /* ⚠️ AQUI O TAMANHO AFASTA-SE DO `.sv-cartao-nome`, e é de propósito.
     O tratamento é o mesmo (peso 600, `-.022em`, entrelinha curta) — o que muda
     é o corpo, porque o problema que encolhe o nome do serviço no telemóvel não
     existe neste cartão: lá o cartão é de MEIA largura e a descrição está
     escondida (`.sv-cartao-desc{display:none}`), portanto 15,4px é um nome
     sozinho numa coluna de 160px. Aqui o cartão é de largura inteira e a
     descrição CONTINUA visível a 15px — com o nome a 15,4px os dois ficavam do
     mesmo tamanho e o título deixava de se ler como título.
     Copiar o número de lá era copiar a solução de um problema que não temos. */
  .comp-cartao-nome{ font-size:clamp(18px,5vw,22px); line-height:1.16; }

  /* 🔴 O ENQUADRAMENTO DO VÍDEO MUDA NO TELEMÓVEL, e não é capricho: é aritmética.
     O vídeo é 16:9 e o hero do telemóvel é 375x812. Com `object-fit:cover` a
     escala manda-se pela altura, e sobra **26% da largura do frame**. Centrado,
     vê-se só a faixa de 37% a 63% — e um assunto que não esteja aí desaparece.
     Foi o que ele apanhou na impressão 3D: a extrusora está a 22–45% do frame e
     no telemóvel via-se a base desfocada, sem máquina nenhuma.
     O valor por página entra pelo `--foco-movel` (inline, escrito pelo
     scripts/complementos.mjs), porque depende do frame e não do ecrã. Sem valor,
     fica centrado — que é o certo para o laser, cuja cabeça está a 42–58%.
     ⚠️ Vídeo novo num destes heros = medir onde está o assunto ANTES de publicar.
     Um vídeo bonito no PC pode não ter assunto nenhum no telemóvel. */
  .comp-hero-video{ object-position:var(--foco-movel, 50% 50%); }

  /* 🔴 A BOLA DO CLIMA TAPAVA O TELEFONE, e foi o hero a ecrã inteiro que criou
     o problema: com 100dvh as acções descem para o fundo do ecrã, que é onde a
     bola vive. Medido a 375×812 pelas LINHAS do texto (`Range.getClientRects()`,
     não a caixa do elemento, que inclui padding e mente): telefone acabava em
     x=330 · y=744–764; a `.clima-launch` ocupa x=303–359 · y=740–796. Sobrepunham
     -se em 27px e lia-se «915 100 1».
     Este respiro levanta o conteúdo acima dela. Vale para qualquer hero de ecrã
     inteiro deste site — se algum dia houver outro, leva o mesmo. */
  .fs-hero.comp-hero .fs-hero-inner{ padding-bottom:clamp(86px,12vh,104px); }
}

/* ---------- 4 · movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce){
  .comp-hero-video{ transition:none; }
  .comp-cartao,
  .comp-cartao-foto,
  .comp-cartao-seta::after{ transition:none; }
  .comp-cartao:hover{ transform:none; }
  .comp-cartao:hover .comp-cartao-foto{ transform:none; }
}