/* As cores dos dois temas NAO foram escolhidas aqui: sao as mesmas do
 * app/publico/tema-granola.css, que por sua vez saiu do Granola rodando, com
 * conta-gotas. Papel claro #F1F2EC, papel escuro #222321. Mexer num valor
 * destes e trocar a referencia, nao ajustar o gosto.
 *
 * O claro e o padrao do arquivo. O escuro entra por prefers-color-scheme
 * quando ninguem escolheu nada, e por [data-theme] quando alguem clicou no
 * botao do topo. Os tres blocos precisam existir: sem o ultimo, o botao
 * consegue ir para o escuro mas nao consegue voltar num sistema escuro.
 */
:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --papel: #F1F2EC;
  --papel-fundo: #E8E9E1;
  --tinta: #262625;
  --tinta-media: #5F5F58;
  --tinta-fraca: #8B8B82;
  --linha: rgba(38, 38, 37, 0.12);

  --verde: #6E7D34;
  --verde-marca: rgba(171, 179, 126, 0.48);

  /* O botao cheio do claro e o "Upgrade" do Granola: escuro de verdade,
     #262625, e nao preto. Preto puro sobre este papel esverdeado vira buraco. */
  --botao-bg: #262625;
  --botao-bg-hover: #16160F;
  --botao-texto: #F6F7F0;
  --botao-vazio-bd: rgba(38, 38, 37, 0.18);
  --botao-vazio-bd-hover: rgba(38, 38, 37, 0.38);

  /* a faixa escura da bateia, que existe nos dois temas */
  --bloco: #282927;
  --bloco-texto: #F2F2EE;
  --bloco-texto2: #C7C8C1;
  --bloco-linha: rgba(242, 242, 238, 0.13);
  --bloco-verde: #A6C522;

  --sombra-tela: 0 34px 70px -34px rgba(26, 24, 20, 0.45);

  --largura: 1080px;
  --respiro: clamp(72px, 9vw, 132px);
}

/* escuro por preferencia do sistema, so quando ninguem pediu o claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #222321;
    --papel-fundo: #1E1F1D;
    --tinta: #F2F2EE;
    --tinta-media: #D2D3CE;
    --tinta-fraca: #969893;
    --linha: rgba(242, 242, 238, 0.13);

    --verde: #A0AF49;
    --verde-marca: rgba(166, 197, 34, 0.30);

    /* No escuro o botao cheio inverte: pilula clara com texto escuro, que e o
       mesmo movimento do app. Botao quase preto sobre fundo quase preto some. */
    --botao-bg: #F2F2EE;
    --botao-bg-hover: #FFFFFF;
    --botao-texto: #262625;
    --botao-vazio-bd: rgba(242, 242, 238, 0.20);
    --botao-vazio-bd-hover: rgba(242, 242, 238, 0.42);

    --bloco: #1A1B19;
    --bloco-texto: #F2F2EE;
    --bloco-texto2: #C7C8C1;
    --bloco-linha: rgba(242, 242, 238, 0.13);
    --bloco-verde: #A6C522;

    --sombra-tela: 0 34px 70px -34px rgba(0, 0, 0, 0.7);
  }
}

/* escuro por escolha no botao, vence a preferencia do sistema nos dois sentidos */
:root[data-theme="dark"] {
  --papel: #222321;
  --papel-fundo: #1E1F1D;
  --tinta: #F2F2EE;
  --tinta-media: #D2D3CE;
  --tinta-fraca: #969893;
  --linha: rgba(242, 242, 238, 0.13);

  --verde: #A0AF49;
  --verde-marca: rgba(166, 197, 34, 0.30);

  --botao-bg: #F2F2EE;
  --botao-bg-hover: #FFFFFF;
  --botao-texto: #262625;
  --botao-vazio-bd: rgba(242, 242, 238, 0.20);
  --botao-vazio-bd-hover: rgba(242, 242, 238, 0.42);

  --bloco: #1A1B19;
  --bloco-texto: #F2F2EE;
  --bloco-texto2: #C7C8C1;
  --bloco-linha: rgba(242, 242, 238, 0.13);
  --bloco-verde: #A6C522;

  --sombra-tela: 0 34px 70px -34px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  transition: background-color 0.25s ease, color 0.25s ease;
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 50, 'WONK' 0;
  letter-spacing: -0.022em;
  line-height: 0.98;
  font-weight: 400;
  margin: 0;
}

h1 { font-size: clamp(42px, 6.4vw, 78px); line-height: 0.94; }
h2 { font-size: clamp(31px, 4vw, 46px); }
h3 { font-size: clamp(21px, 2.1vw, 25px); line-height: 1.15; }

p { margin: 0; }

a { color: inherit; }

.marcado {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  background-image: linear-gradient(180deg, transparent 0, transparent 56%, var(--verde-marca) 56%, var(--verde-marca) 93%, transparent 93%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* topo */
.topo {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 26px 28px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.losango {
  width: 11px;
  height: 11px;
  background: var(--verde);
  transform: rotate(45deg);
  border-radius: 2px;
  flex: none;
}

.menu { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.menu a { color: var(--tinta-media); text-decoration: none; }
.menu a:hover { color: var(--tinta); }

.botao {
  display: inline-block;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 22px;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.botao:hover { transform: translateY(-1px); }
.botao-cheio { background: var(--botao-bg); color: var(--botao-texto); }
.botao-cheio:hover { background: var(--botao-bg-hover); }
.botao-vazio { border: 1px solid var(--botao-vazio-bd); color: var(--tinta); }
.botao-vazio:hover { border-color: var(--botao-vazio-bd-hover); }
.botao-grande { font-size: 16px; padding: 15px 30px; }

/* rodapé */
.rodape {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 34px 28px 56px;
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
  color: var(--tinta-fraca);
}
.rodape .marca { font-size: 16px; color: var(--tinta); }
.rodape p:last-child { margin-left: auto; }

/* alternador de tema
 *
 * O icone mostra PARA ONDE o clique leva, e nao onde voce esta: no claro
 * aparece a lua, no escuro aparece o sol. Mostrar o estado atual faz todo
 * mundo clicar duas vezes para descobrir o que o botao faz.
 *
 * As regras aparecem em dose dupla porque o escuro chega por dois caminhos,
 * a preferencia do sistema e o clique, e o icone tem que acertar nos dois.
 */
.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--botao-vazio-bd);
  background: none;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.tema:hover { border-color: var(--botao-vazio-bd-hover); transform: translateY(-1px); }
.tema svg { width: 17px; height: 17px; display: block; }
.tema .sol { display: none; }
.tema .lua { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .sol { display: block; }
  :root:not([data-theme="light"]) .tema .lua { display: none; }
}
:root[data-theme="dark"] .tema .sol { display: block; }
:root[data-theme="dark"] .tema .lua { display: none; }

/* reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .botao:hover { transform: none; }
}

@media (max-width: 880px) {
  .menu { display: none; }
  .topo { gap: 12px; }
  .tema { margin-left: auto; }
  .colunas { grid-template-columns: 1fr; gap: 34px; }
  .heroi-duplo { grid-template-columns: 1fr; gap: 40px; }
  .etapa { grid-template-columns: 1fr; gap: 10px; }
  .bateia { grid-template-columns: 1fr; gap: 40px; }
  .bateia > * { max-width: none; }
  .bateia-texto { justify-self: stretch; }
  .rodape { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rodape p:last-child { margin-left: 0; }
}