/* Dextra CRM em vídeo — índice e página de cada peça.
   Reusa styles.css do site (tokens, cabeçalho, botões, rodapé) e o palco escuro do
   treinamento: as peças têm fundo claro com moldura verde, e um palco claro
   disputaria atenção com elas.

   A moldura segue o formato da peça (data-formato): 16:9 na largura disponível;
   9:16 limitada pela altura da tela, para a vertical caber inteira e legível. O
   vídeo fica sempre em contain — nada é cortado, nem em tela cheia. */

.vv-stage{
  --vv-bg:#00120b; --vv-ink:#f4f1e9; --vv-muted:rgba(244,241,233,.76); --vv-soft:rgba(244,241,233,.64);
  --vv-line:rgba(244,241,233,.13); --vv-card:rgba(244,241,233,.045); --vv-hi:rgba(244,241,233,.09);
  --vv-accent:#7fd2a6; --vv-link:#a9e3c4;
  background:var(--vv-bg);color:var(--vv-ink);padding:22px 0 48px;
}
.vv-stage .container{max-width:1320px;}
.vv-stage :focus-visible{outline:2px solid var(--vv-link);outline-offset:3px;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.vv-fora{position:fixed;left:-9999px;top:0;opacity:0;}

/* trilha */
.vv-trilha ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:13.5px;color:var(--vv-soft);}
.vv-trilha li:not(:last-child)::after{content:"/";margin:0 9px;color:var(--vv-soft);}
.vv-trilha a{color:var(--vv-link);text-decoration:underline;text-underline-offset:3px;}
.vv-trilha [aria-current]{color:var(--vv-ink);}

/* cabeçalho do índice */
.vv-head{max-width:860px;margin-bottom:22px;}
.vv-head h1{color:#fff;font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin:0 0 8px;}
.vv-lead{margin:0 0 12px;font-size:clamp(18px,1.8vw,22px);font-weight:600;color:var(--vv-accent);letter-spacing:-.01em;}
.vv-resumo{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;color:var(--vv-muted);font-size:15px;}
.vv-resumo li:not(:last-child)::after{content:"·";margin:0 10px;color:var(--vv-soft);}
.vv-resumo b{color:var(--vv-ink);font-weight:600;}

/* moldura do vídeo */
.vv-quadro{position:relative;margin-inline:auto;background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.5),0 0 0 1px var(--vv-line);scroll-margin-top:84px;}
.vv-quadro[data-formato="16x9"]{width:100%;aspect-ratio:16/9;}
.vv-quadro[data-formato="9x16"]{width:min(100%,calc(80svh * 9 / 16),480px);aspect-ratio:9/16;}
.vv-quadro video{display:block;width:100%;height:100%;object-fit:contain;background:#000;}
video:fullscreen{width:100%;height:100%;object-fit:contain;background:#000;}

/* informação e ações */
.vv-grupo-nome{margin:0 0 4px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--vv-accent);}
.vv-info h1,.vv-info h2{color:#fff;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.025em;margin:0;}
.vv-meta{margin:6px 0 0;font-size:14.5px;color:var(--vv-soft);font-variant-numeric:tabular-nums;}
.vv-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.vv-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  border-radius:var(--r-sm);padding:9px 14px;border:1px solid var(--vv-line);background:transparent;color:var(--vv-ink);
  text-decoration:none;transition:background .15s,border-color .15s;}
.vv-btn:hover{background:var(--vv-hi);border-color:var(--vv-soft);}
.vv-btn-forte{background:var(--green);border-color:var(--green);color:#fff;}
.vv-btn-forte:hover{background:#00713f;border-color:#00713f;}
.vv-btn-det{font-weight:500;opacity:.82;}
.vv-aviso{min-height:1.5em;margin:10px 0 0;font-size:14px;color:var(--vv-accent);overflow-wrap:anywhere;}
.vv-todos{margin:4px 0 0;font-size:14.5px;}
.vv-todos a{color:var(--vv-link);text-decoration:underline;text-underline-offset:3px;}

/* transcrição */
.vv-trans{margin-top:18px;border:1px solid var(--vv-line);border-radius:var(--r);background:var(--vv-card);}
.vv-trans summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:15px;border-radius:var(--r);}
.vv-trans summary:hover{background:var(--vv-hi);}
.vv-trans-corpo{padding:2px 16px 12px;max-height:420px;overflow:auto;}
.vv-trans-corpo p{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--vv-muted);max-width:75ch;}

/* página da peça: vídeo e informação lado a lado */
.vv-peca{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px 32px;align-items:start;}
.vv-peca[data-formato="9x16"]{grid-template-columns:auto minmax(0,1fr);}
.vv-peca[data-formato="9x16"] .vv-quadro{width:min(100%,calc(80svh * 9 / 16),480px);}
.vv-peca .vv-quadro[data-formato="16x9"]{width:min(100%,calc((100svh - 190px) * 16 / 9));}

/* índice: player à esquerda, playlist à direita */
.vv-grade{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px 30px;align-items:start;}
.vv-palco .vv-info{margin-top:16px;}
.vv-palco .vv-quadro[data-formato="16x9"]{width:min(100%,calc((100svh - 120px) * 16 / 9));}

.vv-lista{display:flex;flex-direction:column;gap:18px;}
.vv-grupo h3{color:#fff;font-size:15px;font-weight:600;letter-spacing:0;margin:0 0 8px;}
.vv-grupo ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
.vv-grupo li{display:flex;align-items:center;gap:6px;border-radius:var(--r-sm);border:1px solid transparent;}
.vv-grupo li:has(a[aria-current="true"]){background:var(--vv-hi);border-color:var(--vv-soft);}
.vv-grupo a{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:12px;align-items:center;padding:7px;border-radius:var(--r-sm);color:var(--vv-ink);transition:background .15s;}
.vv-grupo a:hover{background:var(--vv-hi);}
.vv-mini{grid-row:1/3;display:block;width:96px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000;}
.vv-mini img{display:block;width:100%;height:100%;object-fit:contain;}
.vv-item-nome{font-size:14.5px;font-weight:600;line-height:1.3;align-self:end;}
.vv-item-meta{font-size:13px;color:var(--vv-soft);font-variant-numeric:tabular-nums;align-self:start;margin-top:2px;}
.vv-copiar-item{flex:0 0 auto;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--vv-link);
  background:transparent;border:1px solid var(--vv-line);border-radius:8px;padding:6px 9px;margin-right:7px;}
.vv-copiar-item:hover{background:var(--vv-hi);}

.vv-nota{margin:26px 0 0;font-size:13.5px;color:var(--vv-soft);max-width:80ch;}

/* mensagem aprovada e CTA */
.vv-cta{background:var(--green);color:#fff;}
.vv-cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-top:28px;padding-bottom:28px;}
.vv-cta-msg{margin:0;font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;}

@media(max-width:1000px){
  .vv-grade,.vv-peca,.vv-peca[data-formato="9x16"]{grid-template-columns:minmax(0,1fr);}
  .vv-peca .vv-quadro[data-formato="16x9"],.vv-palco .vv-quadro[data-formato="16x9"]{width:100%;}
  .vv-grupo ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
}
@media(max-width:640px){
  .vv-stage{padding:16px 0 36px;}
  .vv-quadro[data-formato="16x9"],.vv-peca .vv-quadro[data-formato="16x9"],.vv-palco .vv-quadro[data-formato="16x9"]{
    width:calc(100% + 16px);margin-inline:-8px;border-radius:10px;}
  .vv-quadro[data-formato="9x16"],.vv-peca[data-formato="9x16"] .vv-quadro{width:min(100%,calc(78svh * 9 / 16));}
  .vv-acoes .vv-btn{flex:1 1 auto;justify-content:center;}
  .vv-grupo ol{grid-template-columns:1fr;}
  .vv-cta-in{flex-direction:column;align-items:flex-start;}
}
@media(prefers-reduced-motion:reduce){
  .vv-btn,.vv-grupo a{transition:none;}
}

/* O link "Treinamento" no cabeçalho não cabe entre 641 e 900px (mesma regra do treinamento). */
@media(min-width:641px) and (max-width:900px){
  .menu a[href="/atende/treinamentos/crm-imobiliario/"]{display:none;}
}