:root{
    --papel:#EFEDE6;
    --papel-2:#E6E3DA;
    --tinta:#14171A;
    --tinta-2:#3E443F;
    --sombra:#8B9089;
    --verde:#2A382E;
    --fio:#C8C4B8;
  }
  *{box-sizing:border-box;margin:0;padding:0;border-radius:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'IBM Plex Sans',sans-serif;font-weight:300;
    color:var(--tinta);background:var(--papel);line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  .serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;}
  .mono{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sombra);font-weight:400;}

  /* grão global — prova de autoria, não gradiente */
  .grao{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.32;mix-blend-mode:multiply;}

  /* ── ABERTURA: capa de peça. A foto é uma prancha DENTRO da grade,
        com papel ao redor — não sangra até a borda da tela. ── */
  .abertura{max-width:1240px;margin:0 auto;padding:56px 34px 64px;}
  .abertura .cabecalho{display:flex;justify-content:space-between;align-items:flex-start;
    gap:28px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--fio);}
  .abertura .id{font-family:'Instrument Serif',Georgia,serif;font-size:34px;line-height:1.05;letter-spacing:.01em;}
  .abertura .corpo-cap{display:grid;grid-template-columns:1fr minmax(300px,44%);
    gap:52px;padding-top:36px;align-items:start;}
  .abertura .declara{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(26px,3vw,38px);
    line-height:1.24;color:var(--verde);max-width:460px;}
  .abertura .apoio{font-size:15px;color:var(--tinta-2);max-width:420px;margin-top:20px;}
  .abertura .fichas{margin-top:34px;max-width:420px;}
  .abertura .ficha{display:grid;grid-template-columns:88px 1fr;gap:14px;
    padding:10px 0;border-top:1px solid var(--fio);font-size:14px;}
  .abertura .ficha .mono{padding-top:2px;}
  .abertura .ficha .valor{font-family:'IBM Plex Mono',monospace;font-size:14px;}
  /* prancha: moldura de papel, altura contida */
  .abertura .prancha{position:relative;border:1px solid var(--fio);padding:10px;background:var(--papel-2);}
  .abertura .quadro{position:relative;overflow:hidden;background:var(--verde);
    aspect-ratio:3/4;max-height:66vh;}
  .abertura img{width:100%;height:100%;object-fit:cover;object-position:center 44%;
    filter:url(#dissolve) saturate(.72) contrast(1.02) brightness(1.06);will-change:filter,transform;}
  .abertura .legenda-p{display:flex;justify-content:space-between;gap:14px;
    padding-top:9px;flex-wrap:wrap;}

  /* fios que se desenham + títulos revelados por máscara */
  .risca{height:1px;background:var(--fio);width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
  .risca.on{width:100%;}
  /* revelacao por mascara: a linha sobe de tras do recorte.
     Nunca exibe letra cortada ao meio, ao contrario do wipe horizontal. */
  .mascara{display:block;overflow:hidden;}
  .mascara > span{display:block;transform:translateY(106%);
    transition:transform 1s cubic-bezier(.22,.85,.24,1);}
  .mascara.on > span{transform:translateY(0);}

  /* ── CABEÇALHO fino, aparece após a abertura ── */
  .barra{position:sticky;top:0;z-index:40;background:var(--papel);border-bottom:1px solid var(--fio);}
  .barra .in{display:flex;justify-content:space-between;align-items:center;
    padding:14px 34px;gap:20px;}
  .barra .id{font-family:'Instrument Serif',Georgia,serif;font-size:19px;}

  /* ── DOCUMENTO: índice fixo + peça corrida ── */
  .doc{display:grid;grid-template-columns:270px 1fr;gap:0;border-bottom:1px solid var(--fio);}
  .indice{border-right:1px solid var(--fio);padding:52px 30px 52px 34px;}
  .indice .caixa{position:sticky;top:100px;}
  .indice .mono{display:block;margin-bottom:20px;}
  /* trilho de progresso de leitura ao lado do índice */
  .indice .lista{display:grid;grid-template-columns:2px 1fr;gap:18px;align-items:start;}
  .indice .trilho{position:relative;background:var(--fio);align-self:stretch;min-height:100%;}
  .indice .trilho i{position:absolute;top:0;left:0;right:0;height:0;background:var(--verde);display:block;}
  .indice ol{list-style:none;counter-reset:c;}
  .indice li{counter-increment:c;padding:9px 0;border-top:1px solid var(--fio);}
  .indice li:first-child{border-top:0;}
  .indice li a{display:flex;gap:12px;align-items:baseline;font-size:13.5px;color:var(--sombra);transition:color .3s;}
  .indice li a::before{content:'§ ' counter(c,decimal-leading-zero);
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;flex:none;}
  .indice li a:hover{color:var(--tinta);}
  .indice li.ativo a{color:var(--tinta);}
  .indice .nota{margin-top:30px;padding-top:16px;border-top:1px solid var(--fio);
    font-size:11.5px;color:var(--sombra);line-height:1.5;}

  .peca{padding:52px 0 70px;}
  .clausula{display:grid;grid-template-columns:112px 1fr;gap:30px;
    padding:38px 40px 38px 34px;border-top:1px solid var(--fio);}
  .clausula:first-child{border-top:0;}
  .margem{padding-top:5px;}
  .margem .mono{display:block;line-height:1.7;}
  .corpo{max-width:640px;}
  .corpo h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
    font-size:31px;line-height:1.16;margin-bottom:16px;letter-spacing:.005em;}
  .corpo p{font-size:15.5px;color:var(--tinta-2);}
  .corpo p+p{margin-top:13px;}

  .lista-areas{margin-top:22px;border-top:1px solid var(--fio);}
  .lista-areas div{display:grid;grid-template-columns:26px 1fr auto;gap:16px;align-items:baseline;
    padding:11px 0;border-bottom:1px solid var(--fio);}
  .lista-areas .i{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sombra);}
  .lista-areas .t{font-size:15px;color:var(--tinta);}
  .lista-areas .d{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--sombra);
    letter-spacing:.08em;text-transform:uppercase;}

  .citacao{font-family:'Instrument Serif',Georgia,serif;font-size:23px;line-height:1.4;
    color:var(--verde);border-left:1px solid var(--verde);padding-left:22px;margin:26px 0 4px;}

  .tabela{margin-top:22px;width:100%;border-collapse:collapse;}
  .tabela th,.tabela td{text-align:left;padding:11px 0;border-bottom:1px solid var(--fio);font-size:14px;}
  .tabela th{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--sombra);font-weight:400;}
  .tabela td:last-child,.tabela th:last-child{text-align:right;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;}

  /* ── CONTATO ── */
  .contato{background:var(--verde);color:#E4E7E1;padding:64px 34px;}
  .contato .in{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:1180px;}
  .contato h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:34px;
    line-height:1.14;color:#F2F0E8;max-width:400px;}
  .contato .mono{color:#93A196;}
  .campos div{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:12px 0;
    border-top:1px solid rgba(226,231,225,.18);font-size:14.5px;}
  .campos div:first-child{border-top:0;}
  .campos span:first-child{font-family:'IBM Plex Mono',monospace;font-size:10px;
    letter-spacing:.14em;text-transform:uppercase;color:#93A196;padding-top:3px;}
  .btn{display:inline-block;margin-top:26px;border:1px solid #E4E7E1;padding:13px 26px;
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    transition:background .3s,color .3s;}
  .btn:hover{background:#E4E7E1;color:var(--verde);}

  footer{padding:24px 34px 34px;border-top:1px solid var(--fio);}
  footer p{font-size:11px;color:var(--sombra);max-width:640px;line-height:1.6;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;text-transform:none;}

  .selo{position:fixed;left:0;bottom:0;z-index:50;background:var(--tinta);color:var(--papel);
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    padding:8px 14px;}

  @media (max-width:900px){
    .doc{grid-template-columns:1fr;}
    .indice{border-right:0;border-bottom:1px solid var(--fio);padding:30px 20px;}
    .indice .caixa{position:static;}
    .clausula{grid-template-columns:1fr;gap:14px;padding:30px 20px;}
    .margem{padding-top:0;}
    .contato{padding:48px 20px;}
    .contato .in{grid-template-columns:1fr;gap:28px;}
    .abertura{padding:34px 20px 44px;}
    .abertura .corpo-cap{grid-template-columns:1fr;gap:32px;padding-top:26px;}
    .abertura .quadro{aspect-ratio:4/3;max-height:none;}
    .indice .lista{grid-template-columns:1fr;gap:0;}
    .indice .trilho{display:none;}
    .barra .in{padding:12px 20px;}
    footer{padding:20px;}
  }