/* =============================================================================
   TAKA DESIGN — PÁGINAS LEGAIS
   -----------------------------------------------------------------------------
   Compartilhada por politica-de-privacidade/index.html e termos-de-uso/index.html.
   Carregue DEPOIS de design-system/css/components.css, design-system.css e
   assets/css/app.css — nessa ordem, igual ao index.html.

   Nenhum token de cor, tipografia, raio, sombra, espaçamento ou motion é
   criado. Todos vêm do Design System PRISMA:
     · --ds-void, --ds-surface, --ds-indigo, --ds-cyan          → cores
     · --ds-ease, --ds-ease-spring                               → curvas
     · .t-h1/.t-h2/.t-h3/.t-h4/.t-h5/.t-label/.t-body-lg/.t-body/.t-caption
     · .spectrum-rule, .aurora, .aurora-cool, .scanline, .mesh-dots
     · .badge, .badge-indigo, .badge-violet, .btn, .btn-glass, .btn-ghost
     · .card, .card-neon, .spotlight
     · .site-header / .site-footer  → via app.css + footer.css
   ============================================================================= */

/* --- Layout da página legal ------------------------------------------------ */
.legal-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: clamp(7rem, 14vh, 10rem);  /* folga abaixo do header fixo */
  padding-bottom: clamp(3rem, 7vh, 5rem);
  background: var(--ds-void);
}

/* Atmosfera: mesma receita das dobras de conteúdo do site principal. */
.legal-hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Eyebrow (badge de seção) + título */
.legal-hero__eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
}

.legal-hero__title {
  position: relative;
  z-index: 1;
  color: #fff;
  /* Mesmo tratamento de título de dobra — glow sutil, não neon. */
  text-shadow: 0 0 40px rgba(99, 102, 241, .25);
}

.legal-hero__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.5vw, 1rem);
  margin-top: clamp(.875rem, 2.5vh, 1.375rem);
  flex-wrap: wrap;
}

/* --- Corpo do documento ---------------------------------------------------- */
.legal-body {
  position: relative;
  z-index: 1;
  background: var(--ds-void);
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

/* Coluna editorial: max 75ch garante legibilidade (WCAG 1.4.8 recomenda ≤80ch). */
.legal-body__col {
  max-width: 75ch;
}

/* Seções de conteúdo — espaçamento vertical entre blocos legais */
.legal-section {
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.legal-section__heading {
  color: #fff;
  margin-bottom: clamp(.875rem, 2.5vh, 1.25rem);
}

/* Parágrafo padrão dentro das seções legais */
.legal-section p {
  color: rgba(255, 255, 255, .65);
  line-height: 1.75;
  margin-bottom: clamp(.75rem, 2vh, 1.125rem);
}

/* Último parágrafo não precisa de margem de fundo */
.legal-section p:last-child { margin-bottom: 0; }

/* Listas dentro do corpo legal */
.legal-section ul,
.legal-section ol {
  color: rgba(255, 255, 255, .65);
  line-height: 1.75;
  padding-left: 1.25rem;
  margin-bottom: clamp(.75rem, 2vh, 1.125rem);
}

.legal-section li {
  margin-bottom: .5rem;
}

/* Ênfase inline — usa a mesma cor de cabeçalho, não inventa acento */
.legal-section strong {
  color: rgba(255, 255, 255, .9);
  font-weight: 500;
}

/* Divisor entre seções — mesmo componente do DS */
.legal-section__rule {
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

/* --- Separador de seção decorativo ---------------------------------------- */
.legal-section__number {
  /* Numeração discreta à esquerda do título — rótulo de sistema no padrão DS */
  color: rgba(255, 255, 255, .25);
  margin-right: .75rem;
  font-variant-numeric: tabular-nums;
}

/* --- Back-link ------------------------------------------------------------- */
/* Âncora de retorno ao site principal — padrão de trilha de navegação do DS
   (ver "trilha" na seção Componentes > Navegação). */
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .45);
  font-size: .875rem;
  text-decoration: none;
  transition: color .35s var(--ds-ease);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.legal-back:hover,
.legal-back:focus-visible {
  color: #fff;
}

.legal-back__icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform .35s var(--ds-ease);
}

.legal-back:hover .legal-back__icon {
  transform: translateX(-3px);
}

/* --- Responsividade -------------------------------------------------------- */
@media (max-width: 899px) {
  /* Em mobile o texto já tem o container com padding lateral, então não
     precisamos de ajuste extra — o comportamento herda de app.css. */
  .legal-body__col { max-width: 100%; }
}