/* -----------------------------------------------------------------
   Identidade ARTE SOLAR DO AGRESTE — tirada das artes do Ivonaldo.
   NÃO é a identidade do Sopros do Jardim: daquele projeto vieram só
   as regras de governo/marca (régua PNAB) e a CSP estrita.
   O céu é sempre amarelo — regra do cliente.

   Tipografia: nas artes, o título é sans condensada pesada e o
   "Biblioteca Encantada" é serif display. Como a CSP proíbe CDN, o
   stack abaixo é só um substituto de sistema. Ao fechar a fonte
   definitiva, hospedar o .woff2 em assets/fonts/ e trocar aqui.
   ----------------------------------------------------------------- */
:root{
    --amarelo:#F2A81D; --amarelo-claro:#FBD46A; --preto:#141008;
    --marrom:#3A2611; --dourado:#C98A16; --papel:#FDF6E3;
    --fonte-titulo:'Helvetica Neue',Helvetica,Arial,sans-serif;
    --fonte-texto:'Helvetica Neue',Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  body{
    margin:0; background:var(--preto);
    background-image:radial-gradient(ellipse at 50% 0%, #2A1D0B 0%, #141008 70%);
    color:var(--papel); font-family:var(--fonte-texto);
    min-height:100dvh; display:flex; flex-direction:column; align-items:center;
    padding:12px; overscroll-behavior:none;
  }
  header{text-align:center;padding:6px 0 12px}
  header h1{margin:0;font-size:clamp(18px,5vw,28px);color:var(--amarelo);letter-spacing:.5px;
    font-family:var(--fonte-titulo);font-weight:700;text-transform:uppercase}
  header p{margin:2px 0 0;font-size:12px;color:var(--dourado);text-transform:uppercase;letter-spacing:2px}

  /* trocador de livro */
  nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
  nav button{
    background:transparent;border:1px solid var(--dourado);color:var(--amarelo-claro);
    padding:7px 12px;border-radius:20px;font-size:12px;cursor:pointer;font-family:inherit;
  }
  nav button[aria-current="true"]{background:var(--amarelo);color:var(--preto);border-color:var(--amarelo);font-weight:bold}

  #palco{width:100%;max-width:1000px;flex:1;display:flex;align-items:center;justify-content:center}
  #livro{margin:0 auto;touch-action:pan-y}
  /* cada folha */
  .pagina{background:var(--papel);overflow:hidden}
  .pagina img{width:100%;height:100%;display:block;object-fit:contain;background:var(--papel)}
  .capa{background:var(--amarelo)}

  /* controles */
  .controles{display:flex;align-items:center;gap:14px;padding:14px 0 6px}
  .controles button{
    background:var(--amarelo);border:0;color:var(--preto);width:44px;height:44px;border-radius:50%;
    font-size:20px;cursor:pointer;display:grid;place-items:center;
  }
  .controles button:disabled{opacity:.35;cursor:default}
  #contador{font-size:13px;color:var(--dourado);min-width:90px;text-align:center}
  .barra-acoes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding-bottom:18px}
  .barra-acoes a{
    color:var(--amarelo-claro);font-size:13px;text-decoration:none;border-bottom:1px dotted var(--dourado);
  }
  #carregando{color:var(--dourado);font-size:14px;padding:40px}

/* ---------------------------------------------------------------
   Régua de patrocinadores (exigência do edital PNAB).
   Largura/altura explícitos no <img> + max-width aqui: a caixa
   nunca fica com largura 0, então a imagem sempre carrega.
   --------------------------------------------------------------- */
.patrocinio{
  width:100%; max-width:1000px; margin:10px auto 24px; padding:18px 14px 6px;
  border-top:1px solid rgba(201,138,22,.35); text-align:center;
}
.patrocinio-titulo{
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--dourado); font-weight:normal; margin:0 0 12px;
}
.regua{
  width:100%; height:auto; max-width:900px; display:block; margin:0 auto;
  background:#fff; border-radius:4px; padding:10px 12px;
}
.patrocinio-nota{
  font-size:11px; color:#9C7B3C; margin:10px auto 0; max-width:560px; line-height:1.5;
}

/* ============================================================
   ENCAIXE NA TELA — tudo dentro do viewport, sem rolagem.
   O leitor.js dimensiona o livro sozinho; aqui só compactamos o
   entorno (cabeçalho, controles e régua) para o conjunto caber.
   Nenhuma linha de leitor.js é tocada.
   ============================================================ */
html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  padding: 6px 10px;
  gap: 0;
}

header { padding: 2px 0 6px; }
header h1 { font-size: clamp(15px, 3.4vw, 21px); }
header p  { font-size: 10px; letter-spacing: 1.6px; }

nav { margin-bottom: 6px; }
nav button { padding: 5px 10px; font-size: 11px; }

.controles { padding: 8px 0 2px; gap: 12px; }
.controles button { width: 38px; height: 38px; font-size: 18px; }
#contador { font-size: 12px; }

.barra-acoes { padding-bottom: 6px; gap: 14px; }
.barra-acoes a { font-size: 12px; }

/* régua compacta: continua íntegra e sem lazy, só ocupa menos altura */
.patrocinio {
  margin: 2px auto 6px;
  padding: 8px 12px 2px;
}
.patrocinio-titulo { margin-bottom: 6px; font-size: 9px; letter-spacing: 2px; }
.regua { max-width: min(620px, 92%); padding: 6px 10px; }
.patrocinio-nota { margin-top: 5px; font-size: 9.5px; line-height: 1.35; }

@media (max-height: 820px) {
  .patrocinio-nota { display: none; }
}

@media (max-height: 700px) {
  header p { display: none; }
  .patrocinio-titulo { display: none; }
  .regua { max-width: min(520px, 88%); }
}

/* deslocamento suave: capa fechada fica centrada; ao abrir, o livro
   caminha para revelar as duas páginas */
#palco {
  --desloca-livro: 0px;
}

/* (a transição vive na regra condicional .anima-desloca, mais abaixo) */

/* encaixe vertical: reduz o palco só o necessário para a régua caber */
#palco {
  --escala-livro: 1;
}

#palco #livro {
  transform: translateX(var(--desloca-livro)) scale(var(--escala-livro));
  transform-origin: center top;
}

/* nav em uma linha nas telas estreitas, para não roubar altura */
@media (max-height: 700px) {
  nav { gap: 5px; }
  nav button { padding: 4px 8px; font-size: 10px; }
  .controles { padding: 5px 0 0; }
  .controles button { width: 34px; height: 34px; font-size: 16px; }
}


/* ------------------------------------------------------------
   A régua institucional comum ocupa o rodapé do leitor. O palco
   do flipbook fica com todo o espaço restante acima dela, dentro
   de 100dvh e sem rolagem.
   ------------------------------------------------------------ */
body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

#palco {
  flex: 1 1 auto;
  min-height: 0;
}

.regua-institucional {
  margin-top: auto;
}


/* ------------------------------------------------------------
   Régua full-bleed no leitor: o body tem padding lateral, mas a
   faixa institucional precisa encostar nas bordas como nas telas
   1 e 2. Compensamos o padding com margens negativas.
   ------------------------------------------------------------ */
.regua-institucional {
  /* o body é flex column com align-items:center, então a faixa não
     estica sozinha: forçamos o stretch e anulamos o padding lateral
     para ela encostar nas bordas, como nas telas 1 e 2. */
  align-self: stretch;
  width: auto;
  margin-inline: calc(var(--pad-lateral, 10px) * -1);
  margin-bottom: calc(var(--pad-vertical, 6px) * -1);
}

body {
  --pad-lateral: 10px;
  --pad-vertical: 6px;
  padding: var(--pad-vertical) var(--pad-lateral);
}

/* ============================================================
   MARCA DO LEITOR — mesma identidade das telas 1 e 2
   ============================================================ */
.leitor-marca { text-align: center; padding: 4px 0 8px; }

.leitor-marca__titulo {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  line-height: 0.92;
}

.leitor-marca__biblioteca {
  color: var(--amarelo);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 3.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.leitor-marca__encantada {
  margin-top: -0.12em;
  color: var(--amarelo-claro);
  font-family: 'Snell Roundhand', 'Brush Script MT', 'Segoe Script', cursive;
  font-size: clamp(21px, 4.4vw, 34px);
  font-weight: 700;
}

.leitor-marca__selo {
  margin: 4px 0 0;
  color: var(--dourado);
  font-size: clamp(8px, 1.4vw, 10px);
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

/* ============================================================
   ESTANTE COM MINIATURAS
   Desktop: coluna lateral ao lado do livro.
   Mobile: faixa horizontal compacta acima do livro.
   ============================================================ */
#estante { gap: 10px; }

#estante button.mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(253, 246, 227, 0.05);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

#estante button.mini:hover,
#estante button.mini:focus-visible {
  border-color: var(--dourado);
  background: rgba(242, 168, 29, 0.12);
  transform: translateY(-2px);
}

#estante button.mini[aria-current="true"] {
  border-color: var(--amarelo);
  background: rgba(242, 168, 29, 0.2);
}

.mini__capa {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.mini__titulo {
  color: var(--amarelo-claro);
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
}

/* --- desktop: coluna lateral --- */
@media (min-width: 60rem) {
  /* a coluna é fixa e fora do fluxo: o corpo continua flex, senão
     o livro sai do centro e os controles se soltam do rodapé */
  /* à direita, do mesmo lado da navegação de volta e do botão de
     baixar: as ações do leitor ficam todas numa borda só, e o olho
     entra pela esquerda direto no livro */
  /* o corpo abre uma faixa à esquerda do tamanho da coluna: sem isso
     a seta de voltar entrava embaixo das miniaturas em 1024 e 960 */
  body {
    --pad-coluna: calc(clamp(78px, 8.2vw, 108px) + clamp(20px, 3.2vw, 52px));
    padding-left: var(--pad-coluna);
  }

  /* a faixa reservada não vale para quem atravessa a tela inteira:
     régua e rodapé continuam encostando na borda direita */
  .regua-institucional { margin-left: calc(var(--pad-coluna) * -1); }

  /* o rodapé atravessa a tela como a régua: o corpo é flex centrado,
     então sem o stretch ele encolheria para o meio */
  /* O rodapé atravessa a tela inteira. Parando antes da borda
     direita, os botões eram empurrados para dentro e passavam por
     cima da linha do crédito, que é centrada na página. */
  .rodape-leitor {
    align-self: stretch;
    width: auto;
    margin-left: calc(var(--pad-coluna) * -1);
    margin-right: calc(var(--pad-lateral, 10px) * -1);
    padding-left: clamp(14px, 2vw, 26px);
    padding-right: calc(clamp(14px, 2vw, 26px) + 62px);
  }

  /* de volta à esquerda, onde a coluna de capas sempre esteve */
  #estante {
    position: fixed;
    top: 50%;
    left: clamp(10px, 1.6vw, 26px);
    right: auto;
    z-index: 20;
    flex-direction: column;
    width: clamp(78px, 8.2vw, 108px);
    translate: 0 -50%;
  }

  #estante button.mini { width: 100%; }
  .mini__titulo { font-size: clamp(9px, 0.72vw, 11px); }

  /* a coluna é overlay: não empurra o palco, que segue centrado */
  #palco { padding-left: 0; }
}

/* --- mobile: faixa compacta, miniaturas menores --- */
@media (max-width: 59.99rem) {
  #estante { gap: 7px; }
  #estante button.mini { flex-direction: row; gap: 6px; padding: 4px 7px 4px 4px; }
  .mini__capa { width: 20px; }
  .mini__titulo { font-size: 10px; text-align: left; }
}

/* setas de navegação sempre alcançáveis no mobile */
@media (max-width: 59.99rem) {
  .controles { order: -1; padding: 2px 0 6px; }
}


/* a marca do leitor não pode ir a caixa alta: "Encantada" é script
   e em uppercase perde o desenho da fonte */
.leitor-marca__encantada {
  text-transform: none;
  letter-spacing: 0;
}

.leitor-marca__biblioteca {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ============================================================
   AÇÕES E RODAPÉ DO LEITOR
   "Baixar o PDF" fica junto do livro; "Deixe seu causo" vai para
   a direita do rodapé, ao lado do crédito.
   ============================================================ */
.barra-acoes { padding-bottom: 4px; }

.rodape-leitor {
  /* o palco do livro tem altura fixada por script e transborda um
     pouco; sem isto o bloco do StPageFlip ficava por cima e comia
     o clique do "Deixe seu causo" */
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 5px clamp(10px, 2.4vw, 26px);
  /* depois do shorthand, senão ele apaga a folga.
     A linha separadora fica no topo desta faixa: com 5px os botões
     encostavam nela, enquanto sobravam 25 a 33px até a régua. O
     respiro de cima acompanha o de baixo. */
  padding-top: calc(var(--folga-credito, 0.8rem) * 0.8);
  padding-bottom: var(--folga-credito, 0.8rem);
  border-top: 1px solid rgba(201, 138, 22, 0.22);
}

.rodape-leitor__credito {
  margin: 0;
  color: rgba(201, 138, 22, 0.85);
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing: 0.06em;
}

.rodape-leitor__credito strong { color: var(--amarelo); font-weight: 700; }

.rodape-leitor__causo {
  order: 2;
  color: var(--amarelo-claro);
  font-size: clamp(11px, 1.35vw, 13px);
  text-decoration: none;
  border-bottom: 1px dotted var(--dourado);
}

/* O crédito fica no centro da página, como nas outras duas. Ele sai
   do fluxo do flex para centralizar na LARGURA DA TELA, e não no
   espaço que sobra ao lado do "Deixe seu causo" — que jogaria a
   linha para a direita. */
.rodape-leitor__credito {
  position: absolute;
  left: 50%;
  /* encostado na borda interna de baixo: assim a distância até a
     régua é exatamente o padding-bottom, a mesma folga das outras
     duas páginas. Centralizado na linha, o crédito ficava ~8px mais
     alto, porque os botões ao lado são mais altos que ele. */
  bottom: var(--folga-credito, 0.8rem);
  transform: translateX(-50%);
}

.rodape-leitor { position: relative; }

.rodape-leitor__causo { order: 1; }

@media (max-width: 40rem) {
  /* no celular o crédito desce e centraliza, logo acima da régua */
  .rodape-leitor {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    /* padding abreviado zerava a folga comum definida acima.
       O de cima acompanha o de baixo: com 4px os botões encostavam
       na linha separadora enquanto sobravam ~25px até a régua. */
    padding: calc(var(--folga-credito, 0.8rem) * 0.92) 10px var(--folga-credito, 0.8rem);
  }

  /* em bloco de largura inteira a borda inferior atravessaria a
     tela: o sublinhado passa a acompanhar o texto */
  .rodape-leitor__causo {
    order: 1;
    flex: 0 0 auto;      /* botão do tamanho do texto, não da tela */
    padding: 0.3em 0.9em;
    font-size: 10.5px;
  }

  /* no celular as duas linhas se empilham: o crédito volta ao fluxo,
     senão o absolute o tiraria da pilha e ele cobriria o causo */
  .rodape-leitor__credito {
    position: static;
    order: 2;
    flex: 0 0 100%;
    transform: none;
    font-size: 8.5px;
    text-align: center;
  }
}

/* setas no topo, também no desktop */
.controles { order: -1; }

/* ============================================================
   TRANSIÇÃO ENCANTADA + NAVEGAÇÃO DE VOLTA
   ============================================================ */
.encanto-canvas {
  position: fixed;
  z-index: 99999;
  inset: 0;
  pointer-events: none;
}

.encanto-entrada { animation: encanto-chega 520ms ease-out both; }

@keyframes encanto-chega {
  from { opacity: 0; filter: brightness(1.35); }
  to   { opacity: 1; filter: none; }
}

.voltar-nav {
  position: absolute;
  top: clamp(8px, 1.6dvh, 16px);
  left: clamp(8px, 1.8vw, 20px);
  z-index: 30;
  display: flex;
  gap: clamp(6px, 1.2vw, 12px);
}

.voltar-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: clamp(3px, 0.7dvh, 6px) clamp(8px, 1.4vw, 14px);
  border: 1px solid rgba(201, 138, 22, 0.6);
  border-radius: 999px;
  background: rgba(20, 16, 8, 0.72);
  color: #FBD46A;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(10px, 1.15vw, 12.5px);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.voltar-nav__link:hover,
.voltar-nav__link:focus-visible {
  border-color: #F2A81D;
  background: rgba(242, 168, 29, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .encanto-entrada { animation: none; }
}

/* Transição da abertura da capa. Só vale quando o script marca o
   palco com .anima-desloca — ou seja, na troca capa <-> páginas
   duplas. Nas viradas normais o livro não se move. */
#palco.anima-desloca #livro {
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #palco.anima-desloca #livro { transition: none; }
}

/* ============================================================
   NAVEGAÇÃO AO LADO DO LIVRO (desktop)

   As setas e o contador ficavam numa faixa acima do palco, em cima
   da marca "Biblioteca Encantada". Passam a flanquear o livro: uma
   seta de cada lado, na altura do miolo, e o contador logo abaixo
   do par — onde a mão procura quando está lendo.

   O palco recebe as setas como filhas posicionadas; elas não entram
   no fluxo, então a altura reservada para o livro não muda.
   ============================================================ */
@media (min-width: 48rem) {
  /* As setas viram itens do próprio palco, irmãs do livro: o flex as
     encosta nele sozinho, em qualquer largura. Ancorá-las por um
     deslocamento fixo não servia — em 1920 o livro preenche o palco
     inteiro e a seta caía sobre a página; em 1280 sobrava espaço e
     ela avançava sobre a estante de miniaturas. */
  .controles { display: contents; }

  .controles button {
    position: static;
    flex: 0 0 auto;
    width: clamp(2.6rem, 3.6vw, 3.4rem);
    height: clamp(2.6rem, 3.6vw, 3.4rem);
    translate: none;
    font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  }

  #ant  { order: -1; margin-right: clamp(0.5rem, 1.4vw, 1.4rem); }
  #prox { order:  1; margin-left:  clamp(0.5rem, 1.4vw, 1.4rem); }

  /* o contador desceu para a barra de ações, ao lado do botão de
     baixar: dentro do palco ele ficava por trás da página do livro */
  #contador {
    font-size: clamp(0.72rem, 1vw, 0.86rem);
    letter-spacing: 0.08em;
  }

  #palco { position: relative; overflow: visible; }
}

/* ============================================================
   "BAIXAR O PDF" E "DEIXE SEU CAUSO" COMO BOTÕES
   Eram links sublinhados de peso diferente; viram duas peças da
   mesma família, com a moldura dourada que o resto da interface usa.
   ============================================================ */
#baixar,
#ler-pdf,
.rodape-leitor__causo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.42em 1.05em;
  border: 1px solid rgba(201, 138, 22, 0.55);
  border-radius: 0.4rem;
  background: rgba(253, 246, 227, 0.06);
  color: var(--amarelo-claro);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

#baixar:hover,
#ler-pdf:hover,
.rodape-leitor__causo:hover {
  border-color: rgba(251, 212, 106, 0.9);
  background: rgba(251, 212, 106, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  #baixar,
  #ler-pdf,
  .rodape-leitor__causo { transition: none; }
}

/* ============================================================
   CONTROLES NO CELULAR

   As setas passaram a morar dentro do palco, para no desktop
   flanquearem o livro. No celular não há folga lateral: como itens
   do flex elas ficavam sob a página, que capturava o toque.
   Aqui voltam a ser uma faixa própria, no alto do palco e acima do
   livro na ordem de empilhamento.
   ============================================================ */
@media (max-width: 47.99rem) {
  #palco { position: relative; }

  /* nas laterais, na altura do miolo: no alto elas tapavam o começo
     da página, que é justamente onde o texto começa */
  .controles {
    position: absolute;
    z-index: 40;
    inset: 0;
    display: block;
    padding: 0;
    pointer-events: none;
  }

  .controles button {
    position: absolute;
    top: 50%;
    width: 34px;
    height: 34px;
    translate: 0 -50%;
    background: rgba(242, 168, 29, 0.86);
    pointer-events: auto;
    font-size: 16px;
  }

  /* longe da borda da tela: coladas nela ficavam meio cortadas e
     difíceis de acertar com o polegar */
  #ant  { left: clamp(10px, 3.4vw, 16px); }
  #prox { right: clamp(10px, 3.4vw, 16px); }
}

/* ============================================================
   RODAPÉ DO LEITOR: causo à esquerda, crédito no centro, baixar
   à direita.

   O "Baixar o PDF" morava numa barra própria abaixo do livro; ali
   ele repetia a função de rodapé com uma faixa a mais. Passa a
   dividir a linha com as outras duas peças, e a barra fica só com
   o contador de páginas.

   A navegação de volta também troca de lado: sai do canto superior
   esquerdo, onde disputava a vista com a estante de miniaturas, e
   vai para o direito, oposto a elas.
   ============================================================ */
/* rodapé: causo à esquerda, crédito no centro, baixar à direita.
   O contador ficou embaixo do livro, onde acompanha a leitura. */
.rodape-leitor__causo { order: 1; margin-right: auto; }
#baixar { order: 2; margin-left: auto; }

/* a linha do rodapé tem altura própria e as peças ficam no meio dela */
.rodape-leitor { align-items: center; }

.barra-acoes { justify-content: center; padding-top: 2px; }

@media (min-width: 48rem) {
  /* Estante numa ponta, Início na outra. */
  .voltar-nav {
    left: clamp(0.6rem, 2vw, 1.6rem);
    right: clamp(0.6rem, 2vw, 1.6rem);
    display: flex;
    justify-content: space-between;
  }
}

@media (max-width: 47.99rem) {
  /* no celular a linha vira pilha: as duas ações lado a lado em cima
     e o crédito embaixo, centralizado */
  /* os dois botões dividem a primeira linha, centrados; o crédito
     fica na segunda, também centrado */
  .rodape-leitor {
    align-items: center;
    justify-content: center;
    row-gap: 5px;
  }

  .rodape-leitor__causo { order: 1; margin-right: 0; }
  #baixar { order: 2; margin-left: 0; padding: 0.3em 0.8em; font-size: 10.5px; }
  .rodape-leitor__credito { order: 3; }
}

/* ============================================================
   O crédito centraliza na TELA, não no rodapé.
   A faixa reservada para a estante deixou o rodapé mais estreito;
   com left:50% o crédito ia para o meio dele, ~80px à esquerda do
   centro da página. Como o rodapé encosta na borda esquerda, meia
   viewport a partir dele é exatamente o meio da tela.
   (No fim do arquivo de propósito: a declaração base vem depois do
   bloco da estante e venceria na cascata.)
   ============================================================ */
@media (min-width: 60rem) {
  /* o rodapé começa na borda esquerda da tela, então meia viewport a
     partir dele é o meio da página */
  .rodape-leitor__credito { left: 50vw; }

  /* Abaixo de ~1500px os botões alcançam o centro e passavam por
     cima da linha do crédito. Ele encolhe até caber no vão entre os
     dois grupos, em vez de ficar escondido atrás deles. */
  .rodape-leitor__credito {
    max-width: calc(100vw - 780px);
    overflow: hidden;
    font-size: clamp(8px, 0.72vw, 11px);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Botões e crédito centrados na mesma altura da faixa: o centro de
     um coincide com o centro do outro, em vez de dividirem só a
     linha de base. */
  .rodape-leitor { align-items: center; }

  /* O rodapé tem padding-bottom maior que o de cima (a folga até a
     régua), então 50% da caixa cai abaixo do centro do conteúdo.
     Compensamos metade da diferença. */
  /* o padding de baixo é a folga e o de cima 80% dela, então o
     centro da caixa fica 10% da folga abaixo do centro do conteúdo */
  .rodape-leitor__credito {
    top: calc(50% - var(--folga-credito) * 0.1);
    bottom: auto;
    transform: translate(-50%, -50%);
  }
}

/* ============================================================
   FOLGA ENTRE A ESTANTE E O LIVRO (celular)

   A faixa de capas no topo encostava no livro — e em 360 e 320,
   onde ela quebra em duas linhas, chegava a passar por cima dele
   (medido: -13px e -18px de folga). O respiro agora é explícito e
   o palco recebe o que sobra, então o livro encolhe o necessário
   em vez de invadir a faixa.
   ============================================================ */
@media (max-width: 47.99rem) {
  /* A faixa de capas encostava na marca: 8px entre uma e outra, e a
     linha "Arte Solar do Agreste" ficava espremida. Ela desce, e o
     respiro acima passa a ser parecido com o de baixo. */
  #estante {
    margin-top: clamp(8px, 1.6dvh, 14px);
    margin-bottom: clamp(10px, 2.2dvh, 18px);
    flex: 0 0 auto;
  }
}

/* No celular o livro se apoia no topo do palco. Centralizado, o
   excedente de altura sobrava metade para cima e entrava por baixo
   da faixa de capas; o transform que o encolhe não altera o layout,
   então sozinho ele não resolvia. */
@media (max-width: 47.99rem) {
  #palco { align-items: flex-start; }
}

/* ============================================================
   NAVEGAÇÃO DE VOLTA NO CELULAR

   Fora do fluxo, ela passava por cima da marca "Biblioteca
   Encantada" em 390, 375, 360 e 320 — quanto mais estreita a tela,
   maior a invasão. Agora ela ocupa a própria linha, acima da marca.
   ============================================================ */
@media (max-width: 47.99rem) {
  .voltar-nav {
    position: static;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 2px;
  }
}

/* Em 320 a linha do crédito quebrava em duas, separando "HDBR" de
   "Studios". O corpo acompanha a largura da tela para ela caber
   inteira. (No fim do arquivo: as regras do rodapé mobile vêm
   depois do bloco onde isso caberia naturalmente.) */
/* A faixa recua dos lados para os botões flutuantes, então a linha do
   crédito tem menos espaço: o corpo acompanha a largura para ela caber
   inteira, sem separar "HDBR" de "Studios". */
@media (max-width: 47.99rem) {
  /* A faixa recua dos dois lados para os botões flutuantes, então a
     linha do crédito tem pouco espaço. O corpo acompanha a largura
     para ela caber inteira, sem separar "HDBR" de "Studios" e sem
     escorrer por baixo dos botões. */
  .rodape-leitor__credito {
    font-size: clamp(5.2px, 1.62vw, 8px);
    white-space: nowrap;
  }
}

/* ============================================================
   SIMETRIA DO PÉ DO LEITOR (celular)

   A faixa do contador ficava colada na linha do rodapé (0px) e
   distante do livro (34 a 51px, conforme a tela) — o vão inteiro
   sobrava de um lado só. Agora o contador tem o mesmo respiro em
   cima e embaixo, e os botões não encostam na linha.

   A navegação de volta também volta para a direita, do mesmo lado
   da estante no desktop, em vez de centralizada.
   ============================================================ */
@media (max-width: 47.99rem) {
  .barra-acoes {
    padding-top: clamp(6px, 1.4dvh, 12px);
    padding-bottom: clamp(6px, 1.4dvh, 12px);
  }

  .rodape-leitor {
    padding-top: clamp(7px, 1.5dvh, 13px);
    row-gap: 6px;
  }

  .voltar-nav { justify-content: flex-end; }
}

/* ============================================================
   LIVRO MAIOR, SETAS POR CIMA (celular)

   As setas ocupavam uma faixa de cada lado e o livro ficava com o
   que sobrava — pequeno numa tela onde ele é o assunto. Agora elas
   flutuam sobre as bordas da página, com fundo translúcido, e o
   livro usa a largura inteira.

   "Estante" e "Início" vão para as pontas opostas, cada um no seu
   canto, em vez de empilhados do mesmo lado.
   ============================================================ */
@media (max-width: 47.99rem) {
  .voltar-nav {
    justify-content: space-between;
    padding-inline: clamp(2px, 1vw, 8px);
  }

  #ant, #prox {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(251, 212, 106, 0.5);
    background: rgba(30, 22, 8, 0.55);
    backdrop-filter: blur(2px);
    color: var(--amarelo-claro);
    font-size: 19px;
  }

  /* meio dentro, meio fora da borda da página: some do texto e
     continua fácil de acertar com o polegar */
  #ant  { left: clamp(-2px, 0.6vw, 4px); }
  #prox { right: clamp(-2px, 0.6vw, 4px); }

  #ant:disabled, #prox:disabled { opacity: 0.28; }

  /* o botão de leitura corrida acompanha a família dos outros */
  #ler-pdf { order: 3; padding: 0.3em 0.8em; font-size: 10.5px; }
  .rodape-leitor__credito { order: 4; }
}

#ler-pdf {
  order: 3;
  margin-left: 0.5rem;
}

/* ============================================================
   TELAS BAIXAS: O LIVRO RECUPERA ALTURA

   Em 320x568 o entorno consumia quase tudo e sobravam 205px para o
   palco — o livro caía para a escala mínima e ficava com 112px de
   largura, 35% da tela. A faixa de capas sozinha levava 96px.

   Abaixo de 600px de altura a estante vira uma tira compacta, só
   com as miniaturas, e o cabeçalho encolhe. O livro é o assunto da
   página; o resto cede espaço a ele.
   ============================================================ */
@media (max-width: 47.99rem) and (max-height: 700px) {
  #estante { gap: 5px; margin-bottom: 6px; }

  #estante button.mini {
    flex-direction: column;
    gap: 2px;
    padding: 3px 4px;
  }

  /* o rótulo sai: a capa já identifica o livro nesse tamanho */
  #estante .mini__titulo { display: none; }

  #estante .mini__capa {
    width: auto;
    height: clamp(30px, 7.5dvh, 42px);
  }

  header { padding: 0 0 2px; }
  header h1 { font-size: clamp(13px, 4.4vw, 17px); }
  header p  { display: none; }

  .voltar-nav { margin-bottom: 0; }
  .voltar-nav__link { padding: 3px 9px; font-size: 11px; }
}

/* Entre 960 e 1150px o vão entre os grupos de botões fica menor que a
   linha do crédito, e ela passaria por baixo deles. Nessa faixa o
   rodapé quebra: ações em cima, crédito centrado embaixo. */
@media (min-width: 60rem) and (max-width: 71.8rem) {
  .rodape-leitor {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }

  .rodape-leitor__causo { order: 1; margin-right: 0; }
  #baixar { order: 2; margin-left: 0; }
  #ler-pdf { order: 3; }

  .rodape-leitor__credito {
    position: static;
    order: 4;
    flex: 0 0 100%;
    max-width: 100%;
    transform: none;
    text-align: center;
  }
}

/* ============================================================
   RESPIRO DO RODAPÉ NO CELULAR

   A linha separadora fica no topo da faixa. Os botões encostavam
   nela (14px) enquanto sobravam 24 a 27px até a régua — o bloco
   parecia empurrado para cima. Os dois lados passam a ter folga
   equivalente.

   No fim do arquivo porque as regras do rodapé mobile estão
   espalhadas em blocos anteriores e venceriam esta.
   ============================================================ */
@media (max-width: 47.99rem) {
  .leitor-body .rodape-leitor {
    padding-top: calc(var(--folga-credito, 0.8rem) * 0.86);
  }
}