/* ============================================================
   /demonstracao — a página da gravação
   ============================================================
   Carregada só nesta página (o gerador aceita `css` por página).

   A página é clara de ponta a ponta porque o conteúdo dela é uma
   GRAVAÇÃO DE TELA: fundo escuro e foto de banco de imagens disputariam
   atenção com a única coisa que interessa olhar. Em branco, a primeira
   cor da página é o vídeo.
   ============================================================ */

/* ---------- o herói claro ---------- */
/* O corpo nasce branco: o molde das páginas de serviço pinta o fundo pela
   cor do herói, e sem isto a faixa atrás da barra fixa ficaria escura
   enquanto o herói é claro. A barra em si se vira sozinha — o landing.js
   mede a seção que está atrás dela. */
.sv-modelo-claro{ background:#fff; }

.sv-claro{
  background:#fff; color:var(--lp-tinta);
  padding:clamp(120px, 14vw, 168px) 0 clamp(28px, 4vw, 44px);
}
.sv-claro-cx{ width:min(100% - 40px, var(--sv-larg)); margin-inline:auto; }

/* A pílula do alto. O ponto é um pseudo-elemento para não entrar no texto
   lido por leitor de tela — ele é enfeite, e "bolinha preta Novo" não
   ajuda ninguém. */
.sv-selo{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 14px 5px 6px; border-radius:40px; margin-bottom:26px;
  border:1px solid var(--lp-borda); background:#fff;
  font-size:.82rem; color:var(--lp-tinta-2);
}
.sv-selo b{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--lp-tinta); color:#fff; font-weight:600;
  border-radius:40px; padding:4px 11px; font-size:.76rem;
}
.sv-selo b::before{
  content:""; width:5px; height:5px; border-radius:50%; background:#8BE38B;
}

.sv-claro h1{
  font-size:clamp(2.1rem, 5.4vw, 3.5rem);
  line-height:1.06; letter-spacing:-.035em; max-width:17ch;
}

/* O resumo à esquerda e os botões à direita, na mesma linha. No celular a
   linha vira coluna e os botões ganham a largura toda — polegar não acerta
   pílula de 140px no canto. */
.sv-claro-pe{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; margin-top:30px;
}
/* 36ch, e não o 44 do resto do site: aqui o parágrafo divide a linha com
   os botões. Com 44 a soma dos dois passava de 1000px e a linha quebrava
   em duas — que é exatamente o desenho que esta página existe para não
   ter. */
.sv-claro-pe .sv-resumo{
  margin:0; max-width:36ch; color:var(--lp-tinta-2);
  font-size:.98rem; line-height:1.6;
}
.sv-claro-pe .lp-acoes{ margin:0; flex:none; }
.sv-claro .lp-btn-g{ padding:13px 24px; font-size:.94rem; }

@media (max-width:720px){
  .sv-claro-pe{ flex-direction:column; align-items:stretch; }
  .sv-claro-pe .lp-acoes{ display:grid; gap:10px; }
  .sv-claro .lp-btn-g{ justify-content:center; }
}

/* ---------- a moldura do vídeo ---------- */
/* Mesma caixa de todo bloco da página, centralizada: a conta é copiada do
   servico.css, com os 40px que garantem o respiro lateral no celular. */
.dv-palco{
  width:min(100% - 40px, var(--sv-larg)); margin-inline:auto;
  position:relative; padding:clamp(10px, 1.6vw, 18px);
  border-radius:20px; overflow:hidden;
  /* O degradê iridescente por baixo da borda branca. Quatro manchas de cor
     e um fundo frio: é o que dá a sensação de luz em volta da tela sem
     usar foto nenhuma — e sem pesar um byte. */
  background:
    radial-gradient(58% 76% at 8% 18%, #BFD4FF 0%, transparent 62%),
    radial-gradient(54% 66% at 88% 12%, #FFC6E6 0%, transparent 62%),
    radial-gradient(60% 72% at 74% 92%, #CDB9FF 0%, transparent 62%),
    radial-gradient(52% 62% at 22% 96%, #A9E6FF 0%, transparent 62%),
    linear-gradient(122deg, #EDF2FF, #FDECF6);
  box-shadow:0 30px 70px -34px rgba(16, 24, 64, .35);
}
/* A borda branca entre o degradê e o vídeo. É ela que faz a tela parecer
   apoiada na luz em vez de recortada nela. */
.dv-moldura{
  background:#fff; border-radius:12px; padding:clamp(8px, 1.1vw, 14px);
  box-shadow:0 2px 10px rgba(16,24,64,.08);
}

/* `display:block` e a proporção declarada: sem os dois o navegador reserva
   a altura padrão de 150px até o metadado do vídeo chegar, e a página
   inteira pula quando ele chega — no meio da leitura de quem está rolando. */
.dv-video, .dv-parado{
  display:block; width:100%; aspect-ratio:1280/800;
  border-radius:6px; background:#F4F7FB;
}
.dv-parado{ object-fit:cover; }

.dv-legenda, .dv-aviso{
  width:min(100% - 40px, 52ch); margin:16px auto 0; text-align:center;
  font-size:.86rem; line-height:1.5; color:var(--lp-tinta-2);
}
.dv-aviso a, .dv-legenda a{ color:var(--lp-roxo); text-decoration:underline; }

/* ---------- os endereços que já estão no ar ---------- */
/* O lugar onde a página de referência põe o muro de logotipos. Aqui são os
   domínios de verdade, lidos do banco pelo pages/demonstracao.js — por
   isso a faixa nasce escondida e só aparece quando a resposta chega. */
.dv-noar{
  width:min(100% - 40px, var(--sv-larg)); margin:clamp(40px, 6vw, 64px) auto 0;
  text-align:center;
}
.dv-noar-tit{
  margin:0 0 20px; font-size:.9rem; color:var(--lp-tinta-2);
}
.dv-noar-tit b{ color:var(--lp-tinta); font-weight:600; }
.dv-noar-fita{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 30px;
}
.dv-noar-fita span{
  font-size:.92rem; font-weight:600; letter-spacing:-.01em;
  color:#9AA3B8;
}

@media (max-width:640px){
  .dv-palco{ border-radius:14px; }
  .dv-noar-fita{ gap:8px 18px; }
  .dv-noar-fita span{ font-size:.82rem; }
}