/* ============================================================
   LEGADO ÁVILA — CSS COMPARTILHADO DOS WIREFRAMES
   Fonte única de verdade: extraído de home-v3.html.
   Mude aqui, muda em todas as abas (home-v3, wf-historia,
   wf-tetralogia, wf-livro, wf-leitor, wf-cronicas).
   NADA de valores alterados aqui — só centralização mecânica.
   ============================================================ */

/* ===== 1. TOKENS (:root) ===== */
:root{
  --paper:#F4EEE1; --paper-deep:#EADFC9; --paper-card:#FBF7EC;
  --ink:#2A2118; --ink-soft:#6A5947; --ink-faint:#9C8C77;
  --ruby:#7C1D2A; --ruby-bright:#A32638;
  --gold:#A97E2F; --gold-soft:#C4A45E;
  --night:#12100D; --night-2:#1A1611; --candle:#E8B44A;
  --bone:#EDE4D3; --bone-soft:#B8AB93; --line:#D8CBB2;
  --erro:#A32638;
}

/* ===== 2. RESET + BASE =====
   Nota: body aqui assume o padrão "página clara" (paper/ink).
   Páginas de fundo escuro (ex.: wf-tetralogia) sobrescrevem
   `body{background:var(--night);color:var(--bone)}` no <style>
   interno — a cascata resolve sem duplicar nada aqui. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Source Serif 4',serif;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ===== 3. KICKER (.k) =====
   Padrão = var(--ruby). Página de fundo escuro (wf-tetralogia)
   sobrescreve localmente para var(--candle). */
.k{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ruby)}

/* ===== 4. BOTÕES (.btn e variantes) =====
   border:none/cursor:pointer inclusos no base: inofensivo para
   <a> (sem borda/cursor próprios) e necessário para <button>. */
.btn{display:inline-block;padding:15px 32px;text-decoration:none;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:all .25s ease;border:none;cursor:pointer}
.btn-ruby{background:var(--ruby);color:var(--paper-card)}
.btn-ruby:hover{background:var(--ruby-bright);box-shadow:0 8px 24px rgba(124,29,42,.3)}
.btn-ghost{border:1px solid var(--ink-soft);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ruby);color:var(--ruby)}
.btn-gold{color:var(--night);background:linear-gradient(180deg,#F0C56A,#C79A3B)}
.btn-gold:hover{box-shadow:0 10px 36px rgba(232,180,74,.4);transform:translateY(-2px)}
.btn-line{border:1px solid rgba(237,228,211,.45);color:var(--bone)}
.btn-line:hover{border-color:var(--candle);color:var(--candle)}

/* ===== 5. REVEAL ON SCROLL (.rv/.rv.on) ===== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.rv.on{opacity:1;transform:none}

/* ===== 6. FIO DE PROGRESSO LATERAL (.fio) =====
   Padrão = versão "wireframe" (top:44px, por causa do mockbar
   fixo). home-v3 (sem mockbar) sobrescreve `top:0` localmente;
   wf-tetralogia sobrescreve a cor rgba do glow localmente. */
.fio{position:fixed;left:26px;top:44px;bottom:0;width:2px;z-index:95;background:rgba(169,126,47,.18)}
.fio .cheio{position:absolute;top:0;left:0;width:100%;height:0%;background:linear-gradient(180deg,var(--gold-soft),var(--gold))}
.fio .ponta{position:absolute;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#D95065,var(--ruby-bright) 55%,#45090F);box-shadow:0 0 12px rgba(163,38,56,.55);top:100%}
@media(max-width:1100px){.fio{display:none}}

/* ===== 7. TOPBARS DE MOCKUP =====
   .mockbar = versão escura fixa (home-v3 usa variante .seletor
   própria, ver seção 7b; wf-historia/wf-tetralogia usam .mockbar).
   .topbar = versão sticky simples (wf-livro/wf-leitor/wf-cronicas). */
.mockbar{position:fixed;top:0;left:0;right:0;z-index:300;background:rgba(18,16,13,.96);border-bottom:1px solid rgba(232,180,74,.3);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 18px;font-family:'Inter',sans-serif}
.mockbar .lbl{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-soft)}
.mockbar a{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);text-decoration:none}

.topbar{position:sticky;top:0;z-index:100;background:var(--ink);color:var(--paper);font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.1em;padding:10px 20px;display:flex;justify-content:space-between;text-transform:uppercase}
.topbar a{color:var(--gold-soft);text-decoration:none}

/* 7b. Seletor de hero ao vivo (exclusivo home-v3, mesma família visual do mockbar) */
.seletor{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(18,16,13,.96);border-bottom:1px solid rgba(232,180,74,.3);display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 14px;flex-wrap:wrap}
.seletor .lbl{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-soft);margin-right:6px}
.seletor button{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;background:transparent;border:1px solid rgba(232,180,74,.35);color:var(--bone-soft);cursor:pointer;transition:all .2s}
.seletor button.on{background:var(--ruby);border-color:var(--ruby);color:var(--paper)}
.seletor a{font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft);text-decoration:none;margin-left:10px}

/* ===== 8. NAVEGAÇÃO =====
   Estrutura comum (logo/crest/nome/lista de links) é igual em
   todas as páginas com nav. Posicionamento/fundo/margin variam
   por página (absolute+overlay na home; relative+paper em
   wf-historia; relative+transparente em wf-tetralogia;
   max-width centralizado em wf-livro/wf-cronicas) — cada página
   mantém esse ajuste específico no <style> interno. */
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 48px}
.nav .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav .crest{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:'Playfair Display',serif;font-size:17px;font-weight:600}
.nav .nome{font-family:'Playfair Display',serif;font-size:1rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.nav ul{display:flex;gap:30px;list-style:none}
.nav ul a{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}

/* Nav clara (fundo paper: wf-historia, wf-livro, wf-cronicas) */
.nav.clara .logo{color:var(--ink)}
.nav.clara .crest{border:1px solid var(--gold);color:var(--ruby)}
.nav.clara ul a{color:var(--ink-soft)}
.nav.clara ul a:hover{color:var(--ruby)}
.nav.clara ul a.on{color:var(--ruby)}

/* Nav escura (fundo night/overlay: home-v3, wf-tetralogia) */
.nav.escura .logo{color:var(--bone)}
.nav.escura .crest{border:1px solid var(--gold-soft);color:var(--candle)}
.nav.escura ul a{color:var(--bone-soft)}
.nav.escura ul a:hover{color:var(--candle)}
.nav.escura ul a.on{color:var(--candle)}

/* Botão "Entrar" da nav — dois nomes usados nos wireframes, mesmo componente */
.nav .entrar{border:1px solid var(--ink-soft);color:var(--ink);padding:10px 22px}
.nav .entrar:hover{border-color:var(--ruby);color:var(--ruby)}
.nav .btn-line-ink{border:1px solid var(--ink-soft);color:var(--ink);padding:10px 22px;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.nav .btn-line-ink:hover{border-color:var(--ruby);color:var(--ruby)}

/* ===== 9. ROTA-FITA (faixa animada de rota) ===== */
.rota-fita{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-deep);overflow:hidden;white-space:nowrap;padding:13px 0}
.rota-fita .inner{display:inline-block;animation:rola 30s linear infinite;font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase}
.rota-fita b{color:var(--ruby)}
.rota-fita span{margin:0 22px}
@keyframes rola{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== 10. ORIGEM (bloco editorial com prancha, exclusivo home-v3) ===== */
.origem{max-width:1290px;margin:0 auto;padding:130px 48px;display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}
.origem .prancha{border:1px solid var(--gold);padding:8px;background:var(--night);box-shadow:0 26px 60px rgba(42,33,24,.25)}
.origem .prancha img{width:100%;display:block}
.origem .cred{margin-top:12px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.origem h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(2rem,3.8vw,3rem);line-height:1.12;margin:14px 0 24px}
.origem h2 em{font-style:italic;color:var(--ruby)}
.origem p{font-size:1.06rem;color:var(--ink-soft);max-width:32em;margin-bottom:1em}
.origem p strong{color:var(--ink);font-weight:600}

/* ===== 11. PULL QUOTE (citação com filete dourado) ===== */
.pull{border-left:2px solid var(--gold);padding:6px 0 6px 24px;margin:30px 0 10px;font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:1.45rem;line-height:1.45;color:var(--ink)}
.pull .fonte{display:block;margin-top:10px;font-family:'Inter',sans-serif;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase}

/* ===== 12. PORTAL (moldura escura da Tetralogia) + MOLDURA (tag) ===== */
.portal-borda{max-width:1290px;margin:0 auto;padding:0 48px 130px}
.portal{background:var(--night);color:var(--bone);position:relative;overflow:hidden;border:1px solid var(--gold);outline:6px solid var(--night);outline-offset:-14px;box-shadow:0 40px 90px rgba(42,33,24,.35);padding:100px 60px}
.portal::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 50% at 50% 0%, rgba(46,15,20,.65), transparent 65%)}
.portal-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto}
.portal-head{text-align:center;margin-bottom:60px}
.moldura{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-soft);border:1px solid rgba(232,180,74,.3);display:inline-block;padding:7px 16px;margin-bottom:26px}
.portal-head h3{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(2rem,4.2vw,3.3rem);letter-spacing:.06em;text-transform:uppercase}
.portal-head h3 small{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.38em;color:var(--bone-soft);margin-top:12px}
.portal-head .trad{font-family:'Playfair Display',serif;font-size:clamp(1.25rem,2.5vw,1.7rem);font-style:italic;color:var(--bone-soft);margin-top:24px;line-height:1.5}
.portal-head .trad b{color:var(--candle);font-weight:500;font-style:normal}
.portal-cta{margin-top:56px;text-align:center}
.portal-cta .nota{margin-top:14px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:.16em;color:var(--bone-soft);text-transform:uppercase}

/* ===== 13. GRID DOS 4 VOLUMES (.vol) — home-v3 e wf-tetralogia ===== */
.vol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vol{background:linear-gradient(180deg,var(--night-2),#0F0C08);border:1px solid rgba(232,180,74,.22);padding-bottom:26px;text-align:center;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;overflow:hidden}
.vol:hover{transform:translateY(-8px);border-color:rgba(232,180,74,.6);box-shadow:0 22px 50px rgba(0,0,0,.55)}
.vol .prancha{aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid rgba(232,180,74,.2)}
.vol .prancha img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.vol:hover .prancha img{transform:scale(1.05)}
.vol .pk{font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;color:var(--candle);margin-top:18px}
.vol h4{font-family:'Playfair Display',serif;font-weight:600;font-size:1.22rem;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 10px}
.vol p{font-size:.9rem;color:var(--bone-soft);line-height:1.6;padding:0 20px}
.vol .estado{margin-top:16px;display:inline-block;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(232,180,74,.25);color:var(--bone-soft)}
.vol.destaque .estado{border-color:var(--ruby-bright);color:#E5677A}
/* cards .vol/.livro agora podem ser <a> (navegação clicável): reset para o <a> herdar o comportamento do <div> original */
a.vol,a.livro{display:block;color:inherit;text-decoration:none}

/* ===== 14. BIBLIOTECA (grid de 3 livros — home-v3) ===== */
.biblio{background:var(--paper);padding:20px 48px 120px}
.biblio-inner{max-width:1290px;margin:0 auto}
.biblio h3{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(2rem,3.6vw,2.9rem);margin:12px 0 54px}
.livros{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* Biblioteca dentro do portal escuro: cada card com a MESMA largura dos 4 volumes da Tetralogia
   (3 colunas de vol + 2 gaps, centrado): col = (100% - 3*18px)/4 -> 3col+2gap = 75% - 4.5px */
.portal .livros{gap:18px;max-width:calc(75% - 4.5px);margin:0 auto}
.livro{background:var(--paper-card);border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.livro:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(42,33,24,.16)}
/* prancha QUADRADA inteira (o "ícone" de cada livro), como nos volumes da Tetralogia — decisão do Avimar (3º pedido) */
.livro .prancha{aspect-ratio:1/1;overflow:hidden;border-bottom:1px solid var(--line);background:var(--night)}
.livro .prancha img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.livro:hover .prancha img{transform:scale(1.04)}
.livro .corpo{padding:24px 24px 28px}
.livro .num{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase}
.livro h4{font-family:'Playfair Display',serif;font-weight:600;font-size:1.42rem;line-height:1.15;margin:10px 0 8px}
.livro .desc{font-size:.93rem;color:var(--ink-soft);line-height:1.6}
.livro .status{margin-top:18px;display:inline-block;font-family:'Inter',sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);color:var(--ink-soft)}

/* ===== 15. BISA — citação de arquivo em destaque (home-v3) ===== */
.bisa{background:var(--paper-deep);padding:120px 48px;display:grid;place-items:center;text-align:center}
.bisa-inner{max-width:760px}
.bisa blockquote{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;font-size:clamp(1.55rem,3.2vw,2.4rem);line-height:1.45}
.bisa blockquote em{color:var(--ruby)}
.bisa .quem{margin-top:26px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.bisa .promessa{margin-top:8px;font-family:'Playfair Display',serif;font-style:italic;font-size:1.15rem;color:var(--ink-soft)}

/* ===== 16. GUARDIÕES — grid de pessoas (home-v3) ===== */
.guardioes{background:var(--paper);padding:120px 48px}
.g-inner{max-width:1240px;margin:0 auto;text-align:center}
.guardioes h3{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(2rem,3.6vw,2.9rem);margin:12px 0 10px}
.guardioes .lead{color:var(--ink-soft);max-width:40em;margin:0 auto 60px}
/* Guardiões: carrossel horizontal INFINITO (decisão Avimar 2026-07-07) — setas manuais + auto a cada 6s,
   loop nos dois sentidos via clones; autoplay pausa no hover e desliga em reduced-motion (JS na home). */
.carrossel{position:relative;padding:0 34px}
.carrossel .janela{overflow:hidden}
.pessoas{--passo:20%;display:flex;will-change:transform;transform:translateX(-100%)} /* posição inicial = pula os 5 clones prefixados, sem depender de medição JS */
.pessoa{flex:0 0 var(--passo);min-width:0;padding:0 13px;text-align:center}
.carrossel .seta{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border:1px solid var(--gold);background:var(--paper-card);color:var(--ruby);font-size:1.5rem;font-family:'Playfair Display',serif;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:3px 3px 0 var(--line);border-radius:2px;transition:all .2s ease}
.carrossel .seta:hover{transform:translateY(-50%) translate(1px,1px);box-shadow:2px 2px 0 var(--line);color:var(--ruby-bright)}
.carrossel .seta.esq{left:-8px}
.carrossel .seta.dir{right:-8px}
.pessoa .quadro{width:150px;height:190px;margin:0 auto 16px;border:1px solid var(--gold);padding:7px;background:var(--paper-card);box-shadow:0 14px 34px rgba(42,33,24,.14)}
.pessoa .quadro img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.pessoa .quadro .vazio{height:100%;display:grid;place-items:center;background:linear-gradient(180deg,#E4D6BC,#D3C1A0);font-family:'Playfair Display',serif;font-style:italic;font-size:2rem;color:var(--ink-soft)}
.pessoa h5{font-family:'Playfair Display',serif;font-weight:600;font-size:1.15rem}
.pessoa p{font-family:'Inter',sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}

/* ===== 17. CARTAS — newsletter (home-v3, wf-cronicas) ===== */
.cartas{background:var(--paper-deep);padding:120px 48px;display:grid;place-items:center}
.carta-box{max-width:660px;padding:60px 64px;text-align:center;position:relative}
/* .carta-box.pergaminho: modificador antigo — a receita T16 agora vive
   no .carta-box base (seção TEMA APROVADO). A classe .pergaminho no HTML
   fica inofensiva (não redefine nada). */
.carta-box .selo-cera{position:absolute;top:-24px;right:46px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--ruby-bright),var(--ruby) 55%,#521019);display:grid;place-items:center;color:rgba(244,238,225,.85);font-family:'Playfair Display',serif;font-weight:700;font-size:20px;box-shadow:0 6px 16px rgba(124,29,42,.4)}
.carta-box h3{font-family:'Playfair Display',serif;font-weight:500;font-size:1.9rem;margin-bottom:12px}
.carta-box p{color:var(--ink-soft);max-width:30em;margin:0 auto}
.form-mock{display:flex;gap:12px;margin-top:32px}
.form-mock input{flex:1;border:1px solid var(--line);background:var(--paper);padding:14px 18px;font-family:'Source Serif 4',serif;font-size:1rem;color:var(--ink)}
/* respiro da linha LGPD: precisa de .carta-box .lgpd porque .carta-box p{margin:0 auto} (linha 217)
   tem especificidade maior que .lgpd sozinho e engolia o margin-top — causa dos 5 pedidos do Avimar */
.lgpd,.carta-box .lgpd{margin:34px auto 0;font-family:'Inter',sans-serif;font-size:10.5px;color:var(--ink-faint)}

/* ===== 18. FOOTER ===== */
footer{background:var(--ink);color:var(--paper-deep);padding:44px;text-align:center;font-family:'Inter',sans-serif;font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
footer b{color:var(--gold-soft)}

/* ===== 19. COMPONENTES CANÔNICOS ADICIONAIS ===== */

/* .campo — input de formulário (wf-leitor) */
.campo{width:100%;border:1px solid var(--line);background:var(--paper);padding:14px 18px;font-family:'Source Serif 4',serif;font-size:1rem;color:var(--ink);margin-bottom:14px;transition:border-color .25s}
.campo:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(169,126,47,.15)}

/* .crumbs — breadcrumb (wf-livro) */
.crumbs-wrap{max-width:1290px;margin:0 auto;padding:0 48px}
.crumbs{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--ruby)}

/* .moldura-tag — variante nomeada usada em wf-leitor (mesmo visual de .moldura) */
.moldura-tag{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-soft);border:1px solid rgba(232,180,74,.3);display:inline-block;padding:7px 16px;margin-bottom:26px}

/* .selo — selo inline do hero (home-v3) */
.hero .selo{display:inline-flex;align-items:center;gap:10px;margin-top:26px;border:1px solid rgba(232,180,74,.35);padding:10px 18px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--bone-soft);text-transform:uppercase}
.hero .selo .ponto{width:8px;height:8px;border-radius:50%;background:var(--ruby-bright)}

/* FAQ accordion — dois temas coexistem sob containers distintos
   (mesmo seletor `details` teria conflito, então cada wrapper
   escopa sua própria variante):
   - .faq-borda details → tema escuro (wf-tetralogia)
   - .faq details        → tema claro (wf-livro) */
.faq-borda details{border-bottom:1px solid rgba(232,180,74,.22);padding:22px 0}
.faq-borda details summary{cursor:pointer;list-style:none;font-family:'Playfair Display',serif;font-weight:500;font-size:1.15rem;color:var(--bone);display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq-borda details summary::-webkit-details-marker{display:none}
.faq-borda details summary::after{content:"+";font-family:'Inter',sans-serif;font-size:1.4rem;font-weight:400;color:var(--candle);flex-shrink:0;transition:transform .25s ease}
.faq-borda details[open] summary::after{content:"–"}
.faq-borda details p{margin-top:14px;color:var(--bone-soft);font-size:.98rem;max-width:34em}

.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq details summary{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--ink)}
.faq details summary::-webkit-details-marker{display:none}
.faq details summary::after{content:"+";font-family:'Inter',sans-serif;font-size:1.3rem;color:var(--ruby);transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:14px;color:var(--ink-soft);max-width:38em}

/* ===== 20. MEDIA QUERIES COMPARTILHADAS ===== */
@media(max-width:960px){
  .nav ul{display:none}
  .origem{grid-template-columns:1fr;gap:44px;padding:90px 24px}
  .portal-borda{padding:0 16px 90px}
  .portal{padding:70px 26px}
  .vol-grid{grid-template-columns:repeat(2,1fr)}
  .livros{grid-template-columns:1fr}
  .biblio,.guardioes,.cartas,.bisa{padding-left:24px;padding-right:24px}
  .pessoas{--passo:50%;transform:translateX(-250%)} /* 5 clones × 50% */
  .carrossel{padding:0 26px}
  .carta-box{padding:44px 28px}
  .form-mock{flex-direction:column}
  .crumbs-wrap{padding:0 24px}
}

/* ============================================================
   TEMA APROVADO (rodada 15): tema ÚNICO de todo o site
   Cards  = T16 "Pergaminho vivo"
   Botões = T13 "Sombra de impressão"
   Regra central e única — NÃO duplicar a receita em página nenhuma.
   Os <style> locais das páginas carregam DEPOIS deste arquivo:
   onde um card/botão tiver bg/border/box-shadow conflitante lá,
   essas 3 propriedades foram removidas para esta regra valer.
   ============================================================ */

/* ---- T16 CARD · contexto CLARO (fundo pergaminho) ----
   .livro       — biblioteca (home-v3) + "da mesma casa" (wf-livro)
   .carta-box   — newsletter (home-v3, wf-cronicas)
   .cronica     — cards da listagem de crônicas (wf-cronicas)
   .garantia    — selo de garantia em pergaminho (wf-livro)
   .login-card  — card de login (wf-leitor)
   .livro-card  — card da estante (wf-leitor) */
.livro,.carta-box,.cronica,.garantia,.login-card,.livro-card{background:linear-gradient(180deg,#FDF9EF,#F3EAD5);border:1px solid #D3C3A2;box-shadow:0 18px 40px rgba(42,33,24,.14),inset 0 0 40px rgba(211,195,162,.25)}
.livro:hover,.cronica:hover,.livro-card:hover{box-shadow:0 24px 48px rgba(42,33,24,.18),inset 0 0 40px rgba(211,195,162,.25)}

/* ---- T16 CARD · contexto ESCURO (mantém o fundo escuro do componente) ----
   .vol         — grid dos 4 volumes (home-v3, wf-tetralogia)
   .status-card — card de status da lista (wf-leitor, fundo --night)
   .lista       — caixa da lista de espera (wf-tetralogia, fundo --night-2) */
.vol,.status-card,.lista{border:1px solid rgba(232,180,74,.45);box-shadow:inset 0 0 44px rgba(0,0,0,.5)}

/* ---- T13 BOTÃO · sólido (contexto claro) ---- */
.btn-ruby,.btn-gold{box-shadow:4px 4px 0 rgba(42,33,24,.92);border-radius:2px}
.btn-ruby:hover,.btn-gold:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(42,33,24,.92)}

/* ---- T13 BOTÃO · sólido em contexto ESCURO (hero/portal/hero-livro) ---- */
.hero .btn-gold,.portal .btn-gold,.hero-livro .btn-gold{box-shadow:4px 4px 0 rgba(0,0,0,.65)}
.hero .btn-gold:hover,.portal .btn-gold:hover,.hero-livro .btn-gold:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.65)}

/* ---- T13 BOTÃO · fantasma/linha (contexto CLARO: usa var(--line)) ----
   .btn-ghost      — "Ler um Trecho" (wf-livro)
   .nav .entrar    — botão Entrar da nav clara (wf-livro, wf-cronicas)
   .nav .btn-line-ink — mesmo componente, outro nome */
.btn-ghost,.nav .entrar,.nav .btn-line-ink{box-shadow:3px 3px 0 var(--line);border-radius:2px}
.btn-ghost:hover,.nav .entrar:hover,.nav .btn-line-ink:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--line)}

/* ---- T13 BOTÃO · fantasma/linha em contexto ESCURO (hero/portal/nav escura) ----
   .btn-line — "Explorar a Biblioteca"/"Entrar" no hero (home-v3),
               "Descobrir as Minhas Raízes"/"Entrar" (wf-historia),
               "Entrar" da nav escura (wf-tetralogia) */
.btn-line{box-shadow:3px 3px 0 rgba(0,0,0,.65);border-radius:2px}
.btn-line:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.65)}

/* ============================================================
   HERO-LIVRO — hero animado full-bleed das páginas de obra
   (wf-livro-herancas, wf-livro-mare, wf-livro-genealogia)
   Receita "híbrida" aprovada pelo dono (hero-demo.html, versão ★):
   Ken Burns lento + véu de luz pulsante + fagulhas douradas (JS).
   Estrutura full-bleed (largura total do viewport), no padrão da
   wf-tetralogia: texto num container interno .hero-livro-inner.
   Componente ÚNICO — as 3 páginas só usam as classes + sua imagem.
   Cada página define no <style> local APENAS o object-position da
   sua imagem (foco vertical), nada mais. Cores = tokens.
   ============================================================ */
.hero-livro{position:relative;width:100%;overflow:hidden;background:var(--night);color:var(--bone)}
/* Ken Burns + véu + fagulhas: primitivas compartilhadas por .hero-livro (3 páginas
   de obra) e .hero-anim (hero da tetralogia, wf-tetralogia). Um só conjunto de
   keyframes (kenburns/pulsa/sobe), reutilizado nos dois contextos sem duplicar. */
.hero-livro .bgwrap,.hero-anim .bgwrap{position:absolute;inset:-6%;z-index:0}
.hero-livro .bgwrap img,.hero-anim .bgwrap img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;animation:kenburns 26s cubic-bezier(.22,.61,.36,1) infinite alternate}
.hero-livro .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(18,16,13,.92) 30%,rgba(18,16,13,.45) 60%,rgba(18,16,13,.15))}
.hero-livro .veu,.hero-anim .veu{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 55% 42% at 68% 32%,rgba(232,180,74,.2),transparent 65%);opacity:.4;animation:pulsa 5.5s ease-in-out infinite}
.hero-livro .hero-livro-inner{position:relative;z-index:10;max-width:1290px;margin:0 auto;padding:150px 48px 120px;width:100%}
.hero-livro .k{color:var(--candle)}
.hero-livro h1{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.13;max-width:15em;margin:20px 0 24px;color:var(--bone)}
.hero-livro h1 em{font-style:italic;background:linear-gradient(180deg,#F5EBD8 25%,var(--candle) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* corpo do hero = MESMA fonte do hero da home (decisão Avimar 2026-07-07): Source Serif 4 fina 300, 1.14rem */
.hero-livro .corpo p{font-family:'Source Serif 4',serif;font-weight:300;font-size:1.14rem;color:var(--bone-soft);max-width:31em;margin-bottom:1em}
.hero-livro .corpo p b{color:var(--bone);font-weight:600}
/* .pull herda o filete dourado + Playfair itálico do T11; aqui só recolore para o fundo escuro */
.hero-livro .pull{color:var(--bone);font-size:1.35rem;margin:28px 0 34px;max-width:26em}
.hero-livro .pull .fonte{color:var(--bone-soft)}
.hero-livro .ctas{display:flex;gap:16px;flex-wrap:wrap}
/* legenda discreta (formato + assinatura): reaproveita .specs, recolorida e alinhada à esquerda */
.hero-livro .specs{margin-top:22px;text-align:left;color:var(--bone-soft)}
.hero-livro .specs b{color:var(--bone)}
/* fagulha do hero — partículas criadas por JS, escopadas à seção (z acima do overlay);
   mesma classe serve hero-livro e hero-anim (tetralogia) */
.hero-livro .fagulha,.hero-anim .fagulha{position:absolute;bottom:-8px;border-radius:50%;background:radial-gradient(circle,#F0C56A,rgba(232,180,74,0) 70%);animation:sobe linear infinite;pointer-events:none;z-index:6}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.6%,-2.4%)}}
@keyframes pulsa{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes sobe{from{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.95}to{transform:translateY(-108vh) translateX(var(--dx,20px));opacity:0}}
/* reduced-motion: desliga Ken Burns e véu nos dois contextos (o JS já não cria fagulhas nesse modo) */
@media(prefers-reduced-motion:reduce){
  .hero-livro .bgwrap img,.hero-anim .bgwrap img{animation:none}
  .hero-livro .veu,.hero-anim .veu{animation:none;opacity:.4}
}
@media(max-width:960px){
  .hero-livro .hero-livro-inner{padding:120px 24px 90px}
}

/* ============================================================
   SELO DA CASA — logo da marca (selo de cera "LEGADO ÁVILA")
   Uma imagem-fonte (img/selo-recorte-t.png), classes centrais:
   .nav-selo   — brasão da nav (substitui o antigo monograma .crest)
   .selo-lacre — lacre de cera do .carta-box (substitui o "Á" desenhado)
   ============================================================ */
.nav-selo{height:44px;width:auto;display:block}
@media(max-width:960px){.nav-selo{height:38px}}
/* lacre real da newsletter: o selo recortado sobre a borda do .carta-box,
   herda a posição do antigo .selo-cera (topo, recuado à direita) */
.carta-box .selo-lacre{position:absolute;top:-40px;right:38px;width:104px;height:auto;display:block;filter:drop-shadow(0 8px 18px rgba(124,29,42,.32))}
@media(max-width:640px){.carta-box .selo-lacre{width:90px;top:-34px;right:28px}}