/* CSS conforme item 4.5 do Anexo 3 - não utilizar "direction" nem "unicode-bidi" */

/* Paleta extraída da identidade visual da coleção (capa: navy profundo + magenta) */
:root {
  --cor-navy: #0a0022;
  --cor-navy-suave: #1c1440;
  --cor-lilas: #4a19ac;
  --cor-lilas-escuro: #2c0f67;
  --cor-magenta: #d6299e;
  --cor-magenta-escuro: #a31474;
  --cor-fundo-suave: #faf0f8;
  --cor-fundo-alerta: #fdf6e3;
  --cor-alerta: #9a6b00;
  --cor-borda-suave: #e6d6ec;
  --cor-texto: #17102b;
  --cor-texto-suave: #4a4459;

  /* Tons usados na caixa Atividade Inicial (Pense antes / Troque
     ideias com a turma), reaproveitados do 6º ano. */
  --cor-roxo-escuro: #54267f;
  --cor-roxo-vivo: #6d28d9;
  --cor-fundo-lavanda: #f4eefc;
  --cor-laranja: #e99013;

  /* Recurso digital-only (não vem do PDF impresso): chip "Vídeo" da
     Galeria de Recursos com QR code - completa a progressão
     magenta (infográfico) / roxo (podcast) / azul (vídeo) / lilás (dinâmica). */
  --cor-azul: #1d4ed8;
  --cor-fundo-azul: #eaf1fb;
  --cor-fundo-lilas: #f1ebfb;
  --cor-teal: #0e6b64;
  --cor-fundo-teal: #e2f4f2;

  /* Fundo saturado o bastante para o selo (badge) da Galeria de
     Recursos, que leva texto/ícone pretos - precisa de mais contraste
     do que os --cor-fundo-* usados em outros lugares. */
  --cor-selo-azul: #a9cbee;
  --cor-selo-magenta: #eeb3d4;
  --cor-selo-roxo: #c7b8ea;
  --cor-selo-teal: #a8ded8;

  /* Borda do card mais suave que a cor saturada usada no selo/link */
  --cor-borda-azul: #7fadde;
  --cor-borda-magenta: #d982ac;
  --cor-borda-roxo: #8f76c4;
  --cor-borda-teal: #5fb0a8;

  --fonte-base: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

img,
video {
  max-width: 100%;
  height: auto;
}

body {
  font-family: var(--fonte-base);
  line-height: 1.65;
  color: var(--cor-texto);
  background: #fff;
  margin: 0;
}

/* h1-h4 sem font-family proprio (herdam --fonte-base do body) - antes
   usavam --fonte-titulos: "Space Grotesk" via @import de
   fonts.googleapis.com, violando o item 4.3.9.1 (nenhuma requisicao a
   servidor externo). Removido; ano_8/ano_9 ja seguiam esse padrao
   (nunca tiveram fonte de titulo separada), agora os 4 livros ficam
   consistentes. */

main,
body > section,
body > nav,
body > img[data-book="capa"],
body > img[data-book="segunda-capa"],
body > .leitor-conteudo > section,
body > .leitor-conteudo > nav,
body > .leitor-conteudo > img[data-book="capa"],
body > .leitor-conteudo > img[data-book="segunda-capa"] {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5em;
}

main {
  padding-top: 0.5em;
  padding-bottom: 3em;
  counter-reset: pergunta-guia;
}

/* Item 4.3.6.6 / 4.3.12.2 - técnica "screen reader only": oculta visualmente, mantém para leitor de tela */
.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==== Capas ==== */
img[data-book="capa"],
img[data-book="segunda-capa"],
img[data-book="terceira-capa"],
img[data-book="quarta-capa"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/* ==== Folha de rosto / ficha catalográfica ==== */
.folha-rosto {
  text-align: center;
  padding-top: 3em;
  padding-bottom: 2em;
}

h1 {
  font-size: 2.1em;
  font-weight: 700;
  color: var(--cor-navy);
  letter-spacing: -0.01em;
  margin-bottom: 0.2em;
}

/* Barra de destaque sob o H1 - mesma linguagem visual da capa (linha
   magenta sob o título) e da página principal da coleção, pra não
   ficar só um título seguido de linhas de texto todas com o mesmo
   peso (pedido do usuário, mesma melhoria já aplicada no index.html
   da raiz). */
.folha-rosto h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--cor-magenta);
  margin: 0.6em auto 0;
}

.folha-rosto p {
  font-size: 1.05em;
  color: var(--cor-texto-suave);
  margin: 0.3em 0;
}

/* Ano do livro em destaque - mesmo selo usado nos cards da página
   principal da coleção (cor-magenta-escuro + texto branco, 7.22:1 de
   contraste), em vez de mais uma linha de texto cinza igual às
   outras. */
.folha-rosto-ano {
  display: inline-block;
  font-size: 0.85em !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff !important;
  background: var(--cor-magenta-escuro);
  padding: 0.3em 0.9em;
  border-radius: 999px;
  margin: 0.9em 0 0.7em !important;
}

/* Autor(es) e editora - metadados de menor prioridade, mais discretos
   que o ano, mas ainda legíveis (a autoria continua obrigatória pelo
   item 4.3.2.c). */
.folha-rosto-autoria {
  font-size: 0.92em !important;
  color: var(--cor-texto-suave);
  margin: 0.2em 0 !important;
}

section[data-book="ficha-catalografica"],
body > section[data-book="ficha-catalografica"],
body > .leitor-conteudo > section[data-book="ficha-catalografica"] {
  box-sizing: border-box;
  max-width: calc(900px - 3em);
  width: 100%;
  background: var(--cor-fundo-suave);
  border-radius: 10px;
  padding: 1.2em 1.5em;
  margin: 2em auto;
  font-size: 0.92em;
  color: var(--cor-texto-suave);
}

section[data-book="ficha-catalografica"] h2 {
  color: var(--cor-navy);
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0;
}

/* ==== Sumário / navegação principal ==== */
nav[role="doc-toc"] {
  padding-top: 1.2em;
  padding-bottom: 3em;
}

nav[role="doc-toc"] h2 {
  color: #fff;
  background: var(--cor-navy);
  border-radius: 16px;
  padding: 1.3em 1.5em 1.1em;
  margin: 0 0 1.4em;
  font-size: 1.7em;
  display: block;
}

nav[role="doc-toc"] h2::after {
  content: "";
  display: block;
  width: 3.2em;
  height: 0.22em;
  margin-top: 0.5em;
  border-radius: 2px;
  background: var(--cor-magenta);
}

nav[role="doc-toc"] ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

nav[role="doc-toc"] ol > li {
  border: none;
}

nav[role="doc-toc"] ol > li > a {
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1em 1.3em;
  background: var(--cor-fundo-lilas);
  border-radius: 12px;
  text-decoration: none;
  color: var(--cor-navy);
  font-weight: 700;
  transition: transform 0.15s ease;
}

nav[role="doc-toc"] .sumario-capitulo {
  flex: none;
  min-width: 6.4em;
  color: var(--cor-magenta-escuro);
  font-weight: 800;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

nav[role="doc-toc"] .sumario-titulo {
  flex: 1;
}

nav[role="doc-toc"] .sumario-pagina {
  flex: none;
  color: var(--cor-magenta);
  font-weight: 800;
}

nav[role="doc-toc"] ol > li > a:hover,
nav[role="doc-toc"] ol > li > a:focus-visible {
  transform: translateY(-1px);
  color: var(--cor-magenta-escuro);
}

/* Sumário interno de cada livro (item 4.3.6): mesmo tratamento visual
   do sumário da página da coleção (nav[role="doc-toc"]) - número em
   destaque, linha divisória entre itens, sem marcador padrão de lista. */
nav:has(> ol[data-book="sumario"]) h2 {
  color: var(--cor-navy);
  border-bottom: 3px solid var(--cor-magenta);
  padding-bottom: 0.3em;
  display: inline-block;
}

ol[data-book="sumario"] {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  counter-reset: sumario;
}

ol[data-book="sumario"] > li {
  counter-increment: sumario;
  border-bottom: 1px solid var(--cor-borda-suave);
}

ol[data-book="sumario"] > li > a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 0.2em;
  text-decoration: none;
  color: var(--cor-texto);
  font-weight: 600;
}

ol[data-book="sumario"] > li > a::before {
  content: counter(sumario, decimal-leading-zero);
  color: var(--cor-magenta-escuro);
  font-weight: 800;
  font-size: 0.9em;
  min-width: 1.6em;
  flex: none;
}

ol[data-book="sumario"] > li > a:hover {
  color: var(--cor-magenta-escuro);
}

/* ==== Títulos de estrutura ==== */
[data-book="titulo-unidade"] {
  color: var(--cor-magenta-escuro);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85em;
  margin: 1.6em 0 0.2em;
}

h2[data-book="titulo-capitulo"] {
  color: var(--cor-navy);
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.1em 0 0.3em;
  padding-bottom: 0.4em;
  border-bottom: 4px solid var(--cor-magenta);
}

/* Título "Apresentação da Coleção": mesma caixa escura usada na capa
   e no Sumário da página inicial - só o título fica na caixa, o texto
   corrido continua em fundo branco normal. */
section[data-book="apresentacao"] > h2 {
  color: #fff;
  background: var(--cor-navy);
  border-radius: 16px;
  padding: 1.3em 1.5em 1.1em;
  margin: 0.4em 0 1.4em;
  font-size: 1.6em;
  line-height: 1.25;
}

section[data-book="apresentacao"] > h2::after {
  content: "";
  display: block;
  width: 3.2em;
  height: 0.22em;
  margin-top: 0.5em;
  border-radius: 2px;
  background: var(--cor-magenta);
}

section[data-book="apresentacao"] > p:nth-last-child(2) {
  color: var(--cor-texto-suave);
}

section[data-book="apresentacao"] > p:last-child {
  display: inline-block;
  color: var(--cor-lilas-escuro);
  font-weight: 800;
  font-size: 1.1em;
  padding-bottom: 0.25em;
  border-bottom: 3px solid var(--cor-magenta);
}

h3 {
  color: var(--cor-navy);
  font-size: 1.3em;
  font-weight: 700;
  margin-top: 1.8em;
}

h3:has(+ p > em:only-child) {
  color: var(--cor-lilas);
  font-size: 1.3em;
  margin-top: 1em;
  margin-bottom: 0.1em;
}

h3 + p:has(> em:only-child) {
  display: inline-block;
  position: relative;
  color: var(--cor-magenta);
  font-weight: 400;
  font-size: 0.85em;
  padding-bottom: 0.2em;
  margin: 0 0 0.8em;
}

h3 + p:has(> em:only-child)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 12.5em;
  max-width: 100%;
  height: 0.3em;
  border-radius: 2px;
  background: var(--cor-magenta);
}

/* Título "Galeria de Recursos": identificado pela estrutura (h3 seguido
   de parágrafo de apresentação e da grade de cards), não por classe -
   reproduz a cor e o sublinhado curto do miolo impresso. */
h3:has(+ p + .galeria-recursos) {
  display: inline-block;
  position: relative;
  color: var(--cor-lilas-escuro);
  margin-top: 1.2em;
  padding-bottom: 0.55em;
}

h3:has(+ p + .galeria-recursos)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.2em;
  height: 0.22em;
  border-radius: 2px;
  background: var(--cor-magenta);
}

h4:not(.titulo-simples) {
  counter-increment: pergunta-guia;
  display: flex;
  align-items: center;
  gap: 0.9em;
  border: 1px solid var(--cor-roxo-vivo);
  border-radius: 999px;
  background: #fff;
  padding: 0.4em 1.3em 0.4em 0.4em;
  margin: 1.8em 0 1.1em;
  font-size: 1em;
  font-weight: 700;
  color: var(--cor-roxo-escuro);
}

h4:not(.titulo-simples)::before {
  content: counter(pergunta-guia);
  flex: none;
  width: 2em;
  height: 2em;
  background: var(--cor-roxo-vivo);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

h4.titulo-simples {
  display: block;
  color: var(--cor-navy);
  font-weight: 700;
  font-size: 1.05em;
  border-bottom: 1px solid var(--cor-borda-suave);
  padding-bottom: 0.4em;
  margin: 1.8em 0 1em;
}

a {
  color: var(--cor-magenta-escuro);
}

a:hover {
  color: var(--cor-navy);
}

/* ==== Paginação (item 4.3.12) ====
   Cada <p role="doc-pagebreak"> fica visível no corpo do texto, no
   ponto exato em que a página do impresso muda - é essa marcação "no
   rodapé" de cada trecho, e não só a semântica pra leitor de tela,
   que o edital exige (correspondência de paginação com o impresso).
   Sem position:sticky nem z-index: é só texto no fluxo normal, o que
   também elimina de vez qualquer risco de colisão com overflow:hidden
   dentro de caixa/quadro/tabela (todo o histórico de bugs anteriores
   vinha exatamente de tentar prender esse elemento no topo da tela).

   Além disso (não em vez disso) reader.js cria um indicador único e
   fixo (#leitor-pagina-atual, logo abaixo) que mostra a página atual
   sempre logo abaixo do header enquanto rola - conveniência a mais
   pedida pelo usuário, sem substituir a marcação no corpo do texto. */
p[role="doc-pagebreak"] {
  margin: 1.8em 0 0.6em;
  padding-top: 0.4em;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--cor-magenta);
  text-align: right;
  border-top: 2px solid var(--cor-borda-suave);
}

/* Indicador único da página atual (só existe se reader.js rodar - sem
   JavaScript, some da tela e só a marcação no corpo do texto, acima,
   continua valendo). Acima dos controles flutuantes de zoom/tela
   cheia (.leitor-flutuante, z-index:900 em reader.css) e abaixo da
   barra superior (1000) e de qualquer painel/overlay (sumário, busca,
   lightbox: 1100-1300). Sem fundo: um contorno claro (text-shadow)
   mantém "Página N" legível sobre qualquer conteúdo, sem cobrir nada
   ao rolar. */
#leitor-pagina-atual {
  position: fixed;
  top: var(--altura-barra, 3.2em);
  right: 4.4em;
  z-index: 950;
  margin: 0;
  padding: 0.3em 0;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--cor-magenta);
  text-shadow:
    0 0 4px #fff,
    0 0 4px #fff,
    0 0 6px #fff,
    0 0 6px #fff;
  pointer-events: none;
}

#leitor-pagina-atual:empty {
  display: none;
}

/* No modo PDF (visualizador StPageFlip) a própria página mostra sua
   numeração impressa - esse indicador é só do modo HTML e, com
   z-index (950) maior que o do visualizador de PDF (.leitor-pdf-
   container, 500 em reader.css), ficava vazando por cima dele em vez
   de ficar escondido atrás (bug reportado com print, "Página 11"
   sobreposta na capa do livro em PDF). */
body.leitor-modo-pdf-ativo #leitor-pagina-atual {
  display: none;
}

/* O texto "Página" normalmente fica só pra leitor de tela
   (.screen-reader-only) - aqui a marcação inteira mostra "Página N"
   visível mesmo (item 4.3.12), então desfaz a técnica só dentro do
   marcador. Não afeta .pagina-sem-conteudo, abaixo: o <p> em si já
   fica clipado, então os filhos continuam invisíveis independente
   desta regra. */
p[role="doc-pagebreak"] > .screen-reader-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0 0.35em 0 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border: 0;
}

/* Marcações de quebra de página que devem ficar SÓ acessíveis (leitor
   de tela), sem aparecer visualmente. Usada nas páginas em branco do
   impresso (item 4.3.10.8, sem nada pra referenciar) e também nos
   elementos pré-textuais (Apresentação, Sumário impresso) a pedido do
   usuário - lá a numeração forma uma fileira de linhas horizontais
   entre a dica de navegação e o conteúdo, sem ganho de leitura. A
   marcação de cada página continua no HTML (exigência de
   acessibilidade, item 4.3.12) - só a apresentação visual muda, com a
   mesma técnica de .screen-reader-only (clip, não display:none).
   Escopo: só o arquivo de elementos pré-textuais e as páginas
   realmente em branco - a marcação de abertura de cada CAPÍTULO
   continua visível normalmente, como o resto do livro. */
p.pagina-sem-conteudo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==== Figuras ==== */
figure {
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin: 1.6em 0;
  padding: 1.1em 1.3em;
  border: 1px solid var(--cor-borda-suave);
  border-radius: 14px;
  text-align: left;
}

figure img {
  max-width: 220px;
  width: 100%;
  flex: none;
  border-radius: 10px;
  margin: 0;
}

@media (max-width: 480px) {
  figure {
    flex-direction: column;
  }

  figure img {
    max-width: 100%;
  }
}

figcaption {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.85em;
  color: var(--cor-texto-suave);
}

figcaption > p:first-child {
  font-weight: 800;
  color: var(--cor-navy);
  font-size: 0.95em;
  margin: 0;
}

.descricao-formula {
  font-style: italic;
  color: var(--cor-texto-suave);
}

/* ==== Tabelas ==== */
.tabela-wrapper {
  border-radius: 10px;
  overflow: hidden;
  margin: 1.2em 0;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
  font-size: 0.82em;
}

@media (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

caption,
.tabela-titulo {
  text-align: left;
  font-weight: 700;
  color: var(--cor-navy);
  margin-bottom: 0.5em;
}

th,
td {
  border: 1px solid var(--cor-borda-suave);
  padding: 0.45em 0.7em;
  text-align: left;
}

thead th {
  background: var(--cor-lilas);
  color: #fff;
  border-color: var(--cor-lilas);
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

tbody tr:nth-child(even) {
  background: var(--cor-fundo-suave);
}

/* ==== Componentes editoriais recorrentes (quadros, caixas de destaque, atividades) ==== */

.rotulo-caixa {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78em;
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
  color: var(--cor-magenta-escuro);
}

.quadro,
.caixa {
  border: none;
  border-left: 5px solid var(--cor-magenta);
  background: var(--cor-fundo-suave);
  border-radius: 4px 10px 10px 4px;
  padding: 1.1em 1.3em;
  margin: 1.4em 0;
}

.caixa:not([class*="caixa-"]) {
  position: relative;
  border: none;
  border-radius: 14px;
  background: var(--cor-fundo-lavanda, #f4eefc);
  padding-left: 1.8em;
}

.caixa:not([class*="caixa-"])::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.6em;
  bottom: 0.6em;
  width: 0.45em;
  background: var(--cor-roxo-vivo, var(--cor-magenta));
  border-radius: 999px;
}

.caixa:not([class*="caixa-"]) > .rotulo-caixa {
  color: var(--cor-roxo-vivo, var(--cor-magenta));
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.caixa .caixa {
  background: #fff;
  border-left-color: var(--cor-navy);
  margin: 1em 0;
}

.caixa-alerta {
  border-left-color: var(--cor-alerta);
  background: var(--cor-fundo-alerta);
}

.caixa-alerta .rotulo-caixa {
  color: var(--cor-alerta);
}

.caixa-glossario {
  border: 1px solid var(--cor-roxo-escuro, var(--cor-navy));
  background: #fff;
  border-radius: 14px;
  padding: 1.1em 1.3em;
  margin: 1.4em 0;
  box-shadow: 0 4px 16px rgba(20, 10, 40, 0.1);
}

.caixa-glossario dt {
  display: inline;
  font-weight: 800;
  color: var(--cor-navy);
}

.caixa-glossario dt::after {
  content: ": ";
}

.caixa-glossario dd {
  display: inline;
  margin: 0;
}

.caixa-glossario dt .rotulo-caixa {
  display: block;
  color: var(--cor-roxo-escuro, var(--cor-navy));
}

.caixa-dica {
  border: 1px solid var(--cor-lilas);
  background: #fff;
  border-radius: 12px;
  padding: 1em 1.3em;
  margin: 1.4em 0;
}

.caixa-dica > .rotulo-caixa {
  color: var(--cor-lilas);
  text-transform: none;
  letter-spacing: normal;
  font-size: 1em;
  font-weight: 800;
  margin: 0 0 0.4em;
}

.caixa-dica > .rotulo-caixa::after {
  content: ":";
}

.caixa-dica > *:last-child {
  margin-bottom: 0;
}

.caixa-dica p {
  margin: 0 0 0.4em;
}

.caixa-dica ul,
.caixa-dica ol {
  margin: 0.4em 0 0;
  padding-left: 1.3em;
}

.caixa-dica li {
  margin: 0.15em 0;
}

.caixa-biografia {
  border: 1px solid var(--cor-magenta);
  background: #fff;
  border-radius: 14px;
  padding: 0;
  margin: 1.8em 0;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(20, 10, 40, 0.1);
}

.caixa-biografia > .rotulo-caixa {
  margin: 0;
  padding: 0.75em 1.3em;
  background: var(--cor-magenta);
  color: #fff;
  font-size: 0.82em;
}

.caixa-biografia > *:not(.rotulo-caixa) {
  margin-left: 1.3em;
  margin-right: 1.3em;
}

.caixa-biografia > *:last-child {
  margin-bottom: 1.2em;
}

.caixa-biografia::after {
  content: "";
  display: block;
  clear: both;
}

.caixa-biografia figure {
  display: block;
  border: none;
  padding: 0;
  float: left;
  width: 140px;
  margin: 1.1em 1.2em 0.8em 0;
}

.caixa-biografia figure img {
  border-radius: 12px;
  width: 140px;
  height: 140px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.caixa-biografia figcaption {
  text-align: center;
  /* A legenda fica numa coluna estreita (140px, largura da foto) - um
     link/domínio sem espaço (ex.: "premiorochedoperiodismo.com") não
     tem onde quebrar e "estourava" pra fora da coluna, invadindo o
     texto ao lado (bug reportado com print - visual de sobreposição
     de texto). */
  overflow-wrap: break-word;
  word-break: break-word;
}

.caixa-atividade {
  border: 1px solid var(--cor-magenta);
  background: #fff;
  border-radius: 14px;
  padding: 0;
  margin: 1.8em 0;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(20, 10, 40, 0.1);
}

.caixa-atividade > .rotulo-caixa {
  display: block;
  margin: 0;
  background: var(--cor-magenta);
  color: #fff;
  font-size: 0.82em;
  padding: 0.75em 1.3em;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.caixa-atividade > *:not(.rotulo-caixa) {
  margin-left: 1.3em;
  margin-right: 1.3em;
}

.caixa-atividade > h3:first-of-type {
  display: inline-block;
  position: relative;
  color: var(--cor-roxo-escuro, var(--cor-navy));
  margin-top: 0.9em;
  padding-bottom: 0.4em;
}

.caixa-atividade > h3:first-of-type::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.6em;
  height: 0.18em;
  border-radius: 2px;
  background: var(--cor-magenta);
}

.caixa-atividade > *:last-child {
  margin-bottom: 1.1em;
}

.caixa-pratica {
  border: 1px solid var(--cor-magenta);
  border-radius: 14px;
  background: #fff;
  padding: 0;
  margin: 1.8em 0;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(20, 10, 40, 0.1);
}

.caixa-pratica > .rotulo-caixa {
  margin: 0;
  padding: 0.75em 1.3em;
  background: var(--cor-magenta);
  color: #fff;
  font-size: 0.82em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}

.caixa-pratica > .rotulo-caixa .rotulo-caixa-extra {
  font-weight: 800;
}

.caixa-pratica > *:not(.rotulo-caixa) {
  margin-left: 1.3em;
  margin-right: 1.3em;
}

.caixa-pratica > h3:first-of-type {
  margin-top: 0.9em;
}

.caixa-pratica > *:last-child {
  margin-bottom: 1.1em;
}

.caixa-pratica ol,
.caixa-pratica ul {
  list-style: none;
  padding: 0;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.caixa-pratica ol {
  counter-reset: passo-pratica;
}

.caixa-pratica ol > li {
  counter-increment: passo-pratica;
}

.caixa-pratica ol > li,
.caixa-pratica ul > li {
  position: relative;
  padding-left: 2.8em;
  margin: 0.9em 0;
  min-height: 1.9em;
}

.caixa-pratica ol > li::before {
  content: counter(passo-pratica);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9em;
  height: 1.9em;
  background: var(--cor-roxo-vivo, var(--cor-magenta));
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caixa-pratica ul > li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9em;
  height: 1.9em;
  background: var(--cor-roxo-vivo, var(--cor-magenta));
  color: #fff;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caixa-pratica .caixa {
  background: var(--cor-fundo-lavanda, #f4eefc);
  border: none;
  border-radius: 10px;
  padding: 0.9em 1.1em;
  margin: 0.9em 0;
}

.caixa-pratica .caixa .rotulo-caixa {
  color: var(--cor-roxo-vivo, var(--cor-magenta));
}

.caixa-inversa {
  background: var(--cor-roxo-escuro, var(--cor-navy));
  color: #fff;
  border-radius: 14px;
  padding: 1.3em 1.5em;
  margin: 1.8em 0;
}

.caixa-inversa > .rotulo-caixa {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.3em;
}

.caixa-inversa h3 {
  color: #fff;
  margin-top: 0.1em;
}

.caixa-inversa a {
  color: #fff;
}

.caixa-reflexao,
.caixa-turma {
  border: none;
  border-radius: 14px;
  padding: 1.2em 1.4em;
  margin: 1.1em 0;
  box-shadow: 0 3px 14px rgba(20, 10, 40, 0.1);
}

.caixa-reflexao {
  background: var(--cor-fundo-lavanda);
}

.caixa-reflexao > .rotulo-caixa {
  color: var(--cor-roxo-vivo);
}

.caixa-reflexao ol {
  list-style: none;
  counter-reset: reflexao;
  margin: 0.9em 0 0;
  padding: 0;
}

.caixa-reflexao ol > li {
  counter-increment: reflexao;
  position: relative;
  padding-left: 2.7em;
  margin: 1em 0;
  min-height: 1.8em;
}

.caixa-reflexao ol > li::before {
  content: counter(reflexao);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  height: 1.8em;
  background: var(--cor-roxo-vivo);
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caixa-turma {
  background: var(--cor-fundo-alerta);
}

.caixa-turma > .rotulo-caixa {
  color: var(--cor-laranja);
}

.caixa-turma ul {
  list-style: none;
  margin: 0.9em 0 0;
  padding: 0;
}

.caixa-turma ul > li {
  position: relative;
  padding-left: 2.7em;
  margin: 1em 0;
  min-height: 1.8em;
}

.caixa-turma ul > li::before {
  content: "\203a";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  height: 1.8em;
  background: var(--cor-laranja);
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lista-papeis {
  display: flex;
  flex-direction: column;
  margin: 1.6em 0;
}

.lista-papeis dt {
  border: 1px solid var(--cor-borda-suave);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #fff;
  color: var(--cor-roxo-escuro);
  padding: 0.7em 1.1em 0;
  margin: 0;
  font-weight: 800;
}

.lista-papeis dd {
  border: 1px solid var(--cor-borda-suave);
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #fff;
  padding: 0 1.1em 0.9em;
  margin: 0 0 0.9em;
  box-shadow: 0 2px 8px rgba(20, 10, 40, 0.06);
}

.lista-papeis dd:last-of-type {
  margin-bottom: 0;
}

.caixa-fechamento {
  background: var(--cor-fundo-lavanda, #f4eefc);
  border: 1px solid var(--cor-borda-suave);
  border-radius: 12px;
  padding: 1em 1.3em;
  margin: 1.6em 0;
  font-size: 0.88em;
}

.caixa-fechamento h3 {
  color: var(--cor-roxo-escuro, var(--cor-navy));
  font-size: 1.2em;
  margin: 0 0 0.5em;
}

.caixa-fechamento p {
  margin: 0.6em 0;
}

.caixa-fechamento + h3 {
  text-align: center;
  color: var(--cor-magenta);
  margin-top: 1.6em;
}

.fonte {
  font-size: 0.85em;
  color: var(--cor-texto-suave);
  margin-top: 0.3em;
}

.descricao-acessibilidade {
  font-size: 0.85em;
  color: var(--cor-texto-suave);
  margin: 0.5em 0 1.1em;
}

/* ==== Glossário ==== */
dl.caixa-glossario dt {
  font-weight: 800;
  color: var(--cor-navy);
  margin-top: 0.8em;
}

dl.caixa-glossario dt:first-child {
  margin-top: 0;
}

dl.caixa-glossario dd {
  margin-left: 0;
  margin-bottom: 0.6em;
}

/* ==== Cards de mídia (podcast, vídeo, infográfico) ==== */
.galeria-recursos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
  margin: 1.6em 0;
}

/* Abaixo de 640px (a maioria dos celulares, não só os bem pequenos -
   um iPhone padrão tem 390px, um Pro Max 430px) empilha 1 por linha em
   vez de 2. Motivo: o QR code ocupa 68% da largura do cartão (regra
   .cartao-recurso-qr abaixo) - em 2 colunas num celular comum, cada QR
   fica com uns 110-115px, pequeno demais pra leitura confiável pela
   câmera a uma distância normal. Empilhado, o QR quase dobra de
   tamanho (~220-240px), ficando bem mais fácil de escanear. */
@media (max-width: 640px) {
  .galeria-recursos {
    grid-template-columns: 1fr;
  }
}

.galeria-recursos .cartao {
  border: 1px solid var(--cor-borda-suave);
  border-radius: 12px;
  padding: 1.1em 1.3em;
  flex: 1 1 260px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 0, 34, 0.08);
}

.cartao-etiqueta {
  display: inline-block;
  font-weight: 800;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--cor-magenta-escuro);
  padding: 0.25em 0.7em;
  border-radius: 999px;
  margin-bottom: 0.6em;
}

/* Comparação simples (ex.: "Aluno A" / "Aluno B") dentro de uma
   Atividade Ctrl+Ação: cartão lavanda com rótulo em texto, sem pílula
   magenta (que é só para a Galeria de Recursos). */
.caixa-pratica .galeria-recursos {
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.caixa-pratica .galeria-recursos .cartao {
  border: none;
  background: var(--cor-fundo-lavanda, #f4eefc);
}

.caixa-pratica .cartao-etiqueta {
  display: block;
  color: var(--cor-roxo-vivo, var(--cor-magenta));
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 1.05em;
  text-transform: none;
  letter-spacing: normal;
}

.pergunta-final-titulo {
  color: var(--cor-roxo-vivo, var(--cor-magenta));
  font-weight: 800;
  font-size: 1.05em;
  margin: 1.2em 0 0.6em;
}

.pergunta-final {
  display: flex;
  align-items: flex-start;
  gap: 0.9em;
}

.pergunta-final-badge {
  flex: none;
  width: 1.8em;
  height: 1.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-roxo-vivo, var(--cor-magenta));
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
}

.pergunta-final p {
  margin: 0;
}

.galeria-recursos .cartao h4 {
  margin-top: 0;
}

.galeria-recursos .cartao img {
  border-radius: 8px;
  border: 1px solid var(--cor-borda-suave);
  margin-top: 0.6em;
}

.galeria-recursos audio,
.galeria-recursos video {
  width: 100%;
  border-radius: 8px;
  margin: 0.6em 0;
  background: var(--cor-navy);
}

.galeria-recursos details {
  margin-top: 0.8em;
  font-size: 0.92em;
}

.galeria-recursos summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cor-magenta-escuro);
  padding: 0.3em 0;
}

/* ==== Cards de recurso digital com QR code (Galeria de Recursos) ====
   Cada card leva, por QR code ou clique direto, ao vídeo/podcast/
   infográfico daquele capítulo (hospedados fora do pacote HTML - por
   isso são links reais, não elementos <video>/<audio> embutidos). */
.cartao-recurso {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--cor-borda-suave);
  border-radius: 12px;
  padding: 1.4em 0.5em 0.8em;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

/* Ordem visual dentro do card, igual ao impresso: selo, QR, URL e,
   por último, o nome do recurso encostado no rodapé (margin-top: auto
   empurra o título para baixo, mesmo com títulos de tamanhos
   diferentes - cards da mesma galeria ficam com a mesma altura). */
.cartao-recurso .cartao-etiqueta { order: 1; }
.cartao-recurso-qr { order: 2; }
.cartao-recurso-url { order: 3; }
.cartao-recurso .cartao-recurso-instrucao { order: 5; }

.cartao-recurso:has(.cartao-etiqueta-video) {
  border-color: var(--cor-borda-azul);
}

.cartao-recurso:has(.cartao-etiqueta-podcast) {
  border-color: var(--cor-borda-magenta);
}

.cartao-recurso:has(.cartao-etiqueta-infografico) {
  border-color: var(--cor-borda-roxo);
}

.cartao-recurso:has(.cartao-etiqueta-dinamica) {
  border-color: var(--cor-borda-teal);
}

/* Cada card fica dentro de um bloco flex (o card em si +, logo abaixo,
   a alternativa em texto do QR Code - transcrição ou descrição -,
   exigida pelo item 7.7.4 mesmo com o conteúdo acessível só por QR). */
.cartao-recurso-bloco {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

/* Ordem visual fixa na Galeria de Recursos, igual ao impresso:
   Dinâmica, Infográfico, Podcast, Vídeo. */
.cartao-recurso-bloco:has(.cartao-etiqueta-dinamica) { order: 1; }
.cartao-recurso-bloco:has(.cartao-etiqueta-infografico) { order: 2; }
.cartao-recurso-bloco:has(.cartao-etiqueta-podcast) { order: 3; }
.cartao-recurso-bloco:has(.cartao-etiqueta-video) { order: 4; }

.cartao-recurso-texto {
  margin-top: 0.7em;
  font-size: 0.85em;
}

.cartao-recurso-texto summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--cor-magenta-escuro);
  padding: 0.3em 0;
}

.cartao-recurso-nota {
  margin: 0.7em 0 0;
  font-size: 0.85em;
  color: var(--cor-texto-suave);
}

.cartao-recurso:hover,
.cartao-recurso:focus-visible {
  transform: translateY(-2px);
}

.cartao-recurso:focus-visible {
  outline: 3px solid var(--cor-magenta);
  outline-offset: 2px;
}

.cartao-recurso .cartao-etiqueta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  align-self: stretch;
  width: auto;
  font-size: 0.72em;
  padding: 0.6em 0.8em;
  border: none;
  border-radius: 12px 12px 0 0;
  margin: -1.95em -0.7em 1.1em -0.7em;
  background: var(--cor-selo-magenta);
  color: var(--cor-texto);
}

.cartao-recurso .cartao-etiqueta svg {
  width: 1.1em;
  height: 1.1em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.cartao-recurso .cartao-etiqueta-podcast {
  background: var(--cor-selo-magenta);
}

.cartao-recurso .cartao-etiqueta-video {
  background: var(--cor-selo-azul);
}

.cartao-recurso .cartao-etiqueta-infografico {
  background: var(--cor-selo-roxo);
}

.cartao-recurso .cartao-etiqueta-dinamica {
  background: var(--cor-selo-teal);
}

.cartao-recurso h4 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  counter-increment: none;
  border: none;
  background: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  margin: auto 0 0;
  padding-top: 0.5em;
  min-height: 2.7em;
  color: var(--cor-navy);
  font-size: 0.76em;
  line-height: 1.2;
  order: 4;
}

.cartao-recurso h4::before {
  content: none;
}

.cartao-recurso-qr {
  display: block;
  width: 68%;
  margin: 0.4em auto 0;
}

.cartao-recurso-qr img {
  display: block;
  width: 100%;
  height: auto;
}

.cartao-recurso-instrucao {
  margin: 0.8em 0 0;
  text-align: center;
  font-size: 0.85em;
  color: var(--cor-texto-suave);
}

.cartao-recurso-url {
  margin: 0.6em 0 0;
  text-align: center;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--cor-magenta-escuro);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  word-break: break-word;
}

.cartao-recurso:has(.cartao-etiqueta-video) .cartao-recurso-url {
  color: var(--cor-azul);
}

.cartao-recurso:has(.cartao-etiqueta-podcast) .cartao-recurso-url {
  color: var(--cor-magenta-escuro);
}

.cartao-recurso:has(.cartao-etiqueta-infografico) .cartao-recurso-url {
  color: var(--cor-lilas-escuro);
}

.cartao-recurso:has(.cartao-etiqueta-dinamica) .cartao-recurso-url {
  color: var(--cor-teal);
}

/* Atividade Desplugada + QR do Caderno de Atividades lado a lado */
.bloco-atividade-com-qrcode {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  align-items: stretch;
  margin: 1.6em 0;
}

.bloco-atividade-com-qrcode > .caixa-pratica,
.bloco-atividade-com-qrcode > .caixa-atividade {
  flex: 1 1 320px;
  margin: 0;
}

.cartao-atividades {
  flex: 1 1 200px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1.5px solid var(--cor-borda-magenta);
  border-radius: 16px;
  overflow: hidden;
  padding: 1.8em 0.5em 0.68em;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

.cartao-atividades:hover,
.cartao-atividades:focus-visible {
  transform: translateY(-2px);
}

.cartao-atividades:focus-visible {
  outline: 3px solid var(--cor-magenta);
  outline-offset: 2px;
}

.cartao-atividades-titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  font-weight: 800;
  font-size: 0.6em;
  padding: 0.55em 1em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 15px 15px 0 0;
  margin: -3.5em -1.7em 1.6em -1.7em;
  background: var(--cor-selo-magenta);
  color: var(--cor-texto);
}

/* Variante usada quando o card fica dentro do próprio texto da
   atividade (ao lado do título), em vez de numa caixa separada -
   flutua à direita e o texto contorna. */
.cartao-atividades-flutuante {
  float: right;
  width: 45%;
  max-width: 172px;
  margin: 0 0 1em 1.3em;
}

@media (max-width: 560px) {
  .cartao-atividades-flutuante {
    float: none;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 1.3em;
  }
}

@media (max-width: 480px) {
  .cartao-atividades {
    max-width: none;
  }
}


.recurso-pendente {
  border: 1px dashed #c9a400;
  background: var(--cor-fundo-alerta);
  padding: 1.1em 1.3em;
}

/* ==== Créditos e lista de URLs (pós-textuais) ==== */
ul[data-book="creditos"] {
  padding-left: 1.2em;
  font-size: 0.92em;
  color: var(--cor-texto-suave);
}

ul[data-book="creditos"] li {
  margin-bottom: 0.4em;
}