/*
  Hyperion, pagina de vendas.

  Mesma paleta e mesmas duas familias do painel, de proposito: a pessoa
  rola a pagina e depois entra no produto, e as duas coisas precisam ser
  o mesmo objeto. Se a landing usasse outra cor e outra fonte, a captura
  de tela leria como print de outro sistema.

  Escrito mobile primeiro. Toda media query e min-width, entao o celular
  recebe a folha mais curta e nao paga por regra de desktop.
*/

/* =============================================================== base */

:root {
  /* Tinta e fundo saem de painel.css, nao foram escolhidos de novo. */
  --tinta: #1f1912;
  --tinta-2: #574d42;
  --tinta-3: #8a7f72;
  --fundo: #f7f4ef;
  --creme: #ece7de;
  --branco: #ffffff;
  --linha: #e3dacb;
  --linha-fraca: #efe8dc;

  --roxo: #7000ff;
  --roxo-fundo: #f3ebff;
  --verde: #2f7a4f;
  --verde-fundo: #e8f1ea;

  --display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --corpo: "Lato", ui-sans-serif, system-ui, sans-serif;

  --largura: 1180px;
  --margem: 22px;
  --topo: 58px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/* Coluna estreita para texto corrido. Linha longa cansa e faz o olho
   pular de linha ao voltar. */
.estreito {
  max-width: 34em;
}

/* ============================================================= topo */

.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--topo);
  display: flex;
  align-items: center;
  background: rgba(247, 244, 239, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.topo.rolou {
  border-bottom-color: var(--linha);
}

.topo .env {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topo img {
  height: 30px;
  width: auto;
}

/* ============================================================ botao */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--roxo);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.16s ease, box-shadow 0.22s ease, background 0.2s ease;
  box-shadow: 0 1px 2px rgba(38, 0, 90, 0.16), 0 8px 22px -10px rgba(112, 0, 255, 0.55);
}
.botao:hover {
  background: #6100e0;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(38, 0, 90, 0.18), 0 14px 30px -12px rgba(112, 0, 255, 0.6);
}
.botao:active {
  transform: translateY(0);
}

/* Sem tamanho explicito o SVG assume a largura do bloco e empurra o
   texto do botao para tres linhas. */
.botao svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botao.pequeno {
  padding: 10px 16px;
  font-size: 13.5px;
}

/* O mesmo botao com dois comprimentos: no celular nao cabe a frase
   inteira ao lado do logo. */
.botao .longo { display: none; }
@media (min-width: 620px) {
  .botao .curto { display: none; }
  .botao .longo { display: inline; }
}

.botao.grande {
  padding: 17px 30px;
  font-size: 16.5px;
  width: 100%;
}
@media (min-width: 620px) {
  .botao.grande { width: auto; }
}

/* =========================================================== rotulo */

/* Antetitulo em caixa alta. O mesmo do painel, para a pagina e o
   produto terem o mesmo vocabulario visual. */
.rotulo {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--roxo);
}

/* ============================================================= hero */

.hero {
  padding-top: calc(var(--topo) + 34px);
  padding-bottom: 10px;
}

/* Primeiro bloco centralizado: rotulo, titulo, sub e a grade da semana
   no mesmo eixo. Sem botao aqui, ele vive na barra presa embaixo. */
.hero-grade { text-align: center; }

.hero h1 {
  margin-inline: auto;
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 700;
  /*
    Titulo longo pede corpo menor e coluna mais larga. No tamanho de uma
    frase de seis palavras, esta ocuparia sete linhas e deixaria de ser
    titulo.
  */
  font-size: clamp(1.8rem, 5.4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.hero h1 em {
  font-style: normal;
  color: var(--roxo);
}

.hero .sub {
  margin: 18px auto 0;
  font-size: 1.06rem;
  color: var(--tinta-2);
  max-width: 40em;
  /* Distribui as linhas para nenhuma palavra sozinha fechar o bloco. Era
     o "vende." caindo sozinho na ultima linha. */
  text-wrap: balance;
}

.hero-acao {
  margin-top: 30px;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.hero-acao .micro {
  font-size: 13.5px;
  color: var(--tinta-3);
  max-width: 32em;
}
.hero-acao .botao-forte { flex: none; width: auto; }

/* A garantia em uma linha, embaixo do botao. E o unico lugar da dobra
   que fala de risco, e ela existe para o clique custar menos. */
.selo-garantia {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(47, 122, 79, 0.32);
  background: var(--verde-fundo);
  color: var(--verde-texto, #1d5c39);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.selo-garantia svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--verde);
}

/* ============================================================= mapa */

/*
  O mapa do sistema, como fluxo vertical.

  A primeira tentativa foi um mapa mental com fios em leque, desenhados
  em SVG. Lia bem no desktop e desmontava no celular: quatro linhas
  curvas cruzando uma coluna estreita viram rabisco. Na vertical o mesmo
  conteudo tem uma leitura so, do topo para baixo, nas duas larguras.

  O movimento nao e enfeite: o tracejado descendo e o ponto viajando sao
  o que diz que isso e um sistema rodando, e nao um organograma.
*/
.mapa {
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--linha);
  text-align: left;
}

.mapa-cabeca h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 4.6vw, 1.7rem);
  letter-spacing: -0.025em;
  line-height: 1.18;
}
.mapa-cabeca p {
  margin-top: 8px;
  font-size: 0.98rem;
  color: var(--tinta-3);
  max-width: 48em;
}

/*
  Duas colunas: a arvore inteira de um lado, as etapas do outro.

  A arvore nao repete os nomes das partes. Quem nomeia e o cartao, e o
  fio desenhado liga um ao outro. Escrever nos dois lugares era dizer a
  mesma coisa duas vezes, que foi o problema da versao anterior.

  No celular nao existe fio: nao ha largura para um fio atravessar sem
  virar rabisco. La a arvore vai inteira para cima, uma vez, e os
  cartoes descem embaixo com o nome da parte em cada um.
*/
.fluxo { grid-column: 2; grid-row: 1; }
.solo { grid-column: 2; grid-row: 2; }

.lado-arvore {
  position: relative;
  display: flex;
  justify-content: center;
}

/*
  No celular a coluna e altissima e estreita, e esticar o desenho ate o
  fim dela transformaria a arvore num espeto. Entao ela mantem a
  proporcao e fica grudada no topo: enquanto os cinco cartoes passam, ela
  continua na tela, acendendo a zona da vez.
*/
.sequoia {
  position: sticky;
  top: calc(var(--topo) + 14px);
  align-self: start;
  width: auto;
  max-width: 100%;
  height: min(56vh, 470px);
  display: block;
}

/* A camada dos fios cobre as duas colunas e fica por tras dos cartoes,
   entao a curva entra por baixo da borda em vez de encostar nela. */
.fios {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.fios path {
  fill: none;
  stroke: var(--linha);
  stroke-width: 1.6;
  stroke-dasharray: 4 5;
  animation: acender-fio var(--ciclo, 8.4s) ease-out infinite;
  animation-delay: var(--t, 0s);
}
@keyframes acender-fio {
  0%, 100% { stroke: var(--linha); stroke-width: 1.6; }
  4% { stroke: var(--roxo); stroke-width: 2.4; }
  20% { stroke: var(--linha); stroke-width: 1.6; }
}

.fluxo {
  margin: 26px auto 0;
  max-width: 620px;
  display: grid;
  text-align: center;
}

/* ---------------------------------------------------------- a junta */

/*
  A coreografia do fluxo. Um pacote so desce a linha inteira: sai das
  portas, chega no agente, que acende; segue para o vendedor, que
  acende; e termina na venda, que acende em verde.

  Todos giram no mesmo ciclo e o que separa um do outro e o atraso,
  escrito no HTML pelo gerador. Com duracoes diferentes em cada peca elas
  iriam dessincronizando, e em um minuto o brilho aconteceria antes de a
  bolinha chegar.
*/
.junta {
  position: relative;
  width: 2px;
  height: 34px;
  margin: 0 auto;
  background-image: linear-gradient(to bottom, #d9cbf5 50%, rgba(0, 0, 0, 0) 50%);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  animation: descer-tracejado 0.9s linear infinite;
}
@keyframes descer-tracejado {
  to { background-position-y: 10px; }
}

/*
  O pacote que desce a linha. Sai das portas, chega no agente, que
  acende; segue para o vendedor, que acende; e termina na venda, em
  verde. Todos giram no mesmo ciclo, e o que separa um do outro e o
  atraso escrito no HTML pelo gerador: com duracoes proprias em cada
  peca elas iriam dessincronizando.
*/
.junta i {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--roxo);
  box-shadow: 0 0 0 4px rgba(112, 0, 255, 0.14), 0 0 12px rgba(112, 0, 255, 0.7);
  opacity: 0;
  animation: viajar var(--ciclo, 8.4s) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: var(--t, 0s);
}
@keyframes viajar {
  0% { top: -7px; opacity: 0; transform: scale(0.5); }
  3% { opacity: 1; transform: scale(1); }
  16% { opacity: 1; transform: scale(1); }
  19% { top: calc(100% - 2px); opacity: 0; transform: scale(0.5); }
  100% { top: calc(100% - 2px); opacity: 0; transform: scale(0.5); }
}

@keyframes receber {
  0%, 100% {
    border-color: var(--linha);
    box-shadow: 0 1px 2px rgba(31, 25, 18, 0.04), 0 16px 34px -26px rgba(31, 25, 18, 0.4);
    transform: none;
  }
  4% {
    border-color: var(--roxo);
    box-shadow: 0 0 0 4px rgba(112, 0, 255, 0.16), 0 14px 46px -8px rgba(112, 0, 255, 0.45);
    transform: translateY(-2px);
  }
  20% {
    border-color: var(--linha);
    box-shadow: 0 1px 2px rgba(31, 25, 18, 0.04), 0 16px 34px -26px rgba(31, 25, 18, 0.4);
    transform: none;
  }
}

@keyframes receber-verde {
  0%, 100% {
    border-color: rgba(47, 122, 79, 0.4);
    box-shadow: 0 1px 2px rgba(31, 25, 18, 0.04), 0 16px 34px -26px rgba(31, 25, 18, 0.4);
    transform: none;
  }
  4% {
    border-color: var(--verde);
    box-shadow: 0 0 0 4px rgba(47, 122, 79, 0.18), 0 14px 46px -8px rgba(47, 122, 79, 0.5);
    transform: translateY(-2px);
  }
  20% {
    border-color: rgba(47, 122, 79, 0.4);
    box-shadow: 0 1px 2px rgba(31, 25, 18, 0.04), 0 16px 34px -26px rgba(31, 25, 18, 0.4);
    transform: none;
  }
}


/* -------------------------------------------------------- estagios */

.estagio {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 20px 20px 18px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(31, 25, 18, 0.04), 0 16px 34px -26px rgba(31, 25, 18, 0.4);
  animation: receber var(--ciclo, 4.8s) ease-out infinite;
  animation-delay: var(--t, 0s);
}

/* A parte da arvore acima do titulo: e o que amarra o cartao ao
   desenho ao lado, sem precisar de linha ligando os dois. */
.estagio .parte {
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--roxo);
  text-align: center;
  margin-bottom: 5px;
}
.estagio.fim .parte { color: var(--verde); }

.estagio header h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  text-align: center;
}
.estagio header .resumo {
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--tinta-3);
  text-align: center;
}

.estagio ul {
  list-style: none;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linha-fraca);
  display: grid;
  gap: 9px;
}
.estagio ul li {
  position: relative;
  padding-left: 17px;
  font-size: 0.91rem;
  line-height: 1.4;
  color: var(--tinta-2);
}
.estagio ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--roxo);
}

/* O ultimo estagio e o resultado: verde, a mesma cor que o painel usa
   para venda fechada. */
.estagio.fim {
  background: var(--verde-fundo);
  border-color: rgba(47, 122, 79, 0.4);
  animation-name: receber-verde;
}
.estagio.fim header h3 { color: #1d5c39; }
.estagio.fim ul li::before { background: var(--verde); }

@media (prefers-reduced-motion: reduce) {
  .estagio,
  .sequoia .zona,
  .fios path { animation: none; }
  .sequoia .seiva { display: none; }
}

/* ----------------------------------------------------------- solo */

/*
  O solo nao e a quinta etapa: e a condicao das outras quatro. Por isso
  usa o mesmo cartao dos estagios, para nao virar um formato novo no
  meio da secao, mas sem o brilho: nada chega nele, ele ja esta la o
  tempo todo.

  Fica logo abaixo da raiz, onde solo fica.
*/
.chao-bloco {
  background: var(--creme);
  border-color: #ddd2c0;
  animation: none;
}
.chao-bloco .parte { color: var(--tinta-3); }
.chao-bloco ul li::before { background: var(--tinta-3); }

/* ========================================================== problema */

.problema {
  margin-top: 64px;
  padding: 44px 0;
  background: var(--creme);
  border-block: 1px solid var(--linha);
}

/*
  Texto de um lado, calendario do outro. Antes a coluna estreita ficava
  centralizada e sobrava um vazio do tamanho dela na esquerda, o que
  lia como layout quebrado.
*/
.problema .env {
  display: grid;
  gap: 30px;
  align-items: center;
}
.problema .dito { max-width: 34em; }

.problema h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.4rem, 5vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.problema p {
  margin-top: 18px;
  color: var(--tinta-2);
}
.problema p:last-child {
  color: var(--tinta);
  font-weight: 700;
}

/* ------------------------------------------------------- calendario */

/*
  O mes enchendo e zerando no dia primeiro.

  Feito na pagina, e nao em video ou GIF: fica nitido em qualquer tela,
  pesa alguns kilobytes em vez de alguns megabytes, e o numero pode
  mudar sem reexportar arquivo.
*/
.relogio {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 20px 20px 18px;
  box-shadow: 0 1px 2px rgba(31, 25, 18, 0.04), 0 20px 44px -30px rgba(31, 25, 18, 0.45);
  max-width: 380px;
  width: 100%;
  justify-self: center;
}

.relogio .mes {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.relogio .mes span {
  display: inline-block;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.relogio.virando .mes span {
  opacity: 0;
  transform: translateY(-8px);
}

.relogio .semana,
.relogio .dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.relogio .semana b {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
  text-align: center;
  padding-bottom: 6px;
}

.relogio .folha {
  position: relative;
}

.relogio .dias i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #b3a696;
  background: #f4f0e9;
  font-style: normal;
  transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.relogio .dias i.vago {
  background: none;
}

/* Dia que ja passou: preenchido. E o preenchimento que da a leitura de
   mes andando. */
.relogio .dias i.feito {
  background: var(--tinta);
  color: #fff;
}
/* O dia primeiro do mes novo, unico marcado na folha vazia. */
.relogio .dias i.hoje {
  background: var(--roxo);
  color: #fff;
  transform: scale(1.06);
}

/*
  As duas folhas na mesma celula da grade, sobrepostas. Assim o cartao
  tem sempre a altura do mes mais longo e a virada nao empurra a pagina;
  com a folha nova posicionada por fora, ela caia abaixo da antiga e
  abria um buraco no lugar dos dias.
*/
.relogio .pilha { display: grid; }
.relogio .pilha > .dias {
  grid-area: 1 / 1;
  align-content: start;
  transition: opacity 0.3s ease;
}
.relogio .dias.vazio { opacity: 0; }
.relogio.zerado .dias.cheio { opacity: 0; }
.relogio.zerado .dias.vazio { opacity: 1; }

.relogio figcaption {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linha-fraca);
}
.relogio .rot {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.relogio .cifra {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: 2px;
}
.relogio.zerado .cifra { color: var(--ruim, #a83828); }

/* ========================================================= historia */

/*
  A credencial do fundador.

  Fundo creme e nao branco: ela fica entre o problema, que ja e creme, e
  a faixa escura da promessa, e precisa ler como continuacao da conversa,
  nao como mais um bloco de produto.
*/
.historia {
  padding: 58px 0;
  background: var(--creme);
  border-block: 1px solid var(--linha);
}

.historia .env {
  display: grid;
  gap: 26px;
  justify-items: start;
}

.retrato-fundador {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tinta);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 26px -14px rgba(31, 25, 18, 0.6);
}
.retrato-fundador img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Enquanto a foto nao chega, iniciais. O bloco nao pode quebrar por
   falta de um arquivo. */
.retrato-fundador span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #f4efe7;
}

.historia h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  letter-spacing: -0.025em;
  line-height: 1.18;
  max-width: 20ch;
}

.historia p {
  margin-top: 16px;
  max-width: 40em;
  color: var(--tinta-2);
  line-height: 1.65;
}

.historia .assina {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 2px;
  font-size: 0.92rem;
}
.historia .assina strong {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.historia .assina span { color: var(--tinta-3); }

/* ========================================================== promessa */

/*
  A virada da pagina: acaba a dor, comeca o sistema.

  Ela era um titulo solto entre dois blocos, e logo abaixo vinha o titulo
  do primeiro bloco. Dois titulos seguidos leem como um deles ter perdido
  o conteudo. Em faixa escura de largura total ela deixa de ser cabecalho
  e passa a ser batida: a pagina para, afirma uma coisa, e segue.

  A pagina tem duas faixas escuras, esta e a do formulario no fim. Sao os
  dois momentos em que se pede alguma coisa do leitor: aqui, que ele
  acredite; la, que ele responda.
*/
.promessa {
  margin-top: 0;
  padding: 62px 0;
  background: var(--tinta);
  color: #f4efe7;
  text-align: center;
}

.promessa h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 6.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 16ch;
  margin-inline: auto;
}

.promessa p {
  margin: 18px auto 0;
  max-width: 42em;
  color: #c8bcab;
  font-size: 1.04rem;
}

/* ------------------------------------------------------------ grifo */

/*
  Risco a mao embaixo da palavra. Duas passadas com curvatura levemente
  diferente, que e o que separa um traco de caneta de um sublinhado de
  processador de texto.

  Vai no fundo e nao no texto: assim ele nao interfere na altura da linha
  e o texto continua selecionavel e legivel para leitor de tela.
*/
.risco {
  background: none;
  color: inherit;
  font-weight: 700;
  /* Caixa alta sem espacamento aperta: as maiusculas tem o mesmo peso e
     colam umas nas outras. */
  letter-spacing: 0.015em;
  padding-bottom: 0.3em;
  background-repeat: no-repeat;
  background-position: 0 100%;
  /*
    Achatar o SVG na vertical afina o traco na mesma proporcao. Por isso a
    espessura aqui e alta: com 2,6 o risco saia como um sublinhado de
    processador de texto, sem nenhuma mao dentro.
  */
  background-size: 100% 0.58em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10.6C48 3.4 118 2.8 196 8.4' fill='none' stroke='%237000ff' stroke-width='5.4' stroke-linecap='round'/%3E%3Cpath d='M11 14.4C57 8.6 132 8 189 12.2' fill='none' stroke='%237000ff' stroke-width='3' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

/* Na faixa escura o roxo da marca some no fundo. Mesmo traco, um tom
   acima. */
.promessa .risco {
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10.6C48 3.4 118 2.8 196 8.4' fill='none' stroke='%23b388ff' stroke-width='5.4' stroke-linecap='round'/%3E%3Cpath d='M11 14.4C57 8.6 132 8 189 12.2' fill='none' stroke='%23b388ff' stroke-width='3' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
}

/* ============================================================== ato */

.ato {
  padding-top: 66px;
}

/* Ato sem rotulo: o primeiro bloco entra logo depois da promessa, e o
   respiro do cabecalho que nao existe mais vira respiro do bloco. */
.ato.sem-cabeca { padding-top: 20px; }
.ato.sem-cabeca .bloco:first-of-type { padding-top: 0; }

.ato-cabeca {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--linha);
}

.ato-cabeca h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  letter-spacing: -0.02em;
}

/* ============================================================ bloco */

.bloco {
  padding: 46px 0;
  border-bottom: 1px solid var(--linha-fraca);
}
.bloco:last-child {
  border-bottom: 0;
}

/* O nome da solucao, acima do titulo. E o que faz o bloco deixar de ser
   "uma funcionalidade" e virar uma coisa com nome, que o lojista
   consegue repetir para o socio depois. */
.nome-bloco {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roxo);
  margin-bottom: 10px;
}

.bloco h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.32rem, 5.2vw, 1.95rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  max-width: 19ch;
}

.bloco .corpo {
  margin-top: 14px;
  color: var(--tinta-2);
  font-size: 1.02rem;
}

.bloco .prova {
  margin-top: 18px;
  padding-left: 15px;
  border-left: 2px solid var(--roxo);
  font-size: 0.99rem;
  font-weight: 700;
  color: var(--tinta);
}

.bloco .aviso {
  margin-top: 16px;
  font-size: 0.93rem;
  color: var(--tinta-3);
  font-style: italic;
}

.bloco .palco {
  margin-top: 28px;
}

/* ============================================================ palco */

/*
  A moldura da captura.

  Proporcao fixa de 16 por 10 em TODOS os blocos, imagem e video. Toda
  captura ja sai nessa proporcao do gravador, entao aqui nada e cortado:
  a razao existe para o navegador reservar o espaco certo antes de
  baixar, e para a pagina ter uma so altura de moldura do inicio ao fim.

  Foi o que faltou na primeira versao. Cada bloco tinha a altura do
  elemento que coube nele, e a sequencia virava uma escada.
*/
.palco {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow: hidden;
  background: var(--branco);
  box-shadow: 0 1px 2px rgba(31, 25, 18, 0.04), 0 18px 40px -28px rgba(31, 25, 18, 0.4);
}

.palco img,
.palco video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/*
  O convite para abrir a captura.

  Fica sempre visivel, e nao so quando o mouse chega. Escondido, ninguem
  descobria que dava para ampliar, e as capturas passavam batidas no
  tamanho pequeno, que e justamente onde elas convencem menos.

  Roxo cheio, e nao um cinza discreto: aqui ele nao e um detalhe da
  moldura, e o segundo botao mais importante da pagina.
*/
.ampliar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--roxo);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 9px 15px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(31, 25, 18, 0.18), 0 10px 22px -12px rgba(112, 0, 255, 0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.palco:hover .ampliar,
.ampliar:hover,
.ampliar:focus-visible {
  transform: translateY(-1px);
  background: #5a00cc;
  box-shadow: 0 3px 8px rgba(31, 25, 18, 0.2), 0 16px 30px -14px rgba(112, 0, 255, 0.8);
}
.ampliar svg {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* No celular a moldura e menor e o texto inteiro cobre imagem demais. */
@media (max-width: 640px) {
  .ampliar {
    right: 8px;
    bottom: 8px;
    font-size: 11px;
    padding: 8px 13px;
  }
}

/* ============================================================ cases */

.cases {
  margin-top: 70px;
  padding: 54px 0;
  background: var(--creme);
  border-block: 1px solid var(--linha);
}

.cases h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.6vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.cases .sub {
  margin-top: 10px;
  color: var(--tinta-2);
}

/*
  A fileira de marcas.

  Sem cartao e sem moldura. Quatro cartoes brancos com uma logo pequena
  no meio de cada um seriam quatro caixas vazias, e a pagina ja tem
  cartao demais. Assim as marcas ficam soltas na faixa creme, que e como
  fileira de cliente se apresenta.

  Todas na mesma tinta, com altura ajustada uma a uma no gerador das
  imagens: logo deitada e logo quadrada na mesma altura leem em tamanhos
  diferentes, porque o olho compara area.
*/
.grade-cases {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 22px;
  align-items: center;
}

.grade-cases .marca {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grade-cases .marca img {
  height: 34px;
  width: auto;
  max-width: 100%;
  /* As logos ja saem monocromaticas do gerador. A opacidade aqui e o que
     as coloca no mesmo tom do texto de apoio, em vez de pretas cheias
     numa faixa clara. */
  opacity: 0.78;
}

/*
  A faixa roxa da implantacao.

  Roxo mais fundo que o da marca, e nao o #7000ff dos botoes: numa faixa
  desse tamanho o roxo do botao vibra e briga com o texto. Aqui ele volta
  como cor dos tiques, que e onde ele deve chamar atencao.

  Esta e a terceira e ultima faixa cheia da pagina, depois da promessa e
  do formulario. Tres batidas em dezesseis mil pixels de rolagem.
*/
.servico {
  margin-top: 70px;
  padding: 56px 0 60px;
  background: #2b0a63;
  color: #e6dcf7;
}



/* No celular o titulo vem primeiro. A lista antes dele obrigava a
   pessoa a ler dez itens sem saber do que se tratava. */
.servico-grade .dito { order: -1; }
@media (min-width: 1000px) {
}

/* Centralizado e com balanceamento de linha: com 17ch o "1" do nome do
   metodo caia sozinho na segunda linha. */
.servico .dito {
  text-align: center;
  max-width: 40em;
  margin-inline: auto;
}

.servico h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.6vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}

.servico p {
  margin-top: 16px;
  color: #bfaee4;
}

/* ----------------------------------------------------------- plano */

/*
  O pacote como cartao de plano, na vertical.

  Lado a lado, nucleo e bonus tinham alturas muito diferentes e sobrava
  meia tela vazia. Num cartao so, empilhado, a leitura e uma linha reta:
  o que vem, o que vem de brinde, quanto vale e o botao.

  Branco sobre o roxo de proposito: e a unica coisa da faixa que o
  leitor precisa parar para ler.
*/
.plano {
  margin: 34px auto 0;
  max-width: 560px;
  background: var(--branco);
  border-radius: 20px;
  padding: 30px 26px 26px;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
  text-align: left;
}

.plano .etiqueta {
  display: inline-block;
  background: var(--roxo);
  color: #fff;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.plano .rot {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 14px;
}
.plano .rot + .lista-plano { margin-bottom: 24px; }

.lista-plano {
  list-style: none;
  display: grid;
  gap: 11px;
}

.lista-plano li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--tinta-2);
  opacity: 0.3;
  transform: translateY(4px);
}
.visivel .lista-plano li {
  opacity: 1;
  transform: none;
  transition: opacity 0.34s ease, transform 0.38s ease;
  transition-delay: calc(var(--i) * 0.07s);
}

.lista-plano .tique {
  width: 20px;
  height: 20px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #efe9e0;
  stroke: #b6a898;
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: scale(0.85);
}
.visivel .lista-plano .tique {
  background: var(--roxo);
  stroke: #fff;
  transform: none;
  transition: background 0.3s ease, stroke 0.3s ease, transform 0.32s cubic-bezier(0.34, 1.4, 0.5, 1);
  transition-delay: calc(var(--i) * 0.07s);
}

/* Nos bonus o preco fica na terceira coluna, riscado: e o valor que ele
   NAO vai pagar. */
.lista-plano.bonus li {
  grid-template-columns: 20px 1fr auto;
}
.lista-plano.bonus em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--roxo);
  text-decoration: line-through;
  text-decoration-color: rgba(112, 0, 255, 0.45);
  white-space: nowrap;
}

/* Colada na lista, e nao separada por um vao: distante, ela lia como
   uma linha de preco nova em vez de o total daquela lista. */
.plano .soma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px solid var(--linha);
}
.plano .soma span {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.plano .soma strong {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
/* Riscado como os itens acima. Sem o risco, o olho bate no numero maior
   da secao e entende que o preco e aquele. */
.plano .soma s {
  text-decoration: line-through;
  text-decoration-color: rgba(31, 25, 18, 0.42);
  text-decoration-thickness: 2px;
}
.plano .soma i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-left: 7px;
}

.fecho-plano {
  margin-top: 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

.plano .botao-forte {
  margin-top: 22px;
  width: 100%;
  max-width: none;
  flex: none;
}

/* ======================================================== garantia */

/*
  Verde, e nao roxo: e a unica secao da pagina que fala de risco do
  cliente, e ela precisa ler como alivio, nao como mais uma promessa.
*/
.garantia {
  padding: 58px 0 62px;
  background: var(--verde-fundo);
  border-block: 1px solid rgba(47, 122, 79, 0.25);
  text-align: center;
}

.garantia .rotulo { color: var(--verde); }

.garantia .escudo {
  width: 54px;
  height: 54px;
  margin: 18px auto 0;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--verde);
  box-shadow: 0 8px 22px -12px rgba(47, 122, 79, 0.7);
}
.garantia .escudo svg { width: 26px; height: 26px; }

.garantia h2 {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 5.4vw, 2.2rem);
  letter-spacing: -0.032em;
  line-height: 1.14;
  color: #17452b;
  max-width: 18ch;
  margin-inline: auto;
  text-wrap: balance;
}

.garantia p {
  margin: 16px auto 0;
  max-width: 42em;
  color: #2f5c44;
  line-height: 1.6;
}

.garantia .remate {
  margin-top: 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 3.8vw, 1.3rem);
  letter-spacing: -0.02em;
  color: #17452b;
}

/* ------------------------------------------------------- checklist */

/*
  Os tiques entram um a um quando a lista aparece na tela, com atraso
  proporcional a posicao. Sem laco: marcar e desmarcar em loop diria que
  a implantacao desfaz, que e o oposto do que a lista promete.
*/
.checklist {
  list-style: none;
  display: grid;
  gap: 11px;
  padding: 0;
}

.checklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #cdbdea;
  opacity: 0.32;
  transform: translateY(4px);
}

.visivel .checklist li {
  opacity: 1;
  transform: none;
  color: #f0e9fb;
  transition: opacity 0.36s ease, transform 0.4s ease, color 0.36s ease;
  transition-delay: calc(var(--i) * 0.16s);
}

.checklist .tique {
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.09);
  stroke: #b98cff;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* O tique e desenhado, nao aceso: o traco correndo da a leitura de
     alguem marcando a lista. */
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  transform: scale(0.8);
}

.visivel .checklist .tique {
  stroke-dashoffset: 0;
  transform: none;
  background: var(--roxo);
  stroke: #fff;
  transition: stroke-dashoffset 0.4s ease, transform 0.34s cubic-bezier(0.34, 1.4, 0.5, 1),
    background 0.3s ease;
  transition-delay: calc(var(--i) * 0.16s);
}

@media (prefers-reduced-motion: reduce) {
  .checklist li,
  .checklist .tique { opacity: 1; transform: none; stroke-dashoffset: 0; transition: none; }
}

/* ============================================================== faq */

.faq {
  padding: 62px 0 70px;
}

.faq h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5.6vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.lista-faq {
  margin-top: 26px;
  max-width: 46em;
  border-top: 1px solid var(--linha);
}

/* Sanfona nativa: abre e fecha sem uma linha de JavaScript, e continua
   funcionando com o script desligado. */
.lista-faq details {
  border-bottom: 1px solid var(--linha);
}

.lista-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.012em;
  color: var(--tinta);
}
.lista-faq summary::-webkit-details-marker { display: none; }
.lista-faq summary:hover { color: var(--roxo); }

.lista-faq .mais {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: var(--roxo);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: transform 0.24s ease;
}
.lista-faq details[open] .mais { transform: rotate(45deg); }

.lista-faq details p {
  padding: 0 2px 20px;
  margin-top: -4px;
  max-width: 42em;
  color: var(--tinta-2);
  font-size: 1rem;
}

/* ======================================================= formulario */

.forma {
  margin-top: 30px;
  background: var(--branco);
  color: var(--tinta);
  border-radius: 16px;
  padding: 20px 18px 18px;
  max-width: 620px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
  /*
    Altura fixa. Sem ela o cartao mudava de tamanho a cada resposta, de
    328 para 626 pixels, e a pagina inteira pulava embaixo do dedo de
    quem estava respondendo. Agora so a conversa rola por dentro.
  */
  height: 448px;
  display: flex;
  flex-direction: column;
}

/* Barra de progresso no topo, com um ponto por pergunta. Saber quantas
   faltam e o que faz a pessoa terminar. */
.passos {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 18px;
}
.passos i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #ded2c0;
  transition: background 0.35s ease;
}
.passos i.feito {
  background: var(--roxo);
}

.conversa {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /*
    A conversa cresce a cada resposta. Sem altura maxima, o cartao empurra
    a pagina inteira para baixo e o campo de escrever foge da tela no
    meio do preenchimento. Rola por dentro, e o campo fica parado.
  */
  flex: 1;
  /* min-height zero deixa o flex encolher de verdade; sem isso ele
     respeita o conteudo e a rolagem nunca aparece. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

/* Barra fina e discreta: e um cartao de formulario, nao um documento. */
.conversa::-webkit-scrollbar { width: 6px; }
.conversa::-webkit-scrollbar-thumb {
  background: #dcd2c3;
  border-radius: 3px;
}
.conversa::-webkit-scrollbar-track { background: transparent; }

.fala {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  animation: sobe 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fala.minha {
  justify-content: flex-end;
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}

.retrato {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  background: var(--roxo);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
}
.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.balao {
  background: #f2eee7;
  border-radius: 14px;
  padding: 11px 15px;
  font-size: 1rem;
  line-height: 1.45;
  max-width: 82%;
}
.fala.minha .balao {
  background: var(--tinta);
  color: #fff;
  font-weight: 700;
}

/* Os tres pontinhos de "escrevendo". */
.balao.pontos {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 15px 16px;
}
.balao.pontos i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b3a696;
  animation: pontinho 1.15s ease-in-out infinite;
}
.balao.pontos i:nth-child(2) { animation-delay: 0.15s; }
.balao.pontos i:nth-child(3) { animation-delay: 0.3s; }

@keyframes pontinho {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ------------------------------------------------- multipla escolha */

.opcao.marcavel {
  display: grid;
  grid-template-columns: 19px 1fr;
  gap: 11px;
  align-items: center;
}
.opcao .caixa {
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 1.6px solid var(--linha);
  background: var(--branco);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.opcao.marcada {
  border-color: var(--roxo);
  background: var(--roxo-fundo);
}
.opcao.marcada .caixa {
  background: var(--roxo);
  border-color: var(--roxo);
  /* O tique desenhado no proprio fundo, sem precisar de outro elemento. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center;
}

/* O botao de seguir da multipla escolha: mesmo botao da pagina, so que
   apagado enquanto nada foi marcado. */
.opcoes .segue {
  margin-top: 6px;
  width: 100%;
  max-width: none;
  flex: none;
  padding: 13px 20px;
}
.opcoes .segue:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.opcoes .segue:disabled::after { display: none; }

.dica {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--tinta-3);
  padding-left: 44px;
}

.resposta {
  flex: none;
  margin-top: 16px;
  /* Sete opcoes nao existem, mas quatro com texto longo passam do
     espaco em telas baixas. Rola aqui tambem, sem empurrar o cartao. */
  max-height: 210px;
  overflow-y: auto;
}

.opcoes {
  display: grid;
  gap: 8px;
}

.opcao {
  text-align: left;
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 0.98rem;
  background: var(--branco);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease;
}
.opcao:hover {
  border-color: var(--roxo);
  background: var(--roxo-fundo);
}
.opcao:active {
  transform: scale(0.99);
}

.campo {
  display: flex;
  gap: 8px;
}
.campo input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 13px 15px;
  background: var(--branco);
  color: var(--tinta);
}
.campo input:focus {
  outline: 2px solid var(--roxo);
  outline-offset: -1px;
  border-color: transparent;
}
.campo button {
  flex: none;
  width: 48px;
  border-radius: 10px;
  background: var(--roxo);
  color: #fff;
  display: grid;
  place-items: center;
}
.campo button svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Aviso de consentimento embaixo do primeiro campo. Discreto de
   proposito: precisa estar la, nao precisa competir com a pergunta. */
.consentimento {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tinta-3);
  text-align: center;
}
.consentimento a {
  color: var(--tinta-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consentimento a:hover { color: var(--roxo); }

.erro {
  margin-top: 8px;
  font-size: 13px;
  color: #a83828;
}

/* Tela final: conteudo centralizado no cartao, na vertical e na
   horizontal. */
.forma.terminou .conversa {
  justify-content: center;
  overflow: visible;
}
.forma.terminou .fim {
  text-align: center;
  display: grid;
  justify-items: center;
}
.forma.terminou .fim p { max-width: 34em; }
.forma.terminou .resposta { display: none; }

.rodape-fim {
  margin-top: 20px;
  font-size: 13px;
  color: var(--tinta-3);
}

.fim h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.fim p {
  margin-top: 10px;
  color: var(--tinta-2);
}

/* =========================================================== rodape */

.rodape {
  padding: 54px 0 30px;
  background: var(--tinta);
  color: #a2968a;
  font-size: 0.94rem;
}

.rodape-grade {
  display: grid;
  gap: 36px;
}

.rodape-marca img {
  height: 30px;
  width: auto;
  /* O logo e preto; no fundo escuro ele precisa virar claro. */
  filter: brightness(0) invert(1);
}
.rodape-marca p {
  margin-top: 14px;
  max-width: 28em;
  line-height: 1.5;
}

.redes {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}
.redes a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  color: #cbbfb2;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.redes a:hover {
  color: #fff;
  border-color: var(--roxo);
  background: rgba(112, 0, 255, 0.16);
}
.redes svg { width: 18px; height: 18px; }

.rodape-col .rot {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7d7266;
  margin-bottom: 14px;
}

.rodape-col ul {
  list-style: none;
  display: grid;
  gap: 11px;
}
.rodape-col a {
  text-decoration: none;
  transition: color 0.18s ease;
}
.rodape-col a:hover { color: #fff; }

.rodape-col .contato li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  line-height: 1.45;
}
.rodape-col .contato svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--roxo);
}

.rodape-legal {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12px;
  color: #756a5f;
  letter-spacing: 0.01em;
}

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

/*
  Termos, privacidade e dados. Coluna estreita e entrelinha larga: sao
  textos que ninguem quer ler, e a unica gentileza possivel e nao
  dificultar.
*/
body.documento { padding-bottom: 0; }

.folha-doc {
  padding: calc(var(--topo) + 40px) 0 70px;
}
.folha-doc .env { max-width: 780px; }

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--roxo);
  text-decoration: none;
  margin-bottom: 26px;
}
.voltar svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(180deg);
}
.voltar:hover { text-decoration: underline; }

.folha-doc h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.folha-doc .resumo {
  margin-top: 14px;
  font-size: 1.05rem;
  color: var(--tinta-2);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linha);
}

.folha-doc section { margin-top: 34px; }

.folha-doc h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.16rem;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}

.folha-doc p {
  color: var(--tinta-2);
  line-height: 1.72;
  margin-bottom: 12px;
}

/* Versao e data no topo do documento. No rodape so, ninguem ve, e numa
   discussao sobre o que a pessoa aceitou e o primeiro dado que importa. */
.selo-versao {
  margin-top: 10px;
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--creme);
  border: 1px solid var(--linha);
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--tinta-3);
}

/* A tabela de bases legais. Em tela estreita ela rola sozinha, dentro da
   propria caixa: a pagina nunca rola de lado. */
.rolagem-tabela {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--branco);
}
.rolagem-tabela table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 0.9rem;
}
.rolagem-tabela th,
.rolagem-tabela td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linha-fraca);
  line-height: 1.45;
}
.rolagem-tabela th {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tinta-3);
  background: var(--creme);
  border-bottom-color: var(--linha);
}
.rolagem-tabela td { color: var(--tinta-2); }
.rolagem-tabela td:first-child {
  color: var(--tinta);
  font-weight: 700;
  white-space: normal;
}
.rolagem-tabela tr:last-child td { border-bottom: 0; }

.folha-doc .quando {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: 13px;
  color: var(--tinta-3);
}

/* ==================================================== chamada inline */

/*
  A chamada no fim de cada ato. Fica no meio da coluna, com respiro dos
  dois lados, para funcionar como parada: quem estava rolando para e
  decide, e quem nao quer decidir agora segue sem tropecar.
*/
.chamada-linha {
  margin: 8px auto 0;
  padding: 40px 0 6px;
  max-width: 40em;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.chamada-linha p {
  text-wrap: balance;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.12rem, 4.2vw, 1.42rem);
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: var(--tinta);
  max-width: 22ch;
}

/* Dentro dos atos o botao nao estica: ele e um ponto, nao uma faixa. */
.chamada-linha .botao-forte {
  flex: none;
  width: auto;
}

/* ---------------------------------------------------- botao forte */

/*
  O botao de acao da pagina. Tres camadas de efeito, e nenhuma delas
  gratuita: o degrade que anda diz que ele esta vivo, o brilho que varre
  no hover diz que ele responde ao toque, e a elevacao diz que da para
  apertar.
*/
button.botao-forte {
  border: 0;
  cursor: pointer;
  font-family: var(--display);
}

.botao-forte {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  max-width: 420px;
  padding: 16px 26px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(100deg, #6100e0 0%, #8b3dff 45%, #6100e0 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  box-shadow: 0 2px 4px rgba(38, 0, 90, 0.2), 0 12px 30px -10px rgba(112, 0, 255, 0.7);
  transition: transform 0.18s ease, box-shadow 0.28s ease, background-position 0.6s ease;
}

.botao-forte:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 4px 8px rgba(38, 0, 90, 0.24), 0 18px 44px -10px rgba(112, 0, 255, 0.85);
}
.botao-forte:active { transform: translateY(0); }

/* O brilho que varre. Fica fora do botao ate o ponteiro chegar. */
.botao-forte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-130%);
}
.botao-forte:hover::after {
  transform: translateX(130%);
  transition: transform 0.75s ease;
}

/* Sem tamanho explicito o SVG assume a largura do bloco e vira um
   triangulo gigante no meio da pagina. */
.botao-forte svg {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.22s ease;
}
.botao-forte:hover svg { transform: translateX(3px); }
.botao-forte span { position: relative; z-index: 1; }

/* ====================================================== modal forma */

/*
  O formulario em pop-up. So e montado no primeiro clique: montado junto
  com a pagina, a primeira fala e a pergunta do nome ja teriam entrado e
  saido antes de alguem abrir.
*/
.modal-forma {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(14, 11, 8, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overscroll-behavior: contain;
}
.modal-forma.aberto { display: flex; }

.caixa-forma {
  position: relative;
  width: 100%;
  max-width: 560px;
  animation: sobe 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.caixa-forma .forma {
  margin-top: 0;
  width: 100%;
  max-width: none;
}
.caixa-forma .fechar {
  top: -52px;
  right: 0;
}

/* ======================================================== barra fixa */

/*
  A chamada presa no rodape da tela. Nao aparece com a pagina aberta:
  quem acabou de chegar ainda nao viu nada para querer. Ela sobe depois
  da primeira dobra e dali para baixo acompanha a leitura inteira.
*/
.barra-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  background: rgba(247, 244, 239, 0.9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--linha);
  padding: 11px 0 calc(11px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.barra-cta.vendo { transform: none; }

.barra-cta .env {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.barra-cta .filtro {
  display: none;
  font-size: 0.9rem;
  color: var(--tinta-3);
}
@media (min-width: 860px) {
  .barra-cta .env { justify-content: space-between; }
  .barra-cta .filtro { display: block; }
  .barra-cta .botao-forte { flex: none; }
}

/* Uma batida de brilho quando ela sobe pela primeira vez, so uma vez. */
.barra-cta.vendo .botao-forte {
  animation: chamar 1.5s ease-out 0.5s 1;
}
@keyframes chamar {
  0%, 100% { box-shadow: 0 2px 4px rgba(38, 0, 90, 0.2), 0 12px 30px -10px rgba(112, 0, 255, 0.7); }
  45% { box-shadow: 0 2px 4px rgba(38, 0, 90, 0.2), 0 0 0 8px rgba(112, 0, 255, 0.13), 0 18px 44px -10px rgba(112, 0, 255, 0.9); }
}

/* A pagina ganha um rodape de respiro para a barra nao cobrir o fim. */
body { padding-bottom: 76px; }
@media (min-width: 860px) { body { padding-bottom: 68px; } }

@media (prefers-reduced-motion: reduce) {
  .barra-cta { transition: none; }
  .barra-cta.vendo .botao-forte { animation: none; }
  .botao-forte::after { display: none; }
}

/* ========================================================= luminaria *//* ========================================================= luminaria */

/*
  Tela cheia da captura. Fundo quase preto para a tela clara do painel
  ficar sendo a unica coisa acesa.
*/
.luminaria {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(14, 11, 8, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
}
.luminaria.aberta {
  display: flex;
}

.luminaria .quadro {
  width: 100%;
  max-width: 1400px;
  max-height: 100%;
  overflow: auto;
  border-radius: 10px;
  animation: sobe 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
  -webkit-overflow-scrolling: touch;
}
/*
  No celular a captura abre maior que a tela e a pessoa arrasta para
  ler. Encolhida na largura do telefone, a tela cheia nao entregaria
  nada alem do que ja estava na pagina, que e justamente o motivo de
  ela existir.
*/
.luminaria img,
.luminaria video {
  width: 1100px;
  max-width: none;
  border-radius: 10px;
}
@media (min-width: 900px) {
  .luminaria img,
  .luminaria video { width: 100%; }
}

.arraste {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
@media (min-width: 900px) {
  .arraste { display: none; }
}

.fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: grid;
  place-items: center;
}
.fechar:hover {
  background: rgba(255, 255, 255, 0.22);
}
.fechar svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

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

/* Cada bloco sobe um pouco ao entrar na tela. Discreto: 10 pixels e
   350ms. Animacao grande em pagina longa cansa antes do meio. */
.surge {
  opacity: 0;
  transform: translateY(10px);
}
.surge.visivel {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .surge, .surge.visivel { opacity: 1; transform: none; transition: none; }
  .fala { animation: none; }
}

/* ========================================================== desktop */

@media (min-width: 760px) {
  body { font-size: 18px; }
  :root { --margem: 34px; --topo: 74px; }

  .hero { padding-top: calc(var(--topo) + 70px); }
  .hero .acao { flex-direction: row; align-items: center; gap: 18px; }
  .hero .micro { margin: 0; max-width: 22em; }
  .hero .palco { margin-top: 54px; }

  .topo img { height: 38px; }
  .problema { margin-top: 86px; padding: 62px 0; }
  .problema .env { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; }
  /* Checklist a esquerda, texto a direita. */
  .plano { padding: 34px 32px 30px; margin-top: 40px; }
  .historia .env {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .retrato-fundador { width: 118px; height: 118px; }
  .servico { padding: 76px 0 80px; }
  .faq { padding: 84px 0 92px; }
  .problema .relogio { justify-self: end; max-width: 400px; }
  .promessa { padding: 92px 0; }
  .ato { padding-top: 92px; }

  .bloco { padding: 64px 0; }


  .forma { padding: 26px 26px 24px; height: 520px; }
  .rodape-grade { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; }
  .rodape { padding: 66px 0 34px; }
  .folha-doc { padding: calc(var(--topo) + 60px) 0 90px; }


}

@media (min-width: 1000px) {
  /*
    A partir daqui texto e captura vivem lado a lado, e os blocos
    alternam o lado. Alternar nao e enfeite: em pagina longa, coluna
    sempre do mesmo lado vira listagem, e o olho para de ler.
  */
  .bloco {
    display: grid;
    grid-template-columns: minmax(0, 4.1fr) minmax(0, 6.6fr);
    gap: 58px;
    align-items: center;
  }
  .bloco .texto { grid-column: 1; grid-row: 1; }
  .bloco .palco { grid-column: 2; grid-row: 1; margin-top: 0; }

  /*
    Ao inverter, as larguras invertem junto. Sem isso a captura cai na
    coluna estreita em um bloco sim e um bloco nao, e a pagina fica com
    molduras de dois tamanhos alternando, que foi exatamente o que
    quebrou o ritmo da primeira versao.
  */
  .bloco.invertido {
    grid-template-columns: minmax(0, 6.6fr) minmax(0, 4.1fr);
  }
  .bloco.invertido .texto { grid-column: 2; }
  .bloco.invertido .palco { grid-column: 1; }

  /* Titulo a esquerda, formulario a direita. O formulario e a acao
     principal da pagina: deixa-lo no fim era esconder o pedido atras de
     quinze blocos. */

  /* As quatro portas cabem em linha, e ai a leitura de "entram por
     quatro lugares diferentes" acontece de uma vez. */
  .fluxo { max-width: 700px; }
  /* A arvore estica so na altura dos quatro estagios. O solo fica na
     linha de baixo, na mesma coluna dos cartoes, entao ele nasce
     exatamente onde a raiz termina. */
  /* A arvore agora desce ate o fim do cartao do solo: e um desenho so,
     do apice a terra, e a raiz atravessa a linha do chao no caminho. */
  .junta { height: 42px; }
  .estagio ul { grid-template-columns: 1fr 1fr; gap: 10px 26px; }
  .estagio { padding: 24px 26px 22px; }
  .estagio ul { grid-template-columns: 1fr 1fr; gap: 10px 26px; }

  .cases .grade-cases { grid-template-columns: repeat(4, 1fr); gap: 26px; }
  .grade-cases .marca img { height: 40px; }
  .case .numero { font-size: 1.75rem; }
}

@media (min-width: 1240px) {
  .bloco { gap: 76px; }
}