/* Work em carrossel (work-carrossel.js): um case por vez, o vizinho espiando na borda da tela. */
.portfolio-v5 #trabalho{overflow-x:clip}
.work-stack.is-carrossel{--wc-gap:24px;--wc-espia:0px;position:relative;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.work-stack.is-carrossel.is-arrastando{cursor:grabbing}
.wc-trilho{display:flex;gap:var(--wc-gap);transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}
/* o card deixa de ser pilha fixa: cada um é um slide do mesmo tamanho */
.portfolio-v5 .work-stack.is-carrossel .work-story{--stack-scale:1!important;--stack-shade:0!important;
  flex:0 0 calc(100% - var(--wc-espia));position:relative;top:auto;margin:0;transform:none;cursor:pointer;
  transition:opacity .5s,box-shadow .35s,border-color .35s}
.portfolio-v5 .work-stack.is-carrossel .work-story:not(.is-ativo){opacity:.4}
.portfolio-v5 .work-stack.is-carrossel .work-story:not(.is-ativo):hover{opacity:.6}
.portfolio-v5 .work-stack.is-carrossel .work-story.is-ativo:hover{border-color:var(--verde-borda);box-shadow:0 18px 44px -24px rgba(20,24,22,.28)}
.work-stack.is-carrossel .work-story img{-webkit-user-drag:none}

.wc-barra{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-top:28px}
.wc-setas{display:flex;gap:8px}
.wc-seta{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--linha-forte);background:transparent;color:var(--tinta);font:400 18px/1 var(--font);cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s}
.wc-seta:hover:not(:disabled){border-color:var(--verde);color:var(--verde);background:var(--verde-ghost)}
.wc-seta:disabled{opacity:.35;cursor:default}
.wc-seta:focus-visible,.wc-ponto:focus-visible{outline:2px solid var(--verde-anel);outline-offset:2px}
.wc-pontos{display:flex;gap:6px}
.wc-ponto{padding:10px 0;border:0;background:none;cursor:pointer}
.wc-ponto i{display:block;width:24px;height:2px;border-radius:2px;background:var(--linha-forte);transition:width .4s cubic-bezier(.22,1,.36,1),background .3s}
.wc-ponto[aria-current=true] i{width:44px;background:var(--verde)}
.wc-ponto:hover i{background:var(--tinta-3)}
.wc-ponto[aria-current=true]:hover i{background:var(--verde)}
.wc-legenda{justify-self:end;margin:0;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);text-align:right}
.wc-legenda kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:3px;border:1px solid var(--linha-forte);border-radius:4px;font:500 10px/1 var(--mono);color:var(--tinta-2);text-transform:lowercase;background:var(--papel-1)}
.wc-legenda span{margin:0 6px;opacity:.6}
.wc-vivo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* telas sem margem sobrando: o card encolhe para o vizinho aparecer */
@media(max-width:1360px){.work-stack.is-carrossel{--wc-espia:72px}}
@media(max-width:760px){
  .work-stack.is-carrossel{--wc-gap:12px;--wc-espia:36px}
  /* card baixo o bastante para os controles caberem na mesma tela */
  .portfolio-v5 .work-stack.is-carrossel .work-story{gap:20px;padding:20px}
  .portfolio-v5 .work-stack.is-carrossel .work-stage{height:230px;min-height:0;aspect-ratio:auto}
  .portfolio-v5 .work-stack.is-carrossel .work-story .meta{margin-bottom:14px}
  .portfolio-v5 .work-stack.is-carrossel .work-story .lab-story-copy h3{margin-bottom:12px}
  .portfolio-v5 .work-stack.is-carrossel .work-story .lab-story-copy p{margin-bottom:14px}
  .wc-barra{grid-template-columns:auto 1fr;row-gap:14px;margin-top:20px}
  .wc-pontos{justify-self:end}
  .wc-legenda{grid-column:1/-1;justify-self:start;text-align:left}
}
@media (prefers-reduced-motion:reduce){.wc-trilho{transition:none}}