:root {
  color-scheme: light;
  --fundo: #fbf6f3;
  --papel: #fffdfb;
  --texto: #302322;
  --suave: #6c524f;
  --vinho: #7b3549;
  --linha: #e7d5d0;
  --rosa: #f6e7e7;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  background: var(--fundo);
  color: var(--texto);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: var(--vinho); text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid var(--vinho); outline-offset: 5px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.largura { width: min(1040px, calc(100% - 48px)); margin-inline: auto; }

.skip {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  padding: 8px 14px;
  background: var(--papel);
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.topo { background: var(--papel); border-bottom: 1px solid var(--linha); }
.barra, .rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  font-size: .9rem;
}
.barra a, .rodape a { font-weight: 650; }
.barra .marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  font-weight: 750;
  text-decoration: none;
}
.marca span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--vinho);
  font: 700 .86rem Georgia, serif;
}

.capa {
  margin-block: 30px 36px;
  padding: clamp(26px, 5.8vw, 68px);
  background: linear-gradient(125deg, #fffaf6, var(--rosa));
  border: 1px solid var(--linha);
  border-radius: 20px;
}
.rotulo {
  margin: 0 0 8px;
  color: var(--vinho);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
h1, h2 { line-height: 1.1; }
.capa h1, .leitura h1, .sumario h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.capa h1 { font-size: clamp(2.35rem, 6.7vw, 4.6rem); }
.capa h1 em { color: var(--vinho); }
.introducao { max-width: 44ch; color: var(--suave); font-size: 1.05rem; margin: 18px 0 24px; }
.instrutora { margin: 16px 0 0; color: var(--suave); font-size: .9rem; }
.instrutora strong { color: var(--texto); }
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--vinho);
  color: #fff;
  font-weight: 680;
  text-decoration: none;
}
.botao:hover { background: #63283a; }

.sumario { scroll-margin-top: 20px; }
.sumario h2 { font-size: clamp(1.8rem, 4.2vw, 2.65rem); }
.cabecalho-secao {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.cabecalho-secao a { font-size: .9rem; font-weight: 650; }
.lista-aulas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lista-aulas a {
  display: grid;
  height: 100%;
  min-height: 54px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--papel);
  color: var(--texto);
  font-size: .95rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}
.lista-aulas a:hover { background: var(--rosa); border-color: #c99fa9; }
.numero, .seta { color: var(--vinho); }
.numero { font-size: .82rem; font-variant-numeric: tabular-nums; }
.nota {
  margin: 24px 0 0;
  padding: 13px 16px;
  border-left: 3px solid #a96274;
  border-radius: 0 8px 8px 0;
  background: var(--rosa);
  color: var(--texto);
  font-size: .95rem;
}

.voltar, .leitura, .navegacao-aulas { max-width: 760px; margin-inline: auto; }
.voltar { margin-top: 22px; font-size: .95rem; font-weight: 650; }
.voltar a { display: inline-block; padding-block: 8px; }
.leitura {
  margin-top: 10px;
  padding: clamp(20px, 5vw, 44px);
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--papel);
}
.leitura h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: 18px; }
.leitura h2 { font-size: 1.25rem; margin: 25px 0 8px; }
.leitura p:not(.rotulo), .leitura ul, .leitura ol, .leitura dl { margin-block: 0 12px; }
.leitura ul, .leitura ol { padding-left: 1.4em; }
.leitura li + li { margin-top: 7px; }
.leitura dt { margin-top: 12px; font-weight: 720; }
.leitura dd { margin: 1px 0 0; }
.passos li { padding: 0 0 9px 4px; }
.passos li::marker { color: var(--vinho); font-weight: 750; }
.navegacao-aulas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-weight: 650;
}
.navegacao-aulas .botao { margin-left: auto; }
.rodape { margin-top: 32px; border-top: 1px solid var(--linha); color: var(--suave); }

@media (max-width: 650px) {
  .largura { width: calc(100% - 32px); }
  .capa { margin-block: 18px 26px; padding: 23px; border-radius: 14px; }
  .lista-aulas { grid-template-columns: 1fr; }
  .rodape { flex-wrap: wrap; }
}

@media (max-width: 380px) {
  .capa h1 { font-size: clamp(1.95rem, 8.9vw, 2.35rem); }
}