/* Rodapé "forma." com assinatura escrita à mão e adesivos (sticker-footer.js).
   Tudo abaixo é o estado final; a animação de entrada só existe com prefers-reduced-motion: no-preference. */
.ssf{--ssf-paper:#faf7f1;--ssf-panel:#3b2f7a;--ssf-ink:#29273d;--ssf-cream:#fff6ea;--ssf-accent:#fe6845;--ssf-wmh:36svh;
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;container-type:inline-size;display:flex;flex-direction:column;width:100%;box-sizing:border-box;margin-top:40px;padding:0 clamp(6px,.9cqw,12px) clamp(6px,.9cqw,12px);background:var(--ssf-paper);color:var(--ssf-ink);font-family:Nunito,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}
:where(.ssf) *,:where(.ssf) *::before,:where(.ssf) *::after{box-sizing:border-box}
:where(.ssf) button{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
:where(.ssf) a{color:inherit;text-decoration:none}
:where(.ssf) ul,:where(.ssf) p,:where(.ssf) h3{margin:0;padding:0;list-style:none;font:inherit}
.ssf svg{display:block;max-width:none;overflow:visible}
.ssf :focus-visible{outline:2.5px solid var(--ssf-accent);outline-offset:3px;border-radius:6px}
.ssf-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* barra de cima */
.ssf-top{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(14px,2cqw,26px) clamp(10px,1.6cqw,22px) clamp(24px,4cqw,56px)}
.ssf-nav{justify-self:start;position:relative;display:grid;place-items:center;width:clamp(58px,6.2cqw,80px);height:clamp(42px,4.4cqw,56px);font-weight:900;font-size:clamp(15px,1.6cqw,20px);letter-spacing:-.02em;color:var(--ssf-ink)}
.ssf-nav svg{position:absolute;left:-6%;top:-14%;width:72%;height:auto;color:var(--ssf-accent);transition:transform .7s cubic-bezier(.2,1.4,.3,1)}
.ssf-nav span{position:relative;transition:transform .4s cubic-bezier(.2,1.6,.3,1)}
.ssf-nav:hover svg{transform:rotate(72deg) scale(1.12)}
.ssf-nav:hover span{transform:rotate(-6deg) scale(1.06)}
.ssf-logo{display:block;color:var(--ssf-panel)}
.ssf-logo svg{height:clamp(26px,2.6cqw,36px);width:auto}
.ssf-logo path{fill:none;stroke:currentColor;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}
.ssf-chat{justify-self:end;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--ssf-ink);transition:transform .45s cubic-bezier(.2,1.6,.3,1)}
.ssf-chat svg{width:26px;height:26px}
.ssf-chat:hover{transform:rotate(-14deg) scale(1.12)}

/* painel */
.ssf-panel{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;overflow:hidden;overflow:clip;border-radius:clamp(14px,1.8cqw,24px) clamp(28px,4cqw,56px) clamp(14px,1.8cqw,24px) clamp(14px,1.8cqw,24px);background:var(--ssf-panel);color:var(--ssf-cream);transform-origin:50% 100%}
.ssf-cols{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3cqw,44px) clamp(16px,2.4cqw,36px);padding:clamp(26px,4.4cqw,60px) clamp(18px,2.2cqw,32px) clamp(20px,3cqw,40px)}
.ssf-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ssf-tag{display:inline-block;margin-bottom:clamp(14px,1.6cqw,22px);padding:.28em .8em .32em;border-radius:999px;background:var(--ssf-cream);color:var(--ssf-ink);font-size:clamp(12px,1.05cqw,14px);font-weight:800;line-height:1.2}
.ssf-big{font-size:clamp(19px,2cqw,28px);font-weight:900;line-height:1.2;letter-spacing:-.02em}
.ssf-line{display:block;overflow:hidden;overflow:clip;padding:0 .08em .06em;margin:0 -.08em -.06em}
.ssf-line>*{display:inline-block}
.ssf-big a,.ssf-big button{position:relative;text-align:left;transition:color .2s}
.ssf-big a::after,.ssf-big button::after{content:'';position:absolute;left:0;right:0;bottom:-.02em;height:.09em;border-radius:1em;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.ssf-big a:hover::after,.ssf-big button:hover::after,.ssf-big a:focus-visible::after,.ssf-big button:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.ssf-copy{display:inline-grid!important;font-size:.8em;line-height:1.3}
.ssf-copy>span{grid-area:1/1;transition:transform .5s cubic-bezier(.2,1.2,.3,1),opacity .3s}
.ssf-copy .ssf-done{transform:translateY(105%);opacity:0}
.ssf-copy.is-copied .ssf-addr{transform:translateY(-105%);opacity:0}
.ssf-copy.is-copied .ssf-done{transform:none;opacity:1}
.ssf-ast{display:inline-block;margin-left:.04em;transition:transform .6s cubic-bezier(.2,1.6,.3,1)}
.ssf-big a:hover .ssf-ast{transform:rotate(180deg) scale(1.2)}
.ssf-map{position:relative;display:inline-block;margin-top:clamp(16px,1.8cqw,24px);font-size:clamp(14px,1.25cqw,17px);font-weight:800;padding-bottom:.55em}
.ssf-map svg{position:absolute;left:-2%;bottom:0;width:104%;height:.5em}
.ssf-map path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:var(--l,120px) var(--l,120px);stroke-dashoffset:0}
.ssf-map:hover path,.ssf-map:focus-visible path{animation:ssf-rewrite .7s cubic-bezier(.6,0,.3,1)}
.ssf-note{margin-top:clamp(12px,1.3cqw,18px);max-width:34ch;font-size:clamp(12px,.95cqw,13.5px);line-height:1.5;opacity:.85}

/* palco da assinatura */
.ssf-stage{position:relative;z-index:1;margin-top:auto;width:min(100%,calc(var(--ssf-wmh) * var(--ssf-ar)));align-self:center;padding:0 clamp(6px,.8cqw,12px)}
.ssf-stage-in{position:relative;container-type:inline-size}
.ssf-wm-btn{display:block;width:100%;border-radius:0!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ssf-wm{width:100%;height:auto;color:var(--ssf-cream)}
.ssf-wm path{fill:none;stroke:currentColor;stroke-width:3.3;stroke-linecap:round;stroke-linejoin:round}

/* adesivos */
.ssf-st{position:absolute;z-index:3;translate:-50% -50%;touch-action:none;user-select:none;-webkit-user-select:none}
.ssf-st-btn{display:block;width:100%;cursor:grab;rotate:calc(var(--r) + var(--tilt,0deg));transition:rotate .5s cubic-bezier(.2,1.4,.3,1)}
.ssf-st.is-drag{z-index:9!important}
.ssf-st.is-drag .ssf-st-btn{cursor:grabbing;transition:rotate .12s linear}
.ssf-st-lift{display:block;transition:transform .35s cubic-bezier(.2,1.5,.3,1),filter .35s;filter:drop-shadow(0 1px .5px rgba(20,12,60,.3)) drop-shadow(0 4px 6px rgba(20,12,60,.2))}
.ssf-st-btn:hover .ssf-st-lift,.ssf-st-btn:focus-visible .ssf-st-lift{transform:translateY(-4%) scale(1.06);filter:drop-shadow(0 2px 1px rgba(20,12,60,.22)) drop-shadow(0 14px 16px rgba(20,12,60,.32))}
.ssf-st.is-drag .ssf-st-lift{transform:translateY(-7%) scale(1.12);filter:drop-shadow(0 2px 1px rgba(20,12,60,.18)) drop-shadow(0 22px 22px rgba(20,12,60,.36))}
.ssf-st-slap{display:block}
.ssf-st svg{width:100%;height:auto}
.ssf-sheen{transform:translateX(-130%);transition:transform 0s}
.ssf-st-btn:hover .ssf-sheen{transform:translateX(130%);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.ssf-ring{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:2px solid var(--ssf-cream);opacity:0;pointer-events:none}

/* créditos e linha legal */
.ssf-credits{position:absolute;z-index:6;right:clamp(10px,1.2cqw,16px);bottom:clamp(10px,1.2cqw,16px)}
.ssf-pill{display:block;padding:.3em .85em .34em;border-radius:999px;background:var(--ssf-cream);color:var(--ssf-ink);font-size:clamp(12px,1cqw,14px);font-weight:800;transition:transform .4s cubic-bezier(.2,1.6,.3,1)}
.ssf-pill:hover{transform:rotate(-5deg) scale(1.06)}
.ssf-pop{position:absolute;right:0;bottom:calc(100% + 10px);width:max-content;max-width:min(300px,80cqw);padding:14px 16px;border-radius:16px;background:var(--ssf-paper);color:var(--ssf-ink);box-shadow:0 0 0 4px #fff,0 18px 40px rgba(20,12,60,.35);transform-origin:90% 100%;animation:ssf-popin .45s cubic-bezier(.2,1.5,.3,1)}
.ssf-pop li{display:flex;flex-direction:column;padding:6px 0;font-size:13px;line-height:1.3}
.ssf-pop li+li{border-top:1.5px dashed #29273d38}
.ssf-pop b{font-size:11px;font-weight:700;opacity:.6}
.ssf-pop strong{font-weight:900}
.ssf-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:14px clamp(10px,1.6cqw,22px) 6px;font-size:12.5px;font-weight:700;color:#6c5c7a}
.ssf-legal nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ssf-legal a:hover{color:var(--ssf-panel);text-decoration:underline}

@container (max-width:760px){
  .ssf-cols{grid-template-columns:minmax(0,1fr)}
  .ssf-top{padding-bottom:24px}
  .ssf-stage{width:100%}
  .ssf-credits{bottom:auto;top:clamp(10px,1.2cqw,16px)}
}
@keyframes ssf-rewrite{0%{stroke-dashoffset:var(--l,120px)}100%{stroke-dashoffset:0}}
@keyframes ssf-popin{from{opacity:0;transform:translateY(10px) scale(.7) rotate(4deg)}}

@media (prefers-reduced-motion:no-preference){
  .ssf-panel{scale:calc(.94 + .06 * var(--ssf-sp,1))}
  .ssf-stage-in{transform:translateY(calc((1 - var(--ssf-sp,1)) * 18%))}
  .ssf-st{transform:translate(calc(var(--ssf-px,0) * var(--d) * 9px),calc(var(--ssf-py,0) * var(--d) * 6px));transition:transform .7s cubic-bezier(.2,.8,.2,1)}
  .ssf-st.is-drag{transition:none}
  .ssf:not(.is-in) .ssf-top>*,.ssf:not(.is-in) .ssf-tag,.ssf:not(.is-in) .ssf-line>*,.ssf:not(.is-in) .ssf-map,.ssf:not(.is-in) .ssf-note,.ssf:not(.is-in) .ssf-pill{opacity:0}
  .ssf.is-in .ssf-top>*{animation:ssf-fall .8s cubic-bezier(.2,1.3,.3,1) both}
  .ssf.is-in .ssf-top>:nth-child(2){animation-delay:.08s}
  .ssf.is-in .ssf-top>:nth-child(3){animation-delay:.16s}
  .ssf.is-in .ssf-panel{animation:ssf-grow 1.1s cubic-bezier(.7,0,.2,1) both}
  .ssf.is-in .ssf-tag{animation:ssf-pop .7s cubic-bezier(.2,1.7,.3,1) both;animation-delay:calc(.45s + var(--c) * .1s)}
  .ssf.is-in .ssf-line>*{animation:ssf-rise .8s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(.55s + var(--c) * .1s + var(--i) * .07s)}
  .ssf.is-in .ssf-map,.ssf.is-in .ssf-note{animation:ssf-fade .7s ease both;animation-delay:calc(.85s + var(--c) * .1s)}
  .ssf.is-in .ssf-pill{animation:ssf-pop .6s cubic-bezier(.2,1.7,.3,1) both;animation-delay:var(--end)}
  .ssf .ssf-wm path{stroke-dasharray:var(--l,3000px) calc(var(--l,3000px) + 8px);stroke-dashoffset:calc(var(--l,3000px) + 4px)}
  .ssf:not(.is-in) .ssf-wm path{visibility:hidden}
  .ssf.is-in .ssf-wm path{animation:ssf-write var(--dur) var(--at) cubic-bezier(.55,.1,.35,1) both}
  .ssf:not(.is-in) .ssf-st-slap{opacity:0}
  .ssf.is-in .ssf-st-slap{animation:ssf-slap .62s var(--at) cubic-bezier(.3,1.5,.4,1) both}
  .ssf.is-in .ssf-ring{animation:ssf-ring .7s var(--at) cubic-bezier(.2,.8,.2,1) both}
  .ssf-logo:hover path{animation:ssf-rewrite 1.1s cubic-bezier(.55,.1,.35,1)}
  .ssf-logo path{stroke-dasharray:var(--l,3000px) calc(var(--l,3000px) + 8px)}
  .ssf-st-btn:active .ssf-st-lift{transform:translateY(-6%) scale(1.1)}
}
@keyframes ssf-write{0%{stroke-dashoffset:calc(var(--l,3000px) + 4px);visibility:visible}100%{stroke-dashoffset:0;visibility:visible}}
@keyframes ssf-fall{from{opacity:0;transform:translateY(-14px) rotate(-6deg)}}
@keyframes ssf-grow{0%{clip-path:inset(30% 12% 0 12% round 80px);transform:translateY(40px)}100%{clip-path:inset(0 0 0 0 round 0);transform:none}}
@keyframes ssf-pop{0%{opacity:0;transform:scale(.4) rotate(-12deg)}100%{opacity:1;transform:none}}
@keyframes ssf-rise{from{opacity:1;transform:translateY(110%)}to{opacity:1;transform:none}}
@keyframes ssf-fade{from{opacity:0;transform:translateY(8px)}}
@keyframes ssf-slap{0%{opacity:0;transform:scale(2.1) rotate(24deg) translateY(-30%);filter:blur(1.5px)}55%{opacity:1;transform:scale(.9) rotate(-3deg);filter:none}78%{transform:scale(1.05) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes ssf-ring{0%{opacity:0;transform:scale(.3)}40%{opacity:.75}100%{opacity:0;transform:scale(1)}}

/* "forma." em Nunito Black, como a logo: o ponto em coral. A palavra afunda na borda de baixo do painel. */
.ssf-wm-text{display:block;font-family:Nunito,ui-sans-serif,system-ui,sans-serif;font-weight:900;font-size:24cqw;line-height:.82;letter-spacing:-.045em;color:var(--ssf-cream);white-space:nowrap;text-align:center;margin-bottom:-.04em;user-select:none}
.ssf-ch{display:inline-block;transform-origin:50% 100%;transition:translate .35s cubic-bezier(.2,1.6,.3,1)}
.ssf-ch.ssf-dot,.ssf-lch.ssf-dot{color:var(--ssf-accent)}
.ssf-wm-btn:hover .ssf-ch,.ssf-wm-btn:focus-visible .ssf-ch{translate:0 calc(-2% - (var(--k) - 2.5) * (var(--k) - 2.5) * -.4%)}
.ssf-logo-text{display:block;font-family:Nunito,ui-sans-serif,system-ui,sans-serif;font-weight:900;font-size:clamp(26px,2.6cqw,36px);line-height:1;letter-spacing:-.045em;color:var(--ssf-panel)}
.ssf-lch{display:inline-block;transition:translate .35s cubic-bezier(.2,1.6,.3,1);transition-delay:calc(var(--k) * 30ms)}
.ssf-logo:hover .ssf-lch{translate:0 -12%}
@media (prefers-reduced-motion:no-preference){
  .ssf:not(.is-in) .ssf-ch{opacity:0}
  .ssf.is-in .ssf-ch{animation:ssf-drop .72s calc(var(--drop) + var(--k) * var(--step)) cubic-bezier(.3,1.4,.4,1) both}
  .ssf.is-in .ssf-ch.ssf-dot{animation:ssf-dotdrop .9s calc(var(--drop) + var(--k) * var(--step) + .1s) cubic-bezier(.3,1.2,.4,1) both}
}
@keyframes ssf-drop{0%{opacity:0;transform:translateY(-75%) rotate(-9deg) scale(1.08)}50%{opacity:1;transform:translateY(5%) scale(1.06,.9)}75%{transform:translateY(-3%) scale(.97,1.04)}100%{opacity:1;transform:none}}
@keyframes ssf-dotdrop{0%{opacity:0;transform:translateY(-160%)}45%{opacity:1;transform:translateY(0) scale(1.25,.7)}62%{transform:translateY(-55%) scale(.9,1.12)}80%{transform:translateY(0) scale(1.1,.88)}90%{transform:translateY(-12%)}100%{opacity:1;transform:none}}

/* créditos no alto do painel, para não cobrir o ponto da palavra */
.ssf-credits{bottom:auto;top:clamp(10px,1.2cqw,16px)}
.ssf-pop{bottom:auto;top:calc(100% + 10px);transform-origin:90% 0}
