/* ===== ABERTURA DE PAGINA SIMPLES =====
   Noticias e Receitas nao tem fotografia de entrada: abrem direto no papel,
   com rotulo, titulo e uma linha de apoio. Mesmo corpo e mesmo peso dos
   titulos das outras secoes, para a pagina nao parecer de outro site. */

.pagina {
  padding: calc(var(--topo-y) + clamp(104px, 17svh, 210px)) var(--margem) clamp(36px, 6svh, 80px);
}

/* quando a abertura e a pagina inteira, ela ocupa a tela e fica no meio */
.pagina--sozinha {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 78svh;
  padding-bottom: clamp(80px, 14svh, 180px);
}

.pagina__rotulo {
  margin: 0 0 clamp(14px, 2.2svh, 28px);
  font-size: clamp(11px, .8vw, 14px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--azul);
}

.pagina__titulo {
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  font-size: clamp(44px, 6vw, 118px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.035em;
}

.pagina__apoio {
  margin: clamp(20px, 3svh, 36px) 0 0;
  max-width: 34ch;
  font-size: clamp(18px, 1.5vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: rgba(16, 13, 11, .72);
}

.pagina__saidas {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  margin: clamp(32px, 5svh, 64px) 0 0;
}
.pagina__link {
  display: inline-flex;
  align-items: baseline;
  gap: 1em;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(16, 13, 11, .16);
  font-size: clamp(13px, 1.04vw, 18px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .4s ease;
}
.pagina__link span { transition: transform .55s var(--ease-saida); }
.pagina__link:hover { border-bottom-color: var(--tinta); }
.pagina__link:hover span { transform: translateX(.5em); }

/* Na pagina propria, o cabecalho da secao de noticias sobraria: o rotulo ja
   esta na abertura. Fica so o fio. */
.noticias--pagina { padding-top: 0; }
.noticias--pagina .noticias__topo { padding-top: 0; }
.noticias--pagina .noticias__rotulo { display: none; }

/* botao cheio, para a saida principal quando ela e um convite (a 404 chama
   para o jogo) */
.pagina__botao {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  padding: 1.1em 1.6em;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-size: clamp(13px, 1.04vw, 18px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  transition: background-color .35s ease;
}
.pagina__botao span { transition: transform .5s var(--ease-saida); }
.pagina__botao:hover { background: var(--azul-fundo); }
.pagina__botao:hover span { transform: translateX(.4em); }
.pagina__saidas { align-items: center; }