/* ═══════════════════════════════════════════════════════════════
   VERSÃO PÚBLICA · Coisas de Crianças · 15/09/2026
   Carregado SÓ no site que vai ao ar. O modelo de trabalho não
   carrega este arquivo e continua exatamente como está.

   POR QUE ELE EXISTE
   O espaço marcado — as tarjas "FALTA RESPONDER", o bloco de
   pendências, as caixas tracejadas de foto — é uma ferramenta de
   TRABALHO, feita para o dono ver o que falta. Para um dono de
   mercearia que abre o site pela primeira vez, aquilo não lê como
   honestidade: lê como site quebrado.

   A REGRA NÃO MUDOU, MUDOU O DESTINATÁRIO
   Continua proibido preencher lacuna com texto plausível. O que a
   versão pública faz é a outra saída honesta: **onde só existe
   lacuna, a seção não vai ao ar**; onde o módulo tem nome na
   navegação, ele aparece como **em construção**, que é verdade.
   Nada aqui inventa número, preço, telefone, endereço ou história.

   COMO LIGAR: data-modo="publico" na raiz. O montar-publico.py põe.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. O QUE NÃO VAI AO AR ────────────────────────────────────
   Material interno, e lacuna que não tem como virar conteúdo. */
[data-modo] .pendencias,          /* a lista interna do que falta */
[data-modo] .vazio,               /* "Falta responder" em caixa */
[data-modo] .aviso-preco,         /* o aviso do filtro de preço */
[data-modo] .item-preco-falta,    /* "Preço a definir" no cartão */
[data-modo] .item.falta-foto,     /* o produto sem foto boa */
[data-modo] .item.vaga,           /* "Próximo produto" */
[data-modo] .nota-fonte,          /* nota de método, para ele */
[data-modo] .foto{                /* caixa tracejada de foto */
  display:none !important;
}

/* A banda inteira dos sete marcos sai: os SETE marcos são "Falta
   responder", sem exceção. Publicar a linha do tempo vazia seria
   pior que não ter linha do tempo. Ela volta no dia em que a
   história chegar — o HTML continua lá, intacto. */
[data-modo] .tempo,
[data-modo] .tempo + *{ display:none }
[data-modo] #pg-home .b-amarelo{ display:none }

/* Com a caixa de foto fora, a coluna dela some e o texto ocupa a
   largura toda em vez de ficar um buraco do lado. */
[data-modo] .heroi-grade{ grid-template-columns:1fr }
[data-modo] .heroi-grade > div:last-child:empty,
[data-modo] .medida{ display:none }

/* O botão do Estúdio some SÓ no site que vai ao ar. Na prévia em
   artefato ele continua, porque é lá que o dono mexe. */
[data-modo="publico"] #est-liga{ display:none !important }

/* ── 2. O QUE VIRA "EM CONSTRUÇÃO" ─────────────────────────────
   Módulo que tem nome no rodapé continua com o nome — some a tarja
   vermelha de alarme e entra uma etiqueta calma. É a diferença
   entre "isto está quebrado" e "isto ainda vem". */
[data-modo] .rodape-col .falta{
  color:var(--sobre-suave,var(--sobre-tinta));
}
[data-modo] .rodape-col .falta::after{
  content:"em breve";
  border-style:solid;
  border-color:color-mix(in oklab, var(--sobre,var(--papel)) 30%, transparent);
  color:var(--sobre-suave,var(--sobre-tinta));
}

/* O bloco de atendimento e a linha legal não têm UM dado real:
   telefone, WhatsApp, e-mail, horário, endereço, CNPJ e IE estão
   todos vazios. Bloco de contato sem contato não serve a ninguém,
   e CNPJ é informação que a empresa precisa publicar. Enquanto não
   chegarem, o bloco sai e entra um aviso curto e verdadeiro. */
[data-modo] .rodape-atende,
[data-modo] .rodape-legal .marcado,
[data-modo] .rodape-legal span:has(.marcado){ display:none }

/* ── 3. FERRAMENTA EM CONSTRUÇÃO ───────────────────────────────
   O cartaz que ocupa o lugar de um módulo que ainda não existe.
   Calmo, na cor da marca, sem tracejado de alarme. Diz o que é,
   diz que está sendo feito, e oferece o caminho que JÁ funciona. */
[data-modo] .obra{
  border:2px solid color-mix(in oklab, currentColor 22%, transparent);
  border-radius:16px;
  padding:clamp(22px,2.6vw,34px);
  display:flex; flex-direction:column; gap:12px;
  max-width:72ch;
}
[data-modo] .obra .selo-obra{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:6px 13px;
  background:color-mix(in oklab, currentColor 12%, transparent);
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
[data-modo] .obra .selo-obra::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:currentColor; flex:none;
}
[data-modo] .obra h3{
  font-family:var(--ff-titulo),sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(20px,2.2vw,28px);
}
[data-modo] .obra p{ font-size:16.5px;line-height:1.55 }

/* fora do modo público a ferramenta em construção não aparece —
   no modelo de trabalho quem manda é o espaço marcado */
.obra{ display:none }
[data-modo] .obra{ display:flex }

/* A banda que carrega o cartaz da Home. Não existe `.b-papel` no
   arquivo — as bandas claras são o fundo da página. Sem cor própria a
   seção herdava a cor do texto do corpo, que na paleta do dono é o
   quase-branco `#FDFAF7`: cartaz branco sobre creme, ilegível. Medido
   e corrigido em 15/09. Aqui a superfície é declarada, e a guarda de
   contraste escreve o `--sobre` em cima dela. */
[data-modo] .banda-obra{
  background-color:var(--papel);
  color:var(--sobre,var(--tinta));
}

/* ── 4. O FORMULÁRIO ───────────────────────────────────────────
   Ele não tem destino: não existe e-mail, WhatsApp nem endereço
   para onde mandar. Formulário que engole o pedido do lojista e
   não entrega a ninguém é pior que não ter formulário. Sai, e em
   lugar dele entra a ferramenta em construção. */
[data-modo] .form-caixa{ display:none }
[data-modo] .form-grade{ grid-template-columns:1fr }

/* ═══════════════════════════════════════════════════════════════
   O MEIO DA PÁGINA DE ESPERA — 15/09/2026
   "deixa somente a logo e rodapé por enquanto, e deixar o meio da
    página com o urso da logo com umas ferramentas em construção"

   O urso é recorte do selo oficial, o mesmo arquivo da cena em
   camadas. Nenhum desenho novo, nenhuma reconstrução da marca.

   A superfície é DECLARADA (data-cor="papel" no HTML) para a guarda
   de contraste escrever o --sobre em cima dela. Sem isso a seção
   herdaria a cor de texto do corpo, que na paleta do dono é o
   quase-branco #FDFAF7 — texto branco sobre creme, invisível.
   Defeito medido em 15/09 numa peça anterior; não se repete aqui.
   ═══════════════════════════════════════════════════════════════ */
[data-modo] .espera{
  background-color:var(--papel);
  color:var(--sobre,var(--tinta));
  padding-block:clamp(48px,7vw,104px);
}
[data-modo] .espera-grade{
  display:grid; gap:clamp(26px,4vw,60px);
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  align-items:center;
}
[data-modo] .espera-urso img{
  display:block; width:100%; height:auto;
}
[data-modo] .espera-texto{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(12px,1.6vw,18px); max-width:58ch;
}
[data-modo] .espera-titulo{
  font-family:var(--ff-titulo),sans-serif; font-weight:800;
  text-transform:uppercase; letter-spacing:-.02em; line-height:1;
  font-size:clamp(28px,4.4vw,52px); margin:0;
}
[data-modo] .espera-fala{
  font-size:clamp(16px,1.5vw,18.5px); line-height:1.55; margin:0;
  color:var(--sobre-suave,var(--sobre-tinta));
}
[data-modo] .espera-lista{
  list-style:none; margin:clamp(6px,1vw,12px) 0 0; padding:0;
  display:grid; gap:12px; width:100%;
}
/* O marcador é POSICIONADO, não uma coluna de grade: <b> mais texto
   solto dentro de um item em grade vira três caixas e o marcador cai
   na coluna errada. Defeito já medido em 15/09 na lista de
   pendências — a solução é esta. */
[data-modo] .espera-lista li{
  position:relative; padding:2px 0 2px 26px;
  font-size:16px; line-height:1.45;
  color:var(--sobre-suave,var(--sobre-tinta));
}
[data-modo] .espera-lista li::before{
  content:""; position:absolute; left:0; top:7px;
  width:9px; height:9px; border-radius:2px;
  border:2px solid var(--coral);
}
[data-modo] .espera-lista b{
  display:block; font-weight:700; color:var(--sobre,var(--tinta));
}
[data-modo] .espera .selo-obra{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; padding:6px 13px;
  background:color-mix(in oklab, currentColor 12%, transparent);
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
[data-modo] .espera .selo-obra::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:currentColor; flex:none;
}
@media (max-width:760px){
  [data-modo] .espera-grade{ grid-template-columns:1fr }
  [data-modo] .espera-urso{ max-width:190px }
}


/* ═══════════════════════════════════════════════════════════════
   O RODAPÉ — redesenho de 15/09/2026

   O DEFEITO, medido na tela dele: QUATORZE etiquetas "EM BREVE"
   numa tela só. Repetida catorze vezes, a etiqueta deixa de
   informar e vira textura — e, pior, as que não cabiam na linha
   quebravam para baixo, deixando o rodapé com um ritmo picotado.
   Etiqueta serve para marcar EXCEÇÃO. Quando tudo é exceção, o que
   marca é o contrário: o que já está pronto.

   A DECISÃO: a etiqueta sai dos itens e vira UMA frase, dita uma
   vez. Os módulos ficam em texto calmo. No dia em que um entrar no
   ar, ele vira botão com a cor cheia — e aí o contraste faz o
   trabalho sozinho, sem etiqueta nenhuma.

   Estado: PROPOSTA até o dono aprovar.
   ═══════════════════════════════════════════════════════════════ */

/* a etiqueta repetida sai */
[data-modo] .rodape-col .falta::after{ content:none }
[data-modo] .rodape-col .falta{
  border:0; padding:0; font: inherit; letter-spacing:normal;
  text-transform:none;
  color:var(--sobre-suave,var(--sobre-tinta));
  opacity:.72;
}
/* e entra no lugar um traço curto, do tamanho da entrelinha: marca
   a linha sem gritar, e some sozinho quando o item virar botão */
[data-modo] .rodape-col li:has(.falta){ position:relative }

/* a frase, dita UMA vez, antes das colunas */
[data-modo] .rodape-grade::after{
  content:"Os módulos abaixo entram um a um, conforme cada parte fica pronta. Nenhum está no ar ainda.";
  grid-column:1 / -1; order:-1;
  padding-bottom:clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--linha-sobre,rgba(253,250,247,.18));
  margin-bottom:clamp(18px,2vw,26px);
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.04em; line-height:1.6;
  color:var(--sobre-suave,var(--sobre-tinta));
  /* A caixa vai de ponta a ponta, para o traço atravessar o rodapé
     inteiro; quem segura o comprimento da LINHA é o padding, não o
     max-width — com max-width o traço parava no meio, do tamanho do
     texto, e lia como rabisco em vez de divisor. */
  padding-right:38%;
}
@media (max-width:760px){
  [data-modo] .rodape-grade::after{ padding-right:0 }
}

/* o rodapé ganha um topo: sem ele o creme do meio da página e o
   creme do rodapé eram a mesma mancha, e o rodapé não começava em
   lugar nenhum */
[data-modo] .rodape{
  border-top:1px solid var(--linha-sobre,rgba(36,26,31,.14));
}

/* a coluna da marca respira mais que as outras: ela carrega o selo
   e a frase da empresa, não uma lista */
[data-modo] .rodape-marca p{ max-width:34ch }

/* A CIDADE SAI — "por enquanto", pedido do dono em 15/09/2026.
   O texto continua no HTML, inteiro; só não vai ao ar. Para trazer
   de volta é apagar esta regra. */
[data-modo] .rodape-base{ display:none }

/* ═══════════════════════════════════════════════════════════════
   OS TÍTULOS NA HOME — 16/09/2026
   Oito livros de atividade, logo depois do filme da logo. Cada
   cartão tem UM botão, e ele faz uma coisa só: abre o WhatsApp já
   com a pergunta do preço daquele título escrita. É o primeiro
   canal real do site.

   Superfície DECLARADA (data-cor="papel") — a guarda de contraste
   só mede o que tem data-cor.
   ═══════════════════════════════════════════════════════════════ */
[data-modo] .livros{
  background-color:var(--papel);
  color:var(--sobre,var(--tinta));
  padding-block:clamp(40px,6vw,88px);
}
[data-modo] .livros-titulo{ margin:10px 0 12px }
[data-modo] .livros-fala{
  font-size:clamp(16px,1.5vw,18.5px); line-height:1.55; margin:0 0 clamp(22px,3vw,36px);
  color:var(--sobre-suave,var(--sobre-tinta)); max-width:58ch;
}
/* ── os filtros: Todos · Colorindo com Água · Recorte e Cole · Kit ── */
[data-modo] .livros-filtro{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 clamp(14px,2vw,22px) }
[data-modo] .livros-filtro button{
  display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px;
  border:2px solid rgba(36,26,31,.14); border-radius:999px; background:#fff;
  color:#241A1F; font-family:var(--ff-titulo),sans-serif; font-weight:700; font-size:15px;
  cursor:pointer; white-space:nowrap;
}
[data-modo] .livros-filtro button i{ width:10px; height:10px; border-radius:50%; flex:none }
[data-modo] .livros-filtro button[aria-pressed="true"]{ background:#241A1F; color:#fff; border-color:#241A1F }

/* ── o palco: onde os títulos caem e depois ficam ─────────────── */
/* ── O FUNDO DO PALCO: BRANCO → ARCO-ÍRIS → BRANCO ──────────────
   16 e 17/09/2026, pedido do dono, em três rodadas:
   1) "o fundo do filme da chuva precisa ser o mesmo que fica depois;
      trazer o degradê da empresa em formato de arco-íris passando
      pela imagem."
   2) "o degradê vem do branco pro degradê e termina no branco."
   3) 17/09, DEFEITO MEDIDO: "não está aparecendo o degradê de cores."

   O que estava errado na rodada 2: eu fiz a faixa ATRAVESSAR o palco
   inteira — branco, cores, branco — num ciclo de 16 s. Um terço desse
   tempo o palco ficava só branco, e quem abrisse a página nessa hora
   não via cor nenhuma. A frase dele é sobre o ESPAÇO, não sobre o
   tempo: entra branco de um lado, o arco-íris no meio, sai branco do
   outro — o tempo todo.

   Então agora: a faixa colorida é contínua (as cinco cores da marca,
   rosa, azul, verde, amarelo e coral, as mesmas do trilho de leitura
   no alto, abertas em branco para os títulos lerem por cima) e corre
   sem emenda; quem faz o branco das pontas é uma máscara fixa nas
   bordas do palco. Nasce do branco, passa pelo degradê, termina no
   branco — e nunca fica sem cor no meio.

   Anda por transform (composto na GPU), não por background-position:
   assim o fundo não disputa o repintar com os títulos caindo. Com o
   cinema desligado, fica parado — e continua branco, cores, branco. */
[data-modo] .livros-palco{
  position:relative; isolation:isolate;
  /* hidden primeiro: clip é novo e nem todo navegador tem. Sem um
     dos dois, a faixa colorida (três vezes mais larga que o palco)
     vazaria para fora e empurraria a página para o lado. */
  overflow:hidden; overflow:clip;
  height:min(78vh, 680px); min-height:380px;
  --arco-rosa:    color-mix(in oklab, var(--rosa,#D6206E)    56%, #fff);
  --arco-azul:    color-mix(in oklab, var(--azul,#1D4A6C)    50%, #fff);
  --arco-verde:   color-mix(in oklab, var(--verde,#3F8A3F)   50%, #fff);
  --arco-amarelo: color-mix(in oklab, var(--amarelo,#F2B705) 64%, #fff);
  --arco-coral:   color-mix(in oklab, var(--coral,#DE1600)   54%, #fff);
  background-color:#fff;
  /* O MESMO DESENHO, PARADO, NO PRÓPRIO PALCO — rede de segurança.
     O que se move é o ::before por cima; se por qualquer motivo ele
     não pintar (navegador antigo, pseudo-elemento bloqueado), o dono
     continua vendo branco → arco-íris → branco, parado. Nunca um
     palco branco e mudo, que foi o defeito de 17/09. */
  background-image:linear-gradient(100deg,
    #fff 0%, var(--arco-rosa) 20%, var(--arco-azul) 35%, var(--arco-verde) 50%,
    var(--arco-amarelo) 65%, var(--arco-coral) 80%, #fff 100%);
  border-top:1px solid rgba(36,26,31,.08); border-bottom:1px solid rgba(36,26,31,.08);
}
[data-modo] .livros-palco::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:300%; z-index:0;
  pointer-events:none;
  /* sem emenda: a cor do fim é a mesma do começo */
  background-image:linear-gradient(100deg,
    var(--arco-rosa) 0%, var(--arco-azul) 20%, var(--arco-verde) 40%,
    var(--arco-amarelo) 60%, var(--arco-coral) 80%, var(--arco-rosa) 100%);
  transform:translate3d(-66.666%,0,0);
  animation:arco-passa 20s linear infinite;
  will-change:transform;
}
@keyframes arco-passa{ from{ transform:translate3d(-66.666%,0,0) } to{ transform:translate3d(0,0,0) } }
[data-cinema="nao"] .livros-palco::before{ animation:none; transform:translate3d(-33.333%,0,0) }
/* O BRANCO DAS PONTAS — é isto que faz "vem do branco e termina no
   branco". Tentei primeiro uma máscara no próprio ::before e estava
   errado: a máscara anda junto com a faixa, então o branco passeava
   pelo palco em vez de ficar na borda. Aqui é um véu PARADO, colado
   nas bordas do palco, por cima da cor e por baixo dos títulos
   (z-index 1; os títulos vão de 10 para cima). */
[data-modo] .livros-palco::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    /* as pontas */
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 17%, rgba(255,255,255,0) 83%, #fff 100%),
    /* e o alto e o pé: 17/09, ele viu no celular — "fica um fundo
       branco e depois vem o degradê". Era uma linha reta separando a
       página branca do palco colorido. Agora a cor NASCE do branco da
       página, sem costura. */
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 82%, #fff 100%);
}
/* com a cor nascendo do branco, a linha de borda vira costura à
   mostra — sai */
[data-modo] .livros-palco{ border-top:0; border-bottom:0 }
@media (max-width:700px){ [data-modo] .livros-palco{ height:min(70vh, 560px) } }
/* ── PALCO CHEIO — 17/09/2026 ──────────────────────────────────
   Com 16 títulos em quatro fileiras, cada um ficava do tamanho de um
   selo e a pilha virava grade rala. O palco cresce junto com o número
   de títulos; quem manda é o montar-publico.py, que marca data-cheio
   quando passam de doze. */
[data-modo] .livros-palco[data-cheio]{ height:min(88vh, 880px) }
@media (max-width:700px){ [data-modo] .livros-palco[data-cheio]{ height:min(82vh, 720px) } }
[data-modo] .livros-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:50 }
/* a sombra dos títulos fica mais funda sobre o arco-íris, para o
   produto se descolar do fundo colorido */
[data-modo] .livro-solto{ filter:drop-shadow(0 18px 20px rgba(15,30,51,.24)) drop-shadow(0 2px 4px rgba(15,30,51,.18)) }
[data-modo] .livros-pilha{ position:absolute; inset:0 }
[data-modo] .livro-solto{
  position:absolute; left:0; top:0; display:block; height:auto;
  transform-origin:50% 50%; will-change:transform; text-decoration:none;
  filter:drop-shadow(0 22px 22px rgba(15,30,51,.26)) drop-shadow(0 3px 4px rgba(15,30,51,.2));
  transition:filter .2s;
}
[data-modo] .livro-solto img{ display:block; width:100%; height:auto; -webkit-user-drag:none; user-select:none }
/* passa o mouse: levanta e endireita um pouco — só depois do filme */
[data-modo] .livros[data-pronto] .livro-solto:hover,
[data-modo] .livros[data-pronto] .livro-solto:focus-visible{
  transform:translate(-50%,-50%) translate(0,-14px) rotate(calc(var(--rot,0deg) * .3)) scale(1.06) !important;
  z-index:200 !important;
  filter:drop-shadow(0 34px 30px rgba(15,30,51,.32)) drop-shadow(0 4px 6px rgba(15,30,51,.22));
  outline:none;
}
[data-modo] .livros[data-pronto] .livro-solto{ transition:transform .28s cubic-bezier(.3,.7,.2,1), filter .2s }
[data-modo] .livro-solto[data-fora]{ transition:opacity .3s }

/* ── O TÍTULO QUE TEM CASA PRÓPRIA ─────────────────────────────
   17/09/2026. O Lindas Orações tem uma vitrine inteira só dele. O
   clique nele sai da home, então ele avisa antes: um selo curto,
   no amarelo da marca com texto escuro (12:1), que só aparece
   quando o filme termina — enquanto os títulos caem, nada distrai. */
[data-modo] .livro-selo{
  position:absolute; left:50%; bottom:-13px; transform:translateX(-50%);
  background:#FDC301; color:#241A1F; border-radius:999px;
  padding:5px 11px; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; box-shadow:0 6px 14px rgba(15,30,51,.3);
  opacity:0; transition:opacity .35s; pointer-events:none;
}
[data-modo] .livros[data-pronto] .livro-selo{ opacity:1 }
@media (max-width:700px){
  [data-modo] .livro-selo{ font-size:9px; padding:4px 9px }
  /* no celular o selo do último título e o botão "ver a chegada de
     novo" se encostavam no canto de baixo; o botão muda de lado */
  [data-modo] .livros-rever{ right:auto; left:14px }
}
[data-modo] .livros-rever{
  position:absolute; right:14px; bottom:12px; z-index:60;
  border:2px solid rgba(36,26,31,.16); background:rgba(255,255,255,.9); color:#241A1F;
  border-radius:999px; padding:7px 13px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; opacity:0; transition:opacity .3s;
}
[data-modo] .livros[data-pronto] .livros-rever{ opacity:1 }
[data-cinema="nao"] .livros-rever{ display:none }

/* ── A VITRINE: O DESTAQUE DO MÊS ──────────────────────────────
   17/09/2026, pedido do dono: "Lindas Orações tem que ser uma aba de
   vitrine, vai chamar Vitrine, que vai ser o produto em destaque do
   mês; por enquanto só vai ter um."

   NENHUMA COR FIXA E NENHUMA COR HERDADA. A superfície é declarada
   (data-cor="papel") para a guarda de contraste escrever o --sobre, e
   todo texto auxiliar é uma diluição do PRÓPRIO texto (currentColor),
   não uma variável de contexto. É a defesa contra a armadilha da
   paleta do dono, em que a "tinta" é um quase-branco: já custou caro
   cinco vezes, e aqui não morde.

   O que diz "este é o destaque" é o produto grande, o brilho do arco
   atrás dele e o botão — não um fundo diferente.                    */
[data-modo] .vitrine-mes{
  background-color:var(--papel);
  color:var(--sobre,var(--tinta));
  overflow:hidden;
}
[data-modo] .vm-titulo{ margin-bottom:clamp(22px,3vw,40px) }
[data-modo] .vm-grade{ display:grid; gap:clamp(30px,5vw,64px) }
[data-modo] .vm-item{
  display:grid; gap:clamp(22px,4vw,56px); align-items:center;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
}
[data-modo] .vm-foto{
  position:relative; display:block; justify-self:center; width:100%;
  max-width:420px;
}
/* o brilho do arco atrás do livro — a paleta da marca, bem aberta,
   só para o produto descolar do fundo */
[data-modo] .vm-foto::before{
  content:""; position:absolute; inset:-16% -12%; z-index:0; border-radius:50%;
  background:radial-gradient(58% 54% at 50% 52%,
    color-mix(in oklab, var(--rosa,#C70B69) 34%, transparent) 0%,
    color-mix(in oklab, var(--amarelo,#E8BD2E) 30%, transparent) 44%,
    transparent 72%);
  filter:blur(30px);
}
[data-modo] .vm-foto img{
  position:relative; z-index:1; width:100%; height:auto;
  filter:drop-shadow(0 26px 30px rgba(15,30,51,.3)) drop-shadow(0 4px 7px rgba(15,30,51,.22));
  transition:transform .4s cubic-bezier(.3,.7,.2,1);
}
[data-modo] .vm-foto:hover img{ transform:translateY(-10px) scale(1.03) }
[data-modo] .vm-texto{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(12px,1.6vw,18px) }
[data-modo] .vm-tipo{
  border:1px solid color-mix(in oklab, currentColor 30%, transparent);
  border-radius:999px; padding:6px 13px; font-size:11px;
  color:color-mix(in oklab, currentColor 72%, transparent);
}
[data-modo] .vm-nome{ margin:0 }
[data-modo] .vm-item .vm-fala{
  margin:0; font-size:clamp(16px,1.5vw,18.5px); line-height:1.55; max-width:52ch;
  color:color-mix(in oklab, currentColor 84%, transparent);
}
[data-modo] .vm-contracapa{
  margin:0; display:flex; flex-direction:column; gap:7px; max-width:48ch;
  border-left:3px solid var(--rosa,#C70B69); padding-left:16px;
  font-size:clamp(16px,1.6vw,19px); line-height:1.45; font-style:italic;
}
[data-modo] .vm-contracapa span{
  font-style:normal; font-size:10.5px; letter-spacing:.12em;
  color:color-mix(in oklab, currentColor 62%, transparent);
}
[data-modo] .vm-btn{ margin-top:6px }
[data-modo] .vm-como{
  margin:0; font-size:11px;
  color:color-mix(in oklab, currentColor 62%, transparent);
}
@media (max-width:820px){
  [data-modo] .vm-item{ grid-template-columns:1fr; gap:clamp(20px,5vw,32px) }
  [data-modo] .vm-foto{ max-width:min(300px,72%) }
  [data-modo] .vm-btn{ width:100%; justify-content:center }
}

/* ── a página do título: o fundo é a cor da linha dele ────────── */
[data-modo] .livro-pagina{
  position:fixed; inset:0; z-index:900; overflow:auto;
  background:var(--fundo,#FDFAF7); color:#0F1E33;
}
[data-modo] .livro-pagina[hidden]{ display:none }
[data-modo] .lp-in{ max-width:1100px; margin:0 auto; padding:clamp(16px,3vw,32px) var(--gut,24px) 60px }
[data-modo] .lp-fechar{
  border:2px solid rgba(15,30,51,.3); background:rgba(255,255,255,.55); color:#0F1E33;
  border-radius:999px; min-height:44px; padding:0 18px; font-family:var(--ff-titulo),sans-serif;
  font-weight:700; font-size:15px; cursor:pointer;
}
[data-modo] .lp-grade{
  display:grid; gap:clamp(22px,4vw,56px); align-items:center;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); margin-top:clamp(18px,3vw,40px);
}
@media (max-width:760px){ [data-modo] .lp-grade{ grid-template-columns:1fr } }
[data-modo] .lp-foto img{ display:block; width:100%; height:auto; max-height:76vh; object-fit:contain;
  filter:drop-shadow(0 30px 30px rgba(15,30,51,.3)) }
[data-modo] .lp-texto{ display:flex; flex-direction:column; gap:12px }
[data-modo] .lp-tipo{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; opacity:.85 }
[data-modo] .lp-nome{
  font-family:var(--ff-titulo),sans-serif; font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:.98; font-size:clamp(36px,6vw,72px); margin:0; overflow-wrap:anywhere;
}
[data-modo] .lp-sub{ font-family:var(--ff-titulo),sans-serif; font-weight:700; text-transform:uppercase;
  font-size:14px; letter-spacing:.06em; margin:14px 0 0; opacity:.85 }
[data-modo] .lp-dentro{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:clamp(17px,1.8vw,21px); line-height:1.4 }
[data-modo] .lp-dentro li{ position:relative; padding-left:22px }
[data-modo] .lp-dentro li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border:2px solid #0F1E33; border-radius:2px }
[data-modo] .lp-preco{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin:14px 0 0; opacity:.85 }
[data-livro-aberto] body{ overflow:hidden }

/* ── os botões de WhatsApp e Instagram ─────────────────────────
   Pedido do dono, 16/09: logo ORIGINAL do Instagram e a cor ORIGINAL
   do WhatsApp. A cor original do WhatsApp é #25D366 — e branco em
   cima dela mede 1.9:1. Por isso o botão é verde e o TEXTO é escuro
   (tinta sobre #25D366 = 8.7:1). No Instagram o degradê original vai
   no ícone e o texto vai escuro sobre branco: em cima de degradê não
   há cor de texto que passe em todo o percurso.                      */
[data-modo] .btn-wa, [data-modo] .btn-ig{
  min-height:46px; padding:8px 16px 8px 10px; font-size:15px; gap:10px;
  text-decoration:none; border-radius:var(--btn-raio,999px);
  justify-content:center;
}
[data-modo] .btn-wa{ background:#25D366; color:#0B2E1F }
/* O texto é FIXO escuro, não var(--tinta): a tinta que o dono escolheu
   é quase-branca (#FDFAF7), e sobre o botão branco o texto sumia —
   medido em 16/09, mesma armadilha da paleta pela quarta vez. O botão
   é sempre branco, então o texto é sempre escuro. */
[data-modo] .btn-ig{ background:#fff; color:#241A1F; border:2px solid rgba(36,26,31,.16) }
[data-modo] .btn-wa svg, [data-modo] .btn-ig svg{ width:28px; height:28px; flex:none; border-radius:50% }
[data-modo] .btn-ig svg{ border-radius:8px }
[data-modo] .btn-wa.grande, [data-modo] .btn-ig.grande{ min-height:58px; padding:10px 24px 10px 12px; font-size:18px }
[data-modo] .btn-wa.grande svg, [data-modo] .btn-ig.grande svg{ width:36px; height:36px }
[data-modo] .btn-ig.grande svg{ border-radius:10px }

/* ── a faixa dos canais ───────────────────────────────────────── */
[data-modo] .social{
  background-color:var(--papel); color:var(--sobre,var(--tinta));
  padding-block:0 clamp(40px,6vw,88px);
}
[data-modo] .social-in{
  border-top:1px solid var(--linha-sobre,rgba(36,26,31,.14));
  padding-top:clamp(28px,4vw,48px);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px;
}
[data-modo] .social-fala{
  margin:0; font-size:clamp(17px,1.8vw,21px); font-weight:600; flex:1 1 260px;
}
[data-modo] .social-botoes{ display:flex; flex-wrap:wrap; gap:12px; max-width:100% }
/* ── O @ COMPRIDO NO CELULAR PEQUENO — 17/09/2026 ──────────────
   Medido a 360px: "@distribuidoracoisasdecriancas" é uma palavra só
   de 30 letras. O botão não tinha como quebrar e empurrava a página
   inteira para o lado — dava para arrastar o site na horizontal.
   Agora o botão cabe na tela e o @ quebra se precisar. */
[data-modo] .btn-wa, [data-modo] .btn-ig{ max-width:100%; overflow-wrap:anywhere; text-align:left }
@media (max-width:430px){
  [data-modo] .btn-ig.grande{ font-size:15px; padding:10px 16px 10px 10px }
  [data-modo] .btn-ig.grande svg{ width:30px; height:30px }
}

/* no rodapé, os dois ícones na coluna da marca */
[data-modo] .rodape-social{ display:flex; gap:10px; margin:12px 0 14px }
[data-modo] .rodape-social a{ display:inline-grid; place-items:center; width:44px; height:44px; text-decoration:none }
[data-modo] .rodape-social svg{ width:40px; height:40px }
[data-modo] .rodape-social .logo-ig{ border-radius:10px }

/* o urso desce para depois dos livros: menos respiro em cima,
   porque a faixa dos canais já separa */
[data-modo] .espera{ padding-top:clamp(36px,5vw,64px) }