/* ==========================================================================
   PÁGINAS INTERNAS - o que a página de contribuição e a de links dividem
   Ambas nascem do celular: fundo escuro, coluna única, marca no topo e
   rodapé curto. O que é próprio de cada uma mora na folha dela.
   ========================================================================== */

.pagina-interna {
  background: var(--cor-tinta);
  color: var(--cor-papel);
}

/* --- Topo ----------------------------------------------------------------- */

.topo {
  display: flex;
  justify-content: center;
  padding: var(--e-8) var(--e-6) var(--e-6);
}

.topo__marca img {
  width: auto;
  height: 2.5rem;
}

/* --- Folha ---------------------------------------------------------------- */

.folha {
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  padding: 0 var(--e-6) var(--e-16);
}

.folha__titulo {
  font-size: clamp(2rem, 1.5rem + 3vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.folha__texto {
  margin-top: var(--e-4);
  color: var(--cor-texto-apoio-claro);
}

.folha__volta {
  display: flex;
  margin-top: var(--e-12);
}

.pagina-interna :where(a, button):focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco-escuro);
}

/* No site o atalho é tinta sobre papel. Aqui o fundo já é tinta, e a pílula
   ficava sem contorno nenhum: só o texto aparecia. Ela inverte. */
.pagina-interna .pular {
  background: var(--cor-papel);
  color: var(--cor-tinta);
}

.pagina-interna .pular:focus-visible {
  box-shadow: var(--sombra-foco-escuro);
}

/* --- Versículo ------------------------------------------------------------ */

.versiculo {
  margin: var(--e-12) 0 0;
  padding-left: var(--e-6);
  border-left: 2px solid var(--cor-laranja);
}

.versiculo p {
  font-family: var(--fonte-display);
  font-size: var(--texto-p-grande);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
}

.versiculo cite {
  display: block;
  margin-top: var(--e-3);
  font-family: var(--fonte-texto);
  font-size: var(--texto-xs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  color: var(--cor-laranja);
}

/* --- Bandeira ------------------------------------------------------------- */

.bandeira {
  width: auto;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 3px;
  /* O SVG não respeita o arredondamento da borda sozinho: sem o recorte, o
     canto quadrado da arte cobre o canto redondo da moldura. */
  clip-path: inset(0 round 3px);
  /* Sobre fundo escuro o contorno é claro, senão o verde encosta no preto. */
  box-shadow: inset 0 0 0 1px var(--cor-borda-clara);
}

/* --- Rodapé --------------------------------------------------------------- */

.rodape-simples {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-8) var(--e-6) var(--e-12);
  border-top: var(--traco-claro);
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--cor-texto-apoio-claro);
}

.rodape-simples__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--e-1) var(--e-4);
}

.rodape-simples__credito a {
  color: var(--cor-papel);
  /* O peso é o que separa o elo do texto ao lado: o papel contra o apoio-claro
     dá 1,9:1, e cor sozinha precisaria de 3:1. Sem traço, por decisão de Zamp. */
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-micro) var(--curva-saida);
}

.rodape-simples__credito a:hover { color: var(--cor-laranja); }

@media (min-width: 48rem) {

  .topo { padding-top: var(--e-12); }

  .topo__marca img { height: 3rem; }

  .folha { padding-bottom: var(--e-24); }
}