/* =====================================================================
   Leitura longa · Sistema B. Termos de Uso (Account/Terms) e Política de
   Privacidade (Home/Privacy), carregado por @section Styles nas duas.
   Corpo 15/24 com linha de ~70ch, títulos 800, documento num painel
   sem borda (sombra sh-1) sobre o fundo da página.
   A folga de baixo para o botão flutuante vem da .app-main (site.css).
   ===================================================================== */
.legal-wrapper {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--ct-text);
}
.legal-wrapper [id] { scroll-margin-top: 80px; }

/* Cabeçalho da página */
.legal-header { display: flex; flex-direction: column; gap: 4px; }
.legal-title {
  margin: 0;
  font-size: var(--ct-fs-title);
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ct-text);
}
.legal-subtitle {
  margin: 0;
  font-size: var(--ct-fs-body);
  line-height: 22px;
  color: var(--ct-text-soft);
}
.legal-date {
  margin: 4px 0 0;
  font-size: var(--ct-fs-caption);
  line-height: 16px;
  font-weight: 600;
  color: var(--ct-text-soft);
}

/* Documento */
.legal-doc {
  background: var(--ct-bg-soft);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-1);
  padding: 40px 48px;
}
.legal-section { padding: 32px 0; border-top: 1px solid var(--ct-line); }
.legal-section:first-child { padding-top: 0; border-top: 0; }
.legal-section:last-child { padding-bottom: 0; }

.legal-section-title {
  margin: 0 0 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--ct-fs-heading);
  line-height: 24px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ct-text);
}
.legal-section-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--ct-text-mute);
}
/* Quem chega por link direto (ex.: seção 9-A, a partir do CRM) vê onde caiu. */
.legal-section-title:target,
.legal-section-title:target .legal-section-icon,
.legal-section:target .legal-section-title,
.legal-section:target .legal-section-icon { color: var(--ct-blue-2); }

.legal-section-content {
  max-width: 70ch;
  font-size: var(--ct-fs-body);
  line-height: 24px;
  color: var(--ct-text-soft);
}
.legal-section-content p { margin: 0 0 12px; }
.legal-section-content p:last-child { margin-bottom: 0; }
.legal-section-content strong { font-weight: 700; color: var(--ct-text); }
.legal-section-content a {
  color: var(--ct-blue-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-section-content a:hover { color: var(--ct-blue-2); text-decoration-thickness: 2px; }

.legal-list {
  list-style: none;
  margin: 12px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.legal-list:last-child { margin-bottom: 0; }
.legal-list-item {
  position: relative;
  padding-left: 20px;
  color: var(--ct-text-soft);
}
.legal-list-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ct-text-mute);
}

/* Avisos dentro do documento: sem borda, fundo suave, ícone na cor do texto do estado */
.legal-alert,
.legal-warning,
.legal-highlight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ct-radius);
  font-size: var(--ct-fs-body);
  line-height: 24px;
  color: var(--ct-text);
}
.legal-alert > i,
.legal-warning > i,
.legal-highlight > i {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 24px;
}
.legal-alert strong,
.legal-warning strong,
.legal-highlight strong { font-weight: 700; color: var(--ct-text); }

.legal-alert { background: var(--ct-blue-soft); margin: 0 0 32px; }
.legal-alert > i { color: var(--ct-blue-2); }
.legal-warning { background: var(--ct-amber-soft); margin: 32px 0 0; }
.legal-warning > i { color: var(--ct-amber-text); }
.legal-highlight { background: var(--ct-surface); margin: 12px 0 0; }
.legal-highlight > i { color: var(--ct-text-mute); }

/* Contato */
.legal-contact {
  background: var(--ct-bg-soft);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-1);
  padding: 32px 24px;
  text-align: center;
}
.legal-contact-title {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--ct-fs-heading);
  line-height: 24px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ct-text);
}
.legal-contact-title > i { font-size: 18px; color: var(--ct-text-mute); }
.legal-contact-text {
  margin: 0;
  font-size: var(--ct-fs-body);
  line-height: 24px;
  color: var(--ct-text-soft);
}
.legal-contact-link,
.legal-section-content a.legal-contact-link {
  color: var(--ct-blue-2);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.legal-contact-link:hover,
.legal-section-content a.legal-contact-link:hover {
  color: var(--ct-blue-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
  .legal-doc { padding: 32px 24px; }
}
@media (max-width: 575.98px) {
  .legal-wrapper { gap: 16px; }
  .legal-doc { padding: 24px 16px; }
  .legal-section { padding: 24px 0; }
  .legal-alert { margin-bottom: 24px; }
  .legal-warning { margin-top: 24px; }
  .legal-contact { padding: 24px 16px; }
}