/* =============================================================
 * edital.css — tema Edital Pessoal
 * Extraido VERBATIM do bloco <style> de docs_apoio/editalpessoal/inc/head.php
 * (protótipo aprovado, read-only). Unica alteracao: desindentacao.
 *
 * SWAP 5.1 FEITO (2026-08-09): a linha url() de .banner-edital .banner-img já
 * aponta a /website/images/middle.webp. Era o único ponto manual do swap — o
 * EP_ASSET_BASE em PHP deriva sozinho do sítio onde o edital_broker.php está.
 * ============================================================= */

:root {
  /* Paleta do site — usar sempre as variáveis, nunca cores soltas */
  --ep-preto: #000;
  --ep-preto-suave: #303030;
  --ep-branco: #fff;
  --ep-creme: #f2ead0;
  --ep-creme-claro: #f6efd8;
  --ep-texto: #1a1a1a;
  --ep-texto-suave: #3f3a2c;
  --ep-cinza: #6b6552;
  --ep-cinza-claro: #ccc;
  --ep-fundo: #f8f9fa;
  --ep-hover: #f0f0f0;
  --ep-stats: var(--ep-creme);
  --ep-stats-gostos: var(--ep-stats);
  --ep-stats-comentarios: var(--ep-stats);
}

body { background-color: var(--ep-fundo); margin: 0; padding-top: 72px; }

/* Header */
.site-header { background: var(--ep-branco); }
.menu-btn {
  width: 54px; height: 54px; font-size: 1.35rem; z-index: 1030;
  top: 8px !important;
  background: var(--ep-preto);
  color: var(--ep-branco);
  border: none;
}
.menu-btn:hover {
  background: var(--ep-branco);
  color: var(--ep-preto);
  border: 1px solid var(--ep-preto);
}
.offcanvas-start { width: 280px; }
.offcanvas .nav-link { color: var(--ep-preto); }
.offcanvas .nav-link:hover { background: var(--ep-hover); }
.offcanvas .nav-link.active { background: linear-gradient(90deg, var(--ep-preto), var(--ep-preto-suave)); color: var(--ep-branco); }
.subnav { list-style: none; padding-left: 0; }
.subnav .nav-link { padding-left: 2.5rem; font-size: .95rem; }
/* 3.º nível do offcanvas — P18 revertida (2026-08-10): as subcategorias
   passaram a constar do menu, com indentação em vez de dobra própria. */
.subnav .subnav { list-style: none; padding-left: 0; }
.subnav .subnav .nav-link { padding-left: 4rem; font-size: .9rem; }

/* Banner hero de identidade */
.banner-edital {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.banner-edital .banner-img {
  background: url('/website/images/middle.webp') top center / cover no-repeat, var(--ep-creme);
  height: 420px;
}
.banner-edital .conteudo {
  background: var(--ep-creme-claro);
  color: var(--ep-texto);
  padding: 2.5rem 2rem;
  text-align: center;
}
.banner-edital .selo {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.3em; font-weight: bold; color: var(--ep-preto);
}
.banner-edital .assinatura { color: var(--ep-texto-suave); font-size: 0.7rem; }
.banner-edital .subtitulo {
  color: var(--ep-texto-suave);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .banner-edital .banner-img { height: 300px; background-size: 140% auto; }
  .banner-edital .conteudo { padding: 1.5rem; }
}

/* Cartões de edital */
#cards-editais .card { background: var(--ep-creme-claro); border: none; }
.edit-img-wrapper { position: relative; overflow: hidden;
  border-top-left-radius: .5rem; border-top-right-radius: .5rem; height: 220px; }
.edit-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-banner {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  background: var(--ep-branco); color: var(--ep-preto); font-weight: bold;
  padding: .3rem 1rem; font-family: 'Courier New', Courier, monospace;
  font-size: 1rem; text-align: center;
  border-top-left-radius: .5rem; border-top-right-radius: .5rem;
  box-shadow: 0 -4px 10px rgba(0,0,0,.2);
}
.edit-banner small { display: block; font-size: .75rem; font-weight: normal; }
.card-footer-edital { background: var(--ep-preto); color: var(--ep-branco); border-top: none; }
.card-footer-edital a { color: var(--ep-branco); border-color: var(--ep-branco); }
.card-footer-edital a:hover { background: var(--ep-branco); color: var(--ep-preto); }
.card-footer-edital .stats { font-size: .85rem; color: var(--ep-stats); }
.card-footer-edital .stats .stat-gostos { color: var(--ep-stats-gostos); }
.card-footer-edital .stats .stat-comentarios { color: var(--ep-stats-comentarios); }

/* ---------------- Cabeçalho de secção (primeira página) ----------------
 * O mesmo registo do .doc-comentarios, que é como este site já separa
 * secções: um risco por cima e a rubrica em Courier maiúsculo espaçado. Não
 * se inventa um terceiro idioma para a primeira página.
 *
 * As duas secções — editais e despachos — usam a mesma classe de propósito:
 * assim lêem-se como irmãs, e a passagem de uma para a outra deixa de ser
 * um salto de espaço em branco.
 * -------------------------------------------------------------------- */
.seccao-cabeca {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: .5rem 1rem;
  margin: 3rem 0 1.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--ep-cinza-claro);
}
.seccao-cabeca h2 {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ep-cinza);
}
.link-ver-todos {
  font-family: 'Courier New', Courier, monospace;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ep-cinza); text-decoration: none; white-space: nowrap;
}
.link-ver-todos:hover,
.link-ver-todos:focus-visible { color: var(--ep-preto); text-decoration: underline; }

/* Documento do edital (view one) */
.edital-doc {
  margin: 1.5rem 0;
  background: var(--ep-branco);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
/* A faixa de imagem serve o edital E o despacho. Selectores partilhados de
   propósito: assim o layout e o mesmo por construcao, e nao por dois blocos
   com os mesmos valores que um dia divergem. */
.edital-doc .doc-img,
.despacho-doc .doc-img { position: relative; height: 420px; overflow: hidden; }
.edital-doc .doc-img img,
.despacho-doc .doc-img img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
@media (max-width: 768px) {
  .edital-doc .doc-img,
  .despacho-doc .doc-img { height: 300px; }
}
.edital-doc .doc-corpo,
.despacho-doc .despacho-corpo { padding: 2.5rem 2.5rem 2rem; }
@media (max-width: 768px) {
  .edital-doc .doc-corpo,
  .despacho-doc .despacho-corpo { padding: 1.5rem 1.25rem; }
}
.doc-selo {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: .3em; font-weight: bold; color: var(--ep-preto);
  font-size: .9rem; text-align: center;
}
.doc-meta {
  font-family: 'Courier New', Courier, monospace;
  font-size: .8rem; color: var(--ep-cinza); text-align: center;
}
.doc-titulo { font-weight: 700; text-align: center; margin: 1rem 0 2rem; }
/* Nota de introdução — comentário exterior ao edital (2026-08-30).
   Courier + creme é o registo administrativo do site (selo, meta, carimbo);
   o corpo é Georgia. A troca de família é o que diz "isto não é a história". */
.doc-nota {
  max-width: 760px;
  margin: 0 auto 2.25rem;
  padding: 1rem 1.25rem;
  background: var(--ep-creme);
  border-left: 3px solid var(--ep-preto);
  font-family: 'Courier New', Courier, monospace;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--ep-texto-suave);
}
.doc-nota p { margin: 0 0 .6rem; }
.doc-nota p:last-child { margin-bottom: 0; }
.doc-texto {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.06rem; line-height: 1.85; color: var(--ep-texto);
  max-width: 760px; margin: 0 auto;
}
.doc-texto .considerando { font-style: italic; color: var(--ep-texto-suave); margin-bottom: .35rem; }
.doc-texto .artigo { margin-top: 1.4rem; }
.doc-texto .artigo .num {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold; font-style: normal; font-size: .95rem;
}
/* Marcadores de parte vindos do backoffice (2026-08-10).
   O Quill não guarda <span class="num"> nem classes em <p> — só conhece
   os seus próprios formatos. Um parágrafo cujo único conteúdo é <strong>
   é o que sobra de `<p class="artigo"><span class="num">Parte I…</span></p>`,
   e tem de render igual. O :not(.text-center) protege o cabeçalho da
   declaração, que continua em ficheiro e é centrado. */
.doc-texto p:not(.text-center) > strong:only-child {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold; font-style: normal; font-size: .95rem;
}
/* O espaço acima do marcador. Sem :has() (browsers anteriores a 2023) fica
   o espaçamento normal de parágrafo — degrada sem partir. */
.doc-texto p:not(.text-center):has(> strong:only-child) { margin-top: 1.4rem; }
.doc-assinatura { margin-top: 3rem; text-align: right; max-width: 760px; margin-left: auto; margin-right: auto; }
.doc-assinatura .nome { font-family: 'Courier New', Courier, monospace; font-weight: bold; }
.doc-assinatura .data-afixacao { font-size: .85rem; color: var(--ep-cinza); }
.doc-rodape {
  background: var(--ep-preto); color: var(--ep-branco);
  padding: .9rem 2.5rem;
  display: flex; justify-content: space-between; align-items: center;
}
.doc-rodape .stats { font-size: .85rem; color: var(--ep-stats); display: flex; gap: 1rem; }
.doc-rodape a { color: var(--ep-branco); border-color: var(--ep-branco); }
.doc-rodape a:hover { background: var(--ep-branco); color: var(--ep-preto); }

/* Footer do site */
.footer-preto { background: var(--ep-preto); color: var(--ep-branco); margin-top: 3rem;
  box-shadow: 0 -6px 12px rgba(0,0,0,.3); }
.footer-preto .disclaimer { color: var(--ep-cinza-claro); line-height: 1.6; font-size: .8rem; }
.footer-preto a { color: var(--ep-branco); }

/* =============================================================
 * BLOCO 1.4 — offcanvas (botão-toggle dos Editais) e pesquisa
 * Acrescentado ao tema extraído do protótipo; não veio do <style> dele.
 * ============================================================= */

/* O item "Editais" é um <button>, não um <a>: sem rota /editais, só toggle
   do submenu. Herda o aspeto de .nav-link e ganha foco visível de teclado. */
.offcanvas .nav-link-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
}
.offcanvas .nav-link-toggle:hover { background: var(--ep-hover); }
.offcanvas .nav-link-toggle.active {
  background: linear-gradient(90deg, var(--ep-preto), var(--ep-preto-suave));
  color: var(--ep-branco);
}

/* Foco visível — obrigatório, já que deixou de ser <a>. */
.offcanvas .nav-link-toggle:focus-visible,
.offcanvas .nav-link:focus-visible,
.menu-btn:focus-visible,
.btn-pesquisa:focus-visible,
#btnDesligar:focus-visible {
  outline: 3px solid var(--ep-preto);
  outline-offset: 2px;
  border-radius: .25rem;
}
.offcanvas .nav-link-toggle.active:focus-visible {
  outline-color: var(--ep-creme);
}

/* Chevron roda quando o submenu está aberto. */
.nav-chevron { font-size: .75rem; transition: transform .2s ease; }
.nav-link-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-chevron { transition: none; }
}

/* Pesquisa */
.btn-pesquisa { line-height: 1; }

.site-search-bar { display: flex; gap: .5rem; }
.site-search-bar .btn-search-go {
  background: var(--ep-preto);
  color: var(--ep-branco);
  white-space: nowrap;
}
.site-search-bar .btn-search-go:hover {
  background: var(--ep-branco);
  color: var(--ep-preto);
  border: 1px solid var(--ep-preto);
}

.site-search-results { margin-top: 1rem; }
.site-search-message { color: var(--ep-cinza); font-size: .9rem; padding: .5rem 0; }

.site-search-result {
  display: block;
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  background: var(--ep-creme-claro);
  border-radius: .5rem;
  color: var(--ep-texto);
  text-decoration: none;
}
.site-search-result:hover { background: var(--ep-creme); color: var(--ep-texto); }
.site-search-result:focus-visible { outline: 3px solid var(--ep-preto); outline-offset: 2px; }

.site-search-result .ssr-meta {
  display: flex;
  gap: 1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: .75rem;
  color: var(--ep-cinza);
  margin-bottom: .25rem;
}
.site-search-result .ssr-title { display: block; font-weight: 700; }
.site-search-result .ssr-sub {
  display: block;
  font-size: .875rem;
  color: var(--ep-texto-suave);
  margin-top: .15rem;
}

/* =============================================================
 * BLOCO 2.1 — placeholder de imagem e estado vazio
 * ============================================================= */

/* Sem imagem, o cartão não fica com buraco nem puxa a noimage.png do SPFCS:
   creme do edital, com o carimbo .edit-banner por cima como nos outros. */
.edit-img-placeholder {
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      var(--ep-creme) 0 12px,
      var(--ep-creme-claro) 12px 24px
    );
  border-bottom: 1px solid var(--ep-cinza-claro);
}

/* Estado vazio — é uma afixação, não um erro: sem ícone, sem cor de alerta. */
.edital-vazio {
  background: var(--ep-creme-claro);
  border: none;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.edital-vazio p {
  font-family: 'Courier New', Courier, monospace;
  color: var(--ep-texto-suave);
  line-height: 1.8;
  margin: 0;
}

/* =============================================================
 * BLOCO 2.3 — fio de Ariadne
 * ============================================================= */

.ep-breadcrumb {
  font-family: 'Courier New', Courier, monospace;
  font-size: .8rem;
  color: var(--ep-cinza);
  margin-bottom: .5rem;
}
.ep-breadcrumb a { color: var(--ep-cinza); text-decoration: none; }
.ep-breadcrumb a:hover { color: var(--ep-preto); text-decoration: underline; }
.ep-breadcrumb a:focus-visible { outline: 3px solid var(--ep-preto); outline-offset: 2px; }
.ep-breadcrumb span[aria-current] { color: var(--ep-texto); font-weight: bold; }

/* =============================================================
 * BLOCO 3.3 — gostos e comentários
 * ============================================================= */

/* =============================================================
 * Botão de gostar, no fim do texto (2026-08-11)
 * O coração da barra preta é indicador e não leva estilo próprio: herda o
 * .stats como as vistas e os comentários.
 * ============================================================= */

.doc-gostar {
  max-width: 760px;
  margin: 2.5rem auto 0;
  text-align: center;
}

.btn-gostar-doc {
  font-family: 'Courier New', Courier, monospace;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ep-creme-claro);
  color: var(--ep-texto);
  border: 1px solid var(--ep-preto);
  border-radius: 0;             /* carimbo, não pastilha */
  padding: .7rem 1.4rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background-color .15s ease, color .15s ease;
}
.btn-gostar-doc:hover { background: var(--ep-preto); color: var(--ep-creme); }
.btn-gostar-doc:focus-visible { outline: 3px solid var(--ep-preto); outline-offset: 3px; }
.btn-gostar-doc[disabled] { cursor: default; opacity: .7; }

/* Gostado: o carimbo fica dado. Continua clicável — o endpoint é idempotente. */
.btn-gostar-doc.gostado {
  background: var(--ep-preto);
  color: var(--ep-creme);
}
.btn-gostar-doc.gostado:hover { background: var(--ep-preto-suave); }

.btn-gostar-conta { font-weight: bold; }

/* Secção de comentários, dentro do .doc-corpo */
.doc-comentarios {
  max-width: 760px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--ep-cinza-claro);
}
.doc-comentarios h2 {
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ep-cinza);
}

.comentario-vazio,
.comentario-nota {
  font-family: 'Courier New', Courier, monospace;
  font-size: .8rem;
  color: var(--ep-cinza);
}

.comentario-aviso {
  background: var(--ep-creme-claro);
  border-left: 3px solid var(--ep-preto);
  padding: .6rem .9rem;
  font-size: .9rem;
  color: var(--ep-texto);
}
.comentario-aviso-erro { border-left-color: var(--ep-cinza); }

.lista-comentarios { list-style: none; padding-left: 0; margin: 1.5rem 0; }
.comentario {
  background: var(--ep-creme-claro);
  border-radius: .5rem;
  padding: .9rem 1.1rem;
  margin-bottom: .75rem;
}
.comentario-meta {
  font-family: 'Courier New', Courier, monospace;
  font-size: .75rem;
  color: var(--ep-cinza);
  margin-bottom: .35rem;
}
.comentario-autor { font-weight: bold; color: var(--ep-texto); }
.comentario-texto { margin: 0; color: var(--ep-texto); line-height: 1.7; }

.form-comentario { margin-top: 2rem; }
.form-comentario .form-label {
  font-family: 'Courier New', Courier, monospace;
  font-size: .78rem;
  color: var(--ep-cinza);
}
.form-comentario .form-control:focus {
  border-color: var(--ep-preto);
  box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .12);
}

/* Contador de caracteres e linha do que falta (2026-08-11). Mesmo registo
   tipográfico da .comentario-nota: são as duas notas de rodapé do formulário. */
.comentario-contador,
.comentario-falta {
  font-family: 'Courier New', Courier, monospace;
  font-size: .78rem;
  color: var(--ep-cinza);
  margin-top: .3rem;
}
.comentario-contador-limite { color: var(--ep-texto); font-weight: bold; }
.comentario-falta:empty { display: none; }

/* Campo por preencher. Sóbrio de propósito: é um aviso, não um alarme. */
.form-comentario .campo-invalido {
  border-color: var(--ep-cinza);
  background-color: var(--ep-creme-claro);
}

/* Honeypot: fora do ecrã, mas alcançável por bots que leem o HTML. */
.ep-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =============================================================
 * Numeração e actos — linhas de relação entre editais
 * ============================================================= */

.doc-relacao {
  font-family: 'Courier New', Courier, monospace;
  font-size: .78rem;
  color: var(--ep-cinza);
  text-align: center;
  margin-top: .4rem;
}
.doc-relacao-linha { display: block; }
.doc-relacao a { color: var(--ep-texto); text-decoration: underline; }
.doc-relacao a:hover { color: var(--ep-preto); }
.doc-relacao a:focus-visible { outline: 3px solid var(--ep-preto); outline-offset: 2px; }

/* =============================================================
   DESPACHOS — grelha de cartões e permalink (2026-08-11)
   Os cartões são os mesmos dos editais (ep_render_card_despacho);
   aqui ficam só o cabeçalho da página, a paginação e o permalink.
   A largura vem do <main class="container"> do router — este bloco
   NÃO deve voltar a ter max-width nem margin:0 auto.
   ============================================================= */
.despachos-total { font-size: .8rem; color: var(--ep-cinza); font-family: 'Courier New', Courier, monospace; }



/* O corpo do despacho usa a tipografia do .doc-texto — a mesma do edital.
   Havia aqui font-size 1.02rem e line-height 1.7 contra os 1.06/1.85 do
   .doc-texto; como o elemento leva as duas classes e a especificidade e
   igual, ganhava esta por vir depois no ficheiro, e o texto do despacho
   saia mais pequeno e mais apertado do que o de um edital. */
.despacho-texto p:last-child { margin-bottom: 0; }



.despacho-vazio {
  background: var(--ep-creme-claro); border-radius: .35rem;
  padding: 1.5rem; text-align: center; color: var(--ep-texto-suave);
  font-family: 'Courier New', Courier, monospace; font-size: .9rem;
}

.despachos-paginacao {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 1.5rem; font-size: .9rem;
}
.despachos-pagina-de { font-family: 'Courier New', Courier, monospace; color: var(--ep-cinza); font-size: .8rem; }

/* Permalink — sem selo, sem título, sem assinatura. */
/* Mesma caixa do .edital-doc, à letra: enche o container, mesma margem
   vertical, mesma sombra, mesmo padding. Tinha max-width:860px e
   margin:0 auto, e ficava visivelmente mais estreita do que o documento
   de um edital na mesma janela. */
.despacho-doc {
  margin: 1.5rem 0;
  background: var(--ep-branco);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
/* padding do corpo: ver o selector partilhado com o .edital-doc, acima */
.despacho-doc .doc-meta { margin-bottom: 1.25rem; }
.despacho-doc .despacho-texto { max-width: 760px; margin: 0 auto; }
.despacho-doc .doc-rodape { margin-top: 0; }


@media (max-width: 575.98px) {
}

/* Media dos despachos (2026-08-11) — por baixo do texto, à largura toda. */
.despacho-video { margin-top: .85rem; border-radius: .35rem; overflow: hidden; background: var(--ep-preto); }

/* Imagens coladas DENTRO do texto pelo editor. O Bootstrap 5 não põe
   max-width nas imagens — só a classe .img-fluid o faz, e o Quill não a
   escreve. Sem isto, uma imagem colada rebenta a largura do feed. */
.despacho-texto img { max-width: 100%; height: auto; }

/* Carimbo do despacho — mesma caixa do EDITAL/pessoal, palavra trocada.
   A palavra e mais comprida: o tamanho desce um pouco para nao partir. */
.edit-banner--despacho { font-size: .82rem; letter-spacing: .06em; }

/* =============================================================
   LIVRO — vista de leitura (categoryReadBook), 2026-08-15
   ============================================================= */




/* ---------------- A CAPA DO LIVRO ----------------
 * Abre-se sozinha, em CSS. Nao ha JavaScript nenhum nesta pecas: uma
 * animacao que corre no load, e acabou. Se o CSS falhar, ve-se a folha e
 * o indice; nao ha estado nenhum que possa ficar preso a fechar a pagina.
 *
 * A CAPA RODA PARA A ESQUERDA, e isso nao e estetica: com
 * transform-origin na lombada e um angulo negativo, o que sai da caixa sai
 * pelo lado esquerdo — e o overflow para a esquerda nao gera barra de
 * scroll horizontal em LTR. Com backface-visibility a capa desaparece aos
 * 90 graus, e ate la a sua largura projectada so encolhe. Resultado: nunca
 * ha scroll lateral, nem no telemovel. Por isso o 3D fica tambem no movel.
 * ------------------------------------------------ */
/* position: relative por causa do teclado: a checkbox e absolute, e sem um
   ancestral posicionado ia ancorar-se ao <body>. Ao receber foco com Tab, o
   browser rola ate onde ela estiver — e a pagina saltava para um sitio que
   nao tem nada que ver com o livro. */
.livro-capa { position: relative; display: flex; justify-content: center; margin: .5rem 0 2.25rem; }

.livro-capa-palco {
  position: relative;
  width: 100%; max-width: 340px;
  perspective: 1800px;
}

/* No ecra grande o livro cresce com a janela em vez de ficar preso a 480px.
   A altura manda e a largura sai da proporcao (17/24 = 340/480, que e
   tambem a da imagem de capa carregada), por isso a capa nunca corta a
   imagem. O max impede que num monitor alto o livro fique gigante; o min,
   que num portatil baixo fique um selo. No telemovel nao se mexe: la quem
   manda e a largura do ecra. */
@media (min-width: 576px) {
  .livro-capa-palco {
    width: auto; max-width: none;
    height: clamp(420px, 76vh, 660px);
    aspect-ratio: 17 / 24;
    transition: width 1.15s cubic-bezier(.22,.72,.16,1),
                transform 1.15s cubic-bezier(.22,.72,.16,1);
  }
  .livro-capa-folha { height: 100%; min-height: 0; }

  /* ---- DUAS FOLHAS ----
   * Aberto, o livro passa a ter rosto a esquerda e texto a direita. A folha
   * da esquerda e o proprio .livro-capa-rosto tirado do fluxo e posto ao
   * lado; nao ha marcacao duplicada para a segunda folha.
   *
   * PORQUE ELE NAO E CORTADO: a unica caixa com overflow:hidden e a
   * .livro-capa-vista, e o rosto e IRMAO dela, nao filho. A folha, o palco
   * e a coluna nao cortam nada.
   *
   * A LARGURA, ABERTO, TEM DOIS TRAVOES. O de sempre — a altura da janela —
   * e um novo: metade da coluna, porque agora sao duas folhas lado a lado.
   * Ganha o mais apertado. Numa janela estreita (600-800px) as folhas
   * ENCOLHEM em vez de se voltar a uma folha so: um livro mais pequeno
   * continua a ser um livro, um livro cortado pela margem da janela nao e
   * nada — e um terceiro arranjo seria um terceiro conjunto de regras para
   * manter de acordo com os outros dois.
   *
   * A regra so se aplica com :checked, para a capa FECHADA ficar exactamente
   * do tamanho que tinha antes disto. */
  .livro-capa-troca:checked ~ .livro-capa-palco {
    width: min(calc((100% - 6px) / 2), calc(clamp(420px, 76vh, 660px) * 17 / 24));
    height: auto;
    /* Desliza meia folha (mais metade da goteira) para a direita: assim a
       abertura de duas folhas fica centrada na coluna, e nao a folha da
       direita sozinha. */
    transform: translateX(calc(50% + 3px));
  }

  .livro-capa-rosto {
    position: absolute; top: 0; right: calc(100% + 6px);
    width: 100%; height: 100%;
    padding: 2rem 1.75rem 1rem;
    background: var(--ep-creme);
    border-radius: 8px 2px 2px 8px;
    /* A goteira: sombra interior do lado da lombada, espelhada da que a folha
       da direita ja tem. Sem isto as duas folhas leem-se como um rectangulo
       creme so, e a juncao desaparece. */
    box-shadow:
      inset -20px 0 24px rgba(53,38,20,.11),
      -8px 10px 22px rgba(0,0,0,.12);
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease .45s, visibility 0s linear .9s;
  }
  .livro-capa-troca:checked ~ .livro-capa-palco .livro-capa-rosto {
    opacity: 1; visibility: visible;
    transition-delay: .45s, 0s;
  }

  /* A superficie que fecha, por cima da folha da esquerda. So apanha cliques
     com o livro aberto — fechado, o rosto nem sequer esta visivel. */
  .livro-capa-fecha-esq {
    display: block; position: absolute; z-index: 4;
    top: 0; right: calc(100% + 6px);
    width: 100%; height: 100%;
    cursor: pointer; pointer-events: none;
  }
  .livro-capa-troca:checked ~ .livro-capa-palco .livro-capa-fecha-esq {
    pointer-events: auto;
  }
}

/* A chave da capa: escondida dos olhos, viva para o teclado. */
.livro-capa-troca {
  position: absolute; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none;
}
/* O ~ atravessa o palco: a checkbox e irma do PALCO, nao da capa — mudou de
   sitio para o :checked poder tambem alcancar o palco. Sem o
   .livro-capa-palco pelo meio, estes tres selectores nao correspondem a
   nada e o livro deixa de abrir. */
/* O FOCO SEGUE O QUE SE VE. Fechado, a checkbox e a capa: o anel marca a
   capa. Aberto, a capa esta virada para o lado e invisivel — o anel passa
   para o × que fecha, que e o que aquela tecla vai accionar. Sem isto, quem
   chega de Tab a um livro aberto via um anel a marcar nada. */
.livro-capa-troca:not(:checked):focus-visible ~ .livro-capa-palco .livro-capa-frente,
.livro-capa-troca:checked:focus-visible ~ .livro-capa-palco .livro-capa-fechar {
  outline: 3px solid var(--ep-preto); outline-offset: 3px;
}

/* A sombra no chao. Fica por baixo de tudo e nao apanha cliques. */
.livro-capa-palco::after {
  content: ""; position: absolute; z-index: 0;
  left: 50%; bottom: -18px; transform: translateX(-50%);
  width: 92%; height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,.22) 0%, rgba(0,0,0,.1) 42%, rgba(0,0,0,0) 74%);
  filter: blur(6px); pointer-events: none;
}

/* A FOLHA — e ela que define a altura da caixa, e por isso a capa que se
   lhe sobrepoe (inset: 0) fica sempre com a mesma proporcao. 480/340 e a
   proporcao das capas verticais, e a da imagem que ja esta carregada. */
.livro-capa-folha {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  min-height: 480px; padding: 2rem 1.75rem 1rem;
  background: var(--ep-creme);
  border-radius: 2px 8px 8px 2px;
  box-shadow:
    inset 20px 0 24px rgba(53,38,20,.11),
    0 10px 22px rgba(0,0,0,.12);
}

/* A superficie que fecha pela folha da esquerda so existe no desktop: no
   telemovel nao ha folha esquerda, e la o × e a unica via. */
.livro-capa-fecha-esq { display: none; }

/* O × que fecha. So existe depois de o livro abrir — antes nao ha nada para
   fechar, e um × sobre a capa lia-se como "sair da pagina". Aparece meio
   segundo depois, quando a capa ja acabou de virar. */
.livro-capa-fechar {
  position: absolute; z-index: 3; top: .5rem; right: .5rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; cursor: pointer;
  border: 1px solid rgba(107,101,82,.3); border-radius: 50%;
  font-family: Arial, Helvetica, sans-serif; font-size: 1.05rem; line-height: 1;
  color: var(--ep-cinza);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease .5s, visibility 0s linear .8s,
              background .15s ease, color .15s ease;
}
.livro-capa-fechar:hover {
  background: var(--ep-preto); color: var(--ep-branco); border-color: var(--ep-preto);
}
.livro-capa-troca:checked ~ .livro-capa-palco .livro-capa-fechar {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: .5s, 0s, 0s, 0s;
}

/* A vista: a janela por onde se ve uma pagina de cada vez. Sem JavaScript
   faz scroll — le-se tudo na mesma, so nao ha paginas. Com o livro.js
   passa a overflow:hidden e quem manda e o transform do fluxo. */
/* O ar por cima do texto e MARGEM da vista, nao padding do texto: a margem
   fica de fora da caixa que se quantiza, o padding ficava dentro e empurrava
   as linhas para fora da grelha. */
.livro-capa-vista { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: .8rem; }
.livro-capa-folha.tem-paginas .livro-capa-vista {
  overflow: hidden;
  /* O dedo: o vertical continua a ser do browser (rola a pagina), o
     horizontal fica para nos. Diz-se ao browser antes de o gesto comecar,
     em vez de o travar a meio com preventDefault — o resultado e o mesmo
     mas sem o solavanco do primeiro pixel. O JS trata do resto. */
  touch-action: pan-y;
}

/* A ENTRELINHA E EXPLICITA, e esta aqui e nao so na .livro-abertura: e
   deste elemento que o JS le a entrelinha real para arredondar a altura da
   vista a um multiplo inteiro dela. Herdada, mudava com a fonte de cada
   filho e a conta deixava de bater certo. */
.livro-capa-fluxo {
  /* A ENTRELINHA E UM COMPRIMENTO, NAO UM NUMERO — e e essa a peca que
     segura a grelha toda.
     Com `line-height: 1.7`, cada filho calculava 1.7 x o SEU tamanho: bastava
     o indice ter corpo menor para as suas linhas passarem a medir outra coisa
     e o corte voltar a cair a meio de uma linha. Sendo um comprimento, os
     filhos herdam-no tal e qual, seja qual for o font-size deles.
     A --ep-linha e a mesma medida, para quem precisar dela em margens: assim
     ha UM valor, e nao um numero repetido em cinco sitios. */
  --ep-linha: calc(.95rem * 1.7);
  font-size: .95rem;
  line-height: var(--ep-linha);
  transition: transform .55s cubic-bezier(.22,.72,.16,1);
}

/* O rosto e o cabecalho da folha: nome, subtitulo, contagem. Deixou de ter
   min-height: 100% quando saiu de dentro do fluxo paginado — la dentro era o
   que o fazia encher a pagina 1; aqui, como irmao da vista, encheria a folha
   toda e esmagava o texto contra o rodape. Agora ocupa o que precisa e a
   vista fica com o resto (flex: 1). */
.livro-capa-rosto {
  display: flex; flex-direction: column; flex: 0 0 auto;
  padding-bottom: 1rem;
}

/* FECHADO, AS SETAS SAO INERTES. Ficam atras da capa, mas sao <button> a
   serio: sem isto o Tab parava nelas com o livro fechado e o anel de foco
   marcava um sitio que ninguem ve. O visibility: hidden tira-as da ordem de
   tabulacao — o opacity sozinho nao tirava. */
.livro-capa-paginacao {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin: .5rem 0 0; padding-top: .6rem;
  border-top: 1px solid rgba(107,101,82,.22);
  visibility: hidden;
  transition: visibility 0s linear .8s;
}
.livro-capa-troca:checked ~ .livro-capa-palco .livro-capa-paginacao {
  visibility: visible; transition-delay: .5s;
}
.livro-capa-pag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0;
  border: 1px solid var(--ep-cinza-claro); border-radius: 50%;
  background: transparent; color: var(--ep-texto); cursor: pointer;
}
.livro-capa-pag:hover:not(:disabled) { background: var(--ep-preto); color: var(--ep-branco); border-color: var(--ep-preto); }
.livro-capa-pag:disabled { opacity: .3; cursor: default; }
.livro-capa-pag-conta {
  font-family: 'Courier New', Courier, monospace;
  font-size: .74rem; color: var(--ep-cinza);
}

.livro-capa-selo {
  margin: 0; font-family: 'Courier New', Courier, monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ep-cinza);
}
.livro-capa-nome {
  margin: auto 0 0; padding-top: 1.5rem;
  font-size: 1.6rem; line-height: 1.2; font-weight: normal;
  color: var(--ep-texto);
}
.livro-capa-sub {
  margin: .6rem 0 0; font-size: .95rem; line-height: 1.5;
  color: var(--ep-texto-suave);
}
.livro-capa-conta {
  margin: auto 0 0; padding-top: 1.5rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: .74rem; color: var(--ep-cinza);
}

/* A CAPA propriamente dita */
.livro-capa-frente {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
  display: flex; align-items: flex-end;
  cursor: pointer;
  border-radius: 3px 10px 10px 3px;
  transform-origin: 2px center;
  backface-visibility: hidden;
  background: linear-gradient(135deg, #101010 0%, #070707 45%, #020202 100%);
  box-shadow:
    inset 14px 0 20px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.08),
    8px 10px 16px rgba(0,0,0,.2);
  transition: transform 1.15s cubic-bezier(.22,.72,.16,1);
}

/* Aberta. O livro so abre ao clique — ninguem entra sem querer entrar.
   O pointer-events cai: aberta, a capa esta virada para o lado esquerdo do
   livro e invisivel (backface), e sem isto ficava ali uma area clicavel que
   ninguem ve e que fechava o livro por engano. Abre-se uma vez. */
.livro-capa-troca:checked ~ .livro-capa-palco .livro-capa-frente {
  transform: rotateY(-112deg); pointer-events: none;
}

/* A lombada. Fica por cima da imagem — e o unico sitio da capa onde a
   imagem nao manda, porque e ali que o livro se dobra. */
.livro-capa-frente::before {
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: 2; width: 20px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(to right,
              rgba(255,255,255,.12), rgba(255,255,255,.02) 32%, rgba(0,0,0,.42) 100%);
  box-shadow: 3px 0 7px rgba(0,0,0,.3);
}

.livro-capa-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* A faixa do titulo. Com imagem, e um degrade escuro em baixo — uma capa
   clara com texto branco por cima nao se le. Sem imagem, nao ha degrade
   nenhum e o titulo assenta no preto. */
.livro-capa-faixa {
  position: relative; z-index: 1;
  width: 100%; padding: 3.5rem 1.5rem 1.5rem 2rem;
}
.tem-imagem .livro-capa-faixa {
  background: linear-gradient(to top,
              rgba(0,0,0,.88) 0%, rgba(0,0,0,.65) 42%, rgba(0,0,0,0) 100%);
}
.livro-capa-titulo {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.35rem; font-weight: 700; line-height: 1.15;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ep-branco);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.livro-capa-chancela {
  display: block; margin-top: .6rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* O convite. Sem isto a capa e um rectangulo bonito que ninguem sabe que
   se pode abrir. Desaparece assim que abre — ja nao tem nada a dizer. */
.livro-capa-abrir {
  display: inline-block; margin-top: 1rem; padding: .3rem .8rem;
  border: 1px solid rgba(255,255,255,.5); border-radius: .3rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ep-branco);
  transition: opacity .3s ease;
}
.livro-capa-frente:hover .livro-capa-abrir { background: rgba(255,255,255,.14); }
.livro-capa-troca:checked ~ .livro-capa-palco .livro-capa-frente .livro-capa-abrir { opacity: 0; }

/* Quem desliga o movimento nao leva com a capa a rodar: abre e fecha na
   mesma, so sem o gesto. */
@media (prefers-reduced-motion: reduce) {
  .livro-capa-frente { transition-duration: .01ms; }
}

/* ---- TELEMOVEL ----
 * A altura manda aqui como manda no desktop, mas com um travao a mais: a
 * largura util. A conta esta escrita ao contrario de proposito —
 *
 *   width: min( a largura que ha , a largura que a altura permite )
 *
 * — porque com `height` fixa mais `max-width` a proporcao partia-se: a
 * largura era cortada e a altura ficava na mesma, e saia uma folha
 * estreita e comprida. Assim o lado que for mais apertado manda, e o
 * aspect-ratio tira sempre a altura da largura que ficou. O livro cabe nas
 * duas dimensoes por construcao, e nao por um numero afinado a olho.
 *
 * dvh E NAO vh. No telemovel a barra de endereco entra e sai, e o vh mede
 * o ecra COMO SE ela nao existisse — e por isso que a capa aparecia mais
 * alta do que a area visivel e ficava cortada em baixo. O vh fica na linha
 * de cima como recurso: quem nao percebe dvh ignora a segunda declaracao e
 * fica com a primeira, so um pouco mais folgada.
 *
 * 104px = 72 do cabecalho fixo (o mesmo que o body reserva no topo deste
 * ficheiro) + 2rem de folga. O cabecalho medido da ~80px onde o logotipo
 * cabe inteiro e ~62px num ecra estreito, onde ele encolhe por largura;
 * usa-se 72 porque e o numero que o proprio layout ja usa, e num telemovel
 * peca por generoso, que e o lado certo para pecar. */
@media (max-width: 575.98px) {
  .livro-capa { padding: 0 .75rem; }
  .livro-capa-palco {
    max-width: none;
    width: min(100%, calc((100vh - 104px) * 17 / 24));
    width: min(100%, calc((100dvh - 104px) * 17 / 24));
    height: auto;
    aspect-ratio: 17 / 24;
  }
  .livro-capa-folha { height: 100%; min-height: 0; padding: 1.6rem 1.4rem 1rem; }
  .livro-capa-nome { font-size: 1.35rem; }
  .livro-capa-titulo { font-size: 1.15rem; }
}

/* ---------------- Indice ---------------- */
.livro-total {
  font-family: 'Courier New', Courier, monospace;
  color: var(--ep-cinza); font-size: .8rem;
}
/* A abertura do livro: entre a capa e o indice. E prosa, nao uma legenda —
   por isso leva a serifa do corpo dos editais e a mesma coluna de 640/760,
   e nao a largura toda da pagina. */
.livro-abertura {
  max-width: 640px; margin: 0 auto 2.25rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.02rem; line-height: 1.8;
  color: var(--ep-texto-suave);
}
.livro-abertura p { margin: 0 0 1rem; }
.livro-abertura p:last-child { margin-bottom: 0; }

/* Dentro do livro a mesma abertura le-se numa coluna de 300px, nao de 640:
   o corpo desce e a entrelinha aperta, senao cada pagina levava tres linhas. */
/* Dentro do livro a mesma abertura vive numa grelha de linhas: nao leva
   font-size nem line-height proprios — herda-os do fluxo, que e de onde o JS
   os le. Dois valores para a mesma coisa acabavam por discordar, e a conta
   da quantizacao passava a usar o errado.

   O padding-top saiu daqui (foi para a margem da vista) e o espaco entre
   paragrafos e 1.7em — exactamente UMA entrelinha, porque o line-height e
   1.7 do mesmo font-size. Qualquer outro valor punha as linhas seguintes
   fora da grelha e o corte voltava a cair a meio de uma linha. */
.livro-capa-fluxo .livro-abertura {
  max-width: none; margin: 0; padding-top: 0;
  color: var(--ep-texto);
  /* HERDAR A REGUA, EXPLICITAMENTE. Sem estas duas linhas, a regra base
     .livro-abertura continuava a impor 1.02rem/1.8 aqui dentro: o texto
     compunha a 29,38px enquanto o JS media 25,84px no fluxo, e a
     quantizacao ficava a contar com uma regua que nao era a do texto —
     linhas cortadas a meio e uma pagina a mais no fim. Medido em
     2026-09-01: 822,06px de conteudo davam 31,81 "linhas" de 25,84 e
     28,00 linhas de 29,38. */
  font-size: inherit;
  line-height: inherit;
}
.livro-capa-fluxo .livro-abertura p { margin: 0 0 var(--ep-linha); }

/* ---- O INDICE DENTRO DO LIVRO ----
 * Tudo aqui esta ao servico de uma regra so: nenhuma linha pode ser cortada
 * a meio. Para isso, dentro do livro NAO ha altura que nao seja multiplo da
 * entrelinha.
 *
 * O QUE TEVE DE CAIR, E PORQUE
 *   · font-size proprio de cada parte. O line-height e o numero 1.7, logo
 *     cada elemento calcula 1.7 x o SEU tamanho: um numero a 1.1rem media
 *     29,9px onde o resto media 25,84px. Tudo a 1em.
 *   · as margens de .15rem e .35rem entre as linhas do item — 2,4px e 5,6px
 *     nao sao multiplos de nada.
 *   · as bordas de 1px entre itens. Um pixel por item e um pixel de desvio
 *     por item; ao decimo item o corte cai a meio de uma linha.
 *   · o padding de .85rem do <a>. O ar entre itens passa a ser UMA linha.
 *
 * Um item pode ficar a cavalo entre duas paginas — isso e aceitavel e nao
 * ha como evitar sem partir o HTML. Uma linha cortada e que nao.
 * ---------------------------------- */
/* O corpo do indice e menor que o da abertura — mas a entrelinha e a mesma,
   porque vem herdada como comprimento. Reduzir o font-size aqui ja nao mexe
   na grelha. */
.livro-capa-fluxo .livro-indice-nav { display: block; font-size: .82rem; }

/* margin: 0 de proposito. O afastamento antes do indice NAO e um valor de
   folha de estilo: e a folga que o livro.js calcula para o indice comecar no
   topo de uma pagina, e um margin-top escrito aqui somava-se-lhe. */
.livro-capa-fluxo .livro-indice { margin: 0; padding: 0; }
.livro-capa-fluxo .livro-indice-item,
.livro-capa-fluxo .livro-indice-item:first-child { border: 0; }
.livro-capa-fluxo .livro-indice-item { padding: 0 0 var(--ep-linha); }
.livro-capa-fluxo .livro-indice-item:last-child { padding-bottom: 0; }
.livro-capa-fluxo .livro-indice-item > a {
  display: flex; align-items: flex-start; gap: .6em;
  padding: 0; background: none;
}
.livro-capa-fluxo .livro-indice-num,
.livro-capa-fluxo .livro-indice-titulo,
.livro-capa-fluxo .livro-indice-numero,
.livro-capa-fluxo .livro-indice-intro {
  font-size: 1em; line-height: inherit; margin: 0;
}
.livro-capa-fluxo .livro-indice-num { flex: 0 0 1.8em; text-align: right; }
.livro-capa-fluxo .livro-indice-titulo { font-weight: bold; }

.livro-capa-fluxo .livro-abertura p:last-child { margin-bottom: 0; }
.livro-vazio {
  background: var(--ep-branco); border: 1px solid var(--ep-cinza-claro);
  border-radius: .5rem; padding: 1.5rem; color: var(--ep-cinza);
}

.livro-indice { list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: none; }
.livro-indice-item { border-bottom: 1px solid var(--ep-cinza-claro); }
.livro-indice-item:first-child { border-top: 1px solid var(--ep-cinza-claro); }
.livro-indice-item > a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem .25rem; text-decoration: none; color: var(--ep-texto);
}
.livro-indice-item > a:hover,
.livro-indice-item > a:focus-visible { background: var(--ep-hover); }
.livro-indice-num {
  flex: 0 0 2.5rem; text-align: right;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem; color: var(--ep-cinza);
}
.livro-indice-texto { display: block; }
.livro-indice-titulo { display: block; font-size: 1.05rem; }
.livro-indice-numero {
  display: block; font-family: 'Courier New', Courier, monospace;
  font-size: .78rem; color: var(--ep-cinza); margin-top: .15rem;
}
.livro-indice-intro {
  display: block; margin-top: .35rem;
  font-size: .9rem; line-height: 1.55; color: var(--ep-texto-suave);
}

.livro-accoes { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0; }

/* ---------------- Modo corrido ---------------- */
/* O aviso do tecto. Nao e decoracao: e o que impede que um corte se leia
   como fim do livro. Por isso tem fundo e nao passa por texto solto. */
.livro-tecto {
  background: var(--ep-creme-claro); border: 1px solid var(--ep-cinza-claro);
  border-radius: .5rem; padding: .85rem 1rem; margin: 1.5rem 0;
  font-size: .9rem; color: var(--ep-texto-suave);
}
.livro-tecto--topo { margin-top: 0; }
.livro-capitulo { scroll-margin-top: 5rem; }
.livro-capitulo-link { margin: 1.5rem 0 0; font-size: .9rem; }

/* ---------------- ANTERIOR / SEGUINTE ---------------- */
/* O painel de navegacao do livro: barra creme, duas filas. Em cima onde se
   esta, em baixo para onde se pode ir. Nao ha ca border-top — a propria
   barra separa o capitulo do que vem a seguir. */
.livro-nav {
  max-width: 760px; margin: 2.5rem auto 1rem;
  padding: .85rem;
  background: var(--ep-creme); color: var(--ep-texto);
  border-radius: .75rem;
}

.livro-nav-topo {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  text-align: center; margin-bottom: .7rem;
}
.livro-nav-livro {
  font-size: .95rem; color: var(--ep-texto); text-decoration: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.livro-nav-livro:hover,
.livro-nav-livro:focus-visible { color: var(--ep-preto); text-decoration: underline; }
.livro-nav-conta {
  font-family: 'Courier New', Courier, monospace;
  font-size: .74rem; color: var(--ep-cinza);
}

/* GRELHA DE TRES COLUNAS, e nao flex: as laterais sao 1fr cada, por isso o
   Indice e o Ler tudo caem no centro exacto da barra mesmo quando um dos
   lados e so uma seta inerte. Com flex, o centro deslizava. */
.livro-nav-linha {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: .5rem;
}

.livro-nav-botao {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem;
  border: 1px solid var(--ep-preto); border-radius: .35rem;
  background: var(--ep-preto); color: var(--ep-branco); text-decoration: none;
  font-size: .78rem; line-height: 1.25; white-space: nowrap;
}
.livro-nav-anterior { grid-column: 1; justify-self: start; }
.livro-nav-seguinte { grid-column: 3; justify-self: end; }
a.livro-nav-botao:hover,
a.livro-nav-botao:focus-visible { background: var(--ep-branco); color: var(--ep-preto); }

/* Extremos: e um <span>, nao um <a>. Um link que nao leva a lado nenhum
   anuncia-se ao teclado e ao leitor de ecra como destino, e nao e. Sem
   palavras e sem preto — so a seta esbatida, para a barra nao perder a
   simetria mas tambem nao prometer accao onde nao ha. */
.livro-nav-botao.is-inerte {
  background: transparent; border-color: var(--ep-cinza-claro);
  color: var(--ep-cinza); opacity: .55; cursor: default;
  padding: .35rem .5rem;
}

.livro-nav-rotulo {
  font-family: 'Courier New', Courier, monospace;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
}

.livro-nav-accoes {
  grid-column: 2; justify-self: center;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
}
.livro-nav-accao {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem;
  border: 1px solid var(--ep-preto); border-radius: .35rem;
  font-size: .78rem; color: var(--ep-texto); text-decoration: none;
  white-space: nowrap;
}
.livro-nav-accao:hover,
.livro-nav-accao:focus-visible { background: var(--ep-preto); color: var(--ep-branco); }

/* Enquanto o capitulo novo nao chega. Sem isto um clique numa ligacao lenta
   nao dava sinal nenhum e parecia que nada acontecera. */
.livro-nav.is-a-carregar { opacity: .6; }
.livro-nav.is-a-carregar a { pointer-events: none; }

/* No telemovel as pontas ficam so com a seta. O "Anterior"/"Seguinte" nao
   desaparece — fica visually-hidden, para o leitor de ecra continuar a saber
   o que aquele chevron faz. Com display:none o link ficava sem nome. */
@media (max-width: 575.98px) {
  .livro-nav { padding: .7rem; }
  .livro-nav-linha { gap: .35rem; }
  .livro-nav-botao { padding: .35rem .5rem; }
  .livro-nav-rotulo {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .livro-nav-accao { padding: .35rem .55rem; font-size: .74rem; }
}

@media (max-width: 419.98px) {
}
/* =============================================================
 * O LIVRO DENTRO DE UM CAPÍTULO (2026-09-18)
 *
 * A capa no fim do texto e as setas laterais. A capa REUTILIZA as classes da
 * categoria — .livro-capa-frente, -img, -faixa, -titulo, -chancela — e o
 * creme do .livro-nav. O que se escreve aqui é só o que não existia: o
 * invólucro que dá tamanho à capa, a disposição, e as setas.
 * ============================================================= */

/* ---- A linha do topo ----
   "Desadultando · capítulo 2 de 5", dentro do doc-meta. Herda a cor e a letra
   da linha — o Courier cinzento — em vez do azul de link por omissão, que a
   tornava a coisa mais visível do cabeçalho, acima do próprio título. O
   sublinhado pontilhado diz que é link sem gritar. */
.doc-meta-livro {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: .2em;
}
.doc-meta-livro:hover,
.doc-meta-livro:focus-visible { color: var(--ep-preto); text-decoration-style: solid; }

/* ---- A capa no fim ---- */
/* No telemóvel, empilhada: a capa em cima, centrada, e o texto por baixo.
   Lado a lado numa largura de telemóvel a capa ficava do tamanho de um selo
   e o texto espremido numa coluna de três palavras. A partir dos 576px fica
   ao lado (ver abaixo). */
.livro-nav--capa {
  display: grid; grid-template-columns: 1fr; justify-items: center;
  gap: 1.25rem; padding: 1.25rem; text-align: center;
}

/* O invólucro. A .livro-capa-frente é position:absolute e não tem tamanho
   próprio — na categoria herda-o do palco. Aqui é este a dar-lho, com a
   mesma proporção 17/24. */
.livro-nav-capa {
  position: relative; display: block; aspect-ratio: 17 / 24;
  width: 11rem; text-decoration: none;
}
/* A mesma capa, mais pequena. Só medidas: a imagem, o degradé, a lombada, a
   sombra e as cores vêm todas das regras da categoria. */
.livro-nav-capa .livro-capa-faixa    { padding: 1.4rem .55rem .6rem .85rem; }
.livro-nav-capa .livro-capa-titulo   { font-size: .85rem; letter-spacing: .03em; }
.livro-nav-capa .livro-capa-chancela { margin-top: .3rem; font-size: .48rem; letter-spacing: .14em; }
.livro-nav-capa .livro-capa-frente::before { width: 10px; }

.livro-nav-miolo { min-width: 0; justify-self: stretch; }
.livro-nav-serie {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .15rem .6rem; margin: 0;
}
.livro-nav-serie a { font-size: 1.05rem; color: var(--ep-texto); text-decoration: none; }
.livro-nav-serie a:hover,
.livro-nav-serie a:focus-visible { text-decoration: underline; }
.livro-nav-frase {
  margin: .35rem 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .95rem; line-height: 1.5; color: var(--ep-texto-suave);
}

/* A acção principal é o btn-dark da casa — o mesmo do "Ler o edital em
   vigor". Só se lhe tira o nowrap: o título do capítulo pode ter duas linhas. */
.livro-nav-principal {
  display: block; margin-top: .9rem; padding: .6rem .9rem;
  text-align: inherit; white-space: normal;
}
.livro-nav-etiqueta {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ep-creme);
}
.livro-nav-destino { display: block; font-size: .95rem; line-height: 1.3; }
.livro-nav-secundarias {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .75rem 0 0;
}

@media (min-width: 576px) {
  .livro-nav--capa {
    grid-template-columns: 9.5rem 1fr; justify-items: stretch; align-items: center;
    gap: 1.5rem; padding: 1.5rem; text-align: left;
  }
  .livro-nav-capa { width: auto; }
  .livro-nav-serie,
  .livro-nav-secundarias { justify-content: flex-start; }
}

/* ---- As setas laterais ----
 * UM ENRIQUECIMENTO PARA ECRÃS GRANDES. A navegação principal é a capa, que
 * existe em todas as larguras; abaixo dos 1024px as setas não existem. */
.livro-seta { display: none; }

@media (min-width: 1024px) {
  .livro-seta {
    position: fixed; top: 50%; z-index: 20;
    display: flex; align-items: center; gap: .6rem;
    transform: translateY(-50%);
    color: var(--ep-texto); text-decoration: none;
    opacity: .6; transition: opacity .2s ease;
  }
  .livro-seta--anterior { left: .75rem; }
  .livro-seta--seguinte { right: .75rem; flex-direction: row-reverse; text-align: right; }
  .livro-seta:hover,
  .livro-seta:focus-visible { opacity: 1; }
  .livro-seta:focus-visible { outline: 3px solid var(--ep-preto); outline-offset: 3px; border-radius: .6rem; }

  .livro-seta-icone {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--ep-cinza-claro); border-radius: 50%;
    /* Creme escurecido em repouso: é a cor das folhas do livro, e a seta é a
       porta para a folha seguinte. Mistura-se com o cinza da paleta em vez de
       inventar uma cor solta — o :root pede "usar sempre as variáveis". O
       preto fica para o hover e o foco. */
    background: color-mix(in srgb, var(--ep-creme) 78%, var(--ep-cinza));
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
  }
  .livro-seta:hover .livro-seta-icone,
  .livro-seta:focus-visible .livro-seta-icone {
    background: var(--ep-preto); color: var(--ep-branco); border-color: var(--ep-preto);
  }

  /* O painel não existe abaixo dos 1216px: não cabe entre a seta e o texto. */
  .livro-seta-painel { display: none; }
}

@media (min-width: 1216px) {
  /* A LARGURA É O ESPAÇO QUE HÁ, e não um número escolhido a olho: vai da
     seta (0,75rem + 2,75rem + 0,6rem) até à coluna de texto, que tem 760px
     e está centrada — menos meia barra de scroll e uma folga de 1rem.
     Aos 1216px dá ~136px; a partir dos ~1400 fica nos 15rem. Pode passar por
     cima da borda do cartão; nunca por cima de texto que esteja a ser lido. */
  .livro-seta:hover .livro-seta-painel,
  .livro-seta:focus-visible .livro-seta-painel {
    display: block;
    width: min(15rem, calc((100vw - 760px) / 2 - 5.75rem));
    padding: .6rem;
    background: var(--ep-creme);
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
  }
  .livro-seta-painel picture { display: block; }
  .livro-seta-img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: .3rem; margin-bottom: .45rem;
  }
  .livro-seta-rotulo {
    display: block;
    font-family: 'Courier New', Courier, monospace;
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ep-cinza);
  }
  .livro-seta-titulo { display: block; font-size: .85rem; line-height: 1.3; color: var(--ep-texto); }
}

@media (prefers-reduced-motion: reduce) {
  .livro-seta { transition: none; }
}
@media print {
  .livro-seta { display: none !important; }
}

/* =============================================================
 * Painéis de IA — "Conheci o meu amor numa IA" (02)
 * Duas variantes: --produto (UI que o utilizador vê)
 *                 --thinking (raciocínio interno, só o leitor vê)
 * ============================================================= */

.ia-painel {
  max-width: 760px;
  margin: 1.5rem auto;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--ep-cinza-claro);
  border-radius: .5rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: .9rem;
  line-height: 1.6;
}

.ia-painel p { margin: .35rem 0; }
.ia-painel ul { margin: .35rem 0 .75rem 1.25rem; padding-left: 0; }
.ia-painel li { margin: .2rem 0; }

.ia-painel-cabeca {
  color: var(--ep-cinza);
  font-size: .82rem;
  margin-bottom: .8rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ia-painel-sep {
  border: none;
  border-top: 1px solid var(--ep-cinza-claro);
  margin: .9rem 0;
}

.ia-preview-bloqueado {
  color: var(--ep-texto-suave);
}

.ia-painel-recomenda {
  margin-top: .8rem !important;
  color: var(--ep-texto-suave);
}

/* Variante 1 — painel comercial visível ao utilizador (creme) */
.ia-painel--produto {
  background: var(--ep-creme-claro);
  border-color: var(--ep-cinza-claro);
}

/* Variante 2 — raciocínio interno, só o leitor lê (mais cinzento, "bastidor") */
.ia-painel--thinking {
  background: var(--ep-hover);
  border-left: 3px solid var(--ep-cinza);
  color: var(--ep-texto-suave);
}
.ia-painel--thinking .ia-painel-cabeca {
  color: var(--ep-cinza);
}

/* Um capitulo na montra e um cartao de edital igual a todos os outros.
   A UNICA diferenca e este icone, que leva ao indice do livro. Fica entre
   as contagens e o botao — o justify-content-between do rodape ja o poe ao
   meio, sem regra de posicionamento nenhuma. */
.card-icone-livro {
  color: var(--ep-stats); font-size: 1.15rem; line-height: 1;
  text-decoration: none; padding: .15rem .4rem; border-radius: .25rem;
}
.card-icone-livro:hover,
.card-icone-livro:focus-visible { color: var(--ep-branco); background: rgba(255,255,255,.12); }

/* =============================================================
   BOTÃO DE MENU EM MOBILE (2026-08-16)

   Estava fixo ao centro do topo (start-50 + translate-middle-x + top:8px).
   Em ecrã estreito o logótipo cresce para debaixo dele e o botão fica-lhe
   por cima. Passa para o canto inferior direito.

   Os !important não são preguiça: as classes vêm do Bootstrap e já os
   trazem — .start-50 é `left: 50% !important`, .translate-middle-x é
   `transform: translateX(-50%) !important` — e o próprio .menu-btn já
   tem `top: 8px !important`. Sem eles o botão não sai do sítio.
   O bottom e o right dispensam-nos: nada lhes toca.

   768px é o mesmo limiar dos outros três ajustes de mobile deste
   ficheiro, para não haver duas noções de "ecrã pequeno".
   ============================================================= */
@media (max-width: 768px) {
  .menu-btn {
    top: auto !important;
    bottom: 1.25rem;
    left: auto !important;
    right: 1.25rem;
    transform: none !important;
  }
}