/* Estilos das páginas estáticas (privacidade, termos, obrigado, 404).
   Carregado só por <link>, por causa da CSP (style-src 'self'). */

/* Fonte da landing (Google Fonts, liberado na CSP em style-src e font-src). */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* Cores da landing, em um lugar só. */
:root {
  --cor-texto: #0B0D17;      /* texto principal */
  --cor-texto-suave: #4A4F63; /* texto secundário (contraste AA sobre o fundo) */
  --cor-acao: #2E3BFF;       /* botões e links */
  --cor-fundo: #F8F9FC;      /* fundo da página */
  --cor-borda: #D9DCE8;      /* linhas e bordas leves */
  --cor-branco: #FFFFFF;
}

/* Base: fundo explícito e leitura confortável em tela estreita. */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* Contêiner central com 16px de margem lateral e largura máxima de ~720px. */
.pagina {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Cabeçalho com logo e nome, que levam à página inicial. */
.topo {
  padding: 20px 0 8px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--cor-texto);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
}

.marca img {
  width: 32px;
  height: 32px;
}

/* Conteúdo principal. */
main {
  padding: 16px 0 32px;
}

h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 0 0 16px;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 32px 0 12px;
}

h3 {
  font-size: 1.05rem;
  margin: 20px 0 8px;
}

p,
ul,
ol {
  margin: 0 0 16px;
}

ul,
ol {
  padding-left: 1.25rem;
}

li + li {
  margin-top: 6px;
}

strong {
  font-weight: 700;
}

code {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: 0.92em;
  background: #EEF0F7;
  padding: 1px 4px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* Links com contraste AA e área de toque confortável. */
a {
  color: var(--cor-acao);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Foco visível para teclado. */
a:focus-visible,
button:focus-visible,
.tabela-scroll:focus-visible {
  outline: 3px solid var(--cor-acao);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Botão principal da página (uma ação por tela). */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  background: var(--cor-acao);
  color: var(--cor-branco);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.botao:hover {
  color: var(--cor-branco);
  text-decoration: underline;
}

/* Link secundário, sem cara de botão. */
.link-secundario {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* Caixa de destaque para o próximo passo. */
.destaque {
  margin: 24px 0;
  padding: 16px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}

/* Tabela de permissões: rolagem horizontal só dentro do contêiner. */
.tabela-scroll {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 16px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}

.tabela-scroll table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.tabela-scroll th,
.tabela-scroll td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cor-borda);
}

.tabela-scroll th {
  font-weight: 700;
  background: #EEF0F7;
}

/* Rodapé com contato, privacidade e termos. */
.rodape {
  border-top: 1px solid var(--cor-borda);
  padding: 20px 0 32px;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.rodape ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.rodape li + li {
  margin-top: 0;
}

.rodape a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Telas muito estreitas: títulos menores para caber em 320px. */
@media (max-width: 360px) {
  h1 {
    font-size: 1.5rem;
  }
}