/* ═══════════════════════════════════════════════════════════════════════════
   TRANQUILITY — tranquility.app.br
   ───────────────────────────────────────────────────────────────────────────
   As cores e a tipografia vêm de ControleFinanceiro/DESIGN.md, que é o sistema
   de design do aplicativo. Nada aqui é escolha nova: o site é o app visto de
   fora, e a régua é a mesma — Material 3 reto, sem metáfora.

   Os contrastes foram medidos (WCAG 2.1). Nenhum texto abaixo de 4,5:1.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --verde: #1F6B44;        /* institucional: marca, títulos, rótulos */
  --esmeralda: #1F8A54;    /* a voz do app: botão primário, links */
  --ouro: #C98F1F;         /* a assinatura, o ponto que assenta */
  --creme: #FDF3DD;        /* faixa de ênfase */
  --papel: #FFFDF7;        /* fundo */
  --sombreado: #F6EFDC;    /* cartão de resumo */
  --tinta: #16211B;        /* texto forte e faixa escura */
  --linha: #E0D8C2;        /* filete */
  --corpo: #3D4C44;        /* texto corrido */
  --apagado: #5F6E64;      /* legenda — 4,68:1 sobre creme */
  --borda-botao: #C7D6CB;
  --positivo: #1B7A3D;
  --negativo: #B3261E;
  /* faixa escura */
  --menta: #8FDCAF;
  --menta-corpo: #C2D2C7;
  --superficie-noturna: #1E2A23;
  --contorno-noturno: #3E4C44;
  --apagado-noturno: #8FA396;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--papel);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--esmeralda); text-decoration: none; }
a:hover { color: var(--verde); }

img, svg { max-width: 100%; }

/* ─── esqueleto ─── */
.faixa { padding: 96px 140px; }
.faixa--creme { background: var(--creme); }
.faixa--escura { background: var(--tinta); color: #E6EFE9; }
.limite { max-width: 1160px; margin: 0 auto; }

.rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: var(--verde);
}
.faixa--escura .rotulo { color: var(--menta); }

h1 {
  margin: 22px 0 0;
  font-size: 62px;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -2px;
  color: var(--verde);
  text-wrap: pretty;
}

h2 {
  margin: 18px 0 0;
  max-width: 780px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1.1px;
  color: var(--verde);
  text-wrap: pretty;
}
.faixa--escura h2 { color: var(--papel); }

.chamada {
  margin: 16px 0 0;
  max-width: 680px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--corpo);
  text-wrap: pretty;
}
.faixa--escura .chamada { color: var(--menta-corpo); }

.nota { font-size: 14px; line-height: 1.55; color: var(--apagado); }

/* ─── botões ─── */
.botao,
.botao--vazado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  border-radius: 9999px;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
}
.botao { background: var(--esmeralda); color: var(--papel); }
.botao:hover { background: var(--verde); color: var(--papel); }
.botao--vazado { border: 1px solid var(--borda-botao); color: var(--verde); }
.botao--vazado:hover { border-color: var(--verde); background: rgba(31,138,84,0.06); }
.botao--pequeno { height: 40px; padding: 0 24px; font-size: 15px; }
.botao--largo { width: 100%; height: 44px; font-size: 15px; }

/* ─── navegação ─── */
.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 140px;
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 10;
}
.marca { display: flex; align-items: center; gap: 11px; }
.marca span {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: var(--verde);
}
.topo nav { display: flex; align-items: center; gap: 34px; }
.topo nav a { font-size: 15px; font-weight: 500; color: var(--corpo); }
.topo nav a:hover { color: var(--verde); }
.topo nav a.botao { color: var(--papel); }

/* ─── capa ─── */
.capa { display: flex; align-items: center; gap: 72px; padding: 96px 140px 104px; }
.capa__texto { flex-grow: 1; min-width: 0; }
.capa__acoes { display: flex; align-items: center; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.assinatura {
  margin-top: 44px;
  font-size: 21px;
  font-style: italic;
  color: var(--ouro);
}

/* ─── a tela do aplicativo ─── */
.tela {
  width: 372px;
  flex-shrink: 0;
  border: 1px solid var(--linha);
  border-radius: 22px;
  background: var(--papel);
  padding: 18px;
}
.tela__mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tela__mes strong { font-size: 18px; font-weight: 700; }
.selo {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 9999px;
  background: rgba(31,138,84,0.15);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--verde);
}
.resumo { background: var(--sombreado); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.resumo__rotulo { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--apagado); }
.resumo__valor {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--positivo);
  white-space: nowrap;
}
.resumo__sub { margin-top: 8px; font-size: 12px; color: var(--apagado); }

.grupo { border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.grupo:last-child { margin-bottom: 0; }
.grupo__cabeca,
.grupo__linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.grupo__cabeca { padding: 9px 12px; font-weight: 700; }
.grupo__linha { padding: 7px 12px; }
/* cor por categoria, em opacidades fixas — a estrutura de leitura do app */
.grupo--casa .grupo__cabeca { background: rgba(11,93,59,0.30); color: #0B5D3B; }
.grupo--casa .grupo__linha { background: rgba(11,93,59,0.07); }
.grupo--cartoes .grupo__cabeca { background: rgba(21,101,192,0.30); color: #1565C0; }
.grupo--cartoes .grupo__linha { background: rgba(21,101,192,0.07); }
.grupo--mercado .grupo__cabeca { background: rgba(239,108,0,0.28); color: #EF6C00; }
.grupo--mercado .grupo__linha { background: rgba(239,108,0,0.07); }

/* ─── grades ─── */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }

.cartao { background: var(--papel); border-radius: 14px; padding: 28px; }
.faixa--escura .cartao { background: var(--superficie-noturna); }
.cartao h3 { margin: 20px 0 0; font-size: 20px; font-weight: 700; color: var(--tinta); }
.faixa--escura .cartao h3 { margin-top: 0; color: var(--menta); }
.cartao p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--corpo); }
.faixa--escura .cartao p { margin-top: 12px; color: var(--menta-corpo); }

.passo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: rgba(31,138,84,0.15);
  font-size: 17px;
  font-weight: 700;
  color: var(--verde);
}

/* ─── gráfico do fluxo diário ─── */
.grafico {
  margin-top: 44px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 28px 24px 20px;
}
.grafico svg { display: block; width: 100%; height: auto; }

/* ─── migração ─── */
.migracao { display: flex; align-items: center; gap: 80px; }
.migracao__texto { flex-grow: 1; min-width: 0; }
.lista { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.lista div { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--corpo); }
.lista span { color: var(--positivo); font-weight: 700; }
.regra { width: 420px; flex-shrink: 0; background: var(--creme); border-radius: 14px; padding: 32px; }
.faixa--creme .regra { background: var(--papel); }
.regra__rotulo { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--apagado); }
.regra__frase { margin-top: 14px; font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--verde); }
.regra p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--corpo); }

/* ─── planos ─── */
.plano {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.plano--destaque { border: 2px solid var(--esmeralda); }
.plano__nome { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; }
.plano__preco {
  margin-top: 14px;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--verde);
  white-space: nowrap;
}
.plano__periodo { margin-top: 8px; font-size: 14px; color: var(--apagado); }
.plano__itens { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; flex-grow: 1; }
.plano__itens div { font-size: 15px; line-height: 1.5; color: var(--corpo); }
.plano .botao,
.plano .botao--vazado { margin-top: 28px; }
.etiqueta {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 9999px;
  background: rgba(31,138,84,0.15);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--verde);
}

/* ─── perguntas ─── */
.pergunta strong { display: block; font-size: 18px; font-weight: 700; color: var(--tinta); }
.pergunta p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--corpo); }

/* ─── chamada final ─── */
.convite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
}
.convite h2 { max-width: 620px; font-size: 36px; margin-top: 0; }
.convite .botao { height: 58px; padding: 0 38px; font-size: 18px; flex-shrink: 0; }

/* ─── rodapé ─── */
.rodape { background: var(--tinta); color: var(--menta-corpo); padding: 56px 140px; }
.rodape__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; }
.rodape .marca span { color: var(--papel); font-size: 19px; }
.rodape__assinatura { margin-top: 12px; font-size: 17px; font-style: italic; color: #EBC77D; }
.rodape__empresa { margin-top: 18px; font-size: 14px; color: var(--apagado-noturno); }
.rodape__colunas { display: flex; gap: 72px; }
.rodape__coluna { display: flex; flex-direction: column; gap: 11px; }
.rodape__coluna b { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--apagado-noturno); }
.rodape__coluna a { font-size: 15px; color: var(--menta-corpo); }
.rodape__coluna a:hover { color: var(--menta); }
.rodape__fim {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--contorno-noturno);
  font-size: 13px;
  color: var(--apagado-noturno);
}

/* ─── páginas de texto (privacidade, termos) ─── */
.documento { max-width: 760px; margin: 0 auto; padding: 80px 24px 96px; }
.documento h1 { font-size: 44px; letter-spacing: -1.4px; margin-top: 0; }
.documento h2 { font-size: 25px; letter-spacing: -0.5px; margin: 48px 0 0; max-width: none; }
.documento p,
.documento li { font-size: 17px; line-height: 1.65; color: var(--corpo); }
.documento ul { padding-left: 22px; }
.documento li { margin-top: 8px; }
.documento .data { margin-top: 12px; font-size: 15px; color: var(--apagado); }
.documento .voltar { display: inline-block; margin-bottom: 36px; font-size: 15px; font-weight: 500; }

/* ═══════════════════════ CELULAR ═══════════════════════ */
@media (max-width: 900px) {
  .faixa { padding: 56px 20px; }
  .topo { padding: 0 20px; height: 64px; }
  .topo nav a:not(.botao) { display: none; }
  .marca span { font-size: 20px; }
  .marca svg { width: 28px; height: 28px; }

  .capa { flex-direction: column; align-items: stretch; gap: 40px; padding: 44px 20px 48px; }
  h1 { font-size: 38px; letter-spacing: -1.3px; }
  h2 { font-size: 30px; letter-spacing: -0.8px; }
  .chamada { font-size: 16px; }
  .capa .chamada { font-size: 17px; }
  .capa__acoes { flex-direction: column; align-items: stretch; margin-top: 30px; }
  .capa__acoes .botao,
  .capa__acoes .botao--vazado { width: 100%; }
  .assinatura { margin-top: 30px; font-size: 19px; }

  .tela { width: 100%; border-radius: 20px; padding: 16px; }
  .resumo__valor { font-size: 32px; }

  .trio,
  .duo { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 32px; }
  .duo { gap: 26px; }
  .cartao { padding: 24px; }

  .grafico { margin-top: 28px; padding: 18px 14px 14px; }

  .migracao { flex-direction: column; align-items: stretch; gap: 28px; }
  .regra { width: 100%; padding: 24px; }
  .regra__frase { font-size: 21px; }

  .plano { padding: 26px; }
  .plano__preco { font-size: 40px; }

  .convite { flex-direction: column; align-items: stretch; gap: 26px; }
  .convite h2 { font-size: 28px; }
  .convite .botao { width: 100%; height: 54px; font-size: 17px; }

  .rodape { padding: 44px 20px; }
  .rodape__topo { flex-direction: column; gap: 32px; }
  .rodape__colunas { flex-direction: column; gap: 28px; }

  .documento { padding: 48px 20px 64px; }
  .documento h1 { font-size: 34px; }
  .documento h2 { font-size: 22px; margin-top: 40px; }
}