/* ============================================================
   Analisar Agro — documentos legais
   v7.0 · superfície de LEITURA

   Um documento jurídico é lido uma vez, sob pressão, por alguém
   que precisa de uma resposta específica. Então a página não é
   texto corrido: é um documento com sumário vivo, resposta curta
   antes da cláusula, tradução em português claro ao lado e
   direitos que disparam um pedido de verdade.

   Sem style embutido, sem fonte externa, sem CDN — a CSP do site
   é fechada em 'self'.
   ============================================================ */

.legal-page{
  --lg-ink:#f0f5f1;
  --lg-body:#c0d0c5;
  --lg-dim:#879c8f;
  --lg-faint:#4a6455;      /* so para fios e marcadores */
  --lg-numero:#8fa89a;     /* numero da clausula: texto pequeno, AA */
  --lg-green:#5fd137;
  --lg-green-soft:#a5ec87;
  --lg-panel:#07180f;
  --lg-panel-2:#0a2114;
  --lg-line:#17452c;
  --lg-hair:#0f2c1c;
  --lg-measure:70ch;
}

/* ------------------------------------------------------------
   Superfícies do navegador — o que não desenhamos também é design
   ------------------------------------------------------------ */
.legal-page ::selection{ background:rgba(95,209,55,.26); color:#f4faf5; }
.legal-page{ caret-color:var(--lg-green); scrollbar-color:#1d5233 #04100a; scrollbar-width:thin; }
.legal-page ::-webkit-scrollbar{ width:11px; height:11px; }
.legal-page ::-webkit-scrollbar-track{ background:#04100a; }
.legal-page ::-webkit-scrollbar-thumb{
  background:#1d5233; border-radius:8px; border:3px solid #04100a;
}
.legal-page ::-webkit-scrollbar-thumb:hover{ background:#2a7345; }
.legal-page a:focus-visible,
.legal-page button:focus-visible,
.legal-page summary:focus-visible{
  outline:2px solid var(--lg-green); outline-offset:3px; border-radius:6px;
}

/* ------------------------------------------------------------
   O único momento autoral de movimento: o documento sabe onde
   você está. A régua acompanha a leitura, o sumário marca a
   cláusula aberta. Nada mais se mexe sozinho.
   ------------------------------------------------------------ */
.regua{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:200;
  background:var(--lg-hair); pointer-events:none;
}
.regua i{
  display:block; height:100%; width:0;
  background:var(--lg-green);
  transform-origin:left center;
}

.pular{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--lg-green); color:#04150a; font-weight:800;
  padding:12px 18px; border-radius:0 0 10px 0; text-decoration:none;
}
.pular:focus{ left:0; }

/* O site inteiro respira em 1480px. Um documento, não: a linha longa
   demais faz o olho perder a volta. Aqui a caixa fecha em 1260px. */
.legal-page .interno{
  width:min(1260px,100%);
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,28px);
}

/* ------------------------------------------------------------
   Abertura
   ------------------------------------------------------------ */
.doc-capa{
  border-bottom:1px solid var(--lg-hair);
  background:radial-gradient(900px 420px at 78% -18%,rgba(95,209,55,.10),transparent 64%);
}
.doc-capa-corpo{ padding:clamp(44px,7vw,88px) 0 clamp(30px,4vw,44px); }

.doc-capa h1{
  margin:0;
  max-width:15ch;
  font-size:clamp(2.6rem,7vw,5rem);
  line-height:.98; letter-spacing:-.035em; font-weight:800;
  color:var(--lg-ink); text-wrap:balance;
}
.doc-chamada{
  margin:22px 0 0; max-width:58ch;
  color:var(--lg-body); font-size:clamp(1rem,1.5vw,1.14rem); line-height:1.66;
}

/* Ficha do documento: uma faixa, dividida por fios — não cartões */
.doc-ficha{
  display:flex; flex-wrap:wrap; margin-top:clamp(28px,4vw,40px);
  border:1px solid var(--lg-line); border-radius:14px; overflow:hidden;
}
.doc-ficha>div{
  flex:1 1 176px; padding:15px 18px;
  border-left:1px solid var(--lg-hair);
}
.doc-ficha>div:first-child{ border-left:0; }
.doc-ficha dt{
  margin:0 0 6px; color:var(--lg-dim);
  font-size:.69rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
}
.doc-ficha dd{
  margin:0; color:var(--lg-ink); font-weight:700; font-size:.96rem;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------
   O essencial: as respostas curtas antes do texto longo.
   Um livro-razão de perguntas, não uma grade de cartões.
   ------------------------------------------------------------ */
.essencial{ padding:clamp(40px,5vw,60px) 0 0; }
.essencial>h2{
  margin:0 0 6px; font-size:clamp(1.5rem,2.8vw,2.1rem);
  letter-spacing:-.03em; color:var(--lg-ink); font-weight:750;
}
.essencial>p{ margin:0 0 26px; color:var(--lg-dim); font-size:.94rem; max-width:60ch; }

.razao{ margin:0; max-width:1060px; border-top:1px solid var(--lg-line); }
.razao>div{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;
  gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--lg-hair);
}
.razao dt{
  margin:0; color:var(--lg-ink); font-weight:700;
  font-size:1.02rem; letter-spacing:-.01em; line-height:1.35;
}
.razao dd{
  margin:0; color:var(--lg-body); font-size:1rem; line-height:1.62; max-width:60ch;
}
.razao dd b{ color:var(--lg-green-soft); font-weight:700; }
.razao .ir{
  color:var(--lg-dim); font-size:.8rem; font-weight:700; text-decoration:none;
  white-space:nowrap; padding:5px 10px; border:1px solid var(--lg-hair); border-radius:999px;
  transition:color .18s ease,border-color .18s ease;
}
.razao .ir:hover{ color:var(--lg-green); border-color:var(--lg-line); }

/* ------------------------------------------------------------
   Corpo: sumário fixo + cláusulas
   ------------------------------------------------------------ */
.doc{
  display:grid; gap:clamp(28px,4vw,64px);
  grid-template-columns:240px minmax(0,1fr);
  padding:clamp(42px,5vw,68px) 0 clamp(60px,8vw,96px);
  align-items:start;
}

.sumario{ position:sticky; top:112px; }
.sumario h2{
  margin:0 0 14px; color:var(--lg-dim);
  font-size:.69rem; font-weight:850; letter-spacing:.17em; text-transform:uppercase;
}
.sumario ol{ list-style:none; margin:0; padding:0; }
.sumario a{
  display:grid; grid-template-columns:1.9rem 1fr; gap:6px; align-items:baseline;
  padding:7px 0 7px 13px; margin-left:-1px;
  border-left:1px solid var(--lg-hair);
  color:var(--lg-dim); text-decoration:none; font-size:.875rem; line-height:1.35;
  transition:color .18s ease,border-color .18s ease;
}
.sumario a span{
  color:var(--lg-numero); font-size:.72rem; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.sumario a:hover{ color:var(--lg-ink); border-left-color:var(--lg-line); }
.sumario a.ativo{ color:var(--lg-ink); border-left-color:var(--lg-green); font-weight:650; }
.sumario a.ativo span{ color:var(--lg-green); }

.sumario-fim{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--lg-hair);
  display:grid; gap:9px;
}
.sumario-fim a{
  display:block; padding:0; margin:0; border:0;
  color:var(--lg-body); font-size:.85rem; text-decoration:none;
}
.sumario-fim a:hover{ color:var(--lg-green); }

/* ------------------------------------------------------------
   Cláusulas
   O número é informação: é por ele que a cláusula é citada num
   pedido, num contrato ou num processo. Fica.
   ------------------------------------------------------------ */
.doc-corpo{ min-width:0; }

.clausula{
  display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:clamp(22px,2.4vw,36px);
  padding:clamp(30px,4vw,46px) 0;
  border-top:1px solid var(--lg-hair);
  scroll-margin-top:120px;
}
.doc-corpo>.clausula:first-of-type{ border-top:0; padding-top:0; }
.clausula>.texto{ min-width:0; max-width:var(--lg-measure); }

.clausula h2{
  display:grid; grid-template-columns:2.4rem 1fr; align-items:baseline;
  margin:0 0 18px; font-size:clamp(1.3rem,2.1vw,1.68rem);
  letter-spacing:-.028em; line-height:1.22; color:var(--lg-ink); font-weight:750;
  text-wrap:balance;
}
.clausula h2 span{
  color:var(--lg-numero); font-size:.8rem; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.clausula h3{
  margin:28px 0 10px; font-size:1rem; color:var(--lg-green-soft);
  letter-spacing:-.005em; font-weight:700;
}
.clausula p{ margin:0 0 15px; color:var(--lg-body); font-size:1.04rem; line-height:1.75; }
.clausula p:last-child{ margin-bottom:0; }
.clausula ul,.clausula ol{ margin:0 0 15px; padding-left:21px; }
.clausula li{ margin:0 0 10px; color:var(--lg-body); font-size:1.04rem; line-height:1.7; }
.clausula li::marker{ color:var(--lg-faint); }
.clausula strong{ color:var(--lg-ink); font-weight:700; }
.clausula a{
  color:var(--lg-green-soft); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.clausula a:hover{ color:var(--lg-green); }

.lei{
  display:inline-block; padding:1px 7px; border-radius:5px;
  border:1px solid var(--lg-hair); background:#06170e;
  color:var(--lg-dim); font-size:.8rem; font-weight:700; white-space:nowrap;
}

/* ------------------------------------------------------------
   Margem: o mesmo trecho em português claro.
   O rótulo marca o bloco — sem faixa colorida na lateral.
   ------------------------------------------------------------ */
.claro{
  position:sticky; top:120px; align-self:start;
  padding:16px 18px; border-radius:14px;
  border:1px solid var(--lg-line);
  background:var(--lg-panel-2);
}
.claro b{
  display:flex; align-items:center; gap:7px; margin-bottom:9px;
  color:var(--lg-green); font-size:.67rem; font-weight:850;
  letter-spacing:.15em; text-transform:uppercase;
}
.claro b svg{ flex:0 0 auto; width:14px; height:14px; }
.claro p{ margin:0; color:#cfdfd5; font-size:.885rem; line-height:1.64; }
.claro p+p{ margin-top:10px; }

.destaque{
  margin:18px 0; padding:16px 18px;
  border:1px solid var(--lg-line); border-radius:12px;
  background:var(--lg-panel-2);
}
.destaque p{ margin:0; color:#d6e6db; font-size:.95rem; line-height:1.64; }
.destaque p+p{ margin-top:10px; }

/* ------------------------------------------------------------
   Tabelas
   ------------------------------------------------------------ */
.tabela{
  margin:18px 0 6px; overflow-x:auto;
  border:1px solid var(--lg-line); border-radius:14px;
}
.tabela table{ width:100%; border-collapse:collapse; min-width:520px; }
.tabela th,.tabela td{
  padding:13px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--lg-hair); font-size:.9rem; line-height:1.56;
}
.tabela thead th{
  background:#061810; color:var(--lg-dim);
  font-size:.69rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase;
  white-space:nowrap;
}
.tabela tbody th{ color:var(--lg-ink); font-weight:700; }
.tabela td{ color:var(--lg-body); font-variant-numeric:tabular-nums; }
.tabela tr:last-child th,.tabela tr:last-child td{ border-bottom:0; }
.tabela tbody tr:hover td,.tabela tbody tr:hover th{ background:rgba(95,209,55,.05); }

/* ------------------------------------------------------------
   Mapa do caminho do dado — diagrama, geometria exata
   ------------------------------------------------------------ */
.mapa-dado{
  margin:20px 0 8px; padding:22px 20px 18px;
  border:1px solid var(--lg-line); border-radius:16px;
  background:var(--lg-panel);
}
.mapa-dado svg{ display:block; width:100%; height:auto; }
.mapa-dado figcaption{
  margin-top:15px; padding-top:14px; border-top:1px solid var(--lg-hair);
  color:var(--lg-dim); font-size:.83rem; line-height:1.58;
}

/* ------------------------------------------------------------
   Direitos que funcionam: cada linha abre um pedido pronto
   ------------------------------------------------------------ */
.direitos{ display:grid; gap:9px; margin:18px 0 6px; }
.direito{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:15px 16px; border:1px solid var(--lg-hair); border-radius:13px;
  background:var(--lg-panel); transition:border-color .2s ease;
}
.direito:hover{ border-color:var(--lg-line); }
.direito b{ display:block; color:var(--lg-ink); font-size:.97rem; margin-bottom:4px; font-weight:700; }
.direito span{ display:block; color:var(--lg-body); font-size:.865rem; line-height:1.52; }
.direito a{
  white-space:nowrap; text-decoration:none;
  padding:10px 15px; border-radius:9px;
  border:1px solid var(--lg-line); background:#03110b;
  color:#eaf6ee; font-size:.84rem; font-weight:750;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.direito a:hover{ background:var(--lg-green); border-color:var(--lg-green); color:#04150a; }

/* ------------------------------------------------------------
   Identificação do controlador
   ------------------------------------------------------------ */
.contato-legal{
  display:flex; flex-wrap:wrap; margin:18px 0 6px;
  border:1px solid var(--lg-line); border-radius:16px; overflow:hidden;
}
.contato-legal>div{
  flex:1 1 224px; padding:17px 20px; border-left:1px solid var(--lg-hair);
}
.contato-legal>div:first-child{ border-left:0; }
.contato-legal dt{
  margin:0 0 7px; color:var(--lg-dim);
  font-size:.67rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase;
}
.contato-legal dd{ margin:0; color:var(--lg-ink); font-size:.95rem; line-height:1.56; }
.contato-legal dd a{ color:var(--lg-green-soft); text-decoration:none; }
.contato-legal dd a:hover{ text-decoration:underline; }

/* Pendente de preenchimento — visível de propósito */
.preencher{
  display:inline-block; padding:1px 8px; border-radius:5px;
  border:1px dashed #b08428; background:rgba(176,132,40,.14);
  color:#eec972; font-size:.82rem; font-weight:700;
}

/* ------------------------------------------------------------
   Histórico de versões
   ------------------------------------------------------------ */
.historico{ list-style:none; margin:14px 0 0; padding:0; }
.historico li{
  display:grid; grid-template-columns:9rem 1fr; gap:18px;
  padding:13px 0; border-top:1px solid var(--lg-hair);
  color:var(--lg-body); font-size:.9rem; line-height:1.56;
}
.historico b{ color:var(--lg-ink); font-weight:700; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------
   Encerramento
   ------------------------------------------------------------ */
.doc-fim{
  margin-top:clamp(38px,5vw,58px); padding:26px;
  border:1px solid var(--lg-line); border-radius:16px;
  background:var(--lg-panel);
  display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.doc-fim p{ margin:0; max-width:52ch; color:var(--lg-body); font-size:.95rem; line-height:1.62; }
.doc-fim strong{ display:block; color:var(--lg-ink); font-size:1.12rem; margin-bottom:6px; font-weight:750; }
.doc-fim-acoes{ display:flex; gap:10px; flex-wrap:wrap; }
.doc-fim-acoes a{
  text-decoration:none; padding:12px 18px; border-radius:10px; font-weight:800; font-size:.9rem;
  transition:filter .18s ease,background .18s ease,color .18s ease;
}
.acao-forte{ background:var(--lg-green); color:#04150a; }
.acao-forte:hover{ filter:brightness(1.08); }
.acao-leve{ border:1px solid var(--lg-line); background:#03110b; color:#eaf6ee; }
.acao-leve:hover{ background:var(--lg-panel-2); }

/* ------------------------------------------------------------
   Adaptação
   ------------------------------------------------------------ */
@media(max-width:1240px){
  .clausula{ grid-template-columns:minmax(0,1fr); }
  .clausula>.texto{ max-width:none; }
  .claro{ position:static; }
}
@media(max-width:980px){
  .doc{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .sumario{
    position:sticky; top:0; z-index:60; margin:0 -16px;
    padding:12px 16px 10px; background:#020b07;
    border-bottom:1px solid var(--lg-hair);
  }
  .sumario h2{ margin-bottom:10px; }
  .sumario ol{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .sumario ol::-webkit-scrollbar{ display:none; }
  .sumario a{
    border-left:0; border:1px solid var(--lg-hair); border-radius:999px;
    padding:7px 13px; white-space:nowrap; margin:0;
    grid-template-columns:auto auto; gap:6px;
  }
  .sumario a.ativo{ border-color:var(--lg-green); background:rgba(95,209,55,.1); }
  .sumario-fim{ display:none; }
  .razao>div{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .razao .ir{ justify-self:start; }
  .direito{ grid-template-columns:minmax(0,1fr); }
  .direito a{ text-align:center; }
  .historico li{ grid-template-columns:1fr; gap:4px; }
}
@media(max-width:560px){
  .doc-ficha>div{ flex-basis:100%; border-left:0; border-top:1px solid var(--lg-hair); }
  .doc-ficha>div:first-child{ border-top:0; }
  .contato-legal>div{ flex-basis:100%; border-left:0; border-top:1px solid var(--lg-hair); }
  .contato-legal>div:first-child{ border-top:0; }
  .doc-fim{ padding:22px; }
  .doc-fim-acoes a{ flex:1 1 100%; text-align:center; }
}

@media(prefers-reduced-motion:reduce){
  .legal-page *,.legal-page *::before,.legal-page *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
}

/* ------------------------------------------------------------
   Papel: documento legal também é impresso e arquivado
   ------------------------------------------------------------ */
@media print{
  .site-header,.global-footer,.regua,.sumario,
  .doc-fim-acoes,.direito a,.pular,.razao .ir{ display:none!important; }
  body,.legal-page,.doc-capa,.mapa-dado{ background:#fff!important; color:#111!important; }
  .doc{ display:block!important; }
  .clausula{ display:block!important; page-break-inside:avoid; border-top:1px solid #ccc!important; }
  .doc-capa h1,.clausula h2,.clausula h3,.razao dt,
  .doc-ficha dd,.contato-legal dd,.tabela tbody th,.historico b,.doc-fim strong{ color:#111!important; }
  .clausula p,.clausula li,.claro p,.razao dd,.tabela td,.doc-fim p{ color:#333!important; }
  .claro,.destaque,.tabela,.contato-legal,.doc-ficha,.direito,.doc-fim,.mapa-dado{
    background:none!important; border-color:#ccc!important;
  }
  .doc-ficha>div,.contato-legal>div{ border-color:#ccc!important; }
  /* Todo fundo escuro remanescente vira papel: nada de tinta sobre tinta. */
  .tabela thead th,.lei,.preencher,.acao-forte,.acao-leve,.razao .ir{
    background:none!important; color:#333!important; border-color:#ccc!important;
  }
  .preencher{ border-style:dashed!important; color:#111!important; }
  .clausula a{ color:#111!important; }
  .clausula a::after{ content:" (" attr(href) ")"; font-size:.82em; color:#555; }
  /* O diagrama é vetor: no papel, traço e texto escuros. */
  .mapa-dado svg rect{ fill:none!important; stroke:#999!important; }
  .mapa-dado svg text{ fill:#222!important; }
  .mapa-dado svg path{ stroke:#666!important; }
  .mapa-dado figcaption{ color:#444!important; border-color:#ccc!important; }
}