/*
Theme Name: BLINDAO VIDEO EDITOR
Description: Tema proprio do BLINDAO VIDEO EDITOR. Sem plugin de terceiros —
  layout e campos editaveis escritos no proprio tema, conforme a regra do projeto.
Version: 1.3
Author: MKT com Marcos
*/

/* =========================================================================
   NOVIDADES — cartões por versão
   Escrito no tema de propósito: as classes `prose` do site antigo vinham de um
   plugin de tipografia que NÃO foi copiado, entao as listas perdiam o marcador
   e todas as versoes viravam um bloco unico de texto corrido.
   ========================================================================= */

.bve-novidades {
  /* O cabecalho e fixo com 80px. Sem esta folga o titulo passa POR BAIXO dele
     — foi exatamente o que aconteceu na primeira versao desta pagina. */
  padding-top: 9rem;
  padding-bottom: 7rem;
}

.bve-wrap {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---- topo ---- */
.bve-hero { text-align: center; margin-bottom: 4.5rem; }

.bve-eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #22d3ee;
  margin-bottom: .75rem;
}

.bve-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 1rem;
  color: #f4f4f5;
}

.bve-hero-sub {
  color: #a1a1aa;
  max-width: 42rem;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

.bve-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .95rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  transition: transform .2s ease, box-shadow .2s ease;
}
.bve-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(34,211,238,.25); }

.bve-contagem { margin-top: 1rem; font-size: .85rem; color: #71717a; }

/* ---- lista de versoes ---- */
.bve-lista { display: flex; flex-direction: column; gap: 1.5rem; }

.bve-versao {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  background: rgba(255,255,255,.025);
  padding: 1.75rem 1.75rem 1.5rem;
  transition: border-color .2s ease, background .2s ease;
}
.bve-versao:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.04); }

/* a versao atual se destaca sem gritar */
.bve-versao-atual {
  border-color: rgba(34,211,238,.35);
  background: linear-gradient(180deg, rgba(34,211,238,.06), rgba(255,255,255,.02));
}

.bve-versao-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.bve-versao-topo h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  color: #f4f4f5;
  letter-spacing: -.01em;
}

.bve-selo {
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: rgba(34,211,238,.15);
  color: #22d3ee;
  white-space: nowrap;
}

.bve-versao-topo time { font-size: .85rem; color: #71717a; margin-left: auto; }

/* ---- conteudo: a lista de novidades ---- */
.bve-versao-corpo ul { list-style: none; margin: 0; padding: 0; }

.bve-versao-corpo li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .9rem;
  color: #d4d4d8;
  line-height: 1.7;
}
.bve-versao-corpo li:last-child { margin-bottom: 0; }

/* marcador proprio: as listas ficaram SEM marcador nenhum quando dependiam do
   `prose`. Aqui o ponto e desenhado, nao herdado. */
.bve-versao-corpo li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .72em;
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: #22d3ee;
  opacity: .8;
}

.bve-versao-corpo p { color: #d4d4d8; line-height: 1.7; margin: 0 0 .9rem; }
.bve-versao-corpo strong { color: #f4f4f5; font-weight: 600; }

.bve-vazio { text-align: center; color: #a1a1aa; padding: 3rem 0; }

@media (max-width: 640px) {
  .bve-novidades { padding-top: 7.5rem; }
  .bve-versao { padding: 1.35rem 1.15rem; }
  .bve-versao-topo time { margin-left: 0; width: 100%; }
}

/* =========================================================================
   GARANTIA DE VISIBILIDADE
   O CSS herdado esconde tudo que tem .reveal (opacity:0) e so mostra com
   .visible. O script que adicionava .visible era externo do Astro e nao veio na
   copia. Mesmo depois de eu reescrever o script, a opacidade continuava 0 —
   alguma regra do bundle herdado vence. Nao vale a pena cacar qual: CONTEUDO
   INVISIVEL E O PIOR DEFEITO POSSIVEL numa pagina de venda, entao aqui o estado
   final e garantido, e a animacao continua acontecendo na entrada.
   ========================================================================= */
.reveal.visible { opacity: 1 !important; transform: none !important; }

/* Rede de seguranca final: se o JavaScript nao rodar (erro, bloqueador, versao
   antiga), o conteudo APARECE mesmo assim. Animacao e enfeite; texto e produto. */
@media (scripting: none) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Garantia para a segunda familia de animacao herdada. O seletor original inclui
   o atributo [data-astro-cid-uaeyxsaa], que tem especificidade maior que uma
   classe simples — por isso a regra abaixo repete o atributo. Era esta a caixa
   vazia de 958x84px na secao "Vai rodar no seu PC?". */
.linha-requisito.entrou,
.linha-requisito[data-astro-cid-uaeyxsaa].entrou {
  opacity: 1 !important;
  transform: none !important;
}
@media (scripting: none) {
  .linha-requisito,
  .linha-requisito[data-astro-cid-uaeyxsaa] { opacity: 1 !important; transform: none !important; }
}

/* =========================================================================
   REQUISITOS — "Vai rodar no seu PC?"
   Escrita do zero. Nenhuma animacao esconde conteudo aqui: sem opacity:0 de
   partida, sem dependencia de script. O texto aparece com ou sem JavaScript.
   ========================================================================= */

.bve-requisitos { padding: 5.5rem 0; background: #0a0a0f; }

.bve-req-wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }

.bve-req-topo { margin-bottom: 2.5rem; }

.bve-req-topo h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #f4f4f5;
  margin: 0 0 .6rem;
  letter-spacing: -.02em;
}

.bve-req-topo p { color: #a1a1aa; margin: 0; font-size: 1.05rem; }

.bve-req-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  overflow: hidden;
  background: #12121a;
}

.bve-req {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.35rem 1.5rem;
  border-left: 3px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

.bve-req + .bve-req { border-top: 1px solid rgba(255,255,255,.07); }

.bve-req:hover {
  background-color: rgba(6,182,212,.06);
  border-left-color: rgba(6,182,212,.85);
}

.bve-req-rotulo {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #71717a;
}

.bve-req-valor { color: #e4e4e7; line-height: 1.6; }

.bve-req-marcas {
  display: inline-flex;
  gap: .5rem;
  margin-left: .6rem;
  font-size: .72rem;
  letter-spacing: .1em;
  color: #22d3ee;
  white-space: nowrap;
}
.bve-req-marcas i { font-style: normal; opacity: .45; }

.bve-req-nota { margin: 1.25rem 0 0; font-size: .9rem; color: #71717a; }

@media (min-width: 640px) {
  .bve-req { flex-direction: row; align-items: center; gap: 2rem; padding: 1.5rem 1.75rem; }
  .bve-req-rotulo { flex: 0 0 11rem; }
}