/* LaranSys v6.0.20 HF1 - Diagnostic Compact + Transition Bridge
   - Compacta o diagnostico durante Solucoes e Ecossistema.
   - Mostra "Diagnostico" no estado compacto.
   - Reforca a conexao luminosa entre as duas secoes.
*/

:root {
  --ls620hf1-lime: #c7ed36;
  --ls620hf1-cyan: #18d7d0;
}

/* ==========================================================================
   1. CTA de diagnostico: compacto em formato de pill, ainda expansivel.
   ========================================================================== */
.v53-context-cta.ls-float-v616.is-auto-compact:not(.is-peek):not(.is-pinned) {
  --ls616-size: 52px;
  width: 148px !important;
  max-width: 148px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 18% 28%, rgba(199, 237, 54, .16), transparent 44%),
    linear-gradient(145deg, rgba(6, 18, 14, .985), rgba(4, 12, 13, .995)) !important;
  border: 1px solid rgba(199, 237, 54, .38) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .42),
    0 0 30px rgba(199, 237, 54, .11) !important;
}

.v53-context-cta.ls-float-v616.is-auto-compact:not(.is-peek):not(.is-pinned) .ls-float-v616__toggle {
  position: static !important;
  width: 100% !important;
  height: 50px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0 !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  color: var(--ls620hf1-lime) !important;
  background: transparent !important;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: none;
}

.v53-context-cta.ls-float-v616.is-auto-compact:not(.is-peek):not(.is-pinned) .ls-float-v616__toggle::after {
  content: "Diagnóstico";
  display: inline-block;
  color: rgba(241, 249, 243, .94);
  white-space: nowrap;
}

.v53-context-cta.ls-float-v616.is-auto-compact:not(.is-peek):not(.is-pinned) .ls-float-v616__toggle svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  filter: drop-shadow(0 0 7px rgba(199, 237, 54, .28));
}

.v53-context-cta.ls-float-v616.is-auto-compact:not(.is-peek):not(.is-pinned) .ls-float-v616__toggle:hover {
  background:
    linear-gradient(90deg, rgba(199, 237, 54, .08), rgba(24, 215, 208, .035)) !important;
}

.v53-context-cta.ls-float-v616.is-auto-compact:not(.is-peek):not(.is-pinned)::after {
  inset: -6px !important;
  border-radius: 999px !important;
  border-color: rgba(199, 237, 54, .12) !important;
}

/* Ao expandir pelo hover/click, volta ao card completo. */
.v53-context-cta.ls-float-v616.is-auto-compact.is-peek,
.v53-context-cta.ls-float-v616.is-auto-compact.is-pinned {
  width: min(280px, calc(100vw - 32px)) !important;
  max-width: 280px !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.v53-context-cta.ls-float-v616.is-auto-compact.is-peek .ls-float-v616__toggle::after,
.v53-context-cta.ls-float-v616.is-auto-compact.is-pinned .ls-float-v616__toggle::after {
  content: none;
}

/* ==========================================================================
   2. Ponte luminosa entre Solucoes -> Ecossistema.
   Criada via JS no BODY para nao ser cortada pelo overflow de nenhuma secao.
   ========================================================================== */
.ls-v620hf1-bridge {
  --ls620hf1-shift: 0px;
  position: absolute;
  left: 50%;
  width: 2px;
  height: 250px;
  z-index: 18;
  pointer-events: none;
  transform: translate3d(-50%, var(--ls620hf1-shift), 0);
  background:
    linear-gradient(
      to bottom,
      rgba(199, 237, 54, 0) 0%,
      rgba(199, 237, 54, .18) 10%,
      rgba(199, 237, 54, .84) 31%,
      rgba(24, 215, 208, .72) 63%,
      rgba(24, 215, 208, .12) 88%,
      rgba(24, 215, 208, 0) 100%
    );
  box-shadow:
    0 0 8px rgba(199, 237, 54, .32),
    0 0 24px rgba(199, 237, 54, .17),
    0 0 46px rgba(24, 215, 208, .10);
  opacity: .92;
  will-change: transform;
}

.ls-v620hf1-bridge::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 68px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--ls620hf1-lime);
  box-shadow:
    0 0 12px rgba(199, 237, 54, .75),
    0 0 28px rgba(199, 237, 54, .34);
  animation: ls620hf1-node 2.8s ease-in-out infinite;
}

.ls-v620hf1-bridge::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42px;
  width: 96px;
  height: 96px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 237, 54, .10), transparent 70%);
  filter: blur(5px);
}

@keyframes ls620hf1-node {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(.82); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.18); }
}

/* Evita duas linhas concorrendo no topo do Ecossistema. A ponte HF1 assume o papel principal. */
.ls-eco-v608.ls-eco-v620::after {
  opacity: .34 !important;
  height: clamp(110px, 10vw, 160px) !important;
}

/* Halo de entrada no Ecossistema. */
.ls-eco-v608.ls-eco-v620 {
  box-shadow:
    inset 0 30px 80px rgba(199, 237, 54, .022),
    inset 0 1px 0 rgba(199, 237, 54, .09);
}

/* ==========================================================================
   3. Mobile / acessibilidade.
   ========================================================================== */
@media (max-width: 720px) {
  .ls-v620hf1-bridge {
    display: none !important;
  }

  /* Mantem o comportamento mobile anterior: nao forca o pill compacto. */
  .v53-context-cta.ls-float-v616.is-auto-compact:not(.is-peek):not(.is-pinned) {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: inherit !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-v620hf1-bridge {
    transform: translateX(-50%) !important;
  }

  .ls-v620hf1-bridge::before {
    animation: none !important;
  }
}