/*
  Tema da página da coleção Mova-se (Educação para Mobilidade Urbana, Segura e Sustentável), 13/10/2026.
  Tirado do próprio livro (degustação do livro do professor do 2º ano): o céu azul de bolinhas do alto das páginas, a base
  vermelha com a placa "dê a preferência", as setas em círculo do "O" do logo, a estrada com a faixa amarela e a faixa de
  pedestres, as cores dos Quatro Pilares (pág. 11) e dos selos das seções (pág. 16 a 19), e os personagens do livro.
  Títulos na Sniglet, com o contorno branco e a sombra dos títulos do livro (o livro usa uma letra arredondada e cheia).
  Só vale dentro de <main class="tema-mova">. 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-mova{
  --mv-azul:#2D97D1;
  --mv-azul-escuro:#1D63AE;
  --mv-azul-noite:#0C4F8A;
  --mv-vermelho:#DE3D44;
  --mv-amarelo:#FFD50D;
  --mv-coral:#E36451;
  --mv-verde:#087D2F;
  --mv-asfalto:#4A474E;
  --mv-texto:#3A4552;
  --mv-titulo:"Sniglet", var(--fonte);
  /* contorno branco + sombra suave, como os títulos do livro */
  --mv-contorno:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px -2px #fff,2px -2px #fff,-2px 2px #fff,0 8px 16px rgba(29,47,64,.18);
}
.tema-mova p{color:var(--mv-texto)}
.tema-mova .secao-topo h2{font-family:var(--mv-titulo);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.12;
  font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--mv-azul-escuro);text-shadow:var(--mv-contorno)}
.tema-mova .secao-topo p{font-size:1rem}
.tema-mova .mv-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* onda do alto/da base das páginas do livro (a cor de cada uma vem de color) */
.tema-mova .mv-onda{position:absolute;left:0;width:100%;height:clamp(40px,6vw,80px);display:block;pointer-events:none}
.tema-mova .mv-onda path{fill:currentColor}

/* ===== topo: o céu azul de bolinhas do livro, as setas do logo e o logo numa placa ===== */
.tema-mova .colecao-topo{position:relative;overflow:hidden;padding-block:60px 108px;background:linear-gradient(180deg,#2A90CB 0%,var(--mv-azul) 55%,#3AA6DF 100%)}
.tema-mova .colecao-topo .container{position:relative;z-index:2}
/* bolinhas em fileiras, como nas manchas azuis das páginas; somem para a esquerda, onde fica o texto */
.tema-mova .mv-pontos{position:absolute;inset:0;background:radial-gradient(ellipse 3px 4px at center,rgba(255,255,255,.2) 98%,transparent) 0 0/26px 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent 15%,#000 70%);mask-image:linear-gradient(90deg,transparent 15%,#000 70%)}
.tema-mova .mv-setas{position:absolute;top:50%;width:300px;height:300px;margin-top:-178px;right:calc(max(20px,(100% - var(--container))/2 + 20px) + 60px);
  fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;opacity:.2}
.tema-mova .mv-setas .mv-ponta{fill:#fff;stroke:none}
.tema-mova .mv-nuvem{position:absolute;height:26px;border-radius:999px;background:#fff;opacity:.85}
.tema-mova .mv-nuvem::before,.tema-mova .mv-nuvem::after{content:"";position:absolute;bottom:8px;border-radius:50%;background:#fff}
.tema-mova .mv-nuvem::before{left:18%;width:38%;aspect-ratio:1}
.tema-mova .mv-nuvem::after{left:44%;width:30%;aspect-ratio:1}
.tema-mova .mv-n1{width:110px;top:26px;left:52%}
.tema-mova .mv-n2{width:78px;top:64%;left:4%;opacity:.55}
.tema-mova .colecao-topo .rotulo{display:inline-flex;align-items:center;gap:12px;color:#fff;letter-spacing:.16em}
/* um semáforo pequenino no lugar do tracinho do rótulo */
.tema-mova .colecao-topo .rotulo::before{content:"";flex:0 0 auto;width:14px;height:36px;border-radius:7px;box-shadow:0 3px 8px rgba(12,79,138,.35);
  background:radial-gradient(circle at 50% 7px,#FF5A5F 3.6px,transparent 4.2px),radial-gradient(circle at 50% 18px,#5E5634 3.6px,transparent 4.2px),
    radial-gradient(circle at 50% 29px,#1E4A2F 3.6px,transparent 4.2px),#2B2A2E}
.tema-mova .colecao-topo h1{font-family:var(--mv-titulo);font-weight:800;text-transform:uppercase;color:#fff;letter-spacing:.03em;line-height:1;
  font-size:clamp(2.7rem,6vw,4.3rem);margin:10px 0 12px;text-shadow:0 5px 0 rgba(12,79,138,.35)}
.tema-mova .colecao-topo .colecao-tagline{font-weight:600;font-size:1.15rem;max-width:520px;color:#fff}
/* o logo numa placa branca, com os quatro parafusos */
.tema-mova .colecao-logo{position:relative;padding:22px 26px;border-radius:20px;rotate:-2deg;
  background:radial-gradient(circle at 12px 12px,#C5D0DA 3px,transparent 3.6px),radial-gradient(circle at calc(100% - 12px) 12px,#C5D0DA 3px,transparent 3.6px),
    radial-gradient(circle at 12px calc(100% - 12px),#C5D0DA 3px,transparent 3.6px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#C5D0DA 3px,transparent 3.6px),#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.35),0 26px 40px -22px rgba(12,79,138,.7);transition:rotate .5s cubic-bezier(.2,.8,.2,1)}
.tema-mova .colecao-logo img{width:clamp(250px,28vw,380px);height:auto}
@media (hover:hover){.tema-mova .colecao-logo:hover{rotate:0deg}}
.tema-mova .mv-onda-topo{bottom:-1px;color:#EEF6FC}

/* ===== descrição: o texto num cartão com a estrada em cima e as crianças da capa do 2º ano na faixa de pedestres ===== */
.tema-mova .secao-descricao{background:#EEF6FC;padding-top:40px}
.tema-mova .mv-duas{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.tema-mova .mv-cartao{max-width:none;margin:0;background:#fff;border-radius:24px;padding:0 42px 28px;overflow:hidden;box-shadow:0 26px 50px -34px rgba(12,79,138,.45)}
.tema-mova .mv-cartao::before{content:"";display:block;height:16px;margin:0 -42px 30px;
  background:repeating-linear-gradient(90deg,var(--mv-amarelo) 0 30px,transparent 30px 52px) center/100% 3px no-repeat,var(--mv-asfalto)}
.tema-mova .mv-lema{display:inline-block;margin:22px 0 0;padding:14px 22px;border-radius:14px;background:var(--mv-amarelo);border:3px solid #2B2A2E;
  color:#2B2A2E;font-weight:600;line-height:1.45;box-shadow:0 14px 26px -18px rgba(43,42,46,.6)}
.tema-mova .mv-lema strong{font-weight:800}
.tema-mova .mv-capa-criancas{position:relative;width:100%;max-width:400px;justify-self:center;padding-bottom:18px}
.tema-mova .mv-capa-criancas img{position:relative;z-index:1;width:100%;height:auto}
/* faixa de pedestres no chão, em perspectiva, debaixo dos pés */
.tema-mova .mv-faixa-chao{position:absolute;left:-8%;right:-8%;bottom:0;height:86px;border-radius:12px;
  background:repeating-linear-gradient(90deg,#fff 0 20px,#57535B 20px 38px);transform:perspective(260px) rotateX(58deg);transform-origin:center bottom;
  box-shadow:0 18px 22px -14px rgba(29,47,64,.5)}

/* ===== metodologia: o trajeto (a estrada no meio, uma parada com placa para cada estratégia) ===== */
.tema-mova .mv-metodologia{background:#FFF6EA}
.tema-mova .mv-metodologia .secao-topo{max-width:820px}
.tema-mova .mv-metodologia .secao-topo h2{color:#D9475C}
.tema-mova .mv-trajeto{--estrada:62px;position:relative;max-width:1020px;margin:0 auto;padding-block:8px}
.tema-mova .mv-estrada{position:absolute;top:0;bottom:0;left:50%;width:var(--estrada);margin-left:calc(var(--estrada) / -2);border-radius:31px;
  background-color:var(--mv-asfalto);
  background-image:repeating-linear-gradient(180deg,var(--mv-amarelo) 0 26px,transparent 26px 46px),linear-gradient(90deg,#fff 3px,transparent 3px calc(100% - 3px),#fff calc(100% - 3px));
  background-size:4px 100%,100% 100%;background-position:center top,0 0;background-repeat:no-repeat;box-shadow:0 18px 30px -22px rgba(43,42,46,.7)}
.tema-mova .mv-carro{position:absolute;left:50%;top:calc(var(--progresso,0) * (100% - 64px) + 6px);width:30px;height:auto;margin-left:-15px;
  filter:drop-shadow(0 6px 5px rgba(0,0,0,.35));transition:top .3s linear}
.tema-mova .mv-paradas{position:relative;list-style:none;margin:0;padding:0;display:grid}
.tema-mova .mv-parada{position:relative;width:calc(50% - var(--estrada) / 2 - 58px);background:#fff;border-radius:22px;padding:24px 28px 20px;
  box-shadow:0 22px 40px -30px rgba(43,42,46,.55)}
.tema-mova .mv-parada:nth-child(odd){justify-self:start}
.tema-mova .mv-parada:nth-child(even){justify-self:end}
.tema-mova .mv-parada + .mv-parada{margin-top:-36px}
.tema-mova .mv-parada h3{font-weight:800;font-size:1.08rem;line-height:1.3;color:var(--mv-azul-escuro);margin:0 0 8px}
.tema-mova .mv-parada p{margin:0;font-size:.95rem;line-height:1.65}
/* a placa de cada parada fica entre o cartão e a estrada */
.tema-mova .mv-placa{position:absolute;top:22px;display:grid;place-items:center;width:46px;height:46px;color:#2B2A2E}
.tema-mova .mv-parada:nth-child(odd) .mv-placa{right:-60px}
.tema-mova .mv-parada:nth-child(even) .mv-placa{left:-60px}
.tema-mova .mv-placa svg{width:24px;height:24px}
.tema-mova .mv-placa-losango{background:var(--mv-amarelo);border:3px solid #2B2A2E;border-radius:7px;rotate:45deg;width:40px;height:40px;margin-inline:3px}
.tema-mova .mv-placa-losango svg{rotate:-45deg}
.tema-mova .mv-placa-circulo{background:#fff;border:6px solid var(--mv-vermelho);border-radius:50%;box-shadow:0 0 0 2px #fff}
.tema-mova .mv-placa-quadrado{background:var(--mv-azul-escuro);color:#fff;border-radius:9px;box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--mv-azul-escuro)}
.tema-mova .mv-placa-verde{background:var(--mv-verde);color:#fff;border-radius:9px;width:56px;height:40px;box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--mv-verde)}
.tema-mova .mv-parada:nth-child(odd) .mv-placa-verde{right:-65px}
.tema-mova .mv-parada:nth-child(even) .mv-placa-verde{left:-65px}

/* ===== Quatro Pilares (as cores da pág. 11), cada número como a luz de um semáforo ===== */
.tema-mova .mv-pilares{background:#F7F1FB}
.tema-mova .mv-pilares .secao-topo{max-width:860px;margin-bottom:58px}
.tema-mova .mv-pilares .secao-topo h2{color:#A50F68}
.tema-mova .mv-pilares-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tema-mova .mv-pilar{position:relative;background:var(--cor);border-radius:24px;padding:50px 22px 44px;text-align:center;box-shadow:0 24px 40px -28px rgba(43,42,46,.6)}
.tema-mova .mv-pilar h3{font-weight:800;font-size:1.12rem;line-height:1.25;color:#fff;margin:0 0 10px}
.tema-mova .mv-pilar p{margin:0;color:#fff;font-size:.93rem;line-height:1.6}
.tema-mova .mv-pilar:nth-child(4) h3,.tema-mova .mv-pilar:nth-child(4) p{color:#3A2A00}
.tema-mova .mv-pilar-num{position:absolute;top:-26px;left:50%;translate:-50% 0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#2B2A2E;color:#fff;font-family:var(--mv-titulo);font-weight:800;font-size:1.45rem;box-shadow:inset 0 0 0 5px var(--cor),0 0 0 4px #fff}
/* faixinha de pedestres no pé de cada cartão */
.tema-mova .mv-pilar::after{content:"";position:absolute;left:22px;right:22px;bottom:18px;height:8px;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 12px,transparent 12px 22px)}
.tema-mova .mv-pilar:nth-child(4)::after{background:repeating-linear-gradient(90deg,rgba(58,42,0,.35) 0 12px,transparent 12px 22px)}

/* ===== a turma: os personagens na faixa de pedestres; escolher um mostra a fala ===== */
.tema-mova .mv-turma{position:relative;background:linear-gradient(180deg,#DDEFFA 0%,#EEF7FD 100%);padding-top:clamp(84px,9vw,120px)}
.tema-mova .mv-onda-turma{top:-1px;rotate:180deg;color:#F7F1FB}
.tema-mova .mv-turma .secao-topo{max-width:820px}
.tema-mova .mv-turma .secao-topo h2{color:#E07B00}
.tema-mova .mv-turma-palco{position:relative;max-width:1080px;margin:0 auto}
.tema-mova .mv-falas{display:grid;min-height:170px;align-items:end;margin-bottom:22px}
.tema-mova .mv-fala{position:relative;max-width:800px;margin:0 auto;background:#fff;border:3px solid var(--cor);border-radius:28px;padding:20px 30px 18px;
  box-shadow:0 22px 40px -30px rgba(29,47,64,.55)}
/* o rabinho do balão */
.tema-mova .mv-fala::after{content:"";position:absolute;left:50%;bottom:-17px;width:28px;height:28px;margin-left:-14px;background:#fff;
  border:3px solid var(--cor);border-top:0;border-left:0;rotate:45deg;border-radius:0 0 6px 0}
.tema-mova .mv-fala p{margin:0;font-size:1rem;line-height:1.65}
.tema-mova .mv-fala .mv-fala-quem{font-weight:800;font-size:1.12rem;color:var(--cor);margin-bottom:6px}
.tema-mova .mv-fala-quem span{color:var(--mv-texto);font-weight:600}
.tema-mova .mv-fila{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:6px}
.tema-mova .mv-crianca{appearance:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 0 4px;border:0;background:none;cursor:pointer;
  font-family:var(--fonte);color:var(--mv-texto)}
.tema-mova .mv-crianca img{height:clamp(150px,17vw,226px);width:auto;max-width:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 10px 8px rgba(29,47,64,.2));transform-origin:bottom center;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.tema-mova .mv-nome{position:relative;margin-top:10px;font-family:var(--mv-titulo);font-weight:800;font-size:1.1rem;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;color:var(--mv-azul-escuro)}
.tema-mova .mv-apelido{font-size:.78rem;font-weight:600;line-height:1.3;text-align:center}
/* escolhido (e hover): só o sublinhado do site no nome, e a criança dá um passinho à frente */
.tema-mova .mv-nome::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--destaque-menu);opacity:0;transition:opacity .3s}
.tema-mova .mv-crianca[aria-selected="true"] .mv-nome::after{opacity:1}
.tema-mova .mv-crianca[aria-selected="true"] img{transform:translateY(-8px) scale(1.05)}
.tema-mova .mv-crianca:focus-visible{outline:3px solid var(--destaque-menu);outline-offset:4px;border-radius:12px}
@media (hover:hover){
  .tema-mova .mv-crianca:hover .mv-nome::after{opacity:1}
  .tema-mova .mv-crianca:hover img{transform:translateY(-8px) scale(1.05)}
}
/* a faixa de pedestres atrás dos pés (os nomes ficam abaixo dela) */
.tema-mova .mv-turma-palco > .mv-faixa{position:absolute;left:-2%;right:-2%;bottom:52px;height:70px;border-radius:14px;
  background:repeating-linear-gradient(90deg,#fff 0 34px,#57535B 34px 62px);transform:perspective(420px) rotateX(55deg);transform-origin:center bottom;
  box-shadow:0 20px 24px -16px rgba(29,47,64,.45)}

/* ===== seções do Diário do Estudante: os selos do livro, cada cartão com a borda solta na cor do selo ===== */
.tema-mova .mv-secoes{background:#FFF3F1}
.tema-mova .mv-secoes .secao-topo{max-width:820px;margin-bottom:28px}
.tema-mova .mv-secoes .secao-topo h2{color:#EE7316}
.tema-mova .mv-kicker{margin:0 0 6px;font-size:.8rem !important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mv-vermelho) !important}
/* as duas etapas (pág. 14) como placas de direção */
.tema-mova .mv-direcoes{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:0 0 44px}
.tema-mova .mv-direcao{display:flex;flex-direction:column;gap:2px;margin:0;padding:12px 52px 14px 22px;background:var(--mv-verde);border-radius:10px;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.9)}
.tema-mova .mv-direcao-2{background:var(--mv-azul-escuro)}
.tema-mova .mv-direcao span{color:#fff}
.tema-mova .mv-direcao-etapa{font-weight:800;font-size:.9rem;letter-spacing:.02em}
.tema-mova .mv-direcao-etapa small{font-weight:600;opacity:.85;margin-left:6px}
.tema-mova .mv-direcao-foco{font-weight:800;font-size:1.05rem;line-height:1.3}
.tema-mova .mv-secoes-grade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.tema-mova .mv-secao{display:flex;flex-direction:column;background:#fff;border:3px solid var(--cor);padding:16px 20px 20px;
  border-radius:34px 52px 36px 56px / 46px 32px 54px 36px;box-shadow:0 22px 36px -30px rgba(43,42,46,.55)}
.tema-mova .mv-secao h3{margin:0 0 12px;min-height:96px;display:flex;align-items:center}
.tema-mova .mv-secao h3 img{width:100%;height:auto;max-height:110px;object-fit:contain;object-position:left center}
.tema-mova .mv-secao p{margin:0;font-size:.9rem;line-height:1.6}

/* ===== degustação: a Bia, de mão aberta, apresenta o livro ===== */
.tema-mova .secao-demonstracao{background:#EEF6FC}
.tema-mova .tm-palco{display:flex;align-items:flex-end;gap:22px}
.tema-mova .mv-retrato{flex:0 0 auto;width:clamp(170px,19vw,250px)}
.tema-mova .tm-personagem{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 10px rgba(29,47,64,.2))}
.tema-mova .tm-palco > :last-child{flex:1;min-width:0}
.tema-mova .flipbook-caixa{background:#fff;border-radius:22px;box-shadow:0 26px 44px -32px rgba(12,79,138,.5)}

/* ===== capas do 1º ao 9º ano (livro do aluno), cada legenda com a cor do número da capa ===== */
.tema-mova .secao.fundo{background:#FFF8E6}
.tema-mova .secao.fundo .secao-topo{margin-inline:auto;text-align:center}
.tema-mova .secao.fundo .secao-topo h2{color:var(--mv-vermelho)}
.tema-mova .grade-capas{--colunas:5;display:flex;flex-wrap:wrap;justify-content:center;gap:30px 22px}
.tema-mova .grade-capas .capa{width:calc((100% - (var(--colunas) - 1) * 22px) / var(--colunas))}
.tema-mova .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 22px 34px -20px rgba(29,47,64,.55);transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-mova .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-mova .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,.25),rgba(255,255,255,.2) 45%,rgba(0,0,0,.05))}
.tema-mova .capa-ampliar:focus-visible{outline:3px solid var(--mv-azul-escuro);outline-offset:4px}
@media (hover:hover){
  .tema-mova .capa-ampliar:hover{transform:perspective(900px) rotateY(-8deg) translateY(-6px);box-shadow:14px 26px 34px -18px rgba(29,47,64,.55)}
}
.tema-mova .capa figcaption{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;font-weight:700;color:var(--mv-texto)}
.tema-mova .capa figcaption::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--cor-ano);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--cor-ano)}
/* capa ampliada: janela por cima da página (não sai dela) */
.tema-mova .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tema-mova .tm-ampliada::backdrop{background:rgba(12,40,70,.86)}
.tema-mova .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-mova .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:#fff;
  color:var(--mv-vermelho);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-mova .tm-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: a base vermelha das páginas, com a onda subindo e a placa "dê a preferência" no poste ===== */
.tema-mova .colecao-cta{position:relative;overflow:hidden;padding-block:clamp(84px,9vw,112px) 64px;background:var(--mv-vermelho)}
.tema-mova .colecao-cta .container{position:relative;z-index:1}
.tema-mova .mv-onda-cta{top:-1px;rotate:180deg;color:#FFF8E6}
.tema-mova .mv-preferencia{position:absolute;bottom:0;width:58px;height:auto;left:max(24px,(100% - var(--container))/2 + 30px);
  filter:drop-shadow(0 8px 8px rgba(80,10,15,.3))}
.tema-mova .botao-colecao{background:#fff;color:var(--mv-vermelho);font-weight:800;border-radius:999px;padding:15px 32px;box-shadow:0 16px 30px -16px rgba(80,10,15,.6)}

/* ===== animações (só com .tm-js) ===== */
@keyframes mv-gira{to{rotate:360deg}}
@keyframes mv-nuvem{0%,100%{translate:0 0}50%{translate:18px 0}}
@keyframes mv-zoom{from{opacity:0;transform:scale(.94)}}
/* o semáforo do rótulo: vermelho, verde, amarelo, devagar */
@keyframes mv-sinal{
  0%,40%{background:radial-gradient(circle at 50% 7px,#FF5A5F 3.6px,transparent 4.2px),radial-gradient(circle at 50% 18px,#5E5634 3.6px,transparent 4.2px),radial-gradient(circle at 50% 29px,#1E4A2F 3.6px,transparent 4.2px),#2B2A2E}
  41%,84%{background:radial-gradient(circle at 50% 7px,#5A2A2C 3.6px,transparent 4.2px),radial-gradient(circle at 50% 18px,#5E5634 3.6px,transparent 4.2px),radial-gradient(circle at 50% 29px,#3EE07A 3.6px,transparent 4.2px),#2B2A2E}
  85%,100%{background:radial-gradient(circle at 50% 7px,#5A2A2C 3.6px,transparent 4.2px),radial-gradient(circle at 50% 18px,#FFD50D 3.6px,transparent 4.2px),radial-gradient(circle at 50% 29px,#1E4A2F 3.6px,transparent 4.2px),#2B2A2E}
}
.tm-js .tema-mova .mv-setas{animation:mv-gira 48s linear infinite}
.tm-js .tema-mova .mv-nuvem{animation:mv-nuvem 14s ease-in-out infinite}
.tm-js .tema-mova .mv-n2{animation-duration:18s;animation-delay:-6s}
.tm-js .tema-mova .colecao-topo .rotulo::before{animation:mv-sinal 9s step-end infinite}
.tm-js .tema-mova .mv-cartao p,
.tm-js .tema-mova .capa,
.tm-js .tema-mova .tm-revela{opacity:0;translate:0 20px;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-mova .mv-cartao p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-mova .mv-pilar:nth-child(2),.tm-js .tema-mova .mv-secao:nth-child(4n+2){transition-delay:.1s}
.tm-js .tema-mova .mv-pilar:nth-child(3),.tm-js .tema-mova .mv-secao:nth-child(4n+3){transition-delay:.2s}
.tm-js .tema-mova .mv-pilar:nth-child(4),.tm-js .tema-mova .mv-secao:nth-child(4n+4){transition-delay:.3s}
.tm-js .tema-mova .mv-direcao-2{transition-delay:.15s}
.tm-js .tema-mova .mv-cartao p.tm-visivel,
.tm-js .tema-mova .capa.tm-visivel,
.tm-js .tema-mova .tm-revela.tm-visivel{opacity:1;translate:0 0}
/* paradas da metodologia: cada uma chega do lado da estrada em que está */
.tm-js .tema-mova .mv-parada:nth-child(odd){translate:-24px 0}
.tm-js .tema-mova .mv-parada:nth-child(even){translate:24px 0}
.tm-js .tema-mova .mv-parada.tm-visivel{translate:0 0}
.tm-js .tema-mova .tm-personagem{opacity:0;translate:-24px 0;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-mova .tm-personagem.tm-visivel{opacity:1;translate:0 0}
@media (prefers-reduced-motion:no-preference){
  .tema-mova .tm-ampliada[open]{animation:mv-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-mova .capa-ampliar,.tema-mova .mv-crianca img,.tema-mova .colecao-logo,.tema-mova .mv-carro{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1100px){
  .tema-mova .mv-secoes-grade{grid-template-columns:repeat(2,1fr)}
  .tema-mova .grade-capas{--colunas:3}
}
@media (max-width:1024px){
  .tema-mova .mv-duas{grid-template-columns:1fr;gap:30px}
  .tema-mova .mv-capa-criancas{max-width:330px}
  .tema-mova .mv-pilares-lista{grid-template-columns:repeat(2,1fr);gap:46px 22px}
  .tema-mova .mv-setas{width:220px;height:220px;margin-top:-110px;right:4%}
  .tema-mova .mv-n1{left:auto;right:6%;top:16px}
}
/* metodologia: a estrada vai para a esquerda e as paradas descem uma embaixo da outra */
@media (max-width:900px){
  .tema-mova .mv-trajeto{--estrada:40px}
  .tema-mova .mv-estrada{left:6px;margin-left:0}
  .tema-mova .mv-paradas{gap:20px}
  .tema-mova .mv-parada,.tema-mova .mv-parada:nth-child(odd),.tema-mova .mv-parada:nth-child(even){width:calc(100% - 72px);justify-self:end}
  .tema-mova .mv-parada + .mv-parada{margin-top:0}
  .tema-mova .mv-parada:nth-child(odd) .mv-placa,.tema-mova .mv-parada:nth-child(even) .mv-placa{left:-65px;right:auto}
  .tema-mova .mv-parada .mv-placa-verde{left:-71px !important;width:50px}
  .tema-mova .mv-carro{width:22px;margin-left:-11px}
  .tm-js .tema-mova .mv-parada:nth-child(odd),.tm-js .tema-mova .mv-parada:nth-child(even){translate:0 20px}
  .tm-js .tema-mova .mv-parada.tm-visivel{translate:0 0}
}
@media (max-width:767px){
  .tema-mova .colecao-topo{padding-block:44px 84px}
  .tema-mova .colecao-logo{padding:16px 18px;rotate:-1.5deg}
  .tema-mova .colecao-logo img{width:min(280px,72vw)}
  .tema-mova .mv-setas{display:none}
  .tema-mova .mv-cartao{padding:0 22px 22px;border-radius:20px}
  .tema-mova .mv-cartao::before{margin:0 -22px 24px}
  .tema-mova .mv-parada{padding:20px 20px 18px}
  .tema-mova .mv-pilares-lista{grid-template-columns:1fr;gap:46px}
  /* turma: a fila passa de lado com o dedo; o balão fica em cima */
  .tema-mova .mv-falas{min-height:0}
  .tema-mova .mv-fala{padding:18px 20px 16px;border-radius:22px}
  .tema-mova .mv-fila{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 4px 4px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .tema-mova .mv-fila::-webkit-scrollbar{display:none}
  .tema-mova .mv-crianca{flex:0 0 31%;scroll-snap-align:center}
  .tema-mova .mv-crianca img{height:150px}
  .tema-mova .mv-turma-palco > .mv-faixa{bottom:56px;height:50px}
  .tema-mova .mv-secoes-grade{grid-template-columns:1fr}
  .tema-mova .mv-secao h3{min-height:0}
  .tema-mova .mv-direcao{width:100%;max-width:360px}
  .tema-mova .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-mova .mv-retrato{align-self:flex-start;width:150px;margin:0 0 -6px 10px}
  .tema-mova .grade-capas{--colunas:2;gap:22px 16px}
  .tema-mova .grade-capas .capa{width:calc((100% - 16px) / 2)}
  .tema-mova .colecao-cta{padding-block:76px 56px}
  .tema-mova .mv-preferencia{width:40px;left:14px}
}

/* rodapé desta coleção: o azul-escuro do livro (o resto do rodapé é o mesmo do site) */
.tema-mova ~ .site-footer{--cor-rodape:#0C4F8A}