/*
 * BITSYFER — TRABALHOS
 * Layout em pilha sobreposta, com avanço de cartão controlado pelo scroll.
 * Todo o CSS desta seção é escopado em #trabalhos.bf-works.
 */
#trabalhos.bf-works {
  --bfw-bg: #0b0b0b;
  --bfw-text: #f5f5f5;
  --bfw-line: rgba(255,255,255,.48);
  --bfw-font: "Manrope", "Avenir Next", Avenir, Arial, sans-serif;
  position: relative;
  display: block;
  width: 100%;
  height: 440vh;
  min-height: 2600px;
  overflow: clip;
  isolation: isolate;
  background: var(--bfw-bg);
  color: var(--bfw-text);
  font-family: var(--bfw-font);
}
#trabalhos.bf-works,
#trabalhos.bf-works * { box-sizing: border-box; }

#trabalhos.bf-works .bf-works__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
}
#trabalhos.bf-works .bf-works__inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 42px 4.3% 30px;
}
#trabalhos.bf-works .bf-works__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .45fr);
  align-items: center;
  column-gap: 28px;
}
#trabalhos.bf-works .bf-works__heading h2 {
  grid-column: 1;
  margin: 0;
  color: var(--bfw-text);
  font-size: clamp(34px, 4.25vw, 42px);
  line-height: 1.17;
  letter-spacing: -.035em;
  font-weight: 500;
}
#trabalhos.bf-works .bf-works__all {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--bfw-line);
  border-radius: 5px;
  color: rgba(255,255,255,.88);
  background: transparent;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
#trabalhos.bf-works .bf-works__all:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.8);
}

/* Área de apresentação: cartões largos, centralizados e sobrepostos. */
#trabalhos.bf-works .bf-works__stage {
  position: relative;
  width: 100%;
  height: min(64vh, 560px);
  min-height: 340px;
  margin-top: clamp(62px, 12vh, 94px);
  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: visible;
}
#trabalhos.bf-works .bf-works__card {
  position: absolute;
  top: 26px;
  left: 6.5%;
  width: 87%;
  height: calc(100% - 26px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  color: rgba(255,255,255,.68);
  background:
    linear-gradient(145deg, rgba(255,255,255,.055), transparent 43%),
    #151515;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
#trabalhos.bf-works .bf-works__card span {
  display: inline-block;
  font-size: clamp(16px, 2vw, 23px);
  line-height: 1;
  letter-spacing: .16em;
  font-weight: 600;
  opacity: .7;
}
#trabalhos.bf-works .bf-works__card:nth-child(2) { background-color: #121212; }
#trabalhos.bf-works .bf-works__card:nth-child(3) { background-color: #101010; }
#trabalhos.bf-works .bf-works__card:nth-child(4) { background-color: #0d0d0d; }
#trabalhos.bf-works .bf-works__card:nth-child(5) { background-color: #090909; }

@media (prefers-reduced-motion: reduce) {
  #trabalhos.bf-works .bf-works__card { will-change: auto; }
}

@media (max-width: 760px) {
  #trabalhos.bf-works { height: 420vh; min-height: 2300px; }
  #trabalhos.bf-works .bf-works__pin { min-height: 600px; }
  #trabalhos.bf-works .bf-works__inner { padding: 38px 22px 28px; }
  #trabalhos.bf-works .bf-works__heading {
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    align-items: end;
  }
  #trabalhos.bf-works .bf-works__heading h2 {
    font-size: clamp(29px, 5.8vw, 38px);
  }
  #trabalhos.bf-works .bf-works__all {
    min-width: 138px;
    min-height: 36px;
    font-size: 11px;
  }
  #trabalhos.bf-works .bf-works__stage {
    height: min(59vh, 470px);
    min-height: 300px;
    margin-top: 72px;
  }
  #trabalhos.bf-works .bf-works__card {
    left: 3%;
    width: 94%;
  }
}
@media (max-width: 520px) {
  #trabalhos.bf-works { height: 400vh; min-height: 2050px; }
  #trabalhos.bf-works .bf-works__pin { min-height: 560px; }
  #trabalhos.bf-works .bf-works__inner { padding: 34px 18px 24px; }
  #trabalhos.bf-works .bf-works__heading {
    grid-template-columns: 1fr;
    row-gap: 20px;
    align-items: start;
  }
  #trabalhos.bf-works .bf-works__heading h2 {
    font-size: clamp(31px, 9vw, 39px);
    line-height: 1.14;
  }
  #trabalhos.bf-works .bf-works__all {
    grid-column: 1;
    justify-self: start;
  }
  #trabalhos.bf-works .bf-works__stage {
    height: min(50vh, 350px);
    min-height: 250px;
    margin-top: 48px;
  }
  #trabalhos.bf-works .bf-works__card {
    top: 22px;
    left: 0;
    width: 100%;
    height: calc(100% - 22px);
    border-radius: 7px;
  }
}


/* A imagem fornecida ocupa somente a primeira caixa; demais caixas seguem vazias. */
#trabalhos.bf-works .bf-works__card--image {
  padding: 0;
  background: #080808;
}
#trabalhos.bf-works .bf-works__card--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


/* ==========================================================
   AJUSTE DE PROPORÇÃO — CINCO IMAGENS DO PORTFÓLIO
   Todas as imagens recebidas têm proporção aproximada 1.5925:1.
   Os cartões passam a respeitar essa proporção e não recortam
   nenhuma parte das imagens.
   ========================================================== */
#trabalhos.bf-works .bf-works__stage {
  height: min(90vh, 590px);
  min-height: 340px;
}

#trabalhos.bf-works .bf-works__card {
  top: 26px;
  left: 50%;
  width: min(87%, 890px);
  height: auto;
  aspect-ratio: 1.5925 / 1;
  margin-left: calc(min(87%, 890px) / -2);
}

#trabalhos.bf-works .bf-works__card--image {
  padding: 0;
  background: #080808;
}

#trabalhos.bf-works .bf-works__card--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
}

@media (max-width: 760px) {
  #trabalhos.bf-works .bf-works__stage {
    height: min(59vh, 470px);
    min-height: 300px;
  }
  #trabalhos.bf-works .bf-works__card {
    left: 50%;
    width: 94%;
    margin-left: -47%;
    height: auto;
    aspect-ratio: 1.5925 / 1;
  }
}

@media (max-width: 520px) {
  #trabalhos.bf-works .bf-works__stage {
    height: min(50vh, 350px);
    min-height: 250px;
  }
  #trabalhos.bf-works .bf-works__card {
    top: 22px;
    left: 50%;
    width: 100%;
    margin-left: -50%;
    height: auto;
    aspect-ratio: 1.5925 / 1;
  }
}


/* AJUSTE FINO: elevar o conjunto de cartões para melhorar a visualização. */
#trabalhos.bf-works .bf-works__stage {
  margin-top: clamp(42px, 8vh, 66px);
}

@media (max-width: 760px) {
  #trabalhos.bf-works .bf-works__stage {
    margin-top: 54px;
  }
}

@media (max-width: 520px) {
  #trabalhos.bf-works .bf-works__stage {
    margin-top: 36px;
  }
}


/* ESPAÇO PRETO INFERIOR — separação visual maior após os cartões.
   A área sticky fica um pouco mais baixa que a seção, revelando uma faixa
   preta inferior sem reduzir nem recortar as imagens. */
#trabalhos.bf-works .bf-works__pin {
  height: calc(100vh - 64px);
  min-height: 620px;
  background: #0b0b0b;
}

@media (max-width: 760px) {
  #trabalhos.bf-works .bf-works__pin {
    height: calc(100vh - 52px);
    min-height: 560px;
  }
}

@media (max-width: 520px) {
  #trabalhos.bf-works .bf-works__pin {
    height: calc(100vh - 42px);
    min-height: 520px;
  }
}


/* CAIXAS MAIORES — mais área para visualizar cada imagem inteira.
   Mantém a proporção original e object-fit: contain, sem cortes. */
#trabalhos.bf-works .bf-works__stage {
  height: min(76vh, 660px);
  min-height: 420px;
  margin-top: clamp(34px, 6vh, 52px);
}

#trabalhos.bf-works .bf-works__card {
  width: min(92%, 1000px);
  margin-left: 0;
  left: 4%;
  transform-origin: center center;
  aspect-ratio: 1.5925 / 1;
  height: auto;
  top: 18px;
}

#trabalhos.bf-works .bf-works__card--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  #trabalhos.bf-works .bf-works__stage {
    height: min(64vh, 520px);
    min-height: 340px;
    margin-top: 46px;
  }
  #trabalhos.bf-works .bf-works__card {
    width: 96%;
    left: 2%;
    margin-left: 0;
    top: 18px;
  }
}

@media (max-width: 520px) {
  #trabalhos.bf-works .bf-works__stage {
    height: min(56vh, 410px);
    min-height: 270px;
    margin-top: 34px;
  }
  #trabalhos.bf-works .bf-works__card {
    width: 100%;
    left: 0;
    margin-left: 0;
    top: 14px;
  }
}


/* ==========================================================
   LAYOUT DA PILHA — REFERÊNCIA ENVIADA PELO USUÁRIO
   Cartão frontal ocupa a largura disponível; os cartões traseiros
   aparecem menores e deslocados para cima, todos centralizados.
   ========================================================== */
#trabalhos.bf-works .bf-works__stage {
  width: calc(100% + 8.6%);
  margin-left: -4.3%;
  height: min(92vh, 700px);
  min-height: 500px;
  margin-top: clamp(28px, 5vh, 48px);
  overflow: visible;
}

#trabalhos.bf-works .bf-works__card {
  top: 60px;
  left: max(0px, (100% - 1100px) / 2);
  width: min(100%, 1100px);
  height: auto;
  aspect-ratio: 1.5925 / 1;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}

#trabalhos.bf-works .bf-works__card--image {
  padding: 0;
  background: #080808;
}

#trabalhos.bf-works .bf-works__card--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
}

@media (max-width: 760px) {
  #trabalhos.bf-works .bf-works__stage {
    width: calc(100% + 44px);
    margin-left: -22px;
    height: min(76vh, 560px);
    min-height: 390px;
    margin-top: 38px;
  }

  #trabalhos.bf-works .bf-works__card {
    top: 46px;
    left: 0;
    width: 100%;
    aspect-ratio: 1.5925 / 1;
  }
}

@media (max-width: 520px) {
  #trabalhos.bf-works .bf-works__stage {
    width: calc(100% + 36px);
    margin-left: -18px;
    height: min(66vh, 430px);
    min-height: 300px;
    margin-top: 30px;
  }

  #trabalhos.bf-works .bf-works__card {
    top: 38px;
    left: 0;
    width: 100%;
    border-radius: 7px;
  }
}


/* ==========================================================
   CORREÇÃO DE CORTE — CARTÃO FRONTAL INTEIRO NA VIEWPORT
   O tamanho do cartão agora acompanha a altura disponível da tela.
   Evita que a parte inferior seja cortada pelo contêiner sticky.
   ========================================================== */
#trabalhos.bf-works .bf-works__pin {
  height: calc(100vh - 64px);
  min-height: 0;
  overflow: visible;
}

#trabalhos.bf-works .bf-works__inner {
  height: 100%;
  overflow: visible;
}

#trabalhos.bf-works .bf-works__stage {
  height: calc(100% - 150px);
  min-height: 0;
  margin-top: clamp(22px, 4vh, 42px);
  overflow: visible;
}

#trabalhos.bf-works .bf-works__card {
  top: 12px;
  left: 50%;
  width: min(92%, 1100px, calc((100vh - 210px) * 1.5925));
  height: auto;
  aspect-ratio: 1.5925 / 1;
  margin: 0;
  overflow: hidden;
}

#trabalhos.bf-works .bf-works__card--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  #trabalhos.bf-works .bf-works__pin {
    height: calc(100vh - 52px);
    min-height: 0;
  }

  #trabalhos.bf-works .bf-works__stage {
    height: calc(100% - 170px);
    margin-top: 24px;
  }

  #trabalhos.bf-works .bf-works__card {
    top: 12px;
    width: min(94%, calc((100vh - 230px) * 1.5925));
  }
}

@media (max-width: 520px) {
  #trabalhos.bf-works .bf-works__pin {
    height: calc(100vh - 42px);
    min-height: 0;
  }

  #trabalhos.bf-works .bf-works__stage {
    height: calc(100% - 185px);
    margin-top: 20px;
  }

  #trabalhos.bf-works .bf-works__card {
    top: 8px;
    width: min(96%, calc((100vh - 245px) * 1.5925));
  }
}