*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
button { font-family: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { overflow-wrap: break-word; }

/* Bilingual content toggle — client JS sets html[data-lang] */
html[data-lang="pt"] [data-lang="en"] { display: none; }
html[data-lang="en"] [data-lang="pt"] { display: none; }
/* Before JS runs, default to Portuguese to avoid a flash of both languages */
html:not([data-lang]) [data-lang="en"] { display: none; }