/* ==========================================================================
   Mister Frango - estilos partilhados por paginas interiores
   (menu, sobre, contactos)
   ========================================================================== */

.pagina-cabecalho{
  padding-top:calc(var(--nav-h) + 3.5rem);
  padding-bottom:2.5rem;
  background:var(--tinta);
}
.pagina-cabecalho .etiqueta{margin-bottom:1rem}
.pagina-cabecalho h1{font-size:clamp(2.5rem,6vw,4rem);max-width:16ch}
.pagina-cabecalho p{
  margin-top:1.25rem;max-width:32rem;
  font-size:var(--fs-lead);color:var(--creme-70);
}

/* --- prosa legal (politica de privacidade, termos e condicoes) ------------ */

.prosa-legal{padding-block:1rem 5rem}

.prosa-legal__corpo{max-width:42rem}

.prosa-legal__corpo h2{
  font-size:1.375rem;
  margin-top:2.75rem;
  margin-bottom:1rem;
}
.prosa-legal__corpo h2:first-child{margin-top:0}

.prosa-legal__corpo p{
  margin-top:1rem;
  color:var(--creme-70);
  line-height:1.65;
}
.prosa-legal__corpo p:first-of-type{margin-top:0}

.prosa-legal__corpo ul{
  margin:1rem 0 0;
  padding-left:1.25rem;
  color:var(--creme-70);
  line-height:1.65;
}
.prosa-legal__corpo li + li{margin-top:.375rem}

.prosa-legal__corpo a{color:var(--creme);text-decoration-color:var(--linha-forte)}

.prosa-legal__atualizado{
  margin-bottom:2.5rem;
  font-family:var(--mono);
  font-size:.8125rem;
  color:var(--creme-45);
}

/* --- erro 404 -------------------------------------------------------------- */

/* conteudo centrado no ecra todo (altura e largura), por baixo da nav fixa —
   por isso padding-top:var(--nav-h) em vez do padding-top do
   .pagina-cabecalho partilhado (esse soma nav-h + 3.5rem, pensado para
   paginas sem min-height, o que aqui desequilibrava a centragem vertical). */
.erro-404{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  padding-top:var(--nav-h);
  padding-bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--tinta-fundo);
}
.erro-404 .container{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.erro-404__accoes{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem}

/* raios de luz animados atras do texto (efeito WebGL, ver main.js). Cor
   branca — o proprio gradiente interno do shader ja inclina para tons
   frios (o canal vermelho e' sempre o mais reduzido), por isso um
   branco neutro rende melhor do que forcar a cor da marca. Sem JS ou sem
   WebGL disponivel, fica so o brilho radial parado deste background — a
   canvas nunca chega a desenhar por cima. */
.erro-404__raios{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,255,255,.14), transparent 70%);
}