:root{--acc:#0370CB}
/* Animações de entrada e de rolagem (demo). Tudo escopado em html.anim:
   sem JS ou com prefers-reduced-motion a página fica como era. */
:root{--rv-ease:cubic-bezier(.2,.7,.2,1)}

.anim-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--acc);z-index:99999;pointer-events:none;box-shadow:0 0 10px var(--acc)}

/* ---- revelar ao rolar ---- */
html.anim .rv{opacity:0;will-change:opacity,transform;
  transition:opacity .7s var(--rv-ease),transform .85s var(--rv-ease),clip-path .7s var(--rv-ease);
  transition-delay:var(--d,0ms)}
html.anim .rv-up{transform:translate3d(0,44px,0)}
html.anim .rv-down{transform:translate3d(0,-30px,0)}
html.anim .rv-left{transform:translate3d(-56px,0,0)}
html.anim .rv-right{transform:translate3d(56px,0,0)}
html.anim .rv-zoom{transform:scale(.88)}
html.anim .rv-pop{transform:scale(.7) translate3d(0,14px,0)}
html.anim .rv-fade{transform:none}
html.anim .rv-line{transform:scaleX(0);transform-origin:0 50%;opacity:1}
html.anim .rv-words{opacity:1;transform:none}
html.anim .rv.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
html.anim .rv.in.rv-pop{transition-timing-function:cubic-bezier(.3,1.5,.5,1)}

/* imagem revelada por "cortina" + zoom interno */
html.anim .rv-mask{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
html.anim .rv-mask img,html.anim .rv-mask video{scale:1.15;transition:scale 1.1s var(--rv-ease);transition-delay:var(--d,0ms)}
html.anim .rv-mask.in img,html.anim .rv-mask.in video{scale:1}

/* cortinas laterais (esquerda->direita e direita->esquerda) */
html.anim .rv-maskx{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
html.anim .rv-maskr{opacity:1;transform:none;clip-path:inset(0 0 0 100%)}
html.anim .rv-maskx,html.anim .rv-maskr{transition-duration:.9s}
html.anim .rv-mask.in,html.anim .rv-maskx.in,html.anim .rv-maskr.in{clip-path:inset(0 0 0 0)}
/* terminou de entrar: solta o recorte (devolve sombras) */
html.anim .rv.done{clip-path:none}

/* conteúdo interno das avaliações entra em sequência depois da cortina */
html.anim .fm-review.rv:not(.done) > *{opacity:0;translate:0 14px;transition:opacity .5s ease,translate .6s var(--rv-ease);transition-delay:calc(var(--d,0ms) + 380ms)}
html.anim .fm-review.rv:not(.done) > blockquote{transition-delay:calc(var(--d,0ms) + 480ms)}
html.anim .fm-review.rv:not(.done) > figcaption{transition-delay:calc(var(--d,0ms) + 580ms)}
html.anim .fm-review.rv.in:not(.done) > *{opacity:1;translate:0 0}

/* títulos palavra por palavra */
html.anim .w{display:inline-block;vertical-align:top;padding:.28em .04em .16em;margin:-.28em -.04em -.16em;clip-path:inset(0 -.8em 0 -.8em)}
html.anim .wi{display:inline-block;transform:translate3d(0,115%,0) rotate(4deg);transform-origin:0 100%;
  transition:transform 1s var(--rv-ease);transition-delay:calc(var(--wi,0) * 75ms + var(--d,0ms))}
html.anim .rv-words.in .wi{transform:none}

/* depois de entrar, o delay some (senão o hover demora) e a camada de GPU reservada pelo will-change é liberada */
html.anim .rv.done{transition-delay:0ms;will-change:auto}
html.anim .rv-mask.done img,html.anim .rv-mask.done video{transition:scale .9s var(--rv-ease);transition-delay:0ms}

/* A descrição e os selos da hero já existem antes do reveal ser inicializado.
   Mantê-los ocultos desde o primeiro frame evita a transição de saída. */
html.anim .fm-hero .fm-lead,html.anim .fm-hero-proof li{opacity:0;transform:translate3d(0,32px,0);transition:none}
html.anim .fm-hero .fm-lead.rv.in,html.anim .fm-hero-proof li.rv.in{animation:fm-hero-info-in .7s var(--d,0ms) both}
@keyframes fm-hero-info-in{from{opacity:0;transform:translate3d(0,32px,0)}to{opacity:1;transform:none}}

/* ---- hover ---- */
html.anim .hv.done,html.anim .hv:not(.rv){transition:transform .4s var(--rv-ease),box-shadow .4s ease,border-color .3s;transition-delay:0ms}
html.anim .hv.done:hover,html.anim .hv:not(.rv):hover{transform:translate3d(0,-7px,0);box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent)}
html.anim .hvimg.done:hover img,html.anim .hvimg.done:hover video,html.anim .hvimg:not(.rv):hover img,html.anim .hvimg:not(.rv):hover video{scale:1.08}
html.anim .hvimg img,html.anim .hvimg video{transition:scale .9s var(--rv-ease)}

/* ---- loops contínuos ---- */
@keyframes anim-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
html.anim .anim-pulse{animation:anim-pulse 2.4s ease-out infinite}
@keyframes anim-kb{from{scale:1.24}to{scale:1.1}}
html.anim .anim-kb{animation:anim-kb 2.8s var(--rv-ease) both;will-change:scale,translate}
@keyframes anim-settle{from{scale:1.09}to{scale:1}}
html.anim .anim-settle{animation:anim-settle 1.6s var(--rv-ease) both}
@keyframes anim-float{0%,100%{translate:0 0}50%{translate:0 -10px}}
html.anim .anim-float{animation:anim-float 5s ease-in-out infinite}
@keyframes anim-spin{to{rotate:360deg}}
html.anim .anim-spin{animation:anim-spin 90s linear infinite}

/* header ao rolar */
html.anim .anim-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.35)}

/* neve */
.snow-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.snow-wrap i{position:absolute;top:-12px;border-radius:50%;background:#fff;filter:blur(.4px);animation:snow-fall linear infinite}
@keyframes snow-fall{0%{transform:translate3d(0,-10px,0)}50%{transform:translate3d(18px,50vh,0)}100%{transform:translate3d(-12px,105vh,0)}}
html.anim .fm-logo-flake.anim-spin{animation-duration:16s}

/* navbar: a aba branca desce do topo e os itens entram em seguida (js/anim.js adiciona .nav-in).
   `translate` é independente do `transform` da aba (centralização e esconder ao rolar). */
html.anim header.fm-nav{transition:transform .4s cubic-bezier(.2,.7,.2,1),translate 1s var(--rv-ease)}
html.anim header.fm-nav:not(.nav-in){translate:0 calc(-100% - 2rem);animation:fm-nav-failsafe .01s 10s forwards}
@keyframes fm-nav-failsafe{to{translate:0 0}}
/* itens já nascem no estado "escondido" do .rv (sem transição) para a entrada não ser revertida quando o JS marca .rv e .in em sequência */
html.anim header.fm-nav:not(.nav-in) .fm-logo,html.anim header.fm-nav:not(.nav-in) #mainmenu>li{opacity:0;transform:translate3d(0,-30px,0);transition:none;animation:fm-nav-failsafe-item .01s 10s forwards}
html.anim header.fm-nav:not(.nav-in) .fm-organic-nav{opacity:0;animation:fm-nav-failsafe-item .01s 10s forwards}
@keyframes fm-nav-failsafe-item{to{opacity:1;transform:none}}
/* o template fixa `#mainmenu li{transition:.2s}`, que por causa do #id vence o .rv: devolve a transição padrão da entrada */
html.anim #mainmenu>li.rv{transition:opacity .7s var(--rv-ease),transform .85s var(--rv-ease);transition-delay:var(--d,0ms)}
html.anim #mainmenu>li.rv.done{transition-delay:0ms}

/* o clip-path do .rv.in cortaria os cantos que saem da caixa (hero) e as sombras (passos, celular) */
html.anim .fm-hero-notch.rv.in,html.anim .fm-flow-item.rv.in,html.anim .fm-chat.rv.in{clip-path:none}

/* destaques (rapel e garantia): conteudo entra em sequencia depois do card */
html.anim .fm-perk.rv:not(.done) .fm-perk-body > *{opacity:0;translate:0 16px;transition:opacity .5s ease,translate .6s var(--rv-ease);transition-delay:calc(var(--d,0ms) + 260ms + var(--i,0) * 90ms)}
html.anim .fm-perk.rv.in:not(.done) .fm-perk-body > *{opacity:1;translate:0 0}
.fm-perk-body > :nth-child(2){--i:1}.fm-perk-body > :nth-child(3){--i:2}.fm-perk-body > :nth-child(4){--i:3}.fm-perk-body > :nth-child(5){--i:4}.fm-perk-body > :nth-child(6){--i:5}
/* foto do rapel entra com cortina + zoom */
html.anim .fm-perk-art img{transition:scale 1.4s var(--rv-ease),opacity .9s ease;transition-delay:calc(var(--d,0ms) + 200ms)}
html.anim .fm-perk.rv:not(.in) .fm-perk-art img{scale:1.18;opacity:0}