/* ==========================================================================
   site.css — sistema visual do 427 Design
   Direção do protótipo index(2), adotada em 18/09/2026.
   O topo da home (hero) foi mantido como estava, a pedido do cliente.
   Usado pela home e pelas páginas de /publicacoes/.
   ========================================================================== */

:root{
  --h2:clamp(46px,5.4vw,78px); /* tamanho dos títulos de seção — também usado no alinhamento óptico dos cabeçalhos */
  --b:#090c0c;   /* seções escuras */
  --p:#f5f2ec;   /* papel */
  --i:#151817;   /* tinta */
  --m:#686861;   /* texto secundário */
  --o:#eb6d00;   /* acento */
  --l:#d8d4cb;   /* filete */
  --campo:#e9e5dd;
  --campo2:#e8e3db;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--p);color:var(--i);font-family:"DM Sans",sans-serif}
a{text-decoration:none;color:inherit}
img{width:100%;display:block}
a:focus-visible,button:focus-visible{outline:2px solid var(--o);outline-offset:3px}

/* O <picture> é só um invólucro de escolha de formato. Sem isto ele vira o
   filho do flex/grid e as regras escritas para `img` não resolvem. */
picture{display:contents}

/* --- Navegação -------------------------------------------------------------
   Era `mix-blend-mode: multiply`, e sobre o campo escuro isso dava tinta
   escura × fundo escuro = preto no preto: o cabeçalho sumia ao rolar.

   Agora são três estados, todos de cor sólida e contraste verificado:
     .nav               topo da página, sobre o papel, sem fundo próprio
     .nav--solida       rolou: ganha fundo e filete, e encolhe
     .nav--escura       o bloco atrás é escuro: inverte para tinta clara
   Quem decide é o nav.js, lendo a luminância do bloco que está sob a barra. */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:22px 5.5vw;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:padding .35s,background-color .35s,color .35s,box-shadow .35s}
.nav--solida{padding:13px 5.5vw;background:var(--p);box-shadow:0 1px 0 var(--l)}
.nav--escura{color:#fff}
.nav--escura.nav--solida{background:var(--b);box-shadow:0 1px 0 #ffffff24}
.nav--escura .btn{border-color:#fff;color:#fff}
.nav--escura .btn:hover{background:#fff;color:var(--i)}

/* O logotipo vetorial real da marca (ver assets/img/marca/logo-427.svg),
   não mais um lockup de texto. A forma pictórica usa currentColor — por
   isso troca de cor sozinha com .nav--escura, sem regra própria aqui. */
.logo{display:block;flex:none;width:89px;transition:width .35s}
.logo svg{display:block;width:100%;height:auto}
.nav--solida .logo{width:70px}
.navlinks{display:flex;gap:clamp(14px,2vw,32px);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.navlinks a{padding:6px 0;position:relative}
/* O sublinhado cresce a partir da esquerda: confirma o alvo sem mover nada. */
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--o);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.navlinks a:hover::after,.navlinks a:focus-visible::after{transform:scaleX(1)}

/* Botão de texto, sem hambúrguer — só aparece quando os links somem. */
.nav-menu{display:none;background:none;border:0;padding:12px 0;font:inherit;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:inherit;cursor:pointer;min-height:44px}

/* Painel de tela cheia. Fecha em Esc, no clique num item e ao voltar
   para desktop (senão a rolagem ficaria travada). */
.menu{position:fixed;inset:0;z-index:35;background:var(--b);color:#fff;padding:120px 22px 40px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s,transform .35s,visibility .35s}
.menu--aberto{opacity:1;visibility:visible;transform:none}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font:500 clamp(34px,10vw,54px)/1.12 "Playfair Display";letter-spacing:-.04em;padding:9px 0;border-bottom:1px solid #ffffff1f}
.menu nav a:first-child{border-top:1px solid #ffffff1f}
.menu-pe{display:flex;flex-direction:column;gap:14px;margin-top:40px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#a5a49d}
.menu-pe a{min-height:44px;display:flex;align-items:center}
@media(prefers-reduced-motion:reduce){.menu{transition:opacity .2s,visibility .2s;transform:none}.navlinks a::after{transition:none}}

/* --- Tipografia e utilidades --------------------------------------------- */
h1{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(58px,8vw,125px);line-height:.88;letter-spacing:-.06em;max-width:900px;margin:0}
h2{font-family:"Playfair Display",serif;font-weight:500;letter-spacing:-.055em;margin:0}
.kicker,.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--m)}
.kicker{margin-bottom:25px}
.body,.lead{color:#66635d;max-width:650px;font-size:16px;line-height:1.75}
.rule{width:45px;height:2px;background:var(--o);margin:25px 0}
.btn{padding:15px 20px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;border:1px solid var(--i);display:inline-block;transition:.3s}
.btn.dark,.btn.fill{background:var(--i);color:#fff;border-color:var(--i)}
.btn:hover{transform:translateY(-2px)}
/* Ação secundária do hero — texto sublinhado, sem caixa, ao lado do botão
   preenchido. Leva direto para Projetos Customizados. */
.btn-link{align-self:center;font-size:10px;text-transform:uppercase;letter-spacing:.13em;padding-bottom:2px;border-bottom:1px solid var(--i)}
/* Link para o catálogo completo, logo abaixo dos botões do hero — pedido
   do cliente para deixar claro, já na abertura, que há mais livros à venda. */
/* Faixa própria, discreta e editorial: filete fino em cima, serifa no
   texto, seta separada — não compete com os botões nem com as setas do
   carrossel, mas fica clara o bastante para ser vista ("mais premium",
   "mais destacado" pedidos pelo cliente em rodadas anteriores).
   Sublinhado permanente + seta em círculo (mesmo traço das setas do
   carrossel logo abaixo) deixam explícito que é clicável, sem virar
   botão preenchido — pedido do cliente: "deixa mais visivel que pode
   clicar aqui". */
.hero-todos{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding-top:16px;border-top:1px solid var(--l);text-decoration:none;color:var(--i);transition:.3s}
.hero-todos span{font:italic 400 20.4px/1.3 "Playfair Display";letter-spacing:-.01em;max-width:34ch;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--l);transition:text-decoration-color .3s}
.hero-todos em{font-style:normal;font-size:15px;flex:none;width:36px;height:36px;border:1px solid var(--o);color:var(--o);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:.3s;animation:todos-seta 2.4s ease-in-out infinite}
/* Anel que se expande e some, em loop: chama o olho para a seta sem mover o
   texto nem competir com o carrossel (pedido do cliente: "uma animação para
   deixar ele mais nítido"). Desligado em prefers-reduced-motion. */
.hero-todos em::after{content:"";position:absolute;inset:-1px;border:1px solid var(--o);border-radius:50%;animation:todos-anel 2.4s ease-out infinite;pointer-events:none}
.hero-todos span{animation:todos-texto 2.4s ease-in-out infinite}
@keyframes todos-anel{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.75);opacity:0}}
@keyframes todos-seta{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes todos-texto{0%,100%{text-decoration-color:var(--l)}50%{text-decoration-color:var(--o)}}
.hero-todos:hover{border-color:var(--i)}
.hero-todos:hover span{text-decoration-color:var(--i);animation:none}
.hero-todos:hover em{background:var(--o);color:#fff;transform:translateX(4px);animation:none}
.hero-todos:hover em::after{animation:none}
@media(prefers-reduced-motion:reduce){.hero-todos em,.hero-todos em::after,.hero-todos span{animation:none}}
.actions,.buttons{display:flex;gap:22px;flex-wrap:wrap;align-items:center}

/* --- Hero — carrossel de capas (22/09/2026) --------------------------------
   Redesenhado a partir de referência visual do cliente, revogando a decisão
   de 18/09 que mantinha o hero anterior. 3 capas reais de melhor resolução
   do acervo, uma por vez, com setas e contador — sem bullets, sem imagem de
   banco. As imagens são recortes com fundo transparente, por isso `contain`.
   O cartão ganha canto arredondado e sombra suave, pedido explícito da
   referência (a regra "zero radius/sombra" já não vale desde 18/09). */
.hero{min-height:100vh;padding:112px 5.5vw 40px;display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:center}
/* O h1 global usa clamp(58px,8vw,125px), calibrado para título de largura
   total (sem coluna ao lado). Nas duas colunas do hero isso quebrava a
   frase em 4 linhas estreitas, cada uma com 1-2 palavras. Reduzido só
   aqui para caber em 2-3 linhas com frases inteiras. */
.hero h1{font-size:clamp(44px,min(5.6vw,8.4vh),92px);max-width:640px}
.hero p{max-width:440px;margin:34px 0;color:#57534d;font-size:17px}
.hero-carrossel{height:calc(100vh - 290px);min-height:420px;display:flex;flex-direction:column}
.hero-carrossel__janela{position:relative;flex:1;min-height:0}
.hero-carrossel__slide{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:var(--campo);display:flex;align-items:center;justify-content:center;padding:40px 48px 80px;box-shadow:-22px 22px 28px -10px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .5s var(--ease-saida,ease)}
.hero-carrossel__slide--ativo{opacity:1;visibility:visible}
.hero-carrossel__slide img{width:auto;height:100%;max-width:100%;object-fit:contain}
/* A legenda nomeia a publicação que está ali, com a ficha real — legenda de
   galeria, não faixa de marketing. */
.hero-carrossel__legenda{position:absolute;bottom:0;left:0;right:0;background:rgba(245,242,236,.94);padding:16px 20px;display:flex;justify-content:space-between;align-items:baseline;gap:20px;transition:.3s}
.hero-carrossel__legenda strong{font:500 17px "Playfair Display";letter-spacing:-.02em}
.hero-carrossel__legenda span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--m);white-space:nowrap}
.hero-carrossel__legenda:hover{background:var(--p)}
/* Controles fora do cartão, abaixo dele — pedido do cliente para descer o
   botão de trocar as capas, tirando-o de cima da imagem. */
.hero-carrossel__controles{margin-top:14px;align-self:flex-end;display:flex;align-items:center;gap:14px}
.hero-carrossel__controles-setas{display:flex;align-items:center;gap:14px;flex:none}
.hero-carrossel__seta{width:34px;height:34px;border:1px solid var(--l);border-radius:50%;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:.25s}
.hero-carrossel__seta:hover{background:var(--i);color:#fff;border-color:var(--i)}
.hero-carrossel__contagem{font-size:11px;letter-spacing:.1em;color:var(--m);white-space:nowrap}

/* --- Ticker -------------------------------------------------------------- */
.ticker{background:var(--b);color:#fff;padding:18px 0;overflow:hidden;white-space:nowrap}
.ticker div{display:inline-block;animation:t 28s linear infinite;font:500 19px "Playfair Display"}
.ticker span{color:var(--o);padding:0 30px}
@keyframes t{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker div{animation:none}.btn:hover,.tile:hover img,.book:hover .book-cover img{transform:none}}

/* --- Seções -------------------------------------------------------------- */
section{padding:110px 5.5vw}
.intro,.books-head,.process-head,.segments-head{display:grid;grid-template-columns:1fr 2fr;gap:8vw}
/* Aqui o título é o mais longo dos quatro cabeçalhos de seção e quebra em
   4 linhas, deixando a fileira bem mais alta que o parágrafo curto ao lado —
   sem âncora, o texto flutuava solto no meio do vão. Alinhar ao rodapé (junto
   da base do título, como legenda) resolve sem inventar mais texto. */
.segments-head{align-items:end}
/* Projetos Customizados, Contemporânea Magazine e A editora: o texto menor da direita fica centrado na
   altura do TÍTULO (pedido do cliente, 02/10/2026). O rótulo pequeno acima do título não conta como parte
   do bloco que se centra, daí o padding-top = altura dele. Só no desktop: no celular as colunas empilham. */
@media(min-width:901px){
.portfolio .books-head,.magazine .books-head,.intro{align-items:center}
.portfolio .books-head>div:last-child,.magazine .books-head>div:last-child,.intro>div:last-child{padding-top:var(--rotulo-h,13px)}
/* Centro VISUAL (pelo desenho das letras), não só o do bloco: quando a última linha do título tem letras que
   descem ("g" de Magazine, "p" de possibilidades) a tinta do título vai ~0,1em abaixo do centro do bloco e o
   texto parecia alto. Projetos Customizados ("medida", sem descendentes) já estava certo. Medido a 1205px:
   texto 6–7px acima do centro óptico; 2 × 0,1em de padding extra o desloca para baixo. */
.magazine .books-head>div:last-child,.intro>div:last-child{padding-top:calc(var(--rotulo-h,13px) + .2*var(--h2))}
}
.intro h2,.feature h2,.books h2,.process h2,.segments h2,.cta h2,section h2{font-size:var(--h2);line-height:.93}

/* --- As quatro naturezas (V3) ---------------------------------------------
   Mudaram de lugar: saíram da faixa solta no topo e entraram na Produção
   editorial, sobre o campo escuro e bem maiores. Uma peça real de cada tipo.
   O rótulo agora vem primeiro e a peça que o ilustra vem abaixo, menor. */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:70px 0 95px}
.tile{display:flex;flex-direction:column;gap:18px}
.tile-art{height:400px;background:var(--i);display:flex;align-items:center;justify-content:center;padding:34px;overflow:hidden}
.tile-art img{width:auto;height:100%;max-width:100%;object-fit:contain;transition:.6s}
.tile:hover .tile-art img{transform:scale(1.04)}
.tile strong{font:500 26px "Playfair Display";font-weight:500;letter-spacing:-.03em}
.tile em{font-style:normal;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8d8d86;margin-top:-12px}

/* --- Bloco de destaque, escuro ------------------------------------------- */
.feature{padding:0;display:grid;grid-template-columns:1fr 1fr;background:var(--b);color:#fff}
.feature-img{min-height:650px;display:flex;align-items:center;justify-content:center;padding:60px}
.feature-img img{width:auto;height:min(72vh,520px);max-width:100%;object-fit:contain}
.feature-copy{padding:100px 9vw;display:flex;justify-content:center;flex-direction:column}
.feature-copy h2{max-width:600px}
.feature-copy .body{color:#aaa}

/* --- Livraria: galeria editorial (V3, capa no tamanho anterior) -----------
   A versão de 2 colunas com campo grande ficou pesada demais na avaliação do
   cliente. Capa de volta ao tamanho de antes (4 colunas) — mas mantendo o
   pedido de "menos informação aparente": só nome + preço, sem formato,
   páginas e autoria, que continuam na página interna.

   O campo tem sempre o mesmo tamanho; a capa dentro dele cresce até a largura
   nativa do arquivo e para (o `style` inline vem de teto() no gerador). Por
   isso as peças não ficam todas da mesma altura — e é assim mesmo: o acervo
   vai de 519px a 1859px, e fingir uniformidade exigiria ampliar. */
.books{padding-top:115px}
.books-head{margin-bottom:60px}
/* 3 colunas (4 só em telas >=1700px): com cartões quase quadrados o livro da Fernanda Marques 02 — livro +
   sobrecapa lado a lado, 1,14× mais largo que alto — cabe na MESMA altura dos outros (pedido do cliente). */
.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 22px}
@media(min-width:1700px){#livraria .book-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* O 9º livro da home só aparece quando a grade tem 3 colunas (901–1699px): com 4 (≥1700px) ou 2 (≤900px) ele
   ficaria sozinho na última linha, então nessas larguras a vitrine continua com 8. */
#livraria .book-grid>.book:nth-child(9){display:none}
@media(min-width:901px) and (max-width:1699px){#livraria .book-grid>.book:nth-child(9){display:flex}}

/* O cartão não é mais um único <a> gigante — cobrir a capa E oferecer
   "Adicionar à sacola" no mesmo cartão exige que o botão não fique aninhado
   dentro de um link (interativo-dentro-de-interativo é HTML inválido e
   quebra leitor de tela). São três elementos irmãos: o link da capa+título,
   o preço, e o botão. */
/* O grid já estica cada .book para a altura da fileira (comportamento padrão
   de grid). Títulos de uma ou duas linhas (ex.: "Roberta Trida" quebra,
   "mw.arq" não) faziam o botão ficar em alturas diferentes na mesma fileira.
   margin-top:auto no botão consome o espaço sobrando e o gruda no rodapé —
   as imagens já ficam alinhadas pela caixa de altura fixa (.book-cover). */
.book{display:flex;flex-direction:column;height:100%}
.book-cover-link{display:block}
/* Pedido do cliente (02/10/2026): "esse tamanho da revista da Breton também para os
   livros... todos do mesmo tamanho, estão muito grandes". Todos os livros na mesma
   altura (72% do cartão — a Simone Meirelles, a mais larga, define o teto) e
   centrados; sem padding, a altura é a única medida. */
/* Altura única para todos os livros (pedido do cliente, 02/10/2026): 72% do cartão, que agora é quase quadrado
   (aspect-ratio:1), ou seja, 72% da LARGURA. A Fernanda Marques 02 é o composto livro marrom + sobrecapa
   (748×658, 1,14× mais largo que alto): com essa altura ela ocupa ~82% da largura do cartão e cabe inteira,
   com a peça da FMAA exatamente do tamanho dos demais livros. */
.book-cover{aspect-ratio:1;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .4s}
.book-cover img{width:auto;height:72%;max-width:96%;object-fit:contain;transition:.6s}
.book:hover .book-cover{background:#fff}
.book:hover .book-cover img{transform:scale(1.035)}
.book-sem-capa{aspect-ratio:1;border:1px solid var(--l);display:flex;align-items:flex-end;padding:18px}
.book-sem-capa span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--m)}
.book-linha{margin:18px 0 14px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--l);padding-top:14px}
.book-title{font:500 20px/1.15 "Playfair Display";letter-spacing:-.02em;transition:color .25s}
.book-title:hover{color:var(--o)}
.book-preco{font-size:12px;letter-spacing:.06em;color:var(--m);white-space:nowrap}
.book-meta{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#8a867e;margin-top:8px;line-height:1.6}

/* Comprar sem precisar entrar na página do livro primeiro. */
.book-add{margin-top:auto;width:100%;text-align:center;padding:13px 14px;font-size:9px;letter-spacing:.12em;min-height:44px}

.books-todas{margin-top:50px;display:flex;justify-content:flex-end}

/* --- Projetos Customizados -------------------------------------------------
   Peças reais que a 427 produziu sob encomenda para empresas e marcas —
   não são os livros à venda na Livraria, por isso o campo muda (bege-mineral
   em vez do papel) e a grade é de 3, não de 4: a intenção é ler como um
   portfólio de trabalhos, não como mais uma prateleira de produto. */
.portfolio{background:var(--campo)}
.peca-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px;margin-top:10px}
.peca{display:flex;flex-direction:column;gap:16px}
/* Pedido do cliente (02/10/2026): todas as capas do tamanho da Breton, sem sobras e
   centralizadas. A Breton ocupava ~78% da altura do cartão; todas passam a ter
   exatamente essa altura (a largura segue a proporção de cada peça). */
.peca-art{aspect-ratio:.82;background:#fff;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.peca-art img{width:auto;height:78%;max-width:92%;max-height:644px;object-fit:contain;transition:.6s}
.peca:hover .peca-art img{transform:scale(1.035)}
.peca-legenda strong{display:block;font:500 18px/1.2 "Playfair Display";letter-spacing:-.02em}
.peca-legenda span{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--m);margin-top:6px}

/* --- Contemporânea Magazine -------------------------------------------------
   A revista própria da 427 — não é um produto entre outros, é a publicação
   de bandeira da casa. Campo escuro como a Produção editorial, mas grade
   própria: destaca as capas reais das edições já publicadas. */
.magazine{background:var(--i);color:#fff}
.magazine .body{color:#c7c4bd}
.magazine .eyebrow{color:#a5a49d}
.magazine .peca-art{background:#1f2321}
.magazine .peca-legenda span{color:#9a978f}

/* --- Carrossel da Contemporânea Magazine (22/09/2026) ---------------------
   Pedido do cliente: "deixar em forma de carrossel passando as imagens na
   tela" — 14 capas reais da revista. Mesma técnica do `.ticker` que já
   existe na home (trilha duplicada, translateX(-50%) em loop linear): sem
   seta, sem bolinha, sem parar para o usuário escolher — o movimento
   confirma que há mais edições, não pede uma decisão. */
.magazine-carrossel{margin-top:10px;overflow:hidden}
.magazine-carrossel__trilho{display:flex;gap:24px;width:max-content;animation:carrossel-magazine 48s linear infinite}
.magazine-carrossel:hover .magazine-carrossel__trilho{animation-play-state:paused}
.magazine-carrossel__item{display:flex;flex-direction:column;gap:16px;width:min(78vw,300px);flex:none}
.magazine-carrossel__art{aspect-ratio:.82;background:#fff;display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}
.magazine-carrossel__art img{width:auto;height:100%;max-width:100%;object-fit:contain}
.magazine-carrossel__legenda strong{display:block;font:500 18px/1.2 "Playfair Display";letter-spacing:-.02em}
.magazine-carrossel__legenda span{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#9a978f;margin-top:6px}
@keyframes carrossel-magazine{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.magazine-carrossel__trilho{animation:none;overflow-x:auto}}

/* --- Produção editorial, escuro (V3) --------------------------------------
   É a principal oportunidade comercial do briefing, então virou o bloco mais
   forte da página: a chamada em corpo de abertura, as quatro naturezas em
   peças reais, e só depois as etapas. */
.process .eyebrow,.feature .eyebrow,.vistas .eyebrow{color:#a5a49d}
.process{background:var(--b);color:#fff}
.process .body{color:#aaa}
.process-claim{font-size:clamp(46px,6.6vw,104px)!important;line-height:.92;letter-spacing:-.055em;margin:26px 0 0}
.process-lead{max-width:600px;margin-top:34px}
.process-etapas{margin-top:20px;padding-top:70px;border-top:1px solid #ffffff2a}
.process-sub{font:500 clamp(30px,3.2vw,46px)/1 "Playfair Display";letter-spacing:-.04em;margin:14px 0 0}
.steps{border-top:1px solid #ffffff2a;margin-top:55px}
.step{display:grid;grid-template-columns:70px 1fr 1.8fr;gap:25px;padding:27px 0;border-bottom:1px solid #ffffff2a;align-items:center}
.step-no{color:#aaa;font-size:13px}
.step h3{font:500 25px "Playfair Display";margin:0}
.step p{color:#aaa;font-size:13px;margin:0}

/* --- Segmentos ----------------------------------------------------------- */
.segment-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--l);border-left:1px solid var(--l);margin-top:55px}
.segment{padding:27px 22px;height:170px;border-right:1px solid var(--l);border-bottom:1px solid var(--l);position:relative}
.segment small{color:#888}
.segment h3{font:500 25px "Playfair Display";position:absolute;bottom:22px;margin:0}

/* --- Chamada e contato ---------------------------------------------------
   Sem fotografia ambiente no acervo, o fundo é campo sólido — não uma foto
   de banco (regra 4 do CLAUDE.md). */
/* A casa — o fundador. O retrato nativo tem 499px: a coluna para em 420px
   para nunca ampliar (specs/site.md §10). */
.founder{display:grid;grid-template-columns:420px minmax(0,1fr);gap:7vw;align-items:start}
.founder-retrato{background:var(--campo);padding:26px;max-width:420px}
.founder-retrato img{width:100%;height:auto;display:block}
.founder-nota{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--m);margin-top:16px}
.founder-papel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--m);margin:0 0 6px}
.founder h2{margin-bottom:18px}
.founder .body+.body{margin-top:18px}
.founder .btn{margin-top:34px}

.cta{padding:105px 5.5vw;color:#fff;background:var(--b);display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.cta .body{color:#ddd}
.cta .btn{border-color:#fff;color:#fff}
.cta .btn.fill{background:#fff;color:var(--i)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.contact h2{font-size:65px;line-height:.95}
.contact-links a{display:block;font-size:18px;padding:20px 0;border-bottom:1px solid var(--l)}

footer{background:var(--b);color:#aaa;padding:40px 5.5vw 25px;display:flex;justify-content:space-between;align-items:end;font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.footer-brand{display:block;width:52px;color:#fff}
.footer-brand svg{display:block;width:100%;height:auto}
/* Botão do WhatsApp — logo real do app. Verde do próprio WhatsApp, não o
   laranja de acento do site (pedido do cliente: reconhecível de cara). */
.wa{position:fixed;right:24px;bottom:24px;z-index:30;width:56px;height:56px;background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .25s}
.wa svg{width:28px;height:28px}
.wa:hover{transform:translateY(-2px)}

/* ==========================================================================
   Páginas de /publicacoes/ — mesma linguagem
   ========================================================================== */

.pub{padding:170px 5.5vw 90px;display:grid;grid-template-columns:1.05fr .95fr;gap:5.5vw;align-items:center}
.pub__titulo{font-family:"Playfair Display",serif;font-weight:500;font-size:clamp(44px,5.5vw,78px);line-height:.95;letter-spacing:-.05em;margin:14px 0 6px}
.pub__autoria{font-size:16px;color:var(--m)}
.pub__aviso{display:inline-block;margin-top:22px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--o);border:1px solid var(--o);padding:9px 13px}
/* Sem o quadrado bege atrás do livro (pedido do cliente, 05/10/2026): o livro recortado fica direto sobre o papel da página. */
.pub__art{background:none;display:flex;align-items:center;justify-content:center;padding:44px;min-height:520px}
.pub__art img{width:auto;height:min(60vh,520px);max-width:100%;object-fit:contain}
.pub__sem-capa{min-height:520px;display:flex;align-items:flex-end;padding:22px;border:1px solid var(--l)}
.pub__sem-capa span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--m)}

.ficha{border-top:1px solid var(--l);margin-top:36px;max-width:520px}
.ficha__par{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--l)}
.ficha__rotulo{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--m);padding-top:3px}
.ficha__valor{font-size:15px;text-align:right}
.pub__compra{margin-top:38px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pub__nota{font-size:14px;color:var(--m);max-width:44ch}

/* Outras vistas: escuro, uma por bloco. */
/* "Sobre a publicação" — texto real da arquiteta, tirado do site dela.
   Não pode ser resumido nem reescrito (regra do cliente); a única liberdade
   de projeto é a composição: coluna estreita, serifa só no rótulo. */
.pub-sobre{padding:0 5.5vw 90px;max-width:720px}
.pub-sobre .eyebrow{margin-bottom:22px}
.pub-sobre p.body+p.body{margin-top:20px}

.vistas{background:var(--b);color:#fff;padding:100px 5.5vw}
.vistas .eyebrow{color:#aaa}
.vistas__lista{display:flex;flex-direction:column;gap:60px;margin-top:45px}
.vistas__item{display:flex;align-items:center;justify-content:center}
.vistas__item img{width:auto;height:min(58vh,480px);max-width:100%;object-fit:contain}

.vizinhas{padding:60px 5.5vw 100px;display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center}
.vizinhas a{display:flex;flex-direction:column;gap:7px;min-height:44px;justify-content:center}
.vizinhas__fim{text-align:right;align-items:flex-end}
.vizinhas__nome{font:500 22px/1.1 "Playfair Display";max-width:24ch}
.vizinhas__indice{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--m);border:1px solid var(--l);padding:13px 18px;align-items:center!important;flex-direction:row!important}

.catalogo{padding:170px 5.5vw 120px}
.catalogo .book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 34px}
.catalogo .book-cover{aspect-ratio:1;padding:0}
.catalogo__head{display:grid;grid-template-columns:1fr 2fr;gap:8vw;margin-bottom:65px}
.catalogo__head h1{font-size:clamp(46px,5.4vw,78px);line-height:.93;letter-spacing:-.055em}

/* --- Botão "Adicionar à sacola" (página da publicação) -------------------- */
.sacola-add{border:1px solid var(--i);background:none;cursor:pointer;transition:.3s}
.sacola-add:hover{background:var(--i);color:#fff}
.sacola-add--ok{background:var(--i);color:#fff;pointer-events:none}
.pub__fale{display:block;margin-top:16px;font-size:13px;color:var(--m);text-decoration:underline;text-underline-offset:3px}

/* --- Indicador de sacola no cabeçalho e no menu ---------------------------
   Nasce `hidden`: site.md §6 pede silêncio quando a sacola está vazia.
   sacola.js decide quando mostrar. */
.sacola-indicador{font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.sacola-indicador span{color:var(--o)}
/* No cabeçalho: ícone de bolsa com um selo numérico no canto — o mesmo
   indicador de sempre, só que pictórico em vez de texto. */
.nav .sacola-indicador{position:relative;display:flex}
.sacola-indicador__icone{width:22px;height:22px}
.sacola-indicador__badge{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 3px;border-radius:50%;background:var(--i);color:#fff;font-size:9px;line-height:16px;text-align:center}
.nav--escura .sacola-indicador__badge{background:#fff;color:var(--i)}
.menu .sacola-indicador{font:500 clamp(28px,7vw,40px)/1.2 "Playfair Display";letter-spacing:-.03em;padding:9px 0;border-bottom:1px solid #ffffff1f;text-transform:none}
.menu .sacola-indicador span{color:var(--o)}

/* --- /sacola/ e /finalizar/ -------------------------------------------- */
.comercio{padding:170px 5.5vw 140px;max-width:900px}
.comercio--checkout{max-width:1320px} /* a página de finalização precisa de mais largura que a sacola: formulário + resumo lado a lado */
.comercio h1{font-size:clamp(46px,5.4vw,78px);line-height:.93;letter-spacing:-.055em;margin:18px 0 50px}
.comercio-vazia a{text-decoration:underline;text-underline-offset:3px}

.sacola-lista{display:flex;flex-direction:column}

/* Uma linha de item — usada pela página /sacola/ (cheia) e pelo painel
   lateral (.sacola-item--compacta). As duas variantes compartilham a mesma
   estrutura em assets/js/sacola.js: miniatura, nome, quantidade, preço,
   remover — só o tamanho muda. */
.sacola-item{display:grid;grid-template-columns:60px 1fr auto auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--l)}
.sacola-item__arte{width:60px;height:75px;object-fit:cover;background:var(--campo)}
.sacola-item__arte--vazia{border:1px solid var(--l)}
.sacola-item__nome{font:500 17px/1.2 "Playfair Display"}
.sacola-item__qtd{display:flex;align-items:center;gap:12px;font-size:14px;margin-top:8px}
.sacola-item__qtd button{width:28px;height:28px;border:1px solid var(--l);background:none;cursor:pointer;font-size:14px;line-height:1}
.sacola-item__preco{font-size:14px;color:var(--m);white-space:nowrap}
.sacola-item__remover{background:none;border:0;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--m);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}

.sacola-resumo{margin-top:36px;padding-top:24px;border-top:1px solid var(--i)}
.sacola-resumo__linha{display:flex;justify-content:space-between;font-size:18px;margin-bottom:6px}
.sacola-resumo .btn{margin-top:22px}

/* --- O painel lateral (gaveta premium) -------------------------------------
   site.md §7: "abre como painel lateral/overlay — nunca redireciona no
   'adicionar'." Entrada da direita, sem bounce, com o mesmo vocabulário do
   resto do site (Playfair no nome do item, filetes de 1px, sem sombra
   decorativa — a separação do fundo é só o overlay). */
.sacola-overlay{position:fixed;inset:0;z-index:45;background:rgba(9,12,12,.55);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.sacola-overlay--aberta{opacity:1;visibility:visible}

.sacola-painel{position:fixed;top:0;right:0;bottom:0;z-index:46;width:min(440px,92vw);background:var(--p);
  display:flex;flex-direction:column;padding:30px 28px;overflow-y:auto;
  transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sacola-painel--aberta{transform:translateX(0)}

.sacola-painel__cabecalho{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--l)}
.sacola-painel__cabecalho .eyebrow{font-size:12px}
.sacola-painel__fechar{background:none;border:0;padding:10px 0;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--m);cursor:pointer;min-height:44px}
.sacola-painel__fechar:hover{color:var(--i)}
.sacola-painel__vazia{padding:40px 0;color:var(--m)}

.sacola-painel__lista{flex:1;display:flex;flex-direction:column}
.sacola-item--compacta{grid-template-columns:52px 1fr auto;gap:14px;padding:18px 0}
.sacola-item--compacta .sacola-item__arte{width:52px;height:65px}
.sacola-item--compacta .sacola-item__nome{font-size:15px}
.sacola-item--compacta .sacola-item__preco{grid-column:3;grid-row:1}
.sacola-item--compacta .sacola-item__remover{grid-column:2/4;grid-row:2;justify-self:start;padding:0;min-height:auto;margin-top:6px}

.sacola-painel__rodape{border-top:1px solid var(--i);padding-top:22px;margin-top:8px}
.sacola-painel__linha{display:flex;justify-content:space-between;font-size:19px;margin-bottom:6px}
.sacola-painel__rodape .btn{display:block;width:100%;text-align:center;margin-top:16px}
.sacola-painel__ver{display:block;text-align:center;margin-top:14px;font-size:11px;letter-spacing:.06em;color:var(--m);text-decoration:underline;text-underline-offset:3px;min-height:44px;line-height:44px}

@media(prefers-reduced-motion:reduce){
  .sacola-painel{transition:opacity .2s}
  .sacola-overlay{transition:opacity .2s}
}

.checkout{display:grid;grid-template-columns:1.25fr 1fr;gap:5vw;align-items:start}
.checkout-form{display:flex;flex-direction:column;gap:38px}
.checkout-bloco{display:flex;flex-direction:column;gap:22px}
.checkout-grupo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.campo{display:flex;flex-direction:column;gap:8px;font-size:13px}
.campo span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--m)}
.campo input,.campo textarea,.campo select{font:inherit;font-size:15px;color:var(--i);border:1px solid var(--l);background:var(--p);padding:13px 14px;resize:vertical;min-height:44px;border-radius:0}
.campo input:focus-visible,.campo textarea:focus-visible,.campo select:focus-visible{outline:2px solid var(--o);outline-offset:1px}
/* O botão fica no resumo (fora do <form>, ligado por form="pedido"). Antes `.checkout-form .btn{background:none}` anulava o
   fundo do `.btn.dark` e deixava o texto branco sobre o papel — "o texto do box está em branco". */
.checkout-resumo .btn{display:block;width:100%;margin-top:24px;border:1px solid var(--i);cursor:pointer;min-height:48px;text-align:center}
.checkout-resumo .btn.dark:hover{background:var(--p);color:var(--i)}
.checkout-resumo .pub__nota{max-width:none;margin-top:14px}

.checkout-resumo{background:var(--campo);padding:28px}
.checkout-itens{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.checkout-linha{display:flex;justify-content:space-between;gap:16px;font-size:13px}
.checkout-resumo>.checkout-linha{margin-top:10px}
.checkout-linha--total{border-top:1px solid var(--l);padding-top:14px;margin-top:14px;font-size:16px;font-weight:500}
.checkout-linha small{font-size:11px;font-weight:400;color:var(--m)}
.checkout-pagamento{margin-top:28px;padding-top:22px;border-top:1px solid var(--l)}
.checkout-pagamento strong{display:block;margin:10px 0 8px;font:500 18px/1.2 "Playfair Display";letter-spacing:-.02em}
.checkout-pagamento p{margin:0;font-size:13px;line-height:1.7;color:#57534d}

.checkout-confirmado{margin-top:50px;padding-top:40px;border-top:1px solid var(--l)}
.checkout-confirmado h2{font-size:clamp(28px,3vw,40px);line-height:1.05;margin:14px 0 14px}
.checkout-confirmado .btn{margin-top:20px;display:inline-block}

/* --- Responsivo ---------------------------------------------------------- */
@media(max-width:900px){
.navlinks{display:none}
.nav-menu{display:block}
.nav .btn{display:none}
.nav>.sacola-indicador{display:none}
.comercio{padding-top:130px}
.checkout{grid-template-columns:1fr;gap:50px}
.checkout-grupo{grid-template-columns:1fr}
.hero,.intro,.books-head,.process-head,.segments-head,.cta,.contact,.catalogo__head,.pub{grid-template-columns:1fr;gap:40px}
.hero{padding-top:120px}.hero-carrossel{height:60vh;min-height:400px}
.four{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:55px 0 70px}
.tile-art{height:320px;padding:26px}
.process-etapas{padding-top:55px}
.book-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px 26px}
.peca-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 24px}
.feature{grid-template-columns:1fr}
.feature-img{min-height:430px;padding:40px}.feature-img img{height:340px}
.feature-copy{padding:75px 8vw}
.segment-grid{grid-template-columns:1fr 1fr}
.founder{grid-template-columns:1fr;gap:44px}.founder-retrato{max-width:340px}
.step{grid-template-columns:50px 1fr}.step p{grid-column:2}
.pub{padding-top:130px}.pub__art{min-height:400px;padding:30px}.pub__art img{height:44vh}
.vizinhas{grid-template-columns:1fr;row-gap:26px}
.vizinhas__fim{text-align:left;align-items:flex-start}
}
@media(max-width:560px){
section{padding:78px 22px}
.nav{padding:20px 22px}
.hero{padding:120px 22px 50px}.hero-carrossel{min-height:360px}.hero-carrossel__slide{padding:24px 24px 108px}
h1{font-size:52px}
.four,.book-grid,.peca-grid,.segment-grid{grid-template-columns:minmax(0,1fr)}
.four{margin:45px 0 60px;gap:34px}
.tile-art{height:340px}
.book-grid{gap:48px}
.hero-carrossel__legenda{padding:14px 16px;flex-direction:column;gap:6px;align-items:flex-start}
.hero-carrossel__legenda span{white-space:normal}
.hero-todos{flex-direction:column;align-items:flex-start;gap:8px}
.hero-todos span{max-width:none}
.feature-copy{padding:65px 22px}
.cta{padding:75px 22px}
.contact h2{font-size:52px}
footer{padding:30px 22px;display:block}.footer-brand{margin-bottom:25px}
.pub{padding:120px 22px 60px}.catalogo{padding:120px 22px 80px}
.vistas{padding:70px 22px}
.vizinhas{padding:50px 22px 80px}
.ficha__par{flex-direction:column;gap:3px}.ficha__valor{text-align:left}
.comercio{padding:120px 22px 90px}
.sacola-item{grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;row-gap:6px;text-align:left}
.sacola-item__arte{grid-column:1;grid-row:1/4}
.sacola-item__corpo{grid-column:2;grid-row:1}
.sacola-item__qtd{justify-content:flex-start}
.sacola-item__preco{grid-column:2;grid-row:2}
.sacola-item__remover{grid-column:2;grid-row:3}
.sacola-painel{width:100vw}
.checkout-resumo{padding:22px}
}
.pix{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,56px);margin:32px 0;padding:32px;border:1px solid var(--l);background:#fff;align-items:start}
.pix-qr{text-align:center;max-width:240px}
.pix-qr [data-pix-qr] img{display:block;width:220px;height:220px}
.pix-qr small{display:block;margin-top:10px;font-size:12px;line-height:1.5;color:#57534d}
.pix-linha{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--l);font-size:15px}
.pix-linha span{color:#57534d}
.pix-linha strong{font-weight:500;text-align:right}
.pix-dados .btn{margin:16px 0 8px}
.pix-sep{margin-top:28px}
@media(max-width:700px){.pix{grid-template-columns:1fr;padding:22px}.pix-qr{margin:0 auto}}

/* Livro esgotado (06/10/2026): tarja na capa e compra bloqueada */
.book-cover,.pub__art{position:relative}
.tarja-esgotado{position:absolute;top:18px;left:0;z-index:2;background:#090c0c;color:#fff;font:600 11px/1 "DM Sans",sans-serif;letter-spacing:.22em;text-transform:uppercase;padding:9px 16px 9px 14px;pointer-events:none}
.pub__art .tarja-esgotado{top:24px;font-size:12px;padding:11px 20px 11px 16px}
.hero-carrossel__slide .tarja-esgotado{top:22px}
.sacola-add[disabled]{opacity:.55;cursor:not-allowed}
.sacola-add[disabled]:hover{background:none;color:inherit}
.btn.dark.sacola-add[disabled]:hover{background:var(--i);color:#fff}