/*
  Tema da página da coleção Ninguém de Fora, Todos Juntos (diversidade e inclusão): o quebra-cabeça do logo
  se monta no topo ("todos juntos"), aquarela pêssego com arco-íris, nuvens e girassol do catálogo (pág. 14–15),
  os Diferenciais da Coleção como peças que se encaixam, as duas etapas em faixas-seta e o Matheus
  (capa "O Mundo de Matheus") numa moldura de peça apresentando o livro.
  Só vale dentro de <main class="tema-ninguem">. Títulos na Quicksand.
  Enfeites cortados pela borda ficam parados; só os inteiros flutuam.
  As animações só ligam com .tm-js no <html> (posta no <head> quando o navegador tem
  IntersectionObserver e a pessoa não pediu "menos movimento").
*/
.tema-ninguem{
  --nf-vermelho:#E3262D;
  --nf-azul:#1E5AB6;
  --nf-amarelo:#FFD200;
  --nf-verde:#3BAA35;
  --nf-navy:#1C2F6B;
  --nf-pessego:#FFF5EE;
  --nf-lilas:#E7DDF3;
  --nf-texto:#55546A;
  --nf-titulo:"Quicksand", var(--fonte);
}
.tema-ninguem .nf-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tema-ninguem .secao-topo h2{font-family:var(--nf-titulo);font-weight:700;color:var(--nf-navy);font-size:clamp(1.9rem,3.6vw,2.6rem)}
/* enfeite dos títulos: as quatro cores do quebra-cabeça */
.tema-ninguem .secao-topo h2::after{content:"";display:block;width:76px;height:8px;margin-top:12px;border-radius:4px;
  background:linear-gradient(90deg,var(--nf-vermelho) 0 25%,var(--nf-azul) 25% 50%,var(--nf-amarelo) 50% 75%,var(--nf-verde) 75%)}
.tema-ninguem .secao-topo.centro h2::after{margin-inline:auto}
/* aquarela de arco-íris (manchas suaves) */
.tema-ninguem .nf-arco-iris{position:absolute;left:-70px;top:-80px;width:620px;height:250px;rotate:-6deg;opacity:.8;filter:blur(14px);
  background:radial-gradient(30% 60% at 12% 55%,#4D9DE0,transparent 70%),radial-gradient(28% 55% at 30% 45%,#3BAA35,transparent 70%),
             radial-gradient(28% 55% at 48% 55%,#FFD200,transparent 70%),radial-gradient(26% 55% at 64% 45%,#F39200,transparent 70%),
             radial-gradient(26% 50% at 80% 55%,#E3262D,transparent 70%),radial-gradient(22% 45% at 94% 50%,#8E5CC2,transparent 70%)}
.tema-ninguem .nf-nuvem{position:absolute;aspect-ratio:2;background:#A9D2F0;opacity:.85;
  -webkit-mask:url(../img/ninguem/nuvem.svg) center/contain no-repeat;mask:url(../img/ninguem/nuvem.svg) center/contain no-repeat}
.tema-ninguem .nf-pincelada{position:absolute;left:0;right:0;height:40px;background:#CFC3BA;pointer-events:none;
  -webkit-mask:url(../img/ninguem/pincelada.svg) center/100% 100% no-repeat;mask:url(../img/ninguem/pincelada.svg) center/100% 100% no-repeat}
.tema-ninguem .nf-peca{position:absolute;width:70%;height:70%}
.tema-ninguem .nf-p1{left:-10%;top:-10%;background:var(--nf-vermelho);-webkit-mask:url(../img/ninguem/peca-1.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-1.svg) center/contain no-repeat}
.tema-ninguem .nf-p2{left:40%;top:-10%;background:var(--nf-azul);-webkit-mask:url(../img/ninguem/peca-2.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-2.svg) center/contain no-repeat}
.tema-ninguem .nf-p3{left:-10%;top:40%;background:var(--nf-amarelo);-webkit-mask:url(../img/ninguem/peca-3.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-3.svg) center/contain no-repeat}
.tema-ninguem .nf-p4{left:40%;top:40%;background:var(--nf-verde);-webkit-mask:url(../img/ninguem/peca-4.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-4.svg) center/contain no-repeat}

/* ===== topo: aquarela pêssego, arco-íris, nuvens, girassol e o quebra-cabeça que se monta ===== */
.tema-ninguem .colecao-topo{position:relative;overflow:hidden;padding-block:100px 112px;
  background:radial-gradient(50% 80% at 80% 20%,rgba(231,221,243,.8),transparent 70%),radial-gradient(60% 90% at 20% 90%,rgba(255,221,200,.7),transparent 70%),var(--nf-pessego)}
.tema-ninguem .colecao-topo .container{position:relative;z-index:1}
.tema-ninguem .colecao-topo .container > div:first-child{max-width:560px}
.tema-ninguem .colecao-topo .rotulo{color:#C21F26}
.tema-ninguem .colecao-topo h1{color:var(--nf-navy);font-family:var(--nf-titulo);font-weight:700;font-size:clamp(2.4rem,5vw,3.5rem);line-height:1.1}
.tema-ninguem .colecao-tagline{color:var(--nf-texto)}
.tema-ninguem .colecao-logo{border-radius:22px;box-shadow:0 18px 40px -18px rgba(28,47,107,.4);transition:transform .4s ease}
.tema-ninguem .colecao-logo:hover{transform:translateY(-3px) rotate(-1deg)}
.tema-ninguem .nf-n1{width:120px;left:36%;top:12%}
.tema-ninguem .nf-n2{width:80px;left:58%;top:70%;opacity:.7}
.tema-ninguem .nf-n3{width:64px;left:8%;top:74%;opacity:.6}
.tema-ninguem .nf-girassol{position:absolute;width:70px;height:70px;left:calc(50% + 250px);top:16%}
/* o quebra-cabeça fica entre o título e o logo */
.tema-ninguem .nf-montagem{position:absolute;left:calc(50% + 60px);top:50%;width:clamp(160px,15vw,210px);aspect-ratio:1;translate:0 -50%}
.tema-ninguem .nf-pincelada-topo{bottom:14px;opacity:.8}

/* ===== descrição ===== */
.tema-ninguem .nf-cartao{position:relative;margin-inline:auto;background:#fff;border:2px solid #F2E4DA;border-radius:26px;padding:38px 44px 30px;
  box-shadow:0 18px 40px -28px rgba(28,47,107,.3)}
.tema-ninguem .nf-cartao p{position:relative}

/* ===== Diferenciais: quatro peças que se encaixam ===== */
.tema-ninguem .nf-diferenciais{background:linear-gradient(#fff,var(--nf-pessego))}
.tema-ninguem .nf-quebra-cabeca{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px;max-width:980px;margin:0 auto 34px}
.tema-ninguem .nf-dif{position:relative;border-radius:22px;padding:30px 30px 26px;background:var(--claro);border:2px solid var(--borda)}
.tema-ninguem .nf-dif-1{--cor:var(--nf-vermelho);--claro:#FDE6E6;--borda:#F6B9BB;--escura:#A8161C}
.tema-ninguem .nf-dif-2{--cor:var(--nf-azul);--claro:#E4ECF9;--borda:#B3C8EC;--escura:#16438A}
.tema-ninguem .nf-dif-3{--cor:#F2B800;--claro:#FFF6D1;--borda:#F5DE86;--escura:#7A5A00}
.tema-ninguem .nf-dif-4{--cor:var(--nf-verde);--claro:#E4F4E2;--borda:#B4DFAF;--escura:#23731F}
.tema-ninguem .nf-dif-ic{display:block;width:40px;height:40px;margin-bottom:10px;background:var(--cor);
  -webkit-mask:url(../img/ninguem/peca-retrato.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-retrato.svg) center/contain no-repeat}
.tema-ninguem .nf-dif h3{font-family:var(--nf-titulo);font-weight:700;font-size:1.25rem;color:var(--escura);margin-bottom:8px}
.tema-ninguem .nf-dif p{margin:0;color:var(--nf-texto);font-size:.97rem}
/* encaixes: a "bolinha" de uma peça entrando na vizinha */
.tema-ninguem .nf-encaixe{position:absolute;z-index:2;width:30px;height:30px;border-radius:50%;translate:-50% -50%;background:var(--claro);border:2px solid var(--borda)}
.tema-ninguem .nf-e1{left:50%;top:25%;--claro:#FDE6E6;--borda:#F6B9BB}
.tema-ninguem .nf-e2{left:75%;top:50%;--claro:#E4ECF9;--borda:#B3C8EC}
.tema-ninguem .nf-e3{left:50%;top:75%;--claro:#FFF6D1;--borda:#F5DE86}
.tema-ninguem .nf-e4{left:25%;top:50%;--claro:#FDE6E6;--borda:#F6B9BB}
/* as duas etapas em faixas-seta, como no catálogo */
.tema-ninguem .nf-etapas{display:grid;gap:14px;max-width:980px;margin:0 auto}
.tema-ninguem .nf-etapa{margin:0;color:#fff;font-weight:600;font-size:1.02rem;padding:14px 46px 14px 34px;width:fit-content;max-width:100%}
.tema-ninguem .nf-etapa strong{font-weight:800;letter-spacing:.02em}
.tema-ninguem .nf-etapa-1{justify-self:end;background:linear-gradient(90deg,#D7262D,#C8511B);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,16px 50%)}
.tema-ninguem .nf-etapa-2{justify-self:start;padding:14px 34px 14px 46px;background:linear-gradient(90deg,#6B3FA0,var(--nf-azul));
  clip-path:polygon(22px 0,100% 0,calc(100% - 16px) 50%,100% 100%,22px 100%,0 50%)}

/* ===== demonstração: o Matheus numa moldura de peça ===== */
.tema-ninguem .tm-palco{display:flex;align-items:center;gap:22px}
.tema-ninguem .nf-retrato{position:relative;flex:0 0 auto;width:clamp(180px,20vw,270px)}
.tema-ninguem .nf-retrato::before{content:"";position:absolute;inset:0;translate:12px 12px;background:var(--nf-amarelo);opacity:.85;
  -webkit-mask:url(../img/ninguem/peca-retrato.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-retrato.svg) center/contain no-repeat}
.tema-ninguem .tm-personagem{position:relative;display:block;width:100%;height:auto;
  -webkit-mask:url(../img/ninguem/peca-retrato.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-retrato.svg) center/contain no-repeat}
.tema-ninguem .tm-palco > :last-child{flex:1;min-width:0}
.tema-ninguem .placeholder-flipbook{min-height:420px;background:#FFF7F1;border:2px dashed #E7C9B8;border-radius:24px;color:#8A5A44}
.tema-ninguem .flipbook-caixa{background:#FFF7F1;border:2px solid #F2E4DA}
.tema-ninguem .nota-visualizacao{color:#7A6A62}

/* ===== capas ===== */
.tema-ninguem .secao.fundo{position:relative;overflow:hidden;background:var(--nf-pessego)}
.tema-ninguem .secao.fundo .container{position:relative;z-index:1}
.tema-ninguem .nf-arco-capas{left:auto;right:-120px;top:auto;bottom:-120px;rotate:8deg;opacity:.45}
.tema-ninguem .grade-capas{grid-template-columns:repeat(auto-fill,minmax(200px,240px));gap:30px 34px}
.tema-ninguem .capa-ampliar{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:3px 8px 8px 3px;box-shadow:0 18px 30px -18px rgba(28,47,107,.5);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-ninguem .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-ninguem .capa-ampliar::before{content:"";position:absolute;inset:0 auto 0 0;width:6%;border-radius:3px 0 0 3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.24) 45%,rgba(0,0,0,.05))}
.tema-ninguem .capa-ampliar:focus-visible{outline:3px solid var(--nf-navy);outline-offset:4px}
@media (hover:hover){
  .tema-ninguem .capa-ampliar:hover{transform:perspective(900px) rotateY(-10deg) rotate(-1.5deg) translateY(-6px);
    box-shadow:14px 26px 34px -18px rgba(28,47,107,.55)}
}
.tema-ninguem .capa figcaption{color:var(--nf-navy);font-weight:700}
.tema-ninguem .capa figcaption::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:2px;background:var(--cor-ano,var(--nf-vermelho))}

/* capa ampliada: janela por cima da página (não sai dela) */
.tema-ninguem .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,640px);max-height:92vh;overflow:visible}
.tema-ninguem .tm-ampliada::backdrop{background:rgba(28,47,107,.78)}
.tema-ninguem .tm-ampliada img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:4px 10px 10px 4px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.tema-ninguem .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--nf-amarelo);color:var(--nf-navy);font-family:var(--fonte);font-size:1.15rem;font-weight:800;line-height:1;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
.tema-ninguem .tm-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: aquarela suave com peças soltas e o girassol ===== */
.tema-ninguem .colecao-cta{position:relative;overflow:hidden;padding-block:92px;background:linear-gradient(120deg,#FFE7D6,var(--nf-lilas))}
.tema-ninguem .colecao-cta .container{position:relative;z-index:1}
.tema-ninguem .nf-solta{width:46px;height:46px}
.tema-ninguem .nf-q1{background:var(--nf-vermelho);-webkit-mask:url(../img/ninguem/peca-1.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-1.svg) center/contain no-repeat}
.tema-ninguem .nf-q2{background:var(--nf-azul);-webkit-mask:url(../img/ninguem/peca-2.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-2.svg) center/contain no-repeat}
.tema-ninguem .nf-q3{background:var(--nf-amarelo);-webkit-mask:url(../img/ninguem/peca-3.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-3.svg) center/contain no-repeat}
.tema-ninguem .nf-q4{background:var(--nf-verde);-webkit-mask:url(../img/ninguem/peca-4.svg) center/contain no-repeat;mask:url(../img/ninguem/peca-4.svg) center/contain no-repeat}
.tema-ninguem .nf-q1{left:9%;top:24%;rotate:-18deg}
.tema-ninguem .nf-q2{left:22%;top:62%;rotate:14deg;width:34px;height:34px}
.tema-ninguem .nf-q3{left:74%;top:22%;rotate:24deg;width:38px;height:38px}
.tema-ninguem .nf-q4{left:86%;top:60%;rotate:-10deg}
.tema-ninguem .nf-girassol-cta{left:auto;right:calc(50% - 260px);top:auto;bottom:18%;width:56px;height:56px}
.tema-ninguem .botao-colecao{background:var(--nf-navy)}

/* ===== animações (só com .tm-js) ===== */
@keyframes nf-flutuar{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes nf-girar{to{rotate:360deg}}
@keyframes nf-respirar{0%,100%{scale:1}50%{scale:1.04}}
@keyframes nf-m1{from{transform:translate(-130px,-70px) rotate(-35deg);opacity:0}}
@keyframes nf-m2{from{transform:translate(140px,-90px) rotate(30deg);opacity:0}}
@keyframes nf-m3{from{transform:translate(-110px,100px) rotate(25deg);opacity:0}}
@keyframes nf-m4{from{transform:translate(120px,90px) rotate(-28deg);opacity:0}}
@keyframes nf-zoom{from{opacity:0;transform:scale(.92)}}
.tm-js .tema-ninguem .nf-montagem .nf-p1{animation:nf-m1 1.1s cubic-bezier(.2,.8,.3,1.1) .2s both}
.tm-js .tema-ninguem .nf-montagem .nf-p2{animation:nf-m2 1.1s cubic-bezier(.2,.8,.3,1.1) .4s both}
.tm-js .tema-ninguem .nf-montagem .nf-p3{animation:nf-m3 1.1s cubic-bezier(.2,.8,.3,1.1) .6s both}
.tm-js .tema-ninguem .nf-montagem .nf-p4{animation:nf-m4 1.1s cubic-bezier(.2,.8,.3,1.1) .8s both}
.tm-js .tema-ninguem .nf-montagem{animation:nf-respirar 5s ease-in-out 2.2s infinite}
.tm-js .tema-ninguem .nf-girassol{animation:nf-girar 40s linear infinite}
.tm-js .tema-ninguem :is(.nf-n1,.nf-n2,.nf-n3){animation:nf-flutuar 9s ease-in-out infinite}
.tm-js .tema-ninguem .nf-n2{animation-duration:11s;animation-delay:-4s}
.tm-js .tema-ninguem .nf-solta{animation:nf-flutuar 7s ease-in-out infinite}
.tm-js .tema-ninguem :is(.nf-q2,.nf-q4){animation-duration:9s;animation-delay:-3s}
.tm-js .tema-ninguem .nf-cartao p,
.tm-js .tema-ninguem .capa,
.tm-js .tema-ninguem .tm-revela{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-ninguem .nf-cartao p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-ninguem .nf-cartao p:nth-of-type(3){transition-delay:.24s}
.tm-js .tema-ninguem .capa:nth-child(3n+2){transition-delay:.08s}
.tm-js .tema-ninguem .capa:nth-child(3n){transition-delay:.16s}
/* cada peça dos diferenciais chega do seu canto e se encaixa */
.tm-js .tema-ninguem .nf-dif-1{translate:-40px -30px}
.tm-js .tema-ninguem .nf-dif-2{translate:40px -30px;transition-delay:.12s}
.tm-js .tema-ninguem .nf-dif-3{translate:-40px 30px;transition-delay:.24s}
.tm-js .tema-ninguem .nf-dif-4{translate:40px 30px;transition-delay:.36s}
.tm-js .tema-ninguem .nf-encaixe{scale:0;transition:scale .5s cubic-bezier(.3,1.6,.5,1) .7s}
.tm-js .tema-ninguem .nf-quebra-cabeca:has(.nf-dif-4.tm-visivel) .nf-encaixe{scale:1}
.tm-js .tema-ninguem .nf-etapa-1{translate:-60px 0}
.tm-js .tema-ninguem .nf-etapa-2{translate:60px 0;transition-delay:.15s}
.tm-js .tema-ninguem .nf-cartao p.tm-visivel,
.tm-js .tema-ninguem .capa.tm-visivel,
.tm-js .tema-ninguem .tm-revela.tm-visivel{opacity:1;translate:0 0}
.tm-js .tema-ninguem .tm-personagem{opacity:0;scale:.85;rotate:-8deg;transition:opacity .7s ease,scale .9s cubic-bezier(.3,1.4,.5,1),rotate .9s cubic-bezier(.3,1.4,.5,1)}
.tm-js .tema-ninguem .tm-personagem.tm-visivel{opacity:1;scale:1;rotate:0deg}
@media (prefers-reduced-motion:no-preference){
  .tema-ninguem .tm-ampliada[open]{animation:nf-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-ninguem .capa-ampliar,.tema-ninguem .colecao-logo{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  .tema-ninguem .colecao-topo{padding-block:64px 150px}
  .tema-ninguem .nf-montagem{left:auto;right:7%;top:auto;bottom:34px;translate:0 0;width:130px}
  .tema-ninguem .nf-girassol{left:auto;right:4%;top:18px;width:54px;height:54px}
}
@media (max-width:767px){
  .tema-ninguem .colecao-topo{padding-block:44px 150px}
  .tema-ninguem .nf-montagem{width:110px;bottom:28px}
  .tema-ninguem .nf-n1{left:52%;top:6%;width:80px}
  .tema-ninguem .nf-cartao{padding:30px 20px 22px;border-radius:20px}
  .tema-ninguem .nf-quebra-cabeca{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .tema-ninguem .nf-encaixe{display:none}
  .tema-ninguem .nf-dif{padding:24px 20px 20px}
  .tema-ninguem .nf-etapa{font-size:.9rem;width:100%}
  .tema-ninguem .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-ninguem .nf-retrato{align-self:flex-start;width:150px;margin:0 0 -12px 6px;z-index:1}
  .tema-ninguem .placeholder-flipbook{min-height:260px}
  .tema-ninguem .grade-capas{grid-template-columns:1fr 1fr;gap:20px 14px}
}

/* rodapé desta coleção: o azul-marinho do livro (o resto do rodapé é o mesmo do site) */
.tema-ninguem ~ .site-footer{--cor-rodape:#1C2F6B}

/* correção (26/09/2026): no tablet (768–1024 px) os cartões dos diferenciais e das etapas entram deslizando da direita
   e, antes de aparecerem, passavam da borda e a página "balançava". Corta só na horizontal (nada visível muda). */
.tema-ninguem .nf-diferenciais{overflow-x:clip}