/* /servicos/sistemas-web · porte do "Servico Sistemas Web.dc.html" (pacote Inovaccio13).
   Estilos do desenho em linha na view; aqui o que o script do protótipo calculava pela largura
   (W = 1000 px, M = 700 px), os :hover/:active (style-hover/style-active) e as animações. */
@keyframes swSk{to{background-position:-200% 0}}
@keyframes swDemo{from{opacity:0;transform:translateY(10px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes swIn{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes swPop{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}

.sw-pg{position:relative;color:#09090B;background:#FAFAF8;overflow-x:clip}
.sw-pg a{color:inherit;text-decoration:none}
.sw-pg :focus-visible:not(input):not(textarea):not(select){outline:2px solid #09090B;outline-offset:3px;border-radius:12px}
.sw-pg input:focus-visible,.sw-pg textarea:focus-visible{outline:none}
.sw-pg [hidden]{display:none!important}
.sw-pg [data-tone="dark"] :focus-visible{outline-color:#F4F3F1}
.sw-aperta:active{transform:scale(.98)}
.sw-sobe4{transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.sw-sobe4:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(9,9,11,.06),0 24px 40px -28px rgba(9,9,11,.4)!important}

/* Grades */
.sw-hero-grid,.sw-2,.sw-case,.sw-faq{grid-template-columns:minmax(0,1fr)}
.sw-4{grid-template-columns:minmax(0,1fr)}
.sw-base2{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.sw-4,.sw-base2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .sw-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sw-2{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .sw-case{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
  .sw-faq{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .sw-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sw-gruda{position:sticky;top:110px}
  .sw-demo-col{margin-top:36px}
}

/* Demonstração do hero: painel com menu lateral do 700 em diante */
.sw-db{grid-template-columns:minmax(0,1fr)}
.sw-db-lado{display:none}
@media (min-width:700px){.sw-db{grid-template-columns:132px minmax(0,1fr)}.sw-db-lado{display:flex}}
.sw-demo-caixa{transition:height .75s cubic-bezier(.22,1,.36,1)}
.sw-demo-in{animation:swDemo .7s cubic-bezier(.22,1,.36,1) both}

/* Inovia */
.sw-orb{width:140px;height:140px}
@media (min-width:1000px){.sw-orb{width:180px;height:180px}}

/* Clientes */
.sw-logo{filter:grayscale(1);opacity:.5;transition:opacity .6s cubic-bezier(.22,1,.36,1),filter .6s}
.sw-logo:hover{opacity:1;filter:grayscale(0)}

/* Antes e depois */
.sw-ba{transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s}
.sw-ba:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 30px 50px -30px rgba(0,0,0,.8)!important}

/* Case */
.sw-cs-img{opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.sw-cs-img.on{opacity:1}

/* Base técnica */
.sw-base-card{transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s;animation:swIn .55s cubic-bezier(.22,1,.36,1) both}
.sw-base-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important}

/* Processo e depois do lançamento: carrossel no celular */
.sw-pr,.sw-deps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sw-pr::-webkit-scrollbar,.sw-deps::-webkit-scrollbar{display:none}
@media (min-width:700px){
  .sw-pr{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}
  .sw-deps{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}
}
@media (min-width:1000px){.sw-pr{grid-template-columns:repeat(6,minmax(0,1fr))}.sw-deps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sw-pr-bt{transition:background .55s cubic-bezier(.22,1,.36,1),color .55s,transform .55s cubic-bezier(.22,1,.36,1)}
.sw-pr-bt:hover{transform:translateY(-3px)}
.sw-dep{transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.sw-dep:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important}

/* Módulos e o que enviar: mola só no clique */
.sw-mod:active{transform:scale(.95)}
.sw-env:active{transform:scale(.9)}

/* Outros serviços */
.sw-outro{transition:transform .6s cubic-bezier(.22,1,.36,1),background .6s}
.sw-outro:hover{transform:translateY(-4px);background:#ECEBE8!important}

/* Perguntas */
.sw-fq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.sw-fq.on .sw-fq-r{grid-template-rows:1fr}
.sw-fq-mais{background:#F1F0EE;color:#09090B;transform:rotate(0deg);transition:transform .5s cubic-bezier(.22,1,.36,1),background .4s,color .4s}
.sw-fq.on .sw-fq-mais{background:#09090B;color:#FFFFFF;transform:rotate(45deg)}

/* Barra fixa no celular */
.sw-barra{display:flex;transform:translateY(120px);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.sw-barra.on{transform:translateY(0px)}
@media (min-width:700px){.sw-barra{display:none}}

@media (prefers-reduced-motion:reduce){.sw-pg *,.sw-pg{animation:none!important;transition:none!important}}