/*
  Tema da página da coleção Brasil Sorridente (saúde bucal): topo verde desenhado à mão (dente
  sorridente, bolhas de espuma, brilhos e um sorriso que se desenha), as manchas verde-água e laranja
  do catálogo e as ilustrações 3D das capas (o consultório ao lado do texto e a menina ao lado do livro).
  Só vale dentro de <main class="tema-sorridente">; textos e ordem das seções não mudam.
  Títulos na Fredoka (arredondada, como a Berlin Sans das capas).
  Manchas cortadas pela borda ficam paradas, apoiadas nela; só os brilhos (inteiros) piscam.
  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-sorridente{
  --bs-verde-agua:#10A090;
  --bs-verde-agua-escuro:#0B7A6E;
  --bs-laranja:#F89818;
  --bs-coral:#F85820;
  --bs-azul:#1D3F8F;
  --bs-fundo:#FFFDFB;
  --bs-rosado:#FFF4EF;
  --bs-agua-claro:#F4FBFA;
  --bs-verde:#0A6B34;          /* verde do logo, mais vivo */
  --bs-verde-claro:#1E9E4A;
  --bs-dourado:#F9D65C;        /* dourado do logo, claro */
  --bs-titulo:"Fredoka", var(--fonte);
}
.tema-sorridente .bs-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tema-sorridente .bs-mancha{position:absolute;pointer-events:none;
  -webkit-mask:url(../img/sorridente/mancha1.svg) center/contain no-repeat;mask:url(../img/sorridente/mancha1.svg) center/contain no-repeat}
.tema-sorridente .bs-brilho{position:absolute;width:22px;height:22px;pointer-events:none;background:var(--bs-laranja);
  -webkit-mask:url(../img/sorridente/brilho.svg) center/contain no-repeat;mask:url(../img/sorridente/brilho.svg) center/contain no-repeat}

/* ===== topo verde desenhado à mão: dente sorridente, bolhas de espuma e brilhos ===== */
/* a borda de baixo curva, como um sorriso */
.tema-sorridente .colecao-topo{position:relative;overflow:hidden;padding-block:88px 104px;
  background:linear-gradient(120deg,var(--bs-verde) 0%,#0E8540 50%,var(--bs-verde-claro) 100%);
  border-bottom-left-radius:50% 56px;border-bottom-right-radius:50% 56px}
.tema-sorridente .colecao-topo .container{position:relative;z-index:1}
.tema-sorridente .bs-m1{width:230px;height:230px;left:-90px;bottom:-110px;background:var(--bs-dourado);opacity:.9}
.tema-sorridente .bs-m2{width:260px;height:260px;right:-90px;top:-120px;background:#fff;opacity:.08;
  -webkit-mask-image:url(../img/sorridente/mancha2.svg);mask-image:url(../img/sorridente/mancha2.svg)}
/* o dente fica onde estava a foto, entre o título e o logo */
.tema-sorridente .bs-dente{position:absolute;left:54%;top:50%;width:clamp(130px,14vw,200px);aspect-ratio:100/112;translate:0 -50%;background:#fff;opacity:.95;
  -webkit-mask:url(../img/sorridente/dente.svg) center/contain no-repeat;mask:url(../img/sorridente/dente.svg) center/contain no-repeat}
.tema-sorridente .bs-bolha{position:absolute;bottom:14%;border-radius:50%;border:2px solid rgba(255,255,255,.7);opacity:.85;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.9) 0 3px,rgba(255,255,255,.12) 4px,rgba(255,255,255,.05) 70%)}
.tema-sorridente .bs-o1{left:47%;width:26px;height:26px}
.tema-sorridente .bs-o2{left:51%;width:14px;height:14px;bottom:30%}
.tema-sorridente .bs-o3{left:67%;width:34px;height:34px;bottom:18%}
.tema-sorridente .bs-o4{left:71%;width:18px;height:18px;bottom:44%}
.tema-sorridente .bs-o5{left:44%;width:20px;height:20px;bottom:56%}
.tema-sorridente .bs-o6{left:88%;width:24px;height:24px;bottom:10%}
.tema-sorridente .bs-o7{left:10%;width:16px;height:16px;bottom:18%}
.tema-sorridente .bs-o8{left:28%;width:22px;height:22px;bottom:8%}
.tema-sorridente .bs-o9{left:62%;width:12px;height:12px;bottom:66%}
.tema-sorridente .bs-b1{left:6%;top:22%;width:18px;height:18px;background:var(--bs-dourado)}
.tema-sorridente .bs-b2{left:65%;top:20%;width:26px;height:26px;background:#fff}
.tema-sorridente .bs-b3{left:38%;top:70%;width:14px;height:14px;background:var(--bs-dourado)}
.tema-sorridente .colecao-topo .rotulo{color:var(--bs-dourado);letter-spacing:.14em}
.tema-sorridente .colecao-topo h1{color:#fff;font-family:var(--bs-titulo);font-weight:600;font-size:clamp(2.4rem,5vw,3.5rem);letter-spacing:.005em}
/* sorriso dourado embaixo do título (desenha-se da esquerda para a direita) */
.tema-sorridente .colecao-topo h1::after{content:"";display:block;width:150px;height:28px;margin-top:4px;background:var(--bs-dourado);
  -webkit-mask:url(../img/sorridente/sorriso.svg) left center/contain no-repeat;mask:url(../img/sorridente/sorriso.svg) left center/contain no-repeat}
.tema-sorridente .colecao-logo{border-radius:22px;box-shadow:0 18px 40px -18px rgba(0,40,16,.55);transition:transform .4s ease}
.tema-sorridente .colecao-logo:hover{transform:translateY(-3px) rotate(-1deg)}

/* ===== descrição: texto à esquerda e a ilustração do consultório preenchendo a direita ===== */
.tema-sorridente .secao-descricao{padding-top:64px}
.tema-sorridente .bs-duas{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:stretch}
.tema-sorridente .bs-m3{width:120px;height:120px;left:-14px;top:-40px;background:var(--bs-verde-agua);opacity:.18}
.tema-sorridente .bs-cartao{position:relative;max-width:none;margin:0;background:#fff;border:2px solid #CDEEEA;border-radius:28px;
  padding:40px 44px 32px;box-shadow:0 18px 40px -26px rgba(29,63,143,.3)}
.tema-sorridente .bs-foto{position:relative;min-height:280px}
.tema-sorridente .bs-foto::before{content:"";position:absolute;inset:0;translate:12px 12px;border-radius:28px;background:var(--bs-verde-agua);opacity:.9}
.tema-sorridente .bs-foto img{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;border-radius:28px;
  box-shadow:0 18px 40px -26px rgba(29,63,143,.4)}
.tema-sorridente .bs-b9{right:-12px;top:-12px;width:28px;height:28px;background:var(--bs-laranja)}
.tema-sorridente .bs-cartao p{position:relative}
.tema-sorridente .bs-b4{right:-11px;top:-11px;width:24px;height:24px}

/* ===== títulos: Fredoka + o sorriso ===== */
.tema-sorridente .secao-topo h2{color:var(--bs-azul);font-family:var(--bs-titulo);font-weight:600}
.tema-sorridente .secao-topo h2::after{content:"";display:block;width:120px;height:22px;margin-top:6px;
  background:url(../img/sorridente/sorriso.svg) center/120px 22px no-repeat}
.tema-sorridente .secao-topo.centro h2::after{margin-inline:auto}

/* ===== demonstração: a menina sorrindo num porta-retrato orgânico, virada para o livro ===== */
.tema-sorridente .tm-palco{display:flex;align-items:center;gap:24px}
.tema-sorridente .bs-retrato{position:relative;flex:0 0 auto;width:clamp(180px,21vw,280px)}
.tema-sorridente .bs-retrato::before{content:"";position:absolute;inset:0;translate:14px 14px;background:var(--bs-verde-agua);
  -webkit-mask:url(../img/sorridente/mancha2.svg) center/contain no-repeat;mask:url(../img/sorridente/mancha2.svg) center/contain no-repeat}
.tema-sorridente .tm-personagem{position:relative;display:block;width:100%;height:auto;
  -webkit-mask:url(../img/sorridente/moldura.svg) center/contain no-repeat;mask:url(../img/sorridente/moldura.svg) center/contain no-repeat}
.tema-sorridente .bs-b5{right:6%;top:4%;width:30px;height:30px}
.tema-sorridente .tm-palco > :last-child{flex:1;min-width:0}
.tema-sorridente .placeholder-flipbook{min-height:420px;background:var(--bs-agua-claro);border:2px dashed #9ADBD2;border-radius:24px;color:var(--bs-verde-agua-escuro)}
.tema-sorridente .flipbook-caixa{background:var(--bs-agua-claro);border:2px solid #CDEEEA}
.tema-sorridente .nota-visualizacao{color:#5B6B7E}

/* ===== capas: fundo rosado e manchas apoiadas nos cantos ===== */
.tema-sorridente .secao.fundo{position:relative;overflow:hidden;background:var(--bs-rosado)}
.tema-sorridente .secao.fundo .container{position:relative;z-index:1}
.tema-sorridente .bs-m4{width:220px;height:220px;right:-80px;top:-90px;background:var(--bs-laranja);opacity:.85;
  -webkit-mask-image:url(../img/sorridente/mancha2.svg);mask-image:url(../img/sorridente/mancha2.svg)}
.tema-sorridente .bs-m5{width:260px;height:260px;left:-120px;bottom:-130px;background:var(--bs-verde-agua);opacity:.85}
.tema-sorridente .grade-capas{grid-template-columns:repeat(auto-fill,minmax(180px,220px));gap:30px 34px}
.tema-sorridente .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(29,63,143,.5);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-sorridente .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-sorridente .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,.22),rgba(255,255,255,.24) 45%,rgba(0,0,0,.05))}
.tema-sorridente .capa-ampliar:focus-visible{outline:3px solid var(--bs-azul);outline-offset:4px}
@media (hover:hover){
  .tema-sorridente .capa-ampliar:hover{transform:perspective(900px) rotateY(-10deg) rotate(-1.5deg) translateY(-6px);
    box-shadow:14px 26px 34px -18px rgba(29,63,143,.55)}
}
.tema-sorridente .capa figcaption{color:var(--bs-azul);font-weight:700}
.tema-sorridente .capa figcaption::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;
  background:var(--cor-ano,var(--bs-verde-agua))}

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

/* ===== botão final: verde-água com brilhos ===== */
.tema-sorridente .colecao-cta{position:relative;overflow:hidden;padding-block:84px;background:linear-gradient(135deg,var(--bs-verde-agua),#0C8C7E)}
.tema-sorridente .colecao-cta .container{position:relative;z-index:1}
.tema-sorridente .bs-m6{width:240px;height:240px;right:-90px;bottom:-120px;background:var(--bs-laranja);opacity:.9}
.tema-sorridente .bs-b6{left:12%;top:28%;background:#fff;width:22px;height:22px}
.tema-sorridente .bs-b7{left:24%;top:66%;background:#fff;width:14px;height:14px}
.tema-sorridente .bs-b8{right:22%;top:24%;background:#F9C74F;width:20px;height:20px}
.tema-sorridente .botao-colecao{background:var(--bs-azul)}

/* ===== animações (só com .tm-js) ===== */
@keyframes bs-brilhar{0%,100%{scale:.55;opacity:.35}50%{scale:1;opacity:1}}
@keyframes bs-zoom{from{opacity:0;transform:scale(.92)}}
.tm-js .tema-sorridente .bs-brilho{animation:bs-brilhar 2.6s ease-in-out infinite}
.tm-js .tema-sorridente :is(.bs-b2,.bs-b5,.bs-b7){animation-duration:3.2s;animation-delay:-1.2s}
.tm-js .tema-sorridente :is(.bs-b3,.bs-b8){animation-duration:2.2s;animation-delay:-.6s}
.tm-js .tema-sorridente .bs-cartao p,
.tm-js .tema-sorridente .capa{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-sorridente .bs-cartao p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-sorridente .bs-foto{opacity:0;translate:24px 0;transition:opacity .8s ease .15s,translate .9s cubic-bezier(.2,.8,.2,1) .15s}
.tm-js .tema-sorridente .secao-descricao:has(p.tm-visivel) .bs-foto{opacity:1;translate:0 0}
@keyframes bs-subir{0%{translate:0 0;opacity:0}15%{opacity:.85}85%{opacity:.85}100%{translate:0 -170px;opacity:0}}
@keyframes bs-flutuar{0%,100%{translate:0 -50%;rotate:0deg}50%{translate:0 calc(-50% - 10px);rotate:-3deg}}
@keyframes bs-flutuar-cel{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:-3deg}}
@keyframes bs-desenhar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tm-js .tema-sorridente .bs-bolha{animation:bs-subir 7s ease-in infinite}
.tm-js .tema-sorridente :is(.bs-o2,.bs-o5,.bs-o8){animation-duration:9s;animation-delay:-3s}
.tm-js .tema-sorridente :is(.bs-o3,.bs-o6,.bs-o9){animation-duration:6s;animation-delay:-5s}
.tm-js .tema-sorridente :is(.bs-o4,.bs-o7){animation-duration:8s;animation-delay:-1.5s}
.tm-js .tema-sorridente .bs-dente{animation:bs-flutuar 5s ease-in-out infinite}
.tm-js .tema-sorridente .colecao-topo h1::after{animation:bs-desenhar 1.3s cubic-bezier(.3,.6,.2,1) .4s both}
.tm-js .tema-sorridente .capa:nth-child(2){transition-delay:.1s}
.tm-js .tema-sorridente .bs-cartao p.tm-visivel,
.tm-js .tema-sorridente .capa.tm-visivel{opacity:1;translate:0 0}
.tm-js .tema-sorridente .tm-personagem{opacity:0;scale:.9;transition:opacity .8s ease,scale .9s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-sorridente .tm-personagem.tm-visivel{opacity:1;scale:1}
@media (prefers-reduced-motion:no-preference){
  .tema-sorridente .tm-ampliada[open]{animation:bs-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-sorridente .capa-ampliar,.tema-sorridente .colecao-logo{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  /* texto e logo empilham: o dente vai para a direita */
  .tema-sorridente .colecao-topo{padding-block:56px 84px;border-bottom-left-radius:50% 40px;border-bottom-right-radius:50% 40px}
  .tema-sorridente .bs-dente{left:auto;right:8%;width:130px}
  .tema-sorridente .bs-duas{grid-template-columns:1fr;gap:26px}
  .tema-sorridente .bs-foto{height:300px;margin-right:12px}
}
@media (max-width:767px){
  .tema-sorridente .colecao-topo{padding-block:44px 76px;border-bottom-left-radius:50% 28px;border-bottom-right-radius:50% 28px}
  .tema-sorridente .bs-dente{right:5%;top:auto;bottom:24px;translate:0 0;width:96px}
  .tm-js .tema-sorridente .bs-dente{animation-name:bs-flutuar-cel}
  .tema-sorridente .bs-foto{height:220px}
  .tema-sorridente .bs-cartao{padding:32px 20px 22px;border-radius:22px}
  .tema-sorridente .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-sorridente .bs-retrato{align-self:flex-start;width:170px;margin:0 0 -10px 4px;z-index:1}
  .tema-sorridente .placeholder-flipbook{min-height:260px}
  .tema-sorridente .grade-capas{grid-template-columns:1fr 1fr;gap:20px 14px}
  .tema-sorridente .bs-m4{width:150px;height:150px;right:-60px;top:-70px}
  .tema-sorridente .bs-m5{width:170px;height:170px;left:-80px;bottom:-90px}
  .tema-sorridente .bs-m6{width:160px;height:160px;right:-60px;bottom:-80px}
}

/* rodapé desta coleção: o verde-água escuro do livro, um pouco mais escuro para a letra pequena (o resto do rodapé é o mesmo do site) */
.tema-sorridente ~ .site-footer{--cor-rodape:#094F47}