/* ============================================
   MANDALA — CSS compartilhado entre as duas mandalas
   v2 (2026-05): stage maior + aurora backdrop + pétalas refinadas
   ============================================ */
.mandala-section {
  padding: var(--space-10) 0 var(--space-20);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 59, 59, 0.06) 0%, transparent 55%),
    var(--bg-base);
  position: relative;
  overflow: hidden;
}
.mandala-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(0, 156, 59, 0.06) 0%, transparent 35%),
    radial-gradient(circle at 82% 70%, rgba(0, 39, 118, 0.08) 0%, transparent 38%);
  pointer-events: none;
  z-index: 0;
}
.mandala-section > * { position: relative; z-index: 1; }

.mandala-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .mandala-layout {
    grid-template-columns: 1.18fr 0.82fr;
    gap: var(--space-14);
  }
}

.mandala-stage {
  position: relative;
  aspect-ratio: 1;
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
  /* Aurora glow atrás do SVG, somente luz */
  isolation: isolate;
}
.mandala-stage::before {
  content: '';
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 59, 59, 0.18) 0%, transparent 38%),
    conic-gradient(from 0deg at 50% 50%,
      rgba(0, 156, 59, 0.10) 0deg,
      rgba(255, 212, 0, 0.10) 90deg,
      rgba(0, 39, 118, 0.10) 180deg,
      rgba(255, 59, 59, 0.10) 270deg,
      rgba(0, 156, 59, 0.10) 360deg);
  filter: blur(48px);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.85;
  animation: mandalaAurora 28s linear infinite;
}
.mandala-stage::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
  z-index: -1;
}
@keyframes mandalaAurora {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mandala {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Anéis decorativos com leve respiração */
.mandala__guide-ring {
  animation: guideRing 8s ease-in-out infinite;
  transform-origin: center;
}
.mandala__guide-ring--slow { animation-duration: 14s; }
@keyframes guideRing {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.012); }
}

/* Pétalas */
.petal {
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center;
}
.petal__shape {
  fill: var(--bg-card);
  stroke: var(--border-base);
  stroke-width: 1;
  transition: all 0.35s ease;
}
.petal__shape--inner {
  fill: rgba(255, 255, 255, 0.025);
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 0.6;
  pointer-events: none;
  transition: all 0.35s ease;
}
.petal:hover .petal__shape {
  fill: rgba(255, 59, 59, 0.10);
  stroke: var(--etel-red);
}
.petal:hover .petal__shape--inner {
  stroke: rgba(255, 59, 59, 0.45);
}
.petal--active .petal__shape {
  fill: rgba(255, 59, 59, 0.20);
  stroke: var(--etel-red);
  filter: drop-shadow(0 0 14px rgba(255, 59, 59, 0.45));
}
.petal--active .petal__shape--inner {
  stroke: rgba(255, 59, 59, 0.65);
}
.petal--active {
  transform: scale(1.025);
}
.petal__num {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.petal--active .petal__num,
.petal:hover .petal__num {
  fill: var(--etel-red);
}
.petal__icon-wrap {
  color: var(--text-secondary);
  transition: color 0.3s ease, transform 0.3s ease;
}
.petal:hover .petal__icon-wrap,
.petal--active .petal__icon-wrap {
  color: #fff;
}
.petal--active .petal__icon-wrap {
  transform: translate(var(--icon-x, 0), var(--icon-y, 0)) scale(1.18);
}
.petal:focus-visible {
  outline: none;
}
.petal:focus-visible .petal__shape {
  stroke: var(--cyan);
  stroke-width: 2;
}

/* Tooltip flutuante (DOM, controlado via JS) */
.mandala-tooltip {
  position: fixed;
  pointer-events: none;
  background: rgba(10, 10, 20, 0.96);
  border: 1px solid var(--etel-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 28px -8px rgba(255, 59, 59, 0.45);
  z-index: 999;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.mandala-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.mandala-tooltip__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--etel-red);
  margin-right: 6px;
  font-weight: 500;
}

/* Core animation — pulso multi-camada */
.mandala-core {
  animation: corePulse 4s ease-in-out infinite;
  transform-origin: center;
}
.mandala-core__ring {
  fill: none;
  stroke: rgba(255, 59, 59, 0.25);
  stroke-width: 1;
  transform-origin: center;
  animation: coreRing 3.2s ease-out infinite;
}
.mandala-core__ring--2 { animation-delay: 0.8s; }
.mandala-core__ring--3 { animation-delay: 1.6s; }
@keyframes corePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}
@keyframes coreRing {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(2.1);  opacity: 0; }
}

/* Painel lateral */
.mandala-detail {
  position: sticky;
  top: 100px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  min-height: 400px;
}

.mandala-detail__placeholder {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}
.mandala-detail__placeholder svg {
  margin: 0 auto var(--space-4);
  display: block;
}
.mandala-detail__placeholder h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
}
.mandala-detail__placeholder p {
  color: var(--text-tertiary);
  font-size: 0.9375rem;
}

.mandala-detail__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--etel-red);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}
.mandala-detail__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
  background: linear-gradient(135deg, #fff, var(--text-tertiary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mandala-detail__short {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--cyan);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.mandala-detail__content section {
  margin-bottom: var(--space-5);
}
.mandala-detail__content h4 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--etel-red);
  margin-bottom: var(--space-2);
  font-weight: 600;
}
.mandala-detail__content h4::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--etel-red);
}
.mandala-detail__content p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.mandala-detail__stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.mandala-detail__stack span {
  padding: 6px 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.mandala-detail__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

/* Label do parceiro (texto curvo) */
.petal__partner-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-secondary);
  letter-spacing: -0.01em;
  transition: fill 0.3s ease;
}
.petal:hover .petal__partner-label,
.petal--active .petal__partner-label {
  fill: #fff;
}

/* Pétala colorida por categoria (Mandala de Parceiros) */
#mandalaParceiros .petal:hover .petal__shape,
#mandalaParceiros .petal--active .petal__shape {
  fill: color-mix(in srgb, var(--cat-color) 14%, transparent);
  stroke: var(--cat-color);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--cat-color) 50%, transparent));
}

/* Badge "Gold Partner" no painel lateral */
.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #FFD700, #DAA520);
  color: #0a0a14;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: var(--space-2);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Mobile */
@media (max-width: 1023px) {
  .mandala-detail {
    position: relative;
    top: auto;
  }
}
@media (max-width: 600px) {
  .mandala-stage {
    max-width: 90vw;
  }
  .petal__num {
    font-size: 7px;
  }
}

/* ============================================
   PIRÂMIDE DE ARQUITETURA — v2 (2026-05)
   9 camadas · stack ICT corporativo completo
   ============================================ */
.arq-section {
  padding: var(--space-10) 0 var(--space-20);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 59, 59, 0.05) 0%, transparent 50%),
    var(--bg-base);
  position: relative;
  overflow: hidden;
}
.arq-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.05) 0%, transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(168, 85, 247, 0.05) 0%, transparent 35%);
  pointer-events: none;
}
.arq-section > * { position: relative; z-index: 1; }

.arq-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .arq-layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.arq-pyramid {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-6) var(--space-4);
  max-width: 760px;
  margin: 0 auto;
}
/* Linha vertical de "dependência" passando pelo centro */
.arq-pyramid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 5%;
  bottom: 5%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 12%,
    rgba(255, 59, 59, 0.20) 50%,
    rgba(255, 255, 255, 0.10) 88%,
    transparent 100%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.arq-layer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 76px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-align: left;
  padding: 0 var(--space-5) 0 60px;
  gap: 12px;
  overflow: hidden;
  isolation: isolate;
}
/* Faixa de cor à esquerda variando por camada (gradiente do espectro) */
.arq-layer::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--layer-color, var(--etel-red));
  opacity: 0.95;
  z-index: 2;
}
/* Backdrop sutil colorido por camada */
.arq-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--layer-color, var(--etel-red)) 12%, transparent) 0%,
    transparent 38%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease;
}
.arq-layer > * { position: relative; z-index: 3; }
.arq-layer__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--layer-color, var(--etel-red)) 14%, transparent);
  color: var(--layer-color, var(--etel-red));
  flex-shrink: 0;
}
.arq-layer__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.arq-layer__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.2;
}
.arq-layer__subtitle {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arq-layer__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}
.arq-layer:hover {
  background: color-mix(in srgb, var(--layer-color, var(--etel-red)) 10%, var(--bg-card));
  border-color: var(--layer-color, var(--etel-red));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--layer-color, var(--etel-red)) 60%, transparent);
}
.arq-layer:hover::after { opacity: 1; }
.arq-layer.is-active {
  background: color-mix(in srgb, var(--layer-color, var(--etel-red)) 18%, var(--bg-card));
  border-color: var(--layer-color, var(--etel-red));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--layer-color, var(--etel-red)) 60%, transparent),
              0 16px 36px -18px color-mix(in srgb, var(--layer-color, var(--etel-red)) 80%, transparent);
}
.arq-layer.is-active .arq-layer__num {
  background: var(--layer-color, var(--etel-red));
  color: #0a0a14;
  font-weight: 700;
}
.arq-layer:focus-visible {
  outline: 2px solid var(--layer-color, var(--etel-red));
  outline-offset: 3px;
}

/* Larguras decrescentes — pirâmide de 9 camadas (base 100% → apex 36%) */
.arq-layer--1 { width: 100%; }
.arq-layer--2 { width: 92%; }
.arq-layer--3 { width: 84%; }
.arq-layer--4 { width: 76%; }
.arq-layer--5 { width: 68%; }
.arq-layer--6 { width: 60%; }
.arq-layer--7 { width: 52%; }
.arq-layer--8 { width: 44%; }
.arq-layer--9 { width: 36%; }

/* Cores por camada (espectro: base quente → topo frio/dourado) */
.arq-layer--c1 { --layer-color: #FF6B3B; }   /* Energia · laranja-vermelho */
.arq-layer--c2 { --layer-color: #FF3B3B; }   /* Hardware · vermelho Etel */
.arq-layer--c3 { --layer-color: #FFAA33; }   /* Conectividade · âmbar */
.arq-layer--c4 { --layer-color: #FFD93D; }   /* Virtualização · amarelo */
.arq-layer--c5 { --layer-color: #6BCB77; }   /* SO · verde */
.arq-layer--c6 { --layer-color: #00d4ff; }   /* Dados · ciano */
.arq-layer--c7 { --layer-color: #4ECDC4; }   /* Middleware · turquesa */
.arq-layer--c8 { --layer-color: #A855F7; }   /* Apps · roxo */
.arq-layer--c9 { --layer-color: #FFD700; }   /* Negócio · dourado */

/* Apex/cap decorativo no topo */
.arq-pyramid__apex {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 18px solid #FFD700;
  margin-bottom: 4px;
  filter: drop-shadow(0 -4px 12px rgba(255, 215, 0, 0.5));
  animation: apexPulse 3.6s ease-in-out infinite;
}
@keyframes apexPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 -4px 12px rgba(255, 215, 0, 0.5)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 -6px 18px rgba(255, 215, 0, 0.75)); }
}

/* Base/foundation label */
.arq-pyramid__base {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: center;
}
.arq-pyramid__base strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.arq-detail {
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-2xl);
  padding: var(--space-7);
  min-height: 480px;
  position: sticky;
  top: 100px;
  /* Borda topo colorida pela camada ativa */
  border-top: 3px solid var(--layer-color, var(--etel-red));
  transition: border-color 0.35s ease;
}
.arq-detail__placeholder {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
}

/* Lista de items dentro da camada */
.arq-items {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
@media (max-width: 600px) {
  .arq-items { grid-template-columns: 1fr; }
}
.arq-items li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.arq-items li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  background: var(--layer-color, var(--etel-red));
  border-radius: 50%;
  box-shadow: 0 0 8px color-mix(in srgb, var(--layer-color, var(--etel-red)) 50%, transparent);
}

@media (max-width: 1023px) {
  .arq-detail { position: relative; top: auto; }
  .arq-pyramid::before { display: none; }
  .arq-layer { width: 100% !important; }
}