* {
  /* 1 = cor-1, 2 = cor-2-40, 3 = cor-2-20 */
  --cor-sumario-A-1: hsl(0, 49%, 48%);
  --cor-sumario-A-2: hsl(0, 76%, 80%);
  --cor-sumario-A-3: hsl(0, 75%, 89%);
  --cor-sumario-B-1: hsl(25, 56%, 46%);
  --cor-sumario-B-2: hsl(25, 70%, 79%);
  --cor-sumario-B-3: hsl(25, 69%, 89%);
  --cor-sumario-C-1: hsl(45, 72%, 39%);
  --cor-sumario-C-2: hsl(45, 70%, 79%);
  --cor-sumario-C-3: hsl(45, 69%, 89%);
  --cor-sumario-D-1: hsl(70, 52%, 37%);
  --cor-sumario-D-2: hsl(70, 40%, 76%);
  --cor-sumario-D-3: hsl(70, 38%, 87%);
  --cor-sumario-E-1: hsl(115, 40%, 40%);
  --cor-sumario-E-2: hsl(115, 36%, 77%);
  --cor-sumario-E-3: hsl(115, 34%, 87%);
  --cor-sumario-F-1: hsl(170, 94%, 26%);
  --cor-sumario-F-2: hsl(170, 29%, 75%);
  --cor-sumario-F-3: hsl(170, 26%, 87%);
  --cor-sumario-G-1: hsl(195, 100%, 28%);
  --cor-sumario-G-2: hsl(195, 47%, 72%);
  --cor-sumario-G-3: hsl(195, 43%, 85%);
  --cor-sumario-H-1: hsl(225, 56%, 34%);
  --cor-sumario-H-2: hsl(225, 37%, 73%);
  --cor-sumario-H-3: hsl(225, 38%, 85%);
  --cor-sumario-I-1: hsl(265, 40%, 35%);
  --cor-sumario-I-2: hsl(265, 32%, 74%);
  --cor-sumario-I-3: hsl(265, 34%, 86%);
  --cor-sumario-J-1: hsl(320, 52%, 37%);
  --cor-sumario-J-2: hsl(320, 38%, 76%);
  --cor-sumario-J-3: hsl(320, 35%, 87%);
  --cor-sumario-K-1: hsl(20, 19%, 45%);
  --cor-sumario-K-2: hsl(20, 28%, 80%);
  --cor-sumario-K-3: hsl(20, 28%, 89%);
  --cor-sumario-X-1: hsl(0, 0%, 35%);
  --cor-sumario-X-2: hsl(0, 0%, 79%);
  --cor-sumario-X-3: hsl(0, 0%, 89%);
}

/* Unidades */

.sumario-unidade {
  background: gray;
  display: flex;
  text-decoration: none;
  margin: 1em 0 0.5em 0;
  color: white;
  /* box-sizing: outline-box; */
}

.sumario-unidade.sumario-A { background: var(--cor-sumario-A-1) }
.sumario-unidade.sumario-B { background: var(--cor-sumario-B-1) }
.sumario-unidade.sumario-C { background: var(--cor-sumario-C-1) }
.sumario-unidade.sumario-D { background: var(--cor-sumario-D-1) }
.sumario-unidade.sumario-E { background: var(--cor-sumario-E-1) }
.sumario-unidade.sumario-F { background: var(--cor-sumario-F-1) }
.sumario-unidade.sumario-G { background: var(--cor-sumario-G-1) }
.sumario-unidade.sumario-H { background: var(--cor-sumario-H-1) }
.sumario-unidade.sumario-I { background: var(--cor-sumario-I-1) }
.sumario-unidade.sumario-J { background: var(--cor-sumario-J-1) }
.sumario-unidade.sumario-K { background: var(--cor-sumario-K-1) }
.sumario-unidade.sumario-X { background: var(--cor-sumario-X-1) }

.sumario-titulo-unidade {
  display: flex;
  min-height: 1.2em;
  align-items: center;
  text-align: left;
  padding: 0 0.5em;
  width: 100%;
  font: 700 1.5rem/1.1 "Fira Sans", sans-serif;
  font-variant: small-caps;
}

.sumario-numero-unidade {
  display: flex;
  flex: 0 0 7.5rem;
  height: 1.2em;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 0.75rem;
  font: 1000 1.5rem/1.0 "Fira Sans", sans-serif;
  font-variant: small-caps;
  padding: 0 0.25rem;
}

.sumario-A .sumario-numero-unidade { color: var(--cor-sumario-A-2) }
.sumario-B .sumario-numero-unidade { color: var(--cor-sumario-B-2) }
.sumario-C .sumario-numero-unidade { color: var(--cor-sumario-C-2) }
.sumario-D .sumario-numero-unidade { color: var(--cor-sumario-D-2) }
.sumario-E .sumario-numero-unidade { color: var(--cor-sumario-E-2) }
.sumario-F .sumario-numero-unidade { color: var(--cor-sumario-F-2) }
.sumario-G .sumario-numero-unidade { color: var(--cor-sumario-G-2) }
.sumario-H .sumario-numero-unidade { color: var(--cor-sumario-H-2) }
.sumario-I .sumario-numero-unidade { color: var(--cor-sumario-I-2) }
.sumario-J .sumario-numero-unidade { color: var(--cor-sumario-J-2) }
.sumario-K .sumario-numero-unidade { color: var(--cor-sumario-K-2) }
.sumario-X .sumario-numero-unidade { color: var(--cor-sumario-X-2) }

.sumario-unidade.sumario-A:hover { background: var(--cor-sumario-A-2); color: var(--cor-sumario-A-1); }
.sumario-unidade.sumario-B:hover { background: var(--cor-sumario-B-2); color: var(--cor-sumario-B-1); }
.sumario-unidade.sumario-C:hover { background: var(--cor-sumario-C-2); color: var(--cor-sumario-C-1); }
.sumario-unidade.sumario-D:hover { background: var(--cor-sumario-D-2); color: var(--cor-sumario-D-1); }
.sumario-unidade.sumario-E:hover { background: var(--cor-sumario-E-2); color: var(--cor-sumario-E-1); }
.sumario-unidade.sumario-F:hover { background: var(--cor-sumario-F-2); color: var(--cor-sumario-F-1); }
.sumario-unidade.sumario-G:hover { background: var(--cor-sumario-G-2); color: var(--cor-sumario-G-1); }
.sumario-unidade.sumario-H:hover { background: var(--cor-sumario-H-2); color: var(--cor-sumario-H-1); }
.sumario-unidade.sumario-I:hover { background: var(--cor-sumario-I-2); color: var(--cor-sumario-I-1); }
.sumario-unidade.sumario-J:hover { background: var(--cor-sumario-J-2); color: var(--cor-sumario-J-1); }
.sumario-unidade.sumario-K:hover { background: var(--cor-sumario-K-2); color: var(--cor-sumario-K-1); }
.sumario-unidade.sumario-X:hover { background: var(--cor-sumario-X-2); color: var(--cor-sumario-X-1); }

.sumario-unidade.sumario-A:hover .sumario-numero-unidade { color: var(--cor-sumario-A-1); }
.sumario-unidade.sumario-B:hover .sumario-numero-unidade { color: var(--cor-sumario-B-1); }
.sumario-unidade.sumario-C:hover .sumario-numero-unidade { color: var(--cor-sumario-C-1); }
.sumario-unidade.sumario-D:hover .sumario-numero-unidade { color: var(--cor-sumario-D-1); }
.sumario-unidade.sumario-E:hover .sumario-numero-unidade { color: var(--cor-sumario-E-1); }
.sumario-unidade.sumario-F:hover .sumario-numero-unidade { color: var(--cor-sumario-F-1); }
.sumario-unidade.sumario-G:hover .sumario-numero-unidade { color: var(--cor-sumario-G-1); }
.sumario-unidade.sumario-H:hover .sumario-numero-unidade { color: var(--cor-sumario-H-1); }
.sumario-unidade.sumario-I:hover .sumario-numero-unidade { color: var(--cor-sumario-I-1); }
.sumario-unidade.sumario-J:hover .sumario-numero-unidade { color: var(--cor-sumario-J-1); }
.sumario-unidade.sumario-K:hover .sumario-numero-unidade { color: var(--cor-sumario-K-1); }
.sumario-unidade.sumario-X:hover .sumario-numero-unidade { color: var(--cor-sumario-X-1); }

.sumario-unidade.sumario-A:active { outline: 2px solid var(--cor-sumario-A-1); color: var(--cor-sumario-A-1); background: white; }
.sumario-unidade.sumario-B:active { outline: 2px solid var(--cor-sumario-B-1); color: var(--cor-sumario-B-1); background: white; }
.sumario-unidade.sumario-C:active { outline: 2px solid var(--cor-sumario-C-1); color: var(--cor-sumario-C-1); background: white; }
.sumario-unidade.sumario-D:active { outline: 2px solid var(--cor-sumario-D-1); color: var(--cor-sumario-D-1); background: white; }
.sumario-unidade.sumario-E:active { outline: 2px solid var(--cor-sumario-E-1); color: var(--cor-sumario-E-1); background: white; }
.sumario-unidade.sumario-F:active { outline: 2px solid var(--cor-sumario-F-1); color: var(--cor-sumario-F-1); background: white; }
.sumario-unidade.sumario-G:active { outline: 2px solid var(--cor-sumario-G-1); color: var(--cor-sumario-G-1); background: white; }
.sumario-unidade.sumario-H:active { outline: 2px solid var(--cor-sumario-H-1); color: var(--cor-sumario-H-1); background: white; }
.sumario-unidade.sumario-I:active { outline: 2px solid var(--cor-sumario-I-1); color: var(--cor-sumario-I-1); background: white; }
.sumario-unidade.sumario-J:active { outline: 2px solid var(--cor-sumario-J-1); color: var(--cor-sumario-J-1); background: white; }
.sumario-unidade.sumario-K:active { outline: 2px solid var(--cor-sumario-K-1); color: var(--cor-sumario-K-1); background: white; }
.sumario-unidade.sumario-X:active { outline: 2px solid var(--cor-sumario-X-1); color: var(--cor-sumario-X-1); background: white; }

/* Capítulos */

.sumario-capitulo {
  background: var(--cor-sumario-A-3);
  display: flex;
  text-decoration: none;
  margin: 0.5em 0;
}

.sumario-capitulo.sumario-A { background: var(--cor-sumario-A-3) }
.sumario-capitulo.sumario-B { background: var(--cor-sumario-B-3) }
.sumario-capitulo.sumario-C { background: var(--cor-sumario-C-3) }
.sumario-capitulo.sumario-D { background: var(--cor-sumario-D-3) }
.sumario-capitulo.sumario-E { background: var(--cor-sumario-E-3) }
.sumario-capitulo.sumario-F { background: var(--cor-sumario-F-3) }
.sumario-capitulo.sumario-G { background: var(--cor-sumario-G-3) }
.sumario-capitulo.sumario-H { background: var(--cor-sumario-H-3) }
.sumario-capitulo.sumario-I { background: var(--cor-sumario-I-3) }
.sumario-capitulo.sumario-J { background: var(--cor-sumario-J-3) }
.sumario-capitulo.sumario-K { background: var(--cor-sumario-K-3) }
.sumario-capitulo.sumario-X { background: var(--cor-sumario-X-3) }

.sumario-titulo-capitulo {
  display: flex;
  min-height: 1.2em;
  align-items: center;
  text-align: left;
  padding: 0 0.75rem;
  color: var(--cor-sumario-A-1);
  width: 100%;
  font: 700 1.25rem/1.2 "Fira Sans", sans-serif;
}

.sumario-A .sumario-titulo-capitulo { color: var(--cor-sumario-A-1) }
.sumario-B .sumario-titulo-capitulo { color: var(--cor-sumario-B-1) }
.sumario-C .sumario-titulo-capitulo { color: var(--cor-sumario-C-1) }
.sumario-D .sumario-titulo-capitulo { color: var(--cor-sumario-D-1) }
.sumario-E .sumario-titulo-capitulo { color: var(--cor-sumario-E-1) }
.sumario-F .sumario-titulo-capitulo { color: var(--cor-sumario-F-1) }
.sumario-G .sumario-titulo-capitulo { color: var(--cor-sumario-G-1) }
.sumario-H .sumario-titulo-capitulo { color: var(--cor-sumario-H-1) }
.sumario-I .sumario-titulo-capitulo { color: var(--cor-sumario-I-1) }
.sumario-J .sumario-titulo-capitulo { color: var(--cor-sumario-J-1) }
.sumario-K .sumario-titulo-capitulo { color: var(--cor-sumario-K-1) }
.sumario-X .sumario-titulo-capitulo { color: var(--cor-sumario-X-1) }

.sumario-numero-capitulo {
  display: flex;
  flex: 0 0 7.5rem;
  height: 1.2em;
  justify-content: center;
  align-items: center;
  position: relative;
  background: var(--cor-sumario-A-1);
  color: white;
  font: 800 1.25rem/1.0 "Fira Sans", sans-serif;
  font-variant: small-caps;
  padding: 0 0.25rem;
}

.sumario-A .sumario-numero-capitulo { background: var(--cor-sumario-A-1) }
.sumario-B .sumario-numero-capitulo { background: var(--cor-sumario-B-1) }
.sumario-C .sumario-numero-capitulo { background: var(--cor-sumario-C-1) }
.sumario-D .sumario-numero-capitulo { background: var(--cor-sumario-D-1) }
.sumario-E .sumario-numero-capitulo { background: var(--cor-sumario-E-1) }
.sumario-F .sumario-numero-capitulo { background: var(--cor-sumario-F-1) }
.sumario-G .sumario-numero-capitulo { background: var(--cor-sumario-G-1) }
.sumario-H .sumario-numero-capitulo { background: var(--cor-sumario-H-1) }
.sumario-I .sumario-numero-capitulo { background: var(--cor-sumario-I-1) }
.sumario-J .sumario-numero-capitulo { background: var(--cor-sumario-J-1) }
.sumario-K .sumario-numero-capitulo { background: var(--cor-sumario-K-1) }
.sumario-X .sumario-numero-capitulo { background: var(--cor-sumario-X-1) }

.sumario-capitulo.sumario-A:hover { background: var(--cor-sumario-A-2); color: var(--cor-sumario-A-1); }
.sumario-capitulo.sumario-B:hover { background: var(--cor-sumario-B-2); color: var(--cor-sumario-B-1); }
.sumario-capitulo.sumario-C:hover { background: var(--cor-sumario-C-2); color: var(--cor-sumario-C-1); }
.sumario-capitulo.sumario-D:hover { background: var(--cor-sumario-D-2); color: var(--cor-sumario-D-1); }
.sumario-capitulo.sumario-E:hover { background: var(--cor-sumario-E-2); color: var(--cor-sumario-E-1); }
.sumario-capitulo.sumario-F:hover { background: var(--cor-sumario-F-2); color: var(--cor-sumario-F-1); }
.sumario-capitulo.sumario-G:hover { background: var(--cor-sumario-G-2); color: var(--cor-sumario-G-1); }
.sumario-capitulo.sumario-H:hover { background: var(--cor-sumario-H-2); color: var(--cor-sumario-H-1); }
.sumario-capitulo.sumario-I:hover { background: var(--cor-sumario-I-2); color: var(--cor-sumario-I-1); }
.sumario-capitulo.sumario-J:hover { background: var(--cor-sumario-J-2); color: var(--cor-sumario-J-1); }
.sumario-capitulo.sumario-K:hover { background: var(--cor-sumario-K-2); color: var(--cor-sumario-K-1); }
.sumario-capitulo.sumario-X:hover { background: var(--cor-sumario-X-2); color: var(--cor-sumario-X-1); }

.sumario-capitulo.sumario-A:hover .sumario-numero-capitulo { background: var(--cor-sumario-A-2); color: var(--cor-sumario-A-1); }
.sumario-capitulo.sumario-B:hover .sumario-numero-capitulo { background: var(--cor-sumario-B-2); color: var(--cor-sumario-B-1); }
.sumario-capitulo.sumario-C:hover .sumario-numero-capitulo { background: var(--cor-sumario-C-2); color: var(--cor-sumario-C-1); }
.sumario-capitulo.sumario-D:hover .sumario-numero-capitulo { background: var(--cor-sumario-D-2); color: var(--cor-sumario-D-1); }
.sumario-capitulo.sumario-E:hover .sumario-numero-capitulo { background: var(--cor-sumario-E-2); color: var(--cor-sumario-E-1); }
.sumario-capitulo.sumario-F:hover .sumario-numero-capitulo { background: var(--cor-sumario-F-2); color: var(--cor-sumario-F-1); }
.sumario-capitulo.sumario-G:hover .sumario-numero-capitulo { background: var(--cor-sumario-G-2); color: var(--cor-sumario-G-1); }
.sumario-capitulo.sumario-H:hover .sumario-numero-capitulo { background: var(--cor-sumario-H-2); color: var(--cor-sumario-H-1); }
.sumario-capitulo.sumario-I:hover .sumario-numero-capitulo { background: var(--cor-sumario-I-2); color: var(--cor-sumario-I-1); }
.sumario-capitulo.sumario-J:hover .sumario-numero-capitulo { background: var(--cor-sumario-J-2); color: var(--cor-sumario-J-1); }
.sumario-capitulo.sumario-K:hover .sumario-numero-capitulo { background: var(--cor-sumario-K-2); color: var(--cor-sumario-K-1); }
.sumario-capitulo.sumario-X:hover .sumario-numero-capitulo { background: var(--cor-sumario-X-2); color: var(--cor-sumario-X-1); }

.sumario-capitulo.sumario-A:active { outline: 2px solid var(--cor-sumario-A-1); color: var(--cor-sumario-A-1); background: white; }
.sumario-capitulo.sumario-B:active { outline: 2px solid var(--cor-sumario-B-1); color: var(--cor-sumario-B-1); background: white; }
.sumario-capitulo.sumario-C:active { outline: 2px solid var(--cor-sumario-C-1); color: var(--cor-sumario-C-1); background: white; }
.sumario-capitulo.sumario-D:active { outline: 2px solid var(--cor-sumario-D-1); color: var(--cor-sumario-D-1); background: white; }
.sumario-capitulo.sumario-E:active { outline: 2px solid var(--cor-sumario-E-1); color: var(--cor-sumario-E-1); background: white; }
.sumario-capitulo.sumario-F:active { outline: 2px solid var(--cor-sumario-F-1); color: var(--cor-sumario-F-1); background: white; }
.sumario-capitulo.sumario-G:active { outline: 2px solid var(--cor-sumario-G-1); color: var(--cor-sumario-G-1); background: white; }
.sumario-capitulo.sumario-H:active { outline: 2px solid var(--cor-sumario-H-1); color: var(--cor-sumario-H-1); background: white; }
.sumario-capitulo.sumario-I:active { outline: 2px solid var(--cor-sumario-I-1); color: var(--cor-sumario-I-1); background: white; }
.sumario-capitulo.sumario-J:active { outline: 2px solid var(--cor-sumario-J-1); color: var(--cor-sumario-J-1); background: white; }
.sumario-capitulo.sumario-K:active { outline: 2px solid var(--cor-sumario-K-1); color: var(--cor-sumario-K-1); background: white; }
.sumario-capitulo.sumario-X:active { outline: 2px solid var(--cor-sumario-X-1); color: var(--cor-sumario-X-1); background: white; }

.sumario-capitulo.sumario-A:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-B:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-C:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-D:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-E:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-F:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-G:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-H:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-I:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-J:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-K:active .sumario-numero-capitulo { background: white; }
.sumario-capitulo.sumario-X:active .sumario-numero-capitulo { background: white; }

/* Miscelânea */

.sumario-misc {
  display: flex;
  color: var(--cor-texto);
  text-decoration: none;
  margin: 1em 0;
  align-items: center;
  text-align: left;
  font: 500 1.0rem/1.1 "Fira Sans", sans-serif;
}

.sumario-misc::before {
  content: "▪";
  padding-right: 0.5em;
}

.sumario-misc:hover {
  opacity: 70%;
}