/*
 * Site institucional da Movvify.
 *
 * CSS escrito à mão, sem framework e sem build: o site tem duas páginas de
 * texto, e um pipeline para isso seria mais peça de infra do que conteúdo.
 *
 * As cores são as do produto (`packages/ui/src/tokens.css`), **copiadas e não
 * importadas**. Importar traria a escala inteira em OKLCH, os papéis do shadcn
 * e o modo escuro para duas páginas que usam seis cores. O preço da cópia é
 * este: se a marca mudar de azul, este arquivo muda junto — e é por isso que o
 * valor está escrito com o nome do token ao lado.
 */
:root {
  --marca: #0a4cf0; /* --brand */
  --marca-escura: #0b3ec0; /* ~ --primary-600 */
  --marca-clara: #eef2fe; /* ~ --primary-50 */
  --tinta: #1b1e26; /* ~ --neutral-900 */
  --tinta-media: #4a5160; /* ~ --neutral-600 */
  --tinta-fraca: #6b7280; /* ~ --neutral-500 */
  --fundo: #ffffff;
  --fundo-suave: #f7f8fa; /* ~ --neutral-50 */
  --borda: #e4e7ec; /* ~ --neutral-200 */
  --raio: 12px;
  --coluna: 1080px;
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--marca);
}

.largura {
  width: 100%;
  max-width: var(--coluna);
  margin: 0 auto;
  padding: 0 24px;
}

/* ----- Topo -------------------------------------------------------------- */

.topo {
  border-bottom: 1px solid var(--borda);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topo .largura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}

/*
 * `width: auto` e `align-self` explícitos: num flex em coluna o navegador
 * estica o filho por padrão, e a logo já saiu esticada por isso numa tela do
 * produto. Aqui a linha é horizontal, mas a defesa custa uma linha.
 */
.marca-link img {
  display: block;
  height: 26px;
  width: auto;
  align-self: center;
}

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

.navegacao a {
  color: var(--tinta-media);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}

.navegacao a:hover {
  color: var(--tinta);
  background: var(--fundo-suave);
}

/* ----- Botões ------------------------------------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.botao.principal {
  background: var(--marca);
  color: #fff;
}

.botao.principal:hover {
  background: var(--marca-escura);
}

.botao.secundario {
  background: #fff;
  border-color: var(--borda);
  color: var(--tinta);
}

.botao.secundario:hover {
  border-color: var(--tinta-fraca);
}

.navegacao .botao {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

.navegacao .botao.principal {
  color: #fff;
}

/* ----- Herói ------------------------------------------------------------- */

.heroi {
  padding: 72px 0 64px;
  background:
    radial-gradient(60% 120% at 80% -10%, var(--marca-clara), transparent 70%),
    var(--fundo);
}

.heroi .largura {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.etiqueta {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--marca-clara);
  color: var(--marca-escura);
  font-size: 13px;
  font-weight: 600;
}

h1 {
  margin: 0 0 16px;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.chamada {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--tinta-media);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.nota {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--tinta-fraca);
}

/* ----- Ilustração do herói ----------------------------------------------- */

/*
 * Um esquema, não um screenshot. Enquanto não houver captura da tela real, uma
 * imagem inventada de produto seria promessa; isto se apresenta como o que é —
 * as três etapas, com a palavra "ilustração" embaixo.
 */
.esquema {
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(27, 30, 38, 0.35);
  padding: 8px;
}

.esquema-passo {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 10px;
}

.esquema-passo + .esquema-passo {
  border-top: 1px solid var(--borda);
  border-radius: 0;
}

.esquema-passo:last-child {
  background: var(--marca-clara);
  border-radius: 0 0 10px 10px;
}

.esquema-numero {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.esquema-passo strong {
  display: block;
  font-size: 15px;
}

/*
 * Classe, e não `.esquema-passo span`: aquele seletor tem especificidade maior
 * que `.esquema-numero` (classe + elemento contra classe só) e pintava o número
 * de cinza sobre o azul — visto na tela, não deduzido.
 */
.esquema-legenda {
  display: block;
  font-size: 14px;
  color: var(--tinta-media);
}

.legenda-esquema {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--tinta-fraca);
}

/* ----- Seções ------------------------------------------------------------ */

section {
  padding: 64px 0;
}

section.suave {
  background: var(--fundo-suave);
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}

h2 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
}

.subtitulo {
  margin: 0 0 32px;
  font-size: 17px;
  color: var(--tinta-media);
  max-width: 62ch;
}

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
}

.cartao h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 650;
}

.cartao p {
  margin: 0;
  color: var(--tinta-media);
  font-size: 15px;
}

.cartao ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--tinta-media);
  font-size: 15px;
}

.cartao li + li {
  margin-top: 4px;
}

.selo-breve {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  color: var(--tinta-fraca);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

/* ----- Passos ------------------------------------------------------------ */

.passos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: passo;
}

.passo {
  counter-increment: passo;
}

.passo::before {
  content: counter(passo);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--marca);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

.passo h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 650;
}

.passo p {
  margin: 0;
  color: var(--tinta-media);
  font-size: 15px;
}

/* ----- Chamada final ------------------------------------------------------ */

.fechamento {
  text-align: center;
}

.fechamento .subtitulo {
  margin-left: auto;
  margin-right: auto;
}

.fechamento .acoes {
  justify-content: center;
}

/* ----- Suporte ------------------------------------------------------------ */

.cabecalho-pagina {
  padding: 56px 0 8px;
}

.cabecalho-pagina h1 {
  font-size: 36px;
}

/*
 * A coluna do site tem 1080px, que é largura de layout, não de leitura: a 16px
 * ela dá quase 120 caracteres por linha, e o olho perde a linha seguinte. O
 * texto corrido do suporte fica em 72ch.
 */
.destaque,
.assunto {
  max-width: 72ch;
}

code {
  background: var(--fundo-suave);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}

.destaque {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--marca);
  border-radius: var(--raio);
  background: var(--fundo-suave);
  padding: 20px 24px;
}

.destaque p {
  margin: 0;
}

.destaque p + p {
  margin-top: 8px;
}

.email-grande {
  font-size: 20px;
  font-weight: 650;
}

.assunto h3 {
  margin: 28px 0 6px;
  font-size: 18px;
  font-weight: 650;
}

.assunto p,
.assunto ul {
  margin: 0 0 12px;
  color: var(--tinta-media);
}

.assunto ul {
  padding-left: 20px;
}

.assunto li + li {
  margin-top: 4px;
}

/* ----- Rodapé ------------------------------------------------------------- */

.rodape {
  border-top: 1px solid var(--borda);
  padding: 36px 0;
  background: var(--fundo-suave);
}

.rodape .largura {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
}

.rodape img {
  display: block;
  height: 22px;
  width: auto;
  margin-bottom: 12px;
}

.rodape p {
  margin: 0;
  font-size: 13px;
  color: var(--tinta-fraca);
  max-width: 52ch;
}

/*
 * A identificação em duas linhas, e não numa frase com separadores: quebrada
 * pela largura, ela começava a linha com um "·" solto.
 */
.rodape p + p {
  margin-top: 4px;
}

.rodape nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.rodape nav a {
  font-size: 14px;
  color: var(--tinta-media);
  text-decoration: none;
}

.rodape nav a:hover {
  color: var(--tinta);
  text-decoration: underline;
}

/* ----- Telas estreitas ---------------------------------------------------- */

@media (max-width: 860px) {
  .heroi .largura,
  .grade,
  .passos {
    grid-template-columns: minmax(0, 1fr);
  }

  .heroi {
    padding: 48px 0;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 24px;
  }

  /* Some o que é conveniência, não caminho: entrar e suporte ficam no rodapé. */
  .navegacao .so-largo {
    display: none;
  }
}