/* ═══════════════════════════════════════════════════════════════════════
   Documentos legais públicos — /privacidade/ e /termos/
   Prefixo spd- (site público → documento). Carregado DEPOIS do landing.css,
   de onde vêm container, botões, barra fixa e rodapé: aqui mora só o que é
   do documento.

   Sem animação e sem JS: documento não tem comportamento. O índice é âncora
   nativa e o rolar suave já vem do landing.css (`scroll-behavior` +
   `scroll-padding-top`, que é o que impede o título de parar embaixo da
   barra fixa).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barra fixa: versão enxuta, sem sanfona ────────────────────────────── */
/* A landing esconde os links no celular atrás de um botão que o landing.js
   controla. Aqui não há JS, então os links têm de caber sozinhos — por isso
   são três, curtos, e o "Voltar ao site" perde o rótulo em tela estreita. */
.spd-nav {
    display: flex;
    align-items: center;
    gap: var(--esp-6, 24px);
}
.spd-nav > a:not(.sp-btn) {
    color: #cbd5e1;
    text-decoration: none;
    font-size: var(--fs-5, 1rem);
    font-weight: 500;
    padding: var(--esp-1, 4px) 0;
    border-bottom: 2px solid transparent;
}
.spd-nav > a:not(.sp-btn):hover { color: #fff; }
.spd-nav a.spd-nav--ativo {
    color: #fff;
    border-bottom-color: var(--sp-acento);
}

/* ── Corpo da página ───────────────────────────────────────────────────── */
/* A barra é `position: fixed`, então o conteúdo precisa começar abaixo dela. */
.spd-main {
    padding: calc(68px + 2.5rem) 0 var(--esp-9, 64px);
    background: var(--sp-fundo);
}

.spd-cabecalho { max-width: 70ch; }
.spd-cabecalho h1 {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.2;
    color: var(--sp-primaria);
}
.spd-resumo {
    margin-top: var(--esp-4, 16px);
    font-size: var(--fs-6, 1.15rem);
    color: var(--sp-texto);
}
.spd-versao {
    margin-top: var(--esp-4, 16px);
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2, 8px);
    padding: var(--esp-2, 8px) var(--esp-3, 12px);
    border: 1px solid var(--sp-borda);
    border-radius: var(--raio-pill, 999px);
    font-size: var(--fs-3, .82rem);
    color: var(--sp-texto-suave);
    background: var(--sp-fundo-alt);
}
.spd-versao i { color: var(--sp-acento); }

/* ── Aviso de documento incompleto ─────────────────────────────────────── */
/* Âmbar e não vermelho: falta preencher, não há nada quebrado. Some sozinho
   quando as variáveis de identificação forem definidas. */
.spd-aviso {
    display: flex;
    gap: var(--esp-3, 12px);
    margin-top: var(--esp-7, 32px);
    padding: var(--esp-4, 16px) var(--esp-5, 20px);
    border: 1px solid #fcd34d;
    border-left-width: 4px;
    border-radius: var(--raio-3, 14px);
    background: #fffbeb;
    color: #713f12;
    font-size: var(--fs-4, .9rem);
    line-height: 1.55;
}
.spd-aviso i { margin-top: var(--esp-1, 4px); color: #b45309; }
.spd-aviso a { color: #713f12; }

/* ── Índice + documento ────────────────────────────────────────────────── */
.spd-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--esp-8, 48px);
    margin-top: var(--esp-8, 48px);
    align-items: start;
}

.spd-indice {
    position: sticky;
    top: 92px;
    padding: var(--esp-5, 20px) var(--esp-5, 20px);
    border: 1px solid var(--sp-borda);
    border-radius: var(--sp-radius);
    background: var(--sp-fundo-alt);
    font-size: var(--fs-4, .9rem);
}
.spd-indice__titulo {
    font-weight: 700;
    color: var(--sp-primaria);
    margin-bottom: var(--esp-3, 12px);
}
.spd-indice ol {
    list-style: decimal;
    padding-left: var(--esp-5, 20px);
    display: grid;
    /* ⚠️ O `gap` encolheu porque o alvo do link cresceu logo abaixo: o ritmo
       visual da lista é o mesmo, o que muda é onde o clique pega. */
    gap: var(--esp-1, 4px);
    color: var(--sp-texto-suave);
}
.spd-indice a {
    color: var(--sp-texto);
    text-decoration: none;
    /* ⚠️ WCAG 2.5.8 (AA) pede 24x24 CSS px de alvo, e o critério NÃO isenta
       mouse — só isenta link em linha de texto (este é item de lista) e alvo
       cujo vizinho esteja a 24px. Medido: o link tinha 17px de altura com o
       vizinho a 13px, então falhava nos dois. `display: block` é o que faz o
       padding valer como área de clique. */
    display: block;
    padding-block: var(--esp-1, 4px);
}
.spd-indice a:hover { color: var(--sp-acento-escuro); text-decoration: underline; }

/* ── Tipografia do documento ───────────────────────────────────────────── */
.spd-doc { max-width: 74ch; }
.spd-doc section + section { margin-top: var(--esp-8, 48px); }
.spd-doc h2 {
    font-size: var(--fs-6, 1.15rem);
    line-height: 1.35;
    color: var(--sp-primaria);
    padding-bottom: var(--esp-2, 8px);
    border-bottom: 2px solid var(--sp-borda);
    margin-bottom: var(--esp-4, 16px);
}
.spd-doc p + p,
.spd-doc ul + p,
.spd-doc p + ul,
.spd-doc p + div,
.spd-doc div + p { margin-top: var(--esp-4, 16px); }
.spd-doc ul {
    padding-left: var(--esp-5, 20px);
    display: grid;
    gap: var(--esp-2, 8px);
}
.spd-doc li { line-height: 1.62; }
.spd-doc a { color: var(--sp-acento-escuro); }
.spd-doc strong { color: var(--sp-primaria); }

/* Bloco que o leitor não pode perder — o que muda a decisão dele. Usa a cor
   da marca, e não âmbar/vermelho: não é alerta, é o miolo do parágrafo. */
.spd-destaque {
    padding: var(--esp-4, 16px) var(--esp-5, 20px);
    border-left: 3px solid var(--sp-acento);
    border-radius: 0 10px 10px 0;
    background: #eff6ff;
}
li.spd-destaque { margin-left: -1.25rem; list-style-position: inside; }

.spd-nota {
    margin-top: var(--esp-6, 24px);
    padding-top: var(--esp-4, 16px);
    border-top: 1px dashed var(--sp-borda);
    font-size: var(--fs-4, .9rem);
    color: var(--sp-texto-suave);
}

/* ── Tabelas ───────────────────────────────────────────────────────────── */
/* A rolagem mora no contêiner, nunca no corpo da página: tabela de 4 colunas
   no celular rolaria a página inteira para o lado. */
.spd-tabela-rolagem {
    overflow-x: auto;
    border: 1px solid var(--sp-borda);
    border-radius: var(--raio-3, 14px);
}
.spd-tabela {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: var(--fs-4, .9rem);
}
.spd-tabela th,
.spd-tabela td {
    padding: var(--esp-3, 12px) var(--esp-3, 12px);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--sp-borda);
}
.spd-tabela thead th {
    background: var(--sp-fundo-alt);
    color: var(--sp-primaria);
    font-weight: 700;
    white-space: nowrap;
}
.spd-tabela tbody tr:last-child td { border-bottom: 0; }

/* ── Telas estreitas ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* O índice deixa de ser coluna e vira um bloco no topo: preso ao lado,
       ele espremeria o texto a menos de 40 caracteres por linha.

       ⚠️ `minmax(0, 1fr)` e NUNCA `1fr`: `1fr` é `minmax(auto, 1fr)`, e o
       `auto` faz a coluna crescer até o min-content do que estiver dentro. O
       min-content aqui é a TABELA de subprocessadores (`min-width: 520px`),
       então a coluna esticava para 561px numa tela de 375px e a página inteira
       passava a rolar para o lado — com o `overflow-x` da tabela intacto, sem
       nada denunciando. Medido no Chrome headless: scrollWidth 581 contra
       clientWidth 375. É a mesma família do `min-height: 0` que o shell exige. */
    .spd-layout { grid-template-columns: minmax(0, 1fr); gap: var(--esp-7, 32px); }
    .spd-indice { position: static; }
}
@media (max-width: 640px) {
    /* Os dois links de documento saem da barra: com a marca e o botão de
       voltar, eles somavam 423px numa tela de 375 e estouravam a largura.
       Esconder aqui é seguro porque a travessia entre os dois documentos
       continua existindo em dois lugares que sempre aparecem — o rodapé e a
       última linha de cada documento. Sanfona seria a alternativa, e exigiria
       JS numa página que não tem comportamento nenhum. */
    .spd-nav { gap: var(--esp-4, 16px); }
    .spd-nav > a:not(.sp-btn) { display: none; }
    .spd-nav__voltar { padding: var(--esp-2, 8px) var(--esp-3, 12px); font-size: 0; gap: 0; }
    .spd-nav__voltar i { font-size: 1rem; }
    .spd-main { padding-top: calc(68px + 1.6rem); }
}

/* ── Impressão ─────────────────────────────────────────────────────────── */
/* Documento legal acaba impresso ou virando PDF. Sem isto, a barra fixa cobre
   o começo do texto e o índice ocupa uma coluna inútil no papel. */
@media print {
    .sp-nav, .spd-indice, .sp-footer, .sp-whats-flutuante { display: none !important; }
    .spd-main { padding-top: 0; }
    .spd-layout { display: block; }
    .spd-doc { max-width: none; }
    .spd-doc section { page-break-inside: avoid; }
    .spd-tabela-rolagem { overflow: visible; }
    .spd-tabela { min-width: 0; }
}