/* ============================================================
   Orbit feature — stage de orbes animados
   Compartido por reto.html y el hero de index.html.
   Los orbes escalan con el tamaño del stage vía CSS vars.
   ============================================================ */

.feature-stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 28%, rgba(5, 212, 222, .10), transparent 38%),
    linear-gradient(180deg, #0a1630 0%, #081128 55%, #05102b 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 20, 55, .25);
  /* Ratios que usan los orbes: radio y tamaño máximo como % del stage */
  --orb-radius-ratio: 0.30;
  --orb-active-ratio: 0.36;
}

.feature-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(5, 212, 222, .06), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(19, 79, 241, .06), transparent 36%);
  pointer-events: none;
}

/* Variante "ghost": sin caja — para embeber el stage directamente sobre el
   fondo de la página (por ejemplo, el hero blanco). */
.feature-stage--ghost {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  /* Stage 720px en hero. Logo 400px fijo (= 55.5%). Orbes activos ~173px (0.24)
     orbitando a 288px del centro (0.40). Orbes en idle x2 (data-size px). */
  --orb-radius-ratio: 0.40;
  --orb-active-ratio: 0.24;
}
.feature-stage--ghost::before { content: none; }
/* Logo central: 55.5% del stage → 400px cuando stage mide 720px. */
.feature-stage--ghost .feature-center { width: 55.5%; }
.feature-stage--ghost .feature-logo {
  filter: drop-shadow(0 8px 18px rgba(17, 79, 245, .14));
}

/* Estado idle (girando): sin glow exterior, mantiene look limpio sobre fondo claro */
.feature-stage--ghost .feature-dot { box-shadow: 0 0 0 1px rgba(13, 87, 255, .12), 0 4px 14px rgba(17, 79, 245, .18); }
/* Estado activo: halo brillante para destacarlo claramente */
.feature-stage--ghost .feature-dot.active {
  box-shadow:
    0 0 0 4px rgba(0, 208, 219, .25),
    0 0 36px rgba(17, 79, 245, .42),
    0 0 90px rgba(17, 79, 245, .25),
    0 16px 44px rgba(10, 30, 90, .28),
    inset 0 12px 34px rgba(255, 255, 255, .12),
    inset 0 -10px 28px rgba(10, 30, 90, .22);
}
/* Pulso continuo en el orbe activo para llamar la atención */
.feature-stage--ghost .feature-dot.active::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid rgba(0, 208, 219, .55);
  pointer-events: none;
  animation: orb-pulse 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes orb-pulse {
  0%   { transform: scale(1);    opacity: .65; }
  80%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-stage--ghost .feature-dot.active::after { animation: none; opacity: 0; }
}

/* Texto ajustado para orbes en ghost (~173px activos). */
.feature-stage--ghost .feature-dot .dot-content {
  max-width: 90%;
  padding: 18px 14px;
}
.feature-stage--ghost .feature-dot .dot-content strong {
  font-size: 1.08rem;
  margin-bottom: 8px;
  line-height: 1.14;
}
.feature-stage--ghost .feature-dot .dot-content span {
  font-size: .82rem;
  line-height: 1.38;
}

.feature-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  aspect-ratio: 353 / 323;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

.feature-logo {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, .35));
  transition: opacity .45s ease, transform .7s ease;
}

.feature-orbit {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  z-index: 4;
  will-change: transform;
}

.feature-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 35% 35%, #ffffff, #05d4de 62%, #0d57ff 100%);
  box-shadow:
    0 0 18px rgba(5, 212, 222, .25),
    0 0 36px rgba(19, 79, 241, .12);
  transition:
    width 1s cubic-bezier(.45, 0, .15, 1),
    height 1s cubic-bezier(.45, 0, .15, 1),
    box-shadow .7s ease,
    background .55s ease;
  overflow: hidden;
  --counter-rotate: 0deg;
}

.feature-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .20), transparent 58%);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}

.feature-dot .dot-content {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: rotate(var(--counter-rotate, 0deg));
  transform-origin: center center;
  /* Fade-out rápido y sin delay cuando el orbe se cierra */
  transition: opacity .25s ease 0s;
  padding: 26px 22px;
  max-width: 90%;
  pointer-events: none;
  text-align: center;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

.feature-dot .dot-content strong {
  display: block;
  font-size: 1.22rem;
  line-height: 1.15;
  margin-bottom: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(4, 14, 40, .55);
}

.feature-dot .dot-content span {
  display: block;
  font-size: .93rem;
  line-height: 1.46;
  font-weight: 500;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 6px rgba(4, 14, 40, .45);
}

.feature-dot.active {
  z-index: 10;
  background:
    radial-gradient(
      circle at 50% 46%,
      #2e66fd 0%,
      #1a58f3 26%,
      #134ff1 55%,
      #134ff1 78%,
      #0d3fcf 94%,
      #0a2e9e 100%
    );
  box-shadow:
    0 0 0 1.5px rgba(10, 30, 90, .55),
    0 0 54px rgba(19, 79, 241, .5),
    0 0 140px rgba(19, 79, 241, .28),
    inset 0 12px 34px rgba(255, 255, 255, .08),
    inset 0 -10px 28px rgba(10, 30, 90, .22);
}

.feature-dot.active::before { opacity: 1; }

.feature-dot.active .dot-content {
  opacity: 1;
  /* Delay al 82% de la animación de tamaño (1s) → el texto no se ve mover
     durante el crecimiento; aparece cuando el orbe ya casi tiene su tamaño final. */
  transition: opacity .2s ease .82s;
}

@media (prefers-reduced-motion: reduce) {
  .feature-dot,
  .feature-dot .dot-content,
  .feature-dot.active .dot-content { transition: opacity .3s ease; }
}

@media (max-width: 720px) {
  .feature-dot .dot-content {
    padding: 18px 16px;
    max-width: 92%;
  }
  .feature-dot .dot-content strong {
    font-size: .98rem;
    margin-bottom: 7px;
    letter-spacing: -0.015em;
  }
  .feature-dot .dot-content span {
    font-size: .8rem;
    line-height: 1.38;
  }
}