/*
 * legal.css — Termos de Uso e Política de Privacidade.
 *
 * Arquivo próprio, e não um <style> em cada página, porque os dois documentos
 * são gêmeos: mesma largura de leitura, mesma escala, mesmo cabeçalho.
 *
 * Mesma pegada da vitrine (css/planos.css) e do cadastro (css/cadastro.css):
 * topo noite, papel claro, Bricolage nos títulos. O texto é contrato, então a
 * leitura manda: 17px de corpo, 1.75 de entrelinha, ~70 caracteres por linha.
 */
:root {
    --noite: #071029;
    --noite-borda: rgba(148, 176, 230, .16);
    --noite-texto: #e8eefb;
    --noite-apoio: #a7b6d4;

    --papel: #f6f8fc;
    --cartao: #ffffff;
    --tinta: #0b1733;
    --apoio: #3f4d66;
    --suave: #64748b;
    --borda: #e3e8f1;

    --agua: #0284c7;
    --agua-clara: #38bdf8;
    --agua-fundo: #e6f4fd;
    --gas: #f97316;

    --aviso-bg: #fffbeb;
    --aviso-borda: #fde68a;
    --aviso-texto: #92400e;

    --raio: 16px;
    --topo: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 20px); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--papel); color: var(--tinta);
    /* É um contrato, lido inteiro e em tela de celular. Texto jurídico
       apertado é texto não lido — e um termo que ninguém lê não informa. */
    font-size: 17px; line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .marca { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; }

a { color: var(--agua); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--agua-clara); outline-offset: 3px; border-radius: 6px; }
.pular {
    position: absolute; left: 12px; top: -60px; z-index: 60;
    background: var(--gas); color: var(--tinta); padding: 10px 16px; border-radius: 10px;
    font-weight: 700; font-size: 14px; text-decoration: none; transition: top .15s ease;
}
.pular:focus { top: 12px; }

/* ---------------------------------------------------------------- cabeçalho */
.topo {
    position: sticky; top: 0; z-index: 40;
    background: rgba(7, 16, 41, .9); color: var(--noite-texto);
    backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--noite-borda);
}
.topo .faixa {
    max-width: 1180px; height: var(--topo); margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 24px;
}
.topo .marca {
    display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff;
    font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
}
.topo .marca img { width: 32px; height: 32px; border-radius: 9px; }
.topo .marca .azul { color: var(--agua-clara); }
.topo .marca .laranja { color: var(--gas); }
.topo nav { display: flex; gap: 4px; margin-left: auto; }
.topo nav a {
    color: var(--noite-apoio); text-decoration: none; font-size: 14px; font-weight: 500;
    padding: 8px 14px; border-radius: 999px; transition: color .15s ease, background-color .15s ease;
}
.topo nav a:hover { color: #fff; }
.topo nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); }
.btn-teste {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px;
    background: var(--gas); color: var(--tinta); font-weight: 700; font-size: 14px; text-decoration: none;
    white-space: nowrap; transition: background-color .2s ease;
}
.btn-teste:hover { background: #fb8a3c; color: var(--tinta); }
/* Barra de leitura: onde se está num texto de 4.000 palavras. */
.progresso-leitura { height: 2px; background: transparent; }
.progresso-leitura i {
    display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--agua-clara), var(--gas));
}
@media (max-width: 640px) {
    .topo .faixa { gap: 10px; }
    .topo .marca span { display: none; }
    .topo nav a { padding: 8px 10px; font-size: 13px; }
    .btn-teste { display: none; }
}

/* -------------------------------------------------------------------- capa */
.capa {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--noite); color: var(--noite-texto);
}
.capa::before, .capa::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); }
.capa::before { width: 520px; height: 520px; left: -200px; top: -300px; background: rgba(2, 132, 199, .4); }
.capa::after { width: 420px; height: 420px; right: -160px; bottom: -320px; background: rgba(249, 115, 22, .22); }
.capa-in { max-width: 1180px; margin: 0 auto; padding: 56px 20px 48px; }
.rotulo {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--agua-clara);
}
.rotulo::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; margin: 14px 0 20px; }

/* Versão e data ACIMA do texto: é por elas que se sabe qual redação a
   pessoa aceitou. */
.versao {
    display: inline-flex; gap: 12px; flex-wrap: wrap; align-items: center; max-width: 760px;
    padding: 10px 16px 10px 10px; border-radius: 14px;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--noite-borda);
    font-size: 14px; line-height: 1.55; color: var(--noite-apoio);
}
.versao strong { color: #fff; font-weight: 700; }
.versao .selo {
    background: var(--gas); color: var(--tinta);
    padding: 3px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap;
}

/* ---------------------------------------------------------------- documento */
.documento {
    max-width: 1180px; margin: 0 auto; padding: 48px 20px 80px;
    display: grid; gap: 56px; grid-template-columns: 260px minmax(0, 720px); justify-content: center;
}
.lateral { position: sticky; top: calc(var(--topo) + 24px); align-self: start; max-height: calc(100vh - var(--topo) - 48px); overflow-y: auto; }

/* Índice: um contrato de 16 cláusulas sem sumário obriga a rolar às cegas. */
.indice h2 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin-bottom: 12px; }
.indice ol { list-style: none; border-left: 2px solid var(--borda); }
.indice li { margin: 0; }
.indice a {
    display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
    font-size: 14px; line-height: 1.4; color: var(--suave); text-decoration: none;
    transition: color .15s ease, border-color .15s ease;
}
.indice a:hover { color: var(--tinta); }
.indice a.ativo { color: var(--tinta); font-weight: 600; border-left-color: var(--agua); }
.outro-doc {
    display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 600; text-decoration: none;
}

main { min-width: 0; }

.resumo {
    position: relative; background: var(--cartao); border: 1px solid var(--borda);
    border-radius: 20px; padding: 26px 28px; margin-bottom: 44px;
    box-shadow: 0 1px 2px rgba(11, 23, 51, .04), 0 8px 24px -12px rgba(11, 23, 51, .12);
}
.resumo::before {
    content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--agua-clara), var(--gas));
}
.resumo h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; color: var(--tinta); letter-spacing: -.01em; }
.resumo p { color: var(--apoio); font-size: 16px; }
.resumo p + p { margin-top: 10px; }

section { margin-bottom: 44px; scroll-margin-top: calc(var(--topo) + 20px); }
section h2 {
    font-size: 1.5rem; font-weight: 700; color: var(--tinta);
    margin-bottom: 14px; letter-spacing: -.02em; line-height: 1.25;
}
section h3 { font-family: 'Inter', sans-serif; font-size: 1.0625rem; font-weight: 700; margin: 24px 0 8px; }
section p { margin-bottom: 14px; color: var(--apoio); }
section ul, section ol { margin: 0 0 14px 22px; color: var(--apoio); }
section li { margin-bottom: 8px; }
section li::marker { color: var(--agua); }
section strong { color: var(--tinta); font-weight: 600; }
section + section { padding-top: 44px; border-top: 1px solid var(--borda); }

/* Tabela de suboperadores e de retenção. No celular vira lista. */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 18px; font-size: 15px; background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; }
caption { text-align: left; font-size: 14px; color: var(--suave); padding-bottom: 8px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; line-height: 1.55; }
tr:last-child td { border-bottom: 0; }
th { background: #eef2f8; font-weight: 700; color: var(--tinta); font-size: 13px; }
td { color: var(--apoio); }

.aviso {
    background: var(--aviso-bg); border: 1px solid var(--aviso-borda); color: var(--aviso-texto);
    border-radius: var(--raio); padding: 16px 20px; margin-bottom: 24px; font-size: 15px;
}
.aviso strong { color: var(--aviso-texto); }

.destaque {
    background: var(--cartao); border: 1px solid var(--borda); border-left: 3px solid var(--agua);
    border-radius: var(--raio); padding: 18px 22px; margin-bottom: 18px;
}
.destaque p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- rodapé */
footer { border-top: 1px solid var(--borda); color: var(--suave); font-size: 14px; }
.rodape {
    max-width: 1180px; margin: 0 auto; padding: 28px 20px 48px;
    display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rodape a { color: var(--suave); text-decoration: none; }
.rodape a:hover { color: var(--tinta); }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 960px) {
    .documento { grid-template-columns: minmax(0, 720px); gap: 28px; padding-top: 32px; }
    /* No celular o índice volta ao topo do texto, dobrado em cartão. */
    .lateral { position: static; max-height: none; overflow: visible; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 20px; }
    .indice ol { columns: 2; column-gap: 24px; border-left: 0; }
    .indice a { margin-left: 0; padding: 5px 0; border-left: 0; }
    .indice li { break-inside: avoid; }
}
@media (max-width: 640px) {
    body { font-size: 16px; }
    .capa-in { padding: 36px 16px 32px; }
    .documento { padding: 24px 16px 56px; }
    .indice ol { columns: 1; }
    .resumo { padding: 22px 20px; }
    section h2 { font-size: 1.3125rem; }
    table { border: 0; background: none; }
    table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table, tbody, tr, td { display: block; width: 100%; }
    tr { background: var(--cartao); border: 1px solid var(--borda); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
    td { border: none; padding: 4px 0; }
    td::before { content: attr(data-rotulo) ": "; font-weight: 700; color: var(--tinta); }
}