/* ═══════════════════════════════════════════════════════════════
   X-ID · Hub (raiz x-id.ai)
   Mapa visual das 4 seções. Sem copy — só caminhos.
   Painéis verticais que "inundam" com a cor da seção no hover
   (desktop) e faixas empilhadas no mobile. Tema claro/escuro via
   tokens herdados de styles.css / dark.css.
   ═══════════════════════════════════════════════════════════════ */

.hub {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────── */
.hub-header {
  flex: none;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 20;
}
.hub-header-actions { display: flex; align-items: center; gap: 8px; }
.hub-brand {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.hub-brand:hover { opacity: 0.7; }

/* ── Painéis (desktop: colunas) ─────────────────────────────── */
.hub-panels {
  flex: 1;
  display: flex;
  min-height: 0;
  border-top: 1px solid var(--border-soft);
}

.hub-panel {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 44px 38px;
  border-right: 1px solid var(--border-soft);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}
.hub-panel:last-child { border-right: 0; }

/* faixa de cor da seção (identidade no estado de repouso) */
.hub-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--a);
  z-index: 3;
  transition: opacity 0.4s ease;
}

/* flood: a cor sobe de baixo no hover (versão levemente escurecida
   pra texto branco ter contraste em qualquer accent) */
.hub-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--a);
  transform: translateY(101%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* glyph gigante (marca-d'água) */
.hub-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -60%);
  width: clamp(96px, 11vw, 168px);
  color: var(--a);
  opacity: 0.16;
  z-index: 1;
  transition: opacity 0.45s ease, color 0.45s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hub-glyph svg { width: 100% !important; height: auto !important; }

/* wrapper do texto (nome + subtítulo) */
.hub-text { position: relative; z-index: 2; display: flex; flex-direction: column; }

/* wordmark */
.hub-word {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}
.hub-word-x { color: var(--text-dim); transition: color 0.4s ease; }

/* subtítulo — escondido no repouso, revelado no hover/flood (desktop) */
.hub-tag {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  max-width: 22ch;
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: oklch(0 0 0 / 0.6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════════
   Em construção (MVP = X-HUB + X-BIO)
   Painéis AVATAR/FLOW/DECODE ficam "em rascunho": filete tracejado,
   glifo neutro, hachura de blueprint e crachá mono com versão 0.x.x.
   O painel inteiro é link pra vitrine do produto na X-HUB.
   Token local --build (âmbar de obra), com fallback.
   ═══════════════════════════════════════════════════════════════ */
.hub-panel.is-building { --build: oklch(0.74 0.16 65); }

/* crachá de versão (compacto, sempre visível no canto) */
.hub-badge {
  position: absolute;
  top: 44px; left: 38px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in oklch, var(--bg-base) 66%, transparent);
  backdrop-filter: blur(4px);
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}
.hub-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--build);
  animation: hub-pulse 1.9s ease-out infinite;
}
@keyframes hub-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--build) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hub-ver {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--build);
  filter: saturate(0.9) brightness(0.8);
}

/* eyebrow "Em construção" acima do wordmark (sempre visível, pode quebrar) */
.hub-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--text-dim);
  margin-bottom: 11px;
  max-width: 16ch;
  text-wrap: balance;
  transition: color 0.4s ease;
}

/* filete de topo vira tracejado (rascunho, não "no ar") */
.is-building .hub-strip {
  background: none;
  height: 0;
  border-top: 2px dashed color-mix(in oklch, var(--text-dim) 55%, transparent);
}
/* glifo neutro no repouso — não é marca viva ainda */
.is-building .hub-glyph { color: var(--text-dim); opacity: 0.09; }

/* hachura de planta baixa, bem sutil */
.is-building::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(45deg,
    color-mix(in oklch, var(--text-dim) 13%, transparent) 0 1px,
    transparent 1px 12px);
  opacity: 0.55;
  transition: opacity 0.5s ease;
}

/* CTA "acompanhe" — escondido no repouso, revelado no hover (igual à tag) */
.hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}
.hub-cta-arw { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Hover (desktop) ────────────────────────────────────────── */
@media (hover: hover) and (min-width: 721px) {
  .hub-panel:hover { flex-grow: 1.7; color: var(--ink); }
  .hub-panel:hover::before { transform: translateY(0); }
  .hub-panel:hover .hub-strip { opacity: 0; }
  .hub-panel:hover .hub-word-x { color: var(--ink-soft); }
  .hub-panel:hover .hub-glyph {
    opacity: 1;
    color: var(--ink);
    transform: translate(-50%, -64%);
  }
  .hub-panel:hover .hub-tag { opacity: 1; transform: translateY(0); color: var(--ink-soft); }
  /* esmaece os vizinhos quando um painel é focado */
  .hub-panels:hover .hub-panel:not(:hover) { color: var(--text-dim); }
  .hub-panels:hover .hub-panel:not(:hover) .hub-glyph { opacity: 0.08; }
}

/* foco por teclado = mesmo destaque do hover */
.hub-panel:focus-visible { outline: none; flex-grow: 1.7; color: var(--ink); }
.hub-panel:focus-visible::before { transform: translateY(0); }
.hub-panel:focus-visible .hub-strip { opacity: 0; }
.hub-panel:focus-visible .hub-glyph { opacity: 1; color: var(--ink); transform: translate(-50%, -64%); }
.hub-panel:focus-visible .hub-word-x { color: var(--ink-soft); }
.hub-panel:focus-visible .hub-tag { opacity: 1; transform: translateY(0); color: var(--ink-soft); }

/* ── Mobile / tablet: faixas empilhadas ─────────────────────── */
@media (max-width: 720px) {
  .hub { position: relative; min-height: 100vh; min-height: 100dvh; }
  .hub-panels { flex-direction: column; }
  .hub-panel {
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 22px;
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
    min-height: 19vh;
  }
  .hub-panel:last-child { border-bottom: 0; }

  /* faixa de cor vira barra vertical à esquerda */
  .hub-strip { top: 0; bottom: 0; left: 0; right: auto; width: 4px; height: auto; }

  /* glyph encostado à direita, já colorido (sem hover no mobile) */
  .hub-glyph {
    left: auto; right: 22px; top: 50%;
    transform: translateY(-50%);
    width: clamp(56px, 16vw, 84px);
    opacity: 0.9;
  }

  .hub-word { font-size: clamp(20px, 6vw, 30px); }

  /* no mobile o subtítulo fica sempre visível, discreto sob o nome */
  .hub-tag {
    margin-top: 6px;
    opacity: 1;
    transform: none;
    color: var(--text-dim);
    font-size: 12.5px;
    max-width: 60vw;
  }
  .hub-panel:active .hub-tag { color: var(--ink-soft); }

  /* toque: feedback de flood */
  .hub-panel:active { color: var(--ink); }
  .hub-panel:active::before { transform: translateY(0); }
  .hub-panel:active .hub-strip { opacity: 0; }
  .hub-panel:active .hub-glyph { color: var(--ink); opacity: 1; }
  .hub-panel:active .hub-word-x { color: var(--ink-soft); }

  /* em construção no mobile: crachá compacto no topo, sem CTA (a tag já explica) */
  .hub-badge { top: 12px; left: 22px; padding: 4px 9px; gap: 6px; }
  .hub-badge-dot { width: 6px; height: 6px; }
  .hub-ver { font-size: 10px; }
  .hub-eyebrow { font-size: 9.5px; margin-bottom: 7px; max-width: 60vw; }
  .is-building { padding-top: 30px; }
  .hub-cta { display: none; }
  .is-building:active::after { opacity: 0; }
  .is-building:active .hub-eyebrow { color: var(--ink-soft); }
  .is-building:active .hub-badge { color: var(--ink); border-color: color-mix(in oklch, var(--ink) 30%, transparent); background: color-mix(in oklch, var(--ink) 12%, transparent); }
  .is-building:active .hub-ver { color: var(--ink); filter: none; }
}

/* ── Em construção · hover/foco (desktop) ───────────────────── */
@media (hover: hover) and (min-width: 721px) {
  .hub-panel.is-building:hover::after { opacity: 0; }
  .hub-panel.is-building:hover .hub-badge {
    color: var(--ink);
    border-color: color-mix(in oklch, var(--ink) 32%, transparent);
    background: color-mix(in oklch, var(--ink) 12%, transparent);
  }
  .hub-panel.is-building:hover .hub-ver { color: var(--ink); filter: none; }
  .hub-panel.is-building:hover .hub-eyebrow { color: var(--ink-soft); }
  .hub-panel.is-building:hover .hub-cta { opacity: 1; transform: translateY(0); color: var(--ink-soft); }
  .hub-panel.is-building:hover .hub-cta-arw { transform: translateX(4px); }
}
.hub-panel.is-building:focus-visible::after { opacity: 0; }
.hub-panel.is-building:focus-visible .hub-badge {
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 32%, transparent);
  background: color-mix(in oklch, var(--ink) 12%, transparent);
}
.hub-panel.is-building:focus-visible .hub-ver { color: var(--ink); filter: none; }
.hub-panel.is-building:focus-visible .hub-eyebrow { color: var(--ink-soft); }
.hub-panel.is-building:focus-visible .hub-cta { opacity: 1; transform: translateY(0); color: var(--ink-soft); }