/* BlackBlood · site · estilo compartilhado (todas as páginas carregam este arquivo).
   Veio do protótipo aprovado (site/prototipo/bb.css): paleta, letras, botões, nav,
   rodapé e blocos comuns são os mesmos. O que é de uma página só fica no <style>
   da própria página (a CSP do site permite estilo inline; só script inline é proibido). */
:root{
  --bg:#0b0a0d; --bg2:#121016; --bg3:#18151c;
  --creme:#ece6da; --texto:#bdb6aa; --fraca:#8d877d; --linha:#26222b; --linha-forte:#3a3440;
  --sangue:#c0322b; --sangue-vivo:#e0443a; --sangue-esc:#5e110d;
  --ouro:#d9b84a; --arcano:#8b5cf6;
  --nome:'IM Fell English SC',serif;          /* o nome e os títulos grandes */
  --cond:'Barlow Condensed',sans-serif;       /* rótulos, botões, números */
  --serif:'Cormorant Garamond',serif;         /* texto corrido */
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--creme);font-family:var(--serif);font-size:20px;line-height:1.5;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--sangue);color:var(--creme)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap.estreito{max-width:820px}

/* ---------- tipografia ---------- */
.kicker{font-family:var(--cond);font-weight:600;letter-spacing:.42em;font-size:13px;color:var(--sangue);text-transform:uppercase;display:inline-block}
.h1{font-family:var(--nome);font-weight:400;font-size:clamp(46px,7vw,104px);line-height:.95;letter-spacing:.02em}
.h2{font-family:var(--nome);font-weight:400;font-size:clamp(38px,5.2vw,72px);line-height:1;letter-spacing:.02em}
.h3{font-family:var(--nome);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.05}
.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--sangue)}
.lead{color:var(--texto);font-size:clamp(19px,1.6vw,23px);max-width:640px}
.fraca{color:var(--fraca)}
.rotulo{font-family:var(--cond);letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:var(--fraca)}
.nome-sangue span{display:inline-block;background:linear-gradient(180deg,var(--creme) 0%,var(--creme) 50%,var(--sangue) 50%,var(--sangue-esc) 100%);background-size:100% 200%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--cond);font-weight:600;letter-spacing:.22em;font-size:14px;text-transform:uppercase;padding:15px 26px;border:1px solid var(--sangue);background:var(--sangue);color:var(--creme);position:relative;overflow:hidden;transition:color .3s;cursor:pointer;font-size:14px}
.btn::after{content:'';position:absolute;inset:0;background:var(--creme);transform:translateY(101%);transition:transform .35s cubic-bezier(.7,0,.3,1);z-index:0}
.btn:hover{color:var(--bg)} .btn:hover::after{transform:none}
.btn>*{position:relative;z-index:1}
.btn.ghost{background:transparent}
.btn.ghost::after{background:var(--sangue)} .btn.ghost:hover{color:var(--creme)}
.btn.pequeno{padding:10px 18px;font-size:12px}
.btn.bloco{width:100%}
.link{font-family:var(--cond);letter-spacing:.18em;font-size:13px;text-transform:uppercase;color:var(--texto);border-bottom:1px solid var(--sangue);padding-bottom:2px}
.link:hover{color:var(--creme)}

/* ---------- gota (ícone) ---------- */
.gota-ico{width:12px;height:16px;background:currentColor;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;position:relative;display:inline-block;flex:none}
.gota-ico::before{content:'';position:absolute;left:50%;top:-6px;margin-left:-3px;border:3px solid transparent;border-bottom:7px solid currentColor;border-top:0}

/* ---------- nav ---------- */
#bb-nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
#bb-nav.solido{background:rgba(11,10,13,.8);backdrop-filter:blur(12px);border-color:var(--linha)}
#bb-nav .wrap{display:flex;align-items:center;height:72px;gap:30px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--nome);font-size:24px;letter-spacing:.08em}
.logo .gota-ico{color:var(--sangue)}
#bb-nav ul{display:flex;gap:26px;list-style:none;margin-left:auto}
#bb-nav ul a{font-family:var(--cond);font-weight:500;letter-spacing:.18em;font-size:13px;text-transform:uppercase;color:var(--texto);position:relative;padding:4px 0}
#bb-nav ul a::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--sangue);transition:right .3s}
#bb-nav ul a:hover,#bb-nav ul a.ativo{color:var(--creme)} #bb-nav ul a:hover::after,#bb-nav ul a.ativo::after{right:0}
.nav-acoes{display:flex;align-items:center;gap:16px}
.carrinho-ico{position:relative;width:22px;height:22px;display:grid;place-items:center;color:var(--texto)}
.carrinho-ico:hover{color:var(--creme)}
.carrinho-ico b{position:absolute;top:-7px;right:-9px;background:var(--sangue);color:var(--creme);font-family:var(--cond);font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:8px;display:grid;place-items:center;padding:0 4px}
.nav-burger{display:none;background:none;border:0;color:var(--creme);cursor:pointer}
@media(max-width:900px){#bb-nav ul{display:none} .nav-acoes{margin-left:auto} .nav-burger{display:block}
  #bb-nav.aberto ul{display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;background:rgba(11,10,13,.97);padding:24px;gap:18px;border-bottom:1px solid var(--linha)}}

/* ---------- página interna: cabeçalho ---------- */
.pagina-topo{padding:170px 0 80px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#1f1217 0%,var(--bg) 65%)}
.pagina-topo canvas.brasas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pagina-topo .wrap{position:relative}
.pagina-topo .h1{margin:18px 0 22px}
.migalha{font-family:var(--cond);letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:var(--fraca)}
.migalha a:hover{color:var(--creme)}
.migalha i{color:var(--sangue);font-style:normal;margin:0 8px}

/* ---------- blocos comuns ---------- */
.secao{padding:120px 0}
.secao.alt{background:var(--bg2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
/* sem transform na transição: as entradas do GSAP mexem no transform a cada quadro, e a
   transição CSS atrasava cada quadro em .4s (o cartão parava torto no meio, com rolagem lateral a 390) */
.cartao{background:var(--bg2);border:1px solid var(--linha);transition:border-color .4s}
.cartao:hover{border-color:#4b201c}
.grade{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.lista{list-style:none;display:grid;gap:12px}
.lista li{display:flex;gap:14px;align-items:baseline;color:var(--texto);font-size:19px}
.lista li::before{content:'';flex:none;width:7px;height:7px;background:var(--sangue);transform:rotate(45deg) translateY(-2px)}
.selo{display:inline-block;font-family:var(--cond);font-weight:600;letter-spacing:.2em;font-size:11px;padding:5px 9px;text-transform:uppercase;background:var(--sangue);color:var(--creme)}
.selo.contorno{background:transparent;border:1px solid var(--linha-forte);color:var(--texto)}
.selo.ouro{background:transparent;border:1px solid var(--ouro);color:var(--ouro)}
.divisor{height:1px;background:var(--linha);margin:28px 0}
.preco{font-family:var(--cond);font-weight:800;font-size:44px;line-height:1}
.preco small{font-size:16px;color:var(--fraca);font-weight:500;letter-spacing:.1em}
.preco s{font-size:20px;color:var(--fraca);font-weight:500;margin-right:10px}

/* ---------- formulários ---------- */
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.campo label{font-family:var(--cond);letter-spacing:.2em;font-size:12px;text-transform:uppercase;color:var(--fraca)}
.campo input,.campo select,.campo textarea{background:#0f0e12;border:1px solid var(--linha-forte);color:var(--creme);font-family:var(--serif);font-size:19px;padding:13px 15px;outline:none;transition:border-color .25s,box-shadow .25s;width:100%}
.campo input:focus,.campo select:focus{border-color:var(--sangue);box-shadow:0 0 0 3px rgba(192,50,43,.18)}
.campo input::placeholder{color:#5d5850}
.linha-campos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;gap:12px;align-items:flex-start;color:var(--texto);font-size:17px;cursor:pointer}
.check input{accent-color:var(--sangue);margin-top:5px}

/* ---------- selo (sigilo) ---------- */
.sigilo svg{width:100%;height:100%}

/* ---------- rodapé ---------- */
#bb-rodape{border-top:1px solid var(--linha);padding:70px 0 34px;color:var(--fraca);font-size:17px;margin-top:0}
#bb-rodape .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:800px){#bb-rodape .cols{grid-template-columns:1fr 1fr}}
#bb-rodape h5{font-family:var(--cond);letter-spacing:.24em;font-size:12px;text-transform:uppercase;color:var(--creme);margin-bottom:14px;font-weight:600}
#bb-rodape ul{list-style:none;display:grid;gap:8px}
#bb-rodape a:hover{color:var(--creme)}
#bb-rodape .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--linha);margin-top:50px;padding-top:24px;font-size:15px}


/* ---------- toast ---------- */
#bb-toast{position:fixed;right:20px;bottom:20px;z-index:70;max-width:calc(100vw - 40px);background:var(--bg3);border:1px solid var(--sangue);padding:14px 18px;font-size:17px;display:flex;gap:12px;align-items:center;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
#bb-toast.on{transform:none}
#bb-toast .gota-ico{color:var(--sangue)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* nav no celular: Entrar e Comprar vão para dentro do menu */
#bb-nav ul .so-mobile{display:none}
@media(max-width:600px){
  .nav-acoes .link,.nav-acoes .btn{display:none}
  #bb-nav.aberto ul .so-mobile{display:block}
  .logo{font-size:21px}
}

/* ---------- foco do teclado ---------- */
/* Só aparece com teclado (:focus-visible): o clique do mouse continua limpo. */
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}

/* ---------- artes geradas (site/img/*.webp) ---------- */
/* BB.arte() só põe a <img> depois que ela carregou: sem arquivo, o lugar fica
   com a arte de canvas/CSS de sempre, sem ícone quebrado e sem pulo de layout.
   A imagem é absoluta dentro do contêiner (que já tem tamanho e position) e
   entra com um fade. `.tem-arte` vai no contêiner para cada página esconder
   ou apagar a arte reserva, se quiser. */
.bb-arte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;pointer-events:none;user-select:none}
.bb-arte.on{opacity:1}

/* preço que não é nosso (o livro é vendido pela Amazon) */
.preco.amazon{font-size:30px;letter-spacing:.06em}

/* vendas pelo contato (PAGAMENTO=desligado): sem carrinho nem "adicionar" (bb.js, vitrine) */
html.vendas-contato .carrinho-ico,
html.vendas-contato .add,
html.vendas-contato .add-pac,
html.vendas-contato #btn-add{display:none!important}
/* avisos presos a um modo de venda: o de pagamento some no contato; o de contato só aparece nele */
html.vendas-contato .so-pagamento{display:none!important}
.so-contato{display:none}
html.vendas-contato .so-contato{display:block}

/* contas desligadas (CONTAS=desligadas: vitrine pelo IP, sem HTTPS): sem "Entrar"/"Minha conta" (bb.js, vitrine) */
html.sem-contas a[href^="/entrar"],
html.sem-contas a[href^="/conta"],
html.sem-contas #bb-menu li:has(> a[href^="/entrar"]){display:none!important}