/* Vídeo de boas-vindas obrigatório (07/11/2026) — ver boas-vindas-video.js.
   1) a janela que não fecha; 2) o bloco "Atenção" no topo dos Tutoriais.
   Cores: os tokens do painel (--surface, --line, --ink*, --azul*, --azul-fraco). */

/* ---------- 1) a janela ---------- */
.bvv-fundo {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; padding: 16px; overflow: auto;
  background: rgba(8, 16, 13, .8);
  animation: bvv-aparece 180ms ease-out both;
}
.bvv-caixa {
  box-sizing: border-box;
  width: min(1080px, 100%, max(560px, calc((100dvh - 250px) * 1.7778 + 48px)));
  padding: 22px 24px 20px;
  background: var(--surface, #fff); color: var(--ink, #1c1e21);
  border: 1px solid var(--line, #e9eaeb); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
  font-family: inherit;
  animation: bvv-entra 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.bvv-pill {
  display: inline-block; align-self: flex-start; padding: 3px 12px; border-radius: 999px;
  background: var(--azul-fraco, #e7f3ea); color: var(--azul-alto, #006b4e);
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.bvv-caixa h2 {
  margin: 10px 0 6px; text-transform: none;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800;
  color: var(--ink, #1c1e21);
}
.bvv-caixa > p { margin: 0 0 14px; color: var(--ink-3, rgba(28, 43, 51, .62)); font-size: 16px; line-height: 1.5; }
.bvv-tela { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.bvv-tela video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; -webkit-user-select: none; user-select: none; }
.bvv-tela video::-webkit-media-controls { display: none !important; }
.bvv-assistir {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border: 0; border-radius: 999px;
  background: var(--azul, #0a5a43); color: #fff;
  font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}
.bvv-assistir:hover { background: var(--azul-alto, #006b4e); }
.bvv-assistir:active { transform: translate(-50%, -50%) scale(.97); }
.bvv-assistir[hidden], .bvv-erro[hidden], .bvv-barra[hidden], .bvv-fim[hidden], .bvv-pausa[hidden] { display: none !important; }
.bvv-erro {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  padding: 24px; text-align: center; background: rgba(0, 0, 0, .74); color: #fff;
}
.bvv-erro p { margin: 0; font-size: 17px; font-weight: 700; max-width: 420px; line-height: 1.45; }
.bvv-barra { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.bvv-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 1px solid var(--line, #e9eaeb); border-radius: 10px;
  background: var(--surface, #fff); color: var(--ink, #1c1e21);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}
.bvv-btn:active { transform: scale(.97); }
.bvv-pausa-parado { background: var(--azul, #0a5a43); border-color: var(--azul, #0a5a43); color: #fff; }
.bvv-progresso { flex: 1; height: 6px; border-radius: 999px; background: var(--line, #e9eaeb); overflow: hidden; }
.bvv-progresso i { display: block; height: 100%; background: var(--azul, #0a5a43); transform-origin: left center; transform: scaleX(0); transition: transform 250ms linear; }
.bvv-tempo { min-width: 104px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-3, rgba(28, 43, 51, .62)); font-weight: 700; font-size: 14px; }
.bvv-fim { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.bvv-ok {
  height: 52px; padding: 0 30px; border: 0; border-radius: 12px;
  background: var(--azul, #0a5a43); color: #fff;
  font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
  animation: bvv-entra 200ms cubic-bezier(0.23, 1, 0.32, 1) both;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}
.bvv-ok:hover { background: var(--azul-alto, #006b4e); }
.bvv-ok:active { transform: scale(.97); }
.bvv-ok:disabled { opacity: .6; cursor: default; }
.bvv-msg { color: var(--ink-3, rgba(28, 43, 51, .62)); font-size: 14px; order: -1; }
.bvv-fundo :focus-visible { outline: 3px solid var(--azul-alto, #006b4e); outline-offset: 3px; }
@keyframes bvv-aparece { from { opacity: 0; } }
@keyframes bvv-entra { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (max-width: 640px) {
  .bvv-fundo { padding: 0; place-items: stretch; }
  .bvv-caixa { width: 100%; min-height: 100dvh; border-radius: 0; border: 0; padding: 20px 16px; display: flex; flex-direction: column; justify-content: center; }
  .bvv-assistir { padding: 10px 18px; gap: 8px; font-size: 15px; }
  .bvv-assistir svg { width: 18px; height: 18px; }
  .bvv-tempo { min-width: 0; }
  .bvv-ok { width: 100%; }
  .bvv-msg { order: 0; width: 100%; text-align: center; }
}

/* ---------- 2) o bloco no topo dos Tutoriais (dentro do #tcurso, mesma força das regras de lá) ---------- */
#tutoriais #tcurso#tcurso#tcurso .bvv-bloco {
  box-sizing: border-box; margin: 0 auto 26px; padding: 22px 24px 24px;
  background: #0f2a20; color: #f1f6f3;
  border: 1px solid rgba(46, 229, 157, .35); border-radius: 16px;
}
#tutoriais #tcurso#tcurso#tcurso .bvv-bloco-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#tutoriais #tcurso#tcurso#tcurso .bvv-selo {
  padding: 3px 12px; border-radius: 999px; background: #2ee59d; color: #06251a;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
#tutoriais #tcurso#tcurso#tcurso .bvv-bloco-kick { color: #9fd9bf; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
#tutoriais #tcurso#tcurso#tcurso .bvv-bloco h2 { margin: 0 0 6px; color: #fff; text-transform: none; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
#tutoriais #tcurso#tcurso#tcurso .bvv-bloco p { margin: 0 0 16px; color: #b9d3c7; font-size: 15.5px; line-height: 1.5; }
#tutoriais #tcurso#tcurso#tcurso .bvv-bloco-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
#tutoriais #tcurso#tcurso#tcurso .bvv-bloco-video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
@media (max-width: 980px) {
  #tutoriais #tcurso#tcurso#tcurso .bvv-bloco { order: 2; margin: 0 16px 22px; padding: 18px 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bvv-fundo, .bvv-caixa, .bvv-ok { animation: none; }
  .bvv-assistir, .bvv-btn, .bvv-ok, .bvv-progresso i { transition: none; }
}