@import url('/assets/app.css');

.doc { max-width: 800px; margin: 0 auto; padding: 60px 24px 100px; }

.doc-topo {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 26px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--linha);
}
.doc-topo img { width: 46px; height: 46px; }
.doc-topo a { text-decoration: none; }
.doc-topo .marca {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--marfim);
}
.doc-topo .sub {
  font-family: var(--util);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dourado-real);
  margin-top: 3px;
}

.doc h1 { font-size: 33px; color: var(--marfim); margin-bottom: 12px; }
.doc .vigencia {
  font-family: var(--util);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 42px;
}
.doc h2 {
  font-size: 20px;
  color: var(--dourado-claro);
  margin: 42px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}
.doc h3 { font-size: 16px; color: var(--marfim); margin: 26px 0 9px; }
.doc p { margin-bottom: 16px; color: var(--texto-suave); }
.doc ul, .doc ol { margin: 0 0 18px 22px; color: var(--texto-suave); }
.doc li { margin-bottom: 9px; }
.doc strong { color: var(--marfim); }

.doc .destaque {
  padding: 20px 24px;
  border-left: 3px solid var(--dourado-real);
  background: rgba(205, 160, 82, 0.07);
  margin: 26px 0;
}
.doc .destaque p:last-child { margin-bottom: 0; }

.doc-rodape {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
  font-size: 14px;
  color: var(--texto-fraco);
}
.doc-rodape a { margin-right: 18px; }

.indice { display: flex; flex-direction: column; gap: 2px; }
.indice a {
  display: block;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--linha);
  text-decoration: none;
  transition: border-color .2s;
}
.indice a:hover { border-color: var(--dourado-real); }
.indice strong { display: block; font-family: var(--display); color: var(--marfim); margin-bottom: 5px; }
.indice span { font-size: 14px; color: var(--texto-suave); }