/* 03 · Por que agora — "Mercado em escala".
   Terra de pontos ao fundo (a câmera se aproxima com o scroll); manchete à esquerda; quatro sinais de
   mercado travam na tela como alvos de HUD (cantoneiras → varredura → contagem → micro-visualização). */
#agora {
  --ag-gw: max(100vw, 179.17vh);
  --ag-gx: 50%;
  background: var(--space);
}
#agora .ag-pin { position: relative; }

/* ---------- Cenário ---------- */
#agora .ag-bg {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh;
  overflow: hidden; pointer-events: none;
}
#agora .ag-globe-c {
  position: absolute; width: var(--ag-gw); aspect-ratio: 5504 / 3072;
  left: calc(50% - var(--ag-gw) / 2); top: calc(50% - var(--ag-gw) / 3.5834);
}
#agora .ag-globe { position: absolute; inset: 0; transform-origin: 81% 63%; }
#agora .ag-globe__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#agora .ag-hubs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#agora .ag-orbit { fill: none; stroke: rgba(111, 211, 255, 0.5); stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
#agora .ag-orbit--2 { stroke: rgba(79, 240, 220, 0.34); stroke-dasharray: 40 14 3 14; }
/* Régua circular de varredura em volta do globo */
#agora .ag-ticks { fill: none; stroke: rgba(111, 211, 255, 0.45); stroke-width: 6; stroke-dasharray: 0.25 1.75; transform-box: fill-box; transform-origin: center; animation: ag-spin 90s linear infinite; }
#agora .ag-ticks--major { stroke: rgba(79, 240, 220, 0.75); stroke-width: 14; stroke-dasharray: 0.4 29.6; animation-duration: 90s; }
@keyframes ag-spin { to { transform: rotate(360deg); } }
#agora .ag-arc { fill: none; stroke: #9ffcef; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.06 0.94; stroke-dashoffset: 1; opacity: 0.95; animation: ag-packet 3.4s linear infinite; filter: drop-shadow(0 0 4px #4ff0dc); }
#agora .ag-arc--b { animation-duration: 4.6s; animation-delay: -1.8s; stroke: #bfeaff; }
#agora .ag-arc--c { animation-duration: 3.9s; animation-delay: -0.9s; }
@keyframes ag-packet { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -0.06; } }
#agora .ag-ping .c { fill: #dffffa; filter: drop-shadow(0 0 5px #4ff0dc); }
#agora .ag-ping .w { fill: none; stroke: #4ff0dc; stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: ag-ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; opacity: 0; }
#agora .ag-ping .w2 { animation-delay: 1.4s; }
#agora .ag-ping:nth-child(2) .w { animation-delay: 0.5s; } #agora .ag-ping:nth-child(2) .w2 { animation-delay: 1.9s; }
#agora .ag-ping:nth-child(3) .w { animation-delay: 1s; } #agora .ag-ping:nth-child(3) .w2 { animation-delay: 2.4s; }
#agora .ag-ping:nth-child(4) .w { animation-delay: 0.3s; } #agora .ag-ping:nth-child(4) .w2 { animation-delay: 1.7s; }
#agora .ag-ping:nth-child(5) .w { animation-delay: 0.8s; } #agora .ag-ping:nth-child(5) .w2 { animation-delay: 2.2s; }
@keyframes ag-ping { 0% { transform: scale(0.6); opacity: 0.95; } 100% { transform: scale(5.2); opacity: 0; } }
#agora .ag-pulse { fill: none; stroke: #6fd3ff; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; filter: drop-shadow(0 0 10px #4ff0dc); }

#agora .ag-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 22, 0.96) 0%, rgba(2, 8, 22, 0.84) 26%, rgba(2, 8, 22, 0.3) 50%, rgba(2, 8, 22, 0.02) 72%),
    linear-gradient(0deg, rgba(2, 8, 22, 0.9) 0%, rgba(2, 8, 22, 0) 30%),
    linear-gradient(180deg, rgba(2, 8, 22, 0.75) 0%, rgba(2, 8, 22, 0) 20%);
}
#agora .ag-gridfx { opacity: 0.28; }
#agora .ag-dim { position: absolute; inset: 0; background: radial-gradient(70% 80% at 72% 55%, rgba(2, 8, 22, 0.25), rgba(2, 8, 22, 0.7)); opacity: 0; }
#agora .ag-bg .concept-tag { right: calc(var(--gutter) + 8px); bottom: 14px; }

/* ---------- Palco ---------- */
#agora .ag-stage {
  z-index: 2;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(28px, 4.4vw, 80px);
  min-height: 100vh; min-height: 100svh;
  padding-block: calc(var(--hud-h) + clamp(28px, 6vh, 72px)) clamp(56px, 9vh, 104px);
}
#agora .ag-left { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 5vh, 56px); min-width: 0; }
#agora .ag-head { padding-top: clamp(0px, 4vh, 48px); }
#agora .ag-title { font-size: clamp(32px, 4.05vw, 70px); max-width: 14ch; }
#agora .ag-hl { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
#agora .ag-hl.is-split { background: none; color: inherit; }
#agora .ag-hl.is-split .ag-w { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }

#agora .ag-foot { display: grid; gap: 18px; max-width: 420px; }
#agora .ag-meter { display: grid; gap: 10px; padding: 14px 16px 12px; border-left: 2px solid var(--teal); background: linear-gradient(90deg, rgba(5, 20, 46, 0.72), rgba(5, 20, 46, 0)); }
#agora .ag-meter__head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
#agora .ag-meter__head b { font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%; font-size: 26px; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
#agora .ag-meter__head small { font-size: 0.55em; color: var(--ink-3); margin-left: 2px; }
#agora .ag-meter__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#agora .ag-meter__bars i { height: 4px; border-radius: 2px; background: rgba(126, 170, 232, 0.18); transition: background 0.4s, box-shadow 0.4s; }
#agora .ag-meter__bars i.is-on { background: var(--teal-hi); box-shadow: 0 0 10px rgba(79, 240, 220, 0.7); }
#agora .ag-meter__bars i.is-on:nth-child(even) { background: var(--cyan-hi); box-shadow: 0 0 10px rgba(111, 211, 255, 0.7); }
#agora .ag-meter__legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
#agora .ag-meter__legend span + span { grid-column: 2 / -1; padding-left: 10px; border-left: 1px solid var(--line-2); }
#agora .ag-src { margin: 0; color: var(--ink-2); font-size: 14px; text-shadow: 0 1px 10px rgba(2, 8, 22, 0.95), 0 0 2px rgba(2, 8, 22, 0.9); }

/* ---------- Cartões ---------- */
#agora .ag-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); align-content: center; min-width: 0; }
#agora .ag-card { --acc: var(--teal-hi); --acc-rgb: 79, 240, 220; position: relative; display: flex; min-width: 0; min-height: 0; }
#agora .ag-card:nth-child(even) { --acc: var(--cyan-hi); --acc-rgb: 111, 211, 255; }
#agora .ag-card__bg {
  position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(165deg, rgba(20, 52, 100, 0.5) 0%, rgba(6, 22, 48, 0.72) 55%, rgba(4, 16, 38, 0.82) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 80px -34px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#agora .ag-card__bg::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, rgba(var(--acc-rgb), 0.6), rgba(29, 159, 208, 0.1) 38%, rgba(126, 170, 232, 0.06) 66%, rgba(var(--acc-rgb), 0.32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
#agora .ag-card__bg::after { content: ''; position: absolute; right: -20%; top: -40%; width: 70%; height: 90%; background: radial-gradient(closest-side, rgba(var(--acc-rgb), 0.12), transparent); pointer-events: none; }
#agora .ag-card > .hud-c { z-index: 3; width: 16px; height: 16px; border-color: var(--acc); }
#agora .ag-card__scan { position: absolute; left: 6px; right: 6px; top: 0; height: 2px; z-index: 4; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc) 20%, #fff 50%, var(--acc) 80%, transparent); box-shadow: 0 0 16px rgba(var(--acc-rgb), 0.9), 0 0 40px rgba(var(--acc-rgb), 0.5); opacity: 0; pointer-events: none; }
#agora .ag-card__in { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: clamp(16px, 2.6vh, 28px) clamp(18px, 1.7vw, 28px) clamp(14px, 2.2vh, 22px); }
#agora .ag-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
#agora .ag-idx { color: var(--acc); }
#agora .ag-scope { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#agora .ag-scope i { width: 6px; height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
#agora .ag-num { margin: clamp(8px, 1.6vh, 16px) 0 0; font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%; line-height: 0.9; letter-spacing: -0.02em; font-size: clamp(50px, 5.4vw, 96px); color: var(--ink); }
#agora .ag-num__v { display: inline-flex; align-items: baseline; gap: 0.1em; white-space: nowrap; }
#agora .ag-num b { font-weight: inherit; font-variant-numeric: tabular-nums; text-shadow: 0 0 42px rgba(var(--acc-rgb), 0.4); }
#agora .ag-num small { font-size: 0.4em; font-weight: 800; letter-spacing: 0; color: var(--acc); }
#agora .ag-desc { margin: clamp(6px, 1.2vh, 12px) 0 0; max-width: 30ch; color: var(--ink-2); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.36; text-wrap: pretty; }

/* Micro-visualizações (decorativas, sem eixos com valores) */
#agora .ag-viz { position: relative; flex: 1 1 auto; height: 112px; min-height: 64px; margin-top: clamp(10px, 1.8vh, 18px); }
#agora .ag-viz > svg, #agora .ag-viz > canvas { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 18px); overflow: visible; }
#agora .ag-lbl { position: absolute; bottom: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
#agora .ag-lbl--l { left: 0; }
#agora .ag-lbl--r { right: 0; }
#agora .ag-gridl { fill: none; stroke: rgba(126, 170, 232, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
#agora .ag-area { fill: url(#ag-area-grad); }
#agora .ag-line { fill: none; stroke: url(#ag-line-grad); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(79, 240, 220, 0.7)); }
#agora .ag-tip { position: absolute; left: 100%; top: 7%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #eafffb; box-shadow: 0 0 0 4px rgba(79, 240, 220, 0.25), 0 0 18px #4ff0dc; }
#agora .ag-tip::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(79, 240, 220, 0.6); animation: ag-tip 1.8s ease-out infinite; }
@keyframes ag-tip { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

#agora .ag-dots circle { fill: rgba(126, 170, 232, 0.2); transform-box: fill-box; transform-origin: center; transition: fill 0.25s, transform 0.35s var(--ease-out); transform: scale(0.8); }
#agora .ag-dots circle.is-on { fill: var(--cyan-hi); transform: scale(1); }
#agora .ag-dots circle.is-on.is-hot { fill: #eafaff; }
#agora .ag-dots { filter: drop-shadow(0 0 4px rgba(111, 211, 255, 0.55)); }

#agora .ag-people use { fill: rgba(126, 170, 232, 0.2); transition: fill 0.3s; }
#agora .ag-people use.is-on { fill: var(--cyan-hi); }
#agora .ag-people { filter: drop-shadow(0 0 4px rgba(111, 211, 255, 0.5)); }

/* ---------- Modo com pin (desktop) ---------- */
#agora.ag-pinned .ag-pin { height: 100vh; height: 100svh; overflow: hidden; }
#agora.ag-pinned .ag-bg { position: absolute; inset: 0; height: auto; margin: 0; }
#agora.ag-pinned .ag-stage { height: 100vh; height: 100svh; min-height: 0; }
#agora.ag-pinned .ag-cards { grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; }
#agora.ag-pinned .ag-viz { height: auto; }
#agora.ag-pinned .ag-card:nth-child(2), #agora.ag-pinned .ag-card:nth-child(4) { transform: translateY(3.2vh); }
#agora.ag-pinned .ag-card:nth-child(1), #agora.ag-pinned .ag-card:nth-child(3) { transform: translateY(-1.2vh); }

@media (max-width: 1099px) {
  #agora .ag-stage { grid-template-columns: minmax(0, 1fr); align-content: start; gap: clamp(32px, 6vh, 56px); }
  #agora .ag-left { justify-content: start; }
  #agora .ag-head { padding-top: 0; }
  #agora .ag-title { font-size: clamp(30px, 5.6vw, 54px); max-width: 18ch; }
  #agora .ag-foot { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  #agora .ag-cards { order: 2; }
}
@media (max-width: 820px) {
  #agora { --ag-gw: 225vw; }
  #agora .ag-globe__img { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 80%, transparent 100%); }
  #agora .ag-globe-c { left: calc(64vw - 0.81 * var(--ag-gw)); top: calc(72svh - 0.63 * var(--ag-gw) / 1.7917); }
  #agora .ag-shade {
    background:
      linear-gradient(180deg, rgba(2, 8, 22, 0.92) 0%, rgba(2, 8, 22, 0.6) 34%, rgba(2, 8, 22, 0.08) 62%, rgba(2, 8, 22, 0.35) 100%);
  }
  #agora .ag-stage { padding-block: calc(var(--hud-h) + 40px) 72px; }
  #agora .ag-title { font-size: clamp(28px, 8.2vw, 40px); }
  #agora .ag-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #agora .ag-card__in { padding: 18px 18px 14px; }
  #agora .ag-num { font-size: clamp(52px, 17vw, 76px); }
  #agora .ag-viz { height: 136px; }
  #agora .ag-bg .concept-tag { right: 12px; bottom: 12px; }
}

/* Movimento reduzido: tudo em fluxo, sinais completos */
.reduced #agora .ag-ping .w, .reduced #agora .ag-arc, .reduced #agora .ag-tip::after, .reduced #agora .ag-ticks { animation: none; }
.reduced #agora .ag-arc { stroke-dasharray: none; opacity: 0.4; }