/* SentinelX — páginas legales (Términos, Privacidad, Reembolsos): texto largo para LEER.
   Sin cajas (principios de UI del dueño): el espacio y la tipografía ordenan; solo las tablas llevan líneas finas. */
.documento{max-width:760px;padding:56px 0 96px}
.documento .volver{margin-bottom:28px;font-size:14px}
.documento h1{font:600 clamp(32px,4.4vw,46px)/1.1 var(--fuente-titulo);letter-spacing:-.025em;margin-bottom:10px}
.documento h2{font:600 22px/1.3 var(--fuente-titulo);color:var(--texto);letter-spacing:-.01em;margin:48px 0 14px;scroll-margin-top:90px}
.documento h3{font:600 17px/1.4 var(--fuente-titulo);color:var(--texto);margin:30px 0 10px}
.documento p{font-size:16px;line-height:1.7;margin:0 0 14px;color:var(--texto-2);text-wrap:pretty}
.documento strong{color:var(--texto);font-weight:600}
.documento code{font:500 14px/1 "Cascadia Mono",Consolas,monospace;color:var(--acento);background:var(--wash);padding:2px 6px;border-radius:6px}
.documento ul,.documento ol{margin:0 0 16px;padding-left:22px}
.documento ul{list-style:disc}.documento ol{list-style:decimal}
.documento li{font-size:16px;line-height:1.65;margin-bottom:8px;color:var(--texto-2)}
.documento li::marker{color:var(--texto-3)}
.documento a:not(.enlace){color:var(--acento)}
.tabla{overflow-x:auto;margin:6px 0 22px}
.tabla table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55}
.tabla th{text-align:left;font-weight:600;color:var(--texto);padding:10px 14px 10px 0;border-bottom:1px solid var(--borde-alto);vertical-align:bottom}
.tabla td{padding:10px 14px 10px 0;border-bottom:1px solid var(--borde);vertical-align:top;color:var(--texto-2)}
.resumen{font-size:18px!important;color:var(--texto)!important;line-height:1.6!important;margin-bottom:28px!important}

/* =====================================================================
   Términos y Privacidad por apartados (Entrada 310: el dueño no quiere deslizar). Igual que en la app:
   índice a la izquierda, un apartado a la vez y páginas si no cabe (legal.js). Sin JavaScript: todo seguido.
   Sin cajas: el índice marca el apartado actual con un fondo suave, como el menú lateral de la aplicación.
   ===================================================================== */
main.legal{flex:1;padding:30px 0 0}
.lector{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-areas:"cabeza cabeza" "indice hojas" "indice pag";column-gap:56px;align-items:start}
.lector-cabeza{grid-area:cabeza;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.lector-cabeza h1{font:600 clamp(28px,3.2vw,38px)/1.1 var(--fuente-titulo);letter-spacing:-.02em}
.ver-indice{display:none;white-space:nowrap;font:600 14px var(--fuente);color:var(--acento);background:none;border:0;padding:8px 0;cursor:pointer}
.indice{grid-area:indice;position:sticky;top:90px}
.indice ol{display:flex;flex-direction:column;gap:1px}
.indice a{display:block;padding:4px 12px;border-radius:9px;font-size:13.5px;line-height:1.3;color:var(--texto-2);transition:background .16s var(--curva),color .16s var(--curva)}
.indice a:hover{background:var(--wash);color:var(--texto)}
.indice a[aria-current]{background:var(--wash-alto);color:var(--blanco);box-shadow:inset 0 0 0 1px var(--borde-alto)}
.indice .grupo ol{margin:2px 0 4px}
.indice .grupo ol a{padding-left:26px;font-size:13px}
.lector.activo .indice .grupo ol{display:none}
.lector.activo .indice .grupo.abierto ol{display:flex}
.lector.activo .indice .grupo.abierto>a{color:var(--texto)}
.hojas{grid-area:hojas;max-width:760px}
.apartado{padding-bottom:36px}
.apartado h2{font:600 22px/1.3 var(--fuente-titulo);color:var(--texto);letter-spacing:-.01em;margin-bottom:14px}
.grupo-de{font-size:13px;color:var(--texto-3);margin-bottom:4px}
.texto p{font-size:15.5px;line-height:1.65;margin:0 0 12px;color:var(--texto-2);text-wrap:pretty}
.texto strong{color:var(--texto);font-weight:600}
.texto code{font:500 13.5px/1 "Cascadia Mono",Consolas,monospace;color:var(--acento);background:var(--wash);padding:2px 6px;border-radius:6px}
.texto ul,.texto ol{margin:0 0 14px;padding-left:22px}
.texto ul{list-style:disc}.texto ol{list-style:decimal}
.texto li{font-size:15.5px;line-height:1.6;margin-bottom:7px;color:var(--texto-2)}
.texto li::marker{color:var(--texto-3)}
.texto a{color:var(--acento)}
.texto .tabla{overflow:visible}
.texto .tabla table{font-size:14px}
/* Con JavaScript: un apartado a la vez, en el alto que queda en la pantalla */
.lector.activo .hojas{overflow:hidden}
.lector.activo .indice{overflow-y:auto;scrollbar-width:thin}
.lector.activo .apartado{display:none;padding-bottom:0}
.lector.activo .apartado.visible{display:block}
.apartado.entra{animation:legal-entra .16s cubic-bezier(.2,.8,.2,1)}
@keyframes legal-entra{from{opacity:0}to{opacity:1}}
.paginacion{grid-area:pag;max-width:760px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 18px}
.paso{font:600 14.5px var(--fuente);color:var(--acento);background:none;border:0;padding:8px 0;cursor:pointer}
.paso:hover{text-decoration:underline}
.paso[hidden]{display:inline-block;visibility:hidden}
.num{font-size:13px;color:var(--texto-3)}
@media (prefers-reduced-motion:reduce){.apartado.entra{animation:none}}
/* Pantalla estrecha: el índice se abre con «Índice» y ocupa el sitio del texto */
@media (max-width:900px){
  .lector{grid-template-columns:minmax(0,1fr);grid-template-areas:"cabeza" "indice" "hojas" "pag";column-gap:0}
  .lector.activo .ver-indice{display:inline-block}
  .lector.activo .indice{display:none;position:static}
  .lector.activo.indice-abierto .indice{display:block;margin-bottom:20px}
  .lector.activo.indice-abierto .hojas,.lector.activo.indice-abierto .paginacion{display:none}
  .indice{position:static;margin-bottom:24px}
}