/* =============================================================================
   MAIA — seções da Home
   Camada acima de site.css. Consome tokens, nunca os redefine.
   ============================================================================= */

/* ---------- primitive de seção --------------------------------------------- */

/* Sem borda por padrão e sem degrau de fundo obrigatório (readme §17): a divisão
   entre capítulos é contextual — luz, ambiente, sobreposição, respiro. */
.section {
  position: relative;
  /* O header é overlay e fixo: sem isto, um link direto para #agents pousaria
     com o eyebrow e a headline escondidos atrás dele. Verificado na revisão
     das capturas de H02/H03. */
  scroll-margin-top: calc(var(--header-h) + var(--space-8));
}

/* Cinco registros de ritmo (readme §3). Seções vizinhas NÃO usam o mesmo. */
.section--compact   { padding-block: var(--space-14); }
.section--standard  { padding-block: var(--section-y); }
.section--generous  { padding-block: var(--section-y-lg); }
.section--cinematic { padding-block: clamp(90px, 12vh, 150px); }
.section--viewport  { padding-block: clamp(110px, 18vh, 220px); }

.section--deep   { background: var(--maia-black-2); }
.section--raised { background: var(--maia-bg-raised); }

.section__head > * + * { margin-top: var(--space-6); }
.section__heading {
  font-size: clamp(26px, 3.2vw, var(--text-h2));
  letter-spacing: -.01em;
  max-width: 20ch;
}
.section__lead { color: var(--text-muted); font-size: var(--text-lead); }

.u-eyebrow--purple { color: var(--maia-purple); }

/* Motivo técnico: a grade de 40px pertence a contextos técnicos (readme §3).
   Nunca atrás de Universe, Founder, hero cinematográfico ou CTA final. */
.section--grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg-grid);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
}
.section--grid > * { position: relative; z-index: 1; }


/* =============================================================================
   Diagramas do motion system
   ============================================================================= */

/* `flex: 1 1 100%` e `min-width: 0` porque a figura quase sempre é filha de um
   flex/grid: sem isso ela encolhe para o conteúdo e o SVG, que é `width:100%`
   de um pai de largura automática, colapsa. Era a causa dos motions minúsculos
   em palcos largos. */
.flow-figure { margin: 0; width: 100%; flex: 1 1 100%; min-width: 0; }
.flow-figure__canvas { width: 100%; }
.flow-figure__caption {
  margin-top: var(--space-7);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--text-label); text-align: center;
}

/* Estado base = estado reduzido: sem JS, o slot se identifica em vez de sumir. */
.flow-figure__fallback {
  border: 1px dashed var(--border-placeholder); border-radius: var(--radius-sm);
  padding: var(--space-12) var(--space-8);
  text-align: center; font-size: var(--text-xs); color: var(--accent);
}

/* Um diagrama que não conseguiu carregar não pode virar um buraco silencioso. */
.flow-figure__canvas[data-flow-error]::after {
  content: "DIAGRAMA INDISPONÍVEL · " attr(data-flow-error);
  display: block; padding: var(--space-12) var(--space-8);
  border: 1px dashed var(--status-error); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-tight); color: var(--status-error); text-align: center;
}


/* =============================================================================
   H02 — Providers · o ÚNICO carrossel do site
   ============================================================================= */

/* HORIZONTAL, não empilhado.
   A mensagem ficava ACIMA do palco e sobrava meia tela vazia dos dois lados —
   o numeral gigante de um lado e o diagrama minúsculo do outro. Em linha, a
   mensagem ocupa a coluna estreita e o palco recebe a largura que o diagrama
   precisa. */
.carousel {
  margin-top: var(--space-14);
  display: grid; grid-template-columns: minmax(260px, .38fr) minmax(0, 1fr);
  gap: var(--gap-split); align-items: center;
}

.carousel__message { position: relative; min-height: 210px; }
.carousel__message-item {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.carousel__message-item[data-active] { opacity: 1; transform: none; }

.carousel__num {
  display: block; font-size: 72px; font-weight: var(--weight-bold); line-height: 1;
  color: rgba(0, 212, 255, .16);
}
.carousel__msg {
  font-size: clamp(22px, 2vw, var(--text-h2));
  line-height: var(--lh-heading); font-weight: var(--weight-bold);
  margin-top: var(--space-6); max-width: 24ch; text-wrap: balance;
}

.carousel__viewport { overflow: hidden; }
.carousel__track {
  display: flex;
  align-items: center;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 100%; min-width: 0;
  padding-inline: 2px;             /* evita o clipping do glow dos nós na borda */

  /* Palco de altura ESTÁVEL, em pixels e não em `svh`.
     A trilha é um flex: a altura dela é a do slide mais alto, então o slot 16:9
     do slide 04 ditava a altura de TODOS — e sobrava meia tela vazia sob os
     diagramas, que têm ~250px. Verificado na revisão de H02 em 1440x900.
     `svh` piorava a leitura da evidência, porque numa captura de página
     inteira a viewport vira a altura do documento e o valor estoura o clamp. */
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
}

/* O slot de produto real não precisa ocupar a largura toda: em 16:9 isso o
   tornaria mais alto que o palco inteiro, e como a trilha é um flex a altura
   dele viraria a altura de todos os slides. 520px em 16:9 dão ~292px — a mesma
   ordem de grandeza dos diagramas dos outros três slides. */
.carousel__media { border-radius: var(--radius-sm); max-width: 520px; }

.carousel__controls {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8);
  margin-top: var(--space-11);
}

.carousel__progress {
  flex: 1 1 160px; height: 1px; background: var(--maia-line); overflow: hidden;
}
.carousel__progress-bar { display: block; height: 1px; width: 0; background: var(--accent); }

.carousel__dots { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.carousel__dot {
  display: inline-flex; align-items: center; gap: var(--space-4);
  min-height: var(--tap-min); padding: 0 var(--space-6);
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-label);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-hud), border-color var(--dur-fast) var(--ease-hud);
}
.carousel__dot:hover { color: var(--text-nav); }
/* Selecionado: cor + borda + numeral destacado — nunca só cor (readme §3). */
.carousel__dot[aria-selected="true"] {
  color: var(--text-body); border-color: var(--maia-line-strong);
}
.carousel__dot[aria-selected="true"] .carousel__dot-num { color: var(--accent); }

.carousel__nav { display: flex; gap: var(--space-3); margin-inline-start: auto; }
.carousel__arrow {
  width: var(--tap-min); height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border-card); border-radius: var(--radius-sm);
  color: var(--accent); cursor: pointer; font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-hud), color var(--dur-fast) var(--ease-hud);
}
.carousel__arrow:hover { border-color: var(--accent); color: var(--accent-hover); }

/* TABLET / MOBILE: a composição em linha vira sequência — mensagem, depois
   palco. Uma ideia principal por vez (readme §13). */
@media (max-width: 1080px) {
  .carousel { grid-template-columns: 1fr; gap: var(--space-11); }
  .carousel__message { min-height: 150px; }
}

@media (max-width: 760px) {
  .carousel__num { font-size: 52px; }
  .carousel__message { min-height: 128px; }
  .carousel__nav { margin-inline-start: 0; }
  .carousel__controls { gap: var(--space-6); }
  .carousel__dot-label { display: none; }   /* no celular o numeral basta */
}

/* Sem JS o carrossel vira uma sequência vertical: todo o conteúdo continua
   alcançável, que é a regra — nenhuma informação depende de movimento. */
.no-js .carousel__track { display: block; transform: none !important; }
.no-js .carousel__slide { margin-bottom: var(--space-12); }
.no-js .carousel__controls, .no-js .carousel__message { display: none; }


/* =============================================================================
   H03 — Agents · padrão INSPECTOR (palco + selecionado + contexto)
   ============================================================================= */

.agents {
  margin-top: var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: var(--gap-split);
  /* `center`, e não `start`: o palco do diagrama tem ~380px e o inspector
     passa de 800px. Alinhados pelo topo, sobrava meia tela vazia sob o
     diagrama — visto na revisão de H03 em 1440x900. */
  align-items: center;
}

/* Revelação do palco: máscara + profundidade, NÃO um fade-up genérico
   (readme §11 — fade-up em tudo é a maior fonte de cara de template). */
.agents__stage {
  min-width: 0;
  transition: opacity var(--dur-slow) var(--ease-out), clip-path 600ms var(--ease-out);
}
.agents__stage[data-reveal="inactive"] { opacity: .25; clip-path: inset(0 22% 0 0); }
.agents__stage[data-reveal="active"],
.agents__stage[data-reveal="completed"] { opacity: 1; clip-path: inset(0 0 0 0); }

.agents__panel { min-width: 0; }

.agents__roster { display: flex; flex-direction: column; gap: var(--space-2); }

.agent-chip {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--space-5);
  width: 100%; min-height: var(--tap-min); padding: var(--space-5) var(--space-7);
  background: none; cursor: pointer; text-align: start;
  border: 1px solid transparent; border-inline-start: 1px solid var(--border-faint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-nav); font-family: var(--font-body); font-size: var(--text-ui);
  transition: border-color var(--dur-fast) var(--ease-hud),
              background var(--dur-fast) var(--ease-hud),
              color var(--dur-fast) var(--ease-hud);
}
.agent-chip:hover { color: var(--text-body); border-inline-start-color: var(--maia-line-strong); }

/* Selecionado: trilho lateral + fundo + nome em destaque. Cor nunca sozinha. */
.agent-chip[aria-selected="true"] {
  color: var(--text-body);
  background: var(--maia-cyan-wash);
  border-color: var(--border-faint);
  border-inline-start: 2px solid var(--accent);
}

.agent-chip__dot { width: 6px; height: 6px; border-radius: var(--radius-round); }
.agent-chip__name { font-weight: var(--weight-medium); letter-spacing: .04em; }
.agent-chip__role {
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-label);
}

[data-status="available"] .agent-chip__dot,
.agent-chip__dot[data-status="available"] { background: var(--status-available); }
.agent-chip__dot[data-status="working"] { background: var(--accent); }
.agent-chip__dot[data-status="queued"] { background: var(--status-preparing); }

.agents__inspector {
  margin-top: var(--space-9);
  border: 1px solid var(--border-card); border-radius: var(--radius-md);
  background: var(--surface-card); padding: var(--space-9);
}

.agent-card__head { display: flex; align-items: center; gap: var(--space-7); }
.agent-card__portrait { width: 56px; flex: none; }
.agent-card__asset {
  margin-top: var(--space-6);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}
.agent-card__asset span { color: var(--maia-amber); text-transform: none; letter-spacing: 0; }
.agent-card__name { font-size: var(--text-h4); font-weight: var(--weight-bold); letter-spacing: .04em; }
.agent-card__role {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-1);
}

.agent-card__facts { margin: var(--space-9) 0 0; display: grid; gap: var(--space-4); }
.agent-card__facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-7);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border-faint);
}
.agent-card__facts dt {
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-label);
}
.agent-card__facts dd { margin: 0; font-size: var(--text-ui); color: var(--text-body); }

.agent-card__status {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
}
.agent-card__status-dot { width: 6px; height: 6px; border-radius: var(--radius-round); }
.agent-card__status[data-status="available"] .agent-card__status-dot { background: var(--status-available); }
.agent-card__status[data-status="working"] .agent-card__status-dot { background: var(--accent); }
.agent-card__status[data-status="queued"] .agent-card__status-dot { background: var(--status-preparing); }

.agents__note {
  margin-top: var(--space-9); padding-top: var(--space-7);
  border-top: 1px solid var(--border-faint);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-tight);
  line-height: 1.9; color: var(--text-label);
}

/* O agente selecionado acende o nó correspondente no diagrama.
   É CSS lendo `data-selected` — por isso sobrevive a cada re-render do
   FlowRunner, e nenhum dos dois donos escreve no nó do outro.

   O recuo é de OPACIDADE, não de cor: o nó não selecionado continua legível, e
   a seleção já está dita em texto no roster e no inspector. Nada aqui é a única
   forma de saber qual agente está selecionado. */
.agents [data-node-kind="maia"],
.agents [data-node-kind="agent"] { transition: opacity var(--dur-base) var(--ease-hud); }

.agents[data-selected] [data-node-kind="maia"],
.agents[data-selected] [data-node-kind="agent"] { opacity: .5; }

.agents[data-selected="maia"]       [data-node-id="maia"],
.agents[data-selected="davinci"]    [data-node-id="davinci"],
.agents[data-selected="researcher"] [data-node-id="researcher"],
.agents[data-selected="tester"]     [data-node-id="tester"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .agents[data-selected] [data-node-kind="maia"],
  .agents[data-selected] [data-node-kind="agent"] { opacity: 1; }
}

/* TABLET / COMPACT — o inspector desce para baixo do palco (readme §13). */
@media (max-width: 1080px) {
  .agents { grid-template-columns: 1fr; gap: var(--space-14); }
  .agents__roster { flex-direction: row; flex-wrap: wrap; }
  .agent-chip {
    width: auto; flex: 1 1 200px;
    border-inline-start: 1px solid var(--border-faint);
  }
  .agent-chip[aria-selected="true"] { border-inline-start: 2px solid var(--accent); }
}

@media (max-width: 600px) {
  .agents__inspector { padding: var(--space-8); }
  .agent-chip { flex-basis: 100%; }
  .agent-card__facts > div { flex-direction: column; gap: var(--space-1); }
}


/* =============================================================================
   H04 — Computer control · CINEMATIC STAGE
   ============================================================================= */

.cc { margin-top: var(--space-14); }

.cc__lead { font-size: var(--text-lead); color: var(--text-muted); }
.cc__quote { color: var(--text-body); font-weight: var(--weight-medium); }
.cc__arrow { color: var(--accent); padding-inline: var(--space-3); }

.cc__stage {
  position: relative; margin-top: var(--space-16);
  /* O palco é dominante, mas em 16:9 a largura WIDE inteira dá ~750px de
     altura — e enquanto a captura real não existe isso vira um retângulo
     tracejado vazio ocupando quase uma tela. Largura limitada mantém a pausa
     cinematográfica sem o vazio. A proporção reservada continua sendo a do
     vídeo real, então nada muda de composição quando ele chegar. */
  max-width: min(100%, 1060px); margin-inline: auto;
  transition: opacity var(--dur-slow) var(--ease-out), transform 600ms var(--ease-out);
}
/* Revelação por profundidade, não fade-up: o palco vem de trás. */
.cc__stage[data-reveal="inactive"] { opacity: .2; transform: scale(.985); }
.cc__stage[data-reveal="active"],
.cc__stage[data-reveal="completed"] { opacity: 1; transform: none; }

.cc__media { border-radius: var(--radius-sm); }

/* Faixa técnica SOBRE a mídia — é o desenho da referência. */
.cc__phases {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0; margin: 0; padding: var(--space-6) var(--space-8);
  list-style: none;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 12, .92));
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--text-muted);
}
.cc__phase { padding-inline: var(--space-6); }
.cc__phase + .cc__phase::before {
  content: "→"; color: var(--maia-line-strong);
  margin-inline-end: var(--space-6); margin-inline-start: calc(var(--space-6) * -1);
}
/* A etapa central é a ação — o verbo que dá nome à seção. */
.cc__phase[data-phase-index="2"] { color: var(--accent); }

.cc__explain { margin-top: var(--space-16); }

@media (max-width: 760px) {
  .cc__phases {
    position: static; background: none;
    padding-inline: 0; margin-top: var(--space-7);
    font-size: var(--text-mono-meta);
  }
  .cc__phase { padding-inline: var(--space-4); }
}


/* =============================================================================
   H05 — Voice / Workflows / Remote · SELETOR DE FORMAS
   ============================================================================= */

/* Três formas de acionar a MAIA, uma por vez.

   A versão anterior era sticky story: os três blocos empilhados, cada um com
   copy + mídia + diagrama. Davam quase três telas de rolagem para variações do
   MESMO gesto, e o leitor pagava a altura inteira mesmo querendo só uma delas.
   O dono do projeto pediu abas (2026-09-18) e é o que está aqui.

   O trilho é NUMERADO e sublinhado — não são os chips retangulares da Platform
   P05 (`.theater__mode`). Os dois objetos fazem a mesma coisa e precisam
   parecer diferentes: a referência distingue os dois papéis de propósito. */
.ways {
  /* `margin-block` e `padding-block`, nunca os atalhos: `.u-wide` define
     `margin-inline: auto` e `padding-inline`, e um `margin: x 0 0` aqui
     zeraria os dois — a seção inteira encostava nas bordas da tela. */
  margin-block: var(--space-14) 0;
  padding-block: 0;
}

.ways__rail {
  display: flex; flex-wrap: wrap; gap: var(--space-9);
  border-block-end: 1px solid var(--border-faint);
}

.ways__tab {
  display: flex; align-items: baseline; gap: var(--space-5);
  min-height: var(--tap-min); padding: 0 var(--space-3) var(--space-6);
  background: none; border: 0; cursor: pointer; text-align: start;
  /* O sublinhado mora aqui SEMPRE, transparente quando inativo. Se ele só
     existisse na regra de selecionado, a aba saltaria 2px ao ser escolhida. */
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  color: var(--text-nav);
  font-family: var(--font-body); font-size: var(--text-ui);
  transition: color var(--dur-fast) var(--ease-hud),
              border-color var(--dur-fast) var(--ease-hud);
}
.ways__tab:hover { color: var(--text-body); border-block-end-color: var(--maia-line-strong); }

/* Selecionado: trilho + cor + número em destaque. Cor nunca sozinha. */
.ways__tab[aria-selected="true"] {
  color: var(--text-body);
  border-block-end-color: var(--accent);
}
.ways__tab[aria-selected="true"] .ways__tab-num { color: var(--accent); }

.ways__tab-num {
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-label);
  transition: color var(--dur-fast) var(--ease-hud);
}
.ways__tab-label { font-weight: var(--weight-medium); letter-spacing: .04em; }

/* O painel tem DUAS LINHAS: copy + mídia lado a lado, e o diagrama
   atravessando as duas colunas embaixo.

   O diagrama saiu de dentro da coluna da mídia de propósito. Ali ele ficava a
   0,57 da escala — o viewBox tem 880px, e a variante desktop/mobile troca por
   VIEWPORT e não por contêiner, então o que encolhia era a letra. E, com o
   diagrama fora, a coluna da direita passa a ter só a altura da mídia: a copy
   se mede contra ela, e não contra uma coluna alta demais que deixava meia
   tela de vão à esquerda. */
.ways__panel {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--gap-split);
  align-items: center;
  margin-block-start: var(--space-12);
}

.ways__copy  { grid-column: 1; grid-row: 1; }
.ways__stage { grid-column: 2; grid-row: 1; min-width: 0; }
.ways__diagram { grid-column: 1 / -1; grid-row: 2; margin-block-start: var(--space-12); }

.ways__media { border-radius: var(--radius-sm); }

.ways__num {
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--accent);
}
.ways__title { font-size: var(--text-h3); margin-top: var(--space-6); max-width: 18ch; }
.ways__text { color: var(--text-muted); margin-top: var(--space-7); }

/* TABLET / MOBILE — uma ideia por vez, em sequência vertical (readme §13). */
@media (max-width: 1080px) {
  .ways__rail { gap: var(--space-7); }
  .ways__panel {
    grid-template-columns: 1fr;
    gap: var(--space-12);
    margin-block-start: var(--space-11);
  }
  /* Uma coluna: as posições explícitas saem, senão o `grid-column: 2` da
     mídia inventaria uma segunda coluna que o template não tem. */
  .ways__copy, .ways__stage, .ways__diagram { grid-column: 1; grid-row: auto; }
  .ways__diagram { margin-block-start: 0; }
}

/* SEM JAVASCRIPT o seletor não troca nada — então ele não pode ser a única
   porta para o conteúdo. As três formas voltam a ser a sequência vertical da
   versão anterior desta seção, e o trilho sai de cena. */
.no-js .ways__rail { display: none; }
/* O reset global tem [hidden] { display: none !important } (site.css), então
   aqui o !important é o que faz a regra valer. Sem ele o leitor sem JS fica
   com uma forma só e as outras duas somem da página. */
.no-js .ways__panel[hidden] { display: grid !important; }
.no-js .ways__panel + .ways__panel {
  margin-block-start: var(--space-14);
  padding-block-start: var(--space-14);
  border-top: 1px solid var(--border-faint);
}


/* =============================================================================
   H06 — Local-first · o diagrama É o conteúdo, e a página desacelera
   ============================================================================= */

.local-first { margin-top: var(--space-18); }

/* A fronteira termina ABERTA: sem borda inferior, sem régua. A transição para
   H07 é de linguagem, não de separador (readme §20). */
.local-first__boundary {
  margin-top: var(--space-20);
  text-align: center;
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-muted);
}
.local-first__boundary > span { padding-inline: var(--space-5); }
.local-first__next { color: var(--accent); }


/* =============================================================================
   H07 — Developers · uma única cena · sem grid 2x2 · sem carrossel
   ============================================================================= */

.dev {
  margin-top: var(--space-14);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--gap-split); align-items: center;
}

.dev__statement {
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--text-muted); line-height: 2;
}
.dev__statement-strong { display: block; color: var(--text-body); }

.dev__lead { color: var(--text-muted); font-size: var(--text-lead); margin-top: var(--space-9); }

.dev__selector { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-11); }
.dev__option {
  min-height: var(--tap-min); padding: 0 var(--space-7);
  background: none; border: 1px solid var(--border-faint); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-muted);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-hud), border-color var(--dur-fast) var(--ease-hud);
}
.dev__option:hover { color: var(--text-body); border-color: var(--maia-line-strong); }
/* Selecionado: cor + borda + fundo. Três sinais, nunca só a cor. */
.dev__option[aria-selected="true"] {
  color: var(--accent); border-color: var(--accent); background: var(--maia-cyan-wash);
}

.dev__phrase {
  margin-top: var(--space-9); min-height: 3em;
  font-size: var(--text-h4); color: var(--text-body); max-width: 26ch;
}
.dev__cta { margin-top: var(--space-11); }

.dev__scene { min-width: 0; }

@media (max-width: 1080px) {
  .dev { grid-template-columns: 1fr; gap: var(--space-14); }
}


/* =============================================================================
   H08 — Universe / Season 0 · quebra cinematográfica, key art = ambiente
   ============================================================================= */

/* Sem grade técnica, sem painel de vidro, sem card atrás do texto: a arte
   respira e o texto é pequeno (instrução da referência). */
.universe {
  position: relative;
  min-height: clamp(460px, 72svh, 720px);
  display: grid; align-items: center;
  overflow: hidden;
  background: #06060d;              /* Universe roda mais frio e escuro (readme §3) */
}
.universe__media { position: absolute; inset: 0; z-index: 0; }
/* A cena é sobredimensionada quando responde ao ponteiro e ao scroll: sem essa
   folga o deslocamento descobriria uma faixa vazia na borda oposta. */
.universe__media[data-mouse-parallax] { inset: -5%; }
.universe__media .media-slot { width: 100%; height: 100%; }
.universe__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }

.universe__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 6, 13, .9) 0%, rgba(6, 6, 13, .6) 42%, rgba(6, 6, 13, .1) 72%),
    linear-gradient(180deg, rgba(6, 6, 13, .7) 0%, transparent 30%, transparent 62%, rgba(7, 10, 16, .95) 100%);
}

.universe__content { position: relative; z-index: 2; padding-block: var(--space-20); }
.universe__season {
  /* O eyebrow é inline-flex; sem esta margem "SEASON 0" encosta nele e as duas
     linhas mono se confundem — visto na revisão da captura de H08. */
  margin-top: var(--space-11);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-season); text-transform: uppercase;
  color: var(--maia-purple);
}
.universe__title {
  font-size: clamp(38px, 6vw, 72px); line-height: var(--lh-hero);
  letter-spacing: var(--track-tight); margin-top: var(--space-7);
}
.universe__line { color: var(--text-muted); margin-top: var(--space-7); max-width: 34ch; }
.universe__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-12); }

.btn--purple { background: var(--maia-purple); color: var(--maia-text-1); }
.btn--purple:hover { background: #bb7bf9; color: var(--maia-text-1); }
.btn--glow-purple { box-shadow: var(--glow-purple); }

.universe__founder {
  margin-top: var(--space-14); padding-top: var(--space-8);
  border-top: 1px solid rgba(168, 85, 247, .18);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--maia-amber);
  max-width: 40ch;
}
.universe__founder span { display: block; color: var(--text-muted); margin-top: var(--space-2); }

@media (max-width: 760px) {
  /* Mobile: full-bleed, texto no terço inferior (instrução da referência). */
  .universe { align-items: end; }
  .universe__content { padding-block: var(--space-14) var(--space-16); }
  .universe__media img { object-position: 62% 40%; }
  .universe__actions .btn { width: 100%; }
}


/* =============================================================================
   H09 — Access · ACCESS SELECTOR (Core/Apex são ESTADOS, não dois cards)
   ============================================================================= */

.access { margin-top: var(--space-14); }

.access__hint {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-label);
}

.access__options { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-9); }

.access__option {
  flex: 1 1 260px;
  display: grid; gap: var(--space-3);
  padding: var(--space-9); text-align: start; cursor: pointer;
  background: none; border: 1px solid var(--border-faint); border-radius: var(--radius-md);
  color: var(--text-nav);
  transition: border-color var(--dur-base) var(--ease-hud),
              background var(--dur-base) var(--ease-hud),
              box-shadow var(--dur-base) var(--ease-hud);
}
.access__option:hover { border-color: var(--maia-line-strong); }

.access__option-index {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-label);
}
.access__option-name { font-size: var(--text-h4); font-weight: var(--weight-bold); color: var(--text-body); }
.access__option-price { font-size: var(--text-h4); color: var(--text-body); }
.access__per { font-size: var(--text-sm); color: var(--text-label); }

/* Selecionado: borda + fundo + bloom na cor CADASTRADA do plano (`--pick`, escrita
   inline pelo servidor). O CSS não conhece tier: quem colore é o catálogo. A cor
   aqui é NÍVEL DE ACESSO, contida — não é a atmosfera de Universe (readme §3). */
.access__option[aria-selected="true"] {
  border-color: var(--pick, var(--accent));
  background: rgba(var(--pick-rgb, 0, 212, 255), .06);
  box-shadow: 0 0 24px rgba(var(--pick-rgb, 0, 212, 255), .18);
}
.access__option[aria-selected="true"] .access__option-index { color: var(--pick, var(--accent)); }

.access__detail {
  margin-top: var(--space-11); padding-top: var(--space-11);
  border-top: 1px solid var(--border-faint);
}
.access__desc { font-size: var(--text-lead); color: var(--text-body); max-width: 46ch; }

.access__items {
  list-style: none; margin: var(--space-9) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.access__items li {
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--border-faint); border-radius: var(--radius-chip);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted);
}
.access__panel .access__items li { border-color: rgba(var(--pick-rgb, 0, 212, 255), .25); }

.access__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8);
  margin-top: var(--space-11);
}
/* Link isolado é alvo de toque: ≥44px (readme §13) — apontado pela auditoria
   da Etapa 7, onde ele media 22px. */
.access__compare {
  font-size: var(--text-ui);
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}

.access__provisional {
  margin-top: var(--space-11);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-tight);
  color: var(--maia-amber);
}

/* ---------- camada Founder -------------------------------------------------- */

/* A FAIXA FOUNDER — a arte é o fundo da seção, não uma figura ao lado.
 *
 * Pedido do dono do projeto (2026-09-18): "nenhuma arte grande deve ficar
 * pequena, ela deve pegar o background inteiro da seção já que é uma seção
 * especial igual a seção do awakening". Antes o pacote aparecia como uma figura
 * de ~440px numa coluna — uma arte finalizada de 1600px reduzida a miniatura.
 *
 * FULL-BLEED sem truque: a faixa NÃO usa `u-content`. Ela deixou de ser um
 * contêiner de conteúdo e passou a ser uma faixa, então não carrega a classe
 * de largura — é filha direta da seção, que já ocupa a largura toda. Nada de
 * `100vw` nem de margem negativa: `vw` inclui a barra de rolagem e pagaria
 * uma rolagem lateral da largura dela.
 *
 * A composição do pacote continua intocada (planejamento §4): a arte é
 * enquadrada, não redesenhada. O corte tira exatamente as tarjas pretas que a
 * arte traz em cima e embaixo, e o console fica centrado.
 */
.founder {
  position: relative;
  margin-block-start: var(--space-24);
  /* Altura pela ARTE, não pela tela — pedido do dono do projeto (2026-09-18):
     "igual a arte do banner de Awakening, pegando menos largura e menos altura
     para não perder resolução". A arte para em 1280px de largura (abaixo do
     derivado de 1600, nunca ampliada) e a faixa de conteúdo dela, sem tarjas,
     tem 1280/2,577 ≈ 497px. A copy, com o respiro de 56px em cima e embaixo,
     dá ~480px — as duas alturas se encontram, e nenhuma manda na outra. */
  min-height: clamp(420px, 52svh, 540px);
  display: grid; align-items: center;
  isolation: isolate; overflow: clip;
  background: var(--maia-black);
  transition: opacity var(--dur-slow) var(--ease-out);
}
.founder[data-reveal="inactive"] { opacity: .3; }
.founder[data-reveal="active"], .founder[data-reveal="completed"] { opacity: 1; }

/* A arte, como a faixa do capítulo (§ D38): largura nativa no máximo, centrada,
   com as laterais se apagando no fundo. Antes ia de borda a borda (inset -8%)
   e em 1920px o derivado de 1600 era ampliado. Folga vertical de 6% para o
   parallax não descobrir borda; na horizontal quem esconde o deslocamento é
   a máscara. */
.founder__pack {
  position: absolute; top: -6%; bottom: -6%; left: 0; right: 0;
  width: min(100%, 1280px); margin: 0 auto;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}
.founder__pack .media-slot { width: 100%; height: 100%; border-radius: 0; }
.founder__pack img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* A arte traz tarjas pretas de letterbox (15,4% em cima e embaixo — medido no
   arquivo: conteúdo nas linhas 332..1821 de 2160). Com a faixa baixa o quadro
   era largo o bastante (~2,3:1) para o `cover` cortar as tarjas sozinho; mais
   alta, o quadro se aproxima de 16:9 e as tarjas voltariam como duas faixas
   mortas. Então a IMAGEM ganha uma caixa 45% mais alta que o quadro, centrada:
   o `cover` preenche a caixa, e as tarjas caem exatamente na parte que a seção
   recorta. É recorte da moldura do arquivo, não da composição — os planetas,
   as tags e o vidro continuam inteiros. Só no desktop: em retrato o quadro já
   é mais alto que largo e a conta é outra. */
@media (min-width: 901px) {
  /* `height: 145%` EXPLÍCITO, não `auto`: num elemento substituído com `auto`
     a altura intrínseca vence os insets, a caixa ficava na proporção do arquivo
     (com tarjas) e o recorte não acontecia. */
  .founder__pack img { position: absolute; inset: -22.5% 0; width: 100%; height: 145%; }
}

/* SEM scrim no desktop — pedido do dono do projeto (2026-09-19): "a arte está
   muito escura, pode deixar ela totalmente visível, opacidade no máximo e
   nenhuma camada escura por cima". O contraste do texto (readme §14) vem da
   própria arte: o lado esquerdo dela, onde a copy pousa, já é quase preto
   (medido no arquivo). A camada só existe em retrato, onde o console cai
   debaixo do texto — ver abaixo. */
.founder::after {
  content: none;
}

.founder__copy {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding: var(--space-16) var(--container-pad);
}
/* A legenda de produção fica no rodapé da faixa, sobre a arte. */
.founder__caption {
  position: absolute; z-index: 2; right: var(--space-12); bottom: var(--space-9);
}

@media (max-width: 900px) {
  .founder { min-height: clamp(400px, 60svh, 560px); }
  /* Em retrato a faixa é a tela inteira: a máscara lateral só comeria a arte. */
  .founder__pack { -webkit-mask-image: none; mask-image: none; }
  /* Em retrato o console ocupa o meio da arte e a copy cobre quase tudo:
     aqui a camada volta, vertical e só onde há texto, para a copy não pousar
     sobre o brilho. É a única exceção ao "nenhuma camada escura" do desktop. */
  .founder::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(5, 7, 12, .86) 0%, rgba(5, 7, 12, .55) 55%, transparent 100%);
  }
  .founder__caption { right: var(--space-8); bottom: var(--space-7); }
}

.founder__eyebrow {
  font-size: var(--text-mono-label); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--maia-amber);
}
.founder__title { font-size: var(--text-h3); margin-top: var(--space-7); max-width: 20ch; }
/* 40ch: a copy termina antes do console da arte (que começa a ~45% da largura
   dela). Solta, a última linha do lead pousava sobre a caixa de presente. */
.founder__lead { color: var(--text-muted); margin-top: var(--space-7); max-width: 40ch; }

/* ---------- o painel Founder — motion-home/pricing-founder-countdown ---------- */

/* TUDO dentro do contêiner escuro, como na referência: cabeçalho (eyebrow +
   chip com o prazo), título, texto, as quatro casas e a linha de estado. O
   dono do projeto apontou (2026-09-19) que título e texto estavam FORA.
   Largura: cabe à esquerda do console da arte (que começa a ~45% dela) — com
   470px o painel termina em x≈632 em 1440px, e o console começa em ~640. */
.founder__window {
  position: relative;
  max-width: 470px;
  border: 1px solid var(--maia-line); border-radius: var(--radius-md);
  background: var(--maia-black);
  overflow: hidden;
}
.founder__window--pricing { border-color: rgba(255, 194, 75, .22); }

/* Cantos de instrumento em âmbar (HudCorners da referência). */
.founder__window::before,
.founder__window::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--maia-amber); pointer-events: none; z-index: 1;
}
.founder__window::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.founder__window::after  { right: 0; bottom: 0; border-left: 0; border-top: 0; }

.founder__window-head {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: var(--space-7) var(--space-8) 0;
}
.founder__window--pricing .founder__window-head { padding-bottom: var(--space-7); }

.founder__window-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--space-3) var(--space-6);
}
.founder__window-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--maia-amber); white-space: nowrap;
}
.founder__window-sep { width: 1px; height: 10px; background: rgba(255, 194, 75, .3); }
.founder__window-season { color: var(--maia-purple); letter-spacing: var(--track-label); }

/* O chip do prazo: a data é o fato; o cronômetro é a leitura dele. */
.founder__window-chip {
  padding: 3px var(--space-4);
  border: 1px solid rgba(255, 194, 75, .28); border-radius: var(--radius-sm);
  background: var(--maia-amber-wash);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--maia-amber); white-space: nowrap;
}

/* Título e texto com as medidas da referência (18–19px / 13,5px), não as da
   seção: aqui eles são parte de um instrumento, não o cabeçalho da faixa. */
.founder__window-title {
  margin: 0; font-size: 18px; font-weight: var(--weight-semibold, 600);
  line-height: 1.2; letter-spacing: -.01em; color: var(--text-body);
}
.founder__window--pricing .founder__window-title { font-size: 19px; }
.founder__window-lead {
  margin: 0; max-width: 580px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-muted);
}

/* A faixa das casas. Na Home é o próprio painel; em Pricing é uma faixa
   própria — fundo mais fundo, grade mascarada, bordas âmbar. */
.founder__window-band { position: relative; padding: var(--space-6) var(--space-8) 0; }
.founder__window--pricing .founder__window-band {
  padding: var(--space-8) var(--space-8);
  background: var(--maia-black-2);
  border-top: 1px solid rgba(255, 194, 75, .14);
  border-bottom: 1px solid rgba(255, 194, 75, .14);
}
.founder__window--pricing .founder__window-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--bg-grid); opacity: .5;
  -webkit-mask-image: radial-gradient(60% 100% at 50% 50%, #000 20%, transparent 100%);
          mask-image: radial-gradient(60% 100% at 50% 50%, #000 20%, transparent 100%);
}

/* As quatro casas. Dígito grande em mono, tabular para não dançar; rótulo
   pequeno embaixo; dois-pontos em âmbar entre elas, levemente acima da linha
   média dos dígitos — como no wireframe. */
.founder__timer {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
.founder__unit {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 72px;
}
.founder__unit + .founder__unit { position: relative; margin-left: 18px; }
.founder__unit + .founder__unit::before {
  content: ":"; position: absolute; left: -9px; top: 7px;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 32px; line-height: 1;
  color: var(--maia-amber); opacity: .65;
}
.founder__digit {
  font-size: 40px; font-weight: var(--weight-semibold, 600); line-height: 1;
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--text-body);
  transition: color var(--dur-base) var(--ease-hud);
}
.founder__unit-label {
  font-size: 8px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-label);
}

/* Linha de estado ANTES das casas — "Ativa · encerra em" e, embaixo, quanto
   falta (pedido do dono do projeto, 2026-09-19). Encerrada, tudo apaga. */
.founder__window-status {
  display: flex; align-items: center; gap: 7px;
  margin: var(--space-7) var(--space-8) 0; padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-faint);
  font-size: var(--text-mono-micro); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--maia-amber);
  transition: color var(--dur-base) var(--ease-hud);
}
.founder__window--pricing .founder__window-status { margin-top: 0; padding-top: 0; border-top: 0; padding-bottom: var(--space-6); }

/* O botão, dentro do painel, fechando a leitura: estado → casas → ação. */
.founder__window-cta { margin: var(--space-8) var(--space-8) var(--space-8); }
.founder__window-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.founder__window[data-state="closed"] .founder__digit { color: var(--text-label); }
.founder__window[data-state="closed"] .founder__window-status { color: var(--text-muted); }
.founder__window[data-state="closed"] .founder__unit + .founder__unit::before { opacity: .3; }

/* Celular: grade 2×2, dígitos menores, sem dois-pontos — o wireframe. */
@media (max-width: 600px) {
  .founder__window { max-width: none; }
  .founder__timer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .founder__unit { min-width: 0; }
  .founder__unit + .founder__unit { margin-left: 0; }
  .founder__unit + .founder__unit::before { content: none; }
  .founder__digit { font-size: 30px; }
  .founder__window-title { font-size: 16px; }
}

.founder__cta { margin-top: var(--space-11); }

/* Legenda de produção da arte — posicionada em `.founder__caption` acima. */
.founder__caption {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}
@media (max-width: 600px) {
  .access__option { flex-basis: 100%; }
  .access__actions .btn { width: 100%; }
}


/* =============================================================================
   H10 — Questions · MASTER / DETAIL (nunca acordeão empilhado na Home)
   ============================================================================= */

.faq { margin-top: var(--space-14); }

.faq__cats { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.faq__cat {
  min-height: var(--tap-min); padding: 0 var(--space-7);
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-label);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-meta); text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-hud), border-color var(--dur-fast) var(--ease-hud);
}
.faq__cat:hover { color: var(--text-nav); }
.faq__cat[aria-pressed="true"] { color: var(--accent); border-color: var(--maia-line-strong); }

.faq__body {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap-split); align-items: start;
}

.faq__list { list-style: none; margin: 0; padding: 0; }
.faq__item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: var(--space-6);
  width: 100%; min-height: var(--tap-min); padding: var(--space-6) var(--space-5);
  background: none; border: 0; border-top: 1px solid var(--border-faint);
  cursor: pointer; text-align: start; color: var(--text-nav);
  font-family: var(--font-body); font-size: var(--text-ui);
  transition: color var(--dur-fast) var(--ease-hud), background var(--dur-fast) var(--ease-hud);
}
.faq__item:hover { color: var(--text-body); }
.faq__item[aria-selected="true"] { color: var(--text-body); background: var(--maia-cyan-wash); }
.faq__item[aria-selected="true"] .faq__index { color: var(--accent); }

.faq__index { font-family: var(--font-mono); font-size: var(--text-mono-meta); color: var(--text-label); }
.faq__q { line-height: 1.45; }
.faq__cat-tag {
  font-size: var(--text-mono-micro); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}

.faq__answer {
  position: sticky; top: calc(var(--header-h) + var(--space-12));
  border: 1px solid var(--border-card); border-radius: var(--radius-md);
  background: var(--surface-card); padding: var(--space-11);
}
.faq__panel-index {
  font-size: var(--text-mono-meta); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--text-label);
}
.faq__panel-q { font-size: var(--text-h4); margin-top: var(--space-6); }
.faq__pending {
  margin-top: var(--space-9); padding: var(--space-7);
  border: 1px dashed var(--border-placeholder); border-radius: var(--radius-sm);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--maia-amber); text-align: center;
}
.faq__links { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-9); }
.faq__links a { font-size: var(--text-ui); }

/* MOBILE: a lista vem primeiro, a resposta abaixo — sem sticky apertado. */
@media (max-width: 1080px) {
  .faq__body { grid-template-columns: 1fr; gap: var(--space-12); }
  .faq__answer { position: static; }
}


/* =============================================================================
   End frame — o ambiente volta e escurece até o rodapé. SEM border-top.
   ============================================================================= */

.final-cta {
  position: relative;
  padding-block: clamp(120px, 20vh, 220px);
  overflow: hidden;
}

/* O ambiente retorna com o scroll (opacity 0 → 1), como a referência descreve,
   e termina na cor da superfície do rodapé. */
.final-cta__environment {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 900ms var(--ease-out);
  background:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(0, 212, 255, .07), transparent 70%),
    radial-gradient(ellipse 40% 40% at 78% 80%, rgba(168, 85, 247, .05), transparent 72%),
    linear-gradient(180deg, var(--maia-bg) 0%, var(--maia-black) 72%, var(--maia-black-2) 100%);
}
.final-cta[data-reveal="active"] .final-cta__environment,
.final-cta[data-reveal="completed"] .final-cta__environment { opacity: 1; }

.final-cta__content { position: relative; z-index: 1; }

.final-cta__triad {
  font-size: clamp(30px, 4.6vw, 52px); font-weight: var(--weight-bold);
  line-height: 1.08; letter-spacing: -.015em;
}
.final-cta__triad span { display: block; }
.final-cta__triad span:nth-child(2) { color: var(--maia-text-2); }
.final-cta__triad span:nth-child(3) { color: var(--text-muted); }

.final-cta__line { color: var(--text-muted); font-size: var(--text-lead); margin-top: var(--space-9); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-12); }
.final-cta__platform {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-9);
  margin-top: var(--space-14);
}

@media (max-width: 480px) { .final-cta__actions .btn { width: 100%; } }


/* =============================================================================
   FAIXA DE ARTE — uma arte finalizada ocupando a seção inteira
   ============================================================================= */

/*
 * "Nenhuma arte grande deve ficar pequena, ela deve pegar o background inteiro
 * da seção" — dono do projeto, 2026-09-18.
 *
 * O primitive: a arte é o fundo, o texto vem por cima com scrim, e o corte é
 * VERTICAL (`object-position: 50% 50%`) porque as artes de cena têm o assunto
 * no meio e tarjas ou vinheta em cima e embaixo. A altura é a da faixa, não a
 * da arte — é ela que decide quanto do meio entra em quadro.
 */
/*
 * A ALTURA É LIMITADA PELA RESOLUÇÃO DO ARQUIVO, não pelo gosto.
 *
 * A capa tem 1280x720. Com `object-fit: cover` num quadro mais alto que isso o
 * navegador AMPLIA o arquivo, e o dono do projeto viu exatamente isso: "está
 * muito grande e acaba perdendo qualidade". A conta: a camada tem 12% de folga
 * vertical para o parallax, então `altura * 1,12` tem de caber nos 720px do
 * arquivo — daí o teto de 620px.
 */
.art-band {
  position: relative;
  min-height: clamp(380px, 52svh, 620px);
  display: grid; align-items: end;
  isolation: isolate; overflow: clip;
  /* Fundo da PÁGINA, não preto: é contra ele que as bordas apagadas da arte se
     dissolvem. Com um preto mais fundo apareceria um retângulo. */
  background: var(--surface-page);
}

/*
 * A arte não sangra até a janela: ela para em 1280px — a largura NATIVA do
 * arquivo — e as laterais se apagam num degradê até o fundo da página. Assim a
 * faixa nunca amplia o arquivo e mesmo assim não vira um retângulo colado no
 * meio da página.
 *
 * A folga vertical (6%) é onde o parallax de scroll trabalha. Na horizontal não
 * há folga nenhuma: a capa tem o título desenhado a 4,5% da borda esquerda, e
 * qualquer recorte ali comia o "A" de AWAKENING.
 */
.art-band__media,
.art-band__scrim {
  position: absolute; left: 0; right: 0;
  width: min(100%, 1280px); margin-inline: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

.art-band__media { top: -6%; bottom: -6%; z-index: 0; }
.art-band__media .media-slot { width: 100%; height: 100%; }
.art-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Scrim: contraste para o texto na base, e uma vinheta que fecha o topo para a
   faixa não brigar com a seção anterior. Ele acompanha a mesma largura e a
   mesma máscara da arte — se cobrisse a faixa inteira, escureceria as laterais
   vazias e desfaria a fusão com o fundo. */
.art-band__scrim {
  top: 0; bottom: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, .78) 0%, transparent 34%,
                            transparent 46%, rgba(5, 7, 12, .92) 100%);
}

/* Copy opcional sobre a faixa, quando a arte não fala sozinha. */
.art-band__body {
  position: relative; z-index: 2;
  padding-block: var(--space-18);
}
.art-band__eyebrow {
  font-size: var(--text-mono-label); letter-spacing: var(--track-season);
  text-transform: uppercase; color: var(--accent);
}
.art-band__title {
  margin-top: var(--space-7);
  font-size: clamp(30px, 4vw, var(--text-h1));
  line-height: var(--lh-heading); letter-spacing: -.015em; max-width: 18ch;
}
.art-band__text { color: var(--text-muted); margin-top: var(--space-7); }

/* Legenda de produção: discreta, no rodapé da faixa. */
.art-band__caption {
  position: relative; z-index: 2;
  justify-self: end; align-self: end;
  padding: var(--space-9) var(--container-pad);
  font-size: var(--text-mono-meta); letter-spacing: var(--track-meta);
  text-transform: uppercase; color: var(--text-label);
}

/* RETRATO: a faixa passa a ter a PROPORÇÃO DA ARTE, não uma altura própria.
   Com uma altura fixa num quadro estreito o corte deixa de ser vertical e vira
   horizontal — a capa do Capítulo 01 aparecia mostrando só "NING" de AWAKENING,
   porque o título dela está à esquerda. Seguindo a proporção, nada é cortado e
   a arte se lê inteira. */
@media (max-width: 900px) {
  .art-band { min-height: 0; aspect-ratio: 16 / 9; }
  .art-band__media { top: -4%; bottom: -4%; }
  .art-band__body { padding-block: var(--space-14); }
  /* Sem máscara lateral em retrato: ali a faixa já tem a largura da tela e a
     arte cabe inteira, então o degradê só comeria o título. */
  .art-band__media,
  .art-band__scrim { -webkit-mask-image: none; mask-image: none; }
}