/* ============================================================
   CBD · LEGAL COUTURE · v1
   Páginas legales con la misma voz luxury del resto del sitio:
   índice navegable, lectura cómoda, motion sutil, oro moderado.
   ============================================================ */

/* — Lectura: ragged-right elegante (la justificación creaba
   "ríos" de espacio, sobre todo en móvil) — */
main article p, main article li {
  text-align: left !important;
  hyphens: none !important;
  text-wrap: pretty;
}
h1, h2 { text-wrap: balance; }
::selection { background: rgba(122, 7, 18, 0.16); }

/* — Barra de progreso de lectura (hairline dorado bajo el nav) — */
.lg-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 60;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #C9A24E, #ECD7A4);
}

/* — Índice del documento — */
.lg-toc {
  margin: 0 0 2.4rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid rgba(201, 162, 78, 0.35);
  border-radius: 16px;
  background: rgba(255, 254, 252, 0.65);
}
.lg-toc-title {
  font-family: 'Marcellus', serif;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9A7B36;
  margin: 0 0 0.9rem;
}
.lg-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 2rem;
}
@media (max-width: 640px) { .lg-toc ol { columns: 1; } }
.lg-toc li { break-inside: avoid; margin: 0; }
.lg-toc a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.42rem 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #5A3A30;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 78, 0.14);
  transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.lg-toc li:last-child a { border-bottom: 0; }
.lg-toc a:hover { color: #7A0712; padding-left: 0.35rem; }
.lg-toc a .n {
  font-family: 'Italiana', serif;
  font-size: 0.78rem;
  color: #C9A24E;
  flex-shrink: 0;
  min-width: 1.4em;
}

/* — Reveal sutil de artículos al hacer scroll — */
@media (prefers-reduced-motion: no-preference) {
  article.lg-rv {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  article.lg-rv.lg-in { opacity: 1; transform: none; }
}
/* Failsafe: al imprimir, todo visible siempre */
@media print {
  article.lg-rv { opacity: 1 !important; transform: none !important; }
  .lg-top, .lg-progress { display: none !important; }
}

/* — Anclas con aire bajo el nav sticky — */
article[id] { scroll-margin-top: 90px; }

/* — CTA final: vino profundo, oro como hairline (no oro macizo) — */
.lg-cta a {
  background: transparent !important;
  color: #ECD7A4 !important;
  border: 1px solid rgba(236, 215, 164, 0.55);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.lg-cta a:hover {
  background: rgba(236, 215, 164, 0.12) !important;
  border-color: #ECD7A4;
}

/* — Volver arriba, discreto — */
.lg-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(122, 7, 18, 0.3);
  background: rgba(251, 246, 237, 0.92);
  backdrop-filter: blur(8px);
  color: #7A0712;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 55;
}
.lg-top.lg-show { opacity: 1; pointer-events: auto; transform: none; }
.lg-top:hover { background: #7A0712; color: #FBF6ED; }

/* — Focus visible — */
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(201, 162, 78, 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}