/* =============================================================================
   UNIVERSE · ABOUT · DOCS
   ============================================================================= */

/* ---------- UNIVERSE: worldbuilding ---------------------------------------- */

.hero--universe { min-height: max(72svh, 480px); background: #06060d; }
.hero--universe .hero__media img { object-position: 60% 45%; }
.uni-hero__note {
  margin-top: var(--space-11);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--maia-purple);
}

.beats {
  margin-top: var(--space-14);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-14) var(--gap-split);
}
.beats__item { transition: opacity var(--dur-slow) var(--ease-out); }
.beats__item[data-reveal="inactive"] { opacity: .45; }
.beats__item[data-reveal="active"], .beats__item[data-reveal="completed"] { opacity: 1; }
.beats__num {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--maia-purple);
}
.beats__title { font-size: var(--text-h4); margin-top: var(--space-6); }
.beats__text { color: var(--text-muted); margin-top: var(--space-6); font-size: var(--text-sm); }

/* Elenco: o que não foi revelado PARECE não revelado — opacidade, borda
   tracejada e status escrito. Nunca uma silhueta falsa (readme §3). */
.cast {
  margin-top: var(--space-14);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid-lg);
}
.cast__card {
  border: 1px solid var(--border-faint); border-radius: var(--radius-md);
  padding: var(--space-9); text-align: center;
}
.cast__card[data-known="False"] { border-style: dashed; opacity: .62; }
.cast__portrait { width: 84px; margin-inline: auto; }
.cast__name {
  font-size: var(--text-h4); margin-top: var(--space-7);
  letter-spacing: .04em; font-weight: var(--weight-bold);
}
.cast__role {
  margin-top: var(--space-3);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-muted);
}
.cast__status {
  margin-top: var(--space-7);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--maia-purple);
}
.cast__card[data-known="False"] .cast__status { color: var(--text-label); }
.cast__note {
  margin-top: var(--space-12);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-tight);
  color: var(--text-label); max-width: var(--measure-prose);
}

.timeline-list { list-style: none; margin-block: var(--space-16) 0; padding-block: 0; }
.timeline-list__item {
  padding-block: var(--space-9);
  border-top: 1px solid rgba(168, 85, 247, .16);
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-9);
}
.timeline-list__item[data-state="secret"] { opacity: .55; }
.timeline-list__tag {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-label);
}
.timeline-list__item[data-state="current"] .timeline-list__tag { color: #c084fc; }
.timeline-list__headline { font-size: var(--text-h4); }
.timeline-list__text { color: var(--text-muted); margin-top: var(--space-3); font-size: var(--text-sm); grid-column: 2; }

.seasons {
  list-style: none; margin-block: var(--space-12) 0; padding-block: 0;
  display: grid; gap: var(--space-5);
}
.seasons__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-9);
  padding: var(--space-8); border: 1px solid rgba(168, 85, 247, .16);
  border-radius: var(--radius-md);
}
.seasons__item[data-state="unknown"] { border-style: dashed; opacity: .6; }
.seasons__num {
  font-size: var(--text-mono-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--maia-purple);
}
.seasons__name { font-size: var(--text-h4); }
.seasons__state {
  margin-inline-start: auto;
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}

@media (max-width: 1080px) {
  .beats, .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .beats, .cast { grid-template-columns: 1fr; }
  .timeline-list__item { grid-template-columns: 1fr; gap: var(--space-4); }
  .timeline-list__text { grid-column: 1; }
}


/* ---------- ABOUT: editorial ------------------------------------------------ */

.about-manifesto {
  position: relative; background: #0a0c11;   /* About roda levemente mais neutro */
  padding-block: clamp(120px, 20vh, 220px);
  overflow: clip;   /* o campo de luz respira além das bordas */
}
/* O conteúdo pinta por cima do campo de luz e das marcas técnicas. */
.about-manifesto > .u-content { position: relative; z-index: 1; }

/* Esta é a PRIMEIRA seção da página e o header é overlay: as marcas do topo
   caíam atrás do logo e do botão de menu. A camada começa abaixo dele. */
.about-manifesto > .section-decor { top: var(--header-h); }
.about-manifesto__why {
  margin-top: var(--space-12);
  font-size: var(--text-mono-label); letter-spacing: var(--track-season);
  text-transform: uppercase; color: var(--text-label);
}
.about-manifesto__statement {
  margin-top: var(--space-9);
  font-size: clamp(30px, 4.4vw, var(--text-hero));
  line-height: var(--lh-hero); letter-spacing: -.015em; max-width: 16ch;
}
.about-manifesto__body { color: var(--text-muted); margin-top: var(--space-14); }

.about-origin__stamp {
  /* O eyebrow acima é inline-flex; sem esta margem "BUILT IN BRAZIL" encosta
     nele e as duas linhas mono se confundem — mesmo defeito já corrigido em
     H08, visto agora na revisão da baseline de About. */
  margin-top: var(--space-11);
  font-size: var(--text-mono-label); letter-spacing: var(--track-season);
  text-transform: uppercase; color: var(--accent);
}
.about-origin__text { color: var(--text-muted); margin-top: var(--space-9); }

.journey { list-style: none; margin: var(--space-18) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.journey__item {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-9);
  align-items: baseline; padding-block: var(--space-7);
  border-top: 1px solid var(--border-faint);
}
.journey__item[data-state="pending"] { opacity: .55; }
.journey__tag {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-label);
}
.journey__item[data-state="current"] .journey__tag { color: var(--accent); }
.journey__headline { font-size: var(--text-h4); }
.journey__note {
  grid-column: 2; font-size: var(--text-mono-micro);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--maia-amber); margin-top: var(--space-2);
}
.journey__item[data-state="current"] .journey__note { color: var(--text-label); }

.about-vision__lead { font-size: var(--text-lead); color: var(--text-muted); }
.about-vision__pillars {
  list-style: none; margin: var(--space-16) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-split);
}
.about-vision__pillar-title { font-size: var(--text-h4); }
.about-vision__pillar-text { color: var(--text-muted); margin-top: var(--space-5); font-size: var(--text-sm); }

.about-people { margin-top: var(--space-12); }
.about-people__media { max-width: 620px; }
.about-people__note { color: var(--text-muted); margin-top: var(--space-9); }

@media (max-width: 760px) {
  .about-vision__pillars { grid-template-columns: 1fr; gap: var(--space-11); }
  .journey__item { grid-template-columns: 1fr; gap: var(--space-3); }
  .journey__note { grid-column: 1; }
}


/* ---------- DOCS: workstation ---------------------------------------------- */

/* Sem cena, sem parallax, sem hero. Leitura, hierarquia e navegação. */
.docs {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--gap-split);
  max-width: var(--container-wide); margin-inline: auto;
  padding: var(--space-14) var(--container-pad) var(--space-24);
}

.docs__nav { position: sticky; top: calc(var(--header-h) + var(--space-9)); align-self: start; }
.docs__nav-group + .docs__nav-group { margin-top: var(--space-11); }
.docs__nav-title {
  font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-label); margin-bottom: var(--space-5);
}
.docs__nav ul { list-style: none; margin: 0; padding: 0; }
.docs__nav li + li { margin-top: var(--space-1); }

/* Item pendente: NÃO é um link. Um link que não leva a lugar nenhum seria pior
   que um item declarado como ainda não escrito. */
.docs__nav-item {
  display: block; padding: var(--space-2) 0;
  font-size: var(--text-ui); color: var(--text-label); cursor: default;
}
.docs__nav-item[data-state="pending"]::after {
  content: " ·"; color: var(--maia-amber);
}

.docs__main { min-width: 0; }
.docs__title { font-size: clamp(26px, 3vw, var(--text-h2)); max-width: 22ch; }
.docs__pending {
  margin-top: var(--space-7);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-tight);
  color: var(--maia-amber);
}

.docs__block { margin-top: var(--space-20); }
.docs__h2 {
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--accent);
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--border-faint);
}
.docs__start { margin-top: var(--space-12); }

.docs__steps {
  list-style: none; margin: var(--space-11) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid);
}
.docs__steps li { display: flex; align-items: baseline; gap: var(--space-5); font-size: var(--text-ui); }
.docs__step-num { font-size: var(--text-mono-meta); color: var(--accent); }

/* Índice escalonado — não são quatro cards. */
.docs__index {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12) var(--gap-split);
}
.docs__cat[data-offset="1"] { padding-top: var(--space-11); }
.docs__cat-label { font-size: clamp(21px, 2.1vw, 28px); letter-spacing: -.01em; }
.docs__cat-items { list-style: none; margin: var(--space-7) 0 0; padding: 0; }

.docs__guides { list-style: none; margin: var(--space-11) 0 0; padding: 0; }
.docs__guide {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-7); align-items: baseline;
  padding-block: var(--space-7); border-top: 1px solid var(--border-faint);
}
.docs__guide-num { font-size: var(--text-mono-meta); color: var(--accent); }
.docs__guide-label { font-size: var(--text-ui); color: var(--text-nav); }
.docs__guide-cat {
  font-size: var(--text-mono-micro); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}

.docs__article-body { max-width: var(--measure-prose); margin-top: var(--space-12); }
.docs__article-eyebrow {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-label);
}
.docs__article-title { font-size: var(--text-h3); margin-top: var(--space-6); }
.docs__figure { margin: var(--space-12) 0 0; }
.docs__figure-cap {
  margin-top: var(--space-6);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}

/* MOBILE: artigo full-width primeiro, índice depois (readme §13).
   Antes desta ordem o índice inteiro — dezenas de itens — vinha ANTES do
   conteúdo, e a página abria com uma lista de pendências em vez da pergunta
   "What do you want to build or configure?". Visto na revisão da baseline de
   Docs em 390x844.

   A referência pede um nav DRAWER no celular. Um drawer de verdade entra junto
   com os artigos: enquanto nenhum item navega para lugar nenhum, escondê-lo
   atrás de um gesto só acrescentaria um passo sem destino. */
@media (max-width: 1080px) {
  .docs { grid-template-columns: 1fr; gap: var(--space-14); }
  .docs__nav { position: static; order: 2; }
  .docs__main { order: 1; }
  .docs__index { grid-template-columns: 1fr; }
  .docs__cat[data-offset="1"] { padding-top: 0; }
  .docs__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .docs__steps { grid-template-columns: 1fr; }
  .docs__guide { grid-template-columns: auto minmax(0, 1fr); }
  .docs__guide-cat { grid-column: 2; }
}

/* =============================================================================
   UNIVERSE — o escopo roxo
   ============================================================================= */

/*
 * "Na página do Universe devemos substituir tudo que está em azul pelo tema
 * roxo da página" — dono do projeto, 2026-09-18.
 *
 * O que muda aqui são os ALIASES SEMÂNTICOS, não os tokens. `--maia-cyan` e
 * `--maia-purple` continuam exatamente como o design system os define (readme
 * §6: tokens são a fonte da verdade e não se redefinem). O que este escopo diz
 * é outra coisa: "nesta página, o acento É o roxo". Toda a folha do site lê
 * `var(--accent)` e `var(--maia-line)`, então a troca chega em botões, links,
 * hairlines, bandas, decor, diagramas e foco de uma vez — sem uma regra por
 * componente.
 *
 * O roxo aqui é ATMOSFERA e Season. Ele não vira o roxo de NÍVEL DE ACESSO do
 * Apex, que continua em `--accent-tier-apex` e não é lido nesta página.
 */
.theme-universe {
  --accent: var(--maia-purple);
  --accent-hover: #c084fc;
  --on-accent: #120620;

  --maia-line-strong: rgba(168, 85, 247, .42);
  --maia-line:        rgba(168, 85, 247, .20);
  --maia-line-soft:   rgba(168, 85, 247, .14);
  --maia-line-faint:  rgba(168, 85, 247, .09);

  --maia-cyan-wash: rgba(168, 85, 247, .06);
  --maia-cyan-fill: rgba(168, 85, 247, .09);

  --glow-accent:        var(--glow-purple);
  --glow-accent-strong: 0 0 44px rgba(168, 85, 247, .32);

  /*
   * OS ALIASES DERIVADOS PRECISAM SER REPETIDOS, e isto não é redundância.
   *
   * `--border-placeholder: var(--maia-line-strong)` é declarado em `:root`, e
   * uma custom property é substituída no momento em que é COMPUTADA — ou seja,
   * já em `:root`, com o ciano. O que desce por herança é o valor final, não a
   * expressão. Trocar `--maia-line-strong` aqui embaixo não alcança quem lê
   * `--border-placeholder`.
   *
   * Foi exatamente o que aconteceu com as molduras tracejadas dos retratos do
   * elenco: a página inteira ficou roxa e elas continuaram cianas.
   */
  --border-card:        rgba(168, 85, 247, .20);
  --border-section:     rgba(168, 85, 247, .14);
  --border-faint:       rgba(168, 85, 247, .09);
  --border-placeholder: rgba(168, 85, 247, .42);

  /* Mesma armadilha: `--bg-grid` já vem com `--grid-line` substituído. */
  --grid-line: rgba(168, 85, 247, .055);
  --bg-grid:
    repeating-linear-gradient(0deg,  rgba(168, 85, 247, .055) 0 1px, transparent 1px var(--grid-cell)),
    repeating-linear-gradient(90deg, rgba(168, 85, 247, .055) 0 1px, transparent 1px var(--grid-cell));
}

/* A banda de capítulo herda o escopo: a lavagem e as hairlines saem roxas. */
.theme-universe .section--band {
  background-image: linear-gradient(
    180deg,
    rgba(168, 85, 247, .055),
    rgba(168, 85, 247, .015) 42%,
    rgba(168, 85, 247, .015) 58%,
    rgba(168, 85, 247, .055));
}
.theme-universe .section--band::after {
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .26), transparent);
}

/* O campo de luz e as formas flutuantes também trocam de temperatura. */
.theme-universe .float-shape__body--fill {
  background:
    radial-gradient(circle at 34% 30%, rgba(168, 85, 247, .12), transparent 62%),
    radial-gradient(circle at 72% 76%, rgba(124, 77, 255, .10), transparent 66%);
}
.theme-universe .float-shape__body--ring {
  box-shadow: inset 0 0 40px rgba(168, 85, 247, .06);
}
.theme-universe .decor--dot { box-shadow: 0 0 12px rgba(168, 85, 247, .7); }