/* WorkBR — página de portfólio (usa os tokens de style.css) */

.pf-hero { padding: 150px 0 70px; overflow: hidden; }
.pf-hero::after {
  content: ""; position: absolute; width: 700px; height: 700px; left: -200px; top: -240px; pointer-events: none;
  background: radial-gradient(circle, rgba(30, 167, 255, .18), transparent 62%);
}
.pf-hero-in { position: relative; z-index: 1; }
.pf-voltar { display: flex; width: max-content; align-items: center; gap: 8px; font-size: 14.5px; color: rgba(255, 255, 255, .6); margin-bottom: 34px; transition: color .2s; }
.pf-voltar:hover { color: var(--azul-claro); }
.pf-h1 { font-size: clamp(40px, 6.4vw, 88px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
.pf-h1 .linha { display: block; overflow: hidden; padding-bottom: .06em; }
.pf-h1 .linha > span { display: inline-block; }
.pf-h1 em { font-style: normal; }
.pf-sub { margin-top: 26px; font-size: 19px; color: rgba(255, 255, 255, .7); max-width: 56ch; }
.pf-numeros { display: flex; gap: 48px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--linha-escura); }
.pf-numeros b { font-family: var(--fonte-titulo); font-size: 44px; font-weight: 700; display: block; line-height: 1; }
.pf-numeros span { font-size: 14px; color: rgba(255, 255, 255, .55); }

/* Filtros */
.pf-lista { padding: 30px 0 130px; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 -24px 40px; position: sticky; top: 76px; z-index: 5; padding: 14px 24px; background: rgba(4, 11, 26, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.filtro {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14); background: var(--navy-800); color: rgba(255, 255, 255, .75);
  font-family: var(--fonte-titulo); font-size: 14.5px; font-weight: 600; backdrop-filter: blur(10px);
  transition: background .25s, color .25s, border-color .25s;
}
.filtro:hover { border-color: var(--azul); color: #fff; }
.filtro[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #031025; }
.filtro small { opacity: .6; margin-left: 4px; font-weight: 500; }

/* Grade de projetos */
.pf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.proj { grid-column: span 4; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--navy-800); border: 1px solid var(--linha-escura); transition: border-color .3s, transform .35s var(--ease); }
.proj:hover { border-color: rgba(30, 167, 255, .45); }
.proj.largo { grid-column: span 8; }
.proj.medio { grid-column: span 6; }
.proj.oculto { display: none; }

.proj-tela { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; display: block; }
.proj.largo .proj-tela { aspect-ratio: 16 / 8.6; }
.proj-barra { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: rgba(4, 11, 26, .78); backdrop-filter: blur(8px); }
.proj-barra i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.proj-barra span { margin-left: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-tela img { position: absolute; top: 0; left: 0; width: 100%; height: auto; will-change: transform; transition: opacity .35s; }
.proj-tela img.trocando { opacity: 0; }
.proj-dica {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: rgba(4, 11, 26, .8); color: #fff; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.proj:hover .proj-dica { opacity: 1; transform: none; }

.proj-info { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proj-seg { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--azul); }
.proj-info h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.proj.largo .proj-info h3 { font-size: 26px; }
.proj-info p { font-size: 15px; color: rgba(255, 255, 255, .64); }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-tags span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); }

.versoes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); align-self: flex-start; }
.versoes button {
  min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; background: transparent;
  color: rgba(255, 255, 255, .65); font-family: var(--fonte-titulo); font-size: 13px; font-weight: 600; transition: background .25s, color .25s;
}
.versoes button[aria-pressed="true"] { background: #fff; color: var(--navy-800); }

.proj-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.proj-acoes .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn-fantasma { border-color: rgba(255, 255, 255, .18); color: #fff; }
.btn-fantasma:hover { border-color: var(--azul-claro); color: var(--azul-claro); }

/* Processo */
.pf-processo { padding: 120px 0; }
.pf-processo-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.pf-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pf-passos li { padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--linha-clara); }
.pf-passos span { font-family: var(--fonte-titulo); font-weight: 700; color: var(--azul-escuro); font-size: 14px; }
.pf-passos b { display: block; font-family: var(--fonte-titulo); font-size: 19px; margin: 14px 0 8px; }
.pf-passos p { color: var(--texto-suave); font-size: 15px; }

.pf-final-h { font-size: clamp(40px, 7vw, 96px); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { right: 0; }

@media (max-width: 1024px) {
  .proj, .proj.medio { grid-column: span 6; }
  .proj.largo { grid-column: span 12; }
  .pf-processo-in { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .pf-hero { padding: 120px 0 50px; }
  .pf-numeros { gap: 28px; }
  .pf-numeros b { font-size: 34px; }
  .proj, .proj.medio, .proj.largo { grid-column: span 12; }
  .proj.largo .proj-tela { aspect-ratio: 16 / 10; }
  .pf-passos { grid-template-columns: 1fr; }
  .proj-dica { opacity: 1; transform: none; }
}

.proj.inteiro { grid-column: span 12; flex-direction: row; }
.proj.inteiro .proj-tela { flex: 1.5; aspect-ratio: 16 / 7.5; }
.proj.inteiro .proj-info { flex: 1; justify-content: center; padding: 36px; }
.pf-grid.filtrado .proj { grid-column: span 6; flex-direction: column; }
.pf-grid.filtrado .proj .proj-tela { flex: none; aspect-ratio: 16 / 10; }
.pf-grid.filtrado .proj .proj-info { padding: 22px 24px 24px; }
@media (max-width: 860px) {
  .proj.inteiro { flex-direction: column; }
  .proj.inteiro .proj-tela { flex: none; aspect-ratio: 16 / 10; }
  .proj.inteiro .proj-info { padding: 22px 24px 24px; }
}
@media (max-width: 600px) {
  .pf-grid.filtrado .proj { grid-column: span 12; }
}