/* Refinements requested for the diagnostic and solution simulations. */
#diagnostico .ok-panel,
#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] {
  box-shadow: 0 26px 70px -34px rgba(0, 126, 255, .38), 0 14px 32px -24px rgba(0, 220, 255, .28);
}

#diagnostico .relative > .flex {
  opacity: 1 !important;
}

#diagnostico .relative > .flex > .flex-1 {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(0, 220, 255, .28), transparent 25%),
    radial-gradient(circle at 24% 76%, rgba(98, 55, 255, .26), transparent 31%),
    linear-gradient(135deg, rgba(20, 117, 255, .18), rgba(0, 220, 255, .05));
}

#diagnostico .relative > .flex > .flex-1::before {
  content: "";
  position: absolute;
  inset: 16% 11% 24% 11%;
  border-radius: 16px;
  border: 1px solid rgba(116, 185, 255, .32);
  background:
    linear-gradient(90deg, rgba(255,255,255,.13) 0 38%, transparent 38% 43%, rgba(255,255,255,.07) 43% 100%),
    linear-gradient(145deg, rgba(39, 120, 255, .36), rgba(7, 208, 238, .16));
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 16px 32px -20px rgba(0, 145, 255, .8);
}

#diagnostico .relative > .flex > .flex-1::after {
  content: "";
  position: absolute;
  left: 17%;
  bottom: 32%;
  width: 24%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2477ff, #02d6ec);
  box-shadow: 0 -26px 0 -2px rgba(255,255,255,.18), 100px -26px 0 -2px rgba(255,255,255,.10);
}

#diagnostico .grid-cols-3 > div {
  overflow: hidden;
  background: linear-gradient(145deg, rgba(36, 119, 255, .15), rgba(2, 214, 236, .04));
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] {
  position: relative;
  border-color: rgba(57, 145, 255, .28) !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(0, 219, 255, .12), transparent 28%),
    linear-gradient(145deg, rgba(36, 119, 255, .07), rgba(98, 55, 255, .035));
}

#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] .bg-ok-soft {
  background:
    radial-gradient(circle at 78% 22%, rgba(0, 214, 235, .18), transparent 32%),
    linear-gradient(145deg, rgba(40, 119, 255, .17), rgba(100, 61, 235, .07)) !important;
}

#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] .bg-ok-line,
#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] .bg-ok-line-strong {
  background: linear-gradient(90deg, rgba(74, 154, 255, .7), rgba(4, 216, 235, .38)) !important;
}

#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] .aspect-square {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 65% 28%, rgba(255,255,255,.38) 0 5%, transparent 6%),
    linear-gradient(145deg, rgba(34, 119, 255, .48), rgba(1, 215, 231, .20)) !important;
}

#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] .aspect-square::after {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  left: 27%;
  top: 24%;
  border-radius: 28% 72% 58% 42%;
  transform: rotate(18deg);
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(129, 203, 255, .46));
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.7);
}

#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"] .ok-gradient {
  box-shadow: 0 7px 18px -9px rgba(0, 190, 255, .95);
}

#solucoes [role="img"][aria-label="Representação de interface, sem dados reais"]:hover {
  transform: translateY(-3px);
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 30px 75px -34px rgba(0, 150, 255, .52);
}