/* =========================================================================
   PLATAFORMA — só a página 7bee usa este arquivo.
   Contém a seção "Situações que a sua equipe já conhece de perto",
   que não existe no site de referência, e as microtransições dos
   cards daquela página.
   ========================================================================= */

.situations{background:var(--soft)}
.situation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
@media (max-width:980px){.situation-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.situation-grid{grid-template-columns:1fr !important}}

.situation{width:100%;height:208px;padding:0;border:0;background:none;perspective:1200px;
  text-align:left;font:inherit;color:inherit}
.situation-inner{position:relative;display:block;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.1,.2,1)}
.situation:hover .situation-inner,.situation.aberto .situation-inner{transform:rotateY(180deg)}
.situation-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;border-radius:var(--radius);backface-visibility:hidden;
  -webkit-backface-visibility:hidden}
.situation-front{background:var(--white);border:1px solid var(--line)}
.situation-back{background:linear-gradient(140deg,#7c43c9,#5a2f96);color:#fff;
  transform:rotateY(180deg);justify-content:center}
.situation-back span{font-size:15.5px;line-height:1.6}
.situation-number{position:absolute;top:22px;left:26px;font-size:34px;font-weight:700;line-height:1;
  color:#e6dcf6}
.situation-hint{position:absolute;top:28px;right:26px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:#a79fba}
.situation-hint .icon{width:15px;height:15px}
.situation-title{font-size:20px;font-weight:700;line-height:1.3;color:var(--ink)}

/* dica: o primeiro cartão gira sozinho uma vez ao entrar na tela */
@keyframes sbEspia{0%,18%{transform:rotateY(0)}42%,58%{transform:rotateY(180deg)}
  82%,100%{transform:rotateY(0)}}
.situation.espiar .situation-inner{animation:sbEspia 2.6s cubic-bezier(.4,.1,.2,1) 1}


/* microtransições de toque da plataforma */
.pillars>article,.resource-grid>article{transition:transform .28s cubic-bezier(.2,.7,.25,1),
  box-shadow .28s,border-color .28s}
.pillars>article:hover,.resource-grid>article:hover{transform:translateY(-6px);
  box-shadow:0 26px 50px -34px rgba(25,21,44,.55)}
.feature-icon{transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.pillars>article:hover .feature-icon,.resource-grid>article:hover .feature-icon{
  transform:translateY(-3px) rotate(-6deg)}
.atendimento-photo img,.ai-photo img,.product-figure img{
  transition:transform .8s cubic-bezier(.2,.7,.25,1)}
.atendimento-photo:hover img,.ai-photo:hover img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .situation.espiar .situation-inner{animation:none}
  .pillars>article:hover,.resource-grid>article:hover{transform:none}
  .atendimento-photo:hover img,.ai-photo:hover img{transform:none}
}