/* Pagina de entrada da demonstracao. Valores so de token. */

.entrada {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: var(--espaco-12) var(--espaco-6);
}

.entrada__conteudo {
  width: 100%;
  max-width: 560px;
}

.entrada__marca {
  display: block;
  width: min(300px, 78vw);
  height: auto;
  margin: 0 0 var(--espaco-12);
}

.entrada__titulo {
  font-size: var(--texto-titulo1);
  margin-bottom: var(--espaco-8);
}

.entrada__opcoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espaco-4);
}

.opcao {
  display: flex;
  align-items: center;
  gap: var(--espaco-4);
  min-height: 112px;
  padding: var(--espaco-6);
  border-radius: var(--raio-modal);
  background: var(--superficie);
  box-shadow: var(--elevacao-n2);
  color: var(--tinta);
  text-decoration: none;
  transition:
    transform var(--duracao-micro) var(--curva-padrao),
    background-color var(--duracao-micro) var(--curva-padrao);
}

.opcao:hover {
  background: var(--superficie-2);
  transform: translateY(-2px);
}

.opcao:active {
  transform: translateY(0);
}

.opcao__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--raio-cheio);
  background: var(--marca-preenchimento);
  color: var(--marca-texto);
}

.opcao__texto {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--espaco-1);
}

.opcao__titulo {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display);
  font-size: var(--texto-titulo3);
  line-height: 1.2;
}

.opcao__apoio {
  color: var(--tinta-2);
  font-size: var(--texto-apoio);
}

.opcao__seta {
  flex: none;
  color: var(--acao);
  transition: transform var(--duracao-micro) var(--curva-padrao);
}

.opcao:hover .opcao__seta {
  transform: translateX(3px);
}

.entrada__nota {
  margin: var(--espaco-8) 0 0;
  color: var(--tinta-2);
  font-size: var(--texto-apoio);
}

.entrada__mascote {
  display: none;
}

@media (min-width: 960px) {
  .entrada {
    grid-template-columns: minmax(0, 560px) minmax(0, 420px);
    justify-content: center;
    column-gap: var(--espaco-16);
  }

  .entrada__titulo {
    font-size: calc(var(--texto-titulo1) * 1.25);
  }

  .entrada__mascote {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
  }
}