/*
 * O visual das páginas de conteúdo (perguntas, guias).
 *
 * Elas são HTML puro, servidas fora da aplicação React: existem para quem lê
 * sem executar JavaScript — os robôs que alimentam os assistentes — e para
 * quem chega por eles. Por isso o estilo é um arquivo só, sem build: nada
 * aqui pode depender do bundle.
 *
 * As cores são as mesmas do produto (tailwind.config.js). Quando a paleta
 * mudar lá, muda aqui — são dois lugares, e é o preço de a página abrir sem
 * bundle nenhum.
 */
:root{--papel:#F6F3EB;--papel3:#FFFFFF;--tinta:#1E1E1E;--tinta2:#4A524C;--linha:#DFD9C9;--sinal:#2E7D4F;--sinal-escuro:#20613F;--neblina:#EDF1E9}
  *{box-sizing:border-box}
  body{margin:0;background:var(--papel);color:var(--tinta);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
  .faixa{border-bottom:1px solid var(--linha);background:var(--papel3)}
  .dentro{margin:0 auto;max-width:44rem;padding:0 20px}
  header .dentro{display:flex;align-items:center;justify-content:space-between;height:64px}
  .marca{font-family:'Bree Serif',Georgia,serif;font-size:19px;color:var(--tinta);text-decoration:none}
  .botao{display:inline-block;background:var(--sinal);color:#fff;text-decoration:none;font-weight:600;padding:12px 20px;border-radius:3px}
  .botao:hover{background:var(--sinal-escuro)}
  h1{font-family:'Bree Serif',Georgia,serif;font-size:34px;line-height:1.15;margin:40px 0 10px;font-weight:400}
  .chamada{color:var(--tinta2);font-size:17px;margin:0 0 28px}
  h2{font-size:18px;margin:34px 0 8px;line-height:1.35}
  p{margin:0 0 14px;color:var(--tinta2)}
  p strong{color:var(--tinta)}
  a{color:var(--sinal-escuro)}
  .selo{display:inline-block;background:var(--neblina);color:var(--sinal-escuro);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:3px}
  .fecho{margin:44px 0;padding:24px;background:var(--papel3);border:1px solid var(--linha);border-radius:4px;text-align:center}
  footer{border-top:1px solid var(--linha);margin-top:40px;padding:24px 0;font-size:14px;color:#7C837D}
  footer a{color:#7C837D;margin-right:16px}
  @media(max-width:600px){h1{font-size:28px}}
  .guias{border-top:1px solid var(--linha);margin-top:40px;padding-top:24px}
  .guias h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#7C837D;margin:0 0 12px}
  .guias a{display:block;margin-bottom:8px}
  .destaque{background:var(--neblina);border-left:3px solid var(--sinal);padding:14px 18px;margin:20px 0;border-radius:0 3px 3px 0}
  .destaque p{margin:0;color:var(--tinta)}
  table.dados{border-collapse:collapse;width:100%;margin:18px 0;font-size:15px}
  table.dados th{text-align:left;padding:8px 10px 8px 0;border-bottom:2px solid var(--linha);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#7C837D}
  table.dados td{padding:9px 10px 9px 0;border-bottom:1px solid var(--linha);color:var(--tinta2);vertical-align:top}