/* ═══════════════════════════════════════════════════════════
   Página de agradecimento — só HTML e CSS
   Sem imagens, sem animações.
   ═══════════════════════════════════════════════════════════ */

:root {
  --papel:    #fbf8f3;   /* fundo — marfim quente */
  --tinta:    #201c17;   /* texto base */
  --tinta2:   #5f574b;   /* parágrafo */
  --cinza:    #8a7f70;   /* cinza quente (subtítulo) */
  --destaque: #a8442a;   /* terracota (título) */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Centraliza vertical e horizontalmente em qualquer tela.
   O respiro de baixo é maior que o de cima: isso coloca o bloco no
   centro ÓPTICO (levemente acima do centro exato), que é como o olho
   lê "centralizado". */
.tela {
  flex: 1 0 auto;
  display: flex;
  padding: clamp(24px, 6vh, 64px) 24px
           calc(clamp(24px, 6vh, 64px) + clamp(20px, 5vh, 56px));
}

/* margin:auto centraliza nos dois eixos sem cortar o topo
   quando a tela é mais baixa que o conteúdo (ao contrário de
   align-items:center, que corta). */
.agradecimento {
  margin: auto;
  text-align: center;
  max-width: 34rem;
}

.agradecimento__titulo {
  margin: 0;
  font-size: clamp(2.75rem, 11vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--destaque);
}

/* Subtítulo: pequeno, cinza claro, logo abaixo do título */
.agradecimento__subtitulo {
  margin: clamp(10px, 1.6vw, 14px) auto 0;
  max-width: 28rem;
  font-size: clamp(0.875rem, 1.9vw, 1rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--cinza);
  text-wrap: balance;
}

.agradecimento__texto {
  margin: clamp(16px, 3vw, 24px) auto 0;
  max-width: 30rem;
  font-size: clamp(1.125rem, 2.9vw, 1.3125rem);
  line-height: 1.65;
  color: var(--tinta2);
  text-wrap: pretty;
}

/* Acompanha o tema do sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --papel:    #17130f;   /* preto quente */
    --tinta:    #f5f0e8;
    --tinta2:   #a89e91;
    --cinza:    #7d7367;   /* cinza discreto no fundo escuro */
    --destaque: #e8a184;   /* terracota clara para o modo escuro */
  }
}