/* Diagrama de empresa matriz: MarckBusiness Solutions y sus soluciones. */

.matriz {
  margin: 56px 0 48px; padding: 36px; border-radius: 28px; position: relative; overflow: hidden;
  background: var(--cristal); border: 1px solid var(--cristal-borde);
}
.matriz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at 50% 0%, rgba(255,122,26,.14), transparent 60%);
}
.matriz-raiz {
  display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; z-index: 1;
  width: max-content; margin: 0 auto; padding: 16px 26px; border-radius: 18px;
  background: rgba(5,7,13,.6); border: 1px solid rgba(255,122,26,.4);
  box-shadow: 0 0 40px -10px rgba(255,122,26,.45);
}
.matriz-logo { height: 46px; width: auto; }
.matriz-raiz strong { display: block; font-family: var(--titulo); font-size: 20px; }
.matriz-raiz span { display: block; font-family: var(--mono); font-size: 12px; color: var(--texto-suave); letter-spacing: .06em; text-transform: uppercase; }

/* Ramas: línea vertical desde la raíz y horizontal sobre los hijos */
.matriz-ramas {
  position: relative; z-index: 1; margin-top: 44px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px;
}
.matriz-ramas::before {
  content: ""; position: absolute; left: 7%; right: 7%; top: -22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,122,26,.7), rgba(59,130,246,.7), transparent);
}
.matriz-ramas span {
  position: relative; text-align: center; padding: 14px 8px; border-radius: 14px; font-size: 14px; font-weight: 500;
  background: rgba(5,7,13,.5); border: 1px solid var(--cristal-borde); color: var(--texto);
  transition: transform .4s var(--ease), border-color .4s;
}
.matriz-ramas span::before {
  content: ""; position: absolute; left: 50%; top: -22px; width: 1px; height: 22px; background: rgba(255,122,26,.5);
}
.matriz-ramas span:hover { transform: translateY(-4px); border-color: rgba(255,122,26,.5); }

@media (max-width: 1080px) {
  .matriz-ramas { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }
  .matriz-ramas::before { display: none; }
  .matriz-ramas span::before { display: none; }
}
@media (max-width: 560px) {
  .matriz { padding: 22px; }
  .matriz-ramas { grid-template-columns: repeat(2, 1fr); }
  .matriz-raiz { width: 100%; }
}