/* ==========================================================================
   O LEITOR DOS LIVROS: ESPAÇO PARA LER
   Só a tipografia e os espaços mudam aqui; o texto dos livros é o que está
   em dados/livros/*.json, sem uma vírgula a menos.

   A regra é a de um leitor de e-book: coluna de leitura de 640px (uns 68
   caracteres por linha), corpo de 19,5px em serifa, entrelinha de 1,75,
   parágrafos separados por espaço em vez de recuo, e mais ar antes de cada
   subtítulo do que depois. Alinhado à esquerda: o justificado abre rios
   entre as palavras em coluna estreita, principalmente no celular.
   ========================================================================== */
.zp .leitor__corpo{ max-width:640px; }
.zp .leitura p{
  font-size:19.5px; line-height:1.75; color:#1a1a17;
  text-align:left; text-indent:0; margin:0 0 1.15em;
  -webkit-hyphens:manual; -ms-hyphens:manual; hyphens:manual;
}
.zp .leitura__cab{ margin-bottom:40px; }
.zp .leitura__titulo{ line-height:1.12; margin-bottom:18px; }
.zp .leitura__chamada{ line-height:1.5; }
.zp .leitura .leitura__h2{ font-size:28px; line-height:1.15; margin:64px 0 22px; }
.zp .leitura .leitura__h3{ margin:44px 0 16px; line-height:1.2; }
.zp .leitura .leitura__destaque{ margin:40px 0; padding:24px 28px; }
.zp .leitura .leitura__destaque p{ font-size:23px; line-height:1.28; }
.zp .leitura .leitura__lista{ margin:0 0 1.4em; }
.zp .leitura .leitura__lista li{ font-size:19px; line-height:1.7; padding-bottom:10px; }
.zp .leitura__nav{ margin-top:64px; }

@media (max-width:640px){
  .zp .leitura p{ font-size:18.5px; line-height:1.72; margin-bottom:1.1em; }
  .zp .leitura .leitura__h2{ font-size:24px; margin:52px 0 18px; }
  .zp .leitura .leitura__destaque p{ font-size:20px; }
  .zp .leitura .leitura__lista li{ font-size:18px; }
}

/* as imagens dentro do capítulo: banners dos arquétipos, estilos de marca,
   as marcas fracas. Largura da coluna, cantos suaves, legenda pequena. */
.zp .leitura .leitura__figura{ margin:34px 0 38px; padding:0; }
.zp .leitura .leitura__figura img{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.10); }
.zp .leitura .leitura__figura figcaption{ margin-top:10px; font-size:13px; letter-spacing:.4px; text-transform:uppercase; font-weight:700; color:#7a7a72; }
@media (max-width:640px){ .zp .leitura .leitura__figura{ margin:26px 0 30px; } .zp .leitura .leitura__figura img{ border-radius:10px; } }

/* ---- O tabuleiro animado (Encontre um Meio, capítulo 1) ---- */
.zp .leitura .leitura__xadrez{ margin:34px 0 14px; padding:18px 18px 16px; background:#111; border-radius:18px; color:#f3f3ee; box-shadow:0 14px 40px rgba(0,0,0,.18); }
.zp .leitura .xadrez__cab{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:12px; margin:-18px -18px 16px; padding:0 18px; height:76px; box-sizing:border-box; background:#feec34; border-radius:18px 18px 0 0; }
.zp .leitura .xadrez__titulo{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:12px; min-width:0; }
.zp .leitura .xadrez__icone{ -ms-flex:none; flex:none; width:46px; height:46px; border-radius:12px; background:#111; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.zp .leitura .xadrez__icone svg{ width:34px; height:38px; display:block; }
.zp .leitura .xadrez__icone .xz-fig{ fill:#fff; stroke:#fff; stroke-width:8; stroke-linejoin:round; }
.zp .leitura .xadrez__textos{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; min-width:0; }
.zp .leitura .xadrez__nome{ font-family:'Anton', Impact, sans-serif; font-size:26px; line-height:1; letter-spacing:.4px; text-transform:uppercase; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zp .leitura .xadrez__sub{ font-size:11.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:#5a5a1a; margin-top:4px; }
.zp .leitura .xadrez__rotulo{ position:relative; display:block; margin:0 0 14px; padding:12px 14px 12px 40px; min-height:2.9em; border-radius:12px; background:#feec34; color:#111; font-size:14px; font-weight:700; line-height:1.4; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.zp .leitura .xadrez__rotulo::before{ content:'👉'; position:absolute; left:13px; top:11px; font-size:17px; }
.zp .leitura .xadrez--ok .xadrez__rotulo{ background:#27ae60; color:#fff; } .zp .leitura .xadrez--ok .xadrez__rotulo::before{ content:'✅'; }
.zp .leitura .xadrez--cap .xadrez__rotulo{ background:#e74c3c; color:#fff; } .zp .leitura .xadrez--cap .xadrez__rotulo::before{ content:'⚠️'; }
.zp .leitura .xadrez--nao .xadrez__rotulo{ background:#3a3a38; color:#f3f3ee; } .zp .leitura .xadrez--nao .xadrez__rotulo::before{ content:'✋'; }
.zp .leitura .xadrez__rotulo.xz-pop{ animation:xzPop .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes xzPop{ 0%{ transform:translateY(-6px) scale(.97); opacity:.4; } 100%{ transform:none; opacity:1; } }
.zp .leitura .xadrez__reset{ font:inherit; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#111; background:transparent; border:2px solid #111; border-radius:999px; padding:7px 13px; cursor:pointer; -ms-flex:none; flex:none; }
@media (hover:hover){ .zp .leitura .xadrez__reset:hover{ background:#111; color:#feec34; } }
.zp .leitura .xadrez__tabuleiro svg{ touch-action:pan-y; cursor:pointer; }
.xz-move.xz-convite .xz-fig{ animation:xzConvite 1.4s ease-in-out infinite; }
@keyframes xzConvite{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.xz-move.xz-arrastando{ transition:none; }
.xz-move.xz-capturada{ transition:opacity .35s, transform .35s; opacity:0; }
.xz-marca.xz-treme{ animation:xzTreme .4s; }
@keyframes xzTreme{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-3px); } 75%{ transform:translateX(3px); } }
.zp .leitura .xadrez__tabuleiro{ max-width:440px; margin:0 auto; }
.zp .leitura .xadrez__tabuleiro svg{ display:block; width:100%; height:auto; font-family:'Open Sans', system-ui, sans-serif; }
.zp .leitura .leitura__xadrez figcaption{ margin-top:12px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; gap:14px; -ms-flex-wrap:wrap; flex-wrap:wrap; font-size:13.5px; line-height:1.45; color:#c9c9bf; text-transform:none; letter-spacing:0; font-weight:400; }
.zp .leitura .xadrez__chave{ display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:0 16px; -ms-flex-wrap:wrap; flex-wrap:wrap; white-space:nowrap; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; line-height:1; color:#9a9a90; }
.zp .leitura .xadrez__chave span{ display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; gap:6px; }
.zp .leitura .xz-k{ display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -ms-flex:none; flex:none; width:15px; height:15px; border-radius:50%; margin:0; background:#fff; color:#111; font-size:10px; line-height:1; font-weight:800; }
.zp .leitura .xz-k-ok::before{ content:'\2713'; } .zp .leitura .xz-k-cap::before{ content:'!'; } .zp .leitura .xz-k-nao::before{ content:'\00d7'; }
/* o tabuleiro, como no livro: casas brancas e pretas, coordenadas dos quatro lados */
.xz-clara{ fill:#fff; } .xz-escura{ fill:#1d1d1b; }
.xz-coord{ font-size:10px; font-weight:700; letter-spacing:.6px; fill:#8e8e84; }
.xz-nome{ font-size:7px; font-weight:700; letter-spacing:.3px; }
.xz-nome-clara{ fill:#a8a8a0; } .xz-nome-escura{ fill:#6e6e66; }
/* as marcas do livro: círculo branco com ✓, ! ou × */
.xz-marca .xz-fundo{ fill:#27ae60; opacity:0; transition:opacity .25s; }
.xz-marca .xz-anel{ fill:#fff; stroke:#1d1d1b; stroke-width:1.6; transition:fill .25s, stroke .25s; }
.xz-marca .xz-simbolo{ fill:none; stroke:#1d1d1b; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
.xz-marca .xz-exclama{ font-size:19px; font-weight:800; fill:#1d1d1b; font-family:'Open Sans', system-ui, sans-serif; transition:fill .25s; }
.xz-marca.xz-nao .xz-anel{ fill:#fff; stroke:#1d1d1b; }
.xz-marca.xz-cap .xz-fundo{ fill:#e74c3c; }
.xz-marca.xz-nao .xz-fundo{ fill:#7a7a72; }
.xz-marca.xz-on .xz-fundo{ opacity:.95; }
.xz-marca.xz-on .xz-anel{ fill:#fff; }
.xz-marca.xz-ok.xz-on .xz-anel{ stroke:#0d3d21; } .xz-marca.xz-ok.xz-on .xz-simbolo{ stroke:#0d3d21; }
.xz-marca.xz-cap.xz-on .xz-exclama{ fill:#a4160b; } .xz-marca.xz-cap.xz-on .xz-anel{ stroke:#a4160b; }
.xz-promo .xz-anel{ fill:#1d1d1b; stroke:#fff; } .xz-promo-txt{ font-size:18px; font-weight:800; fill:#fff; }
.xz-promo.xz-on .xz-fundo{ fill:#feec34; opacity:.95; }
.xz-seta{ stroke:#b5b5ad; stroke-width:2; stroke-dasharray:3 4; }
/* as peças do livro */
.xz-fig{ stroke:#1d1d1b; stroke-width:4; stroke-linejoin:round; stroke-linecap:round; fill:#fff; }
.xz-fig path, .xz-fig polygon, .xz-fig polyline{ fill:inherit; stroke:inherit; }
.xz-fig.xz-preta{ fill:#1d1d1b; stroke:#fff; }
.xz-move{ transition:transform .32s cubic-bezier(.45,0,.2,1); }
.xz-move.xz-ativa .xz-fig{ filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
.xz-move.xz-ativa .xz-fig.xz-branca{ fill:#feec34; }
.xz-move.xz-pulo .xz-fig{ animation:xzPulo .52s ease-in-out; }
@keyframes xzPulo{ 0%{ transform:scale(1); } 50%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.xz-move.xz-promovida .xz-fig{ fill:#feec34; }
@media (max-width:640px){ .zp .leitura .leitura__xadrez{ padding:14px 12px 12px; border-radius:14px; } .zp .leitura .xadrez__rotulo{ min-height:4.3em; font-size:13.5px; } .zp .leitura .xadrez__cab{ margin:-14px -12px 14px; padding:0 12px; height:66px; border-radius:14px 14px 0 0; } .zp .leitura .xadrez__nome{ font-size:21px; } .zp .leitura .xadrez__icone{ width:40px; height:40px; } .zp .leitura .xadrez__icone svg{ width:30px; height:34px; } .zp .leitura .xadrez__reset{ padding:6px 10px; font-size:11px; } .zp .leitura .xadrez__rotulo{ font-size:12px; } }
@media (prefers-reduced-motion:reduce){ .xz-move, .xz-marca *{ transition:none !important; animation:none !important; } }


/* ---- o passo da lição e a peça nascendo na montagem ---- */
.zp .leitura .xadrez__passo{ display:inline-block; margin:0 0 8px; padding:3px 10px; border-radius:999px; background:#2a2a28; color:#feec34; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.zp .leitura .xadrez__passo[hidden]{ display:none; }
.xz-fig.xz-nasce{ transform-box:fill-box; transform-origin:center; animation:xzNasce .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes xzNasce{ 0%{ transform:scale(0); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .xz-fig.xz-nasce{ animation:none; } }

/* ---- a dica "Toque aqui", o anel pulsando e o dedo da demonstração ---- */
.xz-anel-convite{ fill:none; stroke:#feec34; stroke-width:3; transform-box:fill-box; transform-origin:center; animation:xzAnel 1.5s ease-out infinite; }
@keyframes xzAnel{ 0%{ transform:scale(.7); opacity:1; } 100%{ transform:scale(1.45); opacity:0; } }
.xz-dica{ animation:xzDica 1.2s ease-in-out infinite; }
.xz-dica-baixo{ animation-name:xzDicaBaixo; }
@keyframes xzDica{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes xzDicaBaixo{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
.xz-dica-fundo{ fill:#feec34; }
.xz-dica-texto{ font-size:11px; font-weight:800; fill:#111; letter-spacing:.2px; }
.xz-dedo{ font-size:26px; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.xz-toque{ fill:none; stroke:#feec34; stroke-width:3; transform-box:fill-box; transform-origin:center; animation:xzToque .7s ease-out forwards; }
@keyframes xzToque{ 0%{ transform:scale(.5); opacity:1; } 100%{ transform:scale(4); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .xz-anel-convite, .xz-dica, .xz-toque{ animation:none; } }

/* ---- "Ponha em prática": o app de xadrez e o desafio ao autor ---- */
.zp .leitura .leitura__pratica{ margin:32px 0 14px; padding:26px 26px 28px; border-radius:18px; background:#111; color:#f3f3ee; box-shadow:0 14px 40px rgba(0,0,0,.18); }
.zp .leitura .pratica__chapeu{ font-size:12px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:#feec34; margin:0 0 6px; }
.zp .leitura .pratica__titulo{ font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase; font-size:26px; line-height:1.05; margin:0 0 12px; color:#fff; }
.zp .leitura .pratica__texto{ font-size:15px; line-height:1.55; color:#d6d6cc; margin:0 0 14px; max-width:52ch; }
.zp .leitura .pratica__botao{ display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; }
.zp .leitura .pratica__desafio{ margin-top:20px; padding-top:20px; border-top:1px solid #2b2b2b; }
.zp .leitura .leitura__pratica .btn--vazado{ border-color:#feec34; color:#feec34; }
@media (max-width:640px){ .zp .leitura .leitura__pratica{ padding:20px 18px 22px; } .zp .leitura .pratica__titulo{ font-size:22px; } }

/* ---- Enviar para um amigo ---- */
.zp .leitura__amigo{ margin:48px 0 0; padding:26px 26px 28px; border:2px solid #111; border-radius:18px; background:#fbfbf7; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; gap:22px; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.zp .leitura__amigoTexto{ -webkit-box-flex:1; -ms-flex:1 1 300px; flex:1 1 300px; }
.zp .leitura__amigoTexto .chapeu{ margin-bottom:6px; }
.zp .leitura__amigoTexto h3{ font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase; font-size:24px; line-height:1.05; margin:0 0 8px; }
.zp .leitura__amigoTexto p:last-child{ margin:0; font-size:14.5px; line-height:1.55; color:#4a4a44; }
.zp .leitura__amigoBotoes{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; gap:10px; -ms-flex:0 0 auto; flex:0 0 auto; min-width:240px; }
@media (max-width:640px){ .zp .leitura__amigo{ padding:20px 18px 22px; } .zp .leitura__amigoBotoes{ min-width:0; width:100%; } }