/* =============================================================================
   MAIA — site institucional · camada base
   Tokens em css/tokens/ são cópia VERBATIM de wireframe-2/tokens/ (fonte da
   verdade, readme.md §6). Nada aqui redefine um token; só os consome.
   ============================================================================= */

/* ---------- reset mínimo ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* O atributo `hidden` esconde via `display:none` na folha do NAVEGADOR, e
   qualquer `display` de autor ganha dele. Os painéis de tab do site usam
   `display:grid`, então eles apareciam TODOS empilhados apesar de estarem
   marcados como ocultos — os seletores de Platform e Developers pareciam não
   funcionar. Esta regra devolve ao `hidden` a autoridade que ele deveria ter. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  /* overflow-x: clip e não hidden — hidden no body cria um contexto de scroll
     que quebra position:sticky do header em alguns navegadores. */
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-bold); line-height: var(--lh-heading); }
p { margin: 0; }
img, video, svg { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-hud); }
a:hover { color: var(--accent-hover); }

/* Foco: 1px ciano, offset 2px (readme §14). Nunca removido sem substituto. */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.mono { font-family: var(--font-mono); }

/* Conteúdo visível só para leitor de tela. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-7); top: var(--space-7);
  z-index: 100; transform: translateY(-200%);
  background: var(--surface-card); color: var(--text-body);
  border: 1px solid var(--border-card); border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-8);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-meta); text-transform: uppercase;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- larguras (readme §3 — três larguras, não um container) ---------- */

/* Nenhum capítulo vaza na horizontal.
 *
 * As revelações deslocam blocos no eixo X (`slide-right` entra 34px à direita),
 * e esse deslocamento alargava o documento: 14px de rolagem horizontal na Home
 * em 390px de largura, saindo de H07. `overflow-x: clip` com o eixo Y em
 * `visible` recorta sem criar um contêiner de rolagem — e é por isso que NÃO
 * serve `hidden`: ele viraria scrollport e mataria o `position: sticky` da
 * coluna visual de H05.
 */
.section, .hero, .universe, .final-cta, .about-manifesto, .plat-start, .art-band {
  overflow-x: clip;
}

.u-content { width: 100%; max-width: var(--container);      margin-inline: auto; padding-inline: var(--container-pad); }
/* WIDE é `--container-wide` (1280px) — o token do design system, não um número
   escolhido aqui. A primeira versão usava 1400px: em 1440 sobravam 20px de
   respiro de cada lado e a seção parecia ROMPER a página, encostando nas bordas
   enquanto a vizinha de `u-content` recuava 130px. A diferença entre as duas
   larguras tem que ser legível como hierarquia, não como defeito. */
.u-wide    { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--container-pad); }
.u-prose   { max-width: var(--measure-body); }

@media (max-width: 760px) {
  .u-content, .u-wide { padding-inline: var(--space-8); }
}

/* ---------- eyebrow / rótulo mono ------------------------------------------ */

.u-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--accent); margin: 0;
}
.u-eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; flex: none;
}
.u-eyebrow--bare::before { display: none; }

/* ---------- botões ---------------------------------------------------------- */

/* .external-login__submit: botão do callback social, classe fixa no componente compartilhado
   (ver auth-checkout.css) — é o botão primário do site, não um estilo à parte. */
.btn, .external-login__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-5) var(--space-10);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-bold);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-hud),
              border-color var(--dur-fast) var(--ease-hud),
              color var(--dur-fast) var(--ease-hud),
              opacity var(--dur-fast) var(--ease-hud);
}
.btn:active, .external-login__submit:active { opacity: .85; }  /* press: opacidade, nunca escala */
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.btn--primary, .external-login__submit { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover, .external-login__submit:hover { background: var(--accent-hover); color: var(--on-accent); }

/* Âmbar: o CTA da camada Founder respeita a cor da camada, não o ciano do
   resto do site — pedido do dono do projeto (2026-09-19). O glow, quando
   houver, é âmbar também. */
.btn--amber { background: var(--maia-amber); color: var(--maia-black); }
.btn--amber:hover { background: #ffd27a; color: var(--maia-black); }
.btn--amber.btn--glow { box-shadow: 0 0 24px rgba(255, 194, 75, .35); }
.btn--amber.btn--glow:hover { box-shadow: 0 0 34px rgba(255, 194, 75, .5); }

/* glow forte: UM elemento por viewport (readme §9 e §17). Só Get MAIA o recebe. */
.btn--glow { box-shadow: var(--glow-accent); transition: box-shadow var(--dur-base) var(--ease-hud); }
.btn--glow:hover { box-shadow: var(--glow-accent-strong); }

/* No header o glow começa DESLIGADO e é ligado por js/site-header.js quando
   nenhum CTA de conteúdo está em quadro.
   A ordem importa: se o padrão fosse ligado, o header brilharia junto com o CTA
   do hero entre o carregamento e a primeira entrega do IntersectionObserver — e
   sem JavaScript brilharia para sempre. Começando desligado, o pior caso é o
   header sem bloom, que é o estado correto no topo da página, onde o hero é
   dono da atenção. */
.site-header .btn--glow { box-shadow: none; }
.site-header .btn--glow:hover { box-shadow: var(--glow-accent); }
.site-header.has-glow .btn--glow { box-shadow: var(--glow-accent); }
.site-header.has-glow .btn--glow:hover { box-shadow: var(--glow-accent-strong); }

.btn--ghost {
  border-color: var(--maia-line-strong); color: var(--accent); font-weight: var(--weight-medium);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-hover); }

/* ---------- chip de status (cor nunca sozinha — readme §3) ------------------ */

.status-chip {
  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;
  color: var(--text-muted);
}
.status-chip__dot { width: 6px; height: 6px; border-radius: var(--radius-round); flex: none; }
.status-chip--available  .status-chip__dot { background: var(--status-available); }
.status-chip--companion  .status-chip__dot { background: var(--accent); }
.status-chip--preparing  .status-chip__dot { background: var(--status-preparing); }
.status-chip__label { color: var(--text-3, var(--text-muted)); }


/* =============================================================================
   HEADER — três comportamentos (readme §9)
   overlay (sobre o hero) → scrolled (backdrop + blur). Docs usa tool header.
   ============================================================================= */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-slow) var(--ease-hud),
              border-color var(--dur-slow) var(--ease-hud),
              backdrop-filter var(--dur-slow) var(--ease-hud);
}
/* Três colunas, e não um flex com `margin-inline-start: auto`.
 *
 * `1fr auto 1fr` põe a navegação no EIXO do header, não no espaço que sobrou —
 * num flex ela ficava colada na conta e o conjunto todo encostado na borda
 * direita. E a barra usa `--container` (1180px), a mesma largura da coluna de
 * texto do hero: assim o logo nasce alinhado com a headline e a conta recua da
 * borda da janela. Pedido do dono do projeto (2026-09-18). */
.site-header__inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--space-9);
}

/* Login e checkout: logo à esquerda, um único item à direita. Sem coluna do
   meio — ali não há navegação para centralizar. */
.site-header__inner--simple {
  grid-template-columns: auto 1fr;
}
.site-header__inner--simple > :last-child { justify-self: end; }

/* Estado scrolled: aplicado por js/site-header.js a partir de um IntersectionObserver
   na sentinela do hero — não por scroll listener (readme §16: transform/opacity). */
.site-header.is-scrolled {
  background: var(--surface-header);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom-color: var(--border-faint);
}

/* Header de shell funcional (Docs / Checkout / Login): sólido desde o início. */
.site-header--solid {
  position: sticky;
  background: var(--surface-header);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-bottom-color: var(--border-faint);
}

/* ---------- marca ----------------------------------------------------------- */

.site-logo {
  display: inline-flex; align-items: center; gap: var(--space-5);
  min-height: var(--tap-min); color: var(--text-body);
  transition: opacity var(--dur-fast) var(--ease-hud);
}
.site-logo:hover { color: var(--text-body); opacity: .82; }

/* Um arquivo só, em duas medidas. O header leva 44px — o máximo que cabe numa
   barra de 72px sem encostar nas bordas — e o rodapé, 76px. */
.site-logo--mark { justify-self: start; }
.site-logo--full { display: block; }
.site-logo__image { width: auto; height: 76px; max-width: 100%; }
.site-logo--mark .site-logo__image { height: 44px; }

@media (max-width: 600px) {
  .site-logo--mark .site-logo__image { height: 36px; }
  .site-logo--full .site-logo__image { height: 60px; }
}

.site-nav { display: flex; align-items: center; gap: var(--space-8); justify-self: center; }
.site-nav__link {
  position: relative; color: var(--text-nav); font-size: var(--text-ui);
  display: inline-flex; align-items: center; min-height: var(--tap-min);
}
/* hover barato: sublinhado técnico entrando, sem glow por link (readme §9). */
.site-nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 14px;
  height: 1px; background: var(--accent);
  transition: right var(--dur-base) var(--ease-out);
}
.site-nav__link:hover { color: var(--text-body); }
.site-nav__link:hover::after { right: 0; }

/* Estado ativo: marcador + cor, nunca cor sozinha (readme §9). */
.site-nav__link[aria-current="page"] { color: var(--text-body); }
.site-nav__link[aria-current="page"]::after { right: 0; background: var(--accent); }

.site-header__account {
  display: flex; align-items: center; gap: var(--space-7);
  justify-self: end;
}

/* Botão MENU — só no mobile. */
.site-header__menu-btn {
  display: none; align-items: center; gap: var(--space-4);
  min-height: var(--tap-min); min-width: var(--tap-min);
  margin-inline-start: auto; padding: 0 var(--space-3);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-nav);
}
.site-header__menu-btn:hover { color: var(--text-body); }
.site-header__menu-btn .bars {
  width: 16px; height: 1px; background: currentColor; display: inline-block;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor;
}

@media (max-width: 900px) {
  .site-nav, .site-header__account { display: none; }
  /* Sem as duas colunas do meio e da direita, a barra volta a ser
     logo | botão — e o grid de três colunas daria uma coluna vazia no meio. */
  .site-header__inner { grid-template-columns: auto 1fr; }
  .site-header__menu-btn { display: inline-flex; justify-self: end; }
}

/* ---------- menu mobile: superfície quase full-height ----------------------- */

.mobile-nav {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: var(--space-8) var(--space-8) var(--space-14);
  background: var(--maia-black);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility 0s linear var(--dur-base);
}
.mobile-nav[data-open="true"] {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s, 0s, 0s;
}
.mobile-nav__close {
  align-self: flex-end; min-height: var(--tap-min); padding: 0 var(--space-2);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted);
}
.mobile-nav__close:hover { color: var(--text-body); }
.mobile-nav__group {
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--text-label); margin: var(--space-9) 0 var(--space-1);
}
.mobile-nav__link {
  display: block; min-height: var(--tap-min); padding: var(--space-4) 0;
  color: var(--text-body); font-size: 26px; font-weight: var(--weight-bold);
  letter-spacing: -.01em;
}
.mobile-nav__link:hover { color: var(--accent-hover); }
.mobile-nav__cta { margin-top: var(--space-12); align-self: flex-start; }

/* Trava o scroll do fundo enquanto o menu está aberto. */
body.is-nav-open { overflow: hidden; }

/* O <main> ancora o campo de formas soltas pela página (PageFloatField), que
   é absoluto e cobre todo o documento entre header e rodapé. */
main { position: relative; }


/* =============================================================================
   HERO — regra de mídia (readme §8b + guidelines/hero-media-rule.card.html)
   ≈66.666svh · mídia é BACKGROUND full-bleed · copy à esquerda, centrada na
   vertical · o próximo capítulo começa logo abaixo.
   ============================================================================= */

.hero {
  position: relative;
  /* 80svh, e não os 66.666svh da referência: a decisão é do dono do projeto
     (2026-09-18). Em 66% a arte do laboratório era cortada justamente onde a
     composição acontece. Continua longe de 100svh, então o capítulo seguinte
     segue perceptível — que é o motivo da regra original (readme §8b).
     Ver docs/decisoes-tecnicas.md § D21.

     min-height, não height: se a copy crescer (mobile, fonte grande, tradução),
     o hero cresce em vez de cortar a headline ou esconder o CTA. */
  min-height: max(80svh, 460px);
  display: grid;
  grid-template-rows: 1fr auto;
  /* O hero começa ATRÁS do header (overlay), mas a copy não pode ser empurrada
     para baixo por ele: o padding-top é compensado no alinhamento da copy. */
  padding-top: var(--header-h);
  isolation: isolate;
  background: var(--surface-page);
  /* A cena de fundo é maior que o quadro (ver `.hero__media[data-mouse-parallax]`)
     e o campo de luz respira além das bordas: sem recorte aqui os dois
     alargavam o documento e criavam scroll horizontal. `clip` e não `hidden`,
     que criaria um contexto de rolagem. */
  overflow: clip;
}

/* Camada 00 — atmosfera. Está por trás da mídia, não sobre ela. */
.hero__atmosphere {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 22% 40%, rgba(18, 36, 64, .6), transparent 70%),
    radial-gradient(ellipse 45% 45% at 88% 92%, rgba(0, 212, 255, .05), transparent 70%),
    linear-gradient(180deg, var(--maia-black), var(--maia-bg));
}

/* Camada 01 — a mídia. É o fundo do hero: inset 0, cover. Nunca um card. */
.hero__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; }

/* Quando a cena responde ao ponteiro, ela precisa de folga: sem isto o
   deslocamento de ~10px descobriria uma faixa vazia na borda oposta. */
.hero__media[data-mouse-parallax] { inset: -2.4%; }

/* O MediaSlot precisa OCUPAR a camada inteira. Sem isto o slot fica com altura
   automática, o <img> resolve `height:100%` contra `auto`, cai na proporção
   intrínseca (16:9) e fica mais alto que o hero — o object-fit:cover nunca
   entra em ação e o recorte passa a ser ancorado no topo, cortando a MAIA no
   canto inferior direito. Verificado no navegador em 1440x900: img 801px de
   altura dentro de um hero de 600px. */
.hero__media .media-slot { width: 100%; height: 100%; }

.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Enquadramento para a arte NOVA (2026-09-18): o dono do projeto refez
     `home-product-lab-hero` sem a MAIA no canto, e agora o cilindro é o único
     assunto da cena. Todo o enquadramento anterior existia para não cortar a
     personagem ao meio — essa restrição deixou de existir.
     A arte é 16:9 e o hero desktop é ~2:1, então o corte é VERTICAL. 44%
     mantém o halo do topo e a passarela da base dentro do quadro; o eixo
     horizontal fica em 50% porque nada é cortado ali. */
  object-position: 50% 44%;
}

/* Scrim local: só onde a medição de contraste exige (readme §14).
   Gradiente funcional — contraste de texto sobre mídia, não decoração. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    /* Suporte de contraste sob a copy, à esquerda. Calibrado no navegador: mais
       escuro que isto a arte vira uma barra preta e o hero perde a cena; mais
       claro e a headline branca perde contraste sobre as estruturas do lab. */
    linear-gradient(90deg, rgba(5, 7, 12, .88) 0%, rgba(5, 7, 12, .62) 36%, rgba(5, 7, 12, 0) 64%),
    /* Faixa superior: a copy não compete com o header em overlay.
       Faixa inferior: transição para o próximo capítulo por luz, sem régua. */
    linear-gradient(180deg, rgba(5, 7, 12, .5) 0%, transparent 26%, transparent 64%, rgba(7, 10, 16, .88) 100%);
}

.hero__body {
  position: relative; z-index: 3;
  display: flex; align-items: center;
  /* Compensa o padding-top do header para que a copy fique opticamente centrada
     no hero inteiro, e não deslocada para baixo pela faixa do cabeçalho. */
  margin-top: calc(var(--header-h) * -0.5);
  padding-block: var(--space-14);
}

.hero__copy { max-width: 620px; }
.hero__copy > * + * { margin-top: var(--space-7); }

.hero__headline {
  font-size: clamp(34px, 5.2vw, var(--text-hero));
  line-height: var(--lh-hero);
  letter-spacing: -.015em;
  max-width: 14ch;
}
.hero__lead {
  color: var(--text-muted);
  font-size: var(--text-lead);
  max-width: var(--measure-body);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.hero__platform { margin-top: var(--space-8); }

/* Indicação de scroll: discreta, junto ao fim do hero, sem invadir a seção seguinte. */
.hero__cue {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: var(--space-5);
  padding-block: var(--space-8) var(--space-9);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-label);
}
.hero__cue-rail { position: relative; width: 1px; height: 46px; background: var(--maia-line); overflow: hidden; }
.hero__cue-rail::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 16px;
  background: var(--accent);
  animation: hero-rail 2.2s var(--ease-hud) infinite;
}
@keyframes hero-rail {
  from { transform: translateY(-16px); }
  to   { transform: translateY(46px); }
}

@media (max-width: 900px) {
  /* Em retrato o recorte passa a ser HORIZONTAL (a arte é mais larga que o
     quadro), então o eixo que importa aqui é o primeiro: 63% é onde o cilindro
     está na arte nova, e é o que tem de sobreviver ao corte. */
  .hero__media img, .hero__media video { object-position: 63% 46%; }

  /* O texto continua alinhado à esquerda no mobile (readme §8b), então o scrim
     continua sendo lateral — só um pouco mais forte, porque em retrato a copy
     ocupa quase toda a largura. A versão puramente vertical que existia aqui
     apagava a arte inteira; foi corrigida após a revisão em 768x1024. */
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(5, 7, 12, .86) 0%, rgba(5, 7, 12, .58) 58%, rgba(5, 7, 12, .18) 100%),
      linear-gradient(180deg, rgba(5, 7, 12, .5) 0%, transparent 24%, transparent 62%, rgba(7, 10, 16, .9) 100%);
  }
  .hero__body { margin-top: calc(var(--header-h) * -0.25); padding-block: var(--space-12); }
  .hero__headline { max-width: 18ch; }
  .hero__cue { display: none; }   /* mobile: espaço vai para headline/CTA, não para o cue */
}

/* --- celular ---------------------------------------------------------------
   Em 390px de largura o quadro fica ainda mais estreito e o recorte horizontal
   chega a ~39% da arte. Na arte NOVA (2026-09-18) não há mais personagem no
   canto: o cilindro é o único assunto, está a ~63% da largura, e é ele que tem
   de sobreviver ao corte em qualquer viewport. */
@media (max-width: 600px) {
  .hero__media img, .hero__media video { object-position: 64% 46%; }
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(5, 7, 12, .82) 0%, rgba(5, 7, 12, .55) 60%, rgba(5, 7, 12, .28) 100%),
      linear-gradient(180deg, rgba(5, 7, 12, .45) 0%, transparent 22%, transparent 58%, rgba(7, 10, 16, .92) 100%);
  }
}

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

/* Movimento reduzido: o conteúdo permanece, o movimento some (readme §11). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Even .01ms delays inherited visibility on the controls and drops the
     synchronous focus transfer when opening the menu with the keyboard. */
  .mobile-nav, .mobile-nav * { transition: none !important; }
}


/* =============================================================================
   MEDIA SLOT — mídia pendente (planejamento §5)
   Preserva proporção e composição, identifica a pendência de forma discreta e
   acessível, e nunca mostra spinner infinito, imagem quebrada ou botão de play
   sem conteúdo reproduzível.
   ============================================================================= */

.media-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  overflow: hidden;
  background: var(--maia-surface-glass);
}

/* Estado PENDENTE: moldura tracejada + ID de produção, como no wireframe.

   O slot reserva a proporção REAL da mídia que virá — é o que evita o salto de
   layout quando a captura chegar. Em 16:9 e largura cheia isso são centenas de
   pixels, e um retângulo vazio desse tamanho fazia a seção parecer inacabada.
   A superfície então ganha o vocabulário técnico da marca — grade, cantos de
   instrumento e uma varredura lenta — e passa a se ler como PAINEL À ESPERA DE
   SINAL. O que ela declara continua o mesmo: nada aqui finge ser o produto. */
.media-slot--pending {
  border: 1px dashed var(--border-placeholder);
  border-radius: var(--radius-sm);
  padding: var(--space-8);
  text-align: center;
  background-image: var(--bg-grid);
  background-color: var(--maia-surface-glass);
}

/* Cantos de instrumento nos quatro vértices, por dentro da moldura. */
.media-slot--pending::before {
  content: ""; position: absolute; inset: var(--space-5); pointer-events: none;
  background:
    linear-gradient(var(--maia-line-strong) 0 0) 0 0 / 12px 1px no-repeat,
    linear-gradient(var(--maia-line-strong) 0 0) 0 0 / 1px 12px no-repeat,
    linear-gradient(var(--maia-line-strong) 0 0) 100% 0 / 12px 1px no-repeat,
    linear-gradient(var(--maia-line-strong) 0 0) 100% 0 / 1px 12px no-repeat,
    linear-gradient(var(--maia-line-strong) 0 0) 0 100% / 12px 1px no-repeat,
    linear-gradient(var(--maia-line-strong) 0 0) 0 100% / 1px 12px no-repeat,
    linear-gradient(var(--maia-line-strong) 0 0) 100% 100% / 12px 1px no-repeat,
    linear-gradient(var(--maia-line-strong) 0 0) 100% 100% / 1px 12px no-repeat;
}

/* Varredura: prova de que o painel está ligado. */
.media-slot--pending::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .07), transparent);
  animation: maia-sweep 9s linear infinite;
}

/* Compacto (retratos 1:1 de 56–84px) não comporta nem os cantos nem a
   varredura: ali eles viram sujeira. */
.media-slot--compact::before,
.media-slot--compact::after { content: none; }
.media-slot__kind {
  /* Recuado para DENTRO dos cantos de instrumento (`inset: var(--space-5)`):
     colado no canto, o rótulo cruzava o colchete. */
  position: absolute; top: var(--space-3); left: var(--space-9);
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-label);
}
.media-slot__id {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent);
  word-break: break-word;
}
.media-slot__note {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-tight); color: var(--maia-amber);
}

/* Estado RESOLVIDO: a mídia ocupa o slot inteiro, sem moldura. */
.media-slot--resolved { border: 0; padding: 0; background: none; }
.media-slot--resolved img,
.media-slot--resolved video { width: 100%; height: 100%; object-fit: cover; }

/* Estado FALHA: nada de imagem quebrada — a moldura pendente volta com um aviso. */
.media-slot.has-error { border: 1px dashed var(--status-error); }
.media-slot.has-error .media-slot__id { color: var(--status-error); }


/* =============================================================================
   FOOTER — global (readme §10). Sem border-top: a cena final pode continuar nele.
   ============================================================================= */

.site-footer { background: var(--maia-black-2); padding-block: var(--space-18) var(--space-12); }
.site-footer__lead { display: flex; flex-wrap: wrap; gap: var(--space-9); align-items: flex-start; }
.site-footer__brand { flex: 1 1 280px; }
.site-footer__tagline { color: var(--text-muted); margin-top: var(--space-3); max-width: 42ch; }

.site-footer__rule { height: 1px; background: var(--border-faint); margin-block: var(--space-12); }

.site-footer__cols {
  display: grid; gap: var(--space-9);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-footer__col-title {
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--text-label); margin-bottom: var(--space-6);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li + li { margin-top: var(--space-2); }
.site-footer__col a {
  color: var(--text-nav); font-size: var(--text-ui);
  display: inline-flex; align-items: center; min-height: 32px;
}
.site-footer__col a:hover { color: var(--accent-hover); }

/* Status de plataforma integrado ao rodapé, não uma faixa de cards (readme §10). */
.site-footer__system { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-9); align-items: center; }
.site-footer__system-title {
  font-family: var(--font-mono); font-size: var(--text-mono-micro);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-label);
}

.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-9);
  align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--text-mono-meta);
  letter-spacing: var(--track-tight); color: var(--text-label);
}

@media (max-width: 900px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-footer__cols { grid-template-columns: 1fr; }
}

/* Marcador de pendência para slots pequenos (MediaSlot com Compact).
   O ID de produção não cabe numa moldura de 72px — espremê-lo vira um
   amontoado ilegível, visto na revisão de H03. Aqui fica só o marcador; o ID
   segue no texto acessível e, por extenso, ao lado do slot. */
.media-slot--pending.media-slot--compact { padding: 0; }
.media-slot__mark {
  width: 24px; height: 24px;
  border: 1px dashed var(--border-placeholder); border-radius: var(--radius-sm);
  position: relative; flex: none;
}
.media-slot__mark::after {
  content: ""; position: absolute; inset: 7px;
  border-radius: var(--radius-round); background: var(--maia-cyan-fill);
}

/* ---------- sessao no header: "Sair" e' um POST, nao um link ------------------ */

.site-header__logout { display: contents; }
.site-nav__link--button {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; letter-spacing: inherit; text-transform: inherit;
}
.mobile-nav__link--button {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.mobile-nav form { display: contents; }