:root {
  --yellow: #f2a81d;
  --yellow-light: #fbd46a;
  --ink: #141008;
  --gold: #c98a16;
  --paper: #fdf6e3;
  --wood: #2c190c;
  --wood-dark: #160d07;
  --green: #264a32;
  --font-display: "Avenir Next Condensed", "Arial Narrow", Impact, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-script: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pnab-height: clamp(2.8rem, min(12.5vw, 8.5dvh), 5.5rem);
  color-scheme: only light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  /* O dourado volta a ser o fundo do documento: é ele que o navegador
     pinta no intervalo entre uma página e outra, e o preto virava um
     flash no meio da transição. As barras do navegador ficam pretas
     pelo theme-color, que é onde elas realmente se decidem. */
  background: var(--yellow);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  font-family: var(--font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.entry-page,
.shelf-page {
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
}

.entry-hero,
.shelf-hero {
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.entry-hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.shelf-hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.entry-stage,
.shelf-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.scene-picture {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}

.scene-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.scene-picture--shelf::after {
  position: absolute;
  inset: auto 0 0;
  height: 31%;
  background: linear-gradient(to bottom, transparent, rgba(10, 5, 2, 0.38));
  content: "";
}

.ornamental-frame {
  position: absolute;
  z-index: 8;
  inset: clamp(0.38rem, 1.2vw, 0.8rem);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 5px var(--ink);
  pointer-events: none;
}

.ornamental-frame::before,
.ornamental-frame::after {
  position: absolute;
  content: "";
}

.ornamental-frame::before {
  inset: clamp(0.42rem, 1vw, 0.7rem);
  border: 1px solid var(--gold);
}

.ornamental-frame::after {
  inset: clamp(0.7rem, 1.5vw, 1rem);
  border: 1px solid rgba(20, 16, 8, 0.72);
}

.ornamental-frame--shelf {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 2px rgba(20, 16, 8, 0.78);
}

.frame-corner {
  position: absolute;
  z-index: 2;
  width: clamp(1.35rem, 2.4vw, 2.35rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold) 0 11%, transparent 12% 25%, var(--ink) 26% 31%, transparent 32%),
    conic-gradient(from 22.5deg, var(--ink) 0 8%, transparent 8% 17%, var(--ink) 17% 25%, transparent 25% 34%, var(--ink) 34% 42%, transparent 42% 50%, var(--ink) 50% 58%, transparent 58% 67%, var(--ink) 67% 75%, transparent 75% 84%, var(--ink) 84% 92%, transparent 92%);
}

.frame-corner--tl {
  top: 0.32rem;
  left: 0.32rem;
}

.frame-corner--tr {
  top: 0.32rem;
  right: 0.32rem;
}

.frame-corner--bl {
  bottom: 0.32rem;
  left: 0.32rem;
}

.frame-corner--br {
  right: 0.32rem;
  bottom: 0.32rem;
}

/* Tela 1 */

.entry-stage {
  padding: clamp(0.9rem, 2.4dvh, 1.7rem) clamp(0.9rem, 4vw, 1.8rem);
}

.entry-copy {
  position: relative;
  z-index: 2;
  width: min(83vw, 20.5rem);
  margin-left: clamp(0.35rem, 2vw, 0.9rem);
  animation: rise-in 700ms 100ms both;
}

.entry-title {
  margin: 0;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(253, 246, 227, 0.22);
}

.entry-title__library {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, min(13.5vw, 9.8dvh), 4.7rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.86;
}

.entry-title__enchanted {
  display: block;
  margin: 0.06em 0 0 0.04em;
  font-family: var(--font-script);
  font-size: clamp(3.15rem, min(15.2vw, 10.8dvh), 5.2rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.82;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.title-divider,
.shelf-divider {
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.title-divider {
  margin: clamp(0.45rem, 1.2dvh, 0.9rem) 0 clamp(0.35rem, 1dvh, 0.65rem);
}

.title-divider span,
.shelf-divider span {
  height: 2px;
  flex: 1;
  background: var(--ink);
}

.title-divider i,
.shelf-divider i {
  width: 0.64rem;
  aspect-ratio: 1;
  background: var(--ink);
  transform: rotate(45deg);
}

.entry-kicker {
  max-width: 19rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, min(3.5vw, 2.2dvh), 1.02rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
}

.entry-kicker strong {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.22em;
}

.solar-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin: clamp(0.42rem, 1.1dvh, 0.78rem) 0;
  padding: clamp(0.22rem, 0.6dvh, 0.36rem) 0.65rem;
  border: 2px solid var(--gold);
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
  color: var(--yellow-light);
  font-family: var(--font-display);
  font-size: clamp(0.68rem, min(3vw, 1.9dvh), 0.9rem);
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.solar-seal img {
  width: clamp(1.15rem, min(6vw, 3dvh), 1.85rem);
  height: auto;
}

.entry-description {
  max-width: 18rem;
  margin: clamp(0.35rem, 0.8dvh, 0.6rem) auto 0;
  font-family: var(--font-serif);
  font-size: clamp(0.66rem, min(3.1vw, 1.9dvh), 0.82rem);
  line-height: 1.32;
  text-align: center;
}

.portal-anchor-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  container-type: size;
  pointer-events: none;
}

.portal-cluster {
  position: absolute;
  top: calc(50cqh - 11.85cqw);
  left: 84.31cqw;
  width: 20.2cqw;
  translate: -50% -50%;
  text-align: center;
  animation: portal-arrival 900ms 280ms both;
}

.portal-button {
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-script);
  line-height: 0.82;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(253, 246, 227, 0.35), 0 0 0.7rem rgba(253, 246, 227, 0.24);
  transition: filter 180ms ease, transform 180ms ease;
  pointer-events: auto;
}

.portal-button span,
.portal-button strong {
  display: block;
  font-size: clamp(1.35rem, min(6.4vw, 4dvh), 2.2rem);
  font-weight: 700;
}

.portal-button strong {
  margin-top: 0.16em;
  font-size: clamp(1.6rem, min(7.3vw, 4.7dvh), 2.6rem);
}

.portal-button:hover {
  transform: scale(1.035);
  filter: drop-shadow(0 0 0.55rem rgba(253, 246, 227, 0.82));
}

.portal-cluster p {
  position: absolute;
  top: calc(100% + clamp(0.08rem, 0.45cqh, 0.35rem));
  left: 50%;
  width: clamp(8rem, 88%, 16rem);
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(0.5rem, min(2.45vw, 1.45dvh), 0.7rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.17;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.entry-author {
  position: absolute;
  z-index: 3;
  bottom: clamp(0.75rem, 2dvh, 1.4rem);
  left: clamp(1.5rem, 6vw, 2.1rem);
  margin: 0;
  padding: 0.28rem 0.62rem;
  border: 2px solid var(--gold);
  background: var(--ink);
  color: var(--yellow-light);
  font-family: var(--font-serif);
  font-size: clamp(1rem, min(5.4vw, 3.2dvh), 2.2rem);
  font-variant: small-caps;
  letter-spacing: 0.025em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.recognition-band {
  position: relative;
  z-index: 10;
  width: 100%;
  height: var(--recognition-height);
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  background: #080604;
}

.recognition-band img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ambient-bird {
  position: absolute;
  z-index: 2;
  width: 1.7rem;
  height: 0.8rem;
  opacity: 0.8;
  animation: bird-drift 15s linear infinite;
}

.ambient-bird::before,
.ambient-bird::after {
  position: absolute;
  top: 0.1rem;
  width: 0.95rem;
  height: 0.52rem;
  border-top: 3px solid var(--ink);
  border-radius: 50%;
  content: "";
}

.ambient-bird::before {
  left: 0;
  transform: rotate(15deg);
}

.ambient-bird::after {
  right: 0;
  transform: rotate(-15deg);
}

.ambient-bird--one {
  top: 33%;
  left: -3rem;
}

.ambient-bird--two {
  top: 24%;
  left: -6rem;
  animation-delay: -5s;
  animation-duration: 19s;
  transform: scale(0.7);
}

.ambient-bird--three {
  top: 37%;
  left: -2rem;
  animation-delay: -11s;
  animation-duration: 23s;
  transform: scale(0.5);
}

.universe-transition {
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 78% 35%, var(--paper) 0 1%, var(--yellow-light) 3%, var(--yellow) 9%, rgba(201, 138, 22, 0.94) 18%, rgba(20, 16, 8, 0.95) 38%, var(--ink) 66%),
    var(--ink);
  transform: scale(0.04);
  transform-origin: 78% 35%;
  transition: opacity 180ms ease, transform 760ms cubic-bezier(0.7, 0, 0.2, 1);
}

.is-crossing-universe .universe-transition {
  opacity: 1;
  transform: scale(2.4);
}

/* Tela 2 */

.shelf-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(0.2rem, 0.8dvh, 0.65rem);
  padding: clamp(0.78rem, 2.1dvh, 1.45rem) clamp(0.55rem, 2.1vw, 1.6rem) clamp(0.35rem, 0.8dvh, 0.72rem);
  background: var(--wood-dark);
}

.shelf-header {
  position: relative;
  z-index: 2;
  width: min(92%, 70rem);
  margin: 0 auto;
  color: var(--ink);
  text-align: center;
  animation: rise-in 700ms both;
}

.shelf-author {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.57rem, min(2.5vw, 1.55dvh), 0.95rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.shelf-header h1 {
  margin: 0.08rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.05rem, min(10vw, 7.5dvh), 7rem);
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 0.83;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(253, 246, 227, 0.24);
}

.shelf-header h1 span {
  display: block;
  margin-top: 0.13em;
  font-size: 0.47em;
  letter-spacing: 0.025em;
}

.shelf-subtitle {
  margin: clamp(0.32rem, 0.8dvh, 0.65rem) 0 0;
  font-family: var(--font-serif);
  font-size: clamp(0.57rem, min(2.5vw, 1.45dvh), 0.95rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.shelf-divider {
  width: min(16rem, 70%);
  margin: clamp(0.28rem, 0.65dvh, 0.6rem) auto 0;
}

.book-carousel {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: clamp(2.7rem, 11vw, 3.4rem) minmax(0, 1fr) clamp(2.7rem, 11vw, 3.4rem);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding-bottom: clamp(1rem, 2.7dvh, 1.55rem);
}

.book-grid {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.book-card {
  --larg-card: min(72vw, 19rem);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  width: var(--larg-card);
  height: 100%;
  min-width: 0;
  min-height: 0;
  color: var(--paper);
  text-decoration: none;
  opacity: 0;
  transform: translateY(0.8rem) scale(0.985);
  transition: opacity 350ms ease, transform 350ms ease;
}

.book-card.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   LIVRO FÍSICO — apresentação web da estante.
   A capa entra INTEIRA como face frontal (sem crop, sem borda
   de quadro). Lombada, espessura, miolo e sombra de contato são
   construídos por CSS — nenhuma arte é redesenhada.
   As capas mestras e os PDFs continuam planos (regra 8).
   --espessura controla a lombada; --giro, a perspectiva.
   ============================================================ */
.book-cover {
  --espessura: clamp(0.5rem, 1.5cqw, 0.95rem);
  --giro: 5deg;
  position: relative;
  display: block;
  /* A imagem governa o tamanho: altura limitada pelo espaço, largura
     derivada da proporção real do arquivo. Assim a capa nunca é
     cortada nem achatada, em nenhum viewport. */
  width: auto;
  /* a altura considera os dois limites: o espaço vertical e o que a
     largura do card permite. Assim a proporção A5 nunca cede. */
  height: min(52dvh, 29rem, calc((var(--larg-card) - var(--espessura) * 2) * 210 / 148));
  /* O 52dvh acima mede a TELA, não a célula onde a capa vive: ele não
     desconta o cabeçalho da estante nem a legenda embaixo. No celular
     de verdade, com as barras do navegador comendo altura, a conta
     estourava a célula e — por causa do align-self: end — o excesso
     saía pelo TOPO, decepando a borda de cima do livro. Este limite
     prende a capa na célula; a largura acompanha pelo aspect-ratio.
     O desconto é o respiro para o nome do autor logo acima — sem ele
     a capa encosta na linha de cima em tela baixa. */
  max-height: calc(100% - clamp(0.4rem, 1.5dvh, 0.85rem));
  aspect-ratio: 148 / 210;
  align-self: end;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: perspective(1400px) rotateY(calc(var(--giro) * -1)) translateZ(0);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 320ms ease, filter 320ms ease;
  filter: drop-shadow(0.55rem 0.75rem 0.85rem rgba(10, 5, 2, 0.5));
}

/* face frontal: a capa inteira, sem recorte */
.book-cover img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0.06rem 0.16rem 0.16rem 0.06rem;
  background: var(--yellow);
}

/* lombada: sai do lado esquerdo, na profundidade */
.book-cover::before {
  position: absolute;
  z-index: 1;
  top: 0.5%;
  left: calc(var(--espessura) * -1);
  width: var(--espessura);
  height: 99%;
  border-radius: 0.14rem 0 0 0.14rem;
  background:
    linear-gradient(90deg,
      rgba(10, 6, 2, 0.96) 0%,
      rgba(32, 22, 8, 0.9) 34%,
      rgba(12, 8, 3, 0.94) 78%,
      rgba(4, 3, 1, 0.98) 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.5);
  content: "";
  transform: rotateY(52deg);
  transform-origin: right center;
  pointer-events: none;
}

/* miolo: folhas empilhadas na borda direita + sombra de contato */
.book-cover::after {
  position: absolute;
  z-index: 3;
  top: 1.1%;
  right: calc(var(--espessura) * -0.62);
  width: calc(var(--espessura) * 0.62);
  height: 97.8%;
  border-radius: 0 0.1rem 0.1rem 0;
  background:
    repeating-linear-gradient(90deg,
      #efe3c6 0 1px,
      #cbb98d 1px 2px,
      #f6ecd4 2px 3px);
  box-shadow: inset -2px 0 3px rgba(60, 42, 12, 0.5);
  content: "";
  pointer-events: none;
}

.book-card:hover .book-cover,
.book-card:focus-visible .book-cover {
  transform: perspective(1400px) rotateY(calc(var(--giro) * -0.45)) translateY(-0.2rem);
  filter: drop-shadow(0.7rem 0.95rem 1.1rem rgba(10, 5, 2, 0.56));
}

/* sombra de contato na bancada, presa ao pé do livro */
.book-cover-wrap,
.book-card .book-cover {
  isolation: isolate;
}

@media (prefers-reduced-motion: reduce) {
  .book-cover,
  .book-card:hover .book-cover {
    transition: none;
  }
}

.book-cover picture {
  display: block;
  width: 100%;
  height: 100%;
}

.book-caption {
  display: grid;
  grid-template-columns: clamp(2rem, 8vw, 2.6rem) 1fr;
  align-items: center;
  gap: clamp(0.38rem, 1.5vw, 0.65rem);
  width: min(100%, 18rem);
  min-height: clamp(2.5rem, 6.5dvh, 3.8rem);
  margin-top: clamp(0.34rem, 1dvh, 0.72rem);
  font-family: var(--font-serif);
  font-size: clamp(0.68rem, min(3.2vw, 1.8dvh), 0.87rem);
  line-height: 1.18;
  text-shadow: 0 1px 2px rgba(10, 5, 2, 0.8);
}

.book-caption img {
  width: clamp(2rem, 8vw, 2.6rem);
  height: auto;
}

.book-card--memory .book-cover {
  background: var(--paper);
  box-shadow: 0.5rem 0.7rem 1rem rgba(10, 5, 2, 0.48), inset 0 0 0 2px var(--green);
}

.carousel-arrow {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: clamp(2.65rem, 10vw, 3.25rem);
  height: clamp(2.65rem, 10vw, 3.25rem);
  margin: 0 auto;
  padding: 0;
  border: 1px solid rgba(251, 212, 106, 0.72);
  border-radius: 50%;
  background: rgba(20, 16, 8, 0.82);
  box-shadow: 0 0.35rem 0.9rem rgba(10, 5, 2, 0.38);
  color: var(--yellow-light);
  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.carousel-arrow svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-arrow:hover:not(:disabled) {
  background: var(--ink);
  transform: scale(1.06);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.carousel-status {
  position: absolute;
  right: 3.3rem;
  bottom: 0;
  left: 3.3rem;
  margin: 0;
  color: var(--yellow-light);
  font-family: var(--font-display);
  font-size: clamp(0.58rem, 2.6vw, 0.74rem);
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px var(--ink);
  text-transform: uppercase;
}

.shelf-closing {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: min(90%, 58rem);
  margin: 0 auto 0.22rem;
  padding-top: clamp(0.28rem, 0.7dvh, 0.65rem);
  border-top: 1px solid var(--gold);
  color: var(--yellow-light);
  font-family: var(--font-serif);
  font-size: clamp(0.58rem, min(2.65vw, 1.5dvh), 0.78rem);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-shadow: 0 1px 2px var(--ink);
  white-space: nowrap;
}

.shelf-closing span {
  color: var(--yellow);
  font-size: 1.12em;
}

/* Régua PNAB — sempre dentro do viewport */

.pnab-strip {
  --pnab-pad-block: clamp(0.25rem, 0.7dvh, 0.58rem);
  --pnab-pad-inline: clamp(0.5rem, 2.5vw, 2rem);
  position: relative;
  z-index: 12;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--pnab-height);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border-top: 1px solid rgba(20, 16, 8, 0.16);
  background: #fff;
}

.pnab-strip picture {
  position: absolute;
  inset: var(--pnab-pad-block) var(--pnab-pad-inline) max(var(--pnab-pad-block), env(safe-area-inset-bottom));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.pnab-strip img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  transform: scale(1.2);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes portal-arrival {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes portal-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(251, 212, 106, 0.42), 0 0 2.2rem rgba(253, 246, 227, 0.72);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(251, 212, 106, 0.6), 0 0 3.1rem rgba(253, 246, 227, 0.98);
  }
}

@keyframes bird-drift {
  from {
    translate: 0 0;
  }
  45% {
    translate: 54vw -0.8rem;
  }
  to {
    translate: 110vw 0.35rem;
  }
}

@media (min-width: 45rem) {
  .entry-stage {
    padding: clamp(2rem, 5dvh, 4rem) clamp(3.3rem, 6vw, 6rem) clamp(1rem, 2dvh, 1.7rem);
  }

  .entry-copy {
    width: min(38vw, 31rem);
    margin-left: 0;
  }

  .entry-title__library {
    font-size: clamp(3.6rem, min(6.8vw, 10.5dvh), 6.7rem);
  }

  .entry-title__enchanted {
    font-size: clamp(4rem, min(7.6vw, 11.7dvh), 7.3rem);
  }

  .entry-kicker {
    max-width: 26rem;
    font-size: clamp(0.86rem, min(1.55vw, 2.2dvh), 1.35rem);
  }

  .solar-seal {
    margin-top: clamp(0.55rem, 1.1dvh, 0.95rem);
    font-size: clamp(0.8rem, min(1.2vw, 1.8dvh), 1.08rem);
  }

  .entry-description {
    max-width: 24rem;
    margin-left: 0.8rem;
    font-size: clamp(0.78rem, min(1.15vw, 1.8dvh), 1.05rem);
    text-align: left;
  }

  .portal-button span,
  .portal-button strong {
    font-size: clamp(1.8rem, min(3.1vw, 4.3dvh), 3.15rem);
  }

  .portal-button strong {
    font-size: clamp(2.1rem, min(3.8vw, 5.3dvh), 3.8rem);
  }

  .portal-cluster p {
    width: min(88%, 17rem);
    font-size: clamp(0.58rem, min(0.83vw, 1.25dvh), 0.84rem);
  }

  .entry-author {
    bottom: clamp(0.75rem, 1.6dvh, 1.3rem);
    left: clamp(3.3rem, 6vw, 6rem);
    padding: 0.35rem 1.15rem;
    font-size: clamp(1.7rem, min(3.5vw, 4.5dvh), 3.7rem);
  }

  .shelf-stage {
    padding: clamp(1.2rem, 2.6dvh, 2rem) clamp(1.4rem, 2.6vw, 2.5rem) clamp(0.45rem, 1dvh, 0.85rem);
  }

  .shelf-header h1 {
    font-size: clamp(3.5rem, min(7.2vw, 8.6dvh), 7rem);
  }

  .shelf-author,
  .shelf-subtitle {
    font-size: clamp(0.7rem, min(1.2vw, 1.55dvh), 0.98rem);
  }

  .book-card {
    --larg-card: min(43vw, 20rem);
    width: var(--larg-card);
  }

  .shelf-closing {
    font-size: clamp(0.78rem, min(1.65vw, 2.1dvh), 1.55rem);
  }
}

@media (min-width: 64rem) and (min-height: 42rem) {
  .book-carousel {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .carousel-arrow,
  .carousel-status {
    display: none;
  }

  .book-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.9rem, 2vw, 2rem);
    width: min(92%, 88rem);
    height: 100%;
    margin: 0 auto;
    overflow: visible;
  }

  .book-card,
  .book-card[hidden] {
    display: grid !important;
    width: 100%;
    height: 100%;
  }

  .book-cover {
    max-height: min(43dvh, 27rem);
  }

  .book-caption {
    width: min(100%, 18rem);
    min-height: clamp(2.9rem, 6.3dvh, 4rem);
    font-size: clamp(0.7rem, min(0.92vw, 1.55dvh), 0.96rem);
  }

  .book-caption img {
    width: clamp(2.1rem, 2.7vw, 2.8rem);
  }
}

@media (max-height: 40rem) and (orientation: landscape) {
  :root {
    --pnab-height: clamp(2.5rem, 9.5dvh, 3.8rem);
  }

  .entry-hero {
    --recognition-height: clamp(2.5rem, 14dvh, 4.4rem);
  }

  .entry-stage {
    padding-top: clamp(0.65rem, 2.3dvh, 1.1rem);
    padding-bottom: 0.5rem;
  }

  .entry-copy {
    width: min(36vw, 24rem);
  }

  .entry-title__library {
    font-size: clamp(2.45rem, 9.2dvh, 4rem);
  }

  .entry-title__enchanted {
    font-size: clamp(2.75rem, 10.3dvh, 4.45rem);
  }

  .entry-kicker {
    font-size: clamp(0.64rem, 2.3dvh, 0.9rem);
  }

  .solar-seal {
    margin: 0.35rem 0;
    font-size: clamp(0.62rem, 2dvh, 0.8rem);
  }

  .entry-description {
    font-size: clamp(0.58rem, 1.8dvh, 0.76rem);
  }

  .entry-author {
    font-size: clamp(1.25rem, 4.3dvh, 2rem);
  }

  .shelf-stage {
    gap: 0.15rem;
    padding-top: 0.65rem;
    padding-bottom: 0.25rem;
  }

  .shelf-header h1 {
    font-size: clamp(2.7rem, 8.5dvh, 4.3rem);
  }

  .shelf-subtitle {
    margin-top: 0.2rem;
  }

  .book-cover {
    max-height: 40dvh;
  }

  .book-caption {
    min-height: 2.1rem;
    margin-top: 0.2rem;
  }

  .shelf-closing {
    padding-top: 0.2rem;
  }
}

/* Texto de apoio do portal: o piso de 8rem do clamp base estoura o
   viewport em telas muito estreitas. Largura fixa até 23rem. */
/* ============================================================
   Ajustes de leitura no mobile (retrato, telas compactas)
   1. "Acessar / Universo" menor, para caber no orbe
   2. "Ivonaldo Luís" centralizado e fora da moldura lateral
   3. texto de apoio com halo claro, para contraste sobre o dourado
   ============================================================ */
/* ============================================================
   SAFE AREAS da estante (retrato/compacto)
   A arte de fundo tem moldura nas quatro bordas e uma árvore no
   canto superior direito. O texto precisa caber na área limpa,
   nunca por baixo desses elementos.
   ============================================================ */
@media (orientation: portrait) and (max-width: 47.99rem) {
  /* subtítulo fora da copa da árvore */
  .shelf-subtitle {
    /* estreito o bastante para não entrar na copa da árvore, largo
       o bastante para caber em duas linhas equilibradas */
    width: min(100%, 30ch);
    margin-inline: auto;
    padding-inline: 0.4rem;
    font-size: clamp(0.46rem, min(1.95vw, 1.2dvh), 0.74rem);
    letter-spacing: 0.05em;
    text-wrap: balance;
  }

  .shelf-title {
    width: min(100%, 17ch);
    margin-inline: auto;
  }

  /* fecho numa placa limpa, sem linha atravessando o texto */
  .shelf-closing {
    width: min(86%, 30rem);
    margin-bottom: clamp(0.5rem, 1.6dvh, 1.1rem);
    padding: clamp(0.2rem, 0.6dvh, 0.4rem) 0.7rem;
    border-top: 0;
    border-radius: 999px;
    background: rgba(12, 8, 3, 0.82);
    box-shadow: inset 0 0 0 1px rgba(201, 138, 22, 0.5);
  }
}

@media (orientation: portrait) and (max-width: 47.99rem) {
  .portal-button span,
  .portal-button strong {
    font-size: clamp(0.95rem, min(4.6vw, 2.9dvh), 1.5rem);
  }

  .portal-button strong {
    font-size: clamp(1.05rem, min(5.1vw, 3.2dvh), 1.7rem);
  }

  .entry-author {
    left: 50%;
    right: auto;
    translate: -50% 0;
  }

  .portal-cluster p {
    /* puxa o bloco para dentro da moldura decorativa da arte,
       que fica a ~6% da borda direita */
    transform: translateX(calc(-50% - 6vw));
    color: #0E0B04;
    text-shadow:
      0 0 0.14em rgba(253, 246, 227, 0.95),
      0 0 0.3em rgba(253, 246, 227, 0.85),
      0 1px 0.1em rgba(253, 246, 227, 0.9);
  }
}

@media (max-width: 23rem) {
  .portal-cluster p {
    width: 6.5rem;
  }
}

@media (max-width: 22rem) {
  /* object-fit: contain já garante a régua inteira; o scale posterior
     a fazia sangrar e ser aparada pelo overflow do <picture>. */
  .pnab-strip img {
    transform: none;
  }

  .entry-copy {
    width: min(86vw, 18.5rem);
  }

  .entry-description {
    width: 58%;
    max-width: none;
    margin-left: 0.2rem;
    font-size: clamp(0.54rem, 2.8vw, 0.64rem);
    line-height: 1.2;
    text-align: left;
  }

  .book-carousel {
    grid-template-columns: 2.65rem minmax(0, 1fr) 2.65rem;
  }

  .book-card {
    --larg-card: min(68vw, 14.5rem);
    width: var(--larg-card);
  }
}

@media (orientation: portrait) and (max-width: 63.99rem) {
  .scene-picture img {
    object-position: 80% center;
  }

  .portal-cluster {
    top: 50.35cqh;
    left: calc(80cqw + 1.79cqh);
    width: 17.4cqh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .ambient-birds {
    display: none;
  }

  .book-card {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   BASE INSTITUCIONAL — única faixa branca das duas telas.
   Substitui a antiga faixa preta do VivaLeitura e a régua solta.
   Dois grupos separados por divisor, dentro do viewport.
   O grupo do prêmio é peça de RECONHECIMENTO e não se confunde
   com a régua PNAB vigente, que é a realização do projeto.
   ============================================================ */
.base-institucional {
  --base-gap: clamp(0.5rem, 1.6vw, 1.5rem);
  position: relative;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--base-gap);
  width: 100%;
  min-height: 0;
  padding: clamp(0.42rem, 1.25dvh, 0.95rem) clamp(0.5rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(20, 16, 8, 0.12);
  background: #fff;
}

.grupo-marcas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.16rem, 0.5dvh, 0.34rem);
  min-width: 0;
}

.grupo-marcas__titulo {
  margin: 0;
  color: #6B5A33;
  font-family: var(--font-ui);
  font-size: clamp(0.44rem, min(1.15vw, 1.15dvh), 0.66rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.grupo-marcas__itens {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.45rem, 1.5vw, 1.3rem);
  min-width: 0;
}

/* as marcas nunca são cortadas nem deformadas */
.marca {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.marca--premio      { max-height: clamp(2.3rem, 6.6dvh, 4.2rem); }
.marca--realizacao  { max-height: clamp(1.5rem, 4.2dvh, 2.7rem); }
.marca--parceria    { max-height: clamp(1.3rem, 3.7dvh, 2.4rem); }
.marca--movimento   { max-height: clamp(2.7rem, 7.8dvh, 5rem); }
.marca--regua       { max-height: clamp(1.6rem, 4.6dvh, 3rem); }

.base-institucional__divisor {
  width: 1px;
  height: clamp(1.5rem, 5dvh, 3.2rem);
  margin: 0;
  border: 0;
  background: rgba(20, 16, 8, 0.16);
}

/* empilha em telas estreitas, sem perder a leitura */
@media (max-width: 40rem) {
  .base-institucional {
    flex-direction: column;
    gap: clamp(0.24rem, 0.8dvh, 0.5rem);
  }

  .base-institucional__divisor {
    width: min(62%, 14rem);
    height: 1px;
  }

  .grupo-marcas__itens { gap: clamp(0.35rem, 2.2vw, 0.9rem); }
}

/* ============================================================
   MOLDURA DA TELA 2 — simplificada.
   A moldura original empilha até cinco linhas (borda + dois
   inset + ::before + ::after), que cruzavam autor, título e
   fecho. Aqui fica uma única linha externa discreta e os cantos.
   A Tela 1 conserva a moldura original.
   ============================================================ */
.ornamental-frame--shelf {
  border: 1px solid rgba(201, 138, 22, 0.55);
  box-shadow: none;
}

.ornamental-frame--shelf::before,
.ornamental-frame--shelf::after {
  display: none;
}

/* o topo da estante não pode encostar na borda */
.shelf-stage {
  /* o título sobe: com o véu colado no alto, o respiro que antes
     separava o texto da borda virou vão dourado sem função */
  padding-top: clamp(0.5rem, 1.45dvh, 0.95rem);
}

.shelf-heading,
.shelf-title {
  padding-inline: clamp(0.6rem, 2.4vw, 1.6rem);
}

/* ============================================================
   LEGENDAS E ÍCONES dos 4 itens — maiores e mais legíveis.
   Ganham corpo, contraste e respiro sem roubar altura da capa:
   o crescimento vem da tipografia e do espaçamento, não de uma
   caixa maior.
   ============================================================ */
.book-caption {
  grid-template-columns: clamp(2.5rem, 9.5vw, 3.3rem) 1fr;
  gap: clamp(0.5rem, 1.9vw, 0.85rem);
  width: min(100%, 20rem);
  margin-top: clamp(0.45rem, 1.3dvh, 0.9rem);
  color: #FFF6E0;
  font-size: clamp(0.82rem, min(3.9vw, 2.15dvh), 1.06rem);
  line-height: 1.28;
  letter-spacing: 0.005em;
  text-shadow:
    0 1px 2px rgba(10, 5, 2, 0.92),
    0 0 0.5rem rgba(10, 5, 2, 0.75);
}

.book-caption img {
  width: clamp(2.5rem, 9.5vw, 3.3rem);
  filter: drop-shadow(0 1px 2px rgba(10, 5, 2, 0.7));
}

/* o quarto item é um card, não um livro: sem lombada nem miolo */
.book-card--memory .book-cover {
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: drop-shadow(0.35rem 0.5rem 0.7rem rgba(10, 5, 2, 0.42));
}

.book-card--memory .book-cover::before,
.book-card--memory .book-cover::after {
  display: none;
}

.book-card--memory .book-cover img {
  border-radius: 0.18rem;
  box-shadow: inset 0 0 0 2px var(--green);
}

.book-card:hover .book-card--memory .book-cover {
  transform: none;
}

/* ============================================================
   BASE INSTITUCIONAL v2 — hierarquia, respiro e alinhamento.

   Todas as marcas seguem a orientação do cliente e o manual da
   SECOM para o período eleitoral.

   MinC, MEC e OEI vêm de fontes oficiais, cada um na assinatura
   horizontal com a bandeira, sem slogan e sem redesenho. O MEC
   é derivado da extração vetorial do manual da SECOM (página 6,
   versão horizontal preferencial), apenas aparado nas margens.
   ============================================================ */
.grupo-marcas__itens {
  gap: clamp(0.6rem, 2.1vw, 1.7rem);
}

.marca--minc { max-height: clamp(1.05rem, 3.1dvh, 2.05rem); }
.marca--oei  { max-height: clamp(1.15rem, 3.4dvh, 2.25rem); }
.marca--mec  { max-height: clamp(1.05rem, 3.1dvh, 2.05rem); }

/* MEC como texto institucional, alinhado ao padrão do MinC */
.marca-texto {
  display: flex;
  flex-direction: column;
  gap: 0.06em;
  margin: 0;
  color: #57585A;
  font-family: var(--font-ui);
  font-size: clamp(0.38rem, min(1.02vw, 1.02dvh), 0.6rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.marca-texto strong {
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* respiro entre os grupos e alinhamento pela base ótica */
.base-institucional {
  gap: clamp(0.75rem, 2.6vw, 2.2rem);
  padding-block: clamp(0.5rem, 1.45dvh, 1.05rem);
}

.grupo-marcas__itens { align-items: center; }

.grupo-marcas__titulo { color: #5E5030; }

@media (max-width: 40rem) {
  .base-institucional { gap: clamp(0.32rem, 1.1dvh, 0.62rem); }
  .grupo-marcas__itens { gap: clamp(0.45rem, 2.6vw, 1rem); }
}

/* ============================================================
   TELA 1 v2 — frase dentro da esfera, respiro e transição.
   ============================================================ */

/* a frase passa a viver DENTRO do orbe, logo abaixo do CTA.
   pointer-events desligado para a esfera inteira seguir clicável. */
@media (min-width: 40rem) {
  .portal-cluster p {
    position: absolute;
    top: 58%;
    left: 50%;
    width: 74%;
    margin: 0;
    transform: translateX(-50%);
    font-size: clamp(0.5rem, min(1.02cqw, 1.1dvh), 0.78rem);
    line-height: 1.32;
    letter-spacing: 0.035em;
    text-align: center;
    text-wrap: balance;
    pointer-events: none;
    color: #2A1B05;
    text-shadow:
      0 1px 0 rgba(253, 246, 227, 0.75),
      0 0 0.5em rgba(253, 246, 227, 0.9);
  }
}

/* respiro da coluna de texto à esquerda */
@media (min-width: 40rem) {
  .entry-description {
    max-width: 34ch;
    margin-top: clamp(0.5rem, 1.5dvh, 1.1rem);
    line-height: 1.5;
  }

  .entry-author {
    bottom: clamp(1.15rem, 3.4dvh, 2.3rem);
    left: clamp(2.4rem, 7vw, 4rem);
    padding: 0.34rem 0.9rem;
  }
}

/* ---- transição de entrada: fade dourado + zoom sutil ----
   Sai o círculo que expandia sobre fundo escuro (flash preto e
   segundo círculo). Entra um véu dourado curto a partir da esfera. */
.universe-transition {
  position: fixed;
  z-index: 9999;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 78% 35%,
      rgba(253, 246, 227, 0.96) 0%,
      rgba(251, 212, 106, 0.94) 26%,
      rgba(242, 168, 29, 0.92) 55%,
      rgba(201, 138, 22, 0.9) 100%);
  transform: none;
  transition: opacity 520ms cubic-bezier(0.33, 0, 0.2, 1);
}

/* Neutraliza explicitamente a regra antiga (scale 2.4), que ainda
   vencia por vir depois na cascata e recriava o círculo expandindo.
   Sem transform, sem clip-path: só o véu dourado em opacidade. */
.is-crossing-universe .universe-transition {
  opacity: 1;
  transform: none;
  scale: none;
  clip-path: none;
}

/* zoom muito sutil na cena, partindo da esfera */
.entry-stage {
  transition: transform 560ms cubic-bezier(0.33, 0, 0.2, 1);
  transform-origin: 78% 35%;
}

.is-crossing-universe .entry-stage {
  transform: scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
  .universe-transition { transition: opacity 1ms linear; }
  .entry-stage { transition: none; }
  .is-crossing-universe .entry-stage { transform: none; }
}

/* empilhamento dentro da esfera: CTA acima, frase abaixo, sem colisão */
@media (min-width: 40rem) {
  .portal-button {
    place-content: start center;
    padding-top: 22%;
  }

  .portal-cluster p {
    top: 61%;
    width: 78%;
    font-size: clamp(0.56rem, min(1.28cqw, 1.35dvh), 0.92rem);
    line-height: 1.34;
  }
}

/* ------------------------------------------------------------
   Frase de apoio no mobile: fica logo ABAIXO da esfera.

   Testado: forçá-la para dentro do orbe derruba a fonte para
   6,8px em 390 e 5,6px em 320 — o orbe da arte tem só 120px e
   66px de diâmetro nesses tamanhos. Preferimos legibilidade a
   cumprir a forma. Ela não encosta na personagem nem na moldura.
   ------------------------------------------------------------ */
@media (max-width: 39.99rem) {
  .portal-cluster p {
    font-size: clamp(0.5rem, min(2.15vw, 1.3dvh), 0.78rem);
    line-height: 1.3;
  }
}

/* ============================================================
   BASE INSTITUCIONAL v3 — label AO LADO, faixa mais baixa.
   O título de cada grupo deixa de empilhar acima das marcas e
   passa a ocupar a lateral, aproveitando a largura da tela. Com
   isso as logos crescem e a altura total da faixa cai.
   ============================================================ */
.grupo-marcas {
  flex-direction: row;
  align-items: center;
  gap: clamp(0.45rem, 1.3vw, 1.05rem);
}

.grupo-marcas__titulo {
  max-width: 7.5em;
  font-size: clamp(0.4rem, min(0.92vw, 0.92dvh), 0.58rem);
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}

.base-institucional {
  gap: clamp(0.6rem, 2.2vw, 1.9rem);
  padding-block: clamp(0.34rem, 1dvh, 0.7rem);
}

/* logos maiores, agora que a faixa é mais baixa */
.marca--premio      { max-height: clamp(2.5rem, 7.4dvh, 4.6rem); }
.marca--oei         { max-height: clamp(1.35rem, 4.1dvh, 2.7rem); }
.marca--minc        { max-height: clamp(1.3rem, 3.9dvh, 2.55rem); }
.marca--mec         { max-height: clamp(1.3rem, 3.9dvh, 2.55rem); }
.marca--movimento   { max-height: clamp(2.6rem, 7.6dvh, 4.8rem); }
.marca--regua       { max-height: clamp(1.9rem, 5.5dvh, 3.5rem); }

.base-institucional__divisor {
  height: clamp(1.7rem, 5.6dvh, 3.6rem);
  width: 1px;
}

/* ---- mobile: compacto, em duas linhas internas, nunca coluna alta ---- */
@media (max-width: 40rem) {
  .base-institucional {
    flex-direction: column;
    gap: clamp(0.22rem, 0.7dvh, 0.45rem);
    padding-block: clamp(0.28rem, 0.85dvh, 0.55rem);
  }

  .base-institucional__divisor {
    width: min(58%, 13rem);
    height: 1px;
  }

  .grupo-marcas {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.3rem, 1.6vw, 0.6rem);
  }

  .grupo-marcas__titulo {
    max-width: none;
    width: 100%;
    text-align: center;
    font-size: clamp(0.36rem, 1.75vw, 0.5rem);
    letter-spacing: 0.09em;
  }

  .grupo-marcas__itens {
    flex-wrap: wrap;
    gap: clamp(0.3rem, 2vw, 0.7rem);
  }

  .marca--premio    { max-height: clamp(1.6rem, 4.4dvh, 2.4rem); }
  .marca--oei       { max-height: clamp(0.95rem, 2.6dvh, 1.45rem); }
  .marca--minc,
  .marca--mec       { max-height: clamp(0.9rem, 2.5dvh, 1.4rem); }
  .marca--movimento { max-height: clamp(1.9rem, 5.2dvh, 2.9rem); }
  .marca--regua     { max-height: clamp(1.25rem, 3.4dvh, 1.9rem); }
}


/* ============================================================
   CORREÇÕES DA AUDITORIA
   ============================================================ */

/* 1. frase do orbe: completa no desktop, curta dentro do orbe no
   mobile. O texto acessível permanece o completo; a versão curta
   é aria-hidden e só existe para caber legível na esfera. */
.portal-nota__curta { display: none; }

@media (min-width: 40rem) {
  .portal-cluster p {
    font-size: clamp(0.62rem, min(1.42cqw, 1.5dvh), 1rem);
    line-height: 1.32;
  }
}

@media (max-width: 39.99rem) {
  .portal-nota__completa { display: none; }
  .portal-nota__curta { display: block; }

  .portal-cluster p {
    position: absolute;
    top: 57%;
    left: 50%;
    width: 74%;
    margin: 0;
    transform: translateX(-50%);
    font-size: clamp(0.4rem, 2.35cqw, 0.58rem);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;
    pointer-events: none;
    color: #2A1B05;
    text-shadow: 0 0 0.4em rgba(253,246,227,0.96), 0 1px 0 rgba(253,246,227,0.85);
  }

  .portal-button { place-content: start center; padding-top: 21%; }
}

/* 3. parágrafo com fundo dourado suave, para os pássaros não o
   cruzarem; e canto TL simplificado no mobile, que colidia com
   o título "Biblioteca". */
@media (max-width: 40rem) {
  /* placa dourada suave atrás do parágrafo, para os pássaros não o
     cruzarem. Largura limitada para não encostar na esfera. */
  .entry-description {
    width: min(100%, 57vw);
    margin-inline: 0 auto;
    padding: 0.4rem 0.7rem;
    border-radius: 0.4rem;
    background: linear-gradient(180deg, rgba(251,212,106,0.86), rgba(242,168,29,0.78));
    text-align: left;
  }

  .entry-copy { align-items: flex-start; }

  .frame-corner--tl,
  .frame-corner--tr { display: none; }
}

/* 4. área segura do título/subtítulo da estante, longe da árvore */
@media (max-width: 47.99rem) {
  .shelf-heading {
    width: min(100%, 27ch);
    margin-inline: auto;
  }

  .shelf-divider { width: min(11rem, 54%); }
}

/* 5. capa mais nítida no mobile: face quase frontal, mantendo
   lombada, miolo e sombra de contato */
@media (max-width: 47.99rem) {
  .book-cover { --giro: 0.6deg; }
}

/* ============================================================
   ÁREA SEGURA DO HEADER DA ESTANTE (mobile)
   A copa da árvore do cenário passava por trás e por cima das
   últimas letras de "BOM JARDIM" e "DAS PEDRAS ENCANTADAS".
   Limitar a largura do texto não bastava: a árvore ocupa o canto
   superior direito da própria arte.

   Solução: um véu dourado orgânico atrás de TODO o header, com
   bordas difusas (sem caixa nem contorno), na frente do cenário
   e atrás do texto.
   ============================================================ */
@media (max-width: 47.99rem) {
  .shelf-header {
    position: relative;
    z-index: 3;
    isolation: isolate;
  }

  /* O véu cola no alto da tela e some devagar para baixo.

     Antes era uma elipse centrada no texto: as laterais deixavam
     um vão dourado acima e a base terminava numa linha, lendo como
     uma barra colada sobre a arte. Agora ele nasce fora do quadro
     (o .shelf-stage recorta o excesso), ocupa a largura inteira e
     leva mais de duas alturas do próprio texto para desaparecer —
     tempo suficiente para a passagem não ter borda visível. */
  .shelf-header::before {
    position: absolute;
    z-index: -1;
    top: -2.4rem;      /* passa do topo do palco; o recorte resolve */
    bottom: -175%;     /* base bem longe: dissolução longa, sem linha */
    left: 50%;
    width: 100vw;
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
    background:
      linear-gradient(180deg,
        rgba(250, 198, 76, 0.99) 0%,
        rgba(249, 193, 68, 0.985) 28%,
        rgba(247, 185, 55, 0.97) 43%,
        rgba(246, 180, 48, 0.90) 53%,
        rgba(244, 174, 40, 0.74) 63%,
        rgba(243, 171, 35, 0.52) 73%,
        rgba(242, 168, 29, 0.30) 83%,
        rgba(242, 168, 29, 0.12) 92%,
        rgba(242, 168, 29, 0) 100%);
  }

  /* o conteúdo do header fica acima do véu */
  .shelf-header > * { position: relative; z-index: 1; }
}

/* ============================================================
   MOLDURA E CANTOS REMOVIDOS (Telas 1 e 2, desktop e mobile)
   Saem a linha perimetral e os quatro símbolos decorativos.
   As setas do carrossel mobile permanecem.
   ============================================================ */
.ornamental-frame,
.ornamental-frame--shelf,
.ornamental-frame::before,
.ornamental-frame::after,
.frame-corner {
  display: none !important;
}

/* ---- TELA 2 (desktop): header mais baixo e compacto, estante sobe ---- */
@media (min-width: 48rem) {
  .shelf-stage {
    padding-top: clamp(0.5rem, 1.6dvh, 1rem);
    gap: clamp(0.1rem, 0.4dvh, 0.3rem);
  }

  /* margem de respiro no topo: o crédito do autor não pode
     encostar na borda superior da cena */
  .shelf-header {
    margin-top: clamp(1.5rem, 4.2dvh, 3rem);
    margin-bottom: clamp(-1rem, -2.2dvh, -0.4rem);
  }

  .shelf-divider { margin-top: clamp(0.16rem, 0.45dvh, 0.34rem); }

  /* frase final claramente legível */
  .shelf-closing {
    padding-top: clamp(0.3rem, 0.8dvh, 0.6rem);
    font-size: clamp(0.85rem, min(1.35vw, 2dvh), 1.15rem);
    letter-spacing: 0.012em;
  }
}

/* ---- TELA 1 (desktop): coluna esquerda distribuída na altura útil ---- */
@media (min-width: 48rem) {
  .entry-copy {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-block: clamp(1rem, 3.4dvh, 2.4rem) clamp(1.4rem, 4.5dvh, 3.2rem);
  }

  .entry-title { margin-bottom: 0; }

  /* título e divisor no alto; o resto é empurrado para baixo */
  .entry-copy > .title-divider { margin-bottom: auto; }

  /* trilogia + selo na zona intermediária */
  .entry-kicker { margin-top: 0; }

  .solar-seal { margin-top: clamp(0.5rem, 1.7dvh, 1.2rem); }

  .entry-description {
    margin-top: auto;
    max-width: 40ch;
    line-height: 1.55;
  }

  /* CTA mais centralizado no orbe e frase completa abaixo, dentro */
  .portal-button { place-content: center; padding-top: 0; padding-bottom: 26%; }

  .portal-cluster p {
    top: 63%;
    width: 80%;
    font-size: clamp(0.68rem, min(1.55cqw, 1.62dvh), 1.08rem);
    line-height: 1.34;
  }
}

/* ============================================================
   TELA 1 MOBILE (<=640px) — hierarquia, gutter e parágrafo
   ============================================================ */
@media (max-width: 40rem) {
  /* hierarquia superior centralizada, espaçamentos consistentes */
  .entry-copy {
    align-items: center;
    padding-inline: clamp(0.6rem, 3.2vw, 1.1rem);
    text-align: center;
  }

  .entry-title,
  .entry-kicker,
  .solar-seal { text-align: center; margin-inline: auto; }

  .title-divider { margin: clamp(0.3rem, 1dvh, 0.6rem) auto; }

  .entry-kicker { margin-top: clamp(0.3rem, 1dvh, 0.62rem); }

  .solar-seal { margin-top: clamp(0.34rem, 1.1dvh, 0.7rem); }

  /* a esfera ganha respiro real da borda direita */
  .portal-cluster {
    left: auto;
    right: clamp(14px, 4.4vw, 18px);
    translate: 0 -50%;
  }

  /* O parágrafo é filho de .entry-copy, que tem 223px de altura;
     ancorá-lo ali o prendia no topo. Posicionamos em relação à
     .entry-stage (a cena inteira) para levá-lo à base, sobre o
     caminho e acima da placa do autor. */
  /* .entry-copy tem transform (animação de entrada) e transform cria
     containing block para elementos absolutos: era ele, e não a cena,
     que ancorava o parágrafo no topo. Anulado só no mobile. */
  .entry-copy {
    position: static;
    transform: none;
    animation: none;
  }

  .entry-description {
    position: absolute;
    z-index: 4;
    top: auto;          /* anula o top herdado, senão o bottom não vale */
    right: auto;
    bottom: clamp(3.5rem, 11dvh, 5.6rem);
    left: 50%;
    width: min(78vw, 21rem);
    margin: 0;
    padding: clamp(0.3rem, 1dvh, 0.5rem) clamp(0.55rem, 2.6vw, 0.9rem);
    translate: -50% 0;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, rgba(30, 20, 6, 0.72), rgba(20, 14, 4, 0.66));
    color: #FFF3D6;
    font-size: clamp(0.62rem, 3vw, 0.82rem);
    line-height: 1.34;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }
}


/* ============================================================
   CTA: "Acessar Universo" + "clique aqui" mais próximos,
   como um bloco único centrado na esfera.
   ============================================================ */
@media (min-width: 40rem) {
  .portal-button { place-content: center; padding-top: 0; padding-bottom: 17%; }

  .portal-cluster p {
    top: 56%;
    width: 70%;
    font-size: clamp(0.6rem, min(1.36cqw, 1.42dvh), 0.95rem);
    letter-spacing: 0.1em;
    line-height: 1.1;
  }
}

@media (max-width: 39.99rem) {
  .portal-button { place-content: center; padding-top: 0; padding-bottom: 19%; }

  .portal-cluster p {
    top: 57%;
    width: 74%;
    font-size: clamp(0.44rem, 2.6cqw, 0.66rem);
    letter-spacing: 0.09em;
    line-height: 1.1;
  }
}

/* ============================================================
   DESKTOP: selo "Arte Solar do Agreste" na base DIREITA,
   fazendo par com a placa IVONALDO LUÍS na base esquerda.
   O parágrafo descritivo sai do rodapé para não colidir.
   ============================================================ */
@media (min-width: 48rem) {
  .solar-seal {
    position: absolute;
    z-index: 4;
    right: clamp(1.6rem, 4.5vw, 3.4rem);
    bottom: clamp(1.15rem, 3.4dvh, 2.3rem);
    left: auto;
    /* encolhe ao conteúdo: sem isto herda a largura da coluna
       e continua parecendo alinhado à esquerda */
    width: max-content;
    max-width: 42vw;
    margin: 0;
    white-space: nowrap;
  }

  /* o parágrafo volta ao fluxo da coluna, sem encostar na base */
  .entry-description {
    margin-top: clamp(1rem, 3dvh, 2rem);
    margin-bottom: clamp(3.5rem, 9dvh, 6rem);
    max-width: 36ch;
  }

  .entry-copy { padding-bottom: clamp(3.5rem, 9dvh, 6rem); }
}

/* ============================================================
   AJUSTES FINOS DO CTA E DO SELO
   ============================================================ */

/* bloco "Acessar Universo" + "clique aqui" centrado no círculo,
   como uma unidade óptica; sem sombra no "clique aqui" */
.portal-button {
  place-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.portal-cluster p {
  text-shadow: none;
}

@media (min-width: 40rem) {
  .portal-button { padding-bottom: 13%; }
  .portal-cluster p { top: 58.5%; }
}

@media (max-width: 39.99rem) {
  .portal-button { padding-bottom: 15%; }
  .portal-cluster p { top: 59%; }
}

/* o selo precisa se posicionar pela CENA, não pela coluna esquerda:
   .entry-copy é o containing block e o prendia à esquerda */
@media (min-width: 48rem) {
  /* transform no .entry-copy cria containing block e prendia o selo
     à coluna esquerda; anulado para ele ancorar na cena */
  .entry-copy {
    position: static;
    transform: none;
    animation: none;
  }

  .solar-seal {
    right: clamp(1.6rem, 4.5vw, 3.4rem);
    left: auto;
  }
}

/* Tela 2 desktop: estante sobe e o fecho ganha folga */
@media (min-width: 48rem) {
  /* A estante subia por uma margem negativa no próprio body. Ela
     deslocava o documento inteiro, e a régua institucional deixava
     de encostar na base: sobravam ~30px de fundo abaixo dela.
     Quem sobe agora é o conteúdo dentro do palco, pelo padding. */

  .shelf-closing {
    margin-top: clamp(0.7rem, 2.2dvh, 1.5rem);
    margin-bottom: clamp(0.5rem, 1.6dvh, 1rem);
  }
}

/* ============================================================
   TELA 1 DESKTOP — coesão do bloco de texto e legibilidade
   Os textos deixam de flutuar soltos: sobem para junto do título
   e o parágrafo ganha peso e corpo para deixar de parecer fino.
   ============================================================ */
@media (min-width: 48rem) {
  .entry-copy {
    justify-content: flex-start;
    gap: 0;
    padding-block: clamp(1.4rem, 4.2dvh, 3rem) clamp(4rem, 10dvh, 7rem);
  }

  /* o divisor não empurra mais o resto para o fim da coluna */
  .entry-copy > .title-divider { margin-bottom: clamp(0.9rem, 2.8dvh, 1.9rem); }

  .entry-kicker { margin-top: 0; }

  .solar-seal { margin-top: clamp(0.7rem, 2.1dvh, 1.4rem); }

  .entry-description {
    margin-top: clamp(0.85rem, 2.6dvh, 1.7rem);
    margin-bottom: 0;
    max-width: 34ch;
    color: #241703;
    font-size: clamp(0.92rem, min(1.12vw, 1.75dvh), 1.18rem);
    font-weight: 600;
    line-height: 1.5;
    text-shadow: 0 1px 0 rgba(253, 246, 227, 0.5);
  }
}

/* o selo não pode encostar na placa do autor */
@media (min-width: 48rem) and (max-width: 90rem) {
  .solar-seal { bottom: clamp(3.6rem, 8.5dvh, 5.4rem); }
}

/* ============================================================
   SELO "Acesso digital livre" — sai do parágrafo e vira badge
   ============================================================ */
.access-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin: clamp(0.5rem, 1.6dvh, 0.95rem) 0 0;
  padding: clamp(0.24rem, 0.7dvh, 0.42rem) clamp(0.7rem, 1.6vw, 1.1rem);
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20, 16, 8, 0.94), rgba(12, 9, 3, 0.9));
  color: var(--yellow-light);
  font-family: var(--font-ui);
  font-size: clamp(0.6rem, min(0.92vw, 1.4dvh), 0.85rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 40rem) {
  .access-badge { margin-inline: auto; }
}

/* simetria: selo do Agreste e placa do autor na mesma base */
@media (min-width: 48rem) {
  .solar-seal,
  .entry-author {
    bottom: clamp(1.15rem, 3.4dvh, 2.3rem);
  }
}

@media (min-width: 48rem) and (max-width: 90rem) {
  .solar-seal { bottom: clamp(1.15rem, 3.4dvh, 2.3rem); }
}

/* ============================================================
   TELA 1 DESKTOP: bloco de texto centrado no eixo do divisor
   O divisor abaixo de "Biblioteca Encantada" define a largura
   de referência; trilogia, selo e parágrafo passam a se alinhar
   ao mesmo eixo, centralizados.
   ============================================================ */
@media (min-width: 48rem) {
  .entry-copy { align-items: center; text-align: center; }

  .entry-title { text-align: center; }

  .title-divider { width: 100%; margin-inline: auto; }

  .entry-kicker,
  .access-badge,
  .entry-description {
    margin-inline: auto;
    text-align: center;
  }

  .entry-description { max-width: 38ch; }

  /* selo e autor continuam ancorados nos cantos, fora do fluxo */
  .solar-seal { text-align: left; }
}

/* ============================================================
   AJUSTES DE ALINHAMENTO (task 5)
   ============================================================ */

/* mobile: selo do Agreste e placa do autor lado a lado, no mesmo
   tamanho, e o bloco de texto desce um pouco */
@media (max-width: 40rem) {
  .entry-copy { padding-top: clamp(1.6rem, 5dvh, 3rem); }

  .entry-author,
  .solar-seal {
    position: absolute;
    bottom: clamp(0.9rem, 2.8dvh, 1.6rem);
    width: min(43vw, 12rem);
    margin: 0;
    padding: clamp(0.22rem, 0.7dvh, 0.36rem) clamp(0.3rem, 1.4vw, 0.6rem);
    font-size: clamp(0.62rem, 3vw, 0.86rem);
    text-align: center;
  }

  .entry-author { left: clamp(0.5rem, 2.6vw, 1rem); translate: 0 0; }

  .solar-seal {
    right: clamp(0.5rem, 2.6vw, 1rem);
    left: auto;
    justify-content: center;
    gap: 0.3rem;
  }

  .solar-seal img { width: clamp(0.85rem, 3.6vw, 1.15rem); height: auto; }

  .solar-seal span {
    font-size: clamp(0.5rem, 2.4vw, 0.68rem);
    letter-spacing: 0.04em;
    line-height: 1.1;
  }

  /* o parágrafo sobe para não colidir com a dupla — e agora também
     com a etiqueta "Sobre o autor", que passou a ficar por fora da
     moldura, acima do nome */
  /* ancorado na mesma régua da placa (a folga do crédito), e não em
     dvh: em tela baixa o dvh encolhia e o texto descia em cima da
     etiqueta justamente onde havia menos espaço */
  .entry-description { bottom: calc(var(--folga-credito) + 5.7rem); }
}

/* desktop: a placa do autor compartilha o eixo do título/logo.
   O eixo é o centro da COLUNA de texto (~25% da tela), não o centro
   da janela — por isso 25% e não 50%. */
@media (min-width: 48rem) {
  /* o autor herda o eixo da própria coluna: ancorado nela, e não na
     janela, acompanha qualquer largura de tela */
  .entry-copy { position: relative; }

  .entry-author {
    left: 50%;
    right: auto;
    translate: -50% 0;
  }
}

/* ícones das legendas não escapam do badge em nenhuma resolução */
.book-caption {
  align-items: center;
  overflow: visible;
}

.book-caption img {
  flex: 0 0 auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}


/* ============================================================
   CORREÇÕES TIPOGRÁFICAS
   ============================================================ */

/* "Encantada" é fonte script: o tracking largo afastava as letras
   e a cauda do "a" invadia a letra seguinte. Volta ao natural. */
.entry-title__enchanted {
  letter-spacing: 0;
  word-spacing: 0;
}

/* ============================================================
   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; }
}


/* ============================================================
   Listras brancas no carrossel: o miolo e a lombada dos cards
   vizinhos (pseudo-elementos do livro 3D) apareciam nas bordas
   durante a transição. Só o card visível desenha o volume.
   ============================================================ */
.book-card:not(.is-visible) .book-cover::before,
.book-card:not(.is-visible) .book-cover::after {
  opacity: 0;
}

.book-card .book-cover::before,
.book-card .book-cover::after {
  transition: opacity 160ms ease;
}

@media (max-width: 63.99rem) {
  /* no carrossel, nada do card escapa da sua própria área */
  .book-carousel { overflow: hidden; }
}

/* ============================================================
   TELA 1 MOBILE — cena preenchendo a largura, hierarquia alinhada
   e o parágrafo legível sem a placa dura.
   ============================================================ */
@media (max-width: 40rem) {
  /* a arte usa a largura toda do aparelho, sem faixa vazia */
  .scene-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 72% cortava a esfera dourada na borda direita — o CTA ficava
       numa bola pela metade. Em 88% ela entra inteira e a menina
       continua no enquadramento. */
    object-position: 88% center;
  }

  /* título, divisor, trilogia e selo no mesmo eixo e ritmo */
  .entry-copy {
    align-items: center;
    gap: 0;
    /* margin-left assimétrico herdado empurrava o bloco 8px do
       centro; zeramos e deixamos o auto centralizar */
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(0.9rem, 5vw, 1.6rem);
  }

  .entry-title,
  .entry-kicker { width: 100%; text-align: center; }

  /* O selo é uma pílula, não uma barra: width 100% o esticava a 82%
     da tela. E, sendo flex, o text-align não movia o rótulo — ele
     ficava colado à esquerda, 92px fora do centro da própria caixa. */
  .access-badge {
    width: max-content;
    max-width: 92%;
    justify-content: center;
    margin-inline: auto;
    text-align: center;
  }

  .title-divider {
    width: min(100%, 21rem);
    margin: clamp(0.34rem, 1.1dvh, 0.6rem) auto;
  }

  .entry-kicker {
    margin-top: clamp(0.34rem, 1.1dvh, 0.6rem);
    text-wrap: balance;
  }

  .access-badge { margin-top: clamp(0.44rem, 1.4dvh, 0.8rem); }

  /* parágrafo maior e sem caixa dura: véu que dissolve nas bordas */
  .entry-description {
    /* Quase a largura toda da tela, e o `max-width: 18rem` da regra
       base sai do caminho: com três linhas o bloco crescia para baixo
       e encostava na etiqueta do autor. Em duas ele para antes. */
    width: min(96vw, 30rem);
    max-width: none;
    padding: clamp(0.45rem, 1.5dvh, 0.8rem) clamp(0.5rem, 2.4vw, 0.9rem);
    border-radius: 1.4rem;
    background:
      radial-gradient(120% 150% at 50% 50%,
        rgba(14, 10, 3, 0.86) 0%,
        rgba(14, 10, 3, 0.8) 52%,
        rgba(14, 10, 3, 0.5) 78%,
        rgba(14, 10, 3, 0) 100%);
    /* o corpo cede um pouco para a frase fechar em duas linhas —
       é o que a largura extra sozinha não dava conta de fazer */
    font-size: clamp(0.68rem, 3.05vw, 0.92rem);
    line-height: 1.42;
  }
}