/* ==========================================================================
   La Voz de Dios · PÁGINAS LEGALES
   Solo el layout de los documentos largos (políticas de privacidad, términos).
   Todo lo reutilizable vive en componentes.css; esta hoja se encola
   únicamente en esas páginas.

   Un texto legal se lee distinto que el resto del sitio: nadie lo lee entero
   y de corrido, se busca una cosa concreta. De ahí las tres decisiones de
   esta hoja: un índice que se queda pegado al bajar, un resumen de tres
   líneas antes del texto largo, y una medida de lectura corta con titulares
   pequeños, para que diez apartados no parezcan diez secciones de portada.
   ========================================================================== */

/* --- Cabecera del documento -----------------------------------------------
   Sin migas de pan y sin la fecha en pastilla: en una página a la que se
   llega desde el pie, esas dos piezas repetían lo que ya dice el titular y
   alargaban la entrada sin aportar. */
.lg-hero{padding-block:var(--e-4) var(--e-3);text-align:center}
.lg-hero h1{max-width:16ch;margin:0 auto}
.lg-hero__sub{
  margin:20px auto 0;max-width:52ch;
  font-size:clamp(16px,1.5vw,20px);color:var(--c-tinta-70);
}

/* --- Rejilla: índice a un lado, documento al otro -------------------------- */
.lg-sec{padding-block:var(--e-4) var(--e-6)}
.lg-rej{
  display:grid;grid-template-columns:262px minmax(0,1fr);
  gap:clamp(28px,4vw,72px);align-items:start;
}

/* --- Índice --------------------------------------------------------------- */
.lg-indice{
  position:sticky;
  /* Debajo de la cabecera, que mide lo mismo que en el resto del sitio. */
  top:calc(clamp(74px,9vh,104px) + 24px);
  border:var(--borde);border-radius:var(--r-medio);
  padding:22px 22px 24px;background:var(--c-superficie);
}
.lg-indice h2{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-micro);text-transform:uppercase;
  letter-spacing:var(--ls-etiqueta);color:var(--c-tinta-70);
  margin-bottom:14px;
}
.lg-indice ol{counter-reset:lg;display:grid;gap:4px}
/* El número no vive en una columna aparte: va pegado al texto, con el ancho
   justo de dos cifras. Antes sobraba hueco a la izquierda porque <ol> llevaba
   la sangría del navegador (ya normalizada en base.css) y encima el número
   reservaba 1.4em. */
.lg-indice li{
  counter-increment:lg;
  display:flex;gap:9px;align-items:baseline;
  padding:5px 8px;margin-inline:-8px;
  border-radius:var(--r-boton);
  transition:transform var(--t-rapida) var(--curva),
             background-color var(--t-rapida) var(--curva);
}
.lg-indice li::before{
  content:counter(lg);
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-micro);color:var(--c-tinta-40);
  min-width:1.15em;text-align:right;flex:none;
  transition:color var(--t-rapida);
}
.lg-indice a{
  font-size:var(--fs-chico);line-height:1.45;color:var(--c-tinta);
  transition:color var(--t-rapida);
}
/* El hover se nota en toda la fila, no solo en la palabra: se desplaza, se
   enciende el número y el fondo se aclara. Es el mismo gesto que ya hacen los
   enlaces del pie, que también se corren al pasar por encima. */
.lg-indice li:hover,
.lg-indice li:focus-within{transform:translateX(5px);background-color:var(--c-tinta-07)}
.lg-indice li:hover::before,
.lg-indice li:focus-within::before{color:var(--c-accion)}
.lg-indice li:hover a,
.lg-indice li:focus-within a{color:var(--c-enlace)}
@media (prefers-reduced-motion:reduce){
  .lg-indice li{transition:background-color var(--t-rapida)}
  .lg-indice li:hover,.lg-indice li:focus-within{transform:none}
}

/* --- El documento --------------------------------------------------------- */
.lg-doc{max-width:68ch}
.lg-doc h2{
  /* Más pequeños que un titular de sección: aquí son rótulos de apartado, no
     reclamos. La línea de arriba es lo que separa un apartado del anterior. */
  font-size:var(--fs-h3);line-height:var(--lh-h3);
  margin-top:var(--e-4);padding-top:var(--e-3);
  border-top:2px solid var(--c-tinta-14);
  /* Para que al saltar desde el índice el título no quede bajo la cabecera. */
  scroll-margin-top:calc(clamp(74px,9vh,104px) + 24px);
}
.lg-doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.lg-doc p{margin-top:16px;font-size:var(--fs-medio);line-height:1.75;color:var(--c-tinta)}
.lg-doc h2+p{margin-top:18px}
.lg-doc ul{margin-top:16px;display:grid;gap:12px}
.lg-doc ul li{
  position:relative;padding-left:26px;
  font-size:var(--fs-medio);line-height:1.7;color:var(--c-tinta);
}
.lg-doc ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:9px;height:9px;border-radius:50%;background:var(--c-accion);
}
/* Repliegue por si un enlace del texto se queda sin su clase .enlace-t: al
   menos se ve que es un enlace. El efecto bueno (la línea que crece) lo pone
   .enlace-t, que es la pieza del sistema.
   :not(.btn) NO es un adorno. Sin él, esta regla le pinta el texto de azul a
   los botones que haya dentro, que ya traen su propio color: es justo lo que
   pasó con los dos botones del final. Ver «Reglas de oro» en /sistema/. */
.lg-doc a:not(.btn){color:var(--c-enlace)}
.lg-doc code{
  font-family:Consolas,"SF Mono",Menlo,monospace;font-size:.9em;
  background:var(--c-tinta-07);border-radius:var(--r-boton);padding:2px 6px;
}
.lg-doc .pend{margin-right:8px}

/* --- Resumen de arriba ----------------------------------------------------- */
.lg-resumen{
  border:var(--borde);border-radius:var(--r-medio);
  background:var(--c-lima-t);padding:clamp(22px,3vw,32px);
  margin-bottom:var(--e-4);
}
.lg-resumen h2{
  font-size:var(--fs-h4);margin:0;padding:0;border:0;
}
.lg-resumen ul{margin-top:16px}
.lg-resumen ul li::before{background:var(--c-tinta)}

@media (max-width:980px){
  /* El índice deja de estar pegado y pasa arriba, en dos columnas: en móvil
     una barra lateral pegada se come media pantalla. */
  .lg-rej{grid-template-columns:1fr}
  .lg-indice{position:static;top:auto}
  .lg-indice ol{grid-template-columns:1fr 1fr;gap:10px 20px}
  .lg-doc{max-width:none}
}
@media (max-width:560px){
  .lg-indice ol{grid-template-columns:1fr}
}