/* ============================================================
   DIAGNOSTICO.CSS — Sección Diagnóstico 360 Galaxy
   ============================================================ */

section.diagnostico {
  background: var(--color-bg);
}

/* Contenedor galaxy — full width, altura fija */
.diagnostico__galaxy-wrap {
  width: 100%;
  height: 520px;
  margin-top: var(--sp-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(13,27,62,0.8) 0%, rgba(5,10,25,0.95) 100%);
  position: relative;
}

.diagnostico__galaxy-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Leyenda de gemas */
.diagnostico__gems-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-5);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.diagnostico__gems-legend span {
  opacity: 0.85;
  transition: opacity 0.2s;
}

.diagnostico__gems-legend span:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
  .diagnostico__galaxy-wrap {
    height: 420px;
  }
}

@media (max-width: 640px) {
  .diagnostico__galaxy-wrap {
    height: 320px;
    margin-top: var(--sp-5);
  }

  .diagnostico__gems-legend {
    gap: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
  }
}