/* ============================================================
   Páginas legales — la casa en modo lectura: oscuro, medida
   cómoda, índice lateral pegajoso y cero ruido.
   ============================================================ */
:root{
  --bg:#0b0c0f; --ink:#fff; --ink2:#c3c9d4; --muted:#8b93a1;
  --accent:#ff5f00; --accent-text:#ff7a2e;
  --line:rgba(255,255,255,.08); --panel:#14161c;
  --font-d:'Poppins',sans-serif;
  --margen:clamp(1.25rem,4vw,3rem);
}
/* Selección de texto: naranja de marca con tinta negra (7,9:1 de
   contraste; en blanco se quedaba en 2,9:1). Misma regla en todas las
   hojas del sitio, que cada página carga las suyas. */
::selection{background:#ff5f00;color:#0b0c0f;text-shadow:none}

*{box-sizing:border-box}
html{scrollbar-color:#ff5f00 #0e1015;scrollbar-width:thin;scroll-behavior:smooth}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0b0c0f}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff7620,#c74b00);
  border-radius:99px;border:3px solid #0b0c0f}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.7 var(--font-d);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* cabecera fina: logo + volver */
.lg-top{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1.2rem var(--margen);border-bottom:1px solid var(--line)}
.lg-logo img{display:block;height:46px;width:auto}
.lg-volver{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;
  font-weight:600;color:var(--ink2);padding:.55rem 1.1rem;border-radius:99px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);
  transition:color .3s,border-color .3s,background .3s}
.lg-volver i{font-style:normal;color:var(--accent);transition:transform .35s}
.lg-volver:hover{color:var(--ink);border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.1)}
.lg-volver:hover i{transform:translateX(-4px)}

.lg-main{max-width:72rem;margin-inline:auto;
  padding:clamp(3rem,7vh,5.5rem) var(--margen) clamp(4rem,9vh,7rem)}
.lg-cab{margin-bottom:clamp(2.5rem,5vh,4rem)}
.lg-cab h1{margin:0;font-weight:800;text-transform:uppercase;line-height:1.05;
  letter-spacing:-.02em;font-size:clamp(2rem,4.6vw,3.4rem);text-wrap:balance}

.lg-cuerpo{display:grid;gap:clamp(2rem,4vw,4.5rem);align-items:start}
@media (min-width:900px){.lg-cuerpo{grid-template-columns:15.5rem minmax(0,1fr)}}

/* índice pegajoso con el efecto LineSidebar: cada entrada se desplaza,
   colorea y alarga su marcador según la cercanía del puntero (--effect
   lo anima un rAF con suavizado exponencial; sin transiciones CSS) */
.lg-indice{position:sticky;top:1.6rem}
.lg-indice p{margin:0 0 .9rem;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.ls-lista{list-style:none;margin:0;padding:.3rem 0 .3rem 56px;
  display:flex;flex-direction:column;gap:14px}
.ls-item{--effect:0;position:relative;display:block}
.ls-item::before{content:"";position:absolute;inset:-5px -28px} /* diana amplia */
.ls-label{position:relative;display:inline-flex;align-items:baseline;
  font-size:.9rem;line-height:1.2;white-space:nowrap;
  color:color-mix(in srgb,var(--accent) calc(var(--effect)*100%),var(--muted));
  transform:translateX(calc(var(--effect)*16px))}
.ls-marker{position:absolute;top:50%;left:-56px;height:1px;width:44px;
  background:color-mix(in srgb,var(--accent) calc(var(--effect)*100%),#4a4f58);
  transform-origin:left center;
  transform:translateY(-50%) scaleX(calc(.7 + var(--effect)*.5))}
/* tic corto entre entradas, que también crece con la cercanía */
.ls-lista li:not(:last-child) .ls-item::after{content:"";position:absolute;
  top:calc(100% + 7px);left:-56px;height:1px;width:22px;background:#4a4f58;
  opacity:.5;transform-origin:left center;
  transform:translateY(-50%) scaleX(calc(.7 + var(--effect)*.6))}
/* cuando el índice ya no cabe al lado, fuera: en móvil solo el texto */
@media (max-width:899px){
  .lg-indice{display:none}
}

/* el texto: medida cómoda y jerarquía clara */
.lg-texto{max-width:68ch}
.lg-texto h2{display:flex;align-items:baseline;gap:.75rem;margin:2.6em 0 .7em;
  font-size:1.35rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;
  scroll-margin-top:1.5rem}
.lg-texto h2:first-child{margin-top:0}
.lg-texto h2::before{content:"";flex:none;width:.55rem;height:.55rem;
  border-radius:50%;background:var(--accent);transform:translateY(-.1em)}
.lg-texto p{margin:0 0 1.15em;color:var(--ink2)}
.lg-texto ul{margin:0 0 1.3em;padding-left:1.2rem;color:var(--ink2);
  display:grid;gap:.45em}
.lg-texto li::marker{color:var(--accent)}

.lg-pie{display:flex;flex-flow:row wrap;justify-content:space-between;gap:.8rem 2rem;
  padding:1.4rem var(--margen);border-top:1px solid var(--line);
  font-size:.85rem;color:var(--muted)}
.lg-pie nav{display:flex;gap:1.6rem}
.lg-pie a{transition:color .3s}
.lg-pie a:hover{color:var(--ink)}