/* ==========================================================================
   Invólucro do monorepo: página de entrada e páginas de erro.
   --------------------------------------------------------------------------
   Deliberadamente autónomo. Partilha a paleta com as secções, mas não os seus
   ficheiros: uma secção pode mudar de identidade visual, ou desaparecer, sem
   partir a porta de entrada do domínio. Por isso também usa tipografia do
   sistema, e não as fontes auto-alojadas de nenhuma liga em particular.
   ========================================================================== */

:root {
  --vermelho: #b31b1b;
  --azul: #12357a;
  --verde: #006233;
  --amarelo: #ffcc29;
  --tinta: #1c1c2b;
  --branco: #ffffff;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background: var(--tinta);
  color: var(--branco);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.entrada { width: 100%; max-width: 40rem; }

.entrada__cabecalho {
  text-align: center;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 2.5rem;
  position: relative;
}

/* A faixa vermelha, amarela e azul é o fio que atravessa todo o domínio. */
.entrada__cabecalho::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 8rem;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--vermelho) 0 33.33%,
    var(--amarelo) 33.33% 66.66%,
    var(--azul) 66.66% 100%
  );
}

.entrada__sobretitulo {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amarelo);
}

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.entrada__lema {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.66);
}

/*
  Aqui viviam os cartões das secções, na entrada e na página de erro: nome,
  descrição, caminho e a língua em que a secção está, com a cor da identidade
  de cada uma numa barra à esquerda. Saíram com a lista, e a folha não guarda
  regras que ninguém usa. Voltam do historial quando a entrada voltar a
  apresentar secções.
*/

.entrada__rodape {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

/*
  Sem nada entre o cabeçalho e o rodapé, as duas linhas ficavam a olhar uma
  para a outra com um vazio de três rem no meio, e o vazio lia-se como falta e
  não como despojamento. A linha do rodapé sai quando ele vem logo a seguir ao
  cabeçalho, e volta sozinha no dia em que houver alguma coisa entre os dois.
*/
.entrada__cabecalho + .entrada__rodape {
  margin-top: 2rem;
  padding-top: 0;
  border-top: 0;
}
.entrada__rodape p { margin: 0; }

/* ------------------------------------------------------------- erros ----- */
.erro { text-align: center; }
.erro__codigo {
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  margin: 0;
}
.erro h1 { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 5vw, 2.2rem); }
.erro p { color: rgba(255, 255, 255, 0.7); }
.erro a { color: var(--amarelo); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}