/*
 * O visual das páginas públicas — novidades, FAQ, tour, conheça.
 *
 * Elas são arquivos estáticos, servidos direto pela Vercel, fora do app React.
 * Por isso não usam Tailwind: um arquivo só, carregado por todas, com as mesmas
 * cores e fontes do `src/index.css` para não parecerem outro produto.
 *
 * Quando o sócio mexer no visual do app, este arquivo precisa acompanhar — é a
 * única duplicação de design do projeto, e está aqui de propósito, porque a
 * alternativa era carregar o app inteiro para mostrar uma página de texto.
 */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --dark: #071915;
  --card: #143A2A;
  --green: #0C3B2E;
  --accent: #6D9773;
  --orange: #F05A28;
  --sage: #E8EFE9;
  --gold: #FFBA08;
  --lime: #BEF264;
  --cream: #FDFBF7;
  --sans: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dark);
  color: var(--sage);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.env { max-width: 780px; margin: 0 auto; padding: 28px 20px 80px; }

/* ---------- topo ---------- */
.topo { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.topo img { width: 30px; height: 30px; border-radius: 8px; }
.topo a { color: var(--sage); text-decoration: none; font-weight: 600; font-size: 15px; }
.topo .resto { margin-left: auto; display: flex; gap: 16px; }
.topo .resto a { color: var(--accent); font-size: 13px; font-weight: 500; }
.topo .resto a:hover { color: var(--lime); }

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.08;
  margin: 0 0 12px;
  color: var(--cream);
  text-wrap: balance;
}
.sub { margin: 0 0 34px; color: var(--accent); font-size: 16px; max-width: 62ch; }
.sub strong { color: var(--sage); font-weight: 600; }

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: var(--cream);
  margin: 40px 0 14px;
  line-height: 1.2;
}

a { color: var(--lime); }

/* ---------- rodapé ---------- */
.rodape {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid rgba(109, 151, 115, 0.28);
  font-size: 13px;
  color: var(--accent);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* ---------- cartão genérico ---------- */
.cartao { background: var(--card); border-radius: 18px; padding: 16px 18px; }

/* ---------- respeito a quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}