/* ═══════════════════════════════════════════════════════════════
   X-HUB · Canteiro de Obras (.hbld-*)  — status BUILDING
   Herda --app / --app2 do .hb-ap. Token-driven (claro/escuro).
   Estética: planta baixa (grid), farol pulsante, progresso 0.x→1.0,
   diário em timeline. Empolga sem virar fita-zebra de obra.
   ═══════════════════════════════════════════════════════════════ */
.hbld { --hbld-line: color-mix(in oklab, var(--app) 22%, var(--border-soft)); }
.hbld-block { padding-top: 34px; }
.hbld-h {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--app); font-weight: 600; margin-bottom: 6px;
}
.hbld-hsub { margin: 0 0 20px; font-size: 14px; color: var(--text-mute); text-wrap: pretty; }

/* ── Banner de obra ─────────────────────────────────────────── */
.hbld-banner {
  position: relative;
  margin-top: 8px;
  padding: 40px clamp(20px, 5vw, 64px) 38px;
  border: 1px solid color-mix(in oklab, var(--app) 30%, var(--border-soft));
  border-radius: 22px;
  background: color-mix(in oklab, var(--app) 6%, var(--bg-elev));
  overflow: hidden;
  isolation: isolate;
}
.hbld-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(color-mix(in oklab, var(--app) 12%, transparent) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, color-mix(in oklab, var(--app) 12%, transparent) 1px, transparent 1px) 0 0 / 26px 100%;
  -webkit-mask-image: radial-gradient(120% 120% at 85% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 85% 0%, #000 0%, transparent 70%);
  opacity: 0.6;
}
.hbld-glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -40%; right: -10%; width: 520px; height: 520px;
  background: radial-gradient(circle, color-mix(in oklab, var(--app) 42%, transparent), transparent 62%);
  filter: blur(18px); opacity: 0.5;
}
.hbld-banner-in { position: relative; z-index: 1; }

.hbld-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: var(--app);
  padding: 6px 12px 6px 11px;
  border: 1px solid color-mix(in oklab, var(--app) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--app) 12%, transparent);
}
.hbld-beacon {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--app);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--app) 60%, transparent);
  animation: hbld-beacon 1.8s ease-out infinite;
}
@keyframes hbld-beacon {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--app) 55%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hbld-ver { color: var(--text); font-weight: 700; letter-spacing: 0.03em; }

.hbld-lead {
  margin: 18px 0 8px;
  font-size: clamp(26px, 4vw, 40px); line-height: 1.06; font-weight: 600;
  letter-spacing: -0.025em; color: var(--text); text-wrap: balance; max-width: 18ch;
}
.hbld-sub { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.55; color: var(--text-mute); text-wrap: pretty; }

/* barra de progresso 0.x → 1.0 */
.hbld-progress { margin-top: 30px; }
.hbld-track {
  position: relative; height: 6px; border-radius: 999px;
  background: color-mix(in oklab, var(--text-dim) 26%, transparent);
}
.hbld-fill {
  position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--app) 70%, var(--app2)), var(--app));
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.hbld-fill-head {
  position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--app);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--app) 22%, transparent), 0 0 12px var(--app);
  animation: hbld-beacon 1.8s ease-out infinite;
}
.hbld-node {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-base);
  border: 2px solid color-mix(in oklab, var(--text-dim) 55%, transparent);
}
.hbld-node.is-done { background: var(--app); border-color: var(--app); }
.hbld-node.is-building { background: var(--app); border-color: var(--app); box-shadow: 0 0 0 4px color-mix(in oklab, var(--app) 20%, transparent); }
.hbld-node.is-launch { border-style: dashed; }
.hbld-track-ends {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em;
}
.hbld-track-launch { display: inline-flex; align-items: center; gap: 5px; color: color-mix(in oklab, var(--app) 70%, var(--text-mute)); }
.hbld-track-mid { color: var(--text-dim); opacity: 0.75; }

/* ── Visão ──────────────────────────────────────────────────── */
.hbld-heroline {
  margin: 0 0 14px; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.3;
  font-weight: 500; color: var(--text); letter-spacing: -0.015em; text-wrap: balance;
}
.hbld-p { margin: 0 0 12px; max-width: 62ch; font-size: 15px; line-height: 1.62; color: var(--text-mute); text-wrap: pretty; }

/* ── Diário / roadmap ───────────────────────────────────────── */
.hbld-road { list-style: none; margin: 0; padding: 0; }
.hbld-step { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding-bottom: 22px; }
.hbld-step:last-child { padding-bottom: 0; }
.hbld-step-rail { position: relative; display: flex; justify-content: center; }
/* linha vertical entre os nós */
.hbld-step:not(:last-child) .hbld-step-rail::after {
  content: ""; position: absolute; top: 30px; bottom: -22px; left: 50%;
  width: 2px; transform: translateX(-50%);
  background: var(--hbld-line);
}
.hbld-step.is-planned:not(:last-child) .hbld-step-rail::after,
.hbld-step.is-launch:not(:last-child) .hbld-step-rail::after {
  background: repeating-linear-gradient(var(--hbld-line) 0 4px, transparent 4px 8px);
}
.hbld-step-dot {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elev); color: var(--text-dim);
  border: 1.5px solid var(--border-soft);
}
.hbld-step.is-done .hbld-step-dot { background: var(--app); color: #fff; border-color: var(--app); }
.hbld-step.is-building .hbld-step-dot {
  background: color-mix(in oklab, var(--app) 16%, var(--bg-elev)); color: var(--app);
  border-color: var(--app); box-shadow: 0 0 0 4px color-mix(in oklab, var(--app) 16%, transparent);
  animation: hbld-beacon 2s ease-out infinite;
}
.hbld-step.is-launch .hbld-step-dot { border-style: dashed; border-color: color-mix(in oklab, var(--app) 55%, var(--border-soft)); color: color-mix(in oklab, var(--app) 75%, var(--text-mute)); }

.hbld-step-body { padding-top: 2px; }
.hbld-step-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.hbld-step-ver { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }
.hbld-step-state {
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  color: var(--text-dim); background: color-mix(in oklab, var(--text-dim) 12%, transparent);
}
.hbld-step.is-done .hbld-step-state { color: var(--app); background: color-mix(in oklab, var(--app) 14%, transparent); }
.hbld-step.is-building .hbld-step-state { color: #fff; background: var(--app); }
.hbld-step-now {
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--app);
}
.hbld-step-date { font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-dim); margin-left: auto; }
.hbld-step-msg { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); max-width: 60ch; text-wrap: pretty; }
.hbld-step.is-launch .hbld-step-msg, .hbld-step.is-planned .hbld-step-msg { color: var(--text-mute); }

/* ── Fundações ──────────────────────────────────────────────── */
.hbld-found { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.hbld-found-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px; border-radius: 16px;
  border: 1px solid var(--border-soft); background: var(--bg-elev);
}
.hbld-found-ic {
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 4px;
  display: grid; place-items: center;
  color: var(--app); background: color-mix(in oklab, var(--app) 12%, transparent);
}
.hbld-found-card b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.hbld-found-card small { font-size: 13px; line-height: 1.45; color: var(--text-mute); }

/* ── Preço planejado ────────────────────────────────────────── */
.hbld-price { border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; background: var(--bg-elev); }
.hbld-price-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 18px; }
.hbld-price-row:not(:last-child) { border-bottom: 1px solid var(--border-soft); }
.hbld-price-name { font-size: 14.5px; color: var(--text); }
.hbld-price-val { font-size: 13px; font-weight: 600; color: var(--app); padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--app) 12%, transparent); }

/* ── Convite duplo ──────────────────────────────────────────── */
.hbld-invite { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hbld-invite-card {
  position: relative; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px; border-radius: 20px;
  border: 1px solid var(--border-soft); background: var(--bg-elev);
  color: var(--text); text-decoration: none; font: inherit;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.hbld-invite-card.is-inv { --c: var(--app); }
.hbld-invite-card.is-dev { --c: color-mix(in oklab, var(--app2) 80%, var(--app)); }
.hbld-invite-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--c) 55%, var(--border-soft)); box-shadow: 0 14px 34px -22px color-mix(in oklab, var(--c) 80%, transparent); }
.hbld-invite-ic {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: var(--c); background: color-mix(in oklab, var(--c) 13%, transparent); margin-bottom: 4px;
}
.hbld-invite-tag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--c); }
.hbld-invite-h { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.hbld-invite-d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-mute); text-wrap: pretty; }
.hbld-invite-btn {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--c);
}
.hbld-invite-btn svg:last-child { transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.hbld-invite-card:hover .hbld-invite-btn svg:last-child { transform: translateX(4px); }

/* ── Follow / avise-me ──────────────────────────────────────── */
.hbld-follow {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 22px 24px; border-radius: 20px;
  border: 1px solid color-mix(in oklab, var(--app) 26%, var(--border-soft));
  background: color-mix(in oklab, var(--app) 5%, var(--bg-elev));
}
.hbld-follow-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--app); background: color-mix(in oklab, var(--app) 13%, transparent); }
.hbld-follow-h { margin: 0 0 3px; font-size: 16px; font-weight: 600; color: var(--text); }
.hbld-follow-p { margin: 0; font-size: 13.5px; color: var(--text-mute); text-wrap: pretty; }
.hbld-follow-form { display: flex; gap: 8px; }
.hbld-follow-input {
  width: 200px; padding: 11px 14px; font-size: 13px;
  border: 1px solid var(--border-soft); border-radius: 11px;
  background: var(--bg-base); color: var(--text);
}
.hbld-follow-input:focus { outline: none; border-color: var(--app); }
.hbld-follow-btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 11px 16px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border: none; border-radius: 11px; color: #fff; background: var(--app);
  transition: filter 0.2s ease;
}
.hbld-follow-btn:hover { filter: brightness(1.06); }
.hbld-follow-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--app); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hbld-banner { padding: 30px clamp(20px, 5vw, 64px) 30px; border-radius: 18px; }
  .hbld-invite { grid-template-columns: 1fr; }
  .hbld-follow { grid-template-columns: 1fr; gap: 14px; }
  .hbld-follow-form { flex-direction: column; }
  .hbld-follow-input { width: 100%; }
  .hbld-follow-btn { justify-content: center; }
}