/* ==========================================================================
   Páginas legais: Política de Privacidade, Termos de Uso e Cancelamento.
   Usa tokens.css, base.css e layout.css (rodapé). Texto longo: linha curta,
   títulos com espaço, tabelas que rolam de lado no celular.
   ========================================================================== */

/* Pendências (ver legal.js): escondidas no site publicado */
.marcador { display: none; padding: 0.05em 0.4em; border-radius: var(--r-xs); background: #FFF1A8; color: #5A4300; font-weight: var(--fw-semibold); font-size: 0.9em; font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.conferir { background: none; color: inherit; }
.revisao .marcador { display: inline; }
.revisao mark.conferir { padding: 0 0.2em; border-radius: var(--r-sign); background: #FFF1A8; color: #3D2E00; box-shadow: inset 0 -2px 0 var(--warning-line); }
.legal-revisao { margin-bottom: var(--space-5); padding: 0.85rem var(--space-4); border-radius: var(--r-sm); background: #FFF1A8; color: #3D2E00; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* Topo */
.legal-topo { border-bottom: 1px solid var(--line); background: var(--white); }
.legal-topo__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 76px; }
.legal-marca img { display: block; width: 168px; height: auto; }
.legal-voltar { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue-600); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 4px; }

/* Corpo */
.legal { padding-block: clamp(2rem, 5vw, var(--space-8)) clamp(3rem, 7vw, 5rem); background: var(--ice); }
.legal__grid { display: grid; gap: clamp(1.5rem, 4vw, var(--space-7)); align-items: start; }
@media (min-width: 1024px) {
  .legal__grid { grid-template-columns: 240px minmax(0, 1fr); }
  .legal-nav { position: sticky; top: 1.5rem; }
}
.legal-nav ul { display: grid; gap: var(--space-1); }
.legal-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; }
.legal-nav a:hover { background: var(--white); color: var(--blue-600); }
.legal-nav a[aria-current="page"] { background: var(--white); color: var(--blue-600); box-shadow: inset 3px 0 0 var(--blue-500); }
.legal-nav__titulo { margin-bottom: var(--space-2); padding-inline: 0.9rem; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

.legal-doc { max-width: 76ch; padding: clamp(1.25rem, 4vw, var(--space-7)); border-radius: var(--r-md); background: var(--white); box-shadow: 0 0 0 1px var(--line-soft); color: var(--ink-2); font-size: var(--fs-base); line-height: 1.7; }
.legal-doc h1 { color: var(--ink); font-size: var(--fs-xl); font-weight: var(--fw-extrabold); font-stretch: 92%; letter-spacing: -0.03em; line-height: 1.08; }
.legal-doc__meta { margin-top: var(--space-3); font-size: var(--fs-sm); color: var(--ink-3); }
.legal-doc__resumo { margin-top: var(--space-5); padding: var(--space-4) 1.15rem; border-radius: var(--r-sm); background: var(--blue-50); color: var(--ink); }
.legal-doc h2 { margin-top: 2.5rem; color: var(--ink); font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: 1.25; scroll-margin-top: 1.5rem; }
.legal-doc h3 { margin-top: var(--space-5); color: var(--ink); font-size: var(--fs-md); font-weight: var(--fw-semibold-plus); line-height: 1.3; }
.legal-doc p, .legal-doc ul, .legal-doc ol, .legal-doc dl { margin-top: 0.85rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.35rem; }
.legal-doc li + li { margin-top: 0.4rem; }
.legal-doc a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-doc strong { color: var(--ink); }
.legal-doc dt { margin-top: var(--space-3); color: var(--ink); font-weight: var(--fw-semibold-plus); }
.legal-doc dd { margin-left: 0; }
.legal-sumario { margin-top: 1.75rem; padding: var(--space-4) 1.15rem; border-radius: var(--r-sm); background: var(--ice); }
.legal-sumario h2 { margin-top: 0; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.legal-sumario ol { columns: 2 16rem; column-gap: var(--space-6); margin-top: var(--space-2); font-size: var(--fs-sm); }
.legal-sumario li { break-inside: avoid; }

/* Tabelas: rolam de lado no celular, com foco de teclado na área */
.legal-tabela { margin-top: var(--space-4); overflow-x: auto; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line); }
.legal-tabela table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.legal-tabela caption { padding: var(--space-3) var(--space-4) 0; text-align: left; font-weight: var(--fw-semibold-plus); color: var(--ink); }
.legal-tabela th, .legal-tabela td { padding: 0.7rem var(--space-4); border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.legal-tabela thead th { background: var(--ice); color: var(--ink); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.legal-tabela tbody th { color: var(--ink); font-weight: var(--fw-semibold-plus); }
.legal-tabela tr:last-child > * { border-bottom: 0; }

.legal-acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.legal-doc .btn { color: var(--fg); text-decoration: none; }

/* Rodapé curto */
.legal-rodape { padding-top: 0; }
.legal-rodape .footer__legal { border-top: 0; }
.legal-rodape a { color: inherit; }

/* Item de lista que só existe como pendência: some no site publicado */
.legal-doc li.pend { display: none; }
.revisao .legal-doc li.pend { display: list-item; }

/* No celular a grade tem uma coluna: sem min-width 0, a tabela larga
   alargava a página em vez de rolar dentro da própria caixa */
.legal__grid > * { min-width: 0; }
