/* inicio.css
   Pagina inicial provisoria (etapa 1). Sera trocada pela tela de login. */

.inicio {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--e6) + var(--seguro-topo)) var(--e4) calc(var(--e5) + var(--seguro-baixo));
  overflow: hidden;
}

/* Manchas de degrade bem suaves ao fundo */
.inicio-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mancha {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.16;
  background: var(--degrade);
  animation: mancha-move 18s ease-in-out infinite alternate;
}

.mancha-1 {
  top: -180px;
  left: -160px;
}

.mancha-2 {
  right: -200px;
  bottom: -220px;
  animation-delay: -9s;
}

@keyframes mancha-move {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(60px, 40px) scale(1.15); }
}

.inicio-cartao {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e4);
}

.inicio-logo {
  width: 280px;
  max-width: 78vw;
  animation: logo-entra 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes logo-entra {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.inicio-frase {
  margin: 0;
  font-size: 17px;
  color: var(--texto-suave);
  animation: subir 500ms ease 300ms both;
}

.inicio-aviso {
  width: 100%;
  padding: var(--e5);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--sombra);
  animation: subir 500ms ease 450ms both;
}

.inicio-aviso p {
  margin: var(--e3) 0 0;
  color: var(--texto-suave);
  font-size: 15px;
}

.inicio-instalar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--raio);
  background: var(--fundo-bloco);
  font-size: 14px;
  color: var(--texto-suave);
  animation: subir 500ms ease 550ms both;
}

.inicio-instalar p {
  margin: 0;
}

.inicio-acoes {
  animation: subir 500ms ease 600ms both;
}

.conexao {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.inicio-rodape {
  position: relative;
  z-index: 1;
  margin-top: var(--e6);
  font-size: 13px;
  color: var(--texto-fraco);
  text-align: center;
}

.inicio-rodape a {
  color: var(--texto-suave);
  text-decoration: none;
}

.inicio-rodape a:hover {
  text-decoration: underline;
}

.inicio-rodape .separador {
  margin: 0 var(--e2);
}

.inicio-rodape a,
.inicio-rodape span {
  white-space: nowrap;
}