/* Los documentos legales de la web 06 (en producción desde el 8-oct-2026): /legal, /terminos, /privacidad, /accesibilidad, /marcas y
   /divulgaciones (lib/sitio/paginas/documentos.mjs, public/sitio/js/documentos.js). Un documento sobrio: la portada con la Vault a la
   derecha; cada sección, una pantalla (una parada) con el texto en una columna de lectura y la Vault detrás, casi apagada; en
   escritorio, el índice fijo del lateral marca la sección que se lee; al final, «Estado del producto» con la Vault en su hueco. */

.doc > .pantalla > .contenedor, .doc-cierre > .contenedor { width: 100%; }

/* ---------- Portada del documento: el título a la izquierda, la Vault a la derecha (estación «derecha») ---------- */
.doc-portada-in { max-width: min(620px, 50vw); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.doc-portada .titular-xl { font-size: clamp(2.5rem, 5.6vw, 5rem); }
.doc-portada .entradilla { max-width: 40ch; }
.sin-corte { white-space: nowrap; }

/* ---------- Las secciones: una pantalla cada una, el texto en la columna central ---------- */
/* la rejilla de lectura: el índice en la columna de la izquierda, el texto en la del centro */
.doc-rejilla { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 44rem) minmax(0, .55fr); column-gap: clamp(32px, 5vw, 88px); }
/* menos aire arriba y abajo que una .pantalla corriente: una sección larga cabe entera antes */
.doc-sec.pantalla { padding-top: calc(var(--barra-h) + 20px); padding-bottom: 20px; }
.doc-texto { grid-column: 2; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.doc-texto h2 { max-width: 30ch; }
.doc-texto p { font-size: 1.0625rem; line-height: 1.72; color: var(--t-apoyo); max-width: 68ch; text-wrap: pretty; overflow-wrap: break-word; }
.doc-texto p b { color: var(--t1); font-weight: 560; }
.js:not(.rm) .doc-texto p[data-revela] { transition-delay: .14s; }

/* ---------- El índice del lateral: fijo, a media altura; aparece en las secciones y marca la que se lee ---------- */
.doc-indice { position: fixed; left: 0; right: 0; top: 50%; z-index: 12; transform: translate3d(0, -50%, 0); pointer-events: none;
  opacity: 0; transition: opacity .45s var(--e-sal); }
.doc-indice.visto, .doc-indice:focus-within { opacity: 1; transition: opacity .6s var(--e-sal) .1s; }
/* escondido sigue en el orden del tabulador (documentos.js lleva a la primera sección al recibir el foco), pero no recibe clics */
.doc-indice ol { grid-column: 1; max-width: 232px; display: flex; flex-direction: column; }
.doc-indice.visto ol { pointer-events: auto; }
.doc-indice a { display: block; padding: 7px 0 7px 16px; border-left: 1px solid rgba(237, 237, 237, .14); font-size: .875rem; line-height: 1.35; color: var(--t2); transition: color .3s, border-color .3s; }
.doc-indice a:hover { color: var(--t1); }
.doc-indice a[aria-current] { color: var(--t1); border-left-color: var(--t1); }
[data-tema="claro"] .doc-indice a { border-left-color: rgba(15, 15, 15, .14); }
[data-tema="claro"] .doc-indice a[aria-current] { border-left-color: var(--t1); }

/* ---------- El cierre, como la portada: el título, la versión y «Estado del producto» a la izquierda; la Vault, en el hueco de la
   derecha; el pie, debajo ---------- */
.doc-cierre { place-items: center stretch; text-align: left; }
.doc-cierre-in { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.doc-colofon { display: flex; flex-direction: column; gap: 8px; }
.doc-cierre .enlace-grande { font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 500; letter-spacing: -.02em; }

/* ---------- Tableta: sin el índice; el texto, en una columna de lectura a la izquierda ---------- */
@media (max-width: 1099px) {
  .doc-indice { display: none; }
  .doc-rejilla { display: block; }
  .doc-texto { max-width: 46rem; }
}

/* ---------- Móvil: la portada abajo (la Vault arriba); las secciones, de arriba abajo; el cierre, abajo (la Vault encima) ---------- */
@media (max-width: 760px) {
  .doc-portada { justify-content: flex-end; }
  .doc-portada-in { gap: 18px; max-width: none; }
  .doc-portada .titular-xl { font-size: clamp(2.375rem, 11vw, 3rem); }
  .doc-sec.pantalla { padding-top: calc(var(--barra-h) + 16px); padding-bottom: 16px; }
  .doc-texto { gap: 14px; }
  .doc-texto h2 { font-size: 1.5rem; }
  .doc-texto p { font-size: 1rem; line-height: 1.65; }
  .doc-cierre { align-items: end; padding-bottom: 32px; }
}