/* Página de trabalho: abertura editorial (texto, duas fotos pequenas, uma grande) e galeria em masonry. */
.pj{padding:calc(76px + clamp(28px,3vw,56px)) var(--m) 0}
.pj__trilha{display:flex;gap:10px;font-size:var(--step-small);font-weight:600;color:var(--muted)}
.pj__trilha a{text-decoration:none}
@media (hover:hover) and (pointer:fine){.pj__trilha a:hover{color:var(--accent)}}
.pj__titulo{margin-top:clamp(22px,2.4vw,40px);padding-top:.1em;font-size:clamp(3rem,1.2rem + 6vw,8.5rem);font-weight:800;text-transform:uppercase;line-height:.88;letter-spacing:-.01em;max-width:14ch}
.pj__titulo--longo{font-size:clamp(2rem,.8rem + 4.4vw,6rem);max-width:none}
.pj__abre{margin-top:clamp(36px,4vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.pj__texto{grid-column:1/4;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.pj__sub{font-size:var(--step-lead);font-weight:700;line-height:1.1}
.pj__texto > p:not(.pj__sub){color:var(--muted);max-width:42ch}
.pj__texto dl{margin:6px 0 0;display:flex;flex-direction:column;gap:12px;font-size:var(--step-small)}
.pj__texto dt{color:var(--muted)}
.pj__texto dd{margin:0;font-weight:700}
.pj__texto .botao{margin-top:auto}
.pj__pequenas{grid-column:4/7;display:grid;grid-template-rows:1fr 1fr;gap:var(--gap);min-height:0}
.pj__grande{grid-column:7/13}
.foto{display:block;width:100%;padding:0;border:0;background:#1b1b1b;cursor:zoom-in;overflow:hidden}
.foto img{width:100%;height:auto;transition:transform 900ms var(--ease-soft),opacity var(--t-ui) ease}
.foto--peq{position:relative;height:auto;min-height:0}
.foto--peq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto--grande{aspect-ratio:3/2} /* o gerador põe a proporção da própria foto: sem corte */
.foto--grande img{height:100%;object-fit:cover}
.pj__pequenas:empty{display:none}
.pj__pequenas:empty + .pj__grande{grid-column:4/13}
@media (hover:hover) and (pointer:fine){.foto:hover img{transform:scale(1.025)}}
.galeria{padding:var(--gap) var(--m) 0}
.masonry{columns:3;column-gap:var(--gap)}
.masonry .foto{margin-bottom:var(--gap);break-inside:avoid}
/* com JS: colunas equilibradas pela altura das fotos */
.masonry.cols{columns:auto;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--gap);align-items:start}
.masonry.cols .col{display:flex;flex-direction:column;gap:var(--gap)}
.masonry.cols .foto{margin:0}
.relacionados{margin-top:clamp(100px,9vw,160px)}
.relacionados__topo{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:0 var(--m) 28px}
.caixa{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:#0b0b0b;color:#ededea}
.caixa::backdrop{background:#0b0b0b}
.caixa[open]{display:grid;place-items:center}
.caixa img{max-width:92vw;max-height:84dvh;width:auto;height:auto;object-fit:contain}
.caixa__info{position:absolute;left:var(--m);bottom:22px;font-size:var(--step-small);color:#bdbdb7}
.caixa__btn{position:absolute;font:inherit;font-weight:700;font-size:var(--step-small);background:#222;color:#ededea;border:0;padding:12px 16px;cursor:pointer;transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.caixa__btn:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.caixa__btn:hover{background:#3a3a37}}
.caixa__fechar{top:18px;right:var(--m)}
.caixa__ant{left:var(--m);top:50%;transform:translateY(-50%)}
.caixa__prox{right:var(--m);top:50%;transform:translateY(-50%)}
.caixa__ant:active,.caixa__prox:active{transform:translateY(-50%) scale(.96)}
@media (prefers-reduced-motion:no-preference){
  .js .pj__titulo{animation:sobe 900ms var(--ease-out) 80ms both}
  .js .pj__abre > *{animation:sobe 900ms var(--ease-out) both}
  .js .pj__abre > :nth-child(2){animation-delay:120ms}.js .pj__abre > :nth-child(3){animation-delay:220ms}
  @keyframes sobe{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  .js .masonry .foto{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 800ms var(--ease-out)}
  .js .masonry .foto.is-in{opacity:1;transform:none}
}
@media (max-width:820px){
  .pj__texto,.pj__pequenas,.pj__grande{grid-column:1/-1}
  .pj__grande{order:-1}
  .pj__pequenas{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .pj__pequenas{align-items:start}
  .foto--peq img{position:static;height:auto}
  .masonry{columns:2}
  .caixa__ant,.caixa__prox{top:auto;bottom:16px;transform:none}
  .caixa__ant:active,.caixa__prox:active{transform:scale(.96)}
  .caixa__ant{left:auto;right:calc(var(--m) + 110px)}
  .caixa__info{bottom:70px}
}

/* "ver todas as fotos" e o ícone de ampliar: aparecem onde não há mouse (celular e tablet) */
.pj__mais{display:none;align-items:center;gap:10px;margin-top:6px;font-weight:700;text-decoration:none}
.pj__mais .ic{font-size:1.25rem}
.pj__mais .ic:last-child{color:var(--accent)}
.foto{position:relative}
.foto__ampliar{position:absolute;right:10px;bottom:10px;width:40px;height:40px;display:grid;place-items:center;background:rgba(13,13,13,.72);color:#fff;font-size:1.25rem;pointer-events:none;opacity:0;transition:opacity var(--t-ui) ease}
@media (hover:hover) and (pointer:fine){.foto:hover .foto__ampliar{opacity:1}}
@media (hover:none),(max-width:820px){.pj__mais{display:inline-flex}.foto__ampliar{opacity:1}}
@media (prefers-reduced-motion:no-preference){.pj__mais .ic:last-child{animation:desce 1.6s var(--ease-in-out) infinite}@keyframes desce{0%,100%{transform:none}50%{transform:translateY(4px)}}}