/*
  Estilos da landing do Lurea.

  Os valores vieram todos da página aprovada, sem arredondar nem "melhorar"
  nenhum número. O que lá estava inline virou classe aqui.

  As sombras são sólidas, sem desfoque: é o mesmo volume de argila que o app
  usa nos botões e nos cartões, e é o que dá a impressão de peça física.
*/

:root {
  --fundo: #faf6ee;
  --fundo-alt: #f1ebdd;
  --texto: #241d31;
  --texto-2: #645d52;
  --texto-3: #847c6e;
  --roxo: #8b2bff;
  --roxo-escuro: #5f14b0;
  --roxo-foco: #430c7d;
  --dourado: #f2b632;
  --dourado-borda: #f7ca5f;
  --dourado-texto: #835a0a;
  --dourado-base: #b47c0e;
  --sombra-bege: #e0d9ca;
  --preto: #241d31;
  --preto-sombra: #0f0b17;
  --limite: 1120px;

  /*
    O respiro entre as seções.

    Antes cada seção tinha o seu número, e eles iam de 92 a 168 pixels. A
    diferença não se lê como intenção, se lê como descuido: o olho percebe
    que os intervalos não batem e a página parece mal montada.

    Aqui são dois valores e só. O grande fica para as duas seções que
    existem para respirar, o manifesto e a chamada final.
  */
  --respiro: 56px;
  --respiro-g: 78px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  font-family: 'Nunito', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--roxo-escuro); text-decoration: none; }
a:hover { color: var(--roxo-foco); }

.pagina { width: 100%; overflow-x: hidden; color: var(--texto); }
.limite { max-width: var(--limite); margin: 0 auto; padding: 0 24px; }

/* ── animações ────────────────────────────────────────────────────────
   As durações são propositalmente diferentes entre si, para os ícones
   nunca se moverem em sincronia. */

@keyframes lpFlutua { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes lpRespira { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes lpGira { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ── cabeçalho ──────────────────────────────────────────────────────── */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 246, 238, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(36, 29, 49, .08);
}
.cabecalho .limite {
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo-topo { height: 30px; width: auto; flex: none; }
.espaco { margin-right: auto; }

.botao-topo {
  background: var(--roxo);
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--roxo-escuro);
  display: inline-block;
}
.botao-topo:hover { color: #fff; }

/* ── títulos, usados na página inteira ──────────────────────────────── */

.chapeu {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--dourado-base);
  margin-bottom: 14px;
}
.chapeu-claro { color: var(--dourado-borda); }
.chapeu-dourado { color: #fbdd94; }

.titulo {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.titulo-menor { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.14; }

.paragrafo {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--texto-2);
  text-wrap: pretty;
}

.centro { text-align: center; }
.miolo { max-width: 620px; margin: 0 auto 44px; }

/* ── hero ───────────────────────────────────────────────────────────── */

.hero {
  max-width: var(--limite);
  margin: 0 auto;
  padding: 56px 24px 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}
.hero-texto { flex: 1 1 400px; min-width: 300px; }

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.hero h1 .roxo { color: var(--roxo); }

.hero p {
  margin: 0 0 18px;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.55;
  color: var(--texto-2);
  max-width: 500px;
  text-wrap: pretty;
}
.hero p strong { color: var(--texto); font-weight: 800; }

.lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.loja {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--preto);
  color: #fff;
  border-radius: 16px;
  padding: 13px 22px 13px 18px;
  box-shadow: 0 6px 0 var(--preto-sombra);
}
.loja:hover { color: #fff; }
.loja-icone { width: 26px; height: 26px; flex: none; background-size: contain; background-position: center; background-repeat: no-repeat; }
.loja-apple { background-image: url(assets/ic-apple.png); filter: brightness(0) invert(1); }
.loja-google { background-image: url(assets/ic-google.png); }
.loja-linhas { line-height: 1.1; }
.loja-acima { font-size: 10.5px; font-weight: 600; opacity: .72; }
.loja-nome { font-size: 17px; font-weight: 800; }

/* o botão do topo, no lugar onde ficavam os dois botões de loja */
.hero-botao {
  display: inline-block;
  background: var(--roxo);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  padding: 16px 30px;
  border-radius: 16px;
  box-shadow: 0 6px 0 var(--roxo-escuro);
  margin-bottom: 14px;
}
.hero-botao:hover { color: #fff; }

/*
  Enquanto o app não saiu, o selo da loja é aviso e não botão: fica mais
  apagado, sem a sombra que convida ao toque e sem cursor de mão.
*/
.loja-espera {
  background: #33294a;
  box-shadow: none;
  cursor: default;
  opacity: .9;
}

.gratis { margin: 0; font-size: 13.5px; font-weight: 700; color: #2f7a24; }

/* as três provas logo abaixo do botão, onde a dúvida aparece */
.provas {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.provas li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--texto-3);
}
.provas li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--dourado);
  flex: none;
}

.hero-celular {
  flex: 0 1 330px;
  min-width: 270px;
  display: flex;
  justify-content: center;
  position: relative;
}
.brilho {
  position: absolute;
  width: 330px;
  height: 330px;
  background: radial-gradient(circle, #e6ceff 0%, rgba(230, 206, 255, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.moldura {
  position: relative;
  padding: 9px;
  background: var(--preto);
  border-radius: 46px;
  box-shadow: 0 26px 50px -18px rgba(58, 35, 88, .45);
  animation: lpFlutua 4.2s ease-in-out infinite alternate;
}
.moldura img { display: block; width: 300px; height: auto; border-radius: 38px; }

/* ── faixas ─────────────────────────────────────────────────────────── */

.faixa-escura { background: var(--preto); color: #fff; padding: 72px 0; }
.faixa-escura .titulo { color: #fff; }
.faixa-escura .paragrafo { color: rgba(255, 255, 255, .75); }

.faixa-bege { background: var(--fundo-alt); padding: 74px 0; }

.faixa-roxa { background: var(--roxo); padding: 74px 0; color: #fff; }
.faixa-roxa .titulo { color: #fff; }

/* ── curiosidades ───────────────────────────────────────────────────── */

.curiosidades { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.curiosidade {
  flex: 1 1 186px;
  max-width: 250px;
  background: rgba(255, 255, 255, .07);
  border-radius: 22px;
  padding: 24px 22px;
}
.curiosidade .numero {
  font-size: 34px;
  font-weight: 900;
  color: var(--dourado-borda);
  line-height: 1;
  margin-bottom: 12px;
}
.curiosidade .frase {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.32;
  text-wrap: pretty;
}
.curiosidade .onde {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
  text-wrap: pretty;
}

/* ── moldura de celular usada fora do topo ──────────────────────────── */

.tela-moldura {
  padding: 8px;
  background: var(--preto);
  border-radius: 40px;
  box-shadow: 0 16px 32px -14px rgba(58, 35, 88, .4);
}
.tela-moldura img { display: block; width: 246px; height: auto; border-radius: 33px; }

/* ── mentores ───────────────────────────────────────────────────────── */

.mentores-bloco {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 56px;
}
.mentores-texto { flex: 1 1 420px; min-width: 300px; }
.mentores-texto .paragrafo { margin-bottom: 16px; max-width: 760px; }
.mentores-texto .destaque {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--dourado-texto);
  font-weight: 700;
  max-width: 760px;
  text-wrap: pretty;
}
/*
  A tela da escolha do mentor. wrap-reverse no bloco faz ela subir para
  cima do texto quando as duas colunas não cabem lado a lado, que é o que
  se quer no celular: primeiro se vê a escolha, depois se lê sobre ela.
*/
.mentores-celular { flex: none; margin: 0 auto; }
.mentores-celular .moldura img { width: 268px; }

.mentores { display: flex; flex-wrap: wrap; gap: 10px; }
.mentor {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--fundo);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  box-shadow: 0 4px 0 var(--sombra-bege);
}
.mentor-foto {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 999px;
  background-color: #fff;
  background-position: center top;
  background-size: 112% auto;
  background-repeat: no-repeat;
  animation: lpRespira 2.9s ease-in-out infinite alternate;
}
.mentor-nomes { line-height: 1.15; }
.mentor-nome { font-size: 14px; font-weight: 800; }

/* o ritmo de cada um, para nunca respirarem juntos */
.mentor:nth-child(1) .mentor-foto { animation-duration: 2.90s; animation-delay: 0.00s; }
.mentor:nth-child(2) .mentor-foto { animation-duration: 3.24s; animation-delay: 0.29s; }
.mentor:nth-child(3) .mentor-foto { animation-duration: 3.58s; animation-delay: 0.58s; }
.mentor:nth-child(4) .mentor-foto { animation-duration: 3.92s; animation-delay: 0.87s; }
.mentor:nth-child(5) .mentor-foto { animation-duration: 4.26s; animation-delay: 1.16s; }
.mentor:nth-child(6) .mentor-foto { animation-duration: 2.90s; animation-delay: 1.45s; }
.mentor:nth-child(7) .mentor-foto { animation-duration: 3.24s; animation-delay: 1.74s; }
.mentor:nth-child(8) .mentor-foto { animation-duration: 3.58s; animation-delay: 0.00s; }

/* ── pilares ────────────────────────────────────────────────────────── */

.secao-pilares { max-width: var(--limite); margin: 0 auto; padding: 78px 24px; }
.blocos { display: flex; flex-direction: column; gap: 24px; margin-top: 44px; }
.bloco {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
/* o segundo bloco espelha, e é isso que dá o zigue-zague */
.bloco:nth-child(even) { flex-direction: row-reverse; }

.bloco-arte {
  flex: none;
  width: 212px;
  height: 212px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle, #f1e4ff 0%, rgba(241, 228, 255, 0) 70%);
}
.bloco-arte::after {
  content: '';
  width: 142px;
  height: 142px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.arte-trilha::after { background-image: url(assets/no-trilha.png); animation: lpFlutua 3.1s ease-in-out infinite alternate; }
.arte-lampada::after { background-image: url(assets/ic-lampada.png); animation: lpRespira 2.9s ease-in-out infinite alternate; }
.arte-bau::after { background-image: url(assets/ic-bau.png); animation: lpFlutua 2.6s ease-in-out infinite alternate; }

/* largura fixa para as três linhas começarem e terminarem no mesmo lugar */
.bloco-texto { flex: 0 0 470px; }
.bloco-texto h3 {
  margin: 0 0 12px;
  font-size: clamp(23px, 2.8vw, 30px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.012em;
}
.bloco-texto p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }

/*
  Empilhado, row-reverse inverteria a ordem só nos blocos pares e a arte
  cairia embaixo do texto em uns e em cima em outros. Coluna em todos.
*/
@media (max-width: 800px) {
  .bloco, .bloco:nth-child(even) { flex-direction: column; gap: 18px; text-align: center; }
  .bloco-arte { width: 200px; height: 200px; }
  .bloco-arte::after { width: 120px; height: 120px; }
  /*
    Em coluna, o eixo principal passa a ser a vertical, e os 470px do
    flex-basis viram ALTURA: cada bloco esticava para 470px e abria um
    buraco embaixo do texto. Aqui a altura volta a ser a do conteúdo.
  */
  .bloco-texto { flex: 0 0 auto; max-width: 470px; }
}

/* ── a fita dos livros ──────────────────────────────────────────────── */

.secao-livros { max-width: var(--limite); margin: 0 auto; padding: 20px 24px 72px; }
.livro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 999px;
}
.livro-aberto {
  background: var(--roxo);
  color: #fff;
  box-shadow: 0 4px 0 var(--roxo-escuro);
}
/* o ponto dourado marca o que já dá para abrir hoje */
.livro-aberto::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dourado);
}
.livro-preso {
  background: #fff;
  color: var(--texto-3);
  box-shadow: 0 4px 0 var(--sombra-bege);
}
.livro-preso::before {
  content: '';
  width: 13px;
  height: 13px;
  flex: none;
  opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23645d52' stroke-width='2.6' stroke-linecap='round'%3E%3Crect x='4' y='10.5' width='16' height='10.5' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.quem-fecho {
  margin: 26px auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--roxo-escuro);
  text-wrap: pretty;
}

/* ── garantias ──────────────────────────────────────────────────────── */

.roxa-bloco { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.roxa-texto { flex: 1 1 420px; min-width: 300px; }
.roxa-texto > p {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
  max-width: 780px;
  text-wrap: pretty;
}
/* Jesus grande, flutuando, com um brilho atrás para ele não ficar colado
   no roxo chapado da faixa. */
.roxa-jesus {
  position: relative;
  flex: none;
  width: 300px;
  height: 348px;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.roxa-jesus::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 66%);
}
.roxa-jesus::after {
  content: '';
  position: relative;
  width: 262px;
  height: 348px;
  background: url(assets/mentor-jesus.png) center/contain no-repeat;
  filter: drop-shadow(0 20px 26px rgba(28, 8, 56, .45));
  animation: lpFlutua 4s ease-in-out infinite alternate;
}
@media (max-width: 640px) {
  .roxa-jesus { width: 240px; height: 280px; }
  .roxa-jesus::after { width: 210px; height: 280px; }
}

.garantias { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.garantia {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 14px 16px;
}
.marca-dourada {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background: var(--dourado);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.garantia span { font-size: 15px; font-weight: 600; line-height: 1.45; }

/* ── cuidado com o texto ────────────────────────────────────────────── */

.secao-cuidado { max-width: var(--limite); margin: 0 auto; padding: 78px 24px 20px; }
.cuidado-cartao {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  background: #fff;
  border-radius: 32px;
  padding: 38px 34px;
  box-shadow: 0 8px 0 var(--sombra-bege),
    inset 0 -4px 8px rgba(60, 40, 20, .06),
    inset 0 4px 8px rgba(255, 255, 255, .9);
}
.cuidado-texto { flex: 1 1 420px; min-width: 280px; }
.cuidado-texto p { margin: 0 0 14px; font-size: 16px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }
.cuidado-texto p:last-child { margin-bottom: 0; }
.cuidados { flex: 1 1 280px; min-width: 250px; display: flex; flex-direction: column; gap: 10px; }
.cuidado {
  background: var(--fundo);
  border-radius: 16px;
  padding: 14px 16px;
}
.cuidado span { font-size: 14.5px; font-weight: 700; line-height: 1.42; color: #47423a; }

/* ── passos ─────────────────────────────────────────────────────────── */

.secao-passos { max-width: var(--limite); margin: 0 auto; padding: 58px 24px 78px; }
.passos { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.passo { flex: 1 1 176px; max-width: 260px; text-align: center; }
.passo-numero {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--roxo);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 5px 0 var(--roxo-escuro);
}
.passo h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.passo p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }

/* ── perguntas ──────────────────────────────────────────────────────── */

.secao-faq { background: var(--fundo-alt); padding: 70px 0; }
.faq-limite { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.faq-lista { display: flex; flex-direction: column; gap: 12px; }
.pergunta {
  background: var(--fundo);
  border-radius: 20px;
  padding: 4px 22px;
  box-shadow: 0 5px 0 var(--sombra-bege);
}
/*
  A pergunta é um <details>. Fechada, ela é só um título tocável; aberta,
  mostra a resposta. Oito respostas abertas ao mesmo tempo viravam parede
  de texto no fim da página, onde a pessoa já está cansada.
*/
.pergunta summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--texto);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  margin-left: auto;
  border-right: 2.5px solid var(--roxo);
  border-bottom: 2.5px solid var(--roxo);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.pergunta[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pergunta p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--texto-2); text-wrap: pretty; }

/* ── chamada final ──────────────────────────────────────────────────── */

.final { max-width: var(--limite); margin: 0 auto; padding: 84px 24px 70px; text-align: center; }
.final-lumi {
  width: 132px;
  height: 132px;
  margin: 0 auto 24px;
  background: url(assets/lumi-festa.png) center/contain no-repeat;
  animation: lpFlutua 2.8s ease-in-out infinite alternate;
}
.final h2 {
  margin: 0 auto 16px;
  max-width: 620px;
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.014em;
  text-wrap: balance;
}
.final > p {
  margin: 0 auto 32px;
  max-width: 500px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--texto-2);
  text-wrap: pretty;
}
.final .lojas { justify-content: center; margin-bottom: 26px; }
.final .gratis { font-size: 14px; }

/* ── a lista de espera ──────────────────────────────────────────────── */

.espera { max-width: 470px; margin: 0 auto 18px; }
.espera-rotulo {
  display: block;
  margin-bottom: 12px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--texto);
}
.espera-linha { display: flex; gap: 10px; }
.espera-campo {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 15px 18px;
  border: 2px solid var(--sombra-bege);
  border-radius: 16px;
  background: #fff;
  color: var(--texto);
}
.espera-campo::placeholder { color: var(--texto-3); }
.espera-campo:focus { outline: none; border-color: var(--roxo); }
.espera-botao {
  flex: none;
  font: inherit;
  font-weight: 800;
  font-size: 16px;
  color: #fff;
  background: var(--roxo);
  border: 0;
  border-radius: 16px;
  padding: 15px 24px;
  box-shadow: 0 5px 0 var(--roxo-escuro);
  cursor: pointer;
}
.espera-botao:hover { filter: brightness(1.06); }
.espera-botao:disabled { opacity: .6; cursor: default; box-shadow: none; }

.espera-recado { margin: 12px 0 0; font-size: 14px; font-weight: 700; color: var(--texto-2); min-height: 1em; }
.espera-erro .espera-campo { border-color: #d8484f; }
.espera-erro .espera-recado { color: #b5343b; }
.espera-pronto .espera-linha { display: none; }
.espera-pronto .espera-recado { color: #2f7a24; font-size: 16px; }

/* no celular o campo e o botão não cabem lado a lado */
@media (max-width: 480px) {
  .espera-linha { flex-direction: column; }
  .espera-botao { width: 100%; }
}

/* ── rodapé ─────────────────────────────────────────────────────────── */

.rodape { border-top: 1px solid rgba(36, 29, 49, .1); padding: 30px 24px 44px; }
.rodape-limite {
  max-width: var(--limite);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.logo-rodape { height: 24px; width: auto; flex: none; }
.rodape-dominio { font-size: 13px; color: var(--texto-3); margin-right: auto; }
.rodape-links { display: flex; gap: 20px; font-size: 13px; font-weight: 700; }

/* ── páginas de texto: privacidade e termos ─────────────────────────── */

.texto { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.texto h1 { font-size: clamp(28px, 3.8vw, 38px); font-weight: 900; line-height: 1.14; margin: 0 0 8px; letter-spacing: -.012em; }
.texto .data { font-size: 14px; color: var(--texto-3); font-weight: 700; margin: 0 0 32px; }
.texto h2 { font-size: 20px; font-weight: 800; margin: 34px 0 12px; line-height: 1.25; }
.texto h3 { font-size: 16px; font-weight: 800; margin: 22px 0 8px; }
.texto p, .texto li { font-size: 16px; line-height: 1.6; color: var(--texto-2); }
.texto p { margin: 0 0 14px; }
.texto ul { margin: 0 0 16px; padding-left: 22px; }
.texto li { margin-bottom: 7px; }
.texto strong { color: var(--texto); font-weight: 800; }

.texto table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.texto th, .texto td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(36, 29, 49, .1); color: var(--texto-2); }
.texto th { font-weight: 800; color: var(--texto); }

.resumo {
  background: #f4e8ff;
  border-radius: 20px;
  padding: 20px 22px;
  margin: 0 0 28px;
  box-shadow: 0 5px 0 #d0a8ff;
}
.resumo p { margin: 0; color: #3d0c73; font-weight: 700; }

.preencher {
  background: #fdeeec;
  border: 2px dashed #f0b3aa;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 28px;
}
.preencher p { margin: 0; color: #8b3227; font-weight: 700; font-size: 14.5px; }

.voltar { display: inline-block; font-size: 14px; font-weight: 800; margin-bottom: 28px; }

/* ── a página de endereço que não existe ────────────────────────────── */

.erro { min-height: 66vh; display: grid; place-items: center; text-align: center; padding: 60px 24px; }
.erro-lumi {
  width: 150px;
  height: 150px;
  margin: 0 auto 22px;
  background: url(assets/lumi-idle.png) center/contain no-repeat;
  animation: lpFlutua 3.4s ease-in-out infinite alternate;
}
.erro h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 36px); font-weight: 900; line-height: 1.15; }
.erro p { margin: 0 auto 26px; max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--texto-2); }

/* ── no celular ─────────────────────────────────────────────────────── */

/*
  No computador as seções têm duas colunas e o espaço em volta faz sentido:
  ele separa o que está lado a lado. No celular tudo vira uma coluna só, e
  aí o mesmo espaço vira rolagem à toa. Aqui ele encolhe.
*/
@media (max-width: 640px) {
  :root { --respiro: 38px; --respiro-g: 50px; }
  .abertura { padding: 12px 0 2px; }
  .secao-livros { padding-top: 10px; }

  /*
    Os blocos alternados, que empilhados ficavam longe uns dos outros. O
    círculo do brilho é maior que a arte de propósito, mas essa sobra vira
    espaço vazio quando um bloco fica em cima do outro: aqui ele encosta.
  */
  .blocos { gap: 8px; margin-top: 18px; }
  .bloco, .bloco:nth-child(even) { gap: 2px; }
  .bloco-arte { width: 126px; height: 126px; }
  .bloco-arte::after { width: 106px; height: 106px; }
  .bloco-texto h3 { margin-bottom: 8px; }

  /*
    O celular do topo encolhe no celular de verdade. Em 390px de largura um
    aparelho de 300px come a tela inteira e empurra tudo para baixo.
  */
  .iphone { width: 262px; padding: 9px; border-radius: 46px; }

  /*
    Os dois aparelhos do "por dentro do jogo": lado a lado eles dão 428px e
    a tela tem 390, então os dois saíam cortados nas bordas. Aqui a dupla
    inteira encolhe junto, mantendo a sobreposição, e cabe.
  */
  .gameplay-telas { transform: scale(.82); transform-origin: center; margin: -34px 0; }
  .iphone-vidro { border-radius: 38px; }
  .iphone-tela { border-radius: 34px; }
  .demo { margin-top: 12px; }

  /* e o resto do que empilha */
  .quem-fecho { margin-top: 20px; }
  .quatro { gap: 12px; margin-top: 28px; }
  .quatro li { padding: 18px 20px; }
  .mentores-bloco { gap: 28px; }
  .roxa-bloco { gap: 28px; }
  .gameplay-bloco { gap: 30px; }
  .misterios { gap: 12px; margin-top: 26px; }
  .fita { margin-top: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════
   As peças da reestruturação.

   Tudo daqui para baixo usa os mesmos tokens de cima: o creme, o roxo, o
   dourado e a sombra sólida de argila. Nenhuma cor nova foi inventada.
   ══════════════════════════════════════════════════════════════════════ */

/* ── pular para o conteúdo, para quem navega no teclado ─────────────── */

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--roxo);
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 0 0 14px 0;
}
.pular:focus { left: 0; color: #fff; }

/* ── a arte de abertura ─────────────────────────────────────────────── */

.abertura { padding: 22px 0 6px; }
.abertura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  box-shadow: 0 7px 0 var(--sombra-bege);
}
@media (max-width: 640px) {
  .abertura { padding: 14px 0 2px; }
  .abertura img { border-radius: 18px; }
}

/* ── a moldura de iPhone ────────────────────────────────────────────── */

/*
  Um iPhone de verdade, desenhado em CSS: o corpo em titânio, a borda preta
  da tela, a ilha dinâmica, os botões laterais e a barra de status com hora,
  sinal, wi-fi e bateria.

  A moldura antiga era só um retângulo preto com cantos redondos, e ficava
  parecendo caixa de tablet. Aqui a proporção é a do iPhone 15 Pro, 19.5:9.
*/
.iphone {
  position: relative;
  width: 300px;
  padding: 11px;
  border-radius: 54px;
  background: linear-gradient(150deg, #d7d3cc 0%, #8e8a84 22%, #f2efea 48%, #7c7873 72%, #cbc7c0 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .22),
    0 30px 60px -22px rgba(58, 35, 88, .55);
}
/* o vidro, que é a borda preta entre o titânio e a tela */
.iphone-vidro {
  position: relative;
  border-radius: 44px;
  background: #050505;
  padding: 4px;
  overflow: hidden;
}
.iphone-tela {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  background: var(--fundo);
  display: block;
}
.iphone-tela img,
.iphone-tela video { display: block; width: 100%; height: auto; }

/* a ilha dinâmica */
.iphone-ilha {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 25px;
  border-radius: 999px;
  background: #050505;
  z-index: 3;
}
.iphone-ilha::after {
  content: '';
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #14121a;
  box-shadow: inset 0 0 0 1px rgba(90, 130, 160, .5);
}

/* a barra de status: hora à esquerda, sinal, wi-fi e bateria à direita */
.iphone-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  padding: 13px 26px 0;
  display: flex;
  align-items: center;
  z-index: 2;
  color: var(--texto);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  pointer-events: none;
}
.iphone-hora { margin-right: auto; }
.iphone-icones { display: flex; align-items: flex-end; gap: 5px; }

/* o sinal: quatro barrinhas subindo */
.iphone-sinal { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.iphone-sinal i { width: 3px; background: currentColor; border-radius: 1px; display: block; }
.iphone-sinal i:nth-child(1) { height: 4px; }
.iphone-sinal i:nth-child(2) { height: 6px; }
.iphone-sinal i:nth-child(3) { height: 8.5px; }
.iphone-sinal i:nth-child(4) { height: 11px; }

/* o wi-fi: três arcos, feitos com bordas de círculos cortados */
.iphone-wifi { width: 15px; height: 11px; position: relative; }
.iphone-wifi span {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 2px solid currentColor;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 999px;
}
.iphone-wifi span:nth-child(1) { width: 15px; height: 15px; }
.iphone-wifi span:nth-child(2) { width: 9px; height: 9px; }
.iphone-wifi span:nth-child(3) {
  width: 3.5px;
  height: 3.5px;
  border: 0;
  background: currentColor;
  bottom: 0;
}

/* a bateria */
.iphone-bateria {
  width: 24px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 3.5px;
  padding: 1.5px;
  position: relative;
  opacity: .95;
}
.iphone-bateria::after {
  content: '';
  position: absolute;
  right: -3.5px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 4px;
  border-radius: 0 2px 2px 0;
  background: currentColor;
  opacity: .5;
}
.iphone-bateria i { display: block; height: 100%; width: 78%; border-radius: 1.5px; background: currentColor; }

/* a barrinha de home, embaixo */
.iphone-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 5px;
  border-radius: 999px;
  background: rgba(36, 29, 49, .32);
  z-index: 3;
}

/* os botões laterais, em titânio */
.iphone::before,
.iphone::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, #b8b4ad, #86827c);
  left: -2px;
}
.iphone::before { top: 112px; height: 30px; }
.iphone::after { top: 156px; height: 56px; }

/* ── a gravação de verdade dentro do celular do topo ─────────────────── */

/*
  O vídeo é o app rodando, gravado tocando na tela: o personagem sendo
  montado, a trilha rolando e duas perguntas respondidas, uma certa e uma
  errada. A margem no topo empurra o app para baixo da barra de status,
  como o recorte da tela faria no aparelho de verdade.
*/
.demo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 14px;
  background: var(--fundo);
}

/* ── você aprende jogando ───────────────────────────────────────────── */

.secao-aprende { padding: 76px 0 66px; }
.quatro {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}
.quatro li {
  background: #fff;
  border-radius: 20px;
  padding: 22px 20px;
  box-shadow: 0 5px 0 var(--sombra-bege);
}
.quatro-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--roxo);
  color: #fff;
  font-weight: 900;
  font-size: 13.5px;
  margin-bottom: 12px;
}
.quatro h3 { margin: 0 0 5px; font-size: 18px; font-weight: 900; }
.quatro p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }

/* a frase que fecha a seção, que é a ideia central do produto */
.manifesto-curto {
  margin: 34px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: clamp(17px, 2.4vw, 21px);
  line-height: 1.45;
  color: var(--texto-2);
}
.manifesto-curto strong { color: var(--texto); font-weight: 900; }
.manifesto-curto.alinhado { margin-left: 0; margin-right: 0; text-align: left; }

/* ── a fita dos livros ──────────────────────────────────────────────── */

/*
  A fita sai da tela pela direita. A máscara corta os últimos livros no
  meio, e é isso que faz a jornada parecer maior do que a página.
*/
.fita {
  margin: 34px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}
.fita::-webkit-scrollbar { height: 0; }
.fita-linha { display: flex; gap: 9px; width: max-content; padding-right: 60px; }
.fita-fecho {
  margin: 26px 0 0;
  text-align: center;
  font-size: clamp(18px, 2.6vw, 23px);
  color: var(--texto-2);
}
.fita-fecho strong { color: var(--texto); font-weight: 900; }

/* ── a dor ──────────────────────────────────────────────────────────── */

.secao-dor { padding: 66px 0 60px; }
.destaque-dor {
  margin-top: 18px;
  font-weight: 800;
  color: var(--texto);
  font-size: 18px;
}

.e-so-o-comeco {
  margin: 26px 0 0;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--dourado-borda);
}

/* ── manifesto ──────────────────────────────────────────────────────── */

.secao-manifesto { padding: 84px 0; }

/* ── gameplay ───────────────────────────────────────────────────────── */

.secao-gameplay { padding: 70px 0; background: var(--fundo-alt); }
.gameplay-bloco {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-top: 38px;
}
.gameplay-lado { flex: 1 1 400px; max-width: 470px; }

.atividades { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.atividades li {
  background: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--texto);
  box-shadow: 0 4px 0 var(--sombra-bege);
}

/* resposta → feedback → explicação → progresso */
.fluxo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; }
.fluxo span { font-size: 12.5px; font-weight: 800; color: var(--roxo-escuro); letter-spacing: .04em; }
.fluxo span + span::before { content: '→'; margin-right: 8px; color: var(--texto-3); }

.botao-linha {
  display: inline-block;
  margin-top: 22px;
  border: 2.5px solid var(--roxo);
  color: var(--roxo-escuro);
  font-weight: 800;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 16px;
}
.botao-linha:hover { background: #f4e8ff; }

/*
  Dois celulares, um atrás do outro. O de trás precisa de z-index menor E de
  seletor tão específico quanto o da frente: com a mesma especificidade,
  quem vem depois no HTML ganha, e o de trás cobria o da frente.
*/
.gameplay-telas { flex: none; position: relative; display: flex; align-items: center; }
.gameplay-telas .tela-moldura { position: relative; z-index: 2; }
.gameplay-telas .tela-atras {
  margin-left: -96px;
  z-index: 1;
  transform: rotate(6deg) scale(.86);
  transform-origin: left center;
}

/* ── o laço do jogo ─────────────────────────────────────────────────── */

.secao-laco { padding: 70px 0; }
.laco {
  list-style: none;
  counter-reset: passo;
  margin: 34px auto 0;
  padding: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.laco li {
  counter-increment: passo;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--texto-2);
  box-shadow: 0 4px 0 var(--sombra-bege);
}
.laco li::before {
  content: counter(passo);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f4e8ff;
  color: var(--roxo-escuro);
  font-size: 12.5px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.laco strong { color: var(--roxo-escuro); font-weight: 900; }

/* ── o mistério ─────────────────────────────────────────────────────── */

.secao-misterio { padding: 70px 0; background: var(--fundo-alt); }
.misterios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 36px 0 30px;
}
.misterio {
  background: #fff;
  border-radius: 20px;
  padding: 22px 16px;
  text-align: center;
  box-shadow: 0 5px 0 var(--sombra-bege);
}
.misterio span { display: block; margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--texto-2); }

/*
  As artes ficam sem cor e escurecidas de propósito. O que se mostra aqui é
  que existe algo, não o que é.
*/
.misterio-arte {
  width: 68px;
  height: 68px;
  margin: 0 auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1) brightness(.85);
  opacity: .55;
}
/*
  O baú e a trilha reaproveitam as artes dos blocos, mas lá elas moram no
  ::after. Aqui vão direto no elemento, senão o cartão fica vazio.
*/
.misterio .arte-bau { background-image: url(assets/ic-bau.png); }
.misterio .arte-trilha { background-image: url(assets/no-trilha.png); }
.arte-mentor { background-image: url(assets/mentor-davi.png); }
.arte-medalha { background-image: url(assets/ic-medalhas.png); }

/* ── mentores: o que não se mostra ──────────────────────────────────── */

.mentor-oculto { border: 2px dashed var(--sombra-bege); background: transparent; box-shadow: none; }
.mentor-mais {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 999px;
  background: var(--fundo-alt);
  color: var(--texto-3);
  font-size: 20px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.mentor-oculto .mentor-nome { color: var(--texto-3); font-weight: 700; }

/* ── faixa roxa ─────────────────────────────────────────────────────── */

.roxa-forte {
  font-size: clamp(17px, 2.3vw, 20px) !important;
  font-weight: 900 !important;
  color: #fff !important;
  line-height: 1.35 !important;
  margin-bottom: 16px !important;
}

/* ── como o aprendizado funciona ────────────────────────────────────── */

.cuidado-nome {
  font-size: 15px;
  font-weight: 900;
  color: var(--roxo-escuro);
  margin-bottom: 3px;
}

/* ── prova social, preparada e desligada ────────────────────────────── */

.secao-prova { padding: 70px 0; }
.depoimentos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

/* ── a chamada fixa do celular ──────────────────────────────────────── */

.cta-fixo {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  background: var(--roxo);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--roxo-escuro), 0 12px 28px -10px rgba(58, 35, 88, .5);
}
.cta-fixo:hover { color: #fff; }
.cta-fixo[hidden] { display: none; }

/* no computador a chamada do topo e a do fim já bastam */
@media (min-width: 861px) { .cta-fixo { display: none; } }

/* ── o foco de quem navega pelo teclado ─────────────────────────────── */

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--roxo);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── quem pediu menos movimento ─────────────────────────────────────── */

/* ── o mesmo respiro em todas as seções ─────────────────────────────── */

/*
  Uma regra só, no fim do arquivo, depois de todas as outras: com a mesma
  especificidade, quem vem por último ganha, e a página inteira passa a
  respirar igual.

  Antes cada seção trazia o número que tinha herdado da versão anterior, e
  eles iam de 92 a 168 pixels. Essa diferença não se lê como intenção, se lê
  como descuido. Agora quem quiser mudar o ritmo da página mexe em dois
  valores, lá no topo do arquivo.
*/
.hero,
.secao-aprende,
.secao-livros,
.secao-dor,
.faixa-escura,
.secao-gameplay,
.secao-laco,
.secao-misterio,
.faixa-bege,
.secao-pilares,
.faixa-roxa,
.secao-cuidado,
.secao-passos,
.secao-faq {
  padding-top: var(--respiro);
  padding-bottom: var(--respiro);
}

/* as duas que existem justamente para respirar */
.secao-manifesto,
.final {
  padding-top: var(--respiro-g);
  padding-bottom: var(--respiro-g);
}

/*
  As exceções, e o motivo de cada uma.

  A abertura cola no cabeçalho: é arte, não texto, e espaço acima dela só
  atrasa a primeira impressão. A fita de livros vem logo depois de um hero
  que já tem respiro embaixo. E o cartão do cuidado tem margem própria.
*/
.abertura { padding: 18px 0 4px; }
.secao-livros { padding-top: 14px; }
.secao-cuidado { padding-bottom: 16px; }

@media (max-width: 640px) {
  .abertura { padding: 12px 0 2px; }
  .secao-livros { padding-top: 10px; }
}

/*
  Quem pediu menos movimento não recebe o vídeo tocando sozinho: ele para na
  capa, que já mostra a trilha, e volta a andar se a pessoa der o play.
*/
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .fita { -webkit-mask-image: none; mask-image: none; }
}