/* Rapport · portfólio de vídeo. Só o que não existe em base.css. Regras em ../PORTFOLIO.md */
.deep{--bg:#060708;--surface:#0d0f13;--line:#1f2024;--ink:#f5f5f5;--ink-2:#aab7c4;--ink-3:rgba(158,175,191,.72);--edge:rgba(220,230,239,.14)}
.cap .kpi,.deep .kpi{border-top-color:rgba(220,230,239,.24)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* hero: a parede de capas sobe devagar atrás da manchete e mostra os dois formatos antes de qualquer texto */
.hero-p{padding-top:0;padding-bottom:clamp(40px,6vw,72px);min-height:min(100svh,940px);display:flex;flex-direction:column}
.hero-p > .wrap{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column}
.hero-p-copy{margin-block:auto;padding-block:clamp(48px,7vw,104px);max-width:920px;display:flex;flex-direction:column;gap:28px}
.hero-p .display{font-size:clamp(2.125rem,4.3vw,4rem);line-height:1.04}
.hero-p .kicker::before,#falar .kicker::before{background:var(--accent)}
.hero-p .hero-actions{align-items:baseline}
.hero-p .hero-actions button.cta{border:0;appearance:none;-webkit-appearance:none;cursor:pointer}
@media (max-width:480px){.hero-p .display{font-size:1.625rem;line-height:1.12;letter-spacing:-.02em}}
.parede{position:absolute;inset:0 0 0 auto;width:min(56%,900px);display:flex;justify-content:flex-end;gap:16px;padding-right:var(--gutter);z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0 30%,#000 78%),linear-gradient(180deg,transparent 2%,#000 22%,#000 74%,transparent 98%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0 30%,#000 78%),linear-gradient(180deg,transparent 2%,#000 22%,#000 74%,transparent 98%);mask-composite:intersect}
.parede-col{flex:0 0 clamp(132px,13.5vw,204px);overflow:hidden}
.parede-trilho{display:flex;flex-direction:column;gap:16px;padding-bottom:16px;animation:deriva var(--t,80s) linear infinite;will-change:transform}
.parede-col:nth-child(even) .parede-trilho{animation-direction:reverse}
.parede-trilho img{width:100%;height:auto;border-radius:12px;filter:brightness(.64) saturate(.92)}
.parede.parada .parede-trilho{animation-play-state:paused}
@keyframes deriva{to{transform:translate3d(0,-50%,0)}}
@media (max-width:860px){
  .hero-p{min-height:0;padding-bottom:0}
  .hero-p-copy{padding-block:40px 36px}
  .parede{position:relative;inset:auto;width:auto;height:300px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);justify-content:center;gap:12px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 70%,transparent);-webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg,transparent,#000 24%,#000 70%,transparent);mask-composite:add}
  .parede-col{flex:1 1 0;max-width:160px}
  .parede-col:nth-child(n+4){display:none}
  .parede-trilho{gap:12px;padding-bottom:12px}
}

/* barra que acompanha a rolagem: capítulos à esquerda, função do vídeo à direita */
.barra{position:sticky;top:0;z-index:20;background:rgba(6,7,8,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #1f2024;padding-inline:var(--gutter)}
.barra-in{max-width:1312px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:56px}
.barra-in nav{min-width:0;flex:1}
.barra-caps{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;margin:0;padding:0;list-style:none}
.barra-caps::-webkit-scrollbar{display:none}
.barra-caps a{position:relative;display:block;padding-block:20px;white-space:nowrap;font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(158,175,191,.72);transition:color .2s var(--ease-ui)}
.barra-caps a:hover{color:#f5f5f5}
.barra-caps a[aria-current="true"]{color:#f5f5f5}
.barra-caps a[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent)}
.filtro{display:flex;align-items:center;gap:6px;flex-shrink:0}
.filtro button{min-height:30px;padding:4px 12px;border-radius:9999px;border:1px solid rgba(220,230,239,.14);background:none;cursor:pointer;font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#aab7c4;transition:color .2s var(--ease-ui),border-color .2s var(--ease-ui),background .2s var(--ease-ui)}
.filtro button:hover{color:#f5f5f5;border-color:rgba(220,230,239,.4)}
.filtro button[aria-pressed="true"]{color:#0b0c0e;background:#f5f5f5;border-color:#f5f5f5}
@media (max-width:1040px){
  .barra-in{flex-wrap:wrap;gap:0 24px;padding-bottom:8px}
  .filtro{display:flex;order:2;width:100%;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .filtro::-webkit-scrollbar{display:none}
  .filtro button{flex:0 0 auto}
  .cap{scroll-margin-top:108px}
}

/* capítulo */
.cap{--shelf-h:clamp(280px,31vw,430px);padding-block:clamp(72px,9vw,136px);scroll-margin-top:56px}
.cap:not(:has(.cap-tiles)){padding-block:clamp(54px,6.75vw,102px)}
.cap > .wrap > .grid{row-gap:40px}
.cap-head{grid-column:1 / span 8;display:flex;flex-direction:column;gap:22px}
.cap .case-h{font-size:clamp(1.625rem,2.5vw,2.25rem);line-height:1.12}
.cap-head .body{max-width:66ch}
.cap-tiles{grid-column:1 / span 9;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px 32px}
.cap-tiles .kpi--chave b{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:10px}
.cap-nota{grid-column:1 / -1;font-size:.8125rem;line-height:1.5;color:var(--ink-3);max-width:80ch}
@media (max-width:860px){.cap-head,.cap-tiles{grid-column:1 / -1}}

/* capítulo de poucos vídeos estreitos: texto à esquerda, vídeos à direita, na altura que couber na coluna */
@media (min-width:861px){
  .lado{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-top:40px}
  .lado-l{grid-column:1 / span 5;display:flex;flex-direction:column;gap:40px}
  .lado-l .cap-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .lado .prateleira-caixa{grid-column:6 / span 7;margin-top:0;container-type:inline-size}
  .lado .prateleira{--shelf-h:min(460px,calc((100cqw - var(--vaos)) / var(--soma)));gap:20px;justify-content:flex-end;margin-inline-end:0;padding-inline-end:0;cursor:auto}
  .lado .prateleira-caixa::after,.lado .seta{display:none}
}
@media (max-width:860px){.lado{display:flex;flex-direction:column;margin-top:40px}.lado-l{display:flex;flex-direction:column;gap:40px}}

/* prateleira: mesma altura, largura livre. 16:9 sai largo, 9:16 sai estreito, nada é cortado */
.prateleira-caixa{position:relative;margin-top:clamp(40px,5vw,72px)}
@media (min-width:701px){.prateleira-caixa.cabe-inteira{--shelf-h:min(clamp(280px,31vw,430px),calc((min(100vw - 2 * var(--gutter),1312px) - var(--vaos)) / var(--soma)))}}
.prateleira-caixa::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--gutter) * -1);width:clamp(48px,8vw,120px);pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg));transition:opacity .2s var(--ease-ui)}
.prateleira-caixa.no-fim::after,.prateleira-caixa.cabe::after{opacity:0}
.prateleira{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;margin-inline-end:calc(var(--gutter) * -1);padding-inline-end:var(--gutter);padding-block:6px;scrollbar-width:none;cursor:grab}
.prateleira::-webkit-scrollbar{display:none}
.prateleira.arrastando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.prateleira.arrastando .fita{pointer-events:none}
.cabe .prateleira{cursor:auto}
.faixa{display:contents}

.fita{flex:0 0 auto;order:var(--ord,0);width:calc(var(--shelf-h) * var(--ar));display:flex;flex-direction:column;gap:12px;padding:0;border:0;background:none;text-align:left;cursor:pointer;scroll-snap-align:start;transition:opacity .4s var(--ease-ui)}
.fita-img{position:relative;display:block;height:var(--shelf-h);border-radius:28px;overflow:hidden;border:1px solid transparent;background:linear-gradient(#0f1115,#0f1115) padding-box,linear-gradient(155deg,rgba(220,230,239,.30),rgba(220,230,239,.04) 38%,rgba(220,230,239,.12)) border-box;transition:box-shadow .7s var(--ease-in)}
.fita-img img,.fita-img video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:scale .9s var(--ease-in),opacity .5s var(--ease-ui)}
.fita-img video{opacity:0}
.fita-img video.on{opacity:1}
.fita-img::before,.fita-img::after{content:"";position:absolute;width:12px;height:12px;border:1px solid rgba(220,230,239,.5);z-index:3;pointer-events:none}
.fita-img::before{top:14px;left:14px;border-right:0;border-bottom:0}
.fita-img::after{bottom:14px;right:14px;border-left:0;border-top:0}
.fita-dur{position:absolute;top:12px;right:12px;z-index:3;color:#dce6ef;padding:2px 8px;border-radius:9999px;background:rgba(6,7,8,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fita-play{position:absolute;left:14px;bottom:14px;z-index:3;width:38px;height:38px;border-radius:9999px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(220,230,239,.4);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04)),rgba(6,7,8,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:scale .7s var(--ease-in)}
.fita-cap{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:baseline;gap:12px;max-width:min(100%,460px);padding-inline:2px}
.fita-cap b{font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.fita-cap .label{flex-shrink:0}
.fita.fora{opacity:.32;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .fita:hover .fita-img{box-shadow:0 18px 56px rgba(150,180,210,.16)}
  .fita:hover .fita-img img,.fita:hover .fita-img video{scale:1.035}
  .fita:hover .fita-play{scale:1.08}
}
.fita:focus-visible{outline:0}
.fita:focus-visible .fita-img{outline:2px solid var(--accent);outline-offset:4px}

.seta{position:absolute;top:calc(var(--shelf-h) / 2 - 16px);z-index:4;width:44px;height:44px;display:none;align-items:center;justify-content:center;border-radius:9999px;border:1px solid rgba(220,230,239,.30);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05)),rgba(6,7,8,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:opacity .2s var(--ease-ui),border-color .2s var(--ease-ui)}
.seta:hover{border-color:rgba(220,230,239,.6)}
.seta--ant{left:-14px}
.seta--prox{right:-14px}
.seta[disabled]{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){.seta{display:flex}.cabe .seta{display:none}}

/* no celular o 16:9 ocupa a largura inteira e os verticais rolam de lado: encolher a fita faria do vertical uma miniatura */
@media (max-width:700px){
  .cap{--shelf-h:clamp(300px,74vw,360px)}
  .prateleira{display:grid;gap:22px;overflow:visible;cursor:auto;margin-inline-end:0;padding-inline-end:0}
  .prateleira-caixa::after,.prateleira-caixa > .seta{display:none}
  .faixa--h{display:grid;gap:22px}
  .faixa--h .fita{width:100%;order:0}
  .faixa--h .fita-img{height:auto;aspect-ratio:var(--ar)}
  .faixa--v{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);padding-block:6px}
  .faixa--v::-webkit-scrollbar{display:none}
  .faixa--v .fita{order:0}
  .faixa--v .fita-img{border-radius:20px}
}

/* player: um dialog só, na proporção de cada vídeo, com a ficha do que ele foi fazer */
.player{width:fit-content;max-width:calc(100vw - 2 * var(--gutter));max-height:100dvh;padding:24px 0;border:0;background:transparent;color:#f5f5f5;overflow:auto;scrollbar-width:none}
.player::backdrop{background:rgba(6,7,8,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.player-topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:12px}
.player-fechar{background:none;border:0;padding:8px 10px;margin-right:-10px;cursor:pointer;font-size:.6875rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#aab7c4}
.player-fechar:hover{color:#f5f5f5}
.player-caixa{display:grid;gap:24px}
.player-box{--ar:9/16;width:min(calc(82dvh * var(--ar)),calc(100vw - 2 * var(--gutter)));aspect-ratio:var(--ar);border-radius:28px;overflow:hidden;background:#000;border:1px solid rgba(220,230,239,.16)}
.player-box video:focus-visible{outline:0}
.player-fechar:focus-visible{outline-offset:-2px}
.player-box video,.player-box iframe{width:100%;height:100%;display:block;border:0;background:#000}
.ficha,.ficha-corpo{display:flex;flex-direction:column;gap:18px}
.ficha h3{font-size:1.5rem;line-height:1.15;letter-spacing:-.015em;font-weight:400;text-wrap:balance}
.ficha dl{margin:0}
.ficha dl div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:11px;border-top:1px solid rgba(220,230,239,.14)}
.ficha dd{margin:0;font-size:.9375rem;line-height:1.35;color:#dce6ef;text-align:right;font-variant-numeric:tabular-nums}
.ficha-fonte{font-size:.75rem;line-height:1.45;color:rgba(158,175,191,.72)}
.ficha-pe{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:6px}
.ficha-pe .textlink{padding-block:8px}
.player-nav{display:flex;gap:8px}
.player-nav button{position:static;display:flex}
.player[data-f="v"] .player-caixa{grid-template-columns:auto 300px;align-items:stretch}
.player[data-f="h"] .player-box{width:min(calc(52dvh * var(--ar)),calc(100vw - 2 * var(--gutter)),1180px)}
.player[data-f="h"] .ficha{width:0;min-width:100%}
.player[data-f="h"] .ficha-corpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 56px;align-items:start}
.player[data-f="h"] .ficha-corpo h3{grid-column:1}
.player[data-f="h"] .ficha-corpo dl{grid-column:2;grid-row:1 / span 2}
.player[data-f="h"] .ficha-corpo .ficha-fonte{grid-column:1}
@media (max-width:860px){
  .player{padding-block:12px}
  .player[data-f="v"] .player-caixa{grid-template-columns:1fr}
  .player[data-f="v"] .player-box{width:min(calc(66dvh * var(--ar)),calc(100vw - 2 * var(--gutter)));justify-self:center}
  .player[data-f="h"] .ficha-corpo{display:flex}
  .ficha{width:0;min-width:100%}
}

/* fecho */
.fim-grid{align-items:end}
.fim-l{grid-column:1 / span 9;display:flex;flex-direction:column;gap:28px}
@media (max-width:860px){.fim-l{grid-column:1 / -1}}

/* filtro: capítulo sem peça da função some; botão do filme encurta em tela estreita */
.cap[hidden],.barra-caps [hidden]{display:none}
@media (max-width:400px){.hero-actions .cta-dur{display:none}}
@media (max-width:340px){.hero-actions .cta{padding-left:18px;letter-spacing:.06em}}