/* Base do redesign. Nada aqui pode vazar para o markup do Journal 2:
   todo seletor comeca em .xara- ou esta dentro de um. */
.xara-container {
  max-width: var(--xara-largura);
  margin: 0 auto;
  padding: 0 var(--xara-gutter);
}
.xara-secao        { padding: 48px 0; }
.xara-secao--creme { background: var(--xara-surface); color: var(--xara-ink); }
.xara-secao--verde { background: var(--xara-surface-dark); color: var(--xara-ink-on-dark); }
.xara-secao--sage  { background: var(--xara-sage-tint); color: var(--xara-ink); }

.xara-h1, .xara-h2, .xara-h3 {
  font-family: var(--xara-fonte-display);
  font-weight: 600;
  margin: 0;
  line-height: 1.12;
  text-wrap: balance;
}
.xara-h1 { font-size: clamp(1.75rem, 7vw, 3.9rem); }
.xara-h2 { font-size: clamp(1.35rem, 5vw, 2.5rem); }
.xara-h1 em, .xara-h2 em { font-style: italic; color: var(--xara-accent); }

.xara-eyebrow {
  font-family: var(--xara-fonte-corpo);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--xara-accent-texto);
}
.xara-secao--verde .xara-eyebrow { color: var(--xara-gold); }

.xara-lead { font-size: 1rem; line-height: 1.6; }
.xara-secao--verde .xara-lead { color: var(--xara-muted-on-dark); }

@media (min-width: 980px) {
  .xara-secao { padding: 88px 0; }
  .xara-container { padding: 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  [class^="xara-"], [class*=" xara-"] { transition: none !important; animation: none !important; }
}