/**
 * ECOSSISTEMA CIRCULAR 4K - MODELO OFICIAL GRUPO BIN HOLDING
 * Baseado no modelo executivo em anexo:
 * - Emblema Central: Grupo Bin Holding (Dourado Metálico 3D)
 * - 5 Nós Orbitais em Círculos Neon Cibernéticos:
 *   1. RAP10 Reformas (Topo)
 *   2. Eagle Tower Imóveis (Topo-Direita)
 *   3. Programa Faça a Diferença (Base-Direita)
 *   4. Incense Church (Base-Esquerda)
 *   5. Construbin Construção Civil (Topo-Esquerda)
 * - Feixes de luz conectores (SVG) com pulsos luminosos
 * - Formato amplo, legível e acessível em smartphones ("para caber nas vistas")
 */

/* Container Principal do Ecossistema */
.ecossistema-circular-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px 16px 10px;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

/* Palco da Constelação Circular */
.constellation-stage {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 6px auto 14px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

/* Feixes de Luz Cibernéticos (SVG Conectores) */
.constellation-svg-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.constellation-line {
  stroke: rgba(201, 169, 97, 0.45);
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
  animation: constellationPulse 2.8s linear infinite;
  filter: drop-shadow(0 0 4px rgba(201, 169, 97, 0.6));
}

.constellation-line.line-cyan {
  stroke: rgba(0, 210, 255, 0.65);
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.8));
}

.constellation-line.line-orange {
  stroke: rgba(234, 88, 12, 0.65);
  filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.8));
}

.constellation-line.line-eagle {
  stroke: rgba(227, 201, 138, 0.65);
  filter: drop-shadow(0 0 6px rgba(227, 201, 138, 0.8));
}

.constellation-line.line-red {
  stroke: rgba(239, 68, 68, 0.65);
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
}

.constellation-line.line-purple {
  stroke: rgba(217, 119, 6, 0.65);
  filter: drop-shadow(0 0 6px rgba(217, 119, 6, 0.8));
}

@keyframes constellationPulse {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

/* ==========================================================================
   NÓ CENTRAL: GRUPO BIN HOLDING
   ========================================================================== */
.constellation-center-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #242c3d 0%, #121824 65%, #080c14 100%);
  border: 2.5px solid #c9a961;
  box-shadow: 0 0 24px rgba(201, 169, 97, 0.55), inset 0 0 16px rgba(201, 169, 97, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  padding: 4px;
  box-sizing: border-box;
}

.constellation-center-node:hover,
.constellation-center-node:active {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 0 35px rgba(201, 169, 97, 0.85), inset 0 0 20px rgba(201, 169, 97, 0.6);
  border-color: #f7e8a4;
}

.center-node-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
}

.center-node-title {
  font-family: 'Cinzel', serif;
  font-size: 8.5px;
  font-weight: 800;
  color: #fce7b2;
  letter-spacing: 0.6px;
  margin-top: 2px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  text-align: center;
  line-height: 1;
}

.center-node-sub {
  font-size: 7px;
  font-weight: 700;
  color: #c5a059;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ==========================================================================
   NÓS ORBITAIS (CADA UMA DAS 5 EMPRESAS)
   ========================================================================== */
.constellation-orbit-node {
  position: absolute;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: radial-gradient(circle at 35% 35%, #182234 0%, #0c121e 75%, #05080e 100%);
  padding: 3px;
  box-sizing: border-box;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.constellation-orbit-node:active {
  transform: translate(-50%, -50%) scale(1.15) !important;
}

/* Coordenadas e Estilos dos 5 Nós Orbitais */

/* 1. NÓ TOPO: RAP10 REFORMAS (Azul Ciano / Laranja Neon) */
.orbit-node-rap10 {
  top: calc(50% - 116px);
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid #00d2ff;
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.55), inset 0 0 10px rgba(0, 210, 255, 0.25);
}

.orbit-node-rap10:hover,
.orbit-node-rap10.active-orbit-card {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: #38bdf8;
  box-shadow: 0 0 30px rgba(0, 210, 255, 0.9), inset 0 0 14px rgba(0, 210, 255, 0.5);
}

/* 2. NÓ TOPO-DIREITA: EAGLE TOWER (Dourado Nobre) */
.orbit-node-eagle {
  top: calc(50% - 36px);
  left: calc(50% + 110px);
  transform: translate(-50%, -50%);
  border: 2px solid #e3c98a;
  box-shadow: 0 0 18px rgba(227, 201, 138, 0.55), inset 0 0 10px rgba(227, 201, 138, 0.25);
}

.orbit-node-eagle:hover,
.orbit-node-eagle.active-orbit-card {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: #fff2c6;
  box-shadow: 0 0 30px rgba(227, 201, 138, 0.9), inset 0 0 14px rgba(227, 201, 138, 0.5);
}

/* 3. NÓ BASE-DIREITA: PROGRAMA FAÇA A DIFERENÇA (Vermelho Neon) */
.orbit-node-faca {
  top: calc(50% + 94px);
  left: calc(50% + 68px);
  transform: translate(-50%, -50%);
  border: 2px solid #ff4757;
  box-shadow: 0 0 18px rgba(255, 71, 87, 0.55), inset 0 0 10px rgba(255, 71, 87, 0.25);
}

.orbit-node-faca:hover,
.orbit-node-faca.active-orbit-card {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: #ff6b81;
  box-shadow: 0 0 30px rgba(255, 71, 87, 0.9), inset 0 0 14px rgba(255, 71, 87, 0.5);
}

/* 4. NÓ BASE-ESQUERDA: INCENSE CHURCH (Chama Dourada / Púrpura) */
.orbit-node-incense {
  top: calc(50% + 94px);
  left: calc(50% - 68px);
  transform: translate(-50%, -50%);
  border: 2px solid #f59e0b;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.55), inset 0 0 10px rgba(245, 158, 11, 0.25);
}

.orbit-node-incense:hover,
.orbit-node-incense.active-orbit-card {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: #fbbf24;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.9), inset 0 0 14px rgba(245, 158, 11, 0.5);
}

/* 5. NÓ TOPO-ESQUERDA: CONSTRUBIN (Vermelho Arquitetura) */
.orbit-node-construbin {
  top: calc(50% - 36px);
  left: calc(50% - 110px);
  transform: translate(-50%, -50%);
  border: 2px solid #ef4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.55), inset 0 0 10px rgba(239, 68, 68, 0.25);
}

.orbit-node-construbin:hover,
.orbit-node-construbin.active-orbit-card {
  transform: translate(-50%, -50%) scale(1.12);
  border-color: #f87171;
  box-shadow: 0 0 30px rgba(239, 68, 68, 0.9), inset 0 0 14px rgba(239, 68, 68, 0.5);
}

/* Conteúdo interno de cada nó orbital */
.orbit-node-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.orbit-node-icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.6));
}

.orbit-node-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 1px;
  pointer-events: none;
}

.orbit-node-name {
  font-size: 8px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1.1;
  text-shadow: 0 1px 4px #000, 0 0 8px rgba(0,0,0,0.9);
}

.orbit-node-sub {
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  opacity: 0.9;
  line-height: 1;
}

/* Indicador de Toque / Touch Hand (Igual ao modelo) */
.orbit-tap-indicator {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px #ffffff);
}

/* ==========================================================================
   RODAPÉ DO ECOSSISTEMA: "ECOSSISTEMA DE SOLUÇÕES • SELECIONE UMA EMPRESA"
   ========================================================================== */
.constellation-banner {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 12px;
  width: 100%;
}

.constellation-banner-title {
  font-family: 'Cinzel', serif;
  font-size: 13.5px;
  font-weight: 800;
  color: #f7e8a4;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(201, 169, 97, 0.6);
  display: inline-block;
  position: relative;
  padding: 0 10px;
}

.constellation-divider-glow {
  width: 220px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #c9a961 50%, transparent 100%);
  margin: 6px auto 0 auto;
  box-shadow: 0 0 8px rgba(201, 169, 97, 0.6);
}

/* Status da Empresa Selecionada (Alto Contraste) */
.constellation-selected-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(201, 169, 97, 0.5);
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.selected-pill-label {
  font-size: 12px;
  font-weight: 800;
  color: #cbd5e1;
}

.selected-pill-name {
  font-size: 13px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: 0.3px;
}

/* Ajustes Responsivos em Telas Menores */
@media (max-width: 360px) {
  .constellation-stage {
    transform: scale(0.92);
    margin: 0 auto;
  }
}

@media (min-width: 769px) {
  .constellation-stage {
    transform: scale(1.1);
    margin: 20px auto 28px auto;
  }
}