/* ==========================================================================
   Universo de Luz — folha de estilo do projeto

   É a **única** referenciada no HTML. Ela carrega o global e importa as folhas
   de cada parte, para a DOM não ficar com uma lista de <link>.

   Ordem importa: o global define os tokens e a escala de rem que as partes
   usam, então vem primeiro.
   ========================================================================== */

@import url("components/rodape/rodape.css");
@import url("components/cookies/cookies.css");
@import url("components/introducao/introducao.css");
@import url("components/hero/hero.css");

/* --------------------------------------------------------------------------
   O sistema de medidas
   1rem não é fixo: são 10px na largura de design. Assim a página inteira
   escala junto com a viewport, e os números das medidas (2rem, 3.5rem…)
   equivalem a pixels no layout de referência.
   -------------------------------------------------------------------------- */

:root {
  --size: 390;          /* largura de design no celular */
  --gold: #7c7262;
}

/* Tablet retrato */
@media (orientation: portrait) and (min-width: 650px) and (max-width: 1100px) {
  :root { --size: 834; }
}

/* Desktop */
@media (min-width: 650px) {
  :root { --size: 1500; }
}

html {
  font-size: clamp(1px, 10 * 100vw / var(--size), 12px);
  /* O escuro do céu estrelado da introdução, que é a primeira coisa a
     aparecer. Evita um lampejo claro antes de o CSS pintar. */
  background-color: #05070f;
  color: #fff;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  font-family: sans, system-ui, sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.4;
  overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   Fontes
   Vieram do bundle original e por isso moram em /public/fontes/. São licenciadas:
   trocar ou licenciar antes de publicar.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: sans; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/public/fontes/NHaasGroteskTXPro-55Rg.DjjIn3vU.woff2) format("woff2");
}
@font-face {
  font-family: sans; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/public/fontes/NHaasGroteskTXPro-65Md.obxsJaSp.woff2) format("woff2");
}
@font-face {
  font-family: teodor; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/public/fontes/Teodor-Regular.DWUeTY31.woff2) format("woff2");
}

/* --------------------------------------------------------------------------
   O palco
   Tudo é posicionado dentro desta caixa de tela cheia.
   -------------------------------------------------------------------------- */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   O rodapé, aqui, é azul

   O `rodape.css` pinta o rodapé de branco, e nas páginas internas isso está
   certo: todas elas têm fotografia escura por baixo. A inicial é a única com
   fundo **claro** no pé — a câmera pousa numa nuvem branca, e é sobre ela que
   o rodapé fica parado no fim do voo. Branco sobre branco: os dois ícones e o
   crédito sumiam por completo.

   Este bloco mora aqui, e não no `rodape.css`, porque esta folha é a da página
   inicial e de mais nenhuma — o que se escreve aqui vale só para ela, sem
   precisar inventar uma classe no `body` para dizer "estou na home".

   O azul é o mesmo `#143a5e` da oração, pela mesma razão: é o marinho que se
   sustenta sobre a nuvem. E a sombra vira branca — a do `rodape.css` é preta,
   feita para separar texto claro de fundo escuro, e aqui o problema é o
   inverso.
   -------------------------------------------------------------------------- */

.rodape a {
  color: rgb(20 58 94 / 0.85);
  text-shadow: 0 0 0.4rem rgb(255 255 255 / 0.9);
}

.rodape a:hover,
.rodape a:focus-visible { color: #0d2743; }

.rodape__doc { color: rgb(20 58 94 / 0.72); }

/* O crédito continua mais apagado que as redes — é assinatura, não chamada —,
   mas agora apagado *para baixo*, na direção do fundo claro. */
.rodape__credito {
  color: rgb(20 58 94 / 0.62);
  text-shadow: 0 0 0.4rem rgb(255 255 255 / 0.9);
}

.rodape__credito a { color: rgb(20 58 94 / 0.78); }