/* Página pública. É a única tela que gente de fora vê antes de decidir.
 *
 * Não usa a casca do app (`.trilho`, `.topo`): visitante não tem navegação de
 * aplicativo, tem uma página para ler de cima a baixo. Desktop primeiro, como
 * o resto do projeto.
 */

.lp-topo {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sf);
  border-bottom: 1px solid var(--ln);
  padding: 12px var(--medianiz);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tx);
  text-decoration: none;
}

.lp-marca__logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--pr);
  color: var(--on);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-topo__acoes { display: flex; gap: 8px; align-items: center }

/* ------------------------------------------------------------------ herói */
/* Verde cheio, como o A1 do canvas: é a única parte da marca que a pessoa vê
   antes de entrar, e um herói branco não se distingue de qualquer site. */
.lp-heroi {
  background: var(--pr);
  color: #FFFFFF;
  padding: 56px var(--medianiz) 64px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: center;
}

.lp-heroi__texto { max-width: 560px; display: flex; flex-direction: column; gap: 18px }

.lp-heroi h1 {
  margin: 0;
  font-size: 44px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lp-heroi__sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #D4E8E0;
  max-width: 54ch;
}

.lp-heroi__acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px }
.lp-heroi__acoes .botao { padding: 0 26px }

/* O botão branco sobre o verde: o contorno padrão sumiria no fundo. */
.lp-heroi__acoes .botao--cheio { background: #FFFFFF; color: var(--pr) }
.lp-heroi__acoes .botao--fio { border-color: rgba(255, 255, 255, 0.45); color: #FFFFFF }
.lp-heroi__acoes .botao--fio:hover { background: rgba(255, 255, 255, 0.12) }

.lp-heroi__nota { margin: 0; font-size: 13px; color: #BBD9CE }

/* ----------------------------------------------------------------- fichas */
/* As três fichas do A1: explicam o produto sem uma linha de texto de venda. */
.lp-fichas { position: relative; min-height: 260px }

.lp-ficha {
  position: absolute;
  background: var(--sf);
  color: var(--tx);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  gap: 10px;
}

.lp-ficha--pessoa { left: 0; top: 0; width: 248px; align-items: center }
.lp-ficha__texto { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.lp-ficha__texto b { font-size: 14px }

.lp-ficha--correcao {
  right: 0;
  top: 88px;
  width: 232px;
  flex-direction: column;
  gap: 3px;
  border: 2px solid var(--ac);
  border-radius: 18px 18px 4px 18px;
}

.lp-ficha__rotulo { font-size: 11px; font-weight: 800; color: var(--ac-t) }
.lp-ficha--correcao s { font-size: 13px; color: var(--er) }
.lp-ficha--correcao b { font-size: 13px; color: var(--ok) }

.lp-ficha--placar { left: 24px; bottom: 0; align-items: center; border-radius: 16px }
.lp-ficha--placar b { font-size: 26px; color: var(--pr) }
.lp-ficha--placar span { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--t2) }

/* ----------------------------------------------------------------- seções */
.lp-secao {
  padding: 64px var(--medianiz);
  max-width: 1120px;
  margin: 0 auto;
}

.lp-secao--clara { background: var(--soft); max-width: none }
.lp-secao--clara > * { max-width: 1120px; margin-left: auto; margin-right: auto }

.lp-secao h2 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lp-secao__sub { margin: 0 0 28px; font-size: 16px; line-height: 1.55; color: var(--t2); max-width: 62ch }

.lp-cards {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.lp-card h3 { margin: 0; font-size: 18px; font-weight: 800 }
.lp-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--t2) }

/* -------------------------------------------------------------- concursos */
.lp-concursos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

.lp-concurso {
  background: var(--sf);
  border-radius: var(--raio-cartao);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lp-concurso__nome { font-size: 16px; font-weight: 800 }
.lp-concurso__banca { font-size: 13px; color: var(--t2) }
.lp-concurso__quando { font-size: 13px; font-weight: 700; color: var(--pr) }

/* ----------------------------------------------------------------- planos */
.lp-planos {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  max-width: 760px;
}

.lp-plano { gap: 14px }
.lp-plano h3 { margin: 0; font-size: 18px; font-weight: 800 }
.lp-plano__preco { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em }
.lp-plano__preco small { font-size: 15px; font-weight: 600; color: var(--t2) }
.lp-plano--destaque { outline: 2px solid var(--pr) }

.lp-lista { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px }
.lp-lista li { font-size: 15px; line-height: 1.45; color: var(--t2) }
.lp-plano .botao { margin-top: auto }

/* ----------------------------------------------------------------- rodapé */
.lp-rodape {
  border-top: 1px solid var(--ln);
  padding: 28px var(--medianiz);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--t2);
}

.lp-rodape p { margin: 0 }
.lp-rodape nav { display: flex; gap: 18px }
.lp-rodape a { color: var(--t2) }

/* ------------------------------------------------------------ corte 899 --- */
@media (max-width: 899px) {
  /* As fichas são posicionadas em absoluto e não cabem ao lado do texto:
     descem para baixo dele, e o herói vira uma coluna. */
  .lp-heroi { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 40px }
  .lp-heroi h1 { font-size: 34px }
  .lp-fichas { min-height: 240px; max-width: 420px }
  .lp-secao { padding: 48px var(--medianiz) }
  .lp-secao h2 { font-size: 25px }
}

@media (max-width: 559px) {
  .lp-topo { padding: 10px var(--medianiz) }
  /* Com pouco espaço, "Entrar" sai: quem já tem conta acha pelo botão
     principal, e quem não tem é o visitante que importa aqui. */
  .lp-topo__acoes .botao--fio { display: none }
  .lp-heroi h1 { font-size: 29px }
  .lp-heroi__acoes .botao { width: 100% }
  .lp-ficha--correcao { right: auto; left: 60px }
  .lp-ficha--placar { left: 0 }
}