/* Términos de uso (/ui/terminos) y Privacidad (/ui/privacidad), 10-10-2026.
   No tienen maqueta propia: siguen el sistema de la propuesta (Documentacion_Mejoras/Portal_web/
   propuesta/sistema.css). Cabecera de tela como la del ranking, índice de secciones a la izquierda
   y una ficha de papel de lectura cómoda (unos 65 caracteres por línea). */

/* Un marco más estrecho que el común (240 de índice + 48 + 612 de hoja + márgenes): el título queda
   alineado con el índice y la hoja, y todo centrado en la pantalla. */
.cab-legal .marco, .lectura > .marco { max-width: 948px; }

/* ---------- Cabecera de la página ---------- */
.cab-legal .marco { padding-block: var(--e-xxl) var(--e-xl); display: grid; gap: var(--e-xs); }
.cab-legal h1 { font-size: var(--t-titulo); color: var(--marfil); }
.cab-legal .entradilla { max-width: 36em; }

/* ---------- Índice y hoja ---------- */
.lectura { padding-block: var(--e-xl) var(--e-3xl); }
.lectura > .marco { display: grid; grid-template-columns: 240px minmax(0, 612px); gap: var(--e-xxl); align-items: start; }

.indice { position: sticky; top: calc(76px + var(--e-l)); display: grid; gap: var(--e-s); padding-left: var(--e-m); border-left: 2px solid var(--oro); }
.indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.indice ol a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; padding: 5px 0; color: var(--marfil-suave); text-decoration: none; font-size: var(--t-secundario); line-height: 1.35; }
.indice ol a .num { font-family: var(--f-titulo); font-weight: 700; color: var(--oro); font-variant-numeric: lining-nums; }
.indice ol a .texto { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--d-foco) var(--curva-papel); justify-self: start; }
.indice ol a:hover, .indice ol a:focus-visible { color: var(--marfil); }
.indice ol a:hover .texto, .indice ol a:focus-visible .texto { background-size: 100% 1px; }
.indice .otra { border-top: 1px solid var(--filete); padding-top: var(--e-s); font-size: var(--t-secundario); }

/* 26em de texto a 18 px (612 - 2 × 72): unos 65 caracteres por línea con Alegreya Sans */
.hoja-legal { width: 100%; padding: var(--e-xxl) var(--e-3xl) var(--e-xl); }
.hoja-legal .fecha { font-size: var(--t-secundario); color: var(--tinta-suave); padding-bottom: var(--e-m); border-bottom: 2px solid var(--tinta); }

/* «En corto»: lo esencial antes de leer */
.en-corto { margin: var(--e-l) 0 var(--e-xl); padding: var(--e-m) var(--e-l); background: color-mix(in srgb, var(--arena-oscura) 35%, transparent); border-left: 3px solid var(--terracota-oscura); border-radius: 0 var(--r-fino) var(--r-fino) 0; display: grid; gap: var(--e-xs); }
.en-corto .sobretitulo { font-size: var(--t-minimo); }

.hoja-legal section { scroll-margin-top: 100px; }
.hoja-legal section + section { margin-top: var(--e-xl); padding-top: var(--e-xl); border-top: 1px solid var(--arena-oscura); }
.hoja-legal h2 { font-size: 1.625rem; line-height: 1.15; display: flex; gap: var(--e-s); align-items: baseline; margin-bottom: var(--e-s); }
.hoja-legal h2 .num { color: var(--terracota-oscura); font-weight: 800; font-variant-numeric: lining-nums; min-width: 1.1em; }
.hoja-legal p + p, .hoja-legal p + ul, .hoja-legal ul + p { margin-top: var(--e-s); }
.hoja-legal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-xs); }
.hoja-legal li { position: relative; padding-left: 22px; }
.hoja-legal li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; background: var(--terracota-oscura); transform: rotate(45deg); }
.hoja-legal b { font-weight: 700; }

.pie-hoja { margin-top: var(--e-xxl); padding-top: var(--e-l); border-top: 2px solid var(--tinta); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-s) var(--e-l); }
.pie-hoja p { font-size: var(--t-secundario); color: var(--tinta-suave); max-width: 32em; }

/* ---------- Tableta y móvil: el índice va encima de la hoja ---------- */
@media (max-width: 900px) {
  .lectura > .marco { grid-template-columns: minmax(0, 1fr); gap: var(--e-l); max-width: calc(612px + 2 * var(--e-l)); }
  .cab-legal .marco { max-width: calc(612px + 2 * var(--e-l)); }
  .indice { position: static; }
}
@media (max-width: 720px) {
  .cab-legal .marco { padding-block: var(--e-l); }
  .cab-legal .entradilla { font-size: var(--t-cuerpo); }
  .lectura { padding-block: var(--e-l) var(--e-xxl); }
  .indice ol a { padding-block: 4px; }
  .hoja-legal { padding: var(--e-l) var(--e-m) var(--e-l); }
  .en-corto { padding: var(--e-s) var(--e-m); margin-bottom: var(--e-l); }
  .hoja-legal h2 { font-size: 1.375rem; gap: var(--e-xs); }
  .hoja-legal section + section { margin-top: var(--e-l); padding-top: var(--e-l); }
  .pie-hoja { margin-top: var(--e-xl); }
}