/* Blog do Franze Studio (no menu, "Blog"). Redesenhado em 01/10/2026 a
   partir do que os blogs premiados na Awwwards fazem (colecao "Inspiring
   Design Blogs"): o artigo mais novo em destaque, filtro por assunto,
   capas, e na leitura um indice fixo ao lado, barra de progresso, citacao
   grande e "continue lendo" no fim. No mesmo dia a manchete enorme do
   topo deu lugar a estante de livros (ver "estante").

   A linguagem e a do site: Bricolage nos titulos, Hanken em todo o resto,
   sem fonte mono, espacamento entre letras no maximo .04em, botoes que so
   trocam de cor (o unico animado e o de orcamento, .fz-orc) e cartoes que
   podem subir no hover. As capas sao tipograficas, na paleta da landing
   (verde #222625 com salvia #cad2c6): nada de foto de banco.

   Mudou este arquivo ou o blog.js? Trocar o ?v= dos links em todas as
   paginas do blog, senao quem ja visitou fica com a versao velha. */
:root{--bg:#ffffff;--cinza:#f3f3ef;--ink:#0e0e0e;--ink-dim:#6f6f6b;--line:rgba(0,0,0,.12);
  --verde:#222625;--salvia:#cad2c6;--ease:cubic-bezier(.22,1,.36,1);
  --ink-2:#3d3d38;--ink-3:#4a4a45;--ink-corpo:#2e2e2a;--card:#ffffff;--sobre-ink:#ffffff;--vidro:rgba(255,255,255,.9)}
/* modo escuro (o tema.js poe data-theme no <html>): a mesma paleta do site.
   As capas nao mudam: sao ilustracao, com fundo e texto proprios. */
:root[data-theme="dark"]{--bg:#111312;--cinza:#171a18;--ink:#eef0ec;--ink-dim:#9fa49c;--line:rgba(238,240,236,.13);
  --ink-2:#d6dad3;--ink-3:#c0c4bc;--ink-corpo:#dfe2db;--card:#191c1a;--sobre-ink:#111312;--vidro:rgba(17,19,18,.88)}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:18px;line-height:1.6}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1340px,92vw);margin-inline:auto}
.eyebrow{font-size:.95rem;color:var(--ink-dim)}
.cinza{background:var(--cinza);box-shadow:0 0 0 100vmax var(--cinza);clip-path:inset(0 -100vmax)}

/* topo: fica preso no alto; nos artigos, a barra de leitura corre embaixo */
.bl-topo{position:sticky;top:0;z-index:50;background:var(--vidro);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.bl-topo.rolou{border-bottom-color:var(--line)}
.bl-topo-in{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0}
.bl-marca{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:-.01em;text-decoration:none}
.bl-links{display:flex;align-items:center;gap:26px;font-size:.95rem}
.bl-links a{text-decoration:none;color:var(--ink-dim);transition:color .3s var(--ease)}
.bl-links a:hover,.bl-links a[aria-current]{color:var(--ink)}
.bl-links .bl-tema{display:flex;color:var(--ink)}
.bl-marca,.bl-links a{white-space:nowrap}
/* entre 700 e 860 px o espaco normal passava da tela. O "Client area" e o
   celular (painel do menu) ficam no topo.css, comum as paginas de servico
   (02/10/2026). */
@media(max-width:860px){.bl-links{gap:16px}}
.bl-progresso{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.bl-progresso i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}

/* ------------------------------------------------------------ indice
   (o topo da pagina do blog e a estante: ver "estante", mais abaixo) */

/* filtro por assunto: montado pelo blog.js a partir das categorias */
.bl-filtros{display:flex;flex-wrap:wrap;gap:8px}
.bl-filtro{font:inherit;font-size:15px;line-height:1;padding:11px 16px;border-radius:60px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.bl-filtro:hover{border-color:var(--ink)}
.bl-filtro[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--sobre-ink)}
.bl-filtro sup{font-size:.72em;margin-left:5px;opacity:.6;vertical-align:.45em}

/* a lista: o mais novo em destaque numa faixa cinza, o resto em grade */
.bl-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,4.4vw,60px) clamp(20px,2.4vw,32px);
  margin:clamp(28px,3.4vw,44px) 0 clamp(90px,11vw,150px)}
.bl-lista:has(> .bl-item:nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){.bl-lista,.bl-lista:has(> .bl-item:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.bl-lista,.bl-lista:has(> .bl-item:nth-child(4)){grid-template-columns:1fr}}
.bl-item{display:flex;flex-direction:column;gap:20px;text-decoration:none;color:inherit;min-width:0}
.bl-item-meta{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14.5px;color:var(--ink-dim)}
.bl-item-meta span+span::before{content:"·";margin-right:10px}
.bl-item h2,.bl-item h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.35rem,2vw,1.75rem);
  line-height:1.15;letter-spacing:-.02em;margin:10px 0 10px;transition:color .3s var(--ease)}
.bl-item:hover h2,.bl-item:hover h3{color:var(--ink-2)}
.bl-item p{color:var(--ink-3);font-size:16.5px;max-width:54ch}
.bl-ler{display:inline-block;margin-top:16px;font-weight:600;font-size:15.5px;text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:5px;transition:text-decoration-color .3s var(--ease)}
.bl-item:hover .bl-ler{text-decoration-color:var(--ink)}
.bl-lista:not(.filtrada) > .bl-item:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(40px,5vw,72px) 0;
  background:var(--cinza);box-shadow:0 0 0 100vmax var(--cinza);clip-path:inset(0 -100vmax)}
.bl-lista:not(.filtrada) > .bl-item:first-child .bl-capa{aspect-ratio:16/11}
.bl-lista:not(.filtrada) > .bl-item:first-child h2{font-size:clamp(2rem,3.8vw,3.4rem);line-height:1.02;letter-spacing:-.035em;margin:14px 0 18px}
.bl-lista:not(.filtrada) > .bl-item:first-child p{font-size:clamp(17px,1.4vw,19.5px)}
@media(max-width:860px){.bl-lista:not(.filtrada) > .bl-item:first-child{grid-template-columns:1fr}}

/* ------------------------------------------------------------ capas
   Trabalho real do Mateus numa janela de navegador, sobre um fundo da
   paleta da landing, com o credito do projeto no canto (01/10/2026: as
   capas so de texto "nao pareciam artigo", palavra dele). As imagens
   ficam em /blog/capas/. Quatro formas:
     .bl-capa             uma janela (padrao)
     .bl-capa-duas        duas janelas, para comparacao
     .bl-capa-pagina      a pagina de cima a baixo numa janela estreita
     .bl-capa-foto        foto ocupando tudo (marca, ou o proprio Mateus)
   O fundo vem em data-fundo: salvia (padrao), areia, verde ou tinta. */
.bl-capa{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;isolation:isolate;background:var(--salvia);color:#0e0e0e}
.bl-capa[data-fundo="areia"]{background:#e6e5dd}
.bl-capa[data-fundo="verde"]{background:var(--verde);color:var(--salvia)}
.bl-capa[data-fundo="tinta"]{background:#0e0e0e;color:#f4f5f2}
.bl-capa-janela{position:absolute;left:10%;right:10%;top:15%;bottom:-8%;border-radius:10px 10px 0 0;overflow:hidden;background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.08);transition:transform .6s var(--ease)}
.bl-capa-janela::before{content:"";display:block;height:18px;background:#f2f2ee;border-bottom:1px solid rgba(0,0,0,.07)}
.bl-capa-janela img{display:block;width:100%;height:calc(100% - 18px);object-fit:cover;object-position:top center}
.bl-capa-cred{position:absolute;left:5%;top:5%;right:5%;font-size:13px;line-height:1.3;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-capa-duas .bl-capa-janela{left:7%;right:30%;top:15%}
.bl-capa-duas .bl-capa-janela + .bl-capa-janela{left:42%;right:7%;top:37%;box-shadow:0 30px 70px rgba(0,0,0,.32),0 0 0 1px rgba(0,0,0,.08)}
.bl-capa-duas .bl-capa-janela:first-of-type img{object-position:left top}
.bl-capa-pagina .bl-capa-janela{left:27%;right:27%;top:13%}
.bl-capa-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bl-capa-foto .bl-capa-cred{top:auto;bottom:5%;color:#fff;opacity:.92;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.bl-item:hover .bl-capa-janela{transform:translateY(-3%)}
/* no topo do artigo a capa e larga, e as janelas ficam mais estreitas */
.bl-capa-larga{aspect-ratio:21/8}
.bl-capa-larga .bl-capa-cred{left:2.6%;top:7%}
.bl-capa-larga .bl-capa-janela{left:22%;right:22%;top:16%}
.bl-capa-larga.bl-capa-duas .bl-capa-janela{left:15%;right:37%;top:14%}
.bl-capa-larga.bl-capa-duas .bl-capa-janela + .bl-capa-janela{left:47%;right:15%;top:36%}
.bl-capa-larga.bl-capa-pagina .bl-capa-janela{left:38%;right:38%;top:12%}
@media(max-width:700px){.bl-capa-larga{aspect-ratio:4/3}
  .bl-capa-larga .bl-capa-cred{left:5%;top:5%}
  .bl-capa-larga .bl-capa-janela{left:10%;right:10%;top:15%}
  .bl-capa-larga.bl-capa-duas .bl-capa-janela{left:7%;right:30%;top:15%}
  .bl-capa-larga.bl-capa-duas .bl-capa-janela + .bl-capa-janela{left:42%;right:7%;top:37%}
  .bl-capa-larga.bl-capa-pagina .bl-capa-janela{left:27%;right:27%;top:13%}}

/* ------------------------------------------------------------ artigo */
.bl-art-cab{padding:clamp(36px,6vw,84px) 0 clamp(28px,4vw,48px)}
.bl-trilha{display:flex;gap:8px;font-size:15px;color:var(--ink-dim)}
.bl-trilha a{text-decoration:none;transition:color .3s var(--ease)}
.bl-trilha a:hover{color:var(--ink)}
.bl-art-cab h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(2.5rem,6.2vw,5.6rem);
  line-height:.98;letter-spacing:-.045em;margin:18px 0 26px;max-width:18ch}
.bl-art-cab .lead{font-size:clamp(19px,1.7vw,23px);line-height:1.5;color:var(--ink-corpo);max-width:62ch}
.bl-autor-linha{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:15px;line-height:1.4}
.bl-autor-linha img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.bl-autor-linha strong{display:block;font-weight:600}
.bl-autor-linha span{color:var(--ink-dim)}

.bl-art-grade,.bl-art-fim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px) minmax(0,1fr);gap:0 clamp(24px,4vw,64px)}
.bl-art-grade{padding-top:clamp(44px,6vw,84px)}
.bl-indice{grid-column:1;justify-self:end;width:min(250px,100%)}
.bl-indice-in{position:sticky;top:112px}
.bl-indice ol{list-style:none;margin-top:12px;border-left:1px solid var(--line)}
.bl-indice a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;line-height:1.4;
  color:var(--ink-dim);text-decoration:none;transition:color .3s var(--ease),border-color .3s var(--ease)}
.bl-indice a:hover{color:var(--ink)}
.bl-indice a.atual{color:var(--ink);border-left-color:var(--ink)}
.bl-corpo{grid-column:2;min-width:0}
@media(max-width:1000px){.bl-art-grade,.bl-art-fim{grid-template-columns:minmax(0,700px);justify-content:center}
  .bl-indice{display:none}.bl-corpo{grid-column:1}}

.bl-corpo h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.55rem,2.6vw,2.1rem);letter-spacing:-.025em;line-height:1.12;margin:64px 0 16px}
.bl-corpo > h2:first-child{margin-top:0}
.bl-corpo h3{font-weight:600;font-size:19px;margin:34px 0 8px}
.bl-corpo p{margin:0 0 20px;color:var(--ink-corpo)}
.bl-corpo ul,.bl-corpo ol{margin:0 0 22px 1.2em}
.bl-corpo li{margin:0 0 10px;color:var(--ink-corpo)}
.bl-corpo strong{font-weight:600;color:var(--ink)}
.bl-corpo a{text-underline-offset:3px}
.bl-tabela{width:100%;border-collapse:collapse;margin:8px 0 28px;font-size:16px}
.bl-tabela th,.bl-tabela td{text-align:left;padding:12px 10px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.bl-tabela th{font-weight:600;color:var(--ink-dim);font-size:14.5px}
/* a nota vira citacao grande, como nos blogs editoriais */
.bl-nota{margin:44px 0;padding:28px 0 30px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.bl-nota p{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.35rem,2.2vw,1.75rem);
  line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
/* o proximo passo, ultimo bloco do texto: leva para a etapa seguinte do
   funil (topo para meio, meio para fundo) e, no fundo, para o orcamento */
.bl-passo{margin:56px 0 0;padding:24px 0 26px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.bl-passo a{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;margin-top:12px;text-decoration:none;color:var(--ink)}
.bl-passo strong{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.22;letter-spacing:-.02em;color:var(--ink)}
.bl-passo .sub{grid-column:1;font-size:16.5px;line-height:1.5;color:var(--ink-dim)}
.bl-passo i{grid-column:2;grid-row:1/3;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-style:normal;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.bl-passo i svg{width:20px;height:20px}
.bl-passo a:hover i{background:var(--ink);border-color:var(--ink);color:var(--sobre-ink)}
.bl-passo a:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* fim do artigo: quem escreveu e o "continue lendo" (montado pelo blog.js) */
.bl-autor{grid-column:2;display:flex;gap:20px;align-items:flex-start;margin-top:clamp(56px,7vw,88px);padding-top:30px;border-top:1px solid var(--line)}
.bl-autor img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.bl-autor strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:1.4rem;letter-spacing:-.02em;margin:2px 0 6px}
.bl-autor p{font-size:16.5px;color:var(--ink-2);margin-bottom:12px}
.bl-autor a{font-weight:600;font-size:15.5px;text-underline-offset:4px}
.bl-mais{grid-column:1/-1;margin-top:clamp(84px,9vw,124px)}
.bl-mais-cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.bl-mais-cab h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1}
.bl-mais-cab a{font-size:15.5px;font-weight:600;text-underline-offset:4px;white-space:nowrap}
.bl-mais-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
@media(max-width:640px){.bl-mais-lista{grid-template-columns:1fr}}
@media(max-width:1000px){.bl-autor,.bl-mais{grid-column:1}}

/* ------------------------------------------------------------ fecho com o orcamento */
.bl-fecho{background:var(--cinza);margin-top:clamp(84px,9vw,124px);padding:clamp(60px,8vw,100px) 0;text-align:center}
.bl-fecho h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.03em;line-height:1.05;max-width:18ch;margin:10px auto 16px}
.bl-fecho p{color:var(--ink-2);max-width:46ch;margin:0 auto 30px}
.bl-lista + .bl-fecho,.bl-sem-margem{margin-top:0}
.bl-rodape{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px 0 40px;font-size:14.5px;color:var(--ink-dim)}
.bl-rodape a{text-decoration:none;transition:color .3s var(--ease)}
.bl-rodape a:hover{color:var(--ink)}
.bl-rodape nav{display:flex;gap:18px;flex-wrap:wrap}

/* ------------------------------------------------------------ estante
   Pedido do Mateus (01/10/2026), seguindo de perto a referencia que ele
   mandou: um arquivo de newsletter feito de estante, na linha da Stripe
   Press. Titulo pequeno e centralizado, a estante de ponta a ponta, livros
   em 3D (lombada, lateral e topo com as folhas). No hover o livro sobe e
   inclina, com uma etiqueta; no clique ele gira ali mesmo e mostra a capa,
   os vizinhos abrem espaco e um cartao aparece ao lado. Clicar de novo na
   capa abre o artigo.

   Da referencia ficou a forma; o resto e a identidade do site: Bricolage
   nos titulos, Hanken no resto (nada de mono, nem na data), espacamento
   no maximo .04em, e as cores sao cinzas e off-white, do preto ao papel
   (pedido dele: nada dos azuis da referencia). Os livros apagados sao os proximos da pauta:
   a estante ganha cor um livro por segunda.

   O blog.js monta tudo a partir da lista de artigos e da lista de
   proximos (data-proximos). Sem script, nada disso aparece. */
.bl-cab--estante{padding:clamp(40px,6vw,80px) 0 0;text-align:center}
.bl-cab--estante h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(2rem,3.6vw,3.1rem);
  line-height:1.05;letter-spacing:-.03em}
.bl-cab--estante p{margin:14px auto 0;max-width:46ch;font-size:clamp(16px,1.25vw,18px);line-height:1.55;color:var(--ink-dim)}
.bl-estante-sec{position:relative}
.bl-estante{--k:1;position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  perspective:1700px;perspective-origin:50% 0;padding:110px 0 60px}
.bl-estante::-webkit-scrollbar{display:none}
.bl-estante-fila{display:flex;align-items:flex-end;gap:3px;width:max-content;margin-inline:auto;padding:0 5vw;transform-style:preserve-3d}
.lv{--w:calc(var(--w0,54px) * var(--k));--h:calc(var(--h0,380px) * var(--k));--d:calc(270px * var(--k));
  --cor:#1c1c1b;--letra:#f4f5f2;position:relative;flex:none;width:var(--w);height:var(--h);margin:0;padding:0;border:0;
  background:none;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;transform-style:preserve-3d;
  -webkit-tap-highlight-color:transparent;transition:width .7s var(--ease)}
.lv:focus-visible{outline:none}
/* a caixa do livro: a lombada fica no plano da tela (sem lente de aumento)
   e o resto do livro vai para dentro da estante */
.lv-caixa{position:absolute;left:50%;top:0;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);
  transform-style:preserve-3d;transform:translateZ(calc(var(--d) / -2));transition:transform .7s var(--ease)}
.lv-face{position:absolute;top:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lv-lombada{left:0;width:var(--w);height:var(--h);transform:translateZ(calc(var(--d) / 2));
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px 0 16px;
  background:var(--cor);color:var(--letra);border-radius:2px;
  box-shadow:inset 4px 0 6px -4px rgba(255,255,255,.2),inset -7px 0 9px -7px rgba(0,0,0,.4)}
.lv-lombada::before,.lv-lombada::after{content:"";position:absolute;left:9px;right:9px;height:1px;background:currentColor;opacity:.32}
.lv-lombada::before{top:13px}
.lv-lombada::after{bottom:44px}
.lv-tit{writing-mode:vertical-rl;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:calc(15px * var(--k));
  line-height:1.1;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:calc(100% - 74px)}
.lv-marca svg{display:block;width:16px;height:14px}
.lv-capa,.lv-verso{left:calc((var(--w) - var(--d)) / 2);width:var(--d);height:var(--h);background:var(--cor)}
.lv-capa{transform:rotateY(90deg) translateZ(calc(var(--w) / 2));color:var(--letra);display:flex;flex-direction:column;
  padding:calc(26px * var(--k)) calc(24px * var(--k)) calc(20px * var(--k));border-radius:2px 6px 6px 2px;
  box-shadow:inset 12px 0 14px -10px rgba(0,0,0,.4)}
.lv-verso{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));filter:brightness(.8)}
.lv-topo{left:0;top:calc((var(--h) - var(--d)) / 2);width:var(--w);height:var(--d);
  transform:rotateX(90deg) translateZ(calc(var(--h) / 2));
  background:repeating-linear-gradient(90deg,#f2f0e8 0 2px,#dcd9cd 2px 3px)}
.lv-capa-data{font-size:calc(12.5px * var(--k));letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.lv-capa-tit{margin-top:calc(24px * var(--k));font-family:'Bricolage Grotesque',sans-serif;font-weight:500;
  font-size:calc(25px * var(--k));line-height:1.08;letter-spacing:-.02em}
.lv-capa-fio{width:40px;height:2px;margin-top:calc(22px * var(--k));background:currentColor;opacity:.55}
.lv-capa-pe{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:calc(12px * var(--k));letter-spacing:.04em;
  text-transform:uppercase;opacity:.8}
.lv-capa-pe svg{width:15px;height:13px}
/* fechado, o texto da capa nao aparece: visto de lado pela fresta entre
   os livros, virava risquinhos escuros na estante */
.lv-capa > *{opacity:0;transition:opacity .25s var(--ease)}
.lv.aberto .lv-capa > *{opacity:1;transition-delay:.4s}
/* hover: o livro sobe e inclina, como quem puxa da estante */
.lv:hover .lv-caixa,.lv:focus-visible .lv-caixa{transform:translateZ(calc(var(--d) / -2)) translateY(-18px) rotateZ(-1.5deg)}
.lv:focus-visible .lv-lombada{outline:2px solid var(--ink);outline-offset:3px}
/* aberto: gira ali mesmo e mostra a capa; os vizinhos abrem espaco */
.lv.aberto{width:var(--d)}
.lv.aberto .lv-caixa,.lv.aberto:hover .lv-caixa{transform:translateZ(24px) rotateY(-90deg)}
.lv--breve .lv-tit{opacity:.6}
.lv-marca--breve{font-size:calc(10.5px * var(--k));line-height:1;letter-spacing:.04em;text-transform:uppercase;opacity:.75}

/* a etiqueta e o cartao ficam fora do 3D, para o texto sair nitido */
.bl-dica{position:absolute;z-index:5;left:0;top:0;max-width:300px;transform:translate(-50%,-100%);pointer-events:none;
  padding:9px 12px 10px;border-radius:6px;background:#0e0e0e;color:#f4f5f2;font-size:13.5px;line-height:1.3;
  box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transition:opacity .25s var(--ease)}
.bl-dica.ver{opacity:1}
.bl-dica strong{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-dica span{display:block;margin-top:4px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
:root[data-theme="dark"] .bl-dica{background:#f4f5f2;color:#0e0e0e}
.bl-cartao{position:absolute;z-index:6;left:0;top:0;width:min(320px,calc(100vw - 32px));padding:22px 22px 20px;border-radius:12px;
  background:var(--card);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.18),0 0 0 1px var(--line);
  opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.bl-cartao.ver{opacity:1;transform:none}
.bl-cartao-data{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim)}
.bl-cartao h2{margin:8px 34px 10px 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:1.3rem;
  line-height:1.2;letter-spacing:-.02em}
.bl-cartao p{font-size:15.5px;line-height:1.55;color:var(--ink-3)}
.bl-cartao-acoes{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.bl-cartao-ler{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--ink);border-radius:60px;
  color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease)}
.bl-cartao-ler:hover{background:var(--ink);color:var(--sobre-ink)}
.bl-cartao-ler svg{width:16px;height:16px}
.bl-cartao-min{font-size:13.5px;color:var(--ink-dim);white-space:nowrap}
.bl-cartao-fechar{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;border:0;
  border-radius:50%;background:transparent;color:var(--ink-dim);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.bl-cartao-fechar:hover{background:var(--cinza);color:var(--ink)}
.bl-cartao-fechar svg{width:16px;height:16px}
.bl-estante-nota{margin:-28px 0 0;padding:0 16px;text-align:center;font-size:14px;color:var(--ink-dim)}
.bl-lista-cab{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;
  margin-top:clamp(56px,7vw,96px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line)}
@media(max-width:700px){
  .bl-estante{--k:.72;padding:96px 0 52px}
  /* no celular o cartao vira uma folha presa embaixo da tela */
  .bl-cartao{position:fixed;left:16px!important;right:16px;top:auto!important;bottom:16px;width:auto}}
@media (prefers-reduced-motion:reduce){.lv,.lv-caixa,.bl-dica,.bl-cartao{transition:none}}

/* ------------------------------------------------------------ abertura
   So na pagina do blog, para quem chega direto (Google, link): a mesma
   saudacao da home, mais curta. Quem vem de outra pagina do site nao ve
   (html.fz-interno, do transicao.js). E so CSS: some sozinha, sem script. */
#loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);
  animation:bl-abertura-some .6s cubic-bezier(.4,0,.2,1) 1.3s forwards}
#loader .greet{grid-area:1/1;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(2.4rem,7vw,5rem);
  color:var(--ink);opacity:0;animation:bl-ola .56s cubic-bezier(.22,1,.36,1) both}
#loader .greet:nth-child(2){animation-delay:.36s}
#loader .greet:nth-child(3){animation-delay:.72s}
@keyframes bl-ola{0%{opacity:0;filter:blur(16px);transform:scale(1.08)}45%{opacity:1;filter:blur(0);transform:none}
  70%{opacity:1;filter:blur(0);transform:none}100%{opacity:0;filter:blur(16px);transform:scale(.965)}}
@keyframes bl-abertura-some{to{opacity:0;visibility:hidden}}
@property --bl-n{syntax:'<integer>';inherits:false;initial-value:0}
#loader .loader-count{position:absolute;right:6vw;bottom:5vh;font-size:.96rem;color:var(--ink-dim);
  counter-reset:bl-n var(--bl-n);animation:bl-conta 1.1s linear forwards}
#loader .loader-count::before{content:counter(bl-n) "%"}
@keyframes bl-conta{to{--bl-n:100}}
@media (prefers-reduced-motion:reduce){#loader{display:none}}

/* botao de orcamento, o mesmo da landing */
.fz-orc{position:relative;display:inline-flex;align-items:center;padding:4px;border:0;border-radius:60px;background:transparent;cursor:pointer;text-decoration:none;--fundo:var(--cinza);--cor:var(--ink)}
.fz-orc-circ{position:absolute;left:4px;top:4px;bottom:4px;width:48px;border-radius:60px;background:var(--cor);transition:width .5s var(--ease)}
.fz-orc-seta{position:absolute;left:16px;top:50%;width:24px;height:24px;margin-top:-12px;color:var(--fundo);transition:transform .5s var(--ease)}
.fz-orc-txt{position:relative;display:block;padding:0 26px 0 66px;line-height:48px;white-space:nowrap;font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--cor);transition:color .5s var(--ease)}
.fz-orc:hover .fz-orc-circ,.fz-orc:focus-visible .fz-orc-circ{width:calc(100% - 8px)}
.fz-orc:hover .fz-orc-seta,.fz-orc:focus-visible .fz-orc-seta{transform:translateX(.4rem)}
.fz-orc:hover .fz-orc-txt,.fz-orc:focus-visible .fz-orc-txt{color:var(--fundo)}
@media (prefers-reduced-motion:reduce){.fz-orc-circ,.fz-orc-seta,.fz-orc-txt,.bl-capa-janela{transition:none}}

/* o blog por e-mail (22/10/2026, montado pelo blog.js): bloco cinza sem
   contorno, campo e botao na mesma linha. No artigo fica na coluna do texto,
   depois do "Written by"; na pagina do blog ocupa a largura, com o campo ao
   lado do texto */
.bl-assina{--erro:#b3261e;grid-column:2;margin-top:clamp(40px,5vw,56px);padding:clamp(26px,3.6vw,40px);border-radius:18px;background:var(--cinza)}
:root[data-theme="dark"] .bl-assina{--erro:#ff8a80}
.bl-assina.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:24px clamp(32px,5vw,72px);align-items:end;margin-block:clamp(72px,8vw,112px)}
.bl-assina h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.03em;line-height:1.08;margin:8px 0 10px}
.bl-assina-txt p{font-size:16.5px;color:var(--ink-2);max-width:48ch}
.bl-assina-form{margin-top:22px}
.bl-assina.wrap .bl-assina-form{margin-top:0}
.bl-assina-linha{display:flex;gap:8px}
.bl-assina-campo{flex:1;min-width:0}
.bl-assina input[type=email]{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:60px;padding:14px 20px;outline:none;transition:border-color .3s var(--ease)}
.bl-assina input[type=email]:focus{border-color:var(--ink)}
.bl-assina input[type=email]:disabled{color:var(--ink-dim)}
.bl-assina input::placeholder{color:var(--ink-dim)}
.bl-assina button,.bl-aviso-acoes button{font:inherit;font-weight:600;font-size:16px;line-height:1.2;border:0;border-radius:60px;padding:14px 24px;background:var(--ink);color:var(--sobre-ink);cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease)}
.bl-assina button:hover{background:var(--ink-3)}
.bl-assina button:disabled,.bl-aviso-acoes button:disabled{opacity:.5;cursor:default}
.bl-assina button:focus-visible,.bl-aviso button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bl-assina-msg{min-height:1.5em;margin-top:10px;font-size:15px;color:var(--ink-2)}
.bl-assina-msg.erro{color:var(--erro)}
.bl-assina-isca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:1000px){.bl-assina{grid-column:1}}
@media(max-width:760px){.bl-assina.wrap{grid-template-columns:1fr}}
@media(max-width:480px){.bl-assina-linha{flex-direction:column}.bl-assina button{width:100%}}

/* a volta do e-mail (confirmar ou sair): um aviso preso no pe da tela */
.bl-aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;width:min(520px,calc(100vw - 32px));
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 56px 16px 22px;border-radius:16px;
  background:var(--ink);color:var(--sobre-ink);box-shadow:0 12px 40px rgba(0,0,0,.18);font-size:16px;line-height:1.45}
.bl-aviso p{flex:1 1 220px}
.bl-aviso-acoes:empty{display:none}
.bl-aviso-acoes button{background:var(--sobre-ink);color:var(--ink)}
.bl-aviso-acoes button:hover{background:var(--salvia)}
.bl-aviso-fechar{position:absolute;right:10px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:inherit;
  display:grid;place-items:center;cursor:pointer;transition:background-color .3s var(--ease)}
.bl-aviso-fechar:hover{background:rgba(127,127,127,.25)}
.bl-aviso-fechar svg{width:18px;height:18px}

/* a barra do pe da tela (22/10/2026, montada pelo blog.js): so nos artigos,
   depois de uns 60% do texto. Sobe devagar, sem desfoque; fechada, nao
   volta. Mesma cor do aviso de confirmacao */
.bl-barra{position:fixed;left:50%;bottom:16px;z-index:55;width:min(720px,calc(100vw - 32px));
  display:flex;align-items:center;gap:10px 18px;padding:12px 56px 12px 22px;border-radius:18px;
  background:var(--ink);color:var(--sobre-ink);box-shadow:0 12px 40px rgba(0,0,0,.18);
  transform:translate(-50%,calc(100% + 40px));opacity:0;visibility:hidden;
  transition:transform .5s var(--ease),opacity .4s var(--ease),visibility 0s linear .5s}
.bl-barra.ver{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s}
.bl-barra-txt{flex:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:-.01em;line-height:1.25}
.bl-barra-form{flex:1;min-width:0}
.bl-barra .bl-assina-linha{gap:6px}
.bl-barra input[type=email]{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);border:1px solid transparent;border-radius:60px;padding:11px 18px;outline:none}
.bl-barra input[type=email]:focus{border-color:var(--salvia)}
.bl-barra input[type=email]:disabled{color:var(--ink-dim)}
.bl-barra input::placeholder{color:var(--ink-dim)}
.bl-barra button[type=submit]{font:inherit;font-weight:600;font-size:15px;line-height:1.2;border:0;border-radius:60px;padding:11px 20px;
  background:var(--sobre-ink);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease)}
.bl-barra button[type=submit]:hover{background:var(--salvia)}
.bl-barra button[type=submit]:disabled{opacity:.5;cursor:default}
.bl-barra button:focus-visible{outline:2px solid var(--sobre-ink);outline-offset:3px}
.bl-barra .bl-assina-msg{min-height:0;margin:0;font-size:14px;color:inherit;opacity:.85}
.bl-barra .bl-assina-msg:not(:empty){margin-top:6px}
.bl-barra .bl-assina-msg.erro{color:#ff8a80;opacity:1}
.bl-barra-fechar{position:absolute;right:10px;top:50%;margin-top:-18px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:inherit;
  display:grid;place-items:center;cursor:pointer;transition:background-color .3s var(--ease)}
.bl-barra-fechar:hover{background:rgba(127,127,127,.25)}
.bl-barra-fechar svg{width:18px;height:18px}
@media(max-width:640px){.bl-barra{flex-direction:column;align-items:stretch;gap:8px;padding:12px 14px;bottom:12px}
  .bl-barra-txt{padding-right:34px;font-size:1rem}
  .bl-barra-fechar{top:6px;right:6px;margin-top:0}
  /* lado a lado, mesmo onde o bloco do fim empilha: a barra tem que ocupar pouca tela */
  .bl-barra .bl-assina-linha{flex-direction:row}
  .bl-barra button[type=submit]{width:auto;padding:11px 16px}}
@media (prefers-reduced-motion:reduce){.bl-barra{transition:none}}