/* 16 · Hierarquia — "Pirâmide holográfica"
   Um projetor na base abre um feixe de luz; as cinco camadas comerciais se materializam
   de baixo para cima em placas 3D (CSS 3D), da STARTUP EXPO até a assinatura APRESENTA. */
#hierarquia {
  --hi-anno-w: clamp(230px, 23vw, 350px);
  --hi-colgap: clamp(20px, 3vw, 56px);
  --hi-h: clamp(46px, 7.2vh, 76px);
  --hi-gap: clamp(10px, 2.3vh, 24px);
  --hi-d: clamp(34px, 4.4vw, 72px);
  padding-block: 0;
}
#hierarquia .hi-pin {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--hud-h) + clamp(6px, 2vh, 24px)) 0 clamp(14px, 2.6vh, 30px);
}
#hierarquia .hi-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#hierarquia .hi-grid { opacity: 0.4; background-size: 56px 56px; }
#hierarquia .hi-vignette { position: absolute; inset: 0; background: radial-gradient(60% 55% at 38% 58%, rgba(18, 197, 181, 0.08), transparent 70%), linear-gradient(180deg, rgba(2, 8, 22, 0.5), transparent 30%, transparent 70%, rgba(2, 8, 22, 0.6)); }
#hierarquia .hi-wrap { width: 100%; }

/* ---------- Cabeçalho ---------- */
#hierarquia .hi-head .t-eyebrow { margin-bottom: clamp(10px, 1.6vh, 20px); }
#hierarquia .hi-title { max-width: 30ch; font-size: clamp(28px, min(3.5vw, 5.4vh), 60px); }
#hierarquia .hi-title .split-word { padding-right: 0.04em; }
#hierarquia .hi-title .grad-text .split-word { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Palco ---------- */
#hierarquia .hi-stage {
  position: relative; margin-top: clamp(14px, 3vh, 38px);
  padding-bottom: calc(var(--hi-h) * 1.05 + 10px); /* espaço do projetor */
}
#hierarquia .hi-colheads {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--hi-anno-w); column-gap: var(--hi-colgap);
  margin-bottom: calc(var(--hi-d) * 0.55);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
#hierarquia .hi-colheads span:first-child { text-align: center; }
#hierarquia .hi-colheads span:last-child { padding-left: 2px; }

/* Efeitos do projetor (atrás das placas) */
#hierarquia .hi-fx { position: absolute; left: 0; top: 0; bottom: 0; right: calc(var(--hi-anno-w) + var(--hi-colgap)); pointer-events: none; z-index: 0; }
#hierarquia .hi-cone {
  position: absolute; left: -4%; right: -4%; top: calc(var(--hi-d) * 0.55 + 6px); bottom: calc(var(--hi-h) * 0.5);
  transform-origin: 50% 100%;
  clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 40% 100%);
  background:
    linear-gradient(0deg, rgba(79, 240, 220, 0.42) 0%, rgba(18, 197, 181, 0.16) 35%, rgba(29, 159, 208, 0.10) 75%, rgba(29, 159, 208, 0.02) 100%);
  mix-blend-mode: screen;
}
#hierarquia .hi-motes { position: absolute; left: -4%; right: -4%; top: calc(var(--hi-d) * 0.55 + 6px); bottom: calc(var(--hi-h) * 0.5); clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 40% 100%); mix-blend-mode: screen; }
#hierarquia .hi-mote { position: absolute; left: 50%; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--teal-hi); box-shadow: 0 0 8px var(--teal-hi); opacity: 0; animation: hi-mote var(--dur, 5s) linear var(--delay, 0s) infinite; }
@keyframes hi-mote {
  0% { transform: translate(var(--x0), 0); opacity: 0; }
  12% { opacity: 0.9; }
  85% { opacity: 0.5; }
  100% { transform: translate(var(--x1), var(--rise)); opacity: 0; }
}
#hierarquia .hi-cone__rays {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(111, 211, 255, 0.0) 0 22px, rgba(111, 211, 255, 0.12) 22px 23px);
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 95%); mask-image: linear-gradient(0deg, #000 10%, transparent 95%);
  animation: hi-rays 6s linear infinite;
}
@keyframes hi-rays { to { background-position: 46px 0; } }
#hierarquia .hi-base { position: absolute; left: 50%; bottom: 0; width: clamp(240px, 42%, 460px); height: calc(var(--hi-h) * 1.05); transform: translateX(-50%); }
#hierarquia .hi-base__in { position: absolute; inset: 0; }
#hierarquia .hi-base__disc { position: absolute; inset: 0; transform: perspective(600px) rotateX(72deg); transform-style: preserve-3d; }
#hierarquia .hi-base__disc i { position: absolute; inset: 0; margin: auto; border-radius: 50%; aspect-ratio: 1; width: 100%; height: auto; top: 50%; transform: translateY(-50%); }
#hierarquia .hi-base__disc .r1 { border: 1px solid rgba(79, 240, 220, 0.55); box-shadow: 0 0 30px rgba(18, 197, 181, 0.35), inset 0 0 30px rgba(18, 197, 181, 0.25); }
#hierarquia .hi-base__disc .r2 { width: 72%; left: 14%; border: 2px dashed rgba(111, 211, 255, 0.55); animation: hi-spin 14s linear infinite; }
#hierarquia .hi-base__disc .r3 { width: 42%; left: 29%; border: 1px solid rgba(79, 240, 220, 0.8); background: radial-gradient(circle, rgba(79, 240, 220, 0.5), rgba(18, 197, 181, 0.08) 60%, transparent 70%); animation: hi-spin 9s linear infinite reverse; border-style: dotted; }
@keyframes hi-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }
#hierarquia .hi-base__core { position: absolute; left: 50%; top: 42%; width: 34%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 255, 250, 0.95), rgba(79, 240, 220, 0.6) 40%, rgba(18, 197, 181, 0) 100%); filter: blur(2px); }
#hierarquia .hi-base__label { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
#hierarquia .hi-crown { position: absolute; left: 4%; right: 4%; top: -24px; height: calc(var(--hi-d) * 0.55 + 70px); }
#hierarquia .hi-crown i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(50% 60% at 50% 70%, rgba(79, 240, 220, 0.34), rgba(29, 159, 208, 0.12) 50%, transparent 72%); filter: blur(8px); mix-blend-mode: screen; }

/* ---------- Pilha 3D ---------- */
#hierarquia .hi-stack {
  position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--hi-gap);
  perspective: 1500px;
  perspective-origin: calc((100% - var(--hi-anno-w) - var(--hi-colgap)) / 2) -40%;
}
#hierarquia .hi-tier { display: grid; grid-template-columns: minmax(0, 1fr) var(--hi-anno-w); column-gap: var(--hi-colgap); align-items: center; transform-style: preserve-3d; }
#hierarquia .hi-col { position: relative; transform-style: preserve-3d; }
#hierarquia .hi-tier--1 { --w: 100%; --a: #0b2145; --b: #12305e; --fg: var(--ink); }
#hierarquia .hi-tier--2 { --w: 90%; --a: #0f3b62; --b: #135a80; --fg: var(--ink); }
#hierarquia .hi-tier--3 { --w: 80%; --a: #0e7e86; --b: #11948f; --fg: #ffffff; }
#hierarquia .hi-tier--4 { --w: 70%; --a: #12a99f; --b: #16bba9; --fg: var(--paper-ink); }
#hierarquia .hi-tier--5 { --w: 64%; --a: #3fc8bd; --b: #6fdccf; --fg: var(--paper-ink); }

#hierarquia .hi-slab {
  position: relative; width: var(--w); height: var(--hi-h); margin-inline: auto;
  transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(-6deg);
}
#hierarquia .hi-face { position: absolute; display: block; backface-visibility: visible; }
#hierarquia .hi-front {
  inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(10px, 1.4vw, 22px);
  padding: 0 clamp(14px, 1.8vw, 30px); border-radius: 4px; overflow: hidden;
  background: linear-gradient(120deg, var(--a), var(--b));
  color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
#hierarquia .hi-front::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px); pointer-events: none; }
#hierarquia .hi-top, #hierarquia .hi-bot { left: 0; right: 0; height: var(--hi-d); transform-origin: 50% 0; }
#hierarquia .hi-top { top: 0; transform: rotateX(-90deg); background: linear-gradient(0deg, color-mix(in srgb, var(--b) 70%, #fff 30%), color-mix(in srgb, var(--b) 55%, transparent)); }
#hierarquia .hi-top::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px); background-size: 18px 18px; }
#hierarquia .hi-bot { top: 100%; transform: rotateX(-90deg); background: color-mix(in srgb, var(--a) 70%, #000 30%); }
#hierarquia .hi-end { top: 0; bottom: 0; width: var(--hi-d); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 80%, #000 20%), color-mix(in srgb, var(--b) 60%, #000 40%)); }
#hierarquia .hi-end--l { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
#hierarquia .hi-end--r { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
#hierarquia .hi-glint { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg); pointer-events: none; mix-blend-mode: overlay; }

/* APRESENTA: a placa-coroa com aro de luz */
#hierarquia .hi-tier--1 .hi-front { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 50px -8px rgba(18, 197, 181, 0.55); }
#hierarquia .hi-tier--1 .hi-front::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad-brand);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
#hierarquia .hi-tier--2 .hi-front { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(111, 211, 255, 0.35); }

/* Conteúdo da placa */
#hierarquia .hi-lvl { position: relative; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; opacity: 0.7; }
#hierarquia .hi-name {
  position: relative; margin: 0; min-width: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%;
  font-size: clamp(14px, min(1.5vw, 2.6vh), 26px); line-height: 1; letter-spacing: 0.005em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#hierarquia .hi-qty { position: relative; margin: 0; display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
#hierarquia .hi-qty b { font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%; font-size: clamp(22px, min(2.5vw, 4.4vh), 42px); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#hierarquia .hi-qty span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }

/* Encaixe fantasma (só com JS, desktop): contorno tracejado do nível, atrás da pilha 3D */
#hierarquia .hi-ghost { position: absolute; left: calc(50% - var(--w) / 2); width: var(--w); height: var(--hi-h); pointer-events: none; }
#hierarquia .hi-ghost__in {
  position: absolute; inset: 0; border: 1px dashed rgba(79, 240, 220, 0.34); border-radius: 4px;
  background: linear-gradient(90deg, rgba(18, 197, 181, 0.07), rgba(18, 197, 181, 0.0) 40%, rgba(18, 197, 181, 0.07));
}
/* Varredura de "sinal aguardando": um pulso de luz sobe pelos encaixes vazios, da base ao topo */
#hierarquia .hi-ghost__in { overflow: hidden; }
#hierarquia .hi-ghost__in::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 24%;
  background: linear-gradient(90deg, rgba(79, 240, 220, 0), rgba(79, 240, 220, 0.2) 50%, rgba(79, 240, 220, 0));
  transform: translateX(-110%); animation: hi-ghost-scan 3.2s cubic-bezier(0.45, 0, 0.25, 1) infinite; animation-delay: calc(var(--i, 0) * 0.16s);
}
@keyframes hi-ghost-scan { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(430%); } }
#hierarquia:not(.hi-inview) .hi-ghost__in::after, #hierarquia:not(.hi-inview) .hi-mote,
#hierarquia:not(.hi-inview) .hi-cone__rays, #hierarquia:not(.hi-inview) .hi-base__disc i { animation-play-state: paused; }
#hierarquia .hi-ghost span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(79, 240, 220, 0.55); }

/* Linha-guia até a função */
#hierarquia .hi-lead {
  position: absolute; top: 50%; height: 1px; left: calc(50% + var(--w) / 2 + 14px); right: calc(-1 * var(--hi-colgap) + 4px);
  background: linear-gradient(90deg, rgba(79, 240, 220, 0), rgba(79, 240, 220, 0.55) 45%, var(--teal));
  transform-origin: 100% 50%;
}
#hierarquia .hi-lead::after { content: ''; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-hi); box-shadow: 0 0 10px var(--teal); }

/* Função + slots de cota */
#hierarquia .hi-anno { display: grid; gap: 8px; align-content: center; }
#hierarquia .hi-role { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.25; color: var(--ink); text-wrap: balance; }
#hierarquia .hi-pips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#hierarquia .hi-pips i { width: 16px; height: 6px; border-radius: 2px; background: var(--teal); box-shadow: 0 0 8px rgba(18, 197, 181, 0.7); }
#hierarquia .hi-tier--2 .hi-pips i, #hierarquia .hi-tier--4 .hi-pips i { background: var(--cyan-hi); box-shadow: 0 0 8px rgba(29, 159, 208, 0.7); }
#hierarquia .hi-pips--many { gap: 3px; }
#hierarquia .hi-pips--many i { width: 6px; }
#hierarquia .hi-pips b { margin-left: 3px; font-family: var(--font-mono); font-size: 12px; line-height: 6px; color: var(--teal-hi); }

#hierarquia .hi-note { margin: clamp(10px, 2vh, 22px) 0 0; font-size: clamp(14px, 1.25vw, 17px); max-width: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) and (min-width: 821px) {
  #hierarquia { --hi-anno-w: 200px; }
  #hierarquia .hi-lvl { display: none; }
  #hierarquia .hi-front { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  #hierarquia { --hi-h: auto; --hi-gap: 20px; --hi-d: 26px; }
  #hierarquia .hi-pin { min-height: 0; padding-block: clamp(84px, 12vh, 120px) 64px; }
  #hierarquia .hi-title { font-size: clamp(28px, 8vw, 40px); }
  #hierarquia .hi-colheads { display: none; }
  #hierarquia .hi-stage { margin-top: 30px; padding-bottom: 86px; }
  #hierarquia .hi-fx { right: 0; }
  #hierarquia .hi-cone { top: 10px; bottom: 50px; clip-path: polygon(0% 0%, 100% 0%, 66% 100%, 34% 100%); }
  #hierarquia .hi-base { height: 70px; width: 70%; }
  #hierarquia .hi-crown { top: -24px; }
  #hierarquia .hi-stack { perspective: 900px; perspective-origin: 50% -30%; }
  #hierarquia .hi-tier { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  #hierarquia .hi-tier--1 { --w: 100%; }
  #hierarquia .hi-tier--2 { --w: 95%; }
  #hierarquia .hi-tier--3 { --w: 90%; }
  #hierarquia .hi-tier--4 { --w: 85%; }
  #hierarquia .hi-tier--5 { --w: 80%; }
  #hierarquia .hi-slab { height: auto; min-height: 58px; transform: rotateX(-8deg); }
  #hierarquia .hi-front { position: relative; inset: auto; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; }
  #hierarquia .hi-top, #hierarquia .hi-bot, #hierarquia .hi-end { display: block; }
  #hierarquia .hi-lvl { display: none; }
  #hierarquia .hi-name { font-size: clamp(14px, 4.1vw, 18px); white-space: normal; line-height: 1.05; }
  #hierarquia .hi-qty b { font-size: 26px; }
  #hierarquia .hi-qty span { font-size: 10px; }
  #hierarquia .hi-lead { display: none; }
  #hierarquia .hi-anno { justify-items: center; text-align: center; padding-inline: 8px; }
  #hierarquia .hi-role { font-size: 15px; color: var(--ink-2); }
  #hierarquia .hi-pips { justify-content: center; }
  #hierarquia .hi-base__label { bottom: -10px; }
}

/* ---------- Movimento reduzido ---------- */
.reduced #hierarquia .hi-pin { min-height: 0; padding-block: clamp(96px, 14vh, 150px) clamp(60px, 10vh, 110px); }
.reduced #hierarquia .hi-cone__rays, .reduced #hierarquia .hi-base__disc i { animation: none; }
.reduced #hierarquia .hi-mote { display: none; }