@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,16..72,300;0,16..72,400;0,16..72,500;1,16..72,400&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   APOIO — LICENCIATURA EM FILOSOFIA · CP II REALENGO
   Linguagem visual herdada do Azure Jornada: azul-marinho profundo, ouro,
   painéis arredondados e serifada nos títulos. Desenhado no escuro — o tema
   claro é a variação, não o contrário.
   Índice:
     1-2  cor            6  cabeçalho         11  documentos e aviso
     3    tipos          7  grade do curso    12  leitura e glosas
     4    base           8  disciplinas       13  linha do tempo
     5    barra lateral  9  bibliografia      14  rodapé
                        10  escutar           15  telas estreitas
                                              16  portal · 17  questionário
                                              18  menu: temas das fichas
                                              19  fichas dos pré-socráticos
                                              20  menu: disciplinas com cadernos
   ========================================================================== */

/* --- 1. Cor: tema escuro (é o padrão deste site) ------------------------ */
:root {
  color-scheme: dark;

  --fundo:    #0B131F;   /* azul-marinho profundo, o fundo de tudo */
  --painel:   #111E2D;   /* o painel comum                         */
  --painel-2: #172637;   /* barra de título do painel, campo alto  */
  --barra-bg: #0D1826;   /* o menu lateral                         */
  --linha:    #2A3A4B;
  --linha-2:  #3B5064;
  --texto:    #EDF2F8;
  --fosco:    #9CABBC;   /* texto secundário                       */

  /* Os três acentos do Azure Jornada, agora com função: cada um é um
     status da ementa, e a ordem ouro → azul → verde → fosco desce
     do obrigatório ao apenas mencionado. */
  --ouro:  #E3BE72;
  --azul:  #8DC6EF;
  --verde: #A3D3B4;

  --basica:       var(--ouro);
  --ementa:       var(--azul);
  --complementar: var(--verde);
  --aula:         var(--fosco);

  --sobre-ouro: #211C11;   /* texto escuro por cima do ouro */
  --raio:   14px;
  --raio-p: 8px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- 2. Cor: tema claro -------------------------------------------------
   Mesmos matizes, virados para o papel. Ouro, azul e verde escurecem para
   continuarem legíveis sobre fundo claro.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --fundo:    #F1F5F9;
    --painel:   #FFFFFF;
    --painel-2: #E9EFF6;
    --barra-bg: #FFFFFF;
    --linha:    #D5DFEA;
    --linha-2:  #B4C3D3;
    --texto:    #0E1A27;
    --fosco:    #56697C;

    --ouro:  #8A6620;
    --azul:  #1B6795;
    --verde: #2A7048;

    --sobre-ouro: #FFFFFF;
    --sombra: 0 1px 2px rgba(16, 34, 51, 0.07);
  }
}
:root[data-theme="light"] {
  color-scheme: light;

  --fundo:    #F1F5F9;
  --painel:   #FFFFFF;
  --painel-2: #E9EFF6;
  --barra-bg: #FFFFFF;
  --linha:    #D5DFEA;
  --linha-2:  #B4C3D3;
  --texto:    #0E1A27;
  --fosco:    #56697C;

  --ouro:  #8A6620;
  --azul:  #1B6795;
  --verde: #2A7048;

  --sobre-ouro: #FFFFFF;
  --sombra: 0 1px 2px rgba(16, 34, 51, 0.07);
}

/* --- 3. Tipos ----------------------------------------------------------- */
:root {
  --serifada: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ui:       'Source Sans 3', 'Segoe UI', system-ui, Arial, sans-serif;

  --t--2: 0.75rem;
  --t--1: 0.875rem;
  --t-0:  1.0625rem;
  --t-1:  1.25rem;
  --t-2:  1.55rem;
  --t-3:  2rem;
  --t-4:  clamp(2.2rem, 5vw, 3.1rem);

  --medida: 64ch;
  --margem: 13rem;
  --barra:  15.5rem;
}

/* --- 4. Base ------------------------------------------------------------ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--ui);
  font-size: var(--t-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Títulos em serifada leve, bem apertada — o gesto do Azure Jornada. */
h1, h2, h3, h4 {
  font-family: var(--serifada);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }
strong { font-weight: 600; }
cite { font-style: italic; }

:focus-visible { outline: 2px solid var(--ouro); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* A sobrancelha dourada que abre cada seção */
.rubrica {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ouro);
}

.pular { position: absolute; left: -9999px; background: var(--ouro); color: var(--sobre-ouro); padding: 0.75rem 1.25rem; z-index: 60; border-radius: var(--raio-p); }
.pular:focus { left: 0.5rem; top: 0.5rem; }

/* A peça reaproveitada em quase tudo: o painel. */
.painel, .grupo-bib, .servico, .lista-disciplinas, .documentos, .faixas, .legenda > div {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* --- 5. Layout e barra lateral ------------------------------------------ */
.layout { display: grid; grid-template-columns: var(--barra) minmax(0, 1fr); min-height: 100vh; }
.conteudo { min-width: 0; }

.folio { max-width: 62rem; margin-inline: auto; padding-inline: clamp(1.1rem, 3.5vw, 2.4rem); }

.secao { padding-block: clamp(2rem, 4vw, 3rem); }
.secao + .secao { border-top: 1px solid var(--linha); }

.titulo-secao { font-size: var(--t-3); margin-block: 0.5rem 0.7rem; max-width: 24ch; }
.intro-secao { color: var(--fosco); max-width: 58ch; font-size: var(--t-1); line-height: 1.55; }

.barra {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--barra-bg);
  border-right: 1px solid var(--linha);
  padding: 1.75rem 0.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.barra-marca { padding: 0 0.6rem 1.5rem; }
.barra-marca a { text-decoration: none; display: block; }

.barra-marca .nome-site {
  font-family: var(--serifada);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: block;
  line-height: 1.2;
}

.barra-marca .sub {
  font-family: var(--ui);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fosco);
  display: block;
  margin-top: 0.4rem;
}

.barra .item {
  display: block;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 0.62rem 0.8rem;
  border-radius: var(--raio-p);
  color: var(--texto);
}

.barra .item:hover { background: var(--painel-2); }

.barra .item[aria-current="page"] { background: #253449; color: #F0CC82; font-weight: 600; }
:root[data-theme="light"] .barra .item[aria-current="page"],
:root:not([data-theme="dark"]) .barra .item[aria-current="page"] { background: var(--painel-2); color: var(--ouro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .barra .item[aria-current="page"] { background: #253449; color: #F0CC82; }
}

.grupo > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.8rem 0.45rem;
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fosco);
}

.grupo > summary::-webkit-details-marker { display: none; }
.grupo > summary:hover { color: var(--ouro); }

.grupo > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
  flex: none;
}
.grupo[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.grupo .sublista { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.grupo .sublista .item { padding-left: 1.5rem; font-size: 0.875rem; font-weight: 400; }

.barra-rodape {
  margin-top: auto;
  padding: 1rem 0.8rem 0;
  border-top: 1px solid var(--linha);
  font-size: var(--t--2);
  color: var(--fosco);
  line-height: 1.6;
}

.abrir-menu, .tema {
  position: fixed;
  z-index: 50;
  background: var(--painel-2);
  color: var(--texto);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  box-shadow: var(--sombra);
}

.abrir-menu { display: none; top: 1rem; left: 1rem; }
.tema { top: 1rem; right: 1rem; }
.abrir-menu:hover, .tema:hover { color: var(--ouro); border-color: var(--linha-2); }

.veu { display: none; }

/* --- 6. Cabeçalho -------------------------------------------------------- */
.masthead {
  padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.masthead h1 { font-size: var(--t-4); max-width: 17ch; }

.lede { font-size: var(--t-1); line-height: 1.55; color: var(--fosco); max-width: 54ch; }

.assinatura {
  font-size: var(--t--1);
  color: var(--fosco);
  margin-top: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
}

.editavel { border-bottom: 1px dashed var(--linha-2); }

.trilha {
  padding-block: 1.25rem 0;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--fosco);
}

.trilha a { text-decoration: none; color: var(--azul); }
.trilha a:hover { text-decoration: underline; }

/* --- 7. Grade do curso --------------------------------------------------- */
.grade {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.4rem;
  align-items: start;
}

.coluna-periodo > h3 {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fosco);
  margin-bottom: 0.7rem;
  padding-left: 0.2rem;
}

.lista-disciplinas { list-style: none; margin: 0; padding: 0; counter-reset: d; overflow: hidden; }
.lista-disciplinas > li + li { border-top: 1px solid var(--linha); }

/* Linha de atividade: marcador, conteúdo, nada à direita. */
.disciplina-link {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  align-items: start;
  text-decoration: none;
  padding: 1rem 1.15rem;
  counter-increment: d;
  transition: background-color 140ms ease;
}

.disciplina-link:hover { background: var(--painel-2); }

.disciplina-link::before {
  content: counter(d, decimal-leading-zero);
  font-family: var(--ui);
  font-size: var(--t--1);
  font-weight: 700;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}

.disciplina-link .nome { font-family: var(--serifada); font-size: 1.2rem; line-height: 1.25; }
.disciplina-link:hover .nome { color: var(--ouro); }

.disciplina-link .resumo {
  grid-column: 2;
  font-size: 0.94rem;
  color: var(--fosco);
  line-height: 1.55;
  margin-top: 0.2rem;
}

/* --- 8. Disciplinas ------------------------------------------------------ */
.disciplina { padding-block: clamp(2rem, 4.5vw, 3.25rem); scroll-margin-top: 1rem; }
.disciplina + .disciplina { border-top: 1px solid var(--linha); }

.disciplina > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem 1.15rem;
  align-items: center;
}

.disciplina > header > * { grid-column: 2; }

/* O escudo: a mesma forma do avatar do Azure Jornada. Aqui ele carrega o
   número da disciplina, que é a ordem curricular de verdade. */
.disciplina > header > .marcador {
  grid-column: 1;
  grid-row: 1;
  width: 3.1rem;
  height: 3.5rem;
  background: var(--painel-2);
  border: 1px solid var(--linha-2);
  clip-path: polygon(0 0, 100% 0, 100% 77%, 50% 100%, 0 77%);
  display: grid;
  place-items: center;
  padding-bottom: 0.55rem;
  font-family: var(--serifada);
  font-size: 1.35rem;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
}

.disciplina > header > h2 { grid-row: 1; font-size: var(--t-2); max-width: 22ch; }

.disciplina .ementa { color: var(--fosco); max-width: 62ch; }

.disciplina .ficha-link { font-size: var(--t--1); font-weight: 600; }
.disciplina .ficha-link a { color: var(--ouro); text-decoration: none; }
.disciplina .ficha-link a:hover { text-decoration: underline; }

/* Fichas de contagem, no formato das pílulas do Azure Jornada */
.contagem { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.contagem .pill {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 600;
  border: 1px solid var(--linha-2);
  border-radius: 5px;
  padding: 0.15rem 0.5rem;
  color: var(--fosco);
}

.contagem .pill[data-status="basica"]       { color: var(--ouro);  border-color: var(--ouro); }
.contagem .pill[data-status="ementa"]       { color: var(--azul);  border-color: var(--azul); }
.contagem .pill[data-status="complementar"] { color: var(--verde); border-color: var(--verde); }

/* --- 9. Bibliografia em painéis ------------------------------------------ */
.blocos-bib {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.4rem;
  align-items: start;
}

.grupo-bib { --cor: var(--fosco); overflow: hidden; }
.grupo-bib[data-status="basica"]       { --cor: var(--basica); }
.grupo-bib[data-status="ementa"]       { --cor: var(--ementa); }
.grupo-bib[data-status="complementar"] { --cor: var(--complementar); }
.grupo-bib[data-status="aula"]         { --cor: var(--aula); }
.grupo-bib[data-status="professor"]    { --cor: var(--fosco); }

.grupo-bib > h3 {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor);
  background: var(--painel-2);
  border-bottom: 1px solid var(--linha);
  padding: 0.9rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* O quadradinho colorido que repete o status ao lado do nome */
.grupo-bib > h3::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 2px;
  background: var(--cor);
  flex: none;
}

.refs { list-style: none; margin: 0; padding: 1.15rem; display: flex; flex-direction: column; gap: 1.1rem; }
.refs li { font-size: 0.97rem; line-height: 1.55; }
.refs .autor { font-family: var(--ui); font-weight: 600; }

.onde {
  display: block;
  font-size: var(--t--2);
  color: var(--fosco);
  margin-top: 0.3rem;
  padding-left: 0.95rem;
  position: relative;
  line-height: 1.5;
}

.onde::before { content: "→"; position: absolute; left: 0; color: var(--linha-2); }

/* Legenda: quatro fichas no formato dos cartões de estatística */
.legenda {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.legenda > div { --cor: var(--fosco); padding: 1.1rem 1.15rem; }
.legenda > div[data-status="basica"]       { --cor: var(--basica); }
.legenda > div[data-status="ementa"]       { --cor: var(--ementa); }
.legenda > div[data-status="complementar"] { --cor: var(--complementar); }
.legenda > div[data-status="aula"]         { --cor: var(--aula); }

.legenda h4 {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legenda h4::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--cor); flex: none; }

.legenda p { font-size: 0.92rem; color: var(--fosco); line-height: 1.55; }

/* --- 10. Escutar e assistir ---------------------------------------------- */
.midia { margin-top: 1.75rem; max-width: 48rem; }

.midia > h3 {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fosco);
  margin-bottom: 0.7rem;
  padding-left: 0.2rem;
}

.faixas { list-style: none; margin: 0; padding: 0; counter-reset: f; overflow: hidden; }
.faixas > li { counter-increment: f; }
.faixas > li + li { border-top: 1px solid var(--linha); }

.faixa-link {
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  gap: 0.1rem 0.85rem;
  align-items: center;
  text-decoration: none;
  padding: 0.9rem 1.15rem;
}

a.faixa-link:hover { background: var(--painel-2); }

/* O selo redondo do número, como o símbolo das atividades */
.faixa-link::before {
  content: counter(f, decimal-leading-zero);
  grid-row: 1 / span 2;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  background: var(--painel-2);
  border: 1px solid var(--linha-2);
  display: grid;
  place-items: center;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}

.faixa-link .titulo-faixa { font-size: 0.97rem; line-height: 1.4; align-self: end; }
a.faixa-link:hover .titulo-faixa { color: var(--ouro); }

.faixa-link .dur {
  grid-column: 3;
  grid-row: 1 / span 2;
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fosco);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--painel-2);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 0.1rem 0.45rem;
}

.faixa-link .fonte {
  grid-column: 2;
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fosco);
  align-self: start;
}

.vaga .faixa-link { cursor: default; }
.vaga .titulo-faixa { color: var(--fosco); font-style: italic; }
.vaga .faixa-link::before { color: var(--fosco); border-style: dashed; }

/* --- 11. Serviços, documentos e aviso ------------------------------------ */
.servicos {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
}

.servico { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.servico h3 { font-size: 1.2rem; }
.servico p { font-size: 0.94rem; color: var(--fosco); line-height: 1.55; }

.servico .arquivo {
  font-size: var(--t--2);
  color: var(--fosco);
  overflow-wrap: break-word;
  line-height: 1.5;
  border-top: 1px solid var(--linha);
  padding-top: 0.6rem;
  margin-top: auto;
}

.documentos { list-style: none; margin: 1.75rem 0 0; padding: 0; overflow: hidden; }

.documentos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1.25rem;
  align-items: baseline;
  padding: 1.15rem 1.25rem;
}

.documentos li + li { border-top: 1px solid var(--linha); }

.documentos .titulo-doc { font-family: var(--serifada); font-size: 1.18rem; line-height: 1.25; letter-spacing: -0.02em; }

.documentos .nota { grid-column: 1 / -1; font-size: 0.94rem; color: var(--fosco); line-height: 1.55; max-width: 64ch; }

.documentos .tipo {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ouro);
  border: 1px solid var(--linha-2);
  border-radius: 5px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

/* Caixa de recado, no formato do info-box */
.aviso {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: var(--painel-2);
  border: 1px solid var(--linha-2);
  border-left: 3px solid var(--ouro);
  border-radius: var(--raio-p);
  font-size: 0.97rem;
  color: var(--fosco);
  line-height: 1.6;
  max-width: 62ch;
}

.aviso strong { color: var(--texto); }

/* --- 12. Leitura: texto com glosas na margem ----------------------------- */
.capitulo {
  display: grid;
  grid-template-columns: minmax(0, var(--medida)) var(--margem);
  gap: 1.3rem 2.5rem;
  align-items: start;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

.capitulo + .capitulo { border-top: 1px solid var(--linha); }
.capitulo > * { grid-column: 1; }
.capitulo > h2 { font-size: var(--t-2); margin-bottom: 0.4rem; }
.capitulo > h3 { font-size: var(--t-1); color: var(--texto); margin-top: 1.25rem; }

/* A glosa vira o callout de borda dourada */
.glosa {
  grid-column: 2;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fosco);
  border-left: 2px solid var(--azul);
  padding: 0.2rem 0 0.2rem 0.9rem;
}

.glosa .rubrica { display: block; margin-bottom: 0.35rem; color: var(--azul); }
.glosa.prova { border-left-color: var(--ouro); }
.glosa.prova .rubrica { color: var(--ouro); }

.termo { font-style: italic; color: var(--texto); }

.citacao {
  font-family: var(--serifada);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--ouro);
  border-radius: var(--raio-p);
  color: var(--texto);
}

.citacao cite {
  display: block;
  font-family: var(--ui);
  font-size: var(--t--2);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fosco);
  margin-top: 0.8rem;
}

/* --- 13. Linha do tempo: os degraus da jornada --------------------------- */
.linha-tempo-caixa { overflow-x: auto; padding-bottom: 0.5rem; }

.linha-tempo {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9rem, 1fr);
  gap: 0.5rem;
  min-width: 46rem;
}

.linha-tempo li { border-top: 3px solid var(--linha-2); padding: 0.85rem 0.75rem 0 0; }
.linha-tempo li:first-child, .linha-tempo li:last-child { border-top-color: var(--ouro); }

.linha-tempo .data {
  display: block;
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}

.linha-tempo .evento { font-size: 0.92rem; line-height: 1.5; color: var(--fosco); }

/* --- 14. Rodapé ---------------------------------------------------------- */
.rodape {
  border-top: 1px solid var(--linha);
  background: var(--barra-bg);
  padding-block: clamp(2rem, 4vw, 2.75rem);
  font-size: 0.94rem;
  color: var(--fosco);
}

.rodape-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }

.rodape h4 {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 0.9rem;
}

.rodape p { line-height: 1.6; max-width: 48ch; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.rodape a { color: var(--azul); }

/* --- 15. Telas estreitas -------------------------------------------------- */
@media (max-width: 78rem) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .abrir-menu { display: block; }

  .barra {
    position: fixed;
    top: 0; left: 0;
    width: min(19rem, 86vw);
    z-index: 55;
    transform: translateX(-101%);
    transition: transform 220ms cubic-bezier(0.2, 0, 0.2, 1);
    box-shadow: 0 0 3rem rgba(0, 0, 0, 0.45);
  }

  .barra.aberta { transform: translateX(0); }

  .veu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 52;
    background: rgba(2, 8, 18, 0.72);
    border: 0;
    cursor: pointer;
  }

  .veu[hidden] { display: none; }

  .capitulo { grid-template-columns: minmax(0, 1fr); }
  .capitulo > .glosa { grid-column: 1; margin-left: 1rem; max-width: 34rem; }

  .conteudo { padding-top: 3rem; }
}

@media (max-width: 40rem) {
  .disciplina > header { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .disciplina > header > .marcador { grid-row: auto; }
  .disciplina > header > * { grid-column: 1; }
  .disciplina > header > h2 { grid-row: auto; }
  .tema { top: auto; bottom: 1rem; right: 1rem; }
  .faixa-link { grid-template-columns: 2.3rem minmax(0, 1fr); }
  .faixa-link .dur { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 0.3rem; }
  .documentos li, .servico, .refs { padding-inline: 1rem; }
}

/* --- 16. Portal: as áreas -------------------------------------------------
   Usado no index.html (o portal) e nas páginas de cada área. O escudo é o
   mesmo marcador das disciplinas, só que menor e com o símbolo da área.
   ------------------------------------------------------------------------ */
.bloco-areas { margin-top: 1.9rem; }
.bloco-areas + .bloco-areas { margin-top: 2.25rem; }

.bloco-areas > h3 {
  font-family: var(--ui);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fosco);
  margin-bottom: 0.8rem;
  padding-left: 0.2rem;
}

.areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.1rem;
}

.area {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0.35rem 1rem;
  align-items: start;
  padding: 1.2rem 1.25rem;
  text-decoration: none;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.area:hover { border-color: var(--ouro); background: var(--painel-2); }
.area:hover .nome-area { color: var(--ouro); }

.area .simbolo, .masthead .simbolo {
  grid-row: 1 / span 3;
  width: 2.7rem;
  height: 3.05rem;
  background: var(--painel-2);
  border: 1px solid var(--linha-2);
  clip-path: polygon(0 0, 100% 0, 100% 77%, 50% 100%, 0 77%);
  display: grid;
  place-items: center;
  padding-bottom: 0.5rem;
  font-family: var(--serifada);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ouro);
}

.area .simbolo.curto, .masthead .simbolo.curto { font-family: var(--ui); font-size: 0.8rem; font-weight: 700; }

.area .nome-area { font-family: var(--serifada); font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; }
.area .resumo { font-size: 0.93rem; color: var(--fosco); line-height: 1.55; }

.area .estado {
  justify-self: start;
  align-self: end;
  margin-top: 0.4rem;
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--linha-2);
  border-radius: 5px;
  padding: 0.1rem 0.45rem;
  color: var(--fosco);
}

.area .estado.cheio { color: var(--ouro); border-color: var(--ouro); }
.area .estado.vazio { border-style: dashed; }

/* Cabeçalho das páginas de área: o escudo grande ao lado do título */
.masthead .titulo-area { display: flex; align-items: center; gap: 1rem; }
.masthead .simbolo { width: 3.4rem; height: 3.85rem; font-size: 1.6rem; flex: none; }
.masthead .simbolo.curto { font-size: 0.95rem; }

/* Prateleira ainda vazia */
.servico.vazio { border-style: dashed; box-shadow: none; background: transparent; }

/* --- 17. Questionário -----------------------------------------------------
   Usado nas fichas de estudo (platao-politica.html). Cada questão é um
   painel; depois de corrigir, a alternativa certa ganha borda verde e a
   marcada errada, borda vermelha. O vermelho só existe aqui.
   ------------------------------------------------------------------------ */
:root { --erro: #F2A7A0; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --erro: #A63A2E; }
}
:root[data-theme="light"] { --erro: #A63A2E; }

.questionario {
  max-width: calc(var(--medida) + 6rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linha);
  scroll-margin-top: 1rem;
}

.questionario > h2 { font-size: var(--t-3); margin: 0.3rem 0 0.6rem; }
.questionario .instrucao { color: var(--fosco); max-width: var(--medida); margin-bottom: 1.5rem; }

.questao {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin: 0 0 1rem;
  padding: 1.1rem 1.25rem 1.2rem;
  min-width: 0;
}

.questao legend {
  float: left;              /* tira a legenda de cima da borda */
  width: 100%;
  font-family: var(--serifada);
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 0.8rem;
}
.questao legend + * { clear: both; }

.questao .num {
  display: inline-grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  border: 1px solid var(--ouro);
  color: var(--ouro);
  font-family: var(--ui);
  font-size: var(--t--1);
  font-weight: 700;
  vertical-align: 0.1em;
}

.questao label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.55rem 0.8rem;
  margin-top: 0.4rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  font-size: 0.97rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}

.questao label:hover { border-color: var(--linha-2); background: var(--painel-2); }
.questao label:has(input:checked) { border-color: var(--azul); background: var(--painel-2); }
.questao input { accent-color: var(--ouro); margin: 0.3rem 0 0; width: 1rem; height: 1rem; }
.questao input:disabled { cursor: default; }
.questao input:disabled + * , .questao label:has(input:disabled) { cursor: default; }

/* Depois de corrigir */
.questao label.e-certa { border-color: var(--verde); background: transparent; }
.questao label.e-errada { border-color: var(--erro); background: transparent; }
.questao label.e-certa::after,
.questao label.e-errada::after {
  grid-column: 2;
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.questao label.e-certa::after  { content: "Resposta certa"; color: var(--verde); }
.questao label.e-errada::after { content: "Sua resposta"; color: var(--erro); }

.questao.acertou { border-color: var(--verde); }
.questao.errou   { border-color: var(--erro); }
.questao.branco  { border-style: dashed; }

.explicacao { display: none; }
.questao.acertou .explicacao,
.questao.errou .explicacao,
.questao.branco .explicacao {
  display: block;
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--azul);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--fosco);
}

/* Placar */
.placar {
  background: var(--painel);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
}
.placar .pontos { font-family: var(--serifada); font-size: var(--t-3); line-height: 1.1; }
.placar .pontos strong { color: var(--ouro); font-weight: 500; }
.placar .pontos span { font-family: var(--ui); font-size: var(--t-0); color: var(--fosco); }
.barra-pontos { height: 6px; border-radius: 3px; background: var(--linha); margin: 0.8rem 0; overflow: hidden; }
.barra-pontos span { display: block; height: 100%; background: var(--ouro); border-radius: 3px; }
.placar .recado { color: var(--fosco); font-size: 0.95rem; }

/* Botões */
.acoes-questionario { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.botao-principal, .botao-secundario {
  font: 600 var(--t-0)/1 var(--ui);
  padding: 0.8rem 1.6rem;
  border-radius: var(--raio-p);
  cursor: pointer;
}
.botao-principal { background: var(--ouro); color: var(--sobre-ouro); border: 1px solid var(--ouro); }
.botao-principal:hover { filter: brightness(1.08); }
.botao-secundario { background: transparent; color: var(--texto); border: 1px solid var(--linha-2); }
.botao-secundario:hover { border-color: var(--ouro); }
.acoes-questionario [hidden] { display: none; }

@media (max-width: 40rem) {
  .questao { padding-inline: 1rem; }
  .questao legend { font-size: 1.05rem; }
}

/* --- 18. Menu: temas dentro das Fichas de estudo -------------------------
   Fichas de estudo → tema (Filosofia antiga, Filosofia política…) → fichas.
   O tema é outro <details>, um degrau abaixo do grupo. Para criar um tema
   novo, copie um <li> com <details class="subgrupo"> inteiro.
   ------------------------------------------------------------------------ */
.subgrupo > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem 0.5rem 1.5rem;
  border-radius: var(--raio-p);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto);
}
.subgrupo > summary::-webkit-details-marker { display: none; }
.subgrupo > summary:hover { background: var(--painel-2); color: var(--ouro); }

.subgrupo > summary::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
  flex: none;
  color: var(--fosco);
}
.subgrupo[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* As fichas do tema: recuadas, com um fio à esquerda marcando o tema */
.grupo .subgrupo .sublista {
  margin: 0.1rem 0 0.4rem 1.75rem;
  border-left: 1px solid var(--linha);
}
.grupo .subgrupo .sublista .item { padding-left: 0.9rem; }

/* --- 19. Fichas dos pré-socráticos ----------------------------------------
   tales.html, anaximandro.html, anaximenes.html, heraclito.html,
   democrito.html. Usam o questionário da seção 17; o que muda é que o
   resultado aparece NO FIM, abaixo do botão Corrigir, com a lista das
   questões certas, erradas e em branco.
   ------------------------------------------------------------------------ */

/* A faixa que liga as cinco fichas, logo abaixo da trilha */
.serie {
  padding-block: 0.5rem 0;
  font-size: var(--t--1);
  color: var(--fosco);
}
.serie-rotulo {
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ouro);
  margin-right: 0.35rem;
}
.serie a { color: var(--azul); text-decoration: none; font-weight: 600; }
.serie a:hover { text-decoration: underline; }
.serie [aria-current="page"] { color: var(--texto); font-weight: 700; }

.ir-questionario { padding-top: 1.25rem; font-size: var(--t--1); font-weight: 600; }
.ir-questionario a { color: var(--ouro); text-decoration: none; }
.ir-questionario a:hover { text-decoration: underline; }

/* Cada questão pode ser alvo de link a partir do resultado */
.questao { scroll-margin-top: 1rem; }
.questao:target { box-shadow: 0 0 0 2px var(--ouro); }

/* O resultado no fim */
.placar-final { margin: 1.75rem 0 0; scroll-margin-top: 1rem; }
.placar-final:focus { outline: none; }
.placar-final .rubrica { margin-bottom: 0.4rem; }

.resumo-questoes {
  display: grid;
  gap: 0.35rem;
  margin: 1rem 0 0;
  font-size: 0.95rem;
}
.resumo-questoes > div { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.resumo-questoes dt {
  min-width: 6.5rem;
  font-weight: 700;
  font-size: var(--t--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.2rem;
}
.resumo-questoes dd { margin: 0; font-variant-numeric: tabular-nums; }
.resumo-questoes .acertou dt { color: var(--verde); }
.resumo-questoes .errou dt   { color: var(--erro); }
.resumo-questoes .branco dt  { color: var(--fosco); }

.mapa-questoes {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.5rem;
}
.mapa-questoes a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  text-decoration: none;
  font-size: var(--t--1);
  line-height: 1.2;
}
.mapa-questoes a:hover { background: var(--painel-2); }
.mapa-questoes .n {
  display: inline-grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--t--2);
  border: 1px solid currentColor;
  flex: none;
}
.mapa-questoes .r { color: var(--fosco); }
.mapa-questoes .acertou a { border-color: var(--verde); }
.mapa-questoes .acertou .n { color: var(--verde); }
.mapa-questoes .errou a   { border-color: var(--erro); }
.mapa-questoes .errou .n  { color: var(--erro); }
.mapa-questoes .branco a  { border-style: dashed; }
.mapa-questoes .branco .n { color: var(--fosco); }

/* Na ficha geral: os cinco autores como cartões */
.fichas-autores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.fichas-autores a {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  text-decoration: none;
}
.fichas-autores a:hover { border-color: var(--ouro); }
.fichas-autores .nome { font-family: var(--serifada); font-size: var(--t-1); color: var(--ouro); line-height: 1.2; }
.fichas-autores .datas { font-size: var(--t--2); color: var(--fosco); }

/* --- 20. Menu: disciplinas que abrem os cadernos ---------------------------
   No «Segundo período», Filosofias Antigas e Filosofias Políticas são
   <details class="subgrupo disciplina-menu">: clicar abre a bibliografia e
   os cadernos de estudo logo abaixo. O título fica com o mesmo peso das
   outras disciplinas da lista, e a setinha avisa que ele abre.
   ------------------------------------------------------------------------ */
.disciplina-menu > summary { font-weight: 400; padding-top: 0.62rem; padding-bottom: 0.62rem; line-height: 1.35; }
.disciplina-menu[open] > summary { font-weight: 600; color: var(--ouro); }

/* Na ficha geral: link para a ficha completa de cada autor do período clássico */
.ficha-autor { margin-top: 1rem; font-size: var(--t--1); font-weight: 600; }
.ficha-autor a { color: var(--ouro); text-decoration: none; }
.ficha-autor a:hover { text-decoration: underline; }

/* --- 21. Páginas de cadernos (filosofias-antigas.html, filosofias-politicas.html)
   Topo: números + atalhos para cada período. Depois, um bloco por período
   (cabeçalho à esquerda, cartões à direita em telas largas) e, no fim,
   o painel da bibliografia.
   ------------------------------------------------------------------------ */
.painel-indice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 2rem;
  align-items: center;
  margin-top: 1.75rem;
  padding: 1.1rem 1.4rem;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.numeros-indice { display: flex; gap: 1.6rem; margin: 0; }
.numeros-indice div { display: grid; }
.numeros-indice dt {
  order: 2;
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fosco);
}
.numeros-indice dd {
  order: 1; margin: 0;
  font-family: var(--serifada); font-size: var(--t-3); line-height: 1; color: var(--ouro);
}
.atalhos-indice { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.atalhos-indice a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--linha-2);
  border-radius: 999px;
  font-size: var(--t--1); font-weight: 600;
  text-decoration: none; color: var(--texto);
}
.atalhos-indice a:hover { border-color: var(--ouro); color: var(--ouro); }
.atalhos-indice a span {
  display: inline-grid; place-items: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--painel-2);
  font-size: var(--t--2); color: var(--fosco);
}
.como-usar { grid-column: 1 / -1; color: var(--fosco); font-size: 0.95rem; padding-top: 0.9rem; border-top: 1px solid var(--linha); }

.bloco-periodo {
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--linha);
  scroll-margin-top: 1rem;
}
.bp-cabeca {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
  align-items: baseline;
  border-left: 3px solid var(--ouro);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}
.bp-faixa {
  grid-column: 1 / -1;
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ouro);
}
.bp-cabeca h2 { font-size: var(--t-3); margin: 0.2rem 0 0; }
.bp-epoca { font-size: var(--t--1); font-weight: 600; color: var(--azul); }
.bp-desc { grid-column: 1 / -1; margin-top: 0.35rem; color: var(--fosco); font-size: 0.98rem; line-height: 1.55; max-width: 60ch; }

.grade-cadernos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.9rem;
  align-items: stretch;
}
.cartao-caderno, .cartao-ponte {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 1.05rem 1.15rem 1rem;
  border-radius: var(--raio);
  text-decoration: none; color: var(--texto);
  transition: border-color 120ms, transform 120ms;
}
.cartao-caderno { background: var(--painel); border: 1px solid var(--linha); box-shadow: var(--sombra); }
.cartao-caderno:hover { border-color: var(--ouro); transform: translateY(-2px); }
.cc-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.cc-num { font-family: var(--serifada); font-size: var(--t-1); color: var(--fosco); font-variant-numeric: tabular-nums; }
.cc-datas { font-size: var(--t--2); color: var(--fosco); text-align: right; }
.cc-nome { font-family: var(--serifada); font-size: var(--t-2); line-height: 1.1; color: var(--ouro); letter-spacing: -0.02em; }
.cc-pergunta { font-family: var(--serifada); font-style: italic; font-size: 1.02rem; line-height: 1.4; }
.cc-conceitos { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cc-conceitos li {
  font-size: var(--t--2); font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--painel-2);
  color: var(--fosco);
}
.cc-acao {
  margin-top: auto; padding-top: 0.75rem;
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul);
}
.cartao-caderno:hover .cc-acao { color: var(--ouro); }
.cartao-ponte {
  border: 1px dashed var(--linha-2);
  color: var(--fosco); font-size: 0.95rem; line-height: 1.5;
  justify-content: space-between;
}
.cartao-ponte:hover { border-color: var(--ouro); }

.painel-bib {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-block: 2.5rem 3rem;
  padding: 1.4rem 1.6rem;
  background: var(--painel);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
}
.painel-bib h2 { font-size: var(--t-2); margin: 0.3rem 0 0.35rem; }
.painel-bib p:not(.rubrica) { color: var(--fosco); font-size: 0.95rem; }
.painel-bib .botao-principal { text-decoration: none; display: inline-block; }

@media (max-width: 40rem) {
  .bp-cabeca { grid-template-columns: minmax(0, 1fr); }
  .bloco-periodo { padding-block: 2rem; }
}
@media (max-width: 40rem) {
  .painel-indice { grid-template-columns: minmax(0, 1fr); }
  .atalhos-indice { justify-content: flex-start; }
  .numeros-indice { gap: 1.2rem; }
  .grade-cadernos { grid-template-columns: minmax(0, 1fr); }
}