/* ==========================================================================
   Paginas sencillas v5: /aviso-de-privacidad/ y /404.html (cabecera negra centrada, texto en la banda clara)
   ========================================================================== */
.page-head {
  padding-block: clamp(56px, 32px + 5vw, 120px) clamp(48px, 32px + 3vw, 88px);
  text-align: center;
  background: var(--black);
  color: var(--white);
}
.page-head .container { display: grid; justify-items: center; gap: var(--sp-3); }
.page-head h1 { width: min(100%, 18em); }
.page-head .lead { margin-top: var(--sp-3); margin-inline: auto; color: var(--ash); }
.page-head__meta { margin-top: var(--sp-4); }

/* Texto largo (lectura en negro sobre la banda clara) */
.prose { color: var(--black); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-10); font-size: var(--fs-26); letter-spacing: var(--tr-26); line-height: 1.15; color: var(--black); }
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose li { font-size: var(--fs-18); letter-spacing: var(--tr-18); line-height: 1.6; }
.prose ul { display: grid; gap: var(--sp-2); padding-left: 1.25rem; }
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.prose a:hover { text-decoration-thickness: 2px; }

/* 404: el codigo como dato, en gris terciario */
.e404__code {
  font-size: var(--fs-53);
  letter-spacing: var(--tr-53);
  line-height: 1;
  font-weight: 450;
  color: var(--smoke);
}
.e404__wa { margin-top: var(--sp-3); font-size: var(--fs-16); letter-spacing: var(--tr-16); }
.e404__nav { max-width: 760px; margin-inline: auto; text-align: left; }

/* Sin JS el header sale del flujo (base.css): la cabecera deja su espacio para que no quede debajo */
.no-js .site-main > .page-head:first-child { padding-top: calc(var(--header-h) + 40px); }