/* ═══════════════════════════════════════════════════════════
   Nimboo Cloud — Los documentos legales

   Con la estructura de saleskit.nimboo.com.mx, que es la que le
   gusta a Adriano y con razon: barra arriba, indice fijo a la
   izquierda y el documento en una tarjeta blanca ancha.

   La version anterior era una columna angosta al centro. Adriano
   lo dijo el 11 agosto 2026: "parece que esta todo apachurrado
   para iPhone". Y un aviso de privacidad es justo lo contrario de
   una lectura de telefono: se abre en la computadora, se recorre
   buscando una seccion, y muchas veces se imprime.

   Las medidas salieron de medir SalesKit, no de aproximarlas:
   indice de 280, documento de 872, tope de 1200, tarjeta con 48
   por 56 de aire y esquina de 18. Lo que cambia es la paleta y la
   tipografia, que aqui son las de Cloud.
   ═══════════════════════════════════════════════════════════ */

body.legal-body {
  background: var(--paper);
  min-height: 100vh;
}

/* ─── La barra de arriba ──────────────────────────────────
   No es la barra lateral de la plataforma: estas paginas se leen
   ANTES de tener cuenta. Quien va a entregar su RFC tiene derecho
   a saber que haremos con el antes de darlo. */

.lg-barra {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 62px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.lg-barra-dentro {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lg-barra img { height: 26px; width: auto; display: block; }

.lg-volver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-sm);
  color: var(--ink-60);
  transition: color var(--d-fast);
}

.lg-volver:hover { color: var(--cloud-deep); }
.lg-volver svg { width: 14px; height: 14px; }

/* ─── El armazon ──────────────────────────────────────────
   Indice fijo a la izquierda, documento a la derecha. Es lo que
   convierte un texto largo en algo que se puede consultar: sin
   el indice hay que hacer scroll adivinando. */

.lg-cuerpo {
  max-width: 1200px;
  margin-inline: auto;
  padding: 34px 28px 80px;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lg-indice { position: sticky; top: 90px; }

.lg-indice-tit {
  padding: 0 14px 12px;
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.lg-indice a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: var(--t-sm);
  color: var(--ink-60);
  transition: background var(--d-fast), color var(--d-fast);
}

.lg-indice a:hover { background: var(--cloud-mist); color: var(--cloud-ink); }

.lg-indice a.is-on {
  background: var(--cloud-mist);
  color: var(--cloud-ink);
  font-weight: var(--w-semibold);
}

/* La tarjeta de contacto, al pie del indice. Un documento legal
   sin a quien escribirle es un documento que no sirve. */
.lg-contacto {
  margin-top: 22px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
}

.lg-contacto-tit {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 8px;
}

.lg-contacto a {
  font-size: var(--t-sm);
  color: var(--cloud-deep);
  word-break: break-all;
}

/* ─── El documento ────────────────────────────────────────── */

.lg-doc {
  background: var(--white);
  border: 1px solid rgba(58, 82, 108, .06);
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(58, 82, 108, .04);
  padding: 48px 56px;
}

.lg-kicker {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cloud-deep);
  margin-bottom: 14px;
}

.lg-doc h1 {
  font-family: var(--display);
  font-size: 32px;
  font-weight: var(--w-bold);
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: var(--black);
  margin: 0 0 8px;
}

.lg-meta {
  font-size: var(--t-sm);
  color: var(--ink-60);
  margin-bottom: 32px;
}

/* La entrada en dos renglones: lo que diria si solo se leyera
   una cosa. Un documento legal que empieza por el articulado no
   lo lee nadie. */
.lg-resumen {
  padding: 20px 22px;
  margin-bottom: 34px;
  border-radius: var(--r-md);
  background: var(--cloud-mist);
  border-left: 3px solid var(--cloud);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-80);
}

.lg-resumen strong { color: var(--cloud-ink); }

.lg-doc h2 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: var(--w-bold);
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--black);
  margin: 40px 0 14px;
  padding-top: 4px;
  scroll-margin-top: 96px;
}

.lg-doc h2:first-of-type { margin-top: 0; }

.lg-doc h3 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: var(--w-semibold);
  color: var(--black);
  margin: 24px 0 10px;
}

.lg-doc p {
  font-size: var(--t-base);
  line-height: 1.75;
  color: var(--ink-80);
  margin: 0 0 14px;
}

.lg-doc strong { color: var(--black); font-weight: var(--w-bold); }

.lg-doc ul, .lg-doc ol {
  margin: 0 0 16px;
  padding-left: 22px;
}

.lg-doc li {
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink-80);
  margin-bottom: 6px;
}

.lg-doc a { color: var(--cloud-deep); text-decoration: underline; }

/* ─── La tabla ────────────────────────────────────────────── */

.lg-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 22px;
  font-size: var(--t-sm);
}

.lg-tabla th {
  text-align: left;
  padding: 11px 14px;
  background: var(--paper);
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-60);
  border-bottom: 1px solid var(--line);
}

.lg-tabla th:first-child { border-radius: var(--r-sm) 0 0 0; }
.lg-tabla th:last-child { border-radius: 0 var(--r-sm) 0 0; }

.lg-tabla td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.6;
  color: var(--ink-80);
}

.lg-tabla tr:last-child td { border-bottom: 0; }

/* ─── Bloques con aviso ───────────────────────────────────── */

.lg-nota {
  padding: 16px 18px;
  margin: 6px 0 22px;
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-80);
}

.lg-nota.es-ojo {
  background: var(--amber-pale);
  border-left: 3px solid var(--amber);
}

/* ─── El pie ──────────────────────────────────────────────── */

.lg-pie {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-60);
}

.lg-pie strong { color: var(--black); }

/* ─── Responsivo ──────────────────────────────────────────
   El indice se vuelve una fila de fichas arriba del documento.
   Sigue sirviendo para saltar entre documentos, que es lo unico
   que hace en una pantalla angosta. */

@media (max-width: 940px) {
  .lg-cuerpo { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px 60px; }
  .lg-indice { position: static; }
  .lg-indice-tit { padding-left: 2px; }

  .lg-indice nav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .lg-indice a {
    flex-shrink: 0;
    padding: 8px 13px;
    border: 1px solid var(--line);
    background: var(--white);
    white-space: nowrap;
  }

  .lg-contacto { margin-top: 14px; }
  .lg-doc { padding: 30px 22px; border-radius: var(--r-lg); }
  .lg-doc h1 { font-size: 25px; }
  .lg-doc h2 { font-size: 18px; }
  .lg-tabla { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ─── Al imprimir ─────────────────────────────────────────
   Un aviso de privacidad se imprime y se archiva. Sin esto salen
   el indice y la barra, y el documento se parte en dos columnas
   inutiles. */

@media print {
  body.legal-body { background: var(--white); }
  .lg-barra, .lg-indice { display: none; }
  .lg-cuerpo { display: block; max-width: none; padding: 0; }
  .lg-doc { border: 0; box-shadow: none; padding: 0; }
  .lg-doc h2 { page-break-after: avoid; }
  .lg-tabla { page-break-inside: avoid; }
}

/* ─── Lo que NO hacemos ───────────────────────────────────
   Va aparte y con su tache porque es la parte que la gente de
   verdad quiere leer de un aviso de privacidad. Un parrafo que
   diga "no vendemos tus datos" perdido entre otros veinte no
   tranquiliza a nadie. */

.lg-nunca {
  margin: 6px 0 22px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--paper);
}

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

.lg-nunca li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--ink-80);
}

.lg-nunca li:last-child { margin-bottom: 0; }

.lg-nunca svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--red);
}