/* ============================================================
   PORTFÓLIO — a página imersiva, uma coisa por vez.

   A régua aqui é diferente da home: em vez de muitas seções curtas,
   são poucos capítulos que ocupam a tela inteira. O que dá a sensação
   de imersão é a MÍDIA FICAR PARADA enquanto o texto passa por ela
   (position:sticky), não animação nenhuma.

   A página inteira é escura: o fundo de papel da home volta só no
   rodapé, para o encerramento reencontrar o resto do site.
   ============================================================ */

.pg-pf{ background:#000; color:#fff; }
.pg-pf main{ display:block; }

/* rótulo pequeno em caixa alta (mesmo das páginas de serviço) */
.pg-pf .rotulo{
  font-size:clamp(11px,.9vw,13px); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--laranja); margin-bottom:1em;
}
.pg-pf .rotulo--claro{ color:var(--verde); }

/* ============ 1. ABERTURA ============ */
.pf-hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(120px,14vh,190px) var(--pad) clamp(90px,12vh,130px);
  border-radius:0 0 var(--raio-bloco) var(--raio-bloco);
  overflow:hidden;
  background:#000;
}
/* o vídeo do hero da home volta aqui, mas bem apagado: ele é textura, não assunto */
.pf-hero__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:blur(2px); opacity:.34;
}
.pf-hero__veu{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.44) 40%, rgba(0,0,0,.9) 100%),
    radial-gradient(120% 80% at 20% 50%, rgba(4,74,68,.5), transparent 70%);
}
.pf-hero__inner{ position:relative; z-index:3; max-width:1180px; }

.pf-hero__titulo{
  display:flex; flex-direction:column;
  font-size:clamp(38px,7.4vw,110px); font-weight:800; line-height:1.02;
  letter-spacing:-.03em;
}
.pf-hero__titulo .en{ color:var(--verde); }
.pf-hero__sub{
  max-width:52ch; margin-top:clamp(20px,2.6vw,34px);
  font-size:clamp(15px,1.46vw,21px); line-height:1.55;
  color:rgba(255,255,255,.72);
}

.pf-hero__scroll{
  position:absolute; left:50%; bottom:clamp(24px,4vh,46px); z-index:3;
  transform:translateX(-50%);
  width:26px; height:44px; border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.pf-hero__scroll span{
  position:absolute; left:50%; top:9px;
  width:3px; height:8px; border-radius:2px; background:var(--verde);
  transform:translateX(-50%);
  animation:pf-desce 1.8s var(--easing) infinite;
}
@keyframes pf-desce{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,18px)} }

/* ============ 2. MANIFESTO ============ */
.pf-mani{
  padding:clamp(90px,16vh,190px) var(--pad);
  display:grid; gap:clamp(28px,4vw,70px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;
  max-width:1425px; margin:0 auto;
}
.pf-mani__titulo{
  display:flex; flex-direction:column;
  font-size:clamp(32px,5.6vw,84px); font-weight:800; line-height:1.04;
  letter-spacing:-.03em;
}
.pf-mani__titulo .en{ color:var(--verde); }
.pf-mani__texto p{
  font-size:clamp(14px,1.32vw,19px); line-height:1.65;
  color:rgba(255,255,255,.66);
}
.pf-mani__texto p + p{ margin-top:1.1em; }

/* ============ 3. NÚMEROS ============ */
.pf-nums{
  padding:clamp(30px,6vh,60px) var(--pad) clamp(90px,14vh,160px);
  max-width:1425px; margin:0 auto;
}
.pf-nums__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,40px);
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:clamp(28px,3.4vw,52px);
}
.pf-num__v{
  display:block;
  font-size:clamp(38px,5.4vw,80px); font-weight:800; line-height:1;
  letter-spacing:-.035em; color:var(--verde);
}
.pf-num__v.bateu{ animation:pf-pulso .6s var(--easing); }
@keyframes pf-pulso{ 50%{ transform:scale(1.06); } }
.pf-num__l{
  display:block; margin-top:.7em; max-width:22ch;
  font-size:clamp(12px,1.04vw,15px); line-height:1.45;
  color:rgba(255,255,255,.55);
}

/* ============ 4. OS CASES ============ */
.pf-cases{ position:relative; }
.pf-cases__rotulo{
  text-align:center; margin-bottom:clamp(20px,3vh,40px);
}

/* Um capítulo por case. A mídia fica presa (sticky) enquanto o texto
   passa: é isso que faz a leitura parecer um filme e não uma lista. */
.pf-case{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,90px);
  align-items:start;
  max-width:1425px; margin:0 auto;
  padding:clamp(50px,10vh,120px) var(--pad);
}
/* o segundo, o quarto... trocam de lado, para o olho não cair no ritmo */
.pf-case:nth-of-type(even) .pf-case__media{ order:2; }

.pf-case__media{
  position:sticky; top:calc(var(--hdr-h) + clamp(16px,4vh,40px));
  display:flex; justify-content:center;
}
.pf-case__moldura{
  position:relative;
  width:min(100%, 430px);
  border-radius:clamp(20px,2.4vw,34px);
  overflow:hidden;
  background:#0d0d0d;
  box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
}
.pf-case__moldura video,
.pf-case__moldura img{
  width:100%; height:auto; display:block;
  aspect-ratio:9 / 16; object-fit:cover;
}

.pf-case__texto{
  /* a folga embaixo é o que dá pista de rolagem à mídia presa */
  padding-block:clamp(10px,6vh,80px) clamp(40px,14vh,180px);
  max-width:34rem;
}
.pf-case__idx{
  font-size:clamp(12px,1vw,14px); font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.34);
}
.pf-case__idx span{ color:var(--verde); }
.pf-case__cliente{
  margin-top:.9em;
  font-size:clamp(13px,1.11vw,16px); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.pf-case__titulo{
  margin-top:.5em;
  font-size:clamp(28px,4.2vw,60px); font-weight:800; line-height:1.06;
  letter-spacing:-.03em; color:#fff;
}
.pf-case__sub{
  margin-top:clamp(16px,1.8vw,26px); max-width:44ch;
  font-size:clamp(14px,1.25vw,18px); line-height:1.62;
  color:rgba(255,255,255,.66);
}
.pf-case__tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:clamp(20px,2.4vw,32px);
}
.pf-case__tags li{
  font-size:clamp(11px,.9vw,13px); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase;
  padding:.5em .95em; border-radius:4px;
  background:rgba(4,74,68,.8); color:#fff;
}
.pf-case__tags .is-destaque{ background:rgba(224,121,47,.85); }

.pf-case__link{
  display:inline-flex; align-items:center; gap:.6em;
  margin-top:clamp(24px,3vw,40px); min-height:44px;
  font-size:clamp(14px,1.18vw,17px); font-weight:600;
  color:var(--verde);
  box-shadow:inset 0 -1.5px 0 0 rgba(114,191,141,.4);
  transition:box-shadow .35s, color .3s;
}
.pf-case__link span{ transition:transform .35s var(--easing); }
.pf-case__link:hover{ color:#fff; box-shadow:inset 0 -1.5px 0 0 #fff; }
.pf-case__link:hover span{ transform:translateX(5px); }

/* ============ 5. FECHO ============ */
.pf-fim{
  text-align:center;
  padding:clamp(90px,16vh,180px) var(--pad) clamp(90px,14vh,160px);
  background:linear-gradient(180deg, #000 0%, #03211e 60%, var(--verde-esc) 100%);
  border-radius:var(--raio-bloco) var(--raio-bloco) 0 0;
}
.pf-fim__titulo{
  display:flex; flex-direction:column;
  font-size:clamp(30px,5.2vw,76px); font-weight:800; line-height:1.05;
  letter-spacing:-.03em;
}
.pf-fim__titulo .en{ color:var(--verde); }
.pf-fim__sub{
  max-width:56ch; margin:clamp(18px,2.2vw,30px) auto clamp(28px,3.4vw,44px);
  font-size:clamp(14px,1.32vw,19px); line-height:1.6;
  color:rgba(255,255,255,.72);
}

/* o rodapé é o mesmo do resto do site; aqui ele encosta no fecho verde */
.pg-pf .ft{ background:var(--verde-esc); }

/* ============ RESPONSIVO ============
   No celular a mídia presa não cabe: ela e o texto disputariam a mesma
   tela e sobraria pouco pros dois. Vira empilhado, mídia inteira em cima. */
@media (max-width:900px){
  .pf-mani{ grid-template-columns:1fr; align-items:start; }
  .pf-nums__grid{ grid-template-columns:repeat(2,1fr); gap:clamp(22px,5vw,34px); }
  .pf-num__l{ max-width:18ch; }

  .pf-case{
    grid-template-columns:1fr;
    gap:clamp(22px,5vw,32px);
    padding:clamp(40px,7vh,70px) var(--pad);
  }
  .pf-case:nth-of-type(even) .pf-case__media{ order:0; }
  .pf-case__media{ position:static; }
  .pf-case__moldura{ width:100%; }
  .pf-case__texto{ padding-block:0 clamp(10px,3vh,24px); max-width:none; }
}

@media (max-width:560px){
  .pf-nums__grid{ grid-template-columns:1fr; }
  .pf-num__l{ max-width:30ch; }
}

/* quem pediu menos movimento não recebe movimento nenhum */
@media (prefers-reduced-motion:reduce){
  .pf-hero__scroll span{ animation:none; }
  .pf-num__v.bateu{ animation:none; }
}