/* ==========================================================================
   SECCIONES DEL ARCHIVO (blanco frío)
   ========================================================================== */
.about, .beyond {
  position: relative;
  padding: var(--space-6) var(--gutter-r) var(--space-6) var(--gutter);
}
.kicker { color: var(--blue-ui); }

/* ---------- 01 · Sobre mí ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.5rem);
  row-gap: var(--space-5);
  padding-top: calc(var(--space-6) + 2rem);
}
.about__body { grid-column: 7 / 13; display: grid; gap: var(--space-3); align-content: start; padding-top: 4vh; }
.about__title { font-size: clamp(2.4rem, 1.2rem + 4.2vw, 6rem); font-weight: 800; letter-spacing: var(--track-display); line-height: 0.92; }
.about__title em { color: var(--blue); letter-spacing: -0.02em; }
.about__text { display: grid; gap: 1.1em; max-width: 52ch; font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 899px) {
  .about__body { grid-column: 1 / -1; }
  .about__body { padding-top: 0; }
}

/* ---------- Pie ---------- */
.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  padding: 1.5rem var(--gutter-r) calc(1.5rem + env(safe-area-inset-bottom, 0px)) var(--gutter);
  background: var(--blue); color: var(--on-blue);
  border-top: 1px solid rgb(255 255 255 / 0.3);
  font-size: var(--fs-meta); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
}
.site-footer a { min-height: 24px; }