/**
 * Páginas legais (Termos de Uso e Política de Privacidade).
 *
 * Documento jurídico só cumpre a função se for realmente lido. A prioridade
 * aqui é legibilidade: coluna estreita, entrelinha generosa e índice fixo para
 * navegar sem rolar às cegas.
 */

.legal-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--space-4) 0;
    padding-top: max(var(--space-4), env(safe-area-inset-top));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.legal-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.legal { padding: var(--space-10) 0 var(--space-12); }

.legal__container {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
}

/* --- Índice ---------------------------------------------------------------- */
.legal-toc {
    position: sticky;
    top: 96px;
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.legal-toc > summary {
    /* Alvo confortável no toque e sem o triângulo padrão, que destoa. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}

.legal-toc > summary::-webkit-details-marker { display: none; }

/* Seta própria, que gira ao abrir. */
.legal-toc > summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--duration-fast) var(--ease-out);
}

.legal-toc[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.legal-toc > summary:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.legal-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.legal-toc a {
    display: block;
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    line-height: var(--leading-snug);
}

.legal-toc a:hover { color: var(--brand); }

/* --- Documento ------------------------------------------------------------- */
.legal-doc {
    max-width: 68ch;
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
}

.legal-eyebrow {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand);
}

.legal-doc h1 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-3xl);
    color: var(--text);
}

.legal-doc h2 {
    margin: var(--space-9) 0 var(--space-3);
    font-size: var(--text-xl);
    color: var(--text);
    /* A âncora do índice não pode esconder o título sob a barra fixa. */
    scroll-margin-top: 96px;
}

.legal-doc h3 {
    margin: var(--space-6) 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--text);
}

.legal-doc p { margin: 0 0 var(--space-4); }

.legal-doc ul {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.legal-doc li { line-height: var(--leading-relaxed); }
.legal-doc strong { color: var(--text); font-weight: var(--weight-semibold); }

.legal-meta {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.legal-rule {
    margin: var(--space-9) 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* --- Destaques ------------------------------------------------------------- */
.legal-callout {
    margin: var(--space-5) 0 var(--space-6);
    padding: var(--space-5);
    background: var(--bg-subtle);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.legal-callout p:last-child { margin-bottom: 0; }

/* Usado no direito de arrependimento: é a cláusula que mais importa ao cliente. */
.legal-callout--strong {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    border-left-color: var(--brand);
}

/* --- Tabelas --------------------------------------------------------------- */
.legal-table {
    width: 100%;
    margin: 0 0 var(--space-6);
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.legal-table th,
.legal-table td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.legal-table th {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-subtle);
}

/* --- Rodapé ---------------------------------------------------------------- */
.legal-footer {
    padding: var(--space-8) 0;
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: var(--text-sm);
}

.legal-footer p { margin: 0 0 var(--space-2); }
.legal-footer a { color: var(--text-muted); }
.legal-footer a:hover { color: var(--brand); }

/* --- Celular --------------------------------------------------------------- */
@media (max-width: 900px) {
    .legal__container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* Índice deixa de ser fixo e começa recolhido (via script): aberto, ele
       colocaria 13 links entre o topo da tela e a primeira linha do texto. */
    .legal-toc {
        position: static;
        order: -1;
    }

    .legal-toc ol {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0;
    }

    /* Alvo de toque confortável para os links do índice. */
    .legal-toc a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 640px) {
    .legal { padding: var(--space-6) 0 var(--space-10); }
    .legal-doc h1 { font-size: var(--text-2xl); }

    /* Tabelas viram cartões: rolagem lateral em documento jurídico faz o leitor
       perder justamente a coluna da direita, que costuma ser a resposta. */
    .legal-table,
    .legal-table tbody,
    .legal-table tr,
    .legal-table td { display: block; width: 100%; }

    .legal-table thead { display: none; }

    .legal-table tr {
        margin-bottom: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .legal-table td { border-bottom: 1px solid var(--border); }
    .legal-table td:last-child { border-bottom: none; }

    .legal-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
    }
}