/* =========================================================
   TELECOM Segurança Eletrônica | TELA DE PORTFÓLIO
   Depende de css/styles.css (tokens, reset, .brand, .btn,
   .mesh, cabeçalho, rodapé e a revelação no scroll).
   A foto é o conteúdo: a página só dá moldura e legenda.
   ========================================================= */

/* =========================================================
   BARRA: VOLTAR
   Primeira coisa da barra, antes da marca: quem entrou pelo
   portfólio lê a saída antes do resto. Link de texto: é caminho
   de volta, não ação, e o único botão da barra segue o orçamento.
   ========================================================= */
.hd__back{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  padding-right:clamp(10px,1.6vw,16px);
  border-right:1px solid var(--line);
  font-size:14.5px; font-weight:500; white-space:nowrap;
  color:var(--txt-2); text-decoration:none;
  transition:color .18s ease;
}
.hd__back svg{
  width:16px; height:16px; fill:currentColor;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.hd__back:hover{ color:var(--acc-lo); }
/* a seta anda para trás no hover: o gesto já diz para onde o link vai */
.hd__back:hover svg{ transform:translateX(-3px); }

/* nesta faixa o menu completo, os dois ícones e o botão já tomam a
   linha inteira: o link entraria por cima deles. O caminho de volta
   logo abaixo, na abertura da página, continua no lugar */
@media (min-width:1025px) and (max-width:1259px){
  .hd__back{ display:none; }
}

/* com o menu em folha lateral a barra some por trás do véu: o link
   sai junto da marca, senão ficaria solto sobre a tela escurecida */
@media (max-width:1024px){
  .hd__in > .hd__back{ transition:opacity .24s ease; }
  .hd.is-nav-open > .hd__in > .hd__back{ opacity:0; pointer-events:none; }
}

/* ---------- celular ----------
   É no celular que o voltar mais serve: quem chega ao portfólio por
   um link solto não tem para onde ir. Ele fica, e quem cede espaço
   são as peças da barra que se repetem em outro lugar da página. */

/* a assinatura da marca é a linha mais larga da barra e já sai
   inteira em telas menores (styles.css); aqui ela sai antes: o nome
   sozinho continua identificando, e ela volta na folha do menu */
@media (max-width:480px){
  .hd__in > .brand .brand__sub{ display:none; }
}

/* aqui a palavra sai e fica só a seta, sem o filete: numa barra de
   celular a seta encostada na margem já se lê como voltar, e o filete
   só cobrava espaço do nome. Caixa de 40px como alvo de dedo, puxada
   para a esquerda para a seta cair na margem do conteúdo, alinhada
   com o rastro (Início > Portfólio) logo abaixo.
   O overflow na marca é rede de segurança: com um item a mais na
   barra, em tela fora de padrão o nome corta na borda em vez de
   imprimir sobre os ícones */
@media (max-width:600px){
  .hd__back{
    justify-content:center;
    width:40px; height:40px;
    margin-left:-9px; padding-right:0;
    border-right:0;
    color:var(--txt);
  }
  .hd__back__t{ display:none; }
  .hd__back svg{ width:22px; height:22px; }
  .hd__in > .brand{ overflow:hidden; }

  /* a barra do portfólio carrega um item a mais que a da home — a seta
     de voltar, colada na margem — e quem pagava por ele era a marca:
     em tela estreita o nome batia nos ícones e cortava na borda. O
     símbolo e o nome descem um ponto juntos, para a proporção entre
     eles não quebrar, e a marca cheia continua na cabeça da folha do
     menu, que tem a linha só para ela */
  .hd__in > .brand .brand__mark{
    width:clamp(28px,7.6vw,38px); height:clamp(28px,7.6vw,38px);
  }
  .hd__in > .brand .brand__name{ font-size:clamp(14px,4vw,21px); }
}

/* de 601px até a folga do tablet a barra volta a carregar tudo de uma
   vez — o voltar com a palavra, a marca inteira e o botão — e é a
   assinatura em mono que apanha: some sob os ícones. Quem cede é o
   botão, que na home é a única ação da barra mas aqui se repete a dois
   dedos dali, na abertura da página. A marca fica inteira */
@media (max-width:759px){
  .hd__act .btn{ display:none; }
}

/* sem a palavra sobra folga para o telefone continuar na barra: só
   nas telas fora de padrão ele sai, e o número segue no pé do menu,
   no fim da página e no rodapé */
@media (max-width:359px){
  .hd__act .hd__ico:not(.hd__ico--wa){ display:none; }
}

/* =========================================================
   ABERTURA
   Faixa escura logo abaixo da barra clara, com a mesma leitura
   do banner da home, sem foto: aqui as fotos vêm na grade.
   ========================================================= */
.pfh{
  position:relative; isolation:isolate;
  background:var(--ink); color:var(--txt-inv);
  padding:clamp(40px,6vw,74px) 0 clamp(52px,8vw,88px);
  overflow:hidden;
}
.pfh::after{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(115% 78% at 82% -10%, rgba(212,42,42,.22), transparent 58%),
    radial-gradient(95% 72% at 4% 106%, rgba(14,31,58,.8), transparent 64%);
}
/* a malha da marca fica só nas bordas: no centro ela atrapalharia o texto */
.pfh .mesh{ opacity:.4; }
.pfh__in{ position:relative; z-index:1; }

/* ---------- caminho de volta ---------- */
.crumb{
  display:flex; align-items:center; gap:7px;
  font-size:15px; color:var(--txt-inv2);
}
.crumb a{ color:var(--txt-inv2); text-decoration:none; transition:color .18s ease; }
.crumb a:hover{ color:var(--acc-hi); }
.crumb svg{ width:15px; height:15px; fill:currentColor; opacity:.55; }
.crumb [aria-current]{ color:var(--acc-hi); font-weight:600; }

.pfh__kick{
  display:block; margin-top:clamp(22px,3.4vw,30px);
  font-family:"IBM Plex Mono", monospace;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acc-hi);
}
.pfh__h1{
  margin-top:14px;
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 112;
  font-weight:800;
  font-size:clamp(2.05rem,5.4vw,3.5rem);
  line-height:1.03; letter-spacing:-.025em;
  color:#fff; text-wrap:balance;
}
.pfh__lead{ margin-top:18px; max-width:58ch; color:var(--txt-inv2); }

/* ---------- os números que a empresa já mostra na home ---------- */
/* mesma leitura dos números da home: a etiqueta em mono por cima,
   o valor em Archivo embaixo */
.pfh__facts{
  display:flex; flex-wrap:wrap; gap:16px 34px; margin:0;
  margin-top:clamp(26px,4vw,34px);
  padding-top:clamp(22px,3vw,28px);
  border-top:1px solid var(--line-d);
}
.pfh__fl{
  font-family:"IBM Plex Mono", monospace;
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt-inv2);
}
.pfh__fn{
  margin:6px 0 0;
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 112;
  font-variant-numeric:tabular-nums;
  font-weight:800; font-size:1.34rem; line-height:1; color:var(--acc-hi);
}

.pfh__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(26px,4vw,34px); }

/* =========================================================
   GALERIA
   ========================================================= */
.pfg{ background:var(--paper-2); padding:clamp(52px,7vw,92px) 0 clamp(62px,9vw,108px); }

/* ---------- grade ---------- */
.pfl{
  display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(3,1fr);
}
/* a peça não é clicável: é foto com legenda, sem hover que prometa
   uma abertura que não existe */
.pfi{
  position:relative; display:block; width:100%;
  padding:0; margin:0;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow);
}

.pfi__ph{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; }
.pfi__ph img{ width:100%; height:100%; object-fit:cover; }
/* o degradê garante a legenda sobre qualquer foto, céu claro incluso */
.pfi__ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,12,14,.32) 0%, rgba(11,12,14,0) 32%,
                                     rgba(11,12,14,.62) 72%, rgba(11,12,14,.9) 100%);
}

.pfi__cap{
  position:absolute; inset:auto 0 0; z-index:1;
  display:grid; gap:5px;
  padding:16px clamp(14px,1.5vw,18px) clamp(14px,1.6vw,17px);
}
.pfi__cat{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--acc-hi);
}
.pfi__t{
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 104;
  font-weight:700; font-size:1.02rem; line-height:1.2; letter-spacing:-.01em;
  color:#fff; text-wrap:balance;
}

/* a linha da galeria tem duas versões: a longa no desktop, a curta no celular */
.pfg__lead--short{ display:none; }

.pfg__note{ margin-top:clamp(28px,4vw,38px); font-size:.95rem; color:var(--txt-2); }
.pfg__note a{ color:var(--acc-ink); font-weight:600; text-underline-offset:3px; }
.pfg__note a:hover{ color:var(--acc-lo); }
/* a nota também tem duas versões: no celular sobra só o essencial */
.pfg__note--short{ display:none; }


/* ---------- "ver mais": a última foto ----------
   Na grade de três colunas a última foto cai sozinha na quarta linha e
   deixa dois vãos abertos. Ela passa a entrar só a pedido, por um botão
   centrado embaixo da grade — a mesma pastilha escura dos outros botões
   do site, com a seta que aponta para onde a foto vai aparecer.
   Só existe com JS: sem ele o botão esconderia uma foto que ninguém
   teria como abrir. E só no desktop: a partir de duas colunas as dez
   fotos fecham a fileira certinho, não sobra ninguém sozinho. */
.pfg__act{ display:none; }

@media (min-width:1081px){
  .js .pfl:not(.is-all) .pfi--last{ display:none; }

  .js .pfg__act{
    display:flex; justify-content:center;
    margin-top:clamp(26px,3.4vw,36px);
  }

  /* texto e seta em branco: aqui a pastilha só abre e fecha a galeria,
     não é uma chamada de ação — o vermelho segue com o orçamento */
  .pfg__more{ color:#fff; }

  /* a seta gira quando a foto entra: o botão passa a apontar de volta */
  .pfg__more__ch{ transition:transform .26s cubic-bezier(.2,.7,.3,1); }
  .pfg__more[aria-expanded="true"] .pfg__more__ch{ transform:rotate(180deg); }

  /* o contorno de foco segue a pastilha, não o raio miúdo do padrão */
  .pfg__more:focus-visible{ border-radius:100px; }
}

/* =========================================================
   CHAMADA FINAL
   ========================================================= */
.pfc{ text-align:center; }
.pfc__in{ max-width:640px; margin-inline:auto; }
.pfc .sec__h2{ margin-top:0; }
.pfc__p{ margin-top:18px; color:var(--txt-inv2); }
/* a chamada final também encurta: a cobertura completa já está no topo da página */
.pfc__p--short{ display:none; }
.pfc__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width:1080px){
  .pfl{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:660px){
  .pfh__facts{ gap:14px 26px; }
  .pfh__cta .btn{ flex:1 1 auto; }
  /* no celular a foto ocupa a largura inteira: é ela que vende o serviço */
  .pfl{ grid-template-columns:1fr; }
  .pfi__ph{ aspect-ratio:4/3; }
  /* na tela estreita a linha da galeria vem resumida: o que importa é a foto */
  .pfg__lead--long{ display:none; }
  .pfg__lead--short{ display:inline; }
  .pfg__note--long{ display:none; }
  .pfg__note--short{ display:inline; }
  .pfc__p--long{ display:none; }
  .pfc__p--short{ display:inline; }
}

@media (max-width:400px){
  .pfh__cta{ flex-direction:column; align-items:stretch; }
}

@media print{
  .pfl{ grid-template-columns:repeat(2,1fr); }
}