.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.section { padding-block: var(--space-6); position: relative; }
.invert { background: var(--ink); color: var(--paper); }

/* Franja negra de sección, como en las páginas de la gaceta */
.band {
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
  text-align: center; font-size: var(--step-0); padding: 0.5rem 1rem;
}
.invert .band { background: var(--paper); color: var(--ink); }

.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.section-head h2 { font-size: var(--step-4); }
.section-head p { font-size: var(--step-1); max-width: 48ch; }

/* Marco grueso, como la portada */
.frame { border: var(--line) solid var(--ink); }
.invert .frame { border-color: var(--paper); }