/* ============================================================
   Tela 4 — insight (e demais telas de conteúdo)
   Medidas de OnboardingD0InsightViewController:
   título 32 bold · dado 18 na cor principal · fonte 13 secundária ·
   cartão accent 18% raio 12 · CTA fixo no rodapé.
   Revelação em 3 grupos: 0,02s / 0,52s / 1,02s, fade de 0,4s.
   ============================================================ */

.insight-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.insight {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 28px var(--gutter) 24px;   /* respiro para o último item passar do esmaecido */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.insight::-webkit-scrollbar { display: none; }

.insight-titulo {
  margin: 0;
  font-size: 32px; line-height: 1.14; font-weight: 700; letter-spacing: -.025em;
  text-wrap: balance;
}
.insight-dado {
  margin: 16px 0 0;
  font-size: 18px; line-height: 1.42; color: var(--ink);
}
.insight-fonte {
  margin: 16px 0 0;
  font-size: 13px; line-height: 1.4; color: var(--ink-2);
}

/* cartão do fecho */
.insight-card {
  margin-top: 24px;
  background: rgba(255, 126, 30, .18);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.insight-card-topo { display: flex; align-items: center; gap: 8px; }
.insight-card-topo img { width: 24px; height: 24px; border-radius: 6px; display: block; }
.insight-card-topo span { font-size: 15px; font-weight: 700; color: var(--ink); }
.insight-card-txt {
  margin: 10px 0 0;
  font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink-2);
}

/* Revelação escalonada — mesmos tempos do app.

   O estado VISÍVEL é o padrão; a classe só esconde. Se a transição não
   rodar (aba em segundo plano, por exemplo), tirar a classe cai direto
   em opacity 1 em vez de deixar o conteúdo — e o botão — preso invisível. */
.reveal { transition: opacity .4s ease; }
.reveal.esta-oculto { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
}

@media (max-height: 700px) {
  .insight { padding-top: 20px; }
  .insight-titulo { font-size: 28px; }
  .insight-dado { font-size: 17px; margin-top: 12px; }
  .insight-card { margin-top: 18px; }
}

/* insight2: mesmo cartão, sem cabeçalho de ícone — só o texto, padding 16 */
.insight-card.e-simples { padding: 16px; }

/* As telas com rodapé fixo aninham o bloco da pergunta dentro da área de
   rolagem. Sem isto os dois paddings somam e o título desce ~28px em
   relação às telas de pergunta simples. Todos os títulos do funil precisam
   começar na mesma altura. */
.insight > .pergunta { padding: 0; flex: none; overflow: visible; }