/* ===== portfólio: faixas verticais que se expandem ===== */
#portfolio .wrap{width:min(1320px,100% - 40px)}
#portfolio .sub{max-width:60ch}

.pv{
  --banda:clamp(62px,7.4vw,120px);
  display:flex;gap:8px;
  height:clamp(460px,70svh,640px);
  margin-top:8px;
}
.pv-item{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;
  border:1px solid var(--linha);border-radius:14px;
  background:linear-gradient(180deg,#0f1522,#080a10);
  color:var(--laranja);
  cursor:pointer;outline-offset:3px;
  transition:flex-grow .7s cubic-bezier(.22,1,.36,1),border-color .35s,background .6s;
}
.pv-item::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 90% 70% at 20% 100%, #e8730c40, transparent 70%);
  transition:opacity .6s;
}
.pv-item.aberta{flex-grow:4.6;border-color:#e8730c99;background:linear-gradient(160deg,#2b1507,#0b0e15 72%)}
.pv-item.aberta::after{opacity:1}

.pv-arte{
  position:absolute;right:-4%;top:50%;translate:0 -50%;
  height:86%;aspect-ratio:4/5;opacity:.1;
  transition:opacity .6s,scale .8s cubic-bezier(.22,1,.36,1);
}
.pv-arte svg{width:100%;height:100%;display:block}
.pv-arte .fino{opacity:.55}
.pv-item.aberta .pv-arte{opacity:1;scale:1.04}

.pv-nome{
  position:absolute;inset:0 auto 0 0;width:var(--banda);
  display:grid;place-items:center;z-index:1;
}
.pv-nome h3{
  writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;
  font-size:clamp(1.6rem,2.7vw,2.5rem);line-height:1;letter-spacing:.05em;
  color:var(--creme);transition:color .4s;
}
.pv-item.aberta .pv-nome h3{color:var(--laranja)}

.pv-corpo{
  position:absolute;left:var(--banda);bottom:0;z-index:1;
  width:min(330px,calc(100% - var(--banda)));
  padding:0 24px 28px 6px;
  opacity:0;translate:0 14px;pointer-events:none;
  transition:opacity .35s,translate .5s cubic-bezier(.22,1,.36,1);
}
.pv-item.aberta .pv-corpo{opacity:1;translate:0 0;transition-delay:.22s}
.pv-texto{color:#efe8da;font-size:1.02rem;line-height:1.5;text-wrap:pretty}
.pv-breve{
  margin-top:14px;display:inline-block;
  font-family:var(--nav);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:500;
  color:var(--laranja);
}
.pv-trabalhos{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.pv-trabalhos li{display:grid;gap:6px}
.pv-trabalhos img,.pv-trabalhos video{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid var(--linha)}
.pv-trabalhos span{font-size:.9rem;color:var(--suave)}

@media (max-width:760px){
  /* a faixa aberta ganha altura animando as linhas da grade (e não a altura do item) */
  .pv{display:grid;grid-template-rows:var(--linhas,repeat(6,76px));height:auto;gap:8px;transition:grid-template-rows .6s cubic-bezier(.22,1,.36,1)}
  .pv-item{flex:none;transition:border-color .35s,background .6s}
  .pv-nome{inset:0 0 auto 0;width:100%;height:76px;display:flex;align-items:center;padding-left:22px}
  .pv-nome h3{writing-mode:horizontal-tb;transform:none;font-size:1.7rem}
  .pv-arte{right:-6%;top:84px;bottom:auto;translate:0 0;height:50%}
  .pv-corpo{left:0;width:100%;padding:0 22px 24px}
  .pv-item.aberta .pv-arte{scale:1}
}
@media (prefers-reduced-motion:reduce){
  .pv-item,.pv-arte,.pv-corpo,.pv-item::after{transition:none !important}
}