/* A pagina publica. Carrega DEPOIS do app.css e reaproveita a paleta de papel
   creme dele - a tela de venda e a mesma casa que o cliente vai usar depois, e
   duas identidades diferentes seriam uma promessa quebrada logo na entrada.

   Estilo proprio e so o de layout longo: a lateral fixa do sistema nao existe
   aqui, e a leitura e de cima para baixo. */

.site { background-image: repeating-linear-gradient(
    0deg, rgba(120, 96, 48, .022) 0 1px, transparent 1px 3px); }
.site-largura { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }
.site-secao { padding: 3.5rem 0; }
.site-secao.destaque { background: var(--surface); border-block: 1px solid var(--borda); }
.site-secao h2 { font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: .5rem; }
.estreito { max-width: 720px; }
.centro { text-align: center; }
.intro { color: var(--texto-fraco); font-size: 1.02rem; max-width: 68ch; }

/* ---------- topo ---------- */
.site-topo { border-bottom: 1px solid var(--borda); background: var(--surface); }
.site-topo .site-largura {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px;
}
.site-topo .marca { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.marca .marca-texto > span { color: var(--acento); }

/* ---------- heroi ---------- */
.heroi {
  padding: 4rem 1.25rem 3rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2.5rem; align-items: center;
}
.heroi-imagem {
  width: 100%; height: auto; display: block;
  border-radius: var(--raio);
  /* A imagem ja e um desenho sobre papel creme: moldura e sombra fariam dela
     um objeto colado por cima da pagina, quando ela e a propria pagina. */
}
.sobretitulo {
  margin: 0 0 .6rem; color: var(--texto-fraco); font-size: .78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.heroi h1 {
  font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.035em; margin-bottom: .9rem;
}
.chamada { font-size: 1.12rem; line-height: 1.6; color: var(--texto-fraco); max-width: 60ch; }
.chamada strong { color: var(--texto); }
.heroi .acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.botao.grande { padding: .8rem 1.6rem; font-size: 1rem; }

/* ---------- faixa de numeros ---------- */
.faixa-numeros {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--borda); border: 1px solid var(--borda);
  border-radius: var(--raio); overflow: hidden; margin-bottom: 3.5rem;
}
.faixa-numeros div { background: var(--surface); padding: 1rem 1.1rem; }
.faixa-numeros b { display: block; font-size: .95rem; }
.faixa-numeros span { display: block; color: var(--texto-fraco); font-size: .8rem; margin-top: .15rem; }

/* ---------- o quadro da taxa ---------- */
/* O argumento inteiro da pagina esta nesta tabela, entao ela ganha o peso de um
   documento: numero alinhado, fonte tabular, e o veredito ao lado em vez de
   embaixo - no desktop os dois sao lidos de uma vez. */
.quadro-taxa {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem;
  align-items: start; margin-top: 1.8rem;
  background: var(--bg); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.4rem;
}
.quadro-taxa table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.quadro-taxa caption {
  text-align: left; color: var(--texto-fraco); font-size: .8rem;
  font-weight: 600; padding-bottom: .6rem;
}
.quadro-taxa th, .quadro-taxa td { padding: .4rem .5rem; text-align: right; font-size: .88rem; }
.quadro-taxa th:first-child, .quadro-taxa td:first-child { text-align: left; color: var(--texto-fraco); }
.quadro-taxa thead th {
  border-bottom: 1px solid var(--borda); color: var(--texto-fraco);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
}
.veredito p { margin: 0 0 .9rem; }
.veredito span { display: block; color: var(--texto-fraco); font-size: .78rem; }
.veredito b { font-size: 1.9rem; letter-spacing: -.03em; line-height: 1.1; }
.veredito .ganho b { color: var(--positivo); }
.veredito small { display: block; color: var(--texto-fraco); font-size: .82rem; line-height: 1.5; }

/* ---------- cartoes ---------- */
.cartoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.8rem; }
.cartoes article {
  background: var(--surface); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.15rem; box-shadow: var(--sombra);
}
.cartoes h3 { font-size: .98rem; margin-bottom: .35rem; }
.cartoes p { margin: 0; color: var(--texto-fraco); font-size: .89rem; line-height: 1.55; }

.preco-aviso { font-size: 1.05rem; margin: 1.2rem 0 1.6rem; }

/* ---------- rodape ---------- */
.site-rodape {
  border-top: 1px solid var(--borda); background: var(--surface);
  padding: 2rem 0; margin-top: 1rem;
}
.site-rodape .marca { font-weight: 700; }
.site-rodape p { color: var(--texto-fraco); font-size: .85rem; max-width: 60ch; margin: .4rem 0 0; }

/* ---------- telefone ---------- */
/* A pagina e lida no celular tanto quanto no computador: quem procura este
   sistema costuma procurar no telefone, entre uma cobranca e outra. */
@media (max-width: 900px) {
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .faixa-numeros { grid-template-columns: repeat(2, 1fr); }
  .quadro-taxa { grid-template-columns: 1fr; }
  /* No telefone quem chega quer ler a frase. 140KB antes do texto e o caminho
     mais curto para a pessoa desistir - e `display:none` num <img> impede o
     download nos navegadores atuais. */
  .heroi { grid-template-columns: 1fr; }
  .heroi-imagem { display: none; }
}
@media (max-width: 560px) {
  .cartoes, .faixa-numeros { grid-template-columns: 1fr; }
  .site-secao { padding: 2.5rem 0; }
  .heroi { padding: 2.5rem 1.25rem 2rem; }
  .heroi .acoes .botao { flex: 1; justify-content: center; }
}

/* ---------- a oferta ---------- */
/* Fundo de folha e barra a esquerda: a frase precisa se destacar do texto
   corrido sem virar um bloco de propaganda. E o argumento mais forte da
   pagina, e ele aparece antes de a pessoa rolar. */
.oferta {
  margin: 1.4rem 0 0; padding: .85rem 1rem;
  background: var(--surface); border: 1px solid var(--borda);
  border-left: 3px solid var(--acento); border-radius: var(--raio);
  font-size: .95rem; line-height: 1.55; max-width: 56ch;
}

/* ---------- planos ---------- */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 1.8rem; }
.planos article {
  position: relative; background: var(--surface); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 1.4rem 1.2rem; box-shadow: var(--sombra);
}
.planos article.destacado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--sombra); }
.etiqueta-plano {
  position: absolute; top: -.6rem; left: 1.2rem;
  background: var(--acento); color: var(--surface);
  padding: .15rem .55rem; border-radius: 99px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em;
}
.planos h3 { font-size: 1rem; margin-bottom: .5rem; }
.planos .preco { margin: 0; font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.planos .preco span { font-size: 1rem; font-weight: 600; color: var(--texto-fraco); margin-right: .15rem; }
.planos .preco small { font-size: .85rem; font-weight: 500; color: var(--texto-fraco); }
.planos .ate { margin: .5rem 0 .3rem; font-size: .85rem; font-weight: 600; }
.planos .resumo { margin: 0; color: var(--texto-fraco); font-size: .85rem; line-height: 1.5; }

/* ---------- faixa de fundadores ---------- */
.faixa-fundador {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
  margin-top: 1.5rem; padding: 1.4rem;
  background: var(--acento-fraco); border: 1px solid var(--acento);
  border-radius: var(--raio);
}
.faixa-fundador h3 { margin-bottom: .3rem; }
.faixa-fundador p { margin: 0 0 .5rem; font-size: .92rem; line-height: 1.55; }
.faixa-fundador p:last-child { margin-bottom: 0; }
.faixa-fundador .fraco { color: var(--texto-fraco); font-size: .85rem; }
.faixa-fundador .vagas { text-align: center; padding-inline: 1rem; }
.faixa-fundador .vagas b {
  display: block; font-size: 3rem; line-height: 1;
  letter-spacing: -.04em; color: var(--acento);
}
.faixa-fundador .vagas span { display: block; color: var(--texto-fraco); font-size: .78rem; }

@media (max-width: 900px) {
  .planos { grid-template-columns: 1fr; }
  .faixa-fundador { grid-template-columns: 1fr; }
  .faixa-fundador .vagas { display: none; }
}