/* ============================================================
   Rúben Marques — Climatização · página Portfólio
   Ritmo: céu (hero) → folha (as molduras à espera · a prova em
   tinta) → céu (fecho). Reutiliza o kit do site; tudo o que é
   próprio desta página leva o prefixo `pf-`.

   A ideia: não há fotografias de obra ainda, e a página assume-o.
   As molduras mostram o CÉU da marca — tela preparada, não obra
   fingida. A prova a sério (as 6 avaliações reais) segura a página.
   ============================================================ */

/* fundo azul-céu por baixo do vídeo — contraste garantido do texto branco */
.pf-body{
  background:linear-gradient(180deg,#3f82c4 0%,#6ea9db 46%,#a9d0ee 100%);
  min-height:100svh;
}

/* o céu está à mostra desde o primeiro frame (sem maré nesta página) */
.pf-body .ceu{
  transform:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
.pf-body.pronto .ceu{ opacity:1; }

/* ---------- navbar sobre o céu (mesmo gesto de sobre/contactos) ---------- */
.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-nome,
.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 ---------- */
.pf-hero{
  position:relative; z-index:1;
  min-height:92svh;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  color:#fff;
  padding:130px 24px 58px;
}
/* almofada central: segura o H1 e o subtítulo.
   ⚠️ .40 não chegava — o subtítulo media 3,42 contra um limiar de 4,5. */
.pf-hero::before{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 88% 66% at 50% 42%,
    rgba(14,34,60,.58), rgba(14,34,60,.20) 56%, rgba(14,34,60,0) 78%);
}
/* ponte para a folha: escurece a base do hero. Faz duas coisas de uma vez —
   dá fundo conhecido aos factos (o céu é VÍDEO, não posso confiar num frame)
   e liga o céu à folha em tinta que vem a seguir, sem corte seco. */
.pf-hero::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:52%;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,34,60,0) 0%,
    rgba(14,34,60,.30) 40%,
    rgba(14,34,60,.62) 68%,
    rgba(14,34,60,.78) 88%,
    rgba(14,34,60,.82) 100%);
}
.pf-hero-inner{
  position:relative; z-index:1;
  margin-block:auto;          /* centra no espaço livre e empurra os factos p/ a base */
  max-width:900px;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px,2.2vw,24px);
}
.pf-titulo{
  font-size:clamp(44px,6.4vw,84px);
  font-weight:600; line-height:1.02; letter-spacing:-.025em;
  text-shadow:var(--sombra-texto);
}
/* ⚠️ 19px media 3,29 sobre a nuvem e o limiar do texto normal é 4,5. A partir
   de 24px o limiar passa a 3,0 — sobe o tamanho em vez de escurecer mais o céu.
   Ganha-se hierarquia de caminho (o sub era miúdo debaixo de um H1 de 84px). */
.pf-hero-sub{
  font-size:clamp(17px,1.9vw,24px);
  opacity:.95;
  max-width:52ch;
  text-shadow:var(--sombra-texto);
}

/* ---------- os factos de confiança, no hero ----------
   A página não tem fotografias de obra; a prova tem de estar acima da dobra.
   Nada de facto-sussurro em maiúsculas de 11px: os números têm peso a sério,
   senão lê-se como mobília e não como argumento. */
.pf-factos{
  /* ⚠️ z-index OBRIGATÓRIO: `::after` é o último filho do hero, logo pinta POR
     CIMA deste bloco. Sem isto o scrim passa à frente do texto e os números
     saem lavados — e a medição de contraste não o apanha, porque mede o fundo
     a assumir o texto em cima. Só se vê com os olhos. */
  position:relative; z-index:1;
  list-style:none;
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(22px,3.4vw,54px);
  text-align:center;
}
.pf-facto{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
}
/* filete a separar — nunca à esquerda do primeiro (metade do gap) */
.pf-facto + .pf-facto::before{
  content:'';
  position:absolute; left:calc(-1 * clamp(11px,1.7vw,27px));
  top:.4em; bottom:.25em;
  width:1px;
  background:rgba(255,255,255,.26);
}
/* ⚠️ estrelas BRANCAS, não em `--quente`. Medido: o quente sobre o scrim escuro
   da base do hero dá 1,26 — as duas luminâncias são quase iguais e as estrelas
   desaparecem. O acento quente vive no CTA da navbar, não aqui. */
.pf-facto-estrelas{
  color:#fff;
  font-size:clamp(12px,1.05vw,14px);
  letter-spacing:.16em;
  line-height:1;
  text-shadow:var(--sombra-texto);
}
.pf-facto-num{
  font-size:clamp(30px,3.4vw,44px);
  font-weight:600; line-height:1;
  letter-spacing:-.02em;
  text-shadow:var(--sombra-texto);
}
.pf-facto-nome{
  font-size:clamp(12.5px,1.05vw,14px);
  line-height:1.42;
  opacity:.92;
  text-shadow:var(--sombra-texto);
}

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

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

/* ---------- as molduras à espera ---------- */
.pf-molduras{
  list-style:none;
  margin-top:clamp(44px,5vw,68px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,24px);
}
/* cartão de categoria: o céu da marca com o nome DENTRO.
   O nome dentro é o que faz o cartão ler como peça desenhada e não
   como uma fotografia que não carregou. */
.pf-moldura{
  position:relative;
  aspect-ratio:4/5;
  border-radius:18px;
  overflow:hidden;
  display:flex; align-items:flex-end;
  box-shadow:inset 0 0 0 1px rgba(18,36,48,.10);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.pf-vidro{
  position:absolute; inset:0;
  background-size:cover;
  background-position:var(--pos,50% 50%);
}
/* scrim em baixo: dá contraste ao nome branco (regra do 06-ASSETS) */
.pf-vidro::after{
  content:'';
  position:absolute; inset:0;
  /* ⚠️ calibrado por MEDIÇÃO, não a olho: a foto da indústria tem betão ao sol
     por trás do rótulo (luminância ~0,82) e a 74% de scrim falhava AA (3,77).
     A partir de ~80% de alfa na faixa do nome, os 4 cartões passam. */
  background:linear-gradient(180deg,
    rgba(14,34,60,0) 26%,
    rgba(14,34,60,.38) 56%,
    rgba(14,34,60,.74) 78%,
    rgba(14,34,60,.90) 100%);
}
/* ⚠️ Estas fotografias são ILUSTRATIVAS do tipo de espaço — NÃO são obras do
   Rúben (ele ainda não tem fotografias do próprio trabalho). A nota por baixo da
   grelha diz isso em voz alta; trocar por obras reais quando existirem.
   ⚠️ 16-ago-2026: as duas primeiras eram GERADAS POR IA (Cinema Studio 2.5) e
   SAÍRAM por ordem do Santiago — todas as quatro são agora fotografia real de
   stock (Pexels, licença comercial). Não voltar a pôr imagem gerada aqui: esta
   é a página onde o site fala do trabalho deles. Proveniência em
   ref/stock-fotos/FOTOS.md. */
.pf-moldura:nth-child(1) .pf-vidro{ background-image:url('../assets/fotos/portfolio/escritorio-split-1000.webp'); --pos:50% 50%; }
.pf-moldura:nth-child(2) .pf-vidro{ background-image:url('../assets/fotos/portfolio/comercio-cafe-1000.webp');    --pos:50% 50%; }
/* Estas duas escaparam à conversão e serviam 470 KB de JPG a 1600 px para pintar uma
   moldura de 1000×1250. Recortadas em retrato pelo mesmo ponto de interesse que o --pos
   já indicava, e convertidas — o --pos deixa de ser preciso porque o recorte já o aplica. */
.pf-moldura:nth-child(3) .pf-vidro{ background-image:url('../assets/fotos/portfolio/obra-industrial-1000.webp');  --pos:50% 50%; }
.pf-moldura:nth-child(4) .pf-vidro{ background-image:url('../assets/fotos/portfolio/obra-open-space-1000.webp');  --pos:50% 50%; }

.pf-moldura-nome{
  position:relative;
  padding:clamp(16px,1.6vw,22px);
  color:#fff;
  font-size:clamp(16px,1.35vw,19px);
  font-weight:600;
  letter-spacing:-.01em;
  text-shadow:0 1px 16px rgba(14,34,60,.5);
}

.pf-nota{
  margin-top:clamp(34px,4vw,52px);
  font-size:clamp(15px,1.25vw,16.5px);
  line-height:1.6;
  color:var(--tinta-60);
  max-width:58ch;
}

/* Legenda da grelha, não parágrafo novo: por isso vive COLADA às molduras
   (18-22px, não os 34-52px da .pf-nota) e ao centro — quem lê os quatro
   rótulos cai nela a seguir. Pequena e apagada de propósito: é uma ressalva
   honesta, não um argumento de venda. */
.pf-nota--ilustrativa{
  margin:clamp(18px,2vw,22px) auto 0;
  max-width:44ch;
  text-align:center;
  font-size:clamp(13.5px,1.05vw,14.5px);
  /* fica em --tinta-60 e não mais claro: a 13.5px isto é texto normal, precisa
     de 4.5:1. Medido sobre a folha, o -60 dá 4,8; clarear reprovava AA. */
  color:var(--tinta-60);
  letter-spacing:.005em;
  /* sem isto o telemóvel deixava «nossos.» sozinho na 3.ª linha */
  text-wrap:balance;
}

/* ---------- a prova: fundo tinta, as avaliações reais ---------- */
.pf-prova{
  position:relative;
  background:var(--tinta);
  color:var(--nuvem);
  overflow:hidden;
}
/* (`.pf-agregado` e `.pf-estrelas` saíram com o agregado desta secção — o facto
   5,0 · 6 avaliações passou para os factos do hero.) */
.pf-vozes{
  list-style:none;
  margin-top:clamp(40px,4.6vw,60px);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,34px);
}
.pf-voz{
  padding:clamp(24px,2.4vw,32px);
  border-radius:20px;
  background:rgba(247,250,252,.05);
  box-shadow:inset 0 0 0 1px rgba(247,250,252,.14);
  display:flex; flex-direction:column; gap:16px;
}
.pf-voz blockquote{
  font-size:clamp(15.5px,1.3vw,17.5px);
  line-height:1.6;
  color:rgba(247,250,252,.92);
}
.pf-voz-quem{
  font-size:14px;
  font-weight:600;
  color:var(--nuvem);
  /* o traço quente que assina, como nos testemunhos da home */
  padding-top:14px;
  position:relative;
  /* encosta as assinaturas à base: alinham entre cartões da mesma linha */
  margin-top:auto;
}
.pf-voz-quem::before{
  content:'';
  position:absolute; top:0; left:0;
  width:22px; height:2px; border-radius:2px;
  background:var(--quente);
}
.pf-voz-quem span{
  font-weight:400;
  color:rgba(247,250,252,.5);
}

/* a folha desta página COMEÇA em tinta (a prova) — logo a orla que a liga ao
   hero tem de esbater para o ESCURO, senão fica corte seco. O fim da folha é
   claro (a galeria), por isso o `.folha-fim` do site serve tal e qual.
   Regra: cada esbatimento tem de partir da cor da secção que lhe fica ao lado. */
.pf-folha .folha-orla{
  background:linear-gradient(180deg,
    rgba(18,36,48,0) 0%,
    rgba(18,36,48,.58) 52%,
    var(--tinta) 100%);
}

/* ---------- fecho no céu ---------- */
.pf-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);
}
.pf-final-sub{
  font-size:clamp(15px,1.35vw,18px);
  opacity:.94;
  text-shadow:var(--sombra-texto);
}
.pf-final-acoes{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center;
}
.pf-final-tel{
  color:#fff; text-decoration:none;
  font-size:15px;
  text-shadow:var(--sombra-texto);
}
.pf-final-tel strong{ font-weight:600; }
.pf-final [data-rev]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d,0s);
}
.pf-final.revelada [data-rev]{ opacity:1; transform:none; }

/* ---------- hover só onde há rato ---------- */
@media (hover:hover) and (pointer:fine){
  .pf-final-tel:hover strong{ text-decoration:underline; text-underline-offset:5px; }
  .pf-moldura:hover{
    transform:translateY(-4px);
    box-shadow:inset 0 0 0 1px rgba(18,36,48,.16), 0 16px 40px rgba(15,30,50,.12);
  }
}

/* ---------- telemóvel ---------- */
@media (max-width:860px){
  .pf-hero{ min-height:80svh; padding:110px 20px 84px; }
  /* ⚠️ os scrims TÊM de ser recalibrados aqui: o hero encolhe de 828 para 650px,
     logo as mesmas percentagens caem sobre outras zonas do texto. Medido a 375:
     com os valores de desktop o subtítulo dava 3,23 e o H1 ficava no fio (3,01). */
  .pf-hero::before{
    background:radial-gradient(ellipse 130% 62% at 50% 38%,
      rgba(14,34,60,.68), rgba(14,34,60,.24) 58%, rgba(14,34,60,0) 84%);
  }
  .pf-hero::after{
    height:60%;
    background:linear-gradient(180deg,
      rgba(14,34,60,0) 0%,
      rgba(14,34,60,.34) 34%,
      rgba(14,34,60,.62) 60%,
      rgba(14,34,60,.80) 86%,
      rgba(14,34,60,.84) 100%);
  }
  /* três colunas ainda cabem a 375 (~90px cada); o que aperta é o gap */
  .pf-factos{ gap:16px; }
  .pf-facto + .pf-facto::before{ left:-8px; }
  .pf-facto-nome{ font-size:12px; }
  .pf-molduras{ grid-template-columns:repeat(2,1fr); }
  /* ⚠️ Apanhado nos OLHOS, não no código: a bola do Clima é fixed (right:24px,
     60px de lado → ocupa x 291–351 a 375) e TAPAVA a palavra «trabalhos» desta
     linha. Numa legenda qualquer encolhia-se de ombros; nesta não, porque é a
     ressalva que separa ilustrar de afirmar. O padding simétrico mantém-na
     opticamente ao centro e trava o texto em x≈285, antes da bola. */
  /* ⚠️ A bola do Clima é `fixed` (x 299–359 a 375): acompanha o viewport, por isso
     NENHUM espaçamento vertical a evita — só manter o texto fora da coluna dela.
     Era isso que os 76px simétricos faziam, mas com a frase longa custavam SEIS
     linhas e partiam «pô-las» ao meio. Agora o recuo é só à DIREITA, do tamanho da
     bola: o texto ganha ~50px de largura, continua a acabar antes dela, e passa a
     alinhar à esquerda como o lede da secção logo acima (ao centro, uma legenda
     desta altura ficava com as pontas todas desencontradas). */
  .pf-nota--ilustrativa{
    text-align:left;
    padding-right:76px;
    margin-inline:0;
    max-width:none;
  }
  .pf-vozes{ grid-template-columns:1fr; }
  .pf-final-acoes{ flex-direction:column; gap:16px; }
  /* o hover não existe no telemóvel — anula qualquer resto de estado
     (regra do :hover que vaza para mobile por especificidade) */
  .pf-moldura{ transform:none; }
}

/* ---------- sem movimento ---------- */
@media (prefers-reduced-motion: reduce){
  [data-entra]{ opacity:1; transform:none; }
  .pf-body.pronto [data-entra]{ animation:none; }
  .pf-body .ceu{ opacity:1; transition:none; }
  .pf-rev [data-rev], .pf-final [data-rev]{
    opacity:1; transform:none; transition:none;
  }
  .pf-vidro{ transition:none; }
}