/* JNSOFT — identidade do protótipo site.jnssoft.com.br
   Sem molduras pesadas, sem aparência de painel/editor e sem imitar outra marca. */
:root{
  --jn-id-azul:#082f57;
  --jn-id-azul-vivo:#0076d7;
  --jn-id-amarelo:#ffc400;
  --jn-id-tinta:#101b28;
  --jn-id-linha:#dbe4ec;
}

/* Tipografia mais leve e editorial em toda a experiência pública. */
body,input,button,select,textarea{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:400}
h1,h2,.jn-cab h2,.jnp-cab h2,.jl-abertura h1,.jl-secao h2{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:500!important;letter-spacing:-.025em}
h3,h4,h5,h6{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:600!important;letter-spacing:-.018em}
.navbar a,.jn-btn,.jn-hbtn,.jnp-btn,.jl-banner__acao,.btn-get-started,.btn-buy,.cta-btn{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:600!important}
.jn-commercial-card strong,.jn-pilar h3,.jn-serv strong,.jn-sis h3,.jl-app__texto strong,.jl-destaque strong{font-weight:600}

/* O hero ocupa a janela inteira; cada fotografia tem enquadramento próprio. */
.jn-hero,.jn-hero .carousel,.jn-hero .carousel-inner,.jn-hero .carousel-item{height:100vh;height:100svh;min-height:640px!important}
.jn-hero .carousel-item{background-size:cover!important;background-repeat:no-repeat}
.jn-hero .carousel-item::before{background:linear-gradient(90deg,rgba(2,13,25,.92) 0%,rgba(2,13,25,.72) 38%,rgba(2,13,25,.24) 72%,rgba(2,13,25,.10) 100%)!important}
.jn-hero .jn-hero-txt{max-width:720px}
.jn-hero .jn-hero-txt h1,.jn-hero .jn-hero-txt h2{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:clamp(34px,3.65vw,54px);font-weight:500!important;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.jn-hero .jn-hchip{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:.01em}
.jn-hero--dani{background-position:center center!important}
.jn-hero--apps,.jn-hero--sites,.jn-hero--historia{background-position:center center!important}
.jn-hero--engenharia{background-position:center 58%!important}

/* Fotografias são conteúdo, não cartões. */
.jn-commercial-visual{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.jn-commercial-visual img,.jn-imagem-crua{display:block;width:100%;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:cover}
.jn-commercial-visual img{min-height:430px;aspect-ratio:4/3}

/* Abertura editorial: texto de um lado, imagem crua do outro. */
.jn-commercial-intro{background:#fff;border-bottom:1px solid var(--jn-id-linha)}
.jn-commercial-intro__grid{gap:clamp(36px,7vw,110px)}
.jn-commercial-grid{gap:0;border-top:1px solid var(--jn-id-linha);border-bottom:1px solid var(--jn-id-linha)}
.jn-commercial-card{position:relative;padding:28px 24px 30px;border:0;border-right:1px solid var(--jn-id-linha);border-radius:0;background:#fff;box-shadow:none}
.jn-commercial-card:last-child{border-right:0}
.jn-commercial-card::after{content:"";position:absolute;left:24px;bottom:-1px;width:0;height:4px;background:var(--jn-id-amarelo);transition:width .24s ease}
.jn-commercial-card:hover{border-color:var(--jn-id-linha);color:var(--jn-id-azul-vivo);transform:none}
.jn-commercial-card:hover::after{width:calc(100% - 48px)}

/* Blocos têm ritmo de página, não uma coleção de cartões genéricos. */
.jn-pilar,.jn-serv,.jn-eng,.jn-sis{border-radius:0;box-shadow:none}
.jn-pilar{border:0;border-top:4px solid var(--jn-id-azul-vivo);background:#f4f7fa;padding:34px 30px}
.jn-pilar:hover{transform:none;box-shadow:inset 0 0 0 2px rgba(0,118,215,.28)}
.jn-pilar__ic{border-radius:0;background:transparent;border-left:3px solid var(--jn-id-amarelo)}
.jn-serv{border:0;border-bottom:1px solid var(--jn-id-linha);background:transparent;padding:24px 8px}
.jn-serv:hover{border-color:var(--jn-id-azul-vivo);box-shadow:inset 4px 0 0 var(--jn-id-amarelo);transform:none}
.jn-eng{border:0;border-left:4px solid var(--jn-id-amarelo);background:#f4f7fa}
.jn-sis{border:0;background:#fff;overflow:visible}
.jn-sis__img{height:210px;border-radius:0;filter:saturate(.92);transition:filter .2s ease,transform .24s ease}
.jn-sis:hover{transform:none;box-shadow:none}
.jn-sis:hover .jn-sis__img{filter:saturate(1.08);transform:none}
.jn-sis__ic{border-radius:0;border:4px solid #fff}

/* Botão com resposta física inspirada no código original JNSOFT. */
.jn-btn,.jn-hbtn,.jnp-btn,.jl-banner__acao{position:relative;isolation:isolate;overflow:hidden;border-radius:4px!important;box-shadow:0 4px 0 rgba(0,0,0,.20);transition:transform .12s ease,box-shadow .12s ease,filter .18s ease}
.jn-btn::after,.jn-hbtn::after,.jnp-btn::after,.jl-banner__acao::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle 90px at var(--jn-light-x,50%) var(--jn-light-y,50%),rgba(255,255,255,.38),rgba(255,255,255,0) 72%);transition:opacity .16s ease}
.jn-btn:hover::after,.jn-hbtn:hover::after,.jnp-btn:hover::after,.jl-banner__acao:hover::after{opacity:1}
.jn-btn:hover,.jn-hbtn:hover,.jnp-btn:hover,.jl-banner__acao:hover{transform:none!important;filter:brightness(1.06);box-shadow:0 4px 0 rgba(0,0,0,.20),0 0 0 3px rgba(255,255,255,.16),0 0 24px rgba(0,127,255,.22)}
.jn-btn:active,.jn-hbtn:active,.jnp-btn:active,.jl-banner__acao:active{transform:translateY(3px)!important;box-shadow:0 1px 0 rgba(0,0,0,.22)}

/* Hospedagem: informação antes do botão, sem cartões vazios. */
.jn-hosting-plans .jnp-plano{border-radius:6px;padding:34px 30px}
.jn-hosting-plans .jnp-plano--destaque{transform:none}
.jn-plan-label{display:block;margin-bottom:12px;color:var(--jn-id-azul-vivo);font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.jn-plan-summary{min-height:72px;color:#536577;line-height:1.55}
.jn-hosting-note{max-width:920px;margin:28px auto 0;padding-top:20px;border-top:1px solid var(--jn-id-linha);color:#536577;text-align:center;font-size:.94rem}
.jn-hosting-note i{color:var(--jn-id-azul-vivo);margin-right:7px}

/* Loja: imagem em evidência, sem a moldura arredondada grande. */
.jl-abertura{background:#fff;border-bottom:1px solid var(--jn-id-linha)}
.jl-carousel{border-radius:0;box-shadow:none;border:0}
.jl-banner{min-height:470px;padding:56px;background-position:center}
.jl-destaques{gap:2px;background:var(--jn-id-linha)}
.jl-destaque{border-radius:0;min-height:330px}
.jl-grade{gap:0 28px}
.jl-app{border-radius:0;border-bottom:1px solid var(--jn-id-linha);padding:18px 4px}
.jl-app:hover{background:#f7f9fb;transform:none;box-shadow:inset 4px 0 0 var(--jn-id-azul-vivo)}
.jl-app__icone,.jl-banner__icone,.jl-destaque__icone{border-radius:8px}
.jn-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Interacao estavel: o alvo permanece no lugar; borda, luz, cor e icone comunicam o hover. */
.platform-card:hover,.software-impact-box:hover,.step-card-jn:hover,
.content-box:hover,.eng-item:hover,.eng-card:hover,.ead-card-v4:hover,
.img-frame:hover,.service-item-tech:hover,.tech-card-jn:hover,
.service-item-premium:hover,.diagnostico-upload-box:hover,.projeto-item:hover,
.team-card-clean:hover,.step-professional:hover,.dani-info-card:hover,
.metro-tile:hover,.mockup-pdv:hover,.jn-card:hover,.jn-card-mini:hover,
.jnp-card:hover,.jnp-obra:hover,.jl-destaque:hover,.play-card:hover,
.jn-security-card:hover,.download-card:hover,.card-hover:hover,
.jn-vitrine-card:hover,a.jn-contato-canal:hover{
  transform:none!important;
}

.platform-card:hover,.software-impact-box:hover,.step-card-jn:hover,
.tech-card-jn:hover,.service-item-premium:hover,.diagnostico-upload-box:hover,
.projeto-item:hover,.team-card-clean:hover,.step-professional:hover,
.dani-info-card:hover,.metro-tile:hover,.mockup-pdv:hover,.jn-card:hover,
.jnp-card:hover,.jnp-obra:hover,.jl-destaque:hover,.play-card:hover{
  border-color:rgba(0,118,215,.55)!important;
  box-shadow:inset 0 0 0 1px rgba(0,118,215,.22),0 10px 28px rgba(8,47,87,.08)!important;
}

.agro-img-wrapper:hover img,.projects .portfolio-content:hover img,
.projeto-item:hover img,.recent-blog-posts .post-item:hover .post-img img,
.blog .posts-list .post-item:hover .post-img img,.team-card-clean:hover .team-avatar-circle{
  transform:none!important;
}

.btn-get-started:hover,.read-more:hover,.cta-btn:hover,.btn-buy:hover,
.btn-jn-main:hover,.btn-jn-3d:hover,.btn-jn-premium:hover,
.btn-arch-premium:hover,.btn-service-3d:hover,.btn-jn-promo-3d:hover,
.btn-play-zap:hover,.cart-btn:hover,.btn-jn-3d-mini:hover,
.video-wrapper:hover .play-button,.jn-a11y__aba:hover,.jn-whats:hover,
.footer .footer-content .social-links a:hover,.qmix-btn:hover,
.btn-jn-3d-clean:hover .btn-3d-inner,.btn-jn-3d-black:hover .btn-3d-inner,
.btn-jn-3d-mini:hover .btn-3d-inner-sm,.btn-matricular-v4:hover .btn-3d-top{
  transform:none!important;
}

.platform-card i,.step-card-jn i,.service-item-tech i,.tech-card-jn i,
.service-item-premium i,.jn-card i,.jnp-card i,.jl-app i{
  transition:color .2s ease,background-color .2s ease,filter .2s ease,transform .24s ease;
}
.platform-card:hover i,.step-card-jn:hover i,.service-item-tech:hover i,
.tech-card-jn:hover i,.service-item-premium:hover i,.jn-card:hover i,
.jnp-card:hover i,.jl-app:hover i{
  color:var(--jn-id-azul-vivo);
  filter:drop-shadow(0 0 8px rgba(0,118,215,.28));
}

@media(max-width:991px){
  .jn-commercial-visual img{min-height:0}
  .jn-commercial-card:nth-child(2){border-right:0}
  .jn-commercial-card:nth-child(-n+2){border-bottom:1px solid var(--jn-id-linha)}
}
@media(max-width:575px){
  .jn-commercial-grid{display:block}
  .jn-commercial-card{border-right:0;border-bottom:1px solid var(--jn-id-linha)}
  .jn-commercial-card:last-child{border-bottom:0}
  .jl-banner{min-height:430px;padding:42px 34px 56px}
  .jn-hero,.jn-hero .carousel,.jn-hero .carousel-inner,.jn-hero .carousel-item{height:100svh;min-height:620px!important}
  .jn-hero .carousel-item::before{background:linear-gradient(90deg,rgba(2,13,25,.92) 0%,rgba(2,13,25,.76) 62%,rgba(2,13,25,.38) 100%)!important}
  .jn-hero .jn-hero-txt h1,.jn-hero .jn-hero-txt h2{font-size:clamp(30px,8.6vw,40px);line-height:1.1}
  .jn-hero--dani{background-position:62% center!important}
  .jn-hero--apps,.jn-hero--sites,.jn-hero--historia{background-position:58% center!important}
  .jn-plan-summary{min-height:0}
}

@media(prefers-reduced-motion:reduce){
  .jn-commercial-card::after,.jn-sis__img,.jn-btn,.jn-hbtn,.jl-banner__acao{transition:none}
}

/* Menu principal: compacto, estável e sem deslocamento no hover. */
@media(min-width:1280px){
  #header>.container-xl{max-width:1480px;padding-left:28px;padding-right:28px}
  #header .logo{flex:0 0 auto;margin-right:clamp(20px,2vw,38px)}
  #header .logo img{max-height:48px;width:auto}
  #navbar{margin-left:auto}
  #navbar>ul{gap:2px}
  #navbar>ul>li{padding:0}
  #navbar>ul>li>a{min-height:68px;padding:0 10px;color:rgba(255,255,255,.82)!important;font-size:12.5px;font-weight:600!important;letter-spacing:.035em;text-transform:uppercase}
  #navbar>ul>li>a::before{left:10px;right:10px;bottom:12px;width:auto;height:2px;transform:scaleX(0);transform-origin:center;background:var(--jn-id-amarelo);visibility:visible;transition:transform .18s ease}
  #navbar>ul>li:hover>a::before,#navbar>ul>li>a.active::before{width:auto;transform:scaleX(1)}
  #navbar>ul>li>a:hover,#navbar>ul>li:hover>a{color:#fff!important;transform:none}
  #navbar .dropdown ul{left:0;top:calc(100% + 8px);min-width:236px;padding:8px;border:1px solid rgba(8,47,87,.12);border-radius:8px;box-shadow:0 18px 48px rgba(1,20,39,.18);transition:opacity .18s ease,visibility .18s ease,top .18s ease}
  #navbar .dropdown:hover>ul{top:100%}
  #navbar .dropdown ul a{min-height:40px;padding:9px 12px;border-radius:5px;color:#203246!important;font-size:14px;font-weight:500!important;text-transform:none;transition:color .15s ease,background-color .15s ease}
  #navbar .dropdown ul a:hover,#navbar .dropdown ul li:hover>a{color:var(--jn-id-azul-vivo)!important;background:#eef6fd;transform:none}
  #navbar .dropdown-indicator{margin-left:5px;font-size:10px;transition:transform .18s ease}
  #navbar .dropdown:hover>a>.dropdown-indicator{transform:rotate(180deg)}
  #navbar .jn-language{display:flex;align-items:center;margin-left:7px;padding-left:8px;border-left:1px solid rgba(255,255,255,.24)}
  #navbar .jn-language>a{min-height:30px;padding:0 8px;border-radius:4px;font-size:11px;letter-spacing:.04em}
  #navbar .jn-language>a::before{display:none}
  #navbar .jn-language>a.is-active{color:#071b31!important;background:var(--jn-id-amarelo)}
}

@media(max-width:1279px){
  body.mobile-nav-active #header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #header .logo img{max-height:42px;width:auto}
  #navbar{position:fixed!important;top:0!important;right:-100%!important;bottom:0!important;left:auto!important;width:min(92vw,380px)!important;max-width:none!important;background:#06182b!important;transition:right .22s ease!important}
  .mobile-nav-active #navbar{right:0!important}
  #navbar>ul{position:absolute!important;inset:0!important;display:block!important;width:100%!important;padding:72px 18px 24px;background:#06182b!important;overflow-y:auto}
  #navbar>ul>li{border-bottom:1px solid rgba(255,255,255,.08)}
  #navbar a,#navbar a:focus{min-height:48px;padding:12px 10px;color:rgba(255,255,255,.82);font-size:14px;letter-spacing:.025em}
  #navbar a:hover,#navbar li:hover>a{color:#fff;transform:none}
  #navbar .dropdown ul{margin:0 0 10px;padding:4px 0 8px 12px;border:0;border-left:2px solid rgba(255,196,0,.72);background:rgba(255,255,255,.035)}
  #navbar .dropdown ul a{min-height:42px;padding:9px 12px;text-transform:none;font-size:14px}
  #navbar .jn-language{display:flex;gap:8px;align-items:center;padding:14px 8px;border-bottom:0}
  #navbar .jn-language>a{display:grid;place-items:center;min-height:36px;min-width:48px;padding:6px 12px;border:1px solid rgba(255,255,255,.2);border-radius:5px}
  #navbar .jn-language>a.is-active{border-color:var(--jn-id-amarelo);background:var(--jn-id-amarelo);color:#071b31}
  .mobile-nav-show,.mobile-nav-hide{transition:color .16s ease,background-color .16s ease;transform:none!important}
}

/* Contato público: estilos independentes do modo visual assistido. */
.jn-contato{padding:82px 0 92px;background:linear-gradient(180deg,#fff 0,#f4f7fa 100%)}
.jn-contato-canais{display:grid;gap:12px}
.jn-contato-canal{display:flex;align-items:center;gap:16px;padding:19px 20px;border:1px solid var(--jn-id-linha);border-radius:7px;background:#fff;color:var(--jn-id-tinta);text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
a.jn-contato-canal:hover{border-color:rgba(0,118,215,.55);background:#f9fcff;color:var(--jn-id-tinta);box-shadow:inset 4px 0 0 var(--jn-id-azul-vivo);transform:none}
.jn-contato-canal strong,.jn-contato-canal small{display:block}
.jn-contato-canal strong{font-weight:600;color:var(--jn-id-tinta)}
.jn-contato-canal small{margin-top:2px;color:#5a6a79;font-size:14px;line-height:1.45}
.jn-contato-icone{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:6px;background:var(--jn-id-azul);color:#fff;font-size:21px}
.jn-contato-icone--zap{background:#168f47}
.jn-contato-form{padding:34px;border-top:4px solid var(--jn-id-azul-vivo);background:#fff;box-shadow:0 18px 50px rgba(8,47,87,.10)}
.jn-contato-form h3{margin-bottom:22px;color:var(--jn-id-tinta);font-size:24px;font-weight:600!important}
.jn-contato-form .form-control{min-height:50px;padding:12px 14px;border:1px solid #cbd7e2;border-radius:5px;background:#fff;color:#142638;box-shadow:none;transition:border-color .16s ease,box-shadow .16s ease}
.jn-contato-form textarea.form-control{min-height:150px;resize:vertical}
.jn-contato-form .form-control:focus{border-color:var(--jn-id-azul-vivo);box-shadow:0 0 0 3px rgba(0,118,215,.13)}
.jn-captcha{display:grid;grid-template-columns:170px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid #cbd7e2;border-radius:6px;background:#f5f8fb}
.jn-captcha__image{display:block;width:170px;height:58px;border:1px solid #b7c7d6;border-radius:4px;background:#092c50;object-fit:cover}
.jn-captcha .form-control{min-height:58px;text-transform:uppercase;letter-spacing:.18em;font-weight:600}
.jn-captcha__refresh{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b7c7d6;border-radius:5px;background:#fff;color:var(--jn-id-azul);font-size:20px;text-decoration:none;transition:border-color .16s ease,color .16s ease}
.jn-captcha__refresh:hover{border-color:var(--jn-id-azul-vivo);color:var(--jn-id-azul-vivo);transform:none}
.jn-captcha-help{margin:7px 0 0;color:#627486;font-size:13px}
.btn-enviar{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 34px;border:0;border-radius:5px;background:var(--jn-id-azul-vivo);color:#fff;font-size:15px;font-weight:600;box-shadow:0 3px 0 #054d88;transition:filter .16s ease,box-shadow .12s ease,transform .12s ease}
.btn-enviar:hover{filter:brightness(1.07);transform:none}
.btn-enviar:active{transform:translateY(2px);box-shadow:0 1px 0 #054d88}
.btn-enviar:disabled{cursor:not-allowed;filter:grayscale(.55);opacity:.58}
.jn-contato-mapa{margin-top:48px;overflow:hidden;border-top:4px solid var(--jn-id-amarelo);background:#fff;box-shadow:0 15px 38px rgba(8,47,87,.09)}
.jn-contato-mapa iframe{display:block;width:100%;height:390px;border:0}
@media(max-width:767px){
  .jn-contato{padding:62px 0 72px}
  .jn-contato-form{padding:26px 20px}
  .jn-captcha{grid-template-columns:1fr auto}
  .jn-captcha__image{grid-column:1/-1;width:100%;height:64px}
  .jn-contato-mapa iframe{height:310px}
}