/* Videoaula DotCompany — player de aula em capitulos (gerado pela skill /erp-videoaula).
   Cores vem da pagina (--va-pri / --va-pri2 / --va-acc), definidas inline por aula. */
:root{
  --va-bg:#f3f5f4; --va-card:#fff; --va-ink:#0f172a; --va-txt:#334155; --va-mut:#5b6474; --va-borda:#e2e8f0;
  --va-sombra:0 1px 3px rgba(15,23,42,.08),0 10px 30px rgba(15,23,42,.08); --va-r:18px;
  /* texto de link e tempos da transcricao. No escuro vira o verde-claro dos tutoriais (11:1 no cartao);
     o --va-pri2 escuro dava 2,7:1 ali. */
  --va-link:var(--va-pri2);
  /* anel de foco com >= 3:1 contra o cartao nos dois temas (o dourado no claro da 2,2:1 no branco) */
  --va-foco:var(--va-pri);
  /* a pagina NAO baixa a Inter: sem pilha de reserva o navegador cai na fonte padrao (Times) */
  --va-fonte:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --va-fonte-tit:'Poppins',var(--va-fonte);
  /* altura do cabecalho fixo: o videoaula.js mede de verdade; o html desconta ao rolar */
  --va-bar-h:60px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--va-bg:#0b1210;--va-card:#131c19;--va-ink:#f1f5f9;--va-txt:#cbd5e1;--va-mut:#94a3b8;
    --va-borda:#24322c;--va-sombra:0 1px 3px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.35);
    --va-link:#7fe0c4;--va-foco:var(--va-acc)}
}
*{box-sizing:border-box}
/* capitulo, tempo da transcricao e "Pular para o video" rolam ate o player: sem isto ele parava
   EMBAIXO do cabecalho fixo (no celular, 103 dos 200 px do video ficavam cobertos) */
html{scroll-padding-top:calc(var(--va-bar-h) + 10px)}
body.va{margin:0;background:var(--va-bg);color:var(--va-txt);font:17px/1.6 var(--va-fonte);-webkit-text-size-adjust:100%}
.va button{font-family:inherit}
/* especificidade ZERO de proposito: qualquer classe (.va-skip, .va-btn...) vence a cor base do link */
:where(.va) a{color:var(--va-link)}
.va-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.va-skip{position:absolute;left:12px;top:-60px;background:var(--va-pri);color:#fff;font-weight:700;text-decoration:none;
  padding:10px 16px;border-radius:0 0 10px 10px;z-index:50}
.va-skip:focus{top:0}
.va-skip:focus-visible{outline:3px solid var(--va-acc);outline-offset:-3px}

/* cabecalho: uma linha so no celular (era 103 px, com o link quebrado em 3 linhas) */
.va-bar{position:sticky;top:0;z-index:20;background:var(--va-pri);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.va-bar .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:8px 16px}
.va-bar img{flex:none;width:34px;height:34px;border-radius:9px}
.va-bar-tit{flex:1 1 auto;min-width:0}
.va-bar b{display:block;font-weight:700;font-size:16px;line-height:1.2}
.va-bar small{display:block;font-weight:500;opacity:.85;font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-bar a.va-link{flex:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.12)}
.va-bar a.va-link:hover{background:rgba(255,255,255,.22)}
@media (max-width:480px){.va-bar small{display:none}}
/* tela BAIXA (celular deitado): o cabecalho rola com a pagina. Fixo, ele tomava 60 dos 320-412 px de altura
   e o quiz do fim do capitulo nao cabia no que sobrava. Sem ele fixo, a rolagem nao precisa descontar nada. */
@media (max-height:500px){
  .va-bar{position:relative}
  html{scroll-padding-top:10px}
}

.va-hero{max-width:1240px;margin:0 auto;padding:28px 16px 8px}
.va-kick{display:inline-block;background:var(--va-acc);color:#111827;font-weight:800;font-size:12px;letter-spacing:2px;
  padding:6px 12px;border-radius:999px}
.va-hero h1{margin:12px 0 6px;color:var(--va-ink);font:700 clamp(28px,4.2vw,44px)/1.12 var(--va-fonte-tit);letter-spacing:-.5px}
.va-hero p{margin:0;color:var(--va-txt);max-width:820px}
.va-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.va-meta span{background:var(--va-card);border:1px solid var(--va-borda);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}
.va-grid{max-width:1240px;margin:0 auto;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
/* minmax(0,...) e min-width:0: a faixa de passos (que rola de lado) NAO pode alargar a coluna —
   com 1fr puro o celular abria a pagina com ~1.400 px de largura */
@media (max-width:980px){.va-grid{grid-template-columns:minmax(0,1fr)}}
.va-cartao{min-width:0;background:var(--va-card);border:1px solid var(--va-borda);border-radius:var(--va-r);box-shadow:var(--va-sombra)}

/* palco = video + cartao do fim do capitulo. O cartao fica POR CIMA do video so quando cabe inteiro
   na caixa 16:9; senao (celular em pe: caixa de ~200 px, quiz de ~300) o videoaula.js poe .abaixo e
   ele desce para logo embaixo do video, sem cortar o titulo nem vazar sobre o texto da pagina. */
.va-palco{position:relative;background:#000;border-radius:calc(var(--va-r) - 1px) calc(var(--va-r) - 1px) 0 0;overflow:hidden;overflow:clip}
.va-video-box{position:relative;background:#000;aspect-ratio:16/9}
.va-video-box video{width:100%;height:100%;display:block;background:#000}
/* legenda NATIVA: so aparece quando o video sai da pagina (tela cheia do proprio <video>, iPhone, picture-in-picture) */
.va-video-box video::cue{font:600 clamp(15px,2.1vw,26px)/1.3 'Inter',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;background:rgba(0,0,0,.72);color:#fff}
/* LEGENDA FORA DO VIDEO: faixa logo abaixo dele. A nativa (::cue) era desenhada POR CIMA da faixa de baixo do video
   e tapava a pilula "Consegui?" e a barra do total da OS (revisao do ensaio, 28/10/2026). O videoaula.js escreve aqui
   a fala ativa do <track> (modo "hidden"). Preta nos 2 temas, como o video: branco no preto = 21:1. Altura de 2
   linhas sempre reservada — a fala trocar (1 linha, 2 linhas, pausa) nao empurra a pagina; fala que nao cabe em 2
   linhas encolhe a letra (--va-leg-k), nao a faixa. #va-midia (video + faixa) e o que vai para a tela cheia. */
.va-midia{container-type:inline-size}
.va-leg{--va-leg-y:8px;--va-leg-y2:var(--va-leg-y);position:relative;display:flex;align-items:center;justify-content:center;
  /* 2 linhas (2 x 1.35em) + respiro de cima e de baixo + o fio de 1px */
  min-height:calc(2.7em + var(--va-leg-y) + var(--va-leg-y2) + 1px);padding:var(--va-leg-y) 16px var(--va-leg-y2);
  border-top:1px solid rgba(255,255,255,.12);background:#000;color:#fff;text-align:center;
  font:600 16px/1.35 var(--va-fonte);font-size:clamp(15px,2.3cqi,22px)}
.va-leg-txt{margin:0;max-width:100%;white-space:pre-line;text-wrap:balance;overflow-wrap:anywhere;font-size:calc(1em * var(--va-leg-k,1))}
/* legenda desligada; e cartao do fim EMBAIXO do video (a faixa vazia sobraria embaixo dele). Regras SEPARADAS: na
   mesma lista, o navegador sem :has() jogaria fora as duas e "Legendas" desligado deixaria a faixa la */
.va-midia.va-sem-leg .va-leg{display:none}
/* cartao do fim aberto ABAIXO do video: a faixa da legenda some na pagina; na tela cheia ela fica, porque o botao
   de sair da tela cheia mora nela (sem isso, tela cheia + cartao = nenhum botao de sair — cetico, 28/10/2026) */
.va-midia:not(:fullscreen):has(.va-sobre.abaixo) .va-leg{display:none}
/* botao do canto da faixa: "Tela cheia" na tela larga (computador, tablet) e "Sair" dentro da tela cheia. No celular
   em pe ele comeria a largura da fala: la fica o "Tela cheia" da barra de acoes. */
.va-leg-cheia{display:none;place-items:center;position:absolute;top:50%;right:max(10px,env(safe-area-inset-right));
  translate:0 -50%;width:44px;height:44px;border:0;border-radius:12px;background:rgba(255,255,255,.16);color:#fff;cursor:pointer}
.va-leg-cheia:hover{background:rgba(255,255,255,.28)}
.va-leg-cheia:focus-visible{outline:3px solid var(--va-acc);outline-offset:2px}
.va-leg-cheia .va-ico-sair{display:none}
@container (min-width:600px){
  .va-leg{padding-inline:64px}
  .va-leg-cheia{display:grid}
}
.va [hidden]{display:none}
/* Chrome/Edge: o botao nativo de tela cheia so sabe pegar o <video> (a faixa ficaria de fora). O videoaula.js o
   desliga (controlsList) e poe esta classe: desligado, ele ficava na barra cinza e sem funcionar (Chrome 156). */
.va-cheia-propria video::-webkit-media-controls-fullscreen-button{display:none}
/* tela cheia do PLAYER: video encolhe para a faixa caber embaixo (sobra preta dos lados, nada por cima do filme) */
.va-midia:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#000}
/* ...e o lugar dele na pagina fica guardado (o videoaula.js mede a altura): sem isto a pagina encolhia por tras e
   a rolagem nao voltava ao sair */
.va-midia:fullscreen + *{margin-top:var(--va-midia-h,0px)}
.va-midia:fullscreen .va-palco{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;border-radius:0}
.va-midia:fullscreen .va-video-box{flex:0 1 auto;min-height:0}
.va-midia:fullscreen .va-leg{--va-leg-y:10px;--va-leg-y2:max(10px,env(safe-area-inset-bottom));flex:none;
  font-size:clamp(16px,2.4cqi,40px);padding-inline:64px}
.va-midia:fullscreen.va-sem-leg .va-leg{display:flex;min-height:64px}
.va-midia:fullscreen.va-sem-leg .va-leg-txt{display:none}
/* na tela cheia o botao do canto aparece sempre (com ou sem legenda) e vira "sair" */
.va-midia:fullscreen .va-leg-cheia{display:grid}
.va-midia:fullscreen .va-leg-cheia .va-ico-cheia{display:none}
.va-midia:fullscreen .va-leg-cheia .va-ico-sair{display:block}
/* tela cheia ESTREITA (celular em pe que nao girou): o botao desce para baixo do texto — ao lado, ele tomava 128 px
   da largura e a fala encolhia a letra; em pe sobra altura, nao largura */
@container (max-width:599px){
  /* altura de 2 linhas + o botao reservada: a fala de 1 ou de 2 linhas nao mexe o video nem o botao */
  .va-midia:fullscreen .va-leg{flex-direction:column;gap:8px;padding-inline:16px;
    min-height:calc(2.7em + 52px + var(--va-leg-y) + var(--va-leg-y2) + 1px)}
  .va-midia:fullscreen .va-leg-txt{margin-block:auto}
  .va-midia:fullscreen .va-leg-cheia{position:static;translate:none}
}
.va-btn svg{flex:none}
.va-sobre{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;padding:18px;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(4,12,10,.86);color:#fff;text-align:center;--va-foco:var(--va-acc)}
.va-sobre.on{display:flex}
/* margin:auto centra quando sobra espaco e NUNCA empurra o topo para fora (centrar com flex cortava o titulo) */
.va-sobre .caixa{margin:auto;max-width:640px;width:100%}
.va-sobre.abaixo{position:relative;inset:auto;background:#0a1411;text-align:left;padding:16px 16px 18px}
.va-sobre.abaixo .caixa{margin:0;max-width:none}
.va-sobre h3{margin:0 0 6px;padding:0 46px;font:700 clamp(19px,2.4vw,26px)/1.25 var(--va-fonte-tit)}
.va-sobre.abaixo h3{padding:6px 50px 0 0}
.va-sobre p{margin:0 0 12px;color:rgba(255,255,255,.88)}
.va-sobre .va-retorno:empty{margin:0}
.va-fechar{position:absolute;top:8px;right:8px;z-index:1;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;
  background:rgba(255,255,255,.14);color:#fff;font:700 18px/1 var(--va-fonte);cursor:pointer}
.va-fechar:hover{background:rgba(255,255,255,.26)}
.va-fechar:focus-visible{outline:3px solid var(--va-acc);outline-offset:-3px}
.va-ops{display:grid;gap:8px;margin:10px 0 12px}
.va-ops button{font:600 16px/1.35 var(--va-fonte);text-align:left;padding:10px 14px;min-height:44px;border-radius:12px;
  border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.va-ops button:hover,.va-ops button:focus-visible{border-color:var(--va-acc);outline:none}
.va-ops button.certa{background:#15803d;border-color:#22c55e}
.va-ops button.errada{background:#991b1b;border-color:#f87171}
.va-ops button:disabled,.va-ops button[aria-disabled="true"]{cursor:default}
.va-ops button:disabled:not(.certa){opacity:.55}
.va-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}
.va-sobre.abaixo .va-linha{justify-content:flex-start}
.va-sobre .va-btn.sec{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
.va-conta{font-size:14px;color:rgba(255,255,255,.82)}
/* celular DEITADO (pouca altura, muita largura): o quiz embaixo do video vira 2 colunas — pergunta, retorno
   e botoes a esquerda, opcoes a direita. Empilhado ele passava de 350 px numa tela que mostra ~300.
   A ordem de leitura (o DOM) nao muda; a ultima linha (1fr) absorve a sobra da coluna mais alta. */
@media (max-height:500px) and (min-width:560px){
  .va-sobre.abaixo:has(>.va-quiz){padding:12px 16px 14px}
  .va-sobre.abaixo .va-quiz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-items:start;
    grid-template-areas:"tit tit" "perg ops" "ret ops" "acao ops" ". ops";grid-template-rows:auto auto auto auto 1fr}
  /* a linha do titulo tem a altura do X do canto: a coluna das opcoes comeca abaixo dele, sem encostar */
  .va-sobre.abaixo .va-quiz>h3{grid-area:tit;min-height:38px}
  .va-sobre.abaixo .va-quiz>.va-perg{grid-area:perg}
  .va-sobre.abaixo .va-quiz>.va-ops{grid-area:ops;margin:0}
  .va-sobre.abaixo .va-quiz>.va-retorno{grid-area:ret}
  .va-sobre.abaixo .va-quiz>.va-linha{grid-area:acao;gap:6px 10px}
  .va-sobre.abaixo .va-quiz>p{font-size:16px;line-height:1.45;margin-bottom:8px}
  .va-sobre.abaixo .va-quiz>.va-retorno:empty{margin:0}
  .va-sobre.abaixo .va-quiz .va-conta{line-height:1.35}
}

.va-btn{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--va-fonte);padding:11px 16px;border-radius:12px;border:0;
  cursor:pointer;text-decoration:none;background:var(--va-pri);color:#fff;min-height:44px}
.va-btn.sec{background:transparent;color:var(--va-ink);border:1.5px solid var(--va-borda)}
.va-btn.acc{background:var(--va-acc);color:#111827}
.va-btn:focus-visible{outline:3px solid var(--va-foco);outline-offset:2px}
/* "Proximo capitulo" no ultimo capitulo: desligado TEM de parecer desligado */
.va-btn:disabled{opacity:.45;cursor:not-allowed}
/* botao liga/desliga (Legendas): o estado aparece, nao so o aria-pressed */
.va-btn.sec[aria-pressed="true"]{border-color:var(--va-link);background:color-mix(in srgb,var(--va-link) 14%,var(--va-card))}
.va-btn.sec[aria-pressed="false"]{color:var(--va-mut);text-decoration:line-through;text-decoration-thickness:2px}
.va-info{padding:16px 18px 6px}
.va-info .num{color:var(--va-mut);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}
.va-info h2{margin:2px 0 4px;color:var(--va-ink);font:700 clamp(20px,2.6vw,26px)/1.25 var(--va-fonte-tit)}
.va-info p{margin:0;color:var(--va-txt)}
.va-acoes{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px}
.va-vel{display:inline-flex;border:1.5px solid var(--va-borda);border-radius:12px;overflow:hidden}
.va-vel button{border:0;background:transparent;color:var(--va-ink);font:700 14px/1 var(--va-fonte);padding:0 12px;min-height:44px;cursor:pointer}
.va-vel button[aria-pressed="true"]{background:var(--va-pri);color:#fff}
.va-vel button:first-child{border-radius:10.5px 0 0 10.5px}
.va-vel button:last-child{border-radius:0 10.5px 10.5px 0}
/* anel POR DENTRO (o overflow:hidden do grupo cortava o anel padrao: no escuro o 0,8x nao mostrava nada),
   2 px afastado da borda para nao se fundir com o verde do botao vizinho marcado */
.va-vel button:focus-visible{outline:3px solid var(--va-foco);outline-offset:-5px}
.va-vel button[aria-pressed="true"]:focus-visible{outline-color:var(--va-acc)}
.va-passos{display:flex;gap:8px;overflow-x:auto;padding:4px 18px 16px;scrollbar-width:thin}
.va-passos button{flex:none;border:1.5px solid var(--va-borda);background:var(--va-card);color:var(--va-txt);border-radius:999px;
  padding:7px 12px;font:600 13px/1.3 var(--va-fonte);cursor:pointer;white-space:nowrap}
.va-passos button:focus-visible{outline:3px solid var(--va-foco);outline-offset:-3px}
.va-passos button.on{border-color:var(--va-pri2);color:var(--va-ink);background:color-mix(in srgb,var(--va-acc) 18%,var(--va-card))}
.va-passos button small{color:var(--va-mut);margin-left:6px;font-weight:700}
.va-lista{padding:8px}
.va-lista h3{margin:8px 10px 6px;font:700 16px/1.3 var(--va-fonte);color:var(--va-ink)}
.va-cap{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:0;background:transparent;color:inherit;
  padding:10px;border-radius:14px;cursor:pointer;font:inherit}
.va-cap:hover{background:color-mix(in srgb,var(--va-pri2) 8%,transparent)}
.va-cap.on{background:color-mix(in srgb,var(--va-acc) 16%,transparent);box-shadow:inset 0 0 0 1.5px var(--va-acc)}
.va-cap .e{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px;
  background:color-mix(in srgb,var(--va-pri) 12%,var(--va-card))}
.va-cap .t{flex:1;min-width:0}
.va-cap .t b{display:block;color:var(--va-ink);font-size:15px;line-height:1.3}
.va-cap .t small{color:var(--va-mut);font-size:13px}
.va-cap .barra{display:block;height:4px;border-radius:4px;background:var(--va-borda);margin-top:6px;overflow:hidden}
.va-cap .barra i{display:block;height:100%;width:0;background:var(--va-acc)}
.va-cap .ok{flex:none;font-size:18px;opacity:0}
.va-cap.feito .ok{opacity:1}
.va-transc{max-width:1240px;margin:0 auto;padding:0 16px 16px}
.va-transc>h2{margin:6px 4px 12px;font:700 22px/1.3 var(--va-fonte-tit);color:var(--va-ink)}
.va-transc details{margin-bottom:10px}
/* seta que gira ao abrir: sem ela os capitulos pareciam cartoes parados */
.va-transc summary{position:relative;cursor:pointer;padding:14px 50px 14px 18px;font-weight:700;color:var(--va-ink);list-style:none;
  border-radius:var(--va-r)}
.va-transc summary::-webkit-details-marker{display:none}
.va-transc summary::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:2.5px solid var(--va-mut);border-bottom:2.5px solid var(--va-mut);transform:rotate(-45deg);transition:transform .2s}
.va-transc details[open]>summary::after{transform:rotate(45deg)}
.va-transc summary:hover{background:color-mix(in srgb,var(--va-pri2) 6%,transparent)}
.va-transc .linhas{padding:0 18px 14px}
.va-transc .linhas p{margin:0 0 8px}
.va-transc .linhas button{border:0;background:none;color:var(--va-link);font:700 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  cursor:pointer;margin-right:6px;padding:2px 4px;border-radius:6px}
.va-cta{max-width:1240px;margin:8px auto 24px;padding:0 16px}
.va-cta .va-cartao{padding:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.va-cta h2{margin:0;color:var(--va-ink);font:700 22px/1.3 var(--va-fonte-tit)}
.va-cta .botoes{display:flex;flex-wrap:wrap;gap:10px}
.va-rodape{text-align:center;color:var(--va-mut);font-size:13px;padding:20px 16px 40px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}