/* Section 12 only: Usuario -> ARK Flow -> instituicao. */
.flow-compatibility-module{position:relative}
.flow-compatibility-module article{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center;transition:transform 280ms cubic-bezier(.22,1,.36,1),border-color 280ms ease,background 280ms ease,box-shadow 280ms ease}
.flow-compatibility-module article:hover{transform:translateY(-8px);border-color:rgba(110,137,159,.5);background:#0a100d;box-shadow:0 22px 38px -25px rgba(0,9,24,.92),inset 0 0 28px rgba(48,77,92,.07)}
.flow-compatibility-module article>span{max-width:100%;color:#f5f7f6;line-height:1.35}
.flow-compatibility-module article>p{margin:0;color:#929d97;line-height:1.45}
.flow-compatibility-module article>svg{margin:25px auto 18px}
.flow-compatibility-module .flow-layer-center{border-color:rgba(0,243,109,.31);background:linear-gradient(180deg,rgba(0,243,109,.027),#090e0b 45%);box-shadow:0 0 50px rgba(0,243,109,.055),inset 0 0 34px rgba(0,243,109,.025)}
.flow-compatibility-module .flow-layer-center:hover{transform:translateY(-8px) scale(1.01);border-color:rgba(0,243,109,.52);box-shadow:0 22px 38px -25px rgba(0,9,24,.92),0 0 36px rgba(0,243,109,.075),inset 0 0 35px rgba(0,243,109,.045)}
.flow-compatibility-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:23px}
.flow-compatibility-brand img{display:block;width:94px;height:auto}
.flow-compatibility-brand strong{color:#00f36d;-webkit-text-fill-color:#00f36d;font-size:26px;font-style:italic;font-weight:800;letter-spacing:-.055em;line-height:1;transition:filter 280ms ease}
.flow-layer-center:hover .flow-compatibility-brand strong{filter:drop-shadow(0 0 7px rgba(0,243,109,.34))}
.flow-compatibility-module .flow-layer-data{position:relative;align-self:center;overflow:visible}
.flow-compatibility-module .flow-layer-data b{display:block;color:#77827c;font-size:10px;letter-spacing:.1em}
.flow-compatibility-module .flow-layer-data i{position:relative;overflow:hidden;background:rgba(0,243,109,.15)}
.flow-compatibility-module .flow-layer-data i:after{content:"";position:absolute;left:0;top:50%;width:24px;height:3px;border-radius:999px;background:#d8ffe8;box-shadow:0 0 7px #00f36d,0 0 15px rgba(0,243,109,.75);opacity:0;transform:translate(-28px,-50%)}
.flow-compatibility-module.is-flow-active .flow-layer-data i:after{animation:flowCompatibilityPulse 5s cubic-bezier(.45,0,.3,1) infinite}
.flow-compatibility-module.is-flow-active .flow-layer-data--data i:after{animation-delay:.85s}
.flow-compatibility-module.is-flow-active .flow-layer-data--integration i:after{animation-delay:1.4s}
.flow-compatibility-module.is-motion-ready article{opacity:0;transform:translateY(18px)}
.flow-compatibility-module.is-motion-ready.is-flow-active article{opacity:1;transform:none;transition:opacity 500ms ease,transform 500ms cubic-bezier(.22,1,.36,1),border-color 280ms ease,background 280ms ease,box-shadow 280ms ease}
.flow-compatibility-module.is-motion-ready.is-flow-active article:nth-of-type(2){transition-delay:150ms}
.flow-compatibility-module.is-motion-ready.is-flow-active article:nth-of-type(3){transition-delay:300ms}
.flow-compatibility-module.is-motion-ready.is-flow-active article:hover{transform:translateY(-8px)}
.flow-compatibility-module.is-motion-ready.is-flow-active .flow-layer-center:hover{transform:translateY(-8px) scale(1.01)}
@keyframes flowCompatibilityPulse{0%,15%{opacity:0;transform:translate(-28px,-50%)}20%{opacity:1}64%{opacity:1}70%,100%{opacity:0;transform:translate(132px,-50%)}}
@media(max-width:900px){
  .flow-compatibility-module{grid-template-columns:1fr;gap:14px;max-width:620px;margin-inline:auto}
  .flow-compatibility-module article{width:100%;min-height:220px}
  .flow-compatibility-module .flow-layer-data{width:100%;height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .flow-compatibility-module .flow-layer-data i{width:1px;height:52px;margin:8px 0 0;background:rgba(0,243,109,.15)}
  .flow-compatibility-module .flow-layer-data i:after{left:50%;top:0;width:3px;height:18px;transform:translate(-50%,-21px)}
  @keyframes flowCompatibilityPulse{0%,15%{opacity:0;transform:translate(-50%,-21px)}20%{opacity:1}64%{opacity:1}70%,100%{opacity:0;transform:translate(-50%,55px)}}
}
@media(prefers-reduced-motion:reduce){
  .flow-compatibility-module article,.flow-compatibility-module article:hover,.flow-compatibility-module .flow-layer-center:hover{opacity:1!important;transform:none!important;transition:none!important}
  .flow-compatibility-module .flow-layer-data i:after{display:none!important;animation:none!important}
}
