/* Vease Jurídico — estilos próprios da página.
     Fontes, tokens, base, botões, nav e footer vivem em /css/shared.css
     (compartilhado com o www) — linkado antes deste arquivo. */
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { overflow-x:clip; }
  a { color:var(--accent-strong); text-decoration:none; }
  ::selection { background:var(--accent); color:var(--ink); }
  .kick { font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
  .d1 { font-size:clamp(40px,5.6vw,68px); letter-spacing:-0.02em; }
  .d2 { font-size:clamp(30px,4.2vw,46px); }
  .d3 { font-size:clamp(26px,3.4vw,40px); }
  .lead { font-size:18px; line-height:1.6; }
  .sect { padding:96px 0; }
  .g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .g2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .g6 { display:grid; grid-template-columns:repeat(6,1fr); gap:24px; }
  :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
  .frame { border-radius:var(--radius); overflow:hidden; border:1px solid rgba(0,0,0,.08); box-shadow:0 24px 60px rgba(0,0,0,.35); background:#fff; }
  .chrome { display:flex; gap:8px; padding:14px 18px; background:var(--paper-tint); border-bottom:1px solid var(--line); }
  .chrome span { width:12px; height:12px; border-radius:50%; background:var(--line); }
  /* Reveals de scroll (só com JS ativo; padrão é visível).
     DECISÃO DE PRODUTO: prefers-reduced-motion é ignorado de propósito nesta página.
     No Windows, "Mostrar animações" desligado (comum em máquina corporativa) ativava o modo
     reduzido e escondia efeitos que carregam a mensagem. As animações daqui são curtas,
     de deslocamento pequeno e sem loop — não reintroduzir o media query. */
  .rv-on [data-rv] { opacity:0; transform:translateY(18px); transition:opacity .65s ease var(--rvd, 0ms), transform .65s ease var(--rvd, 0ms); }
  .rv-on [data-rv="art"] { transform:translateY(24px) scale(.985); transition-duration:.8s, .8s; }
  .rv-on [data-rv].rv-in { opacity:1; transform:none; }
  .rv-on [data-rvg] > * { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .rv-on [data-rvg] > *:nth-child(2) { transition-delay:70ms; }
  .rv-on [data-rvg] > *:nth-child(3) { transition-delay:140ms; }
  .rv-on [data-rvg] > *:nth-child(4) { transition-delay:210ms; }
  .rv-on [data-rvg] > *:nth-child(5) { transition-delay:280ms; }
  .rv-on [data-rvg] > *:nth-child(6) { transition-delay:350ms; }
  .rv-on [data-rvg] > *:nth-child(n+7) { transition-delay:380ms; }
  .rv-on [data-rvg].rv-in > * { opacity:1; transform:none; }
  /* Planos: PRO protagonista, Corporate companheiro */
  .pl-agrid { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:stretch; }
  @media (max-width:900px) { .pl-agrid { grid-template-columns:1fr; } }
  /* Passos "Como funciona" sincronizados com o ciclo de 17s do demo */
  .cf-step { border-top:2px solid var(--line-light); padding-top:20px; position:relative; color:var(--muted-light); }
  .cf-step:first-child { border-top-color:var(--accent); color:var(--accent); }
  .cf-num { font-family:var(--f-display); font-weight:900; font-size:24px; color:inherit; }
  .cf-title { font-family:var(--f-display); font-weight:700; font-size:20px; color:#fff; margin-top:10px; }
  .cf-p { font-size:16px; line-height:1.45; color:var(--muted-light); margin-top:8px; }
  .cf-step:nth-child(1) { animation: cfs1 17s forwards; }
  .cf-step:nth-child(2) { animation: cfs2 17s forwards; }
  .cf-step:nth-child(3) { animation: cfs3 17s forwards; }
  .cf-step:nth-child(4) { animation: cfs4 17s forwards; }
  @keyframes cfs1 { 0%,26.9% { border-top-color:var(--accent); color:var(--accent); opacity:1; } 27%,100% { border-top-color:var(--line-light); color:var(--muted-light); opacity:.65; } }
  @keyframes cfs2 { 0%,26.9% { border-top-color:var(--line-light); color:var(--muted-light); opacity:.65; } 27%,53.9% { border-top-color:var(--accent); color:var(--accent); opacity:1; } 54%,100% { border-top-color:var(--line-light); color:var(--muted-light); opacity:.65; } }
  @keyframes cfs3 { 0%,53.9% { border-top-color:var(--line-light); color:var(--muted-light); opacity:.65; } 54%,70.9% { border-top-color:var(--accent); color:var(--accent); opacity:1; } 71%,100% { border-top-color:var(--line-light); color:var(--muted-light); opacity:.65; } }
  @keyframes cfs4 { 0%,70.9% { border-top-color:var(--line-light); color:var(--muted-light); opacity:.65; } 71%,100% { border-top-color:var(--accent); color:var(--accent); opacity:1; } }
  /* Hero */
  .hero-atmo { position:absolute; inset:0; background:radial-gradient(90% 80% at 85% 8%, rgba(3,43,55,.9) 0%, rgba(10,17,20,0) 55%); opacity:.7; }
  .hero-pad { position:relative; padding-top:clamp(72px,9vw,120px); padding-bottom:clamp(64px,8vw,110px); }
  .hero-data { margin-top:60px; }
  .hero-data-kick { font-family:var(--f-sans); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:18px; }
  .hero-data-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:780px; }
  .hero-stat { border-top:1px solid var(--line-light); padding-top:16px; }
  .hero-stat.is-first { border-top:2px solid var(--accent); }
  .hero-num { font-family:var(--f-display); font-weight:900; font-size:clamp(28px,3.2vw,38px); color:#fff; line-height:1; }
  .hero-lab { font-size:15px; color:var(--muted-light); margin-top:6px; }
  /* Demo animation (loop ~17s) */
  @keyframes vDrop { 0%,8%{opacity:0;transform:translateY(14px);} 12%,23%{opacity:1;transform:translateY(0);} 27%,100%{opacity:0;transform:translateY(14px);} }
  @keyframes vSelName { 0%,11%{color:var(--ink);} 15%,100%{color:var(--accent-strong);} }
  @keyframes vPlaceholder { 0%,27%{opacity:1;} 31%,52%{opacity:0;} 56%,100%{opacity:1;} }
  @keyframes vPrompt { 0%,28%{opacity:0;} 32%,49%{opacity:1;} 52%,100%{opacity:0;} }
  @keyframes vCaret { 0%,100%{opacity:1;} 50%{opacity:0;} }
  @keyframes vSend { 0%,48%{background:#ffb08f;} 50%,53%{background:var(--accent-strong);} 55%,100%{background:#ffb08f;} }
  @keyframes vUser { 0%,50%{opacity:0;transform:translateY(12px);} 54%,100%{opacity:1;transform:translateY(0);} }
  @keyframes vThink { 0%,55%{opacity:0;} 58%,68%{opacity:1;} 72%,100%{opacity:0;} }
  @keyframes vReply { 0%,70%{opacity:0;transform:translateY(14px);} 74%,100%{opacity:1;transform:translateY(0);} }
  /* Hover: botões e nav vêm do shared.css (sem glow, sem lift de card) */
  /* Hero encenado */
  @keyframes vIn { from{opacity:0;transform:translateY(26px);} to{opacity:1;transform:none;} }
  .stage > * { animation:vIn .8s cubic-bezier(.22,.61,.36,1) both; }
  .stage > *:nth-child(1){animation-delay:.05s} .stage > *:nth-child(2){animation-delay:.16s}
  .stage > *:nth-child(3){animation-delay:.27s} .stage > *:nth-child(4){animation-delay:.38s}
  .stage > *:nth-child(5){animation-delay:.49s}
  /* Progresso de leitura e nav: ver shared.css (.vprogress, .nav) */
  /* Chips de especialidade — mesma anatomia dos chips do console do www */
  .chip {
    font-family:var(--f-sans); font-size:13.5px; font-weight:600;
    color:var(--muted-light); background:none; cursor:pointer;
    border:1px solid var(--line-light); border-radius:999px; padding:6px 14px;
    transition:color .15s ease, border-color .15s ease, background-color .15s ease;
  }
  .chip:hover { color:var(--paper); border-color:rgba(245,244,241,.4); }
  .chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--ink); }
  .chip:focus-visible { outline:2px solid var(--accent-soft); outline-offset:2px; }
  /* Anotacoes antialucinacao */
  .note { transition:opacity .5s ease, transform .5s ease; }
  .note[data-nv="0"] { opacity:.25; transform:translateY(6px); }
  .note[data-nv="1"] { opacity:1; transform:none; }
  /* Logs de auditoria: painel nativo com dados ilustrativos (substitui screenshot) */
  /* min-width:0 em toda a cadeia: sem isso o min-content da tabela estica o item do grid e o painel e cortado */
  .lg-cell, .lg-panel, .lg-tablewrap { min-width:0; }
  /* Base (e fallback sem subgrid): celula empilha painel + legenda, painel cresce. */
  .lg-cell { display:flex; flex-direction:column; gap:16px; }
  .lg-cell > .frame { flex:1 1 auto; display:flex; flex-direction:column; }
  .lg-tablewrap, .uc-body { flex:1 1 auto; }
  /* Paineis irmaos com a MESMA altura. Só esticar o frame nao basta: as legendas quebram
     em numeros de linha diferentes e cada painel fica com a sobra da propria celula.
     Com subgrid as duas celulas dividem as mesmas trilhas — uma para o painel, outra
     para a legenda — entao painel e legenda alinham independente da quebra de texto. */
  @supports (grid-template-rows: subgrid) {
    @media (min-width:769px) {
      .lg-pair { grid-template-rows:1fr auto; }
      .lg-pair > .lg-cell { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:16px; }
    }
  }
  .lg-panel { background:#fff; color:var(--ink); }
  .pnl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 0; }
  .pnl-title { font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:-.02em; }
  .pnl-sub { font-size:13px; line-height:1.45; color:var(--muted); margin-top:4px; max-width:46ch; }
  .pnl-badge { flex:none; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:5px 10px; }
  .lg-tabs { display:flex; gap:4px; padding:16px 22px 0; overflow-x:auto; }
  .lg-tab { flex:none; font-size:13px; font-weight:600; color:var(--muted); padding:9px 13px; border-radius:8px 8px 0 0; border-bottom:2px solid transparent; white-space:nowrap; }
  .lg-tab.is-on { color:var(--ink); background:var(--paper); border-bottom-color:var(--accent); }
  .lg-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px 22px; border-bottom:1px solid var(--line); }
  .lg-sel { font-size:12px; color:var(--ink-soft); border:1px solid var(--line); border-radius:8px; padding:7px 11px; background:var(--paper); white-space:nowrap; }
  .lg-export { margin-left:auto; font-size:12px; font-weight:600; color:var(--ink); background:var(--accent); border-radius:8px; padding:8px 13px; white-space:nowrap; }
  .lg-tablewrap { overflow-x:auto; }
  /* table-layout:fixed + reticencias: a tabela acompanha a largura do painel em vez de forcar scroll */
  .lg-t { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
  .lg-t th { text-align:left; font-weight:600; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line); }
  .lg-t th:nth-child(1) { width:36%; }
  .lg-t th:nth-child(2) { width:25%; }
  .lg-t th:nth-child(3) { width:21%; }
  .lg-t th:nth-child(4) { width:18%; }
  .lg-t td { padding:9px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lg-t tr:last-child td { border-bottom:0; }
  .lg-file { display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:500; min-width:0; }
  .lg-file svg { flex:none; }
  .lg-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lg-act { display:inline-flex; align-items:center; gap:7px; }
  .lg-act::before { content:""; width:6px; height:6px; border-radius:999px; background:var(--line); flex:none; }
  .lg-act.is-del { color:var(--accent-strong); font-weight:600; }
  .lg-act.is-del::before { background:var(--accent); }
  .lg-t td.lg-when { color:var(--muted); }
  .lg-cap { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  @keyframes lgIn { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
  .pnl-armed .lg-row { opacity:0; }
  .pnl-run .lg-row { animation:lgIn .52s cubic-bezier(.16,1,.3,1) both; }
  .pnl-run .lg-row:nth-child(1) { animation-delay:.04s; }
  .pnl-run .lg-row:nth-child(2) { animation-delay:.11s; }
  .pnl-run .lg-row:nth-child(3) { animation-delay:.18s; }
  .pnl-run .lg-row:nth-child(4) { animation-delay:.25s; }
  .pnl-run .lg-row:nth-child(5) { animation-delay:.32s; }
  .pnl-run .lg-row:nth-child(6) { animation-delay:.39s; }
  .pnl-run .lg-row:nth-child(n+7) { animation-delay:.46s; }
  /* barras de uso: crescem da esquerda ao entrar em cena.
     :not(.pnl-run) e obrigatorio — sem ele a regra "armed" continua valendo depois do run
     (especificidade maior que a base) e a barra fica travada em scaleX(0). */
  .pnl-armed:not(.pnl-run) .uc-bar i { transform:scaleX(0); }
  .pnl-run .uc-bar i { transition:transform 1.1s cubic-bezier(.16,1,.3,1) .15s; }
  /* Uso de creditos: painel nativo com dados ilustrativos (substitui screenshot) */
  .uc-panel { background:#fff; color:var(--ink); min-width:0; }
  .uc-body { padding:16px 22px 22px; }
  .uc-card { border:1px solid var(--line); border-radius:12px; padding:16px; }
  .uc-cardtitle { font-weight:600; font-size:13px; }
  .uc-carddesc { font-size:12px; line-height:1.45; color:var(--muted); margin-top:3px; }
  .uc-block { background:var(--paper); border-radius:8px; padding:14px; margin-top:14px; }
  .uc-lab { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .uc-figrow { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:5px; }
  .uc-fig { font-family:var(--f-display); font-weight:900; font-size:26px; letter-spacing:-.02em; line-height:1.1; }
  .uc-fig em { font-family:var(--f-sans); font-style:normal; font-weight:400; font-size:13px; color:var(--muted); letter-spacing:0; }
  .uc-pct { flex:none; font-size:11px; font-weight:600; color:var(--accent-strong); background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 9px; }
  .uc-bar { height:8px; border-radius:999px; background:var(--line); margin-top:10px; overflow:hidden; }
  .uc-bar i { display:block; height:100%; width:100%; border-radius:999px; background:var(--accent); transform:scaleX(var(--v,1)); transform-origin:0 50%; }
  .uc-bar.is-mod i { background:var(--ink-soft); }
  .uc-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; font-size:12px; color:var(--muted); margin-top:8px; }
  .uc-mod { margin-top:16px; }
  .uc-modhead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .uc-modname { font-weight:600; font-size:13px; }
  .uc-modval { font-family:var(--f-display); font-weight:700; font-size:15px; }
  /* Indice do dossie: as 13 especialidades agrupadas pela natureza do trabalho.
     Sem ordinais — a ordem nao carrega informacao; o agrupamento carrega, e quebra
     a lista em 3 blocos de 4-5, dentro do limite de memoria de trabalho. */
  .dossie { margin-top:52px; gap:40px; align-items:start; }
  .dsg-lab { position:relative; font-family:var(--f-sans); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); padding-bottom:14px; border-bottom:2px solid var(--accent); }
  .dsg-list { list-style:none; }
  .dsi { position:relative; border-top:1px solid var(--ink); }
  .dsi:first-child { border-top:0; }
  .dsi-t { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; width:100%; padding:15px 0 14px; background:none; border:0; text-align:left; cursor:pointer; color:var(--muted); font-family:inherit; }
  .dsi-h { display:block; min-width:0; }
  .dsi-n { display:block; font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--ink); transition:color .2s ease; }
  .dsi-d { display:block; font-size:14px; line-height:1.45; color:var(--muted); margin-top:5px; }
  .dsi-i { flex:none; margin-top:7px; transition:transform .3s cubic-bezier(.16,1,.3,1); }
  .dsi-t:hover .dsi-n { color:var(--accent-strong); }
  .dsi.is-open .dsi-i { transform:rotate(180deg); }
  /* expansao sem medir altura em JS: 0fr -> 1fr anima; visibility tira do leitor de tela quando fechado */
  .dsi-p { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .38s; }
  .dsi.is-open .dsi-p { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .38s cubic-bezier(.16,1,.3,1), visibility 0s; }
  .dsi-pi { overflow:hidden; }
  .dsi-inv, .dsi-lac { font-size:13.5px; line-height:1.5; color:var(--ink-soft); }
  .dsi-inv { margin-bottom:11px; }
  .dsi-lac { padding-bottom:16px; }
  .dsi-inv b, .dsi-lac b { display:block; font-family:var(--f-sans); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
  /* Marcador de lacuna, calibrado para fundo claro: var(--accent-strong), nunca var(--accent) como texto pequeno no Papel.
     isolation:isolate cria o contexto de empilhamento para a tinta (::before, z-index:-1) ficar
     atras do texto sem cair atras do fundo da secao. Estado padrao = ja marcado. */
  .mk { position:relative; isolation:isolate; display:inline-flex; align-items:center; border:1px solid var(--accent-strong); color:var(--accent-strong); border-radius:7px; padding:1px 7px; font-family:var(--f-display); font-weight:700; font-size:12px; }
  /* a tinta e o proprio Laranja Grifo com alfa: grifo-nevoa (#FDECE5) sobre Papel da 1,045:1,
     invisivel. A 28% o traco le (1,44:1 contra o fundo) e o texto sob ele fica em 6,9:1. */
  .mk::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:6px; background:rgba(255,60,0,.28); transform:scaleX(0); transform-origin:0 50%; opacity:0; }
  /* o traco leva a curva no proprio keyframe: com ease-out exponencial na animacao inteira
     a varredura fecharia nos primeiros 15% e nao leria como traco de caneta */
  @keyframes mkInk {
    0% { transform:scaleX(0); opacity:1; animation-timing-function:cubic-bezier(.4,.1,.3,1); }
    55% { transform:scaleX(1); opacity:1; animation-timing-function:ease-out; }
    100% { transform:scaleX(1); opacity:0; }
  }
  @keyframes mkMark {
    0%,55% { border-color:transparent; color:var(--ink-soft); animation-timing-function:cubic-bezier(.16,1,.3,1); }
    100% { border-color:var(--accent-strong); color:var(--accent-strong); }
  }
  .dsi.is-open .mk { animation:mkMark .62s linear .3s both; }
  /* o grifo passa sobre a lacuna: a nevoa varre o token e a marca resolve atras dela.
     A palavra ja esta legivel o tempo todo — o que chega e a MARCA, nao o texto. */
  .dsi.is-open .mk::before { animation:mkInk .62s linear .3s both; }
  @keyframes dsRule { to { transform:scaleX(1); } }
  @supports (animation-timeline: view()) {
    /* cada regua se desenha da esquerda conforme a entrada cruza a viewport */
    .dsi:not(:first-child) { border-top-color:transparent; }
    /* o traco fecha enquanto a entrada ainda esta entrando: varias reguas visiveis ao mesmo
       tempo em larguras diferentes leem como bug, nao como efeito */
    .dsi:not(:first-child)::before { content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:0 50%; animation:dsRule cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 6% entry 62%; }
    .dsg-lab { border-bottom-color:transparent; }
    .dsg-lab::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; animation:dsRule cubic-bezier(.16,1,.3,1) both; animation-timeline:view(); animation-range:entry 2% entry 48%; }
  }
  @media (max-width:560px){
    .lg-t th:nth-child(4), .lg-t td:nth-child(4) { display:none; }
    .pnl-head, .lg-tabs, .lg-filters { padding-left:14px; padding-right:14px; }
    .lg-t th:nth-child(1) { width:44%; }
    .lg-t th:nth-child(2) { width:30%; }
    .lg-t th:nth-child(3) { width:26%; }
    .pnl-sub { display:none; }
  }
  /* Responsivo (menu mobile vem do shared.css em 900px) */
  @media (max-width:1024px){
    .g3, .g4 { grid-template-columns:repeat(2,1fr); }
    .g6 { grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:1100px){
    .demoshell { display:none !important; }
    .demofallback { display:block !important; }
  }
  @media (max-width:768px){
    .sect { padding:72px 0; }
    .g3, .g4, .g2, .g6 { grid-template-columns:1fr; }
    .compare { grid-template-columns:1fr !important; }
    .hero-data-row { grid-template-columns:1fr; gap:18px; }
  }
  @media (max-width:480px){
    .btn:not(.nav-cta) { width:100%; justify-content:center; }
  }

  /* Compensação do hero para a nav fixa (.nav-overhero, ver shared.css):
     o padding extra substitui a altura que a nav deixa de ocupar no fluxo. */
  @supports (animation-timeline: scroll()) {
    .nav-overhero ~ main .hero .hero-pad { padding-top:calc(clamp(72px,9vw,120px) + 76px); }
  }

  /* Loops respeitam reduced-motion (mesma política do www: efeitos curtos
     sem loop seguem ativos — ver comentário dos reveals acima). O caret do
     demo anima inline no HTML, daí o seletor de atributo + !important. */
  @media (prefers-reduced-motion: reduce){
    [style*="vCaret"] { animation:none !important; }
  }