/*
  As páginas de texto do site (privacidade e termos). Os valores vêm de
  `design-system/tokens/theme.ts`, como no `index.html`, com o token de origem ao lado.
*/
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(nunito-700.ttf) format('truetype'); }
@font-face { font-family: Nunito; font-weight: 900; font-display: swap; src: url(nunito-900.ttf) format('truetype'); }

:root {
  --vinho: #8E2433;        /* stage.base, brand.base: wine[500] */
  --vinho-claro: #FDECEE;  /* wine[50], texto secundário sobre o palco (7.51:1) */
  --branco: #FFFFFF;       /* stage.on */
  --papel: #FAF6F1;        /* bg.page */
  --tinta: #121210;        /* fg.primary */
  --tinta-2: #33322D;      /* fg.secondary */
  --tinta-3: #54524A;      /* ink[600]: o fg.tertiary (ink[500]) dá 4.00 sobre papel */
  --linha: #E8E6DF;        /* border.subtle: ink[200] */
  --margem: 20px;          /* space.gutter */
  --raio: 18px;            /* radius.card */
}

* { box-sizing: border-box; margin: 0; }
body { background: var(--papel); color: var(--tinta-2); font: 700 17px/1.55 Nunito, system-ui, sans-serif; }
.coluna { max-width: 680px; margin: 0 auto; padding: 0 var(--margem); }
a { color: var(--vinho); }
a:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }

.palco { background: var(--vinho); color: var(--branco); padding: 28px 0 32px; }
.marca { color: var(--vinho-claro); text-decoration: none; font-weight: 900; }
h1 { font-weight: 900; font-size: clamp(32px, 8vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin-top: 12px; }
.versao { color: var(--vinho-claro); margin-top: 8px; font-size: 15px; }

main { padding-top: 28px; padding-bottom: 8px; }
main > p, main > ul, main > table, .destaque { margin-top: 12px; }
h2 { color: var(--tinta); font-weight: 900; font-size: 22px; line-height: 1.25; margin-top: 32px; }
h3 { color: var(--tinta); font-weight: 900; font-size: 17px; margin-top: 20px; }
strong { color: var(--tinta); font-weight: 900; }
ul { padding-left: 22px; }
li + li { margin-top: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 8px 10px 0; border-bottom: 1px solid var(--linha); }
th { color: var(--tinta); font-weight: 900; }

/* Fundo vinho claro, sem borda: o mesmo destaque do modal dos termos no app. */
.destaque { background: var(--vinho-claro); border-radius: var(--raio); padding: 4px 20px 20px; margin-top: 32px; }
.destaque h2 { margin-top: 16px; }

.rodape { margin-top: 48px; padding: 28px 0 40px; border-top: 1px solid var(--linha); text-align: center; color: var(--tinta-3); font-size: 14px; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin-bottom: 16px; }
.rodape a { color: inherit; }
.rodape-links a { padding: 12px 2px; font-size: 15px; color: var(--tinta-2); }  /* 44 de alvo: layout.tapTargetMin */
.rodape p + p { margin-top: 4px; }