/* As páginas públicas do Be Visible Sites que não são a landing: entrar, criar
   conta, a escolha de plano, o obrigado da assinatura, os documentos (termos e
   privacidade) e a página de erro.

   Este arquivo NÃO é um segundo sistema de design. Ele entra DEPOIS do
   landing.css e só acrescenta o que a landing não tinha: o pátio dividido da
   entrada, os campos de formulário, a escolha de plano e a caixa de texto
   longo dos documentos. Tokens, botões, foco, tipografia e rodapé são os
   mesmos — e é daí que vem a sensação de "mesma casa" que faltava quando a
   tela de login usava o CSS do painel, com outra fonte, outra cor de acento e
   outro fundo.

   A regra de contraste da casa continua valendo: --ouro-claro (#FFD697) é LUZ,
   só vive sobre a noite; sobre o papel quem carrega texto é --ouro-forte, e o
   ouro puro fica para grafismo (filete, ✓, marcador de lista).

   A única animação desta folha é a celebração do obrigado, lá no fim — a venda
   acabou, ninguém está sendo atrasado. No resto, nada anima: estas páginas não
   carregam o landing.js, e os pré-estados do landing.css só existem sob
   html[data-luz] — sem o atributo, nenhum deles pega. Um formulário que
   aparece devagar é um formulário que atrasa quem só quer entrar. */

:root {
  /* O vermelho de erro não existia na landing — ela não tem formulário. Os
     três tons são os do painel, a mesma família, para o produto inteiro errar
     na mesma cor. */
  --erro: #A8321F;
  --erro-suave: #FBEDEA;
  --erro-linha: #EDD3CD;
}

/* ============================================================== a entrada */

/* Duas metades: a noite com a marca, o papel com o formulário. É a mesma
   virada da landing (a marca acende no escuro e assina no claro), reduzida a
   uma tela só.

   No celular não há duas colunas: a noite vira uma faixa curta no topo — só
   logo e promessa — e o formulário fica logo abaixo, perto do polegar. As
   provas (✓ 14 dias grátis…) saem nessa largura de propósito: empurrariam o
   campo de e-mail para fora da primeira tela, e quem abre /entrar já decidiu.

   No desktop a noite NÃO rola junto. O cadastro e a escolha de plano são mais
   altos que a tela, e enquanto a coluna escura era uma célula comum do grid ela
   subia junto com o formulário: quem chegava no último campo já não via nem a
   marca nem as provas — o cartaz sumia exatamente na hora de decidir. Agora ela
   é sticky com a altura da tela e fica parada enquanto o papel rola ao lado. */

.entrada {
  min-height: 100vh;
  min-height: 100dvh;   /* no celular a barra do navegador come os 100vh */
  display: grid;
  grid-template-rows: auto 1fr;
}

.entrada-marca {
  position: relative;
  overflow: hidden;
  background: var(--noite);
  color: var(--claro);
  padding: var(--e6) var(--margem) var(--e7);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}
/* O mesmo halo da capa, na mesma posição relativa — luz de fundo, nunca
   clicável. */
.entrada-marca::after {
  content: '';
  position: absolute;
  top: -180px; right: -140px;
  width: 520px; height: 520px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 151, .16) 0%, rgba(255, 214, 151, .04) 45%, transparent 70%);
}
.entrada-marca > * { position: relative; }   /* acima do halo */

.entrada-logo { height: 34px; width: auto; }

.entrada-tese {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(24px, 6.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 16ch;
}
.entrada-tese em { font-style: italic; color: var(--ouro-claro); }
.entrada-olho {
  margin-top: var(--e4);
  max-width: 34ch;
  font-size: 15.5px;
  color: var(--claro-2);
}

.entrada-provas {
  display: none;
  list-style: none;
  margin: var(--e6) 0 0;
  padding: 0;
  flex-direction: column;
  gap: var(--e3);
  font-size: 15px;
  color: var(--claro-2);
}
/* O ✓ nasce do CSS: é grafismo, e como item de lista ele só atrapalharia quem
   ouve a página. */
.entrada-provas li::before {
  content: '✓';
  margin-right: var(--e3);
  font-weight: 800;
  color: var(--ouro-claro);
}

.entrada-voltar {
  font-size: 14px;
  font-weight: 600;
  color: var(--claro-3);
  text-decoration: none;
}
.entrada-voltar:hover { color: var(--claro); }

/* ------------------------------------------------------------- o papel */

.entrada-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--e6);
  padding: var(--e8) var(--margem) var(--e7);
}
/* As duas margens automáticas (aqui e no .entrada-pe) dividem a sobra em duas:
   o formulário fica no meio da coluna e a linha dos documentos encosta no pé.
   Sem a daqui, o `margin-top: auto` do pé sozinho empurraria o formulário para
   o topo da tela. */
.entrada-caixa { width: 100%; max-width: 400px; margin-top: auto; }
.entrada-caixa h1 { font-size: clamp(26px, 5.6vw, 32px); line-height: 1.15; }
.entrada-caixa .sub {
  margin-top: var(--e3);
  font-size: 15.5px;
  color: var(--tinta-2);
}
/* A escolha de plano pede mais largura que o login, e a coluna acompanha. */
.entrada-caixa-larga { max-width: 460px; }

.entrada-troca {
  margin-top: var(--e6);
  text-align: center;
  font-size: 15px;
  color: var(--tinta-2);
}

/* A linha dos documentos fecha a tela em voz baixa. Ela existe em toda página
   pública — é o que a Stripe pede para ligar o portal, e é onde a pessoa
   procura quando quer saber o que assinou. */
.entrada-pe {
  margin-top: auto;
  padding-top: var(--e6);
  text-align: center;
  font-size: 13px;
  color: var(--tinta-3);
}
.entrada-pe a { color: var(--tinta-3); text-decoration: none; }
.entrada-pe a:hover { color: var(--ouro-forte); text-decoration: underline; }

/* ============================================================ formulário */

.campos { margin-top: var(--e6); display: flex; flex-direction: column; gap: var(--e5); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13.5px; font-weight: 700; color: var(--tinta-media); }

.campo input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--e4);
  border: 1px solid var(--linha-3);
  border-radius: var(--r-m);
  background: var(--branco);
  color: var(--tinta);
  font-family: var(--f-corpo);
  /* 16px não é estética: abaixo disso o Safari do iPhone dá zoom ao focar o
     campo, e a tela inteira pula. */
  font-size: 16px;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.campo input::placeholder { color: var(--tinta-3); }
.campo input:focus {
  outline: none;
  border-color: var(--ouro-forte);
  box-shadow: 0 0 0 3px rgba(143, 95, 20, .16);
}
.campo .dica { font-size: 13px; line-height: 1.45; color: var(--tinta-3); }

.btn-bloco { width: 100%; }

.erros {
  margin: var(--e5) 0 0;
  padding: var(--e4) var(--e5);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  border: 1px solid var(--erro-linha);
  border-radius: var(--r-m);
  background: var(--erro-suave);
  color: var(--erro);
  font-size: 14.5px;
  line-height: 1.5;
}

/* O flash de aviso (a volta de um redirect): a mesma caixa do erro, sem o tom
   de alarme — borda da casa e filete de ouro. */
.aviso-caixa {
  margin: var(--e5) 0 0;
  padding: var(--e4) var(--e5);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ouro);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--branco);
  color: var(--tinta-2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* O aceite embaixo do botão, não em cima: ninguém deve tropeçar nele para
   chegar ao formulário, mas ele precisa estar na mesma tela do envio. */
.aceite {
  margin-top: var(--e4);
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta-3);
}

/* ------------------------------------------------------- escolha de plano */

/* Os dois planos, lado a lado como rádios. Quem está escolhido se destaca
   sozinho: é o `:has(input:checked)` fazendo o que o rádio já sabia — nenhum
   JS para uma marcação que o navegador entrega de graça. Gêmeo do bloco de
   mesmo nome em social/assets/publico.css. */
.escolha-plano { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e3); }
.escolha-plano legend {
  padding: 0;
  margin-bottom: var(--e2);
  font-size: 13.5px; font-weight: 700; color: var(--tinta-media);
}
.opcao-plano {
  display: flex; gap: var(--e3); align-items: flex-start; cursor: pointer;
  padding: var(--e4);
  border: 1px solid var(--linha-3); border-radius: var(--r-m);
  background: var(--branco);
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva);
}
.opcao-plano:hover { border-color: var(--ouro); }
.opcao-plano:has(input:checked) {
  border-color: var(--ouro-forte);
  box-shadow: 0 0 0 3px rgba(143, 95, 20, .12);
}
.opcao-plano input { margin-top: 4px; accent-color: var(--ouro-forte); }
.opcao-corpo { display: grid; gap: 3px; }
.opcao-topo { display: flex; align-items: center; gap: var(--e2); font-size: 14.5px; }
.opcao-topo b { font-weight: 700; }
.opcao-topo em {
  font-style: normal;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ouro-forte); background: rgba(185, 126, 36, .12);
  border-radius: var(--r-redondo); padding: 3px 9px;
}
.opcao-preco {
  font-family: var(--f-titulo);
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
}
.opcao-preco i { font-style: normal; font-size: 13px; color: var(--tinta-3); margin-left: 2px; }
.opcao-nota { font-size: 13px; line-height: 1.5; color: var(--tinta-3); }

/* ------------------------------------------------------------ a situação */

/* O cartão de estado da tela de plano: teste correndo, assinatura ativa,
   cartão recusado. Filete de ouro à esquerda — o mesmo "olhe aqui" da caixa de
   destaque dos documentos — e, quando o assunto é grave, filete e rótulo
   viram o vermelho de erro. */
.situacao {
  margin-top: var(--e6);
  padding: var(--e5) var(--e6);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ouro);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--branco);
}
.situacao-rotulo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-forte);
}
.situacao-dado {
  display: block;
  margin-top: var(--e2);
  font-family: var(--f-titulo);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.situacao p { margin-top: var(--e2); font-size: 14px; line-height: 1.55; color: var(--tinta-2); }
.situacao-alerta { border-left-color: var(--erro); }
.situacao-alerta .situacao-rotulo { color: var(--erro); }

/* Os contatos que chegaram enquanto o painel esteve fechado: um fato, não um
   argumento — por isso a linha fala baixo, com a faísca da casa na frente. */
.situacao-leads { margin-top: var(--e3); font-size: 14px; color: var(--tinta-2); }
.situacao-leads i { font-style: normal; color: var(--ouro); margin-right: var(--e2); }

/* -------------------------------------------------------- resumo do pedido */

/* A frase que diz o que o botão vai fazer, no valor exato — e que troca junto
   com o rádio do plano, só com CSS: o mesmo `:has` da escolha. Sem `:has`
   (navegador antigo) fica valendo a variante do anual, e o valor exato
   reaparece na página da Stripe antes de qualquer cobrança. */
.form-assinar .so-mensal { display: none; }
.form-assinar:has(input[name="plano"][value="mensal"]:checked) .so-anual { display: none; }
.form-assinar:has(input[name="plano"][value="mensal"]:checked) .so-mensal { display: inline; }

.resumo-pedido {
  padding: var(--e4) var(--e5);
  border-radius: var(--r-m);
  background: var(--linha-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-2);
}
.resumo-pedido b { color: var(--tinta); font-weight: 700; }

/* ------------------------------------------------------- fila de confiança */

/* As três garantias, numa linha e em voz baixa: quem está com o cartão na mão
   não precisa de um parágrafo, precisa de três fatos. */
.confianca {
  margin: var(--e5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  font-size: 13px;
  color: var(--tinta-3);
}
.confianca i { font-style: normal; font-weight: 800; color: var(--ouro); margin-right: var(--e1); }

/* ============================================================ o documento */

/* Termos e Privacidade. Texto longo, e é só isso que a página faz: coluna
   estreita (66ch é onde o olho para de se perder na volta da linha), títulos
   ancorados e um sumário no começo para quem veio procurar uma cláusula. */

.doc-capa { padding: var(--e7) 0 var(--e8); }
.doc-capa .chapeu { color: var(--ouro-claro); }
.doc-titulo { margin-top: var(--e4); font-size: clamp(30px, 7.4vw, 44px); line-height: 1.1; }
.doc-data { margin-top: var(--e5); font-size: 14px; color: var(--claro-3); }

.documento { max-width: 760px; padding-bottom: var(--e9); }

/* O sumário mora dentro do .documento, e por isso os seletores abaixo carregam
   as duas classes: sem isso, as regras de corpo de texto (`.documento ol`,
   `.documento li`) empatam em especificidade, vencem por vir depois no arquivo
   e achatam o índice numa coluna só de parágrafos. */
.sumario {
  margin-top: var(--e7);
  padding: var(--e6);
  border: 1px solid var(--linha);
  border-radius: var(--r-g);
  background: var(--branco);
}
.sumario b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ouro-forte);
}
.documento .sumario ol {
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
  display: grid;
  gap: var(--e2) var(--e6);
}
.documento .sumario li { font-size: 14.5px; line-height: 1.5; }
.documento .sumario li::before {
  counter-increment: item;
  content: counter(item) '.';
  margin-right: var(--e2);
  color: var(--ouro);
  font-weight: 700;
}
.sumario a { color: var(--tinta-media); text-decoration: none; }
.sumario a:hover { color: var(--ouro-forte); text-decoration: underline; }

.documento h2 {
  margin-top: var(--e9);
  font-size: clamp(21px, 4.8vw, 26px);
  line-height: 1.2;
  /* O alvo da âncora não pode nascer colado no topo da janela. */
  scroll-margin-top: var(--e6);
}
.documento h2 .numero { color: var(--ouro); }
.documento h3 {
  margin-top: var(--e6);
  font-family: var(--f-corpo);
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0;
}

.documento p, .documento li { font-size: 16px; line-height: 1.7; color: var(--tinta-media); }
.documento h2 + p, .documento h3 + p { margin-top: var(--e4); }
.documento p + p { margin-top: var(--e4); }
.documento strong { font-weight: 700; color: var(--tinta); }
.documento em { font-style: italic; }
.documento code {
  padding: 2px 6px;
  border-radius: var(--r-p);
  background: var(--linha-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
}

.documento ul, .documento ol {
  margin: var(--e4) 0 0;
  padding-left: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e3);
}
.documento li::marker { color: var(--ouro); }
.documento li b { color: var(--tinta); }

/* A caixa do que importa: prazo, valor, direito de arrependimento. Filete de
   ouro à esquerda, o mesmo grafismo que o resto da casa usa para dizer
   "olhe aqui" sem gritar. */
.documento .destaque {
  margin-top: var(--e5);
  padding: var(--e5) var(--e6);
  border-left: 3px solid var(--ouro);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  background: var(--branco);
}
.documento .destaque p { font-size: 15.5px; }

/* Tabela de dados/finalidade/base legal — a parte da LGPD que só fica clara
   em colunas. No celular ela rola dentro de si mesma, e a página não. */
.tabela-rolo { margin-top: var(--e5); overflow-x: auto; }
.documento table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.documento th, .documento td {
  padding: var(--e3) var(--e4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha);
  line-height: 1.5;
}
.documento th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  background: var(--branco);
  white-space: nowrap;
}
.documento td { color: var(--tinta-2); }
.documento td:first-child { color: var(--tinta); font-weight: 600; }

.doc-contato {
  margin-top: var(--e9);
  padding: var(--e7);
  border-radius: var(--r-gg);
  background: var(--noite);
  color: var(--claro);
}
.doc-contato h2 { margin-top: 0; color: var(--claro); }
.doc-contato p { color: var(--claro-2); }
.doc-contato a { color: var(--ouro-claro); }
.doc-contato a:hover { color: var(--ouro-toque); }

/* ==================================================== erro e confirmação */

/* Uma tela só, centrada, sem coluna escura: nem a página de erro nem a de
   "assinatura confirmada" são lugar de vender — uma diz o que houve e devolve
   a pessoa ao caminho, a outra abre a porta do painel. */
.tela-simples {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e6);
  padding: var(--e8) var(--margem);
  text-align: center;
}
.tela-simples .marca-simples { height: 32px; width: auto; }
/* Aqui a linha dos documentos não precisa ser empurrada para o pé: a tela
   inteira já está centrada, e o `margin-top: auto` que ela carrega na entrada
   quebraria essa centralização. */
.tela-simples .entrada-pe { margin-top: 0; padding-top: var(--e3); }
.tela-simples h1 { font-size: clamp(26px, 6vw, 34px); }
.tela-simples p { max-width: 46ch; font-size: 16.5px; color: var(--tinta-2); }

/* ============================================================== respostas */

@media (min-width: 600px) {
  .entrada-logo { height: 38px; }
}

@media (min-width: 900px) {
  /* Aqui a tela se divide. A noite fica um pouco mais estreita que o papel:
     ela é o cartaz, o formulário é o trabalho. */
  .entrada {
    grid-template-rows: none;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  }
  .entrada-marca {
    justify-content: space-between;
    gap: var(--e8);
    padding: var(--e8) var(--e7);
    /* `align-self: start` é o que faz o sticky funcionar: sem ele o grid
       estica a célula até a altura da linha inteira, e um elemento do tamanho
       do seu próprio contêiner não tem para onde grudar. */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
  }
  .entrada-provas { display: flex; }
  .entrada-tese { font-size: clamp(30px, 3.2vw, 38px); }
  .entrada-corpo { padding: var(--e9) var(--e8) var(--e7); }

  .documento .sumario ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1240px) {
  .entrada-marca { padding: var(--e9) var(--e8); }
  .entrada-corpo { padding: var(--e9) var(--e9) var(--e8); }
}

/* Larga mas baixa — notebook pequeno, ou a janela ocupando meia tela. A coluna
   escura tem a altura de UMA tela e não rola, então o que não couber tem de
   sair por decisão, e não vazar. As provas são o que menos falta: a marca e a
   promessa ficam.

   Vem depois do bloco de 1240px de propósito: senão o padding largo de lá
   voltaria numa tela de 1300×700, que é exatamente o caso que este bloco
   existe para resolver. */
@media (min-width: 900px) and (max-height: 720px) {
  .entrada-marca { padding: var(--e7); gap: var(--e6); }
  .entrada-provas { display: none; }
  .entrada-olho { margin-top: var(--e3); }
}

/* ============================================================ a celebração */

/* A única animação desta folha, e de propósito: ela mora na página de
   obrigado, onde a venda já acabou e ninguém está sendo atrasado.

   O contrato data-luz é o mesmo do landing.css — o estado padrão de tudo é o
   FINAL, e o movimento só existe sob html[data-luz]. Como estas páginas não
   carregam o landing.js, quem põe o atributo é um inline mínimo na própria
   view, e daí a diferença: são só keyframes de entrada disparados no load,
   sem IntersectionObserver e sem seguro de 2s — nada aqui depende de um JS
   que vem depois. Sem JS, a página nasce completa, com o selo aceso. */

.celebra {
  position: relative;
  width: 96px;
  height: 96px;
}
.celebra-selo { display: block; width: 96px; height: 96px; color: var(--ouro); }
.celebra-halo {
  position: absolute;
  inset: -90px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(185, 126, 36, .20) 0%, rgba(185, 126, 36, .05) 45%, transparent 70%);
}
/* O anel e as faíscas são grafismo efêmero: o estado FINAL deles é apagado.
   Sem a luz eles simplesmente não aparecem — e nenhum conteúdo se esconde. */
.celebra-anel {
  position: absolute;
  inset: -14px;
  border: 2px solid var(--ouro);
  border-radius: 50%;
  opacity: 0;
}
.celebra-faisca {
  position: absolute;
  font-style: normal;
  font-size: 15px;
  color: var(--ouro);
  opacity: 0;
}
.celebra-faisca.f1 { top: -18px; left: 4px; }
.celebra-faisca.f2 { top: 6px; right: -22px; font-size: 11px; }
.celebra-faisca.f3 { bottom: -12px; left: -18px; font-size: 12px; }
.celebra-faisca.f4 { bottom: -22px; right: 2px; font-size: 9px; }

html[data-luz] .celebra-selo { animation: celebra-nascer .7s var(--curva-pulo) .15s backwards; }
html[data-luz] .celebra-halo { animation: celebra-acender 1.3s var(--curva) both; }
html[data-luz] .celebra-anel { animation: celebra-ondular 1s var(--curva) .4s forwards; }
html[data-luz] .celebra-faisca { animation: celebra-faiscar .9s var(--curva) forwards; }
html[data-luz] .celebra-faisca.f1 { animation-delay: .45s; }
html[data-luz] .celebra-faisca.f2 { animation-delay: .55s; }
html[data-luz] .celebra-faisca.f3 { animation-delay: .65s; }
html[data-luz] .celebra-faisca.f4 { animation-delay: .75s; }
/* O texto sobe junto, em degraus curtos — a mesma coreografia por delay das
   landings, sem nenhum JS a mais. */
html[data-luz] .comemora h1,
html[data-luz] .comemora p,
html[data-luz] .comemora .btn { animation: celebra-subir .55s var(--curva) backwards; }
html[data-luz] .comemora h1 { animation-delay: .35s; }
html[data-luz] .comemora p { animation-delay: .5s; }
html[data-luz] .comemora .btn { animation-delay: .65s; }

/* Keyframes de entrada com só o `from`: o destino é o estilo-base, então o
   selo pousa exatamente onde viveria sem animação nenhuma. */
@keyframes celebra-nascer { from { opacity: 0; transform: scale(.35) rotate(-30deg); } }
@keyframes celebra-acender { from { opacity: 0; } }
@keyframes celebra-subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes celebra-ondular {
  from { opacity: .7; transform: scale(.55); }
  to { opacity: 0; transform: scale(1.9); }
}
@keyframes celebra-faiscar {
  0% { opacity: 0; transform: translateY(6px) scale(.6); }
  35% { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 0; transform: translateY(-8px) scale(.8); }
}

/* O seguro do contrato, repetido no fim desta folha porque agora ela também
   anima: com prefers-reduced-motion, nada se move. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}