/*
  Tema da página da coleção Cirandar na Leitura (16/10/2026): o visual do livro "Trilhas da Imaginação", o da degustação:
  o verde da capa com círculos translúcidos e um arco de pontos, o macaco pendurado, as borboletas, a folha roxa e os
  cogumelos (recortados da capa), o azul-céu das páginas de dentro e a menina da lua do logo ao lado do livro.
  Só vale dentro de <main class="tema-leitura">; textos e ordem das seções não mudam. Títulos em Playwrite BR, a letra
  cursiva escolar usada no título do livro. As animações só ligam com .tm-js no <html> (e não quando a pessoa pede
  "menos movimento").
*/
.tema-leitura{
  --cl-verde:#79C05D;        /* fundo da capa */
  --cl-verde-escuro:#3F8F45; /* colinas e círculos */
  --cl-verde-claro:#EAF5DF;  /* seção das capas */
  --cl-mata:#2B6B34;         /* texto escuro sobre verde, botão e rodapé */
  --cl-ceu:#BFE2F3;          /* página da dedicatória */
  --cl-ceu-claro:#E8F5FB;
  --cl-ceu-borda:#A9D6EC;
  --cl-roxo:#6C2169;         /* roxo do logo */
  --cl-tinta:#1B2A33;
  --cl-ouro:#EBD84F;
  --cl-laranja:#E9803A;
  --cl-teal:#1E8F8A;
  --cl-titulo:"Playwrite BR", "Comic Sans MS", cursive;
}

/* desenhos soltos (sem texto): camadas dentro de cada seção */
.tema-leitura .cl-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tema-leitura .cl-disco{position:absolute;border-radius:50%;pointer-events:none}
.tema-leitura .cl-deco img{position:absolute;display:block;height:auto}
.tema-leitura .cl-onda{position:absolute;left:0;right:0;height:30px;pointer-events:none;
  -webkit-mask:url(../img/viver/onda.svg) left top/240px 100% repeat-x;mask:url(../img/viver/onda.svg) left top/240px 100% repeat-x}

/* ===== topo: o verde da capa ===== */
.tema-leitura .colecao-topo{position:relative;padding-block:64px 58px;
  background:radial-gradient(60% 90% at 14% 20%,rgba(255,255,255,.22),transparent 65%),var(--cl-verde)}
.tema-leitura .colecao-topo .container{position:relative;z-index:1}
.tema-leitura .colecao-topo .rotulo{color:#1E4D2B}
.tema-leitura .colecao-topo h1{color:var(--cl-tinta);font-family:var(--cl-titulo);font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.3;letter-spacing:0}
.tema-leitura .colecao-tagline{color:#1E4D2B;font-weight:600}
.tema-leitura .colecao-topo .cl-onda-topo{top:100%;background:var(--cl-verde);z-index:2}
/* o círculo mais escuro e translúcido (embaixo) e o arco de pontos da capa */
/* o menino do livro espia do canto esquerdo (só onde a margem da página dá espaço: ele não encosta no texto) */
.tema-leitura .cl-menino{width:164px;left:-10px;bottom:-76px}
@media (max-width:1359px){ .tema-leitura .cl-deco .cl-menino{display:none} }
.tema-leitura .cl-d2{width:230px;height:230px;right:24%;bottom:-120px;background:rgba(40,100,40,.18)}
.tema-leitura .cl-pontilhado{position:absolute;width:420px;height:420px;right:-120px;top:-40px;border-radius:50%;
  border:5px dotted var(--cl-teal);opacity:.7}
.tema-leitura .cl-macaco{width:112px;right:30%;top:0}   /* longe do medalhão do logo: antes ficava atrás do anel que gira */
.tema-leitura .cl-folha{width:140px;right:0;bottom:-10px}
.tema-leitura .cl-borboleta{width:58px}
.tema-leitura .cl-b1{left:46%;top:38px;rotate:-12deg}
.tema-leitura .cl-b2{width:46px;left:55%;bottom:56px;rotate:14deg}
/* logo num medalhão com o arco de pontos da capa */
.tema-leitura .colecao-logo{position:relative;width:200px;height:200px;border-radius:50%;padding:0;display:grid;place-items:center;
  box-shadow:0 18px 40px -18px rgba(20,60,25,.55);transition:transform .4s ease}
.tema-leitura .colecao-logo:hover{transform:scale(1.03)}
.tema-leitura .colecao-logo img{width:176px;height:auto}
.tema-leitura .colecao-logo::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:6px dotted var(--cl-teal)}

/* ===== descrição: a página azul da dedicatória, com os círculos do livro ===== */
.tema-leitura .secao-descricao{padding-top:104px}
.tema-leitura .cl-pagina{position:relative;margin-inline:auto;background:var(--cl-ceu);border-radius:24px;overflow:hidden;
  padding:40px 44px 78px;box-shadow:0 18px 40px -28px rgba(20,60,80,.45)}
.tema-leitura .cl-pagina p{position:relative;z-index:1;color:var(--cl-tinta)}
/* os círculos ficam só na faixa de baixo do cartão, onde não há texto (como na página da dedicatória) */
.tema-leitura .cl-p1{width:150px;height:150px;right:-30px;bottom:-84px;background:rgba(150,40,30,.5)}
.tema-leitura .cl-p2{width:110px;height:110px;right:100px;bottom:-62px;background:rgba(60,140,220,.45)}
.tema-leitura .cl-p3{width:80px;height:80px;right:176px;bottom:-48px;border:2px solid rgba(60,140,220,.7)}

/* ===== títulos das seções ===== */
.tema-leitura .secao-topo h2{color:var(--cl-mata);font-family:var(--cl-titulo);font-weight:400;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.4}
.tema-leitura .secao-topo h2::after{content:"";display:block;width:152px;height:16px;margin-top:10px;
  background:url(../img/viver/ondinha.svg) center/152px 16px no-repeat}
.tema-leitura .secao-topo.centro h2::after{margin-inline:auto}
.tema-leitura .aviso-degustacao{color:#35566A}

/* ===== demonstração: a menina da lua à direita do livro, olhando para ele ===== */
.tema-leitura .secao-demonstracao{background:linear-gradient(var(--cl-ceu-claro),#fff)}
.tema-leitura .tm-palco{display:flex;flex-direction:row-reverse;align-items:center;gap:16px}
.tema-leitura .tm-personagem{flex:0 0 auto;width:clamp(130px,13vw,180px);height:auto}
.tema-leitura .tm-palco > :last-child{flex:1;min-width:0}
.tema-leitura .flipbook-caixa{background:var(--cl-ceu-claro);border:2px solid var(--cl-ceu-borda)}
.tema-leitura .nota-visualizacao{color:#35566A}

/* ===== capas: verde claro, com os cogumelos da capa no canto ===== */
.tema-leitura .secao.fundo{position:relative;overflow:hidden;background:var(--cl-verde-claro);padding-block:110px 104px}
.tema-leitura .secao.fundo .container{position:relative;z-index:2}
.tema-leitura .cl-onda-capas{top:0;background:#fff;z-index:1}
.tema-leitura .cl-c1{width:300px;height:300px;right:-90px;top:30px;background:rgba(63,143,69,.18)}
/* os cogumelos e a folha roxa ficam na seção do botão, um de cada lado, apoiados no pé da seção */
.tema-leitura .cl-cogumelos{width:190px;left:0;bottom:0;z-index:1}
.tema-leitura .cl-b3{width:52px;right:11%;top:84px;rotate:16deg}
/* capas: quadradas, todas na mesma altura; 4 lado a lado no computador e 2 a 2 no tablet e no celular */
.tema-leitura .grade-capas{grid-template-columns:repeat(4,auto);justify-content:center;justify-items:center;align-items:start;gap:30px 34px}
.tema-leitura .grade-capas .capa-ampliar img{width:auto;height:220px}
@media (max-width:1099px){ .tema-leitura .grade-capas{grid-template-columns:repeat(2,auto)} }
.tema-leitura .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(20,60,25,.55);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-leitura .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-leitura .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,.24),rgba(255,255,255,.22) 45%,rgba(0,0,0,.06))}
.tema-leitura .capa-ampliar:focus-visible{outline:3px solid var(--cl-roxo);outline-offset:4px}
@media (hover:hover){
  .tema-leitura .capa-ampliar:hover{transform:perspective(900px) rotateY(-10deg) rotate(-1.5deg) translateY(-6px);
    box-shadow:14px 26px 34px -18px rgba(20,60,25,.6)}
}
.tema-leitura .capa figcaption{color:var(--cl-mata);font-weight:700}
.tema-leitura .capa figcaption::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;
  background:var(--cor-ano,var(--cl-roxo))}
/* capa ampliada: janela por cima da página (não sai dela) */
.tema-leitura .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tema-leitura .tm-ampliada::backdrop{background:rgba(20,50,25,.82)}
.tema-leitura .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,.7)}
.tema-leitura .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cl-roxo);color:#fff;font-family:var(--fonte);font-size:1.15rem;font-weight:800;line-height:1;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.tema-leitura .tm-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: verde da capa, com a folha roxa ===== */
.tema-leitura .colecao-cta{position:relative;overflow:hidden;padding-block:80px 84px;background:var(--cl-verde)}
.tema-leitura .colecao-cta .container{position:relative;z-index:2}
.tema-leitura .botao-colecao{background:var(--cl-mata);color:#fff}
.tema-leitura .cl-folha-cta{width:130px;right:0;bottom:0}

/* ===== animações (só com .tm-js) ===== */
@keyframes cl-flutuar{0%,100%{translate:0 0}50%{translate:10px -14px}}
@keyframes cl-balancar{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes cl-zoom{from{opacity:0;transform:scale(.92)}}
.tm-js .tema-leitura .cl-borboleta{animation:cl-flutuar 6s ease-in-out infinite}
.tm-js .tema-leitura .cl-b2{animation-duration:7.5s;animation-delay:-2s}
.tm-js .tema-leitura .cl-b3{animation-duration:8s;animation-delay:-4s}
.tm-js .tema-leitura .cl-macaco{transform-origin:50% 0;animation:cl-balancar 5s ease-in-out infinite}
.tm-js .tema-leitura .colecao-logo::before{animation:cl-girar 80s linear infinite}
@keyframes cl-girar{to{rotate:360deg}}
.tm-js .tema-leitura .cl-pagina p,
.tm-js .tema-leitura .capa{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-leitura .cl-pagina p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-leitura .capa:nth-child(2){transition-delay:.1s}
.tm-js .tema-leitura .cl-pagina p.tm-visivel,
.tm-js .tema-leitura .capa.tm-visivel{opacity:1;translate:0 0}
.tm-js .tema-leitura .tm-personagem{opacity:0;translate:0 40px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-leitura .tm-personagem.tm-visivel{opacity:1;translate:0 0}
@media (prefers-reduced-motion:no-preference){
  .tema-leitura .tm-ampliada[open]{animation:cl-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-leitura .capa-ampliar,.tema-leitura .colecao-logo{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  .tema-leitura .colecao-logo{width:170px;height:170px}
  .tema-leitura .colecao-logo img{width:150px}
  .tema-leitura .colecao-logo::before{inset:-14px}
  .tema-leitura .cl-macaco{right:6%;width:92px}
  .tema-leitura .cl-pontilhado{width:320px;height:320px;right:-120px}
}
@media (max-width:767px){
  .tema-leitura .colecao-topo{padding-block:104px 48px}  /* sobra espaço no alto: o macaco fica pendurado acima do título */
  .tema-leitura .cl-onda{height:22px;-webkit-mask-size:180px 100%;mask-size:180px 100%}
  .tema-leitura .colecao-logo{width:140px;height:140px}
  .tema-leitura .colecao-logo img{width:124px}
  .tema-leitura .colecao-logo::before{inset:-12px;border-width:5px}
  .tema-leitura .cl-macaco{width:72px;right:4%}
  .tema-leitura .cl-folha{width:90px}
  .tema-leitura .cl-b1{left:auto;right:30%;top:20px;width:40px}
  .tema-leitura .cl-b2{display:none}
  .tema-leitura .secao-descricao{padding-top:84px}
  .tema-leitura .cl-pagina{padding:34px 20px 64px;border-radius:18px}
  .tema-leitura .cl-p1{width:110px;height:110px;bottom:-60px}
  .tema-leitura .cl-p2,.tema-leitura .cl-p3{display:none}
  /* no celular a menina vem em cima do livro, olhando para ele */
  .tema-leitura .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-leitura .tm-personagem{align-self:flex-end;width:96px;margin-bottom:-10px;margin-right:12px;position:relative;z-index:1}
  .tema-leitura .secao.fundo{padding-block:88px 84px}
  .tema-leitura .grade-capas{grid-template-columns:1fr 1fr;gap:20px 14px;justify-items:stretch}
  .tema-leitura .grade-capas .capa-ampliar img{width:100%;height:auto}
  .tema-leitura .cl-cogumelos{width:104px}
  .tema-leitura .cl-c1{width:200px;height:200px}
  .tema-leitura .colecao-cta{padding-block:56px 120px}  /* o cogumelo e a folha ficam embaixo do botão, não atrás dele */
  .tema-leitura .cl-folha-cta{width:76px}
}

/* rodapé desta coleção: o verde-mata do tema (o resto do rodapé é o mesmo do site) */
.tema-leitura ~ .site-footer{--cor-rodape:#2B6B34}