/* Trecho de vídeo do YouTube dentro de uma tela (aulas V26 e clássicas).
   Uso: <div class="vid" data-yt="ID" data-ini="seg" data-fim="seg" data-busca="termos">  (sem data-yt, o botão abre a busca no YouTube)
          <button class="vid-play" type="button">Assistir · 1 min 20 s</button>
          <p class="vid-fonte">Obra, ano · YouTube</p>
          <p class="vid-semnet">Sem internet: a cena contada em duas linhas.</p>
        </div>  — inclua video.css e video.js. */
.vid{display:flex;flex-direction:column;align-items:flex-start;gap:.7em;margin-top:clamp(12px,2.4vh,28px);max-width:62ch}
.vid-play{font:inherit;font-size:clamp(1rem,1.9vw,1.5rem);display:inline-flex;align-items:center;gap:.6em;padding:.7em 1.3em .7em 1em;border-radius:999px;border:1.5px solid currentColor;background:rgba(255,255,255,.04);color:inherit;cursor:pointer;transition:background .2s,transform .2s}
.vid-play::before{content:"";width:0;height:0;border-left:.75em solid currentColor;border-top:.45em solid transparent;border-bottom:.45em solid transparent}
.vid-play:hover,.vid-play:focus-visible{background:rgba(255,255,255,.1);transform:translateY(-2px);outline:none}
.vid-fonte{font-size:clamp(.8rem,1.1vw,.95rem);opacity:.62;letter-spacing:.02em}
.vid-semnet{font-size:clamp(.8rem,1.1vw,.95rem);opacity:.5;font-style:italic}
.vid-camada{position:fixed;inset:0;z-index:9999;background:rgba(4,4,6,.94);display:flex;align-items:center;justify-content:center;padding:clamp(8px,3vw,40px)}
.vid-quadro{position:relative;width:min(100%,calc((100vh - 90px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.6)}
.vid-quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-fechar{position:fixed;top:clamp(8px,2vh,22px);right:clamp(8px,2vw,26px);font:600 15px/1 -apple-system,Helvetica,Arial,sans-serif;letter-spacing:.06em;color:#F3F0E9;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:12px 18px;cursor:pointer;z-index:10000}
.vid-fechar:hover{background:rgba(255,255,255,.18)}

.vid-links{position:fixed;left:50%;transform:translateX(-50%);bottom:clamp(6px,1.6vh,18px);font:14px/1.4 -apple-system,Helvetica,Arial,sans-serif;color:rgba(243,240,233,.6);z-index:10000}
.vid-links a{color:rgba(243,240,233,.85)}
.vid-quadro{max-height:calc(100vh - 100px)}
@media print{.vid-play{display:none}}