/* Dobra Sérum GHK-Cu L12 (skin_fecho). GERADO por docs/layout/fonte-loja/dobras-skin-l12.py: não edite à mão. */
.bl .s12b{background:#fff}
.bl .s12b :where(h2,figure){margin:0}
.bl .s12b-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center}
.bl .s12b-foto{position:relative;aspect-ratio:1100/1000;max-height:760px;border-radius:28px;overflow:hidden;background:var(--bl-cinza-1)}
.bl .s12b-foto img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
.bl .s12b-lado{display:flex;flex-direction:column;align-items:center;text-align:center}
.bl .s12b .dp-h2{margin:0;color:var(--bl-preto);max-width:560px;font-size:clamp(32px,3.6vw,54px);line-height:1.04}
.bl .s12b-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.bl .s12b-w>span{display:inline-block}
.bl .s12b-palco{--fh:230px;--queda:96px;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;margin-top:36px;padding-top:var(--fh)}
.bl .s12b-frasco{position:absolute;left:50%;top:0;width:calc(var(--fh) * 387 / 760);height:var(--fh);margin-left:calc(var(--fh) * -387 / 1520);overflow:visible}
.bl .s12b-frasco img{width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(10,10,10,.14))}
.bl .s12b-gota{position:absolute;left:50%;top:calc(var(--fh) - 18px);width:22px;height:31px;margin-left:-11px;transform-origin:50% 0;opacity:0}
.bl .s12b-gota svg{display:block;width:100%;height:100%}
.bl .s12b-onda{position:absolute;left:50%;top:calc(var(--fh) + var(--queda) + 29px);width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;border:1.5px solid #C9973A;opacity:0}
.bl .s12b-bt{margin-top:var(--queda)}
.s12b-anim .bl .s12b-foto{clip-path:inset(100% 0 0 0 round 28px);transition:clip-path .7s cubic-bezier(.65,0,.25,1)}
.s12b-anim .bl .s12b-foto img{transform:scale(1.22);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.s12b-anim .bl .s12b-g.on .s12b-foto{clip-path:inset(0 0 0 0 round 28px)}
.s12b-anim .bl .s12b-g.on .s12b-foto img{transform:none}
.s12b-anim .bl .s12b-w>span{transform:translateY(110%);transition:transform .6s calc(.1s + var(--w) * .04s) cubic-bezier(.2,.8,.2,1)}
.s12b-anim .bl .s12b-g.on .s12b-w>span{transform:none}
.s12b-anim .bl .s12b-frasco{transform:translateY(-70%);opacity:0}
.s12b-anim .bl .s12b-g.on .s12b-frasco{animation:s12b-desce .8s .25s cubic-bezier(.3,1.3,.5,1) both}
@keyframes s12b-desce{0%{transform:translateY(-70%) rotate(-8deg);opacity:0}35%{opacity:1}70%{transform:translateY(3%) rotate(3deg)}100%{transform:none;opacity:1}}
.s12b-anim .bl .s12b-g.on .s12b-gota{animation:s12b-pinga .7s .95s cubic-bezier(.5,0,.75,0) both}
@keyframes s12b-pinga{0%{transform:scale(0);opacity:1}40%{transform:scale(1,1.08);opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.6)}
	52%{transform:translateY(8px) scale(.92,1.22)}96%{transform:translateY(calc(var(--queda) + 12px)) scale(.86,1.3);opacity:1}100%{transform:translateY(calc(var(--queda) + 20px)) scale(1.6,.3);opacity:0}}
.s12b-anim .bl .s12b-g.on .s12b-onda{animation:s12b-onda .6s 1.62s cubic-bezier(.2,.7,.3,1) both}
@keyframes s12b-onda{0%{transform:scale(.1);opacity:1}100%{transform:scale(2.6);opacity:0}}
.s12b-anim .bl .s12b-bt{clip-path:circle(0 at 50% 50%)}
.s12b-anim .bl .s12b-g.on .s12b-bt{animation:s12b-abre .6s 1.6s cubic-bezier(.7,0,.2,1) both}
@keyframes s12b-abre{0%{clip-path:circle(0 at 50% 50%)}25%{clip-path:circle(14px at 50% 50%)}100%{clip-path:circle(160% at 50% 50%)}}
.s12b-anim .bl .s12b-bt .btn{background:linear-gradient(90deg,#C9973A,#E2BC6A);border-color:transparent;color:var(--bl-preto);transition:background-color .5s,color .5s}
.s12b-anim .bl .s12b-g.on .s12b-bt .btn{animation:s12b-cor .5s 1.95s both}
@keyframes s12b-cor{to{background:var(--bl-preto);color:var(--bl-branco)}}
.bl .s12b.rodando .s12b-g.on .s12b-frasco img{animation:s12b-flutua 4.5s 2.1s ease-in-out infinite}
@keyframes s12b-flutua{0%,100%{transform:none}50%{transform:translateY(-6px)}}
@media (max-width:1100px){
	.bl .s12b-g{gap:40px}
}
@media (max-width:767px){
	.bl .s12b-g{grid-template-columns:1fr;gap:36px}
	.bl .s12b-foto{aspect-ratio:4/3.4}
	.bl .s12b-foto img{object-position:50% 40%}
	.bl .s12b .dp-h2{font-size:30px}
	.bl .s12b-palco{--fh:180px;--queda:76px;margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
	.bl .s12b *{animation:none!important;transition:none!important}
	.bl .s12b-gota,.bl .s12b-onda{display:none}
}