/*
Theme Name: JF IT Solutions
Author: JF IT Solutions
Description: Tema one-page para a JF IT Solutions. Personalizável em Aspeto > Personalizar > JF IT Solutions: Site.
Version: 2.4
Text Domain: jfit
*/
@font-face{font-family:'Bricolage Grotesque';font-weight:400;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:500;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:600;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:400;font-display:swap;src:url(assets/fonts/instrument-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-display:swap;src:url(assets/fonts/instrument-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-display:swap;src:url(assets/fonts/instrument-sans-latin-600-normal.woff2) format('woff2')}
:root{--bg:#0a1f2c;--deep:#06141d;--fg:#e6f1f4;--mut:#8fa8b3;--ac:#ffb020;--ln:rgba(230,241,244,.12);--f1:'Bricolage Grotesque',sans-serif;--f2:'Instrument Sans',sans-serif;--e:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font:400 1.05rem/1.65 var(--f2);overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.w{width:min(1180px,90%);margin:auto;position:relative;z-index:2}
section{position:relative;padding:max(16vh,7rem) 0;overflow:hidden}
h1,h2,h3{font-family:var(--f1);font-weight:700;line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(2.2rem,5.5vw,4.6rem);margin-bottom:2.5rem;max-width:14em}
p{color:var(--mut);max-width:34em}
.bg{position:absolute;right:-3vw;top:6%;font:800 34vw/1 var(--f1);color:transparent;-webkit-text-stroke:1px rgba(230,241,244,.07);pointer-events:none;user-select:none}
#ld{position:fixed;inset:0;background:var(--deep);z-index:99;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform 1s cubic-bezier(.8,0,.2,1)}
#ld.o{transform:translateY(-100%)}
#ld .ldbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#ld .lddim{position:absolute;inset:0;background:var(--deep)}
.ldc{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.4rem;padding:0 6vw}
#ld .ldlg{max-width:70vw;height:auto;display:block}
.ldbar{width:min(260px,50vw);height:2px;background:color-mix(in srgb,var(--fg) 16%,transparent);border-radius:2px;overflow:hidden}
.ldbar i{display:block;height:100%;width:0;background:var(--ac)}
#ld b{font:800 clamp(2.6rem,9vw,5.5rem)/1 var(--f1);letter-spacing:-.03em}
#ld b[hidden]{display:none}
#ld span{color:var(--mut);font-size:.95rem}
#sp{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--ac);transform:scaleX(0);transform-origin:0;z-index:60}
#cu{position:fixed;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:98;transition:width .3s,height .3s,margin .3s}
#cu.h{width:64px;height:64px;margin:-24px 0 0 -24px}
@media(hover:none){#cu{display:none}}
header{position:fixed;top:0;width:100%;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 5%;background:linear-gradient(var(--deep),transparent)}
.logo{font:800 1.25rem var(--f1)}.logo em{font-style:normal;color:var(--ac)}
nav{display:flex;align-items:center;gap:2rem;font-weight:500;font-size:.95rem;line-height:1}
nav a{position:relative}nav a:after{content:'';position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--ac);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--e)}
nav a:hover:after{transform:scaleX(1);transform-origin:left}
@media(max-width:800px){nav a:not(:last-child){display:none}}
.btn{display:inline-block;padding:1em 2.2em;border:1px solid var(--ac);border-radius:99px;font-weight:600;transition:background .3s,color .3s,transform .2s;cursor:pointer;background:none;color:var(--fg);font-size:1rem}
.btn:hover,.btn.p{background:var(--ac);color:var(--deep)}
#hero{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:clamp(7.5rem,16vh,10rem) 0 11vh}
#hero video,#c3{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#hero video{opacity:.32;filter:saturate(.4)}
#hero:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,var(--bg))}
h1{font-size:clamp(2.8rem,9vw,8.4rem);margin-bottom:2rem}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block;transform:translateY(110%);transition:transform 1.2s var(--e)}
.go .ln>span{transform:none}.ln:nth-child(2)>span{transition-delay:.15s}.ln:nth-child(3)>span{transition-delay:.3s}
.ac{color:var(--ac)}
#hero .sub{opacity:0;transition:opacity 1s 1s}.go #hero .sub{opacity:1}
.mq{border-block:1px solid var(--ln);padding:1.4rem 0;overflow:hidden;white-space:nowrap;background:var(--deep)}
.mq div{display:inline-block;animation:mq 30s linear infinite;font:700 1.6rem var(--f1);color:var(--mut)}
.mq span{margin:0 2rem}.mq span:nth-child(even){color:var(--ac)}
@keyframes mq{to{transform:translateX(-50%)}}
.r{opacity:0;transform:translateY(40px);transition:1s var(--e)}.r.v{opacity:1;transform:none}
#sobre .w{display:grid;grid-template-columns:1.3fr 1fr;gap:6vw;align-items:end}
.st{display:grid;gap:2rem}.st b{display:block;font:800 4.5rem/1 var(--f1);color:var(--fg)}.st small{color:var(--mut)}
@media(max-width:800px){#sobre .w{grid-template-columns:1fr}}
.sv{border-top:1px solid var(--ln);padding:2.2rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;position:relative;transition:padding .5s var(--e);background:radial-gradient(400px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--ac) 14%,transparent),transparent 60%)}
.sv:hover{padding-left:3rem}.sv h3{font-size:clamp(1.6rem,3.2vw,2.8rem)}
@media(max-width:800px){.sv{grid-template-columns:1fr;gap:.5rem}}
#planos{background:var(--deep)}
.pl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:end;perspective:1200px}
.cd{border:1px solid var(--ln);padding:2.5rem;border-radius:6px;background:var(--bg);transition:transform .25s;transform-style:preserve-3d;background-image:radial-gradient(360px circle at var(--x,50%) var(--y,50%),color-mix(in srgb,var(--ac) 14%,transparent),transparent 60%)}
.cd.f{border-color:var(--ac);padding-block:4rem;background-color:color-mix(in srgb,var(--fg) 6%,var(--bg))}
.cd h3{font-size:1.9rem}.cd .pr{font:800 2.6rem var(--f1);margin:1rem 0;color:var(--ac)}.cd .pr small{font:500 1rem var(--f2);color:var(--mut)}
.cd ul{list-style:none;padding:0;margin:1.5rem 0 2rem;display:grid;gap:.7rem;color:var(--mut)}.cd li:before{content:'+ ';color:var(--ac);font-weight:700}
@media(max-width:900px){.pl{grid-template-columns:1fr}}
#mt{position:relative;padding-left:4rem;max-width:820px}
#mt:before,#ml{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ln)}
#ml{background:var(--ac);transform:scaleY(0);transform-origin:top}
.pa{padding-bottom:4.5rem;position:relative}.pa:before{content:attr(data-n);position:absolute;left:-4rem;top:-.2rem;width:2rem;height:2rem;margin-left:-1rem;background:var(--bg);color:var(--ac);font:700 1.1rem var(--f1);text-align:center}
.pa h3{font-size:2rem;margin-bottom:.6rem}
#contacto{background:var(--deep)}
#contacto .w{display:grid;grid-template-columns:1fr 1fr;gap:6vw}
form{display:grid;gap:1.4rem}
input,textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--ln);padding:1rem 0;color:var(--fg);font:inherit;transition:border-color .3s}
input:focus,textarea:focus{outline:0;border-color:var(--ac)}
.ok{color:var(--ac);font-weight:600}
footer{padding:2rem 5%;color:var(--mut);display:flex;justify-content:space-between;background:var(--deep);border-top:1px solid var(--ln);font-size:.9rem}
@media(max-width:800px){#contacto .w{grid-template-columns:1fr}}
@media(prefers-reduced-motion){*{transition:none!important;animation:none!important}.r{opacity:1;transform:none}.ln>span{transform:none}}
.logo img{height:58px;width:auto;display:block}
@media(max-width:800px){.logo img{height:42px}}
@media(hover:hover) and (pointer:fine){body.cc,body.cc *{cursor:none!important}}
.wa{position:fixed;right:1.4rem;bottom:1.4rem;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;z-index:70;box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .3s}
.wa:hover{transform:scale(1.1)}.wa:before{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:pu 2.4s infinite}
@keyframes pu{to{transform:scale(1.7);opacity:0}}
.ct{list-style:none;padding:0;margin-top:2rem;display:grid;gap:.6rem;font:600 1.15rem var(--f1)}.ct a{transition:color .3s}.ct a:hover{color:var(--ac)}
.ck{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;color:var(--mut)}.ck input{width:auto;flex:none;margin-top:.3rem;accent-color:var(--ac)}.ck a{color:var(--fg);text-decoration:underline}
#confianca{border-top:1px solid var(--ln)}
.nm{display:flex;flex-wrap:wrap;gap:1rem 3rem;font:700 clamp(1.4rem,3vw,2.2rem) var(--f1);color:var(--mut)}
.tq{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:3rem;margin:4rem 0}
blockquote{border-left:2px solid var(--ac);padding:.3rem 0 .3rem 1.6rem}blockquote p{color:var(--fg);font:500 1.25rem/1.5 var(--f2)}
cite{display:block;margin-top:1rem;color:var(--mut);font-style:normal;font-size:.95rem}
.ch span{display:inline-block;border:1px solid var(--ln);padding:.5em 1.1em;border-radius:99px;margin:0 .6rem .6rem 0;font-weight:500}
.pg{padding-top:max(22vh,8rem);min-height:100vh}.tx p,.tx li{max-width:44em;margin-bottom:1rem}.tx h3{font-size:1.4rem;margin:2.2rem 0 .6rem}.tx a{color:var(--ac)}
footer{flex-wrap:wrap;gap:1rem}.fl{display:flex;gap:1.5rem}.fl a:hover{color:var(--ac)}
.md header nav{display:none}.mb{display:flex;flex-wrap:wrap;gap:.8rem}
.cdn{display:flex;gap:2.2rem;margin:0 0 2.2rem}.cdn b{display:block;font:800 clamp(2rem,6vw,3.6rem)/1 var(--f1)}.cdn small{color:var(--mut)}
#suporte{border-top:1px solid var(--ln)}
.tt{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.5rem 0 2rem}.tt button{font:600 .95rem var(--f2);padding:.8em 1.6em;border-radius:99px;border:1px solid var(--ln);background:none;color:var(--mut);cursor:pointer;transition:.3s}.tt button.on{background:var(--ac);color:var(--deep);border-color:var(--ac)}
.tp[hidden]{display:none}.tp form{display:grid;gap:1.4rem;max-width:760px}.g2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}@media(max-width:700px){.g2{grid-template-columns:1fr}}
select{width:100%;background:none;border:0;border-bottom:1px solid var(--ln);padding:1rem 0;color:var(--fg);font:inherit}select:focus{outline:0;border-color:var(--ac)}option{background:var(--deep);color:var(--fg)}
.tkm{margin-top:1.2rem;white-space:pre-line;font-weight:600;max-width:none}.tkm.ok{color:var(--ac)}.tkm.er{color:#ff7a70}
.fl2{display:grid;gap:.6rem;font-size:.92rem;color:var(--mut)}
input[type=file]{border:1px dashed var(--ln);border-radius:6px;padding:1rem;color:var(--mut);cursor:pointer}
input[type=file]::file-selector-button{background:none;border:1px solid var(--ln);color:var(--fg);border-radius:99px;padding:.5em 1.1em;margin-right:1rem;cursor:pointer;font:inherit}
.tp form[hidden]{display:none}
.fi{display:grid;gap:.5rem;font-size:.92rem;color:var(--mut)}.fi input{border:1px dashed var(--ln);padding:.9rem;color:var(--fg);font-size:.9rem}
input[type=file]::file-selector-button{margin-right:1rem;padding:.5em 1.1em;border:0;border-radius:99px;background:var(--ac);color:var(--deep);font:600 .9rem var(--f2);cursor:pointer}
.th{display:grid;gap:1rem;margin:1.8rem 0;max-width:760px}.bb{border:1px solid var(--ln);border-radius:8px;padding:1rem 1.2rem}.bb.s{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 7%,transparent)}
.bb small{display:block;color:var(--mut);margin-bottom:.4rem}.bb p{color:var(--fg);white-space:pre-line;max-width:none}.bb span{display:inline-block;margin:.6rem .5rem 0 0;font-size:.85rem;color:var(--mut);border:1px solid var(--ln);border-radius:99px;padding:.2em .8em}
#dv{position:fixed;inset:0;background:rgba(3,10,15,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .5s;z-index:80}
#dw{position:fixed;top:0;right:0;height:100%;width:min(540px,100%);background:var(--deep);border-left:1px solid var(--ln);z-index:90;display:flex;flex-direction:column;transform:translateX(102%);visibility:hidden;transition:transform .6s var(--e),visibility 0s .6s;box-shadow:-30px 0 80px rgba(0,0,0,.4)}
#dw:focus{outline:0}body.dwo{overflow:hidden}body.dwo #dv{opacity:1;pointer-events:auto}body.dwo #dw{transform:none;visibility:visible;transition-delay:0s}
.dh{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 1.8rem;border-bottom:1px solid var(--ln)}.dh h2{font-size:1.7rem;margin:0}
#dx{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ln);border-radius:50%;background:none;color:var(--fg);cursor:pointer;transition:.3s}#dx:hover{background:var(--ac);color:var(--deep);border-color:var(--ac)}
.db{padding:1.6rem 1.8rem 3rem;overflow-y:auto;flex:1;overscroll-behavior:contain}.db .tt{margin:1.8rem 0 1.6rem}#dw .g2{gap:1rem}
@media(max-width:800px){nav{gap:1rem}nav a[data-dw]{display:inline}header .btn{padding:.7em 1.2em;font-size:.9rem}}
.ct a,.ct li>span{display:inline-flex;align-items:center;gap:.65em}
.ct svg{width:1em;height:1em;flex:none;color:var(--ac);overflow:visible;transform-origin:center}
.ct svg *{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.1s var(--e),opacity .01s}
.ct svg .dt{fill:currentColor;stroke:none;stroke-dasharray:none;transition:opacity .4s 1.1s}
.v .ct svg *{stroke-dashoffset:0;opacity:1}
.ct li:nth-child(2) svg *{transition-delay:.15s}.ct li:nth-child(3) svg *{transition-delay:.3s}.ct li:nth-child(4) svg *{transition-delay:.45s}
.ct .ic-ig circle:first-of-type{transform-box:fill-box;transform-origin:center;transition:stroke-dashoffset 1.1s var(--e),opacity .01s,transform .5s var(--e)}
.ct a:hover .ic-ig circle:first-of-type{transform:scale(1.4)}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}35%{transform:rotate(14deg)}55%{transform:rotate(-9deg)}75%{transform:rotate(6deg)}}
@keyframes hop{40%{transform:translateY(-.28em)}70%{transform:translateY(.05em)}}
.ct a:hover .ic-ph{animation:ring .7s}.ct a:hover .ic-em,.ct li:hover .ic-pn{animation:hop .5s}
#mb{display:none;position:relative;flex:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:none;border:1px solid var(--ln);border-radius:50%;cursor:pointer}
#mb i{display:block;width:20px;height:2px;background:var(--fg);transition:transform .4s var(--e)}
body.mmo #mb i:first-child{transform:translateY(4px) rotate(45deg)}body.mmo #mb i:last-child{transform:translateY(-4px) rotate(-45deg)}
#mm{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:space-between;padding:7rem 8% 2.2rem;background:color-mix(in srgb,var(--deep) 96%,transparent);backdrop-filter:blur(14px);clip-path:circle(0 at calc(100% - 46px) 46px);visibility:hidden;transition:clip-path .7s var(--e),visibility 0s .7s;overflow-y:auto}
body.mmo #mm{clip-path:circle(150% at calc(100% - 46px) 46px);visibility:visible;transition-delay:0s}body.mmo{overflow:hidden}body.mmo .wa{opacity:0;pointer-events:none}
#mm nav{display:grid;gap:.5rem}#mm nav a{font:700 clamp(2rem,9vw,3rem)/1.15 var(--f1);letter-spacing:-.03em;opacity:0;transform:translateY(24px);transition:opacity .4s,transform .4s var(--e),color .3s}
#mm nav a:after{display:none}body.mmo #mm nav a{opacity:1;transform:none;transition:opacity .6s,transform .7s var(--e),color .3s;transition-delay:calc(var(--i)*.06s + .2s),calc(var(--i)*.06s + .2s),0s}#mm nav a:hover{color:var(--ac)}
.mf{display:grid;gap:1.3rem;margin-top:2rem}.mf .btn{text-align:center}.mc{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;color:var(--mut);font-size:.95rem}.mc a:hover{color:var(--ac)}
@media(max-width:960px){.has-mm header nav{display:none}.has-mm #mb{display:flex}}
.bkw{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}@media(max-width:900px){.bkw{grid-template-columns:1fr}}
.bkc{border:1px solid var(--ln);border-radius:8px;padding:2rem;background:color-mix(in srgb,var(--fg) 3%,transparent)}.bkc form{display:grid;gap:1.3rem}
.bkm{margin-top:1.5rem}.bl{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.8rem}.bl li{position:relative;padding-left:1.8rem}.bl li:before{content:'';position:absolute;left:0;top:.7em;width:.9rem;height:2px;background:var(--ac)}
input[type=date]{color-scheme:dark}select:disabled{opacity:.6}