/*
 * Vivere Daily - documentos legais (Politica de Privacidade e Termos de Uso).
 *
 * Texto longo que ninguem quer ler mas todo mundo precisa entender. As escolhas
 * aqui existem para reduzir esse atrito: coluna estreita, entrelinha alta,
 * numeracao automatica das secoes e um resumo destacado no topo. O restante do
 * visual e o mesmo da apresentacao, para nao parecer outro site.
 */

.documento {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--e5) var(--e4) 80px;
}

.documento-cabecalho { margin-bottom: var(--e5); }

.documento h1 {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
    margin-bottom: 12px;
}

.documento-vigencia { font-size: var(--apoio); color: var(--texto-tenue); }

/* O resumo nao substitui o documento, mas e o que a maioria vai ler de fato -
   entao vem antes e com destaque proprio. */
.resumo {
    background: rgba(47, 111, 115, 0.13);
    border: 1px solid var(--marca);
    border-radius: var(--raio);
    padding: var(--e4);
    margin-bottom: var(--e5);
}

.resumo h2 { font-size: 18px; margin-bottom: var(--e3); color: var(--marca-clara); }
.resumo ul { list-style: none; display: grid; gap: 10px; }

.resumo li {
    position: relative;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--texto-suave);
}

.resumo li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acao);
}

/* Sumario e secoes numeradas automaticamente: renumerar a mao depois de
   inserir uma secao no meio e onde documento legal costuma ficar inconsistente. */
.documento-corpo { counter-reset: secao; }

.sumario {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e3) var(--e4);
    margin-bottom: var(--e5);
}

.sumario h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--texto-tenue); margin-bottom: 12px; }
.sumario ol { counter-reset: item; list-style: none; display: grid; gap: 7px; }
.sumario li { counter-increment: item; font-size: 15px; }
.sumario li::before { content: counter(item) ". "; color: var(--acao); font-weight: 600; }
.sumario a { color: var(--texto-suave); text-decoration: none; }
.sumario a:hover { color: var(--texto-claro); text-decoration: underline; }

.secao-doc {
    counter-increment: secao;
    margin-bottom: var(--e5);
    scroll-margin-top: 84px;
}

.secao-doc > h2 {
    font-size: 21px;
    line-height: 1.35;
    margin-bottom: var(--e3);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--borda);
}

.secao-doc > h2::before {
    content: counter(secao) ". ";
    color: var(--acao);
}

.secao-doc h3 { font-size: 16px; margin: var(--e4) 0 10px; color: var(--marca-clara); }

.secao-doc p,
.secao-doc li {
    font-size: 16px;
    line-height: 1.8;
    color: var(--texto-suave);
}

.secao-doc p { margin-bottom: var(--e3); }
.secao-doc p:last-child { margin-bottom: 0; }
.secao-doc strong { color: var(--texto-claro); }

.secao-doc ul { list-style: none; display: grid; gap: 10px; margin-bottom: var(--e3); }

.secao-doc ul li {
    position: relative;
    padding-left: 20px;
}

.secao-doc ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--marca-clara);
}

/* Tabela de dados/finalidade/base legal. Em tela estreita ela rola sozinha em
   vez de espremer as colunas ou estourar a largura da pagina. */
.tabela-rolagem { overflow-x: auto; margin-bottom: var(--e3); }

.tabela-dados {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 15px;
}

.tabela-dados th,
.tabela-dados td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--borda);
    line-height: 1.6;
    vertical-align: top;
}

.tabela-dados th {
    color: var(--texto-claro);
    font-weight: 600;
    font-size: var(--apoio);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.tabela-dados td { color: var(--texto-suave); }
.tabela-dados tr:last-child td { border-bottom: none; }

/* Blocos que o leitor precisa não perder de vista. */
.destaque-doc {
    border-left: 3px solid var(--acao);
    background: rgba(250, 121, 33, 0.08);
    border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
    padding: var(--e3);
    margin-bottom: var(--e3);
}

.destaque-doc p:last-child { margin-bottom: 0; }

.destaque-doc.apoio {
    border-left-color: var(--sucesso);
    background: rgba(79, 157, 105, 0.1);
}

.contato-doc {
    background: var(--fundo-elevado);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e4);
}

.contato-doc a { font-weight: 600; }

@media (max-width: 760px) {
    .documento { padding: var(--e4) var(--e3) 56px; }
    .secao-doc > h2 { font-size: 19px; }
    .secao-doc p, .secao-doc li { font-size: 15px; }
}

/*
 * No celular a tabela vira lista empilhada em vez de rolar na horizontal.
 * Rolagem lateral funciona, mas esconde metade da informacao justamente num
 * documento em que o que importa e o cruzamento entre as colunas - saber que
 * "cadastro" tem como base legal "execucao de contrato" exige ver as duas.
 *
 * O rotulo de cada celula vem do atributo `data-rotulo` do proprio HTML, entao
 * acrescentar uma coluna nao exige mexer neste CSS.
 */
@media (max-width: 620px) {
    .tabela-rolagem { overflow-x: visible; }
    .tabela-dados { min-width: 0; display: block; }
    .tabela-dados thead { display: none; }
    .tabela-dados tbody, .tabela-dados tr, .tabela-dados td { display: block; width: 100%; }

    .tabela-dados tr {
        border: 1px solid var(--borda);
        border-radius: var(--raio-pequeno);
        padding: var(--e3);
        margin-bottom: 12px;
    }

    .tabela-dados td { border-bottom: none; padding: 0 0 12px; }
    .tabela-dados td:last-child { padding-bottom: 0; }

    .tabela-dados td::before {
        content: attr(data-rotulo);
        display: block;
        font-size: 11px;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--texto-tenue);
        margin-bottom: 4px;
    }
}