/* MX Media V18: movimento elegante, responsivo e com respeito à acessibilidade */
:root{--mx-motion-ease:cubic-bezier(.22,.8,.22,1)}
html{scroll-behavior:smooth}
@keyframes mx18Reveal{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes mx18Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes mx18Glow{0%,100%{opacity:.32;transform:scale(1)}50%{opacity:.54;transform:scale(1.09)}}
@keyframes mx18Shine{0%{left:-120%}100%{left:150%}}
@keyframes mx18Pulse{0%,100%{box-shadow:0 10px 30px #17b65b30}50%{box-shadow:0 10px 36px #17b65b65}}
@keyframes mx18Spark{0%,100%{opacity:.6;transform:rotate(-12deg) scale(.9)}50%{opacity:1;transform:rotate(15deg) scale(1.14)}}
@media(prefers-reduced-motion:no-preference){
  /* reveal runs only after IntersectionObserver adds the class */
  .mx18-reveal.mx18-visible{animation:mx18Reveal .75s var(--mx-motion-ease) both;animation-delay:var(--mx18-delay,0ms)}
  .hero .hero-copy{animation:mx18Reveal .85s var(--mx-motion-ease) both}
  .hero .hero-art{animation:mx18Reveal 1s var(--mx-motion-ease) .15s both}
  .hero-mascot>img{animation:mx18Float 5.5s ease-in-out infinite}
  .hero .spark,.hero .star{animation:mx18Spark 5s ease-in-out infinite}
  .mx-wa-float{animation:mx18Pulse 4.5s ease-in-out infinite}
  .mx-wa-float:hover{animation:none}
  .mx18-cta{position:relative;overflow:hidden;isolation:isolate}
  .mx18-cta:after{content:"";position:absolute;top:-35%;bottom:-35%;left:-120%;width:35%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,#ffffff77,transparent);pointer-events:none}
  .mx18-cta:hover:after{animation:mx18Shine .85s ease forwards}
}
.mx18-lift{transition:transform .28s var(--mx-motion-ease),box-shadow .28s ease,border-color .28s ease}
.mx18-lift:hover{transform:translateY(-7px);box-shadow:0 22px 48px #16151d22}
.mx18-lift img{transition:transform .5s var(--mx-motion-ease)}
.mx18-lift:hover img{transform:scale(1.035)}
.mx18-cta{transition:transform .23s ease,filter .23s ease}
.mx18-cta:hover{transform:translateY(-3px);filter:brightness(1.035)}
.mx18-cta:active{transform:translateY(0)}
.mx18-link{transition:color .2s ease,opacity .2s ease}
.mx18-link:hover{opacity:.75}
.mx18-section-title{position:relative}
.mx18-section-title:after{content:"";display:block;width:38px;height:3px;background:linear-gradient(90deg,#f5c529,#e82591,#00b5ed);border-radius:5px;margin-top:13px;transition:width .4s ease}
.mx18-section-title:hover:after{width:85px}
.mx18-bg{position:relative;isolation:isolate}
.mx18-bg:before{content:"";position:absolute;pointer-events:none;z-index:-1;right:0;top:0;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,#e6218c12,transparent 72%)}
@media(max-width:650px){
  .mx18-lift:hover{transform:translateY(-3px)}
  .hero-mascot>img{animation-duration:7s}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mx18-reveal.mx18-visible,.hero .hero-copy,.hero .hero-art,.hero-mascot>img,.hero .spark,.hero .star,.mx-wa-float{animation:none!important}
  .mx18-lift,.mx18-lift img,.mx18-cta,.mx18-link,.mx18-section-title:after{transition:none!important}
  .mx18-lift:hover,.mx18-lift:hover img,.mx18-cta:hover{transform:none!important}
}