/* Base da LPInvest em HTML/CSS puro (substitui o export do Framer).
   Tokens tirados da pagina original: Geist nos titulos, Inter no texto. */
:root {
  --ink: rgb(24, 24, 24);
  --muted: rgb(70, 72, 77);
  --line: rgba(108, 111, 118, 0.12);
  --soft: rgb(250, 250, 250);
  --white: #fff;
  --pill-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  --container: 1200px;
  --gutter: 24px;
  --font-title: "Geist", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }

section[id] { scroll-margin-top: 96px; }

.gx-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Selo em pilula acima dos titulos de secao */
.gx-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px;
  background: var(--white); border: 1.5px solid var(--line); box-shadow: var(--pill-shadow);
  font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.4;
}
.gx-pill svg { width: 16px; height: 16px; color: var(--muted); flex: none; }

/* Cabecalho padrao de secao: selo, titulo e subtitulo centralizados */
.gx-head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.gx-h2 {
  font-family: var(--font-title); font-weight: 500; font-size: 44px; line-height: 1.2;
  letter-spacing: -2.5px; color: var(--ink); max-width: 760px;
}
.gx-sub { font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 560px; }

/* Botao principal em pilula preta */
.gx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: 100px; border: 0;
  background: var(--ink); color: var(--white); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: opacity .2s ease, transform .15s ease;
}
.gx-btn:hover { opacity: .88; }
.gx-btn:active { transform: scale(.98); }
.gx-btn:focus-visible, .gx-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Entrada suave ao aparecer na tela (uma vez) */
.gx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.gx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gx-reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 809px) {
  .gx-h2 { font-size: 34px; letter-spacing: -1.6px; }
  .gx-sub { font-size: 15px; }
}