/* ================================================================
   ROBÉRIO DIÓGENES — css/livro-pagina.css
   Layout completo para as páginas individuais de livros/contos.
   Depende de: variables.css  (fontes, cores, raios, sombras)
               auth.css ou global.css (nav, btn, footer, reveal)
   ================================================================ */

/* ── SKIP NAV ─────────────────────────────────────────────────── */
.pular-nav {
  position: absolute; top: -999px; left: -999px;
  background: var(--ouro); color: #1A0F00;
  padding: .5rem 1rem; border-radius: var(--raio);
  z-index: 9999; font-family: var(--fonte-ui); text-decoration: none;
}
.pular-nav:focus { top: 1rem; left: 1rem; }

/* ================================================================
   HERO DO LIVRO
   ================================================================ */
.livro-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: calc(var(--altura-nav) + 3rem) 3rem 4rem;
  align-items: start;
}
@media (max-width: 780px) {
  .livro-hero {
    grid-template-columns: 1fr;
    padding: calc(var(--altura-nav) + 2rem) 1.5rem 3rem;
    text-align: center;
  }
}

/* ── CAPA ────────────────────────────────────────────────────── */
.livro-hero-capa {
  position: sticky; top: calc(var(--altura-nav) + 1.5rem);
}
.livro-hero-capa a {
  display: block; border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-livro);
  transition: transform .3s ease;
}
.livro-hero-capa a:hover { transform: translateY(-4px) scale(1.01); }
.livro-hero-capa-img {
  width: 100%; height: auto; display: block;
  border-radius: var(--raio-lg);
}
@media (max-width: 780px) {
  .livro-hero-capa { position: static; max-width: 220px; margin: 0 auto 2rem; }
}

/* ── INFO ─────────────────────────────────────────────────────── */
.livro-genero {
  font-family: var(--fonte-display); font-size: .6rem;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--ouro); display: block; margin-bottom: 1rem;
}
.livro-titulo {
  font-family: var(--fonte-titulo); font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400; line-height: 1.1; margin-bottom: .75rem;
  color: var(--texto);
}
.livro-titulo em { color: var(--ouro); font-style: italic; }
.livro-subtitulo {
  font-family: var(--fonte-corpo); font-size: 1.05rem;
  color: var(--texto-3); line-height: 1.65; margin-bottom: 1.5rem;
  font-style: italic;
}
.livro-meta {
  display: flex; flex-wrap: wrap; gap: .45rem 1.25rem;
  font-family: var(--fonte-display); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 1.75rem;
}
.livro-meta a { color: var(--texto-3); text-decoration: none; }
.livro-meta a:hover { color: var(--ouro); }

/* ── AÇÕES (favoritar, estrelas, downloads, contadores) ────────── */
.livro-acoes {
  display: flex; flex-wrap: wrap; gap: .65rem;
  align-items: center; margin-bottom: 1.5rem;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--borda);
}

/* Favoritar */
.btn-favoritar {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border-radius: 20px;
  border: 1px solid var(--borda-media);
  background: transparent; color: var(--texto-3);
  font-family: var(--fonte-display); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: all .2s;
}
.btn-favoritar:hover,
.btn-favoritar.ativo   { border-color: var(--ferrugem); color: var(--ferrugem); }
.btn-favoritar.ativo .fav-icone { content: '♥'; }
.fav-icone { font-size: 1rem; line-height: 1; }

/* Estrelas de avaliação */
.avaliacao-wrap {
  display: flex; align-items: center; gap: .5rem;
}
.estrelas-usuario {
  display: flex; gap: .15rem;
}
.estrela-avaliacao {
  font-size: 1.2rem; color: var(--borda-media);
  cursor: pointer; transition: color .15s;
  line-height: 1; user-select: none;
}
.estrela-avaliacao:hover,
.estrela-avaliacao.selecionada { color: var(--ouro); }
.avaliacao-label {
  font-family: var(--fonte-display); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3);
}

/* Botões de download (amostra) */
.download-wrap { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-download {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: var(--raio);
  border: 1px solid var(--borda-media);
  background: transparent; color: var(--texto-3);
  font-family: var(--fonte-display); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: all .2s;
}
.btn-download:hover { border-color: var(--ouro); color: var(--ouro); }
.icone-formato {
  font-family: var(--fonte-display); font-size: .55rem;
  font-weight: 700; letter-spacing: .05em;
  background: var(--ouro); color: #1A0F00;
  padding: .1rem .35rem; border-radius: 3px;
}

/* Contadores */
.contadores-wrap {
  display: flex; align-items: center; gap: 1rem;
  font-size: .78rem; color: var(--texto-3);
}
.contador-item, .estrelas-media-wrap {
  display: flex; align-items: center; gap: .3rem;
}
.contador-item i, .estrelas-media-wrap i { color: var(--ouro); font-size: .75rem; }
#estrelas-media { color: var(--ouro); font-size: .95rem; letter-spacing: -.05em; }

/* CTAs (botão comprar + voltar) */
.livro-ctas {
  display: flex; flex-direction: column; gap: .6rem;
}

/* ================================================================
   CONTEÚDO PRINCIPAL + SIDEBAR
   ================================================================ */
.livro-conteudo {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 3rem 5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .livro-conteudo { grid-template-columns: 1fr; padding: 0 1.5rem 4rem; }
  .livro-sidebar  { order: -1; }
}

/* ── CORPO ─────────────────────────────────────────────────────── */
.livro-corpo > section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--borda);
}
.livro-corpo > section:last-child { border-bottom: none; }

/* Título de seção */
.secao-titulo {
  font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 400;
  color: var(--texto); margin-bottom: 1.25rem;
  padding-bottom: .6rem; border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: .5rem;
}
.secao-titulo em { color: var(--ouro); font-style: italic; }

/* Sinopse */
.sinopse { font-size: 1rem; color: var(--texto-2); line-height: 1.85; }
.sinopse p { margin-bottom: 1rem; }
.sinopse p:last-child { margin-bottom: 0; }
.sinopse em { color: var(--texto); font-style: italic; }

/* Excerto */
.excerto-bloco {
  background: linear-gradient(135deg, var(--fundo-2) 0%, var(--fundo-card) 100%);
  border-left: 4px solid var(--ouro);
  border-radius: 0 var(--raio-lg) var(--raio-lg) 0;
  padding: 1.75rem 2rem;
  position: relative;
  overflow: hidden;
}
.excerto-bloco::before {
  content: '❝';
  font-family: var(--fonte-titulo);
  position: absolute; top: -.25rem; left: 1rem;
  font-size: 5rem; color: var(--ouro); opacity: .1;
  line-height: 1; pointer-events: none;
}
.excerto-texto {
  font-family: var(--fonte-titulo); font-style: italic;
  font-size: 1.05rem; line-height: 1.8; color: var(--texto-2);
  position: relative; z-index: 1;
}
.excerto-fonte {
  font-family: var(--fonte-display); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro); margin-top: 1rem; display: block;
}

/* Personagens */
.personagens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}
.personagem-card {
  background: var(--fundo-card); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s;
}
.personagem-card:hover {
  border-color: var(--borda-media);
  box-shadow: var(--sombra-sm);
}
.personagem-nome {
  font-family: var(--fonte-titulo); font-size: 1rem; font-weight: 500;
  color: var(--texto); margin-bottom: .2rem;
}
.personagem-papel {
  font-family: var(--fonte-display); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: .65rem;
}
.personagem-desc {
  font-size: .85rem; color: var(--texto-3); line-height: 1.65;
}

/* Capítulos */
.capitulos-lista {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .25rem;
}
.capitulo-item {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .65rem .85rem; border-radius: var(--raio);
  background: var(--fundo-card); border: 1px solid var(--borda);
  transition: border-color .18s, background .18s;
  font-size: .92rem; color: var(--texto-2);
}
.capitulo-item:hover { border-color: var(--borda-media); background: var(--fundo-2); }
.capitulo-num {
  font-family: var(--fonte-display); font-size: .65rem;
  letter-spacing: .1em; color: var(--ouro); flex-shrink: 0;
  min-width: 2ch;
}
.capitulo-nome { font-family: var(--fonte-corpo); }

/* ── SIDEBAR ──────────────────────────────────────────────────── */
.livro-sidebar {
  position: sticky; top: calc(var(--altura-nav) + 1.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}
@media (max-width: 960px) {
  .livro-sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
}

.sidebar-card {
  background: var(--fundo-card); border: 1px solid var(--borda);
  border-radius: var(--raio-lg); padding: 1.25rem;
  box-shadow: var(--sombra-sm);
}
.sidebar-titulo {
  font-family: var(--fonte-display); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: .85rem;
  display: flex; align-items: center; gap: .4rem;
}
.sidebar-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; padding: .35rem 0;
  border-bottom: 1px solid var(--borda); font-size: .82rem;
}
.sidebar-item:last-child { border-bottom: none; }
.sidebar-label { color: var(--texto-3); flex-shrink: 0; }
.sidebar-valor { color: var(--texto-2); text-align: right; }
.sidebar-card p { font-size: .85rem; color: var(--texto-3); line-height: 1.6; margin-bottom: .85rem; }

/* Download box sidebar */
.download-box .download-btns {
  display: flex; flex-direction: column; gap: .45rem;
}

/* ================================================================
   OUTROS LIVROS
   ================================================================ */
.outros-livros-secao {
  background: var(--fundo-2);
  border-top: 1px solid var(--borda);
  padding: 4rem 2rem;
}
.outros-livros-inner { max-width: var(--largura-max); margin: 0 auto; }
.outros-livros-titulo {
  font-family: var(--fonte-titulo); font-size: 1.75rem; font-weight: 400;
  text-align: center; margin-bottom: 2.5rem;
}
.outros-livros-titulo em { color: var(--ouro); font-style: italic; }
.outros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.5rem;
}
.outro-livro-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--texto);
  border-radius: var(--raio-lg); overflow: hidden;
  background: var(--fundo-card); border: 1px solid var(--borda);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.outro-livro-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-md);
  border-color: var(--borda-media);
}
.outro-livro-card img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block;
}
.outro-livro-info { padding: .75rem; }
.outro-livro-titulo {
  font-family: var(--fonte-titulo); font-size: .95rem; font-weight: 400;
  margin-bottom: .2rem; color: var(--texto);
}
.outro-livro-genero {
  font-family: var(--fonte-display); font-size: .56rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3);
}

/* ================================================================
   NEWSLETTER SECTION
   ================================================================ */
.newsletter-secao {
  background: linear-gradient(135deg, #1A0F00 0%, #2C1810 100%);
  padding: 4rem 2rem; text-align: center;
}
.newsletter-inner { max-width: 560px; margin: 0 auto; }
.newsletter-titulo {
  font-family: var(--fonte-titulo); font-size: clamp(1.4rem,3vw,2rem);
  font-weight: 400; color: #D4C5A0; margin-bottom: .75rem;
}
.newsletter-desc {
  font-size: .95rem; color: #786858; line-height: 1.7; margin-bottom: 1.75rem;
}
.newsletter-form {
  display: flex; gap: .6rem; max-width: 420px; margin: 0 auto;
}
.newsletter-input {
  flex: 1; padding: .75rem 1rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(184,134,11,.3);
  border-radius: var(--raio); color: #D4C5A0;
  font-family: var(--fonte-ui); font-size: .95rem;
  outline: none; transition: border-color .2s;
}
.newsletter-input::placeholder { color: #4A3D2E; }
.newsletter-input:focus { border-color: var(--ouro); }
@media (max-width: 480px) {
  .newsletter-form { flex-direction: column; }
}

/* ================================================================
   BOTÕES GLOBAIS (btn, btn-primario, btn-secundario, btn-ghost)
   — definidos aqui para as páginas de livro não dependerem do auth.css
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem; padding: .65rem 1.35rem; border-radius: var(--raio);
  font-family: var(--fonte-display); font-size: .65rem;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; border: none; text-decoration: none;
  transition: all .2s;
}
.btn-primario { background: var(--ouro); color: #1A0F00; }
.btn-primario:hover { opacity: .88; }
.btn-secundario {
  background: transparent; color: var(--texto-2);
  border: 1px solid var(--borda-media);
}
.btn-secundario:hover { border-color: var(--ouro); color: var(--ouro); }
.btn-ghost {
  background: transparent; color: var(--texto-3);
  border: 1px solid var(--borda);
}
.btn-ghost:hover { border-color: var(--borda-media); color: var(--texto-2); }
.btn-ler-agora { background: rgba(39,174,96,.12); color: #27ae60; border: 1px solid #27ae60; }
.btn-ler-agora:hover { background: rgba(39,174,96,.22); }

/* Slot de compra */
[data-slot-compra] { display: flex; flex-direction: column; gap: .6rem; }

/* ================================================================
   REVEAL ANIMATION (scroll-triggered fade-up)
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visivel {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }