/* legal.css — páginas de documento: /privacidade/ e /termos/ Por que arquivo próprio: as landings carregam landings.css (hero escuro, cards, aurora) e nada disso serve a um texto longo que a pessoa vai LER. Aqui a única meta é legibilidade: coluna estreita, entrelinha alta, hierarquia clara. Reusa as variáveis de cor do site.css (--papel/--tinta/--verde/...), então não inventa paleta nova. Externo e cacheável de propósito (regra do projeto: CSS inline gigante não). */ /* MEDIDO em 30/jul/2026: o site.css liga `scroll-behavior:smooth` no , e num documento deste tamanho isso transforma a chegada de um link EXTERNO com âncora (é o caso da URL de exclusão de dados que a Meta publica) numa rolagem animada de mais de 2 segundos varrendo o texto inteiro, com o alvo ainda se mexendo porque a fonte carrega no meio do caminho. Aqui a rolagem é instantânea: em documento legal, chegar já no lugar vale mais que a animação. Vale só nestas duas páginas, que carregam este arquivo e marcam .lg-doc no . */ html.lg-doc { scroll-behavior: auto; } .lg { background: var(--papel); color: var(--tinta); padding: 0 0 96px; } /* Cabeçalho do documento: escuro, para não parecer que a página começou no meio. */ .lg-top { background: var(--noite); color: #fff; padding: 72px 0 56px; border-bottom: 1px solid var(--linha-d); } .lg-in { max-width: 760px; margin: 0 auto; padding: 0 28px; } .lg-eyeb { display: inline-block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--menta); margin-bottom: 14px; } .lg-top h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.12; margin: 0 0 16px; letter-spacing: -.02em; } .lg-sub { color: var(--nevoa); font-size: 17px; line-height: 1.6; margin: 0; } .lg-data { display: block; margin-top: 18px; font-size: 13px; color: var(--nevoa); } /* Corpo */ .lg-corpo { max-width: 760px; margin: 0 auto; padding: 0 28px; } .lg-corpo h2 { font-size: clamp(21px, 3vw, 26px); line-height: 1.25; margin: 52px 0 14px; letter-spacing: -.01em; /* A barra do topo é sticky e tem 71px (medido). Sem este recuo, pular por um link de âncora deixa o TÍTULO escondido atrás dela e a pessoa acha que caiu no lugar errado. 92px = 71 da barra + respiro. Vale para o índice desta página e para o link que a Meta publica apontando para #exclusao-de-dados. */ scroll-margin-top: 92px; } .lg-corpo h3 { font-size: 17px; margin: 28px 0 8px; color: var(--tinta); } .lg-corpo p, .lg-corpo li { font-size: 16.5px; line-height: 1.7; color: var(--tinta2); } .lg-corpo p { margin: 0 0 16px; } .lg-corpo ul { margin: 0 0 18px; padding-left: 22px; } .lg-corpo li { margin-bottom: 9px; } .lg-corpo strong { color: var(--tinta); } .lg-corpo a { color: var(--verde-d); text-decoration: underline; } .lg-corpo a:hover { color: var(--verde); } /* Resumo do topo: o que a pessoa leria se lesse só uma coisa. */ .lg-resumo { background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 26px 28px 12px; margin: 40px 0 8px; box-shadow: 0 1px 2px rgba(14, 21, 18, .04); } .lg-resumo h2 { margin: 0 0 12px; font-size: 19px; } .lg-resumo ul { margin-bottom: 16px; } /* Bloco de destaque (usado na parte de exclusão de dados). */ .lg-nota { border-left: 3px solid var(--verde); background: var(--menta-soft); border-radius: 0 12px 12px 0; padding: 20px 22px 6px; margin: 22px 0 26px; } .lg-nota p:last-child { margin-bottom: 14px; } /* Tabela de quem toca nos dados. Rola sozinha no celular, sem empurrar a página. */ .lg-tab-wrap { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; } .lg-tab { width: 100%; min-width: 480px; border-collapse: collapse; background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; font-size: 15.5px; } .lg-tab th, .lg-tab td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linha); vertical-align: top; line-height: 1.55; } .lg-tab th { background: #EDEEE8; color: var(--tinta); font-size: 13.5px; letter-spacing: .02em; } .lg-tab tr:last-child td { border-bottom: 0; } .lg-tab td { color: var(--tinta2); } /* Índice do topo */ .lg-indice { margin: 34px 0 0; padding: 0; list-style: none; } .lg-indice li { margin-bottom: 7px; font-size: 15.5px; } .lg-indice a { color: var(--verde-d); text-decoration: none; } .lg-indice a:hover { text-decoration: underline; } /* Pé do documento: identificação de quem responde. */ .lg-quem { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--linha); font-size: 15px; color: var(--cinza); line-height: 1.7; } .lg-quem strong { color: var(--tinta); } /* Par de links entre os dois documentos */ .lg-par { margin-top: 34px; font-size: 15.5px; } @media (max-width: 560px) { .lg-top { padding: 54px 0 40px; } .lg-corpo h2 { margin-top: 42px; } .lg-resumo { padding: 22px 20px 8px; } } /* CELULAR: a tabela vira blocos empilhados. Por que não deixar rolando de lado: a caixa rola, sim, mas nada AVISA isso, e a coluna que sobra escondida é a "Onde" (Brasil, Europa, rede mundial), justamente o que a LGPD manda informar sobre transferência internacional. Informação que a pessoa precisa deslizar para descobrir é informação que ela não vai ler. Cada célula usa o rótulo do data-rot do HTML. */ @media (max-width: 620px) { .lg-tab-wrap { overflow-x: visible; } .lg-tab { min-width: 0; border: 0; background: none; display: block; } .lg-tab thead { display: none; } .lg-tab tbody, .lg-tab tr, .lg-tab td { display: block; width: auto; } .lg-tab tr { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 6px 4px; margin-bottom: 12px; } .lg-tab tr:last-child { margin-bottom: 0; } .lg-tab td { border-bottom: 0; padding: 7px 14px; } .lg-tab td::before { content: attr(data-rot); display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); margin-bottom: 2px; } /* A 1ª célula é o nome da empresa: destaca, é o título do bloco. */ .lg-tab td:first-child { color: var(--tinta); font-weight: 600; } }