/* Legendas Virais — extras sobre o template (course.css/titulos.css).
   Só o que a página do plugin precisa a mais: passos, animações e download. */

/* Logo do plugin (ícone quadrado) na barra e no rodapé. */
.lv-marca{height:38px;width:38px;border-radius:9px}
.course-footer .lv-marca{height:44px;width:44px}

/* Blocos centrais com a mesma largura das mídias do template. */
.lv-passos,.lv-nota,.lv-aviso,.lv-baixar{max-width:920px;margin-left:auto;margin-right:auto}

/* Cartões de passo (Como usar / Instalar). */
.lv-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.lv-passos:has(.lv-passo:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.lv-passo{background:#1d1d22;border:1px solid #2c2c31;border-radius:16px;padding:22px 20px}
.lv-passo h3{font:700 17px/1.25 var(--titulo,"Archivo",sans-serif);margin:0 0 12px;color:#f7f7f5}
.lv-passo ol{margin:0;padding-left:20px;color:#c9c9ce;font-size:14.5px;line-height:1.55}
.lv-passo ol li{margin-bottom:9px}
.lv-passo ol li:last-child{margin-bottom:0}
.lv-passo b{color:#f7f7f5}
.mono-chip{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:.85em;background:#26262c;
  border:1px solid #34343b;border-radius:6px;padding:1px 7px;white-space:nowrap;color:#e8e8ea}
@media(max-width:820px){.lv-passos{grid-template-columns:1fr}}

/* Boxes de nota (azul) e aviso (âmbar), padrão das outras páginas. */
.lv-nota{background:#12161a;border:1px solid #22303a;border-radius:12px;padding:14px 16px;
  color:#8fa3b0;font-size:14px;margin-top:16px}
.lv-nota b{color:#cfe0ea}
.lv-aviso{background:#1a1712;border:1px solid #3a2f1c;border-radius:12px;padding:14px 16px;
  color:#c9a065;font-size:14px;margin-bottom:18px}
.lv-aviso b{color:#f0cf9a}

/* Download: 2 grupos (macOS / Windows) × 2 edições (Studio / Gratuita) =
   4 cartões com seta laranja (mesmo estilo dos botões de versão). */
.lv-baixar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:6px}
.lv-grupo{display:grid;gap:10px;align-content:start;min-width:0}
.lv-grupo-t{padding:0 4px 4px}
.lv-grupo-t b{display:block;font:700 18px/1.2 var(--titulo,"Archivo",sans-serif);color:#f7f7f5}
.lv-grupo-t span{display:block;color:#8a8a90;font-size:13px;margin-top:3px}
.lv-dl{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;background:#1d1d22;
  border:1px solid #2c2c31;border-radius:14px;padding:16px 18px;color:#e8e8ea;transition:border-color .18s,transform .12s}
.lv-dl:hover{border-color:#f28c28;transform:translateY(-2px)}
.lv-dl-txt{min-width:0}
.lv-dl-txt b{font-size:16px;color:#f7f7f5;display:block}
.lv-dl-txt span{color:#8a8a90;font-size:13px;display:block;margin-top:2px}
.lv-ed{flex:0 0 auto;font-family:"Space Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;border-radius:7px;border:1px solid #f28c28;color:#f5a45e}
.lv-ed.free{border-color:#3b6a80;color:#9fc9de}
.lv-seta{margin-left:auto;color:#f28c28;font-weight:700;font-style:normal;white-space:nowrap}
.lv-dl[data-empty="1"]{opacity:.6;pointer-events:none}
.lv-dl[data-empty="1"] .lv-seta{color:#77777d}
@media(max-width:820px){.lv-baixar{grid-template-columns:1fr}}
@media(max-width:480px){.lv-dl{flex-wrap:wrap;gap:10px 12px}.lv-dl-txt{flex:1 1 100%;order:3}}

/* Slot de vídeo DENTRO da moldura .vsl-frame do template (mesmo chrome das
   outras páginas). Sem mp4 ainda: o slot mostra a prévia em movimento
   (karaokê/escadinha) ou o aviso "gravando". Com URL vira <video> de verdade. */
.lv-vph{position:relative;width:100%;aspect-ratio:16/9;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 0,#17171d 0,#0b0b0f 72%);overflow:hidden;text-align:center}
.lv-vph .lv-kw,.lv-vph .lv-esc{margin:0}
.lv-vph-tag{position:absolute;bottom:12px;left:14px;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#f5a45e;display:flex;align-items:center;gap:7px}
.lv-vph-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#e88029;
  box-shadow:0 0 0 4px #e8802933;animation:lv-rec 1.4s ease-in-out infinite}
@keyframes lv-rec{50%{opacity:.35}}
.lv-vph-play{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:#e88029;
  color:#0a0a0b;font-size:24px;box-shadow:0 0 0 10px #ffffff14,0 0 50px #e8802955}
.lv-vph-espera{margin-top:13px;color:#9a9aa0;font-size:13px;font-family:"Space Mono",monospace;letter-spacing:.02em}
/* Na seção escura a borda #0a0a0b some no fundo — reforça contorno e sombra. */
.secao-escura .vsl-frame{border-color:#2c2c31;box-shadow:8px 8px 0 #e8802955}

/* Animações em código que preenchem o slot (karaokê + escadinha). */
.lv-kw{font:800 clamp(22px,5.2vw,48px)/1 "Archivo Black","Archivo",Impact,sans-serif;color:#fff;
  text-transform:uppercase;letter-spacing:.01em;display:flex;gap:.26em;flex-wrap:wrap;justify-content:center;padding:0 6%}
.lv-kw span{padding:.05em .14em;border-radius:6px}
.lv-kw span.on{background:#f28c28;color:#141005}
.lv-esc{display:flex;flex-direction:column;align-items:center;gap:.02em;text-transform:uppercase;
  line-height:.98;text-align:center;padding:0 6%;font-family:"Archivo Black","Archivo",Impact,sans-serif}
.lv-esc .l{opacity:0;transform:translateY(15px);transition:opacity .45s ease,transform .45s ease}
.lv-esc .l.show{opacity:1;transform:none}
.lv-esc .apoio{color:#fff;font-size:clamp(14px,3vw,24px)}
.lv-esc .heroi{color:#f28c28;font-size:clamp(28px,6.6vw,56px)}
@media(prefers-reduced-motion:reduce){.lv-esc .l{opacity:1;transform:none;transition:none}.lv-vph-tag::before{animation:none}}