/* ==========================================================================
   Ruta 5 — Sistema de Documentos Legales
   --------------------------------------------------------------------------
   Infraestructura reutilizable para /legal/*
   Construida ÍNTEGRAMENTE sobre los tokens de r5.css. Cero dependencias.

   Componentes (prefijo .lg-):
     .lg-doc            → LegalLayout      (grilla documento + aside)
     .lg-hero           → LegalHero        (portada del documento)
     .lg-toc            → LegalIndex       (índice con scroll spy)
     .lg-prose          → tipografía de lectura larga
     .lg-h2 / .lg-h3    → LegalSection / LegalSubsection
     .lg-anchor         → LegalAnchor      (copiar enlace de sección)
     .lg-callout        → LegalCallout     (nota / aviso / importante)
     .lg-defs           → LegalDefinition  (lista de definiciones)
     .lg-meta           → LegalLastUpdated + tiempo de lectura
     .lg-docnav         → navegación entre documentos
     .lg-top            → botón "volver arriba"
     .lg-hub            → índice general /legal/

   Regla de oro del sistema: azul + crema enmarcan, rojo es el único acento,
   hairlines de 1px, esquinas rectas, mucho aire.
   ========================================================================== */

:root {
  --lg-measure: 68ch;         /* ancho de lectura cómodo (~72–78 caracteres) */
  --lg-aside-w: 268px;        /* columna del índice en desktop */
  --lg-gap: 72px;             /* separación documento ↔ índice */
  --lg-anchor-offset: 96px;   /* compensación del nav sticky para los anchors */
}

/* Todos los targets de anchor respiran bajo el nav sticky */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
.lg-doc [id] { scroll-margin-top: var(--lg-anchor-offset); }

/* Salto de accesibilidad al contenido */
.lg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--r5-azul); color: #fff;
  padding: 12px 20px; border-radius: 2px;
  font-family: var(--font-mono); font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track); text-transform: uppercase;
}
.lg-skip:focus { left: var(--pad-x); top: 12px; text-decoration: none; }

/* ==========================================================================
   1 · LegalHero — portada del documento
   ========================================================================== */
.lg-hero {
  background: var(--r5-azul);
  color: var(--r5-blanco);
  padding: 64px var(--pad-x) 56px;
}
.lg-hero__inner { max-width: 1280px; margin: 0 auto; }

/* Breadcrumbs */
.lg-crumbs {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 32px; padding: 0; list-style: none;
}
.lg-crumbs li { display: flex; align-items: center; gap: 8px; }
.lg-crumbs li + li::before { content: "/"; color: rgba(255,255,255,0.3); }
.lg-crumbs a { color: rgba(255,255,255,0.58); transition: color var(--dur-fast) var(--ease-standard); }
.lg-crumbs a:hover { color: #fff; text-decoration: none; }
.lg-crumbs [aria-current="page"] { color: rgba(255,255,255,0.95); }

.lg-hero__eyebrow { color: rgba(255,255,255,0.62); display: block; margin-bottom: 20px; }

.lg-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--r5-blanco);
  font-size: clamp(2.25rem, 6.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin: 0;
}
/* Itálica editorial sobre azul = Amarillo Mote.
   Regla del manual (type-editorial): el rojo no se usa sobre azul,
   el acento cálido sí. Contraste 5.9:1 sobre --r5-azul. */
.lg-hero__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  color: var(--r5-amarillo);
}

.lg-hero__lead {
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  max-width: 62ch;
  margin: 24px 0 0;
}

/* Bajada editorial en itálica — Celeste Frío sobre azul, igual que el
   subtítulo del manual (type-editorial). Es el "aire" del bloque. */
.lg-hero__italic {
  display: block;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--r5-celeste);
  margin-top: 18px;
}

/* Marca editorial de esquina — mismo recurso que .hero__corner del home */
.lg-hero__corner {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  justify-content: space-between;
  margin-top: 40px;
  color: rgba(255,255,255,0.5);
}

/* LegalLastUpdated + tiempo estimado de lectura */
.lg-meta {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--r5-line-onnavy);
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.lg-meta strong { color: rgba(255,255,255,0.92); font-weight: var(--fw-regular); }
.lg-meta__item { display: inline-flex; align-items: center; gap: 8px; }
.lg-meta__dot { width: 5px; height: 5px; background: var(--r5-rojo); border-radius: 999px; flex: none; }

/* ==========================================================================
   2 · LegalLayout — grilla documento + índice
   ========================================================================== */
.lg-doc {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px var(--pad-x) 96px;
  display: block;
}
@media (min-width: 1080px) {
  .lg-doc {
    display: grid;
    grid-template-columns: var(--lg-aside-w) minmax(0, 1fr);
    gap: var(--lg-gap);
    align-items: start;
    padding-top: 72px;
  }
}

/* ==========================================================================
   3 · LegalIndex — índice automático con scroll spy
   ========================================================================== */
.lg-aside { min-width: 0; }

@media (min-width: 1080px) {
  .lg-aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    max-height: calc(100vh - var(--nav-h) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
    /* scrollbar discreta */
    scrollbar-width: thin;
    scrollbar-color: var(--r5-line) transparent;
  }
  .lg-aside::-webkit-scrollbar { width: 6px; }
  .lg-aside::-webkit-scrollbar-thumb { background: var(--r5-line); border-radius: 999px; }
}

.lg-toc__label {
  display: block;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.lg-toc__list { list-style: none; margin: 0; padding: 0; }

.lg-toc a {
  display: block;
  position: relative;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-muted);
  padding: 7px 0 7px 16px;
  border-left: 1px solid var(--r5-line);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
  text-wrap: pretty;
}
.lg-toc a:hover { color: var(--r5-azul); text-decoration: none; border-left-color: var(--r5-azul); }

/* estado activo — el único uso del rojo en el índice */
.lg-toc a.is-active {
  color: var(--r5-azul);
  font-weight: var(--fw-semibold);
  border-left-color: var(--r5-rojo);
}

/* nivel 2 (subsecciones) */
.lg-toc__list--sub { margin: 0; }
.lg-toc__list--sub a { padding-left: 30px; font-size: 0.875rem; color: var(--text-muted); }

/* Índice colapsable en móvil / tablet */
.lg-toc--mobile {
  border: 1px solid var(--r5-line);
  border-radius: 2px;
  background: var(--surface-card);
  margin-bottom: 48px;
}
.lg-toc--mobile > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--type-caption-size);
  letter-spacing: var(--type-caption-track);
  text-transform: uppercase;
  color: var(--r5-azul);
}
.lg-toc--mobile > summary::-webkit-details-marker { display: none; }
.lg-toc--mobile > summary::after {
  content: "";
  width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease-standard);
}
.lg-toc--mobile[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.lg-toc--mobile > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.lg-toc--mobile .lg-toc__body { padding: 0 20px 20px; }
.lg-toc--mobile .lg-toc a { border-left-color: var(--r5-line); }

@media (min-width: 1080px) { .lg-toc--mobile { display: none; } }
.lg-toc--desk { display: none; }
@media (min-width: 1080px) { .lg-toc--desk { display: block; } }

/* Barra de progreso de lectura (hairline, sin ruido) */
.lg-progress {
  position: fixed; top: 0; left: 0; z-index: 55;
  height: 2px; width: 100%;
  background: transparent;
  pointer-events: none;
}
.lg-progress__bar {
  height: 100%; width: 0;
  background: var(--r5-rojo);
  transform-origin: 0 50%;
  transition: width 80ms linear;
}

/* ==========================================================================
   4 · LegalProse — tipografía de lectura larga
   Prioridad absoluta: legibilidad. Medida corta, interlineado amplio.
   ========================================================================== */
.lg-prose { min-width: 0; max-width: var(--lg-measure); }

.lg-prose p,
.lg-prose li {
  font-family: var(--font-sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.75;
  color: #34405C;            /* azul desaturado: contraste AA sobre crema */
  letter-spacing: 0.003em;
}
@media (min-width: 769px) {
  .lg-prose p, .lg-prose li { font-size: 1.125rem; line-height: 1.78; }
}

.lg-prose p { margin: 0 0 22px; }
.lg-prose p:last-child { margin-bottom: 0; }

.lg-prose strong { font-weight: var(--fw-semibold); color: var(--r5-azul); }
.lg-prose em { font-family: var(--font-editorial); font-style: italic; }

.lg-prose a:not(.lg-anchor):not(.r5-btn) {
  color: var(--r5-azul);
  text-decoration: underline;
  text-decoration-color: rgba(40,67,125,0.32);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.lg-prose a:not(.lg-anchor):not(.r5-btn):hover {
  color: var(--r5-rojo);
  text-decoration-color: var(--r5-rojo);
}

/* --- LegalSection ------------------------------------------------------- */
.lg-section { padding-top: 8px; }
.lg-section + .lg-section { margin-top: 64px; }
@media (min-width: 769px) { .lg-section + .lg-section { margin-top: 80px; } }

.lg-h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 3.2vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--r5-azul);
  margin: 0 0 24px;
  padding-top: 28px;
  border-top: 1px solid var(--r5-line);
  display: flex; align-items: baseline; gap: 14px;
}
.lg-section:first-child .lg-h2 { border-top: 0; padding-top: 0; }

/* numeral mono a la izquierda del título */
.lg-h2__num {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  font-weight: var(--fw-regular);
  color: var(--r5-rojo);
  flex: none;
  transform: translateY(-2px);
}

.lg-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--r5-azul);
  margin: 40px 0 14px;
}
.lg-h3:first-child { margin-top: 0; }

/* --- LegalAnchor — copiar enlace de la sección --------------------------- */
.lg-anchor {
  flex: none;
  margin-left: auto;
  align-self: center;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.lg-h2:hover .lg-anchor,
.lg-anchor:focus-visible,
.lg-anchor.is-copied { opacity: 1; }
.lg-anchor:hover { color: var(--r5-rojo); border-color: var(--r5-line); }
.lg-anchor svg { width: 15px; height: 15px; display: block; }
.lg-anchor.is-copied { color: var(--r5-rojo); border-color: var(--r5-rojo); }

/* toque: siempre visible, no hay hover */
@media (hover: none) {
  .lg-anchor { opacity: 0.45; }
}

/* aviso "Enlace copiado" */
.lg-toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 70;
  transform: translate(-50%, 12px);
  background: var(--r5-azul); color: #fff;
  padding: 12px 22px; border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-standard), transform var(--dur) var(--ease-out);
}
.lg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* sección recién enfocada por anchor: destello sobrio */
@keyframes lgFlash {
  from { background: rgba(207,59,53,0.07); }
  to   { background: transparent; }
}
.lg-section:target { animation: lgFlash 1.4s var(--ease-out) 1; }
@media (prefers-reduced-motion: reduce) { .lg-section:target { animation: none; } }

/* --- Listas ------------------------------------------------------------- */
.lg-prose ul, .lg-prose ol { margin: 0 0 22px; padding: 0 0 0 4px; list-style: none; }
.lg-prose li { position: relative; padding-left: 26px; margin-bottom: 12px; }
.lg-prose li:last-child { margin-bottom: 0; }

.lg-prose ul > li::before {
  content: "";
  position: absolute; left: 4px; top: 0.78em;
  width: 6px; height: 1px;
  background: var(--r5-rojo);
}
.lg-prose ol { counter-reset: lgol; }
.lg-prose ol > li { counter-increment: lgol; }
.lg-prose ol > li::before {
  content: counter(lgol) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.95;
  color: var(--r5-rojo);
}
/* listas anidadas */
.lg-prose li > ul, .lg-prose li > ol { margin: 12px 0 0; }

/* lista literal a., b., c. */
.lg-prose ol.lg-list--alpha { counter-reset: lgalpha; }
.lg-prose ol.lg-list--alpha > li { counter-increment: lgalpha; }
.lg-prose ol.lg-list--alpha > li::before { content: counter(lgalpha, lower-alpha) ")"; }

/* --- LegalCallout ------------------------------------------------------- */
.lg-callout {
  border: 1px solid var(--r5-line);
  border-left: 2px solid var(--r5-azul);
  background: var(--surface-card);
  padding: 24px 26px;
  margin: 32px 0;
  border-radius: 0 2px 2px 0;
}
.lg-callout__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  color: var(--r5-azul);
  margin-bottom: 10px;
}
.lg-callout p { font-size: 1rem; line-height: 1.7; margin-bottom: 14px; }
.lg-callout p:last-child { margin-bottom: 0; }

.lg-callout--accent { border-left-color: var(--r5-rojo); }
.lg-callout--accent .lg-callout__label { color: var(--r5-rojo); }

.lg-callout--quiet {
  background: transparent;
  border: 0; border-left: 1px solid var(--r5-line);
  padding: 4px 0 4px 24px;
}

/* Bloque de marca — mismo substrato "Dorado" del manifiesto del home.
   Se reserva para el momento emocional del documento, uno por página. */
.lg-callout--brand {
  background: var(--r5-dorado);
  border: 0;
  border-left: 2px solid var(--r5-rojo);
  padding: 32px 30px;
  margin: 36px 0;
}
.lg-callout--brand .lg-callout__label { color: var(--r5-azul); opacity: 0.7; }
.lg-callout--brand p { color: var(--r5-azul); }

/* Cierre editorial en itálica roja — voz de .manifiesto__cierre */
.lg-promesa {
  font-family: var(--font-editorial) !important;
  font-style: italic;
  font-size: clamp(1.25rem, 3.4vw, 1.625rem) !important;
  line-height: 1.32 !important;
  color: var(--r5-rojo) !important;
  margin: 0 !important;
}

/* Sello mono de cierre — cápsula, el único elemento redondeado del sistema */
.lg-sello {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--text-muted);
  border-color: var(--border-hairline);
}

/* borrador / dato por confirmar — se elimina al publicar */
.lg-callout--draft { border-left-color: var(--r5-amarillo); background: #FDF7E9; }
.lg-callout--draft .lg-callout__label { color: #8A6410; }
.lg-todo {
  background: #FBEFCF;
  box-shadow: 0 0 0 1px #F1BC48 inset;
  padding: 1px 6px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: #6E4E06;
}

/* --- LegalDefinition ---------------------------------------------------- */
.lg-defs { margin: 0 0 8px; }
.lg-defs > div {
  padding: 20px 0;
  border-top: 1px solid var(--r5-line);
}
.lg-defs > div:last-child { border-bottom: 1px solid var(--r5-line); }
@media (min-width: 769px) {
  .lg-defs > div {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}
.lg-defs dt {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--r5-azul);
  margin: 0 0 6px;
}
@media (min-width: 769px) { .lg-defs dt { margin: 0; } }
.lg-defs dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: #34405C;
}

/* --- Tablas ------------------------------------------------------------- */
.lg-tablewrap { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.lg-table {
  width: 100%; min-width: 420px;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}
.lg-table th, .lg-table td {
  text-align: left;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--r5-line);
  line-height: 1.6;
  color: #34405C;
  vertical-align: top;
}
.lg-table thead th {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  color: var(--r5-azul);
  border-bottom: 1px solid var(--r5-azul);
  font-weight: var(--fw-regular);
  white-space: nowrap;
}

/* ==========================================================================
   5 · LegalFooter — cierre del documento
   ========================================================================== */
.lg-docfoot {
  margin-top: 88px;
  padding-top: 32px;
  border-top: 1px solid var(--r5-line);
}
.lg-docfoot__note {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.9;
}

/* navegación entre documentos legales */
.lg-docnav {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}
@media (min-width: 700px) { .lg-docnav { grid-template-columns: repeat(3, 1fr); } }
.lg-docnav a {
  display: block;
  border: 1px solid var(--r5-line);
  border-radius: 2px;
  background: var(--surface-card);
  padding: 18px 20px;
  color: var(--r5-azul);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  transition: border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-out);
}
.lg-docnav a:hover { border-color: var(--r5-azul); text-decoration: none; transform: translateY(-1px); }
.lg-docnav span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  margin-bottom: 8px;
}

/* ==========================================================================
   6 · Botón "Volver arriba"
   ========================================================================== */
.lg-top {
  position: fixed; right: 16px; bottom: 20px; z-index: 40;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--r5-azul); color: #fff;
  border: 0; border-radius: 2px;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-standard),
              transform var(--dur) var(--ease-out),
              visibility var(--dur), background var(--dur-fast);
  box-shadow: var(--shadow-pop);
}
.lg-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.lg-top:hover { background: var(--r5-rojo); }
.lg-top svg { width: 16px; height: 16px; }
@media (min-width: 769px) { .lg-top { right: 24px; bottom: 24px; } }

/* ==========================================================================
   7 · Hub /legal/ — índice general de documentos
   ========================================================================== */
.lg-hub { max-width: 1280px; margin: 0 auto; padding: 64px var(--pad-x) 96px; }
.lg-hub__grid { display: grid; gap: 1px; background: var(--r5-line); border: 1px solid var(--r5-line); border-radius: 2px; }
@media (min-width: 800px) { .lg-hub__grid { grid-template-columns: repeat(2, 1fr); } }

.lg-hubcard {
  background: var(--surface-card);
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background var(--dur-fast) var(--ease-standard);
}
a.lg-hubcard:hover { background: #FBFAF7; text-decoration: none; }
.lg-hubcard__kicker { color: var(--r5-rojo); }
.lg-hubcard__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--r5-azul);
  margin: 0;
}
.lg-hubcard__desc {
  font-family: var(--font-sans);
  font-size: 1rem; line-height: 1.65;
  color: #34405C; margin: 0;
}
.lg-hubcard__meta {
  margin-top: auto; padding-top: 18px;
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  letter-spacing: var(--type-micro-track);
  text-transform: uppercase;
  color: var(--text-muted);
}
.lg-hubcard--soon { opacity: 0.55; }

/* ==========================================================================
   8 · Impresión — el documento debe poder imprimirse limpio
   ========================================================================== */
@media print {
  .nav, .nav-menu, .lg-aside, .lg-top, .lg-progress, .lg-anchor,
  .lg-toast, .lg-docnav, .footer, .distribuir-fab { display: none !important; }
  .lg-hero { background: #fff !important; color: #000 !important; padding: 0 0 24px; }
  .lg-hero__title, .lg-hero__lead, .lg-meta, .lg-meta strong, .lg-crumbs { color: #000 !important; }
  .lg-doc { display: block; padding: 0; max-width: none; }
  .lg-prose { max-width: none; }
  .lg-prose p, .lg-prose li, .lg-defs dd { font-size: 10.5pt; line-height: 1.5; color: #000; }
  .lg-h2 { font-size: 14pt; break-after: avoid; }
  .lg-h3 { font-size: 11pt; break-after: avoid; }
  .lg-section { break-inside: auto; }
  .lg-callout--draft { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}