/* assets/css/animate.min.css */ @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.7.0 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2018 Daniel Eden */ @-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;-webkit-transform-origin:center bottom;animation-name:bounce;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-name:headShake;-webkit-animation-timing-function:ease-in-out;animation-name:headShake;animation-timing-function:ease-in-out}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-animation-name:swing;-webkit-transform-origin:top center;animation-name:swing;transform-origin:top center}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;-webkit-transform-origin:center;animation-name:jello;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}14%{-webkit-transform:scale(1.3);transform:scale(1.3)}28%{-webkit-transform:scale(1);transform:scale(1)}42%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-duration:1.3s;-webkit-animation-name:heartBeat;-webkit-animation-timing-function:ease-in-out;animation-duration:1.3s;animation-name:heartBeat;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{-webkit-transform:scale3d(1.03,1.03,1.03);opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{-webkit-transform:scaleX(1);opacity:1;transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;-webkit-animation-name:bounceIn;animation-duration:.75s;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,-3000px,0);opacity:0;transform:translate3d(0,-3000px,0)}60%{-webkit-transform:translate3d(0,25px,0);opacity:1;transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(-3000px,0,0);opacity:0;transform:translate3d(-3000px,0,0)}60%{-webkit-transform:translate3d(25px,0,0);opacity:1;transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(3000px,0,0);opacity:0;transform:translate3d(3000px,0,0)}60%{-webkit-transform:translate3d(-25px,0,0);opacity:1;transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{-webkit-transform:translate3d(0,3000px,0);opacity:0;transform:translate3d(0,3000px,0)}60%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{-webkit-transform:scale3d(1.1,1.1,1.1);opacity:1;transform:scale3d(1.1,1.1,1.1)}to{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;-webkit-animation-name:bounceOut;animation-duration:.75s;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{-webkit-transform:translate3d(0,-20px,0);opacity:1;transform:translate3d(0,-20px,0)}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{-webkit-transform:translate3d(20px,0,0);opacity:1;transform:translate3d(20px,0,0)}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{-webkit-transform:translate3d(-20px,0,0);opacity:1;transform:translate3d(-20px,0,0)}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{-webkit-transform:translate3d(0,20px,0);opacity:1;transform:translate3d(0,20px,0)}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDown{0%{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInDownBig{0%{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeft{0%{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRight{0%{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInRightBig{0%{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUp{0%{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes fadeInUpBig{0%{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{-webkit-transform:translate3d(0,100%,0);opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{-webkit-transform:translate3d(0,2000px,0);opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0);opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{-webkit-transform:translate3d(-2000px,0,0);opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{-webkit-transform:translate3d(2000px,0,0);opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{-webkit-transform:translate3d(0,-100%,0);opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{-webkit-transform:translate3d(0,-2000px,0);opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}@keyframes flip{0%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)}40%{-webkit-animation-timing-function:ease-out;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)}50%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)}80%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg)}to{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in;transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)}}.animated.flip{-webkit-animation-name:flip;-webkit-backface-visibility:visible;animation-name:flip;backface-visibility:visible}@-webkit-keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateX(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateX(-20deg)}60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1;transform:perspective(400px) rotateX(10deg)}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-animation-name:flipInX;-webkit-backface-visibility:visible!important;animation-name:flipInX;backface-visibility:visible!important}@-webkit-keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0;transform:perspective(400px) rotateY(90deg)}40%{-webkit-animation-timing-function:ease-in;-webkit-transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in;transform:perspective(400px) rotateY(-20deg)}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1;transform:perspective(400px) rotateY(10deg)}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-animation-name:flipInY;-webkit-backface-visibility:visible!important;animation-name:flipInY;backface-visibility:visible!important}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);opacity:1;transform:perspective(400px) rotateX(-20deg)}to{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;transform:perspective(400px) rotateX(90deg)}}.flipOutX{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutX;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);opacity:1;transform:perspective(400px) rotateY(-15deg)}to{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;transform:perspective(400px) rotateY(90deg)}}.flipOutY{-webkit-animation-duration:.75s;-webkit-animation-name:flipOutY;-webkit-backface-visibility:visible!important;animation-duration:.75s;animation-name:flipOutY;backface-visibility:visible!important}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)}60%{-webkit-transform:skewX(20deg);opacity:1;transform:skewX(20deg)}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-name:lightSpeedIn;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);opacity:0;transform:translate3d(100%,0,0) skewX(30deg)}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-name:lightSpeedOut;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}@keyframes rotateIn{0%{-webkit-transform:rotate(-200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(-200deg);transform-origin:center}to{-webkit-transform:translateZ(0);-webkit-transform-origin:center;opacity:1;transform:translateZ(0);transform-origin:center}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInDownRight{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(45deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}@keyframes rotateInUpLeft{0%{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:left bottom;opacity:1;transform:translateZ(0);transform-origin:left bottom}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}@keyframes rotateInUpRight{0%{-webkit-transform:rotate(-90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-90deg);transform-origin:right bottom}to{-webkit-transform:translateZ(0);-webkit-transform-origin:right bottom;opacity:1;transform:translateZ(0);transform-origin:right bottom}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}@keyframes rotateOut{0%{-webkit-transform-origin:center;opacity:1;transform-origin:center}to{-webkit-transform:rotate(200deg);-webkit-transform-origin:center;opacity:0;transform:rotate(200deg);transform-origin:center}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(45deg);transform-origin:left bottom}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(-45deg);transform-origin:right bottom}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;opacity:1;transform-origin:left bottom}to{-webkit-transform:rotate(-45deg);-webkit-transform-origin:left bottom;opacity:0;transform:rotate(-45deg);transform-origin:left bottom}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;opacity:1;transform-origin:right bottom}to{-webkit-transform:rotate(90deg);-webkit-transform-origin:right bottom;opacity:0;transform:rotate(90deg);transform-origin:right bottom}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}@keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform-origin:top left}20%,60%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;transform:rotate(80deg);transform-origin:top left}40%,80%{-webkit-animation-timing-function:ease-in-out;-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;animation-timing-function:ease-in-out;opacity:1;transform:rotate(60deg);transform-origin:top left}to{-webkit-transform:translate3d(0,700px,0);opacity:0;transform:translate3d(0,700px,0)}}.hinge{-webkit-animation-duration:2s;-webkit-animation-name:hinge;animation-duration:2s;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}@keyframes jackInTheBox{0%{-webkit-transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{-webkit-transform:scale(1);opacity:1;transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}@keyframes rollIn{0%{-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{-webkit-transform:translateZ(0);opacity:1;transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) rotate(120deg);opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}@keyframes zoomInDown{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}@keyframes zoomInLeft{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}@keyframes zoomInRight{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}@keyframes zoomInUp{0%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0)}60%{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{-webkit-transform:scale3d(.3,.3,.3);opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}@keyframes zoomOutDown{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomOutLeft{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{-webkit-transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomOutRight{40%{-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{-webkit-transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}@keyframes zoomOutUp{40%{-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0)}to{-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:hidden}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:hidden}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:hidden}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:hidden}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;-webkit-animation-fill-mode:both;animation-duration:1s;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion){.animated{-webkit-animation:unset!important;-webkit-transition:none!important;animation:unset!important;transition:none!important}} /* assets/css/flaticon.css */ @font-face { font-display: swap; font-family: "flaticon"; src: url("/assets/fonts/flaticon.ttf?b014d13cd529ac70e334da0872eecc24") format("truetype"), url("/assets/fonts/flaticon.woff?b014d13cd529ac70e334da0872eecc24") format("woff"), url("/assets/fonts/flaticon.woff2?b014d13cd529ac70e334da0872eecc24") format("woff2"), url("/assets/fonts/flaticon.eot?b014d13cd529ac70e334da0872eecc24#iefix") format("embedded-opentype"), url("/assets/fonts/flaticon.svg?b014d13cd529ac70e334da0872eecc24#flaticon") format("svg"); } i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before { font-family: flaticon !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .flaticon-computer:before { content: "\f101"; } .flaticon-chip:before { content: "\f102"; } .flaticon-code:before { content: "\f103"; } .flaticon-programming:before { content: "\f104"; } .flaticon-cloud:before { content: "\f105"; } .flaticon-brain:before { content: "\f106"; } .flaticon-project-management:before { content: "\f107"; } .flaticon-cpu:before { content: "\f108"; } .flaticon-technical-support:before { content: "\f109"; } .flaticon-chip-1:before { content: "\f10a"; } .flaticon-brain-1:before { content: "\f10b"; } .flaticon-settings:before { content: "\f10c"; } .flaticon-coding:before { content: "\f10d"; } .flaticon-targeted-marketing:before { content: "\f10e"; } .flaticon-protection:before { content: "\f10f"; } .flaticon-analysis:before { content: "\f110"; } .flaticon-server:before { content: "\f111"; } .flaticon-cpu-1:before { content: "\f112"; } .flaticon-artificial-intelligence:before { content: "\f113"; } .flaticon-super-intelligence:before { content: "\f114"; } .flaticon-chip-2:before { content: "\f115"; } .flaticon-light-bulb:before { content: "\f116"; } .flaticon-cloud-computing:before { content: "\f117"; } .flaticon-innovation:before { content: "\f118"; } .flaticon-creative:before { content: "\f119"; } .flaticon-stats:before { content: "\f11a"; } .flaticon-business:before { content: "\f11b"; } .flaticon-thumbs-up:before { content: "\f11c"; } .flaticon-puzzle:before { content: "\f11d"; } .flaticon-idea:before { content: "\f11e"; } .flaticon-analytics:before { content: "\f11f"; } .flaticon-development:before { content: "\f120"; } .flaticon-certificate:before { content: "\f121"; } .flaticon-gears:before { content: "\f122"; } .flaticon-medal:before { content: "\f123"; } .flaticon-mobile-app:before { content: "\f124"; } .flaticon-phone-call:before { content: "\f125"; } .flaticon-call:before { content: "\f126"; } .flaticon-envelope:before { content: "\f127"; } .flaticon-email:before { content: "\f128"; } .flaticon-placeholder:before { content: "\f129"; } .flaticon-location:before { content: "\f12a"; } .flaticon-download:before { content: "\f12b"; } /* assets/css/fontawesome.min.css */ /*! * Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) */ .fa,.fab,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s infinite linear}.fa-pulse{animation:fa-spin 1s infinite steps(8)}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-balance-scale:before{content:"\f24e"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-handshake:before{content:"\f2b5"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-wizard:before{content:"\f6e8"}.fa-haykal:before{content:"\f666"}.fa-hdd:before{content:"\f0a0"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-nintendo-switch:before{content:"\f418"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-volume:before{content:"\f2a0"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:swap;src:url(/assets/fonts/fa-brands-400.eot);src:url(/assets/fonts/fa-brands-400d41d.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/fa-brands-400.woff2) format("woff2"),url(/assets/fonts/fa-brands-400.woff) format("woff"),url(/assets/fonts/fa-brands-400.ttf) format("truetype"),url(/assets/fonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/fa-regular-400.eot);src:url(/assets/fonts/fa-regular-400d41d.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/fa-regular-400.woff2) format("woff2"),url(/assets/fonts/fa-regular-400.woff) format("woff"),url(/assets/fonts/fa-regular-400.ttf) format("truetype"),url(/assets/fonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/fa-solid-900.eot);src:url(/assets/fonts/fa-solid-900d41d.eot?#iefix) format("embedded-opentype"),url(/assets/fonts/fa-solid-900.woff2) format("woff2"),url(/assets/fonts/fa-solid-900.woff) format("woff"),url(/assets/fonts/fa-solid-900.ttf) format("truetype"),url(/assets/fonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900} /* assets/css/meanmenu.css */ /*! ####################################################################### MeanMenu 2.0.7 -------- To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) ####################################################################### */ /* hide the link until viewport size is reached */ a.meanmenu-reveal { display: none; } /* when under viewport size, .mean-container is added to body */ .mean-container .mean-bar { float: left; width: 100%; position: absolute; background: transparent; padding: 0 0 0; z-index: 999; } .mean-container a.meanmenu-reveal { width: 35px; height: 30px; position: absolute; right: 0; cursor: pointer; color: #000000; text-decoration: none; font-size: 16px; text-indent: -9999em; line-height: 22px; font-size: 1px; display: block; font-weight: 700; padding-top: 5px; } .mean-container a.meanmenu-reveal span { display: block; background: #000000; height: 4px; margin-top: 3px; border-radius: 3px; } .mean-container .mean-nav { float: left; width: 100%; background: #ffffff; margin-top: 48px; } .mean-container .mean-nav ul { padding: 0; margin: 0; width: 100%; border: none; list-style-type: none; } .mean-container .mean-nav ul li { position: relative; float: left; width: 100%; } .mean-container .mean-nav ul li a i { display: none; } .mean-container .mean-nav ul li a { display: block; float: left; width: 90%; padding: 1em 5% 10px; margin: 0; text-align: left; color: #677294; border-top: 1px solid #DBEEFD; text-decoration: none; } .mean-container .mean-nav ul li a.active { color: #000000; } .mean-container .mean-nav ul li li a { width: 80%; padding: 1em 10% 10px; color: #677294; border-top: 1px solid #DBEEFD; opacity: 1; filter: alpha(opacity=75); text-shadow: none !important; visibility: visible; text-transform: none; font-size: 14px; } .mean-container .mean-nav ul li.mean-last a { margin-bottom: 0; } .mean-container .mean-nav ul li li li a { width: 70%; padding: 1em 15% 10px; } .mean-container .mean-nav ul li li li li a { width: 60%; padding: 1em 20% 10px; } .mean-container .mean-nav ul li li li li li a { width: 50%; padding: 1em 25% 10px; } .mean-container .mean-nav ul li a:hover { background: #252525; background: rgba(255,255,255,0.1); } .mean-container .mean-nav ul li a.mean-expand { margin-top: 1px; width: 100%; height: 24px; padding: 12px !important; text-align: right ; position: absolute; right: 0; top: 0; z-index: 2; font-weight: 700; background: transparent; border: none !important; } .mean-container .mean-push { float: left; width: 100%; padding: 0; margin: 0; clear: both; } .mean-nav .wrapper { width: 100%; padding: 0; margin: 0; } /* Fix for box sizing on Foundation Framework etc. */ .mean-container .mean-bar, .mean-container .mean-bar * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .mean-remove { display: none !important; } /* assets/css/owl.carousel.min.css */ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel, .owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative; } .owl-carousel { display: none; width: 100%; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item, .owl-carousel .owl-wrapper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100% } .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none; } .no-js .owl-carousel, .owl-carousel.owl-loaded { display: block; } .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { background: 0 0; color: inherit; border: none; padding: 0 !important; font: inherit; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } .owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .owl-height { transition: height .5s ease-in-out; } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity .4s ease; } .owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(/assets/css/owl.video.play.html) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform .1s ease; } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100% } .owl-theme .owl-dots, .owl-theme .owl-nav { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav { margin-top: 10px; } .owl-theme .owl-nav [class*=owl-] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; } .owl-theme .owl-nav [class*=owl-]:hover { background: #869791; color: #FFF; text-decoration: none; } .owl-theme .owl-nav .disabled { opacity: .5; cursor: default; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; transition: opacity .2s ease; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } /* assets/css/style.css */ /************************************** ** - 01 - Default CSS **************************************/ body { padding: 0; margin: 0; font-size: 15px; font-family: 'Cabin', sans-serif; } img { max-width: 100%; height: auto; border-radius: 3px; } button:focus:not(:focus-visible) { outline: 0; } dl, ol, ul { padding: 0; margin: 0; list-style: none; } .d-table { width: 100%; height: 100%; } .d-table-cell { vertical-align: middle; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .pb-50 { padding-bottom: 50px; } .pb-70 { padding-bottom: 70px; } .pb-100 { padding-bottom: 100px; } .pt-50 { padding-top: 50px; } .pt-70 { padding-top: 70px; } .pt-100 { padding-top: 100px; } .bg-grey { background-color: #fafafa; } .section-padding { padding: 100px 0; } a { text-decoration: none; -webkit-transition: 0.4s; transition: 0.4s; color: #0b0b31; } a:focus:not(:focus-visible) { outline: 0; } a:hover { text-decoration: none; color: #1976d2; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.4; font-family: 'Cabin', sans-serif; } p { font-size: 15px; line-height: 1.8; color: #5f5f5f; margin-bottom: 15px; font-weight: 400; letter-spacing: 0.3px; font-family: 'Cabin', sans-serif; } p:last-child { margin-bottom: 0; } .default-btn { border: none; position: relative; display: inline-block; text-align: center; overflow: hidden; z-index: 1; color: #ffffff; background-color: #1976d2; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 30px; font-weight: 600; font-size: 15px; padding-left: 40px; padding-right: 40px; padding-top: 12px; padding-bottom: 12px; box-shadow: 0 7px 25px rgb(123,104,238,0.25); } .default-btn span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: #3e57d0; -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; transition: width 0.5s ease-in-out, height 0.5s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border-radius: 30px; } .default-btn:hover, .default-btn:focus { color: #ffffff; } .default-btn:hover span, .default-btn:focus span { width: 225%; height: 562.5px; } .default-btn-one { border: none; position: relative; display: inline-block; text-align: center; overflow: hidden; z-index: 1; color: #1976d2; background-color: #ffffff; border-radius: 30px; font-weight: 600; font-size: 15px; padding-left: 35px; padding-right: 35px; padding-top: 12px; padding-bottom: 12px; margin-right: 20px; box-shadow: 0 7px 25px rgb(123,104,238,0.25); -webkit-transition: 0.4s; transition: 0.4s; } .default-btn-one span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: #3e57d0; -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out; transition: width 0.5s ease-in-out, height 0.5s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border-radius: 30px; } .default-btn-one:hover, .default-btn-one:focus { color: #ffffff; } .default-btn-one:hover span, .default-btn-one:focus span { width: 225%; height: 562.5px; } .section-title { text-align: center; margin-bottom: 65px; line-height: 1.5; } .section-title h6 { font-size: 16px; font-weight: 700; color: #FF9800; letter-spacing: 0.5px; text-transform: uppercase; } .section-title h2 { font-size: 40px; color: #0b0b31; margin: 10px 0 0 0; font-weight: 700; } .color-text { color: #1976d2; } .valign { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* [ Start Overlay ] */ [data-overlay-dark], [data-overlay-light] { position: relative; } [data-overlay-dark] .container, [data-overlay-light] .container { position: relative; z-index: 2; } [data-overlay-dark]:before, [data-overlay-light]:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } [data-overlay-dark]:before { background: #02050b; } [data-overlay-light]:before { background: #fff; } [data-overlay-dark] h1, [data-overlay-dark] h2, [data-overlay-dark] h3, [data-overlay-dark] h4, [data-overlay-dark] h5, [data-overlay-dark] h6, [data-overlay-dark] span, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark span, .bg-color h1, .bg-color h2, .bg-color h3, .bg-color h4, .bg-color h5, .bg-color h6, .bg-color span { color: black; } [data-overlay-dark] p, .bg-dark p, .bg-color p { color: black; } [data-overlay-dark="0"]:before, [data-overlay-light="0"]:before { opacity: 0; } [data-overlay-dark="1"]:before, [data-overlay-light="1"]:before { opacity: .1; } [data-overlay-dark="2"]:before, [data-overlay-light="2"]:before { opacity: .2; } [data-overlay-dark="3"]:before, [data-overlay-light="3"]:before { opacity: .3; } [data-overlay-dark="4"]:before, [data-overlay-light="4"]:before { opacity: .4; } [data-overlay-dark="5"]:before, [data-overlay-light="5"]:before { opacity: .5; } [data-overlay-dark="6"]:before, [data-overlay-light="6"]:before { opacity: .6; } [data-overlay-dark="7"]:before, [data-overlay-light="7"]:before { opacity: .7; } [data-overlay-dark="8"]:before, [data-overlay-light="8"]:before { opacity: .8; } [data-overlay-dark="9"]:before, [data-overlay-light="9"]:before, [data-overlay-color="9"]:before { opacity: .9; } [data-overlay-dark="10"]:before, [data-overlay-light="10"]:before { opacity: 1; } /* [ End Overlay ] */ /***************************************** ** - 00 - Go Top / WhatsApp flutuante ******************************************/ .go-top { position: fixed; cursor: pointer; bottom: 30px; right: 30px; color: #ffffff; background-color: #25D366; z-index: 999; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s, background-color 0.2s; text-decoration: none; box-shadow: 0 2px 10px rgba(37, 211, 102, 0.4); } /* WhatsApp acima do bot?o azul do chat, com 30px de espa?o entre eles */ .go-top.go-top-whatsapp { bottom: 110px; /* 20px (chat) + 60px (altura do bot?o azul) + 30px de espa?o */ right: 30px; z-index: 10000; } .go-top.active { opacity: 1; visibility: visible; } .go-top:hover, .go-top:focus { color: #ffffff; background-color: #1da851; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.5); } .go-top .go-top-icon { width: 28px; height: 28px; flex-shrink: 0; } /***************************** ** - 02 - Preloader Area CSS **************************************/ .preloader { position: fixed; width: 100%; height: 100%; z-index: 99999; background: transparent; top: 0; left: 0; } .preloader .loader { position: absolute; top: 43%; left: 0; right: 0; -webkit-transform: translateY(-43%); transform: translateY(-43%); text-align: center; margin: 0 auto; width: 50px; height: 50px; -webkit-transition: 0.4s; transition: 0.4s; } .preloader .loader .box { width: 100%; height: 100%; background: #ffffff; -webkit-animation: animate .5s linear infinite; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } .preloader .loader .shadow { width: 100%; height: 5px; background: #000000; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; -webkit-animation: shadow .5s linear infinite; animation: shadow .5s linear infinite; } .preloader::before, .preloader::after { content: ''; position: absolute; left: 0; top: 0; width: 60%; height: 100%; z-index: -1; background: #1976d2; -webkit-transition: .9s; transition: .9s; } .preloader::after { left: auto; right: 0; } .preloader.preloader-deactivate { visibility: hidden; } .preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before { width: 0; } .preloader.preloader-deactivate .loader { opacity: 0; visibility: hidden; } @-webkit-keyframes loader { 0% { left: -100px; } 100% { left: 110%; } } @keyframes loader { 0% { left: -100px; } 100% { left: 110%; } } @-webkit-keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { -webkit-transform: translateY(9px) rotate(22.5deg); transform: translateY(9px) rotate(22.5deg); } 50% { -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg); transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { -webkit-transform: translateY(9px) rotate(67.5deg); transform: translateY(9px) rotate(67.5deg); } 100% { -webkit-transform: translateY(0) rotate(90deg); transform: translateY(0) rotate(90deg); } } @keyframes animate { 17% { border-bottom-right-radius: 3px; } 25% { -webkit-transform: translateY(9px) rotate(22.5deg); transform: translateY(9px) rotate(22.5deg); } 50% { -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg); transform: translateY(18px) scale(1, 0.9) rotate(45deg); border-bottom-right-radius: 40px; } 75% { -webkit-transform: translateY(9px) rotate(67.5deg); transform: translateY(9px) rotate(67.5deg); } 100% { -webkit-transform: translateY(0) rotate(90deg); transform: translateY(0) rotate(90deg); } } @-webkit-keyframes shadow { 50% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } } @keyframes shadow { 50% { -webkit-transform: scale(1.2, 1); transform: scale(1.2, 1); } } /************************************** ** - 03 - Navbar Area CSS **************************************/ .webtech-responsive-nav { display: none; } .webtech-nav { background-color: transparent; padding-top: 15px; padding-bottom: 15px; padding-right: 0; padding-left: 0; } .webtech-nav .navbar { padding-right: 0; padding-top: 0; padding-left: 0; padding-bottom: 0; } .webtech-nav .navbar ul { padding-left: 0; list-style-type: none; margin-bottom: 0; } .webtech-nav .navbar .navbar-nav { margin: auto; } .webtech-nav .navbar .navbar-nav .nav-item { position: relative; padding-top: 15px; padding-bottom: 15px; padding-left: 0; padding-right: 0; } .webtech-nav .navbar .navbar-nav .nav-item a { font-size: 16px; font-weight: 600; color: #ffffff; text-transform: capitalize; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; margin-left: 15px; margin-right: 15px; } .webtech-nav .navbar .navbar-nav .nav-item a:hover, .webtech-nav .navbar .navbar-nav .nav-item a:focus, .webtech-nav .navbar .navbar-nav .nav-item a.active { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item a i { font-size: 10px; position: relative; top: -1px; margin-left: 1px; } .webtech-nav .navbar .navbar-nav .nav-item:last-child a { margin-right: 0; } .webtech-nav .navbar .navbar-nav .nav-item:first-child a { margin-left: 0; } .webtech-nav .navbar .navbar-nav .nav-item:hover a, .webtech-nav .navbar .navbar-nav .nav-item:focus a, .webtech-nav .navbar .navbar-nav .nav-item.active a { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu { -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); background: #ffffff; position: absolute; border: none; top: 80px; left: 0; width: 230px; z-index: 99; display: block; opacity: 0; visibility: hidden; border-radius: 3px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; padding: 0px; overflow: hidden; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li { padding: 0; border-bottom: 1px solid #f1f1f1; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child { border-bottom: 0px solid transparent; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li a { text-transform: capitalize; padding: 10px 15px; margin: 0; position: relative; color: #0b0b31; font-size: 15.5px; font-weight: 500; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active { color: #ffffff; background: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu { left: -245px; top: 0; opacity: 0; visibility: hidden; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a { color: #696997; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu { left: -245px; top: 0; opacity: 0; visibility: hidden; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a { color: #696997; text-transform: capitalize; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu { left: -245px; top: 0; opacity: 0; visibility: hidden; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a { color: #696997; text-transform: capitalize; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu { left: 195px; top: 0; opacity: 0; visibility: hidden; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a { color: #696997; text-transform: capitalize; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu { left: 195px; top: 0; opacity: 0; visibility: hidden; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a { color: #696997; text-transform: capitalize; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu { left: 195px; top: 0; opacity: 0; visibility: hidden; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a { color: #696997; text-transform: capitalize; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu { opacity: 1; visibility: visible; top: -15px; -webkit-transition: 0.4s; transition: 0.4s; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu { opacity: 1; visibility: visible; top: -15px; -webkit-transition: 0.4s; transition: 0.4s; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu { opacity: 1; visibility: visible; top: -15px; -webkit-transition: 0.4s; transition: 0.4s; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu { opacity: 1; visibility: visible; top: -15px; -webkit-transition: 0.4s; transition: 0.4s; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu { opacity: 1; visibility: visible; top: -15px; -webkit-transition: 0.4s; transition: 0.4s; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li.active a { color: #1976d2; } .webtech-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu { opacity: 1; visibility: visible; top: -15px; -webkit-transition: 0.4s; transition: 0.4s; } .webtech-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; top: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .webtech-nav .navbar .other-option { margin-left: 0; margin-top: 5px; } .webtech-nav .navbar .other-option .default-btn.seo-btn { padding: 10px 25px; font-size: 15px; background-color: transparent; border: 2px solid #1976d2; color: #1976d2; } .webtech-nav .navbar .other-option .default-btn.seo-btn:hover { background-color: #1976d2; color: #ffffff; } .webtech-nav .black-logo { display: none; width: 150px; } .navbar-area { background-color: transparent; -webkit-transition: 0.4s; transition: 0.4s; position: absolute; z-index: 999; left: 0; top: 0; width: 100%; height: auto; } .navbar-area.is-sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06); box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06); background: #ffffff !important; -webkit-animation: 500ms ease-in-out 0s normal fadeInDown; animation: 500ms ease-in-out 0s normal fadeInDown; -webkit-transition: 0.4s; transition: 0.4s; } .navbar-area.is-sticky .navbar-nav .nav-item a { color: #505050; } .navbar-area.is-sticky .navbar-nav .nav-item a:hover, .navbar-area.is-sticky .navbar-nav .nav-item a:focus, .navbar-area.is-sticky .navbar-nav .nav-item a.active { color: #1976d2; } .navbar-area.is-sticky .webtech-nav .navbar-brand .white-logo { display: none; width: 150px; } .navbar-area.is-sticky .webtech-nav .navbar-brand .black-logo { display: block; width: 150px; } @media only screen and (max-width: 991px) { .navbar-area { padding-top: 20px; padding-bottom: 20px; } .bg-whatsapp { display: none !important; } .navbar-area.is-sticky { border-bottom: none; -webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1); padding-top: 20px; padding-bottom: 20px; } .navbar-area.is-sticky .logo .white-logo { display: none; width: 200px; } .navbar-area.is-sticky .logo .black-logo { display: block; } .webtech-responsive-nav { display: block; } .webtech-responsive-nav .webtech-responsive-menu { position: relative; } .webtech-responsive-nav .webtech-responsive-menu.mean-container .mean-nav ul { font-size: 15px; } .webtech-responsive-nav .webtech-responsive-menu.mean-container .mean-nav ul li a { font-size: 15px; } .webtech-responsive-nav .webtech-responsive-menu.mean-container .mean-nav ul li a.active { color: #1976d2; } .webtech-responsive-nav .webtech-responsive-menu.mean-container .mean-nav ul li li a { font-size: 15px; } .webtech-responsive-nav .webtech-responsive-menu.mean-container .navbar-nav { overflow-y: scroll; height: 250px; -webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1); } .webtech-responsive-nav .webtech-responsive-menu.mean-container .others-options { display: none; } .webtech-responsive-nav .mean-container a.meanmenu-reveal { display:block; color: #0b0b31; } .webtech-responsive-nav .mean-container a.meanmenu-reveal span { background: #0b0b31; } .webtech-responsive-nav .logo { position: relative; width: 30%; z-index: 999; } .webtech-responsive-nav .logo .white-logo { display: block; width: 200px; } .webtech-responsive-nav .logo .black-logo { display: none; width: 200px; } .webtech-nav { display: none; } } /************************************** ** - 04 - Home Area CSS **************************************/ .home-area { position: relative; z-index: 1; height: 750px; background: url(/assets/img/slider-1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; } .home-area:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; opacity: .7; background: #02050b; } .main-banner-content { text-align: center; padding-top: 50px; } .main-banner-content h1 { font-size: 50px; color: #ffffff; margin: 0 0 20px 0; font-weight: 700; } .main-banner-content p { color: #ffffff; font-size: 16px; margin: 0 0 0 0; } .main-banner-content .banner-btn { margin-top: 25px; display: flex; justify-content: center; align-items: center; text-align: left; } .main-banner-content .banner-btn .default-btn-one span { background-color: #ff561d; } .home-area .banner-image { text-align: center; padding-top: 50px; } .home-area .creative-shape { position: absolute; bottom: -5px; left: 0; width: 100%; height: auto; z-index: -1; } .video-box { position: relative; display: flex; justify-content: center; align-items: center; margin-left: 25px; } .video-box .popup-video { display: inline-block; position: relative; z-index: 9; font-size: 22px; color: #1976d2; background: #ffffff; width: 55px; height: 55px; border-radius: 100%; display: flex; text-align: center; justify-content: center; align-items: center; } .video-box:hover .popup-video { background: #fff; color: #ff561d; } .video-box h5 { color: #fff; font-size: 16px; margin: 0px; font-weight: 600; display: inline-block; padding-left: 15px; font-family: 'Cabin', sans-serif; } .video-box .popup-video i { margin-left: 5px; } .video-box .iq-waves { position: absolute; left: -23px; top: -23px; z-index: 2; } .video-box .iq-waves .waves { position: absolute; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.5); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-radius: 50%; background-clip: padding-box; -webkit-animation: waves 3s ease-in-out infinite; animation: waves 3s ease-in-out infinite; } .video-box .iq-waves .wave-1 { -webkit-animation-delay: 0s; animation-delay: 0s; } .video-box .iq-waves .wave-2 { -webkit-animation-delay: 1s; animation-delay: 1s; } .video-box .iq-waves .wave-3 { -webkit-animation-delay: 2s; animation-delay: 2s; } @-webkit-keyframes waves { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } @keyframes waves { 0% { -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } 50% { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } 100% { -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } /************************************** ** - 04.1 - Home Slider Section CSS **************************************/ .slider { position: relative; } .slider.fixed-slider { position: fixed; top: 0; left: 0; right: 0; } .slider .swiper-slide-active { z-index: 3; } .slider .parallax-slider { position: relative; height: 700px; } .slider .parallax-slider .swiper-slide { position: relative; overflow: hidden; width: 100%; padding-bottom: 50px; } .slider .parallax-slider .swiper-slide .bg-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; /* Adicionado para centralizar a imagem */ background-repeat: no-repeat; /* Adicionado para evitar repeti��o */ } .slider .parallax-slider .swiper-slide-active .caption h1 { opacity: 1; animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .slider .parallax-slider .caption { text-align: center; padding-top: 70px; } .slider .parallax-slider .caption h1 { font-size: 50px; font-weight: 700; opacity: 1; visibility: visible; line-height: normal; } .slider .parallax-slider .caption p { font-size: 20px; font-weight: 500; margin-top: 20px; opacity: 1; } .slider .parallax-slider .swiper-slide-active .caption p { font-weight: 500; opacity: 1; animation: fadeInRight .8s; } .slider .parallax-slider .swiper-slide-active .caption ul li { animation: fadeInRight .8s; } .slider .parallax-slider .swiper-slide-active .caption .home-slider-btn { opacity: 1; animation: fadeInLeft 1s; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .slider .control-text { position: absolute; top: 50%; z-index: 8; width: 100%; height: auto; align-items: center; display: flex; justify-content: space-between; } .slider .control-text .swiper-nav-ctrl { color: #fff; font-size: 15px; font-weight: 600; margin-left: 15px; margin-right: 15px; position: static; width: auto; height: auto; display: inline-block; background: transparent; padding: 5px 10px; border-radius: 3px; } .slider .control-text .swiper-nav-ctrl:after { font-size: 20px; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; display: block; text-align: center; background: rgb(0, 0, 0, 0.3); } .slider .swiper-pagination-bullets { bottom: 20px; } .slider .swiper-pagination-bullet { background: #fff; opacity: .4; } .slider .swiper-pagination-bullet-active { background: #fff; opacity: 1; } /************************************** ** - 05 - About Section CSS **************************************/ .about-area { position: relative; z-index: 1; } .about-content h6 { color: #1976d2; font-size: 16px; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .about-content h2 { font-size: 35px; font-weight: 700; margin-bottom: 20px; } .about-content-text p { margin-bottom: 15px; } .about-content-text .button { margin-top: 10px; } .about-content-text { margin-top: 80px; } .about-area .skills { margin-top: 30px; } .about-area .skills .skill-item { margin-bottom: 25px; } .about-area .skills .skill-item:last-child { margin-bottom: 0px; } .about-area .skills .skill-item h6 { position: relative; z-index: 4; font-size: 15px; letter-spacing: 0.7px; text-transform: capitalize; font-weight: 600; margin-bottom: 10px; } .about-area .skills .skill-item h6 em { float: right; font-size: 15px; font-style: normal; } .about-area .skills .skill-item .skill-progress { position: relative; height: 5px; border-radius: 5px; background: #f1f1fa; } .about-area .skills .skill-item .skill-progress .progres { position: absolute; top: 0; left: 0; height: 100%; width: 10%; background-color: #1976d2; -webkit-transition: all 1.5s; transition: all 1.5s; } .about-btn-box { margin-top: 35px; display: inline-block; } .about-image { position: relative; text-align: center; margin-left: 0px; } .about-image img { border-radius: 3px 3px 3px 3px; } .about-image .years-design { position: absolute; left: 0; bottom: 0; border-radius: 50%; text-align: center; width: 45%; height: 40%; padding: 20px 40px 20px 40px; background: #ffffff; border-left: 5px solid #FF9800; border-bottom: 5px solid #FF9800; -webkit-box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1); box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1); } .about-image .years-design h2 { font-size: 70px; font-weight: 700; background: url(/assets/img/about.jpg) no-repeat; background-position: 50% 65%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.1; } .about-image .years-design h5 { color: #FF9800; font-size: 18px; font-weight: 700; margin-top: 5px; } /************************************** ** - 06 - Services Section CSS **************************************/ .services-section .section-title { margin-bottom: 35px; } .single-services-item { position: relative; z-index: 1; display: block; padding: 35px 30px; text-align: left; border-radius: 3px; background-color: #ffffff; margin-top: 30px; -webkit-box-shadow: 5px 7px 15px 2px rgba(82, 90, 101, 0.12); -moz-box-shadow: 5px 7px 15px 2px rgba(82, 90, 101, 0.12); box-shadow: 5px 7px 15px 2px rgba(82, 90, 101, 0.12); -webkit-transition: all 500ms ease-out; transition: all 500ms ease-out; will-change: transform; } .services-icon { display: inline-block; margin-bottom: 20px; -webkit-transition: 0.5s; transition: 0.5s; will-change: transform; } .services-icon i { color: #1976d2; font-size: 50px; -webkit-transition: 0.5s; transition: 0.5s; } .single-services-item h3 { font-size: 20px; font-weight: 700; margin-bottom: 0; -webkit-transition: all 400ms ease-out; transition: all 400ms ease-out; } .single-services-item h3 a { display: inline-block; } .single-services-item p { font-size: 15px; margin-top: 15px; margin-bottom: 0; -webkit-transition: all 400ms ease-out; transition: all 400ms ease-out; will-change: transform; } .single-services-item .services-btn-link { margin-top: 16px; } .single-services-item .services-btn-link .services-link { display: inline-block; font-size: 16px; color: #1976d2; letter-spacing: 0.5px; font-weight: 700; -webkit-transition: all 400ms ease-out; transition: all 400ms ease-out; text-decoration: underline; } .single-services-item .services-btn-link:hover .services-link { color: #1976d2; -webkit-transition: all 400ms ease-out; transition: all 400ms ease-out; } .single-services-item:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .single-services-item:hover .services-icon { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } /************************************** ** - 07 - Counter Section CSS **************************************/ .counter-area { position: relative; color: #fff; text-align: center; background: url(/assets/img/banner-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; z-index: 1; } .counter-area::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; padding: 0; height: 100%; width: 100%; opacity: .6; background: #03030c; } .counter-area .section-title h5 { color: #ffffff; } .counter-area .section-title h2 { color: #fff; } .counter-contents h2 { color: #fff; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px; } .counter-contents h3 { color: #fff; font-size: 18px; font-weight: 700; } /************************************** ** - 08 - Work Process Section CSS **************************************/ .tab .tabs_item { display: none; } .tab .tabs_item:first-child { display: block; } .process-list-tab .tabs { padding-left: 0; list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; margin-bottom: 50px; } .process-list-tab .tabs li { -webkit-box-flex: 4; -ms-flex: 7 0; flex: 7 0; max-width: 23.666667%; text-align: center; margin-right: 30px; margin-left: 0; } .process-list-tab .tabs li:last-child { margin-right: 0; } .process-list-tab .tabs li a { display: block; color: #292a2c; background: #ffff; font-size: 17px; font-weight: 700; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; border-radius: 3px; -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11); } .process-list-tab .tabs li a span { display: block; margin-top: 0; } .process-list-tab .tabs li.current a, .process-list-tab .tabs li:hover a { color: #ffffff; background-color: #5e87eb; } .home-1-tab .process-list-tab .tabs li.current a, .home-1-tab .process-list-tab .tabs li:hover a { color: #ffffff; background: #5e87eb; } .home-2-tab .process-list-tab .tabs li.current a, .home-2-tab .process-list-tab .tabs li:hover a { color: #ffffff; background: #5e87eb; } .process-list-tab .tab_content .tabs_item .tab-solution-content h3 { font-size: 33px; color: #393953; margin: 0 0 15px 0; font-weight: 700; } .process-list-tab .tab_content .tabs_item .tab-solution-content p { margin: 0 0 0 0; } process-list-tab .tab_content .tabs_item .tab-solution-content .tab-list { padding-left: 0; margin-bottom: 25px; margin-top: 25px; } .process-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li { font-size: 15px; color: #5f5f5f; list-style-type: none; } .process-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li:last-child { padding-bottom: 0; } .process-list-tab .tab_content .tabs_item .tab-solution-content .tab-list i { font-size: 15px; color: #5e87eb; margin-right: 5px; } .tab-image { text-align: center; } /************************************** ** - 09 - Overview Section CSS **************************************/ .overview-content h6 { font-size: 16px; font-weight: 700; color: #FF9800; letter-spacing: 0.5px; text-transform: uppercase; } .overview-content h2 { font-size: 35px; color: #0b0b31; margin: 8px 0 15px 0; } .overview-content p { margin: 0 0 0 0; } .overview-content .features-list { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; list-style-type: none; margin-bottom: 0; margin-top: 16px; margin-left: -10px; margin-right: -10px; } .overview-content .features-list li { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; margin-top: 15px; padding-left: 10px; padding-right: 10px; } .overview-content .features-list li span { position: relative; z-index: 1; color: #0b0b31; font-size: 16px; font-weight: 600; background-color: #ffffff; display: block; padding: 14px 15px; border-radius: 5px; -webkit-transition: 0.4s; transition: 0.4s; border-left: 2px solid #1976d2; -webkit-box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1); box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1); } .overview-content .features-list li span::before { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 100%; border-radius: 3px; background-color: #1976d2; z-index: -1; -webkit-transition: 0.4s; transition: 0.4s; } .overview-content .features-list li span:hover { color: #ffffff; } .overview-content .features-list li span:hover::before { width: 100%; } .overview-image { text-align: center; } /************************************** ** - 10 - Project Section CSS **************************************/ .project-area { position: relative; } .project-item img { width: 100%; border-radius: 0px; } .project-item { position: relative; display: block; overflow: hidden; border-radius: 0px; margin-top: 30px; } .project-item .project-content-overlay { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: -20px; background-color: #fff; padding: 25px 20px; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .project-item .project-content-overlay p { color: #1976d2; font-size: 14px; font-weight: 700; margin-bottom: 0; opacity: 0; visibility: hidden; -webkit-transform: translateX(-15px); transform: translateX(-15px); -webkit-transition: all .4s; transition: all .4s; } .project-item .project-content-overlay h3 { color: #1b1b1b; font-size: 18px; font-weight: 700; margin-top: 5px; margin-bottom: 0; opacity: 0; visibility: hidden; -webkit-transform: translateX(15px); transform: translateX(15px); -webkit-transition: all .4s; transition: all .4s; } .project-item:hover .project-content-overlay p, .project-item:hover .project-content-overlay h3 { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: .3s; transition-delay: .3s; } .project-item:hover .project-content-overlay { bottom: 10px; opacity: 1; visibility: visible; } /************************************** ** - 11 - Testimonial Section CSS **************************************/ .testimonial-section { text-align: center; position: relative; z-index: 1; } .single-testimonial { position: relative; background: #fafafa; padding: 30px 15px; border-radius: 5px; } .single-testimonial .testimonial-content { margin-bottom: 25px; text-align: center; } .single-testimonial .rating-box { margin-bottom: 10px; } .rating-box ul li { display: inline-block; margin-right: 0px; } .rating-box ul li i { color: #ffce39; font-size: 16px; } .single-testimonial .testimonial-content p { font-size: 15px; color: #333; font-style: italic; line-height: 1.8; letter-spacing: 1px; } .single-testimonial .avatar { margin: 0 auto; margin-bottom: 15px; } .single-testimonial .avatar img { border-radius: 50%; border: 5px solid #ffffff; width: 90px; margin: 0 auto; border-left-color: #1976d2; border-bottom-color: #1976d2; } .single-testimonial .testimonial-bio { text-align: center; } .single-testimonial .testimonial-bio .bio-info h3 { color: #333; font-size: 20px; font-weight: 700; margin-top: 0; } .single-testimonial .testimonial-bio .bio-info span { color: #333; font-size: 15px; font-weight: 500; } .testimonial-slider.owl-theme .owl-nav { opacity: 0; visibility: hidden; margin-top: 0; -webkit-transition: 0.4s; transition: 0.4s; } .testimonial-slider.owl-theme .owl-nav [class*=owl-] { position: absolute; left: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0; padding: 0; background-color: #fff; -webkit-transition: 0.4s; transition: 0.4s; color: #333; font-size: 18px; width: 50px; height: 45px; line-height: 50px; } .testimonial-slider.owl-theme .owl-nav [class*=owl-].owl-next { left: auto; right: 10px; } .testimonial-slider.owl-theme .owl-nav [class*=owl-]:hover { color: #1976d2; background-color: transparent; } .testimonial-slider.owl-theme .owl-dots { line-height: .01; margin-top: 30px; margin-bottom: 0; } .testimonial-slider.owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 0 4px; background-color: #fff; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 30px; } .testimonial-slider.owl-theme .owl-dots .owl-dot:hover span { background-color: #1976d2; } .testimonial-slider.owl-theme .owl-dots .owl-dot.active span { background-color: #1976d2; } .testimonial-slider.owl-theme:hover .owl-nav { opacity: 1; visibility: visible; } /************************************** ** - 12 - Team Section CSS **************************************/ .team-area { } .team-area .section-title { margin-bottom: 35px; } .single-team-box { margin-top: 30px; overflow: hidden; -webkit-transition: 0.5s; transition: 0.5s; } .team-image { position: relative; z-index: 1; border-radius: 3px; overflow: hidden; } .team-image::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; padding: 0; height: 100%; width: 100%; opacity: 0; visibility: hidden; background: #000; -webkit-transition: 0.5s; transition: 0.5s; } .single-team-box:hover .team-image::before { opacity: .8; visibility: visible; } .single-team-box .team-image img { width: 100%; height: auto; -webkit-transition: 0.5s; transition: 0.5s; } .single-team-box:hover .team-image img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .team-social-icon { position: absolute; z-index: 5; top: 50%; width: 100%; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .team-social-icon a { padding: 15px; color: #fff; font-size: 18px; display: inline-block; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; will-change: transform; } .single-team-box:hover .team-social-icon a { opacity: 1; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .team-info { padding: 20px 15px 0px; text-align: center; -webkit-transition: 0.5s; transition: 0.5s; } .team-info h3 { font-size: 18px; font-weight: 700; margin-bottom: 0; } .team-info span { color: #5764ec; font-size: 15px; font-weight: 500; display: block; } /************************************** **************************************/ .hire-section { position: relative; z-index: 1; background-image: url(/assets/img/banner-bg.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; text-align: center; padding: 70px 0; } .hire-section::before { content: ""; position: absolute; z-index: -1; left: 0; top: 0; height: 100%; width: 100%; background-color: #03030c; opacity: 0.6; } .hire-content h2 { font-size: 38px; color: #fff; margin: 0; font-weight: 700; } .hire-content p { color: #fff; font-size: 18px; margin: 20px 0 0 0; } .hire-content .hire-btn { margin-top: 20px; align-content: center; } .hire-content .hire-btn .default-btn { margin: auto; } /************************************** ** - 14 - Partner Section CSS **************************************/ .partner-section { position: relative; background-color: #fff; overflow: hidden; z-index: 1; } .partner-title { text-align: center; margin-bottom: 50px; line-height: 1.5; } .partner-title h6 { font-size: 16px; font-weight: 700; color: #FF9800; letter-spacing: 0.5px; text-transform: uppercase; } .partner-title h2 { font-size: 38px; color: #0b0b31; margin: 10px 0 0 0; font-weight: 900; } .partner-list { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; } .partner-list .partner-item { -ms-flex: 0 0 20%; -webkit-box-flex: 0; flex: 0 0 20%; max-width: 20%; padding-left: 10px; padding-right: 10px; } .partner-list .partner-item a { display: block; text-align: center; position: relative; margin-bottom: 30px; padding: 0px 20px; } .partner-list .partner-item:nth-child(6) { margin-left: 10%; } /************************************** ** - 15 - Blog Section CSS **************************************/ .blog-item { border-radius: 3px; overflow: hidden; -webkit-box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%); box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%); background-color: #ffffff; position: relative; margin-bottom: 30px; -webkit-transition: 0.4s; transition: 0.4s; } .blog-item .single-blog-item { border-top: none; padding: 20px 25px; } .blog-item .single-blog-item .blog-list { padding-left: 0; margin-bottom: 0; -webkit-transition: 0.4s; transition: 0.4s; } .blog-item .single-blog-item .blog-list li { list-style-type: none; display: inline-block; font-size: 15px; font-weight: 500; margin-right: 15px; color: #1976d2; } .blog-item .single-blog-item .blog-list li:last-child { margin-right: 0; } .blog-item .single-blog-item .blog-list li i { margin-right: 3px; position: relative; top: -1px; } .blog-item .single-blog-item .blog-list li i::before { font-size: 15px; } .blog-item .single-blog-item .blog-list a { color: #1976d2; text-decoration: none; } .blog-item .single-blog-item .blog-content { -webkit-transition: 0.4s; transition: 0.4s; } .blog-item .single-blog-item .blog-content h3 { color: #0b0b31; font-size: 20px; margin: 10px 0px 10px 0; line-height: 25px; -webkit-transition: 0.4s; transition: 0.4s; line-height: 32px; } .blog-item .single-blog-item .blog-content h3:hover { color: #1976d2; -webkit-transition: .6s; transition: .6s; -webkit-transition: 0.5s; text-decoration: none; } .blog-item .single-blog-item .blog-content p { margin: 0; font-size: 15px; color: #6a6c72; font-weight: 400; } .blog-item .single-blog-item .blog-content a { text-decoration: none; } .blog-item .single-blog-item .blog-content .blog-btn { margin-top: 15px; } .blog-item .single-blog-item .blog-content .blog-btn .blog-btn-one { display: inline-block; font-size: 16px; color: #5f5f5f; font-weight: 600; -webkit-transition: 0.4s; transition: 0.4s; } .blog-item:hover { -webkit-box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%); box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%); background-color: #ffffff; } .blog-item:hover .single-blog-item { border-top: none; } .blog-item:hover .blog-content h3 { color: #1976d2; } .blog-item:hover .blog-content .blog-btn .blog-btn-one { color: #1976d2; } /************************************** ** - 16 - Subscribe Section CSS **************************************/ .subscribe-area { position: relative; padding-top: 50px; padding-bottom: 50px; line-height: 1.5; border-bottom: 1px solid #777; } .subscribe-content { text-align: left; } .subscribe-content .sub-title { color: #fff; display: block; text-transform: capitalize; font-size: 16px; font-weight: 400; } .subscribe-content h2 { color: #fff; margin-bottom: 14px; margin-left: auto; margin-right: auto; font-weight: 700; font-size: 24px; } .newsletter-form { max-width: 580px; position: relative; margin-left: auto; margin-right: auto; } .newsletter-form .input-newsletter { display: block; width: 100%; color: #0b0b31; background-color: #ffffff; border: none; height: 50px; padding-left: 25px; border-radius: 3px; outline: 0; } .newsletter-form .input-newsletter::-webkit-input-placeholder { color: #5f5f5f; } .newsletter-form .input-newsletter:-ms-input-placeholder { color: #5f5f5f; } .newsletter-form .input-newsletter::-ms-input-placeholder { color: #5f5f5f; } .newsletter-form .input-newsletter::placeholder { color: #5f5f5f; } .newsletter-form button { position: absolute; right: 0; top: 0; color: #ffffff; font-size: 16px; font-weight: 500; text-transform: capitalize; background-color: #1976d2; border: none; height: 50px; line-height: 50px; padding: 0 30px; border-radius: 3px; -webkit-transition: 0.4s; transition: 0.4s; } .newsletter-form button:hover { background-color: #FF9800; color: #ffffff; } /********************************************** ** - 17 - Other Page Banner Title Area CSS **********************************************/ .page-title-area { position: relative; z-index: 1; background-image: url(/assets/img/page-title-bg.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 300px; } .page-title-area::before { content: ""; position: absolute; z-index: -1; height: 100%; width: 100%; left: 0; top: 0; opacity: 0.5; background-color: #030821; } .page-title-content { text-align: center; margin-top: 45px; } .page-title-content h2 { margin-bottom: 0; color: #ffffff; font-size: 42px; font-weight: 700; } .page-title-content ul { padding-left: 0; list-style-type: none; margin-top: 12px; margin-bottom: 0; } .page-title-content ul li { color: #ffffff; display: inline-block; position: relative; font-weight: 400; font-size: 17px; margin-left: 10px; margin-right: 10px; } .page-title-content ul li a { display: inline-block; color: #ffffff; -webkit-transition: 0.4s; transition: 0.4s; } .page-title-content ul li a:hover { color: #1976d2; } .page-title-content ul li::before { content: ''; position: absolute; right: -15px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background-color: #FF9800; } .page-title-content ul li:last-child::before { display: none; } .item-bg1 { background-image: url(/assets/img/page-title-bg-2.jpg); } .item-bg2 { background-image: url(/assets/img/page-title-bg-3.jpg); } /************************************************ ** - 18 - Projects Details Page Section CSS ************************************************/ .project-details-image { margin-bottom: 30px; } .projects-details-desc { margin-top: 5px; } .projects-details-desc h3 { margin-bottom: 13px; font-size: 25px; } .projects-details-desc .features-text { margin-top: 25px; margin-bottom: 25px; } .projects-details-desc .features-text h4 { margin-bottom: 12px; font-size: 20px; font-weight: 600; } .projects-details-desc .features-text h4 i { font-size: 16px; margin-right: 4px; color: #1976d2; } .projects-details-desc .project-details-info { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; margin-top: 35px; } .projects-details-desc .project-details-info .single-info-box { -ms-flex: 0 0 20%; -webkit-box-flex: 0; flex: 0 0 20%; max-width: 20%; padding-left: 15px; padding-right: 15px; } .projects-details-desc .project-details-info .single-info-box h4 { margin-bottom: 15px; font-size: 18px; font-weight: 600; } .projects-details-desc .project-details-info .single-info-box span { display: block; color: #5f5f5f; font-size: 15px; } .projects-details-desc .project-details-info .single-info-box .social { padding-left: 0; margin-bottom: 0; list-style-type: none; } .projects-details-desc .project-details-info .single-info-box .social li { display: inline-block; margin-right: 8px; } .projects-details-desc .project-details-info .single-info-box .social li a { color: #1976d2; display: inline-block; background: transparent; width: 35px; height: 35px; line-height: 35px; text-align: center; border: 1px dashed #1976d2; border-radius: 25px; } .projects-details-desc .project-details-info .single-info-box .social li a:hover { color: #1976d2; -webkit-transform: translateY(-5px); transform: translateY(-5px); } .projects-details-desc .project-details-info .single-info-box .default-btn { color: #ffffff; font-size: 15px; font-weight: 500; display: inline-block; padding: 10px 30px; border-radius: 30px; text-transform: capitalize; background-color: #1976d2; border: 1px solid #1976d2; -webkit-transition: 0.5s; transition: 0.5s; } .projects-details-desc .project-details-info .single-info-box .default-btn:hover { background-color: #ffffff; color: #1976d2; } /************************************** ** - 19 - Pricing Page CSS **************************************/ .single-pricing-content { padding: 30px 30px; background: #ffffff; text-align: left; border-radius: 3px; box-shadow: -1px 3px 20px 0px rgb(82 90 101 / 10%); transition: all 0.4s ease 0s; margin-bottom: 30px; } .single-pricing-content:hover { box-shadow: 0 7px 25px rgba(31, 45, 61, 0.1) !important; -webkit-transform: translateY(-10px); transform: translateY(-10px); } .price-tag { position: relative; } .price-tag h3 { position: absolute; display: block; width: 115px; height: 50px; -webkit-border-radius: 0 25px 25px 0; -moz-border-radius: 0 25px 25px 0; border-radius: 25px 0 0 25px; background: #1976d2; line-height: 50px; font-size: 20px; color: #fff; top: 2px; left: -45px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(-90deg); text-align: center; } .price-heading { margin-bottom: 20px; text-align: center; } .price-heading .price-usd h2 { font-size: 50px; font-weight: 900; color: #6f64e7; padding: 15px 0; } .price-heading .price-usd .price-small-text { font-size: 15px; display: block; font-weight: 500; color: #3e3e3e; margin-top: -8px; } .price-body ul li { display: block; border-top: 1px dashed; padding: 10px 0; border-color: #dfe4e8; } .single-pricing-content .price-body { text-align: center; } .price-body ul li:last-child { padding-bottom: 0; } .price-body .offer-list-none { color: #b7b7b7; } .single-pricing-content .price-btn { margin-top: 25px; text-align: center; } .single-pricing-content .price-btn .price-btn-one { padding: 12px 30px; color: #ffffff; font-size: 15px; font-weight: 700; text-transform: capitalize; display: inline-block; background-color: #1976d2; border-radius: 30px; border: 1px solid #1976d2; -webkit-transition: 0.4s; transition: 0.4s; } .single-pricing-content .price-btn .price-btn-one:hover { background-color: transparent; color: #1976d2; } /************************************** ** - 20 - 404 Error Page CSS **************************************/ .error-area { height: 100%; padding: 100px 0; } .error-content { text-align: center; margin: 0 auto; max-width: 700px; } .error-content h3 { font-size: 35px; margin-top: 10px; margin-bottom: 18px; } .error-content p { max-width: 520px; margin: 0 auto 20px; line-height: 30px; } .error-content .default-btn-one { display: inline-block; padding: 12px 30px; background: #1976d2; border: 2px solid #1976d2; color: #ffffff; font-size: 16px; font-weight: 400; -webkit-transition: .6s; transition: .6s; margin-right: 0; } .error-content .default-btn-one:hover { text-decoration: none; background-color: #ffffff; color: #1976d2; } /************************************** ** - 21 - Faq Page CSS **************************************/ .faq-accordion .accordion { list-style-type: none; padding: 0; margin: 0; padding-left: 0; margin-bottom: 0; position: relative; } .faq-accordion .accordion .accordion-item { display: block; margin-bottom: 30px; } .faq-accordion .accordion .accordion-item:last-child { margin-bottom: 0; } .faq-accordion .accordion .accordion-item .accordion-title { color: #333; position: relative; font-size: 18px; font-weight: 600; display: block; padding: 15px 15px; padding-right: 25px; background-color: #f3f3f9; border-radius: 5px; cursor: pointer; border-left: 3px solid #1976d2; } .faq-accordion .accordion .accordion-item .active.accordion-title { color: #fff; background: #1976d2; } .faq-accordion .accordion .accordion-item .accordion-title i { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #333; -webkit-transition: 0.5s; transition: 0.5s; font-size: 15px; } .faq-accordion .accordion .accordion-item .active.accordion-title i { color: #fff; } .faq-accordion .accordion .accordion-item .accordion-title.active i::before { content: "\f068"; } .faq-accordion .accordion .accordion-item .accordion-content { display: none; background-color: #ffffff; margin-bottom: 0; padding: 20px 15px; font-size: 15px; -webkit-box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%); box-shadow: -1px 5px 20px 0px rgb(82 90 101 / 10%); } .faq-accordion .accordion .accordion-item .accordion-content.show { display: block; } /************************************** ** - 22 - Coming Soon Page CSS **************************************/ .coming-soon-area { position: relative; z-index: 1; height: 100vh; background-image: url(/assets/img/page-title-bg.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; } .coming-soon-area::before { z-index: -1; background: #000000; position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; opacity: .80; } .coming-soon-area .social-list { padding: 0; margin: 0; list-style-type: none; position: absolute; left: 0; right: 0; margin: 0 auto; text-align: center; bottom: 30px; } .coming-soon-area .social-list li { display: inline-block; } .coming-soon-area .social-list li.list-heading { display: block; color: #ffffff; margin-bottom: 10px; font-size: 16px; font-weight: 500; } .coming-soon-area .social-list li a { width: 35px; height: 35px; line-height: 35px; background: #1976d2; border: 2px solid #1976d2; color: #ffffff; border-radius: 50%; margin: 0 2px; display: inline-block; } .coming-soon-area .social-list li a:hover { background-color: transparent; color: #1976d2; -webkit-transition: .6s; transition: .6s; -webkit-transition: 0.5s; } .coming-soon-content { text-align: center; max-width: 820px; margin: -80px auto 0; } .coming-soon-content h1 { color: #ffffff; margin-bottom: 15px; font-size: 46px; font-weight: 700; } .coming-soon-content p { color: #ffffff; margin: 0 auto; max-width: 620px; line-height: 30px; } .coming-soon-content form { position: relative; margin: 35px auto 55px; max-width: 520px; } .coming-soon-content form .email-input { display: block; width: 100%; height: 56px; border: none; -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 5px rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 5px rgba(255, 255, 255, 0.3); border-radius: 40px; padding: 15px 25px; outline: 0 !important; background: #F1F2F3; } .coming-soon-content form .submit-btn { position: absolute; right: 3px; top: 3px; height: 50px; background: #1976d2; color: #ffffff; border: none; border-radius: 40px; width: 130px; outline: 0 !important; cursor: pointer; text-transform: uppercase; font-size: 15px; font-weight: 600; } .coming-soon-content form .submit-btn:hover, .coming-soon-content form .submit-btn:focus { background-color: #1976d2; } .coming-soon-content #timer div { background: #ffffff; display: inline-block; border-radius: 50%; width: 120px; height: 120px; color: #1976d2; -webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5); box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5); margin: 0 10px; padding-top: 18px; font-size: 40px; font-weight: 700; } .coming-soon-content #timer div span { display: block; margin-top: -4px; color: #777777; font-size: 15px; font-weight: 600; } /************************************** ** - 23 - Contact Page CSS **************************************/ .contact-section { } .contact-form .form-group { margin-bottom: 30px; } .contact-form form .form-control { background-color: #ffffff; border: none; height: 55px; font-size: 15px; border-left: 3px solid #1976d2; -webkit-box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15); box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15); } .contact-form form .form-control:focus { border-left: 3px solid #1976d2; -webkit-box-shadow: none; box-shadow: none; } .contact-form form textarea.form-control { height: auto; padding-top: 15px; line-height: initial; } .contact-form form .btn { margin-top: 8px; -webkit-box-shadow: 0px 5px 28.5px 1.5px rgba(149, 152, 200, 0.2); box-shadow: 0px 5px 28.5px 1.5px rgba(149, 152, 200, 0.2); } .contact-form form .help-block ul { padding-left: 0; list-style-type: none; margin-top: 5px; margin-bottom: 0; } .contact-form form .help-block ul li { color: red; font-weight: 400; } .contact-info-wrapper { padding: 100px 0; } .contact-info-wrapper .section-title { text-align: center; margin-bottom: 45px; } .contact-info-content { background: #fff; margin-top: 30px; padding: 45px 20px; text-align: center; border-radius: 5px; border-top: 3px solid #1976d2; -webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03); box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03); } .contact-info-content h5 { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .contact-info-content a { font-size: 16px; font-weight: 600; letter-spacing: 1.5px; display: block; line-height: 1.5; } .contact-info-content p { font-size: 15px; margin-bottom: 12px; } .contact-section .form-message.success { background: #03b103; color: #fff; padding: 10px 15px; border-radius: 3px; } .contact-section .form-message.error { background: #ff4d15; color: #fff; padding: 10px 15px; border-radius: 3px; } /************************************** ** Map Section Style *************************************/ .map-content #contact-map { position: relative; width: 100%; height: 500px; border: 0; margin-bottom: -2px; } /************************************************ ** - 24 - Single Services Page Details CSS ************************************************/ .services-details-overview { margin-bottom: 60px; } .services-details-overview:last-child { margin-bottom: 0; } .services-step-wrapper { margin-bottom: 50px; } .services-step-title { text-align: left; margin-bottom: 40px; } .services-step-title h2 { font-size: 35px; color: #0b0b31; font-weight: 700; } .features-text { margin-bottom: 20px; } .features-text:last-child { margin-bottom: 0px; } .features-text h4 { font-size: 20px; } .image-sliders.owl-theme .owl-nav { opacity: 0; visibility: hidden; margin-top: 0; -webkit-transition: 0.4s; transition: 0.4s; } .image-sliders.owl-theme .owl-nav [class*=owl-] { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: 0 15px; padding: 0; background-color: transparent; -webkit-transition: 0.4s; transition: 0.4s; color: #ffffff; font-size: 25px; } .image-sliders.owl-theme .owl-nav [class*=owl-].owl-next { left: auto; right: 0; } .image-sliders.owl-theme .owl-nav [class*=owl-]:hover { color: #1976d2; background-color: transparent; } .image-sliders.owl-theme:hover .owl-nav { opacity: 1; visibility: visible; } /************************************** ** - 25 - Blog Details Page CSS **************************************/ .blog-details-desc .article-content { margin-top: 30px; } .blog-details-desc .article-content .entry-meta { margin-bottom: -8px; } .blog-details-desc .article-content .entry-meta ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .blog-details-desc .article-content .entry-meta ul li { position: relative; display: inline-block; color: #0b0b31; margin-right: 21px; } .blog-details-desc .article-content .entry-meta ul li span { display: inline-block; color: #0b0b31; font-weight: 500; } .blog-details-desc .article-content .entry-meta ul li a { display: inline-block; color: #5f5f5f; } .blog-details-desc .article-content .entry-meta ul li a:hover { color: #1976d2; } .blog-details-desc .article-content .entry-meta ul li i { color: #1976d2; margin-right: 2px; } .blog-details-desc .article-content .entry-meta ul li::before { content: ''; position: absolute; top: 12px; right: -15px; width: 6px; height: 1px; background: #1976d2; } .blog-details-desc .article-content .entry-meta ul li:last-child { margin-right: 0; } .blog-details-desc .article-content .entry-meta ul li:last-child::before { display: none; } .blog-details-desc .article-content h3 { margin-bottom: 15px; margin-top: 25px; font-size: 24px; } .blog-details-desc .article-content .wp-block-gallery.columns-2 { padding-left: 0; list-style-type: none; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; margin-bottom: 30px; margin-top: 30px; } .blog-details-desc .article-content .wp-block-gallery.columns-2 li { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; padding-right: 10px; padding-left: 10px; } .blog-details-desc .article-content .wp-block-gallery.columns-2 li figure { margin-bottom: 0; } .blog-details-desc .article-footer { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; } .blog-details-desc .article-footer .article-tags { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; color: #5f5f5f; } .blog-details-desc .article-footer .article-tags span { display: inline-block; color: #333; font-size: 15px; font-weight: 700; margin-right: 5px; } .blog-details-desc .article-footer .article-tags a { display: inline-block; color: #5f5f5f; } .blog-details-desc .article-footer .article-tags a:hover { color: #1976d2; } .blog-details-desc .article-footer .article-share { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; } .blog-details-desc .article-footer .article-share .social { padding-left: 0; list-style-type: none; text-align: right; margin-bottom: 0; } .blog-details-desc .article-footer .article-share .social li { display: inline-block; margin-right: 5px; } .blog-details-desc .article-footer .article-share .social li:last-child { margin-right: 0; } .blog-details-desc .article-footer .article-share .social li span { display: inline-block; margin-right: 5px; color: #333; font-size: 15px; font-weight: 700; } .blog-details-desc .article-footer .article-share .social li a { display: block; color: #1976d2; font-size: 16px; width: 35px; height: 35px; line-height: 35px; border-radius: 50%; background-color: #eeeef0; text-align: center; } .blog-details-desc .article-footer .article-share .social li a i { font-size: 16px; line-height: 30px; } .blog-details-desc .article-footer .article-share .social li a:hover { color: #ffffff; background-color: #1976d2; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .blog-details-desc .post-navigation { margin-top: 30px; } blockquote, .blockquote { overflow: hidden; background-color: #fafafa; padding: 50px !important; position: relative; text-align: center; z-index: 1; margin-bottom: 20px; margin-top: 20px; } blockquote p, .blockquote p { color: #0b0b31; line-height: 1.6; margin-bottom: 0; font-style: italic; font-weight: 500; font-size: 24px !important; } blockquote cite, .blockquote cite { display: none; } blockquote::before, .blockquote::before { color: #efefef; content: "\f10e"; position: absolute; left: 50px; top: -50px; z-index: -1; font-family: "Font Awesome 5 Free"; font-size: 140px; font-weight: 900; } blockquote::after, .blockquote::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: #1976d2; margin-top: 20px; margin-bottom: 20px; } .post-navigation { border-top: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; padding-top: 20px; padding-bottom: 20px; } .post-navigation .navigation-links { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .post-navigation .navigation-links .nav-previous { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; } .post-navigation .navigation-links .nav-previous a i { margin-right: 2px; -webkit-transition: 0.4s; transition: 0.4s; } .post-navigation .navigation-links .nav-previous a:hover i { margin-right: 0; } .post-navigation .navigation-links .nav-next { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; text-align: right; } .post-navigation .navigation-links .nav-next a i { margin-left: 2px; -webkit-transition: 0.4s; transition: 0.4s; } .post-navigation .navigation-links .nav-next a:hover i { margin-left: 0; } .post-navigation .navigation-links div a { display: inline-block; font-weight: 600; } .comments-area { padding: 25px; margin-top: 30px; -webkit-box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.08); box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.08); background-color: #ffffff; } .comments-area .comments-title { position: relative; margin-bottom: 30px; line-height: initial; font-size: 24px; font-weight: 600; } .comments-area ol, .comments-area ul { padding: 0; margin: 0; list-style-type: none; } .comments-area .comment-list { padding: 0; margin: 0; list-style-type: none; } .comments-area .comment-body { border-bottom: 1px solid #eeeeee; padding-left: 65px; color: #0b0b31; font-size: 14px; margin-bottom: 20px; padding-bottom: 20px; } .comments-area .comment-body .reply { margin-top: 15px; } .comments-area .comment-body .reply a { border: 1px solid #ded9d9; color: #0b0b31; display: inline-block; padding: 5px 20px; border-radius: 30px; text-transform: capitalize; position: relative; z-index: 1; font-size: 16px; font-weight: 600; } .comments-area .comment-body .reply a:hover { color: #ffffff; background-color: #1976d2; border-color: #1976d2; } .comments-area .comment-author { font-size: 17px; margin-bottom: 0.1em; position: relative; z-index: 2; } .comments-area .comment-author .avatar { height: 50px; left: -65px; position: absolute; width: 50px; } .comments-area .comment-author .fn { font-weight: 600; } .comments-area .comment-author .says { display: none; } .comments-area .comment-metadata { margin-bottom: .8em; color: #5f5f5f; letter-spacing: 0.01em; text-transform: uppercase; font-size: 13px; font-weight: 400; } .comments-area .comment-metadata a { color: #5f5f5f; } .comments-area .comment-metadata a:hover { color: #1976d2; } .comments-area .comment-respond { margin-top: 30px; } .comments-area .comment-respond .comment-reply-title { margin-bottom: 0; position: relative; font-size: 24px; font-weight: 600; } .comments-area .comment-respond .comment-reply-title #cancel-comment-reply-link { display: inline-block; } .comments-area .comment-respond .comment-form { overflow: hidden; } .comments-area .comment-respond .comment-notes { margin-bottom: 0; margin-top: 10px; } .comments-area .comment-respond .comment-form-comment { margin-top: 15px; float: left; width: 100%; } .comments-area .comment-respond label { display: block; font-weight: 600; color: #0b0b31; margin-bottom: 5px; } .comments-area .comment-respond input[type="date"], .comments-area .comment-respond input[type="time"], .comments-area .comment-respond input[type="datetime-local"], .comments-area .comment-respond input[type="week"], .comments-area .comment-respond input[type="month"], .comments-area .comment-respond input[type="text"], .comments-area .comment-respond input[type="email"], .comments-area .comment-respond input[type="url"], .comments-area .comment-respond input[type="password"], .comments-area .comment-respond input[type="search"], .comments-area .comment-respond input[type="tel"], .comments-area .comment-respond input[type="number"], .comments-area .comment-respond textarea { display: block; width: 100%; background-color: #ffffff; border: 1px solid #eeeeee; padding: 0.625em 0.7375em; outline: 0; -webkit-transition: 0.4s; transition: 0.4s; } .comments-area .comment-respond input[type="date"]:focus, .comments-area .comment-respond input[type="time"]:focus, .comments-area .comment-respond input[type="datetime-local"]:focus, .comments-area .comment-respond input[type="week"]:focus, .comments-area .comment-respond input[type="month"]:focus, .comments-area .comment-respond input[type="text"]:focus, .comments-area .comment-respond input[type="email"]:focus, .comments-area .comment-respond input[type="url"]:focus, .comments-area .comment-respond input[type="password"]:focus, .comments-area .comment-respond input[type="search"]:focus, .comments-area .comment-respond input[type="tel"]:focus, .comments-area .comment-respond input[type="number"]:focus, .comments-area .comment-respond textarea:focus { border-color: #1976d2; } .comments-area .comment-respond .comment-form-author { float: left; width: 50%; padding-right: 10px; margin-bottom: 20px; } .comments-area .comment-respond .comment-form-email { float: left; width: 50%; padding-left: 12px; margin-bottom: 20px; } .comments-area .comment-respond .comment-form-url { float: left; width: 100%; margin-bottom: 20px; } .comments-area .comment-respond .comment-form-cookies-consent { width: 100%; float: left; position: relative; padding-left: 20px; margin-bottom: 20px; } .comments-area .comment-respond .comment-form-cookies-consent input { position: absolute; left: 0; top: 4px; } .comments-area .comment-respond .comment-form-cookies-consent label { display: inline-block; margin: 0; color: #5f5f5f; font-weight: normal; position: relative; top: -2px; } .comments-area .comment-respond .form-submit { float: left; width: 100%; } .comments-area .comment-respond .form-submit input { color: #ffffff; padding: 10px 30px; display: inline-block; cursor: pointer; outline: 0; border: none; background: #1976d2; border-radius: 0; -webkit-transition: 0.4s; transition: 0.4s; font-weight: 600; font-size: 14px; } .comments-area .comment-respond .form-submit input:hover, .comments-area .comment-respond .form-submit input:focus { color: #ffffff; background-color: #0b0b31; } /************************************************ ** - 26 - Blog Page Sidebar Widget CSS ************************************************/ .widget-area .widget { margin-top: 35px; } .widget-area .widget:first-child { margin-top: 0; } .widget-area .widget .widget-title { border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin-bottom: 25px; text-transform: capitalize; position: relative; font-size: 22px; } .widget-area .widget .widget-title::before { content: ''; position: absolute; background: #1976d2; bottom: -1px; left: 0; width: 50px; height: 1px; } .widget-area .widget_search { -webkit-box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.1); box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.1); background-color: #ffffff; padding: 15px; } .widget-area .widget_search form { position: relative; } .widget-area .widget_search form label { display: block; margin-bottom: 0; } .widget-area .widget_search form .screen-reader-text { display: none; } .widget-area .widget_search form .search-field { background-color: transparent; height: 50px; padding: 6px 15px; border: 1px solid #eeeeee; width: 100%; display: block; outline: 0; -webkit-transition: 0.4s; transition: 0.4s; } .widget-area .widget_search form .search-field:focus { border-color: #1976d2; } .widget-area .widget_search form button { position: absolute; right: 0; outline: 0; bottom: 0; height: 50px; width: 50px; z-index: 1; border: none; color: #ffffff; background-color: #1976d2; -webkit-transition: 0.4s; transition: 0.4s; } .widget-area .widget_search form button:hover { background-color: #0b0b31; color: #ffffff; } .widget-area .widget_webtech_posts_thumb { position: relative; overflow: hidden; } .widget-area .widget_webtech_posts_thumb .item { overflow: hidden; margin-bottom: 15px; } .widget-area .widget_webtech_posts_thumb .item:last-child { margin-bottom: 0; } .widget-area .widget_webtech_posts_thumb .item .thumb { float: left; height: 80px; overflow: hidden; position: relative; width: 80px; margin-right: 15px; } .widget-area .widget_webtech_posts_thumb .item .thumb .fullimage { width: 80px; height: 80px; display: inline-block; background-size: cover !important; background-repeat: no-repeat; background-position: center center !important; } .widget-area .widget_webtech_posts_thumb .item .thumb .fullimage.bg1 { background-image: url(/assets/img/blog-details/1.jpg); } .widget-area .widget_webtech_posts_thumb .item .thumb .fullimage.bg2 { background-image: url(/assets/img/blog-details/2.jpg); } .widget-area .widget_webtech_posts_thumb .item .thumb .fullimage.bg3 { background-image: url(/assets/img/blog-details/3.jpg); } .widget-area .widget_webtech_posts_thumb .item .info { overflow: hidden; margin-top: 5px; } .widget-area .widget_webtech_posts_thumb .item .info span { display: block; color: #5f5f5f; text-transform: capitalize; margin-top: -2px; margin-bottom: 3px; font-size: 14px; } .widget-area .widget_webtech_posts_thumb .item .info .title { margin-bottom: 0; line-height: 1.4; font-size: 16px; } .widget-area .widget_webtech_posts_thumb .item .info .title a { display: inline-block; } .widget-area .widget_recent_entries ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_recent_entries ul li { position: relative; margin-bottom: 12px; color: #0b0b31; padding-left: 14px; line-height: 1.5; font-weight: 400; font-size: 15.5px; } .widget-area .widget_recent_entries ul li:last-child { margin-bottom: 0; } .widget-area .widget_recent_entries ul li::before { background: #1976d2; height: 8px; width: 8px; content: ''; left: 0; top: 7px; position: absolute; border-radius: 50px; border-right-style: inset; } .widget-area .widget_recent_entries ul li a { display: inline-block; color: #0b0b31; } .widget-area .widget_recent_entries ul li a:hover { color: #1976d2; } .widget-area .widget_recent_entries ul li .post-date { display: block; font-size: 13px; color: #5f5f5f; margin-top: 4px; } .widget-area .widget_recent_comments ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_recent_comments ul li { position: relative; margin-bottom: 12px; color: #5f5f5f; padding-left: 14px; line-height: 1.5; font-weight: 400; font-size: 15.5px; } .widget-area .widget_recent_comments ul li:last-child { margin-bottom: 0; } .widget-area .widget_recent_comments ul li::before { background: #1976d2; height: 8px; width: 8px; content: ''; left: 0; top: 7px; position: absolute; border-radius: 50px; border-right-style: inset; } .widget-area .widget_recent_comments ul li a { display: inline-block; color: #0b0b31; } .widget-area .widget_recent_comments ul li a:hover { color: #1976d2; } .widget-area .widget_archive ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_archive ul li { position: relative; margin-bottom: 12px; padding-left: 14px; color: #0b0b31; font-size: 15.5px; font-weight: 400; } .widget-area .widget_archive ul li:last-child { margin-bottom: 0; } .widget-area .widget_archive ul li::before { background: #1976d2; height: 8px; width: 8px; content: ''; left: 0; top: 7px; position: absolute; border-radius: 50px; border-right-style: inset; } .widget-area .widget_archive ul li a { display: inline-block; color: #0b0b31; } .widget-area .widget_archive ul li a:hover { color: #1976d2; } .widget-area .widget_categories ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_categories ul li { position: relative; margin-bottom: 12px; color: #5f5f5f; padding-left: 14px; font-size: 15.5px; font-weight: 400; } .widget-area .widget_categories ul li:last-child { margin-bottom: 0; } .widget-area .widget_categories ul li::before { background: #1976d2; height: 8px; width: 8px; content: ''; left: 0; top: 7px; position: absolute; border-radius: 50px; border-right-style: inset; } .widget-area .widget_categories ul li a { color: #0b0b31; display: block; } .widget-area .widget_categories ul li a:hover { color: #1976d2; } .widget-area .widget_categories ul li .post-count { float: right; } .widget-area .widget_meta ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_meta ul li { position: relative; margin-bottom: 12px; color: #0b0b31; padding-left: 14px; font-size: 15.5px; font-weight: 400; } .widget-area .widget_meta ul li:last-child { margin-bottom: 0; } .widget-area .widget_meta ul li::before { background: #1976d2; height: 8px; width: 8px; content: ''; left: 0; top: 7px; position: absolute; border-radius: 50px; border-right-style: inset; } .widget-area .widget_meta ul li a { display: inline-block; color: #0b0b31; } .widget-area .widget_meta ul li a:hover { color: #1976d2; } .widget-area .widget_tag_cloud .widget-title { margin-bottom: 12px; } .widget-area .tagcloud a { display: inline-block; color: #0b0b31; font-weight: 400; font-size: 14.5px !important; padding: 6px 13px; border: 1px dashed #eeeeee; margin-top: 8px; margin-right: 4px; } .widget-area .tagcloud a:hover, .widget-area .tagcloud a:focus { color: #ffffff; background-color: #1976d2; border-color: #1976d2; } .widget-area .widget_event_details ul { padding-left: 0; margin-bottom: 0; list-style-type: none; } .widget-area .widget_event_details ul li { border-bottom: 1px solid #eeeeee; color: #888f96; padding-bottom: 10px; padding-top: 10px; } .widget-area .widget_event_details ul li:first-child { padding-top: 0; } .widget-area .widget_event_details ul li:last-child { border-bottom: none; padding-bottom: 0; } .widget-area .widget_event_details ul li span { display: inline-block; color: #0b0b31; font-weight: 400; } .widget-area .widget_event_details ul li a { display: inline-block; color: #888f96; } .widget-area .widget_event_details ul li a:hover { color: #1976d2; } /************************************************ ** - 27 - Blog Page Number Pagination CSS ************************************************/ .pagination-area { margin-top: 20px; text-align: center; } .pagination-area .page-numbers { width: 45px; height: 45px; margin: 0 3px; display: inline-block; background-color: #ffffff; line-height: 48px; color: #0b0b31; -webkit-box-shadow: 0 2px 10px 0 #d8dde6; box-shadow: 0 2px 10px 0 #d8dde6; font-size: 18px; font-weight: 700; border-radius: 2px; } .pagination-area .page-numbers.current, .pagination-area .page-numbers:hover, .pagination-area .page-numbers:focus { background: #1976d2; color: #ffffff; -webkit-box-shadow: 0 2px 10px 0 #d8dde6; box-shadow: 0 2px 10px 0 #d8dde6; } /************************************************************* ** - 28 - Terms & Conditions - Privacy Policy Page CSS *************************************************************/ .single-privacy h3 { font-size: 20px; margin: 0 0 12px 0; } /****************************************** ** - 29 - All Page Footer Section CSS ******************************************/ .footer-subscribe-wrapper { position: relative; z-index: 1; background-color: #1c1c23; } .footer-heading { margin-bottom: 25px; } .footer-heading h3 { font-size: 20px; color: #ffffff; font-weight: 600; margin: 0 0 0 0; position: relative; border-bottom: 1px solid #777; padding-bottom: 10px; } .single-footer-widget .footer-social { padding-left: 0; margin-bottom: 0; margin-top: 20px; } .single-footer-widget .footer-social li { display: inline-block; margin-right: 10px; } .single-footer-widget .footer-social li:last-child { margin-right: 0; } .single-footer-widget .footer-social i { display: inline-block; height: 38px; width: 38px; line-height: 38px; background-color: #ffffff; border-radius: 50px; color: #1976d2; -webkit-transition: 0.4s; transition: 0.4s; text-align: center; } .single-footer-widget .footer-social i::before { font-size: 17px; } .single-footer-widget .footer-social i:hover { color: #ffffff; background-color: #1976d2; } .single-footer-widget p { font-size: 15px; color: #ececec; font-weight: 400; } .single-footer-widget .footer-heading { margin-bottom: 25px; } .single-footer-widget .footer-heading h3 { font-size: 20px; color: #ffffff; font-weight: 700; margin: 0 0 0 0; } .single-footer-widget .footer-quick-links { padding-left: 0; margin-bottom: 0; } .single-footer-widget .footer-quick-links li { list-style-type: none; padding-bottom: 18px; } .single-footer-widget .footer-quick-links li:last-child { padding-bottom: 0; } .single-footer-widget .footer-quick-links li a { display: inline-block; color: #ececec; font-size: 15px; font-weight: 400; } .single-footer-widget .footer-quick-links li a:hover { color: #1976d2; text-decoration: underline !important; -webkit-transition: 0.4s; transition: 0.4s; } .single-footer-widget .footer-info-contact { position: relative; padding-left: 35px; margin-bottom: 16px; } .single-footer-widget .footer-info-contact:last-child { margin-bottom: 0; } .single-footer-widget .footer-info-contact i { color: #ffffff; position: absolute; left: 0; top: 0px; } .single-footer-widget .footer-info-contact i::before { font-size: 20px; } .single-footer-widget .footer-info-contact h3 { font-size: 16px; color: #fff; font-weight: 600; margin: 0 0 10px 0; } .single-footer-widget .footer-info-contact span { font-size: 15px; color: #ececec; font-weight: 400; } .single-footer-widget .footer-info-contact span a { font-size: 15px; color: #ececec; font-weight: 400; -webkit-transition: 0.4s; transition: 0.4s; } .single-footer-widget .footer-info-contact span a:hover { color: #1976d2; } /****************************************** ** - 30 - Page Copyright Section CSS ******************************************/ .copyright-area { background-color: #212129; padding: 35px 0; } .copyright-area p { color: #ececec; font-size: 15px; } .copyright-area p a { color: #ececec; display: inline-block; font-weight: 600; } .copyright-area p a:hover { color: #1976d2; } .copyright-area ul { padding-left: 0; margin-bottom: 0; list-style-type: none; text-align: right; } .copyright-area ul li { display: inline-block; color: #ececec; font-size: 15px; position: relative; margin-left: 10px; margin-right: 10px; } .copyright-area ul li a { display: inline-block; color: #ececec; } .copyright-area ul li a:hover { color: #1976d2; } .copyright-area ul li::before { content: ''; position: absolute; top: 5px; right: -13px; width: 1px; height: 14px; background-color: #ffffff; } .copyright-area ul li:last-child { margin-right: 0; } .copyright-area ul li:last-child::before { display: none; } .copyright-area ul li:first-child { margin-left: 0; } /*AREA DAS CLASSES PERSONALIZADAS*/ .custom-list { text-align: left; padding-left: 105px; } .white-background { background: rgba(255, 255, 255, 0.7); margin-bottom: 15px; border-radius: 15px; padding: 20px; text-align: left; } .caption .white-background ul li { margin-left: 30px; font-size: 18px; } .flex-center { display: flex; justify-content: center; align-items: center; } .row.justify-content-center.align-items-center.h-100 { height: 100%; } .custom-icon { width: 55px; padding-bottom: 19px; } .title-text { margin-bottom: -10px; color: #1976d2; } .about-image-plans { position: relative; text-align: center; margin-left: 0px; margin-bottom: 45px; width: 250px; } .plans-text { margin-bottom: 15px; color: black; } .div-gray { background-color: #fafafa; padding: 15px; } .div-white { background-color: #ffffff; padding: 15px; } .custom-check { color: #1976d2; } /*@media only screen and (max-width: 991px) { .webtech-nav { display: none !important; } .mean-container .navbar-brand { display: none !important; } .webtech-responsive-nav { display: block !important; } .a.meanmenu-reveal { display: block; color: #0b0b31; } .mean-container .mean-nav ul { display: block !important; opacity: 1 !important; visibility: visible !important; position:relative; } } */ /* Esconde o menu padr�o do MeanMenu em telas maiores */ @media (min-width: 992px) { #menu { display: none !important; } } .bg-blue { background-color: #1976d2; } .panel-answer { overflow: hidden; transition: max-height 0.5s ease; color: red; } .panel-answer.show { max-height: 1000px; /* um valor alto para garantir que a altura m�xima seja atingida */ } /*AREA dos carousel*/ .carousel-indicators li { display: inline-block; width: 15px; height: 15px; margin: 10px; text-indent: 0; cursor: pointer; border: none; border-radius: 50%; background-color: #1976d2; box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5); } .carousel-indicators .active { width: 15px; height: 15px; margin: 10px; background-color: #0d47a1; } /*AREA dos background dos planos NFE*/ .page-title-area-plan-nfe { position: relative; z-index: 1; background-image: url(/assets/img/planos/fundo-azul-abstrato-nfe.png); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 400px; } .page-title-area-plan-nfe h1 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-nfe h2 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-nfe a { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } /*AREA dos background dos planos Venda*/ .page-title-area-plan-venda { position: relative; z-index: 1; background-image: url(/assets/img/planos/fundo-azul-abstrato-venda.png); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 400px; } .page-title-area-plan-venda h1 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-venda h2 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-venda a { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } /*AREA dos background dos planos OS*/ .page-title-area-plan-os { position: relative; z-index: 1; background-image: url(/assets/img/planos/fundo-azul-abstrato-os.png); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 400px; } .page-title-area-plan-os h1 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-os h2 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-os a { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } /*AREA dos background dos planos premium*/ .page-title-area-plan-premium { position: relative; z-index: 1; background-image: url(/assets/img/planos/fundo-azul-abstrato-premium.png); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 400px; } .page-title-area-plan-premium h1 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-premium h2 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-premium a { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } /*AREA dos background dos planos full*/ .page-title-area-plan-full { position: relative; z-index: 1; background-image: url(/assets/img/planos/fundo-preto-abstrato-full.png); background-position: center center; background-size: cover; background-repeat: no-repeat; height: 400px; } .page-title-area-plan-full h1 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-full h2 { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .page-title-area-plan-full a { animation: fadeInLeft .8s; -webkit-animation-delay: 1s; animation-delay: .3s; } .form-horizontal { text-align: left; } .carousel-control-prev-icon, .carousel-control-next-icon { filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 3.5)); background-color: rgba(25,118,210,255); border-radius: 6px; opacity: 0; transition: opacity 0.3s ease; } .carousel-control-prev:hover .carousel-control-prev-icon, .carousel-control-next:hover .carousel-control-next-icon { opacity: 1; } .pointer-cursor { cursor: pointer; } /* Estilos para o modal */ .modal { display: none; position: fixed; z-index: 1000; /* Alta prioridade */ left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; /* Impede a rolagem no modal */ background-color: rgba(0, 0, 0, 0.9); /* Fundo escuro */ } /* Centralizar a imagem no modal */ .modal-content { margin: auto; display: block; width: 80%; max-width: 1200px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centraliza a imagem */ } .close { position: absolute; top: 10px; right: 25px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; } .close:hover { color: #bbb; text-decoration: none; cursor: pointer; } .modal-backdrop { display: none !important; } .custom-btn-spacing { margin-right: 8px; } .cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; background-color: #007bff; /* cor de fundo azul */ color: white; padding: 15px; text-align: center; z-index: 1000; display: flex; justify-content: space-between; align-items: center; } .cookie-consent p { margin: 0; padding: 0; } .cookie-consent button { margin-left: 15px; } .hidden { opacity: 0; transform: translateY(50px); /* Come�a 50px abaixo */ pointer-events: none; display:none; } .fade-in { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .go-whatsapp { position: fixed; cursor: pointer; top: 0; right: 30px; color: #25D366; background-color: #1976d2; z-index: 4; width: 45px; text-align: center; height: 45px; line-height: 45px; opacity: 0; visibility: hidden; -webkit-transition: .9s; transition: .9s; border-radius: 3px; } .go-whatsapp.active { top: 95%; -webkit-transform: translateY(-98%); transform: translateY(-98%); opacity: 1; visibility: visible; } .go-whatsapp i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; -webkit-transition: 0.4s; transition: 0.4s; } .go-whatsapp i:last-child { opacity: 0; visibility: hidden; top: 60%; } .go-whatsapp::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #25D366; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 3px; } .go-whatsapp:hover, .go-whatsapp:focus { color: #ffffff; } .go-whatsapp:hover::before, .go-whatsapp:focus::before { opacity: 1; visibility: visible; } .go-whatsapp:hover i:first-child, .go-whatsapp:focus i:first-child { opacity: 0; top: 0; visibility: hidden; } .go-whatsapp:hover i:last-child, .go-whatsapp:focus i:last-child { opacity: 1; visibility: visible; top: 50%; } .page-title-area-mobile { position: relative; z-index: 1; background-color: black; background-position: center center; background-size: cover; background-repeat: no-repeat; height: 300px; } .page-title-area-mobile::before { content: ""; position: absolute; z-index: -1; height: 100%; width: 100%; left: 0; top: 0; opacity: 0.5; background-color: #030821; } .youtube-icon i { font-size: 3em; color: red; transition: color 0.3s ease; } .youtube-icon i:hover { color: darkred; } .modal.fade.show.custom-alert-modal { background-color: transparent; /* Torna o fundo do modal transparente */ } /* Ajusta o estilo do modal para parecer um alerta */ .custom-alert-content { width: 300px; /* Define uma largura menor */ padding: 15px; /* Adiciona espa�amento interno */ border-radius: 8px; /* Borda arredondada */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */ text-align: center; /* Centraliza o texto */ } .fade-out { opacity: 0; transition: opacity 1s ease-out; } .bg-whatsapp { background-color: #25D366; border-radius: 50%; display: flex; align-items: center; /* Centraliza verticalmente */ justify-content: center; /* Centraliza horizontalmente */ margin-right: auto; /* Margem � direita */ margin-left:auto; width: 55px; /* Tamanho do bot�o */ height: 55px; /* Tamanho do bot�o */ cursor: pointer; /* Mudar o cursor para indicar que � clic�vel */ } /* assets/css/responsive.css */ /***************************************************************** Template Name : Webtech - Web Development Services HTML5 Template Author : Cute Themes Version : 1.0 Created : 2022 File Description : Main Responsive file of the template *****************************************************************/ @media only screen and (max-width: 767px) { .section-title h2 { font-size: 30px; } .section-title h3 { font-size: 26px; margin: 5px 0 0 0; } .default-btn-one { margin-right: 10px; } .other-option { display: none; } .navbar-area { -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11); } .navbar-area.is-sticky .webtech-responsive-nav .mean-container a.meanmenu-reveal { padding-top: 6px; color: #000000; } .navbar-area.is-sticky .webtech-responsive-nav .mean-container a.meanmenu-reveal span { background: #000000; } .mean-container .mean-nav { margin-top: 43px; } .webtech-responsive-nav .mean-container a.meanmenu-reveal { padding-top: 0; color: #fff; } .webtech-responsive-nav .mean-container a.meanmenu-reveal span { background: #fff; } .home-area { height: 100%; padding-top: 150px; padding-bottom: 100px; background-position: center; } .slider .control-text { display: none; } .slider .parallax-slider .caption h1 { font-size: 35px; } .main-banner-content { text-align: center; padding-top: 50px; } .main-banner-content h1 { font-size: 35px; margin: 0 0 18px 0; } .main-banner-content .banner-btn { margin-top: 30px; justify-content: center; } .about-content { margin-top: 40px; } .about-content-text h2 { font-size: 28px; } .about-image { text-align: center; margin-top: 35px; } .about-image .years-design { width: 50%; height: auto; } .tab-image { text-align: center; margin-top: 35px; } .process-list-tab .tabs li { -ms-flex: unset; -webkit-box-flex: unset; flex: unset; max-width: unset; padding-top: 15px; margin-right: 15px; } .process-list-tab .tabs li a { padding-left: 40px; padding-right: 40px; } .testimonial-slider .testimonial-single-item .testimonial-content .icon { margin-top: 15px; margin-bottom: 15px; } .testimonial-slider.owl-theme .owl-nav [class*=owl-] { left: 0; } .testimonial-slider.owl-theme .owl-nav [class*=owl-].owl-next { right: 0; } .blog-image img { width: 100%; } .partner-title { margin-bottom: 30px; } .partner-title span { font-size: 15px; } .partner-title h3 { font-size: 26px; margin: 5px 0 0 0; } .partner-list .partner-item { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; } .partner-list .partner-item:nth-child(6) { margin-left: 0; } .subscribe-content { margin-bottom: 25px; } .subscribe-content h2 { margin-bottom: 12px; } .subscribe-content .sub-title { font-size: 14px; font-weight: 500; } .newsletter-form button { position: relative; margin-top: 25px; } .single-services-box { padding: 30px 25px; } .single-services-box h3 { font-size: 18px; top: 45px; left: 100px; } .overview-content span { font-size: 15px; } .overview-content h2 { font-size: 26px; margin: 5px 0 8px 0; } .overview-content .features-list-1 li, .overview-content .features-list li { -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; } .overview-image { margin-bottom: 30px; text-align: center; } .overview-image-2 { text-align: center; margin-top: 35px; } .single-counter { padding: 15px 0; } .single-testimonial { padding: 30px 10px; } .hire-content h2 { font-size: 35px; } .hire-content p { font-size: 15px; } .hire-content .hire-btn .hire-btn-one { margin-left: 0; } .partner-list .partner-item a { padding: 0px 15px; } .single-project .image-hover { left: 20px; } .contact-image { margin-bottom: 35px; } .page-title-area { height: 300px; } .page-title-content h2 { font-size: 35px; } .page-title-content ul { margin-top: 6px; } .services-details-overview { margin-bottom: 0; } .services-details-image { margin-top: 20px; margin-bottom: 20px; } .services-step-title h2 { font-size: 28px; color: #0b0b31; font-weight: 900; } .projects-details-desc .project-details-info { margin-top: 16px; } .projects-details-desc .project-details-info .single-info-box { -ms-flex: unset; -webkit-box-flex: unset; flex: unset; max-width: unset; padding-bottom: 10px; margin-bottom: 20px; } .single-pricing-box .pricing-header h3 { margin-bottom: 4px; font-size: 22px; } .single-pricing-box .price { font-size: 40px; margin-bottom: 5px; margin-top: 8px; } .woocommerce-result-count { margin-bottom: 20px; } .pagination-area { margin-top: 0; } .pagination-area .page-numbers { width: 40px; height: 40px; margin: 0px 1px; line-height: 40px; font-size: 15px; } .text-right { text-align: center !important; margin-top: 10px; } .faq-accordion .accordion .accordion-item .accordion-title { font-size: 18px; padding-right: 50px; } .coming-soon-area { height: 100%; padding-top: 160px; padding-bottom: 150px; } .coming-soon-content h1 { margin-bottom: 10px; font-size: 30px; } .coming-soon-content #timer div { margin-bottom: 30px; } .widget-area .widget_webtech_posts_thumb .item .info .title { font-size: 16px; } .widget-area .widget_search { -webkit-box-shadow: unset; box-shadow: unset; padding: 0; } .widget-area .widget_search form.search-top { margin-top: 40px; } .widget-area .widget_search form.search-bottom { margin-top: 0; } .tagcloud.section-top { margin-bottom: 30px; } .tagcloud.section-bottom { margin-bottom: 0; } .blog-details-desc .article-content h3 { font-size: 20px; } .comments-area .comment-respond .comment-form-author { float: left; width: 100%; padding-right: 0px; } .comments-area .comment-respond .comment-form-email { float: left; width: 100%; padding-left: 0px; } blockquote, .blockquote { padding: 18px !important; } blockquote p, .blockquote p { font-size: 16px !important; } .single-footer-widget { margin-bottom: 35px; } .single-footer-widget .footer-heading { margin-bottom: 20px; } .single-footer-widget .footer-heading h2 { font-size: 22px; } .single-footer-widget .footer-social { margin-bottom: 20px; } .footer-quick-links li:last-child { padding-bottom: 25px; } .copyright-area { text-align: center; } .copyright-area ul { text-align: center; } .slider .parallax-slider .caption { text-align: left; padding-top: 0px; } .project-area .project-list .nav li { margin: 10px 5px; } .faq-accordion.first-faq-box { margin-bottom: 30px; } .blog-details-desc .article-content .wp-block-gallery.columns-2 li { -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; padding-right: 10px; padding-left: 10px; margin-bottom: 20px; } .blog-details-desc .article-content .wp-block-gallery.columns-2 li:last-child { margin-bottom: 0px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .webtech-responsive-nav .webtech-responsive-menu.mean-container .navbar-nav { overflow-y: scroll; height: 250px; } .footer-quick-links li:last-child { padding-bottom: 0; } .about-image .years-design { width: 40%; height: auto; } .project-image img { width: 100%; } .text-right { margin-top: 0; } .home-area { height: 100%; padding-top: 150px; padding-bottom: 100px; background-position: center; } } @media only screen and (min-width: 0px) and (max-width: 380px) { .main-banner-content .banner-btn { margin-top: 25px; display: block; justify-content: left; align-items: center; text-align: left; } .default-btn-one { margin-top: 15px; } .video-box { justify-content: left; } } @media only screen and (min-width: 0px) and (max-width: 479px) { .slider .parallax-slider .caption { text-align: left; padding-top: 70px; } .about-image .years-design { width: 55%; height: auto; } .process-list-tab .tabs li { width: 100%; margin-right: 0; } .hire-content h2 { font-size: 30px; } .partner-list .partner-item a { padding: 0px 0px; } .blog-details-desc .article-footer .article-tags { -ms-flex: 0 0 100%; -webkit-box-flex: 0; flex: 0 0 100%; max-width: 100%; margin-bottom: 15px; } .blog-details-desc .article-footer .article-share { flex: unset; max-width: unset; margin-top: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-title span { font-size: 15px; } .section-title h3 { font-size: 26px; margin: 5px 0 0 0; } .section-title h2 { font-size: 38px; } .other-option { display: none; } .navbar-area { -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11); box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11); } .navbar-area.is-sticky .webtech-responsive-nav .mean-container a.meanmenu-reveal { padding-top: 6px; color: #000000; } .navbar-area.is-sticky .webtech-responsive-nav .mean-container a.meanmenu-reveal span { background: #000000; } .mean-container .mean-nav { margin-top: 43px; } .webtech-responsive-nav .mean-container a.meanmenu-reveal { padding-top: 6px; color: #fff; } .webtech-responsive-nav .mean-container a.meanmenu-reveal span { background: #fff; } .home-area { padding-top: 170px; padding-bottom: 100px; background-position: center; height: 100%; } .slider .parallax-slider .caption h1 { font-size: 40px; } .slider .control-text { display: none; } .main-banner-content { margin: auto; text-align: center; padding-top: 30px; } .main-banner-content h1 { font-size: 45px; margin: 0 0 15px 0; } .main-banner-content .banner-btn { margin-top: 30px; justify-content: center; } .about-content-text h2 { font-size: 33px; } .about-image { text-align: center; margin-top: 35px; } .about-image img { width: 100%; } .about-image .years-design { width: 28%; height: auto; } .about-content .about-btn { margin-top: 20px; } .project-area .project-list .nav li { margin: 10px 5px; } .process-list-tab .tabs { justify-content: left; } .process-list-tab .tabs li { margin-right: 15px; margin-left: 0; } .process-list-tab .tabs li a { padding-left: 10px; padding-right: 10px; padding-top: 18px; padding-bottom: 18px; } .process-list-tab .tab_content .tabs_item .tab-solution-content h3 { font-size: 30px; margin: 0 0 15px 0; } .tab-image { text-align: center; margin-top: 35px; } .testimonial-slider .testimonial-single-item .testimonial-content .icon { margin-top: 15px; margin-bottom: 15px; } .testimonial-slider.owl-theme .owl-nav [class*=owl-] { left: 0; } .testimonial-slider.owl-theme .owl-nav [class*=owl-].owl-next { right: 0; } .blog-image img { width: 100%; } .blog-item .single-blog-item { padding: 20px 16px; } .blog-item .single-blog-item .blog-content h3 { font-size: 18px; } .blog-item .single-blog-item .blog-list li { font-size: 14px; } .blog-item .single-blog-item .blog-list i::before { font-size: 14px; } .hire-inside-wrapper { padding: 70px 75px; } .partner-title { margin-bottom: 30px; } .partner-list .partner-item { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 33%; max-width: 33%; } .partner-list .partner-item:nth-child(6) { margin-left: 0; } .subscribe-content { margin-bottom: 25px; } .subscribe-content h2 { margin-bottom: 12px; } .subscribe-content .sub-title { font-size: 14px; font-weight: 500; } .newsletter-form button { padding: 0 18px; font-size: 14px; } .single-services-box { padding: 30px 25px; } .single-services-box h3 { font-size: 18px; top: 47px; left: 100px; } .about-content { margin-top: 40px; } .overview-content span { font-size: 15px; } .overview-content h2 { font-size: 33px; margin: 5px 0 8px 0; } .overview-content .features-list li { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; margin-top: 15px; padding-left: 10px; padding-right: 10px; } .overview-image { margin-bottom: 35px; text-align: center; } .overview-image-2 { text-align: center; margin-top: 35px; } .single-counter { padding: 15px 0; } .hire-content h2 { font-size: 33px; } .hire-content p { font-size: 15px; } .partner-list .partner-item a { padding: 0px 30px; } .contact-image { margin-bottom: 35px; text-align: center; } .page-title-area { height: 300px; } .page-title-content h2 { font-size: 35px; } .page-title-content ul { margin-top: 6px; } .services-details-overview { margin-bottom: 0; } .services-details-image { margin-top: 20px; margin-bottom: 20px; } .projects-details-desc .project-details-info { margin-top: 20px; } .projects-details-desc .project-details-info .single-info-box { -ms-flex: 0 0 50%; -webkit-box-flex: 0; flex: 0 0 50%; max-width: 50%; padding-bottom: 10px; margin-bottom: 10px; } .widget-area .widget_webtech_posts_thumb .item .info .title { font-size: 16px; } .widget-area .widget_search { -webkit-box-shadow: unset; box-shadow: unset; padding: 0; } .widget-area .widget_search form.search-top { margin-top: 40px; } .widget-area .widget_search form.search-bottom { margin-top: 0; } .tagcloud.section-top { margin-bottom: 30px; } .tagcloud.section-bottom { margin-bottom: 0; } .single-footer-widget { padding: 15px 0; } .single-footer-widget .footer-heading { margin-bottom: 12px; } .single-footer-widget .footer-heading h2 { font-size: 22px; } .single-footer-widget .footer-social { margin-bottom: 20px; } .footer-quick-links li:last-child { padding-bottom: 25px; } .copyright-area { text-align: left; } .copyright-area ul { text-align: right; } .faq-accordion.first-faq-box { margin-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .navbar-light .navbar-brand { margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; position: relative; top: -5px; left: -10px; } .navbar-area.is-sticky .navbar-light .navbar-brand { margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; position: relative; top: 0; left: 0; } .webtech-nav .navbar .navbar-nav .nav-item a { font-size: 15px; } .home-area { height: 800px; } .about-content-text h2 { font-size: 33px; } .testimonial-slider.owl-theme .owl-nav [class*=owl-] { left: 0; } .testimonial-slider.owl-theme .owl-nav [class*=owl-].owl-next { right: 0; } .blog-item .single-blog-item { padding: 20px 16px; } .single-services-box { padding: 30px 25px; } .single-services-box h3 { font-size: 18px; top: 47px; left: 100px; } .overview-content .features-list-1 li span, .overview-content .features-list li span { padding: 15px; font-size: 15px; } .single-project .image-hover { left: 18px; } .single-footer-widget .footer-heading h3 { font-size: 19px; } } /* assets/css/site.css */ body { margin: 0; } .panel-collapse { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; } .panel-collapse.show { max-height: 1000px; } .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; } .spinner-border { width: 3rem; height: 3rem; } .table thead th { vertical-align: middle; /* Centraliza o conteúdo verticalmente dentro da célula */ font-size: 16px; /* Tamanho de fonte padrão */ } .table tbody td { vertical-align: middle; /* Centraliza o conteúdo verticalmente dentro da célula */ font-size: 16px; /* Tamanho de fonte padrão */ } .modal-dialog { margin: 2% auto; } /* Para telas menores (por exemplo, celulares) */ @media (max-width: 768px) { .table tbody td { font-size: 12px; /* Tamanho de fonte menor para telas pequenas */ } .table thead th { vertical-align: middle; /* Centraliza o conteúdo verticalmente dentro da célula */ font-size: 12px; /* Tamanho de fonte padrão */ } .modal-dialog { width: 90%; /* Mantém o modal com 90% da largura da tela */ margin: 2% auto; /* Adiciona margens de 5% nas laterais e 50px no topo */ } } /* Para telas muito pequenas (por exemplo, celulares antigos) */ @media (max-width: 480px) { .table tbody td { font-size: 10px; /* Tamanho de fonte ainda menor */ } .table thead th { vertical-align: middle; /* Centraliza o conteúdo verticalmente dentro da célula */ font-size: 10px; /* Tamanho de fonte padrão */ } .modal-dialog { width: 95%; /* Modal ocupa 95% da largura */ margin: 2% 2.5%; /* Margem de 2.5% nas laterais */ } } /* Customiza a cor das mensagens de validação para vermelho */ .validation-message { color: red; font-size: 0.9em; /* Opcional: ajuste o tamanho da fonte se necessário */ } .validation-summary { color: red; font-size: 1em; } /* Abas e acordeões estáticos (sp-static-ui.js): o atributo hidden sempre esconde */ [data-sp-tab-panel][hidden], [data-sp-acc-panel][hidden], [data-sp-lightbox][hidden] { display: none !important; } /* Campo-armadilha dos formulários (robôs preenchem, pessoas não veem) */ .form-armadilha { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } /* assets/css/native-home.css */ /* ========== Página inicial: hero, tabs e depoimentos em HTML5/CSS puro (sem jQuery) ========== */ /* ---- Hero slider nativo ---- */ .hero-native { position: relative; height: 700px; overflow: hidden; overflow-anchor: none; /* evita que a troca de slide dispare scroll da página */ } .hero-track { display: flex; width: 100%; height: 100%; transition: transform 0.6s ease-out; } .hero-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; background-size: cover; background-position: center; } .hero-slide .container { height: 100%; display: flex; align-items: center; justify-content: center; } .hero-slide .caption { text-align: center; padding-top: 0; position: relative; z-index: 2; width: 100%; } .hero-slide .row { justify-content: center; width: 100%; } .hero-slide .white-background { background: rgba(255,255,255,0.92); padding: 40px 48px 36px; border-radius: 16px; margin-bottom: 24px; max-width: 720px; margin-left: auto; margin-right: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.12); } .hero-slide .title-text { font-size: 56px; font-weight: 700; margin-bottom: 12px; line-height: 1.2; color: #1976d2; } .hero-slide .caption p { font-size: 20px; font-weight: 500; margin-top: 8px; margin-bottom: 0; line-height: 1.5; color: #333; } .hero-slide .white-background ul { list-style: none; padding: 0; margin: 20px 0 0 0; text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; } .hero-slide .white-background ul li { margin: 10px 0; font-size: 18px; line-height: 1.4; } .hero-slide .banner-btn { margin-top: 8px; } .hero-dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 10; } .hero-dots button { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255,255,255,0.4); cursor: pointer; padding: 0; transition: background 0.2s; } .hero-dots button:hover { background: rgba(255,255,255,0.7); } .hero-dots button.is-active { background: #fff; } @media (max-width: 992px) { .hero-slide .title-text { font-size: 42px; } .hero-slide .white-background { padding: 32px 28px; max-width: 100%; } .hero-slide .caption p { font-size: 18px; } .hero-slide .white-background ul li { font-size: 16px; } } @media (max-width: 768px) { .hero-native { height: 520px; } .hero-slide .title-text { font-size: 28px; } .hero-slide .white-background { padding: 24px 20px; } .hero-slide .caption p { font-size: 16px; } .hero-slide .white-background ul li { font-size: 15px; } } /* ---- Tabs "Nossos Processos" (radio + CSS, zero JS) ---- */ .process-tabs-native { margin-top: 1rem; } .process-tabs-native .tab-radios { display: none; } .process-tabs-native .tab-labels { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0 0 24px 0; } .process-tabs-native .tab-labels li { margin: 0; } .process-tabs-native .tab-labels label { display: block; padding: 12px 20px; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 500; color: #333; border: 2px solid #e0e0e0; transition: border-color 0.2s, background 0.2s; } .process-tabs-native .tab-labels label:hover { border-color: #3e57d0; background: #f8f9ff; } .process-tabs-native #process-tab-1:checked ~ .tab-labels label[for="process-tab-1"], .process-tabs-native #process-tab-2:checked ~ .tab-labels label[for="process-tab-2"], .process-tabs-native #process-tab-3:checked ~ .tab-labels label[for="process-tab-3"], .process-tabs-native #process-tab-4:checked ~ .tab-labels label[for="process-tab-4"] { border-color: #3e57d0; background: #e8ebfa; color: #3e57d0; } .process-tabs-native .tab-panels .tab-panel { display: none; } .process-tabs-native #process-tab-1:checked ~ .tab-panels .tab-panel-1, .process-tabs-native #process-tab-2:checked ~ .tab-panels .tab-panel-2, .process-tabs-native #process-tab-3:checked ~ .tab-panels .tab-panel-3, .process-tabs-native #process-tab-4:checked ~ .tab-panels .tab-panel-4 { display: block; animation: tabFadeIn 0.3s ease; } @keyframes tabFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---- Depoimentos: scroll nativo ---- */ .testimonial-native-wrap { overflow: hidden; padding: 0 0 20px 0; } .testimonial-native-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px 0 20px 0; scrollbar-width: thin; } .testimonial-native-track::-webkit-scrollbar { height: 8px; } .testimonial-native-track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } .testimonial-native-item { flex: 0 0 320px; scroll-snap-align: start; padding: 24px; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .testimonial-native-item .rating-box ul { list-style: none; padding: 0; margin: 0 0 12px 0; display: flex; gap: 4px; color: #f0c14b; } .testimonial-native-item .testimonial-content p { margin: 0 0 12px 0; line-height: 1.6; } .testimonial-native-item .bio-info h3 { margin: 0; font-size: 14px; font-weight: 700; color: #333; } .testimonial-native-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; } .testimonial-native-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: #ddd; cursor: pointer; padding: 0; transition: background 0.2s; } .testimonial-native-dots button.is-active { background: #3e57d0; } @media (min-width: 768px) { .testimonial-native-item { flex: 0 0 380px; } } @media (min-width: 1200px) { .testimonial-native-item { flex: 0 0 calc(33.333% - 16px); } } /* assets/css/systemport-v2.css */ /* ========================================================================== SystemPort v2 — Design System "Blueprint / Command Center" Tipografia e cores originais (Cabin, #1976d2, #3e57d0, #0b0b31) Estética ousada: navy dominante, grade técnica, números gigantes, bento grid, marquee, glow elétrico (base: Claude Cookbook aesthetics) ========================================================================== */ :root { --sp-font: 'Cabin', sans-serif; --sp-navy: #0b0b31; --sp-navy-deep: #070722; --sp-primary: #1976d2; --sp-primary-dark: #0d47a1; --sp-accent: #3e57d0; --sp-electric: #4da3ff; --sp-text: #0b0b31; --sp-text-muted: #5f5f5f; --sp-surface: #ffffff; --sp-surface-alt: #f7f9fc; --sp-border: rgba(11, 11, 49, 0.1); --sp-border-glow: rgba(77, 163, 255, 0.25); --sp-notch: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); --sp-notch-sm: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); --sp-nav-height: 72px; --sp-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --sp-stagger: 0.07s; /* Grade técnica (blueprint) */ --sp-grid-dark: linear-gradient(rgba(77, 163, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 163, 255, 0.05) 1px, transparent 1px); --sp-grid-light: linear-gradient(rgba(25, 118, 210, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 118, 210, 0.05) 1px, transparent 1px); } /* ---- Base (Cabin preservada) ---- */ html { scroll-behavior: smooth; } body { font-family: var(--sp-font) !important; color: var(--sp-text); background: var(--sp-surface); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: var(--sp-font) !important; font-weight: 700 !important; color: var(--sp-text); } p { font-family: var(--sp-font) !important; color: var(--sp-text-muted); line-height: 1.8; letter-spacing: 0.3px; } a { color: var(--sp-primary); transition: color var(--sp-transition); } a:hover { color: var(--sp-accent); } ::selection { background: var(--sp-primary); color: #fff; } /* ---- Utilidades ---- */ .sp-section-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sp-primary); margin-bottom: 18px; } .sp-section-tag::before { content: ''; width: 34px; height: 2px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent)); } .sp-section-header { position: relative; margin-bottom: 56px; max-width: 780px; } .sp-section-header h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; line-height: 1.18 !important; margin: 0 !important; letter-spacing: -0.01em; } /* Número fantasma gigante das seções */ .sp-ghost-num { position: absolute; top: -34px; right: -8px; font-family: var(--sp-font); font-size: clamp(90px, 13vw, 170px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(25, 118, 210, 0.18); pointer-events: none; user-select: none; z-index: 0; } .sp-on-dark .sp-ghost-num { -webkit-text-stroke-color: rgba(77, 163, 255, 0.14); } .sp-on-dark h2 { color: #fff !important; } .sp-on-dark .sp-section-tag { color: var(--sp-electric); } /* ---- Scroll reveal ---- */ .sp-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; } .sp-reveal.is-visible { opacity: 1; transform: translateY(0); } .sp-reveal-delay-1 { transition-delay: calc(var(--sp-stagger) * 1); } .sp-reveal-delay-2 { transition-delay: calc(var(--sp-stagger) * 2); } .sp-reveal-delay-3 { transition-delay: calc(var(--sp-stagger) * 3); } /* ========================================================================== NAVBAR ========================================================================== */ .navbar-area { display: none !important; } .sp-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--sp-nav-height); background: rgba(7, 7, 34, 0.78); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid rgba(77, 163, 255, 0.14); transition: background var(--sp-transition), box-shadow var(--sp-transition), border-color var(--sp-transition); } .sp-navbar.is-scrolled, .sp-navbar.is-inner { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--sp-border); box-shadow: 0 4px 24px rgba(11, 11, 49, 0.08); } .sp-nav-inner { display: flex; align-items: center; justify-content: space-between; height: var(--sp-nav-height); max-width: 1320px; margin: 0 auto; padding: 0 24px; } .sp-nav-logo img { height: 42px; width: auto; } .sp-nav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .sp-nav-item { position: relative; } .sp-nav-link { display: flex; align-items: center; gap: 6px; padding: 10px 14px; font-family: var(--sp-font); font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.88); text-decoration: none; transition: color var(--sp-transition), background var(--sp-transition); cursor: pointer; border: none; background: none; } .sp-navbar.is-scrolled .sp-nav-link, .sp-navbar.is-inner .sp-nav-link { color: var(--sp-text); } .sp-nav-link:hover { color: var(--sp-electric) !important; background: rgba(77, 163, 255, 0.08); } .sp-nav-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 264px; background: var(--sp-navy-deep); border: 1px solid rgba(77, 163, 255, 0.18); clip-path: var(--sp-notch-sm); box-shadow: 0 20px 56px rgba(7, 7, 34, 0.5); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--sp-transition), transform var(--sp-transition), visibility var(--sp-transition); list-style: none; margin: 0; } .sp-nav-item:hover .sp-nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .sp-nav-dropdown .sp-nav-link { color: rgba(255, 255, 255, 0.82) !important; width: 100%; font-weight: 500; } .sp-nav-dropdown .sp-nav-link:hover { color: var(--sp-electric) !important; background: rgba(77, 163, 255, 0.1); } .sp-nav-actions { display: flex; align-items: center; gap: 12px; } .sp-nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .sp-nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; transition: transform var(--sp-transition), opacity var(--sp-transition); } .sp-navbar.is-scrolled .sp-nav-toggle span, .sp-navbar.is-inner .sp-nav-toggle span { background: var(--sp-navy); } .sp-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sp-nav-toggle.is-open span:nth-child(2) { opacity: 0; } .sp-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 992px) { .sp-nav-toggle { display: none; } .sp-nav-menu-wrap { display: flex; align-items: center; gap: 8px; position: static; transform: none; background: transparent; padding: 0; } .sp-nav-item.has-dropdown > .sp-nav-link::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); margin-left: 2px; } } @media (max-width: 991px) { .sp-nav-toggle { display: flex; } .sp-nav-menu-wrap { position: fixed; top: var(--sp-nav-height); left: 0; right: 0; bottom: 0; background: var(--sp-navy-deep); padding: 24px; transform: translateX(100%); transition: transform var(--sp-transition); overflow-y: auto; z-index: 999; flex-direction: column; align-items: stretch; display: flex; } .sp-nav-menu-wrap.is-open { transform: translateX(0); } .sp-nav-menu { flex-direction: column; align-items: stretch; } .sp-nav-link { color: rgba(255,255,255,0.88) !important; padding: 14px 16px; font-size: 15px; } .sp-nav-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; clip-path: none; padding-left: 12px; display: none; background: rgba(77, 163, 255, 0.06); margin-top: 4px; } .sp-nav-item.is-open .sp-nav-dropdown { display: block; } .sp-nav-actions { margin-top: 24px; } .sp-nav-actions .default-btn { width: 100%; text-align: center; } } /* ========================================================================== HERO BLUEPRINT — módulos do sistema ========================================================================== */ .hero-native.hero-blueprint { height: 64vh !important; min-height: 540px; max-height: 660px; position: relative; overflow: hidden; background: var(--sp-navy-deep); } .hero-blueprint .hero-slide { position: relative; background-size: cover; background-position: center right; } .hero-slide-overlay { position: absolute; inset: 0; z-index: 1; background: var(--sp-grid-dark), linear-gradient(100deg, rgba(7, 7, 34, 0.98) 0%, rgba(7, 7, 34, 0.92) 40%, rgba(11, 11, 49, 0.55) 70%, rgba(25, 118, 210, 0.22) 100%); background-size: 56px 56px, 56px 56px, 100% 100%; } /* Glow orbital animado */ .hero-blueprint::after { content: ''; position: absolute; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(25, 118, 210, 0.22) 0%, transparent 65%); top: -260px; right: -180px; z-index: 2; pointer-events: none; animation: spOrb 9s ease-in-out infinite alternate; } @keyframes spOrb { from { transform: translate(0, 0) scale(1); opacity: 0.8; } to { transform: translate(-60px, 50px) scale(1.12); opacity: 1; } } .hero-blueprint .hero-slide .container { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; justify-content: flex-start; padding-top: var(--sp-nav-height); padding-bottom: 56px; } .hero-panel { position: relative; max-width: 660px; animation: heroIn 0.75s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } /* Número gigante vazado atrás do conteúdo */ .hero-watermark { position: absolute; top: -64px; left: -22px; font-family: var(--sp-font); font-size: clamp(100px, 12vw, 150px); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(77, 163, 255, 0.18); pointer-events: none; user-select: none; z-index: -1; } .hero-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sp-electric); padding: 8px 16px; border: 1px solid rgba(77, 163, 255, 0.3); clip-path: var(--sp-notch-sm); background: rgba(25, 118, 210, 0.1); margin-bottom: 16px; } .hero-kicker::before { content: ''; width: 8px; height: 8px; background: var(--sp-electric); box-shadow: 0 0 12px var(--sp-electric); animation: spPulse 2s ease-in-out infinite; } @keyframes spPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .hero-panel .title-text { font-family: var(--sp-font) !important; font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important; font-weight: 700 !important; color: #fff !important; line-height: 1.08 !important; letter-spacing: -0.015em; margin-bottom: 10px !important; } .hero-panel > p { color: rgba(255, 255, 255, 0.72) !important; font-size: 15px !important; font-weight: 500; margin-bottom: 18px !important; max-width: 540px; } .hero-feature-list { list-style: none; padding: 0; margin: 0 0 22px 0; display: grid; gap: 0; border-left: 2px solid rgba(77, 163, 255, 0.3); } .hero-feature-list li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255, 255, 255, 0.88); font-size: 14px; font-family: var(--sp-font); font-weight: 500; line-height: 1.45; padding: 4px 0 4px 16px; position: relative; } .hero-feature-list li::before { content: ''; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 2px; height: 0; background: var(--sp-electric); transition: height 0.3s ease; } .hero-feature-list li:hover::before { height: 70%; } .hero-feature-list li i { color: var(--sp-electric) !important; margin-top: 3px; flex-shrink: 0; } /* Barra de comando do slider */ .hero-command-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 0 32px 18px; max-width: 1320px; margin: 0 auto; } .hero-progress { height: 2px; background: rgba(255, 255, 255, 0.12); margin-bottom: 12px; overflow: hidden; } .hero-progress-fill { height: 100%; width: 25%; background: linear-gradient(90deg, var(--sp-primary), var(--sp-electric)); box-shadow: 0 0 14px rgba(77, 163, 255, 0.7); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .hero-dots { position: static !important; display: flex !important; justify-content: flex-start !important; gap: 10px !important; } .hero-dots button { width: 42px !important; height: 4px !important; border-radius: 0 !important; background: rgba(255, 255, 255, 0.2) !important; border: none !important; padding: 0 !important; cursor: pointer; transition: background var(--sp-transition), width var(--sp-transition), box-shadow var(--sp-transition) !important; } .hero-dots button:hover { background: rgba(255, 255, 255, 0.45) !important; } .hero-dots button.is-active { width: 64px !important; background: var(--sp-electric) !important; box-shadow: 0 0 12px rgba(77, 163, 255, 0.8) !important; } /* ========================================================================== AUTORIDADE — posicionamento no mercado ========================================================================== */ .sp-authority { position: relative; padding: 110px 0 90px; background: var(--sp-grid-light), linear-gradient(180deg, #ffffff 0%, var(--sp-surface-alt) 100%); background-size: 56px 56px, 56px 56px, 100% 100%; overflow: hidden; } .sp-authority-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; position: relative; z-index: 1; } .sp-authority-content h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem) !important; line-height: 1.18 !important; margin-bottom: 22px !important; } .sp-authority-content p { margin-bottom: 34px; } .sp-authority-visual { position: relative; } /* Moldura técnica com cantos marcados */ .sp-authority-frame { position: relative; padding: 14px; } .sp-authority-frame::before, .sp-authority-frame::after { content: ''; position: absolute; width: 46px; height: 46px; z-index: 2; } .sp-authority-frame::before { top: 0; left: 0; border-top: 3px solid var(--sp-primary); border-left: 3px solid var(--sp-primary); } .sp-authority-frame::after { bottom: 0; right: 0; border-bottom: 3px solid var(--sp-accent); border-right: 3px solid var(--sp-accent); } .sp-authority-frame img { display: block; width: 100%; clip-path: var(--sp-notch); box-shadow: 0 32px 80px rgba(11, 11, 49, 0.16); } /* ========================================================================== STATS — números de mercado ========================================================================== */ .sp-stats { position: relative; background: var(--sp-navy-deep); padding: 90px 0; overflow: hidden; } .sp-stats::before { content: ''; position: absolute; inset: 0; background: var(--sp-grid-dark), radial-gradient(ellipse 60% 90% at 50% 110%, rgba(25, 118, 210, 0.18) 0%, transparent 60%); background-size: 56px 56px, 56px 56px, 100% 100%; pointer-events: none; } .sp-stats-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; z-index: 1; } .sp-stat { text-align: center; padding: 28px 20px; position: relative; } .sp-stat:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 72px; background: linear-gradient(180deg, transparent, rgba(77, 163, 255, 0.4), transparent); } .sp-stat-value { display: block; font-family: var(--sp-font); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 700; line-height: 1; color: #fff; margin-bottom: 14px; letter-spacing: -0.02em; } .sp-stat-value .sp-plus { color: var(--sp-electric); text-shadow: 0 0 18px rgba(77, 163, 255, 0.7); } .sp-stat-label { display: inline-block; font-family: var(--sp-font); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding-top: 14px; border-top: 1px solid rgba(77, 163, 255, 0.25); } /* ========================================================================== BENTO — funcionalidades do sistema ========================================================================== */ .sp-capabilities { position: relative; padding: 110px 0; background: var(--sp-surface); } .sp-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .sp-bento-card { position: relative; background: var(--sp-surface); border: 1px solid var(--sp-border); clip-path: var(--sp-notch); padding: 34px 30px; display: flex; flex-direction: column; overflow: hidden; transition: transform var(--sp-transition), border-color var(--sp-transition); } .sp-bento-card.is-wide { grid-column: span 2; } /* Linha de energia no rodapé do card */ .sp-bento-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent), var(--sp-electric)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .sp-bento-card:hover { transform: translateY(-6px); border-color: var(--sp-border-glow); box-shadow: 0 24px 56px rgba(11, 11, 49, 0.12); } .sp-bento-card:hover::after { transform: scaleX(1); } .sp-bento-num { font-family: var(--sp-font); font-size: 56px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(25, 118, 210, 0.3); margin-bottom: 18px; transition: -webkit-text-stroke-color var(--sp-transition); } .sp-bento-card:hover .sp-bento-num { -webkit-text-stroke-color: var(--sp-primary); } .sp-bento-icon { position: absolute; top: 30px; right: 30px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(25, 118, 210, 0.08); border: 1px solid rgba(25, 118, 210, 0.15); transition: background var(--sp-transition), transform var(--sp-transition); } .sp-bento-card:hover .sp-bento-icon { background: rgba(25, 118, 210, 0.14); transform: rotate(-4deg) scale(1.06); } .sp-bento-icon img { width: 32px; height: 32px; border-radius: 0; } .sp-bento-card h3 { font-size: 1.25rem !important; margin-bottom: 12px !important; } .sp-bento-card p { font-size: 14px; margin-bottom: 22px; flex-grow: 1; } .sp-cap-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sp-font); font-size: 14px; font-weight: 700; color: #ff0000 !important; text-decoration: none; transition: gap var(--sp-transition); } .sp-cap-link:hover { gap: 12px; } /* ========================================================================== PROCESSOS — etapas gigantes ========================================================================== */ .sp-process { position: relative; padding: 110px 0; background: var(--sp-grid-dark), linear-gradient(180deg, var(--sp-navy-deep) 0%, var(--sp-navy) 100%); background-size: 56px 56px, 56px 56px, 100% 100%; overflow: hidden; } .sp-process .process-tabs-native { margin-top: 0 !important; } .sp-process .tab-labels { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 0 !important; margin: 0 0 0 0 !important; padding: 0 !important; border-bottom: 1px solid rgba(77, 163, 255, 0.18); } .sp-process .tab-labels li { margin: 0 !important; } .sp-process .tab-labels label { display: flex !important; flex-direction: column; gap: 6px; padding: 26px 22px !important; border: none !important; border-radius: 0 !important; background: transparent !important; color: rgba(255, 255, 255, 0.45) !important; font-family: var(--sp-font) !important; font-weight: 700 !important; font-size: 15px !important; cursor: pointer; position: relative; transition: color var(--sp-transition), background var(--sp-transition) !important; width: 100%; } .sp-process .tab-labels label::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-electric)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .sp-process .tab-labels label:hover { color: rgba(255, 255, 255, 0.85) !important; } .sp-step-num { font-size: 38px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(77, 163, 255, 0.35); transition: color var(--sp-transition), -webkit-text-stroke-color var(--sp-transition); } .sp-process .process-tabs-native #process-tab-1:checked ~ .tab-labels label[for="process-tab-1"], .sp-process .process-tabs-native #process-tab-2:checked ~ .tab-labels label[for="process-tab-2"], .sp-process .process-tabs-native #process-tab-3:checked ~ .tab-labels label[for="process-tab-3"], .sp-process .process-tabs-native #process-tab-4:checked ~ .tab-labels label[for="process-tab-4"] { color: #fff !important; background: rgba(25, 118, 210, 0.08) !important; } .sp-process .process-tabs-native #process-tab-1:checked ~ .tab-labels label[for="process-tab-1"]::after, .sp-process .process-tabs-native #process-tab-2:checked ~ .tab-labels label[for="process-tab-2"]::after, .sp-process .process-tabs-native #process-tab-3:checked ~ .tab-labels label[for="process-tab-3"]::after, .sp-process .process-tabs-native #process-tab-4:checked ~ .tab-labels label[for="process-tab-4"]::after { transform: scaleX(1); } .sp-process .process-tabs-native #process-tab-1:checked ~ .tab-labels label[for="process-tab-1"] .sp-step-num, .sp-process .process-tabs-native #process-tab-2:checked ~ .tab-labels label[for="process-tab-2"] .sp-step-num, .sp-process .process-tabs-native #process-tab-3:checked ~ .tab-labels label[for="process-tab-3"] .sp-step-num, .sp-process .process-tabs-native #process-tab-4:checked ~ .tab-labels label[for="process-tab-4"] .sp-step-num { color: var(--sp-electric); -webkit-text-stroke-color: transparent; } .sp-process .tab-panels { padding-top: 52px; } .sp-process-content { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .sp-process-content h3 { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; color: #fff !important; margin-bottom: 18px !important; } .sp-process-content p { color: rgba(255, 255, 255, 0.68) !important; } .sp-check-list { list-style: none; padding: 0; margin: 22px 0 0; border-left: 2px solid rgba(77, 163, 255, 0.3); } .sp-check-list li { font-family: var(--sp-font); font-weight: 500; color: rgba(255, 255, 255, 0.85); padding: 7px 0 7px 18px; font-size: 15px; } .sp-check-list li i { color: var(--sp-electric) !important; margin-right: 8px; } .sp-process-image { position: relative; padding: 12px; } .sp-process-image::before { content: ''; position: absolute; top: 0; right: 0; width: 42px; height: 42px; border-top: 3px solid var(--sp-electric); border-right: 3px solid var(--sp-electric); z-index: 2; } .sp-process-image img { width: 100%; clip-path: var(--sp-notch); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); } /* ========================================================================== DEPOIMENTOS — marquee duplo ========================================================================== */ .sp-testimonials { position: relative; padding: 110px 0; background: var(--sp-surface-alt); overflow: hidden; } .sp-testimonials .container { position: relative; z-index: 1; } .sp-marquee { overflow: hidden; margin: 0 -24px; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .sp-marquee + .sp-marquee { margin-top: 22px; } .sp-marquee-track { display: flex; gap: 22px; width: max-content; animation: spMarquee 48s linear infinite; } .sp-marquee.is-reverse .sp-marquee-track { animation-direction: reverse; } .sp-marquee:hover .sp-marquee-track { animation-play-state: paused; } @keyframes spMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .sp-quote-card { width: 440px; flex-shrink: 0; background: var(--sp-surface); border: 1px solid var(--sp-border); border-top: 3px solid var(--sp-primary); clip-path: var(--sp-notch-sm); padding: 30px 28px 26px; position: relative; transition: border-color var(--sp-transition), box-shadow var(--sp-transition); } .sp-quote-card:hover { border-color: var(--sp-border-glow); box-shadow: 0 16px 44px rgba(11, 11, 49, 0.1); } .sp-quote-mark { position: absolute; top: 14px; right: 24px; font-family: Georgia, serif; font-size: 72px; line-height: 1; color: rgba(25, 118, 210, 0.14); pointer-events: none; } .sp-quote-card .rating-box ul { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0 0 14px; color: #f0c14b; font-size: 13px; } .sp-quote-card .testimonial-content p { font-size: 14.5px; line-height: 1.7; margin: 0 0 16px; } .sp-quote-card .bio-info h3 { font-size: 12px !important; letter-spacing: 0.12em; color: var(--sp-primary) !important; margin: 0 !important; display: inline-flex; align-items: center; gap: 10px; } .sp-quote-card .bio-info h3::before { content: ''; width: 22px; height: 2px; background: var(--sp-primary); } /* ========================================================================== FOOTER ========================================================================== */ .footer-subscribe-wrapper, .copyright-area { display: none !important; } .sp-footer { position: relative; background: var(--sp-grid-dark), linear-gradient(180deg, var(--sp-navy) 0%, var(--sp-navy-deep) 100%); background-size: 56px 56px, 56px 56px, 100% 100%; color: rgba(255, 255, 255, 0.75); } .sp-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent), var(--sp-electric)); } .sp-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; padding: 80px 24px; max-width: 1320px; margin: 0 auto; position: relative; } .sp-footer h3 { font-family: var(--sp-font) !important; font-size: 0.95rem !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 22px !important; text-transform: uppercase; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 10px; } .sp-footer .sp-footer-col > h3::before { content: ''; width: 18px; height: 2px; background: var(--sp-electric); } .sp-footer p { color: rgba(255, 255, 255, 0.55); font-size: 14px; } .sp-footer-links { list-style: none; padding: 0; margin: 0; } .sp-footer-links li { margin-bottom: 10px; } .sp-footer-links a { color: rgba(255, 255, 255, 0.62); font-size: 14px; font-weight: 500; text-decoration: none; transition: color var(--sp-transition), padding-left var(--sp-transition); } .sp-footer-links a:hover { color: var(--sp-electric); padding-left: 6px; } .sp-footer-social { display: flex; gap: 10px; margin-top: 24px; list-style: none; padding: 0; } .sp-footer-social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: rgba(77, 163, 255, 0.06); border: 1px solid rgba(77, 163, 255, 0.18); clip-path: var(--sp-notch-sm); color: rgba(255, 255, 255, 0.7); transition: background var(--sp-transition), color var(--sp-transition); } .sp-footer-social a:hover { background: var(--sp-primary); color: #fff; } .sp-footer-contact-item { display: flex; gap: 14px; margin-bottom: 20px; } .sp-footer-contact-item i { color: var(--sp-electric); font-size: 18px; margin-top: 2px; } .sp-footer-contact-item h3 { font-size: 11px !important; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 4px !important; } .sp-footer-contact-item h3::before { display: none; } .sp-footer-contact-item span, .sp-footer-contact-item a { color: rgba(255, 255, 255, 0.75); font-size: 14px; } .sp-copyright { border-top: 1px solid rgba(77, 163, 255, 0.12); padding: 20px 24px; text-align: center; position: relative; } .sp-copyright p { color: rgba(255, 255, 255, 0.38); font-size: 13px; margin: 0; } /* ========================================================================== BOTÕES (cores e animação originais) ========================================================================== */ .default-btn { border-radius: 0 !important; clip-path: var(--sp-notch-sm); font-family: var(--sp-font) !important; font-weight: 700 !important; letter-spacing: 0.02em; background-color: var(--sp-primary) !important; box-shadow: 0 7px 25px rgba(25, 118, 210, 0.35) !important; } .default-btn span { display: block !important; background-color: var(--sp-accent) !important; border-radius: 0 !important; } .default-btn-one { border-radius: 0 !important; clip-path: var(--sp-notch-sm); font-family: var(--sp-font) !important; font-weight: 700 !important; color: var(--sp-primary) !important; background-color: #fff !important; border: 1px solid rgba(25, 118, 210, 0.3) !important; box-shadow: 0 7px 25px rgba(123, 104, 238, 0.18) !important; margin-left: 10px; } .default-btn-one span { display: block !important; border-radius: 0 !important; } /* ========================================================================== PÁGINAS INTERNAS ========================================================================== */ .page-title-area { background: var(--sp-grid-dark), linear-gradient(120deg, var(--sp-navy-deep) 0%, var(--sp-navy) 70%, rgba(25, 118, 210, 0.5) 130%) !important; background-size: 56px 56px, 56px 56px, 100% 100% !important; padding-top: calc(var(--sp-nav-height) + 52px) !important; padding-bottom: 52px !important; position: relative; } .page-title-area::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent), var(--sp-electric)); } .page-title-content h2 { font-family: var(--sp-font) !important; font-size: clamp(1.85rem, 3.2vw, 2.6rem) !important; color: #fff !important; } .page-title-content ul li, .page-title-content ul li a { color: rgba(255, 255, 255, 0.6); } .page-title-content ul li a:hover { color: var(--sp-electric); } .div-gray { background: var(--sp-surface-alt) !important; padding: 80px 0 !important; } .section-padding { padding: 100px 0 !important; } /* ---- Forms ---- */ .form-control, .form-select { font-family: var(--sp-font) !important; border-radius: 0 !important; border: 1px solid var(--sp-border) !important; } .form-control:focus, .form-select:focus { border-color: var(--sp-primary) !important; box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.14) !important; } .promo-section { border: 1px solid var(--sp-border); border-left: 4px solid var(--sp-primary); clip-path: var(--sp-notch-sm); background: var(--sp-surface-alt); } /* ---- WhatsApp ---- */ .go-top-whatsapp { position: fixed !important; /* acima do botão azul do chat (widget fixo em bottom 20px, 60px de altura), centralizado com ele */ bottom: 94px !important; right: 22px !important; width: 56px !important; height: 56px !important; background: #25d366 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35) !important; z-index: 999 !important; transition: transform 0.25s ease !important; } .go-top-whatsapp:hover { transform: scale(1.08); } .go-top-icon { width: 28px; height: 28px; color: #fff; } /* ---- Modal ---- */ .modal { background: rgba(7, 7, 34, 0.88) !important; } .modal-content { border-radius: 0 !important; clip-path: var(--sp-notch-sm); border: none !important; } /* ========================================================================== RESPONSIVO ========================================================================== */ @media (max-width: 991px) { .sp-authority-grid { grid-template-columns: 1fr; gap: 48px; } .sp-stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .sp-stat:nth-child(2)::after { display: none; } .sp-bento { grid-template-columns: 1fr 1fr; } .sp-bento-card.is-wide { grid-column: span 2; } .sp-process .tab-labels { grid-template-columns: repeat(2, 1fr); } .sp-process-content { grid-template-columns: 1fr; gap: 36px; } .sp-quote-card { width: 340px; } .hero-native.hero-blueprint { height: auto !important; min-height: 520px; max-height: none; } .hero-blueprint .hero-slide .container { padding-top: calc(var(--sp-nav-height) + 24px); padding-bottom: 70px; } .hero-watermark { top: -52px; font-size: 96px; } .sp-ghost-num { font-size: 90px; top: -22px; } } @media (max-width: 640px) { .sp-bento { grid-template-columns: 1fr; } .sp-bento-card.is-wide { grid-column: span 1; } .sp-stats-grid { grid-template-columns: 1fr; } .sp-stat::after { display: none !important; } .sp-process .tab-labels { grid-template-columns: 1fr 1fr; } .sp-process .tab-labels label { padding: 18px 14px !important; font-size: 13px !important; } .sp-step-num { font-size: 28px; } .sp-footer-grid { grid-template-columns: 1fr; gap: 36px; padding: 60px 24px; } .sp-quote-card { width: 300px; } } @media (max-width: 991px) and (min-width: 641px) { .sp-footer-grid { grid-template-columns: 1fr 1fr; padding: 60px 24px; } } @media (prefers-reduced-motion: reduce) { .sp-reveal, .hero-panel { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .sp-marquee-track { animation: none !important; } .hero-blueprint::after { animation: none !important; } } /* ========================================================================== PÁGINAS INTERNAS — Blueprint (Planos, Express, Full, FAQ, Utilitários...) ========================================================================== */ /* ---- Banners dos produtos (Express NF-e, Venda, OS, Premium, Full) ---- */ .page-title-area-plan-nfe, .page-title-area-plan-venda, .page-title-area-plan-os, .page-title-area-plan-premium, .page-title-area-plan-full { height: 440px !important; padding-top: var(--sp-nav-height); } .page-title-area-plan-nfe::before, .page-title-area-plan-venda::before, .page-title-area-plan-os::before, .page-title-area-plan-premium::before, .page-title-area-plan-full::before { content: ''; position: absolute; inset: 0; background: var(--sp-grid-dark), linear-gradient(100deg, rgba(7, 7, 34, 0.94) 0%, rgba(11, 11, 49, 0.78) 45%, rgba(25, 118, 210, 0.28) 110%); background-size: 56px 56px, 56px 56px, 100% 100%; } .page-title-area-plan-nfe .d-table, .page-title-area-plan-venda .d-table, .page-title-area-plan-os .d-table, .page-title-area-plan-premium .d-table, .page-title-area-plan-full .d-table { position: relative; z-index: 1; } .page-title-area-plan-nfe .tab-solution-content h1, .page-title-area-plan-venda .tab-solution-content h1, .page-title-area-plan-os .tab-solution-content h1, .page-title-area-plan-premium .tab-solution-content h1, .page-title-area-plan-full .tab-solution-content h1 { font-size: clamp(2rem, 4vw, 3rem) !important; letter-spacing: -0.015em; margin-bottom: 8px !important; position: relative; padding-top: 16px; } .page-title-area-plan-nfe .tab-solution-content h1::before, .page-title-area-plan-venda .tab-solution-content h1::before, .page-title-area-plan-os .tab-solution-content h1::before, .page-title-area-plan-premium .tab-solution-content h1::before, .page-title-area-plan-full .tab-solution-content h1::before { content: ''; position: absolute; top: 0; left: 0; width: 52px; height: 3px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-electric)); } .page-title-area-plan-nfe .tab-solution-content h2, .page-title-area-plan-venda .tab-solution-content h2, .page-title-area-plan-os .tab-solution-content h2, .page-title-area-plan-premium .tab-solution-content h2, .page-title-area-plan-full .tab-solution-content h2 { font-size: 1.15rem !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.78) !important; max-width: 620px; margin-bottom: 24px !important; } /* ---- Tag de seção (h6 das páginas internas) ---- */ .about-content-text h6, .section-title h6 { display: inline-flex !important; align-items: center; gap: 10px; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--sp-primary) !important; margin-bottom: 14px; } .about-content-text h6::before, .section-title h6::before { content: ''; width: 34px; height: 2px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent)); } .section-title h2 { font-size: clamp(1.7rem, 3vw, 2.4rem) !important; line-height: 1.2 !important; } /* ---- Página Planos — configurador interativo ---- */ .sp-plan-hero { padding: 72px 0 56px; background: var(--sp-grid-dark), linear-gradient(160deg, var(--sp-navy-deep) 0%, var(--sp-navy) 55%, #121a52 100%); background-size: 56px 56px, 100% 100%; overflow: hidden; } .sp-plan-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .sp-plan-hero-copy .sp-section-tag { color: var(--sp-electric); } .sp-plan-hero-copy h1 { font-size: clamp(2rem, 4vw, 3rem) !important; color: #fff !important; line-height: 1.15 !important; margin-bottom: 20px !important; } .sp-plan-hero-copy p { color: rgba(255, 255, 255, 0.72); line-height: 1.85; margin-bottom: 14px; } .sp-plan-hero-visual { position: relative; } .sp-plan-hero-frame { position: relative; border: 1px solid rgba(77, 163, 255, 0.28); clip-path: var(--sp-notch); background: rgba(255, 255, 255, 0.04); padding: 12px; } .sp-plan-hero-frame img { width: 100%; display: block; clip-path: var(--sp-notch-sm); } .sp-plan-hero-watermark { position: absolute; right: -8%; bottom: -12%; font-size: clamp(4rem, 10vw, 7rem); font-weight: 700; color: transparent; -webkit-text-stroke: 1px rgba(77, 163, 255, 0.12); pointer-events: none; user-select: none; line-height: 1; } /* Laboratório / deck de planos */ .sp-plan-lab { padding: 56px 0 72px; background: #fff; } .sp-plan-deck { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 32px; } .sp-plan-deck-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 18px 44px; text-align: left; background: #f7f9fc; border: 1px solid rgba(11, 11, 49, 0.08); clip-path: var(--sp-notch-sm); cursor: pointer; transition: transform var(--sp-transition), border-color var(--sp-transition), background var(--sp-transition), box-shadow var(--sp-transition); font-family: var(--sp-font); } .sp-plan-deck-card:hover { transform: translateY(-4px); border-color: rgba(25, 118, 210, 0.35); box-shadow: 0 16px 40px rgba(11, 11, 49, 0.1); } .sp-plan-deck-card.is-active { background: var(--sp-grid-dark), linear-gradient(145deg, var(--sp-navy) 0%, #152060 100%); background-size: 56px 56px, 100% 100%; border-color: rgba(77, 163, 255, 0.45); box-shadow: 0 20px 48px rgba(11, 11, 49, 0.22); } .sp-plan-deck-card.is-flagship:not(.is-active) { border-color: rgba(25, 118, 210, 0.35); background: linear-gradient(180deg, #eef4fc 0%, #f7f9fc 100%); } .sp-plan-deck-num { font-size: 28px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(25, 118, 210, 0.35); } .sp-plan-deck-card.is-active .sp-plan-deck-num { -webkit-text-stroke-color: rgba(77, 163, 255, 0.6); } .sp-plan-deck-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-primary); border: 1px solid rgba(25, 118, 210, 0.3); padding: 3px 8px; } .sp-plan-deck-card.is-active .sp-plan-deck-badge { color: var(--sp-electric); border-color: rgba(77, 163, 255, 0.4); } .sp-plan-deck-card strong { font-size: 15px; color: var(--sp-navy); line-height: 1.25; } .sp-plan-deck-card.is-active strong { color: #fff; } .sp-plan-deck-card small { font-size: 12px; line-height: 1.45; color: var(--sp-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sp-plan-deck-card.is-active small { color: rgba(255, 255, 255, 0.65); } .sp-plan-deck-arrow { position: absolute; right: 14px; bottom: 14px; font-size: 18px; color: var(--sp-primary); opacity: 0; transform: translateX(-6px); transition: opacity var(--sp-transition), transform var(--sp-transition); } .sp-plan-deck-card.is-active .sp-plan-deck-arrow, .sp-plan-deck-card:hover .sp-plan-deck-arrow { opacity: 1; transform: translateX(0); } .sp-plan-deck-card.is-active .sp-plan-deck-arrow { color: var(--sp-electric); } /* Painel dinâmico — sempre visível (Blazor re-render remove is-visible do JS) */ .sp-plan-lab .sp-reveal { opacity: 1 !important; transform: none !important; } .sp-plan-stage { border: 1px solid rgba(11, 11, 49, 0.1); clip-path: var(--sp-notch); background: #fafbfd; overflow: hidden; } @keyframes sp-plan-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .sp-plan-stage-rail { display: flex; height: 4px; background: rgba(11, 11, 49, 0.06); } .sp-plan-stage-tick { flex: 1; transition: background var(--sp-transition), box-shadow var(--sp-transition); } .sp-plan-stage-tick.is-active { background: linear-gradient(90deg, var(--sp-primary), var(--sp-electric)); box-shadow: 0 0 12px rgba(77, 163, 255, 0.5); } .sp-plan-stage-body { display: grid; grid-template-columns: 1fr 1.05fr; gap: 0; min-height: 520px; animation: sp-plan-fade 0.35s ease; } .sp-plan-stage-copy { padding: 40px 36px; border-right: 1px solid rgba(11, 11, 49, 0.08); } .sp-plan-stage-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; } .sp-plan-stage-num { font-size: 48px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(25, 118, 210, 0.35); flex-shrink: 0; } .sp-plan-stage-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-primary); border: 1px solid rgba(25, 118, 210, 0.3); padding: 3px 8px; margin-bottom: 8px; } .sp-plan-stage-copy .title-text { font-size: clamp(1.5rem, 2.5vw, 2rem) !important; color: var(--sp-navy) !important; margin-bottom: 6px !important; } .sp-plan-tagline { color: var(--sp-primary); font-weight: 600; font-size: 15px; margin: 0; line-height: 1.45; } .plans-text { color: var(--sp-text-muted) !important; font-weight: 400 !important; font-size: 0.95rem !important; line-height: 1.8 !important; margin-bottom: 18px; } .sp-plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; } .sp-plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--sp-text-muted); } .sp-plan-features li i { color: var(--sp-primary); margin-top: 3px; flex-shrink: 0; } .sp-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; } .sp-plan-stage-screen { padding: 28px; background: var(--sp-grid-light), linear-gradient(180deg, #eef3f9 0%, #f7f9fc 100%); background-size: 56px 56px, 100% 100%; display: flex; flex-direction: column; gap: 14px; } .sp-plan-screen-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-text-muted); padding-bottom: 10px; border-bottom: 1px solid rgba(11, 11, 49, 0.08); } .sp-plan-screen-label strong { font-size: 13px; color: var(--sp-navy); letter-spacing: 0; text-transform: none; } /* Organograma */ .sp-plan-org { padding: 88px 0; background: var(--sp-grid-dark), linear-gradient(180deg, var(--sp-navy) 0%, var(--sp-navy-deep) 100%); background-size: 56px 56px, 100% 100%; } .sp-plan-org-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .sp-plan-org .sp-section-tag { color: var(--sp-electric); } .sp-plan-org .title-text { color: #fff !important; margin-bottom: 8px !important; } .sp-plan-org-copy > p { color: rgba(255, 255, 255, 0.65); margin: 0; } .sp-plan-org-visual .sp-plan-carousel { border-color: rgba(77, 163, 255, 0.28); background: rgba(255, 255, 255, 0.04); } /* Matriz comparativa */ .sp-plan-matrix { background: #fff; } .sp-plan-matrix-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; } .sp-plan-matrix-chip { border: 1px solid rgba(11, 11, 49, 0.12); background: #f7f9fc; color: var(--sp-navy); font-family: var(--sp-font); font-size: 12px; font-weight: 700; padding: 8px 16px; clip-path: var(--sp-notch-sm); cursor: pointer; transition: background var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition); } .sp-plan-matrix-chip:hover { border-color: rgba(25, 118, 210, 0.35); } .sp-plan-matrix-chip.is-active { background: var(--sp-navy); color: #fff; border-color: var(--sp-navy); } .sp-plan-matrix-wrap { overflow-x: auto; border: 1px solid rgba(11, 11, 49, 0.08); clip-path: var(--sp-notch); } .sp-plan-matrix-table { --bs-table-striped-bg: rgba(25, 118, 210, 0.04); --bs-table-hover-bg: rgba(25, 118, 210, 0.07); border-color: rgba(11, 11, 49, 0.08); font-family: var(--sp-font); margin: 0; min-width: 760px; } .sp-plan-matrix-table thead th { background: var(--sp-navy) !important; color: #fff !important; border-color: rgba(77, 163, 255, 0.22) !important; font-weight: 700; font-size: 12px; padding: 14px 10px; cursor: pointer; transition: background var(--sp-transition); } .sp-plan-matrix-table thead th:hover { background: #152060 !important; } .sp-plan-matrix-table thead th.is-col-active, .sp-plan-matrix-table tbody td.is-col-active, .sp-plan-matrix-table tfoot td.is-col-active { background: rgba(25, 118, 210, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.25); } .sp-plan-matrix-feature { text-align: left !important; font-weight: 600 !important; color: var(--sp-navy) !important; background: #fff !important; position: sticky; left: 0; z-index: 2; min-width: 220px; } .sp-plan-matrix-table tbody td { padding: 11px 10px; vertical-align: middle; } .sp-plan-check { color: var(--sp-primary) !important; font-size: 1.2rem; } .sp-plan-x { width: 20px; opacity: 0.5; } .sp-plan-table-btn { display: inline-block; border: 1px solid var(--sp-primary); color: var(--sp-primary); font-family: var(--sp-font); font-weight: 700; font-size: 11px; text-decoration: none; clip-path: var(--sp-notch-sm); padding: 7px 14px; transition: background var(--sp-transition), color var(--sp-transition); } .sp-plan-table-btn:hover { background: var(--sp-primary); color: #fff; } /* Carrossel de planos */ .sp-plan-carousel { position: relative; border: 1px solid rgba(77, 163, 255, 0.2); clip-path: var(--sp-notch); background: rgba(11, 11, 49, 0.15); flex: 1; } .sp-plan-carousel .carousel-inner img, .carousel.slide .carousel-inner img { clip-path: var(--sp-notch); box-shadow: 0 20px 56px rgba(11, 11, 49, 0.14); cursor: zoom-in; border-radius: 0; } .carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--sp-navy) !important; border: 1px solid rgba(77, 163, 255, 0.4); clip-path: var(--sp-notch-sm); filter: none !important; width: 44px; height: 44px; background-size: 45% !important; background-position: center !important; background-repeat: no-repeat !important; transition: background-color var(--sp-transition); } .carousel-control-prev:hover .carousel-control-prev-icon, .carousel-control-next:hover .carousel-control-next-icon { background-color: var(--sp-primary) !important; } .carousel-indicators li { width: 26px !important; height: 4px !important; border-radius: 0 !important; margin: 6px 4px !important; background-color: rgba(25, 118, 210, 0.3) !important; box-shadow: none !important; transition: background-color var(--sp-transition), width var(--sp-transition); } .carousel-indicators li.active, .carousel-indicators .active { width: 38px !important; height: 4px !important; background-color: var(--sp-primary) !important; box-shadow: 0 0 10px rgba(77, 163, 255, 0.6) !important; } /* ---- Cards de serviços das páginas de produto ---- */ .single-services-item { background: #fff !important; border: 1px solid var(--sp-border) !important; border-left: 4px solid var(--sp-primary) !important; clip-path: var(--sp-notch-sm); border-radius: 0 !important; padding: 30px 26px !important; box-shadow: none !important; transition: transform var(--sp-transition), box-shadow var(--sp-transition) !important; } .single-services-item:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(11, 11, 49, 0.12) !important; } .single-services-item h3 { font-size: 1.15rem !important; margin: 14px 0 10px !important; } .single-services-item p { font-size: 14px; } .sp-plan-carousel-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; } .sp-plan-carousel-dots button { width: 26px; height: 4px; padding: 0; border: none; background: rgba(255, 255, 255, 0.35); cursor: default; transition: width var(--sp-transition), background var(--sp-transition); } .sp-plan-carousel-dots button.is-active { width: 38px; background: var(--sp-electric); } /* Modal de imagens (planos) */ .sp-plan-modal { background-color: rgba(11, 11, 49, 0.92) !important; backdrop-filter: blur(8px); } .sp-plan-modal .close { color: #fff; font-size: 36px; top: 20px; right: 28px; z-index: 10; } .sp-plan-modal .modal-content { background: transparent; border: none; max-width: 90vw; margin: auto; } @media (max-width: 991px) { .sp-plan-hero-grid, .sp-plan-org-grid, .sp-plan-stage-body { grid-template-columns: 1fr; } .sp-plan-deck { grid-template-columns: repeat(2, 1fr); } .sp-plan-stage-copy { border-right: none; border-bottom: 1px solid rgba(11, 11, 49, 0.08); } .sp-plan-stage-body { min-height: auto; } } @media (max-width: 640px) { .sp-plan-deck { grid-template-columns: 1fr; } .sp-plan-actions { flex-direction: column; } .sp-plan-actions .default-btn, .sp-plan-actions .default-btn-one { width: 100%; text-align: center; } .sp-plan-hero { padding: 48px 0 40px; } } /* ---- CTA "Entre em contato" (bg-blue) ---- */ .bg-blue { background: var(--sp-grid-dark), linear-gradient(115deg, var(--sp-navy-deep) 0%, var(--sp-navy) 55%, var(--sp-primary-dark) 130%) !important; background-size: 56px 56px, 56px 56px, 100% 100% !important; padding: 72px 15px !important; margin-top: 0 !important; position: relative; overflow: hidden; } .bg-blue::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent), var(--sp-electric)); } .bg-blue::after { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(25, 118, 210, 0.25) 0%, transparent 65%); bottom: -240px; right: -120px; pointer-events: none; } .bg-blue .hire-content { position: relative; z-index: 1; } .bg-blue .hire-content h2 { color: #fff !important; font-size: clamp(1.6rem, 3vw, 2.3rem) !important; margin-bottom: 14px !important; } .bg-blue .hire-content p { color: rgba(255, 255, 255, 0.72) !important; font-size: 16px; max-width: 640px; margin-left: auto; margin-right: auto; } /* ---- FAQ / acordeões ---- */ .panel-group .panel { background: #fff !important; border: 1px solid var(--sp-border) !important; border-left: 4px solid var(--sp-primary) !important; clip-path: var(--sp-notch-sm); border-radius: 0 !important; margin-bottom: 14px; box-shadow: none !important; transition: box-shadow var(--sp-transition); } .panel-group .panel:hover { box-shadow: 0 12px 32px rgba(11, 11, 49, 0.08) !important; } .panel-group .panel.bg-grey { background: var(--sp-surface-alt) !important; } .panel-title { font-size: 16px !important; font-weight: 700 !important; color: var(--sp-navy) !important; } .panel-answer { color: var(--sp-text-muted) !important; } .panel-body { color: var(--sp-text-muted); } /* ---- Cards (Utilitários, Área do Cliente) ---- */ .card { border: 1px solid var(--sp-border) !important; border-top: 3px solid var(--sp-primary) !important; clip-path: var(--sp-notch-sm); border-radius: 0 !important; box-shadow: none !important; transition: transform var(--sp-transition), box-shadow var(--sp-transition) !important; } .card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(11, 11, 49, 0.1) !important; } .card .card-title { font-weight: 700 !important; color: var(--sp-navy) !important; } /* ---- Responsivo páginas internas ---- */ @media (max-width: 991px) { .page-title-area-plan-nfe, .page-title-area-plan-venda, .page-title-area-plan-os, .page-title-area-plan-premium, .page-title-area-plan-full { height: auto !important; min-height: 380px; padding-bottom: 32px; } .div-gray, .div-white { padding: 48px 15px !important; } #tabela-de-recursos { padding: 48px 0; } } /* ========================================================================== INTEGRAÇÕES — página dedicada ========================================================================== */ .sp-integrations-intro { background: var(--sp-grid-light), linear-gradient(180deg, #ffffff 0%, var(--sp-surface-alt) 100%); background-size: 56px 56px, 56px 56px, 100% 100%; } .sp-integrations-platforms { padding: 90px 0 100px; background: var(--sp-surface); } .sp-int-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .sp-int-card { position: relative; background: #fff; border: 1px solid var(--sp-border); clip-path: var(--sp-notch); padding: 34px 30px 30px; overflow: hidden; transition: transform var(--sp-transition), box-shadow var(--sp-transition), border-color var(--sp-transition); } .sp-int-card.is-wide { grid-column: span 2; } .sp-int-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--sp-int-accent, linear-gradient(90deg, var(--sp-primary), var(--sp-electric))); } .sp-int-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent), var(--sp-electric)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .sp-int-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(11, 11, 49, 0.12); border-color: var(--sp-border-glow); } .sp-int-card:hover::after { transform: scaleX(1); } /* Acentos por plataforma (cores de referência, sem logos) */ .sp-int-vtex { --sp-int-accent: linear-gradient(90deg, #ff0055, #e6004c); } .sp-int-tray { --sp-int-accent: linear-gradient(90deg, #f58634, #e07020); } .sp-int-woo { --sp-int-accent: linear-gradient(90deg, #7f54b3, #96588a); } .sp-int-nuvem { --sp-int-accent: linear-gradient(90deg, #003fe5, #002db3); } .sp-int-ml { --sp-int-accent: linear-gradient(90deg, #3483fa, #ffe600); } .sp-int-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .sp-int-num { font-family: var(--sp-font); font-size: 48px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(25, 118, 210, 0.25); transition: -webkit-text-stroke-color var(--sp-transition); } .sp-int-card:hover .sp-int-num { -webkit-text-stroke-color: var(--sp-primary); } .sp-int-badge { font-family: var(--sp-font); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-primary); padding: 6px 12px; border: 1px solid rgba(25, 118, 210, 0.25); clip-path: var(--sp-notch-sm); background: rgba(25, 118, 210, 0.06); } .sp-int-card h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem) !important; margin-bottom: 12px !important; color: var(--sp-navy) !important; } .sp-int-card > p { font-size: 15px; margin-bottom: 22px; line-height: 1.75; } .sp-int-features { list-style: none; padding: 0; margin: 0; border-left: 2px solid rgba(25, 118, 210, 0.22); } .sp-int-features li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0 5px 16px; font-family: var(--sp-font); font-size: 14px; font-weight: 500; color: var(--sp-text-muted); line-height: 1.5; } .sp-int-features li i { color: var(--sp-primary) !important; margin-top: 3px; flex-shrink: 0; } .sp-int-features-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; border-left: none; } .sp-int-features-cols li { padding-left: 0; } /* Fluxo "Como funciona" */ .sp-integrations-flow { background: var(--sp-grid-dark), linear-gradient(180deg, var(--sp-navy-deep) 0%, var(--sp-navy) 100%); background-size: 56px 56px, 56px 56px, 100% 100%; } .sp-integrations-flow .sp-section-tag { color: var(--sp-electric); } .sp-integrations-flow .sp-section-header h2 { color: #fff !important; } .sp-int-flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid rgba(77, 163, 255, 0.18); } .sp-int-flow-step { padding: 36px 28px; border-right: 1px solid rgba(77, 163, 255, 0.12); position: relative; transition: background var(--sp-transition); } .sp-int-flow-step:last-child { border-right: none; } .sp-int-flow-step:hover { background: rgba(25, 118, 210, 0.08); } .sp-int-flow-num { display: block; font-family: var(--sp-font); font-size: 42px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(77, 163, 255, 0.35); margin-bottom: 16px; transition: color var(--sp-transition), -webkit-text-stroke-color var(--sp-transition); } .sp-int-flow-step:hover .sp-int-flow-num { color: var(--sp-electric); -webkit-text-stroke-color: transparent; } .sp-int-flow-step h4 { font-size: 1rem !important; color: #fff !important; margin-bottom: 10px !important; } .sp-int-flow-step p { font-size: 14px; color: rgba(255, 255, 255, 0.62) !important; margin: 0; line-height: 1.65; } @media (max-width: 991px) { .sp-int-grid { grid-template-columns: 1fr; } .sp-int-card.is-wide { grid-column: span 1; } .sp-int-features-cols { grid-template-columns: 1fr; } .sp-int-flow-grid { grid-template-columns: repeat(2, 1fr); } .sp-int-flow-step:nth-child(2) { border-right: none; } .sp-int-flow-step:nth-child(1), .sp-int-flow-step:nth-child(2) { border-bottom: 1px solid rgba(77, 163, 255, 0.12); } } @media (max-width: 640px) { .sp-int-flow-grid { grid-template-columns: 1fr; } .sp-int-flow-step { border-right: none !important; border-bottom: 1px solid rgba(77, 163, 255, 0.12); } .sp-int-flow-step:last-child { border-bottom: none; } } /* assets/css/sc-pdf.css */ /* System Commerce home — capa partida (PDF comercial, Segoe UI, marinho) */ .sc-pdf { --sc-navy: #0b2947; --sc-navy-deep: #11213b; --sc-navy-bar: #162741; --sc-ice: #eef5fa; --sc-ice-2: #edf6fc; --sc-slate: #5a7185; --sc-blue: #0877c9; --sc-orange: #ec5c06; --sc-green: #3a9d3e; --sc-ink: #0b2947; --sc-white: #ffffff; --sc-font: "Segoe UI", "Segoe UI Variable", "Helvetica Neue", sans-serif; --sc-nav-h: 72px; color: var(--sc-ink); font-family: var(--sc-font); background: var(--sc-ice); } .sc-pdf, .sc-pdf h1, .sc-pdf h2, .sc-pdf h3, .sc-pdf h4, .sc-pdf p, .sc-pdf a, .sc-pdf li, .sc-pdf span, .sc-pdf button { font-family: var(--sc-font) !important; } .sc-pdf ::selection { background: var(--sc-orange); color: #fff; } .sc-pdf a:focus-visible, .sc-pdf button:focus-visible, .sc-pdf input:focus-visible, .sc-pdf select:focus-visible, .sc-pdf textarea:focus-visible { outline: 2px solid var(--sc-orange); outline-offset: 3px; } .sc-pdf h1, .sc-pdf h2, .sc-pdf h3 { outline: none; } .sc-pdf .cookie-consent { background: var(--sc-navy-bar); color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.12); z-index: 1100; } .sc-pdf .cookie-consent p, .sc-pdf .cookie-consent a { color: rgba(255, 255, 255, 0.9) !important; } .sc-pdf .cookie-consent button { background: var(--sc-orange); color: #fff; border: 0; border-radius: 4px; } /* ---- Nav on home: marinho contínuo com o herói ---- */ .sc-pdf .sp-navbar { background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .sc-pdf .sp-navbar.is-scrolled, .sc-pdf .sp-navbar.is-inner { background: var(--sc-navy); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sc-pdf .sp-nav-link, .sc-pdf .sp-navbar.is-scrolled .sp-nav-link, .sc-pdf .sp-navbar.is-inner .sp-nav-link { color: rgba(255, 255, 255, 0.92) !important; } .sc-pdf .sp-nav-toggle span, .sc-pdf .sp-navbar.is-scrolled .sp-nav-toggle span, .sc-pdf .sp-navbar.is-inner .sp-nav-toggle span { background: #fff; } .sc-pdf .sp-nav-actions .default-btn { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 4px; box-shadow: none; clip-path: none; } .sc-pdf .sp-nav-actions .default-btn:hover { background: #fff !important; color: var(--sc-navy) !important; } .sc-pdf .sp-nav-logo img { height: auto; } /* ---- Hero: carrossel full-bleed + overlay ---- */ .sc-hero { position: relative; z-index: 0; background: var(--sc-navy); color: #fff; min-height: 100vh; margin-top: calc(-1 * var(--sc-nav-h)); display: flex; flex-direction: column; } .sc-hero-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .sc-hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 41, 71, 0.92) 0%, rgba(11, 41, 71, 0.62) 46%, rgba(11, 41, 71, 0.28) 100%), linear-gradient(180deg, rgba(11, 41, 71, 0.45) 0%, transparent 28%, transparent 72%, rgba(11, 41, 71, 0.55) 100%); } .sc-hero-overlay { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; width: 100%; max-width: 1320px; margin: 0 auto; padding: calc(var(--sc-nav-h) + 36px) 28px 28px; } .sc-hero-copy { max-width: 560px; } .sc-hero h1 { margin: 0 0 18px !important; color: #fff !important; font-size: clamp(2.4rem, 5.2vw, 3.7rem) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.03em; } .sc-lead { margin: 0 0 32px !important; min-height: 3.4em; max-width: 36em; color: rgba(255, 255, 255, 0.86) !important; font-size: 1.12rem !important; line-height: 1.5 !important; } .sc-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .sc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 240px; padding: 12px 26px; border-radius: 4px; font-weight: 600 !important; font-size: 1rem !important; text-decoration: none !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .sc-btn:hover { transform: translateY(-1px); text-decoration: none !important; } .sc-btn-primary { background: var(--sc-orange); color: #fff !important; border: 1px solid var(--sc-orange); animation: scCtaPulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; } @keyframes scCtaPulse { 0%, 100% { box-shadow: 0 8px 18px rgba(236, 92, 6, 0.18); } 50% { box-shadow: 0 10px 28px rgba(236, 92, 6, 0.38); } } @media (prefers-reduced-motion: reduce) { .sc-btn-primary { animation: none; } } .sc-btn-primary:hover { background: #d45205; color: #fff !important; } .sc-btn-ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.7); } .sc-btn-ghost:hover { background: #fff; color: var(--sc-navy) !important; } .sc-hero-slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .sc-hero-slide.is-on { opacity: 1; pointer-events: auto; z-index: 1; } .sc-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); } .sc-hero-slide.is-on img { animation: scKen 5.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes scKen { from { transform: scale(1); } to { transform: scale(1.07); } } .sc-hero-slide figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sc-hero-caption { flex: 1; margin: 0; min-width: 0; color: #fff; } .sc-hero-caption strong { display: block; font-size: 0.95rem; font-weight: 700; } .sc-hero-caption span { display: block; margin-top: 2px; color: rgba(255, 255, 255, 0.75) !important; font-size: 0.8rem; line-height: 1.3; } .sc-hero-controls { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; max-width: 1320px; width: 100%; margin: 0 auto; padding: 12px 28px 14px; } .sc-hero-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 4px; background: transparent; color: #fff; flex-shrink: 0; } .sc-hero-arrow:hover { background: #fff; color: var(--sc-navy); } .sc-hero-arrow svg { width: 18px; height: 18px; } .sc-hero-dots { display: flex; gap: 8px; flex-shrink: 0; } .sc-hero-dot { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.28); } .sc-hero-dot.is-on { background: var(--sc-blue); } .sc-hero-progress { position: relative; z-index: 2; height: 3px; background: rgba(255, 255, 255, 0.08); } .sc-hero-progress span { display: block; width: 100%; height: 100%; background: var(--sc-blue); transform-origin: left center; animation: scHeroBar 5.5s linear infinite; } .sc-hero.is-paused .sc-hero-progress span, .sc-hero.is-paused .sc-hero-slide.is-on img { animation-play-state: paused; } @keyframes scHeroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .sc-pdf .sp-plan-deck-card:hover { transform: none; } .sc-hero-slide.is-on img, .sc-hero-progress span, .sc-route-join path:first-child, .sc-marquee-track { animation: none; } .sc-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } } .sc-stats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(22, 39, 65, 0.88); border-top: 1px solid rgba(255, 255, 255, 0.08); } .sc-stat { display: flex; align-items: center; gap: 16px; padding: 26px 28px; border-right: 1px solid rgba(255, 255, 255, 0.1); color: #fff; } .sc-stat:last-child { border-right: 0; padding-right: 88px; } .sc-stat svg { width: 42px; height: 42px; flex-shrink: 0; color: #fff; } .sc-stat-value { display: block; font-size: 2rem; font-weight: 700; line-height: 1.05; color: #fff; } .sc-stat-label { display: block; margin-top: 2px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7) !important; } /* ---- Page sections ---- */ .sc-section { padding: 88px 28px 80px; } .sc-section .sc-wrap, .sc-wrap { max-width: 1320px; margin: 0 auto; } .sc-section h2 { margin: 0 0 14px !important; color: var(--sc-navy) !important; font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important; line-height: 1.15 !important; letter-spacing: -0.02em; } .sc-section p.sc-intro { margin: 0 0 40px !important; max-width: 46em; color: var(--sc-slate) !important; font-size: 1.08rem !important; line-height: 1.55 !important; } .sc-ice { background: var(--sc-ice); } .sc-white { background: #fff; } .sc-navy-band { background: var(--sc-navy); color: #fff; } .sc-navy-band h2, .sc-navy-band p, .sc-navy-band h3 { color: #fff !important; } .sc-navy-band .sc-intro { color: rgba(255, 255, 255, 0.82) !important; } .sc-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .sc-flow-item { background: transparent; border: 0; border-top: 4px solid var(--sc-blue); border-radius: 0; padding: 16px 4px 8px; } .sc-proof article { background: transparent; border: 0; border-top: 4px solid var(--sc-navy); border-radius: 0; padding: 22px 0 8px; } .sc-steps article { background: transparent; border: 0; border-top: 4px solid rgba(255, 255, 255, 0.45); border-radius: 0; padding: 20px 0 8px; } .sc-route { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; gap: 8px 4px; align-items: start; list-style: none; margin: 0; padding: 0; } .sc-route > article { margin: 0; padding: 0; border-top: 4px solid rgba(255, 255, 255, 0.45); padding: 20px 8px 8px; } .sc-route-node { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: 14px; background: var(--sc-blue); color: #fff; font-weight: 700; font-size: 1.05rem; border-radius: 4px; } .sc-route h3 { margin: 0 0 14px !important; font-size: 1.28rem !important; } .sc-route-how, .sc-route-ex { margin: 0 0 12px !important; color: rgba(255, 255, 255, 0.86) !important; font-size: 0.95rem !important; line-height: 1.5 !important; } .sc-route-how span, .sc-route-ex span { display: block; margin-bottom: 4px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(158, 203, 255, 0.95) !important; } .sc-route a, .sc-route-end a { color: #fff !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .sc-route-join { display: flex; align-items: center; justify-content: center; align-self: center; height: 36px; margin-top: 8px; color: rgba(255, 255, 255, 0.85); } .sc-route-join svg { width: 56px; height: 28px; overflow: visible; } .sc-route-join path:first-child { animation: scRouteDash 1.4s linear infinite; } @keyframes scRouteDash { to { stroke-dashoffset: -26; } } .sc-route-end { margin: 28px 0 0 !important; max-width: 46em; color: rgba(255, 255, 255, 0.82) !important; font-size: 1rem !important; } .sc-quotes-band { overflow: hidden; } .sc-marquee { overflow: hidden; margin: 8px -28px 0; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .sc-marquee + .sc-marquee { margin-top: 16px; } .sc-marquee-track { display: flex; gap: 16px; width: max-content; animation: scMarquee 56s linear infinite; } .sc-marquee.is-reverse .sc-marquee-track { animation-direction: reverse; } .sc-marquee:hover .sc-marquee-track { animation-play-state: paused; } @keyframes scMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .sc-pdf .sc-quote { position: relative; width: 340px; flex-shrink: 0; margin: 0 !important; overflow: hidden; background: var(--sc-ice) !important; border: 0 !important; border-top: 4px solid var(--sc-navy) !important; border-radius: 0; padding: 28px 22px 18px !important; text-align: left; z-index: 1; } .sc-pdf .sc-quote::before { content: "\201D"; position: absolute; top: -6px; right: 18px; left: auto; z-index: 0; color: rgba(236, 92, 6, 0.16); font-family: Georgia, "Times New Roman", serif; font-size: 120px; font-weight: 400; line-height: 1; pointer-events: none; } .sc-pdf .sc-quote::after { display: none !important; content: none !important; } .sc-flow-item strong { display: block; color: var(--sc-navy); font-size: 1rem; } .sc-flow-item span { display: block; margin-top: 6px; color: var(--sc-slate) !important; font-size: 0.88rem; line-height: 1.4; } .sc-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sc-proof h3 { margin: 0 0 10px !important; color: var(--sc-navy) !important; font-size: 1.28rem !important; } .sc-proof p { margin: 0 0 14px !important; color: var(--sc-slate) !important; line-height: 1.5 !important; } .sc-proof a { font-weight: 600; color: var(--sc-blue) !important; } .sc-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; } .sc-steps h3 { margin: 0 0 10px !important; font-size: 1.2rem !important; } .sc-pdf .sc-quote p { position: relative; z-index: 1; margin: 0 0 14px !important; color: var(--sc-navy) !important; font-size: 1.02rem !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.45 !important; } .sc-pdf .sc-quote cite { display: block !important; position: relative; z-index: 1; font-style: normal !important; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-navy); } .sc-close { padding: 96px 28px 88px; } .sc-close h2 { max-width: 16ch; margin-bottom: 16px !important; } .sc-close .sc-intro { margin-bottom: 28px !important; } .sc-close-meta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 28px 48px; color: rgba(255, 255, 255, 0.8); } .sc-close-meta strong { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(158, 203, 255, 0.95); } .sc-close-meta a { color: #fff !important; } .sc-pdf .go-top-whatsapp { bottom: 96px; z-index: 900; } .sc-pdf .sp-footer { background: #0a223c; color: rgba(255, 255, 255, 0.78); } .sc-pdf .sp-footer h3, .sc-pdf .sp-footer p, .sc-pdf .sp-footer a, .sc-pdf .sp-footer span { color: rgba(255, 255, 255, 0.86) !important; } @media (max-width: 980px) { .sc-flow, .sc-proof, .sc-steps, .sc-stats { grid-template-columns: 1fr 1fr; } .sc-flow { grid-template-columns: 1fr 1fr 1fr; } .sc-hero-veil { background: linear-gradient(180deg, rgba(11, 41, 71, 0.55) 0%, rgba(11, 41, 71, 0.72) 40%, rgba(11, 41, 71, 0.88) 100%); } .sc-pdf .go-top-whatsapp { bottom: 24px; } .sc-hero-actions { padding-right: 64px; } .sc-route { grid-template-columns: 1fr; } .sc-route-join { margin: 4px auto; transform: rotate(90deg); } } @media (max-width: 680px) { .sc-flow, .sc-proof, .sc-steps, .sc-stats { grid-template-columns: 1fr; } .sc-quote { width: 280px; } .sc-stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sc-stats { padding-bottom: 72px; } .sc-hero-actions { flex-direction: column; align-items: stretch; padding-right: 0; } .sc-btn { width: 100%; } .sc-hero-caption span { display: none; } } /* ---- Planos: mesmo mundo, esqueleto do picker ---- */ .sc-btn-ghost-ink { background: transparent; color: var(--sc-navy) !important; border: 1px solid rgba(11, 41, 71, 0.45); } .sc-btn-ghost-ink:hover { background: var(--sc-navy); color: #fff !important; } .sc-plan-hero { background: var(--sc-navy); color: #fff; padding: calc(var(--sc-nav-h) + 24px) 28px 28px; } .sc-plan-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; align-items: center; } .sc-plan-hero h1 { margin: 0 0 12px !important; color: #fff !important; font-size: clamp(1.9rem, 3.4vw, 2.7rem) !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em; } .sc-plan-hero-copy p { margin: 0 0 12px !important; max-width: 42em; color: rgba(255, 255, 255, 0.86) !important; font-size: 1.08rem !important; line-height: 1.55 !important; } .sc-plan-hero-copy p:last-child { margin-bottom: 0 !important; } .sc-plan-hero-lead { margin: 0 0 20px !important; max-width: 28em; color: rgba(255, 255, 255, 0.86) !important; font-size: 1.12rem !important; line-height: 1.5 !important; } .sc-plan-hero .sc-hero-actions { margin-top: 4px; } .sc-plan-hero-visual img { display: block; width: auto; max-width: 100%; max-height: 260px; height: auto; margin-left: auto; clip-path: none !important; border-radius: 0; } .sc-pdf .sp-plan-deck-card, .sc-pdf .sp-plan-stage, .sc-pdf .sp-plan-carousel, .sc-pdf .sp-plan-carousel .carousel-inner img, .sc-pdf .carousel.slide .carousel-inner img, .sc-pdf .sp-plan-matrix-wrap, .sc-pdf .sp-plan-matrix-chip, .sc-pdf .sp-plan-table-btn, .sc-pdf .carousel-control-prev-icon, .sc-pdf .carousel-control-next-icon, .sc-pdf .modal-content { clip-path: none !important; box-shadow: none !important; border-radius: 0 !important; } .sc-pdf #explorar-planos { padding-top: 36px; padding-bottom: 72px; } .sc-pdf .sp-plan-deck { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 36px; } .sc-pdf .sp-plan-deck-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px 8px 28px; text-align: left; background: transparent !important; border: 0 !important; border-top: 4px solid var(--sc-blue) !important; cursor: pointer; transition: border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .sc-pdf .sp-plan-deck-card:hover { transform: translateY(-1px); } .sc-pdf .sp-plan-deck-card.is-flagship:not(.is-active) { border-top-color: var(--sc-navy) !important; background: transparent !important; } .sc-pdf .sp-plan-deck-card.is-active { background: transparent !important; border-top-color: var(--sc-orange) !important; } .sc-pdf .sp-plan-deck-num { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.08em; color: var(--sc-slate) !important; -webkit-text-stroke: 0; } .sc-pdf .sp-plan-deck-card.is-active .sp-plan-deck-num { color: var(--sc-orange) !important; -webkit-text-stroke: 0; } .sc-pdf .sp-plan-deck-badge, .sc-pdf .sp-plan-stage-badge { display: inline-block; margin-bottom: 0; padding: 0; border: 0 !important; color: var(--sc-blue) !important; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sc-pdf .sp-plan-deck-card.is-active .sp-plan-deck-badge { color: var(--sc-orange) !important; } .sc-pdf .sp-plan-deck-card strong { color: var(--sc-navy) !important; font-size: 1rem; line-height: 1.25; } .sc-pdf .sp-plan-deck-card.is-active strong { color: var(--sc-navy) !important; } .sc-pdf .sp-plan-deck-card small { color: var(--sc-slate) !important; font-size: 0.88rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sc-pdf .sp-plan-deck-card.is-active small { color: var(--sc-slate) !important; } .sc-pdf .sp-plan-deck-arrow { position: absolute; right: 4px; bottom: 12px; color: var(--sc-blue); opacity: 0; transform: translateX(-6px); transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .sc-pdf .sp-plan-deck-card.is-active .sp-plan-deck-arrow, .sc-pdf .sp-plan-deck-card:hover .sp-plan-deck-arrow { opacity: 1; transform: translateX(0); } .sc-pdf .sp-plan-deck-card.is-active .sp-plan-deck-arrow { color: var(--sc-orange); } .sc-pdf .sp-plan-stage { background: transparent; border: 0; overflow: hidden; } .sc-pdf .sp-plan-stage-rail { display: flex; height: 4px; background: rgba(11, 41, 71, 0.08); } .sc-pdf .sp-plan-stage-tick { flex: 1; background: transparent; transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .sc-pdf .sp-plan-stage-tick.is-active { background: var(--sc-orange); box-shadow: none; } .sc-pdf .sp-plan-stage-body { display: grid; grid-template-columns: 1fr 1.05fr; gap: 28px; align-items: start; min-height: 0 !important; padding-top: 20px; } .sc-pdf .sp-plan-stage-copy { padding: 8px 8px 8px 0; border-right: 0; border-top: 4px solid var(--sc-navy); } .sc-pdf .sp-plan-stage-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; } .sc-pdf .sp-plan-stage-num { font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--sc-navy) !important; -webkit-text-stroke: 0; flex-shrink: 0; } .sc-pdf .sp-plan-stage-copy h2 { margin: 0 0 6px !important; color: var(--sc-navy) !important; font-size: 1.28rem !important; line-height: 1.25 !important; letter-spacing: 0; } .sc-pdf .sp-plan-tagline { margin: 0; color: var(--sc-slate) !important; font-weight: 400; font-size: 1rem; line-height: 1.45; } .sc-pdf .plans-text { color: var(--sc-slate) !important; font-weight: 400 !important; font-size: 1.08rem !important; line-height: 1.55 !important; margin-bottom: 18px; } .sc-pdf .sp-plan-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; } .sc-pdf .sp-plan-features li { display: flex; align-items: flex-start; gap: 10px; color: var(--sc-slate) !important; font-size: 0.95rem; font-weight: 400; line-height: 1.5; } .sc-pdf .sp-plan-features li i { color: var(--sc-blue); margin-top: 3px; flex-shrink: 0; } .sc-pdf .sp-plan-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .sc-pdf .sp-plan-stage-screen { padding: 0; background: transparent !important; border-top: 4px solid var(--sc-navy); display: flex; flex-direction: column; gap: 10px; min-height: 0; } .sc-pdf .sp-plan-screen-label { display: flex; justify-content: flex-end; align-items: baseline; padding: 10px 0 0; border-bottom: 0; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.08em; color: var(--sc-slate) !important; } .sc-pdf .sp-plan-screen-label strong { font-size: 0.95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sc-navy) !important; } .sc-pdf .sp-plan-carousel { position: relative; flex: none !important; background: transparent; border: 0 !important; line-height: 0; } .sc-pdf .sp-plan-carousel .carousel-inner, .sc-pdf .sp-plan-carousel .carousel-item { height: auto !important; } .sc-pdf .sp-plan-carousel .carousel-inner img, .sc-pdf .carousel.slide .carousel-inner img { display: block; width: 100%; height: auto; cursor: zoom-in; } .sc-pdf .carousel-control-prev-icon, .sc-pdf .carousel-control-next-icon { width: 40px; height: 40px; background-color: var(--sc-navy) !important; border: 1px solid rgba(255, 255, 255, 0.55); filter: none !important; } .sc-pdf .carousel-control-prev:hover .carousel-control-prev-icon, .sc-pdf .carousel-control-next:hover .carousel-control-next-icon { background-color: #fff !important; } .sc-pdf .sp-plan-carousel-dots { bottom: 10px; } .sc-pdf .sp-plan-carousel-dots button { width: 22px; height: 4px; border-radius: 0; background: rgba(11, 41, 71, 0.22); } .sc-pdf .sp-plan-carousel-dots button.is-active { width: 22px; background: var(--sc-blue); } .sc-pdf .sc-plan-org-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; } .sc-pdf .sc-plan-org-copy p { margin: 0 !important; max-width: 28em; color: rgba(255, 255, 255, 0.82) !important; font-size: 1.08rem !important; line-height: 1.55 !important; } .sc-pdf .sc-plan-org-visual, .sc-pdf .sc-plan-org-visual .sp-plan-carousel, .sc-pdf .sc-plan-org-visual .carousel-inner, .sc-pdf .sc-plan-org-visual .carousel-item { background: transparent !important; padding: 0 !important; border: 0 !important; } .sc-pdf .sc-plan-org-visual .carousel-inner img { display: block; width: auto; max-width: 100%; height: auto; max-height: 460px; object-fit: unset; background: transparent !important; } .sc-pdf .sp-plan-matrix-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .sc-pdf .sp-plan-matrix-chip { min-height: 40px; padding: 8px 16px; background: transparent; border: 1px solid rgba(11, 41, 71, 0.28) !important; color: var(--sc-navy) !important; font-size: 0.88rem; font-weight: 600; cursor: pointer; } .sc-pdf .sp-plan-matrix-chip:hover { background: var(--sc-navy); color: #fff !important; } .sc-pdf .sp-plan-matrix-chip.is-active { background: transparent; color: var(--sc-navy) !important; border-color: var(--sc-orange) !important; box-shadow: inset 0 4px 0 var(--sc-orange); } .sc-pdf .sp-plan-matrix-wrap { overflow-x: auto; border: 0; background: transparent; } .sc-pdf .sp-plan-matrix-table { --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; font-variant-numeric: tabular-nums; margin: 0; min-width: 760px; border-color: rgba(11, 41, 71, 0.08); } .sc-pdf .sp-plan-matrix-table thead th { background: var(--sc-navy) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.1) !important; font-weight: 700; font-size: 0.82rem; padding: 14px 10px; cursor: pointer; } .sc-pdf .sp-plan-matrix-table thead th:hover { background: var(--sc-navy-bar) !important; } .sc-pdf .sp-plan-matrix-table thead th.is-col-active { box-shadow: inset 0 4px 0 var(--sc-orange); } .sc-pdf .sp-plan-matrix-table tbody td.is-col-active, .sc-pdf .sp-plan-matrix-table tfoot td.is-col-active { background: rgba(8, 119, 201, 0.08) !important; box-shadow: none; } .sc-pdf .sp-plan-matrix-feature { text-align: left !important; font-weight: 600 !important; color: var(--sc-navy) !important; background: #fff !important; position: sticky; left: 0; z-index: 2; min-width: 220px; } .sc-pdf .sp-plan-matrix-table tbody td { padding: 11px 10px; color: var(--sc-navy); } .sc-pdf .sp-plan-check { color: var(--sc-blue) !important; font-size: 1.1rem; } .sc-pdf .sp-plan-x { width: 18px; opacity: 0.35; } .sc-pdf .sp-plan-table-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: 1px solid rgba(11, 41, 71, 0.45); color: var(--sc-navy) !important; font-weight: 600; font-size: 0.82rem; text-decoration: none !important; } .sc-pdf .sp-plan-matrix-table tfoot td { background: var(--sc-ice); padding: 16px 10px; } .sc-pdf .sp-plan-table-btn:hover { background: var(--sc-navy); color: #fff !important; border-color: var(--sc-navy); } .sc-pdf .sp-plan-modal { background: rgba(11, 41, 71, 0.92) !important; backdrop-filter: none; } .sc-pdf .sp-plan-modal .close { position: absolute; top: 20px; right: 28px; background: transparent; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; } @media (max-width: 980px) { .sc-plan-hero-grid, .sc-pdf .sc-plan-org-grid, .sc-pdf .sp-plan-stage-body, .sc-nfe-demo { grid-template-columns: 1fr; } .sc-pdf .sp-plan-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-pdf .sp-plan-stage-copy { border-top-color: var(--sc-navy); } } @media (max-width: 680px) { .sc-pdf .sp-plan-deck { grid-template-columns: 1fr; } .sc-pdf .sp-plan-actions { align-items: stretch; } .sc-pdf .sp-plan-actions .sc-btn { width: 100%; } .sc-plan-hero { padding: calc(var(--sc-nav-h) + 28px) 20px 36px; } .sc-pdf .sc-plan-org-visual .carousel-inner img, .sc-pdf .sc-plan-org-visual > img { max-height: 240px; } } /* ---- Express NF-e: mesma ficha, mesmo mundo ---- */ .sc-pdf .sc-plan-org-visual > img { display: block; width: auto; max-width: 100%; height: auto; max-height: 460px; background: transparent !important; } .sc-nfe-demo { padding-top: 0; } .sc-nfe-demo-copy { padding: 8px 8px 8px 0; border-top: 4px solid var(--sc-navy); } .sc-nfe-demo-copy h2 { margin: 0 0 12px !important; } .sc-nfe-demo-copy p { margin: 0 0 12px !important; color: var(--sc-slate) !important; font-size: 1.08rem !important; line-height: 1.55 !important; } .sc-nfe-demo-copy .sc-intro { color: var(--sc-navy) !important; } .sc-nfe-demo-copy .sp-plan-features li span { display: flex; flex-direction: column; gap: 4px; } .sc-nfe-demo-copy .sp-plan-features li strong { color: var(--sc-navy); font-weight: 700; } .sc-nfe-video-wrap { border-top: 4px solid var(--sc-navy); padding-top: 10px; } .sc-nfe-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--sc-navy); } .sc-nfe-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sc-nfe-features { margin-top: 32px; } /* assets/css/sp-home-hero.css */ /* SystemPort home — cabeçalho, hero e faixa de indicadores */ :root { --hero-background: #001d3e; } .sc-pdf { --hero-background: #001d3e; --sp-navy-950: #001d3e; --sp-navy-900: #082B4C; --sp-navy-800: #0A365F; --sp-blue-600: #087CEB; --sp-blue-500: #1495FF; --sp-cyan-400: #20BDEB; --sp-orange-500: #FF6B1A; --sp-green-500: #20B486; --sp-purple-500: #7259E8; --sp-white: #FFFFFF; --sp-surface: #F6F9FC; --sp-text-dark: #102A43; --sp-text-muted: #627D98; --sp-hero-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --header-height: 78px; --hero-top-safe-area: 32px; --sp-hero-nav-h: 78px; --sc-nav-h: 78px; background: var(--sp-surface); } .sc-pdf:has(.sp-hero) { background: var(--hero-background); overflow: visible; } html:has(.sc-pdf), body:has(.sc-pdf) { margin: 0; padding: 0; width: 100%; max-width: 100%; overflow-x: clip; } html:has(.sp-hero), body:has(.sp-hero) { background-color: var(--hero-background, #001d3e); } .sc-pdf .sp-navbar, .sc-pdf .sp-navbar *, .sp-hero, .sp-hero *, .sp-metrics, .sp-metrics * { font-family: var(--sp-hero-font) !important; } /* -------------------------------------------------------------------------- */ /* Header */ /* -------------------------------------------------------------------------- */ .sc-pdf .sp-navbar { position: fixed; top: 0; left: 0; right: 0; width: 100%; margin: 0; height: var(--sp-hero-nav-h); background-color: var(--hero-background, #001d3e) !important; border-top: 0; border-bottom: 1px solid transparent; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; box-shadow: none; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .sc-pdf .sp-navbar.is-scrolled, .sc-pdf .sp-navbar.is-inner { background-color: rgba(0, 29, 62, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; } .sc-pdf .sp-nav-inner { height: var(--sp-hero-nav-h); max-width: 1320px; padding: 0 32px; gap: 20px; } /* Logo com contorno branco próprio: vai direto sobre o nav escuro, sem placa */ .sc-pdf .sp-nav-logo { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0; background: none; line-height: 0; } .sc-pdf .sp-nav-logo img { width: 160px; height: auto; max-height: 48px; } .sp-nav-caret { width: 10px; height: 10px; flex-shrink: 0; } .sp-nav-item.has-dropdown > .sp-nav-link::after { display: none !important; } .sp-nav-client, .sp-nav-demo { display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; clip-path: none !important; white-space: nowrap; } .sp-navbar.is-inner .sp-nav-client { height: 42px; padding: 0 20px; border-radius: 8px; background: transparent !important; border: 1px solid rgba(16, 42, 67, 0.22) !important; color: var(--sp-text-dark, #102A43) !important; font-weight: 600; box-shadow: none !important; } .sp-navbar.is-inner .sp-nav-demo { height: 42px; padding: 0 18px; gap: 8px; border-radius: 8px; background: #FF6B1A !important; border: 1px solid #FF6B1A !important; color: #fff !important; font-weight: 700; box-shadow: 0 8px 20px rgba(255, 107, 26, 0.22) !important; } .sp-navbar.is-inner .sp-nav-demo svg { width: 14px; height: 14px; } .sc-pdf .sp-nav-menu { gap: 26px; } .sc-pdf .sp-nav-link, .sc-pdf .sp-navbar.is-scrolled .sp-nav-link, .sc-pdf .sp-navbar.is-inner .sp-nav-link { position: relative; padding: 10px 0; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.88) !important; letter-spacing: 0.01em; background: none !important; } .sc-pdf .sp-nav-link::after { content: none; } .sc-pdf .sp-nav-item.has-dropdown > .sp-nav-link .sp-nav-caret { width: 10px; height: 10px; margin-left: 4px; flex-shrink: 0; opacity: 0.8; } .sc-pdf .sp-nav-link:hover, .sc-pdf .sp-nav-link:focus-visible { color: #fff !important; background: none !important; } .sc-pdf .sp-nav-item > .sp-nav-link::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: var(--sp-cyan-400); transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; } .sc-pdf .sp-nav-item > .sp-nav-link:hover::before, .sc-pdf .sp-nav-item > .sp-nav-link:focus-visible::before, .sc-pdf .sp-nav-item.has-dropdown:hover > .sp-nav-link::before, .sc-pdf .sp-nav-item.has-dropdown:focus-within > .sp-nav-link::before { transform: scaleX(1); } .sc-pdf .sp-nav-dropdown { top: calc(100% + 8px); min-width: 248px; padding: 8px; background: var(--sp-navy-900); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; clip-path: none; box-shadow: 0 18px 40px rgba(4, 27, 51, 0.35); } .sc-pdf .sp-nav-item.has-dropdown:hover > .sp-nav-dropdown, .sc-pdf .sp-nav-item.has-dropdown:focus-within > .sp-nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .sc-pdf .sp-nav-dropdown .sp-nav-link { border-radius: 6px; padding: 10px 12px; font-weight: 500; color: rgba(255, 255, 255, 0.86) !important; } .sc-pdf .sp-nav-dropdown .sp-nav-link:hover, .sc-pdf .sp-nav-dropdown .sp-nav-link:focus-visible { color: #fff !important; background: rgba(20, 149, 255, 0.12) !important; } .sc-pdf .sp-nav-dropdown .sp-nav-link::before { content: none; } .sc-pdf .sp-nav-actions { gap: 10px; } .sc-pdf .sp-nav-client, .sc-pdf .sp-navbar.is-scrolled .sp-nav-client, .sc-pdf .sp-navbar.is-inner .sp-nav-client { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 8px; background: rgba(10, 54, 95, 0.62) !important; border: 1px solid rgba(255, 255, 255, 0.32) !important; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; box-shadow: none !important; clip-path: none !important; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; } .sc-pdf .sp-nav-client:hover, .sc-pdf .sp-nav-client:focus-visible { background: #0d4273 !important; border-color: var(--sp-cyan-400) !important; color: #fff !important; transform: translateY(-1px); } .sc-pdf .sp-nav-demo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 8px; background: var(--sp-orange-500) !important; border: 1px solid var(--sp-orange-500) !important; color: #fff !important; font-size: 14px; font-weight: 700; text-decoration: none !important; box-shadow: 0 8px 20px rgba(255, 107, 26, 0.28) !important; clip-path: none !important; transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .sc-pdf .sp-nav-demo svg { width: 14px; height: 14px; } .sc-pdf .sp-nav-demo:hover, .sc-pdf .sp-nav-demo:focus-visible { background: #ff7d38 !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 107, 26, 0.36) !important; } .sc-pdf .sp-nav-toggle span, .sc-pdf .sp-navbar.is-scrolled .sp-nav-toggle span, .sc-pdf .sp-navbar.is-inner .sp-nav-toggle span { background: #fff; } .sc-pdf .sp-navbar a:focus-visible, .sc-pdf .sp-navbar button:focus-visible { outline: 2px solid var(--sp-cyan-400); outline-offset: 3px; } button.sp-nav-link { appearance: none; -webkit-appearance: none; } #sistema-funcionando { scroll-margin-top: 96px; } @media (min-width: 1100px) { .sc-pdf .sp-nav-toggle { display: none; } .sc-pdf .sp-nav-menu-wrap { position: static; transform: none !important; background: transparent; padding: 0; overflow: visible; display: flex; flex-direction: row; align-items: center; gap: 8px; } } html:not(.is-past-hero) #channel-chat-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .sc-pdf #channel-chat-widget, #channel-chat-widget { bottom: 24px; right: 24px; } /* -------------------------------------------------------------------------- */ /* Hero */ /* -------------------------------------------------------------------------- */ .sp-hero { position: relative; isolation: isolate; box-sizing: border-box; width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 700px; max-height: 900px; overflow: hidden; margin: 0; padding: 0; background-color: var(--hero-background, #001d3e); color: var(--sp-white); filter: none; } .sp-hero::before, .sp-hero::after, .sp-hero-visual::before, .sp-hero-visual::after { content: none !important; display: none !important; } .sp-hero-visual { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; background-color: var(--hero-background, #001d3e); pointer-events: none; filter: none; } .sp-hero-visual picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0; } .sp-hero-image, .sp-hero-visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border-radius: 0 !important; object-fit: contain; object-position: center center; filter: none !important; image-rendering: auto; } @media (min-width: 1100px) { .sp-hero-visual > .sp-hero-image { inset: 50px 0 auto auto; width: 86%; height: 86%; object-position: right top; -webkit-mask-image: linear-gradient(to right, transparent, #000 9%), linear-gradient(to bottom, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent, #000 9%), linear-gradient(to bottom, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } } .sp-hero-veil, .sp-hero-overlay, .sp-hero-contrast, .sp-hero-gradient { display: none !important; background: transparent !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; mask-image: none !important; -webkit-mask-image: none !important; pointer-events: none; } .sp-hero-inner, .sp-hero-copy, .sp-hero-actions { background: transparent; box-shadow: none; filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .sp-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; width: min(calc(100% - 60px), 1240px); height: 100%; margin-inline: auto; padding: 110px 0 96px; box-sizing: border-box; pointer-events: none; } .sp-hero-copy { position: relative; z-index: 2; width: min(100%, 570px); max-width: 570px; padding-top: 0; animation: spHeroIn 420ms cubic-bezier(0.16, 1, 0.3, 1) both; pointer-events: auto; } .sp-hero-eyebrow { margin: 0 0 20px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: #20BDEB !important; line-height: 1.3 !important; } .sp-hero h1 { margin: 0 !important; max-width: 590px; color: #FFFFFF !important; font-size: clamp(46px, 4vw, 56px) !important; font-weight: 700 !important; line-height: 1.04 !important; letter-spacing: -0.035em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); } .sp-hero h1 span { color: #1495FF; white-space: nowrap; } .sp-hero-lead { margin: 22px 0 30px !important; max-width: 500px; color: rgba(255, 255, 255, 0.90) !important; font-size: 19px !important; font-weight: 400 !important; line-height: 1.5 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16); } .sp-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .sp-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 8px; text-decoration: none !important; transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .sp-hero-btn-primary { height: 54px; padding: 0 25px; background: var(--sp-orange-500); color: #fff !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: 0 12px 30px rgba(255, 107, 26, 0.25); } .sp-hero-btn-primary svg { width: 18px; height: 18px; transition: transform 200ms ease; } .sp-hero-btn-primary:hover, .sp-hero-btn-primary:focus-visible { background: #ff7d38; color: #fff !important; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(255, 107, 26, 0.34); } .sp-hero-btn-primary:hover svg, .sp-hero-btn-primary:focus-visible svg { transform: translateX(3px); } .sp-hero-btn-secondary { height: 50px; padding: 0 18px; background: transparent; border: 1px solid rgba(32, 189, 235, 0.7); color: #fff !important; font-size: 14px !important; font-weight: 600 !important; } .sp-hero-play { display: inline-flex; width: 22px; height: 22px; } .sp-hero-play svg { width: 22px; height: 22px; } .sp-hero-btn-secondary:hover, .sp-hero-btn-secondary:focus-visible { background: rgba(8, 124, 235, 0.18); border-color: var(--sp-cyan-400); color: #fff !important; transform: translateY(-1px); } .sp-hero-benefits, .sp-hero-check { display: none !important; } .sp-hero a:focus-visible, .sp-metrics a:focus-visible { outline: 2px solid var(--sp-cyan-400); outline-offset: 3px; } @keyframes spHeroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes spMetricIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------------------------- */ /* Indicadores */ /* -------------------------------------------------------------------------- */ .sp-metrics-section { position: relative; z-index: 10; background-color: #F6F9FC; padding: 1px 0 60px; margin: 0; overflow: visible; } .sp-metrics { position: relative; z-index: 11; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; width: min(calc(100% - 60px), 1210px); max-width: 1210px; min-height: 124px; margin: -62px auto 0; padding: 8px 8px; background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(8, 43, 76, 0.16), 0 4px 14px rgba(8, 43, 76, 0.08); animation: spMetricIn 500ms cubic-bezier(0.16, 1, 0.3, 1) both; } .sp-metric { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 108px; padding: 18px 12px; border-right: 1px solid #D9E7F3; } .sp-metric:last-child { border-right: 0; } .sp-metric svg { width: 34px; height: 34px; color: var(--sp-blue-600); flex-shrink: 0; } .sp-metric-value { display: block; color: var(--sp-navy-900); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; } .sp-metric-label { display: block; margin-top: 4px; color: var(--sp-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.3 !important; } .sp-metrics-section + .sc-section { padding-top: 20px; background: var(--sp-surface); } /* -------------------------------------------------------------------------- */ /* Tablet */ /* -------------------------------------------------------------------------- */ @media (max-width: 1099px) { .sc-pdf { --header-height: 64px; --sp-hero-nav-h: 64px; --sc-nav-h: 64px; } .sc-pdf .sp-nav-toggle { display: flex; } .sc-pdf .sp-nav-inner { padding: 0 20px; } .sc-pdf .sp-nav-logo img { width: 128px; max-height: 38px; } .sc-pdf .sp-nav-menu-wrap { position: fixed; top: var(--sp-hero-nav-h); left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 20px; background: #001d3e; backdrop-filter: none; -webkit-backdrop-filter: none; filter: none; transform: translateX(100%); transition: transform 220ms ease; overflow-y: auto; z-index: 999; } .sc-pdf .sp-nav-menu-wrap.is-open { transform: translateX(0); } .sc-pdf .sp-nav-menu { flex-direction: column; align-items: stretch; gap: 0; } .sc-pdf .sp-nav-link { padding: 14px 8px; } .sc-pdf .sp-nav-item > .sp-nav-link::before { content: none; } .sc-pdf .sp-nav-dropdown { position: static; display: none; opacity: 1; visibility: visible; transform: none; min-width: 0; margin-top: 4px; box-shadow: none; background: rgba(20, 149, 255, 0.08); } .sc-pdf .sp-nav-item.is-open .sp-nav-dropdown { display: block; } .sc-pdf .sp-nav-actions { flex-direction: column; margin-top: 20px; } .sc-pdf .sp-nav-client, .sc-pdf .sp-nav-demo { width: 100%; } .sp-hero { height: auto; min-height: 720px; max-height: none; aspect-ratio: 16 / 9; } .sp-hero-inner { min-height: 0; width: min(calc(100% - 40px), 1240px); padding: 96px 0 88px; pointer-events: none; } .sp-hero-copy { max-width: 390px; pointer-events: auto; } .sp-hero h1 { font-size: 36px !important; line-height: 1.12 !important; } .sp-hero-visual, .sp-hero-image, .sp-hero-visual img { object-fit: contain; object-position: center center; } .sp-metrics { width: calc(100% - 40px); max-width: 1210px; grid-template-columns: 1fr 1fr; min-height: 0; margin-top: -55px; padding: 12px 8px; } .sp-metric { min-height: 88px; border-right: 0; border-bottom: 1px solid #D9E7F3; } .sp-metric:nth-child(odd) { border-right: 1px solid #D9E7F3; } .sp-metric:nth-child(n + 3) { border-bottom: 0; } .sp-metrics-section + .sc-section { padding-top: 40px; } } /* -------------------------------------------------------------------------- */ /* Celular */ /* -------------------------------------------------------------------------- */ @media (max-width: 767px) { .sp-hero { height: auto; min-height: 0; max-height: none; aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; } .sp-hero-visual { position: relative; order: 2; inset: auto; width: 100%; height: auto; padding: 0; overflow: hidden; pointer-events: none; } .sp-hero-visual picture { position: relative; inset: auto; display: block; width: 100%; height: auto; } .sp-hero-image, .sp-hero-visual img { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; object-position: center center; } .sp-hero-inner { order: 1; position: relative; min-height: 0; height: auto; width: min(calc(100% - 40px), 1240px); padding: calc(var(--sp-hero-nav-h) + 20px) 0 20px; pointer-events: auto; } .sp-hero-copy { width: 100%; max-width: none; } .sp-hero h1 { font-size: clamp(34px, 9vw, 42px) !important; } .sp-hero h1 br { display: none; } .sp-hero-lead { margin: 18px 0 24px !important; font-size: 17px !important; } .sp-hero-lead br { display: none; } .sp-hero-actions { width: 100%; } .sp-hero-btn { width: 100%; } .sp-metrics-section { background-color: #F6F9FC; } .sp-metrics { width: calc(100% - 32px); margin-top: -32px; margin-left: 16px; margin-right: 16px; border-radius: 14px; padding: 18px 8px 10px; gap: 0; } .sp-metric { flex-direction: column; text-align: center; gap: 8px; min-height: 0; padding: 16px 10px; } .sp-metric-value { font-size: 24px; } .sp-metrics-section + .sc-section { padding-top: 28px; } } @media (max-width: 389px) { .sp-metrics { grid-template-columns: 1fr; } .sp-metric, .sp-metric:nth-child(odd) { border-right: 0; border-bottom: 1px solid #D9E7F3; } .sp-metric:last-child { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .sp-hero-copy, .sp-metrics, .sp-hero-btn, .sp-hero-btn-primary svg, .sc-pdf .sp-nav-client, .sc-pdf .sp-nav-demo, .sc-pdf .sp-nav-item > .sp-nav-link::before { animation: none !important; transition: none !important; transform: none !important; } } /* Selos do topo (home, /planos, produtos). Fundo quase sólido para ler bem mesmo sobre a foto do herói. */ .sp-hero-selos { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; } .sp-hero-selo { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 16px; border-radius: 999px; background: rgba(4,27,51,.86); border: 1px solid rgba(255,255,255,.34); box-shadow: 0 8px 20px rgba(0,12,28,.28); color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: .005em; text-decoration: none !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } a.sp-hero-selo:hover { background: rgba(10,52,92,.94); border-color: rgba(126,200,255,.7); } .sp-hero-selo:focus-visible { outline: 3px solid #7ec8ff; outline-offset: 2px; } .sp-hero-selo svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #7ef0c6; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sp-hero-selo strong { color: #fff !important; font-weight: 800; } .sp-hero-selo--preco { background: linear-gradient(135deg, #e3570c, #c4450a); border-color: rgba(255,190,150,.55); box-shadow: 0 10px 24px rgba(232,89,12,.4); font-weight: 800; } .sp-hero-selo--preco strong { font-size: 1.08em; } .sp-hero-selo--preco svg { stroke: #fff; } a.sp-hero-selo--preco:hover { background: linear-gradient(135deg, #cf4c08, #b03c07); border-color: rgba(255,210,180,.75); } /* Sobre fundo claro (faixa de bônus da home) */ .sp-home-bonus .sp-hero-selo:not(.sp-hero-selo--preco) { background: #fff; border-color: #c9dcee; box-shadow: 0 6px 16px rgba(6,43,79,.08); color: #062b4f !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .sp-home-bonus .sp-hero-selo:not(.sp-hero-selo--preco) strong { color: #062b4f !important; } .sp-home-bonus .sp-hero-selo:not(.sp-hero-selo--preco) svg { stroke: #0c7f5a; } .sp-home-bonus a.sp-hero-selo:not(.sp-hero-selo--preco):hover { border-color: #008ef4; background: #f5faff; } .sp-home-bonus .sp-hero-selo--preco { min-height: 50px; padding: 12px 24px; font-size: 16px; } @media (max-width: 575px) { .sp-hero-selo { font-size: 13px; min-height: 38px; padding: 8px 13px; } } @media (prefers-reduced-motion: reduce) { .sp-hero-selo { transition: none; } } /* assets/css/sp-home-operations.css */ /* SystemPort home — desafios e áreas conectadas */ .connected-operations, .connected-operations * { font-family: Inter, "Segoe UI", "Segoe UI Variable", sans-serif !important; box-sizing: border-box; } .connected-operations { position: relative; padding: 115px 0 82px; overflow: visible; background: radial-gradient( circle at 80% 10%, rgba(8, 124, 235, 0.055), transparent 34% ), linear-gradient( 180deg, #F6F9FC 0%, #F8FBFE 48%, #F4F9FD 100% ); } .connected-operations__container { width: min(calc(100% - 60px), 1210px); margin-inline: auto; } .challenges { display: grid; grid-template-columns: minmax(300px, 0.92fr) minmax(600px, 1.38fr); align-items: center; gap: 58px; } .challenges__eyebrow, .areas__eyebrow { margin: 0 0 14px; color: #537391; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .challenges__eyebrow::before, .areas__eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background: #087CEB; } .challenges__title, .areas__title { margin: 0; color: #082B4C; font-size: clamp(32px, 3vw, 42px); line-height: 1.08; font-weight: 750; letter-spacing: -0.035em; } .challenges__title { max-width: 410px; } .challenges__description, .areas__description { margin: 20px 0 0; color: #627D98; font-size: 15px; line-height: 1.65; font-weight: 400; } .challenges__description { max-width: 460px; } .challenges__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .challenge-card, .area-card { min-width: 0; } .challenge-card { min-height: 184px; padding: 22px 14px 18px; border: 1px solid rgba(8, 43, 76, 0.055); border-radius: 17px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 15px 32px rgba(8, 43, 76, 0.055), 0 3px 10px rgba(8, 43, 76, 0.035); text-align: center; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .challenge-card:hover { transform: translateY(-4px); border-color: rgba(8, 124, 235, 0.14); box-shadow: 0 20px 40px rgba(8, 43, 76, 0.09), 0 5px 14px rgba(8, 43, 76, 0.05); } .challenge-card__icon { display: grid; width: 48px; height: 48px; margin: 0 auto 16px; place-items: center; border-radius: 50%; } .challenge-card__icon svg { width: 23px; height: 23px; } .challenge-card--outdated .challenge-card__icon { color: #F14969; background: #FFE8ED; } .challenge-card--manual .challenge-card__icon { color: #E7A514; background: #FFF3D5; } .challenge-card--stock .challenge-card__icon { color: #7659E8; background: #EEE9FF; } .challenge-card--closing .challenge-card__icon { color: #20B486; background: #E2F8F1; } .challenge-card__title { margin: 0; color: #102A43; font-size: 14px; line-height: 1.18; font-weight: 750; } .challenge-card__description { margin: 9px 0 0; color: #627D98; font-size: 11.5px; line-height: 1.42; font-weight: 400; } .areas { margin-top: 76px; } .areas__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; } .areas__eyebrow { margin: 0 0 13px; } .areas__title { max-width: 680px; } .areas__description { max-width: 680px; margin: 17px 0 0; line-height: 1.6; } .areas__link { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 9px; margin-bottom: 7px; color: #087CEB; font-size: 14px; line-height: 1; font-weight: 700; text-decoration: none !important; } .areas__link:hover, .areas__link:focus-visible { color: #0666c2; text-decoration: none !important; } .areas__link svg { width: 16px; height: 16px; transition: transform 180ms ease; } .areas__link:hover svg, .areas__link:focus-visible svg { transform: translateX(3px); } .areas__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .area-card, .area-card.active, .area-card:hover { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 182px; padding: 22px 18px 19px; overflow: hidden; border-radius: 16px; box-shadow: 0 15px 30px rgba(8, 43, 76, 0.10); text-decoration: none !important; cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; } .area-card:hover, .area-card.active:hover { transform: translateY(-5px); box-shadow: 0 22px 38px rgba(8, 43, 76, 0.16); } .area-card::after { content: ""; position: absolute; top: -55px; right: -55px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); pointer-events: none; } .area-card__icon { display: grid; width: 44px; height: 44px; margin-bottom: 20px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.20); color: currentColor; } .area-card__icon svg { width: 22px; height: 22px; } .area-card__title, .area-card__description { color: inherit; } .area-card__title { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 750; letter-spacing: -0.015em; } .area-card__description { margin: 10px 0 0; font-size: 12px; line-height: 1.45; font-weight: 500; opacity: 0.90; } .area-card--service, .area-card--service:hover, .area-card--service:focus, .area-card--service:focus-visible { color: #FFFFFF; background: linear-gradient(145deg, #1495FF 0%, #087CEB 100%); } .area-card--stock, .area-card--stock:hover, .area-card--stock:focus, .area-card--stock:focus-visible { color: #FFFFFF; background: linear-gradient(145deg, #20C997 0%, #20B486 100%); } .area-card--purchases, .area-card--purchases:hover, .area-card--purchases:focus, .area-card--purchases:focus-visible { color: #FFFFFF; background: linear-gradient(145deg, #FF7B3A 0%, #FF5E1A 100%); } .area-card--delivery, .area-card--delivery:hover, .area-card--delivery:focus, .area-card--delivery:focus-visible { color: #FFFFFF; background: linear-gradient(145deg, #846EF1 0%, #674CDF 100%); } .area-card--finance, .area-card--finance:hover, .area-card--finance:focus, .area-card--finance:focus-visible { color: #563A00; background: linear-gradient(145deg, #FFE589 0%, #FFD166 100%); } .area-card--finance .area-card__icon { color: #C87B00; background: rgba(255, 255, 255, 0.45); } .area-card--production, .area-card--production:hover, .area-card--production:focus, .area-card--production:focus-visible { color: #FFFFFF; background: linear-gradient(145deg, #0B4F8F 0%, #062B4F 100%); } .area-card--os, .area-card--os:hover, .area-card--os:focus, .area-card--os:focus-visible { color: #FFFFFF; background: linear-gradient(145deg, #13B5C4 0%, #0E8F9E 100%); } .area-card--tax, .area-card--tax:hover, .area-card--tax:focus, .area-card--tax:focus-visible { color: #082B4C; background: linear-gradient(145deg, #DDF1FF 0%, #CBE7FA 100%); } .area-card--tax .area-card__icon { color: #087CEB; background: rgba(255, 255, 255, 0.55); } .area-card:focus-visible, .areas__link:focus-visible, .challenge-card:focus-visible { outline: 3px solid rgba(8, 124, 235, 0.55) !important; outline-offset: 4px !important; } @media (max-width: 1250px) { .challenges { grid-template-columns: 0.85fr 1.4fr; gap: 38px; } .challenges__grid { gap: 10px; } .areas__grid { gap: 12px; } .area-card, .area-card.active, .area-card:hover { padding-inline: 15px; } } @media (max-width: 1099px) { .challenges { grid-template-columns: 1fr; gap: 32px; } .challenges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .areas__header { align-items: flex-start; } .areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 767px) { .connected-operations__container { width: min(calc(100% - 32px), 1210px); } .connected-operations { padding-top: 80px; padding-bottom: 58px; } .challenges__title, .areas__title { font-size: clamp(29px, 8vw, 36px); } .challenges__grid { grid-template-columns: 1fr; } .areas__header { display: block; } .areas__link { margin-top: 22px; } .areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 389px) { .areas__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .challenge-card, .area-card, .areas__link svg { transition: none; } .challenge-card:hover, .area-card:hover, .area-card.active:hover { transform: none; } .areas__link:hover svg, .areas__link:focus-visible svg { transform: none; } } /* assets/css/sp-home-showcase.css */ /* SystemPort home — demonstração do produto e implantação */ .product-showcase, .product-showcase *, .implementation, .implementation * { font-family: Inter, "Segoe UI", "Segoe UI Variable", sans-serif !important; box-sizing: border-box; } .product-showcase { position: relative; overflow: visible; background: #FFFFFF !important; background-image: none !important; } .product-showcase::before, .product-showcase::after, .product-preview::before, .product-preview::after { content: none !important; display: none !important; background: none !important; } .product-showcase__container { width: min(calc(100% - 60px), 1210px); margin-inline: auto; padding: 80px 0 42px; background: #FFFFFF; } .product-showcase__workspace { display: grid; grid-template-columns: minmax(260px, 278px) minmax(0, 1fr); align-items: center; gap: 28px; background: #FFFFFF; } .product-showcase__eyebrow { margin: 0 0 14px; color: #537391; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .product-showcase__eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background-color: #087CEB; } .product-showcase__title { max-width: 520px; margin: 0; color: #082B4C; font-size: clamp(32px, 3vw, 44px); line-height: 1.06; font-weight: 800; letter-spacing: -0.035em; } .product-showcase__description { max-width: 580px; margin: 17px 0 0; color: #627D98; font-size: 15px; line-height: 1.6; } .product-showcase__copy { display: flex; min-width: 0; flex-direction: column; } .product-showcase__copy .product-tabs { width: 278px; margin-top: 34px; } .product-preview { position: relative; display: flex; min-width: 0; min-height: 500px; align-items: center; justify-content: center; align-self: stretch; overflow: visible; padding: 24px; background: #FFFFFF; } .product-tabs, .department-list { list-style: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(8, 43, 76, 0.06); border-radius: 22px; background: #FFFFFF; box-shadow: 0 18px 40px rgba(8, 43, 76, 0.12), 0 2px 0 rgba(255, 255, 255, 0.8) inset; } .product-tab, .department-item { display: flex; width: 100%; min-height: 56px; align-items: center; gap: 12px; padding: 0 14px 0 12px; border: 0; border-bottom: 1px solid #EEF3F8; border-radius: 0; background: transparent; color: #163A5F; font-size: 14.5px; font-weight: 600; text-align: left; cursor: default; user-select: none; } .product-tab:last-child, .department-item:last-child { border-bottom: 0; } .product-tab__icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; } .product-tab__icon svg { display: block; width: 32px; height: 32px; } .product-tab__label { flex: 1 1 auto; min-width: 0; } .product-tab__chevron { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; color: #8AA4BB; } .department-item--highlighted, .product-tab.department-item--highlighted { color: #FFFFFF; background: linear-gradient(180deg, #2B8CFF 0%, #1677F2 100%); box-shadow: inset 0 -1px 0 rgba(8, 43, 76, 0.08); } .department-item--highlighted .product-tab__chevron { color: #FFFFFF; } .department-item:hover, .product-tab:hover { transform: none; background-color: inherit; color: inherit; } .department-item--highlighted:hover, .product-tab.department-item--highlighted:hover { color: #FFFFFF; background: linear-gradient(180deg, #2B8CFF 0%, #1677F2 100%); } .product-preview__image { position: static; display: block; width: min(100%, 900px); max-width: 100%; height: auto; max-height: none; margin: 0 auto; object-fit: contain; object-position: center; transform: none; clip-path: none; mask-image: none; filter: none; border: 0; background: transparent; } .product-app { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 0; aspect-ratio: 16 / 8.8; background: #fff; color: #102A43; } .product-app__sidebar { padding: 16px 12px 18px; background: linear-gradient(180deg, #082B4C 0%, #06365F 100%); color: #D7E7F5; } .product-app__brand { display: flex; align-items: center; min-height: 40px; margin-bottom: 16px; padding: 0 8px; } .product-app__brand img { width: 128px; height: auto; } .product-app__nav { display: grid; gap: 2px; } .product-app__nav-item { display: block; padding: 8px 10px; border-radius: 8px; color: rgba(255, 255, 255, 0.78); font-size: 12px; font-weight: 600; } .product-app__nav-item.is-active { color: #FFFFFF; background: #087CEB; } .product-app__main { display: flex; min-width: 0; flex-direction: column; padding: 16px 18px 12px; background: #F7FBFE; } .product-app__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .product-app__title { margin: 0; color: #082B4C; font-size: 22px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; } .product-app__tabs { display: flex; gap: 16px; margin-top: 8px; color: #7B93A9; font-size: 12px; font-weight: 600; } .product-app__tabs .is-active { color: #087CEB; box-shadow: inset 0 -2px 0 #087CEB; } .product-app__badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .product-result-badge { display: flex; min-width: 132px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgba(8, 43, 76, 0.07); border-radius: 10px; background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 10px 24px rgba(8, 43, 76, 0.10); } .product-result-badge__value, .product-result-badge__label { display: block; } .product-result-badge__value { color: #102A43; font-size: 13px; line-height: 1.15; font-weight: 800; } .product-result-badge__label { margin-top: 2px; color: #627D98; font-size: 10px; font-weight: 600; } .product-result-badge--sales .product-result-badge__icon { color: #20B486; } .product-result-badge--orders .product-result-badge__icon { color: #7659E8; } .product-app__toolbar { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .product-app__search { display: flex; flex: 1; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid #D7E4F0; border-radius: 8px; background: #FFFFFF; color: #7B93A9; } .product-app__search input { width: 100%; border: 0; background: transparent; color: #334E68; font-size: 12px; outline: 0 !important; } .product-app__new { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #1495FF, #087CEB); color: #FFFFFF; font-size: 22px; font-weight: 600; line-height: 1; } .product-app__table-wrap { flex: 1; min-height: 0; margin-top: 12px; overflow: hidden; } .product-app__table { width: 100%; border-collapse: collapse; font-size: 11.5px; } .product-app__table th { padding: 8px 6px; color: #7B93A9; font-weight: 700; text-align: left; } .product-app__table td { padding: 9px 6px; border-top: 1px solid #E7F0F7; color: #334E68; white-space: nowrap; } .product-app__table td:last-child, .product-app__table th:last-child { text-align: right; } .product-app__status { display: inline-flex; min-height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; font-size: 10px; font-weight: 700; } .product-app__status.is-done { color: #14845F; background: #E2F8F1; } .product-app__status.is-progress { color: #087CEB; background: #E6F3FF; } .product-app__status.is-billed { color: #D63B5D; background: #FFE8ED; } .product-app__status.is-open { color: #C56A09; background: #FFF3D5; } .product-app__all { display: inline-flex; margin-top: 8px; color: #087CEB !important; font-size: 12px; font-weight: 700; text-decoration: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .implementation { position: relative; overflow: hidden; background: radial-gradient( circle at 75% 30%, rgba(8, 124, 235, 0.20), transparent 40% ), linear-gradient( 135deg, #082B4C 0%, #06365F 52%, #084D84 100% ); color: #FFFFFF; } .implementation::before { content: ""; position: absolute; inset: 0; opacity: 0.035; background: repeating-linear-gradient( -18deg, transparent, transparent 14px, #ffffff 14px, #ffffff 15px ); pointer-events: none; } .implementation__container { position: relative; z-index: 1; width: min(calc(100% - 60px), 1210px); margin-inline: auto; padding: 62px 0 68px; } .implementation__header { display: flex; align-items: center; justify-content: space-between; gap: 48px; } .implementation__eyebrow { margin: 0; color: #43B9FF; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .implementation__title { max-width: 710px; margin: 13px 0 0; color: #FFFFFF; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; } .implementation__description { max-width: 680px; margin: 15px 0 0; color: rgba(255, 255, 255, 0.76); font-size: 15px; line-height: 1.6; } .implementation__button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; flex: 0 0 auto; gap: 12px; padding: 0 24px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 8px; background-color: rgba(255, 255, 255, 0.04); color: #FFFFFF !important; font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease; } .implementation__button:hover, .implementation__button:focus-visible { border-color: #43B9FF; background-color: rgba(67, 185, 255, 0.12); color: #FFFFFF !important; transform: translateY(-2px); } .implementation__button:focus-visible { outline: 3px solid rgba(67, 185, 255, 0.55) !important; outline-offset: 4px !important; } .implementation__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 38px 0 0; padding: 0; list-style: none; } .implementation-step { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 15px; min-height: 132px; padding: 22px; border: 1px solid rgba(8, 43, 76, 0.06); border-radius: 14px; background-color: #FFFFFF; box-shadow: 0 18px 35px rgba(0, 14, 35, 0.16); transition: transform 200ms ease, box-shadow 200ms ease; } .implementation-step:hover { transform: translateY(-4px); box-shadow: 0 24px 42px rgba(0, 14, 35, 0.22); } .implementation-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -16px; z-index: 3; width: 10px; height: 10px; border-right: 2px solid #31A8F7; border-top: 2px solid #31A8F7; transform: translateY(-50%) rotate(45deg); } .implementation-step--diagnosis { --step-color: #087CEB; --step-soft-color: #E6F3FF; } .implementation-step--preparation { --step-color: #20B486; --step-soft-color: #E3F8F1; } .implementation-step--production { --step-color: #FF6B1A; --step-soft-color: #FFF0E6; } .implementation-step__number { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; border-radius: 50%; background-color: var(--step-color); color: #FFFFFF; font-size: 16px; font-weight: 800; } .implementation-step__icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background-color: var(--step-soft-color); color: var(--step-color); } .implementation-step__icon svg { width: 26px; height: 26px; } .implementation-step__title { margin: 0; color: #102A43; font-size: 15px; line-height: 1.25; font-weight: 800; } .implementation-step__description { margin: 7px 0 0; color: #627D98; font-size: 12px; line-height: 1.45; } @keyframes spPreviewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1250px) { .product-showcase__workspace { gap: 22px; grid-template-columns: minmax(240px, 260px) minmax(0, 1fr); } .product-app { grid-template-columns: 148px minmax(0, 1fr); } } @media (max-width: 1099px) { .product-showcase__workspace { gap: 20px; grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); } .product-showcase__copy .product-tabs { width: 250px; } .product-preview { min-height: 420px; padding: 16px 6px; } .implementation__header { align-items: flex-start; } .implementation__steps { gap: 15px; } .implementation-step { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 18px 16px; } .implementation-step__icon { display: none; } .implementation-step:not(:last-child)::after { right: -12px; width: 8px; height: 8px; } } @media (max-width: 767px) { .product-showcase__container, .implementation__container { width: min(calc(100% - 32px), 1210px); } .product-showcase__container { padding: 56px 0 28px; } .product-showcase__workspace { display: grid; grid-template-columns: 1fr; gap: 22px; } .product-showcase__copy .product-tabs { width: auto; max-width: 320px; margin-top: 28px; margin-bottom: 0; } .product-tabs { margin-bottom: 0; } .product-tab { min-height: 52px; } .product-tab__chevron { display: grid; } .product-preview { min-height: 0; padding: 8px 0 12px; } .product-preview__image { width: 100%; max-width: none; height: auto; max-height: none; } .product-app { grid-template-columns: 1fr; aspect-ratio: auto; min-height: 420px; } .product-app__sidebar { display: none; } .product-app__badges { display: none; } .implementation__header { display: block; } .implementation__button { margin-top: 25px; } .implementation__steps { grid-template-columns: 1fr; gap: 16px; } .implementation-step { grid-template-columns: auto auto minmax(0, 1fr); } .implementation-step__icon { display: grid; } .implementation-step::after, .implementation-step:not(:last-child)::after { display: none; } } @media (max-width: 389px) { .product-app__tabs { gap: 10px; font-size: 11px; } .product-app__table { font-size: 10.5px; } } @media (prefers-reduced-motion: reduce) { .implementation-step, .implementation__button { transition: none; animation: none; } .implementation-step:hover, .implementation__button:hover, .implementation__button:focus-visible { transform: none; } } /* assets/css/landing2.css */ /* ========================================================================== SystemPort — /landing2 BRUTALISTA "DOSSIÊ TÉCNICO": a página é um documento. Capa tipográfica, sumário, ficha de especificações, catálogo expansível, carimbos, fita adesiva, marquees. Zero gradiente, zero border-radius. ========================================================================== */ #bru-page { --b-ink: #0b0b31; --b-paper: #f4f1ea; --b-blue: #1976d2; --b-mono: 'Courier New', Courier, monospace; --b-border: 3px solid var(--b-ink); background: var(--b-paper); color: var(--b-ink); overflow-x: clip; } #bru-page ::selection { background: var(--b-blue); color: #fff; } #bru-page h1, #bru-page h2, #bru-page h3 { color: var(--b-ink); text-transform: uppercase; } /* ========================================================================== CAPA ========================================================================== */ .bru-cover { position: relative; min-height: 100vh; display: flex; flex-direction: column; border-bottom: var(--b-border); padding-top: var(--sp-nav-height); background: repeating-linear-gradient(0deg, transparent 0 55px, rgba(11, 11, 49, 0.06) 55px 56px), repeating-linear-gradient(90deg, transparent 0 55px, rgba(11, 11, 49, 0.06) 55px 56px), var(--b-paper); } /* régua lateral vertical */ .bru-cover-rail { position: absolute; top: var(--sp-nav-height); bottom: 0; left: 0; width: 44px; border-right: var(--b-border); overflow: hidden; } .bru-cover-rail span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; font-family: var(--b-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--b-ink); } .bru-cover-main { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 48px 6vw 48px calc(44px + 6vw); } .bru-cover-meta { display: flex; flex-wrap: wrap; gap: 10px 36px; font-family: var(--b-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 28px; } .bru-cover-meta span::before { content: '■ '; color: var(--b-blue); } .bru-cover-title { display: flex; flex-direction: column; font-size: clamp(3.4rem, 12.5vw, 11rem) !important; line-height: 0.92 !important; font-weight: 700 !important; letter-spacing: -0.02em; margin: 0 !important; } .bru-cover-title .is-outline { color: transparent; -webkit-text-stroke: 3px var(--b-blue); } .bru-cover-title em { font-style: normal; font-size: 0.25em; vertical-align: super; color: var(--b-blue); } /* carimbo girado */ .bru-cover-stamp { position: absolute; right: 7vw; top: 18%; font-family: var(--b-mono); font-size: clamp(14px, 2vw, 22px); font-weight: 700; letter-spacing: 0.14em; text-align: center; line-height: 1.5; color: var(--b-blue); border: 4px double var(--b-blue); padding: 18px 22px; transform: rotate(12deg); opacity: 0.85; } /* sumário */ .bru-index { display: grid; grid-template-columns: repeat(6, 1fr); border-top: var(--b-border); margin-left: 44px; } .bru-index a { font-family: var(--b-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--b-ink); text-decoration: none; padding: 20px 16px; border-right: var(--b-border); transition: background 0.12s ease, color 0.12s ease; } .bru-index a:last-child { border-right: none; } .bru-index a b { display: block; font-size: 22px; color: var(--b-blue); margin-bottom: 4px; } .bru-index a:hover { background: var(--b-ink); color: #fff; } /* ========================================================================== TICKER ========================================================================== */ .bru-ticker { overflow: hidden; background: var(--b-ink); border-bottom: var(--b-border); padding: 14px 0; } .bru-ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: bru-marquee 24s linear infinite; } .bru-ticker-track span { font-family: var(--b-mono); font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--b-paper); white-space: nowrap; } .bru-ticker-track em { font-style: normal; color: var(--b-blue); font-weight: 700; } @keyframes bru-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== ESTRUTURA DE "DOCUMENTO" ========================================================================== */ .bru-doc { border-bottom: var(--b-border); background: var(--b-paper); } .bru-doc-dark { background: var(--b-ink); } .bru-doc-dark h2, .bru-doc-dark h3, .bru-doc-dark p { color: var(--b-paper) !important; } .bru-doc-blue { background: var(--b-blue); } .bru-doc-blue h2, .bru-doc-blue h3, .bru-doc-blue p { color: #fff !important; } /* cabeçalho de seção estilo timbre */ .bru-doc-head { display: flex; align-items: stretch; border-bottom: var(--b-border); } .bru-doc-dark .bru-doc-head, .bru-doc-blue .bru-doc-head { border-bottom-color: currentColor; border-bottom: 3px solid rgba(255,255,255,0.9); } .bru-doc-num { font-family: var(--b-mono); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; padding: 18px 26px; border-right: var(--b-border); color: var(--b-blue); display: flex; align-items: center; } .bru-doc-dark .bru-doc-num, .bru-doc-blue .bru-doc-num { border-right: 3px solid rgba(255,255,255,0.9); } .bru-doc-blue .bru-doc-num { color: var(--b-ink); } .bru-doc-head h2 { flex: 1; display: flex; align-items: center; font-size: clamp(1.6rem, 4.2vw, 3rem) !important; margin: 0 !important; padding: 18px 26px; letter-spacing: -0.01em; } .bru-doc-ref { display: flex; align-items: center; font-family: var(--b-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; padding: 18px 26px; border-left: var(--b-border); color: inherit; } .bru-doc-dark .bru-doc-ref, .bru-doc-blue .bru-doc-ref { border-left: 3px solid rgba(255,255,255,0.9); color: var(--b-paper); } /* ========================================================================== 00 — MANIFESTO ========================================================================== */ .bru-manifesto { padding: 72px 6vw; max-width: 1100px; } .bru-manifesto-lead { font-family: var(--sp-font); font-size: clamp(1.8rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1.15; text-transform: uppercase; color: var(--b-ink) !important; margin-bottom: 36px; } .bru-manifesto-lead mark { background: var(--b-blue); color: #fff; padding: 0 10px; } .bru-manifesto-body { font-size: 17px; line-height: 1.85; max-width: 720px; margin-bottom: 40px; border-left: 6px solid var(--b-blue); padding-left: 20px; color: var(--b-ink) !important; } .bru-manifesto-actions { display: flex; flex-wrap: wrap; gap: 18px; } /* botões */ .bru-btn { display: inline-block; font-family: var(--b-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; color: #fff !important; background: var(--b-ink); border: var(--b-border); box-shadow: 8px 8px 0 var(--b-blue); padding: 18px 28px; transition: transform 0.12s ease, box-shadow 0.12s ease; } .bru-btn:hover { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--b-blue); } .bru-btn-ghost { background: var(--b-paper); color: var(--b-ink) !important; box-shadow: 8px 8px 0 var(--b-ink); } .bru-btn-ghost:hover { box-shadow: 2px 2px 0 var(--b-ink); } /* ========================================================================== 01 — ESPECIFICAÇÕES (ficha técnica) ========================================================================== */ .bru-spec-table { display: flex; flex-direction: column; } .bru-spec-row { display: grid; grid-template-columns: 100px 320px 1fr; border-bottom: 3px solid rgba(255, 255, 255, 0.9); transition: background 0.12s ease; } .bru-spec-row:hover { background: rgba(25, 118, 210, 0.18); } .bru-spec-id { display: flex; align-items: center; justify-content: center; font-family: var(--b-mono); font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 700; color: transparent; -webkit-text-stroke: 2px var(--b-blue); border-right: 3px solid rgba(255, 255, 255, 0.9); padding: 28px 0; } .bru-spec-name { display: flex; align-items: center; padding: 28px 26px; border-right: 3px solid rgba(255, 255, 255, 0.9); } .bru-spec-name h3 { font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important; line-height: 1.2 !important; margin: 0 !important; } .bru-spec-items { list-style: none; margin: 0; padding: 22px 26px; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; align-content: center; } .bru-spec-items li { font-family: var(--b-mono); font-size: 12.5px; font-weight: 600; color: var(--b-paper); border: 1.5px solid rgba(244, 241, 234, 0.5); padding: 7px 12px; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .bru-spec-items li:hover { background: var(--b-paper); color: var(--b-ink); border-color: var(--b-paper); } .bru-spec-cta { display: block; text-align: center; font-family: var(--b-mono); font-size: clamp(1.1rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: 0.06em; color: #fff !important; background: var(--b-blue); text-decoration: none; padding: 26px; transition: background 0.12s ease, letter-spacing 0.2s ease; } .bru-spec-cta:hover { background: var(--b-paper); color: var(--b-ink) !important; letter-spacing: 0.12em; } /* ========================================================================== 02 — CATÁLOGO (details/summary) ========================================================================== */ .bru-catalog details { border-bottom: var(--b-border); } .bru-catalog summary { display: grid; grid-template-columns: 110px 1fr 80px; align-items: center; cursor: pointer; list-style: none; user-select: none; transition: background 0.12s ease; } .bru-catalog summary::-webkit-details-marker { display: none; } .bru-catalog summary:hover { background: rgba(25, 118, 210, 0.1); } .bru-catalog details[open] summary { background: var(--b-ink); } .bru-catalog details[open] summary .bru-cat-name { color: var(--b-paper); } .bru-cat-num { font-family: var(--b-mono); font-size: 15px; font-weight: 700; color: var(--b-blue); padding: 26px 0 26px 26px; } .bru-cat-name { font-family: var(--sp-font); font-size: clamp(1.3rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--b-ink); padding: 22px 0; transition: color 0.12s ease; } .bru-cat-toggle { font-family: var(--b-mono); font-size: 34px; font-weight: 700; color: var(--b-blue); text-align: center; transition: transform 0.2s ease; } .bru-catalog details[open] .bru-cat-toggle { transform: rotate(45deg); } .bru-cat-body { padding: 28px 26px 36px 110px; border-top: 2px dashed rgba(11, 11, 49, 0.35); } .bru-cat-body p { max-width: 680px; font-size: 16px; line-height: 1.8; margin-bottom: 18px; color: var(--b-ink) !important; } .bru-cat-body a { font-family: var(--b-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; color: var(--b-ink) !important; text-decoration: none; border-bottom: 3px solid var(--b-blue); padding-bottom: 3px; transition: background 0.12s ease, color 0.12s ease; } .bru-cat-body a:hover { background: var(--b-blue); color: #fff !important; } /* ========================================================================== 03 — PROCESSO ========================================================================== */ .bru-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); } .bru-step { padding: 44px 38px; border-right: 3px solid rgba(255, 255, 255, 0.85); border-bottom: 3px solid rgba(255, 255, 255, 0.85); transition: background 0.12s ease; } .bru-step:nth-child(2n) { border-right: none; } .bru-step:nth-child(n+3) { border-bottom: none; } .bru-step:hover { background: rgba(11, 11, 49, 0.18); } .bru-step-num { display: inline-block; font-family: var(--b-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--b-blue); background: var(--b-paper); padding: 6px 12px; margin-bottom: 18px; } .bru-step h3 { font-size: clamp(1.4rem, 2.6vw, 2rem) !important; margin-bottom: 14px !important; } .bru-step p { font-size: 14.5px; line-height: 1.8; margin: 0; } .bru-step-list { list-style: none; margin: 18px 0 0; padding: 0; } .bru-step-list li { font-family: var(--b-mono); font-size: 13px; font-weight: 600; color: #fff; padding: 7px 0 7px 24px; position: relative; border-bottom: 1px dashed rgba(255, 255, 255, 0.4); } .bru-step-list li::before { content: '>'; position: absolute; left: 0; color: var(--b-ink); font-weight: 700; } /* ========================================================================== 04 — EVIDÊNCIAS (documentos colados) ========================================================================== */ .bru-evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 36px; padding: 72px 6vw; } .bru-proof { position: relative; margin: 0; background: #fff; border: var(--b-border); box-shadow: 8px 8px 0 var(--b-ink); padding: 34px 26px 26px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .bru-proof:nth-child(3n+1) { transform: rotate(-1.4deg); } .bru-proof:nth-child(3n+2) { transform: rotate(1deg); } .bru-proof:nth-child(3n) { transform: rotate(-0.6deg); } .bru-proof:hover { transform: rotate(0deg) translate(2px, 2px); box-shadow: 4px 4px 0 var(--b-blue); z-index: 2; } /* fita adesiva */ .bru-proof-tape { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 110px; height: 26px; background: rgba(25, 118, 210, 0.35); border-left: 1px dashed rgba(11, 11, 49, 0.3); border-right: 1px dashed rgba(11, 11, 49, 0.3); } .bru-proof-stars { display: block; color: var(--b-blue); font-size: 17px; letter-spacing: 4px; margin-bottom: 14px; } .bru-proof blockquote { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--b-ink); } .bru-proof figcaption { font-family: var(--b-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; } .bru-proof-stamp { position: absolute; right: 14px; bottom: 14px; font-family: var(--b-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--b-blue); border: 2px double var(--b-blue); padding: 4px 8px; transform: rotate(-8deg); opacity: 0.8; } /* ========================================================================== 05 — CONTATO ========================================================================== */ .bru-contact { display: grid; grid-template-columns: 1fr 1fr; } .bru-contact-info { display: flex; flex-direction: column; justify-content: center; padding: 56px 6vw; gap: 28px; border-right: 3px solid rgba(255, 255, 255, 0.9); } .bru-contact-line span { display: block; font-family: var(--b-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--b-blue); margin-bottom: 6px; } .bru-contact-line strong { font-size: clamp(1.1rem, 2.2vw, 1.6rem); color: var(--b-paper); line-height: 1.3; } .bru-contact-cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: 56px 6vw; font-family: var(--sp-font); font-size: clamp(1.8rem, 4.5vw, 3.4rem); font-weight: 700; line-height: 1.05; text-transform: uppercase; text-decoration: none; background: var(--b-blue); color: #fff !important; transition: background 0.15s ease, color 0.15s ease; } .bru-contact-cta em { font-style: normal; font-size: 1.2em; transition: transform 0.15s ease; } .bru-contact-cta:hover { background: var(--b-paper); color: var(--b-ink) !important; } .bru-contact-cta:hover em { transform: translateX(18px); } /* ========================================================================== RODAPÉ MARQUEE ========================================================================== */ .bru-foot { overflow: hidden; background: var(--b-paper); padding: 10px 0; } .bru-foot-track { display: flex; gap: 48px; width: max-content; animation: bru-marquee 30s linear infinite; } .bru-foot-track span { font-family: var(--sp-font); font-size: clamp(3rem, 9vw, 7rem); font-weight: 700; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(11, 11, 49, 0.35); transition: color 0.2s ease; } .bru-foot-track span:hover { color: var(--b-blue); -webkit-text-stroke-color: var(--b-blue); } /* ========================================================================== RESPONSIVO ========================================================================== */ @media (max-width: 1100px) { .bru-index { grid-template-columns: repeat(3, 1fr); } .bru-index a:nth-child(3) { border-right: none; } .bru-index a:nth-child(-n+3) { border-bottom: var(--b-border); } .bru-spec-row { grid-template-columns: 80px 1fr; } .bru-spec-items { grid-column: 1 / -1; border-top: 2px dashed rgba(244, 241, 234, 0.4); } } @media (max-width: 900px) { .bru-evidence { grid-template-columns: 1fr 1fr; } .bru-contact { grid-template-columns: 1fr; } .bru-contact-info { border-right: none; border-bottom: 3px solid rgba(255, 255, 255, 0.9); } } @media (max-width: 640px) { .bru-cover-rail { display: none; } .bru-cover-main { padding-left: 6vw; } .bru-index { margin-left: 0; grid-template-columns: 1fr 1fr; } .bru-index a { border-bottom: var(--b-border); } .bru-index a:nth-child(odd) { border-right: var(--b-border); } .bru-index a:nth-child(even) { border-right: none; } .bru-index a:nth-child(n+5) { border-bottom: none; } .bru-cover-stamp { display: none; } .bru-doc-head { flex-wrap: wrap; } .bru-doc-ref { display: none; } .bru-steps { grid-template-columns: 1fr; } .bru-step { border-right: none !important; border-bottom: 3px solid rgba(255,255,255,0.85) !important; } .bru-step:last-child { border-bottom: none !important; } .bru-evidence { grid-template-columns: 1fr; padding: 56px 6vw; } .bru-catalog summary { grid-template-columns: 70px 1fr 56px; } .bru-cat-num { padding-left: 16px; } .bru-cat-body { padding: 24px 16px 32px; } .bru-btn { width: 100%; text-align: center; } } /* assets/css/sp-home-close.css */ /* SystemPort home — depoimentos e CTA final */ .testimonials, .testimonials *:not(.testimonial-card__quote-mark), .final-cta, .final-cta * { font-family: Inter, "Segoe UI", "Segoe UI Variable", sans-serif !important; box-sizing: border-box; } .testimonials { position: relative; overflow: visible; overflow-x: clip; background: radial-gradient( circle at 82% 0%, rgba(8, 124, 235, 0.05), transparent 36% ), linear-gradient( 180deg, #F7FBFE 0%, #FFFFFF 48%, #F6FAFD 100% ); } .testimonials__container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "intro more" "cards cards"; align-items: start; gap: 16px 40px; width: min(calc(100% - 60px), 1210px); margin-inline: auto; padding: 64px 0 48px; } .testimonials__intro { grid-area: intro; min-width: 0; } .testimonials__eyebrow { margin: 0 0 14px; color: #537391; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .testimonials__eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: middle; border-radius: 999px; background-color: #087CEB; } .testimonials__title { max-width: 560px; margin: 0; color: #082B4C; font-size: clamp(32px, 3vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; } .testimonials__description { max-width: 520px; margin: 16px 0 0; color: #627D98; font-size: 15px; line-height: 1.6; } .testimonials__more { grid-area: more; display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: #087CEB !important; font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: color 180ms ease, transform 180ms ease; } .testimonials__more:hover, .testimonials__more:focus-visible { color: #0B5ED7 !important; transform: translateX(3px); } .testimonials__more:focus-visible { outline: 3px solid rgba(8, 124, 235, 0.45) !important; outline-offset: 4px !important; } .testimonials__grid { display: grid; grid-area: cards; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 20px; margin-top: 20px; } .testimonial-card { display: flex; min-height: 170px; flex-direction: column; padding: 22px 22px 20px; border: 1px solid rgba(8, 43, 76, 0.08); border-radius: 18px; background-color: #FFFFFF; box-shadow: 0 16px 34px rgba(8, 43, 76, 0.08); transition: transform 200ms ease, box-shadow 200ms ease; } .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(8, 43, 76, 0.12); } .testimonial-card__quote-mark { display: block; color: #087CEB; font-family: Georgia, "Times New Roman", serif !important; font-size: 34px; font-weight: 700; line-height: 0.7; } .testimonial-card__quote, .testimonial-card blockquote { overflow: visible !important; background: transparent !important; padding: 0 !important; margin: 8px 0 0 !important; position: static !important; text-align: left !important; z-index: auto !important; } .testimonial-card__quote::before, .testimonial-card__quote::after, .testimonial-card blockquote::before, .testimonial-card blockquote::after { content: none !important; display: none !important; } .testimonial-card__quote p, .testimonial-card blockquote p { margin: 0 !important; color: #334E68 !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: normal !important; } .testimonial-card__customer { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; } .testimonial-card__icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; background-color: #E6F3FF; color: #087CEB; } .testimonial-card__company, .testimonial-card__segment { display: block; } .testimonial-card__company { color: #082B4C; font-size: 14px; font-weight: 800; } .testimonial-card__segment { margin-top: 3px; color: #627D98; font-size: 12px; font-weight: 600; } .final-cta { position: relative; overflow: visible; overflow-x: clip; background: radial-gradient( circle at 88% 50%, rgba(20, 149, 255, 0.36), transparent 34% ), linear-gradient( 110deg, #041B33 0%, #06365F 55%, #087CEB 140% ); color: #FFFFFF; } .final-cta__container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.4fr) minmax(120px, 0.22fr); align-items: center; gap: 36px; width: min(calc(100% - 60px), 1210px); margin-inline: auto; padding: 68px 0 72px; } .final-cta__title { margin: 0; color: #FFFFFF; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; } .final-cta__description { max-width: 460px; margin: 18px 0 0; color: rgba(255, 255, 255, 0.76); font-size: 15px; line-height: 1.65; } .final-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; } .final-cta__button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .final-cta__button--primary { background-color: #FF6B1A; color: #FFFFFF !important; box-shadow: 0 12px 28px rgba(255, 107, 26, 0.28); } .final-cta__button--primary:hover, .final-cta__button--primary:focus-visible { background-color: #ff7d38; color: #FFFFFF !important; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255, 107, 26, 0.36); } .final-cta__button--secondary { border: 1px solid rgba(255, 255, 255, 0.45); background-color: transparent; color: #FFFFFF !important; } .final-cta__button--secondary:hover, .final-cta__button--secondary:focus-visible { border-color: rgba(147, 220, 255, 0.9); background-color: rgba(255, 255, 255, 0.08); color: #FFFFFF !important; transform: translateY(-2px); } .final-cta__button:focus-visible { outline: 3px solid rgba(67, 185, 255, 0.55) !important; outline-offset: 4px !important; } .final-cta__play { display: inline-flex; width: 22px; height: 22px; } .final-cta__benefits { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 28px 0 0; padding: 0; list-style: none; } .final-cta__benefits li { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.88); font-size: 13px; font-weight: 600; } .final-cta__benefit-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background-color: rgba(67, 185, 255, 0.22); color: #93DCFF; } .final-cta__chart { position: absolute; right: 20px; top: 0; bottom: 0; z-index: 0; display: block; width: clamp(360px, 40vw, 650px); height: 100%; object-fit: contain; object-position: right center; pointer-events: none; opacity: 0.85; } @media (max-width: 1099px) { .testimonials__container { gap: 16px 28px; } .testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .final-cta__container { grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr); gap: 28px; padding-right: min(22vw, 180px); } } @media (max-width: 767px) { .testimonials__container { display: grid; grid-template-columns: 1fr; grid-template-areas: "intro" "cards" "more"; width: min(calc(100% - 32px), 1210px); padding: 56px 0 36px; } .testimonials__more { margin: 8px 0 0; justify-self: start; } .testimonials__grid { grid-template-columns: 1fr; margin-top: 8px; } .final-cta__container { display: grid; grid-template-columns: 1fr; gap: 28px; width: min(calc(100% - 32px), 1210px); padding: 48px 0 52px; text-align: center; } .final-cta__title br { display: none; } .final-cta__description { margin-inline: auto; } .final-cta__buttons { flex-direction: column; } .final-cta__button { width: 100%; } .final-cta__benefits { justify-content: center; gap: 14px 20px; } .final-cta__chart { display: none; } } @media (prefers-reduced-motion: reduce) { .testimonial-card, .testimonials__more, .final-cta__button { transition: none; } .testimonial-card:hover, .testimonials__more:hover, .testimonials__more:focus-visible, .final-cta__button:hover, .final-cta__button:focus-visible { transform: none; } } /* assets/css/sp-planos.css */ /* Página /planos — visual comercial alinhado à home, sem copiar o herói da inicial */ .sc-pdf:has(.sp-plans) { --plans-navy: #062b4f; --plans-navy-dark: #041f3a; --plans-navy-mid: #073b6d; --plans-blue: #008ef4; --plans-blue-bright: #0a95ff; --plans-blue-soft: #eaf6ff; --plans-ice: #f5faff; --plans-white: #ffffff; --plans-orange: #ff6b20; --plans-orange-hover: #ed5712; --plans-green: #20b486; --plans-text: #062b4f; --plans-muted: #63778c; --plans-border: #dce9f4; --plans-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --plans-wrap: 1280px; --plans-gutter: 32px; background: var(--plans-white); } .sc-pdf:has(.sp-plans), .sc-pdf:has(.sp-plans) h1, .sc-pdf:has(.sp-plans) h2, .sc-pdf:has(.sp-plans) h3, .sc-pdf:has(.sp-plans) h4, .sc-pdf:has(.sp-plans) p, .sc-pdf:has(.sp-plans) a, .sc-pdf:has(.sp-plans) li, .sc-pdf:has(.sp-plans) span, .sc-pdf:has(.sp-plans) button, .sc-pdf:has(.sp-plans) td, .sc-pdf:has(.sp-plans) th, .sc-pdf:has(.sp-plans) strong, .sc-pdf:has(.sp-plans) small { font-family: var(--plans-font) !important; } .sc-pdf:has(.sp-plans) .sp-nav-item > a.sp-nav-link.active::before, .sc-pdf:has(.sp-plans) .sp-nav-item > a.sp-nav-link[aria-current="page"]::before { transform: scaleX(1); } .sp-plans { color: var(--plans-text); background: var(--plans-white); } .sp-plans *, .sp-plans *::before, .sp-plans *::after { box-sizing: border-box; } .sp-plans-wrap { width: min(calc(100% - (var(--plans-gutter) * 2)), var(--plans-wrap)); margin-inline: auto; } .sp-plans-eyebrow { margin: 0 0 12px; color: var(--plans-blue); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .sp-plans-eyebrow-light { color: rgba(234, 246, 255, 0.86); } .sp-plans-intro { max-width: 720px; margin: 0 0 36px; } .sp-plans-intro.is-center { margin-inline: auto; text-align: center; } .sp-plans-intro h2, .sp-plans-compare-head h2, .sp-plans-consult h2, .sp-plans-final h2, .sp-plans-faq h2 { margin: 0; color: var(--plans-navy) !important; font-size: clamp(30px, 3.4vw, 38px) !important; font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.15 !important; } .sp-plans-intro p { margin: 12px 0 0; color: var(--plans-muted) !important; font-size: 16px !important; line-height: 1.6 !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sp-plans-btn-orange, .sp-plans-card-btn, .sp-plans-btn-ghost, .sp-plans-table-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none !important; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, color 200ms ease; } .sp-plans-btn-orange, .sp-plans-card.is-complete .sp-plans-card-btn { background: var(--plans-orange); border: 1px solid var(--plans-orange); color: #fff !important; box-shadow: 0 10px 22px rgba(255, 107, 32, 0.24); } .sp-plans-btn-orange:hover, .sp-plans-btn-orange:focus-visible, .sp-plans-card.is-complete .sp-plans-card-btn:hover { background: var(--plans-orange-hover); border-color: var(--plans-orange-hover); color: #fff !important; transform: translateY(-1px); } .sp-plans-btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.42); color: #fff !important; } .sp-plans-btn-ghost:hover, .sp-plans-btn-ghost:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.7); color: #fff !important; } /* -------------------------------------------------------------------------- */ /* Hero compacto */ /* -------------------------------------------------------------------------- */ .sp-plans-hero { position: relative; overflow: hidden; min-height: 0; padding: calc(var(--sp-hero-nav-h, 78px) + 16px) 0 28px; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(10, 149, 255, 0.28), transparent 32%), linear-gradient(118deg, #041f3a 0%, #062b4f 48%, #073b6d 100%); } .sp-plans-hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 80%, rgba(0, 142, 244, 0.16), transparent 28%), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%); } .sp-plans-hero-inner { position: relative; z-index: 1; max-width: 860px; text-align: center; } .sp-plans-breadcrumb { margin-bottom: 18px; } .sp-plans-breadcrumb ol { display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; color: rgba(234, 246, 255, 0.7); font-size: 13px; } .sp-plans-breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.7; } .sp-plans-breadcrumb a { color: rgba(234, 246, 255, 0.78) !important; text-decoration: none; } .sp-plans-breadcrumb a:hover, .sp-plans-breadcrumb a:focus-visible { color: #fff !important; } .sp-plans-hero h1 { margin: 0 0 12px !important; color: #fff !important; font-size: clamp(32px, 4.2vw, 50px) !important; font-weight: 800 !important; letter-spacing: -0.035em; line-height: 1.12 !important; } .sp-plans-hero-lead { margin: 0 auto 22px !important; max-width: 640px; color: rgba(234, 246, 255, 0.86) !important; font-size: 17px !important; line-height: 1.55 !important; } .sp-plans-hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 0; padding: 0; list-style: none; } .sp-plans-hero-points li { display: inline-flex; align-items: center; gap: 8px; color: rgba(245, 250, 255, 0.92) !important; font-size: 13px; font-weight: 600; } .sp-plans-check-badge { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: rgba(10, 149, 255, 0.22); color: #9ed6ff; } /* -------------------------------------------------------------------------- */ /* Cards */ /* -------------------------------------------------------------------------- */ .sp-plans-section-cards { padding: 88px 0 28px; background: linear-gradient(180deg, #f5faff 0%, #fff 42%); } .sp-plans-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; } .sp-plans-card { position: relative; display: flex; min-width: 0; height: 100%; border: 1px solid var(--plans-border); border-radius: 16px; background: var(--plans-white); box-shadow: 0 10px 24px rgba(6, 43, 79, 0.05); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .sp-plans-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(6, 43, 79, 0.08); } .sp-plans-card-ribbon { position: absolute; top: -11px; left: 50%; z-index: 1; padding: 4px 12px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); } .sp-plans-card.is-recommended { border-color: #7ec8ff; background: linear-gradient(180deg, #f3f9ff 0%, #fff 36%); box-shadow: 0 14px 28px rgba(0, 142, 244, 0.12); } .sp-plans-card.is-recommended .sp-plans-card-ribbon { background: var(--plans-blue); } .sp-plans-card.is-complete { background: linear-gradient(180deg, #073b6d 0%, #041f3a 100%); border-color: #0a3d6f; box-shadow: 0 16px 32px rgba(4, 31, 58, 0.28); } .sp-plans-card.is-complete .sp-plans-card-ribbon { background: var(--plans-orange); } .sp-plans-card-body { display: flex; flex-direction: column; width: 100%; padding: 26px 18px 20px; } .sp-plans-card-icon { display: grid; width: 42px; height: 42px; margin-bottom: 14px; place-items: center; border-radius: 50%; background: var(--plans-blue-soft); color: var(--plans-blue); } .sp-plans-card-icon svg { width: 22px; height: 22px; } .sp-plans-card.is-complete .sp-plans-card-icon { background: rgba(255, 107, 32, 0.16); color: #ffb08a; } .sp-plans-card h3 { margin: 0 0 10px !important; color: var(--plans-navy) !important; font-size: clamp(17px, 1.3vw, 21px) !important; font-weight: 800 !important; line-height: 1.25 !important; } .sp-plans-card.is-complete h3, .sp-plans-card.is-complete .sp-plans-card-ideal, .sp-plans-card.is-complete .sp-plans-card-list li, .sp-plans-card.is-complete .sp-plans-card-link { color: #fff !important; } .sp-plans-card-label { margin: 0 0 4px !important; color: var(--plans-muted) !important; font-size: 11px !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sp-plans-card.is-complete .sp-plans-card-label, .sp-plans-card.is-complete .sp-plans-card-note { color: rgba(196, 224, 247, 0.78) !important; } .sp-plans-card-ideal { margin: 0 0 16px !important; color: var(--plans-muted) !important; font-size: 13px !important; line-height: 1.45 !important; } .sp-plans-card-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .sp-plans-card-list li { display: flex; align-items: flex-start; gap: 8px; color: var(--plans-text) !important; font-size: 13px; line-height: 1.4; } .sp-plans-card-check { display: grid; width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; place-items: center; color: var(--plans-blue); } .sp-plans-card.is-complete .sp-plans-card-check { color: #8fd0ff; } .sp-plans-card-footer { display: flex; flex-direction: column; align-items: center; margin-top: auto; padding-top: 18px; } .sp-plans-card-link { margin-bottom: 12px; color: var(--plans-blue) !important; font-size: 13px; font-weight: 700; text-decoration: none; } .sp-plans-card-link:hover, .sp-plans-card-link:focus-visible { text-decoration: underline; } .sp-plans-card-btn { width: 100%; background: #fff; border: 1px solid #cfe4f4; color: var(--plans-navy) !important; box-shadow: none; } .sp-plans-card-btn:hover, .sp-plans-card-btn:focus-visible { border-color: var(--plans-blue); color: var(--plans-navy) !important; transform: translateY(-1px); } .sp-plans-card.is-recommended .sp-plans-card-btn { background: var(--plans-blue); border-color: var(--plans-blue); color: #fff !important; } .sp-plans-card.is-recommended .sp-plans-card-btn:hover, .sp-plans-card.is-recommended .sp-plans-card-btn:focus-visible { background: #007ad4; border-color: #007ad4; color: #fff !important; } .sp-plans-card-note { margin: 10px 0 0 !important; color: var(--plans-muted) !important; font-size: 11px !important; line-height: 1.3 !important; } /* -------------------------------------------------------------------------- */ /* Faixa de confiança */ /* -------------------------------------------------------------------------- */ .sp-plans-strip { padding: 18px 0 72px; background: #fff; } .sp-plans-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .sp-plans-strip-grid li { display: flex; gap: 12px; padding: 18px 16px; border: 1px solid var(--plans-border); border-radius: 14px; background: #fbfdff; } .sp-plans-strip-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--plans-blue-soft); color: var(--plans-blue); } .sp-plans-strip-icon svg { width: 20px; height: 20px; } .sp-plans-strip-grid strong { display: block; margin-bottom: 4px; color: var(--plans-navy); font-size: 14px; } .sp-plans-strip-grid p { margin: 0 !important; color: var(--plans-muted) !important; font-size: 13px !important; line-height: 1.4 !important; } /* -------------------------------------------------------------------------- */ /* Finder */ /* -------------------------------------------------------------------------- */ .sp-plans-finder { padding: 88px 0; background: radial-gradient(circle at 80% 0%, rgba(10, 149, 255, 0.08), transparent 28%), #eaf6ff; } .sp-plans-finder-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .sp-plans-finder-card { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 16px 18px; border: 1px solid var(--plans-border); border-radius: 14px; background: #fff; color: var(--plans-navy); text-align: left; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; } .sp-plans-finder-card:hover, .sp-plans-finder-card:focus-visible { background: #f3f9ff; border-color: #b7d9f4; transform: translateY(-2px); } .sp-plans-finder-card.is-selected { border-color: var(--plans-blue); background: #f0f8ff; box-shadow: 0 0 0 3px rgba(0, 142, 244, 0.12); } .sp-plans-finder-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--plans-blue-soft); color: var(--plans-blue); } .sp-plans-finder-icon svg { width: 18px; height: 18px; } .sp-plans-finder-card span:nth-child(2) { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.3; } .sp-plans-finder-arrow { color: var(--plans-blue); font-size: 16px; } .sp-plans-finder-action { display: flex; justify-content: center; margin-top: 28px; } /* -------------------------------------------------------------------------- */ /* Detalhes / abas / fluxo */ /* -------------------------------------------------------------------------- */ .sp-plans-details { padding: 92px 0; background: #fff; } .sp-plans-tabs { display: flex; gap: 0; margin-bottom: 28px; overflow-x: auto; border-bottom: 1px solid var(--plans-border); scrollbar-width: thin; } .sp-plans-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--plans-muted); font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; } .sp-plans-tab.is-active { color: var(--plans-navy); border-bottom-color: var(--plans-blue); background: rgba(234, 246, 255, 0.5); } .sp-plans-tab-num { color: var(--plans-blue); font-size: 12px; letter-spacing: 0.04em; } .sp-plans-panel { animation: sp-plans-fade 220ms ease; } .sp-plans-panel-grid { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: 36px; align-items: center; } .sp-plans-panel-num { display: block; margin-bottom: 6px; color: var(--plans-blue); font-size: 28px; font-weight: 800; letter-spacing: -0.04em; } .sp-plans-panel-copy h3 { margin: 0 0 14px !important; color: var(--plans-navy) !important; font-size: clamp(26px, 2.6vw, 34px) !important; font-weight: 800 !important; line-height: 1.2 !important; } .sp-plans-panel-text { margin: 0 0 18px !important; color: var(--plans-muted) !important; font-size: 15px !important; line-height: 1.65 !important; } .sp-plans-panel-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .sp-plans-panel-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--plans-text) !important; font-size: 14px; line-height: 1.45; } .sp-plans-panel-list svg { flex: 0 0 auto; margin-top: 2px; color: var(--plans-blue); } .sp-plans-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .sp-plans-flow { display: grid; place-items: center; min-height: 360px; padding: 28px; border: 1px solid var(--plans-border); border-radius: 16px; background: var(--plans-ice); } .sp-plans-flow img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; } @keyframes sp-plans-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- */ /* Tabela */ /* -------------------------------------------------------------------------- */ .sp-plans-compare { padding: 40px 0 96px; background: #fff; } .sp-plans-compare-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .sp-plans-table-hint { display: none; margin: 0 0 10px !important; color: var(--plans-muted) !important; font-size: 13px !important; } /* Tabela sempre aberta: rola com a página, cabeçalho fixo sob a nav */ .sp-plans-table-scroll { border: 1px solid var(--plans-border); border-radius: 16px; background: #fff; } .sp-plans-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; } .sp-plans-table thead th { position: sticky; top: var(--sp-hero-nav-h, 78px); z-index: 2; padding: 16px 12px; background: var(--plans-navy) !important; color: #fff !important; font-size: 14px; font-weight: 700; text-align: center; white-space: nowrap; } .sp-plans-table thead th:first-child { border-top-left-radius: 15px; } .sp-plans-table thead th:last-child { border-top-right-radius: 15px; } .sp-plans-table .is-feature { width: 30%; min-width: 220px; text-align: left; } .sp-plans-table tbody th, .sp-plans-table tbody td, .sp-plans-table tfoot td { padding: 13px 12px; border-top: 1px solid #e8f0f7; background: #fff; color: var(--plans-text); font-size: 15px; text-align: center; vertical-align: middle; } .sp-plans-table tbody th.is-feature { font-weight: 600; text-align: left; } /* Mantém o texto oculto do leitor de tela dentro da célula (senão ele escapa da rolagem lateral) */ .sp-plans-table tbody td { position: relative; } .sp-plans-table tbody td.is-premium, .sp-plans-table tfoot td.is-premium { background: #f3f9ff; } .sp-plans-table tbody td.is-full, .sp-plans-table tfoot td.is-full { background: #e6f2ff; } .sp-plans-table tbody tr:not(.sp-plans-table-group):hover > * { background-color: #eef6fe; } .sp-plans-table tbody tr:not(.sp-plans-table-group):hover > td.is-full { background-color: #dcecfd; } .sp-plans-table thead .is-premium, .sp-plans-table thead .is-full { background: var(--plans-navy) !important; } .sp-plans-table .sp-plans-table-group th { padding: 18px 16px 10px; border-top: 1px solid var(--plans-border); background: var(--plans-ice) !important; color: var(--plans-navy); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; } .sp-plans-table-yes, .sp-plans-table-no { display: inline-grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; vertical-align: middle; } .sp-plans-table-yes { background: var(--plans-blue); color: #fff; box-shadow: 0 3px 8px rgba(0, 142, 244, 0.28); } .sp-plans-table-no { background: #fdeceb; color: #d0453b; } .sp-plans-table-legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; } .sp-plans-table-legend li { display: inline-flex; align-items: center; gap: 8px; color: var(--plans-muted) !important; font-size: 14px; font-weight: 600; } .sp-plans-table-legend .sp-plans-table-yes, .sp-plans-table-legend .sp-plans-table-no { width: 24px; height: 24px; } .sp-plans-table tfoot td { padding: 16px 12px 18px; } .sp-plans-table tfoot td:first-child { border-bottom-left-radius: 15px; } .sp-plans-table tfoot td:last-child { border-bottom-right-radius: 15px; } .sp-plans-table-btn { min-height: 38px; padding: 0 12px; background: transparent; border: 1px solid var(--plans-border); color: var(--plans-navy) !important; font-size: 13px; } .sp-plans-table-btn:hover, .sp-plans-table-btn:focus-visible { border-color: var(--plans-blue); color: var(--plans-navy) !important; } /* -------------------------------------------------------------------------- */ /* Consultoria / FAQ / CTA */ /* -------------------------------------------------------------------------- */ .sp-plans-consult { padding: 56px 0; background: radial-gradient(circle at 88% 30%, rgba(10, 149, 255, 0.18), transparent 26%), linear-gradient(118deg, #041f3a 0%, #062b4f 58%, #073b6d 100%); color: #fff; } .sp-plans-consult-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); gap: 32px; align-items: center; } .sp-plans-consult h2, .sp-plans-final h2 { color: #fff !important; } .sp-plans-consult p, .sp-plans-final p { max-width: 520px; margin: 14px 0 24px !important; color: rgba(234, 246, 255, 0.82) !important; font-size: 16px !important; line-height: 1.6 !important; } .sp-plans-consult-art { display: grid; justify-items: center; gap: 12px; } .sp-plans-consult-bubble { display: grid; width: 88px; height: 88px; place-items: center; border-radius: 50%; background: rgba(10, 149, 255, 0.16); color: #9ed6ff; } .sp-plans-consult-bubble i { font-size: 32px; line-height: 1; } .sp-plans-consult-chip { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #eaf6ff; font-size: 12px; font-weight: 700; } .sp-plans-consult-chip.is-alt { background: rgba(255, 107, 32, 0.14); border-color: rgba(255, 107, 32, 0.28); } .sp-plans-faq { padding: 92px 0; background: var(--plans-ice); } /* Uma lista na ordem do catálogo, em duas colunas por linha: abrir um item não troca os outros de coluna */ .sp-plans-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; } .sp-plans-accordion { border: 1px solid var(--plans-border); border-radius: 12px; background: #fff; } .sp-plans-accordion h3 { margin: 0; } .sp-plans-accordion button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 14px 18px; border: 0; background: transparent; color: var(--plans-navy); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; } .sp-plans-accordion-icon { flex: 0 0 auto; color: var(--plans-blue); font-size: 22px; line-height: 1; } .sp-plans-accordion-panel { padding: 0 18px 16px; } .sp-plans-accordion-panel[hidden], .sp-plans-accordion-panel:not(.is-open) { display: none; } .sp-plans-accordion-panel p { margin: 0 !important; color: var(--plans-muted) !important; font-size: 14px !important; line-height: 1.65 !important; } .sp-plans-final { position: relative; overflow: hidden; padding: 72px 0; background: radial-gradient(circle at 86% 20%, rgba(10, 149, 255, 0.28), transparent 30%), linear-gradient(118deg, #041f3a 0%, #062b4f 55%, #087ceb 140%); text-align: center; } .sp-plans-final-inner { position: relative; z-index: 1; } .sp-plans-final p { margin-inline: auto !important; } .sp-plans-final-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .sp-plans a:focus-visible, .sp-plans button:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45); outline-offset: 3px; } #explorar-planos, #conheca-cada-plano, #tabela-de-recursos { scroll-margin-top: 96px; } @media (prefers-reduced-motion: reduce) { .sp-plans *, .sp-plans *::before, .sp-plans *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- */ /* Responsividade */ /* -------------------------------------------------------------------------- */ @media (max-width: 1439px) { .sp-plans { --plans-gutter: 28px; } } @media (max-width: 1199px) { .sp-plans { --plans-gutter: 24px; } .sp-plans-card-body { padding: 22px 14px 16px; } .sp-plans-card-list li, .sp-plans-card-ideal { font-size: 12px !important; } } @media (max-width: 1023px) { .sp-plans-section-cards, .sp-plans-finder, .sp-plans-details, .sp-plans-faq { padding-top: 72px; padding-bottom: 72px; } .sp-plans-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-plans-card.is-complete { grid-column: 1 / -1; max-width: 420px; justify-self: center; width: 100%; } .sp-plans-strip-grid, .sp-plans-finder-grid, .sp-plans-consult-grid, .sp-plans-panel-grid { grid-template-columns: 1fr 1fr; } .sp-plans-hero { min-height: calc(var(--sp-hero-nav-h, 78px) + 230px); } } @media (max-width: 767px) { .sp-plans { --plans-gutter: 16px; } .sp-plans-hero { padding-top: calc(var(--sp-hero-nav-h, 64px) + 22px); padding-bottom: 28px; min-height: 0; } .sp-plans-hero h1 { font-size: 30px !important; } .sp-plans-hero-points { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 10px; } .sp-plans-cards, .sp-plans-strip-grid, .sp-plans-finder-grid, .sp-plans-consult-grid, .sp-plans-panel-grid { grid-template-columns: 1fr; } .sp-plans-card.is-complete { max-width: none; grid-column: auto; } .sp-plans-card-btn, .sp-plans-btn-orange, .sp-plans-btn-ghost { width: 100%; } .sp-plans-compare-head { flex-direction: column; align-items: stretch; } .sp-plans-table-hint { display: block; } .sp-plans-final-actions { flex-direction: column; } .sp-plans-panel-actions { flex-direction: column; align-items: stretch; } } @media (max-width: 479px) { .sp-plans { --plans-gutter: 16px; } .sp-plans-hero h1 { font-size: 26px !important; } } /* Tablet e celular: a tabela rola de lado, com a coluna de funcionalidades fixa */ @media (max-width: 1023px) { .sp-plans-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sp-plans-table { min-width: 780px; } .sp-plans-table thead th { position: static; } .sp-plans-table .is-feature { position: sticky; left: 0; z-index: 1; width: 170px; min-width: 170px; box-shadow: 1px 0 0 #e8f0f7; } .sp-plans-table thead th.is-feature { top: auto; z-index: 3; } .sp-plans-table-group th span { position: sticky; left: 16px; display: inline-block; } } /* -------------------------------------------------------------------------- */ /* /planos (catálogo) — alinhamento com as páginas aprovadas. */ /* Escopado em .sp-plans--catalog: o quiz (/encontrar-meu-plano) também usa */ /* .sp-plans e não é alterado por este bloco. */ /* -------------------------------------------------------------------------- */ .sc-pdf:has(.sp-plans--catalog) { --product-navy: #062b4f; --product-navy-dark: #041f3a; --product-navy-mid: #073b6d; --product-blue: #008ef4; --product-blue-soft: #eaf6ff; --product-ice: #f5faff; --product-orange: #ff6b20; --product-orange-hover: #ed5712; --product-text: #062b4f; --product-muted: #63778c; --product-border: #dce9f4; --plans-blue-text: #0067b8; --plans-muted-strong: #52657a; } .sp-plans.sp-plans--catalog { --plans-gutter: 32px; } .sp-plans--catalog a:focus-visible, .sp-plans--catalog button:focus-visible, .sp-plans--catalog [tabindex="0"]:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45) !important; outline-offset: 3px; } .sp-plans--catalog .sp-plans-breadcrumb a { display: inline-block; padding: 12px 0; } .sp-plans--catalog .sp-plans-breadcrumb ol { margin-bottom: 0; align-items: center; } /* Os textos ocultos dos links da tabela ficam presos à área de rolagem (senão alargam a página no celular) */ .sp-plans--catalog .sp-plans-table-scroll { position: relative; } .sp-plans--catalog .sp-plans-hero h1 { font-size: clamp(34px, 4.4vw, 54px) !important; line-height: 1.08 !important; } .sp-plans--catalog .sp-plans-intro h2, .sp-plans--catalog .sp-plans-compare-head h2, .sp-plans--catalog .sp-plans-consult h2, .sp-plans--catalog .sp-plans-final h2, .sp-plans--catalog .sp-plans-faq h2 { font-size: clamp(32px, 3.6vw, 40px) !important; line-height: 1.12 !important; } .sp-plans--catalog .sp-plans-intro p { color: var(--plans-muted-strong) !important; line-height: 1.65 !important; } /* Seções: 72 no desktop, 56 no celular (vence também as regras antigas por id em sc-pdf.css e systemport-v2.css) */ .sp-plans--catalog #explorar-planos.sp-plans-section-cards { padding: 72px 0 24px; } .sp-plans--catalog .sp-plans-strip { padding: 24px 0 72px; } .sp-plans--catalog .sp-plans-finder, .sp-plans--catalog .sp-plans-details, .sp-plans--catalog .sp-plans-faq, .sp-plans--catalog .sp-plans-consult, .sp-plans--catalog #tabela-de-recursos.sp-plans-compare { padding: 72px 0; } /* Cards */ .sp-plans--catalog .sp-plans-card:hover { transform: none; } .sp-plans--catalog .sp-plans-card.is-complete { box-shadow: 0 10px 24px rgba(4, 31, 58, 0.16); } .sp-plans--catalog .sp-plans-card-ribbon { font-size: 12px; } .sp-plans--catalog .sp-plans-card-label { font-size: 12px !important; } .sp-plans--catalog .sp-plans-card-ideal, .sp-plans--catalog .sp-plans-card-list li { font-size: 14px !important; } .sp-plans--catalog .sp-plans-card-note { font-size: 13px !important; } .sp-plans--catalog .sp-plans-card-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; } .sp-plans--catalog .sp-plans-card-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* Faixa de diferenciais */ .sp-plans--catalog .sp-plans-strip-grid li { border-radius: 16px; } .sp-plans--catalog .sp-plans-strip-grid p { font-size: 14px !important; } /* Finder: estado selecionado com borda, fundo e ícone de check (não só cor) */ .sp-plans--catalog .sp-plans-finder-card { border-radius: 12px; } .sp-plans--catalog .sp-plans-finder-card.is-selected { border: 2px solid var(--plans-blue); box-shadow: none; } .sp-plans--catalog .sp-plans-finder-card.is-selected .sp-plans-finder-arrow { color: var(--plans-blue-text); font-weight: 800; } /* Abas e FAQ: hover */ .sp-plans--catalog .sp-plans-tab:hover { color: var(--plans-navy); background: var(--plans-blue-soft); } .sp-plans--catalog .sp-plans-accordion button:hover { background: var(--plans-ice); } /* Tabela */ .sp-plans--catalog .sp-plans-table-badge { display: block; margin-bottom: 4px; color: #9ed6ff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* Plano mais escolhido (Versão Full): selo textual no cabeçalho, além da cor */ .sp-plans--catalog .sp-plans-table thead th.is-full { background: var(--plans-navy-mid) !important; } /* Painel sem organograma: o texto ocupa a largura, com medida de leitura */ .sp-plans--catalog .sp-plans-panel-grid.is-text-only { grid-template-columns: 1fr; } .sp-plans--catalog .sp-plans-panel-grid.is-text-only .sp-plans-panel-copy { max-width: 760px; } .sp-plans--catalog .sp-plans-table-foot-name { display: none; } .sp-plans--catalog .sp-plans-table-btn { min-height: 44px; white-space: nowrap; } @media (max-width: 1199px) { .sp-plans.sp-plans--catalog { --plans-gutter: 24px; } .sp-plans--catalog .sp-plans-card-body { padding: 24px 18px 18px; } .sp-plans--catalog .sp-plans-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-plans--catalog .sp-plans-card.is-complete { grid-column: 1 / -1; max-width: 420px; justify-self: center; width: 100%; } .sp-plans--catalog .sp-plans-strip-grid, .sp-plans--catalog .sp-plans-finder-grid, .sp-plans--catalog .sp-plans-consult-grid { grid-template-columns: 1fr 1fr; } .sp-plans--catalog .sp-plans-panel-grid { grid-template-columns: 1fr; } .sp-plans--catalog .sp-plans-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .sp-plans--catalog .sp-plans-table { min-width: 780px; } .sp-plans--catalog .sp-plans-table thead th { position: static; } .sp-plans--catalog .sp-plans-table .is-feature { position: sticky; left: 0; z-index: 1; width: 170px; min-width: 170px; box-shadow: 1px 0 0 var(--plans-border); } .sp-plans--catalog .sp-plans-table-group th span { position: sticky; left: 16px; display: inline-block; } .sp-plans--catalog .sp-plans-hero { min-height: 0; } .sp-plans--catalog .sp-plans-table-foot-name { display: block; margin-bottom: 8px; color: var(--plans-navy); font-size: 12px; font-weight: 700; } } @media (max-width: 767px) { .sp-plans.sp-plans--catalog { --plans-gutter: 16px; } .sp-plans--catalog .sp-plans-hero h1 { font-size: 34px !important; } .sp-plans--catalog #explorar-planos.sp-plans-section-cards { padding: 56px 0 24px; } .sp-plans--catalog .sp-plans-strip { padding: 24px 0 56px; } .sp-plans--catalog .sp-plans-finder, .sp-plans--catalog .sp-plans-details, .sp-plans--catalog .sp-plans-faq, .sp-plans--catalog #tabela-de-recursos.sp-plans-compare { padding: 56px 0; } .sp-plans--catalog .sp-plans-cards, .sp-plans--catalog .sp-plans-strip-grid, .sp-plans--catalog .sp-plans-finder-grid, .sp-plans--catalog .sp-plans-consult-grid { grid-template-columns: 1fr; } .sp-plans--catalog .sp-plans-card.is-complete { max-width: none; grid-column: auto; } .sp-plans--catalog .sp-plans-faq-list { grid-template-columns: 1fr; } .sp-plans--catalog .sp-plans-consult, .sp-plans--catalog .sp-plans-final { padding: 56px 0; } .sp-plans--catalog .sp-product-btn { width: 100%; } /* Tabela mais estreita: a coluna de recursos fica fixa e cabem cerca de 2 planos por vez */ .sp-plans--catalog .sp-plans-table { min-width: 600px; } .sp-plans--catalog .sp-plans-table .is-feature { font-size: 13px; } .sp-plans--catalog .sp-plans-table thead th:not(.is-feature) { padding: 12px 6px; font-size: 13px; white-space: normal; } .sp-plans--catalog .sp-plans-table .is-feature { width: 132px; min-width: 132px; } .sp-plans--catalog .sp-plans-table td, .sp-plans--catalog .sp-plans-table tbody th { padding-left: 8px; padding-right: 8px; } .sp-plans--catalog .sp-plans-table-btn { padding: 0 8px; font-size: 12px; } } /* A dica de arrastar só aparece quando a tabela de fato rola */ @media (max-width: 1023px) { .sp-plans--catalog .sp-plans-table-hint { display: block; } } /* Preço nos cartões e simulador de orçamento */ .sp-plans-card-price { margin: 4px 0 18px; padding: 14px 16px 16px; border-radius: 16px; background: linear-gradient(180deg, #ffffff, var(--plans-ice)); border: 1px solid var(--plans-border); box-shadow: 0 8px 20px rgba(6,43,79,.06); } .sp-plans-card.is-complete .sp-plans-card-price { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.2); box-shadow: none; } .sp-plans-price-label { margin: 0; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #52667a !important; } .sp-plans-price-main { margin: 2px 0 6px; color: var(--plans-navy) !important; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; } .sp-plans-price-main strong { font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; } .sp-plans-price-main span { font-size: 15px; font-weight: 700; color: #52667a; } .sp-plans-price-sub { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: #52667a !important; } .sp-plans-price-month { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--plans-border); font-size: 14.5px; font-weight: 800; color: var(--plans-navy) !important; } .sp-plans-card.is-complete .sp-plans-price-label, .sp-plans-card.is-complete .sp-plans-price-sub, .sp-plans-card.is-complete .sp-plans-price-main span { color: #c4e0f7 !important; } .sp-plans-card.is-complete .sp-plans-price-main, .sp-plans-card.is-complete .sp-plans-price-month { color: #fff !important; } .sp-plans-card.is-complete .sp-plans-price-month { border-top-color: rgba(255,255,255,.2); } .sp-plans-card-whats { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 800; color: #0c7f43 !important; text-decoration: none; } .sp-plans-card-whats::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #13803f; box-shadow: 0 0 0 3px rgba(31,168,85,.18); } .sp-plans-card-whats:hover { text-decoration: underline; text-underline-offset: 3px; } .sp-plans-card.is-complete .sp-plans-card-whats { color: #7ef0c6 !important; } .sp-sim { background: var(--plans-ice); } .sp-sim-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 28px; align-items: start; margin-top: 32px; } .sp-sim-form, .sp-sim-result { background: #fff; border: 1px solid var(--plans-border); border-radius: 20px; padding: 28px; box-shadow: 0 18px 40px rgba(6,43,79,.07); } .sp-sim-result { border-top: 5px solid var(--plans-orange); box-shadow: 0 24px 50px rgba(6,43,79,.12); } .sp-sim-field { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; } .sp-sim-field legend, .sp-sim-legend { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--plans-navy) !important; } .sp-sim-legend small { font-weight: 500; color: var(--plans-muted) !important; } .sp-sim-planos { display: flex; flex-wrap: wrap; gap: 8px; } .sp-sim-plano { position: relative; cursor: pointer; } .sp-sim-plano input { position: absolute; opacity: 0; pointer-events: none; } .sp-sim-plano span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--plans-border); font-size: 14px; font-weight: 700; color: var(--plans-navy) !important; background: #fff; transition: background-color .15s, border-color .15s, box-shadow .15s; } .sp-sim-plano:hover span { border-color: var(--plans-blue); } .sp-sim-plano input:checked + span { background: var(--plans-navy); border-color: var(--plans-navy); color: #fff !important; box-shadow: 0 8px 18px rgba(6,43,79,.22); } .sp-sim-plano input:focus-visible + span { outline: 3px solid var(--plans-blue); outline-offset: 2px; } .sp-sim-num { display: inline-flex; align-items: center; border: 1.5px solid var(--plans-border); border-radius: 12px; overflow: hidden; background: #fff; } .sp-sim-num button { width: 44px; height: 44px; border: 0; background: var(--plans-blue-soft); color: var(--plans-navy); font-size: 20px; font-weight: 700; cursor: pointer; transition: background-color .15s; } .sp-sim-num button:hover { background: #d4ebff; } .sp-sim-num button:focus-visible { outline: 3px solid var(--plans-blue); outline-offset: -3px; } .sp-sim-num input { width: 64px; height: 44px; border: 0; text-align: center; font-size: 17px; font-weight: 800; color: var(--plans-navy); -moz-appearance: textfield; } .sp-sim-num input::-webkit-outer-spin-button, .sp-sim-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sp-sim-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--plans-muted) !important; cursor: pointer; } .sp-sim-check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--plans-blue); flex: none; } .sp-sim-check strong { color: var(--plans-navy) !important; } .sp-sim-sub { margin: 12px 0 0 30px; } .sp-sim-sub label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--plans-muted) !important; } .sp-sim-result { position: sticky; top: 100px; } .sp-sim-result-plano { margin: 0 0 12px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--plans-navy) !important; } .sp-sim-grupo { margin: 18px 0 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #52667a !important; } .sp-sim-linha { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid #eef3f8; } .sp-sim-linha span { color: #52667a !important; } .sp-sim-linha strong { color: var(--plans-navy) !important; white-space: nowrap; } .sp-sim-linha.is-total { border-bottom: 0; padding-top: 12px; align-items: baseline; } .sp-sim-linha.is-total span { color: var(--plans-navy) !important; font-weight: 800; font-size: 15px; } .sp-sim-linha.is-total strong { color: var(--plans-navy) !important; font-weight: 800; font-size: 20px; letter-spacing: -.01em; } .sp-sim-linha.is-ano { margin-top: 14px; padding: 16px 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #062b4f, #0a4c8a); align-items: center; box-shadow: 0 12px 26px rgba(6,43,79,.25); } .sp-sim-linha.is-ano span { color: #c4e0f7 !important; font-weight: 700; font-size: 15px; } .sp-sim-linha.is-ano strong { color: #fff !important; font-weight: 800; font-size: 24px; letter-spacing: -.01em; } .sp-sim-parcela { margin: 0 0 6px; padding: 8px 12px; border-radius: 10px; background: #e9f8f1; font-size: 13px; line-height: 1.45; color: #0b6e48 !important; font-weight: 700; } .sp-sim-acoes { display: grid; gap: 10px; margin-top: 20px; } .sp-sim-btn-whats, .sp-sim-btn-demo { display: flex; justify-content: center; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 12px; font-weight: 800; font-size: 15.5px; text-align: center; text-decoration: none !important; transition: background-color .15s, border-color .15s; } .sp-sim-btn-whats { background: #13803f; color: #fff !important; box-shadow: 0 12px 24px rgba(31,168,85,.3); } .sp-sim-btn-whats:hover { background: #0f6b34; } .sp-sim-btn-demo { border: 1.5px solid var(--plans-border); color: var(--plans-navy) !important; background: #fff; } .sp-sim-btn-demo:hover { border-color: var(--plans-blue); background: var(--plans-ice); } .sp-sim-btn-whats:focus-visible, .sp-sim-btn-demo:focus-visible { outline: 3px solid var(--plans-blue); outline-offset: 2px; } .sp-sim-nota { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--plans-muted) !important; } .sp-sim-adicionais { margin-top: 28px; background: #fff; border: 1px solid var(--plans-border); border-radius: 20px; padding: 24px 28px; } .sp-sim-adicionais h3 { margin: 0 0 10px; font-size: 18px; color: var(--plans-navy) !important; } .sp-sim-adicionais ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .sp-sim-adicionais li { font-size: 14px; line-height: 1.5; color: var(--plans-muted) !important; } .sp-sim-adicionais strong { color: var(--plans-navy) !important; } @media (max-width: 1023px) { .sp-sim-grid { grid-template-columns: 1fr; } .sp-sim-result { position: static; } } @media (max-width: 479px) { .sp-sim-form, .sp-sim-result, .sp-sim-adicionais { padding: 20px 16px; } .sp-sim-linha.is-ano strong { font-size: 21px; } } .sp-plans-price-gratis { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 13px; line-height: 1.35; font-weight: 800; color: #0b7a52 !important; } .sp-plans-price-gratis::before { content: "\2713"; flex: none; margin-top: 1px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #dff5ec; font-size: 10px; line-height: 1; } .sp-plans-card.is-complete .sp-plans-price-gratis { color: #7ef0c6 !important; } .sp-plans-card.is-complete .sp-plans-price-gratis::before { background: rgba(126,240,198,.18); } .sp-sim-linha.is-gratis strong { color: #0b7a52 !important; text-transform: uppercase; font-size: 12.5px; letter-spacing: .04em; } /* Quanto o sistema se paga */ .sp-roi-dores { margin-top: 28px; } .sp-roi-dores h3 { margin: 0 0 14px; font-size: 20px; color: var(--plans-navy) !important; } .sp-roi-dores-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } .sp-roi-dor { background: #fff; border: 1px solid var(--plans-border); border-radius: 16px; padding: 16px 18px; box-shadow: 0 8px 20px rgba(6,43,79,.05); } .sp-roi-dor p { margin: 0; font-size: 14px; line-height: 1.45; display: flex; gap: 8px; } .sp-roi-antes { color: #7a4b4b !important; text-decoration: line-through; text-decoration-color: rgba(229,72,77,.5); } .sp-roi-antes span { color: #d13438 !important; text-decoration: none; font-weight: 800; } .sp-roi-depois { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid #eef3f8; color: var(--plans-navy) !important; font-weight: 600; } .sp-roi-depois span { color: #0b7a52 !important; font-weight: 800; } .sp-roi-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; align-items: start; margin-top: 28px; } .sp-roi-form, .sp-roi-result { background: #fff; border: 1px solid var(--plans-border); border-radius: 20px; padding: 28px; box-shadow: 0 18px 40px rgba(6,43,79,.07); } .sp-roi-campo { display: block; margin-bottom: 18px; } .sp-roi-campo > span:first-child { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--plans-navy) !important; } .sp-roi-input { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--plans-border); border-radius: 12px; padding: 0 14px; background: #fff; } .sp-roi-input:focus-within { border-color: var(--plans-blue); box-shadow: 0 0 0 3px rgba(0,142,244,.15); } .sp-roi-input em { font-style: normal; font-weight: 700; color: var(--plans-muted) !important; } .sp-roi-input input { width: 150px; height: 46px; border: 0; outline: 0; font-size: 17px; font-weight: 800; color: var(--plans-navy); background: transparent; } .sp-roi-premissas summary { cursor: pointer; font-weight: 700; color: #0072c6 !important; margin-bottom: 12px; } .sp-roi-premissas ul { margin: 6px 0 0; padding-left: 18px; } .sp-roi-premissas li { font-size: 13px; line-height: 1.5; color: var(--plans-muted) !important; } .sp-roi-result { position: sticky; top: 100px; } .sp-roi-plano { margin: 0 0 10px; font-size: 14px; color: var(--plans-muted) !important; } .sp-roi-plano strong { color: var(--plans-navy) !important; } .sp-roi-plano a { color: #0072c6 !important; font-weight: 700; } .sp-roi-destaque { margin-top: 16px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(135deg, #062b4f, #0a4c8a); box-shadow: 0 14px 30px rgba(6,43,79,.25); } .sp-roi-destaque p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: #c4e0f7 !important; } .sp-roi-destaque p:last-child { margin-bottom: 0; } .sp-roi-destaque strong { color: #fff !important; font-size: 19px; } .sp-roi-destaque p:first-child strong { color: #7ef0c6 !important; font-size: 21px; } .sp-roi-destaque .sp-roi-aviso { color: #ffd7b8 !important; } .sp-roi-impacto { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--plans-navy) !important; font-weight: 600; } @media (max-width: 1023px) { .sp-roi-grid { grid-template-columns: 1fr; } .sp-roi-result { position: static; } .sp-roi-dores-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .sp-roi-dores-grid { grid-template-columns: 1fr; } .sp-roi-form, .sp-roi-result { padding: 20px 16px; } .sp-roi-input input { width: 120px; } } /* Faixa de bônus e selos */ .sp-bonus { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 30px 0 34px; } .sp-bonus-item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--plans-border); box-shadow: 0 10px 24px rgba(6,43,79,.06); transition: border-color .15s, box-shadow .15s, transform .15s; } .sp-bonus-item:hover { border-color: #b9d8f0; box-shadow: 0 16px 32px rgba(6,43,79,.1); transform: translateY(-2px); } .sp-bonus-item--destaque { background: linear-gradient(135deg, #062b4f, #0a4c8a); border-color: transparent; box-shadow: 0 18px 36px rgba(6,43,79,.3); position: relative; } .sp-bonus-item--destaque:hover { border-color: transparent; box-shadow: 0 22px 40px rgba(6,43,79,.36); } .sp-bonus-item--destaque::after { content: "B\00F4nus"; position: absolute; top: -11px; right: 14px; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, #e3570c, #c4450a); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 14px rgba(232,89,12,.35); } .sp-bonus-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e3f6ee; } .sp-bonus-ico svg { width: 24px; height: 24px; fill: none; stroke: #0f9a6c; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .sp-bonus-item--destaque .sp-bonus-ico { background: rgba(126,240,198,.16); } .sp-bonus-item--destaque .sp-bonus-ico svg { stroke: #7ef0c6; } .sp-bonus-item strong { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.3; color: var(--plans-navy) !important; } .sp-bonus-item span:not(.sp-bonus-ico) { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #52667a !important; } .sp-bonus-item a { color: #0072c6 !important; font-weight: 700; text-underline-offset: 2px; } .sp-bonus-item--destaque strong { color: #fff !important; } .sp-bonus-item--destaque span:not(.sp-bonus-ico) { color: #c4e0f7 !important; } .sp-plans-card-bonus { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 12px; padding: 6px 10px; border-radius: 10px; background: #fff1e6; border: 1px solid #ffd2b3; font-size: 12px; font-weight: 800; line-height: 1.3; color: #b23c0a !important; } .sp-plans-card-bonus span { flex: none; font-size: 14px; line-height: 1; } .sp-plans-card.is-complete .sp-plans-card-bonus { background: rgba(255,107,32,.2); border-color: rgba(255,140,80,.5); color: #ffd9c2 !important; } .sp-sim-bonus { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fff1e6; border: 1px solid #ffd2b3; font-size: 13px; line-height: 1.45; color: #8f340f !important; } .sp-sim-bonus span { font-size: 18px; line-height: 1; } .sp-sim-bonus strong { display: block; color: #b23c0a !important; font-weight: 800; } .sp-roi-dores-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (max-width: 1199px) { .sp-bonus { grid-template-columns: repeat(2, minmax(0,1fr)); } .sp-roi-dores-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .sp-bonus { grid-template-columns: 1fr; gap: 14px; } .sp-roi-dores-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .sp-bonus-item, .sp-sim-plano span, .sp-sim-num button, .sp-sim-btn-whats, .sp-sim-btn-demo { transition: none; } .sp-bonus-item:hover { transform: none; } } .sp-plans-card .sp-plans-card-btn { white-space: nowrap; font-size: 14px; padding-left: 12px; padding-right: 12px; } /* ========================================================================== */ /* Auditoria de design (/auditor-site, 06/10/2026) — só nesta página */ /* ========================================================================== */ .sc-pdf:has(.sp-plans--catalog) { --product-shadow-cta: 0 10px 22px rgba(194, 65, 12, .24); } /* contraste AA: laranja com texto branco e azul de texto */ .sp-plans.sp-plans--catalog { --plans-orange: #c2410c; --plans-orange-hover: #9a3412; } .sp-plans--catalog .sp-plans-card-link { color: var(--plans-blue-text) !important; } .sp-plans--catalog .sp-plans-eyebrow, .sp-plans--catalog .sp-plans-tab-num, .sp-plans--catalog .sp-plans-finder-arrow { color: var(--plans-blue-text); } .sp-plans--catalog .sp-hero-selo--preco, .sp-plans--catalog .sp-bonus-item--destaque::after { background: linear-gradient(135deg, #c2410c, #9a3412) !important; } /* respiro das seções Simulador e Retorno (classe estava sem regra) */ .sp-plans--catalog .sp-plans-section { padding: 72px 0; } @media (max-width: 767px) { .sp-plans--catalog .sp-plans-section { padding: 56px 0; } } /* ações da aba alinhadas */ .sp-plans--catalog .sp-plans-panel-actions .sp-plans-card-link, .sp-plans--catalog .sp-plans-panel-actions .sp-plans-card-note { margin: 0 !important; } .sp-plans--catalog .sp-plans-panel-actions { align-items: center; } /* alvos de toque de 44px */ .sp-plans--catalog .sp-hero-selo { min-height: 44px; } .sp-plans--catalog .sp-plans-card-whats { min-height: 44px; margin-top: 0; } .sp-plans--catalog .sp-roi-premissas summary { display: inline-flex; align-items: center; min-height: 44px; } .sp-plans--catalog .sp-roi-premissas summary:focus-visible { outline: 3px solid var(--plans-blue); outline-offset: 2px; border-radius: 6px; } /* link não quebra a seta sozinha; link do bônus parece link */ .sp-plans--catalog .sp-roi-plano a { white-space: nowrap; } .sp-plans--catalog .sp-bonus-item a { text-decoration: underline; } /* título dos cartões em tamanho inteiro */ .sp-plans--catalog .sp-plans-card h3 { font-size: 18px !important; } /* organograma maior no celular */ @media (max-width: 767px) { .sp-plans--catalog .sp-plans-flow { padding: 8px; min-height: 0; } } /* rodapé da tabela: botões alinhados */ .sp-plans--catalog .sp-plans-table tfoot td { vertical-align: bottom; } .sp-plans--catalog .sp-sim-plano span { min-height: 44px; display: inline-flex; align-items: center; } .sp-plans--catalog .sp-plans-card.is-complete .sp-plans-card-btn { box-shadow: 0 10px 22px rgba(194, 65, 12, .24); } .sp-plans--catalog .sp-roi-plano a, .sp-plans--catalog .sp-bonus-item a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* assets/css/sp-plan-quiz.css */ /* Página /encontrar-meu-plano — diagnóstico de 4 perguntas no mundo visual de /planos */ .sp-quiz { --quiz-ink-blue: #0a6fc2; --quiz-ink-muted: #4f6478; --quiz-line: #dce9f4; --quiz-ease: cubic-bezier(0.22, 1, 0.36, 1); } .sp-quiz ::selection { background: rgba(0, 142, 244, 0.2); color: inherit; } /* Palco: o herói marinho de /planos continua atrás do diagnóstico */ .sp-quiz .sp-quiz-stage { padding-bottom: 88px; } .sp-quiz .sp-plans-hero-inner { max-width: 1060px; } .sp-quiz .sp-plans-hero-lead { max-width: 720px; } .sp-quiz-points .sp-quiz-point-icon { display: inline-grid; width: 22px; height: 22px; place-items: center; color: #7cc8ff; } .sp-quiz-points .sp-quiz-point-icon svg { width: 20px; height: 20px; } .sp-quiz-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 24px; align-items: start; max-width: 1160px; margin-top: 40px; } /* -------------------------------------------------------------------------- */ /* Como funciona */ /* -------------------------------------------------------------------------- */ .sp-quiz-aside, .sp-quiz-card { border-radius: 16px; background: #fff; color: var(--plans-navy); box-shadow: 0 24px 60px rgba(2, 16, 33, 0.32); } .sp-quiz-aside { padding: 28px 26px; } .sp-quiz-aside h2 { margin: 0 0 22px !important; color: var(--plans-navy) !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -0.02em; line-height: 1.2 !important; } .sp-quiz-steps { margin: 0 0 22px; padding: 0; list-style: none; } .sp-quiz-step { position: relative; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: center; padding-bottom: 26px; } .sp-quiz-step:last-child { padding-bottom: 0; } .sp-quiz-step:not(:last-child)::after { content: ""; position: absolute; top: 44px; bottom: 6px; left: 18px; border-left: 2px dotted #c3d3e2; } .sp-quiz-step-num { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: #eef4fa; color: var(--quiz-ink-muted); font-size: 15px; font-weight: 700; transition: background-color 300ms var(--quiz-ease), color 300ms var(--quiz-ease), box-shadow 300ms var(--quiz-ease); } .sp-quiz-step-num svg { width: 18px; height: 18px; } .sp-quiz-step-label { color: var(--quiz-ink-muted) !important; font-size: 15px; font-weight: 500; line-height: 1.35; } .sp-quiz-step.is-current .sp-quiz-step-num { background: var(--plans-blue); color: #fff; box-shadow: 0 6px 16px rgba(0, 142, 244, 0.32); } .sp-quiz-step.is-current .sp-quiz-step-label { color: var(--plans-navy) !important; font-weight: 700; } .sp-quiz-step.is-done .sp-quiz-step-num { background: #e3f6ee; color: #13875f; } .sp-quiz-tip { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px !important; padding: 14px 16px; border-radius: 12px; background: #f0f8ff; color: var(--quiz-ink-muted) !important; font-size: 14px !important; line-height: 1.5 !important; } .sp-quiz-tip > span { flex: 0 0 auto; color: var(--plans-blue); } .sp-quiz-tip svg { width: 22px; height: 22px; } .sp-quiz-aside-contact { padding-top: 20px; border-top: 1px solid var(--quiz-line); } .sp-quiz-aside-contact p { margin: 0 0 12px !important; color: var(--plans-navy) !important; font-size: 15px !important; font-weight: 700; } .sp-quiz-aside-contact .sp-quiz-btn-outline { width: 100%; } /* Botão contornado e link de texto (novos neste mundo, mesmas medidas dos botões de /planos) */ .sp-quiz-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--quiz-ink-blue); border-radius: 10px; background: #fff; color: var(--quiz-ink-blue) !important; font-size: 15px; font-weight: 700; text-decoration: none !important; transition: background-color 200ms ease, color 200ms ease, transform 200ms ease; } .sp-quiz-btn-outline svg { width: 18px; height: 18px; } .sp-quiz-btn-outline:hover, .sp-quiz-btn-outline:focus-visible { background: #eef7ff; color: #064f8d !important; transform: translateY(-1px); } .sp-quiz-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; border: 0; background: transparent; color: var(--quiz-ink-muted) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; cursor: pointer; transition: color 200ms ease; } .sp-quiz-link svg { width: 18px; height: 18px; } .sp-quiz-link:hover, .sp-quiz-link:focus-visible { color: var(--plans-navy) !important; } .sp-quiz :focus-visible { outline: 3px solid rgba(0, 142, 244, 0.5); outline-offset: 2px; } .sp-quiz h2[tabindex="-1"]:focus { outline: none; } /* -------------------------------------------------------------------------- */ /* Card do diagnóstico */ /* -------------------------------------------------------------------------- */ .sp-quiz-card { padding: 30px 36px 26px; } .sp-quiz-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .sp-quiz-count { margin: 0 !important; color: var(--plans-navy) !important; font-size: 17px !important; font-weight: 700; } .sp-quiz-percent { margin: 0 !important; color: var(--quiz-ink-muted) !important; font-size: 14px !important; font-variant-numeric: tabular-nums; } .sp-quiz-bar { height: 8px; overflow: hidden; border-radius: 999px; background: #e4eef7; } .sp-quiz-bar span { display: block; height: 100%; border-radius: inherit; background: var(--plans-blue); transition: clip-path 520ms var(--quiz-ease); } .sp-quiz-question { min-width: 0; margin-top: 22px; padding-top: 26px; border-top: 1px solid var(--quiz-line); animation: sp-quiz-in 420ms var(--quiz-ease); } .sp-quiz-question h2, .sp-quiz-result-head h2 { margin: 0 !important; color: var(--plans-navy) !important; font-size: clamp(24px, 2.4vw, 30px) !important; font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.2 !important; text-wrap: balance; } .sp-quiz-help { margin: 8px 0 22px !important; color: var(--quiz-ink-muted) !important; font-size: 16px !important; line-height: 1.5 !important; } .sp-quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .sp-quiz-options.is-count-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; } .sp-quiz-option { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) 22px; gap: 16px; align-items: center; margin: 0; padding: 16px 18px; border: 1.5px solid var(--quiz-line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 200ms var(--quiz-ease); } .sp-quiz-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .sp-quiz-option:hover { border-color: #b7d9f4; background: #f7fbff; } .sp-quiz-option:active { transform: scale(0.99); } .sp-quiz-option.is-selected { border-color: var(--plans-blue); background: #f0f8ff; box-shadow: 0 0 0 3px rgba(0, 142, 244, 0.12); } .sp-quiz-option:has(input:focus-visible) { outline: 3px solid rgba(0, 142, 244, 0.5); outline-offset: 2px; } .sp-quiz-option-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; } .sp-quiz-option-icon svg { width: 24px; height: 24px; } .sp-quiz-option.tone-blue .sp-quiz-option-icon { background: #e6f3ff; color: #0a78d1; } .sp-quiz-option.tone-amber .sp-quiz-option-icon { background: #fff1d6; color: #c97400; } .sp-quiz-option.tone-green .sp-quiz-option-icon { background: #e1f5ec; color: #13875f; } .sp-quiz-option.tone-violet .sp-quiz-option-icon { background: #efeaff; color: #6247cf; } .sp-quiz-option-text { display: grid; gap: 3px; } .sp-quiz-option-text strong { color: var(--plans-navy) !important; font-size: 16px; font-weight: 700; line-height: 1.3; } .sp-quiz-option-text span { color: var(--quiz-ink-muted) !important; font-size: 14px; line-height: 1.4; } .sp-quiz-radio { width: 22px; height: 22px; border: 2px solid #b9cadb; border-radius: 50%; background: #fff; transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; } .sp-quiz-option.is-selected .sp-quiz-radio { border-color: var(--plans-blue); background: var(--plans-blue); box-shadow: inset 0 0 0 4px #fff; } .sp-quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; } .sp-quiz-next { gap: 10px; min-width: 200px; } .sp-quiz-next svg { width: 18px; height: 18px; } .sp-quiz-next:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; transform: none; } .sp-quiz-next:disabled:hover { background: var(--plans-orange); border-color: var(--plans-orange); } .sp-quiz-privacy { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 12px 0 0 !important; color: var(--quiz-ink-muted) !important; font-size: 13px !important; } .sp-quiz-privacy svg { width: 14px; height: 14px; flex: 0 0 auto; } /* -------------------------------------------------------------------------- */ /* Resultado */ /* -------------------------------------------------------------------------- */ .sp-quiz-result { margin-top: 22px; padding-top: 26px; border-top: 1px solid var(--quiz-line); } .sp-quiz-result-head { display: flex; gap: 20px; align-items: center; animation: sp-quiz-rise 560ms var(--quiz-ease); } .sp-quiz-result-icon { display: grid; width: 68px; height: 68px; flex: 0 0 auto; place-items: center; border-radius: 18px; background: var(--plans-blue-soft); color: var(--plans-blue); animation: sp-quiz-pop 620ms var(--quiz-ease); } .sp-quiz-result-icon.is-full { background: var(--plans-navy); color: #7cc8ff; } .sp-quiz-result-icon svg { width: 32px; height: 32px; } .sp-quiz-result-head h2 span { color: var(--quiz-ink-blue); } .sp-quiz-result-head p { margin: 6px 0 0 !important; color: var(--quiz-ink-muted) !important; font-size: 16px !important; line-height: 1.5 !important; } .sp-quiz-why { max-width: 66ch; margin: 22px 0 22px !important; color: var(--plans-navy) !important; font-size: 17px !important; line-height: 1.6 !important; } .sp-quiz-result-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; } .sp-quiz-result-block { padding: 20px 22px; border-radius: 14px; background: var(--plans-ice); border: 1px solid #e3eef8; } .sp-quiz-result-block h3 { margin: 0 0 14px !important; color: var(--plans-navy) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.3 !important; } .sp-quiz-checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .sp-quiz-checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--plans-navy) !important; font-size: 15px; line-height: 1.45; animation: sp-quiz-rise 480ms var(--quiz-ease) both; } .sp-quiz-checklist li:nth-child(2) { animation-delay: 60ms; } .sp-quiz-checklist li:nth-child(3) { animation-delay: 120ms; } .sp-quiz-checklist li:nth-child(4) { animation-delay: 180ms; } .sp-quiz-checklist svg { width: 18px; height: 18px; margin-top: 2px; color: #13875f; } .sp-quiz-note { margin: 14px 0 0 !important; color: var(--quiz-ink-muted) !important; font-size: 14px !important; line-height: 1.5 !important; } .sp-quiz-answers { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0 0 10px; } .sp-quiz-answers dt { color: var(--quiz-ink-muted); font-size: 14px; font-weight: 500; } .sp-quiz-answers dd { margin: 0; color: var(--plans-navy); font-size: 14px; font-weight: 700; } .sp-quiz-restart { padding-left: 0; color: var(--quiz-ink-blue) !important; font-size: 14px; text-decoration: underline !important; text-underline-offset: 3px; } .sp-quiz-upgrade { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0 !important; padding: 14px 16px; border-radius: 12px; background: #eef9f4; color: var(--quiz-ink-muted) !important; font-size: 15px !important; line-height: 1.5 !important; } .sp-quiz-upgrade > span:first-child { flex: 0 0 auto; color: #13875f; } .sp-quiz-upgrade svg { width: 22px; height: 22px; } .sp-quiz-upgrade strong { color: var(--plans-navy); } .sp-quiz-result-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .sp-quiz-result-actions .sp-plans-btn-orange { gap: 10px; } .sp-quiz-result-actions .sp-plans-btn-orange svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- */ /* Movimento */ /* -------------------------------------------------------------------------- */ @keyframes sp-quiz-in { from { opacity: 0.35; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes sp-quiz-rise { from { opacity: 0.2; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes sp-quiz-pop { 0% { transform: scale(0.7) rotate(-8deg); } 60% { transform: scale(1.06) rotate(2deg); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .sp-quiz *, .sp-quiz *::before, .sp-quiz *::after { animation: none !important; transition: none !important; } } /* -------------------------------------------------------------------------- */ /* Responsivo */ /* -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .sp-quiz-layout { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } .sp-quiz-aside { order: 2; } .sp-quiz-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sp-quiz-step { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding-bottom: 0; } .sp-quiz-step:not(:last-child)::after { display: none; } } @media (max-width: 767px) { .sp-quiz .sp-quiz-stage { padding-bottom: 48px; } .sp-quiz-card { padding: 22px 18px 20px; } .sp-quiz-aside { padding: 22px 18px; } .sp-quiz-options { grid-template-columns: minmax(0, 1fr); gap: 10px; } .sp-quiz-option { grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 12px; padding: 14px; } .sp-quiz-option-icon { width: 44px; height: 44px; } .sp-quiz-steps { grid-template-columns: minmax(0, 1fr); } .sp-quiz-step { grid-template-columns: 38px 1fr; align-items: center; } .sp-quiz-result-head { align-items: flex-start; gap: 14px; } .sp-quiz-result-icon { width: 54px; height: 54px; border-radius: 14px; } .sp-quiz-result-grid { grid-template-columns: minmax(0, 1fr); } .sp-quiz-privacy { justify-content: flex-start; } } @media (max-width: 479px) { .sp-quiz-actions { flex-direction: column-reverse; align-items: stretch; } .sp-quiz-next, .sp-quiz-result-actions a { width: 100%; min-width: 0; } .sp-quiz-link { justify-content: center; } } /* assets/css/sp-produto.css */ /* Página individual de produto Express — alinhada à home e a /planos */ .sc-pdf:has(.sp-product) { --product-navy: #062b4f; --product-navy-dark: #041f3a; --product-navy-mid: #073b6d; --product-navy-deep: #04182e; --product-blue: #008ef4; --product-blue-rgb: 0, 142, 244; --product-blue-text: #0070c9; --product-blue-light: #9ed6ff; --product-blue-soft: #eaf6ff; --product-ice: #f5faff; --product-white: #ffffff; --product-orange: #ff6b20; --product-orange-hover: #ed5712; --product-orange-cta: #c2410c; --product-orange-cta-hover: #9a3412; --product-green: #20b486; --product-purple: #7259e8; --product-pink: #e45d8c; --product-yellow: #e8b23a; --product-blue-ink: #0070c9; --product-green-ink: #13805f; --product-orange-ink: #c94a0c; --product-purple-ink: #7259e8; --product-pink-ink: #c03a6b; --product-yellow-ink: #9a6b00; --product-green-tint: #e5f7f0; --product-orange-tint: #fff0e6; --product-purple-tint: #eee9ff; --product-pink-tint: #fde8f1; --product-yellow-tint: #fff6de; --product-text: #062b4f; --product-muted: #5a6e83; --product-border: #dce9f4; --product-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --product-wrap: 1280px; --product-gutter: 32px; --product-radius-sm: 10px; --product-radius-md: 12px; --product-radius-lg: 16px; --product-shadow-sm: 0 10px 24px rgba(6, 43, 79, 0.06); --product-shadow-md: 0 16px 34px rgba(6, 43, 79, 0.08); --product-shadow-lg: 0 24px 44px rgba(2, 16, 34, 0.3); --product-shadow-cta: 0 10px 22px rgba(194, 65, 12, 0.24); --product-dark-bg: linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%); background: var(--product-white); } .sc-pdf:has(.sp-product), .sc-pdf:has(.sp-product) h1, .sc-pdf:has(.sp-product) h2, .sc-pdf:has(.sp-product) h3, .sc-pdf:has(.sp-product) h4, .sc-pdf:has(.sp-product) p, .sc-pdf:has(.sp-product) a, .sc-pdf:has(.sp-product) li, .sc-pdf:has(.sp-product) span, .sc-pdf:has(.sp-product) button, .sc-pdf:has(.sp-product) strong, .sc-pdf:has(.sp-product) small, .sc-pdf:has(.sp-product) figcaption { font-family: var(--product-font) !important; } .sc-pdf:has(.sp-product) .sp-nav-dropdown .sp-nav-link.active::before, .sc-pdf:has(.sp-product) .sp-nav-dropdown .sp-nav-link[aria-current="page"]::before { transform: scaleX(1); } .sp-product { color: var(--product-text); background: var(--product-white); overflow-x: clip; } .sp-product *, .sp-product *::before, .sp-product *::after { box-sizing: border-box; } .sp-product-wrap { width: min(calc(100% - (var(--product-gutter) * 2)), var(--product-wrap)); margin-inline: auto; } .sp-product-eyebrow { margin: 0 0 12px; color: var(--product-blue); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .sp-product-eyebrow-light { color: rgba(234, 246, 255, 0.86); } /* Vence as regras de p das seções, que usam !important */ .sp-product .sp-product-eyebrow { margin: 0 0 12px !important; color: var(--product-blue-text) !important; font-size: 12px !important; line-height: 1.4 !important; } .sp-product .sp-product-eyebrow-light { color: rgba(234, 246, 255, 0.86) !important; } .sp-product-intro { max-width: 720px; margin: 0 0 36px; } .sp-product-intro.is-center { margin-inline: auto; text-align: center; } .sp-product-intro h2, .sp-product-overview-copy h2, .sp-product-workflow-copy h2, .sp-product-demo-copy h2, .sp-product-final h2, .sp-product-reasons h2, .sp-product-faq h2, .sp-product-features h2, .sp-product-resources h2 { margin: 0; color: var(--product-navy) !important; font-size: clamp(32px, 3.6vw, 40px) !important; font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.12 !important; } .sp-product-intro p { margin: 12px 0 0; color: var(--product-muted) !important; font-size: 16px !important; line-height: 1.65 !important; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sp-product-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--product-radius-sm, 10px); font-size: 15px; font-weight: 700; text-decoration: none !important; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, color 200ms ease; } .sp-product-btn-primary { background: var(--product-orange-cta, #c2410c); border: 1px solid var(--product-orange-cta, #c2410c); color: #fff !important; box-shadow: var(--product-shadow-cta); } .sp-product-btn-primary:hover, .sp-product-btn-primary:focus-visible { background: var(--product-orange-cta-hover, #9a3412); border-color: var(--product-orange-cta-hover, #9a3412); color: #fff !important; transform: translateY(-1px); } .sp-product-btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.42); color: #fff !important; } .sp-product-btn-ghost:hover, .sp-product-btn-ghost:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: rgba(158, 214, 255, 0.9); color: #fff !important; transform: translateY(-1px); } .sp-product a:focus-visible, .sp-product button:focus-visible { outline: 2px solid var(--product-navy-mid); outline-offset: 3px; } .sp-product-hero a:focus-visible, .sp-product-hero button:focus-visible, .sp-product-workflow-copy a:focus-visible, .sp-product-final a:focus-visible, .sp-product-final button:focus-visible { outline-color: #fff; } .sp-product-play, .sp-product-play svg { display: block; width: 22px; height: 22px; } .sp-product-check { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(var(--product-blue-rgb), 0.22); color: var(--product-blue-light); } .sp-product-check svg, .sp-product-demo-check svg { width: 14px; height: 14px; stroke-width: 2.2; } .sp-product-callout-icon svg { width: 16px; height: 16px; stroke-width: 2.2; } /* -------------------------------------------------------------------------- */ /* Hero */ /* -------------------------------------------------------------------------- */ .sp-product-hero { position: relative; overflow: hidden; min-height: calc(var(--sp-hero-nav-h, 78px) + 540px); padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 92px; color: #fff; background: radial-gradient(circle at 78% 22%, rgba(var(--product-blue-rgb), 0.32), transparent 34%), var(--product-dark-bg); } .sp-product-hero-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 8% 86%, rgba(var(--product-blue-rgb), 0.18), transparent 26%), linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 52%, transparent 100%); } .sp-product-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr); align-items: center; gap: 36px; } .sp-product-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; color: rgba(234, 246, 255, 0.7); font-size: 13px; } .sp-product-breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.7; } .sp-product-breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-block: -14px; color: rgba(234, 246, 255, 0.78) !important; text-decoration: none; } .sp-product-breadcrumb a:hover, .sp-product-breadcrumb a:focus-visible { color: #fff !important; } .sp-product-hero h1 { margin: 0 0 12px !important; color: #fff !important; font-size: clamp(34px, 4.4vw, 54px) !important; font-weight: 800 !important; letter-spacing: -0.035em; line-height: 1.08 !important; } .sp-product-hero-lead { margin: 0 0 16px !important; color: rgba(234, 246, 255, 0.92) !important; font-size: 18px !important; font-weight: 600; line-height: 1.4 !important; } .sp-product-hero-intro { max-width: 540px; margin: 0 0 24px !important; color: rgba(234, 246, 255, 0.78) !important; font-size: 15px !important; line-height: 1.65 !important; } .sp-product-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .sp-product-hero-points { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 0; padding: 0; list-style: none; } .sp-product-hero-points li { display: inline-flex; align-items: center; gap: 8px; color: rgba(245, 250, 255, 0.92) !important; font-size: 13px; font-weight: 600; } .sp-product-hero-visual { position: relative; min-width: 0; } .sp-product-hero-glow { position: absolute; inset: 8% 4% 4% 8%; border-radius: 28px; background: radial-gradient(circle at 50% 40%, rgba(var(--product-blue-rgb), 0.42), transparent 68%); filter: blur(18px); pointer-events: none; } .sp-product-hero-frame { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--product-radius-lg); background: var(--product-navy-deep); box-shadow: var(--product-shadow-lg); transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); } .sp-product-hero-frame img { display: block; width: 100%; height: auto; object-fit: contain; } .sp-product-hero-badge { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid rgba(220, 233, 244, 0.9); border-radius: 999px; background: #fff; color: var(--product-navy); font-size: 12px; font-weight: 700; box-shadow: var(--product-shadow-sm); animation: sp-product-float 4.5s ease-in-out infinite; } .sp-product-hero-badge-a { top: 18px; left: 8px; } .sp-product-hero-badge-b { right: 12px; bottom: 22px; animation-delay: 1.2s; } .sp-product-badge-icon { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--product-blue-soft); color: var(--product-blue); } .sp-product-badge-icon svg { width: 13px; height: 13px; } @keyframes sp-product-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* -------------------------------------------------------------------------- */ /* Trust strip */ /* -------------------------------------------------------------------------- */ .sp-product-trust { position: relative; z-index: 2; margin-top: -58px; padding-bottom: 28px; } .sp-product-trust-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 8px 6px; list-style: none; border: 1px solid var(--product-border); border-radius: var(--product-radius-lg); background: #fff; box-shadow: var(--product-shadow-md); } .sp-product-trust-card li { display: flex; gap: 12px; min-width: 0; padding: 18px 20px; } .sp-product-trust-card li + li { border-left: 1px solid var(--product-border); } .sp-product-trust-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: var(--product-radius-md); background: var(--product-blue-soft); color: var(--product-blue-ink); } .sp-product-trust-icon svg, .sp-product-feature-icon svg, .sp-product-resource-icon svg, .sp-product-reason-icon svg { width: 20px; height: 20px; } .sp-product-trust-card strong { display: block; margin-bottom: 4px; color: var(--product-navy); font-size: 15px; } .sp-product-trust-card p { margin: 0 !important; color: var(--product-muted) !important; font-size: 13px !important; line-height: 1.45 !important; } /* -------------------------------------------------------------------------- */ /* Overview */ /* -------------------------------------------------------------------------- */ .sp-product-overview { padding: 72px 0 40px; background: #fff; } .sp-product-overview-grid { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); align-items: center; gap: 48px; } .sp-product-overview-copy p { margin: 16px 0 0 !important; color: var(--product-muted) !important; font-size: 16px !important; line-height: 1.7 !important; } .sp-product-screen { overflow: hidden; border: 1px solid var(--product-border); border-radius: var(--product-radius-lg); background: #fff; box-shadow: var(--product-shadow-md); } .sp-product-screen img { display: block; width: 100%; height: auto; object-fit: contain; } .sp-product-callout { display: flex; gap: 12px; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--product-border); border-radius: var(--product-radius-lg); background: var(--product-ice); } .sp-product-callout-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--product-green-tint); color: var(--product-green-ink); } .sp-product-callout strong { display: block; margin-bottom: 4px; color: var(--product-navy); font-size: 15px; } .sp-product-callout p { margin: 0 !important; color: var(--product-muted) !important; font-size: 13px !important; line-height: 1.5 !important; } /* -------------------------------------------------------------------------- */ /* Features / resources */ /* -------------------------------------------------------------------------- */ .sp-product-features, .sp-product-resources { padding: 72px 0; background: radial-gradient(circle at 86% 0%, rgba(var(--product-blue-rgb), 0.08), transparent 28%), var(--product-ice); } .sp-product-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } .sp-product-feature-card, .sp-product-resource-card { height: 100%; min-height: 248px; padding: 24px; border: 1px solid var(--product-border); border-radius: var(--product-radius-lg); background: #fff; box-shadow: var(--product-shadow-sm); } .sp-product-feature-icon, .sp-product-resource-icon, .sp-product-reason-icon { display: grid; width: 42px; height: 42px; margin-bottom: 16px; place-items: center; border-radius: var(--product-radius-md); } .tone-blue .sp-product-feature-icon, .tone-blue .sp-product-resource-icon { background: var(--product-blue-soft); color: var(--product-blue-ink); } .tone-green .sp-product-feature-icon, .tone-green .sp-product-resource-icon { background: var(--product-green-tint); color: var(--product-green-ink); } .tone-orange .sp-product-feature-icon, .tone-orange .sp-product-resource-icon { background: var(--product-orange-tint); color: var(--product-orange-ink); } .tone-purple .sp-product-feature-icon, .tone-purple .sp-product-resource-icon { background: var(--product-purple-tint); color: var(--product-purple-ink); } .tone-pink .sp-product-feature-icon, .tone-pink .sp-product-resource-icon { background: var(--product-pink-tint); color: var(--product-pink-ink); } .tone-yellow .sp-product-feature-icon, .tone-yellow .sp-product-resource-icon { background: var(--product-yellow-tint); color: var(--product-yellow-ink); } .sp-product-feature-card h3, .sp-product-resource-card h3, .sp-product-reason-grid h3 { margin: 0 0 8px !important; color: var(--product-navy) !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.3 !important; } .sp-product-feature-card p, .sp-product-resource-card p, .sp-product-reason-grid p { margin: 0 !important; color: var(--product-muted) !important; font-size: 14px !important; line-height: 1.6 !important; } .sp-product-resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; padding: 0; list-style: none; } .sp-product-resource-card { display: flex; gap: 16px; min-height: 168px; align-items: flex-start; } .sp-product-resource-card .sp-product-resource-icon { margin-bottom: 0; } .sp-product-resource-card.tone-blue { border-top: 3px solid var(--product-blue); } .sp-product-resource-card.tone-green { border-top: 3px solid var(--product-green); } .sp-product-resource-card.tone-orange { border-top: 3px solid var(--product-orange); } .sp-product-resource-card.tone-purple { border-top: 3px solid var(--product-purple); } /* -------------------------------------------------------------------------- */ /* Workflow */ /* -------------------------------------------------------------------------- */ .sp-product-workflow { padding: 72px 0; color: #fff; background: radial-gradient(circle at 82% 18%, rgba(var(--product-blue-rgb), 0.28), transparent 32%), var(--product-dark-bg); } .sp-product-workflow-grid { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); align-items: center; gap: 40px; } .sp-product-workflow-copy h2 { color: #fff !important; } .sp-product-workflow-copy p { margin: 16px 0 0 !important; color: rgba(234, 246, 255, 0.82) !important; font-size: 16px !important; line-height: 1.7 !important; } .sp-product-workflow-panel { margin: 0; padding: 22px; border-radius: var(--product-radius-lg); background: #fff; box-shadow: var(--product-shadow-lg); } .sp-product-workflow-zoom { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; } .sp-product-workflow-zoom img { display: block; width: 100%; height: auto; object-fit: contain; transition: transform 200ms ease; } .sp-product-workflow-zoom:hover img { transform: scale(1.02); } .sp-product-workflow-zoom-label { display: none; margin-top: 10px; color: var(--product-blue-text); font-size: 13px; font-weight: 700; } .sp-product-workflow-panel figcaption { margin-top: 14px; color: var(--product-muted); font-size: 13px; text-align: center; } .sp-product-lightbox { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 24px; background: rgba(4, 31, 58, 0.72); animation: sp-product-fade-in 180ms ease-out; } .sp-product-lightbox-panel { width: min(100%, 1100px); max-height: calc(100vh - 48px); overflow: auto; padding: 18px; border-radius: var(--product-radius-lg); background: #fff; animation: sp-product-pop-in 180ms ease-out; } .sp-product-lightbox.is-closing, .sp-product-lightbox.is-closing .sp-product-lightbox-panel { animation: sp-product-fade-out 160ms ease-in forwards; } @keyframes sp-product-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sp-product-pop-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes sp-product-fade-out { from { opacity: 1; } to { opacity: 0; } } body.sp-product-scroll-lock { overflow: hidden; } /* O widget de chat (z-index 9999) não pode ficar por cima do diálogo */ body.sp-product-scroll-lock #channel-chat-widget { visibility: hidden; } /* Fica fixo no topo/esquerda quando o painel rola (imagem ampliada no mobile) */ .sp-product-lightbox-head { position: sticky; top: 0; left: 0; z-index: 1; background: var(--product-white); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sp-product-lightbox-head h3 { margin: 0 !important; color: var(--product-navy) !important; font-size: 16px !important; } .sp-product-lightbox-close { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: var(--product-radius-sm); background: var(--product-ice); color: var(--product-navy); font-size: 24px; line-height: 1; cursor: pointer; transition: background-color 200ms ease; } .sp-product-lightbox-close:hover { background: var(--product-blue-soft); } .sp-product-lightbox-panel img { display: block; width: 100%; height: auto; object-fit: contain; } /* -------------------------------------------------------------------------- */ /* Demo */ /* -------------------------------------------------------------------------- */ .sp-product-demo { padding: 72px 0; background: #fff; } .sp-product-demo-grid { display: grid; grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr); align-items: center; gap: 40px; } .sp-product-video, .sp-product-video-poster { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 0; border-radius: var(--product-radius-lg); background: var(--product-navy-deep); box-shadow: var(--product-shadow-md); aspect-ratio: 16 / 9; cursor: pointer; } .sp-product-video iframe, .sp-product-video-poster img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .sp-product-video-play { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; width: 68px; height: 68px; place-items: center; border-radius: 50%; background: var(--product-orange-cta); color: #fff; box-shadow: var(--product-shadow-cta); transform: translate(-50%, -50%); transition: transform 200ms ease, background-color 200ms ease; } .sp-product-video-poster:hover .sp-product-video-play { background: var(--product-orange-cta-hover); transform: translate(-50%, -50%) scale(1.06); } .sp-product-demo-copy p { margin: 14px 0 0 !important; color: var(--product-muted) !important; font-size: 15px !important; line-height: 1.65 !important; } .sp-product-demo-list { display: grid; gap: 14px; margin: 20px 0 24px; padding: 0; list-style: none; } .sp-product-demo-list li { display: flex; gap: 10px; align-items: flex-start; } .sp-product-demo-check { display: grid; width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; place-items: center; border-radius: 50%; background: var(--product-blue-soft); color: var(--product-blue-ink); } .sp-product-demo-list strong { display: block; margin-bottom: 2px; color: var(--product-navy); } .sp-product-demo-copy .sp-product-btn-primary { min-width: 220px; } /* -------------------------------------------------------------------------- */ /* Reasons / quote / FAQ / CTA */ /* -------------------------------------------------------------------------- */ .sp-product-reasons { padding: 72px 0; background: #fff; } .sp-product-reason-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .sp-product-reason-grid li { padding: 8px 28px; } .sp-product-reason-grid li + li { border-left: 1px solid var(--product-border); } .sp-product-reason-icon { background: var(--product-blue-soft); color: var(--product-blue-ink); } .sp-product-quote { padding: 0 0 72px; background: #fff; } .sp-product-quote-card { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; padding: 28px 32px; border: 1px solid var(--product-border); border-radius: var(--product-radius-lg); background: var(--product-ice); } .sp-product-quote-mark, .sc-pdf:has(.sp-product) .sp-product-quote-mark { grid-row: 1 / span 2; color: var(--product-blue-text); font-family: Georgia, "Times New Roman", serif !important; font-size: 56px; line-height: 0.7; } .sp-product-quote-card blockquote { margin: 0 !important; padding: 0 !important; background: transparent !important; text-align: left; } .sp-product-quote-card blockquote::before, .sp-product-quote-card blockquote::after { content: none !important; } .sp-product-quote-card p { margin: 0 !important; color: var(--product-navy) !important; font-size: 18px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.55 !important; text-align: left; } .sp-product-quote-card figcaption { display: flex; flex-direction: column; gap: 2px; } .sp-product-quote-card strong { color: var(--product-navy); font-size: 14px; } .sp-product-quote-card figcaption span { color: var(--product-muted); font-size: 13px; } .sp-product-faq { padding: 0 0 72px; background: #fff; } .sp-product-faq-list { display: grid; gap: 10px; } .sp-product-accordion { border: 1px solid var(--product-border); border-radius: var(--product-radius-md); background: #fff; } .sp-product-accordion h3 { margin: 0; } .sp-product-accordion button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 14px 18px; border: 0; background: transparent; color: var(--product-navy); font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; border-radius: var(--product-radius-md); transition: background-color 200ms ease; } .sp-product-accordion button:hover { background: var(--product-ice); } .sp-product-accordion-icon { flex: 0 0 auto; color: var(--product-blue-text); font-size: 22px; line-height: 1; } .sp-product-accordion-panel { display: none; padding: 0 18px 16px; } .sp-product-accordion-panel.is-open { display: block; } .sp-product-accordion-panel p { margin: 0 !important; color: var(--product-muted) !important; font-size: 14px !important; line-height: 1.65 !important; } .sp-product-final { position: relative; overflow: hidden; padding: 72px 0; color: #fff; background: radial-gradient(circle at 86% 20%, rgba(var(--product-blue-rgb), 0.28), transparent 30%), linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 55%, var(--product-blue) 140%); } .sp-product-final-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr); align-items: center; gap: 24px; } .sp-product-final h2 { color: #fff !important; } .sp-product-final p { max-width: 560px; margin: 14px 0 0 !important; color: rgba(234, 246, 255, 0.82) !important; font-size: 16px !important; line-height: 1.65 !important; } .sp-product-final-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .sp-product-final-notes { display: flex; flex-wrap: wrap; gap: 12px 22px; margin: 22px 0 0; padding: 0; list-style: none; } .sp-product-final-notes li { display: inline-flex; align-items: center; gap: 8px; color: rgba(245, 250, 255, 0.9); font-size: 13px; font-weight: 600; } .sp-product-final-chart { justify-self: end; width: min(100%, 360px); height: auto; object-fit: contain; pointer-events: none; opacity: 0.9; } .sp-product.is-strong .sp-product-hero, .sp-product.is-strong .sp-product-workflow, .sp-product.is-strong .sp-product-final { background: radial-gradient(circle at 82% 18%, rgba(var(--product-blue-rgb), 0.4), transparent 32%), linear-gradient(118deg, var(--product-navy-deep) 0%, var(--product-navy) 42%, var(--product-blue-text) 100%); } /* -------------------------------------------------------------------------- */ /* Responsive */ /* -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .sp-product { --product-gutter: 24px; } .sp-product-hero { min-height: 0; padding-bottom: 80px; } .sp-product-hero-grid, .sp-product-overview-grid, .sp-product-workflow-grid, .sp-product-demo-grid { grid-template-columns: 1fr; gap: 28px; } .sp-product-feature-grid, .sp-product-trust-card, .sp-product-resource-grid { grid-template-columns: 1fr 1fr; } .sp-product-trust-card li + li { border-left: 0; } .sp-product-trust-card li:nth-child(odd) { border-right: 1px solid var(--product-border); } .sp-product-hero-frame { transform: none; } .sp-product-final-inner { grid-template-columns: 1fr; } .sp-product-final-chart { position: absolute; right: 0; bottom: 0; width: min(42vw, 280px); opacity: 0.35; } .sp-product-reason-grid { grid-template-columns: 1fr; } .sp-product-reason-grid li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; } .sp-product-reason-grid li:first-child { padding-top: 0; } .sp-product-reason-grid li:last-child { padding-bottom: 0; } .sp-product-reason-grid li + li { border-left: 0; border-top: 1px solid var(--product-border); } .sp-product-reason-grid .sp-product-reason-icon { grid-row: 1 / span 2; margin-bottom: 0; } } @media (max-width: 767px) { .sp-product { --product-gutter: 16px; } .sp-product-hero { padding-top: calc(var(--sp-hero-nav-h, 64px) + 18px); padding-bottom: 72px; } .sp-product-hero h1 { font-size: 34px !important; } .sp-product-hero-actions, .sp-product-final-actions { flex-direction: column; } .sp-product-hero-actions .sp-product-btn, .sp-product-final-actions .sp-product-btn, .sp-product-demo-copy .sp-product-btn-primary { width: 100%; } .sp-product-hero-points { display: grid; gap: 10px; } .sp-product-trust-card, .sp-product-feature-grid, .sp-product-resource-grid { grid-template-columns: 1fr; } .sp-product-trust-card li:nth-child(odd) { border: 0; } .sp-product-workflow-zoom-label { display: block; } .sp-product-quote-card { grid-template-columns: 1fr; padding: 22px; } .sp-product-final-chart { display: none; } .sp-product-overview, .sp-product-features, .sp-product-resources, .sp-product-workflow, .sp-product-demo, .sp-product-reasons, .sp-product-final { padding: 56px 0; } .sp-product-quote, .sp-product-faq { padding-bottom: 56px; } .sp-product-lightbox { padding: 12px; } .sp-product-lightbox-panel { width: 100%; max-height: calc(100vh - 24px); padding: 12px; } /* Ampliar de verdade: a imagem passa da largura da tela e o painel rola */ .sp-product-lightbox-panel img { width: 960px; max-width: none; } } @media (prefers-reduced-motion: reduce) { .sp-product-hero-badge, .sp-product-btn, .sp-product-lightbox, .sp-product-lightbox-panel, .sp-product-lightbox.is-closing, .sp-product-lightbox.is-closing .sp-product-lightbox-panel, .sp-product-workflow-zoom img, .sp-product-video-play { animation: none; transition: none; } .sp-product-btn:hover, .sp-product-btn:focus-visible, .sp-product-workflow-zoom:hover img { transform: none; } .sp-product-video-poster:hover .sp-product-video-play { transform: translate(-50%, -50%); } } /* Lightbox estático: fica no HTML escondido até abrir (sp-static-ui.js) */ .sp-product-lightbox[hidden] { display: none !important; } /* assets/css/sp-versao-full.css */ /* Versão Full (/versao-full) — tokens e escala alinhados a sp-produto.css e às páginas aprovadas */ .sc-pdf:has(.vf-page) { --product-navy: #062b4f; --product-navy-dark: #041f3a; --product-navy-mid: #073b6d; --product-blue: #008ef4; --product-blue-soft: #eaf6ff; --product-ice: #f5faff; --product-orange: #ff6b20; --product-orange-hover: #ed5712; --product-purple: #7259e8; --product-text: #062b4f; --product-muted: #5a6e83; --product-shadow-cta: 0 10px 22px rgba(194, 65, 12, 0.24); --product-orange-cta: #c2410c; --product-orange-cta-hover: #9a3412; --product-radius-sm: 10px; --product-border: #dce9f4; --product-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --product-wrap: 1280px; --product-gutter: 32px; /* Derivados para AA (pendência do DS: --product-blue dá 3,4:1 no branco) */ --cv-blue-text: #0067b8; --cv-neutral-text: #52657a; --vf-accent-dark: #9ed6ff; --vf-text-dark: rgba(234, 246, 255, 0.86); --vf-line-dark: rgba(158, 214, 255, 0.3); --vf-green: #0f7a4c; --vf-teal: #00758a; --cv-shadow-card: 0 16px 34px rgba(6, 43, 79, 0.08); --cv-shadow-media: 0 18px 40px rgba(6, 43, 79, 0.08); --vf-shadow-dark: 0 28px 48px rgba(2, 16, 34, 0.38); } .sc-pdf:has(.vf-page), .sc-pdf:has(.vf-page) :is(h1, h2, h3, p, a, li, span, button, strong, small, b, dt, dd, label, summary, blockquote, cite, figcaption) { font-family: var(--product-font) !important; } .vf-page { color: var(--product-text); background: #fff; overflow-x: clip; } .vf-page *, .vf-page *::before, .vf-page *::after { box-sizing: border-box; } .vf-page :is(h1, h2, h3, p, ul, ol, dl, blockquote) { margin-top: 0; } .vf-page :is(h1, h2, h3) { font-weight: 800 !important; letter-spacing: -0.03em; color: var(--product-text) !important; } .vf-page h2 { text-wrap: balance; margin-bottom: 12px; font-size: clamp(32px, 3.6vw, 40px) !important; line-height: 1.12 !important; } .vf-page p { color: var(--product-muted); font-size: 16px; line-height: 1.65; letter-spacing: 0; } .vf-shell { position: relative; z-index: 2; width: min(calc(100% - (var(--product-gutter) * 2)), var(--product-wrap)); margin-inline: auto; } .vf-page a:focus-visible, .vf-page button:focus-visible, .vf-page summary:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45) !important; outline-offset: 3px; } .vf-eyebrow { margin: 0 0 12px; color: var(--cv-blue-text); font-size: 12px !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } /* Seções escuras */ .vf-hero, .vf-live-data, .vf-case, .vf-final-cta { position: relative; color: #fff; } .vf-hero :is(h1, h2, h3), .vf-live-data :is(h2, h3), .vf-case :is(h2, h3), .vf-final-cta :is(h2, h3) { color: #fff !important; } .vf-hero p, .vf-live-data p, .vf-case p, .vf-final-cta p { color: var(--vf-text-dark); } .vf-hero .vf-eyebrow, .vf-case .vf-eyebrow { color: var(--vf-accent-dark); } .vf-hero::before, .vf-live-data::before, .vf-final-cta::before { content: ""; position: absolute; inset: 0; opacity: 0.18; pointer-events: none; background-image: linear-gradient(30deg, transparent 42%, rgba(158, 214, 255, 0.18) 43%, transparent 44%), linear-gradient(150deg, transparent 42%, rgba(158, 214, 255, 0.15) 43%, transparent 44%); background-size: 112px 96px; } /* Hero */ .vf-hero { overflow: hidden; padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 72px; background: radial-gradient(circle at 76% 34%, rgba(0, 142, 244, 0.28), transparent 34%), linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%); } .vf-orbit { position: absolute; border: 1px solid rgba(158, 214, 255, 0.16); border-radius: 50%; } .vf-orbit-one { width: 430px; height: 430px; right: 8%; top: 120px; } .vf-orbit-two { width: 640px; height: 640px; right: -15%; top: -190px; } .vf-hero-grid { display: grid; grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); gap: 36px; align-items: center; } .vf-breadcrumb ol { align-items: center; } .vf-breadcrumb a { display: inline-block; padding: 12px 0; } .vf-hero h1 { max-width: 17ch; margin-bottom: 16px; font-size: clamp(34px, 4.4vw, 54px) !important; line-height: 1.08 !important; letter-spacing: -0.035em; } .vf-lead { max-width: 520px; margin-bottom: 24px; font-size: 18px !important; } .vf-actions { display: flex; flex-wrap: wrap; gap: 12px; } .vf-proof { display: flex; flex-wrap: wrap; gap: 16px 36px; margin: 0; padding: 28px 0 0; list-style: none; } .vf-proof li { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--vf-accent-dark); } .vf-proof strong { color: #fff; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .vf-proof span { color: var(--vf-text-dark); font-size: 14px; } .vf-hero-visual > img { display: block; width: 100%; height: auto; } .vf-hero-checks, .vf-final-cta ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; color: var(--vf-text-dark); font-size: 14px; } .vf-hero-checks li::before, .vf-final-cta li::before { content: "✓" / ""; margin-right: 8px; color: var(--vf-accent-dark); font-weight: 800; } /* Dados integrados */ .vf-live-data { padding: 72px 0; background: radial-gradient(circle at 52% 42%, rgba(0, 142, 244, 0.28), transparent 30%), linear-gradient(110deg, var(--product-navy-dark), var(--product-navy-mid) 64%, var(--product-navy)); } .vf-live-grid { display: grid; grid-template-columns: 0.95fr 0.9fr 0.85fr; gap: 48px; align-items: center; } .vf-live-copy h2 { max-width: 16ch; } .vf-live-callout { display: inline-block; padding: 10px 16px; border: 1px solid var(--vf-line-dark); border-radius: 12px; background: rgba(4, 31, 58, 0.6); color: var(--vf-accent-dark); font-weight: 700; } .vf-order-card { overflow: hidden; border-radius: 16px; background: #fff; color: var(--product-text); box-shadow: var(--vf-shadow-dark); } .vf-order-title { display: flex; align-items: center; gap: 8px; padding: 16px 18px 12px; border-bottom: 1px solid var(--product-border); font-size: 17px; font-weight: 800; } .vf-order-title span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--vf-green); color: #fff; } .vf-order-card dl { margin: 0; padding: 6px 18px 14px; font-size: 14px; } .vf-order-card dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--product-border); } .vf-order-card dl > div:last-child { border-bottom: 0; } .vf-order-card dt { color: var(--cv-neutral-text); } .vf-order-card dd { margin: 0; color: var(--product-text); font-weight: 600; } .vf-outcomes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .vf-outcomes > li { position: relative; min-height: 52px; display: flex; align-items: center; gap: 14px; padding: 8px 14px; border: 1px solid var(--vf-line-dark); border-radius: 12px; background: rgba(4, 31, 58, 0.55); color: #fff; font-size: 15px; font-weight: 700; } .vf-outcomes > li::before { content: ""; position: absolute; right: 100%; width: 44px; height: 2px; background: var(--vf-accent-dark); } .vf-outcomes span, .vf-feature-icon { display: grid; place-items: center; flex: 0 0 auto; color: #fff; } .vf-outcomes small { display: block; color: var(--vf-text-dark); font-size: 13px; font-weight: 500; line-height: 1.4; } .vf-outcomes span { width: 40px; height: 40px; border-radius: 10px; } /* Tons de ícone: cores sólidas da paleta, com 3:1 ou mais contra o ícone branco */ .vf-tone-blue { background: var(--cv-blue-text); } .vf-tone-green { background: var(--vf-green); } .vf-tone-orange { background: var(--product-orange-hover); } .vf-tone-purple { background: var(--product-purple); } .vf-tone-teal { background: var(--vf-teal); } /* Recursos */ #recursos { scroll-margin-top: var(--sp-hero-nav-h, 78px); } .vf-modules { padding: 72px 0; background: #fff; } .vf-section-head { max-width: 720px; margin: 0 auto 36px; text-align: center; } .vf-section-head p { margin-bottom: 0; } .vf-section-head-left { margin-left: 0; text-align: left; } .vf-feature-icon { width: 52px; height: 52px; border-radius: 50%; } .vf-extras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 48px 0 0; padding: 0; list-style: none; } .vf-extras li { padding: 20px; border: 1px solid var(--product-border); border-radius: 16px; background: var(--product-ice); } .vf-extras strong { display: block; margin-bottom: 6px; color: var(--product-text); font-size: 16px; } .vf-extras span { display: block; color: var(--cv-neutral-text); font-size: 14px; line-height: 1.55; } /* Módulos */ .vf-module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .vf-module-card { min-width: 0; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--product-border); border-radius: 16px; background: #fff; box-shadow: var(--cv-shadow-card); } .vf-module-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .vf-module-head .vf-feature-icon { width: 48px; height: 48px; font-size: 19px; } .vf-module-head h3 { margin: 0; font-size: 19px; line-height: 1.25; } .vf-module-card ul { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; } .vf-module-card li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; color: var(--cv-neutral-text); font-size: 14px; line-height: 1.5; } .vf-module-card li::before { content: "✓" / ""; color: var(--cv-blue-text); font-weight: 700; } .vf-module-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; color: var(--cv-blue-text) !important; font-size: 15px; font-weight: 700; text-decoration: none; } .vf-module-link:hover { text-decoration: underline; } /* Blocos em duas colunas (Reforma, Integrações) */ .vf-reforma, .vf-integracoes { padding: 72px 0; background: var(--product-ice); } .vf-integracoes { background: #fff; } .vf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .vf-split > div > .sp-product-btn, .vf-split .vf-actions { margin-top: 8px; } .vf-integracoes .sp-product-btn-ghost { border-color: var(--product-border); color: var(--cv-blue-text) !important; } .vf-integracoes .sp-product-btn-ghost:hover, .vf-integracoes .sp-product-btn-ghost:focus-visible { background: var(--product-blue-soft); } .vf-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; } .vf-checklist li { padding: 20px; border: 1px solid var(--product-border); border-left: 4px solid var(--cv-blue-text); border-radius: 12px; background: #fff; } .vf-checklist strong { display: block; margin-bottom: 4px; color: var(--product-text); font-size: 16px; } .vf-checklist span { display: block; color: var(--cv-neutral-text); font-size: 14px; line-height: 1.5; } .vf-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } .vf-chips li { padding: 12px 20px; border: 1px solid var(--product-border); border-radius: 999px; background: var(--product-ice); color: var(--product-text); font-size: 16px; font-weight: 700; } /* Gestão */ .vf-gestao { padding: 72px 0; background: #fff; } .vf-media-row { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 40px; align-items: center; margin-bottom: 48px; } .vf-media-row-reverse { grid-template-columns: 0.6fr 1.4fr; } .vf-media-row-reverse .vf-media { order: 2; } .vf-media { margin: 0; overflow: hidden; border: 1px solid var(--product-border); border-radius: 16px; background: var(--product-ice); box-shadow: var(--cv-shadow-media); } .vf-media img { display: block; width: 100%; height: auto; } .vf-media-copy h3 { margin-bottom: 8px; font-size: 24px; } .vf-media-copy p { margin-bottom: 0; } .vf-gestao .vf-extras { margin-top: 0; } .vf-note { margin: 20px 0 0; font-size: 15px; } .vf-note a { color: var(--cv-blue-text) !important; font-weight: 700; } /* Depoimento */ .vf-case { padding: 72px 0; background: linear-gradient(110deg, var(--product-navy-dark), var(--product-navy-mid) 66%, var(--product-navy)); } .vf-case-heading { margin-bottom: 32px; } .vf-case-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .vf-case blockquote { position: relative; margin: 0 !important; padding: 24px 24px 20px 64px !important; border: 1px solid var(--vf-line-dark); border-radius: 16px; background: rgba(4, 31, 58, 0.55) !important; color: #fff; font-size: 17px; line-height: 1.55; text-align: left !important; } .vf-case blockquote::before { content: "“" / "" !important; display: block !important; position: absolute; left: 20px; top: 10px; color: var(--vf-accent-dark); font-size: 56px; line-height: 1; } .vf-case blockquote::after { content: none !important; } .vf-case cite { display: block; margin-top: 12px; color: #fff; font-size: 15px; font-style: normal; font-weight: 800; } .vf-case cite small { display: block; color: var(--vf-text-dark); font-size: 13px; font-weight: 500; } /* Implantação */ .vf-implementation { padding: 72px 0; background: #fff; } .vf-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; } .vf-steps li { position: relative; display: flex; align-items: center; gap: 12px; } .vf-steps li:not(:last-child)::after { content: "→" / ""; position: absolute; right: -18px; color: var(--cv-neutral-text); } .vf-steps li > span { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--cv-blue-text); color: #fff; font-size: 17px; font-weight: 800; } .vf-steps strong, .vf-steps small { display: block; } .vf-steps strong { color: var(--product-text); font-size: 15px; } .vf-steps small { color: var(--cv-neutral-text); font-size: 13px; line-height: 1.35; } /* FAQ */ .vf-faq { padding: 72px 0; background: var(--product-ice); } .vf-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; } .vf-faq details { border: 1px solid var(--product-border); border-radius: 12px; background: #fff; } .vf-faq summary { position: relative; min-height: 48px; display: flex; align-items: center; padding: 12px 44px 12px 16px; border-radius: 12px; color: var(--product-text); font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; } .vf-faq summary:hover { background: var(--product-ice); } .vf-faq summary::-webkit-details-marker { display: none; } .vf-faq summary::after { content: "+" / ""; position: absolute; right: 16px; color: var(--cv-blue-text); font-size: 22px; } .vf-faq details[open] summary::after { content: "−" / ""; } .vf-faq details p a { color: var(--cv-blue-text) !important; font-weight: 700; } .vf-faq details p { margin-bottom: 0; padding: 0 16px 14px; font-size: 15px; } /* CTA final */ .vf-final-cta { padding: 72px 0; background: radial-gradient(circle at 60% 50%, rgba(0, 142, 244, 0.26), transparent 34%), linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%); } .vf-final-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; align-items: center; } .vf-final-cta h2 { max-width: 18ch; } .vf-final-cta img { display: block; width: 100%; height: auto; } @media (max-width: 1199px) { .sc-pdf:has(.vf-page) { --product-gutter: 24px; } .vf-hero-grid, .vf-live-grid, .vf-split, .vf-final-grid { grid-template-columns: 1fr; } .vf-module-grid, .vf-case-list { grid-template-columns: 1fr 1fr; } .vf-media-row, .vf-media-row-reverse { grid-template-columns: 1fr; gap: 20px; } .vf-media-row-reverse .vf-media { order: 0; } .vf-hero-copy { max-width: 640px; } .vf-hero-visual { max-width: 640px; } .vf-outcomes > li::before { display: none; } /* Dados: texto em cima, pedido e resultados lado a lado */ .vf-live-grid { grid-template-columns: 1fr 1fr; } .vf-live-copy { grid-column: 1 / -1; } /* Peças empilhadas não esticam até a largura toda */ .vf-final-cta img { max-width: 640px; } .vf-extras { grid-template-columns: 1fr 1fr; } .vf-steps { grid-template-columns: repeat(3, 1fr); } .vf-steps li::after { display: none; } } @media (max-width: 767px) { .sc-pdf:has(.vf-page) { --product-gutter: 16px; } .vf-live-data, .vf-modules, .vf-reforma, .vf-gestao, .vf-integracoes, .vf-case, .vf-implementation, .vf-faq, .vf-final-cta { padding: 56px 0; } .vf-hero { padding-bottom: 56px; } .vf-page .sp-product-btn { width: 100%; } .vf-module-grid, .vf-case-list, .vf-checklist, .vf-extras, .vf-faq-grid, .vf-steps { grid-template-columns: 1fr; } .vf-module-card { padding: 20px; } .vf-live-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .vf-page .sp-product-btn { transition: none; } .vf-page .sp-product-btn:hover, .vf-page .sp-product-btn:focus-visible { transform: none; } } /* Fluxo completo (imagem do Figma) */ .vf-fluxo { padding: 72px 0; background: var(--product-ice); } .vf-fluxo-img { position: relative; display: block; max-width: 1100px; margin: 32px auto 0; border-radius: 16px; overflow: hidden; box-shadow: var(--cv-shadow-media); } .vf-fluxo-img img { display: block; width: 100%; height: auto; } .vf-fluxo-mais { margin: 20px 0 0; text-align: center; } .vf-fluxo-mais a { color: var(--cv-blue-text); font-weight: 700; } @media (max-width: 767px) { .vf-fluxo { padding: 56px 0; } } /* ========================================================================== */ /* Auditoria de design (/auditor-site, 06/10/2026) */ /* ========================================================================== */ /* selos do topo: contraste AA e toque de 44px */ .vf-page .sp-hero-selo { min-height: 44px; } .vf-page .sp-hero-selo--preco { background: linear-gradient(135deg, #c2410c, #9a3412) !important; } /* eyebrow azul nas seções claras (antes perdia para .vf-page p e saía cinza) */ .vf-page .vf-eyebrow { color: var(--cv-blue-text); } .vf-page .vf-hero .vf-eyebrow, .vf-page .vf-live-data .vf-eyebrow, .vf-page .vf-case .vf-eyebrow, .vf-page .vf-final-cta .vf-eyebrow { color: var(--vf-accent-dark); } /* margens que a regra geral zerava */ .vf-page .vf-note, .vf-page .vf-fluxo-mais { margin-top: 20px; } .vf-page .vf-hero-checks { margin-top: 16px; } .vf-page .vf-condicoes, .vf-page .vf-extras { margin-top: 48px; } /* links soltos com toque de 44px */ .vf-page .vf-fluxo-mais a, .vf-page .vf-note a { display: inline-flex; align-items: center; min-height: 44px; } /* fundos alternados: fluxo claro, reforma branca, gestão clara, integrações branca, implantação clara */ .vf-page .vf-reforma { background: #fff; } .vf-page .vf-gestao { background: var(--product-ice); } .vf-page .vf-integracoes { background: #fff; } .vf-page .vf-implementation { background: var(--product-ice); } /* telas da gestão com zoom */ .vf-page .vf-media.spz-gatilho { position: relative; } /* imagens do topo e da chamada final com cantos e sombra (o fundo da imagem vira moldura) */ /* imagens do topo e da chamada final já vêm sem fundo (só os aparelhos) */ /* depoimentos: sem cartão sozinho na linha no tablet */ @media (max-width: 1199px) and (min-width: 768px) { .vf-page .vf-case-list { grid-template-columns: 1fr; } } /* reauditoria: foco igual ao resto da página nas telas com zoom; cards brancos sobre fundo claro */ .vf-page [role=button]:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45) !important; outline-offset: 3px; } .vf-page .vf-gestao .vf-extras li, .vf-page .vf-implementation .vf-extras li { background: #fff; } /* telas da Gestão vêm sem fundo: sem caixa em volta */ .vf-page .vf-media { border: 0; background: none; box-shadow: none; overflow: visible; border-radius: 0; } /* assets/css/sp-movimento.css */ /* Movimento discreto (js/sp-movimento.js), 06/10/2026. Regras: só transform e opacity (CLS zero); nada some sem a classe html.anim-ok, que o JS só põe quando o navegador não pede "reduzir movimento"; loops pausam fora da tela ([data-anima-area].em-tela). O topo da página (título, texto, botões, imagem principal) nunca fica escondido nem atrasado. */ @media (prefers-reduced-motion: no-preference) { :root { --sm-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --sm-ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ---------- Revelar ao rolar ---------- */ html.anim-ok [data-revela]:not(.is-visto) { opacity: 0; transform: var(--revela-de, translate3d(0, 20px, 0)); } html.anim-ok [data-revela].is-visto:not(.is-pronto) { transition: opacity 0.7s var(--sm-ease) var(--atraso, 0ms), transform 0.7s var(--sm-ease) var(--atraso, 0ms); } /* telas grandes entram com um leve zoom; resultados do pedido entram da esquerda (do pedido para o setor) */ .vf-page .vf-media, .vf-page .vf-fluxo-img, .vf-page .vf-final-cta img { --revela-de: translate3d(0, 24px, 0) scale(0.98); } .vf-page .vf-outcomes > li { --revela-de: translate3d(-16px, 0, 0); } /* ---------- Pedido: conectores aparecem em sequência ---------- */ html.anim-ok .vf-outcomes > li[data-revela]::before { transform-origin: left center; transform: scaleX(0); } html.anim-ok .vf-outcomes > li.is-visto::before { transform: scaleX(1); transition: transform 0.45s var(--sm-ease) calc(var(--atraso, 0ms) + 0.2s); } html.anim-ok .vf-order-card:not(.is-visto) .vf-order-title span { transform: scale(0.4); } html.anim-ok .vf-order-card.is-visto:not(.is-pronto) .vf-order-title span { transition: transform 0.5s var(--sm-ease-mola) calc(var(--atraso, 0ms) + 0.35s); } /* ---------- Hover: elevação suave dos cartões ---------- */ @media (hover: hover) { .vf-module-card, .vf-extras li, .vf-checklist li, .vf-case blockquote, .vf-faq details, .vf-chips li, .vf-outcomes > li { transition: transform 0.25s var(--sm-ease), box-shadow 0.25s var(--sm-ease), border-color 0.25s var(--sm-ease), background-color 0.25s var(--sm-ease); } .vf-module-card:hover { transform: translateY(-4px); border-color: #b9dcf5; box-shadow: 0 22px 44px rgba(6, 43, 79, 0.13); } .vf-extras li:hover, .vf-checklist li:hover, .vf-faq details:hover { transform: translateY(-3px); border-color: #b9dcf5; box-shadow: 0 14px 30px rgba(6, 43, 79, 0.09); } .vf-checklist li:hover { border-left-color: var(--cv-blue-text); } .vf-chips li:hover { transform: translateY(-2px); border-color: #b9dcf5; box-shadow: 0 10px 22px rgba(6, 43, 79, 0.08); } .vf-case blockquote:hover, .vf-outcomes > li:hover { transform: translateY(-3px); border-color: rgba(158, 214, 255, 0.6); box-shadow: 0 18px 36px rgba(2, 16, 34, 0.32); } /* ícones: micro-movimento */ .vf-module-card .vf-feature-icon, .vf-outcomes > li > span { transition: transform 0.4s var(--sm-ease-mola); } .vf-module-card:hover .vf-feature-icon, .vf-outcomes > li:hover > span { transform: scale(1.08) rotate(-6deg); } /* setas dos links e botões andam um pouco */ .vf-page .vf-module-link > span, .vf-page .sp-product-btn > span[aria-hidden="true"] { display: inline-block; transition: transform 0.25s var(--sm-ease); } .vf-page .vf-module-link:hover > span, .vf-page .sp-product-btn:hover > span[aria-hidden="true"] { transform: translateX(3px); } } /* ---------- Brilho no botão laranja principal (a cada 7 s, com a área na tela) ---------- */ html.anim-ok .vf-brilho { position: relative; overflow: hidden; isolation: isolate; } html.anim-ok .vf-brilho::after { content: ""; position: absolute; inset: 0; z-index: -1; /* acima do fundo do botão, abaixo do texto */ pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.26) 50%, transparent 70%); transform: translateX(-120%); } html.anim-ok [data-anima-area].em-tela .vf-brilho::after { animation: sm-brilho 7s var(--sm-ease) 2.5s infinite; } @keyframes sm-brilho { 0% { transform: translateX(-120%); } 16%, 100% { transform: translateX(120%); } } /* ---------- Destaque com borda de luz girando ("O status do pedido fica...") ---------- */ html.anim-ok .vf-live-callout { position: relative; overflow: hidden; isolation: isolate; border-color: transparent; background: transparent; } html.anim-ok .vf-live-callout::before, html.anim-ok .vf-live-callout::after { content: ""; position: absolute; pointer-events: none; } html.anim-ok .vf-live-callout::before { z-index: -2; left: 50%; top: 50%; width: max(220%, 520px); aspect-ratio: 1; translate: -50% -50%; background: conic-gradient(from 0deg, rgba(158, 214, 255, 0.3) 0 62%, rgba(158, 214, 255, 0.95) 80%, rgba(158, 214, 255, 0.3) 96%); } html.anim-ok .vf-live-callout::after { z-index: -1; inset: 1px; border-radius: 11px; background: #05284a; } html.anim-ok [data-anima-area].em-tela .vf-live-callout::before { animation: sm-gira 7s linear infinite; } @keyframes sm-gira { to { rotate: 1turn; } } /* ---------- Fundo do topo: órbitas respirando (só decoração) ---------- */ html.anim-ok [data-anima-area] .vf-orbit-one { animation: sm-orbita 16s ease-in-out infinite alternate; } html.anim-ok [data-anima-area] .vf-orbit-two { animation: sm-orbita 22s ease-in-out -6s infinite alternate-reverse; } @keyframes sm-orbita { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-14px, 10px, 0) scale(1.05); } } /* ---------- Imagens dos aparelhos flutuando (só depois de carregadas) ---------- */ html.anim-ok img.is-flutuando:not([data-revela]), html.anim-ok img.is-flutuando.is-pronto { animation: sm-flutua 7s ease-in-out infinite; } @keyframes sm-flutua { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } } html.anim-ok [data-anima-area]:not(.em-tela) :is(.vf-orbit, img.is-flutuando) { animation-play-state: paused; } /* ---------- Telas da Gestão: inclinação leve com o mouse ---------- */ [data-tilt] img { transition: transform 0.6s var(--sm-ease); } [data-tilt] img.is-tilt { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.015); transition-duration: 0.18s; } } @media print { html.anim-ok [data-revela] { opacity: 1 !important; transform: none !important; } } /* assets/css/sp-fluxo.css */ /* Fluxo interativo da Versão Full (Components/Fluxo/FluxoInterativo.razor + js/fluxo-interativo.js). Sem JS tudo aparece aberto (.fxi sem .fxi-js). Animações só com transform/opacity e só sem "reduzir movimento". */ .fxi { --fx-navy: #062b4f; --fx-azul: #008ef4; --fx-azul-txt: #0067b8; --fx-laranja: #c2410c; --fx-fundo: #f3f6fb; --fx-borda: #d9e4f0; --fx-txt: #062b4f; --fx-muted: #4a5e74; --fx-gap: 40px; --fx-raio: 14px; margin-top: 32px; color: var(--fx-txt); font-family: Inter, "Segoe UI", sans-serif; text-align: left; } .fxi *, .fxi *::before, .fxi *::after { box-sizing: border-box; } .fxi ul, .fxi ol { list-style: none; margin: 0; padding: 0; } .fxi h3, .fxi h4 { margin: 0; color: var(--fx-txt); letter-spacing: 0; } .fxi .fxi-mini { margin: 0 0 10px; font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: inherit; } .fxi .fxi-mini--azul { color: var(--fx-azul-txt); } .fxi a:focus-visible, .fxi button:focus-visible { outline: 3px solid #0a95ff !important; outline-offset: 3px; border-radius: 10px; } /* ---------- Selos e chips ---------- */ .fxi-selo { display: inline-flex; align-items: center; flex: none; margin-left: 6px; padding: 2px 6px; border-radius: 999px; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .04em; white-space: nowrap; } .fxi-selo--novo { background: var(--fx-laranja); color: #fff; } .fxi-selo--breve { background: #fff; color: var(--fx-navy); box-shadow: inset 0 0 0 1.5px #5b7590; } .fxi-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fxi-chips > li { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 7px; background: var(--tom-bg, #eaf3fc); color: var(--tom-txt, var(--fx-azul-txt)); font-size: 13px; line-height: 1.35; font-weight: 600; } .fxi-chips > li.is-breve { background: #fff; color: #2c4560; box-shadow: inset 0 0 0 1px #c6d3e1; } /* ---------- Barra de cima ---------- */ .fxi-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; } .fxi-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--fx-muted); } .fxi-legenda li { display: inline-flex; align-items: center; gap: 8px; } .fxi-legenda .fxi-selo { margin: 0; } .fxi-legenda-seta { position: relative; width: 34px; height: 2px; background: #7d93ab; } .fxi-legenda-seta::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid #7d93ab; border-right: 0; } .fxi-acoes { display: flex; flex-wrap: wrap; gap: 10px; } .fxi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; font: 700 14px/1.2 Inter, "Segoe UI", sans-serif; cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s, box-shadow .2s; } .fxi-btn svg { width: 18px; height: 18px; flex: none; } .fxi-btn--pri { border: 0; background: var(--fx-navy); color: #fff; } .fxi-btn--pri:hover { background: #0b3d6e; color: #fff; } .fxi-btn--pri[aria-pressed="true"] { background: var(--fx-laranja); } .fxi-btn--sec { border: 1.5px solid #b9cde2; background: #fff; color: var(--fx-azul-txt); } .fxi-btn--sec:hover { border-color: var(--fx-azul-txt); color: var(--fx-azul-txt); } /* ---------- Abas das 8 áreas ---------- */ .fxi-abas { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; } .fxi-aba { display: flex; align-items: center; gap: 10px; height: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1.5px solid var(--fx-borda); color: var(--fx-txt); text-decoration: none; transition: border-color .2s, background-color .2s, color .2s, box-shadow .2s; } .fxi-aba:hover { border-color: var(--tom); color: var(--fx-txt); box-shadow: 0 6px 16px rgba(6, 43, 79, .08); } .fxi-aba-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--tom-bg); color: var(--tom-txt); } .fxi-aba-ic svg { width: 20px; height: 20px; } .fxi-aba-txt { display: flex; flex-direction: column; min-width: 0; } .fxi-aba-nome { font-size: 13.5px; line-height: 1.2; font-weight: 700; } .fxi-aba-qtd { margin-top: 3px; font-size: 12px; line-height: 1.2; color: var(--fx-muted); } .fxi-aba[aria-selected="true"] { background: var(--tom-txt); border-color: var(--tom-txt); color: #fff; box-shadow: 0 10px 22px rgba(6, 43, 79, .16); } .fxi-aba[aria-selected="true"] .fxi-aba-qtd { color: rgba(255, 255, 255, .9); } .fxi-aba[aria-selected="true"] .fxi-aba-ic { background: rgba(255, 255, 255, .18); color: #fff; } /* ---------- Área (raia) ---------- */ .fxi-areas { margin-top: 16px; display: grid; gap: 16px; } .fxi-area { scroll-margin-top: 96px; padding: 22px 26px 26px; border-radius: 20px; background: var(--tom-bg); border: 1px solid color-mix(in srgb, var(--tom) 22%, transparent); } .fxi-area-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; } .fxi-area-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--tom-txt); color: #fff; } .fxi-area-ic svg { width: 26px; height: 26px; } .fxi-area-tit { flex: 1 1 220px; min-width: 0; } .fxi .fxi-area-tit h3 { font-size: 24px; line-height: 1.2; } .fxi .fxi-area-tit p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--fx-muted); } .fxi-area-link, .fxi-mais { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-size: 14px; font-weight: 700; color: var(--tom-txt, var(--fx-azul-txt)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .fxi-area-link:hover, .fxi-mais:hover { color: var(--fx-navy); } .fxi-abrir { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--tom-txt) 40%, #fff); background: #fff; color: var(--tom-txt); font: 700 13px/1.2 Inter, "Segoe UI", sans-serif; cursor: pointer; } .fxi-abrir:hover { border-color: var(--tom-txt); } .fxi-trilho + .fxi-trilho { margin-top: 18px; } .fxi .fxi-trilho-tit { margin: 0 0 8px; font-size: 12px; line-height: 1.3; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tom-txt); } .fxi-etapas { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--fx-gap); row-gap: 16px; align-items: start; } .fxi-etapa { position: relative; min-width: 0; scroll-margin-top: 110px; } /* Conector entre etapas: linha + ponta; o ponto corre pela linha. */ .fxi-conector { position: absolute; top: 31px; left: calc(var(--fx-gap) * -1); width: var(--fx-gap); height: 2px; pointer-events: none; } .fxi-conector::before { content: ""; position: absolute; inset: 0 7px 0 4px; background: color-mix(in srgb, var(--tom-txt) 55%, #fff); border-radius: 2px; transform-origin: left center; } .fxi-conector::after { content: ""; position: absolute; right: 1px; top: -5px; border: 6px solid transparent; border-right: 0; border-left: 8px solid color-mix(in srgb, var(--tom-txt) 70%, #fff); } .fxi-conector i { position: absolute; left: 2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--tom); opacity: 0; } .fxi-card { position: relative; background: #fff; border: 1px solid var(--fx-borda); border-radius: var(--fx-raio); box-shadow: 0 4px 14px rgba(6, 43, 79, .06); overflow: hidden; } .fxi-card::before { content: ""; position: absolute; left: 16px; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--tom); } .fxi-etapa-tit, .fxi-etapa-btn { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n nome" "n qtd"; column-gap: 10px; align-items: center; padding: 14px 14px 10px; font-size: 15px; line-height: 1.25; } .fxi-etapa-n { grid-area: n; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tom-bg); color: var(--tom-txt); font-size: 12.5px; font-weight: 800; } .fxi-etapa-nome { grid-area: nome; font-weight: 700; color: var(--fx-txt); } .fxi-etapa-qtd { grid-area: qtd; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--fx-muted); } .fxi-etapa-corpo { padding: 0 14px 14px; } .fxi .fxi-etapa-resumo { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--fx-muted); } .fxi-etapa-corpo .fxi-chips > li { font-size: 12.5px; } /* Ligação dentro da etapa */ .fxi .fxi-liga { margin: 10px 0 0; } .fxi-liga a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1.5px dashed color-mix(in srgb, var(--tom-txt) 55%, #fff); background: #fff; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--fx-txt); text-decoration: none; } .fxi-liga a:hover { border-style: solid; color: var(--fx-txt); } .fxi-liga-rot { font-style: italic; } .fxi-liga .fxi-selo { margin-left: 0; } .fxi-liga-dest { margin-left: auto; font-weight: 800; color: var(--tom-txt); } /* Saída para o Financeiro */ .fxi-saida { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 12px 0 0 auto; min-height: 46px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--fx-borda); font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--fx-txt); text-decoration: none; } .fxi-saida:hover { border-color: var(--fx-azul-txt); color: var(--fx-txt); } .fxi-saida-linha { position: relative; flex: none; width: 46px; height: 2px; background: #8aa2bb; overflow: visible; } .fxi-saida-linha::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-right: 0; border-left: 8px solid #8aa2bb; } .fxi-saida-linha i { position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--fx-azul); opacity: 0; } .fxi-saida-rot { font-style: italic; color: var(--fx-muted); } .fxi-saida-dest { font-weight: 800; color: var(--fx-azul-txt); } /* Ligações com outras áreas */ .fxi-ligacoes { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .72); border: 1px solid var(--fx-borda); } .fxi .fxi-ligacoes-tit { margin-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fx-muted); } .fxi-ligacoes ul { display: grid; gap: 8px; } .fxi-ligacoes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font-size: 14px; line-height: 1.4; } .fxi-ligacoes-rot { font-style: italic; color: var(--tom-txt); font-weight: 700; } .fxi-ir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: var(--tom-txt); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; } .fxi-ir:hover { color: #fff; filter: brightness(1.12); } /* ---------- Desce para o financeiro ---------- */ .fxi .fxi-desce { display: flex; justify-content: center; margin: 14px 0; } .fxi-desce span { position: relative; padding: 6px 14px 6px 34px; border-radius: 999px; background: #fff; border: 1px solid var(--fx-borda); font-size: 13px; font-weight: 700; color: var(--fx-azul-txt); } .fxi-desce span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); } /* ---------- Financeiro → Fiscal e Gestão ---------- */ .fxi-destino { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; } .fxi-fin { position: relative; scroll-margin-top: 96px; padding: 26px; border-radius: 22px; color: #fff; background: linear-gradient(180deg, #008ef4 0%, #0a5fb0 38%, #062b4f 100%); box-shadow: 0 24px 48px rgba(6, 43, 79, .22); } .fxi-fin-cab, .fxi-bloco--gestao { --product-text: #fff; } .fxi .fxi-fin-cab h3 { color: #fff; font-size: 30px; line-height: 1.15; } .fxi .fxi-fin-cab p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .92); } .fxi-fin-anda { margin-top: 18px; padding: 14px; border-radius: 14px; background: rgba(4, 31, 58, .32); border: 1px solid rgba(255, 255, 255, .22); } .fxi-fin-anda ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 8px 26px; } .fxi-fin-anda li { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; padding: 8px 10px; border-radius: 9px; background: #fff; color: var(--fx-navy); font-size: 13px; line-height: 1.3; font-weight: 700; text-align: center; } .fxi-fin-anda li + li::before { content: "→"; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); color: #fff; font-weight: 800; } .fxi .fxi-fin-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .fxi-fin-cartao { position: relative; scroll-margin-top: 110px; padding: 16px; border-radius: 14px; background: #fff; color: var(--fx-txt); --tom-bg: #eaf3fc; --tom-txt: #0067b8; } .fxi-fin-cartao--boleto { grid-row: span 2; } .fxi .fxi-fin-cartao h4 { font-size: 17px; line-height: 1.25; } .fxi .fxi-fin-cartao p { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--fx-muted); } .fxi-fin-cartao .fxi-mais { margin-top: 6px; } .fxi-fin-cartao::after { content: ""; position: absolute; inset: -4px; border-radius: 18px; border: 3px solid #ffb27d; opacity: 0; pointer-events: none; } .fxi-fin-cartao.is-recebe::after { opacity: 1; } .fxi-fin-recebe { margin-top: 16px; } .fxi-fin-recebe ul { display: flex; flex-wrap: wrap; gap: 8px; } .fxi-fin-recebe a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 999px; background: var(--tom-txt); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); } .fxi-fin-recebe a:hover { color: #fff; filter: brightness(1.12); } .fxi-fin-recebe a.is-ativa { box-shadow: 0 0 0 3px #fff; } .fxi-depois { display: grid; gap: 20px; } .fxi-bloco { position: relative; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--fx-borda); box-shadow: 0 6px 18px rgba(6, 43, 79, .06); } .fxi-bloco::before { content: ""; position: absolute; left: 20px; top: 0; width: 30px; height: 4px; border-radius: 0 0 4px 4px; background: var(--tom, #0f9195); } .fxi .fxi-bloco h3 { font-size: 21px; line-height: 1.2; } .fxi .fxi-bloco > p { margin: 6px 0 12px; font-size: 14px; line-height: 1.5; color: var(--fx-muted); } .fxi .fxi-bloco .fxi-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 8px 0 0; } .fxi-bloco--fiscal { --tom: #0f9195; --tom-bg: #e2f4f4; --tom-txt: #0a7073; } .fxi-bloco--estoque { --tom: #1f9d55; --tom-bg: #e6f5ec; --tom-txt: #13753d; } .fxi-bloco--integracoes { --tom: #7a4fd6; --tom-bg: #efe9fb; --tom-txt: #6236c4; } .fxi-bloco--seguranca { --tom: #062b4f; --tom-bg: #e9eef5; --tom-txt: #062b4f; } .fxi-bloco--gestao { --tom: #ff8a3d; --tom-bg: rgba(255, 255, 255, .1); --tom-txt: #fff; background: var(--fx-navy); border-color: var(--fx-navy); color: #fff; } .fxi .fxi-bloco--gestao h3 { color: #fff; } .fxi .fxi-bloco--gestao > p { color: rgba(255, 255, 255, .88); } .fxi-bloco--gestao .fxi-chips > li { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } .fxi .fxi-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; } .fxi-numeros li { padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .88); } .fxi-numeros strong { display: block; font-size: 22px; line-height: 1.15; color: #ffb27d; } .fxi-todas { margin-top: 28px; } .fxi-todas-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .fxi-base { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--fx-borda); --tom-bg: #edf2f8; --tom-txt: #233d58; } .fxi .fxi-base h3 { margin-bottom: 10px; font-size: 17px; line-height: 1.3; } /* ---------- Com JS: abas, etapas recolhidas ---------- */ .fxi-js .fxi-area[hidden] { display: none; } .fxi-js .fxi-etapa-tit { display: block; padding: 0; font-size: inherit; } .fxi-etapa-btn { width: 100%; min-height: 64px; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; font-size: 15px; grid-template-columns: auto 1fr auto; grid-template-areas: "n nome seta" "n qtd seta"; } .fxi-etapa-btn::after { content: ""; grid-area: seta; width: 9px; height: 9px; margin: 0 4px 4px 6px; border-right: 2px solid #7d93ab; border-bottom: 2px solid #7d93ab; transform: rotate(45deg); transition: transform .25s; } .fxi-etapa-btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -4px; } .fxi-etapa-btn:hover .fxi-etapa-nome { color: var(--tom-txt); } .fxi-js .fxi-etapa-corpo[hidden] { display: none; } .fxi-etapa.is-aberta .fxi-card { border-color: color-mix(in srgb, var(--tom) 45%, #fff); box-shadow: 0 10px 24px rgba(6, 43, 79, .1); } .fxi-etapa.is-alvo .fxi-card { box-shadow: 0 0 0 3px var(--tom-txt), 0 12px 28px rgba(6, 43, 79, .16); } .fxi-js.is-tudo .fxi-area[hidden] { display: block; } .fxi-area-cab .fxi-abrir { margin-left: auto; } /* ---------- Animações (só sem reduzir movimento) ---------- */ @media (prefers-reduced-motion: no-preference) { .fxi-area.is-espera .fxi-card, .fxi-area.is-espera .fxi-saida { opacity: 0; } .fxi-area.is-tocando .fxi-card { animation: fxi-entra .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 170ms); } .fxi-area.is-tocando .fxi-conector::before { animation: fxi-risca .35s ease-out both; animation-delay: calc(var(--i) * 170ms - 120ms); } .fxi-area.is-tocando .fxi-conector::after { animation: fxi-aparece .2s ease-out both; animation-delay: calc(var(--i) * 170ms + 60ms); } .fxi-area.is-tocando .fxi-saida { animation: fxi-entra .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 170ms); } .fxi-area.em-tela .fxi-conector i { animation: fxi-corre 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 170ms + 600ms); } .fxi-area.em-tela .fxi-saida-linha i { animation: fxi-corre-saida 2.4s ease-in-out infinite; animation-delay: 1.2s; } .fxi-etapa-corpo.is-abrindo { animation: fxi-abre .28s ease-out both; } .fxi-etapa.is-alvo .fxi-card { animation: fxi-pulsa .7s ease-out 2; } .fxi-fin-cartao.is-recebe.is-chegou::after { animation: fxi-anel 1.1s ease-out 2; } .fxi-fin-cartao::after { transition: opacity .3s; } .fxi .fxi-desce span::before { animation: fxi-desce 1.6s ease-in-out infinite; } .fxi-ligacoes.is-destaque { animation: fxi-pulsa .7s ease-out 2; } } @keyframes fxi-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes fxi-risca { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes fxi-aparece { from { opacity: 0; } to { opacity: 1; } } @keyframes fxi-corre { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateX(calc(var(--fx-gap) - 18px)); } 100% { opacity: 0; transform: translateX(calc(var(--fx-gap) - 18px)); } } @keyframes fxi-corre-saida { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 75% { opacity: 1; transform: translateX(38px); } 100% { opacity: 0; transform: translateX(38px); } } @keyframes fxi-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes fxi-pulsa { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } } @keyframes fxi-anel { 0% { opacity: 1; transform: scale(1); } 60% { opacity: .2; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } } @keyframes fxi-desce { 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(3px) rotate(45deg); } } /* ---------- Responsivo ---------- */ @media (max-width: 1199px) { .fxi-abas { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1023px) { .fxi { --fx-gap: 26px; } .fxi-destino { grid-template-columns: 1fr; } .fxi-depois { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fxi-todas-grade { grid-template-columns: 1fr 1fr; } /* Etapas empilhadas (acordeão vertical) com seta para baixo */ .fxi-etapas { grid-template-columns: 1fr; row-gap: var(--fx-gap); } .fxi-conector { top: calc(var(--fx-gap) * -1); left: 28px; width: 2px; height: var(--fx-gap); } .fxi-conector::before { inset: 3px 0 7px 0; transform-origin: center top; } .fxi-conector::after { right: auto; left: -5px; top: auto; bottom: 0; border: 6px solid transparent; border-bottom: 0; border-top: 8px solid color-mix(in srgb, var(--tom-txt) 70%, #fff); } .fxi-conector i { left: -3px; top: 2px; } .fxi-saida { margin: 12px 0 0; } @media (prefers-reduced-motion: no-preference) { .fxi-area.is-tocando .fxi-conector::before { animation-name: fxi-risca-v; } .fxi-area.em-tela .fxi-conector i { animation-name: fxi-corre-v; } } } @keyframes fxi-risca-v { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes fxi-corre-v { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 70% { opacity: 1; transform: translateY(calc(var(--fx-gap) - 16px)); } 100% { opacity: 0; transform: translateY(calc(var(--fx-gap) - 16px)); } } @media (max-width: 767px) { .fxi { margin-top: 24px; } .fxi-barra { flex-direction: column; align-items: stretch; } .fxi-acoes { display: grid; grid-template-columns: 1fr; } .fxi-abas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .fxi-aba { padding: 8px 10px; gap: 8px; } .fxi-aba-ic { width: 30px; height: 30px; } .fxi-area { padding: 16px 14px 18px; border-radius: 16px; } .fxi .fxi-area-tit h3 { font-size: 20px; } .fxi-area-cab .fxi-abrir { margin-left: 0; } .fxi-depois, .fxi-todas-grade, .fxi .fxi-fin-cartoes { grid-template-columns: 1fr; } .fxi-fin-cartao--boleto { grid-row: auto; } .fxi-fin { padding: 20px 16px; border-radius: 18px; } .fxi .fxi-fin-cab h3 { font-size: 25px; } .fxi-fin-anda ol { grid-template-columns: 1fr; gap: 22px; } .fxi-fin-anda li + li::before { content: "↓"; left: 14px; top: -20px; transform: none; } .fxi-ligacoes li { flex-direction: column; align-items: flex-start; } .fxi-saida { flex-wrap: wrap; border-radius: 14px; } } /* assets/css/sp-app-mobile.css */ .am-page{--am-navy:#031d3f;--am-blue:#087bea;--am-cyan:#1cc6ff;--am-orange:#ff6a18;--am-ink:#061d4f;--am-muted:#4d6690;font-family:Inter,Arial,sans-serif;color:var(--am-ink);background:#fff;overflow:hidden}.am-page *{box-sizing:border-box}.am-shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}.am-section{padding:72px 0}.am-page h1,.am-page h2,.am-page h3,.am-page p{margin-top:0}.am-page h1,.am-page h2,.am-page h3{font-weight:800;letter-spacing:-.035em}.am-page p{line-height:1.58}.am-hero{min-height:620px;padding:138px 0 80px;background:radial-gradient(circle at 72% 42%,rgba(16,131,255,.32),transparent 33%),linear-gradient(118deg,#03172f 0%,#032a5d 58%,#041831 100%);color:#fff;position:relative}.am-hero:after,.am-flow:after,.am-video:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(30deg,transparent 48%,rgba(39,167,255,.2) 49%,transparent 51%),linear-gradient(150deg,transparent 48%,rgba(39,167,255,.15) 49%,transparent 51%);background-size:120px 90px}.am-hero-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:28px;align-items:center;position:relative;z-index:1}.am-eyebrow{display:block;color:#21b9ff;font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}.am-hero h1{font-size:clamp(42px,5vw,66px);line-height:1.02;margin-bottom:20px;max-width:650px}.am-hero-copy>p{font-size:19px;max-width:600px;color:#e0efff;margin-bottom:28px}.am-actions{display:flex;flex-wrap:wrap;gap:14px}.am-btn{min-height:50px;padding:0 24px;border-radius:7px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:.22s ease}.am-btn-primary{color:#fff!important;background:linear-gradient(135deg,#ff7b16,#ff4f12);box-shadow:0 10px 24px rgba(255,91,18,.28)}.am-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,91,18,.35)}.am-btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.65);background:rgba(4,35,72,.35)}.am-hero-benefits{display:flex;gap:26px;margin-top:28px;color:#e9f6ff;font-size:14px;font-weight:600}.am-hero-benefits i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-right:7px;background:#087bea;color:#fff}.am-hero-media{position:relative}.am-hero-media img{display:block;width:110%;max-width:none;margin-left:-5%;filter:drop-shadow(0 24px 35px rgba(0,0,0,.3))}.am-handnote{font-family:Caveat,cursive;color:#087bea;font-weight:700;font-size:24px;line-height:1.05;transform:rotate(-6deg);position:absolute}.am-handnote-hero{right:-10px;top:0;color:#32c7ff}.am-trust-wrap{position:relative;z-index:3;margin-top:-26px}.am-trust{min-height:88px;border-radius:16px;background:#fff;box-shadow:0 14px 34px rgba(8,50,98,.16);display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:14px 24px}.am-trust>div{display:flex;align-items:center;gap:13px;font-size:15px;font-weight:700;padding:0 20px;border-right:1px solid #dbe9f8}.am-trust>div:last-child{border:0}.am-trust i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;background:#087bea;font-size:20px}.am-trust>div:nth-child(2) i{background:#ff6b18}.am-trust>div:nth-child(3) i{background:#8b38e8}.am-trust>div:nth-child(4) i{background:#18a66c}.am-field{background:linear-gradient(180deg,#fff,#f2f9ff)}.am-field-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center}.am-field-media{position:relative;min-height:520px}.am-field-photo{position:absolute;left:-70px;bottom:0;width:88%;height:500px;object-fit:cover;border-radius:0 28px 28px 0}.am-field-phone{position:absolute;right:0;bottom:-20px;width:250px;height:495px;object-fit:cover;object-position:top;border-radius:37px;filter:drop-shadow(0 18px 25px rgba(2,25,66,.3))}.am-field-media .am-handnote{left:8px;top:28px;padding:10px;background:rgba(255,255,255,.82);border-radius:12px}.am-field-copy h2{font-size:clamp(34px,4vw,50px);line-height:1.06;margin-bottom:28px}.am-check-list{list-style:none;padding:0;margin:0 0 28px}.am-check-list li{font-size:18px;color:#28609f;margin:15px 0}.am-check-list i{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#1689ed;color:#fff;font-size:13px;margin-right:10px}.am-callout{display:flex;align-items:center;gap:16px;background:#dff3ff;border-radius:10px;padding:20px;color:#0870d0}.am-callout>i{font-size:30px}.am-flow,.am-video{position:relative;background:radial-gradient(circle at 50% 50%,#0759a4,#031e43 72%);color:#fff;padding:48px 0}.am-flow .am-shell,.am-video .am-shell{position:relative;z-index:1}.am-flow h2{text-align:center;font-size:30px;margin-bottom:34px}.am-flow-list{display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr 42px 1fr;align-items:start;text-align:center}.am-flow-step span{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#0c92fb;box-shadow:0 0 0 7px rgba(10,151,253,.15),0 0 28px rgba(26,183,255,.48);font-size:32px}.am-flow-step:nth-of-type(2) span{background:#15a766}.am-flow-step:nth-of-type(3) span{background:#ff6b18}.am-flow-step:nth-of-type(4) span{background:#8241e8}.am-flow-step:nth-of-type(5) span{background:#079ed5}.am-flow-step h3{font-size:20px;margin-bottom:3px}.am-flow-step p{font-size:14px;color:#d7ebff;margin:0}.am-flow-arrow{color:#28b6ff;font-size:25px;margin-top:34px}.am-heading{text-align:center;margin-bottom:36px}.am-heading h2{font-size:38px;margin-bottom:8px}.am-heading p{color:var(--am-muted);font-size:17px}.am-features{background:#fff}.am-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.am-feature-card{border:1px solid #cfe1f2;border-radius:14px;background:#f9fcff;padding:18px 15px 0;overflow:hidden;min-height:470px;display:flex;flex-direction:column}.am-feature-title{display:flex;gap:10px;align-items:flex-start;min-height:115px}.am-feature-title>i{width:36px;height:36px;display:grid;place-items:center;border-radius:8px;background:#0b82e9;color:#fff;flex:none}.am-feature-title h3{font-size:18px;margin-bottom:4px}.am-feature-title p{font-size:13px;color:#4b6990;line-height:1.35}.am-feature-card>img{width:100%;height:340px;object-fit:cover;object-position:top;border-radius:26px 26px 0 0;filter:drop-shadow(0 8px 13px rgba(5,28,65,.19))}.am-offline-card{max-width:680px;margin:24px auto 0;border:1px solid #bddcf6;border-radius:13px;padding:18px 22px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:#eff9ff}.am-offline-card>span{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#15b46d;color:#fff}.am-offline-card h3{margin:0 0 4px}.am-offline-card p{margin:0;color:#466889;font-size:13px}.am-offline-status{display:flex;flex-direction:column;gap:5px;color:#308265;font-size:12px}.am-video-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:55px;align-items:center}.am-video-frame{padding:12px;border:6px solid #122138;border-radius:42px;background:#000;box-shadow:0 24px 50px rgba(0,0,0,.35)}.am-video-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:25px}.am-video-copy h2{font-size:38px;line-height:1.08;margin-bottom:18px}.am-video-copy ul{list-style:none;padding:0;margin:0 0 24px}.am-video-copy li{margin:12px 0}.am-video-copy li i{color:#24c5ff;margin-right:9px}.am-demo{background:#f5fbff}.am-demo-card{background:#fff;border:1px solid #d9e9f7;border-radius:16px;padding:38px;display:grid;grid-template-columns:.78fr 2.22fr;gap:40px;box-shadow:0 18px 40px rgba(9,52,100,.08)}.am-demo-intro h2{font-size:31px;line-height:1.08}.am-demo-intro p{color:#4a6690}.am-demo-intro ul{list-style:none;padding:0;margin:22px 0 0}.am-demo-intro li{margin:12px 0;font-weight:600;color:#1a528b}.am-demo-intro i{width:25px;color:#087bea}.am-form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.am-form label{font-size:13px;font-weight:700;color:#315f95}.am-form input,.am-form select{width:100%;height:45px;border:1px solid #bed8ee;border-radius:6px;padding:0 12px;margin-top:6px;background:#fbfdff;color:#4b6683;outline:none}.am-form input:focus,.am-form select:focus{border-color:#128aec;box-shadow:0 0 0 3px rgba(18,138,236,.12)}.am-form-wide-half{grid-column:span 1}.am-form-submit{grid-column:1/-1}.am-proof{background:#fff}.am-proof-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:45px;align-items:center}.am-quote-card{display:grid;grid-template-columns:46% 54%;margin:0;border-radius:14px;overflow:hidden;background:#dff2ff;min-height:255px}.am-quote-card img{width:100%;height:100%;object-fit:cover}.am-quote-card blockquote{padding:30px 22px;margin:0!important;font-size:15px;line-height:1.5;color:#14538f;font-weight:600}.am-quote-card blockquote:before,.am-quote-card blockquote:after{content:none!important}.am-quote-card cite{display:block;margin-top:18px;font-style:normal;color:#082c62}.am-quote-card cite span{font-size:12px;font-weight:500}.am-proof-copy h2{font-size:37px;margin-bottom:10px}.am-proof-copy p{color:#4a6690}.am-proof-badges{display:flex;gap:12px;margin-top:24px}.am-proof-badges span{border:1px solid #cce0f2;border-radius:10px;padding:14px 16px;font-weight:700;color:#2e6093}.am-proof-badges i{color:#087bea;margin-right:5px}.am-faq{background:#f6fbff;padding-top:48px;padding-bottom:62px}.am-faq .am-heading{margin-bottom:22px}.am-faq .am-heading h2{font-size:30px}.am-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}.am-faq details{border:1px solid #cbdff0;border-radius:7px;background:#fff;padding:0 17px}.am-faq summary{min-height:48px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:700;color:#174d85;list-style:none}.am-faq summary:after{content:"+";font-size:24px;color:#087bea}.am-faq details[open] summary:after{content:"−"}.am-faq details p{font-size:14px;color:#52708e;border-top:1px solid #e1ebf4;padding-top:12px}.am-final-cta{height:260px;color:#fff;background:linear-gradient(90deg,#041d3f,#073b73 67%,#031a38);position:relative;overflow:hidden}.am-final-grid{height:100%;display:grid;grid-template-columns:1.25fr .58fr .62fr;gap:35px;align-items:center;position:relative}.am-final-grid h2{font-size:36px;line-height:1.08;margin-bottom:8px}.am-final-grid p{color:#d4e8ff}.am-final-grid ul{list-style:none;padding:0;margin:0;z-index:1}.am-final-grid li{margin:12px 0}.am-final-grid li i{color:#2dc4ff;margin-right:8px}.am-final-grid>img{position:absolute;right:0;bottom:-135px;width:260px;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))} @media(max-width:991px){.am-shell{width:min(100% - 30px,760px)}.am-hero{padding-top:125px}.am-hero-grid,.am-field-grid,.am-video-grid,.am-demo-card,.am-proof-grid{grid-template-columns:1fr}.am-hero-copy{text-align:center}.am-hero-copy>p{margin-inline:auto}.am-actions,.am-hero-benefits{justify-content:center}.am-hero-media img{width:100%;margin:0}.am-handnote-hero{right:3%}.am-trust{grid-template-columns:1fr 1fr}.am-trust>div:nth-child(2){border-right:0}.am-field-grid{gap:45px}.am-field-media{min-height:510px}.am-field-photo{left:0;width:82%;border-radius:24px}.am-flow-list{grid-template-columns:repeat(5,1fr);gap:10px}.am-flow-arrow{display:none}.am-feature-grid{grid-template-columns:1fr 1fr}.am-demo-card{padding:30px}.am-final-cta{height:auto;padding:48px 0}.am-final-grid{grid-template-columns:1fr 1fr;min-height:250px}.am-final-grid>img{width:200px;bottom:-80px;opacity:1}.am-final-grid>div{z-index:1}} @media(max-width:640px){.am-shell{width:min(100% - 24px,520px)}.am-section{padding:52px 0}.am-hero{padding:108px 0 62px;min-height:auto}.am-hero h1{font-size:40px}.am-hero-copy>p{font-size:17px}.am-btn{width:100%}.am-hero-benefits{flex-direction:column;gap:10px;align-items:flex-start;width:max-content;margin:24px auto 0}.am-handnote-hero{display:none}.am-trust-wrap{margin-top:-20px}.am-trust{grid-template-columns:1fr;padding:10px 18px}.am-trust>div{border-right:0;border-bottom:1px solid #dbe9f8;padding:10px 0}.am-trust>div:last-child{border-bottom:0}.am-field-media{min-height:430px}.am-field-photo{width:94%;height:390px}.am-field-phone{width:155px;height:330px;right:-5px}.am-field-media .am-handnote{font-size:20px}.am-field-copy h2{font-size:36px}.am-flow-list{grid-template-columns:1fr 1fr;row-gap:28px}.am-flow-step:last-child{grid-column:1/-1}.am-feature-grid{grid-template-columns:1fr}.am-feature-card{min-height:520px}.am-feature-card>img{height:390px;object-fit:contain;background:#fff}.am-offline-card{grid-template-columns:auto 1fr}.am-offline-status{grid-column:1/-1}.am-video-copy h2,.am-heading h2,.am-proof-copy h2{font-size:32px}.am-demo-card{padding:24px 18px}.am-form{grid-template-columns:1fr}.am-form-submit{grid-column:auto}.am-quote-card{grid-template-columns:1fr}.am-quote-card img{height:240px}.am-proof-badges{flex-direction:column}.am-faq-grid{grid-template-columns:1fr}.am-final-grid{grid-template-columns:1fr}.am-final-grid>img{display:none}.am-final-grid ul{margin-top:5px}.am-final-grid h2{font-size:32px}} /* Protege o contraste das faixas escuras contra estilos globais legados. */ .am-page .am-hero h1,.am-page .am-flow h2,.am-page .am-flow h3,.am-page .am-video h2,.am-page .am-final-cta h2{color:#fff!important} .am-video-frame{display:block;position:relative;overflow:hidden;text-decoration:none} .am-video-frame img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:25px;opacity:.78} .am-video-frame span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:#078cff;color:#fff;font-size:28px;box-shadow:0 0 0 12px rgba(255,255,255,.18)} /* A composição pronta substitui as camadas independentes de foto, celular e texto. */ .am-field-media{min-height:0} .am-field-composite{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:28px;box-shadow:0 22px 42px rgba(2,25,66,.2)} @media(max-width:640px){.am-field-composite{border-radius:20px}} /* Enquadramento panorâmico com uma base orgânica para integrar imagem e conteúdo. */ .am-field-media{isolation:isolate;padding:10px 0 16px} .am-field-media::before{content:"";position:absolute;z-index:-1;inset:28px -16px -2px 26px;border-radius:58px 22px 58px 22px;background:linear-gradient(135deg,rgba(8,123,234,.2),rgba(28,198,255,.08));transform:rotate(-1.2deg)} .am-field-composite{aspect-ratio:16/9;border-radius:46px 20px 46px 20px;outline:1px solid rgba(255,255,255,.82);box-shadow:0 26px 48px rgba(2,25,66,.22)} @media(max-width:640px){.am-field-media{padding:6px 0 10px}.am-field-media::before{inset:18px -8px 0 14px;border-radius:34px 15px 34px 15px}.am-field-composite{border-radius:30px 14px 30px 14px}} /* Formulário de demonstração: campos ligados ao cadastro de contato */ .am-form .am-form-wide{grid-column:span 2} .am-form .am-form-aceite{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;font-weight:500;color:#4b6683;line-height:1.45} .am-form .am-form-aceite input{width:18px;height:18px;margin:2px 0 0;flex:none} .am-form .validation-message{display:block;margin-top:4px;font-size:12px;font-weight:600;color:#c62828} .am-form .am-form-aceite .validation-message{flex-basis:100%} .am-form .am-form-erro{grid-column:1/-1;margin:0;padding:12px 14px;border-radius:8px;background:#fdecec;color:#b42318;font-weight:600} .am-form-submit:disabled{opacity:.75;cursor:wait} @media(max-width:640px){.am-form .am-form-wide{grid-column:auto}} /* Seção "Teste grátis agora" (lojas) */ .am-lojas{padding-bottom:24px}.am-section:has(.am-video-texto)~.am-lojas{padding-bottom:72px} .am-lojas-card{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:44px 48px;border-radius:16px;background:linear-gradient(120deg,var(--am-navy) 0%,#064a8f 100%);color:#fff;box-shadow:0 18px 40px rgba(3,29,63,.22)} .am-lojas-copy h2{color:#fff;font-size:clamp(28px,3vw,40px);line-height:1.1;margin-bottom:14px}.am-lojas-copy>p{color:#d6eaff;font-size:17px;margin-bottom:22px;max-width:560px} .am-lojas-passos{list-style:none;margin:0;padding:0;display:grid;gap:12px}.am-lojas-passos li{display:flex;align-items:center;gap:12px;color:#eaf5ff;font-size:15px}.am-lojas-passos b{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--am-orange);color:#fff;font-size:14px} .am-lojas-botoes{display:grid;gap:14px;justify-items:stretch} .am-page .am-loja{display:flex;align-items:center;gap:14px;min-height:70px;padding:10px 22px;border-radius:12px;background:#fff;color:#0b1b33;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.18);transition:.2s ease} .am-loja:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.28)} .am-page .am-loja:focus-visible{outline:3px solid #fff;outline-offset:3px} .am-loja-ico{width:40px;height:40px;flex:0 0 40px}.am-loja span{display:flex;flex-direction:column;font-size:21px;font-weight:700;line-height:1.1}.am-loja small{font-size:12px;font-weight:500;color:#5a6b85} .am-lojas-nota{margin:2px 0 0;text-align:center;color:#bfe0ff;font-size:14px}.am-lojas-link{color:#7fd2ff;font-weight:700} @media(max-width:991px){.am-lojas-card{grid-template-columns:1fr;padding:32px 24px;gap:26px}} @media(max-width:640px){.am-section:has(.am-video-texto)~.am-lojas{padding-bottom:52px}} /* Vídeo com capa (troca pelo YouTube no clique) */ .am-video-capa{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}.am-video-capa:hover span{transform:translate(-50%,-50%) scale(1.08)} .am-video-frame .sp-product-video{border-radius:25px;overflow:hidden}.am-video-frame .sp-product-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0} .am-video-copy li i{width:1.25em;text-align:center} /* Páginas de vídeo (/video-sistema-erp, /app-mobile/video) */ .am-video-pagina{padding:150px 0 60px}.am-video-pagina h1{color:#fff;font-size:clamp(32px,4vw,52px);line-height:1.08;margin:10px 0 14px;max-width:900px}.am-video-sub{color:#d6eaff;font-size:18px;max-width:780px;margin-bottom:28px}.am-video-trilha{font-size:14px;color:#9fc6ee}.am-video-trilha a{color:#bfe0ff;text-decoration:none}.am-video-principal{max-width:960px} .am-video-texto>*{max-width:860px}.am-video-texto h2{font-size:30px;margin:0 0 14px}.am-video-texto ul{padding-left:20px;margin:0 0 34px}.am-video-texto li{margin:8px 0;line-height:1.55}.am-video-texto p{font-size:17px;color:var(--am-muted)} .am-video-texto .am-actions{margin-top:26px}.am-video-texto .am-btn:focus-visible{outline:3px solid var(--am-blue);outline-offset:3px} .am-btn-escuro{color:var(--am-navy);border-color:#9fb4cf;background:#fff}.am-btn-escuro:hover{border-color:var(--am-navy)} @media(max-width:640px){.am-video-pagina{padding:108px 0 48px}} /* Vídeo na home: medidas das seções vizinhas */ .sp-home-video{padding:72px 0} .sp-home-video .am-shell{width:min(1210px,calc(100% - 64px))} .sp-home-video .am-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em} .sp-home-video .am-video-copy h2{color:#fff;font-size:44px;line-height:1.1}.sp-home-video .am-video-copy li{color:#e6f2ff} @media(max-width:640px){.sp-home-video{padding:52px 0}.sp-home-video .am-shell{width:calc(100% - 32px)}.sp-home-video .am-video-copy h2{font-size:32px}} /* assets/css/sp-app-mobile-manual.css */ .amm-page{--amm-navy:#061e42;--amm-blue:#087bea;--amm-cyan:#1dc7f5;--amm-orange:#ff6819;--amm-ink:#071d4b;--amm-muted:#4a6590;font-family:Inter,Arial,sans-serif;color:var(--amm-ink);background:#f8fbff}.amm-page *{box-sizing:border-box}.amm-wrap{width:min(1180px,calc(100% - 44px));margin-inline:auto}.amm-page h1,.amm-page h2,.amm-page h3,.amm-page p{margin-top:0}.amm-page h1,.amm-page h2,.amm-page h3{letter-spacing:-.035em}.amm-page p{line-height:1.55}.amm-page a{text-decoration:none}.amm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .amm-hero{position:relative;min-height:400px;padding:118px 0 0;overflow:hidden;background:radial-gradient(circle at 61% 41%,#0b58a4 0%,transparent 35%),linear-gradient(115deg,#041833,#062c60 58%,#031b3b);color:#fff}.amm-hero:before{content:"";position:absolute;inset:0;opacity:.19;background-image:linear-gradient(32deg,transparent 48%,#1680dc 49%,transparent 50%),linear-gradient(148deg,transparent 48%,#1680dc 49%,transparent 50%);background-size:112px 90px}.amm-hero-grid{position:relative;display:grid;grid-template-columns:1.22fr .78fr;gap:40px;align-items:end;min-height:282px}.amm-hero-copy{align-self:center;padding-bottom:38px;position:relative;z-index:2}.amm-eyebrow,.amm-kicker{text-transform:uppercase;letter-spacing:.09em;font-size:12px;font-weight:800;color:var(--amm-cyan)}.amm-hero h1{font-size:clamp(38px,4.1vw,58px);line-height:1.03;margin:12px 0 14px;color:#fff}.amm-hero p{font-size:17px;color:#dbe9fd;margin-bottom:25px;max-width:570px}.amm-search{display:flex;align-items:center;gap:12px;padding:5px 5px 5px 18px;max-width:570px;background:#fff;color:#0a2d63;border-radius:6px;box-shadow:0 13px 28px #0003}.amm-search>i{font-size:18px}.amm-search input{min-width:0;flex:1;border:0;outline:0;font:inherit;font-size:14px;color:#102b57;background:transparent}.amm-search input::placeholder{color:#6e82a4}.amm-search button,.amm-bottom a{border:0;border-radius:5px;background:linear-gradient(135deg,#ff7a18,#ff5413);color:#fff;font-weight:800;cursor:pointer}.amm-search button{padding:12px 24px}.amm-search-results{position:absolute;left:0;top:100%;width:min(570px,100%);z-index:5;background:#fff;color:var(--amm-ink);border:1px solid #dbeaff;box-shadow:0 18px 35px #0003;border-radius:0 0 10px 10px;max-height:270px;overflow:auto}.amm-search-results a{display:flex;align-items:center;gap:12px;padding:11px 17px;border-bottom:1px solid #e8f0fa;color:#163c70}.amm-search-results a:hover{background:#eff7ff}.amm-search-results a span{margin-left:auto;color:var(--amm-blue)}.amm-search-results p{padding:14px 17px;margin:0;color:#405d88}.amm-hero-art{height:282px;position:relative;display:flex;align-items:flex-start;justify-content:center}.amm-hero-art img{display:block;width:275px;height:auto;filter:drop-shadow(0 18px 30px #0007)}.amm-hero-art span{position:absolute;right:-36px;top:90px;font:600 23px/1.05 Caveat,"Segoe Print",cursive;color:#cdefff;transform:rotate(-8deg)} .amm-breadcrumb{display:flex;align-items:center;gap:13px;padding-block:18px;color:#8ba2c3;font-size:13px}.amm-breadcrumb a{color:#54739f}.amm-breadcrumb strong{color:#0b2f67;font-weight:700}.amm-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:34px;align-items:start;padding-bottom:52px}.amm-sidebar{position:sticky;top:90px}.amm-side-card,.amm-help-card{border:1px solid #dbe9fa;border-radius:8px;background:#f4f9ff;box-shadow:0 5px 18px #163d6910}.amm-side-card{padding:12px 8px}.amm-side-card h2{margin:5px 12px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.02em}.amm-side-card a{display:flex;align-items:center;gap:13px;min-height:44px;padding:9px 12px;border-radius:5px;color:#0b316d;font-size:13px}.amm-side-card a:first-of-type{background:#e4f2ff;color:#0876ec;font-weight:700}.amm-side-card a:hover{background:#e4f2ff;color:#0876ec}.amm-side-card i{width:20px;font-size:16px}.amm-help-card{display:flex;gap:15px;padding:22px 17px;margin-top:18px}.amm-help-card>i{font-size:25px;color:#0a3777}.amm-help-card strong{display:block;font-size:13px}.amm-help-card p{font-size:12px;color:#5f7799;margin:4px 0 12px}.amm-help-card a{font-weight:700;font-size:12px;color:#0079ef} .amm-content{min-width:0}.amm-content>section,.amm-content>article{scroll-margin-top:100px}.amm-section-head h2{font-size:36px;line-height:1.12;margin:4px 0 3px}.amm-section-head p{color:var(--amm-muted);font-size:16px;margin:0 0 17px}.amm-quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.amm-quick-card{display:flex;align-items:center;gap:13px;min-height:94px;padding:14px;background:#fff;border:1px solid #d5e7fc;border-radius:8px;box-shadow:0 5px 18px #163d6910;color:var(--amm-ink)}.amm-quick-card:hover{border-color:#6db5ff;transform:translateY(-2px)}.amm-quick-icon{width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:50%;color:#fff}.amm-quick-icon.blue{background:#0879ec}.amm-quick-icon.orange{background:#ff6819}.amm-quick-icon.green{background:#0bb46d}.amm-quick-card strong{display:block;font-size:13px}.amm-quick-card small{display:block;font-size:11px;line-height:1.4;color:#61789b;margin-top:3px}.amm-quick-card>i{margin-left:auto;color:#0983ff;font-size:13px} .amm-feature{display:grid;grid-template-columns:1fr 270px;gap:18px;margin-top:17px;padding:24px 22px;background:#fff;border:1px solid #d3e8ff;border-radius:9px;box-shadow:0 7px 24px #163d6910;overflow:hidden}.amm-tag{display:inline-block;padding:7px 10px;border-radius:6px;background:#e3f1ff;color:#0074ef;text-transform:uppercase;font-size:11px;font-weight:800}.amm-feature h2{font-size:27px;line-height:1.13;margin:10px 0 5px}.amm-feature-copy>p{color:#42628e;font-size:15px}.amm-steps{list-style:none;padding:0;margin:19px 0 0}.amm-steps li{display:flex;gap:14px;position:relative;min-height:66px}.amm-steps li:not(:last-child):before{content:"";position:absolute;left:18px;top:37px;bottom:0;border-left:2px solid #d9edff}.amm-steps li>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#0887f2;color:white;font-weight:800;flex:none;position:relative;z-index:1}.amm-steps li strong{display:block;font-size:13px;margin:1px 0 3px}.amm-steps li p{font-size:12px;color:#5d769c;margin:0}.amm-feature-visual{display:flex;flex-direction:column;align-items:center;justify-content:center}.amm-phone-frame{width:230px;height:425px;overflow:hidden;border:7px solid #0a0d14;border-radius:28px;background:#fff;box-shadow:0 16px 26px #0b24482d}.amm-phone-frame img{width:100%;height:100%;object-fit:cover;object-position:top}.amm-feature-visual>span{font-size:11px;color:#7790b0;margin-top:10px} .amm-topic{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:30px;align-items:center;background:#fff;border:1px solid #dfebf9;border-radius:9px;padding:27px 28px;margin-top:18px;box-shadow:0 6px 19px #163d690c}.amm-topic h2{font-size:25px;margin:4px 0 7px}.amm-topic p{font-size:14px;color:#425e86}.amm-topic ul{padding-left:19px;margin:10px 0 0;color:#39567d;font-size:13px;line-height:1.55}.amm-topic li+li{margin-top:7px}.amm-topic img{display:block;width:100%;max-height:245px;object-fit:contain;border-radius:7px}.amm-note{display:flex;align-items:flex-start;gap:10px;padding:17px;background:#eef7ff;border:1px solid #d2eaff;border-radius:8px}.amm-note i{font-size:22px;color:#0782ef}.amm-note p{font-size:13px;margin:0}.amm-topic:not(.amm-topic-image) .amm-topic-copy{max-width:620px} .amm-faq{margin-top:28px}.amm-faq h2{font-size:24px;margin:4px 0 12px}.amm-faq details{margin:9px 0;background:#fff;border:1px solid #dbe9fa;border-radius:7px;box-shadow:0 4px 14px #163d690c}.amm-faq summary{cursor:pointer;padding:15px 17px;font-size:13px;font-weight:700;color:#0b2d61}.amm-faq details p{border-top:1px solid #e4edf8;padding:13px 17px;margin:0;font-size:13px;color:#476188}.amm-bottom{background:linear-gradient(100deg,#031c3c,#064582 50%,#031d3f);color:#fff;padding:24px 0}.amm-bottom>.amm-wrap{display:flex;align-items:center;gap:22px}.amm-bottom strong{font-size:16px}.amm-bottom p{font-size:12px;color:#c7dff5;margin:4px 0 0}.amm-bottom a{padding:13px 22px;margin-left:auto;font-size:13px}.amm-bottom a i{margin-left:8px} @media(max-width:1000px){.amm-layout{grid-template-columns:200px minmax(0,1fr);gap:20px}.amm-feature{grid-template-columns:1fr 210px}.amm-phone-frame{width:190px;height:360px}.amm-quick-grid{grid-template-columns:1fr}.amm-quick-card{min-height:70px}.amm-topic{grid-template-columns:1fr 160px}.amm-hero-art span{display:none}} @media(max-width:720px){.amm-wrap{width:min(100% - 28px,540px)}.amm-hero{padding-top:106px;min-height:0}.amm-hero-grid{grid-template-columns:1fr;gap:0}.amm-hero-copy{padding-bottom:25px}.amm-hero h1{font-size:40px}.amm-hero p{font-size:15px}.amm-search button{padding:11px 14px}.amm-hero-art{height:125px;overflow:hidden}.amm-hero-art img{width:185px}.amm-breadcrumb{font-size:11px;flex-wrap:wrap}.amm-layout{display:block}.amm-sidebar{position:static}.amm-side-card{padding:12px;margin-bottom:22px}.amm-side-card h2{margin-bottom:8px}.amm-side-card a{display:inline-flex;min-height:0;margin:3px;padding:9px 10px;background:#fff;border:1px solid #dbe9fa}.amm-side-card a i{width:auto}.amm-help-card{display:none}.amm-section-head h2{font-size:31px}.amm-feature{grid-template-columns:1fr}.amm-feature-visual{margin-top:10px}.amm-phone-frame{width:230px;height:370px}.amm-topic{grid-template-columns:1fr;padding:22px}.amm-topic img{max-width:280px;margin:auto}.amm-bottom>.amm-wrap{display:block}.amm-bottom a{display:inline-block;margin:14px 0 0}} .am-guide-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;color:#cfeaff!important;font-size:14px;font-weight:700;text-decoration:none}.am-guide-link:hover{color:#fff!important;text-decoration:underline} /* As capturas reais ganham uma moldura de aparelho; a arte do herói segue o mesmo tratamento do App Mobile. */ .amm-hero-art{isolation:isolate}.amm-hero-art::before{content:"";position:absolute;z-index:0;width:390px;height:390px;left:50%;top:-25px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#1b9aff55 0%,#0c66c229 48%,transparent 72%)}.amm-hero-art img{position:relative;z-index:1;width:345px;max-width:none;transform:translateY(-30px);filter:drop-shadow(0 23px 30px #00132b80)} .amm-feature{border-radius:14px;border-color:#c4e3ff;box-shadow:0 14px 30px #084c8d12}.amm-phone-frame{position:relative;box-shadow:0 18px 33px #0b244845,0 0 0 1px #7b9cbd}.amm-phone-frame::after,.amm-device::after{content:"";position:absolute;z-index:2;top:5px;left:50%;transform:translateX(-50%);width:52px;height:9px;border-radius:0 0 9px 9px;background:#080d16} .amm-topic-image{position:relative;grid-template-columns:minmax(0,1fr) 220px;min-height:410px;overflow:hidden;border-color:#cee5ff;border-radius:14px;background:linear-gradient(115deg,#fff 0%,#fff 58%,#eef7ff 100%);box-shadow:0 12px 27px #084c8d11}.amm-topic-image::before{content:"";position:absolute;right:-22px;top:50%;transform:translateY(-50%);width:315px;height:315px;border-radius:50%;background:radial-gradient(circle,#bedfff 0%,#e7f5ff 49%,transparent 72%)}.amm-topic-image>*{position:relative;z-index:1}.amm-topic-image h2{font-size:28px}.amm-device{position:relative;width:172px;height:361px;margin:auto;overflow:hidden;border:7px solid #0b1320;border-radius:25px;background:#0b1320;box-shadow:0 19px 31px #062c5e45,0 0 0 1px #7d99b5;transform:rotate(2deg);transition:transform .2s ease,box-shadow .2s ease}.amm-device:hover{transform:rotate(0) translateY(-4px);box-shadow:0 24px 38px #062c5e55,0 0 0 1px #7d99b5}.amm-topic .amm-device img{display:block;width:100%;height:100%;max-height:none;margin:0;object-fit:cover;object-position:top;border-radius:16px}#clientes .amm-device,#sincronizacao .amm-device{transform:rotate(-2deg)}#clientes .amm-device:hover,#sincronizacao .amm-device:hover{transform:rotate(0) translateY(-4px)} @media(max-width:1000px){.amm-topic-image{grid-template-columns:minmax(0,1fr) 170px}.amm-device{width:148px;height:313px}.amm-hero-art img{width:305px}} @media(max-width:720px){.amm-hero-art{height:190px}.amm-hero-art img{width:245px;transform:translateY(-23px)}.amm-topic-image{display:block;min-height:0}.amm-topic-image::before{top:auto;bottom:-80px;right:50%;transform:translateX(50%)}.amm-device{width:172px;height:361px;margin:25px auto 4px}} /* assets/css/sp-comercio-varejo.css */ /* Segmento Comércio e varejo — tokens e escala alinhados a sp-produto.css */ .sc-pdf:has(.cv-page) { --product-navy: #062b4f; --product-navy-dark: #041f3a; --product-navy-mid: #073b6d; --product-blue: #008ef4; --product-blue-soft: #eaf6ff; --product-ice: #f5faff; --product-white: #ffffff; --product-orange: #ff6b20; --product-orange-hover: #ed5712; --product-text: #062b4f; --product-muted: #63778c; --product-border: #dce9f4; --product-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --product-wrap: 1280px; --product-gutter: 32px; /* Derivados para AA sobre fundo claro (pendência do DS: --product-blue dá 3,4:1 no branco) */ --cv-blue-text: #0067b8; --cv-neutral: #f3f5f7; --cv-neutral-text: #52657a; --cv-field-border: #7890a8; --cv-shadow-card: 0 16px 34px rgba(6, 43, 79, 0.08); --cv-shadow-hover: 0 16px 34px rgba(6, 43, 79, 0.1); --cv-shadow-media: 0 18px 40px rgba(6, 43, 79, 0.08); background: var(--product-white); } .sc-pdf:has(.cv-page), .sc-pdf:has(.cv-page) h1, .sc-pdf:has(.cv-page) h2, .sc-pdf:has(.cv-page) h3, .sc-pdf:has(.cv-page) p, .sc-pdf:has(.cv-page) a, .sc-pdf:has(.cv-page) li, .sc-pdf:has(.cv-page) span, .sc-pdf:has(.cv-page) button, .sc-pdf:has(.cv-page) strong, .sc-pdf:has(.cv-page) small, .sc-pdf:has(.cv-page) b, .sc-pdf:has(.cv-page) label, .sc-pdf:has(.cv-page) select, .sc-pdf:has(.cv-page) input, .sc-pdf:has(.cv-page) blockquote, .sc-pdf:has(.cv-page) cite { font-family: var(--product-font) !important; } .cv-page { color: var(--product-text); background: var(--product-white); overflow-x: clip; } .cv-page *, .cv-page *::before, .cv-page *::after { box-sizing: border-box; } .cv-shell { width: min(calc(100% - (var(--product-gutter) * 2)), var(--product-wrap)); margin-inline: auto; } .cv-section { padding: 72px 0; } .cv-page h1, .cv-page h2, .cv-page h3, .cv-page p { margin-top: 0; } .cv-page h1, .cv-page h2, .cv-page h3 { font-weight: 800 !important; letter-spacing: -0.03em; color: var(--product-text) !important; } .cv-page h2 { text-wrap: balance; margin-bottom: 16px; font-size: clamp(32px, 3.6vw, 40px) !important; line-height: 1.12 !important; } .cv-page p { font-size: 16px; line-height: 1.65; letter-spacing: 0; } .cv-eyebrow { display: block; margin: 0 0 12px; color: var(--cv-blue-text); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .cv-hero .cv-eyebrow, .cv-supply .cv-eyebrow, .cv-final .cv-eyebrow { color: rgba(234, 246, 255, 0.86); } .cv-page a:focus-visible, .cv-page button:focus-visible, .cv-page select:focus-visible, .cv-page input:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45) !important; outline-offset: 3px; } /* Hero */ .cv-hero { position: relative; min-height: 590px; padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 72px; color: #fff; background: var(--product-navy-dark); } .cv-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #041f3a 0%, rgba(4, 31, 58, 0.94) 37%, rgba(4, 31, 58, 0.18) 68%, rgba(4, 31, 58, 0.35) 100%); } .cv-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cv-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr); gap: 36px; align-items: center; } .cv-breadcrumb ol { align-items: center; } .cv-breadcrumb a { display: inline-block; padding: 4px 0; } .cv-hero h1 { margin-bottom: 16px !important; color: #fff !important; font-size: clamp(34px, 4.4vw, 54px) !important; letter-spacing: -0.035em; line-height: 1.08 !important; } .cv-hero h1 em { font-style: normal; color: #9ed6ff; } .cv-hero-copy > p { max-width: 560px; margin-bottom: 24px; color: rgba(234, 246, 255, 0.86); font-size: 18px; } .cv-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .cv-tags span { padding: 8px 14px; border: 1px solid rgba(158, 214, 255, 0.55); border-radius: 999px; background: rgba(4, 31, 58, 0.6); color: #fff; font-size: 13px; } .cv-tags i { margin-right: 6px; color: #9ed6ff; } /* Etapas */ .cv-steps { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(6, 1fr); margin: -24px auto 0; padding: 0; list-style: none; background: #fff; border-radius: 16px; box-shadow: var(--cv-shadow-card); overflow: hidden; } .cv-steps > li { min-height: 130px; padding: 24px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; border-right: 1px solid var(--product-border); } .cv-steps > li:last-child { border: 0; } .cv-steps i { margin-bottom: 12px; color: var(--cv-blue-text); font-size: 24px; } .cv-steps strong { color: var(--product-navy); font-size: 17px; } .cv-steps small { margin-top: 4px; color: var(--product-muted); font-size: 13px; line-height: 1.35; } .cv-steps .is-active { background: linear-gradient(145deg, #0875df, #0660b8); } .cv-steps .is-active i, .cv-steps .is-active strong, .cv-steps .is-active small { color: #fff; } /* Operações */ .cv-operations { background: var(--product-ice); } .cv-operations-grid { display: grid; grid-template-columns: 0.78fr 0.72fr 0.72fr; gap: 18px; align-items: stretch; } .cv-section-copy { padding: 28px 24px 18px 0; } .cv-section-copy p { color: var(--cv-neutral-text); } .cv-search-copy p { color: var(--product-muted); } .cv-operation-card { position: relative; display: block; min-height: 175px; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: var(--product-navy-dark); transition: transform 200ms ease, box-shadow 200ms ease; } .cv-operation-card:hover, .cv-operation-card:focus-visible { transform: translateY(-2px); box-shadow: var(--cv-shadow-hover); } .cv-store { min-height: 365px; } .cv-operation-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 31, 58, 0.92) 0%, rgba(4, 31, 58, 0.7) 60%, transparent 95%); } .cv-store::after { background: linear-gradient(0deg, rgba(4, 31, 58, 0.92), transparent 68%); } .cv-operation-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cv-operation-card span { position: absolute; z-index: 1; left: 20px; right: 18px; bottom: 18px; display: grid; grid-template-columns: 1fr auto; } .cv-operation-card b { font-size: 21px; } .cv-operation-card small { grid-column: 1; color: rgba(234, 246, 255, 0.9); font-size: 13px; } .cv-operation-card i { grid-column: 2; grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--cv-blue-text); } .cv-operation-stack { display: grid; gap: 18px; } /* Busca */ .cv-search { background: #fff; } .cv-search-grid { display: grid; grid-template-columns: 1.22fr 0.78fr; gap: 48px; align-items: center; } .cv-search-visual { margin: 0; overflow: hidden; border-radius: 16px; box-shadow: var(--cv-shadow-media); background: var(--product-blue-soft); } .cv-search-visual img { display: block; width: 100%; height: 410px; object-fit: cover; } .cv-fake-search { height: 56px; margin: 24px 0; padding-left: 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--cv-field-border); border-radius: 12px; color: var(--product-muted); overflow: hidden; } .cv-fake-search i { width: 56px; height: 56px; display: grid; place-items: center; background: var(--cv-blue-text); color: #fff; } .cv-checks { list-style: none; padding: 0; margin: 0; } .cv-checks li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; margin: 12px 0; color: var(--product-muted); font-size: 15px; } .cv-checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--cv-blue-text); color: #fff; font-size: 12px; } /* Compras */ .cv-supply { position: relative; padding: 72px 0; color: #fff; background: radial-gradient(circle at 80% 30%, var(--product-navy-mid), var(--product-navy-dark) 72%); } .cv-supply h2 { color: #fff !important; margin-bottom: 12px; } .cv-supply > div > p { max-width: 850px; color: rgba(234, 246, 255, 0.86); } .cv-supply-flow { display: grid; grid-template-columns: repeat(11, auto); gap: 12px; align-items: start; margin-top: 36px; } .cv-supply-flow > div { width: 126px; display: flex; flex-direction: column; } .cv-supply-flow > div > span { width: 52px; height: 52px; margin-bottom: 12px; display: grid; place-items: center; border: 1px solid rgba(158, 214, 255, 0.55); border-radius: 50%; background: rgba(0, 142, 244, 0.22); } .cv-supply-flow > div > b { font-size: 15px; } .cv-supply-flow > div > small { margin-top: 4px; color: rgba(234, 246, 255, 0.86); font-size: 13px; line-height: 1.35; } .cv-supply-flow > i { margin-top: 24px; color: #9ed6ff; } /* Antes e depois */ .cv-results { background: #fff; } .cv-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .cv-compare article { padding: 18px; border-radius: 16px; background: var(--cv-neutral); } .cv-compare .cv-after { background: var(--product-blue-soft); } .cv-compare h3 { margin-bottom: 12px; font-size: 17px; } .cv-before h3, .cv-before li::before { color: var(--cv-neutral-text) !important; } .cv-after h3, .cv-after li::before { color: var(--cv-blue-text) !important; } .cv-compare article > div { display: grid; grid-template-columns: 42% 58%; gap: 18px; } .cv-compare img { width: 100%; height: 220px; border-radius: 12px; object-fit: cover; } .cv-after img { object-position: 62% center; } .cv-compare ul { list-style: none; padding: 0; margin: 4px 0 0; } .cv-compare li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; margin: 12px 0; color: var(--product-text); font-size: 14px; } .cv-compare li::before { content: "●"; } /* Demonstração */ .cv-demo { background: linear-gradient(100deg, var(--product-ice), var(--product-blue-soft)); } .cv-demo-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 48px; align-items: center; } .cv-demo p { max-width: 480px; margin-bottom: 0; color: var(--product-navy-mid); } .cv-demo-card { padding: 28px; border-radius: 16px; background: #fff; box-shadow: var(--cv-shadow-card); } .cv-demo-card h3 { margin-bottom: 12px; font-size: 17px; } .cv-demo-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0 0 24px; padding: 0; list-style: none; } .cv-demo-card li { color: var(--product-text); font-size: 15px; } .cv-demo-card li i { width: 24px; color: var(--cv-blue-text); } /* Depoimento */ .cv-story { background: #fff; } .cv-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .cv-story blockquote { position: relative; margin: 20px 0 0 !important; padding: 0 0 0 48px !important; border: 0; background: none !important; text-align: left !important; color: var(--product-muted); font-size: 18px; line-height: 1.55; } .cv-story blockquote::before { content: "“" !important; position: absolute; left: 0; top: -25px; color: var(--product-blue); font-size: 82px; line-height: 1; } .cv-story blockquote::after { content: none !important; } .cv-story cite { display: block; margin-top: 14px; color: var(--product-text); font-style: normal; font-weight: 800; } .cv-story cite span { display: block; font-size: 13px; font-weight: 500; } .cv-story-card { display: grid; grid-template-columns: 55% 45%; border-radius: 16px; overflow: hidden; background: var(--product-navy); color: #fff; } .cv-story-card img { width: 100%; height: 285px; object-fit: cover; } .cv-story-card ul { list-style: none; margin: 0; padding: 28px 20px; display: flex; flex-direction: column; justify-content: center; } .cv-story-card li { margin: 12px 0; font-size: 15px; } .cv-story-card i { width: 32px; color: #9ed6ff; font-size: 20px; } /* CTA final */ .cv-final { padding: 72px 0; color: #fff; background: linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%); } .cv-final-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; } .cv-final-icon { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 142, 244, 0.22); color: #9ed6ff; font-size: 40px; } .cv-final h2 { margin-bottom: 8px; color: #fff !important; } .cv-final p { margin: 0; color: rgba(234, 246, 255, 0.86); } .cv-final-grid > div:last-child { display: grid; gap: 12px; } @media (max-width: 1199px) { .sc-pdf:has(.cv-page) { --product-gutter: 24px; } .cv-hero::after { background: linear-gradient(90deg, rgba(4, 31, 58, 0.98) 0%, rgba(4, 31, 58, 0.9) 58%, rgba(4, 31, 58, 0.38) 100%); } .cv-hero-grid { grid-template-columns: 1fr; } .cv-hero-copy { max-width: min(560px, 60%); } .cv-steps { grid-template-columns: repeat(3, 1fr); } .cv-steps > li:nth-child(3n) { border-right: 0; } .cv-operations-grid { grid-template-columns: 1fr 1fr; } .cv-section-copy { grid-column: 1 / -1; } .cv-operation-stack { min-height: 365px; } .cv-search-grid, .cv-demo-grid, .cv-story-grid { grid-template-columns: 1fr; } .cv-supply-flow { grid-template-columns: repeat(6, 1fr); } .cv-supply-flow > div { width: auto; } .cv-supply-flow > i { display: none; } .cv-compare { grid-template-columns: 1fr; } .cv-final-grid { grid-template-columns: auto 1fr; } .cv-final-grid > div:last-child { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .sc-pdf:has(.cv-page) { --product-gutter: 16px; } .cv-section, .cv-supply, .cv-final { padding: 56px 0; } .cv-hero { padding-top: calc(var(--sp-hero-nav-h, 78px) + 18px); } .cv-hero::after { background: linear-gradient(90deg, rgba(4, 31, 58, 0.98) 0%, rgba(4, 31, 58, 0.9) 58%, rgba(4, 31, 58, 0.38) 100%); } .cv-hero-photo { object-position: 56% center; } .cv-hero-copy { max-width: none; } .cv-steps { grid-template-columns: 1fr 1fr; margin-top: 0; } .cv-steps > li { min-height: 115px; } .cv-steps > li:nth-child(3n) { border-right: 1px solid var(--product-border); } .cv-steps > li:nth-child(2n) { border-right: 0; } .cv-operations-grid { grid-template-columns: 1fr; } .cv-store { min-height: 320px; } .cv-search-grid { gap: 24px; } .cv-search-visual img { height: auto; aspect-ratio: 3 / 2; } .cv-supply-flow { grid-template-columns: 1fr 1fr; gap: 24px; } .cv-supply-flow > div { align-items: center; text-align: center; } .cv-compare article > div { grid-template-columns: 1fr; } .cv-compare img { height: 190px; } .cv-demo-card { padding: 20px; } .cv-demo-card ul { grid-template-columns: 1fr; } .cv-story-card { grid-template-columns: 1fr; } .cv-story-card img { height: 230px; } .cv-final-grid { grid-template-columns: 1fr; text-align: center; } .cv-final-icon { margin: auto; } .cv-final-grid > div:last-child { grid-column: auto; grid-template-columns: 1fr; } .cv-page .sp-product-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .cv-operation-card, .cv-page .sp-product-btn { transition: none; } .cv-operation-card:hover, .cv-operation-card:focus-visible, .cv-page .sp-product-btn:hover, .cv-page .sp-product-btn:focus-visible { transform: none; } } /* assets/css/sp-servicos-assistencia.css */ /* Segmento Serviços e assistência — tokens e escala alinhados a sp-produto.css e sp-comercio-varejo.css */ .sc-pdf:has(.sa-page) { --product-navy: #062b4f; --product-navy-dark: #041f3a; --product-navy-mid: #073b6d; --product-blue: #008ef4; --product-blue-soft: #eaf6ff; --product-ice: #f5faff; --product-white: #ffffff; --product-orange: #ff6b20; --product-orange-hover: #ed5712; --product-green: #20b486; --product-text: #062b4f; --product-muted: #63778c; --product-border: #dce9f4; --product-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --product-wrap: 1280px; --product-gutter: 32px; /* Derivados para AA sobre fundo claro (pendência do DS: --product-blue dá 3,4:1 no branco) */ --cv-blue-text: #0067b8; --cv-neutral-text: #52657a; --cv-field-border: #7890a8; --cv-shadow-card: 0 16px 34px rgba(6, 43, 79, 0.08); --cv-shadow-hover: 0 16px 34px rgba(6, 43, 79, 0.1); --cv-shadow-media: 0 18px 40px rgba(6, 43, 79, 0.08); --sa-green-text: #0f7a4c; --sa-green-soft: #dff6e9; --sa-orange-text: #9a4a00; --sa-orange-soft: #ffecd9; --sa-step-gap: 48px; background: var(--product-white); } .sc-pdf:has(.sa-page), .sc-pdf:has(.sa-page) h1, .sc-pdf:has(.sa-page) h2, .sc-pdf:has(.sa-page) h3, .sc-pdf:has(.sa-page) p, .sc-pdf:has(.sa-page) a, .sc-pdf:has(.sa-page) li, .sc-pdf:has(.sa-page) span, .sc-pdf:has(.sa-page) button, .sc-pdf:has(.sa-page) strong, .sc-pdf:has(.sa-page) small, .sc-pdf:has(.sa-page) b, .sc-pdf:has(.sa-page) label, .sc-pdf:has(.sa-page) select, .sc-pdf:has(.sa-page) input, .sc-pdf:has(.sa-page) blockquote, .sc-pdf:has(.sa-page) cite, .sc-pdf:has(.sa-page) summary, .sc-pdf:has(.sa-page) dt, .sc-pdf:has(.sa-page) dd { font-family: var(--product-font) !important; } .sa-page { color: var(--product-text); background: var(--product-white); overflow-x: clip; } .sa-page *, .sa-page *::before, .sa-page *::after { box-sizing: border-box; } .sa-shell { width: min(calc(100% - (var(--product-gutter) * 2)), var(--product-wrap)); margin-inline: auto; } .sa-section { padding: 72px 0; } .sa-page h1, .sa-page h2, .sa-page h3, .sa-page p { margin-top: 0; } .sa-page h1, .sa-page h2, .sa-page h3 { font-weight: 800 !important; letter-spacing: -0.03em; color: var(--product-text) !important; } .sa-page h2 { text-wrap: balance; margin-bottom: 16px; font-size: clamp(32px, 3.6vw, 40px) !important; line-height: 1.12 !important; } .sa-page p { font-size: 16px; line-height: 1.65; letter-spacing: 0; } .sa-eyebrow { display: block; margin: 0 0 12px; color: var(--cv-blue-text); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .sa-hero .sa-eyebrow { color: rgba(234, 246, 255, 0.86); } .sa-actions { display: flex; flex-wrap: wrap; gap: 12px; } .sa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cv-blue-text) !important; font-weight: 700; text-decoration: none; } .sa-link:hover, .sa-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .sa-page a:focus-visible, .sa-page button:focus-visible, .sa-page select:focus-visible, .sa-page input:focus-visible, .sa-page summary:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45) !important; outline-offset: 3px; } /* Hero */ .sa-hero { position: relative; min-height: 560px; padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 72px; color: #fff; background: var(--product-navy-dark); } .sa-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #041f3a 0%, rgba(4, 31, 58, 0.96) 43%, rgba(4, 31, 58, 0.16) 74%, rgba(4, 31, 58, 0.35)); } .sa-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sa-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr); gap: 36px; align-items: center; } .sa-breadcrumb ol { align-items: center; } .sa-breadcrumb a { display: inline-block; padding: 4px 0; } .sa-hero h1 { margin-bottom: 12px !important; color: #fff !important; font-size: clamp(34px, 4.4vw, 54px) !important; letter-spacing: -0.035em; line-height: 1.08 !important; } .sa-hero-copy > .sa-hero-lead { margin-bottom: 12px; color: #eaf6ff; font-size: 22px; font-weight: 500; line-height: 1.3; } .sa-hero-copy > p { max-width: 570px; margin-bottom: 24px; color: rgba(234, 246, 255, 0.86); font-size: 18px; } .sa-order-card { width: 72%; margin-left: auto; padding: 24px; border-radius: 16px; background: #fff; color: var(--product-text); box-shadow: 0 28px 48px rgba(2, 16, 34, 0.38); transform: translateY(18px); } .sa-order-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--product-border); } .sa-order-head b { font-size: 17px; } .sa-order-head span { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: var(--sa-green-text); color: #fff; font-size: 12px; font-weight: 700; } .sa-order-card dl { margin: 12px 0; } .sa-order-card dl > div { display: grid; grid-template-columns: 120px 1fr; padding: 6px 0; } .sa-order-card dt { color: var(--cv-neutral-text); font-size: 13px; } .sa-order-card dd { margin: 0; font-size: 13px; font-weight: 700; } .sa-progress { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .sa-progress::before { content: ""; position: absolute; left: 10%; right: 10%; top: 7px; height: 2px; background: var(--product-border); } .sa-progress > span { position: relative; z-index: 1; width: 14px; height: 14px; margin: auto; border-radius: 50%; background: #c9d6e2; } .sa-progress > span.done { background: var(--sa-green-text); } .sa-progress small { color: var(--cv-neutral-text); font-size: 11px; text-align: center; } /* Processo */ .sa-process { background: linear-gradient(180deg, #fff, var(--product-ice)); } .sa-process-heading { max-width: 680px; margin-bottom: 28px; } .sa-process-heading p { color: var(--product-muted); } .sa-timeline { position: relative; } .sa-timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #a9d7f8; transform: translateX(-1px); } .sa-step { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sa-step-gap); align-items: center; min-height: 245px; padding: 24px 0; } .sa-step-copy { position: relative; } .sa-number { position: absolute; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--cv-blue-text); color: #fff; font-size: 18px; font-weight: 800; box-shadow: 0 0 0 4px #e5f4ff; } .sa-step-left .sa-step-copy .sa-number { left: calc(-1 * (var(--sa-step-gap) / 2) - 20px); } .sa-step-right .sa-step-copy .sa-number { right: calc(-1 * (var(--sa-step-gap) / 2) - 20px); } .sa-step-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; } .sa-step h3 { margin: 0; font-size: 21px; } .sa-status { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--sa-orange-soft); color: var(--sa-orange-text); font-size: 12px; font-weight: 700; } .sa-status.is-done { background: var(--sa-green-soft); color: var(--sa-green-text); } .sa-step p { color: var(--cv-neutral-text); font-size: 15px; } .sa-step ul, .sa-profit-grid > ul { list-style: none; padding: 0; margin: 8px 0 0; } .sa-step li, .sa-profit-grid > ul li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; margin: 8px 0; color: var(--product-text); font-size: 14px; } .sa-step li::before, .sa-profit-grid > ul li::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--cv-blue-text); color: #fff; font-size: 11px; } .sa-step-image { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--cv-shadow-media); } .sa-step-image > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .sa-screen > img { object-position: top; } .sa-message, .sa-checklist, .sa-billing { max-width: 320px; margin: auto; padding: 24px; } .sa-message { color: var(--product-text); } .sa-message > i { color: var(--sa-green-text); font-size: 24px; } .sa-message > b, .sa-checklist > strong, .sa-billing > strong:first-child { display: block; margin: 8px 0; font-size: 16px; font-weight: 800; } .sa-message p { padding: 10px; border-radius: 12px; background: #eaf7f1; color: #1d4d3e; } .sa-message > strong { display: block; margin-bottom: 12px; } .sa-mock-file { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--product-border); border-radius: 10px; color: var(--product-text); font-size: 14px; } .sa-mock-file i { color: #b3261e; } .sa-checklist > span { display: block; margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: var(--product-ice); color: var(--product-text); font-size: 14px; } .sa-checklist > span.is-active { background: var(--sa-green-soft); color: var(--sa-green-text); font-weight: 700; } .sa-billing p { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--product-border); font-size: 14px; } .sa-billing .sa-billing-total { display: flex; justify-content: space-between; margin-bottom: 12px; } .sa-billing .sa-billing-total span { color: var(--product-navy-mid); } /* Comunicação com o cliente */ .sa-client { background: linear-gradient(90deg, var(--product-ice), var(--product-blue-soft)); } .sa-client-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 48px; align-items: center; } .sa-client-grid > div > p { color: var(--cv-neutral-text); } .sa-client ul { list-style: none; padding: 0; margin: 24px 0; } .sa-client li { margin: 12px 0; color: var(--product-text); font-size: 15px; } .sa-client li i { width: 32px; color: var(--cv-blue-text); font-size: 20px; } .sa-client-visual { position: relative; isolation: isolate; padding: 12px 0 18px; } .sa-client-visual::before { content: ""; position: absolute; z-index: -1; inset: 36px -16px 0 28px; border-radius: 16px; background: linear-gradient(135deg, rgba(0, 142, 244, 0.2), rgba(0, 142, 244, 0.06)); } .sa-client-visual > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: var(--cv-shadow-media); } /* Composição da OS */ .sa-profit { background: #fff; } .sa-profit-grid { display: grid; grid-template-columns: 1fr 0.72fr 0.55fr; gap: 40px; align-items: center; } .sa-profit-grid > div:first-child p { color: var(--product-muted); } .sa-profit-card { padding: 24px; border: 1px solid var(--product-border); border-radius: 16px; box-shadow: var(--cv-shadow-card); } .sa-profit-card > strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 800; } .sa-profit-card dl { margin: 0; } .sa-profit-card dl > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--product-border); font-size: 14px; } .sa-profit-card dd { margin: 0; font-weight: 700; } .sa-profit-card .is-profit { padding: 10px; border-radius: 12px; border-bottom: 0; background: var(--sa-green-soft); color: var(--sa-green-text); } /* Agenda */ .sa-agenda { background: var(--product-ice); } .sa-agenda-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 48px; align-items: center; } .sa-agenda-grid > div:first-child p { color: var(--cv-neutral-text); } .sa-panel-shot { margin: 0; overflow: hidden; border: 1px solid var(--product-border); border-radius: 16px; background: #fff; box-shadow: var(--cv-shadow-media); } .sa-panel-shot img { display: block; width: 100%; height: auto; } /* Demonstração */ .sa-demo { background: linear-gradient(100deg, var(--product-navy), var(--product-navy-mid)); color: #fff; } .sa-demo-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; } .sa-demo h2 { color: #fff !important; } .sa-demo p { color: rgba(234, 246, 255, 0.86); } .sa-demo-card { padding: 28px; border-radius: 16px; background: #fff; color: var(--product-text); box-shadow: var(--cv-shadow-card); } .sa-demo-card h3 { margin-bottom: 12px; font-size: 17px; } .sa-demo-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0 0 24px; padding: 0; list-style: none; } .sa-demo-card li { color: var(--product-text); font-size: 15px; } .sa-demo-card li i { width: 24px; color: var(--cv-blue-text); } /* Prova social */ .sa-proof { background: #fff; } .sa-proof-grid { display: grid; grid-template-columns: 0.85fr 0.6fr 1fr; gap: 24px; align-items: center; } .sa-proof-grid > div:first-child p { color: var(--product-muted); } .sa-proof-grid > img { width: 100%; height: 240px; border-radius: 16px; object-fit: cover; } .sa-proof blockquote { margin: 0 !important; padding: 24px !important; border: 0; border-radius: 16px; background: var(--product-ice) !important; color: var(--product-text); font-size: 16px; line-height: 1.55; text-align: left !important; } .sa-proof blockquote::before, .sa-proof blockquote::after { content: none !important; } .sa-proof cite { display: block; margin-top: 16px; color: var(--product-text); font-style: normal; font-weight: 800; } /* FAQ */ .sa-faq { background: var(--product-ice); } .sa-faq-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 40px; } .sa-faq-grid > div:first-child p { color: var(--cv-neutral-text); } .sa-faq-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sa-faq-tags span { padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--product-navy-mid); font-size: 13px; } .sa-faq details { margin-bottom: 8px; padding: 0 16px; border: 1px solid var(--product-border); border-radius: 12px; background: #fff; } .sa-faq summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--product-text); font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; } .sa-faq summary::-webkit-details-marker { display: none; } .sa-faq summary::after { content: "⌄"; color: var(--cv-blue-text); font-size: 20px; } .sa-faq details[open] summary::after { content: "⌃"; } .sa-faq details p { padding-top: 10px; border-top: 1px solid var(--product-border); color: var(--cv-neutral-text); font-size: 15px; } /* CTA final */ .sa-final { padding: 72px 0; color: #fff; background: linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%); } .sa-final-grid { display: grid; grid-template-columns: 1.25fr auto 120px; gap: 28px; align-items: center; } .sa-final h2 { margin-bottom: 8px; color: #fff !important; } .sa-final p { margin: 0; color: rgba(234, 246, 255, 0.86); } .sa-growth { color: #9ed6ff; font-size: 64px; text-align: center; } @media (max-width: 1199px) { .sc-pdf:has(.sa-page) { --product-gutter: 24px; } .sa-hero::after { background: linear-gradient(90deg, rgba(4, 31, 58, 0.98) 0%, rgba(4, 31, 58, 0.9) 58%, rgba(4, 31, 58, 0.38) 100%); } .sa-hero-grid { grid-template-columns: 1fr; } .sa-hero-copy { max-width: min(570px, 60%); } .sa-order-card { width: min(100%, 520px); margin: 20px 0 0; transform: none; } .sa-process-heading { margin-inline: auto; text-align: center; } .sa-client-grid, .sa-agenda-grid, .sa-demo-grid, .sa-faq-grid { grid-template-columns: 1fr; } .sa-profit-grid { grid-template-columns: 1fr 1fr; } .sa-profit-grid > div:first-child { grid-column: 1 / -1; } .sa-proof-grid { grid-template-columns: 1fr 1fr; } .sa-proof-grid > div:first-child { grid-column: 1 / -1; } .sa-final-grid { grid-template-columns: 1fr; } .sa-growth { display: none; } } @media (max-width: 767px) { .sc-pdf:has(.sa-page) { --product-gutter: 16px; } .sa-section, .sa-final { padding: 56px 0; } .sa-hero-copy { max-width: none; } .sa-actions { flex-direction: column; } .sa-page .sp-product-btn { width: 100%; } .sa-order-card { width: 100%; padding: 16px; } .sa-order-card dl > div { grid-template-columns: 100px 1fr; } .sa-timeline::before { left: 20px; } .sa-step { grid-template-columns: 1fr; gap: 18px; padding-left: 52px; margin-bottom: 24px; } .sa-step-left .sa-step-image { order: 2; } .sa-step-left .sa-step-copy { order: 1; } .sa-step-right .sa-step-copy .sa-number, .sa-step-left .sa-step-copy .sa-number { left: -52px; right: auto; } .sa-step-head { flex-direction: column; align-items: flex-start; } .sa-client-grid, .sa-profit-grid, .sa-proof-grid { grid-template-columns: 1fr; } .sa-client-visual { padding: 8px 0 14px; } .sa-client-visual::before { inset: 24px -8px 2px 18px; } .sa-profit-grid > div:first-child { grid-column: auto; } .sa-demo-card { padding: 20px; } .sa-demo-card ul { grid-template-columns: 1fr; } .sa-faq-tags { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .sa-page .sp-product-btn { transition: none; } .sa-page .sp-product-btn:hover, .sa-page .sp-product-btn:focus-visible { transform: none; } } /* assets/css/sp-producao.css */ /* Segmento Indústria e produção — tokens e escala alinhados a sp-produto.css e às páginas de segmento */ .sc-pdf:has(.pr-page) { --product-navy: #062b4f; --product-navy-dark: #041f3a; --product-navy-mid: #073b6d; --product-blue: #008ef4; --product-blue-soft: #eaf6ff; --product-ice: #f5faff; --product-white: #ffffff; --product-orange: #ff6b20; --product-orange-hover: #ed5712; --product-text: #062b4f; --product-muted: #63778c; --product-border: #dce9f4; --product-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --product-wrap: 1280px; --product-gutter: 32px; /* Derivados para AA (pendência do DS: --product-blue dá 3,4:1 no branco) */ --cv-blue-text: #0067b8; --cv-neutral-text: #52657a; --pr-accent-dark: #9ed6ff; --pr-text-dark: rgba(234, 246, 255, 0.86); --pr-line-dark: rgba(158, 214, 255, 0.28); --pr-green-text: #0f7a4c; --pr-green-soft: #dff6e9; --cv-shadow-card: 0 16px 34px rgba(6, 43, 79, 0.08); --cv-shadow-media: 0 18px 40px rgba(6, 43, 79, 0.08); --pr-shadow-dark: 0 28px 48px rgba(2, 16, 34, 0.38); background: var(--product-white); } .sc-pdf:has(.pr-page), .sc-pdf:has(.pr-page) h1, .sc-pdf:has(.pr-page) h2, .sc-pdf:has(.pr-page) h3, .sc-pdf:has(.pr-page) p, .sc-pdf:has(.pr-page) a, .sc-pdf:has(.pr-page) li, .sc-pdf:has(.pr-page) span, .sc-pdf:has(.pr-page) button, .sc-pdf:has(.pr-page) strong, .sc-pdf:has(.pr-page) small, .sc-pdf:has(.pr-page) b, .sc-pdf:has(.pr-page) em, .sc-pdf:has(.pr-page) blockquote, .sc-pdf:has(.pr-page) cite, .sc-pdf:has(.pr-page) figcaption { font-family: var(--product-font) !important; } .pr-page { color: var(--product-text); background: var(--product-white); overflow-x: clip; } .pr-page *, .pr-page *::before, .pr-page *::after { box-sizing: border-box; } .pr-wrap { width: min(calc(100% - (var(--product-gutter) * 2)), var(--product-wrap)); margin-inline: auto; } .pr-section { padding: 72px 0; background: #fff; } .pr-dark { background: var(--product-navy); color: #fff; } .pr-page h1, .pr-page h2, .pr-page h3, .pr-page p { margin-top: 0; } .pr-page h1, .pr-page h2, .pr-page h3 { font-weight: 800 !important; letter-spacing: -0.03em; color: var(--product-text) !important; } .pr-page h2 { text-wrap: balance; margin-bottom: 16px; font-size: clamp(32px, 3.6vw, 40px) !important; line-height: 1.12 !important; } .pr-page p { color: var(--product-muted); font-size: 16px; line-height: 1.65; letter-spacing: 0; } .pr-dark h2, .pr-dark h3, .pr-hero h1, .pr-final h2 { color: #fff !important; } .pr-dark p, .pr-final p { color: var(--pr-text-dark); } .pr-kicker { display: block; margin: 0 0 12px; color: var(--cv-blue-text); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .pr-hero .pr-kicker, .pr-dark .pr-kicker { color: var(--pr-accent-dark); } .pr-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cv-blue-text) !important; font-size: 15px; font-weight: 700; text-decoration: none; } .pr-dark .pr-link { color: var(--pr-accent-dark) !important; } .pr-link:hover, .pr-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .pr-page a:focus-visible, .pr-page button:focus-visible, .pr-page [tabindex="0"]:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45) !important; outline-offset: 3px; } /* Hero */ .pr-hero { position: relative; overflow: hidden; min-height: 560px; padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 72px; color: #fff; background: var(--product-navy-dark); } .pr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 31, 58, 0.96) 0%, rgba(4, 31, 58, 0.78) 42%, rgba(4, 31, 58, 0.3) 100%); } .pr-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pr-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr); gap: 48px; align-items: center; } .pr-breadcrumb ol { align-items: center; } .pr-breadcrumb a { display: inline-block; padding: 4px 0; } .pr-hero h1 { margin: 0 0 16px !important; font-size: clamp(34px, 4.4vw, 54px) !important; letter-spacing: -0.035em; line-height: 1.08 !important; } .pr-hero h1 em { font-style: normal; color: var(--pr-accent-dark); } .pr-hero-copy > p { max-width: 520px; margin-bottom: 24px; color: var(--pr-text-dark); font-size: 18px; } .pr-hero-trust { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 28px 0 0; padding: 0; list-style: none; } .pr-hero-trust li { display: flex; align-items: center; gap: 8px; color: var(--pr-text-dark); font-size: 14px; } .pr-hero-trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pr-accent-dark); } .pr-live-card { padding: 24px; border: 1px solid var(--pr-line-dark); border-radius: 16px; background: rgba(4, 31, 58, 0.9); box-shadow: var(--pr-shadow-dark); color: #fff; } .pr-live-card header { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--pr-line-dark); font-size: 14px; } .pr-live-card header span { color: var(--pr-accent-dark); font-size: 13px; } .pr-live-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; } .pr-live-kpis div { padding: 12px; border-radius: 12px; background: rgba(7, 59, 109, 0.8); } .pr-live-kpis strong { display: block; color: #fff; font-size: 24px; } .pr-live-kpis small { display: block; color: var(--pr-text-dark); font-size: 12px; } .pr-live-head, .pr-live-row { display: grid; grid-template-columns: 0.5fr 1.4fr 0.8fr 0.9fr 0.9fr 0.9fr; gap: 8px; align-items: center; padding: 8px 6px; font-size: 12px; } .pr-live-head { border-radius: 10px; background: rgba(2, 16, 34, 0.5); color: var(--pr-accent-dark); } .pr-live-row { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pr-live-row .ok { color: #7ee2b8; } .pr-live-row .done { color: var(--pr-accent-dark); } /* Fluxo */ .pr-flow { padding: 72px 0; } .pr-flow-intro { max-width: 760px; margin: 0; } .pr-flow-scroll { margin-top: 28px; } .pr-flow-line { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; } .pr-flow-step { position: relative; display: grid; grid-template-rows: 64px 18px auto; justify-items: center; min-width: 0; text-align: center; } .pr-flow-step:not(:last-child)::after { content: ""; position: absolute; top: 31px; left: calc(50% + 38px); right: calc(-50% - 20px); height: 1px; background: linear-gradient(90deg, var(--pr-accent-dark), rgba(158, 214, 255, 0.4)); } .pr-flow-step:not(:last-child)::before { content: ""; position: absolute; z-index: 1; top: 27px; right: calc(-50% - 20px); width: 7px; height: 7px; border-top: 1.5px solid var(--pr-accent-dark); border-right: 1.5px solid var(--pr-accent-dark); transform: rotate(45deg); } .pr-flow-step-icon { position: relative; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--pr-accent-dark); border-radius: 50%; background: var(--product-navy); color: #fff; } .pr-flow-icon { display: block; width: 25px; height: 25px; } .pr-flow-step small { align-self: end; color: var(--pr-accent-dark); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; } .pr-flow-step b { max-width: 140px; margin-top: 4px; color: #fff; font-size: 14px; line-height: 1.3; } .pr-flow-footer { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; } .pr-single-source { padding: 8px 18px; border-radius: 999px; background: var(--cv-blue-text); color: #fff; font-size: 14px; font-weight: 700; } .pr-flow-optional { margin: 0 !important; padding-left: 16px; border-left: 1px solid var(--pr-line-dark); font-size: 14px !important; line-height: 1.45 !important; } .pr-flow-optional strong { color: #fff; } /* Telas reais */ .pr-split-title p { max-width: 680px; } .pr-system-demo { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap: 18px; margin-top: 28px; } .pr-system-demo nav { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--product-border); border-radius: 16px; background: var(--product-ice); } .pr-system-demo nav button { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px; border: 0; background: transparent; color: var(--product-text); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; transition: background-color 200ms ease; } .pr-system-demo nav button:hover { background: var(--product-blue-soft); } .pr-system-demo nav button.active { background: var(--cv-blue-text); color: #fff; } .pr-screen-number { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--product-blue-soft); color: var(--cv-blue-text); font-size: 12px; font-weight: 800; } .pr-system-demo nav button.active .pr-screen-number { background: #fff; } .pr-real-screen { position: relative; display: flex; align-items: center; justify-content: center; min-height: 410px; margin: 0; padding: 12px; overflow: hidden; border: 1px solid var(--product-border); border-radius: 16px; background: linear-gradient(145deg, var(--product-blue-soft), #fff); box-shadow: var(--cv-shadow-media); } .pr-real-screen img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: contain; border-radius: 10px; } .pr-real-screen figcaption { position: absolute; right: 20px; bottom: 20px; padding: 6px 12px; border-radius: 999px; background: rgba(4, 31, 58, 0.9); color: #fff; font-size: 12px; font-weight: 700; } .pr-system-demo aside { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--product-border); border-radius: 16px; } .pr-gear { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--product-blue-soft); color: var(--cv-blue-text); font-size: 14px; font-weight: 800; } .pr-system-demo aside h3 { margin: 12px 0 8px; font-size: 19px; } .pr-system-demo aside p { font-size: 15px; } .pr-system-demo aside ul { margin: 0 0 12px; padding: 0; list-style: none; } .pr-system-demo aside li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 6px 0; color: var(--product-text); font-size: 14px; } .pr-system-demo aside li::before { content: "✓"; color: var(--cv-blue-text); font-weight: 700; } .pr-system-demo aside .pr-link { margin-top: auto; } /* Engenharia */ .pr-engineering { padding: 72px 0; } .pr-engineering-grid { display: grid; grid-template-columns: 1fr 0.6fr 1.5fr 0.62fr; gap: 18px; align-items: center; } .pr-engineering img { width: 100%; height: 270px; object-fit: cover; border-radius: 16px; } .pr-materials, .pr-final-product { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--pr-line-dark); border-radius: 16px; font-size: 14px; } .pr-materials span { display: flex; justify-content: space-between; gap: 8px; color: var(--pr-text-dark); } .pr-materials em { font-style: normal; color: #fff; white-space: nowrap; } .pr-final-product strong { margin-top: 12px; } .pr-final-product span { color: var(--pr-text-dark); } /* Roteiro */ .pr-two { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: 48px; align-items: center; } .pr-plan { background: var(--product-ice); } .pr-plan .pr-two > div:first-child p { color: var(--cv-neutral-text); } .pr-route { padding: 20px; border: 1px solid var(--product-border); border-radius: 16px; background: #fff; box-shadow: var(--cv-shadow-card); } .pr-route header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--product-text); } .pr-route header span { color: var(--cv-neutral-text); font-size: 13px; } .pr-route header .pr-nowrap { color: inherit; font-size: inherit; white-space: nowrap; } .pr-route > div { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--product-border); font-size: 14px; } .pr-route > div > span:last-of-type { color: var(--cv-neutral-text); } .pr-route-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--product-blue-soft); color: var(--cv-blue-text) !important; font-weight: 800; } .pr-route em { padding: 4px 10px; border-radius: 999px; background: var(--pr-green-soft); color: var(--pr-green-text); font-size: 12px; font-style: normal; font-weight: 700; } .pr-route footer { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--pr-green-soft); color: var(--pr-green-text); font-size: 14px; font-weight: 700; } /* Relatórios */ .pr-metrics { padding: 72px 0; } .pr-metrics-heading p { max-width: 680px; margin-bottom: 0; } .pr-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; } .pr-metric-card { padding: 20px; border: 1px solid var(--pr-line-dark); border-radius: 16px; background: linear-gradient(160deg, var(--product-navy-mid), var(--product-navy)); } .pr-metric-card h3 { margin-bottom: 8px; font-size: 17px; } .pr-metric-card p { margin: 0; font-size: 15px; } /* Rastreabilidade */ .pr-trace-card { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } .pr-trace-line { margin: 0; padding: 0; list-style: none; counter-reset: trace; } .pr-trace-line li { position: relative; padding: 0 0 18px 44px; color: var(--cv-neutral-text); font-size: 14px; counter-increment: trace; } .pr-trace-line li::before { content: counter(trace); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--product-blue-soft); color: var(--cv-blue-text); font-weight: 800; } .pr-trace-line li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--product-border); } .pr-trace-line b { display: block; color: var(--product-text); } .pr-product-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--product-border); border-radius: 16px; box-shadow: var(--cv-shadow-card); } .pr-product-card > span { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--pr-green-soft); color: var(--pr-green-text); font-size: 13px; font-weight: 700; } .pr-product-card strong { font-size: 19px; } .pr-product-card small { color: var(--cv-neutral-text); font-size: 14px; } /* Diagnóstico */ .pr-diagnostic { padding: 72px 0; } .pr-demo-card { padding: 28px; border-radius: 16px; background: #fff; color: var(--product-text); box-shadow: var(--pr-shadow-dark); } .pr-dark .pr-demo-card h3 { margin-bottom: 12px; color: var(--product-text) !important; font-size: 17px; } .pr-demo-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0 0 24px; padding: 0; list-style: none; } .pr-demo-card li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; color: var(--product-text); font-size: 15px; } .pr-demo-card li::before { content: "✓"; color: var(--cv-blue-text); font-weight: 700; } /* Prova social */ .pr-proof-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; } .pr-proof blockquote { margin: 0 !important; padding: 24px 24px 24px 72px !important; position: relative; border: 0; border-radius: 16px; background: var(--product-ice) !important; color: var(--product-text); font-size: 18px; line-height: 1.55; text-align: left !important; } .pr-proof blockquote::before { content: "“" !important; position: absolute; left: 24px; top: 10px; color: var(--cv-blue-text); font-size: 64px; line-height: 1; } .pr-proof blockquote::after { content: none !important; } .pr-proof cite { display: block; margin-top: 12px; color: var(--product-text); font-size: 15px; font-style: normal; font-weight: 800; } /* CTA final */ .pr-final { position: relative; overflow: hidden; background: var(--product-navy-dark); color: #fff; } .pr-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; } .pr-final .pr-wrap { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 72px 0; } .pr-final h2 { margin-bottom: 8px; } .pr-final p { max-width: 620px; margin: 0; } .pr-final .sp-product-btn { flex: 0 0 auto; } @media (max-width: 1199px) { .sc-pdf:has(.pr-page) { --product-gutter: 24px; } .pr-hero::after { background: linear-gradient(90deg, rgba(4, 31, 58, 0.98) 0%, rgba(4, 31, 58, 0.9) 58%, rgba(4, 31, 58, 0.6) 100%); } .pr-hero-grid, .pr-two, .pr-engineering-grid, .pr-proof-grid { grid-template-columns: 1fr; } .pr-flow-scroll { overflow-x: auto; margin-right: calc(-1 * var(--product-gutter)); padding: 0 var(--product-gutter) 16px 0; scrollbar-width: thin; scrollbar-color: var(--cv-blue-text) transparent; } .pr-flow-line { grid-template-columns: repeat(7, 128px); min-width: max-content; } .pr-flow-footer { flex-direction: column; align-items: flex-start; gap: 12px; } .pr-flow-optional { padding-left: 0; border-left: 0; } .pr-system-demo { grid-template-columns: 1fr; } .pr-system-demo nav { display: grid; grid-template-columns: repeat(2, 1fr); } .pr-metric-grid { grid-template-columns: repeat(2, 1fr); } .pr-metric-card:last-child { grid-column: 1 / -1; } .pr-real-screen { min-height: 0; } .pr-engineering img { height: auto; } .pr-final .pr-wrap { flex-direction: column; align-items: flex-start; } } @media (max-width: 767px) { .sc-pdf:has(.pr-page) { --product-gutter: 16px; } .pr-section, .pr-flow, .pr-engineering, .pr-metrics, .pr-diagnostic { padding: 56px 0; } .pr-final .pr-wrap { padding: 56px 0; } .pr-hero-trust { flex-direction: column; } .pr-page .sp-product-btn { width: 100%; } .pr-live-card { padding: 16px; } .pr-live-head, .pr-live-row { grid-template-columns: 0.5fr 1.5fr 1fr 1fr; } .pr-col-extra { display: none; } .pr-system-demo nav, .pr-metric-grid { grid-template-columns: 1fr; } .pr-real-screen { padding: 8px; } .pr-real-screen figcaption { right: 12px; bottom: 12px; } .pr-route > div { grid-template-columns: 32px 1fr auto; } .pr-route em { grid-column: 2 / -1; justify-self: start; } .pr-trace-card, .pr-demo-card ul { grid-template-columns: 1fr; } .pr-demo-card { padding: 20px; } } @media (prefers-reduced-motion: reduce) { .pr-page .sp-product-btn, .pr-system-demo nav button { transition: none; } .pr-page .sp-product-btn:hover, .pr-page .sp-product-btn:focus-visible { transform: none; } } /* assets/css/sp-support-pages.css */ .support-page, .support-page * { box-sizing: border-box; } /* Tokens alinhados a --product-* (sp-produto.css) */ .support-page { --support-navy: #062b4f; --support-deep: #041f3a; --support-navy-mid: #073b6d; --support-blue: #0070c9; --support-blue-soft: #eaf6ff; --support-light: rgba(234, 246, 255, .86); --support-orange: #c2410c; --support-orange-hover: #9a3412; --support-ink: #062b4f; --support-text: #5a6e83; --support-line: #dce9f4; --support-field-border: #748ba2; --support-danger: #b42318; --support-danger-soft: #fef3f2; --support-ice: #f5faff; --support-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --support-wrap: 1280px; --support-gutter: 32px; --support-radius-sm: 10px; --support-radius-md: 12px; --support-radius-lg: 16px; --support-shadow-sm: 0 10px 24px rgba(6, 43, 79, .06); --support-shadow-md: 0 16px 34px rgba(6, 43, 79, .08); --support-shadow-cta: 0 10px 22px rgba(194, 65, 12, .24); --support-dark-bg: linear-gradient(118deg, var(--support-deep) 0%, var(--support-navy) 46%, var(--support-navy-mid) 100%); font-family: var(--support-font); color: var(--support-ink); background: var(--support-ice); } /* Vence o Segoe UI !important do sc-pdf.css, como em sp-produto.css */ .sc-pdf:has(.support-page), .sc-pdf:has(.support-page) h1, .sc-pdf:has(.support-page) h2, .sc-pdf:has(.support-page) h3, .sc-pdf:has(.support-page) h4, .sc-pdf:has(.support-page) p, .sc-pdf:has(.support-page) a, .sc-pdf:has(.support-page) li, .sc-pdf:has(.support-page) span, .sc-pdf:has(.support-page) button, .sc-pdf:has(.support-page) strong, .sc-pdf:has(.support-page) small { font-family: Inter, "Segoe UI", "Segoe UI Variable", sans-serif !important; } .support-page a:focus-visible, .support-page button:focus-visible, .support-page input:focus-visible, .support-page select:focus-visible, .support-page textarea:focus-visible { outline: 2px solid var(--support-navy-mid); outline-offset: 3px; } .support-hero a:focus-visible, .support-cta a:focus-visible, .support-cta button:focus-visible { outline-color: #fff; } .support-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .support-wrap { width: min(calc(100% - (var(--support-gutter) * 2)), var(--support-wrap)); margin: 0 auto; } .support-hero { position: relative; overflow: hidden; padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 92px; color: #fff; background: radial-gradient(circle at 78% 22%, rgba(0, 142, 244, .32), transparent 34%), var(--support-dark-bg); } .support-hero::after { position: absolute; right: -80px; bottom: -190px; width: 440px; height: 440px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; box-shadow: 0 0 0 52px rgba(255, 255, 255, .025), 0 0 0 104px rgba(255, 255, 255, .02); content: ""; } .support-hero .support-wrap { position: relative; z-index: 1; } .support-breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; color: rgba(255, 255, 255, .7); font-size: 13px; } .support-breadcrumb a, .support-breadcrumb b { color: #fff; font-weight: 600; } .support-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; list-style: none; } .support-breadcrumb li + li::before { margin-right: 8px; opacity: .7; content: "/"; } .support-breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; } .support-breadcrumb ol a { display: inline-flex; min-width: 44px; min-height: 44px; margin-block: -14px; align-items: center; justify-content: center; color: rgba(234, 246, 255, .78); text-decoration: none; } .support-breadcrumb ol a:hover { color: #fff; text-decoration: underline; } .support-kicker { display: inline-block; color: var(--support-blue); font-size: 12px; font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; } .support-hero .support-kicker, .support-cta .support-kicker, .content-update-card > header .support-kicker { color: var(--support-light); } .support-hero h1 { max-width: 760px; margin: 14px 0 18px; color: #fff; font-size: clamp(34px, 4.4vw, 54px); font-weight: 800 !important; line-height: 1.08; letter-spacing: -.035em; } .support-hero p { max-width: 690px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.7; } .support-section { padding: 72px 0; } .support-card, .support-form-card, .support-faq-item, .support-app-card { border: 1px solid var(--support-line); background: #fff; box-shadow: var(--support-shadow-sm); } .support-utilities-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 48px; align-items: start; } .support-links-card { padding: 30px; border-radius: var(--support-radius-lg); } .support-card-icon { display: grid; width: 48px; height: 48px; margin-bottom: 24px; border-radius: var(--support-radius-md); color: #fff; background: var(--support-blue); place-items: center; font-size: 22px; } .support-section-heading h2, .support-faq-intro h2, .support-contact-copy h2, .support-cta h2 { margin: 0; color: var(--support-ink); font-size: clamp(32px, 3.6vw, 40px); font-weight: 800 !important; line-height: 1.12; letter-spacing: -.03em; } .support-links-card h2, .support-form-heading h2 { margin: 0; color: var(--support-ink); font-size: 22px; font-weight: 800 !important; line-height: 1.2; letter-spacing: -.02em; } .support-links-card h2 { font-size: 18px; line-height: 1.25; } .support-links-card > p, .support-section-heading p, .support-faq-intro > p, .support-contact-copy > p, .support-form-heading p { color: var(--support-text); line-height: 1.65; } .support-link-list { display: grid; gap: 4px; padding: 18px 0 0; margin: 20px 0 0; border-top: 1px solid var(--support-line); list-style: none; } .support-link-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; color: var(--support-ink); font-weight: 600; text-decoration: none; transition: color .2s ease, transform .2s ease; } .support-link-list a:hover { color: var(--support-blue); transform: translateX(4px); } .support-link-list a:active { transform: none; } .support-link-list .support-icon { color: var(--support-blue); font-size: 15px; } .support-section-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 28px; } .support-section-heading .support-kicker, .support-faq-intro .support-kicker, .support-contact-copy .support-kicker { margin-bottom: 10px; } .support-section-heading p { max-width: 390px; margin: 0; } .support-app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .support-app-card { display: flex; min-height: 184px; padding: 24px 18px; border-radius: var(--support-radius-lg); align-items: center; flex-direction: column; justify-content: center; color: var(--support-ink); text-align: center; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .support-app-card:hover { border-color: rgba(0, 112, 201, .45); box-shadow: var(--support-shadow-md); color: var(--support-ink); transform: translateY(-4px); } .support-app-card:active { transform: none; } .support-app-card img { width: 94px; height: 62px; margin-bottom: 15px; object-fit: contain; } .support-app-card h3 { margin: 0; color: var(--support-ink); font-size: 18px; font-weight: 800 !important; line-height: 1.25; overflow-wrap: break-word; } .support-app-card small { margin-top: 4px; color: var(--support-text); } .support-note { margin: 22px 0 0; color: var(--support-text); font-size: 13px; } .support-note a { display: inline-flex; min-height: 44px; align-items: center; color: var(--support-blue); font-weight: 700; text-decoration: none; } .support-note a:hover { text-decoration: underline; } .support-cta { padding: 72px 0; color: #fff; background: var(--support-dark-bg); } .support-cta .support-wrap { display: flex; justify-content: space-between; gap: 30px; align-items: center; } .support-cta h2 { margin: 8px 0 7px; color: #fff; } .support-cta p { margin: 0; color: rgba(255, 255, 255, .78); } .support-button { display: inline-flex; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--support-radius-sm); align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .support-button:hover { color: #fff; transform: translateY(-1px); } .support-button:active { transform: none; } .support-button--orange { border-color: var(--support-orange); background: var(--support-orange); box-shadow: var(--support-shadow-cta); } .support-button--orange:hover { border-color: var(--support-orange-hover); background: var(--support-orange-hover); } .support-button--blue { border-color: var(--support-blue); background: var(--support-blue); box-shadow: 0 10px 22px rgba(0, 112, 201, .2); } .support-button--blue:hover { border-color: var(--support-navy-mid); background: var(--support-navy-mid); } .support-faq-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 56px; align-items: start; } .support-faq-intro { padding-top: 12px; } .support-faq-intro > p { margin: 12px 0 0; font-size: 16px; } .support-faq-intro .support-button { margin-top: 18px; } .support-faq-list { display: grid; gap: 12px; } .support-faq-item { overflow: hidden; border-radius: var(--support-radius-md); box-shadow: var(--support-shadow-sm); } .support-faq-item.is-open { border-color: rgba(0, 112, 201, .5); } .support-faq-heading { margin: 0; font-size: inherit; line-height: inherit; } .support-faq-question { display: flex; width: 100%; padding: 21px 24px; border: 0; border-radius: var(--support-radius-md); align-items: center; justify-content: space-between; gap: 24px; color: var(--support-ink); background: #fff; text-align: left; font-size: 16px; font-weight: 700; transition: background-color .2s ease; } .support-faq-question:hover { background: var(--support-ice); } .support-faq-question:active { background: var(--support-blue-soft); } /* O item tem overflow:hidden; o foco fica por dentro para não ser cortado */ .support-page .support-faq-question:focus-visible { outline-offset: -3px; } .support-faq-toggle { display: grid; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; place-items: center; color: var(--support-blue); background: var(--support-blue-soft); font-size: 18px; transition: transform .2s ease; } .support-faq-item.is-open .support-faq-toggle { color: #fff; background: var(--support-blue); transform: rotate(45deg); } .support-faq-answer { padding: 0 24px 22px; color: var(--support-text); line-height: 1.65; } .support-faq-answer p { margin: 0; color: var(--support-text); font-size: 15px; line-height: 1.65; } .support-contact-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.35fr); gap: 64px; align-items: start; } .support-contact-copy { padding-top: 24px; } .support-contact-copy h2 { max-width: 430px; } .support-contact-copy > p { margin: 12px 0 0; font-size: 16px; } .support-contact-benefits { display: grid; gap: 14px; padding: 24px 0; margin: 28px 0; border-top: 1px solid var(--support-line); border-bottom: 1px solid var(--support-line); list-style: none; } .support-contact-benefits li { display: flex; gap: 12px; align-items: center; color: var(--support-ink); font-weight: 600; } .support-contact-benefits li > span { display: grid; width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px; color: #fff; background: var(--support-blue); place-items: center; font-size: 14px; } .support-contact-info { display: grid; justify-items: start; } .support-contact-info small { margin-bottom: 4px; color: var(--support-text); font-size: 12px; font-weight: 700; letter-spacing: .16em; } .support-contact-info a { display: inline-flex; min-height: 44px; align-items: center; color: var(--support-ink); font-size: 17px; font-weight: 700; text-decoration: none; } .support-contact-info a:hover { color: var(--support-blue); text-decoration: underline; } .support-form-card { padding: 32px; border-radius: var(--support-radius-lg); } .support-form-heading { padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--support-line); } .support-form-heading .support-kicker { margin-bottom: 8px; } .support-form-heading h2 { font-size: 18px; line-height: 1.25; } .support-form-heading p { margin: 8px 0 0; font-size: 13px; } .support-contact-form .row { margin: 0 -8px; } .support-contact-form [class*="col-"] { padding: 0 8px; margin-top: 16px; } .support-contact-form .form-label { margin-bottom: 8px; color: var(--support-ink); font-size: 13px; font-weight: 700; } /* Vence o .form-control !important de systemport-v2.css */ .support-page .support-contact-form .form-control, .support-page .support-contact-form .form-select { min-height: 48px; border: 1px solid var(--support-field-border) !important; border-radius: var(--support-radius-sm) !important; color: var(--support-ink); background-color: #fff; font-family: var(--support-font) !important; font-size: 15px; box-shadow: none; } .support-page .support-contact-form .form-control:focus, .support-page .support-contact-form .form-select:focus { border-color: var(--support-blue) !important; box-shadow: none !important; } .support-page .support-contact-form .form-control.invalid, .support-page .support-contact-form .form-select.invalid { border-color: var(--support-danger) !important; } .support-contact-form .form-check { display: flex; min-height: 44px; gap: 12px; align-items: center; padding: 16px 0 0; } .support-contact-form .form-check-input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; border-color: var(--support-field-border); } .support-contact-form .form-check-input:checked { border-color: var(--support-blue); background-color: var(--support-blue); } .support-contact-form .form-check-input:focus { border-color: var(--support-blue); box-shadow: none; } .support-contact-form .form-check-label { color: var(--support-text); font-size: 13px; line-height: 1.55; } .support-contact-form .validation-message { display: block; margin-top: 6px; color: var(--support-danger); font-size: 13px; } .support-form-alert { padding: 12px 16px; margin: 16px 0 0; border: 1px solid var(--support-danger); border-radius: var(--support-radius-sm); color: var(--support-danger); background: var(--support-danger-soft); font-size: 14px; } .support-form-actions { display: flex; justify-content: flex-end; padding-top: 24px; } .support-form-actions .support-button { min-width: 220px; } .support-button:disabled { cursor: not-allowed; opacity: .6; transform: none; } @media (max-width: 1199px) { .support-page { --support-gutter: 24px; } } @media (max-width: 991px) { .support-utilities-grid, .support-faq-layout, .support-contact-layout { grid-template-columns: 1fr; gap: 38px; } .support-links-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; align-items: center; } .support-links-card .support-card-icon { margin-bottom: 0; } .support-links-card > p { grid-column: 1 / -1; } .support-links-card .support-link-list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .support-faq-intro, .support-contact-copy { padding-top: 0; } } @media (max-width: 767px) { .support-page { --support-gutter: 16px; } .support-hero { padding: calc(var(--sp-hero-nav-h, 64px) + 18px) 0 72px; } .support-breadcrumb { margin-bottom: 26px; } .support-hero h1 { font-size: 34px; } .support-hero p { font-size: 16px; } .support-section, .support-cta { padding: 56px 0; } .support-section-heading, .support-cta .support-wrap { align-items: flex-start; flex-direction: column; } .support-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .support-app-card { min-height: 140px; padding: 18px 12px; } .support-app-card img { width: 72px; height: 48px; margin-bottom: 12px; } .support-app-card h3 { font-size: 16px; } .support-links-card .support-link-list { grid-template-columns: 1fr; } .support-form-card { padding: 24px 16px; } /* 16px evita o zoom do iOS ao focar o campo */ .support-page .support-contact-form .form-control, .support-page .support-contact-form .form-select { font-size: 16px; } .support-form-actions .support-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .support-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* Content pages */ .content-panel-heading { padding: 4px 4px 22px; } .content-panel-heading h2, .content-updates-menu h2, .content-section-intro h2, .content-article-summary h2 { margin: 8px 0 0; color: var(--support-ink); font-size: 27px; line-height: 1.2; letter-spacing: -.025em; } .content-video-library { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: start; } .content-video-menu, .content-updates-menu, .content-update-card, .content-video-stage, .content-org-card, .content-article, .content-article-summary { border: 1px solid var(--support-line); border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(4, 38, 73, .07); } .content-video-menu, .content-updates-menu { padding: 24px; } .content-video-category { overflow: hidden; border-top: 1px solid var(--support-line); } .content-video-category-button { display: flex; width: 100%; padding: 17px 4px; border: 0; align-items: center; justify-content: space-between; gap: 16px; color: var(--support-ink); background: transparent; text-align: left; font-weight: 750; } .content-video-category-button i { display: grid; width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; color: var(--support-blue); background: #eaf6fd; place-items: center; font-size: 18px; font-style: normal; transition: transform .2s ease; } .content-video-category.is-open .content-video-category-button i { color: #fff; background: var(--support-blue); transform: rotate(45deg); } .content-video-lessons { display: grid; gap: 5px; padding: 0 0 14px; } .content-video-lesson { display: flex; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; gap: 10px; color: #5f7589; background: #f5f8fb; text-align: left; font-size: 13px; } .content-video-lesson.has-video { color: #174c7a; background: #eef8fe; font-weight: 650; } .content-video-lesson.has-video:hover { color: #fff; background: var(--support-blue); } .content-video-stage { min-height: 570px; overflow: hidden; padding: 20px; background: linear-gradient(145deg, #052b52, #074d7c); } .content-video-placeholder { display: flex; min-height: 528px; padding: 32px; align-items: center; flex-direction: column; justify-content: center; color: rgba(255, 255, 255, .75); text-align: center; } .content-video-placeholder > span { display: grid; width: 72px; height: 72px; margin-bottom: 22px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .1); place-items: center; font-size: 25px; } .content-video-placeholder h2 { margin: 0 0 8px; color: #fff; font-size: 28px; } .content-video-placeholder p { max-width: 430px; margin: 0; line-height: 1.65; } .content-video-frame { position: relative; overflow: hidden; min-height: 528px; border-radius: 12px; background: #000; } .content-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .content-updates-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 38px; align-items: start; } .content-updates-menu { position: sticky; top: 100px; } .content-update-list { display: grid; gap: 7px; max-height: 600px; padding-right: 4px; margin-top: 22px; overflow-y: auto; } .content-update-link { display: flex; width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid transparent; border-radius: 9px; align-items: center; justify-content: space-between; gap: 12px; color: #45627f; background: #f5f8fb; text-align: left; font-size: 13px; font-weight: 650; } .content-update-link:hover, .content-update-link.is-active { border-color: rgba(0, 112, 201, .26); color: #fff; background: var(--support-blue); } .content-update-link i { font-style: normal; } .content-update-card { overflow: hidden; } .content-update-card > header { padding: 34px 38px 28px; color: #fff; background: linear-gradient(120deg, #052b52, #07517d); } .content-update-card > header h2 { margin: 10px 0 9px; color: #fff; font-size: 31px; } .content-update-summary { color: rgba(255, 255, 255, .78); line-height: 1.65; } .content-update-summary p { margin: 0; } .content-update-body { display: grid; gap: 18px; padding: 30px 38px 38px; } .content-update-group { padding: 22px; border-left: 4px solid var(--support-blue); border-radius: 10px; background: #f4f9fd; } .content-update-group.is-novidade { border-left-color: #1faa70; background: #effaf5; } .content-update-group.is-erro { border-left-color: #dc4b4b; background: #fff4f4; } .content-update-group.is-urgente { border-left-color: var(--support-orange); background: #fff7f0; } .content-update-group h3 { margin: 0 0 13px; color: var(--support-ink); font-size: 18px; } .content-update-group ul { padding-left: 20px; margin: 0; color: var(--support-text); line-height: 1.65; } .content-update-group li + li { margin-top: 8px; } .content-update-video { display: inline-flex; margin: 12px 0 0 20px; color: var(--support-blue); font-size: 13px; font-weight: 750; } .content-update-empty { display: flex; min-height: 380px; padding: 40px; border: 1px dashed #bbd1e2; border-radius: 20px; align-items: center; flex-direction: column; justify-content: center; color: var(--support-text); background: #fff; text-align: center; } .content-update-empty > span { color: var(--support-blue); font-size: 36px; } .content-update-empty h2 { margin: 13px 0 6px; color: var(--support-ink); } .content-section-intro { display: flex; justify-content: space-between; gap: 34px; align-items: end; margin-bottom: 34px; } .content-section-intro p { max-width: 500px; margin: 0; color: var(--support-text); line-height: 1.65; } .content-org-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .content-org-card { overflow: hidden; } .content-org-card--wide { grid-column: 1 / -1; } .content-org-card header { display: flex; padding: 20px 24px; border-bottom: 1px solid var(--support-line); align-items: center; gap: 13px; } .content-org-card header span { display: grid; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--support-blue); place-items: center; font-size: 11px; font-weight: 800; } .content-org-card h3 { margin: 0; color: var(--support-ink); font-size: 19px; } .content-org-card > div { display: grid; min-height: 280px; padding: 24px; overflow: auto; place-items: center; background: #fbfdff; } .content-org-card img { display: block; max-width: 100%; height: auto; margin: 0 auto; } .content-article-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 42px; align-items: start; } .content-article-summary { position: sticky; top: 100px; padding: 28px; } .content-article-summary > p { margin: 14px 0 22px; color: var(--support-text); line-height: 1.65; } .content-article-summary > div { display: flex; flex-wrap: wrap; gap: 8px; } .content-article-summary b { padding: 7px 10px; border-radius: 20px; color: #17639b; background: #eaf6fd; font-size: 11px; } .content-article { padding: 12px 40px 42px; } .content-article h4 { padding-top: 30px; margin: 28px 0 15px; border-top: 1px solid var(--support-line); color: var(--support-ink); font-size: 25px; line-height: 1.25; letter-spacing: -.02em; } .content-article h4:first-child { padding-top: 18px; margin-top: 0; border-top: 0; } .content-article p { margin: 0 0 16px !important; color: var(--support-text); font-size: 16px; line-height: 1.82; } .content-article strong { color: #174c7a; } @media (max-width: 991px) { .content-video-library, .content-updates-layout, .content-article-layout { grid-template-columns: 1fr; } .content-updates-menu, .content-article-summary { position: static; } .content-update-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; } } @media (max-width: 767px) { .content-video-menu, .content-updates-menu { padding: 20px; } .content-video-stage { min-height: 360px; padding: 12px; } .content-video-placeholder, .content-video-frame { min-height: 334px; } .content-update-list, .content-org-grid { grid-template-columns: 1fr; } .content-update-card > header, .content-update-body { padding: 25px 22px; } .content-section-intro { align-items: flex-start; flex-direction: column; } .content-org-card--wide { grid-column: auto; } .content-org-card > div { min-height: 200px; padding: 16px; } .content-article { padding: 8px 22px 30px; } .content-article h4 { font-size: 22px; } } .support-page .loading-overlay .spinner-border { color: var(--support-blue); } .support-contact-form .form-check-input.invalid { border-color: var(--support-danger); } /* assets/css/sp-erp-article.css */ /* Artigo "Por que ter um ERP" (/erp-article) — escopado em .support-page--article para não afetar as outras páginas de suporte */ .sc-pdf:has(.support-page--article) { --product-navy: #062b4f; --product-navy-dark: #041f3a; --product-navy-mid: #073b6d; --product-blue: #008ef4; --product-blue-soft: #eaf6ff; --product-ice: #f5faff; --product-orange: #ff6b20; --product-orange-hover: #ed5712; --product-text: #062b4f; --product-muted: #63778c; --product-border: #dce9f4; --product-font: Inter, "Segoe UI", "Segoe UI Variable", sans-serif; --product-wrap: 1280px; --product-gutter: 32px; /* Derivados para AA (pendência do DS: --product-blue dá 3,4:1 no branco) */ --cv-blue-text: #0067b8; --pr-accent-dark: #9ed6ff; --pr-text-dark: rgba(234, 246, 255, 0.86); --cv-shadow-card: 0 16px 34px rgba(6, 43, 79, 0.08); /* Tokens do botão e das fotos (iguais ao :root de sp-produto.css) */ --product-orange-cta: #c2410c; --product-orange-cta-hover: #9a3412; --product-radius-sm: 10px; --product-radius-lg: 16px; --product-shadow-md: 0 16px 34px rgba(6, 43, 79, 0.08); --product-shadow-lg: 0 24px 44px rgba(2, 16, 34, 0.3); --product-shadow-cta: 0 10px 22px rgba(194, 65, 12, 0.24); --product-blue-text: #0067b8; } .sc-pdf:has(.support-page--article), .sc-pdf:has(.support-page--article) :is(h1, h2, h3, p, a, li, span, button, strong, b, small) { font-family: var(--product-font) !important; } .support-page--article { --support-navy: var(--product-navy); --support-deep: var(--product-navy-dark); --support-blue: var(--product-blue); --support-orange: var(--product-orange); --support-ink: var(--product-text); --support-text: var(--product-muted); --support-line: var(--product-border); color: var(--product-text); background: var(--product-ice); } .support-page--article .support-wrap { width: min(calc(100% - (var(--product-gutter) * 2)), var(--product-wrap)); } .support-page--article a:focus-visible, .support-page--article button:focus-visible, .support-page--article summary:focus-visible { outline: 3px solid rgba(10, 149, 255, 0.45) !important; outline-offset: 3px; } .support-page--article .support-kicker { display: block; color: var(--cv-blue-text); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .support-page--article .support-hero .support-kicker, .support-page--article .support-cta .support-kicker { color: var(--pr-accent-dark); } /* Hero */ .support-page--article .support-hero { padding: calc(var(--sp-hero-nav-h, 78px) + 18px) 0 72px; background: radial-gradient(circle at 82% 20%, rgba(0, 142, 244, 0.2), transparent 26%), linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%); } .support-page--article .erp-breadcrumb ol { align-items: center; } .support-page--article .erp-breadcrumb a { display: inline-block; padding: 12px 0; } .support-page--article .support-hero h1 { margin: 12px 0 16px; font-size: clamp(34px, 4.4vw, 54px); font-weight: 800 !important; line-height: 1.08; letter-spacing: -0.035em; color: #fff !important; } .support-page--article .support-hero p { color: var(--pr-text-dark); font-size: 18px; line-height: 1.65; letter-spacing: 0; } /* Corpo */ .support-page--article .support-section { padding: 72px 0; } .support-page--article .content-article-layout { gap: 40px; } .support-page--article .content-article, .support-page--article .content-article-summary { border-radius: 16px; box-shadow: var(--cv-shadow-card); } .support-page--article .content-article-summary h2 { margin: 8px 0 8px; color: var(--product-text) !important; font-size: 22px; font-weight: 800 !important; line-height: 1.25; } .support-page--article .content-article-summary p { color: var(--product-muted); font-size: 15px; line-height: 1.6; letter-spacing: 0; } .support-page--article .erp-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .support-page--article .erp-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--product-blue-soft); color: var(--cv-blue-text) !important; font-size: 13px; font-weight: 700; text-decoration: none; } .support-page--article .erp-toc a:hover { background: var(--product-border); } .support-page--article .content-article { padding: 12px 40px 40px; } /* Título de seção dentro do artigo: degrau de artigo, menor que o h2 de seção de página */ .support-page--article .content-article h2 { scroll-margin-top: 110px; padding-top: 28px; margin: 28px 0 16px; border-top: 1px solid var(--product-border); color: var(--product-text) !important; font-size: 24px; font-weight: 800 !important; line-height: 1.25; letter-spacing: -0.02em; } .support-page--article .content-article h2:first-child { padding-top: 18px; margin-top: 0; border-top: 0; } .support-page--article .content-article p, .support-page--article .content-article-list { max-width: 68ch; } .support-page--article .content-article p { color: var(--product-muted); font-size: 16px; line-height: 1.65; letter-spacing: 0; } .support-page--article .content-article-list { margin: 0 0 16px; padding-left: 20px; list-style: disc; color: var(--product-muted); font-size: 16px; line-height: 1.65; } .support-page--article .content-article-list li::marker { color: var(--cv-blue-text); } .support-page--article .content-article-list li + li { margin-top: 8px; } .support-page--article .content-article strong { color: var(--product-text); } /* CTA */ .support-page--article .support-cta { padding: 72px 0; background: linear-gradient(118deg, var(--product-navy-dark) 0%, var(--product-navy) 46%, var(--product-navy-mid) 100%); } .support-page--article .support-cta h2 { margin: 8px 0 8px; color: #fff !important; font-size: clamp(32px, 3.6vw, 40px); font-weight: 800 !important; line-height: 1.12; } .support-page--article .support-cta p { color: var(--pr-text-dark); font-size: 16px; line-height: 1.65; letter-spacing: 0; } .support-page--article .support-cta .sp-product-btn { flex: 0 0 auto; } @media (max-width: 1199px) { .sc-pdf:has(.support-page--article) { --product-gutter: 24px; } } @media (max-width: 767px) { .sc-pdf:has(.support-page--article) { --product-gutter: 16px; } .support-page--article .support-section, .support-page--article .support-cta { padding: 56px 0; } .support-page--article .content-article { padding: 8px 16px 24px; } .support-page--article .support-cta h2 { font-size: 32px; } .support-page--article .support-cta .sp-product-btn { width: 100%; } } /* ---- Guia /o-que-e-erp ---- */ .erp-guia .erp-meta { margin-top: 14px; font-size: 14px; opacity: .85; } .erp-resumo { margin: 0 0 28px; padding: 18px 20px; border-left: 4px solid var(--product-blue-text); border-radius: 10px; background: var(--product-blue-soft); color: var(--product-text); } .erp-resumo > strong { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--product-blue-text); } .support-page--article .erp-resumo p { margin: 0; line-height: 1.65; color: var(--product-text); } .erp-passos { counter-reset: none; } .erp-tabela-wrap { margin: 18px 0 22px; overflow-x: auto; border: 1px solid var(--product-border); border-radius: 12px; } .erp-tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; } .erp-tabela th, .erp-tabela td { padding: 12px 14px; border-bottom: 1px solid #e6edf6; text-align: left; vertical-align: top; } .erp-tabela thead th { background: #f4f7fb; color: var(--product-text); font-weight: 700; } .erp-tabela tbody th { color: var(--product-text); font-weight: 600; white-space: nowrap; } .erp-tabela tbody td:last-child { background: #f2fbf5; color: #14532d; font-weight: 600; } .erp-tabela tr:last-child th, .erp-tabela tr:last-child td { border-bottom: 0; } .erp-faq { display: grid; gap: 10px; margin-top: 14px; } .erp-faq details { border: 1px solid var(--product-border); border-radius: 10px; background: #fff; padding: 0 16px; } .erp-faq summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--product-text); list-style: none; display: flex; justify-content: space-between; gap: 12px; } .erp-faq summary::-webkit-details-marker { display: none; } .erp-faq summary::after { content: "+"; color: var(--product-blue-text); font-size: 20px; line-height: 1; } .erp-faq details[open] summary::after { content: "−"; } .erp-faq details p { margin: 0 0 14px; line-height: 1.6; } .erp-faq summary:hover { color: var(--product-blue-text); } .support-page--article .support-hero .erp-meta { font-size: 14px; } .support-page--article .content-article-list a { color: var(--cv-blue-text); text-decoration: none; } .support-page--article .content-article-list a:hover { text-decoration: underline; } /* Páginas de segmento com foto */ .seo-hero-grade{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .seo-hero-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--product-radius-lg);box-shadow:var(--product-shadow-lg);border:4px solid rgba(255,255,255,.14)} .seo-figura{margin:28px 0 36px} .seo-figura img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--product-radius-lg);box-shadow:var(--product-shadow-md)} .seo-figura figcaption{margin-top:10px;font-size:14px;color:var(--product-muted);text-align:center} @media(max-width:1199px){.seo-hero-grade{grid-template-columns:1fr;gap:24px}} /* A tabela larga rola dentro do .erp-tabela-wrap, sem alargar a coluna no celular */ .support-page--article .content-article { min-width: 0; } /* Chamadas para contato nas páginas de palavra-chave */ .seo-hero-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:24px} .seo-btn-whats{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:12px;background:#13803f;color:#fff!important;font-weight:800;font-size:15.5px;line-height:1.15;text-align:center;text-decoration:none!important;box-shadow:0 10px 22px rgba(31,168,85,.3);transition:background-color .15s ease,box-shadow .15s ease} .seo-btn-whats::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)} .seo-btn-whats:hover{background:#0f6b34;box-shadow:0 14px 28px rgba(31,168,85,.38)} .seo-btn-whats:focus-visible,.seo-link-precos:focus-visible{outline:3px solid #7ec8ff;outline-offset:3px;border-radius:8px} .seo-link-precos{display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:15.5px;color:#7ec8ff!important;text-decoration:underline!important;text-underline-offset:4px;text-decoration-thickness:2px} .seo-link-precos:hover{color:#fff!important} .seo-cta-meio{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;margin:32px 0 36px;padding:22px 26px 22px 28px;border-radius:18px;background:linear-gradient(135deg,#f2f9ff,#e6f3ff);border:1px solid #cfe4f4;border-left:5px solid #008ef4;box-shadow:0 12px 28px rgba(6,43,79,.08)} .seo-cta-meio>div:first-child{flex:1 1 320px;min-width:0} .seo-cta-meio strong{display:block;font-size:18px;font-weight:800;line-height:1.3;color:#062b4f} .seo-cta-meio p{margin:6px 0 0!important;font-size:14.5px;line-height:1.5;color:#3d5670} .seo-cta-meio-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px} .seo-cta-meio .seo-link-precos{color:#0067b8!important} .seo-cta-meio .seo-link-precos:hover{color:#062b4f!important} .seo-cta-meio .seo-btn-whats:focus-visible,.seo-cta-meio .seo-link-precos:focus-visible{outline-color:#008ef4} .seo-cta-final-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px} @media(max-width:575px){.seo-cta-meio{padding:20px 18px}.seo-cta-meio-acoes,.seo-hero-acoes .seo-btn-whats{width:100%}.seo-cta-meio-acoes .seo-btn-whats{flex:1 1 100%}} @media(prefers-reduced-motion:reduce){.seo-btn-whats{transition:none}} /* Tabela informativa das páginas de palavra-chave (linha do tempo etc.): sem destaque verde na última coluna */ .erp-tabela--neutra tbody td:last-child { background: transparent; color: inherit; font-weight: 400; } .erp-tabela--neutra tbody th { white-space: normal; min-width: 96px; } .erp-tabela--neutra tbody tr:nth-child(even) { background: #fafcfe; } /* assets/css/sp-area-cliente.css */ /* ========================================================================= Área do Cliente — /PainelCliente (licenciamento e financeiro) Layout aprovado no Figma "SystemPort Site - Área do Cliente (Licenciamento)". ========================================================================= */ .ac-page { --ac-navy: #0B1A33; --ac-navy-2: #10265A; --ac-blue: #2563EB; --ac-blue-soft: #E8EFFE; --ac-orange: #F97316; --ac-orange-soft: #FFF1E7; --ac-red: #DC2626; --ac-red-soft: #FEECEC; --ac-green: #16A34A; --ac-green-soft: #E7F7EE; --ac-ink: #0F172A; --ac-text: #334155; --ac-muted: #64748B; --ac-faint: #94A3B8; --ac-line: #E6ECF5; --ac-bg: #F4F7FB; font-family: Inter, "Segoe UI", sans-serif; background: var(--ac-bg); color: var(--ac-text); min-height: 100vh; } .ac-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; } /* ---- Hero ---- */ .ac-hero { padding: calc(var(--sp-hero-nav-h, 78px) + 40px) 0 112px; background: radial-gradient(circle at 85% 10%, rgba(37, 99, 235, .45), transparent 45%), linear-gradient(100deg, var(--ac-navy) 0%, var(--ac-navy-2) 60%, #1D4ED8 100%); color: #fff; } .ac-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .ac-breadcrumb { display: flex; gap: 8px; font-size: 14px; font-weight: 500; color: #93A8D6; margin-bottom: 10px; } .ac-breadcrumb a { color: #93A8D6; text-decoration: none; } .ac-breadcrumb a:hover { color: #fff; } .ac-hero__title { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1.15; color: #fff; } .ac-hero__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 15px; color: #C7D2EA; } .ac-hero__doc { display: inline-flex; align-items: center; gap: 6px; } .ac-hero__sep { opacity: .6; } .ac-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; } .ac-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .ac-badge.is-on { background: rgba(34, 197, 94, .16); color: #4ADE80; } .ac-badge.is-off { background: rgba(248, 113, 113, .16); color: #FCA5A5; } .ac-copy { border: 0; background: rgba(255, 255, 255, .1); color: #C7D2EA; width: 26px; height: 26px; border-radius: 6px; font-size: 12px; cursor: pointer; } .ac-copy:hover { background: rgba(255, 255, 255, .2); color: #fff; } .ac-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; } .ac-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; } .ac-btn-ghost:hover { background: rgba(255, 255, 255, .18); } /* ---- Corpo ---- */ .ac-body { margin-top: -64px; padding-bottom: 96px; position: relative; } .ac-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .ac-stat { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; background: #fff; border: 1px solid var(--ac-line); border-radius: 16px; box-shadow: 0 8px 24px rgba(10, 23, 51, .08); text-align: left; font: inherit; color: inherit; } .ac-stat--link { cursor: pointer; transition: transform .15s, box-shadow .15s; } .ac-stat--link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10, 23, 51, .12); } .ac-stat__top { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ac-muted); } .ac-stat__ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 17px; } .ac-stat__ico.is-blue { background: var(--ac-blue-soft); color: var(--ac-blue); } .ac-stat__ico.is-orange { background: var(--ac-orange-soft); color: var(--ac-orange); } .ac-stat__ico.is-red { background: var(--ac-red-soft); color: var(--ac-red); } .ac-stat__ico.is-green { background: var(--ac-green-soft); color: var(--ac-green); } .ac-stat__value { font-size: 30px; font-weight: 700; color: var(--ac-ink); line-height: 1.1; } .ac-stat__value.is-red { color: var(--ac-red); } .ac-stat small { font-size: 13px; font-weight: 500; color: var(--ac-muted); } .ac-progress { height: 8px; border-radius: 99px; background: #EEF2F7; overflow: hidden; } .ac-progress span { display: block; height: 100%; min-width: 6px; border-radius: 99px; } .ac-progress .is-blue { background: var(--ac-blue); } .ac-progress .is-orange { background: var(--ac-orange); } /* ---- Painel ---- */ .ac-panel { background: #fff; border: 1px solid var(--ac-line); border-radius: 16px; box-shadow: 0 8px 24px rgba(10, 23, 51, .08); overflow: hidden; } .ac-tabs { display: flex; gap: 32px; padding: 0 28px; border-bottom: 1px solid var(--ac-line); overflow-x: auto; } .ac-tab { display: inline-flex; align-items: center; gap: 8px; padding: 20px 0 17px; border: 0; border-bottom: 3px solid transparent; background: none; font-size: 15px; font-weight: 600; color: var(--ac-muted); white-space: nowrap; cursor: pointer; } .ac-tab:hover { color: var(--ac-ink); } .ac-tab.is-active { color: var(--ac-ink); font-weight: 700; border-bottom-color: var(--ac-blue); } .ac-tab__hint { font-weight: 500; color: var(--ac-faint); } .ac-tag { padding: 2px 8px; border-radius: 99px; background: var(--ac-blue-soft); color: var(--ac-blue); font-size: 11px; font-weight: 700; } .ac-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 20px 28px; } .ac-toolbar__end { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; } .ac-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #F1F5F9; } .ac-seg button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 0; border-radius: 9px; background: none; font-size: 14px; font-weight: 600; color: var(--ac-muted); cursor: pointer; } .ac-seg button.is-active { background: #fff; color: var(--ac-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } .ac-count { padding: 1px 7px; border-radius: 99px; background: #E2E8F0; color: #475569; font-size: 12px; font-weight: 700; } .ac-seg button.is-active .ac-count { background: var(--ac-blue); color: #fff; } .ac-chips { display: inline-flex; gap: 6px; } .ac-chips button { padding: 6px 12px; border: 1px solid #E2E8F0; border-radius: 99px; background: #fff; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; } .ac-chips button.is-active { background: var(--ac-ink); border-color: var(--ac-ink); color: #fff; } .ac-search { display: inline-flex; align-items: center; gap: 10px; width: 280px; height: 42px; margin: 0; padding: 0 14px; border: 1px solid #D9E1EC; border-radius: 10px; background: #fff; color: var(--ac-faint); } .ac-search:focus-within { border-color: var(--ac-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .ac-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; color: var(--ac-ink); } .ac-btn-danger { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid #FECACA; border-radius: 10px; background: #fff; color: var(--ac-red); font-size: 14px; font-weight: 600; cursor: pointer; } .ac-btn-danger:hover { background: #FEF2F2; } /* ---- Tabela ---- */ .ac-table-wrap { max-height: 620px; overflow-y: auto; } .ac-table { width: 100%; border-collapse: collapse; } .ac-table thead th { position: sticky; top: 0; z-index: 1; padding: 12px 16px; background: #F8FAFC; border-bottom: 1px solid #EEF2F7; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; text-align: left; color: var(--ac-muted); } .ac-table th:first-child, .ac-table td:first-child { padding-left: 28px; } .ac-table th:last-child, .ac-table td:last-child { padding-right: 28px; } .ac-table td { padding: 14px 16px; border-bottom: 1px solid #EEF2F7; font-size: 14px; font-weight: 500; color: var(--ac-text); vertical-align: middle; } .ac-table tbody tr:hover { background: #FAFCFF; } .ac-col-reg { width: 150px; } .ac-col-ver { width: 140px; } .ac-col-st { width: 190px; } .ac-col-acao { width: 90px; text-align: right !important; } .ac-maq { display: flex; align-items: center; gap: 12px; } .ac-maq__ico { display: inline-grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 10px; background: var(--ac-blue-soft); color: var(--ac-blue); font-size: 16px; } .ac-maq__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ac-maq__txt strong { font-size: 15px; font-weight: 600; color: var(--ac-ink); overflow-wrap: anywhere; } .ac-maq__txt small { font-size: 13px; font-weight: 400; color: var(--ac-faint); } .ac-ver { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #F1F5F9; font-size: 13px; font-weight: 600; color: #475569; } .ac-muted { color: var(--ac-faint); } .ac-table tr.is-off .ac-maq__ico { background: #F1F5F9; color: var(--ac-faint); } .ac-table tr.is-off .ac-maq__txt strong, .ac-table tr.is-off .ac-col-reg { color: var(--ac-faint); } .ac-switch { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; } .ac-switch__track { display: inline-flex; align-items: center; width: 40px; height: 22px; padding: 0 3px; border-radius: 99px; background: #CBD5E1; transition: background .2s; } .ac-switch__knob { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .2s; } .ac-switch.is-on .ac-switch__track { background: #22C55E; } .ac-switch.is-on .ac-switch__knob { transform: translateX(18px); } .ac-switch__lbl { font-size: 14px; font-weight: 600; color: var(--ac-muted); } .ac-switch.is-on .ac-switch__lbl { color: #15803D; } .ac-switch:focus-visible .ac-switch__track { outline: 2px solid var(--ac-blue); outline-offset: 2px; } .ac-del { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid #E2E8F0; border-radius: 8px; background: #fff; color: var(--ac-faint); cursor: pointer; } .ac-del:hover, .ac-table tr.is-off .ac-del { border-color: #FECACA; background: #FEF2F2; color: var(--ac-red); } .ac-empty td { padding: 48px 28px !important; text-align: center; color: var(--ac-muted); } .ac-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 28px; font-size: 13px; font-weight: 500; color: var(--ac-muted); } /* ---- Financeiro (ListaBoletos) ---- */ .ac-pago { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; } .ac-pago.is-on { background: var(--ac-green-soft); color: #15803D; } .ac-pago.is-off { background: var(--ac-red-soft); color: var(--ac-red); } .ac-pdf { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid #D9E1EC; border-radius: 8px; background: #fff; color: var(--ac-blue); font-size: 13px; font-weight: 600; cursor: pointer; } .ac-pdf:hover { background: var(--ac-blue-soft); } .ac-pdf:disabled { color: var(--ac-faint); background: #F8FAFC; cursor: not-allowed; } /* ---- Responsivo ---- */ @media (max-width: 1100px) { .ac-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .ac-wrap { padding: 0 16px; } .ac-hero { padding: calc(var(--sp-hero-nav-h, 78px) + 20px) 0 64px; } .ac-hero__meta { font-size: 13px; } .ac-btn-ghost { padding: 8px 12px; font-size: 13px; } .ac-body { margin-top: -40px; padding-bottom: 48px; } .ac-stats { gap: 12px; margin-bottom: 16px; } .ac-stat { padding: 16px; gap: 8px; } .ac-stat__ico { width: 32px; height: 32px; font-size: 14px; } .ac-stat__value { font-size: 22px; } .ac-hero__sep, .ac-tab__hint, .ac-tag { display: none; } .ac-tabs { gap: 20px; padding: 0 16px; } .ac-toolbar { padding: 16px; } .ac-seg { width: 100%; } .ac-seg button { flex: 1; justify-content: center; } .ac-toolbar__end { width: 100%; margin-left: 0; } .ac-search { width: 100%; } .ac-btn-danger { width: 100%; justify-content: center; } /* Tabela vira lista de cartões */ .ac-table-wrap { max-height: none; padding: 0 16px 8px; } .ac-table thead { display: none; } .ac-table, .ac-table tbody { display: block; } .ac-table tbody tr { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 4px 12px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--ac-line); border-radius: 14px; } .ac-table td { display: block; padding: 0 !important; border: 0; width: auto; } .ac-table td:first-child { grid-column: 1; grid-row: 1; } .ac-table .ac-col-st { grid-column: 2; grid-row: 1; } .ac-table .ac-col-acao { grid-column: 3; grid-row: 1; } .ac-table .ac-col-reg, .ac-table .ac-col-ver { grid-column: 1 / -1; font-size: 12px; color: var(--ac-faint); padding-left: 52px !important; } .ac-table .ac-col-reg::before, .ac-table .ac-col-ver::before { content: attr(data-label) ": "; } .ac-switch__lbl { display: none; } .ac-empty { display: block !important; } .ac-foot { padding: 12px 16px 16px; } } .ac-boleto__desc { font-weight: 600; color: var(--ac-ink); } /* ---- Carregando (API) ---- */ .ac-panel { position: relative; min-height: 320px; } .ac-loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding-top: 140px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(1px); font-size: 14px; font-weight: 600; color: var(--ac-muted); } .ac-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid #DBE4F0; border-top-color: var(--ac-blue); border-radius: 50%; vertical-align: middle; animation: ac-gira .7s linear infinite; } .ac-spinner--lg { width: 40px; height: 40px; border-width: 4px; } .ac-btn-ghost:disabled { opacity: .7; cursor: wait; } @keyframes ac-gira { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ac-spinner { animation-duration: 1.6s; } } /* assets/css/sp-integracoes.css */ .ig-page { --ig-navy: #03284b; --ig-deep: #021c35; --ig-blue: #0b96e8; --ig-cyan: #1bb7f1; --ig-orange: #ff6b1a; --ig-ink: #071a3c; --ig-muted: #60758a; font-family: Inter, Arial, sans-serif; color: var(--ig-ink); overflow: hidden; } .ig-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; } .ig-kicker { display: block; margin-bottom: 13px; color: #1eb6f5; font-size: 12px; font-weight: 850; letter-spacing: 1.7px; } .ig-hero { position: relative; padding: 105px 0 0; color: #fff; background: radial-gradient(circle at 78% 30%, rgba(22, 158, 228, .21), transparent 34%), linear-gradient(135deg, #021c35 0%, #032f57 58%, #021f3c 100%); } .ig-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background-image: linear-gradient(rgba(30, 183, 245, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 183, 245, .13) 1px, transparent 1px); background-size: 56px 56px; } .ig-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .86fr 1.14fr; gap: 46px; align-items: center; min-height: 555px; padding-bottom: 45px; } .ig-breadcrumb { display: flex; gap: 9px; margin-bottom: 30px; color: #9fc4dd; font-size: 12px; } .ig-breadcrumb a { color: #d7e9f5; } .ig-hero h1, .ig-platforms h2, .ig-operation h2, .ig-flow h2, .ig-final h2 { font-weight: 850; letter-spacing: -.035em; } .ig-hero h1 { margin: 0 0 20px; color: #fff; font-size: clamp(42px, 4vw, 58px); line-height: 1.03; } .ig-hero h1 em { color: #25bdfa; font-style: normal; } .ig-hero-copy > p { max-width: 520px; margin: 0 0 26px; color: #d7e7f3; font-size: 16px; line-height: 1.7; } .ig-actions { display: flex; flex-wrap: wrap; gap: 12px; } .ig-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 800; cursor: pointer; } .ig-btn-primary { color: #fff; background: linear-gradient(135deg, #ff7b1b, #ff5715); box-shadow: 0 12px 26px rgba(255, 91, 20, .27); } .ig-btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .05); } .ig-btn:hover { transform: translateY(-2px); color: #fff; } .ig-trust { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 28px; color: #b9d0df; font-size: 11px; } .ig-trust span::first-letter { color: #28d3a6; } .ig-hero-visual { position: relative; margin: 0; padding: 9px; border: 1px solid rgba(51, 190, 247, .4); border-radius: 22px; background: rgba(2, 22, 42, .55); box-shadow: 0 28px 65px rgba(0, 0, 0, .34); } .ig-hero-visual img { display: block; width: 100%; height: 420px; border-radius: 15px; object-fit: cover; object-position: 58% center; } .ig-hero-visual figcaption { position: absolute; left: 26px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; color: #fff; background: rgba(2, 28, 53, .9); font-size: 10px; font-weight: 750; } .ig-hero-visual figcaption i { width: 7px; height: 7px; border-radius: 50%; background: #2bd79e; box-shadow: 0 0 10px #2bd79e; } .ig-channel-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); transform: translateY(36px); border: 1px solid #d8e7f1; border-radius: 14px; background: #fff; box-shadow: 0 20px 45px rgba(2, 34, 62, .18); } .ig-channel-strip > div { display: grid; grid-template-columns: 76px 1fr; column-gap: 12px; align-items: center; min-width: 0; padding: 16px 14px; border-right: 1px solid #e4edf4; } .ig-channel-strip > div:last-child { border-right: 0; } .ig-channel-strip b { color: var(--ig-ink); font-size: 13px; } .ig-channel-strip small { grid-column: 2; color: #8193a2; font-size: 9px; } .ig-channel-logo { grid-row: 1 / 3; width: 76px; height: 36px; object-fit: contain; object-position: left center; } .ig-vtex { --ig-brand: #ed125f; --ig-brand-soft: #fff0f5; } .ig-tray { --ig-brand: #f07b2d; --ig-brand-soft: #fff5ec; } .ig-woo { --ig-brand: #8555a5; --ig-brand-soft: #f7f1fb; } .ig-nuvem { --ig-brand: #2369e8; --ig-brand-soft: #eef4ff; } .ig-ml { --ig-brand: #287ee9; --ig-brand-soft: #fffbe5; } .ig-platforms { padding: 112px 0 85px; background: #f6fafc; } .ig-section-heading { display: grid; grid-template-columns: 1fr .8fr; gap: 50px; align-items: end; margin-bottom: 34px; } .ig-section-heading h2, .ig-operation h2, .ig-final h2 { margin: 0; color: var(--ig-ink); font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; } .ig-section-heading > p, .ig-operation-copy > p { margin: 0 0 4px; color: var(--ig-muted); font-size: 15px; line-height: 1.7; } .ig-platform-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .ig-platform-card { position: relative; grid-column: span 2; min-height: 330px; padding: 25px; border: 1px solid #dbe7ef; border-radius: 15px; background: #fff; box-shadow: 0 12px 28px rgba(3, 45, 77, .07); overflow: hidden; } .ig-platform-card:nth-child(4) { grid-column: 2 / span 2; } .ig-platform-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--ig-brand); } .ig-platform-card header { display: flex; align-items: center; justify-content: space-between; } .ig-platform-logo { width: 124px; height: 48px; object-fit: contain; object-position: left center; } .ig-platform-card header small { padding: 6px 10px; border-radius: 999px; color: var(--ig-brand); background: var(--ig-brand-soft); font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; } .ig-platform-card h3 { margin: 20px 0 9px; color: var(--ig-ink); font-size: 22px; } .ig-platform-card > p { min-height: 70px; margin: 0 0 16px; color: var(--ig-muted); font-size: 13px; line-height: 1.65; } .ig-platform-card ul { margin: 0; padding: 14px 0 0; border-top: 1px solid #e9eff4; list-style: none; } .ig-platform-card li { display: flex; gap: 8px; padding: 4px 0; color: #35526b; font-size: 11px; } .ig-platform-card li span { color: var(--ig-brand); font-weight: 900; } .ig-operation { padding: 82px 0; background: #fff; } .ig-operation-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; } .ig-operation figure { margin: 0; padding: 9px; border-radius: 20px; background: #eaf5fb; box-shadow: 0 20px 48px rgba(4, 56, 91, .17); } .ig-operation figure img { display: block; width: 100%; min-height: 450px; border-radius: 14px; object-fit: cover; object-position: center; } .ig-operation-copy > p { margin-top: 19px; } .ig-benefits { display: grid; gap: 10px; margin-top: 25px; } .ig-benefits article { display: grid; grid-template-columns: 42px 1fr; gap: 13px; align-items: start; padding: 13px 14px; border: 1px solid #dfeaf1; border-radius: 11px; background: #f8fbfd; } .ig-benefits article > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; color: #0c8edb; background: #e4f5ff; font-size: 11px; font-weight: 900; } .ig-benefits b { color: var(--ig-ink); font-size: 13px; } .ig-benefits p { margin: 3px 0 0; color: var(--ig-muted); font-size: 11px; line-height: 1.55; } .ig-flow { padding: 78px 0 88px; color: #fff; background: linear-gradient(rgba(26, 143, 207, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 143, 207, .1) 1px, transparent 1px), linear-gradient(135deg, #021c35, #04355f); background-size: 54px 54px, 54px 54px, auto; } .ig-section-heading-light h2 { color: #fff; } .ig-section-heading-light > p { color: #b9d0df; } .ig-flow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .ig-flow-step { position: relative; min-height: 235px; padding: 24px; border: 1px solid rgba(65, 181, 239, .25); border-radius: 14px; background: rgba(4, 48, 87, .78); } .ig-flow-step:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 45px; right: -17px; color: #32baf5; font-size: 21px; } .ig-flow-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #23b8f5; border-radius: 50%; color: #fff; background: #063b68; } .ig-flow-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .ig-flow-step > small { position: absolute; top: 27px; right: 24px; color: transparent; font-size: 34px; font-weight: 900; -webkit-text-stroke: 1px rgba(58, 185, 245, .32); } .ig-flow-step h3 { margin: 23px 0 9px; color: #fff; font-size: 16px; } .ig-flow-step p { margin: 0; color: #b5cbda; font-size: 12px; line-height: 1.65; } .ig-final { position: relative; padding: 58px 0; background: #edf7fc; } .ig-final .ig-wrap { display: flex; align-items: center; justify-content: space-between; gap: 38px; } .ig-final p { margin: 12px 0 0; color: var(--ig-muted); } .ig-final .ig-btn { flex: 0 0 auto; } @media (max-width: 1000px) { .ig-hero-grid, .ig-operation-grid { grid-template-columns: 1fr; } .ig-hero-copy { padding-top: 20px; } .ig-hero-visual img { height: auto; } .ig-channel-strip { grid-template-columns: repeat(3, 1fr); } .ig-channel-strip > div:nth-child(3) { border-right: 0; } .ig-channel-strip > div:nth-child(-n+3) { border-bottom: 1px solid #e4edf4; } .ig-platform-grid { grid-template-columns: repeat(2, 1fr); } .ig-platform-card, .ig-platform-card:nth-child(4) { grid-column: auto; } .ig-platform-card:last-child { grid-column: 1 / -1; } .ig-flow-grid { grid-template-columns: repeat(2, 1fr); } .ig-flow-step:nth-child(2)::after { content: none; } } @media (max-width: 680px) { .ig-wrap { width: min(100% - 28px, 1180px); } .ig-hero { padding-top: 90px; } .ig-hero-grid { min-height: 0; gap: 30px; padding-bottom: 26px; } .ig-hero h1 { font-size: 39px; } .ig-actions, .ig-actions .ig-btn { width: 100%; } .ig-trust { flex-direction: column; gap: 8px; } .ig-hero-visual { padding: 6px; border-radius: 14px; } .ig-hero-visual img { min-height: 250px; object-position: 61% center; } .ig-hero-visual figcaption { left: 14px; bottom: 14px; } .ig-channel-strip { grid-template-columns: 1fr 1fr; transform: translateY(28px); } .ig-channel-strip > div { grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; padding: 12px 10px; border-bottom: 1px solid #e4edf4; } .ig-channel-logo { width: 64px; height: 32px; } .ig-channel-strip b { font-size: 12px; } .ig-channel-strip > div:nth-child(odd) { border-right: 1px solid #e4edf4; } .ig-channel-strip > div:nth-child(even) { border-right: 0; } .ig-channel-strip > div:last-child { grid-column: 1 / -1; border-bottom: 0; } .ig-platforms { padding: 82px 0 58px; } .ig-section-heading { grid-template-columns: 1fr; gap: 18px; } .ig-platform-grid, .ig-flow-grid { grid-template-columns: 1fr; } .ig-platform-card:last-child { grid-column: auto; } .ig-platform-card { min-height: 0; } .ig-platform-card > p { min-height: 0; } .ig-operation { padding: 58px 0; } .ig-operation-grid { gap: 34px; } .ig-operation figure img { min-height: 280px; } .ig-flow { padding: 58px 0; } .ig-flow-step { min-height: 0; } .ig-flow-step::after { content: none !important; } .ig-final .ig-wrap { align-items: flex-start; flex-direction: column; } .ig-final .ig-btn { width: 100%; } } /* Contraste (auditoria 06/10/2026): rótulo azul-claro quase sumia nos fundos claros */ .ig-platforms .ig-kicker, .ig-operation .ig-kicker, .ig-final .ig-kicker { color: #0a6fbf; } .ig-platform-card header small { color: color-mix(in srgb, var(--ig-brand) 62%, #000); font-size: 10px; } /* assets/css/sp-agradecimento.css */ /* Página /agradecimento — confirmação depois dos formulários de contato */ .ag-page { background: #f4f7fb; } .ag-hero { padding-bottom: 150px; } .ag-body { position: relative; z-index: 2; margin-top: -120px; padding: 0 16px 96px; } .ag-card { max-width: 880px; margin: 0 auto; padding: 48px 48px 36px; background: #fff; border: 1px solid #e3eaf4; border-radius: 20px; box-shadow: 0 24px 60px rgba(4, 31, 58, .14); text-align: center; font-family: Inter, "Segoe UI", sans-serif; color: #334155; } .ag-check { width: 84px; height: 84px; margin: 0 auto 20px; } .ag-check svg { width: 100%; height: 100%; } .ag-check circle { fill: #e7f7ee; stroke: #16a34a; stroke-width: 2; } .ag-check path { fill: none; stroke: #16a34a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: ag-desenha .6s .2s ease-out forwards; } @keyframes ag-desenha { to { stroke-dashoffset: 0; } } .ag-kicker { display: inline-block; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: #0070c9; } .ag-card h1 { margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #041f3a; } .ag-lead { max-width: 640px; margin: 0 auto 32px; font-size: 17px; line-height: 1.6; color: #52667e; } .ag-lead strong { color: #041f3a; } .ag-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 32px; padding: 0; list-style: none; text-align: left; } .ag-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #f6f9fd; border: 1px solid #e3eaf4; border-radius: 14px; } .ag-step-ico { display: inline-grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 10px; background: #eaf6ff; color: #0070c9; font-size: 16px; } .ag-steps li:nth-child(2) .ag-step-ico { background: #fff1e7; color: #ea580c; } .ag-steps li:nth-child(3) .ag-step-ico { background: #e7f7ee; color: #16a34a; } .ag-steps b { display: block; font-size: 15px; color: #041f3a; margin-bottom: 2px; } .ag-steps small { display: block; font-size: 13px; line-height: 1.45; color: #64748b; } .ag-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; } .ag-btn-primary { color: #fff !important; background: #16a34a; box-shadow: 0 10px 24px rgba(22, 163, 74, .28); } .ag-btn-primary:hover { transform: translateY(-2px); background: #15803d; } .ag-btn-ghost { color: #041f3a !important; background: #fff; border: 1px solid #cfdbea; } .ag-btn-ghost:hover { background: #f4f7fb; } .ag-btn-link { color: #0070c9 !important; } .ag-btn-link:hover { text-decoration: underline; } .ag-btn:focus-visible { outline: 3px solid #0070c9; outline-offset: 2px; } .ag-foot { margin: 22px 0 0; font-size: 14px; color: #64748b; } .ag-foot a { color: #0070c9; font-weight: 600; text-decoration: none; } @media (max-width: 720px) { .ag-hero { padding-bottom: 120px; } .ag-body { margin-top: -96px; padding-bottom: 56px; } .ag-card { padding: 32px 20px 26px; border-radius: 16px; } .ag-steps { grid-template-columns: 1fr; } .ag-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ag-check path { animation: none; stroke-dashoffset: 0; } } /* assets/css/sp-retencao.css */ /* Retenção: barra fixa no celular, convite ao rolar e aviso de saída (regras em js/retencao.js) */ .sp-ret-fechar { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #52667a; font-size: 22px; line-height: 1; cursor: pointer; } .sp-ret-fechar:hover { background: rgba(6,43,79,.08); color: #062b4f; } .sp-ret-fechar:focus-visible { outline: 3px solid #008ef4; outline-offset: 1px; } .sp-ret-barra { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 10000; display: flex; gap: 8px; align-items: center; padding: 8px 46px 8px 8px; border-radius: 18px; background: linear-gradient(135deg, #041b33, #062b4f); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 36px rgba(0,20,40,.4); font-family: Inter, "Segoe UI", sans-serif; } .sp-ret-barra[hidden] { display: none; } .sp-ret-barra a { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border-radius: 12px; font-size: 15px; font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none !important; } .sp-ret-barra a:focus-visible { outline: 3px solid #7ec8ff; outline-offset: 2px; } .sp-ret-barra-whats { background: #13803f; color: #fff !important; } .sp-ret-barra-sim { background: linear-gradient(135deg, #e3570c, #c4450a); color: #fff !important; box-shadow: 0 6px 16px rgba(232,89,12,.4); } .sp-ret-barra .sp-ret-fechar { top: 50%; right: 6px; transform: translateY(-50%); color: #c4e0f7; } .sp-ret-barra .sp-ret-fechar:hover { background: rgba(255,255,255,.12); color: #fff; } body.sp-ret-com-barra #wsId, body.sp-ret-com-barra #channel-chat-widget, body.sp-ret-com-barra .channel-chat-widget-button { display: none !important; } .sp-ret-convite { position: fixed; left: 22px; bottom: 22px; z-index: 9998; width: min(320px, calc(100vw - 44px)); padding: 20px 22px 20px; border-radius: 18px; background: #fff; border: 1px solid #dce9f4; border-top: 4px solid #ff6b1a; box-shadow: 0 24px 50px rgba(6,43,79,.25); font-family: Inter, "Segoe UI", sans-serif; animation: sp-ret-sobe .35s ease; } .sp-ret-convite[hidden] { display: none; } .sp-ret-convite strong { display: block; padding-right: 26px; font-size: 17px; font-weight: 800; line-height: 1.3; color: #062b4f; } .sp-ret-convite p { margin: 6px 0 14px; font-size: 14px; line-height: 1.45; color: #4a6178; } .sp-ret-convite a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: linear-gradient(135deg, #e3570c, #c4450a); color: #fff !important; font-weight: 800; text-decoration: none !important; box-shadow: 0 8px 18px rgba(232,89,12,.3); } .sp-ret-convite a:hover { background: linear-gradient(135deg, #cf4c08, #b03c07); } .sp-ret-convite a:focus-visible { outline: 3px solid #008ef4; outline-offset: 2px; } .sp-ret-modal { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 16px; background: rgba(2,18,36,.7); font-family: Inter, "Segoe UI", sans-serif; } .sp-ret-modal[hidden] { display: none; } .sp-ret-modal-caixa { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 34px 32px 24px; border-radius: 22px; background: #fff; border-top: 6px solid #ff6b1a; box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: sp-ret-sobe .3s ease; } .sp-ret-modal-selo { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fff1e6; border: 1px solid #ffd2b3; color: #b23c0a; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .sp-ret-modal h2 { margin: 14px 0 16px; padding-right: 20px; font-size: 26px; font-weight: 800; line-height: 1.22; letter-spacing: -.01em; color: #062b4f; } .sp-ret-modal-lista { margin: 0 0 22px; padding: 14px 16px; list-style: none; display: grid; gap: 10px; border-radius: 14px; background: #f5faff; border: 1px solid #e3eef8; } .sp-ret-modal-lista li { position: relative; padding-left: 30px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #1f3a55; } .sp-ret-modal-lista li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: #20b486; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; } .sp-ret-modal-acoes { display: grid; gap: 10px; } .sp-ret-btn-sim, .sp-ret-btn-whats { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 16px; border-radius: 12px; font-size: 16px; font-weight: 800; text-align: center; text-decoration: none !important; } .sp-ret-btn-sim { background: linear-gradient(135deg, #e3570c, #c4450a); color: #fff !important; box-shadow: 0 10px 22px rgba(232,89,12,.32); } .sp-ret-btn-sim:hover { background: linear-gradient(135deg, #cf4c08, #b03c07); } .sp-ret-btn-whats { background: #13803f; color: #fff !important; } .sp-ret-btn-whats:hover { background: #0f6b34; } .sp-ret-btn-sim:focus-visible, .sp-ret-btn-whats:focus-visible, .sp-ret-agora-nao:focus-visible { outline: 3px solid #008ef4; outline-offset: 2px; } .sp-ret-agora-nao { display: block; margin: 14px auto 0; padding: 6px 10px; border: 0; background: none; color: #52667a; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .sp-ret-agora-nao:hover { color: #062b4f; } body.sp-ret-modal-aberto { overflow: hidden; } @media (max-width: 479px) { .sp-ret-modal-caixa { padding: 28px 20px 20px; border-radius: 18px; } .sp-ret-modal h2 { font-size: 22px; } .sp-ret-barra { padding-right: 42px; } .sp-ret-barra a { padding: 0 6px; font-size: 14px; letter-spacing: -.01em; } } @keyframes sp-ret-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sp-ret-convite, .sp-ret-modal-caixa { animation: none; } } /* Depoimento nas páginas de palavra-chave */ .seo-depoimento { position: relative; margin: 32px 0; padding: 26px 28px 22px 64px; border-left: 4px solid #20b486; border-radius: 16px; background: linear-gradient(135deg, #f5faff, #eef7ff); box-shadow: 0 10px 24px rgba(6,43,79,.06); } .seo-depoimento::before { content: "\201C"; position: absolute; left: 20px; top: 10px; font-family: Georgia, serif; font-size: 60px; line-height: 1; color: #20b486; opacity: .55; } .seo-depoimento blockquote { margin: 0; font-size: 18px; line-height: 1.55; color: #062b4f; font-style: italic; font-weight: 500; } .seo-depoimento figcaption { margin-top: 12px; font-size: 14px; font-weight: 700; color: #3d5670; } @media (max-width: 575px) { .seo-depoimento { padding: 44px 20px 18px; } .seo-depoimento::before { left: 18px; top: 6px; font-size: 48px; } .seo-depoimento blockquote { font-size: 16.5px; } } /* Página de contato */ .support-contact-whats { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 22px 0 16px; padding: 16px 52px 16px 20px; border-radius: 16px; background: linear-gradient(135deg, #13803f, #0f6b34); color: #fff !important; text-decoration: none !important; box-shadow: 0 14px 28px rgba(31,168,85,.3); transition: box-shadow .15s ease, transform .15s ease; } .support-contact-whats::after { content: "\2192"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 16px; font-weight: 800; } .support-contact-whats strong { font-size: 14px; font-weight: 600; color: #fff !important; opacity: .95; } .support-contact-whats span { font-size: 19px; font-weight: 800; letter-spacing: -.005em; } .support-contact-whats:hover { box-shadow: 0 18px 34px rgba(31,168,85,.38); transform: translateY(-1px); } .support-contact-whats:focus-visible { outline: 3px solid #008ef4; outline-offset: 3px; } .support-contact-bonus { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 9px; } .support-contact-bonus li { position: relative; padding-left: 28px; font-size: 15px; font-weight: 600; line-height: 1.4; color: #062b4f; } .support-contact-bonus li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: #20b486; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .support-form-plano { margin: 6px 0 4px; padding: 12px 16px; border-radius: 12px; background: #eaf6ff; border: 1px solid #cfe4f4; border-left: 4px solid #008ef4; color: #062b4f; font-size: 15px; line-height: 1.45; } .support-form-plano strong { color: #062b4f; font-weight: 800; } @media (prefers-reduced-motion: reduce) { .support-contact-whats { transition: none; } .support-contact-whats:hover { transform: none; } } /* Preço no topo das páginas de produto (reusa o selo da home, definido em sp-home-hero.css) */ .sp-product-hero-preco { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 20px 0 8px; } .sp-product-hero-simular { font-size: 15px; color: #7ec8ff !important; font-weight: 800; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-thickness: 2px; } .sp-product-hero-simular:hover { color: #fff !important; } .sp-product-faq-link { font-weight: 700; color: #0072c6 !important; } /* Botões no topo da /planos e faixa de bônus na home */ .sp-plans-hero-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 8px; } .sp-home-bonus { --plans-navy: #062b4f; --plans-blue: #008ef4; --plans-green: #20b486; --plans-orange: #ff6b20; --plans-muted: #63778c; --plans-border: #dce9f4; padding: 44px 16px 14px; background: linear-gradient(180deg, #ffffff 0%, #f2f8fe 100%); font-family: Inter, "Segoe UI", sans-serif; } .sp-home-bonus-wrap { max-width: 1280px; margin: 0 auto; } .sp-home-bonus .sp-bonus { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 0; } .sp-home-bonus-acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin: 26px 0 16px; } .sp-home-bonus-whats { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 800; color: #0c7f43 !important; text-decoration: underline !important; text-underline-offset: 4px; } .sp-home-bonus-whats::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #13803f; box-shadow: 0 0 0 4px rgba(31,168,85,.18); } .sp-home-bonus-whats:hover { color: #08622f !important; } @media (max-width: 1199px) { .sp-home-bonus .sp-bonus { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 599px) { .sp-home-bonus { padding: 32px 16px 8px; } .sp-home-bonus .sp-bonus { grid-template-columns: 1fr; gap: 14px; } } /* Novidades na home (telas reais em dispositivos) */ .sp-novidades { padding: 72px 16px; background: #fff; font-family: Inter, "Segoe UI", sans-serif; } .sp-novidades-wrap { max-width: 1240px; margin: 0 auto; } .sp-novidades-intro { text-align: center; max-width: 720px; margin: 0 auto 40px; } .sp-novidades-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #008ef4; } .sp-novidades-intro h2 { margin: 0 0 10px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: #062b4f; } .sp-novidades-intro p { margin: 0; color: #63778c; font-size: 16px; } .sp-novidade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 56px; } .sp-novidade.is-invertido .sp-novidade-img { order: 2; } .sp-novidade-img img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 60px rgba(6, 43, 79, .18); } .sp-novidade-selo { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fff4ec; color: #c2410c; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .sp-novidade-texto h3 { margin: 12px 0 10px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; color: #062b4f; } .sp-novidade-texto p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: #4a6178; } .sp-novidade-texto ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; } .sp-novidade-texto li { position: relative; padding-left: 28px; font-size: 15px; color: #062b4f; font-weight: 600; } .sp-novidade-texto li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: #e8f8f2; color: #20b486; font-size: 11px; font-weight: 800; display: grid; place-items: center; } .sp-novidade-link { font-weight: 800; color: #008ef4 !important; text-decoration: none !important; } .sp-novidade-link:hover { text-decoration: underline !important; } @media (max-width: 991px) { .sp-novidade { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; } .sp-novidade.is-invertido .sp-novidade-img { order: 0; } } /* App: a seção de prova ficou só com o texto (depoimento sem empresa removido) */ .am-proof-grid:has(> :only-child) { grid-template-columns: 1fr !important; max-width: 820px; margin-left: auto; margin-right: auto; text-align: center; } .am-proof-grid:has(> :only-child) .am-proof-badges { justify-content: center; } /* WhatsApp CRM: título do comparativo estava azul-escuro sobre o fundo escuro (auditoria 06/10/2026) */ .compare-section h2, .compare-section h2 strong { color: #ffffff; } /* Barra do celular: não esticar em telas médias (tablet/janela estreita) — 480px centralizada */ .sp-ret-barra { left: 50%; right: auto; width: calc(100% - 20px); max-width: 480px; transform: translateX(-50%); } .sp-ret-barra-sim { background: linear-gradient(135deg, #c2410c, #9a3412); box-shadow: 0 6px 16px rgba(194,65,12,.35); } /* assets/css/sp-zoom.css */ /* Zoom de imagem (zoom-imagem.js) */ [data-zoom] { cursor: zoom-in; } .spz-gatilho { position: relative; display: block; padding: 0; border: 0; background: none; width: 100%; } .spz-gatilho img { display: block; width: 100%; height: auto; } .spz-selo { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; background: #062b4f; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; box-shadow: 0 8px 20px rgba(6, 43, 79, 0.25); pointer-events: none; } .spz-selo svg { width: 16px; height: 16px; } .spz { position: fixed; inset: 0; z-index: 100000; display: none; background: rgba(4, 20, 38, 0.94); } .spz.is-aberto { display: block; } html.spz-travado, html.spz-travado body { overflow: hidden; } .spz-stage { position: absolute; inset: 0 0 64px; overflow: hidden; touch-action: none; cursor: grab; } .spz-stage.is-movendo { cursor: grabbing; } .spz-img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; background: #fff; border-radius: 6px; } .spz-bar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .spz-bar button { min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: #eef4fb; color: #062b4f; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; } .spz-bar button:hover { background: #dcebfa; } .spz-bar button:focus-visible { background: #dcebfa; outline: 3px solid rgba(10, 149, 255, 0.55); outline-offset: 2px; } .spz-bar .spz-txt { font-size: 15px; } .spz-bar .spz-fechar { background: #c2410c; color: #fff; } .spz-pct { min-width: 56px; text-align: center; color: #062b4f; font-size: 14px; font-weight: 700; } .spz-dica { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; } @media (max-width: 480px) { .spz-dica { font-size: 12px; } .spz-bar button { min-width: 44px; height: 44px; } }