/* MultiLead · páginas legais (Termos de Uso, Termos da Assinatura, Privacidade, Cancelamento e reembolso).
   Um arquivo só de estilo: as páginas legais têm CSP própria (PAGAMENTOS-ESPEC §6.5), sem <style> nem style= embutidos.
   É o mesmo CSS que hoje está embutido em termos.html (Archivo, uma fonte só; cores da landing) + o que as páginas
   de pagamento pedem: marcador de rascunho, cláusula numerada, tabela, tecla com relevo e linha da empresa (A.20).
   Servido em /static/legal/legal.css (livre de login pelo prefixo "/static/legal/" em LIVRES_ESTATICOS, A.8).
   Mobile-first; conferido em 390 px sem rolagem horizontal. */
:root{
  --papel:#F7FBFE; --branco:#FFFFFF;
  --tinta:#10202C; --texto:#3E403F; --suave:#56636D; --apagado:#8795A0;
  --linha:#DCE5EC; --linha-forte:#C3D1DC;
  --azul:#1C5E90; --azul-claro:#E6F0F8; --azul-nevoa:#F0F6FB;
  --acao:#0755DE; --acao-hover:#0649C4; --acao-lip:#043FA8; --verde:#549B3F;
  --ambar:#7A5300; --ambar-claro:#FFF7E0; --ambar-borda:#EFD995;
  --rascunho:#FFF1A6; --rascunho-tinta:#4D3B00; --rascunho-borda:#E8CF5A;   /* marcador amarelo do [confirmar] */
  --mola:cubic-bezier(.3,.7,.4,1);
  --f:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--f);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--acao);text-underline-offset:3px}
h1,h2,h3{color:var(--tinta);margin:0;text-wrap:balance}
p,ul,ol{margin:0}
:focus-visible{outline:3px solid var(--acao);outline-offset:2px;border-radius:6px}
.pular{position:absolute;left:12px;top:-60px;z-index:10;background:var(--tinta);color:#fff;padding:10px 14px;border-radius:8px;font-weight:700}
.pular:focus{top:12px}
.cx{width:min(820px,100% - 32px);margin-inline:auto}

/* topo */
.lg-topo{background:var(--branco);border-bottom:1px solid var(--linha)}
.lg-topo .cx{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.lg-topo img{height:24px;width:auto}
.lg-topo nav{display:flex;gap:18px;font-size:14px;font-weight:600}
.lg-topo nav a{color:var(--tinta);text-decoration:none}
.lg-topo nav a:hover{color:var(--acao);text-decoration:underline}

/* cabeçalho do documento */
.lg-cab{padding:40px 0 8px}
.rotulo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:650;font-stretch:110%;letter-spacing:.085em;text-transform:uppercase;color:var(--azul)}
.rotulo i{width:8px;height:8px;border-radius:2px;background:var(--verde)}
.lg-cab h1{margin-top:10px;font-size:clamp(2rem,1.3rem + 2.4vw,3rem);font-weight:800;font-stretch:78%;line-height:1.05;letter-spacing:-.015em}
.lg-meta{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:13.5px;color:var(--suave);font-variant-numeric:tabular-nums}
.lg-meta b{color:var(--tinta);font-weight:700}
.lg-resumo{margin-top:18px;font-size:17px;color:var(--texto);max-width:680px}

/* "Em resumo": caixa de destaque logo abaixo da abertura (não substitui o texto) */
.lg-emresumo{margin-top:22px}
.lg-emresumo h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--azul)}
.lg-emresumo ul{margin-top:8px;padding-left:20px}
.lg-emresumo li{margin-top:6px}
.lg-emresumo li::marker{color:var(--azul)}
.lg-emresumo b{color:var(--tinta);font-weight:700}

/* sumário */
.lg-indice{margin-top:24px;background:var(--branco);border-radius:14px;box-shadow:inset 0 0 0 1px var(--linha);padding:18px 20px}
.lg-indice h2{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.lg-indice ol{margin-top:10px;padding-left:0;list-style:none;columns:2;column-gap:28px;counter-reset:i}
.lg-indice li{break-inside:avoid;font-size:14.5px;line-height:1.4;padding:5px 0;counter-increment:i;display:flex;gap:8px}
.lg-indice li::before{content:counter(i) ".";flex:none;width:22px;color:var(--apagado);font-variant-numeric:tabular-nums}
.lg-indice a{color:var(--tinta);text-decoration:none}
.lg-indice a:hover{color:var(--acao);text-decoration:underline}

/* corpo */
.lg-doc{margin-top:28px;background:var(--branco);border-radius:18px;box-shadow:inset 0 0 0 1px var(--linha);padding:8px 36px 36px}
.lg-doc section{padding-top:28px}
.lg-doc section + section{margin-top:4px;border-top:1px solid var(--linha)}
.lg-doc h2{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);font-weight:800;font-stretch:84%;line-height:1.2;display:flex;gap:10px;align-items:baseline}
.lg-doc h2 .n{color:var(--azul);font-variant-numeric:tabular-nums;flex:none}
.lg-doc h3{margin-top:20px;font-size:16.5px;font-weight:750}
.lg-doc p{margin-top:12px}
.lg-doc ul,.lg-doc ol{margin-top:10px;padding-left:22px}
.lg-doc li{margin-top:6px}
.lg-doc li::marker{color:var(--azul)}
.lg-doc b,.lg-doc strong{color:var(--tinta);font-weight:700}
.lg-doc dl{margin:12px 0 0}
.lg-doc dt{margin-top:12px;font-weight:700;color:var(--tinta)}
.lg-doc dd{margin:2px 0 0}
.lg-doc .cl{margin-right:6px;font-weight:750;color:var(--azul);font-variant-numeric:tabular-nums}   /* número da cláusula */
.lg-caixa{margin-top:14px;background:var(--azul-nevoa);border-radius:12px;box-shadow:inset 0 0 0 1px #D5E4F0;padding:14px 16px;font-size:15.5px}
.lg-caixa p:first-child{margin-top:0}
.lg-topo-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--suave);text-decoration:none}
.lg-topo-link:hover{color:var(--acao);text-decoration:underline}

/* tabela curta (ex.: como o dinheiro volta); a moldura arredondada fica na caixa, que também segura a largura */
.lg-tabela{margin-top:14px;border:1px solid var(--linha);border-radius:12px;overflow:hidden}
.lg-tabela table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.lg-tabela th,.lg-tabela td{padding:12px 14px;text-align:left;vertical-align:top}
.lg-tabela tr + tr > *{border-top:1px solid var(--linha)}
.lg-tabela thead th{background:var(--azul-nevoa);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
.lg-tabela tbody th{width:28%;color:var(--tinta);font-weight:700}

/* tecla com relevo (receita da tecla azul do Porcelana: azul chapado, lábio embaixo, afunda ao clicar) */
.lg-acao{margin-top:16px}
.lg-tecla{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--acao);border-radius:10px;background:var(--acao);color:#fff;font-size:15px;font-weight:650;line-height:1.2;text-align:center;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 3px 0 var(--acao-lip),0 5px 12px -3px rgba(20,24,40,.30);
  transition:transform 90ms var(--mola),box-shadow 90ms var(--mola),background-color 90ms var(--mola)}
.lg-tecla:hover{background:var(--acao-hover);color:#fff;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 4px 0 var(--acao-lip),0 8px 14px -5px rgba(20,24,40,.32)}
.lg-tecla:active{transform:translateY(3px);box-shadow:inset 0 2px 4px rgba(0,0,0,.28)}
.lg-tecla:focus-visible{outline:2px solid var(--acao);outline-offset:2px}

/* dado pendente do dono (Termos de Uso e Privacidade 1.0): visível, mas discreto */
.ph{font-weight:650;color:var(--ambar);background:var(--ambar-claro);box-shadow:inset 0 0 0 1px var(--ambar-borda);border-radius:5px;padding:0 5px;white-space:normal;overflow-wrap:anywhere}

/* RASCUNHO: o <html data-versao="..."> diz a versão do texto. Só enquanto ela terminar em "-rascunho" os
   [confirmar] aparecem como marcador amarelo e o selo "Rascunho" aparece no topo. Na versão publicada o marcador
   fica sem destaque (e nenhum [confirmar] pode sobrar no texto: A.21). */
mark.cf{background:none;color:inherit;font:inherit;padding:0}
html[data-versao$="-rascunho"] mark.cf{background:var(--rascunho);color:var(--rascunho-tinta);box-shadow:inset 0 0 0 1px var(--rascunho-borda);border-radius:4px;padding:0 4px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lg-selo{display:none}
html[data-versao$="-rascunho"] .lg-selo{display:inline-flex;align-items:center;gap:6px;padding:1px 8px;border-radius:6px;background:var(--rascunho);box-shadow:inset 0 0 0 1px var(--rascunho-borda);color:var(--rascunho-tinta);font-weight:650}

/* rodapé discreto (igual ao da landing) + linha da empresa (Decreto 7.962, art. 2º; A.20) */
.lg-rodape{padding:26px 0 40px}
.rod-linha{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:12.5px;color:var(--suave);line-height:1.5}
.rod-linha>*+*::before{content:"·";margin:0 8px;color:var(--suave)}
.rod-linha a{color:var(--suave);text-decoration:none}
.rod-linha a:hover{color:var(--acao);text-decoration:underline}
.rod-linha a[aria-current]{color:var(--tinta);font-weight:600}
.rod-empresa{margin-top:6px;font-size:12.5px;color:var(--suave);line-height:1.5}
.rod-fonte{margin-top:4px;font-size:12px;color:var(--suave)}
@media (max-width:520px){  /* celular: © numa linha; os links quebram sem "·" órfão no começo da linha */
  .rod-linha{gap:6px 16px}
  .rod-linha>span:first-child{flex-basis:100%}
  .rod-linha>*+*::before{content:none;margin:0}
}

@media (max-width:640px){
  body{font-size:16px}
  .lg-cab{padding-top:28px}
  .lg-indice{padding:16px}
  .lg-indice ol{columns:1}
  .lg-doc{padding:4px 18px 26px;border-radius:14px}
  .lg-doc section{padding-top:22px}
  .lg-topo nav{gap:14px;font-size:13.5px}
  .lg-tabela th,.lg-tabela td{padding:10px 12px}
  .lg-tecla{width:100%}
  .ph{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lg-tecla{transition:none}
  .lg-tecla:hover,.lg-tecla:active{transform:none}
}
@media print{
  .lg-topo,.lg-indice,.lg-topo-link,.lg-acao,.pular{display:none}
  .lg-doc{box-shadow:none;padding:0}
  body{background:#fff}
}