/* ===== Modal de Vídeo (uma vez por sessão) ===== */
.vmodal{position:fixed;inset:0;display:none;z-index:9999}
.vmodal.is-open{display:block}
.vmodal__backdrop{position:absolute;inset:0;background:rgba(2,8,20,.72);backdrop-filter:saturate(130%) blur(4px)}
.vmodal__dialog{
  position:relative;max-width:min(900px,92vw);margin:6vh auto 0;
  background:#0b0f14;border:1px solid #1e2632;border-radius:16px;box-shadow:0 10px 50px rgba(0,0,0,.5);
  padding:12px 12px 16px;color:#e7edf3
}
.vmodal__title{font:600 16px/1.3 system-ui,Segoe UI,Roboto,Arial;margin:0 0 8px;color:#cfe2f2}
.vmodal__close{
  position:absolute;top:8px;right:8px;border:0;background:#122032;color:#e7edf3;
  width:36px;height:36px;border-radius:10px;cursor:pointer
}
.vmodal__close:hover{background:#1a2b44}
.vmodal__player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vmodal__player iframe,
.vmodal__player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal__poster{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,0,0,.35),rgba(0,0,0,.6));
  color:#fff;font:600 18px/1.2 system-ui,Segoe UI,Roboto,Arial;cursor:pointer
}
@media (max-width:768px){
  .vmodal__dialog{margin:2vh auto 0;border-radius:12px;padding:10px}
  .vmodal__title{font-size:14px}
  .vmodal__close{width:32px;height:32px}
}

/* grid básica se você quiser usar junto na página (não interfere no modal) */
.ig-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ig-item{position:relative}


/* Janela flutuante do último vídeo do YouTube */
<video data-audio-target autoplay loop playsinline src="/assets/videos/loading.mp4"></video>

.yt-float-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.45);
  backdrop-filter: blur(2px);
  z-index: 9998;
  display: none;
}

.yt-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(90vw, 420px);
  background: #0f1216;
  color: #e8eef6;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  border-radius: 18px;
  overflow: hidden;
  z-index: 9999;
  display: none;
}

.yt-float__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.yt-float__logo {
  width: 26px; height: 26px; flex: 0 0 26px;
  background: #ff0000; border-radius: 6px;
  position: relative;
}
.yt-float__logo::after {
  content: '';
  position: absolute; inset: 6px 8px 6px 11px;
  border-style: solid;
  border-width: 7px 0 7px 10px;
  border-color: transparent transparent transparent #fff;
}

.yt-float__title {
  font-size: 14px; line-height: 1.3; font-weight: 600;
  color: #fff; margin: 0; flex: 1;
}

.yt-float__close {
  appearance: none; border: 0; background: transparent;
  color: #aeb6c2; font-size: 20px; cursor: pointer;
}

.yt-float__thumb {
  position: relative; aspect-ratio: 16 / 9; background: #0b0d10;
}
.yt-float__thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.yt-float__play {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.yt-float__play button {
  appearance: none; border: 0; cursor: pointer;
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.yt-float__play button:hover { transform: scale(1.05); }
.yt-float__play button::before {
  content: ''; display: block; margin: 0 auto;
  width: 0; height: 0; border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(3px);
}

.yt-float__body {
  padding: 12px 14px; display: grid; gap: 8px;
}
.yt-float__video-title {
  font-size: 15px; font-weight: 600; color: #fff; margin: 0;
}
.yt-float__meta {
  font-size: 12px; color: #aeb6c2;
}
.yt-float__actions {
  display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;
}
.yt-btn {
  appearance: none; border: 1px solid rgba(255,255,255,.12);
  background: #12161c; color: #e8eef6;
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.yt-btn--primary { background: #e11d48; border-color: #e11d48; color: #fff; }
.yt-btn:hover { filter: brightness(1.05); }

/* Backdrop visível quando pop-up está centrado */
.yt-float--center + .yt-float-backdrop { display: block; }

/* Responsivo: em telas pequenas, centraliza */
@media (max-width: 640px) {
  .yt-float {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 480px);
  }
}