/* Mapa de Presença — Vídeo gravado
   Complementa style.css (mesmo preto de palco, mesmo ouro, mesma tipografia).
   Só o que é próprio desta página mora aqui. */

body[data-tela="escolher"] #tela-escolher,
body[data-tela="progresso"] #tela-progresso,
body[data-tela="relatorio"] #tela-relatorio{display:block;animation:entra .5s ease both}
body[data-tela="escolher"] #tela-escolher{display:flex}

/* ---------- 1. escolher ---------- */
.tela-escolher{
  min-height:100vh;flex-direction:column;justify-content:center;
  padding:5vh clamp(24px,5vw,72px);
}
.esc-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,44%);
  gap:clamp(32px,5vw,80px);align-items:center;width:100%;max-width:1480px;margin:0 auto;
}
.esc-regras{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:9px}
.esc-regras li{color:var(--texto-3);font-size:.98rem;padding-left:20px;position:relative}
.esc-regras li b{color:var(--texto-2);font-weight:600}
.esc-regras li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--ouro)}

.solta{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;aspect-ratio:16/10;border-radius:var(--raio);cursor:pointer;
  border:1px dashed rgba(255,255,255,.22);background:var(--preto-2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  transition:border-color .2s,background .2s,transform .12s;
}
.solta:hover{border-color:rgba(232,183,101,.5);background:rgba(232,183,101,.05)}
.solta.arrastando{border-color:var(--ouro);background:rgba(232,183,101,.10);transform:scale(1.01)}
.solta.tem-arquivo{border-style:solid;border-color:rgba(99,199,154,.45);background:rgba(99,199,154,.05)}
.solta-icone{width:52px;height:52px;color:var(--ouro);opacity:.85;margin-bottom:6px}
.solta-titulo{font-family:var(--display);font-size:1.7rem;line-height:1.1}
.solta-sub{font-size:.92rem;color:var(--texto-3)}

.ficha{
  margin-top:18px;border:1px solid var(--linha);border-radius:12px;
  background:rgba(255,255,255,.025);padding:6px 18px;
}
.ficha-linha{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-top:1px solid var(--linha);
}
.ficha-linha:first-child{border-top:0}
.ficha-linha span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.ficha-linha b{
  font-weight:600;font-variant-numeric:tabular-nums;text-align:right;
  max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.aviso{
  margin-top:16px;padding:14px 18px;border-radius:12px;font-size:.95rem;
  border:1px solid rgba(232,183,101,.35);background:rgba(232,183,101,.08);color:var(--ouro-claro);
}
.aviso.grave{border-color:rgba(226,105,93,.45);background:rgba(226,105,93,.10);color:#f4b0a8}
.esc-palco .botao-principal{width:100%;justify-content:center;margin-top:22px}

/* ---------- 2. progresso ---------- */
.tela-progresso{
  min-height:100vh;padding:clamp(28px,5vh,56px) clamp(24px,5vw,72px);
  max-width:1480px;margin:0 auto;
}
.prog-topo{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.prog-envio{margin-top:34px}
.prog-rotulo{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);
}
.prog-numeros{color:var(--texto-2);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.trilho{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.trilho-fill{
  height:100%;width:0%;border-radius:6px;
  background:linear-gradient(90deg,var(--ouro),var(--ouro-claro));
  transition:width .25s ease;
}
.prog-envio.concluido .trilho-fill{background:linear-gradient(90deg,var(--bom),#8fe0bb)}

.prog-fase{display:flex;align-items:center;gap:16px;margin-top:30px}
.prog-fase .spinner{width:26px;height:26px;flex:none}
.prog-fase-texto{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15}
.prog-fase-sub{color:var(--texto-3);font-size:.95rem;font-variant-numeric:tabular-nums;margin-top:2px}

.linha-trechos{display:flex;gap:4px;margin-top:22px;height:34px}
.trecho-seg{
  flex:1 1 0;min-width:4px;border-radius:5px;background:rgba(255,255,255,.06);
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:background .5s ease,border-color .5s ease,transform .2s ease;
}
.trecho-seg.pronto{border-color:rgba(255,255,255,.10)}
.trecho-seg.pronto::after{
  content:"";position:absolute;inset:0;
  animation:acende-seg .7s ease both;
}
@keyframes acende-seg{from{background:rgba(246,217,164,.75)}to{background:transparent}}
.trecho-seg.erro{background:repeating-linear-gradient(45deg,rgba(226,105,93,.30) 0 6px,transparent 6px 12px)}

.prog-grid{
  display:grid;grid-template-columns:minmax(360px,44%) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);margin-top:34px;align-items:start;
}
.prog-grid .coluna-painel{max-height:none}
.prog-lado{display:flex;flex-direction:column;gap:18px}
.prog-dicas{display:flex;flex-direction:column;gap:10px}
.prog-dica{
  border:1px solid var(--linha);border-radius:12px;padding:13px 18px;
  background:linear-gradient(180deg,rgba(232,183,101,.08),rgba(255,255,255,.015));
  animation:entra .4s ease both;
}
.prog-dica time{
  display:block;font-size:11px;letter-spacing:.14em;color:var(--texto-3);
  font-variant-numeric:tabular-nums;margin-bottom:4px;
}
.prog-dica p{font-size:1.05rem;font-weight:600}
.prog-dica small{display:block;margin-top:4px;font-size:.88rem;color:var(--bom)}

/* ---------- 3. relatório ---------- */
.tela-rel-video{max-width:1620px}
.vid-rel{
  display:grid;grid-template-columns:minmax(380px,46%) minmax(0,1fr);
  gap:clamp(24px,3.4vw,52px);margin-top:36px;align-items:start;
}
.vid-esq{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
.moldura-player{aspect-ratio:16/9;background:#000}
.moldura-player video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.moldura-player .moldura-cantos i{pointer-events:none}
.player-aviso{font-size:.9rem;color:var(--texto-3)}

.linhas-camada{display:flex;flex-direction:column;gap:12px}
.linhas-camada h3{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro);margin-bottom:12px;
}
.linha-camada{display:grid;grid-template-columns:104px minmax(0,1fr) 40px;align-items:center;gap:12px}
.linha-camada-nome{font-size:.9rem;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linha-camada-media{
  text-align:right;font-variant-numeric:tabular-nums;font-weight:600;font-size:.98rem;
}
.faixa{display:flex;gap:3px;height:22px}
.faixa-seg{
  flex:1 1 0;min-width:3px;border-radius:4px;background:rgba(255,255,255,.07);
  border:0;padding:0;cursor:pointer;transition:transform .14s ease,filter .14s ease;
}
.faixa-seg:hover{transform:scaleY(1.28);filter:brightness(1.25)}
.faixa-seg:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.linha-regua{
  display:flex;justify-content:space-between;font-size:11px;color:var(--texto-3);
  font-variant-numeric:tabular-nums;margin-top:2px;
}

.vid-dir{display:flex;flex-direction:column;gap:30px}
.vid-dir .rel-radar{max-width:520px}
.vid-dir .rel-texto h3:first-child{margin-top:0}

/* timestamp clicável */
.momento{
  display:inline-flex;align-items:center;gap:5px;
  font:inherit;font-size:.86rem;font-variant-numeric:tabular-nums;
  color:var(--ouro);background:rgba(232,183,101,.10);
  border:1px solid rgba(232,183,101,.28);border-radius:999px;
  padding:1px 9px 2px;margin-right:9px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.momento:hover{background:rgba(232,183,101,.22);border-color:rgba(232,183,101,.6);color:var(--ouro-claro)}
.momento:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.momento svg{width:9px;height:9px;fill:currentColor}

.tela-rel-video .rel-notas{margin-top:52px}

/* ---------- custo ---------- */
.cartao-custo{
  border:1px solid var(--linha);border-radius:var(--raio);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  padding:20px 24px;
}
.custo-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.custo-rotulo{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro)}
.custo-total{font-family:var(--display);font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.custo-brl{color:var(--texto-3);font-size:.95rem;font-variant-numeric:tabular-nums;margin-top:4px}
.custo-itens{margin-top:16px;display:flex;flex-direction:column}
.custo-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--linha);
}
.custo-item-nome{font-size:.95rem;color:var(--texto-2);min-width:0}
.custo-item-nome small{display:block;font-size:.8rem;color:var(--texto-3);margin-top:2px}
.custo-item-usd{font-variant-numeric:tabular-nums;font-weight:600}
.selo-estimado{
  margin-left:8px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:5px;border:1px solid rgba(232,183,101,.35);
  color:rgba(232,183,101,.8);white-space:nowrap;
}
.custo-nota{margin-top:14px;font-size:.85rem;color:var(--texto-3)}

/* ---------- responsivo ---------- */
@media (max-width:1180px){
  .prog-grid{grid-template-columns:1fr}
  .vid-rel{grid-template-columns:1fr}
  .vid-esq{position:static}
}
@media (max-width:860px){
  .esc-grid{grid-template-columns:1fr}
  .linha-camada{grid-template-columns:84px minmax(0,1fr) 36px}
}

/* ---------- celular em pé: uma coluna, tudo no polegar ----------
   Vale por largura (≤820px) e também em retrato, para tablet pequeno em pé. */
@media (max-width:820px), (orientation:portrait) and (max-width:1024px){
  body{font-size:16px}

  /* 1. escolher — a área de soltar vira um alvo grande de toque */
  .tela-escolher{padding:4vh clamp(18px,5vw,32px) 6vh;justify-content:flex-start}
  /* Uma coluna só, com a ordem certa no polegar: o nome da tela, a área de
     escolher o vídeo, o botão — e só depois a explicação. `display:contents`
     desmancha as duas colunas sem tocar no HTML. */
  .esc-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .esc-texto,.esc-palco{display:contents}
  .esc-texto .sobretitulo{order:1;margin-bottom:8px}
  .esc-texto .titulo{order:2;margin-bottom:22px;font-size:clamp(2.6rem,12vw,3.6rem)}
  .esc-palco .solta{order:3}
  .esc-palco .ficha{order:4}
  .esc-palco .aviso{order:5}
  .esc-palco .botao-principal{order:6}
  .esc-texto .linha-fina{order:7;margin-top:34px;font-size:1rem}
  .esc-texto .esc-regras{order:8;margin-top:22px}
  .esc-texto .rodape-nota{order:9}
  .solta{aspect-ratio:auto;min-height:216px;padding:28px 20px;border-width:2px}
  .solta-icone{width:46px;height:46px}
  .solta-titulo{font-size:1.45rem;text-align:center}
  .solta-sub{text-align:center}
  .ficha-linha{padding:12px 0}
  .ficha-linha b{max-width:58%}
  .esc-palco .botao-principal{padding:20px 28px;font-size:1.15rem}

  /* 2. progresso */
  .tela-progresso{padding:24px clamp(18px,5vw,32px) 48px}
  .prog-topo{align-items:flex-start;flex-direction:column;gap:14px}
  .prog-topo .botao{padding:12px 20px}
  .prog-rotulo{font-size:11px;letter-spacing:.12em;gap:10px}
  .linha-trechos{height:26px;gap:3px}
  .prog-grid{gap:22px}
  .prog-lado{order:-1}                       /* custo e dicas acima das 18 barras */

  /* 3. relatório */
  .tela-rel-video{padding:24px clamp(18px,5vw,32px) 56px}
  .rel-topo{flex-direction:column;align-items:flex-start;gap:16px}
  .vid-rel{margin-top:24px;gap:28px}
  .vid-dir{gap:26px}
  .vid-dir .rel-radar{max-width:none;margin:0 auto;width:100%}
  .tela-rel-video .rel-notas{
    margin-top:32px;grid-template-columns:1fr;gap:26px;
  }
  .tela-rel-video .rel-item{padding:13px 0}
  .tela-rel-video .rel-item-evid{font-size:1rem;line-height:1.5}

  /* player: a proporção real do arquivo manda (video.js escreve aspect-ratio).
     Vídeo em pé não é esticado nem cortado — só limitado pela altura da tela. */
  .moldura-player{
    width:auto;max-width:100%;max-height:58vh;margin:0 auto;
  }
  .moldura-player.em-pe{max-height:64vh}

  /* linha do tempo: nome em cima, faixa larga embaixo, segmentos tocáveis */
  .linha-camada{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nome media" "faixa faixa";
    gap:6px 12px;
  }
  .linha-camada-nome{grid-area:nome;font-size:.95rem}
  .linha-camada-media{grid-area:media}
  .faixa{grid-area:faixa;height:30px;gap:4px}
  .faixa-seg{min-width:22px;border-radius:6px}
  .faixa-seg:hover{transform:none;filter:none}
  .faixa-seg:active{filter:brightness(1.35)}
  .linhas-camada{gap:16px}

  /* timestamp: alvo de toque de verdade */
  .momento{
    min-height:36px;padding:6px 14px;font-size:.92rem;margin:0 10px 4px 0;
  }
  .momento:hover{background:rgba(232,183,101,.10);border-color:rgba(232,183,101,.28);color:var(--ouro)}
  .momento:active{background:rgba(232,183,101,.26)}

  .cartao-custo{padding:18px 18px}
  .custo-total{font-size:1.8rem}
}

/* telas estreitas de verdade (≈390px): o painel das 18 barras não pode espremer */
@media (max-width:480px){
  .prog-grid .coluna-painel{padding:14px 14px}
  .prog-grid .linha-sub{grid-template-columns:minmax(0,1.15fr) minmax(52px,.85fr) 34px;gap:8px}
  .prog-grid .sub-nome{font-size:.9rem}
  .prog-grid .selo{display:none}
  .titulo{font-size:clamp(2.8rem,13vw,4rem)}
  .prog-fase{gap:12px}
  .linha-regua{font-size:10px}
}

/* vídeo em pé no desktop: a coluna do player não pode virar uma torre */
@media (min-width:1181px){
  .moldura-player.em-pe{max-height:72vh;width:auto;max-width:100%;margin:0 auto}
}


/* ---------- palco da tela de progresso: o recorte que a IA enxerga ---------- */
.prog-palco{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);
  align-items:center;margin:18px 0 6px;
}
.prog-recorte{
  width:clamp(150px,17vw,230px);aspect-ratio:700/900;overflow:hidden;position:relative;
  border-radius:14px;border:1px solid rgba(255,255,255,.12);background:#05060a;
}
.prog-recorte video{
  position:absolute;width:calc(100% * 1920 / 700);height:calc(100% * 1080 / 900);
  left:calc(-100% * 20 / 700);top:calc(-100% * 120 / 900);object-fit:fill;
}
.prog-legenda-titulo{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro);margin:0 0 6px;
}
.prog-legenda-texto{
  font-size:clamp(1rem,1.6vw,1.35rem);line-height:1.45;color:var(--texto);margin:0;
  transition:opacity .25s ease;
}
.prog-legenda-texto.trocando{opacity:0}
@media (max-width:820px){
  .prog-palco{grid-template-columns:1fr;justify-items:center;text-align:center}
  .prog-recorte{width:min(58vw,240px)}
}

/* ------------------------------------------- comentários por cima do vídeo */
/* O relatório só convence quando a evidência aparece no momento em que ela
   acontece. O cartão é estreito e encostado na base para não tapar quem fala. */
.assistir{display:flex;align-items:center;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.btn-assistir{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;cursor:pointer;
  font:600 13px/1 var(--fonte);letter-spacing:.01em;
  color:var(--preto);background:var(--ouro);border:1px solid var(--ouro);
  transition:background .15s,transform .1s;
}
.btn-assistir:hover{background:var(--ouro-claro)}
.btn-assistir:active{transform:translateY(1px)}
.btn-assistir:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px}
.btn-assistir svg{width:10px;height:10px;fill:currentColor}
.btn-assistir.tocando{background:transparent;color:var(--ouro);border-color:rgba(232,183,101,.45)}
.btn-assistir.tocando svg{display:none}
.assistir-conta{font:500 12px/1.3 var(--fonte);color:var(--texto-3)}
.selo-vivo{
  display:inline-flex;align-items:center;gap:6px;
  font:600 10px/1 var(--fonte);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro);padding:5px 10px;border-radius:999px;
  border:1px solid rgba(232,183,101,.32);background:rgba(232,183,101,.08);
}
.selo-vivo i{width:6px;height:6px;border-radius:50%;background:var(--ouro);animation:pulsa 1.6s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}

.moldura-player{position:relative}
.coment{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:44px 18px 52px;
  display:flex;justify-content:flex-start;
  background:linear-gradient(180deg,transparent,rgba(5,6,9,.72) 55%,rgba(5,6,9,.9));
  pointer-events:none;
}
.coment-cartao{
  max-width:min(70%,520px);
  padding:10px 14px 11px;border-radius:10px;
  background:rgba(10,12,17,.6);
  border:1px solid rgba(255,255,255,.10);
  border-left:2px solid var(--ouro);
  backdrop-filter:blur(10px) saturate(1.1);
  animation:coment-entra .26s cubic-bezier(.2,.8,.3,1);
}
@keyframes coment-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.coment-topo{display:flex;align-items:center;gap:10px;margin-bottom:3px}
.coment-camada{
  font:600 10px/1 var(--fonte);letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.coment-nota{font:700 12px/1 var(--fonte);margin-left:auto;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.07)}
.coment-texto{margin:0;font:500 15px/1.4 var(--fonte);color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* a nota se mexendo: a seta é o que mostra que ela subiu ou desceu agora */
.rel-item-nota,.linha-camada-media,.rel-camada h4 em{transition:color .25s}
.subiu::after,.desceu::after{
  display:inline-block;margin-left:5px;font-size:.62em;vertical-align:.15em;
  animation:seta .9s ease-out forwards;
}
.subiu::after{content:"\25B2";color:var(--bom)}
.desceu::after{content:"\25BC";color:var(--ruim)}
@keyframes seta{0%{opacity:0;transform:translateY(4px)}25%{opacity:1;transform:none}100%{opacity:0}}

/* na linha do tempo, o trecho que está tocando. 1,25 e não mais: com a faixa de
   26px e 10px entre as linhas, o trecho crescido encostava no da camada de baixo
   e as cinco linhas viravam uma coluna só. */
.faixa-seg{transition:opacity .2s,transform .12s,box-shadow .2s}
.faixa-seg.agora{transform:scaleY(1.25);box-shadow:0 0 0 1.5px var(--ouro-claro);opacity:1}
/* só apaga o que o vídeo ainda não alcançou. No resultado final (e sem player)
   nenhum trecho é "passou" nem "agora", e apagar pelo que ele NÃO é deixava a
   linha do tempo inteira a 34% justo quando ela é o resultado. */
.linha-camada .faixa-seg.futuro{opacity:.34}

@media (max-width:760px){
  /* num vídeo de 197px de altura, o degradê escurecia 72% da imagem — tapava
     justo quem fala. O cartão já tem fundo e desfoque próprios para ser lido. */
  .coment{padding:0 8px 44px;background:none}
  .coment-cartao{max-width:100%}
  .coment-texto{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .coment-cartao,.subiu::after,.desceu::after,.selo-vivo i{animation:none}
}

/* a linha do tempo enchendo: o trecho acende com a cor da sua nota na hora em
   que o vídeo passa por ele */
.faixa-seg.futuro{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
/* nome próprio: "acende" já existe no style.css (o número do painel piscando em
   ouro), e o último @keyframes com o mesmo nome vale para a página inteira — o
   número da tela de progresso passava a esticar e encolher como um trecho. */
.faixa-seg.acendeu{animation:acende-trecho .45s cubic-bezier(.2,.9,.3,1)}
@keyframes acende-trecho{0%{transform:scaleY(.35);opacity:.2}60%{transform:scaleY(1.25)}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.faixa-seg.acendeu{animation:none}}

/* elogio e crítica não podem ter a mesma cara */
.coment-lado{
  font:700 9px/1 var(--fonte);letter-spacing:.14em;text-transform:uppercase;
  padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.07);white-space:nowrap;
}
.coment-cartao[data-lado="corrigir"]{background:rgba(32,12,12,.62);border-color:rgba(226,105,93,.28)}
.coment-cartao[data-lado="forte"]{background:rgba(11,24,19,.6);border-color:rgba(99,199,154,.22)}

/* atalho para quem não quer assistir: mostra a nota do vídeo inteiro de uma vez */
.btn-final{
  margin-left:auto;padding:8px 14px;border-radius:999px;cursor:pointer;
  font:600 12px/1 var(--fonte);color:var(--texto-2);
  background:transparent;border:1px solid var(--linha-forte);
  transition:color .15s,border-color .15s;
}
.btn-final:hover{color:var(--texto);border-color:var(--ouro)}
.btn-final:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

/* a seta no radar: para que lado aquela camada acabou de ir */
.radar-seta{font:700 11px/1 var(--fonte)}
.radar-seta.subiu{fill:var(--bom)}
.radar-seta.desceu{fill:var(--ruim)}

/* em tela cheia é a moldura que vai, para o comentário ir junto com o vídeo */
.moldura-player:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0}
.moldura-player:fullscreen video{width:100%;height:100%}
.moldura-player:fullscreen .moldura-cantos{display:none}
.moldura-player:fullscreen .coment{padding:60px 40px 92px}
.moldura-player:fullscreen .coment-cartao{max-width:min(60%,760px)}
.moldura-player:fullscreen .coment-texto{font-size:22px}
.moldura-player:fullscreen .coment-camada{font-size:12px}

/* ======================= relatório: respiro e hierarquia ==================
   O relatório estava em duas colunas que não conversavam: cabeçalho alto, vídeo
   pequeno e as notas soltas numa lista. Agora o vídeo é o centro, o placar das
   cinco camadas responde por todo o resto no topo, e cada nota vira cartão. */

.rel-topo-fino{align-items:flex-end;gap:20px;margin-bottom:22px}
.rel-topo-fino .titulo-menor{margin:0;line-height:1.05}
.rel-topo-fino .rel-meta{margin-top:6px}

/* placar: cinco camadas em barra, legível em dois segundos */
.placar{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  border:1px solid var(--linha);border-radius:14px;overflow:hidden;
  background:var(--linha);
}
.placar-item{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  padding:14px 16px 13px;display:flex;flex-direction:column;gap:7px;min-width:0;
}
.placar-nome{
  font:600 10px/1 var(--fonte);letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.placar-nota{
  font-family:var(--display);font-weight:400;font-size:2rem;line-height:1;
  font-variant-numeric:tabular-nums;transition:color .25s;
}
.placar-barra{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.placar-barra i{display:block;height:100%;width:0;border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.3,1),background .3s}

/* o vídeo passa a ser o centro da página, não um quadradinho na lateral */
.vid-rel{grid-template-columns:minmax(420px,56%) minmax(0,1fr);margin-top:30px}
.vid-dir{gap:24px}
.vid-dir .rel-radar{max-width:440px;margin:0 auto}

/* linha do tempo mais alta e mais legível */
.faixa{height:26px;gap:2px}
.faixa-seg{border-radius:5px}
.linha-camada{grid-template-columns:96px minmax(0,1fr) 42px}
.linhas-camada{gap:10px}

/* as 18 notas viram cartões, com a cor da nota na borda */
.tela-rel-video .rel-notas{
  margin-top:46px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px 26px;
}
.tela-rel-video .rel-camada{
  border:1px solid var(--linha);border-radius:16px;padding:18px 20px 8px;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006));
}
.tela-rel-video .rel-camada h4{font-size:1.25rem;margin-bottom:10px}
.tela-rel-video .rel-item{
  padding:11px 0 12px;border-top:1px solid var(--linha);
  border-left:2px solid transparent;padding-left:0;transition:border-color .25s,padding-left .18s;
}
.tela-rel-video .rel-item:hover{border-left-color:var(--linha-forte);padding-left:10px}
.tela-rel-video .rel-item-evid{margin-top:5px;line-height:1.5}

@media (max-width:1180px){
  .placar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .placar-item:last-child{grid-column:1 / -1}
  .vid-rel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .placar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .placar-nota{font-size:1.6rem}
  .rel-topo-fino{flex-wrap:wrap}
}

/* ---- o que acabou de acontecer (coluna direita, enquanto se assiste) ---- */
.feed h3{
  font:600 11px/1 var(--fonte);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ouro);margin-bottom:14px;
}
.feed-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.feed-item{
  border:1px solid var(--linha);border-left:2px solid var(--linha-forte);
  border-radius:10px;padding:10px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  animation:feed-entra .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes feed-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.feed-item:nth-child(n+5){opacity:.55}
.feed-item:nth-child(n+7){opacity:.3}
.feed-topo{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.feed-camada{
  font:600 10px/1.3 var(--fonte);letter-spacing:.12em;text-transform:uppercase;color:var(--texto-3);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.feed-t{font-size:11px;color:var(--texto-3);font-variant-numeric:tabular-nums;margin-left:auto}
.feed-nota{font-size:13px;font-variant-numeric:tabular-nums}
.feed-texto{margin:0;font-size:.95rem;line-height:1.45;color:var(--texto)}
.feed-vazio{font-size:.92rem;color:var(--texto-3);line-height:1.5}
@media (prefers-reduced-motion:reduce){.feed-item{animation:none}}

/* o cinza de apoio (#5f6675) dá 3,5:1 sobre o preto — abaixo dos 4,5:1 que texto
   pequeno pede, e aqui ele carrega a legenda do placar, a hora de cada evidência
   e a régua. Só nesta tela, para não mexer nas outras páginas sem revisá-las. */
.tela-rel-video{--texto-3:#7d8494}

/* ---- tela cheia: a moldura vai inteira, com o comentário por cima ----
   O botão nativo leva só o <video> e trocar depois não dá: o segundo pedido já
   não tem o gesto da pessoa. Então o pedido sai daqui, direto no clique. */
.btn-telacheia{
  position:absolute;top:10px;right:10px;z-index:4;
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(7,8,11,.55);color:var(--texto);cursor:pointer;
  opacity:.7;transition:opacity .15s,background .15s;
}
.btn-telacheia:hover,.btn-telacheia:focus-visible{opacity:1;background:rgba(7,8,11,.82)}
.btn-telacheia:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.btn-telacheia svg{width:18px;height:18px}
.moldura-player:fullscreen .btn-telacheia{top:18px;right:18px}

/* sem player, o momento é só a hora em que aconteceu — não um botão que não faz nada */
.momento:disabled,.faixa-seg:disabled{cursor:default}
.momento:disabled svg{display:none}
.momento:disabled:hover{background:rgba(232,183,101,.10);border-color:rgba(232,183,101,.28);color:var(--ouro)}
.faixa-seg:disabled:hover{transform:none;filter:none}

/* celular em pé, de novo: as regras de desktop desta seção vêm depois do bloco de
   celular lá em cima e ganham dele (mesma especificidade). Sem isto a linha do
   tempo ficava com 3 colunas para 2 áreas — a nota da camada desalinhada — e,
   com 31 trechos de 22px, a faixa media 800px numa tela de 390. */
@media (max-width:820px), (orientation:portrait) and (max-width:1024px){
  .linha-camada{grid-template-columns:minmax(0,1fr) auto}
  .faixa{height:30px}
  .faixa-seg{min-width:0}
  .btn-telacheia{width:44px;height:44px}
}