/* RESET MARGIN e PADDING */

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

::selection {
  background: var(--cor-fundo-selecao);
  color: var(--cor-texto-selecao);
}

/* FONTES */

html {
  font-feature-settings: "kern" on, "liga" on;
  -webkit-font-smoothing: antialiased; /* Chrome, Safari */
  -moz-osx-font-smoothing: grayscale; /* Firefox */
  font-kerning: normal;
  font-size: 18px; /* era 18px antes do Pollen */
  /* = 1rem = 10pt no InDesign */
  padding: 0 1.5em;
}

@media (max-width: 750px) {
  html {
    font-size: 16px;
  }
}

/* SCROLLBARS */
:root {
  --largura-scroll: 12px;
  --cor-thumb-scroll: var(--cor-2-40);
  --cor-thumb-scroll-hover: var(--cor-2);
  --cor-track-scroll: var(--cor-2-10);
}

  /* Firefox */
  /* * {
    scrollbar-color: var(--cor-thumb-scroll) var(--cor-track-scroll);
  } */

  /* Webkit: Chrome/Safari */
  *::-webkit-scrollbar {
    width: var(--largura-scroll);
    height: var(--largura-scroll);
  }

  *::-webkit-scrollbar-track {
    background: var(--cor-track-scroll);
  }

  *::-webkit-scrollbar-thumb {
    background: var(--cor-thumb-scroll);
  }

  *::-webkit-scrollbar-thumb:hover {
    background: var(--cor-thumb-scroll-hover);
  }

/* CORPO DE TEXTO */

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font: 400 1.0rem/1.35 "IBM Plex Sans", sans-serif;
  /* igual ao font-size do html; bate visualmente com o "10pt" do indesign; no indesign é 10/14pt mas ainda não bate exatamente com o pdf */
  font-feature-settings: "kern" on, "liga" on;
  counter-reset: numero-secao;
  margin: 1rem auto 6rem auto;
  max-width: 650px; /* era 650px antes do Pollen */
}

p {
  text-indent: 1.5rem;
  text-align: justify;
  hyphens: auto;
}

p:has(> mathjax mjx-math[display="true"]) {
  text-indent: 0;
}

a {
  color: var(--cor-hyperlink);
}

strong, b {
  font-weight: 600;
}

ul, ol {
  margin-left: 1rem;
}

ul {
  list-style-type: square;
}

li {
  margin-left: 1.5rem;
  text-align: justify;
  hyphens: auto;
}

li::marker {
  font-weight: 500;
  text-indent: -1em;
}

sub,
sup {
  /* font-size: 58.3%; */
  font-size: 75%;
  line-height: 0; /* não muda o leading do texto em volta */
  position: relative;
  /* vertical-align: baseline; */ /* é o recomendado, mas não funcionou direito com outros tamanhos de fonte*/
}

sup {
  top: 0em;
  /* deveria ser -0.4em = 40% no InDesign */
}

sub {
  bottom: 0em;
  /* deveria ser -0.15em = 15% no InDesign */
}

/* para debug; desligar no render final */
/* var {
  background-color: red;
  color: yellow;
  font-weight: bold;
  padding: 0 0.25em;
  margin: 0 0.1em;
} */


/* SEÇÕES */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fira Sans", sans-serif;
  text-wrap: balance;
}

h2 {
  /* seções */
  display: block;
  font: bold 1.5rem/1.0 "Fira Sans", sans-serif;
  /* no total tem que ser 1.8rem */
  letter-spacing: -0.025em;
  margin: 1.8rem auto 1.0rem 2.5rem;
  padding: 0.25rem 0.5rem;
  text-align: left;
  text-indent: 0;
  list-style-position: outside;
  list-style-type: decimal;
  max-width: fit-content;
  background-color: var(--fundo-nome-secao);
  color: var(--nome-secao);
  font-feature-settings: "liga" on;
}

.numero-secao {
  font: 500 1.1rem/1.0 "Fira Sans", sans-serif;
  /* no total tem que ser 1.4rem */
  text-align: center;
  content: counter(numero-capitulo) "." counter(numero-secao);
  counter-increment: numero-secao;
  display: block;
  height: 2.0rem;
  width: 2.5rem;
  position: relative;
  float: left;
  top: -0.25rem;
  left: -3.0rem;
  margin-right: -4rem;
  padding: 0.5rem 0rem;
  background-color: var(--fundo-numero-secao);
  color: white;
  box-shadow: -3px -4px var(--sombra-numero-secao);
}

.secao {
  position: relative;
  width: fit-content;
}

.secao .ancora-secao {
  position: absolute;
  top: 50%;
  left: -48px;
  display: flex;
  width: 48px;
  height: 32px;
  opacity: 0;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}

@media (max-width: 750px) {
  .secao .ancora-secao {
    left: -28px;
    width: 28px;
    height: 12px;
    transform: translateY(-50%) scale(0.75);
  }
}

.secao:hover .ancora-secao, .ancora-secao:hover {
  opacity: 0.5;
}

.icone-ancora {
  /* fill: currentColor; */
}

h3 {
  /* subseções */
  font: 600 1.35rem/1.25 "Fira Sans", sans-serif;
  /* semibold, no total tem que ser 1.6rem */
  letter-spacing: -0.025em;
  margin-top: 0.9rem;
  margin-bottom: 0.6rem;
  text-indent: 0;
  text-decoration-line: underline;
  text-decoration-thickness: 0.10rem;
  text-underline-offset: 0.15rem;
  color: var(--nome-subsecao);
  text-decoration-color: var(--linha-subsecao);
  font-feature-settings: "liga" on;
}

h4 {
  /* subsubseções */
  font: 400 1.25rem/1.15 "Fira Sans", sans-serif;
  /* semibold, no total tem que ser 1.6rem */
  letter-spacing: -0.025em;
  margin-top: 0.9rem;
  margin-bottom: 0.6rem;
  text-indent: 0;
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-thickness: 0.05rem;
  text-underline-offset: 0.15rem;
  color: var(--nome-subsubsecao);
  text-decoration-color: var(--linha-subsubsecao);
  font-feature-settings: "liga" on;
}

.conceito {
	font-family:"IBM Plex Sans", sans-serif;
	color: var(--cor-conceito);
	font-weight: 700;
}

/* ABERTURA UNIDADE */

.unidade {
  background-color: var(--fundo-abertura-unidade);
}

.vinheta-unidade {
  background: var(--cor-2);
  display: flex;
}

.numero-unidade {
  display: flex;
  flex: 0 0 125px;
  height: 125px;
  justify-content: center;
  align-items: center;
  font: 1000 5.3rem/1.2 "Fira Sans", sans-serif;
  /* heavy, no completo tem que ser 6.0rem (indesign é 60/72) */
  letter-spacing: -0.025em;
  background-color: var(--fundo-numero-unidade);
  color: var(--cor-numero-unidade);
  box-shadow: -24px -6px var(--sombra-numero-unidade);
  position: relative;
}

.numero-unidade::before {
  content: "Unidade";
  text-transform: uppercase;
  font: 900 1.5rem/0.85 "Fira Sans", sans-serif;
  letter-spacing: -0.025em;
	color: var(--fundo-numero-unidade);
	position: absolute;
  text-align: right;
  transform: rotate(-90deg);
  bottom: 61px;
  left: -60px;
}

.titulo-unidade {
  display: flex;
  min-height: 125px;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 0.25rem 1rem;
  font: 800 2.8rem/0.9 "Fira Sans", sans-serif;
  /* extrabold, no completo tem que ser 2.7rem (indesign é 10/14pt mas ainda não bate exatamente com o pdf) */
  color: white;
  background-color: var(--fundo-nome-unidade);
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" on;
  text-wrap: balance;
}

.figura-abertura-unidade{
  margin-top: 0;
}

.imagem-abertura-unidade {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1/1.45; /* 720px x 1044px */
  /* 1044px x 780px (261/195 ou 1,3384615385:1) caso inclua o que fica por baixo da tarja externa no impresso */
  display: block;
  object-fit: cover;
}

.capitulos-da-unidade {
  position: absolute;
  right: 0;
  width: 250px;
  background-color: var(--cor-2-50);
  padding: 0.75em;
  color: black;
  z-index: 10;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 600;
}

.capitulos-da-unidade p {
  text-indent: 0;
  text-align: left;
  font-size: 1.1rem;
  line-height: 1.1;
  margin: 0;
  margin-bottom: 0.2em;
}

.capitulos-da-unidade .capitulos {
  font-size:1.2rem;
  text-transform: lowercase;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" on;
  -webkit-font-feature-settings: "smcp" on;
  -moz-font-feature-settings: "smcp" on;
  -ms-font-feature-settings: "smcp" on;
  -o-font-feature-settings: "smcp" on;
  font-size: 90%;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 900;
  color: var(--cor-1);
  margin-bottom: 0.3rem;
}

.capitulos-da-unidade a {
  color: black;
  text-decoration: none;
}

.capitulos-da-unidade .numero-lista-capitulos {
  font-size: 1.2rem;
  line-height: 1.0;
  color: var(--cor-1);
  font-weight: 900;
  padding-right: 0.5em;
  display: block;
  position: relative;
  float: left;
  /* margin-bottom: 0.1em; */
}

.capitulos-da-unidade a:hover .numero-lista-capitulos {
  color: white;
}

/* ABERTURA APÊNDICE */

.vinheta-apendice {
  background: var(--cor-2);
  display: flex;
}

.numero-apendice {
  display: flex;
  flex: 0 0 120px;
  height: 60px;
  justify-content: center;
  align-items: center;
  font: 900 3.2rem/1.2 "Fira Sans", sans-serif;
  /* heavy, no completo tem que ser 6.0rem (indesign é 60/72) */
  letter-spacing: -0.025em;
  color: var(--fundo-numero-capitulo);
  border: 3px solid var(--fundo-numero-capitulo);
  background-color: white;
  box-shadow: -6px -14px var(--sombra-numero-capitulo);
  position: relative;
}

.numero-apendice::before {
  content: "Apêndice";
  text-transform: uppercase;
  font: 700 0.85rem/0.85 "Fira Sans", sans-serif;
  letter-spacing: -0.025em;
	color: var(--fundo-numero-capitulo);
	position: absolute;
  text-align: left;
  bottom: 55px;
  left: -2.5px;
}

.titulo-apendice {
  display: flex;
  min-height: 60px;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 0.25rem 1rem;
  font: 800 2.0rem/0.95 "Fira Sans", sans-serif;
  /* extrabold, no completo tem que ser 2.7rem (indesign é 10/14pt mas ainda não bate exatamente com o pdf) */
  color: white;
  background-color: var(--fundo-nome-capitulo);
  font-feature-settings: "liga" on;
  text-wrap: balance;
}

/* DATA CAPÍTULO */

.data {
  position: relative;
  text-align: right;
}

.ultima-atualizacao {
  font: 400 0.8rem/0.6 "Fira Sans", sans-serif;
}

/* ABERTURA CAPÍTULO */

.vinheta-capitulo {
  background: var(--cor-2);
  display: flex;
}

.numero-capitulo {
  display: flex;
  flex: 0 0 80px;
  height: 80px;
  justify-content: center;
  align-items: center;
  font: 900 3.2rem/1.2 "Fira Sans", sans-serif;
  /* heavy, no completo tem que ser 6.0rem (indesign é 60/72) */
  letter-spacing: -0.025em;
  background-color: var(--fundo-numero-capitulo);
  color: white;
  box-shadow: -6px -14px var(--sombra-numero-capitulo);
  position: relative;
}

.numero-capitulo::before {
  content: "Capítulo";
  text-transform: uppercase;
  font: 700 0.85rem/0.85 "Fira Sans", sans-serif;
  letter-spacing: -0.025em;
	color: var(--fundo-numero-capitulo);
	position: absolute;
  text-align: left;
  bottom: 78px;
  left: 0px;
}

.titulo-capitulo {
  display: flex;
  min-height: 80px;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding: 0.25rem 1rem;
  font: 800 2.0rem/0.95 "Fira Sans", sans-serif;
  /* extrabold, no completo tem que ser 2.7rem (indesign é 10/14pt mas ainda não bate exatamente com o pdf) */
  color: white;
  background-color: var(--fundo-nome-capitulo);
  font-feature-settings: "liga" on;
  text-wrap: balance;
}

.intro-capitulo {
  background: var(--fundo-intro-capitulo);
  font-weight: 300;
  padding: 1rem;
  color: black;
}

.intro-capitulo .neste-capitulo {
  text-transform: lowercase;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" on;
  font-size: 90%;
  font-family: 'Fira Sans', sans-serif;
  text-decoration: underline;
  font-weight: bold;
  color: var(--cor-1);
  margin-bottom: 0.3rem;
}

.intro-capitulo p {
  font: 300 0.95rem/1.35 "IBM Plex Sans", sans-serif;
  /* igual ao font-size do html; bate visualmente com o "10pt" do indesign; no indesign é 10/14pt mas ainda não bate exatamente com o pdf */
  font-feature-settings: "liga" on;
  counter-reset: numero-secao;
  max-width: 650px;
  letter-spacing: -0.020em;
  text-align: left;
  text-indent: 0;
  margin-bottom: 0.5rem;
  hyphens: none;
}

.intro-capitulo ul {
  list-style-type: square;
  margin-left: 0;
}

.intro-capitulo li {
  font-size: 0.9rem;
  line-height: 1.2;
  margin-left: 1.2rem;
  text-align: left;
  hyphens: none;
}

.intro-capitulo li::marker {
  color: var(--cor-1);
}

.imagem-abertura-capitulo {
  max-width: 100%;
  aspect-ratio: 25/14; /* 650px x 364px */
  display: block;
  object-fit: cover;
}

/* TEXTOS LATERAIS */

aside {
  font: 0.85rem/1.06 "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  /* a Plex Sans vai ser invocada nas letras gregas, que não tem na Plex Sans Cond */
  padding: 0.25rem;
  font-weight: normal;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-transform: none;
}

@media (max-width: 1239px) { /* LAYOUT TABLET/CELULAR */
  aside {
    display: block;
    margin: 0.75rem 1rem !important;
    max-width: fit-content;
  }  
}

@media (min-width: 1240px) { /* LAYOUT DESKTOP */
  aside {
    display: block;
    float: right;
    position: absolute;
    margin-top: -2em;
    margin-left: 670px;
    margin-right: auto;
    /*max-*/width: 250px;
    }
  
    li aside {
      margin-left: calc(670px - 2.5rem); /* 2.5rem é a soma das margens da ul/ol e do li */
    }
}

.comentario {
  color: var(--cor-comentario);
}

.ancora-comentario {
  display: none;
  vertical-align: super;
  font-size: 60%;
  opacity: 0.25;
}

.ancora-comentario::before {
  content: "^fn-";
}

.crossref {
  border-top: 1px solid var(--cor-bordas-crossref);
  border-bottom: 1px solid var(--cor-bordas-crossref);
  background-color: var(--cor-fundo-crossref);
  color: var(--cor-texto-crossref);
  padding-left: 2em;
  padding-right: 1em;
}

.crossref::before{
  content: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='76 274 848 849' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M879,319.5C849,289.167 812.333,274 769,274C725.667,274 688.667,289 658,319L517,461C493.667,483.667 479.333,511.167 474,543.5C468.667,575.833 472.333,606 485,634L436,683C407.333,670.333 377,666.833 345,672.5C313,678.167 285.333,692.333 262,715L121,857C91,887 76,923.667 76,967C76,1010.33 91,1047.17 121,1077.5C151,1107.83 187.667,1123 231,1123C274.333,1123 311.333,1107.67 342,1077L483,936C506.333,912.667 520.667,885 526,853C531.333,821 527.667,790.667 515,762L564,714C592.667,726.667 623,730.167 655,724.5C687,718.833 714.667,704.333 738,681L879,540C909,510 924,473.333 924,430C924,386.667 909,349.833 879,319.5ZM709,370C725.667,353.333 745.5,345 768.5,345C791.5,345 811.333,353.333 828,370C844.667,386.667 853,406.5 853,429.5C853,452.5 844.667,472.333 828,489L687,631C669,649 647.333,657 622,655L688,590C698.667,578.667 704,565.167 704,549.5C704,533.833 698.667,520.667 688,510C677.333,499.333 664.167,494 648.5,494C632.833,494 619.667,499.333 609,510L543,576C541.667,551.333 550,530 568,512ZM373,741C373.667,741 375.333,741.333 378,742L312,807C301.333,817.667 296,830.833 296,846.5C296,862.167 301.333,875.5 312,886.5C322.667,897.5 335.833,903 351.5,903C367.167,903 380.333,897.333 391,886L457,821C458.333,845.667 450,867 432,885L291,1027C274.333,1043.67 254.5,1052 231.5,1052C208.5,1052 188.667,1043.67 172,1027C155.333,1010.33 147,990.5 147,967.5C147,944.5 155.333,924.667 172,908L313,766C329.667,749.333 349.667,741 373,741Z' fill='hsl(49, 23%, 48%)' fill_opacity='1'%3E%3C/path%3E%3C/svg%3E");
  color: hsl(49, 23%, 48%);
  display: block;
  float: left;
  margin-left: -1.5em;
  scale: 120%;
}

.ancora-glossario {
	background-color: var(--cor-glossario-2);
	border-bottom: 0.15rem solid var(--cor-glossario-1);
}

.glossario {
  border-top: 0.1rem solid var(--cor-glossario-1);
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	padding-top: 0.2rem;
}

.definicao-glossario {
	font-family: "IBM Plex Sans Condensed", sans-serif;
	font-weight: 500;
  text-indent: 0;
  text-align: left;
}

.verbete-glossario {
  font-family: "Fira Sans", sans-serif;
  font-weight: 500;
  line-height: 1.3;
  color: var(--cor-glossario-1);
  background-color: var(--cor-glossario-2);
  border-top: 0.2rem solid var(--cor-glossario-1);
  display: inline-block;
  width: fit-content;
  margin-top: -0.25rem;
}

@media (max-width: 1240px) {
  .verbete-glossario {
    margin-right: 0.5em;
  }
}

.ancora-biografia {
  text-decoration: underline 0.12rem dotted var(--cor-biografia-1);
  color: inherit;
  text-underline-offset: 0.2em;
  border-radius: 0.25em 0.25em 0 0;
  transition: background-color 0.25s, color 0.25s;
}

.ancora-biografia:hover {
  background-color: var(--cor-biografia-2);
  color: var(--cor-biografia-1);
  transition: background-color 0.25s, color 0.25s;
}

.titulo-biografia {
  text-decoration: none; /* reset do h3 geral */
  font: 400 1.25rem/1.15 "Fira Sans", sans-serif;
  letter-spacing: -0.025em;
  margin-top: 0.9rem;
  margin-bottom: 0.6rem;
  text-indent: 0;
  text-decoration: underline 0.12rem dotted var(--cor-biografia-1);
  text-underline-offset: 0.2em;
  color: var(--cor-texto);
  font-feature-settings: "liga" on;
}

.letra-biografia {
  font: bold 1.8rem/1.0 "Fira Sans", sans-serif;
  letter-spacing: -0.025em;
  margin: 1.8rem auto 1.0rem auto;
  padding: 0.25rem 0.5rem;
  text-align: left;
  text-indent: 0;
  background-color: var(--cor-biografia);
  color: white;
}

.datas-biografia {
  text-decoration: none;
  font-weight: 300;
  color: #808080;
  font-size: 90%;
}

.sobrenome-biografia {
  font-weight: 600;
  color: var(--cor-biografia-1);
}

/* UM POUQUINHO DE CONTEXTO */

.texto-complementar {
  box-sizing: border-box;
  position: relative;
  margin: 2rem 0;
  padding: 0rem 1rem 1rem 1rem;
  border: 2px solid var(--cor-borda-texto-complementar);
  background-color: var(--cor-fundo-texto-complementar);
  font-family: "IBM Plex Sans Condensed", sans-serif;
  font-size: 1.0rem;
  line-height: 1.3;
  color: var(--cor-texto);
}

.barra-titulo-texto-complementar {
  width: calc(100% + 2rem);
  box-sizing: border-box;
  position: relative;
  left: -1rem;
  margin-bottom: 20px;
}

.titulo-texto-complementar {
  margin: 0;
  width: calc(100% - 84px);
  margin-left: 102px;
margin-bottom: 0.75rem;
  text-align: center;
  padding: 2px 1rem;
  min-height: 32px;
  font: 700 1.5rem/1.5rem "Fira Sans", sans-serif; /* extrabold */
  /* no indesign é 10/14pt mas ainda não bate exatamente com o pdf */
  color: var(--cor-titulo-texto-complementar);
  background-color: var(--cor-barra-titulo-texto-complementar);
  text-decoration: none;
  text-wrap: balance;
}

.titulo-texto-complementar::before {
  content: "Um pouquinho de contexto";
  text-transform: uppercase;
  font: 900 0.8rem/0.9 "Fira Sans", sans-serif;
  /* igual ao font-size do html; bate visualmente com o "60pt" do indesign */
  font-style: italic;
  letter-spacing: -0.025em;
	color: white;
  background-color: var(--cor-borda-texto-complementar);
	position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  display: flex;
  width: 120px;
  box-sizing: border-box;
  padding: 0 10px;
  height: 32px;
  justify-content: center;
  align-items: center;
}

p.fontes-texto-complementar {
  font: 300 0.8rem/1.4 "IBM Plex Sans", sans-serif;
  text-indent: 0;
  text-align: left;
  border-top: 1px solid var(--cor-fontes-texto-complementar);
  padding-top: 0.25em;
  margin-top: 1em;
}

span.fontes-consultadas-texto-complementar {
  font-weight: 500;
  font-family: "Fira Sans", sans-serif;
  color: var(--cor-fontes-texto-complementar);
  text-transform: uppercase;
  /* font-variant-caps: small-caps; */
}

#resumo {
  position: relative;
  width: fit-content;
  padding: 0 0.35rem;
  top: -16px;
  margin: 0 auto;
  font-family: "Fira Sans", sans-serif;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" on;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0;
  background-color: var(--linha-resumo);
  color: white;
}

.resumo {
  margin: 3rem 0;
  padding: 0rem 1rem 1rem 1rem;
  border-top: 0.15rem solid var(--linha-resumo);
  background-color: var(--fundo-resumo);
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
  /* a Plex Sans vai ser invocada nas letras gregas, que não tem na Plex Sans Cond */
  font-size: 1rem;
  line-height: 1.3;
  color: var(--cor-texto);
}

.resumo ul {
  margin-left: -0.25rem;
}

.secao-resumo {
  display: block;
  text-indent: 0;
  margin-top: 1.0rem;
  font: 600 1.2rem/1.2rem "Fira Sans", sans-serif;
  color: var(--secao-resumo);
  text-align: left;
}

.num-secao-resumo {
  font: 400 0.9rem/1.2rem "Fira Sans", sans-serif;
  margin-right: 0.4rem;
}

.num-figura {
  /* text-transform: uppercase; */
  font-size: 90%;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  color: var(--cor-figura);
  text-decoration: none;
  margin-right: 0.5em;
}

.figura-abertura .num-figura,
.intro-capitulo .ref-figura {
  color: var(--cor-figura-abertura);
}

.legenda-figura {
  margin-top: 0.5em;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 300;
  line-height: 1.2;
}

figure {
  position: relative;
  margin: 2.5rem 0;
}

figure.figura-abertura {
  margin: initial;
}

figure img {
  display: flex;
  margin: 0 auto;
  max-width: 100%;
  max-height: 650px;
  justify-content: center;
  align-self: center;
}

.legenda-figura-abertura {
  max-width: 250px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.75);
  padding: 10px;
  margin-left: 1rem;
  bottom: 0;
  color: black;
}

@media (max-width: 700px) and (min-width: 451px) {
  .legenda-figura-abertura {
    line-height: 1.1;
    max-width: 100%;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 10px;
    margin-left: 0rem;
    bottom: 0;
    color: black;
  }
}

@media (max-width: 450px) {
  .legenda-figura-abertura {
    line-height: 1.1;
    max-width: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 10px;
    margin-left: 0rem;
    color: black;
    margin: 0;
  }
}

span.credito-figura {
  font-size: 0.8rem;
  display: block;
  font-family: "IBM Plex Sans Condensed", sans-serif;
}
span.credito-figura a {
  color: var(--cor-credito);
  text-decoration: none;
}
.figura-abertura .credito-figura a,
.figura-abertura-unidade .credito-figura a {
  color: var(--cor-credito-abertura);
}
span.credito-figura::before{
  content: "[";
  color: inherit;
}
span.credito-figura::after{
  content: "]";
  color: inherit;
}

a.ref-figura {
  /* text-transform: uppercase; */
  font-size: 90%;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  color: var(--cor-figura);
  text-decoration: none;
}

.letra-figura {
  font-weight: 500;
}


/* TABELAS */

table {
  border-collapse: collapse;
}

.tabela {
  display: block;
	border-collapse: collapse;
  overflow-x: auto;
  overflow-y: hidden;
  margin-top: 1rem;
	margin-bottom: 1rem;
}

.tabela caption {
  display: block;
  width: 100%;
  text-align: left;
  border-top: var(--cor-tabela) 1.5px solid;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 300;
  padding-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.tabela th {
  position: sticky;
}

.num-tabela {
  /* text-transform: uppercase; */
  font-size: 90%;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 700;
  color: var(--cor-tabela);
  text-decoration: none;
  margin-right: 0.5em;
}

a.ref-tabela {
  /* text-transform: uppercase; */
  font-size: 90%;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
  color: var(--cor-tabela);
  text-decoration: none;
}

td, th {
	line-height: 1.2;
	padding: 0.15rem 0.4rem;
	margin: 0px;
	border-style: solid none none none;
	border-color: var(--cor-texto);
	border-width: 1px;
  text-align: center;
}

th {
  border-style: solid solid solid solid;
  background-color: var(--cor-texto);
  color: var(--cor-fundo);
}

.tabela td,
.tabela th {
  line-height: 1.3;
	border-color: var(--cor-tabela);
}

.tabela th {
	font-weight: 700;
	text-align: left;
	color: white;
	background-color: var(--cor-tabela-celula-escura);
  border-top: none;
}

.tabela td {
  text-align: initial;
}

.celula-media {
	font-weight: 600;
	background-color: var(--cor-tabela-celula-media);
  color: black;
}

.celula-clara {
	font-weight: 500;
	background-color: var(--cor-tabela-celula-clara);
  color: black;
}

p.fontes-tabela, p.obs-tabela {
  font: 400 0.8rem/1.4 "IBM Plex Sans", sans-serif;
  text-indent: 0;
  /* margin-top: -1.0rem; */
  margin-bottom: 1.5rem;
}

span.fontes-consultadas-tabela {
  font-weight: 500;
  font-family: "Fira Sans", sans-serif;
  color: var(--cor-tabela);
  text-transform: uppercase;
  /* font-variant-caps: small-caps; */
}

/* DESTAQUE (QUATRO CANTOS) */

/* .destaque {
  text-align: center;
  color: black;
  padding: 0.1rem 1.1rem;
  width: fit-content;
  margin: 1rem auto;
  border-radius: 0 0.75rem;

  background: var(--cor-destaque);
  background:
      -moz-linear-gradient(45deg,  transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -moz-linear-gradient(135deg, transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -moz-linear-gradient(225deg, transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -moz-linear-gradient(315deg, transparent 0.75rem, var(--cor-destaque) 0.75rem);
  background:
      -o-linear-gradient(45deg,  transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -o-linear-gradient(135deg, transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -o-linear-gradient(225deg, transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -o-linear-gradient(315deg, transparent 0.75rem, var(--cor-destaque) 0.75rem);
  background:
      -webkit-linear-gradient(45deg,  transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -webkit-linear-gradient(135deg, transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -webkit-linear-gradient(225deg, transparent 0.75rem, var(--cor-destaque) 0.75rem),
      -webkit-linear-gradient(315deg, transparent 0.75rem, var(--cor-destaque) 0.75rem);

  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
} */

/* DESTAQUE (DOIS CANTOS) */

.destaque {
  text-align: center;
  color: black;
  padding: 0.1rem 1.1rem;
  width: fit-content;
  margin: 1rem auto;
  border-radius: 0 0.5rem;

  background: var(--cor-destaque); /* fallback */
  background:
      -moz-linear-gradient(45deg,  transparent 0.5rem, var(--cor-destaque) 0.5rem),
      -moz-linear-gradient(135deg, var(--cor-destaque) 0.5rem, var(--cor-destaque) 0.5rem),
      -moz-linear-gradient(225deg, transparent 0.5rem, var(--cor-destaque) 0.5rem),
      -moz-linear-gradient(315deg, var(--cor-destaque) 0.5rem, var(--cor-destaque) 0.5rem);
  background:
      -o-linear-gradient(45deg,  transparent 0.5rem, var(--cor-destaque) 0.5rem),
      -o-linear-gradient(135deg, var(--cor-destaque) 0.5rem, var(--cor-destaque) 0.5rem),
      -o-linear-gradient(225deg, transparent 0.5rem, var(--cor-destaque) 0.5rem),
      -o-linear-gradient(315deg, var(--cor-destaque) 0.5rem, var(--cor-destaque) 0.5rem);
  background:
      -webkit-linear-gradient(45deg,  transparent 0.5rem, var(--cor-destaque) 0.5rem),
      -webkit-linear-gradient(135deg, var(--cor-destaque) 0.5rem, var(--cor-destaque) 0.5rem),
      -webkit-linear-gradient(225deg, transparent 0.5rem, var(--cor-destaque) 0.5rem),
      -webkit-linear-gradient(315deg, var(--cor-destaque) 0.5rem, var(--cor-destaque) 0.5rem);

  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}


/* MINI SUMÁRIO */

.mini-sumario {
  background-color: var(--fundo-mini-sumario);
  color: black;
  padding: 5px 10px;
  font: 400 0.90rem/1.25 "Fira Sans", sans-serif;
}

.mini-sumario .resumo-mini-sumario {
  font-weight: 500;
}

.mini-sumario a {
  text-decoration: none;
  color: black;
  margin-right: 1em;
  display: inline-block;
  letter-spacing: -0.015em;
}



.mini-sumario .numero-secao {
  /* reset do estilo de número da seção original */
  display: initial;
  height: initial;
  width: initial;
  position: initial;
  float: initial;
  margin-right: initial;
  padding: initial;
  background-color: initial;
  box-shadow: initial;

  font-weight: 700;
  font-size: 90%;
  color: var(--cor-1);
  padding-right: 0.5em;
}

/* .mini-sumario a:hover .numero-secao {
  color: white;
} */

.mini-sumario a:hover {
  color: var(--cor-1);
}

.mini-sumario a:active {
  text-decoration: underline 1px solid var(--cor-2);
}

@media (min-width: 1240px) {
  .mini-sumario {
    display: block;
    float: left;
    position: relative;
    top: 364px;
    margin-left: -250px;
    width: 250px;
    margin-top: 0px;
    z-index: 2;
    font: 400 0.90rem/1.25 "Fira Sans", sans-serif;
  }

  .mini-sumario a {
    display: block;
    margin-right: 0;
  }
}

.mini-sumario .secoes {
  text-transform: lowercase;
  font-variant-caps: small-caps;
  font-feature-settings: "smcp" on;
  font-size: 90%;
  font-family: 'Fira Sans', sans-serif;
  text-decoration: underline;
  font-weight: bold;
  color: var(--cor-1);
  margin-bottom: 0.3rem;
  margin-right: 1rem;
}

/* IDEIAS CENTRAIS */

/* bloco completo */
div.ideias-secao { /* não utilizado */
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  border-top: 2px solid var(--ideias);
  border-bottom: 2px solid var(--ideias);
  padding: 1rem;
  font: 300 1rem/1.35 "IBM Plex Sans Condensed", sans-serif; /* versão que define fonte da lista */
  /* igual ao font-size do html; bate visualmente com o "10pt" do indesign; no indesign é 10/14pt mas ainda não bate exatamente com o pdf */
  font-feature-settings: "liga" on;
  max-width: 650px;
  letter-spacing: 0.010em;
  text-align: left;
  text-indent: 0;
  hyphens: none;
  padding-top: 0;
}

p.ideias-secao {
  border-top: 1px solid var(--ideias);
  border-bottom: 1px solid var(--ideias);
  padding: 0.25em 0;
  margin: 1.5rem 0;
  font: 450 0.95rem/1.2 "IBM Plex Sans Condensed", sans-serif;
  font-feature-settings: "liga" on;
  max-width: 650px;
  letter-spacing: 0.010em;
  text-align: left;
  text-indent: 0;
  hyphens: none;
}

p.ideias { /* versão parágrafo centralizado */
  background-color: white;
  color: var(--ideias);
  font-family: "Fira Sans", sans-serif;
  font-feature-settings: "smcp" on;
  font-size: 120%;
  font-variant-caps: small-caps;
  font-weight: 500;
  letter-spacing: 0.050em;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  text-transform: lowercase;
  top: -0.75em;
  width: fit-content;
}

span.ideias { /* versão run-in */
  color: var(--ideias);
  font-family: "Fira Sans", sans-serif;
  font-size: 100%;
  font-weight: 500;
  letter-spacing: 0.050em;
  line-height: 0;
  margin-right: 1em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  text-transform: uppercase;
  width: fit-content;
}

.ideias-secao ul {
  list-style-type: square;
  margin-left: 0;
  margin-top: -0.5em;
}

.ideias-secao li {
  font-size: 0.95rem;
  line-height: 1.2;
  margin-left: 1.2rem;
}

.ideias-secao li::marker {
  color: var(--ideias);
}

/* HEADER - HIERARQUIA */
.hierarquia {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.9rem;
  padding-bottom: 1.5em;
}

@media (max-width: 750px) {
  .hierarquia {
    font-size: 0.7rem;
  }
}

.hierarquia .titulo-livro {
  font-family: 'Fira Sans';
  /*font-variant: small-caps;*/
  text-transform: uppercase;
  font-weight: 500;
  margin-right: 1em;
}

.hierarquia .link-unidade {
  font-family: 'Fira Sans Condensed';
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  margin-left: auto;
}

.hierarquia .link-unidade span {
  color: var(--cor-unidade-header);
  font-family: 'Fira Sans';
  font-weight: 900;
  text-transform: uppercase;
}



/* EXEMPLOS */

.exemplo {
  border: 2px solid var(--cor-exemplo-1);
  text-align: left;
  margin: 2em 0;
  display: block;
  overflow-x: auto;
  /* border-left: 1px solid var(--cor-exemplo-1);
  border-right: 1px solid var(--cor-exemplo-1);
  margin-left: -0.5em;
  margin-right: -0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em; */
  padding: 0 0.5em;
}

.vinheta-exemplo {
  color: black;
  background-color: var(--cor-exemplo-1);
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Fira Sans", sans-serif;
  padding: 0 0.5em;
  margin-right: 0.0em;
  display: inline-block;
  position: relative;
  top: -0.25em;
  left: -0.5em;
}

.titulo-exemplo {
  background-color: var(--cor-exemplo-2);
  color: black;
  padding: 0 0.5em;
  margin-right: 0.5em;
  margin-left: -0.5em;
}

.exemplo p {
  text-indent: 0;
  text-align: left;
  margin: 0.2em 0;
}

.estrategia, .resolucao {
  margin: 0.5em 0;
  display: block;
  overflow-x: inherit;
  overflow-y: hidden;
}

.vinheta-estrategia, .vinheta-resolucao {
  color: var(--cor-exemplo-1);
  font-weight: 500;
  margin-right: 0.5em;
  font-family: "Fira Sans", sans-serif;
}

.vinheta-treino {
  color: black;
  background-color: var(--cor-exemplo-2);
  text-transform: uppercase;
  font-weight: 500;
  font-family: "Fira Sans", sans-serif;
  padding: 0 0.5em;
  margin-right: 0.5em;
  display: inline-block;
  position: relative;
  top: -0.25em;
}

.vinheta-resposta-treino {
  font-weight: 500;
  font-style: italic;
  font-family: "Fira Sans", sans-serif;
  margin-right: 0.5em;
}

.treino {
  border-top: 1px solid var(--cor-exemplo-2);
  display: block;
}

.resposta-treino {
  text-align: left;
  rotate: 180deg;
}

/* CARTÕES (usados no capítulo 3) */
.cartao {
  margin: 1em 0;
}

.titulo-cartao {
  color: white;
  margin: 0;
  padding: 0.2em 0.5em;
}

.titulo-cartao.cartao-verde {background: hsl(175, 80%, 35%);}
.titulo-cartao.cartao-roxo {background: hsl(260, 35%, 45%);}

.texto-cartao {
  color: black;
  padding: 0.5em;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
}

.texto-cartao.cartao-verde {background: hsl(175, 25%, 90%);}
.texto-cartao.cartao-roxo {background: hsl(260, 30%, 90%);}

.texto-cartao p {
  text-indent: 0;
  text-align: left;
  hyphens: none;
}

.autoria {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  color: #707070;
  text-align: center;
  font-size: 75%;
  width: 75%;
  margin: 0 auto;
}

.autoria a {
  color: inherit;
}

/* ESTILOS ADAPTADOS PARA IMPRESSÃO */

@media print {

  .nav-rodape {
    display: none !important;
  }

  img {
    max-height: 9cm !important;
  }

  body {
    width: 60ch !important;
  }
}