/* Base comum de todas as peças (post, carrossel, slide, thumbnail, landing).
   Não leva cor nem fonte da marca: isso vem de tokens.css e componentes.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--tipo-body-familia);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

/* Cada página de uma peça. O tamanho vem do <meta name="formato">, repetido aqui pelas classes. */
.pagina {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--margem-peca);
  background: var(--fundo);
  color: var(--texto);
}
.pagina--post { width: 1080px; height: 1350px; }
.pagina--slide { width: 1920px; height: 1080px; --margem-peca: 128px; }
.pagina--thumb { width: 1280px; height: 720px; --margem-peca: 64px; }
.pagina--story { width: 1080px; height: 1920px; }
.pagina--escura { background: var(--fundo-escuro); color: var(--texto-sobre-escuro); }
.pagina--apoio { background: var(--fundo-apoio); }

.empurra { margin-top: auto; }
.destaque { color: var(--destaque-sobre-claro); }
.pagina--escura .destaque { color: var(--destaque); }
.logo { height: 44px; width: auto; align-self: flex-start; }
.contador { font-family: var(--tipo-label-familia); font-size: 28px; opacity: .7; margin-left: auto; }
.button-primary, .button-secondary, .chip { white-space: nowrap; }
/* Cartão sobre o fundo de apoio usa o fundo principal: assim ele aparece mesmo se a cor do card for igual à do apoio. */
.pagina--apoio .card, .apoio .card { background: var(--fundo); color: var(--texto); }
.card h3 + p, .card h2 + p { margin-top: 8px; }

@media print {
  .pagina { break-after: page; }
}