/* ── Editorial blocks (C64) ──
   Static text on app-like pages (eventos, match, loja, home, pedigree, contato)
   so reviewers and crawlers see real content in the HTML source.
   Separate file because index.html does not load style.css.
   <body> is a flex column on most pages: `margin: auto` would disable stretch
   and shrink the block to its content (same trap as .page-container), so the width
   is explicit. Colours fall back for pages that do not define the variables. */
.bloco-editorial {
  align-self: center;
  width: min(900px, calc(100% - 32px));
  box-sizing: border-box;
  margin: 36px auto 12px;
  padding: 28px 32px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sombra, 0 4px 20px rgba(78,52,46,.12));
  color: var(--marrom-medio, #795548);
  font-family: 'Nunito', sans-serif;
}
.bloco-editorial h2 {
  font-family: 'Righteous', cursive;
  font-size: 22px;
  color: var(--marrom, #4E342E);
  margin: 0 0 12px;
}
.bloco-editorial h3 {
  font-family: 'Righteous', cursive;
  font-size: 17px;
  color: var(--marrom, #4E342E);
  margin: 22px 0 8px;
}
.bloco-editorial p,
.bloco-editorial li { font-size: 15px; line-height: 1.8; }
.bloco-editorial p { margin: 0 0 12px; }
.bloco-editorial ul,
.bloco-editorial ol { padding-left: 22px; margin: 0 0 12px; }
.bloco-editorial li { margin-bottom: 4px; }
.bloco-editorial strong { color: var(--marrom, #4E342E); }
.bloco-editorial a { color: var(--laranja, #FF7043); font-weight: 700; }

@media (max-width: 600px) {
  .bloco-editorial { padding: 22px 18px; }
  .bloco-editorial h2 { font-size: 20px; }
}