/*
  Tema da página da coleção Corpo, Mente e Movimento (Educação Física): respingos de tinta do catálogo
  (pág. 18–19) apoiados nas bordas, linhas de velocidade, A Coleção e os Temas Contemporâneos Transversais
  (os exemplos viram etiquetas), a "pista" do 1º ao 9º ano com uma raia por volume na cor da capa, e as
  crianças das capas (a menina na largada ao lado do texto; o menino correndo apresentando o livro).
  Só vale dentro de <main class="tema-corpo">. Títulos na Bebas Neue (esportiva, como o logo).
  Respingos cortados pela borda ficam parados, apoiados nela.
  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-corpo{
  --cm-rosa:#E5007E;
  --cm-verde:#95C11F;
  --cm-preto:#111;
  --cm-ciano:#3FD3E0;
  --cm-azul:#1E4FD8;
  --cm-laranja:#F26A1B;
  --cm-roxo:#8E2A8C;
  --cm-texto:#3D3D3D;
  --cm-titulo:"Bebas Neue", var(--fonte);
  /* fundos: tons claros da paleta do livro, alternando seção a seção */
  --cm-fundo-ciano:#E3F5F8;
  --cm-fundo-rosa:#FCEAF3;
  --cm-fundo-lima:#EFF6DB;
}
.tema-corpo .secao-descricao{background:var(--cm-fundo-rosa);padding-bottom:84px}
.tema-corpo .cm-colecao{background:var(--cm-fundo-lima)}
.tema-corpo .cm-trajetoria{background:var(--cm-fundo-ciano)}
.tema-corpo .secao-demonstracao{background:var(--cm-fundo-lima);padding-top:72px}
.tema-corpo .cm-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tema-corpo .cm-respingo{position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain}
.tema-corpo .cm-respingo-rosa{right:0;top:0;width:min(32%,450px);aspect-ratio:1100/727;background-image:url(../img/corpo/respingo-rosa.webp);background-position:right top}
/* "chão" de tinta: a base do respingo verde (pág. 18), apoiada na borda de baixo */
.tema-corpo .cm-respingo-chao{left:0;bottom:0;width:min(40%,560px);aspect-ratio:1106/421;background-image:url(../img/corpo/respingo-verde-chao.webp);background-position:left bottom}
.tema-corpo .secao-topo h2{font-family:var(--cm-titulo);font-weight:400;color:var(--cm-preto);font-size:clamp(2.3rem,4.6vw,3.4rem);letter-spacing:.02em;line-height:1}
.tema-corpo .secao-topo h2::after{content:"";display:block;width:84px;height:6px;margin-top:10px;border-radius:3px;
  background:linear-gradient(90deg,var(--cm-rosa) 0 33%,var(--cm-verde) 33% 66%,var(--cm-ciano) 66%)}
.tema-corpo .secao-topo.centro h2::after{margin-inline:auto}
/* linhas de velocidade */
.tema-corpo .cm-linha{position:absolute;height:4px;border-radius:2px;opacity:.55}
.tema-corpo .cm-l1{width:180px;top:30px;left:18%;background:var(--cm-rosa)}
.tema-corpo .cm-l2{width:120px;top:62px;left:44%;background:var(--cm-verde)}
.tema-corpo .cm-l3{width:220px;bottom:34px;left:30%;background:var(--cm-ciano)}
.tema-corpo .cm-l4{width:90px;bottom:62px;left:56%;background:var(--cm-laranja)}
.tema-corpo .cm-l5{width:150px;top:14px;left:40%;background:var(--cm-azul)}

/* ===== topo: branco com os respingos do catálogo e linhas de velocidade ===== */
.tema-corpo .colecao-topo{position:relative;overflow:hidden;padding-block:64px 72px;background:var(--cm-fundo-ciano)}
.tema-corpo .cm-chao-topo{left:auto;right:0;width:min(26%,370px);transform:scaleX(-1)}
.tema-corpo .colecao-topo .container{position:relative;z-index:1}
/* rótulo como a etiqueta preta "EDUCAÇÃO FÍSICA" do logo */
.tema-corpo .colecao-topo .rotulo{display:inline-block;background:var(--cm-preto);color:#fff;padding:5px 12px;letter-spacing:.16em}
.tema-corpo .colecao-topo h1{color:var(--cm-preto);font-family:var(--cm-titulo);font-weight:400;font-size:clamp(2.6rem,5vw,4.2rem);letter-spacing:.02em;line-height:.95;margin-top:10px}
.tema-corpo .colecao-tagline{color:var(--cm-texto);font-weight:600}
.tema-corpo .colecao-logo{border-radius:18px;box-shadow:0 18px 40px -18px rgba(0,0,0,.4);transition:transform .4s ease}
.tema-corpo .colecao-logo:hover{transform:translateY(-3px) rotate(-2deg)}

/* ===== descrição + a menina na largada ===== */
.tema-corpo .secao-descricao{overflow-x:clip}
.tema-corpo .cm-duas{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.tema-corpo .cm-cartao{max-width:none;margin:0;background:#fff;border:2px solid #ECECEC;border-radius:22px;padding:38px 42px 30px;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.3)}
.tema-corpo .cm-cartao p{position:relative}
.tema-corpo .cm-foto{position:relative;max-width:440px;justify-self:center}
/* bloco verde deslocado atrás da foto, como um adesivo */
.tema-corpo .cm-foto-respingo{position:absolute;inset:0;border-radius:24px;background:var(--cm-verde);translate:16px 16px;rotate:3deg}
.tema-corpo .cm-foto img{position:relative;display:block;width:100%;height:auto;border-radius:24px;border:8px solid #fff;rotate:-2deg;
  box-shadow:0 24px 40px -24px rgba(0,0,0,.5)}

/* ===== A Coleção ===== */
.tema-corpo .cm-colecao .secao-topo{max-width:860px}
.tema-corpo .cm-colecao .secao-topo p{font-size:1.05rem}

/* ===== Temas Contemporâneos Transversais: os exemplos viram etiquetas de tinta ===== */
.tema-corpo .cm-temas{position:relative;overflow:hidden;background:var(--cm-fundo-rosa)}
.tema-corpo .cm-temas .container{position:relative;z-index:1}
.tema-corpo .cm-temas-grade{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center}
.tema-corpo .cm-temas .secao-topo{max-width:none;margin:0}
.tema-corpo .cm-etiquetas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tema-corpo .cm-etiqueta{padding:12px 18px;border-radius:14px 4px 14px 4px;font-weight:800;font-size:.95rem;line-height:1.25;
  box-shadow:0 12px 22px -16px rgba(0,0,0,.5);transition:transform .3s ease}
.tema-corpo .cm-etiqueta:hover{transform:translateY(-3px) rotate(0deg) !important}
.tema-corpo .cm-et1{background:var(--cm-rosa);color:#fff;rotate:-2deg}
.tema-corpo .cm-et2{background:var(--cm-verde);color:var(--cm-preto);rotate:2deg}
.tema-corpo .cm-et3{background:var(--cm-ciano);color:var(--cm-preto);rotate:-1.5deg}
.tema-corpo .cm-et4{background:var(--cm-laranja);color:var(--cm-preto);rotate:1.5deg}
.tema-corpo .cm-et5{background:var(--cm-azul);color:#fff;rotate:-2deg}
.tema-corpo .cm-et6{background:var(--cm-roxo);color:#fff;rotate:2deg}

/* ===== a pista: uma raia por volume, do 1º ao 9º ano ===== */
.tema-corpo .cm-pista{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:1040px;margin-inline:auto}
.tema-corpo .cm-grupo-nome{font-family:var(--cm-titulo);font-size:1.8rem;letter-spacing:.03em;color:var(--cm-preto);margin:0 0 10px}
.tema-corpo .cm-raias{position:relative;background:#C9573B;border-radius:18px;padding:6px 10px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
/* linha de chegada quadriculada */
.tema-corpo .cm-raias::after{content:"";position:absolute;top:9px;bottom:9px;right:14px;width:12px;border-radius:2px;
  background:repeating-conic-gradient(#fff 0 25%,#1a1a1a 0 50%) 0 0/12px 12px}
.tema-corpo .cm-raia{position:relative;display:flex;align-items:center;gap:14px;height:80px;padding:0 36px 0 4px;border-bottom:2px solid rgba(255,255,255,.85)}
.tema-corpo .cm-raia:last-child{border-bottom:0}
.tema-corpo .cm-raia b{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--cm-preto);
  font-family:var(--cm-titulo);font-weight:400;font-size:1.3rem;line-height:1;padding-top:2px}
/* a "corrida": a capa do volume vai na frente e deixa o rastro na cor dela */
.tema-corpo .cm-trilho{flex:1;align-self:stretch;position:relative;overflow-x:clip}
.tema-corpo .cm-trilho::before,.tema-corpo .cm-corredor::before{content:"";position:absolute;left:0;top:50%;height:10px;margin-top:-5px;border-radius:5px}
.tema-corpo .cm-trilho::before{right:0;background:rgba(255,255,255,.22)}
.tema-corpo .cm-corredor{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end}
.tema-corpo .cm-corredor::before{right:26px;background:var(--cor)}
.tema-corpo .cm-corredor img{position:relative;display:block;height:68px;width:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}

/* ===== demonstração: o menino correndo apresenta o livro ===== */
.tema-corpo .tm-palco{display:flex;align-items:center;gap:24px}
.tema-corpo .cm-retrato{position:relative;flex:0 0 auto;width:clamp(180px,20vw,270px)}
/* linhas de velocidade atrás do menino (ele corre para o livro) e um anel verde deslocado */
.tema-corpo .secao-demonstracao{overflow-x:clip}
.tema-corpo .cm-retrato{isolation:isolate}
.tema-corpo .cm-retrato::before{content:"";position:absolute;left:-26%;top:32%;width:42%;height:36%;
  background:linear-gradient(var(--cm-rosa),var(--cm-rosa)) right top/100% 8px no-repeat,
    linear-gradient(var(--cm-laranja),var(--cm-laranja)) right center/72% 8px no-repeat,
    linear-gradient(var(--cm-ciano),var(--cm-ciano)) right bottom/86% 8px no-repeat}
.tema-corpo .cm-retrato::after{content:"";position:absolute;inset:0;border-radius:50%;border:7px solid var(--cm-verde);translate:10px 10px;z-index:-1}
.tema-corpo .tm-personagem{position:relative;display:block;width:100%;height:auto;border-radius:50%;border:7px solid #fff;box-shadow:0 20px 34px -20px rgba(0,0,0,.55)}
.tema-corpo .tm-palco > :last-child{flex:1;min-width:0}
.tema-corpo .placeholder-flipbook{min-height:420px;background:
  repeating-linear-gradient(0deg,transparent 0 58px,rgba(0,0,0,.05) 58px 60px),#fff;border:2px dashed #BDBDBD;border-radius:20px;color:#555}
.tema-corpo .flipbook-caixa{background:#fff;border:2px solid #ECECEC}

/* ===== capas ===== */
.tema-corpo .secao.fundo{position:relative;overflow:hidden;background:var(--cm-fundo-rosa)}
.tema-corpo .secao.fundo .container{position:relative;z-index:1}
.tema-corpo .grade-capas{grid-template-columns:repeat(auto-fill,minmax(180px,220px));gap:30px 34px}
.tema-corpo .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(0,0,0,.55);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-corpo .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-corpo .capa-ampliar::before{content:"";position:absolute;inset:0 auto 0 0;width:7%;border-radius:3px 0 0 3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.24) 45%,rgba(0,0,0,.05))}
.tema-corpo .capa-ampliar:focus-visible{outline:3px solid var(--cm-preto);outline-offset:4px}
@media (hover:hover){
  .tema-corpo .capa-ampliar:hover{transform:perspective(900px) rotateY(-10deg) rotate(-1.5deg) translateY(-6px);
    box-shadow:14px 26px 34px -18px rgba(0,0,0,.6)}
}

/* capa ampliada: janela por cima da página (não sai dela) */
.tema-corpo .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tema-corpo .tm-ampliada::backdrop{background:rgba(10,10,10,.85)}
.tema-corpo .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-corpo .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cm-verde);color:var(--cm-preto);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-corpo .tm-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: preto com os respingos e as linhas de velocidade ===== */
.tema-corpo .colecao-cta{position:relative;overflow:hidden;padding-block:100px;background:var(--cm-preto)}
.tema-corpo .colecao-cta .container{position:relative;z-index:1}
/* o rosa espelhado, apoiado no canto de cima à esquerda */
.tema-corpo .cm-cta-rosa{right:auto;left:0;width:min(30%,420px);transform:scaleX(-1)}
.tema-corpo .botao-colecao{background:var(--cm-verde);color:var(--cm-preto)}

/* ===== animações (só com .tm-js) ===== */
@keyframes cm-respingar{from{scale:.82;opacity:0}}
@keyframes cm-vento{from{translate:-40vw 0;opacity:0}20%{opacity:.6}80%{opacity:.6}to{translate:40vw 0;opacity:0}}
@keyframes cm-correr{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes cm-pulo{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes cm-zoom{from{opacity:0;transform:scale(.92)}}
.tm-js .tema-corpo .colecao-topo .cm-respingo{animation:cm-respingar .7s cubic-bezier(.3,1.5,.5,1) both}
.tm-js .tema-corpo .colecao-topo .cm-chao-topo{animation-delay:.2s}
.tm-js .tema-corpo .cm-linha{animation:cm-vento 3.2s cubic-bezier(.5,0,.5,1) infinite}
.tm-js .tema-corpo .cm-l2{animation-delay:-1s;animation-duration:2.6s}
.tm-js .tema-corpo .cm-l3{animation-delay:-2s;animation-duration:3.6s}
.tm-js .tema-corpo .cm-l4{animation-delay:-.5s;animation-duration:2.8s}
.tm-js .tema-corpo .cm-l5{animation-delay:-1.6s;animation-duration:3.4s}
.tm-js .tema-corpo .cm-cartao p,
.tm-js .tema-corpo .capa,
.tm-js .tema-corpo .tm-revela{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-corpo .cm-cartao p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-corpo .cm-cartao p:nth-of-type(3){transition-delay:.24s}
.tm-js .tema-corpo .capa:nth-child(2){transition-delay:.1s}
.tm-js .tema-corpo .capa:nth-child(3){transition-delay:.2s}
/* a menina "sai da largada": entra correndo da esquerda */
.tm-js .tema-corpo .cm-foto img.tm-revela{translate:-60px 0}
/* as etiquetas pulam para dentro, uma depois da outra */
.tm-js .tema-corpo .cm-etiqueta.tm-revela{translate:0 30px;transition:opacity .5s ease,translate .7s cubic-bezier(.3,1.6,.5,1)}
.tm-js .tema-corpo .cm-et2{transition-delay:.08s}
.tm-js .tema-corpo .cm-et3{transition-delay:.16s}
.tm-js .tema-corpo .cm-et4{transition-delay:.24s}
.tm-js .tema-corpo .cm-et5{transition-delay:.32s}
.tm-js .tema-corpo .cm-et6{transition-delay:.40s}
.tm-js .tema-corpo .cm-cartao p.tm-visivel,
.tm-js .tema-corpo .capa.tm-visivel,
.tm-js .tema-corpo .tm-revela.tm-visivel{opacity:1;translate:0 0}
/* a corrida nas raias começa quando a pista aparece */
.tm-js .tema-corpo .cm-pista.tm-revela{translate:0 0}
.tm-js .tema-corpo .cm-corredor{transform:translateX(-100%)}
.tm-js .tema-corpo .cm-pista.tm-visivel .cm-corredor{animation:cm-correr var(--t,1.5s) cubic-bezier(.3,.1,.2,1) .2s both}
.tm-js .tema-corpo .tm-personagem{opacity:0;translate:-40px 0;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-corpo .tm-personagem.tm-visivel{opacity:1;translate:0 0;animation:cm-pulo 2.6s ease-in-out 1.2s infinite}
@media (prefers-reduced-motion:no-preference){
  .tema-corpo .tm-ampliada[open]{animation:cm-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-corpo .capa-ampliar,.tema-corpo .colecao-logo,.tema-corpo .cm-etiqueta{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  .tema-corpo .cm-duas,.tema-corpo .cm-temas-grade{grid-template-columns:1fr;gap:30px}
  .tema-corpo .cm-foto{max-width:360px}
  .tema-corpo .cm-pista{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:767px){
  .tema-corpo .colecao-topo{padding-block:44px 56px}
  .tema-corpo .cm-respingo-rosa{width:46%}
  .tema-corpo .cm-respingo-chao{width:78%}
  .tema-corpo .cm-chao-topo{width:56%}
  .tema-corpo .cm-foto-respingo{translate:10px 10px}
  .tema-corpo .cm-cartao{padding:30px 20px 22px;border-radius:18px}
  .tema-corpo .secao-descricao{padding-bottom:56px}
  .tema-corpo .cm-foto{max-width:280px}
  .tema-corpo .cm-etiqueta{font-size:.88rem}
  .tema-corpo .cm-raia{height:70px;gap:10px;padding-right:32px}
  .tema-corpo .cm-raia b{width:36px;height:36px;font-size:1.15rem}
  .tema-corpo .cm-corredor img{height:58px}
  .tema-corpo .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-corpo .cm-retrato{align-self:flex-start;width:150px;margin:0 0 16px 34px;z-index:1}
  .tema-corpo .placeholder-flipbook{min-height:260px}
  .tema-corpo .grade-capas{grid-template-columns:1fr 1fr;gap:20px 14px}
  .tema-corpo .cm-cta-rosa{width:52%}
}

/* rodapé desta coleção: o preto do livro (o resto do rodapé é o mesmo do site) */
.tema-corpo ~ .site-footer{--cor-rodape:#111111}