/*
  Estilo das duas páginas de leitura da Cadeira Cheia: termos.html e
  privacidade.html. Mesma paleta e mesmas fontes da página de venda
  (index.html) — fundo claro, tinta roxo-escuro e o rosa da logo —, mas
  montado pra ler texto corrido: coluna estreita, linha folgada, nada de
  efeito.
*/
:root {
  --fundo: #FFFAF9;
  --fundo-2: #FBEFEE;
  --linha: #F1DFDD;
  --tinta: #2A1A1D;
  --tinta-2: #6A525E;
  --rosa: #A62957;
  --rosa-escuro: #8F2350;
  --rosa-tint: #FCE3EC;
  --titulo: 'Bricolage Grotesque', 'Manrope', sans-serif;
  --corpo: 'Manrope', -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--tinta);
  font-family: var(--corpo); font-size: 16.5px; line-height: 1.7;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--rosa-tint); color: var(--rosa-escuro); }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: 4px; }
a { color: var(--rosa); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--rosa-escuro); }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }

.topo { position: sticky; top: 0; z-index: 5; background: var(--fundo); border-bottom: 1px solid var(--linha); }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.topo .marca { display: inline-flex; line-height: 0; }
.topo .marca img { height: 44px; width: auto; }
.topo .entrar {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--rosa); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background-color .18s ease;
}
.topo .entrar:hover { background: var(--rosa-escuro); color: #fff; }

main { padding: clamp(40px, 7vw, 76px) 0 clamp(56px, 8vw, 96px); }
h1 {
  font-family: var(--titulo); font-weight: 700; font-size: clamp(34px, 5.4vw, 54px);
  line-height: 1.02; letter-spacing: -0.035em; margin: 0; text-wrap: balance;
}
.atualizado { margin: 14px 0 0; color: var(--tinta-2); font-size: 14.5px; }
.abre { margin: 26px 0 0; font-size: 18px; line-height: 1.6; color: var(--tinta-2); max-width: 60ch; }

/* o resumo: o que a página diz, em quatro linhas, pra quem não vai ler tudo */
.resumo { margin: 34px 0 0; padding: 22px 24px; background: var(--fundo-2); border-radius: 20px; }
.resumo h2 { margin: 0 0 10px; font-size: 17px; }
.resumo ul { margin: 0; padding: 0; list-style: none; }
.resumo li { position: relative; padding-left: 28px; margin-top: 8px; font-size: 15.5px; line-height: 1.55; }
.resumo li svg { position: absolute; left: 0; top: 3px; color: var(--rosa); }

h2 {
  font-family: var(--titulo); font-weight: 700; font-size: clamp(21px, 2.6vw, 25px);
  line-height: 1.2; letter-spacing: -0.02em; margin: 52px 0 12px; text-wrap: balance;
}
h3 { font-family: var(--corpo); font-weight: 800; font-size: 16.5px; margin: 26px 0 6px; }
p, li { max-width: 68ch; }
p { margin: 0 0 14px; }
main ul { margin: 0 0 14px; padding-left: 20px; }
main li { margin-bottom: 6px; }
main li::marker { color: var(--rosa); }
strong { font-weight: 800; }

.contato { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.contato a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--linha); background: #fff; color: var(--tinta); font-size: 14.5px; font-weight: 700; text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.contato a:hover { border-color: var(--rosa); color: var(--rosa-escuro); }
.contato svg { color: var(--rosa); flex-shrink: 0; }

footer { border-top: 1px solid var(--linha); padding: 26px 0 34px; font-size: 14px; color: var(--tinta-2); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer a { color: var(--tinta); font-weight: 600; text-decoration: none; }
footer a:hover { color: var(--rosa-escuro); text-decoration: underline; }
footer a[aria-current] { color: var(--rosa-escuro); }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .abre { font-size: 16.5px; }
  .resumo { padding: 18px 18px; border-radius: 18px; }
  h2 { margin-top: 42px; }
}