/* estilo.css
   Todo o visual do site, no caminho "Aurora noturna".
   As cores ficam todas aqui em cima, com o nome de cada uma.

   Regra de contraste que eu sigo aqui: texto escuro no claro, texto claro no escuro.
   O dourado só entra em detalhe, ícone e fundo de selo, nunca como texto sobre branco. */

:root{
  /* claros */
  --texto:#24424b;          /* texto corrido no fundo claro */
  --suave:#4a6a71;          /* legendas no fundo claro */
  --exemplo:#6e8d94;        /* texto de exemplo dentro dos campos */
  --linha:#d5e6e7;
  --linha-fina:#eaf2f3;
  --selecao:#e6f6f6;

  /* marca */
  --petroleo-escuro:#2f5967;
  --petroleo:#2f8087;
  --turquesa:#28afaf;
  --dourado:#b8934a;
  --dourado-claro:#d8b877;
  --dourado-texto:#efdcb0;  /* mais claro: texto pequeno no escuro precisa disso para ser legivel */
  --dourado-escuro:#8a6a2e;  /* dourado para texto sobre o branco: o normal ficaria ilegível */

  /* escuros */
  --noite:#123039;
  --noite-media:#1d4b59;
  --noite-clara:#2d616d;   /* escurecido para o texto branco passar no contraste */
  --texto-noite:#eaf4f5;    /* texto no fundo escuro */
  --suave-noite:#cfe3e6;    /* legendas no fundo escuro */

  --erro:#b3261e;
  --erro-noite:#ffc6bc;    /* clareado para passar no contraste mesmo no ponto mais claro do fundo escuro */

  --ruido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:#fff;
  color:var(--texto);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.55;
}

.coluna{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:#fff;
  position:relative;
  overflow:hidden;
}

/* o texto nunca passa desta largura, em qualquer tela */
.limite{max-width:640px;margin-left:auto;margin-right:auto}

p{margin:0 0 14px}
a{color:var(--petroleo-escuro)}

:focus-visible{outline:2px solid var(--turquesa);outline-offset:3px;border-radius:6px}
/* o título recebe o foco só para o leitor de tela anunciar a tela nova,
   então ele não precisa do contorno */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

/* ---------- entrada das telas ---------- */

@keyframes entra-direita{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes entra-esquerda{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.entra-direita{animation:entra-direita .24s ease-out both}
.entra-esquerda{animation:entra-esquerda .24s ease-out both}

/* blocos que sobem conforme a pessoa rola.
   Por padrão tudo aparece; só some quando o motor confirma que a animação roda. */
.sobe{opacity:1}
.animando .sobe{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.animando .sobe.visto{opacity:1;transform:none}

/* ---------- topo escuro da tela 1 ---------- */

.alto{
  position:relative;
  padding:22px 20px 30px;
  background:radial-gradient(120% 85% at 78% 0%,var(--noite-clara) 0%,var(--noite-media) 48%,var(--noite) 100%);
  overflow:hidden;
  color:var(--texto-noite);
}
.alto::after{content:"";position:absolute;inset:0;background-image:var(--ruido);opacity:.07;pointer-events:none}
.alto > *{position:relative;z-index:2}
.alto .marca,.alto-corpo{max-width:640px;margin-left:auto;margin-right:auto}
.brilho{
  position:absolute;width:240px;height:240px;right:-75px;top:-95px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(216,184,119,.34) 0%,rgba(216,184,119,0) 68%);pointer-events:none;
}

.marca{display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.marca img{height:38px;width:auto;display:block}
.marca-texto{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:15px;color:#fff}

/* O rotulo acima do titulo: a opcao C, que ele escolheu.
   O texto entre dois tracos finos, sem balao. */
.selo{
  display:flex;align-items:center;gap:11px;margin:0 0 15px;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dourado-texto);
}
.selo::before,.selo::after{
  content:"";height:1px;width:26px;flex:0 0 auto;
  background:rgba(216,184,119,.55);
}
/* o espacamento das letras deixa uma sobra depois da ultima letra,
   entao o traco da direita volta um pouquinho para os dois lados ficarem iguais */
.selo::after{margin-left:-.18em}
.selo i{display:none}
/* "Inscreva-se na lista de espera" precisa caber em uma linha só:
   nos celulares estreitos os tracos encurtam e as letras se aproximam um pouco */
@media (max-width:379px){
  .selo{gap:8px;letter-spacing:.14em}
  .selo::before,.selo::after{width:20px}
  .selo::after{margin-left:-.14em}
}
@media (max-width:339px){
  .selo{font-size:11px;letter-spacing:.1em}
  .selo::before,.selo::after{width:14px}
  .selo::after{margin-left:-.1em}
}

/* o título acompanha a largura do celular para caber sempre em 2 linhas
   (medido de 320 a 430 pixels de largura) */
.titulo{
  font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.16;
  font-size:clamp(19px,6.2vw,30px);
  color:#fff;margin:0 0 14px;letter-spacing:-.012em;
  text-wrap:balance;
}
.titulo .realce{color:var(--dourado-claro)}
.subtitulo{color:var(--suave-noite);font-size:15.5px;margin:0 0 22px;line-height:1.55}

.foto{
  height:250px;border-radius:20px;overflow:hidden;
  background:transparent;border:0;
  box-shadow:0 20px 45px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  color:var(--suave-noite);font-size:12.5px;text-align:center;
}
/* o fundo só aparece quando a foto ainda não existe */
.foto.sem-imagem{background:linear-gradient(160deg,var(--petroleo),var(--noite-media));padding:0 12px}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.sem-imagem:not([data-aviso]) img{display:none}
.foto.sem-imagem[data-aviso]::after,.marca.sem-imagem[data-aviso]::after{content:attr(data-aviso);font-size:12px}
.marca.sem-imagem[data-aviso]{color:#fff;opacity:.7}

/* ---------- corpo claro ---------- */

.corpo{padding:28px 20px 0;color:var(--texto);max-width:640px;margin:0 auto}


.bloco-titulo{
  font-family:Fraunces,Georgia,serif;font-weight:600;font-size:22px;
  color:var(--petroleo-escuro);margin:0 0 16px;line-height:1.25;
  text-wrap:balance;
}
/* "pretty" evita que a última linha de um parágrafo fique com uma palavra só */
.corpo p{font-size:15.5px;line-height:1.62;color:var(--texto);text-wrap:pretty}
/* um bloco depois do outro, com respiro entre eles */
.corpo .bloco-titulo{margin-top:30px}
.corpo .bloco-titulo:first-child{margin-top:0}
/* "Entre na lista e receba o acesso antecipado", em dourado */
.bloco-titulo.titulo-dourado{color:var(--dourado-escuro)}

/* "Como funciona o Clube": a linha do tempo (a opção C que ele escolheu).
   Os números em círculos verde-petróleo, ligados por um fio dourado,
   a primeira palavra em negrito e sem linha entre um item e outro.
   O branco no verde-petróleo dá 4,6 de contraste. */
.passos{list-style:none;padding:0;margin:0 0 14px}
.passos li{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:0 0 20px;font-size:15.5px;line-height:1.5;color:var(--texto);
}
.passos li:last-child{padding-bottom:6px}
/* o fio dourado, do círculo de um item até o círculo do próximo */
.passos li:not(:last-child)::before{
  content:"";position:absolute;left:16px;top:38px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(var(--dourado-claro),rgba(216,184,119,.35));
}
.passo-num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--petroleo);color:#fff;font-weight:700;font-size:15px;
  font-variant-numeric:lining-nums tabular-nums;
}
/* desce o texto até a primeira linha ficar na altura do meio do círculo */
.passo-texto{padding-top:5px}

/* a lista com bolinha dourada: as duas datas, sem linha entre elas.
   A bolinha fica no meio da primeira linha em qualquer tamanho de letra. */
.pontos{list-style:none;padding:0;margin:0 0 14px}
.pontos li{
  position:relative;padding:7px 0 7px 22px;font-size:15.5px;line-height:1.5;color:var(--texto);
}
.pontos li::before{
  content:"";position:absolute;left:3px;top:calc(7px + .75em - 4.5px);width:9px;height:9px;border-radius:50%;
  background:var(--dourado);box-shadow:0 0 0 3px rgba(184,147,74,.18);
}

/* a foto da Bíblia aberta, entre o "Como funciona" e o acesso antecipado */
.foto-biblia{margin:10px 0 0;padding:0}
.foto-biblia img{
  display:block;width:100%;height:auto;border-radius:18px;
  box-shadow:0 18px 40px -22px rgba(18,48,57,.55);
  background:var(--linha-fina);  /* enquanto a foto carrega, o espaço não fica em branco */
}

/* a imagem do produto, embaixo da lista */
.produto{margin:2px 0 26px;padding:0}
.produto img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}

.incluso{list-style:none;padding:0;margin:0 0 18px}
/* sem linha entre os itens, só o respiro */
.incluso li{
  display:flex;gap:13px;align-items:center;padding:8px 0;
  font-size:15.5px;line-height:1.4;color:var(--texto);
}
.icone{
  flex:0 0 auto;width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--selecao),#cfeced);color:var(--petroleo);
}
.icone svg{width:20px;height:20px;display:block}

/* ---------- o fim da tela 1: o preço e a pergunta, na faixa escura ---------- */

/* A mesma faixa escura do alto da página. As opções usam o mesmo desenho
   das telas de pergunta: o círculo com o check dourado. */
.decisao{
  position:relative;overflow:hidden;margin-top:8px;color:var(--texto-noite);
  background:radial-gradient(120% 85% at 22% 0%,var(--noite-clara) 0%,var(--noite-media) 48%,var(--noite) 100%);
}
.decisao::after{content:"";position:absolute;inset:0;background-image:var(--ruido);opacity:.07;pointer-events:none}
.decisao-dentro{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:36px 20px 28px}

.preco-titulo{
  font-family:Fraunces,Georgia,serif;font-weight:600;font-size:23px;line-height:1.25;
  color:#fff;margin:0 0 10px;text-align:center;
}
/* os dois valores em negrito e maiores que o texto, com a parcela primeiro */
.preco-texto{font-size:16px;line-height:1.7;color:var(--suave-noite);text-align:center;margin:0 0 32px;text-wrap:balance}
.preco-texto strong{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:23px;color:#fff;white-space:nowrap}

.pergunta-interesse{
  font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(20px,5.4vw,24px);line-height:1.25;
  color:#fff;margin:0 0 16px;text-align:center;text-wrap:balance;
}
.decisao .opcoes{padding:0}
.decisao .botao{margin-top:8px}
/* o Continuar fica bem apagado até uma opção ser marcada */
.decisao .botao:disabled{opacity:.45;box-shadow:none}

/* a linha pequena embaixo dos botões (tela 1 e cadastros) */
.linha-pequena{font-size:13px;line-height:1.5;color:var(--suave-noite);text-align:center;margin:12px 0 0;text-wrap:balance}

.nota-rodape{
  font-size:12.5px;line-height:1.5;color:var(--suave-noite);text-align:center;
  margin:26px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
}

/* ---------- formulário ---------- */

.formulario{padding-bottom:30px;color:var(--texto)}
.grupo{margin-bottom:15px}
label{display:block;font-size:13.5px;font-weight:600;margin:0 0 7px;color:var(--texto)}

.campo{
  width:100%;font-family:inherit;font-size:16px;color:var(--texto);background:#fff;
  border:1.5px solid var(--linha);border-radius:13px;padding:16px 15px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.campo::placeholder{color:var(--exemplo)}
.campo:focus{outline:0;border-color:var(--petroleo);box-shadow:0 0 0 4px rgba(47,128,135,.12)}
.campo[aria-invalid="true"]{border-color:var(--erro)}
.campo-longo{resize:vertical;min-height:130px;line-height:1.5}

.marcar{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;font-weight:400;margin:0 0 18px;cursor:pointer;color:var(--texto);line-height:1.45}
.marcar input{flex:0 0 auto;width:21px;height:21px;margin:1px 0 0;accent-color:var(--petroleo)}
.bandeiras{display:inline-flex;gap:6px;align-items:center;margin-left:2px;flex:0 0 auto}
.bandeiras svg{width:22px;height:15px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(36,66,75,.12)}

.erro{color:var(--erro);font-size:13.5px;margin:7px 0 0;font-weight:500}
.erro-geral{margin-top:14px;text-align:center}

.armadilha,.escondido{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- botões ---------- */

.botao{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  height:60px;border:0;border-radius:15px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:17px;color:var(--noite);
  background:linear-gradient(135deg,#e2c489,var(--dourado));
  box-shadow:0 14px 28px -14px rgba(184,147,74,.9);
  transition:transform .12s ease,filter .2s ease;text-decoration:none;
}
.botao:hover{filter:brightness(1.05)}
.botao:active{transform:scale(.985)}
.botao:disabled{opacity:.7;cursor:default}
.botao svg{width:21px;height:21px}

.botao-claro{color:#fff;background:linear-gradient(135deg,var(--petroleo),var(--noite-media));box-shadow:0 14px 28px -16px rgba(18,48,57,.9)}

.link-pequeno{display:block;text-align:center;font-size:13px;color:var(--suave);margin-top:15px}

/* ---------- telas escuras: pergunta, texto aberto e confirmação ---------- */

.tela-escura{
  min-height:100vh;min-height:100dvh;position:relative;color:var(--texto-noite);
  background:radial-gradient(120% 70% at 78% 0%,var(--noite-clara) 0%,var(--noite-media) 45%,var(--noite) 100%);
  padding-bottom:30px;
}
.tela-escura::after{content:"";position:absolute;inset:0;background-image:var(--ruido);opacity:.07;pointer-events:none}
.tela-escura > *{position:relative;z-index:2}

.topo{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 0;gap:10px;max-width:640px;margin:0 auto}
.topo-centro{justify-content:center}
.vago{width:40px;flex:0 0 auto}
.voltar{
  width:40px;height:40px;flex:0 0 auto;border-radius:13px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.voltar svg{width:18px;height:18px}
.voltar:hover{background:rgba(255,255,255,.16)}
.tela-escura .marca{margin:0}
.tela-escura .marca img{height:30px}

/* A barra de progresso fica colada no alto da tela, da segunda em diante.
   Assim a pessoa ve logo de cara que falta pouco para terminar. */
.fita{height:6px;background:rgba(255,255,255,.14);overflow:hidden}
.fita-preenchida{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--dourado-claro),var(--dourado));
  box-shadow:0 0 14px rgba(216,184,119,.6);
  transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.conta{font-size:12.5px;color:var(--suave-noite);margin:10px 0 0;text-align:center}

/* "Responda 6 perguntas rápidas...", na primeira pergunta depois do cadastro */
.abertura{
  font-size:14.5px;line-height:1.45;font-weight:500;color:var(--dourado-texto);
  margin:20px auto -6px;padding:0 18px;max-width:640px;
}

.pergunta{
  font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.2;
  font-size:clamp(20px,5.4vw,24px);
  color:#fff;margin:20px auto 16px;padding:0 18px;max-width:640px;
  text-wrap:balance;
}
.apoio{font-size:14.5px;color:var(--suave-noite);margin:0 auto 18px;padding:0 18px;max-width:640px;line-height:1.5;text-wrap:pretty}
.apoio-centro{text-align:center}
/* nas telas de pergunta e de cadastro, o título, a linha de apoio e o
   "Responda N perguntas" ficam no meio também no celular e no tablet */
.tela-escura .pergunta,.tela-escura .apoio,.tela-escura .abertura{text-align:center}

.opcoes{padding:0 18px;max-width:640px;margin:0 auto}
.opcao{
  display:flex;align-items:center;gap:12px;width:100%;min-height:54px;
  padding:11px 14px;margin-bottom:8px;font-family:inherit;font-size:15.5px;line-height:1.3;text-align:left;
  color:var(--texto-noite);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:16px;cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .12s ease;
}
.opcao:hover{background:rgba(255,255,255,.12)}
.opcao:active{transform:scale(.99)}
.bola{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);background:transparent;
  display:flex;align-items:center;justify-content:center;
}
.bola svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:opacity .2s ease,transform .25s cubic-bezier(.2,1.6,.4,1);color:var(--noite)}
.opcao.marcada{background:rgba(216,184,119,.18);border-color:var(--dourado-claro)}
.opcao.marcada .bola{background:var(--dourado-claro);border-color:var(--dourado-claro)}
.opcao.marcada .bola svg{opacity:1;transform:scale(1)}

/* texto aberto */
.tela-escura .formulario{padding:0 18px 20px;color:var(--texto-noite);max-width:640px;margin:0 auto}
.tela-escura label{color:var(--texto-noite)}
.tela-escura .campo{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;
}
.tela-escura .campo::placeholder{color:rgba(234,244,245,.55)}
.tela-escura .campo:focus{border-color:var(--dourado-claro);box-shadow:0 0 0 4px rgba(216,184,119,.18)}
.tela-escura .erro{color:var(--erro-noite)}

/* o cadastro, que agora é uma tela escura como as perguntas */
.tela-cadastro .apoio{margin-bottom:22px}
.tela-escura .marcar{color:var(--texto-noite)}
.marcar span{text-wrap:balance}
.tela-escura .marcar input{accent-color:var(--dourado-claro)}
.tela-escura .link-pequeno{color:var(--suave-noite)}
.link-encerrar{
  display:block;margin:6px auto 0;padding:8px 10px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--suave-noite);
  text-decoration:underline;text-underline-offset:3px;
}

/* a idade: a pergunta, o campo e o botão no meio da tela.
   Ficam no alto, e não no meio da altura, para o botão não sumir
   atrás do teclado do celular. */
.tela-numero .pergunta{text-align:center}
.formulario-numero{text-align:center}
.tela-escura .campo-numero{
  display:block;width:100%;max-width:150px;margin:6px auto 0;
  font-size:24px;font-weight:600;text-align:center;letter-spacing:.08em;padding:14px 12px;
}
.formulario-numero .erro{text-align:center}
.formulario-numero .botao{max-width:320px;margin:18px auto 0}
.formulario-numero .botao:disabled{opacity:.45;box-shadow:none}

/* na pergunta aberta, o que está em negrito na linha de apoio fica dourado */
.tela-aberta .apoio strong{color:var(--dourado-texto);font-weight:700}

/* o campo invisível que segura o teclado de números aberto no iPhone */
.campo-ponte{
  position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;
  border:0;padding:0;font-size:16px;pointer-events:none;
}

/* confirmação */
.tela-final{text-align:center}
.tela-final .titulo{font-size:30px;margin:26px auto 18px;padding:0 18px;max-width:640px;text-align:center}
.tela-final .foto{margin:0 auto 22px;height:230px;width:calc(100% - 36px);max-width:604px}
.tela-final p{color:var(--suave-noite);font-size:16.5px;line-height:1.6;margin:0 auto 14px;padding:0 18px;max-width:640px;text-align:left}
.tela-final strong{color:#fff}
.tela-final .area-botao{padding:10px 18px 0;max-width:640px;margin:0 auto}
.tela-final .area-botao .apoio{margin-left:0;margin-right:0}
/* quando o botão fica no meio do texto, o parágrafo de baixo ganha respiro */
.tela-final .area-botao + p{margin-top:26px}
.tela-final .selo{margin-top:14px}
.tela-saida .titulo{margin-top:44px}

/* ---------- barra do modo de teste (só no seu computador) ---------- */

.barra-teste{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--noite);color:#fff;border-top:1px solid rgba(216,184,119,.3);
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;font-size:13px;
}
.barra-teste button{
  font-family:inherit;font-size:12.5px;font-weight:600;
  background:var(--dourado-claro);color:var(--noite);
  border:0;border-radius:8px;padding:6px 10px;cursor:pointer;
}
.painel-teste{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;
  width:min(440px,92vw);max-height:80vh;overflow:auto;
  background:#fff;color:var(--texto);border:1px solid var(--linha);border-radius:16px;
  padding:18px;font-size:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.painel-teste ul{list-style:none;padding:0;margin:0 0 14px}
body.com-barra-teste{padding-bottom:96px}
.painel-teste li{padding:6px 0;border-bottom:1px solid var(--linha-fina);word-break:break-word}

/* ---------- faixa da versão de demonstração (só na pasta /teste/) ---------- */

.faixa-demo{
  position:sticky;top:0;z-index:25;
  background:linear-gradient(90deg,#8a5e14,#a9762a);color:#fff;
  display:flex;align-items:center;justify-content:center;gap:4px 14px;flex-wrap:wrap;
  padding:9px 14px;font-size:13px;text-align:center;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.faixa-demo b{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.faixa-demo span{color:#ffe6b8}
.faixa-demo a{color:#ffe6b8;font-weight:600}

/* no celular a faixa fica em uma linha só, para o site aparecer igual ao de verdade */
@media (max-width:560px){
  .faixa-demo{padding:7px 12px;font-size:12.5px}
  .faixa-demo span{display:none}
}
.painel-teste button{
  font-family:inherit;font-weight:600;background:var(--petroleo);color:#fff;
  border:0;border-radius:9px;padding:10px 15px;cursor:pointer;
}

/* ---------- página de privacidade ---------- */

.texto-legal{background:#fff;padding:26px 20px 40px;color:var(--texto)}
.texto-legal h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:27px;color:var(--petroleo-escuro);margin:0 0 6px}
.texto-legal h2{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:18px;color:var(--petroleo-escuro);margin:28px 0 8px}
.texto-legal .apoio{color:var(--suave);margin:0 0 18px;font-size:14.5px}
.texto-legal ul{padding-left:20px;margin:0 0 14px}
.texto-legal li{margin-bottom:7px}
.voltar-link{display:inline-block;margin-top:26px;font-size:14px;color:var(--petroleo)}

/* ---------- no computador ---------- */

@media (min-width:900px){
  .alto{padding:34px 40px 54px}
  .alto .marca{max-width:1080px}
  .alto .marca img{height:48px}
  .alto-corpo{display:flex;align-items:center;gap:48px;max-width:1080px}
  .alto-texto{flex:1 1 52%}
  .alto-foto{flex:1 1 48%}
  .alto-foto .foto{height:360px}
  /* no computador o título também fica em 2 linhas (medido de 900 a 1440 pixels) */
  .titulo{font-size:clamp(27px,3vw,40px);line-height:1.1}
  .subtitulo{font-size:17.5px;margin-bottom:0}

  .corpo{padding:52px 20px 0}
  .corpo p{font-size:17px}
  .bloco-titulo{font-size:26px}
  .incluso li{font-size:17px;padding:9px 0}
  .pontos li,.passos li{font-size:17px}
  .decisao-dentro{padding:56px 20px 40px}
  .preco-titulo{font-size:30px}
  .preco-texto{font-size:18px}
  .preco-texto strong{font-size:27px}
  .pergunta-interesse{font-size:30px}
  .abertura{text-align:center;margin-top:30px}

  .pergunta{font-size:34px;text-align:center;margin-top:36px}
  .apoio-centro,.apoio{text-align:center}
  .opcao{font-size:17px;min-height:68px}
  .tela-final .titulo{font-size:38px}
  .tela-final .foto{height:320px}
  .tela-final p{text-align:center}
}

/* ---------- botao da comunidade no WhatsApp ---------- */

/* O verde do WhatsApp puro nao deixa o texto branco legivel (contraste 2 para 1).
   Entao o fundo usa o verde escuro da marca, que passa com folga, e o verde vivo
   aparece no brilho em volta, que e o que chama a atencao. */
.botao-zap{
  background:linear-gradient(135deg,#0b7f57,#075e54);
  color:#fff;
  box-shadow:0 14px 30px rgba(37,211,102,.30);
  animation:zap-pulso 2.4s ease-out infinite;
}
.botao-zap:hover{filter:brightness(1.1)}

.zap-icone{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);
  animation:zap-aceno 2.4s ease-in-out infinite;
}
.zap-icone svg{width:19px;height:19px;display:block}

@keyframes zap-pulso{
  0%{box-shadow:0 14px 30px rgba(37,211,102,.30),0 0 0 0 rgba(37,211,102,.55)}
  70%{box-shadow:0 14px 30px rgba(37,211,102,.30),0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 14px 30px rgba(37,211,102,.30),0 0 0 0 rgba(37,211,102,0)}
}
@keyframes zap-aceno{
  0%,84%,100%{transform:rotate(0) scale(1)}
  88%{transform:rotate(-14deg) scale(1.1)}
  92%{transform:rotate(12deg) scale(1.1)}
  96%{transform:rotate(-6deg) scale(1.04)}
}

/* ---------- no celular o alto da tela 1 fica centralizado ---------- */

/* O "text-wrap:balance" e o que divide o titulo em linhas de tamanho parecido,
   para nao sobrar uma linha com duas ou tres palavras soltas. No computador
   o alto continua em duas colunas, com o texto a esquerda. */
@media (max-width:899px){
  .alto-texto{text-align:center}
  .selo{justify-content:center}
  .titulo{text-wrap:balance}

  /* Mais espaco dos lados para o texto (16 em vez de 20). */
  .alto{padding-left:16px;padding-right:16px}

  /* O subtitulo nao usa o "balance": com ele as linhas saiam uma comprida,
     outra curta, e as pontas ficavam "serrilhadas". Aqui cada linha vai ate
     onde cabe, numa largura medida a dedo (de 360 a 430 pixels) para as linhas
     sairem quase do mesmo tamanho: 4 linhas nos celulares a partir de 384. */
  .subtitulo{text-wrap:wrap;max-width:380px;margin-left:auto;margin-right:auto}
}
/* celular mais estreito: 5 linhas, as tres primeiras do mesmo tamanho */
@media (max-width:383px){
  .subtitulo{max-width:318px}
}

/* ---------- quem pediu menos movimento ---------- */

@media (prefers-reduced-motion:reduce){
  .entra-direita,.entra-esquerda{animation:none}
  .animando .sobe{opacity:1;transform:none;transition:none}
  .fita-preenchida{transition:none}
  .botao,.opcao{transition:none}
  .botao-zap,.zap-icone{animation:none}
}