/* A FOLHA DA LANDING — escrita À MÃO, e o prefixo `g-` é a fronteira.
 *
 * ⚠️⚠️⚠️ POR QUE ELA NÃO É TAILWIND, como o resto da vitrine: **o `npm run homepage:css` não existe
 * neste repositório.** O script e o `@tailwindcss/cli` ficaram no legado; o `package.json` daqui não
 * tem `devDependencies` nenhuma. Ou seja, a `homepage.css` é um artefato HERDADO e NÃO REGERÁVEL —
 * escrever uma classe nova nela seria escrever uma classe sem regra, que é exatamente o defeito que
 * o README avisa e o teste caça. As páginas institucionais seguem no Tailwind (as classes delas já
 * estão na folha); a landing, que é nova, nasce em CSS de verdade.
 *
 * ⭐ O PREFIXO `g-` NÃO É ENFEITE: é ele que o teste usa pra saber em QUAL folha procurar a regra de
 * cada classe. `g-*` tem que estar aqui; o resto, na `homepage.css`.
 *
 * ⭐⭐⭐ A HOME É UMA DOBRA SÓ (2026-09-23): a capivara olhando a trilha, «Dinheiro não deveria ser
 * tão difícil.» e um botão. Ela foi desenhada a partir de DOIS mockups (retrato e paisagem) gerados
 * com a interface já pintada — e a interface pintada NÃO entra: a cena é imagem, e tudo que se lê é
 * texto de verdade. Um botão pintado não é clicável, um título pintado não é indexável, e um mockup
 * só existe em duas larguras. Ver o `capaDaHome()` no `tela.mjs`.
 *
 * ⚠️ A SERIFA É A FRAUNCES, auto-hospedada como a Geist — a vitrine não pede nada pra terceiro. É a
 * mesma fonte do app de guias (`../garimpar.me-guia`), que é o produto que esta dobra apresenta. Só
 * o peso 700, com o eixo `opsz` (a fonte afina o contraste nos corpos grandes, como no mockup). */

@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/web/fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/web/fraunces-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* As cores foram AMOSTRADAS do mockup, não escolhidas: o fundo creme, a tinta verde-quase-preta
   * do título e o verde-escuro do botão. Trocar aqui é trocar a dobra inteira. */
  --g-creme: #f8f5eb;
  --g-tinta: #12291f;
  --g-tinta-media: #3b4945;
  --g-cinza: #5f6d67;
  --g-verde-fundo: #0b3f2f;
  --g-verde-icone: #0f3a2a;
  --g-ouro: #f5b322;
  --g-serifa: Fraunces, Georgia, "Times New Roman", serif;
}

/* ⚠️ `border-box` local, e não `*`: a folha do Tailwind já governa as institucionais, e um reset
 * global daqui atravessaria a fronteira que o prefixo existe pra manter. */
[class^="g-"], [class*=" g-"], [class^="g-"] *, [class*=" g-"] * { box-sizing: border-box; }

.g-pagina { color: var(--g-tinta); }

/* ── a capa ────────────────────────────────────────────────────────────────────────
 *
 * ⭐⭐ CELULAR PRIMEIRO: coluna de texto em cima, cena em largura total embaixo. A seção tem a altura
 * da tela e a cena CRESCE pra ocupar o que sobrar — em vez de deixar um vão creme entre o botão e a
 * capivara num aparelho alto. O `object-position` prende o canto SUPERIOR ESQUERDO, porque é lá que
 * moram as placas e a capivara: quando o corte come, come capim e cachoeira, nunca o assunto. */
.g-capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--g-creme);
}
.g-capa-texto { position: relative; z-index: 2; width: 100%; padding: 32px 24px 0; }
.g-capa-miolo { max-width: 36rem; margin: 0 auto; }

/* a marca: a gema + GARIMPAR em serifa + «E EXPLORAR» espaçado */
.g-marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--g-tinta); }
.g-marca img { width: 48px; height: 48px; display: block; }
.g-marca-nome { display: flex; flex-direction: column; line-height: 1; }
.g-marca-nome b { font-family: var(--g-serifa); font-size: 1.55rem; font-weight: 700; letter-spacing: .01em; }
.g-marca-nome span {
  margin-top: 6px;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--g-cinza);
}

/* ⚠️ TRÊS LINHAS FIXAS no título («Dinheiro não / deveria ser / tão difícil.»), com `<br>` na marcação.
 * É o corte do mockup, e a serifa em corpo grande pede que a quebra seja decidida, não sorteada. */
.g-capa-h1 {
  margin: 36px 0 0;
  font-family: var(--g-serifa);
  font-size: 2.65rem;
  line-height: 1;
  letter-spacing: -.025em;
  font-weight: 700;
}
.g-capa-lead { margin: 20px 0 0; max-width: 34ch; font-size: 1.08rem; line-height: 1.45; color: var(--g-tinta-media); }

/* os três selos: ícone preenchido + duas ou três linhas curtas, sem quebra dentro da linha */
.g-selos { margin: 28px 0 0; padding: 0; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.g-selos li { display: flex; align-items: center; gap: 8px; }
.g-selos svg { width: 28px; height: 28px; flex: 0 0 auto; color: var(--g-verde-icone); }
.g-selos b { font-size: .72rem; line-height: 1.15; font-weight: 700; }
.g-selos b span { display: block; white-space: nowrap; }

/* ⭐⭐⭐ O BOTÃO É UM `<a>`, e é o único caminho da página. No mockup ele é uma pílula pintada — uma
 * pílula pintada não é clicável, não é focável e não conta como conversão. */
.g-capa-cta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 999px;
  background: var(--g-verde-fundo);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 15px -3px rgba(11, 63, 47, .25), 0 4px 6px -4px rgba(11, 63, 47, .25);
  transition: background .15s ease;
}
.g-capa-cta:hover { background: #0a3527; }
.g-capa-cta:focus-visible { outline: 3px solid var(--g-ouro); outline-offset: 3px; }
.g-capa-cta svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* a cena: no celular, em fluxo abaixo do botão; a altura mínima é a proporção natural do recorte
 * (941 × 792), e o `flex: 1` deixa ela crescer até o pé da tela */
.g-cena { position: relative; flex: 1; margin-top: 20px; min-height: calc(100vw * .8417); }
.g-cena img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}
.g-cena-veu { display: none; }

/* as cinco placas, em texto, só pra leitor de tela e indexação — na cena elas são pintura */
.g-trilhas {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── o pé ──────────────────────────────────────────────────────────────────────────
 * O mockup não tem rodapé. Esta faixa fina existe pra que as institucionais (termos, privacidade,
 * contato) continuem alcançáveis a partir da home — sem ela, viravam páginas órfãs. */
.g-pe { padding: 18px 24px 26px; background: var(--g-creme); font-size: .8rem; color: var(--g-cinza); text-align: center; }
.g-pe-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 0 0 8px; padding: 0; list-style: none; }
.g-pe a { color: inherit; text-decoration: none; }
.g-pe a:hover { color: var(--g-tinta); }
.g-pe p { margin: 0; }

@media (min-width: 640px) {
  .g-capa-texto { padding: 40px 40px 0; }
  .g-capa-h1 { font-size: 3rem; }
  .g-capa-lead { font-size: 1.25rem; }
  .g-selos { gap: 16px; }
  .g-selos li { gap: 10px; }
  .g-selos svg { width: 32px; height: 32px; }
  .g-selos b { font-size: .875rem; }
  .g-capa-cta { padding: 16px 24px; font-size: 1.1rem; }
}

/* ⭐ A PAISAGEM: texto à esquerda, a cena colada na borda DIREITA em altura de tela, e um véu da cor
 * do fundo por cima da emenda — é o fade do mockup. A cena é `absolute`, então o texto é o único
 * filho em fluxo e a seção o centraliza na vertical. */
@media (min-width: 1024px) {
  .g-capa { flex-direction: row; align-items: center; }
  .g-capa-texto { padding: 64px 0 64px 8.5vw; }
  .g-capa-miolo { margin: 0; width: 42vw; max-width: 46rem; }
  .g-marca { gap: 16px; }
  .g-marca img { width: 72px; height: 72px; }
  .g-marca-nome b { font-size: 2.1rem; }
  .g-marca-nome span { margin-top: 8px; font-size: .8rem; }
  .g-capa-h1 { margin-top: 56px; font-size: clamp(3.6rem, 5.9vw, 6.4rem); }
  .g-capa-lead { margin-top: 32px; max-width: 40ch; font-size: 1.45rem; line-height: 1.4; }
  .g-selos { margin-top: 40px; justify-content: flex-start; gap: 48px; }
  .g-selos li { gap: 12px; }
  .g-selos svg { width: 40px; height: 40px; }
  .g-selos b { font-size: 1rem; }
  .g-capa-cta { margin-top: 40px; width: auto; padding: 20px 56px; font-size: 1.2rem; }
  .g-cena { position: absolute; top: 0; bottom: 0; right: 0; width: 56%; margin: 0; min-height: 0; z-index: 0; }
  .g-cena img { object-position: right center; }
  .g-cena-veu {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(to right, var(--g-creme) 0%, rgba(248, 245, 235, .75) 50%, rgba(248, 245, 235, 0) 100%);
    pointer-events: none;
  }
  .g-pe { text-align: left; padding: 16px 8.5vw 22px; }
  .g-pe-links { justify-content: flex-start; }
}

@media (min-width: 1280px) {
  .g-cena { width: 54%; }
}

@media (prefers-reduced-motion: reduce) {
  .g-capa-cta { transition: none; }
}