/* Páginas legales: misma marca que la home, sin 3D. Rejilla TRON estática en CSS. */
.doc-page body { min-height: 100svh; display: flex; flex-direction: column; }
.doc-page .chrome { background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 92%, transparent), transparent); }

.doc-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.doc-grid__floor {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%;
  background-image:
    linear-gradient(color-mix(in oklab, var(--sc-accent) 30%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--sc-accent) 30%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%);
  opacity: 0.32;
}
.doc-grid__glow { position: absolute; inset: auto 0 0 0; height: 55%; background: radial-gradient(60% 70% at 50% 100%, color-mix(in oklab, var(--sc-accent) 14%, transparent), transparent 70%); }

.doc { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: calc(var(--sc-10) + var(--sc-4)) var(--sc-gutter) var(--sc-9); }
.doc__back { display: inline-flex; align-items: center; gap: var(--sc-2); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); text-decoration: none; padding: var(--sc-2) 0; }
.doc__back::before { content: ""; width: 18px; height: 1px; background: var(--sc-accent); transition: width 180ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .doc__back:hover { color: var(--sc-ink); } .doc__back:hover::before { width: 28px; } }
.doc__title { margin-top: var(--sc-6); }
.doc__date { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.doc__body { margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline); }
.doc__body h2 { font-family: var(--sc-font-display); font-stretch: var(--wide); font-weight: 560; font-size: var(--sc-t-xl); letter-spacing: -0.015em; line-height: 1.15; margin: var(--sc-8) 0 var(--sc-3); }
.doc__body h2:first-child { margin-top: 0; }
.doc__body p { margin: 0 0 var(--sc-4); color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-ink-soft)); line-height: 1.72; max-width: 64ch; text-wrap: pretty; }
.doc__body a { color: var(--sc-accent); }
.doc__body strong { color: var(--sc-ink); font-weight: 600; }

.doc-foot { position: relative; z-index: 1; border-top: 1px solid var(--sc-hairline); padding: var(--sc-6) var(--sc-gutter) max(var(--sc-6), env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); justify-content: space-between; align-items: center; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-canvas) 86%, transparent); }
.doc-foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.doc-foot a { color: var(--sc-ink-soft); padding: var(--sc-2) 0; }
.doc-foot a[aria-current="page"] { color: var(--sc-accent); }
.doc-foot p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .doc__back::before { transition: none; } }