/* Bloco "vídeo do case" (.video-case): opcional no modelo de case; a versão compacta cabe num cartão de case (página de setor).
   Carregado depois do previa.css (e do previa-case.css ou previa-setor.css da página). Script: previa-bloco-video.js.
   Protótipo com os três usos: _proto/bloco-video.html. Escrito do celular para cima: base 390, depois 621 e 981.
   Cores só pelas variáveis de superfície (--fg, --fg2, --titulo, --acento, --chip): serve em claro, papel e roxo.

   MODIFICADORES
   .vc-vertical  vídeo em pé que mora noutra rede (reel): um cartão em forma de celular, DESENHADO (selo "ilustração", não é
                 print do vídeo), que só leva para fora (<a target="_blank" rel="noopener">). Nada de terceiro carrega. Sem script.
   .vc-youtube   vídeo deitado no YouTube: a capa (i.ytimg.com) com o botão de tocar; no clique, o script troca a capa pelo
                 player de youtube-nocookie.com. Antes do clique, a única requisição a terceiro é a imagem da capa.
                 Sem JS, a capa é um link comum para o vídeo no YouTube. Um player por vez na página.
   .vc-compacto  (junto de .vc-youtube) dentro de um cartão de case: sem título nem resumo, a capa de borda a borda em 16:10.
   Atributos lidos pelo script, no elemento .video-case.vc-youtube: data-vc-id (id do vídeo, 11 caracteres, obrigatório),
   data-vc-titulo (vira o title do <iframe>, "Vídeo no YouTube: …", e o nome do botão, "Reproduzir o vídeo: …"),
   data-vc-inicio (opcional, segundo em que o vídeo começa). Estado: .vc-ativo no .video-case enquanto o player está aberto.

   ============================== NOTAS DE INTEGRAÇÃO (02/10/2026) ==============================
   Editar as FONTES em _paginas/ e rodar python3 _montar.py (ele põe o ?v= nos arquivos). Depois, erros.mjs a 390 e 1366.

   (A) CASE TECHNOGYM, reel do Instagram. Arquivo: _paginas/case.html.
       <head>: depois de <link rel="stylesheet" href="previa-bloco-hub.css">, acrescentar
               <link rel="stylesheet" href="previa-bloco-video.css">
       Script: nenhum (o .vc-vertical é só link). JSON-LD: nenhum (o vídeo não toca na página).
       Onde: seção nova entre o </section> de #caminho ("O fluxo da Technogym", roxo) e <section … id="conector-pronto">
       ("A escolha técnica", papel). Fica roxo, claro, papel. Colar:

<!-- O CASE EM VÍDEO (claro, bloco opcional do modelo): reel de @olivasdigital no Instagram. O celular é desenhado e só leva
     para fora; nada do Instagram carrega aqui. Estilo: previa-bloco-video.css. Trocar por .vc-youtube se o vídeo for para o YouTube. -->
<section class="sec sec-video" id="video" data-surf="claro" aria-labelledby="t-video">
  <div class="caixa">
    <div class="video-case vc-vertical">
      <div class="vc-cab">
        <span class="sobre">O case em vídeo</span>
        <h2 class="h2" id="t-video">Prefere assistir?<br><span class="marca">O Sales&nbsp;App em vídeo.</span></h2>
      </div>
      <figure class="vc-midia">
        <div class="vc-quadro">
          <a class="vc-play" href="https://www.instagram.com/reel/DbYScJRjTrO/" target="_blank" rel="noopener" aria-label="Assistir no Instagram: vídeo do case Technogym (abre em nova aba)">
            <span class="vc-fone" aria-hidden="true" data-nosnippet><span class="vc-tela">
              <small class="vc-ilus">ilustração</small>
              <span class="vc-centro">
                <span class="vc-botao"><svg viewBox="0 0 24 24" focusable="false"><path d="M8.5 5.6v12.8a.6.6 0 0 0 .92.5l9.9-6.4a.6.6 0 0 0 0-1L9.42 5.1a.6.6 0 0 0-.92.5z"/></svg></span>
                <span class="vc-nome">Sales&nbsp;App<small>vídeo do case</small></span>
              </span>
              <span class="vc-destino"><i class="vc-ig"></i>abre no Instagram</span>
            </span></span>
          </a>
        </div>
      </figure>
      <div class="vc-texto">
        <p class="vc-resumo">O reel apresenta o Sales&nbsp;App, que a Olivas construiu para a Technogym Brasil. O sistema centraliza os processos comerciais e dá a visão completa da operação: liga CRM, ERP, logística, serviços e BI.</p>
        <p class="vc-meta">Publicado em 29/07/2026 no perfil @olivasdigital.</p>
        <a class="vc-link" href="https://www.instagram.com/reel/DbYScJRjTrO/" target="_blank" rel="noopener" tabindex="-1" aria-hidden="true"><i class="vc-ig"></i><span>Assistir no Instagram</span></a>
      </div>
    </div>
  </div>
</section>

       Regras deste trecho: o cartão-celular é O link (nome acessível no aria-label, começando pelo texto visível "Assistir no
       Instagram"); o link de texto repete o destino só para o ponteiro e o toque (tabindex="-1" aria-hidden="true": uma parada
       de teclado, um anúncio no leitor de tela). O .vc-link é filho direto do .vc-texto, fora de <p> (no celular ele desce
       para uma linha própria). Sem duração do vídeo (não é conhecida).

   (B) PÁGINA DE SETOR, cartão "Motul Expert" com o vídeo do YouTube. Arquivo: _paginas/setor-industria-e-distribuicao.html.
       <head>: depois de <link rel="stylesheet" href="previa-setor.css">, acrescentar
               <link rel="stylesheet" href="previa-bloco-video.css">
       Fim do <body>: depois de <script src="previa.js"></script>, acrescentar
               <script src="previa-bloco-video.js"></script>
       Onde: em "Cases do setor" (#cases, .setor-cases), SUBSTITUIR o cartão inteiro
       <a class="setor-case" href="/trabalhos-realizados/motul-expert/"> … </a> (o terceiro) por:

      <!-- cartão com vídeo: <article>, não <a> (botão dentro de link não vale). A capa toca o vídeo; o link do case fica no
           título e cobre o corpo. Capa só em 16:9 (mqdefault e maxresdefault): a hqdefault é 4:3 com tarjas pretas. -->
      <article class="setor-case vc-cartao">
        <figure class="video-case vc-youtube vc-compacto" data-vc-id="EX7KuCFAXOo" data-vc-titulo="App Motul Expert">
          <div class="vc-quadro">
            <a class="vc-play" href="https://www.youtube.com/watch?v=EX7KuCFAXOo" target="_blank" rel="noopener">
              <img class="vc-capa" src="https://i.ytimg.com/vi/EX7KuCFAXOo/mqdefault.jpg" srcset="https://i.ytimg.com/vi/EX7KuCFAXOo/mqdefault.jpg 320w, https://i.ytimg.com/vi/EX7KuCFAXOo/maxresdefault.jpg 1280w" sizes="(min-width:981px) 370px, (min-width:621px) 46vw, 80vw" alt="" width="320" height="180" loading="lazy" decoding="async" referrerpolicy="no-referrer">
              <span class="vc-botao" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M8.5 5.6v12.8a.6.6 0 0 0 .92.5l9.9-6.4a.6.6 0 0 0 0-1L9.42 5.1a.6.6 0 0 0-.92.5z"/></svg></span>
              <span class="sr vc-rotulo">Assistir no YouTube: App Motul Expert (abre em nova aba)</span>
            </a>
          </div>
          <figcaption class="vc-leg">Vídeo da Motul sobre o aplicativo</figcaption>
        </figure>
        <div class="setor-case-corpo">
          <small>Aplicativo de 2019</small>
          <h3><a href="/trabalhos-realizados/motul-expert/">Motul Expert</a></h3>
          <p>Desenvolvemos o aplicativo que cruza o catálogo com os dados do veículo e indica o produto certo. Em 2023, foram mais de 4 milhões de buscas.</p>
          <span class="setor-case-link" aria-hidden="true">Ver o case</span>
        </div>
      </article>

       O corpo (etiqueta, título, frase) é o do cartão que já está aprovado na página: se ele mudou, vale o da página.
       A legenda da capa é uma linha de texto, sem link. Sai do cartão a imagem motul-site-portfolio (e a classe .recorte).

       JSON-LD de (B): NENHUM por enquanto (corrigido em 06/10/2026; vale a regra do modelo de case, _docs/case-modelo.md,
       bloco B3b, e o registro P168). O nó VideoObject só entra quando a data de publicação do vídeo for conhecida: sem
       "uploadDate" o Google não aceita o nó. A data deste vídeo ainda não foi apurada (não inventar), então a página fica sem o nó.
       Quando alguém levantar a data no YouTube, acrescentar ao "@graph" da página (com a vírgula depois do nó anterior):

  {
   "@type": "VideoObject",
   "name": "[MOTUL BRASIL] App Motul Expert",
   "description": "Vídeo da Motul que apresenta o Motul Expert, aplicativo desenvolvido pela Olivas Digital: ele cruza o catálogo de lubrificantes com os dados do veículo e indica o produto certo.",
   "thumbnailUrl": "https://i.ytimg.com/vi/EX7KuCFAXOo/hqdefault.jpg",
   "embedUrl": "https://www.youtube.com/embed/EX7KuCFAXOo",
   "uploadDate": "AAAA-MM-DD"
  }

       Sem "duration" enquanto a duração não for conhecida.

   (C) VÍDEO DO YOUTUBE COMO SEÇÃO de um case (ex.: a futura página do case Motul Expert, que ainda não existe no layout novo).
       Mesmo <link> e <script> de (B), o nó VideoObject sob a mesma condição (só com a data de publicação), e a seção como no protótipo (#demo-b):
       <section class="sec sec-video" id="video" data-surf="papel" aria-labelledby="t-video"><div class="caixa">
         <div class="video-case vc-youtube" data-vc-id="ID" data-vc-titulo="Nome do vídeo">
           <div class="vc-cab"><span class="sobre">…</span><h2 class="h2" id="t-video">Frase.<br><span class="marca">Destaque.</span></h2></div>
           <figure class="vc-midia">
             <div class="vc-quadro"><a class="vc-play" href="https://www.youtube.com/watch?v=ID" target="_blank" rel="noopener">
               <img class="vc-capa" src="https://i.ytimg.com/vi/ID/hqdefault.jpg" srcset="…/hqdefault.jpg 480w, …/maxresdefault.jpg 1280w" sizes="(min-width:981px) 565px, (min-width:621px) 46vw, 92vw" alt="" width="480" height="360" loading="lazy" decoding="async" referrerpolicy="no-referrer">
               <span class="vc-botao" aria-hidden="true"><svg …></svg></span>
               <span class="sr vc-rotulo">Assistir no YouTube: Nome do vídeo (abre em nova aba)</span></a></div>
             <figcaption class="vc-leg">De quem é o vídeo, numa linha. <a href="https://www.youtube.com/watch?v=ID" target="_blank" rel="noopener">Abrir no YouTube<span class="sr"> (abre em nova aba)</span></a></figcaption>
           </figure>
           <div class="vc-texto"><p class="vc-resumo">Duas ou três linhas do que o vídeo mostra (buscador e IA não assistem).</p></div>
         </div></div></section>

   CAPAS DO YOUTUBE: na seção (caixa 16:9) a hqdefault.jpg serve, porque o corte tira exatamente as tarjas pretas dela; a
   maxresdefault.jpg entra no srcset para tela larga ou densa (conferir se existe para o vídeo: abrir o endereço). No cartão
   (caixa 16:10) só capa 16:9, mqdefault.jpg e maxresdefault.jpg: com a hqdefault sobrariam 11 px de tarja em cima e embaixo.

   ALTURAS MEDIDAS no protótipo (02/10/2026):
   seção .vc-vertical  494 px a 1366, 474 a 1024, 409 a 768, 499 a 390, 478 a 360 (aparelho de 156 × 266 px a 390: 32% de 844)
   seção .vc-youtube   459 px a 1366, 403 a 1024, 310 a 768, 544 a 390, 527 a 360
   cartão com vídeo    da altura dos vizinhos (451 px a 1366; 312 × 438 no carrossel a 390)
   O player entra na mesma caixa da capa: a página não pula no clique.

   LIMITES CONHECIDOS: no iPhone o primeiro toque pode só carregar o player (o segundo toca), porque o autoplay com som depende
   do navegador. No cartão, o player 16:9 fica com duas faixas finas na caixa 16:10. O disco de tocar fica no centro da capa e
   pode cobrir um pedaço do texto que a capa tiver. */

/* ---------- seção de apoio: mais baixa que as outras, com o H2 um degrau menor (mesma medida do .sec-mais do case) ---------- */
:is(.pg-case,.pg-setor,body) .sec.sec-video{padding-block:clamp(36px,4.5vw,56px)}
.sec-video .h2{font-size:clamp(1.55rem,2.4vw,2.1rem)}

/* ---------- base ---------- */
.video-case{display:grid;grid-template-columns:minmax(0,1fr);row-gap:18px;min-width:0;margin:0}
.vc-cab,.vc-texto,.vc-midia{min-width:0;margin:0}
.vc-cab .sobre{margin-bottom:10px}
.vc-quadro{position:relative;min-width:0}
.vc-play{display:block;margin:0;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* marca de tocar: disco oliva com o triângulo roxo (o círculo oliva é o "nosso" do percurso do case) */
.vc-botao{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--oliva);color:var(--roxo-900);box-shadow:0 0 0 7px rgba(220,209,84,.28),0 12px 26px -10px rgba(0,0,0,.65);transition:transform .18s ease,box-shadow .18s ease}
.vc-botao svg{display:block;width:46%;height:46%;margin-left:5%;fill:currentColor}
.vc-play:hover .vc-botao{transform:scale(1.06);box-shadow:0 0 0 10px rgba(220,209,84,.3),0 12px 26px -10px rgba(0,0,0,.65)}
/* glifo do Instagram (o mesmo arquivo da faixa do topo), na cor do texto */
.vc-ig{display:inline-block;flex:none;width:1.15em;height:1.15em;background:currentColor;-webkit-mask:url(../assets-marca/icones/instagram.svg) center/contain no-repeat;mask:url(../assets-marca/icones/instagram.svg) center/contain no-repeat}

/* textos */
.vc-resumo{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.55;color:var(--fg2);max-width:58ch;text-wrap:pretty}
.vc-meta{margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
.vc-leg{margin-top:10px;font-size:13.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
/* link da legenda: área de toque maior sem mudar a linha (o padding cresce para fora, a margem negativa devolve) */
/* position:relative no link: o texto só para leitor de tela (.sr, absoluto) fica preso a ele e não alarga a página */
.vc-leg a{position:relative;display:inline-block;padding:12px 0;margin:-12px 0;font-weight:600;color:inherit;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s ease}
.vc-leg a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
/* link de ação: o desenho do .link-seta, com 44 px de altura de toque */
.vc-link{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;font-weight:700;color:var(--acento);text-decoration:none}
.vc-link > span{padding-bottom:2px;border-bottom:2px solid currentColor;transition:border-color .15s ease}
.vc-link::after{content:"→";transition:transform .15s ease}
.vc-link:hover::after{transform:translateX(4px)}
.vc-link:hover > span{border-bottom-color:var(--oliva)}
html[data-dir="a"] [data-surf="roxo"] .vc-link:hover,html[data-dir="a"] [data-surf="fundo"] .vc-link:hover{color:#fff}
html[data-dir="a"] [data-surf="roxo"] .vc-link:hover > span,html[data-dir="a"] [data-surf="fundo"] .vc-link:hover > span{border-bottom-color:#fff}

/* ---------- .vc-vertical: cartão em forma de celular, que leva ao reel ----------
   --vc-w é a largura do aparelho; tudo dentro dele é proporção dessa medida (a altura fica em 1,71 × --vc-w).
   Celular: título em cima; embaixo, o aparelho à esquerda e o texto ao lado (como o celular da loja nos "dois motores").
   621+: texto à esquerda e o aparelho à direita, num palco da cor dos cartões da superfície. */
.vc-vertical{--vc-w:clamp(140px,40vw,160px);grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.vc-vertical .vc-cab{grid-column:1 / -1}
.vc-vertical .vc-midia{grid-column:1}
.vc-vertical .vc-texto{grid-column:2}
.vc-vertical .vc-play{width:var(--vc-w);border-radius:calc(var(--vc-w) * .17);transition:transform .18s ease}
.vc-vertical .vc-play:hover{transform:translateY(-3px)}
.vc-vertical .vc-play:focus-visible{outline-offset:4px;border-radius:calc(var(--vc-w) * .17)}
.vc-fone{position:relative;display:block;padding:calc(var(--vc-w) * .045);border-radius:calc(var(--vc-w) * .17);background:var(--tinta);box-shadow:var(--sombra)}
.vc-fone::before{content:"";position:absolute;z-index:1;left:50%;top:calc(var(--vc-w) * .075);width:22%;height:calc(var(--vc-w) * .04);margin-left:-11%;border-radius:999px;background:var(--tinta)}
.vc-tela{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;aspect-ratio:9 / 16;overflow:hidden;padding:calc(var(--vc-w) * .17) calc(var(--vc-w) * .05) calc(var(--vc-w) * .09);border-radius:calc(var(--vc-w) * .125);background:radial-gradient(120% 80% at 85% 0%,#8F2889 0%,var(--roxo) 40%,var(--roxo-900) 100%);color:#fff;text-align:center}
/* selo de ilustração: o mesmo do cabeçalho do tablet (.sa-cab small) */
.vc-ilus{padding:2px 8px;border:1px solid rgba(255,255,255,.5);border-radius:999px;font:600 10px/1.3 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.vc-centro{align-self:center;display:grid;justify-items:center;row-gap:calc(var(--vc-w) * .085)}
.vc-vertical .vc-botao{width:max(44px,calc(var(--vc-w) * .3));height:max(44px,calc(var(--vc-w) * .3))}
.vc-nome{font-size:max(15px,calc(var(--vc-w) * .1));font-weight:800;line-height:1.1;letter-spacing:-.01em}
.vc-nome small{display:block;margin-top:.35em;font-size:max(11.5px,.66em);font-weight:500;letter-spacing:0;color:rgba(255,255,255,.86)}
.vc-destino{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 max(11px,calc(var(--vc-w) * .062))/1.25 var(--fonte);color:#fff}
.vc-destino .vc-ig{color:var(--oliva)}
/* em superfície escura, o aparelho ganha o anel oliva (como o celular da loja da Jabuticaba) */
[data-surf="roxo"] .vc-fone,[data-surf="fundo"] .vc-fone{box-shadow:0 0 0 3px var(--oliva),0 28px 50px -24px rgba(0,0,0,.6)}
/* celular: resumo e data ao lado do aparelho; o link de ação desce para uma linha própria, na largura toda
   (ao lado do aparelho, "Assistir no Instagram" partia em duas linhas). O .vc-texto some como caixa e os filhos entram na grade:
   resumo colado embaixo da linha 2 e data colada em cima da linha 3, então os dois ficam juntos e centrados na altura do aparelho */
@media (max-width:620px){
  .vc-vertical{row-gap:0}
  .vc-vertical .vc-cab{margin-bottom:18px}
  .vc-vertical .vc-midia{grid-row:2 / span 2}
  .vc-vertical .vc-texto{display:contents}
  .vc-vertical .vc-resumo{grid-column:2;grid-row:2;align-self:end;font-size:14.5px;line-height:1.5}
  .vc-vertical .vc-meta{grid-column:2;grid-row:3;align-self:start;font-size:13px}
  .vc-vertical .vc-link{grid-column:1 / -1;grid-row:4;justify-self:start;margin-top:12px}
}
@media (min-width:621px){
  .vc-vertical{--vc-w:176px;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,5vw,64px);row-gap:0}
  .vc-vertical .vc-cab{grid-column:1;grid-row:1;align-self:end}
  .vc-vertical .vc-texto{grid-column:1;grid-row:2;align-self:start;margin-top:16px}
  .vc-vertical .vc-midia{grid-column:2;grid-row:1 / span 2}
  .vc-vertical .vc-quadro{display:grid;place-items:center;padding:18px 34px;border-radius:var(--raio);background:var(--chip)}
  [data-surf="papel"] .vc-vertical .vc-quadro{background:var(--card)}
}
@media (min-width:981px){
  .vc-vertical{--vc-w:200px}
  .vc-vertical .vc-quadro{padding:20px 70px}
}

/* ---------- .vc-youtube: capa com botão de tocar; no clique, o player ---------- */
.vc-youtube .vc-quadro{aspect-ratio:var(--vc-proporcao,16 / 9);border-radius:var(--raio);background:var(--roxo-900);box-shadow:var(--sombra)}
.vc-youtube .vc-play{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.vc-youtube .vc-play:focus-visible{border-radius:var(--raio)}
.vc-capa{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit}
/* véu roxo sobre a capa: o disco oliva aparece em qualquer imagem */
.vc-youtube .vc-play::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(42,8,40,.04),rgba(42,8,40,.28));transition:opacity .2s ease}
.vc-youtube .vc-play:hover::after{opacity:.7}
/* o disco acompanha a largura da capa (12%, de 48 a 64 px): numa capa de 330 px, o de 68 px tapava o texto da imagem.
   Sem suporte a unidade de contêiner (cqw), fica em 56 px */
.vc-youtube .vc-quadro{container-type:inline-size}
.vc-youtube .vc-botao{position:absolute;z-index:1;inset:0;margin:auto;width:56px;height:56px;width:clamp(48px,12cqw,64px);height:clamp(48px,12cqw,64px);box-shadow:0 0 0 6px rgba(220,209,84,.28),0 12px 26px -10px rgba(0,0,0,.65)}
.vc-youtube .vc-play:hover .vc-botao{box-shadow:0 0 0 8px rgba(220,209,84,.3),0 12px 26px -10px rgba(0,0,0,.65)}
.vc-player{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:#000}
@media (min-width:621px){
  .vc-youtube:not(.vc-compacto){grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4.5vw,56px);row-gap:0}
  .vc-youtube:not(.vc-compacto) .vc-cab{grid-column:1;grid-row:1;align-self:end}
  .vc-youtube:not(.vc-compacto) .vc-texto{grid-column:1;grid-row:2;align-self:start;margin-top:16px}
  .vc-youtube:not(.vc-compacto) .vc-midia{grid-column:2;grid-row:1 / span 2;align-self:center}
}
@media (min-width:981px){.vc-youtube:not(.vc-compacto){grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}}

/* ---------- .vc-compacto: dentro do cartão de case ---------- */
.vc-compacto{row-gap:0}
.vc-compacto .vc-quadro{--vc-proporcao:16 / 10;border-radius:0;box-shadow:none}
/* o cartão corta o que passa da borda: o foco é desenhado por dentro, em dois tons (aparece em capa clara e escura) */
.vc-compacto .vc-play:focus-visible{outline:3px solid transparent;outline-offset:-3px;border-radius:0}
.vc-compacto .vc-play:focus-visible::after{box-shadow:inset 0 0 0 3px var(--roxo-900),inset 0 0 0 6px var(--oliva)}
/* a legenda fica sobre o pé da capa (faixa escura), não embaixo dela: assim a etiqueta e o título do cartão ficam na mesma
   linha dos cartões vizinhos. É uma linha só de texto, sem link (com o link "Abrir no YouTube" ela partia em duas no celular e
   tapava um terço da capa; o player já traz "Assistir no YouTube" e, sem JS, a capa inteira é o link). A faixa não recebe
   clique: ele passa para o botão de tocar. Com o player aberto ela some (cobriria os controles) */
.vc-compacto{position:relative}
.vc-compacto .vc-leg{position:absolute;z-index:2;left:0;right:0;bottom:0;margin:0;padding:22px 14px 9px;overflow:hidden;background:linear-gradient(180deg,rgba(42,8,40,0) 0,rgba(42,8,40,.8) 46%,rgba(42,8,40,.92) 100%);font-size:12.5px;line-height:1.4;color:#fff;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}
.vc-compacto.vc-ativo .vc-leg{display:none}
/* cartão de case com vídeo: sobe no hover como os vizinhos (a capa toca o vídeo, o corpo leva ao case), menos com o player
   aberto. O link do título cobre o corpo inteiro */
.setor-case.vc-cartao:has(.vc-ativo):hover{transform:none}
.vc-cartao .setor-case-corpo{position:relative}
.vc-cartao h3 a{color:inherit;text-decoration:none}
.vc-cartao h3 a::before{content:"";position:absolute;inset:0;border-radius:0 0 var(--raio) var(--raio)}
.vc-cartao h3 a:focus-visible{outline:none}
.vc-cartao h3 a:focus-visible::before{outline:3px solid var(--roxo);outline-offset:-5px}
/* o título só muda de cor e a seta só anda com o ponteiro no corpo (a área do link), não na capa do vídeo */
.setor-case.vc-cartao:hover h3{color:var(--roxo-900)}
.setor-case.vc-cartao:hover .setor-case-link::after{transform:none}
.setor-case.vc-cartao .setor-case-corpo:hover h3{color:var(--roxo)}
.setor-case.vc-cartao .setor-case-corpo:hover .setor-case-link::after{transform:translateX(4px)}

/* grade com três cartões, de 621 a 980 (regra do previa-setor.css): o terceiro ocupa a linha inteira, com a imagem ao lado.
   Se ele for o cartão com vídeo, a capa pega a mesma fatia (46%) e a altura do cartão */
@media (min-width:621px) and (max-width:980px){
  .setor-cases > .setor-case.vc-cartao:nth-child(3):last-child > .video-case{flex:0 0 46%}
  .setor-cases > .setor-case.vc-cartao:nth-child(3):last-child .vc-quadro{aspect-ratio:auto;min-height:190px}
  .setor-cases > .setor-case.vc-cartao:nth-child(3):last-child h3 a::before{border-radius:0 var(--raio) var(--raio) 0}
}

/* ---------- movimento e impressão ---------- */
@media (prefers-reduced-motion:reduce){
  .vc-botao,.vc-vertical .vc-play,.vc-youtube .vc-play::after,.vc-link::after{transition:none}
  .vc-play:hover .vc-botao,.vc-vertical .vc-play:hover,.vc-link:hover::after{transform:none}
  .setor-case.vc-cartao .setor-case-corpo:hover .setor-case-link::after{transform:none}
}
@media print{
  .vc-botao{box-shadow:none}
  .vc-player{display:none}
}