/* ============================================================================
   Pegada de Silício 2.0 — CSS das PÁGINAS DE DOCUMENTO (/privacidade e /termos).

   Por que um arquivo só, e não o CSS embutido em cada página (como planos.html faz):
   as duas páginas são o MESMO tipo de documento — texto corrido, seções, rodapé com
   data e o bloco interno de pendências. Duplicar ~300 linhas de CSS em dois arquivos
   é a informação duplicada que este projeto combate: um ajuste de espaçamento sairia
   em dois lugares e voltaria fora de sincronia. Os tokens são os mesmos das outras
   páginas (nada de CDN, nada de fonte externa — os arquivos vêm de /static).

   Espelha o bloco de tokens de planos.html e landing.html: mesma paleta, mesma
   escala fechada de tipo, mesmos espaçamentos, mesmos breakpoints.
   ========================================================================== */
:root{
  --bg:#0b0f17; --bg2:#0e1522; --card:#131a26; --card2:#111a28;
  --line:#232d3f; --line2:#1b2432;
  --tx:#e8edf5; --mut:#93a1b5; --acc:#4ade80; --acc2:#38bdf8;
  --azul:#7ab7ff; --azul-linha:rgba(122,183,255,.20); --azul-linha-forte:rgba(122,183,255,.34);
  --halo:0 18px 50px rgba(0,0,0,.42), 0 0 0 1px rgba(122,183,255,.05), 0 0 34px rgba(56,120,220,.12);
  --halo-suave:0 0 22px rgba(56,120,220,.10);
  --halo-verde:0 0 18px rgba(74,222,128,.28);
  --txt-escuro:#06210f;

  --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px;
  --fs-h1:clamp(28px, 4.4vw, 40px);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --r-1:8px; --r-2:10px; --r-3:14px; --r-4:16px; --pill:999px;
  --t:.16s; --t2:.22s;

  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap:1240px;
  /* medida de leitura: documento jurídico em linha longa é ilegível. 72ch em sans de 16px
     é a faixa confortável; as listas ficam um degrau mais largas (76ch) porque o marcador
     ocupa a primeira coluna. */
  --medida:72ch; --medida-larga:78ch;
}
*{box-sizing:border-box;margin:0}
/* Ícones: Lucide (https://lucide.dev, licença ISC). O tamanho GLOBAL é obrigatório: sem
   width/height o navegador desenha <svg> em 300x150. */
.ico{width:14px;height:14px;flex:0 0 auto}
html{-webkit-text-size-adjust:100%}
body{color:var(--tx);font:16px/1.6 var(--sans);
  /* degradê ambiente preso à janela: a aura é da PÁGINA, não de um bloco */
  background:radial-gradient(125% 85% at 16% -12%, rgba(56,120,220,.22), transparent 62%),
             radial-gradient(90% 70% at 102% 108%, rgba(24,60,120,.18), transparent 70%),
             var(--bg);
  background-attachment:fixed}
*{scrollbar-width:thin;scrollbar-color:#2e3b52 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2e3b52;border-radius:var(--pill);
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#3d5070;background-clip:content-box}

/* foco visível em TODO elemento interativo (outline:none é proibido no projeto) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px;
}
a,button,[role="button"],[tabindex]{cursor:pointer}
h1,h2,h3{line-height:1.2;font-weight:600}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-5) var(--sp-7)}

/* ------------------------------- topo ------------------------------- */
.marca{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) 0 var(--sp-4);flex-wrap:wrap}
.marca-logo{width:33px;height:40px;display:block;flex:0 0 auto}
.marca-txt{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.1}
.eyebrow{font:600 var(--fs-13)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.marca-txt b{font-size:var(--fs-18);font-weight:700;letter-spacing:-.2px;white-space:nowrap}
/* seletor de idioma = a MESMA pílula segmentada da landing e de /planos (ids iguais de
   propósito: o pintaIdioma() do i18n.js pinta os dois botões pelo id) */
.idioma{margin-left:auto;display:inline-flex;gap:2px;padding:2px;flex:0 0 auto;
  background:var(--card);border:1px solid var(--azul-linha);border-radius:var(--pill);box-shadow:var(--halo-suave)}
.idioma-op{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;
  border:0;background:transparent;color:var(--mut);border-radius:var(--pill);
  font:600 var(--fs-13)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;transition:background var(--t),color var(--t)}
.idioma-op:hover{color:var(--tx)}
.idioma-op .tick{display:none}
.idioma-op.on{background:var(--acc);color:var(--txt-escuro);box-shadow:var(--halo-verde)}
.idioma-op.on .tick{display:inline}

.voltar{display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--sp-6);
  color:var(--mut);text-decoration:none;font-size:var(--fs-14);transition:color var(--t)}
.voltar:hover{color:var(--acc)}
.voltar .ico{width:15px;height:15px}

/* ------------------------------- hero ------------------------------- */
.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--azul-linha);background:var(--card);
  color:var(--acc);border-radius:var(--pill);padding:6px 14px;font-size:var(--fs-14);margin-bottom:var(--sp-5)}
.tag .ico{width:15px;height:15px}
h1{font-size:var(--fs-h1);letter-spacing:-.5px;max-width:26ch}
h1 em{font-style:normal;color:var(--acc)}
.sub{color:var(--mut);font-size:var(--fs-18);margin:var(--sp-4) 0 0;max-width:66ch}
.sub b{color:var(--tx)}
/* resumo de abertura: o visitante lê isto e para aqui, se quiser. É o texto honesto em 4 linhas. */
.resumo{margin-top:var(--sp-5);font-size:var(--fs-16);color:var(--mut);
  border-left:2px solid var(--acc);padding-left:var(--sp-4);line-height:1.65;max-width:76ch}
.resumo b{color:var(--tx)}
.rodape-doc{margin-top:var(--sp-4);font:600 var(--fs-13)/1.5 var(--mono);color:var(--mut)}
.rodape-doc a{color:var(--azul);text-decoration:none}
.rodape-doc a:hover{text-decoration:underline}

/* ------------------------------ documento ------------------------------
   Um bloco por assunto. A numeração sai do CSS (não do texto) para o contador
   acompanhar a ordem sozinho — trocar dois blocos de lugar não deixa buraco. */
.doc{margin-top:var(--sp-7);counter-reset:bloco}
.bloco{max-width:var(--medida);padding:var(--sp-5) 0;border-top:1px solid var(--line)}
.bloco:first-child{border-top:0;padding-top:0}
.bloco h2{font-size:var(--fs-22);letter-spacing:-.2px;display:flex;align-items:baseline;gap:10px}
.bloco h2::before{counter-increment:bloco;content:counter(bloco);
  font:700 var(--fs-14)/1 var(--mono);color:var(--acc);flex:0 0 auto;
  border:1px solid rgba(74,222,128,.30);background:rgba(74,222,128,.08);
  border-radius:var(--pill);padding:4px 9px;font-variant-numeric:tabular-nums}
.bloco p{color:var(--mut);font-size:var(--fs-16);margin-top:var(--sp-3);line-height:1.65}
.bloco p b,.bloco li b{color:var(--tx);font-weight:600}
.bloco code{font-family:var(--mono);font-size:.92em;color:var(--acc2);
  background:rgba(56,189,248,.08);border:1px solid rgba(56,189,248,.20);border-radius:6px;padding:1px 5px}
.lista{list-style:none;padding:0;margin:var(--sp-3) 0 0;max-width:var(--medida-larga)}
.lista li{position:relative;color:var(--mut);font-size:var(--fs-16);line-height:1.6;
  padding:8px 0 8px 22px;overflow-wrap:anywhere}
.lista li::before{content:'';position:absolute;left:4px;top:16px;width:6px;height:6px;
  border-radius:2px;background:var(--acc);opacity:.75}
.lista li b{color:var(--tx)}

/* marcador de PENDÊNCIA inline: onde o texto depende de dado que o Renato ainda não
   fechou (CNPJ, e-mail de contato, prazo). Fica visível para quem revisa e discreto
   para quem lê — a página inteira ainda é rascunho e o rodapé diz isso. */
.marca-pend{display:inline;font:600 var(--fs-13)/1.5 var(--mono);color:var(--azul);
  background:rgba(122,183,255,.07);border:1px dashed var(--azul-linha-forte);
  border-radius:6px;padding:2px 7px;overflow-wrap:anywhere}
.marca-pend::before{content:'PENDÊNCIA: ';letter-spacing:.06em;color:var(--mut)}
html[lang="en"] .marca-pend::before{content:'TO BE DECIDED: '}

/* -------------------------------- rodapé -------------------------------- */
.rodape-legal{margin-top:var(--sp-7);border-top:1px solid var(--line);padding-top:var(--sp-5);
  max-width:var(--medida);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.rodape-legal .data{font:600 var(--fs-14)/1.5 var(--mono);color:var(--tx);
  display:inline-flex;align-items:center;gap:7px}
.rodape-legal .data .ico{width:15px;height:15px;color:var(--azul)}
/* o aviso de rascunho: mesma família do bloco de pendências, mas SEMPRE visível a quem
   abrir a página — é honestidade com o visitante, não recado interno. */
.rascunho{font-size:var(--fs-14);line-height:1.6;color:var(--mut);
  border:1px dashed var(--line);border-radius:var(--r-2);padding:var(--sp-3) var(--sp-4);
  background:var(--card2)}
.rascunho b{color:var(--tx)}
.rodape-links{display:flex;gap:var(--sp-5);flex-wrap:wrap;font-size:var(--fs-14)}
.rodape-links a{color:var(--azul);text-decoration:none}
.rodape-links a:hover{text-decoration:underline}
.marca-rodape{border-top:1px solid var(--line);margin-top:var(--sp-5);padding-top:var(--sp-4);
  color:var(--mut);font-size:var(--fs-13);display:flex;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap}

/* ---------------------- bloco interno de pendências ----------------------
   É para o RENATO, não para o visitante: por isso o rótulo em mono diz "interno",
   a borda é tracejada e o texto sai do fluxo de leitura do documento (fora do
   <article>). Some da página quando o assunto estiver resolvido. */
.pend{margin-top:var(--sp-8);max-width:none;background:var(--card2);
  border:1px dashed var(--line2);border-radius:var(--r-3);padding:var(--sp-5)}
.pend-rotulo{font:600 var(--fs-13)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pend-rotulo .ico{width:13px;height:13px}
.pend h2{font-size:var(--fs-18);margin-top:var(--sp-3);color:var(--tx)}
.pend-nota{color:var(--mut);font-size:var(--fs-14);margin-top:var(--sp-2);max-width:80ch;line-height:1.6}
.pend-nota b{color:var(--tx)}
.pend-lista{list-style:none;padding:0;margin:var(--sp-4) 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-5)}
.pend-lista li{color:var(--mut);font-size:var(--fs-14);line-height:1.55;
  padding:9px 0 9px 20px;position:relative;border-top:1px solid var(--line2);overflow-wrap:anywhere}
.pend-lista li::before{content:'';position:absolute;left:3px;top:17px;width:0;height:0;
  border:5px solid transparent;border-left-color:var(--azul);opacity:.7}
.pend-lista li b{color:var(--tx)}

/* ------------------------------ responsivo ------------------------------ */
@media (max-width:1440px){
  .bloco{padding:var(--sp-4) 0}
}
@media (max-width:1024px){
  :root{--medida:68ch; --medida-larga:68ch}
  .pend-lista{grid-template-columns:1fr}
}
@media (max-width:768px){
  .wrap{padding:0 var(--sp-4) var(--sp-6)}
  .marca{padding:var(--sp-4) 0 var(--sp-3)}
  h1{max-width:none}
  .sub,.resumo{max-width:none;font-size:var(--fs-16)}
  .bloco h2{font-size:var(--fs-18);align-items:flex-start}
  .bloco p,.lista li{font-size:var(--fs-16)}
  .pend{padding:var(--sp-4)}
}
@media (max-width:375px){
  .wrap{padding:0 var(--sp-3) var(--sp-5)}
  .marca-txt b{font-size:var(--fs-16)}
  .idioma-op{padding:0 9px}
  .rodape-links{flex-direction:column;gap:var(--sp-2)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;
    transition-duration:1ms !important;scroll-behavior:auto !important}
}

/* toque: remove os 300ms de atraso no celular — as páginas legais não têm <style> próprio,
   então a regra vive aqui (e serve para qualquer página que carregue esta folha) */
a,button,input,select,textarea{touch-action:manipulation}