/* A cara dos sites de leitura, com a identidade do Fio (18/09/2026).
 *
 * O dono pediu o site inteiro com o jeito dos sites de mangá que ele lê: capa
 * em destaque, selos nos cartões, destaque grande com a capa desfocada ao
 * fundo, títulos de seção marcados. Sem tirar nada, e sem trocar a identidade:
 * Literata nos títulos, papel e vinho nas cores — só mais contraste e mais
 * capa. Vale para o app (index.html) e para as páginas soltas.
 */

/* ── o noturno mais fundo, como nos sites de leitura (os outros temas ficam) ── */
[data-tema=noturno]{--papel:#100e0c;--papel-2:#1a1714;--linha:#2a2520;--tinta:#ece4d8;--tinta-2:#a2978b}

/* ── títulos de seção com a barrinha de destaque ── */
.fio-titulo{display:flex;align-items:center;gap:.55rem;font-weight:600;letter-spacing:.005em}
.fio-titulo::before{content:'';width:4px;height:1.05em;border-radius:3px;background:var(--acento);flex:none}

/* ── o cartão de livro ── */
.fio-capa{border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 26px -14px rgba(0,0,0,.65);transition:transform .2s,box-shadow .2s}
.group:hover .fio-capa{box-shadow:0 2px 4px rgba(0,0,0,.25),0 18px 34px -14px rgba(0,0,0,.75)}
.fio-selo,.fio-nota,.fio-tempo{position:absolute;z-index:2;font:600 9.5px/1.2 Inter,system-ui,sans-serif;letter-spacing:.06em;border-radius:4px;padding:3px 6px;pointer-events:none}
.fio-selo{top:6px;left:6px;text-transform:uppercase;color:#fff}
.fio-selo-trad{background:var(--acento)}
.fio-selo-lei{background:#1f4e8c}
.fio-nota{top:6px;right:6px;background:rgba(0,0,0,.72);color:#f5d27a;letter-spacing:0}
.fio-tempo{right:6px;bottom:6px;background:rgba(0,0,0,.72);color:#fff;letter-spacing:.02em;font-weight:500}
/* o "ler agora" do hover passa por cima do tempo */
.group:hover .fio-tempo{opacity:0}

/* ── o destaque da home: capa desfocada ao fundo ── */
.fio-hero{background:#15110e;border:0!important;color:#f3ece2;isolation:isolate;
  --tinta:#f3ece2;--tinta-2:#cdbfae;--linha:rgba(255,255,255,.22)}
.fio-hero-fundo{position:absolute;inset:-40px;z-index:-1;background-size:cover;background-position:center;filter:blur(28px) brightness(.36) saturate(1.25);transform:scale(1.1)}
.fio-hero-veu{background:linear-gradient(90deg,rgba(10,8,6,.55),rgba(10,8,6,.15) 65%,transparent),radial-gradient(58% 88% at 13% 42%,color-mix(in srgb,var(--acento) 26%,transparent),transparent 70%)}
.fio-hero .miudo{color:#f0a592;letter-spacing:.2em}
.fio-hero h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}

/* ── rolagem fina nas faixas de capas ── */
.overflow-x-auto{scrollbar-width:thin;scrollbar-color:var(--linha) transparent}

/* ── "chegaram agora" (montado por /fio-app-extras.js) ── */
.fio-novidades{margin:0}
.fio-novidades .topo{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .9rem;padding:0 .25rem;flex-wrap:wrap}
.fio-novidades .topo span{font-size:.75rem;color:var(--tinta-2)}
.fio-novidades .rolo{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin}
.fio-novidades a{flex:none;width:8.5rem;text-decoration:none;color:inherit;position:relative}
.fio-novidades .cap{position:relative;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--papel-2);box-shadow:0 1px 2px rgba(0,0,0,.2),0 12px 26px -14px rgba(0,0,0,.65);transition:transform .2s}
.fio-novidades a:hover .cap{transform:translateY(-4px)}
.fio-novidades img{width:100%;height:100%;object-fit:cover;display:block}
.fio-novidades .t{font:500 .82rem/1.3 Literata,Georgia,serif;margin-top:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fio-novidades .q{font-size:.68rem;color:var(--tinta-2);margin-top:.1rem}
.fio-novidades .novo{position:absolute;z-index:2;top:6px;left:6px;background:var(--acento);color:#fff;font:700 9.5px/1.2 Inter,system-ui,sans-serif;letter-spacing:.08em;border-radius:4px;padding:3px 6px}