/* ═══════════════════════════════════════════════════════════════════════════
   wix.css — a CARA do site antigo, reconstruída parte por parte.
   Fonte de verdade: `_captura/PLANTA-WIX.md` (medido no ar, 1440×900).
   Regra desta folha: nenhum valor inventado. Cor, tamanho e fonte saíram de
   getComputedStyle sobre o site publicado.

   O FUNDO é a pele vantagold (preto + poeira de ouro, em tokens.css).
   As cores do TEXTO são as do Wix: azul-gelo, ciano, dois ouros, vermelho.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── estrutura de seção com arte de fundo ───────────────────────────────── */
.w-sec { position:relative; padding:clamp(3rem,7vw,5.5rem) 0; overflow:hidden; }
.w-fundo { position:absolute; inset:0; z-index:0; }
.w-fundo img { width:100%; height:100%; object-fit:cover; }
/* a arte de fundo do Wix é escura e repetida; aqui ela entra esmaecida para o
   preto vantagold continuar sendo o fundo, como pedido */
.w-fundo-fixo img { opacity:.16; filter:grayscale(.35); }
.w-hero .w-fundo img, .w-divino .w-fundo img { opacity:.30; }
/* A costura da secao com o fundo. ⚠ Era `18%` — PORCENTAGEM DA SECAO, e por
   isso ela engolia conteudo: no celular a secao do universo tem 1081px de
   altura, entao os 18% de baixo viravam 195px de preto por cima da ULTIMA
   FILA DE SELOS (icone e rotulo a meia luz, em 375 E em 1440). Nao era a
   animacao — e um veu fixo, o leitor ve exatamente assim. Agora a costura tem
   TAMANHO, nao proporcao: 88px, que cabem dentro do respiro da propria secao
   (padding de 48 a 88px) e nunca alcancam texto. */
.w-sec::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--bg0), transparent min(18%,88px),
                             transparent calc(100% - min(18%,88px)), var(--bg0));
}
.w-sobre { position:relative; z-index:2; }

/* ── títulos ────────────────────────────────────────────────────────────── */
/* No Wix: Valdemar. Tamanhos medidos: 50px (grandes), 40px (autor), 30px
   (seções), 25px (FAQ/Instagram), 24px (nova era). */
.w-titulo, .w-titulo-grande, .w-titulo-rubro, .w-titulo-ouro, .w-titulo-insta, .w-titulo-faq {
  font-family:var(--letreiro);
  font-weight:400; line-height:1.12; letter-spacing:.01em;
  margin:0 0 1rem; text-wrap:balance;
}
.w-titulo       { font-size:clamp(1.6rem,3.4vw,1.875rem); }  /* 30px */
.w-titulo-grande{ font-size:clamp(2.1rem,5.6vw,3.125rem); color:var(--ouro-fundo);
                  text-shadow:0 0 42px rgba(212,163,33,.24); }  /* 50px */
.w-titulo-rubro { font-size:clamp(1.9rem,5vw,3.125rem); color:var(--rubro);
                  text-shadow:0 0 34px rgba(255,0,0,.30); }   /* 50px — Confrontar o Caos */
/* No Wix o título do autor é 40px, não 50 — medido. */
.w-autor .w-titulo-rubro { font-size:clamp(1.6rem,4vw,2.5rem); }
.w-titulo-ouro  { font-size:clamp(1.25rem,2.6vw,1.5rem); color:var(--ouro-fundo); }  /* 24px */
.w-titulo-insta { font-size:clamp(1.2rem,2.6vw,1.5625rem); color:var(--ouro-insta); }/* 25px */
.w-titulo-faq   { font-family:var(--display); font-weight:700;
                  font-size:clamp(1.25rem,2.6vw,1.5625rem); color:var(--ouro-claro);
                  margin-bottom:1.4rem; }
/* no celular o titulo do FAQ do Wix e 25px (=29 de tela) — o nosso saia em 20 */
@media (max-width:760px){ .w-titulo-faq { font-size:clamp(20px,7.8vw,29px); line-height:1.18; } }
.w-gelo  { color:var(--gelo); text-shadow:0 0 30px rgba(149,228,255,.26); }

.w-subtitulo-ouro {
  font-family:var(--display); font-size:.8125rem; color:var(--ouro-fundo);
  margin:0 0 2.2rem;
}

/* ── 1. HERO: as duas capas lado a lado ─────────────────────────────────── */
.w-hero { padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4rem); }
.w-hero-in {
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,2.2rem);
  align-items:center;
}
.w-capa { margin:0; }
.w-capa img {
  width:100%; border-radius:3px;
  filter:drop-shadow(0 30px 54px rgba(0,0,0,.9)) drop-shadow(0 0 40px rgba(149,228,255,.10));
}
@media (max-width:820px){ .w-hero-in { grid-template-columns:1fr; gap:1.6rem; } }

/* ── 2. SINOPSE ─────────────────────────────────────────────────────────── */
.w-nota-audio { font-family:var(--display); font-size:.75rem; color:var(--quase-branco); margin:.4rem 0 1rem; }
/* MEDIDO no Wix: caixa de 250x40, fundo transparente e `border:4px solid
   rgba(21,158,199,0)` — quatro pixels de borda INVISIVEL. Nao existe pilula
   azul de ponta a ponta ali; era invencao nossa, e era o que mais destoava
   da foto do autor. */
.w-audio {
  display:inline-flex; align-items:center; gap:.6rem; flex-wrap:nowrap;
  border:0; border-radius:10px; padding:0; margin:0;
  background:none; min-height:40px;
}
.w-audio-marca { color:var(--ciano); font-size:1.05rem; line-height:1; }
.w-audio-tempo { font-family:var(--sans); font-size:.75rem; color:var(--ciano); letter-spacing:.04em; }
.w-audio-obs   { font-family:var(--display); font-size:.78rem; color:var(--t3);
                 letter-spacing:.12em; text-transform:uppercase; }
.w-corpo { font-family:var(--serif); font-size:clamp(1rem,1.5vw,1.14rem); line-height:1.72; color:var(--t2); text-align:left; }
.w-corpo p { margin:0 0 1.15em; }
.w-centrado { text-align:center; max-width:64ch; margin-inline:auto; }
.w-pergunta {
  font-family:var(--display); font-size:clamp(1rem,2vw,1.2rem);
  color:var(--gelo); text-align:center; line-height:1.75; margin:2rem 0;
  text-wrap:balance;
}
.w-pergunta strong { color:var(--ouro-claro); font-weight:600; }
.w-links { font-family:var(--letreiro); font-size:1.25rem; margin-top:1.6rem; }
.w-links a { color:var(--ciano); }
.w-links a:hover { color:var(--gelo); text-decoration:underline; }
.w-links strong { font-family:var(--display); font-weight:700; }
.w-sep { color:var(--t4); margin:0 .7rem; }

/* ── 3. faixa de arte inteira ───────────────────────────────────────────── */
/* ⚠ A arte é RETRATO (1080×1920). Deixada solta, a 1440 de largura ela vira
   2560 de altura — medi 2757 na primeira tentativa, contra os 875 do Wix.
   O Wix a exibia recortada em 1425×875; aqui a proporção é travada e o
   recorte fica no centro, que é onde está o assunto. */
.w-faixa { position:relative; line-height:0; }
.w-faixa img,
.w-faixa picture { width:100%; display:block; }
.w-faixa img {
  aspect-ratio:1425/875;
  object-fit:cover;
  object-position:center;
  max-height:min(875px, 68vh);
}
.w-faixa::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--bg0), transparent 14%, transparent 86%, var(--bg0));
}

/* ── 4. Skoob ───────────────────────────────────────────────────────────── */
.w-skoob { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2.2rem; }
.w-skoob figure { margin:0; border:1px solid var(--border); border-radius:5px; overflow:hidden; box-shadow:var(--shadow2); }
.w-skoob img { width:100%; }
@media (max-width:760px){ .w-skoob { grid-template-columns:1fr; } }

/* ── 5. Livro Físico Divino ─────────────────────────────────────────────── */
.w-divino { padding:clamp(4rem,9vw,7rem) 0; }
.w-lancamento {
  font-family:var(--display); font-weight:700;
  font-size:clamp(.95rem,1.9vw,1.25rem); line-height:1.5;
  color:var(--ciano); letter-spacing:.03em; margin:0;
  text-shadow:0 0 26px rgba(63,201,249,.24);
}

/* ── 6. os 14 selos ─────────────────────────────────────────────────────── */
.w-selos {
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.5rem 1rem;
  grid-template-columns:repeat(7,1fr);
}
.w-selos li { text-align:center; }
.w-selo-ico {
  display:block; width:clamp(58px,7vw,105px); margin:0 auto .55rem;
  /* os ícones vieram brancos do Wix; aqui recebem o ouro-claro dos rótulos */
  filter:brightness(0) saturate(100%) invert(84%) sepia(46%) saturate(760%)
         hue-rotate(333deg) brightness(102%) contrast(96%)
         drop-shadow(0 0 10px rgba(249,201,80,.26));
  transition:transform .22s ease;
}
.w-selos li:hover .w-selo-ico { transform:translateY(-3px) scale(1.06); }
.w-selo-rot {
  display:block; font-family:var(--display); font-size:.8125rem;
  color:var(--ouro-claro); line-height:1.3;
}
@media (max-width:1000px){ .w-selos { grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .w-selos { grid-template-columns:repeat(3,1fr); } }

/* ── 7. artes + depoimento ──────────────────────────────────────────────── */
.w-carrossel {
  display:flex; gap:1rem; margin:2rem 0 2.4rem;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:.6rem; justify-content:center; flex-wrap:wrap;
}
.w-carrossel figure {
  margin:0; flex:0 0 210px; scroll-snap-align:center;
  border:1px solid var(--border); border-radius:4px; overflow:hidden;
  box-shadow:var(--shadow2);
}
.w-carrossel img { width:210px; height:210px; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.w-carrossel figure:hover img { transform:scale(1.06); }
.w-depoimento {
  font-family:'Times New Roman', Times, serif; font-size:.9375rem; line-height:1.7;
  color:var(--ouro-claro); max-width:60ch; margin:0 auto 2.4rem; padding:0;
}
.w-depoimento cite { display:block; margin-top:.9rem; font-style:normal; font-size:.875rem; color:var(--t3); }

/* ── 8. livro × ebook ───────────────────────────────────────────────────── */
.w-duvida { font-family:var(--display); font-size:.95rem; color:var(--t2); max-width:56ch; margin:0 auto 2.6rem; }
/* ⚠ AS DUAS COLUNAS ANDAM EM PAR, LINHA A LINHA.
   Enquanto eram duas <ul> independentes, "Aguarde a entrega" (2 linhas) e
   "Acesso Imediato" (1 linha) comecavam juntos e iam se descolando: no print
   de 375 o 4o item ja estava 60px fora do par, e a secao perdia a unica coisa
   que ela existe para fazer, que e COMPARAR. No site do autor os pares ficam
   na mesma linha (medido nas duas versoes).
   A costura e `subgrid`: a grade grande define 9 faixas (foto, titulo, 5
   itens, preco, botao) e cada coluna — e cada <ul> dentro dela — reaproveita
   as MESMAS faixas. Por isso as duas listas precisam ter o mesmo numero de
   itens; a trava "o comparativo anda em par" em testes.mjs cobra isso. */
.w-comparativo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
                 gap:0 1.6rem; grid-template-rows:auto auto repeat(5,auto) auto auto; }
.w-comparativo > .w-col { display:grid; grid-row:1 / -1; grid-template-rows:subgrid;
                          justify-items:center; padding-block:0; }
.w-comparativo > .w-col > ul { grid-row:span 5; display:grid; grid-template-rows:subgrid;
                               justify-self:stretch; }
/* ⚠ CORRECAO de 2026-08-22 (fim da tarde), com o site dele capturado nas DUAS
   larguras: aqui dizia que a secao "NAO tem caixa, nao tem borda e nao tem
   regua entre os itens". ESTAVA ERRADO — o que nao existe e o CARTAO
   arredondado que a gente tinha inventado. O que existe la e uma GRADE de
   verdade: linhas de 2px em #3FC9F9 em volta de cada celula, do primeiro item
   ate a linha do preco, com um risco vertical separando Livro de Ebook.
   Medido no computador (tabela de 840px, x300..1140) e no celular (7 reguas
   de 3px). Fotos e titulos ficam ACIMA da grade; os botoes, ABAIXO.
   O autor apontou a falta: "no site ta em grade/quadro, voce nao fez isso". */
.w-comparativo { column-gap:0; }              /* sem vao: as reguas se encontram */
/* ⚠ e o RESPIRO DE DENTRO da coluna tambem afasta: com o padding do .w-col
   as duas tabelas ficavam separadas por 30px e o risco do meio saia DUPLO. */
.w-comparativo > .w-col { padding-inline:0; }
.w-comparativo > .w-col > ul {
  border:2px solid var(--ciano); border-bottom:0;
  margin-bottom:0;
}
.w-comparativo > .w-col > ul > li {
  border-bottom:2px solid var(--ciano);
  margin:0; padding:.55rem .7rem;
  display:grid; align-content:center;
}
.w-comparativo > .w-col > .w-preco-gelo {
  justify-self:stretch; margin:0 0 1.4rem;
  border:2px solid var(--ciano); border-top:0;
  padding:.5rem .7rem;
}
/* o risco do meio e UM so: a coluna da direita nao repete a borda esquerda */
.w-comparativo > .w-col:last-child > ul,
.w-comparativo > .w-col:last-child > .w-preco-gelo { border-left:0; }
.w-col {
  border:0; border-radius:0; background:none; box-shadow:none;
  padding:clamp(.6rem,2vw,1rem); display:flex; flex-direction:column;
}
.w-col-foto { margin-bottom:1.2rem; }
.w-col-foto img { margin-inline:auto; max-height:200px; width:auto; }
.w-col h3 { font-family:var(--letreiro); font-weight:400; font-size:1.875rem; margin:0 0 1.2rem; }
.w-col ul { list-style:none; margin:0 0 1.6rem; padding:0; flex:1; }
.w-col li {
  font-family:var(--display); font-size:1rem; color:var(--gelo);
  line-height:1.45; padding:.62rem 0; border:0;
}
.w-col li small { color:var(--t3); font-size:.8125rem; }
/* o preco no Wix e 16px como o resto da lista. Aqui ele fica um degrau acima
   (20px) e na MESMA cor medida — quem procura o preco tem de achar. E a unica
   licenca desta secao, e e de leitura, nao de estilo. */
.w-preco-gelo {
  font-family:var(--display); font-weight:700; font-size:1.25rem;
  color:var(--gelo); margin:.6rem 0 1.2rem; letter-spacing:.02em;
}
/* no celular continua em DUAS colunas (ver o bloco de 760 mais abaixo) */

/* ── 9. arquitetura divina ──────────────────────────────────────────────── */
.w-arq-grande { margin:2.4rem auto; max-width:908px; }
.w-arq-grande img { width:100%; border:1px solid var(--border); border-radius:5px; box-shadow:var(--shadow3); }
.w-arq-grande figcaption,
.w-arq-tres figcaption {
  font-family:var(--display); font-size:clamp(1rem,2vw,1.5625rem);
  color:var(--branco); margin-top:.9rem; line-height:1.35;
}
.w-ainda {
  font-family:var(--display); font-size:clamp(1.05rem,2.2vw,1.5625rem);
  color:var(--branco); margin:2.6rem 0 1.6rem;
}
.w-arq-tres { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-bottom:2.6rem; }
.w-arq-tres figure { margin:0; }
.w-arq-tres img { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--border); border-radius:5px; }
.w-arq-tres figcaption { font-family:'Times New Roman', Times, serif; font-size:1.05rem; }
@media (max-width:760px){ .w-arq-tres { grid-template-columns:1fr; } }

/* ── 10. combos ─────────────────────────────────────────────────────────── */
/* ⚠ MEDIDO no site dele, nas DUAS larguras (2026-08-22, fim da tarde): o combo
   e um QUADRO de moldura dourada macica — 6px #F9C950 no celular, 4px no
   computador, CANTO VIVO, fundo escuro e nada de sombra. E os dois combos
   ficam um EMBAIXO do outro, com uma setinha dourada apontando do primeiro
   para o segundo. Aqui havia um cartao arredondado de 1px com degrade: o
   autor apontou ("no site ta em grade/quadro, voce nao fez isso aqui"). */
.w-combo-par { display:grid; grid-template-columns:1fr; gap:3.6rem;
               max-width:700px; margin:2.4rem auto 1.8rem; }
.w-combo {
  position:relative;                      /* os chibis encostam na borda */
  border:4px solid var(--ouro-claro); border-radius:0;
  background:rgba(0,0,0,.42);
  padding:clamp(1.1rem,3vw,1.7rem); display:flex; flex-direction:column;
  box-shadow:none; text-align:left;
}
/* a setinha dourada que liga um combo ao outro (existe nos dois no site dele)
   ⚠ `:not(:last-child)`: com o Combo 02 fora (2026-08-23), sobrou UM quadro —
   e a setinha apontava para o vazio embaixo dele. Seta que nao liga nada e
   pior que seta nenhuma: ela promete que vem mais coisa. */
.w-combo:not(:last-child)::after {
  content:''; position:absolute; left:50%; bottom:-22px; transform:translateX(-50%);
  border:11px solid transparent; border-top-color:var(--ouro-claro);
}
/* o preco e o frete sao CENTRADOS; so a lista fica a esquerda */
.w-combo > p, .w-combo .w-frete { text-align:center; }
.w-combo .w-vai-receber { text-align:left; }

/* ── OS CHIBIS SAO DECORACAO DE BORDA, NAO MASCOTE DE TOPO ──────────────────
   MEDIDO no celular dele: o casal (72x103) encosta na borda DIREITA do combo
   01, dois tercos abaixo; a deusa (57x97) fica na borda ESQUERDA, na altura em
   que um quadro termina e o outro comeca. Aqui os dois estavam centrados
   acima da lista, como um mascote — foi o que o autor apontou. */
.w-combo-extra { position:absolute; width:23%; max-width:120px; margin:0; }
.w-combo-extra.e-dir { right:-3%;  bottom:6%; }
/* ⚠ A DEUSA MUDOU DE LUGAR EM 2026-08-23, e a razao e geometrica.
   Ela morava dois tercos ACIMA da moldura, no VAO entre o Combo 01 e o Combo
   02 (`left:-13%; top:0; translateY(-65%)`) — que e onde ela fica no site
   dele. Com o Combo 02 fora, aquele vao virou o TITULO da secao: medido, ela
   cobria "Escolha seu Combo" e ainda saia 22px pela borda esquerda da tela
   (a moldura ocupa 345 de 375; nao ha margem para um chibi de 87 do lado de
   fora).
   Agora ela espelha o casal: mesma distancia da borda (-3%), mesma altura
   (6% do pe). Os dois passam a ladear o preco, um de cada lado — que e o que
   sobrou de "decoracao de borda" quando so ha um quadro. */
/* ⚠ ESTA REGRA SO GOVERNA A FAIXA DE 761 A 999. Abaixo de 760 manda o bloco
   do celular (21% / 3%); a partir de 1000, o bloco largo logo abaixo. Nessa
   faixa do meio a moldura ja chega aos 700 de largura maxima e sobram 34px de
   margem — nao cabe chibi do lado de fora, e a fatia livre entre o fim da
   lista e o pe do quadro tem 159px. Com 12%/2% ela media 165 e ainda comia uma
   linha; com 10%/1% da 132 e passa limpo. Medido nas tres larguras. */
.w-combo-extra.e-esq { left:-3%; bottom:1%; top:auto; transform:none; width:10%; }
/* Numa tela larga sobra MARGEM de sobra fora do quadro (a moldura tem 683 de
   1440, ou seja 379 vazios de cada lado). Entao no computador ela nao precisa
   se espremer: sai INTEIRA para fora, encostada na borda esquerda, e nao cobre
   uma letra sequer. Abaixo de 1000 essa margem nao existe (a moldura chega a
   700 numa tela de 761) e ela sairia da tela — ali vale a versao menor. */
@media (min-width:1000px){
  .w-combo-extra.e-esq { left:-17%; bottom:6%; width:23%; }
}
.w-combo-fotos { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.3rem; }
.w-combo-fotos img { width:100%; aspect-ratio:169/225; object-fit:cover; border-radius:3px; border:1px solid var(--border); }
.w-combo-nome {
  font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.6vw,1.8125rem);
  color:var(--ouro-fundo); margin:0 0 .8rem;
}
.w-vai-receber { font-family:'Cormorant Garamond', var(--serif); font-size:1rem; color:var(--ouro-claro); margin:0 0 .7rem; }
.w-combo-itens { list-style:none; margin:0 0 1.4rem; padding:0; flex:1; }
.w-combo-itens li {
  font-family:'Times New Roman', Times, serif; font-size:.9375rem; line-height:1.5;
  color:var(--branco); padding:.35rem 0 .35rem 1.1rem; position:relative;
}
.w-combo-itens li::before {
  content:''; position:absolute; left:0; top:.85em;
  width:5px; height:5px; transform:rotate(45deg); background:var(--ouro-claro);
}
.w-preco { font-family:var(--display); font-weight:700; font-size:1.5625rem; color:var(--ouro-claro); margin:0 0 .35rem; }
.w-frete { font-family:'Times New Roman', Times, serif; font-size:1rem; color:var(--verde-frete); margin:0 0 1.3rem; }
.w-mais-prints {
  font-family:var(--display); font-size:.9rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ouro-claro); border-bottom:1px solid rgba(249,201,80,.4);
  padding-bottom:.15rem;
}
.w-mais-prints:hover { color:var(--gold-flare); }
/* (o combo ja nasce em UMA coluna: era assim no site dele nas duas larguras) */

/* ── 11. sobre o autor ──────────────────────────────────────────────────── */
.w-autor-grade { display:grid; grid-template-columns:360px 1fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; margin-top:2.2rem; }
.w-autor-foto { margin:0; border:1px solid var(--border2); border-radius:5px; overflow:hidden; box-shadow:var(--shadow3); }
.w-autor-foto img { width:100%; }
.w-autor-txt { font-family:var(--display); font-size:.875rem; line-height:1.75; color:var(--branco); }
.w-autor-txt p { margin:0 0 1.1em; }
.w-arroba { font-family:var(--letreiro) !important; font-size:1.1875rem; color:var(--rubro); }
@media (max-width:800px){
  .w-autor-grade { grid-template-columns:1fr; }
  .w-autor-foto { max-width:320px; margin-inline:auto; }
}

/* ── 12. confrontar o caos ──────────────────────────────────────────────── */
.w-confronto-arte { margin:0 auto 2rem; max-width:787px; }
.w-confronto-arte img { width:100%; }
.btn-rubro {
  background:linear-gradient(145deg,#ff2d2d,var(--rubro) 60%,#a80000);
  color:#fff; border-color:#ff5a5a;
  box-shadow:0 0 22px rgba(255,0,0,.32);
}
.btn-rubro:hover { color:#fff; transform:translateY(-2px); box-shadow:0 0 32px rgba(255,0,0,.5); }

/* ── 13. contato ────────────────────────────────────────────────────────── */
.w-duvidas-livro { font-family:var(--display); font-size:1.25rem; color:var(--branco); margin:0 0 1.2rem; }
.btn-zap {
  background:linear-gradient(145deg,#5bd66a,#25d366 55%,#0f9d58);
  color:#04270f; border-color:#7ee88b;
  box-shadow:0 0 20px rgba(37,211,102,.26);
}
.btn-zap:hover { color:#04270f; transform:translateY(-2px); box-shadow:0 0 30px rgba(37,211,102,.42); }
.w-contato .w-titulo-insta { margin-top:3rem; }

/* ── 14. FAQ (cores do Wix) ─────────────────────────────────────────────── */
/* ── O FAQ — "o faq ta todo errado" (autor, 2026-08-22) ────────────────────
   MEDIDO no celular do Wix (planta de 320; a tela estica 1,172x):
     titulo    Cinzel 25/700 #F9C950 centrado      -> 29px de tela
     pergunta  Cinzel 16/700 #F9C950               -> 18,8px de tela
     resposta  15px BRANCO, JUSTIFICADO, lh 22,5   -> 17,6px de tela
     marcador  CHEVRON (v/^), nao "+"
     e a PRIMEIRA pergunta ja vem ABERTA, com a resposta a mostra
   O nosso tinha: titulo 20, pergunta 16, resposta 14 em BEGE alinhada a
   esquerda, marcador "+", tudo fechado e um risco de separacao em
   rgba(230,185,74,.1) — praticamente invisivel. As cores ja eram as certas;
   o tamanho, o alinhamento e o desenho do marcador e que nao eram. */
#faq .faq-item summary { font-family:var(--display); font-weight:700;
                         font-size:clamp(16px,5vw,20px); color:var(--ouro-claro); }
#faq .faq-item summary:hover { color:var(--gold-flare); }
#faq .faq-corpo { font-family:var(--display); font-size:clamp(14px,4.7vw,17px);
                  color:#FFFFFF; line-height:1.5; text-align:justify; }
#faq .faq-item { border-bottom:1px solid rgba(249,201,80,.55); }
#faq .faq { border-top:1px solid rgba(249,201,80,.55); }
/* o marcador do Wix e um CHEVRON desenhado, nao um sinal de mais. Duas bordas
   de um quadrado giradas 45 graus: vira seta para baixo; -135 vira para cima. */
#faq .faq-item summary::after {
  content:""; position:absolute; right:.45rem; top:50%;
  width:9px; height:9px; border:0;
  border-right:2px solid var(--ouro-claro); border-bottom:2px solid var(--ouro-claro);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
#faq .faq-item[open] summary::after { transform:translateY(-25%) rotate(-135deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE BOTÃO DO WIX — medido no site no ar em 2026-08-22.
   NENHUM botão do Wix tem preenchimento. Todos sao pilula VAZADA:
   fundo transparente, borda de 4px, raio 50px, rotulo Cinzel na MESMA cor
   da borda. A 1ª versao fez blocos dourados com gradiente — o oposto exato.
   Ver `_captura/PLANTA-WIX.md` § SISTEMA DE BOTAO.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Cinzel',var(--display),serif;
  font-weight:400; font-size:18px; letter-spacing:normal; text-transform:none;
  padding:.7rem 1.9rem; cursor:pointer; text-align:center;
  background:transparent !important;
  border:4px solid var(--btn-cor);
  border-radius:50px;
  color:var(--btn-cor);
  box-shadow:none;
  transition:box-shadow .18s ease, background-color .18s ease;
}
/* as tres cores medidas, uma por seção */
.btn-gelo   { --btn-cor:#95E4FF; }
.btn-ouro   { --btn-cor:#F9C950; font-size:25px; font-weight:700; }
.btn-rubro  { --btn-cor:#FF0000; font-size:25px; font-weight:700; }
/* o hero e o comparativo usam o azul-gelo em 18/400 */
.btn-gelo, .btn-fantasma { font-size:18px; font-weight:400; }
.btn-fantasma { --btn-cor:#95E4FF; }
.btn-zap { --btn-cor:#fff; font-size:20px; font-weight:400; border-width:0; text-decoration:underline; }

.btn:hover { background:color-mix(in srgb, var(--btn-cor) 12%, transparent) !important;
             box-shadow:0 0 26px color-mix(in srgb, var(--btn-cor) 34%, transparent); }
.btn:focus-visible { outline:2px solid var(--btn-cor); outline-offset:4px; }

/* caixas medidas no Wix (a 1440) */
.btn-hero   { min-width:261px; min-height:94px; }
.btn-compra { min-width:207px; min-height:44px; }
.btn-grande { min-width:199px; min-height:71px; }
.btn-preco  { min-width:191px; min-height:43px; }
.btn-adquirir { min-width:244px; min-height:71px; }
.btn-largo  { width:100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   GALERIAS — as tres do Wix. Medidas: hero 559x438, skoob 722x608,
   artes 210x210 redondas sangrando nas duas bordas.
   ═══════════════════════════════════════════════════════════════════════════ */
.w-galeria { position:relative; margin:0 auto; max-width:var(--gal-larg,559px); }
.gal-palco { position:relative; aspect-ratio:var(--gal-prop,559/438); overflow:hidden; }
.gal-slide { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; pointer-events:none; }
.gal-slide.e-ativo { opacity:1; pointer-events:auto; }
/* ⚠ PREENCHER, nao CABER. No Wix as fotos da galeria sao servidas ja cortadas
   no tamanho do palco (`fill/w_559,h_438,fp_0.51_0.53`) — elas TAPAM a caixa.
   Com `contain` as nossas entravam inteiras e sobrava palco preto: 22% na 1a e
   47% na 5a, o livro 21% menor que no site do autor. O corte segue o ponto
   focal do Wix, que vai por foto no `object-position` (ver pag-home). */
.gal-slide picture, .gal-slide img { display:block; width:100%; height:100%; object-fit:cover; }

/* a seta do Wix e um chevron fino, sem caixa */
.gal-seta {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:64px; border:0; background:transparent; cursor:pointer;
  color:#fff; opacity:.85; padding:0;
}
.gal-seta:hover { opacity:1; }
.gal-seta svg { width:100%; height:100%; }
.gal-seta.e-ant { left:-34px; } .gal-seta.e-prox { right:-34px; }

/* a fita de miniaturas */
.gal-fita { display:flex; gap:8px; justify-content:center; margin-top:8px; flex-wrap:nowrap; }
.gal-mini {
  border:0; padding:0; background:transparent; cursor:pointer; line-height:0;
  opacity:.62; transition:opacity .18s ease, outline-color .18s ease;
  outline:2px solid transparent; outline-offset:2px; flex:0 0 auto;
}
.gal-mini.e-ativo, .gal-mini:hover { opacity:1; }
.gal-mini.e-ativo { outline-color:var(--gelo,#95E4FF); }
.gal-mini img, .gal-mini picture { display:block; width:100%; height:100%; object-fit:cover; }
.gal-mini { width:var(--mini-l,78px); height:var(--mini-a,62px); }

/* ── a esteira redonda das artes ─────────────────────────────────────────── */
.esteira { position:relative; }
.est-pista {
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 24px; scrollbar-width:none; -ms-overflow-style:none;
}
.est-pista::-webkit-scrollbar { display:none; }
/* ⚠ `<figure>` NASCE COM MARGEM: 1em em cima/embaixo e 40px de cada lado, por
   conta do navegador. Ninguem escreveu isso, e mesmo assim eram 80px a mais
   entre uma arte e outra — o carrossel mostrava 2 artes onde o Wix mostra 3,5
   (celular) e 5 onde ele mostra 6 (computador). O vao e o `gap`, e mais nada. */
.est-item { flex:0 0 210px; scroll-snap-align:center; margin:0; }
.est-item picture, .est-item img {
  display:block; width:210px; height:210px; object-fit:cover;
  border-radius:50%;                     /* ★ no Wix as artes sao REDONDAS */
}
.esteira .gal-seta.e-ant  { left:6px; }
.esteira .gal-seta.e-prox { right:6px; }

@media (max-width:920px){
  .gal-seta.e-ant{left:2px} .gal-seta.e-prox{right:2px}
  /* a CAIXA continua com 44px de alvo de toque; quem encolhe e o chevron
     desenhado dentro dela. Antes a caixa media 34 e o dedo errava. */
  .gal-seta{width:44px;height:50px}
  .gal-seta svg{width:34px;height:44px;margin:0 auto;display:block}
}
@media (max-width:600px){
  /* ⚠ aqui havia `.est-item{flex:0 0 150px}` e `img{width:150px;height:150px}`
     que o bloco de 760 ja derrubava (ele vem depois e tem mais forca). CSS
     morto que contradiz o vivo foi exatamente o que escondeu a arte OVAL. */
  .gal-mini{width:58px;height:46px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PECAS QUE FALTAVAM — todas medidas no Wix, nao inventadas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 HERO — a galeria fica sozinha no centro, com o botao embaixo */
.w-hero-in { display:block; text-align:center; }
.w-hero-cta { margin:2.2rem 0 0; }

/* 2 SINOPSE — "SINOPSE" e alinhado a ESQUERDA no Wix, nao centrado */
.w-sinopse .w-titulo { text-align:left; }
.w-links { display:flex; align-items:flex-start; justify-content:space-between;
           gap:2rem; margin:2.4rem 0 0; flex-wrap:wrap; }
.w-link-col { flex:1 1 180px; text-align:center; margin:0; }
.w-link-col a { font-size:20px; color:var(--ciano,#3FC9F9); text-decoration:underline; }
.w-link-ico { display:block; margin:.8rem auto 0; width:54px; }
.w-link-ico img, .w-link-ico picture { display:block; width:100%; height:auto; }
/* o disco azul sob "Ler Online" — no Wix e um SVG do editor; aqui e desenhado */
.w-link-ico-online { width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #bfeeff 0 18%, #3FC9F9 30%, #0a4a66 62%, #041d29 100%);
  box-shadow:0 0 16px rgba(63,201,249,.45); }
.w-selo-16 { flex:0 0 75px; margin:0; }
.w-selo-16 img, .w-selo-16 picture { display:block; width:75px; height:auto; }

/* 3 a faixa de video em tela cheia */
.w-faixa { line-height:0; }
.w-faixa-video { display:block; width:100%; height:auto; object-fit:cover; }

/* 5 LIVRO FISICO DIVINO — fundo em video + o video vertical */
.w-fundo-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.w-divino-video { margin:1.6rem auto; max-width:356px; }
.w-divino-video video { display:block; width:100%; height:auto; border-radius:2px; }

/* 7 ARTES — as estrelas e o selo 16 acima da esteira */
.w-artes-selos { display:flex; align-items:center; justify-content:center;
                 gap:1.4rem; margin:1.2rem 0 1.6rem; }
.w-estrelas { width:140px; } .w-estrelas img, .w-estrelas picture { display:block; width:100%; height:auto; }
.w-selo-16-peq { width:46px; } .w-selo-16-peq img, .w-selo-16-peq picture { display:block; width:100%; height:auto; }
/* a esteira sangra ate a borda da tela, como no Wix */
#artes .esteira { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; }

/* 10 COMBOS — a figurinha extra do combo 01 */
.w-combo-extra { width:108px; margin:.6rem auto 0; }
.w-combo-extra img, .w-combo-extra picture { display:block; width:100%; height:auto; }

/* 13 CONTATO — o icone do WhatsApp */
.w-zap-ico { width:59px; margin:0 auto 1rem; }
.w-zap-ico img, .w-zap-ico picture { display:block; width:100%; height:auto; }

@media (max-width:700px){
  .w-links{gap:1rem}
  .w-selo-16{flex:0 0 58px}.w-selo-16 img,.w-selo-16 picture{width:58px}
  .w-link-col a{font-size:17px}
}

/* ── ajuste fino das caixas: a altura vem da medida, nao do padding ──────── */
.btn { align-self:center; padding:.35rem 1.6rem; line-height:1.1; box-sizing:border-box; }
.btn-hero     { width:261px; height:94px; }
.btn-compra   { width:207px; height:44px; padding:.2rem 1rem; }
.btn-grande   { width:199px; height:71px; }
.btn-preco    { width:191px; height:43px; padding:.2rem .8rem; }
.btn-adquirir { width:244px; height:71px; }
/* "VER + Opcoes de Prints" e 358x43 no Wix */
#comprar .btn-ouro:not(.btn-preco) { width:358px; height:43px; padding:.2rem .8rem; font-size:25px; }
/* o par livro/ebook nao pode esticar dentro da coluna */
.w-comparativo .w-col { align-items:center; }
.w-comparativo .btn { flex:0 0 auto; align-self:center; }
/* ── OS BOTOES DO CELULAR — o autor: "voce esta com vicio em fazer botoes
   IMENSOS" ────────────────────────────────────────────────────────────────
   MEDIDO no celular do Wix (`--movel`, planta de 320, que a tela estica em
   1,172x). Ele so tem DUAS alturas de botao no celular inteiro:

     33px (=39 de tela): hero COMPRAR!(173) · combo COMPRAR(117) · Adquirir
                         Ebook(117)                       — rotulo Cinzel 10
     42px (=49 de tela): GOSTEI!(181) · COMPRAR! do acabamento(172) ·
                         preco(120) · VER + Opcoes(171) · ADQUIRIR!(130)
                                                          — rotulo Cinzel 12
   Borda 3px em todos (=3,5 de tela), pilula de raio 50.

   O nosso hero estava 261x74 — **2,2x a altura do dele** — e os grandes em 60.
   As medidas de computador (94, 71, 44...) continuam intactas: aquelas foram
   casadas no pixel a 1440 e nao se mexe. */
@media (max-width:760px){
  .btn { border-width:3.5px; padding:.3rem 1.1rem; font-size:14px; }
  .btn-hero    { min-width:0; width:203px;  height:39px; min-height:0; font-size:11.7px; }
  .btn-compra  { min-width:0; width:137px;  height:39px; min-height:0; font-size:11.7px; }
  .btn-grande, .btn-adquirir, .btn-ouro, .btn-rubro, .btn-fantasma {
                 min-width:0; height:49px; min-height:0; font-size:14px; }
  .btn-grande  { width:200px; }
  .btn-adquirir{ width:152px; }
  .btn-preco   { min-width:0; width:141px; height:49px; min-height:0; font-size:14px; }
  #comprar .btn-ouro:not(.btn-preco) { width:auto; max-width:100%; height:49px; font-size:14px; }
}

/* ⚠ AQUI HAVIA UM SEGUNDO BLOCO DE 600px repetindo as caixas do hero, do
   "VER + Opcoes" e do combo — e, por vir DEPOIS, ele derrubava calado o
   sistema de botao do celular la de cima (mesma especificidade, quem vem
   depois ganha). O botao continuava com 74px de altura mesmo depois de eu
   escrever 39. As medidas do celular agora moram num lugar so:
   § OS BOTOES DO CELULAR. */
@media (max-width:760px){
  #comprar .btn-ouro:not(.btn-preco) { width:min(358px,90vw); }
}

/* ── 3. a faixa de video tem altura FIXA no Wix (1425x875), nao a do arquivo ── */
.w-faixa { position:relative; width:100%; aspect-ratio:1425/875; overflow:hidden; }
.w-faixa-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ── 6. a moldura art-deco: o texto mora DENTRO do losango (como no Wix) ───
   ⚠ A FAIXA LIVRE DESTA ARTE E ESTREITA. No SVG (viewBox 13.5 37.4 173.3
   125.1) as duas reguas horizontais duplas ficam em y=82,9 e y=117,1: sobram
   34,2 de 125,1 — 27,3% da altura — e mais nada. Enquanto a caixa do texto
   tinha 230px, o titulo quebrava em DUAS linhas e o bloco passava de 90px numa
   faixa de 75: o resultado era o texto RISCADO pelas reguas de ouro, ilegivel,
   em 375 E em 1440. Nenhuma trava de geometria pega isso — so o print pega.
   No Wix o titulo e UMA linha de 358px dentro de uma caixa de 380: a caixa
   vale a moldura quase inteira. Aqui o `nowrap` + `min(23px, 5.7vw)` garante
   a linha unica em qualquer largura (o detector de vazamento do _shot.mjs
   acusa na hora se a conta furar). */
.w-moldura { position:relative; width:min(379px,100%); height:auto;
             aspect-ratio:379/274; margin:0 auto 1.4rem;
             display:grid; place-items:center; }
.w-moldura-arte { position:absolute; inset:0; width:100%; height:100%; }
.w-moldura-txt { position:relative; z-index:2; width:98%; text-align:center; }
.w-moldura-txt .w-titulo-ouro { margin:0; font-size:min(23px,5.4vw); line-height:1.1;
                                white-space:nowrap; }
.w-moldura-txt .w-subtitulo-ouro { margin:.25rem 0 0; font-size:13px; line-height:1.18; }

/* ── 13. o feed do Instagram — a caixa do Wix era 980x1036 ───────────────── */
.w-feed { display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
          width:min(980px,100%); margin:1.8rem auto 2rem; }
.w-feed-item { position:relative; display:block; aspect-ratio:1; overflow:hidden;
               border:1px solid rgba(149,228,255,.18); background:#05070a; }
.w-feed-item picture, .w-feed-item img { display:block; width:100%; height:100%; object-fit:cover;
               transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.w-feed-item:hover img { transform:scale(1.06); }
.w-feed-leg { position:absolute; inset:auto 0 0 0; padding:.5rem .6rem;
              font-family:'Cinzel',var(--display),serif; font-size:11px; line-height:1.25; color:#fff;
              background:linear-gradient(transparent,rgba(0,0,0,.82) 55%);
              opacity:0; transition:opacity .22s ease; }
.w-feed-item:hover .w-feed-leg, .w-feed-item:focus-visible .w-feed-leg { opacity:1; }
.w-feed-item:focus-visible { outline:2px solid #95E4FF; outline-offset:2px; }
/* ── o cantinho de REEL ────────────────────────────────────────────────────
   Com a grade DE VERDADE no lugar das nove fotos escolhidas a dedo, os quadros
   deixaram de ser todos iguais: tres deles sao reel (video). O Instagram marca
   isso no canto, e sem a marca o visitante clica esperando foto e cai num
   video. E o desenho da propria casa: um triangulo de "tocar", nada importado. */
.w-feed-item.e-reel::after {
  content:''; position:absolute; top:7px; right:7px; width:0; height:0;
  border-left:9px solid rgba(255,255,255,.92);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
  pointer-events:none;
}
@media (max-width:620px){ .w-feed{grid-template-columns:repeat(3,1fr);gap:5px} .w-feed-leg{display:none} }

/* ── 11. AUTOR — no Wix as fotos sao EMPILHADAS (selo 218 em cima, foto
   360x640 embaixo), nao lado a lado. Medido: selo em y=188, foto em y=684. ── */
.w-autor-grade { display:block; text-align:center; }
/* ⚠ O VIDEO DA "NOSSA HISTORIA HEROICA" TEM CANTO REDONDO — o autor: *"no
   site wix o video e com bordas arredondadas, fica mais bonito, no site que
   voce fez ta feio, truncado"*. E estava: 5px de raio, ou seja, quina viva.
   MEDIDO no Wix: e o UNICO elemento da pagina inteira com canto arredondado
   que nao e circulo — 280x498 com **border-radius:55px**, isto e 19,6% da
   largura. Em fracao, porque a caixa dele (280 de 320) e a nossa (323 de 375)
   nao tem o mesmo tamanho: copiar "55px" cru daria um canto menor que o dele.
   O `overflow:hidden` da figura e que faz o video obedecer ao raio. */
.w-autor-foto { margin:2rem auto 0; width:360px; max-width:86vw;
                border:0; border-radius:0; overflow:visible; box-shadow:none; }
/* o raio vai na MIDIA, nao na figura: a figura carrega tambem o "Clique para
   assistir" embaixo, e arredondar a figura inteira comeria as pontas da
   legenda. `min(...)` porque a caixa e `min(360px, 86vw)` — 19,6% dela. */
.w-autor-foto img, .w-autor-foto picture, .w-autor-foto video {
  display:block; width:100%; height:auto;
  border-radius:min(70.7px, 16.9vw); overflow:hidden;
}
.w-autor-txt { max-width:720px; margin:0 auto; }
.w-autor-selo { width:218px; margin:0 auto 1.2rem; }
.w-autor-selo img, .w-autor-selo picture { display:block; width:100%; height:auto;
  border-radius:50%; }   /* no site dele a foto e um circulo (medido: 50%) */

/* ── 14. FAQ — as perguntas sao caixas de 890x74 no Wix ─────────────────── */
#faq .faq-item summary { min-height:74px; display:flex; align-items:center; }
#faq .faq-item { max-width:890px; margin-left:auto; margin-right:auto; }

/* ── 7. ARTES — o depoimento e o texto vinham grandes demais ────────────── */
#artes .w-depoimento { font-family:'Times New Roman',Times,serif; font-size:15px; color:#F9C950;
                       max-width:900px; margin:1.6rem auto; }
#artes .w-corpo { font-size:13px; }

/* ── 2. SINOPSE — o corpo do Wix e Cinzel 13, mais compacto ─────────────── */
.w-sinopse .w-corpo p { margin:.7rem 0; }

/* ── 2. SINOPSE — o corpo do Wix: Cinzel 16 / 20.8 / coluna 1155 / justificado ── */
.w-sinopse .w-sobre { max-width:1155px; }
.w-sinopse .w-corpo p { font-family:'Cinzel',var(--display),serif; font-size:16px; line-height:20.8px;
                        text-align:justify; color:#95E4FF; margin:.9rem 0; }
.w-sinopse .w-pergunta { font-family:'Cinzel',var(--display),serif; font-size:16px; line-height:20.8px; }
/* ── 7. as estrelas sao 140x34 no Wix (o arquivo cortado ja tem essa proporcao) ── */
.w-estrelas img, .w-estrelas picture img { height:34px; width:140px; object-fit:contain; }
.w-artes-selos { align-items:center; }

/* ═══════════════════════════════════════════════════════════════════════════
   FUNDO UNIFICADO — a pele VANTAGOLD do theautor.com, para o site inteiro.
   Antes cada secao carregava a propria imagem de fundo do Wix (o ceu estrelado
   `f6f0fda`, o `ba5c6640`, o `734cc52f`). Saiu tudo: agora o fundo e UM so,
   preto absoluto + o ceu de constelacoes do theautor (`ceu.js`), que e o
   mesmo motor. Skin se copia, nunca se inventa.
   ═══════════════════════════════════════════════════════════════════════════ */
html, body { background:var(--bg0); }
#sky { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
header, main, footer { position:relative; z-index:1; }
/* as secoes ficam transparentes para o ceu passar por baixo */
.w-sec, .w-hero, .w-faixa { background:transparent; }
.w-sec::before, .w-hero::before { content:none; }
/* a faixa de video e a unica que continua opaca (e uma pecas de tela cheia) */
.w-faixa { background:#000; }

/* ── A SECAO ESPECIAL TEM FUNDO PROPRIO — a arte da CONTRACAPA ─────────────
   O autor, comparando os dois no celular: *"e muito mais bonito no site,
   principalmente pq enquadra a contracapa"* — e depois, com todas as letras,
   *"no pedido de numero 4 pedi para voce colocar o mesmo background daquela
   sessao"*. A unificacao do fundo (preto + constelacoes) tinha derrubado esta.
   MEDIDO no Wix: mesmo arquivo (`6ea25feb…`, 720x1280), `background-position:
   50% 0%`, TAMANHO NATURAL (`auto`, sem esticar) e repeticao — no computador a
   arte de 720 LADRILHA a tela de 1440.
   ⚠ O arquivo traz a assinatura "@legadogrego" queimada em y~1200, e a marca
   nao vale mais. O Wix escondia recortando no servidor (`crop/…h_974`); aqui o
   corte esta no ARQUIVO (`edc-fundo-especial.webp`, 720x1059, feito com
   `_corta-png.mjs`), que e o unico jeito de ela nao poder voltar sozinha. */
#edicoes {
  background-image:url("/assets/img/edc-fundo-especial.webp");
  background-position:50% 0;
  /* ⚠ `auto` (tamanho natural, como o Wix serve) NAO funciona aqui, e a razao
     e concreta: a arte tem 1059px de altura fixa, entao a faixa clara das
     rosas cai sempre no MESMO y — e e exatamente onde mora a citacao da
     ilustradora. Dar respiro no pe da secao nao separa os dois: empurra o
     fundo da secao, nao a arte. Com `auto 100%` a arte acompanha a altura da
     secao, as rosas descem junto com o pe e a citacao fica no escuro.
     (No Wix a conta fecha sozinha porque cada crop dele tem exatamente a
     altura da secao — ele faz no servidor o que aqui se faz no CSS.) */
  background-size:auto 100%;
  background-repeat:repeat-x;      /* ladrilha na LARGURA, nunca na altura */
  /* o mesmo respiro do celular, pela mesma razao: no computador a citacao da
     ilustradora terminava a 92% da altura, em cima da cesta de rosas — a
     parte mais clara da arte. Com o respiro ela termina a ~73%, que e onde
     ela termina no Wix. */
  padding-bottom:calc(clamp(3rem,7vw,5.5rem) + 230px);
}
/* No CELULAR a arte entra INTEIRA na altura da secao: `auto 100%`. E o que
   "enquadrar a contracapa" quer dizer — a cesta de rosas do pe da arte tem de
   aparecer, e ela e o assunto. No Wix a conta fecha sozinha porque a secao
   dele tem exatamente a altura do recorte (1059); a nossa ficou mais compacta
   (1012 depois da grade fechar), entao o ajuste e pela ALTURA, nao pelo zoom. */
@media (max-width:760px){
  #edicoes { background-repeat:no-repeat;
             /* ⚠ o TERCO DE BAIXO desta secao e so arte — e de proposito.
                No Wix a citacao da ilustradora termina a 73% da altura e a
                cesta de rosas fica sozinha embaixo. Sem este respiro a
                citacao cai EM CIMA da cesta (a parte mais clara da arte) e
                fica ilegivel: foi o que aconteceu na 1a tentativa. */
             padding-bottom:290px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELULAR — o Wix nao so encolhe: ele REORDENA as secoes e derruba uma.
   Medido no ar a 320 (o Wix forca 320 e escala; nos usamos a largura real).

   Ordem do Wix no celular:
     hero, sinopse, arte, LIVRO DIVINO, SKOOB, ESPECIAL, artes,
     arquitetura, combos, autor, confronto, contato, faq
   (o bloco dos 14 selos SOME no celular dele — aqui ele fica, so desce:
    derrubar conteudo no celular custa leitura e busca, e ele e bom.)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  main { display:flex; flex-direction:column; }
  .w-hero        { order:1; }
  #sinopse       { order:2; }
  .w-faixa       { order:3; }
  .w-divino      { order:4; }   /* sobe: no Wix vem antes do Skoob */
  #skoob         { order:5; }
  #edicoes       { order:6; }   /* sobe da 8a para a 6a, como no Wix */
  #artes         { order:7; }
  #universo      { order:8; }
  #arquitetura   { order:9; }
  #comprar       { order:10; }
  #autor         { order:11; }
  .w-confronto   { order:12; }
  .w-contato     { order:13; }
  #faq           { order:14; }

  /* ── compactacao: a versao anterior ficava 78% mais alta que a do Wix ── */
  .w-sec { padding-top:2.2rem; padding-bottom:2.2rem; }
  .w-titulo-grande { font-size:30px; }
  .w-titulo, .w-titulo-rubro { font-size:24px; }
  /* ── A SINOPSE, medida contra o celular do Wix (320 de planta, 2026-08-22) ──
     ⚠ A SESSAO ANTERIOR SE AFASTOU DELE DE PROPOSITO — e o autor viu.
     Ela deixou o corpo em 12px "porque 9,4 esta abaixo da regua de 12 da
     casa". Ele comparou os dois no celular e disse: *"Sinopse, tamanho das
     letras e organizacao no app wix e bem melhor"*. Entao vale a planta dele.

     A planta do Wix (320), com os y medidos:
       y487 botao COMPRAR! ·  y520 TOCADOR ·  y566 nota (Cinzel 7, ESQUERDA)
       y593 SINOPSE (12) ·  y623 corpo (Cinzel 8 / 10.4 / JUSTIFICADO)
     Ou seja a ORDEM dele e: tocador -> nota -> titulo -> texto. A nossa era
     titulo -> nota -> tocador -> texto, com o titulo em 24px (o dele da 14 de
     tela) — e a secao inteira saia 859px de altura contra 540 dele.

     As medidas vao em `vw` porque a pagina dele e desenhada a 320 e ESTICADA
     ate a largura real (1,172x a 375): 8/320 = 2,5vw devolve o mesmo tamanho
     RELATIVO em qualquer telefone, que e o que ele esta comparando. */
  .w-sinopse .w-corpo p, .w-sinopse .w-pergunta {
    font-size:clamp(8px,2.5vw,12px); line-height:1.3; text-align:justify; }
  .w-sinopse .w-corpo p { margin:.45rem 0; text-indent:1.6em; }
  .w-sinopse .w-pergunta { text-align:center; text-indent:0; }
  .w-sinopse .w-sobre { max-width:100%; }
  .w-sinopse .w-titulo { font-size:clamp(12px,3.75vw,20px); }   /* 12 de 320 */
  .w-sinopse .w-nota-audio { font-size:clamp(7px,2.19vw,11px);  /* 7 de 320 */
                             text-align:left; margin:.35rem 0 0; }

  /* os 3 quadrados da arquitetura ficam lado a lado (empilhados custavam ~750px) */
  .w-arq-tres { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .w-arq-tres figure { margin:0; }
  .w-arq-tres figcaption { font-size:11px; line-height:1.25; }
  .w-arq-grande { margin-bottom:1.2rem; }
  .w-arq-grande figcaption { font-size:14px; }

  /* o comparativo: 2 colunas so quando REALMENTE cabe. A 375 as colunas pediam
     251px cada (512 numa caixa de 345) e o overflow-x:hidden da secao ESCONDIA
     a coluna do Ebook — pior que rolar, porque some calado. */
  /* ⚠ sem vao no celular tambem: a grade do Wix e continua, com UM risco
     entre as colunas. Com 10px de vao ficavam duas tabelas separadas. */
  .w-comparativo { gap:0; }
  .w-comparativo > * { min-width:0; }
  .w-comparativo ul { font-size:14px; line-height:1.25; padding-left:0; list-style:none; }
  .w-comparativo li { margin:.35rem 0; }
  /* ⚠ `.w-comparativo ul{font-size}` NAO chega no <li>: `.w-col li` (0,1,1)
     ganha de `.w-comparativo ul` (0,1,0) e o <li> ficava nos 16px do
     computador. Media: 16px contra os 14 dele — e a linha "Estoque ilimitado
     e gratuito..." saia com 136px de altura contra 63 dele. Era isso que o
     autor viu: *"a grade no wix e bem fechadinha, no nosso nao"*. */
  .w-comparativo > .w-col > ul > li { font-size:14px; line-height:1.25;
                                      padding:.42rem .45rem; }
  .w-col li small { font-size:10.5px; }                    /* 9 de 320 */
  .w-comparativo h3 { font-size:30px; }                    /* 26 de 320 */
  .w-comparativo > .w-col > .w-preco-gelo { font-size:14px; padding:.42rem .45rem; }
  .w-duvida { font-size:14px; }                            /* 12 de 320 */
  /* as duas fotos do Wix NAO tem o mesmo tamanho: 90x104 o livro, 122x137 o
     ebook (a moldura do tablet ja e maior por natureza) */
  .w-col:first-child  .w-col-foto img, .w-col:first-child  .w-col-foto picture { max-width:105px; margin:0 auto; }
  .w-col:last-child   .w-col-foto img, .w-col:last-child   .w-col-foto picture { max-width:143px; margin:0 auto; }
  .w-col-foto { margin-bottom:.7rem; }
  .w-col h3 { margin:0 0 .5rem; }

  /* combos: um embaixo do outro, mas sem desperdicio */
  .w-combo-par { display:grid; grid-template-columns:1fr; gap:1.6rem; }
  .w-combo-itens { font-size:13px; line-height:1.4; }
  .w-combo-fotos img, .w-combo-fotos picture { max-width:104px; }

  /* ── A ESTEIRA DAS ARTES mostrava 1,5 arte e a seta por cima ──────────────
     Medido no Wix: cada arte ocupa 26,6% da largura da tela e 85px de altura,
     e aparecem TRES e meia de uma vez — le-se como um carrossel. A nossa
     estava com 40% e 150px: cabiam duas, a segunda cortada ao meio pela borda
     com a seta em cima. Parecia quebrado, e era so tamanho. */
  /* ⚠ ESTA REGRA NAO ESTAVA PEGANDO, e o print mostrou: a arte redonda virava
     OVAL. Duas brigas de CSS ao mesmo tempo —
     (a) `.esteira img{height:auto}` derrubava o `height:150px` do bloco de 600
         (mesma forca, e esta vem depois): a foto ficava com a altura do
         ARQUIVO. Medido a 375: 150x137, 150x218 e 150x170 — tres ovais de
         tamanhos diferentes, com um vao morto embaixo da primeira;
     (b) a largura fixa de 150px na foto escorava a caixa por dentro, entao o
         `flex:0 0 26,6%` nunca valia: cabia 1,5 arte onde o Wix mostra 3,5.
     A foto agora acompanha a CAIXA e e quadrada por decreto (aspect-ratio),
     que e o que mantem o circulo redondo seja qual for o arquivo. */
  /* 26,6% da LARGURA DA TELA (85px nos 320 do Wix), nao da caixa ja com
     respiro — por isso `vw`: com % a arte saia 87px onde ele desenha 100. */
  .esteira .est-item, .est-pista > * { flex:0 0 26.6vw; min-width:0; }
  .esteira img, .esteira picture {
    width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
  .esteira .gal-seta { background:rgba(0,0,0,.55); border-radius:50%; }

  /* as legendas dos tres quadrados encostavam na borda da tela */
  .w-arq-tres figcaption { padding-inline:2px; }

  /* o feed do Instagram continua 3x3, so menor */
  .w-feed { gap:4px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELULAR — AS MEDIDAS DO ORIGINAL, conferidas seção a seção em 2026-08-22

   O Wix desenha o celular numa tela de **320** e deixa o aparelho ESTICAR ate
   375 (`<meta viewport width=320>`): tudo la e 17% maior do que o numero CSS
   sugere. Por isso a comparacao honesta e por PROPORCAO da largura da tela, e
   nao por pixel — e foi assim que estas medidas sairam.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── A ARTE INTEIRA era uma tirinha ───────────────────────────────────────
     Media 230px de altura contra 636px do original (equivalentes a 375): 36%.
     A peca de tela cheia da pagina tinha virado uma faixa de 28% do visor.
     O Wix nao usa a proporcao do arquivo (1425/875) no celular: ele RECORTA
     num retrato de 320x543. E o recorte que devolve o impacto. */
  .w-faixa { aspect-ratio:320/543; }

  /* ── O HERO: a capa sangra de borda a borda ───────────────────────────────
     No Wix a galeria ocupa 100% da largura da tela; a nossa parava em 92%
     (345 de 375). Agora encosta nas duas bordas, como la — a capa ganhou 22%
     de area e a secao ficou em 529px contra os 547 do original (3%).
     ⚠ CORRIGIDO em 2026-08-22 (madrugada), medindo o Wix de celular DE VERDADE
     (`--movel`): o quadro dele e QUADRADO (320x320) e a foto entra INTEIRA
     (`object-fit:contain`, sem os parametros de recorte que ele usa no
     computador). Ele nao corta nada no celular — quem estava cortando eramos
     nos: a nossa foto era quadrada (558x558) dentro de um palco 559/438, e o
     livro perdia 21% da altura. Palco quadrado + foto inteira: e o dele, e e
     tambem o que nao decepa foto de produto. */
  .w-hero .w-galeria { max-width:none; width:100vw;
                       margin-left:calc(50% - 50vw); }
  .w-hero .gal-palco { aspect-ratio:1/1; }
  .w-hero .gal-slide img, .w-hero .gal-slide picture { object-fit:contain; }

  /* ── A GALERIA TEM DE COBRIR A TELA, E AS MINIATURAS SAO GRANDES ──────────
     Apontado pelo autor: "a galeria cobre toda a tela no wix, no nosso app
     nao. Cards embaixo precisam ser maiores."
     MEDIDO no celular dele (`--movel`, viewport de 320): a fita e uma PISTA
     QUE ROLA de 100px de altura com miniaturas **90x90 QUADRADAS**, vao de 10,
     recuo de 5 nas pontas — cinco delas somam 495px numa caixa de 320, ou
     seja, ele mostra 3,2 e o resto vem arrastando.
     As nossas eram 58x46 (retangulares, todas espremidas na tela): 46 de 100,
     **menos da metade da altura dele**. Em fracao da tela: 90/320 = 28,1%.
     E o hero dele comeca em y=21, colado na greca — o nosso abria com 32px de
     recuo antes da foto. Recuo zero em cima: a foto encosta no cabecalho. */
  .w-hero { padding-top:0; }
  .w-hero .gal-fita {
    justify-content:flex-start;              /* como la: comeca na borda */
    gap:3.125vw;                             /* 10 de 320 */
    padding-inline:1.5625vw;                 /* 5 de 320 */
    margin-top:3.125vw;                      /* 10 de 320 (346-341) */
    overflow-x:auto; scroll-behavior:smooth;
    scrollbar-width:none; -ms-overflow-style:none;
    scroll-snap-type:x proximity;
  }
  .w-hero .gal-fita::-webkit-scrollbar { display:none; }
  .w-hero .gal-mini {
    width:28.125vw; height:28.125vw;         /* 90x90 de 320 — QUADRADA */
    scroll-snap-align:start;
  }

  /* ── COMBOS: o nome do combo vem ANTES das fotos ──────────────────────────
     No Wix "Combo 01" esta em y=60 e as fotos em y=101. Aqui as fotos vinham
     primeiro e o nome so aparecia 346px depois — o leitor via tres fotos sem
     saber de que combo eram. Ordem por CSS: o computador nao muda. */
  .w-combo { display:flex; flex-direction:column; }
  /* ⚠ AQUI HAVIA UMA ESCADA DE `order` para o nome do combo vir antes das
     fotos. Sumiu porque a ORDEM AGORA E A DO HTML (nome, fotos, lista, preco)
     — a mesma nas duas larguras, como no site dele. Regra de `order` e onde a
     especificidade mais morde: `.w-combo p` (0,1,1) ganhava de
     `.w-vai-receber` (0,1,0) e embaralhava a secao sem erro nenhum. */
  .w-combo { border-width:6px; }          /* no celular a moldura dele e 6px */
  .w-combo-extra { width:26%; }
  /* ⚠ A DEUSA E MAIS ALTA QUE O CASAL na mesma largura (153 contra 131 a 375),
     porque o desenho dela e mais esguio. Espelhando o casal em `bottom:6%`,
     o topo dela subia ate 8319 e o ultimo item da lista termina em 8361:
     media, ela comia a primeira letra de "Acesso VIP de Previa". Um pouco
     menor e um pouco mais baixa e ela passa a comecar DEPOIS do texto. */
  .w-combo-extra.e-esq { width:21%; bottom:3%; }

  /* ── CONFRONTAR O CAOS: o titulo vem ANTES da arte ────────────────────────
     Wix: titulo y=29, imagem y=61. O nosso abria pela imagem e so no fim
     dizia o que era. E a arte sangra ate as bordas, como la. */
  .w-confronto .wrap { display:flex; flex-direction:column; }
  .w-confronto .w-titulo-rubro { order:1; margin-top:0; }
  .w-confronto-arte { order:2; width:100vw; max-width:none;
                      margin-left:calc(50% - 50vw); }
  .w-confronto p { order:3; }

  /* ── OS BOTOES NAO CABIAM NA COLUNA — visto no print, nao na medida ───────
     `.btn-compra` carrega `min-width:207px`, que e a medida do Wix no
     COMPUTADOR (casamento no pixel, decisao fechada la). Numa coluna de 169px
     do comparativo os dois botoes estouravam e se sobrepunham: viravam uma
     barra atravessada, um por cima do outro. Nenhuma medida de secao acusou
     isso — a altura continuava certa. So o print mostrou.
     Dentro do comparativo o botao passa a caber na coluna. */
  /* ⚠ OS DOIS BOTOES ENCOSTAVAM UM NO OUTRO — apontado pelo autor: "esses
     botoes estao muito grandes, encostando um no outro".
     `width:100%` fazia cada um ocupar a coluna inteira (169px), e como as duas
     colunas da grade sao coladas (o risco do meio e UM so, de proposito), eles
     se tocavam no meio.
     MEDIDO no Wix: cada um tem 117 de 320 (36,56% da tela) e sobra um VAO DE
     65px entre eles. E eles nao sao centrados na coluna — encostam nas bordas
     de FORA: o da esquerda comeca em x14, o da direita termina em x313. E esse
     desencontro que abre o vao. */
  .w-comparativo .btn { min-width:0; width:36.56vw; font-size:11.7px; padding-inline:.4rem; }
  /* ⚠ `justify-self`, nao `align-self`: a coluna e um GRID
     (`grid-template-rows:subgrid`), e em grid o `align-self` manda no eixo
     VERTICAL. Com `align-self` os dois continuavam centrados e o vao ficou em
     35 em vez dos 76 dele. */
  .w-comparativo > .w-col:first-child  > .btn { justify-self:start; }
  .w-comparativo > .w-col:last-child   > .btn { justify-self:end; }

  /* ── "VER + Opcoes de Prints" vazava da propria pilula ────────────────────
     A culpa era de `#comprar .btn-ouro:not(.btn-preco)`, que trava a caixa em
     `width:358px; height:43px` — a medida do Wix no COMPUTADOR. A 375 o rotulo
     quebra em duas linhas dentro de uma altura travada e a segunda linha sai
     por baixo da borda. Seletor com ID pesa (1,2,0) e ganha de tudo: aqui ele
     precisa ser desfeito com o MESMO seletor, dentro da media. */
  #comprar .btn-ouro:not(.btn-preco) {
    width:auto; max-width:100%; height:auto; min-height:49px;   /* 42 de 320 */
    font-size:14px; padding:.55rem 1.1rem; line-height:1.2;
  }
  /* ⚠ 18px e 21px aqui eram os ultimos restos do vicio de botao grande: eles
     vinham DEPOIS do sistema do celular e o desfaziam calados. No Wix todo
     rotulo de botao do celular e Cinzel 12 (=14 de tela) — sem excecao. */
  .w-combos .btn-ouro { font-size:14px; }
  .btn-preco { font-size:14px; }
  .btn { max-width:100%; }

  /* ── ARQUITETURA: compactada, mas com as fotos que o Wix perde ────────────
     Media 1373px contra 476 do original — 2,9x. Mas o celular do Wix nao e
     regua aqui: la a secao mostra so titulo, paragrafo, um video de 293x180 e
     o botao. As DUAS fotos do miolo e os TRES quadrados (verniz, lombada,
     contracapa) simplesmente nao aparecem — e sao o argumento inteiro de uma
     secao chamada "Arquitetura Divina". Apagar prova de produto para bater
     numero nao se faz. Entao aperta-se o RESPIRO, nao a prova: o ar entre os
     blocos cai pela metade e o texto de fecho encolhe um ponto. A secao sai
     de 1373 para ~1160px com as duas fotos e os tres quadrados intactos.
     ⚠ Tentado e revertido: limitar a altura da foto com `max-height` +
     `width:auto`. Dentro de um <picture> isso colapsa a imagem para 2x2px —
     a largura vinha do elemento pai, e `auto` a jogou fora. Foto de miolo se
     encolhe pelo VAO, nunca por altura solta. */
  .w-arq-grande { margin:1.1rem 0 .8rem; }
  .w-ainda { margin:1.4rem 0 .9rem; }
  .w-arq-tres { margin-bottom:1.4rem; }
  /* ── OS TEXTOS DO ACABAMENTO — "esses textos podiam ser otimizados" ──────
     Os tres marcadores de ouro e o paragrafo da brochura saiam em 15px, num
     celular onde TODO o resto do site (e todo o resto do Wix) fala em 14.
     Sozinhos, ocupavam 260px de coluna logo abaixo do livro que gira — e
     roubavam a cena dele. Aqui vao para os mesmos 14 do resto. */
  #arquitetura .w-corpo { font-size:14px; line-height:1.4; }
  /* (os marcadores em si estao no `livro3d.css`, que carrega depois deste) */

  /* ── "nossa historia heroica" e VERMELHA e grande no Wix ──────────────────
     Medida la: Valdemar 22px (=25,8px de tela) em #FF0000. A nossa saia em
     Cinzel 14,4px cor de ouro — parecia um link de rodape, e no original e a
     chamada do video do autor. */
  .w-autor-txt .w-mais-prints {
    font-family:'Valdemar',var(--letreiro),serif; font-size:22px;
    color:#FF0000; text-align:center; display:block; text-decoration:none;
  }
}

/* ═══ TRES BLOCOS QUE SO EXISTEM NO CELULAR DO WIX ═════════════════════════
   Nao estavam na captura do computador (foi de la que este site foi montado),
   entao tinham passado batido. Medidos no DOM do celular em 2026-08-22.
   Entram nas duas larguras: e texto do autor, e esconder no computador seria
   escolha arbitraria — o Wix so nao os mostra la por acidente do editor.
   ═════════════════════════════════════════════════════════════════════════ */

/* "NAO USAMOS IA..." — Times 13 VERMELHO, centrado (Wix: fs13 #FF0000) */
.w-sem-ia { font-family:'Times New Roman',Times,serif; font-size:15px; line-height:1.3;
            color:#FF0000; text-align:center; max-width:34ch; margin:1.6rem auto 1.2rem; }

/* o depoimento da ilustradora — Cinzel 13/700 ciano, assinatura em Cormorant */
.w-depo-ilustra { margin:2rem auto 0; max-width:46ch; text-align:center;
                  font-family:'Cinzel',var(--display),serif; font-size:15px;
                  font-weight:700; line-height:1.4; color:#3FC9F9;
                  border:0; padding:0; quotes:none; }
.w-depo-ilustra cite { display:block; margin-top:.7rem; font-style:normal;
                       font-weight:700; font-size:14px;
                       font-family:'Cormorant Garamond',Georgia,serif; color:#3FC9F9; }

/* "Clique para assistir" sob a foto do autor — Cinzel 14 branco, centrado */
.w-assistir { font-family:'Cinzel',var(--display),serif; font-size:14px;
              color:#FFFFFF; text-align:center; margin-top:.7rem; }

/* ── piso de legibilidade: nada de texto visivel abaixo de 12px ──────────── */
.w-feed-leg { font-size:12px; }
@media (max-width:760px){
  .w-arq-tres figcaption { font-size:12px; }
  .w-moldura-txt .w-subtitulo-ouro { font-size:12px; }
}

/* ── area de toque: "Baixar 49 pgs" e "Ler Online" sao chamadas principais ─ */
.w-link-col a { display:inline-block; min-height:44px; line-height:34px; padding:.35rem .8rem; }
@media (max-width:760px){
  /* ⚠ SO O LINK QUE E CHAMADA ganha alvo de toque. `.w-autor-txt a` pegava
     TODO link do texto do autor, inclusive o "@valetius" no meio da frase —
     e um `inline-block` com 8px de recheio e entrelinha 34 INCHA A LINHA de
     dentro do paragrafo: media 34px onde o resto do paragrafo anda em 24,5.
     Era isso que abria os buracos entre as linhas 1, 2 e 3 e nao entre as
     outras. Link no meio de frase e inline, e ponto: a regra de alvo de
     toque de 44px nao alcanca texto corrido em norma nenhuma. */
  .w-mais-prints { display:inline-block; padding:.5rem 0; min-height:44px;
                   line-height:34px; }
}

/* ── celular: os dois links nas pontas e o selo "16" NO MEIO ──────────────
   MEDIDO no celular do Wix (planta de 320): "Baixar 49 pgs" em x23 e "Ler
   Online" em x210 na MESMA linha (y430), e o +16 (40x40) centrado em x141,
   y466 — no vao ENTRE os dois, nao acima deles. A versao anterior jogava o
   selo numa faixa propria de largura inteira (`grid-column:1/-1; order:-1`) e
   isso sozinho custava 189px onde o Wix gasta 96. */
@media (max-width:760px){
  /* 1,25rem quebrava "Baixar 49 pgs" em duas linhas assim que o selo passou a
     ocupar a coluna do meio: a coluna sobrou com 137px e o texto pedia 157.
     No Wix esse link mede 105 de planta (123 de tela) — 1rem cai certo. */
  .w-links { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
             gap:.4rem .5rem; justify-items:center; align-items:start; font-size:1rem; }
  /* o `.8rem` de folga lateral do link (posto ali para o alvo de toque) somava
     51px aos dois links e jogava "Ler Online" PARA FORA DA TELA assim que o
     selo passou a ocupar a coluna do meio. O alvo de 44px continua — ele vem
     da ALTURA (min-height + line-height), nao da folga horizontal. */
  .w-link-col a { white-space:nowrap; padding-left:0; padding-right:0; }
  .w-selo-16 { flex:none; align-self:end; }
  .w-selo-16 img, .w-selo-16 picture { width:52px; }
  .w-link-col { flex:none; }
  .w-link-ico { width:44px; }
  .w-link-ico-online { width:44px; height:44px; }
}

/* ── blindagem contra o defeito acima: filho de grade nunca tem largura minima
   de conteudo. Sem isto, uma lista longa estica a coluna e a secao recorta. ── */
.w-comparativo > *, .w-combo-par > *, .w-feed > *, .w-arq-tres > * { min-width:0; }
.w-comparativo li, .w-combo-itens li { overflow-wrap:anywhere; }

/* ── celular estreito: o comparativo CONTINUA em duas colunas ─────────────
   Empilhava aqui ate 2026-08-22, e era divergencia do original: medido no
   celular do Wix (320px), "Livro" e "Ebook" ficam LADO A LADO, cada spec em
   par na mesma linha ("Aguarde a entrega" x3,1% / "Acesso Imediato" x64,9%).
   Empilhado, a secao perde o unico motivo de existir: COMPARAR. O medo que
   empilhou era o overflow — resolvido antes por minmax(0,1fr) + min-width:0,
   entao a coluna nao estica mais. A 375 sobram 167px por coluna. */
/* ⚠ AQUI HAVIA UM BLOCO DE 560px repetindo `gap:0 8px` e `max-width:88px` nas
   fotos — e, por vir depois, ele desfazia calado a grade colada e o tamanho
   das fotos medidos acima. Mesma armadilha dos botoes. */
/* ── o titulo do Skoob em 3 linhas precisava de ar ───────────────────────── */
@media (max-width:760px){ #skoob .w-titulo { line-height:1.25; } }

/* ── 6. os selos: 7 COLUNAS x 2 LINHAS, como no Wix (nao um rio que quebra) ── */
.w-selos { display:grid; grid-template-columns:repeat(7,1fr); gap:1.4rem .6rem;
           list-style:none; padding:0; margin:1.4rem auto 0; max-width:1138px; }
.w-selos li { margin:0; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.w-selo-ico { display:block; height:105px; }
.w-selo-ico img, .w-selo-ico picture { display:block; height:105px; width:auto; object-fit:contain; }
.w-selo-rot { font-family:'Cinzel',var(--display),serif; font-size:13px; line-height:1.2;
              color:#F9C950; text-align:center; }
@media (max-width:900px){ .w-selos{grid-template-columns:repeat(4,1fr);gap:1.2rem .5rem} }
@media (max-width:520px){
  .w-selos{grid-template-columns:repeat(3,1fr)}
  .w-selo-ico, .w-selo-ico img, .w-selo-ico picture { height:72px; }
  .w-selo-rot{font-size:12px}
}

/* ── o player de narracao, quando o MP3 chegar ───────────────────────────── */
.w-audio audio { width:min(250px,100%); height:38px; vertical-align:middle; }

/* o topo da sinopse: titulo a esquerda, nota + player a direita (planta do Wix) */
.w-sinopse-topo {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.6rem; flex-wrap:wrap; margin-bottom:1.8rem;
}
.w-sinopse-topo .w-titulo { margin:0; }
.w-audio-caixa { text-align:right; }
.w-audio-caixa .w-nota-audio { margin:0 0 .3rem; }
@media (max-width:760px){
  /* no celular a linha nao cabe: vira empilhado e centrado, como todo o resto.
     O respiro ate o corpo era 1,8rem (28,8px); no Wix o titulo termina em y141
     e o texto comeca em y156 — 15 de planta, 17,6 de tela. */
  .w-sinopse-topo { flex-direction:column; align-items:center; text-align:center;
                    gap:.7rem; margin-bottom:.9rem; }
  .w-sinopse-topo .w-titulo { text-align:center; }
  .w-audio-caixa { text-align:center; }

  /* ── A ORDEM DELE: tocador, nota, titulo (medida acima, y520/566/593) ──────
     `order` nao muda o HTML: quem le com leitor de tela continua ouvindo
     SINOPSE antes do texto. E o `order` do computador nao existe — la a linha
     e titulo-a-esquerda / player-a-direita, casada no pixel a 1440. */
  .w-sinopse-topo .w-audio-caixa { order:1; display:flex; flex-direction:column;
                                   width:100%; }
  .w-sinopse-topo .w-titulo      { order:2; }
  .w-audio-caixa .w-audio        { order:1; }
  .w-audio-caixa .w-nota-audio   { order:2; }
}