/* Página temporária "em construção". Só tokens de tokens.css; tamanhos fixos apenas de layout. */

html, body { margin: 0; min-height: 100%; }

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
}

/* BeamGrid fixo atrás do conteúdo (tempos iguais ao BeamGrid.astro do site) */
.nyx-beams { position: fixed; left: 0; right: 0; }
.beam-a { height: 256px; animation-duration: 6s; animation-delay: 0s; }
.beam-b { height: 384px; animation-duration: 8s; animation-delay: 2s; }
.beam-c { height: 192px; animation-duration: 7s; animation-delay: 4s; }
.beam-axis { left: 50%; height: 256px; animation-duration: 6s; animation-delay: 1.5s; }

/* Névoa índigo vinda de baixo, para o vidro e o título terem profundidade */
.haze {
  position: fixed;
  left: 50%;
  bottom: -30vh;
  width: 120vw;
  height: 70vh;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--indigo-glow);
  filter: blur(var(--blur-halo));
  pointer-events: none;
  z-index: 0;
}

.topo, .conteudo, .rodape {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  box-sizing: border-box;
}

.topo { padding-top: var(--space-8); }
.logo { display: block; height: var(--space-12); width: auto; }

.conteudo {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.titulo { margin: 0; max-width: 14ch; color: var(--ink-strong); }
.texto { margin: 0; max-width: 46ch; color: var(--ink); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }

.email { margin: 0; }
.email a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.email a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

.rodape { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.rodape p { margin: 0; color: var(--ink-muted); }

@media (min-width: 768px) {
  .topo, .conteudo, .rodape { padding-left: var(--space-10); padding-right: var(--space-10); }
}