/* About page. Builds on /base.css: a dark opening like the other sections, then a single
   readable column. */
.s-top { background: var(--noche); color: #fff; padding: 36px 0 48px; }
.s-top h1 { margin-top: 6px; max-width: 16ch; font-family: var(--cond); font-weight: 800; font-size: clamp(48px, 7.5vw, 96px); line-height: .9; }
.s-top .lead { margin-top: 16px; max-width: 60ch; font-size: 19px; color: var(--niebla); }
.s-body { max-width: 760px; padding-bottom: 72px; }
.s-body section { margin-top: 44px; }
.s-body h2 { font-family: var(--cond); font-weight: 800; font-size: 36px; line-height: 1; }
.s-body section > p { margin-top: 12px; max-width: 66ch; font-size: 18px; line-height: 1.6; }
.s-body a { text-decoration-color: var(--barro); text-decoration-thickness: 2px; }
.s-list { margin-top: 12px; border-top: 3px solid var(--noche); }
.s-list li { padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 17px; }
.s-tags { margin-top: 12px; border-top: 3px solid var(--noche); }
.s-tags div { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 6px 18px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.s-tags dt { display: flex; flex-wrap: wrap; gap: 6px; align-items: start; }
.tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; line-height: 1.5; background: #ecedeb; color: #3d4447; }
.tag-ofi { background: #e6edf4; color: var(--volcan); }
.tag-aqui { background: #fbeee6; color: var(--barro-oscuro); }
.tag-duda { background: #fff4d6; color: #6b5200; }
.checked { margin-top: 40px; color: var(--gris); font-size: 14px; }
@media (max-width: 600px) {
  .s-tags div { grid-template-columns: minmax(0, 1fr); }
}