/* A pagina de apresentacao do BoraMeta.

   A cara e a do app: fundo verde-escuro, violeta na acao e verde no dinheiro,
   com as mesmas tres fontes. Quem chega aqui talvez nem tenha o app, entao a
   pagina nao carrega nada dele alem das imagens. */

:root {
  --noite: #0c1210;
  --noite-2: #141d19;
  --noite-3: #1b2621;
  --linha: #25332c;
  --linha-forte: #33463c;
  --claro: #e9f0eb;
  --nevoa: #b3c2b8;
  --apagado: #7c8d83;
  --verde: #34d17e;
  --uva: #7a5cf0;
  --uva-apertada: #6a4be0;
  --uva-clara: #b9a8fa;
  --fonte-titulo: 'Archivo', system-ui, -apple-system, sans-serif;
  --fonte-texto: 'Karla', system-ui, -apple-system, sans-serif;
  --fonte-numero: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(122, 92, 240, 0.16), transparent 60%),
    var(--noite);
  color: var(--claro);
  font: 17px/1.6 var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 56px 0;
  border-top: 1px solid var(--linha);
}

section.abertura {
  border-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  line-height: 1.04;
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.12;
  font-weight: 800;
  margin-bottom: 20px;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: 8px;
}

p {
  margin: 0 0 14px;
  max-width: 62ch;
  color: var(--nevoa);
}

a {
  color: var(--uva-clara);
}

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

.rotulo {
  font-family: var(--fonte-numero);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 12px;
}

.miudo {
  font-size: 0.88rem;
  color: var(--apagado);
}

.nota {
  font-size: 0.95rem;
  color: var(--apagado);
}

/* ---- o topo da pagina ---- */

.topo {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 68rem;
  margin: 0 auto;
  padding: 14px 20px;
  background: rgba(12, 18, 16, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.marca {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--claro);
  text-decoration: none;
}

.marca span {
  color: var(--uva);
}

.botao {
  display: inline-block;
  padding: 15px 26px;
  border-radius: 15px;
  background: var(--uva);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease;
}

.botao:hover {
  background: var(--uva-apertada);
}

.botao:active {
  transform: translateY(1px);
}

.botao.pequeno {
  padding: 10px 16px;
  font-size: 0.92rem;
  border-radius: 12px;
}

/* "Criar conta" e o selo da Google Play lado a lado. O selo é a imagem oficial,
   sem mudança, e a borda transparente dela já é o respiro que a Google pede. */
.chamadas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.final .chamadas {
  justify-content: center;
}

.selo-play {
  display: inline-block;
  line-height: 0;
}

.selo-play img {
  height: 64px;
  width: auto;
}

.topo-chamadas {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selo-play.pequeno img {
  height: 44px;
}

.topo .botao.pequeno {
  white-space: nowrap;
}

/* No celular, a marca, o selo e o "Criar conta" dividem uma linha só. */
@media (max-width: 420px) {
  .topo {
    gap: 10px;
    padding: 12px 16px;
  }

  .topo-chamadas {
    gap: 6px;
  }

  .selo-play.pequeno img {
    height: 38px;
  }

  .topo .botao.pequeno {
    padding: 9px 12px;
  }
}

/* O QR Code da loja aparece só no computador: no celular a pessoa já está no
   aparelho e toca no selo. Computador é o que tem mouse ou touchpad, em
   qualquer largura de janela, ou a tela larga, para o notebook de toque que
   se declara só tela de toque. O fundo branco com borda é a margem que a
   câmera precisa para ler o código. */
.qr-play {
  display: none;
}

@media (any-pointer: fine), (min-width: 1024px) {
  .qr-play {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
  }

  .qr-play img {
    width: 104px;
    height: 104px;
    border-radius: 8px;
    background: #fff;
  }

  .qr-play p {
    margin: 0;
    max-width: 22ch;
    color: var(--nevoa);
    font-size: 15px;
    line-height: 1.45;
  }

  .final .qr-play {
    justify-content: center;
  }
}

/* Os símbolos das redes ficam guardados num desenho sem tamanho, e cada
   botão usa o seu. Não pode ser display: none, porque aí o degradê do
   Instagram some junto. */
.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* A linha das redes na abertura, logo abaixo do QR da loja. Cada símbolo tem a
   cor da sua rede, então a borda é o que acende quando a pessoa passa o
   mouse, e o fundo fica escuro para o símbolo continuar legível. */
.redes {
  margin-top: 18px;
}

.redes p {
  margin: 0 0 10px;
  color: var(--nevoa);
  font-size: 15px;
  font-weight: 700;
}

.redes ul,
.redes-cartoes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.redes a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--noite-2);
  color: var(--claro);
  font-weight: 700;
  text-decoration: none;
}

.redes a:hover,
.redes a:focus-visible,
.redes-cartoes a:hover,
.redes-cartoes a:focus-visible {
  border-color: var(--uva);
  background: var(--noite-3);
}

/* No fim, um cartão por rede, com o QR para quem está no computador. O QR
   aparece em todo aparelho, e o cartão inteiro é o botão que abre o perfil. */
.redes-cartoes {
  margin-top: 40px;
}

.redes-cartoes h3 {
  margin: 0 0 16px;
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
}

.redes-cartoes ul {
  justify-content: center;
  gap: 12px;
}

.redes-cartoes li {
  flex: 1 1 140px;
  max-width: 180px;
}

.redes-cartoes a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 16px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 18px;
  background: var(--noite-2);
  color: var(--claro);
  text-decoration: none;
}

.rede-nome {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.05rem;
}

/* O QR da rede aparece em todo aparelho, e aqui ele não segue a regra do QR
   da loja. O da loja existe para quem está no computador abrir o app no
   celular; este serve para alguém mostrar a tela e o outro apontar a câmera,
   e no celular é justamente ele que está na mão. */
.rede-qr {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 8px;
  background: #fff;
}

.rede-perfil {
  color: var(--uva-clara);
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---- o celular desenhado em volta de cada tela ---- */

.celular {
  margin: 0;
  width: min(100%, 280px);
  aspect-ratio: 390 / 844;
  padding: 9px;
  border-radius: 40px;
  background: linear-gradient(160deg, #26332d, #111916);
  border: 1px solid var(--linha-forte);
  box-shadow:
    0 30px 60px -30px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  flex-shrink: 0;
}

.celular img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 31px;
  background: var(--noite-2);
}

/* ---- 1. a abertura ---- */

.abertura {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding-top: 32px;
}

.abertura .apoio {
  font-size: 1.2rem;
  color: var(--claro);
  margin: 20px 0 28px;
}

.celular.principal {
  justify-self: center;
  width: min(80%, 300px);
  transform: rotate(-2deg);
}

/* O vídeo da abertura só carrega quando a pessoa toca no play: são 5 MB, e
   quem só quer ler a página não paga por eles. */
.video-abertura {
  position: relative;
  justify-self: center;
  margin: 0;
  width: min(80%, 300px);
}

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--uva);
  color: #fff;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7);
}

.video-play:hover {
  background: var(--uva-apertada);
}

.video-play[hidden] {
  display: none;
}

.video-abertura video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  border: 1px solid var(--linha-forte);
  background: var(--noite-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

@media (min-width: 820px) {
  .abertura {
    grid-template-columns: 1.15fr 0.85fr;
    padding-top: 64px;
  }

  .celular.principal {
    width: 320px;
  }

  .video-abertura {
    width: 320px;
  }
}

/* ---- 2. a dor ---- */

.lista-dor {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
}

.lista-dor li {
  padding: 16px 18px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--noite-2);
  color: var(--claro);
}

.recado {
  padding: 22px;
  border-radius: 20px;
  background: #221a3d;
  border: 1px solid rgba(185, 168, 250, 0.25);
}

.recado .rotulo {
  color: var(--uva-clara);
}

.recado p:last-child {
  color: var(--claro);
  margin: 0;
}

@media (min-width: 820px) {
  .lista-dor {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 3. os passos ---- */

.passos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 40px;
}

.passos li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.passos li p {
  margin-left: auto;
  margin-right: auto;
}

.numero {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--uva);
  color: #fff;
  font-family: var(--fonte-numero);
  font-weight: 600;
}

@media (min-width: 820px) {
  .passos {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .passos .celular {
    width: 240px;
  }
}

/* ---- 4. as diferencas ---- */

.diferencas {
  display: grid;
  gap: 24px;
}

.diferencas article {
  padding: 24px;
  border-radius: 22px;
  background: var(--noite-2);
  border: 1px solid var(--linha);
}

.diferencas article p {
  margin-bottom: 0;
}

.com-imagem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.com-imagem .celular {
  width: min(100%, 240px);
}

@media (min-width: 820px) {
  .com-imagem {
    flex-direction: row;
    gap: 40px;
  }

  .com-imagem.invertido {
    flex-direction: row-reverse;
  }

  .com-imagem > div {
    flex: 1;
  }
}

/* ---- 5. as pesquisas ---- */

.pesquisas {
  display: grid;
  gap: 16px;
}

.pesquisas article {
  padding: 22px;
  border-left: 3px solid var(--verde);
  background: var(--noite-2);
  border-radius: 0 18px 18px 0;
}

.pesquisas .fonte {
  font-family: var(--fonte-numero);
  font-size: 0.8rem;
  color: var(--apagado);
  margin: 0;
}

@media (min-width: 820px) {
  .pesquisas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- 6. o que mais tem ---- */

.mais {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 32px;
}

.mais .celular {
  width: min(100%, 250px);
}

.mais h3 {
  margin: 28px 0 12px;
}

.mais .rotulo + h3 {
  margin-top: 0;
}

.lista-mais {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.lista-mais li {
  position: relative;
  padding-left: 22px;
  color: var(--nevoa);
}

.lista-mais li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: var(--verde);
}

.lista-mais strong,
.nao-faz strong {
  color: var(--claro);
}

@media (min-width: 820px) {
  .mais {
    flex-direction: row;
    align-items: flex-start;
    gap: 56px;
  }
}

/* ---- 7. o que nao faz ---- */

.nao-faz ul {
  margin: 0 0 16px;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: var(--nevoa);
}

/* ---- 8. as perguntas ---- */

.perguntas {
  display: grid;
  gap: 10px;
  max-width: 48rem;
}

.perguntas details {
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--noite-2);
  padding: 4px 18px;
}

.perguntas summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 700;
  color: var(--claro);
}

.perguntas details p {
  margin: 0 0 14px;
}

/* ---- 9. o final ---- */

.final {
  text-align: center;
  padding: 72px 0;
}

.final h2 {
  margin-bottom: 24px;
}

.referencias ul {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--apagado);
  display: grid;
  gap: 6px;
}

body > footer {
  border-top: 1px solid var(--linha);
  padding: 28px 20px 48px;
}

body > footer nav,
body > footer p {
  max-width: 68rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 0.92rem;
}

body > footer p {
  display: block;
  margin-top: 14px;
  color: var(--apagado);
}

/* ---- movimento leve ---- */

@media (prefers-reduced-motion: no-preference) {
  .celular {
    transition: transform 240ms ease;
  }

  .com-imagem:hover .celular,
  .passos li:hover .celular {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .celular.principal {
    transform: none;
  }
}

/* ---- a calculadora da meta ---- */

.calculadora .campos {
  display: grid;
  gap: 14px;
  margin: 24px 0;
  max-width: 34rem;
}

.calculadora label {
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  color: var(--nevoa);
}

.calculadora .dinheiro {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  background: var(--noite-2);
  font-family: var(--fonte-numero);
  color: var(--apagado);
}

.calculadora .dinheiro:focus-within {
  border-color: var(--uva);
}

.calculadora input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--claro);
  font: 600 1.05rem var(--fonte-numero);
}

.calculadora .resposta {
  max-width: 34rem;
  padding: 18px 20px;
  border: 1px solid var(--linha);
  border-radius: 15px;
  background: var(--noite-3);
}

.calculadora .resposta p {
  margin: 0;
}

.calculadora .resposta p + p {
  margin-top: 6px;
  font-family: var(--fonte-numero);
  font-weight: 600;
  color: var(--verde);
}

.calculadora .compartilhar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 34rem;
  margin-top: 14px;
}

.calculadora .compartilhar[hidden],
.calculadora .compartilhar [hidden] {
  display: none;
}

.calculadora .compartilhar p {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.95rem;
  color: var(--nevoa);
}

.calculadora .compartilhar a,
.calculadora .compartilhar button {
  padding: 11px 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--noite-2);
  color: var(--claro);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.calculadora .compartilhar a:hover,
.calculadora .compartilhar button:hover {
  border-color: var(--uva);
}

@media (min-width: 820px) {
  .calculadora .campos {
    grid-template-columns: 1fr 1fr;
    max-width: 44rem;
  }

  .calculadora .resposta,
  .calculadora .compartilhar {
    max-width: 44rem;
  }
}

/* ---- a conversa com o app ---- */

.selo-ia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #221a3d;
  border: 1px solid rgba(185, 168, 250, 0.35);
  color: var(--claro);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.selo-ia span {
  flex: none;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--uva);
  color: #fff;
  font-family: var(--fonte-numero);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.selo-ia:hover {
  border-color: var(--uva-clara);
}

section.ia {
  margin: 0 -20px;
  padding: 56px 20px;
  border-top: 0;
  background:
    radial-gradient(40rem 24rem at 10% 0%, rgba(122, 92, 240, 0.28), transparent 70%),
    #171229;
  border-radius: 0;
}

.ia .rotulo {
  color: var(--uva-clara);
}

.ia-apoio {
  max-width: 40rem;
  font-size: 1.1rem;
  color: var(--claro);
}

.conversa {
  display: grid;
  gap: 10px;
  margin: 28px 0;
  max-width: 30rem;
}

.conversa p {
  justify-self: end;
  max-width: 88%;
  margin: 0;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--uva);
  color: #fff;
  font-weight: 500;
}

.ia-regras {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}

.ia-regras article {
  padding: 20px;
  border-radius: 18px;
  background: rgba(12, 18, 16, 0.55);
  border: 1px solid rgba(185, 168, 250, 0.2);
}

.ia-regras h3 {
  margin-bottom: 8px;
}

.ia-regras p {
  margin-bottom: 0;
  color: var(--nevoa);
}

@media (min-width: 820px) {
  section.ia {
    margin: 0;
    padding: 56px 40px;
    border-radius: 28px;
  }

  .ia-regras {
    grid-template-columns: repeat(3, 1fr);
  }
}