/*
  Tema da página da coleção Viver Cirandar: o visual do próprio livro
  (rosa aquarelado, bolinhas azul/rosa/verde, anel de pontos, a ondinha do logo e a menina dos balões).
  Só vale dentro de <main class="tema-viver">; textos e ordem das seções não mudam.
  Títulos na Grandstander (a mais próxima da Skrapbook do livro). Sobre o rosa as bolinhas só
  ficam transparentes; a mistura (multiply) só em fundo claro, onde fica igual às páginas do livro.
  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-viver{
  --vc-magenta:#D70F5A;
  --vc-vinho:#8A1240;
  --vc-rosa-bola:#E5508A;
  --vc-azul:#4BAAE1;
  --vc-azul-titulo:#2B8FD0;
  --vc-verde:#A0D75A;
  --vc-rosa:#F5BED7;
  --vc-rosa-claro:#FDEAF2;
  --vc-rosa-borda:#F8D3E3;
  --vc-verde-claro:#F1F9E6;
  --vc-titulo:"Grandstander", var(--fonte);
}

/* Bolinhas, anel de pontos e ondas (desenhos sem texto) */
.tema-viver .vc-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tema-viver .vc-bola{position:absolute;border-radius:50%;pointer-events:none}
.tema-viver .vc-anel{position:absolute;aspect-ratio:1;pointer-events:none;background:var(--vc-magenta);
  -webkit-mask:url(../img/viver/anel.svg) center/contain no-repeat;mask:url(../img/viver/anel.svg) center/contain no-repeat}
.tema-viver .vc-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: rosa aquarelado da capa ===== */
.tema-viver .colecao-topo{position:relative;padding-block:64px 58px;
  background:linear-gradient(transparent calc(100% - 56px),var(--vc-rosa)),  /* rosa liso no pé: emenda sem linha com a onda */
             url(../img/viver/aquarela.svg) 0 0/480px 480px,
             radial-gradient(60% 90% at 18% 20%,rgba(255,255,255,.35),transparent 65%),
             var(--vc-rosa)}
.tema-viver .colecao-topo .container{position:relative;z-index:1}
.tema-viver .colecao-topo .rotulo{color:var(--vc-vinho)}
.tema-viver .colecao-topo h1{color:var(--vc-magenta);font-family:var(--vc-titulo);font-weight:800;font-variant-caps:small-caps;
  font-size:clamp(2.3rem,5vw,3.4rem);letter-spacing:.01em}
.tema-viver .colecao-tagline{color:#5A1A34}
.tema-viver .colecao-topo .vc-onda-topo{top:100%;background:var(--vc-rosa);z-index:2}
.tema-viver .vc-t1{width:240px;height:240px;right:-70px;top:-80px;background:var(--vc-azul);opacity:.85}
.tema-viver .vc-t2{width:170px;height:170px;right:130px;top:-70px;background:var(--vc-rosa-bola);opacity:.7}
.tema-viver .vc-t3{width:110px;height:110px;right:60px;bottom:26px;background:var(--vc-verde);opacity:.85}
.tema-viver .vc-t4{width:280px;height:280px;left:-130px;bottom:-170px;border:2px solid var(--vc-verde)}
.tema-viver .vc-t5{width:56px;height:56px;left:40%;bottom:24px;background:var(--vc-azul);opacity:.45}
.tema-viver .vc-t6{width:22px;height:22px;left:46%;top:40px;background:var(--vc-verde);opacity:.8}
/* logo num medalhão com o anel de pontos da capa (gira devagar, como uma ciranda) */
.tema-viver .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(138,18,64,.45);transition:transform .4s ease}
.tema-viver .colecao-logo:hover{transform:scale(1.03)}
.tema-viver .colecao-logo img{width:156px;height:auto}
.tema-viver .colecao-logo::before{content:"";position:absolute;inset:-18px;background:var(--vc-magenta);
  -webkit-mask:url(../img/viver/anel.svg) center/contain no-repeat;mask:url(../img/viver/anel.svg) center/contain no-repeat}

/* ===== descrição: cartão como a caixa "Acompanham este livro" ===== */
.tema-viver .secao-descricao{padding-top:104px}
.tema-viver .vc-pagina{position:relative;margin-inline:auto;background:#FFF5F9;border:2px solid var(--vc-rosa-borda);
  border-radius:24px;padding:40px 44px 32px;box-shadow:0 18px 40px -28px rgba(138,18,64,.35)}
.tema-viver .vc-pagina p{position:relative}
.tema-viver .vc-d1{width:64px;height:64px;top:-28px;right:44px;background:var(--vc-azul);opacity:.85;mix-blend-mode:multiply}
.tema-viver .vc-d2{width:42px;height:42px;top:-14px;right:14px;background:var(--vc-verde);opacity:.9;mix-blend-mode:multiply}
.tema-viver .vc-d3{width:26px;height:26px;top:30px;right:-13px;background:var(--vc-rosa-bola);opacity:.8}
.tema-viver .vc-anel-d{width:92px;left:-36px;bottom:-36px}

/* ===== títulos das seções: fonte do livro + ondinha do logo ===== */
.tema-viver .secao-topo h2{color:var(--vc-azul-titulo);font-family:var(--vc-titulo);font-weight:800;font-variant-caps:small-caps}
.tema-viver .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-viver .secao-topo.centro h2::after{margin-inline:auto}

/* ===== demonstração: a menina dos balões apresenta o livro ===== */
.tema-viver .tm-palco{display:flex;align-items:center;gap:10px}
.tema-viver .tm-personagem{flex:0 0 auto;width:clamp(140px,15vw,210px);height:auto}
.tema-viver .tm-palco .flipbook-caixa{flex:1;min-width:0}
.tema-viver .flipbook-caixa{background:var(--vc-rosa-claro);border:2px solid var(--vc-rosa-borda)}
.tema-viver .nota-visualizacao{color:#8A4A64}

/* ===== capas: fundo verde da "Ficha técnica" e círculos nos cantos ===== */
.tema-viver .secao.fundo{position:relative;overflow:hidden;background:var(--vc-verde-claro);padding-block:110px 104px}
.tema-viver .secao.fundo .container{position:relative;z-index:2}
.tema-viver .vc-onda-capas{top:0;background:#fff;z-index:1}
/* onda rosa no pé da seção, por cima das bolinhas do canto: elas ficam apoiadas no fundo */
.tema-viver .vc-onda-capas-fim{bottom:0;background:var(--vc-rosa);z-index:1;transform:scaleY(-1)}
.tema-viver .vc-c1{width:320px;height:320px;right:-90px;bottom:-130px;background:var(--vc-verde);opacity:.85}
.tema-viver .vc-c2{width:210px;height:210px;right:150px;bottom:-96px;background:var(--vc-azul);opacity:.8;mix-blend-mode:multiply}
.tema-viver .vc-c3{width:240px;height:240px;left:-110px;top:50px;border:2px solid var(--vc-azul);opacity:.55}
.tema-viver .vc-anel-c{width:120px;right:7%;top:64px}
/* capas (08/10/2026: entraram o Infantil 4 e 5, em pé; o 2 e o 3 são deitados): todas na mesma altura. No computador, as
   quatro lado a lado; no tablet, duas a duas (as deitadas numa linha, as em pé na outra); no celular, ver lá embaixo */
.tema-viver .grade-capas{grid-template-columns:repeat(4,auto);justify-content:center;justify-items:center;align-items:start;gap:30px 34px}
.tema-viver .grade-capas .capa-ampliar img{width:auto;height:220px}
@media (max-width:1099px){ .tema-viver .grade-capas{grid-template-columns:repeat(2,auto)} }
.tema-viver .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(90,26,52,.5);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-viver .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-viver .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-viver .capa-ampliar:focus-visible{outline:3px solid var(--vc-magenta);outline-offset:4px}
@media (hover:hover){
  .tema-viver .capa-ampliar:hover{transform:perspective(900px) rotateY(-10deg) rotate(-1.5deg) translateY(-6px);
    box-shadow:14px 26px 34px -18px rgba(90,26,52,.55)}
}
.tema-viver .capa figcaption{color:var(--vc-vinho);font-weight:700}
.tema-viver .capa figcaption::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;
  background:var(--cor-ano,var(--vc-magenta))}
/* capa ampliada: janela por cima da página (não sai dela) */
.tema-viver .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tema-viver .tm-ampliada::backdrop{background:rgba(90,26,52,.8)}
.tema-viver .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-viver .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--vc-magenta);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-viver .tm-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: rosa com ondinha e bolinhas ===== */
.tema-viver .colecao-cta{position:relative;overflow:hidden;padding-block:80px 84px;
  background:linear-gradient(var(--vc-rosa),transparent 56px),  /* rosa liso no topo: emenda com a onda das capas */
             url(../img/viver/aquarela.svg) 0 0/480px 480px,var(--vc-rosa)}
.tema-viver .colecao-cta .container{position:relative;z-index:2}
.tema-viver .botao-colecao{background:var(--vc-magenta)}
.tema-viver .vc-f1{width:200px;height:200px;left:-70px;bottom:-90px;background:var(--vc-azul);opacity:.8}
.tema-viver .vc-f2{width:120px;height:120px;left:90px;bottom:-60px;background:var(--vc-verde);opacity:.85}
.tema-viver .vc-f3{width:170px;height:170px;right:-50px;top:44px;border:2px solid #fff;opacity:.9}
.tema-viver .vc-f4{width:34px;height:34px;right:130px;bottom:30px;background:var(--vc-rosa-bola);opacity:.7}

/* ===== animações (só com .tm-js) ===== */
@keyframes vc-flutuar{to{translate:0 -14px}}
@keyframes vc-girar{to{rotate:360deg}}
@keyframes vc-balao{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-1.5deg)}}
@keyframes vc-zoom{from{opacity:0;transform:scale(.92)}}
/* só flutuam as bolinhas que aparecem inteiras; as cortadas pela borda ficam paradas, apoiadas nela */
.tm-js .tema-viver :is(.vc-t3,.vc-t5,.vc-t6,.vc-d1,.vc-d2,.vc-d3,.vc-f4){animation:vc-flutuar 8s ease-in-out infinite alternate}
.tm-js .tema-viver :is(.vc-t5,.vc-d2){animation-duration:11s;animation-delay:-3s}
.tm-js .tema-viver :is(.vc-t6,.vc-d3,.vc-f4){animation-duration:6.5s;animation-delay:-5s}
.tm-js .tema-viver .colecao-logo::before{animation:vc-girar 70s linear infinite}
.tm-js .tema-viver .vc-anel{animation:vc-girar 90s linear infinite}
.tm-js .tema-viver .vc-pagina p,
.tm-js .tema-viver .capa{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-viver .vc-pagina p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-viver .vc-pagina p:nth-of-type(3){transition-delay:.24s}
.tm-js .tema-viver .capa:nth-child(2){transition-delay:.1s}
.tm-js .tema-viver .vc-pagina p.tm-visivel,
.tm-js .tema-viver .capa.tm-visivel{opacity:1;translate:0 0}
.tm-js .tema-viver .tm-personagem{opacity:0;translate:0 40px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-viver .tm-personagem.tm-visivel{opacity:1;translate:0 0;animation:vc-balao 5s ease-in-out 1.2s infinite}
@media (prefers-reduced-motion:no-preference){
  .tema-viver .tm-ampliada[open]{animation:vc-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-viver .capa-ampliar,.tema-viver .colecao-logo{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  .tema-viver .colecao-logo{width:170px;height:170px}
  .tema-viver .colecao-logo img{width:132px}
  .tema-viver .colecao-logo::before{inset:-15px}
}
@media (max-width:767px){
  .tema-viver .colecao-topo{padding-block:44px 48px}
  .tema-viver .vc-onda{height:22px;-webkit-mask-size:180px 100%;mask-size:180px 100%}
  .tema-viver .vc-t1{width:170px;height:170px;right:-70px;top:-70px}
  .tema-viver .vc-t2{width:110px;height:110px;right:60px;top:-60px}
  .tema-viver .vc-t3{width:70px;height:70px;right:24px;bottom:40px}
  .tema-viver .vc-t5,.tema-viver .vc-t6{display:none}
  .tema-viver .colecao-logo{width:140px;height:140px}
  .tema-viver .colecao-logo img{width:108px}
  .tema-viver .colecao-logo::before{inset:-13px}
  .tema-viver .secao-descricao{padding-top:84px}
  .tema-viver .vc-pagina{padding:34px 20px 22px;border-radius:18px}
  .tema-viver .vc-d1{width:48px;height:48px;right:34px;top:-22px}
  .tema-viver .vc-d2{width:32px;height:32px;right:10px;top:-10px}
  .tema-viver .vc-d3{display:none}
  .tema-viver .vc-anel-d{width:70px;left:-22px;bottom:-26px}
  .tema-viver .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-viver .tm-personagem{align-self:center;width:120px;margin-bottom:-10px;position:relative;z-index:1}
  .tema-viver .secao.fundo{padding-block:88px 84px}
  .tema-viver .grade-capas{grid-template-columns:1fr 1fr;gap:20px 14px;justify-items:stretch}
  .tema-viver .grade-capas .capa-ampliar img{width:100%;height:auto}  /* duas por linha, na largura da coluna, como antes */
  .tema-viver .vc-c1{width:200px;height:200px;right:-70px;bottom:-80px}
  .tema-viver .vc-c2{width:130px;height:130px;right:90px;bottom:-60px}
  .tema-viver .vc-c3{width:150px;height:150px;left:-80px;top:40px}
  .tema-viver .vc-anel-c{width:80px;right:4%;top:44px}
  .tema-viver .colecao-cta{padding-block:64px 64px}
  .tema-viver .vc-f1{width:140px;height:140px;left:-60px;bottom:-70px}
  .tema-viver .vc-f2{width:80px;height:80px;left:50px;bottom:-40px}
  .tema-viver .vc-f3{width:120px;height:120px;right:-50px;top:40px}
  .tema-viver .vc-f4{right:70px}
}

/* rodapé desta coleção: o vinho do livro, um pouco mais escuro para a letra pequena (o resto do rodapé é o mesmo do site) */
.tema-viver ~ .site-footer{--cor-rodape:#7F113B}

/* correção (26/09/2026): entre 1025 e ~1180 px a forma que gira atrás do logo passava da borda direita a cada volta
   e a página "balançava" para o lado. Corta só na horizontal, o que já ficava fora da tela (nada visível muda). */
.tema-viver .colecao-topo{overflow-x:clip}