/* =========================================================
   OPIX EMPRESAS — PLANOS EM ATUALIZAÇÃO V2
   Classes exclusivas para não interferir no restante.
   ========================================================= */

.business-update-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #fbf7fd 0%,
      #ffffff 100%
    ) !important;
}


.business-update-wrap {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(280px, .85fr);

  gap: 44px;

  align-items: center;

  min-height: 420px;

  padding:
    50px 54px;

  margin-top:
    30px;

  border:
    1px solid
    rgba(150, 30, 192, .16);

  border-radius:
    32px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fdf9ff 58%,
      #f7edfc 100%
    );

  box-shadow:
    0 24px 65px
    rgba(52, 7, 72, .085);

  overflow:
    hidden;

  animation:
    opixBusinessEnter
    .95s
    cubic-bezier(.16, 1, .3, 1)
    both;
}


@keyframes opixBusinessEnter {

  from {
    opacity: 0;

    transform:
      translateY(30px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   TEXTO
   ========================================================= */

.business-update-copy {
  position: relative;
  z-index: 5;
}


.business-update-badge {
  display: inline-flex;

  align-items: center;
  gap: 9px;

  margin-bottom:
    20px;

  padding:
    9px 15px;

  border:
    1px solid
    rgba(163, 30, 207, .16);

  border-radius:
    999px;

  background:
    rgba(165, 30, 210, .075);

  color:
    #741198;

  font-size:
    .76rem;

  font-weight:
    900;

  letter-spacing:
    .04em;

  text-transform:
    uppercase;
}


.business-update-dot {
  width: 9px;
  height: 9px;

  border-radius:
    50%;

  background:
    #bd22e8;

  box-shadow:
    0 0 0
    rgba(189, 34, 232, .32);

  animation:
    opixBusinessPulse
    2.1s
    ease-out
    infinite;
}


@keyframes opixBusinessPulse {

  0% {
    box-shadow:
      0 0 0 0
      rgba(189, 34, 232, .35);
  }

  70% {
    box-shadow:
      0 0 0 11px
      rgba(189, 34, 232, 0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(189, 34, 232, 0);
  }

}


.business-update-title {
  max-width:
    670px;

  margin:
    0;

  color:
    #270039;

  font-size:
    clamp(
      2rem,
      4vw,
      3.4rem
    );

  line-height:
    1.02;

  letter-spacing:
    -.04em;
}


.business-update-title span {
  color:
    #a313d5;
}


.business-update-text {
  max-width:
    720px;

  margin:
    22px 0 0;

  color:
    #715c7d;

  font-size:
    1.04rem;

  line-height:
    1.7;
}


.business-update-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top:
    28px;
}


/* =========================================================
   VISUAL / ÓRBITA
   ========================================================= */

.business-update-visual {
  position: relative;

  display: grid;

  place-items: center;

  min-height:
    290px;
}


.business-orbit {
  position: relative;

  width:
    260px;

  height:
    260px;

  border-radius:
    50%;
}


.business-orbit::before,
.business-orbit::after {
  content: "";

  position: absolute;

  inset:
    28px -20px;

  border:
    2px solid
    rgba(180, 37, 222, .28);

  border-radius:
    50%;

  transform:
    rotate(-24deg);

  animation:
    opixBusinessOrbit
    7s
    ease-in-out
    infinite
    alternate;

  filter:
    drop-shadow(
      0 0 13px
      rgba(184, 40, 224, .20)
    );
}


.business-orbit::after {
  inset:
    65px -40px;

  opacity:
    .46;

  transform:
    rotate(22deg);

  animation-duration:
    9s;

  animation-direction:
    alternate-reverse;
}


@keyframes opixBusinessOrbit {

  from {
    transform:
      rotate(-27deg)
      translate3d(-7px, 0, 0)
      scale(.96);
  }

  to {
    transform:
      rotate(-18deg)
      translate3d(14px, -8px, 0)
      scale(1.04);
  }

}


.business-orbit-core {
  position: absolute;

  inset:
    50% auto auto 50%;

  width:
    130px;

  height:
    130px;

  transform:
    translate(-50%, -50%);

  display: grid;

  place-items: center;

  border-radius:
    32px;

  background:
    linear-gradient(
      145deg,
      #a515d8,
      #5b087d
    );

  color:
    #ffffff;

  box-shadow:
    0 22px 55px
    rgba(116, 12, 157, .26);

  animation:
    opixBusinessCore
    4s
    ease-in-out
    infinite;
}


.business-orbit-core strong {
  font-size:
    2.8rem;

  line-height:
    1;
}


.business-orbit-core span {
  position: absolute;

  bottom:
    22px;

  font-size:
    .68rem;

  font-weight:
    800;

  letter-spacing:
    .06em;

  text-transform:
    uppercase;

  opacity:
    .82;
}


@keyframes opixBusinessCore {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-8px);
  }

}


/* Glow ambiental */

.business-update-glow {
  position: absolute;

  width:
    420px;

  height:
    420px;

  right:
    -190px;

  top:
    -210px;

  border-radius:
    50%;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(198, 48, 235, .17),
      rgba(198, 48, 235, .035) 48%,
      transparent 70%
    );

  animation:
    opixBusinessAmbient
    8s
    ease-in-out
    infinite
    alternate;
}


@keyframes opixBusinessAmbient {

  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(-70px, 50px, 0)
      scale(1.16);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {

  .business-update-wrap {
    grid-template-columns:
      1fr;

    padding:
      34px 26px;

    gap:
      20px;

    border-radius:
      24px;
  }


  .business-update-visual {
    min-height:
      230px;
  }


  .business-orbit {
    transform:
      scale(.80);
  }


  .business-update-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .business-update-actions .btn {
    width:
      100%;
  }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .business-update-wrap,
  .business-update-dot,
  .business-orbit::before,
  .business-orbit::after,
  .business-orbit-core,
  .business-update-glow {

    animation:
      none !important;

  }

}