body {
  font-family: var(--font-body);
  background: var(--hielo);
  color: var(--texto-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

    /* ─── Barra superior ─────────────────────────────────────────── */
    .topbar {
      background: var(--tinta);
      padding: 1rem clamp(1.5rem, 5vw, 4rem);
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .topbar__inner {
      max-width: 1000px;
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .topbar__logo {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }
    .topbar__logo img {
      display: block;
      height: 34px;
      width: auto;
    }
    .topbar__back {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8125rem;
      letter-spacing: 0.04em;
      color: var(--texto-claro-mute);
      text-decoration: none;
      transition: color 0.2s;
    }
    .topbar__back:hover { color: var(--blanco); }

    /* ─── Documento ──────────────────────────────────────────────── */
    .doc {
      flex: 1;
      padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    }
    .doc__inner { max-width: 760px; margin-inline: auto; }

    .doc__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--azul);
      margin-bottom: 1.25rem;
    }
    .doc__eyebrow::before {
      content: '';
      width: 1px;
      height: 1.75rem;
      background: currentColor;
    }
    .doc__title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.75rem);
      font-weight: 420;
      line-height: 1.12;
      letter-spacing: -0.015em;
      color: var(--tinta);
    }
    .doc__meta {
      margin-top: 0.875rem;
      font-size: 0.8125rem;
      color: var(--texto-mute);
    }
    .doc__intro {
      margin-top: 1.5rem;
      font-size: 1rem;
      line-height: 1.75;
      color: var(--texto-mute);
      padding-bottom: 2rem;
      border-bottom: 1px solid var(--linea-clara);
    }

    .doc h2 {
      font-family: var(--font-display);
      font-size: 1.1875rem;
      font-weight: 560;
      color: var(--tinta);
      margin-top: 2.75rem;
      margin-bottom: 0.75rem;
    }
    .doc h2 .doc__num {
      font-style: italic;
      font-weight: 340;
      color: var(--azul);
      margin-right: 0.5rem;
    }
    .doc p {
      font-size: 0.9375rem;
      line-height: 1.8;
      color: var(--texto-mute);
      margin-bottom: 0.875rem;
    }
    .doc ul {
      margin: 0 0 0.875rem 1.125rem;
      padding: 0;
    }
    .doc li {
      font-size: 0.9375rem;
      line-height: 1.8;
      color: var(--texto-mute);
      margin-bottom: 0.375rem;
    }
    .doc a {
      color: var(--azul);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .doc strong { color: var(--tinta); font-weight: 700; }

    /* ─── Footer ─────────────────────────────────────────────────── */
    .footer {
      background: var(--tinta-deep);
      border-top: 1px solid rgb(255 255 255 / 0.12);
      padding: 2.5rem clamp(1.5rem, 5vw, 4rem);
    }
    .footer__inner {
      max-width: 1000px;
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
    }
    .footer__brand { display: flex; flex-direction: column; gap: 0.375rem; }
    .footer__logo {
      font-family: var(--font-display);
      font-size: 1.125rem;
      font-weight: 560;
      letter-spacing: 0.22em;
      color: var(--blanco);
    }
    .footer__slogan {
      font-family: var(--font-display);
      font-style: italic;
      font-weight: 340;
      font-size: 0.875rem;
      color: var(--texto-claro-mute);
    }
    .footer__links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
    .footer__link {
      font-size: 0.8125rem;
      color: rgb(255 255 255 / 0.55);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer__link:hover { color: var(--blanco); }
    .footer__copy {
      max-width: 1000px;
      margin: 1.5rem auto 0;
      font-size: 0.75rem;
      color: rgb(255 255 255 / 0.4);
    }

    @media (max-width: 640px) {
      .footer__inner { flex-direction: column; align-items: flex-start; }
    }