/* =====================================================================
   Sultech Soluções — página de portfólio (/portfolio.html)
   Mesma direção do site: preto do banner, azul elétrico, ciano da logo
   e o corte diagonal ("blade") como elemento de assinatura.
   ===================================================================== */

/* =====================================================================
   1. TOPO — o gestor à frente da marca
   ===================================================================== */
.pf-top{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--ink-2);
  padding-top:calc(var(--hdr-h) + clamp(1.8rem,3.6vw,3rem));
}
/* o mesmo corte diagonal e o brilho azul das páginas de serviço */
.pf-top::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(112deg, transparent 52%, rgba(18,87,245,.34) 52.2%, rgba(18,87,245,.34) 68%, transparent 68.2%),
    linear-gradient(112deg, transparent 70%, rgba(47,212,242,.18) 70.2%, rgba(47,212,242,.18) 76%, transparent 76.2%),
    radial-gradient(ellipse at 84% 26%, rgba(18,87,245,.32), transparent 60%);
  opacity:.5;
}
/* veu inferior: o banner morre dentro da faixa de numeros em vez de cortar seco */
.pf-top::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-inline:0; bottom:0; height:34%;
  background:linear-gradient(to top, var(--ink-2) 6%, rgba(7,11,20,.55) 46%, transparent);
}

.pf-top__in{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
  min-height:clamp(430px,58svh,600px);
}
.pf-top__copy{
  align-self:center;
  max-width:40rem;
  padding-bottom:clamp(2.6rem,5vw,4.4rem);
}

.pf-role{
  font-size:calc(var(--fs-lg) * 1.3); font-weight:600;
  color:var(--txt-dim);
  margin-bottom:.5rem;
}

/* mesmo padrao dos titulos de secao: base clara e a palavra-chave em azul.
   o peso e a cor de base vem da regra geral de h1 */
.pf-name{
  font-size:calc(var(--fs-h1) * 1.45);
  letter-spacing:-2px; line-height:1.02;
  text-wrap:balance; max-width:16ch;
  margin-bottom:.85rem;
}
.pf-name em{ color:var(--banner-azul-cl); }

.pf-lede{
  color:#C2D2E4;
  font-size:calc(var(--fs-lg) * 1.28);
  line-height:1.6; max-width:44ch;
  text-wrap:pretty;
  margin-top:1.15rem;
}
.pf-lede b{ color:#fff; font-weight:700; }

.pf-acts{
  display:flex; flex-wrap:wrap; gap:.9rem;
  margin-top:clamp(1.6rem,2.8vw,2.2rem);
}
.pf-acts .btn{
  font-size:var(--fs-lg); font-weight:700; padding-inline:1.9em;
  clip-path:none; border-radius:4px;
}

/* a foto do dono encosta na base da faixa de números */
.pf-top__fig{
  position:relative; margin:0; align-self:end;
  justify-self:end; width:min(520px,100%);
}
.pf-top__fig::before{
  content:""; position:absolute; z-index:-1;
  left:4%; right:4%; top:6%; bottom:0;
  background:
    linear-gradient(200deg, rgba(18,87,245,.32), transparent 64%),
    radial-gradient(ellipse at 50% 60%, rgba(47,212,242,.22), transparent 66%);
  clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
/* brilho no pe da figura: o gestor assenta na faixa em vez de flutuar */
.pf-top__fig::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-8%; right:-8%; bottom:-2%; height:32%;
  background:radial-gradient(ellipse at 50% 100%, rgba(47,212,242,.28), rgba(18,87,245,.12) 44%, transparent 72%);
}
.pf-top__fig img{
  width:100%; height:auto; display:block;
  filter:drop-shadow(-14px 14px 34px rgba(0,0,0,.7));
  animation:riseIn 1.1s var(--ease) both .1s;
}

/* =====================================================================
   2. MÉTODO — como o serviço é conduzido
   trilha numerada no topo (as etapas ligadas por uma linha) e, sob cada
   número, o cartão com o painel de ícone, o título e a explicação
   ===================================================================== */
.pf-metodo{
  --calha:clamp(1.2rem,2.2vw,2rem);     /* espaco entre as colunas */
  --calha-y:clamp(1rem,1.8vw,1.5rem);
  --selo:clamp(46px,4vw,54px);          /* medida do selo numerado */
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:var(--calha); row-gap:var(--calha-y);
}
.pf-passo{ position:relative; display:flex; flex-direction:column; }

/* ---- a trilha: linha continua atravessando a coluna, selo por cima ---- */
.pf-passo__trilho{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:var(--selo);
  margin-bottom:clamp(1.1rem,2.2vw,1.6rem);
}
.pf-passo__trilho::before{
  content:""; position:absolute; z-index:0;
  top:50%; transform:translateY(-50%); height:2px;
  left:calc(var(--calha) / -2); right:calc(var(--calha) / -2);
  background:linear-gradient(90deg, rgba(10,90,212,.28), rgba(10,90,212,.28));
}
/* a linha nao passa da largura do bloco nas pontas */
.pf-passo:first-child .pf-passo__trilho::before{ left:0; }
.pf-passo:last-child  .pf-passo__trilho::before{ right:0; }

/* selo com o numero da etapa, no mesmo corte diagonal da marca */
.pf-passo__n{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--selo); height:var(--selo);
  font-size:1.05rem; font-weight:800; letter-spacing:-.02em;
  color:#fff;
  background:linear-gradient(102deg, var(--banner-azul) 0%, var(--blue) 100%);
  box-shadow:0 10px 22px -12px rgba(10,90,212,.85);
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
}

/* ---- o cartao ---- */
.pf-passo__box{
  flex:1;
  display:flex; flex-direction:column;
  background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--ink-line);
  padding:1.1rem 1.3rem 1.6rem;
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.pf-passo__box:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(10,90,212,.4), 0 22px 40px -26px rgba(10,20,36,.55);
}

/* painel do icone: mesmo azul da marca, bem claro, com as faixas diagonais */
.pf-passo__fig{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; place-items:center;
  aspect-ratio:16 / 10;
  max-height:clamp(150px,13vw,180px);   /* em 2 colunas o painel nao estica demais */
  margin-bottom:1.15rem;
  background:linear-gradient(150deg, #E8F0FE 0%, #D8E6FD 100%);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.pf-passo__fig::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(112deg, transparent 58%, rgba(18,87,245,.09) 58.2%, rgba(18,87,245,.09) 72%, transparent 72.2%),
    linear-gradient(112deg, transparent 76%, rgba(47,212,242,.12) 76.2%, rgba(47,212,242,.12) 82%, transparent 82.2%);
}
.pf-passo__fig svg{
  width:auto; height:clamp(52px,6vw,78px);
  color:var(--banner-azul);
}

.pf-passo h3{
  font-size:var(--fs-h4); font-weight:700; letter-spacing:-.2px;
  color:var(--ink-txt);
  margin-bottom:.5rem;
}
.pf-passo p{ color:var(--ink-dim); font-size:var(--fs-base); }

/* =====================================================================
   3. GALERIA — serviços já prestados
   ===================================================================== */
/* titulo e lede na mesma escala da secao de servicos da home; como aqui o
   fundo e escuro, a enfase usa o azul do banner clareado, igual ao Quem somos */
#trabalhos .sec__head h2{
  font-size:calc(var(--fs-h2) * 1.2); max-width:24ch; margin-bottom:1.15rem;
}
#trabalhos .sec__head h2 em{ color:var(--banner-azul-cl); }
#trabalhos .sec__lede{ font-size:calc(var(--fs-lg) * 1.2); max-width:64ch; }

.pf-gal{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(206px,1fr));
  gap:clamp(.7rem,1.4vw,1.1rem);
}
.pf-item{ display:flex; }
/* card extra de climatizacao: fica so no celular, onde a grade e de 2 colunas */
.pf-item--so-mob{ display:none; }
.pf-item[hidden]{ display:none; }

.pf-card{
  position:relative; display:flex; flex-direction:column; width:100%; text-align:left;
  overflow:hidden;
  background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.pf-card:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--line-hi), 0 22px 40px -26px #000; }
.pf-card:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.pf-card__img{ position:relative; overflow:hidden; }
.pf-card__img img{
  width:100%; aspect-ratio:4/5;
  object-fit:cover; object-position:50% 42%;
  transition:transform .5s var(--ease);
}
.pf-card:hover .pf-card__img img{ transform:scale(1.06); }
/* véu que segura a leitura da etiqueta */
.pf-card__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,11,.5) 0%, transparent 34%, transparent 100%);
}

.pf-card__tag{
  position:absolute; z-index:1; top:.6rem; left:.6rem;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;
  color:#03121B;
  padding:.28rem .6rem;
  background:var(--cyan);
  border-radius:3px;
}

.pf-card__cap{ flex:1; padding:.9rem 1rem 1.05rem; }
.pf-card__ttl{
  display:block;
  font-size:var(--fs-base); font-weight:700; letter-spacing:-.1px;
  color:#fff;
  margin-bottom:.25rem;
}
.pf-card__sub{ display:block; font-size:var(--fs-sm); color:var(--txt-dim); line-height:1.5; }

/* botao de ver mais: so entra no celular, onde a lista fica longa demais */
.pf-mais{ display:none; justify-content:center; margin-top:clamp(1.4rem,4vw,1.8rem); }
.pf-mais__btn{ clip-path:none; border-radius:4px; }
.pf-mais__btn[hidden]{ display:none; }
.pf-mais__btn svg{ transition:transform .3s var(--ease); }
.pf-mais__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }



/* =====================================================================
   5. CHAMADA FINAL
   ===================================================================== */
.pf-cta{ background:var(--paper-2); padding-block:clamp(3rem,6vw,4.6rem); }
.pf-cta :focus-visible{ outline-color:var(--blue); }
.pf-cta__in{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.6rem,4vw,3.5rem); align-items:center;
}
.pf-cta h2{
  font-size:var(--fs-h2); letter-spacing:-.8px; line-height:1.15;
  color:rgba(10,20,36,.72);
  max-width:20ch; margin-bottom:.8rem;
}
.pf-cta h2 em{ font-style:normal; font-weight:800; color:var(--ink-txt); }
.pf-cta p{ color:var(--ink-dim); font-size:calc(var(--fs-lg) * 1.1); max-width:52ch; }
.pf-cta__acts{ display:flex; flex-wrap:wrap; gap:.9rem; }
.pf-cta__acts .btn{
  font-size:var(--fs-lg); font-weight:700; padding-inline:1.9em;
  clip-path:none; border-radius:4px;
}
.btn--wpp{ background:var(--wpp); color:#04121C; }
.btn--wpp:hover{ background:#1EBE5A; box-shadow:0 18px 40px -12px rgba(37,211,102,.8); }

/* =====================================================================
   6. RESPONSIVO
   ===================================================================== */
@media (max-width:1023px){
  .pf-metodo{ grid-template-columns:repeat(2,minmax(0,1fr)); --calha-y:clamp(1.6rem,3.6vw,2.2rem); }
  /* em duas colunas a leitura vira 1 2 / 3 4: cada linha ganha a sua trilha */
  .pf-passo:nth-child(odd)  .pf-passo__trilho::before{ left:0; right:calc(var(--calha) / -2); }
  .pf-passo:nth-child(even) .pf-passo__trilho::before{ left:calc(var(--calha) / -2); right:0; }
}

@media (max-width:900px){
  /* mesma leitura do banner do index no mobile: o gestor em cima e, logo
     abaixo, so o nome e os botoes. o texto de apoio sai da tela pequena */
  .pf-top__in{
    min-height:0;
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(.9rem,3.2vw,1.5rem);
  }
  .pf-top__fig{
    order:1;
    align-self:center; justify-self:center;
    width:min(320px,78%);
  }
  .pf-top__copy{
    order:2; width:100%; max-width:none; align-self:auto;
    text-align:center;
    padding-bottom:clamp(1.6rem,4vw,2.4rem);
  }
  .pf-name{
    max-width:none; margin:0 auto;
    font-size:clamp(1.95rem,8.4vw,2.6rem); line-height:1.15;
  }
  .pf-name em{ display:block; }
  .pf-acts{
    justify-content:center;
    margin-top:clamp(1.2rem,4.5vw,1.7rem);
  }
  .pf-cta__in{ grid-template-columns:1fr; }
  /* o texto de apoio do PC sai da tela pequena: sobram foto, nome e botoes */
  .pf-lede{ display:none; }
  .pf-role{ font-size:var(--fs-lg); }
}

@media (max-width:620px){
  .pf-item--so-mob{ display:flex; }   /* no celular a galeria continua completa */
  .pf-gal{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .pf-card__cap{ padding:.75rem .8rem .9rem; }
  .pf-card__sub{ display:none; }
  .pf-card__ttl{ font-size:var(--fs-sm); line-height:1.35; }
  /* o corte do canto encolhe junto com o card */
  .pf-card{ clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%); }
  .pf-mais{ display:flex; }
  .pf-mais__btn{ width:100%; }
  /* so no celular os cabecalhos do metodo e da galeria vao para o meio */
  #metodo .sec__head,
  #trabalhos .sec__head{ text-align:center; }
  #metodo .sec__head h2,
  #metodo .sec__lede,
  #trabalhos .sec__head h2,
  #trabalhos .sec__lede{ margin-inline:auto; }
  /* no celular a trilha deita: a linha desce pela esquerda e cada selo
     marca o comeco do seu cartao, um embaixo do outro */
  .pf-metodo{
    grid-template-columns:1fr;
    --calha-y:clamp(1.5rem,5vw,2rem);
    --selo:44px;
  }
  .pf-passo{
    display:grid; align-items:start;
    grid-template-columns:var(--selo) minmax(0,1fr);
    column-gap:clamp(.85rem,3.4vw,1.15rem);
  }
  .pf-passo__trilho{
    height:auto; align-self:stretch;
    align-items:flex-start;
    margin-bottom:0;
  }
  /* :nth-child(n) so para empatar a especificidade das regras de 2 colunas */
  .pf-passo:nth-child(n) .pf-passo__trilho::before{
    top:0; bottom:calc(var(--calha-y) * -1);
    left:50%; right:auto;
    width:2px; height:auto;
    transform:translateX(-50%);
  }
  /* a linha nasce no primeiro selo e morre no ultimo */
  .pf-passo:first-child .pf-passo__trilho::before{ top:calc(var(--selo) / 2); }
  .pf-passo:last-child  .pf-passo__trilho::before{ bottom:auto; height:calc(var(--selo) / 2); }
  .pf-passo__n{ font-size:.95rem; }
  .pf-passo__box{ padding:1rem 1.1rem 1.35rem; }
  .pf-passo__fig{ aspect-ratio:16 / 8; max-height:none; }
  .pf-passo__fig svg{ height:clamp(50px,13vw,64px); }
  .pf-acts, .pf-cta__acts{ width:100%; }
  .pf-acts .btn, .pf-cta__acts .btn{ width:100%; }
}

/* celulares estreitos: etiqueta, lupa e respiro menores */
@media (max-width:400px){
  .pf-gal{ gap:.55rem; }
  .pf-card__tag{ font-size:.68rem; padding:.22rem .45rem; top:.45rem; left:.45rem; }
  .pf-card__cap{ padding:.65rem .65rem .8rem; }
}

@media (prefers-reduced-motion:reduce){
  .pf-top__fig img{ animation:none; }
  .pf-card, .pf-card__img img{ transition:none; }
  .pf-card:hover{ transform:none; }
  .pf-card:hover .pf-card__img img{ transform:none; }
}